/* KLI · כלי — kit: shop (loads only where KLI Store switched it on)
   Catalog layouts, page tops, category chips, quick view, card hover. Everything here is scoped to its own classes
   (.ks-bn .tiles .grps .shop-side .grid.ed .cpanel .cat-chips .qv .qv-box .ks-scrim) or html[data-card-hover]. */

/* visitor text size (site.css zooms <body>): sheets and windows sized to the screen divide by it, so they still fit */
html[data-text="1"]{ --ks-z:1.15; }
html[data-text="2"]{ --ks-z:1.3; }

/* ---------- page top: photo banner (All pieces, category). Up to three photos side by side, the title on a soft shade ---------- */
.ks-bn{ position:relative; display:grid; grid-auto-flow:column; grid-auto-columns:minmax(0,1fr); grid-template-rows:minmax(0,1fr); gap:3px; margin-top:var(--s24); height:clamp(340px, 34vw, 560px);
  border-radius:var(--r-card); overflow:hidden; isolation:isolate; background:var(--photo-bg); color:var(--cream); }
.ks-bn img{ width:100%; height:100%; object-fit:cover; object-position:50% 82%; }
/* the shade is deep enough for cream words on a white piece (title ≥ 3:1, lead ≥ 4.5:1 without the halo) */
.ks-bn-text{ position:absolute; z-index:1; inset-inline:0; bottom:0; padding:var(--s112) var(--s48) var(--s40);
  background:linear-gradient(to top, rgb(32 26 20 / .84), rgb(32 26 20 / .6) 55%, rgb(32 26 20 / 0)); }
.page-head .ks-bn-text h1{ margin:0; font-size:var(--fs-hero); line-height:1.1; color:var(--cream); max-width:18ch; text-shadow:0 2px 24px rgb(32 26 20 / .3); }
.ks-bn-text .lead{ margin-top:var(--s12); color:var(--cream); text-shadow:0 1px 14px rgb(32 26 20 / .5); }
:is(.ks-bn-text .lead, .cpanel-top p, .grp-line, .qv-about){ text-wrap:pretty; }
@media (max-width:1023px){ .ks-bn{ height:auto; aspect-ratio:4/3; } .ks-bn img:nth-of-type(3){ display:none; } .ks-bn-text{ padding:var(--s88) var(--s32) var(--s32); } }
@media (max-width:767px){
  .ks-bn{ aspect-ratio:5/4; margin-top:var(--s16); }
  .ks-bn img:not(:first-of-type){ display:none; }
  .ks-bn-text{ padding:var(--s64) var(--s20) var(--s20); }
  .ks-bn-text .lead{ font-size:16px; margin-top:var(--s8); }
}

/* ---------- page top: category tiles (All pieces). Shelf colours, the pieces standing on a thin line ---------- */
.tiles{ display:grid; grid-auto-flow:column; grid-auto-columns:minmax(220px,1fr); gap:var(--gap-cards); margin:calc(var(--s40) - 4px) -4px 0; padding:4px; overflow-x:auto; scrollbar-width:none; } /* many categories: the row scrolls */
.tiles::-webkit-scrollbar{ display:none; }
.tile{ --pbg:var(--sage-bg); --pink:var(--ink); position:relative; display:flex; flex-direction:column; justify-content:space-between; gap:var(--s20); min-height:256px;
  padding:var(--s24) var(--s24) var(--s16); border-radius:var(--r-card); background:var(--pbg); color:var(--pink); text-align:start; overflow:hidden;
  transition:box-shadow var(--t-btn) var(--ease); }
