/* ============================================================================
   card-premium.css — the product card, site-wide                (2026-09-27)
   ----------------------------------------------------------------------------
   `catalog/_partials/miniatures/product.tpl` renders on the homepage rails,
   every listing (category, search, manufacturer, supplier, best-sellers,
   new-products, prices-drop) and the related-product blocks. This file is the
   ONE definition of how it looks. Wired in `layouts/layout-both-columns.tpl`,
   after theme-premium.css.

   Everything hangs from `.product-miniature.sk-card` — a class only the
   2026-09-27 template emits. Two reasons:
     1. theme.css's hand-appended region forces the old look with unscoped
        !important rules (Playfair titles, a pink hover border, a 4px badge).
        One extra class wins on specificity where that is enough; !important
        is used only where theme.css used it first.
     2. The file cannot restyle a card whose markup is still the old one.

   What the redesign fixed (measured on the live homepage before):
     - 725px-tall cards at 1600px, 647px on a 390px phone. Now ~560 / ~470.
     - Three button shapes per card (square outline, pill, round overlays).
       Now one filled pill + a round WhatsApp button beside it.
     - The WhatsApp label wrapped to two lines on phones.
     - Serif product names at 13-17px, faux-bold (only Inter 400 is
       self-hosted). Names are now Inter, like the rest of the card's text.
     - Two frosted discs stacked over the photo on phones, covering the
       baked-in "PRO PLUS" badge. Now one top-right, one bottom-right.

   Layout decisions are made by the CARD'S width (container queries), not the
   viewport's: the same card is ~300px in a four-up rail, ~240px beside a
   listing sidebar and ~160px in a two-up phone grid. Browsers without
   container queries get the stacked layout, which works at every width.

   Hover motion is only for fine pointers (`hover: hover`); :hover latches on
   touch — project-docs/THEME.md. Headless Chrome on this box reports
   `hover: none`, so check hover states in a real desktop browser.
   ========================================================================== */

.product-miniature.sk-card {
  --skc-pink: #d50075;
  --skc-pink-dark: #9e0056;
  --skc-pink-tint: #fef0f7;
  --skc-ink: #1a0010;
  --skc-text: #3d3547;
  --skc-muted: #6e6674;           /* 5.6:1 on white */
  --skc-line: #efe6eb;
  --skc-plate: #f6f3f5;           /* image stage; the photo multiplies onto it */
  --skc-radius: 16px;
  --skc-radius-inner: 12px;
  --skc-pad: 8px;
  --skc-ease: cubic-bezier(0.22, 0.61, 0.36, 1);
}

/* ---- 1. Shell ------------------------------------------------------------
   Border, not shadow, at rest: a grid of shadowed cards reads as noise. The
   inset stage (card padding + inner radius) is what makes it read as a
   product plate rather than a photo pasted into a box. */
.product-miniature.sk-card .card {
  container: skcard / inline-size;
  display: flex;
  flex-direction: column;
  height: 100%;
  padding: var(--skc-pad);
  border: 1px solid var(--skc-line) !important;
  border-radius: var(--skc-radius);
  background: #fff;
  box-shadow: none;
  filter: none;
  overflow: hidden;
  transition: transform 0.3s var(--skc-ease),
              box-shadow 0.3s var(--skc-ease),
              border-color 0.3s ease !important;
}

/* Listing grids space their rows with `row-gap` (listing-premium.css); the
   card's own 20px bottom margin (theme.css) stacked on top of it, so rows sat
   ~60px apart against 24px between columns and the grid read as loose. */
#js-product-list .products > .product-miniature.sk-card { margin-bottom: 0; }

/* ---- 2. Image stage ------------------------------------------------------
   The photos are shot on white. `multiply` drops that white into the plate,
   so every product sits on the same soft ground whatever its photo's margins
   — the single biggest step from "catalogue grid" to "store". `isolation`
   keeps the blend inside the stage. */
.product-miniature.sk-card .product-miniature__link {
  display: block;
  position: relative;
  border-radius: var(--skc-radius-inner);
  text-decoration: none;
}

.product-miniature.sk-card .product-miniature__image-container {
  position: relative;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  isolation: isolate;
  border-radius: var(--skc-radius-inner) !important;
  background: var(--skc-plate);
}

