/* ==========================================================================
   CASEKING — THE PRODUCT CARD
   --------------------------------------------------------------------------
   One card, one file.

   The storefront renders this same card in five grids: the homepage and
   category catalogue, brand + search results, product-page cross-sell, cart
   recommendations and the blog's related-products block. index.html and
   blog.html do not share a stylesheet, so the card cannot live in
   ck-system.css (blog.html never loads it) — it lives here, and both pages
   link this file LAST, after their own base sheets.

   That load order is the contract. Three legacy layers also style these
   class names and two of them carry !important:

     styles.css        .product-info …        the pre-light dark cards
     styles.css        .product-card  @3244   the same card, restated
     approved-home.css #storefront-home-view  homepage-only geometry

   The rules below therefore use matching specificity and are expected to win
   on source order. Do not move the <link> above those files, and do not
   re-declare the card in ck-system.css.

   Tokens are namespaced --ckc- and hold literal values rather than pointing
   at --k-*: blog.html never loads ck-system.css, so --k-* is undefined there.

   --------------------------------------------------------------------------
   DESIGN: THE EDGELESS MEDIA ZONE

   Direction: reference-led. The card follows the NOMAD phone-case grid,
   measured off their live cards rather than eyeballed — a clean white surface
   at a 25px radius, its edge drawn as a 1px 6%-black ring plus a 1px drop
   shadow rather than a border, and a 20px gutter. Title loud, price quiet,
   everything else a caption under the picture.

   WHY THERE IS NO MEDIA PLATE
   The reference's plate is deliberately not reproduced. NOMAD's product shots
   are cut out, so their grey plate shows AROUND the product and the object
   floats on it. Every CaseKing catalogue shot is an opaque 1000x1000 JPEG on
   its own pure white ground — verified across categories, not assumed. A
   tinted plate here can therefore only ever draw a rectangle around the
   photograph: a coloured square with a picture inside it. There is no version
   of that which reads like the reference, because the reference's plate only
   works when the product floats free on it.

   So the card carries no plate and no inner edge at all. The picture runs the
   full card width, and because its own ground is the same white as the card
   its rectangle disappears — the product floats on the card instead of sitting
   in a box on it. Removing the plate and the card inset also hands back 34px
   of width that were buying nothing, since both were white on white.

   THE WARM FLOOR is what replaced the plate. The card is white where the
   product is and warms gradually toward its foot, so the media zone and the
   copy are separated by tone rather than by an edge. It is a gradient and not
   a filled panel precisely because a panel needs a boundary, and a boundary is
   the one thing this design exists to avoid.

   THE ANCHOR is unchanged and still the only dark mass: the reference has no
   card-level add-to-cart, but CaseKing needs one always visible, so the ink
   plate stays.

   THE ANCHOR is the action. It is the only dark mass on the card, and that is
   deliberate: a pale champagne plate on a pale panel left the strongest
   element after the photograph doing nothing. Ink is the strongest contrast
   available inside the existing palette, it is the one the premium references
   in this category use, and it costs no colour that CaseKing does not own.

   Gold is now an accent only — the halo, the maker tick, the badge, the price
   and the arrow — and never a surface. That is what keeps the card from
   turning into a gold-on-beige object.
   ========================================================================== */

