/* Glo Little Luxury — shop, category and concern archive v2 (duplicate).
 *
 * Loaded with ?design=v2 on archive pages, after glo-archive.css and
 * glo-v2-base.css. Scoped to body.glo-archive-v2. Written up in STYLE-GUIDE.md.
 */

/* ==========================================================================
   1. One content edge (audit: High)
   The parent wrapper (24px), #main (24px), .glo-wrap (24px) and the Cream
   results panel (32px) each added side padding. Keep the outer wrapper's
   gutter only, which is the same edge the header uses.
   ========================================================================== */
@media (min-width: 601px) {
  .glo-archive-v2 #main.site-main { padding-left: 0; padding-right: 0; }
  .glo-archive-v2 .glo-wrap.glo-archive-v2__wrap { padding-left: 0; padding-right: 0; }
}

/* ==========================================================================
   2. No boxes inside the page (audit: Medium)
   The title and the results sat in rounded Cream panels, one inside the
   other's page. Both now sit on the page ground; spacing does the grouping.
   ========================================================================== */
.glo-archive-v2 .glo-archive-head {
  background: none;
  border-radius: 0;
  padding: 0;
  margin: clamp(16px, 3vw, 32px) 0 clamp(20px, 2.6vw, 28px);
  align-items: flex-end;
}
.glo-archive-v2 .glo-archive-head h1 { margin-bottom: 8px; }
.glo-archive-v2 .glo-archive-head .glo-archive-desc { color: var(--glo-ink-soft); }
.glo-archive-v2 .glo-meta-pill { background: var(--glo-cream); }
.glo-archive-v2 .glo-meta-pill--stock { background: var(--glo-teal-50); color: var(--glo-teal-ink); }

.glo-archive-v2 .glo-results { background: none; border-radius: 0; padding: 0; margin-bottom: clamp(40px, 6vw, 72px); }

/* ==========================================================================
   3. Filters and sort (audit: High)
   40px controls grow to 44px. The toolbar loses its panel and sits under a
   hairline, between the category pills and the grid.
   ========================================================================== */
.glo-archive-v2 .glo-cat-pillnav { padding-bottom: 16px; }
.glo-archive-v2 .glo-toolbar {
  background: none;
  border-radius: 0;
  padding: 16px 0 0;
  margin-bottom: clamp(20px, 2.6vw, 28px);
  border-top: 1px solid var(--glo-border);
}
.glo-archive-v2 .glo-chip { min-height: 44px; }
.glo-archive-v2 .glo-chip:hover,
.glo-archive-v2 .glo-cat-pillnav a:hover { background: var(--glo-linen); }
.glo-archive-v2 .glo-chip.is-active:hover,
.glo-archive-v2 .glo-cat-pillnav a.active:hover { background: var(--glo-teal-deep); }
.glo-archive-v2 .glo-toolbar .woocommerce-ordering select { min-height: 44px; }

/* ==========================================================================
   4. Grid (audit: Medium)
   Tablet gets 3 columns instead of 2 large cards. Desktop keeps 4, phones 2.
   ========================================================================== */
@media (min-width: 601px) and (max-width: 980px) {
  .glo-archive-v2 .glo-prod-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
}
@media (max-width: 600px) {
  .glo-archive-v2 .glo-prod-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
}

/* Pagination: the parent theme paints the current page violet on lavender
   (3.65:1). Teal Deep with white, as glo-archive.css intended. */
