/* The pages Squarespace still renders itself — the cart, contact, the small print — made to
   look like the rest of the site.

   These pages cannot use the takeover: their markup IS the product. The cart's rows, quantity
   steppers and checkout link are Squarespace's own working controls, so this file restyles
   them in place rather than hiding them, and gx-pages.js supplies the design's header and
   footer around them.

   Everything is scoped to `html:not(.gx-takeover)` except the mini-cart section at the very
   end, which is unscoped on purpose and says why. The twelve injected pages add
   `.gx-takeover` during parsing, so no scoped declaration here can reach them — and the cart
   selectors below do not exist there anyway. Belt and braces, because a mistake in this file
   would otherwise land on the storefront.

   The tokens restate content/theme.json and the `:root` block of mockups.css. They are
   duplicated rather than imported because mockups.css also styles bare `img`, `p` and
   `button`, which would distort Squarespace's own layout. If a token changes there, change
   it here too — there is no build step joining them. */

html:not(.gx-takeover){
  --gxbg:#0c0d10;--gxpanel:#131419;--gxink:#eceef3;--gxmuted:#a0a4ad;
  --gxline:#3a3d45;--gxaccent:#05a1ed;
  --gxsans:'Helvetica Neue',Helvetica,Arial,sans-serif;
  --gxmono:'SFMono-Regular',Consolas,'Liberation Mono',monospace;
  --gxgutter:clamp(22px,4vw,72px);
}

/* ---- canvas and type ------------------------------------------------------------------ */

html:not(.gx-takeover) body{background:var(--gxbg);color:var(--gxink);font-family:var(--gxsans)}
html:not(.gx-takeover) #siteWrapper{background:var(--gxbg)}
html:not(.gx-takeover) h1,
html:not(.gx-takeover) h2,
html:not(.gx-takeover) h3,
html:not(.gx-takeover) h4{
  font-family:var(--gxsans);font-weight:400;letter-spacing:-.055em;line-height:.97;
  color:var(--gxink)}
html:not(.gx-takeover) p,
html:not(.gx-takeover) li,
html:not(.gx-takeover) label,
html:not(.gx-takeover) td,
html:not(.gx-takeover) th{font-family:var(--gxsans);color:var(--gxink)}
html:not(.gx-takeover) a{color:var(--gxaccent)}

/* ---- the design's header and footer, built by gx-pages.js ----------------------------- */

html:not(.gx-takeover) .gx-chrome-hide{display:none!important}

html:not(.gx-takeover) .gx-page-header{
  height:92px;padding:0 var(--gxgutter);display:flex;align-items:center;
  justify-content:space-between;border-bottom:1px solid var(--gxline);background:var(--gxbg)}
html:not(.gx-takeover) .gx-page-header .gx-wordmark,
html:not(.gx-takeover) .gx-page-footer .gx-wordmark{
  font-weight:700;font-size:35px;letter-spacing:-.065em;line-height:1;
  color:var(--gxink);text-decoration:none}
html:not(.gx-takeover) .gx-page-header nav{
  display:flex;gap:36px;font:14px var(--gxmono);text-transform:uppercase}
html:not(.gx-takeover) .gx-page-header nav a{
  color:var(--gxmuted);padding:4px 0;text-decoration:none;
  border-bottom:1px solid transparent}
html:not(.gx-takeover) .gx-page-header nav a:hover,
html:not(.gx-takeover) .gx-page-header nav a:focus-visible{color:var(--gxink)}
html:not(.gx-takeover) .gx-page-header nav a[aria-current]{
  color:var(--gxink);border-bottom-color:var(--gxaccent)}
html:not(.gx-takeover) .gx-page-label{
  font:12px/1.45 var(--gxmono);text-transform:uppercase;letter-spacing:.045em;
  color:var(--gxmuted)}

html:not(.gx-takeover) .gx-page-footer{
  padding:40px var(--gxgutter);border-top:1px solid var(--gxline);
  display:flex;align-items:center;justify-content:space-between;background:var(--gxbg)}

