/* The Kiddie Depot product card.
   The one stylesheet for every product card on the site (woocommerce/content-product.php).
   Loads after theme.css and wordpress.css, so these rules win.

   The card scales as 1 piece: it is drawn once at 345px wide and every size inside it,
   text, spacing, buttons, corners and shadow, is a share of that width: --u is the card width / 345.
   The wider drawing gives the text more room in the same card: the price fits beside 2 colour dots and a "+" count.
   No minimum sizes, so a phone card is the desktop card made smaller, with the same line breaks.
   Slots, top to bottom, each a fixed height so every card in a row lines up:
   photo 1:1 (label top left) · name (2-line slot) · card line (1 line) · price, swatches on the right · action row.
   Action row: 1 pill, 54 tall (never under 36px), and the round wishlist heart, 54, 8 apart. On phones the heart sits on the photo and the pill runs the full width. Only a card in the cart grows, by View cart.
   Square photo, 1:1: padding 14 top and bottom, name 21, card line 16.5, gaps 4 above the card line, 8.5 above the price,
   10 above the buttons, buttons 54. The photo fits, not fills, so a photo that isn't square shows in full.

   Containers: .sl-block is "row" (the grid's width), .sl-card is "card" (the card's own width).
   Widest card: 283px, the desktop shop card. Outside phones the narrowest is about 180px (3 across on a 591px row). */

.sl-block{container-name:row}
.sl-block .sl-card{container-type:inline-size;container-name:card}
/* --u is registered as a length so the grid works it out once, from the row's width, and the cards inherit the result.
   Without this, "100cqi" inside --u is read again inside each card (a container of its own), against the card's width,
   and the rim, corners and the quantity chevron shrink to a quarter. */
@property --u{syntax:"<length>";inherits:true;initial-value:1px}

/* --- columns, by the width of the row: a column is added before any card grows past 283px, the desktop shop card ---
   1032px and up    4 across (related products), 5 on the home bands; desktop as
   898 to 1031px    4 across
   591 to 897px     3 across; the shop offers 4 from 872 and 2 below
   480 to 590px     2 across, 1 on offer in the shop
   under 480px      2 across (phones), 1 on offer in the shop; gaps 16 by 12px
   The shop's row never reaches 898 (896 beside the filters, 852 at most below 901 screens), so the shop is 3 across by default. */
.sl-block .sl-grid,.sl-block .sl-grid.sl-c3,.sl-block .sl-grid.sl-c4{--cols:4;--gap:24px;display:grid;grid-template-columns:repeat(var(--cols),minmax(0,1fr));
  gap:var(--gap);max-width:none;margin-inline:0;align-items:start;
  --u:calc((100cqi - (var(--cols) - 1) * var(--gap)) / var(--cols) / 345)}
@container row (max-width:897px){.sl-block .sl-grid,.sl-block .sl-grid.sl-c3,.sl-block .sl-grid.sl-c4{--cols:3}}
@container row (max-width:590px){.sl-block .sl-grid,.sl-block .sl-grid.sl-c3,.sl-block .sl-grid.sl-c4{--cols:2}}
@container row (max-width:479px){
  .sl-block .sl-grid,.sl-block .sl-grid.sl-c3,.sl-block .sl-grid.sl-c4{--cols:2;--gap:12px;display:grid;grid-template-columns:repeat(var(--cols),minmax(0,1fr));grid-auto-flow:row;grid-auto-columns:auto;
    max-width:none;overflow:visible;margin:0;padding:0;gap:16px var(--gap);
    --u:calc((100cqi - (var(--cols) - 1) * var(--gap)) / var(--cols) / 345)}
}

/* --- the shop's products-per-row choice (kd_shop_cols(), the kd_cols cookie) ---
   .af-results carries 1 value per screen size: data-cols-d (desktop, row 872px and up), data-cols-t (tablet, 591 to 871px),
   data-cols-p (phone, under 591px). The row's width picks which 1 applies; the defaults match the rule above.
   The control's buttons (.af-col-d, -t, -p) show for the same 3 sizes. */