.product-miniature.sk-card .product-miniature__image-container picture {
  display: block;
  width: 100%;
  height: 100%;
}

.product-miniature.sk-card .product-miniature__image {
  display: block;
  width: 100%;
  height: 100%;
  padding: 5%;
  object-fit: contain;
  mix-blend-mode: multiply;
  transform: none;
  transition: transform 0.5s var(--skc-ease);
}

/* Flags ("New", "On sale!") — a small pill, top-left of the stage. theme.css
   squares every badge with `border-radius: 4px !important`. */
.product-miniature.sk-card .product-flags {
  position: absolute;
  top: 10px;
  left: 10px;
  right: auto;
  z-index: 3;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
  margin: 0;
  padding: 0;
  pointer-events: none;
}

.product-miniature.sk-card .product-flags .product-flag,
.product-miniature.sk-card .product-flags .badge {
  margin: 0;
  padding: 4px 9px;
  border-radius: 999px !important;
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.04em;
  line-height: 1.3;
  text-transform: uppercase;
  box-shadow: none;
}

/* ---- 3. Controls on the photo --------------------------------------------
   Wishlist (blockwishlist replaces the template's wrapper with a bare
   `.wishlist-button-add`) top-right; the touch quick view bottom-right, so
   the two never stack over the product or its baked-in badge. 36px discs
   with a 44px hit area from the ::before. theme-premium.css / theme.css size
   and paint both with !important, hence the same here. */
.product-miniature.sk-card .wishlist-button-add,
.product-miniature.sk-card .product-miniature__quickview_touch {
  position: absolute;
  width: 36px !important;
  height: 36px !important;
  min-width: 36px;
  padding: 0;
  align-items: center;
  justify-content: center;
  border: 0 !important;
  border-radius: 50% !important;
  background: #fff !important;
  color: var(--skc-text) !important;
  box-shadow: 0 1px 2px rgba(26, 0, 16, 0.06), 0 4px 12px rgba(26, 0, 16, 0.10) !important;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  z-index: 4;
  transition: color 0.2s ease, transform 0.2s ease;
}

.product-miniature.sk-card .wishlist-button-add::before,
.product-miniature.sk-card .product-miniature__quickview_touch::before {
  content: '';
  position: absolute;
  inset: -4px;
  border-radius: 50%;
}

/* `display` is set per control: the wishlist heart always shows, the touch
   quick view only where theme.css shows it — (hover: none) AND (pointer:
   coarse). A fine pointer gets the hover pill in §4 instead. */
.product-miniature.sk-card .wishlist-button-add { display: inline-flex; }
.product-miniature.sk-card .product-miniature__quickview_touch { display: none; }

@media (hover: none) and (pointer: coarse) {
  .product-miniature.sk-card .product-miniature__quickview_touch { display: inline-flex; }
}

.product-miniature.sk-card .wishlist-button-add {
  top: 8px !important;
  right: 8px !important;
  bottom: auto !important;
  left: auto !important;
}

.product-miniature.sk-card .product-miniature__quickview_touch {
  top: auto !important;
  right: 8px !important;
  bottom: 8px !important;
  left: auto !important;
}

.product-miniature.sk-card .wishlist-button-add .material-icons,
.product-miniature.sk-card .wishlist-button-add i,
.product-miniature.sk-card .wishlist-button-add svg,
.product-miniature.sk-card .product-miniature__quickview_touch .material-icons {
  width: 20px;
  height: 20px;
  font-size: 20px !important;
  line-height: 20px;
  color: inherit !important;
}

/* A saved product keeps the brand colour on its filled heart. */
.product-miniature.sk-card .wishlist-button-add.wishlist-button-add--added,
.product-miniature.sk-card .wishlist-button-add[aria-pressed="true"] {
  color: var(--skc-pink) !important;
}

/* ---- 4. Desktop quick view -----------------------------------------------
   A white pill that rises at the foot of the photo on hover or keyboard
   focus. theme.css parks the panel at `top: 0` of the text block and slides
   it up by its own height, so it covered the product name; here it sits on
   the photo (`bottom: 100%` of the text block) and the name stays readable.
   Coarse pointers use the round button in §3 instead. */