.tile-t b{ display:block; font-family:var(--font-head); font-weight:var(--head-weight, 700); font-size:clamp(24px, 1.1rem + .8vw, 32px); line-height:1.1; }
.tile-t > span{ display:block; margin-top:var(--s8); font-size:14px; opacity:.8; }
.tile-art{ display:flex; justify-content:center; align-items:flex-end; height:112px; border-bottom:1px solid color-mix(in srgb, var(--pink) 30%, transparent); }
.tile-art img{ height:100%; width:auto; max-width:44%; object-fit:contain; object-position:50% 100%; margin-inline:-3%; filter:drop-shadow(0 14px 14px rgba(0,0,0,.16)); }
.tile-art img:nth-child(2){ height:82%; }
.tile-art img:nth-child(3){ height:66%; }
.tile-art img.sq{ height:72%; aspect-ratio:1; object-fit:cover; border-radius:12px; margin-inline:2%; filter:none; }
.tile[aria-pressed="true"]{ box-shadow:0 0 0 2px var(--bg), 0 0 0 4px var(--ink); }
.tile:focus-visible{ outline-offset:4px; border-radius:var(--r-card); }
@media (max-width:1023px){
  .tiles{ display:flex; overflow-x:auto; scroll-snap-type:x mandatory; scrollbar-width:none; gap:12px; margin-inline:calc(-1 * var(--gutter)); padding:4px var(--gutter); scroll-padding-inline:var(--gutter); margin-top:var(--s28); }
  .tiles::-webkit-scrollbar{ display:none; }
  .tile{ flex:0 0 clamp(200px, 38%, 300px); min-height:220px; scroll-snap-align:start; }
}
@media (max-width:767px){ .tile{ flex-basis:64%; min-height:200px; padding:var(--s20) var(--s20) var(--s12); } .tile-art{ height:96px; } }

/* ---------- layout: grouped by category. Desktop: the name stands in the first column beside its pieces ---------- */
.grps{ display:grid; gap:var(--s88); }
.grp-head h2{ font-size:var(--fs-h1); }
.grp-head .meta{ margin-top:var(--s8); }
.grp-line{ margin-top:var(--s12); font-size:15px; line-height:1.5; color:var(--muted); max-width:30ch; }
.grp-head .link-arr{ margin-top:var(--s12); }
.grp + .grp{ border-top:1px solid var(--line); padding-top:var(--s40); }
@media (min-width:1024px){
  .grps:not(.c2) .grp{ display:grid; grid-template-columns:repeat(4, minmax(0,1fr)); column-gap:var(--gap-cards); }
  .grps.c3 .grp{ grid-template-columns:repeat(3, minmax(0,1fr)); }
  .grps.c5 .grp{ grid-template-columns:repeat(5, minmax(0,1fr)); column-gap:20px; }
  .grps:not(.c2) .grp-head{ position:sticky; top:calc(var(--header-h) + var(--s32)); align-self:start; padding-inline-end:var(--s16); }
  html[data-hdr-sticky="off"] .grps:not(.c2) .grp-head{ top:var(--s32); }
  .grps:not(.c2) .grp > .grid{ grid-column:2 / -1; grid-template-columns:repeat(3, minmax(0,1fr)); }
  .grps.c3 .grp > .grid{ grid-template-columns:repeat(2, minmax(0,1fr)); }
  .grps.c5 .grp > .grid{ grid-template-columns:repeat(4, minmax(0,1fr)); }
}
.grps.c2 .grp-head{ display:flex; flex-wrap:wrap; align-items:baseline; column-gap:var(--s20); margin-bottom:var(--s32); }
.grps.c2 .grp-head .meta{ margin-top:0; }
.grps.c2 .grp-line{ display:none; }
.grps.c2 .grp-head .link-arr{ margin-inline-start:auto; margin-top:0; }
@media (max-width:1023px){
  .grps{ gap:var(--s64); }
  .grp-head{ display:flex; flex-wrap:wrap; align-items:baseline; column-gap:var(--s16); margin-bottom:var(--s24); }
  .grp-head .meta{ margin-top:0; }
  .grp-line{ display:none; }
  .grp-head .link-arr{ margin-inline-start:auto; margin-top:0; }
  .grp + .grp{ padding-top:var(--s32); }
}
@media (max-width:767px){ .grps{ gap:var(--s48); } .grp-head{ margin-bottom:var(--s20); } .grp-head .link-arr{ font-size:14px; min-height:44px; } }