.af-results{container-type:inline-size;container-name:results}
@container results (min-width:872px){
  .af-results[data-cols-d="4"] .sl-grid{--cols:4}
  .af-results .af-col-d{display:inline-grid}
}
@container results (min-width:591px) and (max-width:871px){
  .af-results[data-cols-t="2"] .sl-grid{--cols:2}
  .af-results .af-col-t{display:inline-grid}
}
@container results (max-width:590px){
  .af-results[data-cols-p="1"] .sl-grid{--cols:1;max-width:420px;margin-inline:auto;--u:calc(min(100cqi, 420px) / 345)} /* 1 across stops at 420px wide, centred */
  .af-results .af-col-p{display:inline-grid}
}
/* the copy in the mobile bar sits outside .af-results, so it goes by the screen (the row is the screen less 32px under 768, 48px from 768) */
@media (max-width:900px) and (min-width:623px){.af-mbar .af-col-t{display:inline-grid}}
@media (max-width:622px){.af-mbar .af-col-p{display:inline-grid}}

/* --- related products and cart suggestions (.sl-c4, 4 products): at 3 across the 4th would sit alone on a 2nd row, so it stays hidden --- */
@container row (min-width:591px) and (max-width:897px){.sl-block .sl-grid.sl-c4:not(.sl-home) .sl-card:nth-child(n+4){display:none}}

/* --- home bands: 5 products loaded; 1 row of 5 on desktop, 4 on small laptops, 3 on tablets, 2 by 2 on phones.
   At 5 across the cards scale down together from the column width (--u), so every part keeps its proportions. --- */
@container row (min-width:1032px){.sl-block .sl-grid.sl-home{--cols:5}.sl-block .sl-grid.sl-home .sl-card:nth-child(n+6){display:none}}
@container row (min-width:898px) and (max-width:1031px){.sl-block .sl-grid.sl-home .sl-card:nth-child(n+5){display:none}}
@container row (min-width:591px) and (max-width:897px){.sl-block .sl-grid.sl-home .sl-card:nth-child(n+4){display:none}}
@container row (max-width:590px){.sl-block .sl-grid.sl-home .sl-card:nth-child(n+5){display:none}}

/* --- photo --- */
.sl-block .sl-card .sl-img{aspect-ratio:1;overflow:hidden}
.sl-block .sl-card .sl-photo{object-fit:contain;transition:transform .4s cubic-bezier(.22,.7,.3,1)}  /* the whole photo shows; wordpress.css sets cover */