:root {
  /* --- surfaces: the card is one surface, and it has no inner edges -------
     Reference: nomadgoods.com/eu/collections/phone-cases. Measured off the
     live cards rather than eyeballed: card #ffffff, radius 25px, edge drawn
     as a 1px 6%-black ring plus a 1px drop shadow, no border, grid gap 20px.

     The media plate from the reference is deliberately NOT reproduced. Every
     CaseKing catalogue shot is an opaque 1000x1000 JPEG on its own pure white
     ground, so any tinted plate can only ever draw a rectangle around the
     photograph - a beige square with a picture inside it. There is no version
     of that which looks like the reference, because the reference's plate
     works only because its products are cut out and float on it.

     So the card carries no plate and no inner edge at all. It is white where
     the product is and warms gradually toward its foot, and the warmth is a
     gradient rather than a filled panel precisely because a panel would need
     the edge this is trying to avoid. */
  --ckc-surface:   #ffffff;   /* the card, white through the media zone        */
  --ckc-gallery:   #ffffff;   /* the photograph's own white - see note above  */
  --ckc-warm:      #EEEBE4;   /* the foot of the card, under the copy          */

  /* --- ink ---------------------------------------------------------------- */
  --ckc-ink:       #161A1B;
  --ckc-ink-2:     #5A615F;   /* secondary - readable, not grey-afterthought  */
  --ckc-ink-3:     #5F6664;   /* struck-through price: 4.62:1 on the panel    */

  /* --- gold ---------------------------------------------------------------- */
  --ckc-gold:      #86692F;
  --ckc-gold-2:    #C8A86E;
  --ckc-gold-3:    #DCC596;
  --ckc-gold-deep: #86692F;
  --ckc-gold-ink:  #6E5626;   /* the price                                    */
  --ckc-gold-tint: rgba(200, 168, 110, .10);
  --ckc-halo-line: rgba(200, 168, 110, .34);
  --ckc-halo-line-hover: rgba(200, 168, 110, .62);

  /* --- the anchor ---------------------------------------------------------- */
  --ckc-anchor:       #161A1B;   /* the action plate                         */
  --ckc-anchor-2:     #2a241d;
  --ckc-anchor-ink:   #eed9a9;   /* its label - champagne, not white         */
  --ckc-anchor-ink-2: #0B2B30;

  /* --- hairlines ----------------------------------------------------------- */
  --ckc-line:      rgba(18, 62, 68, .18);
  --ckc-line-2:    rgba(18, 62, 68, .12);

  --ckc-ok:        #6E5626;
  --ckc-ok-dot:    #C8A86E;
  --ckc-sale:      #9d3f2c;

  /* shape - the card radius is the reference's */
  --ckc-r:      25px;    /* the card   */
  --ckc-r-sm:   12px;    /* the action */
  --ckc-r-pill: 999px;
  --ckc-es:     cubic-bezier(.22, .61, .36, 1);

  /* elevation — warm, wide and low-alpha. Depth comes from the surface stack
     and the border, not from the shadow being visible. */
  --ckc-sh-1: 0 1px 2px rgba(11, 43, 48, .05), 0 8px 22px rgba(11, 43, 48, .06);
  --ckc-sh-2: 0 2px 4px rgba(11, 43, 48, .06), 0 18px 40px rgba(11, 43, 48, .11);
}

/* ==========================================================================
   1. GRID — even columns, calm gutters, equal card heights
   ========================================================================== */

.product-grid {
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  /* The reference's gutter. */
  gap: clamp(14px, 1.4vw, 20px) !important;
  align-items: stretch;
}

/* ==========================================================================
   2. CARD SHELL — one object, hairline border, restrained warm shadow
   ========================================================================== */

.product-card {
  position: relative;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  isolation: isolate;
  /* Lets the action below respond to the CARD's width. The card is narrow at
     far more than phone widths: four columns inside the catalogue's filter
     sidebar are 242px wide on a 1500px screen. */
  container-type: inline-size;
  /* No padding: the media zone runs to the card's own rounded edge, so the
     photograph gets the whole card width instead of losing 34px to a card
     inset plus a plate inset, neither of which was visible.
     The stops are tuned so the gradient is still pure white where the picture
     ends - the warmth arrives under the copy, never around the product. */
  background: linear-gradient(180deg,
    var(--ckc-surface) 0%,
    var(--ckc-surface) 56%,
    #fbf7ef 74%,
    var(--ckc-warm) 100%) !important;
  /* The reference draws its edge as a 1px ring in a shadow rather than as a
     border, so the hairline never enters the layout box. */
  border: 0 !important;
  border-radius: var(--ckc-r) !important;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, .06), 0 1px 2px rgba(0, 0, 0, .06) !important;
  transform: translateZ(0);
  transition: transform .3s var(--ckc-es), box-shadow .3s ease;
}
.product-card:hover,
.product-card:focus-within {
  transform: translateY(-3px);
  box-shadow: 0 0 0 1px rgba(0, 0, 0, .10), 0 10px 24px rgba(0, 0, 0, .10) !important;
}

