/* GOOD CHIPS — base Ported from the supplied static build. Colors and type sizes resolve from global theme settings via the --gc-* custom properties emitted by components/theme-css-var.html. */ .gc-page, .gc-page *, .gc-page *::before, .gc-page *::after { box-sizing:border-box; } html.gc-html { width:100%; max-width:100%; overflow-x:hidden; background:var(--gc-cream); } /* The static build styled a bare browser page: the body carried only a family and a colour, and every element below took its size, weight and spacing from the section stylesheets. The theme's own global tag styles sit underneath here, so the body is pinned back to that starting point - otherwise the theme's body line-height and size leak into copy the design never sized. */ body.gc-page { width:100%; max-width:100%; margin:0; overflow-x:hidden; background:var(--gc-cream); color:var(--gc-ink); font-family:var(--gc-serif); font-size:16px; font-style:normal; font-weight:400; line-height:normal; letter-spacing:normal; } /* These three are ports of the static build's own resets. They are wrapped in :where() so they keep that build's zero-class weight: written as `.gc-page a`, the colour and font reset would outrank every button rule in the design and repaint white labels in body ink. */ :where(.gc-page) a { color:inherit; } :where(.gc-page) img { display:block; user-select:none; -webkit-user-drag:none; } :where(.gc-page) button, :where(.gc-page) a { font:inherit; } /* Headings back to browser defaults. The theme gives every h1-h6 its title font, tracking and word-break; inside a GOOD CHIPS section the section stylesheet is the whole design and sets what it wants, so anything it leaves alone has to land on the same ground the static build had. :where() keeps this below the design's own heading rules. */ :where(.gc-page) h1, :where(.gc-page) h2, :where(.gc-page) h3, :where(.gc-page) h4, :where(.gc-page) h5, :where(.gc-page) h6 { font-family:inherit; font-style:inherit; font-weight:bold; line-height:normal; letter-spacing:normal; text-transform:none; word-break:normal; } :where(.gc-page) h1 { font-size:2em; margin-block:.67em; } :where(.gc-page) h2 { font-size:1.5em; margin-block:.83em; } :where(.gc-page) h3 { font-size:1.17em; margin-block:1em; } :where(.gc-page) h4 { font-size:1em; margin-block:1.33em; } :where(.gc-page) h5 { font-size:.83em; margin-block:1.67em; } :where(.gc-page) h6 { font-size:.67em; margin-block:2.33em; } /* Unscoped on purpose: the multi-colour headlines carry a visually-hidden copy of their word, and it must stay hidden even where the .gc-page flag has not been applied to yet. */ .sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; } .gc-free-shipping { display:inline-flex; align-items:center; justify-content:center; gap:7px; width:max-content; max-width:100%; padding:7px 11px; border:1px solid rgba(var(--gc-teal-rgb),.34); border-radius:999px; background:#e1e7dc; background-clip:border-box; box-shadow:none; font:700 calc((10.5px) * var(--gc-type-scale, 1))/1 var(--gc-sans); letter-spacing:.1em; text-transform:uppercase; color:var(--gc-teal); } .gc-free-shipping::before { content:"✓"; font-size:1.05em; line-height:1; } .gc-closing-eyebrow { margin:0 0 22px; font:400 calc((22px) * var(--gc-type-scale, 1))/1 var(--gc-sans); letter-spacing:.24em; text-transform:uppercase; } .gc-page button:focus-visible, .gc-page a:focus-visible { outline:2px solid var(--gc-teal); outline-offset:4px; } @media (max-aspect-ratio:9/10) { .gc-closing-eyebrow { font-size:calc((11px) * var(--gc-type-scale, 1)); } } #gsap-error { position:absolute; z-index:100; left:16px; right:16px; bottom:16px; padding:12px 14px; background:var(--gc-ink); color:#fff; font:calc((14px) * var(--gc-type-scale, 1))/1.4 Arial,sans-serif; border-radius:8px; } /* ========================================================================== Section-driven support ========================================================================== */ /* A GOOD CHIPS page renders its own header and footer inside the scroll story and the GC footer section, so the theme's global header/footer groups step aside here. Every other template keeps them. */ body.gc-page [id^='shopline-section-sections--header-group'], body.gc-page [id^='shopline-section-sections--footer-group'] { display: none !important; } /* The pinned story owns the viewport, so the page must not also scroll sideways while it is running. */ html.gc-html, body.gc-page { overscroll-behavior-x: none; }