.product-miniature.sk-card .product-miniature__quickview {
  position: absolute;
  top: auto;
  right: 0;
  bottom: 100%;
  left: 0;
  width: auto;
  display: flex;
  justify-content: center;
  margin: 0;
  padding: 0 0 12px;
  border: 0;
  background: none !important;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  z-index: 5 !important;
  opacity: 0;
  visibility: hidden;
  transform: translateY(6px);
  transition: opacity 0.22s ease, transform 0.22s var(--skc-ease), visibility 0.22s;
  pointer-events: none;
}

.product-miniature.sk-card .product-miniature__quickview_button {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  width: auto;
  min-height: 40px;
  padding: 0 16px;
  border: 0;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.97) !important;
  color: var(--skc-ink) !important;
  font-size: 13px !important;
  font-weight: 600;
  letter-spacing: 0;
  text-transform: none;
  text-decoration: none;
  box-shadow: 0 6px 20px rgba(26, 0, 16, 0.16);
  pointer-events: auto;
}

.product-miniature.sk-card .product-miniature__quickview_button .material-icons {
  margin: 0;
  font-size: 18px !important;
  color: inherit !important;
}

.product-miniature.sk-card .product-miniature__quickview:focus-within {
  opacity: 1;
  visibility: visible;
  transform: none;
}

@media (hover: none) and (pointer: coarse) {
  .product-miniature.sk-card .product-miniature__quickview { display: none !important; }
}

/* ---- 5. Text block ------------------------------------------------------- */
.product-miniature.sk-card .product-miniature__infos {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  position: relative;
  padding: 12px 8px 6px !important;
  background: transparent;
}

.product-miniature.sk-card .product-miniature__infos__top,
.product-miniature.sk-card .product-miniature__infos__bottom {
  padding: 0;
  background: transparent;
}

.product-miniature.sk-card .product-miniature__infos__top { height: auto; }

.product-miniature.sk-card .product-miniature__infos__bottom {
  margin: auto 0 0;
  padding-top: 12px;
}

.product-miniature.sk-card .product-miniature__infos__top > a {
  display: block;
  color: inherit;
  text-decoration: none;
}

/* Title: the product's whole name, never cut, and the only text above the price
   (2026-09-27, owner: "only title", then "the title is not full like it look
   half"). Nothing is reserved under a short title; the bottom block is pinned
   to the card's foot, so prices still line up across a row. theme.css sets
   Playfair on the title with !important. */
.product-miniature.sk-card .product-miniature__title {
  display: block;
  margin: 0 !important;
  padding: 0;
  font-family: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif !important;
  font-size: 14.5px !important;
  font-weight: 600 !important;
  line-height: 1.42 !important;
  letter-spacing: -0.005em;
  color: var(--skc-ink) !important;
  transition: color 0.2s ease;
  /* ssglue keeps "Si-Pin" and "SSMAB-01A" whole; a model code wider than the
     whole line may still break, rather than overflow the card. */
  overflow-wrap: break-word;
}

/* Reviews: a chip on the photo, top-left (2026-09-27, owner: "the review
   spacing should be only visible where the review is given for that specific
   product"). Under the title the stars took a row, and every card beside a
   reviewed one showed that row empty. On the photo they take no height at all,
   and they arrive over AJAX without moving anything. A product without reviews
   keeps the shell empty and theme-premium.css hides it (`:has(.grade-stars:empty)`);
   productcomments' own `visibility: hidden` covers the moment before it answers.
   The module draws 16px sprite stars on a 100px-min box; `zoom` scales that
   whole box (layout included), which `transform` would not.
   Top-left, not bottom-left: the desktop Quick view pill rises into the foot of
   the photo on hover, and the two overlapped there while one faded out and the
   other in (owner's screenshot). A flag ("New") takes the corner first; the
   chip sits under it. */
.product-miniature.sk-card .product-miniature__image-container .product-list-reviews {
  position: absolute;
  top: 10px;
  bottom: auto;
  left: 10px;
  z-index: 3;
  display: inline-flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-start;
  gap: 4px;
  width: auto;
  margin: 0;
  padding: 4px 8px 4px 6px;
  border: 1px solid rgba(26, 0, 16, 0.06);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.96);
  box-shadow: 0 1px 3px rgba(26, 0, 16, 0.1);
}

.product-miniature.sk-card:has(.product-flags .product-flag) .product-miniature__image-container .product-list-reviews {
  top: 38px;
}

