/** Shopify CDN: Minification failed Line 816:8 Unexpected "{" **/ /* ========================================================================= ORÉE — oree-custom.css · the VESSEL OVERRIDE LAYER ========================================================================= Purpose Re-skins Vessel's OWN components (type, color, buttons, product grid, forms, spacing) to the ECOTONE design system — without touching Vessel's structure, navigation, footer markup, or any cart/checkout logic. CSS only. Nothing here changes behaviour. Load LAST — after every Vessel stylesheet. It is linked by snippets/oree-head.liquid, which you render just before in Vessel's layout/theme.liquid. Depends snippets/oree-css-variables.liquid (the --canvas / --ink-* / --ember-* / --font-* tokens). Loaded by the same head snippet. Scope ✓ typography · colors · buttons · product cards & grid · forms · badges · rules & radii · spacing rhythm ✗ no display/position/grid-template changes to Vessel's header, footer, drawers, or popovers — skin, not surgery. NOTE ON SELECTORS Vessel is a paid theme and ships its own class names. The blocks below use (a) element selectors that hit everything, and (b) the common Shopify/Vessel hooks. Anything marked “VERIFY” should be confirmed once in DevTools on YOUR store (right-click → Inspect) and adjusted if your Vessel version names it differently. Everything else is safe as-is. ========================================================================= */ /* ------------------------------------------------------------------------- 1 · TOKEN BRIDGE — feed ORÉE tokens into the theme's variable system. Most modern themes (Vessel included) resolve their colors/fonts from :root custom properties. Overriding the common names here re-skins every component that reads them — including the cart drawer — with zero structural risk. VERIFY: open DevTools → Elements → → Computed → filter “--color” and add any Vessel-specific names you see to this block. ------------------------------------------------------------------------- */ :root { /* Generic OS 2.0 conventions (Dawn-derived + common paid themes) */ --color-background: var(--canvas); --color-foreground: var(--ink-900); --color-base-background-1: var(--canvas); --color-base-background-2: var(--canvas-soft); --color-base-text: var(--ink-900); --color-base-outline-button-labels: var(--ink-900); --color-base-solid-button-labels: var(--canvas); --color-base-accent-1: var(--ink-900); --color-base-accent-2: var(--ember-500); --color-link: var(--ink-900); --color-border: var(--rule-hairline); --color-shadow: 26, 24, 20; /* Typography hand-off */ --font-body-family: var(--font-sans); --font-heading-family: var(--font-sans); --font-body-weight: 300; --font-heading-weight: var(--heading-weight, 300); --font-body-scale: 1; --font-heading-scale: 1; /* Shape — true corners everywhere */ --buttons-radius: 0; --inputs-radius: 0; --card-corner-radius: 0; --media-radius: 0; --popup-corner-radius: 0; --variant-pills-radius: 999px; --badge-corner-radius: 999px; /* Shadow — almost none */ --buttons-shadow-opacity: 0; --card-shadow-opacity: 0; --drawer-shadow-opacity: 0.08; --popup-shadow-opacity: 0.08; } /* ------------------------------------------------------------------------- 2 · TYPOGRAPHY — General Sans carries everything. @font-face lives in snippets/oree-fonts.liquid (loaded by oree-head). ------------------------------------------------------------------------- */ body { font-family: var(--font-sans); font-weight: 300; font-size: var(--fs-body); line-height: 1.6; color: var(--ink-900); background-color: var(--canvas); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } h1, h2, h3, h4, h5, h6, .h0, .h1, .h2, .h3, .h4, .h5, .h6 { font-family: var(--font-sans); font-weight: var(--heading-weight, 300); letter-spacing: -0.01em; line-height: 1.05; color: var(--ink-900); text-wrap: balance; } h1, .h0, .h1 { font-size: var(--fs-h1); } h2, .h2 { font-size: var(--fs-h2); letter-spacing: -0.008em; } h3, .h3 { font-size: var(--fs-h3); font-weight: 400; letter-spacing: -0.005em; } h4, .h4, h5, .h5, h6, .h6 { font-weight: 500; } p { line-height: 1.6; text-wrap: pretty; } .rte { color: var(--ink-700); line-height: 1.65; } .rte a { color: var(--ink-900); text-decoration: none; border-bottom: 1px solid var(--rule-soft); transition: color var(--dur-base) var(--ease-quiet), border-color var(--dur-base) var(--ease-quiet); } .rte a:hover { color: var(--ember-500); border-bottom-color: var(--ember-500); } /* Eyebrows / subheadings / kickers — wide-tracked uppercase. VERIFY: Vessel may name these .caption, .kicker, .subheading or .eyebrow */ .caption, .kicker, .subheading, .eyebrow, .caption-with-letter-spacing { font-family: var(--font-sans); font-weight: 500; font-size: 0.6875rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--ink-500); } ::selection { background: rgba(154, 79, 61, 0.14); } /* ------------------------------------------------------------------------- 2b · ANNOUNCEMENT BAR — keep the note truly centered. Vessel lays the bar out as a 3-column grid (utility slots left/right); when a side slot is wider than its twin the message drifts off-center. We centre the message column and let the side slots overlap-align. ------------------------------------------------------------------------- */ .announcement-bar, announcement-bar-component, .announcement-bar__inner, .announcement-bar section { text-align: center; } .announcement-bar__message, .announcement-bar__slide, .announcement-bar p { text-align: center; justify-content: center; margin-inline: auto; } /* If the bar is a grid with side utility columns, centre the middle and pin the utilities to the edges without reserving asymmetric space. */ .announcement-bar > .grid, .announcement-bar__inline-container { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; } .announcement-bar > .grid > :first-child:not(:only-child) { justify-self: start; } .announcement-bar > .grid > :last-child:not(:only-child) { justify-self: end; } /* ------------------------------------------------------------------------- 3 · BUTTONS — square, quiet, opacity-hover. No scale, no bounce. Covers Vessel's buttons + Shopify-rendered ones (dynamic checkout button keeps its function; we only set shape/type). Checkout itself is untouchable by theme CSS and stays 100% stock. ------------------------------------------------------------------------- */ .button, .btn, button.button, .shopify-challenge__button, .customer button[type="submit"], .shopify-payment-button__button--unbranded { font-family: var(--font-sans); font-weight: 500; font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase; border-radius: 0; box-shadow: none; transition: opacity var(--dur-fast) var(--ease-quiet); } .button:hover, .btn:hover, .shopify-payment-button__button--unbranded:hover { opacity: 0.6; } .button:active, .btn:active { opacity: 0.4; transform: none; } /* Primary = ink. Secondary/outline = hairline ink. Never ember fills. */ .button:not(.button--secondary):not(.button--tertiary), .btn--primary { background-color: var(--ink-900); color: var(--canvas); border: 1px solid var(--ink-900); } .button--secondary, .button--tertiary, .btn--secondary { background-color: transparent; color: var(--ink-900); border: 1px solid var(--ink-900); } /* Text links with arrows — quiet underline, ember on hover */ .link, .link--text, .full-unstyled-link.underlined-link, .underlined-link { color: var(--ink-900); text-underline-offset: 4px; text-decoration-color: var(--rule-soft); transition: color var(--dur-base) var(--ease-quiet), text-decoration-color var(--dur-base) var(--ease-quiet); } .link:hover, .underlined-link:hover { color: var(--ember-500); text-decoration-color: var(--ember-500); } /* ------------------------------------------------------------------------- 4 · PRODUCT CARDS & COLLECTION GRID — museum label, not store shelf. The image IS the card: no border, no background, no lift. Hover fades the photo to 92% over 420ms; the title tracking opens a hair. VERIFY: Vessel's card root — commonly .product-card, .card, .card-wrapper or product-card-component. ------------------------------------------------------------------------- */ .card, .card-wrapper, .product-card, product-card, .collection .grid__item .card { background: transparent; border: none; border-radius: 0; box-shadow: none; } .card__media, .product-card__media, .media { border-radius: 0; background-color: var(--canvas-soft); } .card__media img, .product-card__media img, .card-wrapper .media img { transition: opacity var(--dur-base) var(--ease-quiet); } .card-wrapper:hover .media img, .product-card:hover img, .card:hover .card__media img { opacity: 0.92; transform: none; } .card__heading, .product-card__title, .card__information .card__heading a { font-family: var(--font-sans); font-weight: 400; font-size: 1.25rem; letter-spacing: 0; color: var(--ink-900); transition: letter-spacing var(--dur-base) var(--ease-quiet); } .card-wrapper:hover .card__heading, .product-card:hover .product-card__title { letter-spacing: 0.005em; } /* Price — quiet ink; sale/accent price wears ember (gold-leaf use) */ .price, .price__regular, .product-card__price { font-family: var(--font-sans); font-weight: 400; font-size: 0.9375rem; color: var(--ink-500); } .price--on-sale .price-item--sale, .price__sale { color: var(--ember-500); } .price--compare, .price__compare, s.price-item { color: var(--ink-300); } /* Badges — pill chips, hairline, never loud */ .badge, .product-badge, .card__badge .badge { border-radius: 999px; border: 1px solid var(--rule-soft); background: var(--paper-00); color: var(--ink-700); font-weight: 500; font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase; box-shadow: none; } .badge--sold-out { background: transparent; color: var(--ink-500); } /* Grid breathing room — ECOTONE leans generous. VERIFY: Vessel grid gap variable or class (.collection .grid). */ .collection .grid, .collection-grid, .product-grid { --grid-desktop-horizontal-spacing: clamp(36px, 4vw, 48px); --grid-desktop-vertical-spacing: clamp(40px, 5vw, 64px); --grid-mobile-horizontal-spacing: 16px; --grid-mobile-vertical-spacing: 48px; } /* ------------------------------------------------------------------------- 5 · FORMS & INPUTS — underline fields, square corners, no glow. (Covers newsletter signup, contact, search. Cart logic untouched.) ------------------------------------------------------------------------- */ input[type="text"], input[type="email"], input[type="tel"], input[type="number"], input[type="search"], textarea, select, .field__input, .text-area, .select__select { font-family: var(--font-sans); font-weight: 300; border-radius: 0; background-color: transparent; color: var(--ink-900); box-shadow: none; } .field__input:focus, input:focus-visible, textarea:focus-visible { outline: 1px solid var(--ink-300); outline-offset: 2px; box-shadow: none; } .field__label, label { font-family: var(--font-sans); color: var(--ink-500); } ::placeholder { color: var(--ink-300); opacity: 1; } /* ------------------------------------------------------------------------- 6 · STRUCTURE SKIN — rules, dividers, section rhythm. Visual only: borders thin to hairlines, separators calm down. ------------------------------------------------------------------------- */ hr, .divider { border: none; border-top: 1px solid var(--rule-hairline); } /* Header/footer SKIN ONLY — inherit paper + ink + hairline. No layout, no display, no positioning rules here, ever. */ .header-wrapper, .section-header, header.header { background-color: var(--canvas); border-bottom: 1px solid var(--rule-hairline); } /* Announcement bar — remove the dark prev/next blocks; arrows inherit the bar's text colour and sit quietly on the ember field. */ [class*="announcement"] button, [class*="announcement"] .slider-button, announcement-bar button, .announcement-bar__arrow { background: transparent !important; background-color: transparent !important; border: none !important; box-shadow: none !important; color: inherit !important; } .footer, .section-footer footer { background-color: var(--canvas); border-top: 1px solid var(--rule-hairline); color: var(--ink-700); } .footer__heading, .footer-block__heading { font-weight: 500; font-size: 0.6875rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--ink-500); } /* Drawer/modal skin — paper tone + ECOTONE shadow, square edges. Behaviour (open/close, AJAX) remains Vessel's. NOTE: never style the bare `cart-drawer` / `.cart-drawer` host — in Vessel that element wraps the header cart ICON as well as the panel, so a background on it shows up as a white block in the header. */ cart-drawer .drawer__inner, .drawer__inner, .cart-drawer dialog, .cart-drawer__dialog, .cart-drawer .cart-drawer__inner { background-color: var(--canvas); border-radius: 0; box-shadow: var(--elev-drop); } /* The host stays transparent so the icon sits naked on the header */ cart-drawer, .cart-drawer { background-color: transparent; box-shadow: none; } /* ------------------------------------------------------------------------- 7 · MOTION DISCIPLINE — no zooms, no lifts, no springs. Vessel ships hover scale-ups on media; ECOTONE forbids them. ------------------------------------------------------------------------- */ .card:hover .media img, .card-wrapper:hover .media img, .product-card:hover .product-card__media img { transform: none; } @media (prefers-reduced-motion: reduce) { * { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; } } /* ------------------------------------------------------------------------- 8 · HAND-FONT ENFORCEMENT — Belmonte Ballpoint on every handwritten slot. Section files carry these rules too, but this asset-level safety net guarantees the hand voice even if an older section version is live. ------------------------------------------------------------------------- */ .oree-hand, .oree-intro__note, .oree-card__note, .oree-sbc__note, .oree-quote__sig, .oree-nl__accent, .oree-craft__hand, .oree-values__hand, .oree-band__caption, .oree-steaser__caption, .oree-showcase__frame figcaption, .oree-room-image figcaption { font-family: var(--font-hand) !important; font-style: italic !important; } /* ------------------------------------------------------------------------- 9 · CART DRAWER — museum receipt, not mini-store. Skin only: paper panel, hairline rows, square media, quiet quantity stepper, ink checkout button. Behaviour (AJAX add/remove) stays Vessel's. VERIFY: row/heading class names in DevTools if a rule doesn't take. ------------------------------------------------------------------------- */ /* Panel title */ cart-drawer .drawer__heading, .cart-drawer__heading, .cart-drawer h2, cart-drawer-component h2 { font-family: var(--font-sans); font-weight: 300; font-size: 1.75rem; letter-spacing: -0.01em; color: var(--ink-900); text-transform: none; } /* Header zone — hairline under it */ cart-drawer .drawer__header, .cart-drawer__header, .cart-drawer header { background: var(--canvas); border-bottom: 1px solid var(--rule-hairline); box-shadow: none; } /* Close button — quiet glyph */ cart-drawer .drawer__close, .cart-drawer__close, .cart-drawer button[aria-label*="lose"] { background: transparent; border: none; box-shadow: none; color: var(--ink-700); transition: opacity var(--dur-fast) var(--ease-quiet); } cart-drawer .drawer__close:hover, .cart-drawer__close:hover { opacity: 0.6; } /* Line items — hairline-separated rows, square thumbs */ cart-drawer .cart-item, .cart-drawer .cart-item, .cart-drawer__item, cart-items-component .cart-item { border-bottom: 1px solid var(--rule-hairline); background: transparent; } cart-drawer .cart-item__media img, .cart-item img, .cart-drawer__item img { border-radius: 0; background-color: var(--canvas-soft); } cart-drawer .cart-item__name, .cart-item__name, .cart-drawer__item-title, .cart-item .product-title { font-family: var(--font-sans); font-weight: 400; font-size: 1rem; letter-spacing: 0; color: var(--ink-900); text-decoration: none; } /* Variant line under the name — quiet meta */ cart-drawer .cart-item__options, .cart-item .product-option, .cart-drawer__item-options, .cart-item dl { font-size: 0.8125rem; font-weight: 300; color: var(--ink-500); } /* Line price */ cart-drawer .cart-item .price, .cart-drawer__item .price { color: var(--ink-700); font-weight: 400; } /* Quantity stepper — hairline box, square, no inner shadows */ cart-drawer quantity-input, .cart-drawer .quantity, .quantity, quantity-selector-component { border: 1px solid var(--rule-soft); border-radius: 0; background: transparent; box-shadow: none; } .quantity__button, quantity-input button, .quantity button { background: transparent; border: none; color: var(--ink-700); box-shadow: none; transition: opacity var(--dur-fast) var(--ease-quiet); } .quantity__button:hover, quantity-input button:hover { opacity: 0.6; } .quantity__input, quantity-input input, .quantity input { border: none; background: transparent; font-family: var(--font-sans); font-weight: 400; color: var(--ink-900); } /* Remove — quiet text, ember on hover */ cart-drawer cart-remove-button a, .cart-item cart-remove-button, .cart-drawer__item-remove, button.cart-item__remove { color: var(--ink-500); background: transparent; border: none; box-shadow: none; } cart-drawer cart-remove-button a:hover, .cart-drawer__item-remove:hover { color: var(--ember-500); } /* Footer — subtotal + checkout. Hairline above; total price wears ember. */ cart-drawer .drawer__footer, .cart-drawer__footer, .cart-drawer footer { background: var(--canvas); border-top: 1px solid var(--rule-hairline); box-shadow: none; } cart-drawer .totals__subtotal, .cart-drawer__subtotal-label, .totals h2, .totals__total { font-family: var(--font-sans); font-weight: 500; font-size: 0.6875rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--ink-500); } cart-drawer .totals__subtotal-value, .cart-drawer__subtotal-value, .totals__total-value { font-family: var(--font-sans); font-weight: 400; font-size: 1.375rem; letter-spacing: 0; text-transform: none; color: var(--ember-500); } /* Tax note — small print */ cart-drawer .tax-note, .cart-drawer__tax-note, .cart__tax-note { font-size: 0.75rem; font-weight: 300; color: var(--ink-300); } /* Empty state — calm, centered */ cart-drawer .cart__empty-text, .cart-drawer__empty, .is-empty .cart__empty-text { font-family: var(--font-sans); font-weight: 300; font-size: 1.25rem; color: var(--ink-700); } /* Overlay behind the drawer — warm ink wash, not pure black */ cart-drawer .cart-drawer__overlay, .drawer__overlay { background: rgba(26, 24, 20, 0.32); } /* ------------------------------------------------------------------------- 9b · VESSEL-VERIFIED CART SELECTORS (confirmed 2026-06-20 via DevTools). The live Vessel cart drawer uses different class names than the generic §9 rules above assumed, so none of them bit. These match the real markup and win on specificity / !important over Vessel's own .button fill. Skin only — no behaviour, no layout change. heading .cart-drawer__heading > h4 items cart-items-component · .cart-items__* stepper .cart-items__quantity .quantity-minus / .quantity-plus (carry .button) remove .cart-items__remove (carries .button) checkout .cart__checkout-button ------------------------------------------------------------------------- */ /* Heading — "Cart" as a small uppercase eyebrow label (minimalist redesign, matching the reference's "1 ITEM" treatment). The literal "N ITEM(S)" text and the bag icon need the Liquid header edit — see the handoff note. */ .cart-drawer__dialog h1, .cart-drawer__dialog h2, .cart-drawer__dialog h3, .cart-drawer__dialog h4, .cart-drawer__heading, .cart-drawer__heading h4 { font-family: var(--font-sans) !important; font-weight: 500 !important; font-size: 0.8125rem !important; letter-spacing: 0.14em !important; text-transform: uppercase !important; } /* Quantity stepper — strip Vessel's solid .button fill back to a quiet hairline box with transparent +/- glyphs. */ .cart-items__quantity { border: none; background: transparent; box-shadow: none; } .cart-items__quantity .quantity-minus, .cart-items__quantity .quantity-plus, .cart-items__quantity .button.quantity-minus, .cart-items__quantity .button.quantity-plus { background: transparent !important; border: none !important; color: var(--ink-700) !important; box-shadow: none !important; border-radius: 0 !important; transition: opacity var(--dur-fast) var(--ease-quiet); } .cart-items__quantity .quantity-minus:hover, .cart-items__quantity .quantity-plus:hover { opacity: 0.6; } .cart-items__quantity input { border: none; background: transparent; font-family: var(--font-sans); font-weight: 400; color: var(--ink-900); } /* Remove — drop Vessel's solid .button box; quiet ink glyph, ember on hover. */ .cart-items__remove, button.cart-items__remove, .button.cart-items__remove { background: transparent !important; border: none !important; box-shadow: none !important; border-radius: 0 !important; color: var(--ink-500) !important; } .cart-items__remove:hover, .button.cart-items__remove:hover { color: var(--ember-500) !important; opacity: 1; } /* Line-item rows — hairline-separated within the items component. */ cart-items-component .cart-items__item, .cart-items__item { border-bottom: 1px solid var(--rule-hairline); background: transparent; } cart-items-component img { border-radius: 0; } /* Close (X) — carries Vessel's .button fill; strip to a quiet ink glyph. */ .cart-drawer__close-button, .close-button.cart-drawer__close-button, .button.cart-drawer__close-button { background: transparent !important; border: none !important; box-shadow: none !important; border-radius: 0 !important; color: var(--ink-700) !important; transition: opacity var(--dur-fast) var(--ease-quiet); } .cart-drawer__close-button:hover { opacity: 0.6 !important; } /* Panel tone — Vessel paints the inner panel a cool grey (#F5F4F2), which reads as a paler "band" behind the header against the item area below and is cooler than the site's warm paper. Repaint the whole drawer to one warm bone tone so there is no band and it matches the site. */ /* Panel tone — match the LIVE SITE background exactly (#F5F4F2, measured from document.body). The design-system warm bone (--paper-01 #F1ECE2) is NOT what the live theme actually uses, so match the site, not the token. Body + footer are made transparent below so this one tone fills the whole drawer. */ .cart-drawer__dialog, .cart-drawer__inner, .cart-drawer__dialog > header, .cart-drawer__dialog [class*="__header"] { background: #F5F4F2 !important; } /* Alignment — the header has 20px left padding but the items/content area has 0, so line items sat left of the "Cart" title and the footer. Give the content the same 20px gutters so everything lines up under the header. */ /* Alignment + spacing. Measured: checkout column = 36px from the dialog edge, but the title sat at 20px and the product at 40px. Pull the title and the content in to that same 36px column so the whole drawer shares one gutter, and add top breathing room between the "Cart" header and the first item. The checkout/shop/payment column is left exactly as it was. */ .cart-drawer__content { padding-left: 16px !important; /* item internal offset (+20) lands at 36 */ padding-right: 16px !important; padding-top: 40px !important; /* space under the "Cart" header */ } .cart-drawer__header { padding-left: 36px !important; /* title aligns with product + checkout */ } /* Body + footer paint themselves pure white (Vessel color-scheme-1) on top of the dialog — make them transparent so the warm tone shows through. */ .cart-drawer__content, .cart-drawer__summary { background: transparent !important; } /* Stepper — the real component is , which carries a grey 5%-ink fill (and so does its input). Strip both to transparent; keep only the outer hairline box. */ .quantity-selector, .quantity-selector input, cart-quantity-selector-component { background: transparent !important; box-shadow: none !important; } .quantity-selector { border: none !important; border-radius: 0 !important; } /* Checkout — keep ink fill, square corners, quiet. */ .cart__checkout-button { border-radius: 0; } /* ------------------------------------------------------------------------- 9c · MINIMALIST CART (museum-receipt redesign, 2026-06-21). Uppercase product title, quiet grey variant, bare stepper, and a stripped footer: discount field + express wallet buttons + tax note hidden, with a single CHECK OUT bar. The "Estimated total" line is kept (quiet) so the price stays visible without a Liquid edit — if you move the price into the CHECK OUT button (handoff snippet), add `.cart-totals { display: none }`. ------------------------------------------------------------------------- */ /* Product title — uppercase, set like a label */ a.cart-items__title { text-transform: uppercase; font-weight: 500 !important; font-size: 0.8125rem !important; letter-spacing: 0.04em; color: var(--ink-900) !important; } /* Variant / options (“Cumin” etc.) — quiet grey */ cart-items-component dd { color: var(--ink-500) !important; font-weight: 400; } /* Discount field — removed from the drawer */ .cart-drawer__summary details, cart-discount-component, [class*="cart-discount"] { display: none !important; } /* Express wallet buttons (Shop Pay / PayPal / G Pay) — removed for the clean single-button footer. Delete this rule to bring them back. */ .additional-checkout-buttons, .cart-drawer__dynamic-checkout { display: none !important; } /* Tax / duties note — removed (the discount error s stay hidden too) */ .cart-drawer__summary small:not(.cart-discount__error-text) { display: none !important; } /* Estimated total — kept but quiet: eyebrow label, plain-ink value */ .cart-totals__total-label { font-weight: 500 !important; font-size: 0.6875rem !important; letter-spacing: 0.14em !important; text-transform: uppercase !important; color: var(--ink-500) !important; } .cart-totals__total-value { color: var(--ink-900) !important; font-weight: 400 !important; } /* ------------------------------------------------------------------------- 10 · CUSTOMER ACCOUNT (legacy/theme pages only) — login, register, orders, addresses. New (Shopify-hosted) customer accounts ignore theme CSS — brand those under Settings → Customer accounts instead. ------------------------------------------------------------------------- */ .customer { font-family: var(--font-sans); color: var(--ink-900); } .customer h1 { font-weight: 300; letter-spacing: -0.01em; } .customer h2, .customer h3 { font-weight: 400; } /* Forms — underline fields (extends §5), generous spacing */ .customer .field input, .customer input[type="email"], .customer input[type="password"] { border: none; border-bottom: 1px solid var(--ink-300); border-radius: 0; background: transparent; box-shadow: none; } .customer .field input:focus { border-bottom-color: var(--ink-900); outline: none; } .customer label { font-weight: 500; font-size: 0.6875rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--ink-500); } .customer a { color: var(--ink-900); text-decoration-color: var(--rule-soft); text-underline-offset: 4px; } .customer a:hover { color: var(--ember-500); } /* Orders table — hairline editorial table, eyebrow headers */ .customer table { border-collapse: collapse; border: none; box-shadow: none; } .customer thead th { font-weight: 500; font-size: 0.6875rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--ink-500); border-bottom: 1px solid var(--ink-900); background: transparent; } .customer tbody td, .customer tbody th { border: none; border-bottom: 1px solid var(--rule-hairline); font-weight: 300; color: var(--ink-700); background: transparent; } .customer tbody tr:hover td { background: var(--canvas-soft); } /* Order status badges — quiet pills */ .customer .badge, .customer .order-status { border-radius: 999px; border: 1px solid var(--rule-soft); background: transparent; color: var(--ink-700); font-size: 10px; font-weight: 500; letter-spacing: 0.1em; text-transform: uppercase; } /* Addresses — cards become hairline-ruled blocks, no boxes */ .customer .addresses li, .customer [data-address] { border: none; border-top: 1px solid var(--rule-hairline); border-radius: 0; background: transparent; box-shadow: none; } /* Pagination — quiet numerals */ .customer .pagination a, .customer .pagination span { border: none; background: transparent; color: var(--ink-500); } .customer .pagination [aria-current], .customer .pagination .current { color: var(--ember-500); } /* ------------------------------------------------------------------------- 11 · MOBILE NAVIGATION DRAWER (Vessel/Horizon) — two reported bugs: (a) the drawer's link text reads small on phones, and (b) the drawer panel doesn't reach the right edge of the screen — Horizon's default `--drawer-width: 95vw` leaves a ~5vw sliver of the page showing behind it, which reads as "scaling too wide" / a layout glitch. Skin only: sizes + the drawer width token, no structural change. VERIFY: class names below match Horizon's `.menu-drawer__menu-item*` and `.menu-list--mobile` — confirm in DevTools if a rule doesn't take. ------------------------------------------------------------------------- */ @media (max-width: 749px) { /* (b) Full-bleed drawer — no reveal-strip of the page behind it. */ menu-drawer, .menu-drawer, .drawer, #header-component [class*="drawer"] { --drawer-width: 100vw !important; --drawer-max-width: 100vw !important; } html, { overflow-x: hidden; } /* (a) Nav type — bumped ~30% total over Horizon's stock mobile sizing. */ .menu-drawer__menu-item-text, .menu-drawer__menu-item, a.menu-drawer__menu-item { font-size: 20px !important; } .menu-drawer__menu-item--child, .menu-drawer__submenu .menu-drawer__menu-item-text { font-size: 17px !important; } .menu-list--mobile .menu-list__link, .menu-list--mobile a { font-size: 16px !important; } .oree-header__navlink { font-size: 15px; } } /* Quote "Voice" swap — handwritten quote, typeset signature. Placed after the net above so it wins for sections set to the swapped voice. Carries sizes too, in case the live section CSS is an older version. */ .oree-quote--hand .oree-quote__text { font-family: var(--font-hand) !important; font-style: italic !important; font-weight: 400; font-size: clamp(30px, 3.4vw, 44px); line-height: 1.3; letter-spacing: 0; } .oree-quote--hand .oree-quote__sig { font-family: var(--font-sans) !important; font-style: normal !important; font-size: 15px; letter-spacing: 0.04em; }