/* ==========================================================================
   3. THE GALLERY — white on white. No rectangle, on purpose.
   --------------------------------------------------------------------------
   Padding is cut to near nothing, and the square is deliberate. Measured over
   a 28-product sample, the merchandise already fills a median 94.5% of its
   frame's HEIGHT and only ~75% of its width, and some frames are filled edge
   to edge in both axes. So:
     - a taller-than-square gallery would scale the shot by its width and add
       dead space above and below - the product would get SMALLER;
     - a square gallery is the largest the object can render at this card
       width without cropping.
   That last point is why there is no zoom here: the products whose frames are
   filled edge to edge have no margin to give, and scaling would cut them. The
   leftover white is horizontal and belongs to the supplier's photography.
   ========================================================================== */

.product-image-container {
  position: relative;
  aspect-ratio: 1 / 1;
  /* No inset and no fill. The picture IS the media zone: it runs edge to edge
     across the card's full width, and because its ground is the same white as
     the card, its own rectangle disappears. The product floats on the card
     instead of sitting inside a box on it.
     Overflow stays hidden so the card's 25px radius clips the picture's top
     corners to the card's silhouette. */
  margin: 0;
  padding: 0;
  overflow: hidden;
  background: var(--ckc-gallery) !important;
}

/* THE SIGNATURE — the halo, at card scale.
   The same golden arc that crosses the category and catalog bands, reduced to
   a single hairline whose bottom-left segment enters the top-right corner of
   the gallery. It is the one proprietary detail on the card. It reads more
   clearly on white than it did on ivory, where it competed with the well's
   own tint. It brightens and eases outward on hover. */
.product-image-container::before {
  content: "";
  position: absolute;
  z-index: 2;
  top: -56%;
  right: -24%;
  width: 72%;
  aspect-ratio: 1 / 1;
  border: 1px solid var(--ckc-halo-line);
  border-radius: 50%;
  pointer-events: none;
  transition: border-color .4s ease, transform .55s var(--ckc-es);
}
.product-card:hover .product-image-container::before,
.product-card:focus-within .product-image-container::before {
  border-color: var(--ckc-halo-line-hover);
  transform: scale(1.035);
}

/* Contact shadow, on hover only, so the object gains weight and reads as
   standing on the surface rather than floating above it. */
.product-image-container::after {
  content: "";
  position: absolute;
  left: 24%;
  right: 24%;
  bottom: 6%;
  height: 12px;
  border-radius: 50%;
  background: radial-gradient(ellipse at center, rgba(18, 62, 68, .14), rgba(18, 62, 68, 0) 72%);
  filter: blur(4px);
  opacity: 0;
  pointer-events: none;
  transition: opacity .34s ease;
}
.product-card:hover .product-image-container::after,
.product-card:focus-within .product-image-container::after { opacity: 1; }

.product-img {
  display: block;
  width: 100%;
  height: 100%;
  padding: 0 !important;
  object-fit: contain !important;
  object-position: center;
  /* Square corners, full bleed. The card's own radius clips the top two, and
     the bottom two meet the copy with no edge to draw - rounding them here
     would only reveal a lighter wedge behind each corner. */
  border-radius: 0;
  /* No fade at the bottom edge, deliberately. Several catalogue frames run the
     product off the bottom of the shot, and with no mount to end the picture
     that reads as a slice - but fading it would ghost the merchandise itself,
     which is worse than an honest crop. The space it needs is white space, and
     that is what .product-info's top padding provides. */
  /* No filter: the catalogue's photos are opaque JPEGs on their own white
     ground, so a drop-shadow only ever rendered as a smudge. */
  filter: none;
  mix-blend-mode: normal;
  opacity: 1;
  transform: none;
  transition: transform .55s var(--ckc-es);
}
/* 1.02, not the 1.04 this carried before: a frame filled edge to edge has no
   margin, so every hundredth of scale shaves the product's own outline. */
.product-card:hover .product-img,
.product-card:focus-within .product-img { transform: scale(1.02); }

