/* ============ Design tokens ============ */
:root{
  --color-primary: #2f5d4f;
  --color-primary-dark: #1f4038;
  --color-primary-light: #e7efe9;
  --color-accent: #c8874a;
  --color-accent-dark: #a86a34;
  --color-bg: #faf8f4;
  --color-surface: #ffffff;
  --color-text: #262b26;
  --color-muted: #6b7268;
  --color-border: #e6e2d8;
  --color-danger: #b3452f;
  --font-body: 'Sarabun', system-ui, sans-serif;
  --font-head: 'Prompt', 'Sarabun', system-ui, sans-serif;
  --radius: 14px;
  --radius-sm: 8px;
  --shadow-sm: 0 1px 2px rgba(20,30,20,.06), 0 1px 1px rgba(20,30,20,.04);
  --shadow-md: 0 8px 24px rgba(20,30,20,.08);
  --shadow-lg: 0 20px 48px rgba(20,30,20,.14);
  --container: 1160px;
}

*,*::before,*::after{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0;
  font-family:var(--font-body);
  color:var(--color-text);
  background:var(--color-bg);
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;display:block;}
a{color:inherit;text-decoration:none;}
h1,h2,h3,h4{font-family:var(--font-head);font-weight:600;line-height:1.25;margin:0 0 .5em;}
p{margin:0 0 1em;}
ul{margin:0;padding:0;list-style:none;}
button{font-family:inherit;cursor:pointer;}
.wrap{max-width:var(--container);margin:0 auto;padding:0 24px;}
.skip-link{position:absolute;left:-999px;top:0;background:#fff;padding:10px 16px;z-index:999;}
.skip-link:focus{left:12px;top:12px;}

/* ============ Announce bar ============ */
.announce-bar{
  background:var(--color-primary-dark);
  color:#f2f0e8;
  font-size:.85rem;
  text-align:center;
  padding:8px 16px;
  letter-spacing:.01em;
}

/* ============ Header ============ */
.site-header{
  position:sticky;top:0;z-index:100;
  background:rgba(250,248,244,.92);
  backdrop-filter:saturate(160%) blur(8px);
  border-bottom:1px solid var(--color-border);
}
.header-inner{display:flex;align-items:center;justify-content:space-between;height:76px;gap:24px;}
.brand{display:flex;align-items:center;gap:10px;}
.brand-mark{
  width:38px;height:38px;border-radius:10px;
  background:linear-gradient(155deg,var(--color-primary),var(--color-primary-dark));
  color:#fff;display:flex;align-items:center;justify-content:center;
  font-family:var(--font-head);font-weight:700;font-size:1.1rem;
}
.brand-text{display:flex;flex-direction:column;line-height:1.1;}
.brand-text strong{font-family:var(--font-head);font-size:1.05rem;color:var(--color-primary-dark);}
.brand-text small{font-size:.68rem;color:var(--color-muted);letter-spacing:.06em;text-transform:uppercase;}
.main-nav ul{display:flex;gap:28px;}
.main-nav a{font-size:.95rem;color:var(--color-text);padding:6px 0;border-bottom:2px solid transparent;transition:color .15s,border-color .15s;}
.main-nav a:hover,.main-nav a.active{color:var(--color-primary);border-color:var(--color-accent);}
.header-actions{display:flex;align-items:center;gap:10px;}
.icon-btn{position:relative;width:40px;height:40px;border-radius:50%;display:flex;align-items:center;justify-content:center;background:transparent;border:1px solid transparent;color:var(--color-primary-dark);}
.icon-btn:hover{background:var(--color-primary-light);}
.cart-count{
  position:absolute;top:-2px;right:-2px;min-width:18px;height:18px;border-radius:9px;
  background:var(--color-accent);color:#fff;font-size:.68rem;display:flex;align-items:center;justify-content:center;padding:0 4px;font-weight:700;
}
.menu-toggle{display:none;}

/* ============ Buttons ============ */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  padding:13px 26px;border-radius:999px;font-weight:600;font-size:.95rem;
  border:1px solid transparent;transition:transform .12s ease, box-shadow .12s ease, background .15s;
}
.btn:active{transform:translateY(1px);}
.btn-primary{background:var(--color-primary);color:#fff;}
.btn-primary:hover{background:var(--color-primary-dark);box-shadow:var(--shadow-md);}
.btn-accent{background:var(--color-accent);color:#fff;}
.btn-accent:hover{background:var(--color-accent-dark);box-shadow:var(--shadow-md);}
.btn-outline{background:transparent;border-color:var(--color-primary);color:var(--color-primary);}
.btn-outline:hover{background:var(--color-primary-light);}
.btn-ghost{background:transparent;color:var(--color-text);}
.btn-block{width:100%;}
.btn-lg{padding:16px 32px;font-size:1.02rem;}
.btn[disabled]{opacity:.5;cursor:not-allowed;}

/* ============ Hero ============ */
.hero{
  position:relative;overflow:hidden;
  background:radial-gradient(1100px 480px at 82% -10%, #e5efe6 0%, transparent 60%), var(--color-bg);
  padding:72px 0 88px;
}
.hero-inner{display:grid;grid-template-columns:1.1fr .9fr;gap:56px;align-items:center;}
.eyebrow{
  display:inline-flex;align-items:center;gap:8px;font-size:.78rem;font-weight:600;letter-spacing:.08em;text-transform:uppercase;
  color:var(--color-accent-dark);background:#fbeee0;padding:6px 14px;border-radius:999px;margin-bottom:18px;
}
.hero h1{font-size:clamp(2rem,4vw,3rem);color:var(--color-primary-dark);max-width:16ch;}
.hero p.lead{font-size:1.12rem;color:var(--color-muted);max-width:48ch;}
.hero-actions{display:flex;gap:14px;margin-top:28px;flex-wrap:wrap;}
.hero-media{position:relative;}
.hero-media img{border-radius:var(--radius);box-shadow:var(--shadow-lg);aspect-ratio:4/5;object-fit:cover;width:100%;}
.trust-badges{display:flex;gap:28px;margin-top:44px;flex-wrap:wrap;}
.trust-badge{display:flex;align-items:center;gap:10px;font-size:.85rem;color:var(--color-muted);}
.trust-badge b{color:var(--color-primary-dark);}

/* ============ Sections ============ */
.section{padding:64px 0;}
.section-head{display:flex;align-items:flex-end;justify-content:space-between;gap:24px;margin-bottom:36px;flex-wrap:wrap;}
.section-head h2{font-size:clamp(1.5rem,2.6vw,2.1rem);color:var(--color-primary-dark);}
.section-head p{color:var(--color-muted);margin:0;}
.section-alt{background:var(--color-surface);border-top:1px solid var(--color-border);border-bottom:1px solid var(--color-border);}

/* ============ Product grid & cards ============ */
.product-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:24px;}
.card-product{
  background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius);overflow:hidden;
  display:flex;flex-direction:column;transition:box-shadow .18s ease, transform .18s ease;
}
.card-product:hover{box-shadow:var(--shadow-md);transform:translateY(-3px);}
.card-product .thumb{aspect-ratio:1/1;overflow:hidden;background:#f1efe7;position:relative;}
.card-product .thumb img{width:100%;height:100%;object-fit:cover;transition:transform .3s ease;}
.card-product:hover .thumb img{transform:scale(1.04);}
.badge{position:absolute;top:10px;left:10px;background:var(--color-primary);color:#fff;font-size:.7rem;font-weight:700;padding:4px 10px;border-radius:999px;letter-spacing:.03em;}
.card-body{padding:16px 16px 18px;display:flex;flex-direction:column;gap:6px;flex:1;}
.card-cat{font-size:.7rem;text-transform:uppercase;letter-spacing:.06em;color:var(--color-accent-dark);font-weight:700;}
.card-title{font-size:1rem;font-weight:600;color:var(--color-text);}
.stars{color:var(--color-accent);font-size:.8rem;letter-spacing:1px;}
.card-price{margin-top:auto;display:flex;align-items:baseline;gap:8px;}
.card-price .now{font-family:var(--font-head);font-weight:700;color:var(--color-primary-dark);font-size:1.15rem;}
.card-price .was{text-decoration:line-through;color:var(--color-muted);font-size:.85rem;}
.card-add{margin-top:10px;}

/* ============ Filters ============ */
.shop-toolbar{display:flex;gap:12px;flex-wrap:wrap;align-items:center;margin-bottom:28px;}
.chip{
  padding:8px 16px;border-radius:999px;border:1px solid var(--color-border);background:var(--color-surface);
  font-size:.85rem;color:var(--color-text);
}
.chip[aria-pressed="true"]{background:var(--color-primary);border-color:var(--color-primary);color:#fff;}

/* ============ Product detail ============ */
.product-detail-grid{display:grid;grid-template-columns:1fr 1fr;gap:56px;padding:56px 0;}
.pd-gallery img{border-radius:var(--radius);box-shadow:var(--shadow-md);width:100%;aspect-ratio:1/1;object-fit:cover;}
.pd-cat{color:var(--color-accent-dark);text-transform:uppercase;font-size:.78rem;font-weight:700;letter-spacing:.06em;}
.pd-title{font-size:1.9rem;color:var(--color-primary-dark);margin:8px 0 12px;}
.pd-meta{display:flex;gap:16px;align-items:center;color:var(--color-muted);font-size:.88rem;margin-bottom:18px;}
.pd-price{font-family:var(--font-head);font-size:2rem;font-weight:700;color:var(--color-primary-dark);margin-bottom:20px;}
.tier-list{display:flex;flex-direction:column;gap:10px;margin:20px 0;}
.tier-option{
  display:flex;justify-content:space-between;align-items:center;gap:12px;
  border:1.5px solid var(--color-border);border-radius:var(--radius-sm);padding:12px 16px;cursor:pointer;transition:border-color .15s,background .15s;
}
.tier-option:hover{border-color:var(--color-primary);}
.tier-option.selected{border-color:var(--color-primary);background:var(--color-primary-light);}
.tier-option input{accent-color:var(--color-primary);}
.tier-label{font-weight:600;}
.tier-note{color:var(--color-muted);font-size:.82rem;}
.tier-price{font-weight:700;color:var(--color-primary-dark);}
.qty-row{display:flex;align-items:center;gap:14px;margin:22px 0;}
.qty-stepper{display:inline-flex;align-items:center;border:1px solid var(--color-border);border-radius:999px;overflow:hidden;}
.qty-stepper button{width:38px;height:38px;background:var(--color-surface);border:none;font-size:1.1rem;}
.qty-stepper button:hover{background:var(--color-primary-light);}
.qty-stepper input{width:44px;text-align:center;border:none;font-size:1rem;font-family:inherit;}
.pd-actions{display:flex;gap:12px;flex-wrap:wrap;}
.pd-tabs{margin-top:8px;}
.pd-block{padding:26px 0;border-top:1px solid var(--color-border);}
.pd-block h3{color:var(--color-primary-dark);font-size:1.1rem;}
.pd-block ul{padding-left:1.2em;list-style:disc;}
.pd-block li{margin-bottom:6px;}
.pd-warn{background:#fbeee0;border:1px solid #f0d8b8;border-radius:var(--radius-sm);padding:14px 18px;color:#7a4a1c;font-size:.9rem;}

/* ============ Cart & Checkout ============ */
.cart-page-grid{display:grid;grid-template-columns:1.6fr 1fr;gap:40px;align-items:flex-start;}
.cart-row{display:flex;gap:16px;padding:18px 0;border-bottom:1px solid var(--color-border);align-items:center;}
.cart-row img{width:84px;height:84px;object-fit:cover;border-radius:var(--radius-sm);background:#f1efe7;}
.cart-row-info{flex:1;}
.cart-row-title{font-weight:600;margin-bottom:2px;}
.cart-row-tier{color:var(--color-muted);font-size:.85rem;}
.cart-row-price{font-weight:700;color:var(--color-primary-dark);white-space:nowrap;}
.cart-remove{color:var(--color-danger);font-size:.82rem;background:none;border:none;padding:4px 0;}
.summary-card{background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius);padding:24px;position:sticky;top:100px;}
.summary-row{display:flex;justify-content:space-between;padding:8px 0;font-size:.95rem;color:var(--color-muted);}
.summary-row.total{border-top:1px solid var(--color-border);margin-top:8px;padding-top:16px;font-size:1.15rem;font-weight:700;color:var(--color-text);}
.empty-state{text-align:center;padding:80px 20px;color:var(--color-muted);}

.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px;}
.form-field{display:flex;flex-direction:column;gap:6px;margin-bottom:16px;}
.form-field.full{grid-column:1/-1;}
.form-field label{font-size:.85rem;font-weight:600;color:var(--color-text);}
.form-field input,.form-field textarea,.form-field select{
  padding:12px 14px;border:1px solid var(--color-border);border-radius:var(--radius-sm);font-family:inherit;font-size:.95rem;background:#fff;
}
.form-field input:focus,.form-field textarea:focus,.form-field select:focus{outline:2px solid var(--color-primary);outline-offset:1px;}
.pay-options{display:flex;flex-direction:column;gap:10px;margin:12px 0 24px;}
.pay-option{display:flex;gap:12px;align-items:flex-start;border:1.5px solid var(--color-border);border-radius:var(--radius-sm);padding:14px 16px;cursor:pointer;}
.pay-option.selected{border-color:var(--color-primary);background:var(--color-primary-light);}
.pay-option strong{display:block;}
.pay-option span{color:var(--color-muted);font-size:.85rem;}

/* ============ Misc content blocks ============ */
.prose{max-width:72ch;}
.prose h2{margin-top:1.6em;}
.two-col{display:grid;grid-template-columns:1fr 1fr;gap:48px;align-items:center;}
.stat-row{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;margin:40px 0;}
.stat-card{background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius);padding:24px;text-align:center;}
.stat-card b{display:block;font-family:var(--font-head);font-size:1.8rem;color:var(--color-primary-dark);}
.card{background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius);padding:22px;}
.blog-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:24px;}
.blog-card{background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius);overflow:hidden;display:flex;flex-direction:column;}
.blog-card .thumb{aspect-ratio:16/10;background:linear-gradient(155deg,var(--color-primary-light),#f3ede0);display:flex;align-items:center;justify-content:center;color:var(--color-primary);font-family:var(--font-head);font-weight:700;font-size:1.4rem;}
.blog-card .body{padding:18px;display:flex;flex-direction:column;gap:8px;flex:1;}
.blog-meta{color:var(--color-muted);font-size:.8rem;}
.blog-title{font-weight:600;font-size:1.02rem;}
.blog-excerpt{color:var(--color-muted);font-size:.9rem;flex:1;}
.job-card{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;align-items:center;background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius);padding:22px 24px;margin-bottom:16px;}
.job-title{font-weight:700;color:var(--color-primary-dark);}
.job-meta{color:var(--color-muted);font-size:.85rem;}

/* ============ CTA band ============ */
.cta-band{background:linear-gradient(155deg,var(--color-primary),var(--color-primary-dark));color:#fff;border-radius:24px;padding:56px;text-align:center;margin:0 24px;}
.cta-band h2{color:#fff;}
.cta-band p{color:#dce7e0;max-width:60ch;margin:0 auto 24px;}

/* ============ Toast ============ */
.cart-toast{
  position:fixed;bottom:24px;right:24px;background:var(--color-primary-dark);color:#fff;padding:14px 20px;border-radius:var(--radius-sm);
  box-shadow:var(--shadow-lg);opacity:0;transform:translateY(12px);pointer-events:none;transition:opacity .2s,transform .2s;z-index:200;font-size:.9rem;
}
.cart-toast.show{opacity:1;transform:translateY(0);}

/* ============ Footer ============ */
.site-footer{background:var(--color-primary-dark);color:#dfe7e1;padding:56px 0 24px;margin-top:64px;}
.footer-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:32px;padding-bottom:36px;border-bottom:1px solid rgba(255,255,255,.12);}
.footer-brand .brand-mark{margin-bottom:14px;}
.footer-brand p{color:#dfe7e1;margin-bottom:4px;}
.footer-brand .muted{color:#a9b8ae;font-size:.85rem;}
.footer-col h4{color:#fff;font-size:.85rem;text-transform:uppercase;letter-spacing:.06em;margin-bottom:14px;}
.footer-col li{margin-bottom:10px;font-size:.9rem;}
.footer-col a:hover{color:#fff;}
.social-row{display:flex;gap:10px;margin-top:16px;}
.social-row a{width:34px;height:34px;border-radius:50%;background:rgba(255,255,255,.1);display:flex;align-items:center;justify-content:center;font-size:.68rem;font-weight:700;}
.footer-bottom{display:flex;justify-content:space-between;padding-top:20px;font-size:.8rem;color:#a9b8ae;flex-wrap:wrap;gap:8px;}

/* ============ Responsive ============ */
@media (max-width:960px){
  .hero-inner{grid-template-columns:1fr;}
  .hero-media{order:-1;}
  .product-detail-grid{grid-template-columns:1fr;gap:32px;}
  .cart-page-grid{grid-template-columns:1fr;}
  .two-col{grid-template-columns:1fr;}
  .footer-grid{grid-template-columns:1fr 1fr;}
  .stat-row{grid-template-columns:1fr;}
}
@media (max-width:720px){
  .main-nav{position:fixed;inset:76px 0 0 0;background:var(--color-bg);transform:translateY(-110%);transition:transform .2s ease;padding:24px;overflow-y:auto;}
  .main-nav.open{transform:translateY(0);}
  .main-nav ul{flex-direction:column;gap:4px;}
  .main-nav a{display:block;padding:14px 4px;border-bottom:1px solid var(--color-border);}
  .menu-toggle{display:flex;}
  .form-grid{grid-template-columns:1fr;}
  .footer-grid{grid-template-columns:1fr;}
  .cta-band{padding:36px 22px;margin:0 12px;}
}