/*! * woo-canon.css — WP-45 / SD-31 bridge skin (v1) * ----------------------------------------------------------------------------- * Purpose: make the RESTORED WooCommerce core components (woocommerce-layout / * woocommerce-general / -smallscreen — back in the now that the child's * `woocommerce_enqueue_styles __return_empty_array` filter is removed) read as * canon while the real per-page re-skins are designed (WP-49 storefront / * WP-50 product / WP-51 cart grow this file). Token-only: every value is a * design-system-2.0 `--sys-*` custom property (loaded via the `design-system-2` * dependency), so this stays in lockstep with the canon palette/type scale. * * Enqueued by opanije_shop_canon_layer() (functions.php) with deps * [design-system-2, modern-header-2025] and a filemtime cache-bust. * * A11Y: gold used as TEXT on a light surface is always `--sys-color-cta-gold` * (#9c6408, ~4.9:1 on white — SD-QB-A11Y); gold used as a FILL carries #FFFFFF * bold text (the canon .op-btn-primary contrast rule). `!important` is used ONLY * where it is needed to defeat a Woo-core default (notice colors, the tab list * markers, the onsale badge) — noted inline at each site. * ----------------------------------------------------------------------------- */ /* --- NOTICES: canon op-notice system (WP-51, DQ-12 Notice component) --------- * The three notice templates (notices/{error,success,notice}.php) now emit * `op-notice op-notice--{error,success,info}` ALONGSIDE the core * woocommerce-{error,message,info} class (kept for Woo's front-end JS * scroll_to_notices / checkout submit_error and core CSS selectors). Info is * warm Heritage Gold — the default blue box dies store-wide. Values are the * DQ-12 component palette; the info ink is the AA gold #9c6408 (SD-QB-A11Y). * A `.warning` variant is defined for reuse (the design's 4th) even though Woo * only emits three. */ .op-notice { display: flex; align-items: flex-start; gap: 0.85rem; border: 1px solid #EAD9B0; border-left: 4px solid #B7780D; border-radius: 12px; background: #FBF3E1; padding: 0.95rem 1.05rem; margin: 0 0 1rem; font-family: var(--sys-font-body); line-height: var(--sys-line-height-normal); box-sizing: border-box; } /* Neutralise Woo core's absolute ::before/::after glyphs on our re-skinned notices. */ .op-notice::before, .op-notice::after { content: none !important; display: none !important; } .op-notice__icon { flex-shrink: 0; width: 32px; height: 32px; border-radius: 9px; display: flex; align-items: center; justify-content: center; color: #FFFFFF; /* the SVG uses stroke:currentColor */ margin-top: 1px; background: var(--sys-color-cta-gold, #9C6408); } .op-notice__icon svg { display: block; } .op-notice__body { flex: 1; min-width: 0; padding-top: 3px; color: #59554F; font-size: 0.9rem; line-height: 1.45; } .op-notice__body, .op-notice__body p { margin: 0; } .op-notice__body p + p { margin-top: 0.35rem; } .op-notice__list { list-style: none; margin: 0; padding: 0; } .op-notice__list li { list-style: none; margin: 0; padding: 0; } .op-notice__list li + li { margin-top: 0.3rem; } /* Inline links + the add-to-cart "View cart" button inside a notice read canon. */ .op-notice__body a { color: #9C6408; font-weight: 700; } .op-notice__body a:hover { color: #8A5A0A; } .op-notice__dismiss { flex-shrink: 0; width: 30px; height: 30px; border: none; background: transparent; border-radius: 8px; cursor: pointer; color: #888580; display: flex; align-items: center; justify-content: center; padding: 0; margin-top: -1px; transition: background var(--sys-transition-fast, .15s), color var(--sys-transition-fast, .15s); } .op-notice__dismiss:hover { background: rgba(43, 40, 35, 0.06); color: #2B2823; } .op-notice__dismiss:focus-visible { outline: 2px solid #9C6408; outline-offset: 1px; } /* Variants — bar (left border) + icon-chip + body ink (DQ-12 palette). */ .op-notice--success { background: #E7F7F0; border-color: #BFE9D7; border-left-color: #12B886; } .op-notice--success .op-notice__icon { background: #12B886; } .op-notice--info { background: #FBF3E1; border-color: #EAD9B0; border-left-color: #B7780D; } .op-notice--info .op-notice__icon { background: var(--sys-color-cta-gold, #9C6408); } .op-notice--error { background: #FCEBE9; border-color: #F4C9C4; border-left-color: #EF4444; } .op-notice--error .op-notice__icon { background: #EF4444; } .op-notice--warning { background: #FCF3DD; border-color: #F0DCA6; border-left-color: #F59E0B; } .op-notice--warning .op-notice__icon { background: #F59E0B; } /* Stray core notices that never route through our three templates (edge Woo * templates that hardcode the class) still get the canon kill-blue — never Woo's * default blue/grey box. */ .woocommerce-info:not(.op-notice), .woocommerce-message:not(.op-notice), .woocommerce-error:not(.op-notice) { background-color: var(--sys-color-cream) !important; border-top: none !important; border-left: 4px solid var(--sys-color-primary) !important; color: var(--sys-color-ink); font-family: var(--sys-font-body); border-radius: var(--sys-radius-sm); padding: var(--sys-space-4) var(--sys-space-5); line-height: var(--sys-line-height-normal); } .woocommerce-error:not(.op-notice) { border-left-color: var(--sys-color-error) !important; } .woocommerce-info:not(.op-notice)::before, .woocommerce-message:not(.op-notice)::before, .woocommerce-error:not(.op-notice)::before { color: var(--sys-color-primary) !important; } .woocommerce-error:not(.op-notice)::before { color: var(--sys-color-error) !important; } .woocommerce-info:not(.op-notice) a, .woocommerce-message:not(.op-notice) a, .woocommerce-error:not(.op-notice) a { color: var(--sys-color-cta-gold); font-weight: 600; } /* --- BUTTONS: the accessible CTA-gold pill (matches .op-btn-primary) -------- */ .woocommerce a.button, .woocommerce button.button, .woocommerce input.button, .woocommerce #respond input#submit, .woocommerce a.button.alt, .woocommerce button.button.alt { background: var(--sys-color-cta-gold, #9C6408); color: #FFFFFF; /* white-on-CTA-gold fill: WCAG AA */ font-family: var(--sys-font-display); font-size: var(--sys-font-size-body); font-weight: 700; letter-spacing: 0.01em; text-decoration: none; text-align: center; border: none; border-radius: var(--sys-radius-full); padding: var(--sys-space-3) var(--sys-space-6); cursor: pointer; transition: transform var(--sys-transition-fast), box-shadow var(--sys-transition-base); box-shadow: 0 4px 6px -1px rgba(183, 120, 13, 0.2), 0 2px 4px -1px rgba(183, 120, 13, 0.1); } .woocommerce a.button:hover, .woocommerce button.button:hover, .woocommerce input.button:hover, .woocommerce #respond input#submit:hover, .woocommerce a.button.alt:hover, .woocommerce button.button.alt:hover { background: var(--sys-color-cta-gold, #9C6408); color: #FFFFFF; transform: translateY(-2px); box-shadow: 0 20px 25px -5px rgba(43, 40, 35, 0.12), 0 10px 10px -5px rgba(183, 120, 13, 0.08); } .woocommerce a.button:focus-visible, .woocommerce button.button:focus-visible, .woocommerce #respond input#submit:focus-visible { outline: 3px solid var(--sys-color-primary-tint-20); outline-offset: 3px; } /* Ghost/secondary actions (e.g. "Return to shop") — gold TEXT, AA on light */ .woocommerce a.button.wc-backward, .woocommerce .cart .button[name="update_cart"] { background: transparent; color: var(--sys-color-cta-gold); border: var(--sys-border-width-md) solid var(--sys-color-primary); box-shadow: none; } /* --- PRODUCT TITLE + PRICE typography ---------------------------------------- */ .woocommerce ul.products li.product .woocommerce-loop-product__title, .woocommerce div.product .product_title { font-family: var(--sys-font-display); font-weight: 600; color: var(--sys-color-ink); text-decoration: none; /* kill the loop-title underline */ line-height: var(--sys-line-height-snug); } .woocommerce ul.products li.product a:hover .woocommerce-loop-product__title { color: var(--sys-color-primary); } .woocommerce .price, .woocommerce div.product p.price, .woocommerce ul.products li.product .price { font-family: var(--sys-font-display); color: var(--sys-color-ink); font-weight: 700; } .woocommerce .price del { color: var(--sys-color-ink-muted); font-weight: 400; } .woocommerce .price ins { text-decoration: none; color: var(--sys-color-gold-deep); } /* --- RESULT COUNT + ORDERING ------------------------------------------------- */ .woocommerce .woocommerce-result-count { font-family: var(--sys-font-body); color: var(--sys-color-ink-light); font-size: var(--sys-font-size-small); } /* --- FORM CONTROLS: canon input idiom (ordering select, qty, generic) ------- */ .woocommerce .woocommerce-ordering select, .woocommerce select, .woocommerce .quantity input.qty, .woocommerce form .form-row input.input-text, .woocommerce form .form-row select { font-family: var(--sys-font-body); font-size: var(--sys-font-size-body); color: var(--sys-color-ink-base); background-color: var(--sys-color-surface-0); border: var(--sys-border-width) solid var(--sys-border-color); border-radius: var(--sys-radius-md); padding: var(--sys-space-2) var(--sys-space-3); transition: border-color var(--sys-transition-fast); } .woocommerce .woocommerce-ordering select:focus, .woocommerce select:focus, .woocommerce .quantity input.qty:focus, .woocommerce form .form-row input.input-text:focus { border-color: var(--sys-color-primary); outline: 2px solid var(--sys-color-primary-tint-20); outline-offset: 1px; } /* --- PRODUCT TABS: list-style reset + canon active state -------------------- */ .woocommerce div.product .woocommerce-tabs ul.tabs { list-style: none !important; /* kill the raw • markers */ margin: 0 0 var(--sys-space-5); padding: 0; border-bottom: var(--sys-border-width) solid var(--sys-border-color); } .woocommerce div.product .woocommerce-tabs ul.tabs::before, .woocommerce div.product .woocommerce-tabs ul.tabs li::before, .woocommerce div.product .woocommerce-tabs ul.tabs li::after { content: none !important; /* Woo draws the • separators as generated content */ display: none !important; } .woocommerce div.product .woocommerce-tabs ul.tabs li { background: none; border: none; border-radius: 0; margin: 0 var(--sys-space-4) -1px 0; padding: 0; } .woocommerce div.product .woocommerce-tabs ul.tabs li a { font-family: var(--sys-font-display); font-weight: 600; color: var(--sys-color-ink-light); text-decoration: none; padding: var(--sys-space-2) 0; display: inline-block; border-bottom: 2px solid transparent; } .woocommerce div.product .woocommerce-tabs ul.tabs li.active a, .woocommerce div.product .woocommerce-tabs ul.tabs li a:hover { color: var(--sys-color-ink); border-bottom-color: var(--sys-color-primary); } /* --- ONSALE BADGE: canon pill ----------------------------------------------- */ .woocommerce span.onsale { background: var(--sys-color-primary) !important; /* over Woo's green */ color: #FFFFFF !important; font-family: var(--sys-font-display); font-weight: 700; font-size: var(--sys-font-size-caption); letter-spacing: 0.02em; border-radius: var(--sys-radius-full); min-height: auto; min-width: auto; line-height: 1; padding: var(--sys-space-2) var(--sys-space-3); } /* ============================================================================ * WP-49 · STOREFRONT (DQ-10 v3) — hooks-first archive re-skin * ---------------------------------------------------------------------------- * Ports scratch/rebuild/design/dq10-shop-storefront-v3.dc.html (+ the * ShopProductCardV3 component) onto the theme token system. Structure lives in * woocommerce/archive-product.php + woocommerce/content-product.php; this is the * skin. Consumed by .op-shop-main (opanije_shop_main_open) — body.woocommerce is * the ancestor, so the notice/button/price rules above still apply. * * PALETTE (gate: "no hardcoded non-canon hex except the documented palette"). * Every SOLID colour maps to a --sys-* token (mock hex -> token): * #231F19 ink bands -> --sys-color-ink * #15120D deepest band -> --sys-color-ink-deep * #F4EEE1 cream section -> --sys-color-cream * #FAFAF9 card surface -> --sys-color-surface-1 * #9c6408 gold text/price -> --sys-color-cta-gold (SD-QB-A11Y) * #B7780D gold rule -> --sys-color-primary * #E0A92B bright accent -> --sys-color-primary-light (the mock's #D8A81B) * #59554F / #888580 muted -> --sys-color-ink-light / --sys-color-ink-muted * Gold TINTS/glows use color-mix(var(--sys-color-primary-light) N%) — no raw gold * hex. The only literals are NEUTRAL, palette-free decorative values, documented * inline: glass = rgba(255,255,255,.05/.13), elevation = rgba(0,0,0,a), * sold-out veil = rgba(244,238,225,.46). A11Y: hero/cross text is LIGHT on dark * ink (high contrast); gold-as-TEXT on light surfaces is always cta-gold; the card * CTA reuses the AA-ratified flat CTA-gold pill (white text, >=16px) rather * than the mock's 13px flat pill. The marquee is aria-hidden decoration. * `!important` is used ONLY to defeat Woo-core float/layout defaults — noted inline. * ============================================================================ */ /* --- ANNOUNCEMENT BAR: shop-only ink strip above the (unchanged) header ------ */ .op-shop-announce { background: var(--sys-color-ink); color: color-mix(in srgb, var(--sys-color-cream) 88%, transparent); text-align: center; padding: 9px 16px; font-family: var(--sys-font-body); font-size: 12.5px; letter-spacing: 0.03em; line-height: 1.3; } .op-shop-announce__dot { color: var(--sys-color-primary-light); margin: 0 10px; } /* --- SHOP MAIN shell --------------------------------------------------------- */ .op-shop-main { display: block; width: 100%; background: var(--sys-color-cream); } .op-shop-kicker { display: flex; align-items: center; gap: 11px; margin: 0 0 22px; font-family: var(--sys-font-display); font-weight: 700; font-size: 12px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--sys-color-primary-light); } .op-shop-kicker__rule { width: 26px; height: 2px; background: var(--sys-color-primary); display: inline-block; } /* --- CINEMATIC HERO ---------------------------------------------------------- */ .op-shop-hero { position: relative; overflow: hidden; background: linear-gradient(165deg, var(--sys-color-ink) 0%, color-mix(in srgb, var(--sys-color-ink) 45%, var(--sys-color-ink-deep)) 55%, var(--sys-color-ink-deep) 100%); } .op-shop-hero__weave, .op-shop-cross__weave { position: absolute; inset: 0; background: repeating-linear-gradient(135deg, color-mix(in srgb, var(--sys-color-primary-light) 5%, transparent) 0 2px, transparent 2px 12px); pointer-events: none; } .op-shop-hero__glow { position: absolute; inset: 0; background: radial-gradient(680px 460px at 78% 22%, color-mix(in srgb, var(--sys-color-primary-light) 16%, transparent), transparent 65%); pointer-events: none; } .op-shop-hero__crumbs { position: relative; max-width: 1180px; margin: 0 auto; padding: 18px 40px 0; } .op-shop-breadcrumb, .op-shop-breadcrumb a { font-family: var(--sys-font-body); font-size: 12.5px; letter-spacing: 0.02em; color: color-mix(in srgb, var(--sys-color-cream) 55%, transparent); } .op-shop-breadcrumb a:hover { color: var(--sys-color-primary-light); } .op-crumb-sep { color: color-mix(in srgb, var(--sys-color-primary-light) 55%, transparent); margin: 0 9px; } .op-shop-hero__grid { position: relative; max-width: 1180px; margin: 0 auto; padding: 42px 40px 58px; display: grid; grid-template-columns: 1.04fr 0.96fr; gap: 72px; align-items: center; } .op-shop-hero__title { font-family: var(--sys-font-display); font-weight: 800; font-size: clamp(2rem, 4vw + 1rem, 50px); line-height: 1.03; letter-spacing: -0.022em; color: var(--sys-color-cream); margin: 0 0 22px; text-wrap: balance; } .op-shop-hero__outline { color: transparent; -webkit-text-stroke: 1.6px var(--sys-color-primary-light); } @supports not ((-webkit-text-stroke: 1px black)) { .op-shop-hero__outline { color: var(--sys-color-primary-light); } } .op-shop-hero__lede { font-family: var(--sys-font-body); font-size: 18px; line-height: 1.6; color: color-mix(in srgb, var(--sys-color-cream) 66%, transparent); margin: 0; max-width: 470px; } .op-shop-etym { display: flex; align-items: baseline; gap: 14px; flex-wrap: wrap; margin: 26px 0 0; padding-top: 22px; border-top: 1px solid color-mix(in srgb, var(--sys-color-primary-light) 22%, transparent); } .op-shop-etym__word { font-family: var(--sys-font-display); font-weight: 800; font-size: 18px; letter-spacing: -0.01em; color: var(--sys-color-cream); } .op-shop-etym__ipa { font-family: var(--sys-font-body); font-size: 15px; letter-spacing: 0.04em; color: var(--sys-color-primary-light); } .op-shop-etym__pos { font-family: var(--sys-font-body); font-size: 13px; color: color-mix(in srgb, var(--sys-color-cream) 50%, transparent); } .op-shop-trust { display: flex; flex-wrap: wrap; gap: 10px; margin: 24px 0 0; padding: 0; list-style: none; } .op-shop-trust__chip { display: inline-flex; align-items: center; gap: 9px; padding: 9px 15px; border-radius: var(--sys-radius-full); background: rgba(255, 255, 255, 0.05); /* neutral glass fill */ border: 1px solid rgba(255, 255, 255, 0.13); /* neutral glass edge */ backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); font-family: var(--sys-font-display); font-weight: 600; font-size: 12.5px; color: var(--sys-color-cream); white-space: nowrap; } .op-shop-trust__dot { width: 6px; height: 6px; border-radius: 50%; background: var(--sys-color-primary-light); display: inline-block; } .op-shop-hero__media { position: relative; } .op-shop-hero__frame { position: absolute; top: 22px; left: 22px; right: -16px; bottom: -16px; border: 1.5px solid color-mix(in srgb, var(--sys-color-primary-light) 50%, transparent); border-radius: 14px; pointer-events: none; } .op-shop-hero__photo { position: relative; aspect-ratio: 3 / 4; border: 1px solid var(--sys-color-ink-base); border-radius: 14px; overflow: hidden; box-shadow: 0 34px 70px rgba(0, 0, 0, 0.55); /* neutral elevation */ background: var(--sys-color-ink); } .op-shop-hero__photo img { width: 100%; height: 100%; object-fit: cover; display: block; } .op-shop-hero__cap { display: flex; align-items: center; gap: 10px; margin: 26px 0 0; justify-content: flex-end; font-family: var(--sys-font-body); font-size: 13px; color: color-mix(in srgb, var(--sys-color-cream) 55%, transparent); } .op-shop-hero__cap-rule { width: 18px; height: 2px; background: var(--sys-color-primary); display: inline-block; } /* --- FEITO A MAO spinning stamp ---------------------------------------------- */ .op-shop-stamp { position: absolute; left: -30px; bottom: -26px; width: 124px; height: 124px; z-index: 2; filter: drop-shadow(0 12px 26px rgba(0, 0, 0, 0.45)); } .op-shop-stamp__ring { position: absolute; inset: 0; animation: op-spin 26s linear infinite; } .op-shop-stamp__disc { fill: var(--sys-color-ink-deep); stroke: var(--sys-color-primary-light); stroke-width: 1.5; } .op-shop-stamp__inner { fill: none; stroke: color-mix(in srgb, var(--sys-color-primary-light) 45%, transparent); stroke-width: 1; } .op-shop-stamp__text { fill: var(--sys-color-primary-light); font-family: var(--sys-font-display); font-size: 10px; font-weight: 700; letter-spacing: 1.5px; } .op-shop-stamp__e { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-family: var(--sys-font-display); font-weight: 800; font-size: 34px; color: var(--sys-color-primary-light); padding-bottom: 3px; } @keyframes op-spin { to { transform: rotate(360deg); } } /* --- GOLD MARQUEE (decorative, aria-hidden) --------------------------------- */ .op-shop-marquee { position: relative; overflow: hidden; background: var(--sys-color-primary-light); border-top: 1px solid var(--sys-color-ink-deep); border-bottom: 1px solid var(--sys-color-ink-deep); padding: 13px 0; } .op-shop-marquee__track { display: flex; width: max-content; animation: op-marquee 34s linear infinite; will-change: transform; } .op-shop-marquee__seq { white-space: nowrap; font-family: var(--sys-font-display); font-weight: 800; font-size: 14px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--sys-color-ink); /* ink on gold — decorative, high contrast */ } @keyframes op-marquee { to { transform: translateX(-50%); } } /* --- COLLECTION band --------------------------------------------------------- */ .op-shop-collection { background: var(--sys-color-cream); } .op-shop-collection__inner { max-width: 1180px; margin: 0 auto; padding: 52px 40px 4px; } .op-shop-sectionhead { display: flex; align-items: flex-start; gap: 20px; margin: 0 0 4px; } .op-shop-sectionhead__num { font-family: var(--sys-font-display); font-weight: 800; font-size: 44px; line-height: 0.9; color: transparent; -webkit-text-stroke: 1.5px var(--sys-color-primary-light); } @supports not ((-webkit-text-stroke: 1px black)) { .op-shop-sectionhead__num { color: var(--sys-color-primary-light); } } .op-shop-sectionhead__title { font-family: var(--sys-font-display); font-weight: 800; font-size: 30px; letter-spacing: -0.015em; color: var(--sys-color-ink); margin: 0 0 6px; } .op-shop-sectionhead__sub { font-family: var(--sys-font-body); font-size: 15px; color: var(--sys-color-ink-light); margin: 0; } /* --- TOOLBAR: chips + result count + native ordering ------------------------- */ .op-shop-toolbar { margin: 24px 0 0; padding: 14px 0; border-top: 1px solid var(--sys-border-color); border-bottom: 1px solid var(--sys-border-color); display: flex; align-items: center; justify-content: space-between; gap: 18px; flex-wrap: wrap; } .op-shop-chips { display: flex; align-items: center; gap: 9px; flex-wrap: wrap; } .op-chip { display: inline-flex; align-items: center; gap: 7px; border-radius: var(--sys-radius-full); padding: 8px 15px; font-family: var(--sys-font-display); font-weight: 700; font-size: 11.5px; letter-spacing: 0.07em; text-transform: uppercase; line-height: 1; white-space: nowrap; text-decoration: none; background: color-mix(in srgb, var(--sys-color-surface-1) 60%, transparent); color: var(--sys-color-ink-light); border: 1.5px solid var(--sys-border-color); transition: background var(--sys-transition-fast), color var(--sys-transition-fast), border-color var(--sys-transition-fast); } .op-chip:hover { border-color: var(--sys-color-primary); color: var(--sys-color-ink); } .op-chip.is-active { background: var(--sys-color-ink); color: var(--sys-color-cream); border-color: var(--sys-color-ink); } .op-chip__count { font-family: var(--sys-font-display); font-weight: 700; font-size: 10px; letter-spacing: 0.05em; color: var(--sys-color-ink-muted); } .op-chip.is-active .op-chip__count { color: var(--sys-color-primary-light); } .op-shop-toolbar__right { display: flex; align-items: center; gap: 13px; } .op-shop-toolbar__right .woocommerce-result-count { margin: 0; font-family: var(--sys-font-body); font-size: 13.5px; color: var(--sys-color-ink-light); white-space: nowrap; } .op-shop-toolbar__right .woocommerce-ordering { margin: 0; } .op-shop-toolbar__right .woocommerce-ordering select { appearance: none; -webkit-appearance: none; padding-right: 2.4em; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='7' viewBox='0 0 10 7'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%239c6408' stroke-width='1.6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 0.9em center; cursor: pointer; } /* --- PRODUCT GRID (Woo ul.products) — 3-col, feature-first spans 2 ----------- */ .op-shop-main ul.products { display: grid !important; /* defeat Woo-core float layout */ grid-template-columns: repeat(3, 1fr); gap: 26px; margin: 30px 0 0 !important; padding: 0; list-style: none; } .op-shop-main ul.products::before, .op-shop-main ul.products::after { content: none !important; /* kill Woo's clearfix pseudo-rows */ } .op-shop-main ul.products li.product { width: auto !important; /* defeat Woo-core .columns-N width */ float: none !important; margin: 0 !important; padding: 0; min-width: 0; } .op-shop-main ul.products li.product.op-card--feature { grid-column: span 2; } /* --- SHOP PRODUCT CARD V3 ---------------------------------------------------- */ .op-card { display: flex; flex-direction: column; background: var(--sys-color-surface-1); border: 1px solid var(--sys-border-color); border-radius: var(--sys-radius-lg); overflow: hidden; height: 100%; font-family: var(--sys-font-body); transition: transform 0.35s cubic-bezier(.34, 1.4, .5, 1), box-shadow 0.35s ease, border-color 0.35s ease; box-shadow: 0 1px 2px rgba(35, 31, 25, 0.05); } .op-card:not(.op-card--soldout):hover { transform: translateY(-7px); border-color: var(--sys-color-primary-light); box-shadow: 0 22px 44px rgba(35, 31, 25, 0.17); } .op-card__media { position: relative; display: block; overflow: hidden; aspect-ratio: 4 / 5; background: var(--sys-color-cream-2); } .op-card__media .op-card__img, .op-card__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 0.6s cubic-bezier(.2, .7, .2, 1); } .op-card:not(.op-card--soldout):hover .op-card__img { transform: scale(1.055); } .op-card__matframe { position: absolute; inset: 10px; border-radius: var(--sys-radius-sm); border: 1px solid transparent; transition: border-color 0.45s ease; pointer-events: none; } .op-card:not(.op-card--soldout):hover .op-card__matframe { border-color: color-mix(in srgb, var(--sys-color-primary-light) 65%, transparent); } .op-card__veil { position: absolute; inset: 0; background: rgba(244, 238, 225, 0.46); /* sold-out cream veil (documented) */ pointer-events: none; } .op-card--soldout .op-card__img { filter: grayscale(0.55) contrast(0.96); } .op-card__soldout { position: absolute; top: 14px; left: 14px; background: var(--sys-color-ink); color: var(--sys-color-cream); font-family: var(--sys-font-display); font-weight: 700; font-size: 10.5px; letter-spacing: 0.14em; text-transform: uppercase; padding: 6px 11px; border-radius: var(--sys-radius-sm); } .op-card__kicker { position: absolute; left: 14px; bottom: 14px; background: color-mix(in srgb, var(--sys-color-ink) 82%, transparent); color: var(--sys-color-cream); font-family: var(--sys-font-display); font-weight: 700; font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase; padding: 5px 10px; border-radius: var(--sys-radius-sm); } .op-card__num { position: absolute; top: 10px; right: 14px; line-height: 1; font-family: var(--sys-font-display); font-weight: 800; font-size: 34px; letter-spacing: 0.02em; color: transparent; -webkit-text-stroke: 1.2px rgba(251, 247, 240, 0.95); /* neutral light outline */ text-shadow: 0 2px 12px rgba(35, 31, 25, 0.28); pointer-events: none; } @supports not ((-webkit-text-stroke: 1px black)) { .op-card__num { color: rgba(251, 247, 240, 0.95); } } .op-card__info { display: flex; flex-direction: column; flex: 1 1 auto; padding: 20px 20px 22px; } .op-card__title { font-family: var(--sys-font-display); font-weight: 800; font-size: 22px; line-height: 1.1; letter-spacing: -0.012em; color: var(--sys-color-ink); margin: 0; } .op-card__title a { color: inherit; text-decoration: none; } .op-card:not(.op-card--soldout):hover .op-card__title a { color: var(--sys-color-cta-gold); } .op-card__price { font-family: var(--sys-font-body); font-weight: 700; font-size: 16.5px; color: var(--sys-color-cta-gold); margin-top: 8px; letter-spacing: 0.005em; } .op-card--soldout .op-card__price { color: var(--sys-color-ink-muted); } .op-card__meta { margin: 13px 0 0; padding-top: 12px; border-top: 1.5px dotted var(--sys-color-cream-2); font-family: var(--sys-font-body); font-size: 12px; letter-spacing: 0.015em; color: var(--sys-color-ink-muted); } /* Card CTA: reuse the AA-ratified canon gold pill (.woocommerce a.button above), just place it in the card. Sold-out cards get the quiet outline route-out. */ .op-card .button { align-self: flex-start; margin-top: 15px; } .op-card__cta--quiet { background: transparent !important; color: var(--sys-color-cta-gold) !important; border: 1.5px solid var(--sys-border-color) !important; box-shadow: none !important; } .op-card__cta--quiet:hover { border-color: var(--sys-color-primary) !important; color: var(--sys-color-gold-deep) !important; background: transparent !important; transform: none !important; } /* Feature-first card: photo left, copy right (desktop) */ @media (min-width: 900px) { .op-card--feature { flex-direction: row; } .op-card--feature .op-card__media { flex: 0 0 56%; aspect-ratio: auto; min-height: 440px; } .op-card--feature .op-card__info { justify-content: center; padding: 30px 34px; } .op-card--feature .op-card__title { font-size: 28px; } .op-card--feature .op-card__price { font-size: 18px; } } /* --- CROSS-BAND (02): two ways to go deeper ---------------------------------- */ .op-shop-cross { position: relative; overflow: hidden; background: var(--sys-color-ink); margin-top: 56px; } .op-shop-cross__inner { position: relative; max-width: 1180px; margin: 0 auto; padding: 50px 40px 54px; } .op-shop-sectionhead--onink { margin-bottom: 36px; } .op-shop-sectionhead--onink .op-shop-sectionhead__num { -webkit-text-stroke-color: var(--sys-color-primary); } @supports not ((-webkit-text-stroke: 1px black)) { .op-shop-sectionhead--onink .op-shop-sectionhead__num { color: var(--sys-color-primary); } } .op-shop-kicker--onink { margin: 0; } .op-shop-sectionhead__title--onink { color: var(--sys-color-cream); font-size: 26px; margin: 8px 0 0; } .op-shop-cross__grid { display: grid; grid-template-columns: 1fr 1px 1fr; gap: 44px; align-items: stretch; } .op-shop-route { display: flex; gap: 22px; align-items: flex-start; text-decoration: none; } .op-shop-route__divider { background: color-mix(in srgb, var(--sys-color-primary-light) 18%, transparent); width: 1px; } .op-shop-route__thumb { flex: 0 0 88px; width: 88px; height: 88px; border-radius: var(--sys-radius-lg); overflow: hidden; border: 1px solid color-mix(in srgb, var(--sys-color-primary-light) 28%, transparent); display: block; } .op-shop-route__thumb img { width: 100%; height: 100%; object-fit: cover; display: block; } .op-shop-route__body { display: flex; flex-direction: column; } .op-shop-route__eyebrow { font-family: var(--sys-font-display); font-weight: 700; font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--sys-color-primary-light); } .op-shop-route__title { font-family: var(--sys-font-display); font-weight: 700; font-size: 22px; letter-spacing: -0.01em; color: var(--sys-color-cream); margin: 10px 0 9px; } .op-shop-route__desc { font-family: var(--sys-font-body); font-size: 15px; line-height: 1.6; color: color-mix(in srgb, var(--sys-color-cream) 68%, transparent); margin: 0 0 14px; max-width: 360px; } .op-shop-route__cta { font-family: var(--sys-font-display); font-weight: 700; font-size: 14px; color: var(--sys-color-primary-light); } .op-shop-route:hover .op-shop-route__cta { color: var(--sys-color-cream); } /* --- RESPONSIVE (tablet / mobile) ------------------------------------------- */ @media (max-width: 899px) { .op-shop-hero__grid { grid-template-columns: 1fr; gap: 30px; padding: 30px 22px 40px; } .op-shop-hero__crumbs { padding: 14px 22px 0; } .op-shop-hero__photo { aspect-ratio: 4 / 3; } .op-shop-collection__inner { padding: 34px 22px 4px; } .op-shop-main ul.products { grid-template-columns: 1fr; gap: 20px; } .op-shop-main ul.products li.product.op-card--feature { grid-column: auto; } .op-shop-toolbar { align-items: stretch; } .op-shop-chips { overflow-x: auto; flex-wrap: nowrap; } .op-shop-cross__inner { padding: 40px 22px 44px; } .op-shop-cross__grid { grid-template-columns: 1fr; gap: 26px; } .op-shop-route__divider { width: auto; height: 1px; } } /* --- REDUCED MOTION: freeze the marquee + the feito-a-mao stamp -------------- */ @media (prefers-reduced-motion: reduce) { .op-shop-marquee__track, .op-shop-stamp__ring { animation: none !important; } } /* ============================================================================ * WP-50 · PRODUCT PAGE (DQ-11) — single-product skin * ---------------------------------------------------------------------------- * Layers on the native single product DOM inside .op-shop-main. Structure: * .op-pdp centered product region (breadcrumb + sticky gallery + buy col) * .op-pdp-desc full-bleed cream "01 · The instrument" band (desc tabs + specs) * .op-pdp-culture full-bleed dark culture band -> live Drums of Bahia guide * .op-pdp-related 4-up DQ-10-card related grid (feature-span neutralised) * Token mapping matches the WP-49 block. Gallery core CSS (WP-45) is NEVER * re-suppressed — only wrappers are styled. Binding design: dq11-product-v1.dc.html. * ============================================================================ */ /* --- PRODUCT REGION shell + relocated breadcrumb ---------------------------- */ .op-pdp { background: var(--sys-color-surface-1); } .op-pdp__inner { max-width: 1120px; margin: 0 auto; padding: 32px 40px 72px; } .op-pdp-breadcrumb, .op-pdp-breadcrumb a { font-family: var(--sys-font-body); font-size: var(--sys-font-size-small); color: var(--sys-color-ink-muted); } .op-pdp-breadcrumb { margin: 0 0 30px; } .op-pdp-breadcrumb a { color: var(--sys-color-cta-gold); /* AA gold text on light */ } .op-pdp-breadcrumb a:hover { text-decoration: underline; } .op-pdp-breadcrumb .op-crumb-sep { margin: 0 9px; color: color-mix(in srgb, var(--sys-color-ink-muted) 60%, transparent); } /* --- TWO-COLUMN GRID: sticky gallery + buy column --------------------------- */ .op-pdp .product { margin: 0; } .op-pdp__cols { display: grid; grid-template-columns: minmax(0, 500px) 1fr; gap: 64px; align-items: start; } /* --- GALLERY (wrappers only — core CSS restored by WP-45) -------------------- */ .op-pdp__cols .woocommerce-product-gallery { position: sticky; top: 24px; margin: 0; float: none; width: auto !important; } .op-pdp__cols .woocommerce-product-gallery__wrapper { margin: 0; } .op-pdp__cols .woocommerce-product-gallery .flex-viewport, .op-pdp__cols .woocommerce-product-gallery__image { border-radius: var(--sys-radius-xl); overflow: hidden; border: 1px solid color-mix(in srgb, var(--sys-color-ink) 10%, transparent); background: linear-gradient(150deg, var(--sys-color-cream) 0%, color-mix(in srgb, var(--sys-color-cream) 60%, var(--sys-color-primary-light)) 100%); } .op-pdp__cols .woocommerce-product-gallery__image a, .op-pdp__cols .woocommerce-product-gallery__image img { display: block; width: 100%; } .op-pdp__cols .woocommerce-product-gallery__image img { aspect-ratio: 1 / 1; object-fit: cover; } .op-pdp__cols .woocommerce-product-gallery__trigger { top: 16px; right: 16px; width: 42px; height: 42px; border-radius: 50%; background: color-mix(in srgb, var(--sys-color-surface-0) 92%, transparent); border: 1px solid color-mix(in srgb, var(--sys-color-ink) 12%, transparent); box-shadow: 0 4px 14px rgba(35, 31, 25, 0.16); } .op-pdp__cols .flex-control-thumbs { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; list-style: none; margin: 14px 0 0; padding: 0; } .op-pdp__cols .flex-control-thumbs li { margin: 0; } .op-pdp__cols .flex-control-thumbs img { width: 100%; aspect-ratio: 1 / 1; object-fit: cover; border-radius: var(--sys-radius-md); border: 1.5px solid color-mix(in srgb, var(--sys-color-ink) 12%, transparent); opacity: 1; cursor: pointer; transition: border-color var(--sys-transition-fast); } .op-pdp__cols .flex-control-thumbs img:hover, .op-pdp__cols .flex-control-thumbs img.flex-active { border: 2px solid var(--sys-color-primary); } /* --- BUY COLUMN (summary) --------------------------------------------------- */ .op-pdp__cols .summary { position: relative; /* anchors the sold-out stamp */ margin: 0; width: auto !important; float: none !important; } .op-pdp-eyebrow { display: flex; align-items: center; gap: 10px; font-family: var(--sys-font-display); font-weight: 800; font-size: var(--sys-font-size-caption); letter-spacing: 0.18em; text-transform: uppercase; color: var(--sys-color-cta-gold); /* AA gold text on light — SD-QB-A11Y */ margin: 0 0 6px; } .op-pdp-eyebrow__sep { width: 5px; height: 5px; border-radius: 50%; background: var(--sys-color-primary-light); } .op-pdp .summary .product_title.entry-title { font-family: var(--sys-font-display); font-weight: 800; font-size: clamp(2.4rem, 1.8rem + 2vw, 3.25rem); line-height: 1.03; letter-spacing: -0.02em; color: var(--sys-color-ink); margin: 6px 0 16px; } .op-pdp .summary .price { font-family: var(--sys-font-display); font-weight: 800; font-size: clamp(1.6rem, 1.3rem + 1vw, 2.1rem); color: var(--sys-color-ink); letter-spacing: -0.01em; margin: 0 0 22px; } .op-pdp .summary .price del { color: var(--sys-color-ink-muted); font-weight: 600; } .op-pdp .summary .price ins { text-decoration: none; } /* Sold-out stamp (frame 1e) — price still renders; NO waitlist form (GATE R4) */ .op-pdp-soldout-stamp { position: absolute; top: 4px; right: 0; transform: rotate(-7deg); border: 2px solid var(--sys-color-error); color: var(--sys-color-error); font-family: var(--sys-font-display); font-weight: 900; font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; padding: 6px 11px; border-radius: var(--sys-radius-sm); background: var(--sys-color-surface-1); } /* --- VARIATIONS: canon-styled native