/*
 * Single-product runtime layer.
 *
 * This is intentionally small and is kept outside LiteSpeed UCSS. The page
 * contains custom gallery/dropdown markup which does not exist in Astra's
 * original stylesheet and therefore cannot safely be discovered by UCSS.
 */

.single-product .lls-two-col {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  column-gap: 64px;
  align-items: start;
  justify-items: center;
}

.single-product .lls-left {
  grid-column: 1;
  width: 100%;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.single-product .lls-left .lls-breadcrumb,
.single-product .lls-left .breadcrumb-on-product {
  width: 100%;
  align-self: stretch;
}

/* WooCommerce prints this wrapper before every product, even when it contains
 * only whitespace or a deferred fragment. It must not reserve a second,
 * breakpoint-dependent vertical slot above the product; actual notices remain
 * visible through their own message elements. */
.single-product .woocommerce-notices-wrapper {
  min-height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
}

.single-product .lls-product-vertical-gallery {
  position: relative;
  width: 100%;
  max-width: 410px;
  text-align: center;
}

.single-product .lls-product-vertical-gallery__inner {
  width: 410px;
  max-width: 100%;
  display: flex;
  flex-direction: column;
  gap: 10px;
  isolation: isolate;
}

.single-product .lls-product-vertical-gallery__frame {
  position: relative;
  width: 100%;
  isolation: isolate;
}

.single-product .lls-product-vertical-gallery__frame > picture,
.single-product .lls-product-vertical-gallery__frame > picture img,
.single-product .lls-product-vertical-gallery__frame > img {
  display: block;
  width: 100%;
  height: auto;
}

.single-product .summary.entry-summary {
  grid-column: 2;
  width: 480px;
  max-width: 100%;
  min-width: 0;
  margin: 0;
  justify-self: center;
  align-self: start;
  position: sticky;
  top: 290px;
  box-sizing: border-box;
  text-align: left;
}

/* Match the Store catalogue's visual gap from its category menu to the first
 * product image. Keep the offset on both single-product columns so the
 * breadcrumb keeps its shared vertical origin with the Store menu. */
@media (min-width: 922px) {
  .single-product .lls-product-vertical-gallery,
  .single-product .summary.entry-summary {
    margin-top: 25px !important;
  }
}

.single-product .summary.entry-summary > *,
.single-product .summary.entry-summary .variations,
.single-product .summary.entry-summary form.cart,
.single-product .summary.entry-summary .woocommerce-variation-add-to-cart {
  width: 100%;
  max-width: none;
  box-sizing: border-box;
}

/* Keep the variation control stacked and full-width after UCSS generation. */
.single-product .summary.entry-summary > form.variations_form {
  /* The form is the direct sibling of the price. Its own WooCommerce margin
     must not add a second vertical gap before the Size field. */
  margin: 16px 0 0 !important;
}

/* OOAK products use the identical vertical start for the size form as every
   other variable product, regardless of their extra title label. */
.single-product div.product.la-oak-product-unique .summary.entry-summary > form.la-ooak-variations-form {
  margin: 16px 0 0 !important;
}

/* Desktop product rhythm: the price line (20px) plus this 36.5px gap places
 * the Size label exactly 56.5px below the price's top edge. */
@media (min-width: 922px) {
  .single-product .summary.entry-summary > .price {
    line-height: 20px !important;
  }

  .single-product .summary.entry-summary > form.variations_form,
  .single-product div.product.la-oak-product-unique .summary.entry-summary > form.la-ooak-variations-form {
    margin-top: 36.5px !important;
  }

  /* Keep the summary anchored to the same viewport position at every desktop
   * width. The grid already owns horizontal alignment; recalculating this from
   * changing image and form heights caused visible jumps while resizing. */
  .single-product .summary.entry-summary {
    top: 316.5px !important;
  }

  body.admin-bar.single-product .summary.entry-summary {
    top: 342.5px !important;
  }
}

.single-product form.variations_form table.variations,
.single-product form.variations_form table.variations tbody,
.single-product form.variations_form table.variations tr,
.single-product form.variations_form table.variations th.label,
.single-product form.variations_form table.variations td.value {
  display: block !important;
  width: 100% !important;
  max-width: none !important;
  box-sizing: border-box !important;
}

.single-product form.variations_form table.variations {
  margin: 0 !important;
  border: 0 !important;
  border-collapse: collapse !important;
}

.single-product form.variations_form table.variations th.label {
  margin: 0 0 6px !important;
  padding: 0 !important;
  height: auto !important;
  min-height: 0 !important;
  text-align: left !important;
  vertical-align: top !important;
  font-family: var(--font-body) !important;
  font-size: 12px !important;
  font-weight: 400 !important;
  line-height: 14.4px !important;
  color: var(--text-primary) !important;
}

.single-product form.variations_form table.variations th.label label {
  display: block !important;
  font: inherit !important;
  line-height: inherit !important;
  color: inherit !important;
}

.single-product form.variations_form table.variations td.value {
  margin: 0 !important;
  padding: 0 !important;
  text-align: left !important;
}

.single-product form.variations_form table.variations,
.single-product form.variations_form table.variations tbody,
.single-product form.variations_form table.variations tr,
.single-product form.variations_form table.variations th.label,
.single-product form.variations_form table.variations td.value,
.single-product form.variations_form table.variations th.label label {
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

/* Canonical Size variation UI. Kept in the UCSS-excluded runtime stylesheet. */
.single-product table.variations select.la-size-native-select,
.single-product table.variations select#pa_size,
.single-product table.variations select[name="attribute_pa_size"] {
  height: 35px !important;
  box-sizing: border-box !important;
  background: var(--surface-muted) url("https://www.lalousi.com/wp-content/uploads/2025/10/dropdown-symbol.png") no-repeat right 10px center !important;
  background-size: 12px !important;
  border: 1px solid var(--border-subtle) !important;
  border-radius: 1px !important;
  padding: 0 32px 0 12px !important;
  appearance: none !important;
  -webkit-appearance: none !important;
  -moz-appearance: none !important;
  font-family: var(--font-body) !important;
  font-size: 9px !important;
  line-height: 1.2 !important;
  color: var(--text-primary) !important;
  max-width: none !important;
  min-width: 0 !important;
}

/* Override stale/generated UCSS rules from the former custom-control version. */
.single-product form.variations_form .la-size-field > select.la-size-native-select,
.single-product form.variations_form .la-size-field > select#pa_size,
.single-product form.variations_form .la-size-field > select[name="attribute_pa_size"] {
  display: block !important;
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  visibility: visible !important;
  opacity: 0 !important;
  width: 100% !important;
  height: 35px !important;
  pointer-events: none !important;
  z-index: -1 !important;
}

.single-product table.variations select#pa_size option {
  font-family: var(--font-body) !important;
  font-size: 14px !important;
  color: var(--text-primary) !important;
}

.single-product .la-size-field,
.single-product .la-size-dropdown {
  position: relative;
  width: 100%;
  box-sizing: border-box;
}

.single-product .la-size-dropdown__toggle {
  display: block;
  width: 100% !important;
  height: 35px !important;
  box-sizing: border-box !important;
  padding: 0 32px 0 12px !important;
  border: 1px solid var(--border-subtle) !important;
  border-radius: 1px !important;
  background: var(--surface-muted) url("https://www.lalousi.com/wp-content/uploads/2025/10/dropdown-symbol.png") no-repeat right 10px center !important;
  background-size: 12px !important;
  appearance: none !important;
  -webkit-appearance: none !important;
  -moz-appearance: none !important;
  color: var(--text-primary) !important;
  font-family: var(--font-body) !important;
  font-size: 9px !important;
  font-weight: 400 !important;
  line-height: 1.2 !important;
  text-align: left !important;
  text-transform: none !important;
  cursor: pointer;
}

.single-product .la-size-dropdown__toggle:focus {
  outline: none !important;
  box-shadow: none !important;
}

.single-product .la-size-dropdown.is-open .la-size-dropdown__toggle {
  background-color: var(--surface-muted) !important;
  border-bottom-color: transparent !important;
}

/* A one-size OOAK product has a preselected, fixed size. Keep the familiar
   field styling, but make it a read-only value rather than a fake dropdown. */
.single-product .la-size-dropdown--single-option .la-size-dropdown__toggle--static {
  display: flex;
  align-items: center;
  padding-right: 12px !important;
  background-image: none !important;
  cursor: default !important;
  pointer-events: none;
}

html[data-theme="dark"] .single-product .la-size-dropdown--single-option .la-size-dropdown__toggle--static::after {
  content: none !important;
}

/* Loaded after the main stylesheet: rebuild the light-only raster arrow in
   dark mode so it follows --text-primary. */
html[data-theme="dark"] .single-product .la-size-dropdown__toggle {
  background-image: none !important;
}

html[data-theme="dark"] .single-product .la-size-dropdown__toggle::after {
  position: absolute;
  top: 50%;
  right: 14px;
  width: 7px;
  height: 7px;
  border-right: 1px solid var(--text-primary);
  border-bottom: 1px solid var(--text-primary);
  content: "";
  pointer-events: none;
  transform: translateY(-65%) rotate(45deg);
}

/* Card imagery stays light in dark mode; only the inline title follows the theme. */
html[data-theme="dark"] .single-product :is(.related.products, .up-sells.products) ul.products li.product .la-oak-label {
  color: #1f1f1f !important;
}

html[data-theme="dark"] .single-product .la-oak-single-label {
  color: var(--text-primary) !important;
}

html[data-theme="dark"] .single-product :is(.related.products, .up-sells.products) > h2 {
  color: var(--text-primary) !important;
}

.single-product .la-size-dropdown__text {
  display: block;
  color: var(--text-primary) !important;
  font-family: var(--font-body) !important;
  font-size: 9px !important;
  font-weight: 400 !important;
  line-height: 1.2 !important;
  text-align: left !important;
}

.single-product .la-size-dropdown__menu {
  position: absolute;
  top: calc(100% - 1px);
  right: 0;
  left: 0;
  z-index: 40;
  display: none;
  max-height: 288px;
  margin: 0;
  padding: 0;
  overflow-y: auto;
  list-style: none;
  background: var(--surface-muted);
  border: 1px solid var(--border-subtle);
  border-top: 0;
  border-radius: 0;
  box-shadow: none;
}

.single-product .la-size-dropdown.is-open .la-size-dropdown__menu {
  display: block;
}

.single-product .la-size-dropdown__option {
  display: flex;
  align-items: center;
  min-height: 36px;
  padding: 0 12px;
  background: transparent;
  color: var(--text-primary);
  cursor: pointer;
  font-family: var(--font-body);
  font-size: 9px;
  font-weight: 400;
  line-height: 1.2;
  user-select: none;
  -webkit-user-select: none;
}

.single-product .la-size-dropdown__option:hover,
.single-product .la-size-dropdown__option:focus-visible {
  background: color-mix(in srgb, var(--text-primary) 6%, transparent);
  outline: none;
}

.single-product .la-size-dropdown__option.is-selected {
  background: color-mix(in srgb, var(--text-primary) 10%, transparent);
}

.single-product .la-size-dropdown__option.is-disabled,
.single-product .la-size-dropdown__option.is-hidden {
  display: none;
}

/* Product related/up-sell grids must remain inside the page content box. */
.single-product .related.products,
.single-product .up-sells.products {
  width: 100%;
  max-width: none;
  margin-left: 0;
  margin-right: 0;
  box-sizing: border-box;
}

/* WooCommerce/Astra otherwise supplies its legacy Cormorant/Garamond face. */
.single-product .related.products > h2,
.single-product .up-sells.products > h2 {
  font-family: var(--font-heading) !important;
  font-size: 32px !important;
  font-weight: 400 !important;
  font-style: normal !important;
  line-height: 1.15 !important;
  letter-spacing: 0 !important;
  margin: 0 0 24px !important;
  font-synthesis: none;
}

.single-product .related.products ul.products,
.single-product .up-sells.products ul.products {
  width: 100%;
  max-width: none;
  margin-left: 0;
  margin-right: 0;
  padding-left: 0;
  padding-right: 0;
  box-sizing: border-box;
}

/* Related product cards inherit Astra's article divider on desktop. */
.single-product :is(.related.products, .up-sells.products) ul.products li.product.ast-article-post {
  border: 0 !important;
  padding: 0 !important;
  box-shadow: none !important;
  background-color: transparent !important;
}

.single-product :is(.related.products, .up-sells.products) ul.products li.product.ast-article-post::before,
.single-product :is(.related.products, .up-sells.products) ul.products li.product.ast-article-post::after {
  opacity: 0 !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}

/* Match the Store archive card geometry so related products cannot reflow. */
.single-product .related.products ul.products li.product .astra-shop-thumbnail-wrap,
.single-product .up-sells.products ul.products li.product .astra-shop-thumbnail-wrap {
  width: 100% !important;
  aspect-ratio: 2 / 3 !important;
  overflow: hidden !important;
  background: var(--surface-primary) !important;
}

.single-product .related.products ul.products li.product .astra-shop-thumbnail-wrap img,
.single-product .up-sells.products ul.products li.product .astra-shop-thumbnail-wrap img {
  width: 100% !important;
  height: 100% !important;
  max-height: none !important;
  object-fit: contain !important;
}

/* Astra's archive summary spacing is not present in a single-product UCSS
 * scan. Keep the related-card text breathing room identical to the store. */
.single-product .related.products ul.products li.product .astra-shop-summary-wrap,
.single-product .up-sells.products ul.products li.product .astra-shop-summary-wrap {
  padding-top: 12px !important;
  box-sizing: border-box !important;
}

@media (max-width: 921px) {
  .single-product .related.products > h2,
  .single-product .up-sells.products > h2 {
    font-size: 28px !important;
    margin-bottom: 20px !important;
  }

  .single-product .lls-two-col {
    display: block;
  }

  .single-product .lls-left,
  .single-product .summary.entry-summary {
    width: 100% !important;
    max-width: none !important;
  }

  .single-product .summary.entry-summary {
    position: static;
    margin-top: 0;
  }

  .single-product .lls-product-vertical-gallery,
  .single-product .lls-product-vertical-gallery__inner {
    width: 100% !important;
    max-width: 100% !important;
  }
}

/* The desktop header begins at 922px, but the fixed-width desktop columns do
 * not both fit until the wider desktop range. Let both columns shrink inside
 * the available page width so the gallery and variation form cannot overlap. */
@media (min-width: 922px) and (max-width: 1180px) {
  .single-product .lls-two-col {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    column-gap: clamp(28px, 4vw, 48px);
    justify-items: stretch;
  }

  .single-product .lls-left,
  .single-product .summary.entry-summary {
    min-width: 0;
  }

  .single-product .lls-product-vertical-gallery,
  .single-product .lls-product-vertical-gallery__inner {
    width: 100% !important;
    max-width: 410px !important;
    margin-inline: auto;
  }

  .single-product .summary.entry-summary {
    width: 100% !important;
    max-width: 100% !important;
    justify-self: stretch;
  }
}

@media (max-width: 767px) {
  .single-product .related.products > h2,
  .single-product .up-sells.products > h2 {
    font-size: 26px !important;
    margin-bottom: 18px !important;
  }

  .single-product .lls-product-vertical-gallery {
    margin: 0 auto 20px;
    overflow: visible;
  }

  .single-product .lls-product-vertical-gallery__inner {
    height: auto !important;
    display: flex;
    flex-direction: column;
    gap: 12px;
    overflow: visible !important;
  }

  .single-product .lls-mobile-gallery--active {
    overflow: hidden;
    touch-action: pan-y pinch-zoom;
  }

  .single-product .lls-mobile-gallery--active .lls-product-vertical-gallery__inner {
    display: flex;
    flex-direction: row !important;
    align-items: stretch;
    gap: 0 !important;
  }

  .single-product .lls-mobile-gallery--active .lls-product-vertical-gallery__frame,
  .single-product .lls-mobile-gallery--active .lls-product-vertical-gallery__frame.swiper-slide {
    flex: 0 0 100% !important;
    width: 100% !important;
    min-width: 100% !important;
    aspect-ratio: 410 / 615;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
  }

  .single-product .lls-mobile-gallery--active .lls-product-vertical-gallery__frame > picture,
  .single-product .lls-mobile-gallery--active .lls-product-vertical-gallery__frame > picture img,
  .single-product .lls-mobile-gallery--active .lls-product-vertical-gallery__frame > img {
    width: 100%;
    height: 100%;
  }

  .single-product .lls-mobile-gallery--active .lls-product-vertical-gallery__frame > picture {
    display: flex;
  }

  .single-product .lls-mobile-gallery--active .lls-product-vertical-gallery__frame img {
    object-fit: contain;
  }

  .single-product .lls-mobile-gallery__nav,
  .single-product .lls-mobile-gallery__fullscreen {
    position: absolute !important;
    z-index: 4 !important;
    display: inline-flex !important;
    width: 34px !important;
    height: 34px !important;
    align-items: center !important;
    justify-content: center !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 999px !important;
    background: color-mix(in srgb, var(--surface-primary) 62%, transparent) !important;
    color: var(--text-primary) !important;
    box-shadow: var(--shadow-subtle) !important;
    cursor: pointer;
    backdrop-filter: blur(8px);
    -webkit-tap-highlight-color: transparent;
  }

  .single-product .lls-mobile-gallery__nav svg,
  .single-product .lls-mobile-gallery__fullscreen svg {
    width: 16px !important;
    height: 16px !important;
    fill: none !important;
    stroke: currentColor !important;
    stroke-width: 1.6 !important;
    stroke-linecap: round !important;
    stroke-linejoin: round !important;
  }

  .single-product .lls-mobile-gallery__nav:disabled {
    opacity: 0.4 !important;
    cursor: default;
  }

  .single-product .lls-mobile-gallery__nav--prev {
    top: 50% !important;
    left: 10px !important;
    transform: translateY(-50%) !important;
  }

  .single-product .lls-mobile-gallery__nav--next {
    top: 50% !important;
    right: 10px !important;
    transform: translateY(-50%) !important;
  }

  .single-product .lls-mobile-gallery__fullscreen {
    right: 12px !important;
    bottom: 12px !important;
  }
}