/* Theme Name: Only Love Florist Theme URI: https://onlyloveflorist.com Description: Custom theme for Only Love Florist — Malaysia's trusted online florist Version: 1.2.9 Author: Only Love Florist Text Domain: onlylove */ /* ── CSS variables are injected by functions.php wp_head ── */ /* ── Defaults here are fallbacks only ─────────────────── */ :root { --primary: #E8899A; --primary-dark: #d4607a; --primary-light: #f8d7e3; --secondary: #d4607a; --pink: #E8899A; --blush: #fff0f5; --blush-deep: #fce4ec; --cream: #fdf8f5; --color-bg: #FFFFFF; --color-surface: #fff0f5; --color-heading: #2c2c2c; --color-body: #6b6b6b; --dark: #2c2c2c; --mid: #6b6b6b; --border: #f5d6e0; --light-bg: #fff0f5; --promo-bg: #E8899A; --announce-color: #E8899A; --btn-text: #FFFFFF; --nav-scroll-bg: rgba(255,255,255,.96); --font-heading: 'Playfair Display', Georgia, serif; --font-body: 'Poppins', Arial, sans-serif; --h1-size: 56px; --h2-size: 38px; --h3-size: 22px; --heading-weight: 600; --heading-spacing:0em; --heading-lh: 1.2; --body-size: 15px; --body-lh: 1.7; --body-weight: 400; --nav-size: .78rem; --nav-spacing: .06em; --btn-radius: 100px; --btn-pv: 12px; --btn-ph: 28px; --btn-size: .84rem; --btn-ls: .04em; --btn-bw: 1.5px; --btn-fw: 500; --card-radius: 12px; --card-shadow: 0 4px 24px rgba(232,137,154,0.12); --input-radius: 6px; --section-pad: 110px; --hero-overlay: rgba(0,0,0,0.35); --video-overlay: rgba(0,0,0,0.4); --header-blur: blur(12px); --nav-color: #2c2c2c; --nav-hover: #E8899A; } /* ── RESET ── */ *,*::before,*::after{box-sizing:border-box;margin:0;padding:0} html{font-size:16px;scroll-behavior:smooth} body{font-family:var(--font-body);font-size:var(--body-size);font-weight:var(--body-weight);line-height:var(--body-lh);color:var(--color-body);background:var(--color-bg);-webkit-font-smoothing:antialiased} img{max-width:100%;height:auto;display:block} a{color:inherit;text-decoration:none;transition:color .2s} ul{list-style:none} /* ── TYPOGRAPHY ── */ h1,h2,h3,h4,h5{font-family:var(--font-heading);font-weight:var(--heading-weight);line-height:var(--heading-lh);letter-spacing:var(--heading-spacing);color:var(--color-heading)} h1{font-size:clamp(2rem,4vw,3.2rem)} h2{font-size:clamp(1.5rem,3vw,2.2rem)} h3{font-size:clamp(1.1rem,2vw,1.4rem)} p{color:var(--color-body);font-family:var(--font-body);line-height:1.7} a{text-decoration:none} /* ── UTILITY ── */ .container{max-width:1200px;margin:0 auto;padding:0 32px} .section{padding:var(--section-pad) 0} .section.alt{background:var(--blush)} .section-label{display:block;font-family:var(--font-body);font-size:.7rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--primary);margin-bottom:10px} .section-title{text-align:center;margin-bottom:40px} .section-title h2{font-family:var(--font-heading);font-size:clamp(1.6rem,3vw,2.2rem);color:var(--dark);margin-bottom:8px} .section-title p{font-size:.88rem;color:var(--mid)} /* ── BUTTONS ── */ .btn{ display:inline-block; padding:var(--btn-pv) var(--btn-ph); font-family:var(--font-body); font-size:var(--btn-size); font-weight:var(--btn-fw); letter-spacing:var(--btn-ls); cursor:pointer; border-radius:var(--btn-radius); border:var(--btn-bw) solid transparent; transition:all .22s ease; line-height:1; text-decoration:none; } .btn-pink{background:var(--primary);color:#fff;box-shadow:0 4px 16px rgba(232,137,154,.32)} .btn-pink:hover{background:var(--primary-dark);transform:translateY(-2px);box-shadow:0 6px 20px rgba(232,137,154,.44);color:#fff} .btn-dark{background:var(--dark);color:#fff} .btn-dark:hover{background:#111;transform:translateY(-2px);color:#fff} .btn-outline{background:transparent;color:#fff;border:2px solid rgba(255,255,255,.7)} .btn-outline:hover{background:rgba(255,255,255,.15);border-color:#fff;transform:translateY(-2px);color:#fff} .btn-outline-white{background:rgba(255,255,255,.15);color:#fff;border:2px solid rgba(255,255,255,.6);backdrop-filter:blur(4px)} .btn-outline-white:hover{background:#fff;color:var(--primary);transform:translateY(-2px)} /* ── ANNOUNCEMENT BAR ── */ .announcement-bar{ background:var(--primary); color:#fff; font-family:var(--font-body); font-size:.76rem; font-weight:500; letter-spacing:.06em; padding:9px 16px; text-align:center; } /* ── HEADER ── */ .site-header{ background:#fff; box-shadow:0 2px 12px rgba(0,0,0,.06); position:sticky; top:0; z-index:1000; transition:background .35s ease, box-shadow .35s ease; } /* On homepage — hero pulls up behind the sticky transparent header */ .home .hero{ margin-top:-68px; padding-top:68px; } .site-header.transparent{ background:transparent; box-shadow:none; } /* White text when header is transparent over dark hero */ .site-header.transparent .main-nav a { color:#fff; } .site-header.transparent .main-nav a:hover { color:rgba(255,255,255,.75); } .site-header.transparent .main-nav a::after { background:#fff; } .site-header.transparent .site-logo { color:#fff; } .site-header.transparent .site-logo span { color:#fff; } .site-header.transparent .header-icons a { color:#fff; } .site-header.transparent .menu-toggle span { background:#fff; } /* Keep dropdown text dark (white bg) */ .site-header.transparent .main-nav ul ul a { color:var(--dark); } .site-header.transparent .main-nav ul ul a:hover { color:var(--primary); } .header-inner{ display:flex; align-items:center; justify-content:space-between; padding:0 32px; min-height:68px; } .site-logo{ font-family:var(--font-heading); font-size:1.6rem; font-weight:700; color:var(--dark); letter-spacing:-.01em; text-decoration:none; } .site-logo span{color:var(--primary)} .custom-logo{max-height:34px;width:auto;display:block} .custom-logo-link{display:flex;align-items:center} /* ── NAVIGATION + DROPDOWNS ── */ /* Nav fills full header height so dropdowns (position:relative) drop at the header's bottom edge — no gap */ .main-nav{display:flex;align-items:stretch;align-self:stretch} .main-nav>ul{display:flex;gap:28px;list-style:none;margin:0;padding:0;align-items:stretch;height:100%} .main-nav ul li{position:relative;list-style:none} /* All top-level nav items full height + content vertically centred (so Grab & Go aligns with mega items) */ .main-nav>ul>li{display:flex;align-items:center} .main-nav a{ font-family:var(--font-body); font-size:var(--nav-size); font-weight:var(--btn-fw); letter-spacing:var(--nav-spacing); text-transform:uppercase; color:var(--nav-color); position:relative; padding-bottom:4px; text-decoration:none; transition:color .2s; } .main-nav a:hover{color:var(--primary)} .main-nav a::after{content:'';position:absolute;bottom:0;left:0;width:0;height:1.5px;background:var(--primary);transition:width .25s} .main-nav a:hover::after{width:100%} /* Dropdown */ .main-nav ul ul{ display:none; position:absolute; top:calc(100% + 12px); left:0; flex-direction:column; gap:0; background:#fff; min-width:210px; max-height:65vh; overflow-y:auto; box-shadow:0 12px 40px rgba(0,0,0,.13); border-radius:12px; padding:8px 0; z-index:9999; border-top:2px solid var(--primary); list-style:none; } .main-nav ul li:hover>ul{display:flex} .main-nav ul ul li{display:block;width:100%} .main-nav ul ul a{ display:block; padding:9px 18px; font-size:.79rem; white-space:nowrap; color:var(--dark); text-transform:none; font-weight:400; letter-spacing:0; transition:all .18s ease; } .main-nav ul ul a::after{display:none !important} .main-nav ul ul a:hover{color:var(--primary);background:var(--blush);padding-left:24px} .main-nav ul li.menu-item-has-children>a::after{ content:' ▾'; font-size:.6rem; vertical-align:middle; width:auto;height:auto; background:none; position:static; transition:none; } /* Header icons */ .header-icons{display:flex;align-items:center;gap:20px} .header-icons a{color:var(--nav-color);position:relative;display:flex;align-items:center;transition:color .2s} .header-icons a:hover{color:var(--primary)} .cart-count{ position:absolute;top:-8px;right:-8px; background:var(--primary);color:#fff; font-size:.6rem;font-weight:700; width:16px;height:16px;border-radius:50%; display:flex;align-items:center;justify-content:center; font-family:var(--font-body); } /* ── MOBILE NAV ── */ .menu-toggle{display:none;flex-direction:column;gap:5px;cursor:pointer;padding:4px} .menu-toggle span{display:block;width:24px;height:2px;background:var(--dark);border-radius:2px;transition:all .25s} /* While the mobile menu is open, push any floating WhatsApp/chat widget below the menu so it never covers the Cart button */ body.olv-menu-open .joinchat, body.olv-menu-open .ht-ctc, body.olv-menu-open .ht-ctc-chat, body.olv-menu-open #ht-ctc-chat, body.olv-menu-open .wd-floating-button, body.olv-menu-open .chaty-widget, body.olv-menu-open .chaty-channel, body.olv-menu-open #whatsapp-chat-widget, body.olv-menu-open .wpcc-container, body.olv-menu-open .b24-widget-button-wrapper, body.olv-menu-open [class*="whatsapp-float"], body.olv-menu-open [id*="whatsapp-float"]{display:none !important;visibility:hidden !important;opacity:0 !important;pointer-events:none !important} /* Fixed, viewport-sized clipping portal — keeps the off-screen menu panel from widening the document on iOS (children are ABSOLUTE so it can clip them) */ .olv-menu-portal{position:fixed;inset:0;overflow:hidden;pointer-events:none;z-index:2147483641;transform:translateZ(0)} .mobile-overlay{display:none;position:fixed;inset:0;background:rgba(0,0,0,.5);z-index:1;opacity:0;transition:opacity .3s} .mobile-overlay.active{display:block;opacity:1;pointer-events:auto} /* Hidden via transform:translateX(115%) — scales with the panel width so it's ALWAYS fully off-screen (the old fixed right:-320px let ~20px peek once the panel was widened to 340px, which showed as a white strip on every page). */ .mobile-nav{position:fixed;top:0;right:0;width:min(85vw,340px);height:100%;background:#fff;z-index:2;padding:28px 24px;overflow-y:auto;transform:translateX(115%);transition:transform .32s ease;box-shadow:-8px 0 40px rgba(0,0,0,.15);pointer-events:auto} .mobile-nav.active{transform:translateX(0)} .mobile-nav-close{position:absolute;top:16px;right:16px;background:none;border:none;font-size:1.2rem;cursor:pointer;color:var(--mid);padding:4px 8px} .mobile-logo{font-family:var(--font-heading);font-size:1.4rem;font-weight:700;color:var(--dark);margin-bottom:28px;padding-top:8px} .mobile-logo span{color:var(--primary)} .mobile-logo-img{max-height:34px;width:auto;height:auto;display:block} /* Mobile menu CTA buttons (Cart / My Account) — clean premium style */ .mobile-nav ul li.mobile-cta-li{border-bottom:none !important} .mobile-nav ul li.mobile-cta-li:first-of-type{margin-top:18px} .mobile-nav ul li.mobile-cta-li > a.olv-mobile-btn{ display:flex !important;align-items:center;justify-content:center;gap:9px; padding:13px 18px !important;margin:0 0 10px !important;border:none;border-radius:12px; background:var(--primary);color:#fff !important;font-family:var(--font-body);font-size:.9rem;font-weight:600;letter-spacing:.01em; text-decoration:none !important;box-shadow:0 8px 20px rgba(205,88,116,.22);transition:background .2s,transform .15s,box-shadow .2s; } .mobile-nav ul li.mobile-cta-li > a.olv-mobile-btn:hover{background:var(--primary-dark);color:#fff !important;transform:translateY(-1px);box-shadow:0 10px 26px rgba(205,88,116,.3)} .mobile-nav ul li.mobile-cta-li > a.olv-mobile-btn svg{flex:0 0 18px;width:18px;height:18px} /* Outline variant for My Account */ .mobile-nav ul li.mobile-cta-li > a.olv-mobile-btn-outline{ background:#fff;color:#1d1d1f !important;border:1.5px solid #e6e1e3;box-shadow:0 2px 10px rgba(0,0,0,.05); } .mobile-nav ul li.mobile-cta-li > a.olv-mobile-btn-outline:hover{background:#faf7f8;color:#1d1d1f !important;border-color:#bdb6b9;box-shadow:0 4px 14px rgba(0,0,0,.08);transform:translateY(-1px)} .mobile-nav ul li.mobile-cta-li > a.olv-mobile-btn-outline svg{stroke:var(--primary)} .mobile-nav ul{list-style:none;padding:0;margin:0} .mobile-nav ul li a{display:block;padding:12px 0;border-bottom:1px solid var(--border);font-family:var(--font-body);font-size:.88rem;font-weight:500;color:var(--dark);text-decoration:none;transition:color .18s} .mobile-nav ul li a:hover{color:var(--primary)} /* ── Mobile menu accordion (mirrors desktop mega structure) ── */ .mobile-nav .mobile-has-sub{border-bottom:1px solid var(--border)} .mobile-nav .mobile-parent{display:flex;align-items:center;justify-content:space-between} .mobile-nav .mobile-parent > a{flex:1;border-bottom:none !important;padding:12px 0} .mobile-nav .mobile-sub-toggle{flex:0 0 auto;background:none;border:none;padding:10px;margin:0;cursor:pointer;color:var(--mid);display:flex;align-items:center;justify-content:center;transition:transform .25s ease,color .18s} .mobile-nav .mobile-sub-toggle:hover{color:var(--primary)} .mobile-nav .mobile-has-sub.is-open .mobile-sub-toggle{transform:rotate(180deg);color:var(--primary)} .mobile-nav .mobile-submenu{display:none;padding:4px 0 12px 12px;border-left:2px solid #f5d6e0;margin:0 0 8px 2px} .mobile-nav .mobile-has-sub.is-open .mobile-submenu{display:block;animation:olvSubFade .22s ease} @keyframes olvSubFade{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:none}} .mobile-nav .mobile-sub-head{display:block;font-family:Arial,sans-serif;font-size:10px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:#E8899A;margin:14px 0 6px;padding:0} .mobile-nav .mobile-sub-head:first-child{margin-top:6px} .mobile-nav .mobile-sub-link{display:block;padding:8px 0 !important;border-bottom:none !important;font-size:.84rem !important;font-weight:400 !important;color:#444 !important} .mobile-nav .mobile-sub-link:hover{color:var(--primary) !important} /* ── SEARCH MODAL ── */ /* ── SEARCH MODAL — Apple-style elegant drop-down panel ── */ body.search-open{overflow:hidden} .search-modal{display:none;position:fixed;inset:0;z-index:3000;align-items:center;justify-content:center} .search-modal.open{display:flex} .search-modal-backdrop{position:absolute;inset:0;background:rgba(28,18,24,.45);backdrop-filter:blur(8px) saturate(120%);-webkit-backdrop-filter:blur(8px) saturate(120%);animation:searchFade .25s ease} .search-modal-card{position:relative;z-index:1;width:92%;max-width:680px;background:rgba(255,255,255,.96);border:1px solid rgba(0,0,0,.05);border-radius:22px;box-shadow:0 30px 90px rgba(0,0,0,.28);padding:0;overflow:hidden;animation:searchPop .3s cubic-bezier(.2,.7,.2,1)} @keyframes searchFade{from{opacity:0}to{opacity:1}} @keyframes searchPop{from{opacity:0;transform:translateY(-22px)}to{opacity:1;transform:none}} /* Search field row */ .search-modal-form{display:flex;align-items:center;gap:16px;padding:22px 26px;margin:0;border-bottom:1px solid rgba(0,0,0,.06)} .search-modal-icon{flex-shrink:0;color:var(--primary);width:24px;height:24px} .search-modal input[type="search"]{flex:1;background:none;border:none;color:#1d1d1f;font-family:var(--font-body);font-size:1.5rem;font-weight:300;letter-spacing:-.01em;padding:4px 0;outline:none;-webkit-appearance:none;box-shadow:none} .search-modal input[type="search"]::placeholder{color:#b8b0b3;font-weight:300} .search-modal input[type="search"]::-webkit-search-cancel-button{-webkit-appearance:none} .search-close{flex-shrink:0;background:#f1eef0;border:none;color:#86808a;font-size:.95rem;width:36px;height:36px;border-radius:50%;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:background .18s,color .18s;padding:0;line-height:1} .search-close:hover{background:#e7e2e6;color:#1d1d1f} /* Pink "Search" submit button inside the search popup */ .search-submit{flex-shrink:0;background:var(--primary);color:#fff;border:none;border-radius:12px;height:46px;padding:0 24px;font-family:var(--font-body);font-weight:700;font-size:.95rem;letter-spacing:.01em;cursor:pointer;transition:background .18s,transform .05s} .search-submit:hover{background:#d9707f} .search-submit:active{transform:translateY(1px)} @media (max-width:520px){.search-submit{padding:0 16px;height:42px;font-size:.9rem}} /* Quick links */ .search-quick{padding:18px 26px 8px} .search-quick-label{display:block;font-family:var(--font-body);font-size:.72rem;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:#a59ba0;margin-bottom:6px} .search-quick-links{list-style:none;margin:0;padding:0} .search-quick-links li{margin:0} .search-quick-links a{display:flex;align-items:center;justify-content:space-between;padding:11px 12px;margin:0 -12px;border-radius:12px;text-decoration:none;color:#2c2026;font-family:var(--font-body);font-size:1rem;font-weight:400;transition:background .16s,color .16s} .search-quick-links a:hover{background:rgba(232,137,154,.1);color:var(--primary-dark)} .search-quick-links a svg{width:16px;height:16px;color:#c9bcc1;flex-shrink:0;transition:transform .16s,color .16s} .search-quick-links a:hover svg{color:var(--primary);transform:translateX(3px)} /* Hint footer */ .search-modal-hint{margin:0;padding:14px 26px 18px;color:#b0a8ac;font-size:.78rem;font-family:var(--font-body);border-top:1px solid rgba(0,0,0,.05)} .search-modal-hint kbd{background:#f1eef0;border-radius:5px;padding:2px 7px;font-size:.72rem;color:#86808a;font-family:var(--font-body);box-shadow:none} /* Login / Register modal card (reuses .search-modal shell) */ .olv-account-modal .search-modal-card{max-width:460px} .olv-login-card{padding:34px 40px 32px !important;position:relative} .olv-login-card .search-close{position:absolute;top:16px;right:16px;background:rgba(0,0,0,.05);border:none;width:32px;height:32px;border-radius:50%;cursor:pointer;color:#86808a;font-size:.9rem;line-height:1;transition:background .18s;z-index:2} .olv-login-card .search-close:hover{background:rgba(0,0,0,.1);color:#1d1d1f} .olv-login-tabs{display:flex;gap:6px;background:#f1eef0;border-radius:50px;padding:5px;margin:0 0 24px} .olv-login-tab{flex:1;border:none;background:transparent;border-radius:50px;padding:11px;font-size:.92rem;font-weight:600;font-family:var(--font-body);color:#86808a;cursor:pointer;transition:all .2s} .olv-login-tab.is-active{background:#fff;color:var(--primary);box-shadow:0 2px 8px rgba(0,0,0,.08)} .olv-login-title{font-family:var(--font-heading);font-size:1.6rem;color:#1d1d1f;margin:0 0 4px;text-align:center} .olv-login-sub{color:#9a949f;font-size:.88rem;text-align:center;margin:0 0 22px;font-family:var(--font-body)} .olv-login-form{display:flex;flex-direction:column;gap:12px} .olv-login-form input[type="text"],.olv-login-form input[type="password"]{width:100%;box-sizing:border-box;border:1.5px solid #e3dde0;border-radius:12px;padding:13px 16px;font-size:.95rem;font-family:var(--font-body);color:#1d1d1f;outline:none;transition:border-color .18s} .olv-login-form input:focus{border-color:var(--primary)} .olv-login-remember{display:flex;align-items:center;gap:8px;font-size:.82rem;color:#86808a;font-family:var(--font-body)} .olv-login-btn{margin-top:4px;background:var(--primary);color:#fff;border:none;border-radius:50px;padding:14px;font-size:.95rem;font-weight:600;font-family:var(--font-body);cursor:pointer;transition:background .2s} .olv-login-btn:hover{background:var(--primary-dark)} .olv-login-links{display:flex;justify-content:space-between;margin-top:16px;font-family:var(--font-body);font-size:.82rem} .olv-login-links-center{justify-content:center} .olv-login-links a{color:#86808a;text-decoration:none;transition:color .18s} .olv-login-links a:hover{color:var(--primary)} @media(max-width:600px){ .olv-login-card{padding:30px 22px 26px !important} .search-modal-card{width:94%;border-radius:18px} .search-modal-form{padding:18px 20px;gap:12px} .search-modal input[type="search"]{font-size:1.2rem} .search-quick{padding:14px 20px 6px} .search-quick-links a{font-size:.95rem} .search-modal-hint{padding:12px 20px 16px} } /* ── HERO ── */ .hero{position:relative;min-height:88vh;display:flex;align-items:center;overflow:hidden} .hero-slideshow,.hero-slide{position:absolute;inset:0} .hero-slide{background-size:cover;background-position:center;opacity:0;transition:opacity 1s ease} .hero-slide.active{opacity:1} .hero-overlay{position:absolute;inset:0;background:linear-gradient(to right,rgba(0,0,0,.55) 0%,rgba(0,0,0,.15) 60%,transparent 100%)} .hero-gradient-bg{position:absolute;inset:0;background:linear-gradient(135deg,var(--blush-deep) 0%,var(--primary-light) 100%)} .hero-video-bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover} .hero-video-overlay{position:absolute;inset:0;background:rgba(0,0,0,.35)} .hero-content{position:relative;z-index:2;padding:100px 64px;max-width:600px} .hero-tag{display:inline-block;background:rgba(255,255,255,.2);backdrop-filter:blur(6px);border:1px solid rgba(255,255,255,.4);color:#fff;padding:6px 16px;border-radius:100px;font-size:.76rem;font-weight:500;letter-spacing:.08em;margin-bottom:18px;font-family:var(--font-body)} .hero-content h1{font-family:var(--font-heading);font-size:clamp(2.2rem,5vw,3.8rem);color:#fff;text-shadow:0 2px 12px rgba(0,0,0,.2);margin-bottom:16px;line-height:1.2} .hero-content p{color:rgba(255,255,255,.88);font-size:clamp(.88rem,1.4vw,1rem);font-weight:300;margin-bottom:32px;line-height:1.7} .hero-btns{display:flex;gap:14px;flex-wrap:wrap} .hero-dots{position:absolute;bottom:28px;left:50%;transform:translateX(-50%);display:flex;gap:8px;z-index:3} .hero-dot{width:8px;height:8px;border-radius:50%;background:rgba(255,255,255,.45);border:none;cursor:pointer;transition:all .2s;padding:0} .hero-dot.active{background:#fff;width:24px;border-radius:4px} /* ── CIRCLE CATEGORIES ROW ── */ .circle-categories{background:var(--cream);padding:28px 0 24px;border-bottom:1px solid var(--border)} .circle-categories-track{display:flex;gap:6px;padding:4px 32px 8px;overflow-x:auto;scroll-behavior:smooth;-ms-overflow-style:none;scrollbar-width:none;justify-content:safe center} .circle-categories-track::-webkit-scrollbar{display:none} .circle-cat-item{display:flex;flex-direction:column;align-items:center;gap:9px;min-width:86px;text-align:center;text-decoration:none;color:var(--dark);transition:transform .22s ease;flex-shrink:0} .circle-cat-item:hover{transform:translateY(-4px);color:var(--primary)} .circle-cat-img{width:76px;height:76px;border-radius:50%;overflow:hidden;border:2.5px solid var(--border);background:var(--blush);display:flex;align-items:center;justify-content:center;transition:border-color .22s,box-shadow .22s} .circle-cat-item:hover .circle-cat-img{border-color:var(--primary);box-shadow:0 4px 16px rgba(232,137,154,.25)} .circle-cat-img img{width:100%;height:100%;object-fit:cover;transition:transform .3s ease} .circle-cat-item:hover .circle-cat-img img{transform:scale(1.08)} .circle-cat-placeholder{font-size:1.8rem} .circle-cat-item span{font-family:var(--font-body);font-size:.7rem;font-weight:500;line-height:1.3;max-width:82px;color:inherit} /* ── FEATURES STRIP ── */ .features-strip{background:var(--primary);padding:40px 0} .features-strip .container{max-width:1480px;margin:0 auto;padding:0 28px} .features-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:0} .feature-item{display:flex;align-items:center;justify-content:center;gap:16px;padding:10px 22px;border-right:1px solid rgba(255,255,255,.22)} .feature-item:last-child{border-right:none} .feature-icon{font-size:2.4rem;flex-shrink:0} .feature-item h4{font-family:var(--font-body);font-size:1.05rem;font-weight:600;color:#fff;margin:0 0 4px;letter-spacing:.02em} .feature-item p{font-size:.82rem;color:rgba(255,255,255,.85);margin:0;line-height:1.4} /* keep footer features left-aligned (only homepage strip is centered) */ .site-footer .feature-item{justify-content:flex-start} /* ── PROMOTION BLOCK (4×4 grid + premium countdown) ── */ .promo-block{background:linear-gradient(180deg,#fff7f9 0%,#ffffff 100%)} .promo-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:22px} .promo-card{background:#fff;border:1px solid var(--border);border-radius:var(--card-radius);overflow:hidden;position:relative;display:flex;flex-direction:column;transition:box-shadow .3s,transform .3s} .promo-card:hover{box-shadow:0 10px 32px rgba(232,137,154,.22);transform:translateY(-5px)} /* Premium countdown bar */ .promo-countdown{display:flex;justify-content:space-around;align-items:center;background:linear-gradient(135deg,#3a2a2f 0%,#5a3a44 100%);padding:11px 6px;gap:2px} .pc-unit{display:flex;flex-direction:column;align-items:center;flex:1;position:relative} .pc-unit:not(:last-child)::after{content:'';position:absolute;right:0;top:18%;height:64%;width:1px;background:rgba(255,255,255,.16)} .pc-num{font-family:var(--font-body);font-size:1.18rem;font-weight:700;color:#fff;line-height:1;letter-spacing:.01em;font-variant-numeric:tabular-nums} .pc-lbl{font-size:.56rem;text-transform:uppercase;letter-spacing:.09em;color:rgba(255,255,255,.62);margin-top:4px} .promo-card-img{display:block;aspect-ratio:3/4;overflow:hidden;background:var(--cream);position:relative} .promo-card-img img{width:100%;height:100%;object-fit:cover;transition:transform .35s ease} .promo-card:hover .promo-card-img img{transform:scale(1.05)} .promo-card-ph{width:100%;height:100%;display:flex;align-items:center;justify-content:center;font-size:3rem} .promo-badge{position:absolute;top:10px;left:10px;background:var(--primary);color:#fff;font-size:.7rem;font-weight:700;padding:4px 11px;border-radius:100px;box-shadow:0 2px 8px rgba(0,0,0,.15)} .promo-card-body{padding:14px 14px 18px;text-align:center;display:flex;flex-direction:column;flex:1} .promo-card-name{display:block;font-size:.86rem;color:var(--color-heading);text-decoration:none;margin-bottom:10px;line-height:1.4;font-weight:500;flex:1} .promo-card-name:hover{color:var(--primary)} .promo-price-now{color:var(--primary);font-weight:700;font-size:1.02rem} .promo-price-was{color:var(--mid);text-decoration:line-through;font-size:.8rem;margin-left:6px} .promo-ended .pc-num{color:rgba(255,255,255,.4)} @media(max-width:900px){.promo-grid{grid-template-columns:repeat(3,1fr)}} @media(max-width:600px){.promo-grid{grid-template-columns:repeat(2,1fr);gap:12px}.pc-num{font-size:1rem}.pc-lbl{font-size:.5rem}} /* ── CATEGORY CARDS ── */ .categories-section{background:var(--color-bg)} .category-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:20px} .category-card{position:relative;border-radius:20px;overflow:hidden;aspect-ratio:3/4;cursor:pointer;background:var(--cream)} .category-card-bg{width:100%;height:100%;object-fit:cover;transition:transform .4s ease;display:block} .category-card:hover .category-card-bg{transform:scale(1.06)} .category-card-overlay{position:absolute;inset:0;background:linear-gradient(to top,rgba(0,0,0,.6) 0%,rgba(0,0,0,.05) 55%,transparent 100%);display:flex;flex-direction:column;align-items:center;justify-content:flex-end;padding:24px;gap:12px} .category-card-overlay h3{color:#fff;font-family:var(--font-heading);font-size:1.1rem;font-weight:600;text-align:center;text-shadow:0 2px 8px rgba(0,0,0,.3);margin:0} .cat-placeholder{display:flex;align-items:center;justify-content:center;font-size:3rem;background:var(--blush-deep);width:100%;height:100%} /* ── PRODUCT CARDS ── */ .luvbloom-products{display:grid;grid-template-columns:repeat(4,1fr);gap:20px} /* Infinite scroll loader spinner */ .olv-infinite-loader{width:100%} .olv-spin{display:inline-block;width:32px;height:32px;border:3px solid #eee;border-top-color:var(--primary);border-radius:50%;animation:olvspin .8s linear infinite} @keyframes olvspin{to{transform:rotate(360deg)}} /* View More — clean Apple-style pill */ .olv-tab-more{text-align:center;margin-top:36px} .olv-tab-more-text{margin:16px 0 0;color:#a59ba0;font-family:var(--font-body);font-size:.85rem;letter-spacing:.01em} .olv-view-more{display:inline-flex;align-items:center;gap:8px;padding:12px 28px;border:1px solid #d8d3d5;border-radius:50px;background:#fff;color:#1d1d1f;font-family:var(--font-body);font-size:.92rem;font-weight:500;letter-spacing:.01em;text-decoration:none;transition:background .22s,color .22s,border-color .22s,box-shadow .22s} .olv-view-more svg{width:16px;height:16px;transition:transform .22s} .olv-view-more:hover{background:#1d1d1f;color:#fff;border-color:#1d1d1f;box-shadow:0 10px 26px rgba(0,0,0,.18)} .olv-view-more:hover svg{transform:translateX(4px)} /* 90% wide container for all homepage sections */ .section .container{max-width:90%;padding:0 20px} .product-card{background:#fff;border-radius:12px;overflow:hidden;border:1px solid var(--border);transition:transform .25s ease,box-shadow .25s ease,border-color .25s;position:relative} .product-card:hover{transform:translateY(-5px);box-shadow:0 8px 28px rgba(0,0,0,.1);border-color:var(--primary-light)} .product-card-img{aspect-ratio:3/4;overflow:hidden;background:var(--cream)} .product-card-img img{width:100%;height:100%;object-fit:cover;transition:transform .35s ease} .product-card:hover .product-card-img img{transform:scale(1.05)} .product-card-body{padding:13px 14px 14px} .product-card-body h3{font-family:var(--font-body);font-size:.8rem;font-weight:500;color:var(--dark);margin:0 0 7px;line-height:1.45;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden} .product-card-price{font-family:var(--font-body);font-size:.86rem;font-weight:600;color:var(--primary)} .product-card-badge{position:absolute;top:10px;left:10px;background:var(--primary);color:#fff;font-family:var(--font-body);font-size:.63rem;font-weight:600;letter-spacing:.06em;padding:3px 10px;border-radius:100px;text-transform:uppercase;z-index:1} /* Legacy luvbloom product card compat */ .luvbloom-product-card{background:var(--color-bg);border:1px solid var(--border);border-radius:var(--card-radius);overflow:hidden;transition:box-shadow .3s,transform .3s;position:relative} .luvbloom-product-card:hover{box-shadow:var(--card-shadow);transform:translateY(-4px)} .luvbloom-product-img{position:relative;aspect-ratio:3/4;overflow:hidden;background:var(--light-bg)} /* Countdown timer — clean Apple-style bar flush to the top edge */ .luvbloom-product-img .olv-card-timer{position:absolute;left:0;right:0;top:0;transform:none;display:flex;justify-content:center;align-items:center;gap:0;background:rgba(255,255,255,.85);border:none;border-radius:0;padding:5px 6px;backdrop-filter:blur(10px) saturate(120%);-webkit-backdrop-filter:blur(10px) saturate(120%);box-shadow:0 1px 6px rgba(0,0,0,.08);z-index:2} .luvbloom-product-img .olv-card-timer .pc-unit{display:flex;flex-direction:column;align-items:center;min-width:26px;padding:0 8px;position:relative} .luvbloom-product-img .olv-card-timer .pc-unit + .pc-unit::before{content:"";position:absolute;left:0;top:50%;transform:translateY(-50%);height:60%;width:1px;background:rgba(0,0,0,.1)} .luvbloom-product-img .olv-card-timer .pc-num{color:#1d1d1f;font-weight:600;font-size:.85rem;line-height:1.05;font-family:var(--font-body);letter-spacing:-.01em;font-variant-numeric:tabular-nums} .luvbloom-product-img .olv-card-timer .pc-lbl{color:#86868b;font-size:.44rem;letter-spacing:.1em;text-transform:uppercase;margin-top:1px;font-weight:500} .luvbloom-product-img .olv-card-timer.promo-ended{display:none} /* Countdown on shop-loop cards + single product gallery */ .woocommerce ul.products li.product{position:relative} .woocommerce ul.products li.product .olv-loop-timer, .single-product .woocommerce-product-gallery .olv-single-timer{position:absolute;left:0;right:0;top:0;z-index:4;display:flex;justify-content:center;align-items:center;gap:0;background:rgba(255,255,255,.85);padding:5px 6px;backdrop-filter:blur(10px) saturate(120%);-webkit-backdrop-filter:blur(10px) saturate(120%);box-shadow:0 1px 6px rgba(0,0,0,.08)} .woocommerce ul.products li.product .olv-loop-timer .pc-unit, .single-product .woocommerce-product-gallery .olv-single-timer .pc-unit{display:flex;flex-direction:column;align-items:center;min-width:26px;padding:0 8px;position:relative} .woocommerce ul.products li.product .olv-loop-timer .pc-unit + .pc-unit::before, .single-product .woocommerce-product-gallery .olv-single-timer .pc-unit + .pc-unit::before{content:"";position:absolute;left:0;top:50%;transform:translateY(-50%);height:60%;width:1px;background:rgba(0,0,0,.1)} .woocommerce ul.products li.product .olv-loop-timer .pc-num, .single-product .woocommerce-product-gallery .olv-single-timer .pc-num{color:#1d1d1f;font-weight:600;font-size:.85rem;line-height:1.05;font-family:var(--font-body);font-variant-numeric:tabular-nums} .woocommerce ul.products li.product .olv-loop-timer .pc-lbl, .single-product .woocommerce-product-gallery .olv-single-timer .pc-lbl{color:#86868b;font-size:.44rem;letter-spacing:.1em;text-transform:uppercase;margin-top:1px;font-weight:500} .promo-countdown.promo-ended{display:none} .luvbloom-product-img img{width:100%;height:100%;object-fit:cover;transition:transform .5s} .luvbloom-product-card:hover .luvbloom-product-img img{transform:scale(1.05)} .luvbloom-product-img-placeholder{width:100%;height:100%;display:flex;align-items:center;justify-content:center;font-size:4rem;background:linear-gradient(135deg,var(--blush),var(--primary-light))} .luvbloom-product-badge{position:absolute;top:12px;left:12px;background:var(--primary);color:#fff;font-size:.65rem;font-weight:700;letter-spacing:1px;text-transform:uppercase;padding:4px 10px;border-radius:50px;z-index:3} .luvbloom-product-info{padding:14px 12px 18px;text-align:center} .luvbloom-product-cat{display:none} .luvbloom-product-name{font-family:var(--font-body);font-size:.82rem;font-weight:600;color:var(--color-heading);margin-bottom:8px;line-height:1.4;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .luvbloom-product-price{font-size:.9rem;font-weight:700;color:var(--primary)} .luvbloom-product-price del{color:#b9b9b9;font-weight:400;font-size:.82em;margin-left:5px} .olv-disc-sign{display:inline-block;background:#e8384f;color:#fff;font-size:.68rem;font-weight:700;padding:1px 7px;border-radius:50px;vertical-align:middle;margin-left:5px} .olv-price-from{font-size:.75rem;font-weight:400;color:var(--mid);letter-spacing:.02em} .luvbloom-add-to-cart{display:none} /* ── TABBED PRODUCTS ── */ .tabbed-products{background:#fff} .tab-nav{display:flex;gap:8px;justify-content:center;flex-wrap:wrap;margin-bottom:36px} .tab-btn{font-family:var(--font-body);font-size:.76rem;font-weight:500;letter-spacing:.06em;text-transform:uppercase;color:var(--mid);background:#f5f5f5;border:1.5px solid var(--border);padding:8px 22px;border-radius:100px;cursor:pointer;transition:all .2s ease} .tab-btn:hover,.tab-btn.active{background:var(--primary);color:#fff;border-color:var(--primary)} .tab-panel{display:none} .tab-panel.active{display:block} /* ── PROMO BANNER ── */ .promo-banner{background:linear-gradient(135deg,var(--primary) 0%,var(--primary-dark) 100%);padding:64px 32px;text-align:center;position:relative;overflow:hidden} .promo-banner::before{content:'';position:absolute;top:-40%;right:-10%;width:400px;height:400px;border-radius:50%;background:rgba(255,255,255,.06);pointer-events:none} .promo-banner h2{color:#fff;font-family:var(--font-heading);font-size:clamp(1.6rem,3vw,2.4rem);margin-bottom:12px} .promo-banner p{color:rgba(255,255,255,.88);font-size:.94rem;max-width:520px;margin:0 auto 28px;line-height:1.7} .promo-banner .btn+.btn{margin-left:12px} /* ── PARALLAX BANNER ── */ .olv-parallax{position:relative;min-height:92vh;display:flex;align-items:center;justify-content:center;padding:120px 24px;text-align:center;overflow:hidden;background:linear-gradient(135deg,var(--primary) 0%,var(--primary-dark) 100%);background-size:cover;background-position:center} .olv-parallax.has-img{background-attachment:fixed} .olv-parallax-overlay{position:absolute;inset:0;background:rgba(38,24,30,.45);display:none} .olv-parallax.has-img .olv-parallax-overlay{display:block} .olv-parallax-inner{position:relative;z-index:1;max-width:840px;margin:0 auto} .olv-parallax-inner h2{font-family:var(--font-heading);font-size:clamp(1.7rem,3vw,2.6rem);color:#fff;margin:0 0 16px;text-shadow:0 2px 14px rgba(0,0,0,.28)} .olv-parallax-inner p{color:rgba(255,255,255,.93);font-size:1.02rem;line-height:1.65;margin:0 auto 28px;max-width:600px;text-shadow:0 1px 10px rgba(0,0,0,.22)} .olv-parallax-btns{display:flex;gap:14px;justify-content:center;flex-wrap:wrap} @media(max-width:768px){.olv-parallax{padding:60px 18px;background-attachment:scroll !important}} /* ── OCCASIONS SECTION ── */ .occasions-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px} .occasion-card{position:relative;border-radius:18px;overflow:hidden;aspect-ratio:4/3;cursor:pointer} .occasion-card-bg{width:100%;height:100%;object-fit:cover;transition:transform .4s ease;display:block;position:absolute;inset:0} .occasion-card:hover .occasion-card-bg{transform:scale(1.06)} .occasion-card-inner{position:absolute;inset:0;background:linear-gradient(to top,rgba(0,0,0,.55) 0%,transparent 60%);display:flex;flex-direction:column;align-items:center;justify-content:flex-end;padding:24px;gap:10px} .occasion-card-inner h3{color:#fff;font-family:var(--font-heading);font-size:1.1rem;margin:0;text-shadow:0 2px 8px rgba(0,0,0,.3)} .occasion-placeholder{width:100%;height:100%;background:var(--blush-deep);display:flex;align-items:center;justify-content:center;font-size:4rem} /* ── DELIVERY INFO STRIP ── */ .delivery-info-strip{background:var(--cream);padding:48px 0;border-top:1px solid var(--border)} .delivery-info-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:32px} .delivery-info-item{display:flex;gap:16px;align-items:flex-start} .delivery-info-icon{width:44px;height:44px;background:var(--primary-light);border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:1.2rem;flex-shrink:0} .delivery-info-item h4{font-family:var(--font-body);font-size:.86rem;font-weight:600;color:var(--dark);margin:0 0 5px} .delivery-info-item p{font-size:.77rem;color:var(--mid);margin:0;line-height:1.65} /* ── FOOTER ── */ /* ── FOOTER (light, with floating white features card) ── */ .site-footer{background:#f6f3f4;color:#7a7480;padding:0;margin-top:0} /* spacer so the floating card has a colored band above it to overlap into */ .site-footer::before{content:"";display:block;height:70px;background:#f6f3f4} /* On inner pages, add a WHITE gap ABOVE the footer (page background shows through the transparent margin). The card's -135px float then straddles the white-gap / grey-footer line — same pop-up "middle" effect as the homepage — while the products stay well clear above the white gap. */ body:not(.home) .site-footer{margin-top:120px} body:has(.olv-addons-float) .site-footer{margin-top:160px} .footer-features-card{background:#fff;border-radius:60px;box-shadow:0 26px 60px rgba(0,0,0,.16);margin:-135px auto 45px;padding:34px 50px;display:flex;justify-content:space-between;gap:30px;flex-wrap:wrap;position:relative;z-index:3;animation:olvPopIn .55s cubic-bezier(.2,.7,.2,1)} /* KEEP the card's floating overlap effect untouched. Instead, give the product listings enough bottom space so the card's upward overlap lands in EMPTY space — never on top of the products / Add-to-cart buttons. */ body:not(.home) .olv-woo-content{padding-bottom:150px !important} body:not(.home) ul.products{margin-bottom:40px !important} /* Pages with the floating "Pay now" button (add-on / promotions): extra bottom clearance so the fixed button never covers products or footer. */ body:has(.olv-addons-float) .olv-woo-content{padding-bottom:190px !important} @keyframes olvPopIn{from{opacity:0;transform:translateY(26px)}to{opacity:1;transform:none}} .ff-item{display:flex;align-items:flex-start;gap:16px;flex:1;min-width:240px} .ff-item svg{width:40px;height:40px;color:var(--primary);flex-shrink:0;margin-top:2px} .ff-item h4{font-family:var(--font-body);font-size:1rem;font-weight:700;color:var(--dark);margin:0 0 4px} .ff-item p{font-size:.82rem;color:#9a949f;margin:0;line-height:1.55} .footer-grid{display:grid;grid-template-columns:1.8fr 1fr 1fr 1.05fr 1.3fr;gap:54px;padding:70px 0 52px} .footer-brand .site-logo{color:#1d1d1f;font-size:1.5rem;display:inline-block;margin-bottom:20px;text-decoration:none;letter-spacing:-.01em} .footer-brand .custom-logo-link{display:inline-block;margin:0 0 18px} .footer-brand .custom-logo,.footer-brand img.custom-logo{max-height:46px;width:auto;height:auto;display:block;margin:0} .footer-brand .footer-brand-about{font-size:.82rem;color:#9a949f;line-height:1.85;margin:0 0 22px;max-width:300px} .footer-col h4{color:#1d1d1f;font-family:var(--font-body);font-size:.7rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;margin:0 0 22px} .footer-col ul{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:13px} .footer-col ul li a{font-size:.82rem;color:#8a8490;transition:color .18s;text-decoration:none;letter-spacing:.01em} .footer-col ul li a:hover{color:var(--primary)} .footer-contact h4{margin-top:26px} .footer-contact p{display:flex;align-items:flex-start;gap:10px;font-size:.82rem;color:#8a8490;margin:0 0 13px;line-height:1.65} .footer-contact p span{flex-shrink:0;opacity:.85;font-size:.85rem;line-height:1.4} .footer-contact a{color:#8a8490;transition:color .18s} .footer-contact a:hover{color:var(--primary)} .footer-social-row{display:flex;justify-content:center;gap:14px;padding:30px 0 32px;border-top:1px solid rgba(0,0,0,.07)} .footer-social-row a{width:40px;height:40px;border-radius:50%;background:#fff;border:1px solid rgba(0,0,0,.07);display:flex;align-items:center;justify-content:center;font-size:.72rem;font-weight:600;color:#8a8490;transition:all .22s;text-decoration:none} .footer-social-row a:hover{background:var(--primary);border-color:var(--primary);color:#fff;transform:translateY(-2px)} .footer-social-row a img{width:18px;height:18px;object-fit:contain;display:block} .footer-pay-img{background:#fff;border:1px solid rgba(0,0,0,.08);border-radius:6px;padding:4px 8px;display:inline-flex;align-items:center} .footer-pay-img img{height:18px;width:auto;display:block;object-fit:contain} .footer-bottom-wrap{border-top:1px solid rgba(0,0,0,.07);background:#efeaec} .footer-bottom{padding:20px 32px;display:flex;justify-content:space-between;align-items:center;font-family:var(--font-body);font-size:.78rem;color:#9a949f;max-width:1480px;margin:0 auto;flex-wrap:wrap;gap:12px} .footer-bottom a{color:var(--primary)} .footer-pay{display:flex;gap:7px;flex-wrap:wrap} .footer-pay span{background:#fff;border:1px solid rgba(0,0,0,.08);border-radius:6px;padding:4px 9px;font-size:.64rem;font-weight:700;letter-spacing:.03em;color:#6a6470} /* Footer features strip */ .site-footer .features-strip{background:rgba(255,255,255,.04);border-top:1px solid rgba(255,255,255,.06);border-bottom:1px solid rgba(255,255,255,.06);margin-bottom:0;padding:28px 0} .site-footer .features-strip .feature-item h4{font-size:.78rem} .site-footer .features-strip .feature-item p{font-size:.7rem} /* ── SCROLL REVEAL ANIMATION ── */ .reveal{opacity:0;transform:translateY(28px);transition:opacity .55s ease,transform .55s ease} .reveal.visible{opacity:1;transform:translateY(0)} /* ── WOOCOMMERCE ── */ /* Shop / category archive fills the 90% wrapper (.olv-woo-content) */ .woocommerce-page .woocommerce{max-width:100%;margin:0 auto;padding:0} /* Shop / category archive header — sans-serif, matches product page */ .woocommerce .page-title, .archive.woocommerce .page-title, .woocommerce-page .page-title{font-family:var(--font-body);font-size:1.9rem;font-weight:600;color:var(--color-heading);margin:4px 0 6px;line-height:1.2} .woocommerce .woocommerce-result-count{font-family:var(--font-body);font-size:.85rem;color:var(--mid);margin-bottom:24px} .woocommerce .woocommerce-ordering select{font-family:var(--font-body);font-size:.85rem;border:1.5px solid var(--border);border-radius:100px;padding:10px 18px} /* Archive product grid = uniform CSS grid like the homepage (no big row gaps) */ .woocommerce ul.products{display:grid !important;grid-template-columns:repeat(4,1fr);gap:20px;margin:0 0 30px;list-style:none;padding:0} .woocommerce ul.products::before,.woocommerce ul.products::after{display:none !important} .woocommerce ul.products li.product{width:auto !important;min-width:0 !important;margin:0 !important;float:none !important;clear:none !important;text-align:center;display:flex;flex-direction:column} .woocommerce ul.products li.product img{aspect-ratio:3/4;object-fit:contain;width:100%;height:auto;border-radius:12px} .woocommerce ul.products li.product .woocommerce-loop-product__title{font-family:var(--font-body);font-size:.82rem;font-weight:600;color:var(--color-heading);line-height:1.4;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .woocommerce ul.products li.product .price{color:var(--primary);font-family:var(--font-body);font-weight:700} .woocommerce ul.products li.product a.button{display:none !important} .woocommerce ul.products li.product .product-category-name, .woocommerce ul.products li.product .woocommerce-loop-category__title{display:none} .woocommerce ul.products li.product .button, .woocommerce ul.products li.product a.added_to_cart{font-family:var(--font-body);text-transform:uppercase;letter-spacing:.05em;font-size:.78rem} .woocommerce ul.products li.product a.button, .woocommerce a.button,.woocommerce button.button,.woocommerce input.button{ background:var(--primary) !important; color:#fff !important;border-radius:var(--btn-radius) !important; font-size:var(--btn-size) !important;font-weight:var(--btn-fw) !important; letter-spacing:var(--btn-ls) !important; padding:var(--btn-pv) var(--btn-ph) !important;border:none !important; } .woocommerce ul.products li.product a.button:hover, .woocommerce a.button:hover,.woocommerce button.button:hover{opacity:.85 !important} .woocommerce #respond input#submit,.woocommerce .single_add_to_cart_button{ background:var(--primary) !important; color:#fff !important;border-radius:var(--btn-radius) !important; border:none !important;font-weight:var(--btn-fw) !important; } .woocommerce-cart .woocommerce,.woocommerce-checkout .woocommerce{max-width:1200px;margin:0 auto;padding:60px 24px} .woocommerce-cart .container,.woocommerce-checkout .container{max-width:1200px !important} .woocommerce-message,.woocommerce-info{background:var(--light-bg);border-top-color:var(--primary);color:var(--color-heading)} input[type=text],input[type=email],input[type=password],input[type=number],input[type=tel],textarea,select{ border:1.5px solid var(--border) !important; border-radius:var(--input-radius) !important; font-family:var(--font-body) !important; font-size:var(--body-size) !important; color:var(--color-heading) !important; padding:10px 14px !important; } input:focus,textarea:focus,select:focus{border-color:var(--primary) !important;outline:none !important;box-shadow:0 0 0 3px rgba(232,137,154,.15) !important} /* ════════════════════════════════════════════════════════════ PREMIUM SINGLE PRODUCT PAGE ════════════════════════════════════════════════════════════ */ .single-product .woocommerce-page .woocommerce, .single-product .woocommerce{max-width:1480px;margin:0 auto;padding:48px 24px 80px} /* Centred container for ALL WooCommerce pages (shop, category & single) */ .olv-woo-content{max-width:90%;margin:0 auto;padding:28px 0 72px;box-sizing:border-box} /* Catalogue 2-column layout with left filter sidebar */ .olv-shop-layout{display:flex;gap:40px;align-items:flex-start} .olv-shop-sidebar{flex:0 0 250px;width:250px} .olv-shop-main{flex:1;min-width:0} .olv-filter-widget{margin-bottom:26px;padding-bottom:22px;border-bottom:1px solid var(--border)} .olv-filter-widget:last-child{border-bottom:none} .olv-filter-title{font-family:var(--font-body);font-size:.9rem;font-weight:600;color:var(--color-heading);margin:0 0 14px;text-transform:uppercase;letter-spacing:.04em} .olv-shop-sidebar ul{list-style:none;margin:0;padding:0} .olv-shop-sidebar li{font-family:var(--font-body);font-size:.88rem;color:var(--mid);padding:5px 0} .olv-shop-sidebar a{color:var(--mid);text-decoration:none;transition:color .2s} .olv-shop-sidebar a:hover{color:var(--primary)} @media(max-width:900px){ .olv-shop-layout{flex-direction:column;gap:24px} .olv-shop-sidebar{width:100%;flex:none} } .single-product .olv-breadcrumb{padding-top:0} .single-product div.product{padding-top:20px;padding-bottom:24px} /* Breadcrumb (Home > Category > Product) */ .single-product .woocommerce-breadcrumb, .olv-breadcrumb{font-family:var(--font-body);font-size:.82rem;letter-spacing:.01em;color:var(--mid);margin-bottom:8px;text-transform:none;display:flex;align-items:center;flex-wrap:wrap;gap:2px} .single-product .woocommerce-breadcrumb a, .olv-breadcrumb a{color:var(--mid);text-decoration:none;transition:color .2s} .single-product .woocommerce-breadcrumb a:hover, .olv-breadcrumb a:hover{color:var(--primary)} .olv-breadcrumb .olv-bc-sep{margin:0 8px;color:#cbb9bf;font-size:1rem} /* Two-column layout — named grid areas so every element lands in the right spot */ .single-product div.product{ display:grid !important; grid-template-columns:calc(52% - 32px) calc(48% - 32px); grid-template-areas: "gallery summary" "accord summary" "full full"; grid-template-rows:auto auto auto; column-gap:64px;row-gap:0; align-items:start;float:none; } .single-product div.product > .woocommerce-product-gallery{ grid-area:gallery;width:100% !important;float:none;margin:0; } .single-product div.product > .summary.entry-summary{ grid-area:summary;width:100% !important;float:none;margin:0; } /* Accordion: left col row 2 */ .olv-product-accordion{ grid-area:accord !important;width:100% !important; } /* Tabs (empty), related, upsells — full width row 3 */ .single-product div.product > .woocommerce-tabs, .single-product div.product > .related, .single-product div.product > .up-sells, .single-product div.product > .upsells{ grid-area:full !important; } /* Any other stray direct children: also full width */ .single-product div.product > *:not(.woocommerce-product-gallery):not(.entry-summary):not(.olv-product-accordion):not(.woocommerce-tabs):not(.related):not(.up-sells):not(.upsells){ grid-column:1 / -1 !important; } /* Gallery — clean frame, no pink shadow */ .single-product .woocommerce-product-gallery__image, .single-product .woocommerce-product-gallery img{border-radius:18px;overflow:hidden;box-shadow:none} .single-product .woocommerce-product-gallery__image img, .single-product .woocommerce-product-gallery > .woocommerce-product-gallery__image img{aspect-ratio:3/4;object-fit:cover;width:100%;height:auto;display:block} .single-product .woocommerce-product-gallery__wrapper{border-radius:18px} /* Gallery layout — thumbnails LEFT (vertical column), main image right */ .single-product .woocommerce-product-gallery{display:flex !important;flex-direction:row !important;gap:14px;align-items:flex-start;width:100%;float:none !important} .single-product .woocommerce-product-gallery .flex-control-thumbs, .single-product .woocommerce-product-gallery ol.flex-control-thumbs{order:1;flex:0 0 84px;width:84px;display:flex !important;flex-direction:column !important;gap:28px !important;margin:0 !important;padding:0;list-style:none;max-height:none;overflow:visible;scrollbar-width:thin} .single-product .woocommerce-product-gallery .flex-control-thumbs li{margin:0 !important;padding:0 !important;line-height:0} .single-product .woocommerce-product-gallery .flex-control-thumbs::-webkit-scrollbar{width:4px} .single-product .woocommerce-product-gallery .flex-control-thumbs::-webkit-scrollbar-thumb{background:#d6d6d6;border-radius:4px} .single-product .woocommerce-product-gallery .flex-control-thumbs li{width:84px !important;height:84px;margin:0 !important;flex:0 0 84px} .single-product .woocommerce-product-gallery .flex-control-thumbs img, .woocommerce div.product div.images .flex-control-thumbs li img{border-radius:8px;opacity:1 !important;transition:transform .2s,box-shadow .25s;box-shadow:none;width:84px;height:100px;object-fit:cover;cursor:pointer;display:block} .single-product .woocommerce-product-gallery .flex-control-thumbs img:hover{transform:scale(1.03)} .single-product .woocommerce-product-gallery .flex-control-thumbs img.flex-active{box-shadow:0 0 0 2px var(--primary)} .single-product .woocommerce-product-gallery .flex-control-thumbs li.olv-thumb-active img{box-shadow:0 0 0 2px var(--primary) !important} .single-product .woocommerce-product-gallery__wrapper{order:2;flex:1;min-width:0;margin:0 !important} .single-product .woocommerce-product-gallery__trigger{background:#fff;border-radius:50%;box-shadow:0 4px 14px rgba(0,0,0,.12);top:18px;right:18px} /* Gallery: thumbs LEFT-TOP, scroll viewer RIGHT (no duplicate main image) */ .single-product .woocommerce-product-gallery__wrapper{display:none !important} .single-product .woocommerce-product-gallery{ display:grid !important; grid-template-columns:96px 1fr; grid-template-rows:auto; column-gap:18px; align-items:start; position:relative; } .single-product .woocommerce-product-gallery__trigger{position:absolute !important;z-index:10} .single-product .woocommerce-product-gallery .flex-control-thumbs, .single-product .woocommerce-product-gallery ol.flex-control-thumbs{ grid-column:1 !important;grid-row:1 !important; max-height:none;width:96px !important;flex:none !important;align-self:start } /* Stack viewer — takes the entire right column, height = 2 images at 3:4 */ .olv-stack-wrap{ grid-column:2 !important;grid-row:1 !important; width:100% !important;flex:none !important; display:flex;flex-direction:column;align-items:stretch;gap:8px;margin:0;position:relative } .olv-image-stack{display:flex !important;flex-direction:column !important;gap:40px !important;margin:0 !important;height:auto !important;max-height:90vh;overflow-y:auto;overflow-x:hidden;padding-right:0;scrollbar-width:none;scroll-behavior:smooth;background:transparent} .olv-image-stack::-webkit-scrollbar{width:0;background:transparent} /* Each image lives inside a SOLID 3:4 box — padding-bottom trick (bulletproof) */ .olv-image-stack > .olv-stack-item, .olv-stack-item{ width:100% !important; height:0 !important; padding:0 0 133.33% 0 !important; /* 4/3 = 133.33% — locks 3:4 portrait */ background:#f7f7f7 !important; border:1px solid #e8e8e8 !important; border-radius:14px !important; overflow:hidden !important; flex:0 0 auto !important; flex-shrink:0 !important; display:block !important; position:relative !important; cursor:zoom-in !important; transition:transform .3s ease !important; margin:0 !important; box-sizing:border-box !important; } .olv-stack-item:hover{transform:scale(1.005)} .olv-stack-item img{ position:absolute !important; inset:0 !important; width:100% !important; height:100% !important; object-fit:cover !important; display:block !important; border-radius:14px !important; margin:0 !important; padding:0 !important; } /* Raw fallback (if cached JS hasn't wrapped them yet) */ .olv-image-stack > img{ width:100% !important; height:0 !important; padding-bottom:133.33% !important; background:#f7f7f7 !important; border:1px solid #e8e8e8 !important; border-radius:14px !important; flex:0 0 auto !important; flex-shrink:0 !important; display:block !important; cursor:zoom-in !important; margin:0 !important; object-fit:cover !important; object-position:center !important; } .olv-image-stack img:hover{transform:scale(1.005)} /* Scroll buttons ▲ ▼ — hidden (using scrollbar only) */ .olv-stack-nav{display:none !important} /* Premium lightbox — blurred backdrop + spring pop + smooth easing */ .olv-lightbox{position:fixed;inset:0;background:rgba(20,15,18,.78);backdrop-filter:blur(14px) saturate(140%);-webkit-backdrop-filter:blur(14px) saturate(140%);z-index:99999;display:none;align-items:center;justify-content:center;padding:24px;cursor:default;opacity:0;transition:opacity .45s cubic-bezier(.22,1,.36,1)} .olv-lightbox.open{display:flex;opacity:1} .olv-lightbox-img{max-width:88vw;max-height:88vh;border-radius:12px;box-shadow:0 30px 80px rgba(0,0,0,.55),0 0 0 1px rgba(255,255,255,.06);object-fit:contain;opacity:0;transform:scale(.88) translateY(20px);transition:opacity .55s cubic-bezier(.22,1,.36,1),transform .65s cubic-bezier(.34,1.56,.64,1)} .olv-lightbox.open .olv-lightbox-img{opacity:1;transform:scale(1) translateY(0)} .olv-lightbox-close{position:fixed;top:28px;right:36px;background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.18);color:#fff;width:52px;height:52px;border-radius:50%;font-size:30px;line-height:1;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:background .25s,border-color .25s,transform .25s;font-family:var(--font-body);font-weight:200;backdrop-filter:blur(8px)} .olv-lightbox-close:hover{background:rgba(255,255,255,.22);border-color:rgba(255,255,255,.4);transform:rotate(90deg)} .olv-lightbox-nav{position:fixed;top:50%;transform:translateY(-50%);background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.18);color:#fff;width:58px;height:58px;border-radius:50%;font-size:34px;line-height:1;cursor:pointer;display:flex;align-items:center;justify-content:center;padding:0 0 4px;transition:background .25s,border-color .25s,transform .25s;font-family:var(--font-body);font-weight:300;backdrop-filter:blur(8px)} .olv-lightbox-nav:hover{background:rgba(255,255,255,.22);border-color:rgba(255,255,255,.4);transform:translateY(-50%) scale(1.08)} .olv-lightbox-prev{left:36px} .olv-lightbox-next{right:36px} @media(max-width:768px){ .olv-lightbox-close{top:16px;right:16px;width:40px;height:40px;font-size:22px} .olv-lightbox-nav{width:44px;height:44px;font-size:26px} .olv-lightbox-prev{left:12px} .olv-lightbox-next{right:12px} } @media(max-width:768px){ /* 1-column grid: stack on top, thumbs strip at bottom */ .single-product .woocommerce-product-gallery{grid-template-columns:1fr !important;grid-template-rows:auto auto !important;column-gap:0 !important} /* Stack takes full width in row 1 */ .olv-stack-wrap{grid-column:1 !important;grid-row:1 !important;width:100% !important} .olv-image-stack{height:auto !important;max-height:none !important} /* Thumbs: horizontal strip in row 2 */ .single-product .woocommerce-product-gallery .flex-control-thumbs, .single-product .woocommerce-product-gallery ol.flex-control-thumbs{ grid-column:1 !important;grid-row:2 !important; flex-direction:row !important;flex-wrap:nowrap !important;flex:none !important; width:100% !important;max-height:none; overflow-x:auto !important;overflow-y:hidden !important; -webkit-overflow-scrolling:touch;scrollbar-width:none; margin-top:14px !important;gap:10px !important; /* balanced left/right gutters so the strip sits inside a wrapper; 'safe center' centers the thumbs when they fit, but keeps them start-aligned (never clipped) when they overflow & scroll */ padding:2px 16px !important;box-sizing:border-box !important; scroll-padding-left:16px;scroll-padding-right:16px; justify-content:safe center !important; } .single-product .woocommerce-product-gallery .flex-control-thumbs::-webkit-scrollbar{display:none;height:0} .single-product .woocommerce-product-gallery .flex-control-thumbs li{flex:0 0 68px !important;width:68px !important;height:68px !important;scroll-snap-align:start} .single-product .woocommerce-product-gallery .flex-control-thumbs img{width:68px !important;height:68px !important} /* Mobile gallery: horizontal SWIPE slider — one image per view, swipe left/right. */ .single-product .woocommerce-product-gallery, .olv-stack-wrap{width:100% !important;max-width:100% !important;overflow:hidden} .olv-image-stack{ display:flex !important;flex-direction:row !important;flex-wrap:nowrap !important; overflow-x:auto !important;overflow-y:hidden !important;scroll-snap-type:x mandatory; -webkit-overflow-scrolling:touch;gap:0 !important;scrollbar-width:none; width:100% !important;max-width:100% !important;height:auto !important;max-height:none !important; } .olv-image-stack::-webkit-scrollbar{display:none} .olv-image-stack > .olv-stack-item{ display:block !important;flex:0 0 100% !important;width:100% !important;max-width:100% !important; margin:0 !important;scroll-snap-align:center;box-sizing:border-box; } .olv-stack-item img, .single-product .woocommerce-product-gallery img{max-width:100% !important;width:100% !important;box-sizing:border-box} /* hide the desktop up/down stack arrows on mobile (swipe + thumbs instead) */ .olv-stack-nav{display:none !important} } /* PRE ORDER badge — small rose pill above title */ .olv-preorder-badge{display:inline-block;background:#fce4eb;color:var(--primary-dark);font-family:var(--font-body);font-size:.68rem;font-weight:700;letter-spacing:.12em;padding:6px 14px;border-radius:100px;margin:0 0 14px;text-transform:uppercase} /* Title — elegant serif */ .single-product div.product .product_title{font-family:var(--font-heading);font-size:2rem;line-height:1.2;font-weight:500;letter-spacing:0;color:var(--color-heading);margin:0 0 22px} /* Price — sans-serif, rose, bold */ .single-product div.product p.price, .single-product div.product .price{color:var(--primary);font-family:var(--font-body);font-size:1.85rem;font-weight:700;margin:0 0 22px;display:block} .single-product div.product .price del{color:#c3b5ba;font-weight:400;font-size:1.25rem;margin-right:10px;opacity:.8} .single-product div.product .price ins{text-decoration:none} /* Short description — light grey box */ .single-product .woocommerce-product-details__short-description{font-family:var(--font-body);font-size:.93rem;line-height:1.65;color:#444 !important;padding:26px 30px 26px 116px;background:#f5f5f5 !important;border-radius:18px;border:none !important;box-shadow:none !important;outline:none !important;margin-bottom:8px;position:relative;min-height:96px} .single-product .woocommerce-product-details__short-description *{color:#444 !important} /* Collapsible state */ .single-product .woocommerce-product-details__short-description.olv-desc-collapsible{max-height:100px;overflow:hidden;transition:max-height .4s ease;margin-bottom:0} .single-product .woocommerce-product-details__short-description.olv-desc-collapsible::after{content:'';position:absolute;bottom:0;left:0;right:0;height:50px;background:linear-gradient(transparent,#f5f5f5) !important;pointer-events:none;border-radius:0 0 18px 18px;transition:opacity .3s} .single-product .woocommerce-product-details__short-description.olv-desc-expanded{max-height:1000px;margin-bottom:0} .single-product .woocommerce-product-details__short-description.olv-desc-expanded::after{opacity:0} /* Read more / Show less button */ .olv-desc-toggle{display:flex;align-items:center;justify-content:center;gap:10px;width:fit-content;max-width:100%;background:#fff;border:1px solid #e3e3e6;border-radius:50px;cursor:pointer;color:#1d1d1f;font-size:.86rem;font-weight:600;font-family:var(--font-body);padding:12px 32px;text-align:center;letter-spacing:.01em;box-shadow:0 1px 3px rgba(0,0,0,.05);transition:border-color .2s,box-shadow .2s,background .2s,color .2s;margin:18px auto 24px} .olv-desc-toggle:hover{border-color:#c9c9cd;box-shadow:0 4px 14px rgba(0,0,0,.08);color:#000} .olv-desc-toggle .olv-dt-arrow{display:inline-block;font-size:.66rem;transition:transform .35s ease} .olv-desc-toggle.expanded .olv-dt-arrow{transform:rotate(180deg)} @media(max-width:768px){ /* Mobile: flower badge sits at TOP-LEFT (static), text flows full-width below — no overlap */ .single-product .woocommerce-product-details__short-description{font-size:.82rem;line-height:1.6;padding:18px !important;min-height:auto;border-radius:14px;margin:24px 0 !important;display:flex;flex-direction:column;align-items:flex-start;gap:12px} .single-product .woocommerce-variation-description{margin:24px 0 !important} /* Hide the flower badge in the grey note box on mobile */ .single-product .woocommerce-product-details__short-description::before{display:none !important} .single-product .woocommerce-product-details__short-description p{margin:0 0 8px} .single-product .woocommerce-product-details__short-description p + p{padding-top:8px} } .single-product .woocommerce-product-details__short-description::before{content:"";position:absolute;left:26px;top:50%;transform:translateY(-50%);width:64px;height:64px;background-color:#e8e8e8;border-radius:50%;background-image:url("data:image/svg+xml;utf8,");background-repeat:no-repeat;background-position:center;background-size:62%} .single-product .woocommerce-product-details__short-description p{margin:0 0 14px;color:#444} .single-product .woocommerce-product-details__short-description p:last-child{margin-bottom:0} .single-product .woocommerce-product-details__short-description p + p{padding-top:14px;border-top:1px solid rgba(0,0,0,.08)} .single-product .woocommerce-product-details__short-description p{margin:0 0 10px} .single-product .woocommerce-product-details__short-description p:last-child{margin-bottom:0} /* Variations — stack label on top of dropdown (match Add-On layout) */ .single-product .variations, .single-product .variations tbody, .single-product .variations tr, .single-product .variations th, .single-product .variations td{display:block;width:100%;border:none;background:none} .single-product .variations, .woocommerce div.product form.cart .variations{margin:0 !important;text-align:left;border:0;width:100%} .single-product .variations tr{margin-bottom:14px} .single-product .variations th.label{padding:0 0 8px;text-align:left} .single-product .variations td.value{padding:0;text-align:left} .single-product .variations th.label label{font-family:var(--font-body);font-weight:600;font-size:1rem;letter-spacing:0;text-transform:none;color:var(--color-heading);display:block;text-align:left;margin:0} .single-product .variations select{width:100%;padding:13px 16px !important;border:1.5px solid #d6d6d6 !important;border-radius:10px !important;font-size:.95rem !important;background-color:#fff !important;cursor:pointer} /* Unify ALL dropdowns/text fields on the product page to the same grey border */ .single-product .summary select, .single-product .summary input[type=text], .single-product .summary input[type=email], .single-product .summary input:not([type]), .single-product .summary textarea{ border:1.5px solid #d6d6d6 !important; border-radius:10px !important; background-color:#fff !important; } .single-product .summary textarea{ min-height:150px !important; height:150px !important; resize:vertical; } .single-product .summary select:focus, .single-product .summary input:focus, .single-product .summary textarea:focus{border-color:#b8b8b8 !important;box-shadow:none !important} /* Tighter spacing between add-on items */ .single-product .summary .wc-pao-addon, .single-product .summary .wc-pao-addon-wrap, .single-product .summary .product-addon, .single-product .summary .product-addon-wrap, .single-product .summary .ppom-input-field, .single-product .summary .pewc-field-wrapper, .single-product .summary .form-row{ margin-top:16px !important; margin-bottom:0 !important; padding-top:0 !important; padding-bottom:0 !important; } .single-product .summary .wc-pao-addon-name, .single-product .summary .product-addon-name, .single-product .summary .ppom-input-label, .single-product .summary fieldset > legend, .single-product .summary label{margin-bottom:6px !important;padding-bottom:0 !important} .single-product .summary p{margin-top:0 !important;margin-bottom:0 !important} /* Variations form — order: variation desc -> options -> add to cart */ .single-product form.variations_form{flex-direction:column;align-items:stretch;gap:0} .single-product form.variations_form > .variations{order:2} .single-product form.variations_form > .single_variation_wrap{display:contents} .single-product form.variations_form .single_variation{order:1} .single-product form.variations_form .variations_button{order:3;display:flex;flex-wrap:wrap;align-items:center;gap:14px;margin:8px 0 30px} /* Hide the duplicate olive variation price — the top price already shows it */ /* Single product — red sale badge top-right of the gallery */ .single-product .woocommerce-product-gallery{position:relative} .olv-sale-badge{position:absolute;top:14px;right:14px;z-index:6;background:#e8384f;color:#fff;font-family:var(--font-body);font-size:.85rem;font-weight:700;padding:6px 15px;border-radius:50px;box-shadow:0 4px 14px rgba(232,56,79,.35);letter-spacing:.02em;line-height:1.4} .single-product span.onsale{display:none !important} /* hide default WC green circle */ /* Single product price — show original (struck) + discounted, like the cards */ .single-product .woocommerce-variation-price{display:block !important;margin:0 0 18px} .single-product .woocommerce-variation-price .price{color:var(--primary);font-family:var(--font-body);font-size:1.85rem;font-weight:700} .single-product .woocommerce-variation-price .price del{color:#c3b5ba;font-weight:400;font-size:1.25rem;margin-right:10px;opacity:.85} .single-product .woocommerce-variation-price .price ins{text-decoration:none} .single-product div.product.product-type-variable > .summary > p.price{display:none !important} /* …but keep the price visible on Add-On products (they have no variation-price UI). */ .single-product div.product.olv-addon-product.product-type-variable > .summary > p.price{display:block !important} .single-product .woocommerce-variation-price .price ins, .single-product .woocommerce-variation-price .price ins .amount{color:var(--primary) !important;text-decoration:none !important;font-weight:700} /* Single product: discounted price BIG, original price small + struck */ .single-product .summary .price ins, .single-product .summary .price ins .amount, .single-product .woocommerce-variation-price .price ins, .single-product .woocommerce-variation-price .price ins .amount{font-size:1.95rem !important;font-weight:700 !important;color:var(--primary) !important;text-decoration:none !important} .single-product .summary .price del, .single-product .summary .price del .amount, .single-product .woocommerce-variation-price .price del, .single-product .woocommerce-variation-price .price del .amount{font-size:1.05rem !important;color:#bbb !important;font-weight:400 !important;opacity:.85} /* ── Sale styling site-wide: RED badge + pink sale price + struck original ── */ .woocommerce span.onsale, span.onsale{background:#e8384f !important;color:#fff !important;border-radius:50px !important;min-height:0 !important;min-width:0 !important;padding:5px 13px !important;font-size:.78rem !important;font-weight:700 !important;line-height:1.4 !important;box-shadow:0 4px 12px rgba(232,56,79,.3)} .woocommerce ul.products li.product .price ins, .woocommerce ul.products li.product .price ins .amount{color:var(--primary) !important;text-decoration:none !important;font-weight:700} .woocommerce ul.products li.product .price del, .woocommerce ul.products li.product .price del .amount{color:#bbb !important;font-weight:400;opacity:.85;margin-left:5px;font-size:.85em} /* Listing: move the discount label into the price (hide corner badge, like the home cards) */ .woocommerce ul.products li.product .onsale{display:none !important} .woocommerce ul.products li.product .price .olv-disc-sign{margin-left:6px} .single-product .summary .olv-disc-sign,.single-product .woocommerce-variation-price .olv-disc-sign{margin-left:8px;vertical-align:middle} /* ════════ PRICE STANDARDISATION — one pink, offer-aware price on every product ════════ */ /* Force every price amount on the product page to brand pink — this kills the WooCommerce default-OLIVE variation/secondary price seen on some products. */ .single-product .summary .price, .single-product .summary .price .woocommerce-Price-amount, .single-product .summary .woocommerce-Price-amount, .single-product .single_variation .price, .single-product .single_variation .woocommerce-Price-amount, .single-product .woocommerce-variation-price .price, .single-product .woocommerce-variation-price .woocommerce-Price-amount, .single-product .summary p.price, .single-product .summary p.price .woocommerce-Price-amount, .single-product .summary .price ins, .single-product .summary .price ins .woocommerce-Price-amount, .single-product .woocommerce-variation-price .price ins, .single-product .woocommerce-variation-price .price ins .woocommerce-Price-amount{ color:var(--primary) !important; font-size:1.85rem !important; /* EXACT same size on every product */ font-weight:700 !important; line-height:1.3 !important; margin:0 0 18px !important; } /* Struck-through ORIGINAL price (when on offer): same smaller size + grey, everywhere. */ .single-product .summary .price del, .single-product .summary .price del .woocommerce-Price-amount, .single-product .single_variation .price del, .single-product .single_variation .price del .woocommerce-Price-amount, .single-product .woocommerce-variation-price .price del, .single-product .woocommerce-variation-price .price del .woocommerce-Price-amount{color:#c3b5ba !important;font-weight:400 !important;font-size:1.15rem !important;} /* The rule that was MISSING under the comment near line ~1002: hide the duplicate olive variation price on add-on products — the top price already shows it. */ .single-product div.product.olv-addon-product .woocommerce-variation-price{display:none !important;} /* Hide an empty short-description box (products with no description, e.g. FS124). */ .single-product .woocommerce-product-details__short-description:empty{display:none !important;} /* ════════════════════════════════════════════════════════════════════════════════════ */ /* Per-combination description — clean display box, no pink, LEFT aligned & full width */ .single-product .single_variation_wrap, .single-product .single_variation, .single-product .woocommerce-variation{text-align:left !important;width:100% !important;max-width:100% !important;margin-left:0 !important;margin-right:0 !important;display:block} .single-product .woocommerce-variation-description{font-family:var(--font-body);font-size:20px;line-height:1.5;color:var(--color-heading);font-weight:600;background:#f4f4f4;border:none;border-radius:14px;padding:18px 22px 18px 84px;margin:0 0 18px !important;text-align:left !important;box-shadow:none;letter-spacing:0;display:flex;align-items:center;min-height:64px;width:100%;max-width:100%;box-sizing:border-box;position:relative} .single-product .woocommerce-variation-description::before{content:"";position:absolute;left:16px;top:50%;transform:translateY(-50%);width:50px;height:50px;background-color:#e8e8e8;border-radius:50%;background-image:url("data:image/svg+xml;utf8,");background-repeat:no-repeat;background-position:center;background-size:62%} /* Animate when variation changes — Zoom Bounce */ @keyframes olvDescZoomBounce{ 0% {opacity:0;transform:scale(0)} 50% {opacity:1;transform:scale(1.15)} 70% {transform:scale(.92)} 85% {transform:scale(1.04)} 95% {transform:scale(.98)} 100% {opacity:1;transform:scale(1)} } .single-product .woocommerce-variation-description.olv-anim{ animation:olvDescZoomBounce .75s ease-out; transform-origin:center center; } .single-product .woocommerce-variation-description *{text-align:left !important} .single-product .woocommerce-variation-description p{margin:0;text-align:left} /* Hide the reset link (every product must keep a selection) */ .single-product .reset_variations{display:none !important} .single-product .reset_variations{font-size:.78rem;color:var(--mid);margin-left:10px} /* Quantity + Add to cart — quantity row on top, button full-width below */ .single-product form.cart{display:flex !important;flex-direction:column !important;align-items:stretch !important;gap:10px;margin:8px 0 30px} /* The WooCommerce default floats the quantity (float:left), which can pull it into the empty space beside the builder fields. Clear it and keep the builder full width so the whole add-to-cart form stays one clean column (quantity sits just above Add to cart). */ .single-product form.cart .quantity, .single-product form.cart .olv-qty-wrap{float:none !important;align-self:flex-start} .single-product .summary .olbb-builder{width:100% !important;max-width:100% !important;float:none !important} /* Trim the oversized gap above the first builder field (was ~72px) so it matches the ~30px spacing used between the other fields. */ .single-product .summary .olbb-builder{margin-top:0 !important;margin-bottom:0 !important} .single-product form.cart .woocommerce-variation-add-to-cart{margin-top:0 !important} .single-product .summary .olbb-builder > .olbb-field:first-child{margin-top:0 !important} /* Variable products: the variation table adds ~24px more structure than a normal field, so pull the first builder field up by that much to keep the gap an even ~30px. */ .single-product div.product.product-type-variable .summary .olbb-builder > .olbb-field:first-child{margin-top:-24px !important} /* Quantity stepper row */ .olv-qty-wrap{display:flex;flex-direction:row;align-items:center;gap:12px} .olv-qty-label{font-family:var(--font-body);font-size:.95rem;font-weight:600;color:var(--color-heading);flex-shrink:0} /* Apple-style unified segmented stepper — one rounded capsule, thin dividers */ .single-product form.cart .quantity{display:inline-flex !important;align-items:stretch;gap:0;border:1px solid #e3e3e6 !important;background:#fff !important;border-radius:14px !important;overflow:hidden !important;padding:0 !important;height:50px;box-shadow:0 1px 3px rgba(0,0,0,.05),0 4px 14px -8px rgba(0,0,0,.12)} .single-product form.cart .quantity input.qty{width:58px !important;height:100% !important;border:none !important;border-radius:0 !important;text-align:center !important;font-size:1.05rem !important;font-weight:600 !important;color:#1d1d1f !important;background:#fff !important;padding:0 !important;box-shadow:none !important;-moz-appearance:textfield;outline:none !important} .single-product form.cart .quantity input.qty::-webkit-outer-spin-button, .single-product form.cart .quantity input.qty::-webkit-inner-spin-button{-webkit-appearance:none;margin:0} .olv-qty-btn{width:48px;height:100%;border-radius:0;border:none;background:#fff;color:#1d1d1f;font-size:1.35rem;line-height:1;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;padding:0;font-weight:400;transition:background .18s ease,color .18s ease;font-family:var(--font-body);-webkit-tap-highlight-color:transparent} .olv-qty-minus{border-right:1px solid #ececee} .olv-qty-plus{border-left:1px solid #ececee;color:var(--primary)} .olv-qty-btn:hover{background:#f5f5f7} .olv-qty-btn:active{background:#ededf0} .olv-qty-plus:hover{background:#fff0f5;color:var(--primary-dark)} .single-product .single_add_to_cart_button, .single-product button.single_add_to_cart_button, .single-product .summary .single_add_to_cart_button, .woocommerce div.product form.cart .button.single_add_to_cart_button{ background:var(--primary) !important; color:#fff !important; border-radius:8px !important; border:none !important; font-family:var(--font-body) !important; font-weight:600 !important; font-size:1.15rem !important; line-height:1.2 !important; letter-spacing:.02em !important; text-transform:none !important; padding:16px 44px !important; height:auto !important; min-height:56px !important; box-shadow:none !important; transition:background .2s,transform .2s !important; flex:none; width:100%; display:inline-flex !important; align-items:center !important; justify-content:center !important; } .single-product .single_add_to_cart_button:hover{background:var(--primary-dark) !important;transform:translateY(-2px);box-shadow:0 12px 30px rgba(232,137,154,.45) !important;opacity:1 !important} /* Trust badges — bigger fonts */ .olv-trust-badges{display:flex;flex-wrap:wrap;gap:14px 20px;margin:0 0 28px;padding:26px 0;border-top:1px solid var(--border);border-bottom:1px solid var(--border);justify-content:center} /* Mobile: single-card auto-slide carousel with arrows + dots */ .olv-tb-nav,.olv-tb-dots{display:none} @media(max-width:768px){ /* Container is a fixed (non-scrolling) wrapper; the inner track scrolls. This keeps the arrows + dots visible (they don't scroll away). */ /* Even vertical spacing — same as the other blocks */ .olv-trust-badges{position:relative !important;display:block !important;overflow:visible !important;border:none !important;margin:24px 0 !important;padding:0 0 30px !important} .olv-tb-track{display:flex !important;flex-wrap:nowrap !important;overflow-x:auto;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;gap:0;scrollbar-width:none} .olv-tb-track::-webkit-scrollbar{display:none} /* give the track a little room so the card's soft shadow isn't clipped */ .olv-tb-track{padding:10px 4px 14px !important} /* Each slide = a clean borderless white card that floats (Apple pop-up look) */ .olv-trust-badges .olv-badge{ flex:0 0 100% !important;width:100% !important;max-width:100% !important; margin:0 !important;scroll-snap-align:center;box-sizing:border-box; flex-direction:column !important;align-items:center !important;justify-content:center !important;text-align:center;gap:6px; background:#fff !important;border:1px solid rgba(0,0,0,.05) !important;border-radius:20px; box-shadow:0 2px 10px rgba(0,0,0,.05) !important; padding:28px 24px !important;min-height:120px; transform:translateZ(0);transition:transform .35s cubic-bezier(.2,.7,.2,1),box-shadow .35s ease; animation:olvTbPop .5s cubic-bezier(.2,.7,.3,1.2) both; } @keyframes olvTbPop{0%{transform:scale(.94);opacity:.4}100%{transform:scale(1);opacity:1}} .olv-trust-badges .olv-badge svg{display:block !important;width:30px;height:30px;margin:0 auto 6px} .olv-trust-badges .olv-badge strong{font-size:1.05rem} .olv-tb-nav{position:absolute;top:42%;transform:translateY(-50%);z-index:3;width:38px;height:38px;border-radius:50%;background:#fff;border:1px solid var(--border);box-shadow:0 4px 14px rgba(0,0,0,.12);display:flex;align-items:center;justify-content:center;cursor:pointer;color:#1d1d1f} .olv-tb-nav:active{transform:translateY(-50%) scale(.92)} .olv-tb-prev{left:2px}.olv-tb-next{right:2px} .olv-tb-nav svg{width:18px;height:18px} .olv-tb-dots{position:absolute;bottom:14px;left:0;right:0;display:flex;justify-content:center;gap:7px;z-index:3} .olv-tb-dots .olv-tb-dot{width:7px;height:7px;border-radius:50%;background:#d8cfd3;transition:background .2s,width .2s} .olv-tb-dots .olv-tb-dot.is-active{background:var(--primary);width:18px;border-radius:5px} } .olv-trust-badges .olv-badge{display:flex;align-items:center;gap:14px;width:calc(50% - 10px);font-family:var(--font-body);font-size:.95rem;color:var(--mid);line-height:1.35} .olv-trust-badges .olv-badge svg{flex:0 0 30px;width:30px;height:30px;stroke:var(--primary)} .olv-trust-badges .olv-badge strong{display:block;color:var(--color-heading);font-size:1.02rem;font-weight:600;margin-bottom:2px} /* Add-on field icons (picked in Customizer, rendered as inline SVG) */ .olv-field-icon{display:inline-flex;align-items:center;justify-content:center;width:22px;height:22px;vertical-align:middle;margin-right:10px;color:var(--primary);flex:0 0 22px} .olv-field-icon svg{width:22px;height:22px;display:block} /* Live character counter for add-on text fields (format: 14 / 300) */ .olv-char-counter{font-family:var(--font-body);font-size:.74rem;color:#999;margin:2px 4px 0;text-align:right;letter-spacing:.01em;line-height:1.2} .olv-char-counter.olv-char-counter--full{color:var(--primary-dark);font-weight:600} /* Datepicker: force selected/active day to BLACK text (legibility on yellow bg) */ .ui-datepicker-current-day a, .ui-datepicker-current-day .ui-state-default, .ui-datepicker .ui-state-active, .ui-datepicker .ui-state-highlight, .flatpickr-day.selected, .flatpickr-day.selected:hover, .flatpickr-day.startRange, .flatpickr-day.endRange, .pika-button.is-selected, .datepicker .day.active, .datepicker .day.selected, td.olbb-day.selected, td.olbb-day.active, .olbb-datepicker td.selected, .olbb-datepicker td.active{color:#000 !important} /* Override .olbb-field (add-on plugin inline CSS) — tight spacing, no border */ .olbb-field, .single-product .olbb-field, .single-product .summary .olbb-field{ margin:0 0 12px !important; padding:0 !important; border-bottom:none !important; border-top:none !important; } /* Remove the grey dividers between add-on fields (covers every common plugin) */ .single-product .summary *, .single-product .summary .wc-pao-addon, .single-product .summary .wc-pao-addon-wrap, .single-product .summary .product-addon, .single-product .summary .product-addon-wrap, .single-product .summary .ppom-input-field, .single-product .summary .ppom-wrapper > div, .single-product .summary .pewc-field-wrapper, .single-product .summary .form-row, .single-product .summary .cart-item, .single-product .summary fieldset{border-top:none !important;border-bottom:none !important} .single-product .summary hr, .single-product .product hr, .single-product .summary .wc-pao-divider, .single-product .summary .product-addon-divider{display:none !important} /* Product meta — hide SKU and Categories on single product */ .single-product .product_meta{display:none !important} /* Tabs */ .single-product .woocommerce-tabs{margin-top:72px;clear:both;width:100%} .single-product .woocommerce-tabs ul.tabs{border:none;padding:0 0 0 0;margin-bottom:30px;display:flex;gap:8px;border-bottom:1px solid var(--border)} .single-product .woocommerce-tabs ul.tabs::before{display:none} .single-product .woocommerce-tabs ul.tabs li{background:none !important;border:none !important;border-radius:0 !important;padding:0;margin:0} .single-product .woocommerce-tabs ul.tabs li::before, .single-product .woocommerce-tabs ul.tabs li::after{display:none !important} .single-product .woocommerce-tabs ul.tabs li a{font-family:var(--font-body);font-weight:600;font-size:.82rem;letter-spacing:.05em;text-transform:uppercase;color:var(--mid) !important;padding:14px 20px !important;display:block;border-bottom:2px solid transparent;transition:color .2s,border-color .2s} .single-product .woocommerce-tabs ul.tabs li.active a{color:var(--primary) !important;border-bottom-color:var(--primary)} .single-product .woocommerce-tabs .panel{font-family:var(--font-body);font-size:.92rem;line-height:1.8;color:var(--mid)} .single-product .woocommerce-tabs .panel h2{font-family:var(--font-heading);font-size:1.5rem;color:var(--color-heading)} /* Single-product stacking below the grid: even spacing (Mac-style), card-clearance at bottom */ body.single-product{overflow-x:clip} .single-product .gr-section{margin:84px calc(50% - 50vw);padding:72px 0} /* Related products — arch-shaped images (matches the Instagram gallery) */ .single-product .related.products ul.products li.product img{ border-radius:50% 50% 12px 12px / 30% 30% 12px 12px; object-fit:cover;background:#f6f3f4; } /* No countdown timer on related products */ .single-product .related.products .olv-loop-timer, .single-product .related.products .olv-card-timer{display:none !important} /* Related products */ .single-product .related.products, .single-product .upsells.products{margin-top:0;clear:both;width:100%;padding-top:96px;padding-bottom:140px} /* If the Google reviews section sits directly above, its margin already gives the gap */ .single-product .gr-section + .related.products, .single-product .gr-section + .upsells.products{padding-top:0} /* Carousel arrows/dots only exist on mobile — never show on desktop */ .olv-rel-nav,.olv-rel-dots{display:none} /* ── Related products: single-card auto-slide carousel on mobile ── */ @media(max-width:768px){ .single-product .related.products, .single-product .upsells.products{position:relative;padding-bottom:80px} .single-product .related.products ul.products, .single-product .upsells.products ul.products{ display:flex !important;grid-template-columns:none !important; overflow-x:auto;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch; gap:0;margin:0 !important;padding:4px 0 10px;scrollbar-width:none; } .single-product .related.products ul.products::-webkit-scrollbar, .single-product .upsells.products ul.products::-webkit-scrollbar{display:none} .single-product .related.products ul.products li.product, .single-product .upsells.products ul.products li.product{ flex:0 0 100% !important;width:100% !important;max-width:100% !important; scroll-snap-align:center;padding:0 14px !important;box-sizing:border-box; } /* Left / right scroll arrows */ .olv-rel-nav{position:absolute;top:46%;transform:translateY(-50%);z-index:5;width:42px;height:42px;border-radius:50%; background:#fff;border:1px solid var(--border);box-shadow:0 4px 16px rgba(0,0,0,.12); display:flex;align-items:center;justify-content:center;cursor:pointer;color:#1d1d1f;transition:background .18s,transform .18s} .olv-rel-nav:active{transform:translateY(-50%) scale(.92)} .olv-rel-nav.olv-rel-prev{left:6px} .olv-rel-nav.olv-rel-next{right:6px} .olv-rel-nav svg{width:20px;height:20px} /* Dots */ .olv-rel-dots{position:absolute;bottom:36px;left:0;right:0;display:flex;justify-content:center;gap:7px;z-index:5} .olv-rel-dots .olv-rel-dot{width:7px;height:7px;border-radius:50%;background:#d8cfd3;transition:background .2s,width .2s} .olv-rel-dots .olv-rel-dot.is-active{background:var(--primary);width:18px;border-radius:5px} } .single-product .related.products>h2, .single-product .upsells.products>h2{font-family:var(--font-heading);font-size:2rem;font-weight:600;color:var(--color-heading);text-align:center;margin-bottom:40px} /* ── RESPONSIVE ── */ @media(max-width:768px){ .olv-woo-content{padding:18px 20px 48px} /* Mobile: single column — gallery → summary → info accordion → full */ .single-product div.product{ grid-template-columns:1fr !important; grid-template-areas: "gallery" "summary" "accord" "full" !important; column-gap:0 !important;row-gap:28px !important; } /* Compact product page on mobile — smaller fonts & tighter inputs */ .single-product div.product .product_title{font-size:1.5rem !important;line-height:1.25 !important;margin:0 0 14px !important} .single-product div.product .price, .single-product div.product p.price{font-size:1.35rem !important;margin:0 0 16px !important} .single-product .woocommerce-product-details__short-description{font-size:.78rem !important;line-height:1.5 !important;padding:14px !important} .single-product .woocommerce-variation-description{font-size:.82rem !important;padding:14px !important;min-height:auto !important} /* hide the flower icon badge in the variation description on mobile (it blocks the text) */ .single-product .woocommerce-variation-description::before{display:none !important} /* Bouquet Options / variation selects — compact height */ .single-product .variations label, .single-product .single_variation_wrap{font-size:.85rem !important} .single-product .variations select, .single-product form.cart select{padding:11px 14px !important;font-size:.9rem !important;min-height:0 !important;height:auto !important} /* Quantity stepper compact (capsule) */ .single-product form.cart .quantity{height:46px;border-radius:13px !important} .single-product form.cart .quantity input.qty{width:52px !important;font-size:1rem !important} .single-product form.cart .quantity .olv-qty-btn{width:46px !important} .single-product form.cart .single_add_to_cart_button{flex:1 1 100%;padding:14px 20px !important;font-size:.95rem !important} /* Add-on / product option fields more compact */ .single-product .product-addon input.input-text, .single-product .product-addon select, .single-product .product-addon textarea, .single-product .wc-pao-addon input, .single-product .wc-pao-addon select, .single-product .olbb-field input, .single-product .olbb-field select{padding:11px 13px !important;font-size:.88rem !important} .olv-trust-badges .olv-badge{justify-content:flex-start} } /* ── RESPONSIVE ── */ @media(max-width:1200px){ .luvbloom-products{grid-template-columns:repeat(3,1fr)} .woocommerce ul.products{grid-template-columns:repeat(3,1fr)} .footer-grid{grid-template-columns:1fr 1fr 1fr;gap:28px} .hero-content{padding:80px 40px} } @media(max-width:900px){ .category-grid{grid-template-columns:repeat(2,1fr)} .occasions-grid{grid-template-columns:repeat(2,1fr)} .luvbloom-products{grid-template-columns:repeat(2,minmax(0,1fr))} .woocommerce ul.products{grid-template-columns:repeat(2,minmax(0,1fr)) !important} .features-grid{grid-template-columns:repeat(2,1fr);gap:0} .feature-item{border-right:none;border-bottom:1px solid rgba(255,255,255,.2);padding:14px 20px} .delivery-info-grid{grid-template-columns:1fr 1fr;gap:24px} .footer-grid{grid-template-columns:1fr 1fr;gap:24px} .main-nav{display:none} .menu-toggle{display:flex} .hero-content{padding:80px 24px;max-width:100%} } @media(max-width:600px){ /* Smaller logo on phones */ .custom-logo{max-height:32px} .site-logo{font-size:1.2rem} /* Mobile header always solid so the logo is never hidden over the hero */ .site-header,.site-header.transparent{background:#fff !important;box-shadow:0 2px 12px rgba(0,0,0,.06) !important} .site-header.transparent .site-logo, .site-header.transparent .header-icons a{color:var(--dark) !important} .site-header.transparent .menu-toggle span{background:var(--dark) !important} .home .hero{margin-top:0;padding-top:0} /* Features strip — auto-sliding carousel (one feature at a time) */ .features-strip{padding:30px 0} .features-grid{grid-template-columns:1fr;gap:0} .feature-item{padding:14px 32px;gap:16px;border-right:none;justify-content:center;text-align:left} .feature-item h4{font-size:.98rem;margin:0 0 3px} .feature-item p{font-size:.8rem;line-height:1.45} /* When JS carousel is active: show one slide, hide the rest */ .features-strip.olv-carousel .features-grid{display:flex;align-items:center;justify-content:center;min-height:104px} .features-strip.olv-carousel .feature-item{display:none;border:none} .features-strip.olv-carousel .feature-item.olv-active{display:flex;animation:featFade .45s ease} @keyframes featFade{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}} .feature-dots{display:flex;justify-content:center;gap:9px;margin-top:8px} .feature-dot{width:8px;height:8px;border-radius:50%;background:rgba(255,255,255,.45);border:none;padding:0;cursor:pointer;transition:background .2s,transform .2s} .feature-dot.active{background:#fff;transform:scale(1.25)} } @media(max-width:600px){ .luvbloom-products{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px} .woocommerce ul.products{grid-template-columns:repeat(2,minmax(0,1fr)) !important;gap:12px} .section .container{max-width:100%;padding:0 12px} /* Product title: smaller font + 1 line on mobile */ .woocommerce ul.products li.product .woocommerce-loop-product__title, .luvbloom-product-name{font-size:.7rem !important;white-space:nowrap !important;overflow:hidden !important;text-overflow:ellipsis !important;max-width:100% !important} /* Trust badges: 1 per row on mobile, center aligned */ .olv-trust-badges .olv-badge{width:100%;justify-content:center;text-align:left} .olv-trust-badges{justify-content:center} .category-grid{grid-template-columns:repeat(2,1fr);gap:12px} .occasions-grid{grid-template-columns:1fr} .circle-cat-img{width:66px;height:66px} .circle-cat-item{min-width:74px} .circle-categories-track{padding:4px 16px 8px;gap:4px} /* Scroll hint — fade edges + bouncing chevron so users know it scrolls */ .circle-categories{position:relative} .circle-categories::before,.circle-categories::after{content:"";position:absolute;top:0;bottom:0;width:42px;pointer-events:none;z-index:3} .circle-categories::before{left:0;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%23d4607a' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m15 18-6-6 6-6'/%3E%3C/svg%3E") no-repeat left 8px center,linear-gradient(to right,var(--cream) 55%,rgba(255,248,244,0));animation:scrollHintL 1.5s ease-in-out infinite} .circle-categories::after{right:0;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%23d4607a' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m9 18 6-6-6-6'/%3E%3C/svg%3E") no-repeat right 8px center,linear-gradient(to left,var(--cream) 55%,rgba(255,248,244,0));animation:scrollHintR 1.5s ease-in-out infinite} @keyframes scrollHintR{0%,100%{background-position:right 10px center,left center}50%{background-position:right 4px center,left center}} @keyframes scrollHintL{0%,100%{background-position:left 10px center,right center}50%{background-position:left 4px center,right center}} .section{padding:40px 0} .tab-btn{font-size:.7rem;padding:7px 16px} .footer-grid{grid-template-columns:1fr 1fr;gap:26px 18px;padding:44px 0 32px} .footer-brand{grid-column:1 / -1} .footer-brand .footer-brand-about{max-width:100%} .footer-bottom{flex-direction:column;gap:10px;text-align:center;justify-content:center} .footer-pay{justify-content:center} .hero{min-height:72vh} .hero-content{padding:60px 20px} .delivery-info-grid{grid-template-columns:1fr;gap:20px} .promo-banner{padding:48px 20px} .header-inner{padding:0 16px} .container{padding:0 16px} } /* ═══════════════════════════════════════════════ MEGA MENU ═══════════════════════════════════════════════ */ /* Compact (1-2 col) menus: relative, so the panel drops directly UNDER the menu item. The full-height nav (above) means top:100% lands exactly at the header's bottom edge. */ .has-mega { position: relative !important; } /* Wide (3+ col) menus: static so the panel anchors to the header = full page width. */ .has-mega.mega-wide { position: static !important; } /* Compact menus: columns sit side by side with a fixed width. Without this the content-width panel collapses and flex-wrap stacks the columns. */ .has-mega:not(.mega-wide) .mega-cols { flex-wrap: nowrap !important; flex: 0 0 auto !important; } .has-mega:not(.mega-wide) .mega-col { width: 185px !important; min-width: 185px !important; flex: 0 0 185px !important; } /* Kill default WP dropdown inside has-mega */ .has-mega > .sub-menu { display: none !important; } /* Remove ALL arrow/chevron symbols from mega menu links. Target every possible rule including menu-item-has-children which has higher specificity. */ .has-mega > a::after, .main-nav ul li.has-mega > a::after, .main-nav ul li.has-mega.menu-item-has-children > a::after { content: none !important; display: none !important; width: 0 !important; height: 0 !important; border: none !important; background: none !important; } /* THE PANEL — drops below the nav item, only as wide as its content */ .mega-panel { position: absolute; left: 0; top: 100%; background: #fff; box-shadow: 0 8px 32px rgba(0,0,0,.12); z-index: 9999; white-space: nowrap; } /* Inner flex row — no centring needed since panel is content-width */ .mega-panel-inner { padding: 24px 28px; display: flex !important; align-items: flex-start; gap: 32px; white-space: normal; } /* ── Columns ── */ .mega-cols { display: flex !important; gap: 36px; flex: 1; flex-wrap: wrap; align-items: flex-start; } .mega-col { min-width: 130px; flex: 1; display: block; } .mega-col h5 { display: block !important; font-family: var(--font-body) !important; font-size: .68rem !important; font-weight: 700 !important; letter-spacing: .13em !important; text-transform: uppercase !important; color: var(--primary) !important; margin: 0 0 12px !important; padding-bottom: 8px !important; border-bottom: 1px solid var(--border) !important; line-height: 1.4 !important; } .mega-col ul { list-style: none !important; padding: 0 !important; margin: 0 !important; display: block !important; } .mega-col ul li { display: block !important; width: 100% !important; padding: 0 !important; } .mega-col ul li a { display: block !important; padding: 5px 0 !important; font-size: .82rem !important; font-weight: 400 !important; color: var(--dark) !important; text-transform: none !important; letter-spacing: 0 !important; white-space: normal !important; background: transparent !important; transition: color .15s, padding-left .15s; } .mega-col ul li a:hover { color: var(--primary) !important; padding-left: 5px !important; background: transparent !important; } /* Kill the nav underline animation inside mega cols */ .mega-col ul li a::after { display: none !important; } /* ── Featured images ── */ .mega-images { display: flex !important; gap: 14px; flex-shrink: 0; align-items: flex-start; } .mega-img-card { width: 148px; display: block; text-decoration: none; } .mega-img-thumb { width: 148px; height: 192px; border-radius: 14px; overflow: hidden; background: var(--cream); transition: box-shadow .25s; } .mega-img-card:hover .mega-img-thumb { box-shadow: 0 8px 24px rgba(232,137,154,.35); } .mega-img-thumb img { width: 100% !important; height: 100% !important; max-width: none !important; object-fit: cover; transition: transform .35s ease; display: block; } .mega-img-card:hover .mega-img-thumb img { transform: scale(1.06); } .mega-img-placeholder { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; font-size: 2.8rem; background: var(--blush-deep); } .mega-img-card span { display: block !important; font-size: .76rem !important; font-weight: 600 !important; color: var(--dark) !important; text-transform: none !important; letter-spacing: 0 !important; margin-top: 9px; text-align: center; line-height: 1.3; } .mega-img-card small { display: block !important; font-size: .68rem !important; color: var(--mid) !important; text-align: center; margin-top: 2px; } /* Transparent header — panel always white */ #siteHeader.transparent .mega-panel, .site-header.transparent .mega-panel { background: #fff !important; box-shadow: 0 16px 48px rgba(0,0,0,.13) !important; } #siteHeader.transparent .mega-col ul li a, .site-header.transparent .mega-col ul li a { color: var(--dark) !important; } #siteHeader.transparent .mega-col h5, .site-header.transparent .mega-col h5 { color: var(--primary) !important; } /* ── Mobile: hide mega panels (off-canvas handles nav) ── */ @media(max-width:900px){ .mega-panel { display: none !important; } .has-mega > a::after { display: none !important; } } /* ════════════════════════════════════════════════════════════ CART DRAWER ════════════════════════════════════════════════════════════ */ /* Overlay backdrop — above the WhatsApp float */ /* Portal: a fixed, viewport-sized, CLIPPING container. Because the closed drawer is parked off-screen (translateX(100%)), a plain position:fixed drawer escapes body's overflow-x:clip and widens the page on iOS (the page pans right / shows empty space). Putting the drawer+overlay inside this fixed inset:0 overflow:hidden portal — and making them ABSOLUTE — means the off-screen drawer is clipped and can NEVER widen the document. */ /* transform:translateZ(0) makes the portal the containing block for its fixed-position children AND (with overflow:hidden) clips them — so the off-screen drawer can't widen the document, even if the portal HTML is cached/missing the panels still work as plain fixed elements. */ .olv-cart-portal{position:fixed;inset:0;overflow:hidden;pointer-events:none;z-index:2147483647;transform:translateZ(0)} .olv-cart-overlay{position:fixed;inset:0;background:rgba(0,0,0,.45);z-index:1;opacity:0;pointer-events:none;transition:opacity .3s ease} .olv-cart-overlay.olv-cd-open{opacity:1;pointer-events:all} /* Drawer panel — sits in front of the WhatsApp floating icon AND the mobile menu */ .olv-cart-drawer{position:fixed;top:0;right:0;bottom:0;width:420px;max-width:100vw;background:#fff;z-index:2;display:flex;flex-direction:column;box-shadow:-8px 0 40px rgba(0,0,0,.15);transform:translateX(115%);transition:transform .38s cubic-bezier(.4,0,.2,1);pointer-events:auto} /* Hide common WhatsApp floating buttons while the cart drawer is open */ body.olv-cd-lock .joinchat, body.olv-cd-lock .ht-ctc, body.olv-cd-lock .ht_ctc_chat_box, body.olv-cd-lock .click-to-chat, body.olv-cd-lock #ht-ctc-chat, body.olv-cd-lock .wp-whatsapp, body.olv-cd-lock [class*="whatsapp-chat"], body.olv-cd-lock [id*="whatsapp-chat"]{display:none !important;visibility:hidden !important} .olv-cart-drawer.olv-cd-open{transform:translateX(0)} body.olv-cd-lock{overflow:hidden} /* Header */ .olv-cd-header{position:relative;display:flex;align-items:center;justify-content:flex-start;gap:14px;padding:20px 60px 20px 24px;border-bottom:1px solid var(--border);flex-shrink:0} /* Close button — clean white circle, top-RIGHT */ .olv-cd-close{position:absolute;top:50%;right:18px;transform:translateY(-50%);order:0; width:38px;height:38px;display:flex;align-items:center;justify-content:center; background:#fff;border:1px solid #ececec;border-radius:50%;box-shadow:0 2px 10px rgba(0,0,0,.08); color:#1d1d1f;font-size:1.05rem;line-height:1;padding:0;cursor:pointer;transition:background .18s,box-shadow .18s,transform .18s} .olv-cd-close:hover{background:#f6f3f4;box-shadow:0 4px 14px rgba(0,0,0,.12);transform:translateY(-50%) scale(1.05);color:#1d1d1f} .olv-cd-title{display:flex;align-items:center;gap:10px;font-family:var(--font-body);font-size:1rem;font-weight:700;color:var(--color-heading)} .olv-cd-title svg{color:var(--primary);flex-shrink:0} .olv-cd-count{display:inline-flex;align-items:center;justify-content:center;min-width:22px;height:22px;background:var(--primary);color:#fff;border-radius:100px;font-size:.7rem;font-weight:700;padding:0 6px;line-height:1} .olv-cd-close{background:none;border:none;cursor:pointer;font-size:1.2rem;color:var(--mid);padding:4px 6px;border-radius:6px;transition:color .2s,background .2s;line-height:1} .olv-cd-close:hover{color:var(--primary);background:var(--blush)} /* Body (scrollable) */ .olv-cd-body{flex:1;overflow-y:auto;padding:16px 24px} .olv-cd-body::-webkit-scrollbar{width:4px} .olv-cd-body::-webkit-scrollbar-track{background:transparent} .olv-cd-body::-webkit-scrollbar-thumb{background:var(--border);border-radius:4px} /* Loading spinner */ .olv-cd-spinner-wrap{display:flex;align-items:center;justify-content:center;min-height:100%;padding:0} .olv-cd-spinner{display:inline-block;width:32px;height:32px;border:3px solid var(--border);border-top-color:var(--primary);border-radius:50%;animation:olvSpin .7s linear infinite} @keyframes olvSpin{to{transform:rotate(360deg)}} /* Empty state */ .olv-cd-empty{display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;min-height:100%;gap:14px;color:var(--mid);font-size:1rem} .olv-cd-empty-icon{font-size:2.4rem;line-height:1} .olv-cd-empty-text{font-family:var(--font-body);color:#8a8289} .olv-cd-shop-btn{display:inline-block;margin-top:6px;background:var(--primary);color:#fff;text-decoration:none;padding:13px 30px;border-radius:50px;font-size:.92rem;font-weight:600;font-family:var(--font-body);transition:background .2s} .olv-cd-shop-btn:hover{background:var(--primary-dark);color:#fff} /* Cart item */ .olv-cd-item{display:flex;align-items:flex-start;gap:14px;padding:14px 0;border-bottom:1px solid var(--border);position:relative;transition:background .3s} .olv-cd-item:last-child{border-bottom:none} .olv-cd-item-new{animation:olvItemPop .5s ease forwards} @keyframes olvItemPop{ 0%{background:transparent;transform:translateX(18px);opacity:0} 40%{background:var(--blush);transform:translateX(0);opacity:1} 100%{background:transparent;transform:translateX(0);opacity:1} } .olv-cd-img-wrap{flex-shrink:0;width:76px;height:76px;border-radius:10px;overflow:hidden;background:var(--cream);display:block} .olv-cd-img-wrap img,.olv-cd-thumb{width:100%;height:100%;object-fit:cover;display:block} .olv-cd-info{flex:1;min-width:0} .olv-cd-name{display:block;font-family:var(--font-body);font-size:.88rem;font-weight:600;color:var(--color-heading);line-height:1.4;margin-bottom:4px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .olv-cd-name:hover{color:var(--primary)} .olv-cd-qty{font-size:.78rem;color:var(--mid);margin-bottom:4px} .olv-cd-price{font-size:.9rem;font-weight:700;color:var(--primary)} .olv-cd-remove{flex-shrink:0;color:var(--mid);font-size:.85rem;text-decoration:none;padding:2px 4px;border-radius:4px;transition:color .2s;line-height:1;margin-top:2px} .olv-cd-remove:hover{color:#e53935} .olv-cd-remove.is-removing{pointer-events:none;opacity:.5} .olv-cd-item.olv-cd-item-removing{opacity:.35;transition:opacity .25s ease} /* Footer */ .olv-cd-footer{flex-shrink:0;padding:20px 24px;border-top:1px solid var(--border);background:#fafafa} .olv-cd-subtotal{display:flex;justify-content:space-between;align-items:center;font-family:var(--font-body);font-size:1rem;color:var(--color-heading);margin-bottom:16px} .olv-cd-subtotal strong{font-size:1.15rem;color:var(--primary)} .olv-cd-actions{display:grid;grid-template-columns:1fr 1fr;gap:10px} .olv-cd-actions.olv-cd-actions-single{grid-template-columns:1fr} .olv-cd-btn{display:block;padding:13px 10px;text-align:center;font-family:var(--font-body);font-size:.82rem;font-weight:600;letter-spacing:.04em;border-radius:var(--btn-radius);text-decoration:none;transition:all .22s ease} .olv-cd-btn-out{border:1.5px solid var(--primary);color:var(--primary);background:transparent} .olv-cd-btn-out:hover{background:var(--blush)} .olv-cd-btn-fill{background:var(--primary);color:#fff;border:1.5px solid var(--primary)} .olv-cd-btn-fill:hover{background:var(--primary-dark);border-color:var(--primary-dark)} /* Responsive */ @media(max-width:768px){ /* Cart panel = SAME width as the mobile menu (NOT full screen) so the dark overlay shows on the left → people clearly see it's a panel and can tap outside (or the ✕) to close it. */ .olv-cart-drawer{width:min(85vw,340px) !important;max-width:85vw !important} .olv-cd-header{padding:16px 18px} .olv-cd-body{padding:12px 18px} .olv-cd-footer{padding:16px 18px} .olv-cd-footer .olv-cd-subtotal{font-size:.95rem} } /* ═══════════════════════════════════════════ PRODUCT PAGE ACCORDION (left col, below product images) ═══════════════════════════════════════════ */ .olv-product-accordion{ margin:28px 0 0; border-top:1px solid #e8e8e8; } .olv-acc-item{border-bottom:1px solid #e8e8e8} .olv-acc-trigger{ display:flex;align-items:center;width:100%; padding:20px 0;background:none;border:none; cursor:pointer;text-align:left;gap:14px; font-family:var(--font-body); } .olv-acc-trigger:focus{outline:none} .olv-acc-icon{ display:flex;align-items:center;justify-content:center; width:34px;height:34px;flex-shrink:0;color:#666; } .olv-acc-title{ flex:1;font-size:.95rem;font-weight:600; color:var(--dark);letter-spacing:.01em; } .olv-acc-plus{ font-size:1.5rem;font-weight:300;color:#999; line-height:1;transition:transform .3s ease; } .olv-acc-item.olv-acc-open .olv-acc-plus{transform:rotate(45deg)} .olv-acc-body{max-height:0;overflow:hidden;transition:max-height .4s ease} .olv-acc-item.olv-acc-open .olv-acc-body{max-height:2000px} .olv-acc-body-inner{ padding:4px 0 24px 48px; font-size:.88rem;color:#555;line-height:1.8; } .olv-acc-body-inner p{margin:0 0 10px} .olv-acc-body-inner ol,.olv-acc-body-inner ul{padding-left:18px;margin:0 0 10px} .olv-acc-body-inner li{margin-bottom:6px} .olv-acc-body-inner strong{color:var(--dark)} /* product attributes table inside accordion */ .olv-acc-body-inner table.shop_attributes{width:100%;border-collapse:collapse} .olv-acc-body-inner table.shop_attributes th{ width:180px;padding:10px 10px;text-align:left; font-size:.82rem;font-weight:600;color:var(--dark); border-bottom:1px solid #f0f0f0;vertical-align:middle; } .olv-acc-body-inner table.shop_attributes td{ padding:10px 10px;font-size:.82rem;color:#555; border-bottom:1px solid #f0f0f0;vertical-align:middle;font-style:normal; } .olv-acc-body-inner table.shop_attributes td p{margin:0;font-style:normal} /* hide default WC product tabs */ .woocommerce-tabs{display:none !important} @media(max-width:768px){ .olv-acc-trigger{padding:16px 0} .olv-acc-title{font-size:.88rem} .olv-acc-body-inner{padding:4px 0 18px 34px;font-size:.83rem} } /* ═══════════════════════════════════════════ FILE UPLOAD — Grey drag-drop zone (covers WC Product Add-Ons, OLBB, all plugins) ═══════════════════════════════════════════ */ .wc-pao-addon-upload-container, .olbb-upload-zone, .olbb-upload-wrap, .olbb-file-zone, [class*="upload-zone"], [class*="upload-drop"], [class*="dropzone"]{ background:#fff !important; border:2px dashed #d6d6d6 !important; border-radius:16px !important; } .wc-pao-addon-upload-container{ position:relative;display:block; border:2px dashed #d6d6d6 !important; border-radius:16px !important; background:#f5f5f5 !important; padding:36px 20px !important; text-align:center;cursor:pointer; transition:background .2s,border-color .2s; min-height:120px; } .wc-pao-addon-upload-container:hover, .olbb-upload-zone:hover, [class*="upload-zone"]:hover, [class*="upload-drop"]:hover{ background:#fff !important; border-color:#aaa !important; box-shadow:0 4px 18px rgba(0,0,0,.10) !important; } /* Hide original "Add files" button text */ .wc-pao-addon-upload-container .fileinput-button > span.olv-upload-hide{display:none} /* Span injected by JS */ .wc-pao-addon-upload-container .fileinput-button{ position:static;display:flex;flex-direction:column; align-items:center;gap:8px; } /* Make actual file input cover whole zone */ .wc-pao-addon-upload-container .fileinput-button input[type="file"]{ position:absolute;inset:0;opacity:0; cursor:pointer;width:100%;height:100%;z-index:2; } .olv-upload-icon{ display:flex;align-items:center;justify-content:center; width:52px;height:52px;border-radius:50%; background:rgba(0,0,0,.07);margin:0 auto 4px; } .olv-upload-icon svg{color:#888} .olv-upload-label{ font-size:.88rem;font-weight:600;color:#555; font-family:var(--font-body); } .olv-upload-hint{ font-size:.75rem;color:#999; font-family:var(--font-body); } /* Show uploaded file list cleanly */ .wc-pao-addon-upload-container .files{ list-style:none;padding:8px 0 0;margin:0; font-size:.78rem;color:var(--dark); } .wc-pao-addon-upload-container .files li{ display:flex;align-items:center;gap:6px; padding:4px 6px;border-radius:8px;background:rgba(205,88,116,.06); margin-top:4px; } /* ── ABOUT US PAGE ── */ .about-hero{background:linear-gradient(135deg,var(--blush) 0%,var(--primary-light,#ffe6ee) 100%);text-align:center;padding:90px 24px 70px} .about-hero .section-label{color:var(--primary);font-weight:700;letter-spacing:.12em;text-transform:uppercase;font-size:.78rem} .about-hero h1{font-family:var(--font-heading);font-size:2.6rem;color:#1d1d1f;margin:10px 0 12px} .about-hero p{color:#7a7480;font-size:1.05rem;font-family:var(--font-body);max-width:620px;margin:0 auto} .about-main{padding-top:70px;padding-bottom:80px} .about-grid{display:grid;grid-template-columns:1.4fr 1.1fr 1fr;gap:48px;align-items:start} .about-h{font-family:var(--font-heading);font-size:1.45rem;color:#1d1d1f;margin:0 0 18px;position:relative;padding-bottom:12px} .about-h::after{content:"";position:absolute;left:0;bottom:0;width:46px;height:3px;background:var(--primary);border-radius:3px} .about-col p{font-family:var(--font-body);color:#5f5862;line-height:1.8;font-size:.95rem;margin:0 0 14px} .about-pvm{margin-top:24px;display:flex;flex-direction:column;gap:16px} .about-pvm-item{background:#faf7f8;border-radius:16px;padding:18px 20px} .about-pvm-item h4{font-family:var(--font-body);font-weight:700;color:#1d1d1f;margin:0 0 6px;font-size:1rem} .about-pvm-item p{margin:0;font-size:.9rem} .about-team-img{width:100%;border-radius:18px;display:block;margin:0 0 16px;box-shadow:0 14px 40px rgba(0,0,0,.12)} .about-team-placeholder{width:100%;aspect-ratio:4/3;border-radius:18px;background:var(--blush);display:flex;flex-direction:column;align-items:center;justify-content:center;font-size:3rem;color:var(--primary);margin:0 0 16px} .about-team-placeholder span{font-size:.85rem;color:#b0a8ac;margin-top:8px} .about-team-cap{color:#1d1d1f !important} .about-side{display:flex;flex-direction:column;gap:22px} .about-box{border:1px solid var(--border,#eee);border-radius:18px;padding:24px 24px;background:#fff} .about-box h3{font-family:var(--font-heading);font-size:1.1rem;color:#1d1d1f;margin:0 0 10px} .about-box p{margin:0;font-size:.92rem;color:#5f5862;line-height:1.75} .about-box-accent{background:linear-gradient(135deg,var(--blush),#fff);border-color:transparent} .about-box a{color:var(--primary);font-weight:600;text-decoration:none} .about-box a:hover{text-decoration:underline} .about-company-info{text-align:center;margin-top:60px;padding-top:36px;border-top:1px solid var(--border,#eee)} .about-company-info p{font-family:var(--font-body);color:#7a7480;margin:0 0 4px;font-size:.92rem;line-height:1.7} @media(max-width:980px){ .about-grid{grid-template-columns:1fr;gap:46px} .about-hero h1{font-size:2rem} } /* ── CONTACT PAGE ── */ .contact-main{padding-top:64px;padding-bottom:80px} .contact-cards{display:grid;grid-template-columns:1fr 1fr;gap:30px;margin-bottom:56px} .contact-card{background:#fff;border:1px solid var(--border,#eee);border-radius:22px;padding:34px;box-shadow:0 14px 40px rgba(0,0,0,.05);text-align:center;display:flex;flex-direction:column;align-items:center} .contact-card h3{font-family:var(--font-heading);font-size:1.35rem;color:#1d1d1f;margin:6px 0 8px} .contact-card p{font-family:var(--font-body);color:#5f5862;font-size:.92rem;line-height:1.7;margin:0 0 18px} .contact-qr{background:#fff;border:1px solid var(--border,#eee);border-radius:18px;padding:14px;display:inline-block;margin-bottom:18px} .contact-qr img{display:block;width:200px;height:200px} .contact-ic{font-size:2.6rem;margin-bottom:8px} .contact-btn{display:inline-block;background:var(--primary);color:#fff;text-decoration:none;padding:13px 28px;border-radius:50px;font-weight:600;font-family:var(--font-body);font-size:.92rem;transition:background .2s} .contact-btn:hover{background:var(--primary-dark);color:#fff} .contact-card .contact-line{display:flex;flex-direction:column;gap:2px;margin:0 0 14px;width:100%} .contact-card .contact-line span{font-size:.74rem;text-transform:uppercase;letter-spacing:.08em;color:#b0a8ac;font-weight:600} .contact-card .contact-line a,.contact-card .contact-line strong{font-size:1.05rem;color:#1d1d1f;text-decoration:none;font-weight:600} .contact-card .contact-line a:hover{color:var(--primary)} .contact-info-grid{display:grid;grid-template-columns:1fr 1fr;gap:26px} .contact-info-box{background:#faf7f8;border-radius:18px;padding:28px 30px} .contact-info-box h3{font-family:var(--font-heading);font-size:1.2rem;color:#1d1d1f;margin:0 0 12px} .contact-info-box p{font-family:var(--font-body);color:#5f5862;line-height:1.8;font-size:.93rem;margin:0} @media(max-width:768px){ .contact-cards,.contact-info-grid{grid-template-columns:1fr} } /* ── LEGAL PAGES (Privacy, Terms, etc.) ── */ .legal-page{padding-top:60px;padding-bottom:80px} .legal-page .container{max-width:840px} .legal-page h2{font-family:var(--font-heading);font-size:1.5rem;color:#1d1d1f;margin:38px 0 12px;padding-bottom:10px;border-bottom:1px solid var(--border,#eee)} .legal-page p{font-family:var(--font-body);color:#5f5862;line-height:1.85;font-size:.97rem;margin:0 0 16px} .legal-page a{color:var(--primary);text-decoration:none} .legal-page a:hover{text-decoration:underline} .legal-intro{font-size:1.05rem !important;color:#3f3a44 !important;background:#faf7f8;border-radius:14px;padding:20px 24px} .legal-company{margin-top:26px;color:#1d1d1f !important} .legal-list{margin:0 0 16px;padding-left:22px;display:flex;flex-direction:column;gap:10px} .legal-list li{font-family:var(--font-body);color:#5f5862;line-height:1.8;font-size:.95rem} /* ── FAQ PAGE ── */ .faq-page{padding-top:56px;padding-bottom:80px} .faq-page .container{max-width:840px} .faq-group{margin-bottom:44px} .faq-group-title{font-family:var(--font-heading);font-size:1.4rem;color:var(--primary);margin:0 0 16px} .faq-item{border:1px solid var(--border,#eee);border-radius:14px;margin-bottom:12px;background:#fff;overflow:hidden;transition:box-shadow .2s} .faq-item[open]{box-shadow:0 10px 30px rgba(0,0,0,.06)} .faq-item summary{list-style:none;cursor:pointer;padding:18px 22px;font-family:var(--font-body);font-weight:600;font-size:1rem;color:#1d1d1f;display:flex;align-items:center;justify-content:space-between;gap:16px} .faq-item summary::-webkit-details-marker{display:none} .faq-item summary:hover{color:var(--primary)} .faq-plus{flex-shrink:0;font-size:1.4rem;color:var(--primary);line-height:1;transition:transform .25s} .faq-item[open] .faq-plus{transform:rotate(45deg)} .faq-answer{padding:0 22px 20px} .faq-answer p{font-family:var(--font-body);color:#5f5862;line-height:1.8;font-size:.95rem;margin:0} .faq-cta{text-align:center;background:linear-gradient(135deg,var(--blush),#fff);border-radius:22px;padding:40px 24px;margin-top:30px} .faq-cta h3{font-family:var(--font-heading);font-size:1.4rem;color:#1d1d1f;margin:0 0 6px} .faq-cta p{font-family:var(--font-body);color:#7a7480;margin:0 0 20px} .olv-acc-details{margin-top:14px;padding-top:14px;border-top:1px dashed var(--border,#eee)} .olv-acc-details p{line-height:1.9} /* ── GOOGLE REVIEWS ── */ .gr-section{padding:var(--section-pad) 0} .gr-section.gr-has-bg{position:relative;background-size:cover;background-position:center;background-attachment:fixed} .gr-section.gr-has-bg::before{content:"";position:absolute;inset:0;background:rgba(255,255,255,var(--gr-ov,.82));backdrop-filter:saturate(110%);pointer-events:none} .gr-section.gr-has-bg .container{position:relative;z-index:1} .gr-section.gr-has-bg .gr-card{background:rgba(255,255,255,.96);box-shadow:0 12px 34px rgba(0,0,0,.14);backdrop-filter:blur(4px)} @media(max-width:768px){.gr-section.gr-has-bg{background-attachment:scroll}} .gr-head{text-align:center;margin-bottom:34px} .gr-logo{font-family:Arial,Helvetica,sans-serif;font-size:2.1rem;font-weight:700;letter-spacing:-1px} .gr-stars-lg{margin:8px 0 4px} .gr-star{color:#dcd7da;font-size:1.15rem;letter-spacing:2px} .gr-star.on{color:#fbbc05} .gr-stars-lg .gr-star{font-size:1.5rem} .gr-summary{font-family:var(--font-body);color:#5f5862;font-size:.95rem;margin:0} .gr-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:16px} .gr-card{background:#f6f3f4;border-radius:14px;padding:20px 18px;display:flex;flex-direction:column;gap:10px} .gr-card-top{display:flex;align-items:center;gap:10px} .gr-avatar{width:38px;height:38px;border-radius:50%;object-fit:cover;flex-shrink:0} .gr-avatar-ph{background:var(--primary);color:#fff;display:flex;align-items:center;justify-content:center;font-weight:700;font-family:var(--font-body)} .gr-name{font-family:var(--font-body);font-weight:700;color:#1d1d1f;font-size:.9rem;line-height:1.2} .gr-when{font-family:var(--font-body);color:#9a949f;font-size:.76rem} .gr-stars-sm .gr-star{font-size:.95rem;letter-spacing:1px} .gr-text{font-family:var(--font-body);color:#5f5862;font-size:.85rem;line-height:1.6;margin:0} .gr-more{text-align:center;margin-top:40px} .gr-more .olv-view-more{background:#fff;box-shadow:0 8px 26px rgba(0,0,0,.16);border:1px solid rgba(0,0,0,.05)} .gr-more .olv-view-more:hover{box-shadow:0 12px 32px rgba(0,0,0,.22)} @media(max-width:1100px) and (min-width:769px){.gr-grid{grid-template-columns:repeat(2,1fr)}} @media(max-width:768px){ .gr-grid{display:flex;grid-template-columns:none;overflow-x:auto;scroll-snap-type:x mandatory;gap:0;-webkit-overflow-scrolling:touch;scrollbar-width:none;padding-bottom:6px} .gr-grid::-webkit-scrollbar{display:none} .gr-card{flex:0 0 100%;min-width:100%;scroll-snap-align:center;box-sizing:border-box} } /* Hide the secondary "Your order" heading (premium "Order Summary" header is at the top) */ .woocommerce-checkout #order_review_heading{display:none !important} /* ── CHECKOUT — order/delivery LEFT, payment RIGHT (wrapped row) ── */ @media(min-width:1000px){ .olv-pay-row{display:grid;grid-template-columns:1.15fr .85fr;gap:42px;align-items:start} .olv-pay-row > #order_review{min-width:0;margin:0} .olv-pay-row > #payment{min-width:0;position:sticky;top:90px;margin:0} } /* Delivery / Pick-Up block — full-width cell (colspan) inside the order card */ .woocommerce-checkout-review-order-table td.olv-shipping-cell{ display:table-cell;width:100%;padding:18px !important;text-align:left !important; background:#fff;border:1px solid #efe9eb;border-radius:0px; } .woocommerce-checkout #shipping_method, .woocommerce-checkout #shipping_method li{text-align:left !important} .olv-shipping-title{ display:block;text-align:left;margin-bottom:12px; font-family:var(--font-heading);font-weight:600;font-size:1.05rem;color:#1d1d1f; } /* Delivery time options span the full width of the block */ .woocommerce-checkout ul#shipping_method, .woocommerce-checkout .woocommerce-shipping-methods{width:100% !important;max-width:100% !important;box-sizing:border-box} .woocommerce-checkout ul#shipping_method li, .woocommerce-checkout .woocommerce-shipping-methods li{width:100% !important;max-width:100% !important;box-sizing:border-box} /* Remove the extra person icon on delivery options (keep the carrier/truck logo) */ .woocommerce-checkout ul#shipping_method li svg, .woocommerce-checkout .woocommerce-shipping-methods li svg{display:none !important} /* Carrier/logo truck icon — 30×30, sits ON TOP of the text */ .woocommerce-checkout #shipping_method img, .woocommerce-checkout .woocommerce-shipping-methods img, .woocommerce-checkout .olv-shipping-cell img, .woocommerce-checkout #shipping_method li label img{ width:30px !important;height:30px !important;min-width:0 !important;min-height:0 !important;max-width:30px !important;max-height:30px !important; object-fit:contain !important;vertical-align:middle;margin:0 !important;flex:0 0 auto; position:absolute !important;left:0 !important;top:1px !important; } /* Delivery option cards — clean 2-column grid: [radio] [content] */ .woocommerce-checkout #shipping_method li{ display:grid !important;grid-template-columns:28px 1fr !important; align-items:center !important;column-gap:14px !important; padding:18px !important; } .woocommerce-checkout #shipping_method li > input[type=radio]{ order:0;grid-column:1;justify-self:center;align-self:center; flex:0 0 auto !important;margin:0 !important; } .woocommerce-checkout #shipping_method li > label{ grid-column:2;min-width:0;width:100%;margin:0 !important;padding:0 !important; display:block !important;text-align:left !important; font-weight:600 !important;color:#1d1d1f !important;line-height:1.45; } /* Clean ICON-LEFT / TEXT-RIGHT layout (all widths). The LABEL is padded and the icon is absolutely placed on its left — works regardless of the plugin's inner markup, and the title/description never overlap the icon. */ /* Icon in a FIXED LEFT COLUMN; title + description both indented to the SAME position so every line (incl. wrapped lines) aligns. */ .woocommerce-checkout #shipping_method li > label{position:relative !important;padding-left:40px !important;display:block !important;min-height:30px} .woocommerce-checkout #shipping_method li .olsm-method{position:static !important;display:block !important;width:100% !important;padding:0 !important} .woocommerce-checkout #shipping_method li .olsm-head{display:block !important;gap:0 !important} .woocommerce-checkout #shipping_method li .olsm-title, .woocommerce-checkout #shipping_method li > label{font-weight:600 !important;color:#1d1d1f !important;line-height:1.3 !important;white-space:normal !important;font-size:.78rem !important} .woocommerce-checkout #shipping_method li .olsm-logo, .woocommerce-checkout #shipping_method li > label img, .woocommerce-checkout #shipping_method li > label svg{ position:absolute !important;left:0 !important;top:1px !important; width:30px !important;height:30px !important;max-width:30px !important;max-height:30px !important; object-fit:contain !important;margin:0 !important;display:block !important; } .woocommerce-checkout #shipping_method li .olsm-carrier-desc{ display:block !important;margin:4px 0 0 0 !important;padding:0 !important; font-weight:400 !important;color:#9a949f !important;font-size:.76rem !important;line-height:1.45 !important;white-space:normal !important;overflow-wrap:anywhere !important; } /* a touch of breathing room after the product subtotal row */ .woocommerce-checkout-review-order-table tr.cart-subtotal td, .woocommerce-checkout-review-order-table tr.cart-subtotal th{padding-bottom:16px !important} /* ── CHECKOUT — premium "Order Summary" header (built by JS) ── */ .olv-checkout-title{display:block;margin:0 0 10px} .olv-checkout-title .olv-ct-eyebrow{display:block;color:var(--primary);font-family:var(--font-body);font-size:.78rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;margin-bottom:12px} .olv-checkout-title .olv-ct-main{display:block;font-family:var(--font-heading);font-size:2.8rem;line-height:1.08;color:#1d1d1f;font-weight:600} .olv-checkout-title .olv-ct-sub{display:block;font-family:var(--font-body);font-size:1.02rem;color:#7a7480;font-weight:400;margin-top:12px} /* ── CHECKOUT — delivery/pickup (left) + coupon (right) row ── */ .olv-ckrow{margin:0 0 26px} @media(min-width:768px){ .olv-ckrow{display:grid;grid-template-columns:1fr 1fr;gap:24px;align-items:stretch} .olv-ckrow-left,.olv-ckrow-right{min-width:0} .olv-ckrow .olfc-dp-selector{margin:0 !important;box-sizing:border-box} .olv-ckrow form.checkout_coupon{margin:0 !important;box-sizing:border-box;height:100%;display:flex !important;flex-direction:column;justify-content:center} /* pick-up info stays under the left (delivery) column width */ .woocommerce-checkout .olfc-pickup-info{max-width:calc(50% - 12px)} } /* Remove the coupon ticket icon */ .olv-coupon-ic{display:none !important} .olv-coupon-fields{text-align:left;margin-top:4px} @media(max-width:767px){.olv-ckrow-right{margin-top:16px}} /* ── CHECKOUT — coupon always expanded + premium panels ── */ .woocommerce-checkout .woocommerce-form-coupon-toggle{display:none !important} .woocommerce-checkout form.checkout_coupon{ display:block !important;border:1px solid #efe9eb !important;border-radius:16px !important; background:#fff !important;padding:26px !important;margin:0 0 24px !important;box-shadow:0 6px 22px rgba(0,0,0,.04) !important; } .woocommerce-checkout form.checkout_coupon p:first-child{margin-top:0 !important;color:#7a7480;font-size:.85rem;font-family:var(--font-body)} .woocommerce-checkout form.checkout_coupon .button{ background:var(--primary) !important;color:#fff !important;border:none !important;border-radius:14px !important; padding:12px 26px !important;font-weight:600 !important;font-family:var(--font-body) !important;box-shadow:none !important;transition:background .2s; } .woocommerce-checkout form.checkout_coupon .button:hover{background:var(--primary-dark) !important} .woocommerce-checkout form.checkout_coupon input#coupon_code{border:1.5px solid #e3dde0 !important;border-radius:12px !important;padding:12px 16px !important} /* Delivery / Pick-up selector — premium card */ .woocommerce-checkout .olfc-dp-selector{ border:1px solid #efe9eb !important;background:#fff !important;border-radius:16px !important; padding:26px !important;box-shadow:0 6px 22px rgba(0,0,0,.04) !important; } .woocommerce-checkout .olfc-dp-option{ border:1.5px solid #e6e1e3 !important;border-radius:12px !important;background:#fff !important;transition:border-color .18s,background .18s,box-shadow .18s; display:flex !important;align-items:center;gap:10px; } .woocommerce-checkout .olfc-dp-option input[type=radio]{order:-1;margin:0 !important;flex-shrink:0;border:none !important;box-shadow:none !important;outline:none !important} .woocommerce-checkout .olfc-dp-option strong{margin:0 !important;order:0} .woocommerce-checkout .olfc-dp-option span{margin-left:0 !important;order:1} /* hide any leftover icon/wrapper so the radio always sits flush left */ .woocommerce-checkout .olfc-dp-option > *:not(input):not(strong):not(span){display:none !important} .woocommerce-checkout .olfc-dp-option:hover{border-color:#c9c3c6 !important} /* Section headings: same size + dark colour, no pink */ .woocommerce-checkout .olfc-dp-selector h3, .woocommerce-checkout .olfc-dp-selector h2{color:#1D1D1F !important;font-family:var(--font-heading) !important;font-size:1.18rem !important;font-weight:600 !important;line-height:1.3 !important} .olv-coupon-head strong{font-size:1.18rem !important;color:#1D1D1F !important} /* Required field marker — large & clearly visible */ .woocommerce-checkout label .required, .woocommerce-checkout abbr.required, .woocommerce-checkout .required{ color:#e2401c !important;font-size:1.45em !important;font-weight:800 !important; text-decoration:none !important;vertical-align:middle;margin-left:4px;border:none !important; } /* Consistent input/select/textarea height across the checkout (18px vertical padding) */ .woocommerce-checkout #customer_details input.input-text, .woocommerce-checkout #customer_details select, .woocommerce-checkout #customer_details .select2-selection, .woocommerce-checkout #oldd_delivery_notice_field textarea, .woocommerce-checkout #oldd_delivery_date, .woocommerce-checkout #oldd_delivery_date_field input, .woocommerce-checkout .oldd-delivery-section input[type=text]{ padding-top:18px !important;padding-bottom:18px !important;height:auto !important;line-height:1.3 !important;box-sizing:border-box; } /* Selects (e.g. State) match the input height */ .woocommerce-checkout #customer_details select, .woocommerce-checkout #customer_details .select2-selection{min-height:60px !important} .woocommerce-checkout #customer_details .select2-selection__rendered{line-height:24px !important} /* Sender + Recipient cards (match delivery card) */ .woocommerce-checkout .woocommerce-billing-fields, .woocommerce-checkout .woocommerce-shipping-fields{ background:#fff;border:1px solid #efe9eb;border-radius:16px;padding:26px;box-shadow:0 6px 22px rgba(0,0,0,.04);box-sizing:border-box;margin-bottom:20px; } /* More breathing room around the Delivery / Pick-Up Instructions title */ .woocommerce-checkout .oldd-cal-legend{margin:10px 0 24px !important} .woocommerce-checkout #oldd_delivery_notice_field{margin-top:26px !important} .woocommerce-checkout #oldd_delivery_notice_field > label{display:block;margin:0 0 12px !important;font-size:.95rem;color:#1d1d1f} /* Delivery / Pick-Up Date block — same white card as the address cards */ .woocommerce-checkout .oldd-delivery-section, .woocommerce-checkout .oldd-delivery-wrapper{ background:#fff !important;border:1px solid #efe9eb !important;border-radius:16px !important; padding:26px !important;box-shadow:0 6px 22px rgba(0,0,0,.04) !important;margin:24px 0 !important;box-sizing:border-box; } /* Remove the pink underline on the calendar heading (match the other card headings) */ .woocommerce-checkout .oldd-delivery-section h3{border-bottom:1px solid #efe9eb !important;color:#1D1D1F !important;padding-bottom:12px} /* Remove any icon prepended to the pick-up / delivery option */ .woocommerce-checkout .olfc-dp-option > svg, .woocommerce-checkout .olfc-dp-option > img, .woocommerce-checkout .olfc-dp-option > i, .woocommerce-checkout .olfc-dp-option > .dashicons, .woocommerce-checkout .olfc-dp-option::before{display:none !important} .woocommerce-checkout .olfc-dp-option:has(input:checked){border-color:#bdb6b9 !important;background:#f6f3f4 !important;box-shadow:none !important} /* Coupon panel header (ticket icon + promo text) */ .olv-coupon-head{display:block;margin:0 0 16px;text-align:left} .olv-coupon-ic{color:var(--primary);flex-shrink:0;line-height:0} .olv-coupon-head strong{display:block;font-family:var(--font-heading);font-size:1.18rem;color:#1d1d1f;line-height:1.2} .olv-coupon-head span{display:block;color:#9a949f;font-size:.85rem;font-family:var(--font-body);margin-top:3px} .woocommerce-checkout form.checkout_coupon > p:not(.form-row){display:none !important} .woocommerce-checkout form.checkout_coupon input#coupon_code::placeholder{color:#b0a8ac} /* Coupon field + button — same shape & height, left-aligned with heading */ .woocommerce-checkout form.checkout_coupon{text-align:left} .woocommerce-checkout form.checkout_coupon .olv-coupon-head{text-align:left} .woocommerce-checkout form.checkout_coupon .form-row{display:inline-block !important;width:auto !important;float:none !important;margin:0 6px !important;vertical-align:middle} .woocommerce-checkout form.checkout_coupon input#coupon_code{height:50px !important;border-radius:12px !important;width:260px !important;padding:0 16px !important;box-sizing:border-box;vertical-align:middle} .woocommerce-checkout form.checkout_coupon .button{height:50px !important;border-radius:12px !important;padding:0 30px !important;box-sizing:border-box;vertical-align:middle;line-height:1} /* Pick-Up information box — match theme (pink), tidy position */ .woocommerce-checkout .olfc-pickup-info{ background:#f6f3f4 !important;border:1px solid #e6e1e3 !important;border-left:4px solid #bdb6b9 !important; border-radius:14px !important;padding:18px 20px !important;margin:16px 0 28px !important;color:#5f5862 !important;clear:both; } /* Make sure the Sender/Recipient section drops cleanly below the pick-up box */ .woocommerce-checkout #customer_details{clear:both !important;display:flow-root} .woocommerce-checkout .olfc-pickup-info h2, .woocommerce-checkout .olfc-pickup-info h3, .woocommerce-checkout .olfc-pickup-info h4, .woocommerce-checkout .olfc-pickup-info strong{color:#1D1D1F !important;font-family:var(--font-heading)} /* All checkout buttons share the rounded-rectangle shape (like Add to Cart) */ .woocommerce-checkout button, .woocommerce-checkout .button, .woocommerce-checkout input[type="submit"]{border-radius:14px !important} /* ── CHECKOUT — Apple-style premium polish ── */ /* Coupon bar */ .woocommerce-checkout .woocommerce-form-coupon-toggle .woocommerce-info{ background:#faf7f8 !important;border:1px solid #efe9eb !important;border-left:3px solid var(--primary) !important; border-radius:12px !important;color:#5f5862 !important;font-family:var(--font-body);font-size:.9rem;padding:14px 18px !important; } .woocommerce-checkout .woocommerce-form-coupon-toggle .woocommerce-info::before{display:none !important} .woocommerce-checkout .woocommerce-form-coupon-toggle .woocommerce-info a{color:var(--primary) !important;font-weight:600} /* Payment box */ form.woocommerce-checkout #payment, form.woocommerce-checkout .woocommerce-checkout-payment{background:#fff !important;border:1px solid #efe9eb !important;border-radius:16px !important} form.woocommerce-checkout #payment ul.payment_methods{border:none !important;padding:18px 18px 0 !important} form.woocommerce-checkout #payment .payment_box{background:#fff !important;border-radius:10px !important;font-size:.85rem;color:#7a7480} form.woocommerce-checkout #payment .payment_box::before{display:none !important} /* Payment methods as big clickable panels (easy to tap) */ .woocommerce-checkout #payment ul.wc_payment_methods{list-style:none !important;margin:0 !important;padding:0 !important;border:none !important;display:flex;flex-direction:column;gap:10px} .woocommerce-checkout #payment ul.wc_payment_methods li, .woocommerce-checkout #payment ul.wc_payment_methods li.wc_payment_method{ list-style:none !important;border:1.5px solid #e6e1e3 !important;border-radius:12px !important;background:#fff !important; margin:0 !important;transition:border-color .18s,background .18s; /* SAME grid as delivery options: [radio col][content] → radios line up identically */ display:grid !important;grid-template-columns:28px 1fr !important;align-items:center !important;column-gap:14px !important;padding:18px !important; } .woocommerce-checkout #payment ul.wc_payment_methods li:hover{border-color:#bdb6b9 !important} /* CUSTOM radio for delivery + payment — drawn by CSS (appearance:none) so it's EXACTLY 18px and identical on iPhone/Android/desktop. Native radios render different sizes per browser (iOS was drawing the payment one huge). */ body.woocommerce-checkout #shipping_method li input[type="radio"], body.woocommerce-checkout #shipping_method li > input[type="radio"], body.woocommerce-checkout .woocommerce-shipping-methods li input[type="radio"], body.woocommerce-checkout #payment ul.wc_payment_methods li input[type="radio"], body.woocommerce-checkout #payment ul.wc_payment_methods li > input[type="radio"], body.woocommerce-checkout #payment li.wc_payment_method input[type="radio"]{ -webkit-appearance:none !important;-moz-appearance:none !important;appearance:none !important; width:18px !important;height:18px !important;min-width:18px !important;min-height:18px !important;max-width:18px !important;max-height:18px !important; flex:0 0 18px !important;margin:0 10px 0 0 !important;padding:0 !important; border:2px solid #c9c3c6 !important;border-radius:50% !important;background:#fff !important; transform:none !important;scale:1 !important;box-shadow:none !important;cursor:pointer;vertical-align:middle; transition:border-color .15s,box-shadow .15s; } body.woocommerce-checkout #shipping_method li input[type="radio"]:checked, body.woocommerce-checkout .woocommerce-shipping-methods li input[type="radio"]:checked, body.woocommerce-checkout #payment ul.wc_payment_methods li input[type="radio"]:checked, body.woocommerce-checkout #payment li.wc_payment_method input[type="radio"]:checked{ border-color:var(--primary) !important; background:var(--primary) !important; box-shadow:inset 0 0 0 3px #fff !important; /* pink ring + pink centre dot */ } /* Selected method — neutral highlight (NO pink border) */ .woocommerce-checkout #payment ul.wc_payment_methods li:has(input:checked){border-color:#bdb6b9 !important;background:#fff !important;box-shadow:0 1px 6px rgba(0,0,0,.06) !important} .woocommerce-checkout #payment ul.wc_payment_methods li:has(input:checked) > label{background:transparent !important;border-radius:11px 11px 0 0 !important} .woocommerce-checkout #payment ul.wc_payment_methods li:has(input:checked) > input[type=radio]{accent-color:var(--primary) !important} .woocommerce-checkout #payment ul.wc_payment_methods li > input[type=radio]{ grid-column:1 !important;justify-self:center !important;align-self:center !important; margin:0 !important;transform:none !important;cursor:pointer; } .woocommerce-checkout #payment ul.wc_payment_methods li > label{ grid-column:2 !important;padding:0 !important;margin:0 !important;cursor:pointer; font-weight:600 !important;font-size:1rem !important;color:#1d1d1f !important;display:flex;align-items:center;gap:10px; } .woocommerce-checkout #payment ul.wc_payment_methods li > label img{max-height:26px;width:auto;margin-left:auto} .woocommerce-checkout #payment ul.wc_payment_methods li > .payment_box{ grid-column:1 / -1 !important;margin:14px 0 0 !important;padding:0 !important;background:transparent !important;border:none !important;box-shadow:none !important; } /* test-mode notice smaller/quieter */ .woocommerce-checkout #payment .payment_box .wc-stripe-test-mode-notice, .woocommerce-checkout #payment .payment_box p:first-child{font-size:.78rem !important;color:#9a949f !important;margin:0 0 12px !important} /* card fields (Stripe element + any inputs) — clean spacious inputs, no double box */ .woocommerce-checkout #payment .payment_box .wc-stripe-elements-field, .woocommerce-checkout #payment .payment_box .StripeElement, .woocommerce-checkout #payment .payment_box .wc-stripe-card-element, .woocommerce-checkout #payment .payment_box > .form-row input.input-text{ background:#fff !important;border:1.5px solid #e3e3e6 !important;border-radius:12px !important; padding:15px 14px !important;margin-bottom:12px !important;box-shadow:none !important;min-height:54px;box-sizing:border-box; } /* the Stripe-injected payment element wrapper shouldn't add its own border/box */ .woocommerce-checkout #payment .payment_box #wc-stripe-payment-element, .woocommerce-checkout #payment .payment_box .wc-stripe-payment-element{border:none !important;background:transparent !important;padding:0 !important} /* Remove the outer box/border around the Stripe card element (the inner field boxes are Stripe's own iframe and keep their look — this only strips wrappers). */ .woocommerce-checkout #payment .payment_box [class*="wc-stripe"], .woocommerce-checkout #payment .payment_box [id*="wc-stripe"], .woocommerce-checkout #payment .payment_box [class*="StripeElement"], .woocommerce-checkout #payment .payment_box .__PrivateStripeElement, .woocommerce-checkout #payment .payment_box fieldset, .woocommerce-checkout #payment .payment_box .wc-stripe-elements-field{ border:none !important;box-shadow:none !important;background:transparent !important;outline:none !important; } /* the empty Stripe currency-selector box (unused on a single-currency store) */ .woocommerce-checkout #payment .payment_box #wc-stripe-currency-selector, .woocommerce-checkout #payment .payment_box .wc-stripe-currency-selector, .woocommerce-checkout #payment #wc-stripe-currency-selector{display:none !important} /* Stripe's hidden style-detection input must NOT show as a field. Clip it to 1px AT position 0 (NOT off-screen — left:-9999px was re-introducing horizontal overflow). Keeps its border/padding so Stripe still reads the input styling. */ .woocommerce-checkout #payment #wc-stripe-hidden-style-input, .woocommerce-checkout #wc-stripe-hidden-style-input{ position:absolute !important;left:0 !important;top:0 !important; width:1px !important;min-width:0 !important;max-width:1px !important;height:1px !important;min-height:0 !important; opacity:0 !important;overflow:hidden !important;pointer-events:none !important;z-index:-1 !important;margin:0 !important; } /* FULL-WIDTH: make the whole card form + every nested Stripe box span the panel (was sitting in a narrow nested box). */ .woocommerce-checkout #payment .payment_box, .woocommerce-checkout #payment .payment_box > *, .woocommerce-checkout #payment .payment_box form, .woocommerce-checkout #payment .payment_box fieldset, .woocommerce-checkout #payment .payment_box .form-row, .woocommerce-checkout #payment .payment_box .wc-stripe-card-element, .woocommerce-checkout #payment .payment_box .wc-stripe-elements-field, .woocommerce-checkout #payment .payment_box .StripeElement, .woocommerce-checkout #payment .payment_box .__PrivateStripeElement, .woocommerce-checkout #payment .payment_box iframe{ width:100% !important;max-width:100% !important;min-width:0 !important;box-sizing:border-box !important;margin-left:0 !important;margin-right:0 !important;float:none !important; } /* Match the DELIVERY section exactly: same 18px container inset + no extra outer padding, so payment method cards are the same width as delivery cards. */ .woocommerce-checkout #payment ul.wc_payment_methods{padding:18px 18px 0 !important} /* Payment frame = SAME width as the delivery/order frame (full width, no inset) */ form.woocommerce-checkout #payment, form.woocommerce-checkout .woocommerce-checkout-payment{padding:0 !important;width:100% !important;max-width:100% !important;margin:0 !important;box-sizing:border-box !important} @media(max-width:768px){ .woocommerce-checkout #payment ul.wc_payment_methods{padding:18px 18px 0 !important} /* keep the grid; just tighten cell padding + gap to match delivery on mobile */ .woocommerce-checkout #payment ul.wc_payment_methods li, .woocommerce-checkout #payment ul.wc_payment_methods li.wc_payment_method{grid-template-columns:18px 1fr !important;column-gap:8px !important;padding:12px 12px !important} .woocommerce-checkout #payment ul.wc_payment_methods li > label{padding:0 !important;font-size:.92rem !important} .woocommerce-checkout #payment ul.wc_payment_methods li > .payment_box{margin-top:12px !important;padding:0 !important} } /* Hide the empty Stripe placeholder box (express-checkout / payment-request area that's empty when Apple/Google Pay aren't available). */ .woocommerce-checkout #payment .payment_box .wc-stripe-payment-request-wrapper, .woocommerce-checkout #payment .payment_box #wc-stripe-payment-request-button, .woocommerce-checkout #payment .payment_box .wc-stripe-express-checkout, .woocommerce-checkout #payment .payment_box .wc-stripe-express-checkout-wrapper, .woocommerce-checkout #payment .payment_box .woocommerce-PaymentRequest, .woocommerce-checkout #payment .payment_box > div:empty, .woocommerce-checkout #payment .payment_box form > div:empty{display:none !important} /* Remove the EXTRA outer border/box around the Stripe element (no double box) — the innermost field box is Stripe's own iframe; only the wrapper border goes. */ .woocommerce-checkout #payment .payment_box .wc-stripe-upe-element, .woocommerce-checkout #payment .payment_box #wc-stripe-upe-element, .woocommerce-checkout #payment .payment_box .wc-stripe-card-element, .woocommerce-checkout #payment .payment_box #wc-stripe-card-element, .woocommerce-checkout #payment .payment_box > div, .woocommerce-checkout #payment .payment_box form, .woocommerce-checkout #payment .payment_box form > div{ border:none !important;box-shadow:none !important;background:transparent !important;padding:0 !important;margin:0 !important;width:100% !important;max-width:100% !important;box-sizing:border-box !important; } /* Terms + privacy */ .woocommerce-checkout .woocommerce-terms-and-conditions-wrapper{margin:20px 0 6px !important;clear:both;display:block} .woocommerce-checkout .woocommerce-privacy-policy-text p{font-size:.82rem;color:#9a949f;line-height:1.6;margin:0 0 14px} .woocommerce-checkout .woocommerce-terms-and-conditions-checkbox-text{font-size:.9rem;color:#1d1d1f} .woocommerce-checkout .woocommerce-terms-and-conditions-wrapper a{color:var(--primary);font-weight:600} /* (old flex consent block removed — it stretched the checkbox; the block-layout + custom-checkbox rules below are the single source of truth) */ /* Hide any stray field icon that other scripts may inject on these rows */ .woocommerce-checkout .woocommerce-terms-and-conditions-wrapper .olv-field-icon, .woocommerce-checkout .olv-whatsapp-optin .olv-field-icon{display:none !important} /* Remove any injected field icon on the checkout (e.g. person icon in the pickup/delivery option) */ .woocommerce-checkout .olv-field-icon, .woocommerce-checkout .olfc-dp-option .olv-field-icon, .woocommerce-checkout .olfc-dp-selector .olv-field-icon{display:none !important} /* Both consent rows: checkbox in a left gutter, text block-flowed with a hanging indent so WRAPPED lines line up (no jutting to the far left). */ /* Clean Shopify-style: hanging indent so ALL the label text (including WooCommerce's "(optional)") flows as one paragraph and wrapped lines align under the first line — checkbox sits in the 28px left gutter. */ .woocommerce-checkout .woocommerce-terms-and-conditions-wrapper .validate-required, .woocommerce-checkout .olv-whatsapp-optin{display:block !important;margin:0 0 14px !important;padding:0 !important;line-height:1.5} .woocommerce-checkout .woocommerce-terms-and-conditions-wrapper .validate-required > label, .woocommerce-checkout .olv-whatsapp-optin > label, .woocommerce-checkout .olv-whatsapp-optin label.checkbox, .woocommerce-checkout .olv-whatsapp-optin .woocommerce-input-wrapper > label{ display:flex !important;align-items:flex-start !important;gap:8px !important;position:relative !important;margin:0 !important;padding:0 !important; font-size:.9rem;line-height:1.5;color:#1d1d1f;cursor:pointer;width:100%; } /* BULLETPROOF custom checkbox: the box is drawn by the label's ::before pseudo-element (a pseudo can't be stretched by iOS checkbox quirks). The real checkbox is hidden as an invisible click-layer over the box. Identical on all. */ .woocommerce-checkout .woocommerce-terms-and-conditions-wrapper .validate-required > label input[type=checkbox], .woocommerce-checkout .olv-whatsapp-optin label input[type=checkbox], .woocommerce-checkout .olv-whatsapp-optin input.input-checkbox, .woocommerce-checkout .validate-required input.input-checkbox{ position:absolute !important;left:0 !important;top:2px !important; width:18px !important;height:18px !important;margin:0 !important;padding:0 !important; opacity:0 !important;cursor:pointer;z-index:2 !important;-webkit-appearance:none !important;appearance:none !important; } .woocommerce-checkout .woocommerce-terms-and-conditions-wrapper .validate-required > label::before, .woocommerce-checkout .olv-whatsapp-optin label::before{ content:'' !important;flex:0 0 18px !important;width:18px !important;height:18px !important;aspect-ratio:1 !important; margin-top:2px !important;border:2px solid #c9c3c6 !important;border-radius:5px !important;background:#fff !important;box-sizing:border-box !important; } .woocommerce-checkout .woocommerce-terms-and-conditions-wrapper .validate-required > label:has(input:checked)::before, .woocommerce-checkout .olv-whatsapp-optin label:has(input:checked)::before{background:var(--primary) !important;border-color:var(--primary) !important} .woocommerce-checkout .woocommerce-terms-and-conditions-wrapper .validate-required > label:has(input:checked)::after, .woocommerce-checkout .olv-whatsapp-optin label:has(input:checked)::after{ content:'' !important;position:absolute !important;left:6px !important;top:6px !important;width:4px !important;height:9px !important; border:solid #fff !important;border-width:0 2px 2px 0 !important;transform:rotate(45deg) !important;box-sizing:border-box !important; } /* hide the standalone WooCommerce asterisk; prepend our own before the text */ .woocommerce-checkout .woocommerce-terms-and-conditions-wrapper .validate-required > label > .required, .woocommerce-checkout .woocommerce-terms-and-conditions-wrapper .validate-required > label > abbr.required, .woocommerce-checkout .woocommerce-terms-and-conditions-wrapper .validate-required > .required, .woocommerce-checkout .woocommerce-terms-and-conditions-wrapper .validate-required > abbr.required{display:none !important} .woocommerce-checkout .validate-required > label .woocommerce-terms-and-conditions-checkbox-text::before{content:"*\00a0";color:#e2401c;font-weight:800;font-size:1.05em} /* Normal required field labels: flush-left like the optional ones */ .woocommerce-checkout #customer_details .form-row > label, .woocommerce-checkout .woocommerce-billing-fields .form-row > label, .woocommerce-checkout .woocommerce-shipping-fields .form-row > label, .woocommerce-checkout .woocommerce-additional-fields .form-row > label{padding-left:0 !important;margin-left:0 !important;text-indent:0 !important;text-align:left !important} /* Place order button */ .woocommerce-checkout #place_order{ width:100% !important;clear:both;display:block;margin-top:20px !important; background:var(--primary) !important;color:#fff !important;border:none !important;border-radius:14px !important; padding:16px 24px !important;font-size:1rem !important;font-weight:600 !important;font-family:var(--font-body) !important; box-shadow:0 10px 28px rgba(205,88,116,.28) !important;transition:background .2s,transform .2s,box-shadow .2s;cursor:pointer;float:none !important; } .woocommerce-checkout #place_order:hover{background:var(--primary-dark) !important;transform:translateY(-2px);box-shadow:0 14px 34px rgba(205,88,116,.34) !important} /* ── CHECKOUT — Delivery option card VISUALS ONLY (layout lives in the grid block above — do NOT add display/flex/label/img rules here again, or they will override the grid and break the alignment). ── */ .woocommerce-checkout ul#shipping_method, .woocommerce-checkout .woocommerce-shipping-methods{margin:0 !important;padding:0 !important;list-style:none !important;display:flex;flex-direction:column;gap:8px} .woocommerce-checkout ul#shipping_method li, .woocommerce-checkout .woocommerce-shipping-methods li{ list-style:none !important;margin:0 !important; border:1px solid #e6e1e3 !important;border-radius:12px !important;background:#fff !important; transition:border-color .15s,background .15s,box-shadow .15s;cursor:pointer;line-height:1.45; } .woocommerce-checkout ul#shipping_method li input[type=radio]{accent-color:var(--primary)} .woocommerce-checkout ul#shipping_method li:hover{border-color:var(--primary) !important} .woocommerce-checkout ul#shipping_method li:has(input:checked){ border-color:var(--primary) !important;background:#fff6f8 !important;box-shadow:0 4px 16px rgba(205,88,116,.10) !important; } .woocommerce-checkout .woocommerce-shipping-totals.shipping > th{font-family:var(--font-heading);font-weight:600;color:#1d1d1f;vertical-align:top;padding-top:14px} /* ── CHECKOUT "Your order" — clear quantity & tidy thumbnail ── */ .woocommerce-checkout-review-order-table .product-name{overflow:hidden;line-height:1.5;vertical-align:middle} .woocommerce-checkout-review-order-table .product-name img{width:56px !important;height:56px !important;object-fit:cover;border-radius:10px;float:left;margin:0 14px 8px 0} .woocommerce-checkout-review-order-table th.product-quantity, .woocommerce-checkout-review-order-table td.product-quantity{text-align:center !important;vertical-align:middle;white-space:nowrap;width:90px} .woocommerce-checkout-review-order-table th.product-total, .woocommerce-checkout-review-order-table td.product-total{text-align:right !important;vertical-align:middle} /* keep table header labels at the top */ .woocommerce-checkout-review-order-table thead th{vertical-align:middle} .olv-qty-badge{display:inline-block;background:var(--primary);color:#fff;font-weight:700;font-size:.82rem;border-radius:50px;padding:3px 13px;vertical-align:middle;white-space:nowrap} /* ── CHECKOUT: ✕ Remove item (Apple-style, clean & minimal) ── */ .woocommerce-checkout-review-order-table .product-name{position:relative} .olv-remove-item{ display:inline-flex;align-items:center;gap:5px;clear:both; margin-top:10px;padding:4px 0; font-size:.8rem;font-weight:500;line-height:1;letter-spacing:.01em; color:#9a949f;text-decoration:none !important;cursor:pointer; background:none;border:none;transition:color .18s ease; } .olv-remove-item .olv-remove-x{ display:inline-flex;align-items:center;justify-content:center; width:18px;height:18px;border-radius:50%; background:#f0ecee;color:#8a838b;font-size:13px;font-weight:600;line-height:1; transition:background .18s ease,color .18s ease,transform .18s ease; } .olv-remove-item:hover{color:#e2401c} .olv-remove-item:hover .olv-remove-x{background:#e2401c;color:#fff;transform:scale(1.08)} .olv-remove-item.is-removing{pointer-events:none;opacity:.5} .olv-remove-item.is-removing .olv-remove-x{animation:olvRemoveSpin .7s linear infinite} @keyframes olvRemoveSpin{to{transform:rotate(360deg)}} .woocommerce-checkout-review-order-table tr.olv-row-removing{opacity:.4;transition:opacity .25s ease} /* ── ADD-ONS UPSELL PAGE (arch style, 5 per row) ── */ .olv-addons-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:24px;margin-top:10px} .olv-addon-card{background:transparent;border:none;display:flex;flex-direction:column} .olv-addon-imgwrap{display:block;aspect-ratio:3/4;overflow:hidden;background:#f6f3f4;border-radius:50% 50% 12px 12px / 30% 30% 12px 12px} .olv-addon-img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .45s} .olv-addon-card:hover .olv-addon-img{transform:scale(1.04)} .olv-addon-info{padding:14px 6px 0;text-align:center;display:flex;flex-direction:column;gap:8px;flex:1} .olv-addon-name{font-family:var(--font-body);font-size:.85rem;font-weight:600;color:var(--dark);line-height:1.4;min-height:2.4em;display:flex;align-items:center;justify-content:center} .olv-addon-price{font-family:var(--font-body);font-size:.9rem;color:var(--primary);font-weight:700} .olv-addon-price del{color:#b9b9b9;font-weight:400;font-size:.82em;margin-right:4px} .olv-addon-add{margin-top:auto;display:inline-block;border:1.5px solid var(--primary);background:#fff;color:var(--primary);border-radius:50px;padding:9px 14px;font-size:.82rem;font-weight:600;font-family:var(--font-body);cursor:pointer;text-decoration:none;transition:all .18s} .olv-addon-add:hover{background:var(--primary);color:#fff} .olv-addon-add.added{background:#3a3a3a;border-color:#3a3a3a;color:#fff;cursor:default} .olv-addon-add.loading{opacity:.7;cursor:wait} .olv-addons-actions{display:flex;flex-direction:column;align-items:center;gap:14px;margin-top:46px} .olv-addons-skip{order:2;color:#9a949f;font-family:var(--font-body);font-size:.85rem;text-decoration:underline} .olv-addons-skip:hover{color:var(--primary)} .olv-addons-checkout{order:1} /* Floating checkout button (always visible) */ .olv-addons-float{position:fixed;left:50%;transform:translateX(-50%);bottom:24px;z-index:950;display:inline-flex;align-items:center;gap:10px;background:var(--primary);color:#fff;padding:14px 28px;border-radius:50px;font-family:var(--font-body);font-weight:600;font-size:.95rem;text-decoration:none;box-shadow:0 12px 32px rgba(0,0,0,.22);transition:background .2s,transform .2s} .olv-addons-float:hover{background:var(--primary-dark);color:#fff;transform:translateX(-50%) translateY(-2px)} .olv-addons-float svg{flex-shrink:0} .olv-addons-float-count{background:#fff;color:var(--primary);min-width:22px;height:22px;border-radius:50%;align-items:center;justify-content:center;font-size:.78rem;font-weight:700;padding:0 6px} @media(max-width:600px){.olv-addons-float{bottom:18px;padding:12px 22px;font-size:.9rem}} @media(max-width:1100px){.olv-addons-grid{grid-template-columns:repeat(4,1fr)}} @media(max-width:900px){.olv-addons-grid{grid-template-columns:repeat(3,1fr)}} @media(max-width:600px){.olv-addons-grid{grid-template-columns:repeat(2,1fr);gap:16px}} /* ════════════════════════════════════════════════════════════ CHECKOUT — MOBILE FRIENDLY (single column, full width) Forces every section/column/card/field to stack and fill the screen on phones & small tablets. ════════════════════════════════════════════════════════════ */ @media(max-width:992px){ /* No horizontal overflow → no empty space on the right / shifted content */ html, body.woocommerce-checkout, body.woocommerce-order-pay{overflow-x:clip !important;max-width:100% !important} .woocommerce-checkout .olv-woo-content, .woocommerce-checkout form.checkout, .woocommerce-checkout #order_review, .woocommerce-checkout .woocommerce-checkout-review-order-table, .woocommerce-order-pay .olv-woo-content{max-width:100% !important;width:100% !important;margin-left:0 !important;margin-right:0 !important;overflow-x:clip} /* Full-width content with a small even gutter so cards fill the screen */ .woocommerce-checkout .olv-woo-content, .woocommerce-order-pay .olv-woo-content{padding-left:16px !important;padding-right:16px !important;box-sizing:border-box !important} /* HARD CLAMP: nothing inside checkout may be wider than the screen (kills the horizontal overflow that shifts the whole page left) */ .woocommerce-checkout .olv-woo-content *, .woocommerce-order-pay .olv-woo-content *{max-width:100% !important} /* Kill all multi-column layouts */ .woocommerce-checkout .olv-pay-row, .woocommerce-checkout .olv-ckrow, .woocommerce-checkout #customer_details, .woocommerce-checkout .col2-set{display:block !important;grid-template-columns:1fr !important;width:100% !important} .woocommerce-checkout .col2-set .col-1, .woocommerce-checkout .col2-set .col-2, .woocommerce-checkout .olv-ckrow-left, .woocommerce-checkout .olv-ckrow-right, .woocommerce-checkout .olv-pay-row > #order_review, .woocommerce-checkout .olv-pay-row > #payment{ width:100% !important;max-width:100% !important;float:none !important; margin:0 0 20px 0 !important;position:static !important; } /* Cards full width */ .woocommerce-checkout .woocommerce-billing-fields, .woocommerce-checkout .woocommerce-shipping-fields, .woocommerce-checkout .woocommerce-additional-fields, .woocommerce-checkout .oldd-delivery-section, .woocommerce-checkout .olfc-dp-selector, .woocommerce-checkout form.checkout_coupon, .woocommerce-checkout .olfc-pickup-info{ width:100% !important;max-width:100% !important;box-sizing:border-box; } /* Every form field full width, comfortable tap size */ .woocommerce-checkout .form-row, .woocommerce-checkout .form-row-first, .woocommerce-checkout .form-row-last, .woocommerce-checkout .form-row-wide{ width:100% !important;float:none !important;margin-left:0 !important;margin-right:0 !important;padding:0 0 4px !important; } .woocommerce-checkout .form-row input.input-text, .woocommerce-checkout .form-row textarea, .woocommerce-checkout .form-row select, .woocommerce-checkout .select2-container{width:100% !important;box-sizing:border-box} /* Labels above fields, never clipped */ .woocommerce-checkout .form-row label{display:block !important;white-space:normal !important;margin-bottom:6px} /* Order summary table fits the screen */ .woocommerce-checkout-review-order-table{width:100% !important;table-layout:fixed} .woocommerce-checkout-review-order-table .product-name{white-space:normal !important;word-break:break-word} /* Slightly reduce card padding on phones */ .woocommerce-checkout .woocommerce-billing-fields, .woocommerce-checkout .woocommerce-shipping-fields, .woocommerce-checkout .oldd-delivery-section, .woocommerce-checkout .olfc-dp-selector, .woocommerce-checkout form.checkout_coupon{padding:18px !important} } @media(max-width:600px){ .woocommerce-checkout .product_title, .woocommerce-checkout .olv-checkout-title .olv-ct-main{font-size:1.5rem !important} .woocommerce-checkout-review-order-table .product-name img{width:46px !important;height:46px !important;margin:0 10px 6px 0} } /* ════════════════════════════════════════════════════════════ MY ACCOUNT — Apple-style clean premium dashboard Sidebar tabs (with icons + active state) + content card. Fully responsive: sidebar on desktop, scroll-pills on mobile. ════════════════════════════════════════════════════════════ */ /* Grid lands on whichever .woocommerce wrapper actually contains the nav (handles nested .woocommerce markup). Other wrappers just pass through full width. */ .woocommerce-account .woocommerce{width:100% !important;max-width:100% !important;margin:0;float:none !important;display:block} .woocommerce-account .woocommerce:has(> .woocommerce-MyAccount-navigation){ display:grid !important;grid-template-columns:188px minmax(0,1fr) !important;gap:28px;align-items:start; width:100% !important;max-width:100% !important;margin:0;background:none !important;border:none !important;box-shadow:none !important;padding:0 !important; } /* keep nav + content from any stray float/center/width */ .woocommerce-account .woocommerce-MyAccount-navigation, .woocommerce-account .woocommerce-MyAccount-content{float:none !important;width:auto !important;max-width:100% !important;margin:0 !important} .woocommerce-account .woocommerce-MyAccount-navigation{grid-column:1} .woocommerce-account .woocommerce-MyAccount-content{grid-column:2} /* Page title aligns with the grid (left edge, full page width) */ .woocommerce-account .entry-header, .woocommerce-account .woocommerce-page-title, .woocommerce-account h1.entry-title, .woocommerce-account .page-title{max-width:100%;margin:0 0 26px;font-family:var(--font-heading);text-align:left} /* ── Sidebar navigation card ── */ .woocommerce-account .woocommerce-MyAccount-navigation{ background:#fff;border:1px solid #efe9eb;border-radius:14px;padding:9px; box-shadow:0 8px 28px rgba(0,0,0,.05);position:sticky;top:96px; } .woocommerce-account .woocommerce-MyAccount-navigation ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:2px} .woocommerce-account .woocommerce-MyAccount-navigation li{margin:0} .woocommerce-account .woocommerce-MyAccount-navigation li a{ display:flex;align-items:center;gap:10px; padding:9px 11px;border-radius:10px;text-decoration:none; font-family:var(--font-body);font-size:.84rem;font-weight:500;color:#1d1d1f; transition:background .18s,color .18s;line-height:1.25; } .woocommerce-account .woocommerce-MyAccount-navigation li a::before{ content:"";width:16px;height:16px;flex:0 0 16px;background-repeat:no-repeat;background-position:center;background-size:contain;opacity:.7;transition:opacity .18s; } .woocommerce-account .woocommerce-MyAccount-navigation li a:hover{background:#f6f3f4;color:#1d1d1f} .woocommerce-account .woocommerce-MyAccount-navigation li.is-active a{background:var(--primary);color:#fff} .woocommerce-account .woocommerce-MyAccount-navigation li.is-active a::before{opacity:1;filter:brightness(0) invert(1)} /* Per-tab icons */ .woocommerce-MyAccount-navigation-link--dashboard a::before{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231d1d1f' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='3' width='7' height='7'/%3E%3Crect x='14' y='3' width='7' height='7'/%3E%3Crect x='14' y='14' width='7' height='7'/%3E%3Crect x='3' y='14' width='7' height='7'/%3E%3C/svg%3E")} .woocommerce-MyAccount-navigation-link--orders a::before{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231d1d1f' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 2 3 6v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2V6l-3-4z'/%3E%3Cpath d='M3 6h18'/%3E%3Cpath d='M16 10a4 4 0 0 1-8 0'/%3E%3C/svg%3E")} .woocommerce-MyAccount-navigation-link--downloads a::before{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231d1d1f' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4'/%3E%3Cpolyline points='7 10 12 15 17 10'/%3E%3Cline x1='12' y1='15' x2='12' y2='3'/%3E%3C/svg%3E")} .woocommerce-MyAccount-navigation-link--edit-address a::before{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231d1d1f' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0 1 18 0z'/%3E%3Ccircle cx='12' cy='10' r='3'/%3E%3C/svg%3E")} .woocommerce-MyAccount-navigation-link--payment-methods a::before{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231d1d1f' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='1' y='4' width='22' height='16' rx='2'/%3E%3Cline x1='1' y1='10' x2='23' y2='10'/%3E%3C/svg%3E")} .woocommerce-MyAccount-navigation-link--edit-account a::before{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231d1d1f' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2'/%3E%3Ccircle cx='12' cy='7' r='4'/%3E%3C/svg%3E")} .woocommerce-MyAccount-navigation-link--customer-logout a::before{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231d1d1f' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h4'/%3E%3Cpolyline points='16 17 21 12 16 7'/%3E%3Cline x1='21' y1='12' x2='9' y2='12'/%3E%3C/svg%3E")} /* ── Content card ── */ .woocommerce-account .woocommerce-MyAccount-content{ background:#fff;border:1px solid #efe9eb;border-radius:18px;padding:36px 40px; box-shadow:0 8px 28px rgba(0,0,0,.05);min-height:300px;font-family:var(--font-body);color:#3a343c;line-height:1.7; } .woocommerce-account .woocommerce-MyAccount-content p{margin:0 0 16px} .woocommerce-account .woocommerce-MyAccount-content a:not(.button){color:var(--primary);font-weight:600} .woocommerce-account .woocommerce-MyAccount-content h2, .woocommerce-account .woocommerce-MyAccount-content h3{font-family:var(--font-heading);color:#1d1d1f;margin:0 0 16px} /* Dashboard greeting */ .woocommerce-account .woocommerce-MyAccount-content .woocommerce-MyAccount-content strong{color:#1d1d1f} /* ── Forms (Account details / addresses) — premium inputs ── */ .woocommerce-account .woocommerce-MyAccount-content form .form-row label, .woocommerce-account .woocommerce-MyAccount-content form legend{display:block;font-size:.9rem;font-weight:600;color:#1d1d1f;margin-bottom:8px} .woocommerce-account .woocommerce-MyAccount-content input.input-text, .woocommerce-account .woocommerce-MyAccount-content input[type=email], .woocommerce-account .woocommerce-MyAccount-content input[type=password], .woocommerce-account .woocommerce-MyAccount-content input[type=text], .woocommerce-account .woocommerce-MyAccount-content input[type=tel], .woocommerce-account .woocommerce-MyAccount-content select, .woocommerce-account .woocommerce-MyAccount-content textarea{ width:100%;box-sizing:border-box;padding:14px 16px;border:1px solid #e3dadf;border-radius:12px; font-family:var(--font-body);font-size:.95rem;color:#1d1d1f;background:#fff;transition:border-color .18s,box-shadow .18s; } .woocommerce-account .woocommerce-MyAccount-content input:focus, .woocommerce-account .woocommerce-MyAccount-content select:focus, .woocommerce-account .woocommerce-MyAccount-content textarea:focus{ outline:none;border-color:var(--primary);box-shadow:0 0 0 3px rgba(205,88,116,.12); } .woocommerce-account .woocommerce-MyAccount-content fieldset{border:1px solid #efe9eb;border-radius:14px;padding:22px 24px;margin:24px 0} .woocommerce-account .woocommerce-MyAccount-content fieldset legend{padding:0 8px} .woocommerce-account .woocommerce-MyAccount-content .woocommerce-Button, .woocommerce-account .woocommerce-MyAccount-content button[type=submit], .woocommerce-account .woocommerce-MyAccount-content .button{ display:inline-block;background:var(--primary)!important;color:#fff!important;border:none!important; padding:14px 30px!important;border-radius:12px!important;font-family:var(--font-body)!important;font-weight:600!important; font-size:.95rem!important;cursor:pointer;box-shadow:0 8px 22px rgba(205,88,116,.24);transition:background .2s,transform .2s; } .woocommerce-account .woocommerce-MyAccount-content .button:hover, .woocommerce-account .woocommerce-MyAccount-content button[type=submit]:hover{background:var(--primary-dark)!important;transform:translateY(-1px)} /* Address columns — force a clean 2-up grid (override WooCommerce floats). :has() targets the real parent of the address cards regardless of nesting/classes. */ /* Addresses: FLOAT the two cards side-by-side. Works whether WooCommerce wraps them or drops them straight into the content box (no :has, no grid – that was matching the content box itself and scattering everything). */ .woocommerce-account .woocommerce-MyAccount-content{display:flow-root}/* contain the floats */ /* neutralise any WC wrapper's float/width so our card floats line up */ .woocommerce-account .woocommerce-MyAccount-content .woocommerce-Addresses, .woocommerce-account .woocommerce-MyAccount-content .addresses, .woocommerce-account .woocommerce-MyAccount-content .col2-set, .woocommerce-account .woocommerce-MyAccount-content .u-columns{display:flow-root !important;width:100% !important;margin:0 !important;float:none !important} /* the address cards themselves */ .woocommerce-account .woocommerce-MyAccount-content .woocommerce-Address, .woocommerce-account .woocommerce-MyAccount-content .col-1, .woocommerce-account .woocommerce-MyAccount-content .col-2, .woocommerce-account .woocommerce-MyAccount-content .u-column1, .woocommerce-account .woocommerce-MyAccount-content .u-column2{ float:left !important;width:calc(50% - 12px) !important;max-width:calc(50% - 12px) !important;min-width:0; margin:0 24px 24px 0 !important;box-sizing:border-box;display:block !important; background:#faf7f8;border:1px solid #efe9eb;border-radius:14px;padding:22px 24px; } .woocommerce-account .woocommerce-MyAccount-content .woocommerce-Address + .woocommerce-Address, .woocommerce-account .woocommerce-MyAccount-content .col-2, .woocommerce-account .woocommerce-MyAccount-content .u-column2{margin-right:0 !important} /* Compact cards — everything left-aligned */ .woocommerce-account .woocommerce-MyAccount-content .woocommerce-Address{padding:13px 15px !important;text-align:left !important} .woocommerce-account .woocommerce-MyAccount-content .woocommerce-Address *{text-align:left !important} /* Title — blanket EVERY heading tag inside the card; LEFT-aligned block */ .woocommerce-account .woocommerce-MyAccount-content .woocommerce-Address-title, .woocommerce-account .woocommerce-MyAccount-content .woocommerce-Address > header, .woocommerce-account .woocommerce-MyAccount-content .woocommerce-Address h1, .woocommerce-account .woocommerce-MyAccount-content .woocommerce-Address h2, .woocommerce-account .woocommerce-MyAccount-content .woocommerce-Address h3, .woocommerce-account .woocommerce-MyAccount-content .woocommerce-Address h4{ display:block !important;text-align:left !important;justify-content:flex-start !important; margin:0 0 8px !important;font-size:.9rem !important;line-height:1.25 !important;font-weight:700 !important;font-family:var(--font-heading) !important;width:100%; } .woocommerce-account .woocommerce-MyAccount-content .woocommerce-Address-title .edit, .woocommerce-account .woocommerce-MyAccount-content .woocommerce-Address .edit{ flex:0 0 auto;white-space:nowrap;font-size:.72rem !important;font-weight:600;color:#1d1d1f !important; background:#fff;border:1px solid #ddd6d9;border-radius:7px;padding:5px 10px;text-decoration:none;font-family:var(--font-body) !important; } .woocommerce-account .woocommerce-MyAccount-content .woocommerce-Address address{font-style:normal !important;white-space:normal;word-break:normal;line-height:1.45 !important;font-size:.76rem !important;color:#1d1d1f} /* ── VIEW ORDER page — Billing / Recipient cards: compact, small, left-aligned ── */ .woocommerce-account .woocommerce-MyAccount-content .woocommerce-customer-details .woocommerce-columns, .woocommerce-account .woocommerce-MyAccount-content .woocommerce-customer-details .woocommerce-columns--addresses{display:flow-root !important;width:100% !important;margin:0 !important} .woocommerce-account .woocommerce-MyAccount-content .woocommerce-customer-details .woocommerce-column{ float:left !important;width:calc(50% - 12px) !important;max-width:calc(50% - 12px) !important;margin:0 24px 24px 0 !important; box-sizing:border-box;text-align:left !important; background:#faf7f8;border:1px solid #efe9eb;border-radius:14px;padding:16px 18px; } .woocommerce-account .woocommerce-MyAccount-content .woocommerce-customer-details .woocommerce-column *{text-align:left !important} .woocommerce-account .woocommerce-MyAccount-content .woocommerce-customer-details .woocommerce-column--2, .woocommerce-account .woocommerce-MyAccount-content .woocommerce-customer-details .woocommerce-column + .woocommerce-column{margin-right:0 !important} .woocommerce-account .woocommerce-MyAccount-content .woocommerce-customer-details .woocommerce-column__title, .woocommerce-account .woocommerce-MyAccount-content .woocommerce-customer-details h2, .woocommerce-account .woocommerce-MyAccount-content .woocommerce-customer-details h3{ font-size:1.02rem !important;line-height:1.25 !important;margin:0 0 10px !important;font-weight:700 !important; font-family:var(--font-heading) !important;text-align:left !important;color:#1d1d1f !important; } .woocommerce-account .woocommerce-MyAccount-content .woocommerce-customer-details address{ font-style:normal !important;font-size:.82rem !important;line-height:1.55 !important; border:none !important;padding:0 !important;background:none !important;border-radius:0 !important;width:100% !important;color:#1d1d1f;text-align:left !important; } @media(max-width:900px){ .woocommerce-account .woocommerce-MyAccount-content .woocommerce-customer-details .woocommerce-column{float:none !important;width:100% !important;max-width:100% !important;margin:0 0 16px 0 !important} } /* Orders table — fixed layout so columns (esp. Actions) stay inside the card */ .woocommerce-account .woocommerce-MyAccount-content{overflow-x:hidden} .woocommerce-account .woocommerce-MyAccount-content table.shop_table{width:100% !important;table-layout:fixed !important;border:1px solid #efe9eb;border-radius:14px;border-collapse:separate;overflow:hidden} .woocommerce-account .woocommerce-MyAccount-content table.shop_table th{background:#faf7f8;font-family:var(--font-body);color:#1d1d1f;font-size:.74rem;padding:10px 8px} .woocommerce-account .woocommerce-MyAccount-content table.shop_table td{padding:10px 8px;vertical-align:middle;font-size:.78rem;word-break:break-word;overflow-wrap:anywhere} /* Column widths — compact; Actions just enough for one button */ .woocommerce-account .woocommerce-orders-table__cell-order-number{width:20%} .woocommerce-account .woocommerce-orders-table__cell-order-number, .woocommerce-account .woocommerce-orders-table__cell-order-number a{font-size:.7rem !important;font-weight:600 !important;letter-spacing:0 !important;line-height:1.3 !important} .woocommerce-account .woocommerce-orders-table__cell-order-date{width:14%} .woocommerce-account .woocommerce-orders-table__cell-order-status{width:16%} .woocommerce-account .woocommerce-orders-table__cell-order-total{width:16%} .woocommerce-account .woocommerce-orders-table__cell-order-actions{width:36%} /* Order-action buttons — keep the TD as a real table cell (so the 36% column width applies); stack the buttons as right-aligned blocks. DO NOT set display:flex on the td — that drops it out of table layout and collapses it. */ .woocommerce-account .woocommerce-orders-table__cell-order-actions{display:table-cell !important;text-align:right !important;vertical-align:middle} .woocommerce-account .woocommerce-MyAccount-content .woocommerce-orders-table__cell-order-actions a.button, .woocommerce-account .woocommerce-MyAccount-content td.woocommerce-orders-table__cell-order-actions .button{ display:block;width:-moz-max-content;width:max-content;max-width:100% !important;margin:0 0 6px auto !important;text-align:center;box-sizing:border-box; padding:7px 14px !important;border-radius:8px !important; font-size:.74rem !important;font-weight:600 !important;line-height:1.2 !important;white-space:nowrap !important;overflow-wrap:normal !important;word-break:normal !important; box-shadow:none !important;transform:none !important;letter-spacing:0 !important; } .woocommerce-account .woocommerce-MyAccount-content .woocommerce-orders-table__cell-order-actions a.button:last-child{margin-bottom:0 !important} /* Hide Packing Slip & Delivery Note buttons in customer Order History (safety net) */ .woocommerce-account .woocommerce-orders-table__cell-order-actions a.button[class*="packing-slip"], .woocommerce-account .woocommerce-orders-table__cell-order-actions a.button[class*="delivery-note"], .woocommerce-account .woocommerce-orders-table__cell-order-actions a.button.packing-slip, .woocommerce-account .woocommerce-orders-table__cell-order-actions a.button.delivery-note, .woocommerce-account .woocommerce-orders-table__cell-order-actions a.button[href*="packing-slip"], .woocommerce-account .woocommerce-orders-table__cell-order-actions a.button[href*="delivery-note"], .woocommerce-account .woocommerce-orders-table__cell-order-actions a.button[href*="packing_slip"], .woocommerce-account .woocommerce-orders-table__cell-order-actions a.button[href*="delivery_note"]{display:none !important} /* Primary action (View) stays solid pink; the print/secondary actions become light outline */ .woocommerce-account .woocommerce-MyAccount-content .woocommerce-orders-table__cell-order-actions a.button.invoice, .woocommerce-account .woocommerce-MyAccount-content .woocommerce-orders-table__cell-order-actions a.button.packing-slip, .woocommerce-account .woocommerce-MyAccount-content .woocommerce-orders-table__cell-order-actions a.button.receipt, .woocommerce-account .woocommerce-MyAccount-content .woocommerce-orders-table__cell-order-actions a.button.delivery-note, .woocommerce-account .woocommerce-MyAccount-content .woocommerce-orders-table__cell-order-actions a.button:not(.view){ background:#fff !important;color:var(--primary) !important;border:1px solid #e6c6d0 !important; } .woocommerce-account .woocommerce-MyAccount-content .woocommerce-orders-table__cell-order-actions a.button:not(.view):hover{ background:#fdf2f5 !important;border-color:var(--primary) !important;color:var(--primary-dark) !important; } .woocommerce-account .woocommerce-MyAccount-content .woocommerce-orders-table__cell-order-actions a.button.view{ background:var(--primary) !important;color:#fff !important;border:1px solid var(--primary) !important; } /* Pagination buttons compact */ .woocommerce-account .woocommerce-MyAccount-content .woocommerce-pagination .button, .woocommerce-account .woocommerce-MyAccount-content .woocommerce-Pagination .button{padding:10px 22px !important;font-size:.85rem !important} /* ── No pink font anywhere on the account pages → unify to #1d1d1f ── */ .woocommerce-account .woocommerce-MyAccount-content, .woocommerce-account .woocommerce-MyAccount-content *:not(.button){color:#1d1d1f !important} /* address Edit chip: dark text, neutral border */ .woocommerce-account .woocommerce-MyAccount-content .woocommerce-Address-title .edit{color:#1d1d1f !important;border-color:#ddd6d9 !important} .woocommerce-account .woocommerce-MyAccount-content a:not(.button), .woocommerce-account .woocommerce-MyAccount-content .order-number a, .woocommerce-account .woocommerce-orders-table__cell-order-number a, .woocommerce-account .woocommerce-MyAccount-content address, .woocommerce-account .woocommerce-MyAccount-content label, .woocommerce-account .woocommerce-MyAccount-content em, .woocommerce-account .woocommerce-MyAccount-content strong{color:#1d1d1f !important} /* keep inline links readable with a subtle underline (still dark, not pink) */ .woocommerce-account .woocommerce-MyAccount-content p a:not(.button){text-decoration:underline;text-underline-offset:2px} /* Order-action OUTLINE buttons: dark text + neutral border (no pink font) */ .woocommerce-account .woocommerce-MyAccount-content .woocommerce-orders-table__cell-order-actions a.button:not(.view){ color:#1d1d1f !important;background:#fff !important;border:1px solid #ddd6d9 !important; } .woocommerce-account .woocommerce-MyAccount-content .woocommerce-orders-table__cell-order-actions a.button:not(.view):hover{ color:#1d1d1f !important;border-color:#bdb6b9 !important;background:#f6f3f4 !important; } /* Solid primary buttons keep WHITE text (not pink) */ .woocommerce-account .woocommerce-MyAccount-content .button.view, .woocommerce-account .woocommerce-MyAccount-content button[type=submit], .woocommerce-account .woocommerce-MyAccount-content .woocommerce-Button{color:#fff !important} /* Remove any injected field icon (e.g. the person icon before password labels) */ .woocommerce-account .olv-field-icon, .woocommerce-account .woocommerce-MyAccount-content .olv-field-icon{display:none !important} /* Notices (No downloads / No saved methods, etc.) → clean WHITE card, no pink banner */ .woocommerce-account .woocommerce-info, .woocommerce-account .woocommerce-message, .woocommerce-account .woocommerce-Message, .woocommerce-account .woocommerce-MyAccount-content .woocommerce-info, .woocommerce-account .woocommerce-MyAccount-content .woocommerce-message{ background:#fff !important;border:1px solid #efe9eb !important;border-top:1px solid #efe9eb !important; border-radius:14px !important;color:#1d1d1f !important;box-shadow:0 4px 16px rgba(0,0,0,.04) !important; padding:20px 24px !important;display:flex !important;align-items:center;gap:12px;flex-wrap:wrap; } /* kill the default WC icon/coloured bar */ .woocommerce-account .woocommerce-info::before, .woocommerce-account .woocommerce-message::before, .woocommerce-account .woocommerce-MyAccount-content .woocommerce-info::before, .woocommerce-account .woocommerce-MyAccount-content .woocommerce-message::before{display:none !important} /* notice text dark, button pushed to the right */ .woocommerce-account .woocommerce-info .button{margin-left:auto} /* ── MOBILE: stack + horizontal scroll pill tabs ── */ @media(max-width:900px){ .woocommerce-account .woocommerce:has(> .woocommerce-MyAccount-navigation){grid-template-columns:1fr !important;gap:20px} .woocommerce-account .woocommerce-MyAccount-navigation{position:static;top:auto;padding:8px;border-radius:14px} .woocommerce-account .woocommerce-MyAccount-navigation ul{ flex-direction:row;flex-wrap:nowrap;overflow-x:auto;gap:8px; -webkit-overflow-scrolling:touch;scrollbar-width:none;padding-bottom:2px; } .woocommerce-account .woocommerce-MyAccount-navigation ul::-webkit-scrollbar{display:none} .woocommerce-account .woocommerce-MyAccount-navigation li a{white-space:nowrap;padding:11px 16px;font-size:.9rem} .woocommerce-account .woocommerce-MyAccount-content{padding:24px 20px;border-radius:14px} .woocommerce-account .woocommerce-MyAccount-content .woocommerce-Address, .woocommerce-account .woocommerce-MyAccount-content .col-1, .woocommerce-account .woocommerce-MyAccount-content .col-2, .woocommerce-account .woocommerce-MyAccount-content .u-column1, .woocommerce-account .woocommerce-MyAccount-content .u-column2{float:none !important;width:100% !important;max-width:100% !important;margin:0 0 16px 0 !important} } /* ── My Account: logged-OUT login / register page (premium cards) ── */ .woocommerce-account:not(.logged-in) .woocommerce > .u-columns, .woocommerce-account #customer_login.u-columns{ display:grid !important;grid-template-columns:1fr 1fr;gap:30px;width:100%;max-width:100%;margin:0 !important;float:none !important; } .woocommerce-account #customer_login .u-column1, .woocommerce-account #customer_login .u-column2{ width:100% !important;float:none !important;margin:0 !important; background:#fff;border:1px solid #efe9eb;border-radius:18px;padding:34px 34px 38px;box-shadow:0 8px 28px rgba(0,0,0,.05);box-sizing:border-box; } .woocommerce-account #customer_login h2{font-family:var(--font-heading);color:#1d1d1f;font-size:1.5rem;margin:0 0 22px} .woocommerce-account .woocommerce-form-login label, .woocommerce-account .woocommerce-form-register label{display:block;font-size:.9rem;font-weight:600;color:#1d1d1f;margin-bottom:8px} .woocommerce-account .woocommerce-form-login input.input-text, .woocommerce-account .woocommerce-form-login input[type=password], .woocommerce-account .woocommerce-form-register input.input-text, .woocommerce-account .woocommerce-form-register input[type=email], .woocommerce-account .woocommerce-form-register input[type=password]{ width:100%;box-sizing:border-box;padding:14px 16px;border:1px solid #e3dadf;border-radius:12px; font-family:var(--font-body);font-size:.95rem;color:#1d1d1f;background:#fff;transition:border-color .18s,box-shadow .18s; } .woocommerce-account .woocommerce-form-login input:focus, .woocommerce-account .woocommerce-form-register input:focus{outline:none;border-color:var(--primary);box-shadow:0 0 0 3px rgba(205,88,116,.12)} .woocommerce-account .woocommerce-form-login .button, .woocommerce-account .woocommerce-form-register .button{ width:100%;background:var(--primary)!important;color:#fff!important;border:none!important; padding:14px 24px!important;border-radius:12px!important;font-weight:600!important;font-size:.95rem!important; box-shadow:0 8px 22px rgba(205,88,116,.24);transition:background .2s,transform .2s;cursor:pointer; } .woocommerce-account .woocommerce-form-login .button:hover, .woocommerce-account .woocommerce-form-register .button:hover{background:var(--primary-dark)!important;transform:translateY(-1px)} .woocommerce-account .woocommerce-form-login__rememberme{display:flex;align-items:center;gap:8px;font-size:.88rem;color:#6b636b;margin:6px 0 16px} .woocommerce-account .woocommerce-LostPassword a{color:var(--primary);font-weight:600;font-size:.88rem} @media(max-width:768px){ .woocommerce-account #customer_login.u-columns, .woocommerce-account:not(.logged-in) .woocommerce > .u-columns{grid-template-columns:1fr !important;gap:20px} .woocommerce-account #customer_login .u-column1, .woocommerce-account #customer_login .u-column2{padding:24px 20px} } /* ════════════════════════════════════════════════════════════ PAY FOR ORDER page (order-pay) — Apple-style clean premium ════════════════════════════════════════════════════════════ */ .woocommerce-order-pay .olv-woo-content{max-width:1180px;margin:0 auto} /* Title shares the SAME left edge as the order details (no centering offset) */ .woocommerce-order-pay h1.entry-title, .woocommerce-order-pay .entry-title, .woocommerce-order-pay .woocommerce-page-title, .woocommerce-order-pay .page-title{font-family:var(--font-heading);color:#1d1d1f;margin:0 auto 30px !important;padding-left:0 !important;text-align:left !important;max-width:1180px !important;width:100%} /* Two-column layout: order details (left) + payment (right) — flex is more reliable than fr here */ .woocommerce-order-pay form#order_review{ display:flex !important;flex-wrap:wrap;gap:24px;align-items:flex-start; margin:0 !important;padding:0 !important;width:100%; } /* The page is also a checkout page, so the .olv-pay-row grid can apply — tighten its gap too */ .woocommerce-order-pay .olv-pay-row{grid-template-columns:minmax(0,1.5fr) minmax(0,1fr) !important;gap:24px !important;align-items:start} .woocommerce-order-pay form#order_review > .shop_table, .woocommerce-order-pay form#order_review > table{flex:1 1 58%;min-width:0;margin:0 !important} .woocommerce-order-pay form#order_review > #payment{flex:0 1 38%;min-width:0;position:sticky;top:96px} /* Order details card */ .woocommerce-order-pay table.shop_table{ background:#fff;border:1px solid #efe9eb !important;border-radius:18px !important;overflow:hidden; box-shadow:0 8px 28px rgba(0,0,0,.05);border-collapse:separate !important;width:100%; } .woocommerce-order-pay table.shop_table thead th{background:#faf7f8;font-family:var(--font-body);color:#1d1d1f;font-weight:700;font-size:.82rem;padding:16px 20px;border:none} /* View-order: order-detail tables (incl. Payment History) as clean white cards */ .woocommerce-view-order .woocommerce-MyAccount-content table.order_details, .woocommerce-view-order .woocommerce-MyAccount-content table.shop_table{ background:#fff !important;border:1px solid #efe9eb !important;border-radius:14px !important;overflow:hidden; box-shadow:0 6px 22px rgba(0,0,0,.04) !important;border-collapse:separate !important;width:100% !important; } .woocommerce-view-order .woocommerce-MyAccount-content table.order_details thead th{background:#faf7f8 !important;color:#1d1d1f !important;font-family:var(--font-body)} .woocommerce-view-order .woocommerce-MyAccount-content h2{font-family:var(--font-heading);color:#1d1d1f;margin:30px 0 12px} /* Pick Up Information box — restyle to match the theme (soft pink card, not orange) */ .olfc-pickup-confirmation, .woocommerce-view-order .olfc-pickup-info, .woocommerce-order-received .olfc-pickup-confirmation{ background:#fdf2f5 !important;border:1px solid #f0d7df !important;border-left:4px solid var(--primary) !important; border-radius:14px !important;padding:22px 26px !important;margin:26px 0 !important;color:#1d1d1f !important; box-shadow:0 6px 22px rgba(0,0,0,.04) !important; } .olfc-pickup-confirmation h2, .olfc-pickup-confirmation h3, .olfc-pickup-confirmation .olfc-pickup-title, .woocommerce-view-order .olfc-pickup-info h2, .woocommerce-view-order .olfc-pickup-info h3{font-family:var(--font-heading) !important;color:#1d1d1f !important;margin:0 0 12px !important;font-size:1.15rem !important} .olfc-pickup-confirmation p, .olfc-pickup-confirmation div, .woocommerce-view-order .olfc-pickup-info p{color:#3a343c !important;line-height:1.6} .olfc-pickup-confirmation strong{color:#1d1d1f !important} .olfc-pickup-confirmation a{color:var(--primary) !important;font-weight:600} /* View-order: ALL action buttons compact & small (Print Invoice/Receipt/Packing/Delivery, etc.) */ .woocommerce-view-order .woocommerce-MyAccount-content .button, .woocommerce-view-order .woocommerce-MyAccount-content a.button, .woocommerce-view-order .woocommerce-MyAccount-content button.button, .woocommerce-order-received .woocommerce-MyAccount-content .button{ display:inline-block !important;width:auto !important;max-width:none !important;vertical-align:middle; margin:0 8px 8px 0 !important;text-align:center; padding:7px 14px !important;font-size:.74rem !important;font-weight:600 !important;line-height:1.2 !important;border-radius:8px !important; box-shadow:none !important;transform:none !important;white-space:nowrap; } /* Buttons inside the order-details table "Actions" cell: stack tidily, right-aligned */ .woocommerce-view-order .woocommerce-MyAccount-content table.shop_table td .button{ display:block !important;max-width:150px !important;margin:0 0 6px auto !important; } .woocommerce-view-order .woocommerce-MyAccount-content table.shop_table td .button:last-child{margin-bottom:0 !important} /* Compact, smaller-font order product details (order-pay / view-order) */ .woocommerce-order-pay table.shop_table td, .woocommerce-order-pay table.shop_table th, .woocommerce-view-order table.shop_table td, .woocommerce-view-order table.shop_table th{padding:11px 16px !important;font-size:.8rem !important;line-height:1.4 !important} .woocommerce-order-pay table.shop_table td.product-name, .woocommerce-view-order table.shop_table td.product-name{font-size:.82rem !important} .woocommerce-order-pay table.shop_table .wc-item-meta, .woocommerce-order-pay table.shop_table dl.variation, .woocommerce-order-pay table.shop_table .variation, .woocommerce-view-order table.shop_table .wc-item-meta, .woocommerce-view-order table.shop_table dl.variation, .woocommerce-view-order table.shop_table .variation{font-size:.72rem !important;line-height:1.35 !important;margin:6px 0 0 !important} .woocommerce-order-pay table.shop_table .wc-item-meta p, .woocommerce-order-pay table.shop_table .variation p, .woocommerce-view-order table.shop_table .wc-item-meta p, .woocommerce-view-order table.shop_table .variation p{margin:0 0 2px !important} /* Product thumbnail (order-pay / view-order) */ .olv-oi-thumb{display:block;float:left;margin:0 12px 6px 0} .olv-oi-thumb img{width:56px !important;height:56px !important;object-fit:cover;border-radius:10px;display:block;margin:0 !important} .woocommerce-order-pay table.shop_table td.product-name, .woocommerce-view-order table.shop_table td.product-name, .woocommerce-order-pay table.shop_table .woocommerce-table__product-name{overflow:hidden} .woocommerce-order-pay table.shop_table td, .woocommerce-order-pay table.shop_table th{padding:16px 20px;color:#1d1d1f;border-top:1px solid #f1ecee !important;vertical-align:top} .woocommerce-order-pay table.shop_table tfoot th, .woocommerce-order-pay table.shop_table tfoot td{font-weight:600} .woocommerce-order-pay table.shop_table tfoot tr:last-child th, .woocommerce-order-pay table.shop_table tfoot tr:last-child td{font-size:1.05rem;color:#1d1d1f} /* Payment box card */ .woocommerce-order-pay #payment, .woocommerce-order-pay .woocommerce-checkout-payment{ background:#faf7f8 !important;border:1px solid #efe9eb !important;border-radius:18px !important; box-shadow:0 8px 28px rgba(0,0,0,.05);padding:6px; } .woocommerce-order-pay #payment ul.payment_methods, .woocommerce-order-pay #payment ul.wc_payment_methods{ list-style:none !important;margin:0 !important;padding:18px !important;border:none !important;display:flex;flex-direction:column;gap:10px; } /* payment options as big clickable panels */ .woocommerce-order-pay #payment ul.payment_methods li, .woocommerce-order-pay #payment ul.wc_payment_methods li{ list-style:none !important;border:1.5px solid #e6e1e3 !important;border-radius:12px !important;background:#fff !important; margin:0 !important;padding:0 !important;display:flex;flex-wrap:wrap;align-items:center;transition:border-color .18s,background .18s; } .woocommerce-order-pay #payment ul.payment_methods li:hover, .woocommerce-order-pay #payment ul.wc_payment_methods li:hover{border-color:#bdb6b9 !important} .woocommerce-order-pay #payment ul.payment_methods li:has(input:checked), .woocommerce-order-pay #payment ul.wc_payment_methods li:has(input:checked){border-color:#9a949f !important;background:#fff !important} .woocommerce-order-pay #payment ul.payment_methods li > input[type=radio], .woocommerce-order-pay #payment ul.wc_payment_methods li > input[type=radio]{order:-1;margin:0 0 0 18px !important;flex:0 0 auto !important;align-self:center !important} .woocommerce-order-pay #payment ul.payment_methods li > label, .woocommerce-order-pay #payment ul.wc_payment_methods li > label{ flex:1;padding:20px 16px !important;margin:0 !important;cursor:pointer; font-weight:600 !important;font-size:1rem !important;color:#1d1d1f !important;display:flex;align-items:center;gap:10px; } .woocommerce-order-pay #payment ul.payment_methods li > label img, .woocommerce-order-pay #payment ul.wc_payment_methods li > label img{max-height:30px;width:auto} .woocommerce-order-pay #payment .payment_box{ flex:0 0 100%;margin:0 !important;padding:0 18px 18px !important;background:transparent !important; font-size:.85rem;color:#7a7480;border-radius:0 !important; } .woocommerce-order-pay #payment .payment_box::before{display:none !important} /* Pay button */ .woocommerce-order-pay #payment #place_order, .woocommerce-order-pay #place_order{ width:100% !important;display:block;margin:8px 0 0 !important; background:var(--primary) !important;color:#fff !important;border:none !important;border-radius:14px !important; padding:16px 24px !important;font-size:1rem !important;font-weight:600 !important;font-family:var(--font-body) !important; box-shadow:0 10px 28px rgba(205,88,116,.28) !important;transition:background .2s,transform .2s;cursor:pointer; } .woocommerce-order-pay #place_order:hover{background:var(--primary-dark) !important;transform:translateY(-2px)} /* Test-mode notice tidy */ .woocommerce-order-pay #payment .payment_box, .woocommerce-order-pay #payment .woocommerce-info{font-size:.82rem} /* Mobile: single column */ @media(max-width:900px){ .woocommerce-order-pay form#order_review{grid-template-columns:1fr;gap:22px} .woocommerce-order-pay form#order_review > #payment{grid-column:1;position:static} .woocommerce-order-pay form#order_review > .shop_table, .woocommerce-order-pay form#order_review > table{grid-column:1} } /* ── INSTAGRAM GALLERY (home) ── */ .insta-section{padding-top:var(--section-pad);padding-bottom:150px} .insta-heading{font-family:var(--font-heading);color:#1d1d1f} .insta-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:24px;margin-top:10px} .insta-tile{position:relative;display:block;aspect-ratio:3/4;background-size:cover;background-position:center;border-radius:50% 50% 10px 10px / 32% 32% 10px 10px;overflow:hidden} .insta-ov{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;background:rgba(205,88,116,.0);opacity:0;transition:all .28s} .insta-tile:hover .insta-ov{background:rgba(205,88,116,.45);opacity:1} .insta-follow{text-align:center;margin-top:34px} @media(max-width:900px){.insta-grid{grid-template-columns:repeat(2,1fr)}} @media(max-width:480px){.insta-grid{gap:10px}} /* "Leave a review" invite (My Account order view) */ .olv-review-invite{margin:26px 0;padding:24px 26px;background:var(--blush,#fff0f5);border-radius:16px} .olv-review-invite h3{font-family:var(--font-heading);font-size:1.2rem;color:#1d1d1f;margin:0 0 6px} .olv-review-invite p{font-family:var(--font-body);color:#7a7480;margin:0 0 14px;font-size:.92rem} .olv-review-invite ul{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:8px} .olv-review-invite a{color:var(--primary);font-weight:600;text-decoration:none} .olv-review-invite a:hover{text-decoration:underline} /* ── Mobile: prevent ANY horizontal overflow (kills the empty space on the right) ── */ @media(max-width:768px){ /* overflow-x:clip clips sideways overflow WITHOUT creating a scroll container, so the sticky header keeps working (overflow:hidden would break position:sticky) */ html, body{overflow-x:clip !important;max-width:100% !important} /* Checkout / order-pay: clamp every container & card to the screen width */ body.woocommerce-checkout .olv-woo-content, body.woocommerce-checkout form.checkout, body.woocommerce-checkout form.checkout > *, body.woocommerce-checkout .woocommerce, body.woocommerce-checkout .woocommerce > *, body.woocommerce-checkout #customer_details, body.woocommerce-checkout #customer_details > *, body.woocommerce-checkout .olv-ckrow, body.woocommerce-checkout .olv-ckrow > *, body.woocommerce-checkout .olv-pay-row, body.woocommerce-checkout .olv-pay-row > *, body.woocommerce-checkout .woocommerce-billing-fields, body.woocommerce-checkout .woocommerce-shipping-fields, body.woocommerce-checkout .woocommerce-additional-fields, body.woocommerce-checkout form.checkout_coupon, body.woocommerce-checkout #order_review, body.woocommerce-checkout #payment, body.woocommerce-checkout .woocommerce-checkout-review-order-table{ width:100% !important;max-width:100% !important;min-width:0 !important; float:none !important;margin-left:0 !important;margin-right:0 !important;box-sizing:border-box !important; } } /* ── Mobile: single product page — no horizontal overflow ── */ @media(max-width:768px){ body.single-product{overflow-x:clip !important} body.single-product .olv-woo-content, body.single-product div.product, body.single-product div.product > *, body.single-product .entry-summary, body.single-product .entry-summary > *, body.single-product .woocommerce-product-gallery, body.single-product .summary, body.single-product .summary > *, body.single-product .olv-product-accordion, body.single-product .woocommerce-tabs, body.single-product .related, body.single-product .up-sells, body.single-product .upsells{max-width:100% !important;min-width:0 !important;box-sizing:border-box !important;overflow-wrap:anywhere} body.single-product div.product{grid-template-columns:1fr !important;column-gap:0 !important} /* title / price / selects must wrap & fit */ body.single-product .product_title{word-break:break-word;overflow-wrap:anywhere} body.single-product .single_variation_wrap, body.single-product .variations, body.single-product .variations select, body.single-product form.cart, body.single-product form.cart > *, body.single-product .price{max-width:100% !important;width:auto;box-sizing:border-box} body.single-product .variations select, body.single-product .quantity input{max-width:100% !important} body.single-product .woocommerce-product-details__short-description{max-width:100% !important;box-sizing:border-box} } /* ════════════════════════════════════════════════════════════ GLOBAL MOBILE: kill ALL horizontal overflow + true full-width (definitive — covers every page, not just checkout) ════════════════════════════════════════════════════════════ */ @media(max-width:768px){ /* clip sideways overflow everywhere without breaking sticky header */ html,body{overflow-x:clip !important;max-width:100% !important;width:100% !important} /* full-bleed breakout (margin:calc(50% - 50vw)) overflows on iOS — neutralise it */ .single-product .gr-section{margin-left:0 !important;margin-right:0 !important;width:auto !important} /* content wrappers fill the screen with a small even gutter */ .olv-woo-content{max-width:100% !important;width:100% !important;margin:0 auto !important;padding-left:16px !important;padding-right:16px !important;box-sizing:border-box !important} .woocommerce-cart .woocommerce, .woocommerce-checkout .woocommerce{max-width:100% !important;width:100% !important;padding-left:0 !important;padding-right:0 !important;box-sizing:border-box} /* phone / country widgets (intl-tel-input, select2) must never exceed the row */ .iti,.iti__flag-container,.select2-container, .woocommerce-checkout .iti, .woocommerce-checkout .select2-container{max-width:100% !important;width:100% !important;box-sizing:border-box} .iti__country-list{max-width:90vw !important} } /* ════════════════════════════════════════════════════════════ GEO autocomplete UI ("Can't find the address…" + inline map) — give it breathing room like the other field rows. (Do NOT touch display — the geo JS toggles visibility of the override row/map.) ════════════════════════════════════════════════════════════ */ .woocommerce-checkout #olgeo-ac-ui{margin:14px 0 20px !important} .woocommerce-checkout #olgeo-ac-ovwrap{margin:12px 0 6px !important;font-size:.85rem !important;line-height:1.45 !important;color:#555 !important} .woocommerce-checkout #olgeo-ac-ovwrap input[type="checkbox"]{margin:2px 8px 0 0 !important;flex:0 0 auto} .woocommerce-checkout #olgeo-ac-map{margin:10px 0 !important} @media(max-width:768px){ .woocommerce-checkout #olgeo-ac-ui{margin:16px 0 22px !important} .woocommerce-checkout #olgeo-ac-ovwrap{margin:14px 0 6px !important} } /* ════════════════════════════════════════════════════════════ PHONE FIELD — TWO-BOX look: flag + dial code (+60) in their own grey box on the left, number in its own area. Number can never overlap the flag. (JS adds .olv-2box + injects the .olv-dial code.) ════════════════════════════════════════════════════════════ */ /* The flag CONTAINER must only occupy the left ~48px — otherwise it covers the whole field and every tap opens the country dropdown (so the number input can never be focused / typed). Clamp it so the number area stays tappable. */ .olv-2box .iti__flag-container, .olv-2box .flag-container{width:48px !important;max-width:48px !important;right:auto !important;left:0 !important;z-index:2 !important} .olv-2box .iti__selected-flag, .olv-2box .selected-flag{ width:48px !important;max-width:48px !important; background:#f5f5f7 !important;border-right:1px solid #e3e3e6 !important;border-radius:9px 0 0 9px !important; display:flex !important;align-items:center !important;justify-content:center !important; } .olv-2box input.iti__tel-input, .olv-2box input[type="tel"]{background:#fff !important;padding-left:60px !important} .olv-2box .olv-dial{display:none !important} /* ════════════════════════════════════════════════════════════ COUNTRY DROPDOWN — mobile friendly. Contained, scrollable card so it no longer covers the whole checkout page. ════════════════════════════════════════════════════════════ */ /* Card look on the OUTER container (works for both intl-tel-input versions) */ .iti__dropdown-content, .iti .iti__country-list{ max-width:min(92vw,360px) !important; background:#fff !important;border:1px solid #ececec !important;border-radius:14px !important; box-shadow:0 16px 48px rgba(0,0,0,.20) !important; z-index:2147483000 !important; } /* ONLY the list scrolls — the wrapper must NOT (that was the 2nd scrollbar) */ .iti__country-list{max-height:42vh !important;overflow-y:auto !important;-webkit-overflow-scrolling:touch !important;max-width:100% !important;box-sizing:border-box} .iti__dropdown-content{max-height:none !important;overflow:hidden !important} /* when the list sits inside the wrapper, don't double the border/shadow */ .iti__dropdown-content .iti__country-list{border:0 !important;box-shadow:none !important;border-radius:0 !important;max-width:100% !important} .iti__country{padding:11px 14px !important;font-size:.95rem !important} .iti__country.iti__highlight,.iti__country:hover{background:#fff0f5 !important} /* the search box at the top of the list */ .iti__search-input{padding:12px 14px !important;font-size:.95rem !important;border:0 !important;border-bottom:1px solid #eee !important;border-radius:14px 14px 0 0 !important} @media(max-width:768px){ .iti__dropdown-content,.iti .iti__country-list{max-width:92vw !important} .iti__country-list{max-height:40vh !important} .iti__country{padding:12px 14px !important} } /* ════════════════════════════════════════════════════════════ SELECT2 HIDDEN