/*
Theme Name: INFRINT
Description: INFRINT storefront theme for WooCommerce. Built by Going Studio.
Version: 0.1.0
Requires at least: 6.5
Requires PHP: 8.1
Text Domain: infrint
*/

:root{--ink:#111;--paper:#fff;--brown:#4f3529;--brown-line:#b7a79d;--mist:#f5f4f2;--g7:#4a4a4a;--g5:#6f6f6f;--g3:#cfcfcf;--g1:#eee;--error:#9b2c1f;--sh1:#6b3a22;--sh2:#5a4a45;--sh3:#3a3f44;--latin:"Jost",sans-serif;--thai:"IBM Plex Sans Thai",sans-serif;--hh:72px}
*{box-sizing:border-box;margin:0}
html{scroll-behavior:smooth;scroll-padding-top:calc(var(--hh) + 16px)}
body{font-family:var(--thai);font-weight:300;color:var(--ink);background:var(--paper);font-size:16px;line-height:1.65}
img{display:block;width:100%;height:100%;object-fit:cover}
a{color:inherit}
button,input,select{font:inherit;color:inherit}
.lab{font-family:var(--latin);font-size:12px;letter-spacing:.18em;text-transform:uppercase;color:var(--brown)}
.disp{font-family:var(--latin);font-weight:300;font-size:clamp(38px,6vw,64px);line-height:1.05}
h1,h2,h3{font-weight:300}
.h1{font-size:clamp(26px,3.4vw,36px);line-height:1.3}
.mut{color:var(--g5)} .sm{font-size:14px}
.flag{font-size:12px;background:#fff6d6;border:1px solid #e3cf86;padding:1px 6px;color:#5d4a00;font-weight:400;white-space:nowrap}
.wrap{max-width:1120px;margin:0 auto;padding:0 40px}
/* buttons */
.btn{font-weight:400;font-size:15px;display:inline-flex;align-items:center;justify-content:center;min-height:48px;padding:0 28px;border:1px solid var(--ink);background:var(--ink);color:var(--paper);border-radius:0;cursor:pointer;text-decoration:none;transition:background .2s,color .2s,border-color .2s}
.btn:hover{background:var(--paper);color:var(--ink)} .btn:active{background:var(--brown);border-color:var(--brown);color:var(--paper)}
.btn.ghost{background:var(--paper);color:var(--ink)} .btn.ghost:hover{background:var(--ink);color:var(--paper)}
.btn.full{width:100%} .btn.s{min-height:44px;padding:0 18px;font-size:14px}
:focus-visible{outline:2px solid var(--brown);outline-offset:3px}
.ib{width:44px;height:44px;border:0;background:none;display:grid;place-items:center;cursor:pointer;position:relative}
.ib svg{width:22px;height:22px;fill:none;stroke:var(--ink);stroke-width:1.2}
.link{background:none;border:0;padding:0;text-decoration:underline;text-underline-offset:4px;cursor:pointer;font-weight:400}
.link:hover{color:var(--brown)}
/* header */
.hd{position:sticky;top:0;z-index:20;background:rgba(255,255,255,.97);border-bottom:1px solid var(--g1);height:var(--hh);display:grid;grid-template-columns:1fr auto 1fr;align-items:center;padding:0 32px}
.hd .l{display:flex;align-items:center;gap:28px} .hd .r{display:flex;justify-content:flex-end;gap:4px}
.hd nav{display:flex;gap:28px;font-size:14px;font-weight:400}
.hd nav a{text-decoration:none;padding:12px 0;border-bottom:1px solid transparent} .hd nav a:hover{border-color:var(--brown);color:var(--brown)}
.logo img{height:40px;width:auto;object-fit:contain}
.burger,.m-search{display:none}
.count{position:absolute;top:6px;right:4px;min-width:16px;height:16px;border-radius:8px;background:var(--brown);color:#fff;font-size:10px;font-weight:500;line-height:16px;text-align:center;padding:0 3px}
.count:empty{display:none}
/* mega + search */
.hd nav button{background:none;border:0;border-bottom:1px solid transparent;padding:12px 0;font-size:14px;font-weight:400;cursor:pointer;display:flex;gap:6px;align-items:center}
.hd nav button:hover,.hd.mega-on nav button{border-color:var(--brown);color:var(--brown)}
.mega,.searchp{display:none;position:absolute;left:0;right:0;top:100%;background:var(--paper);border-bottom:1px solid var(--g3);padding:32px 0 40px}
.hd.mega-on .mega,.hd.search-on .searchp{display:block}
.mega .in{display:grid;grid-template-columns:1fr 1fr 1fr 1.1fr;gap:24px}
.mega .tile{text-decoration:none;display:block} .mega .tile .im{aspect-ratio:4/3;background:var(--mist);overflow:hidden;margin-bottom:10px}
.mega .tile span{display:flex;gap:8px;align-items:center;font-size:14px;font-weight:400} .mega .tile:hover span{color:var(--brown)} .mega .dot{width:14px;height:14px}
.mega .links a{display:block;text-decoration:none;font-size:15px;padding:8px 0;border-bottom:1px solid var(--g1)} .mega .links a:hover{color:var(--brown)}
.searchp form{display:flex;gap:8px;border-bottom:1px solid var(--ink);align-items:center}
.searchp input{flex:1;height:56px;border:0;font-size:20px;font-weight:300;background:none} .searchp input:focus{outline:0}
.chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px} .chips a{border:1px solid var(--g3);padding:0 14px;min-height:44px;display:inline-flex;align-items:center;text-decoration:none;font-size:14px;font-weight:400} .chips a:hover{border-color:var(--brown);color:var(--brown)}
.tabs{display:flex;gap:24px} .tabs button{background:none;border:0;border-bottom:2px solid transparent;min-height:44px;font-size:16px;font-weight:400;cursor:pointer;color:var(--g5)} .tabs button[aria-selected=true]{color:var(--ink);border-color:var(--ink)}
.tabp{display:none;flex:1;flex-direction:column;min-height:0} .tabp.on{display:flex}
.menu .sub a{min-height:48px;font-size:15px;padding-left:16px;gap:10px} .menu .sub .dot{width:14px;height:14px}
/* views */
.view{display:none} .view.on{display:block}
/* home */
.hero{text-align:center;padding:40px 24px 88px}
.hero .plate{width:min(420px,78vw);aspect-ratio:4/5;margin:0 auto 36px}
.hero .maker{font-size:14px;color:var(--brown);margin-bottom:10px}
.hero p{color:var(--g7);margin:10px auto 26px}
.acts{display:flex;gap:12px;justify-content:center;flex-wrap:wrap}
.journey{display:grid;grid-template-columns:200px 1fr;gap:40px;padding-bottom:112px}
.journey aside{position:sticky;top:calc(var(--hh) + 48px);align-self:start}
.journey ol{list-style:none;padding:0;margin-top:14px;font-size:14px;color:var(--g5)} .journey li{padding:6px 0}
.axis{position:relative;padding-left:40px} .axis::before{content:"";position:absolute;left:11px;top:0;bottom:0;width:1px;background:var(--brown)}
.stop{position:relative;display:grid;grid-template-columns:1fr 1.1fr;gap:48px;align-items:center;padding-bottom:88px}
.stop:last-child{padding-bottom:0}
.stop::before{content:"";position:absolute;left:-35px;top:10px;width:13px;height:9px;background:var(--brown);clip-path:polygon(0 100%,38% 0,100% 0,62% 100%)}
.stop .ph{aspect-ratio:4/5} .stop h3{font-family:var(--latin);font-size:clamp(28px,3.6vw,40px);line-height:1.1;margin:6px 0 14px}
.stop h3.th{font-family:var(--thai)} .stop ul{padding-left:18px;color:var(--g7)}
.shades{background:var(--mist);padding:88px 0}
.shades .hdr{display:flex;justify-content:space-between;align-items:flex-end;gap:16px;margin-bottom:28px}
.dot{width:28px;height:28px;border-radius:50%;display:block;flex:none}
.price{font-family:var(--latin);font-size:18px;font-weight:400}
.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.card{background:var(--paper);display:flex;flex-direction:column}
.card .im{display:block;aspect-ratio:4/5;background:var(--mist);overflow:hidden} .card .im img{transition:transform .6s}
.card .im:hover img{transform:scale(1.03)}
.card .bd{padding:16px 16px 20px;display:flex;flex-direction:column;gap:4px;flex:1}
.card .sh{display:flex;align-items:center;gap:8px;font-size:14px;font-weight:400} .card .sh .dot{width:16px;height:16px}
.card h3{font-size:17px;font-weight:400;line-height:1.4} .card h3 a{text-decoration:none} .card h3 a:hover{color:var(--brown)}
.card .ds{font-size:14px;color:var(--g5);flex:1} .card .price{margin:6px 0 10px}
.card .bt{display:flex;flex-direction:column;gap:8px}
.maker-sec{padding:104px 0;display:grid;grid-template-columns:1fr 1.3fr;gap:56px;align-items:center}
/* product */
.pd{display:grid;grid-template-columns:1.1fr 1fr;gap:56px;padding-top:40px;padding-bottom:96px;align-items:start}
.gal .main{aspect-ratio:4/5;background:var(--mist)} .thumbs{display:flex;gap:8px;margin-top:8px}
.thumbs button{width:72px;aspect-ratio:4/5;border:1px solid transparent;padding:0;background:none;cursor:pointer} .thumbs button[aria-current=true]{border-color:var(--ink)}
.pd .info{position:sticky;top:calc(var(--hh) + 32px)}
.pick{display:flex;gap:8px;margin:10px 0 6px}
.pick button{flex:1;min-height:56px;border:1px solid var(--g3);background:var(--paper);display:flex;align-items:center;gap:10px;padding:0 12px;cursor:pointer;text-align:left;font-size:14px;font-weight:400}
.pick button[aria-pressed=true]{border:1.5px solid var(--ink)} .pick .dot{width:20px;height:20px}
details{border-top:1px solid var(--g3);padding:14px 0} details:last-of-type{border-bottom:1px solid var(--g3)}
summary{cursor:pointer;font-weight:400;list-style:none;display:flex;justify-content:space-between;min-height:28px} summary::after{content:"+";font-family:var(--latin);font-size:20px;line-height:1} details[open] summary::after{content:"–"}
details ul{padding-left:18px;color:var(--g7);margin-top:8px;font-size:15px}
/* cart */
.line{display:grid;grid-template-columns:88px 1fr auto;gap:16px;padding:20px 0;border-bottom:1px solid var(--g1);align-items:start}
.line .im{aspect-ratio:4/5;background:var(--mist)} .line b{font-weight:400}
.qty{display:inline-flex;border:1px solid var(--g3);margin-top:10px} .qty button{width:44px;height:44px;border:0;background:none;cursor:pointer;font-size:18px} .qty span{min-width:36px;display:grid;place-items:center;font-weight:400}
.sum{display:flex;justify-content:space-between;padding:8px 0} .sum.t{border-top:1px solid var(--ink);margin-top:8px;padding-top:14px;font-weight:400}
.pg{padding-top:48px;padding-bottom:96px} .two{display:grid;grid-template-columns:1.5fr 1fr;gap:64px;align-items:start}
.box{background:var(--mist);padding:28px}
.empty{text-align:center;padding:56px 0;color:var(--g5)}
/* drawer + menu */
.scrim{position:fixed;inset:0;background:rgba(17,17,17,.4);z-index:30;opacity:0;pointer-events:none;transition:opacity .32s}
.scrim.on{opacity:1;pointer-events:auto}
.drawer,.menu{position:fixed;top:0;bottom:0;width:min(440px,100vw);background:var(--paper);z-index:31;display:flex;flex-direction:column;transition:transform .32s ease;visibility:hidden}
.drawer{right:0;transform:translateX(100%)} .menu{left:0;transform:translateX(-100%)}
.drawer.on,.menu.on{transform:none;visibility:visible}
.dh{display:flex;justify-content:space-between;align-items:center;padding:14px 12px 14px 24px;border-bottom:1px solid var(--g1)}
.db{flex:1;overflow:auto;padding:0 24px} .df{padding:20px 24px;border-top:1px solid var(--g1)}
.menu a{display:flex;align-items:center;min-height:56px;border-bottom:1px solid var(--g1);text-decoration:none;font-size:18px}
/* forms */
.f{margin-bottom:18px} .f label{display:block;font-size:14px;font-weight:400;margin-bottom:6px}
.f input,.f select{width:100%;height:48px;border:1px solid var(--g5);border-radius:0;padding:0 14px;background:var(--paper);font-weight:400}
.f input:focus,.f select:focus{outline:2px solid var(--brown);outline-offset:1px;border-color:var(--brown)}
.f .msg{font-size:13px;margin-top:6px;color:var(--g5)} .f.err input{border-color:var(--error)} .f.err .msg{color:var(--error)}
.pw{position:relative} .pw button{position:absolute;right:2px;top:2px}
.r2{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.chk{display:flex;gap:10px;align-items:center;min-height:44px;font-size:15px} .chk input{width:20px;height:20px;accent-color:var(--ink)}
.step{border-top:1px solid var(--ink);padding:24px 0} .step h2{font-size:20px;font-weight:400;margin-bottom:16px;display:flex;gap:12px} .step h2 span{font-family:var(--latin);color:var(--brown)}
.opt{display:flex;gap:12px;align-items:center;border:1px solid var(--g3);padding:14px;margin-bottom:8px;min-height:56px}
.osum summary{font-weight:400}
.auth{display:grid;grid-template-columns:1fr 1fr} .auth>div{padding:8px 56px 8px 0} .auth>div+div{padding:8px 0 8px 56px;border-left:1px solid var(--brown-line)}
/* order */
.tl{list-style:none;padding:0;margin:24px 0;position:relative} .tl::before{content:"";position:absolute;left:6px;top:8px;bottom:8px;width:1px;background:var(--brown-line)}
.tl li{position:relative;padding:0 0 22px 32px;color:var(--g5)} .tl li::before{content:"";position:absolute;left:0;top:7px;width:13px;height:9px;background:var(--g3);clip-path:polygon(0 100%,38% 0,100% 0,62% 100%)}
.tl li.done{color:var(--ink)} .tl li.done::before{background:var(--brown)} .tl li b{font-weight:400;display:block}
/* footer */
.ft{background:var(--ink);color:#fff;padding:56px 0 32px;margin-top:0} .ft .cols{display:grid;grid-template-columns:1.2fr 1fr 1fr 1fr;gap:32px}
.ft h4{font-family:var(--latin);font-weight:400;font-size:12px;letter-spacing:.18em;text-transform:uppercase;margin-bottom:12px;color:#d9cdc5}
.ft a{display:block;text-decoration:none;font-size:14px;padding:5px 0;color:#eee} .ft a:hover{text-decoration:underline}
.ft .logo-w{font-family:var(--latin);font-size:26px;letter-spacing:.04em}
/* sticky buy (mobile) */
.buybar{display:none}
.toast{position:fixed;left:50%;bottom:24px;transform:translate(-50%,20px);background:var(--ink);color:#fff;padding:12px 20px;font-size:14px;font-weight:400;opacity:0;transition:.25s;z-index:40;pointer-events:none}
.toast.on{opacity:1;transform:translate(-50%,0)}
/* ---------- tablet ---------- */
@media (max-width:1023px){
  .wrap{padding:0 48px} .hd{padding:0 12px} .hd nav{display:none} .burger{display:grid} .hd .l{gap:0}
  .two>.box{order:-1}
  .journey{grid-template-columns:1fr} .journey aside{display:none}
  .stop{gap:32px} .cards{gap:16px}
  .two{grid-template-columns:1fr;gap:32px} .pd{gap:32px} .ft .cols{grid-template-columns:1fr 1fr}
  .auth>div{padding-right:32px} .auth>div+div{padding-left:32px}
}
/* ---------- mobile ---------- */
@media (max-width:719px){
  :root{--hh:60px}
  .wrap{padding:0 20px} .hd{padding:0 4px} .searchp{padding:12px 0 20px} .searchp input{font-size:17px;height:48px} .d-only{display:none} .m-search{display:grid} .logo img{height:30px}
  .hero{padding:16px 20px 56px} .hero .plate{width:100%;aspect-ratio:1/1;margin-bottom:24px}
  .acts .btn{flex:1}
  .journey{padding-bottom:64px} .axis{padding-left:24px} .axis::before{left:5px}
  .stop{grid-template-columns:1fr;gap:16px;padding-bottom:48px} .stop::before{left:-25px} .stop .ph{aspect-ratio:4/3}
  .shades{padding:56px 0} .shades .hdr{margin-bottom:20px;flex-direction:column;align-items:flex-start;gap:8px} .cards{grid-template-columns:1fr 1fr;gap:12px}
  .card .bd{padding:12px 12px 14px} .card h3{font-size:15px} .card .btn{padding:0 8px;font-size:14px;min-height:44px}
  .maker-sec{grid-template-columns:1fr;gap:24px;padding:64px 0}
  .pd{grid-template-columns:1fr;padding-top:0;padding-bottom:48px} .pd .gal{margin:0 -20px} .pd .info{position:static}
  .gal .main{aspect-ratio:1/1} .thumbs{padding:0 20px;overflow-x:auto} .pd .addbtn{display:none}
  .drawer,.menu{width:100vw}
  .r2{grid-template-columns:1fr;gap:0} .pg{padding-top:28px;padding-bottom:56px}
  .auth{grid-template-columns:1fr} .auth>div,.auth>div+div{padding:0;border:0} .auth>div+div{border-top:1px solid var(--brown-line);margin-top:32px;padding-top:32px}
  .ft .cols{grid-template-columns:1fr;gap:20px}
  .buybar{display:flex;position:fixed;left:0;right:0;bottom:0;z-index:15;background:var(--paper);border-top:1px solid var(--g3);padding:10px 12px calc(10px + env(safe-area-inset-bottom));gap:10px;align-items:center;transform:translateY(110%);transition:transform .25s}
  .buybar.on{transform:none} .buybar .who{flex:1;font-size:14px;font-weight:400;display:flex;gap:8px;align-items:center;background:none;border:0;min-height:44px;text-align:left} .buybar .dot{width:20px;height:20px}
  body.has-bar{padding-bottom:72px} .toast{bottom:88px}
}
@media (prefers-reduced-motion:reduce){*{transition:none!important;scroll-behavior:auto!important}}

/* ---------- product page: radio shade picker ---------- */
.pick{border:0;padding:0;min-width:0}
.pick input{position:absolute;opacity:0;width:1px;height:1px}
.pick label{flex:1;min-height:56px;border:1px solid var(--g3);background:var(--paper);display:flex;align-items:center;gap:10px;padding:0 12px;cursor:pointer;font-size:14px;font-weight:400}
.pick input:checked+label{border:1.5px solid var(--ink)}
.pick input:focus-visible+label{outline:2px solid var(--brown);outline-offset:3px}
.pick input:disabled+label{color:var(--g5);background:var(--g1);cursor:not-allowed}
.maker-sec .ph{aspect-ratio:4/5}
.sr{position:absolute;left:-9999px}
.skip{position:absolute;left:-9999px;top:0;background:var(--ink);color:#fff;padding:12px 16px;z-index:50} .skip:focus{left:8px;top:8px}
.btn[aria-busy=true]{opacity:.7;pointer-events:none}
.orders li{list-style:none;border-bottom:1px solid var(--g1);padding:14px 0} .orders{padding:0}
.entry{max-width:720px} .entry h2{font-size:22px;font-weight:400;margin:28px 0 8px} .entry p,.entry ul{margin-bottom:14px;color:var(--g7)} .entry ul{padding-left:20px}
.draft{background:#fff6d6;border:1px solid #e3cf86;padding:10px 14px;font-size:14px;color:#5d4a00;font-weight:400;margin-bottom:24px}

/* ---------- WooCommerce pages ---------- */
.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-page #payment #place_order,.wc-block-components-button{font-family:var(--thai);font-weight:400;font-size:15px;display:inline-flex;align-items:center;justify-content:center;min-height:48px;padding:0 28px;border:1px solid var(--ink);background:var(--ink);color:var(--paper);border-radius:0;line-height:1.2;transition:background .2s,color .2s}
.woocommerce a.button:hover,.woocommerce button.button:hover,.woocommerce input.button:hover,.woocommerce a.button.alt:hover,.woocommerce button.button.alt:hover,.woocommerce-page #payment #place_order:hover{background:var(--paper);color:var(--ink)}
.woocommerce button.button:disabled,.woocommerce button.button:disabled[disabled]{background:var(--g1);border-color:var(--g3);color:var(--g5);opacity:1;padding:0 28px}
.woocommerce a.button.ghost{background:var(--paper);color:var(--ink)} .woocommerce a.button.ghost:hover{background:var(--ink);color:var(--paper)}
.woocommerce form .form-row label{font-size:14px;font-weight:400;line-height:1.5;margin-bottom:6px}
.woocommerce form .form-row input.input-text,.woocommerce form .form-row textarea,.woocommerce form .form-row select,.select2-container--default .select2-selection--single,.woocommerce .quantity .qty,.woocommerce-cart table.cart td.actions .coupon .input-text{height:48px;border:1px solid var(--g5);border-radius:0;padding:0 14px;font:inherit;font-weight:400;background:var(--paper);color:var(--ink)}
.woocommerce form .form-row textarea{height:96px;padding:12px 14px}
.select2-container--default .select2-selection--single .select2-selection__rendered{line-height:46px;padding:0} .select2-container--default .select2-selection--single .select2-selection__arrow{height:46px}
.woocommerce form .form-row input.input-text:focus,.woocommerce form .form-row textarea:focus{outline:2px solid var(--brown);outline-offset:1px;border-color:var(--brown)}
.woocommerce form .form-row.woocommerce-invalid input.input-text{border-color:var(--error)}
.woocommerce form .form-row .required{color:var(--error);text-decoration:none}
.woocommerce form.login,.woocommerce form.register,.woocommerce form.checkout_coupon,.woocommerce form.woocommerce-form-track-order{border:0;border-radius:0;padding:0;margin:0}
.woocommerce .col2-set{display:grid;grid-template-columns:1fr 1fr;width:100%} .woocommerce .col2-set::before,.woocommerce .col2-set::after{display:none}
.woocommerce .col2-set .col-1,.woocommerce .col2-set .col-2{float:none;width:auto;max-width:none}
.woocommerce-account .col2-set .col-1{padding-right:56px} .woocommerce-account .col2-set .col-2{padding-left:56px;border-left:1px solid var(--brown-line)}
.woocommerce-account h2,.woocommerce-checkout h3,.cart_totals h2,.woocommerce-order h2,.woocommerce-column__title{font-size:20px;font-weight:400;margin-bottom:16px}
.woocommerce form .show-password-input,.woocommerce-page form .show-password-input{top:12px;right:12px}
.woocommerce-form-login__rememberme{display:flex!important;gap:10px;align-items:center;min-height:44px;font-size:15px;margin-bottom:8px} .woocommerce-form-login__rememberme input{width:20px;height:20px;accent-color:var(--ink)}
.woocommerce-form-login .woocommerce-form-login__submit,.woocommerce-form-register__submit{width:100%;float:none}
.woocommerce-LostPassword a,.woocommerce-privacy-policy-text a,.woocommerce a.woocommerce-privacy-policy-link{text-underline-offset:4px}
.woocommerce-info,.woocommerce-message,.woocommerce-error,.woocommerce-noreviews,p.no-comments{border:0;border-left:3px solid var(--brown);background:var(--mist);color:var(--ink);border-radius:0;padding:14px 18px;font-weight:400}
.woocommerce-info::before,.woocommerce-message::before,.woocommerce-error::before{display:none}
.woocommerce-error{border-left-color:var(--error);list-style:none}
.woocommerce-message .button,.woocommerce-info .button{min-height:40px!important;padding:0 16px!important;margin-left:16px}
.woocommerce table.shop_table{border:0;border-radius:0;border-collapse:collapse;margin-bottom:24px}
.woocommerce table.shop_table th{font-weight:400;font-size:14px;color:var(--g5);border-bottom:1px solid var(--ink);padding:12px 8px}
.woocommerce table.shop_table td{border-top:1px solid var(--g1);padding:16px 8px;vertical-align:middle}
.woocommerce table.shop_table td.product-name a{text-decoration:none;font-weight:400} .woocommerce table.shop_table .variation{font-size:14px;color:var(--g5)} .woocommerce table.shop_table .variation dt{font-weight:300}
.woocommerce-cart .woocommerce table.cart td.product-thumbnail img{width:88px;height:auto;aspect-ratio:4/5;object-fit:cover;background:var(--mist)}
.woocommerce a.remove{color:var(--ink)!important;font-weight:300;width:44px;height:44px;line-height:44px;border-radius:0} .woocommerce a.remove:hover{background:var(--ink);color:#fff!important}
.woocommerce .cart-collaterals .cart_totals,.woocommerce-page .cart-collaterals .cart_totals{float:none;width:100%}
.woocommerce .cart-collaterals{background:var(--mist);padding:28px;max-width:480px;margin-left:auto}
.woocommerce .wc-proceed-to-checkout a.checkout-button{width:100%;margin-bottom:8px;font-size:15px;padding:0 28px}
.woocommerce .wc-proceed-to-checkout .ghost{width:100%}
.woocommerce-checkout form.checkout{display:grid;grid-template-columns:1.5fr 1fr;gap:0 64px;align-items:start}
.woocommerce-checkout form.checkout>.col2-set{grid-column:1;grid-row:1 / span 4;display:block}
.woocommerce-checkout form.checkout #order_review_heading,.woocommerce-checkout form.checkout #order_review,.woocommerce-checkout form.checkout>#payment{grid-column:2;float:none;width:auto;background:var(--mist);margin:0}
.woocommerce-checkout form.checkout #order_review_heading{padding:28px 28px 0}
.woocommerce-checkout form.checkout #order_review{padding:16px 28px 8px}
.woocommerce-checkout form.checkout>#payment{padding:0 28px 28px}
.woocommerce-checkout #payment{background:none;border-radius:0} .woocommerce-checkout #payment ul.payment_methods{padding:0;border-bottom:1px solid var(--g3)} .woocommerce-checkout #payment div.form-row{padding:16px 0 0}
.woocommerce-checkout #payment div.payment_box{background:var(--paper);color:var(--g7)} .woocommerce-checkout #payment div.payment_box::before{display:none}
.woocommerce-checkout #payment #place_order{width:100%;float:none}
.woocommerce-checkout .woocommerce-billing-fields h3{border-top:1px solid var(--ink);padding-top:24px}
.woocommerce form .form-row-first,.woocommerce form .form-row-last{width:48%}
.woocommerce ul.order_details{padding:0;margin-bottom:32px} .woocommerce ul.order_details li{border-right:1px solid var(--g3);font-size:13px;color:var(--g5)} .woocommerce ul.order_details li strong{font-weight:400;color:var(--ink);font-size:16px}
.woocommerce-MyAccount-navigation ul{list-style:none;padding:0} .woocommerce-MyAccount-navigation a{display:block;padding:12px 0;border-bottom:1px solid var(--g1);text-decoration:none} .woocommerce-MyAccount-navigation .is-active a{font-weight:400;color:var(--brown)}
.woocommerce-account .woocommerce-MyAccount-navigation{width:24%} .woocommerce-account .woocommerce-MyAccount-content{width:70%}
.woocommerce form.track_order{max-width:560px} .track-next{margin-top:24px}
@media (max-width:1023px){
  .woocommerce-checkout form.checkout{display:flex;flex-direction:column}
  .woocommerce-checkout form.checkout #order_review_heading{order:-2} .woocommerce-checkout form.checkout #order_review{order:-1;margin-bottom:32px;padding-bottom:20px}
  .woocommerce-checkout form.checkout>#payment{order:5;background:none;padding:0}
  .woocommerce-account .col2-set .col-1{padding-right:32px} .woocommerce-account .col2-set .col-2{padding-left:32px}
}
@media (max-width:719px){
  .woocommerce .col2-set{grid-template-columns:1fr}
  .woocommerce-account .col2-set .col-1,.woocommerce-account .col2-set .col-2{padding:0;border:0} .woocommerce-account .col2-set .col-2{border-top:1px solid var(--brown-line);margin-top:32px;padding-top:32px}
  .woocommerce form .form-row-first,.woocommerce form .form-row-last{width:100%;float:none}
  .woocommerce .cart-collaterals{max-width:none;padding:20px}
  .woocommerce-account .woocommerce-MyAccount-navigation,.woocommerce-account .woocommerce-MyAccount-content{width:100%;float:none}
  .woocommerce table.shop_table_responsive tr td::before{font-weight:400}
  .woocommerce-message .button,.woocommerce-info .button{margin:8px 0 0;float:none}
}

/* ---------- theme additions ---------- */
.stop h2.h3{font-family:var(--latin);font-weight:300;font-size:clamp(28px,3.6vw,40px);line-height:1.1;margin:6px 0 14px} .stop h2.h3.th{font-family:var(--thai)}
.reveal{opacity:0;transform:translateY(16px);transition:opacity .6s ease,transform .6s ease} .reveal.in{opacity:1;transform:none}
.price .woocommerce-Price-amount{font-family:var(--latin)} .price del{color:var(--g5);margin-right:8px} .price ins{text-decoration:none}
.admin-bar .hd{top:32px} @media (max-width:782px){.admin-bar .hd{top:46px}} @media (max-width:600px){.admin-bar .hd{top:0}}
@media (max-width:719px){.pd .cart-form .addbtn{display:none} .buybar .who span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}}
@media (min-width:720px){.buybar{display:none!important}}
@media (max-width:768px){.woocommerce-cart .woocommerce table.shop_table_responsive tr td.product-thumbnail{display:block;text-align:left!important} .woocommerce-cart .woocommerce table.shop_table_responsive tr td.product-thumbnail::before{display:none}}