/* --- label: flush in the photo's top left corner, white text on the business card colours: Sale honey, Bestseller honey, New owl blue, Made to order charcoal --- */
.sl-block .sl-card .sl-ribbon{top:0;left:0;z-index:2;padding:calc(8*var(--u)) calc(16*var(--u));border-radius:var(--r-in) 0 calc(12*var(--u)) 0;
  font-family:var(--sl-ft);font-size:max(10px, calc(17*var(--u)));font-weight:700;letter-spacing:.1em;line-height:1.2;text-transform:uppercase;white-space:nowrap;color:#FFFFFF;background:var(--copper);text-shadow:var(--copper-shadow)}  /* Sale: copper */
.sl-block .sl-card .sl-ribbon.best{background:var(--sage);text-shadow:var(--sage-shadow)}
.sl-block .sl-card .sl-ribbon.new{background:var(--owl)}
.sl-block .sl-card .sl-ribbon.mto{background:var(--ink)}

/* --- body --- */
.sl-block .sl-card .sl-body{display:flex;flex-direction:column;gap:0;min-height:0;padding:calc(14*var(--u)) calc(20*var(--u))}

/* name: 2-line slot, so a short name leaves the same space as a long one */
/* since 1.7.89 the name, the card line and the label stop shrinking at 13px, 12px and 10px, so a narrow card stays readable; the slots grow with the text */
.sl-block .sl-card .sl-body h3{--sl-name:max(13px, calc(21*var(--u)));margin:0;min-height:0;height:calc(2*var(--lh-snug)*var(--sl-name));font-family:var(--sl-ft);font-size:var(--sl-name);line-height:var(--lh-snug);font-weight:700;color:var(--ink);
  text-wrap:pretty;display:-webkit-box;-webkit-line-clamp:2;line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.sl-block .sl-card .sl-body h3 a{display:inline;padding-block:0;margin-block:0;color:inherit;text-decoration:none;text-underline-offset:calc(4*var(--u));text-decoration-thickness:calc(1.5*var(--u))}

/* card line: 1 line, written to fit (26 characters); "..." only as a safety net */
.sl-block .sl-card .sl-line{--sl-line:max(12px, calc(16.5*var(--u)));margin:calc(4*var(--u)) 0 0;height:calc(var(--lh-snug)*var(--sl-line));min-height:0;font-family:var(--sl-ft);font-size:var(--sl-line);line-height:var(--lh-snug);font-weight:400;color:var(--ink-soft);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;display:block}

/* price row: the price on the left, swatches on the right */
.sl-block .sl-card .sl-price-row{margin-top:calc(8.5*var(--u));height:calc(var(--lh-snug)*24*var(--u));display:flex;align-items:center;justify-content:space-between;gap:calc(8*var(--u))}
.sl-block .sl-card .sl-price{margin:0;padding:0;min-width:0;display:flex;align-items:baseline;gap:calc(7*var(--u));line-height:var(--lh-snug);white-space:nowrap;overflow:hidden;font-variant-numeric:tabular-nums}
.sl-block .sl-card .sl-price .from{font-family:var(--sl-ft);font-size:calc(17*var(--u));color:var(--ink-soft)}
.sl-block .sl-card .sl-price .now{font-family:var(--sl-ft);font-size:calc(24*var(--u));font-weight:700;color:var(--ink)}
.sl-block .sl-card .sl-price:has(.was) .now{color:var(--ink)}  /* sale price in leaf, as across the site */
.sl-block .sl-card .sl-price .was{font-family:var(--sl-ft);font-size:calc(17*var(--u));color:var(--ink-soft);text-decoration:line-through}
.sl-block .sl-card .sl-price .por{font-family:var(--sl-ft);font-size:calc(20*var(--u));font-weight:700;color:var(--ink)}
.sl-block .sl-card .sl-sw{flex:none;display:flex;align-items:center;gap:calc(8*var(--u))}
.sl-block .sl-card .sl-sw-dot{position:relative;display:block;width:calc(22*var(--u));height:calc(22*var(--u));border-radius:50%;background:var(--sw);
  box-shadow:0 0 0 calc(2*var(--u)) #FFFFFF,0 0 0 calc(3*var(--u)) var(--rule);transition:box-shadow .16s}
.sl-block .sl-card .sl-sw-dot:hover{box-shadow:0 0 0 calc(2*var(--u)) #FFFFFF,0 0 0 calc(4*var(--u)) var(--ink)}
.sl-block .sl-card .sl-sw-dot::after{content:"";position:absolute;inset:-8px -2px}  /* since 1.7.90: a taller tap area round each colour dot */
.sl-block .sl-card .sl-sw-dot:focus-visible{outline:max(2px, calc(2*var(--u))) solid var(--focus);outline-offset:calc(4*var(--u))}
.sl-block .sl-card .sl-sw-more{font-family:var(--sl-ft);font-size:calc(16*var(--u));font-weight:600;color:var(--ink-soft)}

/* --- action row: 1 pill and the wishlist heart --- */
.sl-block .sl-card .sl-act{margin-top:calc(10*var(--u));display:flex;align-items:flex-start;gap:calc(8*var(--u))}
.sl-block .sl-card .sl-buy-wrap{flex:1;min-width:0;margin:0}
.sl-block .sl-card .sl-buy-wrap .sl-buy{height:max(36px, calc(54*var(--u)));box-sizing:border-box;padding:0;border:0;border-radius:999px;background:transparent;box-shadow:none}
.sl-block .sl-card .sl-buy-wrap .st{height:100%;gap:0}

/* the main button: Add to cart (leaf), Choose options (forest outline), Enquire now (white, rule border), Out of stock (greyed) */
.sl-block .sl-card .sl-buy-wrap .sl-add{flex:1;width:100%;height:100%;min-height:0;box-sizing:border-box;margin:0;padding:0 max(10px, calc(16*var(--u)));border:0;border-radius:999px;
  display:flex;align-items:center;justify-content:center;font-family:var(--sl-ft);font-size:max(13px, calc(20*var(--u)));font-weight:600;line-height:1;white-space:nowrap;text-decoration:none;cursor:pointer;
  background:var(--buy-fill);color:var(--on-accent);text-shadow:none;box-shadow:var(--buy-rim),inset 0 0 0 calc(1*var(--u)) var(--buy-edge);transform:none;transition:background .16s,color .16s,box-shadow .16s}
.sl-block .sl-card .sl-buy-wrap .sl-add:hover{background:var(--buy-fill-hover);color:var(--on-accent)}
.sl-block .sl-card .sl-buy-wrap .sl-add:not(.sl-opt):not(.sl-enq):active{background:var(--buy-fill-hover);color:var(--on-accent);box-shadow:inset 0 1px 3px rgba(45,64,35,.20)}
.sl-block .sl-card .sl-buy-wrap .sl-add.sl-opt{background:#FFFFFF;color:var(--ink);text-shadow:none;box-shadow:inset 0 0 0 calc(1.5*var(--u)) var(--ink)}  /* outline, like the theme's other outline buttons */
.sl-block .sl-card .sl-buy-wrap .sl-add.sl-opt:hover{background:var(--ink);color:#FFFFFF}
.sl-block .sl-card .sl-buy-wrap .sl-add.sl-enq{background:#FFFFFF;color:var(--ink);text-shadow:none;box-shadow:inset 0 0 0 calc(1.5*var(--u)) var(--rule)}  /* white, rule border, ink text */
.sl-block .sl-card .sl-buy-wrap .sl-add.sl-enq:hover{background:#FFFFFF;color:var(--ink);box-shadow:inset 0 0 0 calc(1.5*var(--u)) var(--ink)}
.sl-block .sl-card .sl-buy-wrap .sl-add.sl-oos{background:var(--cream-2);color:var(--ink-soft);text-shadow:none;box-shadow:none;cursor:default}
.sl-block .sl-card .sl-buy-wrap .sl-add:focus-visible{outline:max(2px, calc(2*var(--u))) solid var(--focus);outline-offset:calc(2*var(--u))}

/* Adding: shows while the cart answers (main.js, data-card) */
.sl-block .sl-card .sl-buy-wrap .st-adding{display:none}
.sl-block .sl-card .sl-buy-wrap.is-adding .st-add,.sl-block .sl-card .sl-buy-wrap.is-adding .st-step{display:none}  /* the stepper waits until Adding ends, even if the cart count arrives first */
.sl-block .sl-card .sl-buy-wrap.is-adding .st-adding{display:flex}
.sl-block .sl-card .sl-adding{flex:1;height:100%;display:flex;align-items:center;justify-content:center;gap:calc(8*var(--u));border-radius:999px;background:var(--buy-fill-hover);color:var(--on-accent);text-shadow:none;
  font-family:var(--sl-ft);font-size:max(13px, calc(20*var(--u)));font-weight:600;white-space:nowrap}
.sl-block .sl-card .sl-adding .spin{width:max(16px, calc(25*var(--u)));height:max(16px, calc(25*var(--u)));animation:kd-spin .8s linear infinite}
@keyframes kd-spin{to{transform:rotate(360deg)}}

/* the stepper: the same 54 pill, 7 inset, 40 circles (never under 26px), the count between */
.sl-block .sl-card .sl-buy-wrap .st-step{box-sizing:border-box;padding:max(5px, calc(7*var(--u)));gap:calc(4*var(--u));border-radius:999px;background:#FFFFFF;box-shadow:inset 0 0 0 calc(1.5*var(--u)) var(--sage)}
.sl-block .sl-card .sl-buy-wrap .stp{flex:none;width:max(26px, calc(40*var(--u)));height:max(26px, calc(40*var(--u)));min-width:0;margin:0}
.sl-block .sl-card .sl-buy-wrap .stp svg{width:max(13px, calc(19*var(--u)));height:max(13px, calc(19*var(--u)))}
.sl-block .sl-card .sl-buy-wrap .stp-minus{background:var(--cream-2);color:var(--ink)}
.sl-block .sl-card .sl-buy-wrap .stp-minus:hover{background:var(--rule)}
.sl-block .sl-card .sl-buy-wrap .stp-plus{background:var(--buy-fill);color:var(--on-accent)}
.sl-block .sl-card .sl-buy-wrap .stp-plus:hover{background:var(--buy-fill-hover)}
.sl-block .sl-card .sl-buy-wrap .stp-plus:active{background:var(--buy-fill-hover)}
.sl-block .sl-card .sl-buy-wrap .stp:focus-visible{outline:max(2px, calc(2*var(--u))) solid var(--focus);outline-offset:calc(2*var(--u))}
.sl-block .sl-card .sl-buy-wrap .stp-l{flex:1;min-width:0;height:auto;gap:0;justify-content:center;font-family:var(--sl-ft);font-size:max(13px, calc(20*var(--u)));font-weight:600;color:var(--ink);white-space:nowrap;overflow:hidden}
.sl-block .sl-card .sl-buy-wrap .stp-l .n{font-weight:600}
.sl-block .sl-card .sl-buy-wrap .kd-dot{width:calc(7*var(--u));height:calc(7*var(--u))}

/* View cart: 8 below the pill, 52 tall (never under 34px), white with a forest border and forest text */
.sl-block .sl-card .sl-buy-wrap .vc{margin-top:calc(8*var(--u));height:max(34px, calc(52*var(--u)));gap:calc(8*var(--u));border:0;border-radius:999px;background:#FFFFFF;
  box-shadow:inset 0 0 0 calc(1.5*var(--u)) var(--ink);font-family:var(--sl-ft);font-size:max(13px, calc(20*var(--u)));font-weight:600;color:var(--ink);text-decoration:none}
.sl-block .sl-card .sl-buy-wrap .vc svg{width:max(13px, calc(19*var(--u)));height:max(13px, calc(19*var(--u)))}
.sl-block .sl-card .sl-buy-wrap .vc:hover{background:var(--ink);color:#FFFFFF}

/* the wishlist heart: a 54 circle (never under 36px) beside the pill, deep apricot like the rest of the site's hearts; fills when saved */
.sl-block .sl-card .sl-act .sl-wish{position:static;flex:none;width:max(36px, calc(54*var(--u)));height:max(36px, calc(54*var(--u)));min-width:0;padding:0;border:0;border-radius:50%;
  display:grid;place-items:center;background:#FFFFFF;box-shadow:inset 0 0 0 calc(1.5*var(--u)) var(--rule);cursor:pointer;-webkit-backdrop-filter:none;backdrop-filter:none;transition:background .16s,box-shadow .16s}
.sl-block .sl-card .sl-act .sl-wish svg{width:max(16px, calc(24*var(--u)));height:max(16px, calc(24*var(--u)));stroke:var(--ink)}
.sl-block .sl-card .sl-act .sl-wish:hover{box-shadow:inset 0 0 0 calc(1.5*var(--u)) var(--ink)}
.sl-block .sl-card .sl-act .sl-wish[aria-pressed="true"]{background:var(--copper-wash);box-shadow:inset 0 0 0 calc(1.5*var(--u)) var(--copper)}
.sl-block .sl-card .sl-act .sl-wish[aria-pressed="true"] svg{fill:var(--copper);stroke:var(--copper)}

/* --- phones: a 44px tap area round the card's buttons ---
   The buttons keep their scaled size on screen. A see-through ::after round each one takes taps up to 44px tall,
   growing up into the gap above the action row and down into the card's padding,
   so it stays inside the card and clear of the price row and swatches. Sideways, the pill and the heart each take
   half of the 8-unit gap between them, so 1 tap never reaches both. Once a product is in the cart, the stepper's
   area stops halfway to View cart, and View cart takes the other half. inset:auto keeps the heart where it is:
   theme.css gives .sl-wish a top and right offset that position:relative would otherwise switch on.
   At 390 wide the 24px buttons take taps 41px tall; at 320 the 20px buttons take taps 33px tall (all the card has room for). */
@container row (max-width:647px){
  .sl-block .sl-card .sl-act{--tap-need:max(0px, 44px - max(36px, 54*var(--u)));--tap-up:min(var(--tap-need) / 2, 10*var(--u));--tap-down:min(var(--tap-need) - var(--tap-up), 19*var(--u))}
  .sl-block .sl-card .sl-buy-wrap[data-in]{--tap-down:min(var(--tap-need) - var(--tap-up), 19*var(--u), 4*var(--u))}
  .sl-block .sl-card .sl-buy-wrap .sl-add,.sl-block .sl-card .sl-buy-wrap .stp,.sl-block .sl-card .sl-act .sl-wish,.sl-block .sl-card .sl-buy-wrap .vc{position:relative;inset:auto}
  .sl-block .sl-card .sl-buy-wrap .sl-add::after,.sl-block .sl-card .sl-buy-wrap .stp::after,.sl-block .sl-card .sl-act .sl-wish::after,.sl-block .sl-card .sl-buy-wrap .vc::after{
    content:"";position:absolute;background:none;pointer-events:auto}
  .sl-block .sl-card .sl-buy-wrap .sl-add::after{top:calc(-1*var(--tap-up));bottom:calc(-1*var(--tap-down));left:calc(-8*var(--u));right:calc(-4*var(--u))}
  .sl-block .sl-card .sl-act .sl-wish::after{top:calc(-1*var(--tap-up));bottom:calc(-1*var(--tap-down));left:calc(-4*var(--u));right:calc(-8*var(--u))}
  .sl-block .sl-card .sl-buy-wrap .stp::after{top:calc(-7*var(--u) - var(--tap-up));bottom:calc(-7*var(--u) - var(--tap-down))}
  .sl-block .sl-card .sl-buy-wrap .stp-minus::after{left:calc(-16*var(--u));right:calc(-4*var(--u))}
  .sl-block .sl-card .sl-buy-wrap .stp-plus::after{left:calc(-4*var(--u));right:calc(-12*var(--u))}
  .sl-block .sl-card .sl-buy-wrap .vc::after{top:calc(-4*var(--u));bottom:-4px;left:-4px;right:-4px}
}

/* --- hover on devices with a mouse: the card lifts (theme.css) and the photo zooms --- */
@media (hover:hover){
  .sl-block .sl-card:hover .sl-photo{transform:scale(1.04)}
}
@media (prefers-reduced-motion:reduce){
  .sl-block .sl-card .sl-photo{transition:none}
  .sl-block .sl-card:hover .sl-photo{transform:none}
  .sl-block .sl-card .sl-adding .spin{animation:none}
}

/* --- skeleton cards while the shop filters load: the same slots --- */
.sl-block .af-skel .sl-body{padding:calc(14*var(--u)) calc(20*var(--u))}
.sl-block .af-skel .af-sk.l{width:52%;height:calc(16*var(--u));margin-top:calc(8*var(--u))}
.sl-block .af-skel .af-sk.t{width:90%;height:calc(22*var(--u));margin-top:0}
.sl-block .af-skel .af-sk.t2{width:62%;height:calc(22*var(--u));margin-top:calc(8*var(--u))}
.sl-block .af-skel .af-sk.p{width:40%;height:calc(24*var(--u));margin:calc(12*var(--u)) 0 calc(9.5*var(--u))}
.sl-block .af-skel .af-sk.b{width:calc(100% - 62*var(--u));height:max(36px, calc(54*var(--u)));border-radius:999px}
.sl-block .af-skel .af-sk.t{order:1}
.sl-block .af-skel .af-sk.t2{order:2}
.sl-block .af-skel .af-sk.l{order:3}
.sl-block .af-skel .af-sk.p{order:4}
.sl-block .af-skel .af-sk.b{order:5}
/* pressed: a step darker than the charcoal hover */
.sl-block .sl-card .sl-buy-wrap .sl-add.sl-opt:active,.sl-block .sl-card .sl-buy-wrap .vc:active{background:var(--ink-pressed);color:#FFFFFF}

/* --- phones (2 across, row under 591px): the wishlist heart moves onto the photo, top right, and the pill runs the full width ---
   The heart is a 34px white glass circle, 8px in from the photo's corner, clear of the label on the left.
   The card body's clip opens upwards so the heart shows. Its see-through ::after takes taps 44px wide. The skeleton button runs the full width to match. */
@container row (max-width:590px){
  .sl-block .sl-card .sl-act{gap:0}
  .sl-block .sl-card .sl-body{clip-path:inset(-200% -120px -120px -120px)}  /* theme.css clips the body at its top edge, which would cut the heart off */
  .sl-block .sl-card .sl-act .sl-wish{position:absolute;inset:auto;top:calc(var(--rim, 0px) + 8px);right:calc(var(--rim, 0px) + 8px);z-index:3;width:34px;height:34px;
    background:rgba(255,255,255,.9);-webkit-backdrop-filter:blur(8px) saturate(1.2);backdrop-filter:blur(8px) saturate(1.2);
    box-shadow:0 1px 4px rgba(42,33,24,.16),inset 0 0 0 1px rgba(255,255,255,.95)}
  .sl-block .sl-card .sl-act .sl-wish svg{width:17px;height:17px}
  .sl-block .sl-card .sl-act .sl-wish:hover{box-shadow:0 1px 4px rgba(42,33,24,.16),inset 0 0 0 1.5px var(--ink)}
  .sl-block .sl-card .sl-act .sl-wish[aria-pressed="true"]{background:var(--copper-wash);box-shadow:0 1px 4px rgba(42,33,24,.16),inset 0 0 0 1.5px var(--copper)}
  .sl-block .sl-card .sl-act .sl-wish::after{content:"";position:absolute;inset:-5px;background:none;pointer-events:auto}
  .sl-block .sl-card .sl-buy-wrap .sl-add::after{left:calc(-8*var(--u));right:calc(-8*var(--u))}
  .sl-block .af-skel .af-sk.b{width:100%}
}

/* --- the action row from laptops and tablets up (row 591px and wider): 46 tall, not 54 ---
   The pill, the heart, the stepper and View cart are 46/54 of their phone size on the 345 drawing, so "Add to cart"
   (18) sits smaller than the product name (21) and the row reads as part of the card. No minimum sizes: the row
   stays the same share of the card at every width. Phones (row under 591px) keep the 54 row above.
   On touch screens a see-through ::after round each button takes taps up to 44px tall, as on phones. */
@container row (min-width:591px){
  .sl-block .sl-card .sl-buy-wrap .sl-buy{height:calc(46*var(--u))}
  .sl-block .sl-card .sl-buy-wrap .sl-add{padding:0 calc(14*var(--u));font-size:calc(18*var(--u))}
  .sl-block .sl-card .sl-adding{font-size:calc(18*var(--u))}
  .sl-block .sl-card .sl-adding .spin{width:calc(21*var(--u));height:calc(21*var(--u))}
  .sl-block .sl-card .sl-buy-wrap .st-step{padding:calc(6*var(--u))}
  .sl-block .sl-card .sl-buy-wrap .stp{width:calc(34*var(--u));height:calc(34*var(--u))}
  .sl-block .sl-card .sl-buy-wrap .stp svg,.sl-block .sl-card .sl-buy-wrap .vc svg{width:calc(16*var(--u));height:calc(16*var(--u))}
  .sl-block .sl-card .sl-buy-wrap .stp-l,.sl-block .sl-card .sl-buy-wrap .vc{font-size:calc(18*var(--u))}
  .sl-block .sl-card .sl-buy-wrap .vc{height:calc(44*var(--u))}
  .sl-block .sl-card .sl-act .sl-wish{width:calc(46*var(--u));height:calc(46*var(--u))}
  .sl-block .sl-card .sl-act .sl-wish svg{width:calc(21*var(--u));height:calc(21*var(--u))}
  .sl-block .af-skel .af-sk.b{width:calc(100% - 54*var(--u));height:calc(46*var(--u))}
}
@container row (min-width:591px) and (max-width:647px){
  .sl-block .sl-card .sl-act{--tap-need:max(0px, 44px - 46*var(--u))}
}
@media (pointer:coarse){
  @container row (min-width:648px){
    .sl-block .sl-card .sl-act{--tap-need:max(0px, 44px - 46*var(--u));--tap-up:min(var(--tap-need) / 2, 10*var(--u));--tap-down:min(var(--tap-need) - var(--tap-up), 19*var(--u))}
    .sl-block .sl-card .sl-buy-wrap[data-in]{--tap-down:min(var(--tap-need) - var(--tap-up), 19*var(--u), 4*var(--u))}
    .sl-block .sl-card .sl-buy-wrap .sl-add,.sl-block .sl-card .sl-buy-wrap .stp,.sl-block .sl-card .sl-act .sl-wish,.sl-block .sl-card .sl-buy-wrap .vc{position:relative;inset:auto}
    .sl-block .sl-card .sl-buy-wrap .sl-add::after,.sl-block .sl-card .sl-buy-wrap .stp::after,.sl-block .sl-card .sl-act .sl-wish::after,.sl-block .sl-card .sl-buy-wrap .vc::after{
      content:"";position:absolute;background:none;pointer-events:auto}
    .sl-block .sl-card .sl-buy-wrap .sl-add::after{top:calc(-1*var(--tap-up));bottom:calc(-1*var(--tap-down));left:calc(-8*var(--u));right:calc(-4*var(--u))}
    .sl-block .sl-card .sl-act .sl-wish::after{top:calc(-1*var(--tap-up));bottom:calc(-1*var(--tap-down));left:calc(-4*var(--u));right:calc(-8*var(--u))}
    .sl-block .sl-card .sl-buy-wrap .stp::after{top:calc(-6*var(--u) - var(--tap-up));bottom:calc(-6*var(--u) - var(--tap-down))}
    .sl-block .sl-card .sl-buy-wrap .stp-minus::after{left:calc(-16*var(--u));right:calc(-4*var(--u))}
    .sl-block .sl-card .sl-buy-wrap .stp-plus::after{left:calc(-4*var(--u));right:calc(-12*var(--u))}
    .sl-block .sl-card .sl-buy-wrap .vc::after{top:calc(-4*var(--u));bottom:-4px;left:-4px;right:-4px}
  }
}

/* --- outlines as borders, not inset shadows ---
   At 1.5 units an outline is under 1px wide on most cards, and on a standard (non-retina) screen an inset shadow that
   thin, sitting on a part pixel, breaks up along the top edge and reads as cut off. A border is snapped to whole
   pixels, so the ring stays continuous: 1.5 units, never under 1px. box-sizing keeps every button the same size. */
.sl-block .sl-card{--ring:max(1px, calc(1.5*var(--u)))}
.sl-block .sl-card .sl-buy-wrap .sl-add.sl-opt{box-shadow:none;border:var(--ring) solid var(--ink)}
.sl-block .sl-card .sl-buy-wrap .sl-add.sl-enq{box-shadow:none;border:var(--ring) solid var(--rule)}
.sl-block .sl-card .sl-buy-wrap .sl-add.sl-enq:hover{box-shadow:none;border-color:var(--ink)}
.sl-block .sl-card .sl-buy-wrap .st-step{box-shadow:none;border:var(--ring) solid var(--sage)}
.sl-block .sl-card .sl-buy-wrap .vc{box-sizing:border-box;box-shadow:none;border:var(--ring) solid var(--ink)}
@container row (min-width:591px){
  .sl-block .sl-card .sl-act .sl-wish{box-sizing:border-box;box-shadow:none;border:var(--ring) solid var(--rule);transition:background .16s,border-color .16s}
  .sl-block .sl-card .sl-act .sl-wish:hover{box-shadow:none;border-color:var(--ink)}
  .sl-block .sl-card .sl-act .sl-wish[aria-pressed="true"]{box-shadow:none;border-color:var(--copper)}
}

/* --- more room round the action row, laptops and tablets up (row 591px and wider) ---
   16 above the button (was 10) and 20 below it (was 14), on the 345 drawing. Every card in a row grows by the same
   amount, so the rows stay level. Phones keep 10 and 14. */
@container row (min-width:591px){
  .sl-block .sl-card .sl-act{margin-top:calc(16*var(--u))}
  .sl-block .sl-card .sl-body{padding-bottom:calc(20*var(--u))}
  .sl-block .af-skel .sl-body{padding-bottom:calc(20*var(--u))}
  .sl-block .af-skel .af-sk.p{margin-bottom:calc(15.5*var(--u))}
}