@media(max-width:700px){
  html:not(.gx-takeover) .gx-page-header{height:76px}
  html:not(.gx-takeover) .gx-page-header nav{gap:20px;font-size:12px}
  html:not(.gx-takeover) .gx-page-header .gx-page-label{display:none}
  html:not(.gx-takeover) .gx-page-footer .gx-page-label{
    font-size:12px;max-width:150px;text-align:right}
}

/* No page-gutter override: `.system-page` already pads 60.48px and the design header pads
   clamp(22px,4vw,72px) — 57.6px at 1440. Adding a gutter here stacked the two and pushed the
   cart title 60px out of line with the wordmark above it. Squarespace's own padding is close
   enough to the design's that the columns read as one. */

/* ---- the cart --------------------------------------------------------------------------
   Semantic class names only (cart-title, cart-row, cart-checkout …). Squarespace also emits
   hashed classes on these nodes, which change between deploys, so they are never targeted. */

html:not(.gx-takeover) .cart-title{
  font-family:var(--gxsans);font-weight:400;letter-spacing:-.055em;line-height:.97;
  font-size:clamp(38px,5vw,76px);color:var(--gxink);margin:0 0 8px}
html:not(.gx-takeover) .cart-container{border-top:1px solid var(--gxline)}
html:not(.gx-takeover) .cart-row{border-bottom:1px solid var(--gxline)}
html:not(.gx-takeover) .cart-row-title{
  font-family:var(--gxsans);font-size:20px;letter-spacing:-.02em;
  color:var(--gxink);text-decoration:none}
html:not(.gx-takeover) .cart-row-title:hover{color:var(--gxaccent)}
html:not(.gx-takeover) .cart-row-variants,
html:not(.gx-takeover) .cart-row-qty p{
  font:12px/1.45 var(--gxmono);text-transform:uppercase;letter-spacing:.045em;
  color:var(--gxmuted)}
html:not(.gx-takeover) .cart-row-price,
html:not(.gx-takeover) .cart-subtotal-price{
  font-family:var(--gxsans);color:var(--gxink);font-variant-numeric:tabular-nums}
html:not(.gx-takeover) .cart-subtotal-label{
  font:12px/1.45 var(--gxmono);text-transform:uppercase;letter-spacing:.045em;
  color:var(--gxmuted)}
html:not(.gx-takeover) .cart-subtotal-price{font-size:28px;letter-spacing:-.03em}
html:not(.gx-takeover) .cart-row-img{border-radius:10px;overflow:hidden}
html:not(.gx-takeover) .cart-row-qty-input{
  background:var(--gxpanel);color:var(--gxink);border:1px solid var(--gxline);
  border-radius:6px;font-family:var(--gxmono)}
html:not(.gx-takeover) .cart-row-qty-dec,
html:not(.gx-takeover) .cart-row-qty-inc,
html:not(.gx-takeover) .cart-row-remove{color:var(--gxmuted);background:none}
html:not(.gx-takeover) .cart-row-qty-dec:hover,
html:not(.gx-takeover) .cart-row-qty-inc:hover,
html:not(.gx-takeover) .cart-row-remove:hover{color:var(--gxink)}

/* The checkout link gets the design's Buy button, declaration for declaration — see `.buy`
   in mockups.css. !important because Squarespace's button styling is a tweak-class cascade
   (primary-button-style-outline and friends) that outweighs any sane selector here. */
html:not(.gx-takeover) .cart-checkout a,
html:not(.gx-takeover) .cart-checkout .sqs-button-element--primary{
  display:inline-block!important;border-radius:6px!important;
  background:var(--gxaccent)!important;color:#0d1016!important;
  padding:13px 20px!important;font:14px var(--gxmono)!important;
  text-transform:uppercase!important;letter-spacing:.045em!important;
  border:0!important;text-decoration:none!important}
html:not(.gx-takeover) .cart-checkout a:hover,
html:not(.gx-takeover) .cart-checkout .sqs-button-element--primary:hover{filter:brightness(1.1)}

