:root{--ink:#1b1b1d;--muted:#8b8e90;--line:#e6e7e8;--soft:#f5f6f6;--accent:#35df94;--danger:#ff6d6b}*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;color:var(--ink);background:#fff;font-family:"Inter",Arial,sans-serif;font-size:16px;line-height:1.5}button,input,select{font:inherit;color:inherit}a{color:inherit;text-decoration:none}button{background:none;border:0;cursor:pointer}.site-header{height:118px;padding:0 4.3vw;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;position:relative;z-index:20;background:#fff}.main-nav{display:flex;gap:2.45rem}.main-nav a{font-size:16px}.signin{font-size:14px}.brand{font-weight:500;font-size:26px;letter-spacing:8px;font-family:"Josefin Sans",Arial,sans-serif}.header-actions{justify-self:end;display:flex;align-items:center;gap:19px}.icon-btn,.icon-with-count{display:flex;align-items:center;gap:7px;padding:0}.icon-btn svg,.icon-with-count svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:2}.icon-with-count span{width:19px;height:19px;border-radius:50%;background:var(--ink);color:#fff;font:11px/19px Arial;text-align:center}.mobile-menu{display:none;padding:0;flex-direction:column;justify-content:center;gap:6px;width:26px;height:18px}.hamburger-bar{display:block;width:26px;height:3px;background:var(--ink);border-radius:1.5px}.hero{height:640px;margin:0 .75vw;position:relative;overflow:hidden;background:#ddd;touch-action:pan-y;cursor:grab;user-select:none}.hero-slide{position:absolute;inset:0;opacity:0;pointer-events:none;transition:opacity .6s ease}.hero-slide.active{opacity:1;pointer-events:auto;z-index:1}.hero-slide img{width:100%;height:100%;object-fit:cover}.hero-copy{position:absolute;left:18.2%;top:50%;transform:translateY(-39%);max-width:330px}.hero-copy small{font-size:20px;font-weight:500}.hero-copy h1{font-size:60px;line-height:1.03;font-weight:400;letter-spacing:-2px;margin:28px 0 31px}.outline-btn{border:1px solid var(--ink);padding:13px 30px;text-transform:uppercase;font-weight:500;font-size:13px;min-width:180px}.hero-dots{position:absolute;right:18.5%;bottom:40px;display:flex;gap:25px;z-index:5}.hero-dots .hero-dot{width:6px;height:6px;background:#161619;border-radius:50%;display:block;padding:0;border:0;cursor:pointer;position:relative;transform:rotate(-30deg)}.hero-dots .hero-dot:before{content:"";position:absolute;top:-9px;bottom:-9px;right:-9px;left:-9px;border-radius:50%;border:2px solid #161619;clip-path:polygon(50% 0,100% 0,100% 100%,0 100%,50% 50%);transition:opacity .4s;opacity:0}.hero-dots .hero-dot.active{transform:rotate(0)}.hero-dots .hero-dot.active:before{opacity:1}.catalog{max-width:1280px;margin:auto;padding:88px clamp(16px,12.7px + 0.88vw,24px) 120px}.catalog-toolbar{display:flex;justify-content:space-between;align-items:center;margin-bottom:55px}.tabs{display:flex;gap:47px}.tabs button{color:#8b8d90;font-size:16px;font-weight:500;padding-bottom:7px}.tabs button.active{color:var(--ink);border-bottom:1px solid var(--ink)}.filter{display:flex;gap:26px;align-items:center}.filter span{font-size:12px}.filter button{font-weight:600;font-size:16px;border-left:1px solid var(--line);padding-left:28px}.product-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:40px}.product-card{min-width:0;position:relative;padding:12px 12px 20px;margin:-12px -12px -20px;transition:box-shadow .4s,background-color .3s}.product-card:hover{background:#fff;box-shadow:0 8px 32px rgba(0,0,0,.1);z-index:2}.product-image{height:430px;display:flex;align-items:center;justify-content:center;overflow:hidden;background:#fff;position:relative}.product-image img{width:100%;height:100%;object-fit:cover}.product-card h3{font-size:17px;font-weight:400;margin:14px 0 6px;padding:0 20px}.price{font-size:14px;font-weight:500;padding:0 20px}.price del{color:#999;margin-left:8px}.badge{position:absolute;right:9%;top:2%;z-index:2;width:56px;height:56px;border-radius:50%;display:grid;place-items:center;color:#fff;font-size:12px}.badge.sale{background:var(--accent)}.badge.hot{background:var(--danger)}.badge.new{background:#ffb14b}.product-card-summary{position:relative;transition:transform .4s}.product-card:hover .product-card-summary{transform:translateY(-40px)}.card-actions{position:absolute;left:20px;right:20px;top:100%;margin-top:6px;height:40px;opacity:0;transition:opacity .4s;display:flex;justify-content:space-between;align-items:center}.product-card:hover .card-actions{opacity:1}.card-actions button{font-size:13px;font-weight:600;text-transform:uppercase}.mini-icons{display:flex;gap:10px}.mini-icons a,.mini-icons button{width:22px;height:22px;display:inline-flex;align-items:center;justify-content:center;border:0;background:none;padding:0;cursor:pointer;color:#1b1b1d}.mini-icons svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.5}.newsletter{padding:75px 20px 70px;text-align:center;border-top:1px solid var(--line)}.newsletter h2{font-size:clamp(26px,20px + 1.55vw,40px);font-weight:400;margin:0 0 13px}.newsletter p{font-size:16px;color:var(--ink)}.newsletter form{display:flex;max-width:570px;margin:30px auto 0;border-bottom:2px solid #e3e7e8;transition:.2s}.newsletter form:focus-within{border-bottom-color:var(--ink)}.newsletter input{border:0;outline:0;flex:1;padding:12px 0;font-size:16px}.newsletter button{font-size:16px;font-weight:500}footer{min-height:95px;border-top:1px solid var(--line);display:grid;grid-template-columns:1fr auto 1fr;align-items:center;padding:0 11vw;font-size:14px;color:#777}footer nav{display:flex;gap:28px}.socials{justify-self:end;display:flex;align-items:center;gap:16px}.socials a{display:flex;color:#222}.socials svg{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}.product-page{max-width:1280px;margin:auto;padding:40px clamp(16px,12.7px + 0.88vw,24px) 0}.product-main{display:grid;grid-template-columns:54% 46%;gap:7vw;align-items:start}.gallery{display:grid;grid-template-columns:110px 1fr;gap:40px;align-items:center}.thumbs{display:flex;flex-direction:column;gap:25px}.thumb{width:92px;height:92px;object-fit:cover;padding:10px;border:1px solid transparent}.thumb.active{border-color:var(--ink)}.main-product-image{width:100%;height:560px;object-fit:contain}.product-info{max-width:520px}.crumbs{color:#96999b;font-size:12px;margin-bottom:85px}.product-info h1{font-size:32px;font-weight:400;margin:0 0 8px}.desc{max-width:500px;font-size:14px}.rating{color:#ffa62f;font-size:17px;margin:20px 0 25px}.rating span{color:#929497;font-size:12px;margin-left:14px}.detail-price{font-size:30px}.detail-price del{font-size:17px;color:#999;margin-left:13px}.buy-row{display:flex;gap:20px;margin:37px 0}.qty{border:1px solid #d8d9da;display:flex;align-items:center;justify-content:space-around;width:160px;height:60px}.qty-minus,.qty-plus{flex:none;width:44px;font-size:16px}.qty-input{flex:1;min-width:0;width:auto;text-align:center;border:0;background:none;outline:0;font-size:16px;-moz-appearance:textfield}.qty-input::-webkit-inner-spin-button,.qty-input::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}.add-btn{background:var(--ink);color:#fff;padding:0 68px;height:60px;display:inline-flex;align-items:center;justify-content:center;text-transform:uppercase;font-size:14px}.checkout-btn{background:var(--ink);color:#fff;height:60px;padding:0 40px;display:inline-flex;align-items:center;justify-content:center;text-transform:uppercase;font-size:14px}.product-links{display:flex;justify-content:space-between;font-size:13px;font-weight:600;margin:35px 0 48px}.product-info .meta{font-size:11px;font-weight:500;color:#96999b;display:grid;grid-template-columns:80px 1fr;row-gap:7px;border-top:1px solid var(--line);padding:25px 0 20px}.product-info .meta b{color:#444}.product-details{margin-top:60px;border-top:1px solid var(--line);padding:50px 0 70px;display:grid;grid-template-columns:310px 1fr;gap:35px;color:#858789}.product-details>div{border-left:1px solid var(--line);padding-left:35px}.product-details nav button{font-size:20px;font-weight:500}.product-details nav button.active{color:var(--ink)}.product-details [data-tab-panel]{font-size:18px;line-height:30px}.product-details [data-tab-panel="additional"] h2{display:none}.product-details table.woocommerce-product-attributes{width:100%;border-collapse:collapse;font-size:14px}.product-details table.woocommerce-product-attributes th{text-align:left;padding:0;font-weight:600;color:var(--ink);width:38%}.product-details table.woocommerce-product-attributes td{text-align:left;padding:0;font-weight:400;color:#838889}.product-details nav{display:flex;flex-direction:column;align-items:flex-start}.product-details button{padding:8px 0}.product-details button.active{color:var(--ink);border-bottom:1px solid}.related{padding:15px 0 100px}.related h2{font-size:clamp(18px,1.6vw,22px);font-weight:500;letter-spacing:.4px;text-transform:uppercase;margin-bottom:50px}.cart-drawer{position:fixed;z-index:1500;right:0;top:0;width:min(485px,100%);height:100vh;background:#fff;padding:34px 30px;transform:translateX(105%);transition:.32s ease;display:flex;flex-direction:column}.cart-drawer.open{transform:translateX(0)}.mobile-nav-drawer{position:fixed;z-index:1500;left:0;top:0;width:min(320px,80%);height:100vh;background:#fff;padding:34px 30px;transform:translateX(-105%);transition:.32s ease;display:flex;flex-direction:column}.mobile-nav-drawer.open{transform:translateX(0)}.mobile-nav-links{display:flex;flex-direction:column;gap:24px;margin-top:34px}.mobile-nav-links a{font-size:18px}.mobile-nav-links .mobile-nav-signin{margin-top:10px;padding-top:24px;border-top:1px solid var(--line);color:#888;font-size:14px}.scrim{position:fixed;inset:0;background:rgba(0,0,0,.18);z-index:1450;opacity:0;pointer-events:none;transition:.25s}.scrim.open{opacity:1;pointer-events:auto}.drawer-head{display:flex;justify-content:space-between;border-bottom:1px solid var(--line);padding-bottom:17px}.drawer-head h2{font-size:18px;font-weight:500;margin:0}.drawer-head h2 span{font-size:11px;background:#222;color:#fff;padding:3px 6px;border-radius:50%}.drawer-head button{text-transform:uppercase;font-size:11px}.drawer-item{display:grid;grid-template-columns:85px 1fr auto;gap:18px;margin:25px 0}.drawer-item-row{display:flex;justify-content:space-between;align-items:center;margin-top:8px}.drawer-qty{display:flex;align-items:center;gap:8px;font-size:14px;color:#888}.drawer-qty select{border:1px solid var(--line);padding:4px 8px;font-size:12px;border-radius:4px;background:#fff}.drawer-item-price{font-size:14px;font-weight:500}.drawer-remove{align-self:start;width:18px;height:18px;padding:0;color:#a2a5a6}.drawer-remove svg{width:18px;height:18px;fill:currentColor}.drawer-item img{width:85px;height:90px;object-fit:contain}.drawer-item h3{font-size:17px;font-weight:400;line-height:1.45;margin:0}.drawer-item p{font-size:12px}.drawer-empty{text-align:center;margin:auto;color:#888}.drawer-summary{margin-top:auto}.drawer-total{display:flex;justify-content:space-between;border-top:1px solid var(--line);padding:18px 0;font-size:18px}.drawer-actions{display:grid;gap:8px}.drawer-actions button{padding:13px;text-transform:uppercase;font-size:14px;font-weight:600;border:1px solid #222;border-radius:999px}.drawer-actions button:last-child{background:var(--ink);color:#fff}.drawer-actions a{display:block;text-align:center;padding:13px;text-transform:uppercase;font-size:14px;font-weight:600;border:1px solid #222;border-radius:999px}.drawer-actions a:last-child{background:var(--ink);color:#fff}.page-shell{max-width:1280px;margin:auto;padding:40px clamp(16px,12.7px + 0.88vw,24px) 0}.page-title{text-align:center;font-weight:400;font-size:clamp(36px,18px + 4.9vw,80px);margin:10px 0 45px}.cart-table{width:100%;border-collapse:collapse;table-layout:fixed}.cart-table th:nth-child(1),.cart-table td:nth-child(1){width:42%}.cart-table th:nth-child(2),.cart-table td:nth-child(2){width:14%}.cart-table th:nth-child(3),.cart-table td:nth-child(3){width:26%}.cart-table th:nth-child(4),.cart-table td:nth-child(4){width:14%}.cart-table th:nth-child(5),.cart-table td:nth-child(5){width:4%}.cart-table th{text-align:left;font-size:11px;font-weight:600;padding:0 20px 15px 0;border-bottom:1px solid var(--line)}.cart-table th:last-child,.cart-table td:last-child{padding-right:0}.cart-table td{padding:20px 20px 20px 0;border-bottom:1px solid var(--line);font-size:18px}.cart-table td b{font-weight:500}.cart-product{display:flex;align-items:center;gap:35px;min-width:0}.cart-product img{width:130px;height:176px;object-fit:cover;flex-shrink:0}.coupon-row{display:flex;justify-content:space-between;margin:25px 0 45px}.coupon{display:flex;width:48%;border-bottom:1px solid var(--line)}.coupon input{border:0;outline:0;flex:1}.under-btn{border-bottom:3px solid #222;padding:0 0 4px;font-weight:600;font-size:12px}.cart-totals{border:1px solid var(--ink);padding:30px 40px 40px;margin-bottom:80px}.total-line{display:grid;grid-template-columns:230px 150px 1fr;padding:24px 0;border-bottom:1px solid var(--line)}.total-line:last-child{border:0}.shipping-options{display:flex;gap:30px;color:#888}.shipping-options b{color:#111}.total-bottom{display:grid;grid-template-columns:1fr auto;column-gap:40px;row-gap:14px;align-items:end;margin-top:22px}.total-bottom>div:first-child{grid-column:1;grid-row:1/3;align-self:end}.total-bottom>div:nth-child(2){grid-column:2;grid-row:1;display:flex;justify-content:space-between;gap:24px;min-width:280px}.total-bottom>.checkout-btn{grid-column:2;grid-row:2;text-align:center}.checkout{max-width:1280px}.checkout h1{font-size:80px}.checkout-note{background:#eef1f1;padding:11px;text-align:center;font-size:12px;margin-bottom:28px}.woocommerce-form-coupon-toggle{display:none}.checkout-grid{display:block}.form-section h2,.order-box h2{font-weight:400;font-size:clamp(26px,20px + 1.55vw,40px);margin:0 0 23px}.billing h3{font-weight:400;font-size:clamp(26px,20px + 1.55vw,40px);margin:0 0 20px}.form-grid{display:block}.woocommerce-billing-fields__field-wrapper{display:flex;flex-wrap:wrap}.field{width:100%;display:flex;align-items:baseline;gap:20px;margin-bottom:20px}.field:has(input[type="checkbox"]){display:block;margin-bottom:15px}.field.name-first,.field.name-last{width:50%;margin-bottom:20px}.field.name-last{padding-left:20px}.field.name-last label{display:none}.field label{width:195px;flex-shrink:0}.field:has(input[type="checkbox"]) label{width:auto}.field label{font-size:18px;font-weight:500}.field .woocommerce-input-wrapper{flex:1;min-width:0}.field input,.field select,.field textarea{width:100%;border:0;border-bottom:2px solid var(--line);padding:14px 0;outline:0;background:#fff;font-size:16px}.field input:focus,.field select:focus,.field textarea:focus{border-bottom-color:var(--ink)}.field input[type="checkbox"]{flex:none;width:auto}.order-box{margin-top:70px}.order-row{display:flex;justify-content:space-between;padding:13px 0;border-bottom:1px solid var(--line);font-size:18px}.payment{font-size:12px;color:#777;padding:15px 0}.payment label{display:block;margin:9px 0;color:#222}.place-order{display:flex;flex-wrap:wrap;margin:40px 0 20px}.woocommerce-terms-and-conditions-wrapper{width:100%;margin:0 0 40px}.woocommerce-privacy-policy-text p{font-size:16px;margin:0 0 24px}#place_order{width:100%;height:60px;line-height:60px;text-align:center;background:var(--ink);color:#fff;padding:0 40px;text-transform:uppercase;font-size:14px;font-weight:500;border:0;cursor:pointer}.toast{position:fixed;left:50%;bottom:28px;transform:translate(-50%,20px);background:#222;color:#fff;padding:12px 20px;z-index:80;opacity:0;transition:.25s}.toast.show{opacity:1;transform:translate(-50%,0)} @media(max-width:1024px){.site-header{height:82px;padding:0 20px;grid-template-columns:1fr auto 1fr}.main-nav,.signin{display:none}.mobile-menu{display:flex;grid-column:1;grid-row:1;justify-self:start}.site-header>.brand{grid-column:2;grid-row:1}.site-header>.header-actions{grid-column:3;grid-row:1}.header-actions{gap:13px}.hero{height:550px;margin:0}.hero-copy{left:9%;top:55%}.catalog{padding-top:55px;padding-bottom:55px}.product-grid{grid-template-columns:repeat(2,1fr);gap:45px 24px}.product-image{height:340px}.product-main{grid-template-columns:1fr;gap:30px;padding-bottom:60px}.product-info{max-width:none}.crumbs{margin-bottom:25px}.gallery{grid-template-columns:70px 1fr}.thumb{width:60px;height:60px}.page-shell{padding-top:24px}.checkout-grid{grid-template-columns:1fr}.order-box{margin-bottom:50px}footer{grid-template-columns:1fr;text-align:center;gap:15px;padding:25px}footer nav,.socials{justify-self:center}.cart-table th:nth-child(2),.cart-table td:nth-child(2){display:none}.total-line{grid-template-columns:140px 1fr}.shipping-options{flex-direction:column;gap:7px}.product-details{grid-template-columns:1fr}.product-details nav{flex-direction:row;gap:20px}} @media(max-width:768px){.header-actions .icon-btn,.header-actions [aria-label="Wishlist"]{display:none}.site-header{height:60px}.site-header-space{height:60px}.hero{height:auto;aspect-ratio:1672/941}.hero-slide img{object-fit:contain;background:#f5f6f6}.hero img{object-position:62% center;filter:brightness(.93)}.hero-copy{left:6%;top:50%;transform:translateY(-50%);max-width:60%}.hero-copy small{font-size:10px}.hero-copy h1{font-size:22px;line-height:1.15;letter-spacing:-.5px;margin:8px 0 14px}.hero-copy .outline-btn{padding:8px 16px;font-size:9px;min-width:auto}.hero-dots{right:6%;bottom:14px;gap:14px}.catalog-toolbar{display:block}.tabs{overflow:auto;gap:28px;margin-bottom:25px}.filter{justify-content:space-between}.product-grid{grid-template-columns:1fr 1fr;gap:34px 10px}.product-image{height:240px}.product-card h3{font-size:14px}.gallery{display:block}.thumbs{display:none}.main-product-image{height:390px}.product-page{padding-top:20px}.product-info h1{font-size:31px}.buy-row{flex-direction:column}.qty{height:55px;width:100%}.add-btn{width:100%}.product-links{font-size:11px}.catalog{padding-top:40px;padding-bottom:80px}.shop-page{padding-top:40px;padding-bottom:60px}.page-shell{padding-top:16px}.cart-table th:nth-child(3),.cart-table td:nth-child(3){display:none}.cart-product{gap:10px}.cart-product img{width:70px}.coupon-row{display:block}.coupon{width:100%;margin-bottom:24px}.total-line{display:block}.shipping-options{margin-top:12px}.total-bottom{display:block}.form-grid{grid-template-columns:1fr}.field.full{grid-column:auto}.newsletter{padding:50px 15px}.newsletter form{width:100%}.related .product-image{height:200px}.add-btn,.checkout-btn,.single_add_to_cart_button,#place_order,#respond #submit{height:50px}.cart-totals{padding:24px}.field input,.field select,.field textarea{padding:12px 0}.field{flex-direction:column;align-items:stretch;gap:6px}.field label{width:auto}.field.name-first,.field.name-last{width:100%;padding-left:0}} .product-image img{object-fit:contain} /* Shop catalogue */ .shop-page{max-width:1280px;margin:auto;padding:65px clamp(16px,12.7px + 0.88vw,24px) 105px;min-height:1200px}.shop-heading{display:flex;justify-content:space-between;align-items:center;margin:15px 0 82px}.shop-heading h1{font-size:20px;font-weight:500;margin:0}.shop-heading span{font-size:11px;font-weight:500;color:#989b9d}.shop-finder{display:flex;align-items:center;gap:22px;font-size:31px;margin-bottom:82px;color:#9a9d9f}.shop-finder button{font-size:30px;border-bottom:2px solid #222;padding:0 0 6px;min-width:180px;text-align:left;color:#222}.shop-finder button:last-child{min-width:250px}.shop-toolbar{display:flex;justify-content:space-between;align-items:end;margin-bottom:48px;font-size:13px}.shop-toolbar label{border-bottom:1px solid var(--line);padding-bottom:8px;font-weight:600}.shop-toolbar select{border:0;background:#fff;outline:none;margin-left:18px}.shop-toolbar>div{display:flex;align-items:center;gap:30px}.shop-toolbar>div span{margin-right:26px}.shop-toolbar>div button{color:#8b8e90;padding:0 4px 6px}.shop-toolbar>div button.active{color:var(--ink);border-bottom:1px solid var(--ink)}.shop-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:78px 2.2vw}.shop-card{min-width:0}.shop-product-image{width:100%;height:490px;background:#f7f4f1;display:block;padding:0;overflow:hidden}.shop-card:nth-child(3n+2) .shop-product-image{background:#f5f9ee}.shop-card:nth-child(4n+3) .shop-product-image{background:#eef6fb}.shop-product-image img{width:100%;height:100%;object-fit:contain;mix-blend-mode:multiply}.shop-card h3{font-size:17px;font-weight:400;margin:24px 0 6px}.shop-card div{font-size:15px}.shop-card del{color:#96999b;margin-left:6px}.load-more{width:112px;height:112px;border:1px solid var(--line);border-radius:50%;display:block;margin:100px auto 0;text-transform:uppercase;font-size:11px;font-weight:600}.shop-footer{min-height:300px;border-top:1px solid var(--line);display:grid;grid-template-columns:1fr 1fr;grid-template-rows:1fr 1fr;align-items:center;padding:25px 11.2vw;font-size:12px;color:#333}.shop-options,.payments{justify-self:end}.shop-options{display:flex;gap:48px}.shop-socials{letter-spacing:7px}.payments{color:#a2a5a7;font-weight:700;font-size:15px} @media(max-width:1024px){.shop-page{padding-top:40px;padding-bottom:40px}.product-page{padding-top:30px}.shop-grid{grid-template-columns:repeat(2,1fr);gap:55px 22px}.shop-product-image{height:410px}.shop-finder{font-size:24px;flex-wrap:wrap}.shop-finder button{font-size:24px}.shop-footer{padding:25px;min-height:250px}} @media(max-width:768px){.shop-heading{margin-bottom:50px}.shop-finder{gap:10px;font-size:20px;margin-bottom:55px}.shop-finder button{font-size:20px;min-width:135px}.shop-finder button:last-child{min-width:190px}.shop-toolbar{align-items:flex-start;gap:24px}.shop-toolbar>div{gap:12px}.shop-toolbar>div span{margin-right:4px}.shop-grid{gap:38px 10px}.shop-product-image{height:250px}.shop-card h3{font-size:14px;margin-top:14px}.shop-footer{grid-template-columns:1fr;grid-template-rows:auto;gap:25px;padding:45px 25px}.shop-options,.payments{justify-self:start}} /* Editorial blog */ .blog-mode .site-header{background:#1d1d1f;color:#fff}.blog-mode .icon-with-count span{background:#fff;color:#1d1d1f}.blog-page{padding:72px 11.2vw 100px}.blog-masthead{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;margin-bottom:75px}.blog-masthead h1{font-size:44px;letter-spacing:14px;margin:0}.blog-masthead label{font-size:22px}.blog-masthead input{border:0;outline:0;font-size:13px;width:150px}.blog-masthead>div{justify-self:end;letter-spacing:12px}.blog-categories{display:flex;justify-content:center;gap:68px;margin-bottom:44px}.blog-categories button{font-size:12px;font-weight:600}.blog-hero{height:680px;position:relative;color:#fff;overflow:hidden}.blog-hero:after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(0,0,0,.45),rgba(0,0,0,.05) 68%,rgba(0,0,0,.22))}.blog-hero img{width:100%;height:100%;object-fit:cover}.blog-hero>div{position:absolute;z-index:2;left:9%;bottom:70px;max-width:700px}.blog-hero small,.blog-feed-item small,.editor-widget small{font-size:11px;font-weight:700}.blog-hero h2{font-size:44px;line-height:1.25;font-weight:400;margin:22px 0}.blog-hero button{border:1px solid rgba(255,255,255,.7);color:#fff;padding:13px 25px;text-transform:uppercase;font-size:11px}.blog-hero>span{position:absolute;z-index:2;right:9%;bottom:70px;font-size:35px}.featured-section{padding:62px 7.4% 65px;border-bottom:1px solid var(--line)}.featured-section>h2{text-align:center;font-size:34px;font-weight:400;margin:0 0 35px}.featured-section>div{display:grid;grid-template-columns:repeat(4,1fr);gap:26px}.featured-post img{width:100%;height:170px;object-fit:cover}.featured-post h3{font-size:17px;line-height:1.45;font-weight:400;margin:13px 0}.featured-post small{color:#999;font-size:11px}.blog-content{display:grid;grid-template-columns:minmax(0,2.3fr) minmax(280px,1fr);gap:68px;padding:68px 7.4% 0}.blog-feed-item{display:grid;grid-template-columns:1.05fr 1fr;gap:40px;padding:0 0 46px;margin-bottom:46px;border-bottom:1px solid var(--line);align-items:center}.blog-feed-item img{width:100%;height:255px;object-fit:cover}.blog-feed-item h2{font-size:29px;line-height:1.35;font-weight:400;margin:18px 0}.blog-feed-item p{color:#9a9c9e;font-size:14px}.blog-feed-item time{color:#97999b;font-size:11px}.blog-widget{border:1px solid var(--line);padding:27px 30px;margin-bottom:38px}.blog-widget h3{font-size:15px;border-bottom:2px solid #222;padding-bottom:17px;margin:0 0 23px}.search-widget{background:#fff0c9;border:0}.search-widget label{height:56px;border:1px solid #777;background:#fff;display:flex}.search-widget input{border:0;outline:0;flex:1;padding:15px}.search-widget button{font-size:24px}.editor-widget img{width:100%;height:185px;object-fit:cover;margin-bottom:16px}.editor-widget h4{font-size:16px;line-height:1.45;font-weight:400;margin:10px 0}.popular{display:grid;grid-template-columns:35px 1fr;gap:15px;padding:14px 0;border-bottom:1px solid var(--line)}.popular>b{font-size:29px;color:#d2d4d5}.popular>span{font-size:13px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.popular small{display:block;color:#999;font-size:9px}.signup-widget{background:#d8f2e8;border:0}.signup-widget p{font-size:12px}.signup-widget input{width:100%;padding:15px;margin:15px 0;border:1px solid #777}.signup-widget>button{width:100%;padding:15px;background:var(--ink);color:#fff}.category-row{display:flex;justify-content:space-between;padding:12px 0;border-bottom:1px solid var(--line)}.pagination{display:flex;gap:8px}.pagination button{border:1px solid var(--line);padding:13px 19px}.pagination button.active{background:var(--ink);color:#fff}.blog-page+.shop-footer{margin-top:0} @media(max-width:1024px){.blog-page{padding:55px 25px}.blog-masthead h1{font-size:34px;letter-spacing:8px}.blog-categories{gap:25px;overflow:auto;justify-content:flex-start}.blog-hero{height:560px}.featured-section{padding-left:0;padding-right:0}.featured-section>div{grid-template-columns:repeat(2,1fr)}.blog-content{grid-template-columns:1fr;padding-left:0;padding-right:0}.blog-content aside{display:grid;grid-template-columns:1fr 1fr;gap:20px}.blog-widget{margin-bottom:0}} @media(max-width:768px){.blog-masthead{grid-template-columns:1fr;text-align:center;gap:28px}.blog-masthead label{display:none}.blog-masthead h1{font-size:29px;letter-spacing:6px}.blog-masthead>div{justify-self:center}.blog-hero{height:480px}.blog-hero>div{left:25px;bottom:35px}.blog-hero h2{font-size:32px}.blog-hero>span{display:none}.featured-section>div{grid-template-columns:1fr 1fr;gap:22px 12px}.featured-post img{height:120px}.featured-post h3{font-size:14px}.blog-feed-item{grid-template-columns:1fr;gap:20px}.blog-feed-item img{height:250px}.blog-feed-item h2{font-size:25px}.blog-content aside{grid-template-columns:1fr}} /* Blog article detail */ .article-page{padding:72px 11.2vw 0}.article-cover{height:690px;overflow:hidden}.article-cover img{width:100%;height:100%;object-fit:cover}.article-body{position:relative;z-index:2;background:#fff;max-width:1140px;margin:-65px auto 0;padding:55px 105px 90px}.article-body header small{font-size:11px;font-weight:700}.article-body header h1{font-size:58px;line-height:1.18;letter-spacing:-2px;margin:24px 0 28px}.article-body header>div{color:#949799;font-size:11px}.article-body>p{font-size:17px;line-height:1.9;margin:34px 0}.article-body .article-lead{font-size:23px;line-height:1.55}.article-body blockquote{font-size:23px;line-height:1.5;margin:38px 0;padding-left:80px;position:relative}.article-body blockquote:before{content:"";position:absolute;width:30px;height:2px;background:#222;left:0;top:18px}.article-inline-image{width:calc(100% + 210px);height:610px;object-fit:cover;margin:38px -105px}.article-tags{display:flex;gap:12px;margin-top:48px}.article-tags span{border:1px solid var(--line);padding:10px 18px;font-size:11px;font-weight:600}.article-share{display:flex;gap:20px;border-top:1px solid var(--line);padding-top:30px;margin:30px 0 45px}.article-share button{padding:13px 34px;border:1px solid #bbb}.article-share button:first-child{background:#3b69a4;color:#fff;border-color:#3b69a4}.article-share button:nth-child(2){background:#32b9e5;color:#fff;border-color:#32b9e5}.author-card{display:grid;grid-template-columns:95px 1fr;gap:26px;background:#f3f5f6;padding:35px 45px}.author-avatar{width:75px;height:75px;border-radius:50%;background:#222;color:#fff;display:grid;place-items:center;font:32px Georgia}.author-card h3{font-size:24px;font-weight:400;margin:0}.author-card p{font-size:14px}.post-nav{display:grid;grid-template-columns:1fr 1fr;gap:50px;padding:42px 0;border-bottom:1px solid var(--line)}.post-nav>div:last-child{text-align:right}.post-nav small{display:block;font-size:10px;font-weight:700;margin-bottom:15px}.post-nav button{font-size:15px}.related-articles{padding:38px 0;border-bottom:1px solid var(--line)}.related-articles>h3,.reply h3{font-size:14px;margin:0 0 24px}.related-articles>div{display:grid;grid-template-columns:repeat(3,1fr);gap:25px}.related-articles img{width:100%;height:150px;object-fit:cover}.related-articles h4{font-size:15px;line-height:1.45;font-weight:400;margin:10px 0}.reply{padding-top:40px}.reply>p{font-size:13px;color:#999}.reply textarea,.reply input{width:100%;border:1px solid #aaa;padding:17px;outline:0}.reply>div{display:grid;grid-template-columns:1fr 1fr;gap:22px;margin:20px 0}.reply>button{width:100%;background:var(--ink);color:#fff;padding:18px;text-transform:uppercase;font-size:12px}.article-footer{min-height:300px;background:#1d1d1f;color:#fff;display:grid;grid-template-columns:1fr 1fr;grid-template-rows:1fr 1fr;align-items:center;padding:35px 11.2vw;font-size:12px}.article-footer>div:nth-child(2),.article-footer strong{justify-self:end}.article-footer strong{color:#a4a6a8;font-size:15px} @media(max-width:1024px){.article-page{padding:55px 25px 0}.article-cover{height:560px}.article-body{padding:50px 65px 80px}.article-body header h1{font-size:48px}.article-inline-image{width:calc(100% + 130px);margin-left:-65px;margin-right:-65px;height:480px}} @media(max-width:768px){.article-page{padding:48px 15px 0}.article-cover{height:430px}.article-body{margin-top:-35px;padding:35px 20px 60px}.article-body header h1{font-size:37px}.article-body .article-lead{font-size:20px}.article-body>p{font-size:16px}.article-body blockquote{padding-left:45px;margin-left:0;margin-right:0}.article-inline-image{width:calc(100% + 40px);height:320px;margin-left:-20px;margin-right:-20px}.article-share{flex-wrap:wrap}.article-share button{padding:11px 18px}.author-card{grid-template-columns:1fr;padding:28px}.post-nav{gap:18px}.related-articles>div{grid-template-columns:1fr}.related-articles img{height:210px}.reply>div{grid-template-columns:1fr}.article-footer{grid-template-columns:1fr;grid-template-rows:auto;gap:25px;padding:50px 25px}.article-footer>div:nth-child(2),.article-footer strong{justify-self:start}} .drawer-head h2 .cart-count-paren,.drawer-head h2 #drawer-count{background:none;color:inherit;font-size:inherit;padding:0;border-radius:0}.hamburger-close{display:inline-flex;align-items:center;gap:6px}.hamburger-close .close-x{stroke:#161619;stroke-width:2;stroke-linecap:round}.drawer-qty{display:flex;align-items:center;gap:8px;position:relative}.drawer-qty .label{font-size:12px;color:#888}.qty-dropdown{position:relative;display:inline-block}.qty-dropdown .current{display:flex;align-items:center;gap:6px;cursor:pointer;font-size:14px;color:#1b1b1d}.qty-dropdown .arrow-icon{width:10px;height:10px;display:inline-flex}.qty-dropdown .arrow-icon svg{width:100%;height:100%;fill:#8b8e90}.qty-dropdown .qty-options{position:absolute;top:22px;left:0;display:none;background:#fff;box-shadow:1px 2px 10px rgba(0,0,0,.1);z-index:20;min-width:44px}.qty-dropdown.opened .qty-options{display:block}.qty-dropdown .qty-options ul{list-style:none;margin:0;padding:4px 12px}.qty-dropdown .qty-options li{padding:4.5px 0;font-size:14px;cursor:pointer;color:#1b1b1d}.qty-dropdown .qty-options li:hover,.qty-dropdown .qty-options li.active{color:var(--accent)}.site-header.transparent{position:absolute;left:0;top:0;width:100%;z-index:999;background:transparent}.site-header.transparent.transparent-hover{transition:.25s}.site-header.transparent.transparent-hover:hover{background:#fff}.header-sticky--smart{position:fixed;top:0;left:0;width:100%;z-index:1400}.header-sticky--smart.headroom--not-top{position:fixed;top:0;left:0;width:100%;z-index:1400}.header-sticky--smart.headroom--not-top.transparent{background-color:rgba(255,255,255,.8)}.headroom{will-change:transform;transition:transform .25s linear}.headroom--pinned{transform:translateY(0%)}.headroom--unpinned{transform:translateY(-100%)}.shop-card-inner{position:relative;transition:box-shadow .4s,background-color .3s}.shop-card-inner:hover{background:#fff;box-shadow:0 8px 32px rgba(0,0,0,.1)}.shop-card-summary{transition:transform .4s;position:relative;z-index:2}.shop-card-inner:hover .shop-card-summary{transform:translateY(-40px);background:#fff}.shop-card-actions{position:absolute;left:0;right:0;bottom:-26px;height:40px;opacity:0;transform:translateY(50%);transition:.4s;display:flex;justify-content:space-between;align-items:center}.shop-card-inner:hover .shop-card-actions{opacity:1;transform:none}.shop-card-actions .ajax-add{font-size:12px;text-transform:uppercase;font-weight:600;border:0;background:none;padding:0;cursor:pointer;color:#1b1b1d}.shop-card-icons{display:flex;gap:10px}.shop-card-icons a,.shop-card-icons button{width:22px;height:22px;display:inline-flex;align-items:center;justify-content:center;border:0;background:none;padding:0;cursor:pointer;color:#1b1b1d}.shop-card-icons svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.5} /* Mobile navigation typography — use the clean Inter style across the sidebar menu. */ #mobile-nav-drawer .drawer-head h2, #mobile-nav-drawer .mobile-nav-links a { font-family: "Inter", Arial, sans-serif; font-weight: 400; letter-spacing: 0; } #mobile-nav-drawer .mobile-nav-links a { font-size: 15px; text-transform: uppercase; } #mobile-nav-drawer .drawer-head h2 { font-size: 15px; text-transform: uppercase; } /* Sticky add-to-cart bar (product page) */ .sticky-add-bar{display:none;position:fixed;left:0;right:0;bottom:0;z-index:60;background:#fff;border-top:1px solid var(--line);padding:15px 11vw;transform:translateY(100%);transition:transform .25s ease}.sticky-add-bar.visible{transform:translateY(0)}.sticky-add-bar-inner{max-width:2110px;margin:auto;display:flex;align-items:center;justify-content:space-between;gap:20px}.sticky-add-bar-summary{display:flex;align-items:center;gap:16px}.sticky-add-bar-summary img{width:50px;height:57px;object-fit:cover}.sticky-add-bar-title{font-size:16px;font-weight:500;margin:0}.sticky-add-bar-price{font-size:16px;margin:2px 0 0;color:#777}.sticky-add-bar-price del{margin-right:6px}.sticky-add-bar-actions{display:flex;align-items:center;gap:20px}.sticky-add-bar .qty{width:120px;height:44px}.sticky-add-bar .add-btn{padding:0 40px;height:44px} @media(max-width:768px){.sticky-add-bar{padding:12px 15px}.sticky-add-bar-title{display:none}.sticky-add-bar .qty{width:96px;height:40px}.sticky-add-bar .add-btn{padding:12px 22px}} /* Real WooCommerce variation form (variable products), reskinned to match */ .variations{display:block;width:auto;margin:0 0 30px}.variations tbody{display:block}.variations tr{display:block;float:left;width:220px}.variations tr th.label{display:block;padding-bottom:10px;font-size:14px;font-weight:400;text-align:left}.variations tr td.value{display:block}.variations select{border:0;border-bottom:1px solid #cdcfd0;background:transparent;width:140px;font-size:14px;padding:3px 20px 4px 0;-webkit-appearance:none;appearance:none;border-radius:0}.reset_variations{font-size:14px;color:#838889;margin-left:20px}.single_variation_wrap{clear:both;padding-top:24px}.woocommerce-variation-price{margin-bottom:15px}.woocommerce-variation-price .price{font-size:30px;font-weight:400;padding:0}.woocommerce-variation-price .price del{font-size:17px;color:#999;margin-right:13px}.woocommerce-variation-add-to-cart{display:flex;align-items:center;gap:20px}.variations_form .quantity.qty input.qty{width:40px;text-align:center;border:0;background:none;padding:0;-moz-appearance:textfield}.variations_form .quantity.qty input.qty::-webkit-inner-spin-button,.variations_form .quantity.qty input.qty::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}.single_add_to_cart_button{background:var(--ink);color:#fff;padding:0 40px;height:60px;display:inline-flex;align-items:center;justify-content:center;text-transform:uppercase;font-size:14px;border:0;cursor:pointer}.single_add_to_cart_button.disabled{background:#cdcfd0;cursor:not-allowed}.woocommerce-variation-availability{font-size:12px;color:#888;margin-top:10px}.sticky-add-bar-choose{padding:14px 40px} @media(max-width:768px){.variations tr{width:50%}} /* Fixed sticky header on every non-front page needs a spacer to reserve the space the header no longer occupies in normal flow (front page keeps the transparent hero overlay with no spacer). */ .site-header-space{height:118px} @media(max-width:1024px){.site-header-space{height:82px}} /* Reviews tab: WooCommerce's own review list + "write a review" form, reskinned since woocommerce_enqueue_styles is stripped (kills WC's own star-rating icon font + form layout entirely, leaving raw browser defaults and literal "N of 5 stars" link text). */ .woocommerce-Reviews-title{display:none} #comments{margin:0} .commentlist{list-style:none;margin:0;padding:0} .commentlist .review{border-bottom:1px solid var(--line);padding-bottom:25px;margin-bottom:20px} .commentlist .review:last-child{border-bottom:0;margin-bottom:0} #comments img.avatar{display:none} .comment-text{position:relative} .comment-text .meta{display:flex;align-items:baseline;margin:0 0 10px;font-style:normal} .woocommerce-review__author{font-size:16px;font-weight:400;color:var(--ink)} .woocommerce-review__dash{display:none} .woocommerce-review__published-date{font-size:11px;font-weight:600;color:#96999b;text-transform:uppercase;margin-left:20px} .comment-text .star-rating{position:relative;float:right;margin-top:8px;overflow:hidden;height:16px;width:100px;font-size:16px;line-height:1;letter-spacing:2px} .comment-text .star-rating:before{content:"☆☆☆☆☆";position:absolute;top:0;left:0;color:#d8d9da} .comment-text .star-rating span{position:absolute;top:0;left:0;height:100%;overflow:hidden;font-size:0}.comment-text .star-rating span strong.rating{font-size:0} .comment-text .star-rating span:before{content:"★★★★★";position:absolute;top:0;left:0;font-size:16px;color:#ffa62f} .comment-text .description p{font-size:14px;color:#858789;line-height:1.65;margin:0} /* "Add a review" form */ #review_form_wrapper{margin-top:40px} #review_form_wrapper #reply-title{font-size:24px;font-weight:400;margin:0 0 20px} .comment-notes{font-size:14px;color:#858789;margin:0 0 25px} .comment-form-rating{margin-bottom:24px}.comment-form-comment{margin-bottom:28px} .comment-form-rating label{display:inline-block;vertical-align:top;font-size:16px;font-weight:400;color:var(--ink);margin-right:26px}.comment-form-comment,.comment-form-author,.comment-form-email{position:relative}.comment-form-comment label,.comment-form-author label,.comment-form-email label{position:absolute;left:0;top:10px;font-size:16px;font-weight:400;color:var(--ink);transition:.2s ease;pointer-events:none;transform-origin:left top;margin:0}.comment-form-comment.focused label,.comment-form-author.focused label,.comment-form-email.focused label{transform:translateY(-20px) scale(.8);color:#838889} .comment-form-rating .stars{position:relative;display:inline-block;height:20px;width:120px;font-size:0} .comment-form-rating .stars span{position:relative;display:block} .comment-form-rating .stars span:before{content:"☆☆☆☆☆";font-size:18px;letter-spacing:4px;color:#d8d9da} .comment-form-rating .stars a{position:absolute;top:0;left:0;height:100%;overflow:hidden;text-indent:-9999px;opacity:0} .comment-form-rating .stars a:before{content:"★★★★★";font-size:18px;letter-spacing:4px;color:#ffa62f;text-indent:0;position:absolute;top:0;left:0} .comment-form-rating .stars a.star-1{width:20%} .comment-form-rating .stars a.star-2{width:40%} .comment-form-rating .stars a.star-3{width:60%} .comment-form-rating .stars a.star-4{width:80%} .comment-form-rating .stars a.star-5{width:100%} .comment-form-rating .stars a.active{opacity:1} .comment-form-rating .stars:hover a{opacity:0} .comment-form-rating .stars a:hover{opacity:1} .comment-form-rating select{display:none} .comment-form-comment textarea,#respond input[type="text"],#respond input[type="email"]{width:100%;border:0;border-bottom:2px solid var(--line);padding:10px 0;font-size:16px;font-family:inherit;outline:0;background:none;transition:.4s} .comment-form-comment textarea:focus,#respond input[type="text"]:focus,#respond input[type="email"]:focus{border-bottom-color:var(--ink)} .comment-form-comment textarea{resize:vertical;height:100px} #commentform{display:grid;grid-template-columns:1fr 1fr;column-gap:40px} #commentform>.comment-notes,#commentform>.comment-form-rating,#commentform>.comment-form-comment,#commentform>.comment-form-cookies-consent,#commentform>.form-submit{grid-column:1/-1} .comment-form-author,.comment-form-email{margin-bottom:30px} .comment-form-cookies-consent{display:flex;align-items:center;gap:8px;font-size:12px;color:#858789;margin:5px 0 25px} #respond .form-submit{margin:0} #respond #submit{background:var(--ink);color:#fff;height:60px;padding:0 40px;width:100%;text-transform:uppercase;font-size:14px;font-weight:600;border:0;cursor:pointer} @media(max-width:768px){#commentform{grid-template-columns:1fr}} /* Homepage catalogue — warm editorial carousel based on the selected reference. Product photography and commerce data remain the real WooCommerce/CJ content. */ .catalog{position:relative;isolation:isolate;max-width:none;padding:70px clamp(20px,4.4vw,72px) 64px;background:#faf8f5;overflow:hidden}body.single-product,body.woocommerce-shop,body.woocommerce-cart,body.woocommerce-checkout,body.kiboni-policy-page{background:#f5f5f5} .catalog:before,.catalog:after{content:"";position:absolute;z-index:-1;border-radius:50%;filter:blur(26px);opacity:.2;pointer-events:none} .catalog:before{width:290px;height:290px;left:-150px;top:80px;background:radial-gradient(ellipse at center,#667255 0 12%,transparent 62%)} .catalog:after{width:360px;height:360px;right:-190px;bottom:20px;background:radial-gradient(ellipse at center,#8d947b 0 12%,transparent 62%)} .catalog-intro,.catalog-toolbar,.home-product-viewport,.catalog-trust{width:100%;max-width:1440px;margin-left:auto;margin-right:auto} .catalog-intro{display:flex;align-items:flex-end;justify-content:space-between;gap:36px;margin-bottom:26px} .catalog-eyebrow{margin:0 0 10px;color:#6f674f;font-size:11px;font-weight:600;letter-spacing:.22em;text-transform:uppercase} .catalog-view-all{font-size:13px;font-weight:600;text-transform:uppercase;letter-spacing:.04em;border-bottom:1px solid var(--ink);padding-bottom:2px;white-space:nowrap} .catalog-intro h2{margin:0;font-size:clamp(24px,2vw,30px);font-weight:400;line-height:1.15;letter-spacing:.4px;text-transform:uppercase} .catalog-carousel-meta{display:flex;align-items:center;gap:24px;padding-bottom:5px} .catalog-carousel-meta>span{font-size:13px;font-weight:600;white-space:nowrap} .catalog-carousel-controls{display:flex;gap:10px} .catalog-arrow{width:42px;height:42px;border-radius:50%;background:rgba(255,255,255,.58);display:grid;place-items:center;transition:background-color .2s,transform .2s} .catalog-arrow:hover{background:#fff;transform:translateY(-1px)} .catalog-arrow svg{width:20px;height:20px;fill:none;stroke:#20211e;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round} .catalog-toolbar{margin-bottom:22px} .catalog-toolbar .tabs{gap:16px 44px;align-items:center;flex-wrap:wrap} .catalog-toolbar .tabs a{display:inline-flex;align-items:center;justify-content:center;min-height:40px;padding:0 0 4px;color:#484943;font-size:14px;font-weight:500;border-bottom:1px solid transparent} .catalog-toolbar .tabs a.active{padding:0 25px;border:0;border-radius:999px;background:var(--ink);color:#fff} .home-product-viewport{overflow-x:auto;scroll-behavior:smooth;scrollbar-width:none;overscroll-behavior-inline:contain;scroll-snap-type:x mandatory} .home-product-viewport::-webkit-scrollbar{display:none} .product-grid.home-product-track{display:grid;grid-template-columns:none;grid-auto-flow:column;grid-auto-columns:calc((100% - 72px)/4);gap:24px} .home-product-card{position:relative;min-width:0;overflow:hidden;border-radius:15px;background:#fff;box-shadow:0 10px 30px rgba(69,60,44,.06);scroll-snap-align:start} .home-product-media{position:relative} .home-product-image{display:block;aspect-ratio:1/1;overflow:hidden;background:#f4f2ed} .home-product-image img{display:block;width:100%;height:100%;object-fit:cover;transition:transform .6s cubic-bezier(.2,.7,.2,1)} .home-product-card:hover .home-product-image img{transform:scale(1.025)} .home-product-badge{position:absolute;z-index:2;left:14px;top:14px;min-height:30px;padding:0 12px;border-radius:999px;background:#788365;color:#fff;display:inline-flex;align-items:center;font-size:11px;font-weight:600;letter-spacing:.02em} .home-product-wishlist{position:absolute;z-index:3;right:14px;top:14px;width:34px;height:34px;border-radius:50%;background:rgba(255,255,255,.9);display:grid;place-items:center;transition:color .2s,background-color .2s} .home-product-wishlist svg{width:19px;height:19px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linejoin:round} .home-product-wishlist.is-active{background:#fff;color:#687353} .home-product-wishlist.is-active svg{fill:currentColor} .home-product-body{padding:14px 15px 15px} .home-product-body h3{min-height:43px;margin:0 0 6px;font-size:16px;font-weight:500;line-height:1.35} .home-product-rating{min-height:21px;margin-bottom:7px;display:flex;align-items:center;gap:8px;color:#64665f;font-size:12px} .home-product-rating .star-rating{position:relative;width:88px;height:18px;overflow:hidden;display:inline-block;letter-spacing:1px} .home-product-rating .star-rating:before{content:"☆☆☆☆☆";position:absolute;inset:0;color:#d4a93a;font-size:17px;line-height:18px} .home-product-rating .star-rating span{position:absolute;left:0;top:0;height:100%;overflow:hidden;font-size:0} .home-product-rating .star-rating span:before{content:"★★★★★";position:absolute;left:0;top:0;color:#d4a93a;font-size:17px;line-height:18px;letter-spacing:1px} .home-product-price{min-height:29px;display:flex;align-items:baseline;gap:9px;font-size:20px;font-weight:700;flex-wrap:wrap} .home-product-footer{display:flex;align-items:center;justify-content:space-between;gap:8px} .home-product-price ins{text-decoration:none;order:-1} .home-product-price del{color:#999;font-size:14px;font-weight:400} .home-product-add{flex:none;background:none;border:0;padding:0;color:var(--ink);font-size:12px;font-weight:600;letter-spacing:.03em;text-transform:uppercase;white-space:nowrap;transition:color .2s} .home-product-add:hover{color:#000} .catalog-trust{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));margin-top:16px;padding-top:24px;border-top:1px solid rgba(91,88,77,.22)} .catalog-trust-item{min-width:0;display:grid;grid-template-columns:40px 1fr;align-items:center;gap:12px;padding:0 22px;border-right:1px solid rgba(91,88,77,.22)} .catalog-trust-item:first-child{padding-left:8px}.catalog-trust-item:last-child{padding-right:8px;border-right:0} .catalog-trust-item svg{width:35px;height:35px;fill:none;stroke:#637050;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round} .catalog-trust-item strong,.catalog-trust-item span{display:block} .catalog-trust-item strong{margin-bottom:3px;font-size:14px;font-weight:600}.catalog-trust-item span{color:#686a64;font-size:12px;line-height:1.35} @media(max-width:1024px){ .catalog{padding-top:56px} .product-grid.home-product-track{grid-auto-columns:calc((100% - 24px)/2)} .catalog-trust{grid-template-columns:1fr 1fr;row-gap:26px} .catalog-trust-item:nth-child(2){border-right:0}.catalog-trust-item:nth-child(3){padding-left:8px} } /* -------------------------------------------------------------------------- WooCommerce order confirmation -------------------------------------------------------------------------- */ body.woocommerce-order-received { background: #fffefa; } .kiboni-order-confirmation { width: 100%; } .order-confirmation-page { width: calc(100% - 32px); max-width: 1280px; margin: 0 auto; padding: 34px 0 78px; color: #20231f; } .order-confirmation-masthead { display: flex; align-items: flex-start; justify-content: space-between; gap: 40px; margin-bottom: 34px; } .order-confirmation-eyebrow { display: block; margin-bottom: 12px; font-size: 10px; font-weight: 700; line-height: 1.2; letter-spacing: 2px; } .order-confirmation-masthead h1 { margin: 0 0 12px; font-family: Georgia, 'Times New Roman', serif; font-size: clamp(38px, 4vw, 58px); font-weight: 400; line-height: 1.02; letter-spacing: -1.6px; } .order-confirmation-masthead p { margin: 0; color: #64686c; font-size: 15px; line-height: 1.5; } .order-confirmation-masthead p strong { font-weight: 400; } .order-confirmation-reference { display: grid; gap: 4px; min-width: 190px; padding-top: 24px; text-align: right; } .order-confirmation-reference strong { font-size: 10px; letter-spacing: 2px; } .order-confirmation-reference span { color: #73777b; font-size: 12px; } .order-confirmation-grid { display: grid; grid-template-columns: minmax(0, 1.62fr) minmax(360px, 1fr); gap: 24px; align-items: start; } .order-confirmation-primary, .order-confirmation-sidebar { display: grid; gap: 24px; } .order-confirmation-card { background: rgba(255, 255, 255, 0.62); border: 1px solid #dedfd9; border-radius: 10px; } .order-confirmation-details { min-height: 408px; padding: 30px; } .order-confirmation-status { display: flex; align-items: center; gap: 26px; padding-bottom: 24px; border-bottom: 1px solid #dedfd9; } .order-confirmation-check { display: grid; place-items: center; width: 52px; height: 52px; padding: 10px; color: #fff; background: #aab39a; border-radius: 50%; } .order-confirmation-card svg, .order-confirmation-assurances svg { width: 100%; height: 100%; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; } .order-confirmation-status h2, .order-confirmation-items h2, .order-confirmation-help h2 { margin: 0; font-family: Georgia, 'Times New Roman', serif; font-size: 26px; font-weight: 400; line-height: 1.2; } .order-confirmation-status p { margin: 8px 0 0; font-size: 10px; font-weight: 700; letter-spacing: 2.2px; } .order-confirmation-detail-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0; padding-top: 24px; } .order-confirmation-address { padding-right: 34px; } .order-confirmation-secondary-details { display: grid; border-left: 1px solid #dedfd9; } .order-confirmation-detail { display: grid; grid-template-columns: minmax(0, 1fr); gap: 6px; padding: 0 0 20px 44px; } .order-confirmation-detail + .order-confirmation-detail { padding-top: 20px; border-top: 1px solid #dedfd9; } .order-confirmation-detail-icon { display: none; } .order-confirmation-detail h3 { margin: 0 0 8px; color: #747872; font-size: 10px; font-weight: 700; line-height: 1.3; letter-spacing: 1.8px; text-transform: uppercase; } .order-confirmation-detail p { margin: 0; font-size: 15px; line-height: 1.45; } .order-confirmation-detail p small { display: block; color: #7b7e82; font-size: 12px; } .order-confirmation-payment { display: flex; align-items: center; gap: 16px; } .order-confirmation-card-brand { display: inline-grid; place-items: center; min-width: 40px; height: 24px; padding: 0 7px; color: #fff; background: #24388e; border-radius: 3px; font-family: Arial, sans-serif; font-size: 11px; font-weight: 700; font-style: italic; } .order-confirmation-card-brand--mastercard { background: #d85236; } .order-confirmation-card-brand--amex { background: #2875a8; } .order-confirmation-card-brand--discover { background: #d77a26; } .order-confirmation-total { font-family: Georgia, 'Times New Roman', serif; font-size: 24px !important; } .order-confirmation-items { padding: 28px; } .order-confirmation-items > header { display: flex; align-items: center; justify-content: space-between; gap: 20px; margin-bottom: 18px; } .order-confirmation-items > header span { font-size: 9px; font-weight: 600; letter-spacing: 2px; } .order-confirmation-items > header b { display: none; } .order-confirmation-item { display: grid; grid-template-columns: 76px minmax(0, 1fr) auto; gap: 20px; align-items: center; min-height: 112px; padding: 18px 0; border-top: 1px solid #e0e1dd; } .order-confirmation-item:first-child { padding-top: 8px; border-top: 0; } .order-confirmation-item-image, .order-confirmation-item-image img { width: 76px; height: 76px; border-radius: 6px; } .order-confirmation-item-image { overflow: hidden; background: #f2f2ee; } .order-confirmation-item-image img { display: block; object-fit: cover; } .order-confirmation-item h3 { margin: 0 0 6px; font-family: Georgia, 'Times New Roman', serif; font-size: 15px; font-weight: 400; line-height: 1.3; } .order-confirmation-item p { margin: 0; color: #797d81; font-size: 11px; } .order-confirmation-item > strong { font-size: 14px; font-weight: 500; white-space: nowrap; } .order-confirmation-help { padding: 28px; } .order-confirmation-help p { max-width: 390px; margin: 18px 0; color: #61666a; font-size: 14px; line-height: 1.5; } .order-confirmation-help a { display: inline-flex; align-items: center; justify-content: space-between; gap: 40px; min-width: 205px; min-height: 52px; padding: 0 22px; border: 1px solid #aeb1aa; border-radius: 8px; font-size: 14px; font-weight: 600; } .order-confirmation-assurances { display: grid; grid-template-columns: repeat(3, 1fr); padding: 14px 0; } .order-confirmation-assurances > div { display: flex; align-items: center; justify-content: center; gap: 16px; min-height: 62px; padding: 0 24px; border-right: 1px solid #e1e2de; } .order-confirmation-assurances > div:last-child { border-right: 0; } .order-confirmation-assurances span { display: grid; place-items: center; width: 54px; height: 54px; padding: 14px; color: #526048; background: #f1f1ec; border-radius: 50%; flex: 0 0 auto; } .order-confirmation-assurances p { margin: 0; color: #5f6467; font-size: 13px; line-height: 1.4; } .order-confirmation-actions { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; } .order-confirmation-btn { display: flex; align-items: center; justify-content: center; gap: 18px; min-height: 56px; padding: 0 20px; color: #20231f; background: transparent; border: 1px solid #aeb1aa; border-radius: 8px; font-size: 14px; font-weight: 500; text-align: center; } .order-confirmation-btn--primary { color: #fff; background: #536044; border-color: #536044; } .order-confirmation-failed { width: calc(100% - 32px); max-width: 720px; margin: 60px auto; padding: 36px; background: #fff; border: 1px solid #dedfd9; border-radius: 10px; text-align: center; } .order-confirmation-failed > div { display: flex; justify-content: center; gap: 12px; margin-top: 24px; } @media (max-width: 1024px) { .order-confirmation-page { padding-top: 26px; } .order-confirmation-grid { grid-template-columns: minmax(0, 1.45fr) minmax(320px, 1fr); gap: 18px; } .order-confirmation-details, .order-confirmation-items, .order-confirmation-help { padding: 22px; } .order-confirmation-detail { padding-left: 28px; } .order-confirmation-assurances > div { padding: 0 12px; } } @media (max-width: 768px) { .order-confirmation-page { width: calc(100% - 24px); padding: 20px 0 36px; } .order-confirmation-masthead { display: flex; flex-direction: column; align-items: center; gap: 8px; margin-bottom: 12px; text-align: center; } .order-confirmation-eyebrow { margin-bottom: 5px; font-size: 10px; } .order-confirmation-masthead h1 { margin-bottom: 7px; font-size: clamp(30px, 8.5vw, 38px); line-height: 1.05; letter-spacing: -1px; } .order-confirmation-masthead p { max-width: 390px; font-size: 14px; line-height: 1.32; } .order-confirmation-reference { gap: 1px; padding-top: 0; text-align: center; } .order-confirmation-reference strong { font-size: 10px; } .order-confirmation-reference span { font-size: 13px; } .order-confirmation-grid { display: flex; flex-direction: column; align-items: stretch; gap: 16px; } .order-confirmation-primary, .order-confirmation-sidebar { display: contents; } .order-confirmation-details { order: 1; min-height: 0; padding: 11px 18px 0; border-radius: 9px; } .order-confirmation-status { flex-direction: column; gap: 8px; padding: 0 0 14px; text-align: center; } .order-confirmation-check { width: 44px; height: 44px; padding: 9px; } .order-confirmation-status h2, .order-confirmation-items h2 { font-size: 23px; } .order-confirmation-status p { margin-top: 5px; font-size: 9px; } .order-confirmation-detail-grid { display: block; padding: 0; } .order-confirmation-address { padding-right: 0; } .order-confirmation-secondary-details { display: block; border-left: 0; } .order-confirmation-detail, .order-confirmation-detail + .order-confirmation-detail { display: grid; grid-template-columns: 34px 116px minmax(0, 1fr); gap: 12px; align-items: start; min-height: 62px; padding: 12px 4px; border-top: 1px solid #e1e2de; } .order-confirmation-detail-icon { display: grid; place-items: center; width: 26px; height: 26px; padding: 2px; color: #526048; } .order-confirmation-detail > div { display: contents; } .order-confirmation-detail h3 { margin: 3px 0 0; color: #5f6468; font-size: 12px; font-weight: 400; letter-spacing: 0; text-transform: none; } .order-confirmation-detail p { margin: 0; font-size: 13px; line-height: 1.35; } .order-confirmation-detail p small { font-size: 12px; } .order-confirmation-payment { gap: 10px; } .order-confirmation-card-brand { min-width: 40px; height: 23px; } .order-confirmation-total { font-size: 22px !important; } .order-confirmation-items { order: 2; padding: 15px 18px 2px; border-radius: 9px; } .order-confirmation-items > header { margin-bottom: 4px; } .order-confirmation-items > header span { display: flex; align-items: center; gap: 12px; } .order-confirmation-items > header b { display: inline; font-size: 22px; font-weight: 400; } .order-confirmation-item { grid-template-columns: 72px minmax(0, 1fr) auto; gap: 14px; min-height: 88px; padding: 10px 0; } .order-confirmation-item:first-child { padding-top: 8px; } .order-confirmation-item-image, .order-confirmation-item-image img { width: 72px; height: 62px; } .order-confirmation-item h3 { font-size: 14px; line-height: 1.25; } .order-confirmation-item > strong { font-size: 13px; } .order-confirmation-help { display: none; } .order-confirmation-assurances { order: 3; padding: 8px 0; } .order-confirmation-assurances > div { flex-direction: column; gap: 5px; min-height: 72px; padding: 0 10px; text-align: center; } .order-confirmation-assurances span { width: 44px; height: 44px; padding: 11px; } .order-confirmation-assurances p { font-size: 11px; line-height: 1.25; } .order-confirmation-actions { order: 4; grid-template-columns: 1fr; gap: 8px; } .order-confirmation-btn { min-height: 46px; border-radius: 7px; font-size: 13px; } .order-confirmation-failed { margin: 24px auto; padding: 24px 18px; } .order-confirmation-failed > div { flex-direction: column; } } @media print { body.woocommerce-order-received .site-header, body.woocommerce-order-received .site-footer, .order-confirmation-actions, .order-confirmation-help { display: none !important; } .order-confirmation-page { padding: 0; } } /* Editorial cart — sized to the shared 1280px site system. */ body.woocommerce-cart .page-shell{padding-top:40px;padding-bottom:40px} body.woocommerce-cart .entry-content{max-width:none;margin:0;font-size:inherit;line-height:inherit} body.woocommerce-cart .woocommerce-notices-wrapper{margin-bottom:20px} .cart-masthead{display:flex;align-items:flex-end;justify-content:space-between;gap:32px;margin:0 0 56px} .cart-masthead h1{margin:0;font-size:28px;font-weight:400;line-height:1.15;letter-spacing:.5px;text-transform:uppercase} .cart-masthead p{margin:15px 0 0;color:#7b7d77;font-size:13px;letter-spacing:.24em} .cart-masthead>a{display:flex;align-items:center;gap:11px;margin-bottom:8px;padding-bottom:5px;border-bottom:1px solid #899075;color:#596044;font-size:14px;font-weight:500} .cart-masthead>a span{font-size:18px;line-height:1} .cart-editorial-form.is-updating{opacity:.55;pointer-events:none;transition:opacity .15s ease}.cart-editorial-layout{display:grid;grid-template-columns:minmax(0,2.08fr) minmax(350px,.97fr);gap:42px;align-items:start} .cart-items-column{min-width:0} .cart-table-wrap{width:100%;overflow-x:auto} .cart-table--editorial{table-layout:fixed} .cart-table--editorial th:nth-child(1),.cart-table--editorial td:nth-child(1){width:52%} .cart-table--editorial th:nth-child(2),.cart-table--editorial td:nth-child(2){width:12%} .cart-table--editorial th:nth-child(3),.cart-table--editorial td:nth-child(3){width:18%} .cart-table--editorial th:nth-child(4),.cart-table--editorial td:nth-child(4){width:14%} .cart-table--editorial th:nth-child(5),.cart-table--editorial td:nth-child(5){width:4%} .cart-table--editorial th{height:48px;padding:0 16px 16px 0;border-bottom:1px solid #ddded9;color:#5e6258;font-size:13px;font-weight:600;letter-spacing:.17em;text-transform:uppercase;vertical-align:bottom} .cart-table--editorial td{height:198px;padding:24px 16px 24px 0;border-bottom:1px solid #ddded9;font-size:14px;vertical-align:middle} .cart-table--editorial td:last-child{padding-right:0;text-align:right} .cart-table--editorial .cart-product{display:grid;grid-template-columns:148px minmax(0,1fr);gap:28px;align-items:center} .cart-product-image{display:block;width:148px;height:148px;overflow:hidden;border-radius:4px;background:#f3f1eb} .cart-table--editorial .cart-product-image img{display:block;width:100%;height:100%;object-fit:cover} .cart-product-copy{min-width:0} .cart-product-copy strong,.cart-product-copy span{display:block} .cart-product-copy strong{font-size:17px;font-weight:400;line-height:1.45} .cart-product-copy strong a{transition:color .2s ease} .cart-product-copy strong a:hover{color:#66704b} .cart-product-copy span{margin-top:10px;color:#898b86;font-size:12px;line-height:1.45} .cart-item-price,.cart-item-subtotal{white-space:nowrap} .cart-item-subtotal strong{font-weight:500} .cart-table--editorial .cart-item-qty{width:118px;height:50px;border-color:#d9dad5;border-radius:3px} .cart-table--editorial .cart-item-qty button{width:38px;font-size:16px} .cart-table--editorial .cart-item-qty input{width:36px;min-height:0;padding:0;font-size:14px} .cart-item-remove{display:inline-grid;place-items:center;width:28px;height:28px;color:#31352d;font-size:20px;font-weight:300;line-height:1} .cart-secondary-actions{display:flex;justify-content:flex-end;align-items:center;gap:18px;margin-top:14px;color:#6d7167;font-size:11px} .cart-secondary-actions a,.cart-secondary-actions button{padding:3px 0;border-bottom:1px solid #b7baaf} .cart-editorial-form>.cart-secondary-actions+.button{display:none} .cart-benefits{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));margin-top:70px} .cart-benefits>div{display:flex;min-height:86px;flex-direction:column;align-items:center;justify-content:center;gap:9px;padding:0 24px;text-align:center} .cart-benefits>div+div{border-left:1px solid #ddded9} .cart-benefits svg{width:30px;height:30px;fill:none;stroke:#626952;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round} .cart-benefits span{color:#656861;font-size:13px;line-height:1.45} .cart-summary{padding:28px 28px 25px;border-radius:7px;background:#fbfaf7;box-shadow:0 8px 30px rgba(52,53,43,.025)} .cart-summary h2{margin:0;padding:0 0 20px;border-bottom:1px solid #dfe0da;font-size:26px;font-weight:400;line-height:1.2} .cart-summary-subtotal{display:flex;align-items:center;justify-content:space-between;gap:20px;padding:22px 0 18px;font-size:14px} .cart-summary-subtotal strong{font-size:14px;font-weight:600;white-space:nowrap} .cart-summary-coupon{display:block;width:100%;padding:0 0 25px;border:0;border-bottom:1px solid #dfe0da} .cart-summary-coupon label{display:block;margin-bottom:8px;font-size:14px;font-weight:500} .cart-summary-coupon>div{display:grid;grid-template-columns:minmax(0,1fr) 104px;gap:10px} .cart-summary-coupon input{width:100%;min-height:47px;padding:0 15px!important;border:1px solid #d7d8d2!important;border-radius:999px;background:#fff!important;outline:none;font-size:13px} .cart-summary-coupon input:focus{border-color:#70785a!important} .cart-summary-coupon button{min-height:47px;border-radius:999px;background:var(--ink);color:#fff;font-size:13px;font-weight:500} .cart-summary-coupon button:hover{background:#000} .cart-summary-shipping{padding:22px 0 21px;border-bottom:1px solid #dfe0da} .cart-summary-shipping h3{margin:0 0 14px;font-size:14px;font-weight:600} .shipping-choice{display:grid;grid-template-columns:20px minmax(0,1fr) auto;gap:11px;align-items:start;padding:7px 2px;cursor:pointer} .shipping-choice input{position:absolute;width:1px!important;height:1px;min-height:0!important;opacity:0;pointer-events:none} .shipping-radio{display:grid;place-items:center;width:20px;height:20px;margin-top:1px;border:1px solid #bfc2b7;border-radius:50%;background:#fff} .shipping-choice input:checked+.shipping-radio:after{content:"";width:10px;height:10px;border-radius:50%;background:#66704d} .shipping-copy strong,.shipping-copy small{display:block} .shipping-copy strong{font-size:13px;font-weight:500;line-height:1.35} .shipping-copy small{margin-top:3px;color:#92948f;font-size:11px;line-height:1.35} .shipping-choice>b{font-size:13px;font-weight:500;white-space:nowrap} .cart-free-shipping-note{display:flex;align-items:center;gap:12px;min-height:48px;margin:20px 0 0;padding:10px 14px;border-radius:6px;background:#eff0e8;color:#687056;font-size:12px} .cart-free-shipping-note svg{width:24px;height:24px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round} .cart-summary-total{display:flex;align-items:center;justify-content:space-between;gap:20px;margin-top:20px;padding-top:20px;border-top:1px solid #dfe0da;font-size:22px} .cart-summary-total strong{font-size:23px;font-weight:400;white-space:nowrap} .cart-checkout-button{display:flex;align-items:center;justify-content:center;gap:13px;width:100%;min-height:58px;margin-top:20px;border-radius:999px;background:var(--ink);color:#fff;font-size:16px;transition:background .2s ease} .cart-checkout-button:hover{background:#000} .cart-summary-assurances{display:grid;grid-template-columns:1fr 1px 1fr;gap:14px;align-items:center;margin-top:19px;color:#888a84;font-size:11px} .cart-summary-assurances>span{display:flex;align-items:center;justify-content:center;gap:7px;white-space:nowrap} .cart-summary-assurances svg{width:23px;height:23px;fill:none;stroke:#626952;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round} .cart-summary-assurances>i{width:1px;height:25px;background:#d8d9d3} @media(max-width:1024px){ body.woocommerce-cart .page-shell{padding-top:40px;padding-bottom:40px} .cart-masthead{margin-bottom:38px} .cart-masthead h1{font-size:28px} .cart-editorial-layout{grid-template-columns:1fr;gap:42px} .cart-summary{max-width:620px;width:100%;margin-inline:auto} .cart-benefits{margin-top:44px} } @media(max-width:768px){ body.woocommerce-cart .page-shell{padding-top:20px;padding-bottom:56px} .cart-masthead{align-items:flex-start;margin-bottom:26px} .cart-masthead h1{font-size:24px} .cart-masthead p{margin-top:9px;font-size:10px;letter-spacing:.18em} .cart-masthead>a{margin-top:8px;font-size:11px} .cart-table--editorial,.cart-table--editorial tbody,.cart-table--editorial tr,.cart-table--editorial td{display:block;width:100%!important} .cart-table--editorial thead{display:none} .cart-table--editorial tr{position:relative;min-height:142px;padding:18px 38px 18px 0;border-bottom:1px solid #ddded9} .cart-table--editorial td{height:auto;padding:4px 0;border:0;font-size:13px} .cart-table--editorial td:last-child{position:absolute;right:0;top:14px;width:30px!important} .cart-table--editorial .cart-product{grid-template-columns:100px minmax(0,1fr);gap:15px;align-items:start} .cart-product-image{grid-row:1/5;width:100px;height:110px} .cart-product-copy strong{font-size:16px;line-height:1.3}.drawer-item h3{font-size:16px;line-height:1.3} .cart-product-copy span{display:none} .cart-item-price{margin:-68px 0 0 115px;color:#777} .cart-table--editorial td:has(.cart-item-qty){margin-left:115px;width:108px!important} .cart-table--editorial .cart-item-qty{width:106px;height:38px} .cart-table--editorial .cart-item-qty button{width:32px} .cart-item-subtotal{display:none!important} .cart-secondary-actions{margin-top:10px} .cart-benefits{gap:0;margin-top:36px} .cart-benefits>div{min-height:74px;padding:0 8px} .cart-benefits svg{width:25px;height:25px} .cart-benefits span{font-size:10px} .cart-summary{padding:23px 18px 21px} .cart-summary h2{font-size:24px} .cart-summary-coupon>div{grid-template-columns:minmax(0,1fr) 88px} .cart-summary-assurances{gap:8px;font-size:10px} } @media(max-width:768px){ .catalog{padding:38px 14px 44px} .catalog-intro{display:block;margin-bottom:20px;text-align:center}.catalog-eyebrow{margin-bottom:8px;font-size:10px}.catalog-intro h2{font-size:21px;line-height:1.18;letter-spacing:.3px} .catalog-carousel-meta{justify-content:space-between;margin-top:16px}.catalog-arrow{width:36px;height:36px}.catalog-carousel-meta>span{font-size:12px} .catalog-toolbar .tabs{flex-wrap:nowrap;overflow-x:auto;gap:21px;padding-bottom:3px}.catalog-toolbar .tabs a{min-height:36px;white-space:nowrap;font-size:13px}.catalog-toolbar .tabs a.active{padding:0 17px} .product-grid.home-product-track{grid-auto-columns:76%;gap:11px} .home-product-body{padding:13px 14px 14px}.home-product-body h3{min-height:40px;font-size:14px}.home-product-price{font-size:18px} .catalog-trust{grid-template-columns:repeat(2,minmax(0,1fr));margin-top:20px;padding-top:18px;row-gap:0}.catalog-trust-item,.catalog-trust-item:first-child,.catalog-trust-item:nth-child(3){min-height:78px;grid-template-columns:30px 1fr;gap:8px;padding:12px 10px;border-right:1px solid rgba(91,88,77,.18);border-bottom:1px solid rgba(91,88,77,.18)}.catalog-trust-item:nth-child(even){border-right:0}.catalog-trust-item:nth-child(n+3){border-bottom:0}.catalog-trust-item svg{width:27px;height:27px}.catalog-trust-item strong{font-size:11px}.catalog-trust-item span{font-size:10px} } /* Desktop floating header — translucent rounded panel over the page, while retaining the compact existing mobile header below 1025px. */ @media(min-width:1025px){ .site-header,.site-header.transparent{ position:absolute; top:clamp(22px,3.4vh,34px); left:clamp(32px,3.2vw,54px); width:calc(100% - clamp(64px,6.4vw,108px)); height:88px; padding:0 clamp(28px,2.6vw,44px); border:1px solid rgba(255,255,255,.56); border-radius:23px; background:rgba(255,255,255,.86); box-shadow:0 18px 48px rgba(54,45,34,.08); -webkit-backdrop-filter:blur(18px) saturate(115%); backdrop-filter:blur(18px) saturate(115%); } .site-header.transparent.transparent-hover{transition:transform .25s linear,background-color .25s,box-shadow .25s,top .25s} .site-header.transparent.transparent-hover:hover{background:rgba(255,255,255,.94)} .header-sticky--smart.headroom--not-top,.header-sticky--smart.headroom--not-top.transparent{ position:fixed; top:12px; left:clamp(32px,3.2vw,54px); width:calc(100% - clamp(64px,6.4vw,108px)); background:rgba(250,248,244,.92); box-shadow:0 14px 38px rgba(40,34,27,.12); } .header-sticky--smart.headroom--not-top.headroom--unpinned,.header-sticky--smart.headroom--not-top.headroom--unpinned.transparent{ transform:translateY(calc(-100% - 12px)); } .main-nav{gap:clamp(22px,2vw,34px);height:100%;align-items:center} .main-nav a{position:relative;display:flex;align-items:center;height:100%;font-size:15px;font-weight:500;white-space:nowrap} .main-nav a:after{content:"";position:absolute;left:0;right:0;bottom:28px;height:1px;background:#23231f;transform:scaleX(0);transform-origin:left;transition:transform .2s} .main-nav a:hover:after,.main-nav a.active:after{transform:scaleX(1)} .site-header .brand{font-size:28px;font-weight:500;letter-spacing:9px} .header-actions{gap:19px} .header-actions .signin{order:2;font-size:13px;font-weight:500;white-space:nowrap} .header-actions [aria-label="Search"]{order:1} .header-actions .header-wishlist{order:3} .header-actions #cart-toggle{order:4} .header-actions .icon-btn svg,.header-actions .icon-with-count svg{width:21px;height:21px;stroke-width:1.8} .header-actions #cart-toggle{gap:9px} .header-actions #cart-count{width:21px;height:21px;font-size:10px;line-height:21px} .site-header-space{height:120px} } /* Mobile floating header — compact glass panel based on the supplied phone reference. */ .signin-icon{display:none;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round} @media(max-width:768px){ .site-header,.site-header.transparent{ position:absolute; top:10px; left:10px; width:calc(100% - 20px); height:56px; padding:0 14px; grid-template-columns:1fr auto 1fr; border:1px solid rgba(255,255,255,.58); border-radius:18px; background:rgba(255,255,255,.9); box-shadow:none; -webkit-backdrop-filter:blur(16px) saturate(115%); backdrop-filter:blur(16px) saturate(115%); } .header-sticky--smart.headroom--not-top,.header-sticky--smart.headroom--not-top.transparent{ position:fixed; top:8px; left:10px; width:calc(100% - 20px); background:rgba(250,248,244,.94); box-shadow:none; } .header-sticky--smart.headroom--not-top.headroom--unpinned,.header-sticky--smart.headroom--not-top.headroom--unpinned.transparent{ transform:translateY(calc(-100% - 8px)); } .site-header>.brand{font-size:23px;font-weight:500;letter-spacing:7px} .mobile-menu{width:24px;height:22px;gap:5px} .hamburger-bar{width:24px;height:2px;border-radius:2px} .header-actions{gap:12px} .header-actions .signin{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1px;font-size:10px;font-weight:500;line-height:1.1;white-space:nowrap} .header-actions .signin-icon{display:block;width:22px;height:22px} .header-actions #cart-toggle{position:relative;display:flex;width:25px;height:30px;align-items:center;justify-content:center} .header-actions #cart-toggle svg{width:24px;height:24px;stroke-width:1.65} .header-actions #cart-count{position:absolute;top:2px;right:3px;width:16px;height:16px;font-size:8px;line-height:16px;border:1px solid rgba(250,248,244,.95)} .site-header-space{height:72px} } /* Editorial footer — spacious newsletter, assurance row and brand navigation. */ .site-footer-newsletter{border-top:1px solid #e4dfd8;background:#fff;padding:74px 24px 52px;text-align:center} .site-footer-newsletter-inner{max-width:900px;margin:0 auto} .site-footer-newsletter h2{margin:0 0 12px;font-size:clamp(26px,2.4vw,34px);font-weight:400;line-height:1.2;letter-spacing:.5px;color:#171715;text-transform:uppercase} .site-footer-newsletter p{margin:0;color:#5f5b57;font-size:16px;letter-spacing:1.1px} .site-footer-newsletter form{max-width:760px;height:66px;margin:30px auto 13px;padding:7px;border:1px solid #cfc7bd;border-radius:36px;background:rgba(255,255,255,.7);display:flex;align-items:center;box-shadow:inset 0 1px 4px rgba(73,61,51,.04)} .site-footer-newsletter form:focus-within{border-color:#8e8379;box-shadow:0 0 0 3px rgba(142,131,121,.1)} .site-footer-newsletter input{min-width:0;flex:1;height:100%;padding:0 30px;border:0;outline:0;background:transparent;color:#262320;font-size:16px;letter-spacing:.6px} .site-footer-newsletter input::placeholder{color:#938d87;opacity:1} .site-footer-newsletter button{height:50px;min-width:205px;padding:0 29px;border-radius:28px;background:var(--ink);color:#fff;display:flex;align-items:center;justify-content:center;gap:18px;font-size:11px;font-weight:500;letter-spacing:1.9px;text-transform:uppercase;transition:background-color .2s,transform .2s} .site-footer-newsletter button:hover{background:#000;transform:translateY(-1px)} .site-footer-newsletter button svg{width:23px;height:23px;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round} .site-footer-newsletter small{display:block;color:#7f7973;font-size:12px;letter-spacing:.7px} .footer-promises{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));min-height:154px;border-top:1px solid #d9d2ca;border-bottom:1px solid #d9d2ca;background:#fff;padding:24px clamp(28px,6vw,95px)} .footer-promise{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:0 28px;color:#59524c} .footer-promise:not(:last-child):after{content:"";position:absolute;right:0;top:16%;width:1px;height:68%;background:#d9d2ca} .footer-promise svg{width:36px;height:36px;margin-bottom:9px;fill:none;stroke:currentColor;stroke-width:1.55;stroke-linecap:round;stroke-linejoin:round} .footer-promise strong{font-size:12px;font-weight:500;letter-spacing:3px;text-transform:uppercase;color:#393531} .footer-promise span{margin-top:5px;color:#77716c;font-size:12px;letter-spacing:.55px} .site-footer{min-height:0;border:0;background:#fff;display:block;padding:0;color:#4d4945;font-size:14px} .site-footer-main{min-height:122px;padding:22px clamp(42px,5.4vw,88px);display:grid;grid-template-columns:1fr auto 1fr;align-items:center;border-bottom:1px solid #d9d2ca} .site-footer-brand{justify-self:start;display:flex;flex-direction:column;align-items:center;color:#171715} .site-footer-brand strong{font-size:27px;line-height:1;letter-spacing:9px;font-weight:500;font-family:"Josefin Sans",Arial,sans-serif} .site-footer-brand span{margin-top:9px;font-size:9px;letter-spacing:3px;text-transform:uppercase} .site-footer nav{display:flex;align-items:center;gap:28px} .site-footer nav a{font-size:14px;transition:color .2s} .site-footer nav a:hover{color:#000} .site-footer .socials{justify-self:end;display:flex;align-items:center;gap:20px} .site-footer .socials a{display:flex;color:#222} .site-footer .socials svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round} .site-footer-bottom{min-height:68px;padding:0 clamp(42px,5.4vw,88px);display:flex;align-items:center;justify-content:space-between;color:#77716c;font-size:12px;letter-spacing:.35px} .site-footer-secure{display:flex;align-items:center;gap:8px} .site-footer-secure svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round} @media(max-width:1024px){ .footer-promises{grid-template-columns:repeat(2,1fr);padding:16px 28px}.footer-promise{min-height:132px}.footer-promise:nth-child(2):after{display:none}.footer-promise:nth-child(-n+2){border-bottom:1px solid #d9d2ca} .site-footer-main{grid-template-columns:1fr;gap:24px;padding-top:34px;padding-bottom:34px;text-align:center}.site-footer-brand,.site-footer .socials{justify-self:center}.site-footer nav{justify-content:center;flex-wrap:wrap} } @media(max-width:768px){ .site-footer-newsletter{padding:52px 18px 36px}.site-footer-newsletter h2{max-width:340px;margin-left:auto;margin-right:auto;font-size:22px;line-height:1.25;letter-spacing:.3px}.site-footer-newsletter p{max-width:325px;margin-left:auto;margin-right:auto;font-size:13px;line-height:1.55} .site-footer-newsletter form{height:58px;margin-top:23px;padding:5px}.site-footer-newsletter input{padding:0 15px;font-size:13px}.site-footer-newsletter button{height:46px;min-width:130px;width:auto;padding:0 16px;border-radius:25px;gap:9px;font-size:9px;letter-spacing:1.4px}.site-footer-newsletter button span{display:inline}.site-footer-newsletter button svg{width:17px;height:17px}.site-footer-newsletter small{font-size:10px} .footer-promises{grid-template-columns:repeat(2,minmax(0,1fr));padding:0 16px}.footer-promise{min-height:140px;padding:18px 7px;border-bottom:0}.footer-promise:nth-child(-n+2){border-bottom:1px solid #d9d2ca}.footer-promise:nth-child(odd):after{display:block;top:18%;height:64%}.footer-promise:nth-child(even):after{display:none}.footer-promise:last-child{border-bottom:0}.footer-promise svg{width:34px;height:34px;margin-bottom:10px}.footer-promise strong{font-size:9px;line-height:1.4;letter-spacing:1.7px}.footer-promise span{max-width:140px;font-size:10px;line-height:1.45;letter-spacing:.3px} .site-footer-main{padding:32px 17px 24px;gap:0}.site-footer-brand{margin-bottom:22px}.site-footer-brand strong{font-size:26px;letter-spacing:8px}.site-footer-brand span{font-size:7px;letter-spacing:2.2px} .site-footer nav{width:100%;flex-direction:column;align-items:stretch;gap:0;border-top:1px solid #d9d2ca}.site-footer nav a{width:100%;min-height:48px;display:flex;align-items:center;text-align:left;border-bottom:1px solid #d9d2ca;font-size:14px}.site-footer nav a:after{content:"";width:7px;height:7px;margin-left:auto;margin-right:4px;border-right:1.3px solid currentColor;border-bottom:1.3px solid currentColor;transform:rotate(45deg) translateY(-2px)} .site-footer .socials{margin-top:26px;gap:26px}.site-footer .socials svg{width:20px;height:20px;stroke-width:1.8} .site-footer-bottom{min-height:104px;padding:20px 22px 23px;flex-direction:column-reverse;justify-content:center;gap:13px;text-align:center}.site-footer-secure{padding:7px 13px;border:1px solid #d9d2ca;border-radius:5px;color:#5e5852} } /* Hero entrance animation on page load — label, heading, then button fade up in sequence, matching the reference site feel (plain CSS keyframes, not copied code). */ @keyframes hero-fade-up{from{opacity:0;transform:translateY(50px)}to{opacity:1;transform:translateY(0)}} .hero-copy small{animation:hero-fade-up 2s cubic-bezier(.65,0,.35,1) both} .hero-copy h1{animation:hero-fade-up 2s cubic-bezier(.65,0,.35,1) .2s both} .hero-copy .outline-btn{animation:hero-fade-up 2s cubic-bezier(.65,0,.35,1) .6s both} /* Site-wide layout and type system — one 1280px content axis from header to footer. */ :root{ --site-container:1280px; --site-gutter:32px; --site-section-y:72px; --site-grid-gap:24px; --type-body:16px; --type-small:12px; --type-label:13px; --type-h1:clamp(38px,3vw,52px); --type-h2:clamp(30px,2.4vw,40px); --type-h3:clamp(22px,1.6vw,28px); --type-h4:20px; --type-h5:18px; --type-h6:16px; } html{font-size:16px} body{font-size:var(--type-body);line-height:1.6} h1,h2,h3,h4,h5,h6{color:var(--ink);font-weight:500;line-height:1.18;letter-spacing:-.025em} h1{font-size:var(--type-h1)} h2{font-size:var(--type-h2)} h3{font-size:var(--type-h3)} h4{font-size:var(--type-h4)} h5{font-size:var(--type-h5)} h6{font-size:var(--type-h6)} p{margin-top:0} small,.meta,.crumbs,time{font-size:var(--type-small)} label,.catalog-eyebrow{font-size:var(--type-label)} input,select,textarea{font-size:16px} .site-container{width:calc(100% - var(--site-gutter) - var(--site-gutter));max-width:var(--site-container);margin-inline:auto} .outline-btn,.add-btn,.checkout-btn,.single_add_to_cart_button,#place_order{min-height:44px} .outline-btn,.add-btn,.checkout-btn,.single_add_to_cart_button,#place_order,.drawer-actions button:last-child,.drawer-actions a:last-child,.signup-widget>button,.reply>button,#respond #submit,.pagination button{border-radius:999px} .outline-btn{display:inline-flex;align-items:center;justify-content:center} /* The panel stays decorative; its contents align with the same 1280px page grid. */ @media(min-width:1025px){ .site-header,.site-header.transparent{ left:max(16px,calc((100% - var(--site-container))/2)); width:min(calc(100% - 32px),var(--site-container)); padding-inline:max(24px,calc((100vw - var(--site-container))/2 - max(16px,calc((100vw - var(--site-container))/2)))); } .header-sticky--smart.headroom--not-top,.header-sticky--smart.headroom--not-top.transparent{ left:max(16px,calc((100% - var(--site-container))/2)); width:min(calc(100% - 32px),var(--site-container)); padding-inline:max(24px,calc((100vw - var(--site-container))/2 - max(16px,calc((100vw - var(--site-container))/2)))); } .main-nav{gap:clamp(20px,1.8vw,30px)} .main-nav a{font-size:15px} .site-header .brand{font-size:27px} } /* Full-bleed hero, with copy and controls on the shared content axis. */ .hero{margin-inline:0} .hero-copy{left:max(var(--site-gutter),calc((100% - var(--site-container))/2));max-width:390px} .hero-copy h1{font-size:clamp(48px,4vw,60px);line-height:1.02} .hero-dots{right:max(var(--site-gutter),calc((100% - var(--site-container))/2))} /* Homepage catalogue: 4 useful cards across, without nested visual frames. */ .catalog{padding:var(--site-section-y) max(var(--site-gutter),calc((100% - var(--site-container))/2)) 64px} .catalog-intro,.catalog-toolbar,.home-product-viewport,.catalog-trust{max-width:var(--site-container)} .catalog-intro h2{font-size:clamp(22px,1.6vw,28px);line-height:1.15;letter-spacing:.03em} .catalog-toolbar{margin-bottom:24px} .catalog-toolbar .tabs a{font-size:14px} .catalog-arrow{width:44px;height:44px} .product-grid.home-product-track{grid-auto-columns:calc((100% - 72px)/4);gap:var(--site-grid-gap)} .home-product-card{border-radius:12px;box-shadow:0 8px 24px rgba(69,60,44,.055)} .home-product-image{aspect-ratio:1/1;background:#f4f2ed} .home-product-image img{object-fit:contain} .home-product-body{padding:13px 14px 14px} .home-product-body h3{min-height:42px;font-size:15px;line-height:1.4;letter-spacing:0} .home-product-price{font-size:18px} .home-product-price del{font-size:13px} .home-product-wishlist{width:40px;height:40px} .catalog-trust-item strong{font-size:13px}.catalog-trust-item span{font-size:11px} /* All catalogue, content, product, cart, checkout and editorial pages use the same frame. */ .shop-page,.product-page,.page-shell,.blog-page,.article-page,div.checkout{ width:calc(100% - var(--site-gutter) - var(--site-gutter)); max-width:var(--site-container); margin-inline:auto; padding-left:0; padding-right:0; } .shop-page{padding-top:40px;padding-bottom:40px;min-height:0} .shop-heading{margin:0 0 48px} .shop-heading h1{font-size:var(--type-h2)} .shop-finder{margin-bottom:52px;font-size:22px} .shop-finder button{min-width:145px;font-size:22px} .shop-finder button:last-child{min-width:190px} .shop-toolbar{margin-bottom:32px;font-size:13px} .shop-page .product-grid{grid-template-columns:repeat(4,minmax(0,1fr));gap:56px var(--site-grid-gap)} .shop-page .product-card,.related .product-card{padding:0;margin:0} .shop-page .product-image,.related .product-image{height:auto;aspect-ratio:1/1;background:#f4f2ed} .shop-page .product-image img,.related .product-image img{object-fit:contain} .shop-page .product-card h3,.related .product-card h3{margin:14px 0 5px;padding:0;font-size:15px;line-height:1.4;letter-spacing:0} .shop-page .price,.related .price{padding:0;font-size:14px} .shop-page .card-actions,.related .card-actions{left:0;right:0} .shop-page .badge,.related .badge{right:10px;top:10px;width:48px;height:48px;font-size:10px} .load-more{width:96px;height:96px;margin-top:72px} .product-page{padding-top:48px} .product-main{grid-template-columns:minmax(0,1.15fr) minmax(360px,.85fr);gap:64px} .gallery{grid-template-columns:84px 1fr;gap:24px}.thumb{width:72px;height:72px} .main-product-image{height:min(52vw,560px)} .crumbs{margin-bottom:48px} .product-info h1{font-size:36px;line-height:1.15;letter-spacing:-.03em} .desc{font-size:15px;line-height:1.7} .detail-price{font-size:30px} .product-details{margin-top:56px;padding:44px 0 64px;grid-template-columns:240px 1fr;gap:32px} .product-details nav button{font-size:16px} .product-details [data-tab-panel]{font-size:16px;line-height:1.75} .related{padding:12px 0 40px}.related h2{font-size:28px;font-weight:400;line-height:1.08;letter-spacing:-.035em;margin-bottom:32px} .related .product-grid{gap:var(--site-grid-gap)} .sticky-add-bar{padding-inline:max(var(--site-gutter),calc((100% - var(--site-container))/2))} .sticky-add-bar-inner{max-width:var(--site-container)} .page-shell{padding-top:48px;padding-bottom:80px} .page-title{font-size:48px;line-height:1.1;margin:0 0 40px} .entry-content{max-width:780px;margin-inline:auto;font-size:16px;line-height:1.75} .entry-content h2{margin:2em 0 .7em;font-size:32px}.entry-content h3{margin:1.7em 0 .65em;font-size:25px} .entry-content h4{font-size:20px}.entry-content h5{font-size:18px}.entry-content h6{font-size:16px} .entry-content p,.entry-content li{font-size:16px;line-height:1.75} .entry-content input,.entry-content select,.entry-content textarea{width:100%;min-height:48px;padding:11px 13px} .cart-table th{font-size:12px}.cart-table td{font-size:16px} .cart-product{gap:20px}.cart-product img{width:96px;height:120px} .cart-totals{padding:28px 32px 34px}.total-line{padding:20px 0} div.checkout{padding-top:48px;padding-bottom:80px} form.checkout{width:100%;max-width:none} .checkout h1{font-size:48px} .form-section h2,.order-box h2,.billing h3{font-size:32px} .field label{font-size:15px}.order-row{font-size:15px} .blog-page{padding-top:56px;padding-bottom:80px} .blog-masthead{margin-bottom:48px}.blog-masthead h1{font-size:40px} .blog-hero{height:min(52vw,620px)}.blog-hero h2{font-size:40px} .featured-section{padding:56px 0}.featured-section>h2{font-size:32px} .blog-content{padding:56px 0 0}.blog-feed-item h2{font-size:28px} .article-page{padding-top:56px}.article-cover{height:min(55vw,650px)} .article-body header h1{font-size:48px}.article-body>p{font-size:17px;line-height:1.85} /* Footer bands remain full width while every content row follows the same axis. */ .site-footer-newsletter{padding:64px var(--site-gutter) 46px} .site-footer-newsletter-inner{max-width:760px} .site-footer-newsletter h2{font-size:28px} .site-footer-newsletter p{font-size:15px;line-height:1.55} .site-footer-newsletter form{max-width:720px;height:60px;margin-top:26px} .site-footer-newsletter button{height:46px;min-width:184px} .footer-promises,.site-footer-main,.site-footer-bottom{ padding-left:max(var(--site-gutter),calc((100% - var(--site-container))/2)); padding-right:max(var(--site-gutter),calc((100% - var(--site-container))/2)); } .footer-promises{min-height:144px} .footer-promise{padding-inline:20px}.footer-promise strong{font-size:11px}.footer-promise span{font-size:11px} .site-footer-main{min-height:112px}.site-footer-brand strong{font-size:25px}.site-footer nav a{font-size:13px} .site-footer-bottom{min-height:64px} @media(max-width:1024px){ :root{--site-gutter:24px;--site-section-y:56px;--site-grid-gap:20px} .site-header,.site-header.transparent,.header-sticky--smart.headroom--not-top,.header-sticky--smart.headroom--not-top.transparent{left:12px;width:calc(100% - 24px);padding-inline:calc(var(--site-gutter) - 12px)} .hero-copy{left:var(--site-gutter)}.hero-dots{right:var(--site-gutter)} .shop-page .product-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:44px var(--site-grid-gap)} .product-main{grid-template-columns:1fr;gap:36px}.main-product-image{height:min(70vw,600px)} .product-details{grid-template-columns:1fr}.product-details>div{border-left:0;padding-left:0} .footer-promises,.site-footer-main,.site-footer-bottom{padding-left:var(--site-gutter);padding-right:var(--site-gutter)} } @media(max-width:768px){ :root{--site-gutter:16px;--site-section-y:44px;--site-grid-gap:12px;--type-h1:36px;--type-h2:30px;--type-h3:23px} body{font-size:15px} .site-header,.site-header.transparent,.header-sticky--smart.headroom--not-top,.header-sticky--smart.headroom--not-top.transparent{top:8px;left:8px;width:calc(100% - 16px);height:56px;padding-inline:8px} .mobile-menu,.header-actions .signin,.header-actions #cart-toggle{min-width:44px;min-height:44px} .mobile-menu{width:44px;height:44px;align-items:flex-start;padding-left:6px} .header-actions{gap:2px}.header-actions .signin{font-size:10px}.header-actions #cart-toggle{width:44px;height:44px} .site-header>.brand{font-size:22px} .site-header-space{height:72px} .hero-copy{left:var(--site-gutter);max-width:58%} .hero-copy h1{font-size:clamp(28px,9vw,38px);line-height:1.06;margin:12px 0 18px} .hero-copy small{font-size:10px}.hero-dots{right:var(--site-gutter)} .catalog{padding:var(--site-section-y) 8px 44px} .catalog-intro h2{font-size:21px} .catalog-carousel-controls{display:none}.catalog-carousel-meta{margin-top:12px} .catalog-toolbar{margin-bottom:20px}.catalog-toolbar .tabs{gap:20px;scrollbar-width:none} .catalog-toolbar .tabs::-webkit-scrollbar{display:none} .home-product-viewport{overflow:visible;scroll-snap-type:none} .product-grid.home-product-track{grid-template-columns:repeat(2,minmax(0,1fr));grid-auto-flow:row;grid-auto-columns:auto;gap:8px} .home-product-card{border-radius:9px;box-shadow:0 6px 18px rgba(69,60,44,.05)} .home-product-body{padding:11px 10px 10px}.home-product-body h3{min-height:39px;font-size:13px;line-height:1.45} .home-product-rating{gap:4px;font-size:10px}.home-product-rating .star-rating{width:69px}.home-product-rating .star-rating:before,.home-product-rating .star-rating span:before{font-size:14px;letter-spacing:0} .home-product-price{min-height:25px;font-size:17px;gap:5px}.home-product-price del{font-size:11px} .home-product-add{font-size:10px} .home-product-badge{left:8px;top:8px;min-height:26px;padding:0 8px;font-size:9px}.home-product-wishlist{right:7px;top:7px;width:36px;height:36px} .catalog-trust{margin-top:28px}.catalog-trust-item strong{font-size:10px}.catalog-trust-item span{font-size:9px} .shop-page,.product-page,.page-shell,.blog-page,.article-page,div.checkout{width:calc(100% - 32px)} .shop-page{padding-top:36px;padding-bottom:36px}.shop-heading{margin-bottom:32px}.shop-heading h1{font-size:30px}.shop-heading span{font-size:10px} .shop-finder{gap:8px;margin-bottom:36px;font-size:16px}.shop-finder button{min-width:105px;font-size:16px}.shop-finder button:last-child{min-width:145px} .shop-toolbar{align-items:flex-start;margin-bottom:24px;gap:16px}.shop-toolbar>div{gap:10px}.shop-toolbar>div span{margin-right:0} .shop-page .product-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:32px var(--site-grid-gap)} .shop-page .product-card h3,.related .product-card h3{font-size:13px;line-height:1.45}.shop-page .price,.related .price{font-size:13px} .shop-page .badge,.related .badge{width:40px;height:40px;font-size:9px} .product-page{padding-top:28px}.main-product-image{height:auto;aspect-ratio:1/1}.product-info h1{font-size:30px}.crumbs{margin-bottom:24px} .product-details{margin-top:40px;padding:36px 0 48px;gap:24px}.product-details nav{flex-direction:row;gap:18px;overflow-x:auto}.product-details nav button{font-size:14px;white-space:nowrap}.product-details [data-tab-panel]{font-size:15px;line-height:1.7} .related{padding-bottom:36px}.related h2{font-size:22px;margin-bottom:24px}.related .product-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px} .sticky-add-bar{padding:10px var(--site-gutter)} .page-shell{padding-top:36px;padding-bottom:56px}.page-title{font-size:36px;margin-bottom:28px;text-align:left} .page-shell,div.checkout.checkout-editorial{width:calc(100% - 16px);padding-top:0} .entry-content,.entry-content p,.entry-content li{font-size:15px;line-height:1.72}.entry-content h2{font-size:28px}.entry-content h3{font-size:22px} .cart-table td{font-size:14px}.cart-product img{width:64px;height:82px}.cart-totals{padding:20px 18px;margin-bottom:56px} div.checkout{padding-top:36px;padding-bottom:56px}.checkout.checkout-editorial{padding:36px 0}.checkout h1{font-size:36px}.form-section h2,.order-box h2,.billing h3{font-size:26px}.field label,.order-row{font-size:14px} .blog-page{padding-top:36px;padding-bottom:56px}.blog-masthead h1{font-size:30px}.blog-hero{height:480px}.blog-hero h2{font-size:30px} .article-page{padding-top:36px}.article-body header h1{font-size:36px}.article-body>p{font-size:16px} .site-footer-newsletter{padding:44px 8px 34px}.site-footer-newsletter h2{font-size:22px}.site-footer-newsletter p{font-size:13px} .site-footer-newsletter form{height:56px;margin-top:22px}.site-footer-newsletter input{font-size:16px}.site-footer-newsletter button{height:44px;min-width:126px;padding-inline:14px} .footer-promises{min-height:0;padding-inline:8px}.footer-promise{min-height:120px;padding:14px 7px}.footer-promise svg{width:30px;height:30px}.footer-promise strong{font-size:9px}.footer-promise span{font-size:9px} .site-footer-main{padding:28px var(--site-gutter) 22px}.site-footer-brand{margin-bottom:18px}.site-footer nav a{min-height:44px;font-size:13px} .site-footer .socials{margin-top:22px}.site-footer .socials a{width:44px;height:44px;align-items:center;justify-content:center}.site-footer-bottom{min-height:96px;padding:16px var(--site-gutter) 20px;font-size:11px} } @media(max-width:420px){ .hero{min-height:500px;aspect-ratio:auto}.hero-slide img{object-fit:cover;object-position:62% center} .hero-copy{top:38%;max-width:68%}.hero-copy h1{font-size:32px} .catalog-toolbar .tabs a{font-size:12px}.catalog-toolbar .tabs a.active{padding-inline:13px} .home-product-body{padding-inline:8px}.home-product-body h3{font-size:12px}.home-product-price{font-size:16px} .shop-finder{display:none}.shop-toolbar{font-size:11px} .site-footer-newsletter button span{display:none}.site-footer-newsletter button{min-width:52px;width:52px} } /* Product detail hero — editorial commerce layout based on the supplied reference. */ html,body{overflow-x:clip} .product-page--editorial{ width:calc(100% - var(--site-gutter) - var(--site-gutter)); max-width:var(--site-container); padding-top:40px; } .product-crumbs{ display:flex; align-items:center; gap:12px; margin:0 0 28px; color:#8b8e88; font-size:14px; line-height:1.4; } .product-crumbs a{transition:color .2s ease}.product-crumbs a:hover{color:#3f472e} .product-crumbs strong{font-weight:400;color:#777b74} .product-page--editorial .product-main{ grid-template-columns:minmax(0,1fr) minmax(420px,1fr); gap:48px; align-items:start; } .product-page--editorial .gallery{ display:grid; grid-template-columns:84px minmax(0,1fr); gap:20px; align-items:start; } .product-page--editorial .thumbs{ display:flex; flex-direction:column; align-items:center; gap:16px; } .product-page--editorial .thumb{ display:block; width:72px; height:72px; padding:0; border:2px solid transparent; border-radius:10px; overflow:hidden; background:#f4f1eb; transition:border-color .2s ease,transform .2s ease; } .product-page--editorial .thumb:hover{transform:translateY(-1px)} .product-page--editorial .thumb.active{border-color:#737c55} .product-page--editorial .thumb img{display:block;width:100%;height:100%;object-fit:cover} .gallery-more{ display:grid; place-items:center; width:44px; height:44px; margin-top:4px; border:1px solid #d9dad3; border-radius:50%; color:#2c3125; } .gallery-more svg{width:21px;height:21px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round} .main-product-stage{ position:relative; aspect-ratio:1/1; overflow:hidden; border-radius:12px; background:#f4f1eb; } .product-page--editorial .main-product-image{display:block;width:100%;height:100%;object-fit:cover} .product-page--editorial .product-info{max-width:none;padding-top:8px} .product-kicker{ margin:0 0 14px; color:#68704d; font-size:13px; font-weight:600; letter-spacing:.28em; text-transform:uppercase; } .product-page--editorial .product-info h1{ max-width:620px; margin:0 0 16px; font-size:clamp(22px,1.6vw,28px); font-weight:400; line-height:1.08; letter-spacing:-.035em; } .product-page--editorial .desc{ max-width:590px; margin:0; color:#373a34; font-size:16px; line-height:1.58; } .product-page--editorial .rating{ display:flex; align-items:center; gap:14px; margin:24px 0 28px; color:#777b74; font-size:14px; } .product-page--editorial .rating-stars{color:#f5a623;font-size:21px;font-weight:400;letter-spacing:1px;line-height:1} .product-page--editorial .rating .rating-score{margin-left:2px;color:#777b74;font-size:14px} .rating-divider{width:1px;height:24px;background:#d9d9d3} .product-page--editorial .rating span:last-child{margin-left:0;color:#777b74;font-size:14px} .product-price-row{display:flex;align-items:center;gap:20px;min-height:50px} .product-page--editorial .detail-price{display:flex;align-items:baseline;gap:11px;font-size:30px;line-height:1;color:#3f472e} .product-page--editorial .detail-price del{order:-1;margin:0;color:#8f918d;font-size:18px;font-weight:400} .product-page--editorial .detail-price, .product-page--editorial .detail-price .amount, .product-page--editorial .detail-price bdi, .product-page--editorial .detail-price ins{font-weight:600} .product-page--editorial .detail-price del, .product-page--editorial .detail-price del .amount, .product-page--editorial .detail-price del bdi{font-weight:400} .product-page--editorial .detail-price ins{text-decoration:none} .sale-saving{display:inline-flex;align-items:center;justify-content:center;min-height:38px;padding:0 17px;border-radius:999px;background:#edf0df;color:#56603e;font-size:13px;font-weight:600;white-space:nowrap} .product-page--editorial .buy-row{display:grid;grid-template-columns:160px minmax(250px,1fr);gap:18px;margin:32px 0 0} .product-page--editorial .qty{width:100%;height:51px;border-color:#d8d9d3;border-radius:14px;font-size:16px} .product-page--editorial .qty button{min-width:48px;min-height:40px;font-size:18px} .product-page--editorial .add-btn{ width:100%; height:51px; gap:14px; padding:0 28px; border-radius:14px; background:var(--ink); font-size:14px; font-weight:500; letter-spacing:.08em; } .product-page--editorial .add-btn:hover{background:#000} .product-page--editorial .add-btn svg{width:23px;height:23px;fill:none;stroke:currentColor;stroke-width:1.65;stroke-linecap:round;stroke-linejoin:round} .product-page--editorial .product-links{ dis:grid; grid-template-columns:1fr 1px 1fr; align-items:center; gap:24px; margin:20px 0 0; padding:14px 0 22px; border-bottom:1px solid #dedfd9; } .product-page--editorial .product-links button{display:flex;align-items:center;justify-content:center;gap:11px;min-height:44px;font-size:12px;font-weight:600;text-transform:uppercase} .product-page--editorial .product-links svg{width:23px;height:23px;fill:none;stroke:currentColor;stroke-width:1.65;stroke-linecap:round;stroke-linejoin:round} .product-link-divider{width:1px;height:34px;background:#dedfd9} .product-assurances{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;padding:26px 0 28px} .product-assurance{display:grid;grid-template-columns:40px 1fr;align-items:center;gap:10px;min-width:0} .product-assurance svg{width:34px;height:34px;fill:none;stroke:#242820;stroke-width:1.65;stroke-linecap:round;stroke-linejoin:round} .product-assurance strong,.product-assurance span{display:block} .product-assurance strong{font-size:13px;font-weight:600;line-height:1.25} .product-assurance span{margin-top:4px;color:#777b74;font-size:11px;line-height:1.3} .thoughtful-divider{display:grid;grid-template-columns:1fr auto auto 1fr;align-items:center;gap:14px;color:#78805f} .thoughtful-divider>span{height:1px;background:#ccd0bd} .thoughtful-divider b{font-size:26px;font-weight:400;transform:rotate(-24deg)} .thoughtful-divider em{font-size:10px;font-style:normal;font-weight:600;letter-spacing:.2em;text-transform:uppercase;white-space:nowrap} .gallery-counter,.mobile-product-accordions{display:none} @media(max-width:1024px){ .product-page--editorial .product-main{grid-template-columns:1fr;gap:36px} .product-page--editorial .gallery{grid-template-columns:84px minmax(0,1fr)} .product-page--editorial .thumb{width:72px;height:72px} .product-page--editorial .product-info{max-width:720px;margin-inline:auto;width:100%} .product-page--editorial .product-info h1{max-width:680px} .product-page--editorial .desc{font-size:16px} } @media(max-width:768px){ .product-page--editorial{width:calc(100% - 16px);padding-top:0} .product-crumbs{gap:7px;margin-bottom:10px;font-size:11px;overflow:hidden;white-space:nowrap} .product-crumbs strong{overflow:hidden;text-overflow:ellipsis} .product-page--editorial .product-main{gap:14px;padding-bottom:0} .product-page--editorial .gallery{display:flex;flex-direction:column;gap:8px} .product-page--editorial .main-product-stage{order:1;aspect-ratio:1.18/1;border-radius:10px} .product-page--editorial .main-product-image{object-fit:cover;object-position:center} .product-page--editorial .thumbs{display:flex;order:2;flex-direction:row;align-items:center;gap:8px;overflow-x:auto;padding:1px 0 2px;scrollbar-width:none} .product-page--editorial .thumbs::-webkit-scrollbar{display:none} .product-page--editorial .thumb{flex:0 0 64px;width:64px;height:64px;border-width:1px;border-radius:7px} .product-page--editorial .gallery-more{display:none} .gallery-counter{position:absolute;right:10px;bottom:10px;display:flex;align-items:center;gap:7px;min-height:31px;padding:0 8px;border:1px solid rgba(255,255,255,.65);border-radius:999px;background:rgba(250,250,246,.92);color:#42473a;font-size:11px;box-shadow:0 4px 14px rgba(35,36,31,.08);backdrop-filter:blur(6px)} .gallery-counter button{display:grid;place-items:center;width:24px;height:24px;padding:0;font-size:20px;line-height:1} .gallery-counter b{font-weight:600} .product-page--editorial .product-info{max-width:none;margin:0;padding:18px 0 14px;border-radius:0;background:transparent} .product-kicker{margin-bottom:8px;font-size:10px;letter-spacing:.25em} .product-page--editorial .product-info h1{font-size:21px;line-height:1.12;margin-bottom:10px} .product-page--editorial .desc{font-size:14px;line-height:1.42} .product-page--editorial .rating{gap:9px;margin:13px 0 15px;font-size:11px;white-space:nowrap} .product-page--editorial .rating-stars{font-size:19px;letter-spacing:0} .product-page--editorial .rating .rating-score,.product-page--editorial .rating span:last-child{font-size:11px} .rating-divider{height:20px} .product-price-row{gap:12px;flex-wrap:nowrap;min-height:42px} .product-page--editorial .detail-price{font-size:25px;gap:8px}.product-page--editorial .detail-price del{font-size:13px} .sale-saving{min-height:34px;padding-inline:14px;font-size:12px} .product-page--editorial .buy-row{grid-template-columns:minmax(126px,.82fr) minmax(0,1.18fr);gap:10px;margin-top:14px} .product-page--editorial .qty,.product-page--editorial .add-btn{height:50px;border-radius:11px} .product-page--editorial .qty button{min-width:38px;min-height:42px;font-size:17px} .product-page--editorial .add-btn{gap:8px;padding:0 12px;font-size:12px;letter-spacing:.05em} .product-page--editorial .add-btn svg{width:20px;height:20px} .product-page--editorial .product-links{gap:10px;margin-top:10px;padding:9px 0 13px}.product-page--editorial .product-links button{gap:7px;min-height:40px;font-size:10px}.product-page--editorial .product-links svg{width:20px;height:20px}.product-link-divider{height:26px} .product-assurances{grid-template-columns:repeat(3,minmax(0,1fr));gap:5px;padding:28px 0 16px}.product-assurance{grid-template-columns:25px 1fr;gap:5px;align-items:start}.product-assurance svg{width:23px;height:23px}.product-assurance strong{font-size:9px;line-height:1.15}.product-assurance span{margin-top:3px;font-size:8px;line-height:1.2} .thoughtful-divider{gap:7px}.thoughtful-divider em{font-size:7px;letter-spacing:.14em}.thoughtful-divider b{font-size:19px} .mobile-product-accordions{display:grid;gap:8px;margin:14px 0 0} .mobile-product-accordions details{border:1px solid #e2e2dc;border-radius:12px;background:transparent;overflow:hidden} .mobile-product-accordions summary{display:grid;grid-template-columns:27px 1fr 22px;align-items:center;gap:7px;min-height:44px;padding:0 12px;list-style:none;cursor:pointer} .mobile-product-accordions summary::-webkit-details-marker{display:none} .mobile-product-accordions summary svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round} .mobile-product-accordions summary strong{font-size:12px;font-weight:600} .mobile-product-accordions .accordion-icon{font-size:22px;line-height:1} .mobile-product-accordions .accordion-chevron{justify-self:end;font-size:17px;transition:transform .2s ease} .mobile-product-accordions details[open] .accordion-chevron{transform:rotate(180deg)} .mobile-product-accordions details>div{padding:0 14px 13px;color:#686b65;font-size:12px;line-height:1.55} .mobile-product-accordions details>div p:last-child{margin-bottom:0} .product-page--editorial>.product-details{display:none} } /* Keep cart rules after legacy cart declarations so the editorial layout wins the cascade. */ body.woocommerce-cart .entry-content{max-width:none;margin:0;font-size:inherit;line-height:inherit} .cart-summary{margin-top:-54px} .cart-summary h2{margin:0;padding:0 0 20px;font-size:28px;line-height:1.2} .cart-summary-shipping h3{margin:0 0 14px;font-size:15px;line-height:1.3} .cart-table--editorial th:nth-child(1),.cart-table--editorial td:nth-child(1){width:52%} .cart-table--editorial th:nth-child(2),.cart-table--editorial td:nth-child(2){display:table-cell;width:12%} .cart-table--editorial th:nth-child(3),.cart-table--editorial td:nth-child(3){display:table-cell;width:18%} .cart-table--editorial th:nth-child(4),.cart-table--editorial td:nth-child(4){width:14%} .cart-table--editorial th:nth-child(5),.cart-table--editorial td:nth-child(5){width:4%} .cart-table--editorial th{height:48px;padding:0 16px 16px 0;font-size:13px} .cart-table--editorial td{height:198px;padding:24px 16px 24px 0;font-size:14px} .cart-secondary-actions{display:none} .cart-summary-shipping-total,.cart-mobile-checkout-bar{display:none} .cart-summary-shipping h3 svg{display:none} @media(max-width:1024px){.cart-summary{margin-top:0}} @media(max-width:768px){ body.woocommerce-cart{padding-bottom:0} body.woocommerce-cart .page-shell{width:calc(100% - 16px);padding-top:0;padding-bottom:36px} body.woocommerce-cart .woocommerce-message,body.woocommerce-cart .woocommerce-info{margin:8px 0 12px;padding:9px 11px;border:1px solid #e0e0da;border-radius:5px;background:#faf9f6;font-size:11px} .cart-masthead{display:block;margin:0 0 8px} .cart-masthead h1{font-size:24px;line-height:1.15;letter-spacing:.4px} .cart-masthead p{margin-top:6px;font-size:11px;letter-spacing:.17em} .cart-masthead>a{display:none} .cart-editorial-layout{display:block} .cart-table-wrap{overflow:visible} .cart-table--editorial th:nth-child(2),.cart-table--editorial td:nth-child(2),.cart-table--editorial th:nth-child(3),.cart-table--editorial td:nth-child(3){display:block} .cart-table--editorial,.cart-table--editorial tbody,.cart-table--editorial tr,.cart-table--editorial td{display:block;width:100%!important} .cart-table--editorial tr{min-height:140px;padding:17px 24px 11px 0} .cart-table--editorial tr:first-child{padding-top:3px;padding-bottom:21px} .cart-table--editorial td{height:auto;padding:3px 0;font-size:13px} .cart-table--editorial td:last-child{top:15px;right:-2px} .cart-table--editorial .cart-product{grid-template-columns:106px minmax(0,1fr);gap:18px;align-items:start} .cart-product-image{grid-row:auto;width:106px;height:108px;border-radius:4px} .cart-item--vegetable-chopper-dicer-with-container .cart-product-image img{width:200%;height:200%;max-width:none;object-position:left top} .cart-product-copy strong{font-size:15px;line-height:1.25}.drawer-item h3{font-size:15px;line-height:1.25} .cart-product-copy span{margin-top:5px;font-size:11px;line-height:1.4} .cart-item-price{width:120px!important;margin:-53px 0 0 124px;padding:0!important;color:#20231d;font-size:14px!important;font-weight:500;line-height:1.2} .cart-table--editorial td:has(.cart-item-qty){margin-left:124px;width:110px!important} .cart-table--editorial .cart-item-qty{width:110px;height:34px;border-radius:5px} .cart-table--editorial .cart-item-qty button{width:34px;font-size:15px} .cart-table--editorial .cart-item-qty input{width:32px;min-height:0;padding:0;font-size:13px} .cart-item-remove{width:26px;height:26px;font-size:20px} .cart-table--editorial .cart-item-subtotal{display:none!important} .cart-benefits{display:none} .cart-summary{display:flex;flex-direction:column;margin:16px 0 0;padding:0;border:0;border-radius:0;background:transparent;box-shadow:none} .cart-summary-shipping{order:1;margin:0;padding:13px 15px 10px;border:0;border-radius:6px;background:#faf9f5} .cart-summary-shipping h3{display:flex;align-items:center;gap:10px;margin:0 0 8px;font-size:17px;font-weight:400;line-height:1.25} .cart-summary-shipping h3 svg{display:block;width:23px;height:23px;fill:none;stroke:#31372c;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round} .shipping-choice{grid-template-columns:22px minmax(0,1fr) auto;gap:12px;padding:7px 1px} .shipping-radio{width:21px;height:21px} .shipping-choice input:checked+.shipping-radio:after{width:11px;height:11px} .shipping-copy strong{font-size:13px} .shipping-copy small{font-size:10px} .shipping-choice>b{font-size:13px} .cart-summary-coupon{order:2;margin:12px 2px 10px;padding:0;border:0} .cart-summary-coupon label{display:none} .cart-summary-coupon>div{grid-template-columns:minmax(0,1fr) 108px;gap:8px} .cart-summary-coupon input,.cart-summary-coupon button{min-height:43px} .cart-summary-coupon input{padding-inline:16px!important;font-size:12px} .cart-summary-coupon button{font-size:14px} .cart-summary h2{order:3;margin:0;padding:13px 13px 5px;border:1px solid #e1e1dc;border-bottom:0;border-radius:6px 6px 0 0;background:#fff;font-size:18px;line-height:1.3} .cart-summary-subtotal{order:4;margin:0;padding:7px 13px 2px;border-right:1px solid #e1e1dc;border-left:1px solid #e1e1dc;background:#fff;font-size:12px} .cart-summary-subtotal strong{font-size:12px} .cart-summary-shipping-total{order:5;display:flex;align-items:center;justify-content:space-between;gap:20px;padding:3px 13px 9px;border-right:1px solid #e1e1dc;border-left:1px solid #e1e1dc;background:#fff;font-size:12px} .cart-summary-shipping-total strong{font-weight:500} .cart-free-shipping-note{display:none} .cart-summary-total{order:6;margin:0;padding:12px 13px 9px;border:1px solid #e1e1dc;border-bottom:0;background:#fff;font-size:18px} .cart-summary-total strong{font-size:20px} .cart-summary>.cart-checkout-button{display:none} .cart-summary-assurances{order:7;grid-template-columns:1fr 1px 1fr;gap:9px;margin:0;padding:0 9px 13px;border-right:1px solid #e1e1dc;border-bottom:1px solid #e1e1dc;border-left:1px solid #e1e1dc;border-radius:0 0 6px 6px;background:#fff;font-size:10px} .cart-summary-assurances>span{gap:6px} .cart-summary-assurances>span:first-child{grid-column:3;grid-row:1} .cart-summary-assurances>i{grid-column:2;grid-row:1} .cart-summary-assurances>span:last-child{grid-column:1;grid-row:1} .cart-summary-assurances svg{width:22px;height:22px} .cart-mobile-checkout-bar{position:static;display:grid;grid-template-columns:118px minmax(0,1fr);align-items:center;gap:8px;width:100%;min-height:72px;margin:16px 0 8px;padding:14px 16px 12px;background:transparent;border:1px solid #ebe6df;border-radius:8px;box-shadow:none;backdrop-filter:none} .cart-mobile-checkout-bar>div>span,.cart-mobile-checkout-bar>div>strong{display:block;} .cart-mobile-checkout-bar>div>span{font-size:14px;line-height:1.2} .cart-mobile-checkout-bar>div strong{margin-top:2px;font-size:22px;font-weight:400;line-height:1} .cart-mobile-checkout-bar .woocommerce-Price-amount,.cart-mobile-checkout-bar .woocommerce-Price-currencySymbol{display:inline} .cart-mobile-checkout-bar>a{display:flex;align-items:center;justify-content:center;gap:12px;min-height:52px;border-radius:999px;background:var(--ink);color:#fff;font-size:14px} } /* ========================================================================== Editorial Checkout Redesign (Matching Reference Designs Image 1 & Image 2) ========================================================================== */ body.woocommerce-checkout { background: #f5f5f5; color: #1f241d; -webkit-font-smoothing: antialiased; } .checkout.checkout-editorial { max-width: var(--site-container, 1280px); margin: 0 auto; padding: 40px 0; } .checkout-masthead { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 36px; } .checkout-masthead-badge { display: block; font-size: 11px; font-weight: 600; letter-spacing: 0.15em; color: #6a7455; text-transform: uppercase; margin-bottom: 8px; } .checkout-masthead .checkout-masthead-title { font-size: 28px; font-weight: 400; color: #1b1e19; line-height: 1.2; letter-spacing: .4px; text-transform: uppercase; margin: 0 0 8px 0; } .checkout-masthead-sub { font-size: 14px; color: #70756b; margin: 0; line-height: 1.5; } .checkout-back-to-cart { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; color: #1b1e19; text-decoration: underline; text-underline-offset: 3px; transition: opacity 0.2s ease; margin-top: 6px; } .checkout-back-to-cart:hover { opacity: 0.7; color: #1b1e19; } /* 2-Column Grid */ .checkout-grid { display: grid; grid-template-columns: minmax(0, 1fr) 420px; gap: 48px; align-items: start; } .checkout-customer-panel { display: flex; flex-direction: column; gap: 32px; } .checkout-section-title { font-size: 16px; font-weight: 600; color: #1b1e19; margin: 0 0 16px 0; letter-spacing: -0.01em; } /* Form Fields Styling */ .checkout-field-wrap { margin-bottom: 8px; } .checkout-field-helper { font-size: 12px; color: #70756b; margin: 6px 0 0 0; } .checkout-address-grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 12px; } .checkout-field { margin: 0; padding: 0; } .checkout-field .woocommerce-input-wrapper { display: block; width: 100%; } .checkout-field--half { grid-column: span 3; } .checkout-field--full { grid-column: span 6; } .checkout-field--third { grid-column: span 2; } .checkout-input, .checkout-address-grid input, .checkout-email-wrap input, .checkout-address-grid select { width: 100%; height: 48px; padding: 12px 14px; font-size: 14px; color: #1b1e19; background: #fff; border: 1px solid #dcdad4; border-radius: 6px; outline: none; transition: border-color 0.2s ease, box-shadow 0.2s ease; box-sizing: border-box; } .checkout-address-grid select, select.state_select { appearance: none; -webkit-appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23333' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 14px center; background-size: 14px; padding-right: 36px; cursor: pointer; } .checkout-input:focus, .checkout-address-grid input:focus, .checkout-email-wrap input:focus, .checkout-address-grid select:focus { border-color: #333; } .checkout-input::placeholder, .checkout-address-grid input::placeholder, .checkout-email-wrap input::placeholder { color: #9ea298; font-size: 14px; } /* Delivery Method */ .checkout-delivery-section { margin-top: 4px; } .checkout-delivery-options { display: flex; flex-direction: column; gap: 10px; } .checkout-shipping-choice { display: grid; grid-template-columns: 24px minmax(0, 1fr) auto; align-items: center; gap: 14px; padding: 14px 16px; background: #fff; border: 1px solid #dcdad4; border-radius: 6px; cursor: pointer; transition: border-color 0.2s ease, background-color 0.2s ease; } .checkout-shipping-choice.is-selected, .checkout-shipping-choice:has(input:checked) { border-color: #4a5338; background: #fbfbfa; } .checkout-shipping-choice input[type="radio"] { position: absolute; opacity: 0; pointer-events: none; } .checkout-shipping-radio { width: 20px; height: 20px; border: 1.5px solid #a2a69d; border-radius: 50%; display: flex; align-items: center; justify-content: center; transition: all 0.2s ease; } .checkout-shipping-choice input:checked + .checkout-shipping-radio { border-color: #4a5338; } .checkout-shipping-choice input:checked + .checkout-shipping-radio::after { content: ""; width: 10px; height: 10px; background: #4a5338; border-radius: 50%; display: block; } .checkout-shipping-copy { display: flex; flex-direction: column; gap: 2px; } .checkout-shipping-copy strong { font-size: 14px; font-weight: 600; color: #1b1e19; } .checkout-shipping-copy small { font-size: 12px; color: #70756b; } .checkout-shipping-cost { font-size: 14px; font-weight: 500; color: #1b1e19; } /* Payment Details Section */ .checkout-payment-section { margin-top: 4px; } .checkout-payment-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 16px; } .checkout-payment-header h2 { margin: 0; } .checkout-payment-lock { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: #70756b; } .checkout-card-box { border: 1px solid #dcdad4; border-radius: 6px; background: #fff; overflow: hidden; margin-bottom: 14px; } .checkout-card-row { display: flex; align-items: center; position: relative; } .checkout-card-number-row { border-bottom: 1px solid #dcdad4; } .card-input-icon { position: absolute; left: 14px; display: flex; align-items: center; color: #686b65; pointer-events: none; } .checkout-card-number-row .checkout-card-input { padding-left: 44px; padding-right: 170px; } .checkout-card-badges { position: absolute; right: 12px; display: flex; align-items: center; gap: 5px; pointer-events: none; } .checkout-card-badges span { display: inline-flex; align-items: center; justify-content: center; font-size: 9px; font-weight: 700; height: 18px; border-radius: 3px; letter-spacing: 0.04em; } .badge-visa { background: #1a1f71; color: #fff; padding: 0 5px; font-style: italic; } .badge-mc { background: #f79e1b; padding: 0 4px; gap: 0; } .badge-mc i { display: inline-block; width: 10px; height: 10px; border-radius: 50%; } .badge-mc .mc-red { background: #eb001b; margin-right: -4px; z-index: 1; } .badge-mc .mc-yellow { background: #f79e1b; } .badge-amex { background: #007bc1; color: #fff; padding: 0 4px; } .badge-discover { background: #ff6000; color: #fff; padding: 0 4px; } .checkout-card-sub-row { display: grid; grid-template-columns: 1fr 1fr; } .checkout-card-sub-row .checkout-card-input:first-child { border-right: 1px solid #dcdad4; } .checkout-cvc-wrap { position: relative; display: flex; align-items: center; } .checkout-cvc-wrap .checkout-card-input { padding-right: 32px; } .checkout-cvc-tip, .tax-tip-icon { display: inline-flex; align-items: center; justify-content: center; width: 16px; height: 16px; border-radius: 50%; background: #888d82; color: #fff; font-size: 10px; font-weight: 700; cursor: help; line-height: 1; } .checkout-cvc-tip { position: absolute; right: 12px; } .checkout-card-input { width: 100%; height: 48px; padding: 12px 14px; font-size: 14px; color: #1b1e19; border: none; outline: none; background: transparent; box-sizing: border-box; } .checkout-card-input::placeholder { color: #9ea298; font-size: 14px; } /* Same as shipping address checkbox */ .checkout-billing-same-wrap { display: flex; align-items: flex-start; gap: 12px; cursor: pointer; margin: 14px 0 24px 0; user-select: none; } .checkout-billing-same-wrap input[type="checkbox"] { position: absolute; opacity: 0; pointer-events: none; } .checkout-custom-checkbox { width: 20px; height: 20px; border: 1.5px solid #4a5338; border-radius: 4px; background: #4a5338; color: #fff; display: flex; align-items: center; justify-content: center; flex-shrink: 0; margin-top: 1px; } .checkout-billing-same-wrap input:not(:checked) + .checkout-custom-checkbox { background: #fff; border-color: #a2a69d; color: transparent; } .checkout-billing-same-text { display: flex; flex-direction: column; gap: 2px; } .checkout-billing-same-text strong { font-size: 13px; font-weight: 600; color: #1b1e19; } .checkout-billing-same-text small { font-size: 12px; color: #70756b; } /* Pay Now CTA Button */ .checkout-pay-now-btn { display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%; height: 52px; background: var(--ink); color: #fff; border: none; border-radius: 999px; font-size: 16px; font-weight: 500; cursor: pointer; transition: background-color 0.2s ease, transform 0.1s ease; text-decoration: none; } .checkout-pay-now-btn:hover { background: #000; color: #fff; } .checkout-pay-now-btn:active { transform: scale(0.99); } .checkout-ssl-guarantee { display: flex; align-items: center; justify-content: center; gap: 6px; font-size: 12px; color: #888d82; margin: 12px 0 0 0; text-align: center; } /* Right Column: Order Summary Card (Desktop) */ .checkout-order-card { background: #faf8f5; border: 1px solid #ebe6df; border-radius: 12px; padding: 28px 24px; position: sticky; top: 24px; } .checkout-desktop-summary-title { font-size: 22px; font-weight: 400; color: #1b1e19; margin: 0 0 20px 0; } .checkout-order-summary-header { display: none; /* hidden on desktop */ } .checkout-order-items { display: flex; flex-direction: column; gap: 16px; } .checkout-order-item { display: grid; grid-template-columns: 64px minmax(0, 1fr) auto; gap: 14px; align-items: center; } .checkout-item-thumb { width: 64px; height: 64px; border-radius: 6px; overflow: hidden; background: #fff; border: 1px solid #ede8e1; flex-shrink: 0; } .checkout-item-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; } .checkout-item-details { display: flex; flex-direction: column; gap: 4px; } .checkout-item-title { font-size: 14px; font-weight: 500; color: #1b1e19; line-height: 1.35; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .checkout-item-qty { font-size: 12px; color: #70756b; } .checkout-item-price { font-size: 14px; font-weight: 500; color: #1b1e19; text-align: right; white-space: nowrap; } .checkout-summary-divider { border: none; border-top: 1px solid #e8e4dc; margin: 20px 0; } .checkout-order-lines { display: flex; flex-direction: column; gap: 10px; } .checkout-order-line { display: flex; justify-content: space-between; align-items: center; font-size: 14px; color: #4a4e46; } .checkout-order-line strong { font-weight: 500; color: #1b1e19; } .checkout-order-total-row { display: flex; justify-content: space-between; align-items: baseline; margin-top: 4px; } .checkout-order-total-row span { font-size: 18px; color: #1b1e19; } .checkout-order-total-row strong { font-size: 24px; font-weight: 500; color: #1b1e19; } .checkout-shipping-banner { display: flex; align-items: center; gap: 10px; background: #ece8de; border-radius: 8px; padding: 12px 16px; margin-top: 22px; color: #2b3026; font-size: 13px; font-weight: 500; } .checkout-shipping-banner svg { flex-shrink: 0; } .checkout-assurances-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-top: 26px; padding-top: 6px; text-align: center; } .assurance-col { display: flex; flex-direction: column; align-items: center; gap: 8px; } .assurance-col svg { color: #2b3026; } .assurance-col span { font-size: 11px; color: #686b65; line-height: 1.35; } .checkout-tagline { font-size: 10px; font-weight: 500; letter-spacing: 0.16em; color: #888d82; text-align: center; margin-top: 28px; text-transform: uppercase; } .checkout-mobile-sticky-bar { display: none; } /* Hide WooCommerce native notices/payment duplicate forms */ body.woocommerce-checkout .woocommerce-message, body.woocommerce-checkout .woocommerce-info, body.woocommerce-checkout .woocommerce-form-coupon-toggle, body.woocommerce-checkout #checkout_coupon { display: none !important; } .checkout-gateways-container { margin: 0; padding: 18px; border: 1px solid #dcdad4; border-radius: 10px; background: #fff; } .checkout-payment-intro { max-width: 620px; margin: -4px 0 16px; color: #70756b; font-size: 13px; line-height: 1.55; } .checkout-gateways-container #payment { margin: 0; padding: 0; border: 0; background: transparent; } .checkout-gateways-container .woocommerce-notice--no-methods, .checkout-gateways-container .woocommerce-privacy-policy-text { display: none !important; } .checkout-gateways-container .wc_payment_methods { margin: 0; padding: 0; list-style: none; } .checkout-gateways-container .wc_payment_method { display: grid; grid-template-columns: 20px minmax(0, 1fr); column-gap: 12px; align-items: center; margin: 0; padding: 0; border: 0; } .checkout-gateways-container .wc_payment_method > input.input-radio { grid-column: 1; grid-row: 1; width: 18px; height: 18px; margin: 0; accent-color: #1b1e19; } .checkout-gateways-container .wc_payment_method > label { grid-column: 2; grid-row: 1; display: block; margin: 0; color: #1b1e19; font-size: 16px; font-weight: 600; line-height: 1.4; } .checkout-gateways-container .payment_box { grid-column: 2; grid-row: 2; margin: 2px 0 0 !important; padding: 0 !important; background: transparent !important; color: #70756b; } .checkout-gateways-container .payment_box::before { display: none !important; } .checkout-gateways-container .payment_box p { margin: 0; font-size: 13px; line-height: 1.45; } .checkout-gateways-container .place-order { margin: 0; padding: 0; } .checkout-gateways-container .ppc-button-wrapper { width: 100%; margin: 16px 0 0; } .checkout-gateways-container #place_order { display: none; /* Handled by Pay Now button */ } .checkout-payment-footnote { display: flex; align-items: center; justify-content: center; gap: 6px; margin: 11px 0 0; color: #888d82; font-size: 11px; line-height: 1.4; text-align: center; } .checkout-payment-footnote svg { flex: 0 0 auto; } /* Select2 / State dropdown styling */ .checkout-address-grid .select2-container { width: 100% !important; } .checkout-address-grid .select2-container--default .select2-selection--single { height: 48px !important; border: 1px solid #dcdad4 !important; border-radius: 6px !important; display: flex !important; align-items: center !important; background-color: #fff !important; } .checkout-address-grid .select2-container--default .select2-selection--single .select2-selection__rendered { line-height: 48px !important; padding-left: 14px !important; color: #1b1e19 !important; font-size: 14px !important; } .checkout-address-grid .select2-container--default .select2-selection--single .select2-selection__arrow { height: 48px !important; right: 10px !important; } /* ========================================================================== Responsive Breakpoints: Mobile (Image 1) ========================================================================== */ @media (max-width: 1024px) { .checkout.checkout-editorial { padding-top: 36px; padding-bottom: 36px; } .checkout-back-to-cart { display: none; /* Back to cart hidden on mobile per Image 1 */ } .checkout-masthead { margin-bottom: 20px; } .checkout-masthead .checkout-masthead-title { font-size: 20px; } .checkout-grid { display: flex; flex-direction: column; gap: 20px; } /* Move order review to the top on mobile right under masthead */ .checkout-order-card { order: 1; position: static; padding: 0; background: transparent; border: none; border-radius: 0; } .checkout-customer-panel { order: 2; gap: 24px; } .checkout-desktop-summary-title { display: none; } /* Order Summary Accordion on Mobile (Image 1) */ .checkout-order-details { background: #faf9f5; border: 1px solid #ebe6df; border-radius: 8px; overflow: hidden; transition: all 0.2s ease; } .checkout-order-summary-header { display: flex; align-items: center; justify-content: space-between; padding: 14px 16px; cursor: pointer; list-style: none; user-select: none; } .checkout-order-summary-header::-webkit-details-marker { display: none; } .summary-header-left { display: flex; align-items: center; gap: 10px; font-size: 15px; color: #1b1e19; font-weight: 500; } .summary-cart-icon { color: #2b3026; } .summary-item-count { font-size: 13px; color: #70756b; font-weight: 400; } .summary-header-right { display: flex; align-items: center; gap: 8px; } .summary-header-total { font-size: 17px; font-weight: 600; color: #1b1e19; } .summary-chevron-icon { color: #686b65; transition: transform 0.2s ease; } .checkout-order-details[open] .summary-chevron-icon { transform: rotate(180deg); } .checkout-order-content { padding: 0 16px 16px; } /* On mobile accordion, hide total/banner/assurances from inside the accordion card */ .desktop-only-divider, .desktop-only-total, .desktop-only-banner, .desktop-only-assurances, .desktop-only-tagline { display: none; } .checkout-order-item { grid-template-columns: 56px minmax(0, 1fr) auto; gap: 12px; } .checkout-item-thumb { width: 56px; height: 56px; } .checkout-item-title { font-size: 13px; } .checkout-desktop-submit { display: none; /* Hidden on mobile in favor of sticky bottom bar */ } .checkout-gateways-container .place-order { display: none !important; } .checkout-mobile-sticky-bar { position: static; display: flex; align-items: center; justify-content: space-between; width: 100%; margin: 0; padding: 14px 16px 12px; background: transparent; border: 1px solid #ebe6df; border-radius: 8px; box-shadow: none; backdrop-filter: none; } .checkout-mobile-total-wrap { display: flex; flex-direction: column; } .mobile-total-label { font-size: 13px; color: #1b1e19; line-height: 1.2; } .mobile-total-val { font-size: 22px; font-weight: 500; color: #1b1e19; line-height: 1.1; } .checkout-mobile-btn-wrap { display: flex; flex-direction: column; align-items: center; width: 60%; max-width: 240px; } .checkout-mobile-pay-btn { width: 100%; height: 48px; font-size: 15px; } .checkout-mobile-btn-wrap .checkout-ssl-guarantee { margin-top: 5px; font-size: 11px; } } @media (max-width: 600px) { .checkout-card-number-row .checkout-card-input { padding-right: 140px; } .checkout-card-badges { gap: 3px; } .checkout-card-badges span { font-size: 8px; height: 16px; padding: 0 3px; } } /* -------------------------------------------------------------------------- Shared policy pages -------------------------------------------------------------------------- */ body.kiboni-policy-page { background: #f5f5f5; color: #1b1d19; } .policies-page { width: calc(100% - 32px); max-width: 1280px; margin: 0 auto; padding: 18px 0 80px; } .policy-breadcrumb { display: flex; align-items: center; gap: 10px; min-height: 28px; margin: 0 0 18px; font-size: 12px; line-height: 1.4; color: #7a7e87; } .policy-breadcrumb a, .policy-breadcrumb strong { color: inherit; font-weight: 400; text-decoration: none; } .policies-layout { display: grid; grid-template-columns: 250px minmax(0, 1fr); gap: 42px; align-items: start; } .policy-sidebar { display: grid; gap: 20px; } .policy-nav-card { overflow: hidden; background: #fff; border: 0; border-radius: 10px; box-shadow: none; } .policy-nav-toggle { display: flex; align-items: center; gap: 12px; width: 100%; margin: 0; padding: 18px 20px 12px; color: inherit; background: transparent; border: 0; font-size: 18px; font-weight: 600; line-height: 1.2; text-align: left; } .policy-nav-heading-icon, .policy-nav-toggle b { display: none; } .policy-nav-card nav { display: grid; padding: 0 0 10px; } .policy-nav-card nav a { position: relative; display: grid; grid-template-columns: 24px minmax(0, 1fr) 12px; gap: 10px; align-items: center; min-height: 48px; padding: 8px 14px 8px 18px; color: #252922; font-size: 12px; font-weight: 500; line-height: 1.3; text-decoration: none; } .policy-nav-card nav a::before { position: absolute; top: 0; bottom: 0; left: 0; width: 3px; background: #5b684a; content: ''; opacity: 0; } .policy-nav-card nav a:hover, .policy-nav-card nav a.active { background: #f5f6f2; } .policy-nav-card nav a.active::before { opacity: 1; } .policy-nav-card svg, .policy-help-card svg, .policy-section svg { width: 100%; height: 100%; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; } .policy-nav-card nav a svg { width: 20px; height: 20px; color: #536047; } .policy-nav-card nav a b { font-size: 22px; font-weight: 400; line-height: 1; } .policy-help-card { padding: 20px; background: #fff; border-radius: 10px; } .policy-help-card > div { display: flex; align-items: center; gap: 12px; } .policy-help-card > div > span { display: grid; place-items: center; width: 44px; height: 44px; padding: 10px; color: #fff; background: #536243; border-radius: 50%; } .policy-help-card p, .policy-help-card strong, .policy-help-card small { display: block; margin: 0; } .policy-help-card strong { font-size: 16px; font-weight: 500; } .policy-help-card small { margin-top: 3px; font-size: 11px; color: #777b73; } .policy-help-card > a { display: flex; align-items: center; justify-content: center; min-height: 38px; margin-top: 15px; color: #252922; background: #fff; border: 1px solid #e6e7e2; border-radius: 999px; font-size: 12px; font-weight: 600; text-decoration: none; } .policy-content { min-width: 0; } .policy-hero { display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: 34px; align-items: center; min-height: 190px; padding: 0 0 30px; border-bottom: 1px solid #dddeda; } .policy-hero-copy > span { display: block; margin-bottom: 10px; color: #6f674f; font-size: 13px; font-weight: 600; line-height: 1.3; letter-spacing: .22em; text-transform: uppercase; } .policy-hero h1 { margin: 0 0 14px; font-size: clamp(22px, 1.6vw, 28px); font-weight: 400; line-height: 1.15; letter-spacing: .03em; text-transform: uppercase; } .policy-hero p { max-width: 610px; margin: 0; color: #5f5b57; font-size: 16px; line-height: 1.7; } .policy-hero > img { display: block; width: 100%; height: 180px; object-fit: cover; object-position: right center; border-radius: 8px; } .policy-sections { display: grid; } .policy-section { display: grid; grid-template-columns: 48px minmax(0, 1fr); gap: 18px; align-items: center; min-height: 100px; padding: 23px 0; border-bottom: 1px solid #e0e1dd; } .policy-section-icon { display: grid; place-items: center; width: 48px; height: 48px; padding: 11px; color: #252a24; background: #f5f5f1; border-radius: 50%; } .policy-section h2 { margin: 0 0 5px; font-size: 18px; font-weight: 500; line-height: 1.25; } .policy-section p { margin: 0; color: #6a6e75; font-size: 13px; line-height: 1.45; } .policy-section-arrow { display: none; } .policy-updated { margin: 24px 0 0; color: #8a8d87; font-size: 11px; text-align: right; } @media (max-width: 1024px) { .policies-layout { grid-template-columns: 220px minmax(0, 1fr); gap: 28px; } .policy-hero { grid-template-columns: minmax(0, 1fr) 300px; gap: 24px; } } @media (max-width: 768px) { .policies-page { width: calc(100% - 16px); padding: 8px 0 54px; } .policy-breadcrumb { gap: 9px; margin-bottom: 14px; font-size: 14px; white-space: nowrap; overflow: hidden; } .policies-layout { display: flex; flex-direction: column; gap: 22px; } .policy-sidebar, .policy-content { width: 100%; } .policy-nav-card { border-radius: 10px; } .policy-nav-toggle { min-height: 58px; padding: 12px 16px; font-family: inherit; font-size: 19px; cursor: pointer; } .policy-nav-heading-icon { display: grid; place-items: center; width: 28px; height: 28px; padding: 3px; } .policy-nav-toggle span:nth-child(2) { flex: 1; } .policy-nav-toggle b { display: block; font-size: 26px; font-weight: 400; line-height: 1; transform: translateY(-2px); transition: transform 0.2s ease; } .policy-nav-card nav, .policy-help-card { display: none; } .policy-nav-card.is-open nav { display: grid; padding-top: 4px; border-top: 1px solid #e7e8e4; } .policy-nav-card.is-open .policy-nav-toggle b { transform: rotate(180deg) translateY(2px); } .policy-hero { display: grid; grid-template-columns: 1fr; gap: 20px; min-height: 0; padding: 0; border-bottom: 0; } .policy-hero-copy { position: static; } .policy-hero-copy > span { margin-bottom: 8px; font-size: 10px; } .policy-hero h1 { margin-bottom: 14px; font-size: 21px; line-height: 1.18; letter-spacing: .3px; } .policy-hero p { position: static; width: 100%; min-height: 0; padding: 0; font-size: 15px; line-height: 1.65; } .policy-hero > img { position: static; width: 100%; height: auto; aspect-ratio: 16 / 9; border-radius: 10px; object-position: center; } .policy-sections { gap: 10px; margin-top: 18px; } .policy-section { grid-template-columns: 62px minmax(0, 1fr) 16px; gap: 10px; min-height: 98px; padding: 12px; background: #fff; border: 1px solid #e1e3df; border-radius: 12px; } .policy-section-icon { width: 58px; height: 58px; padding: 13px; } .policy-section h2 { margin-bottom: 4px; font-size: 16px; font-weight: 400; } .policy-section p { display: -webkit-box; overflow: hidden; font-size: 14px; line-height: 1.35; -webkit-box-orient: vertical; -webkit-line-clamp: 2; } .policy-section-arrow { display: block; font-size: 33px; font-weight: 300; line-height: 1; } .policy-updated { display: none; } } /* Contact support form */ .contact-form-card { margin-top: 28px; padding: 32px; background: #fff; border: 1px solid #dedfd9; border-radius: 12px; } .contact-form-heading > span, .track-order-heading > span { display: block; margin-bottom: 8px; color: #6f674f; font-size: 11px; font-weight: 600; letter-spacing: .22em; } .contact-form-heading h2 { margin: 0 0 8px; font-size: 26px; font-weight: 400; } .contact-form-heading p { margin: 0; color: #696963; font-size: 14px; } .contact-form-notice { margin-top: 22px; padding: 13px 15px; border-radius: 8px; font-size: 14px; } .contact-form-notice.is-success { color: #354329; background: #edf2e8; } .contact-form-notice.is-error { color: #712d2d; background: #fbebeb; } .kiboni-contact-form { margin-top: 28px; } .contact-form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; } .contact-form-grid p { margin: 0; } .contact-form-grid label { display: block; margin-bottom: 8px; font-size: 13px; font-weight: 500; } .contact-form-grid label > span { color: #7b543f; } .contact-form-grid label small { margin-left: 5px; color: #898a84; font-size: 10px; font-weight: 400; text-transform: uppercase; } .contact-form-grid input, .contact-form-grid select, .contact-form-grid textarea { display: block; width: 100%; min-height: 48px; padding: 11px 13px; background: #fafaf8; border: 1px solid #d8d9d3; border-radius: 7px; outline: none; font-size: 14px; } .contact-form-grid textarea { min-height: 150px; resize: vertical; } .contact-form-grid input:focus, .contact-form-grid select:focus, .contact-form-grid textarea:focus { border-color: #596449; box-shadow: 0 0 0 3px rgba(89, 100, 73, .1); } .contact-message-field { grid-column: 1 / -1; } .contact-form-privacy { max-width: 680px; margin: 18px 0; color: #7a7b75; font-size: 11px; line-height: 1.55; } .contact-submit, .track_order .button { display: inline-flex; align-items: center; justify-content: center; gap: 22px; min-height: 50px; padding: 0 28px; color: #fff; background: #202022; border: 0; border-radius: 999px; font-size: 12px; font-weight: 500; letter-spacing: .12em; text-transform: uppercase; } .contact-honeypot { position: absolute !important; left: -10000px !important; width: 1px !important; height: 1px !important; overflow: hidden !important; } /* Guest order tracking */ body.kiboni-track-order-page { background: #f5f5f5; } .track-order-page { width: calc(100% - 32px); max-width: 1280px; margin: 0 auto; padding: 48px 0 80px; } .track-order-card { max-width: 780px; margin: 0 auto; padding: 54px 60px; background: #fff; border: 1px solid #dedfd9; border-radius: 14px; } .track-order-heading { text-align: center; } .track-order-heading h1 { margin: 0 0 15px; font-size: 34px; font-weight: 400; letter-spacing: .03em; text-transform: uppercase; } .track-order-heading p { max-width: 560px; margin: 0 auto; color: #64645f; font-size: 15px; line-height: 1.7; } .track-order-form-wrap { margin-top: 36px; } .track-order-form-wrap .woocommerce-info, .track-order-form-wrap .woocommerce-error, .track-order-form-wrap .woocommerce-message { margin: 0 0 22px; padding: 13px 15px; background: #f2f3ef; border-radius: 7px; font-size: 13px; list-style: none; } .track_order > p:first-child { margin: 0 0 22px; color: #6a6b65; font-size: 13px; line-height: 1.6; } .track_order .form-row { width: 100%; margin: 0 0 18px; } .track_order label { display: block; margin-bottom: 8px; font-size: 13px; font-weight: 500; } .track_order input.input-text { display: block; width: 100%; min-height: 50px; padding: 11px 13px; background: #fafaf8; border: 1px solid #d8d9d3; border-radius: 7px; outline: none; } .track_order input.input-text:focus { border-color: #596449; box-shadow: 0 0 0 3px rgba(89, 100, 73, .1); } .track_order .button { width: 100%; margin-top: 4px; } .track-order-help { margin-top: 30px; padding-top: 24px; border-top: 1px solid #e2e3de; } .track-order-help p, .track-order-help p strong, .track-order-help p span { display: block; } .track-order-help p { margin: 0 0 18px; } .track-order-help p strong { font-size: 13px; font-weight: 500; } .track-order-help p span { margin-top: 4px; color: #73746e; font-size: 12px; } .track-order-help > a { font-size: 13px; font-weight: 500; } @media (max-width: 768px) { .contact-form-card { margin-top: 18px; padding: 22px 16px; } .contact-form-heading h2 { font-size: 22px; } .contact-form-grid { grid-template-columns: 1fr; gap: 16px; } .contact-message-field { grid-column: auto; } .contact-submit { width: 100%; } .track-order-page { width: calc(100% - 16px); padding: 8px 0 54px; } .track-order-card { padding: 34px 16px; border-radius: 12px; } .track-order-heading h1 { font-size: 23px; } .track-order-heading p { font-size: 14px; } } /* -------------------------------------------------------------------------- Product catalogue — reuses the homepage product grid and cards -------------------------------------------------------------------------- */ body.post-type-archive-product, body.tax-product_cat { background: #f5f5f5; } .product-catalog-page { width: calc(100% - 32px); max-width: 1280px; margin: 0 auto; padding: 38px 0 78px; } .product-catalog-header { margin-bottom: 28px; } .product-catalog-header h1 { margin: 0 0 10px; font-family: Georgia, 'Times New Roman', serif; font-size: clamp(42px, 4.2vw, 62px); font-weight: 400; line-height: 1.03; letter-spacing: -1.8px; } .product-catalog-description, .product-catalog-description p { margin: 0; color: #777b80; font-size: 15px; line-height: 1.5; } .product-catalog-controls { display: flex; align-items: center; justify-content: space-between; gap: 32px; min-height: 64px; padding-bottom: 18px; border-bottom: 1px solid #dddeda; } .product-category-pills { display: flex; align-items: center; gap: 9px; min-width: 0; } .product-category-pills a { display: inline-flex; align-items: center; justify-content: center; min-height: 42px; padding: 0 22px; color: #343733; background: rgba(255, 255, 255, 0.28); border: 1px solid #d8dad5; border-radius: 999px; font-size: 13px; font-weight: 500; line-height: 1.2; white-space: nowrap; } .product-category-pills a:hover, .product-category-pills a.active { color: #fff; background: #667257; border-color: #667257; } .product-catalog-meta { display: flex; align-items: center; gap: 20px; flex: 0 0 auto; } .product-catalog-count { color: #777a7d; font-size: 13px; white-space: nowrap; } .product-catalog-divider { display: block; width: 1px; height: 40px; background: #dddeda; } .product-catalog-meta .woocommerce-ordering { position: relative; margin: 0; } .product-catalog-meta .woocommerce-ordering::after { position: absolute; top: 50%; right: 17px; width: 8px; height: 8px; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; content: ''; pointer-events: none; transform: translateY(-70%) rotate(45deg); } .product-catalog-meta select { min-width: 178px; height: 42px; padding: 0 42px 0 18px; background: rgba(255, 255, 255, 0.45); border: 1px solid #d8dad5; border-radius: 999px; font-size: 13px; font-weight: 500; outline: none; appearance: none; } .shop-catalog-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 28px 22px; margin-top: 34px; } .shop-catalog-grid .home-product-card { border: 1px solid rgba(215, 214, 206, 0.4); } .shop-catalog-grid .home-product-image { aspect-ratio: 1 / 1; } .shop-catalog-grid .home-product-image img { object-fit: cover; } .product-catalog-pagination { display: flex; justify-content: center; gap: 8px; margin-top: 48px; } .product-catalog-pagination .page-numbers { display: inline-grid; place-items: center; min-width: 42px; height: 42px; padding: 0 12px; background: #fff; border: 1px solid #dadbd6; border-radius: 999px; font-size: 12px; } .product-catalog-pagination .page-numbers.current { color: #fff; background: #667257; border-color: #667257; } .product-catalog-empty { margin-top: 34px; padding: 70px 24px; background: #fff; border: 1px solid #e0e1dc; border-radius: 12px; text-align: center; } .product-catalog-empty h2 { margin: 0 0 8px; font-family: Georgia, 'Times New Roman', serif; font-size: 28px; font-weight: 400; } .product-catalog-empty p { color: #777b80; } .product-catalog-empty a { display: inline-flex; align-items: center; justify-content: center; min-height: 42px; margin-top: 10px; padding: 0 22px; color: #fff; background: #667257; border-radius: 999px; font-size: 13px; } @media (max-width: 1100px) { .product-catalog-controls { align-items: flex-start; flex-direction: column; gap: 16px; } .product-category-pills { width: 100%; overflow-x: auto; padding-bottom: 3px; scrollbar-width: none; } .product-category-pills::-webkit-scrollbar { display: none; } .product-catalog-meta { align-self: flex-end; } .shop-catalog-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } } @media (max-width: 768px) { .product-catalog-page { width: calc(100% - 24px); padding: 26px 0 48px; } .product-catalog-header { margin-bottom: 22px; } .product-catalog-header h1 { margin-bottom: 8px; font-size: 38px; letter-spacing: -1.2px; } .product-catalog-description, .product-catalog-description p { font-size: 13px; } .product-catalog-controls { padding-bottom: 14px; } .product-category-pills { gap: 7px; } .product-category-pills a { min-height: 38px; padding: 0 17px; font-size: 12px; } .product-catalog-meta { width: 100%; justify-content: space-between; gap: 12px; } .product-catalog-divider { display: none; } .product-catalog-meta select { min-width: 166px; height: 40px; font-size: 12px; } .shop-catalog-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px 10px; margin-top: 22px; } .shop-catalog-grid .home-product-body { padding: 10px 9px; } .shop-catalog-grid .home-product-body h3 { min-height: 55px; } .product-catalog-pagination { margin-top: 34px; } } @media (max-width: 420px) { .product-catalog-header h1 { font-size: 34px; } .product-catalog-count { font-size: 11px; } .product-catalog-meta select { min-width: 158px; padding-left: 14px; } } /* Product gallery image borders — intentionally no CSS shadows. */ .product-page--editorial .main-product-stage { border: 1px solid #d9d5cb; background: #fff; box-shadow: none; } .product-page--editorial .main-product-image { width: 100%; height: 100%; object-fit: contain; object-position: center; } .product-page--editorial .thumb { border: 1px solid #dedbd2; box-shadow: none; } .product-page--editorial .thumb:hover { border-color: #b8bdae; } .product-page--editorial .thumb.active { border: 2px solid #667257; box-shadow: none; } .product-page--editorial .gallery-counter { box-shadow: none; } /* Shared Back + Breadcrumb Minimal */ .site-breadcrumb-shell { width: calc(100% - 32px); max-width: 1280px; margin: 0 auto; } .site-breadcrumb { min-width: 0; padding: 0 24px; background: rgba(255, 255, 255, .92); border-top: 1px solid #e5e1da; border-radius: 0 0 18px 18px; } .site-breadcrumb-desktop { display: flex; align-items: center; gap: 15px; min-width: 0; min-height: 74px; margin: 0; padding: 0; list-style: none; } .site-breadcrumb-desktop li { display: flex; align-items: center; min-width: 0; color: #858681; font-size: 14px; line-height: 1.3; white-space: nowrap; } .site-breadcrumb-desktop a { display: inline-flex; align-items: center; color: inherit; text-decoration: none; } .site-breadcrumb-desktop a:hover, .site-breadcrumb-desktop a:focus-visible { color: #4f5d37; } .site-breadcrumb-desktop .site-breadcrumb-separator { color: #858681; font-size: 22px; font-weight: 300; } .site-breadcrumb-desktop [aria-current="page"] { display: block; min-width: 0; overflow: hidden; color: #242421; text-overflow: ellipsis; } .site-breadcrumb-mobile { display: none; } @media (min-width: 1025px) { .site-has-breadcrumb .site-header.headroom--top { top: 20px; left: max(16px, calc((100% - 1280px) / 2)); width: min(calc(100% - 32px), 1280px); border-radius: 18px 18px 0 0; border-bottom-color: #e5e1da; background: rgba(255, 255, 255, .92); box-shadow: none; } .site-has-breadcrumb .site-header-space { height: 108px; } } /* Product grids and product cards intentionally use no CSS shadows. */ .product-card, .product-card:hover, .home-product-card, .shop-card-inner, .shop-card-inner:hover { box-shadow: none; } /* Product image canvases use a clean white background sitewide. */ .home-product-image, .product-image, .shop-product-image { background: #fff; } @media (min-width: 769px) and (max-width: 1024px) { .site-breadcrumb-shell { margin-top: 10px; } .site-breadcrumb { border-radius: 16px; } } @media (max-width: 768px) { .site-has-breadcrumb .site-header.headroom--top { top: 8px; left: 8px; width: calc(100% - 16px); border-radius: 18px; background: rgba(255, 255, 255, .94); box-shadow: none; } .site-has-breadcrumb .site-header-space { height: 76px; } .site-breadcrumb-shell { width: calc(100% - 16px); max-width: none; } .site-breadcrumb { padding: 0; background: transparent; border: 0; border-radius: 0 0 16px 16px; } .site-breadcrumb-desktop { display: none; } .site-breadcrumb-mobile { display: flex; align-items: center; min-height: 94px; padding: 15px 19px; padding-top: 0; } .site-breadcrumb-back { display: inline-flex; flex: 0 0 34px; align-items: center; justify-content: flex-start; color: #242421; } .site-breadcrumb-back svg { width: 25px; height: 25px; fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.8; } .site-breadcrumb-mobile-divider { width: 1px; height: 42px; margin: 0 20px 0 5px; background: #d8d4cd; } .site-breadcrumb-mobile-copy { display: grid; min-width: 0; gap: 5px; } .site-breadcrumb-mobile-parent, .site-breadcrumb-mobile-current { display: block; min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; } .site-breadcrumb-mobile-parent { color: #858681; font-size: 16px; line-height: 1.25; } .site-breadcrumb-mobile-current { color: #242421; font-size: 15px; line-height: 1.35; } } /* Shared eyebrow typography across the homepage and product detail. */ .catalog-eyebrow, .product-kicker { margin: 0 0 10px; color: #6f674f; font-size: 13px; font-weight: 700; line-height: 1.3; letter-spacing: .22em; text-transform: uppercase; } @media (max-width: 768px) { .catalog-eyebrow, .product-kicker { margin-bottom: 8px; font-size: 10px; } } /* Keep all product-detail tabs consistent with the short description. */ .product-page--editorial .product-details, .product-page--editorial .product-details nav button, .product-page--editorial .product-details nav button.active, .product-page--editorial .product-details [data-tab-panel], .product-page--editorial .product-details [data-tab-panel] h2, .product-page--editorial .product-details [data-tab-panel] h3, .product-page--editorial .product-details [data-tab-panel] p, .product-page--editorial .product-details table.woocommerce-product-attributes th, .product-page--editorial .product-details table.woocommerce-product-attributes td, .product-page--editorial .product-details #reviews, .product-page--editorial .product-details #reviews label { color: #373a34; } /* Homepage-only: lighter eyebrow weight than the shared .product-kicker (700). */ .catalog-eyebrow { font-weight: 600; } /* Homepage secondary product rows (New Arrivals / Best Sellers) — inter-block spacing follows the sitewide header-to-content / content-to-footer standard (40px desktop, 40px tablet, 48px mobile) instead of the wider catalog padding. Appended at end of file so it wins any same-specificity tie against the earlier historical .catalog padding passes. */ .catalog--secondary { padding-top: 40px; padding-bottom: 40px; } .catalog:has(+ .catalog--secondary) { padding-bottom: 0; } @media (max-width: 1024px) { .catalog--secondary { padding-top: 40px; padding-bottom: 40px; } .catalog:has(+ .catalog--secondary) { padding-bottom: 0; } } @media (max-width: 768px) { .catalog--secondary { padding-top: 48px; padding-bottom: 48px; } .catalog:has(+ .catalog--secondary) { padding-bottom: 0; } } /* Horizontal product gallery inspired by the supplied desktop/mobile reference. */ .product-page--editorial .gallery { display: flex; min-width: 0; flex-direction: column; gap: 14px; align-items: stretch; } .product-page--editorial .main-product-stage { order: 1; width: 100%; aspect-ratio: 1 / 1; border: 1px solid #d9d5cb; border-radius: 12px; background: #fff; box-shadow: none; cursor: grab; touch-action: pan-y; user-select: none; } .product-page--editorial .main-product-image { width: 100%; height: 100%; object-fit: contain; object-position: center; pointer-events: none; user-select: none; transition: transform .2s ease, opacity .2s ease; } .product-page--editorial .main-product-stage.is-dragging { cursor: grabbing; } .product-page--editorial .main-product-stage.is-dragging .main-product-image { transition: none; } .gallery-thumbnails { position: relative; order: 2; min-width: 0; } .product-page--editorial .thumbs { display: flex; width: 100%; min-width: 0; flex-direction: row; align-items: center; gap: 12px; padding: 2px; overflow-x: auto; scroll-behavior: smooth; scroll-snap-type: x proximity; scrollbar-width: none; } .product-page--editorial .thumbs::-webkit-scrollbar { display: none; } .product-page--editorial .thumb { width: auto; height: auto; flex: 0 0 calc((100% - 48px) / 5); aspect-ratio: 1 / 1; padding: 0; overflow: hidden; scroll-snap-align: start; border: 1px solid #dedbd2; border-radius: 10px; background: #fff; box-shadow: none; transform: none; } .product-page--editorial .thumb:hover { border-color: #aeb5a1; transform: none; } .product-page--editorial .thumb.active { border: 2px solid #49634b; box-shadow: none; } .product-page--editorial .thumb img { display: block; width: 100%; height: 100%; object-fit: cover; } .gallery-nav { position: absolute; top: 50%; z-index: 3; display: grid; width: 44px; height: 44px; place-items: center; padding: 0; border: 1px solid #dfddd6; border-radius: 50%; background: #fff; color: #222420; box-shadow: none; transform: translateY(-50%); } .gallery-nav--prev { left: -20px; } .gallery-nav--next { right: -20px; } .gallery-nav svg { width: 21px; height: 21px; fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.8; } .gallery-nav:disabled, .gallery[data-image-count="1"] .gallery-scrollbar { display: none; } .gallery-scrollbar { position: relative; order: 3; height: 12px; margin: -5px 2px 0; overflow: visible; border-radius: 999px; background: transparent; cursor: pointer; touch-action: none; } .gallery-scrollbar.is-hidden { display: none; } .gallery-scrollbar::before { content: ""; position: absolute; top: 50%; right: 0; left: 0; height: 4px; border-radius: inherit; background: #e6e5df; transform: translateY(-50%); } .gallery-scrollbar-thumb { position: absolute; top: 50%; left: 0; z-index: 1; width: 100%; height: 4px; border-radius: inherit; background: #315f45; transform: translateY(-50%); transition: left .18s ease, width .18s ease; } .gallery-scrollbar.is-dragging, .gallery-scrollbar.is-dragging .gallery-scrollbar-thumb { cursor: grabbing; } .gallery-scrollbar.is-dragging .gallery-scrollbar-thumb { transition: none; } .gallery-scrollbar[aria-disabled="true"] { cursor: default; } .product-page--editorial .gallery-counter { display: none; } @media (max-width: 768px) { .product-page--editorial .gallery { gap: 12px; } .product-page--editorial .main-product-stage { aspect-ratio: 1 / 1; border-radius: 10px; } .product-page--editorial .thumbs { gap: 8px; padding-inline: 2px; } .product-page--editorial .thumb { flex-basis: calc((100% - 32px) / 4.35); border-radius: 8px; } .gallery-nav { display: none; } .gallery-nav--prev { left: -9px; } .gallery-nav--next { right: -9px; } .product-page--editorial .gallery-counter { position: absolute; right: 12px; bottom: 12px; display: flex; min-height: 32px; align-items: center; padding: 0 13px; border: 0; border-radius: 999px; background: #4a4a47; color: #fff; font-size: 12px; line-height: 1; box-shadow: none; backdrop-filter: none; } .product-page--editorial .gallery-counter b { font-weight: 600; } .gallery-scrollbar { margin-top: -6px; } } @media (min-width: 1025px) { .product-page--editorial .gallery { position: relative; display: grid; grid-template-columns: 96px minmax(0, 1fr); grid-template-rows: auto; gap: 0 16px; align-items: stretch; } .product-page--editorial .main-product-stage { grid-column: 2; grid-row: 1; order: initial; } .gallery-thumbnails { grid-column: 1; grid-row: 1; order: initial; height: 100%; min-height: 0; } .product-page--editorial .thumbs { height: 100%; flex-direction: column; align-items: stretch; gap: 12px; padding: 2px 0; overflow-x: hidden; overflow-y: auto; scroll-snap-type: y proximity; } .product-page--editorial .thumb { width: 96px; height: 96px; flex: 0 0 96px; aspect-ratio: 1 / 1; scroll-snap-align: start; } .gallery-nav { left: 50%; width: 40px; height: 40px; transform: translateX(-50%); } .gallery-nav--prev { top: -14px; } .gallery-nav--next { top: auto; right: auto; bottom: -14px; } .gallery-nav svg { transform: rotate(90deg); } .product-page--editorial .gallery-scrollbar { grid-column: 1; grid-row: 1; order: initial; width: 12px; height: 100%; margin: 0 -14px 0 0; align-self: stretch; justify-self: end; } .product-page--editorial .gallery-scrollbar::before { top: 0; right: auto; bottom: 0; left: 50%; width: 4px; height: auto; transform: translateX(-50%); } .product-page--editorial .gallery-scrollbar-thumb { top: 0; left: 50%; width: 4px; height: 100%; transform: translateX(-50%); transition: top .18s ease, height .18s ease; } } .brand { outline: none; } .brand:focus-visible { outline: 2px solid var(--ink); outline-offset: 6px; border-radius: 4px; } /* About — warm editorial brand story based on the selected concept. */ body.kiboni-about-page { background: #f5f5f5; } .about-page { width: calc(100% - var(--site-gutter) - var(--site-gutter)); max-width: var(--site-container); margin: var(--site-grid-gap) auto var(--site-section-y); overflow: hidden; border-radius: 18px; background: #faf8f5; color: var(--ink); } .about-eyebrow { margin: 0 0 16px; color: #6f674f; font-size: var(--type-label); font-weight: 600; line-height: 1.3; letter-spacing: .22em; text-transform: uppercase; } .about-hero { display: grid; grid-template-columns: minmax(0, 58%) minmax(360px, 42%); min-height: 480px; background: #faf8f5; } .about-hero-copy { position: relative; z-index: 2; align-self: center; max-width: 700px; padding: var(--site-section-y) clamp(32px, 4vw, 64px); } .about-hero h1 { max-width: 650px; margin: 0 0 24px; font-size: var(--type-h1); font-weight: 500; line-height: 1.08; letter-spacing: -.035em; } .about-hero-copy > p:not(.about-eyebrow) { max-width: 590px; margin: 0 0 16px; font-size: var(--type-body); line-height: 1.7; } .about-hero-copy .about-lead { font-weight: 500; } .about-hero-still { position: relative; min-height: 480px; background: #f4f2ed url("assets/about-kitchen-detail.webp") center / cover no-repeat; } .about-hero-still::before { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, #faf8f5 0, rgba(250, 248, 245, .58) 13%, rgba(250, 248, 245, 0) 42%); } .about-life { position: relative; margin: 0; background: #ded8cc; } .about-life img { display: block; width: 100%; height: min(52vw, 620px); min-height: 480px; object-fit: cover; object-position: center 48%; } .about-life p { position: absolute; right: 4.5%; top: 50%; margin: 0; padding: 24px 0 20px 34px; color: #4f5d37; font-family: inherit; font-size: var(--type-h4); font-style: normal; font-weight: 500; line-height: 1.45; letter-spacing: .02em; transform: translateY(-50%); } .about-life p::after { content: ""; display: block; width: 34px; height: 1px; margin-top: 18px; background: #737c55; } .about-approach { display: grid; grid-template-columns: minmax(0, 60%) minmax(340px, 40%); align-items: stretch; background: #fff; } .about-approach-copy { align-self: center; max-width: 720px; padding: var(--site-section-y) clamp(32px, 4vw, 64px); } .about-approach h2 { margin: 0 0 24px; font-size: var(--type-h2); font-weight: 500; line-height: 1.15; letter-spacing: -.03em; } .about-approach-copy > p:not(.about-eyebrow) { max-width: 620px; margin: 0 0 18px; color: #5f5b57; font-size: var(--type-body); line-height: 1.75; } .about-approach-image { min-height: 420px; margin: 0; overflow: hidden; } .about-approach-image img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 63% center; } .about-promises { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); padding: 24px var(--site-gutter); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); background: #f5f6f2; } .about-promises article { position: relative; display: grid; grid-template-columns: 54px 1fr; grid-template-rows: auto auto; column-gap: 18px; align-content: center; min-height: 120px; padding: 20px clamp(16px, 2vw, 32px); } .about-promises article:not(:last-child)::after { content: ""; position: absolute; top: 22%; right: 0; width: 1px; height: 56%; background: var(--line); } .about-promise-icon { grid-row: 1 / 3; width: 48px; height: 48px; border-radius: 50%; display: grid; place-items: center; background: #737c55; color: #fff; } .about-promise-icon svg { width: 25px; height: 25px; fill: none; stroke: currentColor; stroke-width: 1.55; stroke-linecap: round; stroke-linejoin: round; } .about-promises h3 { align-self: end; margin: 0 0 3px; font-size: var(--type-h6); font-weight: 500; line-height: 1.3; } .about-promises p { margin: 0; color: #66665f; font-size: var(--type-small); line-height: 1.45; } .about-cta { min-height: 176px; display: grid; grid-template-columns: 1fr 1fr; align-items: center; gap: 40px; padding: 32px var(--site-gutter); background: #f7f3ed; } .about-cta > div > span { display: block; width: 46px; height: 2px; margin-bottom: 24px; background: #b85f3e; } .about-cta a { display: inline-flex; min-width: 320px; min-height: 50px; align-items: center; justify-content: center; gap: 34px; padding: 15px 32px; border-radius: 999px; background: var(--ink); color: #fff; font-size: 11px; font-weight: 600; letter-spacing: .25em; text-transform: uppercase; } .about-cta a b { font-size: 23px; font-weight: 300; line-height: 1; } .about-cta > p { justify-self: center; margin: 0; color: #4f5d37; font-family: inherit; font-size: var(--type-h4); font-style: normal; font-weight: 500; letter-spacing: .04em; } @media (max-width: 1024px) { .about-page { border-radius: 16px; } .about-hero { grid-template-columns: 58% 42%; } .about-hero-copy, .about-approach-copy { padding: var(--site-section-y) var(--site-gutter); } .about-life p { right: 3%; } .about-promises { padding-inline: var(--site-gutter); } .about-promises article { grid-template-columns: 44px 1fr; column-gap: 12px; padding-inline: 16px; } .about-promise-icon { width: 42px; height: 42px; } } @media (max-width: 768px) { body.kiboni-about-page { background: #f5f5f5; } .about-page { width: calc(100% - 16px); margin-bottom: var(--site-section-y); border-radius: 14px; } .about-hero { grid-template-columns: 1fr; min-height: 0; } .about-hero-copy { padding: var(--site-section-y) 16px 32px; } .about-eyebrow { margin-bottom: 15px; font-size: 10px; } .about-hero h1 { margin-bottom: 22px; font-size: var(--type-h1); line-height: 1.08; } .about-hero-copy > p:not(.about-eyebrow) { font-size: 15px; line-height: 1.6; } .about-hero-still { min-height: 240px; } .about-hero-still::before { background: linear-gradient(180deg, #faf8f5 0, rgba(250, 248, 245, 0) 26%); } .about-life img { height: auto; min-height: 0; aspect-ratio: 4 / 3; object-position: 50% center; } .about-life p { position: static; padding: 24px 16px 27px; font-size: var(--type-h4); transform: none; } .about-approach { grid-template-columns: 1fr; } .about-approach-copy { padding: var(--site-section-y) 16px 32px; } .about-approach h2 { margin-bottom: 20px; font-size: var(--type-h2); } .about-approach-copy > p:not(.about-eyebrow) { font-size: 15px; line-height: 1.72; } .about-approach-image { min-height: 0; } .about-approach-image img { aspect-ratio: 4 / 3; } .about-promises { grid-template-columns: 1fr; padding: 8px 16px; } .about-promises article { grid-template-columns: 48px 1fr; min-height: 100px; padding: 18px 0; } .about-promises article:not(:last-child)::after { top: auto; right: 0; bottom: 0; left: 0; width: auto; height: 1px; } .about-cta { grid-template-columns: 1fr; gap: 24px; padding: 36px 16px 40px; } .about-cta a { width: 100%; min-width: 0; min-height: 50px; gap: 20px; padding-inline: 20px; font-size: 10px; } .about-cta > p { justify-self: start; font-size: var(--type-h5); } } /* About centered composition — matches the selected visual reference. */ .about-page--centered { background: #faf8f5; } .about-intro { padding: 48px var(--site-gutter) 28px; text-align: center; } .about-intro .about-eyebrow { margin-bottom: 10px; } .about-intro h1 { max-width: 880px; margin: 0 auto 14px; font-size: clamp(22px, 1.6vw, 28px); font-weight: 400; line-height: 1.15; letter-spacing: .03em; text-transform: uppercase; } .about-intro > p:last-child { max-width: 720px; margin: 0 auto; color: #5f5b57; font-size: var(--type-body); line-height: 1.7; } .about-feature-image { margin: 0 var(--site-gutter); overflow: hidden; border-radius: 14px; background: #f4f2ed; } .about-feature-image img { display: block; width: 100%; aspect-ratio: 1.96 / 1; object-fit: cover; object-position: center 46%; } .about-belief { display: grid; grid-template-columns: minmax(0, .92fr) minmax(0, 1.08fr); gap: clamp(32px, 4vw, 56px); align-items: center; padding: var(--site-section-y) var(--site-gutter) 44px; } .about-belief figure { margin: 0; overflow: hidden; border-radius: 14px; background: #f4f2ed; } .about-belief figure img { display: block; width: 100%; aspect-ratio: 1.42 / 1; object-fit: cover; object-position: 52% center; } .about-belief > div { max-width: 590px; } .about-belief .about-eyebrow { margin-bottom: 10px; } .about-belief h2 { max-width: 560px; margin: 0 0 20px; font-size: clamp(22px, 1.6vw, 28px); font-weight: 400; line-height: 1.15; letter-spacing: .03em; text-transform: uppercase; } .about-belief > div > p:last-child { max-width: 560px; margin: 0; color: #5f5b57; font-size: var(--type-body); line-height: 1.7; } .about-values { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); padding: 8px clamp(48px, 7vw, 96px) 40px; } .about-values article { position: relative; display: flex; min-width: 0; min-height: 148px; align-items: center; justify-content: center; flex-direction: column; gap: 14px; padding: 20px 24px; text-align: center; } .about-values article:not(:last-child)::after { content: ""; position: absolute; top: 18%; right: 0; width: 1px; height: 64%; background: var(--line); } .about-value-icon { width: 68px; height: 68px; border-radius: 50%; display: grid; place-items: center; background: #eeece3; color: var(--ink); } .about-value-icon svg { width: 32px; height: 32px; fill: none; stroke: currentColor; stroke-width: 1.45; stroke-linecap: round; stroke-linejoin: round; } .about-values h3 { margin: 0; font-size: var(--type-h6); font-weight: 500; line-height: 1.35; letter-spacing: -.01em; } .about-closing { position: relative; min-height: 252px; display: flex; align-items: center; justify-content: center; flex-direction: column; gap: 23px; padding: 52px var(--site-gutter) 38px; overflow: hidden; background: #f7f3ed url("assets/about-closing-background-v2.webp") center / cover no-repeat; text-align: center; } .about-closing > a, .about-closing > p, .about-closing > i { position: relative; z-index: 2; } .about-closing > a { display: inline-flex; width: min(410px, 100%); min-height: 58px; align-items: center; justify-content: center; gap: 22px; padding: 14px 28px; border-radius: 999px; background: var(--ink); color: #fff; font-size: 11px; font-weight: 600; letter-spacing: .22em; text-transform: uppercase; } .about-closing > a b { font-size: 22px; font-weight: 300; line-height: 1; } .about-closing > p { margin: 0; color: #686b65; font-size: 10px; font-weight: 500; line-height: 1.4; letter-spacing: .28em; text-transform: uppercase; } .about-closing > i { width: 42px; height: 1px; background: #96998e; } @media (max-width: 1024px) { .about-intro { padding-top: 44px; } .about-belief { gap: 32px; padding-bottom: 36px; } .about-values { padding-inline: var(--site-gutter); } .about-values article { padding-inline: 14px; } } @media (max-width: 768px) { .about-intro { padding: 36px 16px 26px; } .about-intro .about-eyebrow { margin-bottom: 8px; } .about-intro h1 { margin-bottom: 14px; font-size: 21px; line-height: 1.18; letter-spacing: .3px; } .about-intro > p:last-child { font-size: 15px; line-height: 1.65; } .about-feature-image { margin-inline: 16px; border-radius: 11px; } .about-feature-image img { aspect-ratio: 4 / 3; object-position: 48% center; } .about-belief { grid-template-columns: 1fr; gap: 28px; padding: 36px 16px 30px; } .about-belief > div { max-width: none; text-align: center; } .about-belief figure { border-radius: 11px; } .about-belief figure img { aspect-ratio: 4 / 3; } .about-belief h2 { margin-bottom: 16px; font-size: 21px; line-height: 1.18; letter-spacing: .3px; } .about-belief .about-eyebrow { margin-bottom: 8px; } .about-belief > div > p:last-child { font-size: 15px; line-height: 1.65; } .about-values { padding: 6px 8px 28px; } .about-values article { min-height: 122px; gap: 10px; padding: 16px 7px; } .about-value-icon { width: 52px; height: 52px; } .about-value-icon svg { width: 25px; height: 25px; } .about-values h3 { font-size: 12px; line-height: 1.35; } .about-closing { min-height: 224px; gap: 20px; padding: 44px 16px 38px; } .about-closing > a { min-height: 52px; padding-inline: 18px; font-size: 10px; } .about-closing > p { max-width: 230px; font-size: 9px; } } /* ========================================================================== Checkout payment methods — selectable tiles (2026-09-25) Whole tile is the click target; selected tile gets an ink outline. PayPal renders its own buttons; only radius/height are tuned to the form. ========================================================================== */ .checkout-gateways-container { padding: 0; border: 0; background: transparent; } .checkout-gateways-container .wc_payment_methods { display: grid; gap: 10px; } .checkout-gateways-container .wc_payment_method { display: block; position: relative; border: 1px solid #dcdad4; border-radius: 8px; background: #fff; transition: border-color .2s, box-shadow .2s, background-color .2s; } .checkout-gateways-container .wc_payment_method:hover { border-color: #b9b6ae; } .checkout-gateways-container .wc_payment_method:has(> input:checked) { border-color: #1b1e19; box-shadow: inset 0 0 0 1px #1b1e19; background: #fcfbf9; } .checkout-gateways-container .wc_payment_method > input.input-radio { position: absolute; left: 18px; top: 50%; width: 18px; height: 18px; margin: -9px 0 0; -webkit-appearance: none; appearance: none; border: 1.5px solid #b9b6ae; border-radius: 50%; background: #fff; cursor: pointer; transition: border-width .15s, border-color .15s; } .checkout-gateways-container .wc_payment_method > input.input-radio:checked { border: 5.5px solid #1b1e19; } .checkout-gateways-container .wc_payment_method > input.input-radio:focus-visible { outline: 2px solid #1b1e19; outline-offset: 3px; } .checkout-gateways-container .wc_payment_method > label { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 16px; row-gap: 3px; align-items: center; min-height: 68px; margin: 0; padding: 14px 18px 14px 50px; color: #1b1e19; font-size: 15px; font-weight: 600; line-height: 1.35; cursor: pointer; } .checkout-gateways-container .pay-method-meta { display: contents; } .checkout-gateways-container .pay-method-hint { grid-column: 1; color: #70756b; font-size: 12.5px; font-weight: 400; line-height: 1.45; } .checkout-gateways-container .pay-method-marks { grid-column: 2; grid-row: 1 / span 2; display: flex; align-items: center; gap: 5px; } .checkout-gateways-container .pay-mark { display: block; width: 38px; height: 24px; } .checkout-gateways-container .pay-mark--paypal { width: 64px; } /* Gateway description duplicates the tile hint. */ .checkout-gateways-container .payment_box { display: none !important; } .checkout-gateways-container .ppc-button-wrapper, .checkout-gateways-container [id^="ppc-button-ppcp-"] { margin: 16px 0 0; } .checkout-gateways-container .ppc-button-wrapper [id^="ppc-button-ppcp-"] { margin: 0; } .checkout-gateways-container paypal-button, .checkout-gateways-container paypal-basic-card-button { --paypal-button-border-radius: 8px !important; height: 52px !important; } .checkout-payment-footnote { margin-top: 14px; font-size: 12px; color: #70756b; } @media (max-width: 480px) { .checkout-gateways-container .wc_payment_method > label { grid-template-columns: minmax(0, 1fr); padding: 14px 14px 14px 46px; } .checkout-gateways-container .wc_payment_method > input.input-radio { left: 16px; top: 24px; margin-top: 0; } .checkout-gateways-container .pay-method-marks { grid-column: 1; grid-row: auto; margin-top: 6px; } } /* Privacy text is hidden in this box, so its wrapper must not keep its 40px gap. */ .checkout-gateways-container .place-order, .checkout-gateways-container .woocommerce-terms-and-conditions-wrapper { margin: 0; } /* ========================================================================== Homepage content sections (2026-09-25): trust bar, brand story, FAQ. Horizontal insets reuse the sitewide container/gutter axis. ========================================================================== */ .home-trust, .home-story, .home-faq { padding-inline: max(var(--site-gutter), calc((100% - var(--site-container)) / 2)); } /* Trust bar */ .home-trust { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); padding-block: 26px; background: #fff; border-bottom: 1px solid #e6e1d9; } .home-trust-item { display: flex; align-items: center; justify-content: center; gap: 14px; padding: 4px 16px; position: relative; } .home-trust-item + .home-trust-item::before { content: ""; position: absolute; left: 0; top: 12%; height: 76%; border-left: 1px solid #e6e1d9; } .home-trust-item svg { flex: 0 0 auto; width: 34px; height: 34px; fill: none; stroke: #1b1e19; stroke-width: 1.55; stroke-linecap: round; stroke-linejoin: round; } .home-trust-item strong { display: block; color: #1b1e19; font-size: 14px; font-weight: 600; line-height: 1.3; } .home-trust-item span { display: block; color: #70756b; font-size: 12.5px; line-height: 1.4; } /* Brand story */ .home-story { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: clamp(32px, 5vw, 80px); align-items: center; padding-block: var(--site-section-y); } .home-story-media { overflow: hidden; border-radius: 12px; aspect-ratio: 3 / 2; background: #ebe6de; } .home-story-media img { display: block; width: 100%; height: 100%; object-fit: cover; } .home-story-copy { max-width: 480px; } .home-story-copy h2, .home-faq-intro h2 { margin: 0 0 18px; color: #1b1e19; font-size: clamp(22px, 1.6vw, 28px); font-weight: 400; line-height: 1.15; letter-spacing: .03em; text-transform: uppercase; } .home-story-copy p:not(.catalog-eyebrow) { margin: 0 0 14px; color: #4c5048; font-size: 15px; line-height: 1.7; } .home-story-link { display: inline-flex; align-items: center; gap: 10px; min-height: 48px; margin-top: 12px; padding: 0 28px; border-radius: 999px; background: #1b1b1d; color: #fff; font-size: 12px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; transition: background-color .2s; } .home-story-link:hover { background: #3a3a3d; } /* FAQ */ .home-faq { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.6fr); gap: clamp(32px, 6vw, 96px); align-items: start; padding-block: 8px var(--site-section-y); } .home-faq-intro p:not(.catalog-eyebrow) { margin: 0; color: #70756b; font-size: 14px; line-height: 1.6; } .home-faq-intro a { color: #1b1e19; text-decoration: underline; text-underline-offset: 3px; } .home-faq-list { border-top: 1px solid #dcd6cc; } .home-faq-item { border-bottom: 1px solid #dcd6cc; } .home-faq-item summary { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 20px 0; color: #1b1e19; font-size: 16px; font-weight: 500; line-height: 1.4; list-style: none; cursor: pointer; } .home-faq-item summary::-webkit-details-marker { display: none; } .home-faq-item summary::after { content: ""; flex: 0 0 auto; width: 12px; height: 12px; background: linear-gradient(#1b1e19, #1b1e19) center / 12px 1.5px no-repeat, linear-gradient(#1b1e19, #1b1e19) center / 1.5px 12px no-repeat; transition: transform .2s; } .home-faq-item[open] summary::after { transform: rotate(45deg); } .home-faq-item summary:focus-visible { outline: 2px solid #1b1e19; outline-offset: 4px; } .home-faq-answer { padding: 0 40px 22px 0; } .home-faq-answer p { margin: 0 0 10px; color: #4c5048; font-size: 14.5px; line-height: 1.7; } .home-faq-answer a { color: #1b1e19; font-size: 13px; font-weight: 600; text-decoration: underline; text-underline-offset: 3px; } @media (max-width: 1024px) { .home-trust { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 18px; } .home-trust-item:nth-child(3)::before { display: none; } .home-trust-item { justify-content: flex-start; } .home-faq { grid-template-columns: minmax(0, 1fr); gap: 24px; } } @media (max-width: 768px) { .home-trust { padding-block: 20px; column-gap: 12px; } .home-trust-item { align-items: flex-start; gap: 10px; padding: 0; } .home-trust-item::before { display: none; } .home-trust-item svg { width: 26px; height: 26px; } .home-trust-item strong { font-size: 13px; } .home-trust-item span { font-size: 11.5px; } .home-story { grid-template-columns: minmax(0, 1fr); gap: 24px; } .home-story-copy p:not(.catalog-eyebrow) { font-size: 14px; } .home-faq-item summary { padding: 17px 0; font-size: 15px; } .home-faq-answer { padding-right: 0; } } /* FAQ left column: support card balances the accordion; sticky on desktop. */ .home-faq { grid-template-columns: minmax(0, 1fr) minmax(0, 1.5fr); } .home-faq-intro { position: sticky; top: 110px; } .home-faq-intro > p:not(.catalog-eyebrow) { max-width: 400px; margin-bottom: 28px; } .home-faq-help { max-width: 420px; padding: 24px; border: 1px solid #e3ddd3; border-radius: 12px; background: #fff; } .home-faq-help-head { display: flex; align-items: center; gap: 14px; } .home-faq-help-head svg { flex: 0 0 auto; width: 40px; height: 40px; padding: 8px; border-radius: 50%; background: #f3efe8; fill: none; stroke: #1b1e19; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; } .home-faq-help-head strong { display: block; color: #1b1e19; font-size: 15px; font-weight: 600; line-height: 1.3; } .home-faq-help-head span { display: block; color: #70756b; font-size: 12.5px; line-height: 1.45; } .home-faq-intro .home-faq-help-email { display: flex; align-items: center; justify-content: center; min-height: 46px; margin: 18px 0 8px; border-radius: 999px; background: #1b1b1d; color: #fff; font-size: 14px; font-weight: 500; text-decoration: none; transition: background-color .2s; } .home-faq-intro .home-faq-help-email:hover { background: #3a3a3d; } .home-faq-help-links { margin: 0; padding: 0; list-style: none; } .home-faq-help-links li + li { border-top: 1px solid #eee9e1; } .home-faq-intro .home-faq-help-links a { display: flex; align-items: center; justify-content: space-between; padding: 12px 2px; color: #1b1e19; font-size: 13.5px; text-decoration: none; } .home-faq-intro .home-faq-help-links a:hover { text-decoration: underline; text-underline-offset: 3px; } @media (max-width: 1024px) { .home-faq { grid-template-columns: minmax(0, 1fr); } .home-faq-intro { position: static; } /* Stacked layout: heading first, then the accordion, then the help card. */ .home-faq { display: flex; flex-direction: column; gap: 0; } .home-faq-intro { display: contents; } .home-faq-intro > p:not(.catalog-eyebrow) { margin-bottom: 20px; } .home-faq-list { order: 1; } .home-faq-help { order: 2; max-width: none; width: 100%; box-sizing: border-box; margin-top: 28px; } } /* Mobile: the catalog above already ends with 44px of bottom padding, so the brand story keeps only a small white inset (20px) so the image doesn't sit flush on the cream/white edge, instead of a doubled 88px gap. */ @media (max-width: 768px) { .home-story { padding-top: 20px; } } /* Mobile: trim the cream space under the homepage product carousel to match the 20px white inset above the brand-story image (44px -> 20px). */ @media (max-width: 768px) { .catalog:has(+ .home-story) { padding-bottom: 20px; } } /* ========================================================================== Homepage redesign (2026-09-25): "Shop by room" tiles + single curated rail. ========================================================================== */ .home-categories { padding: var(--site-section-y) max(var(--site-gutter), calc((100% - var(--site-container)) / 2)); background: #fff; } .home-categories .catalog-intro { max-width: none; } .home-category-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--site-grid-gap, 24px); } .home-category-tile { position: relative; display: block; overflow: hidden; aspect-ratio: 3 / 4; border-radius: 12px; background: #efebe4; isolation: isolate; } .home-category-tile img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .6s ease; } .home-category-tile::after { content: ""; position: absolute; inset: 45% 0 0; background: linear-gradient(to top, rgba(20, 20, 18, .62), rgba(20, 20, 18, 0)); z-index: 1; } .home-category-tile:hover img { transform: scale(1.04); } .home-category-label { position: absolute; left: 22px; right: 22px; bottom: 20px; z-index: 2; display: flex; flex-direction: column; gap: 4px; color: #fff; } .home-category-label strong { font-size: 19px; font-weight: 500; line-height: 1.2; letter-spacing: .01em; } .home-category-label > span { font-size: 11px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; opacity: .9; } .home-category-tile:focus-visible { outline: 2px solid #1b1e19; outline-offset: 3px; } /* Curated rail footer link */ .catalog-footer { display: flex; justify-content: center; max-width: var(--site-container); margin: 36px auto 0; } .catalog-shop-all { display: inline-flex; align-items: center; gap: 10px; min-height: 48px; padding: 0 30px; border: 1px solid #1b1b1d; border-radius: 999px; color: #1b1b1d; font-size: 12px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; transition: background-color .2s, color .2s; } .catalog-shop-all:hover { background: #1b1b1d; color: #fff; } @media (max-width: 1024px) { .home-category-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 768px) { .home-categories { padding-bottom: 20px; } .home-category-grid { gap: 12px; } .home-category-tile { aspect-ratio: 4 / 5; border-radius: 10px; } .home-category-label { left: 14px; right: 14px; bottom: 14px; } .home-category-label strong { font-size: 15px; } .home-category-label > span { font-size: 9.5px; } .catalog-footer { margin-top: 24px; } } /* ========================================================================== Shop / category archive fixes (2026-09-25) - Controls row could overlap: pills and sort shared one non-wrapping row above 1100px. Now the sort block wraps below when space runs out and the pills scroll horizontally instead of spilling under it. - Title/empty-state headings used Georgia; aligned with the sitewide page title style (Inter, uppercase, same scale as the Cart title). ========================================================================== */ .product-catalog-controls { flex-wrap: wrap; row-gap: 14px; } .product-category-pills { flex: 1 1 auto; max-width: 100%; overflow-x: auto; padding-bottom: 2px; scrollbar-width: none; } .product-category-pills::-webkit-scrollbar { display: none; } .product-category-pills a { flex: 0 0 auto; } .product-catalog-meta { margin-left: auto; } .product-catalog-header h1, .product-catalog-empty h2 { font-family: "Inter", Arial, sans-serif; font-weight: 400; text-transform: uppercase; } .product-catalog-header h1 { margin-bottom: 10px; font-size: 28px; line-height: 1.2; letter-spacing: .5px; } .product-catalog-empty h2 { font-size: 22px; letter-spacing: .4px; } @media (max-width: 768px) { .product-catalog-header h1 { margin-bottom: 8px; font-size: 24px; letter-spacing: .4px; } .product-catalog-empty h2 { font-size: 19px; } } /* Mobile/tablet hero (421–768px): an older rule letterboxed the banner (object-fit:contain on a 1672:941 box, grey #ddd bars). Only ≤420px had been switched to a full-bleed crop — extend that to every width ≤768px. */ @media (max-width: 768px) { .hero { height: 300px; /* was 500px; -40% so the banner doesn't fill the phone screen */ min-height: 300px; aspect-ratio: auto; } .hero-slide img { object-fit: cover; object-position: 62% center; } /* Anchor the copy to the bottom so the floating header never covers it. */ .hero-copy { top: auto; bottom: 30px; transform: none; } } /* Desktop/tablet cart badge: sit on the icon's top-right corner like the mobile header, instead of a separate 21px circle 9px to the right. */ @media (min-width: 769px) { .header-actions #cart-toggle { position: relative; gap: 0; /* The badge overhangs the icon by 15px; reserve it so the badge's outer edge sits the same distance from the header edge as the left nav. */ margin-right: 15px; } .header-actions #cart-toggle svg { width: 24px; height: 24px; } .header-actions #cart-count { position: absolute; top: -8px; right: -15px; width: 20px; height: 20px; font-size: 10px; line-height: 18px; border: 1px solid rgba(250, 248, 244, .95); } } /* ========================================================================== Header product search (2026-09-25): overlay panel + live suggestions. ========================================================================== */ .screen-reader-text { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; } .site-search { position: fixed; inset: 0; z-index: 1600; background: rgba(27, 27, 29, .28); opacity: 0; visibility: hidden; /* Hide only after the fade-out finishes… */ transition: opacity .25s ease, visibility 0s linear .25s; } .site-search.open { opacity: 1; visibility: visible; /* …but become visible (and focusable) immediately on open. */ transition: opacity .25s ease, visibility 0s; } .search-open, .search-open body { overflow: hidden; } .site-search-panel { width: min(760px, calc(100% - 2 * var(--site-gutter))); margin: 110px auto 0; padding: 10px 26px 22px; background: #fff; border-radius: 16px; box-shadow: 0 24px 60px rgba(27, 27, 29, .16); transform: translateY(-12px); transition: transform .25s ease; } .site-search.open .site-search-panel { transform: none; } .site-search-form { display: flex; align-items: center; gap: 14px; border-bottom: 1px solid #e3ddd3; } .site-search-icon { flex: 0 0 auto; width: 22px; height: 22px; fill: none; stroke: #1b1e19; stroke-width: 1.8; } .site-search-form input[type="search"] { flex: 1; min-width: 0; height: 64px; border: 0; outline: 0; background: transparent; color: #1b1e19; font-size: 20px; font-weight: 400; -webkit-appearance: none; appearance: none; } .site-search-form input[type="search"]::-webkit-search-cancel-button { display: none; } .site-search-form input::placeholder { color: #a3a69e; } .site-search-close { display: grid; place-items: center; flex: 0 0 auto; width: 40px; height: 40px; border-radius: 50%; transition: background-color .2s; } .site-search-close:hover { background: #f3efe8; } .site-search-close svg { width: 16px; height: 16px; stroke: #1b1e19; stroke-width: 1.8; } .site-search-results { transition: opacity .2s; } .site-search-results.is-loading { opacity: .5; } .site-search-list { margin: 8px 0 0; padding: 0; list-style: none; } .site-search-list a { display: grid; grid-template-columns: 56px minmax(0, 1fr) auto; gap: 16px; align-items: center; padding: 10px 8px; border-radius: 10px; color: #1b1e19; transition: background-color .15s; } .site-search-list a:hover, .site-search-list a:focus-visible { background: #f7f4ef; outline: 0; } .site-search-list img { width: 56px; height: 56px; border-radius: 8px; object-fit: cover; background: #f3efe8; } .site-search-name { font-size: 14.5px; line-height: 1.4; } .site-search-price { font-size: 14px; font-weight: 600; white-space: nowrap; } .site-search-all { display: inline-block; margin: 12px 8px 0; color: #1b1e19; font-size: 13px; font-weight: 600; text-decoration: underline; text-underline-offset: 3px; } .site-search-empty { margin: 18px 8px 4px; color: #70756b; font-size: 14px; } /* Mobile menu entry point (header search icon is hidden ≤768px). */ .mobile-nav-search { display: flex; align-items: center; gap: 10px; width: 100%; min-height: 46px; margin-top: 22px; padding: 0 16px; border: 1px solid #e3ddd3; border-radius: 999px; color: #70756b; font-size: 14px; text-align: left; } .mobile-nav-search svg { width: 18px; height: 18px; fill: none; stroke: #1b1e19; stroke-width: 1.8; } @media (max-width: 768px) { .site-search-panel { width: calc(100% - 24px); margin-top: 12px; padding: 6px 16px 16px; border-radius: 14px; } .site-search-form input[type="search"] { height: 56px; font-size: 16px; /* 16px stops iOS zooming into the field */ } .site-search-list a { grid-template-columns: 48px minmax(0, 1fr) auto; gap: 12px; padding: 8px 4px; } .site-search-list img { width: 48px; height: 48px; } .site-search-name { font-size: 13.5px; } } /* Button colour standard (var(--ink) fill, white text, #000 hover) applied to the shop/category page — these were still olive #667257. */ .product-category-pills a.active, .product-catalog-pagination .page-numbers.current, .product-catalog-empty a { color: #fff; background: var(--ink); border-color: var(--ink); } .product-category-pills a:not(.active):hover { color: var(--ink); background: rgba(255, 255, 255, 0.28); border-color: var(--ink); } .product-category-pills a.active:hover, .product-catalog-empty a:hover { background: #000; border-color: #000; } .product-page--editorial .thumb.active { border-color: var(--ink); } /* ========================================================================== Product page improvements (2026-09-25) ========================================================================== */ /* Desktop: the vertical thumbnail column reserves room for its ▲/▼ buttons so the up arrow no longer sits on top of the first thumbnail. */ @media (min-width: 1025px) { .product-page--editorial .thumbs { padding: 32px 0; scroll-padding-block: 32px; } } /* Delivery, free-shipping nudge and payment marks under Add to cart. */ .product-delivery { display: grid; gap: 10px; margin: 18px 0 4px; padding: 16px 18px; border: 1px solid #e3ddd3; border-radius: 12px; background: #fff; color: #4c5048; font-size: 13.5px; line-height: 1.5; } .product-delivery p { display: flex; align-items: center; gap: 10px; margin: 0; } /* Only the truck icon — the payment marks below carry their own fills. */ .product-delivery > p > svg { flex: 0 0 auto; width: 22px; height: 22px; fill: none; stroke: #1b1e19; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; } .product-delivery strong { color: #1b1e19; font-weight: 600; } .product-delivery-free { display: block !important; /* plain inline text, not flex items */ padding-left: 32px; } .product-delivery-free .amount { color: #1b1e19; font-weight: 600; } .product-payments { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; padding-top: 10px; border-top: 1px solid #eee9e1; font-size: 12.5px; color: #70756b; } .product-payment-marks { display: flex; flex-wrap: wrap; gap: 5px; } .product-payment-marks .pay-mark { display: block; width: 34px; height: 22px; } .product-payment-marks .pay-mark--paypal { width: 58px; } /* Shipping/returns assurances now link to the policy pages. */ a.product-assurance { color: inherit; text-decoration: none; } a.product-assurance:hover strong { text-decoration: underline; text-underline-offset: 3px; } /* Shipping & Returns content (desktop tab + mobile accordion). */ .product-policy-list { margin: 0 0 12px; padding-left: 18px; } .product-policy-list li { margin-bottom: 8px; } .product-policy-links { display: flex; flex-wrap: wrap; gap: 8px 20px; margin: 0; } .product-policy-links a { color: #1b1e19; font-size: 13px; font-weight: 600; text-decoration: underline; text-underline-offset: 3px; } @media (max-width: 768px) { .product-delivery { padding: 14px; font-size: 13px; } .product-policy-list { font-size: 14px; line-height: 1.6; } } /* ========================================================================== About page rewrite (2026-09-25): checklist, value descriptions, contact. ========================================================================== */ .about-belief > div > p.about-belief-lead, .about-belief > div > p:last-child { max-width: 560px; margin: 0; color: #5f5b57; font-size: var(--type-body); line-height: 1.7; } .about-checklist { max-width: 560px; margin: 16px 0 18px; padding: 0; list-style: none; } .about-checklist li { position: relative; padding: 9px 0 9px 30px; border-bottom: 1px solid #ebe6de; color: #2e312b; font-size: 15px; line-height: 1.5; } .about-checklist li:first-child { border-top: 1px solid #ebe6de; } .about-checklist li::before { content: ""; position: absolute; left: 4px; top: 15px; width: 11px; height: 6px; border-left: 1.6px solid var(--ink); border-bottom: 1.6px solid var(--ink); transform: rotate(-45deg); } .about-values article p { max-width: 280px; margin: 0; color: #6b6e66; font-size: 13.5px; line-height: 1.55; } .about-values article p a, .about-contact a { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; } .about-contact { margin: 8px var(--site-gutter) 40px; padding: 34px 24px; border: 1px solid #e3ddd3; border-radius: 14px; background: #fff; text-align: center; } .about-contact h2 { margin: 0 0 10px; color: #1b1e19; font-size: clamp(18px, 1.3vw, 22px); font-weight: 400; letter-spacing: .03em; text-transform: uppercase; } .about-contact p { margin: 0; color: #5f5b57; font-size: 15px; line-height: 1.6; } @media (max-width: 768px) { .about-values { grid-template-columns: minmax(0, 1fr); gap: 0; padding: 6px 16px 24px; } .about-values article { display: grid; grid-template-columns: 52px minmax(0, 1fr); grid-template-rows: auto auto; column-gap: 14px; row-gap: 2px; align-items: center; justify-content: stretch; min-height: 0; padding: 14px 0; text-align: left; border-bottom: 1px solid var(--line); } .about-values article:last-child { border-bottom: 0; } .about-values article:not(:last-child)::after { display: none; } .about-value-icon { grid-row: 1 / span 2; } .about-values h3 { align-self: end; font-size: 14px; } .about-values article p { align-self: start; max-width: none; font-size: 13px; } .about-checklist li { font-size: 14px; text-align: left; } .about-contact { margin: 0 16px 28px; padding: 26px 18px; } .about-contact p { font-size: 14px; } } /* Policy pages (2026-09-25): show the full policy text on phones — the old 2-line clamp hid key terms — and drop the arrow that looked tappable. */ @media (max-width: 768px) { .policy-section p { display: block; overflow: visible; -webkit-line-clamp: unset; line-height: 1.5; } .policy-section-arrow { display: none; } } .contact-form-heading p a { color: #1b1e19; text-decoration: underline; text-underline-offset: 3px; } /* Footer newsletter (2026-09-25): working sign-up, status + consent line. */ .newsletter-hp { position: absolute !important; left: -9999px; width: 1px; height: 1px; overflow: hidden; } .newsletter-status { margin: 4px auto 0; color: #2f6b3a; font-size: 14px; font-weight: 500; text-align: center; } .newsletter-status.is-error { color: #b42318; } .newsletter-consent { max-width: 560px; margin: 10px auto 0; color: #8a8d86; font-size: 12px; line-height: 1.5; text-align: center; } .newsletter-consent a { color: inherit; text-decoration: underline; text-underline-offset: 2px; } .site-footer-newsletter button:disabled { opacity: .6; } /* Mobile footer links are plain links: point the chevron right (›), not down. */ @media (max-width: 768px) { .site-footer nav a:after { transform: rotate(-45deg); } } /* Desktop footer bottom bar: "Secure website" stays right-aligned but ends before the floating "Need Help?" button (≈180px wide, 22px from the edge). */ @media (min-width: 769px) { .site-footer-bottom { justify-content: space-between; padding-right: 230px; } } /* The theme's `.site-footer-newsletter p` rule (margin:0, 15px, 1.1px tracking) outranked the consent/status styles — scope them under the section. */ .site-footer-newsletter .newsletter-consent, .site-footer-newsletter .newsletter-status { max-width: 560px; margin-left: auto; margin-right: auto; text-align: center; letter-spacing: normal; } .site-footer-newsletter .newsletter-consent { margin-top: 10px; color: #8a8d86; font-size: 12.5px; line-height: 1.55; } .site-footer-newsletter .newsletter-status { margin-top: 4px; font-size: 14px; } @media (max-width: 768px) { .site-footer-newsletter .newsletter-consent { max-width: 320px; font-size: 12px; } }