/* Theme Name: Furniture Theme URI: https://trinetrix360.com/ Author: trinetrix360 Author URI: https://trinetrix360.com/ Description: A WooCommerce-powered furniture store theme with a full editorial homepage — sale hero, category browsing, spotlight product rows, lookbook, testimonials, FAQ and newsletter — built so every section is editable from wp-admin (Customizer, Products, and dedicated Homepage Content post types) with no code changes required. Version: 2.0.0 Requires at least: 6.0 Tested up to: 6.6 Requires PHP: 7.4 License: GNU General Public License v2 or later License URI: LICENSE Text Domain: furniture Tags: e-commerce, custom-menu, custom-logo, featured-images, translation-ready Furniture WordPress Theme is released under the terms of GNU GPL v2 or later. */ :root{ --paper:#FFFFFF; --paper-2:#F5F4F0; --ink:#15140F; --ink-soft:#6E6B62; --charcoal:#1B1A16; --charcoal-2:#242320; --accent:#A54321; --accent-dark:#7E3218; --olive:#454A34; --olive-dark:#383C2A; --line:rgba(21,20,15,0.12); --line-strong:rgba(21,20,15,0.3); --line-light:rgba(245,244,240,0.18); --font-display:'Fraunces', serif; --font-body:'Archivo', sans-serif; } *{box-sizing:border-box;} body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--font-body);font-size:16px;line-height:1.6;} a{color:inherit;text-decoration:none;} img,svg{display:block;max-width:100%;} .wrap{max-width:1240px;margin:0 auto;padding:0 32px;} @media (max-width:640px){.wrap{padding:0 20px;}} section{padding:96px 0;} @media (max-width:640px){section{padding:60px 0;}} .screen-reader-text{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(1px,1px,1px,1px);white-space:nowrap;} .skip-link{position:absolute;left:-9999px;top:0;background:var(--accent);color:#fff;padding:0.9em 1.5em;z-index:10000;} .skip-link:focus{left:1em;top:1em;} /* flat editorial photo placeholders with faint grayscale grain */ .photo{position:relative;overflow:hidden;background-repeat:no-repeat;background-size:cover;background-position:center;} .photo::after{content:"";position:absolute;inset:0; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' seed='7'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.05'/%3E%3C/svg%3E"); mix-blend-mode:multiply;pointer-events:none;} .photo.tone1,.blog-card-media.tone1,.co-customize-img.tone1{background-image:linear-gradient(155deg,#EDEAE2,#D7D1C2);} .photo.tone2,.blog-card-media.tone2,.co-customize-img.tone2{background-image:linear-gradient(155deg,#DEDAD0,#C3BCAA);} .photo.tone3,.blog-card-media.tone3,.co-customize-img.tone3{background-image:linear-gradient(155deg,#E4E1D8,#CDC7B7);} .photo.tone4,.blog-card-media.tone4,.co-customize-img.tone4{background-image:linear-gradient(155deg,#D3CFC5,#B7AF9C);} .photo.dark{background-image:linear-gradient(155deg,#3A3934,#17160F);} .photo.accent{background-image:linear-gradient(140deg,var(--accent),var(--accent-dark));} /* announcement marquee */ .announce{background:var(--olive);color:var(--paper);overflow:hidden;white-space:nowrap;} .announce-track{display:inline-block;padding:11px 0;font-size:13.5px;font-weight:500;letter-spacing:0.01em;animation:marquee 26s linear infinite;} .announce-track span{padding:0 40px;position:relative;} .announce-track span::after{content:"";position:absolute;right:0;top:50%;transform:translateY(-50%);width:4px;height:4px;border-radius:50%;background:rgba(245,244,240,0.5);} @keyframes marquee{ from{transform:translateX(0);} to{transform:translateX(-50%);} } @media (prefers-reduced-motion: reduce){ .announce-track{animation:none;} } .site-header{position:sticky;top:0;z-index:60;background:var(--paper);border-bottom:1px solid var(--line);} .header-top{display:flex;align-items:center;gap:32px;padding-top:20px;padding-bottom:20px;} .logo{font-family:var(--font-display);font-weight:560;font-size:26px;flex:0 0 auto;} .logo a{color:var(--ink);} .custom-logo-link img{max-height:52px;width:auto;} .search-bar{flex:1;max-width:560px;margin:0 auto;position:relative;} .search-bar input{width:100%;background:var(--paper-2);border:1px solid var(--line);border-radius:24px;padding:12px 46px 12px 20px;font-family:var(--font-body);font-size:14.5px;color:var(--ink);outline:none;} .search-bar input::placeholder{color:var(--ink-soft);} .search-bar input:focus{border-color:var(--line-strong);} .search-bar button{position:absolute;right:6px;top:50%;transform:translateY(-50%);width:32px;height:32px;border-radius:50%;border:none;background:none;display:flex;align-items:center;justify-content:center;cursor:pointer;} .search-bar svg{width:18px;height:18px;color:var(--ink-soft);} .header-actions{display:flex;align-items:center;gap:26px;flex:0 0 auto;} .action-link{display:flex;align-items:center;gap:8px;font-size:14px;color:var(--ink);white-space:nowrap;} .action-link svg{width:20px;height:20px;color:var(--ink);} .cart-btn{position:relative;width:38px;height:38px;border-radius:50%;background:var(--paper-2);display:flex;align-items:center;justify-content:center;} .cart-btn svg{width:18px;height:18px;color:var(--ink);} .cart-count{position:absolute;top:-4px;right:-4px;background:var(--accent);color:#fff;font-size:10px;font-weight:700;min-width:16px;height:16px;border-radius:8px;display:flex;align-items:center;justify-content:center;padding:0 3px;} @media (max-width:900px){ .header-top{flex-wrap:wrap;row-gap:16px;column-gap:8px;justify-content:space-between;} .header-actions{gap:14px;} .action-link span{display:none;} .search-bar{display:block;order:3;flex:0 0 100%;max-width:100%;margin:0;} } @media (max-width:480px){ .custom-logo-link img{max-height:38px;} } /* Hamburger drawer — mobile only, holds just the top-level nav items that have a dropdown (the mega menu). Items without one stay in the visible horizontal strip below since they're already plain tap-to-navigate links there. */ .hamburger-btn{display:none;width:38px;height:38px;border-radius:50%;background:var(--paper-2);align-items:center;justify-content:center;border:none;cursor:pointer;color:var(--ink);flex:0 0 auto;} .hamburger-btn svg{width:20px;height:20px;} @media (max-width:900px){ .hamburger-btn{display:flex;} .navlinks > li.menu-item-has-children{display:none;} } .mobile-menu-backdrop{position:fixed;top:var(--header-h, 121px);left:0;right:0;bottom:0;background:rgba(21,20,15,0.45);z-index:65;opacity:0;pointer-events:none;transition:opacity .3s ease;} .mobile-menu-backdrop.is-open{opacity:1;pointer-events:auto;} .mobile-menu-drawer{position:fixed;top:var(--header-h, 121px);right:0;bottom:0;width:90%;background:var(--paper);z-index:70;overflow-y:auto;padding:8px 20px 32px;box-shadow:-24px 0 40px -22px rgba(21,20,15,0.3);transform:translateX(100%);transition:transform .3s ease;} .mobile-menu-drawer.is-open{transform:translateX(0);} .mobile-menu-list{list-style:none;margin:0;padding:0;} .mobile-menu-item{border-bottom:1px solid var(--line);} .mobile-menu-item details summary{list-style:none;cursor:pointer;padding:16px 2px;font-size:15px;font-weight:600;display:flex;justify-content:space-between;align-items:center;} .mobile-menu-item details summary::-webkit-details-marker{display:none;} .mobile-menu-item details summary::after{content:"+";font-size:20px;font-weight:400;color:var(--accent);} .mobile-menu-item details[open] summary::after{content:"\2013";} .mobile-menu-sublist{padding:0 2px 18px;display:flex;flex-direction:column;gap:2px;} .mobile-menu-col-title{font-size:12.5px;font-weight:700;text-transform:uppercase;letter-spacing:.03em;color:var(--ink-soft);margin:14px 0 4px;} .mobile-menu-col-title:first-child{margin-top:0;} .mobile-menu-sublist a{padding:8px 0;font-size:14.5px;color:var(--ink);} .header-nav{border-top:1px solid var(--line);} .navlinks{display:flex;gap:2px;list-style:none;margin:0;padding:0;overflow-x:auto;} .navlinks > li{position:relative;} /* Center the row. Auto margins (rather than justify-content:center) collapse to 0 once the row overflows, so on narrow screens it still scrolls from the first item instead of clipping it off the left edge. */ .navlinks > li:first-child{margin-left:auto;} .navlinks > li:last-child{margin-right:auto;} .navlinks > li > a{display:flex;align-items:center;gap:5px;padding:13px 16px;font-size:14.5px;font-weight:500;color:var(--ink);white-space:nowrap;} .navlinks > li > a .caret{font-size:10px;color:var(--ink-soft);} .navlinks > li.accent > a{color:var(--accent);} .navlinks > li.accent > a::before{content:"";width:5px;height:5px;border-radius:50%;background:var(--accent);} .navlinks > li:hover > a, .navlinks > li.menu-item-open > a{color:var(--accent);} .navlinks > li > a{border-bottom:2px solid transparent;padding-bottom:11px;} .navlinks > li:hover > a, .navlinks > li.menu-item-open > a{border-bottom-color:var(--accent);} /* Full-width mega panel, edge to edge under the header — like a department-store nav (Urban Ladder-style): bold column headings, plain grey links, thin dividers between columns. Fixed positioning lets it escape the header's own max-width container; --header-h is measured in JS so the panel always sits flush under the header regardless of whether the announcement bar is showing. */ .mega{position:fixed;top:var(--header-h, 121px);left:0;right:0;width:auto;margin:0;background:var(--paper); border:none;border-top:1px solid var(--line);min-width:0; display:none;padding:0; box-shadow:0 24px 40px -22px rgba(21,20,15,0.2);z-index:50;} .mega-inner{max-width:1240px;margin:0 auto;padding:32px;display:flex;align-items:flex-start;gap:40px;} .mega-columns{display:grid;gap:0;flex:1;min-width:0;} .mega.mega-simple{position:absolute;top:100%;left:0;right:auto;width:auto;min-width:220px;border-top:1px solid var(--line);border-left:1px solid var(--line);border-right:1px solid var(--line);border-bottom:1px solid var(--line);box-shadow:0 18px 30px -18px rgba(21,20,15,0.18);} .mega.mega-simple .mega-inner{padding:10px 0;} .mega.mega-simple .mega-columns{grid-template-columns:1fr;} .navlinks > li:hover .mega, .navlinks > li.menu-item-open .mega{display:block;} .mega-col{padding:0 28px;border-right:1px solid var(--line);} .mega-col:first-child{padding-left:0;} .mega-col:last-child{border-right:none;padding-right:0;} .mega-col-title{font-size:14px;font-weight:700;color:var(--ink);margin:0 0 14px;} .mega-col a{display:block;font-size:14px;padding:5px 0;color:var(--ink-soft);} .mega.mega-simple .mega-col a{padding:8px 20px;} .mega-col a:hover{color:var(--accent);} /* Optional promo image tiles, set per top-level menu item in Appearance → Menus, shown to the right of that item's dropdown columns. */ .mega-promos{display:flex;gap:16px;flex:0 0 auto;} .mega-promo-tile{display:block;width:150px;} .mega-promo-img{aspect-ratio:4/5;border-radius:6px;overflow:hidden;background-size:cover;background-position:center;background-color:var(--paper-2);margin-bottom:10px;transition:opacity .2s ease;} .mega-promo-tile:hover .mega-promo-img{opacity:0.85;} .mega-promo-title{font-size:14px;font-weight:600;color:var(--ink);margin:0;} .mega-promo-sub{font-size:12.5px;color:var(--accent);font-weight:600;margin:2px 0 0;} /* Keep the nav as a horizontally scrollable strip at every width instead of collapsing into a hamburger/accordion menu. */ .navlinks{-webkit-overflow-scrolling:touch;scrollbar-width:none;} .navlinks::-webkit-scrollbar{display:none;} /* Tapping a parent item (no hover on touch) opens its dropdown as an overlay, same as desktop — just narrower and anchored to the item (not full width) so it never overflows the viewport on small screens. */ @media (max-width:640px){ .mega{position:absolute;top:100%;left:0;right:auto;width:auto;min-width:0;max-width:88vw;border-top:1px solid var(--line);border-left:1px solid var(--line);border-right:1px solid var(--line);border-bottom:1px solid var(--line);} .mega-inner{flex-direction:column;gap:20px;padding:20px;} .mega-columns{grid-template-columns:repeat(2,1fr);gap:16px;} .mega-col{padding:0;border-right:none;} .mega.mega-simple .mega-columns{grid-template-columns:1fr;max-width:60vw;} .mega-promos{flex-wrap:wrap;} } .btn{font-family:var(--font-body);font-size:15px;font-weight:600;padding:14px 26px;border-radius:2px;border:1px solid transparent;cursor:pointer;display:inline-block;transition:transform .15s,background .15s,border-color .15s;} .btn:hover{transform:translateY(-1px);} .btn-fill{background:var(--ink);color:var(--paper);} .btn-fill:hover{background:var(--charcoal-2);color:var(--paper);} .btn-accent{background:var(--accent);color:var(--paper);} .btn-accent:hover{background:var(--accent-dark);color:var(--paper);} .btn-line{border-color:rgba(245,244,240,0.5);color:var(--paper);} .btn-line:hover{border-color:var(--paper);} .btn-dark{border-color:var(--line-strong);color:var(--ink);} .btn-dark:hover{border-color:var(--ink);} /* full bleed sale hero */ .hero-sale{padding:0;} .hero-slider{position:relative;overflow:hidden;} .hero-slides{display:flex;transition:transform .5s ease;} .hero-slide{flex:0 0 100%;min-width:0;} .sale-banner{position:relative;overflow:hidden;display:flex;flex-direction:column;width:100%;aspect-ratio:var(--hero-ratio,2.8);min-height:320px;max-height:760px;color:inherit;text-decoration:none;cursor:pointer;} @media (max-width:640px){.sale-banner{aspect-ratio:var(--hero-ratio-mobile,var(--hero-ratio,1.1));min-height:260px;max-height:640px;}} .slide-bg{position:absolute;inset:0;background-repeat:no-repeat;background-size:cover;background-position:center;} .slide-bg-mobile{display:none;} @media (max-width:640px){ .slide-bg-desktop{display:none;} .slide-bg-mobile{display:block;} } .sale-scrim{position:absolute;inset:0;background:linear-gradient(90deg, rgba(10,12,8,0) 32%, rgba(10,12,8,0.55) 55%, rgba(6,8,5,0.9) 100%);} .hero-arrow{position:absolute;top:50%;transform:translateY(-50%);width:42px;height:42px;border-radius:50%;background:rgba(248,245,236,0.9);border:none;color:var(--ink);font-size:20px;cursor:pointer;z-index:5;display:flex;align-items:center;justify-content:center;} .hero-arrow:hover{background:#fff;} .hero-arrow-prev{left:18px;} .hero-arrow-next{right:18px;} @media (max-width:640px){.hero-arrow{width:34px;height:34px;font-size:16px;}} .hero-dots{position:absolute;bottom:16px;left:50%;transform:translateX(-50%);display:flex;gap:8px;z-index:5;} .hero-dots .hero-dot{width:8px;height:8px;padding:0;border-radius:50%;border:1px solid rgba(248,245,236,0.8);background:rgba(248,245,236,0.3);cursor:pointer;} .hero-dots .hero-dot.is-active{background:#F8F5EC;} .sale-copy{position:relative;z-index:2;flex:1;display:flex;flex-direction:column;align-items:flex-end;justify-content:center;text-align:right;padding:60px 64px;color:#F8F5EC;} @media (max-width:640px){.sale-copy{padding:40px 28px;}} .sale-lead{font-family:var(--font-display);font-style:italic;font-weight:400;font-size:clamp(20px,2.4vw,28px);margin:0 0 6px;} .sale-title{font-family:var(--font-display);font-weight:560;font-size:clamp(46px,7vw,92px);line-height:0.96;margin:2px 0 8px;text-transform:uppercase;} .sale-off{display:flex;align-items:baseline;gap:10px;justify-content:flex-end;margin-bottom:30px;} .sale-off .upto,.sale-off .off{font-size:13px;letter-spacing:0.06em;text-transform:uppercase;} .sale-off .pct{font-family:var(--font-display);font-weight:650;font-size:clamp(30px,4vw,50px);} .sale-cta{border:1px solid rgba(248,245,236,0.7);color:#F8F5EC;background:none;padding:13px 30px;border-radius:24px;font-size:12.5px;letter-spacing:0.08em;text-transform:uppercase;cursor:pointer;display:inline-block;} .sale-cta:hover{background:rgba(248,245,236,0.12);} .sale-strip{background:#3F6B68;color:#F8F5EC;text-align:center;padding:13px 20px;font-size:13.5px;} .sale-strip b{color:#E7C873;font-weight:600;} .category-banner{padding:24px 0 0;} .banner-grid{display:grid;grid-template-columns:2fr 1fr;gap:14px;} @media (max-width:860px){.banner-grid{grid-template-columns:1fr;}} .banner-main{position:relative;min-height:520px;overflow:hidden;display:flex;align-items:center;} @media (max-width:640px){.banner-main{min-height:420px;}} .banner-scrim{position:absolute;inset:0;background:linear-gradient(90deg, rgba(250,248,244,0.94) 0%, rgba(250,248,244,0.7) 34%, rgba(250,248,244,0) 62%);} .banner-copy{position:relative;z-index:2;padding:0 0 0 48px;max-width:340px;} @media (max-width:640px){.banner-copy{padding-left:24px;max-width:80%;}} .banner-tag{display:flex;align-items:center;gap:10px;font-size:13px;color:var(--ink-soft);margin-bottom:16px;} .banner-tag .dash{width:16px;height:3px;display:inline-block;} .banner-tag .dash.c1{background:var(--accent);} .banner-tag .dash.c2{background:#4C6B3E;} .banner-headline{font-family:var(--font-display);font-style:italic;font-weight:450;font-size:clamp(26px,3.2vw,38px);line-height:1.14;margin:0 0 22px;} .banner-cat{font-size:14px;color:var(--ink-soft);margin:0 0 8px;} .banner-price{display:inline-block;background:var(--ink);color:var(--paper);font-size:15px;font-weight:600;padding:10px 18px;} .banner-tnc{position:absolute;bottom:14px;right:18px;font-size:11px;color:rgba(21,20,15,0.55);z-index:2;} .banner-side{display:grid;grid-template-rows:1fr 1fr;gap:14px;} .banner-tile{position:relative;min-height:253px;overflow:hidden;padding:26px;} @media (max-width:640px){.banner-tile{min-height:220px;}} .tile-copy{position:relative;z-index:2;max-width:78%;} /* With a photo behind it (inline background-image), fade the top-left so the dark tile text stays readable; plain tone tiles are left as they are. */ .banner-tile[style]::before{content:"";position:absolute;inset:0;z-index:1;pointer-events:none; background:linear-gradient(160deg,rgba(250,248,244,0.92) 0%,rgba(250,248,244,0.72) 38%,rgba(250,248,244,0) 70%);} .tile-eyebrow{font-family:var(--font-display);font-weight:560;font-size:19px;margin:0 0 6px;} .tile-sub{font-size:13px;color:var(--ink-soft);margin:0 0 14px;line-height:1.4;} .tile-cat{font-size:12.5px;color:var(--ink-soft);margin:0 0 3px;} .tile-price{font-family:var(--font-display);font-weight:560;font-size:18px;margin:0;} .tile-price-row{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap;} .tile-old{font-size:13px;color:var(--ink-soft);text-decoration:line-through;} .tile-now{background:var(--ink);color:var(--paper);font-size:13.5px;font-weight:600;padding:4px 10px;} .section-head{display:flex;justify-content:space-between;align-items:flex-end;gap:24px;margin-bottom:48px;flex-wrap:wrap;border-bottom:1px solid var(--line);padding-bottom:26px;} h2.section-h{font-family:var(--font-display);font-weight:450;font-size:clamp(26px,3.2vw,38px);margin:0;max-width:18ch;} .section-note{font-size:15px;color:var(--ink-soft);max-width:38ch;margin:0;} .cat-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:24px;} @media (max-width:820px){.cat-grid{grid-template-columns:repeat(3,1fr);}} @media (max-width:640px){ .cat-grid{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;gap:16px;padding-bottom:2px;scrollbar-width:none;-ms-overflow-style:none;} .cat-grid::-webkit-scrollbar{display:none;} .cat-item{flex:0 0 27%;scroll-snap-align:start;} } .cat-item{text-align:center;} .cat-circle{aspect-ratio:1/1;border-radius:50%;margin-bottom:12px;transition:transform .2s;} .cat-item:hover .cat-circle{transform:translateY(-4px);} .cat-label{font-size:14px;font-weight:500;} .about{display:grid;grid-template-columns:0.9fr 1.1fr;gap:64px;align-items:center;} @media (max-width:860px){.about{grid-template-columns:1fr;gap:36px;}} .about-media{aspect-ratio:4/5;} .stats{display:grid;grid-template-columns:repeat(4,1fr);gap:0;margin-top:36px;border-top:1px solid var(--line);} @media (max-width:640px){.stats{grid-template-columns:repeat(2,1fr);}} .stat{padding:24px 20px 0;border-left:1px solid var(--line);} .stat:first-child{border-left:none;} @media (max-width:640px){.stat:nth-child(2n+1){border-left:none;}} .stat-num{font-family:var(--font-display);font-size:32px;font-weight:560;color:var(--ink);} .stat-label{font-size:13px;color:var(--ink-soft);} .collections{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;} @media (max-width:820px){.collections{grid-template-columns:repeat(2,1fr);}} .coll-tile{position:relative;aspect-ratio:3/4;display:flex;align-items:flex-end;color:var(--paper);} .coll-tile::before{content:"";position:absolute;inset:0;background:linear-gradient(0deg,rgba(21,20,15,0.6),rgba(21,20,15,0) 60%);} .coll-tile span{position:relative;z-index:2;padding:22px;font-family:var(--font-display);font-size:19px;font-weight:450;} /* product spotlight row (horizontal scroll) — full-bleed everywhere, including "You may also like" on the single product page. Customer Reviews is the one exception: capped to match .content-area's 1300px column so it lines up with the gallery/summary above it. */ .spotlight-full{width:100%;max-width:none;margin:0;padding:0 48px;} @media (max-width:640px){.spotlight-full{padding:0 20px;}} .single-product #customer-reviews .spotlight-full{max-width:1300px;margin:0 auto;} .spotlight-head{display:flex;justify-content:space-between;align-items:flex-end;gap:24px;margin-bottom:36px;flex-wrap:wrap;} .spotlight-title{font-family:var(--font-display);font-weight:650;font-size:clamp(24px,2.8vw,32px);margin:0 0 10px;} .spotlight-note{font-size:14.5px;color:var(--ink-soft);margin:0;max-width:52ch;} .view-all{font-size:14px;font-weight:600;text-decoration:underline;text-underline-offset:4px;white-space:nowrap;} .spotlight-scroll,.pieces{display:flex;gap:20px;overflow-x:auto;scroll-snap-type:x mandatory;padding-bottom:6px;padding-right:48px;scrollbar-width:none;-ms-overflow-style:none;} @media (max-width:640px){.spotlight-scroll,.pieces{padding-right:20px;}} .spotlight-scroll::-webkit-scrollbar,.pieces::-webkit-scrollbar{display:none;} .spot-card{flex:0 0 260px;scroll-snap-align:start;background:none;} .spot-img{position:relative;aspect-ratio:4/5;overflow:hidden;margin-bottom:14px;border-radius:10px;} .spot-img .photo{position:absolute;inset:0;transition:transform .5s ease;} .spot-card:hover .spot-img .photo{transform:scale(1.04);} .spot-badge{position:absolute;top:10px;left:10px;font-size:11px;font-weight:600;padding:3px 10px;border-radius:40px;color:var(--paper);z-index:2;} .spot-badge.bestseller{background:#4C5941;} .spot-badge.designer{background:#7A2E4E;} .spot-wish{position:absolute;top:10px;right:10px;width:32px;height:32px;border-radius:50%;background:var(--paper);display:flex;align-items:center;justify-content:center;z-index:2;border:none;padding:0;cursor:pointer;transition:transform .15s ease;} .spot-wish:hover{transform:scale(1.08);} .spot-wish svg{width:16px;height:16px;color:var(--ink);} /* Add-to-cart pill, revealed over the image on hover — matches the reference site's hover-to-buy pattern. WooCommerce's own add-to-cart.js binds to these classes automatically (AJAX add + header cart count). */ .spot-actions{position:absolute;left:12px;right:12px;bottom:12px;z-index:3;opacity:0;transform:translateY(6px);pointer-events:none;transition:opacity .2s ease,transform .2s ease;} .spot-card:hover .spot-actions,.spot-img:focus-within .spot-actions{opacity:1;transform:translateY(0);pointer-events:auto;} .spot-actions .button{display:block;width:100%;text-align:center;background:var(--paper);color:var(--ink);font-family:var(--font-body);font-weight:600;font-size:13.5px;padding:11px 16px;border-radius:100px;border:none;box-shadow:0 10px 22px -10px rgba(21,20,15,0.5);cursor:pointer;transition:background-color .2s ease,color .2s ease;} .spot-actions .button:hover{background:var(--ink);color:var(--paper);} .spot-actions .button.loading{opacity:.7;pointer-events:none;position:relative;color:transparent;} .spot-actions .button.loading::after{content:"";position:absolute;top:50%;left:50%;width:16px;height:16px;margin:-8px 0 0 -8px;border-radius:50%;border:2px solid rgba(21,20,15,0.25);border-top-color:var(--ink);animation:spot-spin .6s linear infinite;} @keyframes spot-spin{to{transform:rotate(360deg);}} .spot-actions .added_to_cart{display:table;margin:6px auto 0;text-align:center;font-size:12px;font-weight:600;color:var(--ink);background:var(--paper);padding:4px 12px;border-radius:100px;text-decoration:none;} .spot-actions .added_to_cart:hover{background:var(--paper-2);} .spot-name{font-size:14.5px;font-weight:600;margin:0 0 8px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;} .spot-name a{color:inherit;} .spot-rating{display:flex;align-items:center;gap:6px;font-size:13px;color:var(--ink-soft);margin:0 0 8px;} .spot-rating .stars{color:#C79A3B;letter-spacing:1px;} .spot-price{display:flex;gap:10px;align-items:baseline;font-size:15px;} .spot-price .now{color:var(--accent);font-weight:650;} .spot-price .old{color:var(--ink-soft);text-decoration:line-through;font-size:13.5px;} .spotlight-nav{display:flex;align-items:center;justify-content:flex-end;gap:16px;margin-top:36px;padding-top:24px;border-top:1px solid var(--line);} .row-progress{flex:1;max-width:420px;height:2px;background:var(--line);position:relative;} .row-progress span{position:absolute;left:0;top:0;height:100%;width:0%;background:var(--ink);transition:width .15s linear;} .inspired-foot .spotlight-nav{flex:1;} .spotlight-nav button{width:38px;height:38px;flex:0 0 auto;border-radius:50%;border:1px solid var(--line-strong);background:none;color:var(--ink);cursor:pointer;font-size:16px;transition:background-color .25s ease,border-color .25s ease,color .25s ease,transform .2s ease,box-shadow .25s ease;} .spotlight-nav button:hover{background:var(--ink);border-color:var(--ink);color:#fff;transform:translateY(-2px);box-shadow:0 6px 14px -6px rgba(21,20,15,0.4);} .spotlight-nav button:active{transform:translateY(0) scale(0.92);} /* get inspired by spaces: lookbook slider */ .inspired-scroll{display:flex;gap:10px;overflow-x:auto;scroll-snap-type:x mandatory;padding:0;scrollbar-width:none;-ms-overflow-style:none;} .inspired-scroll::-webkit-scrollbar{display:none;} .inspired-card{position:relative;flex:0 0 45%;aspect-ratio:16/10;scroll-snap-align:center;overflow:hidden;} @media (max-width:900px){.inspired-card{flex:0 0 78%;}} .inspired-card > .photo{position:absolute;inset:0;} .inspired-tag{position:absolute;bottom:20px;right:20px;left:auto;background:var(--paper);border:none;border-radius:100px;height:44px;width:auto;min-width:44px;padding:0 16px;display:flex;flex-direction:row;align-items:center;justify-content:center;font-size:14px;font-weight:600;color:var(--ink);gap:6px;z-index:2;cursor:pointer;box-shadow:0 4px 16px -4px rgba(21,20,15,0.3);transition:transform .2s ease,box-shadow .2s ease;} .inspired-tag:hover{transform:translateY(-2px);box-shadow:0 8px 20px -6px rgba(21,20,15,0.4);} .inspired-tag svg{width:15px;height:15px;flex:0 0 auto;} .shop-look-panel{position:absolute;right:20px;bottom:20px;top:auto;left:auto;width:320px;max-width:82%;max-height:calc(100% - 40px);border-radius:12px;background:var(--paper);box-shadow:0 24px 48px -18px rgba(21,20,15,0.45);display:none;flex-direction:column;overflow:hidden;z-index:4;transform:translateY(8px);opacity:0;transition:transform .25s ease,opacity .25s ease;} .shop-look-panel.open{display:flex;transform:translateY(0);opacity:1;} .shop-look-head{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:14px 16px;border-bottom:1px solid var(--line);flex:0 0 auto;} .shop-look-head p{font-family:var(--font-body);font-weight:700;font-size:16px;margin:0;} .shop-look-head button{background:none;border:none;font-size:18px;color:var(--ink);cursor:pointer;line-height:1;width:22px;height:22px;border-radius:50%;display:flex;align-items:center;justify-content:center;flex:0 0 auto;} .shop-look-head button:hover{background:var(--paper-2);} .shop-look-list{overflow-y:auto;flex:1;} .shop-look-list::-webkit-scrollbar{width:5px;} .shop-look-list::-webkit-scrollbar-thumb{background:var(--line-strong);} .shop-look-item{display:flex;align-items:center;gap:12px;padding:14px 16px;border-bottom:1px solid var(--line);transition:background-color .15s ease;} .shop-look-item:last-child{border-bottom:none;} .shop-look-item:hover{background:var(--paper-2);} .sli-thumb{width:56px;height:56px;flex:0 0 auto;border-radius:6px;background-size:cover;background-position:center;} .sli-info{flex:1;min-width:0;} .sli-name{font-size:14px;font-weight:600;margin:0 0 6px;line-height:1.3;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;} .sli-price{display:flex;gap:8px;font-size:13px;margin:0;} .sli-price .now{color:var(--accent);font-weight:650;} .sli-price .old{color:var(--ink-soft);text-decoration:line-through;} .sli-arrow{width:30px;height:30px;flex:0 0 auto;border-radius:50%;border:1px solid var(--line-strong);display:flex;align-items:center;justify-content:center;color:var(--ink);font-size:15px;transition:background-color .2s ease,color .2s ease,border-color .2s ease;} .shop-look-item:hover .sli-arrow{background:var(--ink);border-color:var(--ink);color:#fff;} .inspired-foot{display:flex;align-items:center;justify-content:space-between;gap:24px;margin-top:28px;} /* why choose us */ .why-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--line);border:1px solid var(--line);} @media (max-width:900px){.why-grid{grid-template-columns:repeat(2,1fr);}} .why-item{background:var(--paper);padding:32px 24px;} .why-mark{width:32px;height:32px;border-radius:50%;border:1px solid var(--ink);margin-bottom:18px;display:flex;align-items:center;justify-content:center;color:var(--ink);} .why-mark svg{width:16px;height:16px;} .why-mark.has-image{width:48px;height:48px;border:none;background-size:cover;background-position:center;} .why-title{font-size:15px;font-weight:600;margin:0 0 8px;} .why-text{font-size:13.5px;color:var(--ink-soft);margin:0;} .trust-icons{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,200px));justify-content:center;gap:32px;} @media (max-width:900px){.trust-icons{grid-template-columns:repeat(2,1fr);justify-content:stretch;}} @media (max-width:520px){.trust-icons{gap:28px 20px;}} .trust-item{text-align:center;} .trust-icon{width:44px;height:44px;margin:0 auto 18px;color:var(--ink);} .trust-icon svg{width:100%;height:100%;} .trust-icon img{width:100%;height:100%;object-fit:contain;} .trust-title{font-size:14.5px;font-weight:600;letter-spacing:0.01em;margin:0 0 10px;} .trust-text{font-size:13.5px;color:var(--ink-soft);margin:0;line-height:1.5;max-width:24ch;margin-inline:auto;} .dark-band{background:var(--charcoal);color:var(--paper);} .dark-band .section-note{color:rgba(245,244,240,0.65);} .dark-band .section-head{border-color:var(--line-light);} .testi-track{position:relative;} .testi-card{display:none;} .testi-card.is-active{display:block;animation:testi-fade-in .3s ease;} @keyframes testi-fade-in{from{opacity:0;}to{opacity:1;}} .testi-avatar{width:56px;height:56px;border-radius:50%;background-size:cover;background-position:center;margin-bottom:20px;} .quote{font-family:var(--font-display);font-style:italic;font-weight:400;font-size:clamp(19px,2.2vw,25px);line-height:1.5;margin:0 0 20px;max-width:56ch;} .quote-attr{font-size:14px;color:rgba(245,244,240,0.65);} .testi-nav{display:flex;gap:14px;margin-top:32px;} .testi-nav button{width:38px;height:38px;border-radius:50%;border:1px solid var(--line-light);background:none;color:var(--paper);cursor:pointer;font-size:16px;} .testi-nav button:hover{border-color:var(--paper);} .map-cta{display:grid;grid-template-columns:1.2fr 1fr;gap:24px;} @media (max-width:860px){.map-cta{grid-template-columns:1fr;}} .map-media{aspect-ratio:16/10;} .cta-stack{display:grid;grid-template-rows:1fr 1fr;gap:24px;} .cta-tile{position:relative;display:flex;align-items:flex-end;color:var(--paper);} .cta-tile::before{content:"";position:absolute;inset:0;background:linear-gradient(0deg,rgba(21,20,15,0.55),rgba(21,20,15,0.05) 60%);} .cta-tile-inner{position:relative;z-index:2;padding:24px;} .cta-tile-inner p{font-family:var(--font-display);font-size:19px;font-weight:450;margin:0 0 12px;} .contact-section{background:var(--paper-2);border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:80px 0;} .contact{display:grid;grid-template-columns:0.8fr 1.2fr;gap:56px;align-items:start;} @media (max-width:860px){.contact{grid-template-columns:1fr;gap:36px;}.contact-section{padding:56px 0;}} .contact-info{position:sticky;top:calc(var(--header-h, 121px) + 24px);} @media (max-width:860px){.contact-info{position:static;}} .contact-details{list-style:none;margin:32px 0 0;padding:26px 0 0;border-top:1px solid var(--line-strong);display:flex;flex-direction:column;gap:18px;} .contact-details li{display:block;} .contact-details li,.contact-details a{display:flex;align-items:center;gap:14px;font-size:15px;color:var(--ink);} .contact-details a:hover .contact-icon{background:var(--accent);color:var(--paper);} .contact-icon{flex:0 0 auto;width:42px;height:42px;border-radius:50%;background:var(--paper);color:var(--accent-dark);display:flex;align-items:center;justify-content:center;transition:background .15s,color .15s;} .contact-icon svg{width:18px;height:18px;} .contact-form-panel{background:var(--paper);border-radius:16px;padding:40px;box-shadow:0 30px 60px -38px rgba(21,20,15,0.25);} @media (max-width:640px){.contact-form-panel{padding:26px;border-radius:12px;}} .field{margin-bottom:18px;} .field label{display:block;font-size:13px;color:var(--ink-soft);margin-bottom:6px;} .field input,.field textarea,.contact input:not([type="submit"]),.contact textarea{width:100%;background:var(--paper-2);border:1px solid var(--line-strong);border-radius:6px;padding:13px 14px;font-family:var(--font-body);font-size:15px;color:var(--ink);outline:none;transition:border-color .15s;} .field input:focus,.field textarea:focus,.contact input:focus:not([type="submit"]),.contact textarea:focus{border-color:var(--accent);} .field textarea{min-height:110px;resize:vertical;} .contact-form-panel .btn{width:100%;border-radius:6px;} .contact .wpcf7-form-control-wrap{display:block;} .contact .wpcf7-not-valid-tip{font-size:12px;color:var(--accent);margin-top:4px;} .contact .wpcf7-response-output{margin-top:16px;padding:12px 14px;border:1px solid var(--line-strong);border-radius:6px;font-size:14px;} .faq-item{border-top:1px solid var(--line);} .faq-item:last-child{border-bottom:1px solid var(--line);} .faq-item summary{list-style:none;cursor:pointer;padding:22px 0;display:flex;justify-content:space-between;align-items:center;font-size:16px;font-weight:600;gap:16px;} .faq-item summary::-webkit-details-marker{display:none;} .faq-item summary::after{content:"+";font-size:22px;font-weight:400;color:var(--accent);} .faq-item[open] summary::after{content:"\2013";} .faq-item .faq-answer{margin:0 0 22px;font-size:14.5px;color:var(--ink-soft);max-width:60ch;} .news{background:var(--ink);color:var(--paper);padding:64px 0;} .news-inner{display:flex;justify-content:space-between;align-items:center;gap:32px;flex-wrap:wrap;} .news h3{font-family:var(--font-display);font-weight:450;font-style:italic;font-size:clamp(22px,2.8vw,30px);margin:0;max-width:18ch;} .news-form{display:flex;gap:0;border-bottom:1px solid rgba(245,244,240,0.5);padding-bottom:10px;min-width:300px;} .news-form input{background:none;border:none;outline:none;color:var(--paper);font-family:var(--font-body);font-size:15px;flex:1;} .news-form input::placeholder{color:rgba(245,244,240,0.6);} .news-form button{background:none;border:none;color:var(--paper);font-weight:600;cursor:pointer;font-family:var(--font-body);font-size:15px;} .news-note{color:rgba(245,244,240,0.75);font-size:13px;margin-top:8px;} footer.site-footer{background:var(--charcoal-2);color:rgba(245,244,240,0.78);padding:60px 0 24px;} .foot-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:36px;padding-bottom:40px;border-bottom:1px solid var(--line-light);} /* Shop/Policies/Visit the workshop are
so they can become an accordion on mobile; on wider screens the toggle is disabled and they just read as a plain heading + list, same as before. */ .foot-col{border:none;} .foot-col summary{list-style:none;cursor:default;pointer-events:none;} .foot-col summary::-webkit-details-marker{display:none;} .foot-col summary::after{content:none;} @media (max-width:760px){ .foot-grid{grid-template-columns:1fr;row-gap:0;} .foot-grid > div:first-child{padding-bottom:24px;border-bottom:1px solid var(--line-light);margin-bottom:4px;} .foot-col{border-top:1px solid var(--line-light);} .foot-col summary{cursor:pointer;pointer-events:auto;display:flex;justify-content:space-between;align-items:center;padding:16px 0;margin:0;} .foot-col summary::after{content:"+";font-size:20px;font-weight:400;color:var(--accent);} .foot-col[open] summary::after{content:"\2013";} .foot-col .foot-links{padding-bottom:18px;} .foot-h{color:var(--paper);} } .foot-logo{display:inline-block;margin:0 0 12px;} .foot-logo-img{display:block;height:40px;width:auto;filter:brightness(0) invert(1);} .foot-logo-text{font-family:var(--font-display);font-size:22px;color:var(--paper);} .foot-tag{font-size:14px;max-width:32ch;margin:0;} .foot-social{list-style:none;display:flex;gap:12px;margin:20px 0 0;padding:0;} .foot-social a{width:36px;height:36px;border-radius:50%;background:rgba(245,244,240,0.08);color:rgba(245,244,240,0.85);display:flex;align-items:center;justify-content:center;transition:background .15s,color .15s;} .foot-social a:hover{background:var(--accent);color:#fff;} .foot-social svg{width:16px;height:16px;} .foot-h{font-size:13px;color:var(--accent);margin:0 0 14px;} .foot-links{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:9px;} .foot-links a{font-size:14px;color:rgba(245,244,240,0.78);} .foot-links a:hover{color:var(--paper);} .foot-bottom{display:flex;justify-content:space-between;padding-top:22px;font-size:13px;color:rgba(245,244,240,0.5);flex-wrap:wrap;gap:12px;} .foot-bottom a{color:rgba(245,244,240,0.7);} .foot-bottom a:hover{color:var(--paper);} /* ---------- Generic page / blog / WooCommerce shop compatibility ---------- */ .content-area{max-width:1300px;margin:0 auto;padding:64px 48px;} .woocommerce-breadcrumb{padding-bottom:10px;} @media (max-width:640px){.content-area{padding:40px 20px;}} /* On the single product page the last section is always "You may also like" (#pieces) or Customer Reviews, both of which already manage their own bottom spacing/border — the generic 64px page padding after them just reads as a dead gap before the footer. */ .single-product .content-area{padding-bottom:0;} article.post,article.page{max-width:800px;margin:0 auto 32px;} .entry-title{font-family:var(--font-display);font-weight:450;} .entry-meta{color:var(--ink-soft);font-size:0.9rem;margin-bottom:1em;} .entry-thumbnail{margin-bottom:24px;} .entry-thumbnail img{border-radius:4px;} .pagination{display:flex;gap:10px;justify-content:center;margin:32px 0;flex-wrap:wrap;} .pagination a,.pagination span{padding:8px 14px;border:1px solid var(--line);border-radius:4px;color:var(--ink);} .pagination .current{background:var(--ink);color:#fff;border-color:var(--ink);} .widget{margin-bottom:28px;} .widget-title{font-family:var(--font-display);font-size:1.1rem;border-bottom:2px solid var(--accent);padding-bottom:0.4em;margin-bottom:0.75em;} .woocommerce span.price{font-family:var(--font-body);color:var(--accent);font-weight:650;} .woocommerce span.price del{color:var(--ink-soft);opacity:1;text-decoration:line-through;margin-right:8px;} .woocommerce a.button,.woocommerce button.button,.woocommerce #respond input#submit,.woocommerce input.button{font-family:var(--font-body);font-weight:600;background:var(--ink);color:var(--paper);border-radius:2px;padding:12px 22px;border:none;} .woocommerce a.button:hover,.woocommerce button.button:hover{background:var(--charcoal-2);color:var(--paper);} /* .woocommerce a.button above (element+2 classes) is more specific than .spot-actions .button (2 classes), so it wins the cascade wherever a .spot-card sits inside a .woocommerce-wrapped page (e.g. "You may also like" here) even though it doesn't on the homepage — reassert the card button style with matching specificity so it looks identical everywhere. */ .woocommerce .spot-actions .button{display:block;width:100%;text-align:center;background:var(--paper);color:var(--ink);font-family:var(--font-body);font-weight:600;font-size:13.5px;padding:11px 16px;border-radius:100px;border:none;box-shadow:0 10px 22px -10px rgba(21,20,15,0.5);} .woocommerce .spot-actions .button:hover{background:var(--ink);color:var(--paper);} .woocommerce div.product p.price,.woocommerce div.product span.price{font-size:22px;} .woocommerce nav.woocommerce-pagination ul{border:none;display:flex;gap:8px;} .woocommerce nav.woocommerce-pagination ul li{border:none;} .woocommerce nav.woocommerce-pagination ul li a,.woocommerce nav.woocommerce-pagination ul li span{border:1px solid var(--line);padding:8px 14px;border-radius:4px;} .woocommerce-message,.woocommerce-info,.woocommerce-error{list-style:none;margin:0 0 24px;padding:14px 18px;border:1px solid var(--line-strong);border-top:3px solid var(--accent);border-radius:6px;background:var(--paper-2);font-size:14px;color:var(--ink);} .woocommerce-message li,.woocommerce-info li,.woocommerce-error li{margin:0;} /* ---------- Single product page ---------- */ .woocommerce div.product{position:relative;display:grid;grid-template-columns:1.1fr 1fr;gap:56px;align-items:flex-start;} .woocommerce div.product > .woocommerce-product-gallery, .woocommerce div.product > .summary{min-width:0;} .woocommerce-product-gallery{width:100%;} /* woocommerce_after_single_product_summary (upsells, related, reviews) also renders as direct children of .product — without this they'd get auto-placed into the same two columns as the gallery/summary instead of forming their own full-width rows below. (.product-accordion lives inside .summary now, not here — see furniture_single_product_specs_accordion.) */ .woocommerce div.product > section, .woocommerce div.product > .upsells{grid-column:1 / -1;min-width:0;} @media (max-width:860px){.woocommerce div.product{grid-template-columns:1fr;gap:32px;}} /* "You may also like" breaks out of .content-area's 1300px cap to run edge-to-edge, matching the homepage's own full-bleed product rows. 100vw is measured including the scrollbar, so on any page tall enough to show one, the break-out overshoots the real viewport by the scrollbar's width and creates a spurious horizontal scrollbar — hence overflow-x:hidden on the body, scoped to this template only. */ body.single-product{overflow-x:hidden;} .single-product #pieces{width:100vw;margin-left:calc(50% - 50vw);margin-right:calc(50% - 50vw);} .product-badge-overlay{position:absolute;top:20px;left:20px;z-index:5;} .product-badge-overlay .spot-badge{position:static;} .product-wish-overlay{display:none;} @media (max-width:640px){ .product-wish-overlay{display:flex;align-items:center;justify-content:center;position:absolute;top:20px;right:20px;z-index:5;width:38px;height:38px;border-radius:50%;background:var(--paper);box-shadow:0 4px 10px -4px rgba(21,20,15,0.4);} .product-wish-overlay svg{width:18px;height:18px;color:var(--ink);} .product-wish-overlay .spot-wish-link{width:100%;height:100%;display:flex;align-items:center;justify-content:center;color:var(--ink);} } /* Gallery: thumbnail row below the main image */ .woocommerce-product-gallery{display:flex;flex-direction:column;gap:14px;} /* WooCommerce's built-in zoom-trigger icon relies entirely on core WC CSS (disabled sitewide via woocommerce_enqueue_styles), so it renders unstyled/unpositioned above the image instead of as a small corner icon — remove it rather than re-style a feature not otherwise used. */ .woocommerce-product-gallery__trigger{display:none;} .woocommerce-product-gallery .woocommerce-product-gallery__wrapper{flex:1;min-width:0;margin:0;} .woocommerce-product-gallery .flex-control-thumbs{display:flex;flex-direction:row;gap:10px;list-style:none;margin:0;padding:0;width:auto;overflow-x:auto;} .woocommerce-product-gallery .flex-control-thumbs li{list-style:none;} .woocommerce-product-gallery .flex-control-thumbs img{width:76px;height:76px;flex:0 0 auto;border-radius:6px;border:1px solid var(--line);cursor:pointer;object-fit:cover;opacity:0.75;} .woocommerce-product-gallery .flex-control-thumbs img.flex-active, .woocommerce-product-gallery .flex-control-thumbs img:hover{opacity:1;border-color:var(--ink);} .woocommerce-product-gallery__image{border-radius:10px;overflow:hidden;background:var(--paper-2);} /* Browsers derive an implicit aspect-ratio from an 's width/height HTML attributes (here 600x750, WooCommerce's default "single" image size) to prevent layout shift, and that implicit ratio otherwise beats a plain author aspect-ratio declaration — !important is required to force our square ratio instead. flexslider's "smoothHeight" option then reads that same wrong natural ratio in JS and inline-sets a matching pixel height on .flex-viewport on load/slide-change, so that also needs !important to override. */ .woocommerce-product-gallery__image img{aspect-ratio:1/1!important;height:auto!important;object-fit:cover;width:100%;} .woocommerce-product-gallery .flex-viewport{height:auto!important;} @media (max-width:640px){ .woocommerce-product-gallery .flex-control-thumbs img{width:56px;height:56px;} } /* Summary column */ .summary.entry-summary{max-width:none;} .product-top-row{display:flex;align-items:center;justify-content:space-between;gap:16px;} .product-top-rating{display:flex;align-items:center;gap:10px;font-size:13px;color:var(--ink-soft);} .star-rating-simple{color:#C79A3B;letter-spacing:2px;font-size:14px;} .product-top-rating a{color:var(--ink-soft);text-decoration:underline;} .product-top-rating a:hover{color:var(--ink);} .product-share-btn{width:36px;height:36px;flex:0 0 auto;border-radius:50%;border:1px solid var(--line-strong);background:var(--paper);display:inline-flex;align-items:center;justify-content:center;cursor:pointer;color:var(--ink);position:relative;} .product-share-btn:hover{border-color:var(--ink);} .product-share-btn svg{width:17px;height:17px;} .product-share-btn.copied::after{content:"Link copied";position:absolute;top:calc(100% + 8px);right:0;background:var(--ink);color:var(--paper);font-size:11.5px;padding:5px 10px;border-radius:4px;white-space:nowrap;} .summary .product_title{font-family:var(--font-display);font-size:clamp(24px,2.6vw,32px);font-weight:450;margin:10px 0 12px;} .summary .star-rating{color:#C79A3B;} .summary p.price{font-size:15px;display:flex;align-items:baseline;gap:10px;margin:0 0 4px;} .summary p.price ins{text-decoration:none;} .summary p.price .woocommerce-Price-amount{font-family:var(--font-display);} .summary p.price ins .woocommerce-Price-amount{font-size:28px;font-weight:650;color:var(--accent);} .summary p.price del .woocommerce-Price-amount{font-size:16px;color:var(--ink-soft);font-weight:400;} .summary .woocommerce-variation-price .price{font-size:15px;} .product-tax-note{font-size:12.5px;color:var(--ink-soft);margin:0 0 18px;} .summary form.cart{margin-top:20px;} .summary .variations{margin-bottom:18px;width:100%;border-collapse:collapse;} .summary .variations td,.summary .variations th{padding:0;border:none;display:block;} .summary .variations tr{display:block;margin-bottom:14px;} .summary .variations th.label{font-size:13px;color:var(--ink-soft);margin-bottom:8px;font-weight:600;} .variation-swatches{display:flex;flex-wrap:wrap;gap:10px;} .variation-swatches button{background:var(--paper);border:1px solid var(--line-strong);border-radius:100px;padding:9px 20px;font-size:14px;font-weight:600;color:var(--ink);cursor:pointer;transition:background-color .15s ease,color .15s ease,border-color .15s ease;} .variation-swatches button:hover{border-color:var(--ink);} .variation-swatches button.selected{background:var(--ink);border-color:var(--ink);color:var(--paper);} .variation-swatches button:disabled{opacity:0.35;cursor:not-allowed;text-decoration:line-through;} .summary table.variations{display:none;} .summary .reset_variations{display:inline-block;margin-top:8px;font-size:12.5px;color:var(--ink-soft);text-decoration:underline;} .summary .quantity{display:inline-flex;align-items:center;border:1px solid var(--line-strong);border-radius:2px;margin-right:12px;vertical-align:middle;} .summary .quantity .qty-btn{width:38px;height:46px;border:none;background:none;font-size:16px;cursor:pointer;color:var(--ink);} .summary .quantity .qty-btn:hover{background:var(--paper-2);} .summary .quantity input.qty{width:44px;height:46px;border:none;border-left:1px solid var(--line);border-right:1px solid var(--line);text-align:center;font-size:15px;-moz-appearance:textfield;} .summary .quantity input.qty::-webkit-inner-spin-button,.summary .quantity input.qty::-webkit-outer-spin-button{-webkit-appearance:none;margin:0;} .summary .cart{display:flex;flex-wrap:wrap;align-items:center;gap:0;} .summary .single_add_to_cart_button{flex:1;min-width:200px;background:var(--olive);color:var(--paper);font-weight:600;font-size:15px;padding:14px 28px;border-radius:2px;text-align:center;} .summary .single_add_to_cart_button:hover{background:var(--olive-dark);color:var(--paper);} .summary .single_add_to_cart_button.disabled{background:var(--line-strong);cursor:not-allowed;} .product-wish{margin-left:12px;width:46px;height:46px;border-radius:50%;background:var(--paper-2);display:inline-flex;align-items:center;justify-content:center;flex:0 0 auto;} .product-wish .spot-wish-link{width:20px;height:20px;color:var(--ink);} .product-wish svg{width:20px;height:20px;} .product-bulk-help{display:inline-flex;align-items:center;gap:8px;margin-top:14px;font-size:13.5px;font-weight:600;color:var(--ink);text-decoration:underline;width:100%;} .product-bulk-help svg{width:16px;height:16px;flex:0 0 auto;} .product-trust{display:flex;flex-wrap:wrap;gap:24px;margin-top:28px;padding-top:24px;border-top:1px solid var(--line);} .product-trust-item{display:flex;align-items:center;gap:10px;font-size:13px;color:var(--ink-soft);} .product-trust-icon{width:26px;height:26px;flex:0 0 auto;color:var(--ink);} .product-trust-icon svg{width:100%;height:100%;} /* Accordion — returns / description / specification / warranty / quality — sits inside the summary column right under the trust row. */ .product-accordion{margin-top:8px;} .product-accordion-item{border-top:1px solid var(--line);} .product-accordion-item:last-child{border-bottom:1px solid var(--line);} .product-accordion-item summary{list-style:none;cursor:pointer;padding:20px 0;display:flex;justify-content:space-between;align-items:center;font-size:16px;font-weight:600;gap:16px;} .product-accordion-item summary::-webkit-details-marker{display:none;} .product-accordion-item summary::after{content:"+";font-size:22px;font-weight:400;color:var(--accent);flex:0 0 auto;} .product-accordion-item[open] summary::after{content:"\2013";} .product-accordion-content{padding:0 0 24px;color:var(--ink-soft);font-size:14.5px;line-height:1.7;} .product-accordion-content table.shop_attributes{width:100%;border-collapse:collapse;} .product-accordion-content table.shop_attributes th{text-align:left;padding:10px 16px 10px 0;width:38%;color:var(--ink);font-weight:600;border-bottom:1px solid var(--line);} .product-accordion-content table.shop_attributes td{padding:10px 0;border-bottom:1px solid var(--line);} /* Standalone "Customer Reviews" section (woocommerce/single-product-reviews.php), outside the .product grid — see furniture_single_product_reviews_section() */ .product-reviews-wrap{padding:64px 0;border-top:1px solid var(--line);} .product-reviews-head{text-align:center;margin-bottom:36px;} .product-reviews-head .section-heading{font-family:var(--font-display);font-size:clamp(24px,2.6vw,32px);font-weight:450;margin:0 0 14px;} .product-reviews-summary{display:flex;align-items:center;justify-content:center;gap:14px;flex-wrap:wrap;} .product-reviews-summary .star-rating-simple{font-size:16px;} .product-reviews-count{font-size:13.5px;color:var(--ink-soft);} .btn-write-review{background:var(--ink);color:var(--paper);font-weight:600;font-size:13.5px;padding:11px 22px;border-radius:100px;cursor:pointer;} .btn-write-review:hover{background:var(--olive);} #reviews #comments{max-width:760px;margin:0 auto;} #reviews .woocommerce-noreviews{text-align:center;color:var(--ink-soft);font-size:14px;} #reviews .commentlist{list-style:none;margin:0;padding:0;} #reviews .commentlist li{padding:22px 0;border-top:1px solid var(--line);} #reviews .commentlist .comment_container{display:flex;gap:14px;} #reviews .commentlist img.avatar{width:40px;height:40px;border-radius:50%;flex:0 0 auto;} #reviews .commentlist .comment-text{flex:1;min-width:0;} #reviews .commentlist .star-rating{color:#C79A3B;font-size:13px;margin-bottom:6px;} #reviews .commentlist .meta{font-size:12.5px;color:var(--ink-soft);margin-bottom:6px;} #reviews .commentlist .description p{margin:0;font-size:14px;line-height:1.7;color:var(--ink);} #review_form_wrapper{max-width:560px;margin:36px auto 0;} #review_form_wrapper.review-form-collapsed{display:none;} #review_form_wrapper #reply-title{font-family:var(--font-display);font-size:19px;font-weight:450;display:block;margin-bottom:16px;} #review_form_wrapper .comment-form-rating, #review_form_wrapper .comment-form-comment, #review_form_wrapper .comment-form-author, #review_form_wrapper .comment-form-email{margin-bottom:14px;} #review_form_wrapper label{display:block;font-size:13px;font-weight:600;margin-bottom:6px;} #review_form_wrapper select, #review_form_wrapper input[type="text"], #review_form_wrapper input[type="email"], #review_form_wrapper textarea{width:100%;border:1px solid var(--line-strong);border-radius:4px;padding:10px 12px;font-size:14px;font-family:inherit;background:var(--paper);} #review_form_wrapper .required{color:var(--accent);} /* WooCommerce's single-product.js swaps #rating for a CSS-only star widget (p.stars) that depends on the default frontend styles this theme disables — keep the plain, already-styled