/* Theme Name: Miss Merylin Template: woodmart Version: 1.0.0 Description: Miss Merylin premium child theme for WoodMart — storefront design mapped onto WoodMart's own CSS variables and classes (brand colours, no template overrides). Author: Miss Merylin Text Domain: missmerylin */ /* ========================================================================== 1 · BRAND TOKENS (Miss Merylin) ========================================================================== */ :root { --mm-black: #1a1a1a; --mm-accent: #c8556a; /* rose red — replaces storefront gold #B8965A */ --mm-blush: #f5ede8; --mm-offwhite: #f7f4f0; --mm-gray: #888888; /* text secondary */ --mm-muted: #aaaaaa; /* text muted */ --mm-border: #ebebeb; --mm-white: #ffffff; --mm-font-heading: "Cormorant Garamond", Georgia, "Times New Roman", serif; --mm-font-body: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; } /* ========================================================================== 2 · STOREFRONT DESIGN TOKENS (ported from apps/web/app/globals.css) gold → pink, #FAFAF8 → blush, radius 8–16px → 0 (sharp editorial) ========================================================================== */ :root { --color-primary: #1a1a1a; --color-accent: #c8556a; --color-bg: #f5ede8; --color-surface: #ffffff; --color-border: #ebebeb; --color-text-primary: #1a1a1a; --color-text-secondary: #888888; --color-text-muted: #aaaaaa; /* Inventory/status colours — kept from storefront (functional, not brand) */ --color-fast: #047857; --color-fast-bg: #ECFDF5; --color-imported: #92400E; --color-imported-bg: #FFF8ED; --color-preorder: #5B21B6; --color-preorder-bg: #F5F3FF; --color-incoming: #1D4ED8; --color-incoming-bg: #EFF6FF; --color-sold-out: #6B7280; --color-sold-out-bg: #F3F4F6; --color-limited-bg: #111111; --spacing-xs: 4px; --spacing-sm: 8px; --spacing-md: 16px; --spacing-lg: 24px; --spacing-xl: 32px; --radius-sm: 0; --radius-md: 0; --radius-lg: 0; --radius-full: 999px; --text-xs: 11px; --text-sm: 13px; --text-md: 15px; --text-base: 16px; --text-lg: 18px; --text-xl: 22px; --ease-editorial: cubic-bezier(0.22, 1, 0.36, 1); --ease-cinematic: cubic-bezier(0.16, 1, 0.30, 1); --ease-soft: cubic-bezier(0.32, 0.72, 0, 1); --ease-drift: cubic-bezier(0.45, 0, 0.55, 1); --dur-quick: 200ms; --dur-base: 550ms; --dur-slow: 1100ms; --dur-glacial: 20000ms; } /* ========================================================================== 3 · WOODMART VARIABLE OVERRIDES (--wd-* / --btn-*) Re-points WoodMart's native design system at Miss Merylin brand values, so header builder, mega menu, footer, Elementor widgets all inherit the brand. ========================================================================== */ :root { /* Accent / colour */ --wd-primary-color: var(--mm-accent); --wd-main-bgcolor: var(--mm-blush); --wd-link-color: var(--mm-black); --wd-link-color-hover: var(--mm-accent); --wd-title-color: var(--mm-black); --wd-text-color: var(--mm-black); --wd-alternative-color: var(--mm-gray); --wd-label-color: var(--mm-accent); --wd-star-color: var(--mm-accent); --wd-empty-star-color: var(--mm-border); /* Entities (product/post titles) + headings */ --wd-entities-title-color: var(--mm-black); --wd-entities-title-color-hover: var(--mm-accent); --wd-entities-title-font: var(--mm-font-body); --wd-title-font: var(--mm-font-heading); --wd-widget-title-font: var(--mm-font-heading); --wd-widget-title-color: var(--mm-black); /* Body + header element typography */ --wd-text-font: var(--mm-font-body); --wd-header-el-font: var(--mm-font-body); --wd-header-el-color: var(--mm-black); --wd-header-el-color-hover: var(--mm-accent); --wd-navigation-color: 26, 26, 26; /* Actions (wishlist/compare/quick icons) */ --wd-action-color: var(--mm-black); --wd-action-color-hover: var(--mm-accent); --wd-action-icon-color: var(--mm-black); --wd-action-icon-color-hover: var(--mm-accent); /* Forms */ --wd-form-brd-color: var(--mm-border); --wd-form-brd-color-focus: var(--mm-black); --wd-form-bg: var(--mm-white); --wd-form-color: var(--mm-black); /* Sharp editorial corners everywhere */ --wd-brd-radius: 0px; --wd-cat-brd-radius: 0px; --wd-form-brd-radius: 0px; --wd-thumb-brd-radius: 0px; --wd-arrow-radius: 0px; --wd-social-radius: 0px; --wd-pagin-radius: 0px; --wd-popup-brd-radius: 0px; /* Product grid spacing → storefront (16px column gap, 40px row gap) */ --wd-prod-gap: 16px; --wd-col-gap: 16px; --wd-row-gap: 40px; --wd-prod-shadow: none; /* Buttons — charcoal default, accent hover, square, Inter, uppercase */ --btn-font-family: var(--mm-font-body); --btn-accented-font-family: var(--mm-font-body); --btn-default-font-family: var(--mm-font-body); --btn-brd-radius: 0px; --btn-default-brd-radius: 0px; --btn-accented-brd-radius: 0px; --btn-accented-bgcolor: var(--mm-black); --btn-accented-bgcolor-hover: var(--mm-accent); --btn-accented-color: var(--mm-white); --btn-accented-color-hover: var(--mm-white); --btn-accented-transform: uppercase; } /* ========================================================================== 4 · BASE + STOREFRONT TYPE UTILITIES + ANIMATIONS (globals.css port) ========================================================================== */ body { background-color: var(--mm-blush); color: var(--mm-black); font-family: var(--mm-font-body); font-size: 14px; line-height: 1.5; letter-spacing: -0.003em; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } h1, h2, h3, h4, h5, h6 { font-family: var(--mm-font-heading); color: var(--mm-black); } .font-editorial { font-family: var(--mm-font-heading); font-feature-settings: "liga" 1, "kern" 1; } .label-xs { font-size: 9px; letter-spacing: 0.22em; text-transform: uppercase; font-weight: 500; } .label-sm { font-size: 10px; letter-spacing: 0.18em; text-transform: uppercase; } .no-scrollbar::-webkit-scrollbar { display: none; } .no-scrollbar { -ms-overflow-style: none; scrollbar-width: none; } .snap-card { scroll-snap-align: start; flex-shrink: 0; } @keyframes fadeUp { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: translateY(0); } } .animate-fade-up { animation: fadeUp var(--dur-base) var(--ease-editorial) both; } .animate-fade-up-delay-1 { animation-delay: 0.08s; } .animate-fade-up-delay-2 { animation-delay: 0.18s; } .animate-fade-up-delay-3 { animation-delay: 0.3s; } @keyframes imageReveal { from { opacity: 0; transform: scale(1.06); } to { opacity: 1; transform: scale(1); } } .animate-image-reveal { animation: imageReveal var(--dur-slow) var(--ease-cinematic) both; will-change: transform, opacity; } @keyframes zoomDrift { 0%,100% { transform: scale(1); } 50% { transform: scale(1.04); } } .animate-zoom-drift { animation: zoomDrift var(--dur-glacial) var(--ease-drift) infinite both; will-change: transform; } .fade-in-section { opacity: 0; transform: translateY(18px); transition: opacity 0.65s ease-out, transform 0.65s ease-out; } .fade-in-section.is-visible { opacity: 1; transform: translateY(0); } .soft-reveal { opacity: 0; transition: opacity var(--dur-slow) var(--ease-cinematic), transform var(--dur-slow) var(--ease-cinematic); will-change: opacity, transform; } .soft-reveal--rise { transform: translateY(18px); } .soft-reveal--image { transform: scale(1.06); } .soft-reveal.is-visible { opacity: 1; transform: none; } @keyframes shimmer { 0% { background-position: -200% center; } 100% { background-position: 200% center; } } .shimmer { background: linear-gradient(105deg, #F5EFE8 0%, #EDE5D9 40%, #F5EFE8 55%, #EDE5D9 100%); background-size: 200% 100%; animation: shimmer 2.4s ease-in-out infinite; } @media (prefers-reduced-motion: reduce) { .animate-zoom-drift, .animate-image-reveal { animation: none; transform: none; opacity: 1; } .fade-in-section, .soft-reveal { opacity: 1; transform: none; transition: none; } } /* ========================================================================== 5 · PRODUCT CARD → WoodMart .product-grid-item (storefront ProductCard) 3:4 portrait · 700ms zoom · cinematic bottom gradient · overline → name(12/300) → price(11/300) · inline accent discount · info lift on hover · sharp corners ========================================================================== */ .wd-product.product-grid-item, .wd-product.product-grid-item .product-element-top, .wd-product.product-grid-item .wd-product-img { box-shadow: none !important; } .wd-product.product-grid-item { border: none; background: transparent; } .wd-product.product-grid-item .wd-product-img { position: relative; margin-bottom: 12px; border-radius: 0; overflow: hidden; box-shadow: inset 0 0 0 0.5px rgba(0, 0, 0, 0.06); } .wd-product.product-grid-item .wd-product-img img { width: 100%; aspect-ratio: 3 / 4; object-fit: cover; transition: transform 700ms ease-out; } .wd-product.product-grid-item:hover .wd-product-img img { transform: scale(1.05); } /* cinematic bottom gradient (52% height) */ .wd-product.product-grid-item .wd-product-img::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 52%; pointer-events: none; z-index: 1; background: linear-gradient(to top, rgba(0,0,0,0.11) 0%, rgba(0,0,0,0.04) 40%, transparent 100%); } /* info block lifts 2px toward image on desktop hover */ .wd-product.product-grid-item .product-element-bottom { transition: transform 500ms var(--ease-editorial); } @media (min-width: 769px) { .wd-product.product-grid-item:hover .product-element-bottom { transform: translateY(-2px); } } /* category overline (WoodMart brand element) — 8px, .2em, muted */ .wd-product.product-grid-item .wd-product-brands, .wd-product.product-grid-item .wd-product-brands a { font-family: var(--mm-font-body); font-size: 8px; font-weight: 500; letter-spacing: 0.2em; text-transform: uppercase; line-height: 1; color: #CACACA; } .wd-product.product-grid-item .wd-product-brands { margin-bottom: 5px; } /* product name — 12px / 300, 2-line clamp */ .wd-product.product-grid-item .wd-entities-title, .wd-product.product-grid-item .wd-entities-title a { font-family: var(--mm-font-body); font-size: 12px; font-weight: 300; line-height: 1.4; color: #1A1A1A; letter-spacing: 0; } .wd-product.product-grid-item .wd-entities-title { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; margin-bottom: 6px; } /* price row — 11px / 300; struck original muted; ins normal */ .wd-product.product-grid-item .price { font-family: var(--mm-font-body); font-size: 11px; font-weight: 300; color: #111111; letter-spacing: -0.01em; } .wd-product.product-grid-item .price del, .wd-product.product-grid-item .price del .amount { font-size: 10px; font-weight: 300; color: #C8C8C8; } .wd-product.product-grid-item .price ins, .wd-product.product-grid-item .price ins .amount { text-decoration: none; } /* discount % (Phase-1 woocommerce_sale_flash filter → "-30%") as the storefront's bottom-left editorial badge, in brand accent */ .wd-product.product-grid-item .onsale { top: auto; bottom: 10px; left: 10px; right: auto; padding: 3px 6px; border-radius: 0; border: none; box-shadow: none; min-width: 0; min-height: 0; background: rgba(26, 26, 26, 0.62); color: var(--mm-white); font-family: var(--mm-font-body); font-size: 8px; font-weight: 500; letter-spacing: 0.14em; } /* wishlist heart — reveal on hover, top-right */ .wd-product.product-grid-item .wd-wishlist-btn { position: absolute; top: 10px; right: 10px; z-index: 5; opacity: 0; transition: opacity 0.3s ease; } .wd-product.product-grid-item:hover .wd-wishlist-btn, .wd-product.product-grid-item .wd-wishlist-btn.added { opacity: 1; } /* hover swap image — opacity crossfade, no scale conflict */ .wd-product .wd-product-img-hover { transition: opacity 0.35s ease !important; } /* ========================================================================== 6 · PRODUCT GRID / COLLECTION LOOP (storefront: 2 / 3 / 4 cols, gap 16/40) Scoped to shop + category archives so homepage rails (flex) are untouched. ========================================================================== */ .post-type-archive-product ul.products, .tax-product_cat ul.products, .woocommerce-shop ul.products { display: grid !important; grid-template-columns: repeat(2, 1fr); column-gap: 16px; row-gap: 40px; margin: 0 !important; } .post-type-archive-product ul.products > li.product, .tax-product_cat ul.products > li.product, .woocommerce-shop ul.products > li.product { width: auto !important; margin: 0 !important; float: none !important; } @media (min-width: 640px) { .post-type-archive-product ul.products, .tax-product_cat ul.products, .woocommerce-shop ul.products { grid-template-columns: repeat(3, 1fr); } } @media (min-width: 1024px) { .post-type-archive-product ul.products, .tax-product_cat ul.products, .woocommerce-shop ul.products { grid-template-columns: repeat(4, 1fr); } } /* ========================================================================== 7 · BUTTONS (WoodMart .btn / WooCommerce buttons) — square, Inter, uppercase ========================================================================== */ .btn, .button, .single_add_to_cart_button, .wd-buy-now-btn, button.alt { font-family: var(--mm-font-body) !important; letter-spacing: 2px; text-transform: uppercase; border-radius: 0 !important; } .single_add_to_cart_button, .button.alt { background-color: var(--mm-black) !important; color: var(--mm-white) !important; } .single_add_to_cart_button:hover, .button.alt:hover { background-color: var(--mm-accent) !important; } /* ========================================================================== 8 · SECTION TITLES / HEADINGS — Cormorant editorial ========================================================================== */ .wd-section-title .liner-title, .title.title-style-default, .single-product .product_title.entry-title { font-family: var(--mm-font-heading); color: var(--mm-black); font-weight: 500; } .whb-header .wd-nav-main > li > a { font-family: var(--mm-font-body); font-size: 12px; font-weight: 500; letter-spacing: 0.08em; text-transform: uppercase; color: var(--mm-black); } .whb-header .wd-nav-main > li > a:hover, .whb-header .wd-nav-main > li.current-menu-item > a, .whb-header .wd-nav-main > li.current-menu-ancestor > a { color: var(--mm-accent); } .whb-header { border-bottom: 0.5px solid var(--mm-border); } /* WoodMart native mobile toolbar — brand active state */ .wd-nav-mobile > li.current-menu-item > a, .wd-nav-mobile > li > a:hover, .wd-sticky-toolbar .wd-tools-element.wd-active > a, .wd-sticky-toolbar .wd-tools-element > a:hover { color: var(--mm-black); } .wd-sticky-toolbar { border-top: 0.5px solid var(--mm-border); } /* ========================================================================== 9 · SINGLE PRODUCT (PDP) — hook-injected blocks + WoodMart layout polish Design injected via woocommerce_single_product_summary hooks (functions.php); these rules style WoodMart's existing PDP elements + the injected blocks. ========================================================================== */ /* Title → Cormorant Garamond editorial */ .single-product div.product .product_title { font-family: var(--mm-font-heading); font-weight: 300; line-height: 1.15; font-size: clamp(1.6rem, 4vw, 2rem); letter-spacing: -0.02em; color: var(--mm-black); } /* Category overline (priority-4 hook) */ .mm-pdp__overline { font-family: var(--mm-font-body); font-size: 9px; letter-spacing: 0.22em; text-transform: uppercase; font-weight: 500; color: var(--mm-muted); margin: 0 0 8px; } /* Price → 22px, charcoal (remove WoodMart pink) */ .single-product div.product .summary .price, .single-product div.product .summary .price ins, .single-product div.product .summary .price ins .amount { font-family: var(--mm-font-body); font-size: 22px; font-weight: 500; color: var(--mm-black) !important; text-decoration: none; } .single-product div.product .summary .price del, .single-product div.product .summary .price del .amount { font-size: 14px; font-weight: 400; color: #cccccc !important; } /* Add to Cart → full width, square, uppercase */ .single-product div.product form.cart .single_add_to_cart_button { width: 100%; padding: 16px; border-radius: 0; text-transform: uppercase; letter-spacing: 0.1em; font-weight: 500; } .single-product div.product form.cart .quantity { margin-bottom: 12px; } /* Variation dropdowns → square, brand border */ .single-product .variations td.value select, .single-product .variations select { border: 1px solid var(--mm-border); border-radius: 0; min-height: 42px; background-color: var(--mm-white); font-family: var(--mm-font-body); color: var(--mm-black); } /* Trust strip (priority-35 hook) */ .mm-pdp__trust { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 20px; } .mm-pdp__trust-item { display: flex; align-items: center; gap: 8px; padding: 10px 12px; background: var(--mm-white); border: 1px solid #f0f0f0; } .mm-pdp__trust-item .ic { color: var(--mm-muted); flex-shrink: 0; line-height: 0; } .mm-pdp__trust-item b { display: block; font-family: var(--mm-font-body); font-size: 11px; font-weight: 500; color: var(--mm-black); } .mm-pdp__trust-item small { font-family: var(--mm-font-body); font-size: 9px; color: #bbbbbb; } /* Delivery block (priority-36 hook) */ .mm-pdp__deliv { margin-top: 20px; border: 1px solid var(--mm-border); } .mm-pdp__deliv-h { font-family: var(--mm-font-body); font-size: 9px; letter-spacing: 0.22em; text-transform: uppercase; font-weight: 500; color: var(--mm-muted); padding: 14px 16px 0; margin: 0; } .mm-pdp__deliv-row { display: flex; justify-content: space-between; gap: 12px; padding: 10px 16px; font-family: var(--mm-font-body); font-size: 12px; } .mm-pdp__deliv-row span:first-child { color: #555555; } .mm-pdp__deliv-row span:last-child { color: var(--mm-black); text-align: right; } /* WhatsApp concierge (priority-37 hook) */ .mm-pdp__concierge { display: flex; align-items: center; gap: 12px; margin-top: 16px; padding: 14px 16px; border: 1px solid var(--mm-border); text-decoration: none; transition: border-color 0.2s ease; } .mm-pdp__concierge:hover { border-color: var(--mm-black); } .mm-pdp__concierge-ic { flex-shrink: 0; width: 32px; height: 32px; border-radius: 999px; display: flex; align-items: center; justify-content: center; background: #f0fff4; line-height: 0; } .mm-pdp__concierge-tx { flex: 1; min-width: 0; } .mm-pdp__concierge-tx b { display: block; font-family: var(--mm-font-body); font-size: 12px; font-weight: 500; color: var(--mm-black); } .mm-pdp__concierge-tx small { font-family: var(--mm-font-body); font-size: 10px; color: #999999; } /* ========================================================================== 10 · COMPONENT SECTIONS (Phase 1 + enhancements) — brand, sharp ========================================================================== */ /* 10a · Announcement ticker */ .mm-announcement { background: var(--mm-black); overflow: hidden; } .mm-announcement__track { display: inline-flex; white-space: nowrap; animation: mm-ticker 30s linear infinite; } .mm-announcement:hover .mm-announcement__track { animation-play-state: paused; } .mm-announcement__item { color: #fff; font-family: var(--mm-font-body); font-size: 11px; font-weight: 500; letter-spacing: 2px; text-transform: uppercase; padding: 9px 28px; } @keyframes mm-ticker { from { transform: translateX(0); } to { transform: translateX(-50%); } } @media (prefers-reduced-motion: reduce) { .mm-announcement__track { animation: none; } } /* 10b · Hero split */ .mm-hero { display: grid; grid-template-columns: 1fr 1fr; min-height: 520px; } .mm-hero__text { display: flex; flex-direction: column; justify-content: center; padding: 60px clamp(24px,5vw,80px); background: var(--mm-blush); } .mm-hero__eyebrow { font-family: var(--mm-font-body); font-size: 11px; letter-spacing: 3px; text-transform: uppercase; color: var(--mm-gray); margin: 0 0 16px; } .mm-hero__headline { font-family: var(--mm-font-heading); font-weight: 500; font-size: clamp(34px,4vw,56px); line-height: 1.08; color: var(--mm-black); margin: 0 0 28px; } .mm-hero__cta { align-self: flex-start; background: var(--mm-black); color: #fff; font-family: var(--mm-font-body); font-size: 12px; font-weight: 600; letter-spacing: 2px; text-transform: uppercase; padding: 15px 34px; } .mm-hero__cta:hover { background: var(--mm-accent); color: #fff; } .mm-hero__media { background: var(--mm-offwhite) center/cover no-repeat; min-height: 320px; } @media (max-width: 768px) { .mm-hero { grid-template-columns: 1fr; } .mm-hero__media { order: -1; min-height: 360px; } } /* 10c · Trust strip */ .mm-trust { background: var(--mm-black); } .mm-trust__inner { display: grid; grid-template-columns: repeat(4,1fr); max-width: 1200px; margin: 0 auto; } .mm-trust__col { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 4px; padding: 24px 16px; border-left: 1px solid rgba(255,255,255,0.08); } .mm-trust__col:first-child { border-left: none; } .mm-trust__title { font-family: var(--mm-font-body); font-size: 12px; font-weight: 600; letter-spacing: 1.5px; text-transform: uppercase; color: #fff; } .mm-trust__sub { font-family: var(--mm-font-body); font-size: 11px; color: rgba(255,255,255,0.6); } @media (max-width: 768px) { .mm-trust__inner { grid-template-columns: repeat(2,1fr); } .mm-trust__col:nth-child(odd) { border-left: none; } .mm-trust__col:nth-child(3), .mm-trust__col:nth-child(4) { border-top: 1px solid rgba(255,255,255,0.08); } } /* 10d · Category tiles */ .mm-cats { padding: 56px clamp(16px,4vw,40px); } .mm-cats__grid { display: grid; grid-template-columns: repeat(6,1fr); gap: 14px; max-width: 1280px; margin: 0 auto; } .mm-cat { position: relative; display: flex; align-items: flex-end; justify-content: center; aspect-ratio: 1/1; background: var(--mm-offwhite); overflow: hidden; } .mm-cat--image { background-size: cover; background-position: center; } .mm-cat__label { position: relative; z-index: 2; font-family: var(--mm-font-body); font-size: 12px; font-weight: 600; letter-spacing: 2px; text-transform: uppercase; color: var(--mm-black); padding: 0 0 18px; transition: color 0.25s ease; } .mm-cat--image .mm-cat__label { color: #fff; width: 100%; text-align: center; padding: 26px 0 14px; background: linear-gradient(to top, rgba(0,0,0,0.45), transparent); } .mm-cat:hover .mm-cat__label { color: var(--mm-accent); } .mm-cat::after { content: ""; position: absolute; inset: 0; border: 0.5px solid transparent; transition: border-color 0.25s ease; z-index: 1; } .mm-cat:hover::after { border-color: var(--mm-border); } @media (max-width: 1024px) { .mm-cats__grid { grid-template-columns: repeat(3,1fr); } } @media (max-width: 600px) { .mm-cats__grid { grid-template-columns: repeat(2,1fr); } } /* 10e · Product rails (mobile scroll / desktop grid) */ .mm-rail { padding: 40px clamp(16px,4vw,40px); max-width: 1320px; margin: 0 auto; } .mm-rail__head { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; margin-bottom: 18px; } .mm-rail__title { font-family: var(--mm-font-heading); font-weight: 500; font-size: clamp(22px,2.4vw,30px); line-height: 1.1; color: var(--mm-black); margin: 0; } .mm-rail__more { flex-shrink: 0; font-family: var(--mm-font-body); font-size: 11px; font-weight: 500; letter-spacing: 1.5px; text-transform: uppercase; color: var(--mm-black); text-decoration: underline; text-underline-offset: 3px; } .mm-rail__more:hover { color: var(--mm-accent); } .mm-rail__body .products { margin: 0 !important; } @media (max-width: 768px) { .mm-rail__body .products { display: flex !important; flex-wrap: nowrap; gap: 14px; overflow-x: auto; -webkit-overflow-scrolling: touch; scroll-snap-type: x mandatory; -ms-overflow-style: none; scrollbar-width: none; padding-bottom: 4px; } .mm-rail__body .products::-webkit-scrollbar { display: none; } .mm-rail__body .products > li.product { flex: 0 0 60%; max-width: 60%; margin: 0 !important; scroll-snap-align: start; } } /* 10f · Social proof */ .mm-social { padding: 56px clamp(16px,4vw,40px); max-width: 1280px; margin: 0 auto; text-align: center; } .mm-social__title { font-family: var(--mm-font-heading); font-weight: 500; font-size: clamp(24px,2.6vw,34px); color: var(--mm-black); margin: 0 0 32px; } .mm-social__grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 20px; } .mm-review { display: flex; flex-direction: column; gap: 14px; margin: 0; padding: 32px 26px; background: #fff; border: 1px solid var(--mm-border); border-radius: 0; text-align: left; } .mm-review__stars { display: inline-flex; gap: 2px; font-size: 14px; line-height: 1; } .mm-star { color: var(--mm-border); } .mm-star.is-on { color: var(--mm-accent); } .mm-review__text { font-family: var(--mm-font-heading); font-size: 19px; font-style: italic; line-height: 1.5; color: var(--mm-black); margin: 0; } .mm-review__name { font-family: var(--mm-font-body); font-size: 12px; font-weight: 600; letter-spacing: 1px; text-transform: uppercase; color: var(--mm-black); } .mm-review__product { display: block; margin-top: 3px; font-size: 11px; font-weight: 400; letter-spacing: 0.5px; text-transform: none; color: var(--mm-gray); } @media (max-width: 768px) { .mm-social__grid { grid-template-columns: 1fr; gap: 14px; } } /* 10g · Mobile sticky add-to-bag */ .mm-sticky-atc { position: fixed; left: 0; right: 0; bottom: 0; z-index: 9999; display: flex; align-items: center; gap: 12px; height: 64px; padding: 0 12px; background: #fff; border-top: 0.5px solid var(--mm-border); transform: translateY(100%); transition: transform 0.3s ease; box-shadow: 0 -2px 12px rgba(26,26,26,0.06); } .mm-sticky-atc.is-visible { transform: translateY(0); } .mm-sticky-atc__info { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; justify-content: center; } .mm-sticky-atc__title { font-family: var(--mm-font-body); font-size: 13px; color: var(--mm-black); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .mm-sticky-atc__price { font-family: var(--mm-font-body); font-size: 13px; font-weight: 500; color: var(--mm-black); } .mm-sticky-atc__price del { color: var(--mm-gray); font-weight: 400; margin-right: 4px; } .mm-sticky-atc__btn { flex: 0 0 auto; min-width: 45%; height: 44px; padding: 0 22px; background: var(--mm-black); color: #fff; border: none; border-radius: 0; font-family: var(--mm-font-body); font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: 2px; cursor: pointer; } .mm-sticky-atc__btn:hover { background: var(--mm-accent); } @media (min-width: 769px) { .mm-sticky-atc { display: none !important; } } /* 10h · Complete the Look cross-sell */ .mm-shop-look { margin: 48px 0; } .mm-shop-look__title { font-family: var(--mm-font-body); font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 3px; color: var(--mm-black); margin: 0 0 20px; } .mm-shop-look__grid { display: grid; grid-template-columns: repeat(4,1fr); gap: 20px; } .mm-shop-look__item { display: flex; flex-direction: column; } .mm-shop-look__img { display: block; aspect-ratio: 3/4; overflow: hidden; margin-bottom: 10px; background: var(--mm-offwhite); } .mm-shop-look__img img { width: 100%; height: 100%; object-fit: cover; display: block; transition: opacity 0.35s ease; } .mm-shop-look__img:hover img { opacity: 0.88; } .mm-shop-look__name { font-family: var(--mm-font-body); font-size: 12px; line-height: 1.4; color: var(--mm-black); margin-bottom: 4px; } .mm-shop-look__price { font-family: var(--mm-font-body); font-size: 13px; font-weight: 500; color: var(--mm-black); margin-bottom: 8px; } .mm-shop-look__price del { color: var(--mm-gray); font-weight: 400; margin-right: 4px; } .mm-shop-look__add.button, .mm-shop-look__add { align-self: flex-start; min-height: 0 !important; padding: 0 !important; background: none !important; border: none !important; box-shadow: none !important; font-family: var(--mm-font-body); font-size: 12px; font-weight: 500; line-height: 1.4; text-transform: uppercase; letter-spacing: 1px; color: var(--mm-black); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; } .mm-shop-look__add:hover { color: var(--mm-accent); background: none !important; } @media (max-width: 768px) { .mm-shop-look__grid { display: flex; gap: 14px; overflow-x: auto; -webkit-overflow-scrolling: touch; scroll-snap-type: x mandatory; -ms-overflow-style: none; scrollbar-width: none; } .mm-shop-look__grid::-webkit-scrollbar { display: none; } .mm-shop-look__item { flex: 0 0 42%; scroll-snap-align: start; } } /* ========================================================================== 11 · MY ACCOUNT — dashboard, navigation, orders, view-order, settings, search (markup in woocommerce/myaccount/* + search.php). Brand tokens, sharp corners. ========================================================================== */ /* ── Shared bits ─────────────────────────────────────────────────────────── */ .mm-tier-badge { display: inline-block; font-family: var(--mm-font-body); font-size: 9px; letter-spacing: .18em; text-transform: uppercase; font-weight: 500; padding: 4px 10px; border: .5px solid; } .mm-status { display: inline-block; font-family: var(--mm-font-body); font-size: 9px; letter-spacing: .12em; text-transform: uppercase; font-weight: 500; padding: 4px 8px; border: 1px solid; white-space: nowrap; } .mm-muted { font-family: var(--mm-font-body); font-size: 12px; color: var(--mm-muted); } .mm-btn-dark { display: inline-block; padding: 13px 28px; background: var(--mm-black); color: #fff; border: none; border-radius: 0; font-family: var(--mm-font-body); font-size: 11px; letter-spacing: .12em; text-transform: uppercase; font-weight: 500; cursor: pointer; text-decoration: none; transition: background-color .2s ease; } .mm-btn-dark:hover { background: var(--mm-accent); color: #fff; } .mm-btn-dark--full { display: block; width: 100%; text-align: center; } .mm-btn-outline { display: inline-block; padding: 11px 22px; border: .5px solid #ccc; background: none; color: var(--mm-black); border-radius: 0; font-family: var(--mm-font-body); font-size: 11px; letter-spacing: .12em; text-transform: uppercase; font-weight: 500; cursor: pointer; text-decoration: none; transition: all .2s ease; } .mm-btn-outline:hover { border-color: var(--mm-black); background: var(--mm-black); color: #fff; } .mm-btn-outline--danger { color: #EF4444; border-color: #EF4444; } .mm-btn-outline--danger:hover { background: #EF4444; border-color: #EF4444; color: #fff; } .mm-link-btn { font-family: var(--mm-font-body); font-size: 10px; letter-spacing: .08em; text-transform: uppercase; color: var(--mm-black); text-decoration: underline; text-underline-offset: 3px; } .mm-link-btn:hover { color: var(--mm-accent); } .mm-link-btn--danger { color: #EF4444; } .mm-empty-state { display: flex; flex-direction: column; align-items: center; text-align: center; padding: 72px 16px; gap: 16px; } .mm-empty-state__title { font-family: var(--mm-font-heading); font-weight: 300; font-size: 22px; color: var(--mm-black); margin: 0; } .mm-pagination { display: flex; align-items: center; justify-content: center; gap: 18px; margin-top: 40px; } .mm-pagination__link { font-family: var(--mm-font-body); font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--mm-black); text-decoration: none; } .mm-pagination__link:hover { color: var(--mm-accent); } .mm-pagination__count { font-family: var(--mm-font-body); font-size: 11px; color: var(--mm-muted); } .mm-pagination ul { list-style: none; display: flex; gap: 8px; margin: 0; padding: 0; } .mm-pagination ul a, .mm-pagination ul span { font-family: var(--mm-font-body); font-size: 12px; padding: 6px 10px; color: var(--mm-black); text-decoration: none; border: 1px solid var(--mm-border); } .mm-pagination ul .current { background: var(--mm-black); color: #fff; border-color: var(--mm-black); } /* ── Navigation sidebar (navigation.php) ─────────────────────────────────── */ .mm-account-id__avatar { width: 40px; height: 40px; border-radius: 999px; display: flex; align-items: center; justify-content: center; background: var(--mm-blush); margin-bottom: 12px; font-family: var(--mm-font-heading); font-size: 18px; font-weight: 300; color: var(--mm-black); } .mm-account-id__name { font-family: var(--mm-font-body); font-size: 13px; font-weight: 300; color: var(--mm-black); margin: 0 0 2px; } .mm-account-id__email { font-family: var(--mm-font-body); font-size: 10px; color: var(--mm-muted); margin: 0 0 10px; word-break: break-all; } .mm-account-id { padding-bottom: 28px; margin-bottom: 22px; border-bottom: .5px solid var(--mm-border); } .mm-nav__items { display: flex; flex-direction: column; gap: 2px; } .mm-nav__link { display: flex; align-items: center; gap: 12px; padding: 11px 12px; font-family: var(--mm-font-body); font-size: 12px; font-weight: 300; color: #888; text-decoration: none; transition: color .15s ease, background-color .15s ease; } .mm-nav__link .mm-nav__ic { color: #aaa; display: inline-flex; } .mm-nav__link:hover { color: var(--mm-black); } .mm-nav__link:hover .mm-nav__ic { color: var(--mm-black); } .mm-nav__link.is-active { background: var(--mm-black); color: #fff; font-weight: 400; } .mm-nav__link.is-active .mm-nav__ic { color: #fff; } .mm-nav__link--logout { margin-top: 8px; border-top: .5px solid var(--mm-border); } @media (max-width: 767px) { .mm-account-id { display: none; } .mm-nav__items { flex-direction: row; overflow-x: auto; gap: 6px; scrollbar-width: none; -ms-overflow-style: none; padding-bottom: 2px; } .mm-nav__items::-webkit-scrollbar { display: none; } .mm-nav__link { flex-shrink: 0; white-space: nowrap; border: .5px solid #e8e8e8; padding: 8px 14px; font-size: 10px; letter-spacing: .1em; text-transform: uppercase; color: var(--mm-muted); } .mm-nav__link .mm-nav__ic { display: none; } .mm-nav__link--logout { border-top: .5px solid #e8e8e8; margin-top: 0; } } /* ── Dashboard ───────────────────────────────────────────────────────────── */ .mm-dash__head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 32px; } .mm-dash__id { display: flex; align-items: center; gap: 14px; } .mm-dash__avatar { width: 52px; height: 52px; border-radius: 999px; display: flex; align-items: center; justify-content: center; background: var(--mm-blush); font-family: var(--mm-font-heading); font-size: 22px; font-weight: 300; color: var(--mm-black); flex-shrink: 0; } .mm-dash__name { font-family: var(--mm-font-heading); font-weight: 400; font-size: 24px; letter-spacing: -.01em; color: var(--mm-black); margin: 0; } .mm-dash__email { font-family: var(--mm-font-body); font-size: 12px; color: var(--mm-gray); margin: 2px 0 0; } .mm-dash__stats { display: grid; grid-template-columns: repeat(3,1fr); gap: 12px; margin-bottom: 40px; } .mm-stat { padding: 16px; border: 1px solid #f0f0f0; } .mm-stat__label { display: block; font-family: var(--mm-font-body); font-size: 9px; letter-spacing: .18em; text-transform: uppercase; color: #bbb; margin-bottom: 8px; } .mm-stat__value { font-family: var(--mm-font-heading); font-weight: 300; font-size: 24px; letter-spacing: -.01em; color: var(--mm-black); } .mm-stat__value--sm { font-size: 18px; } .mm-dash__seclabel { font-family: var(--mm-font-body); font-size: 9px; letter-spacing: .22em; text-transform: uppercase; color: var(--mm-muted); margin: 0 0 18px; } .mm-dash + .mm-dash__seclabel, .mm-dash__seclabel { margin-top: 40px; } .mm-dash__stats + .mm-dash__seclabel { margin-top: 0; } /* Style identity cards */ .mm-style-cards { display: grid; grid-template-columns: 1fr; gap: 12px; margin-bottom: 18px; } @media (min-width: 640px) { .mm-style-cards { grid-template-columns: repeat(2,1fr); } } @media (min-width: 1024px) { .mm-style-cards { grid-template-columns: repeat(3,1fr); } } .mm-style-card { position: relative; display: block; text-align: left; padding: 16px; border: none; border-radius: 0; cursor: pointer; outline: 1px solid transparent; outline-offset: 1px; transition: outline-color .15s ease; } .mm-style-card.is-selected { outline: 2px solid var(--mm-black); } .mm-style-card__check { position: absolute; top: 12px; right: 12px; width: 16px; height: 16px; border-radius: 999px; display: flex; align-items: center; justify-content: center; background: rgba(0,0,0,.07); border: 1px solid rgba(0,0,0,.12); } .mm-style-card.is-selected .mm-style-card__check { background: var(--mm-black); border: none; } .mm-style-card__check svg { opacity: 0; } .mm-style-card.is-selected .mm-style-card__check svg { opacity: 1; } .mm-style-card__label { display: block; font-family: var(--mm-font-heading); font-weight: 300; font-size: 18px; letter-spacing: -.01em; color: var(--mm-black); margin-bottom: 2px; } .mm-style-card__tag { display: block; font-family: var(--mm-font-body); font-size: 10px; color: #888; } .mm-style-actions { display: flex; align-items: center; gap: 14px; } .mm-style-status { font-family: var(--mm-font-body); font-size: 11px; color: #2D6A2D; } /* Recent orders + quick links */ .mm-orders-list { display: flex; flex-direction: column; } .mm-order-row { display: flex; align-items: center; gap: 12px; padding: 14px 0; border-bottom: 1px solid #f2f2f2; text-decoration: none; } .mm-order-row:last-child { border-bottom: 0; } .mm-order-row__main { flex: 1; min-width: 0; } .mm-order-row__id { font-family: var(--mm-font-body); font-size: 13px; color: var(--mm-black); margin: 0; } .mm-order-row__meta { font-family: var(--mm-font-body); font-size: 11px; color: var(--mm-muted); margin: 2px 0 0; } .mm-order-row__total { font-family: var(--mm-font-body); font-size: 13px; font-weight: 500; color: var(--mm-black); white-space: nowrap; } .mm-quicklinks { display: flex; flex-wrap: wrap; gap: 10px; } .mm-quicklinks a { font-family: var(--mm-font-body); font-size: 11px; letter-spacing: .12em; text-transform: uppercase; padding: 10px 18px; border: .5px solid #ccc; color: #444; text-decoration: none; transition: all .2s ease; } .mm-quicklinks a:hover { background: var(--mm-black); color: #fff; border-color: var(--mm-black); } /* ── Orders list (orders.php) ────────────────────────────────────────────── */ .mm-orders__title { font-family: var(--mm-font-heading); font-weight: 300; font-size: 28px; letter-spacing: -.01em; color: var(--mm-black); margin: 0 0 20px; } .mm-orders__filter { display: flex; gap: 8px; overflow-x: auto; margin-bottom: 24px; scrollbar-width: none; -ms-overflow-style: none; } .mm-orders__filter::-webkit-scrollbar { display: none; } .mm-ofilter { flex-shrink: 0; font-family: var(--mm-font-body); font-size: 10px; letter-spacing: .1em; text-transform: uppercase; padding: 8px 14px; border: .5px solid #e8e8e8; color: var(--mm-muted); text-decoration: none; } .mm-ofilter.is-active { background: var(--mm-black); color: #fff; border-color: var(--mm-black); } .mm-orders__list { display: flex; flex-direction: column; gap: 12px; } .mm-order-card { display: flex; gap: 14px; padding: 16px; border: 1px solid var(--mm-border); } .mm-order-card__thumb { flex-shrink: 0; width: 64px; height: 85px; overflow: hidden; background: var(--mm-offwhite); display: block; } .mm-order-card__thumb img { width: 100%; height: 100%; object-fit: cover; margin: 0; } .mm-order-card__body { flex: 1; min-width: 0; } .mm-order-card__top { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 4px; } .mm-order-card__id { font-family: var(--mm-font-body); font-size: 13px; font-weight: 500; color: var(--mm-black); margin: 0; } .mm-order-card__meta { font-family: var(--mm-font-body); font-size: 11px; color: var(--mm-muted); margin: 0 0 6px; } .mm-order-card__name { font-family: var(--mm-font-body); font-size: 12px; font-weight: 300; color: #555; margin: 0 0 6px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .mm-order-card__total { font-family: var(--mm-font-body); font-size: 14px; font-weight: 500; color: var(--mm-black); margin: 0 0 12px; } .mm-order-card__actions { display: flex; flex-wrap: wrap; gap: 16px; } /* ── View order (view-order.php) ─────────────────────────────────────────── */ .mm-vieworder__back { font-family: var(--mm-font-body); font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--mm-muted); text-decoration: none; } .mm-vieworder__back:hover { color: var(--mm-black); } .mm-vieworder__head { display: flex; align-items: center; gap: 12px; margin: 18px 0 4px; } .mm-vieworder__title { font-family: var(--mm-font-heading); font-weight: 300; font-size: 28px; letter-spacing: -.01em; color: var(--mm-black); margin: 0; } .mm-vieworder__date { font-family: var(--mm-font-body); font-size: 12px; color: var(--mm-muted); margin: 0 0 28px; } .mm-vieworder__cancelled { font-family: var(--mm-font-body); font-size: 13px; color: #EF4444; padding: 14px 16px; border: 1px solid #f3d2d2; background: #fdf2f2; margin-bottom: 28px; } .mm-vieworder__seclabel { font-family: var(--mm-font-body); font-size: 9px; letter-spacing: .22em; text-transform: uppercase; color: var(--mm-muted); margin: 28px 0 14px; } .mm-vieworder__items { border: 1px solid var(--mm-border); } .mm-vieworder__item { display: flex; gap: 14px; padding: 14px 16px; border-bottom: 1px solid #f2f2f2; } .mm-vieworder__item:last-child { border-bottom: 0; } .mm-vieworder__item-img { flex-shrink: 0; width: 80px; height: 107px; overflow: hidden; background: var(--mm-offwhite); } .mm-vieworder__item-img img { width: 100%; height: 100%; object-fit: cover; margin: 0; } .mm-vieworder__item-info { flex: 1; min-width: 0; } .mm-vieworder__item-name { font-family: var(--mm-font-body); font-size: 13px; font-weight: 300; color: var(--mm-black); margin: 0 0 4px; } .mm-vieworder__item-meta { font-family: var(--mm-font-body); font-size: 11px; color: var(--mm-muted); margin: 0 0 4px; } .mm-vieworder__item-meta p { margin: 0; } .mm-vieworder__item-qty { font-family: var(--mm-font-body); font-size: 11px; color: var(--mm-gray); margin: 0; } .mm-vieworder__item-price { font-family: var(--mm-font-body); font-size: 13px; font-weight: 500; color: var(--mm-black); white-space: nowrap; } .mm-vieworder__summary { border: 1px solid var(--mm-border); margin-top: 16px; } .mm-vieworder__sumrow { display: flex; justify-content: space-between; gap: 12px; padding: 11px 16px; font-family: var(--mm-font-body); font-size: 13px; color: #555; border-bottom: 1px solid #f5f5f5; } .mm-vieworder__sumrow:last-child { border-bottom: 0; } .mm-vieworder__sumrow.is-total { color: var(--mm-black); font-weight: 500; font-size: 15px; border-top: 1px solid var(--mm-border); } .mm-vieworder__cols { display: grid; grid-template-columns: 1fr; gap: 24px; margin-top: 4px; } @media (min-width: 640px) { .mm-vieworder__cols { grid-template-columns: 1fr 1fr; } } .mm-vieworder__addr { font-family: var(--mm-font-body); font-size: 13px; line-height: 1.6; color: #555; font-style: normal; } .mm-vieworder__pay { font-family: var(--mm-font-body); font-size: 13px; color: var(--mm-black); margin: 0; } .mm-vieworder__actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 32px; } /* Tracking timeline */ .mm-timeline { display: flex; justify-content: space-between; gap: 4px; margin: 28px 0; position: relative; } .mm-timeline__step { flex: 1; display: flex; flex-direction: column; align-items: center; text-align: center; gap: 8px; position: relative; } .mm-timeline__step::before { content: ""; position: absolute; top: 9px; left: -50%; width: 100%; height: 1px; background: var(--mm-border); z-index: 0; } .mm-timeline__step:first-child::before { display: none; } .mm-timeline__step.is-done::before { background: var(--mm-accent); } .mm-timeline__dot { position: relative; z-index: 1; width: 18px; height: 18px; border-radius: 999px; background: #f5f5f5; border: 1px solid #ddd; display: flex; align-items: center; justify-content: center; } .mm-timeline__step.is-done .mm-timeline__dot { background: var(--mm-accent); border: none; } .mm-timeline__label { font-family: var(--mm-font-body); font-size: 10px; letter-spacing: .04em; color: #aaa; } .mm-timeline__step.is-done .mm-timeline__label { color: var(--mm-black); } /* ── Settings (form-edit-account.php) ────────────────────────────────────── */ .mm-settings__sec { padding-bottom: 28px; margin-bottom: 28px; border-bottom: .5px solid var(--mm-border); } .mm-settings__label { font-family: var(--mm-font-body); font-size: 9px; letter-spacing: .22em; text-transform: uppercase; color: var(--mm-muted); margin: 0 0 18px; } .mm-settings__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; } .mm-field { margin: 0; } .mm-field--full { grid-column: 1 / -1; } .mm-field label { display: block; font-family: var(--mm-font-body); font-size: 11px; letter-spacing: .04em; color: #555; margin-bottom: 6px; } .mm-input { width: 100%; min-height: 44px; padding: 0 12px; border: 1px solid var(--mm-border); border-radius: 0; background: var(--mm-white); font-family: var(--mm-font-body); font-size: 14px; color: var(--mm-black); } .mm-input:focus { border-color: var(--mm-black); outline: none; } .mm-settings__toggles { display: flex; flex-direction: column; gap: 4px; } .mm-toggle { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 0; border-bottom: 1px solid #f5f5f5; cursor: pointer; } .mm-toggle__label { font-family: var(--mm-font-body); font-size: 13px; color: var(--mm-black); } .mm-toggle input { position: absolute; opacity: 0; width: 0; height: 0; } .mm-toggle__track { position: relative; width: 38px; height: 20px; border-radius: 999px; background: #e5e5e5; flex-shrink: 0; transition: background-color .2s ease; } .mm-toggle__knob { position: absolute; top: 2px; left: 2px; width: 16px; height: 16px; border-radius: 999px; background: #fff; transition: transform .2s ease; } .mm-toggle input:checked ~ .mm-toggle__track { background: var(--mm-accent); } .mm-toggle input:checked ~ .mm-toggle__track .mm-toggle__knob { transform: translateX(18px); } .mm-settings__submit { margin-top: 8px; } @media (max-width: 480px) { .mm-settings__grid { grid-template-columns: 1fr; } } /* ── Search results (search.php) ─────────────────────────────────────────── */ .mm-search { max-width: 1320px; margin: 0 auto; padding: clamp(80px,10vw,104px) clamp(16px,4vw,40px) 80px; } .mm-search__eyebrow { font-family: var(--mm-font-body); font-size: 9px; letter-spacing: .22em; text-transform: uppercase; color: var(--mm-muted); margin: 0 0 8px; } .mm-search__title { font-family: var(--mm-font-heading); font-weight: 300; font-size: clamp(28px,5vw,44px); letter-spacing: -.02em; color: var(--mm-black); margin: 0; } .mm-search__count { font-family: var(--mm-font-body); font-size: 12px; color: var(--mm-muted); margin: 10px 0 32px; } .mm-search__grid { display: grid; grid-template-columns: repeat(2,1fr); column-gap: 16px; row-gap: 40px; margin: 0 !important; list-style: none; padding: 0; } @media (min-width: 640px) { .mm-search__grid { grid-template-columns: repeat(3,1fr); } } @media (min-width: 1024px) { .mm-search__grid { grid-template-columns: repeat(4,1fr); } } .mm-search__grid > li.product { width: auto !important; margin: 0 !important; float: none !important; } .mm-search__empty { display: flex; flex-direction: column; align-items: center; text-align: center; padding: 64px 16px; gap: 14px; } .mm-search__empty-title { font-family: var(--mm-font-heading); font-weight: 300; font-size: 24px; color: var(--mm-black); margin: 0; } .mm-search__empty-sub { font-family: var(--mm-font-body); font-size: 12px; color: var(--mm-muted); margin: 0; } .mm-search__tags { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin: 8px 0 20px; } .mm-search__tag { font-family: var(--mm-font-body); font-size: 11px; letter-spacing: .08em; text-transform: uppercase; padding: 8px 16px; border: .5px solid var(--mm-border); color: var(--mm-black); text-decoration: none; transition: all .2s ease; } .mm-search__tag:hover { background: var(--mm-black); color: #fff; border-color: var(--mm-black); }