/* Glo Little Luxury — product page v2 (duplicate).
 *
 * Loaded with ?design=v2 on a product page, after glo-pdp.css and
 * glo-v2-base.css. Scoped to body.glo-product-v2. Template:
 * woocommerce-v2/content-single-product.php. Written up in STYLE-GUIDE.md.
 */

/* ==========================================================================
   1. One content edge (audit P3)
   #main.site-main added a second 24px gutter inside the parent wrapper: the
   page sat at 48px on tablet and 166px on desktop against a 24px / 142px logo.
   ========================================================================== */
@media (min-width: 601px) {
  .glo-product-v2 #main.site-main { padding-left: 0; padding-right: 0; }
}

/* ==========================================================================
   2. Photo frame (audit P2)
   Every product photo was a square 600px crop, shown in a square frame with
   24px of padding: on a 390px phone the product sat in a 306px box. The frame
   is 4:5 now, a little taller on phones and no wider anywhere, with the photo
   fitted inside it (never cropped). Square photos stay centred in it until the
   uncropped photos are imported.
   ========================================================================== */
/* !important: the gallery plugin writes aspect-ratio: 600 / 600 inline on each
   photo from its file size. */
.glo-product-v2 .glo-pdp .rtwpvg-slider img,
.glo-product-v2 .glo-pdp .rtwpvg-single-image-container img {
  aspect-ratio: 4 / 5 !important;
  height: auto !important;
  object-fit: contain;
  padding: 16px;
}
@media (max-width: 600px) {
  .glo-product-v2 .glo-pdp .rtwpvg-slider img,
  .glo-product-v2 .glo-pdp .rtwpvg-single-image-container img { padding: 12px; }
}
/* Tablet: the frame is capped so the name and price stay near the top. */
@media (min-width: 601px) and (max-width: 980px) {
  .glo-product-v2 .glo-pdp .rtwpvg-slider-wrapper { max-width: 440px; margin-inline: auto; }
  .glo-product-v2 .glo-pdp .rtwpvg-thumbnail-wrapper { max-width: 440px; margin-inline: auto; }
}
/* The fallback gallery, if the variation gallery plugin is ever turned off. */
.glo-product-v2 .glo-pdp .woocommerce-product-gallery__wrapper > .woocommerce-product-gallery__image {
  aspect-ratio: 4 / 5;
  max-height: none;
}

/* ==========================================================================
   3. Size choice (audit P7)
   One product, one button per size, each with its own price. The select
   WooCommerce reads stays in the page, hidden, and is kept in step by
   glo-pdp-v2.js.
   ========================================================================== */
.glo-product-v2 .variations_form .variations { width: 100%; margin: 0 0 16px; border: 0; }
.glo-product-v2 .variations_form .variations tr { display: block; }
.glo-product-v2 .variations_form .variations th,
.glo-product-v2 .variations_form .variations td { display: block; padding: 0; border: 0; text-align: left; }
.glo-product-v2 .variations_form .variations th label {
  display: block;
  margin: 0 0 8px;
  font-family: var(--glo-font-body);
  font-size: 14px;
  font-weight: 600;
  color: var(--glo-ink);
}
.glo-product-v2 .variations_form .glo-size__select {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  overflow: hidden;
  clip: rect(0 0 0 0);
  opacity: 0;
}
.glo-product-v2 .variations_form .reset_variations { display: none !important; }

.glo-size { display: flex; flex-wrap: wrap; gap: 8px; }
.glo-product-v2 .glo-size .glo-size__opt {
  display: inline-flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: 2px;
  min-width: 104px;
  min-height: 56px;
  padding: 8px 16px;
  border: 1px solid var(--glo-border);
  border-radius: var(--glo-radius-sm);
  background: var(--glo-surface);
  color: var(--glo-ink);
  font-family: var(--glo-font-body);
  text-align: left;
  cursor: pointer;
  transition: border-color .15s cubic-bezier(.23, 1, .32, 1), background-color .15s cubic-bezier(.23, 1, .32, 1), transform .12s cubic-bezier(.23, 1, .32, 1);
}
.glo-size__name { font-size: 15px; font-weight: 600; line-height: 1.2; }
.glo-size__price { font-size: 13px; font-weight: 500; color: var(--glo-ink-soft); font-variant-numeric: tabular-nums; }
@media (hover: hover) and (pointer: fine) {
  .glo-product-v2 .glo-size .glo-size__opt:hover { border-color: var(--glo-teal-bright); background: var(--glo-surface); color: var(--glo-ink); }
}
.glo-product-v2 .glo-size .glo-size__opt:focus { background: var(--glo-surface); color: var(--glo-ink); }
.glo-product-v2 .glo-size .glo-size__opt:active { transform: scale(.98); }
.glo-product-v2 .glo-size .glo-size__opt[aria-checked="true"] {
  border-color: var(--glo-teal-bright);
  background: var(--glo-teal-50);
  box-shadow: inset 0 0 0 1px var(--glo-teal-bright);
}
.glo-product-v2 .glo-size .glo-size__opt[aria-checked="true"] .glo-size__price { color: var(--glo-teal-ink); }
.glo-product-v2 .glo-size .glo-size__opt[aria-disabled="true"] { cursor: not-allowed; color: var(--glo-ink-soft); background: var(--glo-bg); }
.glo-product-v2 .glo-size .glo-size__opt[aria-disabled="true"] .glo-size__name { text-decoration: line-through; }
.glo-product-v2 .glo-size .glo-size__opt:focus-visible { outline: 2px solid var(--glo-teal-bright); outline-offset: 2px; }
.glo-product-v2 .single_variation_wrap .woocommerce-variation-price,
.glo-product-v2 .single_variation_wrap .woocommerce-variation-availability { display: none; }

