/* WordPress and WooCommerce glue for the ported playbook CSS (site.css). */
*,*::before,*::after{box-sizing:border-box}
body.site{margin:0;background:var(--surface);color:var(--ink);font:15px/1.55 var(--sans);-webkit-font-smoothing:antialiased}
:where(.site) a{color:inherit;text-decoration:none}
:where(.site) img{max-width:100%;height:auto}
.screen-reader-text{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(1px,1px,1px,1px);white-space:nowrap}
.wp-site-blocks>*{margin-block:0}
.cth-main{display:block}
.ph{font-family:var(--mono);font-size:.82em;background:#F1E6CF;color:#6A4A12;padding:1px 6px;border-radius:3px;font-style:normal;white-space:nowrap}
.muted{color:var(--ink2)}.small{font-size:12.5px}
.s-h2{font:500 32px/1.1 var(--serif);margin:0}
.s-title .vsub{margin:6px 0 0;color:var(--ink2)}
/* ---------- layers: the one z-index scale for the site (Nov 6, 2026) ----------
   Inside a component use 1–9 only (badges, captions, the gallery counter). Page layers use these tokens:
   --z-dropdown  filter menus on collection pages (desktop)
   --z-sticky    phone add-to-cart bar
   --z-header    the site header with its mega menus and desktop search. It sits on header.cth-hdr itself:
                 view-transition-name (motion) makes that element a stacking context, so a z-index set
                 inside it can never lift the menus above the page.
   --z-sheet     collection filter sheet and its backdrop on phones
   --z-modal     mini cart, phone menu and phone search with their backdrops. Above the WordPress admin bar
                 (99999) so their close buttons are never hidden for a logged-in owner. site.js moves the
                 phone menu and phone search out of the header to <body> for the same reason.
   WooCommerce's lightbox (1500) places itself under the admin bar; its gallery button drops from 99 to 5. */
:root{--z-dropdown:10;--z-sticky:20;--z-header:100;--z-sheet:200;--z-modal:100010}
/* header */
header.cth-hdr{position:relative;z-index:var(--z-header)}
.cth-header{position:relative}
.s-head{padding:14px 36px 14px 48px}
.s-head .s-logo{height:52px;width:auto;max-width:none;display:block}
.s-nav{align-items:center}
.s-nav>a,.s-dd>button{white-space:nowrap;font:500 14px var(--sans);color:var(--ink);background:none;border:0;padding:0;cursor:pointer}
/* the playbook's .s-nav span{nowrap} is meant for the menu labels; here the mega menus sit inside the nav, and a theme line lists up to 5 verses */
.s-nav .mm-it span{white-space:normal}
.s-dd>button{position:relative;padding:18px 0;margin:-18px 0;background:none!important}
.s-dd>button::before{content:"";position:absolute;left:0;right:13px;bottom:13px;height:1.5px;background:var(--ink);transform:scaleX(0);transform-origin:left;transition:transform var(--t) var(--ease)}
.s-dd>button::after{content:"";display:inline-block;width:6px;height:6px;border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;transform:rotate(45deg) translate(-2px,-2px);margin-left:7px;transition:transform var(--t-fast) var(--ease)}
.s-dd .mm-wrap{position:absolute;left:0;right:0;top:100%;visibility:hidden;opacity:0;transform:translate3d(0,-6px,0);pointer-events:none;transition:opacity .2s var(--ease) .08s,transform .2s var(--ease) .08s,visibility 0s linear .28s}
.s-dd .mm-wrap::after{content:"";position:absolute;left:0;right:0;top:100%;height:100vh;background:rgba(29,39,51,.45);pointer-events:none}
.s-dd.is-open .mm-wrap{visibility:visible;opacity:1;transform:none;pointer-events:auto;transition:opacity .26s var(--ease-out) .03s,transform .3s var(--ease-out) .03s,visibility 0s}
.s-dd.is-open>button::before{transform:scaleX(1)}
.s-dd.is-open>button::after{transform:rotate(-135deg) translate(-1px,-1px)}
@media (hover:hover){.s-dd:hover .mm-wrap{visibility:visible;opacity:1;transform:none;pointer-events:auto;transition:opacity .26s var(--ease-out) .06s,transform .3s var(--ease-out) .06s,visibility 0s linear .06s}.s-dd:hover>button::before{transform:scaleX(1)}.s-dd:hover>button::after{transform:rotate(-135deg) translate(-1px,-1px)}}
.s-ic a{display:inline-flex;align-items:center;gap:4px;color:var(--ink)}
.s-srch{position:absolute;left:0;right:0;top:0;z-index:5}
.s-srch[hidden]{display:none}
.s-srch .sr::after{content:"";position:absolute;left:0;right:0;top:100%;height:100vh;background:rgba(29,39,51,.45);pointer-events:none}
.srch-f input.q{flex:1;min-width:0;border:0;outline:0;background:transparent;font:inherit;color:var(--ink);height:100%}
.srch-f input.q::-webkit-search-cancel-button{display:none}
.srch-x,.srch-close{border:0;font:inherit;color:var(--ink)}
.srch-close{background:none}
.sr-refs li a{display:flex;align-items:center;gap:10px;color:inherit}
.sr-foot .al{display:inline-flex;align-items:center}
/* home and shared bands */
.cth-hero .bx h1{font-weight:500}
.cth-trust{display:grid;grid-template-columns:repeat(4,1fr);border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:18px 48px;gap:18px;font-size:13px}
.cth-trust .ic{width:22px;height:22px;margin-right:8px;vertical-align:-6px}
.cth-hoodie-row{display:grid;grid-template-columns:1.1fr 1fr 1fr 1fr;gap:18px;align-items:stretch}
.cth-gift-cards{display:grid;grid-template-columns:repeat(5,1fr);gap:12px}
.cth-gift-cards .card{display:block;color:var(--ink)}
.cth-faq{display:grid;grid-template-columns:1fr 1.4fr;gap:40px}
.cth-faq a{text-decoration:underline}
.acc>details{border-bottom:1px solid var(--line)}
.acc summary{display:flex;justify-content:space-between;padding:13px 0;font-weight:500;cursor:pointer;list-style:none}
.acc summary::-webkit-details-marker{display:none}
.acc summary::after{content:"";flex:none;width:8px;height:8px;margin:3px 6px 0 12px;border-right:1.6px solid var(--ink2);border-bottom:1.6px solid var(--ink2);transform:rotate(45deg);transition:transform var(--t-fast) var(--ease)}
.acc details[open] summary::after{transform:rotate(-135deg)}
.acc details p{margin:0 0 14px;color:var(--ink2)}
.vcard,.vtheme{display:block;color:var(--ink)}
/* archives */
.cth-arch-head{padding-top:40px;padding-bottom:34px}
.cth-arch-head .cth-desc p,.cth-arch-banner .cth-desc p{margin:0;max-width:560px}
.cth-chips{display:flex;gap:8px;flex-wrap:wrap;padding-top:18px;padding-bottom:0}
.chip{display:inline-flex;align-items:center;min-height:34px;padding:0 14px;border:1px solid var(--line-3);border-radius:17px;font:500 13px var(--sans);color:var(--ink);background:var(--surface)}
.chip.on{background:var(--ink);border-color:var(--ink);color:var(--on-ink)}
.cth-toolbar{display:flex;justify-content:space-between;align-items:center;margin-bottom:16px}
.cth-toolbar p{margin:0}
.cth-toolbar select{font:inherit;padding:6px 8px;border:1px solid var(--line-3);border-radius:3px;background:var(--surface);color:var(--ink)}
.cth-toolbar form{margin:0}
.cth-pages{margin-top:26px;display:flex;gap:8px}
.cth-pages .page-numbers{display:inline-grid;place-items:center;min-width:36px;height:36px;border:1px solid var(--line);border-radius:3px}
.cth-pages .current{background:var(--ink);color:var(--on-ink);border-color:var(--ink)}
.pcard{display:block;color:var(--ink)}
.pcard .pp .woocommerce-Price-amount{font-weight:500}
/* product page (redone Nov 9, 2026, playbook Page 03): thumbnails beside a 4:5 photo that fits the window, buy box, verse band.
   WooCommerce's woocommerce.css floats the gallery and its thumbnails (selectors like .woocommerce div.product div.images ...),
   so the gallery rules below need !important where they meet those. */
.cth-pdp-top{padding-top:18px;padding-bottom:56px}
.cth-pdp .woocommerce-breadcrumb{font-size:12.5px;color:var(--ink2);margin:0 0 18px}
.cth-pdp .woocommerce-breadcrumb a{color:var(--ink2)}
/* the photo column: a 4:5 photo as tall as the window allows under the header (400–640 px wide), never more than 56 % */
.cth-pdp-grid{--pdp-main:clamp(400px,calc((100vh - 220px) * .8),640px);display:grid;grid-template-columns:minmax(0,min(56%,calc(88px + var(--pdp-main)))) minmax(0,1fr);gap:56px;align-items:start}
.cth-pdp-grid>*{min-width:0;margin:0}
.cth-gal{position:sticky;top:calc(var(--wp-admin--admin-bar--height,0px) + 20px)}
.cth-pdp .woocommerce-product-gallery,.cth-pdp .wp-block-woocommerce-product-image-gallery{width:100%!important;float:none!important;max-width:none;margin:0!important}
.cth-gal .woocommerce-product-gallery{display:grid;grid-template-columns:76px minmax(0,1fr);gap:12px;position:relative}
.cth-gal .woocommerce-product-gallery>.flex-viewport,.cth-gal .woocommerce-product-gallery>.woocommerce-product-gallery__wrapper{grid-column:2;grid-row:1;border-radius:3px;background:var(--photo)}
/* before flexslider starts only the first photo shows, so the column does not jump */
.cth-gal .woocommerce-product-gallery>.woocommerce-product-gallery__wrapper>.woocommerce-product-gallery__image:nth-child(n+2){display:none}
.cth-gal .woocommerce-product-gallery__image img{width:100%;height:auto;aspect-ratio:4/5;object-fit:cover}
/* contain:size keeps the 13 thumbnails out of the row height: the column is as tall as the photo and scrolls */
.cth-gal ol.flex-control-thumbs{grid-column:1;grid-row:1;display:flex;flex-direction:column;gap:10px;margin:0!important;padding:0!important;list-style:none;overflow:hidden auto!important;contain:size;scrollbar-width:none;overscroll-behavior:contain}
.cth-gal ol.flex-control-thumbs::-webkit-scrollbar{display:none}
.cth-gal ol.flex-control-thumbs li{flex:none;width:100%!important;float:none!important;margin:0!important}
.cth-gal ol.flex-control-thumbs li img{display:block;width:100%;height:auto;aspect-ratio:4/5;object-fit:cover;border-radius:3px;background:var(--photo);opacity:.6!important;transition:opacity var(--t-fast) var(--ease)}
.cth-gal ol.flex-control-thumbs li img.flex-active{opacity:1!important;outline:2px solid var(--ink);outline-offset:-2px}
@media (hover:hover){.cth-gal ol.flex-control-thumbs li img:hover{opacity:1!important}}
/* WooCommerce gives the gallery's zoom button z-index 99, which drew it over the sticky phone header and the open phone menu; it only has to clear the photos */
.woocommerce-product-gallery__trigger{z-index:5!important}
/* buy box */
.cth-pdp-kick{margin:2px 0 10px}
.cth-pdp-title{font:500 clamp(26px,2.3vw,34px)/1.12 var(--serif)!important;margin:0 0 12px!important;text-wrap:balance}
.cth-pricebox{margin:0 0 24px}
.cth-pdp .cth-pdp-price{margin:0;font:500 22px/1.2 var(--sans);color:var(--ink)}
.cth-pdp .cth-buy .cth-pdp-price span.price{color:inherit;font-size:inherit}
.cth-pricenote{margin:6px 0 0;font-size:12.5px;color:var(--ink2)}
.cth-optl,.cth-buy table.variations label{display:block;margin:0;font:600 13.5px/1.4 var(--sans);letter-spacing:0;text-transform:none;color:var(--ink)}
.cth-optl span,.cth-chosen{font-weight:400;color:var(--ink2)}
.cth-style{margin:0 0 24px}
.cth-style .cth-optl{margin:0 0 10px}
.cth-styles{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.cth-sty{display:flex;align-items:center;gap:10px;min-width:0;padding:6px 10px 6px 6px;border:1px solid var(--line-2);border-radius:4px;background:var(--surface);color:var(--ink);transition:border-color var(--t-fast) var(--ease)}
.cth-sty img{flex:none;width:36px;height:45px;object-fit:cover;border-radius:2px;background:var(--photo)}
.cth-sty span{display:flex;flex-direction:column;min-width:0;line-height:1.3}
.cth-sty b{font:600 13.5px var(--sans);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cth-sty small{font-size:12px;color:var(--ink2);white-space:nowrap}
.cth-sty.on{border-color:var(--ink);box-shadow:inset 0 0 0 1px var(--ink)}
@media (hover:hover){.cth-sty:not(.on):hover{border-color:var(--ink)}}
.cth-sty:focus-visible{outline:2px solid var(--olive);outline-offset:3px}
/* a narrow buy box (phones, and the right column on a 1024 px screen) has about 110 px per card: photo above the name,
   or "Crewneck" and "from $42.95" are cut off */
.cth-style{container-type:inline-size}
@container (max-width:430px){
 .cth-sty{flex-direction:column;gap:6px;padding:8px 4px 9px;text-align:center}
 .cth-sty span{align-items:center;max-width:100%}
 .cth-sty img{width:40px;height:50px}
}
/* WooCommerce's inline style for the Add to Cart Form block makes the form and its button row a grid (min-content auto auto) */
.cth-buy form.cart{display:block!important;margin:0!important}
.cth-buy table.variations{display:block;border:0;margin:0!important;width:100%}
.cth-buy table.variations tbody,.cth-buy table.variations tr{display:block}
.cth-buy table.variations tr th,.cth-buy table.variations tr td{display:block;padding:0;text-align:left;border:0;line-height:1.4}
.cth-buy table.variations tr th{display:flex;align-items:baseline;justify-content:space-between;gap:12px;margin:0 0 10px}
.cth-buy table.variations tr td select{width:100%;height:44px;line-height:normal;font-size:14px;margin:6px 0 14px;padding:0 40px 0 12px;border:1px solid var(--line-3);border-radius:3px;background-color:var(--surface);color:var(--ink)}
/* Clear: the color is always chosen, and a chosen size is cleared by pressing it again */
.cth-buy .reset_variations{display:none!important}
.cth-sglink{display:inline-flex;align-items:center;gap:6px;font:500 13px var(--sans)}
.cth-sglink .ic{width:17px;height:17px}
/* size pills and color swatches drawn over the WooCommerce selects (site.js) */
.cth-hide{position:absolute!important;width:1px!important;height:1px!important;min-width:0!important;margin:0!important;padding:0!important;opacity:0;pointer-events:none}
.cth-buy td.value{position:relative}
.cth-sws{display:flex;flex-wrap:wrap;gap:12px;margin:0 0 22px;padding:2px 0 0 2px}
.cth-sws .sw{width:34px;height:34px;padding:0;cursor:pointer}
/* colors of the designs copied from Hakhatu (median of their photos, tools/import-hakhatu.py); cards and product pages use each product's own shade */
.g-beige{--g:#ECDEC6;--pc:#3A2F23}.g-blue{--g:#1C5DA3;--pc:#F6F1E6}.g-green{--g:#2D5E35;--pc:#F3EFE4}.g-pink{--g:#FBC0D2;--pc:#4A2A2A}
.cth-pills{display:flex;flex-wrap:wrap;gap:8px;margin:0}
.cth-pills .pill{min-width:58px;height:44px;padding:0 12px;font:500 14px var(--sans);color:var(--ink);cursor:pointer}
.cth-sws .sw:disabled,.cth-pills .pill:disabled{opacity:.35;cursor:not-allowed}
.cth-pills .pill:disabled{text-decoration:line-through}
.cth-sws .sw:focus-visible,.cth-pills .pill:focus-visible{outline:2px solid var(--olive);outline-offset:3px}
@media (hover:hover){.cth-pills .pill:not(:disabled):hover{border-color:var(--ink)}.cth-sws .sw:not(:disabled):hover{box-shadow:0 0 0 2px var(--surface),0 0 0 3.5px var(--line-3)}}
/* Add to cart before a size is chosen: the size row says so (site.js), instead of WooCommerce's browser alert */
.cth-pills.is-needed .pill:not(:disabled){border-color:var(--clay)}
.cth-need{margin:10px 0 0;font:600 13px var(--sans);color:var(--clay)}
.cth-need[hidden]{display:none}
.cth-buy .woocommerce-variation-price,.cth-buy .woocommerce-variation-description:empty{display:none}
.cth-buy .woocommerce-variation-availability p{margin:12px 0 0}
.cth-buy .woocommerce-variation-add-to-cart{display:flex!important;gap:10px;margin-top:22px}
.cth-buy div.quantity{display:flex;align-items:stretch;flex:none;width:124px;height:50px;margin:0!important;float:none!important;border:1px solid var(--line-3);border-radius:3px;background:var(--surface)}
.cth-buy div.quantity .qty{flex:1;min-width:0;width:auto!important;height:auto;margin:0!important;padding:0;border:0;background:transparent;text-align:center;font:500 15px var(--sans);color:var(--ink);-moz-appearance:textfield;appearance:textfield}
.cth-buy div.quantity .qty::-webkit-inner-spin-button,.cth-buy div.quantity .qty::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}
.cth-qb{flex:none;width:38px;padding:0;border:0;background:none;font:400 20px/1 var(--sans);color:var(--ink);cursor:pointer}
.cth-qb:disabled{color:var(--line-3);cursor:default}
.cth-qb:focus-visible{outline:2px solid var(--olive);outline-offset:-3px}
@media (hover:hover){.cth-qb:not(:disabled):hover{color:var(--olive)}}
.cth-buy .single_add_to_cart_button,.wc-block-components-button:not(.is-link),.wp-element-button{min-height:46px;padding:0 26px!important;border-radius:3px!important;background:var(--ink)!important;color:var(--on-ink)!important;border:1px solid var(--ink)!important;font:600 14px var(--sans)!important;cursor:pointer}
.cth-pdp .cth-buy .single_add_to_cart_button{flex:1;min-height:50px;font-size:15px!important;letter-spacing:.02em;transition:background-color var(--t-fast) var(--ease),border-color var(--t-fast) var(--ease)}
/* WooCommerce marks the button .disabled until a size is chosen; it stays dark and explains what is missing when pressed */
.cth-pdp .cth-buy .single_add_to_cart_button.disabled{opacity:1;cursor:pointer}
@media (hover:hover){.cth-pdp .cth-buy .single_add_to_cart_button:not(.disabled):hover{background:var(--clay)!important;border-color:var(--clay)!important}}
/* delivery, promises, details */
.cth-eta{margin:18px 0 0;padding:14px 16px 12px;background:var(--bg);border-radius:4px;font-size:13.5px}
.cth-eta .ic{width:18px;height:18px;flex:none}
.cth-eta-h{display:flex;align-items:center;gap:8px;margin:0 0 8px;color:var(--ink2)}
.cth-eta-h b{color:var(--ink)}
.cth-eta dl{margin:0}
.cth-eta dl>div{display:flex;justify-content:space-between;gap:12px;padding:7px 0;border-top:1px solid var(--line)}
.cth-eta dt{font-weight:600}
.cth-eta dt span{font-weight:400;color:var(--ink2)}
.cth-eta dd{margin:0;font-weight:600;white-space:nowrap}
.cth-eta-f{margin:6px 0 0;padding-top:8px;border-top:1px solid var(--line);font-size:12.5px;color:var(--ink2)}
.cth-promise{display:grid;gap:9px;list-style:none;margin:18px 0 0;padding:0;font-size:13.5px}
.cth-promise li{display:flex;gap:10px;align-items:flex-start}
.cth-promise .ic{width:19px;height:19px;flex:none;color:var(--olive)}
.cth-pdp-acc{margin:26px 0 0}
.cth-pdp-acc summary{padding:15px 0;font:600 14.5px var(--sans)}
.cth-acc-b{max-width:620px;padding:0 0 16px;font-size:14px;color:var(--ink2)}
.cth-acc-b p{margin:0 0 10px}
.cth-acc-b ul{margin:0;padding:0 0 0 18px}
.cth-acc-b li{margin:0 0 4px}
/* the verse and the story of the design */
.cth-story{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:56px;align-items:start;padding-top:56px;padding-bottom:56px}
.cth-story blockquote{margin:12px 0 16px;padding:0;border:0}
.cth-story blockquote p{margin:0 0 12px;font:italic 500 clamp(22px,2vw,30px)/1.35 var(--serif);color:var(--ink);text-wrap:pretty}
.cth-story cite{font:600 11px var(--sans);letter-spacing:.16em;text-transform:uppercase;color:var(--olive);font-style:normal}
.cth-story .al{font-weight:600;font-size:13.5px;color:var(--ink)}
.cth-story-d>p:not(.s-kick){max-width:600px;margin:12px 0 0;font-size:15.5px;line-height:1.65;color:var(--ink2)}
.cth-related{padding-top:48px}
/* size guide dialog (site.js copies this type's chart from the Size guide page); <dialog> sits in the top layer, above every z-index */
.cth-sgdlg{width:min(720px,calc(100vw - 32px));max-height:calc(100vh - 48px);padding:0;border:0;border-radius:6px;background:var(--surface);color:var(--ink);box-shadow:0 24px 60px -20px rgba(29,39,51,.45);overscroll-behavior:contain}
.cth-sgdlg::backdrop{background:rgba(29,39,51,.45)}
.cth-sgdlg .sg-head{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:16px 16px 16px 24px;border-bottom:1px solid var(--line)}
.cth-sgdlg h2{margin:0;font:500 24px/1.2 var(--serif)}
.cth-sgdlg .sg-x{display:grid;place-items:center;width:40px;height:40px;padding:0;border:0;background:none;color:var(--ink);cursor:pointer}
.cth-sgdlg .sg-x .ic{width:20px;height:20px}
.cth-sgdlg .sg-x:focus-visible{outline:2px solid var(--olive);outline-offset:-2px}
.cth-sgdlg .sg-body{padding:18px 24px 24px}
.cth-sgdlg .t{max-width:none;margin:0}
.cth-sgdlg .sg-k{margin:20px 0 6px;font:600 11px var(--sans);letter-spacing:.16em;text-transform:uppercase;color:var(--olive)}
.cth-sgdlg .sg-steps{margin:0 0 16px;padding-left:18px;font-size:14px;color:var(--ink2)}
.cth-sgdlg .sg-steps li{margin:0 0 4px}
.cth-sgdlg .al{font-weight:600;font-size:13.5px;color:var(--ink)}
@media (prefers-reduced-motion:no-preference){.cth-sgdlg[open]{animation:cth-rise .3s var(--ease-out)}}
@media (max-width:1100px){.cth-pdp-grid,.cth-story{gap:36px}}
/* very wide windows: the product area stops growing so the buy box keeps a readable width */
/* PDP uses unified 1320px container below */
.cth-chosen{text-transform:none;letter-spacing:0}
/* pages, cart, checkout */
.cth-content{padding:34px 48px 60px}
.cth-content>*{max-width:780px}
.cth-wc .cth-content>*{max-width:1180px}
.woocommerce-store-notice,p.demo_store{position:static!important;box-sizing:border-box;width:auto!important;margin:0;padding:8px 40px;background:var(--clay)!important;color:#fff!important;text-align:center;font-size:13px}
.woocommerce-store-notice a{color:#fff;text-decoration:underline}
/* footer */
.s-foot-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr 1.3fr;gap:28px}
.s-foot a{color:var(--on-ink-2)}
.s-foot li{padding:3px 0}
.s-foot-bar{display:flex;justify-content:space-between;gap:16px;border-top:1px solid #3A4553;margin-top:30px;padding-top:16px;font-size:12px}
.cth-foot-contact{margin:14px 0 0;max-width:260px;line-height:1.6}
.cth-foot-contact a{display:inline-block;padding:2px 0}
@media (hover:hover){.cth-foot-contact a:hover{color:#fff}}
.nl-in{border:0;background:transparent;font:inherit;color:#fff;outline:0}
.nl-in::placeholder{color:#9AA3AD}
.nl-form .s-btn{border-radius:0;min-height:42px}
.nl-msg{margin:10px 0 0}
/* collection filters (Page 02 block 03) */
.cth-filters{padding-top:14px;padding-bottom:14px;border-bottom:1px solid var(--line)}
.cth-fbar{display:flex;flex-wrap:wrap;gap:10px;align-items:center}
.cth-fl{position:relative}
.cth-fl>summary{list-style:none;cursor:pointer;gap:6px}
.cth-fl>summary::-webkit-details-marker{display:none}
.cth-fl>summary::after{content:"";width:6px;height:6px;margin:0 0 3px 6px;border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;transform:rotate(45deg)}
.cth-fl[open]>summary{border-color:var(--ink)}
.cth-fl[open]>summary::after{transform:rotate(-135deg);margin:3px 0 0 6px}
.chip.has{border-color:var(--ink);font-weight:600}
.cth-fl-p{position:absolute;top:calc(100% + 8px);left:0;z-index:var(--z-dropdown);min-width:230px;max-height:340px;overflow:auto;padding:10px;background:var(--surface);border:1px solid var(--line);border-radius:6px;box-shadow:0 18px 30px -18px rgba(29,39,51,.5)}
.cth-fl-p.k-pill{display:grid;grid-template-columns:repeat(4,1fr);gap:6px;min-width:250px}
.cth-fl-p .pill{min-width:0;color:var(--ink)}
.cth-fo{display:flex;align-items:center;gap:10px;padding:7px 6px;border-radius:4px;font-size:13.5px;color:var(--ink)}
.cth-fo .muted{margin-left:auto;font-size:12px}
.cth-fo .sw{width:18px;height:18px}
.cth-ck{width:16px;height:16px;border:1.5px solid var(--line-3);border-radius:3px;flex:none}
.cth-fo.on .cth-ck{background:var(--ink) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4 8.5l2.5 2.5L12 5.5' fill='none' stroke='%23fff' stroke-width='2'/%3E%3C/svg%3E") center/12px no-repeat;border-color:var(--ink)}
.cth-fo.on{font-weight:600}
@media (hover:hover){.cth-fo:hover{background:var(--bg)}}
.chip.on-f{border-color:var(--ink);gap:6px}
.cth-clear{text-decoration:underline;color:var(--ink2)}
.cth-fright{margin-left:auto;display:flex;align-items:center;gap:12px;color:var(--ink2)}
.cth-fright .woocommerce-ordering{margin:0}
.cth-fright select{font:inherit;padding:6px 8px;border:1px solid var(--line-3);border-radius:3px;background:var(--surface);color:var(--ink)}
.cth-more{text-align:center;margin-top:26px}
.cth-more .s-btn{margin-top:10px}
.cth-seo{display:grid;grid-template-columns:1fr 1fr;gap:40px}
.cth-seo p{max-width:560px}
.cth-h4{font:600 13px var(--sans);letter-spacing:.12em;text-transform:uppercase;margin:0 0 10px;color:var(--ink)}
.cth-chips-row{display:flex;flex-wrap:wrap;gap:8px}
/* cart (Page 04) */
.cth-shipbar{position:relative;max-width:1180px;margin:0 0 18px;padding:14px 16px 14px 48px;background:var(--bg);border-radius:4px;font-size:13.5px}
.cth-shipbar>.ic{position:absolute;left:16px;top:14px;width:22px;height:22px}
.cth-shipbar-t{height:8px;margin:8px 0 6px;background:var(--bar);border-radius:4px;overflow:hidden}
.cth-shipbar-t>div{height:100%;background:var(--olive);border-radius:4px;transition:width .3s var(--ease)}
.cth-cartnote{position:relative;max-width:1180px;margin:18px 0 0;padding:12px 14px 12px 48px;border:1px dashed var(--dash);border-radius:4px;font-size:13.5px}
.cth-cartnote>.ic{position:absolute;left:16px;top:12px;width:20px;height:20px}
.cth-cartmore{max-width:1180px;margin-top:26px}
.cth-cartmore .s-grid3{max-width:640px}
/* product page extras */
.lk{text-decoration:underline;text-underline-offset:3px}
.cth-gcount{display:none}
/* wide content pages (Pages 05–07) */
.cth-wide .wp-block-post-content>*,.cth-wide .entry-content>*{max-width:none;margin:0}
.cth-pagehero h1{font-weight:500}
.cth-3col{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.cth-3col p{margin:6px 0 0}
.cth-4col{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
.cth-2col{display:grid;grid-template-columns:1fr 1fr;gap:32px}
.cth-2col ul{padding-left:18px}
.cth-help-cards{display:grid;grid-template-columns:repeat(5,1fr);gap:12px;padding-top:22px;padding-bottom:22px}
.cth-help-cards .card{display:flex;flex-direction:column;gap:10px;padding:16px;color:var(--ink)}
.cth-help-cards .ic{width:24px;height:24px}
.cth-sg{padding-top:16px;padding-bottom:8px}
.cth-tablewrap{overflow-x:auto}
.t{width:100%;border-collapse:collapse;font-size:13.5px}
.cth-glance .t{max-width:640px;margin-top:10px}
.cth-faqg{padding-top:22px;padding-bottom:10px}.cth-faqg .acc{max-width:780px}
.cth-legal{max-width:760px}
.cth-legal .cth-h4{margin:26px 0 8px}
.cth-legal .cth-h4:first-child{margin-top:0}
.cth-legal p,.cth-legal ul{margin:0 0 10px}
.cth-legal ul{padding-left:20px}
.cth-glance .cth-tablewrap .t{min-width:520px}
.cth-track .woocommerce-form-track-order,.cth-track form.track_order{max-width:520px}
.cth-track form.track_order p{margin:0 0 12px}
.cth-track form.track_order label{display:block;margin-bottom:6px;font:600 12px var(--sans);letter-spacing:.12em;text-transform:uppercase;color:var(--olive)}
.cth-track form.track_order input.input-text,.cth-form input,.cth-form select,.cth-form textarea{width:100%;min-height:46px;padding:10px 14px;border:1px solid var(--line-2);border-radius:3px;background:var(--surface);font:inherit;color:var(--ink)}
.cth-track form.track_order .form-row-first,.cth-track form.track_order .form-row-last{width:100%;float:none}
.cth-track form.track_order button{min-height:46px;padding:0 26px;border:1px solid var(--ink);border-radius:3px;background:var(--ink);color:var(--on-ink);font:600 14px var(--sans);cursor:pointer}
.cth-form{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.cth-form label span{display:block;margin-bottom:4px;font-size:12px;color:var(--ink2)}
.cth-form .full{grid-column:1/-1}
.cth-form textarea{min-height:90px}
.cth-form .s-btn{grid-column:1/-1;justify-self:start;cursor:pointer}
.cth-form .form-msg{grid-column:1/-1;margin:0}
/* journal article (Page 08) */
.cth-posthead{padding-top:40px}
.cth-posthead h1{font-size:42px;line-height:1.1;margin:10px 0}
.cth-postimg{height:300px;margin-top:16px}
.cth-postbody{display:grid;grid-template-columns:1.5fr 1fr;gap:40px;align-items:start}
.cth-postcopy>*{max-width:680px}
.cth-postverse{font-style:italic;font-size:24px;line-height:1.35;margin:0 0 14px}
.cth-postverse .small{font-style:normal;letter-spacing:.14em;color:var(--olive)}
.cth-wear-g{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-top:10px}
.cth-wear .small{margin:8px 0 0}
.cth-blog .wp-block-post-title a{color:var(--ink)}
.cth-postcopy p,.cth-postcopy li{font-size:16px;line-height:1.72}
.cth-postcopy h2{font:500 27px/1.2 var(--serif);margin:34px 0 10px}
.cth-postcopy blockquote{margin:20px 0;padding:14px 20px;border-left:3px solid var(--clay);background:var(--bg)}
.cth-postcopy blockquote p{margin:0 0 6px;font:italic 500 19px/1.5 var(--serif)}
.cth-postcopy blockquote cite{font:600 11px var(--sans);letter-spacing:.14em;text-transform:uppercase;color:var(--olive);font-style:normal}
.cth-postcopy ul{padding-left:20px}.cth-postcopy li{margin:6px 0}
.cth-postcopy a,.cth-seo p a,.cth-desc a{text-decoration:underline;text-underline-offset:3px}
.cth-wear{position:sticky;top:20px}
.cth-seo{grid-template-columns:1.5fr 1fr}.cth-seo p{max-width:680px;line-height:1.7}
.cth-blog .wp-block-post-template{gap:28px}
.cth-blog .wp-block-post-featured-image img{border-radius:3px;background:var(--photo)}
.cth-blog .cth-post-t{font:500 22px/1.2 var(--serif);margin:12px 0 6px}

/* mini cart sidebar */
/* scroll lock while a modal layer is open: only on <html>. Hiding overflow on body as well turns body into
   the scroll container, and the phone header stops sticking (it jumped off screen behind the cart).
   --cth-sbw (site.js) keeps the page from shifting where a classic scrollbar disappears. */
html.cth-lock{overflow:hidden;padding-right:var(--cth-sbw,0px)}
.mc-backdrop{position:fixed;inset:0;z-index:var(--z-modal);background:rgba(29,39,51,.45)}
.mc-backdrop[hidden],.mc[hidden]{display:none}
.mc{position:fixed;top:0;right:0;bottom:0;z-index:calc(var(--z-modal) + 1);display:flex;flex-direction:column;width:min(420px,100%);background:var(--surface);box-shadow:-24px 0 40px -24px rgba(29,39,51,.55)}
.mc-head{display:flex;justify-content:space-between;align-items:center;padding:16px 20px;border-bottom:1px solid var(--line)}
.mc-title{margin:0;font:500 25px/1.1 var(--serif)}
.mc-title .mc-n{font:500 15px var(--sans);color:var(--ink2)}
.mc .m-btn{position:relative;display:inline-grid;place-items:center;width:40px;height:40px;margin:-8px;padding:0;border:0;background:none;color:var(--ink);cursor:pointer}
.mc .m-btn .ic{width:22px;height:22px}
.mc-msg:empty{display:none}
.mc-msg{margin:12px 20px 0;padding:10px 12px;border-radius:4px;background:var(--bg);font-size:13px}
.mc-msg.err{background:#F6E3DA;color:#7A2E14}
.mc-body{flex:1;overflow-y:auto;padding:16px 20px}
.mc .cth-shipbar{margin:0 0 6px}
.mc-list{list-style:none;margin:0;padding:0}
.mc-it{display:grid;grid-template-columns:76px minmax(0,1fr);gap:14px;padding:14px 0;border-bottom:1px solid var(--line)}
.mc-img{display:block;aspect-ratio:4/5;overflow:hidden;border-radius:3px;background:var(--photo)}
.mc-img img{display:block;width:100%;height:100%;object-fit:cover}
.mc-name{display:block;font-weight:600;font-size:14px;line-height:1.35;color:var(--ink)}
.mc-info .small{display:block;margin-top:2px}
.mc-row{display:flex;justify-content:space-between;align-items:center;margin-top:10px}
.mc-qty{display:inline-flex;align-items:center;height:34px;border:1px solid var(--line-2);border-radius:3px}
.mc-qty button{width:32px;height:100%;border:0;background:none;font:500 16px var(--sans);color:var(--ink);cursor:pointer}
.mc-qty span{min-width:22px;text-align:center;font-size:13.5px}
.mc-price{font-size:14px}
.mc-rm{margin-top:8px;padding:0;border:0;background:none;font:inherit;font-size:12.5px;color:var(--ink2);text-decoration:underline;cursor:pointer}
.mc-foot{display:grid;gap:10px;padding:16px 20px 20px;border-top:1px solid var(--line);background:var(--surface)}
.mc-foot[hidden]{display:none}
.mc-foot p{margin:0}
.mc-sub{display:flex;justify-content:space-between;font-size:15px}
.mc-note{position:relative;padding-left:28px}.mc-note .ic{position:absolute;left:0;top:1px;width:18px;height:18px}
.mc-empty{padding:48px 0;text-align:center}
.mc.busy .mc-body{opacity:.55;pointer-events:none}
.single_add_to_cart_button.loading{opacity:.6}
@media (hover:hover){.mc-qty button:hover,.mc-rm:hover{color:var(--olive)}}

/* ---------- motion (Nov 6, 2026): reveals, panels, drawers, page transitions. Everything is off with prefers-reduced-motion. ---------- */
:root{--ease-out:cubic-bezier(.16,1,.3,1);--ease-in:cubic-bezier(.5,0,.75,0);--t-slow:680ms}
html{scroll-behavior:smooth}
/* scroll reveal: an inline head script sets .cth-motion; site.js adds .is-in as blocks enter the viewport, then .rv-done */
.cth-motion .cth-main :is(.s-title,.s-grid3>*,.s-grid4>*,.vthemes>*,.cth-trust>*,.cth-gift-cards>*,.cth-hoodie-row>*,.cth-band>*,.cth-faq>*,.cth-seo>*,.cth-3col>*,.cth-4col>*,.cth-help-cards>*,.cth-2col>*,.cth-faqg,.cth-sg,.cth-glance,.wp-block-post-template>li,.cth-cartmore,.cth-wear,.cth-postcopy>h2,.cth-postcopy>blockquote,.vpanel):not(.is-in){opacity:0;transform:translate3d(0,24px,0)}
.cth-motion .cth-main :is(.s-title,.s-grid3>*,.s-grid4>*,.vthemes>*,.cth-trust>*,.cth-gift-cards>*,.cth-hoodie-row>*,.cth-band>*,.cth-faq>*,.cth-seo>*,.cth-3col>*,.cth-4col>*,.cth-help-cards>*,.cth-2col>*,.cth-faqg,.cth-sg,.cth-glance,.wp-block-post-template>li,.cth-cartmore,.cth-wear,.cth-postcopy>h2,.cth-postcopy>blockquote,.vpanel):not(.rv-done){transition:opacity var(--t-slow) var(--ease-out),transform var(--t-slow) var(--ease-out);transition-delay:calc(var(--i,0) * 75ms)}
.cth-motion.cth-rv-all .cth-main :is(.s-title,.s-grid3>*,.s-grid4>*,.vthemes>*,.cth-trust>*,.cth-gift-cards>*,.cth-hoodie-row>*,.cth-band>*,.cth-faq>*,.cth-seo>*,.cth-3col>*,.cth-4col>*,.cth-help-cards>*,.cth-2col>*,.cth-faqg,.cth-sg,.cth-glance,.wp-block-post-template>li,.cth-cartmore,.cth-wear,.cth-postcopy>h2,.cth-postcopy>blockquote,.vpanel){opacity:1;transform:none}
/* mega menu columns arrive one after another */
.s-dd .mm>*{opacity:0;transform:translate3d(0,8px,0);transition:opacity .3s var(--ease-out),transform .36s var(--ease-out)}
.s-dd.is-open .mm>*{opacity:1;transform:none}
.s-dd .mm>*:nth-child(2){transition-delay:.04s}.s-dd .mm>*:nth-child(3){transition-delay:.08s}.s-dd .mm>*:nth-child(4){transition-delay:.12s}
@media (hover:hover){.s-dd:hover .mm>*{opacity:1;transform:none}}
@media (prefers-reduced-motion:no-preference){
 .cth-hero>img,.cth-arch-banner>img,.cth-pagehero>img{animation:cth-zoom 1.8s var(--ease-out) both}
 .cth-hero .bx>*,.cth-arch-banner .bx>*,.cth-pagehero .bx>*,.cth-arch-head>*,.cth-posthead>*{animation:cth-rise .8s var(--ease-out) both}
 :is(.cth-hero,.cth-arch-banner,.cth-pagehero) .bx>*:nth-child(2),:is(.cth-arch-head,.cth-posthead)>*:nth-child(2){animation-delay:.07s}
 :is(.cth-hero,.cth-arch-banner,.cth-pagehero) .bx>*:nth-child(3),:is(.cth-arch-head,.cth-posthead)>*:nth-child(3){animation-delay:.14s}
 :is(.cth-hero,.cth-arch-banner,.cth-pagehero) .bx>*:nth-child(4),:is(.cth-arch-head,.cth-posthead)>*:nth-child(4){animation-delay:.21s}
 .mc:not([hidden]){animation:cth-in-r .42s var(--ease-out)}
 .mc.is-leaving{animation:cth-out-r .24s var(--ease-in) forwards}
 .mc-backdrop:not([hidden]){animation:cth-fade .32s ease both}
 .mc-backdrop.is-leaving{animation:cth-fade-out .24s ease forwards}
 .mc-it{animation:cth-rise .45s var(--ease-out) both}
 .mc-it:nth-child(2){animation-delay:.05s}.mc-it:nth-child(3){animation-delay:.1s}.mc-it:nth-child(n+4){animation-delay:.15s}
 .m-drawer:not([hidden]){animation:cth-in-l .42s var(--ease-out)}
 .m-drawer.is-leaving{animation:cth-out-l .24s var(--ease-in) forwards}
 .m-srch:not([hidden]),.s-srch:not([hidden]) .srch-head{animation:cth-drop .3s var(--ease-out)}
 .s-srch:not([hidden]) .sr{animation:cth-drop .38s var(--ease-out) .04s both}
 .m-srch.is-leaving,.s-srch.is-leaving{animation:cth-fade-out .18s ease forwards}
 .cth-fl[open]>.cth-fl-p{animation:cth-pop .22s var(--ease-out)}
 .cth-sticky{animation:cth-up .5s var(--ease-out) .3s both}
 .s-count.bump{display:inline-block;animation:cth-bump .5s var(--ease-out)}
 .mc-msg:not(:empty){animation:cth-drop .3s var(--ease-out)}
 .vtrack{scroll-behavior:smooth}
}
/* accordions open and close by height where the browser supports it */
@supports (interpolate-size:allow-keywords){
 :root{interpolate-size:allow-keywords}
 @media (prefers-reduced-motion:no-preference){
  .acc details::details-content{height:0;overflow:clip;transition:height .32s var(--ease-out),content-visibility .32s allow-discrete}
  .acc details[open]::details-content{height:auto}
 }
}
@keyframes cth-zoom{from{transform:scale(1.06)}}
@keyframes cth-rise{from{opacity:0;transform:translate3d(0,16px,0)}}
@keyframes cth-in-r{from{transform:translate3d(100%,0,0)}}
@keyframes cth-out-r{to{transform:translate3d(100%,0,0)}}
@keyframes cth-in-l{from{transform:translate3d(-100%,0,0)}}
@keyframes cth-out-l{to{transform:translate3d(-100%,0,0)}}
@keyframes cth-fade{from{opacity:0}}
@keyframes cth-fade-out{to{opacity:0}}
@keyframes cth-drop{from{opacity:0;transform:translate3d(0,-10px,0)}}
@keyframes cth-pop{from{opacity:0;transform:translate3d(0,-6px,0) scale(.98)}}
@keyframes cth-up{from{transform:translate3d(0,100%,0)}}
@keyframes cth-bump{40%{transform:scale(1.4)}}
/* page to page: the content glides, the header stays put (Chrome and Edge 126+, Safari 18.2+) */
@view-transition{navigation:auto}
header.cth-hdr{view-transition-name:cth-header}
::view-transition-old(root){animation:cth-vt-out .2s var(--ease-in) both}
::view-transition-new(root){animation:cth-vt-in .42s var(--ease-out) both}
@keyframes cth-vt-out{to{opacity:0;transform:translate3d(0,-8px,0)}}
@keyframes cth-vt-in{from{opacity:0;transform:translate3d(0,14px,0)}}
@media (prefers-reduced-motion:reduce){
 @view-transition{navigation:none}
 html{scroll-behavior:auto}
 .s-dd .mm-wrap,.s-dd .mm>*{transition:none!important}
}

/* tablets: tighter desktop header */
@media (max-width:1100px){.s-nav{gap:14px}.s-head{gap:16px;padding:12px 20px}}

/* phones and small tablets: phone header, menu drawer and search (playbook Mobile chapter; base rules in site.css) */
.cth-mhead,.m-drawer,.m-srch,.cth-sticky,.s-ann .ann-s{display:none}
@media (max-width:900px){
 header.cth-hdr{position:sticky;top:-30px}
 .s-ann{height:30px;padding:7px 10px;font-size:11px;line-height:16px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
 .s-ann .ann-l{display:none}.s-ann .ann-s{display:inline}
 .cth-header .s-head,.cth-header .s-srch{display:none!important}
 .cth-header .cth-mhead{display:flex;position:relative;top:auto}
 .m-btn{position:relative;display:inline-grid;place-items:center;width:40px;height:40px;margin:-8px;padding:0;border:0;background:none;color:var(--ink);cursor:pointer}
 .m-btn .ic{width:22px;height:22px}
 .cth-mhead .m-logo{display:block;height:34px;width:auto;max-width:none}
 .cth-mhead .s-count{position:absolute;top:3px;right:1px;min-width:16px;height:16px;padding:0 4px;border-radius:8px;background:var(--clay);color:#fff;font:600 10px/16px var(--sans);text-align:center}
 .cth-mhead .s-count:empty,.cth-mhead .s-count[data-n="0"]{display:none}
 .m-drawer:not([hidden]),.m-srch:not([hidden]){display:block;position:fixed;inset:0;z-index:var(--z-modal);overflow-y:auto;overscroll-behavior:contain;background:var(--surface)}
 .m-dbody{padding:8px 16px 32px}
 .m-acc>a,.m-acc>details>summary{display:flex;justify-content:space-between;align-items:center;padding:13px 0;font-weight:500;font-size:15px;color:var(--ink)}
 .m-acc>a{border-bottom:1px solid var(--line)}
 .m-acc>a::after{content:"";flex:none;width:8px;height:8px;margin-right:6px;border-right:1.6px solid var(--ink2);border-bottom:1.6px solid var(--ink2);transform:rotate(-45deg)}
 .m-acc>details>.acc-p{border-bottom:0}
 .m-acc .mm-list{gap:10px}
 .m-vmenu .vtrack{margin:0;padding:0}
 .m-vall{display:inline-flex;align-items:center}
 .m-help-h{margin:18px 0 4px;font-weight:600}
 .m-help{list-style:none;margin:0;padding:0;line-height:2.1}
 .m-spill{display:flex;justify-content:flex-start;gap:8px;width:100%;margin-top:16px;padding:0 12px;color:var(--ink2)}
 .m-spill .ic{width:18px;height:18px}
 .m-search .q{flex:1;min-width:0;height:100%;border:0;outline:0;background:transparent;font:inherit;color:var(--ink)}
 .m-search .q::-webkit-search-cancel-button{display:none}
 .m-search .srch-x,.m-cancel{border:0;font:inherit;color:var(--ink)}
 .m-cancel{background:none;padding:8px 2px}
 .m-sr .sr-refs li a{display:flex;align-items:center;gap:10px;color:inherit}
 .m-res{color:var(--ink)}
 .m-res .tile{aspect-ratio:4/5}
 .m-sr .s-btn{width:100%}
 .s-head{flex-wrap:wrap}.mm,.mm.gifts,.sr{grid-template-columns:1fr;padding:20px}
 .cth-pdp-grid{display:block}
 .cth-gal{position:static;margin:0 0 18px}
 .cth-gal .woocommerce-product-gallery{display:block}
 .cth-story{grid-template-columns:1fr;gap:24px;padding-top:32px;padding-bottom:32px}
 .cth-related{padding-top:32px}
 .cth-content{padding:26px 20px 44px}
 .s-sec{padding:32px 24px}.s-grid4,.sr-grid{grid-template-columns:repeat(3,1fr)}.cth-trust,.cth-hoodie-row{grid-template-columns:1fr 1fr}.cth-gift-cards{grid-template-columns:repeat(3,1fr)}.cth-faq{grid-template-columns:1fr;gap:16px}.s-foot-grid{grid-template-columns:1fr 1fr 1fr}
 .cth-3col,.cth-4col,.cth-help-cards{grid-template-columns:1fr 1fr}.cth-2col,.cth-seo,.cth-postbody{grid-template-columns:1fr;gap:20px}
 .cth-fright{width:100%;margin-left:0;justify-content:space-between}
 .flex-control-thumbs{display:none!important}
 .cth-gcount{display:block;position:absolute;left:10px;bottom:10px;z-index:5;padding:3px 8px;border-radius:2px;background:rgba(var(--surface-rgb),.92);font:600 10px var(--sans);letter-spacing:.12em;text-transform:uppercase;color:var(--ink)}
 .woocommerce-product-gallery{position:relative}
 /* product page: sticky add to cart */
 .cth-sticky{display:flex;position:fixed;left:0;right:0;bottom:0;z-index:var(--z-sticky);box-shadow:0 -10px 24px -18px rgba(29,39,51,.5)}
 .cth-sticky .small{min-width:0;line-height:1.35}
 .cth-sticky .small b{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
 .cth-sticky .s-btn{flex:1;min-height:46px}
 body.has-sticky{padding-bottom:70px}
}
@media (min-width:701px) and (max-width:900px){.cth-main .vtrack{grid-auto-columns:calc((100% + 6px) / 3.2)}}
/* logged in: above 600 px the WordPress admin bar is fixed, so the sticky phone header stops right below it (at 600 px and less the bar scrolls away with the page) */
@media (min-width:601px) and (max-width:900px){header.cth-hdr{top:calc(var(--wp-admin--admin-bar--height,0px) - 30px)}}

/* phones: Home and shared bands at phone size */
@media (max-width:700px){
 .s-sec{padding:20px 16px}
 .site .ph{white-space:normal;overflow-wrap:anywhere}
 .cth-fl-p{position:fixed;left:12px;right:12px;top:auto;bottom:12px;z-index:calc(var(--z-sheet) + 1);min-width:0;max-height:60vh}
 .cth-fl[open]>summary::before{content:"";position:fixed;inset:0;z-index:var(--z-sheet);background:rgba(29,39,51,.35)}
 .s-title h2,.s-h2{margin:0;font-size:21px}
 .s-title>a,.vctl>a{flex:none;font-size:12px}
 .vctl .varr{display:none}
 .vsub{margin:4px 0 0;font-size:12.5px}
 .cth-hero{display:block;min-height:0!important}
 .cth-hero::before{display:none}
 .cth-hero>img{position:relative!important;inset:auto!important;height:300px!important;object-position:100% center!important}
 .cth-hero .bx{max-width:none;padding:18px 16px 20px;background:var(--bg)}
 .cth-hero .bx .s-kick{display:none}
 .cth-hero .bx h1{font-size:30px!important;line-height:1.05!important;margin:0 0 8px!important}
 .cth-hero .bx p{font-size:13.5px!important;margin:0 0 14px!important}
 .cth-hero .bx div{flex-direction:column;gap:8px!important}
 .cth-hero .s-btn{width:100%}
 .cth-home .s-grid3{grid-template-columns:repeat(3,minmax(0,1fr));gap:6px}
 .cth-home .s-grid3 .tile{aspect-ratio:4/5!important}
 .cth-home .s-grid3 .pt{margin:7px 0 0!important;font-size:11.5px}
 .cth-home .s-grid3 .pt .muted{display:none}
 .vslide{padding:20px 16px 22px}
 .s-grid4,.sr-grid,.s-grid3{grid-template-columns:1fr 1fr;gap:10px}
 .pcard .pt{font-size:12.5px}
 .cth-trust{grid-template-columns:1fr 1fr;padding:14px 16px;gap:12px;font-size:12px}
 .cth-band{padding:34px 16px!important}.cth-band .s-h{font-size:22px!important}
 .cth-hoodie-row{grid-template-columns:1fr 1fr;gap:10px}.cth-hoodie-row .s-feat{grid-column:1/-1;min-height:240px}
 .cth-gift-cards{grid-template-columns:1fr 1fr}
 .s-banner .bx{max-width:100%!important;padding:24px 18px!important}
 .cth-faq{grid-template-columns:1fr;gap:12px}
 .cth-arch-banner h1,.cth-arch-head h1{font-size:30px!important}
 /* banners with a shirt print (collections, About, Gifts): photo on top and text below, like the hero, so the text does not cover the print */
 :is(.cth-arch-banner,.cth-pagehero,.cth-giftband){display:block;min-height:0!important}
 :is(.cth-arch-banner,.cth-pagehero,.cth-giftband)::before{display:none}
 :is(.cth-arch-banner,.cth-pagehero,.cth-giftband)>img{position:relative!important;inset:auto!important;height:240px!important;object-position:100% center!important}
 :is(.cth-arch-banner,.cth-pagehero,.cth-giftband) .bx{max-width:none!important;padding:16px 16px 20px!important;background:var(--bg)}
 .cth-toolbar{flex-wrap:wrap;gap:8px}
 .cth-pdp-title{font-size:26px!important}
 .s-foot{padding:32px 16px 20px}.s-foot-grid{grid-template-columns:1fr 1fr;gap:22px}.s-foot-grid>div:first-child,.s-foot-grid>div:last-child{grid-column:1/-1}.s-foot-bar{flex-wrap:wrap}
}

/* ---------- unified 1320px layout & page alignment ---------- */
:root {
  --container: 1320px;
  --pad-x: max(48px, calc((100% - 1320px) / 2));
}
@media (max-width: 1100px) {
  :root {
    --pad-x: max(24px, calc((100% - 1320px) / 2));
  }
}
@media (min-width: 901px) {
  .s-ann,
  .s-head,
  .mm,
  .mm-foot,
  .sr,
  .s-sec,
  .cth-trust,
  .s-foot,
  .cth-content,
  .cth-pdp-top,
  .cth-story,
  .cth-related {
    padding-left: var(--pad-x);
    padding-right: var(--pad-x);
  }
  :is(.cth-hero, .cth-arch-banner, .cth-pagehero) > .bx {
    margin-left: calc(var(--pad-x) - 48px);
  }
  .cth-faqg {
    display: grid;
    grid-template-columns: 280px minmax(0, 1fr);
    gap: 48px;
    align-items: start;
    padding-top: 28px;
    padding-bottom: 28px;
    border-bottom: 1px solid var(--line);
  }
  .cth-faqg > .cth-h4 {
    margin: 14px 0 0;
  }
  .cth-faqg .acc {
    max-width: none;
  }
}

/* Unify Cart, Checkout, Content, Support, and Policy widths inside the 1320px container */
.cth-content > *,
.cth-wc .cth-content > *,
.cth-shipbar,
.cth-cartnote,
.cth-cartmore {
  max-width: none;
}
.cth-cartmore .s-grid3 {
  max-width: 960px;
}
.cth-glance .t {
  max-width: 100%;
}
.s-sec.cth-legal {
  max-width: none;
}
.cth-legal-inner {
  max-width: 960px;
}
.cth-legal-inner p,
.cth-legal-inner li {
  font-size: 15px;
  line-height: 1.7;
  color: var(--ink2);
}
.cth-legal-inner b {
  color: var(--ink);
}
.cth-legal-inner > .cth-h4 {
  font-size: 13.5px;
  margin: 30px 0 10px;
  padding-top: 22px;
  border-top: 1px solid var(--line);
}
.cth-legal-inner > .cth-h4:first-of-type {
  margin-top: 16px;
  padding-top: 0;
  border-top: 0;
}