/* Lot detail page: immersive layout (no header/footer), viewer left, info panel right.
   Breakpoints follow the Hydra page it replaces: stacked below the desktop
   breakpoint, split 3/5 + 2/5 from desktop, 2/3 + 1/3 from wide. */

.page-immersive {
   background: var(--color-bg, #fff);
   color: var(--color-text, var(--color-gray-900));
   font-family: var(--font-body);
}

.lot-page {
   display: flex;
   flex-direction: column;
   min-height: 100vh;
   min-height: 100dvh;
}

.lot-page-media,
.lot-page-info {
   width: 100%;
}

@media (min-width: 1024px) {
   .lot-page {
      flex-direction: row;
      height: 100vh;
      height: 100dvh;
      overflow: hidden;
   }

   .lot-page-media {
      width: 60%;
      height: 100%;
   }

   .lot-page-info {
      width: 40%;
      min-width: 480px;
      height: 100%;
      overflow-y: auto;
   }
}

@media (min-width: 1280px) {
   .lot-page-media {
      width: 66.6667%;
   }

   .lot-page-info {
      width: 33.3333%;
   }
}

/* Info panel */

.lot-info {
   display: flex;
   flex-direction: column;
   gap: var(--space-6);
   width: 100%;
   padding: var(--space-6) var(--container-padding, var(--space-8));
   font-size: .875rem;
}

@media (min-width: 768px) {
   .lot-info {
      padding-inline: var(--space-8);
   }
}

.lot-info-head,
.lot-info-body {
   display: flex;
   flex-direction: column;
   gap: var(--space-6);
}

.lot-info-body {
   gap: var(--space-4);
}

.lot-info-header-row {
   display: flex;
   align-items: center;
   justify-content: space-between;
   gap: var(--space-4);
}

.lot-info-meta {
   display: flex;
   flex-direction: column;
   gap: var(--space-1);
   min-width: 0;
}

.lot-info-sale-meta {
   display: flex;
   align-items: center;
   gap: var(--space-1);
   color: var(--color-gray-900);
}

.lot-info-num {
   font-family: var(--font-heading);
   font-size: 1.25rem;
   color: var(--color-gray-900);
}

.lot-info-close {
   flex: 0 0 auto;
   width: 2.5rem;
   height: 2.5rem;
   min-height: 0;
   padding: var(--space-2);
}

.lot-info-close svg,
.lot-info-readmore-icon,
.lot-info-doc svg {
   width: auto;
   height: .75rem;
   fill: none;
   stroke: currentColor;
   stroke-width: 1.2;
}

.lot-info-doc svg {
   height: 1rem;
}

.lot-info-title {
   margin: 0;
   font-family: var(--font-heading);
   font-size: 1.5rem;
   font-weight: inherit;
   line-height: 1.3;
   color: var(--color-gray-900);
   display: -webkit-box;
   -webkit-line-clamp: 1;
   -webkit-box-orient: vertical;
   overflow: hidden;
}

.lot-info-cta {
   display: flex;
   flex-direction: column;
   gap: var(--space-4);
}

@media (min-width: 640px) {
   .lot-info-cta {
      flex-direction: row;
   }
}

.lot-info-cta-item {
   position: relative;
   display: flex;
   justify-content: flex-end;
   width: 100%;
}

.lot-info-register {
   width: 100%;
   height: 2.5rem;
   min-height: 0;
   padding-block: 0;
}

.lot-info-boxes {
   display: flex;
   gap: var(--space-4);
}

.lot-info-box {
   display: flex;
   flex-direction: column;
   gap: var(--space-4);
   width: 100%;
   padding: var(--space-4);
   border-radius: var(--radius-md);
   background: var(--color-gray-100);
}

.lot-info-boxes .lot-info-box {
   flex: 1;
   gap: 0;
}

.lot-info-box-label {
   color: var(--color-gray-400);
}

.lot-info-box-value {
   font-weight: 500;
   color: var(--color-gray-900);
}

.lot-info-description-clip {
   position: relative;
}

.lot-info-description-text {
   overflow: hidden;
   white-space: pre-line;
   max-height: 10rem;
}

.lot-info-description.is-expanded .lot-info-description-text {
   max-height: none;
}

.lot-info-description-fade {
   position: absolute;
   right: 0;
   bottom: 0;
   left: 0;
   height: 2.5rem;
   pointer-events: none;
   background: linear-gradient(to top, var(--color-gray-100), transparent);
}

.lot-info-readmore {
   display: flex;
   align-items: center;
   gap: var(--space-2);
   padding: var(--space-4) 0 0;
   border: 0;
   background: none;
   color: var(--color-gray-400);
   cursor: pointer;
   transition: opacity .18s var(--ease-out);
}

.lot-info-readmore:hover {
   opacity: .8;
}

.lot-info-readmore-label {
   text-decoration: underline;
}

.lot-info-readmore-icon {
   width: .5rem;
   height: .5rem;
   transform: rotate(90deg);
   transition: transform .3s var(--ease-out);
}

.lot-info-description.is-expanded .lot-info-readmore-icon {
   transform: rotate(-90deg);
}

.lot-info-attributes {
   background: #29333f;
   color: #fff;
}

.lot-info-attributes-list {
   display: flex;
   flex-direction: column;
}

.lot-info-doc {
   width: 100%;
   min-height: 2.5rem;
   padding-block: 0;
}

.lot-info-attributes .lot-info-doc--dark {
   background: transparent;
   border-color: var(--color-gray-100);
   color: #fff;
}

.lot-info-attributes .lot-info-doc--dark:hover {
   background: rgba(255, 255, 255, .1);
   border-color: #fff;
   color: #fff;
}

.lot-info-sale-title {
   font-size: 1rem;
   font-weight: 500;
}

.lot-info-sale-title a {
   color: var(--color-gray-900);
}

.lot-info-sale-title a:hover {
   text-decoration: underline;
}

.lot-info-sale-date {
   color: var(--color-gray-900);
}

.lot-info-address {
   display: flex;
   flex-direction: column;
   gap: var(--space-1);
   color: var(--color-gray-900);
}

.lot-info-address-name {
   font-weight: 500;
}

.lot-info-sale-actions {
   display: flex;
   align-items: center;
   gap: var(--space-2);
}

/* Absentee bid button and popover (markup in snippets/absentee_bid_button.liquid) */

.absentee-bid {
   position: relative;
   display: flex;
   justify-content: flex-end;
   width: 100%;
}

.absentee-bid-toggle {
   width: 100%;
   height: 2.5rem;
   min-height: 0;
   padding-block: 0;
   white-space: nowrap;
}

.absentee-bid-popover {
   position: absolute;
   top: 100%;
   right: 0;
   z-index: 30;
   display: flex;
   flex-direction: column;
   gap: var(--space-4);
   width: 100%;
   max-width: calc(100vw - 2rem);
   margin-top: var(--space-3);
   padding: var(--space-4);
   border: 1px solid var(--color-gray-400);
   border-radius: var(--radius-md);
   background: #fff;
   box-shadow: var(--shadow-md);
}

.absentee-bid-popover[hidden] {
   display: none;
}

@media (min-width: 640px) {
   .absentee-bid-popover {
      width: 380px;
   }
}

.absentee-bid-popover-head {
   display: flex;
   align-items: center;
   justify-content: space-between;
   gap: var(--space-4);
}

.absentee-bid-popover-title {
   font-weight: 500;
   color: var(--color-gray-900);
}

.absentee-bid-icon-button {
   flex: 0 0 auto;
   padding: var(--space-1);
   border: 0;
   background: none;
   color: var(--color-gray-400);
   cursor: pointer;
}

.absentee-bid-icon-button:hover {
   color: var(--color-gray-600);
}

.absentee-bid-icon-button svg {
   width: auto;
   height: .75rem;
   fill: none;
   stroke: currentColor;
   stroke-width: 1.2;
}

.absentee-bid-form {
   display: flex;
   flex-direction: column;
   gap: var(--space-2);
}

.absentee-bid-row {
   display: flex;
   align-items: center;
   gap: var(--space-4);
}

.absentee-bid-input {
   display: flex;
   flex: 1;
   align-items: center;
   gap: var(--space-2);
   height: 2.5rem;
   padding: 0 var(--space-3);
   border: 1px solid var(--color-gray-400);
   border-radius: var(--radius-sm);
   background: #fff;
}

.absentee-bid-input:focus-within {
   border-color: var(--color-gray-900);
}

.absentee-bid-input input {
   flex: 1;
   min-width: 0;
   border: 0;
   outline: 0;
   background: none;
   -moz-appearance: textfield;
}

.absentee-bid-input input::-webkit-outer-spin-button,
.absentee-bid-input input::-webkit-inner-spin-button {
   margin: 0;
   -webkit-appearance: none;
}

.absentee-bid-currency {
   font-weight: 500;
   color: var(--color-gray-900);
}

.absentee-bid-submit {
   width: 100%;
   height: 2.5rem;
   min-height: 0;
   padding-block: 0;
}

.absentee-bid-disclaimer {
   font-size: .75rem;
   color: var(--color-gray-400);
}