/* ---------- layout: editorial. Every 7th piece from the first is a 2×2 tile with its in-use photo ---------- */
.grid.ed{ grid-auto-flow:row dense; }
.grid.ed .feat{ grid-column:span 2; }
.grid.ed .feat .card-img{ aspect-ratio:4/5; }
.grid.ed .feat .card-name{ font-family:var(--font-head); font-weight:var(--head-weight, 700); font-size:var(--fs-h3); line-height:1.25; }
.feat-line{ display:block; font-size:14px; line-height:1.45; color:var(--muted); margin-bottom:var(--s4); }
@media (min-width:768px){
  .grid.ed:not(.g2) .feat{ grid-row:span 2; }
  .grid.ed:not(.g2) .feat .card-img{ flex:1; aspect-ratio:auto; min-height:280px; }
  .grid.ed .feat .card-name{ font-size:var(--fs-h2); }
}
/* two per row: the tile lies sideways, photo and words side by side */
@media (min-width:1024px){
  .grid.ed.g2 .feat{ flex-direction:row; align-items:center; gap:var(--s56); }
  .grid.ed.g2 .feat .card-img{ flex:0 0 50%; aspect-ratio:auto; height:min(76vh, 720px); }
  .grid.ed.g2 .feat .card-body{ flex:1 1 50%; flex-direction:column; align-items:flex-start; gap:var(--s24); max-width:460px; padding:0; }
  .grid.ed.g2 .feat .card-name{ font-size:var(--fs-h1); line-height:1.15; margin-bottom:var(--s8); }
  .grid.ed.g2 .feat .feat-line{ font-size:17px; margin-bottom:var(--s8); }
}
html[data-card-style="overlay"] .grid.ed .feat .card-img{ min-height:100%; }
html[data-card-style="overlay"] .feat-line{ color:rgba(255,255,255,.85); }
@media (max-width:767px){ html[data-mob-cols="1"] .grid.ed .feat{ grid-column:auto; } }

/* ---------- layout: filters in a side column (desktop); a sticky "filter and sort" button and a sheet (phones, tablets) ---------- */
.side-g{ padding-block:var(--s24); border-top:1px solid var(--line); }
.side-g:first-child{ border-top:0; padding-top:0; }
.side-t{ font-size:14px; font-weight:700; color:var(--muted); margin-bottom:var(--s8); padding-inline:var(--s12); }
.side-row, .side-sw{ width:100%; min-height:44px; display:flex; align-items:center; gap:var(--s12); padding-inline:var(--s12); border-radius:calc(var(--r-card) * .5); font-size:15px; text-align:start;
  transition:background-color var(--t-btn) var(--ease); }
