@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,300;0,400;0,500;0,600;0,700;1,300;1,400;1,500;1,600;1,700&family=Jost:ital,wght@0,300;0,400;0,500;0,600;0,700;1,300;1,400&family=Lora:ital,wght@0,400;0,500;0,600;0,700;1,400;1,500;1,600&display=swap'); /* ═══════════════════════════════════════ DESIGN TOKENS ═══════════════════════════════════════ */ :root { --clr-dark: #1A2E1A; --clr-accent: #C9973A; --clr-bg: #F7F5F0; --clr-bg-alt: #EDEADE; --clr-text: #2C2C2A; --clr-muted: #6B6560; --clr-sale: #C0392B; --clr-border: #E2DDD6; --clr-ivory: #F5F0E8; --font-display: 'Cormorant Garamond', Georgia, serif; --font-ui: 'Jost', 'Segoe UI', sans-serif; --font-body: 'Lora', Georgia, serif; --container: 1320px; --transition: 0.35s cubic-bezier(0.4,0,0.2,1); } /* ═══════════════════════════════════════ RESET ═══════════════════════════════════════ */ *,*::before,*::after{margin:0;padding:0;box-sizing:border-box} html{scroll-behavior:smooth;-webkit-font-smoothing:antialiased} /* style.min.css (old vendor theme) sets html,body{height:100%}, which pins the body box to the viewport height while its content runs far past it — the body background stops at the fold and percentage-height children misresolve. */ html,body{height:auto;min-height:100%} body{font-family:var(--font-body);color:var(--text);background:var(--clr-bg);line-height:1.6;overflow-x:hidden} img{max-width:100%;height:auto;display:block} a{text-decoration:none;color:inherit} button{border:none;background:none;cursor:pointer;font-family:inherit} ul,ol{list-style:none} input{font-family:inherit} /* Focus */ a:focus-visible,button:focus-visible,input:focus-visible{outline:2px solid var(--clr-accent);outline-offset:2px} /* Reduced motion */ @media(prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:0.01ms!important;transition-duration:0.01ms!important}} /* Container */ .container{max-width:var(--container);margin:0 auto;padding:0 16px} /* Scroll reveal — disabled for compatibility; all sections render immediately */ /* ═══════════════════════════════════════ INLINE SVG ICON SYSTEM ═══════════════════════════════════════ */ .ico{display:inline-flex;align-items:center;justify-content:center;width:1em;height:1em;vertical-align:-0.125em;flex-shrink:0} .ico svg{width:100%;height:100%;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round} .ico-sm{width:14px;height:14px} .ico-md{width:18px;height:18px} .ico-lg{width:20px;height:20px} .ico-filled svg{fill:currentColor;stroke:none} /* Trust item icon styling */ .trust-item .ico{width:18px;height:18px;margin-right:0;flex-shrink:0} .trust-item .ico svg{stroke-width:1.8;stroke:var(--clr-accent);fill:none} /* Utility bar icons */ .nav-util-left .ico,.nav-util-right .ico{width:13px;height:13px;margin-right:4px;opacity:0.7} /* Star rating */ .star-ico{width:14px;height:14px;display:inline-block;vertical-align:-1px;color:var(--clr-accent)} .star-ico svg{width:100%;height:100%;fill:var(--clr-accent);stroke:none} .star-ico.half svg{fill:url(#starGrad)} /* Verified check */ .verified-ico{width:12px;height:12px;display:inline-flex;align-items:center;justify-content:center;margin-right:3px} .verified-ico svg{width:100%;height:100%;fill:none;stroke:#fff;stroke-width:2.5} /* Mobile nav bottom icons */ .mobile-nav-bottom .ico{width:16px;height:16px;margin-right:6px;opacity:0.6} /* ═══════════════════════════════════════ S1 — ANNOUNCEMENT BAR ═══════════════════════════════════════ */ .announce-bar{height:36px;background:var(--clr-dark);display:flex;align-items:center;justify-content:center;position:relative;overflow:hidden;transition:height 0.3s ease,opacity 0.3s ease} .announce-bar.hidden{height:0;opacity:0;pointer-events:none} .announce-text{font-family:var(--font-ui);font-size:11px;letter-spacing:0.12em;text-transform:uppercase;color:var(--clr-ivory);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:calc(100% - 50px);transition:opacity 0.4s ease} .announce-close{position:absolute;right:16px;top:50%;transform:translateY(-50%);color:var(--clr-ivory);font-size:18px;line-height:1;padding:4px;transition:color 0.2s} .announce-close:hover{color:var(--clr-accent)} /* ═══════════════════════════════════════ S2 — NAVIGATION ═══════════════════════════════════════ */ /* Layer A — Utility */ .nav-utility{height:32px;background:#F0EDE8;display:flex;align-items:center;font-family:var(--font-ui);font-size:11px;color:var(--clr-muted);transition:height 0.3s ease,opacity 0.3s ease;overflow:hidden} .nav-utility.hide{height:0;opacity:0} .nav-utility .container{display:flex;justify-content:space-between;align-items:center} .nav-util-left,.nav-util-right{display:flex;gap:18px;align-items:center} .nav-util-left a,.nav-util-right a{color:var(--clr-muted);transition:color 0.2s} .nav-util-left a:hover,.nav-util-right a:hover{color:var(--clr-dark)} .util-sep{width:1px;height:12px;background:var(--clr-border)} /* Layer B — Brand */ .nav-brand{height:72px;background:#fff;border-bottom:1px solid var(--clr-border);position:relative;z-index:1000;transition:box-shadow 0.3s ease,border-color 0.3s ease} .nav-brand.sticky{position:sticky;top:0;box-shadow:0 2px 12px rgba(0,0,0,0.08);border-bottom-color:var(--clr-accent)} .nav-brand .container{display:flex;align-items:center;justify-content:space-between;height:100%;gap:24px} /* Desktop Brand Logo — BR (big) + HOME DECORATION LIMITED (small) */ .logo{display:flex;align-items:center;gap:12px;flex-shrink:0;text-decoration:none} .logo-mark{font-family:var(--font-display);font-size:38px;font-weight:800;color:#0F2E3E;line-height:1;letter-spacing:-1.5px;position:relative} .logo-mark::after{content:'';position:absolute;right:-4px;top:50%;width:8px;height:8px;background:var(--clr-accent);border-radius:50%;transform:translateY(-50%)} .logo-text{display:flex;flex-direction:column;line-height:1.1;padding-left:6px;border-left:2px solid #E5E7EB;padding-left:14px;margin-left:6px} .logo-name{font-family:var(--font-ui);font-size:14px;font-weight:700;color:#0F2E3E;letter-spacing:2px;text-transform:uppercase;line-height:1} .logo-sub{font-family:var(--font-ui);font-size:9px;color:#6B7280;letter-spacing:3px;text-transform:uppercase;margin-top:4px;font-weight:500} .nav-search{flex:1;max-width:480px;display:flex;align-items:center;gap:8px;height:44px;padding:0 5px 0 18px;background:var(--clr-bg);border:1px solid var(--clr-border);border-radius:999px;transition:background .25s,border-color .25s,box-shadow .25s} .nav-search:focus-within{background:#fff;border-color:var(--clr-accent);box-shadow:0 0 0 3px rgba(201,151,58,.14)} /* [type="search"] keeps this ahead of style.min.css's input:not(...) rule. */ .nav-search input[type="search"]{flex:1;min-width:0;height:100%;border:none;padding:0;font-family:var(--font-ui);font-size:14px;color:var(--clr-text);background:transparent;outline:none} .nav-search input::placeholder{color:#8C867F;font-size:13.5px} .nav-search input::-webkit-search-cancel-button,.nav-search input::-webkit-search-decoration{-webkit-appearance:none;appearance:none} .nav-search-btn{width:34px;height:34px;flex-shrink:0;border:none;border-radius:50%;background:var(--clr-dark);color:#fff;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:background .2s,transform .15s} .nav-search-btn:hover{background:#0F1F0F} .nav-search-btn:active{transform:scale(.92)} .nav-search:focus-within .nav-search-btn{background:#0F1F0F} .nav-search-btn svg{width:16px;height:16px;stroke:currentColor;fill:none;stroke-width:2.2;stroke-linecap:round} .nav-icons{display:flex;gap:20px;flex-shrink:0} .nav-icon-item{display:flex;flex-direction:column;align-items:center;gap:2px;position:relative;color:var(--clr-text);transition:color 0.2s} .nav-icon-item:hover{color:var(--clr-accent)} .nav-icon-item svg{width:22px;height:22px;stroke:currentColor;fill:none;stroke-width:1.5} .nav-icon-label{font-family:var(--font-ui);font-size:10px;color:var(--clr-muted)} .nav-badge{position:absolute;top:-4px;right:-8px;background:var(--clr-dark);color:#fff;font-family:var(--font-ui);font-size:9px;font-weight:600;width:16px;height:16px;border-radius:50%;display:flex;align-items:center;justify-content:center} /* Layer C — Megamenu bar */ .nav-mega{height:44px;background:var(--clr-dark);position:relative;z-index:999} .nav-mega .container{display:flex;align-items:center;height:100%} .mega-links{display:flex;height:100%} .mega-link{font-family:var(--font-ui);font-size:12px;letter-spacing:0.1em;text-transform:uppercase;color:#fff;padding:0 18px;display:flex;align-items:center;position:relative;transition:background 0.2s} .mega-link:hover{background:rgba(255,255,255,0.08)} .mega-link.sale{color:var(--clr-sale);font-weight:600} .mega-link.sale::before{content:'';width:6px;height:6px;border-radius:50%;background:var(--clr-sale);margin-right:6px} /* Dropdown */ .mega-dropdown{position:absolute;top:100%;left:0;width:520px;background:#fff;box-shadow:0 12px 40px rgba(0,0,0,0.12);border-radius:0 0 8px 8px;padding:28px;display:none;z-index:1001} .mega-link:hover .mega-dropdown{display:flex;gap:20px} .mega-col{flex:1} .mega-col-title{font-family:var(--font-ui);font-size:11px;letter-spacing:0.15em;text-transform:uppercase;color:var(--clr-muted);margin-bottom:12px;font-weight:600} .mega-col a{display:block;font-family:var(--font-ui);font-size:13px;color:var(--clr-text);padding:5px 0;transition:color 0.2s} .mega-col a:hover{color:var(--clr-accent)} .mega-featured{width:160px;flex-shrink:0;background:var(--clr-bg);border-radius:6px;padding:12px;text-align:center} .mega-featured img{width:120px;height:120px;object-fit:cover;border-radius:4px;margin:0 auto 8px} .mega-featured-name{font-family:var(--font-body);font-size:12px;color:var(--clr-text);margin-bottom:4px} .mega-featured-price{font-family:var(--font-ui);font-size:14px;color:var(--clr-accent);font-weight:600;margin-bottom:6px} .mega-featured-link{font-family:var(--font-ui);font-size:11px;color:var(--clr-accent);letter-spacing:0.05em} /* ═══ MOBILE HEADER — WoodenStreet exact replica ═══ State 1 (top): ☰ Wooden Street ♡ 🛒 State 2 (scroll): ☰ [Search Products, Color & More... 🔍] 🛒 ═══════════════════════════════════════════════════ */ .mobile-header{display:none;background:#fff;position:fixed;top:0;left:0;right:0;z-index:1001;border-bottom:1px solid #ececec;transition:box-shadow 0.25s} .mobile-header.scrolled{box-shadow:0 2px 8px rgba(0,0,0,0.06);border-bottom-color:transparent} /* Shared icon style — clean thin outlines */ .mh-icon{color:#1a1a1a;position:relative;display:inline-flex;align-items:center;justify-content:center;width:24px;height:24px;flex-shrink:0} .mh-icon svg{width:23px;height:23px;stroke:currentColor;fill:none;stroke-width:1.4;stroke-linecap:round;stroke-linejoin:round} /* Hide badge when 0; show only when count > 0 */ .mh-badge{position:absolute;top:-3px;right:-5px;min-width:14px;height:14px;border-radius:50%;background:#1a1a1a;color:#fff;font-family:var(--font-ui);font-size:9px;font-weight:600;display:none;align-items:center;justify-content:center;line-height:1;padding:0 3px} .mh-badge:not([data-count="0"]){display:flex} /* Hamburger — slim and refined */ .mobile-hamburger{display:flex;flex-direction:column;gap:5px;width:20px;flex-shrink:0;cursor:pointer;padding:6px 2px} .mobile-hamburger span{height:1.5px;background:#1a1a1a;border-radius:1px;transition:all 0.3s} /* ── STATE 1: Default (Logo row) — WoodenStreet exact ── */ /* Bulletproof: hamburger left, logo next to it, icons absolutely pinned right */ .mh-default{display:flex !important;align-items:center;height:58px;padding:0 16px;position:relative;width:100%} /* Two-part brand logo: BR (big) + HOME DECORATION (small) */ .mh-logo{display:flex;align-items:center;gap:8px;margin-left:14px;padding-right:80px;flex:1;text-decoration:none} .mh-logo-mark{font-family:var(--font-display);font-size:26px;font-weight:800;color:#0F2E3E;line-height:1;letter-spacing:-1px;flex-shrink:0;position:relative} .mh-logo-mark::after{content:'';position:absolute;right:-3px;top:50%;width:6px;height:6px;background:var(--clr-accent);border-radius:50%;transform:translateY(-50%)} .mh-logo-text{display:flex;flex-direction:column;line-height:1;min-width:0;overflow:hidden} .mh-logo-name{font-family:var(--font-ui);font-size:9px;font-weight:700;color:#0F2E3E;letter-spacing:1.5px;text-transform:uppercase;white-space:nowrap} .mh-logo-sub{font-family:var(--font-ui);font-size:7px;font-weight:500;color:#6B7280;letter-spacing:2px;text-transform:uppercase;margin-top:2px} /* Icons absolutely pinned to right edge — bulletproof, no flex tricks needed */ .mh-default .mh-icons{position:absolute !important;right:16px !important;top:50% !important;transform:translateY(-50%) !important;display:flex !important;align-items:center !important;gap:18px !important;margin:0 !important;flex-shrink:0} .mobile-header.scrolled .mh-default{display:none !important} /* ── STATE 2: Scrolled (Search row) — hamburger LEFT, search CENTER, cart RIGHT ── */ .mh-scrolled{display:none;align-items:center;justify-content:center;height:54px;padding:0 16px;position:relative;width:100%} .mobile-header.scrolled .mh-scrolled{display:flex} /* Hamburger pinned to left */ .mh-scrolled .mobile-hamburger{position:absolute !important;left:16px !important;top:50% !important;transform:translateY(-50%) !important} /* Search bar centered in middle with explicit space for icons */ .mh-scrolled-search{display:flex;align-items:center;gap:6px;height:40px;padding:0 4px 0 14px;border:1px solid var(--clr-border);border-radius:999px;background:var(--clr-bg);width:calc(100% - 96px);margin:0 auto;transition:background .25s,border-color .25s,box-shadow .25s} .mh-scrolled-search:focus-within{background:#fff;border-color:var(--clr-accent);box-shadow:0 0 0 3px rgba(201,151,58,.14)} .mh-scrolled-search input[type="search"]{flex:1;border:none;background:transparent;padding:0;font-family:var(--font-ui);font-size:16px;color:var(--clr-text);outline:none;height:100%;min-width:0} .mh-scrolled-search input::placeholder{color:#8C867F;font-size:13.5px} .mh-scrolled-search input::-webkit-search-cancel-button,.mh-scrolled-search input::-webkit-search-decoration{-webkit-appearance:none;appearance:none} .mh-scrolled-search button{width:32px;height:32px;background:var(--clr-dark);color:#fff;border-radius:50%;display:flex;align-items:center;justify-content:center;border:none;flex-shrink:0;cursor:pointer;transition:background .2s,transform .15s} .mh-scrolled-search button:active{transform:scale(.92)} .mh-scrolled-search:focus-within button{background:#0F1F0F} .mh-scrolled-search button svg{width:15px;height:15px;stroke:currentColor;fill:none;stroke-width:2.2;stroke-linecap:round} /* Cart icon pinned to right edge */ .mh-scrolled .mh-icon{position:absolute !important;right:16px !important;top:50% !important;transform:translateY(-50%) !important} /* ═══ MOBILE SIDEBAR — WoodenStreet style (white bg, image grid) ═══ */ .mobile-nav-overlay{position:fixed;top:0;left:0;width:100%;height:100%;z-index:2000;pointer-events:none;opacity:0;transition:opacity 0.3s} .mobile-nav-overlay.open{opacity:1;pointer-events:all} .mobile-nav-backdrop{position:absolute;inset:0;background:rgba(0,0,0,0.45)} .mobile-nav-panel{position:absolute;top:0;left:0;width:min(340px,88vw);height:100%;background:#fff;color:var(--clr-text);transform:translateX(-100%);transition:transform 0.35s cubic-bezier(0.4,0,0.2,1);overflow-y:auto;display:flex;flex-direction:column} .mobile-nav-overlay.open .mobile-nav-panel{transform:translateX(0)} /* Header: ← BR Home Decoration Login / Signup */ .mnav-header{display:flex;align-items:center;justify-content:space-between;padding:16px 18px;border-bottom:1px solid var(--clr-border)} .mnav-back{display:flex;align-items:center;gap:12px;color:var(--clr-dark);cursor:pointer} .mnav-back svg{width:20px;height:20px;stroke:currentColor;fill:none;stroke-width:2;flex-shrink:0} .mnav-back-logo{display:flex;align-items:center;gap:8px;line-height:1} .mnav-back-mark{font-family:var(--font-display);font-size:24px;font-weight:800;color:#0F2E3E;letter-spacing:-1px;position:relative} .mnav-back-mark::after{content:'';position:absolute;right:-3px;top:50%;width:5px;height:5px;background:var(--clr-accent);border-radius:50%;transform:translateY(-50%)} .mnav-back-text{font-family:var(--font-ui);font-size:9px;font-weight:700;color:#0F2E3E;letter-spacing:1.5px;text-transform:uppercase;line-height:1.2;padding-left:6px;border-left:1.5px solid #E5E7EB} .mnav-back-text small{font-size:7px;font-weight:500;color:#6B7280;letter-spacing:2px;display:block;margin-top:1px} .mnav-login{font-family:var(--font-ui);font-size:13px;font-weight:600;color:var(--clr-accent)} /* Promo banner */ .mnav-promo{display:flex;align-items:center;gap:12px;padding:14px 18px;background:var(--clr-bg);border-bottom:1px solid var(--clr-border);cursor:pointer} .mnav-promo-icon{width:32px;height:32px;flex-shrink:0;display:flex;align-items:center;justify-content:center} .mnav-promo-icon svg{width:24px;height:24px;stroke:var(--clr-accent);fill:none;stroke-width:1.5} .mnav-promo-text{flex:1} .mnav-promo-text strong{font-family:var(--font-ui);font-size:13px;font-weight:600;color:var(--clr-dark);display:block} .mnav-promo-text small{font-family:var(--font-ui);font-size:11px;color:var(--clr-muted)} .mnav-promo-arrow{color:var(--clr-muted);font-size:18px} /* 2-column category grid with images */ .mnav-cats{padding:16px 14px;flex:1} .mnav-cats-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px} .mnav-cat-card{display:flex;align-items:center;gap:10px;padding:10px 12px;background:#fff;border:1px solid var(--clr-border);border-radius:10px;cursor:pointer;transition:all 0.2s} .mnav-cat-card:active{background:var(--clr-bg);transform:scale(0.98)} .mnav-cat-card img{width:48px;height:48px;border-radius:6px;object-fit:cover;flex-shrink:0} .mnav-cat-card span{font-family:var(--font-ui);font-size:13px;font-weight:500;color:var(--clr-dark);line-height:1.3} /* Bottom links with icons */ .mnav-links{padding:12px 18px;border-top:1px solid var(--clr-border)} .mnav-link{display:flex;align-items:center;gap:12px;padding:13px 0;border-bottom:1px solid rgba(0,0,0,0.04);font-family:var(--font-ui);font-size:14px;color:var(--clr-dark);cursor:pointer} .mnav-link:last-child{border-bottom:none} .mnav-link svg{width:20px;height:20px;stroke:var(--clr-muted);fill:none;stroke-width:1.5;flex-shrink:0} .mnav-link .new-tag{font-size:10px;background:var(--clr-accent);color:#fff;padding:2px 8px;border-radius:10px;margin-left:4px;font-weight:600} /* ═══ MOBILE SEARCH BAR (below header) ═══ */ .mobile-search{display:none;padding:12px 14px 14px;background:#fff} .mobile-search-bar{display:flex;align-items:center;gap:6px;height:46px;padding:0 5px 0 16px;background:var(--clr-bg);border:1px solid var(--clr-border);border-radius:999px;transition:background .25s,border-color .25s,box-shadow .25s} .mobile-search-bar:focus-within{background:#fff;border-color:var(--clr-accent);box-shadow:0 0 0 3px rgba(201,151,58,.14)} /* 16px, not smaller: iOS Safari zooms the page in when a focused input is under 16px. */ .mobile-search-bar input[type="search"]{flex:1;min-width:0;height:100%;border:none;background:transparent;padding:0;font-family:var(--font-ui);font-size:16px;color:var(--clr-text);outline:none} .mobile-search-bar input::placeholder{color:#8C867F;font-size:14px} .mobile-search-bar input::-webkit-search-cancel-button,.mobile-search-bar input::-webkit-search-decoration{-webkit-appearance:none;appearance:none} .mobile-search-bar button{width:36px;height:36px;flex-shrink:0;border:none;border-radius:50%;background:var(--clr-dark);color:#fff;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:background .2s,transform .15s} .mobile-search-bar button:active{transform:scale(.92)} .mobile-search-bar:focus-within button{background:#0F1F0F} .mobile-search-bar button svg{width:17px;height:17px;stroke:currentColor;fill:none;stroke-width:2.2;stroke-linecap:round} /* ═══ ROTATING SEARCH PLACEHOLDER (assets/js/search-placeholder.js) ═══ */ .nav-search input::placeholder, .mobile-search-bar input::placeholder, .mh-scrolled-search input::placeholder, .br-mob-search-box input[type="search"]::placeholder{transition:opacity .3s ease} .br-ph-fade::placeholder{opacity:0} /* ═══ MOBILE CATEGORY TABS (horizontal scroll) ═══ */ .mobile-cat-tabs{display:none;padding:10px 0 0;background:#fff;border-bottom:1px solid var(--clr-border);overflow:hidden} .mobile-cat-tabs-inner{display:flex;overflow-x:auto;scrollbar-width:none;gap:0;padding:0 16px} .mobile-cat-tabs-inner::-webkit-scrollbar{display:none} .mobile-cat-tab{flex-shrink:0;padding:8px 16px;font-family:var(--font-ui);font-size:13px;font-weight:500;color:var(--clr-muted);white-space:nowrap;border-bottom:2px solid transparent;transition:all 0.2s;cursor:pointer} .mobile-cat-tab.active{color:var(--clr-accent);border-bottom-color:var(--clr-accent)} /* ═══ MOBILE CATEGORY GRID (round thumbnails like WoodenStreet) ═══ */ .mobile-cat-grid{display:none;padding:16px 16px 8px;background:#fff} .mobile-cat-grid-inner{display:flex;flex-wrap:wrap;gap:4px 0} .mobile-cat-item{width:20%;text-align:center;padding:6px 4px;cursor:pointer} .mobile-cat-item img{width:56px;height:56px;border-radius:10px;object-fit:cover;margin:0 auto;border:1px solid var(--clr-border);background:var(--clr-bg);transition:transform 0.2s,box-shadow 0.2s} .mobile-cat-item:active img{transform:scale(0.94)} .mobile-cat-item span{display:block;font-family:var(--font-ui);font-size:10px;color:var(--clr-text);margin-top:5px;line-height:1.2;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} /* ═══ MOBILE: Sale Countdown Compact ═══ */ .m-sale-strip{display:none;background:#FFF8F0;padding:10px 16px;border-bottom:1px solid #F0DDB8} .m-sale-inner{display:flex;align-items:center;justify-content:center;gap:8px} .m-sale-icon{width:18px;height:18px;flex-shrink:0} .m-sale-icon svg{width:100%;height:100%;stroke:var(--clr-sale);fill:none;stroke-width:2} .m-sale-label{font-family:var(--font-ui);font-size:12px;font-weight:600;color:var(--clr-sale)} .m-sale-dash{color:var(--clr-muted);font-size:12px} .m-sale-time{font-family:var(--font-ui);font-size:13px;font-weight:700;color:var(--clr-dark);letter-spacing:0.5px} /* ═══ MOBILE: Why Choose / USP Section ═══ */ .m-usp{display:none;padding:24px 16px;background:#fff;border-bottom:1px solid var(--clr-border)} .m-usp-title{font-family:var(--font-display);font-size:20px;color:var(--clr-dark);text-align:center;font-weight:400;margin-bottom:4px} .m-usp-line{width:40px;height:2px;background:var(--clr-border);margin:0 auto 18px} .m-usp-grid{display:flex;justify-content:space-around;gap:8px} .m-usp-item{text-align:center;flex:1} .m-usp-item-icon{width:40px;height:40px;border-radius:50%;border:1.5px solid var(--clr-accent);display:flex;align-items:center;justify-content:center;margin:0 auto 6px} .m-usp-item-icon svg{width:20px;height:20px;stroke:var(--clr-accent);fill:none;stroke-width:1.5} .m-usp-item-text{font-family:var(--font-ui);font-size:10px;color:var(--clr-text);line-height:1.3} /* ═══ MOBILE: "Big Discounts" 3-col Grid ═══ */ .m-disc{display:none;padding:24px 16px;background:#fff} .m-disc-title{font-family:var(--font-display);font-size:20px;color:var(--clr-dark);font-weight:400;margin-bottom:16px;font-style:italic} .m-disc-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px} .m-disc-card{text-align:center;cursor:pointer} .m-disc-card img{width:100%;aspect-ratio:1;object-fit:cover;border-radius:10px;border:1px solid var(--clr-border);transition:transform 0.2s} .m-disc-card:active img{transform:scale(0.96)} .m-disc-card span{display:block;font-family:var(--font-ui);font-size:11px;font-weight:600;color:var(--clr-dark);margin-top:8px} /* ═══ MOBILE: Promo Banner (full-width) ═══ */ .m-promo{display:none;padding:0 16px;margin:16px 0} .m-promo-card{position:relative;border-radius:12px;overflow:hidden;height:160px;background:var(--clr-bg-alt)} .m-promo-card img{width:100%;height:100%;object-fit:cover} .m-promo-content{position:absolute;top:0;left:0;bottom:0;width:55%;display:flex;flex-direction:column;justify-content:center;padding:16px;background:linear-gradient(to right,rgba(255,255,255,0.92) 60%,transparent 100%)} .m-promo-badge{font-family:var(--font-ui);font-size:9px;font-weight:700;color:#fff;background:var(--clr-dark);padding:3px 8px;border-radius:3px;display:inline-block;width:fit-content;margin-bottom:6px;letter-spacing:0.08em} .m-promo-name{font-family:var(--font-display);font-size:18px;color:var(--clr-dark);font-weight:500;line-height:1.2} .m-promo-sub{font-family:var(--font-body);font-size:11px;color:var(--clr-muted);font-style:italic;margin-top:4px} .m-promo-price{font-family:var(--font-ui);font-size:14px;font-weight:700;color:var(--clr-dark);margin-top:6px} .m-promo-price small{font-weight:400;font-size:10px;color:var(--clr-muted)} .m-promo-dots{display:flex;justify-content:center;gap:6px;margin-top:10px} .m-promo-dot{width:6px;height:6px;border-radius:50%;background:var(--clr-border)} .m-promo-dot.active{width:18px;border-radius:3px;background:var(--clr-accent)} /* ═══ MOBILE: Stories Behind the Style ═══ */ .m-stories{display:none;padding:24px 16px;background:#fff} .m-stories-title{font-family:var(--font-display);font-size:20px;color:var(--clr-dark);font-weight:400;font-style:italic;margin-bottom:16px} .m-stories-scroll{display:flex;gap:12px;overflow-x:auto;scrollbar-width:none;padding-bottom:4px} .m-stories-scroll::-webkit-scrollbar{display:none} .m-stories-card{flex:0 0 200px;background:#fff;border-radius:10px;overflow:hidden;border:1px solid var(--clr-border)} .m-stories-card img{width:100%;height:180px;object-fit:cover} .m-stories-card-info{padding:10px 12px 14px} .m-stories-card-name{font-family:var(--font-body);font-size:12px;color:var(--clr-text);line-height:1.3;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;margin-bottom:4px} .m-stories-card-stars{display:flex;align-items:center;gap:3px;margin-bottom:6px} .m-stories-card-stars .star-ico{width:12px;height:12px} .m-stories-card-stars .count{font-family:var(--font-ui);font-size:10px;color:var(--clr-muted)} .m-stories-card-price{font-family:var(--font-ui);font-size:14px;font-weight:600;color:var(--clr-dark)} .m-stories-card-price s{font-size:11px;color:var(--clr-muted);font-weight:400;margin:0 4px} .m-stories-card-price .off{font-size:10px;color:var(--clr-accent);font-weight:700} /* ═══ MOBILE: Category Section with Title ═══ */ .m-cat-section{display:none;padding:24px 16px;background:#fff;border-top:6px solid var(--clr-bg)} .m-cat-section-title{font-family:var(--font-display);font-size:20px;color:var(--clr-dark);font-weight:400;font-style:italic;margin-bottom:4px} .m-cat-section-sub{font-family:var(--font-body);font-size:12px;color:var(--clr-muted);margin-bottom:16px} .m-cat-section-viewall{float:right;font-family:var(--font-ui);font-size:11px;color:var(--clr-accent);font-weight:600;border:1px solid var(--clr-accent);padding:4px 12px;border-radius:4px;margin-top:-28px} /* ═══ MOBILE: Experience Stores Across the UK ═══ */ .m-stores{display:none;padding:24px 16px;background:#fff;border-top:6px solid var(--clr-bg)} .m-stores-head{display:flex;align-items:center;gap:14px;margin-bottom:18px} .m-stores-count{font-family:var(--font-display);font-size:38px;font-weight:700;color:var(--clr-dark);line-height:1;letter-spacing:-1px} .m-stores-title{font-family:var(--font-ui);font-size:14px;font-weight:500;color:var(--clr-dark);line-height:1.3} .m-stores-divider{width:30px;height:1.5px;background:var(--clr-accent);margin:4px 0} .m-stores-scroll{display:flex;gap:16px;overflow-x:auto;scrollbar-width:none;padding:4px 0 8px;justify-content:center;flex-wrap:nowrap} .m-stores-scroll::-webkit-scrollbar{display:none} .m-store-card{flex-shrink:0;text-align:center;width:64px;cursor:pointer} .m-store-icon{width:56px;height:56px;border-radius:50%;background:#FFF4E6;display:flex;align-items:center;justify-content:center;margin:0 auto 6px;border:1px solid #F0DDB8;transition:transform 0.2s} .m-store-card:active .m-store-icon{transform:scale(0.94)} .m-store-icon svg{width:36px;height:36px;stroke:#B87333;fill:none;stroke-width:1.4;stroke-linejoin:round;stroke-linecap:round} .m-store-name{font-family:var(--font-ui);font-size:11px;font-weight:600;color:var(--clr-dark);line-height:1.2;margin-bottom:1px} .m-store-count{font-family:var(--font-ui);font-size:10px;color:var(--clr-muted)} /* ═══ MOBILE: Video Testimonials ═══ */ .m-reviews{display:none;padding:24px 16px;background:#fff;border-top:6px solid var(--clr-bg)} .m-reviews-head{display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:16px} .m-reviews-title{font-family:var(--font-display);font-size:20px;color:var(--clr-dark);font-weight:400;font-style:italic;line-height:1.2} .m-reviews-title small{display:block;font-family:var(--font-body);font-size:12px;color:var(--clr-muted);font-style:normal;margin-top:2px} .m-reviews-viewall{font-family:var(--font-ui);font-size:11px;color:var(--clr-muted);border:1px solid var(--clr-border);padding:5px 14px;border-radius:4px;flex-shrink:0;margin-top:4px} .m-reviews-scroll{display:flex;gap:12px;overflow-x:auto;scrollbar-width:none;padding-bottom:4px} .m-reviews-scroll::-webkit-scrollbar{display:none} .m-review-card{flex:0 0 260px;border:1px solid var(--clr-border);border-radius:12px;overflow:hidden;background:#fff} .m-review-video{position:relative;height:180px;background:var(--clr-bg-alt);overflow:hidden} .m-review-video img{width:100%;height:100%;object-fit:cover} .m-review-play{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:44px;height:44px;border-radius:50%;background:rgba(255,255,255,0.9);display:flex;align-items:center;justify-content:center;box-shadow:0 2px 12px rgba(0,0,0,0.2)} .m-review-play svg{width:18px;height:18px;fill:var(--clr-dark);stroke:none;margin-left:2px} .m-review-info{padding:14px} .m-review-text{font-family:var(--font-body);font-size:12px;color:var(--clr-muted);line-height:1.5;display:-webkit-box;-webkit-line-clamp:4;-webkit-box-orient:vertical;overflow:hidden;margin-bottom:10px} .m-review-stars{display:flex;gap:2px;margin-bottom:8px} .m-review-stars .star-ico{width:14px;height:14px} .m-review-author{font-family:var(--font-ui);font-size:12px;font-weight:600;color:var(--clr-dark)} .m-review-city{font-family:var(--font-ui);font-size:10px;color:var(--clr-muted)} /* ═══ MOBILE: Accordion Footer ═══ */ .m-footer{display:none;background:#fff;border-top:6px solid var(--clr-bg)} .m-footer-accord{border-bottom:1px solid var(--clr-border)} .m-footer-accord-head{display:flex;justify-content:space-between;align-items:center;padding:14px 16px;cursor:pointer;font-family:var(--font-ui);font-size:14px;font-weight:500;color:var(--clr-dark)} .m-footer-accord-head .chevron{width:14px;height:14px;transition:transform 0.3s;color:var(--clr-muted)} .m-footer-accord-head .chevron svg{width:100%;height:100%;stroke:currentColor;fill:none;stroke-width:2} .m-footer-accord.open .chevron{transform:rotate(180deg)} .m-footer-accord-body{max-height:0;overflow:hidden;transition:max-height 0.35s ease;padding:0 16px} .m-footer-accord.open .m-footer-accord-body{max-height:500px} .m-footer-accord-grid{display:grid;grid-template-columns:1fr 1fr;gap:6px 16px;padding-bottom:16px} .m-footer-accord-grid a{font-family:var(--font-ui);font-size:13px;color:var(--clr-muted);padding:6px 0;transition:color 0.2s} .m-footer-delivery{padding:20px 16px;border-top:1px solid var(--clr-border)} .m-footer-delivery h4{font-family:var(--font-ui);font-size:14px;font-weight:600;color:var(--clr-dark);margin-bottom:8px} .m-footer-delivery p{font-family:var(--font-ui);font-size:12px;color:var(--clr-muted);line-height:1.7} .m-footer-delivery a{color:var(--clr-accent)} .m-footer-links{padding:20px 16px;display:grid;grid-template-columns:1fr 1fr;gap:0} .m-footer-links-col h5{font-family:var(--font-ui);font-size:13px;font-weight:600;color:var(--clr-accent);margin-bottom:10px} .m-footer-links-col a{display:block;font-family:var(--font-ui);font-size:12px;color:var(--clr-muted);padding:5px 0} .m-footer-social{padding:16px;text-align:center;border-top:1px solid var(--clr-border)} .m-footer-social-label{font-family:var(--font-ui);font-size:12px;color:var(--clr-muted);margin-bottom:12px} .m-footer-social-icons{display:flex;justify-content:center;gap:16px} .m-footer-social-icons a{width:36px;height:36px;border-radius:50%;border:1px solid var(--clr-border);display:flex;align-items:center;justify-content:center;color:var(--clr-muted);transition:all 0.2s} .m-footer-social-icons a:hover{border-color:var(--clr-accent);color:var(--clr-accent)} .m-footer-social-icons svg{width:16px;height:16px;fill:currentColor} .m-footer-bottom{padding:20px 16px;text-align:center;background:var(--clr-bg);border-top:1px solid var(--clr-border)} .m-footer-copy{font-family:var(--font-ui);font-size:11px;color:var(--clr-muted);line-height:1.6} .m-footer-reg{font-family:var(--font-ui);font-size:11px;color:var(--clr-muted);margin-top:12px;line-height:1.6} .m-footer-reg strong{color:var(--clr-dark);font-weight:600;display:block;margin-bottom:4px} /* ═══════════════════════════════════════ S3 — HERO BANNER ═══════════════════════════════════════ */ .hero{display:flex;gap:8px;height:460px;overflow:hidden} /* Main slider */ .hero-slider{flex:0 0 68%;position:relative;overflow:hidden;background:var(--clr-dark)} .hero-slide{position:absolute;inset:0;opacity:0;transition:opacity 0.6s ease-in-out;z-index:0} .hero-slide.active{opacity:1;z-index:1} .hero-slide-bg{width:100%;height:100%;object-fit:cover} .hero-slide-overlay{position:absolute;inset:0;background:linear-gradient(to top right,rgba(0,0,0,0.72) 0%,rgba(0,0,0,0.4) 40%,transparent 70%)} .hero-slide-content{position:absolute;bottom:40px;left:40px;max-width:420px;z-index:2} .hero-badge{display:inline-block;font-family:var(--font-ui);font-size:11px;font-weight:700;letter-spacing:0.1em;color:#fff;padding:4px 12px;border-radius:4px;margin-bottom:10px;text-transform:uppercase} .hero-badge.red{background:var(--clr-sale)} .hero-badge.green{background:var(--clr-dark)} .hero-label{font-family:var(--font-ui);font-size:11px;color:var(--clr-accent);letter-spacing:0.2em;text-transform:uppercase;margin-bottom:8px} .hero-heading{font-family:var(--font-display);font-size:48px;font-weight:400;color:#fff;line-height:1.1;white-space:pre-line} .hero-sub{font-family:var(--font-body);font-size:15px;font-style:italic;color:rgba(255,255,255,0.8);margin-top:8px} .hero-cta{display:inline-block;background:#fff;color:var(--clr-dark);font-family:var(--font-ui);font-size:12px;font-weight:600;letter-spacing:0.15em;text-transform:uppercase;padding:12px 28px;border-radius:4px;margin-top:20px;transition:background var(--transition),color var(--transition)} .hero-cta:hover{background:var(--clr-accent);color:var(--clr-dark)} /* Slider arrows */ .hero-arrow{position:absolute;top:50%;transform:translateY(-50%);width:40px;height:40px;border-radius:50%;background:rgba(255,255,255,0.85);color:var(--clr-dark);font-size:20px;font-weight:300;display:flex;align-items:center;justify-content:center;z-index:10;opacity:0;transition:opacity 0.2s,box-shadow 0.2s,background 0.2s} .hero-slider:hover .hero-arrow{opacity:1} .hero-arrow:hover{background:#fff;box-shadow:0 2px 8px rgba(0,0,0,0.2)} .hero-arrow.prev{left:16px} .hero-arrow.next{right:16px} /* Dots */ .hero-dots{position:absolute;bottom:16px;left:50%;transform:translateX(-50%);display:flex;gap:8px;z-index:10} .hero-dot{width:8px;height:8px;border-radius:50%;background:rgba(255,255,255,0.5);cursor:pointer;transition:all 0.3s;border:none;padding:0} .hero-dot.active{background:#fff;width:24px;border-radius:4px} /* Right mini banners */ .hero-minis{flex:0 0 32%;display:flex;flex-direction:column;gap:8px} .hero-mini{flex:1;position:relative;overflow:hidden;border-radius:0;cursor:pointer} .hero-mini img{width:100%;height:100%;object-fit:cover;transition:transform 0.5s ease} .hero-mini:hover img{transform:scale(1.04)} .hero-mini-overlay{position:absolute;inset:0;background:linear-gradient(to top,rgba(0,0,0,0.7) 0%,transparent 100%)} .hero-mini-content{position:absolute;bottom:20px;left:20px;z-index:2} .hero-mini-badge{display:inline-block;font-family:var(--font-ui);font-size:9px;font-weight:700;color:#fff;background:var(--clr-sale);padding:3px 8px;border-radius:3px;text-transform:uppercase;letter-spacing:0.05em;margin-bottom:6px} .hero-mini-title{font-family:var(--font-display);font-size:22px;color:#fff} .hero-mini-price{font-family:var(--font-ui);font-size:12px;color:rgba(255,255,255,0.8);margin-top:4px} .hero-mini-price s{color:rgba(255,255,255,0.5);margin-left:6px;font-size:11px} .hero-mini-link{font-family:var(--font-ui);font-size:11px;color:var(--clr-accent);margin-top:6px;display:inline-block} .hero-mini-link:hover{text-decoration:underline} /* ═══════════════════════════════════════ S4 — SALE COUNTDOWN ═══════════════════════════════════════ */ .countdown-strip{background:linear-gradient(135deg,#FFF8F0 0%,#FFF4E6 100%);border-top:1px solid #F0DDB8;border-bottom:1px solid #F0DDB8;padding:14px 0} .countdown-strip .container{display:flex;justify-content:space-between;align-items:center;width:100%} .countdown-left{display:flex;align-items:center;gap:18px} .countdown-sale{font-family:var(--font-ui);font-size:11px;font-weight:700;color:#fff;background:var(--clr-sale);padding:5px 14px;border-radius:4px;letter-spacing:0.15em;text-transform:uppercase;line-height:1} .countdown-boxes{display:flex;gap:4px;align-items:center} .countdown-unit{text-align:center} .countdown-num{font-family:var(--font-ui);font-size:22px;font-weight:700;color:var(--clr-dark);background:#fff;width:42px;height:42px;display:flex;align-items:center;justify-content:center;border-radius:6px;border:1px solid var(--clr-border);box-shadow:0 1px 3px rgba(0,0,0,0.06);transition:transform 0.15s;line-height:1} .countdown-num.tick{transform:scaleY(1.12)} .countdown-lbl{font-family:var(--font-ui);font-size:9px;color:var(--clr-muted);margin-top:4px;text-transform:uppercase;letter-spacing:0.08em} .countdown-sep{font-family:var(--font-ui);font-size:18px;font-weight:300;color:var(--clr-muted);margin:0 1px;align-self:flex-start;margin-top:8px} .trust-items{display:flex;gap:8px} .trust-item{display:flex;align-items:center;gap:8px;font-family:var(--font-ui);font-size:12px;font-weight:500;color:var(--clr-text);background:#fff;padding:8px 16px;border-radius:6px;border:1px solid var(--clr-border);white-space:nowrap} .trust-sep{width:1px;height:20px;background:var(--clr-border);display:none} /* ═══════════════════════════════════════ S5 — SHOP BY CATEGORY ═══════════════════════════════════════ */ .cat-section{padding:28px 0 40px} .cat-grid{display:grid;grid-template-columns:repeat(6,1fr);gap:12px} .cat-card{background:var(--clr-bg-alt);border-radius:8px;overflow:hidden;cursor:pointer;text-align:center} .cat-card-img{aspect-ratio:1;overflow:hidden} .cat-card-img img{width:100%;height:100%;object-fit:cover;transition:transform 0.5s cubic-bezier(0.4,0,0.2,1)} .cat-card:hover .cat-card-img img{transform:scale(1.05)} .cat-card-info{padding:12px 8px 14px} .cat-card-name{font-family:var(--font-ui);font-size:12px;letter-spacing:0.12em;text-transform:uppercase;color:var(--clr-text);position:relative;display:inline-block;transition:color var(--transition)} .cat-card:hover .cat-card-name{color:var(--clr-accent)} .cat-card-name::after{content:'';position:absolute;bottom:-4px;left:50%;width:0;height:1.5px;background:var(--clr-accent);transition:width 0.3s ease;transform:translateX(-50%)} .cat-card:hover .cat-card-name::after{width:32px} .cat-card-price{font-family:var(--font-body);font-size:12px;color:var(--clr-muted);margin-top:4px} /* ═══════════════════════════════════════ S6/S8 — PRODUCT ROW (Best Sellers / Top Rated) ═══════════════════════════════════════ */ .prod-section{padding:40px 0 48px} .prod-header{display:flex;justify-content:space-between;align-items:flex-end;border-bottom:1px solid var(--clr-border);padding-bottom:16px;margin-bottom:24px} .prod-header-left h2{font-family:var(--font-display);font-size:26px;color:var(--clr-dark);font-weight:400} .prod-header-left p{font-family:var(--font-body);font-size:13px;color:var(--clr-muted);margin-top:2px} .prod-header-right a{font-family:var(--font-ui);font-size:12px;color:var(--clr-accent);letter-spacing:0.08em;text-transform:uppercase;font-weight:500} .prod-header-right a:hover{text-decoration:underline} .prod-row-wrap{position:relative} .prod-row{display:flex;gap:16px;overflow-x:auto;scroll-behavior:smooth;scrollbar-width:none;padding-bottom:8px} .prod-row::-webkit-scrollbar{display:none} .prod-arrow{position:absolute;top:50%;transform:translateY(-70%);width:36px;height:36px;border-radius:50%;background:#fff;border:1px solid var(--clr-border);color:var(--clr-dark);font-size:18px;display:flex;align-items:center;justify-content:center;z-index:10;transition:all 0.2s;box-shadow:0 2px 8px rgba(0,0,0,0.06)} .prod-arrow:hover{border-color:var(--clr-accent);color:var(--clr-accent)} .prod-arrow.disabled{opacity:0.3;pointer-events:none} .prod-arrow.left{left:-18px} .prod-arrow.right{right:-18px} .prod-card{flex:0 0 220px;background:#fff;border:1px solid var(--clr-border);border-radius:10px;overflow:hidden;transition:all 0.4s cubic-bezier(0.25,0.46,0.45,0.94);position:relative;display:flex;flex-direction:column} .prod-card:hover{box-shadow:0 12px 32px rgba(26,46,26,0.12);transform:translateY(-4px);border-color:transparent} .prod-card-img{width:220px;height:220px;position:relative;background:var(--clr-bg);overflow:hidden} .prod-card-img img{width:100%;height:100%;object-fit:contain;padding:12px;transition:transform 0.6s cubic-bezier(0.25,0.46,0.45,0.94)} .prod-card:hover .prod-card-img img{transform:scale(1.06)} /* Badge */ .prod-card-badge{position:absolute;top:10px;left:10px;background:var(--clr-dark);color:#fff;font-family:var(--font-ui);font-size:9px;font-weight:600;padding:4px 10px;border-radius:4px;letter-spacing:0.08em;text-transform:uppercase;z-index:3} /* Wishlist */ .prod-card-wish{position:absolute;top:10px;right:10px;width:34px;height:34px;border-radius:50%;background:rgba(255,255,255,0.9);backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);border:none;box-shadow:0 2px 8px rgba(0,0,0,0.08);display:flex;align-items:center;justify-content:center;z-index:3;transition:all 0.25s ease;color:var(--clr-muted);opacity:0;transform:scale(0.8)} .prod-card:hover .prod-card-wish{opacity:1;transform:scale(1)} .prod-card-wish:hover{background:#fff;color:var(--clr-sale);box-shadow:0 4px 12px rgba(0,0,0,0.12);transform:scale(1.1)!important} .prod-card-wish.liked,.prod-card-wish.is-active{opacity:1;transform:scale(1);color:#C0392B;background:#fff} .prod-card-wish.liked svg,.prod-card-wish.is-active svg{fill:#C0392B;stroke:#C0392B} .prod-card-wish svg{width:16px;height:16px;stroke:currentColor;fill:none;stroke-width:2} /* Quick View — glass overlay with icon */ .prod-card-quick{position:absolute;inset:0;background:rgba(26,46,26,0.0);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;z-index:2;transition:background 0.35s ease;cursor:pointer} .prod-card-quick-inner{display:flex;align-items:center;gap:8px;background:rgba(255,255,255,0.95);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);padding:10px 22px;border-radius:8px;box-shadow:0 4px 20px rgba(0,0,0,0.15);transform:translateY(12px) scale(0.95);opacity:0;transition:all 0.35s cubic-bezier(0.25,0.46,0.45,0.94)} .prod-card-quick-inner svg{width:18px;height:18px;stroke:var(--clr-dark);fill:none;stroke-width:1.8} .prod-card-quick-inner span{font-family:var(--font-ui);font-size:12px;font-weight:600;letter-spacing:0.1em;text-transform:uppercase;color:var(--clr-dark)} .prod-card:hover .prod-card-quick{background:rgba(26,46,26,0.15)} .prod-card:hover .prod-card-quick-inner{transform:translateY(0) scale(1);opacity:1} .prod-card-quick-inner:hover{background:#fff;box-shadow:0 6px 24px rgba(0,0,0,0.2);transform:translateY(0) scale(1.03)!important} /* Info block */ .prod-card-info{padding:14px 14px 14px;display:flex;flex-direction:column;flex:1} .prod-card-name{font-family:var(--font-body);font-size:14px;color:var(--clr-text);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;margin-bottom:6px;line-height:1.4} .prod-stars{display:flex;align-items:center;gap:4px;margin-bottom:8px} .prod-stars .stars{color:var(--clr-accent);font-size:13px;letter-spacing:1px} .prod-stars .count{font-family:var(--font-ui);font-size:11px;color:var(--clr-muted)} .prod-price-row{display:flex;align-items:center;gap:8px;flex-wrap:wrap} .prod-price-now{font-family:var(--font-ui);font-size:16px;font-weight:600;color:var(--clr-dark)} .prod-price-was{font-family:var(--font-body);font-size:12px;color:var(--clr-muted);text-decoration:line-through} .prod-off{background:var(--clr-accent);color:#fff;font-family:var(--font-ui);font-size:9px;font-weight:700;padding:2px 6px;border-radius:4px} /* Add to Cart — premium slide-up with icon */ /* Add to Cart — always visible, clean hover */ .prod-atc{display:flex;align-items:center;justify-content:center;gap:8px;width:100%;padding:11px 10px;border-radius:6px;background:var(--clr-dark);color:#fff !important;font-family:var(--font-ui);font-size:11px;font-weight:600;letter-spacing:0.14em;text-transform:uppercase;text-align:center;margin-top:auto;transition:background 0.3s ease,box-shadow 0.3s ease,transform 0.2s ease;border:none;cursor:pointer;text-decoration:none} .prod-atc svg{width:15px;height:15px;stroke:#fff !important;fill:none;stroke-width:2;flex-shrink:0} .prod-atc span{color:#fff !important} .prod-atc:hover{background:#0f1f0f;box-shadow:0 4px 12px rgba(26,46,26,0.25);transform:translateY(-1px)} .prod-atc:hover svg,.prod-atc:hover span{color:#fff !important;stroke:#fff !important} .prod-atc:active{transform:translateY(0)} /* ═══════════════════════════════════════ S7 — DARK EDITORIAL BANNER ═══════════════════════════════════════ */ .editorial{background:var(--clr-dark);padding:0 80px;display:flex;align-items:center;justify-content:space-between;min-height:260px;overflow:hidden} .editorial-text{max-width:600px;padding:40px 0} .editorial-h1{font-family:var(--font-display);font-size:46px;font-weight:300;color:var(--clr-ivory)} .editorial-h2{font-family:var(--font-display);font-size:46px;font-weight:300;font-style:italic;color:var(--clr-accent)} .editorial-sub{font-family:var(--font-body);font-size:14px;color:rgba(245,240,232,0.7);margin-top:10px} .editorial-btns{display:flex;gap:16px;margin-top:24px} .btn-accent{display:inline-block;background:var(--clr-accent);color:#fff;font-family:var(--font-ui);font-size:12px;font-weight:600;letter-spacing:0.12em;text-transform:uppercase;padding:12px 28px;border-radius:4px;transition:background 0.3s} .btn-accent:hover{background:#b8892f} .btn-outline-ivory{display:inline-block;border:1px solid rgba(245,240,232,0.5);color:var(--clr-ivory);font-family:var(--font-ui);font-size:12px;font-weight:500;letter-spacing:0.12em;text-transform:uppercase;padding:12px 28px;border-radius:4px;transition:border-color 0.3s} .btn-outline-ivory:hover{border-color:#fff} .editorial-art{width:200px;height:200px;opacity:0.12;flex-shrink:0} .editorial-art svg{width:100%;height:100%} /* ═══════════════════════════════════════ S9 — HANDPICKED COLLECTIONS ═══════════════════════════════════════ */ .collections{padding:56px 0} .collections h2{font-family:var(--font-display);font-size:30px;color:var(--clr-dark);text-align:center;margin-bottom:32px;font-weight:400} .collections-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px} .collection-card{aspect-ratio:3/4;position:relative;overflow:hidden;border-radius:10px;cursor:pointer} .collection-card img{width:100%;height:100%;object-fit:cover;transition:transform 0.5s ease} .collection-card:hover img{transform:scale(1.04)} .collection-card:hover{box-shadow:inset 0 0 0 2px var(--clr-accent)} .collection-overlay{position:absolute;inset:0;background:linear-gradient(to top,rgba(0,0,0,0.7) 0%,transparent 50%)} .collection-text{position:absolute;bottom:24px;left:24px;z-index:2} .collection-name{font-family:var(--font-display);font-size:26px;font-style:italic;color:#fff} .collection-link{font-family:var(--font-ui);font-size:12px;color:var(--clr-accent);margin-top:6px;display:inline-block} /* ═══════════════════════════════════════ S10 — TRUST STATS ═══════════════════════════════════════ */ .stats-strip{background:var(--clr-bg-alt);padding:40px 0} .stats-row{display:flex;justify-content:center;gap:80px} .stat-block{text-align:center} .stat-num{font-family:var(--font-display);font-size:44px;color:var(--clr-dark)} .stat-label{font-family:var(--font-ui);font-size:12px;color:var(--clr-muted);letter-spacing:0.1em;text-transform:uppercase;margin-top:4px} .stat-divider{width:1px;background:var(--clr-border);align-self:stretch} /* ═══════════════════════════════════════ S11 — TESTIMONIALS ═══════════════════════════════════════ */ /* ═══════════════════════════════════════ S11 — TESTIMONIALS (WoodenStreet video card style) ═══════════════════════════════════════ */ .testimonials{padding:56px 0} .test-header{display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:28px;padding:0} .test-header-left h2{font-family:var(--font-display);font-size:28px;color:var(--clr-dark);font-weight:400;margin-bottom:2px} .test-header-left p{font-family:var(--font-body);font-size:13px;color:var(--clr-accent);font-style:italic} .test-header-right a{font-family:var(--font-ui);font-size:12px;color:var(--clr-muted);border:1px solid var(--clr-border);padding:8px 20px;border-radius:6px;display:inline-flex;align-items:center;gap:6px;transition:all 0.2s} .test-header-right a:hover{border-color:var(--clr-dark);color:var(--clr-dark)} .test-header-right a svg{width:14px;height:14px;stroke:currentColor;fill:none;stroke-width:2} .test-row-wrap{position:relative} .test-row{display:flex;gap:20px;overflow-x:auto;scroll-behavior:smooth;scrollbar-width:none;padding-bottom:8px} .test-row::-webkit-scrollbar{display:none} .test-arrow{position:absolute;top:50%;transform:translateY(-60%);width:36px;height:36px;border-radius:50%;background:#fff;border:1px solid var(--clr-border);color:var(--clr-dark);font-size:18px;display:flex;align-items:center;justify-content:center;z-index:10;box-shadow:0 2px 8px rgba(0,0,0,0.06);cursor:pointer;transition:all 0.2s} .test-arrow:hover{border-color:var(--clr-accent);color:var(--clr-accent)} .test-arrow.left{left:-18px} .test-arrow.right{right:-18px} .test-card{flex:0 0 300px;background:#fff;border:1px solid var(--clr-border);border-radius:12px;overflow:hidden;display:flex;flex-direction:column} /* Video thumbnail */ .test-card-video{position:relative;height:200px;overflow:hidden;background:var(--clr-bg-alt);cursor:pointer} .test-card-video img{width:100%;height:100%;object-fit:cover;transition:transform 0.4s} .test-card:hover .test-card-video img{transform:scale(1.03)} .test-card-play{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:48px;height:48px;border-radius:50%;background:rgba(255,255,255,0.92);display:flex;align-items:center;justify-content:center;box-shadow:0 3px 16px rgba(0,0,0,0.2);transition:transform 0.2s} .test-card:hover .test-card-play{transform:translate(-50%,-50%) scale(1.08)} .test-card-play svg{width:20px;height:20px;fill:var(--clr-accent);stroke:none;margin-left:3px} /* Branding overlay on video */ .test-card-brand{position:absolute;top:14px;left:14px;background:rgba(255,255,255,0.88);backdrop-filter:blur(4px);padding:6px 10px;border-radius:6px;line-height:1.2} .test-card-brand strong{font-family:var(--font-display);font-size:13px;color:var(--clr-dark);display:block} .test-card-brand small{font-family:var(--font-ui);font-size:9px;color:var(--clr-muted);display:block;margin-top:1px} /* Review text area */ .test-card-body{padding:16px 18px;flex:1;display:flex;flex-direction:column} .test-card-text{font-family:var(--font-body);font-size:13px;color:var(--clr-muted);line-height:1.65;flex:1;display:-webkit-box;-webkit-line-clamp:5;-webkit-box-orient:vertical;overflow:hidden;margin-bottom:12px} /* Stars */ .test-card-stars{display:flex;gap:3px;margin-bottom:10px} .test-card-stars .star-ico{width:16px;height:16px} /* Author */ .test-card-author{font-family:var(--font-ui);font-size:13px;font-weight:600;color:var(--clr-dark)} .test-card-city{font-family:var(--font-ui);font-size:11px;color:var(--clr-muted)} /* ═══════════════════════════════════════ S12 — NEWSLETTER ═══════════════════════════════════════ */ /* ═══════════════════════════════════════ */ /* NEWSLETTER — Compact Premium Horizontal */ /* ═══════════════════════════════════════ */ .newsletter{position:relative;background:linear-gradient(135deg,#F7F5F0 0%,#EDEADE 50%,#F7F5F0 100%);padding:22px 0;overflow:hidden;isolation:isolate} .newsletter::before{content:'';position:absolute;inset:0;background-image:radial-gradient(circle,rgba(201,151,58,0.06) 1px,transparent 1px);background-size:18px 18px;pointer-events:none;z-index:0} .newsletter > .container{position:relative;z-index:1} /* Ornaments hidden in compact version */ .nl-ornament{display:none} /* Compact horizontal card — all items in one row */ .nl-card{display:flex;align-items:center;gap:24px;background:rgba(255,255,255,0.7);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);border:1px solid rgba(201,151,58,0.2);border-radius:14px;padding:16px 24px;box-shadow:0 4px 18px rgba(15,46,62,0.06);position:relative;z-index:1;max-width:100%} /* Compact gift icon */ .nl-icon{width:44px;height:44px;margin:0;background:#FFF8F0;border:1.5px solid rgba(201,151,58,0.3);border-radius:50%;display:flex;align-items:center;justify-content:center;box-shadow:0 2px 8px rgba(201,151,58,0.12);flex-shrink:0} .nl-icon svg{width:20px;height:20px} /* Hide ornamental label in compact */ .nl-label{display:none} /* Compact text block — left side, narrow */ .nl-text-wrap{display:flex;flex-direction:column;gap:2px;flex:0 0 30%;min-width:0;text-align:left} .nl-title{font-family:'Cormorant Garamond',serif;font-size:22px;font-weight:600;color:#0F2E3E;line-height:1.15;letter-spacing:-0.3px;margin:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .nl-title br{display:none} .nl-percent{color:#C9973A;font-style:italic;position:relative;display:inline-block;padding:0 2px} .nl-percent::after{content:'';position:absolute;bottom:2px;left:0;right:0;height:5px;background:rgba(201,151,58,0.18);z-index:-1;border-radius:2px} .nl-sub{font-family:'Lora',serif;font-size:11.5px;font-style:italic;color:#6B5C4E;line-height:1.4;margin:0;max-width:none;display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical;overflow:hidden;text-overflow:ellipsis} .nl-sub strong{color:#0F2E3E;font-style:normal;font-weight:700} /* Form fills middle space */ .nl-form{flex:1;margin:0;max-width:none;min-width:0;display:flex;flex-direction:column;gap:0} .nl-form-row{display:flex;gap:6px;background:#fff;border:1.5px solid rgba(15,46,62,0.12);border-radius:46px;padding:4px 4px 4px 16px;box-shadow:0 2px 12px rgba(15,46,62,0.05);transition:border-color 0.25s,box-shadow 0.25s;align-items:center} .nl-form-row:focus-within{border-color:#C9973A;box-shadow:0 2px 14px rgba(201,151,58,0.2)} .nl-input-wrap{flex:1;display:flex;align-items:center;gap:8px;min-width:0} .nl-input-icon{width:15px;height:15px;stroke:#6B5C4E;flex-shrink:0;opacity:0.5} .nl-form input[type="email"]{flex:1;min-width:0;border:none;outline:none;background:transparent;font-family:'Lora',serif;font-size:13px;color:#0F2E3E;padding:10px 0;height:auto;width:100%} .nl-form input[type="email"]::placeholder{color:#A39B92;font-style:italic} .nl-submit{display:inline-flex;align-items:center;gap:6px;background:linear-gradient(135deg,#1A2E1A 0%,#0F2E3E 100%);color:#fff;font-family:'Jost',sans-serif;font-size:11px;font-weight:700;letter-spacing:0.12em;text-transform:uppercase;border:none;border-radius:40px;padding:10px 18px;cursor:pointer;white-space:nowrap;transition:transform 0.25s,box-shadow 0.25s,background 0.3s;flex-shrink:0;line-height:1} .nl-submit:hover{background:linear-gradient(135deg,#C9973A 0%,#b8862f 100%);transform:translateY(-1px);box-shadow:0 4px 14px rgba(201,151,58,0.3)} .nl-submit svg{width:12px;height:12px;stroke:#fff;transition:transform 0.25s} .nl-submit:hover svg{transform:translateX(2px)} .nl-success-msg{font-family:'Lora',serif;font-size:11px;color:#1A2E1A;font-style:italic;margin:4px 0 0 16px;min-height:0;transition:min-height 0.3s} .nl-form.nl-success .nl-success-msg{min-height:14px;color:#1A2E1A;font-weight:600;font-style:normal} .nl-form.nl-success .nl-form-row{background:#F0F5EE;border-color:#1A2E1A} /* Compact trust badges — right side, icon-only with tooltip */ .nl-trust{display:flex;align-items:center;gap:6px;margin:0;padding:0 0 0 8px;border:none;border-left:1px solid rgba(201,151,58,0.25);flex-shrink:0} .nl-trust-item{position:relative;display:inline-flex;align-items:center;justify-content:center;width:30px;height:30px;border-radius:50%;background:rgba(201,151,58,0.08);font-family:'Jost',sans-serif;color:#6B5C4E;cursor:help;transition:background 0.2s} .nl-trust-item:hover{background:rgba(201,151,58,0.2)} .nl-trust-item svg{width:14px;height:14px;flex-shrink:0} .nl-trust-item span{position:absolute;bottom:calc(100% + 6px);left:50%;transform:translateX(-50%);background:#0F2E3E;color:#fff;font-size:10px;font-weight:600;letter-spacing:0.04em;padding:4px 10px;border-radius:4px;white-space:nowrap;opacity:0;pointer-events:none;transition:opacity 0.2s} .nl-trust-item:hover span{opacity:1} .nl-trust-divider{display:none} @media(max-width:991px){ .nl-card{gap:16px;padding:14px 18px} .nl-text-wrap{flex:0 0 26%} .nl-title{font-size:18px} .nl-sub{font-size:11px} .nl-trust{gap:4px;padding-left:6px} } @media(max-width:767px){ .newsletter{padding:14px 0} .nl-card{flex-direction:column;gap:10px;padding:16px 14px;border-radius:12px;text-align:center;align-items:center} .nl-icon{margin:0 auto;width:40px;height:40px} .nl-icon svg{width:18px;height:18px} .nl-text-wrap{flex:0 0 auto;text-align:center;align-items:center;width:100%} .nl-title{font-size:18px;white-space:normal} .nl-sub{-webkit-line-clamp:2;font-size:11px} .nl-form{width:100%} .nl-form-row{padding:4px 4px 4px 14px} .nl-submit{padding:9px 14px;font-size:10px} .nl-trust{border-left:none;padding-left:0;gap:8px} } /* ═══════════════════════════════════════ S13 — FOOTER ═══════════════════════════════════════ */ .footer{background:var(--clr-dark);color:var(--clr-ivory);padding:64px 80px 0} .footer-grid{display:grid;grid-template-columns:2fr 1fr 1fr 1fr 1fr;gap:40px} .footer-brand p{font-family:var(--font-body);font-size:13px;color:rgba(245,240,232,0.6);margin-top:16px;max-width:240px;line-height:1.7} .footer-logo{display:flex;align-items:center;gap:12px} .footer-logo-mark{font-family:var(--font-display);font-size:42px;font-weight:800;color:#fff;line-height:1;letter-spacing:-1.5px;position:relative} .footer-logo-mark::after{content:'';position:absolute;right:-5px;top:50%;width:8px;height:8px;background:var(--clr-accent);border-radius:50%;transform:translateY(-50%)} .footer-logo-text{display:flex;flex-direction:column;line-height:1.1;padding-left:14px;border-left:2px solid rgba(255,255,255,0.15);margin-left:6px} .footer-logo-name{font-family:var(--font-ui);font-size:15px;font-weight:700;color:#fff;letter-spacing:2px;text-transform:uppercase;line-height:1} .footer-logo-sub{font-family:var(--font-ui);font-size:10px;color:rgba(255,255,255,0.5);letter-spacing:3px;text-transform:uppercase;margin-top:5px;font-weight:500} .footer-social{display:flex;gap:12px;margin-top:24px} .footer-social a{width:36px;height:36px;border:1px solid rgba(255,255,255,0.2);border-radius:50%;display:flex;align-items:center;justify-content:center;color:rgba(245,240,232,0.6);transition:all 0.2s} .footer-social a:hover{border-color:var(--clr-accent);color:var(--clr-accent)} .footer-social svg{width:16px;height:16px;fill:currentColor} .footer-col h4{font-family:var(--font-ui);font-size:11px;font-weight:600;letter-spacing:0.2em;text-transform:uppercase;color:var(--clr-ivory);margin-bottom:16px} .footer-col a{display:block;font-family:var(--font-ui);font-size:13px;color:rgba(255,255,255,0.6);line-height:2.2;transition:color 0.2s} .footer-col a:hover{color:var(--clr-accent)} .footer-divider{border:none;border-top:1px solid rgba(255,255,255,0.1);margin:40px 0 0} .footer-bottom{display:flex;justify-content:space-between;align-items:center;padding:20px 0;flex-wrap:wrap;gap:16px} .footer-copy{font-family:var(--font-ui);font-size:11px;color:rgba(255,255,255,0.4);line-height:1.6} .footer-payments{display:flex;gap:12px;align-items:center} .footer-payments span{font-family:var(--font-ui);font-size:11px;color:rgba(255,255,255,0.35);border:1px solid rgba(255,255,255,0.15);padding:4px 10px;border-radius:4px} .footer-legal{display:flex;gap:16px} .footer-legal a{font-family:var(--font-ui);font-size:11px;color:rgba(255,255,255,0.4);transition:color 0.2s} .footer-legal a:hover{color:var(--clr-ivory)} /* ═══════════════════════════════════════ RESPONSIVE — TABLET ═══════════════════════════════════════ */ @media(max-width:1279px){ .hero{height:auto;flex-direction:column} .hero-slider{flex:none;width:100%;height:380px} .hero-minis{flex:none;width:100%;flex-direction:row;height:180px} .hero-heading{font-size:36px} .hero-sub{font-size:14px} .hero-badge{font-size:10px} .hero-cta{padding:10px 22px} .hero-mini-title{font-size:18px} .cat-grid{grid-template-columns:repeat(3,1fr)} .editorial{padding:0 40px} .editorial-h1,.editorial-h2{font-size:36px} .collections-grid{grid-template-columns:repeat(2,1fr)} .collections-grid .collection-card:last-child{grid-column:span 2} .stats-row{gap:48px} .footer{padding:48px 40px 0} .footer-grid{grid-template-columns:1fr 1fr} } /* ═══════════════════════════════════════ RESPONSIVE — MOBILE ═══════════════════════════════════════ */ @media(max-width:767px){ .container,.woocommerce .container,.woocommerce-page .container{padding-left:16px !important;padding-right:16px !important;box-sizing:border-box !important} .nav-utility,.nav-brand,.nav-mega{display:none} .announce-bar{display:none} .mobile-header{display:flex} body{padding-top:58px} .mobile-search{display:block} .mobile-cat-tabs{display:block} .mobile-cat-grid{display:block} .m-sale-strip{display:block} .m-usp{display:block} .m-disc{display:block} .m-promo{display:block} .m-stories{display:block} .m-cat-section{display:block} .m-reviews{display:block} .m-stores{display:block} .m-footer{display:block} /* Hide desktop-only sections on mobile */ .cat-section{display:none} .countdown-strip{display:none} .editorial{display:none} .collections{display:none} .stats-strip{display:none} .footer{display:none} .testimonials{display:none} .hero{flex-direction:column;gap:6px} .hero-slider{height:240px;width:100%;border-radius:0} .hero-slide-content{bottom:16px;left:16px;right:16px} .hero-heading{font-size:26px} .hero-sub{font-size:12px} .hero-badge{font-size:9px;padding:3px 8px} .hero-label{font-size:9px;letter-spacing:0.15em} .hero-cta{font-size:10px;padding:8px 18px;margin-top:10px} .hero-arrow{display:none} .hero-dot{width:6px;height:6px} .hero-dot.active{width:18px} .hero-dots{bottom:8px} .hero-minis{flex-direction:row;height:auto;gap:6px;padding:0 6px} .hero-mini{height:120px;border-radius:8px} .hero-mini-title{font-size:15px} .hero-mini-price{font-size:10px} .hero-mini-badge{font-size:8px;padding:2px 6px} .hero-mini-content{bottom:12px;left:12px} .countdown-strip{padding:10px 0} .countdown-strip .container{flex-direction:column;gap:10px} .countdown-left{gap:10px} .countdown-sale{font-size:10px;padding:4px 10px} .countdown-num{font-size:16px;width:32px;height:32px} .trust-items{gap:6px;flex-wrap:wrap;justify-content:center} .trust-item{padding:5px 10px;font-size:10px} .trust-items .trust-item:nth-child(n+3){display:none} .prod-section{padding:24px 0 32px} .prod-header{flex-direction:column;align-items:flex-start;gap:6px;padding-bottom:12px;margin-bottom:16px} .prod-header-left h2{font-size:20px} .prod-card{flex:0 0 170px;border-radius:8px} .prod-card-img{width:170px;height:170px} .prod-card-badge{font-size:8px;padding:3px 6px;top:6px;left:6px} .prod-card-info{padding:10px 10px 12px} .prod-card-name{font-size:12px;margin-bottom:4px;-webkit-line-clamp:1} .prod-stars{margin-bottom:4px} .star-ico{width:11px;height:11px} .prod-stars .count{font-size:10px} .prod-price-now{font-size:14px} .prod-price-was{font-size:10px} .prod-off{font-size:8px;padding:1px 4px} .prod-arrow{display:none} .prod-card .prod-card-wish{opacity:1;transform:scale(1);width:28px;height:28px;top:6px;right:6px} .prod-card .prod-card-wish svg{width:13px;height:13px} .prod-card .prod-atc{margin-top:8px;padding:8px;font-size:9px;letter-spacing:0.1em;border-radius:4px} .prod-card .prod-atc svg{width:13px;height:13px} .prod-card .prod-card-quick{display:none} .editorial{flex-direction:column;padding:28px 20px;text-align:center;min-height:auto} .editorial-h1,.editorial-h2{font-size:24px} .editorial-sub{font-size:12px} .editorial-art{display:none} .editorial-btns{justify-content:center;flex-wrap:wrap;gap:10px} .btn-accent,.btn-outline-ivory{padding:10px 20px;font-size:11px} .collections{padding:32px 0} .collections h2{font-size:22px;margin-bottom:20px} .collections-grid{grid-template-columns:1fr 1fr;gap:10px} .collections-grid .collection-card:last-child{grid-column:auto} .collection-card{aspect-ratio:1} .collection-name{font-size:18px} .collection-link{font-size:11px} .collection-text{bottom:14px;left:14px} .stats-strip{padding:28px 0} .stats-row{flex-direction:row;gap:0;justify-content:space-around} .stat-num{font-size:28px} .stat-label{font-size:10px} .stat-divider{width:1px;height:40px;align-self:center} .testimonials{padding:32px 0} .testimonials>h2{font-size:22px;margin-bottom:20px} .test-grid{grid-template-columns:1fr;gap:12px} .test-card{padding:20px} .test-text{font-size:13px} .newsletter{padding:32px 0} .newsletter h2{font-size:24px} .newsletter-form{flex-direction:column;align-items:center} .newsletter-form input{width:100%;max-width:360px;border-radius:4px;margin-bottom:8px} .newsletter-form button{width:100%;max-width:360px;border-radius:4px} .footer{padding:32px 16px 0} .footer-grid{grid-template-columns:1fr;gap:24px} .footer-bottom{flex-direction:column;text-align:center;gap:12px} .footer-payments{justify-content:center} .footer-legal{justify-content:center} } /* ═══════════════════════════════════════ */ /* WOOCOMMERCE TEMPLATE STYLES (Shop, Product, Cart, Checkout, Account) */ /* ═══════════════════════════════════════ */ /* === woocommerce/single-product.php === */ .sp-wrap{background:#FBFAF7;padding:24px 0 80px;min-height:60vh} .sp-breadcrumb{font-family:'Jost',sans-serif;font-size:12px;color:#6B5C4E;letter-spacing:1.5px;text-transform:uppercase;padding:16px 0;background:#F7F5F0;border-bottom:1px solid #E2DDD6} .sp-breadcrumb a{color:#6B5C4E;text-decoration:none} .sp-breadcrumb a:hover{color:#C9973A} .container{max-width:1320px;margin:0 auto;padding:0 16px} /* 2-col layout */ .sp-grid{display:grid;grid-template-columns:1fr 1fr;gap:48px;background:#fff;border:1px solid #E2DDD6;border-radius:12px;padding:32px;margin-top:24px;box-shadow:0 4px 24px rgba(0,0,0,0.04)} /* Gallery */ .sp-gallery{position:relative} .sp-gallery .woocommerce-product-gallery{width:100%!important;float:none!important;margin:0!important} .sp-gallery .woocommerce-product-gallery__wrapper img{border-radius:10px;width:100%;height:auto;display:block;background:#F7F5F0} .sp-gallery .flex-control-thumbs{display:flex!important;gap:10px;margin-top:14px;padding:0;list-style:none;flex-wrap:wrap} .sp-gallery .flex-control-thumbs li{width:80px!important;flex:0 0 80px} .sp-gallery .flex-control-thumbs img{border-radius:6px;cursor:pointer;border:2px solid transparent;transition:border-color 0.2s;background:#F7F5F0;width:80px;height:80px;object-fit:cover} .sp-gallery .flex-control-thumbs img:hover,.sp-gallery .flex-control-thumbs img.flex-active{border-color:#C9973A} .sp-gallery .onsale{position:absolute;top:16px;left:16px;background:#C0392B;color:#fff;font-family:'Jost',sans-serif;font-size:10px;font-weight:700;padding:5px 12px;border-radius:4px;letter-spacing:0.1em;text-transform:uppercase;z-index:10;min-height:auto;width:auto;min-width:0;line-height:1} /* Summary */ .sp-summary{font-family:'Lora',serif} .sp-summary .product_title{font-family:'Cormorant Garamond',serif;font-size:34px;color:#0F2E3E;font-weight:600;line-height:1.2;letter-spacing:-0.5px;margin:0 0 8px} .sp-summary .woocommerce-product-rating{display:flex;align-items:center;gap:10px;margin-bottom:16px} .sp-summary .star-rating{font-size:14px;color:#C9973A} .sp-summary .woocommerce-review-link{font-family:'Jost',sans-serif;font-size:12px;color:#6B5C4E;text-decoration:none} .sp-summary .woocommerce-review-link:hover{color:#C9973A} .sp-summary .price{font-family:'Jost',sans-serif;font-size:30px;font-weight:700;color:#0F2E3E;margin:16px 0 20px;padding:14px 0;border-top:1px solid #E2DDD6;border-bottom:1px solid #E2DDD6;display:flex;align-items:center;gap:12px;flex-wrap:wrap} .sp-summary .price del{color:#6B5C4E;font-size:18px;font-weight:400;text-decoration:line-through} .sp-summary .price ins{text-decoration:none;color:#0F2E3E} .sp-summary .price .woocommerce-Price-currencySymbol{margin-right:2px} .sp-summary .woocommerce-product-details__short-description{font-family:'Lora',serif;font-size:15px;line-height:1.7;color:#2C2C2A;margin:0 0 24px;padding:0} /* Variations */ .sp-summary form.cart{margin-top:20px} .sp-summary table.variations{margin:0 0 18px;width:100%;border-collapse:collapse} .sp-summary table.variations td{padding:8px 0;border:none} .sp-summary table.variations td.label{width:120px;font-family:'Jost',sans-serif;font-size:12px;color:#6B5C4E;letter-spacing:1px;text-transform:uppercase;font-weight:600;padding-right:14px;vertical-align:middle} .sp-summary table.variations select{padding:10px 14px;border:1.5px solid #E2DDD6;border-radius:6px;font-family:'Jost',sans-serif;font-size:13px;background:#fff;color:#2C2C2A;min-width:180px;cursor:pointer;outline:none} .sp-summary table.variations select:focus{border-color:#C9973A} .sp-summary .reset_variations{font-family:'Jost',sans-serif;font-size:11px;color:#C0392B;margin-left:10px;text-decoration:none} /* Qty + Add to cart */ .sp-summary .quantity{display:inline-flex;align-items:center;border:1.5px solid #E2DDD6;border-radius:6px;overflow:hidden;height:48px} .sp-summary .quantity .qty{width:60px;height:46px;border:none;text-align:center;font-family:'Jost',sans-serif;font-size:15px;font-weight:600;color:#0F2E3E;background:#fff;outline:none;padding:0;-moz-appearance:textfield} .sp-summary .quantity .qty::-webkit-outer-spin-button,.sp-summary .quantity .qty::-webkit-inner-spin-button{-webkit-appearance:none;margin:0} .sp-summary form.cart{display:flex;align-items:center;gap:12px;flex-wrap:wrap} .sp-summary .single_add_to_cart_button{flex:1;min-width:200px;height:48px;padding:0 28px;background:#1A2E1A!important;color:#fff!important;font-family:'Jost',sans-serif;font-size:13px;font-weight:600;letter-spacing:0.16em;text-transform:uppercase;border-radius:6px;border:none;cursor:pointer;transition:background 0.3s,box-shadow 0.3s,transform 0.2s;display:inline-flex;align-items:center;justify-content:center;gap:8px;text-decoration:none} .sp-summary .single_add_to_cart_button:hover{background:#0f1f0f!important;box-shadow:0 6px 18px rgba(26,46,26,0.25);transform:translateY(-1px)} .sp-summary .single_add_to_cart_button::before{content:'';display:inline-block;width:16px;height:16px;background:url("data:image/svg+xml;utf8,") center/contain no-repeat} /* Meta */ .sp-summary .product_meta{margin-top:24px;padding-top:18px;border-top:1px solid #E2DDD6;font-family:'Jost',sans-serif;font-size:12px;color:#6B5C4E;line-height:1.9} .sp-summary .product_meta>span{display:block} .sp-summary .product_meta a{color:#0F2E3E;text-decoration:none;margin-right:4px} .sp-summary .product_meta a:hover{color:#C9973A} /* Wishlist + share row */ .sp-actions{display:flex;align-items:center;gap:14px;margin-top:14px;padding-top:14px;border-top:1px solid #F1EDE6} .sp-actions a{display:inline-flex;align-items:center;gap:6px;font-family:'Jost',sans-serif;font-size:12px;color:#6B5C4E;text-decoration:none;transition:color 0.2s} .sp-actions a:hover{color:#C9973A} .sp-actions svg{width:16px;height:16px;stroke:currentColor;fill:none;stroke-width:1.8} /* Tabs */ .woocommerce-tabs{margin-top:48px} .woocommerce-tabs .wc-tabs{display:flex;list-style:none;padding:0;margin:0 0 0;border-bottom:2px solid #E2DDD6;gap:0;background:transparent!important} .woocommerce-tabs .wc-tabs li{margin:0;background:transparent!important;border:none!important;border-radius:0!important;padding:0!important} .woocommerce-tabs .wc-tabs li a{display:block;padding:14px 24px;font-family:'Jost',sans-serif;font-size:13px;font-weight:600;letter-spacing:0.1em;text-transform:uppercase;color:#6B5C4E;text-decoration:none;border-bottom:3px solid transparent;margin-bottom:-2px;transition:all 0.2s} .woocommerce-tabs .wc-tabs li:hover a{color:#0F2E3E} .woocommerce-tabs .wc-tabs li.active a{color:#0F2E3E;border-bottom-color:#C9973A} .woocommerce-tabs .wc-tabs li::before,.woocommerce-tabs .wc-tabs li::after{display:none!important} .woocommerce-tabs .panel{padding:28px 4px;font-family:'Lora',serif;font-size:15px;line-height:1.8;color:#2C2C2A;background:transparent} .woocommerce-tabs .panel h2{font-family:'Cormorant Garamond',serif;font-size:24px;color:#0F2E3E;margin:0 0 16px;font-weight:600} /* Reviews */ .commentlist{list-style:none;padding:0;margin:0 0 32px} .commentlist .comment_container{display:flex;gap:14px;padding:18px;background:#FBFAF7;border-radius:8px;margin-bottom:14px;border:1px solid #F1EDE6} .commentlist .avatar{width:48px;height:48px;border-radius:50%;flex-shrink:0} .commentlist .meta{font-family:'Jost',sans-serif;font-size:12px;color:#6B5C4E;margin-bottom:6px} .commentlist .meta strong{color:#0F2E3E;font-weight:600;font-size:13px} .commentlist .description{font-family:'Lora',serif;font-size:14px;line-height:1.6;color:#2C2C2A} /* Related / Upsells / Universal Product Cards */ .related.products,.upsells.products{margin-top:60px;padding-top:40px;border-top:1px solid #E2DDD6;clear:both} .related.products>h2,.upsells.products>h2{font-family:'Cormorant Garamond',serif;font-size:28px;color:#0F2E3E;margin:0 0 24px;font-weight:600} .related.products ul.products,.upsells.products ul.products,ul.products{display:grid!important;grid-template-columns:repeat(4,1fr)!important;gap:20px!important;list-style:none;padding:0;margin:0;float:none!important;width:100%!important;clear:both} /* Universal product card — applies to shop, related, upsells, search, etc. (both
  • and
    markup) */ ul.products .product, ul.products > .product, ul.products > div.product, .related.products ul.products > .product, .upsells.products ul.products > .product, .related.products ul.products .product, .upsells.products ul.products .product{ background:#fff; border:1px solid #E2DDD6; border-radius:10px; overflow:hidden; display:flex!important; flex-direction:column; transition:all 0.3s cubic-bezier(0.25,0.46,0.45,0.94); position:relative; list-style:none; margin:0!important; padding:0!important; width:auto!important; float:none!important; text-align:left } ul.products .product:hover{ box-shadow:0 12px 32px rgba(26,46,26,0.10); transform:translateY(-3px); border-color:transparent } /* Sale badge — pill, not circle */ ul.products .product .onsale{ position:absolute!important; top:10px!important; left:10px!important; right:auto!important; background:#C0392B!important; color:#fff!important; font-family:'Jost',sans-serif!important; font-size:10px!important; font-weight:700!important; padding:4px 10px!important; border-radius:4px!important; letter-spacing:0.08em!important; text-transform:uppercase!important; z-index:3!important; line-height:1!important; min-height:auto!important; width:auto!important; min-width:0!important; height:auto!important; margin:0!important; border:none!important } /* Product link wrapper */ ul.products .product a.woocommerce-LoopProduct-link, ul.products .product>a{ padding:0!important; background:transparent!important; display:block; text-decoration:none; color:inherit } /* Product image */ ul.products .product img{ width:100%!important; aspect-ratio:1!important; object-fit:cover!important; background:#F7F5F0; padding:0!important; margin:0!important; display:block; border-radius:0!important; height:auto; box-shadow:none!important } /* Product title */ ul.products .product .woocommerce-loop-product__title, ul.products .product h2, ul.products .product h3{ font-family:'Lora',serif!important; font-size:14px!important; color:#1A2E1A!important; padding:14px 14px 4px!important; margin:0!important; line-height:1.4!important; font-weight:400!important; text-align:left!important; white-space:normal!important; word-break:normal!important } /* Star rating */ ul.products .product .star-rating{ margin:0 14px 6px!important; font-size:13px!important; color:#C9973A!important; width:auto!important } /* Price */ ul.products .product .price{ font-family:'Jost',sans-serif!important; font-size:16px!important; font-weight:600!important; color:#0F2E3E!important; padding:0 14px 6px!important; margin:0!important; display:block!important } ul.products .product .price del{ font-size:12px; color:#6B5C4E; font-weight:400; margin-right:6px; text-decoration:line-through; opacity:0.7 } ul.products .product .price ins{ text-decoration:none; font-weight:600; background:transparent } ul.products .product .price .woocommerce-Price-currencySymbol{margin-right:1px} /* Add to cart button */ ul.products .product .button, ul.products .product .add_to_cart_button{ display:flex!important; align-items:center; justify-content:center; gap:6px; margin:auto 14px 14px!important; padding:11px 10px!important; border-radius:6px!important; background:#1A2E1A!important; color:#fff!important; font-family:'Jost',sans-serif!important; font-size:11px!important; font-weight:600!important; letter-spacing:0.14em!important; text-transform:uppercase!important; text-align:center!important; transition:background 0.3s,transform 0.2s,box-shadow 0.3s!important; border:none!important; cursor:pointer; text-decoration:none!important; width:auto!important; height:auto!important; min-height:38px!important; line-height:1!important; float:none!important } /* style.min.css sets .product-button i{font-size:16px;line-height:48px} for the old round icon button. Inside this flex button that 48px line box became the flex line height, inflating a 31px button into a 68px slab. */ ul.products .product .button i, ul.products .product .add_to_cart_button i, .shop-products .product .button i{ font-size:12px!important; line-height:1!important } ul.products .product .button:hover, ul.products .product .add_to_cart_button:hover{ background:#0f1f0f!important; box-shadow:0 4px 12px rgba(26,46,26,0.25); transform:translateY(-1px) } ul.products .product .added_to_cart{ display:none!important } /* Container wrapper for related/upsells when missing */ .related.products,.upsells.products{ max-width:1320px; margin-left:auto; margin-right:auto; padding-left:16px; padding-right:16px; padding-top:40px; padding-bottom:20px } @media(max-width:991px){ .sp-grid{grid-template-columns:1fr;gap:32px;padding:24px} ul.products, .related.products ul.products, .upsells.products ul.products{grid-template-columns:repeat(3,1fr)!important} } @media(max-width:767px){ .sp-summary .product_title{font-size:26px} .sp-summary .price{font-size:24px} .sp-grid{padding:18px} .sp-summary form.cart{flex-direction:column;align-items:stretch} .sp-summary .single_add_to_cart_button{width:100%;min-width:0} .woocommerce-tabs .wc-tabs{overflow-x:auto;flex-wrap:nowrap} ul.products, .related.products ul.products, .upsells.products ul.products{grid-template-columns:repeat(2,1fr)!important;gap:12px!important} ul.products .product .woocommerce-loop-product__title{font-size:13px!important} ul.products .product .price{font-size:14px!important} ul.products .product .button{font-size:11px!important;padding:10px 14px!important;letter-spacing:.1em!important;border-radius:50px!important;width:calc(100% - 20px)!important;box-sizing:border-box!important;margin:8px 10px 12px!important;background:#0F2E3E!important} } /* === woocommerce/cart/cart.php === */ .cart-wrap{background:#FBFAF7;padding:24px 0 80px;min-height:60vh} .container{max-width:1320px;margin:0 auto;padding:0 16px} .cart-header{padding:14px 0;background:#F7F5F0;border-bottom:1px solid #E2DDD6;margin-bottom:24px} .cart-breadcrumb{font-family:'Jost',sans-serif;font-size:12px;color:#6B5C4E;letter-spacing:1.5px;text-transform:uppercase} .cart-breadcrumb a{color:#6B5C4E;text-decoration:none} .cart-breadcrumb a:hover{color:#C9973A} .cart-page-title{font-family:'Cormorant Garamond',serif;font-size:36px;color:#0F2E3E;font-weight:600;margin:8px 0 0;letter-spacing:-0.5px} .cart-page-sub{font-family:'Lora',serif;font-size:14px;color:#6B5C4E;margin-top:6px;font-style:italic} .cart-layout{display:grid;grid-template-columns:1fr 380px;gap:32px;align-items:start} /* Cart table card */ .cart-card{background:#fff;border:1px solid #E2DDD6;border-radius:12px;padding:24px;box-shadow:0 4px 24px rgba(0,0,0,0.04)} .cart-card h2{font-family:'Cormorant Garamond',serif;font-size:22px;color:#0F2E3E;margin:0 0 18px;font-weight:600;padding-bottom:14px;border-bottom:1px solid #E2DDD6} table.cart{width:100%;border-collapse:collapse;border:none!important} table.cart thead{display:none} table.cart tr.cart_item{display:grid;grid-template-columns:90px 1fr 110px 110px 32px;gap:16px;align-items:center;padding:18px 0;border-bottom:1px solid #F1EDE6;background:transparent!important} table.cart tr.cart_item:last-of-type{border-bottom:none} table.cart td{padding:0!important;border:none!important;background:transparent!important;vertical-align:middle} table.cart .product-thumbnail img{width:80px;height:80px;border-radius:8px;object-fit:cover;background:#F7F5F0;display:block} table.cart .product-name{font-family:'Lora',serif;font-size:15px;color:#0F2E3E} table.cart .product-name a{color:#0F2E3E;text-decoration:none;font-weight:500} table.cart .product-name a:hover{color:#C9973A} table.cart .variation{margin-top:6px;font-family:'Jost',sans-serif;font-size:11px;color:#6B5C4E;list-style:none;padding:0} table.cart .variation dt,table.cart .variation dd{display:inline;margin:0;padding:0} table.cart .variation dt{font-weight:600;margin-right:4px} table.cart .variation dd{margin-right:10px} table.cart .product-price{font-family:'Jost',sans-serif;font-size:14px;color:#6B5C4E;text-align:center} table.cart .product-price bdi{color:#6B5C4E} table.cart .product-quantity .quantity{display:inline-flex;align-items:center;border:1.5px solid #E2DDD6;border-radius:6px;overflow:hidden;height:40px} table.cart .product-quantity .qty{width:50px;height:38px;border:none;text-align:center;font-family:'Jost',sans-serif;font-size:14px;font-weight:600;color:#0F2E3E;background:#fff;outline:none;padding:0;-moz-appearance:textfield} table.cart .product-quantity .qty::-webkit-outer-spin-button,table.cart .product-quantity .qty::-webkit-inner-spin-button{-webkit-appearance:none;margin:0} table.cart .product-subtotal{font-family:'Jost',sans-serif;font-size:15px;font-weight:700;color:#0F2E3E;text-align:right} table.cart .product-remove{text-align:center} table.cart .product-remove a.remove{display:inline-flex;align-items:center;justify-content:center;width:28px;height:28px;border-radius:50%;background:#FBFAF7;color:#C0392B!important;font-size:16px;font-weight:300;text-decoration:none;border:1px solid #E2DDD6;transition:all 0.2s;line-height:1} table.cart .product-remove a.remove:hover{background:#C0392B;color:#fff!important;border-color:#C0392B} /* Coupon + Update */ .cart-actions{padding-top:20px;margin-top:20px;border-top:1px solid #E2DDD6;display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:12px} .cart-coupon{display:flex;gap:8px;flex:1;max-width:340px} .cart-coupon input[name="coupon_code"]{flex:1;height:42px;padding:0 14px;border:1.5px solid #E2DDD6;border-radius:6px;font-family:'Jost',sans-serif;font-size:13px;color:#2C2C2A;outline:none} .cart-coupon input[name="coupon_code"]:focus{border-color:#C9973A} .cart-coupon button[name="apply_coupon"]{height:42px;padding:0 22px;background:#fff;color:#0F2E3E!important;border:1.5px solid #0F2E3E!important;border-radius:6px;font-family:'Jost',sans-serif;font-size:11px;font-weight:600;letter-spacing:0.1em;text-transform:uppercase;cursor:pointer;transition:all 0.2s} .cart-coupon button[name="apply_coupon"]:hover{background:#0F2E3E;color:#fff!important} button[name="update_cart"]{height:42px;padding:0 22px;background:#fff;color:#6B5C4E!important;border:1.5px solid #E2DDD6!important;border-radius:6px;font-family:'Jost',sans-serif;font-size:11px;font-weight:600;letter-spacing:0.1em;text-transform:uppercase;cursor:pointer;transition:all 0.2s} button[name="update_cart"]:hover:not(:disabled){border-color:#0F2E3E!important;color:#0F2E3E!important} /* Totals card */ .cart-totals-card{background:#fff;border:1px solid #E2DDD6;border-radius:12px;padding:24px;position:sticky;top:90px;box-shadow:0 4px 24px rgba(0,0,0,0.04)} .cart-totals-card h2{font-family:'Cormorant Garamond',serif;font-size:22px;color:#0F2E3E;margin:0 0 18px;font-weight:600;padding-bottom:14px;border-bottom:1px solid #E2DDD6} .cart_totals table{width:100%;border:none} .cart_totals table tr{border:none;background:transparent!important} .cart_totals table th,.cart_totals table td{padding:12px 0!important;border:none!important;font-family:'Lora',serif;font-size:14px;color:#2C2C2A;background:transparent!important} .cart_totals table th{text-align:left;font-weight:500;color:#6B5C4E;font-family:'Jost',sans-serif;font-size:12px;letter-spacing:0.5px;text-transform:uppercase} .cart_totals table td{text-align:right;font-weight:600;color:#0F2E3E} .cart_totals table .order-total th,.cart_totals table .order-total td{font-size:18px;color:#0F2E3E;font-family:'Jost',sans-serif;font-weight:700;border-top:2px solid #0F2E3E!important;padding-top:16px!important} .cart_totals table .order-total td .woocommerce-Price-amount{color:#C9973A;font-size:22px} .cart_totals .shipping ul{list-style:none;padding:0;margin:0;font-family:'Jost',sans-serif;font-size:12px} .cart_totals .shipping li{margin-bottom:4px} .wc-proceed-to-checkout{margin-top:20px} .checkout-button{display:flex!important;align-items:center;justify-content:center;gap:10px;width:100%;height:54px;background:#1A2E1A!important;color:#fff!important;font-family:'Jost',sans-serif;font-size:14px;font-weight:700;letter-spacing:0.16em;text-transform:uppercase;border:none;border-radius:8px;cursor:pointer;transition:all 0.3s;text-decoration:none;box-shadow:0 4px 16px rgba(26,46,26,0.2)} .checkout-button:hover{background:#0F1F0F!important;box-shadow:0 8px 24px rgba(201,151,58,0.3);transform:translateY(-2px)} .cart-trust{margin-top:20px;padding-top:18px;border-top:1px solid #E2DDD6;font-family:'Jost',sans-serif;font-size:11px;color:#6B5C4E;line-height:1.7} .cart-trust div{display:flex;align-items:center;gap:8px;margin-bottom:6px} .cart-trust svg{width:16px;height:16px;stroke:#C9973A;fill:none;stroke-width:1.8;flex-shrink:0} /* Empty cart */ .cart-empty{background:#fff;border:1px solid #E2DDD6;border-radius:12px;padding:60px 32px;text-align:center;box-shadow:0 4px 24px rgba(0,0,0,0.04)} .cart-empty svg{width:64px;height:64px;stroke:#C9973A;fill:none;stroke-width:1.5;margin:0 auto 18px;display:block;opacity:0.8} .cart-empty h2{font-family:'Cormorant Garamond',serif;font-size:30px;color:#0F2E3E;margin:0 0 8px;font-weight:600} .cart-empty p{font-family:'Lora',serif;font-size:15px;color:#6B5C4E;margin:0 0 24px;font-style:italic} .cart-empty .button{display:inline-flex;align-items:center;gap:8px;padding:14px 32px;background:#1A2E1A;color:#fff;font-family:'Jost',sans-serif;font-size:12px;font-weight:600;letter-spacing:0.16em;text-transform:uppercase;border-radius:8px;text-decoration:none;transition:all 0.3s} .cart-empty .button:hover{background:#0F1F0F;transform:translateY(-2px)} /* Messages */ .woocommerce-message,.woocommerce-info,.woocommerce-error{background:#FFF8F0;border-left:3px solid #C9973A;padding:14px 18px;border-radius:6px;font-family:'Lora',serif;font-size:14px;color:#0F2E3E;margin-bottom:16px;list-style:none} .woocommerce-error{background:#FDF1F0;border-left-color:#C0392B} .woocommerce-message a,.woocommerce-info a{color:#C9973A;font-weight:600;text-decoration:none} @media(max-width:991px){ .cart-layout{grid-template-columns:1fr} .cart-totals-card{position:static} } @media(max-width:767px){ .cart-page-title{font-size:26px} .cart-card{padding:16px} table.cart tr.cart_item{grid-template-columns:64px 1fr 28px;grid-template-areas:'img name remove' 'img price price' 'img qty subtotal';gap:6px 12px} table.cart .product-thumbnail{grid-area:img} table.cart .product-thumbnail img{width:64px;height:64px} table.cart .product-name{grid-area:name;font-size:13px} table.cart .product-price{grid-area:price;text-align:left;font-size:12px} table.cart .product-quantity{grid-area:qty} table.cart .product-subtotal{grid-area:subtotal;text-align:right;font-size:14px} table.cart .product-remove{grid-area:remove} .cart-actions{flex-direction:column;align-items:stretch} .cart-coupon{max-width:100%} } /* === woocommerce/checkout/form-checkout.php === */ .checkout-wrap{background:#FBFAF7;padding:24px 0 80px;min-height:60vh} .container{max-width:1320px;margin:0 auto;padding:0 16px} .checkout-header{padding:14px 0;background:#F7F5F0;border-bottom:1px solid #E2DDD6;margin-bottom:24px} .checkout-breadcrumb{font-family:'Jost',sans-serif;font-size:12px;color:#6B5C4E;letter-spacing:1.5px;text-transform:uppercase} .checkout-breadcrumb a{color:#6B5C4E;text-decoration:none} .checkout-breadcrumb a:hover{color:#C9973A} .checkout-page-title{font-family:'Cormorant Garamond',serif;font-size:36px;color:#0F2E3E;font-weight:600;margin:8px 0 0;letter-spacing:-0.5px} /* Progress steps */ .checkout-steps{display:flex;align-items:center;gap:0;margin:18px 0 0} .checkout-step{display:flex;align-items:center;gap:8px;font-family:'Jost',sans-serif;font-size:11px;color:#6B5C4E;letter-spacing:0.5px;text-transform:uppercase} .checkout-step.active{color:#0F2E3E;font-weight:700} .checkout-step.done{color:#C9973A} .checkout-step-num{width:24px;height:24px;border-radius:50%;background:#fff;border:1.5px solid #E2DDD6;display:flex;align-items:center;justify-content:center;font-weight:700;font-size:11px} .checkout-step.active .checkout-step-num{background:#0F2E3E;color:#fff;border-color:#0F2E3E} .checkout-step.done .checkout-step-num{background:#C9973A;color:#fff;border-color:#C9973A} .checkout-step-divider{flex:1;height:2px;background:#E2DDD6;margin:0 14px;min-width:30px;max-width:80px} .checkout-step-divider.done{background:#C9973A} /* 2-column layout */ form.woocommerce-checkout{display:grid;grid-template-columns:1fr 420px;gap:32px;align-items:start} /* Left side: Billing/Shipping */ #customer_details{background:#fff;border:1px solid #E2DDD6;border-radius:12px;padding:28px;box-shadow:0 4px 24px rgba(0,0,0,0.04)} #customer_details .col-1,#customer_details .col-2{width:100%!important;max-width:100%!important;padding:0!important;float:none!important} #customer_details .col-2{margin-top:24px} .woocommerce-billing-fields h3, .woocommerce-shipping-fields h3, .woocommerce-additional-fields h3, #order_review_heading{font-family:'Cormorant Garamond',serif;font-size:22px;color:#0F2E3E;margin:0 0 18px;font-weight:600;padding-bottom:14px;border-bottom:1px solid #E2DDD6} .woocommerce-additional-fields h3{margin-top:24px} /* Form fields */ .woocommerce form .form-row{display:flex;flex-direction:column;margin-bottom:14px;padding:0} .woocommerce form .form-row label{font-family:'Jost',sans-serif;font-size:12px;color:#6B5C4E;letter-spacing:0.5px;text-transform:uppercase;margin-bottom:6px;font-weight:600} .woocommerce form .form-row label .required{color:#C0392B;margin-left:2px} .woocommerce form .form-row input.input-text, .woocommerce form .form-row textarea, .woocommerce form .form-row select, .select2-selection--single{height:44px!important;padding:0 14px!important;border:1.5px solid #E2DDD6!important;border-radius:6px!important;font-family:'Lora',serif!important;font-size:14px!important;color:#2C2C2A!important;background:#fff!important;outline:none!important;transition:border-color 0.2s;width:100%!important;box-sizing:border-box;line-height:42px!important} .woocommerce form .form-row textarea{height:90px!important;padding:12px 14px!important;line-height:1.5!important;resize:vertical} .woocommerce form .form-row input.input-text:focus, .woocommerce form .form-row textarea:focus, .woocommerce form .form-row select:focus{border-color:#C9973A!important} .select2-selection__rendered{line-height:42px!important;padding-left:0!important} .select2-selection__arrow{height:42px!important} .woocommerce form .form-row-first,.woocommerce form .form-row-last{display:inline-flex;width:calc(50% - 7px);vertical-align:top} .woocommerce form .form-row-first{margin-right:14px} /* Right side: Order review */ .checkout-review-wrap{position:sticky;top:90px} #order_review_heading{margin:0;padding:24px 28px 14px;background:#fff;border:1px solid #E2DDD6;border-radius:12px 12px 0 0;border-bottom:none} #order_review{background:#fff;border:1px solid #E2DDD6;border-radius:0 0 12px 12px;border-top:none;padding:0 28px 28px;box-shadow:0 4px 24px rgba(0,0,0,0.04)} .shop_table.woocommerce-checkout-review-order-table{width:100%;border:none!important;margin:14px 0 18px;border-collapse:collapse} .shop_table.woocommerce-checkout-review-order-table tr{border:none;background:transparent!important} .shop_table.woocommerce-checkout-review-order-table th, .shop_table.woocommerce-checkout-review-order-table td{padding:12px 0!important;border:none!important;border-bottom:1px solid #F1EDE6!important;font-family:'Lora',serif;font-size:14px;color:#2C2C2A;background:transparent!important} .shop_table .product-name{font-weight:500;color:#0F2E3E} .shop_table .product-quantity{color:#6B5C4E;font-family:'Jost',sans-serif;font-size:13px} .shop_table .product-total{text-align:right;font-family:'Jost',sans-serif;font-weight:700;color:#0F2E3E} .shop_table tfoot tr th{font-family:'Jost',sans-serif;font-size:12px;color:#6B5C4E;letter-spacing:0.5px;text-transform:uppercase;font-weight:600} .shop_table tfoot tr td{text-align:right;font-family:'Jost',sans-serif;font-weight:600;color:#0F2E3E} .shop_table tfoot tr.order-total th,.shop_table tfoot tr.order-total td{font-size:16px!important;color:#0F2E3E!important;border-bottom:none!important;padding-top:18px!important;border-top:2px solid #0F2E3E!important} .shop_table tfoot tr.order-total td .woocommerce-Price-amount{color:#C9973A;font-size:22px;font-weight:700} /* Payment methods */ #payment{background:transparent;padding:0;border-radius:0} #payment ul.payment_methods{list-style:none;padding:0;margin:0 0 20px;border:none!important} #payment ul.payment_methods li{margin-bottom:10px;padding:14px 16px;border:1.5px solid #E2DDD6;border-radius:8px;background:#FBFAF7;transition:border-color 0.2s} #payment ul.payment_methods li.wc_payment_method_active, #payment ul.payment_methods li:has(input:checked){border-color:#C9973A;background:#FFF8F0} #payment ul.payment_methods li label{font-family:'Jost',sans-serif;font-size:13px;color:#0F2E3E;font-weight:600;display:inline-flex;align-items:center;gap:8px;letter-spacing:0.3px;text-transform:none;cursor:pointer;margin:0} #payment ul.payment_methods li input[type="radio"]{margin-right:6px;accent-color:#C9973A} #payment ul.payment_methods li .payment_box{margin-top:10px;padding:14px;background:#fff;border-radius:6px;font-family:'Lora',serif;font-size:13px;color:#6B5C4E;line-height:1.6;border:1px solid #E2DDD6} #payment ul.payment_methods li .payment_box::before{display:none} #place_order{display:flex!important;align-items:center;justify-content:center;gap:10px;width:100%;height:56px;background:#1A2E1A!important;color:#fff!important;font-family:'Jost',sans-serif;font-size:14px;font-weight:700;letter-spacing:0.16em;text-transform:uppercase;border:none;border-radius:8px;cursor:pointer;transition:all 0.3s;text-decoration:none;box-shadow:0 4px 16px rgba(26,46,26,0.2);margin-top:14px} #place_order:hover{background:#0F1F0F!important;box-shadow:0 8px 24px rgba(201,151,58,0.3);transform:translateY(-2px)} .woocommerce-terms-and-conditions-wrapper{margin:14px 0;padding:14px;background:#FBFAF7;border-radius:6px;font-family:'Lora',serif;font-size:12px;color:#6B5C4E} .woocommerce-form__label-for-checkbox{display:flex;align-items:start;gap:8px;cursor:pointer} .woocommerce-form__input-checkbox{accent-color:#C9973A;margin-top:2px} /* Login/Coupon prompts */ .woocommerce-form-login-toggle,.woocommerce-form-coupon-toggle{margin-bottom:14px} .woocommerce-info{background:#FFF8F0;border-left:3px solid #C9973A;padding:14px 18px;border-radius:6px;font-family:'Lora',serif;font-size:14px;color:#0F2E3E} .woocommerce-info a,.woocommerce-info .showcoupon,.woocommerce-info .showlogin{color:#C9973A;font-weight:600;text-decoration:none;cursor:pointer} form.checkout_coupon,form.login{background:#fff;border:1px solid #E2DDD6;border-radius:8px;padding:18px;margin-bottom:18px} /* Trust badges */ .checkout-trust{margin-top:20px;padding:18px;background:#fff;border:1px solid #E2DDD6;border-radius:8px;font-family:'Jost',sans-serif;font-size:11px;color:#6B5C4E;line-height:1.7} .checkout-trust div{display:flex;align-items:center;gap:8px;margin-bottom:6px} .checkout-trust div:last-child{margin-bottom:0} .checkout-trust svg{width:16px;height:16px;stroke:#C9973A;fill:none;stroke-width:1.8;flex-shrink:0} @media(max-width:991px){ form.woocommerce-checkout{grid-template-columns:1fr;gap:24px} .checkout-review-wrap{position:static} .checkout-page-title{font-size:26px} #customer_details{padding:20px} .woocommerce form .form-row-first,.woocommerce form .form-row-last{width:100%;margin-right:0} } /* === woocommerce/myaccount/my-account.php === */ .acc-wrap{background:#FBFAF7;padding:24px 0 80px;min-height:60vh} .container{max-width:1320px;margin:0 auto;padding:0 16px} .acc-header{padding:14px 0;background:#F7F5F0;border-bottom:1px solid #E2DDD6;margin-bottom:24px} .acc-breadcrumb{font-family:'Jost',sans-serif;font-size:12px;color:#6B5C4E;letter-spacing:1.5px;text-transform:uppercase} .acc-breadcrumb a{color:#6B5C4E;text-decoration:none} .acc-breadcrumb a:hover{color:#C9973A} .acc-page-title{font-family:'Cormorant Garamond',serif;font-size:36px;color:#0F2E3E;font-weight:600;margin:8px 0 0;letter-spacing:-0.5px} .acc-welcome{font-family:'Lora',serif;font-style:italic;font-size:14px;color:#6B5C4E;margin-top:6px} .acc-welcome strong{color:#C9973A;font-style:normal;font-weight:600} .acc-layout{display:grid;grid-template-columns:280px 1fr;gap:32px;align-items:start} /* Sidebar navigation */ .acc-sidebar{background:#fff;border:1px solid #E2DDD6;border-radius:12px;padding:8px;position:sticky;top:90px;box-shadow:0 4px 24px rgba(0,0,0,0.04)} .woocommerce-MyAccount-navigation{padding:0;margin:0} .woocommerce-MyAccount-navigation ul{list-style:none;padding:0;margin:0;background:transparent!important} .woocommerce-MyAccount-navigation ul li{margin:0;border:none!important;background:transparent!important;padding:0!important;cursor:default;transition:none} .woocommerce-MyAccount-navigation ul li:hover{background:transparent!important} .woocommerce-MyAccount-navigation ul li a{display:flex;align-items:center;gap:12px;padding:14px 16px;font-family:'Jost',sans-serif;font-size:13px;color:#2C2C2A;text-decoration:none;border-radius:8px;transition:all 0.2s;letter-spacing:0.3px} .woocommerce-MyAccount-navigation ul li a:hover{background:#F7F5F0;color:#0F2E3E} .woocommerce-MyAccount-navigation ul li.is-active a{background:#0F2E3E;color:#fff} .woocommerce-MyAccount-navigation ul li a::before{content:'';display:inline-block;width:18px;height:18px;background-size:contain;background-repeat:no-repeat;background-position:center;flex-shrink:0;opacity:0.7} .woocommerce-MyAccount-navigation ul li.is-active a::before{opacity:1} .woocommerce-MyAccount-navigation-link--dashboard a::before{background-image:url("data:image/svg+xml;utf8,")} .woocommerce-MyAccount-navigation-link--orders a::before{background-image:url("data:image/svg+xml;utf8,")} .woocommerce-MyAccount-navigation-link--downloads a::before{background-image:url("data:image/svg+xml;utf8,")} .woocommerce-MyAccount-navigation-link--edit-address a::before{background-image:url("data:image/svg+xml;utf8,")} .woocommerce-MyAccount-navigation-link--payment-methods a::before{background-image:url("data:image/svg+xml;utf8,")} .woocommerce-MyAccount-navigation-link--edit-account a::before{background-image:url("data:image/svg+xml;utf8,")} .woocommerce-MyAccount-navigation-link--customer-logout a::before{background-image:url("data:image/svg+xml;utf8,")} .woocommerce-MyAccount-navigation-link--customer-logout a{color:#C0392B} .woocommerce-MyAccount-navigation-link--customer-logout a:hover{background:#FDF1F0} /* Content area */ .acc-content{background:#fff;border:1px solid #E2DDD6;border-radius:12px;padding:32px;box-shadow:0 4px 24px rgba(0,0,0,0.04)} .woocommerce-MyAccount-content{font-family:'Lora',serif;font-size:15px;line-height:1.7;color:#2C2C2A} .woocommerce-MyAccount-content h2,.woocommerce-MyAccount-content h3{font-family:'Cormorant Garamond',serif;color:#0F2E3E;font-weight:600;margin:0 0 16px} .woocommerce-MyAccount-content h2{font-size:26px} .woocommerce-MyAccount-content h3{font-size:20px;margin-top:24px} .woocommerce-MyAccount-content p{margin-bottom:14px} .woocommerce-MyAccount-content a{color:#C9973A;text-decoration:none;font-weight:500} .woocommerce-MyAccount-content a:hover{text-decoration:underline} .woocommerce-MyAccount-content strong{color:#0F2E3E} /* Buttons inside account content */ .woocommerce-MyAccount-content .button, .woocommerce-MyAccount-content button, .woocommerce-MyAccount-content input[type="submit"]{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:11px 22px;background:#1A2E1A!important;color:#fff!important;font-family:'Jost',sans-serif;font-size:11px;font-weight:600;letter-spacing:0.14em;text-transform:uppercase;border-radius:6px;border:none;cursor:pointer;text-decoration:none;transition:all 0.3s;line-height:1} .woocommerce-MyAccount-content .button:hover, .woocommerce-MyAccount-content button:hover, .woocommerce-MyAccount-content input[type="submit"]:hover{background:#0f1f0f!important;box-shadow:0 4px 12px rgba(26,46,26,0.25);transform:translateY(-1px)} .woocommerce-MyAccount-content .button.view{background:#fff!important;color:#0F2E3E!important;border:1.5px solid #0F2E3E!important;padding:8px 16px;font-size:10px} .woocommerce-MyAccount-content .button.view:hover{background:#0F2E3E!important;color:#fff!important} /* Orders table */ table.shop_table.account-orders-table{width:100%;border-collapse:collapse;border:none!important;background:transparent} table.shop_table.account-orders-table thead{background:#FBFAF7;border-bottom:2px solid #E2DDD6} table.shop_table.account-orders-table thead th{font-family:'Jost',sans-serif;font-size:11px;color:#6B5C4E;letter-spacing:0.5px;text-transform:uppercase;font-weight:600;padding:14px 12px!important;text-align:left;border:none!important;background:transparent!important} table.shop_table.account-orders-table tbody td{padding:16px 12px!important;border:none!important;border-bottom:1px solid #F1EDE6!important;font-family:'Lora',serif;font-size:14px;color:#2C2C2A;background:transparent!important;vertical-align:middle} table.shop_table.account-orders-table tbody tr:hover td{background:#FBFAF7!important} .woocommerce-orders-table__cell-order-number a{color:#0F2E3E;font-weight:600;text-decoration:none} .woocommerce-orders-table__cell-order-status mark{background:#F7F5F0;color:#0F2E3E;padding:4px 10px;border-radius:12px;font-family:'Jost',sans-serif;font-size:11px;font-weight:600;letter-spacing:0.3px;text-transform:uppercase;display:inline-block} .woocommerce-orders-table__cell-order-status mark.completed{background:#E8F5E9;color:#2E7D32} .woocommerce-orders-table__cell-order-status mark.processing{background:#FFF8E1;color:#F57F17} .woocommerce-orders-table__cell-order-status mark.cancelled{background:#FDF1F0;color:#C0392B} /* Form fields */ .woocommerce-MyAccount-content form .form-row{margin-bottom:16px;display:flex;flex-direction:column} .woocommerce-MyAccount-content form .form-row label{font-family:'Jost',sans-serif;font-size:12px;color:#6B5C4E;letter-spacing:0.5px;text-transform:uppercase;margin-bottom:6px;font-weight:600} .woocommerce-MyAccount-content form .form-row input, .woocommerce-MyAccount-content form .form-row select{height:44px;padding:0 14px;border:1.5px solid #E2DDD6;border-radius:6px;font-family:'Lora',serif;font-size:14px;color:#2C2C2A;background:#fff;outline:none} .woocommerce-MyAccount-content form .form-row input:focus, .woocommerce-MyAccount-content form .form-row select:focus{border-color:#C9973A} /* Empty states */ .woocommerce-Message--info{background:#FFF8F0;border-left:3px solid #C9973A;padding:20px 24px;border-radius:8px;font-family:'Lora',serif;color:#0F2E3E;list-style:none} /* Dashboard greeting */ .woocommerce-MyAccount-content > p:first-of-type{font-size:16px;color:#0F2E3E} /* Address blocks */ .woocommerce-Addresses{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin-top:14px} .woocommerce-Address{background:#FBFAF7;border:1px solid #E2DDD6;border-radius:10px;padding:20px} .woocommerce-Address header.woocommerce-Address-title{display:flex;justify-content:space-between;align-items:center;margin-bottom:12px;padding-bottom:10px;border-bottom:1px solid #E2DDD6} .woocommerce-Address-title h2{font-size:18px!important;margin:0!important} .woocommerce-Address-title .edit{font-family:'Jost',sans-serif;font-size:11px;color:#C9973A;font-weight:600;letter-spacing:0.3px;text-transform:uppercase;text-decoration:none} .woocommerce-Address address{font-family:'Lora',serif;font-style:normal;color:#2C2C2A;line-height:1.7;font-size:14px} @media(max-width:991px){ .acc-layout{grid-template-columns:1fr;gap:18px} .acc-sidebar{position:static;order:2} .acc-content{padding:20px} .woocommerce-Addresses{grid-template-columns:1fr} } @media(max-width:767px){ .acc-page-title{font-size:26px} table.shop_table.account-orders-table thead{display:none} table.shop_table.account-orders-table tbody tr{display:block;margin-bottom:14px;border:1px solid #E2DDD6;border-radius:10px;padding:14px;background:#fff} table.shop_table.account-orders-table tbody td{display:flex;justify-content:space-between;border:none!important;padding:6px 0!important} table.shop_table.account-orders-table tbody td::before{content:attr(data-title);font-family:'Jost',sans-serif;font-size:11px;color:#6B5C4E;letter-spacing:0.5px;text-transform:uppercase;font-weight:600} } /* === woocommerce/myaccount/form-login.php === */ .login-wrap{background:#FBFAF7;padding:24px 0 80px;min-height:60vh} .container{max-width:1320px;margin:0 auto;padding:0 16px} .login-header{padding:14px 0;background:#F7F5F0;border-bottom:1px solid #E2DDD6;margin-bottom:32px} .login-breadcrumb{font-family:'Jost',sans-serif;font-size:12px;color:#6B5C4E;letter-spacing:1.5px;text-transform:uppercase} .login-breadcrumb a{color:#6B5C4E;text-decoration:none} .login-breadcrumb a:hover{color:#C9973A} .login-page-title{font-family:'Cormorant Garamond',serif;font-size:36px;color:#0F2E3E;font-weight:600;margin:8px 0 0;letter-spacing:-0.5px} /* 2-col grid for login + register */ .u-columns{display:grid;grid-template-columns:1fr 1fr;gap:24px;align-items:start;max-width:980px;margin:0 auto} .u-column1,.u-column2{background:#fff;border:1px solid #E2DDD6;border-radius:12px;padding:36px;box-shadow:0 4px 24px rgba(0,0,0,0.04)} .u-column1 h2,.u-column2 h2{font-family:'Cormorant Garamond',serif;font-size:28px;color:#0F2E3E;font-weight:600;margin:0 0 8px;letter-spacing:-0.3px} .u-column1::before,.u-column2::before{content:'';display:block;width:40px;height:3px;background:#C9973A;margin-bottom:16px;border-radius:2px} .login-sub{font-family:'Lora',serif;font-style:italic;font-size:14px;color:#6B5C4E;margin-bottom:24px} /* Form fields */ .woocommerce-form-row{margin-bottom:16px;display:flex;flex-direction:column} .woocommerce-form-row label{font-family:'Jost',sans-serif;font-size:12px;color:#6B5C4E;letter-spacing:0.5px;text-transform:uppercase;margin-bottom:6px;font-weight:600} .woocommerce-form-row label .required{color:#C0392B;margin-left:2px} .woocommerce-form-row input.input-text{height:46px;padding:0 14px;border:1.5px solid #E2DDD6;border-radius:6px;font-family:'Lora',serif;font-size:14px;color:#2C2C2A;background:#fff;outline:none;transition:border-color 0.2s;width:100%;box-sizing:border-box} .woocommerce-form-row input.input-text:focus{border-color:#C9973A} /* Remember + Lost password row */ .woocommerce-form-login__rememberme{display:inline-flex;align-items:center;gap:6px;font-family:'Jost',sans-serif;font-size:12px;color:#6B5C4E;cursor:pointer;letter-spacing:0.3px} .woocommerce-form__input-checkbox{accent-color:#C9973A} .lost_password{margin-top:12px} .lost_password a{font-family:'Jost',sans-serif;font-size:12px;color:#C9973A;text-decoration:none;font-weight:600;letter-spacing:0.3px;text-transform:uppercase} .lost_password a:hover{text-decoration:underline} /* Submit button */ .woocommerce-form-login button[type="submit"], .woocommerce-form-register button[type="submit"]{display:flex!important;align-items:center;justify-content:center;gap:10px;width:100%;height:50px;background:#1A2E1A!important;color:#fff!important;font-family:'Jost',sans-serif;font-size:13px;font-weight:600;letter-spacing:0.16em;text-transform:uppercase;border:none;border-radius:8px;cursor:pointer;transition:all 0.3s;text-decoration:none;margin-top:16px;box-shadow:0 4px 16px rgba(26,46,26,0.15)} .woocommerce-form-login button[type="submit"]:hover, .woocommerce-form-register button[type="submit"]:hover{background:#0f1f0f!important;box-shadow:0 6px 20px rgba(26,46,26,0.25);transform:translateY(-2px)} .woocommerce-form-register button[type="submit"]{background:#C9973A!important} .woocommerce-form-register button[type="submit"]:hover{background:#b8862f!important} /* Privacy notice */ .woocommerce-privacy-policy-text{font-family:'Lora',serif;font-size:12px;color:#6B5C4E;margin-top:14px;line-height:1.6} .woocommerce-privacy-policy-text a{color:#C9973A;text-decoration:none} /* Trust footer */ .login-trust{max-width:980px;margin:32px auto 0;text-align:center;padding:24px;background:#fff;border:1px solid #E2DDD6;border-radius:12px;box-shadow:0 4px 24px rgba(0,0,0,0.04)} .login-trust h3{font-family:'Cormorant Garamond',serif;font-size:20px;color:#0F2E3E;font-weight:600;margin:0 0 14px} .login-trust-items{display:flex;justify-content:center;gap:32px;flex-wrap:wrap} .login-trust-item{display:flex;align-items:center;gap:8px;font-family:'Jost',sans-serif;font-size:12px;color:#6B5C4E;letter-spacing:0.3px} .login-trust-item svg{width:18px;height:18px;stroke:#C9973A;fill:none;stroke-width:1.8;flex-shrink:0} /* Messages */ .woocommerce-error,.woocommerce-message{background:#FFF8F0;border-left:3px solid #C9973A;padding:14px 18px;border-radius:6px;font-family:'Lora',serif;font-size:14px;color:#0F2E3E;margin-bottom:20px;list-style:none;max-width:980px;margin-left:auto;margin-right:auto} .woocommerce-error{background:#FDF1F0;border-left-color:#C0392B} @media(max-width:767px){ .u-columns{grid-template-columns:1fr;gap:16px} .u-column1,.u-column2{padding:24px} .login-page-title{font-size:26px} .login-trust-items{gap:14px;flex-direction:column;align-items:flex-start} } /* === page.php === */ /* Page Hero Banner */ .page-hero{background:linear-gradient(135deg,#F7F5F0 0%,#EDEADE 100%);padding:28px 0 32px;border-bottom:1px solid #E2DDD6;position:relative;overflow:hidden} .page-hero::before{content:'';position:absolute;top:-40px;right:-40px;width:200px;height:200px;border:2px solid rgba(201,151,58,0.08);border-radius:50%} .page-hero::after{content:'';position:absolute;bottom:-60px;left:-30px;width:140px;height:140px;border:1px solid rgba(201,151,58,0.06);border-radius:50%} .page-hero .container{position:relative;z-index:1} .page-breadcrumb{font-family:'Jost',sans-serif;font-size:12px;color:#6B5C4E;letter-spacing:1.5px;text-transform:uppercase;margin-bottom:14px;display:flex;align-items:center;gap:8px;flex-wrap:wrap} .page-breadcrumb a{color:#6B5C4E;transition:color 0.2s;text-decoration:none} .page-breadcrumb a:hover{color:#C9973A} .page-breadcrumb svg{width:10px;height:10px;stroke:currentColor;fill:none;stroke-width:2;opacity:0.5} .page-breadcrumb .current{color:#1A2E1A;font-weight:600} .page-title{font-family:'Cormorant Garamond',serif;font-size:clamp(32px,5vw,52px);color:#0F2E3E;font-weight:600;line-height:1.1;letter-spacing:-1px;margin:0} .page-subtitle{font-family:'Lora',serif;font-style:italic;font-size:16px;color:#6B5C4E;margin-top:8px;max-width:600px} /* Page Content */ .page-content-wrapper{background:#fff;padding:60px 0 80px} .page-content{font-family:'Lora',serif;font-size:16px;line-height:1.8;color:#2C2C2A;max-width:820px;margin:0 auto} .page-content h1,.page-content h2,.page-content h3,.page-content h4{font-family:'Cormorant Garamond',serif;color:#0F2E3E;font-weight:600;margin:32px 0 16px;line-height:1.3} .page-content h2{font-size:32px;border-bottom:1px solid #E2DDD6;padding-bottom:12px} .page-content h3{font-size:24px} .page-content h4{font-size:20px;color:#C9973A} .page-content p{margin-bottom:18px} .page-content a{color:#C9973A;text-decoration:none;border-bottom:1px solid rgba(201,151,58,0.3);transition:border-color 0.2s} .page-content a:hover{border-bottom-color:#C9973A} .page-content ul,.page-content ol{margin:0 0 20px 24px} .page-content li{margin-bottom:8px} .page-content blockquote{font-family:'Cormorant Garamond',serif;font-style:italic;font-size:22px;line-height:1.6;color:#0F2E3E;border-left:3px solid #C9973A;padding:8px 0 8px 24px;margin:28px 0;background:#F7F5F0} .page-content img{max-width:100%;height:auto;border-radius:8px;margin:16px 0;box-shadow:0 4px 24px rgba(0,0,0,0.08)} .page-content code{background:#F7F5F0;padding:2px 8px;border-radius:4px;font-size:14px;color:#0F2E3E} .container{max-width:1320px;margin:0 auto;padding:0 16px} @media(max-width:767px){ .page-hero{padding:32px 0 40px} .page-content-wrapper{padding:40px 0 60px} .page-content{font-size:15px} } /* === woocommerce/archive-product.php === */ .shop-hero{background:linear-gradient(135deg,#F7F5F0 0%,#EDEADE 100%);padding:48px 0;border-bottom:1px solid #E2DDD6;position:relative;overflow:hidden} .shop-hero::before{content:'';position:absolute;top:-30px;right:-30px;width:160px;height:160px;border:2px solid rgba(201,151,58,0.1);border-radius:50%} .shop-breadcrumb{font-family:'Jost',sans-serif;font-size:12px;color:#6B5C4E;letter-spacing:1.5px;text-transform:uppercase;margin-bottom:12px} .shop-breadcrumb a{color:#6B5C4E;text-decoration:none} .shop-breadcrumb a:hover{color:#C9973A} .shop-title{font-family:'Cormorant Garamond',serif;font-size:clamp(32px,5vw,48px);color:#0F2E3E;font-weight:600;line-height:1.1;letter-spacing:-1px;margin:0} .shop-desc{font-family:'Lora',serif;font-style:italic;font-size:15px;color:#6B5C4E;margin-top:10px;max-width:640px} .shop-result-count{font-family:'Jost',sans-serif;font-size:13px;color:#6B5C4E;margin-top:14px;display:inline-block} .shop-wrap{background:#FBFAF7;padding:32px 0 80px;min-height:60vh} .container{max-width:1320px;margin:0 auto;padding:0 16px} .shop-layout{display:grid;grid-template-columns:260px 1fr;gap:32px} /* Sidebar */ .shop-sidebar{background:#fff;border:1px solid #E2DDD6;border-radius:10px;padding:20px;height:fit-content;position:sticky;top:90px} .shop-sidebar h3{font-family:'Cormorant Garamond',serif;font-size:18px;color:#0F2E3E;font-weight:600;margin:0 0 14px;padding-bottom:10px;border-bottom:1px solid #E2DDD6} .shop-sidebar h3:not(:first-child){margin-top:24px} .shop-sidebar ul{list-style:none;padding:0;margin:0} .shop-sidebar li{margin:0} .shop-sidebar li a{display:flex;justify-content:space-between;align-items:center;padding:8px 0;font-family:'Jost',sans-serif;font-size:13px;color:#2C2C2A;text-decoration:none;border-bottom:1px solid #F1EDE6;transition:color 0.2s} .shop-sidebar li a:hover{color:#C9973A} .shop-sidebar li a span{font-size:11px;color:#6B5C4E;background:#F7F5F0;padding:2px 8px;border-radius:10px} .shop-sidebar .current-cat a{color:#C9973A;font-weight:600} /* Toolbar */ .shop-toolbar{background:#fff;border:1px solid #E2DDD6;border-radius:8px;padding:14px 18px;display:flex;justify-content:space-between;align-items:center;margin-bottom:20px;flex-wrap:wrap;gap:12px} .shop-toolbar-left{font-family:'Jost',sans-serif;font-size:13px;color:#6B5C4E} .shop-toolbar-right{display:flex;align-items:center;gap:14px} .woocommerce-ordering select{padding:8px 28px 8px 12px;border:1px solid #E2DDD6;border-radius:6px;font-family:'Jost',sans-serif;font-size:13px;background:#fff;color:#2C2C2A;cursor:pointer;outline:none} .woocommerce-ordering select:focus{border-color:#C9973A} /* Product grid */ .shop-products{display:grid;grid-template-columns:repeat(4,1fr);gap:16px} .shop-products .product{background:#fff;border:1px solid #E2DDD6;border-radius:10px;overflow:hidden;display:flex;flex-direction:column;transition:all 0.3s cubic-bezier(0.25,0.46,0.45,0.94);position:relative;list-style:none;margin:0;padding:0} .shop-products .product:hover{box-shadow:0 12px 32px rgba(26,46,26,0.10);transform:translateY(-3px);border-color:transparent} .shop-products .product .onsale{position:absolute;top:10px;left:10px;background:#C0392B;color:#fff;font-family:'Jost',sans-serif;font-size:9px;font-weight:700;padding:4px 10px;border-radius:4px;letter-spacing:0.08em;text-transform:uppercase;z-index:3;line-height:1;min-height:auto;width:auto;min-width:0} .shop-products .product a.woocommerce-LoopProduct-link{padding:0!important;background:transparent!important;display:flex;flex-direction:column;text-decoration:none;color:inherit} .shop-products .product img{width:100%!important;aspect-ratio:1;object-fit:cover;background:#F7F5F0;padding:0;margin:0;display:block} .shop-products .product .woocommerce-loop-product__title{font-family:'Lora',serif;font-size:14px;color:#1A2E1A;padding:14px 14px 4px;margin:0;line-height:1.4;font-weight:400} .shop-products .product .star-rating{margin:0 14px 6px;font-size:13px;color:#C9973A;width:auto} .shop-products .product .price{font-family:'Jost',sans-serif;font-size:16px;font-weight:600;color:#0F2E3E;padding:0 14px 6px;display:block} .shop-products .product .price del{font-size:12px;color:#6B5C4E;font-weight:400;margin-right:6px;text-decoration:line-through} .shop-products .product .price ins{text-decoration:none;font-weight:600} .shop-products .product .button{display:flex!important;align-items:center;justify-content:center;gap:6px;margin:auto 14px 14px;padding:11px 10px;border-radius:6px;background:#1A2E1A!important;color:#fff!important;font-family:'Jost',sans-serif;font-size:11px;font-weight:600;letter-spacing:0.14em;text-transform:uppercase;text-align:center;transition:background 0.3s,transform 0.2s,box-shadow 0.3s;border:none;cursor:pointer;text-decoration:none} .shop-products .product .button:hover{background:#0f1f0f!important;box-shadow:0 4px 12px rgba(26,46,26,0.25);transform:translateY(-1px)} /* ═══ BR Product Card — Premium Design (matches homepage) ═══ */ .br-prod-card{background:#fff;border:1px solid #EEE7DC;border-radius:14px;overflow:hidden;display:flex;flex-direction:column;height:100%;transition:all .3s} .br-prod-card:hover{transform:translateY(-4px);box-shadow:0 16px 40px rgba(15,46,62,.10);border-color:#C9973A} .br-prod-card-img{position:relative;overflow:hidden;background:#F7F5F0;aspect-ratio:1} .br-prod-card-img a{display:block;width:100%;height:100%} .br-prod-card-img img{width:100%;height:100%;object-fit:cover;transition:opacity .4s} .br-prod-card-img .br-prod-hover-img{position:absolute;top:0;left:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity .4s} .br-prod-card:hover .br-prod-hover-img{opacity:1} .br-prod-badge{position:absolute;top:12px;left:12px;padding:5px 10px;border-radius:6px;font-family:"Jost",sans-serif;font-size:10px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;z-index:2} .br-prod-badge-sale{background:#C0392B;color:#fff} .br-prod-badge-feat{background:#0F2E3E;color:#C9973A} .br-prod-card-body{padding:14px 16px 16px;display:flex;flex-direction:column;flex:1} .br-prod-title{font-family:"Lora",serif;font-size:14px;color:#0F2E3E;font-weight:400;line-height:1.4;margin:0 0 8px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden} .br-prod-title a{color:inherit;text-decoration:none;transition:color .2s} .br-prod-title a:hover{color:#C9973A} .br-prod-rating{display:flex;align-items:center;gap:6px;margin-bottom:8px} .br-prod-stars{display:flex;gap:1px} .br-star{width:14px;height:14px;fill:none;stroke:#D5C8B3;stroke-width:1.5} .br-star-full{fill:#C9973A;stroke:#C9973A} .br-star-half{fill:url(#brStarGrad);stroke:#C9973A} .br-prod-review-count{font-family:"Jost",sans-serif;font-size:11px;color:#888} .br-prod-price{display:flex;align-items:baseline;gap:8px;flex-wrap:wrap;margin-bottom:12px} .br-prod-price-now{font-family:"Jost",sans-serif;font-size:16px;font-weight:700;color:#0F2E3E} .br-prod-price-now del{font-size:12px;color:#999;font-weight:400;margin-right:4px} .br-prod-price-now ins{text-decoration:none} .br-prod-price-was{font-family:"Jost",sans-serif;font-size:12px;color:#999;text-decoration:line-through;font-weight:400} .br-prod-price-off{font-family:"Jost",sans-serif;font-size:10px;font-weight:700;color:#C0392B;background:rgba(192,57,43,.08);padding:2px 8px;border-radius:4px;letter-spacing:.04em} .br-prod-atc{display:flex;align-items:center;justify-content:center;gap:8px;margin-top:auto;padding:11px 16px;border-radius:8px;background:#0F2E3E;color:#fff;font-family:"Jost",sans-serif;font-size:11px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;text-decoration:none;border:none;cursor:pointer;transition:all .3s} .br-prod-atc svg{width:16px;height:16px;flex-shrink:0} .br-prod-atc:hover{background:#0A1F2A;color:#fff;box-shadow:0 6px 18px rgba(201,151,58,.3);transform:translateY(-1px)} .br-prod-atc-select{background:transparent;color:#0F2E3E;border:1.5px solid #0F2E3E} .br-prod-atc-select:hover{background:#0F2E3E;color:#fff;border-color:#0F2E3E} .br-prod-atc-oos{background:#F5F0E8;color:#888;cursor:default;border:none} .br-prod-atc-oos:hover{transform:none;box-shadow:none;background:#F5F0E8;color:#888} /* Hide WC default elements on new cards */ .br-prod-card .added_to_cart{display:none} /* Grid override for new card structure */ ul.products .product:has(.br-prod-card){padding:0!important;margin:0!important;background:transparent!important;border:none!important;box-shadow:none!important;border-radius:0!important;overflow:visible!important;float:none!important;width:auto!important} @media(max-width:767px){ .br-prod-card-body{padding:10px 12px 14px} .br-prod-title{font-size:13px;-webkit-line-clamp:2;margin-bottom:6px} .br-prod-price-now{font-size:14px} .br-prod-price-was{font-size:11px} .br-prod-price-off{font-size:9px;padding:2px 6px} .br-prod-badge{top:8px;left:8px;font-size:9px;padding:4px 8px} .br-star{width:12px;height:12px} .br-prod-atc{padding:10px 12px;font-size:10px;letter-spacing:.1em;border-radius:50px} .br-prod-rating{margin-bottom:6px} .br-prod-price{margin-bottom:10px} } /* Pagination */ .woocommerce-pagination{margin-top:40px;display:flex;justify-content:center} .woocommerce-pagination ul{display:flex;gap:8px;list-style:none;padding:0;margin:0;border:none!important} .woocommerce-pagination ul li{margin:0;border:none!important} .woocommerce-pagination a,.woocommerce-pagination span{display:flex;align-items:center;justify-content:center;width:38px;height:38px;border-radius:6px;background:#fff!important;border:1px solid #E2DDD6!important;font-family:'Jost',sans-serif;font-size:13px;color:#2C2C2A;text-decoration:none;transition:all 0.2s} .woocommerce-pagination a:hover,.woocommerce-pagination .current{background:#1A2E1A!important;border-color:#1A2E1A!important;color:#fff!important} /* No products */ .woocommerce-info{background:#FFF8F0;border-left:3px solid #C9973A;padding:16px 20px;border-radius:6px;font-family:'Lora',serif;color:#0F2E3E} @media(max-width:991px){ .shop-layout{grid-template-columns:1fr;gap:20px} .shop-sidebar{position:static;order:2} .shop-products{grid-template-columns:repeat(3,1fr)} } @media(max-width:767px){ .shop-products{grid-template-columns:repeat(2,1fr);gap:12px} .shop-products .product .woocommerce-loop-product__title{font-size:13px;padding:10px 10px 4px !important} .shop-products .product .price{font-size:13px;padding:0 10px !important} .shop-hero{padding:32px 0} /* ═══ Mobile Add to Cart — clean, premium pill style ═══ */ ul.products .product .button, ul.products .product .add_to_cart_button, .shop-products .product .button{ margin:8px 10px 12px !important; padding:10px 14px !important; border-radius:50px !important; background:#0F2E3E !important; color:#fff !important; font-family:'Jost',sans-serif !important; font-size:11px !important; font-weight:600 !important; letter-spacing:.1em !important; text-transform:uppercase !important; gap:6px !important; width:calc(100% - 20px) !important; min-height:38px !important; box-sizing:border-box !important; box-shadow:0 2px 8px rgba(15,46,62,.15) !important; transition:all .25s !important } ul.products .product .button:active, ul.products .product .add_to_cart_button:active, .shop-products .product .button:active{ background:#C9973A !important; transform:scale(.97) !important; box-shadow:0 2px 12px rgba(201,151,58,.3) !important } /* Product card mobile polish */ ul.products .product, .shop-products .product{ border-radius:12px !important; border:1px solid #EEE7DC !important; box-shadow:0 2px 10px rgba(0,0,0,.04) !important; overflow:hidden !important; background:#fff !important } ul.products .product img, .shop-products .product img{ border-radius:0 !important } ul.products .product .star-rating{ margin:4px 10px !important; font-size:11px !important } /* Wishlist heart on mobile cards */ .br-wl-heart{ width:30px !important;height:30px !important; top:8px !important;right:8px !important; opacity:1 !important } .br-wl-heart svg{width:14px !important;height:14px !important} /* Sale badge mobile */ ul.products .product .onsale{ font-size:10px !important; padding:4px 8px !important; border-radius:6px !important } } /* === Standalone Checkout Steps wrapper (after page-hero) === */ .checkout-steps-wrap{background:#fff;border-bottom:1px solid #E2DDD6;padding:18px 0} .checkout-steps-wrap .checkout-steps{justify-content:center;margin:0} /* WC notices spacing on account/cart/checkout pages */ .woocommerce-notices-wrapper{margin-bottom:14px} .woocommerce-MyAccount-content > .woocommerce-Message, .woocommerce-MyAccount-content > .woocommerce-info{margin-bottom:18px} /* Account page: My Account login form spacing on account page wrap */ .u-columns{margin-top:0!important} .login-wrap > .container{padding-top:0} /* === FIX: Remove WooCommerce default clearfix ::before / ::after that eats grid cells === */ ul.products::before, ul.products::after, .woocommerce ul.products::before, .woocommerce ul.products::after, .woocommerce-page ul.products::before, .woocommerce-page ul.products::after, .shop-products::before, .shop-products::after, .related ul.products::before, .related ul.products::after, .upsells ul.products::before, .upsells ul.products::after{ display:none!important; content:none!important; } /* Also fix: legacy WC li.first clear:both ruining grid */ .woocommerce ul.products li.first, .woocommerce-page ul.products li.first, ul.products .product.first, ul.products .first{ clear:none!important; margin-left:0!important } /* ═══════════════════════════════════════ */ /* PROMOTIONAL SLIDER — Shop/Category pages */ /* ═══════════════════════════════════════ */ .shop-promo-slider-wrap{padding:24px 0 16px;background:transparent} .shop-promo-slider{position:relative;height:220px;border-radius:14px;overflow:hidden;background:#FFF8F0;box-shadow:0 4px 24px rgba(0,0,0,0.06);border:1px solid rgba(0,0,0,0.04)} /* Slide */ .shop-promo-slide{position:absolute;inset:0;display:flex;align-items:center;padding:0 56px;opacity:0;transition:opacity 0.6s ease-in-out;z-index:1;overflow:hidden} .shop-promo-slide.active{opacity:1;z-index:2} /* Decorative gradient blob */ .shop-promo-decor{position:absolute;top:-40%;right:-10%;width:60%;height:200%;border-radius:50%;opacity:0.06;transform:rotate(-12deg);pointer-events:none} /* Content */ .shop-promo-content{position:relative;z-index:3;max-width:55%;display:flex;flex-direction:column;gap:6px} .shop-promo-badge{display:inline-flex;align-items:center;width:fit-content;font-family:'Jost',sans-serif;font-size:10px;font-weight:700;letter-spacing:0.15em;text-transform:uppercase;padding:5px 12px;border-radius:4px;color:#fff;margin-bottom:4px;line-height:1} .shop-promo-badge-red{background:#C0392B} .shop-promo-badge-green{background:#1A2E1A} .shop-promo-badge-gold{background:#C9973A} .shop-promo-label{font-family:'Jost',sans-serif;font-size:11px;font-weight:600;letter-spacing:0.2em;text-transform:uppercase;margin:0;line-height:1.2} .shop-promo-title{font-family:'Cormorant Garamond',serif;font-size:34px;font-weight:600;color:#0F2E3E;line-height:1.1;letter-spacing:-0.5px;margin:4px 0 2px} .shop-promo-sub{font-family:'Lora',serif;font-size:14px;font-style:italic;color:#6B5C4E;line-height:1.5;margin:0 0 12px;max-width:90%} .shop-promo-cta{display:inline-flex;align-items:center;gap:8px;width:fit-content;padding:11px 22px;border-radius:6px;color:#fff!important;font-family:'Jost',sans-serif;font-size:12px;font-weight:600;letter-spacing:0.12em;text-transform:uppercase;text-decoration:none;transition:transform 0.2s,box-shadow 0.3s;margin-top:2px;line-height:1} .shop-promo-cta:hover{transform:translateY(-2px);box-shadow:0 6px 16px rgba(0,0,0,0.15)} .shop-promo-cta span{display:inline-block;transition:transform 0.2s} .shop-promo-cta:hover span{transform:translateX(4px)} /* Ornament SVG (right side) */ .shop-promo-ornament{position:absolute;right:6%;top:50%;transform:translateY(-50%);width:160px;height:160px;z-index:2;pointer-events:none} .shop-promo-ornament svg{width:100%;height:100%;animation:promoSpin 30s linear infinite} @keyframes promoSpin{from{transform:rotate(0)}to{transform:rotate(360deg)}} /* Arrows */ .shop-promo-arrow{position:absolute;top:50%;transform:translateY(-50%);width:36px;height:36px;border-radius:50%;background:rgba(255,255,255,0.92);border:1px solid rgba(0,0,0,0.06);color:#0F2E3E;display:flex;align-items:center;justify-content:center;font-size:22px;line-height:1;cursor:pointer;z-index:10;transition:all 0.2s;font-weight:300;backdrop-filter:blur(6px);opacity:0;font-family:Georgia,serif} .shop-promo-slider:hover .shop-promo-arrow{opacity:1} .shop-promo-arrow:hover{background:#fff;box-shadow:0 4px 12px rgba(0,0,0,0.15);transform:translateY(-50%) scale(1.08)} .shop-promo-arrow-prev{left:14px} .shop-promo-arrow-next{right:14px} /* Dots */ .shop-promo-dots{position:absolute;bottom:14px;left:50%;transform:translateX(-50%);display:flex;gap:8px;z-index:10} .shop-promo-dot{width:8px;height:8px;border-radius:50%;background:rgba(15,46,62,0.25);border:none;padding:0;cursor:pointer;transition:all 0.3s} .shop-promo-dot:hover{background:rgba(15,46,62,0.5)} .shop-promo-dot.active{width:26px;border-radius:4px;background:#0F2E3E} @media(max-width:991px){ .shop-promo-slider{height:200px} .shop-promo-title{font-size:26px} .shop-promo-sub{font-size:13px} .shop-promo-ornament{width:130px;height:130px;right:3%} .shop-promo-slide{padding:0 32px} } @media(max-width:767px){ .shop-promo-slider-wrap{padding:14px 0 8px} .shop-promo-slider{height:auto;min-height:200px} .shop-promo-slide{padding:24px 20px;align-items:flex-start;flex-direction:column;justify-content:center} .shop-promo-content{max-width:100%} .shop-promo-title{font-size:22px} .shop-promo-sub{font-size:12px;max-width:100%} .shop-promo-ornament{display:none} .shop-promo-arrow{display:none} .shop-promo-cta{padding:9px 18px;font-size:11px} } /* ═══════════════════════════════════════ */ /* FOOTER DEVELOPED-BY CREDIT (Desktop + Mobile) */ /* ═══════════════════════════════════════ */ .footer-credit{ display:flex; align-items:center; justify-content:center; gap:18px; padding:18px 16px 22px; margin-top:6px; border-top:1px solid rgba(255,255,255,0.06) } .footer-credit-line{ flex:0 1 80px; height:1px; background:linear-gradient(to right,transparent,rgba(201,151,58,0.4),transparent) } .footer-credit-text{ font-family:'Jost',sans-serif; font-size:11px; font-weight:400; color:rgba(255,255,255,0.42); letter-spacing:0.12em; text-transform:uppercase; margin:0; display:inline-flex; align-items:center; gap:8px; white-space:nowrap } .footer-credit-link{ display:inline-flex; align-items:center; gap:4px; color:#C9973A!important; text-decoration:none; font-weight:700; letter-spacing:0.16em; transition:color 0.2s,gap 0.2s; padding:2px 0 } .footer-credit-link:hover{ color:#fff!important; gap:7px } .footer-credit-brand{ position:relative; background:linear-gradient(135deg,#C9973A 0%,#E5B968 100%); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; font-weight:700; letter-spacing:0.18em } .footer-credit-link:hover .footer-credit-brand{ background:linear-gradient(135deg,#fff 0%,#fff 100%); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent } .footer-credit-link svg{ width:11px; height:11px; stroke:currentColor; fill:none; opacity:0.8; transition:transform 0.25s } .footer-credit-link:hover svg{transform:translateX(2px)} /* Mobile version */ .m-footer-credit{ display:none; padding:14px 16px 16px; text-align:center; background:#F7F5F0; border-top:1px solid rgba(0,0,0,0.05) } .m-footer-credit p{ font-family:'Jost',sans-serif; font-size:10px; font-weight:500; color:#6B5C4E; letter-spacing:0.1em; text-transform:uppercase; margin:0 } .m-footer-credit a{ color:#C9973A; text-decoration:none; margin-left:4px } .m-footer-credit a strong{ font-weight:700; letter-spacing:0.14em } @media(max-width:767px){ .footer-credit{display:none} .m-footer-credit{display:block} } @media(max-width:991px){ .footer-credit{padding:14px 12px 18px;gap:10px} .footer-credit-line{flex:0 1 40px} .footer-credit-text{font-size:10px;letter-spacing:0.08em} } /* ═══════════════════════════════════════ */ /* MY ACCOUNT DASHBOARD — Premium Cards */ /* ═══════════════════════════════════════ */ .acc-dashboard{display:flex;flex-direction:column;gap:24px} /* Welcome Banner */ .acc-dash-welcome{display:flex;align-items:center;gap:18px;padding:24px;background:linear-gradient(135deg,#0F2E3E 0%,#1A2E1A 100%);color:#fff;border-radius:14px;position:relative;overflow:hidden;box-shadow:0 8px 28px rgba(15,46,62,0.15)} .acc-dash-welcome::before{content:'';position:absolute;top:-30%;right:-10%;width:280px;height:280px;border-radius:50%;background:radial-gradient(circle,rgba(201,151,58,0.12) 0%,transparent 70%);pointer-events:none} .acc-dash-welcome::after{content:'';position:absolute;bottom:-50px;left:30%;width:120px;height:120px;border:1.5px solid rgba(201,151,58,0.15);border-radius:50%;pointer-events:none} .acc-dash-avatar{width:64px;height:64px;border-radius:50%;background:linear-gradient(135deg,#C9973A 0%,#E5B968 100%);display:flex;align-items:center;justify-content:center;font-family:"Cormorant Garamond",serif;font-size:22px;font-weight:700;color:#fff;letter-spacing:0.5px;flex-shrink:0;box-shadow:0 4px 14px rgba(201,151,58,0.35);position:relative;z-index:1;border:2.5px solid rgba(255,255,255,0.15)} .acc-dash-welcome-text{flex:1;position:relative;z-index:1;min-width:0} .acc-dash-hello{font-family:"Jost",sans-serif;font-size:11px;color:rgba(255,255,255,0.55);letter-spacing:0.16em;text-transform:uppercase;margin:0 0 2px;font-weight:500} .acc-dash-name{font-family:"Cormorant Garamond",serif;font-size:26px;color:#fff;font-weight:600;letter-spacing:-0.3px;margin:0 0 4px;line-height:1.1} .acc-dash-email{font-family:"Jost",sans-serif;font-size:11px;color:rgba(255,255,255,0.5);margin:0;letter-spacing:0.04em;font-weight:400} .acc-dash-welcome-actions{display:flex;gap:8px;position:relative;z-index:1;flex-shrink:0} .acc-dash-action-btn{width:38px;height:38px;border-radius:50%;background:rgba(255,255,255,0.08);border:1px solid rgba(255,255,255,0.15);color:rgba(255,255,255,0.7);display:flex;align-items:center;justify-content:center;text-decoration:none;transition:all 0.2s} .acc-dash-action-btn:hover{background:rgba(255,255,255,0.16);color:#fff;border-color:rgba(255,255,255,0.3);transform:translateY(-1px)} .acc-dash-action-btn.logout:hover{background:rgba(192,57,43,0.2);border-color:#C0392B;color:#fff} .acc-dash-action-btn svg{width:16px;height:16px} /* Stats Grid */ .acc-dash-stats{display:grid;grid-template-columns:repeat(4,1fr);gap:14px} .acc-dash-stat-card{display:flex;align-items:center;gap:14px;background:#fff;border:1px solid #E2DDD6;border-radius:12px;padding:16px 14px;position:relative;transition:all 0.25s;cursor:default;overflow:hidden} .acc-dash-stat-card:hover{transform:translateY(-2px);box-shadow:0 8px 22px rgba(15,46,62,0.08);border-color:transparent} .acc-dash-stat-icon{width:42px;height:42px;border-radius:10px;display:flex;align-items:center;justify-content:center;flex-shrink:0} .acc-dash-stat-icon svg{width:20px;height:20px} .acc-dash-stat-info{flex:1;min-width:0} .acc-dash-stat-value{font-family:"Cormorant Garamond",serif;font-size:22px;font-weight:700;color:#0F2E3E;line-height:1;margin-bottom:2px;letter-spacing:-0.5px} .acc-dash-stat-label{font-family:"Jost",sans-serif;font-size:10px;color:#6B5C4E;letter-spacing:0.1em;text-transform:uppercase;font-weight:500} .acc-dash-stat-link{position:absolute;top:8px;right:10px;color:#6B5C4E;text-decoration:none;font-size:18px;line-height:1;font-weight:300;opacity:0.4;transition:opacity 0.2s} .acc-dash-stat-card:hover .acc-dash-stat-link{opacity:1;color:#C9973A} /* Sections */ .acc-dash-section{background:#fff;border:1px solid #E2DDD6;border-radius:14px;padding:22px 24px;box-shadow:0 2px 12px rgba(15,46,62,0.04)} .acc-dash-section-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:18px;padding-bottom:14px;border-bottom:1px solid #F1EDE6} .acc-dash-section-head h3{font-family:"Cormorant Garamond",serif;font-size:20px;font-weight:600;color:#0F2E3E;margin:0;letter-spacing:-0.3px} .acc-dash-view-all{font-family:"Jost",sans-serif;font-size:11px;font-weight:600;color:#C9973A;text-decoration:none;letter-spacing:0.12em;text-transform:uppercase;transition:color 0.2s} .acc-dash-view-all:hover{color:#0F2E3E} /* Recent Orders */ .acc-dash-orders{display:flex;flex-direction:column;gap:10px} .acc-dash-order{display:flex;align-items:center;gap:14px;padding:12px;background:#FBFAF7;border:1px solid #F1EDE6;border-radius:10px;text-decoration:none;color:inherit;transition:all 0.2s} .acc-dash-order:hover{background:#fff;border-color:#C9973A;transform:translateX(2px);box-shadow:0 4px 14px rgba(0,0,0,0.05)} .acc-dash-order-thumb{width:54px;height:54px;border-radius:8px;overflow:hidden;background:#F7F5F0;flex-shrink:0;border:1px solid #E2DDD6} .acc-dash-order-thumb img{width:100%;height:100%;object-fit:cover;display:block} .acc-dash-order-info{flex:1;min-width:0} .acc-dash-order-head{display:flex;align-items:center;gap:10px;margin-bottom:2px;flex-wrap:wrap} .acc-dash-order-num{font-family:"Jost",sans-serif;font-size:13px;font-weight:700;color:#0F2E3E;letter-spacing:0.04em} .acc-dash-order-status{font-family:"Jost",sans-serif;font-size:9px;font-weight:700;letter-spacing:0.08em;text-transform:uppercase;padding:3px 9px;border-radius:10px;background:#F7F5F0;color:#6B5C4E;line-height:1} .acc-dash-status-completed{background:#E8F5E9;color:#2E7D32} .acc-dash-status-processing{background:#FFF8E1;color:#F57F17} .acc-dash-status-pending{background:#FFF4E6;color:#C9973A} .acc-dash-status-on-hold{background:#F0F5EE;color:#1A2E1A} .acc-dash-status-cancelled,.acc-dash-status-failed{background:#FDF1F0;color:#C0392B} .acc-dash-order-meta{font-family:"Jost",sans-serif;font-size:11px;color:#6B5C4E;margin:0 0 2px;letter-spacing:0.02em} .acc-dash-order-total{font-family:"Jost",sans-serif;font-size:13px;font-weight:700;color:#C9973A;margin:0} .acc-dash-order-arrow{font-size:24px;color:#C9973A;font-weight:300;line-height:1;opacity:0.5;transition:opacity 0.2s,transform 0.2s} .acc-dash-order:hover .acc-dash-order-arrow{opacity:1;transform:translateX(3px)} /* Empty state */ .acc-dash-empty{text-align:center;padding:30px 18px} .acc-dash-empty svg{width:54px;height:54px;margin:0 auto 14px;display:block;opacity:0.7} .acc-dash-empty h4{font-family:"Cormorant Garamond",serif;font-size:22px;color:#0F2E3E;margin:0 0 6px;font-weight:600} .acc-dash-empty p{font-family:"Lora",serif;font-size:13px;color:#6B5C4E;margin:0 0 16px;font-style:italic} .acc-dash-empty-cta{display:inline-flex;align-items:center;gap:6px;padding:11px 22px;background:linear-gradient(135deg,#1A2E1A 0%,#0F2E3E 100%);color:#fff;font-family:"Jost",sans-serif;font-size:11px;font-weight:700;letter-spacing:0.14em;text-transform:uppercase;border-radius:30px;text-decoration:none;transition:all 0.25s} .acc-dash-empty-cta:hover{background:linear-gradient(135deg,#C9973A,#b8862f);transform:translateY(-1px);box-shadow:0 6px 18px rgba(201,151,58,0.3)} /* Quick Action Cards */ .acc-dash-quick{display:grid;grid-template-columns:repeat(2,1fr);gap:10px} .acc-dash-quick-card{display:flex;align-items:center;gap:12px;padding:14px;background:#FBFAF7;border:1px solid #F1EDE6;border-radius:10px;text-decoration:none;color:inherit;transition:all 0.2s} .acc-dash-quick-card:hover{background:#fff;border-color:#C9973A;transform:translateY(-2px);box-shadow:0 6px 18px rgba(0,0,0,0.06)} .acc-dash-quick-icon{width:38px;height:38px;border-radius:9px;background:#FFF4E6;color:#C9973A;display:flex;align-items:center;justify-content:center;flex-shrink:0;transition:all 0.2s} .acc-dash-quick-card:hover .acc-dash-quick-icon{background:#C9973A;color:#1A2E1A} .acc-dash-quick-icon svg{width:18px;height:18px} .acc-dash-quick-card strong{display:block;font-family:"Jost",sans-serif;font-size:13px;font-weight:600;color:#0F2E3E;margin-bottom:1px;letter-spacing:0.02em} .acc-dash-quick-card small{display:block;font-family:"Lora",serif;font-size:11px;color:#6B5C4E;font-style:italic} /* Promotional Card */ .acc-dash-promo{display:flex;align-items:center;gap:24px;background:linear-gradient(135deg,#FFF8F0 0%,#FFF4E6 100%);border:1.5px dashed rgba(201,151,58,0.4);border-radius:14px;padding:22px 26px;position:relative;overflow:hidden} .acc-dash-promo::before{content:'';position:absolute;top:-40%;right:-5%;width:200px;height:200px;border-radius:50%;background:radial-gradient(circle,rgba(201,151,58,0.1) 0%,transparent 70%);pointer-events:none} .acc-dash-promo-text{flex:1;position:relative;z-index:1} .acc-dash-promo-badge{display:inline-block;font-family:"Jost",sans-serif;font-size:9px;font-weight:700;letter-spacing:0.15em;text-transform:uppercase;color:#fff;background:#C9973A;padding:4px 10px;border-radius:4px;margin-bottom:8px;line-height:1} .acc-dash-promo-text h3{font-family:"Cormorant Garamond",serif;font-size:22px;color:#0F2E3E;font-weight:600;margin:0 0 6px;letter-spacing:-0.3px} .acc-dash-promo-text h3 em{color:#C9973A;font-style:italic} .acc-dash-promo-text p{font-family:"Lora",serif;font-size:13px;color:#6B5C4E;margin:0;line-height:1.5} .acc-dash-promo-text code{background:#fff;color:#0F2E3E;padding:2px 8px;border-radius:4px;font-family:"Jost",sans-serif;font-size:12px;font-weight:700;letter-spacing:0.1em;border:1px dashed #C9973A} .acc-dash-promo-cta{display:inline-flex;align-items:center;gap:6px;padding:12px 22px;background:#1A2E1A;color:#fff;font-family:"Jost",sans-serif;font-size:11px;font-weight:700;letter-spacing:0.14em;text-transform:uppercase;border-radius:30px;text-decoration:none;transition:all 0.25s;white-space:nowrap;flex-shrink:0;position:relative;z-index:1} .acc-dash-promo-cta:hover{background:#0F1F0F;transform:translateY(-1px);box-shadow:0 6px 18px rgba(201,151,58,0.3)} /* Fix sidebar navigation spacing & active state */ .woocommerce-MyAccount-navigation ul li a{padding:13px 14px!important;font-size:13px!important;white-space:normal;line-height:1.3;border-radius:8px;color:#2C2C2A} .woocommerce-MyAccount-navigation ul li.is-active a{color:#fff!important} /* Active-state white icons for sidebar (Dashboard, Orders, etc.) */ .woocommerce-MyAccount-navigation ul li.is-active a::before{filter:brightness(0) invert(1)} /* ═══════════════════════════════════════ */ /* Override WC default float/width on My Account */ /* ═══════════════════════════════════════ */ .woocommerce-account .woocommerce-MyAccount-navigation, .woocommerce-account .woocommerce-MyAccount-content, .woocommerce-MyAccount-navigation, .woocommerce-MyAccount-content{ float:none!important; width:100%!important; max-width:none!important } /* Page.php's .page-content has max-width:820px for blog-style readability. But WooCommerce pages (cart/checkout/my-account/shop) need full width. Override on WC body classes. */ body.woocommerce-account .page-content, body.woocommerce-cart .page-content, body.woocommerce-checkout .page-content, body.woocommerce-page .page-content{ max-width:none!important; width:100%!important; margin:0!important } /* Premium dashboard h2 color fix — override generic .woocommerce-MyAccount-content h2 */ .acc-dash-name, .woocommerce-MyAccount-content .acc-dash-name{ color:#fff!important; font-family:"Cormorant Garamond",serif!important; font-size:26px!important; font-weight:600!important; letter-spacing:-0.3px!important; line-height:1.1!important; margin:0 0 4px!important } .acc-dash-section-head h3, .woocommerce-MyAccount-content .acc-dash-section-head h3{ color:#0F2E3E!important; margin:0!important } .acc-dash-empty h4, .woocommerce-MyAccount-content .acc-dash-empty h4{color:#0F2E3E!important;margin:0 0 6px!important} .acc-dash-promo-text h3, .woocommerce-MyAccount-content .acc-dash-promo-text h3{color:#0F2E3E!important;margin:0 0 6px!important} /* Ensure container on my-account page uses full premium width */ body.woocommerce-account .acc-wrap > .container, body.woocommerce-account .acc-wrap .container{ max-width:1320px!important; width:100%!important; padding-left:16px; padding-right:16px; box-sizing:border-box } body.woocommerce-account .acc-layout{ width:100%!important; max-width:none!important } @media(max-width:991px){ .acc-dash-stats{grid-template-columns:repeat(2,1fr)} .acc-dash-quick{grid-template-columns:1fr} .acc-dash-promo{flex-direction:column;text-align:center;gap:14px} } @media(max-width:767px){ .acc-dash-welcome{flex-direction:column;text-align:center;padding:20px} .acc-dash-avatar{width:56px;height:56px;font-size:18px} .acc-dash-name{font-size:22px} .acc-dash-welcome-actions{justify-content:center} .acc-dash-stats{grid-template-columns:1fr 1fr;gap:10px} .acc-dash-stat-value{font-size:18px} .acc-dash-section{padding:18px} } /* ════════════════════════════════════════════════════════════ FIX PACK — Compact heroes, display name visibility, dynamic megamenu ul/li structure ════════════════════════════════════════════════════════════ */ /* 1) Reduce hero vertical space on Shop / Page hero */ .shop-hero{ padding: 24px 0 18px !important; } .shop-hero .shop-breadcrumb{ font-size: 11px !important; margin-bottom: 6px !important; letter-spacing: .12em; } .shop-hero .shop-title{ font-size: 32px !important; line-height: 1.15 !important; margin: 4px 0 6px !important; } .shop-hero .shop-desc{ font-size: 14px !important; margin: 4px 0 8px !important; max-width: 640px; } .shop-hero .woocommerce-result-count{ font-size: 12px !important; margin: 0 !important; color:#6B5C4E; } .page-hero{ padding: 26px 0 22px !important; } .page-hero .page-breadcrumb{ font-size: 11px !important; margin-bottom: 6px !important; } .page-hero .page-title{ font-size: 34px !important; line-height: 1.15 !important; margin: 4px 0 6px !important; } .page-hero .page-subtitle{ font-size: 14px !important; margin: 0 !important; max-width: 720px; } @media (max-width: 768px){ .shop-hero, .page-hero { padding: 18px 16px 14px !important; } .shop-hero .shop-title, .page-hero .page-title{ font-size: 24px !important; } /* ═══ Mobile spacing — prevent content touching edges ═══ */ .shop-wrap{padding-left:0;padding-right:0} .shop-layout{padding:0} .shop-promo-slider-wrap{padding-left:16px;padding-right:16px} .shop-promo-slide{padding:0 24px !important} ul.products{padding:0 !important;margin:0 !important} .shop-products{gap:10px !important} ul.products .product{border-radius:10px;overflow:hidden} .woocommerce-tabs{padding:0 16px} .related.products,.upsells.products{padding:20px 16px 0} .woocommerce-notices-wrapper{padding:0 16px} /* Blog / About / Contact hero sections */ .brblog-hero,.br-about-hero,.br-ct-hero{padding-left:16px;padding-right:16px} } /* 2) My-Account welcome display name visibility */ .acc-dash-welcome .acc-dash-name, .woocommerce-MyAccount-content .acc-dash-name, body.woocommerce-account .acc-dash-name{ color:#ffffff !important; -webkit-text-fill-color:#ffffff !important; background:transparent !important; background-image:none !important; text-shadow:none !important; border:none !important; text-decoration:none !important; opacity:1 !important; font-size:34px !important; font-weight:600 !important; line-height:1.2 !important; display:inline-block !important; visibility:visible !important; } .acc-dash-welcome a, .acc-dash-welcome a:hover{ color:#fff !important; text-decoration:none !important; } /* 3) Dynamic megamenu (ul.mega-links > li.mega-link) */ ul.mega-links{ list-style:none; margin:0; padding:0; display:flex; align-items:center; gap:34px; flex-wrap:wrap; } ul.mega-links > li.mega-link{ position:relative; font-family:'Jost',sans-serif; font-size:13px; font-weight:500; letter-spacing:.08em; text-transform:uppercase; padding:14px 0; cursor:pointer; } ul.mega-links > li.mega-link > a{ color:#ffffff; text-decoration:none; position:relative; display:inline-block; padding:0; transition: color .2s ease; font-family: var(--font-ui, 'Jost', sans-serif); font-size: 13px; font-weight: 500; letter-spacing: 0.12em; text-transform: uppercase; } ul.mega-links > li.mega-link > a::after{ content:""; position:absolute; left:0; right:0; bottom:-4px; height:2px; background:#C9973A; transform:scaleX(0); transform-origin:left; transition:transform .25s ease; } ul.mega-links > li.mega-link:hover > a{ color:#C9973A; } ul.mega-links > li.mega-link:hover > a::after{ transform:scaleX(1); } ul.mega-links > li.mega-link.sale > a, ul.mega-links > li.mega-link.menu-item-sale > a{ color:#C0392B !important; font-weight:700; } /* Dropdown panel — items columns + featured card */ ul.mega-links > li.mega-link .mega-dropdown{ position:absolute; top:100%; left:0; width:640px; background:#fff; box-shadow:0 24px 60px rgba(15,46,62,.18); border:1px solid rgba(15,46,62,.06); border-top:3px solid #C9973A; padding:28px 30px; display:none; z-index:100; border-radius:0 0 10px 10px; gap:28px; align-items:flex-start; } ul.mega-links > li.mega-link.has-dropdown:hover .mega-dropdown{ display:flex; } ul.mega-links .mega-dropdown .mega-cols{ flex:1; display:grid; grid-template-columns:1fr 1fr; gap:10px 24px; align-content:flex-start; } ul.mega-links .mega-dropdown .mega-cols a{ font-family:'Jost',sans-serif; font-size:13px; font-weight:500; letter-spacing:.04em; text-transform:uppercase; color:#3D2E1F; text-decoration:none; padding:7px 0; border-bottom:1px solid #F0EBE2; transition:all .2s ease; display:block; position:relative; padding-left:0; } ul.mega-links .mega-dropdown .mega-cols a:hover{ color:#C9973A; padding-left:8px; border-bottom-color:#C9973A; } ul.mega-links .mega-dropdown .mega-cols a::before{ content:""; position:absolute; left:0; top:50%; width:0; height:1px; background:#C9973A; transition:width .2s ease; } ul.mega-links .mega-dropdown .mega-cols a:hover::before{ width:4px; } /* Featured product card */ ul.mega-links .mega-dropdown .mega-featured{ width:200px; flex-shrink:0; background:linear-gradient(135deg,#FAF7F0 0%,#F2EDE0 100%); border-radius:10px; padding:16px 14px; text-align:center; text-decoration:none; position:relative; transition:all .25s ease; border:1px solid rgba(201,151,58,.15); } ul.mega-links .mega-dropdown .mega-featured:hover{ border-color:#C9973A; box-shadow:0 8px 24px rgba(201,151,58,.18); transform:translateY(-2px); } ul.mega-links .mega-dropdown .mega-featured-tag{ position:absolute; top:8px; left:8px; background:#C9973A; color:#fff; font-family:'Jost',sans-serif; font-size:9px; font-weight:700; letter-spacing:.14em; padding:3px 8px; border-radius:3px; text-transform:uppercase; } ul.mega-links .mega-dropdown .mega-featured img{ width:100%; height:140px; object-fit:cover; border-radius:6px; margin:0 0 12px; background:#fff; } ul.mega-links .mega-dropdown .mega-featured-name{ font-family:'Cormorant Garamond',serif; font-size:15px; color:#0F2E3E; font-weight:600; line-height:1.25; margin-bottom:4px; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; text-transform:none; letter-spacing:0; } ul.mega-links .mega-dropdown .mega-featured-price{ font-family:'Jost',sans-serif; font-size:14px; color:#C9973A; font-weight:700; margin-bottom:10px; } ul.mega-links .mega-dropdown .mega-featured-price del{ color:#A89684; font-weight:400; font-size:12px; margin-right:4px; } ul.mega-links .mega-dropdown .mega-featured-link{ font-family:'Jost',sans-serif; font-size:11px; color:#0F2E3E; font-weight:600; letter-spacing:.1em; text-transform:uppercase; display:inline-block; padding-bottom:2px; border-bottom:1px solid #0F2E3E; } ul.mega-links .mega-dropdown .mega-featured:hover .mega-featured-link{ color:#C9973A; border-color:#C9973A; } /* If no featured card (sub-items only), make cols full width */ ul.mega-links .mega-dropdown:not(:has(.mega-featured)){ width:480px; } ul.mega-links .mega-dropdown:not(:has(.mega-featured)) .mega-cols{ grid-template-columns:1fr 1fr; } @media (max-width: 1024px){ ul.mega-links{ gap:22px; } } @media (max-width: 900px){ .nav-mega{ display:none; } } /* ════════════════════════════════════════════════════════════ WISHLIST PAGE ════════════════════════════════════════════════════════════ */ .wl-wrap{padding:36px 0 80px;background:#FAFAF7;min-height:50vh} .wl-toolbar{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:16px;padding:16px 22px;background:#fff;border:1px solid #EEE7DC;border-radius:12px;margin-bottom:28px;box-shadow:0 4px 16px rgba(15,46,62,.04)} .wl-toolbar-left{display:flex;align-items:center;gap:12px} .wl-count-badge{display:inline-flex;align-items:baseline;gap:4px;padding:6px 14px;background:linear-gradient(135deg,#0F2E3E,#1a3f52);color:#C9973A;border-radius:30px;font-family:'Jost',sans-serif;font-size:13px;font-weight:700;letter-spacing:.04em} .wl-count-badge span:first-child{font-size:15px;color:#fff} .wl-toolbar-text{font-family:'Jost',sans-serif;font-size:13px;color:#6B5C4E} .wl-toolbar-right{display:flex;gap:10px;align-items:center;flex-wrap:wrap} .wl-btn-primary,.wl-btn-secondary{display:inline-flex;align-items:center;gap:8px;padding:10px 20px;font-family:'Jost',sans-serif;font-size:12px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;border-radius:30px;text-decoration:none;transition:all .25s;cursor:pointer;border:1.5px solid transparent} .wl-btn-primary{background:#0F2E3E;color:#fff} .wl-btn-primary:hover{background:#0A1F2A;color:#fff} .wl-btn-secondary{background:transparent;color:#0F2E3E;border-color:#0F2E3E} .wl-btn-secondary:hover{background:#0F2E3E;color:#fff} .wl-btn-primary.lg,.wl-btn-secondary.lg{padding:14px 28px;font-size:13px} /* Empty State */ .wl-empty{background:#fff;border:1px solid #EEE7DC;border-radius:16px;padding:60px 30px;text-align:center;box-shadow:0 4px 24px rgba(15,46,62,.05)} .wl-empty-icon{display:flex;justify-content:center;margin-bottom:18px;animation:wlFloat 3s ease-in-out infinite} @keyframes wlFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-8px)}} .wl-empty-icon svg{width:96px;height:96px} .wl-empty-title{font-family:'Cormorant Garamond',serif;font-size:34px;color:#0F2E3E;margin:0 0 10px;font-weight:500} .wl-empty-text{font-family:'Lora',serif;font-size:15px;color:#6B5C4E;max-width:480px;margin:0 auto 28px;line-height:1.6} .wl-empty-actions{display:flex;justify-content:center;gap:12px;flex-wrap:wrap;margin-bottom:50px} .wl-empty-perks{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;max-width:760px;margin:0 auto;padding-top:40px;border-top:1px dashed #DDD0BD} .wl-perk{display:flex;align-items:flex-start;gap:12px;text-align:left} .wl-perk-icon{flex-shrink:0;width:40px;height:40px;display:flex;align-items:center;justify-content:center;background:rgba(201,151,58,.12);border-radius:50%;color:#C9973A} .wl-perk-icon svg{width:20px;height:20px} .wl-perk strong{display:block;font-family:'Jost',sans-serif;font-size:13px;color:#0F2E3E;font-weight:700;margin-bottom:2px} .wl-perk span{display:block;font-family:'Lora',serif;font-size:12px;color:#6B5C4E;line-height:1.4} /* Wishlist Grid */ .wl-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:22px} .wl-card{position:relative;background:#fff;border:1px solid #EEE7DC;border-radius:12px;overflow:hidden;transition:all .3s;display:flex;flex-direction:column} .wl-card:hover{transform:translateY(-4px);box-shadow:0 16px 40px rgba(15,46,62,.1);border-color:#C9973A} .wl-card-remove{position:absolute;top:10px;right:10px;width:32px;height:32px;background:rgba(255,255,255,.95);border:1px solid #EEE7DC;border-radius:50%;display:flex;align-items:center;justify-content:center;cursor:pointer;color:#6B5C4E;z-index:2;transition:all .2s;backdrop-filter:blur(4px)} .wl-card-remove:hover{background:#C0392B;color:#fff;border-color:#C0392B;transform:rotate(90deg)} .wl-card-remove svg{width:14px;height:14px} .wl-card-img{display:block;aspect-ratio:1;overflow:hidden;background:#F7F5F0} .wl-card-img img{width:100%;height:100%;object-fit:cover;transition:transform .5s} .wl-card:hover .wl-card-img img{transform:scale(1.06)} .wl-card-body{padding:16px 16px 18px;display:flex;flex-direction:column;gap:6px;flex:1} .wl-card-cat{font-family:'Jost',sans-serif;font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:#C9973A;font-weight:600} .wl-card-name{font-family:'Cormorant Garamond',serif;font-size:18px;color:#0F2E3E;font-weight:500;line-height:1.25;text-decoration:none;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;min-height:46px} .wl-card-name:hover{color:#C9973A} .wl-card-price{font-family:'Jost',sans-serif;font-size:16px;color:#0F2E3E;font-weight:700;margin-top:auto;padding-top:6px} .wl-card-price del{color:#A89684;font-weight:400;margin-right:6px;font-size:13px} .wl-card-price ins{text-decoration:none;color:#C0392B} .wl-card-actions{display:flex;gap:6px;margin-top:10px} .wl-add-btn,.wl-view-btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;padding:9px 12px;font-family:'Jost',sans-serif;font-size:11px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;border-radius:6px;text-decoration:none;transition:all .2s;cursor:pointer;border:1.5px solid transparent} .wl-add-btn{flex:1;background:#C9973A;color:#fff} .wl-add-btn:hover{background:#0F2E3E;color:#fff} .wl-add-btn svg{width:14px;height:14px} .wl-view-btn{background:transparent;color:#0F2E3E;border-color:#DDD0BD} .wl-view-btn:hover{background:#0F2E3E;color:#fff;border-color:#0F2E3E} /* Heart button on SINGLE product page (next to Add-to-Cart) */ .br-wl-heart-single{ position:static !important; display:inline-flex !important; align-items:center; gap:8px; width:auto !important; height:48px; padding:0 22px !important; background:#fff !important; border:1.5px solid #E2DDD6 !important; border-radius:30px !important; font-family:'Jost',sans-serif; font-size:12px; font-weight:600; letter-spacing:.1em; text-transform:uppercase; color:#0F2E3E !important; cursor:pointer; margin:14px 0 0 !important; transition:all .25s; box-shadow:none !important; } .br-wl-heart-single svg{width:18px !important;height:18px !important} .br-wl-heart-single:hover{ border-color:#C0392B !important; color:#C0392B !important; transform:translateY(-2px) !important; } .br-wl-heart-single.is-active{ background:#C0392B !important; border-color:#C0392B !important; color:#fff !important; } .br-wl-heart-single.is-active svg{fill:#fff;stroke:#fff} /* Heart toggle on product cards (global) */ .br-wl-heart{position:absolute;top:10px;right:10px;width:36px;height:36px;background:rgba(255,255,255,.95);border:1px solid #EEE7DC;border-radius:50%;display:flex;align-items:center;justify-content:center;cursor:pointer;color:#6B5C4E;z-index:5;transition:all .25s;backdrop-filter:blur(4px)} .br-wl-heart:hover{transform:scale(1.1);border-color:#C9973A;color:#C9973A} .br-wl-heart svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2;transition:all .25s} .br-wl-heart.is-active{background:#C0392B;color:#fff;border-color:#C0392B} .br-wl-heart.is-active svg{fill:#fff;stroke:#fff} li.product{position:relative} @media (max-width:768px){ .wl-toolbar{flex-direction:column;align-items:flex-start;padding:14px 16px} .wl-toolbar-right{width:100%;justify-content:space-between} .wl-empty{padding:40px 18px} .wl-empty-title{font-size:26px} .wl-empty-perks{grid-template-columns:1fr;gap:14px;text-align:left} .wl-grid{grid-template-columns:repeat(2,1fr);gap:14px} .wl-card-name{font-size:15px;min-height:38px} .wl-card-actions{flex-direction:column} } /* ════════════════════════════════════════════════════════════ FIX — My Account Addresses page layout (WC reuses .u-columns class for both login and addresses) ════════════════════════════════════════════════════════════ */ body.woocommerce-account .woocommerce-MyAccount-content .u-columns{ display:grid !important; grid-template-columns:1fr 1fr !important; gap:20px !important; max-width:none !important; margin:18px 0 0 !important; align-items:stretch !important; } body.woocommerce-account .woocommerce-MyAccount-content .u-column1, body.woocommerce-account .woocommerce-MyAccount-content .u-column2{ background:#FBFAF7 !important; border:1px solid #E2DDD6 !important; border-radius:10px !important; padding:22px 24px !important; box-shadow:none !important; width:auto !important; float:none !important; margin:0 !important; } body.woocommerce-account .woocommerce-MyAccount-content .u-column1::before, body.woocommerce-account .woocommerce-MyAccount-content .u-column2::before{ display:none !important; content:none !important; width:auto !important; height:auto !important; background:transparent !important; margin:0 !important; } body.woocommerce-account .woocommerce-MyAccount-content .u-columns::before, body.woocommerce-account .woocommerce-MyAccount-content .u-columns::after{ display:none !important; content:none !important; clear:none !important; } /* Address card header (title + Edit link) */ body.woocommerce-account .woocommerce-Address{ background:transparent !important; border:none !important; padding:0 !important; border-radius:0 !important; } body.woocommerce-account .woocommerce-Address header.woocommerce-Address-title, body.woocommerce-account .woocommerce-Address .woocommerce-Address-title{ display:flex !important; justify-content:space-between !important; align-items:center !important; gap:12px !important; margin:0 0 12px !important; padding:0 0 12px !important; border-bottom:1px solid #E2DDD6 !important; flex-wrap:nowrap !important; } body.woocommerce-account .woocommerce-Address-title h2, body.woocommerce-account .woocommerce-Address-title h3{ font-family:'Cormorant Garamond',serif !important; font-size:20px !important; font-weight:600 !important; color:#0F2E3E !important; margin:0 !important; padding:0 !important; line-height:1.2 !important; flex:1 !important; white-space:nowrap !important; } body.woocommerce-account .woocommerce-Address-title .edit{ display:inline-flex !important; align-items:center !important; gap:6px !important; padding:7px 14px !important; background:#0F2E3E !important; color:#fff !important; font-family:'Jost',sans-serif !important; font-size:10px !important; font-weight:600 !important; letter-spacing:.08em !important; text-transform:uppercase !important; text-decoration:none !important; border-radius:20px !important; white-space:nowrap !important; border:1px solid #0F2E3E !important; transition:all .2s !important; flex-shrink:0 !important; } body.woocommerce-account .woocommerce-Address-title .edit:hover{ background:#C9973A !important; border-color:#C9973A !important; color:#fff !important; } body.woocommerce-account .woocommerce-Address address{ font-family:'Lora',serif !important; font-style:normal !important; font-size:14px !important; color:#2C2C2A !important; line-height:1.8 !important; margin:0 !important; } /* Intro paragraph */ body.woocommerce-account .woocommerce-MyAccount-content > p:first-of-type{ font-family:'Lora',serif !important; font-size:14px !important; color:#6B5C4E !important; margin:0 0 6px !important; text-align:left !important; } body.woocommerce-account .woocommerce-MyAccount-content > p:first-of-type a{ color:#C9973A !important; text-decoration:none !important; border-bottom:1px solid #C9973A !important; } @media (max-width:768px){ body.woocommerce-account .woocommerce-MyAccount-content .u-columns{ grid-template-columns:1fr !important; } body.woocommerce-account .woocommerce-Address-title h2, body.woocommerce-account .woocommerce-Address-title h3{ font-size:17px !important; white-space:normal !important; } } /* ════════════════════════════════════════════════════════════ QUICK VIEW — Card button + Premium modal ════════════════════════════════════════════════════════════ */ .br-qv-btn{position:absolute;bottom:14px;left:50%;transform:translateX(-50%) translateY(14px);display:inline-flex;align-items:center;gap:8px;padding:10px 18px;background:rgba(255,255,255,.96);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);border:1px solid rgba(15,46,62,.1);border-radius:30px;font-family:Jost,sans-serif;font-size:11px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:#0F2E3E;cursor:pointer;opacity:0;transition:all .35s cubic-bezier(.25,.46,.45,.94);z-index:5;box-shadow:0 8px 24px rgba(15,46,62,.12);white-space:nowrap} .br-qv-btn svg{width:14px;height:14px} li.product:hover .br-qv-btn, .products .product:hover .br-qv-btn{opacity:1;transform:translateX(-50%) translateY(0)} .br-qv-btn:hover{background:#0F2E3E;color:#C9973A;border-color:#0F2E3E} .qv-modal{position:fixed;inset:0;z-index:99999;display:flex;align-items:center;justify-content:center;padding:24px;opacity:0;visibility:hidden;transition:opacity .3s, visibility .3s} .qv-modal.is-open{opacity:1;visibility:visible} .qv-backdrop{position:absolute;inset:0;background:rgba(15,46,62,.65);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);cursor:pointer} .qv-dialog{position:relative;background:#fff;width:100%;max-width:980px;max-height:92vh;border-radius:14px;box-shadow:0 32px 80px rgba(0,0,0,.4);overflow:hidden;display:flex;flex-direction:column;transform:scale(.94);transition:transform .35s cubic-bezier(.25,.46,.45,.94)} .qv-modal.is-open .qv-dialog{transform:scale(1)} .qv-close{position:absolute;top:16px;right:16px;width:38px;height:38px;background:rgba(255,255,255,.95);border:1px solid #E2DDD6;border-radius:50%;display:flex;align-items:center;justify-content:center;cursor:pointer;color:#0F2E3E;z-index:10;transition:all .25s} .qv-close:hover{background:#C0392B;color:#fff;border-color:#C0392B;transform:rotate(90deg)} .qv-close svg{width:16px;height:16px} .qv-body{flex:1;overflow-y:auto;-webkit-overflow-scrolling:touch} .qv-body::-webkit-scrollbar{width:6px} .qv-body::-webkit-scrollbar-thumb{background:#DDD0BD;border-radius:3px} .qv-loader{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:80px 20px;gap:16px} .qv-spinner{width:40px;height:40px;border:3px solid #EEE7DC;border-top-color:#C9973A;border-radius:50%;animation:qvSpin .8s linear infinite} @keyframes qvSpin{to{transform:rotate(360deg)}} .qv-loader p{font-family:Jost,sans-serif;font-size:13px;color:#6B5C4E;letter-spacing:.05em;margin:0} .qv-error{padding:60px 20px;text-align:center;font-family:Lora,serif;color:#6B5C4E} .qv-grid{display:grid;grid-template-columns:1fr 1fr;min-height:520px} .qv-gallery{background:#F7F5F0;padding:32px;display:flex;flex-direction:column;gap:14px} .qv-gallery-main{position:relative;aspect-ratio:1;background:#fff;border-radius:10px;overflow:hidden;display:flex;align-items:center;justify-content:center} .qv-gallery-main img{width:100%;height:100%;object-fit:cover;transition:opacity .3s} .qv-sale-badge{position:absolute;top:14px;left:14px;background:#C0392B;color:#fff;font-family:Jost,sans-serif;font-size:11px;font-weight:700;letter-spacing:.12em;padding:6px 12px;border-radius:4px;z-index:2} .qv-thumbs{display:flex;gap:8px;overflow-x:auto;padding-bottom:4px} .qv-thumb{flex-shrink:0;width:60px;height:60px;background:#fff;border:2px solid #E2DDD6;border-radius:6px;overflow:hidden;cursor:pointer;padding:0;transition:all .2s} .qv-thumb img{width:100%;height:100%;object-fit:cover} .qv-thumb:hover{border-color:#C9973A} .qv-thumb.is-active{border-color:#0F2E3E;box-shadow:0 0 0 2px rgba(15,46,62,.1)} .qv-info{padding:40px 36px;display:flex;flex-direction:column;gap:14px} .qv-cat{font-family:Jost,sans-serif;font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:#C9973A;font-weight:600} .qv-cat a{color:inherit;text-decoration:none} .qv-cat a:hover{text-decoration:underline} .qv-title{font-family:"Cormorant Garamond",serif;font-size:30px;font-weight:500;color:#0F2E3E;margin:0;line-height:1.2} .qv-rating{display:flex;align-items:center;gap:10px;font-family:Jost,sans-serif;font-size:13px;color:#6B5C4E} .qv-stars{display:inline-block;position:relative;line-height:1} .qv-stars::before{content:"★★★★★";color:#DDD0BD;letter-spacing:2px;font-size:16px} .qv-stars::after{content:"★★★★★";color:#C9973A;letter-spacing:2px;font-size:16px;position:absolute;left:0;top:0;width:var(--pct,0%);overflow:hidden;white-space:nowrap} .qv-price{font-family:Jost,sans-serif;font-size:26px;font-weight:700;color:#0F2E3E;display:flex;align-items:baseline;gap:10px;flex-wrap:wrap} .qv-price del{color:#A89684;font-weight:400;font-size:18px;opacity:.7} .qv-price ins{text-decoration:none;color:#C0392B} .qv-price .woocommerce-Price-amount{font-size:inherit} .qv-stock{display:inline-flex;align-items:center;gap:8px;font-family:Jost,sans-serif;font-size:12px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;padding:6px 12px;border-radius:20px;width:fit-content} .qv-stock-in-stock{background:#E8F5E9;color:#1B5E20} .qv-stock-out-of-stock{background:#FFEBEE;color:#B71C1C} .qv-stock-dot{width:8px;height:8px;border-radius:50%;background:currentColor;animation:qvPulse 2s infinite} @keyframes qvPulse{0%,100%{box-shadow:0 0 0 0 currentColor;opacity:1}50%{box-shadow:0 0 0 4px transparent;opacity:.6}} .qv-stock-low{color:#C0392B;text-transform:none;font-weight:500;margin-left:4px} .qv-desc{font-family:Lora,serif;font-size:14px;color:#3D2E1F;line-height:1.7;padding:14px 0;border-top:1px solid #EEE7DC;border-bottom:1px solid #EEE7DC} .qv-desc p{margin:0 0 8px} .qv-desc p:last-child{margin-bottom:0} .qv-actions{display:flex;gap:10px;align-items:stretch;margin-top:6px} .qv-qty-wrap{display:flex;align-items:center;border:1.5px solid #E2DDD6;border-radius:30px;overflow:hidden;background:#FBFAF7} .qv-qty-btn{width:38px;height:48px;background:transparent;border:none;font-size:18px;color:#0F2E3E;cursor:pointer;font-weight:600;transition:background .2s} .qv-qty-btn:hover{background:rgba(201,151,58,.12);color:#C9973A} .qv-qty{width:42px;height:48px;border:none;background:transparent;text-align:center;font-family:Jost,sans-serif;font-size:15px;font-weight:600;color:#0F2E3E;-moz-appearance:textfield;outline:none} .qv-qty::-webkit-inner-spin-button, .qv-qty::-webkit-outer-spin-button{-webkit-appearance:none;margin:0} .qv-add-btn{flex:1;display:inline-flex;align-items:center;justify-content:center;gap:10px;padding:0 24px;height:48px;background:#C9973A;color:#fff !important;font-family:Jost,sans-serif;font-size:13px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;border:none;border-radius:30px;text-decoration:none;cursor:pointer;transition:all .25s;white-space:nowrap} .qv-add-btn:hover{background:#0F2E3E} .qv-add-btn.qv-disabled{background:#A89684;cursor:not-allowed;opacity:.7} .qv-wish-btn{width:48px;height:48px;background:#FBFAF7;border:1.5px solid #E2DDD6;border-radius:50%;display:flex;align-items:center;justify-content:center;cursor:pointer;color:#6B5C4E;transition:all .25s} .qv-wish-btn:hover{border-color:#C0392B;color:#C0392B} .qv-wish-btn.is-active{background:#C0392B;color:#fff;border-color:#C0392B} .qv-wish-btn.is-active svg{fill:currentColor} .qv-view-full{display:inline-block;font-family:Jost,sans-serif;font-size:12px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:#0F2E3E;text-decoration:none;padding-bottom:2px;border-bottom:1px solid #0F2E3E;width:fit-content;transition:all .2s} .qv-view-full:hover{color:#C9973A;border-color:#C9973A} .qv-meta{margin-top:8px;padding-top:14px;border-top:1px dashed #DDD0BD;display:flex;flex-direction:column;gap:8px;font-family:Jost,sans-serif;font-size:12px;color:#6B5C4E} .qv-meta-row{display:flex;flex-wrap:wrap;gap:6px;align-items:center} .qv-meta-row span:first-child{font-weight:600;color:#0F2E3E;text-transform:uppercase;letter-spacing:.06em;font-size:11px} .qv-perks{gap:16px} .qv-perk{display:inline-flex;align-items:center;gap:6px;color:#1A2E1A;font-size:11.5px} .qv-perk svg{color:#C9973A} @media (max-width:768px){ .qv-modal{padding:0} .qv-dialog{max-height:100vh;height:100vh;border-radius:0;max-width:none} .qv-grid{grid-template-columns:1fr;min-height:auto} .qv-gallery{padding:20px} .qv-info{padding:24px 22px 40px} .qv-title{font-size:24px} .qv-price{font-size:22px} .qv-close{top:12px;right:12px} .br-qv-btn span{display:none} .br-qv-btn{padding:10px;bottom:auto;top:10px;left:auto;right:54px;transform:none;opacity:1} li.product:hover .br-qv-btn{transform:none} } /* ════════════════════════════════════════════════════════════ FIX — My Account LOGIN page (when user is logged out) ════════════════════════════════════════════════════════════ */ /* Lift page-content max-width on login screen */ body.woocommerce-account:not(.logged-in) .page-content, body.woocommerce-account.woocommerce-page .page-content{ max-width:none !important; width:100% !important; padding:0 !important; } body.woocommerce-account .page-content-wrapper{ background:#FBFAF7 !important; padding:50px 16px 70px !important; } /* Layout wrapper — center login card */ body.woocommerce-account .woocommerce{ max-width:1080px; margin:0 auto; width:100%; } body.woocommerce-account .u-columns{ display:grid !important; grid-template-columns:1fr 1fr !important; gap:28px !important; max-width:none !important; margin:0 !important; align-items:start !important; } /* When only 1 column (registration disabled) → center single card */ body.woocommerce-account .u-columns:has(> :only-child), body.woocommerce-account .u-columns:not(:has(.u-column2)){ grid-template-columns:1fr !important; max-width:520px !important; margin:0 auto !important; } /* Cancel the small form.login card on this page; we use u-column wrapper instead */ body.woocommerce-account form.woocommerce-form-login, body.woocommerce-account form.login, body.woocommerce-account form.woocommerce-form-register, body.woocommerce-account form.register{ background:transparent !important; border:none !important; border-radius:0 !important; padding:0 !important; margin:0 !important; box-shadow:none !important; } /* The card itself */ body.woocommerce-account .u-column1, body.woocommerce-account .u-column2{ background:#fff !important; border:1px solid #E2DDD6 !important; border-radius:14px !important; padding:40px 38px !important; box-shadow:0 8px 32px rgba(15,46,62,.06) !important; width:auto !important; float:none !important; margin:0 !important; } body.woocommerce-account .u-column1::before, body.woocommerce-account .u-column2::before{ content:"" !important; display:block !important; width:44px !important; height:3px !important; background:#C9973A !important; margin:0 0 18px !important; border-radius:2px !important; } /* No fallback case: if WC outputs login form WITHOUT u-columns wrapper, give the form itself the card look */ body.woocommerce-account .woocommerce > form.woocommerce-form-login, body.woocommerce-account .woocommerce > form.login{ background:#fff !important; border:1px solid #E2DDD6 !important; border-radius:14px !important; padding:40px 38px !important; box-shadow:0 8px 32px rgba(15,46,62,.06) !important; max-width:480px !important; margin:0 auto !important; position:relative; } body.woocommerce-account .woocommerce > form.woocommerce-form-login::before, body.woocommerce-account .woocommerce > form.login::before{ content:""; display:block; width:44px; height:3px; background:#C9973A; margin:0 0 18px; border-radius:2px; } /* Login title + subtitle */ body.woocommerce-account .u-column1 h2, body.woocommerce-account .u-column2 h2{ font-family:"Cormorant Garamond",serif !important; font-size:32px !important; color:#0F2E3E !important; font-weight:600 !important; margin:0 0 6px !important; letter-spacing:-.3px !important; line-height:1.2 !important; } /* Form rows — labels inline width, inputs full width */ body.woocommerce-account .woocommerce-form-row{ margin-bottom:18px !important; display:flex !important; flex-direction:column !important; width:100% !important; } body.woocommerce-account .woocommerce-form-row label{ font-family:"Jost",sans-serif !important; font-size:11px !important; color:#6B5C4E !important; letter-spacing:.12em !important; text-transform:uppercase !important; margin-bottom:8px !important; font-weight:600 !important; white-space:normal !important; display:block !important; width:auto !important; line-height:1.4 !important; } body.woocommerce-account .woocommerce-form-row input.input-text{ height:48px !important; padding:0 16px !important; border:1.5px solid #E2DDD6 !important; border-radius:8px !important; font-family:"Lora",serif !important; font-size:14px !important; color:#2C2C2A !important; background:#FBFAF7 !important; outline:none !important; transition:all .2s !important; width:100% !important; box-sizing:border-box !important; display:block !important; } body.woocommerce-account .woocommerce-form-row input.input-text:focus{ border-color:#C9973A !important; background:#fff !important; box-shadow:0 0 0 3px rgba(201,151,58,.12) !important; } /* Password-reveal eye icon — positioned INSIDE input, on the right */ body.woocommerce-account .woocommerce-form-row .password-input, body.woocommerce-account span.password-input{ position:relative !important; display:block !important; width:100% !important; } body.woocommerce-account .woocommerce-form-row .password-input input.input-text, body.woocommerce-account span.password-input input.input-text{ padding-right:48px !important; width:100% !important; } body.woocommerce-account .show-password-input{ position:absolute !important; right:14px !important; top:50% !important; left:auto !important; bottom:auto !important; transform:translateY(-50%) !important; cursor:pointer !important; color:#6B5C4E !important; width:24px !important; height:24px !important; display:flex !important; align-items:center !important; justify-content:center !important; background:transparent !important; border:none !important; padding:0 !important; margin:0 !important; font-size:14px !important; z-index:2; transition:color .2s; } body.woocommerce-account .show-password-input:hover{ color:#C9973A !important; } body.woocommerce-account .show-password-input::before{ font-family:inherit !important; } /* WC uses .dashicons-visibility class - ensure proper icon sizing */ body.woocommerce-account .show-password-input.display-password{ color:#C9973A !important; } /* Remember + Lost row */ body.woocommerce-account .woocommerce-LostPassword, body.woocommerce-account .lost_password{ margin-top:10px !important; } body.woocommerce-account .woocommerce-LostPassword a, body.woocommerce-account .lost_password a{ font-family:"Jost",sans-serif !important; font-size:12px !important; color:#C9973A !important; text-decoration:none !important; font-weight:600 !important; letter-spacing:.04em !important; } body.woocommerce-account .woocommerce-LostPassword a:hover{ text-decoration:underline !important; } /* Submit button */ body.woocommerce-account .woocommerce-form-login button[type="submit"], body.woocommerce-account .woocommerce-form-register button[type="submit"], body.woocommerce-account form.login button[type="submit"]{ display:flex !important; align-items:center !important; justify-content:center !important; width:100% !important; height:52px !important; background:#0F2E3E !important; color:#fff !important; font-family:"Jost",sans-serif !important; font-size:13px !important; font-weight:700 !important; letter-spacing:.14em !important; text-transform:uppercase !important; border:none !important; border-radius:30px !important; cursor:pointer !important; transition:all .25s !important; margin-top:18px !important; box-shadow:0 6px 20px rgba(15,46,62,.18) !important; } body.woocommerce-account .woocommerce-form-login button[type="submit"]:hover, body.woocommerce-account form.login button[type="submit"]:hover{ background:#C9973A !important; box-shadow:0 8px 24px rgba(201,151,58,.3) !important; transform:translateY(-2px) !important; } body.woocommerce-account .woocommerce-form-register button[type="submit"]{ background:#C9973A !important; } body.woocommerce-account .woocommerce-form-register button[type="submit"]:hover{ background:#0F2E3E !important; } /* Remember-me row */ body.woocommerce-account .woocommerce-form-login__rememberme{ display:inline-flex !important; align-items:center !important; gap:8px !important; font-family:"Jost",sans-serif !important; font-size:12px !important; color:#6B5C4E !important; cursor:pointer !important; letter-spacing:.04em !important; text-transform:uppercase !important; font-weight:600 !important; margin-top:4px; } body.woocommerce-account .woocommerce-form-login__submit + .woocommerce-LostPassword{ margin-top:14px !important; } @media (max-width:768px){ body.woocommerce-account .u-columns{ grid-template-columns:1fr !important; } body.woocommerce-account .u-column1, body.woocommerce-account .u-column2, body.woocommerce-account .woocommerce > form.login{ padding:28px 22px !important; } } /* ════════════════════════════════════════════════════════════ NUCLEAR FIX — Login + Register cards alignment Kills vendor float/width leaks, forces grid placement ════════════════════════════════════════════════════════════ */ body.woocommerce-account .woocommerce{ width:100% !important; max-width:1080px !important; margin:0 auto !important; padding:0 16px !important; float:none !important; } body.woocommerce-account .u-columns, body.woocommerce-account .col2-set, body.woocommerce-account #customer_login{ display:grid !important; grid-template-columns:1fr 1fr !important; gap:28px !important; width:100% !important; max-width:none !important; margin:0 !important; align-items:start !important; float:none !important; } body.woocommerce-account .u-columns::before, body.woocommerce-account .u-columns::after, body.woocommerce-account .col2-set::before, body.woocommerce-account .col2-set::after, body.woocommerce-account #customer_login::before, body.woocommerce-account #customer_login::after{ content:none !important; display:none !important; clear:none !important; } body.woocommerce-account .u-column1, body.woocommerce-account .u-column2, body.woocommerce-account .col-1, body.woocommerce-account .col-2{ float:none !important; clear:none !important; width:auto !important; max-width:none !important; min-width:0 !important; margin:0 !important; } body.woocommerce-account .u-column1, body.woocommerce-account .col-1{ grid-column:1 / 2 !important; grid-row:1 !important; } body.woocommerce-account .u-column2, body.woocommerce-account .col-2{ grid-column:2 / 3 !important; grid-row:1 !important; } /* Cards: white box wrapper */ body.woocommerce-account .u-column1, body.woocommerce-account .u-column2{ background:#fff !important; border:1px solid #E2DDD6 !important; border-radius:14px !important; padding:38px 36px !important; box-shadow:0 8px 32px rgba(15,46,62,.06) !important; display:block !important; height:auto !important; position:relative !important; } /* Make sure forms inside don't shrink */ body.woocommerce-account .u-column1 form, body.woocommerce-account .u-column2 form, body.woocommerce-account form.login, body.woocommerce-account form.register, body.woocommerce-account form.woocommerce-form-login, body.woocommerce-account form.woocommerce-form-register{ display:block !important; width:100% !important; max-width:none !important; margin:0 !important; background:transparent !important; border:none !important; padding:0 !important; box-shadow:none !important; float:none !important; } /* Stack on mobile */ @media (max-width:900px){ body.woocommerce-account .u-columns, body.woocommerce-account .col2-set, body.woocommerce-account #customer_login{ grid-template-columns:1fr !important; } body.woocommerce-account .u-column1, body.woocommerce-account .col-1, body.woocommerce-account .u-column2, body.woocommerce-account .col-2{ grid-column:1 / -1 !important; grid-row:auto !important; } } /* ════════════════════════════════════════════════════════════ HELP PAGES — Shipping, Returns, FAQ, Contact, Track Order ════════════════════════════════════════════════════════════ */ .page-content .hp-h1, .hp-h1{font-family:"Cormorant Garamond",serif;font-size:42px;color:#0F2E3E;font-weight:600;line-height:1.15;margin:0 0 14px;letter-spacing:-.5px} .page-content .hp-lead, .hp-lead{font-family:"Lora",serif;font-style:italic;font-size:17px;color:#3D2E1F;line-height:1.7;margin:0 0 32px;padding-bottom:24px;border-bottom:1px solid #E8E1D2;max-width:760px} .page-content h2, .hp-h2{font-family:"Cormorant Garamond",serif !important;font-size:26px !important;color:#0F2E3E !important;font-weight:600;margin:32px 0 14px !important;padding-bottom:0 !important;border:none !important;position:relative;padding-left:14px} .page-content h2::before, .hp-h2::before{content:"";position:absolute;left:0;top:8px;bottom:6px;width:4px;background:#C9973A;border-radius:3px} .page-content h3{font-family:"Cormorant Garamond",serif;font-size:20px;color:#0F2E3E;font-weight:600;margin:24px 0 10px} /* Tables */ .page-content .hp-table, .hp-table{width:100%;border-collapse:separate;border-spacing:0;background:#FBFAF7;border:1px solid #E8E1D2;border-radius:10px;overflow:hidden;margin:14px 0 22px;font-family:"Jost",sans-serif;font-size:14px} .hp-table th{background:#0F2E3E;color:#C9973A;text-align:left;padding:12px 18px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;font-size:12px;border:none} .hp-table td{padding:12px 18px;border-top:1px solid #EEE7DC;color:#3D2E1F;background:#fff} .hp-table tr:first-child td{border-top:none} .hp-table tr:nth-child(even) td{background:#FBFAF7} /* CTA buttons */ .hp-cta{margin:30px 0 0;display:flex;gap:12px;flex-wrap:wrap} .hp-btn{display:inline-flex;align-items:center;gap:8px;padding:14px 28px;background:#0F2E3E;color:#fff !important;font-family:"Jost",sans-serif;font-size:13px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;border-radius:30px;text-decoration:none !important;transition:all .25s;border:1.5px solid #0F2E3E;box-shadow:0 6px 18px rgba(15,46,62,.18)} .hp-btn:hover{background:#0A1F2A;border-color:#0A1F2A;transform:translateY(-2px);box-shadow:0 10px 24px rgba(201,151,58,.25)} .hp-btn-outline{background:transparent;color:#0F2E3E !important;border-color:#0F2E3E;box-shadow:none} .hp-btn-outline:hover{background:#0F2E3E;color:#fff !important} .hp-note{font-family:"Lora",serif;font-style:italic;font-size:13px;color:#6B5C4E;margin:20px 0;padding:12px 18px;background:#F7F5F0;border-left:3px solid #C9973A;border-radius:0 6px 6px 0} /* === FAQ accordion === */ .hp-faq{display:flex;flex-direction:column;gap:12px;margin:20px 0 30px} .hp-faq-item{background:#fff;border:1px solid #E8E1D2;border-radius:12px;overflow:hidden;transition:all .25s;box-shadow:0 2px 8px rgba(15,46,62,.04)} .hp-faq-item[open]{border-color:#C9973A;box-shadow:0 8px 28px rgba(201,151,58,.12)} .hp-faq-item summary{cursor:pointer;padding:18px 24px;font-family:"Cormorant Garamond",serif;font-size:18px;color:#0F2E3E;font-weight:600;list-style:none;display:flex;align-items:center;gap:14px;position:relative;padding-right:50px;transition:color .2s} .hp-faq-item summary::-webkit-details-marker{display:none} .hp-faq-item summary::after{content:"+";position:absolute;right:24px;top:50%;transform:translateY(-50%);font-size:24px;font-weight:300;color:#C9973A;transition:transform .3s ease;font-family:"Jost",sans-serif} .hp-faq-item[open] summary::after{transform:translateY(-50%) rotate(45deg)} .hp-faq-item summary:hover{color:#C9973A} .hp-q-num{display:inline-block;padding:4px 10px;background:#C9973A;color:#fff;font-family:"Jost",sans-serif;font-size:11px;font-weight:700;letter-spacing:.08em;border-radius:4px;flex-shrink:0} .hp-faq-body{padding:0 24px 22px;font-family:"Lora",serif;font-size:15px;color:#3D2E1F;line-height:1.75;border-top:1px solid #F0EBE2;margin-top:6px;padding-top:18px} .hp-faq-body p{margin:0 0 10px} .hp-faq-body ul,.hp-faq-body ol{margin:8px 0 12px 20px} .hp-faq-body li{margin-bottom:4px} /* === Contact page grid === */ .hp-contact-grid{display:grid;grid-template-columns:1.4fr 1fr;gap:36px;margin:24px 0;align-items:start} .hp-contact-form-wrap{background:#fff;border:1px solid #E8E1D2;border-radius:14px;padding:34px 32px;box-shadow:0 8px 32px rgba(15,46,62,.05)} .hp-contact-form-wrap h2{margin-top:0 !important} .hp-contact-form{display:flex;flex-direction:column;gap:16px} .hp-row{display:grid;grid-template-columns:1fr 1fr;gap:14px} .hp-field{display:flex;flex-direction:column;gap:6px} .hp-field label{font-family:"Jost",sans-serif;font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:#6B5C4E;font-weight:600} .hp-field label span{color:#C0392B} .hp-field input,.hp-field select,.hp-field textarea{font-family:"Lora",serif;font-size:14px;color:#2C2C2A;padding:12px 14px;background:#FBFAF7;border:1.5px solid #E2DDD6;border-radius:8px;outline:none;transition:all .2s;width:100%;box-sizing:border-box} .hp-field input:focus,.hp-field select:focus,.hp-field textarea:focus{border-color:#C9973A;background:#fff;box-shadow:0 0 0 3px rgba(201,151,58,.12)} .hp-field textarea{resize:vertical;min-height:120px;font-family:"Lora",serif} .hp-btn-submit{margin-top:8px;display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:0 28px;height:52px;background:#C9973A;color:#fff;font-family:"Jost",sans-serif;font-size:13px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;border:none;border-radius:30px;cursor:pointer;transition:all .25s;box-shadow:0 6px 18px rgba(201,151,58,.25);width:fit-content;align-self:flex-start} .hp-btn-submit:hover{background:#0F2E3E;transform:translateY(-2px);box-shadow:0 8px 22px rgba(15,46,62,.25)} .hp-form-msg{margin-top:10px;font-family:"Jost",sans-serif;font-size:13px;padding:0;display:none} .hp-form-msg.sending,.hp-form-msg.success,.hp-form-msg.error{display:block;padding:12px 16px;border-radius:8px} .hp-form-msg.sending{background:#FBFAF7;color:#6B5C4E;border:1px solid #E8E1D2} .hp-form-msg.success{background:#E8F5E9;color:#1B5E20;border:1px solid #A5D6A7} .hp-form-msg.error{background:#FFEBEE;color:#B71C1C;border:1px solid #EF9A9A} .hp-contact-aside{display:flex;flex-direction:column;gap:14px} .hp-contact-aside h2{margin-top:0 !important} .hp-contact-card{display:flex;gap:14px;align-items:flex-start;background:#fff;border:1px solid #E8E1D2;border-radius:12px;padding:18px 20px;transition:all .25s} .hp-contact-card:hover{border-color:#C9973A;transform:translateX(4px);box-shadow:0 6px 18px rgba(201,151,58,.1)} .hp-contact-icon{flex-shrink:0;width:42px;height:42px;display:flex;align-items:center;justify-content:center;background:linear-gradient(135deg,#FAF7F0,#F2EDE0);border-radius:10px;font-size:20px;color:#C9973A} .hp-contact-card h3{margin:0 0 4px !important;font-size:16px !important} .hp-contact-card p{margin:0;font-family:"Lora",serif;font-size:14px;color:#3D2E1F;line-height:1.5} .hp-contact-card p a{color:#C9973A;text-decoration:none} .hp-contact-card p a:hover{text-decoration:underline} .hp-contact-card small{display:block;margin-top:4px;font-family:"Jost",sans-serif;font-size:11px;color:#6B5C4E;letter-spacing:.04em} /* === Track Order === */ .hp-track-wrap{display:grid;grid-template-columns:1.2fr 1fr;gap:32px;margin:24px 0;align-items:start} .hp-track-form-card{background:#fff;border:1px solid #E8E1D2;border-radius:14px;padding:30px 28px;box-shadow:0 8px 32px rgba(15,46,62,.05)} .hp-track-form-card h2{margin-top:0 !important} .hp-track-help{font-family:"Lora",serif;font-size:13px;color:#6B5C4E;font-style:italic;margin:0 0 18px} /* Style WC tracking form */ .hp-track-form-card form.track_order, .hp-track-form-card form.woocommerce-order-tracking{display:flex;flex-direction:column;gap:14px;margin:0} .hp-track-form-card form.track_order p, .hp-track-form-card form.woocommerce-order-tracking p{display:flex;flex-direction:column;gap:6px;margin:0} .hp-track-form-card form.track_order p label, .hp-track-form-card form.woocommerce-order-tracking p label{font-family:"Jost",sans-serif;font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:#6B5C4E;font-weight:600} .hp-track-form-card form.track_order p input, .hp-track-form-card form.woocommerce-order-tracking p input{font-family:"Lora",serif;font-size:14px;color:#2C2C2A;padding:12px 14px;background:#FBFAF7;border:1.5px solid #E2DDD6;border-radius:8px;outline:none;transition:all .2s;width:100%;box-sizing:border-box} .hp-track-form-card form.track_order p input:focus, .hp-track-form-card form.woocommerce-order-tracking p input:focus{border-color:#C9973A;background:#fff;box-shadow:0 0 0 3px rgba(201,151,58,.12)} .hp-track-form-card form.track_order button, .hp-track-form-card form.woocommerce-order-tracking button{display:inline-flex;align-items:center;justify-content:center;height:52px;padding:0 32px;background:#0F2E3E !important;color:#fff !important;font-family:"Jost",sans-serif !important;font-size:13px !important;font-weight:700 !important;letter-spacing:.14em !important;text-transform:uppercase !important;border:none !important;border-radius:30px !important;cursor:pointer;transition:all .25s;box-shadow:0 6px 18px rgba(15,46,62,.2);width:fit-content;margin-top:8px} .hp-track-form-card form.track_order button:hover, .hp-track-form-card form.woocommerce-order-tracking button:hover{background:#0A1F2A !important;transform:translateY(-2px)} .hp-track-tips{margin-top:22px;padding:14px 18px;background:#F7F5F0;border-radius:10px;border-left:3px solid #C9973A} .hp-track-tips h3{margin:0 0 8px !important;font-size:14px !important;color:#0F2E3E !important;padding-left:0 !important} .hp-track-tips ul{margin:0;padding-left:18px;font-family:"Lora",serif;font-size:13px;color:#3D2E1F;line-height:1.7} .hp-track-tips code{background:#fff;padding:2px 6px;border-radius:4px;font-family:"Jost",sans-serif;font-size:12px;color:#C9973A;border:1px solid #E8E1D2} .hp-track-status-grid{display:flex;flex-direction:column;gap:12px} .hp-track-status-grid h2{margin-top:0 !important} .hp-status-card{display:flex;gap:14px;align-items:flex-start;background:#fff;border:1px solid #E8E1D2;border-radius:10px;padding:14px 16px;transition:all .2s} .hp-status-card:hover{border-color:#C9973A;box-shadow:0 4px 14px rgba(15,46,62,.06)} .hp-status-dot{flex-shrink:0;width:14px;height:14px;border-radius:50%;margin-top:6px;position:relative} .hp-status-dot::after{content:"";position:absolute;inset:-4px;border-radius:50%;border:2px solid currentColor;opacity:.25} .hp-status-dot.s-pending{background:#F39C12;color:#F39C12} .hp-status-dot.s-processing{background:#3498DB;color:#3498DB} .hp-status-dot.s-shipped{background:#9B59B6;color:#9B59B6} .hp-status-dot.s-completed{background:#27AE60;color:#27AE60} .hp-status-card h3{margin:0 0 4px !important;font-size:15px !important;padding-left:0 !important} .hp-status-card h3::before{display:none !important} .hp-status-card p{margin:0;font-family:"Lora",serif;font-size:13px;color:#6B5C4E;line-height:1.5} .hp-track-help-section{margin-top:40px;padding:30px 28px;background:linear-gradient(135deg,#FAF7F0,#F2EDE0);border-radius:14px;text-align:center} .hp-track-help-section h2{margin-top:0 !important;padding-left:0 !important} .hp-track-help-section h2::before{display:none !important} .hp-track-help-section p{font-family:"Lora",serif;font-size:15px;color:#3D2E1F;margin:0 0 18px} .hp-track-help-section .hp-cta{justify-content:center;margin:0} @media (max-width:900px){ .page-content .hp-h1,.hp-h1{font-size:32px} .page-content .hp-lead,.hp-lead{font-size:15px} .hp-contact-grid,.hp-track-wrap{grid-template-columns:1fr;gap:24px} .hp-row{grid-template-columns:1fr} .hp-contact-form-wrap,.hp-track-form-card{padding:24px 20px} .hp-faq-item summary{font-size:16px;padding:14px 18px;padding-right:46px} .hp-faq-body{padding:14px 18px 18px} .hp-table{font-size:13px} .hp-table th,.hp-table td{padding:10px 12px} .hp-cta{flex-direction:column} .hp-btn{justify-content:center} } /* ════════════════════════════════════════════════════════════ BLOG — Listing (home.php, archive.php) + Single post (single.php) ════════════════════════════════════════════════════════════ */ /* === Hero === */ .blog-hero,.post-hero{padding:24px 0 20px;background:linear-gradient(135deg,#FBFAF7 0%,#F7F1E6 60%,#FBFAF7 100%);border-bottom:1px solid #EEE7DC;position:relative;overflow:hidden} .blog-hero::before{content:"";position:absolute;top:-40px;right:-40px;width:200px;height:200px;border-radius:50%;background:radial-gradient(circle,rgba(201,151,58,.15) 0%,rgba(201,151,58,0) 70%);pointer-events:none} .blog-hero::after{content:"";position:absolute;bottom:-60px;left:-60px;width:240px;height:240px;border-radius:50%;background:radial-gradient(circle,rgba(15,46,62,.06) 0%,rgba(15,46,62,0) 70%);pointer-events:none} .blog-hero .container{position:relative;z-index:1} .blog-breadcrumb,.post-breadcrumb{display:flex;align-items:center;gap:8px;font-family:"Jost",sans-serif;font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:#6B5C4E;margin-bottom:14px;flex-wrap:wrap} .blog-breadcrumb a,.post-breadcrumb a{color:#6B5C4E;text-decoration:none;transition:color .2s} .blog-breadcrumb a:hover,.post-breadcrumb a:hover{color:#C9973A} .blog-breadcrumb svg,.post-breadcrumb svg{width:10px;height:10px;stroke:currentColor;fill:none;stroke-width:2;opacity:.5} .blog-breadcrumb span,.post-breadcrumb span{color:#1A2E1A;font-weight:600} .blog-eyebrow{display:inline-block;padding:6px 14px;background:rgba(201,151,58,.12);color:#C9973A;font-family:"Jost",sans-serif;font-size:10px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;border-radius:20px;margin-bottom:14px} .blog-hero-title{font-family:"Cormorant Garamond",serif;font-size:42px;color:#0F2E3E;font-weight:500;line-height:1.1;margin:0 0 8px;letter-spacing:-.5px} .blog-hero-sub{font-family:"Lora",serif;font-style:italic;font-size:17px;color:#6B5C4E;max-width:680px;margin:0;line-height:1.6} /* === Featured post highlight === */ .blog-feature{padding:36px 0 20px;background:#fff} .blog-feature-card{display:grid;grid-template-columns:1.1fr 1fr;gap:36px;background:#FBFAF7;border:1px solid #EEE7DC;border-radius:16px;overflow:hidden;align-items:stretch;box-shadow:0 12px 40px rgba(15,46,62,.06)} .blog-feature-img{position:relative;display:block;overflow:hidden;min-height:340px;background:#F0EBE2} .blog-feature-img img{width:100%;height:100%;object-fit:cover;transition:transform .6s} .blog-feature-card:hover .blog-feature-img img{transform:scale(1.05)} .blog-feature-badge{position:absolute;top:18px;left:18px;background:#0F2E3E;color:#C9973A;font-family:"Jost",sans-serif;font-size:10px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;padding:6px 14px;border-radius:20px} .blog-feature-body{padding:36px 36px;display:flex;flex-direction:column;justify-content:center;gap:14px} .blog-feature-title{font-family:"Cormorant Garamond",serif;font-size:32px;color:#0F2E3E;font-weight:600;line-height:1.2;margin:0;letter-spacing:-.3px} .blog-feature-title a{color:inherit;text-decoration:none;transition:color .2s} .blog-feature-title a:hover{color:#C9973A} .blog-feature-excerpt{font-family:"Lora",serif;font-size:15px;color:#3D2E1F;line-height:1.7;margin:0} .blog-feature-cta{display:inline-flex;align-items:center;gap:8px;font-family:"Jost",sans-serif;font-size:12px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:#0F2E3E;text-decoration:none;padding:6px 0;border-bottom:1.5px solid #0F2E3E;width:fit-content;margin-top:6px;transition:all .2s} .blog-feature-cta:hover{color:#C9973A;border-color:#C9973A;gap:14px} /* === Toolbar === */ .blog-toolbar{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:18px;padding:28px 0 18px;border-bottom:1px solid #EEE7DC;margin-bottom:30px} .blog-toolbar-title{font-family:"Cormorant Garamond",serif;font-size:28px;color:#0F2E3E;font-weight:600;margin:0;padding-left:14px;position:relative} .blog-toolbar-title::before{content:"";position:absolute;left:0;top:6px;bottom:6px;width:4px;background:#C9973A;border-radius:3px} .blog-toolbar-filters{display:flex;gap:8px;flex-wrap:wrap} .blog-filter{font-family:"Jost",sans-serif;font-size:11px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:#6B5C4E;text-decoration:none;padding:8px 16px;border:1.5px solid #E2DDD6;border-radius:20px;background:#fff;transition:all .2s} .blog-filter:hover{border-color:#C9973A;color:#C9973A} .blog-filter.is-active{background:#0F2E3E;border-color:#0F2E3E;color:#fff} /* === Listing layout === */ .blog-wrap{padding:0 0 80px;background:#fff} .blog-layout{display:grid;grid-template-columns:1fr 320px;gap:48px;align-items:start} .blog-main{min-width:0} /* === Blog grid === */ .blog-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:28px} .blog-card{background:#fff;border:1px solid #EEE7DC;border-radius:14px;overflow:hidden;transition:all .3s;display:flex;flex-direction:column;height:100%} .blog-card:hover{transform:translateY(-4px);box-shadow:0 16px 40px rgba(15,46,62,.1);border-color:#C9973A} .blog-card-img{display:block;aspect-ratio:16/10;overflow:hidden;background:#F0EBE2;position:relative} .blog-card-img img{width:100%;height:100%;object-fit:cover;transition:transform .5s} .blog-card:hover .blog-card-img img{transform:scale(1.06)} .blog-card-ph,.post-side-recent-ph{width:100%;height:100%;background:linear-gradient(135deg,#F2EDE0,#E8E1D2)} .blog-card-body{padding:20px 20px 22px;display:flex;flex-direction:column;gap:10px;flex:1} .blog-card-cat{display:inline-flex;align-items:center;font-family:"Jost",sans-serif;font-size:10px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:#C9973A;text-decoration:none;padding:0;width:fit-content} .blog-card-cat:hover{color:#0F2E3E} .blog-card-title{font-family:"Cormorant Garamond",serif;font-size:22px;color:#0F2E3E;font-weight:600;line-height:1.25;margin:0} .blog-card-title a{color:inherit;text-decoration:none;transition:color .2s;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden} .blog-card-title a:hover{color:#C9973A} .blog-card-excerpt{font-family:"Lora",serif;font-size:14px;color:#6B5C4E;line-height:1.6;margin:0;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden} .blog-card-meta{display:flex;align-items:center;gap:6px;font-family:"Jost",sans-serif;font-size:11px;color:#6B5C4E;letter-spacing:.04em;margin-top:auto;padding-top:6px;flex-wrap:wrap} .blog-card-meta-author{display:inline-flex;align-items:center;gap:6px;font-weight:600;color:#0F2E3E} .blog-card-meta-author img{width:24px;height:24px;border-radius:50%} /* === Pagination === */ .blog-pagination{margin:40px 0 0;display:flex;justify-content:center} .blog-pagination ul.page-numbers{display:flex;gap:6px;list-style:none;margin:0;padding:0;flex-wrap:wrap} .blog-pagination .page-numbers{display:inline-flex;align-items:center;justify-content:center;min-width:42px;height:42px;padding:0 14px;background:#fff;border:1.5px solid #E2DDD6;border-radius:50%;font-family:"Jost",sans-serif;font-size:13px;font-weight:600;color:#0F2E3E;text-decoration:none;transition:all .2s} .blog-pagination .page-numbers:hover{border-color:#C9973A;color:#C9973A} .blog-pagination .page-numbers.current{background:#0F2E3E;border-color:#0F2E3E;color:#fff} .blog-pagination .page-numbers.dots{border:none} .blog-pagination .next,.blog-pagination .prev{border-radius:24px;padding:0 18px;width:auto} /* === Empty === */ .blog-empty{text-align:center;padding:60px 20px;background:#FBFAF7;border:1px dashed #DDD0BD;border-radius:14px} .blog-empty h2{font-family:"Cormorant Garamond",serif;font-size:28px;color:#0F2E3E;margin:0 0 10px} .blog-empty p{font-family:"Lora",serif;color:#6B5C4E;margin:0 0 20px} /* === Sidebar === */ .blog-sidebar,.post-sidebar{display:flex;flex-direction:column;gap:22px;position:sticky;top:24px} .blog-side-card,.post-side-card{background:#fff;border:1px solid #EEE7DC;border-radius:14px;padding:22px 22px;box-shadow:0 4px 16px rgba(15,46,62,.04)} .blog-side-newsletter,.post-side-newsletter{background:linear-gradient(135deg,#0F2E3E 0%,#1a3f52 100%);color:#fff;border:none} .blog-side-newsletter h3,.post-side-newsletter h3{color:#fff !important;margin:6px 0 6px !important;font-size:20px !important} .blog-side-newsletter p,.post-side-newsletter p{color:rgba(255,255,255,.75);font-size:13px;margin:0 0 14px;font-family:"Lora",serif;line-height:1.5} .post-side-tag{display:inline-block;padding:5px 11px;background:rgba(201,151,58,.18);color:#C9973A;font-family:"Jost",sans-serif;font-size:10px;font-weight:700;letter-spacing:.14em;border-radius:20px;text-transform:uppercase} .post-side-form{display:flex;gap:0;background:rgba(255,255,255,.08);border:1.5px solid rgba(255,255,255,.2);border-radius:30px;padding:3px;overflow:hidden} .post-side-form input{flex:1;background:transparent;border:none;color:#fff;font-family:"Lora",serif;font-size:13px;padding:8px 14px;outline:none;min-width:0} .post-side-form input::placeholder{color:rgba(255,255,255,.5)} .post-side-form button{background:#C9973A;color:#0F2E3E;font-family:"Jost",sans-serif;font-size:11px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;border:none;border-radius:30px;padding:0 16px;cursor:pointer;transition:all .25s} .post-side-form button:hover{background:#fff} .post-side-h{font-family:"Cormorant Garamond",serif !important;font-size:18px !important;color:#0F2E3E !important;margin:0 0 14px !important;padding-bottom:10px !important;border-bottom:1px solid #EEE7DC;font-weight:600} .post-side-cats{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:2px} .post-side-cats li a{display:flex;justify-content:space-between;align-items:center;padding:9px 0;font-family:"Jost",sans-serif;font-size:13px;color:#3D2E1F;text-decoration:none;border-bottom:1px solid #F4EFE6;transition:all .2s;font-weight:500} .post-side-cats li:last-child a{border-bottom:none} .post-side-cats li a:hover{color:#C9973A;padding-left:6px} .post-side-cats li a span{font-size:11px;color:#A89684;background:#F7F5F0;padding:2px 8px;border-radius:10px;font-weight:600} .post-side-cats li.is-active a{color:#C9973A;font-weight:700} .post-side-recent{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:14px} .post-side-recent li{display:flex;gap:12px;align-items:flex-start} .post-side-recent-img{flex-shrink:0;width:64px;height:64px;border-radius:8px;overflow:hidden;display:block;background:#F0EBE2} .post-side-recent-img img{width:100%;height:100%;object-fit:cover} .post-side-recent-title{font-family:"Cormorant Garamond",serif;font-size:15px;color:#0F2E3E;font-weight:600;line-height:1.3;text-decoration:none;display:block;margin-bottom:4px} .post-side-recent-title:hover{color:#C9973A} .post-side-recent-date{font-family:"Jost",sans-serif;font-size:11px;color:#A89684;letter-spacing:.04em} .blog-tags-cloud{display:flex;flex-wrap:wrap;gap:6px} .blog-tags-cloud a{font-family:"Jost",sans-serif;font-size:11px;color:#6B5C4E;background:#FBFAF7;border:1px solid #EEE7DC;padding:5px 11px;border-radius:14px;text-decoration:none;transition:all .2s;letter-spacing:.04em} .blog-tags-cloud a:hover{background:#C9973A;border-color:#C9973A;color:#1A2E1A} /* ═══ Single Post (single.php) ═══ */ .post-cat-badge{display:inline-block;padding:7px 16px;background:#C9973A;color:#fff;font-family:"Jost",sans-serif;font-size:10px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;text-decoration:none;border-radius:20px;margin-bottom:18px;transition:all .2s} .post-cat-badge:hover{background:#0F2E3E} .post-title{font-family:"Cormorant Garamond",serif;font-size:48px;color:#0F2E3E;font-weight:500;line-height:1.1;margin:0 0 16px;letter-spacing:-.6px;max-width:880px} .post-excerpt{font-family:"Lora",serif;font-style:italic;font-size:18px;color:#3D2E1F;line-height:1.6;margin:0 0 24px;max-width:780px} .post-meta{display:flex;align-items:center;justify-content:space-between;gap:20px;padding-top:20px;border-top:1px solid #EEE7DC;flex-wrap:wrap} .post-meta-author{display:flex;align-items:center;gap:12px} .post-meta-author img{border-radius:50%;border:2px solid #fff;box-shadow:0 2px 8px rgba(15,46,62,.1)} .post-meta-author-name{display:block;font-family:"Cormorant Garamond",serif;font-size:18px;color:#0F2E3E;font-weight:600;line-height:1.2} .post-meta-author-role{display:block;font-family:"Jost",sans-serif;font-size:11px;color:#6B5C4E;letter-spacing:.06em;text-transform:uppercase;margin-top:2px} .post-meta-info{display:flex;gap:18px;flex-wrap:wrap} .post-meta-item{display:inline-flex;align-items:center;gap:6px;font-family:"Jost",sans-serif;font-size:12px;color:#6B5C4E;letter-spacing:.04em} .post-meta-item svg{width:14px;height:14px;color:#C9973A} .post-hero-img-wrap{background:#fff;padding:32px 0 0} .post-hero-img{aspect-ratio:21/9;overflow:hidden;border-radius:16px;background:#F0EBE2;box-shadow:0 16px 50px rgba(15,46,62,.12)} .post-hero-img img{width:100%;height:100%;object-fit:cover} .post-wrap{padding:50px 0 60px;background:#fff} .post-layout{display:grid;grid-template-columns:60px 1fr 320px;gap:36px;align-items:start} .post-share-rail{display:flex;flex-direction:column;align-items:center;gap:12px;position:sticky;top:24px} .post-share-label{font-family:"Jost",sans-serif;font-size:10px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:#6B5C4E;writing-mode:vertical-rl;transform:rotate(180deg);margin-bottom:8px} .post-share-rail a,.post-share-rail button{width:42px;height:42px;display:flex;align-items:center;justify-content:center;background:#fff;border:1.5px solid #E2DDD6;border-radius:50%;color:#6B5C4E;text-decoration:none;cursor:pointer;transition:all .25s;padding:0} .post-share-rail a:hover,.post-share-rail button:hover{border-color:#C9973A;color:#C9973A;transform:translateY(-2px) scale(1.05)} .post-share-rail svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:2} .post-share-copy.is-copied{background:#1B5E20;border-color:#1B5E20;color:#fff} .post-article{min-width:0} .post-content{font-family:"Lora",serif;font-size:17px;line-height:1.85;color:#2C2C2A;max-width:none} .post-content > *:first-child{margin-top:0} .post-content p{margin:0 0 22px} .post-content p.lead,.post-content .lead{font-size:20px;color:#0F2E3E;font-style:italic;line-height:1.5;margin-bottom:30px;padding-bottom:24px;border-bottom:1px solid #EEE7DC} .post-content h2{font-family:"Cormorant Garamond",serif;font-size:30px;color:#0F2E3E;font-weight:600;margin:42px 0 16px;padding-left:14px;position:relative;line-height:1.25} .post-content h2::before{content:"";position:absolute;left:0;top:8px;bottom:6px;width:4px;background:#C9973A;border-radius:3px} .post-content h3{font-family:"Cormorant Garamond",serif;font-size:22px;color:#0F2E3E;font-weight:600;margin:32px 0 12px} .post-content blockquote{margin:30px 0;padding:24px 28px;background:linear-gradient(135deg,#FAF7F0,#F2EDE0);border-left:4px solid #C9973A;border-radius:0 12px 12px 0;font-family:"Cormorant Garamond",serif;font-size:22px;font-style:italic;color:#0F2E3E;line-height:1.5;font-weight:500;position:relative} .post-content blockquote::before{content:"\201C";position:absolute;top:-10px;right:18px;font-size:72px;color:#C9973A;opacity:.35;font-family:Georgia,serif;line-height:1} .post-content blockquote p:last-child{margin:0} .post-content ul,.post-content ol{margin:0 0 22px;padding-left:24px} .post-content li{margin-bottom:10px} .post-content img{max-width:100%;height:auto;border-radius:12px;margin:20px 0} .post-content a{color:#C9973A;text-decoration:none;border-bottom:1px solid #C9973A;transition:all .2s} .post-content a:hover{color:#0F2E3E;border-color:#0F2E3E} .post-content a.hp-btn{border-bottom:none} .post-content code{background:#F7F5F0;padding:2px 8px;border-radius:4px;font-size:14px;color:#C9973A} .post-tags{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin:36px 0 24px;padding:18px 0;border-top:1px solid #EEE7DC;border-bottom:1px solid #EEE7DC} .post-tags-label{font-family:"Jost",sans-serif;font-size:11px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:#6B5C4E} .post-tags a{font-family:"Jost",sans-serif;font-size:12px;color:#0F2E3E;background:#FBFAF7;border:1px solid #EEE7DC;padding:5px 12px;border-radius:14px;text-decoration:none;transition:all .2s} .post-tags a:hover{background:#C9973A;border-color:#C9973A;color:#1A2E1A} .post-author-card{display:flex;gap:20px;align-items:flex-start;background:linear-gradient(135deg,#FAF7F0,#F2EDE0);border:1px solid rgba(201,151,58,.2);border-radius:14px;padding:26px 28px;margin:36px 0} .post-author-card img{flex-shrink:0;border-radius:50%;border:3px solid #fff;box-shadow:0 4px 12px rgba(15,46,62,.1)} .post-author-info{flex:1} .post-author-eyebrow{font-family:"Jost",sans-serif;font-size:10px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:#C9973A} .post-author-name{font-family:"Cormorant Garamond",serif;font-size:22px;color:#0F2E3E;font-weight:600;margin:4px 0 8px} .post-author-bio{font-family:"Lora",serif;font-size:14px;color:#3D2E1F;line-height:1.6;margin:0 0 10px} .post-author-link{display:inline-block;font-family:"Jost",sans-serif;font-size:11px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:#0F2E3E;text-decoration:none;padding-bottom:2px;border-bottom:1.5px solid #0F2E3E;transition:all .2s} .post-author-link:hover{color:#C9973A;border-color:#C9973A} .post-comments-wrap{margin-top:40px;padding-top:30px;border-top:1px solid #EEE7DC} /* === Comment Form === */ .post-comments-wrap .comments-area{max-width:100%} .post-comments-wrap .comments-title{font-family:"Cormorant Garamond",serif;font-size:26px;color:#0F2E3E;font-weight:500;margin:0 0 24px;letter-spacing:-.3px} .post-comments-wrap #respond{background:#FBFAF7;border:1px solid #EEE7DC;border-radius:14px;padding:32px;margin-top:24px} .post-comments-wrap #respond .comment-reply-title{font-family:"Cormorant Garamond",serif;font-size:26px;color:#0F2E3E;font-weight:500;margin:0 0 6px;letter-spacing:-.3px} .post-comments-wrap #respond .logged-in-as{font-family:"Jost",sans-serif;font-size:13px;color:#6B5C4E;margin:0 0 20px} .post-comments-wrap #respond .logged-in-as a{color:#0F2E3E;text-decoration:none;font-weight:500;transition:color .2s} .post-comments-wrap #respond .logged-in-as a:hover{color:#C9973A} .post-comments-wrap .comment-form label{display:block;font-family:"Jost",sans-serif;font-size:12px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:#0F2E3E;margin-bottom:6px} .post-comments-wrap .comment-form .required{color:#C9973A} .post-comments-wrap .comment-form input[type="text"], .post-comments-wrap .comment-form input[type="email"], .post-comments-wrap .comment-form input[type="url"], .post-comments-wrap .comment-form textarea{width:100%;padding:14px 18px;border:1px solid #E2DDD6;border-radius:10px;background:#fff;font-family:"Lora",serif;font-size:14px;color:#2C2C2A;line-height:1.6;transition:border-color .2s,box-shadow .2s;outline:none;box-sizing:border-box;resize:vertical} .post-comments-wrap .comment-form input[type="text"]:focus, .post-comments-wrap .comment-form input[type="email"]:focus, .post-comments-wrap .comment-form input[type="url"]:focus, .post-comments-wrap .comment-form textarea:focus{border-color:#C9973A;box-shadow:0 0 0 3px rgba(201,151,58,.12)} .post-comments-wrap .comment-form textarea{min-height:160px} .post-comments-wrap .comment-form p{margin:0 0 18px} .post-comments-wrap .comment-form .comment-form-cookies-consent{display:flex;align-items:center;gap:8px;font-family:"Jost",sans-serif;font-size:13px;color:#6B5C4E} .post-comments-wrap .comment-form .comment-form-cookies-consent input[type="checkbox"]{width:16px;height:16px;accent-color:#C9973A} .post-comments-wrap .comment-form .form-submit{margin:24px 0 0} .post-comments-wrap .comment-form .submit{display:inline-flex;align-items:center;justify-content:center;padding:14px 36px;background:#0F2E3E;color:#fff;border:none;border-radius:50px;font-family:"Jost",sans-serif;font-size:13px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;cursor:pointer;transition:all .3s} .post-comments-wrap .comment-form .submit:hover{background:#0A1F2A;box-shadow:0 8px 24px rgba(201,151,58,.3)} /* Comment list */ .post-comments-wrap .comment-list{list-style:none;padding:0;margin:0 0 30px} .post-comments-wrap .comment-list .comment{padding:20px;background:#FBFAF7;border:1px solid #EEE7DC;border-radius:12px;margin-bottom:16px} .post-comments-wrap .comment-list .comment-author{display:flex;align-items:center;gap:10px;margin-bottom:8px} .post-comments-wrap .comment-list .comment-author img{border-radius:50%;border:2px solid #EEE7DC} .post-comments-wrap .comment-list .comment-author .fn{font-family:"Jost",sans-serif;font-size:14px;font-weight:600;color:#0F2E3E} .post-comments-wrap .comment-list .comment-metadata{font-family:"Jost",sans-serif;font-size:11px;color:#888;margin-bottom:10px} .post-comments-wrap .comment-list .comment-metadata a{color:#888;text-decoration:none} .post-comments-wrap .comment-list .comment-metadata a:hover{color:#C9973A} .post-comments-wrap .comment-list .comment-content{font-family:"Lora",serif;font-size:14px;line-height:1.65;color:#2C2C2A} .post-comments-wrap .comment-list .reply a{font-family:"Jost",sans-serif;font-size:11px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:#0F2E3E;text-decoration:none;transition:color .2s} .post-comments-wrap .comment-list .reply a:hover{color:#C9973A} /* === Related posts === */ .post-related{padding:60px 0;background:#FBFAF7;border-top:1px solid #EEE7DC} .post-related-head{text-align:center;margin-bottom:36px} .post-related-eyebrow{font-family:"Jost",sans-serif;font-size:11px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:#C9973A} .post-related-title{font-family:"Cormorant Garamond",serif;font-size:34px;color:#0F2E3E;font-weight:500;margin:8px 0 0;letter-spacing:-.3px} .post-related-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:26px} .post-card{background:#fff;border:1px solid #EEE7DC;border-radius:14px;overflow:hidden;transition:all .3s;display:flex;flex-direction:column} .post-card:hover{transform:translateY(-4px);box-shadow:0 16px 40px rgba(15,46,62,.1);border-color:#C9973A} .post-card-img{display:block;aspect-ratio:16/10;overflow:hidden;position:relative;background:#F0EBE2} .post-card-img img{width:100%;height:100%;object-fit:cover;transition:transform .5s} .post-card:hover .post-card-img img{transform:scale(1.05)} .post-card-ph{width:100%;height:100%;background:linear-gradient(135deg,#F2EDE0,#E8E1D2)} .post-card-cat{position:absolute;top:14px;left:14px;background:rgba(15,46,62,.92);backdrop-filter:blur(4px);color:#C9973A;font-family:"Jost",sans-serif;font-size:10px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;padding:5px 12px;border-radius:20px} .post-card-body{padding:18px 20px 22px;display:flex;flex-direction:column;gap:8px} .post-card-title{font-family:"Cormorant Garamond",serif;font-size:20px;color:#0F2E3E;font-weight:600;line-height:1.25;text-decoration:none;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden} .post-card-title:hover{color:#C9973A} .post-card-meta{display:flex;gap:6px;font-family:"Jost",sans-serif;font-size:11px;color:#6B5C4E;letter-spacing:.04em;margin-top:4px} /* === Mobile === */ @media (max-width:1024px){ .blog-layout,.post-layout{grid-template-columns:1fr;gap:36px} .blog-sidebar,.post-sidebar,.post-share-rail{position:static} .post-share-rail{flex-direction:row;justify-content:center;margin-bottom:20px} .post-share-label{writing-mode:initial;transform:none;margin:0 8px 0 0} .blog-feature-card{grid-template-columns:1fr} .blog-feature-img{min-height:280px} .post-related-grid{grid-template-columns:repeat(2,1fr)} } @media (max-width:768px){ .blog-hero,.post-hero{padding:24px 0 20px} .blog-hero-title,.post-title{font-size:30px} .blog-hero-sub{font-size:15px} .blog-feature-body{padding:24px 22px} .blog-feature-title{font-size:24px} .blog-grid{grid-template-columns:1fr;gap:20px} .blog-toolbar{flex-direction:column;align-items:flex-start} .post-content{font-size:16px} .post-content p.lead,.post-content .lead{font-size:18px} .post-content h2{font-size:24px} .post-content blockquote{font-size:18px;padding:18px 20px} .post-author-card{flex-direction:column;padding:22px 20px;text-align:center} .post-meta{flex-direction:column;align-items:flex-start} .post-related-grid{grid-template-columns:1fr} .post-related-title{font-size:26px} } /* ═══ LOOP CARD: kill the dead space under the Add-to-cart button ═══ content-product.php nests the card body inside .product-card-inner, so the card's own flex column stopped at that wrapper and the thumb+info stack never filled the stretched grid row. style.min.css also puts margin:15px -15px 40px on .product-buttons (sized for the single-product layout), adding ~40px more. Together that left a large gap below the button. */ ul.products .product > .product-card-inner, .shop-products .product > .product-card-inner{ display:flex; flex-direction:column; flex:1 1 auto; min-height:0; width:100% } ul.products .product .product-info, .shop-products .product .product-info{ display:flex; flex-direction:column; flex:1 1 auto } /* margin-top:auto pins the button row to the bottom of every card, so cards in a row line their buttons up regardless of how many lines the title wraps to. */ ul.products .product .product-buttons, .shop-products .product .product-buttons{ margin:auto 0 0!important; padding:0!important; width:100% } /* ═══ LIVE SEARCH SUGGESTIONS (assets/js/search-suggest.js) ═══ */ .br-suggest{ position:absolute;top:calc(100% + 8px);left:0;right:0;z-index:1200; background:#fff;border:1px solid var(--clr-border);border-radius:14px; box-shadow:0 18px 44px -12px rgba(26,46,26,.28),0 2px 8px rgba(26,46,26,.06); overflow:hidden;max-height:min(70vh,460px);overflow-y:auto; font-family:var(--font-ui); animation:brSuggestIn .16s ease-out } @keyframes brSuggestIn{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}} @media(prefers-reduced-motion:reduce){.br-suggest{animation:none}} .br-suggest-item{ display:flex;align-items:center;gap:12px;padding:10px 14px; border-bottom:1px solid #F2EEE7;text-decoration:none;color:var(--clr-text); transition:background .15s } .br-suggest-item:last-of-type{border-bottom:none} .br-suggest-item:hover, .br-suggest-item.is-active{background:var(--clr-bg)} .br-suggest-item img, .br-suggest-noimg{ width:46px;height:46px;flex-shrink:0;border-radius:8px; object-fit:cover;background:var(--clr-bg-alt);border:1px solid var(--clr-border) } .br-suggest-text{display:flex;flex-direction:column;gap:2px;min-width:0} .br-suggest-title{ font-size:13.5px;font-weight:500;color:var(--clr-dark);line-height:1.35; display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden } /* The matched substring, so it's obvious why a result came back. */ .br-suggest-title mark{background:rgba(201,151,58,.22);color:inherit;padding:0 1px;border-radius:2px} .br-suggest-price{font-size:12.5px;font-weight:600;color:var(--clr-accent)} .br-suggest-all{ display:block;padding:12px 14px;text-align:center;text-decoration:none; background:var(--clr-bg);color:var(--clr-dark); font-size:12px;font-weight:600;letter-spacing:.08em;text-transform:uppercase; border-top:1px solid var(--clr-border);transition:background .15s,color .15s } .br-suggest-all:hover{background:var(--clr-dark);color:#fff} .br-suggest-loading, .br-suggest-empty{ padding:18px 16px;text-align:center;font-size:13px;color:var(--clr-muted) } /* The bottom-nav overlay field already sits high in the stack. */ .br-mob-search-box .br-suggest{top:calc(100% + 10px)} .br-suggest-price s{color:var(--clr-muted);font-weight:400;margin-left:4px;opacity:.8} /* ═══ SIDE CART DRAWER (assets/js/side-cart.js) ═══ */ .br-cart-backdrop{ position:fixed;inset:0;z-index:10040;background:rgba(15,32,20,.42); backdrop-filter:blur(2px);-webkit-backdrop-filter:blur(2px); opacity:0;transition:opacity .28s ease } .br-cart-backdrop.is-open{opacity:1} .br-cart-drawer{ position:fixed;top:0;right:0;bottom:0;z-index:10050; width:min(410px,100vw);display:flex;flex-direction:column; background:#fff;font-family:var(--font-ui); box-shadow:-18px 0 48px -16px rgba(26,46,26,.35); transform:translateX(100%);transition:transform .28s cubic-bezier(.4,0,.2,1) } .br-cart-drawer.is-open{transform:none} .br-cart-drawer.is-busy{pointer-events:none;opacity:.6} @media(prefers-reduced-motion:reduce){ .br-cart-drawer,.br-cart-backdrop{transition:none} } /* Stop the page behind the drawer scrolling. */ body.br-cart-lock{overflow:hidden} .br-cart-head{ display:flex;align-items:center;justify-content:space-between;gap:12px; padding:18px 20px;border-bottom:1px solid var(--clr-border);flex-shrink:0 } .br-cart-head h2{ font-family:var(--font-display);font-size:22px;font-weight:600; color:var(--clr-dark);margin:0;display:flex;align-items:center;gap:9px } .br-cart-head-count{ font-family:var(--font-ui);font-size:11px;font-weight:700;color:#fff; background:var(--clr-accent);border-radius:999px;min-width:20px;height:20px; display:inline-flex;align-items:center;justify-content:center;padding:0 6px } .br-cart-close{ width:34px;height:34px;flex-shrink:0;border:none;border-radius:50%; background:var(--clr-bg);color:var(--clr-dark);font-size:22px;line-height:1; cursor:pointer;transition:background .2s } .br-cart-close:hover{background:var(--clr-bg-alt)} .br-cart-body{flex:1 1 auto;overflow-y:auto;padding:6px 0} .br-cart-items{list-style:none;margin:0;padding:0} .br-cart-item{ display:flex;align-items:flex-start;gap:12px;padding:14px 20px; border-bottom:1px solid #F2EEE7;position:relative } .br-cart-item:last-child{border-bottom:none} .br-cart-thumb{flex-shrink:0;width:64px;height:64px;display:block} .br-cart-thumb img{ width:64px;height:64px;object-fit:cover;border-radius:8px; border:1px solid var(--clr-border);background:var(--clr-bg) } .br-cart-info{flex:1 1 auto;min-width:0;display:flex;flex-direction:column;gap:6px} .br-cart-name{ font-size:13.5px;font-weight:500;color:var(--clr-dark);line-height:1.35; text-decoration:none;display:-webkit-box;-webkit-line-clamp:2; -webkit-box-orient:vertical;overflow:hidden } .br-cart-name:hover{color:var(--clr-accent)} .br-cart-meta{font-size:11.5px;color:var(--clr-muted)} .br-cart-row{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:2px} .br-cart-qty{ display:inline-flex;align-items:center;border:1px solid var(--clr-border); border-radius:999px;overflow:hidden;background:var(--clr-bg) } .br-cart-qty button{ width:26px;height:26px;border:none;background:transparent;cursor:pointer; font-size:15px;line-height:1;color:var(--clr-dark);transition:background .15s } .br-cart-qty button:hover{background:var(--clr-bg-alt)} .br-cart-num{ min-width:26px;text-align:center;font-size:12.5px;font-weight:600;color:var(--clr-dark) } .br-cart-line{font-size:13.5px;font-weight:600;color:var(--clr-dark);white-space:nowrap} .br-cart-remove{ position:absolute;top:12px;right:14px;width:22px;height:22px;border:none; border-radius:50%;background:transparent;color:var(--clr-muted); font-size:17px;line-height:1;cursor:pointer;transition:background .15s,color .15s } .br-cart-remove:hover{background:#FBE9E7;color:var(--clr-sale)} .br-cart-empty{ display:flex;flex-direction:column;align-items:center;justify-content:center; padding:64px 28px;text-align:center;min-height:100% } .br-cart-empty-icon{ width:78px;height:78px;flex-shrink:0;margin-bottom:20px;border-radius:50%; background:var(--clr-bg);display:flex;align-items:center;justify-content:center } .br-cart-empty-icon svg{ width:32px;height:32px;stroke:var(--clr-accent);fill:none; stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round } .br-cart-empty-title{ font-family:var(--font-display);font-size:21px;font-weight:600; color:var(--clr-dark);margin:0 0 7px;line-height:1.25 } .br-cart-empty-sub{ font-size:13px;color:var(--clr-muted);line-height:1.6; margin:0 0 26px;max-width:250px } .br-cart-empty .br-cart-btn{padding:0 34px} .br-cart-foot{ flex-shrink:0;border-top:1px solid var(--clr-border); padding:16px 20px calc(16px + env(safe-area-inset-bottom));background:#fff } .br-cart-foot.is-empty{display:none} .br-cart-subtotal{ display:flex;align-items:baseline;justify-content:space-between; font-size:14px;color:var(--clr-text) } .br-cart-subtotal strong{font-size:19px;color:var(--clr-dark)} .br-cart-note{font-size:11.5px;color:var(--clr-muted);margin:4px 0 14px} .br-cart-actions{display:grid;grid-template-columns:1fr 1fr;gap:10px} .br-cart-btn{ display:flex;align-items:center;justify-content:center;height:46px; padding:0 26px;border-radius:999px;text-decoration:none; font-size:12px;font-weight:600;letter-spacing:.1em;text-transform:uppercase; white-space:nowrap;transition:background .2s,color .2s,border-color .2s } .br-cart-btn-ghost{ border:1px solid var(--clr-dark);color:var(--clr-dark);background:transparent } .br-cart-btn-ghost:hover{background:var(--clr-dark);color:#fff} .br-cart-btn-solid{background:var(--clr-dark);color:#fff;border:1px solid var(--clr-dark)} .br-cart-btn-solid:hover{background:#0F1F0F;border-color:#0F1F0F} /* The mobile bottom nav sits at z-index 9999; keep the drawer above it. */ @media(max-width:768px){ .br-cart-drawer{width:100vw} }