.product-miniature.sk-card .product-miniature__image-container .grade-stars {
  display: block;
  width: 90px;
  min-width: 0;
  height: 16px;
  zoom: 0.75;
}

.product-miniature.sk-card .product-miniature__image-container .grade-stars .star-content {
  top: 0;
  left: 0;
  margin: 0;
}

.product-miniature.sk-card .product-miniature__image-container .product-list-reviews .comments-nb {
  margin: 0;
  color: var(--skc-text);
  font-size: 11.5px;
  font-weight: 600;
  line-height: 1;
  font-variant-numeric: lining-nums tabular-nums;
}

/* ---- 6. Price ------------------------------------------------------------
   One hairline above the commercial block separates "what it is" from "what
   it costs". Caption / figure / qualifier stack; theme.css adds a
   `margin-right: .5rem !important` to the price through its `.me-2` rule. */
.product-miniature.sk-card .product-miniature__prices {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  flex-wrap: nowrap;
  gap: 1px;
  margin: 0;
  padding-top: 12px;
  border-top: 1px solid var(--skc-line);
}

.product-miniature.sk-card .product-miniature__price {
  margin: 0 !important;
  color: var(--skc-ink) !important;
  font-size: 20px !important;
  font-weight: 700 !important;
  line-height: 1.25;
  letter-spacing: -0.01em;
  font-variant-numeric: lining-nums tabular-nums;
}

.product-miniature.sk-card .sk-card-booking {
  flex: none;
  margin: 0;
  color: var(--skc-muted);
  font-size: 12px;
  font-weight: 500;
  line-height: 1.45;
  letter-spacing: 0;
}

/* Booking cards (2026-09-27, owner: "show first the 50000, then that this is
   the booking amount"): the amount leads, a pink tag beside it names it, the
   GST note runs full width underneath. On a phone the tag drops under the
   amount by itself when the two do not fit on one line. */
.product-miniature.sk-card .product-miniature__prices:has(> .sk-card-booking-tag) {
  flex-direction: row;
  flex-wrap: wrap;
  align-items: center;
  column-gap: 8px;
  row-gap: 3px;
}

.product-miniature.sk-card .product-miniature__prices:has(> .sk-card-booking-tag) .sk-card-booking-tag ~ * {
  flex: 0 0 100%;
}

.product-miniature.sk-card .sk-card-booking-tag {
  display: inline-flex;
  align-items: center;
  margin: 0;
  padding: 3px 9px;
  border-radius: 999px;
  background: var(--skc-pink-tint);
  color: var(--skc-pink-dark);
  font-size: 11px;
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: 0.01em;
  white-space: nowrap;
}

/* The qualifier under the figure ("Inclusive of GST · …"). */
.product-miniature.sk-card .product-miniature__price ~ .sk-card-booking {
  margin-top: 2px;
  font-size: 11.5px;
  font-weight: 400;
}

/* "Price on request" in the figure's slot: a statement, not a number. */
.product-miniature.sk-card .product-miniature__price.sk-card-quote {
  color: var(--skc-text) !important;
  font-size: 15px !important;
  font-weight: 600 !important;
}

.product-miniature.sk-card .product-miniature__regular-price {
  color: var(--skc-muted);
  font-size: 13px;
  text-decoration: line-through;
}

.product-miniature.sk-card .product-miniature__discount-price:not(:has(*)) { display: none; }

/* Quoted products: the note in the price slot, under the same hairline. */
.product-miniature.sk-card .product-miniature__quote-note {
  margin: 0;
  padding-top: 12px;
  border-top: 1px solid var(--skc-line);
  color: var(--skc-muted);
  font-size: 11.5px;
  line-height: 1.45;
}

/* ---- 7. Actions ----------------------------------------------------------
   Stacked by default (narrow cards, and browsers without container
   queries); side by side from a 200px card body up — §8. */
.product-miniature.sk-card .product-miniature__actions {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 12px;
}

.product-miniature.sk-card .product-miniature__prices + .product-miniature__actions,
.product-miniature.sk-card .product-miniature__quote-note + .product-miniature__actions { margin-top: 12px; }

