/** Shopify CDN: Minification failed Line 17:19 Unexpected "{" Line 17:28 Expected ":" Line 17:34 Unexpected "," **/ /* ========================================================================== CreepyGoth — Premium PDP reskin (DEV only) Reskins the existing Palo Alto product template via CSS + light additive JS. No variant/cart/checkout logic is touched - only presentation. Brand tokens (defined in cg-home.css): --cg-void, --cg-crypt, --cg-bone, --FONT-STACK-HEADING (Cormorant), --FONT-STACK-BODY (Inter). ========================================================================== */ /* ---------- Overall canvas ---------- */ #ProductTemplate--{{ section.id }}, .product-single { background: var(--cg-void); } .product-single { padding-top: clamp(24px, 3vw, 48px); } .product__info-container { max-width: 560px; } /* ---------- Breadcrumb / eyebrow above title ---------- */ .product__block .breadcrumbs, .product-single .breadcrumbs { font-family: var(--FONT-STACK-BODY); font-size: .72rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--cg-mist); opacity: .8; } /* ---------- Title ---------- */ .product__title { font-family: var(--FONT-STACK-HEADING); font-weight: 500; font-size: clamp(1.9rem, 2.6vw, 2.6rem); line-height: 1.08; letter-spacing: -.01em; color: var(--cg-bone); margin: 6px 0 0; } /* ---------- Rating (Judge.me preview badge + native rating snippet) ---------- */ .product__rating { display: flex; align-items: center; gap: 8px; margin-top: 10px; } .product__rating .icon-star--full polygon { fill: var(--cg-bone); } .product__rating__value, .product__rating__count { font-family: var(--FONT-STACK-BODY); font-size: .82rem; color: var(--cg-mist); } .jdgm-prev-badge { margin-top: 10px !important; } .jdgm-prev-badge .jdgm-star.jdgm--on, .jdgm-prev-badge .jdgm-star.jdgm--half { color: var(--cg-bone) !important; } .jdgm-prev-badge__text { font-family: var(--FONT-STACK-BODY) !important; color: var(--cg-mist) !important; } /* ---------- Price ---------- */ .product__price-and-badge { margin-top: 16px; } .product__price { display: flex; align-items: baseline; gap: 10px; font-family: var(--FONT-STACK-BODY); } .product__price--regular { font-size: 1.35rem; font-weight: 600; color: var(--cg-bone); } .product__price--regular.product__price--sale { color: var(--cg-blood, #a3222c); } .product__price--compare { font-size: 1rem; color: var(--cg-mist); opacity: .7; text-decoration: line-through; } /* ---------- Variant selectors: pill/box style (theme already renders boxes; this reskins them) ---------- */ .product__selectors { margin-top: 22px; } .selector-wrapper { margin-bottom: 18px; } .selector-wrapper > label, .selector-wrapper .form__label { display: block; font-family: var(--FONT-STACK-BODY); font-size: .72rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--cg-mist); margin-bottom: 10px; } .radio__fieldset { border: 0; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 8px; } .radio__fieldset legend { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0,0,0,0); } .radio__fieldset--boxes .swatch__button, .radio__fieldset--rectangle .swatch__button, .radio__fieldset .swatch__button { border-radius: 2px; } .swatch__label, .radio__fieldset label.swatch__label, .variant-input-wrap label { display: inline-flex; align-items: center; justify-content: center; min-width: 44px; height: 42px; padding: 0 16px; box-sizing: border-box; font-family: var(--FONT-STACK-BODY); font-size: .82rem; font-weight: 500; color: var(--cg-bone); background: transparent; border: 1px solid var(--cg-iron, #33333a); border-radius: 2px; cursor: pointer; transition: border-color .15s, background .15s, color .15s; } input:checked + .swatch__label, .swatch__input:checked ~ .swatch__label { background: var(--cg-bone); color: var(--cg-void); border-color: var(--cg-bone); } .swatch__label:hover { border-color: var(--cg-bone); } .variant-input-wrap.soldout label, .swatch__label[data-sold-out], .disabled .swatch__label { opacity: .35; text-decoration: line-through; cursor: not-allowed; } /* ---------- Size guide link ---------- */ .product__popup__link { font-family: var(--FONT-STACK-BODY); font-size: .78rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--cg-bone); background: none; border: 0; border-bottom: 1px solid var(--cg-iron, #33333a); padding: 0 0 2px; cursor: pointer; } .product__popup__link:hover { border-color: var(--cg-bone); } /* ---------- Quantity ---------- */ .quantity-selector { border: 1px solid var(--cg-iron, #33333a); border-radius: 2px; background: transparent; } .quantity-selector input { background: transparent; color: var(--cg-bone); font-family: var(--FONT-STACK-BODY); } .quantity-selector button { color: var(--cg-mist); } /* ---------- Primary Add to Cart ---------- */ .product__submit__buttons { margin-top: 22px; display: flex; flex-direction: column; gap: 10px; } .product__submit__add.btn { width: 100%; background: var(--cg-bone); color: var(--cg-void); border: 1px solid var(--cg-bone); font-family: var(--FONT-STACK-BODY); font-size: .88rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; padding: 18px 24px; border-radius: 2px; transition: background .15s, color .15s; } .product__submit__add.btn:hover { background: transparent; color: var(--cg-bone); } .product__submit__add.btn[disabled], .product__submit__add.btn.disabled { background: transparent; color: var(--cg-mist); border-color: var(--cg-iron, #33333a); opacity: .7; } /* Dynamic checkout / Shop Pay: present but visually secondary to primary ATC */ .shopify-payment-button { margin-top: 4px; } .shopify-payment-button__button--unbranded { background: transparent !important; color: var(--cg-bone) !important; border: 1px solid var(--cg-iron, #33333a) !important; border-radius: 2px !important; font-family: var(--FONT-STACK-BODY) !important; letter-spacing: .06em !important; } /* ---------- Sticky info panel (desktop; existing theme JS toggles .is-sticky on [data-product-info]) ---------- */ [data-product-info].is-sticky { background: var(--cg-void); } @media (min-width: 990px) { [data-product-info].is-sticky .product__block:first-child { padding-top: 6px; } } /* ---------- Trust strip (icon_row block, reused for factual shipping/checkout copy) ---------- */ .product__icon__row { display: flex; flex-wrap: wrap; gap: 18px 28px; margin-top: 4px; padding-top: 16px; padding-bottom: 4px; border-top: 1px solid var(--cg-iron, #33333a); } .product__icon__row .icon-row__item { display: flex; align-items: center; gap: 8px; } .product__icon__row .icon-row__item svg, .product__icon__row .icon-row__item .icon { width: 17px; height: 17px; color: var(--cg-mist); flex-shrink: 0; } .product__icon__row .icon-row__item span, .product__icon__row .icon-row__item p { font-family: var(--FONT-STACK-BODY); font-size: .78rem; font-weight: 500; letter-spacing: .02em; color: var(--cg-mist); margin: 0; } .cg-pdp-policy-link { display: inline-block; margin-top: 12px; font-family: var(--FONT-STACK-BODY); font-size: .78rem; color: var(--cg-mist); text-decoration: underline; text-underline-offset: 3px; } .cg-pdp-policy-link:hover { color: var(--cg-bone); } /* ---------- Accordions ---------- */ .product__accordions { margin-bottom: 4px; } .product__accordion { border-top: 1px solid var(--cg-iron, #33333a); } .product__accordion:last-child { border-bottom: 1px solid var(--cg-iron, #33333a); } .product__accordion__title { width: 100%; display: flex; align-items: center; justify-content: space-between; padding: 16px 2px; background: none; border: 0; cursor: pointer; font-family: var(--FONT-STACK-BODY); font-size: .84rem; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--cg-bone); } .product__accordion__inner { font-family: var(--FONT-STACK-BODY); font-size: .92rem; line-height: 1.65; color: var(--cg-mist); padding-bottom: 16px; } .product__accordion__inner a { color: var(--cg-bone); text-decoration: underline; text-underline-offset: 2px; } /* ---------- Share (Task B: sits directly after the accordions block in the DOM - give it deliberate breathing room and its own visual identity so it never reads as if it's inside the accordion stack, collapsed or expanded) ---------- */ .product__accordions + .product__block .share-button, .share-button { margin-top: 28px; padding-top: 0; border-top: none; } .share-button { display: inline-flex; } .share-button .share-link { display: inline-flex; align-items: center; gap: 8px; line-height: 1; font-family: var(--FONT-STACK-BODY); font-size: .78rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--cg-mist); padding: 0; background: none; border: 0; } .share-button .share-link:hover { color: var(--cg-bone); } .share-button .share-link svg, .share-button .share-link .icon { width: 15px; height: 15px; flex-shrink: 0; display: block; } /* ---------- Secure Checkout payment panel (native light-DOM module) ---------- Correction: the previous attempt wrapped Shopify's accelerated-checkout button (Buy with Shop) in a light panel by mistake - that button must stay on the normal dark PDP background, unchanged. The real problem was that Shopify's own "Secure Checkout With" + payment icons live inside 's Shadow DOM, which page CSS cannot reach (confirmed: no useful exposed custom properties either) and which only shows wallets the CURRENT browser/device supports (so Apple Pay never appeared in headless Chromium/Edge testing regardless of whether it's really enabled for this store). Fix: build this informational row from shop.enabled_payment_types via Shopify's native payment_type_svg_tag filter instead (see snippets/cg-secure-checkout.liquid) - the same mechanism the theme's own footer already uses for its payment icons. This is real light DOM, shows every payment type genuinely enabled in Shopify admin regardless of the viewing browser/device, and is fully stylable without touching official logo colors. */ .cg-secure-checkout { /* PDP Final Polish (2026-09-23): owner no longer wants a light/Bone card here - it should read directly on the black PDP. Verified safe: every Shopify payment_type_svg_tag icon (incl. Apple Pay) already renders its own self-contained rounded-card background (brand-colored or white with a subtle border) baked into the official SVG, so none of them need an external light backing to stay legible on black - see individual icon rule below for the one exception (Mastercard's own card fill is very dark and needs a hairline border to stay visible against pure black). */ background: transparent; border: 0; border-radius: 0; padding: 0; margin-top: 18px; text-align: center; } .cg-secure-checkout__heading { font-family: var(--FONT-STACK-BODY); font-size: .78rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--cg-bone); margin: 0 0 12px; } .cg-secure-checkout__icons { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 14px 18px; margin: 0; padding: 0; list-style: none; } .cg-secure-checkout__icons .payment-icon { width: 38px; height: 24px; display: block; } /* Mastercard's own official card background is a very dark near-black fill; against our pure-black PDP it needs a hairline outline to stay defined as a distinct tile. This does not recolor the logo itself, only adds a thin neutral border around its existing self-contained card. */ .cg-secure-checkout__icons .payment-icon[aria-label="Mastercard"] { border-radius: 3px; outline: 1px solid rgba(236, 230, 218, .18); outline-offset: 0; } @media (max-width: 480px) { .cg-secure-checkout__icons { gap: 10px 14px; } .cg-secure-checkout__icons .payment-icon { width: 34px; height: 22px; } } /* ---------- Description ---------- */ .product__description.rte { font-family: var(--FONT-STACK-BODY); font-size: .96rem; line-height: 1.75; color: var(--cg-mist); max-width: 62ch; } .product__description.rte h2, .product__description.rte h3 { font-family: var(--FONT-STACK-HEADING); color: var(--cg-bone); font-weight: 500; margin: 1.4em 0 .5em; } .product__description.rte p { margin: 0 0 1em; } .product__description.rte ul, .product__description.rte ol { padding-left: 1.2em; margin: 0 0 1em; } .product__description.rte li { margin-bottom: .4em; } .product__description.rte strong { color: var(--cg-bone); } .product__description.rte img { max-width: 100%; height: auto; border-radius: 2px; } /* ---------- Judge.me review widget wrapper ---------- */ .product__reviews, #judgeme_product_reviews { font-family: var(--FONT-STACK-BODY); } .jdgm-rev-widg__summary-title { font-family: var(--FONT-STACK-HEADING) !important; color: var(--cg-bone) !important; } .jdgm-star.jdgm--on { color: var(--cg-bone) !important; } /* ---------- Judge.me contrast fix (dark-on-dark correction, PDP Final Visual Correction Round, Task B) --------------------------------------------------- ROOT CAUSE (confirmed via live DOM inspection of Belladonna, 2026-09-23): Judge.me's widget ships two separate theming layers, both authored for a light/white host page, both illegible against CreepyGoth's dark background: 1. Classic widget shell (prev-badge, write-review modal, aggregate rating, pagination) — themed via CSS custom properties on :root: --jdgm-primary-color / --jdgm-secondary-color / --jdgm-reviewer-name-color / --jdgm-star-color / --jdgm-paginate-color, default #542633 (burgundy) or rgba(84,38,51,.1). Measured contrast of #542633 vs our --cg-void (#0A0A0B) background = 1.60:1 (WCAG AA requires 4.5:1 for text) — confirmed insufficient, not assumed. 2. The actual per-product review LIST (a newer Vue-based "revamp" widget, classes jm-review-item / jm-reviewer-info / jm-review-content) sets its OWN custom properties inline per review: --jm-review-widget-text-color was literally #000000 (pure black) and --jm-review-widget-lighter-text-color was #7B7B7B (4.68:1 vs void, 4.40:1 vs crypt — borderline/fails on the Crypt panel background). --jm-review-widget-star-and-histogram-color was the same insufficient #542633 burgundy as above. FIX: override these real, Judge.me-exposed custom properties with our design tokens (Bone #ECE6DA primary, Mist #A9A19A secondary — Mist is the theme's existing "closest muted-light token" to the requested ~#A9A39A). !important is used only because Judge.me sets several of these as non-important INLINE styles per review item, which an unqualified stylesheet rule cannot beat. Font-family / icon glyphs are never touched — color only. */ :root { --jdgm-primary-color: var(--cg-bone) !important; --jdgm-secondary-color: var(--cg-mist) !important; --jdgm-reviewer-name-color: var(--cg-bone) !important; --jdgm-star-color: var(--cg-bone) !important; --jdgm-paginate-color: var(--cg-mist) !important; } .jdgm-review-widget, .jm-review-item { --jm-review-widget-text-color: var(--cg-bone) !important; --jm-review-widget-lighter-text-color: var(--cg-mist) !important; --jm-review-widget-star-and-histogram-color: var(--cg-bone) !important; } /* Safety-net direct overrides for text nodes confirmed not to carry their own inline color (heading, review body copy, reviewer name/date, verified badge, avatar initial) — belt-and-braces in case a given render path doesn't pick up the custom property above. Scoped strictly under Judge.me/jm containers. */ .jdgm-review-widget .jm-text, .jdgm-review-widget .jm-reviewer-info__name, .jdgm-review-widget .jm-reviewer-avatar__initial .jm-text, .jdgm-review-widget .jdgm-review-content__body-content, .jdgm-review-widget .jdgm-review-content__body-content p { color: var(--cg-bone) !important; } .jdgm-review-widget .jm-verified-buyer-badge__text { color: var(--cg-bone) !important; } /* Date / "lighter" meta text explicitly opts into the lighter var inline — this reinforces it at the class level too. */ .jdgm-review-widget .jm-reviewer-info__details .jm-text { color: var(--cg-mist) !important; } .jdgm-review-widget .jm-reviewer-info__name { color: var(--cg-bone) !important; /* name itself stays primary, not muted */ } /* Sort/filter dropdown — native