/* An empty cart offers "Continue Shopping". The design has no second solid button for a
   secondary action — it uses `.text-link`, a mono label on a hairline — so that is what this
   becomes, rather than a second blue button competing with Checkout. */
html:not(.gx-takeover) .cart-continue-button,
html:not(.gx-takeover) #sqs-cart-container .sqs-button-element--secondary{
  display:inline-flex!important;align-items:center!important;
  background:none!important;border:0!important;border-radius:0!important;
  border-bottom:1px solid currentColor!important;
  color:var(--gxink)!important;padding:14px 0!important;
  font:14px var(--gxmono)!important;text-transform:uppercase!important;
  letter-spacing:.045em!important;text-decoration:none!important}
html:not(.gx-takeover) .cart-continue-button:hover{color:var(--gxaccent)!important}

/* Empty cart and any other cart copy */
html:not(.gx-takeover) #sqs-cart-container p{color:var(--gxmuted)}
html:not(.gx-takeover) #sqs-cart-container .cart-row-price,
html:not(.gx-takeover) #sqs-cart-container .cart-subtotal-price{color:var(--gxink)}

/* ---- forms, for the contact page ------------------------------------------------------ */

html:not(.gx-takeover) .sqs-block-form input[type=text],
html:not(.gx-takeover) .sqs-block-form input[type=email],
html:not(.gx-takeover) .sqs-block-form input[type=number],
html:not(.gx-takeover) .sqs-block-form input[type=tel],
html:not(.gx-takeover) .sqs-block-form textarea,
html:not(.gx-takeover) .sqs-block-form select{
  background:var(--gxpanel)!important;color:var(--gxink)!important;
  border:1px solid var(--gxline)!important;border-radius:6px!important;
  font-family:var(--gxsans)!important}
html:not(.gx-takeover) .sqs-block-form input::placeholder,
html:not(.gx-takeover) .sqs-block-form textarea::placeholder{color:var(--gxmuted)}
html:not(.gx-takeover) .sqs-block-form input:focus,
html:not(.gx-takeover) .sqs-block-form textarea:focus{
  outline:2px solid var(--gxaccent);outline-offset:2px}
html:not(.gx-takeover) .sqs-block-form .title,
html:not(.gx-takeover) .sqs-block-form .description,
html:not(.gx-takeover) .sqs-block-form .caption{
  font:12px/1.45 var(--gxmono);text-transform:uppercase;letter-spacing:.045em;
  color:var(--gxmuted)}
html:not(.gx-takeover) .sqs-block-form .form-button-wrapper button,
html:not(.gx-takeover) .sqs-block-button-element--primary{
  border-radius:6px!important;background:var(--gxaccent)!important;color:#0d1016!important;
  padding:13px 20px!important;font:14px var(--gxmono)!important;
  text-transform:uppercase!important;letter-spacing:.045em!important;border:0!important}

/* ---- Squarespace's mini-cart ---------------------------------------------------------- */

/* The one section of this file that is NOT scoped to `html:not(.gx-takeover)`, and the
   scoping paragraph at the top says so. Add to cart on a takeover product page is
   Squarespace's own button, so its mini-cart dialog opens over the design pages as well as
   the stock ones, and a rule that cannot reach `.gx-takeover` would leave the design
   pages showing the orange. The surface is Squarespace's cart section theme — #e77816 as
   served — and the design has one accent. The accent is written literally because the
   token block above is scoped and therefore resolves to nothing here.

   `[data-section-theme]` is load-bearing, not decoration: Squarespace paints this element
   with `.commerce-cart-section-theme[data-section-theme="dark"]{background-color:hsla(var(
   --darkAccent-hsl),1)}`, which is two selector units and lands after this file, so a rule
   of equal weight loses on order. Measured on /shop/p/gx-03: without the attribute the
   dialog still computed rgb(231,120,22). No `!important` — specificity is enough. */
.commerce-mini-cart-dialog.commerce-cart-section-theme[data-section-theme]{background-color:#05a1ed}