/*
 * Premium product-card redesign (2026-08 complete pass) — supersedes the
 * 2026-07-22 "clean card" refresh with a full visual rebuild: pill/ghost
 * button pair instead of two equal bordered rectangles, brand eyebrow +
 * real star rating above the title, near-invisible card shell instead of
 * border+shadow-heavy box, and a tighter neutral image stage.
 *
 * Loaded site-wide (see header.php) so it reaches every render_product_card()
 * call (home, PLP, cart, wishlist, search, related products, account pages) —
 * unlike plp-premium.css, which is collection-page-only. Selectors below are
 * intentionally a notch more specific than plp-premium.css's bare classes
 * (e.g. `product-block .plp-badge` instead of `.plp-badge`) so this file wins
 * on the collection page too regardless of the two files' <link> order; the
 * few overrides of customdf2a.css's/premium.css's !important rules are
 * called out inline.
 */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');

product-block.product-block{
  /* var(--primary) is the site's live brand colour (navy, set in
     premium.css's "Luxury Navy" theme override) — reusing it keeps the
     card on-brand and tracks automatically if the theme colour ever
     changes; #183A63 is only the fallback for the (unlikely) case that
     variable is ever unset. --pc-dark/--pc-gold are new fixed premium-
     palette additions this pass, not tied to an existing site variable. */
  --pc-primary:var(--primary, #183A63);
  --pc-dark:#102A43;
  --pc-gold:#C9A227;
  --pc-success:#16A34A;
  --pc-sale:#E53935;
  --pc-border:#E6E8EC;
  --pc-text:#172033;
  --pc-text-soft:#667085;
  --pc-text-muted:#98A2B3;
  --pc-img-bg:#F7F8FA;
  --pc-radius:15px;
  --pc-radius-btn:11px;
  --pc-ease:cubic-bezier(.4,0,.2,1);
  --pc-shadow:0 2px 12px rgba(16,42,67,.05);
  --pc-shadow-hover:0 10px 26px rgba(16,42,67,.12);
  font-family:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;
  display:block;
}

/* ---------- Card shell ----------
   Near-invisible by default (a hairline border carries the shape; the
   shadow is barely there) — the old version leaned on a visible border +
   a real drop shadow together, which reads as a bordered box rather than
   a card floating slightly off the page. */
product-block .block-inner{
  background:#fff;
  border:1px solid var(--pc-border);
  border-radius:var(--pc-radius);
  box-shadow:var(--pc-shadow);
  overflow:hidden;
  transition:box-shadow .22s var(--pc-ease), transform .22s var(--pc-ease), border-color .22s var(--pc-ease);
  /* Card width varies a lot by context — 193px in the homepage tab section
     (product-card-v2.css's own column-gap:20px applies there), ~169px in
     Featured/Best-seller sections and other per-row-4/mob-2 grids that
     don't get that wider gap, different again on PLP/search/cart. The
     767.98px media-query CTA sizing below was tuned against one of those
     (~220px) and clips "Add to Cart" in any narrower one. A container
     query keys off this card's own real rendered width instead of the
     viewport, so the same rule self-adjusts correctly in every context
     this component is used in (home tabs, featured/new/bestseller
     sections, PLP at any column count, search, cart, wishlist, related
     products) without having to special-case each section. */
  /* No container-name: plp-premium.css (loaded after this file, and with
     a more specific .plp-premium .block-inner selector) sets its own
     container-type:inline-size + container-name:plp-card on this same
     element for the PLP template — that wins the cascade on that page
     and silently renames the container, which would break a named
     @container pc-card query there while leaving it working everywhere
     else. An unnamed query below binds to the nearest qualifying
     ancestor regardless of whatever name wins, so it survives that
     override instead of fighting it. */
  container-type:inline-size;
}
product-block .block-inner:hover,
product-block .block-inner:focus-within{
  border-color:rgba(16,42,67,.14);
  box-shadow:var(--pc-shadow-hover);
  transform:translateY(-2px);
}

/* ---------- Image ----------
   A fixed pixel height (not a native `aspect-ratio` or the old percentage-
   of-width padding-top trick) is what keeps this genuinely compact across
   a real 4-column desktop grid: at typical column widths a 1:1 ratio would
   land near 380px tall, pushing total card height well past the ~380-460px
   target once the detail block is added — a fixed height decouples image
   height from column width entirely, which a ratio by definition can't.
   render_product_card() still sets --aspect-ratio:0.8 inline for other
   consumers of .img-ar site-wide; zeroing the padding-top spacer here
   (product-block-scoped) and giving .img-ar its own real height instead is
   the same "!important beats inline" trick, just anchored to a fixed value.
   .product-block__image and .image-label-wrap have no explicit height of
   their own (verified against main43e1.css) — they're block-level and
   auto-size to this one real height, so nothing else in the chain needs
   touching, and the absolutely-positioned hover-swap secondary image
   (height:100% against .image-label-wrap's now-real used height) keeps
   working unchanged. */
product-block .image-cont{
  position:relative;
  overflow:hidden;
  background:var(--pc-img-bg);
  border-radius:var(--pc-radius) var(--pc-radius) 0 0;
}
product-block .img-ar:before{ padding-top:0!important; content:none; }
product-block .img-ar{ height:260px; }
@media(max-width:1024px) and (min-width:768.02px){
  product-block .img-ar{ height:220px; }
}
@media(max-width:767.98px){
  product-block .img-ar{ height:175px; }
}
/* Catalog look, not a lifestyle-photo crop: the whole product visible on
   its near-invisible neutral stage with real breathing room (~70-80% fill
   once padding is subtracted), not cropped edge-to-edge. Padding lives on
   the img itself (not a wrapper) since .img-ar img is
   position:absolute;width:100%;height:100% from main43e1.css — border-box
   sizing keeps the padding inside that 100%, rather than overflowing it. */
product-block .img-ar--cover img{
  object-fit:contain;
  object-position:center center;
  padding:28px;
  box-sizing:border-box;
}
@media(max-width:1024px) and (min-width:768.02px){
  product-block .img-ar--cover img{ padding:22px; }
}
@media(max-width:767.98px){
  product-block .img-ar--cover img{ padding:14px; }
}
product-block .product-block__image img{
  transition:transform .3s var(--pc-ease), opacity .4s var(--pc-ease);
}
product-block .block-inner:hover .product-block__image--primary img{ transform:scale(1.03); }
product-block .product-block__image--secondary{ opacity:0; transition:opacity .4s var(--pc-ease); }
product-block .block-inner:hover .product-block__image--secondary{ opacity:1; }

/* ---------- Badge (top-left) ---------- */
product-block .product-block__badges{
  position:absolute; top:12px; left:12px; z-index:3;
  display:flex; flex-direction:column; gap:6px;
}
product-block .plp-badge{
  font-family:inherit; font-size:10px; font-weight:700; letter-spacing:.4px; text-transform:uppercase;
  padding:5px 8px; border-radius:6px; line-height:1.3;
  box-shadow:0 2px 6px rgba(16,42,67,.15);
}
product-block .plp-badge--sale{ background:var(--pc-sale); color:#fff; }
product-block .plp-badge--new{ background:var(--pc-primary); color:#fff; }
/* Gold accent, not a full gold fill — a solid gold badge next to a navy
   button reads as two competing "premium" claims; a gold-bordered chip on
   a soft gold tint stays in its own lane (see section 20's "use gold
   carefully" — this is the one badge it's reserved for). */
product-block .plp-badge--bestseller{ background:#FBF3DE; color:#8A6D14; border:1px solid rgba(201,162,39,.35); box-shadow:none; padding:4px 7px; }
/* render_product_card() can push sale + new + bestseller all at once,
   stacking 3 full-width pills top-left — reads as cluttered rather than
   premium. PHP always pushes them in the same priority order (sale, new,
   bestseller), so keeping only the first one shown is always the single
   most relevant claim for that product; the rest still exist in the DOM,
   just hidden, so nothing about the underlying data/badges array changes. */
product-block .product-block__badges .plp-badge ~ .plp-badge{ display:none; }

/* ---------- Wishlist ----------
   No border this pass (a shadow alone reads as "floating chip"; adding a
   border on top of a shadow is what made the previous version feel like a
   separate bolted-on circle rather than part of the image). */
product-block .product-block__actions{
  position:absolute; top:12px; right:12px; z-index:3;
  opacity:1; transform:none;
}
product-block .product-block__actions button{
  width:35px; height:35px; border-radius:50%; border:none; background:rgba(255,255,255,.92);
  color:var(--pc-primary); display:flex; align-items:center; justify-content:center; cursor:pointer;
  box-shadow:0 2px 8px rgba(16,42,67,.14); backdrop-filter:blur(2px);
  transition:background .2s var(--pc-ease), color .2s var(--pc-ease), transform .15s var(--pc-ease);
}
product-block .product-block__actions button:hover{ background:var(--pc-primary); color:#fff; transform:scale(1.06); }
product-block .product-block__actions button:active{ transform:scale(.93); }
/* Active/"selected" wishlist state gets the gold accent (section 20's own
   "selected states" use case for gold), not the sale red — red already
   means "discount" elsewhere on this card, and reusing it here would make
   a saved item look like a markdown. */
product-block .wishlist-toggle-btn.is-active{ color:var(--pc-gold); }
product-block .wishlist-toggle-btn.is-active:hover{ background:var(--pc-gold); color:#fff; }

/* ---------- Detail block ----------
   2026-08 spacing pass: uniform 22px padding on every side (was an
   asymmetric 14px/16px), and every gap between eyebrow/title/rating/price/
   buttons is now an explicit, requested margin instead of a mix of small
   margins plus an absolutely-pinned button row eating the rest of the
   card's height. That old approach made the visible gap above the buttons
   swing with title length (a 1-line title left much more slack than a
   2-line one, since the row was pinned to the card's bottom edge instead
   of following the content) — normal flow with a fixed margin-top on the
   button row means the gap is the same 16px on every card regardless of
   title length, at the cost of cards no longer sharing an identical
   overall height when title lengths differ (an intentional trade-off:
   consistent internal rhythm over identical card silhouettes). */
product-block .product-block__detail{ padding:22px; }
product-block .product-block__detail .inner,
product-block .product-block__detail .innerer{ padding:0; }

product-block .product-block__eyebrow{
  font-size:10.5px; font-weight:600; letter-spacing:.6px; text-transform:uppercase;
  color:var(--pc-text-soft); margin:0 0 12px;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
product-block .product-block__title{
  font-size:15px; font-weight:600; color:var(--pc-text); line-height:1.4; margin:0 0 8px;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
}
/* Legacy subtitle class (brand-as-subtitle from the previous pass) is no
   longer used by product-card.php — brand now renders as the eyebrow
   above the title instead — but the rule stays in case any other template
   still emits it directly. */
product-block .product-block__subtitle{
  font-size:13px; font-weight:400; color:var(--pc-text-soft); margin:0 0 8px;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}

/* ---------- Rating ----------
   Only rendered by product-card.php when $hasRating is true (a real
   AVG/COUNT from approved product_reviews rows) — never a fabricated
   number, so there's no "0 reviews" or placeholder state to style here. */
product-block .product-block__rating{
  display:flex; align-items:center; gap:4px; margin:0 0 10px;
  font-size:12px; color:var(--pc-text-soft); line-height:1;
}
product-block .product-block__rating svg{ color:var(--pc-gold); flex-shrink:0; }
product-block .product-block__rating-value{ font-weight:600; color:var(--pc-text); }

/* ---------- Price row ---------- */
product-block .product-price--block .price__default{
  display:flex; align-items:baseline; flex-wrap:wrap; gap:6px 8px; margin:0 0 16px;
}
/* Beats customdf2a.css's `product-block .price__default span{font-size:13px!important}`
   via higher selector specificity (2 classes vs 1) carrying its own !important. */
product-block .price__default .price__current{
  font-size:17px!important; font-weight:700!important; color:var(--pc-dark)!important; letter-spacing:0;
}
product-block .price--on-sale .price__current{ color:var(--pc-sale)!important; }
product-block .price__default .price__was{
  font-size:12.5px!important; font-weight:400!important; color:var(--pc-text-muted)!important;
  text-decoration:line-through; opacity:1;
}
/* Shown this pass (the 2026-07 version hid it to avoid repeating the
   image badge's "X% OFF" claim) — as a small plain-text tag rather than a
   loud pill, it reads as a supporting detail next to the price instead of
   a second competing badge. */
product-block .price__default .price__discount-pill{
  display:inline-block!important; font-size:11px!important; font-weight:600!important;
  color:var(--pc-success)!important; background:none!important; padding:0!important;
}

/* ---------- Action row ----------
   Add to Cart is the primary action (filled pill, grows to fill the row);
   Buy Now is a secondary ghost text+arrow link, not a second equal-weight
   button — this is the main visual change this pass. Normal flow now
   (not absolutely pinned to the card's bottom edge — see the detail-block
   comment above for why), with margin-top on the row itself carrying the
   requested 16px price-to-buttons gap. plp-premium.css (collection page
   only) hides this row until hover —
   `.product-block__cta-row{opacity:0;max-height:0;overflow:hidden}` — a
   holdover from an even older hover-reveal card; every property that rule
   touches is re-declared below at higher specificity to cancel it. */
product-block .product-block__cta-row{
  margin-top:16px;
  display:flex; align-items:center; gap:10px;
  opacity:1; max-height:none; overflow:visible;
}
/* Undoes customdf2a.css's `.quick_add_card_btn_custom{position:absolute;
   left:0;right:0;bottom:0}` (written for an even older single-button
   layout, still shipping today) and premium.css's `margin-top:3px
   !important` on the same selector — this button lives in normal flow as
   part of the row above now, not pinned by either of those. */
product-block .product-block__cta-row .quick_add_card_btn_custom{ position:static!important; margin:0!important; }

product-block .product-block__cta-row button,
product-block .product-block__cta-row a{
  cursor:pointer; text-decoration:none; transition:background .2s var(--pc-ease), color .2s var(--pc-ease), transform .15s var(--pc-ease);
}
product-block .product-block__cta-row button:active,
product-block .product-block__cta-row a:active{ transform:scale(.97); }

/* Add to Cart — primary / filled pill.
   premium.css has `button.quick_add_card_btn_custom{background:#1E3A5F
   !important; color:#fff !important; padding:8px !important; margin-top:3px
   !important}` (its own deliberate fix for an unrelated legacy bug) — same
   specificity as a bare `.quick_add_card_btn_custom`, so it must be beaten
   here with higher specificity + !important of our own, which the
   `product-block .product-block__cta-row` prefix provides. */
product-block .product-block__cta-row .quick_add_card_btn_custom{
  flex:1; min-width:0; padding:10px 16px!important; margin-top:0!important;
  display:flex; align-items:center; justify-content:center; gap:6px;
  background:var(--pc-primary)!important; border:none; border-radius:var(--pc-radius-btn);
  color:#fff!important; font-size:13px!important; font-weight:600!important;
  text-transform:none!important; letter-spacing:normal!important; line-height:1.2;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
/* Ellipsis/nowrap on the button (a flex container) doesn't truncate the
   label span's own text — flex items default to min-width:auto, which
   refuses to shrink the span below its content's natural width, so on a
   narrow column (e.g. the 3-col PLP grid) the row ran out of space and
   the label wrapped to 2 lines instead of truncating. Needs its own
   min-width:0 + nowrap + ellipsis directly on the child that holds the
   text — confirmed by testing at the PLP's narrower column width. */
product-block .product-block__cta-row .quick_add_card_btn_custom__label{
  min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
product-block .product-block__cta-row .quick_add_card_btn_custom svg{ flex-shrink:0; }
product-block .product-block__cta-row .quick_add_card_btn_custom:hover{ background:var(--pc-dark)!important; transform:translateY(-1px); }

/* Buy Now — secondary / ghost text link with a trailing arrow that nudges
   right on hover. flex:0 0 auto keeps it its own natural width instead of
   matching the pill's flex:1, so it reads as a lighter-weight action next
   to the primary one rather than a second equal button. Same padding
   formula (10px 16px), font-size and line-height as the Add to Cart pill
   next to it — matching inputs, not an explicit height on one or the
   other, is what keeps the two visually the same height despite one being
   a filled button and the other a borderless link. */
product-block .plp-buy-now-btn{
  flex:0 0 auto; padding:10px 16px;
  display:inline-flex; align-items:center; gap:4px;
  background:none; border:none;
  color:var(--pc-primary); font-size:13px!important; font-weight:600!important;
  text-transform:none!important; letter-spacing:normal!important; line-height:1.2;
  white-space:nowrap;
}
product-block .plp-buy-now-btn svg{ transition:transform .2s var(--pc-ease); flex-shrink:0; }
product-block .plp-buy-now-btn:hover{ color:var(--pc-gold); }
product-block .plp-buy-now-btn:hover svg{ transform:translateX(2px); }

product-block a:focus-visible,
product-block button:focus-visible{ outline:2px solid var(--pc-gold); outline-offset:2px; }

/* ---------- Grid: 4-col desktop / 2-col tablet+mobile, wider gutters ----------
   customdf2a.css's base rule for the homepage tab/featured/etc. grids
   (`.product-grid{grid-template-columns:repeat(4,1fr);grid-gap:4px;
   grid-row-gap:20px}`) uses a 4px column gap — fine for the old edge-to-
   edge cards, cramped for a card with its own visible shell. 20px (within
   the requested 18-24px range) lets each card breathe without the grid
   itself needing a rewrite. Also fills the 768.02-1024px gap with the
   same 2-col count as <=768px, instead of stretching 4 narrow columns
   onto tablet widths — without touching the PLP/search grids, which
   already manage their own responsive column counts independently. */
.homepage_collection_tab .product-grid,
.homepage_collection_tab .tab-collection .product-grid{
  column-gap:20px!important;
}
@media(min-width:768.02px) and (max-width:1024px){
  .homepage_collection_tab .tab-collection .product-grid,
  .homepage_collection_tab .product-grid{
    grid-template-columns:repeat(2,1fr)!important;
  }
}

@media(max-width:767.98px){
  /* A 2-column mobile card is only ~220px wide — the desktop card's 22px
     padding (44px eaten from both sides) plus the Add to Cart button's
     own 16px horizontal padding left too little room for "Add to Cart"
     to render without clipping to "Add to C...". Buy Now is already
     icon-only at this width (below), so it's Add to Cart's text that
     needed the room back — reducing the card's own padding, not just the
     button's, since a 22px card inset was already generous for a card
     this narrow. */
  product-block .product-block__detail{ padding:16px; }
  product-block .product-block__title{ font-size:14px; }
  product-block .product-block__eyebrow{ font-size:10px; }
  product-block .price__default .price__current{ font-size:16px!important; }
  product-block .product-block__cta-row .quick_add_card_btn_custom{ padding:10px 12px!important; font-size:12.5px!important; }
  product-block .plp-buy-now-btn{ font-size:12.5px!important; }
  /* A 2-column mobile card is too narrow for "Add to Cart" + icon and a
     "Buy Now" text link to both fit without truncating — confirmed in
     testing at 390px viewport width, "Add to Cart" clipped to "Add to".
     Section 19's own spec allows Buy Now to become icon-only on mobile;
     the label stays in the DOM (visually-hidden, not display:none) so
     screen readers still announce "Buy Now" on the link. A plain
     icon-with-4px-padding read as an accidental leftover rather than a
     real button once tested at actual mobile width — tall and thin (the
     38px button height, ~22px wide) instead of a proportioned shape. A
     fixed-size circle (same visual language as the wishlist heart button)
     reads as a deliberate secondary icon action instead. */
  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);
  }
  product-block .plp-buy-now-btn:hover{ background:rgba(16,42,67,.14); }
  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;
  }
  /* Outside the homepage tab section (which deliberately keeps a wider
     20px column-gap for breathing room around its shelled cards, see
     above), the 2-col mobile grid was still inheriting the base theme's
     16px gutter — more horizontal whitespace between the two cards than
     needed at this width, at the direct cost of each card's own width.
     column-gap only (row-gap/vertical rhythm untouched, per explicit
     feedback — this is a width change, not a height one). Single-class
     selector (specificity 0,1,0) is deliberately lower than the tab
     section's `.homepage_collection_tab .product-grid` override (0,2,0)
     above, so that rule always wins there regardless of source order —
     this only takes effect where nothing more specific already set the
     gap. */
  .product-grid--per-row-mob-2{ column-gap:6px!important; }
  /* Reference screenshot (competitor PLP) has cards running almost to the
     screen edge — most of that width comes from the section's own
     outer side padding, not the inter-card gap already tightened above.
     .container.container--no-max is the exact class the header also
     uses (see header.php) for its own full-width bar, so a plain class
     selector here would have widened the header/nav too; :has() scopes
     this to only the containers that directly wrap a product grid,
     leaving every other use of that class untouched. 8px (from 16px)
     roughly matches the reference's proportions without letting cards
     touch the viewport edge outright. */
  .container.container--no-max:has(.product-grid--per-row-mob-2){
    padding-left:8px; padding-right:8px;
  }
}

/* ---------- Mobile card redesign (2026-08) ----------
   Requested against a reference screenshot (a competitor's mobile PLP
   card): flat card with no visible border/shadow, a much larger product
   photo, and — the biggest structural difference — no Add to Cart/Buy
   Now row on the card at all; the whole card is a single tap-through to
   the product page instead. Desktop/tablet are unchanged; this is
   mobile-only per explicit user scoping ("i am talking about mobile
   version"). Markup is untouched — the cta-row still renders in the DOM
   (display:none here, not removed server-side), so nothing about
   render_product_card() needs to change and the row still works
   normally at any wider viewport. Removing it also permanently retires
   the "Add to Cart" truncation problem the last several fixes chased,
   since there's no longer a button to clip on any card width. */
@media(max-width:767.98px){
  product-block .block-inner{ border:none; box-shadow:none; }
  product-block .block-inner:hover,
  product-block .block-inner:focus-within{ box-shadow:none; transform:none; }
  /* Same fixed 175px image box as before (height intentionally untouched
     — only the inset around the photo shrinks), so the photo itself
     reads as noticeably bigger without changing the card's silhouette. */
  product-block .img-ar--cover img{ padding:8px; }
  product-block .product-block__cta-row{ display:none; }
  /* Detail block no longer ends with a button row — a touch more bottom
     padding than the 16px used on every other side keeps the price from
     sitting flush against the card's edge now that nothing follows it. */
  product-block .product-block__detail{ padding:14px 14px 18px; }
  /* Reference shows the sale price in the same dark ink as a regular
     price (the strikethrough + green "% Off" text next to it already
     carry the "this is a deal" signal) rather than recoloring the price
     itself red — matching that here, mobile-only. */
  product-block .price--on-sale .price__current{ color:var(--pc-dark)!important; }
}

/* ---------- Narrow-card tier (container query, not viewport) ----------
   The 767.98px tier above was tuned against a ~220px card and still
   clipped "Add to Cart" to "Add t…" wherever the same 2-column mobile
   grid renders a narrower card — confirmed at 169px in the homepage
   Featured/Best-seller/New-arrival sections and any other
   per-row-4/per-row-mob-2 grid that doesn't get this file's own
   .homepage_collection_tab column-gap:20px bump (that section's cards
   land at ~193px, just wide enough). Rather than special-case every
   section by class name, key off the card's own rendered width via the
   container-type:inline-size set on .block-inner above — this then also
   self-corrects on any future/third-party section, PLP density, or
   viewport size that produces a similarly narrow card. 185px is just
   above the ~169-183px range measured across the current narrow
   contexts; wider cards (tab section, PLP, desktop) are untouched. */
@container (max-width:185px){
  product-block .product-block__detail{ padding:12px; }
  product-block .product-block__cta-row{ gap:6px; }
  product-block .product-block__cta-row .quick_add_card_btn_custom{
    padding:8px 6px!important; font-size:11.5px!important; gap:0;
  }
  /* The leading cart-outline SVG is decorative on the primary CTA (unlike
     Buy Now's arrow, which is the only visual cue once its label is
     hidden) — dropping it is what actually recovers enough width for the
     text label to render without clipping; font-size/padding alone
     couldn't close the ~25px gap without going illegibly small. */
  product-block .product-block__cta-row .quick_add_card_btn_custom svg{ display:none; }
  product-block .plp-buy-now-btn{ width:32px; height:32px; }
}

@media(prefers-reduced-motion:reduce){
  product-block *{ transition-duration:.001ms!important; animation-duration:.001ms!important; }
}