/* ==========================================================================
   4. Readable sizes and colours (audit P8)
   ========================================================================== */
.glo-product-v2 .glo-trust-mini div { font-size: 12px; }
.glo-product-v2 .glo-prod-meta span { font-size: 12px; color: var(--glo-ink-soft); }
.glo-product-v2 .glo-bundle__tag { font-size: 12px; }
/* The step a suggested item adds; quieter than "This item". */
.glo-product-v2 .glo-bundle__tag--role { background: var(--glo-linen); color: var(--glo-ink-soft); }
.glo-product-v2 .glo-routine li b { font-size: 12px; }
.glo-product-v2 .glo-price-row { font-variant-numeric: tabular-nums; }

@media (prefers-reduced-motion: reduce) {
  .glo-product-v2 .glo-size .glo-size__opt { transition: none; }
  .glo-product-v2 .glo-size .glo-size__opt:active { transform: none; }
}

/* The swatches plugin's size buttons get the same look as .glo-size__opt. */
.glo-product-v2 .rtwpvs-terms-wrapper { display: flex; flex-wrap: wrap; gap: 8px; }
.glo-product-v2 .variations_form .rtwpvs-term.rtwpvs-button-term {
  display: inline-flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: 2px;
  width: auto;
  height: auto;
  min-width: 104px;
  min-height: 56px;
  margin: 0;
  padding: 8px 16px;
  border: 1px solid var(--glo-border);
  border-radius: var(--glo-radius-sm);
  background: var(--glo-surface);
  box-shadow: none;
  color: var(--glo-ink);
  cursor: pointer;
  transition: border-color .15s cubic-bezier(.23, 1, .32, 1), background-color .15s cubic-bezier(.23, 1, .32, 1), transform .12s cubic-bezier(.23, 1, .32, 1);
}
.glo-product-v2 .rtwpvs-term .rtwpvs-term-span {
  padding: 0;
  font-family: var(--glo-font-body);
  font-size: 15px;
  font-weight: 600;
  line-height: 1.2;
  color: inherit;
}
@media (hover: hover) and (pointer: fine) {
  .glo-product-v2 .variations_form .rtwpvs-term.rtwpvs-button-term:hover { border-color: var(--glo-teal-bright); box-shadow: none; }
}
.glo-product-v2 .variations_form .rtwpvs-term.rtwpvs-button-term:active { transform: scale(.98); }
.glo-product-v2 .variations_form .rtwpvs-term.rtwpvs-button-term.selected {
  border-color: var(--glo-teal-bright);
  background: var(--glo-teal-50);
  box-shadow: inset 0 0 0 1px var(--glo-teal-bright);
}
.glo-product-v2 .rtwpvs-term.selected .glo-size__price { color: var(--glo-teal-ink); }
.glo-product-v2 .variations_form .rtwpvs-term.rtwpvs-button-term.disabled { opacity: 1; cursor: not-allowed; color: var(--glo-ink-soft); background: var(--glo-bg); }
.glo-product-v2 .rtwpvs-term.disabled .rtwpvs-term-span { text-decoration: line-through; }
.glo-product-v2 .variations_form .rtwpvs-term.rtwpvs-button-term:focus-visible { outline: 2px solid var(--glo-teal-bright); outline-offset: 2px; }
/* The plugin's hover tooltip repeats the label already on the button. */
.glo-product-v2 .rtwpvs-term[data-rtwpvs-tooltip]::before,
.glo-product-v2 .rtwpvs-term[data-rtwpvs-tooltip]::after { display: none !important; }
@media (prefers-reduced-motion: reduce) {
  .glo-product-v2 .variations_form .rtwpvs-term.rtwpvs-button-term { transition: none; }
}

/* The gallery plugin's zoom trigger ships at 36px square. That is under the
   44px touch target on the one page where a shopper is most likely to be on a
   phone, and it is the plugin's markup, so it is sized here rather than
   re-marked-up.

   min-width and flex: none, not width. The trigger is a flex item, so a plain
   width is only a basis and the container shrank it straight back to 36. */
