/** Shopify CDN: Minification failed Line 66:0 Unexpected "{" Line 66:1 Expected identifier but found "%" Line 67:14 Unexpected "{" Line 67:23 Expected ":" Line 67:30 Unexpected "{" Line 68:11 Expected identifier but found whitespace Line 68:13 Unexpected "{" Line 68:22 Expected ":" Line 69:9 Expected identifier but found whitespace Line 69:13 Unexpected "{" ... and 25 more hidden warnings **/ /* ============================================= PREMIUM SPIRITS PDP — CUSTOM STYLES Colour scheme-aware: tokens map to Dawn's --color-* scheme variables so the Shopify theme editor colour schemes work correctly. ============================================= */ /* ── DESIGN TOKENS ───────────────────────────── Map our PDP tokens onto Dawn's scheme vars. Dawn exposes these per-scheme on the element: --color-background page background --color-foreground primary text --color-foreground-secondary secondary/muted text (not always present — we derive) --color-border rule / divider colour --color-button primary button background --color-button-text primary button label --color-base-background-1 card / surface bg --color-base-background-2 slightly offset surface We alias these onto our own --cream / --ink / --border / --muted names so nothing else in this file needs to change. ─────────────────────────────────────────────── */ :root { /* Brand accent — stays fixed; override via metafield */ --gold: #9a7b3f; /* Brass */ --gold-light: #2e3d33; /* Juniper — brand hover state for filled buttons */ --accent: var(--gold); /* Typography */ --font-display: 'Newsreader', serif; --font-body: 'Hanken Grotesk', sans-serif; } /* Map PDP tokens → Dawn scheme vars. These cascade from the scheme color-scheme class Dawn applies to or the section wrapper, so they automatically update when the scheme changes. */ product-info, .pdp-sticky-bar { --cream: rgb(var(--color-base-background-1)); --cream-dark: rgb(var(--color-base-background-2)); --ink: rgb(var(--color-foreground)); --ink-soft: rgba(var(--color-foreground), 0.75); --muted: rgba(var(--color-foreground), 0.5); --border: rgba(var(--color-foreground), 0.12); } /* Per-product accent override via metafield */ {%- if product.metafields.custom.accent_colour != blank -%} #MainProduct-{{ section.id }} { --accent: {{ product.metafields.custom.accent_colour }}; --gold: {{ product.metafields.custom.accent_colour }}; } {%- endif -%} /* ── SECTION PADDING ── */ .section-{{ section.id }}-padding { padding-top: {{ section.settings.padding_top | times: 0.75 | round: 0 }}px; padding-bottom: {{ section.settings.padding_bottom | times: 0.75 | round: 0 }}px; } @media (min-width: 750px) { .section-{{ section.id }}-padding { padding-top: {{ section.settings.padding_top }}px; padding-bottom: {{ section.settings.padding_bottom }}px; } } /* Apply the scheme background to the section so Dawn's gradient class picks up the right colour. */ .color-{{ section.settings.color_scheme }}.gradient { background-color: #faf7f0 !important; } /* ───────────────────────────────────────────── TYPOGRAPHY OVERRIDES (Dawn rem-safe) ───────────────────────────────────────────── */ .pdp-breadcrumb, .pdp-breadcrumb a { font-size: 13px !important; } .pdp-vendor { font-size: 11px !important; } .pdp-title { font-size: 28px !important; line-height: 1.15 !important; } @media (min-width: 750px) { .pdp-title { font-size: 36px !important; } } @media (min-width: 1024px) { .pdp-title { font-size: 44px !important; } } .pdp-review-count { font-size: 13px !important; } .pdp-star { width: 16px !important; height: 16px !important; } .pdp-price-current { font-size: 26px !important; } .pdp-price-compare { font-size: 17px !important; } .pdp-price-block .price, .pdp-price-block .price__regular, .pdp-price-block .price-item, .pdp-price-block .price-item--regular { font-size: 26px !important; } .pdp-short-desc, .pdp-short-desc p { font-size: 14px !important; line-height: 1.75 !important; } .pdp-option-label { font-size: 11px !important; } .pdp-opt-btn { font-size: 13px !important; } .pdp-spec-label { font-size: clamp(9px, 2vw, 10px) !important; } .pdp-spec-value { font-size: clamp(12px, 2.5vw, 14px) !important; } .pdp-qty button { font-size: 16px !important; } .pdp-qty input { font-size: 14px !important; } .pdp-atc-btn { font-size: 12px !important; } .pdp-trust-icon { width: 20px !important; height: 20px !important; } .pdp-trust-title { font-size: 10px !important; } .pdp-trust-sub { font-size: 11px !important; } .pdp-tab-btn { font-size: 11px !important; } .pdp-tab-panel p, .pdp-tab-panel .rte, .pdp-tab-panel .rte p { font-size: 14px !important; line-height: 1.8 !important; } .pdp-tasting-note-title { font-size: 16px !important; } .pdp-tasting-note-body { font-size: 14px !important; } .pdp-details-label { font-size: 11px !important; } .pdp-details-value { font-size: 14px !important; } .pdp-related-heading { font-size: 24px !important; } @media (min-width: 750px) { .pdp-related-heading { font-size: 30px !important; } } .pdp-rel-title { font-size: 14px !important; } @media (min-width: 750px) { .pdp-rel-title { font-size: 16px !important; } } .pdp-rel-price { font-size: 13px !important; } .pdp-rel-badge, .pdp-badge { font-size: 10px !important; } .pdp-save-pill { font-size: 11px !important; } /* ───────────────────────────────────────────── LAYOUT ───────────────────────────────────────────── */ /* Top padding replaces the space the breadcrumb used to hold open (.pdp-breadcrumb was 16+20px / 24+32px); it was removed 12 Sep 2026 and the grid ended up flush against the header. */ .pdp-wrapper { max-width: 1400px; margin: 0 auto; padding: 36px 20px 40px; } @media (min-width: 750px) { .pdp-wrapper { padding: 56px 40px 60px; } } @media (min-width: 1200px) { .pdp-wrapper { padding: 56px 60px 60px; } } .pdp-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 32px; align-items: start; } @media (min-width: 1024px) { .pdp-grid { gap: 64px; } } @media (max-width: 749px) { .pdp-grid { grid-template-columns: 1fr; gap: 24px; } } /* ───────────────────────────────────────────── BREADCRUMB ───────────────────────────────────────────── */ .pdp-breadcrumb { font-family: var(--font-body); letter-spacing: 0.06em; color: var(--muted); padding: 16px 0 20px; } @media (min-width: 750px) { .pdp-breadcrumb { padding: 24px 0 32px; } } .pdp-breadcrumb a { color: var(--muted); text-decoration: none; transition: color 0.15s; } .pdp-breadcrumb a:hover { color: var(--ink); } .pdp-breadcrumb span { margin: 0 4px; } /* ───────────────────────────────────────────── MEDIA COLUMN ───────────────────────────────────────────── */ .pdp-media { display: flex; flex-direction: column; gap: 8px; } @media (min-width: 750px) { .pdp-media { flex-direction: row; gap: 12px; position: sticky; top: 24px; } } @media (max-width: 749px) { .pdp-media { width: 100%; max-width: 100%; overflow: hidden; } .pdp-main-image { width: 100%; order: 1; } .pdp-thumbnails { order: 2; flex-direction: row; width: 100%; overflow-x: auto; } } .pdp-thumbnails { display: flex; flex-direction: row; gap: 8px; order: 2; overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; } .pdp-thumbnails::-webkit-scrollbar { display: none; } @media (min-width: 750px) { .pdp-thumbnails { flex-direction: column; order: 0; width: 80px; flex-shrink: 0; overflow-x: visible; } } .pdp-thumb { width: 64px; height: 64px; flex-shrink: 0; border: 2px solid var(--border); overflow: hidden; cursor: pointer; transition: border-color 0.15s; background: var(--cream-dark); } @media (min-width: 750px) { .pdp-thumb { width: 80px; height: 80px; } } .pdp-thumb.active, .pdp-thumb:hover { border-color: var(--accent); } .pdp-thumb img { width: 100%; height: 100%; object-fit: cover; } .pdp-main-image { flex: 1; order: 1; overflow: hidden; position: relative; aspect-ratio: 1 / 1; width: 100%; display: flex; align-items: center; justify-content: center; } .pdp-main-image img { width: 100%; height: 100%; object-fit: contain; object-position: center; display: block; transition: opacity 0.15s ease; } .pdp-badge { position: absolute; top: 16px; left: 16px; background: var(--accent); color: #fff; font-family: var(--font-body); font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; padding: 4px 10px 5px; } /* ───────────────────────────────────────────── INFO COLUMN ───────────────────────────────────────────── */ .pdp-info { display: flex; flex-direction: column; gap: 0; } .pdp-info variant-selects, .pdp-info variant-radios, .pdp-info .product-form__input--dropdown, .pdp-info .product-form__input--pill, .pdp-info .select, .pdp-info .product__title h1, .pdp-info .product__title a, .pdp-info > .product__description, .pdp-atc-row .shopify-payment-button, .pdp-atc-row product-form, .pdp-atc-row .product-form, .pdp-atc-row .product-form__buttons { display: none !important; } .pdp-vendor { font-family: var(--font-body); font-weight: 500; letter-spacing: 0.3em; text-transform: uppercase; color: var(--accent); margin: 0 0 10px; } .pdp-title { font-family: var(--font-display); font-weight: 700; color: var(--ink); line-height: 1.15; margin: 0 0 10px; letter-spacing: 0.04em; text-transform: uppercase; } .pdp-rating-row { display: flex; align-items: center; gap: 8px; margin-bottom: 16px; } .pdp-stars { display: flex; gap: 2px; } .pdp-star { color: var(--accent); } .pdp-review-count { font-family: var(--font-body); color: var(--muted); font-weight: 600; } .pdp-price-block { display: flex; align-items: baseline; gap: 12px; margin-bottom: 20px; } .pdp-price-main-row { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; } .pdp-price-current { font-family: var(--font-display); font-weight: 700; color: var(--accent); letter-spacing: 0.04em; } .pdp-price-compare { font-family: var(--font-display); font-weight: 400; color: var(--muted); text-decoration: line-through; } .pdp-price-block .price, .pdp-price-block .price__regular, .pdp-price-block .price-item, .pdp-price-block .price-item--regular { font-family: var(--font-display) !important; font-weight: 700 !important; color: var(--accent) !important; } .pdp-price-block .price__container { margin: 0; padding: 0; } .pdp-save-pill { display: inline-flex; align-items: center; background: rgba(var(--color-foreground), 0.08); color: var(--ink); font-family: var(--font-body); font-weight: 600; letter-spacing: 0.04em; padding: 3px 9px 4px; border-radius: 100px; white-space: nowrap; } .pdp-short-desc { font-family: var(--font-body); line-height: 1.6; color: var(--muted); margin-bottom: 12px; } @media (max-width: 749px) { .pdp-short-desc, .pdp-short-desc p { font-size: 13px !important; line-height: 1.5 !important; margin-bottom: 8px; } } .pdp-short-desc p { margin: 0; } /* ───────────────────────────────────────────── URGENCY MODULE ───────────────────────────────────────────── */ .pdp-minimal-urgency { margin: 15px 0 25px; padding-top: 15px; border-top: 1px solid var(--border); } .pdp-line-alert { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; } .pdp-line-alert p { margin: 0 !important; font-family: var(--font-body) !important; font-size: 12px !important; color: var(--ink-soft); } .pdp-stats-row { display: flex; gap: 20px; } @media (max-width: 749px) { .pdp-stats-row { flex-direction: column; gap: 8px; } } .pdp-stat-item { display: flex; align-items: center; gap: 6px; font-family: var(--font-body) !important; font-size: 11px !important; color: var(--muted); text-transform: uppercase; letter-spacing: 0.05em; } .pdp-tiny-icon { width: 14px; height: 14px; opacity: 0.7; } .pdp-gold-text { color: var(--accent); } .pulse-dot-small { width: 6px; height: 6px; background: #a3372c; border-radius: 50%; flex-shrink: 0; animation: pulse-tiny 2s infinite; } @keyframes pulse-tiny { 0%, 100% { opacity: 1; } 50% { opacity: 0.4; } } /* ───────────────────────────────────────────── VARIANT PICKER ───────────────────────────────────────────── */ .pdp-variant-picker { margin-bottom: 20px; } .pdp-option-group { margin-bottom: 14px; } .pdp-option-label { font-family: var(--font-display); font-weight: 700; letter-spacing: 0.2em; text-transform: uppercase; color: var(--ink); margin: 0 0 10px; display: block; } .pdp-option-btns { display: flex; flex-wrap: wrap; gap: 8px; max-width: 100%; } .pdp-opt-input { position: absolute; opacity: 0; width: 0; height: 0; pointer-events: none; } .pdp-opt-btn { display: inline-flex; align-items: center; justify-content: center; padding: 10px 20px; border: 1px solid var(--border); font-family: var(--font-display); font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink); background: transparent; cursor: pointer; transition: border-color 0.15s, background 0.15s, color 0.15s; user-select: none; line-height: 1.3; /* Mobile overflow fix */ max-width: 100%; min-width: 0; word-break: break-word; overflow-wrap: anywhere; white-space: normal; text-align: center; box-sizing: border-box; } .pdp-opt-btn:hover { border-color: var(--accent); } .pdp-opt-input:checked + .pdp-opt-btn { background: var(--accent); border-color: var(--accent); color: #fff; } .pdp-opt-btn--unavailable { opacity: 0.4; text-decoration: line-through; cursor: not-allowed; } /* ───────────────────────────────────────────── SPECS ───────────────────────────────────────────── */ .pdp-specs { display: grid; grid-template-columns: repeat(auto-fit, minmax(0, 1fr)); gap: 12px; margin-bottom: 28px; width: 100%; } @media (max-width: 480px) { .pdp-specs { grid-template-columns: repeat(2, 1fr); } } .pdp-spec-item { background: var(--cream-dark); border: 1px solid var(--border); padding: 12px 8px; text-align: center; display: flex; flex-direction: column; justify-content: center; min-width: 0; word-wrap: break-word; } .pdp-spec-label { font-family: var(--font-display); font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); display: block; margin-bottom: 4px; line-height: 1.2; } .pdp-spec-value { font-family: var(--font-body); color: var(--ink); font-weight: 700; line-height: 1.2; } /* ───────────────────────────────────────────── PERFECT FOR ───────────────────────────────────────────── */ .pdp-perfect-for { margin: 30px 0; padding: 20px 0; border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); } .perfect-for-title { font-family: var(--font-display); font-size: 13px; text-transform: uppercase; letter-spacing: 0.1em; margin-bottom: 20px; color: var(--muted); text-align: center; } .perfect-for-grid { display: flex; justify-content: center; gap: 30px; flex-wrap: wrap; } @media (max-width: 749px) { .perfect-for-grid { gap: 15px; } } .perfect-for-item { display: flex; flex-direction: column; align-items: center; gap: 10px; width: 80px; } @media (max-width: 749px) { .perfect-for-item { width: 70px; } } .perfect-for-icon { width: 40px; height: 40px; display: flex; align-items: center; justify-content: center; background: var(--cream); border-radius: 50%; padding: 8px; } .perfect-for-icon svg { width: 100%; height: 100%; stroke: var(--ink); } .perfect-for-label { font-family: var(--font-body); font-size: 11px; text-transform: uppercase; letter-spacing: 0.05em; color: var(--ink); text-align: center; } /* ───────────────────────────────────────────── QUANTITY + ADD TO CART ───────────────────────────────────────────── */ .pdp-atc-row { display: flex; gap: 12px; flex-wrap: wrap; margin-bottom: 2rem;} .pdp-qty { display: flex; flex: 0 0 120px; align-items: center; border: 1px solid var(--border); overflow: hidden; background: transparent; flex-shrink: 0; } .pdp-qty button { background: none; border: none; width: 44px; height: 52px; cursor: pointer; color: var(--ink); transition: background 0.15s; display: flex; align-items: center; justify-content: center; font-family: var(--font-body); } .pdp-qty button:hover { background: var(--cream-dark); } .pdp-qty input { width: 44px; height: 52px; border: none; border-left: 1px solid var(--border); border-right: 1px solid var(--border); text-align: center; font-family: var(--font-body); background: transparent; color: var(--ink); -moz-appearance: textfield; } .pdp-qty input::-webkit-outer-spin-button, .pdp-qty input::-webkit-inner-spin-button { -webkit-appearance: none; } .pdp-atc-form { flex: 1 1 200px; display: flex; } .pdp-atc-btn { flex: 1; width: 100%; height: 52px; background: var(--ink); color: rgb(var(--color-base-background-1)); border: none; font-family: var(--font-body); font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; cursor: pointer; display: flex; align-items: center; justify-content: center; gap: 8px; padding: 0 20px; white-space: nowrap; transition: background 0.2s; } .pdp-atc-btn:hover:not(:disabled) { background: var(--ink-soft); } .pdp-atc-btn:disabled { cursor: not-allowed; } .pdp-atc-btn.pdp-btn--adding, .pdp-sticky-btn.pdp-btn--adding { opacity: 0.6; cursor: not-allowed; background: var(--muted) !important; } .pdp-atc-btn.pdp-btn--added, .pdp-sticky-btn.pdp-btn--added { background: #2e3d33 !important; opacity: 1; } .pdp-atc-error { display: none; font-family: var(--font-body); font-size: 13px; color: #a3372c; margin-top: 8px; padding: 8px 12px; background: rgba(163, 55, 44, 0.08); border: 1px solid rgba(163, 55, 44, 0.25); } .pdp-atc-error.visible { display: block; } .pdp-express-checkout-btn { display: flex; justify-content: center; align-items: center; width: 100%; margin-top: 10px; padding: 16px 24px; background: var(--accent); color: #fff; border: 1px solid var(--accent); font-family: var(--font-display); font-size: 14px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.15em; cursor: pointer; transition: background 0.3s, color 0.3s; } .pdp-express-checkout-btn:hover { background: transparent; color: var(--accent); } /* ── Klaviyo star-rating widget: hide the empty state ── The average-rating app block under the product title is hydrated client-side by Klaviyo, and on a product with no reviews it still renders a row of grey stars reading "0 reviews". Hide it whenever not one star is filled. A product with any review averages at least 1.0, so it always paints a full star; zero reviews paints only kl_reviews__empty_star. Before Klaviyo hydrates, the span is empty and also matches, which suppresses any flash of "0 reviews" on the way in. Deliberately keyed to the star classes, NOT to the link's aria-label: an earlier version of this rule matched button[aria-label^="0 stars, 0 ratings"] and silently stopped working within days when Klaviyo swapped the