.product-card .badge-tag {
  position: absolute;
  /* Top-right, in the plate's corner, as the reference has it. Kept in
     CaseKing's gold rather than the reference's blue.
     left:auto is load-bearing: styles.css still sets `.badge-tag{left:1rem}`,
     and with BOTH left and right set on an auto-width absolute box the pill
     stretches edge to edge into a full-width bar. This card is the only thing
     that out-specifies that legacy rule. */
  top: 15px;
  right: 15px;
  left: auto;
  z-index: 3;
  display: inline-flex;
  align-items: center;
  padding: 5px 10px 4px;
  border-radius: var(--ckc-r-pill);
  background: linear-gradient(180deg, var(--ckc-gold-3), var(--ckc-gold-2));
  color: var(--ckc-anchor-ink-2) !important;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .07em;
  text-transform: uppercase;
  box-shadow: 0 3px 10px rgba(134, 105, 47, .22);
}

/* ==========================================================================
   3b. QUICK LOOK TRIGGER
   --------------------------------------------------------------------------
   Sits along the foot of the gallery, where the product is not. On a pointer
   device it stays out of the way until the card is hovered or focused. On
   touch there is no hover to reveal it, so it is simply always present. It
   keeps a 44px hit area either way.
   ========================================================================== */

.product-quicklook {
  position: absolute;
  z-index: 3;
  left: 50%;
  bottom: 10px;
  transform: translate(-50%, 10px);
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-height: 44px;
  padding: 0 15px;
  border: 1px solid rgba(18, 62, 68, .22);
  border-radius: var(--ckc-r-pill);
  /* Opaque: it now sits on white, and any translucency would show the
     photograph through the chip instead of over it. */
  background: #FBFAF7;
  color: var(--ckc-ink);
  font-family: 'Inter', system-ui, -apple-system, sans-serif;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .005em;
  white-space: nowrap;
  cursor: pointer;
  box-shadow: 0 2px 10px rgba(11, 43, 48, .10);
  opacity: 0;
  pointer-events: none;
  transition: opacity .26s ease, transform .3s var(--ckc-es),
              border-color .2s ease, background .2s ease, color .2s ease;
}
.product-quicklook .ck-icon { width: 15px; height: 15px; color: var(--ckc-gold); flex: 0 0 auto; }
.product-quicklook:hover {
  border-color: rgba(134, 105, 47, .55);
  background: #ffffff;
  color: var(--ckc-gold-deep);
}
.product-quicklook:focus-visible { outline: 2px solid var(--ckc-gold-2); outline-offset: 2px; }

.product-card:hover .product-quicklook,
.product-card:focus-within .product-quicklook,
.product-quicklook:focus-visible {
  opacity: 1;
  transform: translate(-50%, 0);
  pointer-events: auto;
}
/* No hover to reveal it on a touch device - so it is always shown. */
@media (hover: none) {
  .product-quicklook { opacity: 1; transform: translate(-50%, 0); pointer-events: auto; }
}

/* ==========================================================================
   4. THE PANEL — maker -> title -> device -> price -> action.
   --------------------------------------------------------------------------
   The price row is pinned with margin-top:auto so every price and every
   button lands on the same baseline across a row whatever the title length.
   What changed is that the pinned gap now reads as deliberate: the price row
   is bled to the card's edges, so its hairline spans the full width and reads
   as the top of a footer rather than as a floating underline with a hole
   above it.
   ========================================================================== */

.product-info {
  display: flex;
  flex-direction: column;
  flex: 1;
  /* Compact, as the reference is: the content is a caption block under the
     picture, not a panel competing with it. */
  gap: 5px;
  /* The top padding is the breathing room the plate used to provide. Several
     catalogue shots run their product to the frame's bottom edge, so without
     it the copy would start hard against the merchandise. */
  padding: 18px 14px 14px;
  /* Transparent, so the card's own warm floor shows through. A filled panel
     would put an edge back at the top of the copy - the thing this design
     exists to avoid. */
  background: transparent !important;
}

/* The maker carries the first of the card's gold marks: a short tick that
   grows on hover. Ink for the name itself - at this size ink is the more
   legible of the two and the tick does the branding. */
