/* ========================================================================= THEORYS — shop / catalogue skin Applies the lander's design language (see theorys-home.css) to every Storefront + WooCommerce surface: catalogue grid, single product, cart, checkout, account. Reuses the brand tokens from style.css :root — no hardcoded hex outside the token block. Structure 1. shell reset Storefront chrome, header, footer, ticker 2. shop hero archive header + category rail 3. loop product cards 4. single gallery, summary, variations, tabs 5. commerce cart / checkout / account / notices 6. responsive ========================================================================= */ /* ---------- 1. SHELL ---------------------------------------------------- */ body.thr-shell { font-family: var(--font-body); color: var(--ink); background: var(--white); -webkit-font-smoothing: antialiased; } .thr-shell h1, .thr-shell h2, .thr-shell h3, .thr-shell h4 { font-family: var(--font-head); letter-spacing: -0.02em; font-weight: 600; color: var(--ink); } /* Storefront's own chrome is emptied in PHP; collapse the leftover elements. .woocommerce-products-header in particular keeps a ~96px em-based padding-bottom after its title is suppressed, leaving a dead gap under the hero, so it has to be hidden rather than just emptied. */ .thr-shell .site-header, .thr-shell .storefront-breadcrumb, .thr-shell .woocommerce-products-header, .thr-shell .woocommerce-result-count, .thr-shell #secondary, .thr-shell .site-footer .footer-widgets, .thr-shell .storefront-handheld-footer-bar { display: none !important; } .thr-shell .site-footer { padding: 0; background: none; } .thr-shell #page { overflow: visible; } .thr-shell .site-content { padding-top: 0; } .thr-shell .col-full, .thr-shell .site-content .col-full { max-width: none; padding: 0; margin: 0; } .thr-shell #primary, .thr-shell .content-area { width: 100%; float: none; margin: 0; } .thr-wrap { width: 100%; max-width: 1200px; margin: 0 auto; padding: 0 24px; } /* Content gutter. NOTE: itself carries the class "woocommerce", so a selector like `.thr-shell .woocommerce` is ambiguous and silently fails to constrain the inner wrapper. Every content block therefore declares its own gutter rather than inheriting one from an ancestor container. */ .thr-shell ul.products, .thr-shell .thr-chips--rail, .thr-shell .storefront-sorting, .thr-shell nav.woocommerce-pagination, .thr-shell .woocommerce-no-products-found, .thr-shell .woocommerce-info, .thr-shell .woocommerce-message, .thr-shell .woocommerce-error, .thr-shell div.product, .thr-shell .cart-collaterals, .thr-shell form.woocommerce-cart-form, .thr-shell form.checkout, .thr-shell .woocommerce-MyAccount-navigation, .thr-shell .woocommerce-MyAccount-content, .thr-shell .woocommerce-order, .thr-shell .woocommerce-form-login, .thr-shell .woocommerce-form-register { max-width: 1200px; margin-left: auto; margin-right: auto; padding-left: 24px; padding-right: 24px; box-sizing: border-box; } /* Announce bar + sticky header (same rules as the lander) */ .thr-announce { background: var(--ink); color: var(--off-white); text-align: center; font-size: 12.5px; letter-spacing: 0.04em; padding: 9px 16px; } .thr-header { position: sticky; top: 0; z-index: 900; background: var(--white); border-bottom: 1px solid var(--line); } .thr-header-inner { display: flex; align-items: center; justify-content: space-between; gap: 20px; min-height: 68px; } .thr-wordmark { font-family: var(--font-head); font-weight: 700; font-size: 17px; letter-spacing: 0.28em; color: var(--ink); text-decoration: none; } .thr-wordmark:hover { color: var(--forest-deep); } .thr-nav { display: none; gap: 26px; } .thr-nav a { font-size: 14.5px; color: #35403a; text-decoration: none; padding: 4px 0; border-bottom: 1px solid transparent; } .thr-nav a:hover { color: var(--forest-mid); } .thr-nav a.is-current { color: var(--forest-deep); border-bottom-color: var(--forest-deep); } .thr-header-right { display: flex; align-items: center; gap: 10px; } /* The wrapper is the fragment target Woo replaces on every ajax add — see thr_cart_badge_fragment(). Keep the class name and this selector in step. */ .thr-cart-wrap { display: inline-flex; } .thr-cart { position: relative; display: inline-flex; color: var(--ink); padding: 6px; text-decoration: none; } .thr-cart svg { width: 21px; height: 21px; } .thr-cart:hover { color: var(--forest-mid); } /* Filled circle on the icon's top-right. Absent from the DOM at zero, so there is nothing to hide with CSS. */ .thr-cart-count { position: absolute; top: -3px; right: -5px; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 999px; background: var(--forest-deep); color: var(--white); border: 2px solid var(--white); font-family: var(--font-head); font-size: 10.5px; font-weight: 600; line-height: 1; display: grid; place-items: center; box-sizing: content-box; font-variant-numeric: tabular-nums; } .thr-burger { width: 40px; height: 40px; flex: none; display: grid; place-content: center; gap: 5px; border: 1px solid var(--line); border-radius: 10px; background: var(--white); cursor: pointer; } .thr-burger span { display: block; width: 17px; height: 2px; background: var(--ink); border-radius: 2px; } .thr-mobile-nav { display: none; padding: 8px 24px 18px; border-top: 1px solid var(--line); background: var(--white); } .thr-mobile-nav.is-open { display: block; } .thr-mobile-nav a { display: block; padding: 11px 0; font-size: 15.5px; color: var(--ink); text-decoration: none; border-bottom: 1px solid var(--line); } /* Buttons — shared with the lander */ .thr-btn, .thr-shell .button, .thr-shell button.button, .thr-shell input[type="submit"], .thr-shell .added_to_cart, .thr-shell a.button { display: inline-flex; align-items: center; justify-content: center; gap: 8px; font-family: var(--font-head); font-weight: 500; font-size: 15px; letter-spacing: 0.01em; line-height: 1; padding: 13px 22px; border: 1px solid var(--forest-deep); border-radius: 12px; background: var(--forest-deep); color: var(--white) !important; text-decoration: none; text-shadow: none; transition: background .15s ease, border-color .15s ease, transform .15s ease, color .15s ease; } .thr-btn:hover, .thr-shell .button:hover, .thr-shell button.button:hover, .thr-shell input[type="submit"]:hover, .thr-shell a.button:hover { background: var(--forest-mid); border-color: var(--forest-mid); color: var(--white) !important; transform: translateY(-1px); } .thr-btn--outline, .thr-shell .button.alt.thr-ghost { background: transparent; color: var(--forest-deep) !important; border-color: var(--forest-deep); } .thr-btn--outline:hover { background: var(--forest-deep); color: var(--white) !important; } .thr-shell .button.added { opacity: .85; } /* ---------- BUNDLES / SUBSCRIPTION BAND ------------------------------- */ .thr-bundles { background: var(--forest-deep); color: var(--white); padding: 66px 0 60px; margin-top: 72px; } .thr-bundles .thr-eyebrow--ondark { color: var(--silver); } .thr-bundles-title { color: var(--white); font-size: clamp(26px, 4vw, 40px); margin: 0 0 12px; line-height: 1.08; } .thr-lead--ondark { color: rgba(255,255,255,0.80); max-width: 62ch; } .thr-bundle-grid { display: grid; grid-template-columns: 1fr; gap: 18px; margin-top: 38px; } .thr-bundle { position: relative; border-radius: 18px; padding: 26px 24px 24px; background: rgba(255,255,255,0.045); border: 1px solid rgba(255,255,255,0.13); display: flex; flex-direction: column; transition: transform .15s ease, border-color .15s ease, background .15s ease; } .thr-bundle:hover { transform: translateY(-2px); border-color: rgba(255,255,255,0.28); } .thr-bundle.is-featured { background: rgba(46,94,78,0.42); border-color: var(--forest-mid); box-shadow: 0 18px 44px rgba(0,0,0,0.28); } .thr-bundle-flag { position: absolute; top: -11px; left: 24px; background: var(--metal); color: var(--ink); font-family: var(--font-head); font-size: 10px; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; padding: 5px 11px; border-radius: 999px; } .thr-bundle-tag { font-family: var(--font-head); font-size: 10.5px; font-weight: 600; letter-spacing: 0.18em; text-transform: uppercase; color: var(--silver); } .thr-bundle-name { color: var(--white); font-size: 22px; margin: 10px 0 6px; } .thr-bundle-save { display: inline-block; font-family: var(--font-head); font-size: 13px; font-weight: 600; letter-spacing: 0.05em; color: var(--white); border: 1px solid rgba(255,255,255,0.28); border-radius: 999px; padding: 5px 12px; margin-bottom: 14px; } .thr-bundle-blurb { font-size: 14.5px; line-height: 1.65; color: rgba(255,255,255,0.74); margin: 0 0 16px; } .thr-bundle-list { list-style: none; margin: 0 0 22px; padding: 0; } .thr-bundle-list li { position: relative; padding-left: 22px; margin-bottom: 9px; font-size: 14px; color: rgba(255,255,255,0.86); } .thr-bundle-list li::before { content: ""; position: absolute; left: 0; top: 7px; width: 9px; height: 5px; border-left: 1.6px solid var(--silver); border-bottom: 1.6px solid var(--silver); transform: rotate(-45deg); } .thr-bundle .thr-btn { margin-top: auto; align-self: flex-start; } .thr-btn--ghost { background: transparent; color: var(--white) !important; border-color: rgba(255,255,255,0.34); } .thr-btn--ghost:hover { background: rgba(255,255,255,0.10); border-color: var(--white); color: var(--white) !important; } .thr-btn--ondark { background: var(--white); color: var(--forest-deep) !important; border-color: var(--white); } .thr-btn--ondark:hover { background: var(--off-white); color: var(--forest-deep) !important; border-color: var(--off-white); } .thr-bundles-note { margin: 30px 0 0; font-size: 12.5px; color: rgba(255,255,255,0.52); } /* Ticker band */ .thr-ticker { background: var(--forest-deep); overflow: hidden; padding: 14px 0; margin-top: 72px; } .thr-ticker-track { display: flex; width: max-content; animation: thr-marquee 38s linear infinite; } .thr-ticker-group { display: inline-flex; } .thr-ticker-item { color: var(--off-white); font-size: 13px; letter-spacing: 0.06em; white-space: nowrap; padding-left: 26px; } .thr-ticker-item::after { content: "·"; margin-left: 26px; color: var(--platinum-lo); } @keyframes thr-marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } } @media (prefers-reduced-motion: reduce) { .thr-ticker-track { animation: none; } } /* Footer */ .thr-footer { background: var(--ink); color: rgba(255,255,255,0.78); padding: 60px 0 30px; } .thr-footer .thr-wordmark { color: var(--white); } .thr-footer-top { display: grid; grid-template-columns: 1fr; gap: 34px; } .thr-footer-tag { margin-top: 14px; font-size: 14px; color: rgba(255,255,255,0.62); max-width: 34ch; } .thr-footer-cols { display: grid; grid-template-columns: repeat(2, 1fr); gap: 28px 20px; } .thr-footer-col h4 { color: var(--white); font-size: 11.5px; letter-spacing: 0.16em; text-transform: uppercase; margin: 0 0 12px; } .thr-footer-col ul { list-style: none; margin: 0; padding: 0; } .thr-footer-col li { margin-bottom: 8px; } .thr-footer-col a { color: rgba(255,255,255,0.66); font-size: 14px; text-decoration: none; } .thr-footer-col a:hover { color: var(--white); } .thr-footer-ruo { margin: 40px 0 0; padding-top: 22px; border-top: 1px solid rgba(255,255,255,0.12); font-size: 12px; line-height: 1.7; color: rgba(255,255,255,0.48); } .thr-footer-copy { margin: 14px 0 0; font-size: 12px; color: rgba(255,255,255,0.42); } /* ---------- 2. SHOP HERO + CATEGORY RAIL -------------------------------- */ .thr-shop-hero { padding: 44px 0 8px; background: var(--white); } .thr-eyebrow { display: block; font-family: var(--font-head); font-size: 11.5px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--forest-mid); font-weight: 600; margin-bottom: 10px; } .thr-shop-title { font-size: clamp(30px, 5vw, 46px); margin: 0 0 12px; line-height: 1.05; } .thr-lead { color: #3a423d; max-width: 62ch; font-size: 16px; line-height: 1.65; margin: 0; } .thr-shop-count { margin: 16px 0 0; font-family: var(--font-head); font-size: 12.5px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--platinum-lo); } .thr-shop-count-gate { color: var(--forest-mid); } .thr-crumbs { margin-bottom: 20px; font-size: 13px; color: var(--platinum-lo); } .thr-crumbs a { color: #5b6660; text-decoration: none; } .thr-crumbs a:hover { color: var(--forest-mid); } .thr-crumbs .sep { margin: 0 8px; color: var(--silver); } .thr-chips { display: flex; flex-wrap: wrap; gap: 10px; } .thr-chips--rail { margin: 30px 0 8px; } .thr-chip { font-family: var(--font-head); font-size: 13.5px; padding: 10px 16px; border-radius: 999px; border: 1px solid var(--line); background: var(--white); color: var(--ink); text-decoration: none; transition: border-color .15s ease, color .15s ease, transform .15s ease, background .15s ease; } .thr-chip:hover { border-color: var(--forest-mid); color: var(--forest-mid); transform: translateY(-1px); } .thr-chip.is-active { background: var(--forest-deep); border-color: var(--forest-deep); color: var(--white); } .thr-chip-n { opacity: .5; font-size: 12px; margin-left: 4px; } .thr-chip.is-active .thr-chip-n { opacity: .7; } /* ---------- 3. PRODUCT LOOP -------------------------------------------- */ .thr-shell .site-main { padding: 0 0 8px; } .thr-shell ul.products { display: grid; grid-template-columns: 1fr; gap: 22px; /* keep the auto side margins + 24px gutter set in the container block above */ margin: 34px auto 0; padding: 0 24px; list-style: none; } .thr-shell ul.products::before, .thr-shell ul.products::after { content: none; display: none; } .thr-shell ul.products li.product { width: 100% !important; margin: 0 !important; float: none !important; border: 1px solid var(--line); border-radius: 18px; overflow: hidden; background: var(--white); box-shadow: 0 8px 24px rgba(14,18,15,0.04); transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease; display: flex; flex-direction: column; padding: 0; text-align: left; } .thr-shell ul.products li.product:hover { transform: translateY(-2px); box-shadow: 0 14px 34px rgba(14,18,15,0.09); border-color: #d3dad6; } .thr-shell ul.products li.product a.woocommerce-LoopProduct-link { display: block; text-decoration: none; } /* vial art sits on the same forest field as the lander's cards */ .thr-shell ul.products li.product img { width: 100%; height: auto; margin: 0; display: block; aspect-ratio: 1 / 1; object-fit: cover; background: var(--forest-deep); border-radius: 0; box-shadow: none; } .thr-shell ul.products li.product .thr-loop-cat { display: block; padding: 16px 20px 0; font-family: var(--font-head); font-size: 10.5px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--platinum-lo); } .thr-shell ul.products li.product .woocommerce-loop-product__title { font-family: var(--font-head); font-size: 17px; font-weight: 600; color: var(--ink); padding: 8px 20px 0; margin: 0; line-height: 1.32; letter-spacing: -0.01em; } .thr-shell ul.products li.product .thr-loop-sizes { display: inline-block; margin: 8px 20px 0; font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--forest-mid); border: 1px solid var(--line); border-radius: 999px; padding: 3px 9px; } .thr-shell ul.products li.product .price { display: block; padding: 10px 20px 0; margin: 0; font-family: var(--font-head); font-size: 16px; font-weight: 600; color: var(--forest-deep); } .thr-shell ul.products li.product .price del { color: var(--platinum-lo); font-weight: 400; margin-right: 6px; } .thr-shell ul.products li.product .price ins { text-decoration: none; } /* guest price-gate copy from theorys-gate.php */ .thr-shell ul.products li.product .price .thr-signin-price, .thr-shell .thr-signin-price { font-size: 14px; font-weight: 500; color: var(--forest-mid); } .thr-shell ul.products li.product .button, .thr-shell ul.products li.product .added_to_cart, .thr-shell ul.products li.product .thr-prod-link { margin: 16px 20px 20px; align-self: flex-start; font-size: 14px; padding: 11px 18px; } /* push the CTA to the card bottom so uneven titles still line up */ .thr-shell ul.products li.product > *:last-child { margin-top: auto; } .thr-shell .onsale, .thr-shell span.onsale { position: absolute; top: 14px; left: 14px; right: auto; background: var(--metal); color: var(--ink); font-family: var(--font-head); font-size: 10.5px; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; border-radius: 999px; padding: 6px 12px; min-height: 0; min-width: 0; line-height: 1; margin: 0; } .thr-shell ul.products li.product { position: relative; } /* sorting + pagination share one row */ .thr-shell .storefront-sorting { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin: 20px auto 0; } .thr-shell .storefront-sorting::before, .thr-shell .storefront-sorting::after { content: none; display: none; } .thr-shell .storefront-sorting nav.woocommerce-pagination { margin: 0; padding: 0; max-width: none; width: auto; float: none; } /* Storefront floats the ordering form; margin-right:auto pins it left of the pagination regardless of how many siblings the wrapper ends up with. */ .thr-shell .storefront-sorting .woocommerce-ordering { float: none; margin: 0 auto 0 0; padding: 0; } .thr-shell .woocommerce-ordering select, .thr-shell select, .thr-shell .select2-container .select2-selection--single { font-family: var(--font-body); font-size: 14px; border: 1px solid var(--line); border-radius: 10px; padding: 10px 14px; background: var(--white); color: var(--ink); height: auto; } .thr-shell .woocommerce-ordering { margin: 0; } .thr-shell .thr-loop-toolbar { display: flex; justify-content: flex-end; align-items: center; margin-top: 22px; } .thr-shell nav.woocommerce-pagination { margin: 48px 0 0; text-align: center; } .thr-shell nav.woocommerce-pagination ul { border: 0; display: inline-flex; gap: 8px; } .thr-shell nav.woocommerce-pagination ul li { border: 0; margin: 0; overflow: visible; } .thr-shell nav.woocommerce-pagination ul li a, .thr-shell nav.woocommerce-pagination ul li span { font-family: var(--font-head); font-size: 14px; min-width: 40px; height: 40px; padding: 0 12px; display: grid; place-items: center; border: 1px solid var(--line); border-radius: 10px; background: var(--white); color: var(--ink); } .thr-shell nav.woocommerce-pagination ul li a:hover { border-color: var(--forest-mid); color: var(--forest-mid); background: var(--white); } .thr-shell nav.woocommerce-pagination ul li span.current { background: var(--forest-deep); border-color: var(--forest-deep); color: var(--white); } /* ---------- 4. SINGLE PRODUCT ------------------------------------------ */ .thr-shell.single-product .site-main { padding-top: 34px; } .thr-shell div.product { display: grid; grid-template-columns: 1fr; gap: 34px; } /* Grid items must be allowed to shrink. Without min-width:0 the 1200px gallery image sets the track's min-content width, blowing the layout apart and bumping the summary onto its own row. */ .thr-shell div.product > * { min-width: 0; } .thr-shell div.product .woocommerce-product-gallery { width: 100% !important; float: none !important; margin: 0 !important; border: 1px solid var(--line); border-radius: 18px; overflow: hidden; background: var(--forest-deep); } /* flexslider writes inline pixel widths; override them. */ .thr-shell div.product .woocommerce-product-gallery img, .thr-shell div.product .woocommerce-product-gallery .flex-viewport, .thr-shell div.product .woocommerce-product-gallery figure, .thr-shell div.product .woocommerce-product-gallery__wrapper { width: 100% !important; max-width: 100% !important; height: auto; border-radius: 0; display: block; margin: 0; } .thr-shell div.product .woocommerce-product-gallery__trigger { display: none !important; } /* Single-image products still get flexslider thumbs; nothing to navigate. */ .thr-shell div.product .flex-control-thumbs { display: none; } .thr-shell div.product .summary, .thr-shell div.product .entry-summary { width: 100% !important; float: none !important; margin: 0 !important; } /* Storefront's prev/next product nav peeks thumbnails in from the viewport edges, which reads as a rendering fault against the brand layout. */ .thr-shell .storefront-product-pagination { display: none !important; } .thr-shell .product_title { font-size: clamp(26px, 4vw, 38px); line-height: 1.08; margin: 0 0 14px; } .thr-shell div.product p.price, .thr-shell div.product span.price { font-family: var(--font-head); font-size: 26px; font-weight: 600; color: var(--forest-deep); margin: 0 0 18px; } .thr-shell div.product p.price del { font-size: 19px; color: var(--platinum-lo); font-weight: 400; } .thr-shell .woocommerce-product-details__short-description { font-size: 15.5px; line-height: 1.7; color: #3a423d; padding-bottom: 20px; margin-bottom: 4px; border-bottom: 1px solid var(--line); } /* variation picker */ .thr-shell table.variations { border: 0; margin: 0 0 18px; width: 100%; } .thr-shell table.variations tbody, .thr-shell table.variations tr { display: block; } .thr-shell table.variations th, .thr-shell table.variations td { display: block; border: 0; padding: 0; background: none; width: 100%; } .thr-shell table.variations th.label label { font-family: var(--font-head); font-size: 11.5px; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; color: var(--platinum-lo); margin-bottom: 8px; display: block; } .thr-shell table.variations td.value { position: relative; } .thr-shell table.variations select { width: 100%; max-width: 320px; padding: 13px 15px; font-size: 15px; } .thr-shell .reset_variations { display: inline-block; margin-top: 10px; font-size: 13px; color: var(--forest-mid); } .thr-shell .woocommerce-variation-price { margin-bottom: 14px; } .thr-shell .woocommerce-variation-availability { font-size: 14px; color: var(--forest-mid); } .thr-shell .single_variation_wrap { margin-top: 6px; } /* quantity + add to cart */ .thr-shell form.cart { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; margin: 20px 0 26px; } .thr-shell form.cart.variations_form { display: block; } .thr-shell form.cart .quantity { margin: 0; } .thr-shell form.cart .quantity input.qty, .thr-shell .quantity input.qty { width: 78px; height: 48px; padding: 0 10px; text-align: center; font-family: var(--font-head); font-size: 15px; border: 1px solid var(--line); border-radius: 12px; background: var(--white); } .thr-shell form.cart .single_add_to_cart_button { height: 48px; padding: 0 26px; } .thr-shell .single_variation_wrap form.cart, .thr-shell .single_variation_wrap .woocommerce-variation-add-to-cart { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; } .thr-shell .product_meta { font-size: 13px; color: #5b6660; border-top: 1px solid var(--line); padding-top: 18px; margin-top: 4px; } .thr-shell .product_meta > span { display: block; margin-bottom: 6px; } .thr-shell .product_meta a { color: var(--forest-mid); text-decoration: none; } .thr-shell .product_meta .sku { font-family: var(--font-head); color: var(--ink); } /* tabs */ .thr-shell .woocommerce-tabs { grid-column: 1 / -1; margin-top: 46px; border-top: 1px solid var(--line); padding-top: 34px; } /* Storefront floats the tab list at 30% and the panel at 68%, which strands the pills in a narrow column. Stack them: full-width pill row, panel beneath. */ .thr-shell .woocommerce-tabs ul.tabs, .thr-shell .woocommerce-tabs .panel { width: 100% !important; float: none !important; } .thr-shell .woocommerce-tabs ul.tabs { padding: 0; margin: 0 0 26px; display: flex; gap: 8px; flex-wrap: wrap; } .thr-shell .woocommerce-tabs ul.tabs::before { display: none; } .thr-shell .woocommerce-tabs ul.tabs li { background: var(--white); border: 1px solid var(--line); border-radius: 999px; margin: 0; padding: 0; } .thr-shell .woocommerce-tabs ul.tabs li::before, .thr-shell .woocommerce-tabs ul.tabs li::after { display: none; } .thr-shell .woocommerce-tabs ul.tabs li a { font-family: var(--font-head); font-size: 13.5px; font-weight: 500; padding: 10px 18px; color: var(--ink); text-decoration: none; display: block; } .thr-shell .woocommerce-tabs ul.tabs li.active { background: var(--forest-deep); border-color: var(--forest-deep); } .thr-shell .woocommerce-tabs ul.tabs li.active a { color: var(--white); } .thr-shell .woocommerce-tabs .panel { padding: 0; margin: 0; max-width: 76ch; } .thr-shell .woocommerce-tabs .panel h2 { font-size: 20px; margin-bottom: 12px; } .thr-shell .woocommerce-tabs .panel p { font-size: 15.5px; line-height: 1.75; color: #3a423d; } .thr-shell .shop_attributes { border: 1px solid var(--line); border-radius: 14px; overflow: hidden; } .thr-shell .shop_attributes th, .thr-shell .shop_attributes td { padding: 12px 16px; font-size: 14px; border-bottom: 1px solid var(--line); background: none; } .thr-shell .shop_attributes th { font-family: var(--font-head); font-weight: 600; width: 30%; } /* related products */ .thr-shell .related, .thr-shell .up-sells { grid-column: 1 / -1; margin-top: 52px; border-top: 1px solid var(--line); padding-top: 34px; } .thr-shell .related > h2, .thr-shell .up-sells > h2 { font-size: clamp(22px, 3vw, 30px); margin-bottom: 4px; } /* ---------- 5. CART / CHECKOUT / ACCOUNT / NOTICES -------------------- */ .thr-shell .woocommerce-message, .thr-shell .woocommerce-info, .thr-shell .woocommerce-error { border-top: 0; border-radius: 14px; background: var(--off-white); border: 1px solid var(--line); border-left: 3px solid var(--forest-mid); font-size: 14.5px; color: var(--ink); padding: 16px 20px; margin-bottom: 24px; } .thr-shell .woocommerce-message::before, .thr-shell .woocommerce-info::before, .thr-shell .woocommerce-error::before { display: none; } .thr-shell .woocommerce-error { border-left-color: #b4483f; } .thr-shell table.shop_table { border: 1px solid var(--line); border-radius: 16px; border-collapse: separate; overflow: hidden; } .thr-shell table.shop_table th { font-family: var(--font-head); font-size: 11.5px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--platinum-lo); background: var(--off-white); } .thr-shell table.shop_table td, .thr-shell table.shop_table th { padding: 16px; } .thr-shell .cart_totals h2, .thr-shell #order_review_heading { font-size: 20px; } .thr-shell form .form-row input.input-text, .thr-shell form .form-row textarea, .thr-shell input[type="text"], .thr-shell input[type="email"], .thr-shell input[type="tel"], .thr-shell input[type="password"], .thr-shell input[type="number"], .thr-shell textarea { border: 1px solid var(--line); border-radius: 12px; padding: 12px 14px; font-size: 15px; font-family: var(--font-body); background: var(--white); color: var(--ink); box-shadow: none; } .thr-shell form .form-row label { font-size: 13.5px; color: #3a423d; } .thr-shell .woocommerce-MyAccount-navigation ul { list-style: none; padding: 0; } .thr-shell .woocommerce-MyAccount-navigation li { margin-bottom: 6px; } .thr-shell .woocommerce-MyAccount-navigation a { display: block; padding: 10px 14px; border-radius: 10px; font-family: var(--font-head); font-size: 14px; color: var(--ink); text-decoration: none; } .thr-shell .woocommerce-MyAccount-navigation li.is-active a { background: var(--forest-deep); color: var(--white); } /* Storefront leftovers we never want on a brand page */ .thr-shell .storefront-sticky-add-to-cart { display: none; } /* ---------- 6. RESPONSIVE --------------------------------------------- */ @media (min-width: 768px) { .thr-shell ul.products { grid-template-columns: repeat(2, 1fr); } .thr-footer-top { grid-template-columns: 1fr 2fr; gap: 40px; } .thr-footer-cols { grid-template-columns: repeat(4, 1fr); } .thr-shell div.product { grid-template-columns: 1fr 1fr; gap: 44px; align-items: start; } /* Placed explicitly. Auto-placement put the gallery in column 2 and pushed the summary to its own row, because Storefront still carries float/order declarations for the pre-grid layout. Pinning both to row 1 makes the result independent of whatever the parent theme sets. */ .thr-shell div.product .woocommerce-product-gallery { grid-column: 1; grid-row: 1; } .thr-shell div.product .summary, .thr-shell div.product .entry-summary { grid-column: 2; grid-row: 1; } } @media (min-width: 1024px) { .thr-nav { display: flex; } .thr-burger { display: none; } .thr-shell ul.products { grid-template-columns: repeat(3, 1fr); gap: 24px; } .thr-shop-hero { padding: 56px 0 8px; } .thr-shell div.product { grid-template-columns: 1.05fr 1fr; gap: 56px; } .thr-bundle-grid { grid-template-columns: repeat(3, 1fr); gap: 22px; } } @media (min-width: 768px) and (max-width: 1023px) { .thr-bundle-grid { grid-template-columns: repeat(2, 1fr); } } /* The band is a full-bleed section, so it must escape the shop-loop gutter. */ .thr-shell .thr-bundles { max-width: none; padding-left: 0; padding-right: 0; } /* ---------- 7. ON-DARK OVERRIDES — must stay last ---------------------- `.thr-shell h1,h2,h3,h4 { color: var(--ink) }` near the top of this file has specificity (0,1,1), which beats a single-class rule like .thr-bundles-title (0,1,0). And `.thr-lead` is declared after `.thr-lead--ondark`, so on equal specificity the light-background colour won. Both made dark text render on the forest band. Anything on a dark ground is therefore re-declared here, with matching specificity, at the end of the cascade. */ .thr-shell .thr-bundles h2, .thr-shell .thr-bundles h3, .thr-shell .thr-bundles .thr-bundles-title, .thr-shell .thr-bundles .thr-bundle-name { color: var(--white); } .thr-shell .thr-bundles .thr-lead, .thr-shell .thr-bundles .thr-lead--ondark { color: rgba(255,255,255,0.80); } .thr-shell .thr-bundles .thr-eyebrow { color: var(--silver); } .thr-shell .thr-footer h4 { color: var(--white); } .thr-shell .thr-footer .thr-wordmark { color: var(--white); } .thr-shell .thr-ticker .thr-ticker-item { color: var(--off-white); }