/* ============================================================================= SIRA — design system + components Emerald & gold identity, sampled from the logo. Light, hand-written, no framework. Sections: 1 tokens · 2 base · 3 layout · 4 buttons · 5 header/nav · 6 hero 7 sections/cards · 8 brand split · 9 WooCommerce · 10 product · 11 footer 12 brand theming (Elegance / Home) · 13 utilities · 14 responsive ========================================================================== */ /* 1 — TOKENS ---------------------------------------------------------------- */ :root { /* emerald ramp (from logo) */ --emerald-900:#05221D; --emerald-800:#0A2C25; --emerald-700:#0E3B32; /* primary */ --emerald-600:#195042; /* brand swatch */ --emerald-500:#2C6355; /* gold ramp (from logo wing/star) */ --gold-300:#E4D6B0; --gold-400:#DDCB92; --gold-500:#C9B584; --gold-600:#B39B6A; /* primary gold */ --gold-700:#91855A; /* brand swatch */ /* neutrals */ --cream:#F7F3EC; /* page background */ --ivory:#FBF9F5; --sand:#EFE7DA; --ink:#1C231F; /* body text, greenish black */ --muted:#6C7570; --line:#E7E0D4; --white:#ffffff; /* brand accent (overridden per brand in §12) */ --accent:var(--emerald-700); --accent-soft:#E7EEEA; /* type */ --font-display:'Cormorant Garamond',Georgia,'Times New Roman',serif; --font-sans:'Jost',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif; /* scale */ --step--1:clamp(.8rem,.77rem + .15vw,.9rem); --step-0:clamp(.95rem,.92rem + .2vw,1.05rem); --step-1:clamp(1.2rem,1.1rem + .5vw,1.5rem); --step-2:clamp(1.6rem,1.4rem + 1vw,2.25rem); --step-3:clamp(2.1rem,1.7rem + 2vw,3.4rem); --step-4:clamp(2.8rem,2rem + 4vw,5rem); --container:1200px; --container-wide:1400px; --gutter:clamp(1.1rem,4vw,2.75rem); --radius:4px; --radius-lg:10px; --shadow-sm:0 1px 3px rgba(20,40,34,.06),0 1px 2px rgba(20,40,34,.05); --shadow:0 12px 30px -12px rgba(12,42,34,.18); --shadow-lg:0 30px 60px -20px rgba(12,42,34,.28); --ease:cubic-bezier(.22,.61,.36,1); --t:.35s var(--ease); } /* 1b — GENERATEPRESS INTEGRATION ------------------------------------------ The hub + brand landing templates are full-bleed. GeneratePress wraps content in a 1200px flex container; on these views we drop the cap and flex so our sections flow edge-to-edge. Shop/product/cart keep GP's tidy container. */ body.home #page.grid-container, body.error404 #page.grid-container, body.search #page.grid-container, body.page-template-template-brand #page.grid-container{max-width:100%;padding:0} body.home .site-content, body.error404 .site-content, body.search .site-content, body.page-template-template-brand .site-content{display:block;padding:0;margin:0} body.home .site-main, body.error404 .site-main, body.search .site-main, body.page-template-template-brand .site-main{width:100%;max-width:100%;padding:0} /* full-bleed section blocks */ .hero,.brand-split,.section,.section-tight,.shop-hero{width:100%;display:block} /* WooCommerce pages: GP's flex .site-content shrink-wraps the product grid to nothing. Switch to block flow and give the content a centered container of our own. */ body.woocommerce .site-content, body.woocommerce-page .site-content{display:block;padding:0;margin:0} body.woocommerce .site-main, body.woocommerce-page .site-main{max-width:var(--container-wide);margin-inline:auto;padding:2.5rem var(--gutter) 4rem} body.single-product .site-main{max-width:var(--container)} /* 2 — BASE ----------------------------------------------------------------- */ *,*::before,*::after{box-sizing:border-box} html{-webkit-text-size-adjust:100%;scroll-behavior:smooth} body.sira{ margin:0;font-family:var(--font-sans);font-size:var(--step-0); line-height:1.7;color:var(--ink);background:var(--cream); -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility; } img{max-width:100%;height:auto;display:block} a{color:var(--accent);text-decoration:none;transition:color var(--t)} a:hover{color:var(--gold-700)} h1,h2,h3,h4{font-family:var(--font-display);font-weight:600;line-height:1.1;color:var(--emerald-800);margin:0 0 .5em;letter-spacing:.2px} h1{font-size:var(--step-4)} h2{font-size:var(--step-3)} h3{font-size:var(--step-2)} p{margin:0 0 1.2em} ::selection{background:var(--gold-300);color:var(--emerald-800)} :focus-visible{outline:2px solid var(--gold-600);outline-offset:3px} /* kicker / eyebrow label */ .kicker{ font-family:var(--font-sans);font-size:.72rem;font-weight:500; letter-spacing:.28em;text-transform:uppercase;color:var(--gold-700); display:inline-block;margin-bottom:1rem; } .kicker::before{content:"";display:inline-block;width:26px;height:1px;background:var(--gold-600);vertical-align:middle;margin-right:.7em;transform:translateY(-3px)} /* 3 — LAYOUT --------------------------------------------------------------- */ .wrap{max-width:var(--container);margin-inline:auto;padding-inline:var(--gutter)} .wrap-wide{max-width:var(--container-wide);margin-inline:auto;padding-inline:var(--gutter)} .section{padding-block:clamp(3.5rem,8vw,7rem)} .section-tight{padding-block:clamp(2.5rem,5vw,4rem)} .center{text-align:center} .lede{font-size:var(--step-1);color:var(--muted);max-width:46ch;line-height:1.6} .center .lede{margin-inline:auto} .stack>*+*{margin-top:1.2rem} /* 4 — BUTTONS -------------------------------------------------------------- */ .btn{ --btn-bg:var(--emerald-700);--btn-fg:#fff;--btn-bd:var(--emerald-700); display:inline-flex;align-items:center;gap:.6em;cursor:pointer; font-family:var(--font-sans);font-size:.82rem;font-weight:500; letter-spacing:.14em;text-transform:uppercase; padding:.95em 1.9em;border:1px solid var(--btn-bd);border-radius:var(--radius); background:var(--btn-bg);color:var(--btn-fg);transition:all var(--t);white-space:nowrap; } .btn:hover{transform:translateY(-2px);box-shadow:var(--shadow);color:var(--btn-fg);background:var(--emerald-800);border-color:var(--emerald-800)} .btn-gold{--btn-bg:var(--gold-600);--btn-bd:var(--gold-600);--btn-fg:#231c0c} .btn-gold:hover{background:var(--gold-700);border-color:var(--gold-700);color:#fff} .btn-ghost{--btn-bg:transparent;--btn-fg:var(--emerald-800);--btn-bd:var(--emerald-700)} .btn-ghost:hover{background:var(--emerald-700);color:#fff} .btn-ghost-light{--btn-bg:transparent;--btn-fg:#fff;--btn-bd:rgba(255,255,255,.55)} .btn-ghost-light:hover{background:#fff;color:var(--emerald-800);border-color:#fff} .btn-wa{--btn-bg:#25D366;--btn-bd:#25D366;--btn-fg:#04321a} .btn-wa:hover{--btn-bg:#1eb457;background:#1eb457;border-color:#1eb457;color:#04321a} .link-more{font-family:var(--font-sans);font-weight:500;letter-spacing:.1em;text-transform:uppercase;font-size:.78rem;color:var(--emerald-700);border-bottom:1px solid var(--gold-600);padding-bottom:3px} .link-more:hover{color:var(--gold-700)} /* 5 — HEADER / NAV --------------------------------------------------------- Frosted-glass bar. Airy at the top of the page, then compacts and turns more opaque + shadowed once you scroll (JS toggles .is-stuck). The cream tint is kept high enough that the emerald text stays readable even where the bar sits over the dark hero. @supports guards the blur so browsers without backdrop-filter fall back to a solid bar rather than an unreadable one. */ .site-header{ position:sticky;top:0;z-index:60; background:rgba(249,245,238,.92); border-bottom:1px solid transparent; transition:background .4s var(--ease),box-shadow .4s var(--ease),border-color .4s var(--ease); } /* the gold hairline is a gradient, so it needs its own layer under the bar */ .site-header::after{ content:"";position:absolute;left:0;right:0;bottom:0;height:1px;pointer-events:none; background:linear-gradient(90deg,transparent,rgba(179,155,106,.55) 20%,rgba(179,155,106,.55) 80%,transparent); opacity:.5;transition:opacity .4s var(--ease); } @supports ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){ .site-header{ background:rgba(249,245,238,.62); -webkit-backdrop-filter:saturate(1.6) blur(16px); backdrop-filter:saturate(1.6) blur(16px); } .site-header.is-stuck{ background:rgba(249,245,238,.78); -webkit-backdrop-filter:saturate(1.8) blur(20px); backdrop-filter:saturate(1.8) blur(20px); } } .site-header.is-stuck{ background:rgba(249,245,238,.96); box-shadow:0 8px 30px -14px rgba(12,42,34,.34); } .site-header.is-stuck::after{opacity:1} .nav-bar{display:flex;align-items:center;justify-content:space-between;gap:1.5rem; height:86px;transition:height .4s var(--ease)} .site-header.is-stuck .nav-bar{height:66px} /* the supplied lockup carries the ELEGANCE line under the mark, so it needs a little more height than a wordmark alone before that line becomes legible */ .brand-logo{display:flex;align-items:center;height:54px} .brand-logo img,.brand-logo svg{height:52px;width:auto;transition:height .4s var(--ease)} .site-header.is-stuck .brand-logo img,.site-header.is-stuck .brand-logo svg{height:44px} .nav-menu{display:flex;align-items:center;gap:.35rem;list-style:none;margin:0;padding:0} .nav-menu a{font-family:var(--font-sans);font-size:.8rem;font-weight:500;letter-spacing:.1em; text-transform:uppercase;color:var(--emerald-800);position:relative; padding:.55rem .95rem;border-radius:30px;transition:color var(--t),background var(--t)} /* soft glass chip on hover, gold underline as the accent */ .nav-menu a::after{content:"";position:absolute;left:50%;right:50%;bottom:.32rem;height:1.5px; background:var(--gold-600);border-radius:2px;transition:left .3s var(--ease),right .3s var(--ease)} .nav-menu a:hover{color:var(--emerald-900);background:rgba(14,59,50,.055)} .nav-menu a:hover::after,.nav-menu .current-menu-item>a::after,.nav-menu .current_page_item>a::after{left:.95rem;right:.95rem} .nav-menu .current-menu-item>a,.nav-menu .current_page_item>a{color:var(--gold-700)} .nav-actions{display:flex;align-items:center;gap:.5rem} /* icon buttons: circular glass hit-area with a soft hover fill */ .nav-ico{display:inline-grid;place-items:center;width:40px;height:40px;border-radius:50%; color:var(--emerald-800);position:relative;transition:background var(--t),color var(--t)} .nav-ico:hover{color:var(--gold-700);background:rgba(14,59,50,.06)} .cart-count{position:absolute;top:2px;right:2px;background:var(--gold-600);color:#231c0c; font-family:var(--font-sans);font-size:.6rem;font-weight:600;min-width:16px;height:16px; border-radius:9px;display:grid;place-items:center;padding:0 4px; box-shadow:0 0 0 2px rgba(249,245,238,.9)} .nav-toggle{display:none;background:none;border:0;cursor:pointer;width:40px;height:40px; border-radius:50%;place-items:center;color:var(--emerald-800);transition:background var(--t)} .nav-toggle:hover{background:rgba(14,59,50,.06)} /* brand switch — a glass capsule */ .brand-switch{display:flex;border:1px solid rgba(14,59,50,.14);border-radius:30px;padding:3px; background:rgba(255,255,255,.5);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)} .brand-switch a{font-size:.68rem;font-weight:500;letter-spacing:.12em;text-transform:uppercase; padding:.42em 1.05em;border-radius:30px;color:var(--muted);transition:color var(--t),background var(--t)} .brand-switch a:hover{color:var(--emerald-800)} .brand-switch a.active{background:var(--accent);color:#fff;box-shadow:0 2px 8px -2px rgba(14,59,50,.4)} .brand-switch a.active:hover{color:#fff} /* 6 — HERO ----------------------------------------------------------------- */ /* padding-block keeps the copy and CTA off the hero's edges when the text is long enough to fill the min-height (the brand landings run three lines) */ .hero{position:relative;min-height:clamp(520px,82vh,820px);display:grid;align-items:center;overflow:hidden;background:var(--emerald-800);padding-block:clamp(3.5rem,9vh,6rem)} .hero-media{position:absolute;inset:0} .hero-media img{width:100%;height:100%;object-fit:cover;opacity:.5} .hero::after{content:"";position:absolute;inset:0;background:linear-gradient(105deg,rgba(5,34,29,.9) 0%,rgba(5,34,29,.55) 45%,rgba(5,34,29,.2) 100%)} .hero-inner{position:relative;z-index:2;max-width:640px;color:#fff} .hero-inner .kicker{color:var(--gold-400)} .hero h1{color:#fff;margin-bottom:.3em} .hero h1 em{font-style:italic;color:var(--gold-400)} .hero p{color:rgba(255,255,255,.82);font-size:var(--step-1);max-width:44ch;margin-bottom:2rem} .hero-cta{display:flex;gap:1rem;flex-wrap:wrap} /* 7 — SECTIONS / CARDS ----------------------------------------------------- */ .sec-head{max-width:640px;margin:0 auto clamp(2rem,4vw,3.5rem)} .grid{display:grid;gap:clamp(1.1rem,2.5vw,2rem)} .grid-2{grid-template-columns:repeat(2,minmax(0,1fr))} .grid-3{grid-template-columns:repeat(3,minmax(0,1fr))} .grid-4{grid-template-columns:repeat(4,minmax(0,1fr))} /* category / feature tiles */ .tile{position:relative;display:block;overflow:hidden;border-radius:var(--radius-lg);aspect-ratio:3/4;background:var(--sand);box-shadow:var(--shadow-sm)} .tile img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform .7s var(--ease)} .tile:hover img{transform:scale(1.06)} .tile::after{content:"";position:absolute;inset:0;background:linear-gradient(to top,rgba(5,34,29,.72),transparent 55%)} .tile-label{position:absolute;left:0;right:0;bottom:0;z-index:2;padding:1.5rem;color:#fff} .tile-label h3{color:#fff;margin:0 0 .1em;font-size:var(--step-1)} .tile-label span{font-family:var(--font-sans);font-size:.72rem;letter-spacing:.18em;text-transform:uppercase;color:var(--gold-300)} /* value props */ .values{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1.5rem;border-block:1px solid var(--line);padding-block:2.4rem} .value{text-align:center} .value .ico{color:var(--gold-600);margin-bottom:.7rem;display:inline-flex} .value h4{font-family:var(--font-sans);font-size:.82rem;letter-spacing:.12em;text-transform:uppercase;color:var(--emerald-800);margin:0 0 .3em} .value p{font-size:.86rem;color:var(--muted);margin:0} /* 8 — BRAND SPLIT (hub) ---------------------------------------------------- */ .brand-split{display:grid;grid-template-columns:1fr 1fr;min-height:clamp(420px,58vh,620px)} .brand-half{position:relative;display:grid;place-items:center;text-align:center;padding:clamp(2rem,5vw,4rem);overflow:hidden;color:#fff;min-height:clamp(420px,58vh,620px)} .brand-half img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 35%;transition:transform .8s var(--ease)} .brand-half:hover img{transform:scale(1.05)} /* stronger, vignette-style scrim so the wordmark stays legible over busy product photos */ .brand-half::after{content:"";position:absolute;inset:0;transition:background var(--t)} .brand-half.eleg::after{background:radial-gradient(90% 70% at 50% 55%,rgba(4,28,23,.82),rgba(4,28,23,.62) 60%,rgba(4,28,23,.72))} .brand-half.home::after{background:radial-gradient(90% 70% at 50% 55%,rgba(46,30,18,.82),rgba(46,30,18,.6) 60%,rgba(38,24,14,.74))} .brand-half:hover::after{filter:brightness(1.15)} .brand-half .inner{text-shadow:0 1px 12px rgba(0,0,0,.35)} .brand-half .inner{position:relative;z-index:2;max-width:380px} .brand-half h2{color:#fff;font-size:var(--step-3)} .brand-half p{color:rgba(255,255,255,.85);margin-bottom:1.6rem} /* 9 — WOOCOMMERCE: shop + loop --------------------------------------------- */ .woocommerce-breadcrumb{font-size:.76rem;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);margin-bottom:1.5rem} .shop-hero{background:var(--emerald-800);color:#fff;text-align:center;padding-block:clamp(2.6rem,6vw,4.5rem)} .shop-hero h1{color:#fff;margin:0} .shop-hero p{color:rgba(255,255,255,.8);margin:.5rem 0 0} /* category navigation (internal-link row above the grid) */ .sira-cat-nav{margin:0 0 2rem} .sira-cat-nav ul{list-style:none;display:flex;flex-wrap:wrap;gap:.6rem;margin:0;padding:0} .sira-cat-nav a{display:inline-flex;align-items:center;gap:.45rem;padding:.5em 1.05em;border:1px solid var(--line); border-radius:30px;background:var(--white);color:var(--emerald-800); font-family:var(--font-sans);font-size:.8rem;letter-spacing:.04em;transition:all var(--t)} .sira-cat-nav a .c{font-size:.68rem;color:var(--muted);font-variant-numeric:tabular-nums} .sira-cat-nav a:hover{border-color:var(--gold-600);color:var(--gold-700)} .sira-cat-nav a.is-current{background:var(--emerald-700);border-color:var(--emerald-700);color:#fff} .sira-cat-nav a.is-current .c{color:rgba(255,255,255,.7)} .sira-more-cat{margin:1.4rem 0 0} .sira-more-cat a{font-family:var(--font-sans);font-weight:500;letter-spacing:.06em;text-transform:uppercase; font-size:.78rem;color:var(--emerald-700);border-bottom:1px solid var(--gold-600);padding-bottom:2px} .sira-more-cat a:hover{color:var(--gold-700)} ul.products{list-style:none;margin:0;padding:0;display:grid;gap:clamp(1rem,2.2vw,1.8rem);grid-template-columns:repeat(4,minmax(0,1fr))} /* Beat WooCommerce's own float/width layout (woocommerce-layout.css) on shop/archive. */ body.woocommerce ul.products,body.woocommerce-page ul.products{display:grid !important;grid-template-columns:repeat(4,minmax(0,1fr)) !important;gap:clamp(1rem,2.2vw,1.8rem) !important;float:none !important} body.woocommerce ul.products li.product,body.woocommerce-page ul.products li.product{width:auto !important;min-width:0 !important;float:none !important;margin:0 !important;padding:0 !important;clear:none !important} ul.products li.product{position:relative;margin:0;text-align:left} ul.products::before,ul.products::after{display:none !important} .product-card{background:var(--white);border:1px solid var(--line);border-radius:var(--radius-lg);overflow:hidden;height:100%;display:flex;flex-direction:column;transition:box-shadow var(--t),transform var(--t)} .product-card:hover{box-shadow:var(--shadow);transform:translateY(-4px)} .product-media{position:relative;aspect-ratio:4/5;overflow:hidden;background:var(--sand)} .product-media img{width:100%;height:100%;object-fit:cover;transition:transform .7s var(--ease)} .product-card:hover .product-media img{transform:scale(1.05)} .product-badge{position:absolute;top:.7rem;left:.7rem;z-index:2;background:var(--gold-600);color:#231c0c;font-size:.62rem;font-weight:600;letter-spacing:.1em;text-transform:uppercase;padding:.35em .7em;border-radius:3px} .product-brand{font-size:.66rem;letter-spacing:.16em;text-transform:uppercase;color:var(--gold-700);margin:.9rem 1rem 0} .product-body{padding:.15rem 1rem 1.1rem;display:flex;flex-direction:column;flex:1} .product-title{font-family:var(--font-display);font-size:1.28rem;font-weight:600;color:var(--emerald-800);margin:.15rem 0 .35rem;line-height:1.2} .product-title a{color:inherit} .product-title a:hover{color:var(--gold-700)} .price{font-family:var(--font-sans);font-weight:500;color:var(--ink);margin-top:auto;font-size:1rem} .price .amount{color:var(--emerald-700)} .price del{color:var(--muted);opacity:.7;margin-right:.4em;font-weight:400} .price ins{text-decoration:none} .price-request{color:var(--muted);font-style:italic;font-family:var(--font-display);font-size:1.15rem} .card-actions{display:flex;gap:.5rem;margin-top:.9rem} .card-actions .btn{justify-content:center;padding:.7em .9em;font-size:.72rem;min-width:0;letter-spacing:.1em} .card-actions .btn:first-child{flex:0 0 auto} /* View — secondary */ .card-actions .sira-order,.card-actions .btn:last-child{flex:1} .card-actions .btn svg{flex:none} .btn.is-muted{opacity:.55;pointer-events:none} /* 10 — SINGLE PRODUCT ------------------------------------------------------ */ .single-product-wrap{display:grid;grid-template-columns:1.05fr 1fr;gap:clamp(1.5rem,4vw,3.5rem);align-items:start} .pgallery{position:sticky;top:100px} .pgallery .main{border-radius:var(--radius-lg);overflow:hidden;background:var(--sand);aspect-ratio:4/5;box-shadow:var(--shadow-sm)} .pgallery .main img{width:100%;height:100%;object-fit:cover} .pgallery .thumbs{display:flex;gap:.6rem;margin-top:.7rem;flex-wrap:wrap} .pgallery .thumbs img{width:70px;height:88px;object-fit:cover;border-radius:4px;cursor:pointer;border:1px solid var(--line);opacity:.7;transition:opacity var(--t)} .pgallery .thumbs img:hover,.pgallery .thumbs img.active{opacity:1;border-color:var(--gold-600)} .psummary .product-brand{margin:0 0 .5rem} .psummary h1{font-size:var(--step-3);margin:0 0 .6rem} .psummary .price{font-size:1.5rem;margin:0 0 1.3rem} .psummary .short-desc{color:var(--muted);border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding-block:1.3rem;margin-bottom:1.5rem} .psummary .buy-row{display:flex;gap:.8rem;flex-wrap:wrap;margin-bottom:1.5rem} .psummary .buy-row .btn{flex:1;justify-content:center;min-width:180px} .pmeta{font-size:.85rem;color:var(--muted);display:grid;gap:.4rem} .pmeta .row{display:flex;gap:.6rem} .pmeta .row b{color:var(--emerald-800);font-weight:500;min-width:90px} .trust-row{display:flex;gap:1.3rem;flex-wrap:wrap;margin-top:1.6rem;padding-top:1.4rem;border-top:1px solid var(--line)} .trust-row .t{display:flex;align-items:center;gap:.5rem;font-size:.78rem;color:var(--muted)} .trust-row .t svg{color:var(--gold-600);flex:none} /* 10b — SINGLE PRODUCT (default WooCommerce markup) ------------------------ */ .single-product .site-main{max-width:var(--container);margin-inline:auto;padding-inline:var(--gutter);padding-block:2.5rem 4rem} /* Override WooCommerce's float layout (woocommerce-layout.css) with a 2-col grid. */ body.single-product div.product{position:relative;display:grid !important;grid-template-columns:1.05fr 1fr;gap:clamp(1.5rem,4vw,3.5rem);align-items:start} body.single-product div.product .woocommerce-product-gallery{position:relative;margin:0 !important;width:auto !important;float:none !important;align-self:start} /* WooCommerce prints the sale flash as a direct child of div.product. In a grid that made it claim the first cell and shunt the gallery into column 2, leaving a large empty block — so lift it out of flow and pin it onto the image. */ body.single-product div.product>span.onsale{ position:absolute;top:1rem;left:1rem;z-index:3;margin:0;min-height:0;min-width:0; background:var(--gold-600);color:#231c0c;font-family:var(--font-sans);font-size:.64rem;font-weight:600; letter-spacing:.12em;text-transform:uppercase;line-height:1;padding:.5em .85em;border-radius:3px} /* zoom trigger — a real control instead of a stray emoji above the gallery */ .woocommerce div.product .woocommerce-product-gallery__trigger{ position:absolute;top:1rem;right:1rem;z-index:3;width:38px;height:38px;margin:0; display:grid;place-items:center;border-radius:50%;background:rgba(255,255,255,.94); box-shadow:var(--shadow-sm);font-size:.95rem;line-height:1;text-decoration:none} /* keep tabs & related clearly separated from the two-column row above */ body.single-product div.product .woocommerce-tabs, body.single-product div.product .related, body.single-product div.product .upsells{clear:both;margin-top:3.5rem} body.single-product div.product .summary{width:auto !important;float:none !important} .woocommerce div.product .woocommerce-product-gallery__wrapper{margin:0} /* jquery.zoom injects a full-resolution img.zoomImg into this box; without a clip it stuck ~1100px off the right edge of the page on phones */ .woocommerce div.product .woocommerce-product-gallery__image{position:relative;overflow:hidden;border-radius:var(--radius-lg)} .woocommerce div.product img.zoomImg{max-width:none} /* Gallery thumbnails. FlexSlider prints them as an
    , and the stylesheet that normally lays them out is the one we drop — so they showed as a numbered list. Products only grew galleries once duplicate listings were merged. */ .woocommerce div.product .flex-control-nav.flex-control-thumbs{ list-style:none;display:grid;grid-template-columns:repeat(5,minmax(0,1fr)); gap:.6rem;margin:.75rem 0 0;padding:0} .woocommerce div.product .flex-control-thumbs li{margin:0;padding:0;list-style:none} .woocommerce div.product .flex-control-thumbs img{ width:100%;aspect-ratio:1/1;object-fit:cover;border-radius:6px;cursor:pointer; opacity:.62;border:1px solid var(--line);transition:opacity var(--t),border-color var(--t)} .woocommerce div.product .flex-control-thumbs img:hover, .woocommerce div.product .flex-control-thumbs img.flex-active{opacity:1;border-color:var(--gold-600)} .woocommerce div.product .flex-viewport{border-radius:var(--radius-lg);overflow:hidden} .woocommerce div.product .woocommerce-product-gallery__image img{border-radius:var(--radius-lg);box-shadow:var(--shadow-sm)} .woocommerce div.product .summary{margin:0;float:none;width:100%} .woocommerce div.product .sira-brand-eyebrow{font-size:.72rem;letter-spacing:.18em;text-transform:uppercase;color:var(--gold-700);display:block;margin-bottom:.6rem} .woocommerce div.product .product_title{font-family:var(--font-display);font-size:var(--step-3);color:var(--emerald-800);margin:0 0 .5rem;line-height:1.1} .woocommerce div.product p.price,.woocommerce div.product span.price{font-family:var(--font-sans);font-size:1.5rem;color:var(--emerald-700);margin:0 0 1.2rem} .woocommerce div.product p.price del{color:var(--muted);font-size:1.1rem;margin-right:.5rem} .woocommerce div.product p.price ins{text-decoration:none;font-weight:600} .woocommerce div.product .woocommerce-product-details__short-description{color:var(--muted);border-block:1px solid var(--line);padding-block:1.2rem;margin-bottom:1.5rem} .woocommerce div.product form.cart{margin:0 0 1.2rem;display:flex;gap:.8rem;align-items:center;flex-wrap:wrap} .woocommerce div.product form.cart .quantity{display:flex} .woocommerce .quantity input.qty{width:64px;padding:.7em .5em;border:1px solid var(--line);border-radius:var(--radius);text-align:center;font-family:var(--font-sans);background:#fff} .woocommerce div.product form.cart .button, .woocommerce div.product .single_add_to_cart_button{ background:var(--emerald-700);color:#fff;border:1px solid var(--emerald-700);border-radius:var(--radius); font-family:var(--font-sans);font-size:.82rem;font-weight:500;letter-spacing:.14em;text-transform:uppercase; padding:.95em 2em;transition:all var(--t);cursor:pointer;flex:1;min-width:160px; } .woocommerce div.product form.cart .button:hover, .woocommerce div.product .single_add_to_cart_button:hover{background:var(--emerald-800);transform:translateY(-2px);box-shadow:var(--shadow)} .sira-buy-wa{display:flex;align-items:center;justify-content:center;gap:.6em;background:#25D366;color:#04321a;border-radius:var(--radius);font-family:var(--font-sans);font-size:.82rem;font-weight:600;letter-spacing:.1em;text-transform:uppercase;padding:.95em 1.6em;margin-bottom:1.4rem;transition:all var(--t)} .sira-buy-wa:hover{background:#1eb457;color:#04321a;transform:translateY(-2px);box-shadow:var(--shadow)} .woocommerce div.product .product_meta{font-size:.82rem;color:var(--muted);border-top:1px solid var(--line);padding-top:1.2rem} .woocommerce div.product .product_meta>span{display:block;margin-bottom:.3rem} .woocommerce div.product .product_meta a{color:var(--emerald-700)} .sira-trust{display:flex;gap:1.4rem;flex-wrap:wrap;margin-top:1.4rem;padding-top:1.3rem;border-top:1px solid var(--line)} .sira-trust .t{display:flex;align-items:center;gap:.5rem;font-size:.78rem;color:var(--muted)} .sira-trust .t svg{color:var(--gold-600);flex:none} /* tabs + related span both columns */ .woocommerce div.product .woocommerce-tabs, .woocommerce div.product .related, .woocommerce div.product .upsells{grid-column:1 / -1;margin-top:3rem} .woocommerce-tabs .tabs{list-style:none;display:flex;gap:1.5rem;padding:0;margin:0 0 1.5rem;border-bottom:1px solid var(--line)} .woocommerce-tabs .tabs a{font-family:var(--font-sans);font-size:.8rem;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);padding-bottom:.8rem;display:inline-block} .woocommerce-tabs .tabs .active a{color:var(--emerald-800);border-bottom:2px solid var(--gold-600)} .woocommerce div.product .related h2,.woocommerce div.product .upsells h2{font-family:var(--font-display);font-size:var(--step-2);margin-bottom:1.5rem} .woocommerce div.product .related ul.products,.woocommerce div.product .upsells ul.products{grid-template-columns:repeat(4,minmax(0,1fr))} .woocommerce-message,.woocommerce-info,.woocommerce-error{ display:flex;align-items:center;gap:1rem;flex-wrap:wrap; background:var(--ivory); border:0 !important;border-left:3px solid var(--gold-600) !important; border-radius:0 var(--radius-lg) var(--radius-lg) 0; box-shadow:var(--shadow-sm); padding:1em 1.25em;margin:0 0 1.75rem;list-style:none; color:var(--ink);font-size:.95rem;line-height:1.5} .woocommerce-message::before,.woocommerce-info::before,.woocommerce-error::before{display:none} .woocommerce-message .button,.woocommerce-info .button,.woocommerce-error .button{order:2;margin-left:auto;flex:none;padding:.7em 1.5em;font-size:.72rem} .woocommerce-error{border-left-color:#c0392b !important} .woocommerce-info{border-left-color:var(--emerald-600) !important} @media(max-width:820px){ /* the desktop rule is `body.single-product div.product` (0,1,2) — this has to match or beat it, or the two columns survive all the way down to 360px */ body.single-product div.product, .woocommerce div.product{grid-template-columns:1fr !important;gap:1.5rem} body.single-product div.product .woocommerce-product-gallery{width:100% !important} .woocommerce div.product .flex-control-nav.flex-control-thumbs{grid-template-columns:repeat(5,minmax(0,1fr))} .sira-buy-wa{padding:.95em 1rem;letter-spacing:.06em} } /* 10c — CART / CHECKOUT / ACCOUNT (classic WooCommerce) -------------------- */ .woocommerce-cart .site-main,.woocommerce-checkout .site-main,.woocommerce-account .site-main,.woocommerce-order-received .site-main{max-width:var(--container)} .woocommerce .entry-title,.woocommerce-cart h1,.woocommerce-checkout h1{font-family:var(--font-display);color:var(--emerald-800);margin-bottom:1.5rem} /* tables */ .woocommerce table.shop_table{border:1px solid var(--line);border-radius:var(--radius-lg);border-collapse:separate;border-spacing:0;overflow:hidden;width:100%;background:var(--white)} .woocommerce table.shop_table th{font-family:var(--font-sans);font-weight:600;letter-spacing:.06em;text-transform:uppercase;font-size:.72rem;color:var(--emerald-800);background:var(--sand);padding:1rem} .woocommerce table.shop_table td{padding:1rem;border-top:1px solid var(--line);vertical-align:middle;color:var(--ink)} .woocommerce table.cart img{width:72px;border-radius:6px} .woocommerce a.remove{color:var(--gold-700)!important;border:1px solid var(--line);font-weight:400} .woocommerce a.remove:hover{background:var(--emerald-700);color:#fff!important} .woocommerce .product-name a{color:var(--emerald-800);font-family:var(--font-display);font-size:1.1rem} .woocommerce .quantity input.qty{width:64px} /* buttons */ .woocommerce .button,.woocommerce button.button,.woocommerce input.button,.woocommerce #place_order,.woocommerce a.button{ background:var(--emerald-700);color:#fff;border:1px solid var(--emerald-700);border-radius:var(--radius); font-family:var(--font-sans);font-size:.8rem;font-weight:500;letter-spacing:.12em;text-transform:uppercase; padding:.9em 1.8em;transition:all var(--t);cursor:pointer} .woocommerce .button:hover,.woocommerce button.button:hover,.woocommerce #place_order:hover,.woocommerce a.button:hover{background:var(--emerald-800);transform:translateY(-2px);box-shadow:var(--shadow);color:#fff} .woocommerce .button.alt,.woocommerce #place_order{background:var(--gold-600);border-color:var(--gold-600);color:#231c0c;font-size:.9rem;padding:1.05em 2.2em} .woocommerce .button.alt:hover,.woocommerce #place_order:hover{background:var(--gold-700);border-color:var(--gold-700);color:#fff} /* ---- CART: items table left, summary card sticky on the right ---- Previously the totals sat under a full-width table and floated right, which left a dead column of whitespace beside it. The cart page's `.woocommerce` div holds the notices, the form and the collaterals, so grid it directly. */ .woocommerce-cart .woocommerce-cart-form{margin:0;display:block;width:100%;min-width:0} .woocommerce-cart .cart-collaterals{display:block;width:100%;margin:0;float:none;min-width:0} .woocommerce-cart .cart-collaterals .cross-sells{display:none} @media(min-width:960px){ .woocommerce-cart .entry-content>.woocommerce, .woocommerce-cart .site-main>.woocommerce{ display:grid;grid-template-columns:minmax(0,1.6fr) minmax(300px,.85fr); gap:2rem;align-items:start} .woocommerce-cart .entry-content>.woocommerce>.woocommerce-notices-wrapper, .woocommerce-cart .site-main>.woocommerce>.woocommerce-notices-wrapper{grid-column:1 / -1} .woocommerce-cart .cart-collaterals{position:sticky;top:100px} } @media(max-width:959px){ .woocommerce-cart .cart-collaterals{margin-top:2rem} } /* items table */ table.shop_table.cart{border-radius:var(--radius-lg);overflow:hidden;margin:0} table.cart th{white-space:nowrap} table.cart th.product-price,table.cart th.product-subtotal, table.cart td.product-price,table.cart td.product-subtotal{text-align:right} table.cart th.product-quantity,table.cart td.product-quantity{text-align:center} table.cart td.product-price,table.cart td.product-subtotal{white-space:nowrap;font-variant-numeric:tabular-nums} table.cart td.product-subtotal{font-weight:600;color:var(--emerald-800)} table.cart td.product-remove{width:48px;text-align:center;padding:1rem .5rem} table.cart td.product-thumbnail{width:96px;padding:.9rem 0 .9rem 1rem} table.cart td.product-name{padding-left:1rem} table.cart .product-name a{font-size:1.05rem;line-height:1.35;display:inline-block} /* subtle remove control */ .woocommerce a.remove{display:inline-grid;place-items:center;width:26px;height:26px;border:0!important;border-radius:50%; background:transparent;color:var(--muted)!important;font-size:1.25rem;line-height:1;text-decoration:none;transition:all var(--t)} .woocommerce a.remove:hover{background:#f6e7e4;color:#c0392b!important} /* quantity */ .woocommerce .quantity input.qty{width:76px;text-align:center;padding:.55em .4em;font-variant-numeric:tabular-nums} /* coupon + update row — keep the cell a real table-cell so the row still spans */ table.cart td.actions{padding:1rem;background:var(--ivory);text-align:right;vertical-align:middle} table.cart td.actions::after{content:"";display:table;clear:both} table.cart td.actions .coupon{float:left;display:flex;gap:.6rem;margin:0;max-width:460px} table.cart td.actions .coupon input[type=text], table.cart td.actions .coupon input#coupon_code{min-width:170px;width:auto} table.cart td.actions .coupon .button{flex:none} table.cart td.actions button[name="update_cart"], table.cart td.actions input[name="update_cart"]{margin:0} /* column widths so the product name gets the room */ table.cart th:first-child,table.cart td.product-remove{width:52px} table.cart th:nth-child(2),table.cart td.product-thumbnail{width:104px} table.cart td.product-name{width:auto;min-width:180px} table.cart td.product-price,table.cart td.product-subtotal{width:130px} table.cart td.product-quantity{width:120px} table.cart td.product-thumbnail img{display:block;width:76px;height:76px;object-fit:cover;border-radius:6px} /* totals card — sits to the right under the items table */ .cart_totals{float:none !important;width:100% !important;margin:0;background:var(--ivory);border:1px solid var(--line);border-radius:var(--radius-lg);padding:1.6rem} .cart_totals table.shop_table,.cart_totals table.shop_table th,.cart_totals table.shop_table td{background:transparent !important} .cart_totals h2{font-family:var(--font-display);font-size:var(--step-2);color:var(--emerald-800);margin:0 0 1rem} .cart_totals table.shop_table{border:0;background:transparent;border-radius:0} .cart_totals table.shop_table th,.cart_totals table.shop_table td{background:transparent;border-color:var(--line); text-transform:none;font-size:.95rem;letter-spacing:0;padding:.85rem 0;color:var(--ink)} .cart_totals table.shop_table{table-layout:fixed;width:100%} .cart_totals table.shop_table th{font-family:var(--font-sans);font-weight:500;color:var(--muted);width:38%;text-align:left} .cart_totals table.shop_table td{text-align:right;font-variant-numeric:tabular-nums;word-break:normal;border-left:0;border-right:0} /* the shipping cell holds a list of choices, not a figure — left-align it or the wrapped labels read ragged against the right edge */ .cart_totals tr.shipping th{vertical-align:top;padding-top:1.1rem} .cart_totals tr.shipping td{text-align:left} .cart_totals tr.shipping td p,.cart_totals tr.shipping td .woocommerce-shipping-destination{margin:.5rem 0 0;font-size:.85rem;color:var(--muted);line-height:1.5} .cart_totals tr.shipping td .shipping-calculator-button{display:inline-block;margin-top:.4rem} .cart_totals tr.order-total th,.cart_totals tr.order-total td{font-size:1.1rem;font-weight:600;color:var(--emerald-800);border-top:1px solid var(--line)} .cart_totals .woocommerce-shipping-methods{list-style:none;margin:0;padding:0;text-align:left} .cart_totals .woocommerce-shipping-methods li{margin-bottom:.5rem;display:flex;gap:.5rem;align-items:flex-start} .cart_totals .woocommerce-shipping-methods label{font-weight:400;color:var(--ink);font-size:.9rem;line-height:1.4} .cart_totals .shipping-calculator-button{font-size:.85rem} .wc-proceed-to-checkout{padding:1.2rem 0 0} .wc-proceed-to-checkout a.checkout-button{display:block;width:100%;text-align:center;background:var(--gold-600)!important; border-color:var(--gold-600)!important;color:#231c0c!important;font-size:.9rem;padding:1.05em 1.5em} .wc-proceed-to-checkout a.checkout-button:hover{background:var(--gold-700)!important;border-color:var(--gold-700)!important;color:#fff!important} /* ---- CART on phones ---- WooCommerce's small-screen stylesheet stacks the table into label/value rows, but our desktop column widths (52px / 104px / 130px …) were still in force, so each stacked cell became its own narrow ragged box. Clear the widths and lay each line item out as a card instead. Matches Woo's own 768px breakpoint. */ @media(max-width:768px){ /* The rows are display:block here, so the box falls back to min-content sizing and ignores width:100% — it grew ~70px past the screen. Making the table and tbody plain blocks puts it back under the container. */ .woocommerce table.shop_table.cart, .woocommerce table.shop_table.cart tbody{display:block;width:100% !important;max-width:100%} .woocommerce table.shop_table.cart{border:0 !important;background:transparent !important} table.cart th,table.cart td{width:auto !important;min-width:0 !important;max-width:100%} .woocommerce table.shop_table_responsive tr:nth-child(2n) td{background-color:transparent !important} table.cart tbody tr.cart_item{ display:grid !important;grid-template-columns:84px minmax(0,1fr); column-gap:1rem;align-items:start;position:relative; background:var(--white);border:1px solid var(--line);border-radius:var(--radius-lg); padding:1rem;margin:0 0 1rem} table.cart tbody tr.cart_item td{ display:block;border:0 !important;background:transparent !important; padding:.15rem 0;text-align:left !important} table.cart tbody tr.cart_item td::before{ float:none;display:inline;margin-right:.4rem;font-weight:500;font-size:.72rem; letter-spacing:.06em;text-transform:uppercase;color:var(--muted)} /* Woo hides the thumbnail on small screens; keep it — it's the whole point of a cart row */ table.cart tbody tr.cart_item td.product-thumbnail{display:block !important;grid-column:1;grid-row:1 / span 4;padding:0} table.cart tbody tr.cart_item td.product-thumbnail::before{display:none} table.cart td.product-thumbnail img{width:84px;height:84px} table.cart tbody tr.cart_item td.product-name{grid-column:2;grid-row:1;padding-right:1.6rem} table.cart tbody tr.cart_item td.product-name::before{display:none} table.cart tbody tr.cart_item td.product-price{grid-column:2;grid-row:2} table.cart tbody tr.cart_item td.product-quantity{grid-column:2;grid-row:3;padding-top:.4rem} table.cart tbody tr.cart_item td.product-subtotal{grid-column:2;grid-row:4;padding-top:.4rem} table.cart tbody tr.cart_item td.product-remove{position:absolute;top:.55rem;right:.55rem;padding:0} /* coupon + update row */ table.cart tbody tr td.actions{ display:block !important;text-align:left !important;padding:1rem; background:var(--ivory) !important;border:1px solid var(--line) !important;border-radius:var(--radius-lg)} table.cart td.actions .coupon{float:none !important;display:flex;gap:.6rem;max-width:none;margin:0 0 .7rem} table.cart td.actions .coupon input[type=text], table.cart td.actions .coupon input#coupon_code{flex:1;width:auto !important;min-width:0} /* a compact Apply button leaves the coupon field readable at 412px */ table.cart td.actions .coupon .button{width:auto !important;float:none !important;flex:none; padding:.85em 1.1em;font-size:.72rem;letter-spacing:.08em} table.cart td.actions .button[name="update_cart"], table.cart td.actions input[name="update_cart"]{display:block;width:100%} } /* form fields */ .woocommerce form .form-row{margin-bottom:1rem} .woocommerce form label{font-family:var(--font-sans);font-size:.8rem;font-weight:500;color:var(--emerald-800);letter-spacing:.02em} .woocommerce form .form-row input.input-text,.woocommerce form .form-row textarea,.woocommerce form .form-row select, .woocommerce-checkout input[type=text],.woocommerce-checkout input[type=email],.woocommerce-checkout input[type=tel], .woocommerce-checkout input[type=password],.woocommerce-checkout textarea,.select2-container .select2-selection{ border:1px solid var(--line)!important;border-radius:var(--radius);padding:.75em .9em;background:var(--white);font-family:var(--font-sans);font-size:.95rem;width:100%;color:var(--ink)} /* radios & checkboxes must stay small and inline — never full width */ .woocommerce input[type=radio],.woocommerce input[type=checkbox], .woocommerce-checkout input[type=radio],.woocommerce-checkout input[type=checkbox], .woocommerce form .form-row input[type=radio],.woocommerce form .form-row input[type=checkbox]{ width:auto!important;min-width:0!important;display:inline-block;margin:0 .5rem 0 0;padding:0!important; border:0!important;background:transparent!important;vertical-align:middle;accent-color:var(--emerald-700)} .woocommerce form .form-row input.input-text:focus,.woocommerce form .form-row textarea:focus{border-color:var(--gold-600)!important;outline:none} /* checkout two-column WooCommerce's layout stylesheet floats .col-1/.col-2 at 48% and the form-row-first/last pair at 47%. Inside our already-narrower grid column that squeezed Billing details to roughly half the space available. Unfloat both and let a grid handle the pairing instead. */ .woocommerce-checkout .col2-set{display:block;width:100%} .woocommerce-checkout .col2-set>.col-1, .woocommerce-checkout .col2-set>.col-2{width:100% !important;float:none !important;margin:0 0 2rem;padding:0} .woocommerce-checkout .col2-set>.col-2:last-child{margin-bottom:0} .woocommerce-checkout .woocommerce-billing-fields__field-wrapper, .woocommerce-checkout .woocommerce-shipping-fields__field-wrapper, .woocommerce-checkout .woocommerce-additional-fields__field-wrapper{ display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:1rem} .woocommerce-checkout .woocommerce-billing-fields__field-wrapper>.form-row, .woocommerce-checkout .woocommerce-shipping-fields__field-wrapper>.form-row, .woocommerce-checkout .woocommerce-additional-fields__field-wrapper>.form-row{ width:100% !important;float:none !important;margin-left:0;margin-right:0} /* only the paired name fields share a row; everything else spans */ .woocommerce-checkout .woocommerce-billing-fields__field-wrapper>.form-row:not(.form-row-first):not(.form-row-last), .woocommerce-checkout .woocommerce-shipping-fields__field-wrapper>.form-row:not(.form-row-first):not(.form-row-last), .woocommerce-checkout .woocommerce-additional-fields__field-wrapper>.form-row{grid-column:1 / -1} .woocommerce-checkout .col2-set>.col-1>h3, .woocommerce-checkout .col2-set>.col-2>h3{margin-top:0} @media(max-width:560px){ .woocommerce-checkout .woocommerce-billing-fields__field-wrapper, .woocommerce-checkout .woocommerce-shipping-fields__field-wrapper{grid-template-columns:1fr} .woocommerce-checkout .woocommerce-billing-fields__field-wrapper>.form-row{grid-column:1 / -1} } @media(min-width:900px){ .woocommerce-checkout form.checkout{display:grid;grid-template-columns:1.1fr .9fr;gap:0 2.5rem;align-items:start} .woocommerce-checkout #customer_details{grid-column:1;grid-row:1 / span 2} .woocommerce-checkout #order_review_heading{grid-column:2;grid-row:1;margin-top:0} .woocommerce-checkout #order_review{grid-column:2;grid-row:2} } .woocommerce-checkout h3{font-family:var(--font-display);color:var(--emerald-800);font-size:var(--step-2)} #order_review{background:var(--ivory);border:1px solid var(--line);border-radius:var(--radius-lg);padding:1.5rem;position:sticky;top:100px} #order_review table.shop_table{border:0;background:transparent} #order_review table.shop_table th,#order_review table.shop_table td{background:transparent;text-transform:none} /* payment methods */ #payment,.woocommerce-checkout #payment{background:transparent;border-radius:var(--radius)} #payment ul.payment_methods{list-style:none;margin:0 0 1rem;padding:0;border:1px solid var(--line);border-radius:var(--radius-lg);overflow:hidden} #payment ul.payment_methods li{padding:1rem;border-bottom:1px solid var(--line);background:var(--white); display:flex;flex-wrap:wrap;align-items:center;gap:.15rem} #payment ul.payment_methods li:last-child{border-bottom:0} #payment ul.payment_methods label{font-weight:600;color:var(--emerald-800);cursor:pointer;display:inline;margin:0} #payment ul.payment_methods li .payment_box{flex:1 0 100%;margin-top:.7rem} #payment ul.payment_methods li img{max-height:24px;width:auto;display:inline-block;margin-left:.5rem} /* shipping choices (cart totals + checkout review) — no bullets, radio inline with label */ ul#shipping_method,.woocommerce-shipping-methods{list-style:none!important;margin:0;padding:0} ul#shipping_method li,.woocommerce-shipping-methods li{list-style:none!important;display:flex;align-items:flex-start; gap:.5rem;margin:0 0 .5rem;text-align:left} ul#shipping_method li::marker,.woocommerce-shipping-methods li::marker{content:""} ul#shipping_method label,.woocommerce-shipping-methods label{display:inline;font-weight:400;color:var(--ink);font-size:.9rem;line-height:1.45;margin:0} ul#shipping_method input[type=radio]{margin-top:.25rem} /* "Ship to a different address?" — checkbox inline with its label */ #ship-to-different-address{margin:0 0 1rem} #ship-to-different-address label,#ship-to-different-address .checkbox{display:inline-flex;align-items:center;gap:.55rem; font-family:var(--font-sans);font-size:.95rem;font-weight:500;color:var(--emerald-800);margin:0} #ship-to-different-address span{font-family:var(--font-sans);font-size:.95rem} /* generic inline checkbox rows (terms, create account, newsletter) */ .woocommerce form .form-row.woocommerce-validated label.checkbox, .woocommerce-terms-and-conditions-wrapper label.checkbox, .woocommerce form label.checkbox{display:inline-flex;align-items:flex-start;gap:.55rem;font-weight:400} #payment .payment_box{background:var(--sand);border-radius:var(--radius);padding:1rem;font-size:.88rem;color:var(--muted);margin-top:.6rem} #payment .payment_box::before{display:none} #payment #place_order{width:100%;margin-top:.5rem} .woocommerce-terms-and-conditions-wrapper{margin:1rem 0} /* my-account: a login form has no business being 1000px wide */ .woocommerce-account .woocommerce-form-login, .woocommerce-account .woocommerce-form-register, .woocommerce-account .woocommerce-ResetPassword{ max-width:440px;background:var(--ivory);border:1px solid var(--line); border-radius:var(--radius-lg);padding:1.8rem;margin:0} .woocommerce-account .woocommerce-form-login .form-row{margin-bottom:1.1rem} .woocommerce-account .woocommerce-form-login-rememberme{display:inline-flex;align-items:center;gap:.5rem;margin:0 0 1rem;font-weight:400} .woocommerce-account .woocommerce-form-login button[type=submit]{width:100%;justify-content:center} .woocommerce-account .woocommerce-LostPassword{margin:1rem 0 0;font-size:.88rem} .woocommerce-account .woocommerce-MyAccount-navigation ul{list-style:none;margin:0 0 2rem;padding:0;display:flex;flex-wrap:wrap;gap:.5rem} .woocommerce-account .woocommerce-MyAccount-navigation a{display:inline-block;padding:.5em 1em;border:1px solid var(--line); border-radius:30px;font-size:.8rem;letter-spacing:.06em;text-transform:uppercase;color:var(--emerald-800);background:var(--white)} .woocommerce-account .woocommerce-MyAccount-navigation .is-active a{background:var(--emerald-700);color:#fff;border-color:var(--emerald-700)} .woocommerce .show-password-input{cursor:pointer} /* search results pagination */ .sira-pagination{display:flex;justify-content:center;gap:.4rem;margin-top:2.5rem} .sira-pagination .page-numbers{display:inline-grid;place-items:center;min-width:40px;height:40px;padding:0 .6rem; border:1px solid var(--line);border-radius:var(--radius);background:var(--white);color:var(--emerald-800); font-size:.85rem;transition:all var(--t)} .sira-pagination .page-numbers:hover{border-color:var(--gold-600);color:var(--gold-700)} .sira-pagination .page-numbers.current{background:var(--emerald-700);border-color:var(--emerald-700);color:#fff} /* order received / thank you */ .woocommerce-order{max-width:760px} .woocommerce-thankyou-order-received{font-family:var(--font-display);font-size:var(--step-2);color:var(--emerald-800);background:var(--accent-soft);border-radius:var(--radius-lg);padding:1.5rem;border-left:3px solid var(--gold-600)} ul.woocommerce-order-overview{list-style:none;display:flex;flex-wrap:wrap;gap:1.5rem;padding:1.3rem 0;border-block:1px solid var(--line);margin:1.5rem 0} ul.woocommerce-order-overview li{font-size:.8rem;text-transform:uppercase;letter-spacing:.08em;color:var(--muted)} ul.woocommerce-order-overview li strong{display:block;font-size:1rem;text-transform:none;letter-spacing:0;color:var(--emerald-800);font-family:var(--font-display)} .woocommerce-message .button{background:var(--emerald-700);color:#fff} /* 10c-2 — SUMMARY TABLES --------------------------------------------------- Cart totals and the checkout order review are summary cards, not data grids. Strip every cell border/background inherited from the generic .shop_table styling and re-add only the horizontal rules between rows. */ .cart_totals table.shop_table,.cart_totals table.shop_table tr, .cart_totals table.shop_table th,.cart_totals table.shop_table td, #order_review table.shop_table,#order_review table.shop_table tr, #order_review table.shop_table th,#order_review table.shop_table td{ border:0 !important;background:transparent !important;box-shadow:none;border-radius:0} .cart_totals table.shop_table tr>*, #order_review table.shop_table tbody tr>*, #order_review table.shop_table tfoot tr>*{border-top:1px solid var(--line) !important} .cart_totals table.shop_table tr:first-child>*, #order_review table.shop_table thead tr>*{border-top:0 !important} #order_review table.shop_table th{font-size:.68rem;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);padding:.4rem 0 .8rem} #order_review table.shop_table td{padding:.9rem 0;text-align:right;font-variant-numeric:tabular-nums} #order_review table.shop_table td.product-name, #order_review table.shop_table th.product-name{text-align:left;padding-right:1rem} #order_review table.shop_table tr.woocommerce-shipping-totals td{text-align:left} #order_review table.shop_table tr.order-total th, #order_review table.shop_table tr.order-total td{font-size:1.1rem;font-weight:600;color:var(--emerald-800);text-transform:none;letter-spacing:0} /* selects — WooCommerce's select2 skin lives in the stylesheet we dropped, so style the native control (its text was sitting on the bottom border) */ .woocommerce form .form-row select, .woocommerce-checkout select,.woocommerce select.country_select,.woocommerce select.state_select{ -webkit-appearance:none;appearance:none;width:100%;line-height:1.4;height:auto; padding:.75em 2.4em .75em .9em;border:1px solid var(--line);border-radius:var(--radius); background-color:var(--white);color:var(--ink);font-family:var(--font-sans);font-size:.95rem; background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none' stroke='%236C7570' stroke-width='1.6'%3E%3Cpath d='M1 1.5 6 6.5l5-5'/%3E%3C/svg%3E"); background-repeat:no-repeat;background-position:right .9em center} .woocommerce form .form-row select:focus,.woocommerce-checkout select:focus{border-color:var(--gold-600);outline:none} /* Country/District are upgraded to select2 widgets, whose own stylesheet pins the control to a 28px box — the label then sat on the bottom border. Match them to the text inputs instead. (The dropdown is appended to , so its rules can't be nested under .woocommerce.) */ .woocommerce .select2-container{width:100% !important} .woocommerce .select2-container--default .select2-selection--single{ height:auto;min-height:0;display:block;padding:.75em 2.4em .75em .9em; border:1px solid var(--line) !important;border-radius:var(--radius);background:var(--white)} .woocommerce .select2-container--default .select2-selection--single .select2-selection__rendered{ line-height:1.4;padding:0;color:var(--ink);font-family:var(--font-sans);font-size:.95rem} .woocommerce .select2-container--default .select2-selection--single .select2-selection__arrow{ top:0;right:.9em;height:100%;width:12px} .woocommerce .select2-container--default .select2-selection--single .select2-selection__arrow b{ border:0;border-right:1.6px solid var(--muted);border-bottom:1.6px solid var(--muted); width:8px;height:8px;margin:-6px 0 0 -4px;transform:rotate(45deg)} .woocommerce .select2-container--open .select2-selection--single{border-color:var(--gold-600) !important} .select2-dropdown{border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow);background:var(--white)} .select2-container--default .select2-search--dropdown .select2-search__field{ border:1px solid var(--line);border-radius:var(--radius);padding:.5em .7em;font-family:var(--font-sans)} .select2-container--default .select2-results__option{padding:.55em .9em;font-size:.92rem} .select2-container--default .select2-results__option--highlighted[aria-selected], .select2-container--default .select2-results__option--highlighted[data-selected]{background:var(--emerald-700);color:#fff} /* 10d — STAR RATINGS ------------------------------------------------------- WooCommerce draws its stars with an icon font that ships in the stylesheet we deliberately dropped, so the rating picker fell back to the raw link text ("1 of 5 stars"). These rules redraw both the picker and the read-only average with plain characters — no font dependency. */ /* read-only average (loop + product page) */ .woocommerce .star-rating{position:relative;display:inline-block;overflow:hidden; width:5.8em;height:1.25em;line-height:1.25;font-size:1rem;font-family:var(--font-sans); letter-spacing:.14em;white-space:nowrap} .woocommerce .star-rating::before{content:"☆☆☆☆☆";position:absolute;top:0;left:0;color:var(--gold-500)} .woocommerce .star-rating span{position:absolute;top:0;left:0;overflow:hidden;padding-top:1.5em;height:0} .woocommerce .star-rating span::before{content:"★★★★★";position:absolute;top:0;left:0;color:var(--gold-600)} .woocommerce .woocommerce-product-rating{display:flex;align-items:center;gap:.7rem;margin:0 0 1rem} .woocommerce .woocommerce-review-link{font-size:.82rem;color:var(--muted);border:0} /* the picker in the review form */ .woocommerce #review_form p.stars,.woocommerce p.stars{display:inline-block;margin:0 0 1rem;line-height:1} .woocommerce p.stars>span{display:inline-flex;gap:.1em} .woocommerce p.stars a{ position:relative;display:inline-block;font-size:1.55rem;width:1em;height:1em;line-height:1; text-indent:-999em;overflow:hidden;text-decoration:none;border:0 !important;box-shadow:none} .woocommerce p.stars a::before{content:"☆";position:absolute;inset:0;text-indent:0;line-height:1; text-align:center;color:var(--gold-600);transition:color var(--t)} .woocommerce p.stars:hover a::before{content:"★"} .woocommerce p.stars:hover a:hover~a::before{content:"☆"} .woocommerce p.stars.selected a.active::before{content:"★"} .woocommerce p.stars.selected a:not(.active)::before{content:"★"} /* higher specificity than the :not() rule above, so stars past the choice empty */ .woocommerce p.stars.selected a.active~a::before{content:"☆"} .woocommerce #review_form #respond .comment-form-rating{margin-bottom:1rem} .woocommerce #review_form #respond label{display:block;margin-bottom:.35rem} .woocommerce #reviews #comments ol.commentlist{list-style:none;margin:0 0 2rem;padding:0;display:grid;gap:1rem} .woocommerce #reviews #comments ol.commentlist li .comment_container{display:flex;gap:1rem;background:var(--white); border:1px solid var(--line);border-radius:var(--radius-lg);padding:1.2rem} .woocommerce #reviews #comments ol.commentlist li img.avatar{width:44px;height:44px;border-radius:50%;flex:none} .woocommerce #reviews #comments ol.commentlist .meta{font-size:.8rem;color:var(--muted);margin-bottom:.4rem} /* the review form is a WordPress comment form, so it misses the WooCommerce .form-row styling above — give it the same fields and button */ .woocommerce #review_form #respond{max-width:620px} .woocommerce #review_form #respond .comment-form>p{margin:0 0 1.1rem} .woocommerce #review_form #respond input[type=text], .woocommerce #review_form #respond input[type=email], .woocommerce #review_form #respond input[type=url], .woocommerce #review_form #respond textarea{ width:100%;border:1px solid var(--line);border-radius:var(--radius);padding:.75em .9em; background:var(--white);font-family:var(--font-sans);font-size:.95rem;color:var(--ink)} .woocommerce #review_form #respond textarea{min-height:150px;line-height:1.6;resize:vertical} .woocommerce #review_form #respond input:focus, .woocommerce #review_form #respond textarea:focus{border-color:var(--gold-600);outline:none} .woocommerce #review_form #respond .comment-form-cookies-consent{display:flex;align-items:flex-start;gap:.55rem} .woocommerce #review_form #respond .comment-form-cookies-consent input[type=checkbox]{width:auto;margin:.25rem 0 0;accent-color:var(--emerald-700)} .woocommerce #review_form #respond .comment-form-cookies-consent label{font-weight:400;color:var(--muted);font-size:.85rem} .woocommerce #review_form #respond input#submit, .woocommerce #review_form #respond .form-submit input[type=submit]{ background:var(--emerald-700);color:#fff;border:1px solid var(--emerald-700);border-radius:var(--radius); font-family:var(--font-sans);font-size:.8rem;font-weight:500;letter-spacing:.12em;text-transform:uppercase; padding:.9em 2rem;cursor:pointer;width:auto;transition:all var(--t)} .woocommerce #review_form #respond input#submit:hover{background:var(--emerald-800);transform:translateY(-2px);box-shadow:var(--shadow)} .woocommerce #reviews h2,.woocommerce #reviews h3{font-family:var(--font-display);color:var(--emerald-800)} /* 10e — CART DRAWER -------------------------------------------------------- Adding from the grid slides the cart in rather than navigating away. Falls back to the cart page whenever JS is unavailable (the triggers are links). */ .sira-drawer{position:fixed;inset:0;z-index:200} .sira-drawer[hidden]{display:none} .sira-drawer__scrim{position:absolute;inset:0;background:rgba(5,34,29,.42);opacity:0; transition:opacity .3s var(--ease);backdrop-filter:blur(2px)} .sira-drawer.is-open .sira-drawer__scrim{opacity:1} .sira-drawer__panel{position:absolute;top:0;right:0;bottom:0;width:min(400px,92vw); background:var(--ivory);box-shadow:var(--shadow-lg);display:flex;flex-direction:column; transform:translateX(100%);transition:transform .34s var(--ease)} .sira-drawer.is-open .sira-drawer__panel{transform:none} .sira-drawer__head{display:flex;align-items:center;justify-content:space-between;gap:1rem; padding:1.3rem 1.4rem;border-bottom:1px solid var(--line);flex:none} .sira-drawer__head h2{font-family:var(--font-display);font-size:1.6rem;margin:0;color:var(--emerald-800)} .sira-drawer__close{background:none;border:0;cursor:pointer;color:var(--muted);line-height:0; padding:.4rem;border-radius:50%;transition:color var(--t),background var(--t)} .sira-drawer__close:hover{color:var(--emerald-800);background:var(--sand)} .sira-drawer__body{flex:1;overflow-y:auto;padding:1.2rem 1.4rem 1.6rem;display:flex;flex-direction:column} body.drawer-open{overflow:hidden} /* WooCommerce mini-cart inside the drawer */ .sira-drawer .woocommerce-mini-cart{list-style:none;margin:0;padding:0;display:grid;gap:1rem} /* Woo nests the thumbnail *inside* the product link, with the remove control printed first — so the row is a grid and the link is a grid of its own. */ .sira-drawer .woocommerce-mini-cart-item{position:relative;display:grid; grid-template-columns:minmax(0,1fr) 26px;column-gap:.6rem;align-items:start; padding-bottom:1rem;border-bottom:1px solid var(--line)} .sira-drawer .woocommerce-mini-cart-item:last-child{border-bottom:0;padding-bottom:0} .sira-drawer .woocommerce-mini-cart-item>a.remove{grid-column:2;grid-row:1;position:static; width:26px;height:26px;font-size:1.2rem} .sira-drawer .woocommerce-mini-cart-item>a:not(.remove){ grid-column:1;grid-row:1;display:grid;grid-template-columns:64px minmax(0,1fr); column-gap:.9rem;align-items:start;color:var(--emerald-800);border:0; font-family:var(--font-display);font-size:1.06rem;line-height:1.25} .sira-drawer .woocommerce-mini-cart-item>a:not(.remove):hover{color:var(--gold-700)} .sira-drawer .woocommerce-mini-cart-item>a:not(.remove) img{ width:64px;height:80px;object-fit:cover;border-radius:6px;margin:0} .sira-drawer .woocommerce-mini-cart-item .quantity{grid-column:1;grid-row:2; margin:.35rem 0 0 calc(64px + .9rem);font-size:.86rem;color:var(--muted); font-variant-numeric:tabular-nums} .sira-drawer .woocommerce-mini-cart__empty-message{color:var(--muted);text-align:center;margin:2rem 0} .sira-drawer .woocommerce-mini-cart__total{display:flex;justify-content:space-between;align-items:baseline; gap:1rem;margin:1.4rem 0 0;padding-top:1.1rem;border-top:1px solid var(--line); font-family:var(--font-sans);font-size:1.05rem;color:var(--emerald-800)} .sira-drawer .woocommerce-mini-cart__total strong{font-weight:500;color:var(--muted);font-size:.9rem; letter-spacing:.06em;text-transform:uppercase} .sira-drawer .woocommerce-mini-cart__total .amount{font-weight:600;font-size:1.2rem} .sira-drawer .woocommerce-mini-cart__buttons{display:grid;gap:.6rem;margin:1.2rem 0 0} .sira-drawer .woocommerce-mini-cart__buttons a{display:block;text-align:center;width:100%;margin:0} .sira-drawer .woocommerce-mini-cart__buttons a.checkout{background:var(--gold-600) !important; border-color:var(--gold-600) !important;color:#231c0c !important} .sira-drawer .woocommerce-mini-cart__buttons a.checkout:hover{background:var(--gold-700) !important; border-color:var(--gold-700) !important;color:#fff !important} .sira-drawer a.remove.is-loading,.sira-order.is-loading{opacity:.55;pointer-events:none} .sira-order.is-loading{position:relative} /* 10f — SEARCH PANEL ------------------------------------------------------- Drops from beneath the sticky header rather than covering the page, so you keep your place. Sits below the cart drawer (z-index 200) in the stack. */ .sira-search{position:fixed;inset:0;z-index:150} .sira-search[hidden]{display:none} .sira-search__scrim{position:absolute;inset:0;background:rgba(5,34,29,.38);opacity:0; transition:opacity .26s var(--ease);backdrop-filter:blur(2px)} .sira-search.is-open .sira-search__scrim{opacity:1} .sira-search__panel{position:absolute;left:0;right:0;top:0;background:var(--ivory); border-bottom:1px solid var(--line);box-shadow:var(--shadow); padding:1.4rem 0 1.5rem;transform:translateY(-100%);transition:transform .3s var(--ease)} .sira-search.is-open .sira-search__panel{transform:none} .sira-search__form{display:flex;align-items:center;gap:.7rem;position:relative} .sira-search__ico{position:absolute;left:1rem;display:inline-flex;color:var(--muted);pointer-events:none} .sira-search__form input[type=search]{ flex:1;min-width:0;border:1px solid var(--line);border-radius:var(--radius); padding:.95em 1em .95em 3rem;background:var(--white);color:var(--ink); font-family:var(--font-sans);font-size:1rem;-webkit-appearance:none;appearance:none} .sira-search__form input[type=search]::-webkit-search-cancel-button{-webkit-appearance:none} .sira-search__form input[type=search]:focus{border-color:var(--gold-600);outline:none} .sira-search__form .btn{flex:none} .sira-search__close{flex:none;background:none;border:0;cursor:pointer;color:var(--muted); line-height:0;padding:.5rem;border-radius:50%;transition:color var(--t),background var(--t)} .sira-search__close:hover{color:var(--emerald-800);background:var(--sand)} .sira-search__hints{display:flex;flex-wrap:wrap;align-items:center;gap:.5rem;margin-top:1rem; font-size:.82rem;color:var(--muted)} .sira-search__hints span{letter-spacing:.14em;text-transform:uppercase;font-size:.7rem;margin-right:.2rem} .sira-search__hints a{border:1px solid var(--line);border-radius:30px;padding:.35em .95em; background:var(--white);color:var(--emerald-800);font-size:.8rem;transition:all var(--t)} .sira-search__hints a:hover{border-color:var(--gold-600);color:var(--gold-700)} /* 10f-2 — FLOATING WHATSAPP ------------------------------------------------- Persistent chat CTA, bottom-left (back-to-top owns bottom-right). A circle that expands into a pill on hover/focus. Sits below the search + cart overlays so those cover it when open. */ .sira-wa-float{ position:fixed;left:clamp(1rem,3vw,2rem);bottom:clamp(1rem,3vw,2rem);z-index:130; display:inline-flex;align-items:center;gap:0;height:54px;padding:0;overflow:hidden; background:#25D366;color:#04321a;border-radius:30px;text-decoration:none; box-shadow:0 10px 26px -8px rgba(4,50,26,.5); transition:padding .34s var(--ease),background var(--t),box-shadow var(--t),transform var(--t)} .sira-wa-float__icon{display:grid;place-items:center;width:54px;height:54px;flex:none} .sira-wa-float__icon svg{width:26px;height:26px} .sira-wa-float__label{max-width:0;white-space:nowrap;font-family:var(--font-sans);font-weight:600; font-size:.85rem;letter-spacing:.02em;opacity:0; transition:max-width .34s var(--ease),opacity .28s var(--ease),padding .34s var(--ease)} .sira-wa-float:hover,.sira-wa-float:focus-visible{background:#1eb457;color:#04321a;transform:translateY(-2px)} .sira-wa-float:hover .sira-wa-float__label,.sira-wa-float:focus-visible .sira-wa-float__label{ max-width:180px;opacity:1;padding-right:1.25rem} /* a soft pulsing halo to draw the eye, calmed under reduced-motion */ .sira-wa-float::before{content:"";position:absolute;inset:0;border-radius:inherit; box-shadow:0 0 0 0 rgba(37,211,102,.5);animation:siraWaPulse 2.6s var(--ease) infinite} @keyframes siraWaPulse{0%{box-shadow:0 0 0 0 rgba(37,211,102,.5)}70%{box-shadow:0 0 0 16px rgba(37,211,102,0)}100%{box-shadow:0 0 0 0 rgba(37,211,102,0)}} @media(max-width:560px){ .sira-wa-float{height:50px} .sira-wa-float__icon{width:50px;height:50px} /* keep it icon-only on phones so it never collides with the back-to-top */ .sira-wa-float:hover .sira-wa-float__label,.sira-wa-float:focus-visible .sira-wa-float__label{max-width:0;opacity:0;padding:0} } /* 10g — BACK TO TOP -------------------------------------------------------- */ .sira-top{position:fixed;right:clamp(1rem,3vw,2rem);bottom:clamp(1rem,3vw,2rem);z-index:140; width:46px;height:46px;display:grid;place-items:center;cursor:pointer; /* padding:0 is load-bearing: GeneratePress puts 20px inline-padding on every