.product-maker {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--ckc-ink) !important;
  font-size: 11px;
  font-weight: 800;
  line-height: 1;
  letter-spacing: .14em;
  text-transform: uppercase;
}
.product-maker::before {
  content: "";
  flex: 0 0 auto;
  width: 14px;
  height: 2px;
  border-radius: 2px;
  background: linear-gradient(90deg, var(--ckc-gold-3), var(--ckc-gold-2));
  transition: width .3s var(--ckc-es);
}
.product-card:hover .product-maker::before,
.product-card:focus-within .product-maker::before { width: 21px; }

/* Long names are the norm here - the longest live title runs to 95 characters
   - so the title clamps to three lines. The three lines are NOT reserved as a
   minimum: reserving them only moves the empty space from above the footer
   hairline to underneath the title, where it reads as a hole rather than as
   breathing room. Alignment across a row comes from margin-top:auto on the
   price row instead, which holds whatever the title's length. */
.product-info .product-name {
  margin: 0 !important;
  color: var(--ckc-ink) !important;
  font-family: 'Inter', system-ui, -apple-system, sans-serif !important;
  /* The reference sets its title at 24px/700 and lets it be the loudest thing
     on the card. Live CaseKing titles run to 95 characters, so 24px would wrap
     to five lines and swallow the picture; 17px/700 keeps the title dominant
     by weight and block without that. Three lines, because two truncates the
     model and capacity out of a real title. */
  font-size: 17px !important;
  font-weight: 700 !important;
  line-height: 1.3 !important;
  letter-spacing: -.015em;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-wrap: pretty;
}

/* Device compatibility — supporting detail with a readable second-tier
   hierarchy. Visually plain so it is never mistaken for a control. */
.product-compat {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  align-self: flex-start;
  max-width: 100%;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--ckc-ink-2) !important;
  font-size: 12.5px;
  font-weight: 600;
  line-height: 1.35;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.product-compat .ck-icon { width: 14px; height: 14px; flex: 0 0 auto; color: var(--ckc-gold); }

/* ==========================================================================
   5. PRICE ROW — the strongest element after the photograph
   --------------------------------------------------------------------------
   Bled to the card edges so the hairline spans the full width: the footer
   reads as a section rather than as a rule floating in the middle of the
   panel. The negative margin matches .product-info's horizontal padding so
   the price text itself stays on the same optical line as the title above it.
   ========================================================================== */

.product-meta {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  /* NOT pinned any more. Pinning the price to the card's foot opened a hole
     between the title and the number on every short title, which is the
     opposite of the reference's tight caption block. The BUTTON is pinned
     instead, so the actions still line up across a row - which is what a
     shopper actually scans - while the copy stays compact under the picture.
     The bottom padding guarantees the price and the button never touch when a
     long title leaves no free space to absorb. */
  padding: 8px 0 8px;
}
.product-info .product-price-box {
  display: flex;
  align-items: baseline;
  justify-content: flex-start;
  gap: 7px;
  margin: 0;
  padding: 0;
}
.product-info .product-price {
  color: var(--ckc-ink) !important;
  /* Was 27px, deliberately louder than the title. The reference runs the other
     way - its price is smaller than its title and the picture carries the
     card - so this comes down to sit just past the 17px title. Still bold, and
     still the only gold on the card's left edge, so it scans; it just no
     longer outshouts the product. */
  font-size: 18px !important;
  font-weight: 800 !important;
  line-height: 1.1;
  letter-spacing: -.02em;
  text-decoration: none !important;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
/* Stays gold - the accent is CaseKing's identity. Contrast on the stone panel
   is 5.4:1, comfortably past the 4.5:1 the text criterion asks for. */
.product-info .product-price.current-price { color: var(--ckc-gold-ink) !important; }
.product-info .product-price.old-price {
  color: var(--ckc-ink-3) !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  text-decoration: line-through !important;
  text-decoration-thickness: 1px !important;
  text-decoration-color: rgba(18, 62, 68, .5) !important;
  order: -1;
}
.price-b2b {
  display: inline-block;
  margin-left: 6px;
  padding: 2px 6px;
  border-radius: var(--ckc-r-pill);
  background: var(--ckc-gold-tint);
  color: var(--ckc-gold-deep) !important;
  font-size: 9.5px;
  font-weight: 800;
  letter-spacing: .06em;
  vertical-align: middle;
}

.product-stock {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex: 0 0 auto;
  padding: 0;
  color: var(--ckc-ok) !important;
  border: 0;
  background: transparent;
  font-size: 11.5px;
  font-weight: 700;
  line-height: 1;
  white-space: nowrap;
}
.product-stock::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--ckc-ok-dot);
  box-shadow: 0 0 0 3px rgba(200, 168, 110, .16);
}