.product-miniature.sk-card .product-miniature__cta,
.product-miniature.sk-card [data-button-action="add-to-cart"] {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  width: 100%;
  min-height: 44px;
  margin: 0;
  padding: 0 16px;
  border-radius: 999px !important;
  font-size: 13.5px;
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: 0.005em;
  white-space: nowrap;
  box-shadow: none;
  transition: background-color 0.2s ease, border-color 0.2s ease, transform 0.12s ease;
}

.product-miniature.sk-card .product-miniature__cta:active,
.product-miniature.sk-card [data-button-action="add-to-cart"]:active { transform: scale(0.98); }

/* The theme hides the add-to-cart label in `.visually-hidden`; a cart glyph
   alone is not a convention people read. Bootstrap sets every property of
   that class !important, so un-hiding it needs the same. */
.product-miniature.sk-card [data-button-action="add-to-cart"] .visually-hidden {
  position: static !important;
  width: auto !important;
  height: auto !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: visible !important;
  clip: auto !important;
  clip-path: none !important;
  white-space: nowrap !important;
}

.product-miniature.sk-card [data-button-action="add-to-cart"] .material-icons {
  font-size: 18px !important;
}

/* Purchasable products: the stepper takes the first row; Add to cart and
   WhatsApp (printed inside the form for this reason) share the second on a
   wide card — §8. Stacked, one per row, on a narrow one. */
.product-miniature.sk-card .product-miniature__buy {
  display: flex;
  flex: 1 1 100%;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  width: 100%;
  margin: 0;
}

.product-miniature.sk-card .product-miniature__buy .quantity-button {
  flex: 1 1 100%;
  min-width: 0;
}

.product-miniature.sk-card .product-miniature__buy [data-button-action="add-to-cart"] {
  flex: 1 1 100%;
  width: auto;
}

.product-miniature.sk-card .product-miniature__buy .input-group { margin: 0; }

.product-miniature.sk-card .quantity-button .btn.increment,
.product-miniature.sk-card .quantity-button .btn.decrement {
  flex: 0 0 40px;
  width: 40px;
  min-width: 40px;
  min-height: 44px;
}

/* theme.css caps this input at `max-width: 4.5rem` from 768px up (it lifts the
   cap only below that), so on desktop − 1 + bunched into the left 150px of a
   ~240px pill with the rest of it empty. The input takes the slack instead:
   − at one end, + at the other, the figure centred between them. */
.product-miniature.sk-card .quantity-button input.form-control {
  flex: 1 1 auto;
  min-width: 0;
  max-width: none;
  min-height: 44px;
}

/* WhatsApp. Default: an outline pill with the full label. */
.product-miniature.sk-card .product-miniature__enquire {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  width: 100%;
  min-height: 44px;
  margin: 0;
  padding: 0 14px;
  border: 1.5px solid #ecc6db;
  border-radius: 999px;
  background: #fff;
  color: var(--skc-pink);
  font-size: 13px;
  font-weight: 600;
  line-height: 1.2;
  white-space: nowrap;
  text-align: center;
  text-decoration: none;
  transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}

.product-miniature.sk-card .product-miniature__enquire-icon {
  flex: 0 0 18px;
  width: 18px;
  height: 18px;
}

.product-miniature.sk-card .product-miniature__enquire-short,
.product-miniature.sk-card .product-miniature__cta-short { display: none; }

.product-miniature.sk-card .product-miniature__enquire:active {
  border-color: var(--skc-pink-dark);
  background: var(--skc-pink-dark);
  color: #fff;
}

/* Focus: one visible ring on every control, clear of the pill edge. */
.product-miniature.sk-card a:focus-visible,
.product-miniature.sk-card button:focus-visible {
  outline: 2px solid var(--skc-pink);
  outline-offset: 2px;
  box-shadow: none;
}

.product-miniature.sk-card .product-miniature__link:focus-visible { outline-offset: -2px; }

/* ---- 8. By the card's width ----------------------------------------------
   Wide (200px+ of card body, i.e. tablets and up): the primary action and a
   round WhatsApp button share one row; the full label becomes the button's
   accessible name (and its tooltip, via `title`).
   Narrow (two-up phone grids): stacked, with the short label "WhatsApp" on
   screen and the full one still read out. */