.side-row{ justify-content:space-between; }
.side .n{ font-size:13px; color:var(--muted); font-variant-numeric:tabular-nums; }
.side-row[aria-pressed="true"], .side-sw[aria-pressed="true"]{ background:var(--surface); font-weight:700; }
.side-s{ justify-content:flex-start; }
.side-s::before{ content:""; flex:none; width:16px; height:16px; border-radius:50%; border:1px solid color-mix(in srgb, var(--ink) 35%, transparent); box-shadow:inset 0 0 0 4px var(--bg); transition:background-color var(--t-btn) var(--ease); }
.side-s[aria-pressed="true"]::before{ background:var(--ink); border-color:var(--ink); box-shadow:inset 0 0 0 3px var(--surface); }
.side-gl{ display:grid; grid-template-columns:1fr 1fr; gap:2px; }
.side-sw{ font-size:14px; padding-inline:var(--s8); }
.side-sw i{ flex:none; width:22px; height:22px; border-radius:50%; border:1px solid color-mix(in srgb, var(--ink) 18%, transparent); transition:box-shadow var(--t-btn) var(--ease); }
.side-sw[aria-pressed="true"] i{ box-shadow:0 0 0 2px var(--surface), 0 0 0 3.5px var(--ink); }
.side-sw .n{ margin-inline-start:auto; }
.side-sw.zero, .side-row.zero{ color:var(--muted); }
.side-sw.zero i{ opacity:.4; }
@media (hover:hover) and (pointer:fine){ .side-row:hover, .side-sw:hover{ background:var(--surface); } }
.side-clear{ min-height:44px; font-size:14px; font-weight:700; text-decoration:underline; text-underline-offset:4px; }
.side-clear[hidden]{ display:none; }
.side-head h2{ font-size:22px; }
@media (min-width:1024px){
  .shop-side{ display:grid; grid-template-columns:248px minmax(0,1fr); gap:var(--s56); align-items:start; }
  .side{ position:sticky; top:calc(var(--header-h) + var(--s24)); max-height:calc(100vh - var(--header-h) - var(--s48)); overflow-y:auto; overscroll-behavior:contain; scrollbar-width:thin; margin-inline:calc(-1 * var(--s12)); }
  html[data-hdr-sticky="off"] .side{ top:var(--s24); max-height:calc(100vh - var(--s48)); } /* the header scrolls away: no band above the column */
  .side-bar, .side-head, .side-done{ display:none; }
  .side-foot{ padding:var(--s16) var(--s12) var(--s8); }
  .side-main .glaze-note{ margin-top:0; }
  /* a narrower grid beside the column: never cramped */
  .shop-side .grid:not(.g2):not(.g3){ grid-template-columns:repeat(3, minmax(0,1fr)); }
}
@media (min-width:1360px){ .shop-side .grid:not(.g2):not(.g3):not(.g5){ grid-template-columns:repeat(4, minmax(0,1fr)); } .shop-side .grid.g5{ grid-template-columns:repeat(4, minmax(0,1fr)); } }
@media (min-width:1600px){ .shop-side .grid.g5{ grid-template-columns:repeat(5, minmax(0,1fr)); } }
@media (max-width:1023px){
  .side-bar{ position:sticky; z-index:30; top:var(--header-h); display:flex; justify-content:space-between; align-items:center; gap:var(--s16); padding-block:var(--s12); margin-bottom:var(--s24); }
  .side-bar::before{ content:""; position:absolute; z-index:-1; inset-block:0; inset-inline:calc(-1 * var(--gutter)); background:var(--bg); border-bottom:1px solid var(--line); }
  html[data-hdr-sticky="off"] .side-bar{ top:0; }
  /* a control reached with Tab never hides under the sticky filter button (site.css already leaves room for the header) */
  html.kbd:has(.side-bar){ scroll-padding-top:calc(var(--header-h) + 68px + var(--s16)); }
  html.kbd[data-hdr-sticky="off"]:has(.side-bar){ scroll-padding-top:calc(68px + var(--s16)); }
  .side-count{ font-size:14px; color:var(--muted); font-variant-numeric:tabular-nums; }
  .side-open{ order:-1; display:inline-flex; align-items:center; gap:var(--s8); min-height:44px; padding-block:0; padding-inline:var(--s16) var(--s20); border:1px solid var(--ink); border-radius:var(--r-control); font-size:15px; font-weight:700; }
  .side-open svg{ width:20px; height:20px; }
  .side-n{ min-width:22px; height:22px; padding:0 6px; border-radius:11px; background:var(--ink); color:var(--buy-ink); font-size:12px; line-height:22px; text-align:center; font-variant-numeric:tabular-nums; }
  .side-n[hidden]{ display:none; }
  .side{ position:fixed; z-index:74; inset-inline:0; bottom:0; margin-inline:auto; max-width:640px; max-height:calc(88svh / var(--ks-z, 1)); display:flex; flex-direction:column; background:var(--bg);
    border-radius:var(--r-sheet) var(--r-sheet) 0 0; box-shadow:0 -16px 48px -12px rgba(47,42,37,.22); visibility:hidden; transform:translateY(100%); }
  .side.open{ visibility:visible; transform:none; }
  .side-head{ position:relative; display:flex; justify-content:space-between; align-items:center; padding-block:var(--s20) var(--s8); padding-inline:var(--s20) var(--s12); }
  .side-head::before{ content:""; position:absolute; top:8px; inset-inline:0; margin-inline:auto; width:36px; height:4px; border-radius:2px; background:var(--line); }
  .side-body{ flex:1; overflow-y:auto; overscroll-behavior:contain; padding:var(--s8) var(--s8) var(--s16); }
  .side-foot{ display:flex; align-items:center; gap:var(--s20); padding:var(--s12) var(--s20) calc(var(--s12) + env(safe-area-inset-bottom)); border-top:1px solid var(--line); }
  .side-done{ flex:1; }
  .side-g{ padding-block:var(--s16); }
}
@media (max-width:1023px) and (prefers-reduced-motion:no-preference){
  .side{ transition:transform var(--t-sheet) var(--ease-io), visibility 0s linear var(--t-sheet); }
  .side.open{ transition:transform var(--t-sheet) var(--ease-io); }
  html[data-motion] .side, html[data-motion] .side.open{ transform:none; transition:opacity var(--t-panel) var(--ease), visibility 0s linear var(--t-panel); opacity:0; }
  html[data-motion] .side.open{ opacity:1; transition:opacity var(--t-panel) var(--ease); }
}
#all-app:has(.tiles) :is(.filters, #all-grid){ scroll-margin-top:calc(var(--header-h) + var(--s16)); }
@media (max-width:1023px){ #all-app:has(.tiles) .shop-side #all-grid{ scroll-margin-top:calc(var(--header-h) + 88px); } } /* below the sticky filter button */

/* ---------- category page top: the shelf-colour panel, like the home shelf ---------- */
.cpanel{ --pbg:var(--sage-bg); --pink:var(--ink); display:grid; grid-template-columns:minmax(0,1fr); gap:var(--s40); margin-top:var(--s24); padding:var(--s56) var(--s56) var(--s32); border-radius:var(--r-card); background:var(--pbg); color:var(--pink); overflow:hidden; }
.cpanel-top{ display:flex; justify-content:space-between; align-items:flex-start; gap:var(--s40); }
.page-head .cpanel h1{ margin:0; font-size:clamp(56px, 1.6rem + 6vw, 128px); line-height:.95; }
.cpanel-top p{ max-width:300px; padding-top:var(--s8); font-size:16px; line-height:1.55; opacity:.88; }
.cpanel-items{ display:grid; grid-template-columns:repeat(var(--n, 3), minmax(0,1fr)); grid-template-rows:minmax(0,1fr); gap:var(--s40); align-items:end; height:clamp(150px, 16vw, 260px); border-bottom:1px solid color-mix(in srgb, var(--pink) 30%, transparent); }
.cpanel-items span{ display:flex; justify-content:center; align-items:flex-end; min-height:0; height:100%; }
/* sized by the line, never by the file the browser picked from srcset */
.cpanel-items img{ height:100%; width:auto; max-width:88%; object-fit:contain; object-position:50% 100%; filter:drop-shadow(0 22px 26px rgba(0,0,0,.18)); }
@media (max-width:1023px){ .cpanel{ padding:var(--s40) var(--s32) var(--s24); } .cpanel-top{ flex-direction:column; gap:var(--s16); } .cpanel-items{ gap:var(--s20); height:24vw; } }
@media (max-width:767px){
  .cpanel{ gap:var(--s28); margin-top:var(--s16); padding:var(--s32) var(--s20) var(--s16); }
  .page-head .cpanel h1{ font-size:clamp(38px, 11vw, 64px); }
  .cpanel-top p{ font-size:15px; padding-top:0; }
  .cpanel-items{ gap:var(--s12); height:30vw; }
}

/* ---------- category chips under the title ---------- */
.cat-chips{ display:flex; flex-wrap:wrap; gap:var(--s8); margin-top:var(--s28); }
.cat-chips .chip{ display:inline-flex; align-items:center; min-height:44px; padding:0 var(--s20); }
.cat-chips .chip[aria-current]{ background:var(--ink); color:var(--buy-ink); border-color:var(--ink); }
@media (max-width:767px){
  .cat-chips{ flex-wrap:nowrap; overflow-x:auto; scrollbar-width:none; margin-inline:calc(-1 * var(--gutter)); padding-inline:var(--gutter); margin-top:var(--s20); }
  .cat-chips::-webkit-scrollbar{ display:none; }
  .cat-chips .chip{ flex:none; }
}

/* ---------- page-top entrances (full motion only; js/kit-shop.js adds .go after the loading screen) ---------- */
@media (prefers-reduced-motion:no-preference){
  html:not(.a11y-still):not([data-motion]) .ks-bn img{ transition:scale calc(1.6s * var(--m, 1)) var(--ease-out); }
  html:not(.a11y-still):not([data-motion]) .ks-bn:not(.go) img{ scale:1.06; }
  html:not(.a11y-still):not([data-motion]) .cpanel-items span{ transition:opacity calc(.7s * var(--m, 1)) var(--ease), translate calc(1.1s * var(--m, 1)) var(--ease-out); transition-delay:calc((.12s + var(--i) * .09s) * var(--m, 1)); }
  html:not(.a11y-still):not([data-motion]) .cpanel:not(.go) .cpanel-items span{ opacity:0; translate:0 28px; }
  @media (hover:hover) and (pointer:fine){
    html:not(.a11y-still):not([data-motion]) :is(.tile-art img, .cpanel-items img){ transition:translate var(--t-card-move) var(--ease), rotate var(--t-card-move) var(--ease); }
    html:not(.a11y-still):not([data-motion]) .tile:hover .tile-art img{ translate:0 -6px; rotate:calc(-3deg * var(--fx, 1)); }
    html:not(.a11y-still):not([data-motion]) .tile:hover .tile-art img:nth-child(2){ transition-delay:40ms; }
    html:not(.a11y-still):not([data-motion]) .tile:hover .tile-art img:nth-child(3){ transition-delay:80ms; }
    html:not(.a11y-still):not([data-motion]) .cpanel-items span:hover img{ translate:0 -8px; rotate:calc(-3deg * var(--fx, 1)); }
  }
}

/* ---------- quick view: the button on the card ---------- */
.card .qv{ position:absolute; z-index:2; display:inline-flex; align-items:center; gap:var(--s8); color:var(--ink); background:color-mix(in srgb, var(--bg) 90%, transparent);
  -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px); }
