/* Theme Name: Mr Dad Shop Theme URI: https://mrdad-demo.auresta.com.au Description: Storefront child theme for the Mr Dad Asian Supermarket demo — family-run Asian grocery design (ink, warm cream and lucky red; Oswald display headings, DM Sans body, Marcellus serif moments). Original code and artwork. Author: Auresta Template: storefront Version: 0.3.0 Text Domain: mrdad-shop */ /* ============ Design tokens (brand spec, prefix --md-) ============ */ :root { --md-ink: #141414; /* near-black — headers, footer, dark sections */ --md-paper: #F5EBD8; /* warm cream — light sections, text on dark */ --md-red: #C8102E; /* primary accent — CTAs, prices, sale badges */ --md-gold: #C9A227; /* secondary accent — borders, icons, pattern lines */ --md-jade: #1B7A5A; /* tertiary — success states, top loyalty tier */ --md-serif: "Marcellus", Georgia, serif; /* elegance in story sections */ --md-display: "Oswald", "Arial Narrow", sans-serif; /* headings: 600, uppercase, letterspaced */ --md-sans: "DM Sans", -apple-system, sans-serif; /* body */ /* derived shades of the spec tokens */ --md-red-dark: #A30D26; --md-body: #4f483b; /* warm dark grey body text */ --md-cream: #fcf8ee; /* page background — a lighter paper */ --md-tile: #efe3cb; /* product image tiles */ --md-cutout-ground: #f7f0e2; /* ground behind background-knockout product chips */ --md-border: #e3d5b8; /* hairlines on cream */ --md-paper-soft: rgba(245, 235, 216, 0.78); /* body text on ink */ /* Seigaiha (overlapping semicircle waves) — original SVG, gold strokes on ink at low opacity. Circles r40 on a 80×40 tile; staggered rows every 20px so each scale overlaps the row above, classic wave-crest look. */ --md-seigaiha: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='80'%20height='40'%20viewBox='0%200%2080%2040'%3E%3Cdefs%3E%3Cg%20id='s'%20fill='none'%20stroke='%23C9A227'%20stroke-opacity='.16'%3E%3Ccircle%20r='40'%20fill='%23141414'/%3E%3Ccircle%20r='32'/%3E%3Ccircle%20r='24'/%3E%3Ccircle%20r='16'/%3E%3Ccircle%20r='8'/%3E%3C/g%3E%3C/defs%3E%3Cuse%20href='%23s'%20y='-40'/%3E%3Cuse%20href='%23s'%20x='80'%20y='-40'/%3E%3Cuse%20href='%23s'%20x='-40'%20y='-20'/%3E%3Cuse%20href='%23s'%20x='40'%20y='-20'/%3E%3Cuse%20href='%23s'%20x='120'%20y='-20'/%3E%3Cuse%20href='%23s'/%3E%3Cuse%20href='%23s'%20x='80'/%3E%3Cuse%20href='%23s'%20x='-40'%20y='20'/%3E%3Cuse%20href='%23s'%20x='40'%20y='20'/%3E%3Cuse%20href='%23s'%20x='120'%20y='20'/%3E%3Cuse%20href='%23s'%20y='40'/%3E%3Cuse%20href='%23s'%20x='80'%20y='40'/%3E%3Cuse%20href='%23s'%20x='-40'%20y='60'/%3E%3Cuse%20href='%23s'%20x='40'%20y='60'/%3E%3Cuse%20href='%23s'%20x='120'%20y='60'/%3E%3Cuse%20href='%23s'%20y='80'/%3E%3Cuse%20href='%23s'%20x='80'%20y='80'/%3E%3C/svg%3E"); } /* Dark sections share the ink + seigaiha treatment */ .wd-dark, .wd-hero, .wd-membership, .site-footer { background-color: var(--md-ink); background-image: var(--md-seigaiha); } /* ============ Base typography ============ */ body { font-family: var(--md-sans); font-size: 14px; letter-spacing: 0.4px; line-height: 1.7; color: var(--md-body); background: var(--md-cream); } h1, h2, h3, h4, h5, h6, .site-branding .site-title, .woocommerce-loop-product__title, .product_title { font-family: var(--md-display); font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em; color: var(--md-ink); } a { color: var(--md-red); } a:hover { color: var(--md-red-dark); } /* Full-bleed utility: band sections escape Storefront's centered .col-full. 50vw trick adds a scrollbar-width overflow — clipped at #page. */ .wd-bleed { margin-left: calc(50% - 50vw); margin-right: calc(50% - 50vw); } #page { overflow-x: clip; } /* Widen the content column (Storefront caps at ~66.5em) */ #page .col-full { max-width: 1280px; } /* Section heading pattern: small uppercase kicker + large display title */ .wd-kicker { display: block; color: var(--md-red); font-family: var(--md-sans); font-size: 13px; font-weight: 600; letter-spacing: 2.5px; text-transform: uppercase; margin-bottom: 12px; text-align: center; } .wd-section-title { font-size: 38px; text-align: center; margin: 0 0 40px; } .wd-section { padding: 70px 0; } .wd-container { max-width: 1280px; margin: 0 auto; padding: 0 24px; } /* Serif moments — Marcellus for story ledes and quotes */ .wd-serif, .wd-story__lede { font-family: var(--md-serif); font-size: 19px; line-height: 1.6; color: var(--md-ink); text-transform: none; letter-spacing: 0.2px; } /* ============ Buttons: pill, red fill / cream text ============ */ .button, button, input[type="submit"], .wd-btn, .woocommerce #respond input#submit, .wc-block-components-button { font-family: var(--md-sans); font-size: 13px; font-weight: 600; letter-spacing: 1.5px; text-transform: uppercase; background-color: var(--md-red); color: var(--md-paper); border: 1px solid var(--md-red); border-radius: 30px; padding: 12px 30px; transition: background-color 200ms ease, color 200ms ease; cursor: pointer; } .button:hover, button:hover, input[type="submit"]:hover, .wd-btn:hover { background-color: var(--md-red-dark); border-color: var(--md-red-dark); color: var(--md-paper); } .wd-btn { display: inline-block; text-decoration: none; } .wd-btn--ghost { background: transparent; color: var(--md-ink); border-color: var(--md-gold); } .wd-btn--ghost:hover { background: var(--md-red); border-color: var(--md-red); } /* ============ Topbar ============ */ .wd-topbar { background: var(--md-ink); color: var(--md-paper); font-size: 12px; letter-spacing: 1px; text-transform: uppercase; border-bottom: 1px solid rgba(201, 162, 39, 0.35); } .wd-topbar .wd-container { display: flex; justify-content: space-between; align-items: center; min-height: 36px; } .wd-topbar a { color: var(--md-paper); text-decoration: none; } .wd-topbar a:hover { color: var(--md-gold); } /* ============ Header: logo left · nav center · icons right ============ */ .site-header { background: rgba(248, 242, 228, 0.8); -webkit-backdrop-filter: blur(22px) saturate(1.4); backdrop-filter: blur(22px) saturate(1.4); border-bottom: 1px solid rgba(201, 162, 39, 0.3); padding-top: 0; } /* Fallback if backdrop-filter is unsupported: fall back to near-opaque cream so text never lands on a see-through panel. */ @supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) { .site-header { background: rgba(248, 242, 228, 0.97); } } /* Storefront gives the header ~59px bottom margin on the home page (.home.blog .site-header, specificity 0,3,0). Our full-bleed hero should sit flush against it — !important overrides the framework default cleanly. */ .home .site-header { margin-bottom: 0 !important; } .site-header .col-full { display: flex; align-items: center; gap: 32px; max-width: 1280px; padding-top: 11px; padding-bottom: 11px; transition: padding .3s ease; } /* Compact when scrolled: tighten the utility row + drop the store "COLLECT FROM" label so the locked, always-visible header reads light, not top-heavy. */ .site-header.is-scrolled .col-full { padding-top: 6px; padding-bottom: 6px; } .site-header.is-scrolled .mds-store__label { display: none; } .site-branding { margin: 0 !important; flex: 0 0 auto; } .site-branding .site-title { font-size: 30px; font-weight: 700; margin: 0; line-height: 1; } .site-branding .site-title a { color: var(--md-red); text-decoration: none; } .site-branding .site-description { font-family: var(--md-sans); font-size: 10px; letter-spacing: 3.5px; text-transform: uppercase; color: var(--md-ink); margin: 4px 0 0 2px; display: block; } .storefront-primary-navigation { background: transparent; flex: 1 1 auto; padding: 2px 0; margin: 0; transition: padding .3s ease; } .site-header .storefront-primary-navigation { margin: 0; } .site-header.is-scrolled .storefront-primary-navigation { padding: 0; } /* Storefront pads nav links 1.618em (~21px) top/bottom, bloating the nav row — force a slim, grocery-header height (targeted !important beats the framework). */ .site-header .main-navigation ul.menu li a { padding-top: 9px !important; padding-bottom: 9px !important; } .site-header.is-scrolled .main-navigation ul.menu li a { padding-top: 6px !important; padding-bottom: 6px !important; } .site-header .main-navigation { margin: 0; } .main-navigation ul.menu, .main-navigation ul.nav-menu { display: flex; justify-content: center; gap: 8px; } .main-navigation ul li a { font-family: var(--md-sans); font-size: 13px; font-weight: 500; letter-spacing: 1.5px; text-transform: uppercase; color: var(--md-ink); padding: 8px 14px; } .main-navigation ul li a:hover, .main-navigation ul li.current-menu-item > a { color: var(--md-red); } /* the current page's item reads as a muted grey from a Storefront rule — make "you are here" the brand red */ .site-header .main-navigation ul li.current-menu-item > a { color: var(--md-red) !important; } /* Prominent product search in the branding row (grocery-essential; fills the row). */ .site-header .site-search { display: block !important; flex: 1 1 auto; max-width: 460px; margin-left: auto; } .site-search .widget { margin: 0; padding: 0; border: 0; } .site-search .widget-title, .site-search label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); } .site-search form.woocommerce-product-search { position: relative; display: flex; margin: 0; } .site-search input[type="search"] { width: 100%; height: 44px; box-sizing: border-box; border: 1px solid var(--md-border); border-radius: 999px; padding: 0 50px 0 18px; font-family: var(--md-sans); font-size: 14px; background: #fff; color: var(--md-ink); } .site-search input[type="search"]::placeholder { color: #9a927f; } .site-search input[type="search"]:focus { outline: none; border-color: var(--md-gold); box-shadow: 0 0 0 3px rgba(201, 162, 39, 0.2); } /* Storefront hides the search submit as screen-reader-text (1x1 + clip); override it into a branded red circular search button. */ .site-header .site-search form.woocommerce-product-search button[type="submit"] { position: absolute !important; left: auto !important; right: 5px; top: 50%; transform: translateY(-50%); width: 36px !important; height: 36px !important; padding: 0 !important; margin: 0 !important; overflow: visible !important; clip: auto !important; clip-path: none !important; border: 0; border-radius: 50%; background-color: var(--md-red); cursor: pointer; font-size: 0; line-height: 0; color: transparent; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23F5EBD8' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='m21 21-4.3-4.3'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: center; background-size: 18px; } .site-header .site-search button[type="submit"]:hover { background-color: #a50d26; } /* Storefront also draws a magnifier glyph via ::before on the search widget/form — hide it; the red submit button is the single search affordance. */ .site-header .site-search form.woocommerce-product-search::before, .site-header .site-search .widget_product_search::before, .site-header .site-search::before { content: none !important; display: none !important; background: none !important; } .site-header-cart { flex: 0 0 auto; margin: 0; } .site-header .site-header-cart .cart-contents { position: relative; display: inline-flex; align-items: center; gap: 9px; padding: 6px 2px; font-family: var(--md-sans); } /* subtotal — left of the trolley, only when the cart has items */ .site-header .site-header-cart .cart-contents .amount { display: none; order: 1; color: var(--md-ink); font-weight: 600; font-size: 13px; } .site-header .site-header-cart.has-items .cart-contents .amount { display: inline-block; } .site-header .site-header-cart .cart-contents .count { display: none; } /* "N items" text — the number rides on the trolley */ /* trolley icon replaces Storefront's basket glyph */ .site-header .site-header-cart .cart-contents::after { order: 2; content: ""; width: 26px; height: 26px; display: inline-block; margin: 0; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23141414' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='8' cy='21' r='1'/%3E%3Ccircle cx='19' cy='21' r='1'/%3E%3Cpath d='M2.05 2.05h2l2.66 12.42a2 2 0 0 0 2 1.58h9.78a2 2 0 0 0 1.95-1.57l1.65-7.43H5.12'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: center; background-size: contain; } /* red count badge on the trolley, only when > 0 */ .site-header .site-header-cart .cart-contents::before { content: attr(data-count); position: absolute; top: -5px; right: -7px; z-index: 1; min-width: 17px; height: 17px; padding: 0 4px; border-radius: 9px; background: var(--md-red); color: #F5EBD8; font-size: 10px; font-weight: 700; line-height: 17px; text-align: center; display: none; } .site-header .site-header-cart.has-items .cart-contents::before { display: block; } /* Mini-cart: a compact on-brand dropdown anchored to the cart icon (Storefront's default spills full-width & unstyled). */ .site-header .site-header-cart .widget_shopping_cart { position: absolute; top: calc(100% + 14px); right: 0; left: auto; width: 340px; margin: 0; padding: 0; background: #fff; border: 1px solid var(--md-border); border-radius: 16px; box-shadow: 0 1px 1px rgba(0,0,0,.04), 0 12px 30px rgba(20,16,8,.14), 0 28px 60px rgba(20,16,8,.18); opacity: 0; visibility: hidden; pointer-events: none; transform: translateY(6px); transition: opacity .18s ease, transform .2s ease; z-index: 200; } .site-header .site-header-cart:hover .widget_shopping_cart, .site-header .site-header-cart:focus-within .widget_shopping_cart { opacity: 1; visibility: visible; pointer-events: auto; transform: none; } .site-header .widget_shopping_cart .widget_shopping_cart_content { padding: 14px; } .site-header .woocommerce-mini-cart__empty-message { margin: 0; padding: 16px 6px; text-align: center; color: #6b6152; font-size: 13px; } .site-header .widget_shopping_cart ul.cart_list { list-style: none; margin: 0; padding: 0; max-height: 320px; overflow-y: auto; } .site-header .widget_shopping_cart ul.cart_list li { position: relative; display: flex; flex-wrap: wrap; align-items: center; margin: 0; padding: 12px 26px 12px 2px; border-top: 1px solid var(--md-border); font-size: 13px; line-height: 1.3; } .site-header .widget_shopping_cart ul.cart_list li:first-child { border-top: 0; } /* product link = img + name on one row (the img lives INSIDE this ) */ .site-header .widget_shopping_cart ul.cart_list li > a:not(.remove) { display: flex; align-items: center; gap: 11px; flex: 1 1 100%; min-width: 0; color: var(--md-ink); text-decoration: none; font-weight: 600; } .site-header .widget_shopping_cart ul.cart_list li > a:not(.remove) img { width: 44px !important; height: 44px; flex: 0 0 44px; object-fit: cover; border-radius: 8px; margin: 0 !important; float: none !important; } /* qty × price on its own line, indented to align under the name */ .site-header .widget_shopping_cart ul.cart_list li .quantity { flex: 1 1 100%; padding-left: 55px; margin-top: 3px; color: #6b6152; font-weight: 400; font-size: 12px; } .site-header .widget_shopping_cart ul.cart_list li a.remove { position: absolute !important; left: auto !important; right: 0; top: 50%; transform: translateY(-50%); margin: 0; width: 20px; height: 20px; line-height: 18px; text-align: center; border-radius: 50%; color: var(--md-red) !important; font-size: 16px; background: transparent !important; opacity: 1; } .site-header .widget_shopping_cart ul.cart_list li a.remove:hover { background: #f3e4e6 !important; } .site-header .widget_shopping_cart .total { border: 0; border-top: 1px solid var(--md-border); margin: 8px 0 0; padding: 12px 2px; font-size: 14px; color: var(--md-ink); } .site-header .widget_shopping_cart .total .amount { color: var(--md-red); font-weight: 700; } .site-header .widget_shopping_cart .buttons { display: flex; gap: 8px; margin: 4px 0 0; padding: 0; } .site-header .widget_shopping_cart .buttons .button { flex: 1; margin: 0; padding: 11px 10px; border-radius: 999px; font-family: var(--md-sans); font-size: 12px; font-weight: 600; letter-spacing: .5px; text-transform: uppercase; text-align: center; text-decoration: none; min-width: 0; } .site-header .widget_shopping_cart .buttons .button:not(.checkout) { background: #f3ecdd; color: var(--md-ink); } .site-header .widget_shopping_cart .buttons .button.checkout { background: var(--md-red); color: #fff; } .site-header .widget_shopping_cart .buttons .button.checkout:hover { background: #a50d26; } /* ============ Storefront FX: dynamic sales tools ============ */ /* hover-intent: keep dropdowns open with a grace delay (JS toggles .fx-open) */ .site-header .site-header-cart.fx-open .widget_shopping_cart { opacity: 1; visibility: visible; pointer-events: auto; transform: none; } .site-header .main-navigation ul.menu li.menu-item-has-children.fx-open > ul.sub-menu { opacity: 1; visibility: visible; pointer-events: auto; transform: translateX(-50%) translateY(0); -webkit-backdrop-filter: blur(20px) saturate(180%); backdrop-filter: blur(20px) saturate(180%); } /* header depth + animated nav underline (adds volume + motion) */ .site-header { transition: box-shadow .3s ease; } .site-header.is-scrolled { box-shadow: 0 6px 22px rgba(20, 16, 8, 0.1); } .site-header .main-navigation ul.menu > li > a { position: relative; } .site-header .main-navigation ul.menu > li > a::before { content: ""; position: absolute; left: 3px; right: 3px; bottom: 0; height: 2px; border-radius: 2px; background: var(--md-red); transform: scaleX(0); transform-origin: center; transition: transform .25s ease; } .site-header .main-navigation ul.menu > li > a:hover::before, .site-header .main-navigation ul.menu > li.current-menu-item > a::before { transform: scaleX(1); } /* 1. Announcement bar (rotating promos) */ .mrdad-announce { background: #141414; color: #F5EBD8; font-family: var(--md-sans); font-size: 12.5px; letter-spacing: .4px; height: 38px; overflow: hidden; position: relative; z-index: 1; } .mrdad-announce__track { position: relative; height: 100%; max-width: 1200px; margin: 0 auto; } .mrdad-announce__item { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; gap: 8px; padding: 0 16px; opacity: 0; transform: translateY(7px); transition: opacity .5s ease, transform .5s ease; pointer-events: none; } .mrdad-announce__item.is-active { opacity: 1; transform: none; } .mrdad-announce__item strong { color: #C9A227; font-weight: 700; } .mrdad-announce__ic { color: #C9A227; display: inline-flex; } .mrdad-announce__ic svg { width: 15px; height: 15px; } /* 2. Purchase-proof toasts */ .mrdad-toasts { position: fixed; left: 20px; bottom: 20px; z-index: 900; display: flex; flex-direction: column; gap: 10px; pointer-events: none; } .mrdad-toast { position: relative; display: flex; align-items: center; gap: 12px; width: 320px; max-width: calc(100vw - 40px); padding: 12px 34px 12px 12px; background: #fff; border: 1px solid var(--md-border); border-radius: 14px; box-shadow: 0 12px 32px rgba(20,16,8,.16), 0 2px 6px rgba(20,16,8,.08); font-family: var(--md-sans); pointer-events: auto; opacity: 0; transform: translateX(-26px); transition: opacity .4s ease, transform .45s cubic-bezier(.22,1,.36,1); } .mrdad-toast.is-in { opacity: 1; transform: none; } .mrdad-toast__img { width: 46px; height: 46px; border-radius: 10px; object-fit: cover; flex: 0 0 46px; background: #f3ecdd; } .mrdad-toast__body { display: flex; flex-direction: column; min-width: 0; font-size: 12.5px; line-height: 1.35; color: var(--md-ink); } .mrdad-toast__who strong { font-weight: 700; } .mrdad-toast__prod { font-weight: 600; color: var(--md-red); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .mrdad-toast__meta { font-size: 11px; color: #8a8375; display: flex; align-items: center; gap: 5px; margin-top: 2px; } .mrdad-toast__dot { width: 7px; height: 7px; border-radius: 50%; background: #1B7A5A; animation: mrdad-pulse 1.8s infinite; } @keyframes mrdad-pulse { 0%{box-shadow:0 0 0 0 rgba(27,122,90,.5)} 70%{box-shadow:0 0 0 6px rgba(27,122,90,0)} 100%{box-shadow:0 0 0 0 rgba(27,122,90,0)} } .mrdad-toast__x { position: absolute; top: 7px; right: 8px; border: 0; background: none; color: #b7b0a2; font-size: 16px; line-height: 1; cursor: pointer; padding: 2px; } .mrdad-toast__x:hover { color: var(--md-ink); } /* 3. Promo popup card */ .mrdad-promo { position: fixed; inset: 0; z-index: 1000; display: flex; align-items: center; justify-content: center; padding: 20px; background: rgba(20,16,8,.55); opacity: 0; visibility: hidden; transition: opacity .3s ease, visibility .3s; } .mrdad-promo.is-open { opacity: 1; visibility: visible; } .mrdad-promo__card { position: relative; width: min(440px, 100%); background: var(--md-cream); border-radius: 20px; overflow: hidden; box-shadow: 0 30px 80px rgba(0,0,0,.42); transform: scale(.94) translateY(12px); transition: transform .35s cubic-bezier(.22,1,.4,1); text-align: center; } .mrdad-promo.is-open .mrdad-promo__card { transform: none; } .mrdad-promo__x { position: absolute; top: 12px; right: 14px; z-index: 2; border: 0; background: rgba(245,235,216,.16); color: #F5EBD8; width: 30px; height: 30px; border-radius: 50%; font-size: 18px; line-height: 1; cursor: pointer; } .mrdad-promo__banner { background: #141414; color: #F5EBD8; padding: 30px 24px 24px; background-image: radial-gradient(circle at 50% 130%, rgba(201,162,39,.28) 0 26px, transparent 27px); background-size: 56px 28px; } .mrdad-promo__kicker { font-size: 11px; letter-spacing: 3px; text-transform: uppercase; color: #C9A227; font-weight: 700; } .mrdad-promo__title { font-family: Oswald, sans-serif; font-weight: 700; font-size: 32px; text-transform: uppercase; color: #C8102E; margin: 8px 0 0; line-height: 1.02; } .mrdad-promo__body { padding: 24px 30px 28px; } .mrdad-promo__lede { font-size: 15px; color: var(--md-ink); margin: 0 0 20px; line-height: 1.5; } .mrdad-promo__cta { display: inline-block; background: var(--md-red); color: #fff; font-family: var(--md-sans); font-weight: 600; letter-spacing: .5px; text-transform: uppercase; font-size: 13px; padding: 13px 28px; border-radius: 999px; text-decoration: none; } .mrdad-promo__cta:hover { background: #a50d26; color: #fff; } .mrdad-promo__skip { display: block; margin: 12px auto 0; background: none; border: 0; color: #8a8375; font-size: 12px; cursor: pointer; text-decoration: underline; } /* 4. Same-day pickup countdown (urgency pill, bottom-right) */ .mrdad-countdown { position: fixed; right: 20px; bottom: 20px; z-index: 850; display: flex; align-items: center; gap: 9px; background: #141414; color: #F5EBD8; padding: 10px 13px; border-radius: 999px; font-family: var(--md-sans); font-size: 13px; letter-spacing: .2px; box-shadow: 0 12px 30px rgba(20,16,8,.24); border: 1px solid rgba(201,162,39,.4); opacity: 0; transform: translateY(16px); transition: opacity .4s ease, transform .45s cubic-bezier(.22,1,.36,1); } .mrdad-countdown.is-in { opacity: 1; transform: none; } .mrdad-countdown__ic { color: #C9A227; display: inline-flex; } .mrdad-countdown__ic svg { width: 18px; height: 18px; } .mrdad-countdown__txt strong { color: #C9A227; font-weight: 700; } .mrdad-countdown__x { border: 0; background: none; color: rgba(245,235,216,.6); font-size: 16px; line-height: 1; cursor: pointer; padding: 0 2px; } .mrdad-countdown__x:hover { color: #F5EBD8; } /* 5. Free-gift spend-threshold progress (inside the mini-cart) */ .mrdad-gift { margin: 0 0 10px; padding: 10px 12px; background: #f7f0e0; border: 1px solid rgba(201,162,39,.35); border-radius: 10px; } .mrdad-gift.is-complete { background: #e7f2ec; border-color: rgba(27,122,90,.4); } .mrdad-gift__msg { display: flex; align-items: center; gap: 7px; font-size: 12px; line-height: 1.35; color: var(--md-ink); } .mrdad-gift__msg strong { color: var(--md-red); } .mrdad-gift.is-complete .mrdad-gift__msg strong { color: #1B7A5A; } .mrdad-gift__msg svg { width: 17px; height: 17px; color: #C9A227; flex: 0 0 17px; } .mrdad-gift.is-complete .mrdad-gift__msg svg { color: #1B7A5A; } .mrdad-gift__track { height: 6px; background: #e3d6bb; border-radius: 3px; margin-top: 8px; overflow: hidden; } .mrdad-gift__track span { display: block; height: 100%; background: linear-gradient(90deg, #C9A227, #C8102E); border-radius: 3px; transition: width .5s ease; } .mrdad-gift.is-complete .mrdad-gift__track span { background: #1B7A5A; } @media (prefers-reduced-motion: reduce) { .mrdad-announce__item, .mrdad-toast, .mrdad-promo, .mrdad-promo__card, .mrdad-toast__dot, .mrdad-countdown, .mrdad-gift__track span { transition: none !important; animation: none !important; } } /* Collapse storefront's stacked rows into the single flex row above */ .site-header .storefront-primary-navigation .col-full { padding: 0; display: block; } /* Sticky, two-tier header (Apple-organised): a utility tier (logo · store · search · cart, grouped and aligned) and a distinct navigation tier below, split by a hairline. */ .site-header { position: sticky; top: 0; z-index: 999; } .site-header .col-full { align-items: center; gap: 14px; flex-wrap: wrap; padding-top: 10px; padding-bottom: 0; } /* nav tier: full-width row, centred menu, hairline divider from the utility tier */ .site-header .storefront-primary-navigation { flex: 0 0 100%; width: 100%; margin-top: 10px; padding: 5px 0 4px; border-top: 1px solid var(--md-border); } .site-header .main-navigation, .site-header .main-navigation .primary-navigation { width: 100% !important; float: none !important; } .site-header .main-navigation ul.menu, .site-header .main-navigation ul.nav-menu { width: 100%; justify-content: center; gap: 30px; } .main-navigation ul li a { padding: 8px 4px; } /* Shop mega-menu: a multi-column frosted dropdown of all categories. */ .site-header .main-navigation ul.menu li.menu-item-has-children { position: relative; } /* invisible bridge across the gap so the panel doesn't vanish while moving the cursor to it */ .site-header .main-navigation ul.menu li.menu-item-has-children::after { content: ""; position: absolute; top: 100%; left: -24px; right: -24px; height: 20px; background: transparent !important; border: 0 !important; } .site-header .main-navigation ul.menu li.menu-item-has-children > a::after { content: ""; display: inline-block; width: 7px; height: 7px; margin-left: 7px; vertical-align: middle; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(45deg) translate(-1px, -2px); transition: transform .2s ease; } .site-header .main-navigation ul.menu li.menu-item-has-children:hover > a::after { transform: rotate(225deg) translate(-1px, -1px); } .site-header .main-navigation ul.menu ul.sub-menu { position: absolute; top: calc(100% + 8px); left: 50%; margin: 0; padding: 16px 20px; list-style: none; width: max-content !important; max-width: calc(100vw - 32px); display: grid; grid-template-columns: repeat(3, max-content) !important; gap: 8px 30px; justify-content: center; background: rgba(250, 246, 238, 0.9); border: 1px solid rgba(255, 255, 255, 0.55); border-radius: 16px; box-shadow: 0 1px 1px rgba(0,0,0,.04), 0 12px 30px rgba(20,16,8,.16), 0 28px 60px rgba(20,16,8,.2); opacity: 0; visibility: hidden; pointer-events: none; z-index: 80; transform: translateX(-50%) translateY(6px); transition: opacity .18s ease, transform .2s ease; } /* apply the frosted blur ONLY when open — Chromium renders backdrop-filter even on a visibility:hidden element, which otherwise leaves a ghost white box below "Shop". */ .site-header .main-navigation ul.menu li.menu-item-has-children:hover > ul.sub-menu, .site-header .main-navigation ul.menu li.menu-item-has-children:focus-within > ul.sub-menu { opacity: 1; visibility: visible; pointer-events: auto; transform: translateX(-50%) translateY(0); -webkit-backdrop-filter: blur(20px) saturate(180%); backdrop-filter: blur(20px) saturate(180%); } .site-header .main-navigation ul.sub-menu li { margin: 0; width: auto; float: none; } .site-header .main-navigation ul.sub-menu li a { display: inline-flex !important; width: fit-content; align-items: center; gap: 14px; padding: 8px 12px !important; border-radius: 11px; font-size: 11.5px; letter-spacing: .3px; text-transform: uppercase; color: var(--md-ink); white-space: nowrap; line-height: 1; } .site-header .main-navigation ul.sub-menu li a:hover { background: rgba(201, 162, 39, 0.14); color: var(--md-red); } .site-header .main-navigation ul.sub-menu .mds-cat-ic { display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; flex: 0 0 36px; border-radius: 10px; background: rgba(201, 162, 39, 0.13); color: #b0871f; transition: background .18s ease, color .18s ease; } .site-header .main-navigation ul.sub-menu .mds-cat-ic svg { width: 21px; height: 21px; } .site-header .main-navigation ul.sub-menu li a:hover .mds-cat-ic { background: var(--md-red); color: #fff; } .site-header .main-navigation ul.sub-menu .mds-cat-label { flex: 0 1 auto; line-height: 1; } /* Store/pickup selector relocated into the header (next to the logo). Strip the plugin's full-width dark-bar chrome and restyle the pill for the cream header. */ .site-header .mds-bar { background: none; padding: 0; margin: 0; position: relative; z-index: auto; flex: 0 0 auto; } .site-header .mds-bar__inner { max-width: none; margin: 0; gap: 0; } .site-header .mds-bar__aside, .site-header .mds-nudge { display: none !important; } /* store pill: blends into the cream header at rest, turns white on hover */ .site-header .mds-store { background: transparent !important; color: var(--md-ink); border: 1px solid transparent !important; box-shadow: none !important; } .site-header .mds-store:hover, .site-header .mds-store[aria-expanded="true"] { background: #fff !important; border-color: var(--md-border) !important; box-shadow: 0 4px 14px rgba(20, 16, 8, 0.12) !important; } .site-header .mds-store__label { color: #a9821f; } .site-header .mds-store__name { color: var(--md-ink); } .site-header .mds-store__pin { color: var(--md-red); } .site-header .mds-store__chev { color: var(--md-ink); } /* Row 1 fit: logo+wordmark (left) · store pill · search (right). Shrink the oversized wordmark so the store pill and search share the row without the search collapsing. */ .site-header .site-branding { flex: 0 0 auto !important; float: none !important; width: auto !important; max-width: 360px !important; min-width: 0; margin-right: 0 !important; } .site-header .site-branding .site-title { font-size: 21px; } .site-header .wd-brand-lockup { display: inline-flex; align-items: center; gap: 12px; } /* Left group: logo · store pill. Right group: search · cart (pushed right together). */ .site-header .mds-bar { margin-left: 10px; } .site-header .site-search { flex: 0 0 auto; max-width: 300px; margin-left: auto; } /* starts the right group */ .site-header .site-header-cart { flex: 0 0 auto; margin: 0 0 0 16px !important; position: relative !important; top: auto; right: auto; transform: none !important; } /* level every utility control on one baseline. The search carries a Storefront margin-bottom that align-items:center bakes into its box, shoving it up — zero it. */ .site-header .site-branding, .site-header .mds-bar, .site-header .site-search, .site-header .site-header-cart { align-self: center !important; } .site-header .site-search { margin-bottom: 0 !important; float: none !important; } /* ============ Mobile header: two tight lines (Hema-style grocery header) ============ Storefront's handheld layout (≤768px) otherwise stacks logo / store / search / cart / MENU into ~5 rows (~242px tall). Collapse to exactly two lines: row 1 = logo · store selector row 2 = search (grows) · cart · MENU The MENU (Storefront's handheld toggle) lives in a separate nav tier we can't move without breaking its JS, so the tier collapses to zero height, the toggle is lifted onto row 2, and the opened .handheld-navigation drops as a full-width panel. */ @media (max-width: 768px) { .site-header .col-full { display: flex; flex-wrap: wrap; align-items: center; column-gap: 10px; row-gap: 7px; padding: 7px 0 9px !important; position: relative; } /* row 1: logo (left) + store pill (pushed right) */ .site-header .site-branding { order: 1; margin: 0 !important; max-width: none !important; } .site-header .site-branding .wd-brand-lockup__wordmark { height: 26px !important; } .site-header .site-branding .wd-brand-lockup__logo { height: 30px !important; } .site-header .site-branding .wd-brand-lockup__mascot { width: 36px !important; } .site-header .mds-bar { order: 2; margin: 0 0 0 auto !important; } .site-header .mds-store { padding: 5px 10px !important; } .site-header .mds-store__label { display: none !important; } /* drop the label → single line (pin/truck icon conveys mode) */ /* the pill sits at the right of row 1, so open its panel right-anchored to stay on-screen */ .site-header .mds-store__panel { left: auto !important; right: 0 !important; } /* forced wrap: everything after this starts row 2 */ .site-header .col-full::after { content: ""; order: 3; flex-basis: 100%; height: 0; margin: 0; } /* row 2: search grows, cart, then MENU (absolute, right) */ .site-header .site-search { order: 4; flex: 1 1 auto; max-width: none !important; margin: 0 !important; } .site-header .site-search input[type="search"] { height: 40px !important; } .site-header .site-header-cart { order: 5; margin: 0 54px 0 2px !important; } /* icon + badge only on phones — the subtotal text beside the cart icon wraps the utility row to a third line the moment the cart is non-empty. Must match the `.has-items` reveal above (0,4,1) or that rule wins the tie. */ .site-header .site-header-cart.has-items .cart-contents .amount, .site-header .site-header-cart .cart-contents .amount, .site-header .site-header-cart .cart-contents .count { display: none; } /* nav tier collapses to zero height; only the toggle is lifted onto row 2. background/overflow pinned down or the empty tier paints a stray white strip under the search row (visible on real devices). The absolute toggle anchors to the header .col-full, so the tier's overflow:hidden cannot clip it. */ .site-header .storefront-primary-navigation { height: 0; min-height: 0; margin: 0 !important; padding: 0 !important; border: 0 !important; overflow: hidden; position: static !important; background: transparent !important; } /* position:static so the absolute toggle anchors to the header's OUTER .col-full — the generic `.site-header .col-full { position:relative }` also matches this inner one, which would trap the toggle inside the overflow-hidden zero-height tier. */ .site-header .storefront-primary-navigation > .col-full { padding: 0 !important; display: block; background: transparent !important; position: static !important; } .site-header .main-navigation { position: static; margin: 0; background: transparent !important; } /* belt-and-braces: never show the panel unless Storefront's JS has toggled it open */ .site-header .main-navigation:not(.toggled) .handheld-navigation { display: none; } /* The toggle is a real BUTTON (bordered pill like the rest of the header chrome), not three bare lines floating beside the cart. Open state = red fill + X, with Storefront's .toggled bar-transforms neutralised — they used to rotate the whole hamburger SVG into a skewed "rake". */ .site-header .menu-toggle { position: absolute !important; right: 4px; bottom: 9px; z-index: 3; width: 42px !important; height: 42px !important; padding: 0 !important; margin: 0 !important; background: #fff !important; border: 1px solid var(--md-border) !important; border-radius: 12px !important; box-shadow: none !important; display: inline-flex !important; align-items: center; justify-content: center; transition: background .15s ease, border-color .15s ease; transform: none !important; } .site-header .menu-toggle span { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; } .site-header .menu-toggle::before { content: ""; width: 19px; height: 15px; display: block; /* static !important: Storefront absolutely-positions this pseudo to draw its own menu bars — on a static (in-row) button that anchor becomes .col-full and the icon paints at the header's LEFT edge, divorced from its button */ position: static !important; transform: none !important; background: no-repeat center/contain url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 18' fill='none' stroke='%23141414' stroke-width='2.4' stroke-linecap='round'%3E%3Cpath d='M2 3h20M2 9h20M2 15h20'/%3E%3C/svg%3E"); } .site-header .menu-toggle::after { display: none !important; } /* Storefront marks the open state as aria-expanded on the button (.toggled goes on the nav) */ .site-header .menu-toggle.toggled, .site-header .menu-toggle[aria-expanded="true"] { background: var(--md-red) !important; border-color: var(--md-red) !important; } .site-header .menu-toggle.toggled::before, .site-header .menu-toggle[aria-expanded="true"]::before { width: 15px; height: 15px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23F5EBD8' stroke-width='2.4' stroke-linecap='round'%3E%3Cpath d='M2 2l12 12M14 2L2 14'/%3E%3C/svg%3E"); } .site-header .menu-toggle:focus-visible { outline: 2px solid var(--md-gold); outline-offset: 2px; } /* fx JS moves the toggle into the header flex row (real vertical centring across device widths); the absolute rules above stay as the no-JS fallback */ body.mrdad-toggle-inrow .site-header .menu-toggle { position: static !important; order: 6; flex: 0 0 auto; } body.mrdad-toggle-inrow .site-header .site-header-cart { margin-right: 2px !important; } /* opened handheld menu = a floating card under the header, in the site's card language — not edge-to-edge white slabs */ .site-header .main-navigation .handheld-navigation { position: absolute; top: calc(100% + 6px); left: 10px; right: 10px; width: auto; background: #fff; border: 1px solid var(--md-border); border-radius: 14px; box-shadow: 0 16px 34px rgba(20, 16, 8, 0.18); padding: 6px 8px; z-index: 998; overflow: hidden; } .site-header .main-navigation .handheld-navigation ul.menu { width: 100%; display: block; margin: 0; } .site-header .main-navigation .handheld-navigation ul.menu li { width: 100%; float: none; position: relative; border-top: 1px solid rgba(214, 204, 182, 0.55); } .site-header .main-navigation .handheld-navigation ul.menu > li:first-child { border-top: 0; } .site-header .main-navigation .handheld-navigation ul.menu li a { display: flex; align-items: center; justify-content: space-between; padding: 13px 12px; border-radius: 9px; font-family: var(--md-sans); font-size: 13px; letter-spacing: .8px; text-transform: uppercase; color: var(--md-ink); font-weight: 600; } /* quiet chevron affordance on every row */ .site-header .main-navigation .handheld-navigation ul.menu li a::after { content: ""; width: 7px; height: 7px; flex: 0 0 auto; border-right: 1.8px solid #b3a98e; border-top: 1.8px solid #b3a98e; transform: rotate(45deg); } .site-header .main-navigation .handheld-navigation ul.menu li.current-menu-item > a { background: rgba(190, 18, 44, 0.07); } /* stop the desktop nav's animated underline + Storefront's font-glyph caret leaking in; the has-children row gets the same border-drawn chevron as every other row */ .site-header .main-navigation .handheld-navigation ul.menu > li > a::before { display: none !important; } .site-header .main-navigation .handheld-navigation ul.menu li.menu-item-has-children > a::after { content: "" !important; width: 7px; height: 7px; border-right: 1.8px solid #b3a98e; border-top: 1.8px solid #b3a98e; transform: rotate(45deg); margin: 0; } .site-header .main-navigation .handheld-navigation ul.menu li.current-menu-item > a { color: var(--md-red); } /* Hide the SHOP category mega-menu on mobile — it's redundant with the King Kong category zone and the Shop tab, and its expander/grid don't belong here. SHOP is simply a link to the shop page. */ .site-header .main-navigation .handheld-navigation .dropdown-toggle { display: none !important; } .site-header .main-navigation .handheld-navigation ul.menu ul.sub-menu { display: none !important; } /* Announcement bar: keep each rotating message on a single line */ .mrdad-announce { height: 32px; } .mrdad-announce__item { font-size: 10.5px; letter-spacing: .1px; gap: 6px; padding: 0 10px; white-space: nowrap; flex-wrap: nowrap; } .mrdad-announce__ic svg { width: 13px; height: 13px; } /* Hero CTAs: sit side by side on one line instead of stacking */ .wd-hero .wd-btn, .wd-hero .wd-btn--ghost { font-size: 11px !important; letter-spacing: .6px !important; padding: 11px 16px !important; white-space: nowrap; } .wd-hero .wd-btn { margin-right: 10px; } } /* ============ Hero: ink, seigaiha, gold line art ============ */ .wd-hero { position: relative; min-height: 660px; display: flex; align-items: center; color: var(--md-paper-soft); overflow: hidden; } .wd-hero__art { position: absolute; inset: 0; width: 100%; height: 100%; } .wd-hero--photo { background-size: cover; background-position: center 38%; } .wd-hero__inner { position: relative; z-index: 2; } /* auspicious-cloud (祥云) motifs over the photo hero */ .wd-hero__cloud { position: absolute; z-index: 1; pointer-events: none; opacity: .92; filter: drop-shadow(0 6px 16px rgba(0,0,0,.35)); animation: wd-cloud-drift 14s ease-in-out infinite; } .wd-hero__cloud--a { top: 8%; right: 4%; width: 260px; animation-delay: 0s; } .wd-hero__cloud--b { bottom: 12%; left: 3%; width: 200px; animation-delay: -7s; animation-duration: 18s; } @keyframes wd-cloud-drift { 0%,100% { transform: translateX(0); } 50% { transform: translateX(14px); } } @media (max-width: 768px) { .wd-hero__cloud--b { display: none; } .wd-hero__cloud--a { width: 160px; opacity: .7; } } @media (prefers-reduced-motion: reduce) { .wd-hero__cloud { animation: none; } } /* ============ 祥云 cloud accents (dividers between sections + corner motifs) ============ */ .wd-divider { display: flex; align-items: center; justify-content: center; gap: 24px; max-width: 620px; margin: 0 auto; padding: 44px 24px; } .wd-divider__rule { flex: 1 1 auto; height: 1px; background: linear-gradient(90deg, transparent, rgba(201, 162, 39, 0.55)); } .wd-divider__rule + .wd-divider__rule, .wd-divider .wd-divider__cloud + .wd-divider__rule { background: linear-gradient(90deg, rgba(201, 162, 39, 0.55), transparent); } .wd-divider__cloud { flex: 0 0 auto; width: 82px; height: auto; opacity: 0.9; } .wd-divider--paper .wd-divider__rule { background: linear-gradient(90deg, transparent, rgba(245, 235, 216, 0.5)); } .wd-divider--paper .wd-divider__cloud + .wd-divider__rule { background: linear-gradient(90deg, rgba(245, 235, 216, 0.5), transparent); } /* Corner clouds drift low behind full-bleed band content */ .wd-clouds { position: absolute; inset: 0; overflow: hidden; pointer-events: none; z-index: 0; } .wd-clouds svg { position: absolute; height: auto; opacity: 0.15; animation: wd-cloud-drift 16s ease-in-out infinite; } .wd-clouds__a { top: 12%; left: 3%; width: 200px; } .wd-clouds__b { bottom: 8%; right: 4%; width: 150px; animation-delay: -8s; animation-duration: 20s; } @media (max-width: 768px) { .wd-clouds__b { display: none; } .wd-clouds__a { width: 130px; } } @media (prefers-reduced-motion: reduce) { .wd-clouds svg { animation: none; } } .wd-hero .wd-kicker { text-align: left; color: var(--md-gold); } .wd-hero__title { font-size: 58px; line-height: 1.12; margin: 0 0 18px; max-width: 620px; color: var(--md-paper); } .wd-hero__cuisines { font-family: var(--md-display); font-weight: 500; font-size: 15px; letter-spacing: 3px; text-transform: uppercase; color: var(--md-gold); margin: 0 0 18px; } .wd-hero__lede { max-width: 470px; font-size: 15px; margin: 0 0 32px; } .wd-hero .wd-btn { margin-right: 12px; } .wd-hero .wd-btn--ghost { color: var(--md-paper); border-color: rgba(245, 235, 216, 0.5); } .wd-hero .wd-btn--ghost:hover { color: var(--md-paper); border-color: var(--md-red); } /* ============ Category circles ============ */ .wd-cats { display: flex; flex-wrap: wrap; justify-content: center; gap: 40px; } .wd-cat { text-align: center; text-decoration: none; width: 180px; } .wd-cat__disc { width: 170px; height: 170px; border-radius: 50%; margin: 0 auto 18px; display: flex; align-items: center; justify-content: center; background: var(--md-tile); border: 1px solid var(--md-border); color: var(--md-red); transition: transform 250ms ease, box-shadow 250ms ease; } /* rotate the accent colour around the spec palette */ .wd-cat:nth-child(3n+2) .wd-cat__disc { color: var(--md-gold); } .wd-cat:nth-child(3n) .wd-cat__disc { color: var(--md-jade); } .wd-cat:hover .wd-cat__disc { transform: translateY(-6px); box-shadow: 0 18px 30px rgba(200, 16, 46, 0.14); } .wd-cat__disc svg { width: 72px; height: 72px; } .wd-cat__disc { overflow: hidden; } /* Real Mr Dad category tiles (assets/brand/cat-*.png) inside the discs */ .wd-cat__img { width: 78%; height: 78%; object-fit: contain; } /* Header lockup: mascot + wordmark */ .wd-brand-lockup { display: inline-flex; align-items: center; gap: 11px; text-decoration: none; } .wd-brand-lockup__mascot { width: 52px; height: auto; display: block; } /* Full vertical lockup used as the header mark (badge + block). Sized by HEIGHT, since the lockup is portrait — width-sizing would blow the header height out. */ .wd-brand-lockup__logo { height: 50px; width: auto; display: block; transition: height .3s ease; } /* Co-brand wordmark block (Mr Dad × LUCKYOO): the artwork already carries its own dark ground and white type, so NO recolour filter — the old rule inherited here was for the white-on-transparent mark it replaced and turned the block to mud. Header-scoped selector (0,3,0) still beats Storefront's `.site-header .site-branding img{height:auto;max-width:230px}` (0,2,1). */ .wd-brand-lockup__wordmark { display: block; transition: height .3s ease, opacity .2s ease; } .site-header .site-branding .wd-brand-lockup__wordmark { height: 46px; width: auto; max-width: none; } .site-header .site-branding .wd-brand-lockup__mascot { width: 46px; height: auto; transition: width .3s ease; } .site-header .site-branding .wd-brand-lockup__logo { height: 50px; width: auto; max-width: none; } /* Light-glint sweep gliding through the wordmark letters on hover (masked to the mark) */ .wd-brand-lockup__mark { position: relative; display: inline-flex; line-height: 0; } .wd-brand-lockup__glint { position: absolute; inset: 0; pointer-events: none; opacity: 0; background: linear-gradient(100deg, transparent 40%, rgba(255, 255, 255, 0.95) 50%, transparent 60%); background-repeat: no-repeat; background-size: 250% 100%; background-position: -120% 0; -webkit-mask: url("assets/brand/logo-wordmark.png") center / contain no-repeat; mask: url("assets/brand/logo-wordmark.png") center / contain no-repeat; } .wd-brand-lockup:hover .wd-brand-lockup__glint, .wd-brand-lockup:focus-visible .wd-brand-lockup__glint { animation: wd-glint 0.85s cubic-bezier(0.4, 0, 0.2, 1); } @keyframes wd-glint { 0% { background-position: -120% 0; opacity: 0; } 12% { opacity: 1; } 88% { opacity: 1; } 100% { background-position: 220% 0; opacity: 0; } } @media (prefers-reduced-motion: reduce) { .wd-brand-lockup__glint { display: none; } } /* Shrink a touch more once the header locks on scroll */ .site-header.is-scrolled .site-branding .wd-brand-lockup__wordmark { height: 30px; } .site-header.is-scrolled .site-branding .wd-brand-lockup__logo { height: 34px; } .site-header.is-scrolled .site-branding .wd-brand-lockup__mascot { width: 34px; } @media (max-width: 600px) { .site-header .site-branding .wd-brand-lockup__wordmark { height: 30px; } .site-header .site-branding .wd-brand-lockup__mascot { width: 36px; } } .wd-cat__photo { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; transition: transform 250ms ease; } .wd-cat:hover .wd-cat__photo { transform: scale(1.06); } .wd-cat__name { font-family: var(--md-display); font-weight: 600; font-size: 16px; letter-spacing: 1px; text-transform: uppercase; color: var(--md-ink); } .wd-cat__count { font-size: 12px; letter-spacing: 1px; text-transform: uppercase; color: var(--md-body); } /* ============ Photo category showcase (dark seigaiha ground, cream photo cards) ============ */ .wd-showcase .wd-kicker { color: var(--md-gold); } .wd-showcase .wd-section-title { color: var(--md-paper); } .wd-showcase__sub { text-align: center; color: var(--md-paper-soft); font-family: var(--md-serif); font-size: 18px; max-width: 560px; margin: -24px auto 44px; } .wd-showcase__grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(178px, 1fr)); gap: 22px; } .wd-showcase__card { display: flex; flex-direction: column; background: var(--md-cream); border: 1px solid rgba(201, 162, 39, 0.35); border-radius: 14px; overflow: hidden; text-decoration: none; transition: transform 250ms ease, box-shadow 250ms ease, border-color 250ms ease; } .wd-showcase__card:hover { transform: translateY(-6px); border-color: var(--md-gold); box-shadow: 0 22px 40px rgba(0, 0, 0, 0.38); } .wd-showcase__thumb { aspect-ratio: 1 / 1; background: #fff; display: flex; align-items: center; justify-content: center; overflow: hidden; } .wd-showcase__img { width: 88%; height: 88%; object-fit: contain; transition: transform 300ms ease; } .wd-showcase__card:hover .wd-showcase__img { transform: scale(1.06); } .wd-showcase__icon { color: var(--md-red); } .wd-showcase__icon svg { width: 56px; height: 56px; } .wd-showcase__meta { padding: 14px 12px 16px; text-align: center; border-top: 1px solid var(--md-border); } .wd-showcase__name { display: block; font-family: var(--md-display); font-weight: 600; font-size: 14px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--md-ink); line-height: 1.2; } .wd-showcase__count { display: block; margin-top: 5px; font-size: 11px; letter-spacing: 1px; text-transform: uppercase; color: var(--md-body); } .wd-showcase__cta { text-align: center; margin-top: 42px; } @media (max-width: 720px) { .wd-showcase__grid { grid-template-columns: repeat(3, 1fr); gap: 14px; } .wd-showcase__name { font-size: 12px; } } @media (max-width: 460px) { .wd-showcase__grid { grid-template-columns: repeat(2, 1fr); } } /* ============ Product cards (shop loop everywhere) ============ */ /* Storefront's float columns don't reach custom templates — use a real grid */ ul.products { display: grid !important; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 22px 18px; margin: 0 0 1em; padding: 0; } /* Storefront's clearfix pseudo-elements become phantom grid cells — kill them */ ul.products::before, ul.products::after { display: none !important; } ul.products li.product { width: auto !important; margin: 0 !important; float: none !important; } /* Grocery grid: 6 tiles per row on desktop (normal-proportioned), stepping down with width. minmax(0, 1fr), NOT bare 1fr: 1fr's auto minimum lets any rigid content (the inline SVG placeholder's fixed width, an unbreakable title token) blow its track wide and squeeze the rest — visible the moment real photos made the tiles asymmetric. */ ul.products, ul.products.columns-3, ul.products.columns-4, ul.products.columns-5 { grid-template-columns: repeat(6, minmax(0, 1fr)); } @media (max-width: 992px) { ul.products, ul.products.columns-3, ul.products.columns-4, ul.products.columns-5 { grid-template-columns: repeat(4, minmax(0, 1fr)) !important; } } @media (max-width: 768px) { ul.products, ul.products.columns-3, ul.products.columns-4, ul.products.columns-5 { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; } } @media (max-width: 520px) { ul.products, ul.products.columns-3, ul.products.columns-4, ul.products.columns-5 { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; } } /* Uniform card = white rounded panel. Contents stack image · title(2-line clamp) · price · stock cue · button, with the button pinned to the bottom so every tile is identical height. */ ul.products li.product { text-align: center; display: flex; flex-direction: column; position: relative; background: #fff; border: 1px solid var(--md-border); border-radius: 14px; padding: 12px 12px 14px; transition: transform .2s ease, box-shadow .2s ease; } ul.products li.product:hover { transform: translateY(-3px); box-shadow: 0 12px 26px rgba(20, 16, 8, 0.12); } ul.products li.product .woocommerce-LoopProduct-link { text-decoration: none; display: flex; flex-direction: column; flex: 0 0 auto; } ul.products li.product .onsale { position: absolute !important; top: 8px; right: 8px; left: auto; margin: 0 !important; z-index: 2; } /* Image: square, contained on a soft ground (the card provides the frame). The svg selector covers the inline category-glyph placeholder (.mrdad-ph) — without it the SVG keeps its intrinsic 324px width instead of scaling with the card like an img does. */ ul.products li.product img, ul.products li.product svg.mrdad-ph { display: block; aspect-ratio: 1 / 1; width: 100%; height: auto; box-sizing: border-box; object-fit: contain; background: #fbfaf6; border: 0; border-radius: 9px; padding: 4px; margin: 0 0 9px; } /* Title: exactly two clamped lines so every card lines up. (Storefront's WooCommerce stylesheet used to print after this file and win ties — fixed via the enqueue dependency in functions.php, so no !important needed here.) */ ul.products li.product .woocommerce-loop-product__title { font-size: 12.5px; line-height: 1.35; letter-spacing: 0.2px; font-weight: 600; margin: 0 0 5px; color: var(--md-ink); min-height: calc(2 * 1.35em); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } ul.products li.product .price { font-family: var(--md-sans); font-size: 14px; font-weight: 700; color: var(--md-red); margin: 0 0 5px; } ul.products li.product .price del { color: #9a9484; font-weight: 400; font-size: 11px; margin-right: 5px; } ul.products li.product .price ins { text-decoration: none; } /* Member-price chip (rendered by the loyalty plugin for non-members): the membership pitch on every tile — gold, quiet, but always there. */ ul.products li.product .wd-member-chip { display: inline-flex; align-items: center; gap: 3px; margin: 0 auto 6px; padding: 2px 8px; font-family: var(--md-sans); font-size: 10px; font-weight: 700; letter-spacing: .2px; color: #7a6210; background: rgba(201, 162, 39, 0.14); border: 1px solid rgba(201, 162, 39, 0.35); border-radius: 999px; white-space: nowrap; } ul.products li.product .wd-member-chip .woocommerce-Price-amount { font-weight: 700; } /* Store-first click & collect badge: compact one-line in-stock cue (the verbose "free click & collect" line stays on the single-product page). The __main override beats the plugin's 14px (mds.css) on specificity — at 14px the stock line rivals the title for attention. */ ul.products li.product .mds-badge { font-size: 8.5px; line-height: 1.3; min-height: 1.3em; margin: 0 0 8px; display: flex; flex-direction: column; align-items: center; justify-content: center; } ul.products li.product .mds-badge__main { font-size: 10.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; } /* Hide the alt line only when in stock (the "ready to collect" note is redundant on a tile); keep it for the out-of-stock state so the "available for delivery" way-forward always shows — never a dead end. */ ul.products li.product .mds-badge--in .mds-badge__alt { display: none; } ul.products li.product .mds-badge--out .mds-badge__alt { font-size: 8.5px; font-weight: 600; color: #1B7A5A; margin-top: 2px; } /* Add to cart: full-width, pinned to the bottom of every card. */ ul.products li.product .button { margin: auto 0 0; width: 100%; padding: 8px 8px; font-size: 11px; letter-spacing: .6px; } .onsale { background: var(--md-red) !important; color: var(--md-paper) !important; border-radius: 20px !important; font-family: var(--md-sans); font-size: 9px !important; font-weight: 600; letter-spacing: 1px; padding: 3px 7px !important; min-height: 0 !important; min-width: 0 !important; } ul.products li.product .star-rating { font-size: 11px; margin: 0 auto 5px; } /* Full-width product archives (hide sidebar) */ .woocommerce-page .widget-area, .archive .widget-area { display: none; } .woocommerce-page .content-area, .archive .content-area { width: 100%; float: none; } /* ============ Single product page ============ Catalog photos are small/portrait and the gallery slider isn't active, so the raw otherwise renders as a narrow stretched strip left-aligned in a full-width column (with a dead zoom trigger floating in the gap). Frame it in a clean contained square — matching the archive tiles — and drop the non-functional zoom control. */ .single-product .woocommerce-product-gallery__image { background: #fff; border: 1px solid var(--md-border); border-radius: 16px; aspect-ratio: 1 / 1; display: flex; align-items: center; justify-content: center; padding: 24px; box-sizing: border-box; overflow: hidden; } .single-product .woocommerce-product-gallery__image a { display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; } .single-product .woocommerce-product-gallery__image img { width: auto !important; height: auto !important; max-width: 100% !important; max-height: 100% !important; object-fit: contain; margin: 0 !important; } .single-product .woocommerce-product-gallery__trigger { display: none !important; } /* Mobile: the gallery spans the full column width, centered above the summary. */ @media (max-width: 768px) { .single-product .woocommerce-product-gallery { float: none !important; width: 100% !important; max-width: 440px; margin: 0 auto 8px !important; } .single-product .woocommerce-product-gallery__wrapper { margin: 0 !important; } } /* ============ Banner strip (quote — serif moment on paper) ============ */ .wd-banner { position: relative; min-height: 320px; display: flex; align-items: center; justify-content: center; text-align: center; overflow: hidden; background: var(--md-paper); } .wd-banner__art { position: absolute; inset: 0; width: 100%; height: 100%; } .wd-banner--photo { background-size: cover; background-position: center; } .wd-banner blockquote { position: relative; z-index: 2; font-family: var(--md-serif); font-size: 30px; color: var(--md-ink); border: 0; margin: 0; padding: 0 24px; max-width: 760px; background: transparent; } .wd-banner cite { display: block; margin-top: 14px; font-family: var(--md-sans); font-size: 12px; letter-spacing: 2px; text-transform: uppercase; font-style: normal; color: var(--md-red); } /* ============ Membership CTA band (ink + seigaiha) ============ */ .wd-membership { color: var(--md-paper-soft); text-align: center; position: relative; overflow: hidden; } .wd-membership .wd-container { position: relative; z-index: 1; } .wd-membership .wd-kicker { color: var(--md-gold); } .wd-membership .wd-section-title { color: var(--md-paper); margin-bottom: 18px; } .wd-membership__icon { display: inline-block; color: var(--md-gold); margin-bottom: 14px; } .wd-membership__icon svg { width: 46px; height: 46px; } .wd-membership__sub { font-family: var(--md-serif); font-size: 19px; color: var(--md-paper-soft); max-width: 560px; margin: 0 auto 30px; } /* ============ Stores (click & collect) ============ */ .wd-stores-section { background: var(--md-paper); } .wd-stores__sub { text-align: center; max-width: 560px; margin: -24px auto 40px; } .wd-stores { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; } .wd-store { background: var(--md-cream); border: 1px solid var(--md-border); border-top: 3px solid var(--md-red); padding: 34px 30px 30px; text-align: center; } .wd-store__icon { color: var(--md-red); display: inline-block; } .wd-store__icon svg { width: 34px; height: 34px; } .wd-store h3 { font-size: 19px; margin: 12px 0 10px; } .wd-store p { margin: 0 0 8px; } .wd-store__hours { color: var(--md-jade); font-weight: 600; display: inline-flex; align-items: center; gap: 7px; } .wd-store__hours svg { width: 17px; height: 17px; } @media (max-width: 920px) { .wd-stores { grid-template-columns: 1fr; max-width: 480px; margin: 0 auto; } } /* ============ Store locator ("Where is Mr Dad?") — live map + switchable stores ============ */ .wd-locator__grid { display: grid; grid-template-columns: 1.45fr 1fr; gap: 28px; align-items: stretch; } .wd-locator__map { position: relative; min-height: 452px; border-radius: 16px; overflow: hidden; border: 1px solid var(--md-border); box-shadow: 0 20px 44px rgba(20, 16, 8, 0.12); } .wd-locator__map iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; display: block; } .wd-locator__list { display: flex; flex-direction: column; gap: 14px; } .wd-locator__store { position: relative; background: var(--md-cream); border: 1px solid var(--md-border); border-radius: 14px; overflow: hidden; transition: border-color 200ms ease, box-shadow 200ms ease, transform 200ms ease; } .wd-locator__store:hover { transform: translateY(-2px); box-shadow: 0 12px 26px rgba(20, 16, 8, 0.1); } /* Selected store: a soft red-tinted surface + gentle red glow (no template-y left accent bar) — reads as "chosen" in a cleaner, more modern way. */ .wd-locator__store.is-active { border-color: var(--md-red); background: #fbf1ec; box-shadow: 0 16px 34px rgba(200, 16, 46, 0.15); } .wd-locator__switch { display: flex; gap: 14px; align-items: flex-start; width: 100%; text-align: left; padding: 18px 20px 12px; cursor: pointer; font-family: inherit; } /* Neutralise the theme's global red-pill button styling in every state — the store toggle is a plain surface, not a button pill (class+pseudo outspecifies button:hover). */ .wd-locator__switch, .wd-locator__switch:hover, .wd-locator__switch:focus, .wd-locator__switch:active { background: transparent; color: inherit; border: 0; border-radius: 0; box-shadow: none; outline: none; } .wd-locator__switch:focus-visible { outline: 2px solid var(--md-gold); outline-offset: -2px; } .wd-locator__pin { flex: 0 0 auto; width: 48px; height: 48px; border-radius: 50%; background: #fff; border: 2px solid var(--md-gold); display: flex; align-items: flex-end; justify-content: center; overflow: hidden; transition: border-color 200ms ease; } .wd-locator__pin img { width: 42px; height: auto; display: block; } .wd-locator__store.is-active .wd-locator__pin { border-color: var(--md-red); } .wd-locator__info { display: flex; flex-direction: column; gap: 3px; } .wd-locator__name { font-family: var(--md-display); font-weight: 600; font-size: 17px; letter-spacing: 0.04em; text-transform: uppercase; color: var(--md-ink); line-height: 1.15; } .wd-locator__addr { font-size: 13px; color: var(--md-body); line-height: 1.45; } .wd-locator__hours { display: inline-flex; align-items: center; gap: 6px; color: var(--md-jade); font-weight: 600; font-size: 13px; margin-top: 3px; } .wd-locator__hours svg { width: 15px; height: 15px; } .wd-locator__dir { display: inline-block; margin: 0 20px 15px 82px; font-family: var(--md-display); font-weight: 600; font-size: 12px; letter-spacing: 1px; text-transform: uppercase; color: var(--md-red); text-decoration: none; } .wd-locator__dir:hover { color: var(--md-red-dark); } @media (max-width: 900px) { .wd-locator__grid { grid-template-columns: 1fr; } .wd-locator__map { min-height: 320px; order: 2; } .wd-locator__list { order: 1; } } /* ============ Newsletter band (lucky red) ============ */ .wd-newsletter { background: var(--md-red); color: var(--md-paper); text-align: center; position: relative; overflow: hidden; } .wd-newsletter .wd-container { position: relative; z-index: 1; } .wd-newsletter .wd-kicker { color: rgba(245, 235, 216, 0.75); } .wd-newsletter .wd-section-title { color: var(--md-paper); margin-bottom: 28px; } .wd-newsletter__sub { color: rgba(245, 235, 216, 0.9); margin: -18px 0 26px; text-align: center; } .wd-newsletter__form { display: flex; justify-content: center; gap: 12px; flex-wrap: wrap; } .wd-newsletter__form input[type="email"] { width: 360px; max-width: 90vw; border: 1px solid rgba(245, 235, 216, 0.45); background: rgba(245, 235, 216, 0.1); color: var(--md-paper); border-radius: 30px; padding: 12px 24px; font-family: var(--md-sans); } .wd-newsletter__form input[type="email"]::placeholder { color: rgba(245, 235, 216, 0.65); } .wd-newsletter__form .wd-btn { background: var(--md-paper); color: var(--md-red); border-color: var(--md-paper); } .wd-newsletter__form .wd-btn:hover { background: #fff; color: var(--md-red-dark); } /* ============ Footer: ink + seigaiha, gold column titles ============ */ .site-footer { color: var(--md-paper-soft); border-top: 2px solid var(--md-gold); } .wd-footer-cols { display: grid; /* Stores get a double-width column and flow 2-up inside it (see .wd-footer-stores): with four stores a single stack ran ~500px while its neighbours ended at ~280, leaving the right two-thirds of the footer empty. */ grid-template-columns: 1.15fr 1.9fr 1fr 0.85fr; gap: 40px; padding: 56px 0 36px; align-items: start; } .wd-footer-cols h3 { font-size: 15px; letter-spacing: 2px; color: var(--md-gold); margin: 0 0 18px; } .wd-footer-cols ul { list-style: none; margin: 0; padding: 0; } .wd-footer-cols li { margin-bottom: 10px; } /* #colophon (the footer id) beats Storefront's customizer rule `.site-footer a:not(.button):not(.components-button){color:#333}` (0,0,3,1), which otherwise renders links as dark grey on the ink footer (~1.5:1). */ #colophon .wd-footer-cols a { color: rgba(245, 235, 216, 0.85); text-decoration: none; } #colophon .wd-footer-cols a:hover { color: var(--md-gold); } .wd-footer-brand { display: flex; align-items: center; gap: 14px; margin-bottom: 14px; } .wd-footer-brand__mascot { width: 64px; height: auto; } .wd-footer-brand__wordmark { width: 155px; height: auto; } /* Two stores per row — keeps the column's height near its neighbours' as stores are added */ .wd-footer-stores { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4px 28px; } .wd-footer-stores li { margin-bottom: 16px; } .wd-footer-stores strong { color: var(--md-paper); display: block; margin-bottom: 2px; } .wd-footer-hours { color: var(--md-gold); } .wd-footer-bottom { border-top: 1px solid rgba(201, 162, 39, 0.3); padding: 22px 0; font-size: 12px; letter-spacing: 1px; color: rgba(245, 235, 216, 0.6); display: flex; justify-content: space-between; flex-wrap: wrap; gap: 8px; } #colophon .wd-footer-bottom a { color: rgba(245, 235, 216, 0.78); } .site-info { display: none; } /* replaced by wd-footer-bottom */ /* ============ Story section ============ */ .wd-story .wd-container { display: grid; grid-template-columns: 1.1fr 1fr; gap: 64px; align-items: center; } .wd-story .wd-kicker, .wd-story .wd-section-title { text-align: left; } .wd-story__art { position: relative; padding-bottom: 56px; } .wd-story__art img, .wd-story__art > svg { display: block; width: 100%; height: auto; } .wd-story__art .wd-story__inset { position: absolute; right: -18px; bottom: 0; width: 46%; border: 6px solid var(--md-cream); box-shadow: 0 18px 40px rgba(0, 0, 0, 0.18); } .wd-story p { max-width: 480px; } .wd-story__lede { margin-bottom: 18px; } /* Rounded, softly shadowed illustration frame */ .wd-story__art > svg.wd-story-svg, .wd-story__art > img { border-radius: 18px; box-shadow: 0 24px 50px rgba(20, 16, 8, 0.22); } /* --- Living night-shop illustration: crisp window flicker + gentle ambient breathe --- */ .wd-story-win, .wd-story-lamp { animation: wd-lit 4.8s ease-in-out infinite; animation-delay: var(--d, 0s); } @keyframes wd-lit { 0%, 100% { opacity: 0.85; } 42% { opacity: 1; } 68% { opacity: 0.72; } } .wd-story-halo, .wd-story-spill { animation: wd-breathe 7s ease-in-out infinite; animation-delay: var(--d, 0s); } @keyframes wd-breathe { 0%, 100% { opacity: 0.6; } 50% { opacity: 1; } } .wd-story-star { animation: wd-twinkle 3.2s ease-in-out infinite; animation-delay: var(--d, 0s); } @keyframes wd-twinkle { 0%, 100% { opacity: 0.2; } 50% { opacity: 0.95; } } .wd-story-moon { filter: drop-shadow(0 0 7px rgba(244, 194, 90, 0.45)); animation: wd-moonglow 7s ease-in-out infinite; } @keyframes wd-moonglow { 0%, 100% { opacity: 0.55; } 50% { opacity: 0.9; } } .wd-story-lanterns { filter: drop-shadow(0 0 6px rgba(248, 208, 116, 0.4)); } @media (prefers-reduced-motion: reduce) { .wd-story-win, .wd-story-lamp, .wd-story-halo, .wd-story-spill, .wd-story-star, .wd-story-moon { animation: none; } } /* --- Stat strip: scannable figures under the story copy --- */ .wd-story__stats { display: flex; gap: 34px; flex-wrap: wrap; margin: 26px 0 30px; } .wd-stat { display: flex; flex-direction: column; gap: 2px; } .wd-stat + .wd-stat { padding-left: 34px; border-left: 1px solid var(--md-border); margin-left: -12px; } .wd-stat__num { font-family: var(--md-display); font-weight: 700; font-size: 34px; line-height: 1; color: var(--md-red); letter-spacing: 0.01em; font-variant-numeric: tabular-nums; } .wd-stat__label { font-family: var(--md-sans); font-size: 12px; font-weight: 600; letter-spacing: 1.5px; text-transform: uppercase; color: var(--md-body); } @media (max-width: 480px) { .wd-story__stats { gap: 20px; } .wd-stat + .wd-stat { padding-left: 20px; margin-left: 0; } .wd-stat__num { font-size: 28px; } } @media (max-width: 1024px) { .wd-story .wd-container { grid-template-columns: 1fr; } } /* ============ Member price hints (loyalty plugin output) ============ */ .wd-member-hint { background: var(--md-cream); border-left: 3px solid var(--md-red); padding: 10px 16px; font-size: 13px; } .wd-member-hint .woocommerce-Price-amount { color: var(--md-red); font-weight: 600; } .wd-member-badge { background: var(--md-red); color: var(--md-paper); border-radius: 30px; padding: 8px 18px; display: inline-block; font-size: 13px; letter-spacing: 0.5px; } /* ============ WooCommerce form fields (login · register · checkout) ============ Storefront defaults are flat grey boxes; give every field the brand's clean, rounded, bordered look with a gold focus ring. */ .woocommerce form .form-row input.input-text, .woocommerce form .form-row textarea, .woocommerce-form input.input-text, .woocommerce-account .woocommerce-EditAccountForm input.input-text, .woocommerce-checkout .form-row input.input-text, .woocommerce-checkout .form-row textarea, .woocommerce form .form-row select, .select2-container--default .select2-selection--single { background: #fff !important; border: 1px solid var(--md-border) !important; border-radius: 10px !important; padding: 12px 14px; min-height: 46px; font-family: var(--md-sans); font-size: 15px; color: var(--md-ink); box-shadow: none; box-sizing: border-box; } .woocommerce form .form-row input.input-text:focus, .woocommerce form .form-row textarea:focus, .woocommerce-form input.input-text:focus, .woocommerce-checkout .form-row input.input-text:focus { outline: none; border-color: var(--md-gold) !important; box-shadow: 0 0 0 3px rgba(201, 162, 39, 0.18) !important; } .select2-container--default .select2-selection--single { display: flex; align-items: center; } /* ============ Register-form membership pitch (loyalty plugin output) ============ */ .wd-register-pitch { background-color: var(--md-ink); background-image: var(--md-seigaiha); color: var(--md-paper); border: 1px solid var(--md-gold); border-radius: 14px; padding: 18px 22px; margin: 0 0 24px; } .wd-register-pitch__title { display: block; font-family: var(--md-display); text-transform: uppercase; letter-spacing: 1px; color: var(--md-gold); font-size: 14px; margin-bottom: 12px; } .wd-register-pitch__perks { list-style: none; margin: 0 0 12px; padding: 0; } .wd-register-pitch__perks li { position: relative; padding-left: 24px; margin-bottom: 7px; font-size: 13px; color: rgba(245, 235, 216, 0.92); } .wd-register-pitch__perks li::before { content: "✓"; position: absolute; left: 0; color: var(--md-jade); font-weight: 700; } .wd-register-pitch__foot { margin: 0; font-size: 12px; color: var(--md-paper-soft); } /* ============ Responsive ============ */ @media (max-width: 1024px) { .wd-hero__title { font-size: 44px; } .wd-footer-cols { grid-template-columns: 1fr 1fr; } } @media (max-width: 640px) { /* iOS Safari zooms (and stays zoomed) on inputs under 16px — the classic "page doesn't fit anymore" complaint. Keep every field at 16px. */ input[type="text"], input[type="email"], input[type="tel"], input[type="password"], input[type="number"], input[type="search"], textarea, select { font-size: 16px !important; } /* long tables + unbreakable strings scroll inside their box, not the page */ .mdl-dash table, .woocommerce-MyAccount-content .shop_table { display: block; overflow-x: auto; } code { word-break: break-all; } .wd-topbar .wd-container { justify-content: center; } .wd-topbar span + span { display: none; } /* one clean line on phones */ .wd-section { padding: 48px 0; } .wd-section-title { font-size: 28px; } .wd-hero { min-height: 460px; } .wd-hero__title { font-size: 34px; } .wd-cats { gap: 24px; } .wd-cat { width: 140px; } .wd-cat__disc { width: 130px; height: 130px; } .wd-cat__disc svg { width: 56px; height: 56px; } .wd-footer-cols { grid-template-columns: 1fr; padding: 40px 0 20px; } /* the footer is a single column here, so two stores side by side leaves ~160px each — names wrap mid-phrase and the longest clips. One store per row below this width. */ .wd-footer-stores { grid-template-columns: 1fr; } .site-header .col-full { flex-wrap: wrap; gap: 12px; } } @media (prefers-reduced-motion: reduce) { * { transition: none !important; animation: none !important; } } /* ============ Mobile sticky checkout bar (cart page, Hema-style) ============ Total + Checkout pinned to the bottom so checkout is always one tap away; takes the place of the tab bar on the cart page. Mobile-only. */ .mrdad-cartbar { display: none; } @media (max-width: 768px) { /* the sticky bar is the single checkout CTA — hide the Cart Block's in-flow button */ .woocommerce-cart .wc-block-cart__submit, .woocommerce-cart .wp-block-woocommerce-proceed-to-checkout-block { display: none !important; } /* Stacks ABOVE the tab bar (fx JS publishes --mrdad-tabbar-h) — hiding the tabs here read as the app chrome vanishing when you tapped Cart. The tab bar's own safe-area padding sits below this bar, so no extra inset needed. */ .mrdad-cartbar { display: flex; align-items: center; gap: 14px; position: fixed; left: 0; right: 0; bottom: var(--mrdad-tabbar-h, 62px); z-index: 991; background: #fff; border-top: 1px solid var(--md-border); padding: 10px 16px; box-shadow: 0 -6px 20px rgba(20, 16, 8, 0.08); } .mrdad-cartbar__total { display: flex; flex-direction: column; line-height: 1.2; } .mrdad-cartbar__label { font-size: 11px; color: #8a8375; font-family: var(--md-sans); } .mrdad-cartbar__amt { font-family: var(--md-sans); font-size: 19px; font-weight: 700; color: var(--md-ink); } .mrdad-cartbar__amt .woocommerce-Price-amount { color: var(--md-ink); } .mrdad-cartbar__amt small { font-weight: 400; font-size: 11px; color: #8a8375; } .mrdad-cartbar__btn { margin-left: auto; flex: 0 0 auto; background: var(--md-red); color: #fff; font-family: var(--md-sans); font-weight: 700; font-size: 14px; letter-spacing: .5px; padding: 13px 30px; border-radius: 999px; text-decoration: none; white-space: nowrap; } .mrdad-cartbar__btn:hover { background: var(--md-red-dark); color: #fff; } /* clearance for BOTH stacked bars (checkout bar + tab bar) */ body.woocommerce-cart { padding-bottom: calc(132px + env(safe-area-inset-bottom, 0px)); } } /* ============ Mobile sticky add-to-cart bar (single product, Hema-style) ============ Price + Add to Cart pinned to the bottom so the primary action is always reachable. Stacks ABOVE the tab bar, exactly like the cart's checkout bar — this page used to hide .mrdad-tabbar outright, which stripped the app chrome (Home/Shop/Card/Cart/ Account) at the moment the shopper is deciding to buy. Mobile-only. */ .mrdad-pdpbar { display: none; } @media (max-width: 768px) { .mrdad-pdpbar { display: flex; align-items: center; gap: 12px; /* fx JS publishes --mrdad-tabbar-h off the live tab bar; the fallback covers the pre-JS frame. The tab bar's own safe-area padding sits below this bar, so this one needs no inset of its own. */ position: fixed; left: 0; right: 0; bottom: var(--mrdad-tabbar-h, 62px); z-index: 991; background: rgba(255, 255, 255, 0.97); -webkit-backdrop-filter: blur(12px) saturate(1.4); backdrop-filter: blur(12px) saturate(1.4); border-top: 1px solid var(--md-border); padding: 8px 14px; box-shadow: 0 -6px 20px rgba(20, 16, 8, 0.08); } .mrdad-pdpbar__cart { display: flex; align-items: center; justify-content: center; flex: 0 0 auto; width: 46px; height: 46px; color: var(--md-ink); border: 1px solid var(--md-border); border-radius: 12px; } .mrdad-pdpbar__cart svg { width: 23px; height: 23px; } .mrdad-pdpbar__price { flex: 1 1 auto; font-family: var(--md-sans); font-weight: 700; font-size: 17px; color: var(--md-red); line-height: 1.1; } .mrdad-pdpbar__price del { color: #9a9484; font-weight: 400; font-size: 13px; margin-right: 4px; } .mrdad-pdpbar__price ins { text-decoration: none; } .mrdad-pdpbar__btn { flex: 0 0 auto; background: var(--md-red); color: #fff; border: 0; font-family: var(--md-sans); font-weight: 700; font-size: 14px; letter-spacing: .5px; padding: 13px 26px; border-radius: 999px; cursor: pointer; white-space: nowrap; } .mrdad-pdpbar__btn:hover { background: var(--md-red-dark); } /* clearance for BOTH stacked bars (add-to-cart bar + tab bar) — same stack height as the cart page, whose two bars are built to the same 66px rhythm */ body.single-product { padding-bottom: calc(132px + env(safe-area-inset-bottom, 0px)); } /* the tab-bar block lifts these to 74px to clear one bar; on the product page there are two, so push them above the add-to-cart bar as well or they hide behind it. */ body.single-product .mrdad-countdown, body.single-product .mrdad-toasts { bottom: calc(var(--mrdad-tabbar-h, 62px) + 72px + env(safe-area-inset-bottom, 0px)) !important; } } /* ============ Mobile "King Kong" category zone (Hema-style) ============ A tight grid of round category-icon shortcuts at the top of the mobile home, right under the search — shopping entry points before the editorial hero. Mobile-only; desktop keeps the hero-first layout. */ .mrdad-kk-zone { display: none; } @media (max-width: 768px) { .mrdad-kk-zone { display: grid; grid-template-columns: repeat(4, 1fr); gap: 15px 6px; padding: 16px 14px 20px; background: var(--md-cream); border-bottom: 1px solid var(--md-border); } .mrdad-kk { display: flex; flex-direction: column; align-items: center; gap: 7px; text-decoration: none; } .mrdad-kk__disc { width: 58px; height: 58px; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: #fff; border: 1px solid var(--md-border); color: var(--md-red); transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease; } .mrdad-kk__disc svg { width: 29px; height: 29px; } /* "All products" is the one non-photo tile — a soft gold ground + ring behind the duotone full-basket glyph marks it as the brand's own door, not a missing photo */ .mrdad-kk__disc--all { background: linear-gradient(155deg, #fffdf7, rgba(201, 162, 39, 0.18)); border-color: rgba(201, 162, 39, 0.45); } .mrdad-kk__disc--all svg { width: 31px; height: 31px; } /* Real photography in the discs, one consistent treatment: every photo fills the circle edge-to-edge (object-fit: cover). A single-product photo is pre-cropped server-side to a content-aware square (inc/chip-crop.php) before it ever reaches this CSS — a plain WooCommerce thumbnail is square-padded to its LONGER content dimension (built for rectangular tiles), which still leaves a visible blank band on a non-square product's shorter axis once masked into a circle; a fixed CSS zoom can't correct that because the blank amount differs per photo. No client-side crop needed here — the delivered image is already tight on both axes. */ .mrdad-kk__disc { overflow: hidden; } .mrdad-kk__disc img { width: 100%; height: 100%; border-radius: 50%; display: block; object-fit: cover; } /* Cutout chips (studio background extracted, inc/chip-crop.php) sit on the brand cream ground rather than the plain white disc — the point of the knockout is that no white box remains. `contain` because the PNG is already scaled and centred. */ .mrdad-kk__disc--cutout { background: var(--md-cutout-ground); } .mrdad-kk__disc--cutout img { object-fit: contain; } .mrdad-kk:active .mrdad-kk__disc { transform: scale(.93); } .mrdad-kk__name { font-family: var(--md-sans); font-size: 10.5px; font-weight: 600; letter-spacing: .1px; color: var(--md-ink); text-align: center; line-height: 1.15; max-width: 76px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* the King Kong zone is the mobile category entry — drop the tall photo "Shop by Category" showcase, which repeats the same 12 categories. */ .wd-showcase { display: none; } } /* ============ Mobile aisle rail on archives (HungryPanda-style) ============ Horizontal scroll of every aisle, pinned just under the sticky header so shoppers switch categories in place. --mrdad-header-h is published by storefront-fx.js (the header compacts on scroll, so the offset is live-measured). Mobile-only. */ .mrdad-rail { display: none; } @media (max-width: 768px) { .mrdad-rail { display: flex; gap: 4px; overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; position: sticky; top: var(--mrdad-header-h, 96px); z-index: 980; background: var(--md-cream); border-bottom: 1px solid var(--md-border); padding: 8px 8px 6px; } .mrdad-rail::-webkit-scrollbar { display: none; } .mrdad-rail__item { flex: 0 0 auto; width: 66px; display: flex; flex-direction: column; align-items: center; gap: 4px; text-decoration: none; padding: 2px 0 4px; border-radius: 10px; } .mrdad-rail__disc { width: 44px; height: 44px; border-radius: 50%; overflow: hidden; display: flex; align-items: center; justify-content: center; background: #fff; border: 1px solid var(--md-border); color: var(--md-red); transition: transform .15s ease, border-color .15s ease, background .15s ease; } .mrdad-rail__disc svg { width: 22px; height: 22px; } /* Real photo in the rail disc, filling it edge-to-edge (object-fit: cover) — a single-product photo arrives pre-cropped server-side (inc/chip-crop.php), content- aware on both axes, so no client-side zoom is needed here. A photo can't invert colour the way the icon fill does, so "active" becomes a red ring instead of a solid-red disc. */ .mrdad-rail__disc img { width: 44px; height: 44px; border-radius: 50%; display: block; object-fit: cover; } .mrdad-rail__disc--cutout { background: var(--md-cutout-ground); } .mrdad-rail__disc--cutout img { object-fit: contain; } .mrdad-rail__name { font-family: var(--md-sans); font-size: 11px; font-weight: 600; color: var(--md-ink); line-height: 1.1; text-align: center; max-width: 70px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .mrdad-rail__item:active .mrdad-rail__disc { transform: scale(.93); } /* icon discs invert to solid red; a photo can't invert, so it gets a red ring instead — this must win over the icon-invert rule above it (same specificity, later wins). */ .mrdad-rail__item.is-active .mrdad-rail__disc { background: var(--md-red); border-color: var(--md-red); color: var(--md-paper); } .mrdad-rail__item.is-active .mrdad-rail__disc--collage, .mrdad-rail__item.is-active .mrdad-rail__disc--product { background: #fff; border-color: var(--md-red); box-shadow: 0 0 0 2px var(--md-red); } .mrdad-rail__item.is-active .mrdad-rail__name { color: var(--md-red); font-weight: 700; } } /* ============ Mobile sort pills on archives (HungryPanda-style) ============ Tappable ordering under the aisle rail; replaces the "Default sorting" dropdown on phones (which stays on desktop). */ .mrdad-sort { display: none; } @media (max-width: 768px) { .mrdad-sort { display: flex; gap: 8px; overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; padding: 10px 14px 4px; } .mrdad-sort::-webkit-scrollbar { display: none; } .mrdad-sort__pill { flex: 0 0 auto; padding: 6px 14px; border-radius: 999px; font-family: var(--md-sans); font-size: 12px; font-weight: 600; letter-spacing: .2px; color: var(--md-ink); background: #fff; border: 1px solid var(--md-border); text-decoration: none; transition: background .15s ease, color .15s ease, border-color .15s ease; } .mrdad-sort__pill.is-active { background: var(--md-red); border-color: var(--md-red); color: var(--md-paper); } /* pills replace the dropdown on phones */ .woocommerce-ordering { display: none !important; } } /* ============ Load-more on archives (continuous scroll) ============ JS swaps WooCommerce's numbered pagination for this button and auto-fires it near the viewport; without JS the pagination renders untouched. All viewports — two rows per click beats page-flipping on desktop too. */ .mrdad-js-more .woocommerce-pagination { display: none !important; } .mrdad-more { display: block; margin: 4px auto 22px; padding: 11px 34px; font-family: var(--md-sans); font-size: 13px; font-weight: 600; letter-spacing: .4px; color: var(--md-red); background: #fff; border: 1.5px solid var(--md-red); border-radius: 999px; cursor: pointer; transition: background .15s ease, color .15s ease; } .mrdad-more:hover { background: var(--md-red); color: var(--md-paper); } .mrdad-more.is-loading { opacity: .55; pointer-events: none; } @media (max-width: 768px) { .mrdad-more { width: calc(100% - 28px); } } /* ============ Checkout membership upsell (rendered by the loyalty plugin) ============ The "join free, save $X on this order" card above the Blocks checkout — gold ground, red CTA, the concrete number doing the selling. All viewports. */ .wd-checkout-upsell { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 2px 14px; max-width: 1088px; margin: 8px auto 18px; padding: 13px 16px; background: rgba(201, 162, 39, 0.12); border: 1px solid rgba(201, 162, 39, 0.4); border-radius: 12px; } .wd-checkout-upsell__title { font-family: var(--md-sans); font-size: 15px; font-weight: 700; color: var(--md-ink); } .wd-checkout-upsell__title .woocommerce-Price-amount { color: var(--md-red); } .wd-checkout-upsell__sub { grid-column: 1; font-family: var(--md-sans); font-size: 12px; color: #6d6654; } .wd-checkout-upsell__cta { grid-column: 2; grid-row: 1 / span 2; align-self: center; padding: 9px 16px; border-radius: 999px; background: var(--md-red); color: var(--md-paper) !important; font-family: var(--md-sans); font-size: 12.5px; font-weight: 600; letter-spacing: .3px; text-decoration: none; white-space: nowrap; } @media (max-width: 520px) { .wd-checkout-upsell { grid-template-columns: 1fr; } .wd-checkout-upsell__cta { grid-column: 1; grid-row: auto; justify-self: start; margin-top: 8px; } } /* ============ Mobile picks strip (HungryPanda "Daily Deals" slot) ============ Horizontal scroll-snap shelf of the featured products on the mobile home. The inner markup is the ordinary product loop, so tiles keep the member chip, + button and AJAX add — this CSS only turns the grid into a rail. Mobile-only. */ .mrdad-picks { display: none; } @media (max-width: 768px) { .mrdad-picks { display: block; padding: 14px 0 4px; background: var(--md-cream); border-bottom: 1px solid var(--md-border); } .mrdad-picks__head { display: flex; align-items: baseline; justify-content: space-between; padding: 0 14px 10px; } .mrdad-picks__title { font-size: 17px; margin: 0; letter-spacing: .04em; } .mrdad-picks__all { font-family: var(--md-sans); font-size: 12px; font-weight: 600; color: var(--md-red); text-decoration: none; } .mrdad-picks ul.products { display: flex !important; /* override the grid — this shelf scrolls */ grid-template-columns: none; overflow-x: auto; -webkit-overflow-scrolling: touch; scroll-snap-type: x mandatory; scrollbar-width: none; gap: 10px; padding: 0 14px 14px; margin: 0; } .mrdad-picks ul.products::-webkit-scrollbar { display: none; } .mrdad-picks ul.products li.product { flex: 0 0 152px; width: 152px !important; scroll-snap-align: start; } /* the strip is a teaser — stock line is noise at this size */ .mrdad-picks ul.products li.product .mds-badge { display: none; } } /* ============ Mobile tile compaction (HungryPanda-style) ============ On phones the tile becomes price-forward and left-aligned: big red price at bottom-left, a round + button at bottom-right, chip + stock line as quiet metadata. The DOM is unchanged (price lives inside the product link; the button is a sibling), so the button is absolutely pinned and the card reserves bottom padding for the price row. */ @media (max-width: 768px) { ul.products li.product { text-align: left; padding: 10px 10px 12px; } ul.products li.product .woocommerce-LoopProduct-link { align-items: flex-start; flex: 1 1 auto; } ul.products li.product .woocommerce-loop-product__title { font-size: 12px; margin-bottom: 4px; } ul.products li.product .wd-member-chip { margin: 0 0 4px; } ul.products li.product .mds-badge { align-items: flex-start; margin: 0 0 6px; padding-right: 44px; /* the badge sinks lowest — clear the + button */ box-sizing: border-box; max-width: 100%; } ul.products li.product .price { margin: auto 0 0; /* sink to the bottom of the link column */ font-size: 16.5px; padding-right: 44px; /* clear the + button */ } ul.products li.product .button.add_to_cart_button { position: absolute; right: 10px; bottom: 10px; width: 36px; height: 36px; padding: 0; margin: 0; border-radius: 50%; font-size: 0; letter-spacing: 0; display: flex; align-items: center; justify-content: center; } ul.products li.product .button.add_to_cart_button::before { content: '+'; font-size: 22px; font-weight: 600; line-height: 1; } ul.products li.product .button.add_to_cart_button.loading { opacity: .55; } /* WooCommerce appends a "View cart" link after a tile add — the tab-bar cart badge carries that message on mobile; the extra link just breaks the tile layout. */ ul.products li.product .added_to_cart { display: none; } /* Single product: the display-caps title renders three shouty lines at desktop size — phone gets a product-label scale instead. */ .single-product .product_title { font-size: 21px; line-height: 1.25; } } /* ============ Mobile bottom tab bar (Hema-style) ============ Fixed 5-tab bar on phones: Home · Shop · Card · Cart · Account. Replaces Storefront's default 3-icon handheld footer (hidden below). Desktop unaffected. */ .mrdad-tabbar { display: none; } @media (max-width: 768px) { .storefront-handheld-footer-bar { display: none !important; } .mrdad-tabbar { display: flex; position: fixed; left: 0; right: 0; bottom: 0; z-index: 990; background: rgba(255, 255, 255, 0.96); -webkit-backdrop-filter: blur(16px) saturate(1.4); backdrop-filter: blur(16px) saturate(1.4); border-top: 1px solid var(--md-border); padding: 6px 4px calc(6px + env(safe-area-inset-bottom, 0px)); box-shadow: 0 -6px 20px rgba(20, 16, 8, 0.06); } .mrdad-tab { flex: 1 1 0; display: flex; flex-direction: column; align-items: center; gap: 3px; padding: 5px 2px; text-decoration: none; color: #8a8375; font-family: var(--md-sans); transition: color .15s ease; } .mrdad-tab__ic-wrap { position: relative; display: flex; } .mrdad-tab__ic { width: 23px; height: 23px; } .mrdad-tab__label { font-size: 10px; letter-spacing: .2px; font-weight: 600; } .mrdad-tab.is-active { color: var(--md-red); } .mrdad-tab:active { transform: scale(.94); } /* member card tab: subtle standout as the brand's hero action */ .mrdad-tab--member.is-active { color: var(--md-gold); } /* cart count badge */ .mrdad-tab__badge { position: absolute; top: -5px; right: -8px; min-width: 16px; height: 16px; padding: 0 4px; border-radius: 8px; background: var(--md-red); color: #fff; font-size: 10px; font-weight: 700; line-height: 16px; text-align: center; } .mrdad-tab__badge[hidden] { display: none; } /* keep page content clear of the fixed bar */ body { padding-bottom: calc(60px + env(safe-area-inset-bottom, 0px)); } /* lift the bottom-right urgency/toast overlays above the tab bar */ .mrdad-countdown { bottom: calc(74px + env(safe-area-inset-bottom, 0px)) !important; } .mrdad-toasts { bottom: calc(74px + env(safe-area-inset-bottom, 0px)) !important; } } /* ============ PandaFresh browse (444.jpg): two-pane archives + list rows ============ Mobile shop archives only (body.mrdad-aisle-browse) — the picks strip and /specials/ shortcodes keep the tile layout. The rail now shows SUPER-AISLES (grouping config in inc/aisle-browse.php); the sidebar shows the group's aisles; products render as PandaFresh list rows: image left, name + save pill + price right, gold + button. */ /* Desktop: the wrapper must not disturb the existing flow; sidebar and chips hide. */ .mrdad-browse { display: contents; } .mrdad-aisles { display: none; } .mrdad-keep, .mrdad-savepill { display: none; } @media (max-width: 768px) { /* rail active state: the red disc alone carries it (site system — same as the home category discs). The gold label pill overflowed its column onto the neighbours and was off-system anyway (client: no colour bars). */ /* ---- Compact header zone (client: "a lot of wasted space") ---- Storefront's breadcrumb wrapper, display-size archive title and sorting wrapper carry fluid-vw margins tuned for a full desktop content column — on a 390px screen they added up to ~150px of pure chrome before a single product, on TOP of an aisle name that already repeats in the rail (active disc) and the sidebar (active card). Shrunk to a compact "Aisle name · N products" cluster instead — the h1 stays (SEO) but no longer needs to shout. */ .mrdad-aisle-browse .storefront-breadcrumb { padding-bottom: 0; margin-bottom: 6px; } .mrdad-aisle-browse header.woocommerce-products-header { margin-bottom: 0; } .mrdad-aisle-browse .woocommerce-products-header__title, .mrdad-aisle-browse h1.page-title { font-size: 19px; line-height: 1.2; margin: 0 0 3px; letter-spacing: .02em; } .mrdad-aisle-browse .storefront-sorting { margin: 0 0 10px; } .mrdad-aisle-browse .woocommerce-result-count { font-size: 11px; color: #8a8375; margin: 0 2px; float: none; } /* ---- two-pane shell ---- */ .mrdad-aisle-browse .mrdad-browse { display: flex; align-items: flex-start; gap: 10px; } /* The shelf-edge index: quiet warm ground, each aisle as glyph + label, the active aisle lifted on a white card with the brand red carrying icon and text. No accent strips (client), no heavy chrome — the original line art does the talking. */ .mrdad-aisles { display: flex; flex-direction: column; gap: 2px; flex: 0 0 104px; /* wide enough that "Condiment"/"Preserved" never break mid-word */ position: sticky; top: calc(var(--mrdad-header-h, 96px) + var(--mrdad-rail-h, 88px)); max-height: calc(100vh - var(--mrdad-header-h, 96px) - var(--mrdad-rail-h, 88px) - var(--mrdad-tabbar-h, 62px)); overflow-y: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; background: #f4ecda; border: 1px solid var(--md-border); border-radius: 14px; padding: 5px; } .mrdad-aisles::-webkit-scrollbar { display: none; } .mrdad-aisles__item { display: flex; flex-direction: column; align-items: center; gap: 3px; padding: 10px 6px 9px; text-decoration: none; text-align: center; border-radius: 11px; color: #6d6654; transition: background .15s ease, color .15s ease; overflow-wrap: break-word; /* backstop only — the column is sized so it never fires */ } .mrdad-aisles__ic { display: flex; color: inherit; overflow: hidden; border-radius: 50%; } .mrdad-aisles__ic svg { width: 21px; height: 21px; } /* Real photo thumbnails, one consistent treatment (client-reported: the product-cutout chips' white margin — a plain WC thumbnail is square-padded to its LONGER content dimension, so a wide-short or tall-narrow product still leaves a blank band on its shorter axis — read as a boxed "sticker" next to the collages' full-bleed art, and a fixed CSS zoom couldn't fix it because the blank amount differs per photo). Product photos now arrive pre-cropped server-side, content-aware on both axes (inc/chip-crop.php) — no client-side crop needed, just fill the circle. */ .mrdad-aisles__ic img { width: 34px; height: 34px; border-radius: 50%; display: block; object-fit: cover; } .mrdad-aisles__ic--cutout { background: var(--md-cutout-ground); } .mrdad-aisles__ic--cutout img { object-fit: contain; } .mrdad-aisles__item.is-active .mrdad-aisles__ic img { box-shadow: 0 0 0 2px var(--md-red); } .mrdad-aisles__label { font-family: var(--md-sans); font-size: 11.5px; font-weight: 600; line-height: 1.25; letter-spacing: .1px; max-width: 100%; } .mrdad-aisles__item:active { background: rgba(255, 255, 255, 0.6); } .mrdad-aisles__item.is-active { background: #fff; color: var(--md-red); box-shadow: 0 3px 10px rgba(20, 16, 8, 0.09); } .mrdad-aisles__item.is-active .mrdad-aisles__label { font-weight: 700; } .mrdad-aisle-browse .mrdad-browse ul.products { flex: 1 1 auto; min-width: 0; } /* ---- list rows (override the mobile tile compaction) ---- */ .mrdad-aisle-browse ul.products { display: block !important; margin: 0; } .mrdad-aisle-browse ul.products li.product { display: block; margin: 0 0 8px !important; padding: 10px; } .mrdad-aisle-browse ul.products li.product:hover { transform: none; box-shadow: none; } .mrdad-aisle-browse ul.products li.product .woocommerce-LoopProduct-link { display: grid; grid-template-columns: 88px minmax(0, 1fr); gap: 3px 10px; align-items: start; } .mrdad-aisle-browse ul.products li.product img, .mrdad-aisle-browse ul.products li.product svg.mrdad-ph { grid-column: 1; grid-row: 1 / span 8; width: 88px; margin: 0; } .mrdad-aisle-browse ul.products li.product .woocommerce-LoopProduct-link > :not(img):not(svg.mrdad-ph) { grid-column: 2; } .mrdad-aisle-browse ul.products li.product .woocommerce-loop-product__title { font-size: 13px; line-height: 1.35; min-height: 0; margin: 0; } /* the corner sale roundel duplicates the inline save pill in rows */ .mrdad-aisle-browse ul.products li.product .onsale { display: none; } .mrdad-keep { display: inline-block; justify-self: start; font-family: var(--md-sans); font-size: 9.5px; font-weight: 700; letter-spacing: .3px; color: #1c6f9c; background: rgba(28, 111, 156, 0.1); border: 1px solid rgba(28, 111, 156, 0.28); border-radius: 5px; padding: 1px 6px; margin: 0 0 2px; } .mrdad-savepill { display: inline-flex; justify-self: start; align-items: center; font-family: var(--md-sans); font-size: 10px; font-weight: 700; color: var(--md-red); background: rgba(200, 16, 46, 0.08); border: 1px solid rgba(200, 16, 46, 0.3); border-radius: 5px; padding: 1px 6px; margin: 3px 0 0; } .mrdad-aisle-browse ul.products li.product .wd-member-chip { justify-self: start; margin: 3px 0 0; max-width: calc(100% - 46px); /* never run under the + button */ } .mrdad-aisle-browse ul.products li.product .mds-badge { align-items: flex-start; margin: 2px 0 0; padding-right: 46px; /* the stock/store line sinks lowest — clear the + button */ } .mrdad-aisle-browse ul.products li.product .price { margin: 3px 0 0; font-size: 17px; padding-right: 48px; } .mrdad-aisle-browse ul.products li.product .price del { font-size: 12px; } /* gold + button (the PandaFresh action colour), bottom-right of the row/tile */ ul.products li.product .button.add_to_cart_button { background: var(--md-gold); color: var(--md-ink); border: 0; } ul.products li.product .button.add_to_cart_button:hover { background: #b8931f; color: var(--md-ink); } .mrdad-aisle-browse ul.products li.product .button.add_to_cart_button { /* 36px visible disc (client: 44 was covering the stock line), full 44px hit area via the transparent border — background-clip keeps the gold inside it */ right: 6px; bottom: 6px; width: 44px; height: 44px; border: 4px solid transparent; background-clip: padding-box; } } /* ============ PandaFresh floating cart bar (mobile shopping contexts) ============ Mascot bag + live item count/subtotal + status pill, floating above the tab bar (445.jpg's bottom bar). The whole is a WC cart fragment — AJAX adds refresh it. */ .mrdad-floatcart { display: none; } @media (max-width: 768px) { /* Transient: off-canvas by default (the Cart tab badge covers the steady state — client feedback on real estate); body.mrdad-floatcart-show flashes it in for a few seconds after an add-to-cart. */ .mrdad-floatcart { display: flex; align-items: center; gap: 11px; position: fixed; left: 10px; right: 10px; bottom: calc(var(--mrdad-tabbar-h, 62px) + 8px); z-index: 985; background: rgba(20, 20, 20, 0.94); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); border-radius: 999px; padding: 7px 9px 7px 6px; box-shadow: 0 8px 24px rgba(20, 16, 8, 0.28); text-decoration: none; /* transform-only hide/show: WC's fragment refresh writes an inline opacity onto the replaced node, so opacity is not a reliable channel here */ transform: translateY(calc(100% + var(--mrdad-tabbar-h, 62px) + 16px)); pointer-events: none; transition: transform .25s ease-out; } body.mrdad-floatcart-show .mrdad-floatcart { transform: none; pointer-events: auto; } .mrdad-floatcart__bag { position: relative; flex: 0 0 auto; width: 44px; height: 44px; border-radius: 50%; background: var(--md-gold); display: flex; align-items: center; justify-content: center; } .mrdad-floatcart__bag img { width: 34px; height: auto; display: block; } .mrdad-floatcart__badge { position: absolute; top: -3px; right: -5px; min-width: 17px; height: 17px; padding: 0 4px; border-radius: 9px; background: var(--md-red); color: #fff; font-family: var(--md-sans); font-size: 10.5px; font-weight: 700; line-height: 17px; text-align: center; } .mrdad-floatcart__label { flex: 1 1 auto; min-width: 0; font-family: var(--md-sans); font-size: 13px; color: var(--md-paper-soft); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .mrdad-floatcart__label strong { color: #fff; font-weight: 700; } .mrdad-floatcart__label .woocommerce-Price-amount { color: #fff; font-weight: 700; } .mrdad-floatcart__pill { flex: 0 0 auto; font-family: var(--md-sans); font-size: 11.5px; font-weight: 700; letter-spacing: .2px; padding: 8px 13px; border-radius: 999px; white-space: nowrap; } .mrdad-floatcart__pill.is-quiet { background: rgba(255, 255, 255, 0.14); color: var(--md-paper-soft); } .mrdad-floatcart__pill.is-go { background: var(--md-red); color: #fff; } .mrdad-floatcart:active { transform: scale(.985); } /* Toasts dock above the bar only WHILE it shows; no standing content clearance — a transient overlay costs no layout space. */ body.mrdad-floatcart-show .mrdad-countdown, body.mrdad-floatcart-show .mrdad-toasts { bottom: calc(140px + env(safe-area-inset-bottom, 0px)) !important; } } /* ============ PandaFresh store home (445.jpg): store card + membership tickets ============ Mobile-only additions above the King Kong grid; desktop keeps the editorial homepage. */ .mrdad-storecard, .mrdad-tickets, .mrdad-storeband { display: none; } @media (max-width: 768px) { /* Store photo band with a frosted-glass card over it (the 445.jpg banner overlap). Glass here matches the header/tab-bar frosting — a layer over imagery. The rgba ground alone keeps 4.5:1 ink contrast where backdrop-filter is unsupported. */ .mrdad-storeband { display: block; background-size: cover; background-position: center 35%; padding: 26px 14px 14px; } .mrdad-storecard { display: flex; align-items: center; gap: 12px; margin: 0; padding: 12px; background: rgba(252, 248, 238, 0.78); -webkit-backdrop-filter: blur(14px) saturate(1.3); backdrop-filter: blur(14px) saturate(1.3); border: 1px solid rgba(255, 255, 255, 0.55); border-radius: 14px; box-shadow: 0 8px 24px rgba(20, 16, 8, 0.18); } .mrdad-storecard__badge { flex: 0 0 auto; width: 52px; height: auto; } .mrdad-storecard__info { flex: 1 1 auto; min-width: 0; } .mrdad-storecard__name { font-family: var(--md-display); font-weight: 600; text-transform: uppercase; letter-spacing: .04em; font-size: 15px; color: var(--md-ink); line-height: 1.2; } .mrdad-storecard__meta { font-family: var(--md-sans); font-size: 11px; color: #6d6654; margin-top: 2px; line-height: 1.35; /* #6d6654 holds 4.5:1 on white at this size; #8a8375 does not */ } .mrdad-storecard__store { color: var(--md-red); font-weight: 700; } .mrdad-storecard__tag { display: inline-block; margin-top: 5px; padding: 2px 7px; font-family: var(--md-sans); font-size: 10px; font-weight: 600; color: #7a6210; background: rgba(201, 162, 39, 0.13); border-radius: 5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; } .mrdad-storecard__reviews { flex: 0 0 auto; display: flex; flex-direction: column; align-items: center; gap: 2px; font-family: var(--md-sans); font-size: 10px; font-weight: 700; color: var(--md-gold); text-decoration: none; padding: 4px 2px; } .mrdad-storecard__reviews svg { width: 20px; height: 20px; } /* ticket strip: coupon-notch chips in one scroll row */ .mrdad-tickets { display: flex; gap: 8px; overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; padding: 10px 14px 2px; } .mrdad-tickets::-webkit-scrollbar { display: none; } /* Site design system only (client feedback: no coloured edge bars): the same white hairline card as the product tiles, the member-chip gold tint for the member-price ticket, and the red pill fill — the site's one CTA treatment — for Join free. */ /* Tickets share the row: grow to fill it when the labels are short, shrink to their own text when they are long (min-width 0 + nowrap = shrink stops at the text, never mid- word). Three visitor tickets then fit a 390px phone in both languages; the row still scrolls if a member state ever carries more than fits. */ .mrdad-ticket { flex: 1 1 auto; display: flex; flex-direction: column; justify-content: center; min-width: 0; padding: 8px 14px; background: #fff; border: 1px solid var(--md-border); border-radius: 12px; text-decoration: none; line-height: 1.25; } .mrdad-ticket strong { font-family: var(--md-sans); font-size: 13.5px; font-weight: 700; color: var(--md-ink); white-space: nowrap; } .mrdad-ticket span { font-family: var(--md-sans); font-size: 10px; color: #6d6654; white-space: nowrap; } .mrdad-ticket--red { background: var(--md-red); border-color: var(--md-red); } .mrdad-ticket--red strong { color: var(--md-paper); } .mrdad-ticket--red span { color: var(--md-paper-soft); } .mrdad-ticket--gold { background: rgba(201, 162, 39, 0.14); border-color: rgba(201, 162, 39, 0.35); } .mrdad-ticket--gold strong { color: #7a6210; } /* picks rail: the lead card scrolls WITH the tiles — one scroll surface */ .mrdad-picks__rail { display: flex; gap: 10px; align-items: stretch; overflow-x: auto; -webkit-overflow-scrolling: touch; scroll-snap-type: x mandatory; scrollbar-width: none; padding: 0 14px 14px; } .mrdad-picks__rail::-webkit-scrollbar { display: none; } .mrdad-picks__rail ul.products { display: flex !important; flex: 0 0 auto; overflow: visible; padding: 0; margin: 0; gap: 10px; } .mrdad-picks__lead { flex: 0 0 118px; scroll-snap-align: start; display: flex; flex-direction: column; justify-content: center; gap: 6px; padding: 14px 12px; border-radius: 14px; text-decoration: none; background: linear-gradient(160deg, #f7edd2, rgba(201, 162, 39, 0.35)); border: 1px solid rgba(201, 162, 39, 0.4); } .mrdad-picks__lead-kicker { font-family: var(--md-sans); font-size: 9px; font-weight: 700; letter-spacing: 1px; text-transform: uppercase; color: #7a6210; } .mrdad-picks__lead-title { font-family: var(--md-display); font-size: 14px; font-weight: 600; line-height: 1.25; text-transform: uppercase; letter-spacing: .03em; color: var(--md-ink); } .mrdad-picks__lead-cta { align-self: flex-start; padding: 5px 11px; border-radius: 999px; background: var(--md-red); color: #fff; font-family: var(--md-sans); font-size: 10.5px; font-weight: 700; } } /* --------------------------------------------------------------------------- Phone-sized screens: suppress the interruptive membership sales tools. Viewport-based, never wp_is_mobile() — HTML is edge-cached behind the Cloudflare Tunnel, so a UA decision made on the server would be served to the wrong device. 768px matches the theme's dominant breakpoint. storefront-fx.js also skips arming these on phones; this block is the belt-and-braces for the server-rendered markup (the promo card, the checkout upsell, the member chips), which exists in the DOM before any script runs. display:none also takes the promo card out of hit-testing, which matters — its overlay has swallowed taps meant for the page beneath. --------------------------------------------------------------------------- */ @media (max-width: 768px) { .mrdad-announce, /* rotating announcement ticker */ .mrdad-promo, /* "Join free, save every shop" modal */ .wd-checkout-upsell, /* "Join free, save $X on this order" in checkout */ .wd-member-chip, /* "Member $X.XX" on every product tile */ .wd-member-hint { /* member-price line under the price */ display: none !important; } } /* ============================================================================ DESKTOP AISLE BROWSE (2026-09-02) — the client asked for categories, not 1,072 loose products. Everything here is ≥993px on purpose: 769–992px keeps the layout that ships today, because ul.products is forced to 4 columns with !important at line ~832 and a sidebar in that band cannot outrank it. The phone's share of this section is three display:none rules at the bottom. ============================================================================ */ /* The map prints on every viewport (the phone's tab bar points at /shop/ and that URL must keep serving products) — hidden by default, shown to desktop below. */ .mrdad-landing { display: none; } @media (min-width: 993px) { .mrdad-landing { display: block; margin: 0 0 8px; } /* Storefront's content column pads for a display-size title that is clipped here. */ .mrdad-shop-landing .site-main { padding-top: 0; } .mrdad-landing { margin-top: -46px; } .mrdad-landing__h { font-family: var(--md-display); font-weight: 600; font-size: 30px; line-height: 1; letter-spacing: .09em; text-transform: uppercase; color: var(--md-ink); margin: 0 0 6px; text-align: center; } .mrdad-landing__sub { margin: 0 0 26px; text-align: center; font-size: 14px; color: var(--md-body); } /* Specials is a full-width band, not a card floating alone in the middle of the page. */ .mrdad-landing__lead { margin: 0 0 30px; } .mrdad-landing__lead .mrdad-aislecard { width: 100%; padding: 14px 18px 14px 14px; gap: 16px; } .mrdad-landing__lead .mrdad-aislecard__disc { width: 46px; height: 46px; flex: 0 0 46px; } .mrdad-landing__lead .mrdad-aislecard__t strong { font-size: 14px; letter-spacing: .14em; } /* Two columns of GROUPS, balanced by the column algorithm: Pantry has 8 aisles and Frozen has 1, so a plain grid would leave single cards stranded in wide rows. */ /* One flowing grid, NOT a two-column masonry. The masonry put Pantry+Snacks in the left column and the four small groups in the right, so the columns ended at wildly different heights and the cards were different widths between them. Single-aisle groups also stretched to the full column under auto-fit — a 700px-wide card holding one 26px disc. Full-width headings over a fixed 4-up grid keeps every card identical. */ .mrdad-landing__groups { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0 10px; align-items: start; } /* A group spans the full four columns by default. Groups holding one or two aisles span two instead, so they pair up on a shared row — Frozen, Home and Seasonal each hold a single aisle, and giving each of them its own full-width heading and one lonely card burned three rows on five cards. :has() counts the children; a third card promotes the group back to full width. */ .mrdad-landing__g { grid-column: span 4; margin: 0 0 24px; } .mrdad-landing__g:not(:has(.mrdad-aislecard:nth-child(3))) { grid-column: span 2; } .mrdad-landing__g:not(:has(.mrdad-aislecard:nth-child(3))) .mrdad-landing__gg { grid-template-columns: repeat(2, minmax(0, 1fr)); } .mrdad-landing__gt { font-family: var(--md-display); font-weight: 600; font-size: 14px; line-height: 1; letter-spacing: .16em; text-transform: uppercase; color: var(--md-ink); margin: 0 0 12px; padding-bottom: 9px; border-bottom: 1px solid var(--md-border); } .mrdad-landing__gg { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; } .mrdad-aislecard { display: flex; align-items: center; gap: 12px; padding: 9px 12px 9px 9px; background: #fff; border: 1px solid var(--md-border); border-radius: 13px; text-decoration: none; box-shadow: 0 1px 2px rgba(20, 16, 8, .04); transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease; } .mrdad-aislecard:hover, .mrdad-aislecard:focus-visible { border-color: var(--md-gold); box-shadow: 0 4px 16px rgba(201, 162, 39, .22); transform: translateY(-1px); } .mrdad-aislecard__disc { width: 52px; height: 52px; flex: 0 0 52px; border-radius: 50%; overflow: hidden; background: var(--md-tile); display: flex; align-items: center; justify-content: center; color: #b0871f; } .mrdad-aislecard__disc img { width: 100%; height: 100%; object-fit: cover; display: block; } .mrdad-aislecard__disc svg { width: 24px; height: 24px; } .mrdad-aislecard__disc--cutout { background: var(--md-cutout-ground); } .mrdad-aislecard__disc--cutout img { object-fit: contain; padding: 3px; } .mrdad-aislecard__t { min-width: 0; } .mrdad-aislecard__t strong { display: block; font-family: var(--md-display); font-weight: 600; font-size: 12.5px; line-height: 1.25; letter-spacing: .05em; text-transform: uppercase; color: var(--md-ink); } .mrdad-aislecard__t span { font-size: 11.5px; color: #9c9481; } /* Route off the map to the flat grid. The sidebar's desktop "All products" link is hidden here (the map IS the map), so without this the only way through is the footer. */ .mrdad-landing__foot { margin: 26px 0 0; text-align: center; } .mrdad-landing__all { display: inline-block; text-decoration: none; background: #fff; border: 1px solid var(--md-border); border-radius: 999px; padding: 10px 22px; font-family: var(--md-display); font-weight: 600; font-size: 11px; line-height: 1; letter-spacing: .14em; text-transform: uppercase; color: var(--md-body); } .mrdad-landing__all:hover, .mrdad-landing__all:focus-visible { border-color: var(--md-gold); color: var(--md-red); } .mrdad-aislecard--specials { border-color: var(--md-red); background: rgba(200, 16, 46, .04); } .mrdad-aislecard--specials .mrdad-aislecard__disc { background: var(--md-red); color: #fff; } .mrdad-aislecard--specials .mrdad-aislecard__t strong { color: var(--md-red); } /* On the map, the chrome it replaces goes away. .storefront-sorting wraps BOTH the ordering select and the result count (verified in the pod's markup), so one rule covers both; .mrdad-browse carries the sidebar and the product grid; the pagination is a sibling after it (after_shop_loop @10 vs the wrapper closing @5). NB hide the WRAPPER'S CHILDREN, not the wrapper: .storefront-sorting also contains .woocommerce-notices-wrapper, and a hidden notice is still CONSUMED — the shopper would get no feedback and it would never reappear. */ .mrdad-shop-landing .storefront-sorting .woocommerce-ordering, .mrdad-shop-landing .storefront-sorting .woocommerce-result-count, .mrdad-shop-landing .mrdad-browse, .mrdad-shop-landing .woocommerce-pagination, .mrdad-shop-landing .mrdad-more { display: none !important; } .mrdad-shop-landing .storefront-sorting { margin: 0; } /* The map is the page's own heading and Storefront's "SHOP" title above it is a visual duplicate — but display:none would leave the site's primary commercial page with NO

in the DOM or the a11y tree. The theme already settled this argument the other way for mobile (style.css:1760, "the h1 stays (SEO) but no longer needs to shout" — it was shrunk, not deleted). Clip it instead: gone visually, still there for screen readers and crawlers. */ .mrdad-shop-landing .woocommerce-products-header { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; } /* ---- Desktop two-pane: aisle sidebar + product grid ---- */ .mrdad-aisle-browse:not(.mrdad-shop-landing) .mrdad-browse { display: grid; grid-template-columns: 218px minmax(0, 1fr); gap: 26px; align-items: start; } .mrdad-aisle-browse:not(.mrdad-shop-landing) .mrdad-aisles { display: block; position: sticky; top: calc(var(--mrdad-header-h, 96px) + 12px); max-height: calc(100vh - var(--mrdad-header-h, 96px) - 40px); overflow-y: auto; padding-right: 14px; border-right: 1px solid var(--md-border); scrollbar-width: none; } .mrdad-aisle-browse:not(.mrdad-shop-landing) .mrdad-aisles::-webkit-scrollbar { display: none; } /* min-width:0 or a rigid tile blows the grid track (same reason as minmax(0,1fr) above). */ .mrdad-aisle-browse:not(.mrdad-shop-landing) .mrdad-browse ul.products { min-width: 0; } /* 6 tiles do not fit beside a 218px sidebar. Not !important — the base rule at ~line 832 is not !important either, and this selector is more specific. */ .mrdad-aisle-browse:not(.mrdad-shop-landing) .mrdad-browse ul.products, .mrdad-aisle-browse:not(.mrdad-shop-landing) .mrdad-browse ul.products.columns-3, .mrdad-aisle-browse:not(.mrdad-shop-landing) .mrdad-browse ul.products.columns-4, .mrdad-aisle-browse:not(.mrdad-shop-landing) .mrdad-browse ul.products.columns-5 { grid-template-columns: repeat(4, minmax(0, 1fr)); } /* The client's "a lot of wasted space" complaint, which the phone block at ~1756 already answered, applies just as much here: Storefront's centred display-size title plus its fluid-vw margins pushed the first product roughly 400px down a 1440px screen — nearly half the viewport before a single item. Same remedy, desktop proportions: left-aligned, compact, result count and sort pills sharing one line. The h1 stays (SEO). */ .mrdad-aisle-browse:not(.mrdad-shop-landing) .storefront-breadcrumb { padding-bottom: 0; margin-bottom: 12px; } .mrdad-aisle-browse:not(.mrdad-shop-landing) header.woocommerce-products-header { margin: 0 0 4px; padding: 0; } .mrdad-aisle-browse:not(.mrdad-shop-landing) .woocommerce-products-header__title, .mrdad-aisle-browse:not(.mrdad-shop-landing) h1.page-title { font-size: 30px; line-height: 1.15; margin: 0; text-align: left; letter-spacing: .06em; } .mrdad-aisle-browse:not(.mrdad-shop-landing) .storefront-sorting { margin: 0; min-height: 36px; } .mrdad-aisle-browse:not(.mrdad-shop-landing) .woocommerce-result-count { font-size: 13px; color: #8a8375; margin: 9px 0 0; float: none; } /* Pull the pills up onto the result-count line rather than stacking a third row. */ .mrdad-aisle-browse:not(.mrdad-shop-landing) .mrdad-sort--desk { margin: -36px 0 14px; } .mrdad-aisles__group { display: block; font-family: var(--md-display); font-weight: 600; font-size: 10.5px; line-height: 1; letter-spacing: .18em; text-transform: uppercase; color: #a9821f; margin: 16px 0 7px; padding-bottom: 6px; border-bottom: 1px solid var(--md-border); } .mrdad-aisles__item--phone { display: none; } .mrdad-aisles__item--desk { display: flex; } /* Doubled class, deliberately: :not() contributes its argument's specificity, so the row rule below is (0,3,0). A merely-scoped hide here would also be (0,3,0) and would lose on source order — which it did, shipping two all-products rows both marked is-active. .mrdad-aisles__item.mrdad-aisles__item--phone is (0,4,0) and wins wherever it sits. */ .mrdad-aisle-browse:not(.mrdad-shop-landing) .mrdad-aisles__item.mrdad-aisles__item--phone { display: none; } /* Row styling for the desktop sidebar. Deliberately duplicated rather than lifted out of the phone's @media (max-width: 768px) block at ~1791: this feature's guarantee is that mobile CSS is only ever added to, never moved or edited, and the desktop list wants a denser 26px disc against the phone's 34px anyway. */ .mrdad-aisle-browse:not(.mrdad-shop-landing) .mrdad-aisles__item { display: flex; align-items: center; gap: 9px; padding: 5px 8px; margin: 0 0 1px; border-radius: 9px; text-decoration: none; color: var(--md-body); font-size: 12.5px; line-height: 1.3; transition: background .15s ease, color .15s ease; } .mrdad-aisle-browse:not(.mrdad-shop-landing) .mrdad-aisles__ic { display: flex; align-items: center; justify-content: center; width: 26px; height: 26px; flex: 0 0 26px; border-radius: 50%; overflow: hidden; background: var(--md-tile); color: #b0871f; } .mrdad-aisle-browse:not(.mrdad-shop-landing) .mrdad-aisles__ic img { width: 26px; height: 26px; object-fit: cover; display: block; } .mrdad-aisle-browse:not(.mrdad-shop-landing) .mrdad-aisles__ic svg { width: 16px; height: 16px; } .mrdad-aisle-browse:not(.mrdad-shop-landing) .mrdad-aisles__ic--cutout { background: var(--md-cutout-ground); } .mrdad-aisle-browse:not(.mrdad-shop-landing) .mrdad-aisles__ic--cutout img { object-fit: contain; padding: 2px; box-sizing: border-box; } .mrdad-aisle-browse:not(.mrdad-shop-landing) .mrdad-aisles__label { flex: 1 1 auto; min-width: 0; } .mrdad-aisle-browse:not(.mrdad-shop-landing) .mrdad-aisles__item:hover, .mrdad-aisle-browse:not(.mrdad-shop-landing) .mrdad-aisles__item:focus-visible { background: rgba(201, 162, 39, .14); color: var(--md-red); } .mrdad-aisle-browse:not(.mrdad-shop-landing) .mrdad-aisles__item.is-active { background: rgba(200, 16, 46, .07); } .mrdad-aisle-browse:not(.mrdad-shop-landing) .mrdad-aisles__item.is-active .mrdad-aisles__label { color: var(--md-red); font-weight: 700; } .mrdad-aisle-browse:not(.mrdad-shop-landing) .mrdad-aisles__item.is-active .mrdad-aisles__ic img { box-shadow: 0 0 0 2px var(--md-red); } /* Our sort pills replace Storefront's bare "Default sorting" select on desktop archives. The sort row is emitted twice (see inc/aisle-browse.php): the phone's copy sits above the content column under the full-bleed rail, the desktop copy inside it above the grid. Show exactly one. Scoped selectors throughout, because an unscoped hide loses to the (0,3,0) rules below it — the same :not() specificity trap as the all-products links. */ .mrdad-aisle-browse .mrdad-sort--phone { display: none; } .mrdad-aisle-browse:not(.mrdad-shop-landing) .mrdad-sort--desk { display: flex; gap: 7px; margin: 0 0 14px; justify-content: flex-end; flex-wrap: wrap; } /* Pill styling duplicated from the phone block (1559-1571) rather than hoisted, same reasoning as the sidebar rows: mobile CSS is only ever added to, never moved. */ .mrdad-aisle-browse:not(.mrdad-shop-landing) .mrdad-sort__pill { display: inline-block; padding: 6px 13px; border-radius: 999px; border: 1px solid var(--md-border); background: #fff; font-size: 11.5px; line-height: 1.35; text-decoration: none; color: var(--md-body); transition: background .15s ease, border-color .15s ease, color .15s ease; } .mrdad-aisle-browse:not(.mrdad-shop-landing) .mrdad-sort__pill:hover, .mrdad-aisle-browse:not(.mrdad-shop-landing) .mrdad-sort__pill:focus-visible { border-color: var(--md-gold); color: var(--md-red); } .mrdad-aisle-browse:not(.mrdad-shop-landing) .mrdad-sort__pill.is-active { background: var(--md-red); border-color: var(--md-red); color: #fff; font-weight: 600; } .mrdad-aisle-browse:not(.mrdad-shop-landing) .woocommerce-ordering { display: none; } } /* ---- The phone's entire share of this feature: four hides, inside the media query that already exists. A phone can only lose new markup here, never change any. ---- */ @media (max-width: 768px) { .mrdad-landing { display: none; } .mrdad-aisles__group { display: none; } .mrdad-aisles__item--desk { display: none; } .mrdad-sort--desk { display: none; } } /* ---- Grouped Shop mega-panel. The panel is display:grid today with a `grid-template-columns: … !important`; switching display to block makes that declaration inert, so there is no !important to fight. ---- */ @media (min-width: 993px) { .site-header .main-navigation ul.menu ul.sub-menu { display: block; columns: 4; column-gap: 22px; width: 780px !important; max-width: calc(100vw - 32px); } .site-header .main-navigation ul.sub-menu li { break-inside: avoid; } .site-header .main-navigation ul.sub-menu li.mds-cat-group { margin: 0 0 6px; } .site-header .main-navigation ul.sub-menu li.mds-cat-group + li { margin-bottom: 0; } .site-header .main-navigation ul.sub-menu li.mds-cat-group > a { display: block !important; width: auto; padding: 0 0 5px !important; margin-bottom: 6px; border-bottom: 1px solid var(--md-border); border-radius: 0; font-family: var(--md-display); font-weight: 600; font-size: 10px; letter-spacing: .18em; color: #a9821f; } .site-header .main-navigation ul.sub-menu li.mds-cat-group > a:hover { background: none; color: var(--md-red); } } /* The mega-panel grouping filter runs at every viewport, but its styling is >=993px only. 769-992px shows the desktop nav with no grouping CSS, so the six heading
  • s would render as ordinary (and clickable) menu links in that band. That band is contractually unchanged by this feature — hide them. Inert today: the primary menu currently has no product_cat children at all, so the panel is empty until seed-primary-menu.php is re-run. */ @media (max-width: 992px) { .site-header .main-navigation ul.sub-menu li.mds-cat-group { display: none; } } /* ============ Chinese product name (ZiiCloud for WooCommerce, catalog) ============ ZIIC_Chinese_Name prints a .mdi-name-zh span under the English title — in the loop it lands inside the product (so on the aisle list row it is a child of the row grid and inherits grid-column 2), on the single product page it sits under the h1. In the loop it is ALWAYS clamped to one line. The 390px list row is the constraint that decides this: its height budget is already spoken for (88px image, title, chips, stock line, price, and a 44px + button pinned bottom-right), and a Chinese product name is long — 椰子树绿豆榴莲酥饼400G*12 wraps to two or three lines in a ~230px text column. One clamped line adds a fixed ~15px and cannot grow, so the row cannot reflow past what is budgeted here. The single product page has room, so there it wraps freely. Placed at the end of the file, after the mobile blocks, with its own nested media query: the shipped, client-approved mobile CSS above is not touched at all. */ .mdi-name-zh { display: block; font-family: var(--md-sans); font-size: 12px; font-weight: 400; line-height: 1.3; letter-spacing: 0; color: var(--md-body); opacity: .8; } ul.products li.product .mdi-name-zh { margin: -1px 0 5px; font-size: 11.5px; text-align: inherit; /* one line, hard stop */ display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden; min-width: 0; max-width: 100%; word-break: break-all; /* Han has no spaces — let the clamp cut mid-string, not overflow */ } .single-product .mdi-name-zh { font-size: 15px; line-height: 1.35; margin: -4px 0 12px; opacity: .85; } @media (max-width: 768px) { /* tiles: one notch down, matching the 12px compacted title */ ul.products li.product .mdi-name-zh { font-size: 11px; margin: -1px 0 4px; } /* aisle list rows: a grid child in the text column. Left to stretch on purpose — a justify-self:start box would size to max-content and a long Chinese name would then overflow the minmax(0,1fr) track instead of being clipped by the clamp. */ .mrdad-aisle-browse ul.products li.product .mdi-name-zh { font-size: 11.5px; margin: 1px 0 0; padding-right: 46px; /* the + button's lane, same as the price and stock line */ box-sizing: border-box; } .single-product .mdi-name-zh { font-size: 14px; margin: -2px 0 10px; } } /* ============================================================================ Language toggle (MDI_Switcher, storefront_header @23) ---------------------------------------------------------------------------- A plain in the header's utility tier, immediately after the store pill the theme relocates there at 22. Styled as a quiet pill that matches .mds-store: transparent at rest on the cream header, white on hover. ========================================================================== */ .mdi-lang { display: inline-flex; align-items: center; gap: 6px; flex: 0 0 auto; align-self: center; margin-left: 6px; padding: 6px 11px; border: 1px solid transparent; border-radius: 999px; font-family: var(--md-sans); font-size: 13px; font-weight: 600; line-height: 1; white-space: nowrap; color: var(--md-ink); text-decoration: none; transition: background .18s ease, border-color .18s ease, box-shadow .18s ease; } .mdi-lang:hover, .mdi-lang:focus-visible { background: #fff; border-color: var(--md-border); box-shadow: 0 4px 14px rgba(20, 16, 8, 0.12); color: var(--md-ink); text-decoration: none; } .mdi-lang__globe { width: 16px; height: 16px; flex: 0 0 16px; color: var(--md-red); } @media (max-width: 768px) { /* Row 1 of the two-line mobile header is logo (order 1) · store pill (order 2). Without an order the toggle would default to 0 and jump ahead of the logo; matching the store pill's order keeps it beside it, in source order, still on row 1. */ .site-header .mdi-lang { order: 2; margin-left: 4px; padding: 5px 8px; font-size: 12px; } .site-header .mdi-lang__globe { display: none; } /* the phone header has no room for it */ } /* ---- Sign in with a verification code (ZIIC_Login, My Account) --------------------- * * The connector ships the form unstyled and it inherits Storefront's full-width form * rows, so on desktop a single email field stretched the whole 1280px content column * while the LOGIN / REGISTER pair below it sat in two ~527px columns — it read as * unfinished rather than as the primary way in. * * Desktop only. At 390px the full-width field is already correct and the shipped * mobile block is not touched. --------------------------------------------------- */ .ziic-login { margin: 0 0 34px; } .ziic-login h2 { margin-bottom: 6px; } /* The heading alone read as "for people who already have an account", so new customers scrolled past to REGISTER and got a WordPress login with no membership. This line is what tells them the code IS the sign-up. It carries the whole fix, so give it the weight of body copy rather than of a footnote — the grey hint below is the footnote. */ .ziic-login .ziic-login-lede { margin: 0 0 14px; max-width: 527px; color: var(--md-body); line-height: 1.5; } .ziic-login .ziic-login-hint { margin-top: 10px; color: var(--md-body); opacity: .85; } @media (min-width: 769px) { /* Matches the width of the LOGIN column beneath it, so the three form areas share one measure instead of one spanning the page. */ .ziic-login form { max-width: 527px; } /* A hairline under it: this is now the primary door, and without a divider it ran straight into the legacy password LOGIN heading. */ .ziic-login { padding-bottom: 30px; border-bottom: 1px solid var(--md-rule, #E3D9C2); margin-bottom: 34px; } } /* ============================================================================ Membership page ([ziic_membership], rendered by ziicloud-woocommerce) ---------------------------------------------------------------------------- One programme — Mr Dad's, out of the POS — so the page is one column of grades with the points rule and the join instructions alongside. Every number in here is read live from ZiiCloud; the only fixed copy is "How to join", which is a fact about the counters rather than a rate. Desktop (>=1024px) puts the grade ladder in the wide column and the two short panels in a narrow one; the phone stacks them in source order, grades first. Nothing here touches the shipped mobile blocks above — every rule is scoped under .ziic-membership. ========================================================================== */ .ziic-membership { max-width: 1100px; margin: 0 auto 48px; } .ziic-membership__lede { margin: 0 0 26px; font-size: 18px; line-height: 1.55; color: var(--md-body); max-width: 62ch; } .ziic-membership__title { font-family: var(--md-display); font-weight: 600; letter-spacing: .04em; text-transform: uppercase; font-size: 20px; margin: 0 0 8px; color: var(--md-ink); } .ziic-membership__sub { margin: 0 0 20px; color: var(--md-body); opacity: .9; } .ziic-membership__panel { background: #fff; border: 1px solid var(--md-border); border-radius: 14px; padding: 26px 24px; margin: 0 0 22px; } .ziic-membership__list { margin: 0; padding-left: 20px; } .ziic-membership__list li { margin-bottom: 8px; line-height: 1.55; color: var(--md-body); } .ziic-membership__unavailable { margin: 0; padding: 14px 16px; background: var(--md-cream); border: 1px dashed var(--md-border); border-radius: 10px; color: var(--md-body); } /* ---- the grade list ---- */ .ziic-grades { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; } .ziic-grade { border: 1px solid var(--md-border); border-radius: 12px; padding: 16px 18px; background: var(--md-cream); } .ziic-grade__head { display: flex; align-items: baseline; flex-wrap: wrap; gap: 8px; margin-bottom: 10px; } .ziic-grade__name { font-family: var(--md-display); font-weight: 600; font-size: 19px; letter-spacing: .03em; text-transform: uppercase; color: var(--md-ink); } .ziic-grade__alt { font-size: 14px; color: var(--md-body); opacity: .75; } /* The discount is the number a shopper compares grades on, so it is the loudest thing in the row and sits hard right of the name. */ .ziic-grade__off { margin-left: auto; background: var(--md-red); color: #fff; font-weight: 700; font-size: 14px; line-height: 1; padding: 7px 11px; border-radius: 999px; white-space: nowrap; } .ziic-grade__facts { margin: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px 18px; } .ziic-grade__fact { min-width: 0; } .ziic-grade__fact dt { font-size: 11px; letter-spacing: .09em; text-transform: uppercase; font-weight: 700; color: var(--md-body); opacity: .65; margin: 0 0 3px; } .ziic-grade__fact dd { margin: 0; font-size: 15px; line-height: 1.4; color: var(--md-ink); } .ziic-grade__fact .woocommerce-Price-amount { font-weight: 600; } /* ---- how to join: ink, so it reads as the shop speaking rather than as a fourth grade on offer ---- */ .ziic-membership__join { background: var(--md-ink); color: var(--md-paper-soft); border-radius: 14px; padding: 24px; } .ziic-membership__join .ziic-membership__title { color: var(--md-paper); } .ziic-membership__join p { margin: 0 0 10px; line-height: 1.6; max-width: 60ch; } .ziic-membership__join p:last-child { margin-bottom: 0; } /* The join panel's one action. Gold on ink, same as the promo popup's button, so the two "join" surfaces read as one thing. */ .ziic-membership__cta-row { margin-top: 18px !important; } .ziic-membership__cta { display: inline-block; background: var(--md-gold); color: var(--md-ink) !important; font-family: var(--md-display); font-weight: 600; letter-spacing: .04em; text-transform: uppercase; font-size: 14px; line-height: 1; padding: 14px 22px; border-radius: 999px; text-decoration: none !important; } .ziic-membership__cta:hover, .ziic-membership__cta:focus { filter: brightness(1.06); } /* ---- 1024px+: the two panels side by side (join wide, points narrow) ---- */ @media (min-width: 1024px) { .ziic-membership { display: grid; grid-template-columns: 1.45fr 1fr; gap: 0 24px; align-items: start; } .ziic-membership__lede { grid-column: 1 / -1; } /* No points panel (rule unreadable): let the join panel take the row. */ .ziic-membership--brief .ziic-membership__side:empty { display: none; } .ziic-membership--brief .ziic-membership__main:has(+ .ziic-membership__side:empty) { grid-column: 1 / -1; } /* The side column's own panels keep the 22px rhythm of the main column. */ .ziic-membership__side > * + * { margin-top: 0; } } /* ---- 390px: stack, and let each grade's facts read as label/value rows ---- */ @media (max-width: 600px) { .ziic-membership__panel { padding: 20px 16px; border-radius: 12px; } .ziic-membership__lede { font-size: 16px; } .ziic-membership__title { font-size: 18px; } .ziic-grade { padding: 14px 14px; } /* Three columns at 390px squeezes "Wednesday and Thursday" to one word a line, and two columns leaves a hole whenever a grade has no readable price. So the facts become label-left / value-right rows: every value keeps a full measure, and a missing fact simply removes its own row. */ .ziic-grade__facts { grid-template-columns: 1fr; gap: 9px; } .ziic-grade__fact { display: grid; grid-template-columns: 124px minmax(0, 1fr); align-items: baseline; gap: 10px; } .ziic-grade__fact dt { margin: 0; } .ziic-membership__join { padding: 20px 16px; } } /* ============================================================================ "Back to the aisle" — the confirmation after an add-to-cart from a product page ============================================================================ The shopper taps a tile, reads the product, adds it, and lands back on the SAME listing at the tile they just added (inc/aisle-return.php + assets/js/aisle-return.js). Two pieces of feedback, both deliberately out of the grid's way: .mrdad-added a pill in the band just under the header, role="status" so screen readers announce it without focus moving. It is pointer-events:none, so it can never swallow a tap meant for a product beneath it, and the JS removes it after ~4.5s. Nothing focusable inside, so no trap. A fixed element always overlays SOME pixels; keeping it one line high, non-interactive and short- lived is the whole of the compromise. .mrdad-return-flash a short gold ring drawn OUTSIDE the tile's box (inset:-6px), so it marks the item without covering its photo, price or button. This is the confirmation that lands where the shopper is looking. All viewports. Nothing here touches the shipped mobile browse/tile rules above. */ .mrdad-added { position: fixed; z-index: 995; top: calc(var(--mrdad-header-h, 96px) + 8px); left: 50%; /* One line on desktop: a 40px band of chrome under the header, not a card sitting in the middle of the shelf. It wraps to two lines only where width forces it. */ display: flex; align-items: baseline; gap: 9px; box-sizing: border-box; /* do not depend on the parent theme's global box-sizing */ max-width: min(540px, calc(100vw - 32px)); padding: 9px 20px; font-family: var(--md-sans); color: var(--md-paper); background: rgba(20, 20, 20, .94); border: 1px solid rgba(201, 162, 39, .55); border-radius: 999px; box-shadow: 0 10px 28px rgba(20, 20, 20, .2); pointer-events: none; opacity: 0; transform: translate(-50%, -10px); transition: opacity .22s ease, transform .22s ease; } .mrdad-added.is-in { opacity: 1; transform: translate(-50%, 0); } .mrdad-added__line { min-width: 0; font-size: 13.5px; font-weight: 700; line-height: 1.3; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .mrdad-added__count { flex: 0 0 auto; font-size: 11.5px; font-weight: 500; white-space: nowrap; color: rgba(255, 255, 255, .72); } .mrdad-added__count::before { content: "\00B7"; margin-right: 8px; opacity: .55; } /* The tile already carries position:relative; z-index lifts the flashed one above the tiles that follow it in the grid, so the ring is not clipped by the next card. */ .mrdad-return-flash { position: relative; z-index: 3; } .mrdad-return-flash::after { content: ""; position: absolute; inset: -6px; /* outside the card: never covers photo, price or button */ border: 2px solid var(--md-gold); border-radius: 20px; /* the tile's 14px + the 6px offset */ box-shadow: 0 0 0 4px rgba(201, 162, 39, .16); pointer-events: none; animation: mrdad-return-ring 2.6s ease forwards; } @keyframes mrdad-return-ring { 0% { opacity: 0; } 10% { opacity: 1; } 70% { opacity: 1; } 100% { opacity: 0; } } @media (max-width: 768px) { /* Two lines on the phone: 390px cannot hold the product name and the basket count on one row without ellipsising the name away to nothing. */ .mrdad-added { top: calc(var(--mrdad-header-h, 96px) + 6px); flex-direction: column; align-items: center; gap: 1px; text-align: center; max-width: calc(100vw - 24px); padding: 8px 16px; } .mrdad-added__line { font-size: 12.5px; max-width: 100%; } .mrdad-added__count { font-size: 11px; } .mrdad-added__count::before { content: none; } } @media (prefers-reduced-motion: reduce) { .mrdad-added { transition: none; } .mrdad-return-flash::after { animation: none; opacity: 1; } }