@container skcard (min-width: 200px) {
  .product-miniature.sk-card .product-miniature__actions {
    flex-direction: row;
    align-items: center;
  }

  .product-miniature.sk-card .product-miniature__cta { flex: 1 1 auto; width: auto; }

  .product-miniature.sk-card .product-miniature__actions .product-miniature__enquire {
    flex: 0 0 44px;
    width: 44px;
    height: 44px;
    padding: 0;
    border-radius: 50%;
  }

  .product-miniature.sk-card .product-miniature__actions .product-miniature__enquire-label {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
  }

  .product-miniature.sk-card .product-miniature__actions .product-miniature__enquire-icon {
    flex-basis: 20px;
    width: 20px;
    height: 20px;
  }

  .product-miniature.sk-card .product-miniature__buy [data-button-action="add-to-cart"] { flex: 1 1 0; }
}

@container skcard (max-width: 199.98px) {
  .product-miniature.sk-card .product-miniature__infos { padding: 10px 4px 2px !important; }
  .product-miniature.sk-card .product-miniature__infos__bottom { padding-top: 12px; }

  .product-miniature.sk-card .product-miniature__title {
    font-size: 13px !important;
    line-height: 1.38 !important;
  }

  .product-miniature.sk-card .product-miniature__image-container .product-list-reviews {
    top: 8px;
    left: 8px;
    gap: 3px;
    padding: 3px 6px 3px 4px;
  }
  .product-miniature.sk-card:has(.product-flags .product-flag) .product-miniature__image-container .product-list-reviews { top: 33px; }
  .product-miniature.sk-card .product-miniature__prices:has(> .sk-card-booking-tag) { column-gap: 6px; }
  .product-miniature.sk-card .sk-card-booking-tag { padding: 2px 6px; font-size: 10px; }
  .product-miniature.sk-card .product-miniature__image-container .grade-stars { zoom: 0.6; }
  .product-miniature.sk-card .product-miniature__image-container .product-list-reviews .comments-nb { font-size: 10.5px; }

  .product-miniature.sk-card .product-miniature__prices,
  .product-miniature.sk-card .product-miniature__quote-note { padding-top: 10px; }
  .product-miniature.sk-card .product-miniature__quote-note { font-size: 10.5px; line-height: 1.4; }
  .product-miniature.sk-card .product-miniature__price { font-size: 16.5px !important; }
  .product-miniature.sk-card .sk-card-booking { font-size: 11px; }
  .product-miniature.sk-card .product-miniature__price ~ .sk-card-booking { font-size: 10.5px; line-height: 1.4; }

  /* One button row on a phone too (2026-09-27, owner: "just a little small ...
     most priority should be mobile"): the main button, WhatsApp beside it as a
     round icon — the desktop pattern. Stacked, the pair took 86px of every
     card; a row takes 40. "Request a quote" needs 114px where a 360-390px phone
     leaves the button 88-103, so a narrow card shows "Get a quote"; Add to cart
     drops its glyph for the same reason. WhatsApp keeps its full accessible name. */
  .product-miniature.sk-card .product-miniature__actions,
  .product-miniature.sk-card .product-miniature__prices + .product-miniature__actions,
  .product-miniature.sk-card .product-miniature__quote-note + .product-miniature__actions {
    flex-direction: row;
    align-items: center;
    gap: 6px;
    margin-top: 12px;
  }

  .product-miniature.sk-card .product-miniature__cta,
  .product-miniature.sk-card [data-button-action="add-to-cart"],
  .product-miniature.sk-card .product-miniature__buy [data-button-action="add-to-cart"] {
    flex: 1 1 0;
    min-width: 0;
    min-height: 40px;
    padding: 0 6px;
    font-size: 12.5px;
  }

  .product-miniature.sk-card .product-miniature__enquire {
    flex: 0 0 40px;
    width: 40px;
    height: 40px;
    min-height: 40px;
    padding: 0;
    border-radius: 50%;
  }

  .product-miniature.sk-card .product-miniature__cta-long,
  .product-miniature.sk-card [data-button-action="add-to-cart"] .material-icons { display: none; }
  .product-miniature.sk-card .product-miniature__cta-short { display: inline; }

  .product-miniature.sk-card .product-miniature__enquire-label {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
  }

  .product-miniature.sk-card .product-miniature__buy { gap: 6px; }
}