.card .qv::before{ content:""; flex:none; width:18px; height:18px; background:currentColor;
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2.5 12s3.5-6.5 9.5-6.5 9.5 6.5 9.5 6.5-3.5 6.5-9.5 6.5S2.5 12 2.5 12z'/%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3C/svg%3E") center / contain no-repeat;
  mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2.5 12s3.5-6.5 9.5-6.5 9.5 6.5 9.5 6.5-3.5 6.5-9.5 6.5S2.5 12 2.5 12z'/%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3C/svg%3E") center / contain no-repeat; }
/* desktop: a pill that rises in on hover or focus */
@media (hover:hover) and (pointer:fine){
  .card .qv{ bottom:var(--s12); inset-inline:var(--s12); margin-inline:auto; width:max-content; min-height:40px; padding:0 var(--s16); border-radius:var(--r-control); font-size:14px; font-weight:700;
    box-shadow:0 8px 22px -10px rgba(47,42,37,.4); opacity:0; translate:0 6px; transition:opacity var(--t-btn) var(--ease), translate var(--t-panel) var(--ease-out), background-color var(--t-btn) var(--ease); }
  .card:hover .qv, .card:focus-within .qv{ opacity:1; translate:0 0; }
  .card .qv:hover{ background:var(--bg); }
  html[data-card-style="overlay"] .card .qv{ top:var(--s12); bottom:auto; inset-inline:auto var(--s12); margin:0; }
}
/* touch: a small eye that is always there, in the photo's bottom start corner (the tag sits at the top) */
@media (hover:none), (pointer:coarse){
  .card .qv{ bottom:var(--s8); inset-inline-start:var(--s8); width:36px; height:36px; justify-content:center; border-radius:50%; font-size:0; box-shadow:0 4px 12px -6px rgba(47,42,37,.35); }
  .card .qv::after{ content:""; position:absolute; inset:-4px; }
  html[data-card-style="overlay"] .card .qv{ top:var(--s8); bottom:auto; inset-inline:auto var(--s8); }
}

/* ---------- quick view: the window (desktop, tablet) and the sheet (phones) ---------- */
/* site.css hides the root while Lenis is stopped, which turns <body> into the scroller and drops the sticky header out of view;
   while one of these windows is open the root stays visible, so body's overflow:hidden locks the page as intended */

.ks-scrim{ position:fixed; inset:0; z-index:72; background:rgba(47,42,37,.42); opacity:0; visibility:hidden; transition:opacity var(--t-backdrop) var(--ease), visibility 0s linear var(--t-backdrop); }
.ks-scrim.open{ opacity:1; visibility:visible; transition:opacity var(--t-backdrop) var(--ease); }
.qv-box{ position:fixed; z-index:74; top:50%; left:50%; width:min(920px, calc(100vw / var(--ks-z, 1) - 2 * var(--gutter))); height:min(600px, calc(100svh / var(--ks-z, 1) - 64px)); translate:-50% -50%;
  display:grid; grid-template-columns:1.06fr 1fr; background:var(--bg); color:var(--ink); border-radius:var(--r-card); overflow:hidden; box-shadow:0 40px 100px -24px rgba(47,42,37,.42);
  opacity:0; visibility:hidden; transition:opacity var(--t-panel) var(--ease), visibility 0s linear var(--t-panel); }
.qv-box.open{ opacity:1; visibility:visible; transition:opacity var(--t-panel) var(--ease); }
.qv-box:focus{ outline:none; }
.qv-x{ position:absolute; z-index:3; top:var(--s12); inset-inline-end:var(--s12); background:var(--bg); }
.qv-media{ position:relative; min-height:0; background:var(--photo-bg); }
.qv-media .tag{ top:var(--s16); inset-inline-start:var(--s16); }
.qv-track{ display:flex; height:100%; overflow-x:auto; scroll-snap-type:x mandatory; scrollbar-width:none; overscroll-behavior-x:contain; }
.qv-track::-webkit-scrollbar{ display:none; }
.qv-track:focus-visible{ outline-offset:-4px; }
.qv-pic{ flex:0 0 100%; margin:0; scroll-snap-align:start; scroll-snap-stop:always; }
.qv-pic img{ width:100%; height:100%; object-fit:cover; }
.qv-nav{ position:absolute; z-index:2; inset-inline:0; bottom:var(--s16); display:flex; justify-content:center; align-items:center; gap:var(--s12); pointer-events:none; }
.qv-arr{ pointer-events:auto; width:44px; height:44px; display:grid; place-items:center; border-radius:50%; background:color-mix(in srgb, var(--bg) 88%, transparent); -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px); font-size:18px; line-height:1;
  box-shadow:0 4px 14px -6px rgba(47,42,37,.35); transition:background-color var(--t-btn) var(--ease); }
