/** Shopify CDN: Minification failed Line 822:1 Expected "}" to go with "{" **/ /* ============================================================ FROUGE — Product Page CSS File: assets/frouge-product.css Version: 1.0 — Luxury PDP Build PASTE THIS FILE INTO: Shopify Admin → Online Store → Themes → Edit Code → assets/ → Add new asset → frouge-product.css THEN ADD THIS LINE to layout/theme.liquid inside the tag, after the frouge-header.css line: {{ 'frouge-product.css' | asset_url | stylesheet_tag }} ============================================================ */ @import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,300;0,400;0,600;0,700;1,300;1,400&family=Jost:wght@200;300;400;500&family=Courier+Prime:wght@400;700&display=swap'); /* ───────────────────────────────────────────── TOKENS ───────────────────────────────────────────── */ :root { --pdp-cream: #FAF8F5; --pdp-stone: #F0EDE8; --pdp-near-black: #1A1714; --pdp-warm-gray: #6B6560; --pdp-border: #E8E4DF; --pdp-terracotta: #B46A4D; --pdp-terracotta-lt:#C4845E; } /* ───────────────────────────────────────────── PAGE BACKGROUND ───────────────────────────────────────────── */ .product, .product__info-wrapper, .product__column-sticky-information, body.template-product { background-color: var(--pdp-cream) !important; } /* ───────────────────────────────────────────── REMOVE DAWN DEFAULTS ───────────────────────────────────────────── */ /* Vendor — hidden */ .product__text.caption-with-letter-spacing, .product__vendor, [class*="vendor"] { display: none !important; } /* SKU — hidden */ .product__sku, .variant-sku, [class*="sku"] { display: none !important; } /* Dawn payment buttons (dynamic checkout) — hidden */ .shopify-payment-button, .shopify-payment-button__button, .product-form__buttons .shopify-payment-button { display: none !important; } /* Remove Dawn border on product grid */ .product-media-container, .product__media-wrapper { background: var(--pdp-stone) !important; border: none !important; box-shadow: none !important; border-radius: 0 !important; } /* Remove Dawn product image radius */ .product__media img, .product-media-container img { border-radius: 0 !important; } /* Remove generic Dawn badges */ .badge, .card__badge, .product__badge { display: none !important; } /* Remove Dawn default borders on info column */ .product__info-container { border: none !important; background: var(--pdp-cream) !important; } /* ───────────────────────────────────────────── PRODUCT TITLE ───────────────────────────────────────────── */ .product__title, .product__title h1 { font-family: 'Cormorant Garamond', Georgia, serif !important; font-size: clamp(28px, 4vw, 44px) !important; font-weight: 700 !important; letter-spacing: 0.06em !important; text-transform: uppercase !important; line-height: 1.05 !important; color: var(--pdp-near-black) !important; margin: 0 0 8px !important; } /* Collection / eyebrow label above title */ .frouge-pdp__eyebrow { font-family: 'Courier Prime', monospace; font-size: 10px; font-weight: 400; letter-spacing: 0.28em; text-transform: uppercase; color: var(--pdp-terracotta); display: flex; align-items: center; gap: 10px; margin-bottom: 12px; } .frouge-pdp__eyebrow::before { content: ''; display: block; width: 20px; height: 1px; background: var(--pdp-terracotta); flex-shrink: 0; } /* ───────────────────────────────────────────── PRICE ───────────────────────────────────────────── */ .product__price, .price__container, .price { font-family: 'Jost', sans-serif !important; font-size: 20px !important; font-weight: 400 !important; letter-spacing: 0.04em !important; color: var(--pdp-near-black) !important; margin: 0 0 28px !important; } /* Remove compare-at strikethrough — no discount signals */ .price__sale .price-item--regular, s.price-item, .price__was, [class*="compare"] { display: none !important; } /* ───────────────────────────────────────────── VARIANT SELECTORS ───────────────────────────────────────────── */ .product-form__input label, .variant-input-wrapper label { font-family: 'Courier Prime', monospace !important; font-size: 10px !important; letter-spacing: 0.20em !important; text-transform: uppercase !important; color: var(--pdp-warm-gray) !important; margin-bottom: 10px !important; display: block; } /* Variant option buttons */ .swatch__input + .swatch__label, .variant-input, .product-form__input input[type=radio] + label { font-family: 'Courier Prime', monospace !important; font-size: 10px !important; letter-spacing: 0.15em !important; text-transform: uppercase !important; border-radius: 0 !important; border: 1px solid var(--pdp-border) !important; padding: 10px 18px !important; color: var(--pdp-warm-gray) !important; background: transparent !important; transition: border-color 0.2s ease, color 0.2s ease !important; } .product-form__input input[type=radio]:checked + label, .swatch__input:checked + .swatch__label { border-color: var(--pdp-near-black) !important; color: var(--pdp-near-black) !important; background: transparent !important; } /* Quantity selector */ .quantity__input { font-family: 'Jost', sans-serif !important; font-size: 14px !important; font-weight: 400 !important; color: var(--pdp-near-black) !important; border-radius: 0 !important; border-color: var(--pdp-border) !important; background: transparent !important; } .quantity__button { color: var(--pdp-warm-gray) !important; border-radius: 0 !important; border-color: var(--pdp-border) !important; background: transparent !important; } .quantity__button:hover { color: var(--pdp-near-black) !important; background: var(--pdp-stone) !important; } /* ───────────────────────────────────────────── ADD TO CART BUTTON ───────────────────────────────────────────── */ .product-form__submit, .btn.product-form__submit, button[name="add"] { font-family: 'Jost', sans-serif !important; font-size: 11px !important; font-weight: 500 !important; letter-spacing: 0.22em !important; text-transform: uppercase !important; background-color: var(--pdp-near-black) !important; color: var(--pdp-cream) !important; border: 1px solid var(--pdp-near-black) !important; border-radius: 0 !important; padding: 18px 40px !important; height: auto !important; min-height: unset !important; transition: background-color 0.22s ease, border-color 0.22s ease !important; width: 100% !important; } .product-form__submit:hover, button[name="add"]:hover { background-color: #2E2824 !important; border-color: #2E2824 !important; color: var(--pdp-cream) !important; } /* ───────────────────────────────────────────── TRUST MICROCOPY STRIP ───────────────────────────────────────────── */ .frouge-trust { display: flex; align-items: center; gap: 0; margin-top: 20px; border-top: 0.5px solid var(--pdp-border); border-bottom: 0.5px solid var(--pdp-border); padding: 14px 0; } .frouge-trust__item { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 5px; padding: 0 8px; border-right: 0.5px solid var(--pdp-border); text-align: center; } .frouge-trust__item:last-child { border-right: none; } .frouge-trust__label { font-family: 'Courier Prime', monospace; font-size: 9px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--pdp-warm-gray); line-height: 1.3; } .frouge-trust__icon { width: 14px; height: 14px; color: var(--pdp-terracotta); flex-shrink: 0; } /* ───────────────────────────────────────────── DESCRIPTION — SHORT EMOTIONAL COPY ───────────────────────────────────────────── */ .product__description, .product__description .rte { font-family: 'Jost', sans-serif !important; font-size: 14px !important; font-weight: 300 !important; line-height: 1.75 !important; letter-spacing: 0.02em !important; color: var(--pdp-warm-gray) !important; margin-bottom: 28px !important; } .product__description p:first-child { font-family: 'Cormorant Garamond', serif !important; font-size: 18px !important; font-weight: 400 !important; font-style: italic !important; color: var(--pdp-near-black) !important; line-height: 1.5 !important; margin-bottom: 16px !important; letter-spacing: 0.02em !important; } /* ───────────────────────────────────────────── ACCORDION — BENEFITS / INGREDIENTS / HOW TO USE ───────────────────────────────────────────── */ .accordion, details.accordion { border-top: 0.5px solid var(--pdp-border) !important; border-bottom: none !important; border-left: none !important; border-right: none !important; background: transparent !important; border-radius: 0 !important; margin-bottom: 0 !important; } .accordion:last-child { border-bottom: 0.5px solid var(--pdp-border) !important; } .accordion__title, summary.accordion__title { font-family: 'Courier Prime', monospace !important; font-size: 10px !important; letter-spacing: 0.22em !important; text-transform: uppercase !important; color: var(--pdp-near-black) !important; padding: 16px 0 !important; cursor: pointer !important; list-style: none !important; display: flex !important; align-items: center !important; justify-content: space-between !important; background: transparent !important; } .accordion__title::-webkit-details-marker { display: none !important; } .accordion__title::after { content: '+'; font-family: 'Cormorant Garamond', serif; font-size: 20px; font-weight: 300; color: var(--pdp-terracotta); line-height: 1; transition: transform 0.22s ease; } details.accordion[open] > .accordion__title::after { transform: rotate(45deg); } .accordion__content, .product-accordion__content { font-family: 'Jost', sans-serif !important; font-size: 13px !important; font-weight: 300 !important; line-height: 1.75 !important; color: var(--pdp-warm-gray) !important; padding: 0 0 20px !important; } /* Ingredient list inside accordion */ .accordion__content ul, .accordion__content li { font-family: 'Courier Prime', monospace !important; font-size: 11px !important; letter-spacing: 0.12em !important; text-transform: uppercase !important; line-height: 2.0 !important; color: var(--pdp-warm-gray) !important; list-style: none !important; padding: 0 !important; margin: 0 !important; } .accordion__content li::before { content: '·'; color: var(--pdp-terracotta); margin-right: 10px; } /* ───────────────────────────────────────────── PRODUCT MEDIA — IMAGE GALLERY ───────────────────────────────────────────── */ .product__media-list { gap: 4px !important; } .product__media { border-radius: 0 !important; background: var(--pdp-stone) !important; } /* Thumbnail strip */ .thumbnail-slider__button { border-radius: 0 !important; border: 1px solid transparent !important; transition: border-color 0.2s ease !important; } .thumbnail-slider__button.is-active, .thumbnail-slider__button:hover { border-color: var(--pdp-terracotta) !important; } /* ───────────────────────────────────────────── COMPLEMENTARY PRODUCTS / RELATED ───────────────────────────────────────────── */ .complementary-products { background: var(--pdp-stone) !important; border-radius: 0 !important; padding: 32px !important; } .complementary-products__title, .product-recommendations__heading { font-family: 'Courier Prime', monospace !important; font-size: 10px !important; letter-spacing: 0.25em !important; text-transform: uppercase !important; color: var(--pdp-warm-gray) !important; margin-bottom: 20px !important; } /* ───────────────────────────────────────────── MOBILE PRODUCT PAGE SPECIFICS ───────────────────────────────────────────── */ @media screen and (max-width: 749px) { .product__info-wrapper { padding: 24px 20px !important; } .product__title, .product__title h1 { font-size: clamp(24px, 7vw, 36px) !important; } .product-form__submit, button[name="add"] { padding: 16px 32px !important; font-size: 10px !important; } .frouge-trust { gap: 0; } .frouge-trust__label { font-size: 8px; letter-spacing: 0.12em; } .product__description, .product__description .rte { font-size: 13px !important; } .product__description p:first-child { font-size: 16px !important; } } /* ───────────────────────────────────────────── STICKY ADD TO CART — MOBILE ───────────────────────────────────────────── */ .frouge-sticky-atc { display: none; position: fixed; bottom: 0; left: 0; right: 0; z-index: 300; background: var(--pdp-cream); border-top: 1px solid var(--pdp-border); padding: 12px 20px; align-items: center; gap: 16px; } .frouge-sticky-atc.is-visible { display: flex; } .frouge-sticky-atc__name { font-family: 'Cormorant Garamond', serif; font-size: 14px; font-weight: 600; letter-spacing: 0.05em; text-transform: uppercase; color: var(--pdp-near-black); flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .frouge-sticky-atc__price { font-family: 'Jost', sans-serif; font-size: 14px; font-weight: 400; color: var(--pdp-near-black); flex-shrink: 0; } .frouge-sticky-atc__btn { font-family: 'Jost', sans-serif; font-size: 10px; font-weight: 500; letter-spacing: 0.20em; text-transform: uppercase; background: var(--pdp-near-black); color: var(--pdp-cream); border: none; padding: 12px 20px; cursor: pointer; border-radius: 0; flex-shrink: 0; transition: background-color 0.2s ease; } .frouge-sticky-atc__btn:hover { background-color: #2E2824; } @media screen and (min-width: 750px) { .frouge-sticky-atc { display: none !important; } } /* ───────────────────────────────────────────── CUSTOM FROUGE BENEFITS SECTION ───────────────────────────────────────────── */ .frouge-benefits { display: grid; grid-template-columns: 1fr 1fr; gap: 0; border: 0.5px solid var(--pdp-border); margin: 28px 0; } .frouge-benefits__item { padding: 20px 16px; border-right: 0.5px solid var(--pdp-border); border-bottom: 0.5px solid var(--pdp-border); } .frouge-benefits__item:nth-child(even) { border-right: none; } .frouge-benefits__item:nth-last-child(-n+2) { border-bottom: none; } .frouge-benefits__title { font-family: 'Courier Prime', monospace; font-size: 9px; letter-spacing: 0.20em; text-transform: uppercase; color: var(--pdp-terracotta); margin-bottom: 6px; display: block; } .frouge-benefits__text { font-family: 'Jost', sans-serif; font-size: 12px; font-weight: 300; line-height: 1.5; color: var(--pdp-warm-gray); } /* ───────────────────────────────────────────── SEPARATOR LINE — TERRACOTTA ACCENT ───────────────────────────────────────────── */ .frouge-separator { width: 32px; height: 1px; background: var(--pdp-terracotta); margin: 24px 0; } /* ───────────────────────────────────────────── DAWN OVERRIDE — GENERAL CLEANUP ───────────────────────────────────────────── */ /* Remove Dawn's global border-radius on elements */ .product-form, .product-form__input { border-radius: 0 !important; } /* Clean up Dawn's default spacing on product page */ .product__info-container > * + * { margin-top: 0 !important; } /* Remove shadow from product images */ .product__media-list .product__media, .media { box-shadow: none !important; } /* Focus ring — brand consistent */ .product-page *:focus-visible { outline: 1px solid rgba(180, 106, 77, 0.55) !important; outline-offset: 4px !important; border-radius: 0 !important; } /* ───────────────────────────────────────────── REDUCED MOTION ───────────────────────────────────────────── */ @media (prefers-reduced-motion: reduce) { .accordion__title::after, .product-form__submit, .frouge-sticky-atc__btn { transition: none !important; } } /* Hide Shop Pay installment messaging */ .shopify-installments, .shopify-installments__learn-more, shop-pay-installments-banner, [class*="installment"] { display: none !important; } /* ── RELATED PRODUCTS REFINEMENT ── */ /* Section background — warm stone */ .product-recommendations { background: #F0EDE8 !important; padding: 40px 20px !important; margin-top: 0 !important; } /* Section heading */ .product-recommendations h2, .product-recommendations .title { font-family: 'Courier Prime', 'Courier New', monospace !important; font-size: 10px !important; letter-spacing: 0.28em !important; text-transform: uppercase !important; color: #6B6560 !important; font-weight: 400 !important; margin-bottom: 28px !important; } /* Product card — remove white box */ .product-recommendations .card-wrapper, .product-recommendations .card { background: transparent !important; border: none !important; box-shadow: none !important; border-radius: 0 !important; } /* Product card image */ .product-recommendations .card__media, .product-recommendations .media { border-radius: 0 !important; background: #FAF8F5 !important; } /* Product name */ .product-recommendations .card__heading, .product-recommendations .card__heading a { font-family: 'Cormorant Garamond', Georgia, serif !important; font-size: 14px !important; font-weight: 600 !important; letter-spacing: 0.05em !important; text-transform: uppercase !important; color: #1A1714 !important; margin-top: 12px !important; } /* Price */ .product-recommendations .price .price-item { font-family: 'Jost', Arial, sans-serif !important; font-size: 14px !important; font-weight: 400 !important; color: #1A1714 !important; letter-spacing: 0.04em !important; } /* Hide "From" prefix */ .product-recommendations .price__from { display: none !important; } /* Remove space between $ and number */ .product-recommendations .price .price-item::before { content: none !important; } /* Remove "From" prefix on all product cards */ .price__from, .price-from, .card__price .price__from, .product-recommendations .price__from, .price .visually-hidden + .price-item::before { display: none !important; } /* Fix $ space artifact — Dawn money format */ .product-recommendations .price .price-item, .card__price .price-item { letter-spacing: 0 !important; } /* Hide the "From" text node specifically */ .price:has(.price__sale) .price__from { display: none !important; } /* ── RELATED PRODUCTS CARD HIERARCHY ── */ /* Card inner spacing */ .product-recommendations .card__content, .product-recommendations .card-information { padding: 14px 0 0 !important; } /* Product name — uppercase serif */ .product-recommendations .card__heading, .product-recommendations .card__heading a, .product-recommendations h3.card__heading { font-family: 'Cormorant Garamond', Georgia, serif !important; font-size: 13px !important; font-weight: 600 !important; letter-spacing: 0.08em !important; text-transform: uppercase !important; color: #1A1714 !important; line-height: 1.2 !important; margin: 0 0 8px !important; text-decoration: none !important; } /* Price — separated with breathing room */ .product-recommendations .card__price, .product-recommendations .price { margin-top: 6px !important; } .product-recommendations .price .price-item--regular { font-family: 'Jost', Arial, sans-serif !important; font-size: 13px !important; font-weight: 300 !important; color: #6B6560 !important; letter-spacing: 0.06em !important; } /* Card gap — more breathing room between cards */ .product-recommendations .grid { gap: 24px 16px !important; } /* Remove card borders and shadows */ .product-recommendations .card, .product-recommendations .card-wrapper { border: none !important; box-shadow: none !important; border-radius: 0 !important; background: transparent !important; } /* Image container — warm background, no radius */ .product-recommendations .card__media { background: #FAF8F5 !important; border-radius: 0 !important; overflow: hidden !important; } /* Subtle terracotta hover line on image */ .product-recommendations .card__media::after { content: ''; position: absolute; bottom: 0; left: 0; right: 0; height: 1px; background: #B46A4D; opacity: 0; transition: opacity 0.22s ease; } .product-recommendations .card-wrapper:hover .card__media::after { opacity: 1; } /* ── SECTION LABEL — COMPLETE YOUR RITUAL ── */ /* Dawn component scope prevents font override. */ /* Content and position are correct. Accepted. */ .product-recommendations { background: #F0EDE8 !important; padding: 32px 20px 40px !important; /* Trust strip — fix label truncation on small screens */ .frouge-trust__item { padding: 14px 4px !important; } .frouge-trust__label { font-size: 7.5px !important; letter-spacing: 0.10em !important; line-height: 1.3 !important; word-break: keep-all !important; white-space: nowrap !important; }