/*
Theme Name: Tamsyn
Author: Shrudtech
Description: A light, luxury WooCommerce theme for Tamsyn hair: white pages, soft blue and beige accents, product cards with discount tags, WhatsApp ordering and checkout, a journal and gentle motion.
Version: 1.0.0
Requires at least: 6.0
Requires PHP: 7.4
WC requires at least: 8.0
License: GPL-2.0-or-later
Text Domain: tamsyn
*/
:root{--cream:#FFFFFF;--beige:#DBC5AE;--blue:#D5E1EB;--gold:#B78B4C;--ink:#1c1a18;--mut:#5c544c;--line:#e6d6c6;--serif:"Cormorant Garamond",Georgia,serif;--sans:"Jost","Helvetica Neue",Arial,sans-serif;color-scheme:light;box-sizing:border-box;padding-top:env(safe-area-inset-top,0px);padding-bottom:env(safe-area-inset-bottom,0px)}
html{scroll-padding-top:env(safe-area-inset-top,0px)}
*,*:before,*:after{box-sizing:inherit}
body{margin:0;background:var(--cream);color:var(--ink);font:300 16px/1.65 var(--sans)}
a{color:inherit}img{max-width:100%}
h1,h2,h3{font-family:var(--serif);font-weight:500;line-height:1.15;margin:0 0 .5em}
h1{font-size:clamp(2.4rem,6vw,4.2rem)}h2{font-size:clamp(1.8rem,4vw,2.6rem)}h3{font-size:1.4rem}
:focus-visible{outline:2px solid var(--ink);outline-offset:3px}
.skip{position:absolute;left:-999px}.skip:focus{left:8px;top:8px;background:#fff;padding:8px;z-index:99}
.w{max-width:1180px;margin:0 auto;padding:0 20px}.sec{padding:64px 0}
.ann{background:var(--blue);color:var(--ink);text-align:center;font-size:.82rem;letter-spacing:.08em;padding:8px 12px}
header{position:sticky;top:env(safe-area-inset-top,0px);z-index:20;background:#fff;border-bottom:1px solid var(--line)}
.bar{display:flex;align-items:center;gap:20px;height:84px}
.logo img{height:64px;width:auto;display:block}
nav{display:flex;gap:26px;margin-left:auto;align-items:center}
nav a,nav button.l{font:400 .85rem var(--sans);letter-spacing:.12em;text-transform:uppercase;text-decoration:none;background:none;border:0;cursor:pointer;color:inherit;padding:8px 0}
nav a:hover{text-decoration:underline}
.dd{position:relative}.dd .m{display:none;position:absolute;top:100%;left:-16px;background:var(--cream);border:1px solid var(--line);min-width:230px;padding:10px 0}
.dd:hover .m,.dd:focus-within .m{display:block}.m a{display:block;padding:7px 18px;text-transform:none;letter-spacing:.02em;font-size:.95rem}
.ic{display:flex;gap:6px}.ic button,.ic a{background:none;border:0;cursor:pointer;width:42px;height:42px;display:grid;place-items:center;position:relative;color:var(--ink)}
.ic svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.4}
.cnt{position:absolute;top:2px;right:0;background:var(--blue);color:var(--ink);border-radius:9px;font-size:.7rem;min-width:18px;height:18px;line-height:18px;text-align:center}
#burger{display:none}
#sbar{display:none;border-top:1px solid var(--line);padding:10px 0}#sbar.on{display:block}
input,select,textarea{font:inherit;padding:11px 12px;border:1px solid var(--beige);background:#fff;border-radius:2px;width:100%;color:var(--ink)}
.btn{display:inline-block;font:500 .82rem var(--sans);letter-spacing:.14em;text-transform:uppercase;text-decoration:none;padding:14px 28px;border:1px solid var(--ink);background:var(--blue);border-color:var(--blue);color:var(--ink);cursor:pointer;border-radius:2px}
.btn:hover{background:var(--ink);border-color:var(--ink);color:var(--cream)}
.btn.o{background:transparent;border-color:var(--ink)}.btn.o:hover{background:var(--ink);color:var(--cream)}
.btn.wa{background:var(--ink);border-color:var(--ink);color:var(--cream)}.btn.wa:hover{background:var(--blue);border-color:var(--blue);color:var(--ink)}
.hero{display:grid;grid-template-columns:1.1fr 1fr;min-height:560px}
.hero .t{padding:72px clamp(20px,5vw,72px);display:flex;flex-direction:column;justify-content:center;align-items:flex-start;gap:6px}
.hero .t p{max-width:440px;color:var(--ink);font-size:1.08rem}.btns{display:flex;gap:12px;flex-wrap:wrap;margin-top:14px}
.hero .i{background:var(--blue) var(--mono) center/62% no-repeat;position:relative}
.eyebrow{font-size:.78rem;letter-spacing:.24em;text-transform:uppercase;color:var(--ink);border-bottom:2px solid var(--blue);padding-bottom:3px;display:inline-block;font-weight:500}
.grid{display:grid;gap:22px;grid-template-columns:repeat(auto-fill,minmax(230px,1fr))}
.cats{grid-template-columns:repeat(auto-fit,minmax(170px,1fr))}
.cat{display:flex;align-items:flex-end;aspect-ratio:3/4;padding:18px;text-decoration:none;background:var(--beige) var(--mono) center 35%/55% no-repeat;position:relative}
.cat:nth-child(2n){background-color:var(--blue)}.cat:nth-child(3n){background-color:#e9dccd}
.cat span{font:500 1.35rem var(--serif);background:var(--blue);padding:6px 12px}
.ph{aspect-ratio:4/5;background:linear-gradient(160deg,#dbc5ae,#f0e4d8);position:relative;display:block;overflow:hidden}.ph svg,.hero .i svg{position:absolute;inset:0;width:100%;height:100%}.ph small{background:rgba(250,240,239,.85);padding:1px 7px;z-index:1}
.ph.b{background:linear-gradient(160deg,#d5e1eb,#eaf0f5)}.ph.g{background:linear-gradient(160deg,#e9dccd,#f6efe6)}.ph img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 25%}.ph img~small{display:none}.ph.v2 img{transform:scaleX(-1)}.ph.v3 img{transform:scale(1.4);transform-origin:50% 30%}
.ph small{position:absolute;left:10px;bottom:8px;font-size:.68rem;letter-spacing:.14em;text-transform:uppercase;color:var(--mut)}
.badge{position:absolute;top:10px;left:10px;background:var(--cream);font-size:.7rem;letter-spacing:.12em;text-transform:uppercase;padding:3px 9px}
.card{text-decoration:none;display:block}.card h3{font-size:1.2rem;margin:12px 0 2px}.card p{margin:0;color:var(--mut);font-size:.88rem}
.pr{font-weight:500;color:var(--ink)}.rc{margin:0;background:#fff;border-radius:14px;padding:24px;border:1px solid var(--line)}.rc img{width:100%;aspect-ratio:1;object-fit:cover;border-radius:10px;margin-bottom:14px}.rc blockquote{margin:8px 0 14px;font:500 1.2rem/1.45 var(--serif)}.rc figcaption{font-size:.88rem}.rc span{color:var(--mut)}
.wf{position:fixed;right:18px;bottom:calc(18px + env(safe-area-inset-bottom,0px));z-index:25;width:56px;height:56px;border-radius:50%;background:var(--ink);color:#fff;display:grid;place-items:center;text-decoration:none;box-shadow:0 8px 24px rgba(28,26,24,.22)}.wf svg{width:28px;height:28px;fill:none;stroke:currentColor;stroke-width:1.5}.wf .wt{position:absolute;right:68px;white-space:nowrap;background:var(--ink);color:#fff;font-size:.82rem;letter-spacing:.06em;padding:8px 14px;border-radius:20px;opacity:0;transform:translateX(8px);pointer-events:none;transition:opacity .3s,transform .3s}.wf:hover .wt,.wf:focus-visible .wt{opacity:1;transform:none}
.ann{transition:opacity .45s}header{transition:box-shadow .35s}header.sc{box-shadow:0 8px 28px rgba(28,26,24,.07)}
nav a,nav button.l{background:linear-gradient(currentColor,currentColor) 0 100%/0 1px no-repeat;transition:background-size .35s ease}nav a:hover,nav button.l:hover{background-size:100% 1px}
.btn{transition:background .3s,color .3s,border-color .3s,transform .3s}.btn:hover{transform:translateY(-2px)}
.pc{transition:transform .5s cubic-bezier(.2,.7,.2,1),box-shadow .5s}.pc:hover{transform:translateY(-4px);box-shadow:0 18px 40px rgba(28,26,24,.09)}
.pc .ph img,.cat img{transition:transform 1s cubic-bezier(.2,.7,.2,1)}.pc:hover .ph img,.cat:hover img{transform:scale(1.06)}.cat{overflow:hidden}.hero .i{overflow:hidden}
.qa{transition:transform .3s,background .3s}.qa:hover{transform:scale(1.1)}
@media(prefers-reduced-motion:no-preference){
.fx{opacity:0}.fx.in{opacity:1;animation:rise .9s cubic-bezier(.2,.7,.2,1) var(--d,0s) backwards}
.hero .t>*{animation:rise 1s cubic-bezier(.2,.7,.2,1) both}.hero .t>*:nth-child(2){animation-delay:.12s}.hero .t>*:nth-child(3){animation-delay:.24s}.hero .t>*:nth-child(4){animation-delay:.36s}
.hero .i img{animation:kb 16s ease-out both}#app.pg{animation:pg .6s ease both}
.wf:before{content:"";position:absolute;inset:0;border-radius:50%;border:2px solid var(--ink);animation:pulse 3s ease-out infinite}
@keyframes rise{from{opacity:0;transform:translateY(24px)}to{opacity:1;transform:none}}@keyframes kb{from{transform:scale(1.1)}to{transform:scale(1)}}@keyframes pg{from{opacity:0}to{opacity:1}}@keyframes pulse{0%{transform:scale(1);opacity:.5}70%,100%{transform:scale(1.5);opacity:0}}}
.pc{border:1px solid var(--line);border-radius:14px;overflow:hidden;background:#fff}.pc .ph{border-radius:0}.cb{padding:12px 14px 14px}.tg{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:8px;min-height:24px}.tg span{font-size:.72rem;border:1px solid var(--line);background:#FBF7F1;padding:2px 9px;border-radius:5px}.ct{display:block;text-decoration:none;font-size:.96rem;line-height:1.35;margin-bottom:10px;min-height:2.6em}.ct:hover{text-decoration:underline}.cr{display:flex;justify-content:space-between;align-items:center}.cr .pr{font-size:1.1rem}.qa{width:40px;height:40px;border-radius:50%;border:0;background:var(--blue);cursor:pointer;display:grid;place-items:center}.qa svg{width:20px;height:20px;fill:none;stroke:var(--ink);stroke-width:1.5}.off{position:absolute;left:0;right:0;bottom:0;background:var(--blue);color:var(--ink);font:500 .82rem var(--sans);letter-spacing:.1em;text-align:center;padding:7px;z-index:1}.off~small{display:none}.ci .off{display:none}.pd .off{font-size:.95rem;padding:10px}.old{text-decoration:line-through;color:var(--mut);margin-left:6px;font-weight:300}
.band{background:var(--blue)}.band2{background:#F6EFE6}
.two{display:grid;grid-template-columns:1fr 1fr;gap:48px;align-items:center}
.pad{padding:40px;background:var(--cream)}
.art .ph{aspect-ratio:16/10}.meta{font-size:.78rem;letter-spacing:.12em;text-transform:uppercase;color:var(--mut)}
.filters{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:10px;margin:18px 0 28px}
.crumb{font-size:.85rem;color:var(--mut);margin-bottom:14px}.crumb a{color:var(--mut)}
.chips{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 20px}.chip{border:1px solid var(--beige);padding:6px 14px;font-size:.88rem;text-decoration:none;border-radius:20px;background:transparent;cursor:pointer;color:inherit}.chip.on,.chip:hover{background:var(--blue)}
.pd{display:grid;grid-template-columns:1.1fr 1fr;gap:44px}.th{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin-top:8px}.th button{border:2px solid transparent;padding:0;background:none;cursor:pointer}.th button.on{border-color:var(--blue)}
.row{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin:14px 0}label{font-size:.8rem;letter-spacing:.1em;text-transform:uppercase;color:var(--mut);display:block;margin-bottom:4px}
.spec{border-top:1px solid var(--line);margin-top:22px}.spec div{display:flex;justify-content:space-between;padding:9px 0;border-bottom:1px solid var(--line);font-size:.95rem}
.note{font-size:.88rem;color:var(--mut);background:#fff;border-left:3px solid var(--blue);padding:10px 14px;margin:16px 0}
.prose{max-width:720px}.prose p{font-size:1.06rem}
details{border-bottom:1px solid var(--line);padding:14px 0}summary{cursor:pointer;font:500 1.25rem var(--serif)}
footer{background:var(--blue);color:var(--ink);padding:56px 0 24px}footer img{height:48px;width:auto}
.fg{display:grid;grid-template-columns:1.5fr repeat(3,1fr);gap:32px}footer h4{font:500 .8rem var(--sans);letter-spacing:.16em;text-transform:uppercase;margin:0 0 10px}
footer a{display:block;text-decoration:none;padding:3px 0;font-size:.94rem}footer a:hover{text-decoration:underline}
.cp{border-top:1px solid rgba(28,26,24,.3);margin-top:32px;padding-top:16px;font-size:.82rem}
#scrim{position:fixed;inset:0;background:rgba(28,26,24,.4);display:none;z-index:30}#scrim.on{display:block}
#cart{position:fixed;top:0;right:0;bottom:0;width:min(420px,100%);background:var(--cream);z-index:31;transform:translateX(100%);transition:transform .25s;display:flex;flex-direction:column;padding:calc(18px + env(safe-area-inset-top,0px)) 20px calc(18px + env(safe-area-inset-bottom,0px))}#cart.on{transform:none}
#cl{flex:1;overflow:auto}.ci{display:grid;grid-template-columns:64px 1fr;gap:12px;padding:12px 0;border-bottom:1px solid var(--line);font-size:.92rem}.ci .ph{aspect-ratio:1}
.q{display:inline-flex;border:1px solid var(--beige);margin-top:6px}.q button{width:30px;background:none;border:0;cursor:pointer;font-size:1rem}.q span{min-width:28px;text-align:center;line-height:30px}
.rm{background:none;border:0;color:var(--mut);text-decoration:underline;cursor:pointer;margin-left:10px;font-size:.82rem}
@media(max-width:860px){.hero,.two,.pd{grid-template-columns:1fr}.hero .i{min-height:300px;order:-1}.fg{grid-template-columns:1fr 1fr}
#burger{display:grid}nav{display:none;position:absolute;top:84px;left:0;right:0;background:#fff;flex-direction:column;align-items:flex-start;gap:0;padding:12px 20px 20px;border-bottom:1px solid var(--line)}nav.on{display:flex}
.dd{width:100%}.dd .m{display:block;position:static;border:0;padding:0 0 0 12px;background:transparent}.logo{margin-right:auto}.logo img{height:50px}.sec{padding:44px 0}}
@media(prefers-reduced-motion:reduce){*{transition:none!important}}
/* ===== WordPress + WooCommerce additions ===== */
:root{--blue:#D5E1EB}
.screen-reader-text{position:absolute;left:-9999px}
body.admin-bar header{top:calc(32px + env(safe-area-inset-top,0px))}
@media(max-width:782px){body.admin-bar header{top:calc(46px + env(safe-area-inset-top,0px))}}
.custom-logo-link{display:block}.custom-logo{height:64px!important;width:auto!important}
@media(max-width:860px){.custom-logo{height:50px!important}}
nav ul{list-style:none;margin:0;padding:0;display:flex;gap:26px;align-items:center}
nav li{position:relative}
nav .sub-menu{display:none;position:absolute;top:100%;left:-16px;background:#fff;border:1px solid var(--line);min-width:240px;padding:10px 0;list-style:none;margin:0;z-index:30}
nav li:hover>.sub-menu,nav li:focus-within>.sub-menu{display:block}
nav .sub-menu a{display:block;padding:7px 18px;text-transform:none;letter-spacing:.02em;font-size:.95rem}
@media(max-width:860px){nav ul{flex-direction:column;align-items:flex-start;gap:0;width:100%}nav .sub-menu{display:block;position:static;border:0;padding:0 0 0 12px;background:transparent}}
.entry>*{max-width:100%}.entry img{height:auto}.entry h3{margin-top:1.4em}.entry ul,.entry ol{padding-left:1.2em}
.alignleft{float:left;margin:0 1em 1em 0}.alignright{float:right;margin:0 0 1em 1em}.aligncenter{display:block;margin:0 auto}
.pg{margin-top:36px}.pg .nav-links{display:flex;gap:8px;flex-wrap:wrap}.pg a,.pg span.page-numbers{border:1px solid var(--line);padding:6px 14px;border-radius:20px;text-decoration:none}.pg .current{background:var(--blue)}
.ph img{display:block}.ph img[src*="monogram"]{object-fit:contain!important;padding:18%}
/* product grids */
.woocommerce ul.products,ul.products{display:grid!important;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:22px;margin:0;padding:0;list-style:none}
.woocommerce ul.products::before,.woocommerce ul.products::after{display:none!important}
.woocommerce ul.products li.product,.woocommerce-page ul.products li.product{width:auto!important;margin:0!important;float:none!important;padding:0}
.pc a{text-decoration:none}.pc .cr .pr,.pc .price{font-size:1.05rem;color:var(--ink)}.pc .price del{color:var(--mut);font-weight:300}.pc .price ins{text-decoration:none}
.pc .qa.added{background:var(--ink)}.pc .qa.added svg{stroke:#fff}.pc .qa.loading{opacity:.5}.pc .added_to_cart{display:none}
.woocommerce .woocommerce-ordering select,.woocommerce-page .woocommerce-ordering select{width:auto}
.woocommerce .woocommerce-result-count{color:var(--mut);font-size:.9rem}
.woocommerce-breadcrumb{font-size:.85rem;color:var(--mut);margin-bottom:14px}.woocommerce-breadcrumb a{color:var(--mut)}
.woocommerce-products-header__title,.woocommerce div.product .product_title,.woocommerce h2,.woocommerce-page h2{font-family:var(--serif);font-weight:500}
/* buttons */
.woocommerce a.button,.woocommerce button.button,.woocommerce input.button,.woocommerce #respond input#submit,.woocommerce a.button.alt,.woocommerce button.button.alt,.woocommerce input.button.alt,.woocommerce a.button.alt:hover{background:var(--blue);color:var(--ink);border:1px solid var(--blue);border-radius:2px;font:500 .82rem var(--sans);letter-spacing:.14em;text-transform:uppercase;padding:14px 28px}
.woocommerce a.button:hover,.woocommerce button.button:hover,.woocommerce input.button:hover,.woocommerce button.button.alt:hover,.woocommerce #respond input#submit:hover{background:var(--ink);color:#fff;border-color:var(--ink)}
.woocommerce a.button.qa,.woocommerce a.qa{width:40px;height:40px;padding:0;border-radius:50%;background:var(--blue);border:0;display:grid;place-items:center}
.woocommerce a.button.qa:hover{background:var(--blue);transform:scale(1.1)}
.woocommerce a.button.wa,.btn.wa{background:var(--ink);border-color:var(--ink);color:#fff}.woocommerce a.button.wa:hover,.btn.wa:hover{background:var(--blue);border-color:var(--blue);color:var(--ink)}
/* single product */
.woocommerce div.product .product_title{font-size:2.6rem;line-height:1.15}
.woocommerce div.product p.price,.woocommerce div.product span.price{color:var(--ink);font-size:1.5rem;font-weight:500}
.woocommerce div.product p.price del{color:var(--mut);font-weight:300}
.woocommerce span.onsale{background:var(--blue);color:var(--ink);border-radius:0;font:500 .82rem var(--sans);letter-spacing:.1em;min-height:0;min-width:0;line-height:1;padding:9px 13px;top:12px;left:12px;right:auto}
.woocommerce div.product div.images{margin-bottom:2em}
.woocommerce div.product form.cart .variations select{min-width:200px}
.woocommerce .quantity .qty{width:5em;padding:11px 8px;border:1px solid var(--beige)}
.woocommerce-tabs ul.tabs li.active{border-bottom-color:#fff}
.woocommerce div.product .woocommerce-tabs ul.tabs li{border-radius:0;background:#fff}
.related.products>h2,.upsells.products>h2{margin-top:48px}
/* notices, tables, forms */
.woocommerce-message,.woocommerce-info,.woocommerce-error{border-top-color:var(--blue);background:#F6EFE6;color:var(--ink)}
.woocommerce-message::before,.woocommerce-info::before{color:var(--ink)}
.woocommerce form .form-row input.input-text,.woocommerce form .form-row textarea,.woocommerce form .form-row select{padding:11px 12px;border:1px solid var(--beige);border-radius:2px;background:#fff}
.woocommerce table.shop_table{border-radius:0;border-color:var(--line)}
.woocommerce table.shop_table th{font-weight:500}
.woocommerce-cart table.cart img{width:72px}
.woocommerce .cart_totals h2,.woocommerce-checkout h3{font-family:var(--serif);font-weight:500}
body.tamsyn-wa-checkout #payment ul.payment_methods,body.tamsyn-wa-checkout #place_order,body.tamsyn-wa-checkout .woocommerce-terms-and-conditions-wrapper,body.tamsyn-wa-checkout .woocommerce-privacy-policy-text{display:none!important}
body.tamsyn-wa-checkout #payment{background:transparent}
#tamsyn-toast{position:fixed;left:50%;bottom:calc(24px + env(safe-area-inset-bottom,0px));transform:translate(-50%,20px);background:var(--ink);color:#fff;padding:12px 22px;border-radius:30px;font-size:.9rem;opacity:0;pointer-events:none;transition:opacity .3s,transform .3s;z-index:40}
#tamsyn-toast.on{opacity:1;transform:translate(-50%,0)}