/** Shopify CDN: Minification failed Line 1787:0 Unexpected "}" **/ /* ===================================================================== AZRIA OVERRIDES — v4.8 (Late May 2026) ===================================================================== Built on Dawn 15.4.1. Isolated from base.css — safe from theme updates. Structure: 1. Design Tokens 2. Global Overrides (logo, accessibility, focus, print) 3. Header & Navigation 4. Hero Banner (homepage) 5. Homepage + Collection Sections 5.1 Skin Concern Grid 5.2 Featured Collections — Best Sellers, New Arrivals, On Sale, Under 100 SAR (shared styling via attribute selector) 5.3 Shop by Routine 5.4 Seoul 1988 Spotlight 5.5 Trust Strip ("Why shop AZRIA?") 5.6 Collection page (cards + sticky sidebar) 6. Collection — Filter & Sort 7. Product Cards (universal) 8. Cart (bubble, sticky bar, drawer + RTL) 9. RTL Cross-Cutting 10. Accessibility (reduced motion, print) 11. Third-party app: Wishlist by Square 12. Contact Page 13. Cart Drawer — Recommendations 14. Cart Totals — Right-align, no-wrap Conventions: - Brand colors via CSS variables, never hardcoded - !important used only when overriding Dawn's own CSS - All hover states wrapped in @media (hover: hover) - All RTL adjustments live with their parent block v4.8 changes (Late May 2026): - §5.2 refactored from hardcoded section ID to attribute selector [id^="...__featured_collection_"]. All featured-collection sections on the homepage now share the same styling automatically. Duplicating Best Sellers in the Theme Editor is SAFE — new sections (New Arrivals, On Sale, Under 100 SAR) inherit styling. - §5.2 renamed "Best Sellers" → "Featured Collections" in TOC. v4.7 changes (May 2026): - TOC reconciled with file contents (§12/13/14 added; §5.4 renumbered) - §9 RTL: removed duplicate body selector - §11 Wishlist: brand brown → tokens; breakpoint 768px → 749px - §5.4 Seoul: caption brown → --az-brown-soft; bullet rgba updated - §6 Filter: text colors + checkbox border now use tokens - Various font-size hardcodes → matching tokens - New token: --az-border-control for form control borders ===================================================================== */ /* ===================================================================== ⚠️ MAINTENANCE WARNING — HARDCODED SECTION IDs ===================================================================== Sections §4 (Hero) and §5.1, §5.3–§5.7 (homepage) target hardcoded Shopify section instance IDs, e.g.: #shopify-section-template--19205521309878__image_banner #shopify-section-template--19205521309878__multicolumn_... 19205521309878 is the HOMEPAGE template ID. These selectors only work while those exact sections exist on the current homepage. ❌ DO NOT delete & re-add homepage sections in the theme editor — Shopify assigns a NEW id and that section's styling breaks SILENTLY. ❌ DO NOT recreate the homepage template from scratch. ✅ Reordering existing sections is safe. ✅ Editing section CONTENT (text, images, products) is safe. ✨ EXCEPTION — §5.2 Featured Collections (as of v4.8): Uses [id^="...__featured_collection_"] attribute selector. Duplicating Best Sellers via the Theme Editor IS SAFE — new sections automatically inherit styling. Verified for: - New Arrivals - On Sale Picks - Under 100 SAR Any future Featured Collection added to the homepage will inherit the same styling without code changes. Long-term fix: migrate remaining hardcoded IDs (§4, §5.1, §5.3–§5.7) to attribute selectors or class-based selectors (post-launch). ===================================================================== */ /* ===================================================================== 1. DESIGN TOKENS ===================================================================== */ :root { /* --- Brand colors ---------------------------------------------- */ --az-brown: #6b4f3a; --az-brown-deep: #4a3525; --az-brown-soft: #8a6a4f; --az-brown-tint: rgba(107, 79, 58, 0.06); --az-brown-line: rgba(107, 79, 58, 0.12); --az-cream: #faf5ef; --az-cream-warm: #fcf8f4; --az-red: #c0392b; --az-red-deep: #a02d22; --az-border-soft: #ebe0cf; --az-border-line: #f0e8da; --az-border-control: #d4c5ac; /* form-control borders (checkboxes, etc.) */ /* --- Text colors ----------------------------------------------- */ --az-text-strong: #2b211b; --az-text-medium: #4a3525; --az-text-soft: #6f6258; --az-text-muted: #888; --az-text-body: rgba(74, 53, 37, 0.85); /* --- Typography: desktop --------------------------------------- */ --az-fs-eyebrow: 1.15rem; --az-fs-caption: 1.2rem; --az-fs-body: 1.6rem; --az-fs-body-sm: 1.4rem; --az-fs-bullet: 1.45rem; --az-fs-card-title: 1.6rem; --az-fs-card-title-sm: 1.4rem; --az-fs-heading-md: 2.1rem; --az-fs-price: 1.6rem; --az-fs-price-strike: 1.35rem; /* --- Typography: mobile ---------------------------------------- */ --az-fs-eyebrow-m: 1.05rem; --az-fs-body-m: 1.5rem; --az-fs-body-sm-m: 1.35rem; --az-fs-bullet-m: 1.4rem; --az-fs-card-title-m: 1.5rem; --az-fs-card-title-sm-m: 1.3rem; --az-fs-heading-md-m: 1.7rem; --az-fs-price-m: 1.5rem; --az-fs-price-strike-m: 1.25rem; /* --- Line heights ---------------------------------------------- */ --az-lh-tight: 1.3; --az-lh-card: 1.4; --az-lh-default: 1.6; --az-lh-relaxed: 1.75; /* --- Radius ---------------------------------------------------- */ --az-radius-sm: 0.6rem; --az-radius-md: 12px; --az-radius-lg: 16px; --az-radius-xl: 20px; --az-radius-pill: 999px; /* --- Shadows --------------------------------------------------- */ --az-shadow-card: 0 4px 14px rgba(107, 79, 58, 0.06); --az-shadow-hover: 0 16px 36px rgba(107, 79, 58, 0.12); --az-shadow-dropdown: 0 8px 24px rgba(60, 42, 32, 0.08); --az-shadow-soft: 0 0.2rem 0.8rem rgba(107, 79, 58, 0.04); /* --- Transitions ----------------------------------------------- */ --az-trans-fast: 0.15s ease; --az-trans-base: 0.3s ease; --az-trans-slow: 0.35s ease; } /* Arabic / RTL — slightly larger body, more line-height for legibility */ html[dir="rtl"] { --az-fs-body: 1.65rem; --az-fs-body-m: 1.55rem; --az-fs-bullet: 1.5rem; --az-fs-bullet-m: 1.45rem; --az-lh-default: 1.75; --az-lh-relaxed: 1.85; } /* ===================================================================== 2. GLOBAL OVERRIDES ===================================================================== */ /* --- Section spacing fine-tune ---------------------------------- */ .shopify-section + .shopify-section { margin-top: 0; } /* --- Logo cleanup ----------------------------------------------- */ .header__heading-logo-wrapper { background: transparent !important; } .header__heading-logo { background: transparent !important; mix-blend-mode: multiply; } /* --- Accessibility: focus visibility ---------------------------- */ *:focus-visible { outline: 2px solid rgba(107, 79, 58, 0.6); outline-offset: 2px; border-radius: 4px; } .skip-to-content-link:focus { background: var(--az-brown); color: #ffffff; } /* ===================================================================== 3. HEADER & NAVIGATION ===================================================================== */ /* --------------------------------------------------------------------- 3.0 ANNOUNCEMENT BAR — Premium brown band with cream text --------------------------------------------------------------------- Replaces Dawn's default flat tan band with a confident brown announcement strip, refined typography, and brand-aligned colors. Sits above §3.1 STICKY HEADER and inherits its scrolling behavior. --------------------------------------------------------------------- */ .announcement-bar, .utility-bar, section[id^="shopify-section-announcement-bar"] .announcement-bar { background-color: var(--az-brown) !important; color: #ffffff; border: none; box-shadow: 0 1px 0 rgba(0, 0, 0, 0.04); display: flex; justify-content: center; align-items: center; } /* Force the inner wrapper to also center its message (Dawn uses a flex/grid layout here for optional social icons + locale) */ .announcement-bar .page-width, .utility-bar .utility-bar__inner, .announcement-bar > div, .utility-bar > div { display: flex !important; justify-content: center !important; align-items: center !important; width: 100%; } .announcement-bar__message, .utility-bar__message, .announcement-bar p, .utility-bar p { color: #ffffff !important; font-size: var(--az-fs-body-sm) !important; letter-spacing: 0.06em; font-weight: 500; padding: 0.8rem 1.6rem; margin: 0; text-align: center; flex: 1; /* take all available horizontal space so text-align center works visually */ } /* Links inside the bar inherit the cream color */ .announcement-bar a, .utility-bar a { color: #ffffff !important; text-decoration: none; border-bottom: 1px solid rgba(255, 255, 255, 0.4); padding-bottom: 1px; transition: border-color var(--az-trans-fast); } @media (hover: hover) { .announcement-bar a:hover, .utility-bar a:hover { border-bottom-color: #ffffff; } } /* Mobile: tighter padding, smaller text */ @media (max-width: 749px) { .announcement-bar__message, .utility-bar__message, .announcement-bar p, .utility-bar p { font-size: var(--az-fs-caption) !important; letter-spacing: 0.04em; padding: 0.6rem 1.2rem; } } /* RTL: text alignment stays center, just ensure padding works */ [dir="rtl"] .announcement-bar__message, [dir="rtl"] .utility-bar__message { letter-spacing: 0; } /* --------------------------------------------------------------------- 3.1 STICKY HEADER (mobile/tablet) --------------------------------------------------------------------- */ @media (max-width: 989px) { .section-header sticky-header { display: block; top: 0; z-index: 100; } .section-header { transition: transform var(--az-trans-base) ease-in-out; } sticky-header.shopify-section-header-sticky { position: fixed !important; top: 0; left: 0; right: 0; width: 100%; z-index: 100; background: rgb(var(--color-background)); box-shadow: 0 2px 10px rgba(0, 0, 0, 0.04); } sticky-header.shopify-section-header-hidden { transform: translateY(-100%); } sticky-header.animate { transition: transform 0.15s ease-out; } } /* --------------------------------------------------------------------- 3.2 HEADER ICONS + LANGUAGE TOGGLE --------------------------------------------------------------------- */ /* Language toggle sits first in header icons row */ .header__icons .az-lang-inline { order: -1; margin-right: 12px; } .az-lang-inline { display: inline-flex; align-items: center; margin: 0 8px 0 0; } @media (max-width: 749px) { .az-lang-inline { margin: 0 4px 0 0; } .az-lang-inline .az-lang-btn { min-width: 36px; height: 26px; font-size: 11px; padding: 0 8px; } } /* Hide Dawn's legacy centered language toggle */ .header-group .shopify-section .language-toggle-wrapper:not(.az-lang-inline-wrapper) { display: none !important; } /* --------------------------------------------------------------------- 3.3 MAIN MENU LINKS (top-level nav) --------------------------------------------------------------------- Overrides Dawn's default muted gray with confident dark text, brand brown hover, and a refined animated underline. Underline is reset to none inside submenus (§3.4) so dropdown items only get background tint on hover. --------------------------------------------------------------------- */ .header__menu-item, .header__menu-item span, header-menu .header__menu-item { color: var(--az-text-strong) !important; font-weight: 500 !important; letter-spacing: 0.01em; text-decoration: none !important; transition: color var(--az-trans-fast); position: relative; } /* Animated underline — hidden by default, scales in on hover/active */ .header__menu-item::after { content: ""; position: absolute; left: 1.2rem; right: 1.2rem; bottom: 0.4rem; height: 1.5px; background: var(--az-brown); transform: scaleX(0); transform-origin: center; transition: transform var(--az-trans-fast); } @media (hover: hover) { .header__menu-item:hover, .header__menu-item:hover span { color: var(--az-brown) !important; text-decoration: none !important; } .header__menu-item:hover::after { transform: scaleX(1); } } /* Active / current page state */ .header__active-menu-item, .header__menu-item[aria-current="page"] { color: var(--az-brown) !important; } .header__active-menu-item::after, .header__menu-item[aria-current="page"]::after { transform: scaleX(1); } /* Dropdown caret inherits current color (brown on hover/active) */ .header__menu-item .icon-caret, summary.header__menu-item .icon-caret { color: currentColor; } /* --------------------------------------------------------------------- 3.4 DROPDOWN MENU (desktop) --------------------------------------------------------------------- Submenu items use background-tint hover instead of the underline used by top-level menu items (§3.3). --------------------------------------------------------------------- */ .header__submenu, details[open] > .header__submenu, header-menu .header__submenu, .mega-menu__content { background-color: #fdf9f4 !important; border: 1px solid var(--az-brown-line); border-radius: 10px; box-shadow: 0 4px 12px rgba(107, 79, 58, 0.06), 0 14px 36px rgba(107, 79, 58, 0.10); padding: 10px 0; min-width: 220px; z-index: 1000; overflow: hidden; } .header__submenu .header__menu-item, .header__submenu a.header__menu-item, .mega-menu__link { background-color: transparent; color: var(--az-text-strong); padding: 11px 22px; font-size: var(--az-fs-body-sm); letter-spacing: 0.02em; text-decoration: none; transition: background-color var(--az-trans-fast), color var(--az-trans-fast), padding-left var(--az-trans-fast), padding-right var(--az-trans-fast); } /* Prevent §3.3 underline from leaking into submenu items */ .header__submenu .header__menu-item::after, .mega-menu__link::after { display: none; } @media (hover: hover) { .header__submenu .header__menu-item:hover, .header__submenu a.header__menu-item:hover, .mega-menu__link:hover { background-color: var(--az-brown-tint); color: var(--az-brown); padding-left: 26px; text-decoration: none; } } /* RTL: slide effect flips to the left (item shifts right edge) */ html[dir="rtl"] .header__submenu .header__menu-item, html[dir="rtl"] .header__submenu a.header__menu-item, html[dir="rtl"] .mega-menu__link { padding-left: 22px; padding-right: 22px; } @media (hover: hover) { html[dir="rtl"] .header__submenu .header__menu-item:hover, html[dir="rtl"] .header__submenu a.header__menu-item:hover, html[dir="rtl"] .mega-menu__link:hover { padding-left: 22px; padding-right: 26px; } } /* Dropdown RTL */ html[dir="rtl"] .header__submenu, html[dir="rtl"] .mega-menu__content { text-align: right; } html[dir="rtl"] .header__submenu .header__menu-item, html[dir="rtl"] .mega-menu__link { padding: 10px 20px; text-align: right; } /* Mobile hamburger submenu stays transparent (Dawn native) */ @media (max-width: 989px) { .menu-drawer__submenu { background: transparent !important; box-shadow: none; border: none; } } /* --------------------------------------------------------------------- 3.5 MOBILE DRAWER + RTL --------------------------------------------------------------------- RTL animation is deliberately disabled — fixes iOS Safari mid-slide render glitch where hero image bled through drawer edge. Revisit once DOM-level debugging is done post-launch. --------------------------------------------------------------------- */ @media (max-width: 989px) { .menu-drawer { max-width: 100vw; width: 100%; box-sizing: border-box; overflow-x: hidden; } .menu-drawer__inner-container { padding: 0; width: 100%; box-sizing: border-box; } /* Mobile drawer items inherit confident treatment from §3.3 */ .menu-drawer__menu-item { color: var(--az-text-strong) !important; font-weight: 500 !important; } /* RTL: anchor drawer to right, snap (no animation) */ html[dir="rtl"] .menu-drawer, html[dir="rtl"] .menu-drawer.animate { left: auto !important; right: 0 !important; transform: translateX(100%); transition: none !important; text-align: right; } html[dir="rtl"] details[open] > .menu-drawer, html[dir="rtl"] .menu-drawer[open], html[dir="rtl"] .js-menu-drawer-open .menu-drawer { transform: translateX(0) !important; transition: none !important; } /* RTL: menu item alignment */ html[dir="rtl"] .menu-drawer__menu-item, html[dir="rtl"] .menu-drawer__menu-item > a { text-align: right; padding-right: 20px; padding-left: 20px; direction: rtl; } html[dir="rtl"] .menu-drawer__menu-item > summary { text-align: right; padding-right: 20px; padding-left: 40px; direction: rtl; display: flex; flex-direction: row-reverse; align-items: center; justify-content: flex-start; } /* RTL: chevron flips to left */ html[dir="rtl"] .menu-drawer__menu-item .icon-caret, html[dir="rtl"] summary .icon-caret { right: auto; left: 20px; transform: rotate(180deg); } /* RTL: submenu indent */ html[dir="rtl"] .menu-drawer__submenu { right: 0; left: auto; text-align: right; } html[dir="rtl"] .menu-drawer__submenu .menu-drawer__menu-item { padding-right: 36px; padding-left: 20px; font-size: var(--az-fs-body-sm); } /* RTL: back button */ html[dir="rtl"] .menu-drawer__close-button { flex-direction: row-reverse; } html[dir="rtl"] .menu-drawer__close-button svg { transform: rotate(180deg); } } /* --------------------------------------------------------------------- 3.6 PREDICTIVE SEARCH --------------------------------------------------------------------- */ @media (hover: hover) { .predictive-search__results .predictive-search__list-item:hover { background: var(--az-brown-tint); } } .predictive-search__results .price { color: var(--az-brown); font-weight: 500; } /* ===================================================================== 4. HERO BANNER (homepage) ===================================================================== */ /* Section ID: #shopify-section-template--19205521309878__image_banner Last working state captured: May 17, 2026 - Desktop hero panel: right side, English & Arabic both ✓ - Mobile hero panel: TOP of hero, products visible below ✓ - Secondary CTA: ghost button (transparent + brown border) ✓ */ #shopify-section-template--19205521309878__image_banner .banner { min-height: 520px; overflow: hidden; background: var(--az-cream); } #shopify-section-template--19205521309878__image_banner .banner__media { background: var(--az-cream); } #shopify-section-template--19205521309878__image_banner .banner__media img { object-fit: cover; object-position: center center; } /* Heading & description (shared baseline) */ #shopify-section-template--19205521309878__image_banner .banner__heading { margin-bottom: 1.7rem; font-weight: 500; line-height: 1.08; letter-spacing: -1.1px; color: var(--az-text-strong); } #shopify-section-template--19205521309878__image_banner .banner__text, #shopify-section-template--19205521309878__image_banner .banner__text p { color: rgba(43, 33, 27, 0.78); font-size: 1.55rem; line-height: 1.65; font-weight: 400; } #shopify-section-template--19205521309878__image_banner .banner__text { max-width: 48rem; margin-top: 0; margin-bottom: 2.2rem; } .banner__content--center .banner__text { text-shadow: 0 2px 12px rgba(0, 0, 0, 0.3); } /* Buttons */ #shopify-section-template--19205521309878__image_banner .banner__buttons { display: flex; gap: 1.4rem; flex-wrap: wrap; margin-top: 2.1rem; } #shopify-section-template--19205521309878__image_banner .banner__buttons .button { min-width: 200px; min-height: 46px; border-radius: var(--az-radius-pill); padding-left: 2.8rem; padding-right: 2.8rem; background: var(--az-brown); color: #ffffff; border-color: var(--az-brown); font-size: var(--az-fs-body-sm); font-weight: 500; letter-spacing: 0.03em; box-shadow: none; transition: background var(--az-trans-base), border-color var(--az-trans-base), color var(--az-trans-base); } @media (hover: hover) { #shopify-section-template--19205521309878__image_banner .banner__buttons .button:hover { background: var(--az-brown-deep); color: #ffffff; border-color: var(--az-brown-deep); } } /* Secondary CTA — ghost button. Uses deeper brown + bumped weight by default (not just on hover) so it reads at equal visual weight to the filled primary, despite being transparent. */ #shopify-section-template--19205521309878__image_banner .banner__buttons .button:nth-of-type(2) { background: transparent; color: var(--az-brown-deep); border: 1.5px solid var(--az-brown-deep); font-weight: 600; } @media (hover: hover) { #shopify-section-template--19205521309878__image_banner .banner__buttons .button:nth-of-type(2):hover { background: rgba(107, 79, 58, 0.08); color: var(--az-brown-deep); border-color: var(--az-brown-deep); } } /* Desktop layout — panel on right side */ @media screen and (min-width: 750px) { #shopify-section-template--19205521309878__image_banner .banner__content { max-width: 1280px; margin-left: auto; margin-right: auto; justify-content: flex-end; align-items: center; padding-left: 5rem; padding-right: 5rem; } #shopify-section-template--19205521309878__image_banner .banner__box { width: 44%; max-width: 620px; padding: 0; background: transparent; box-shadow: none; text-align: left; } #shopify-section-template--19205521309878__image_banner .banner__heading { font-size: clamp(4rem, 3.6vw, 5.2rem); max-width: 18ch; } } /* Mobile layout — text panel at top, products visible below */ @media screen and (max-width: 749px) { #shopify-section-template--19205521309878__image_banner .banner__media img { object-position: 25% 0%; } #shopify-section-template--19205521309878__image_banner .banner__content { align-items: flex-start; justify-content: center; padding-top: 1.5rem; padding-bottom: 0; padding-left: 1.8rem; padding-right: 1.8rem; } #shopify-section-template--19205521309878__image_banner .banner__box { width: 100%; max-width: 32rem; padding: 1.3rem 1.2rem; background: rgba(250, 245, 239, 0.92); -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); border-radius: var(--az-radius-lg); box-shadow: none; text-align: center; } #shopify-section-template--19205521309878__image_banner .banner__heading { font-size: 2.2rem; line-height: 1.18; letter-spacing: -0.5px; margin-bottom: 0.8rem; } #shopify-section-template--19205521309878__image_banner .banner__text, #shopify-section-template--19205521309878__image_banner .banner__text p { font-size: 1.2rem; line-height: 1.5; color: rgba(43, 33, 27, 0.82); max-width: 29rem; margin-left: auto; margin-right: auto; margin-bottom: 0; } #shopify-section-template--19205521309878__image_banner .banner__buttons { width: 100%; flex-direction: column; gap: 0.7rem; margin-top: 1.1rem; } #shopify-section-template--19205521309878__image_banner .banner__buttons .button { width: 100%; min-width: 0; min-height: 40px; font-size: 1.18rem; } } /* Small mobile (≤430px) */ @media screen and (max-width: 430px) { #shopify-section-template--19205521309878__image_banner .banner { min-height: 520px; } #shopify-section-template--19205521309878__image_banner .banner__box { max-width: 31rem; padding: 1.6rem 1.3rem; } #shopify-section-template--19205521309878__image_banner .banner__heading { font-size: 2.35rem; } #shopify-section-template--19205521309878__image_banner .banner__text, #shopify-section-template--19205521309878__image_banner .banner__text p { font-size: 1.24rem; } } /* Hero RTL */ @media screen and (min-width: 750px) { html[dir="rtl"] #shopify-section-template--19205521309878__image_banner .banner__content { justify-content: flex-start; } html[dir="rtl"] #shopify-section-template--19205521309878__image_banner .banner__box { text-align: right; } } @media screen and (max-width: 749px) { html[dir="rtl"] #shopify-section-template--19205521309878__image_banner .banner__box { text-align: center; } } html[dir="rtl"] #shopify-section-template--19205521309878__image_banner .banner__heading { letter-spacing: 0; line-height: 1.35; margin-bottom: 2rem; } html[dir="rtl"] #shopify-section-template--19205521309878__image_banner .banner__text, html[dir="rtl"] #shopify-section-template--19205521309878__image_banner .banner__text p { line-height: 1.8; margin-bottom: 2.4rem; } /* ===================================================================== 5. HOMEPAGE + COLLECTION SECTIONS ===================================================================== */ /* --------------------------------------------------------------------- 5.1 SKIN CONCERN GRID (collection-list) --------------------------------------------------------------------- Scoped to the specific section ID so future collection-list sections on product/collection/search pages don't inherit this styling. --------------------------------------------------------------------- */ #shopify-section-template--19205521309878__collection_list_VnkFLm .collection-list-wrapper { max-width: 1200px; margin-left: auto; margin-right: auto; background: linear-gradient(to bottom, rgba(250, 247, 243, 0.28), rgba(255, 255, 255, 1)); border-radius: 18px; padding-top: 14px; padding-bottom: 6px; } #shopify-section-template--19205521309878__collection_list_VnkFLm .collection-list-wrapper .title { margin-bottom: 22px; font-weight: 500; letter-spacing: -0.3px; } #shopify-section-template--19205521309878__collection_list_VnkFLm .collection-list { gap: 12px !important; } @media screen and (min-width: 750px) { #shopify-section-template--19205521309878__collection_list_VnkFLm .collection-list { row-gap: 20px !important; } } /* Card structure */ #shopify-section-template--19205521309878__collection_list_VnkFLm .collection-list .card-wrapper, #shopify-section-template--19205521309878__collection_list_VnkFLm .collection-list .card, #shopify-section-template--19205521309878__collection_list_VnkFLm .collection-list .card__inner, #shopify-section-template--19205521309878__collection_list_VnkFLm .collection-list .card__media, #shopify-section-template--19205521309878__collection_list_VnkFLm .collection-list .media { border-radius: var(--az-radius-md); overflow: hidden; } #shopify-section-template--19205521309878__collection_list_VnkFLm .collection-list .card__inner { box-shadow: var(--az-shadow-card); transition: box-shadow var(--az-trans-slow), transform var(--az-trans-slow), filter var(--az-trans-slow); } #shopify-section-template--19205521309878__collection_list_VnkFLm .collection-list .card__media img, #shopify-section-template--19205521309878__collection_list_VnkFLm .collection-list .media img { transition: transform var(--az-trans-slow); } /* Make entire card clickable; hide text labels */ #shopify-section-template--19205521309878__collection_list_VnkFLm .collection-list .card-wrapper, #shopify-section-template--19205521309878__collection_list_VnkFLm .collection-list .card, #shopify-section-template--19205521309878__collection_list_VnkFLm .collection-list .card__inner { position: relative; } #shopify-section-template--19205521309878__collection_list_VnkFLm .collection-list .card__heading, #shopify-section-template--19205521309878__collection_list_VnkFLm .collection-list .card__heading a { font-size: 0 !important; line-height: 0 !important; margin: 0 !important; text-decoration: none !important; } #shopify-section-template--19205521309878__collection_list_VnkFLm .collection-list .card__heading a::after { content: ""; position: absolute; inset: 0; z-index: 10; } #shopify-section-template--19205521309878__collection_list_VnkFLm .collection-list .card-information, #shopify-section-template--19205521309878__collection_list_VnkFLm .collection-list .card__caption, #shopify-section-template--19205521309878__collection_list_VnkFLm .collection-list .icon-wrap, #shopify-section-template--19205521309878__collection_list_VnkFLm .collection-list .card__icon, #shopify-section-template--19205521309878__collection_list_VnkFLm .collection-list .icon-arrow { display: none !important; } /* Desktop hover */ @media (hover: hover) and (min-width: 750px) { #shopify-section-template--19205521309878__collection_list_VnkFLm .collection-list .card:hover .card__inner { box-shadow: 0 8px 22px rgba(107, 79, 58, 0.11); transform: translateY(-2px); filter: brightness(1.015); } #shopify-section-template--19205521309878__collection_list_VnkFLm .collection-list .card:hover .card__media img, #shopify-section-template--19205521309878__collection_list_VnkFLm .collection-list .card:hover .media img { transform: scale(1.02); } } /* Reveal animation */ #shopify-section-template--19205521309878__collection_list_VnkFLm .collection-list .grid__item { animation: skinFadeUp 0.7s ease both; animation-delay: calc(var(--animation-order, 0) * 0.05s); } @keyframes skinFadeUp { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: translateY(0); } } /* Mobile */ @media screen and (max-width: 749px) { #shopify-section-template--19205521309878__collection_list_VnkFLm .collection-list-wrapper { padding: 16px 12px 18px; } #shopify-section-template--19205521309878__collection_list_VnkFLm .collection-list-wrapper .title { margin-bottom: 16px; line-height: 1.25; } /* Force grid layout with 2 equal columns */ #shopify-section-template--19205521309878__collection_list_VnkFLm .collection-list { display: grid !important; grid-template-columns: 1fr 1fr !important; gap: 10px !important; } /* Critical: override Dawn's min-width / max-width on grid items so they can shrink to fit two-per-row regardless of card content size */ #shopify-section-template--19205521309878__collection_list_VnkFLm .collection-list .grid__item { width: 100% !important; max-width: 100% !important; min-width: 0 !important; flex: none !important; } #shopify-section-template--19205521309878__collection_list_VnkFLm .collection-list .card__inner { box-shadow: 0 4px 12px rgba(107, 79, 58, 0.07); } } /* --------------------------------------------------------------------- 5.2 BEST SELLERS --------------------------------------------------------------------- Section ID: [id^="shopify-section-template--19205521309878__featured_collection_"] --------------------------------------------------------------------- */ [id^="shopify-section-template--19205521309878__featured_collection_"] .featured-collection { max-width: 1200px; margin-left: auto; margin-right: auto; } [id^="shopify-section-template--19205521309878__featured_collection_"] .title { margin-bottom: 24px; font-weight: 500; letter-spacing: -0.4px; color: var(--az-text-strong); } /* Grid */ [id^="shopify-section-template--19205521309878__featured_collection_"] .grid { column-gap: 18px !important; row-gap: 34px !important; } @media screen and (min-width: 990px) { [id^="shopify-section-template--19205521309878__featured_collection_"] .grid__item { width: calc(25% - 14px) !important; max-width: calc(25% - 14px) !important; } } /* Card structure NOTE: Do NOT use display:flex on .card__inner — breaks Dawn badge position */ [id^="shopify-section-template--19205521309878__featured_collection_"] .card-wrapper, [id^="shopify-section-template--19205521309878__featured_collection_"] .card { border-radius: var(--az-radius-lg); } [id^="shopify-section-template--19205521309878__featured_collection_"] .card { background: transparent; overflow: visible; } [id^="shopify-section-template--19205521309878__featured_collection_"] .card__inner { position: relative !important; border-radius: var(--az-radius-lg); overflow: hidden; background: #ffffff; border: 1px solid rgba(107, 79, 58, 0.06); box-shadow: 0 5px 16px rgba(107, 79, 58, 0.05); transition: transform var(--az-trans-base), box-shadow var(--az-trans-base), border-color var(--az-trans-base); } /* Image fit */ [id^="shopify-section-template--19205521309878__featured_collection_"] .card__media { padding: 8px !important; } [id^="shopify-section-template--19205521309878__featured_collection_"] .media { background: transparent !important; } [id^="shopify-section-template--19205521309878__featured_collection_"] .media img { object-fit: contain !important; padding: 4px !important; transition: transform var(--az-trans-slow); } /* Sale badge */ [id^="shopify-section-template--19205521309878__featured_collection_"] .card__badge { position: absolute !important; top: 3px !important; left: 3px !important; right: auto !important; bottom: auto !important; z-index: 5 !important; } [id^="shopify-section-template--19205521309878__featured_collection_"] .badge { background: var(--az-red) !important; color: #ffffff !important; border-color: var(--az-red) !important; border-radius: var(--az-radius-pill) !important; padding: 5px 11px !important; font-size: 1.1rem !important; font-weight: 600 !important; letter-spacing: 0.02em; line-height: 1 !important; box-shadow: 0 4px 10px rgba(192, 57, 43, 0.12); } /* Wishlist icon stays above overlay link */ [id^="shopify-section-template--19205521309878__featured_collection_"] .card-wrapper button, [id^="shopify-section-template--19205521309878__featured_collection_"] .card-wrapper svg { z-index: 6; } /* Product info area */ [id^="shopify-section-template--19205521309878__featured_collection_"] .card__content { padding-top: 10px !important; } [id^="shopify-section-template--19205521309878__featured_collection_"] .card__information { padding: 12px 2px 8px !important; } [id^="shopify-section-template--19205521309878__featured_collection_"] .card-information { padding-top: 4px !important; } /* Product title — uses tokens, clamps to 2 lines for price alignment */ [id^="shopify-section-template--19205521309878__featured_collection_"] .card__heading { font-size: var(--az-fs-card-title) !important; line-height: var(--az-lh-card) !important; font-weight: 500 !important; letter-spacing: -0.05px; color: var(--az-text-strong) !important; margin-top: 6px !important; margin-bottom: 6px !important; /* Clamp to 2 lines so prices align across cards */ min-height: 2.8em; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; } [id^="shopify-section-template--19205521309878__featured_collection_"] .card__heading a { color: inherit !important; text-decoration: none !important; } @media (hover: hover) { [id^="shopify-section-template--19205521309878__featured_collection_"] .card__heading a:hover { color: var(--az-brown) !important; } } /* Price */ [id^="shopify-section-template--19205521309878__featured_collection_"] .price { font-size: var(--az-fs-price) !important; line-height: var(--az-lh-card) !important; font-weight: 500 !important; color: var(--az-text-strong) !important; margin-top: 4px !important; margin-bottom: 0 !important; } [id^="shopify-section-template--19205521309878__featured_collection_"] .price--on-sale .price-item--regular { font-size: var(--az-fs-price-strike) !important; font-weight: 400 !important; opacity: 0.42 !important; margin-right: 10px !important; } [id^="shopify-section-template--19205521309878__featured_collection_"] .price--on-sale .price-item--sale { font-size: var(--az-fs-price) !important; font-weight: 500 !important; color: var(--az-text-strong) !important; } /* Tighter title-to-price gap on desktop */ @media screen and (min-width: 750px) { [id^="shopify-section-template--19205521309878__featured_collection_"] .card__heading { margin-bottom: 4px !important; } [id^="shopify-section-template--19205521309878__featured_collection_"] .price { margin-top: 0 !important; } } /* Desktop hover */ @media (hover: hover) and (min-width: 750px) { [id^="shopify-section-template--19205521309878__featured_collection_"] .card:hover .card__inner { transform: translateY(-4px); border-color: rgba(107, 79, 58, 0.12); box-shadow: 0 16px 36px rgba(107, 79, 58, 0.12); } [id^="shopify-section-template--19205521309878__featured_collection_"] .card:hover img { transform: scale(1.015); } } /* Quick add button (kept for future enablement) */ [id^="shopify-section-template--19205521309878__featured_collection_"] .quick-add__submit, [id^="shopify-section-template--19205521309878__featured_collection_"] .button { border-radius: var(--az-radius-pill) !important; min-height: 38px !important; font-size: 1.3rem !important; font-weight: 500 !important; } [id^="shopify-section-template--19205521309878__featured_collection_"] .quick-add__submit:not([disabled]) { color: var(--az-brown) !important; border-color: var(--az-brown) !important; } @media (hover: hover) { [id^="shopify-section-template--19205521309878__featured_collection_"] .quick-add__submit:not([disabled]):hover { background: var(--az-brown) !important; color: #ffffff !important; } } [id^="shopify-section-template--19205521309878__featured_collection_"] .quick-add__submit[disabled] { opacity: 0.55 !important; background: transparent !important; color: #8a7a6d !important; border-color: rgba(107, 79, 58, 0.35) !important; } /* Mobile */ @media screen and (max-width: 749px) { [id^="shopify-section-template--19205521309878__featured_collection_"] .title { margin-bottom: 16px; line-height: 1.25; } [id^="shopify-section-template--19205521309878__featured_collection_"] .grid { column-gap: 10px !important; row-gap: 22px !important; } [id^="shopify-section-template--19205521309878__featured_collection_"] .card__inner { border-radius: 14px; } [id^="shopify-section-template--19205521309878__featured_collection_"] .card__media { padding: 6px !important; } [id^="shopify-section-template--19205521309878__featured_collection_"] .media img { padding: 3px !important; } [id^="shopify-section-template--19205521309878__featured_collection_"] .card__heading { font-size: var(--az-fs-card-title-m) !important; min-height: 2.7em; margin-top: 4px !important; margin-bottom: 4px !important; } [id^="shopify-section-template--19205521309878__featured_collection_"] .price, [id^="shopify-section-template--19205521309878__featured_collection_"] .price--on-sale .price-item--sale { font-size: var(--az-fs-price-m) !important; } [id^="shopify-section-template--19205521309878__featured_collection_"] .price--on-sale .price-item--regular { font-size: var(--az-fs-price-strike-m) !important; margin-right: 6px !important; } [id^="shopify-section-template--19205521309878__featured_collection_"] .card__badge { top: 2px !important; left: 2px !important; } [id^="shopify-section-template--19205521309878__featured_collection_"] .badge { padding: 4px 9px !important; font-size: 1rem !important; } } /* --------------------------------------------------------------------- 5.3 SHOP BY ROUTINE --------------------------------------------------------------------- Section ID: #shopify-section-template--19205521309878__multicolumn_HErJzz --------------------------------------------------------------------- */ #shopify-section-template--19205521309878__multicolumn_HErJzz .multicolumn { padding-top: 14px !important; } #shopify-section-template--19205521309878__multicolumn_HErJzz .title { margin-bottom: 20px !important; } #shopify-section-template--19205521309878__multicolumn_HErJzz .multicolumn-card { position: relative; cursor: pointer; padding: 8px !important; background: transparent !important; box-shadow: none !important; display: flex; flex-direction: column; align-items: center; text-align: center; gap: 10px; border: 1px solid rgba(107, 79, 58, 0.05); border-radius: 18px; transition: transform var(--az-trans-slow); } #shopify-section-template--19205521309878__multicolumn_HErJzz .multicolumn-card__image-wrapper { display: block !important; width: 100% !important; margin-bottom: 16px !important; position: relative; z-index: 2; border-radius: 14px; overflow: hidden; } #shopify-section-template--19205521309878__multicolumn_HErJzz .multicolumn-card__image-wrapper .media { display: block !important; width: 100% !important; padding-bottom: 100% !important; height: auto !important; background: transparent !important; border-radius: 14px; overflow: hidden; } #shopify-section-template--19205521309878__multicolumn_HErJzz .multicolumn-card__image-wrapper img { position: absolute !important; inset: 0 !important; width: 100% !important; height: 100% !important; object-fit: cover !important; display: block !important; transition: transform 0.4s ease; } /* Remove column separators */ #shopify-section-template--19205521309878__multicolumn_HErJzz .multicolumn-list__item, #shopify-section-template--19205521309878__multicolumn_HErJzz .multicolumn-card__info { background: transparent !important; box-shadow: none !important; border-right: none !important; } #shopify-section-template--19205521309878__multicolumn_HErJzz .multicolumn-card__info { padding-top: 6px; } /* Card heading — token-driven */ #shopify-section-template--19205521309878__multicolumn_HErJzz .multicolumn-card__info h3 { font-size: var(--az-fs-card-title) !important; line-height: var(--az-lh-card) !important; font-weight: 600; letter-spacing: -0.2px; color: var(--az-text-medium) !important; margin-top: 4px; margin-bottom: 2px; } /* Decorative underline between heading and description */ #shopify-section-template--19205521309878__multicolumn_HErJzz .multicolumn-card__info h3::after { content: ""; display: block; width: 32px; height: 1.5px; background-color: var(--az-brown-soft); margin: 10px auto 12px auto; opacity: 0.7; } /* Description */ #shopify-section-template--19205521309878__multicolumn_HErJzz .multicolumn-card__info .rte { font-size: var(--az-fs-bullet) !important; line-height: var(--az-lh-default) !important; color: var(--az-text-soft) !important; margin-bottom: 0; max-width: 240px; margin-left: auto; margin-right: auto; } /* Whole-card link overlay */ #shopify-section-template--19205521309878__multicolumn_HErJzz .multicolumn-card__info .link { position: absolute !important; inset: 0 !important; z-index: 10 !important; display: block !important; width: 100% !important; height: 100% !important; opacity: 0 !important; font-size: 0 !important; color: transparent !important; background: transparent !important; } /* Desktop hover */ @media (hover: hover) and (min-width: 750px) { #shopify-section-template--19205521309878__multicolumn_HErJzz .multicolumn-card:hover { transform: translateY(-4px); } #shopify-section-template--19205521309878__multicolumn_HErJzz .multicolumn-card:hover img { transform: scale(1.02); filter: brightness(1.02); } } /* Mobile */ @media screen and (max-width: 749px) { #shopify-section-template--19205521309878__multicolumn_HErJzz .multicolumn { padding-top: 14px !important; } #shopify-section-template--19205521309878__multicolumn_HErJzz .title { margin-bottom: 16px !important; } #shopify-section-template--19205521309878__multicolumn_HErJzz .multicolumn-card { padding: 6px !important; } #shopify-section-template--19205521309878__multicolumn_HErJzz .multicolumn-card__image-wrapper { margin-bottom: 12px !important; } #shopify-section-template--19205521309878__multicolumn_HErJzz .multicolumn-card__info h3 { font-size: var(--az-fs-card-title-m) !important; margin-bottom: 4px; } #shopify-section-template--19205521309878__multicolumn_HErJzz .multicolumn-card__info h3::after { width: 28px; margin: 8px auto 10px auto; } #shopify-section-template--19205521309878__multicolumn_HErJzz .multicolumn-card__info .rte { font-size: var(--az-fs-bullet-m) !important; line-height: var(--az-lh-default) !important; max-width: 220px; } } /* --------------------------------------------------------------------- 5.4 SEOUL 1988 SPOTLIGHT --------------------------------------------------------------------- Section ID: #shopify-section-template--19205521309878__image_with_text_fC9jTy To reuse: duplicate this block, swap the section ID, done. --------------------------------------------------------------------- */ #shopify-section-template--19205521309878__image_with_text_fC9jTy .image-with-text { max-width: 1200px; margin-left: auto; margin-right: auto; border-radius: 22px; overflow: hidden; background: linear-gradient(to bottom, rgba(255, 255, 255, 0.98), rgba(250, 247, 243, 0.94)); box-shadow: 0 10px 30px rgba(107, 79, 58, 0.07); } #shopify-section-template--19205521309878__image_with_text_fC9jTy .image-with-text__media { border-radius: var(--az-radius-xl); overflow: hidden; } #shopify-section-template--19205521309878__image_with_text_fC9jTy .image-with-text__media img { transition: transform 0.45s ease; } #shopify-section-template--19205521309878__image_with_text_fC9jTy .image-with-text__content { padding: 5rem; background: radial-gradient(circle at 30% 25%, rgba(255, 255, 255, 0.65), rgba(255, 255, 255, 0) 60%), linear-gradient(180deg, rgba(250, 245, 239, 0.97), rgba(245, 238, 229, 0.97)); border-radius: 0 24px 24px 0; } /* Caption */ #shopify-section-template--19205521309878__image_with_text_fC9jTy .caption { font-size: var(--az-fs-eyebrow); line-height: 1.4; font-weight: 600; letter-spacing: 2.2px; text-transform: uppercase; color: var(--az-brown-soft); } /* Heading */ #shopify-section-template--19205521309878__image_with_text_fC9jTy .image-with-text__heading { font-size: clamp(3.2rem, 4vw, 4.8rem); line-height: 1.08; letter-spacing: -1.4px; font-weight: 500; color: var(--az-text-strong); max-width: 12ch; } /* Description */ #shopify-section-template--19205521309878__image_with_text_fC9jTy .image-with-text__text { font-size: var(--az-fs-body) !important; line-height: var(--az-lh-relaxed) !important; color: var(--az-text-body) !important; max-width: 48rem; } #shopify-section-template--19205521309878__image_with_text_fC9jTy .image-with-text__text p { margin: 0 0 1.6rem 0; } /* Benefit list */ #shopify-section-template--19205521309878__image_with_text_fC9jTy .image-with-text__text ul { list-style: none; margin: 1.4rem 0 0 0; padding: 0; } #shopify-section-template--19205521309878__image_with_text_fC9jTy .image-with-text__text li { position: relative; padding-left: 1.7rem; margin-bottom: 0.75rem; font-size: var(--az-fs-bullet) !important; line-height: var(--az-lh-default) !important; color: rgba(74, 53, 37, 0.88); } #shopify-section-template--19205521309878__image_with_text_fC9jTy .image-with-text__text li:last-child { margin-bottom: 0; } #shopify-section-template--19205521309878__image_with_text_fC9jTy .image-with-text__text li::before { content: ""; position: absolute; left: 0; top: 0.68em; width: 5px; height: 5px; border-radius: 50%; background-color: rgba(138, 106, 79, 0.45); /* --az-brown-soft at 45% */ } #shopify-section-template--19205521309878__image_with_text_fC9jTy .image-with-text__content > * + * { margin-top: 1.6rem; } /* Button */ #shopify-section-template--19205521309878__image_with_text_fC9jTy .button { min-height: 46px; border-radius: var(--az-radius-pill); padding-left: 3rem; padding-right: 3rem; font-size: var(--az-fs-bullet); font-weight: 500; margin-top: 2rem; } /* Desktop hover */ @media (hover: hover) and (min-width: 750px) { #shopify-section-template--19205521309878__image_with_text_fC9jTy .image-with-text:hover img { transform: scale(1.015); } } /* Mobile */ @media screen and (max-width: 749px) { #shopify-section-template--19205521309878__image_with_text_fC9jTy .image-with-text { border-radius: 18px; } #shopify-section-template--19205521309878__image_with_text_fC9jTy .image-with-text__content { padding: 3rem 2.2rem !important; border-radius: 0 0 20px 20px; text-align: center; } #shopify-section-template--19205521309878__image_with_text_fC9jTy .caption { font-size: var(--az-fs-eyebrow) !important; line-height: 1.4 !important; letter-spacing: 2px !important; margin-bottom: 1rem !important; } #shopify-section-template--19205521309878__image_with_text_fC9jTy .image-with-text__heading { font-size: 3.2rem !important; line-height: 1.12 !important; letter-spacing: -0.8px !important; max-width: 100%; margin-bottom: 1.6rem !important; } #shopify-section-template--19205521309878__image_with_text_fC9jTy .image-with-text__text { font-size: var(--az-fs-body-m) !important; line-height: var(--az-lh-relaxed) !important; max-width: 34rem; margin-left: auto; margin-right: auto; } #shopify-section-template--19205521309878__image_with_text_fC9jTy .image-with-text__text p { margin-bottom: 1.6rem !important; } #shopify-section-template--19205521309878__image_with_text_fC9jTy .image-with-text__text ul { display: inline-block; margin-top: 1.4rem !important; text-align: left; } #shopify-section-template--19205521309878__image_with_text_fC9jTy .image-with-text__text li { font-size: var(--az-fs-bullet-m) !important; line-height: var(--az-lh-default) !important; margin-bottom: 0.7rem !important; padding-left: 1.7rem !important; text-align: left; } #shopify-section-template--19205521309878__image_with_text_fC9jTy .button { min-height: 46px !important; padding-left: 3rem !important; padding-right: 3rem !important; font-size: var(--az-fs-bullet) !important; margin-top: 2rem !important; } } /* RTL */ html[dir="rtl"] #shopify-section-template--19205521309878__image_with_text_fC9jTy .image-with-text__text, html[dir="rtl"] #shopify-section-template--19205521309878__image_with_text_fC9jTy .image-with-text__text li { line-height: 1.8; letter-spacing: 0; } html[dir="rtl"] #shopify-section-template--19205521309878__image_with_text_fC9jTy .image-with-text__heading { letter-spacing: 0; } /* --------------------------------------------------------------------- 5.5 TRUST STRIP ("Why shop AZRIA?") --------------------------------------------------------------------- Section ID: #shopify-section-template--19205521309878__multicolumn_feE4CB v4.7 redesign (May 2026): - Contained white card (.page-width acts as the card wrapper) - Hairline dividers between 4 columns (no icons — kept as Dawn multicolumn) - Title left-aligned, prominent (~24px) - Mobile: 2x2 grid inside the card - Content stays editable in Customize → "Why shop AZRIA?" section --------------------------------------------------------------------- */ #shopify-section-template--19205521309878__multicolumn_feE4CB .multicolumn { background: transparent; border: none; border-radius: 0; box-shadow: none; } /* The white card itself — .page-width inside this section is the card */ #shopify-section-template--19205521309878__multicolumn_feE4CB .page-width { max-width: 1200px; background: linear-gradient(to bottom, rgba(250, 247, 243, 0.28), rgba(255, 255, 255, 1)); border-radius: 18px; padding-top: 14px; padding-bottom: 6px; } /* Title — left-aligned, prominent */ #shopify-section-template--19205521309878__multicolumn_feE4CB .title-wrapper-with-link { margin-bottom: 2.4rem; justify-content: flex-start; } #shopify-section-template--19205521309878__multicolumn_feE4CB .title { text-align: left; font-size: 2.4rem; font-weight: 500; letter-spacing: -0.03rem; color: var(--az-text-strong); margin: 0; line-height: 1.25; } /* Items list */ #shopify-section-template--19205521309878__multicolumn_feE4CB .multicolumn-list { max-width: 100%; margin: 0; align-items: stretch; } #shopify-section-template--19205521309878__multicolumn_feE4CB .multicolumn-list__item { position: relative; display: flex; align-items: stretch; } /* Vertical hairline divider between items (not last) */ #shopify-section-template--19205521309878__multicolumn_feE4CB .multicolumn-list__item:not(:last-child)::after { content: ""; position: absolute; top: 0.4rem; right: 0; bottom: 0.4rem; width: 1px; background: var(--az-brown-line); pointer-events: none; } /* Card inside each item — clean, no framing */ #shopify-section-template--19205521309878__multicolumn_feE4CB .multicolumn-card { width: 100%; padding: 0.4rem 2rem; display: flex; flex-direction: column; align-items: center; justify-content: flex-start; text-align: center; gap: 0.4rem; background: transparent; box-shadow: none; } #shopify-section-template--19205521309878__multicolumn_feE4CB .multicolumn-card__info { max-width: 100%; text-align: center; } /* Item title */ #shopify-section-template--19205521309878__multicolumn_feE4CB .multicolumn-card__info h3 { font-size: 1.4rem !important; line-height: 1.3 !important; font-weight: 600; letter-spacing: -0.01rem; color: var(--az-text-strong) !important; margin: 0 0 0.4rem 0; text-align: center; } /* Item caption */ #shopify-section-template--19205521309878__multicolumn_feE4CB .multicolumn-card__info .rte { font-size: 1.25rem !important; line-height: 1.5 !important; color: var(--az-text-soft) !important; text-align: center; } #shopify-section-template--19205521309878__multicolumn_feE4CB .multicolumn-card__info .rte p { margin: 0; } /* Hover (desktop only) — text-only: title turns brown + soft underline draws */ @media (hover: hover) and (min-width: 750px) { #shopify-section-template--19205521309878__multicolumn_feE4CB .multicolumn-card__info h3 { position: relative; transition: color 0.25s ease; } #shopify-section-template--19205521309878__multicolumn_feE4CB .multicolumn-card__info h3::after { content: ""; position: absolute; left: 50%; bottom: -0.4rem; width: 0; height: 1px; background: var(--az-brown); transform: translateX(-50%); transition: width 0.35s ease; } #shopify-section-template--19205521309878__multicolumn_feE4CB .multicolumn-list__item:hover .multicolumn-card__info h3 { color: var(--az-brown) !important; } #shopify-section-template--19205521309878__multicolumn_feE4CB .multicolumn-list__item:hover .multicolumn-card__info h3::after { width: 2.4rem; } } } /* Mobile: card goes near-full-width, 2x2 grid inside */ @media screen and (max-width: 749px) { #shopify-section-template--19205521309878__multicolumn_feE4CB .page-width { margin-left: 1.2rem; margin-right: 1.2rem; padding: 2.4rem 1.6rem; border-radius: 1.4rem; background: linear-gradient(to bottom, rgba(250, 247, 243, 0.28), rgba(255, 255, 255, 1)); } #shopify-section-template--19205521309878__multicolumn_feE4CB .title { font-size: 1.8rem; line-height: 1.25; } #shopify-section-template--19205521309878__multicolumn_feE4CB .title-wrapper-with-link { margin-bottom: 1.8rem; } #shopify-section-template--19205521309878__multicolumn_feE4CB .multicolumn-list { grid-template-columns: 1fr 1fr; gap: 2rem 0; } #shopify-section-template--19205521309878__multicolumn_feE4CB .multicolumn-card { padding: 0 0.8rem; } #shopify-section-template--19205521309878__multicolumn_feE4CB .multicolumn-card__info h3 { font-size: 1.3rem !important; } #shopify-section-template--19205521309878__multicolumn_feE4CB .multicolumn-card__info .rte { font-size: 1.15rem !important; } /* Dividers: only between odd-positioned items in same row */ #shopify-section-template--19205521309878__multicolumn_feE4CB .multicolumn-list__item:not(:last-child)::after { display: none; } #shopify-section-template--19205521309878__multicolumn_feE4CB .multicolumn-list__item:nth-child(odd):not(:last-child)::after { display: block; } } /* RTL */ [dir="rtl"] #shopify-section-template--19205521309878__multicolumn_feE4CB .title-wrapper-with-link { justify-content: flex-end; } [dir="rtl"] #shopify-section-template--19205521309878__multicolumn_feE4CB .title { text-align: right; } [dir="rtl"] #shopify-section-template--19205521309878__multicolumn_feE4CB .multicolumn-list__item:not(:last-child)::after { right: auto; left: 0; } /* --------------------------------------------------------------------- 5.6 COLLECTION PAGE (cards + sticky sidebar) --------------------------------------------------------------------- Scoped to .template-collection so these rules don't affect homepage cards (§5.2 handles Best Sellers separately). Provides: - Generous grid spacing for the product list - 2-line title clamp so prices align across cards regardless of product name length (Eucerin's long title gets ellipsis) - Card hover lift consistent with other card sections - Desktop: sticky filter sidebar so filters stay accessible while scrolling long collections; max-width prevents long Arabic labels from pushing the layout --------------------------------------------------------------------- */ /* Product grid spacing */ .template-collection .product-grid { column-gap: 36px; row-gap: 56px; margin-top: 10px; /* space below toolbar */ } /* Product card typography polish */ .template-collection .card__information { padding-top: 14px; } /* Product title — clamped to 2 lines so prices align across cards. Line-clamp is applied to the inner because that's the element actually containing the text. The

itself only reserves min-height for two lines so 1-line titles don't make cards shorter than 2-line ones. */ .template-collection .card__heading { font-weight: 500; letter-spacing: 0.2px; min-height: 2.8em; margin-bottom: 6px; overflow: hidden; } .template-collection .card__heading a { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; } .template-collection .price { margin-top: 6px; font-weight: 400; } /* Smooth hover lift */ .template-collection .card-wrapper { transition: transform var(--az-trans-base), box-shadow var(--az-trans-base); } @media (hover: hover) { .template-collection .card-wrapper:hover { transform: translateY(-2px); } } /* Desktop: filter sidebar + sticky behavior */ @media (min-width: 990px) { .template-collection .facets-vertical { max-width: 300px; /* better for long labels and Arabic */ padding-right: 22px; border-right: 1px solid var(--az-brown-line); } .template-collection .facets-vertical .facets-wrapper { position: sticky; top: 24px; align-self: start; } } /* ===================================================================== 6. COLLECTION — FILTER & SORT ===================================================================== Dawn 15.4.1 vertical filter layout. ===================================================================== */ /* --- 6.1 Filter column card ------------------------------------- */ #main-collection-filters, aside.facets-wrapper { background: #ffffff; border: 1px solid var(--az-border-soft); border-radius: 10px; padding: 2rem 1.6rem; box-shadow: var(--az-shadow-soft); height: fit-content; } form#FacetFiltersForm.facets__form-vertical { background: transparent; border: none; padding: 0; box-shadow: none; } /* --- 6.2 "Filter:" heading -------------------------------------- */ #verticalTitle, .active-facets-vertical-filter .facets__heading--vertical, .active-facets-vertical-filter h2.facets__heading { font-size: 1.2rem; font-weight: 700; color: var(--az-brown); letter-spacing: 0.1em; text-transform: uppercase; padding-bottom: 1rem; margin: 0 0 0.5rem 0; border-bottom: 0.2rem solid var(--az-brown); display: block; width: 100%; } .active-facets-vertical-filter { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; margin-bottom: 1rem; } /* --- 6.3 Filter groups ------------------------------------------ */ form#FacetFiltersForm .facets__disclosure-vertical { border-bottom: 1px solid var(--az-border-line); padding: 0; } form#FacetFiltersForm .facets__disclosure-vertical:last-of-type { border-bottom: none; } form#FacetFiltersForm .facets__disclosure-vertical > .facets__summary { color: var(--az-text-strong); font-size: var(--az-fs-body-sm); font-weight: 600; padding: 1.2rem 0; margin-bottom: 0; letter-spacing: 0.01em; transition: color var(--az-trans-fast); } @media (hover: hover) { form#FacetFiltersForm .facets__disclosure-vertical > .facets__summary:hover { color: var(--az-brown); } } form#FacetFiltersForm .facets__disclosure-vertical[open] > .facets__summary { color: var(--az-brown); } form#FacetFiltersForm .facets__disclosure-vertical .icon-caret, form#FacetFiltersForm .facets__disclosure-vertical svg.icon-caret { color: var(--az-brown); } .facets__selected { color: var(--az-brown); font-weight: 600; } /* --- 6.4 Checkbox rows ------------------------------------------ Dawn structure (verified):