/* ============================================================ GRAINATION — Shop 2.0 shared system (gn-shop) Card ("object record") + shop primitives. Link AFTER fullframe.css. Editorial outside, transactional inside. See handoff/Ecommerce System - Spec v1.md ============================================================ */ :root{ --gn-ink:var(--ink); --gn-paper:var(--white); --gn-bone:var(--bone); --gn-soft:var(--soft); --gn-void:var(--void); --gn-cobalt:var(--cobalt); --gn-cobalt-700:var(--cobalt-700); --gn-acid:var(--acid); --gn-amber:var(--amber); --gn-red:var(--red); --gn-ok:var(--ok); --gn-warn:var(--warn); --gn-line:var(--line); --gn-mut:var(--mut); --gn-grot:var(--grot); --gn-mono:var(--mono); --gn-sans:var(--sans); } .sh *{box-sizing:border-box;} .sh{background:var(--gn-bone);color:var(--gn-ink);font-family:var(--gn-grot);} /* editorial opening keeps the warm bone ground on the white transactional shell */ .sh .fc-hero:not(.dark),.sh .fc-open{background:var(--gn-bone);border-bottom:1px solid var(--gn-line);} .sh .wrap{max-width:1440px;margin:0 auto;padding:0 clamp(20px,5vw,64px);} .sh .mast{display:flex;align-items:center;gap:16px;font-family:var(--gn-mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;margin-bottom:26px;} .sh .mast .idx{color:var(--gn-cobalt);font-weight:700;} .sh .mast .ln{flex:1;height:1px;background:var(--gn-line);} .sh .mast .r{color:var(--gn-mut);} /* ---------- toolbar (search / sort / filter) ---------- */ .sh-toolbar{display:flex;align-items:center;gap:14px;flex-wrap:wrap;padding:16px 0;border-top:1px solid var(--gn-ink);border-bottom:1px solid var(--gn-line);background:var(--gn-paper);z-index:20;} /* toolbar scrolls with the page (not sticky) so it doesn't clash with the auto-hiding header */ .sh-count{font-family:var(--gn-sans);font-weight:600;font-size:12px;letter-spacing:.06em;text-transform:uppercase;} .sh-count b{color:var(--gn-cobalt);} .sh-search{flex:1;min-width:180px;display:flex;align-items:center;gap:8px;border:1px solid var(--gn-line);background:var(--gn-paper);padding:0 12px;height:44px;} .sh-search input:is(main[data-nav] *,.woocommerce-page *):is(main[data-nav] *,.woocommerce-page *){border:0;outline:0;background:transparent;flex:1;font-family:var(--gn-sans);font-size:12px;letter-spacing:normal;color:var(--gn-ink);} .sh-search svg{flex:none;color:var(--gn-mut);} .sh-sort:is(main[data-nav] *,.woocommerce-page *):is(main[data-nav] *,.woocommerce-page *){height:44px;border:1px solid var(--gn-line);background:var(--gn-paper) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='11' height='7' viewBox='0 0 12 8' fill='none'%3E%3Cpath d='M1 1.5L6 6.5L11 1.5' stroke='%230B0B0B' stroke-width='1.4' stroke-linecap='square'/%3E%3C/svg%3E") no-repeat right 12px center;appearance:none;-webkit-appearance:none;font-family:var(--gn-sans);font-weight:600;font-size:11px;letter-spacing:.06em;text-transform:uppercase;padding:0 32px 0 12px;color:var(--gn-ink);cursor:pointer;} .sh-filterbtn:is(main[data-nav] *,.woocommerce-page *):is(main[data-nav] *,.woocommerce-page *){display:none;height:44px;align-items:center;gap:8px;border:1px solid var(--gn-ink);background:var(--gn-ink);color:#fff;font-family:var(--gn-sans);font-weight:600;font-size:11px;letter-spacing:.06em;text-transform:uppercase;padding:0 16px;cursor:pointer;} .sh-search:focus-within{border-color:var(--gn-cobalt);} .sh-sort:focus-visible:is(main[data-nav] *,.woocommerce-page *):is(main[data-nav] *,.woocommerce-page *),.sh-filterbtn:focus-visible:is(main[data-nav] *,.woocommerce-page *):is(main[data-nav] *,.woocommerce-page *){outline:2px solid var(--gn-cobalt);outline-offset:2px;} /* ---------- body: rail + grid ---------- */ .sh-body{display:grid;grid-template-columns:248px minmax(0,1fr);gap:clamp(20px,3vw,40px);margin-top:26px;} .sh-col{min-width:0;} .sh-rail{align-self:start;position:sticky;top:124px;} .sh-rail-head{display:none;justify-content:space-between;align-items:center;margin-bottom:10px;} .sh-rail-head button:is(main[data-nav] *,.woocommerce-page *):is(main[data-nav] *,.woocommerce-page *){border:0;background:none;font-family:var(--gn-sans);font-size:20px;cursor:pointer;width:44px;height:44px;display:flex;align-items:center;justify-content:center;margin-right:-12px;color:var(--gn-ink);} .sh-rail-head button:focus-visible:is(main[data-nav] *,.woocommerce-page *):is(main[data-nav] *,.woocommerce-page *){outline:2px solid var(--gn-cobalt);outline-offset:-2px;} .sh-facet{border-top:1px solid var(--gn-line);padding:16px 0;} .sh-facet:first-child{border-top:0;} .sh-facet .sh-facet-h{font-family:var(--gn-sans);font-weight:600;font-size:11px;letter-spacing:.06em;text-transform:uppercase;margin:0 0 12px;display:flex;justify-content:space-between;} .sh-facet.pending .sh-facet-h{color:var(--gn-mut);} .sh-facet label{display:flex;align-items:center;gap:9px;padding:6px 0;font-family:var(--gn-sans);font-weight:500;font-size:12px;letter-spacing:.02em;color:#3f3e38;cursor:pointer;} .sh-facet input:is(main[data-nav] *,.woocommerce-page *):is(main[data-nav] *,.woocommerce-page *){appearance:none;width:15px;height:15px;border:1.5px solid var(--gn-line);background:var(--gn-paper);flex:none;position:relative;cursor:pointer;} .sh-facet input:checked:is(main[data-nav] *,.woocommerce-page *):is(main[data-nav] *,.woocommerce-page *){background:var(--gn-ink);border-color:var(--gn-ink);} .sh-facet input:checked:is(main[data-nav] *,.woocommerce-page *):is(main[data-nav] *,.woocommerce-page *)::after{content:"✓";position:absolute;inset:0;color:#fff;font-size:10px;display:flex;align-items:center;justify-content:center;} .sh-facet .fct-ct{margin-left:auto;color:var(--gn-mut);} .sh-facet .more:is(main[data-nav] *,.woocommerce-page *):is(main[data-nav] *,.woocommerce-page *){font-family:var(--gn-sans);font-weight:600;font-size:11px;color:var(--gn-cobalt);background:none;border:0;padding:6px 0;cursor:pointer;letter-spacing:.04em;} .sh-facet.pending .pnote{font-family:var(--gn-sans);font-size:10.5px;color:var(--gn-mut);line-height:1.5;} .sh-clear:is(main[data-nav] *,.woocommerce-page *):is(main[data-nav] *,.woocommerce-page *){font-family:var(--gn-sans);font-weight:600;font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:var(--gn-mut);background:none;border:0;border-top:1px solid var(--gn-line);width:100%;text-align:left;padding:14px 0;min-height:44px;cursor:pointer;} /* drawer action row — hidden in the desktop rail, pinned at the drawer foot ≤1000px */ .sh-rail-foot{display:none;} .sh-chips{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:18px;} .sh-chip{display:inline-flex;align-items:center;gap:7px;font-family:var(--gn-sans);font-weight:600;font-size:10.5px;letter-spacing:.06em;text-transform:uppercase;border:1px solid var(--gn-cobalt);color:var(--gn-cobalt);padding:5px 11px;background:rgba(0,91,255,.05);border-radius:999px;} .sh-chip button:is(main[data-nav] *,.woocommerce-page *):is(main[data-nav] *,.woocommerce-page *){border:0;background:none;font-family:var(--gn-sans);color:var(--gn-cobalt);cursor:pointer;font-size:12px;line-height:1;} .sh-prods{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:22px 18px;} @media(min-width:1240px){.sh-prods{grid-template-columns:repeat(4,minmax(0,1fr));}} /* ---------- empty state ---------- */ .sh-empty{border:1px dashed var(--gn-line);padding:clamp(40px,7vw,90px) 24px;text-align:center;} .sh-empty h2{font-family:var(--gn-grot);font-weight:800;font-size:clamp(20px,3vw,30px);text-transform:uppercase;letter-spacing:-.02em;margin:0 0 10px;} .sh-empty p{font-family:var(--gn-sans);font-size:13px;color:var(--gn-mut);margin:0 0 20px;} .sh-empty button:is(main[data-nav] *,.woocommerce-page *):is(main[data-nav] *,.woocommerce-page *){border:1px solid var(--gn-ink);background:var(--gn-ink);color:#fff;font-family:var(--gn-sans);font-weight:600;font-size:11px;letter-spacing:.06em;text-transform:uppercase;padding:12px 20px;min-height:44px;cursor:pointer;} /* ---------- gn-pc card ---------- */ .gn-pc{position:relative;display:flex;flex-direction:column;background:var(--gn-paper);border:1px solid var(--gn-line);border-radius:2px;transition:border-color .15s;outline:none;} .gn-pc:hover,.gn-pc:focus-within{border-color:var(--gn-ink);} .gn-pc::after{content:"";position:absolute;inset:-1px;border:1.5px solid transparent;border-radius:2px;pointer-events:none;transition:border-color .12s;} .gn-pc:focus-within::after{border-color:var(--gn-cobalt);} .gn-pc__code{font-family:var(--gn-mono);font-size:9px;letter-spacing:.14em;text-transform:uppercase;color:#9a988e;padding:11px 12px 0;} .gn-pc__media{position:relative;margin:8px 12px 0;background:var(--gn-bone);border:1px solid var(--gn-line);overflow:hidden;display:flex;align-items:center;justify-content:center;aspect-ratio:1/1;} .gn-pc__media.--book{aspect-ratio:3/4;} .gn-pc__media.--frame{aspect-ratio:4/3;} .gn-pc__media image-slot{position:absolute;inset:0;width:100%;height:100%;} .gn-obj{position:relative;background:linear-gradient(160deg,#fff,#e9e7dd);box-shadow:0 16px 26px -14px rgba(11,11,11,.45);width:44%;height:82%;display:flex;align-items:flex-end;justify-content:center;color:var(--gn-mut);font-family:var(--gn-mono);font-size:8px;letter-spacing:.12em;padding-bottom:6px;} .--book .gn-obj{width:74%;height:90%;} .--frame .gn-obj{width:78%;height:82%;background:#fff;border:6px solid #17150f;} .--object .gn-obj{width:52%;height:76%;border-radius:40px 40px 6px 6px;} .gn-alt{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;background:var(--gn-soft);opacity:0;transition:opacity .18s;} .gn-alt .gn-obj{transform:rotate(-3deg);} .gn-pc:hover .gn-alt{opacity:1;} .gn-mstage-tag{position:absolute;left:9px;right:9px;bottom:8px;font-family:var(--gn-mono);font-size:8px;letter-spacing:.1em;text-transform:uppercase;color:var(--gn-ink);z-index:2;white-space:normal;} .gn-media-fallback{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;background:repeating-linear-gradient(135deg,#efece4 0 10px,#e7e4da 10px 20px);font-family:var(--gn-mono);font-size:9px;letter-spacing:.12em;text-transform:uppercase;color:var(--gn-mut);} .gn-pc__body{display:flex;flex-direction:column;gap:4px;padding:12px;flex:1;} .gn-pc__name{font-family:var(--gn-grot);font-weight:800;font-size:15px;letter-spacing:-.01em;line-height:1.04;text-transform:uppercase;min-height:2.08em;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;} .gn-meta{font-family:var(--gn-mono);font-size:11px;font-weight:500;letter-spacing:.04em;text-transform:uppercase;color:#4a4a46;line-height:1.45;min-height:1.45em;} .gn-row{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:auto;padding-top:8px;} .gn-stock{font-family:var(--gn-mono);font-size:10px;letter-spacing:.1em;text-transform:uppercase;display:flex;align-items:center;gap:6px;} .gn-stock i{width:6px;height:6px;border-radius:50%;background:var(--gn-ok);flex:none;} .gn-stock.is-low i{background:var(--gn-warn);} .gn-stock.is-out{color:var(--gn-mut);} .gn-stock.is-out i{background:var(--gn-mut);} .gn-price{font-family:var(--gn-grot);font-weight:800;font-size:16px;font-variant-numeric:tabular-nums;letter-spacing:-.01em;} .gn-price .was{color:var(--gn-mut);text-decoration:line-through;font-weight:500;font-size:12.5px;margin-right:6px;} .gn-price .now.sale{color:var(--gn-cobalt);} .gn-add:is(main[data-nav] *,.woocommerce-page *):is(main[data-nav] *,.woocommerce-page *){margin:0 12px 12px;appearance:none;border:1px solid var(--gn-ink);background:var(--gn-ink);color:#fff;font-family:var(--gn-sans);font-size:11px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;padding:0 14px;min-height:44px;cursor:pointer;display:flex;align-items:center;justify-content:space-between;transition:background .12s,color .12s,border-color .12s;} .gn-add .pl{font-size:15px;line-height:1;} .gn-add:hover:is(main[data-nav] *,.woocommerce-page *):is(main[data-nav] *,.woocommerce-page *){background:#2A2A2A;border-color:#2A2A2A;}/* DS primary hover = darken to --grey-700 */ .gn-add:active:is(main[data-nav] *,.woocommerce-page *):is(main[data-nav] *,.woocommerce-page *){transform:translateY(1px);}/* DS mechanical press */ .gn-add:focus-visible:is(main[data-nav] *,.woocommerce-page *):is(main[data-nav] *,.woocommerce-page *){outline:2px solid var(--gn-cobalt);outline-offset:2px;} .gn-add.is-added:is(main[data-nav] *,.woocommerce-page *):is(main[data-nav] *,.woocommerce-page *){background:var(--gn-ok);border-color:var(--gn-ok);color:#fff;} .gn-add.is-loading:is(main[data-nav] *,.woocommerce-page *):is(main[data-nav] *,.woocommerce-page *){color:rgba(255,255,255,.55);pointer-events:none;} .gn-add:disabled:is(main[data-nav] *,.woocommerce-page *):is(main[data-nav] *,.woocommerce-page *){background:#e7e5dd;border-color:var(--gn-line);color:var(--gn-mut);cursor:not-allowed;} .gn-add.is-error:is(main[data-nav] *,.woocommerce-page *):is(main[data-nav] *,.woocommerce-page *){background:var(--gn-paper);border-color:var(--gn-red);color:var(--gn-red);} .gn-pc.is-oos .gn-pc__media{filter:grayscale(1);opacity:.62;} /* ---------- responsive: rail → drawer ---------- */ /* QA v2: drawer + scrim layer ABOVE the sticky header (.ff-head z-index:200) and the mobile menu (z 300); safe-area padding; internal scroll; sticky drawer head (close always visible) + pinned Apply/Reset foot at 320px. */ html.sh-lock,html.sh-lock body{overflow:hidden;} @media(max-width:1000px){ .sh-body{grid-template-columns:1fr;} .sh-rail{position:fixed;inset:0 0 0 auto;height:100%;align-self:stretch;width:min(88vw,340px);background:var(--gn-paper);z-index:420;transform:translateX(100%);transition:transform .25s ease;overflow-y:auto;-webkit-overflow-scrolling:touch;display:flex;flex-direction:column;padding:0 20px;box-shadow:-20px 0 60px -30px rgba(0,0,0,.5);top:0;} /* height:100% + align-self reset: the base rail's align-self:start otherwise makes this fixed box fit-content-tall, unpinning the foot */ .sh-rail.is-open{transform:translateX(0);} .sh-rail-head{display:flex;position:sticky;top:0;z-index:2;background:var(--gn-paper);border-bottom:1px solid var(--gn-line);margin:0 -20px 10px;padding:calc(8px + env(safe-area-inset-top,0px)) 20px 8px;} .sh-rail .sh-facet label{padding:10px 0;} .sh-rail-foot{display:grid;grid-template-columns:1fr auto;gap:10px;position:sticky;bottom:0;z-index:2;background:var(--gn-paper);border-top:1px solid var(--gn-line);margin:auto -20px 0;padding:12px 20px calc(12px + env(safe-area-inset-bottom,0px));} .sh-apply:is(main[data-nav] *,.woocommerce-page *):is(main[data-nav] *,.woocommerce-page *){border:1px solid var(--gn-ink);background:var(--gn-ink);color:#fff;font-family:var(--gn-sans);font-size:11px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;min-height:48px;padding:0 16px;cursor:pointer;} .sh-apply:hover:is(main[data-nav] *,.woocommerce-page *):is(main[data-nav] *,.woocommerce-page *){background:var(--gn-cobalt);border-color:var(--gn-cobalt);} .sh-reset:is(main[data-nav] *,.woocommerce-page *):is(main[data-nav] *,.woocommerce-page *){border:1px solid var(--gn-line);background:var(--gn-paper);color:var(--gn-ink);font-family:var(--gn-sans);font-weight:600;font-size:11px;letter-spacing:.06em;text-transform:uppercase;min-height:48px;padding:0 14px;cursor:pointer;} .sh-apply:focus-visible:is(main[data-nav] *,.woocommerce-page *):is(main[data-nav] *,.woocommerce-page *),.sh-reset:focus-visible:is(main[data-nav] *,.woocommerce-page *):is(main[data-nav] *,.woocommerce-page *){outline:2px solid var(--gn-cobalt);outline-offset:2px;} .sh-rail .sh-clear:is(main[data-nav] *,.woocommerce-page *):is(main[data-nav] *,.woocommerce-page *){display:none;} /* drawer uses the pinned Reset instead */ .sh-filterbtn:is(main[data-nav] *,.woocommerce-page *):is(main[data-nav] *,.woocommerce-page *){display:inline-flex;} .sh-search input:is(main[data-nav] *,.woocommerce-page *):is(main[data-nav] *,.woocommerce-page *){font-size:16px;} /* prevents iOS focus zoom */ .sh-scrim{position:fixed;inset:0;background:rgba(11,11,11,.4);z-index:410;opacity:0;pointer-events:none;transition:opacity .2s;} .sh-scrim.is-open{opacity:1;pointer-events:auto;} .sh-prods{grid-template-columns:repeat(2,minmax(0,1fr));} } @media(min-width:1001px){.sh-scrim{display:none;}} @media(prefers-reduced-motion:reduce){.sh-rail,.sh-scrim{transition:none;}} @media(max-width:560px){ .sh-toolbar{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:10px;align-items:center;} .sh-count{grid-column:1;grid-row:1;min-width:0;} .sh-filterbtn:is(main[data-nav] *,.woocommerce-page *):is(main[data-nav] *,.woocommerce-page *){grid-column:2;grid-row:1;justify-self:end;} .sh-sort:is(main[data-nav] *,.woocommerce-page *):is(main[data-nav] *,.woocommerce-page *){grid-column:1 / -1;grid-row:2;width:100%;} .sh-search{grid-column:1 / -1;grid-row:3;width:100%;} } @media(max-width:380px){.sh-prods{grid-template-columns:1fr;}} /* ============================================================ SEAMLESS "objects on paper" — opt-in via body.sh--seamless Products sit directly on the bone ground (no cards / borders / boxes); a silhouette-accurate drop-shadow grounds each object and hover LIFTS it. Applies to every .sh-prods grid on pages that set the class. Pure CSS. ============================================================ */ .sh--seamless{background:#fff;} .sh--seamless .sh-toolbar{background:transparent;} .sh--seamless .sh-prods{gap:clamp(30px,4vw,64px) clamp(16px,2vw,34px);} .sh--seamless .gn-pc{border:0;background:transparent;border-radius:0;box-shadow:none;padding:0;overflow:visible;align-items:stretch;text-align:center;cursor:pointer;} .sh--seamless .gn-pc::after{content:none;} /* no framed focus ring */ .sh--seamless .gn-pc:focus-visible{outline:2px solid var(--gn-cobalt);outline-offset:4px;} .sh--seamless .gn-pc__code{display:none;} /* no boundary chrome */ .sh--seamless .gn-alt{display:none;} /* no hover image-swap in seamless */ .sh--seamless .gn-pc__media{margin:0;background:transparent;border:0;overflow:visible;width:100%;padding-bottom:5%;} .sh--seamless .gn-obj{box-shadow:none;filter:drop-shadow(0 20px 18px rgba(11,11,11,.15)) drop-shadow(0 6px 7px rgba(11,11,11,.12));transition:transform .24s cubic-bezier(.16,1,.3,1),filter .24s ease;will-change:transform;} .sh--seamless .gn-pc:hover .gn-obj,.sh--seamless .gn-pc:focus-visible .gn-obj{transform:translateY(-12px);filter:drop-shadow(0 40px 34px rgba(11,11,11,.20)) drop-shadow(0 14px 16px rgba(11,11,11,.13));} .sh--seamless .gn-pc.is-oos{cursor:default;} .sh--seamless .gn-pc.is-oos .gn-pc__media{filter:none;opacity:1;} /* the object itself carries the OOS dim */ .sh--seamless .gn-pc.is-oos .gn-obj{filter:grayscale(1) drop-shadow(0 16px 16px rgba(11,11,11,.10));opacity:.5;} .sh--seamless .gn-pc.is-oos:hover .gn-obj{transform:none;} .sh--seamless .gn-mstage-tag{left:auto;right:12%;top:6%;bottom:auto;width:58px;height:58px;display:flex;align-items:center;justify-content:center;text-align:center;background:transparent;border:1px solid var(--gn-line);border-radius:50%;color:var(--gn-mut);font-size:8px;letter-spacing:.06em;line-height:1.25;white-space:normal;} .sh--seamless .gn-pc__body{padding:8px 6px 0;gap:6px;align-items:center;text-align:center;flex:1;} .sh--seamless .gn-pc__name{min-height:0;display:block;-webkit-line-clamp:unset;} .sh--seamless .gn-pc__name::after{content:".";color:var(--gn-cobalt);} .sh--seamless .gn-meta,.sh--seamless .gn-meta--film{justify-content:center;text-align:center;min-height:0;} .sh--seamless .gn-meta--film .pr,.sh--seamless .gn-meta--film .pr[data-proc="bw"]{border:0;background:transparent;padding:0;color:var(--gn-mut);} .sh--seamless .gn-row{justify-content:center;gap:12px;margin-top:6px;padding-top:0;} .sh--seamless .gn-add:is(main[data-nav] *,.woocommerce-page *):is(main[data-nav] *,.woocommerce-page *){align-self:center;margin:14px auto 0;border:0;background:transparent;color:var(--gn-cobalt);min-height:32px;padding:4px 8px;justify-content:center;opacity:1;transform:none;transition:opacity .18s,transform .18s,color .12s;position:relative;z-index:3;} .sh--seamless .gn-pc:hover .gn-add:is(main[data-nav] *,.woocommerce-page *):is(main[data-nav] *,.woocommerce-page *),.sh--seamless .gn-pc:focus-within .gn-add:is(main[data-nav] *,.woocommerce-page *):is(main[data-nav] *,.woocommerce-page *){opacity:1;transform:none;} .sh--seamless .gn-add .pl{display:none;} .sh--seamless .gn-add:hover:is(main[data-nav] *,.woocommerce-page *):is(main[data-nav] *,.woocommerce-page *){background:transparent;color:var(--gn-cobalt);text-decoration:underline;text-underline-offset:3px;} .sh--seamless .gn-add.is-added:is(main[data-nav] *,.woocommerce-page *):is(main[data-nav] *,.woocommerce-page *){opacity:1;background:transparent;color:var(--gn-ok);} .sh--seamless .gn-add.is-loading:is(main[data-nav] *,.woocommerce-page *):is(main[data-nav] *,.woocommerce-page *){opacity:1;background:transparent;color:var(--gn-mut);} .sh--seamless .gn-add:disabled:is(main[data-nav] *,.woocommerce-page *):is(main[data-nav] *,.woocommerce-page *){opacity:1;background:transparent;color:var(--gn-mut);} @media(prefers-reduced-motion:reduce){.sh--seamless .gn-obj,.sh--seamless .gn-pc__media.--frame,.sh--seamless .gn-pc__media.--object{transition:none;}} /* bespoke object wrappers (Frames .fr / Darkroom .tray/.bt) get the same grounding + lift as .gn-obj */ .sh--seamless .gn-pc__media.--frame,.sh--seamless .gn-pc__media.--object{filter:drop-shadow(0 20px 18px rgba(11,11,11,.14)) drop-shadow(0 6px 7px rgba(11,11,11,.11));transition:transform .24s cubic-bezier(.16,1,.3,1),filter .24s ease;will-change:transform;} .sh--seamless .gn-pc:hover .gn-pc__media.--frame,.sh--seamless .gn-pc:focus-visible .gn-pc__media.--frame,.sh--seamless .gn-pc:hover .gn-pc__media.--object,.sh--seamless .gn-pc:focus-visible .gn-pc__media.--object{transform:translateY(-12px);filter:drop-shadow(0 40px 34px rgba(11,11,11,.19)) drop-shadow(0 14px 16px rgba(11,11,11,.12));} .sh--seamless .gn-pc.is-oos:hover .gn-pc__media.--frame,.sh--seamless .gn-pc.is-oos:hover .gn-pc__media.--object{transform:none;} /* ============================================================ HEADER TONE — moved to the site layer (fullframe.css / fullframe.js) 2026-07-17: .ff-head.tone-dark now ships site-wide so every dark .pg-hero page gets a visible header, not just the shop. ============================================================ */ /* ── Touch fallback · Neil defect 1a (2026-07-28) ─────────────────────────── The seamless buy action reveals on .gn-pc:hover / :focus-within only (lines above). Hover-less phones never surface it → the primary buy button is invisible on mobile. The design source (ui_kits/shop/gn-shop.css) specifies NO touch treatment — FLAGGED to Neil. Rather than invent a new mobile button, make the design's OWN revealed state permanent on coarse/hover-less pointers, with a 44px tap target. */ @media (hover: none), (max-width: 700px){ .sh--seamless .gn-add:is(main[data-nav] *,.woocommerce-page *):is(main[data-nav] *,.woocommerce-page *){ width:100%;align-self:stretch;margin:14px 0 0;min-height:48px;padding:0 16px; border:1px solid var(--gn-ink);background:var(--gn-ink);color:#fff;justify-content:space-between; text-decoration:none; } .sh--seamless .gn-add:hover:is(main[data-nav] *,.woocommerce-page *):is(main[data-nav] *,.woocommerce-page *){ background:#2A2A2A;color:#fff;text-decoration:none;border-color:#2A2A2A; } .sh--seamless .gn-add .pl{display:inline;} .sh--seamless .gn-add .qc-lens{display:none!important;} } /* WO-035: the product permalink is a real stretched, keyboard-focusable link. The Quick Add control remains above it, so tapping Add never opens the PDP and tapping anywhere else does. */ .gn-pc__link{position:absolute;inset:0;z-index:2;border-radius:inherit;} .gn-pc__link:focus-visible{outline:2px solid var(--gn-cobalt);outline-offset:4px;} .gn-pc .gn-add{position:relative;z-index:3;} /* Toolbar sort