.glo-v2 .glo-pagination .page-numbers.current { background: var(--glo-teal-deep); color: #fff; }
/* The plugin that paints pagination sets min-width to 13px, so a page number
   measured 21px wide against a 44px height: a tall thin sliver to hit at any
   width, not only on a phone. glo-archive.css asks for 44 and loses. */
.glo-v2 .glo-pagination .page-numbers { min-width: 44px; }
@media (max-width: 600px) {
  /* .glo-v2, not .glo-archive-v2: this stylesheet is enqueued for search too,
     and that page carries glo-search-v2, so scoping the touch target to the
     archive left search pagination at the responsive sheet's 32px. */
  .glo-v2 .glo-pagination .page-numbers { min-width: 44px; height: 44px; }
}

/* ==========================================================================
   5. Empty shelves (audit: Critical, concern pages)
   Say why the page is empty and offer the next step, instead of WooCommerce's
   "No products were found matching your selection."
   ========================================================================== */
.glo-v2-empty {
  background: var(--glo-cream);
  border-radius: var(--glo-radius-lg);
  padding: clamp(32px, 5vw, 56px) clamp(20px, 4vw, 48px);
  margin-bottom: clamp(40px, 6vw, 72px);
}
.glo-v2 .glo-v2-empty h2 { font-size: clamp(24px, 3vw, 34px); margin: 0 0 10px; max-width: 24ch; }
.glo-v2 .glo-v2-empty p { font-size: 15px; line-height: 1.65; color: var(--glo-ink-soft); margin: 0 0 22px; max-width: 58ch; }
.glo-v2 .glo-v2-empty strong { color: var(--glo-ink); font-weight: 600; }
.glo-v2-empty__actions { display: flex; flex-wrap: wrap; gap: 10px; }

.glo-v2-empty--hair { background: var(--glo-teal-deep); }
.glo-v2 .glo-v2-empty--hair h2 { color: #fff; }
.glo-archive-v2 .glo-v2-empty--hair p { color: var(--glo-teal-100); }
.glo-v2-empty__status {
  display: inline-flex;
  align-items: center;
  min-height: 28px;
  padding: 0 12px;
  margin-bottom: 14px;
  border-radius: var(--glo-radius-pill);
  background: var(--glo-coral);
  color: #fff;
  font-size: 12.5px;
  font-weight: 600;
}
/* Brands arriving: plain tags, not buttons. They are not links (there is no
   product to filter to yet), so nothing about them should invite a tap: body
   type, a soft fill, no outline. `ul.` because .glo-theme ul { margin: 0 }
   outranks the class alone and put the list flush against the button. */
.glo-archive-v2 ul.glo-v2-empty__brands { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 28px; padding: 0; list-style: none; }
.glo-archive-v2 .glo-v2-empty__brands li {
  display: inline-flex;
  align-items: center;
  min-height: 30px;
  padding: 0 12px;
  border-radius: var(--glo-radius-xs);
  background: rgb(255 255 255 / .1);
  color: var(--glo-teal-100);
  font-family: var(--glo-font-body);
  font-size: 14px;
  font-weight: 500;
  cursor: default;
}

@media (max-width: 600px) {
  .glo-v2-empty__actions .glo-btn { flex: 1 1 100%; }
}

/* ==========================================================================
   Store questions below the grid (CONTENT-STRATEGY §7)
   ==========================================================================
   Four store-level answers, visible on-page. Quiet by design: they sit under
   the products and are for the visitor still deciding whether to hand cash to
   a courier, not competition for the grid above them. */
.glo-v2 .glo-v2-shelf-faq {
  margin-top: clamp(32px, 4vw, 56px);
  padding: clamp(24px, 3.2vw, 40px);
  border-radius: var(--glo-radius-lg);
  background: var(--glo-cream);
}
.glo-v2 .glo-v2-shelf-faq > h2 {
  font-family: var(--glo-font-display);
  font-size: clamp(22px, 2.6vw, 30px);
  line-height: 1.12;
  margin: 0 0 clamp(16px, 2vw, 24px);
}
.glo-v2 .glo-v2-shelf-faq__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(14px, 1.8vw, 22px);
}
.glo-v2 .glo-v2-shelf-faq__item {
  padding: clamp(16px, 1.8vw, 22px);
  border-radius: var(--glo-radius-md);
  background: var(--glo-surface);
}
.glo-v2 .glo-v2-shelf-faq__item h3 {
  font-family: var(--glo-font-display);
  font-size: clamp(16px, 1.6vw, 18px);
  line-height: 1.25;
  margin: 0 0 6px;
  text-wrap: balance;
}
.glo-v2 .glo-v2-shelf-faq__item p {
  margin: 0;
  font-size: 14.5px;
  line-height: 1.6;
  color: var(--glo-ink-soft);
}
@media (max-width: 760px) {
  .glo-v2 .glo-v2-shelf-faq__grid { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 600px) {
  /* 16px is the floor for body copy on a phone: below it a reader zooms, and
     zooming a fixed-width layout is how a shopper loses their place in a grid.
     Desktop keeps the smaller size, where the measure is short and the reading
     distance is longer. Measured at 390px across every page of the site. */
  .glo-v2 .glo-v2-shelf-faq__item p,
  .glo-v2 .glo-v2-empty p { font-size: 16px; }
}

/* ==========================================================================
   Brand hubs (inc/brand-hubs.php): facts, a jump row to the brand's lines,
   then each line as its own short shelf, shampoo beside its conditioner, with
   the line's First Friday duo as the last tile when there is one.
   ========================================================================== */
.glo-archive-v2 .glo-hub__lede { max-width: 62ch; font-size: 16px; line-height: 1.6; }
.glo-hub { display: grid; gap: clamp(28px, 4vw, 48px); }
.glo-v2 dl.glo-hub__facts {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1px;
  margin: 0;
  overflow: hidden;
  border-radius: var(--glo-radius-md);
  background: var(--glo-border);
}
.glo-hub__facts > div { padding: 14px 18px; background: var(--glo-surface); }
.glo-v2 .glo-hub__facts dt { margin: 0 0 2px; font-size: 12.5px; color: var(--glo-ink-soft); }
.glo-v2 .glo-hub__facts dd { margin: 0; font-family: var(--glo-font-display); font-size: 20px; font-weight: 600; color: var(--glo-ink); font-variant-numeric: tabular-nums; }
.glo-hub__jump { display: flex; flex-wrap: wrap; gap: 8px; margin-top: calc(-1 * clamp(12px, 2vw, 24px)); }
.glo-v2 .glo-hub__jump a {
  display: inline-flex;
  align-items: center;
  min-height: 40px;
  padding: 0 16px;
  border-radius: var(--glo-radius-pill);
  background: var(--glo-teal-50);
  color: var(--glo-teal-ink);
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
  transition: background-color .15s ease-out;
}
.glo-v2 .glo-hub__jump a:hover { background: var(--glo-teal-100); }
.glo-v2 .glo-hub__jump a:focus-visible { outline: 2px solid var(--glo-teal-bright); outline-offset: 2px; }
.glo-hub__line { scroll-margin-top: 96px; }
.glo-hub__line-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 14px; margin-bottom: 16px; }
.glo-v2 .glo-hub__line-head h2 { margin: 0; font-family: var(--glo-font-display); font-size: clamp(22px, 2.4vw, 28px); line-height: 1.15; }
.glo-v2 .glo-hub__line-head p { margin: 0; font-size: 15px; color: var(--glo-ink-soft); }
.glo-archive-v2 .glo-hub__grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }

/* The line's duo: a tile in the shelf, in the First Friday campaign colour. */
.glo-v2 a.glo-hub__duo {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: 6px;
  min-height: 220px;
  padding: 20px;
  border-radius: var(--glo-radius-lg);
  background: var(--glo-clay, #A94358);
  color: #fff;
  text-decoration: none;
  transition: background-color .15s ease-out;
}
.glo-v2 a.glo-hub__duo:hover { background: color-mix(in srgb, var(--glo-clay, #A94358) 85%, #000); }
.glo-v2 a.glo-hub__duo:focus-visible { outline: 2px solid var(--glo-clay, #A94358); outline-offset: 3px; }
.glo-hub__duo-label { font-size: 13px; font-weight: 600; color: var(--glo-blush, #F2DEE1); }
.glo-hub__duo-title { font-family: var(--glo-font-display); font-size: 22px; font-weight: 600; line-height: 1.15; color: #fff; }
.glo-hub__duo-save { font-size: 14px; color: #fff; }
.glo-hub__duo-more { margin-top: 8px; font-size: 14px; font-weight: 600; color: #fff; text-decoration: underline; text-underline-offset: 3px; }

/* An odd number of questions: the last one spans the row instead of sitting alone. */
.glo-v2 .glo-v2-shelf-faq__item:last-child:nth-child(odd) { grid-column: 1 / -1; }

@media (max-width: 900px) {
  .glo-v2 dl.glo-hub__facts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .glo-archive-v2 .glo-hub__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 600px) {
  .glo-archive-v2 .glo-hub__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .glo-v2 .glo-hub__facts dd { font-size: 17px; }
  .glo-v2 a.glo-hub__duo { min-height: 0; padding: 16px; }
  .glo-hub__duo-title { font-size: 19px; }
}
@media (prefers-reduced-motion: reduce) {
  .glo-v2 .glo-hub__jump a, .glo-v2 a.glo-hub__duo { transition: none; }
}
@media (max-width: 600px) {
  /* Seven lines as one swipeable row instead of four rows of pills. */
  .glo-hub__jump { flex-wrap: nowrap; overflow-x: auto; margin-right: -16px; padding-right: 16px; scrollbar-width: none; }
  .glo-hub__jump::-webkit-scrollbar { display: none; }
  .glo-v2 .glo-hub__jump a { flex: none; }
}