/*
 * Premium Collection (PLP) redesign — Limpo Ecommerce.
 * Scoped entirely under `body.template-collection` (set by every
 * collections/collection.php request, for every category slug) so this is
 * the shared, reusable visual system for ALL collections without touching
 * any other template. Loaded after plp-filters.css / product-grid.php's own
 * markup, so it only adds classes and re-themes existing --plp-* custom
 * properties — no existing selector, id, or JS hook is renamed or removed.
 *
 * Tokens below deliberately read the site's real live brand variables
 * (--primary/--secondary/--lightgreen/--black/--grey, all defined in the
 * sitewide premium.css theme override loaded by header.php) instead of a
 * disconnected palette, so this page's buttons/active-states match every
 * other button/link on the site (header, footer, cart, product cards).
 * Fallback literals mirror premium.css's current values in case load order
 * ever changes.
 */

/* ===================== 1. Design tokens ===================== */
body.template-collection{
  --plp2-primary:var(--primary, #1E3A5F);
  --plp2-primary-hover:var(--secondary, #4A6A8A);
  --plp2-accent:var(--lightgreen, #C9A86A);
  --plp2-success:#16A34A;
  --plp2-sale:#E53935;
  --plp2-bg:#FAFAFA;
  --plp2-card:#FFFFFF;
  --plp2-border:#E8ECEE;
  --plp2-filter-bg:#F8F9FA;
  --plp2-text:var(--black, #1F2937);
  --plp2-text-soft:var(--grey, #6B7280);
  --plp2-font-body:var(--base-font-family, "DM Sans", sans-serif);
  --plp2-font-head:var(--heading-font-family, Arimo, sans-serif);
  --plp2-radius-lg:20px;
  --plp2-radius:14px;
  --plp2-radius-sm:9px;
  --plp2-shadow-sm:0 1px 3px rgba(17,17,17,.06);
  --plp2-shadow-md:0 10px 30px rgba(17,17,17,.08);
  --plp2-shadow-lg:0 24px 64px rgba(17,17,17,.16);
  --plp2-ease:cubic-bezier(.4,0,.2,1);

  /* Re-theme the existing filter-sidebar skin (plp-filters.css) to match —
     same custom-property names it already reads, just new values. */
  --plp-primary:var(--primary, #1E3A5F);
  --plp-secondary:var(--grey, #6B7280);
  --plp-selected:var(--primary, #1E3A5F);
  --plp-accent:var(--lightgreen, #C9A86A);
  --plp-hover:var(--plp2-filter-bg);
  --plp-danger:#E53935;
  --plp-radius:18px;

  background:var(--plp2-bg);
  color:var(--plp2-text);
  font-family:var(--plp2-font-body);
}
body.template-collection #content{ background:var(--plp2-bg); }
body.template-collection .plp-premium{ max-width:1800px; margin:0 auto; }
body.template-collection .plp-premium *,
body.template-collection .plp-premium *::before,
body.template-collection .plp-premium *::after{ box-sizing:border-box; }
body.template-collection .plp-section-title{
  font-family:var(--plp2-font-head); font-weight:700; font-size:clamp(20px,2.2vw,28px);
  letter-spacing:-.01em; color:var(--plp2-primary); margin:0 0 20px;
}

/* Filter/sort bar + product grid live in their own nested .container (not a
   direct child of #content, so the sitewide zero-padding override for
   `#content>.container` on this template doesn't reach it) — its normal
   --container-pad-x (up to 60px at wide viewports) was the "excessive page
   padding" around the sidebar/grid. Pin it down to a tight, fixed inset. */
#plpProductGrid>.container{ padding-left:20px!important; padding-right:20px!important; margin-top:0!important; }

/* ===================== 2. Breadcrumb + category header ===================== */
.plp-hero{ position:relative; overflow:hidden; border-radius:0 0 var(--plp2-radius-lg) var(--plp2-radius-lg); margin-bottom:0; }
.plp-hero__media{ position:absolute; inset:0; z-index:0; }
.plp-hero__media-img{ width:100%; height:100%; object-fit:cover; }
.plp-hero__scrim{ position:absolute; inset:0; background:linear-gradient(180deg,rgba(17,17,17,.15) 0%,rgba(17,17,17,.55) 100%); }
.plp-hero__content{ position:relative; z-index:1; padding:40px 32px 32px; color:#fff; min-height:220px; display:flex; flex-direction:column; justify-content:flex-end; }
.plp-hero__content--plain{
  color:var(--plp2-text); min-height:0; padding:20px 8px 8px;
  background:transparent;
}
.plp-hero__content--plain .plp-breadcrumb a,
.plp-hero__content--plain .plp-breadcrumb li{ color:var(--plp2-text-soft); }
.plp-hero__content--plain .plp-hero__count{ background:transparent; backdrop-filter:none; padding:0; font-weight:400; }

/* Breadcrumb: 13px muted text, "/" separators (brief 13px/#888 spec, mapped
   onto the site's muted-grey token) */
.plp-breadcrumb{ margin-bottom:4px; }
.plp-breadcrumb ol{ list-style:none; display:flex; flex-wrap:wrap; align-items:center; gap:6px; margin:0; padding:0; font-size:13px; }
.plp-breadcrumb li{ display:flex; align-items:center; gap:6px; opacity:.85; }
.plp-breadcrumb li:not(:last-child)::after{ content:"/"; opacity:.5; margin-left:6px; }
.plp-breadcrumb a{ color:inherit; text-decoration:none; opacity:.9; transition:opacity .2s var(--plp2-ease); }
.plp-breadcrumb a:hover{ opacity:1; text-decoration:underline; }
.plp-breadcrumb li[aria-current]{ font-weight:600; opacity:1; }
.plp-hero__content--plain .plp-breadcrumb{ font-size:13px; color:#888; }

/* Category header: H1 28px bold + count + right-aligned "Shop Collection"
   link, flex space-between — matches brief section 2 exactly. */
.plp-hero__title{
  font-family:var(--plp2-font-head); font-weight:700; letter-spacing:-.01em;
  font-size:clamp(24px,3vw,32px); line-height:1.15; margin:0 0 14px;
}
.plp-hero__content--plain .plp-hero__title{ font-size:28px; }
.plp-hero__desc{ max-width:640px; font-size:15px; line-height:1.6; opacity:.92; margin-bottom:18px; }
.plp-hero__desc p{ margin:0 0 8px; }
.plp-hero__meta{ display:flex; align-items:center; justify-content:space-between; gap:16px; flex-wrap:wrap; }
.plp-hero__count{
  display:inline-flex; align-items:center; padding:7px 16px; border-radius:999px;
  background:rgba(255,255,255,.16); backdrop-filter:blur(6px); font-size:15px; font-weight:400; color:var(--plp2-text-soft);
}
.plp-hero__content:not(.plp-hero__content--plain) .plp-hero__count{ color:#fff; font-weight:600; font-size:13px; }
.plp-hero__cta{
  display:inline-flex; align-items:center; gap:8px; background:transparent; color:var(--plp2-primary);
  padding:8px 4px; font-weight:600; font-size:14px; text-decoration:underline; text-underline-offset:3px;
  transition:color .2s var(--plp2-ease);
}
.plp-hero__content:not(.plp-hero__content--plain) .plp-hero__cta{
  background:var(--plp2-primary); color:#fff; padding:12px 22px; border-radius:999px; text-decoration:none;
  box-shadow:var(--plp2-shadow-sm);
}
.plp-hero__cta:hover{ color:var(--plp2-primary-hover); }
.plp-hero__content:not(.plp-hero__content--plain) .plp-hero__cta:hover{ background:var(--plp2-primary-hover); color:#fff; }
.plp-hero__cta svg{ animation:plp2-bounce 2.2s ease-in-out infinite; }
@keyframes plp2-bounce{ 0%,100%{ transform:translateY(0);} 50%{ transform:translateY(3px);} }

@media(max-width:767.98px){
  .plp-hero__content{ padding:28px 18px 24px; min-height:160px; }
  .plp-hero__content--plain{ padding:16px 4px 20px; min-height:0; }
  .plp-hero__content--plain .plp-hero__title{ font-size:22px; }
  /* Count + "Shop Collection" row: redundant on mobile once the utility bar
     and its own count readout are hidden — keep just the H1. JS still finds
     .plp-hero__count for its AJAX text swap; display:none doesn't break that. */
  .plp-hero__meta{ display:none; }
}

/* ===================== 3. Filter & sort bar ===================== */
body.template-collection .utility-bar{
  position:sticky; top:0; z-index:20; background:rgba(250,250,250,.92); backdrop-filter:blur(10px) saturate(1.1);
  border-radius:999px; border:1px solid var(--plp2-border); box-shadow:var(--plp2-shadow-sm);
  padding:6px 8px; margin-bottom:0; gap:12px;
}
body.template-collection .utility-bar__left{ display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
body.template-collection .utility-bar .toggle-btn{
  display:inline-flex; align-items:center; gap:8px; font-weight:600; font-size:13px; letter-spacing:.03em; text-transform:uppercase;
  color:var(--plp2-primary); cursor:pointer; background:transparent; border:1px solid transparent;
}
body.template-collection .utility-bar .toggle-btn[data-toggle-filters]{
  border-color:var(--plp2-border); border-radius:999px; padding:9px 16px; background:var(--plp2-card);
}
body.template-collection .utility-bar .toggle-btn[data-toggle-filters]:hover{ border-color:var(--plp2-primary); }
body.template-collection .utility-bar .toggle-btn__chevron{ margin-left:4px; display:inline-flex; }
body.template-collection .utility-bar .toggle-btn__chevron svg{ width:14px; height:14px; }
.plp-active-count--btn{
  display:inline-flex; align-items:center; justify-content:center; min-width:18px; height:18px; padding:0 4px;
  background:var(--plp2-accent); color:#fff; border-radius:999px; font-size:10px; font-weight:700;
}
.plp-count-readout{ font-size:13px; color:var(--plp2-text-soft); white-space:nowrap; text-transform:none; }
.plp-count-total{ color:var(--plp2-primary); font-weight:700; }

.plp-view-toggle{ display:flex; align-items:center; gap:2px; background:var(--plp2-card); border:1px solid var(--plp2-border); border-radius:999px; padding:3px; }
.plp-view-toggle__btn{
  display:flex; align-items:center; justify-content:center; width:32px; height:32px; border:0; border-radius:999px;
  background:transparent; color:var(--plp2-text-soft); cursor:pointer; transition:all .2s var(--plp2-ease);
}
.plp-view-toggle__btn:hover{ color:var(--plp2-primary); }
.plp-view-toggle__btn.is-active{ background:var(--plp2-primary); color:#fff; }

/* Sort dropdown: clean select-style trigger with custom chevron */
body.template-collection .link-dropdown__button{
  border:1px solid var(--plp2-border); border-radius:999px; padding:9px 16px; font-size:13px; font-weight:600;
  background:var(--plp2-card); color:var(--plp2-primary);
}
body.template-collection .link-dropdown__options{
  border-radius:var(--plp2-radius-sm); box-shadow:var(--plp2-shadow-lg); border:1px solid var(--plp2-border); overflow:hidden;
}
body.template-collection .link-dropdown__link--active{ color:var(--plp2-primary); font-weight:700; background:var(--plp2-filter-bg); }

@media(max-width:767.98px){
  /* The bottom sticky .plp-mobile-actionbar already provides Filter + Sort,
     and the category header above already shows the product count — once
     those are hidden nothing mobile-relevant is left in this bar, so hide
     the whole thing instead of leaving an empty rounded box on-screen. */
  body.template-collection .utility-bar{ display:none; }
}

/* Active filter chips: rounded pills w/ close icon, bg #f0f0f0 per brief */
.plp-active-filters--bar{ display:flex; flex-wrap:wrap; gap:8px; align-items:center; margin:0 0 18px; }
.plp-chip{
  display:inline-flex; align-items:center; gap:6px; padding:7px 12px; border-radius:999px;
  background:#F0F0F0; border:1px solid transparent; font-size:12.5px; font-weight:500;
  color:#333; text-decoration:none; transition:all .2s var(--plp2-ease);
}
.plp-chip:hover{ border-color:var(--plp2-sale); color:var(--plp2-sale); }
.plp-chip__x{ font-size:14px; line-height:1; opacity:.6; }
.plp-clear-all--bar{ font-size:12.5px; font-weight:700; color:var(--plp2-primary); text-decoration:underline; margin-left:4px; }

/* Price presets */
.plp-price-presets{ display:flex; flex-wrap:wrap; gap:8px; margin-top:14px; }
.plp-price-presets__btn{
  font-size:12.5px; font-weight:600; padding:7px 14px; border-radius:999px; border:1px solid var(--plp2-border);
  background:#fff; color:var(--plp2-text); text-decoration:none; transition:all .2s var(--plp2-ease);
}
.plp-price-presets__btn:hover{ border-color:var(--plp2-primary); }
.plp-price-presets__btn.is-active{ background:var(--plp2-primary); border-color:var(--plp2-primary); color:#fff; }

/* ===================== 4. Filter sidebar polish ===================== */
body.template-collection .filters{ border-radius:var(--plp2-radius-lg); background:var(--plp2-card); }
body.template-collection .filter-group__heading{ font-family:var(--plp2-font-body); font-weight:600; font-size:13px; }
body.template-collection .filter-group__items{ transition:grid-template-rows .35s var(--plp2-ease); }
body.template-collection .filter-apply-btn{
  background:var(--plp2-primary); border-color:var(--plp2-primary); border-radius:999px; font-weight:700;
  transition:transform .2s var(--plp2-ease), background .2s var(--plp2-ease);
}
body.template-collection .filter-apply-btn:hover{ background:var(--plp2-primary-hover); border-color:var(--plp2-primary-hover); transform:translateY(-1px); }
body.template-collection .filter-reset-btn{ border-radius:999px; font-weight:600; }

/* ===================== 5. Product cards ===================== */
/* The 350px filter sidebar (see plp-filters.css) plus its 32px gap eats
   into the grid's available width. main43e1.css/premium.css jump straight
   to 4 columns at any viewport >=1024px with no awareness that a sidebar
   is competing for space here — between 1024-1399px that squeeze was
   forcing ~140px cards, which is what made the CTA buttons truncate.
   Step down to 3 columns for that range; below 1024px the sidebar is an
   off-canvas drawer (premium.css's own 768-1023px tablet rule already
   applies there), and from 1400px+ there's enough room for a real 4th
   column. Scoped to this template only so homepage/related-product grids
   (same --per-row-4 class, no competing sidebar) are unaffected. */
@media(min-width:1024px) and (max-width:1399.98px){
  body.template-collection .product-grid--per-row-4,
  body.template-collection .product-grid--per-row-5{
    --product-columns-desktop:3;
  }
}
/* column-gap wasn't set here before — the grid fell back to the base
   theme's 4px default, which reads as cards nearly touching side-by-side
   next to a generous 36px row-gap. 20px matches the column-gap already
   applied to the homepage grid (product-card-v2.css) for the same
   card-with-its-own-visible-shell reason. */
.plp-premium .product-grid{ row-gap:36px; column-gap:20px; }
.plp-premium product-block{ display:block; }
.plp-premium .block-inner{
  background:var(--plp2-card); border-radius:var(--plp2-radius); overflow:hidden; position:relative;
  transition:box-shadow .35s var(--plp2-ease), transform .35s var(--plp2-ease);
  container-type:inline-size; container-name:plp-card;
}
.plp-premium .block-inner:hover{ box-shadow:var(--plp2-shadow-md); transform:translateY(-4px); }
.plp-premium .image-cont{ position:relative; overflow:hidden; border-radius:var(--plp2-radius) var(--plp2-radius) 0 0; background:#F2F2F2; }

.plp-premium .product-block__image img{ transition:transform .6s var(--plp2-ease), opacity .5s var(--plp2-ease); }
.plp-premium .block-inner:hover .product-block__image--primary img{ transform:scale(1.06); }
.product-block__image--secondary{ opacity:0; transition:opacity .45s var(--plp2-ease); }
.plp-premium .block-inner:hover .product-block__image--secondary{ opacity:1; }

/* Badges — matches product-card-v2.css's sitewide badge redesign (2026-08)
   exactly, so a "Bestseller" tag looks the same on the homepage and here
   instead of two different badge systems on the same product. */
.product-block__badges{ position:absolute; top:12px; left:12px; z-index:3; display:flex; flex-direction:column; gap:6px; }
.plp-badge{
  font-family:var(--plp2-font-head); font-size:10px; font-weight:700; letter-spacing:.4px; text-transform:uppercase;
  padding:5px 8px; border-radius:6px; box-shadow:0 2px 6px rgba(0,0,0,.15);
}
.plp-badge--sale{ background:var(--plp2-sale); color:#fff; }
.plp-badge--new{ background:var(--plp2-primary); color:#fff; }
.plp-badge--bestseller{ background:#FBF3DE; color:#8A6D14; border:1px solid rgba(201,162,39,.35); box-shadow:none; padding:4px 7px; }

/* Overlay action buttons: wishlist / quick view / compare — always visible
   (not hover-gated) so touch/hybrid-pointer devices always have access;
   hover only adds a polish transition, never toggles visibility. Selector
   carries a `body.template-collection` prefix so this deterministically
   beats product-card-v2.css's sitewide `product-block .product-block__actions`
   rule regardless of stylesheet order, instead of relying on a fragile
   specificity coin-flip between the two files. */
.product-block__actions{
  position:absolute; top:12px; right:12px; z-index:3; display:flex; flex-direction:column; gap:8px;
}
body.template-collection product-block .product-block__actions{ opacity:1; transform:none; }

.product-block__actions button{
  width:34px; height:34px; border-radius:50%; border:none; background:rgba(255,255,255,.92); backdrop-filter:blur(4px);
  color:var(--plp2-primary); display:flex; align-items:center; justify-content:center; cursor:pointer;
  box-shadow:0 2px 8px rgba(17,17,17,.12); transition:background .2s var(--plp2-ease), color .2s var(--plp2-ease), transform .2s var(--plp2-ease);
}
.product-block__actions button:hover{ background:var(--plp2-primary); color:#fff; transform:scale(1.08); }
/* Gold accent for the saved/active state — matches product-card-v2.css's
   2026-08 redesign (sale-red already means "discount" elsewhere on the
   card; reusing it here made a saved item look like a markdown). */
.wishlist-toggle-btn.is-active{ color:var(--plp2-accent, #C9A227); }
.wishlist-toggle-btn.is-active:hover{ background:var(--plp2-accent, #C9A227); color:#fff; }

/* Add-to-cart / buy-now row — this used to hold its own equal-width
   bordered-pair button design (predating product-card-v2.css's 2026-08
   redesign), deliberately overriding the sitewide skin at higher
   specificity. That's now the source of the bug, not the fix: the two
   files disagreed on which button is primary (this one had Add to Cart
   as the outline and Buy Now filled — backwards from the current design)
   and this one's markup assumptions (plain text, no icon) broke against
   the icon+span children the redesign added, collapsing "Buy Now" down to
   a bare circular arrow. Deferring to product-card-v2.css's sitewide
   button rules instead of re-declaring a second, competing definition —
   the "single place that owns this" is now that file, for every template
   that renders a product-block, not a second copy here. Only the
   sidebar-narrow-card safety net (below) still earns a PLP-specific
   override, since a homepage card never has a competing sidebar to
   squeeze it. */
.product-block__cta-row{ margin-top:10px; }

/* Below ~230px of card width (sidebar + 4-col squeeze on mid desktop, or a
   deliberately narrow view-toggle state) even the redesigned card's
   lighter Buy Now ghost link can crowd the Add to Cart pill — drop Buy
   Now to icon-only past that point, the same trick product-card-v2.css
   already uses at mobile viewport widths (here driven by container width
   instead of viewport width, since the sidebar can squeeze a desktop-
   viewport card down this far too). */
@container plp-card (max-width: 230px){
  body.template-collection product-block .plp-buy-now-btn span{
    position:absolute; width:1px; height:1px; padding:0; margin:-1px;
    overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0;
  }
  /* Fixed-size circle, not a thin icon-plus-padding sliver — same fix as
     product-card-v2.css's matching mobile-viewport rule, applied here for
     the sidebar-narrow-container case. */
  body.template-collection product-block .plp-buy-now-btn{
    flex:0 0 auto; width:36px; height:36px; padding:0;
    justify-content:center; border-radius:50%; background:rgba(16,42,67,.07);
  }
  body.template-collection product-block .plp-buy-now-btn:hover{ background:rgba(16,42,67,.14); }
}

/* Ripple micro-interaction (element appended by plp-premium.js on click) */
.plp2-ripple{ position:absolute; border-radius:50%; background:rgba(255,255,255,.55); transform:scale(0); animation:plp2-ripple .55s var(--plp2-ease); pointer-events:none; }
@keyframes plp2-ripple{ to{ transform:scale(2.6); opacity:0; } }

/* Title / detail spacing.
   .plp-premium .product-block__detail{padding:14px 4px 4px} used to live
   here — 4px of horizontal padding, against product-card-v2.css's 22px
   sitewide card padding, at (0,2,0) specificity vs that file's (0,1,1),
   so THIS is what was actually winning on every collection page: cards
   read as cramped here specifically, never on the homepage, because only
   the collection template loads .plp-premium at all. Deferring to the
   sitewide 22px now instead of a second, disagreeing copy of the same
   property — same fix as the button/badge sections above. .product-block__brand
   / .plp-stars / .product-block__rating-count below are dead rules from
   an even older card iteration that predates .product-block__eyebrow /
   the inline-SVG star rating product-card.php actually renders now — left
   commented out for history rather than silently deleted. */
/* Base theme's `.inner{margin-left:auto;margin-right:auto}` (main43e1.css)
   is a flex-item cross-axis auto-margin — inside .product-block__detail's
   flex column, a non-zero auto margin on either side makes the flexbox
   spec skip `align-items:stretch` for that item entirely, so .inner
   shrink-wraps to its content's natural width and centers itself instead
   of filling the card. Short, one-line product names (whose natural width
   is narrower than the card) exposed this by dragging the cta-row's width
   down with them. Neutralising the auto margins restores the intended
   full-width fill for every card regardless of title length. */
.plp-premium product-block .product-block__detail .inner{ width:100%; margin-left:0; margin-right:0; }
/* Reserve 2 lines' worth of title height even for a 1-line title, so
   cards in the same grid row still line up at the price/rating/button
   level regardless of name length — genuinely PLP-specific (the sidebar
   makes short vs. long titles more common side-by-side here than on the
   homepage's wider cards), so this one stays, updated to match the
   sitewide margin instead of redeclaring its own. */
.plp-premium .product-block__title{ min-height:calc(1.4em * 2); }

.plp-premium .price__current{ font-weight:700; color:var(--plp2-primary); }
.plp-premium .price--on-sale .price__current{ color:var(--plp2-sale); }
.plp-premium .price__was{ color:var(--plp2-text-soft); text-decoration:line-through; font-size:12.5px; margin-left:6px; }
.plp-premium .offer-price{ color:var(--plp2-success); font-weight:700; font-size:12px; margin-left:6px; }

.product-block__swatches{ display:flex; gap:6px; margin:8px 0 2px; }
.plp-card-swatch{ width:16px; height:16px; border-radius:50%; border:1.5px solid #fff; box-shadow:0 0 0 1px var(--plp2-border); cursor:default; }
.plp-card-swatch[data-tag="beige"]{ background:#E8DCC8; }
.plp-card-swatch[data-tag="black"]{ background:#111; }
.plp-card-swatch[data-tag="blue"]{ background:#2255AA; }
.plp-card-swatch[data-tag="brown"]{ background:#7B4B2A; }
.plp-card-swatch[data-tag="cream"]{ background:#F3ECD9; }
.plp-card-swatch[data-tag="general"]{ background:conic-gradient(from 0deg,#f00,#ff0,#0f0,#0ff,#00f,#f0f,#f00); }
.plp-card-swatch[data-tag="green"]{ background:#2F6B3A; }
.plp-card-swatch[data-tag="grey"]{ background:#9A9A9A; }
.plp-card-swatch[data-tag="khaki"]{ background:#8C8253; }
.plp-card-swatch[data-tag="maroon"]{ background:#5E1A24; }
.plp-card-swatch[data-tag="multi"]{ background:linear-gradient(135deg,#e33 0 25%,#3a3 25% 50%,#33a 50% 75%,#ea3 75% 100%); }
.plp-card-swatch[data-tag="navy"]{ background:#132242; }
.plp-card-swatch[data-tag="orange"]{ background:#D66423; }
.plp-card-swatch[data-tag="pink"]{ background:#E4A3B5; }
.plp-card-swatch[data-tag="purple"]{ background:#5B3A78; }
.plp-card-swatch[data-tag="red"]{ background:#B3261E; }
.plp-card-swatch[data-tag="white"]{ background:#fff; }
.plp-card-swatch[data-tag="yellow"]{ background:#E8C93A; }

.product-block__sizes{ display:flex; flex-wrap:wrap; gap:5px; margin:6px 0; }
.product-block__size-chip{
  font-size:10.5px; font-weight:600; padding:3px 7px; border-radius:5px; background:var(--plp2-bg);
  border:1px solid var(--plp2-border); color:var(--plp2-text-soft);
}
.product-block__size-chip--more{ color:var(--plp2-accent); border-color:var(--plp2-accent); }

/* ===================== 6. Skeleton loading ===================== */
.plp-skeleton-card{ background:var(--plp2-card); border-radius:var(--plp2-radius); overflow:hidden; }
.plp-skeleton-card__img{ aspect-ratio:0.8; background:linear-gradient(100deg,#eee 30%,#f6f6f6 50%,#eee 70%); background-size:300% 100%; animation:plp2-shimmer 1.4s ease-in-out infinite; }
.plp-skeleton-card__line{ height:11px; margin:12px 4px 0; border-radius:6px; background:linear-gradient(100deg,#eee 30%,#f6f6f6 50%,#eee 70%); background-size:300% 100%; animation:plp2-shimmer 1.4s ease-in-out infinite; }
.plp-skeleton-card__line--w60{ width:60%; }
.plp-skeleton-card__line--w40{ width:40%; margin-top:8px; }
@keyframes plp2-shimmer{ 0%{ background-position:200% 0; } 100%{ background-position:-200% 0; } }
.plp-loading .collection-listing{ position:relative; min-height:400px; }
.plp-loading .collection-listing > *:not(.plp-skeleton-grid){ opacity:.35; filter:blur(1px); pointer-events:none; transition:opacity .2s var(--plp2-ease); }
.plp-skeleton-grid{ display:grid; grid-template-columns:repeat(var(--product-columns-desktop,4),minmax(0,1fr)); gap:36px 24px; position:absolute; inset:0; }
@media(max-width:767.98px){ .plp-skeleton-grid{ grid-template-columns:repeat(2,minmax(0,1fr)); } }

/* ===================== 7. Empty state ===================== */
.plp-premium .plp-empty{ padding:64px 20px; border-radius:var(--plp2-radius-lg); background:var(--plp2-card); border:1px solid var(--plp2-border); }
/* customdf2a.css's sitewide `:root{--primary:#007B5F}` (the theme's
   original green, before this store's navy override) still wins for
   .btn--primary's own `background:var(--primary)!important)` declaration
   here specifically — forcing the navy brand colour so "Browse All
   Products" doesn't read as an unrelated green button on an otherwise
   all-navy page. */
.plp-premium .plp-empty__actions .btn--primary{ background:var(--plp2-primary)!important; border-color:var(--plp2-primary)!important; }
.plp-premium .plp-empty__actions .btn--primary:hover{ background:var(--plp2-primary-hover)!important; border-color:var(--plp2-primary-hover)!important; }
.plp-empty__categories{ margin-top:28px; }
.plp-empty__categories-title{ font-size:12px; font-weight:700; text-transform:uppercase; letter-spacing:.04em; color:var(--plp2-text-soft); margin-bottom:12px; }
.plp-empty__categories-list{ display:flex; flex-wrap:wrap; gap:8px; justify-content:center; }
.plp-empty__category-chip{
  padding:8px 16px; border-radius:999px; border:1px solid var(--plp2-border); background:#fff; text-decoration:none;
  color:var(--plp2-text); font-size:13px; font-weight:600; transition:all .2s var(--plp2-ease);
}
.plp-empty__category-chip:hover{ border-color:var(--plp2-primary); background:var(--plp2-primary); color:#fff; }

/* ===================== 8. Mobile sort sheet + bottom action bar ===================== */
.plp-mobile-sort-sheet[hidden]{ display:none; }
.plp-mobile-sort-sheet{ position:fixed; inset:0; z-index:60; }
.plp-mobile-sort-sheet__shade{ position:absolute; inset:0; background:rgba(17,17,17,.5); animation:plp2-fade .25s var(--plp2-ease); }
.plp-mobile-sort-sheet__panel{
  position:absolute; left:0; right:0; bottom:0; background:#fff; border-radius:20px 20px 0 0; padding:8px 8px 24px;
  max-height:70vh; overflow-y:auto; animation:plp2-slideup .3s var(--plp2-ease);
}
.plp-mobile-sort-sheet__panel header{ display:flex; align-items:center; justify-content:space-between; padding:14px 16px; font-weight:700; font-family:var(--plp2-font-head); border-bottom:1px solid var(--plp2-border); margin-bottom:6px; }
.plp-mobile-sort-sheet__panel header button{ border:none; background:none; font-size:22px; line-height:1; cursor:pointer; color:var(--plp2-text-soft); }
.plp-mobile-sort-sheet__link{ display:block; padding:14px 16px; border-radius:12px; text-decoration:none; color:var(--plp2-text); font-size:14px; }
.plp-mobile-sort-sheet__link.is-active{ background:var(--plp2-filter-bg); color:var(--plp2-primary); font-weight:700; }
@keyframes plp2-fade{ from{ opacity:0;} to{ opacity:1;} }
@keyframes plp2-slideup{ from{ transform:translateY(100%);} to{ transform:translateY(0);} }

@media(max-width:767.98px){
  .plp-mobile-actionbar{
    position:fixed; left:0; right:0; bottom:0; z-index:50; display:flex; gap:1px; background:var(--plp2-border);
    box-shadow:0 -4px 20px rgba(17,17,17,.1);
  }
  .plp-mobile-actionbar button, .plp-mobile-actionbar a{
    flex:1; background:#fff; border:none; padding:14px 10px; font-size:13px; font-weight:700; color:var(--plp2-primary);
    display:flex; align-items:center; justify-content:center; gap:6px;
  }
}

/* ===================== 9. Recently viewed ===================== */
.plp-recently-viewed{ padding:56px 0 48px; }
.plp-recently-viewed__track{ display:grid; grid-template-columns:repeat(auto-fill,minmax(180px,1fr)); gap:20px; }
.plp-rv-card{ text-decoration:none; color:inherit; display:block; }
.plp-rv-card__img{ display:block; aspect-ratio:.8; border-radius:var(--plp2-radius); overflow:hidden; background:#F2F2F2; margin-bottom:8px; }
.plp-rv-card__img img{ width:100%; height:100%; object-fit:cover; transition:transform .5s var(--plp2-ease); }
.plp-rv-card:hover .plp-rv-card__img img{ transform:scale(1.05); }
.plp-rv-card__name{ font-size:13px; font-weight:600; color:var(--plp2-primary); margin-bottom:2px; display:-webkit-box; -webkit-line-clamp:1; -webkit-box-orient:vertical; overflow:hidden; }
.plp-rv-card__price{ font-size:13px; font-weight:700; color:var(--plp2-text-soft); }

/* ===================== 11. Quick View modal ===================== */
.plp-qv-modal[hidden]{ display:none; }
.plp-qv-modal{ position:fixed; inset:0; z-index:80; display:flex; align-items:center; justify-content:center; padding:20px; }
.plp-qv-modal__shade{ position:absolute; inset:0; background:rgba(17,17,17,.6); animation:plp2-fade .25s var(--plp2-ease); }
.plp-qv-modal__panel{
  position:relative; background:#fff; border-radius:var(--plp2-radius-lg); max-width:760px; width:100%; max-height:88vh;
  overflow-y:auto; display:flex; flex-wrap:wrap; animation:plp2-pop .3s var(--plp2-ease); box-shadow:var(--plp2-shadow-lg);
}
@keyframes plp2-pop{ from{ opacity:0; transform:scale(.94);} to{ opacity:1; transform:scale(1);} }
.plp-qv-modal__close{
  position:absolute; top:14px; right:14px; width:32px; height:32px; border-radius:50%; border:none;
  background:var(--plp2-filter-bg); font-size:18px; cursor:pointer; z-index:2;
}
.plp-qv-modal__img{ flex:1 1 320px; background:#F2F2F2; min-height:320px; }
.plp-qv-modal__img img{ width:100%; height:100%; object-fit:cover; }
.plp-qv-modal__body{ flex:1 1 320px; padding:36px; }
.plp-qv-modal__brand{ font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:.04em; color:var(--plp2-text-soft); }
.plp-qv-modal__name{ font-family:var(--plp2-font-head); font-size:22px; font-weight:700; margin:6px 0 12px; }
.plp-qv-modal__price{ font-size:20px; font-weight:700; color:var(--plp2-primary); margin-bottom:6px; }
.plp-qv-modal__price .was{ color:var(--plp2-text-soft); text-decoration:line-through; font-size:15px; margin-left:8px; font-weight:500; }
.plp-qv-modal__price .pct{ color:var(--plp2-success); font-weight:700; font-size:13px; margin-left:8px; }
.plp-qv-modal__sizes{ font-size:13px; color:var(--plp2-text-soft); margin:14px 0; }
.plp-qv-modal__cta{ display:flex; gap:10px; margin-top:20px; }
.plp-qv-modal__cta a{
  flex:1; text-align:center; padding:14px; border-radius:999px; font-weight:700; font-size:14px; text-decoration:none;
  transition:all .2s var(--plp2-ease);
}
.plp-qv-modal__cta a.primary{ background:var(--plp2-primary); color:#fff; }
.plp-qv-modal__cta a.primary:hover{ background:var(--plp2-primary-hover); }
.plp-qv-modal__cta a.secondary{ border:1.5px solid var(--plp2-border); color:var(--plp2-primary); }

/* ===================== 12. Compare bar + modal ===================== */
.plp-compare-bar[hidden]{ display:none; }
.plp-compare-bar{
  position:fixed; left:50%; bottom:24px; transform:translateX(-50%); z-index:70; display:flex; align-items:center; gap:14px;
  background:var(--plp2-primary); color:#fff; padding:12px 12px 12px 20px; border-radius:999px; box-shadow:var(--plp2-shadow-lg);
  animation:plp2-slideup .3s var(--plp2-ease);
}
.plp-compare-bar__count{ font-size:13px; font-weight:600; }
.plp-compare-bar__view{ background:#fff; color:var(--plp2-primary); border:none; border-radius:999px; padding:9px 16px; font-weight:700; font-size:13px; cursor:pointer; }
.plp-compare-bar__clear{ background:none; border:none; color:rgba(255,255,255,.7); font-size:13px; cursor:pointer; text-decoration:underline; }

.plp-compare-modal[hidden]{ display:none; }
.plp-compare-modal{ position:fixed; inset:0; z-index:85; display:flex; align-items:center; justify-content:center; padding:20px; }
.plp-compare-modal__shade{ position:absolute; inset:0; background:rgba(17,17,17,.6); }
.plp-compare-modal__panel{
  position:relative; background:#fff; border-radius:var(--plp2-radius-lg); max-width:920px; width:100%; max-height:86vh;
  overflow:auto; padding:32px; box-shadow:var(--plp2-shadow-lg); animation:plp2-pop .3s var(--plp2-ease);
}
.plp-compare-modal__close{ position:absolute; top:16px; right:16px; width:32px; height:32px; border-radius:50%; border:none; background:var(--plp2-filter-bg); font-size:18px; cursor:pointer; }
.plp-compare-table{ width:100%; border-collapse:collapse; margin-top:12px; }
.plp-compare-table td{ padding:14px; border-bottom:1px solid var(--plp2-border); vertical-align:top; text-align:center; }
.plp-compare-table img{ width:96px; height:120px; object-fit:cover; border-radius:10px; margin-bottom:8px; }
.plp-compare-table .name{ font-size:13px; font-weight:600; }
.plp-compare-table .price{ font-size:13px; font-weight:700; color:var(--plp2-sale); }
.plp-compare-table__remove{ border:none; background:none; color:var(--plp2-text-soft); font-size:12px; cursor:pointer; text-decoration:underline; margin-top:6px; }

/* ===================== 13. Accessibility & motion ===================== */
.plp-premium a:focus-visible,
.plp-premium button:focus-visible,
.plp-premium input:focus-visible{ outline:2.5px solid var(--plp2-primary); outline-offset:2px; }
@media(prefers-reduced-motion:reduce){
  .plp-premium *{ animation-duration:.001ms!important; transition-duration:.001ms!important; }
}

.plp-premium{ padding-bottom:72px; }

/* ===================== 14. Pagination ===================== */
body.template-collection .pagination-row{ margin-top:40px; margin-bottom:24px; text-align:center; border-bottom:none; }
body.template-collection .pagination{
  display:flex; flex-wrap:wrap; justify-content:center; align-items:center; gap:6px;
}
body.template-collection .pagination__number{ margin:0; }
body.template-collection .pagination__number a,
body.template-collection .pagination__number span{
  display:inline-flex; align-items:center; justify-content:center; min-width:36px; height:36px; padding:0 6px;
  border-radius:999px; font-size:13px; font-weight:600; color:var(--plp2-text); text-decoration:none;
  transition:background .2s var(--plp2-ease), color .2s var(--plp2-ease);
}
body.template-collection .pagination__number a:hover{ background:var(--plp2-filter-bg); }
body.template-collection .pagination__number .underline--not-link{
  background:var(--plp2-primary); color:#fff; text-decoration:none;
}
body.template-collection .pagination__sep{ color:var(--plp2-text-soft); }
body.template-collection .pagination__next{
  display:inline-flex; align-items:center; height:36px; padding:0 16px; margin-left:6px;
  border-radius:999px; border:1px solid var(--plp2-border); font-size:13px; font-weight:600;
  color:var(--plp2-primary); text-decoration:none; transition:background .2s var(--plp2-ease), border-color .2s var(--plp2-ease);
}
body.template-collection .pagination__next:hover{ background:var(--plp2-filter-bg); border-color:var(--plp2-primary); }