@media (hover:hover) and (pointer:fine){ .qv-arr:hover{ background:var(--bg); } }
.qv-dots{ display:flex; gap:6px; padding:6px 10px; border-radius:var(--r-control); background:color-mix(in srgb, var(--bg) 70%, transparent); }
.qv-dots i{ width:6px; height:6px; border-radius:50%; background:color-mix(in srgb, var(--ink) 28%, transparent); transition:background-color var(--t-btn) var(--ease), width var(--t-btn) var(--ease); }
.qv-dots i.on{ width:16px; border-radius:3px; background:var(--ink); }
.qv-info{ display:flex; flex-direction:column; min-height:0; overflow-y:auto; overscroll-behavior:contain; padding:var(--s48) var(--s40) var(--s32); }
.qv-info > *{ flex-shrink:0; }
.qv-info .eyebrow{ margin-bottom:var(--s8); }
.qv-info h2{ font-size:var(--fs-h1); line-height:1.15; padding-inline-end:var(--s40); }
.qv-meta{ display:flex; align-items:center; flex-wrap:wrap; gap:var(--s8); margin-top:var(--s12); font-size:14px; color:var(--muted); }
.qv-meta .dot{ width:12px; height:12px; border-radius:50%; border:1px solid color-mix(in srgb, var(--ink) 18%, transparent); }
.qv-stars{ display:inline-flex; align-items:center; gap:var(--s8); margin-top:var(--s4); font-size:14px; color:var(--muted); min-height:44px; align-self:flex-start; }
.qv-about{ margin-top:var(--s16); font-size:15px; line-height:1.6; color:var(--muted); display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:3; line-clamp:3; overflow:hidden; }
.qv-price{ margin-top:var(--s20); font-size:26px; font-weight:700; line-height:1.2; }
.qv-price .was{ font-weight:400; font-size:.68em; color:var(--muted); text-decoration:line-through; margin-inline-end:var(--s8); }
.qv-price .save-pct{ font-size:.6em; }
.qv-human{ margin-top:var(--s8); font-size:15px; color:var(--muted); }
.qv-info .low-stock{ margin-top:var(--s8); }
.qv-buy{ display:flex; flex-wrap:wrap; gap:var(--s12); margin-top:var(--s28); }
.qv-buy .btn{ flex:1 1 auto; padding-inline:var(--s24); white-space:nowrap; }
.qv-buy .btn[disabled]{ opacity:.55; cursor:not-allowed; }
.qv-buy .qty{ margin:0; height:56px; }
.qv-buy .qty button{ width:44px; height:54px; }
.qv-del{ margin-top:var(--s16); font-size:14px; line-height:1.5; color:var(--muted); }
.qv-more{ margin-top:auto; padding-top:var(--s16); align-self:flex-start; }
@media (prefers-reduced-motion:no-preference){
  html:not([data-motion]) .qv-box{ scale:.97; transition:opacity var(--t-panel) var(--ease), scale var(--t-sheet) var(--ease-out), visibility 0s linear var(--t-sheet); }
  html:not([data-motion]) .qv-box.open{ scale:1; transition:opacity var(--t-panel) var(--ease), scale var(--t-sheet) var(--ease-out); }
}
@media (min-width:768px) and (max-width:1023px){ .qv-box{ grid-template-columns:1fr 1fr; } .qv-info{ padding:var(--s40) var(--s28) var(--s24); } }
@media (max-width:767px){
  /* scroll-padding: a link reached with Tab stops above the sticky buy bar */
  .qv-box{ display:block; top:auto; left:0; bottom:0; width:100%; height:auto; max-height:calc(92svh / var(--ks-z, 1)); translate:none; overflow-y:auto; overscroll-behavior:contain;
    scroll-padding-bottom:calc(96px + env(safe-area-inset-bottom)); border-radius:var(--r-sheet) var(--r-sheet) 0 0; box-shadow:0 -16px 48px -12px rgba(47,42,37,.25); }
  .qv-box::before{ content:""; position:absolute; z-index:3; top:8px; inset-inline:0; margin-inline:auto; width:36px; height:4px; border-radius:2px; background:color-mix(in srgb, var(--bg) 85%, transparent); }
  .qv-media{ aspect-ratio:1/1; max-height:min(100vw, 50svh); }
  /* the sheet itself scrolls: the close button stays pinned at its top corner (it takes no room in the flow) */
  .qv-x{ position:sticky; display:grid; top:var(--s12); margin-block:var(--s12) calc(-44px - var(--s12)); margin-inline:auto var(--s12); width:44px; height:44px; background:color-mix(in srgb, var(--bg) 90%, transparent); -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px); }
  .qv-info{ min-height:auto; overflow:visible; padding:var(--s20) var(--s20) 0; }
  .qv-info h2{ padding-inline-end:0; }
  .qv-price{ margin-top:var(--s16); font-size:22px; }
  .qv-buy{ position:sticky; bottom:0; z-index:2; margin:var(--s20) calc(-1 * var(--s20)) 0; padding:var(--s12) var(--s20) calc(var(--s12) + env(safe-area-inset-bottom)); background:var(--bg); border-top:1px solid var(--line); }
  .qv-buy .btn{ padding-inline:var(--s16); font-size:16px; }
  .qv-del{ order:1; margin-top:var(--s16); }
  .qv-more{ order:1; margin-top:0; padding-top:var(--s8); padding-bottom:var(--s16); }
  .qv-buy{ order:2; }
}
@media (max-width:767px) and (prefers-reduced-motion:no-preference){
  html:not([data-motion]) .qv-box{ scale:none; transform:translateY(100%); transition:transform var(--t-sheet) var(--ease-io), visibility 0s linear var(--t-sheet); opacity:1; }
  html:not([data-motion]) .qv-box.open{ transform:none; transition:transform var(--t-sheet) var(--ease-io); }
}