/* ---- Purchasable cards: price and quantity side by side -------------------
   (2026-09-27) The stepper used to take a row of its own — a full-width pill
   with − and + at its far ends, the widest control on the card for its
   smallest job — and Add to cart and WhatsApp took another. On a wide card the
   quantity is now a compact control on the price's line, the price note runs
   the full width under them, and the last row is the same primary-pill +
   WhatsApp pair every other card ends with, so a row of mixed cards lines up:

       ₹7,800                  [ −  1  + ]
       Incl. 18% GST · per tray
       [      Add to cart     ]  (WhatsApp)

   How: the block is a 3-column grid (price | 66 | 44 — the stepper spans the
   last two = 110px; WhatsApp takes the last), and the wrappers in between (the
   price block, `__actions`, the <form>) are `display: contents`, so their
   children join it; `dense` lets the stepper sit up beside the price. Nothing
   in the DOM moves: the form, its fields and its submission are unchanged, and
   the focus order stays −, quantity, +, Add to cart, WhatsApp. The hairline
   the price block drew moves to the block itself. Every rule sits behind
   `:has(.product-miniature__buy)`; a browser without :has() keeps the stacked
   layout. Phones (card body under 200px) keep it on purpose — it lines up
   with the quoted cards beside them. */
@container skcard (min-width: 200px) {
  .product-miniature.sk-card .product-miniature__infos__bottom:has(.product-miniature__buy) {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 66px 44px;
    grid-auto-flow: row dense;
    gap: 0;
    align-items: center;
  }

  .product-miniature.sk-card .product-miniature__infos__bottom:has(.product-miniature__buy)::before {
    content: '';
    grid-column: 1 / -1;
    margin-bottom: 12px;
    border-top: 1px solid var(--skc-line);
  }

  .product-miniature.sk-card .product-miniature__infos__bottom:has(.product-miniature__buy) > .product-miniature__variants {
    grid-column: 1 / -1;
  }

  .product-miniature.sk-card .product-miniature__infos__bottom:has(.product-miniature__buy) .product-miniature__prices,
  .product-miniature.sk-card .product-miniature__infos__bottom:has(.product-miniature__buy) .product-miniature__actions,
  .product-miniature.sk-card .product-miniature__infos__bottom:has(.product-miniature__buy) .product-miniature__buy {
    display: contents;
  }

  .product-miniature.sk-card .product-miniature__infos__bottom:has(.product-miniature__buy) .product-miniature__price {
    grid-column: 1;
    min-width: 0;
    padding-right: 12px;
  }

  /* The note, an old price, anything a price hook prints: full width, under. */
  .product-miniature.sk-card .product-miniature__infos__bottom:has(.product-miniature__buy) .product-miniature__price ~ * {
    grid-column: 1 / -1;
  }

  .product-miniature.sk-card .product-miniature__infos__bottom:has(.product-miniature__buy) .quantity-button {
    grid-column: 2 / 4;
    justify-self: end;
    width: auto;
    min-width: 0;
  }

  .product-miniature.sk-card .product-miniature__infos__bottom:has(.product-miniature__buy) .quantity-button .input-group {
    width: 110px;
    height: 40px;
    margin: 0;
  }

  .product-miniature.sk-card .product-miniature__infos__bottom:has(.product-miniature__buy) .quantity-button .btn.increment,
  .product-miniature.sk-card .product-miniature__infos__bottom:has(.product-miniature__buy) .quantity-button .btn.decrement {
    flex: 0 0 36px;
    width: 36px;
    min-width: 36px;
    height: 40px;
    min-height: 40px;
    padding: 0;
  }

  .product-miniature.sk-card .product-miniature__infos__bottom:has(.product-miniature__buy) .quantity-button .material-icons {
    font-size: 18px;
  }

  .product-miniature.sk-card .product-miniature__infos__bottom:has(.product-miniature__buy) .quantity-button input.form-control {
    height: 40px;
    min-height: 40px;
    padding: 0;
    font-size: 14px;
  }

  /* Same width as every other card's primary button: the row minus WhatsApp
     and its 8px gap. */
  .product-miniature.sk-card .product-miniature__infos__bottom:has(.product-miniature__buy) [data-button-action="add-to-cart"] {
    grid-column: 1 / 3;
    width: auto;
    margin: 14px 8px 0 0;
  }

  .product-miniature.sk-card .product-miniature__infos__bottom:has(.product-miniature__buy) .product-miniature__enquire {
    grid-column: 3;
    justify-self: end;
    margin-top: 14px;
  }
}

