/* Glo Little Luxury — v2 base: the site-wide fixes every v2 duplicate shares.
 *
 * Loaded on any ?design=v2 page and the style guide (inc/design-preview.php),
 * after glo-responsive.css. Every rule is scoped to body.glo-v2, so live pages
 * are untouched. Surface files (glo-home-v2.css, glo-archive-v2.css,
 * glo-categories-v2.css) build on this one.
 *
 * When v2 goes live these become edits to glo-site.css and glo-responsive.css
 * without the .glo-v2 prefix; see STYLE-GUIDE.md, "Before shipping v2".
 */

/* ==========================================================================
   1. Text colour on filled controls (audit: Critical)
   `.glo-theme a { color: inherit }` (0,1,1) outranks single-class component
   rules such as `.glo-btn--primary { color: #fff }` (0,1,0), so button and chip
   labels rendered near-black: 3.41:1 on teal, 1.46:1 on Teal Night.
   ========================================================================== */
.glo-v2 a.glo-btn--primary,
.glo-v2 a.glo-btn--coral,
.glo-v2 a.glo-prod-cart,
.glo-v2 a.glo-concern-card { color: #fff; }
.glo-v2 a.glo-btn--ghost-dark,
.glo-v2 a.glo-btn--light { color: var(--glo-ink); }

/* ==========================================================================
   2. Header edge and height (audit: High)
   `.glo-header__top` is also a `.glo-wrap`, and its `padding: 16px 0` removed
   the wrap's side gutter: the logo touched the screen edge from 601px to about
   1250px and sat 24px left of the content on wide screens.
   ========================================================================== */
.glo-v2 .glo-wrap.glo-header__top { padding: 10px var(--glo-gutter); }
@media (max-width: 600px) {
  .glo-v2 .glo-wrap.glo-header__top { padding: 10px 16px; }
}

/* ==========================================================================
   3. Secondary text contrast (audit: High)
   Stone #8A8270 measured 3.4-3.8:1 at 12-14px; Ink 600 is about 6.5:1.
   Breadcrumb links in Teal 600 measured 4.39:1 at 12.5px; Teal Ink is 7:1.
   ========================================================================== */
.glo-v2 .glo-eyebrow,
.glo-v2 .glo-prod-cat,
.glo-v2 .glo-prod-price .glo-old,
.glo-v2 .glo-rail__note,
.glo-v2 .glo-v2-note,
.glo-v2 .glo-foot-bottom { color: var(--glo-ink-soft); }
.glo-v2 .woocommerce-breadcrumb a { color: var(--glo-teal-ink); }

/* ==========================================================================
   4. Legibility floor: no visible text under 12px (audit: Low)
   ========================================================================== */
.glo-v2 .glo-announce { font-size: 12.5px; }
.glo-v2 .glo-header-actions .glo-hact,
.glo-v2 .glo-menu-toggle { font-size: 12px; }
@media (max-width: 768px) {
  .glo-v2 .glo-announce { font-size: 12px; }
}

/* ==========================================================================
   5. Interaction states
   Hover darkens rather than fading, press gives 2% of give, keyboard focus is
   a visible Teal 600 ring (white on dark bands).
   ========================================================================== */
.glo-v2 .glo-btn,
.glo-v2 .glo-prod-cart,
.glo-v2 .glo-concern-card,
.glo-v2 .glo-cat-card,
.glo-v2 .glo-chip,
.glo-v2 .glo-cat-pillnav a {
  transition: background-color .16s cubic-bezier(.23, 1, .32, 1),
              box-shadow .16s cubic-bezier(.23, 1, .32, 1),
              transform .12s cubic-bezier(.23, 1, .32, 1);
}
.glo-v2 .glo-btn:hover,
.glo-v2 .glo-prod-cart:hover { opacity: 1; }
.glo-v2 .glo-btn--primary:hover,
.glo-v2 .glo-prod-cart:hover { background: var(--glo-cta-hover); }
.glo-v2 .glo-btn--ghost-dark:hover { box-shadow: inset 0 0 0 1.5px var(--glo-ink-soft); }
.glo-v2 .glo-btn:active,
.glo-v2 .glo-prod-cart:active,
.glo-v2 .glo-concern-card:active,
.glo-v2 .glo-chip:active { transform: scale(.98); }

.glo-v2 a:focus-visible,
.glo-v2 button:focus-visible,
.glo-v2 input:focus-visible,
.glo-v2 select:focus-visible {
  outline: 2px solid var(--glo-teal-bright);
  outline-offset: 3px;
  border-radius: var(--glo-radius-xs);
}
.glo-v2 .glo-concern a:focus-visible,
.glo-v2 .glo-v2-help :focus-visible,
.glo-v2 .glo-v2-dark :focus-visible { outline-color: #fff; }

@media (hover: none) {
  .glo-v2 .glo-cat-card:hover { transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  .glo-v2 .glo-btn,
  .glo-v2 .glo-prod-cart,
  .glo-v2 .glo-concern-card,
  .glo-v2 .glo-cat-card,
  .glo-v2 .glo-chip,
  .glo-v2 .glo-cat-pillnav a { transition: none; }
  .glo-v2 .glo-cat-card:hover,
  .glo-v2 .glo-btn:active,
  .glo-v2 .glo-prod-cart:active,
  .glo-v2 .glo-concern-card:active,
  .glo-v2 .glo-chip:active { transform: none; }
}

/* ==========================================================================
   6. Product cards: one sale signal fewer (audit: Medium)
   The crossed-out price and "Save ৳X" already say it; the 11px SALE badge was
   the third telling.
   ========================================================================== */
.glo-v2 .glo-prod-card .glo-badge { display: none; }
.glo-v2 .glo-prod-price { font-variant-numeric: tabular-nums; }

/* ==========================================================================
   7. WhatsApp help band (glo_v2_help_band)
   The close of the homepage and categories page, and the way out of an empty
   archive. Teal Night band, white button, one label: "Chat on WhatsApp".
   ========================================================================== */
.glo-v2-help { background: var(--glo-teal-deep); padding: clamp(40px, 5vw, 64px) 0; }
.glo-v2-help__inner { display: flex; align-items: center; justify-content: space-between; gap: 20px 40px; flex-wrap: wrap; }
.glo-v2-help__copy { flex: 1 1 420px; min-width: 0; }
.glo-v2 .glo-v2-help h2 { color: #fff; font-size: clamp(24px, 3vw, 34px); margin: 0 0 8px; }
.glo-v2 .glo-v2-help p { color: var(--glo-teal-100); font-size: 15px; line-height: 1.6; margin: 0; max-width: 56ch; }
.glo-v2 a.glo-v2-help__btn { gap: 10px; flex-shrink: 0; }
.glo-v2 .glo-v2-help__btn svg { width: 20px; height: 20px; flex-shrink: 0; }
.glo-v2 .glo-v2-help__btn span { color: inherit; }
@media (max-width: 600px) {
  .glo-v2 a.glo-v2-help__btn { width: 100%; }
}

/* ==========================================================================
   8. Touch targets on tablets (audit: Low)
   Footer links 17px tall at 768px, the wordmark 26px, product title links
   20px, the breadcrumb "Home" link 18px. Phones were fixed in
   glo-responsive.css.
   ========================================================================== */
@media (max-width: 1024px) {
  .glo-v2 .glo-logo { display: inline-flex; align-items: center; min-height: 44px; }
  .glo-v2 .glo-prod-title-link { display: block; padding: 10px 0; margin: -10px 0; }
  .glo-v2 .glo-foot-col li { margin-bottom: 0; }
  .glo-v2 .glo-foot-col li a { display: inline-flex; align-items: center; min-height: 44px; }
  .glo-v2 .woocommerce-breadcrumb a { display: inline-block; padding: 13px 0; margin: -13px 0; }
}

/* Cart count badge: 10 to 11px in the live CSS; 12px is the floor. */
.glo-v2 .glo-header-actions .glo-cart-count { font-size: 12px; min-width: 18px; line-height: 18px; }

/* ==========================================================================
   Phone audit fixes (17 Sep, mobile screenshots)
   ========================================================================== */

/* Menu button stuck orange. The parent theme paints every button:hover in its
   secondary colour (#ff5e27), and a phone keeps :hover after any touch that
   starts on the button, even a scroll. The Menu button gets its own states. */
.glo-v2 .glo-menu-toggle,
.glo-v2 .glo-menu-toggle:hover,
.glo-v2 .glo-menu-toggle:focus,
.glo-v2 .glo-menu-toggle:active {
  background: var(--glo-surface);
  color: var(--glo-ink);
  border-color: var(--glo-border);
}
.glo-v2 .glo-menu-toggle[aria-expanded="true"] { background: var(--glo-teal-50); border-color: var(--glo-teal-100); color: var(--glo-teal-ink); }
@media (hover: hover) and (pointer: fine) {
  .glo-v2 .glo-menu-toggle:hover { background: var(--glo-linen); }
}
.glo-v2 .glo-menu-toggle:active { transform: scale(.97); }
/* The same parent rule catches the bag stepper and other plain buttons. */
.glo-v2 .glo-qty__btn:hover,
.glo-v2 .glo-qty__btn:focus { background: transparent; color: var(--glo-ink); }
@media (hover: hover) and (pointer: fine) {
  .glo-v2 .glo-qty__btn:hover { background: var(--glo-teal-50); color: var(--glo-teal-ink); }
}

/* Header on phones: the announcement fits one line and both header actions are
   icons (the bag label was already hidden; "Account" was not). The words stay
   in the markup for screen readers. */
@media (max-width: 600px) {
  .glo-v2 .glo-announce__more { display: none; }
  .glo-v2 .glo-announce { padding: 8px 16px; }
  .glo-v2 .glo-header-actions .glo-hact { font-size: 0; min-width: 44px; min-height: 44px; }
  .glo-v2 .glo-header-actions svg { width: 22px; height: 22px; }
  .glo-v2 .glo-header-actions .glo-hact .glo-cart-count { font-size: 12px; }
}

/* Footer on phones: the Shop list (7 links) runs in two columns. */
@media (max-width: 600px) {
  .glo-v2 .glo-foot-grid > .glo-foot-col:nth-child(2) ul {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: 16px;
  }
}

/* Lists keep their own spacing. .glo-theme ul { margin: 0 } (0,1,1) outranks a
   single component class, which is how the hair care brand list lost its 24px
   and the bag's reassurance list lost its 20px. Components that set a list
   margin repeat the element in the selector. */

/* Product cards for products sold in more than one size: "From ৳X · 2 sizes". */
.glo-v2 .glo-prod-price .glo-sizes-note { font-size: 13px; font-weight: 500; color: var(--glo-ink-soft); }

/* Header icons line up with each other on phones. The account link keeps its
   "Account" text for screen readers, and the empty line box it left behind was
   pushing the icon 16px above the bag icon (owner, 18 Sep). */
@media (max-width: 600px) {
  .glo-v2 .glo-header-actions .glo-hact {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: 0;
    height: 44px;
    line-height: 0;
  }
}

/* Real low stock on a product card (inc/stock.php): text, not a badge, in
   clay red; rouge stays for sale prices. Clay on white 6.2:1. */
.glo-v2 .glo-card-stock { display: block; margin-top: 6px; font-size: 12px; font-weight: 600; color: var(--glo-clay, #A94358); }