@media (max-width: 600px) {
  .glo-product-v2 .rtwpvg-trigger {
    flex: none;
    min-width: 44px;
    min-height: 44px;
  }
}

/* ---------------------------------------------------------------------------
   Buy box (owner feedback, 9 Oct). The quantity had no + and - buttons, sat
   alone on its own row on phones, and Buy Now was a 90px button under a
   full-width Add to bag. Now: the stepper and Add to bag share the first row,
   Buy Now spans the second. The stepper is inc/product-page.php around
   WooCommerce's own field; the same 10px radius as the buttons beside it.
   ------------------------------------------------------------------------- */
.glo-product-v2 .glo-pdp form.cart,
.glo-product-v2 .glo-pdp .woocommerce-variation-add-to-cart {
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
  gap: 12px;
}
/* WooCommerce's clearfix ::before and ::after are flex items here: each took
   a 12px gap, pushing the stepper 12px in from the edge and Buy Now short of
   the row's right edge. */
.glo-product-v2 .glo-pdp form.cart::before,
.glo-product-v2 .glo-pdp form.cart::after,
.glo-product-v2 .glo-pdp .woocommerce-variation-add-to-cart::before,
.glo-product-v2 .glo-pdp .woocommerce-variation-add-to-cart::after { display: none !important; } /* WooCommerce's own rule is more specific */
.glo-product-v2 .glo-pdp form.cart .quantity:has(.glo-qty__btn) {
  display: inline-flex;
  align-items: center;
  flex: none;
  width: auto;
  height: 48px;
  padding: 0 1px;
  border: 1px solid var(--glo-border);
  border-radius: var(--glo-radius-sm);
  background: var(--glo-surface);
}
.glo-product-v2 .glo-pdp form.cart .quantity:has(.glo-qty__btn):focus-within { border-color: var(--glo-teal-bright); }
.glo-product-v2 .glo-pdp form.cart .quantity:has(.glo-qty__btn) input.qty {
  width: 40px;
  min-width: 40px;
  height: 44px;
  min-height: 44px;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  text-align: center;
  font-size: 16px;
  font-variant-numeric: tabular-nums;
  -moz-appearance: textfield;
  appearance: textfield;
}
.glo-product-v2 .glo-pdp form.cart .quantity input.qty::-webkit-outer-spin-button,
.glo-product-v2 .glo-pdp form.cart .quantity input.qty::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.glo-product-v2 .glo-pdp form.cart .quantity input.qty:focus { outline: none; }
.glo-product-v2 .glo-pdp .glo-qty__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: var(--glo-ink);
  font-family: var(--glo-font-body);
  font-size: 20px;
  font-weight: 600;
  line-height: 1;
  cursor: pointer;
  transition: background-color .15s ease-out, color .15s ease-out, transform .1s ease-out;
}
.glo-product-v2 .glo-pdp .glo-qty__btn:active { transform: scale(.94); }
.glo-product-v2 .glo-pdp .glo-qty__btn:focus-visible { outline: 2px solid var(--glo-teal-bright); outline-offset: -2px; }
.glo-product-v2 .glo-pdp .glo-qty__btn[aria-disabled="true"] { color: var(--glo-ink-soft); opacity: .45; cursor: default; }
@media (hover: hover) and (pointer: fine) {
  .glo-product-v2 .glo-pdp .glo-qty__btn:not([aria-disabled="true"]):hover { background: var(--glo-teal-50); color: var(--glo-teal-ink); }
}
/* A sized product's form holds the size table and the variation block, each
   on its own row; the stepper row is inside the variation block. */
.glo-product-v2 .glo-pdp form.variations_form > * { flex: 1 1 100%; min-width: 0; }
.glo-product-v2 .glo-pdp form.cart button.single_add_to_cart_button {
  flex: 1 1 160px;
  width: auto;
}
/* The Buy Now plugin adds a 10px right margin and WooCommerce a 4px one on
   the quantity; the row's gap does the spacing. */
.glo-product-v2 .glo-pdp form.cart .wsb-button {
  flex: 1 1 100%;
  width: 100%;
  margin: 0 !important;
}
.glo-product-v2 .glo-pdp form.cart .quantity { margin: 0; }
@media (prefers-reduced-motion: reduce) {
  .glo-product-v2 .glo-pdp .glo-qty__btn { transition: none; }
  .glo-product-v2 .glo-pdp .glo-qty__btn:active { transform: none; }
}
/* With no reviews the star row is gone, and its 35px went with it. */
.glo-product-v2 .glo-pname { margin-bottom: 18px; }
/* A First Friday duo outside its window (inc/first-friday.php). */
.glo-product-v2 .glo-ff-notice { display: grid; gap: 14px; justify-items: start; margin: 4px 0 24px; padding: 18px 20px; border-radius: var(--glo-radius-md, 14px); background: var(--glo-teal-50); }
.glo-product-v2 .glo-ff-notice p { margin: 0; font-size: 15px; line-height: 1.55; color: var(--glo-teal-ink); }