/* Theme Name: CupTime Theme URI: https://cuptime.co Author: CupTime Trading W.L.L. Author URI: https://cuptime.co Description: Custom premium theme for CupTime — commercial coffee machines, rentals, maintenance and supplies across Qatar and the Gulf. Built on the site's real navigation, brand palette and product catalog. WooCommerce-ready. Version: 1.5.0 Requires at least: 6.4 Tested up to: 6.6 Requires PHP: 8.0 License: GNU General Public License v2 or later License URI: https://www.gnu.org/licenses/gpl-2.0.html Text Domain: cuptime Tags: e-commerce, custom-colors, custom-logo, custom-menu, featured-images, translation-ready This stylesheet also acts as the theme's single compiled CSS file (enqueued as-is via functions.php — no build step required). */ /* ============================= LOCAL FONT: OLDBURG DISPLAY ============================= */ /* Licensed font, self-hosted from /fonts, all four supplied weights registered as separate @font-face entries. The browser now picks the real weight for whatever font-weight a rule asks for (400/500/600/700) instead of synthesizing bold from a single weight. */ @font-face{ font-family:'Oldburg Display'; src:url('fonts/OldburgDisplay-Regular.ttf') format('truetype'); font-weight:400; font-style:normal; font-display:swap; } @font-face{ font-family:'Oldburg Display'; src:url('fonts/OldburgDisplay-Medium.ttf') format('truetype'); font-weight:500; font-style:normal; font-display:swap; } @font-face{ font-family:'Oldburg Display'; src:url('fonts/OldburgDisplay-SemiBold.ttf') format('truetype'); font-weight:600; font-style:normal; font-display:swap; } @font-face{ font-family:'Oldburg Display'; src:url('fonts/OldburgDisplay-Bold.ttf') format('truetype'); font-weight:700; font-style:normal; font-display:swap; } @font-face{ font-family:'Oldburg Display'; src:url('fonts/OldburgDisplay-Bold.ttf') format('truetype'); font-weight:800; font-style:normal; font-display:swap; } /* ============================= TOKENS ============================= */ :root{ --black:#000000; --ink:#0a0908; /* near-black surface, softened for large fills */ --white:#ffffff; --mist:#e5e5e5; --taupe-100:#b5a092; --taupe-300:#a48b79; --taupe-500:#9d816c; --taupe-ink:#7a6353; /* AA-safe taupe for small text on light backgrounds */ --text-soft:#6b6560; --text-soft-on-dark:#b9b2ab; --border-soft:rgba(0,0,0,.1); --border-soft-on-dark:rgba(255,255,255,.14); --radius-sm:10px; --radius-md:20px; --radius-lg:32px; --radius-pill:999px; --container:1280px; --ease:cubic-bezier(.16,1,.3,1); } /* ============================= DARK MODE ============================= */ /* data-theme is set on by an inline script in header.php (before first paint, so there's no flash) — defaults to the visitor's system preference on first visit, then remembers an explicit choice via localStorage. Everything below flows through the same tokens the rest of the stylesheet already uses, so no component rules need touching. */ [data-theme="dark"]{ --black:#f2efec; --white:#15130f; --mist:#211e19; --ink:#000000; --taupe-ink:#c9b6a8; --text-soft:#a39b92; --text-soft-on-dark:#c2bbb3; --border-soft:rgba(255,255,255,.12); } /* These sections are deliberately dark for visual rhythm regardless of theme mode (hero, footer, stats band, the taupe CTA band, header/nav chrome) — pin them back to fixed colors so dark mode doesn't turn their text invisible or flip their intentional contrast. */ [data-theme="dark"] .bg-ink, [data-theme="dark"] .bg-taupe, [data-theme="dark"] .hero, [data-theme="dark"] .site-header, [data-theme="dark"] .mobile-drawer, [data-theme="dark"] .search-overlay, [data-theme="dark"] .page-header, [data-theme="dark"] .story-visual{ --white:#ffffff; --black:#000000; } *,*::before,*::after{box-sizing:border-box;margin:0;padding:0;} /* ============================= LAYOUT MODE: FULL / BOXED ============================= */ /* body.layout-full is the default (no extra styling needed — sections already run full-bleed with .container centering content, which is the site's normal look). body.layout-boxed adds an outer page backdrop and constrains #page to a wide, centered frame. Fixed- position chrome (header, mobile drawer, WhatsApp button, back-to-top) intentionally stays full-viewport-width even in boxed mode — that's standard practice for boxed WordPress themes, not an oversight. */ body.layout-boxed{background:var(--mist);} [data-theme="dark"] body.layout-boxed{background:#0d0b09;} body.layout-boxed #page{ max-width:1600px; margin-inline:auto; background:var(--white); box-shadow:0 0 60px rgba(0,0,0,.08); } [data-theme="dark"] body.layout-boxed #page{box-shadow:0 0 60px rgba(0,0,0,.4);} html{scroll-behavior:smooth;} body{ font-family:'Poppins',sans-serif; color:var(--black); background:var(--white); -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale; line-height:1.6; overflow-x:hidden; } img,svg{display:block;max-width:100%;} a{color:inherit;text-decoration:none;} ul{list-style:none;} button{font:inherit;background:none;border:none;cursor:pointer;color:inherit;} input{font:inherit;} h1,h2,h3,h4{ font-family:'Oldburg Display',sans-serif; font-weight:600; letter-spacing:-0.02em; line-height:1.08; } .visually-hidden{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;} :focus-visible{outline:2px solid var(--taupe-500);outline-offset:3px;border-radius:4px;} /* ============================= LAYOUT ============================= */ .container{max-width:var(--container);margin-inline:auto;padding-inline:var(--container-padding,clamp(1.25rem,4vw,3rem));} .section{padding-block:clamp(4.5rem,9vw,8rem);} .section-tight{padding-block:clamp(3rem,6vw,5rem);} .bg-white{background:var(--white);color:var(--black);} .bg-mist{background:var(--mist);color:var(--black);} .bg-ink{background:var(--ink);color:var(--white);} .bg-taupe{background:var(--taupe-500);color:var(--black);} .eyebrow{ display:inline-flex;align-items:center;gap:.5rem; font-size:.72rem;font-weight:600;letter-spacing:.16em;text-transform:uppercase; color:var(--taupe-ink);margin-bottom:1rem; } .eyebrow::before{content:"";width:22px;height:1px;background:var(--taupe-ink);display:inline-block;} .bg-ink .eyebrow{color:var(--taupe-100);} .bg-ink .eyebrow::before{background:var(--taupe-100);} .bg-taupe .eyebrow{color:rgba(0,0,0,.7);} .bg-taupe .eyebrow::before{background:rgba(0,0,0,.4);} .section-head{max-width:640px;margin-bottom:clamp(2.5rem,5vw,4rem);} .section-head h2{font-size:clamp(2rem,4vw,3rem);margin-bottom:1rem;} .section-head p{color:var(--text-soft);font-size:1.05rem;max-width:540px;} .bg-ink .section-head p{color:var(--text-soft-on-dark);} .bg-taupe .section-head p{color:rgba(0,0,0,.72);} .section-head.center{margin-inline:auto;text-align:center;} .section-head.split{display:flex;justify-content:space-between;align-items:flex-end;gap:2rem;max-width:none;} /* ============================= ICONS ============================= */ .icon{width:1.4rem;height:1.4rem;stroke:currentColor;fill:none;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round;flex-shrink:0;} /* ============================= BUTTONS ============================= */ .btn{ display:inline-flex;align-items:center;justify-content:center;gap:.55rem; padding:1rem 1.9rem;border-radius:var(--radius-pill); font-weight:600;font-size:.92rem;white-space:nowrap; border:1.5px solid transparent;cursor:pointer; transition:transform .3s var(--ease),box-shadow .3s var(--ease),background-color .3s var(--ease),color .3s var(--ease),border-color .3s var(--ease); } .btn .icon{width:1.1rem;height:1.1rem;} .btn-dark{background:var(--black);color:var(--white);} .btn-dark:hover{box-shadow:0 14px 28px -10px rgba(0,0,0,.4);transform:translateY(-2px);} .btn-light{background:var(--white);color:var(--black);} .btn-light:hover{box-shadow:0 14px 28px -10px rgba(0,0,0,.25);transform:translateY(-2px);} .btn-outline-dark{border-color:rgba(0,0,0,.22);color:var(--black);background:transparent;} .btn-outline-dark:hover{background:var(--mist);transform:translateY(-2px);} .btn-outline-light{border-color:rgba(255,255,255,.35);color:var(--white);background:transparent;} .btn-outline-light:hover{background:rgba(255,255,255,.12);transform:translateY(-2px);} .btn-taupe{background:var(--taupe-500);color:var(--white);} .btn-taupe:hover{box-shadow:0 14px 28px -10px rgba(157,129,108,.55);transform:translateY(-2px);} .btn-block{width:100%;} .link-arrow{display:inline-flex;align-items:center;gap:.4rem;font-weight:600;font-size:.9rem;position:relative;} .link-arrow .icon{width:1rem;height:1rem;transition:transform .3s var(--ease);} .link-arrow:hover .icon{transform:translateX(4px);} /* ============================= REVEAL ============================= */ .reveal{opacity:0;transform:translateY(28px);transition:opacity .8s var(--ease),transform .8s var(--ease);} .reveal.is-visible{opacity:1;transform:translateY(0);} .reveal-delay-1.is-visible{transition-delay:.08s;} .reveal-delay-2.is-visible{transition-delay:.16s;} .reveal-delay-3.is-visible{transition-delay:.24s;} .reveal-delay-4.is-visible{transition-delay:.32s;} /* ============================= HEADER ============================= */ .skip-link{position:absolute;top:-50px;left:1rem;background:var(--black);color:var(--white);padding:.75rem 1.25rem;border-radius:var(--radius-sm);z-index:200;transition:top .25s var(--ease);} .skip-link:focus{top:1rem;} .site-header{ position:fixed;top:0;left:0;right:0;z-index:100; padding-block:1.4rem; transition:padding .4s var(--ease),background-color .4s var(--ease),box-shadow .4s var(--ease),border-color .4s var(--ease); border-bottom:1px solid transparent; } .site-header .container{display:flex;align-items:center;justify-content:space-between;gap:2rem;} .site-header.is-scrolled{ padding-block:.9rem; background:rgba(10,9,8,.72); backdrop-filter:blur(18px) saturate(140%); -webkit-backdrop-filter:blur(18px) saturate(140%); border-bottom-color:rgba(255,255,255,.08); box-shadow:0 10px 30px -20px rgba(0,0,0,.5); } .logo{font-family:'Oldburg Display',sans-serif;font-weight:700;font-size:1.5rem;letter-spacing:.02em;color:var(--white);} .logo span{color:var(--taupe-100);} .main-nav{display:flex;align-items:center;gap:2.1rem;} .nav-link{ font-size:.94rem;font-weight:500;color:rgba(255,255,255,.88); display:flex;align-items:center;gap:.3rem;padding:.4rem 0; position:relative;white-space:nowrap; } .nav-link::after{content:"";position:absolute;left:0;bottom:-2px;width:0;height:1px;background:var(--taupe-100);transition:width .3s var(--ease);} .nav-link:hover::after,.nav-item.has-mega:focus-within .nav-link::after{width:100%;} .nav-link .icon{width:.85rem;height:.85rem;transition:transform .3s var(--ease);} .nav-item.has-mega:hover .nav-link .icon,.nav-item.has-mega:focus-within .nav-link .icon{transform:rotate(180deg);} .nav-link.is-active{color:var(--white);} .nav-link.is-active::after{width:100%;background:var(--taupe-100);} .drawer-nav .is-active{color:var(--taupe-100);} .nav-item{position:relative;} .mega-menu{ position:absolute;top:calc(100% + 1.4rem);left:50%;transform:translate(-50%,-8px); width:min(880px,80vw); background:rgba(12,11,10,.94);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px); border:1px solid rgba(255,255,255,.1);border-radius:var(--radius-lg); padding:2.4rem;display:grid;grid-template-columns:1fr 1fr 1fr 1.1fr;gap:2rem; opacity:0;visibility:hidden;pointer-events:none; transition:opacity .35s var(--ease),transform .35s var(--ease),visibility .35s; box-shadow:0 40px 70px -30px rgba(0,0,0,.6); } .nav-item.has-mega:hover .mega-menu,.nav-item.has-mega:focus-within .mega-menu{ opacity:1;visibility:visible;pointer-events:auto;transform:translate(-50%,0); } .mega-heading{display:block;font-size:.7rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--taupe-100);margin-bottom:1rem;} .mega-col a{display:block;color:rgba(255,255,255,.82);font-size:.92rem;padding:.5rem 0;transition:color .25s,transform .25s;} .mega-col a:hover{color:var(--white);transform:translateX(3px);} .mega-feature{background:rgba(255,255,255,.05);border-radius:var(--radius-md);padding:1.4rem;} .mega-feature p{font-size:.86rem;color:rgba(255,255,255,.72);margin-bottom:1rem;} .mega-cta{font-size:.86rem;font-weight:600;color:var(--taupe-100);} .header-actions{display:flex;align-items:center;gap:.9rem;} .lang-switch{font-size:.72rem;font-weight:700;letter-spacing:.02em;text-decoration:none;} .theme-icon-sun{display:none;} .theme-icon-moon{display:block;} [data-theme="dark"] .theme-icon-sun{display:block;} [data-theme="dark"] .theme-icon-moon{display:none;} .cart-badge{position:absolute;top:.15rem;right:.15rem;min-width:1.05rem;height:1.05rem;border-radius:50%;background:var(--taupe-300);color:#fff;font-size:.6rem;font-weight:700;display:flex;align-items:center;justify-content:center;padding:0 .2rem;line-height:1;} .icon-btn{ width:2.6rem;height:2.6rem;display:flex;align-items:center;justify-content:center; border-radius:50%;color:var(--white);transition:background-color .3s var(--ease); } .icon-btn:hover{background:rgba(255,255,255,.12);} .header-cta{display:inline-flex;} .mobile-toggle{ width:2.6rem;height:2.6rem;display:none;align-items:center;justify-content:center; color:var(--white);border-radius:50%; } .mobile-toggle:hover{background:rgba(255,255,255,.12);} /* Search overlay */ .search-overlay{ position:fixed;inset:0;background:rgba(6,5,5,.88);backdrop-filter:blur(10px); z-index:300;display:flex;align-items:flex-start;justify-content:center;padding-top:14vh; opacity:0;visibility:hidden;transition:opacity .35s var(--ease),visibility .35s; } .search-overlay.is-open{opacity:1;visibility:visible;} .search-box{width:min(640px,88vw);} .search-box form{display:flex;align-items:center;gap:1rem;border-bottom:1.5px solid rgba(255,255,255,.3);padding-bottom:1rem;} .search-box input{flex:1;background:none;border:none;color:var(--white);font-size:1.6rem;font-family:'Oldburg Display',sans-serif;} .search-box input::placeholder{color:rgba(255,255,255,.4);} .search-box .icon{color:rgba(255,255,255,.6);width:1.6rem;height:1.6rem;} .search-close{position:absolute;top:2rem;right:2rem;color:var(--white);width:2.8rem;height:2.8rem;border-radius:50%;display:flex;align-items:center;justify-content:center;} .search-close:hover{background:rgba(255,255,255,.12);} .search-hint{margin-top:1.2rem;font-size:.85rem;color:rgba(255,255,255,.45);} /* Mobile drawer */ .mobile-drawer{ position:fixed;top:0;right:0;bottom:0;width:min(360px,86vw); background:var(--ink);color:var(--white);z-index:250; padding:2rem 1.75rem;overflow-y:auto; transform:translateX(100%);transition:transform .45s var(--ease); display:flex;flex-direction:column; } .mobile-drawer.is-open{transform:translateX(0);} .drawer-top{display:flex;justify-content:space-between;align-items:center;margin-bottom:2.5rem;} .drawer-nav{display:flex;flex-direction:column;} .drawer-nav li{border-bottom:1px solid rgba(255,255,255,.09);} .drawer-nav a,.drawer-nav summary{display:flex;align-items:center;justify-content:space-between;padding:1.1rem 0;font-size:1.05rem;font-weight:500;cursor:pointer;list-style:none;} .drawer-nav summary::-webkit-details-marker{display:none;} .drawer-nav details[open] summary .icon{transform:rotate(180deg);} .drawer-sub{padding-bottom:1rem;display:flex;flex-direction:column;gap:.2rem;} .drawer-sub a{padding:.55rem 0 .55rem .5rem;font-size:.92rem;color:rgba(255,255,255,.72);font-weight:400;} .drawer-cta{margin-top:auto;padding-top:2rem;display:flex;flex-direction:column;gap:.8rem;} .scrim{position:fixed;inset:0;background:rgba(0,0,0,.5);z-index:240;opacity:0;visibility:hidden;transition:opacity .4s,visibility .4s;} .scrim.is-open{opacity:1;visibility:visible;} body.no-scroll{overflow:hidden;} /* ============================= HERO ============================= */ .hero{ position:relative;min-height:100vh;display:flex;align-items:center; background:radial-gradient(120% 100% at 50% 0%,#151210 0%,var(--ink) 55%,#050403 100%); color:var(--white);overflow:hidden;padding-top:6rem; } .hero-glow{ position:absolute;border-radius:50%;filter:blur(80px);opacity:.35;pointer-events:none; animation:drift 22s ease-in-out infinite; } .hero-glow-1{width:480px;height:480px;background:var(--taupe-500);top:-10%;left:-8%;} .hero-glow-2{width:380px;height:380px;background:var(--taupe-300);bottom:-15%;right:-5%;animation-delay:-9s;} @keyframes drift{0%,100%{transform:translate(0,0) scale(1);}50%{transform:translate(30px,-24px) scale(1.08);}} .hero-grain{position:absolute;inset:0;opacity:.5;pointer-events:none; background-image:radial-gradient(rgba(255,255,255,.035) 1px,transparent 1px); background-size:3px 3px;} .floater{position:absolute;opacity:.5;color:var(--taupe-100);animation:floaty 9s ease-in-out infinite;pointer-events:none;} .floater .icon{width:2.1rem;height:2.1rem;} .floater-1{top:20%;left:7%;animation-duration:10s;} .floater-2{top:62%;left:13%;animation-duration:8s;animation-delay:-3s;} .floater-3{top:28%;right:9%;animation-duration:11s;animation-delay:-5s;} .floater-4{top:70%;right:16%;animation-duration:9s;animation-delay:-1.5s;} @keyframes floaty{0%,100%{transform:translateY(0) rotate(0deg);}50%{transform:translateY(-18px) rotate(6deg);}} .hero .container{position:relative;z-index:2;display:grid;grid-template-columns:1.1fr .9fr;gap:2rem;align-items:center;} .hero-copy h1{font-size:clamp(2.9rem,6.2vw,5.4rem);margin-bottom:1.5rem;} .hero-copy h1 em{font-style:normal;color:var(--taupe-100);} .hero-copy p{font-size:clamp(1.02rem,1.4vw,1.2rem);color:var(--text-soft-on-dark);max-width:460px;margin-bottom:2.4rem;} .hero-actions{display:flex;flex-wrap:wrap;gap:1rem;margin-bottom:3rem;} .hero-meta{display:flex;gap:2.2rem;flex-wrap:wrap;} .hero-meta div{display:flex;flex-direction:column;gap:.15rem;} .hero-meta strong{font-family:'Oldburg Display',sans-serif;font-size:1.3rem;} .hero-meta span{font-size:.78rem;color:var(--text-soft-on-dark);letter-spacing:.03em;} .gauge-wrap{position:relative;display:flex;align-items:center;justify-content:center;} .gauge-svg{width:min(480px,86vw);height:auto;overflow:visible;} .gauge-track,.gauge-fill{fill:none;stroke-width:3;stroke-linecap:round;transform:rotate(135deg);transform-origin:100px 100px;} .gauge-track{stroke:rgba(255,255,255,.14);stroke-dasharray:75 100;} .gauge-fill{stroke:var(--taupe-300);stroke-dasharray:0 100;transition:stroke-dasharray 1.8s var(--ease);} .gauge-fill.is-visible{stroke-dasharray:57 100;} .gauge-ticks{transform:rotate(135deg);transform-origin:100px 100px;} .gauge-ticks line{stroke:rgba(255,255,255,.22);stroke-width:1;} .gauge-needle-settle{transform-origin:100px 100px;transform:rotate(-58deg);transition:transform 2s var(--ease);} .gauge-needle-settle.is-visible{transform:rotate(78deg);} .gauge-needle-breathe{transform-origin:100px 100px;animation:needle-breathe 4.6s ease-in-out infinite;} @keyframes needle-breathe{0%,100%{transform:rotate(0deg);}50%{transform:rotate(2.5deg);}} .gauge-needle{stroke:var(--taupe-100);stroke-width:2.5;stroke-linecap:round;} .gauge-hub{fill:var(--taupe-100);} .gauge-center-label{position:absolute;text-align:center;top:56%;left:50%;transform:translate(-50%,-50%);} .gauge-center-label strong{display:block;font-family:'Oldburg Display',sans-serif;font-size:1rem;letter-spacing:.04em;color:var(--white);} .gauge-center-label span{font-size:.68rem;letter-spacing:.14em;text-transform:uppercase;color:var(--text-soft-on-dark);} .scroll-cue{position:absolute;bottom:2.2rem;left:50%;transform:translateX(-50%);display:flex;flex-direction:column;align-items:center;gap:.6rem;color:rgba(255,255,255,.55);font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;z-index:2;} .scroll-cue .line{width:1px;height:34px;background:linear-gradient(to bottom,rgba(255,255,255,.6),transparent);animation:scrollcue 2.2s ease-in-out infinite;} @keyframes scrollcue{0%{transform:scaleY(0);transform-origin:top;}50%{transform:scaleY(1);transform-origin:top;}51%{transform-origin:bottom;}100%{transform:scaleY(0);transform-origin:bottom;}} /* ============================= MARQUEE ============================= */ .trust-strip{padding-block:2.4rem;overflow:hidden;border-bottom:1px solid var(--border-soft);} .trust-label{font-size:.75rem;letter-spacing:.14em;text-transform:uppercase;color:var(--text-soft);margin-bottom:1.1rem;text-align:center;} .marquee{overflow:hidden;-webkit-mask-image:linear-gradient(to right,transparent,#000 8%,#000 92%,transparent);mask-image:linear-gradient(to right,transparent,#000 8%,#000 92%,transparent);} .marquee-track{display:flex;width:max-content;gap:3.5rem;animation:marquee 34s linear infinite;} .marquee-track span{font-family:'Oldburg Display',sans-serif;font-size:1.25rem;font-weight:500;color:var(--text-soft);white-space:nowrap;opacity:.7;} @keyframes marquee{from{transform:translateX(0);}to{transform:translateX(-50%);}} /* ============================= CARDS (shared) ============================= */ .card-icon{ width:3.2rem;height:3.2rem;border-radius:var(--radius-sm); display:flex;align-items:center;justify-content:center; background:var(--mist);color:var(--black);margin-bottom:1.5rem; transition:background-color .3s,color .3s,transform .3s var(--ease); } .bg-ink .card-icon,.bg-taupe .card-icon{background:rgba(255,255,255,.1);color:var(--white);} /* ============================= SERVICES ============================= */ .services-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:1.6px;background:var(--border-soft);border:1px solid var(--border-soft);border-radius:var(--radius-lg);overflow:hidden;} .service-card{background:var(--white);padding:2.4rem 2rem;transition:background-color .35s var(--ease);} .service-card:hover{background:var(--mist);} .service-card:hover .card-icon{background:var(--black);color:var(--white);transform:translateY(-3px);} .service-card h3{font-size:1.18rem;margin-bottom:.7rem;} .service-card p{font-size:.92rem;color:var(--text-soft);margin-bottom:1.3rem;} /* ============================= CATEGORIES ============================= */ .cat-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:1.6rem;} .cat-card{border-radius:var(--radius-lg);overflow:hidden;background:var(--white);border:1px solid var(--border-soft);transition:transform .4s var(--ease),box-shadow .4s var(--ease);} .cat-card:hover{transform:translateY(-6px);box-shadow:0 30px 50px -30px rgba(0,0,0,.25);} .cat-art{aspect-ratio:4/3;position:relative;display:flex;align-items:center;justify-content:center;overflow:hidden;} .cat-art .icon{width:3rem;height:3rem;color:rgba(255,255,255,.85);position:relative;z-index:1;} .tone-1{--tone-bg:linear-gradient(140deg,#2b2622,var(--ink) 60%);} .tone-2{--tone-bg:linear-gradient(140deg,var(--taupe-500),#7c6552);} .tone-3{--tone-bg:linear-gradient(140deg,var(--taupe-300),#5f4d3f);} .tone-4{--tone-bg:linear-gradient(140deg,#3a332d,var(--ink) 70%);} .tone-5{--tone-bg:linear-gradient(140deg,var(--taupe-100),var(--taupe-500));} .tone-6{--tone-bg:linear-gradient(140deg,#242019,#050403);} .cat-art::before{content:"";position:absolute;inset:0;opacity:.9;transition:transform .6s var(--ease);background:var(--tone-bg);} .cat-card:hover .cat-art::before{transform:scale(1.08);} .cat-body{padding:1.5rem 1.6rem 1.8rem;display:flex;align-items:center;justify-content:space-between;gap:1rem;} .cat-body h3{font-size:1.05rem;} .cat-body span{font-size:.78rem;color:var(--text-soft);} /* ============================= BRANDS ============================= */ .brands-row{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:2rem 2.5rem;padding-block:1rem;} .brand-name{font-family:'Oldburg Display',sans-serif;font-size:1.35rem;font-weight:600;color:var(--text-soft);transition:color .3s;} .brand-name:hover{color:var(--black);} /* ============================= INDUSTRIES ============================= */ .industry-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:1.6rem;} .industry-card{background:var(--white);border-radius:var(--radius-lg);padding:2.2rem;border:1px solid var(--border-soft);transition:border-color .3s,transform .4s var(--ease);} .industry-card:hover{border-color:var(--taupe-300);transform:translateY(-4px);} .industry-card h3{font-size:1.1rem;margin-bottom:.6rem;} .industry-card p{font-size:.9rem;color:var(--text-soft);} /* ============================= STATS ============================= */ .stats-band{position:relative;overflow:hidden;} .stats-gauge-bg{position:absolute;right:-8%;top:50%;transform:translateY(-50%);width:640px;opacity:.16;pointer-events:none;} .stats-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:2.5rem;position:relative;z-index:1;} .stat strong{display:block;font-family:'Oldburg Display',sans-serif;font-size:clamp(2.6rem,5vw,3.6rem);font-weight:700;color:var(--white);} .stat span{font-size:.85rem;color:var(--text-soft-on-dark);letter-spacing:.03em;} /* ============================= CTA BAND ============================= */ .cta-band-inner{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:2rem;} .cta-band h2{font-size:clamp(1.8rem,3.4vw,2.6rem);max-width:520px;margin-bottom:.6rem;color:var(--black);} .cta-band p{max-width:460px;color:rgba(0,0,0,.72);} .bg-taupe .btn-outline-light{border-color:rgba(0,0,0,.35);color:var(--black);} .bg-taupe .btn-outline-light:hover{background:rgba(0,0,0,.08);} .cta-band-actions{display:flex;gap:1rem;flex-wrap:wrap;} /* ============================= TESTIMONIALS ============================= */ .testi-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:1.6rem;} .testi-card{background:var(--mist);border-radius:var(--radius-lg);padding:2.3rem;display:flex;flex-direction:column;gap:1.4rem;} .testi-quote{font-family:'Oldburg Display',sans-serif;font-size:1.08rem;font-weight:500;line-height:1.5;} .testi-who{display:flex;flex-direction:column;gap:.1rem;} .testi-who strong{font-size:.9rem;} .testi-who span{font-size:.8rem;color:var(--text-soft);} /* ============================= FAQ ============================= */ .faq-list{max-width:800px;} .faq-item{border-bottom:1px solid var(--border-soft);} .faq-question{width:100%;display:flex;align-items:center;justify-content:space-between;gap:1.5rem;padding:1.6rem 0;text-align:left;font-size:1.05rem;font-weight:500;font-family:'Oldburg Display',sans-serif;} .faq-question .icon{transition:transform .35s var(--ease);color:var(--taupe-500);} .faq-item.is-open .faq-question .icon{transform:rotate(180deg);} .faq-answer{display:grid;grid-template-rows:0fr;transition:grid-template-rows .4s var(--ease);} .faq-answer-inner{overflow:hidden;} .faq-item.is-open .faq-answer{grid-template-rows:1fr;} .faq-answer p{padding-bottom:1.6rem;color:var(--text-soft);max-width:640px;font-size:.96rem;} /* ============================= NEWSLETTER ============================= */ .newsletter-box{background:var(--white);border:1.5px solid var(--border-soft);border-radius:var(--radius-lg);padding:clamp(2rem,5vw,3.5rem);display:flex;justify-content:space-between;align-items:center;gap:2.5rem;flex-wrap:wrap;} .newsletter-copy h3{font-size:clamp(1.4rem,2.6vw,1.9rem);margin-bottom:.5rem;} .newsletter-copy p{color:var(--text-soft);max-width:380px;font-size:.95rem;} .newsletter-form{display:flex;gap:.7rem;flex:1;min-width:280px;max-width:420px;} .newsletter-form input{flex:1;padding:1rem 1.3rem;border-radius:var(--radius-pill);border:1.5px solid var(--border-soft);font-size:.92rem;} .newsletter-form input:focus{border-color:var(--taupe-500);outline:none;} .newsletter-success{display:none;align-items:center;gap:.6rem;color:var(--taupe-500);font-weight:600;font-size:.92rem;} .newsletter-success.is-visible{display:flex;} .newsletter-form.is-hidden{display:none;} /* ============================= FINAL CTA ============================= */ .final-cta{text-align:center;} .final-cta h2{font-size:clamp(2.2rem,5vw,3.8rem);max-width:800px;margin-inline:auto;margin-bottom:1.4rem;} .final-cta p{color:var(--text-soft-on-dark);max-width:480px;margin-inline:auto;margin-bottom:2.4rem;} .final-cta-actions{display:flex;justify-content:center;gap:1rem;flex-wrap:wrap;} /* ============================= FOOTER ============================= */ footer{padding-top:clamp(4rem,8vw,6rem);} .footer-top{display:grid;grid-template-columns:1.3fr repeat(3,1fr) 1.3fr;gap:2.5rem;padding-bottom:3.5rem;border-bottom:1px solid rgba(255,255,255,.1);} .footer-brand p{color:var(--text-soft-on-dark);font-size:.9rem;margin:1.2rem 0 1.6rem;max-width:260px;} .social-row{display:flex;gap:.7rem;} .social-row a{width:2.4rem;height:2.4rem;border-radius:50%;border:1px solid rgba(255,255,255,.18);display:flex;align-items:center;justify-content:center;transition:background-color .3s,border-color .3s;} .social-row a:hover{background:rgba(255,255,255,.1);border-color:rgba(255,255,255,.4);} .social-row .icon{width:1.1rem;height:1.1rem;} .footer-col h4{font-family:'Oldburg Display',sans-serif;font-size:.85rem;letter-spacing:.06em;text-transform:uppercase;color:var(--taupe-100);margin-bottom:1.3rem;} .footer-col li{margin-bottom:.75rem;} .footer-col a{font-size:.9rem;color:var(--text-soft-on-dark);transition:color .25s;} .footer-col a:hover{color:var(--white);} .footer-contact p{font-size:.86rem;color:var(--text-soft-on-dark);margin-bottom:1.4rem;line-height:1.6;} .footer-contact strong{display:block;color:var(--white);font-size:.86rem;margin-bottom:.3rem;} .footer-bottom{display:flex;justify-content:space-between;align-items:center;gap:1.5rem;flex-wrap:wrap;padding-block:2rem;} .footer-bottom p{font-size:.82rem;color:var(--text-soft-on-dark);} .footer-legal{display:flex;gap:1.6rem;} .footer-legal a{font-size:.82rem;color:var(--text-soft-on-dark);} .footer-legal a:hover{color:var(--white);} /* ============================= FLOATING UI ============================= */ .whatsapp-fab{ position:fixed;bottom:1.8rem;right:1.8rem;z-index:90; width:3.6rem;height:3.6rem;border-radius:50%;background:var(--black);color:var(--white); display:flex;align-items:center;justify-content:center;box-shadow:0 16px 32px -12px rgba(0,0,0,.4); transition:transform .3s var(--ease),background-color .3s; } .whatsapp-fab:hover{transform:scale(1.08);background:var(--taupe-500);} .whatsapp-fab .icon{width:1.6rem;height:1.6rem;} .back-to-top{ position:fixed;bottom:1.8rem;right:5.9rem;z-index:90; width:3.6rem;height:3.6rem;border-radius:50%;background:var(--white);color:var(--black); border:1.5px solid var(--border-soft);display:flex;align-items:center;justify-content:center; opacity:0;visibility:hidden;transform:translateY(10px); transition:opacity .3s,visibility .3s,transform .3s,background-color .3s; } .back-to-top.is-visible{opacity:1;visibility:visible;transform:translateY(0);} .back-to-top:hover{background:var(--mist);} .back-to-top .icon{width:1.2rem;height:1.2rem;transform:rotate(-90deg);} /* ============================= RESPONSIVE ============================= */ @media (max-width:1024px){ .main-nav,.header-cta{display:none;} .mobile-toggle{display:flex;} .hero .container{grid-template-columns:1fr;text-align:center;} .hero-copy p{margin-inline:auto;} .hero-actions,.hero-meta{justify-content:center;} .gauge-wrap{margin-top:2rem;} .footer-top{grid-template-columns:1fr 1fr;} } @media (max-width:768px){ .services-grid{grid-template-columns:1fr;} .footer-top{grid-template-columns:1fr;gap:2.5rem;} .newsletter-box{flex-direction:column;align-items:stretch;text-align:left;} .cta-band-inner{flex-direction:column;align-items:flex-start;} .stats-gauge-bg{display:none;} .back-to-top{right:1.8rem;bottom:5.9rem;} } @media (max-width:480px){ .hero-actions{flex-direction:column;width:100%;} .hero-actions .btn{width:100%;} .btn{padding:.95rem 1.5rem;} } /* ============================= VIEW TRANSITIONS (cross-page) ============================= */ /* Progressive enhancement: browsers without support just do a normal navigation, nothing breaks. Chromium 126+ / Edge as of this writing; Safari and Firefox ignore this block entirely and lose nothing. */ @view-transition{ navigation:auto; } ::view-transition-old(root),::view-transition-new(root){ animation-duration:.5s; animation-timing-function:cubic-bezier(.16,1,.3,1); } .site-header{view-transition-name:site-header;} ::view-transition-old(site-header),::view-transition-new(site-header){ animation:none; mix-blend-mode:normal; } /* ============================= ICON DRAW-IN ============================= */ /* Applied via JS (main.js) to selected icons on scroll-reveal. Every shape in the sprite carries pathLength="100" (see icon-sprite.php), so a single, inheritable stroke-dasharray works uniformly across every icon regardless of its actual geometry — and because stroke-dasharray/ stroke-dashoffset are inheritable SVG properties, setting them here on the wrapper correctly reaches the shapes cloned in through , even though CSS descendant selectors can't target them directly. */ .icon-draw{ stroke-dasharray:100; stroke-dashoffset:100; transition:stroke-dashoffset 1.1s var(--ease); } .icon-draw.is-drawn{stroke-dashoffset:0;} /* ============================= HERO ENTRANCE ============================= */ .hero-enter{opacity:0;transform:translateY(22px);transition:opacity .9s var(--ease),transform .9s var(--ease);} .hero-enter.is-visible{opacity:1;transform:translateY(0);} /* ============================= CART BADGE PULSE ============================= */ @keyframes cart-pulse{ 0%{transform:scale(1);} 35%{transform:scale(1.45);} 60%{transform:scale(.9);} 100%{transform:scale(1);} } .cart-badge.is-pulsing{animation:cart-pulse .5s var(--ease);} .icon-btn.is-pulsing svg{animation:cart-pulse .5s var(--ease);} /* ============================= BUTTON PRESS FEEDBACK ============================= */ .btn:active,.filter-pill:active,.page-num:active,.faq-question:active{transform:scale(.97);} .wishlist-btn:active{transform:scale(.85);} /* ============================= HERO CURSOR GLOW ============================= */ .hero-cursor-glow{ position:absolute;width:420px;height:420px;border-radius:50%;pointer-events:none;z-index:1; background:radial-gradient(circle,rgba(157,129,108,.18) 0%,transparent 70%); transform:translate(-50%,-50%);opacity:0;transition:opacity .4s; will-change:transform; } .hero:hover .hero-cursor-glow{opacity:1;} /* ============================= GALLERY IMAGE REVEAL ============================= */ .woocommerce-product-gallery__wrapper{ opacity:0;transform:scale(1.03); transition:opacity .8s var(--ease),transform 1s var(--ease); } .woocommerce-product-gallery__wrapper.is-visible{opacity:1;transform:scale(1);} /* ============================= RTL / ARABIC ============================= */ /* Scoped to [dir="rtl"] (set on by inc/i18n.php when Arabic is active). Most of the layout — header, hero grid, forms grid, cards — already mirrors correctly for free, since flexbox/grid are direction- aware by default. This block only overrides the PHYSICAL left/right properties that don't: absolute-positioned label/badge/trigger elements, explicit text-align, and icons whose direction carries reading-flow meaning (arrows). Treat this as solid structural RTL coverage, not an exhaustive pixel-for-pixel mirror of every rule. */ [dir="rtl"] body{ font-family:'IBM Plex Sans Arabic','Poppins',sans-serif; } [dir="rtl"] h1,[dir="rtl"] h2,[dir="rtl"] h3,[dir="rtl"] h4{ font-family:'IBM Plex Sans Arabic',sans-serif; } /* Directional icons: arrows carry reading-flow meaning, so they flip. (Text-based arrows like "Shop →" are handled at the content level — see 'Shop →' in inc/translations.php — not here, since flipping text with scaleX would mirror the Arabic letters into nonsense.) */ [dir="rtl"] .link-arrow .icon, [dir="rtl"] .breadcrumb .icon, [dir="rtl"] .mega-cta .icon{ transform:scaleX(-1); } [dir="rtl"] .link-arrow:hover .icon{transform:scaleX(-1) translateX(4px);} [dir="rtl"] .icon-flip{transform:scaleX(-1) rotate(180deg);} /* Text alignment */ [dir="rtl"] .faq-question, [dir="rtl"] .spec-table th,[dir="rtl"] .spec-table td, [dir="rtl"] .confirmation-summary, [dir="rtl"] .next-steps, [dir="rtl"] .woocommerce table.shop_table th, [dir="rtl"] .woocommerce-tabs table.shop_attributes th, [dir="rtl"] .woocommerce-tabs table.shop_attributes td{ text-align:right; } [dir="rtl"] .newsletter-box{text-align:right;} /* Floating-label form fields: label sits inset from the right instead */ [dir="rtl"] .field label{left:auto;right:1.1rem;} [dir="rtl"] .field input,[dir="rtl"] .field textarea{text-align:right;} [dir="rtl"] .field-static select{ background-position:left 1rem center;padding:1rem 1.1rem 1rem 2.4rem; } [dir="rtl"] .sort-select,[dir="rtl"] .woocommerce-ordering select{ background-position:left .7rem center;padding:.65rem 1.1rem .65rem 2.4rem; } /* Absolute-positioned floating elements pinned to a physical side */ [dir="rtl"] .wishlist-btn{right:auto;left:.9rem;} [dir="rtl"] .search-close{right:auto;left:2rem;} [dir="rtl"] .cart-badge{right:auto;left:.15rem;} [dir="rtl"] .woocommerce-product-gallery__trigger{right:auto;left:1rem;} [dir="rtl"] .whatsapp-fab{right:auto;left:1.8rem;} [dir="rtl"] .back-to-top{right:auto;left:5.9rem;} @media (max-width:768px){ [dir="rtl"] .back-to-top{left:1.8rem;} } /* Mobile drawer slides in from the reading-start side */ [dir="rtl"] .mobile-drawer{right:auto;left:0;transform:translateX(-100%);} [dir="rtl"] .mobile-drawer.is-open{transform:translateX(0);} /* Misc spacing that used a physical side */ [dir="rtl"] .cart-item-remove{margin-left:0;margin-right:auto;} [dir="rtl"] .cart-summary-card,[dir="rtl"] .checkout-summary-card, [dir="rtl"] .woocommerce .cart-collaterals .cart_totals{margin-left:0;margin-right:auto;} [dir="rtl"] ul.payment_methods li input[type="radio"]{margin-right:0;margin-left:.6rem;} [dir="rtl"] .product-cta-row .price-chip del, [dir="rtl"] .summary .price del{margin-right:0;margin-left:.6rem;} /* ============================= REDUCED MOTION ============================= */ @media (prefers-reduced-motion:reduce){ *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important;scroll-behavior:auto!important;} .marquee-track{animation:none!important;} .hero-cursor-glow{display:none!important;} ::view-transition-old(root),::view-transition-new(root){animation:none!important;} } /* ============================= INNER PAGE HEADER ============================= */ .page-header{background:var(--ink);color:var(--white);padding-block-start:clamp(8rem,14vw,10rem);padding-block-end:clamp(3rem,6vw,4rem);position:relative;overflow:hidden;} .page-header::before{content:"";position:absolute;top:-25%;right:-8%;width:440px;height:440px;border-radius:50%;background:var(--taupe-500);filter:blur(110px);opacity:.28;pointer-events:none;} .breadcrumb{display:flex;gap:.5rem;align-items:center;flex-wrap:wrap;font-size:.82rem;color:var(--text-soft-on-dark);margin-bottom:1.7rem;position:relative;z-index:1;} .breadcrumb a{color:var(--text-soft-on-dark);transition:color .25s;} .breadcrumb a:hover{color:var(--white);} .breadcrumb .icon{width:.8rem;height:.8rem;opacity:.6;} .breadcrumb span[aria-current]{color:var(--white);} .page-header h1{font-size:clamp(2.3rem,5vw,3.6rem);max-width:760px;position:relative;z-index:1;} .page-header .lede{margin-top:1.2rem;color:var(--text-soft-on-dark);max-width:580px;font-size:1.05rem;position:relative;z-index:1;} /* ============================= SHOP: FILTER BAR ============================= */ .filter-bar{display:flex;flex-direction:column;gap:1rem;margin-bottom:2.5rem;padding-bottom:2rem;border-bottom:1px solid var(--border-soft);} .filter-row{display:flex;align-items:center;gap:.7rem;flex-wrap:wrap;} .filter-row-label{font-size:.75rem;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--text-soft);width:5.5rem;flex-shrink:0;} .filter-scroll{display:flex;gap:.6rem;overflow-x:auto;flex:1;padding-bottom:.2rem;scrollbar-width:none;} .filter-scroll::-webkit-scrollbar{display:none;} .filter-pill{ flex-shrink:0;padding:.6rem 1.2rem;border-radius:var(--radius-pill); border:1.5px solid var(--border-soft);font-size:.85rem;font-weight:500;color:var(--text-soft); background:var(--white);transition:all .25s var(--ease);white-space:nowrap; } .filter-pill:hover{border-color:var(--taupe-300);color:var(--black);} .filter-pill.is-active{background:var(--black);border-color:var(--black);color:var(--white);} .filter-meta{display:flex;justify-content:space-between;align-items:center;gap:1rem;flex-wrap:wrap;} .result-count{font-size:.88rem;color:var(--text-soft);} .sort-select{ padding:.65rem 2.4rem .65rem 1.1rem;border-radius:var(--radius-pill);border:1.5px solid var(--border-soft); font-size:.85rem;font-family:'Poppins',sans-serif;color:var(--black);background:var(--white);cursor:pointer; appearance:none;-webkit-appearance:none; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%236b6560' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E"); background-repeat:no-repeat;background-position:right .7rem center;background-size:1.1rem; } .sort-select:focus{border-color:var(--taupe-500);outline:none;} /* ============================= SHOP: PRODUCT GRID ============================= */ .product-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(270px,1fr));gap:1.6rem;} .product-card{border-radius:var(--radius-lg);overflow:hidden;background:var(--white);border:1px solid var(--border-soft);transition:transform .4s var(--ease),box-shadow .4s var(--ease);display:flex;flex-direction:column;} .product-card.is-hidden{display:none;} .product-card:hover{transform:translateY(-6px);box-shadow:0 30px 50px -30px rgba(0,0,0,.22);} .product-art{aspect-ratio:5/4;position:relative;display:flex;align-items:center;justify-content:center;overflow:hidden;} .product-art .icon{width:2.7rem;height:2.7rem;color:rgba(255,255,255,.85);position:relative;z-index:1;} .product-art::before{content:"";position:absolute;inset:0;opacity:.92;background:var(--tone-bg);} .wishlist-btn{ position:absolute;top:.9rem;right:.9rem;z-index:2;width:2.3rem;height:2.3rem;border-radius:50%; background:rgba(255,255,255,.9);display:flex;align-items:center;justify-content:center; transition:transform .25s var(--ease),background-color .25s; } .wishlist-btn:hover{transform:scale(1.08);} .wishlist-btn .icon{width:1.05rem;height:1.05rem;stroke:var(--black);fill:none;transition:fill .25s,stroke .25s;} .wishlist-btn.is-saved .icon{fill:var(--taupe-500);stroke:var(--taupe-500);} .product-body{padding:1.4rem 1.5rem 1.6rem;display:flex;flex-direction:column;gap:.7rem;flex:1;} .product-tags{display:flex;gap:.4rem;flex-wrap:wrap;} .tag-chip{font-size:.68rem;font-weight:600;letter-spacing:.05em;text-transform:uppercase;color:var(--taupe-ink);background:var(--mist);padding:.28rem .6rem;border-radius:var(--radius-pill);} .product-body h3{font-size:1.05rem;line-height:1.3;} .product-body p{font-size:.86rem;color:var(--text-soft);flex:1;} .product-cta-row{display:flex;align-items:center;justify-content:space-between;gap:.75rem;margin-top:.4rem;} .product-cta-row .btn{padding:.7rem 1.3rem;font-size:.82rem;} .empty-state{display:none;flex-direction:column;align-items:center;text-align:center;padding:5rem 1rem;gap:1.2rem;} .empty-state.is-visible{display:flex;} .empty-state .icon{width:2.6rem;height:2.6rem;color:var(--taupe-300);} .empty-state h3{font-size:1.3rem;} .empty-state p{color:var(--text-soft);max-width:360px;} .pagination{display:flex;justify-content:center;align-items:center;gap:.5rem;margin-top:3.5rem;} .page-num{ width:2.6rem;height:2.6rem;border-radius:50%;display:flex;align-items:center;justify-content:center; font-size:.85rem;font-weight:600;color:var(--text-soft);transition:background-color .25s,color .25s; } .page-num:hover{background:var(--mist);color:var(--black);} .page-num.is-active{background:var(--black);color:var(--white);} .page-arrow{width:2.6rem;height:2.6rem;border-radius:50%;display:flex;align-items:center;justify-content:center;border:1.5px solid var(--border-soft);transition:background-color .25s;} .page-arrow:hover{background:var(--mist);} .page-arrow .icon{width:1rem;height:1rem;} .icon-flip{transform:rotate(180deg);transform-origin:center;} /* ============================= ABOUT: STORY ============================= */ .story-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(2rem,5vw,4rem);align-items:center;} .story-copy p{color:var(--text-soft);font-size:1.02rem;margin-bottom:1.1rem;max-width:520px;} .story-copy p:last-child{margin-bottom:0;} .story-visual{aspect-ratio:4/5;border-radius:var(--radius-lg);position:relative;overflow:hidden;background:linear-gradient(155deg,#221d18,var(--ink) 65%);display:flex;align-items:center;justify-content:center;} .story-visual .gauge-svg{width:62%;} .story-visual .gauge-track{stroke:rgba(255,255,255,.12);} /* ============================= LOCATION CARDS (About + Contact) ============================= */ .location-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(320px,1fr));gap:1.6rem;} .location-card{border-radius:var(--radius-lg);overflow:hidden;background:var(--white);border:1px solid var(--border-soft);} .location-map{width:100%;aspect-ratio:16/9;border:0;filter:grayscale(.15);display:block;} .location-body{padding:1.7rem 1.8rem 1.9rem;} .location-body h3{font-size:1.15rem;margin-bottom:.9rem;display:flex;align-items:center;gap:.6rem;} .location-body h3 .icon{width:1.1rem;height:1.1rem;color:var(--taupe-500);} .location-line{display:flex;gap:.7rem;margin-bottom:.7rem;font-size:.9rem;color:var(--text-soft);} .location-line:last-child{margin-bottom:0;} .location-line .icon{width:1rem;height:1rem;flex-shrink:0;margin-top:.15rem;color:var(--taupe-300);} /* ============================= CONTACT ============================= */ .contact-grid{display:grid;grid-template-columns:1.3fr .9fr;gap:clamp(2rem,5vw,4rem);align-items:flex-start;} .contact-form-card{background:var(--white);border:1px solid var(--border-soft);border-radius:var(--radius-lg);padding:clamp(1.8rem,4vw,2.8rem);} .field{position:relative;margin-bottom:1.35rem;} .field-row{display:grid;grid-template-columns:1fr 1fr;gap:1.1rem;} .field input,.field textarea{ width:100%;padding:1.35rem 1.1rem .55rem;border:1.5px solid var(--border-soft);border-radius:var(--radius-sm); font-size:.94rem;font-family:'Poppins',sans-serif;background:var(--white);color:var(--black); transition:border-color .3s var(--ease); } .field textarea{min-height:120px;resize:vertical;padding-top:1.35rem;} .field input:focus,.field textarea:focus{border-color:var(--taupe-500);outline:none;} .field label{ position:absolute;left:1.1rem;top:1.05rem;font-size:.94rem;color:var(--text-soft);pointer-events:none; transition:all .22s var(--ease);background:var(--white);padding-inline:.25rem; } .field input:focus + label,.field input:not(:placeholder-shown) + label, .field textarea:focus + label,.field textarea:not(:placeholder-shown) + label{ top:-.55rem;font-size:.7rem;font-weight:600;letter-spacing:.03em;color:var(--taupe-ink); } .field-static label{position:static;display:block;font-size:.72rem;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--text-soft);margin-bottom:.55rem;background:none;padding:0;} .field-static select{ width:100%;padding:1rem 2.4rem 1rem 1.1rem;border:1.5px solid var(--border-soft);border-radius:var(--radius-sm); font-size:.94rem;font-family:'Poppins',sans-serif;color:var(--black);background:var(--white);cursor:pointer; appearance:none;-webkit-appearance:none; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%236b6560' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E"); background-repeat:no-repeat;background-position:right 1rem center;background-size:1.1rem; } .field-static select:focus{border-color:var(--taupe-500);outline:none;} .consent-row{display:flex;align-items:flex-start;gap:.7rem;margin-bottom:1.6rem;} .consent-row input{margin-top:.3rem;accent-color:var(--taupe-500);} .consent-row label{font-size:.82rem;color:var(--text-soft);} .form-success{display:none;flex-direction:column;align-items:flex-start;gap:1rem;padding:2rem 0;} .form-success.is-visible{display:flex;} .form-success .check-badge{width:3.2rem;height:3.2rem;border-radius:50%;background:var(--mist);display:flex;align-items:center;justify-content:center;color:var(--taupe-500);} .form-success h3{font-size:1.35rem;} .form-success p{color:var(--text-soft);max-width:380px;} .quick-contact-list{display:flex;flex-direction:column;gap:1rem;} .quick-contact-item{ display:flex;align-items:center;gap:1rem;padding:1.3rem 1.5rem;border-radius:var(--radius-md); background:var(--white);border:1px solid var(--border-soft);transition:border-color .25s,transform .25s var(--ease); } a.quick-contact-item:hover{border-color:var(--taupe-300);transform:translateY(-2px);} .quick-contact-item .card-icon{margin-bottom:0;flex-shrink:0;} .quick-contact-item strong{display:block;font-size:.95rem;} .quick-contact-item span{font-size:.84rem;color:var(--text-soft);} .hours-card{padding:1.3rem 1.5rem;border-radius:var(--radius-md);background:var(--mist);} .hours-card h4{font-size:.78rem;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--text-soft);margin-bottom:.8rem;} .hours-row{display:flex;justify-content:space-between;font-size:.86rem;padding:.4rem 0;border-bottom:1px solid rgba(0,0,0,.06);} .hours-row:last-child{border-bottom:none;} @media (max-width:1024px){ .story-grid,.contact-grid{grid-template-columns:1fr;} .story-visual{max-width:420px;margin-inline:auto;} } @media (max-width:640px){ .filter-row{align-items:flex-start;} .filter-row-label{width:auto;} .field-row{grid-template-columns:1fr;} .filter-meta{flex-direction:column;align-items:flex-start;} } /* ============================= PRODUCT: GALLERY + INFO ============================= */ .product-top{padding-top:clamp(7.5rem,12vw,9rem);} .product-hero-grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(2rem,5vw,4rem);align-items:flex-start;} .gallery-main{aspect-ratio:1/1;border-radius:var(--radius-lg);position:relative;overflow:hidden;display:flex;align-items:center;justify-content:center;} .gallery-main .icon{width:4rem;height:4rem;color:rgba(255,255,255,.85);position:relative;z-index:1;} .gallery-main::before{content:"";position:absolute;inset:0;opacity:.92;transition:opacity .4s;background:var(--tone-bg);} .gallery-thumbs{display:flex;gap:.8rem;margin-top:1rem;} .gallery-thumb{width:4.2rem;height:4.2rem;border-radius:var(--radius-sm);position:relative;overflow:hidden;border:2px solid transparent;flex-shrink:0;transition:border-color .25s;display:flex;align-items:center;justify-content:center;} .gallery-thumb::before{content:"";position:absolute;inset:0;opacity:.9;background:var(--tone-bg);} .gallery-thumb .icon{width:1.4rem;height:1.4rem;color:rgba(255,255,255,.85);position:relative;z-index:1;} .gallery-thumb.is-active{border-color:var(--taupe-500);} .product-info .eyebrow{margin-bottom:.7rem;} .product-info h1{font-size:clamp(1.8rem,3.4vw,2.6rem);margin-bottom:.8rem;} .rating-row{display:flex;align-items:center;gap:.6rem;margin-bottom:1.3rem;} .stars{display:flex;gap:.15rem;color:var(--taupe-500);} .stars .icon{width:1rem;height:1rem;fill:var(--taupe-500);stroke:var(--taupe-500);} .stars .icon.is-empty{fill:none;stroke:var(--border-soft);} .rating-row span{font-size:.85rem;color:var(--text-soft);} .price-block{margin-bottom:1.4rem;} .price-block strong{font-family:'Oldburg Display',sans-serif;font-size:2rem;display:block;} .price-block .price-note{font-size:.8rem;color:var(--text-soft);margin-top:.3rem;} .product-info > p.desc{color:var(--text-soft);margin-bottom:1.6rem;max-width:480px;} .add-to-cart-row{display:flex;gap:.9rem;align-items:center;margin-bottom:1.8rem;flex-wrap:wrap;} .qty-stepper{display:flex;align-items:center;border:1.5px solid var(--border-soft);border-radius:var(--radius-pill);overflow:hidden;} .qty-btn{width:2.8rem;height:2.8rem;display:flex;align-items:center;justify-content:center;color:var(--black);transition:background-color .25s;} .qty-btn:hover{background:var(--mist);} .qty-btn .icon{width:.9rem;height:.9rem;} .qty-value{width:2.4rem;text-align:center;font-weight:600;font-size:.95rem;} .trust-badges-row{display:flex;gap:1.6rem;flex-wrap:wrap;padding-top:1.6rem;border-top:1px solid var(--border-soft);} .trust-badge-item{display:flex;align-items:center;gap:.6rem;font-size:.82rem;color:var(--text-soft);} .trust-badge-item .icon{width:1.2rem;height:1.2rem;color:var(--taupe-500);flex-shrink:0;} .sticky-atc-bar{ position:fixed;left:0;right:0;bottom:0;z-index:80;background:var(--white); border-top:1px solid var(--border-soft);box-shadow:0 -10px 30px -20px rgba(0,0,0,.2); padding:.9rem clamp(1.25rem,4vw,3rem);display:flex;align-items:center;justify-content:space-between;gap:1.5rem; transform:translateY(100%);transition:transform .4s var(--ease); } .sticky-atc-bar.is-visible{transform:translateY(0);} .sticky-atc-info{display:flex;align-items:center;gap:.9rem;min-width:0;} .sticky-atc-swatch{width:2.6rem;height:2.6rem;border-radius:var(--radius-sm);flex-shrink:0;background:var(--tone-bg);} .sticky-atc-info strong{display:block;font-size:.88rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;} .sticky-atc-info span{font-size:.82rem;color:var(--text-soft);} /* ============================= PRODUCT: TABS ============================= */ .product-tabs{margin-top:clamp(3rem,6vw,5rem);} .tab-nav{display:flex;gap:.5rem;border-bottom:1px solid var(--border-soft);margin-bottom:2rem;overflow-x:auto;} .tab-btn{padding:.9rem 1.3rem;font-size:.9rem;font-weight:600;color:var(--text-soft);border-bottom:2px solid transparent;white-space:nowrap;transition:color .25s,border-color .25s;} .tab-btn:hover{color:var(--black);} .tab-btn.is-active{color:var(--black);border-color:var(--taupe-500);} .tab-panel{display:none;} .tab-panel.is-active{display:block;} .tab-panel p{color:var(--text-soft);max-width:680px;margin-bottom:1rem;} .tab-panel p:last-child{margin-bottom:0;} .spec-table{width:100%;border-collapse:collapse;max-width:640px;} .spec-table tr{border-bottom:1px solid var(--border-soft);} .spec-table tr:last-child{border-bottom:none;} .spec-table th,.spec-table td{text-align:left;padding:.9rem .5rem;font-size:.9rem;font-weight:400;} .spec-table th{color:var(--text-soft);font-weight:500;width:40%;} .spec-note{font-size:.8rem;color:var(--text-soft);margin-bottom:1.2rem;font-style:italic;} .review-item{padding:1.4rem 0;border-bottom:1px solid var(--border-soft);} .review-item:last-child{border-bottom:none;} .review-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:.5rem;flex-wrap:wrap;gap:.4rem;} .review-head strong{font-size:.9rem;} .review-item p{color:var(--text-soft);font-size:.92rem;} /* ============================= CART ============================= */ .cart-layout{display:grid;grid-template-columns:1.7fr 1fr;gap:clamp(2rem,4vw,3rem);align-items:flex-start;} .cart-item-row{display:grid;grid-template-columns:auto 1fr auto auto auto;gap:1.2rem;align-items:center;padding:1.4rem 0;border-bottom:1px solid var(--border-soft);} .cart-item-row:first-child{padding-top:0;} .cart-item-swatch{width:4.6rem;height:4.6rem;border-radius:var(--radius-sm);position:relative;overflow:hidden;flex-shrink:0;display:flex;align-items:center;justify-content:center;} .cart-item-swatch::before{content:"";position:absolute;inset:0;opacity:.92;background:var(--tone-bg);} .cart-item-swatch .icon{width:1.4rem;height:1.4rem;color:rgba(255,255,255,.85);position:relative;z-index:1;} .cart-item-info h3{font-size:.98rem;margin-bottom:.25rem;} .cart-item-info span{font-size:.8rem;color:var(--text-soft);} .cart-item-price{font-size:.92rem;font-weight:600;white-space:nowrap;} .cart-item-remove{width:2.2rem;height:2.2rem;display:flex;align-items:center;justify-content:center;border-radius:50%;color:var(--text-soft);transition:background-color .25s,color .25s;} .cart-item-remove:hover{background:var(--mist);color:var(--black);} .cart-item-remove .icon{width:1rem;height:1rem;} .cart-summary-card{background:var(--mist);border-radius:var(--radius-lg);padding:1.8rem;position:sticky;top:7rem;} .cart-summary-card h3{font-size:1.1rem;margin-bottom:1.3rem;} .summary-row{display:flex;justify-content:space-between;font-size:.9rem;padding:.6rem 0;color:var(--text-soft);} .summary-row.total{border-top:1px solid rgba(0,0,0,.12);margin-top:.5rem;padding-top:1rem;font-size:1.05rem;font-weight:600;color:var(--black);} .promo-row{display:flex;gap:.6rem;margin:1.2rem 0;} .promo-row input{flex:1;padding:.75rem 1rem;border-radius:var(--radius-pill);border:1.5px solid var(--border-soft);font-size:.85rem;} .promo-row input:focus{border-color:var(--taupe-500);outline:none;} /* ============================= CHECKOUT ============================= */ .checkout-top{padding-top:clamp(7.5rem,12vw,9rem);} .checkout-layout{display:grid;grid-template-columns:1.5fr 1fr;gap:clamp(2rem,4vw,3rem);align-items:flex-start;} .checkout-section{margin-bottom:2.3rem;} .checkout-section-title{font-size:.78rem;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--text-soft);margin-bottom:1.1rem;display:flex;align-items:center;gap:.6rem;} .checkout-section-title .step-num{width:1.5rem;height:1.5rem;border-radius:50%;background:var(--black);color:#fff;display:flex;align-items:center;justify-content:center;font-size:.7rem;} .payment-methods{display:flex;flex-direction:column;gap:.8rem;} .payment-option{display:flex;align-items:center;gap:1rem;padding:1.1rem 1.3rem;border:1.5px solid var(--border-soft);border-radius:var(--radius-md);cursor:pointer;transition:border-color .25s,background-color .25s;} .payment-option:hover{border-color:var(--taupe-300);} .payment-option.is-selected{border-color:var(--taupe-500);background:var(--mist);} .payment-option:has(input:checked){border-color:var(--taupe-500);background:var(--mist);} .payment-option input{accent-color:var(--taupe-500);width:1.1rem;height:1.1rem;} .payment-option .card-icon{margin-bottom:0;width:2.6rem;height:2.6rem;flex-shrink:0;} .payment-option strong{display:block;font-size:.92rem;} .payment-option span{font-size:.8rem;color:var(--text-soft);} .checkout-summary-card{background:var(--mist);border-radius:var(--radius-lg);padding:1.8rem;position:sticky;top:7rem;} .checkout-summary-item{display:flex;justify-content:space-between;gap:1rem;font-size:.86rem;padding:.55rem 0;color:var(--text-soft);} .checkout-summary-item strong{color:var(--black);font-weight:500;} .place-order-btn{position:relative;} .place-order-btn.is-loading{pointer-events:none;opacity:.75;} .spinner{display:none;width:1rem;height:1rem;border:2px solid rgba(255,255,255,.4);border-top-color:#fff;border-radius:50%;animation:spin .7s linear infinite;} .place-order-btn.is-loading .spinner{display:inline-block;} .place-order-btn.is-loading .btn-label{display:none;} @keyframes spin{to{transform:rotate(360deg);}} /* ============================= THANK YOU ============================= */ .confirmation-wrap{max-width:640px;margin-inline:auto;text-align:center;padding-block:clamp(8rem,14vw,10rem) clamp(4rem,8vw,6rem);} .confirmation-badge{width:4.5rem;height:4.5rem;border-radius:50%;background:var(--mist);color:var(--taupe-500);display:flex;align-items:center;justify-content:center;margin-inline:auto 1.6rem;} .confirmation-badge .icon{width:2rem;height:2rem;} .order-number-chip{display:inline-flex;align-items:center;gap:.5rem;background:var(--mist);padding:.6rem 1.2rem;border-radius:var(--radius-pill);font-size:.85rem;font-weight:600;margin:1.4rem 0 2.2rem;} .confirmation-summary{text-align:left;background:var(--white);border:1px solid var(--border-soft);border-radius:var(--radius-lg);padding:1.8rem;margin:2.2rem 0;} .confirmation-actions{display:flex;justify-content:center;gap:1rem;flex-wrap:wrap;margin-top:2rem;} .next-steps{text-align:left;display:flex;flex-direction:column;gap:1rem;margin-top:2.5rem;} .next-step-item{display:flex;gap:1rem;align-items:flex-start;} .next-step-item .card-icon{margin-bottom:0;flex-shrink:0;} .next-step-item strong{display:block;font-size:.92rem;margin-bottom:.2rem;} .next-step-item span{font-size:.85rem;color:var(--text-soft);} @media (max-width:1024px){ .product-hero-grid,.cart-layout,.checkout-layout{grid-template-columns:1fr;} .cart-summary-card,.checkout-summary-card{position:static;} } @media (max-width:640px){ .cart-item-row{grid-template-columns:auto 1fr;row-gap:.6rem;} .cart-item-price{grid-column:2;justify-self:start;} .cart-item-remove{position:absolute;margin-left:auto;} .sticky-atc-bar .sticky-atc-info span{display:none;} } /* ========================================================================= WOOCOMMERCE — NATIVE TEMPLATE STYLING Cart, Checkout, My Account and Order-Received are intentionally NOT template-overridden (see README). Instead, this section themes WooCommerce's own default markup using its stable, documented class names, so coupon logic, shipping calculation, AJAX cart updates and payment gateways all keep working exactly as WooCommerce intends. ========================================================================= */ .woocommerce{color:var(--black);} .woocommerce a{color:var(--black);} .woocommerce-breadcrumb{padding:9rem 0 1rem;font-size:.82rem;color:var(--text-soft);} .woocommerce-breadcrumb a{color:var(--text-soft);} /* Buttons */ .woocommerce a.button,.woocommerce button.button,.woocommerce input.button, .woocommerce #respond input#submit,.woocommerce-page a.button, .woocommerce #place_order,.woocommerce a.checkout-button{ font-family:'Poppins',sans-serif;font-weight:600;font-size:.92rem; background:var(--black);color:#fff;border:1.5px solid var(--black); border-radius:var(--radius-pill);padding:1rem 1.9rem; transition:transform .3s var(--ease),box-shadow .3s var(--ease); } .woocommerce a.button:hover,.woocommerce button.button:hover,.woocommerce input.button:hover, .woocommerce #place_order:hover{ background:var(--taupe-500);border-color:var(--taupe-500);color:#fff; transform:translateY(-2px);box-shadow:0 14px 28px -10px rgba(0,0,0,.35); } .woocommerce a.button.alt,.woocommerce #place_order{width:100%;text-align:center;} /* Forms / inputs (cart quantity, checkout fields, coupon box) */ .woocommerce table.shop_table{border:none;border-collapse:collapse;width:100%;} .woocommerce table.shop_table th{ font-size:.72rem;font-weight:600;letter-spacing:.08em;text-transform:uppercase; color:var(--text-soft);border-bottom:1px solid var(--border-soft);padding:1rem .75rem;text-align:left; } .woocommerce table.shop_table td{border-bottom:1px solid var(--border-soft);padding:1.2rem .75rem;} .woocommerce td.product-name a{font-weight:600;color:var(--black);} .woocommerce table.shop_table td.actions,.woocommerce-cart-form__cart-actions{padding-top:1.5rem;} .woocommerce input.qty{ width:4.2rem;padding:.7rem;border:1.5px solid var(--border-soft);border-radius:var(--radius-pill); text-align:center;font-family:'Poppins',sans-serif; } .woocommerce input.qty:focus,.woocommerce form .form-row input.input-text:focus, .woocommerce form .form-row textarea:focus,.woocommerce form .form-row select:focus{ border-color:var(--taupe-500);outline:none; } .woocommerce-cart-form .coupon{display:flex;gap:.6rem;align-items:center;flex-wrap:wrap;} .woocommerce-cart-form .coupon .input-text{ padding:.75rem 1.1rem;border-radius:var(--radius-pill);border:1.5px solid var(--border-soft);font-size:.85rem; } .woocommerce .cart-collaterals .cart_totals{ background:var(--mist);border-radius:var(--radius-lg);padding:1.8rem;max-width:420px;margin-left:auto; } .woocommerce .cart_totals table{border:none;} .woocommerce .cart_totals table th,.woocommerce .cart_totals table td{ border:none;border-bottom:1px solid rgba(0,0,0,.08);padding:.7rem 0;font-size:.9rem; } .woocommerce .cart_totals .order-total th,.woocommerce .cart_totals .order-total td{ font-size:1.05rem;font-weight:600;border-bottom:none; } /* Checkout form fields -> reuse the floating-label field look where practical */ .woocommerce form .form-row{margin-bottom:1.3rem;} .woocommerce form .form-row label{ display:block;font-size:.72rem;font-weight:600;letter-spacing:.04em;text-transform:uppercase; color:var(--text-soft);margin-bottom:.5rem; } .woocommerce form .form-row input.input-text,.woocommerce form .form-row textarea, .woocommerce form .form-row select,.woocommerce-additional-fields select{ width:100%;padding:1rem 1.1rem;border:1.5px solid var(--border-soft);border-radius:var(--radius-sm); font-family:'Poppins',sans-serif;font-size:.94rem;background:var(--white); } #customer_details{max-width:640px;} .woocommerce-billing-fields h3,.woocommerce-additional-fields h3{ font-family:'Oldburg Display',sans-serif;font-size:1.2rem;margin:2rem 0 1.2rem; } /* Order review / payment */ #order_review,.woocommerce-checkout-review-order{ background:var(--mist);border-radius:var(--radius-lg);padding:1.8rem; } .woocommerce-checkout-review-order-table th,.woocommerce-checkout-review-order-table td{ border-bottom:1px solid rgba(0,0,0,.08);padding:.7rem 0; } ul.wc_payment_methods{list-style:none;padding:0;} ul.payment_methods li{ border:1.5px solid var(--border-soft);border-radius:var(--radius-md);padding:1rem 1.2rem;margin-bottom:.7rem; background:var(--white); } ul.payment_methods li input[type="radio"]{accent-color:var(--taupe-500);margin-right:.6rem;} .payment_box{font-size:.86rem;color:var(--text-soft);padding-top:.8rem;} /* Order received / thank-you */ .woocommerce-order-received .woocommerce-thankyou-order-received{ background:var(--mist);border-radius:var(--radius-lg);padding:1.6rem 1.8rem;font-size:1.05rem;margin:9rem auto 2rem;max-width:800px; } .woocommerce-order-received .woocommerce-order{max-width:800px;margin:0 auto 4rem;} .woocommerce-order-received .order_details{list-style:none;display:flex;gap:2rem;flex-wrap:wrap;padding:1.5rem 0;border-top:1px solid var(--border-soft);border-bottom:1px solid var(--border-soft);margin:1.5rem 0;} .woocommerce-order-received .order_details li{font-size:.85rem;color:var(--text-soft);} .woocommerce-order-received .order_details li strong{display:block;color:var(--black);font-size:.95rem;margin-top:.2rem;} /* My Account */ .woocommerce-account .woocommerce-MyAccount-navigation{padding-top:9rem;} .woocommerce-account .woocommerce-MyAccount-navigation ul{list-style:none;display:flex;flex-direction:column;gap:.3rem;} .woocommerce-account .woocommerce-MyAccount-navigation a{ display:block;padding:.8rem 1.1rem;border-radius:var(--radius-sm);font-size:.9rem;color:var(--text-soft); } .woocommerce-account .woocommerce-MyAccount-navigation .is-active a{background:var(--mist);color:var(--black);font-weight:600;} .woocommerce-account .woocommerce-MyAccount-content{padding-top:9rem;} .woocommerce-account.logged-in .woocommerce-MyAccount-content{padding-top:0;} /* Notices */ .woocommerce-message,.woocommerce-info,.woocommerce-error,.woocommerce-noticeGroup{ list-style:none;background:var(--mist);border-left:3px solid var(--taupe-500); padding:1rem 1.4rem;border-radius:var(--radius-sm);font-size:.9rem;margin:9rem auto 1.5rem;max-width:1216px; } .woocommerce-error{border-left-color:#b3413a;} /* Star ratings */ .woocommerce .star-rating{color:var(--taupe-500);} /* Product-card add-to-cart button + price (real WC output, restyled) */ .product-cta-row a.button,.product-cta-row a.add_to_cart_button{ padding:.7rem 1.3rem;font-size:.82rem;border-radius:var(--radius-pill);border:1.5px solid rgba(0,0,0,.22); color:var(--black);font-weight:600;transition:background-color .25s; } .product-cta-row a.button:hover,.product-cta-row a.added_to_cart{background:var(--mist);} .product-cta-row .price-chip{font-size:.92rem;font-weight:600;} .product-cta-row .price-chip .price{font-size:inherit;} .product-cta-row .price-chip del{opacity:.5;font-weight:400;margin-right:.3rem;} /* Native result-count + ordering dropdown, restyled to sit in the filter bar */ .woocommerce-result-count{font-size:.88rem;color:var(--text-soft);margin:0;} .woocommerce-ordering select{ padding:.65rem 2.4rem .65rem 1.1rem;border-radius:var(--radius-pill);border:1.5px solid var(--border-soft); font-size:.85rem;font-family:'Poppins',sans-serif;color:var(--black);background:var(--white);cursor:pointer;margin-left:auto; } .filter-meta{display:flex;align-items:center;gap:1rem;flex-wrap:wrap;} /* Native pagination, restyled to match .pagination */ nav.woocommerce-pagination{display:flex;justify-content:center;margin-top:3.5rem;} nav.woocommerce-pagination ul{display:flex;gap:.5rem;list-style:none;} nav.woocommerce-pagination a,nav.woocommerce-pagination span.current{ width:2.6rem;height:2.6rem;border-radius:50%;display:flex;align-items:center;justify-content:center; font-size:.85rem;font-weight:600;color:var(--text-soft); } nav.woocommerce-pagination span.current{background:var(--black);color:var(--white);} nav.woocommerce-pagination a:hover{background:var(--mist);color:var(--black);} /* Real product loop wrapper WooCommerce outputs (ul.products) */ ul.products{display:grid;grid-template-columns:repeat(auto-fit,minmax(270px,1fr));gap:1.6rem;list-style:none;padding:0;margin:0 0 2rem;} ul.products li.product-card{list-style:none;} /* Single product: real gallery */ .woocommerce-product-gallery{position:relative;} .woocommerce-product-gallery__wrapper{border-radius:var(--radius-lg);overflow:hidden;background:var(--mist);} .woocommerce-product-gallery__image img{width:100%;height:auto;display:block;aspect-ratio:1/1;object-fit:cover;} .flex-control-nav{display:flex;gap:.8rem;margin-top:1rem;list-style:none;padding:0;} .flex-control-nav li{width:4.2rem;} .flex-control-nav img{width:100%;border-radius:var(--radius-sm);cursor:pointer;opacity:.6;transition:opacity .25s;} .flex-control-nav img.flex-active{opacity:1;outline:2px solid var(--taupe-500);outline-offset:2px;} .woocommerce-product-gallery__trigger{position:absolute;top:1rem;right:1rem;background:var(--white);border-radius:50%;width:2.4rem;height:2.4rem;} /* Single product: summary column */ .summary.entry-summary{max-width:520px;} .summary .product_title{font-family:'Oldburg Display',sans-serif;font-size:clamp(1.8rem,3.4vw,2.6rem);margin-bottom:.8rem;} .summary .price{font-family:'Oldburg Display',sans-serif;font-size:2rem;display:block;margin-bottom:1.2rem;} .summary .price ins{text-decoration:none;} .summary .price del{opacity:.5;font-size:1.1rem;margin-right:.6rem;} .summary .woocommerce-product-details__short-description{color:var(--text-soft);margin-bottom:1.6rem;} .summary form.cart{display:flex;align-items:center;gap:.9rem;flex-wrap:wrap;margin-bottom:1.6rem;} .summary .quantity{display:flex;} .summary .quantity .qty{ width:5rem;padding:.85rem;border:1.5px solid var(--border-soft);border-radius:var(--radius-pill);text-align:center; } .summary .single_add_to_cart_button{ background:var(--black);color:#fff;border-radius:var(--radius-pill);padding:1rem 1.9rem;font-weight:600;border:none; } .summary .single_add_to_cart_button:hover{background:var(--taupe-500);} .summary .product_meta{font-size:.82rem;color:var(--text-soft);padding-top:1rem;border-top:1px solid var(--border-soft);} .summary .product_meta a{color:var(--taupe-ink);} .woocommerce-product-rating{display:flex;align-items:center;gap:.6rem;margin-bottom:1.2rem;} /* Single product: tabs (WooCommerce's own jQuery-UI-tabs markup) */ .woocommerce-tabs ul.tabs{display:flex;gap:.5rem;border-bottom:1px solid var(--border-soft);margin-bottom:2rem;padding:0;list-style:none;overflow-x:auto;} .woocommerce-tabs ul.tabs li{padding:0;} .woocommerce-tabs ul.tabs li a{ display:block;padding:.9rem 1.3rem;font-size:.9rem;font-weight:600;color:var(--text-soft); border-bottom:2px solid transparent;white-space:nowrap; } .woocommerce-tabs ul.tabs li.active a,.woocommerce-tabs ul.tabs li a:hover{color:var(--black);border-color:var(--taupe-500);} .woocommerce-tabs .woocommerce-Tabs-panel{max-width:680px;color:var(--text-soft);} .woocommerce-tabs .woocommerce-Tabs-panel h2{font-family:'Oldburg Display',sans-serif;font-size:1.3rem;color:var(--black);margin-bottom:1rem;} .woocommerce-tabs table.shop_attributes{width:100%;max-width:640px;border-collapse:collapse;} .woocommerce-tabs table.shop_attributes th,.woocommerce-tabs table.shop_attributes td{ text-align:left;padding:.9rem .5rem;border-bottom:1px solid var(--border-soft);font-size:.9rem;font-weight:400; } .woocommerce-tabs table.shop_attributes th{color:var(--text-soft);font-weight:500;width:40%;} /* Related products heading */ .related.products{margin-top:clamp(4rem,7vw,6rem);} .related.products > h2{font-family:'Oldburg Display',sans-serif;font-size:clamp(1.6rem,3vw,2.1rem);margin-bottom:2rem;} @media (max-width:768px){ .woocommerce table.shop_table td.product-thumbnail img{width:3.4rem;} .woocommerce .cart-collaterals .cart_totals{margin-left:0;max-width:none;} }