/* ==========================================================================
   6. THE ANCHOR — the action
   --------------------------------------------------------------------------
   Solid ink with a champagne label. This is the only dark mass on the card,
   and it is the point: the old plate was a pale champagne gradient on a pale
   panel, which is exactly why the card had no bottom. Ink is the strongest
   contrast available inside the existing palette, so the button reads as the
   one thing to do without any chrome, glow or gradient.
   ========================================================================== */

.product-info .btn-card-buy {
  width: 100%;
  height: auto;
  /* Pinned to the foot of the card, so every button in a row sits on the same
     line whatever the title length. */
  margin-top: auto;
  min-height: 44px;
  padding: 0 14px;
  border: 1px solid var(--ckc-anchor) !important;
  border-radius: var(--ckc-r-sm) !important;
  background: var(--ckc-anchor) !important;
  color: var(--ckc-anchor-ink) !important;
  font-family: 'Inter', system-ui, -apple-system, sans-serif;
  font-size: 11.5px;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
  cursor: pointer;
  /* Removes the 300ms double-tap delay on touch. */
  touch-action: manipulation;
  display: flex;
  align-items: center;
  gap: 9px;
  box-shadow: 0 1px 2px rgba(11, 43, 48, .18);
  transition: background .2s ease, border-color .2s ease, color .2s ease,
              box-shadow .24s ease, transform .18s ease;
}
.product-info .btn-card-buy * { color: inherit !important; }
.btn-card-buy-label { flex: 1; text-align: left; }
.btn-card-buy-icon {
  display: grid;
  place-items: center;
  width: 17px;
  height: 17px;
  border-radius: 0;
  background: none;
  color: currentColor !important;
  transition: transform .24s ease;
}
.product-info .btn-card-buy:hover,
.product-info .btn-card-buy:focus-visible {
  background: var(--ckc-anchor-2) !important;
  border-color: rgba(200, 168, 110, .55) !important;
  color: #f6e6bf !important;
  transform: translateY(-1px);
  box-shadow: 0 8px 20px rgba(11, 43, 48, .22);
}
.product-info .btn-card-buy:hover .btn-card-buy-icon,
.product-info .btn-card-buy:focus-visible .btn-card-buy-icon { transform: translateX(4px); }
.product-info .btn-card-buy:focus-visible {
  outline: 2px solid var(--ckc-gold-2);
  outline-offset: 2px;
}
.product-info .btn-card-buy:active { transform: translateY(0) scale(.99); }
.product-info .btn-card-buy:disabled { cursor: wait; opacity: 1; }
.product-info .btn-card-buy.is-loading .btn-card-buy-icon i { display: none; }
.product-info .btn-card-buy.is-loading .btn-card-buy-icon::after {
  content: "";
  width: 14px;
  height: 14px;
  border: 1.5px solid rgba(230, 211, 172, .3);
  border-top-color: var(--ckc-anchor-ink);
  border-radius: 50%;
  animation: ckcSpin .7s linear infinite;
}
.product-info .btn-card-buy.is-success {
  background: #3f4a24 !important;
  border-color: #3f4a24 !important;
  color: #EEF2F0 !important;
}
@keyframes ckcSpin { to { transform: rotate(360deg); } }

/* ==========================================================================
   7. RESPONSIVE
   ========================================================================== */

@media (max-width: 1100px) {
  .product-grid { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; }
}

