:root{--paper:#F4F1E9;--paper-2:#ECE6D8;--panel:#E5D9C2;--ink:#17140E;--ink-soft:#241F16;--rubric:#1F4E79;--rubric-dark:#163A5C;--eyebrow-mark:"\00A7";--accent-on-dark:#A7C2DD;--accent-creed:#8FB1D0;--accent-pale:#CFE0F0;--rubric-rgb:31,78,121;--mark-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='black'%3E%3Cpath d='M7 9.5C7 6.5 8 4.5 8.5 4.5 9 4.5 10 6.5 10 9 10 6 11 4 12 4 13 4 14 6 14 9 14 6.5 15 4.5 15.5 4.5 16 4.5 17 6.5 17 9.5 17 12.5 15 15 12 15.5 9 15 7 12.5 7 9.5Z'/%3E%3Cpath d='M11.4 15h1.2v7h-1.2z'/%3E%3Cpath d='M12 19C8.5 18.5 6.8 16.5 6.5 14 9.5 14.8 11.4 16.3 12 19Z'/%3E%3Cpath d='M12 19C15.5 18.5 17.2 16.5 17.5 14 14.5 14.8 12.6 16.3 12 19Z'/%3E%3C/svg%3E");--header-bg:#fff;--footer-bg:#173B5C;--muted:#6E6657;--line:rgba(23,20,14,.14);--line-lt:rgba(244,241,233,.16);} /* Color-scheme toggle. Default = Geneva navy (blue) — the primary brand theme. Setting data-theme="red" on swaps the accent back to the original rubric red + pilcrow eyebrow. The head script sets it from ?theme=blue|red (remembered in localStorage); each theme also overrides the on-dark/pale accent tints + --rubric-rgb. */ [data-theme="red"]{--rubric:#9E2B22;--rubric-dark:#85221b;--eyebrow-mark:"\00B6";--footer-bg:#7E211A;--accent-on-dark:#E7A79F;--accent-creed:#D98A82;--accent-pale:#F3CFCB;--rubric-rgb:158,43,34;} *{box-sizing:border-box;} body{margin:0;background:var(--paper);color:var(--ink);font-family:Inter,system-ui,sans-serif;font-size:16px;line-height:1.6;-webkit-font-smoothing:antialiased;min-height:100vh;display:flex;flex-direction:column;} /* Sticky footer (all page templates): short pages stretch the main area so the footer sits at the bottom of the viewport instead of floating mid-page with blank space beneath it. Most pages wrap
+footer in
; some (index, products, categories) put content/footer straight in . These rules cover every variant — whichever wrapper exists grows to fill. */ .page{flex:1 0 auto;display:flex;flex-direction:column;} #main{flex:1 0 auto;} .foot{margin-top:auto;} a{color:inherit;text-decoration:none;}img{max-width:100%;display:block;} .wrap{max-width:1180px;margin:0 auto;padding:0 28px;} .serif{font-family:Fraunces,Georgia,serif;} .rubric{font:500 .72rem/1 Inter;letter-spacing:.24em;text-transform:uppercase;color:var(--rubric);display:inline-flex;align-items:center;gap:.55em;} .rubric::before{content:"";display:inline-block;width:1.15em;height:1.15em;background-color:currentColor;-webkit-mask:var(--mark-mask) center/contain no-repeat;mask:var(--mark-mask) center/contain no-repeat;} .btn{display:inline-block;font:500 .82rem/1 Inter;letter-spacing:.1em;text-transform:uppercase;padding:15px 30px;border:1px solid var(--ink);cursor:pointer;transition:.18s;} .btn-solid{background:var(--rubric);border-color:var(--rubric);color:var(--paper);}.btn-solid:hover{background:var(--rubric-dark);border-color:var(--rubric-dark);} .btn-ghost{background:transparent;color:var(--paper);border-color:var(--line-lt);}.btn-ghost:hover{background:var(--paper);color:var(--ink);border-color:var(--paper);} .utility{background:var(--ink);color:var(--paper);font:500 .72rem/1 Inter;letter-spacing:.14em;text-transform:uppercase;} .utility .wrap{display:flex;align-items:center;justify-content:space-between;padding:10px 28px;} .utility .msg .dot{color:var(--rubric);margin:0 .6em;} .utility .msg .ann-flash{background:var(--rubric);color:var(--paper);padding:2px 9px;border-radius:2px;margin-left:.7em;letter-spacing:.08em;} .utility .soc{display:flex;gap:14px;font-size:.95rem;} .utility .soc a:hover{color:var(--rubric);} .head{position:sticky;top:0;z-index:40;background:var(--header-bg);border-bottom:1px solid var(--line);} .head .wrap.head-top{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;height:76px;gap:12px;} .head-top .burger{grid-column:1;justify-self:start;} .head-top .brand{grid-column:2;justify-self:center;} .head-top .icons{grid-column:3;justify-self:end;} .navrow{border-top:1px solid var(--line);} .navrow .menu{max-width:1180px;margin:0 auto;padding:0 28px;justify-content:center;height:auto;gap:0;} .navrow .menu>li>a{padding:14px 18px;} .brand{font-family:Fraunces,serif;font-weight:600;font-size:1.44rem;letter-spacing:.01em;display:inline-flex;align-items:center;}.brand .amp{color:var(--rubric);} .brand img{height:54px;width:auto;display:block;} .d-top .brand img{height:30px;} .menu{display:flex;gap:30px;list-style:none;margin:0;padding:0;height:100%;} .menu>li{display:flex;align-items:center;} .menu>li>a{font:500 .78rem/1 Inter;letter-spacing:.13em;text-transform:uppercase;padding:6px 0;border-bottom:1.5px solid transparent;transition:.15s;} .menu>li:hover>a,.menu>li:focus-within>a{color:var(--rubric);border-color:var(--rubric);} .icons{display:flex;gap:18px;align-items:center;}.icons a,.icons button{display:inline-flex;background:none;border:0;color:var(--ink);cursor:pointer;padding:0;}.icons svg{width:21px;height:21px;} .icons #cartToggle{position:relative;overflow:visible;} .cart-count{position:absolute;top:-6px;right:-8px;min-width:16px;height:16px;padding:0 4px;box-sizing:border-box;border-radius:8px;background:var(--rubric);color:#fff;font:600 .6rem/16px Inter;text-align:center;letter-spacing:.02em;pointer-events:none;} .cart-count.hidden{display:none;} .burger{display:none;appearance:none;-webkit-appearance:none;background:none;border:0;padding:0;margin:0;cursor:pointer;color:var(--ink);align-items:center;justify-content:center;} .burger svg{width:24px;height:24px;display:block;} .mega{position:absolute;left:0;right:0;top:100%;background:var(--paper);border-top:1px solid var(--line);box-shadow:0 26px 46px rgba(23,20,14,.12);opacity:0;visibility:hidden;transition:opacity .2s ease, visibility 0s linear .2s;z-index:39;} .menu>li:hover .mega,.menu>li:focus-within .mega{opacity:1;visibility:visible;transition:opacity .2s ease;} /* nowrap keeps all containers on one row so a promo never floats to a second line; the text columns' flex-shrink then compresses them (links wrap within reason) to make room, while the fixed-width promos hold their size. */ .mega .inner{max-width:1280px;margin:0 auto;padding:30px 28px 36px;display:flex;flex-wrap:nowrap;justify-content:center;gap:22px 16px;align-items:flex-start;} .mega .mh{flex:0 0 100%;margin-bottom:2px;} .mega a{font-size:.84rem;color:#43403a;padding:4px 0;display:block;border-bottom:1px solid transparent;width:max-content;} .mega a:hover{color:var(--rubric);} /* Promo block (mType=promo) — featured image+caption card in the mega panel. */ .mega a.mega-promo{flex:0 0 177px;align-self:flex-start;width:auto;padding:0;border:0;border-radius:0;overflow:visible;background:none;box-shadow:none;} .mega a.mega-promo .mega-promo-frame{display:block;overflow:hidden;background:#ECE6D8;} .mega a.mega-promo img{display:block;width:177px;height:236px;object-fit:cover;border-radius:0;background:#ECE6D8;transition:opacity .4s ease, transform .5s;} .mega a.mega-promo:hover .mega-promo-img{transform:scale(1.04);} .mega .mega-promo-t{display:block;font-weight:500;color:var(--ink);padding:8px 0 0;font-size:.82rem;} .mega a.mega-promo:hover .mega-promo-t{color:var(--rubric);} .mega .mega-promo-b{display:block;color:#7a766c;font-size:.76rem;line-height:1.3;padding:1px 0 0;} /* Grouped column (mType=group) / loose-link column: heading + child links. */ /* Text columns sit at their own content width (grow:0 → no empty padding inside a short block): narrow menus stay narrow, wider menus + fixed-width promos still fit one row, and columns shrink (text wraps within reason) before anything floats to a second row. max-width only caps a pathologically long single column; the panel's justify-content:center then clusters the blocks instead of stretching/spreading them. */ .mega .mega-col,.mega .mega-loose{flex:0 1 auto;min-width:0;max-width:240px;align-self:flex-start;} .mega .mega-col a{width:auto;white-space:normal;line-height:1.25;} /* 1-2 text columns: size to content (links don't wrap), plus a fixed breathing gutter so a dense column isn't cramped — a set amount beyond natural width, rather than growing to absorb all the slack (which over-pads short columns, the Discover-menu problem). */ .mega.mega-wide .mega-col,.mega.mega-wide .mega-loose{flex:0 1 auto;min-width:0;max-width:320px;padding-right:34px;} .mega.mega-wide .mega-col-h,.mega.mega-wide .mega-col a{white-space:nowrap;} /* Hairline "pinstripe" dividers between adjacent text columns only — never against an image block. Drawn as an absolutely-positioned pseudo-element so its height is independent of the column: it starts at the top of the content and runs the height of the promo image (236px, matching .mega-promo img). */ .mega .mega-col + .mega-col{position:relative;padding-left:22px;} .mega .mega-col + .mega-col::before{content:"";position:absolute;left:0;top:0;height:236px;width:1px;background:var(--line);} .mega .mega-col-h{display:block;font-size:.7rem;letter-spacing:.14em;text-transform:uppercase;color:#9b8f78;font-weight:600;padding:0;margin-bottom:4px;width:auto;} /* lazysizes fade-in + parchment placeholder while the image loads. */ .mega a.mega-promo img{background:#ECE6D8;} .mega img.lazyload{opacity:0;} .mega img.lazyloaded{opacity:1;transition:opacity .4s ease;} /* Below full desktop width, drop the feature image cards (they duplicate the text links) so the columns get the room; text menu stays to the drawer cutoff. */ @media(max-width:1280px){.mega a.mega-promo{display:none;}} .slider{position:relative;background:var(--ink);color:var(--paper);overflow:hidden;max-width:1280px;margin:0 auto;} .slides{display:flex;transition:transform .6s cubic-bezier(.4,0,.1,1);} .slide{min-width:100%;position:relative;} .imgslide{display:block;} .imgslide img{width:100%;height:auto;display:block;} .slide .wrap{padding:108px 28px 104px;position:relative;z-index:2;} .slide .rubric{color:var(--accent-creed);} .slide h2{font-family:Fraunces,serif;font-weight:500;font-size:clamp(2.8rem,8vw,5.6rem);line-height:.98;letter-spacing:-.018em;margin:.5rem 0 1.3rem;max-width:13ch;} .slide h2 em{font-style:italic;color:var(--rubric);} .slide p{font-size:1.16rem;color:#CFC7B5;max-width:34ch;margin:0 0 2.1rem;} .slide .ghost{position:absolute;right:-2%;bottom:-6%;font-family:Fraunces,serif;font-style:italic;font-size:clamp(5rem,15vw,12rem);color:rgba(244,241,233,.045);white-space:nowrap;z-index:1;pointer-events:none;} /* Sleek circular "glass" arrows (replaces the old translucent squares). */ .s-arrow{position:absolute;top:50%;transform:translateY(-50%);z-index:5;display:flex;align-items:center;justify-content:center;width:42px;height:42px;border-radius:50%;border:0;background:rgba(23,20,14,.30);color:#fff;font-size:1.3rem;line-height:1;cursor:pointer;backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);box-shadow:0 2px 10px rgba(23,20,14,.18);transition:background .18s ease,transform .18s ease;} .s-arrow:hover{background:rgba(23,20,14,.52);} .s-arrow:active{transform:translateY(-50%) scale(.92);} .s-arrow.prev{left:14px;}.s-arrow.next{right:14px;} .dots{position:absolute;bottom:24px;left:0;right:0;display:flex;justify-content:center;gap:10px;z-index:5;} .dot{width:9px;height:9px;border-radius:50%;border:1px solid rgba(244,241,233,.5);background:transparent;cursor:pointer;padding:0;}.dot.on{background:var(--rubric);border-color:var(--rubric);} /* Mobile: lift the dots off the image into a discrete strip below it (on the page parchment, not a black bar), and drop the arrows — autoplay + dots already cue the swipe. */ @media(max-width:700px){ .slider{background:var(--paper);} .dots{position:static;padding:13px 0 14px;} .dot{border-color:rgba(23,20,14,.32);} /* visible on the light strip */ .s-arrow{display:none;} } .section{padding:84px 0;} .section-head{display:flex;align-items:flex-end;justify-content:space-between;margin-bottom:38px;gap:20px;flex-wrap:wrap;} .section-head h2{font-family:Fraunces,serif;font-weight:500;font-size:clamp(1.9rem,4vw,2.7rem);letter-spacing:-.015em;margin:.5rem 0 0;} .section-head .more{font:500 .76rem/1 Inter;letter-spacing:.13em;text-transform:uppercase;color:var(--rubric);border-bottom:1.5px solid var(--rubric);padding-bottom:3px;} /* Interior page header (account, contact, faq, returns, legal, etc.) */ .page-hero{padding:48px 0 6px;} .page-hero .crumb{font:500 .72rem/1 Inter;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);margin-bottom:10px;} .page-hero .crumb a{color:inherit;text-decoration:none;}.page-hero .crumb a:hover{color:var(--rubric);} .page-hero h1{font-family:Fraunces,serif;font-weight:500;font-size:clamp(1.9rem,4vw,2.7rem);letter-spacing:-.015em;margin:0;} .page-hero h1::before{content:"";display:inline-block;width:.74em;height:.74em;background-color:var(--rubric);-webkit-mask:var(--mark-mask) center/contain no-repeat;mask:var(--mark-mask) center/contain no-repeat;vertical-align:-.02em;margin-right:.5rem;} .page-hero p.lede{color:var(--muted);max-width:60ch;margin:14px 0 0;} /* Long-form content pages (policies, FAQ, care, shipping) */ .prose{max-width:72ch;margin:0 auto;} .prose h2,.prose h3,.prose h4{font-family:Fraunces,serif;font-weight:500;letter-spacing:-.01em;margin:1.8em 0 .5em;} .prose h2{font-size:1.55rem;} .prose h3{font-size:1.3rem;} .prose h4{font-size:1.12rem;} .prose p,.prose li{line-height:1.7;} .prose ul,.prose ol{padding-left:1.2em;margin:0 0 1em;} .prose li{margin:.3em 0;} .prose a{color:var(--rubric);text-decoration:underline;text-underline-offset:2px;} .prose hr{border:0;border-top:1px solid var(--line);margin:1.8em 0;} .prose blockquote{border-left:3px solid var(--rubric);padding-left:1em;margin:1.4em 0;color:var(--muted);} .prose blockquote center{text-align:left;} /* "Still need help?" style call-to-action band */ .cta-band{background:var(--ink);color:var(--paper);text-align:center;padding:56px 0;} .cta-band h3{font-family:Fraunces,serif;font-weight:500;font-size:1.6rem;margin:0 0 18px;color:var(--paper);} /* FAQ accordion (native details/summary, no JS) */ .faq{max-width:72ch;margin:0 auto;} .faq details{border-top:1px solid var(--line);} .faq details:last-child{border-bottom:1px solid var(--line);} .faq summary{list-style:none;cursor:pointer;padding:18px 0;font-family:Fraunces,serif;font-size:1.12rem;font-weight:500;display:flex;justify-content:space-between;align-items:center;gap:1em;} .faq summary::-webkit-details-marker{display:none;} .faq summary::after{content:"+";color:var(--rubric);font-size:1.4em;line-height:1;} .faq details[open] summary::after{content:"\2013";} .faq details > div{padding:0 0 20px;max-width:68ch;} .faq details > div p{margin:0 0 .8em;line-height:1.7;} .faq a{color:var(--rubric);text-decoration:underline;text-underline-offset:2px;} /* Contact page */ .contact-wrap{max-width:560px;margin:0 auto;} .contact-wrap .form-control,.contact-wrap select,.contact-wrap textarea{margin-bottom:14px;} .contact-wrap button{width:100%;} .contact-meta{display:flex;flex-wrap:wrap;gap:24px;justify-content:center;margin:42px auto 0;max-width:560px;text-align:center;} .contact-meta .ci{flex:1 1 200px;} .contact-meta .ci i{color:var(--rubric);font-size:1.4rem;display:block;margin-bottom:8px;} .contact-meta .ci h4{font-family:Fraunces,serif;font-weight:500;margin:0 0 .25em;} .contact-meta .ci a{color:var(--rubric);} /* 404 / error page */ .notfound{text-align:center;padding:90px 0;} .notfound .code{font-family:Fraunces,serif;font-size:clamp(4rem,12vw,8rem);font-weight:500;color:var(--rubric);line-height:1;} .notfound p{color:var(--muted);font-size:1.1rem;margin:12px 0 28px;} /* ECT product-not-found state (proddetail.php → notfoundmarkup(): a #stextform wrapper holding .prodnoexist h1, .notfoundremoved, .notfoundtrysearch and a search bar). Bare/unstyled out of the box — give it the centred empty-state treatment matching .notfound above. NB: the class `notfoundinput` is on BOTH the wrapper div and the , so disambiguate with div./input. */ .pg-proddetail #stextform{max-width:620px;margin:0 auto;text-align:center;padding:30px 0 12px;} .pg-proddetail .prodnoexist{margin:0;} .pg-proddetail .prodnoexist h1{font-family:Fraunces,serif;font-weight:500;font-size:clamp(1.7rem,4vw,2.5rem);line-height:1.14;color:var(--ink);margin:0 0 16px;} .pg-proddetail .notfoundremoved{color:var(--muted);font-size:1.05rem;line-height:1.6;margin:0;} .pg-proddetail .notfoundtrysearch{color:var(--ink);font-weight:500;margin:20px 0 14px;} .pg-proddetail .notfoundinputcntnr{display:flex;justify-content:center;} .pg-proddetail div.notfoundinput{display:flex;align-items:stretch;width:100%;max-width:420px;text-align:left;} .pg-proddetail input.ecttextinput.notfoundinput{flex:1;min-width:0;border:1px solid var(--line);border-right:0;border-radius:2px 0 0 2px;padding:13px 15px;font:400 .98rem Inter;background:#fff;color:var(--ink);} .pg-proddetail input.ecttextinput.notfoundinput:focus{outline:none;border-color:var(--ink);} .pg-proddetail .notfoundsubmit{flex:0 0 auto;display:inline-flex;align-items:center;justify-content:center;min-width:52px;border:1px solid var(--rubric);background:var(--rubric);color:var(--paper);border-radius:0 2px 2px 0;font-size:1.05rem;line-height:1;cursor:pointer;transition:.18s;} .pg-proddetail .notfoundsubmit:hover{background:var(--rubric-dark);border-color:var(--rubric-dark);} /* Optional "similar category" suggestion + contact-us fallback, if ECT emits them */ .pg-proddetail .prodnoexistaltcat{margin:22px 0 4px;} .pg-proddetail .prodnoexistcatimg img{max-width:160px;height:auto;border:1px solid var(--line);border-radius:3px;} .pg-proddetail .prodnoexistcat a,.pg-proddetail .notfoundcontact a{color:var(--rubric);} .pg-proddetail .notfoundcontact{color:var(--muted);margin-top:22px;} /* Gift certificate options */ .gift-duo{display:grid;grid-template-columns:repeat(2,1fr);gap:24px;} .gift-tile{background:var(--paper-2);border:1px solid var(--line);padding:48px 36px;text-align:center;display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:280px;} .gift-tile .rubric{margin-bottom:14px;} .gift-tile h2{font-family:Fraunces,serif;font-weight:500;margin:0 0 22px;font-size:1.7rem;} @media(max-width:700px){.gift-duo{grid-template-columns:1fr;}} /* Partner / client logo strip (about page) */ .logo-strip{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:38px;margin-top:6px;} .logo-strip img{height:54px;width:auto;opacity:.55;filter:grayscale(1);transition:.2s;} .logo-strip img:hover{opacity:1;filter:none;} .grid{display:grid;grid-template-columns:repeat(4,1fr);gap:34px 26px;} .card{position:relative;} .card .frame{background:var(--paper-2);aspect-ratio:4/5;overflow:hidden;margin-bottom:16px;} .card .frame img{width:100%;height:100%;object-fit:cover;transition:transform .5s;} .card:hover .frame img{transform:scale(1.04);} .card .nm{font-size:.98rem;line-height:1.35;margin-bottom:3px;}.card:hover .nm{color:var(--rubric);} .card .pr{font:500 .92rem/1 Inter;color:var(--muted);} .tag{position:absolute;top:12px;left:12px;background:var(--rubric);color:var(--paper);font:500 .62rem/1 Inter;letter-spacing:.14em;text-transform:uppercase;padding:6px 9px;} /* Store-generated product blocks (ECT inccrosssell, fp-bs-*) */ .ectblock{padding:70px 0;} .ectblock.alt{background:var(--paper-2);} .ectblock .cstitle{font-family:Fraunces,serif;font-weight:500;font-size:clamp(1.8rem,4vw,2.6rem);letter-spacing:-.015em;margin:0 0 34px;} .ectblock .cstitle::before{content:"";display:inline-block;width:.78em;height:.78em;background-color:var(--rubric);-webkit-mask:var(--mark-mask) center/contain no-repeat;mask:var(--mark-mask) center/contain no-repeat;vertical-align:-.04em;margin-right:.5rem;} .cs-carousel{position:relative;} /* overflow-y:hidden is deliberate — overflow-x:auto alone makes overflow-y compute to auto, giving the rail a few px of vertical scroll that absorbs page-scroll and jitters the row. justify-content:safe center centers a partial row but falls back to start when it overflows. */ .fp-bs-products{display:flex;gap:26px;justify-content:safe center;overflow-x:auto;overflow-y:hidden;scroll-snap-type:x mandatory;scroll-behavior:smooth;list-style:none;margin:0;padding:0 0 6px;scrollbar-width:none;} .fp-bs-products::-webkit-scrollbar{display:none;} .fp-bs-product{position:relative;flex:0 0 calc((100% - 78px)/4);scroll-snap-align:start;} .fp-bs-product.reveal{transform:none;}/* fade only — vertical rise would clip under overflow-y:hidden */ /* Sleek, discreet edge arrows. Hidden by default; each slides in only when the pointer is on its side of the rail (JS toggles .show-prev/.show-next on the wrap), and the arrow for an end you've already reached is removed (JS toggles .at-start/.at-end). */ .cs-arrow{position:absolute;top:46%;z-index:4;display:flex;align-items:center;justify-content:center;width:34px;height:34px;border:0;border-radius:50%;background:rgba(255,255,255,.8);color:var(--ink);font-size:1.05rem;line-height:1;cursor:pointer;opacity:0;box-shadow:0 2px 9px rgba(23,20,14,.12);backdrop-filter:blur(3px);-webkit-backdrop-filter:blur(3px);transition:opacity .2s ease, transform .2s ease, background .15s, color .15s;} .cs-arrow.prev{left:8px;transform:translateY(-50%) translateX(-8px);} .cs-arrow.next{right:8px;transform:translateY(-50%) translateX(8px);} /* reveal the arrow for the hovered side (or on keyboard focus) — slide flush to the edge */ .cs-carousel.show-prev .cs-arrow.prev,.cs-carousel.show-next .cs-arrow.next,.cs-arrow:focus-visible{opacity:1;transform:translateY(-50%) translateX(0);} .cs-arrow:hover{background:#fff;color:var(--rubric);} /* no arrow pointing where you can't go: hide prev at the start, next at the end */ .cs-carousel.at-start .cs-arrow.prev,.cs-carousel.at-end .cs-arrow.next{display:none;} .cs-carousel.no-overflow .cs-arrow{display:none;}/* nothing to scroll (partial row) — hide arrows */ /* Touch / mobile: no arrows at all — free-scroll with peeking neighbours is the cue (ScriptureType style). Dropping mandatory snap makes the rail glide instead of stopping. */ @media (hover:none){.cs-arrow{display:none;}.fp-bs-products{scroll-snap-type:none;}} div.fp-bs-prodimage{background:var(--paper-2);aspect-ratio:4/5;overflow:hidden;margin-bottom:14px;} .ectblock.alt div.fp-bs-prodimage{background:#E2DAC9;} div.fp-bs-prodimage .ectlink,div.fp-bs-prodimage a{display:block;width:100%;height:100%;} img.fp-bs-prodimage{width:100%;height:100%;object-fit:cover;transition:transform .5s;} .fp-bs-product:hover img.fp-bs-prodimage{transform:scale(1.04);} .fp-bs-prodname{font-size:.96rem;line-height:1.35;} .fp-bs-prodname a{color:var(--ink);} .fp-bs-product:hover .fp-bs-prodname a{color:var(--rubric);} /* Narrower viewports: size the cards so the NEXT one peeks past the edge — the visual cue that the rail is swipeable (ScriptureType-style). The gesture itself is native: overflow-x:auto + scroll-snap (set above) give touch momentum + snap. scroll-padding-left keeps the snapped card off the container edge. */ @media(max-width:920px){.fp-bs-products{gap:18px;scroll-padding-left:0;}.fp-bs-product{flex:0 0 44%;}} @media(max-width:600px){.fp-bs-product{flex:0 0 70%;}} /* Detail-page related-product section titles ("You might also like", "More From This Collection", "Best Sellers"…). On proddetail these aren't inside .ectblock, so style them here — a centered centered Fraunces heading. Scoped to .pd-more so the homepage titles are untouched. */ .pd-more .cstitle{font-family:Fraunces,serif;font-weight:500;font-size:clamp(1.3rem,2.2vw,1.7rem);letter-spacing:-.01em;color:var(--ink);text-align:center;margin:0 0 30px;} .brandintro{text-align:center;padding:82px 0 70px;} .brandintro .rubric{justify-content:center;margin-bottom:1.25rem;} .brandintro h2{font-family:Fraunces,serif;font-weight:500;font-size:clamp(1.9rem,4.6vw,3rem);line-height:1.08;letter-spacing:-.018em;margin:0 auto;max-width:17ch;} .brandintro p{color:var(--muted);font-size:1.08rem;line-height:1.6;margin:1.1rem auto 0;max-width:52ch;} /* Leaner top spacing for the bento tiles (the intro heading now lives in .brandline). */ .catfeature{padding-top:60px;} .values{padding:18px 0 84px;} .vgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:46px;text-align:center;} .vitem .seal{width:86px;height:86px;border-radius:50%;background:var(--paper-2);display:inline-flex;align-items:center;justify-content:center;margin-bottom:20px;position:relative;} .vitem .seal::after{content:"";position:absolute;inset:7px;border:1px solid rgba(var(--rubric-rgb),.42);border-radius:50%;} .vitem .seal i{font-size:30px;color:var(--rubric);line-height:1;} .vitem h3{font-family:Fraunces,serif;font-weight:500;font-size:1.3rem;margin:0 0 9px;} .vitem p{color:var(--muted);font-size:.95rem;line-height:1.6;margin:0 auto;max-width:32ch;} @media(max-width:780px){.vgrid{grid-template-columns:1fr;gap:36px;}} .ticker{background:var(--ink);color:var(--paper);overflow:hidden;padding:13px 0;} .ticker-track{display:flex;width:max-content;animation:tickermove 32s linear infinite;} .ticker:hover .ticker-track{animation-play-state:paused;} .ticker-set{display:flex;align-items:center;flex:0 0 auto;} .ticker .ph{font-family:Fraunces,serif;font-style:italic;font-size:1.12rem;padding:0 26px;white-space:nowrap;} .ticker .sep{color:var(--rubric);font-size:.95rem;} @keyframes tickermove{from{transform:translateX(0);}to{transform:translateX(-50%);}} @media(prefers-reduced-motion:reduce){.ticker-track{animation:none;flex-wrap:wrap;justify-content:center;}.ticker .ph{padding:4px 16px;}} .tmonials{padding:90px 0;background:var(--ink);color:var(--paper);} .tmonials .t-head{text-align:center;margin-bottom:46px;} .tmonials .t-head .rubric{justify-content:center;margin-bottom:1rem;color:#9A9079;} .tmonials .t-head h2{font-family:Fraunces,serif;font-weight:500;font-size:clamp(1.9rem,4vw,2.7rem);letter-spacing:-.015em;margin:0;color:var(--paper);max-width:24ch;margin-inline:auto;} /* Homepage "wall of praise": aggregate proof bar + two auto-scrolling marquee rows (opposite directions), pause on hover, full-bleed with masked edges. */ .tmonials .t-head h2{margin-bottom:1.1rem;} .praise-proof{display:flex;align-items:center;justify-content:center;gap:8px 14px;flex-wrap:wrap;} .praise-proof .pstars{color:#C9A24B;letter-spacing:4px;font-size:1.2rem;line-height:1;} .praise-proof .pscore{font-family:Fraunces,serif;font-weight:600;font-size:1.25rem;color:var(--paper);} .praise-proof .ptext{font-size:.92rem;color:#B7AF9D;} .praise-wall{position:relative;display:flex;flex-direction:column;gap:18px;overflow:hidden; -webkit-mask:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent);mask:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent);} .praise-row{overflow:hidden;} .praise-track{display:flex;gap:18px;width:max-content;} .praise-wall.scroll .praise-track{animation:praise-scroll 64s linear infinite;} .praise-wall.scroll .praise-row.rev .praise-track{animation-direction:reverse;animation-duration:78s;} .praise-wall.scroll:hover .praise-track{animation-play-state:paused;} @keyframes praise-scroll{from{transform:translateX(0);}to{transform:translateX(-50%);}} .praise-card{flex:0 0 clamp(260px,26vw,340px);background:#211B12;border:1px solid rgba(244,241,233,.07);border-radius:5px;padding:22px 24px;display:flex;flex-direction:column;gap:11px;} .praise-card .stars{color:#C9A24B;letter-spacing:3px;font-size:.92rem;line-height:1;} .praise-card .stars .off{color:rgba(201,162,75,.26);} .praise-card blockquote{margin:0;font-family:Inter,sans-serif;font-size:.95rem;line-height:1.55;color:#D9D2C2;} .praise-card .who{font-weight:600;font-size:.82rem;letter-spacing:.02em;color:var(--paper);margin-top:auto;} .praise-card .who::before{content:"\2014\00a0";color:#9A9079;} @media (prefers-reduced-motion:reduce){ .praise-wall{-webkit-mask:none;mask:none;} .praise-wall.scroll .praise-track{animation:none;flex-wrap:wrap;justify-content:center;width:auto;} } /* Mobile: a single scrolling row keeps the reviews block from getting too tall. */ @media(max-width:560px){.praise-wall .praise-row.rev{display:none;}} .section.alt{background:var(--paper-2);} .catfeature .bento,.catfeature .plates{margin-top:4px;} .tile{position:relative;overflow:hidden;display:block;background:var(--paper-2);} .tile img{width:100%;height:100%;object-fit:cover;transition:transform .6s ease;} .tile:hover img{transform:scale(1.05);} .tile .ov{position:absolute;inset:0;background:linear-gradient(to top,rgba(23,20,14,.74),rgba(23,20,14,.06) 56%,rgba(23,20,14,0));} .tile .cap{position:absolute;left:20px;right:20px;bottom:17px;display:flex;align-items:flex-end;justify-content:space-between;gap:10px;} .tile .nm{font-family:Fraunces,serif;font-weight:500;font-size:1.45rem;line-height:1.04;color:var(--paper);} .tile .go{font:500 .67rem/1 Inter;letter-spacing:.16em;text-transform:uppercase;color:var(--accent-pale);white-space:nowrap;padding-bottom:5px;transition:.15s;} .tile:hover .go{color:var(--paper);} .bento{display:grid;grid-template-columns:repeat(4,1fr);grid-auto-rows:198px;gap:14px;} .bento .b1{grid-column:1/3;grid-row:1/3;}.bento .b2{grid-column:3/5;}.bento .b5{grid-column:1/3;}.bento .b6{grid-column:3/5;} /* Apparel-styles expanding panels (interactive lookbook) sitting under the bento. Hover a panel to widen it and reveal its caption; the others collapse to vertical serif labels. First panel (.is-open) is open by default until the row is hovered. Per-panel background image is set inline in index.php; empty panels fall back to a tinted fill so the row reads before photos are added. */ .panels-head{margin:34px 0 14px;} .panels{display:flex;gap:8px;height:300px;overflow:hidden;} .panels .panel{position:relative;flex:1 1 0;min-width:0;overflow:hidden;display:block;background:var(--panel) center/cover no-repeat;flex-grow:1;transition:flex-grow .55s cubic-bezier(.4,.05,.15,1);} .panels .panel .ov{position:absolute;inset:0;background:linear-gradient(to top,rgba(23,20,14,.82),rgba(23,20,14,.12) 62%,rgba(23,20,14,.28));transition:.3s;} .panels .vlab{position:absolute;bottom:18px;left:50%;transform:translateX(-50%) rotate(180deg);writing-mode:vertical-rl;font-weight:500;font-size:1.05rem;letter-spacing:.02em;color:var(--paper);white-space:nowrap;transition:opacity .3s;} .panels .cap{position:absolute;left:18px;right:18px;bottom:16px;display:flex;align-items:flex-end;justify-content:space-between;gap:8px;opacity:0;transition:opacity .35s .12s;} .panels .cap .nm{font-weight:500;font-size:1.45rem;line-height:1.02;color:var(--paper);} .panels .cap .go{font:500 .67rem/1 Inter;letter-spacing:.16em;text-transform:uppercase;color:var(--accent-pale);white-space:nowrap;padding-bottom:5px;} .panels .panel.is-open{flex-grow:4.6;} .panels .panel.is-open .vlab{opacity:0;}.panels .panel.is-open .cap{opacity:1;} .panels:hover .panel{flex-grow:1;} .panels:hover .panel .vlab{opacity:1;}.panels:hover .panel .cap{opacity:0;} .panels:hover .panel:hover{flex-grow:4.6;} .panels:hover .panel:hover .vlab{opacity:0;}.panels:hover .panel:hover .cap{opacity:1;} .panels .panel:hover .ov{background:linear-gradient(to top,rgba(23,20,14,.7),rgba(23,20,14,.04) 66%);} .panels .panel:nth-child(6n+1){background-color:#34302a;} .panels .panel:nth-child(6n+2){background-color:#6b3b3b;} .panels .panel:nth-child(6n+3){background-color:#2e2b26;} .panels .panel:nth-child(6n+4){background-color:#3c3a34;} .panels .panel:nth-child(6n+5){background-color:#2a2825;} .panels .panel:nth-child(6n){background-color:#5a3b40;} @media(max-width:780px){ .panels{display:grid;grid-template-columns:1fr 1fr;gap:10px;height:auto;} .panels .panel{height:150px;} .panels .vlab{display:none;} .panels .cap{opacity:1;} } .plates{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;} .plates .tile{aspect-ratio:3/4;} .plates .ov{background:rgba(23,20,14,.34);transition:.25s;} .plates .tile:hover .ov{background:rgba(23,20,14,.52);} .plates .cap{flex-direction:column;align-items:center;justify-content:center;inset:0;text-align:center;gap:8px;} .plates .eyebrow{font:500 .64rem/1 Inter;letter-spacing:.22em;text-transform:uppercase;color:var(--accent-pale);} .plates .nm{font-size:1.5rem;} @media(max-width:780px){.bento{grid-template-columns:1fr 1fr;grid-auto-rows:158px;}.bento .tile{grid-column:auto!important;grid-row:auto!important;}.plates{grid-template-columns:1fr 1fr;}} .creed{background:var(--ink);color:var(--paper);text-align:center;} .creed .wrap{padding:96px 28px;}.creed .rubric{color:var(--accent-creed);justify-content:center;margin-bottom:1.5rem;} .creed blockquote{font-family:Fraunces,serif;font-weight:400;font-size:clamp(1.8rem,4.4vw,3.1rem);line-height:1.18;margin:0 auto;max-width:20ch;} .creed blockquote em{font-style:italic;color:var(--rubric);} .creed cite{display:block;margin-top:1.7rem;font:500 .76rem/1 Inter;letter-spacing:.16em;text-transform:uppercase;color:#9A9079;font-style:normal;} /* Editorial mission band — a parchment block that bridges the image-heavy slider and the dark brand hero below it. Two-column "masthead" split (statement left, supporting copy + shop link right, hairline between) finished with a flanked Latin-motto colophon. */ .brandline{background:var(--paper);padding:84px 28px;} .brandline .rubric{margin-bottom:1rem;} .brandline .rubric::before{display:none;}/* drop the fleuron mark on this eyebrow */ .brandline h2 em{font-style:italic;color:var(--rubric);} .bl-split{max-width:1040px;margin:0 auto;display:grid;grid-template-columns:1fr auto 1fr;gap:56px;align-items:center;} .bl-logo{display:flex;align-items:center;justify-content:center;} .bl-logo img{width:132px;height:132px;object-fit:contain;display:block;}/* no circle crop — the emblem is already round on transparent bg, so a mask would trim its edges */ .bl-logo-ph{width:118px;height:118px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-weight:500;font-size:2.1rem;letter-spacing:.04em;color:var(--rubric);background:var(--paper);border:1.5px solid var(--rubric);box-shadow:inset 0 0 0 5px var(--paper),inset 0 0 0 6px rgba(var(--rubric-rgb),.35);} .bl-head{text-align:right;}/* hug the centered logo so it reads as the centerpiece */ .bl-head h2{font-family:Fraunces,serif;font-weight:500;font-size:clamp(2.1rem,4.2vw,2.9rem);line-height:1.04;letter-spacing:-.02em;color:var(--ink);margin:0;} .bl-copy p{color:var(--muted);font-size:1.05rem;line-height:1.62;margin:0 0 22px;} .bl-link{display:inline-block;font:500 .76rem/1 Inter;letter-spacing:.13em;text-transform:uppercase;color:var(--rubric);border-bottom:1.5px solid var(--rubric);padding-bottom:3px;transition:.15s;} .bl-link:hover{color:var(--rubric-dark);border-color:var(--rubric-dark);} /* "conviction" — a rubric brushstroke that paints itself left-to-right when the split scrolls into view (and re-paints on hover of the band). With no JS / reduced motion (no .reveal-on) the stroke is simply shown, fully painted. */ .bl-copy .ul-draw{position:relative;white-space:nowrap;} .bl-copy .ul-scribble{position:absolute;left:-5px;right:-5px;bottom:-9px;width:calc(100% + 10px);height:13px;overflow:visible;} .bl-copy .ul-scribble path{fill:var(--rubric);} .reveal-on .brandline .ul-scribble{clip-path:inset(0 100% 0 0);transition:clip-path .95s cubic-bezier(.45,.05,.2,1);} .reveal-on .brandline .bl-split.in .ul-scribble,.brandline:hover .ul-scribble{clip-path:inset(0 0 0 0);} /* Colophon — Latin mottos centred between two short rules. */ .bl-colophon{display:flex;align-items:center;justify-content:center;gap:18px;margin-top:42px;} .bl-colophon::before,.bl-colophon::after{content:"";height:1px;width:72px;background:var(--line);} .bl-motto{font:500 .72rem/1 Inter;letter-spacing:.22em;text-transform:uppercase;color:var(--ink);display:inline-flex;align-items:center;gap:12px;} .bl-motto i{color:var(--rubric);font-style:normal;} @media(max-width:680px){ .brandline{padding:52px 22px;} .bl-split{grid-template-columns:1fr;gap:20px;text-align:center;justify-items:center;} .bl-logo{order:-1;}/* logo stacks on top on mobile */ .bl-logo img{width:92px;height:92px;} .bl-logo-ph{width:84px;height:84px;} .bl-logo-ph{font-size:1.5rem;box-shadow:inset 0 0 0 4px var(--paper),inset 0 0 0 5px rgba(var(--rubric-rgb),.35);} .bl-head{text-align:center;} .brandline .rubric{justify-content:center;} .bl-colophon{margin-top:30px;} .bl-colophon::before,.bl-colophon::after{width:42px;} .bl-motto .m-extra{display:none;}/* mobile: Soli Deo Gloria only */ } /* Full-width product feature hero — full-bleed stylized image with a left-weighted scrim, slow Ken Burns drift, and scroll-revealed copy. Shared by the brand ("Wear what you believe"), statue, and sticker blocks on the homepage; each sets its own background inline in index.php (CDN-served, swappable). */ .feat-hero{position:relative;display:flex;align-items:center;overflow:hidden;isolation:isolate;min-height:clamp(420px,54vw,600px);background:var(--ink);} .feat-hero .sh-bg{position:absolute;inset:0;z-index:-2;background-size:cover;background-position:center 28%;transform:scale(1.06);will-change:transform;animation:sh-kenburns 24s ease-in-out infinite alternate;} .feat-hero .sh-scrim{position:absolute;inset:0;z-index:-1;background:linear-gradient(90deg,rgba(15,12,8,.88) 0%,rgba(15,12,8,.66) 40%,rgba(15,12,8,.22) 76%,rgba(15,12,8,.04) 100%);} .feat-hero .sh-inner{width:100%;} .feat-hero .sh-copy{max-width:34rem;color:var(--paper);padding:74px 0;} .feat-hero .sh-copy .rubric{color:var(--accent-on-dark);margin-bottom:1.1rem;} .feat-hero .sh-copy h2{font-family:Fraunces,serif;font-weight:500;font-size:clamp(2.1rem,5vw,3.4rem);line-height:1.06;letter-spacing:-.02em;margin:0 0 1rem;} .feat-hero .sh-copy h2 em{font-style:italic;color:var(--accent-on-dark);} .feat-hero .sh-copy p{color:rgba(244,241,233,.85);font-size:1.06rem;line-height:1.6;margin:0 0 1.9rem;max-width:42ch;} @keyframes sh-kenburns{from{transform:scale(1.06) translate3d(0,0,0);}to{transform:scale(1.15) translate3d(-2%,-1.5%,0);}} @media(prefers-reduced-motion:reduce){.feat-hero .sh-bg{animation:none;transform:none;}} @media(max-width:700px){ .feat-hero{min-height:0;} .feat-hero .sh-bg{background-position:center 22%;} .feat-hero .sh-scrim{background:linear-gradient(180deg,rgba(15,12,8,.40) 0%,rgba(15,12,8,.80) 100%);} .feat-hero .sh-copy{padding:54px 0;max-width:none;text-align:center;} .feat-hero .sh-copy .rubric{justify-content:center;} .feat-hero .sh-copy p{margin-left:auto;margin-right:auto;} } /* Email-signup band: its own full-width strip in the brand accent (toggles with the theme), sitting above the deeper-accent footer. */ .foot-signup{background:var(--rubric);color:var(--paper);} .foot-news{display:flex;align-items:center;justify-content:space-between;gap:40px;padding:42px 0;} .foot-news h3{font-family:Fraunces,serif;font-weight:500;color:var(--paper);font-size:1.4rem;margin:0 0 5px;} .foot-news p{font-size:.9rem;color:rgba(244,241,233,.82);margin:0;max-width:48ch;} .fn-formwrap{flex:0 0 auto;width:440px;max-width:100%;} .fn-form{display:flex;width:100%;} .fn-form input[type=email]{flex:1;min-width:0;background:var(--paper);border:1px solid var(--paper);color:var(--ink);padding:13px 16px;font:400 .9rem Inter;} .fn-form input[type=email]:focus{outline:2px solid var(--paper);outline-offset:-2px;} /* Join the field + button into one clean control: square the button (Bootstrap's .btn adds a 4px radius on product pages, leaving it looking detached/rounded against the square input) and split them with a hairline divider. */ .fn-form .btn{padding:13px 22px;white-space:nowrap;border-radius:0;border-left:1px solid var(--line);} /* Solid buttons on dark / accent surfaces invert: parchment fill + accent text, so a primary button never sits invisibly on a dark section or accent band. Buttons on the light parchment body keep the normal solid-accent fill (defined above). */ .slider .btn-solid,.cta-band .btn-solid,.tmonials .btn-solid,.creed .btn-solid,.foot-signup .btn-solid,.foot .btn-solid{background:var(--paper);border-color:var(--paper);color:var(--rubric);} .slider .btn-solid:hover,.cta-band .btn-solid:hover,.tmonials .btn-solid:hover,.creed .btn-solid:hover,.foot-signup .btn-solid:hover,.foot .btn-solid:hover{background:#fff;border-color:#fff;color:var(--rubric);} /* Hairline between field and button (needs to out-rank the .btn-solid border-color above). */ .foot-signup .fn-form .btn{border-left:1px solid rgba(23,20,14,.16);} .fn-result{margin:10px 0 0;font-size:.85rem;min-height:1em;color:#A39A86;} .fn-result.ok{color:#8fc99a;} .fn-result.err{color:#e6a39c;} .foot-cols{display:grid;grid-template-columns:1.5fr 1fr 1fr 1.2fr;gap:40px;padding:44px 0 6px;} .foot{background:var(--footer-bg);color:#CFC7B5;} .foot .wrap{padding:0 28px;} .foot h4{font-family:Fraunces,serif;font-weight:500;color:var(--paper);font-size:1.05rem;margin:0 0 16px;} .foot ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:10px;} .foot ul a{font-size:.92rem;}.foot ul a:hover,.foot p a:hover{color:var(--paper);} .foot .soc{display:flex;gap:16px;font-size:1.15rem;margin-top:16px;}.foot .soc a:hover{color:var(--paper);} .foot .colophon{border-top:1px solid var(--line-lt);padding:22px 0 36px;display:flex;justify-content:space-between;flex-wrap:wrap;gap:10px;font-size:.8rem;color:#8C836F;} .foot .colophon .sdg{color:var(--rubric);letter-spacing:.16em;text-transform:uppercase;font-weight:500;} .scrim{position:fixed;inset:0;background:rgba(23,20,14,.5);opacity:0;visibility:hidden;transition:.2s;z-index:50;}.scrim.on{opacity:1;visibility:visible;} .drawer{position:fixed;top:0;left:0;bottom:0;width:86%;max-width:360px;background:var(--paper);z-index:60;transform:translateX(-100%);transition:transform .25s ease;overflow-y:auto;} .drawer.open{transform:none;} .drawer .d-top{display:flex;align-items:center;justify-content:flex-end;padding:14px 18px;border-bottom:1px solid var(--line);} /* Quick Ship menu label: small green ship-now dot to the right (reinforces the on-product dot) */ .nav-shipdot{margin-left:3px;} .d-cat{border-bottom:1px solid var(--line);} .d-cat>.d-cat-h{display:flex;align-items:center;justify-content:space-between;padding:16px 22px;font:500 .82rem/1 Inter;letter-spacing:.1em;text-transform:uppercase;cursor:pointer;} .d-cat .d-sub{display:none;padding:0 22px 14px;} .d-cat.exp .d-sub{display:block;}.d-cat.exp>.d-cat-h .chev{transform:rotate(180deg);} .d-cat .d-sub a{display:block;padding:8px 0;font-size:.95rem;color:#43403a;} .d-cat .d-sub .d-sub-h{display:block;font-size:.66rem;letter-spacing:.12em;text-transform:uppercase;color:#9b8f78;font-weight:600;margin:12px 0 2px;} /* Indent each run of sub-links under a subtle left rule so long category lists read as tidy groups; the d-sub-h headings (and the lead "Shop all" link + promo cards) stay flush, which breaks the rule between groups. */ .d-cat .d-sub a:not(.d-promo):not(:first-child){border-left:1.5px solid var(--line);padding-left:15px;margin-left:1px;} .d-cat .d-sub a:not(.d-promo):not(:first-child):hover{border-left-color:var(--rubric);color:var(--ink);} .d-cat .d-sub>a:first-child{margin-bottom:3px;} .d-cat .d-sub a.d-promo{display:flex;align-items:center;gap:10px;padding:8px 0;} .d-cat .d-sub a.d-promo img{width:52px;height:52px;object-fit:cover;border-radius:8px;background:#ECE6D8;flex:none;} .d-cat .d-sub a.d-promo img.lazyload{opacity:0;} .d-cat .d-sub a.d-promo img.lazyloaded{opacity:1;transition:opacity .4s ease;} .d-cat .chev{transition:.2s;color:var(--rubric);} .drawer .d-soc{display:flex;gap:18px;font-size:1.25rem;padding:22px;} /* Mini cart tray (slides in from the right; ECT incminicart output) */ .cart-tray{position:fixed;top:0;right:0;bottom:0;width:90%;max-width:380px;background:var(--paper);z-index:60;transform:translateX(100%);transition:transform .25s ease;overflow-y:auto;display:flex;flex-direction:column;} .cart-tray.open{transform:none;} .ct-top{display:flex;align-items:center;justify-content:space-between;padding:20px 22px;border-bottom:1px solid var(--line);} .ct-title{font-family:Fraunces,serif;font-weight:600;font-size:1.2rem;} .ct-x{background:none;border:0;color:var(--ink);cursor:pointer;padding:0;display:inline-flex;} .ct-body{padding:6px 22px 24px;} /* Theme the ECT-generated .minicart markup */ .ct-body .minicart{font-family:Inter,system-ui,sans-serif;font-size:.95rem;} .ct-body .minicart img{display:none;} .ct-body .minicartcnt{padding:12px 0;border-bottom:1px solid var(--line);color:var(--ink-soft);} .ct-body .mcLNitems .minicartcnt{display:flex;justify-content:space-between;gap:12px;} .ct-body .ectMCquant,.ct-body .ectMCtot{font-weight:600;color:var(--ink);} .ct-body .minicart>.minicartcnt:first-child,.ct-body .minicart>.minicartcnt:last-child{border-bottom:0;} .ct-body .minicart>.minicartcnt:first-child{padding-top:14px;} .ct-body .minicart>.minicartcnt:first-child a.mincart{font:500 .72rem/1 Inter;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);} .ct-body .minicart>.minicartcnt:first-child a.mincart:hover{color:var(--rubric);} .ct-body button.mincart,.ct-body input.mincart{display:block;width:100%;text-align:center;margin-top:16px;background:var(--rubric);border:1px solid var(--rubric);color:var(--paper);font:500 .82rem/1 Inter;letter-spacing:.1em;text-transform:uppercase;padding:15px 30px;cursor:pointer;transition:.18s;} .ct-body button.mincart:hover,.ct-body input.mincart:hover{background:var(--rubric-dark);border-color:var(--rubric-dark);color:var(--paper);} /* Soft-add-to-cart popup. ECT injects #scdiv.scart.scwrap into the shared #opaquediv.ectopaque overlay (styled in the softform-modals block above) when the hard cart is off, to confirm the added item. The .ectopaque backdrop + .scclose::before X are inherited; here we only theme the inner .scwrap box and its contents, mirroring the .ectsoftwrapper / .qbuywrapper look. */ .scart.scwrap{position:relative;background:var(--paper);width:100%;max-width:560px;padding:34px 30px 28px;border-radius:3px;box-shadow:0 30px 70px rgba(23,20,14,.35);box-sizing:border-box;text-align:left;font-family:Inter,system-ui,sans-serif;color:var(--ink-soft);animation:nis-pop .22s ease;} .scart.sccheckout{display:inline-block;margin-bottom:4px;} #scoutercontainer{clear:both;} .scart.scprodsadded{clear:both;font-family:Fraunces,serif;font-size:1.25rem;font-weight:500;color:var(--ink);padding:2px 0 14px;border-bottom:1px solid var(--line);margin-bottom:16px;} .scimgproducts{display:flex;gap:18px;align-items:flex-start;} .scart.scimage{flex:0 0 120px;width:120px;text-align:center;} img.scimage{max-width:100%;height:auto;border:1px solid var(--line);} .scart.scproducts{flex:1;min-width:0;} .scart.scproduct{padding-bottom:12px;} .scart.scprodname{font-weight:500;color:var(--ink);} .scart.scprice{margin-top:6px;font-weight:600;color:var(--ink);} .scart.scoptions{margin-top:6px;} .scart.scoption{display:flex;gap:6px;font-size:.9rem;color:var(--muted);} .scart.sccartitems{text-align:right;color:var(--muted);font-size:.9rem;padding-top:12px;margin-top:14px;border-top:1px solid var(--line);} .scart.sccarttotal{text-align:right;font-weight:600;font-size:1.05rem;color:var(--ink);padding-top:4px;} .scart.sccarttotal span.sccartdscnt,.scart .sccartdscamnt,.scart .mcMCdsct{color:var(--rubric);} .scart.scnostock,.scart.scbackorder{text-align:center;padding:9px;background:#FBE9E7;border:1px solid var(--rubric);color:var(--rubric);margin:8px 0;} .scart.scerror{text-align:center;padding:60px 0;color:var(--rubric);} .scart.sclinks{text-align:right;padding-top:18px;margin-top:6px;border-top:1px solid var(--line);color:var(--muted);} /* Buttons inside the popup */ .scart .ectbutton{font:500 .74rem/1 Inter;letter-spacing:.08em;text-transform:uppercase;padding:12px 20px;cursor:pointer;transition:.18s;border:1px solid var(--ink);background:transparent;color:var(--ink);} .scart .ectbutton:hover{background:var(--ink);color:var(--paper);} .scart button.sccheckout,.scart .sccheckout .ectbutton{background:var(--rubric);border-color:var(--rubric);color:var(--paper);} .scart button.sccheckout:hover,.scart .sccheckout .ectbutton:hover{background:var(--rubric-dark);border-color:var(--rubric-dark);color:var(--paper);} .scart .sclinks .ectbutton{margin:0 2px;} #softcartrelated{margin-top:18px;padding-top:16px;border-top:1px solid var(--line);clear:both;} @media(max-width:920px){ .navrow,.icons .desk{display:none;} .head .wrap.head-top{height:56px;} .head-top .brand img{height:38px;} .burger{display:inline-flex;} .grid{grid-template-columns:repeat(2,1fr);gap:28px 18px;} .foot-cols{grid-template-columns:1fr 1fr;} .foot-news{flex-direction:column;align-items:flex-start;gap:16px;} .fn-formwrap{width:100%;} .utility .soc{display:none;} } /* Scroll-reveal: hidden state applied pre-paint via the head's `reveal-on` class (set only when JS+IO available and motion allowed) so content never flashes/jumps. The footer JS just adds `.in` to fade each element in on scroll. */ .reveal-on .brandline>*,.reveal-on .vitem,.reveal-on .section-head,.reveal-on .bento .tile,.reveal-on .plates .tile,.reveal-on .fp-bs-product,.reveal-on .creed blockquote,.reveal-on .news h2,.reveal-on .news p,.reveal-on .ms-card,.reveal-on .feat-hero .sh-copy>*{opacity:0;transform:translateY(18px);transition:opacity .65s ease,transform .65s cubic-bezier(.2,.7,.2,1);} .reveal-on .brandline>*.in,.reveal-on .vitem.in,.reveal-on .section-head.in,.reveal-on .bento .tile.in,.reveal-on .plates .tile.in,.reveal-on .fp-bs-product.in,.reveal-on .creed blockquote.in,.reveal-on .news h2.in,.reveal-on .news p.in,.reveal-on .ms-card.in,.reveal-on .feat-hero .sh-copy>*.in{opacity:1;transform:none;} @media(prefers-reduced-motion:reduce){*{transition:none!important;}.slides{transition:none;}} /* ===== ECT product detail (proddetail.php) ===== */ .proddetail-col1,.proddetail-col2{margin-bottom:1.5rem;} /* Collapse an empty cross-sell rail (e.g. "recommended" with no matching products): ECT still prints the
wrapper, so its vertical padding leaves a blank band above the footer. Hide any rail whose product column rendered empty. Scoped to the crosssell columns (they carry the inline text-align), so the reviews slot is untouched. Keyed off the missing .fp-bs-products rail — can't use :empty (ECT leaves a whitespace node) and can't nest :has() inside :has(), so test for the rail via :not(:has()). */ .pd-more section:has(> .container > .row > .col-md-12[style*="text-align"]):not(:has(.fp-bs-products)){display:none;} /* Sticky gallery: the image column follows the scroll until the (taller) info column runs out, then releases — like scripturetype.com. Desktop only; on mobile the columns stack so there's nothing to pin against. Top offset clears the sticky header (.head-top 76px + nav row ≈ 124px). */ @media(min-width:768px){ .proddetail-col1 .pd-gallery-sticky{position:sticky;top:130px;} } .detailimage img{width:100%;height:auto;border-radius:2px;} /* Reserve the thumbnail strip's height before MagicScroll initializes (it builds late, after load), so the page doesn't jump when the initially-tall raw markup collapses to a single strip. Reserved height ≈ one square thumb = column ÷ cols (3 across on desktop, 2 on narrow); overflow clips the tall inner until mw.js pins the exact height. Keep this slightly generous so a thumb is never cropped. */ .detailthumbnailimage{overflow:hidden;aspect-ratio:2/1;} @media(min-width:768px){.detailthumbnailimage{aspect-ratio:3/1;}} .detailname{font-family:Fraunces,serif;font-weight:500;font-size:clamp(1.7rem,3vw,2.3rem);line-height:1.12;letter-spacing:-.012em;color:var(--ink);margin:0 0 1rem;} /* Shopify-style price box: current price + struck original + save pill on one row */ .mw-pricebox{display:flex;align-items:baseline;flex-wrap:wrap;gap:.55rem .7rem;margin:.5rem 0 1rem;} .detailprice{font-size:1.7rem;font-weight:600;color:var(--ink);margin:0;line-height:1;} .detailprice strong{display:none;} /* hide the "Price:" label */ .detailprice .price{color:inherit;} /* When discounted (save badge present), the live price turns rubric-red */ .mw-pricebox:has(.mw-savebadge) .detailprice .price{color:var(--rubric);} .listpricediv,.detaillistprice{color:var(--muted);} .detaillistprice{font-size:1.05rem;} .detaillistprice del,.listprice del,.detailprice del{color:var(--muted);font-weight:400;text-decoration-thickness:1px;} /* "Save X%" pill */ .mw-savebadge{display:inline-flex;align-items:center;} .mw-savebadge .badge{display:inline-block;background:var(--rubric);color:var(--paper);font:600 .68rem/1 Inter;letter-spacing:.06em;text-transform:uppercase;padding:.4em .6em;border-radius:999px;} /* Hide the now-redundant ECT percent-off text (the pill carries it) */ .detailpercentofflistprice{display:none;} .shiptime{font-size:.92rem;color:var(--muted);margin:.5rem 0 1rem;} .detailoptions,.optioncontainer{margin:1.1rem 0;} .optiontext,.detailoptiontext{font:500 .78rem/1.4 Inter;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);margin-bottom:.5rem;display:block;} .detailquantity,.quantity2div{margin:1rem 0;} .quantity2input,input.detailquantity2input,input.detailquantity{border:1px solid var(--line);padding:10px 12px;width:74px;font:400 1rem Inter;border-radius:2px;} /* ECT buttons -> theme button (also themes cart/checkout/account site-wide) */ .ectbutton{display:inline-block;font:500 .8rem/1 Inter;letter-spacing:.1em;text-transform:uppercase;padding:14px 28px;border:1px solid var(--rubric);background:var(--rubric);color:var(--paper);cursor:pointer;transition:.18s;border-radius:2px;text-decoration:none;} .ectbutton:hover{background:var(--rubric-dark);border-color:var(--rubric-dark);color:var(--paper);} .ectbutton.forgotpassword,.ectbutton.createaccount,.ectbutton.newaccount{background:transparent;color:var(--ink);border-color:var(--ink);} .ectbutton.forgotpassword:hover,.ectbutton.createaccount:hover,.ectbutton.newaccount:hover{background:var(--ink);color:var(--paper);} .addtocartquant,.detailaddtocartquant{margin-top:1.4rem;} .detailbuybutton,.ectbutton.buybutton{padding:16px 40px;font-size:.88rem;} .detailprodoption,.rcoption{margin-bottom:.4rem;} /* ===== Product detail refinements: breadcrumb, options-as-buttons, quantity, add-to-cart ===== */ /* Breadcrumb cleanup + hide the in-breadcrumb "Proceed to Checkout" */ .catnavdetail{font-size:.85rem;color:var(--muted);line-height:1.7;margin:0 0 1.2rem;} .catnavdetail .ectbreadcrumb{display:inline;} .catnavdetail a.ectlink{color:var(--muted);text-decoration:none;} .catnavdetail a.ectlink:hover{color:var(--rubric);} .catnavcheckout{display:none;} /* Radio/checkbox options styled as selectable buttons. A single-value option group is emitted by ECT as a pre-checked .ectcheckbox (not a radio) — hide that native box too so it renders as a button like the rest. */ .option.detailoption{display:flex;flex-wrap:wrap;gap:8px;} .rcoption{position:relative;margin:0;} .rcoption input.ectradio,.rcoption input.ectcheckbox{position:absolute;opacity:0;width:1px;height:1px;} .rcoption label.ectlabel{display:inline-block;border:1px solid var(--line);background:#fff;color:var(--ink);padding:9px 16px;min-width:46px;text-align:center;font-size:.92rem;line-height:1.1;cursor:pointer;border-radius:2px;transition:.15s;} .rcoption label.ectlabel:hover{border-color:var(--ink);} .rcoption input.ectradio:checked + label.ectlabel,.rcoption input.ectcheckbox:checked + label.ectlabel{background:var(--ink);border-color:var(--ink);color:var(--paper);} .rcoption input.ectradio:focus-visible + label.ectlabel,.rcoption input.ectcheckbox:focus-visible + label.ectlabel{outline:2px solid var(--rubric);outline-offset:2px;} /* "hidden" admin option Class = remove the option entirely (not just mark it sold out). ECT puts the optClass on the .rcoption wrapper, so an option set to "hidden" in the back office disappears from the size selector. (.hidden is scoped here, not global, so it can't clobber other uses like .cart-count.hidden.) */ .rcoption.hidden{display:none;} /* Sold-out option buttons. ECT marks the