/* "Just a little small" (2026-09-27, owner): on a wide card the photo stage is
   5:4 instead of square, about 20% less height; the photo stays whole
   (object-fit: contain) and centred. Phones keep the square stage — there the
   card is narrow and the photo is what a visitor recognises the product by. */
@container skcard (min-width: 200px) {
  .product-miniature.sk-card .product-miniature__image-container { aspect-ratio: 5 / 4; }
}

/* A narrower wide card (200-239px body, e.g. a 1024px homepage rail) leaves
   the price ~85px beside the stepper: one step smaller keeps a six-digit
   price on one line. */
@container skcard (min-width: 200px) and (max-width: 239.98px) {
  .product-miniature.sk-card .product-miniature__infos__bottom:has(.product-miniature__buy) .product-miniature__price {
    font-size: 18px !important;
  }
}

/* Phones: a tighter shell. (The card cannot query its own width for its own
   padding, so this one is a viewport rule.) */
@media (max-width: 575.98px) {
  .product-miniature.sk-card { --skc-pad: 6px; --skc-radius: 14px; --skc-radius-inner: 10px; }

  .product-miniature.sk-card .wishlist-button-add { top: 6px !important; right: 6px !important; }
  .product-miniature.sk-card .product-miniature__quickview_touch { right: 6px !important; bottom: 6px !important; }
  .product-miniature.sk-card .wishlist-button-add,
  .product-miniature.sk-card .product-miniature__quickview_touch {
    width: 34px !important;
    height: 34px !important;
    min-width: 34px;
  }
  .product-miniature.sk-card .wishlist-button-add::before,
  .product-miniature.sk-card .product-miniature__quickview_touch::before { inset: -5px; }

  .product-miniature.sk-card .product-flags { top: 8px; left: 8px; }
}

/* ---- 9. Hover (fine pointers only) --------------------------------------- */
@media (hover: hover) {
  .product-miniature.sk-card .card:hover {
    transform: translateY(-3px);
    border-color: #e8cddb !important;
    box-shadow: 0 18px 40px -20px rgba(26, 0, 16, 0.28), 0 2px 6px rgba(26, 0, 16, 0.04) !important;
  }

  .product-miniature.sk-card .card:hover .product-miniature__image { transform: scale(1.04); }
  .product-miniature.sk-card .card:hover .product-miniature__title { color: var(--skc-pink) !important; }

  .product-miniature.sk-card:hover .product-miniature__quickview {
    opacity: 1;
    visibility: visible;
    transform: none;
  }

  .product-miniature.sk-card .product-miniature__quickview_button:hover {
    background: var(--skc-pink) !important;
    color: #fff !important;
  }

  .product-miniature.sk-card .wishlist-button-add:hover,
  .product-miniature.sk-card .product-miniature__quickview_touch:hover { color: var(--skc-pink) !important; }

  .product-miniature.sk-card .product-miniature__enquire:hover {
    border-color: var(--skc-pink);
    background: var(--skc-pink);
    color: #fff;
  }
}

/* Touch: a short press instead of a latched lift. theme.css zooms the photo
   to 110% on `.product-miniature__link:hover` with no pointer guard, and a tap
   can latch that hover on a phone — the product then sits cropped on its plate
   until something else is tapped. */
@media (hover: none), (pointer: coarse) {
  .product-miniature.sk-card .card { transition: transform 0.12s ease !important; }
  .product-miniature.sk-card .card:active { transform: scale(0.99); }
  .product-miniature.sk-card .product-miniature__link:hover .product-miniature__image { transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  .product-miniature.sk-card .card,
  .product-miniature.sk-card .product-miniature__image,
  .product-miniature.sk-card .product-miniature__quickview,
  .product-miniature.sk-card .product-miniature__cta,
  .product-miniature.sk-card .product-miniature__enquire {
    transition: none !important;
  }

  .product-miniature.sk-card .card:hover,
  .product-miniature.sk-card .card:active,
  .product-miniature.sk-card .card:hover .product-miniature__image { transform: none !important; }
}