@media (max-width: 760px) {
  .product-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 12px !important; }

  .product-image-container { margin: 0; padding: 0; aspect-ratio: 1 / 1; }
  .product-info { gap: 5px; padding: 12px 12px 12px; }
  .product-maker { font-size: 10px; letter-spacing: .12em; }
  .product-info .product-name { font-size: 14.5px !important; }
  .product-compat { font-size: 11px; }
  /* The price stays on its own line only when stock is present; at two
     columns there is rarely room for both on one baseline. */
  .product-meta {
    padding: 7px 0 7px;
    gap: 4px;
    flex-direction: column;
    align-items: flex-start;
  }
  .product-info .product-price { font-size: 17px !important; }
  .product-info .product-price.old-price { font-size: 11.5px !important; }
  .product-stock { font-size: 11px; }
  /* The card's own action stays at a full touch height on a phone. */
  .product-info .btn-card-buy { min-height: 44px; margin-top: 10px; padding: 0 12px; font-size: 11px; letter-spacing: .04em; }
  .btn-card-buy-icon { width: 16px; height: 16px; }

  .product-quicklook { min-height: 44px; padding: 0 12px; font-size: 11.5px; gap: 6px; bottom: 9px; }
  .product-quicklook .ck-icon { width: 14px; height: 14px; }
}

/* The action runs out of room at a narrow CARD, not only at a narrow window.
   Four columns inside the catalogue's 224px filter sidebar are 242px wide on a
   1500px screen, where "ДОБАВИ В КОЛИЧКАТА" in tracked uppercase needs ~170px
   and has 164px, so it wrapped to two lines inside a 44px plate. This keys the
   same treatment the phone rule below uses to the card's own width, which is
   the dimension that actually decides it. */
@container (max-width: 275px) {
  .product-info .btn-card-buy { padding: 0 12px; font-size: 11px; letter-spacing: .02em; }
  .btn-card-buy-icon { display: none; }
}

/* Two cards per row leaves roughly 150px of button. "ДОБАВИ В КОЛИЧКАТА" in
   tracked uppercase needs more than that, so the arrow yields and the label
   switches to sentence case - it fits on one line and the ink plate still
   reads unmistakably as the buy action. */
@media (max-width: 480px) {
  .product-info .btn-card-buy { padding: 0 10px; font-size: 12px; letter-spacing: .005em; text-transform: none; }
  .btn-card-buy-label { text-align: center; }
  .btn-card-buy-icon { display: none; }
}

/* Touch: the Quick Look trigger has no hover to hide behind, so it is always
   on the card - and the merchandise fills a median 94.5% of its frame's
   height, so ANY bar across the foot of the gallery lands on the product
   itself. At full width with its label it covered the thing it exists to show.
   On touch it therefore collapses to a 44px corner control. The button keeps
   its aria-label, so its accessible name is unchanged; only the visible label
   is dropped. Tapping it still opens the same overlay. */
@media (hover: none) and (max-width: 760px) {
  .product-quicklook {
    left: auto;
    right: 8px;
    bottom: 8px;
    transform: none;
    width: 44px;
    padding: 0;
    justify-content: center;
    border-radius: 50%;
  }
  .product-quicklook > span { display: none; }
  .product-quicklook .ck-icon { width: 18px; height: 18px; }
  .product-quicklook:focus-visible { transform: none; }
}

/* reduce-motion opt-out (html.ck-calm) */
  html.ck-calm .product-card, html.ck-calm .product-img, html.ck-calm .product-maker::before, html.ck-calm .product-image-container::before, html.ck-calm .product-image-container::after, html.ck-calm .product-quicklook, html.ck-calm .product-info .btn-card-buy { transition: none; }
  html.ck-calm .product-card:hover { transform: none; }
  html.ck-calm .product-card:hover .product-img { transform: none; }
  html.ck-calm .product-card:hover .product-maker::before { width: 21px; }
  html.ck-calm .product-card:hover .product-image-container::before { transform: none; }
  html.ck-calm /* Revealed by state alone, html.ck-calm with no travel. */
  .product-card:hover .product-quicklook, html.ck-calm .product-card:focus-within .product-quicklook, html.ck-calm .product-quicklook:focus-visible { transform: translate(-50%, 0); }
  html.ck-calm .product-info .btn-card-buy.is-loading .btn-card-buy-icon::after { animation: none; }


.product-card .ck-icon {
  display: block;
  width: 1em;
  height: 1em;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.btn-card-buy-icon .ck-icon { width: 15px; height: 15px; }