/* ---------- product cards on hover (desktop, full motion: design.php prints the attribute only then) ---------- */
@media (prefers-reduced-motion:no-preference) and (hover:hover) and (pointer:fine){
  /* lift: the card rises a little, a soft warm shadow gathers under the photo */
  html[data-card-hover="lift"]:not(.a11y-still) .card{ transition:translate var(--t-card-move) var(--ease-out); }
  html[data-card-hover="lift"]:not(.a11y-still) .card .card-img{ transition:outline-color var(--t-card-color) var(--ease), box-shadow var(--t-card-move) var(--ease-out); }
  html[data-card-hover="lift"]:not(.a11y-still) .card:hover{ translate:0 -6px; }
  html[data-card-hover="lift"]:not(.a11y-still) .card:hover .card-img{ outline-color:transparent; box-shadow:0 22px 36px -18px color-mix(in srgb, var(--clay-deep) 45%, transparent), 0 8px 14px -10px rgba(47,42,37,.22); }
  html[data-card-hover="lift"][data-card-style="framed"]:not(.a11y-still) .card:hover{ box-shadow:0 22px 40px -22px color-mix(in srgb, var(--clay-deep) 40%, transparent); }
  html[data-card-hover="lift"][data-card-style="framed"]:not(.a11y-still) .card:hover .card-img{ box-shadow:none; }
  /* tilt: the photo leans toward the pointer (js/kit-shop.js sets --rx/--ry), a soft light follows it */
  /* the transform makes the photo its own layer above the card's link: the photo lets clicks through to the link, the eye button keeps its own */
  html[data-card-hover="tilt"]:not(.a11y-still) .card .card-img{ z-index:1; pointer-events:none; transform:perspective(900px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)); transition:transform .6s var(--ease-out), outline-color var(--t-card-color) var(--ease); }
  html[data-card-hover="tilt"]:not(.a11y-still) .card .card-img .qv{ pointer-events:auto; }
  html[data-card-hover="tilt"]:not(.a11y-still) .card.tilting .card-img{ transition:transform .14s linear, outline-color var(--t-card-color) var(--ease); outline-color:transparent; }
  html[data-card-hover="tilt"]:not(.a11y-still) .card .card-img::after{ content:""; position:absolute; z-index:0; inset:0; pointer-events:none; opacity:0; transition:opacity .5s var(--ease);
    background:radial-gradient(circle at var(--px, 50%) var(--py, 50%), rgba(255,255,255,.26), rgba(255,255,255,0) 58%); }
  html[data-card-hover="tilt"]:not(.a11y-still) .card.tilting .card-img::after{ opacity:1; }
}