:root {
  --yellow: #ffd400;
  --yellow-soft: #ffe76a;
  --black: #111111;
  --white: #fffdf4;
  --line: rgba(17, 17, 17, 0.18);
  --muted: #5a5547;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: "Kanit", sans-serif;
  color: var(--black);
  background: var(--white);
}
a { color: inherit; text-decoration: none; }
button, input { font: inherit; }
button { cursor: pointer; }

.announcement {
  background: var(--black);
  color: white;
  text-align: center;
  padding: 10px 20px;
  font-size: 13px;
  letter-spacing: .3px;
}

.site-header {
  position: sticky;
  top: 0;
  z-index: 30;
  min-height: 82px;
  padding: 0 5vw;
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 30px;
  background: rgba(255, 212, 0, .96);
  border-bottom: 2px solid var(--black);
  backdrop-filter: blur(14px);
}
.brand {
  display: inline-flex;
  align-items: baseline;
  gap: 3px;
  font-size: 28px;
  font-weight: 800;
  letter-spacing: -1px;
}
.brand-mark { background: var(--black); color: var(--yellow); padding: 2px 7px; }
.brand small { font-size: 10px; letter-spacing: 2px; margin-left: 6px; }
.main-nav { display: flex; justify-content: center; gap: 28px; font-size: 15px; }
.main-nav a:hover { text-decoration: underline; text-underline-offset: 5px; }
.header-actions { display: flex; gap: 8px; align-items: center; }
.icon-button, .cart-button, .menu-toggle {
  background: transparent;
  border: 1.5px solid var(--black);
  min-height: 40px;
}
.icon-button { width: 40px; border-radius: 50%; font-size: 22px; }
.cart-button { padding: 0 14px; border-radius: 999px; font-weight: 600; }
.cart-button span { display: inline-grid; place-items: center; min-width: 24px; height: 24px; background: var(--black); color: var(--yellow); border-radius: 50%; margin-left: 6px; }
.menu-toggle { display: none; font-size: 24px; }

.hero {
  min-height: 680px;
  display: grid;
  grid-template-columns: 1.05fr .95fr;
  background: var(--yellow);
  border-bottom: 2px solid var(--black);
}
.hero-copy { padding: 90px 6vw; display: flex; flex-direction: column; justify-content: center; }
.eyebrow { font-size: 12px; font-weight: 700; letter-spacing: 2px; }
.hero h1 { margin: 12px 0 20px; font-size: clamp(64px, 8vw, 118px); line-height: .9; letter-spacing: -5px; }
.hero p { max-width: 620px; font-size: 19px; line-height: 1.7; }
.hero-actions { display: flex; gap: 12px; margin-top: 18px; flex-wrap: wrap; }
.button { display: inline-flex; justify-content: center; align-items: center; min-height: 52px; padding: 0 24px; border: 2px solid var(--black); font-weight: 600; }
.button-dark { background: var(--black); color: var(--yellow); }
.button-outline { background: transparent; }
.hero-meta { display: flex; gap: 18px; margin-top: 38px; flex-wrap: wrap; font-size: 14px; }
.hero-visual { position: relative; overflow: hidden; border-left: 2px solid var(--black); background: repeating-linear-gradient(45deg, var(--yellow-soft), var(--yellow-soft) 22px, var(--yellow) 22px, var(--yellow) 44px); }
.hero-circle { position: absolute; inset: 50% auto auto 50%; transform: translate(-50%, -50%) rotate(-7deg); width: 310px; height: 310px; border-radius: 50%; display: grid; place-items: center; text-align: center; font-size: 54px; font-weight: 800; line-height: .9; background: var(--black); color: var(--yellow); box-shadow: 18px 18px 0 var(--white); }
.floating-card { position: absolute; border: 2px solid var(--black); background: var(--white); padding: 22px 28px; font-size: 28px; font-weight: 700; box-shadow: 8px 8px 0 var(--black); }
.card-a { top: 13%; left: 8%; transform: rotate(-8deg); }
.card-b { top: 20%; right: 8%; transform: rotate(8deg); background: var(--yellow); }
.card-c { bottom: 10%; left: 16%; transform: rotate(5deg); }

.category-strip { display: grid; grid-template-columns: repeat(6, 1fr); background: var(--black); color: var(--yellow); }
.category-strip div { padding: 20px; text-align: center; border-right: 1px solid rgba(255,255,255,.2); font-weight: 600; }
.section { padding: 100px 6vw; }
.section-heading { display: flex; align-items: end; justify-content: space-between; gap: 20px; margin-bottom: 42px; }
.section-heading h2, .promo-banner h2, .newsletter h2 { margin: 8px 0 0; font-size: clamp(38px, 5vw, 68px); line-height: 1; letter-spacing: -2px; }
.text-button { background: none; border: 0; font-weight: 600; }
.product-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }
.product-card { border: 2px solid var(--black); background: white; transition: transform .2s ease, box-shadow .2s ease; }
.product-card:hover { transform: translate(-4px, -4px); box-shadow: 8px 8px 0 var(--black); }
.product-image { aspect-ratio: 1/1; display: grid; place-items: center; font-size: 54px; font-weight: 800; border-bottom: 2px solid var(--black); background: var(--yellow-soft); }
.product-info { padding: 18px; }
.product-info h3 { margin: 0; font-size: 22px; }
.product-info p { color: var(--muted); min-height: 48px; }
.product-bottom { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.add-cart { background: var(--black); color: var(--yellow); border: 0; padding: 10px 14px; font-weight: 600; }

.promo-banner { margin: 0 6vw; padding: 60px; display: grid; grid-template-columns: 1fr 1fr; gap: 40px; background: var(--yellow); border: 2px solid var(--black); }
.promo-banner p { max-width: 650px; font-size: 17px; line-height: 1.7; }
.upload-box { min-height: 260px; border: 2px dashed var(--black); display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 30px; background: rgba(255,255,255,.35); }
.upload-icon { font-size: 56px; line-height: 1; }
.upload-box small { margin-top: 8px; }

.process-section { background: var(--black); color: white; margin-top: 100px; }
.steps-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }
.steps-grid article { border-top: 1px solid rgba(255,255,255,.4); padding-top: 20px; }
.steps-grid span { color: var(--yellow); font-size: 34px; font-weight: 700; }
.steps-grid h3 { font-size: 24px; margin: 12px 0 8px; }
.steps-grid p { color: #d6d6d6; line-height: 1.7; }

.service-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.service-card { min-height: 280px; padding: 30px; border: 2px solid var(--black); background: var(--yellow); }
.dark-card { background: var(--black); color: white; }
.service-card span { font-size: 34px; font-weight: 700; }
.service-card h3 { font-size: 32px; margin: 38px 0 12px; }
.service-card p { line-height: 1.7; }

.newsletter { margin: 0 6vw 100px; padding: 60px; background: var(--yellow); border: 2px solid var(--black); }
.newsletter form { display: flex; margin-top: 28px; max-width: 760px; }
.newsletter input { flex: 1; min-height: 56px; border: 2px solid var(--black); padding: 0 18px; background: white; }
.newsletter button { min-width: 190px; border: 2px solid var(--black); border-left: 0; background: var(--black); color: var(--yellow); font-weight: 600; }
.form-message { min-height: 24px; }

footer { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 40px; padding: 70px 6vw; background: var(--black); color: white; }
footer > div { display: flex; flex-direction: column; gap: 10px; }
footer strong { color: var(--yellow); }
.footer-brand { color: white; }

.cart-drawer { position: fixed; right: -420px; top: 0; z-index: 60; width: min(420px, 100%); height: 100vh; background: var(--white); border-left: 2px solid var(--black); transition: right .25s ease; display: flex; flex-direction: column; }
.cart-drawer.open { right: 0; }
.overlay { position: fixed; inset: 0; background: rgba(0,0,0,.55); z-index: 50; opacity: 0; pointer-events: none; transition: opacity .25s ease; }
.overlay.show { opacity: 1; pointer-events: auto; }
.cart-header, .cart-footer { padding: 20px; border-bottom: 2px solid var(--black); }
.cart-header { display: flex; justify-content: space-between; align-items: center; background: var(--yellow); }
.cart-header h2 { margin: 0; }
.cart-header button { border: 0; background: transparent; font-size: 32px; }
.cart-items { flex: 1; overflow: auto; padding: 20px; }
.cart-item { display: grid; grid-template-columns: 1fr auto; gap: 10px; padding: 14px 0; border-bottom: 1px solid var(--line); }
.cart-item button { background: none; border: 0; text-decoration: underline; }
.cart-footer { border-top: 2px solid var(--black); border-bottom: 0; }
.cart-footer > div { display: flex; justify-content: space-between; margin-bottom: 16px; font-size: 20px; }
.full-width { width: 100%; }
.empty-cart { color: var(--muted); text-align: center; padding-top: 40px; }

@media (max-width: 980px) {
  .site-header { grid-template-columns: auto auto 1fr; }
  .menu-toggle { display: block; width: 44px; }
  .main-nav { position: absolute; left: 0; right: 0; top: 82px; background: var(--yellow); border-bottom: 2px solid var(--black); display: none; flex-direction: column; padding: 24px 5vw; }
  .main-nav.open { display: flex; }
  .header-actions { justify-self: end; }
  .icon-button { display: none; }
  .hero { grid-template-columns: 1fr; }
  .hero-visual { min-height: 480px; border-left: 0; border-top: 2px solid var(--black); }
  .product-grid { grid-template-columns: repeat(2, 1fr); }
  .category-strip { grid-template-columns: repeat(3, 1fr); }
  .promo-banner, .steps-grid, .service-grid { grid-template-columns: 1fr 1fr; }
  footer { grid-template-columns: 2fr 1fr; }
}

@media (max-width: 640px) {
  .site-header { padding: 0 18px; gap: 12px; }
  .brand { font-size: 22px; }
  .brand small { display: none; }
  .cart-button { font-size: 0; width: 44px; padding: 0; }
  .cart-button span { margin: 0; font-size: 13px; }
  .hero-copy { padding: 70px 24px; }
  .hero h1 { font-size: 62px; letter-spacing: -3px; }
  .hero p { font-size: 16px; }
  .hero-meta { flex-direction: column; gap: 8px; }
  .hero-circle { width: 230px; height: 230px; font-size: 40px; }
  .floating-card { padding: 14px 18px; font-size: 20px; }
  .category-strip { grid-template-columns: repeat(2, 1fr); }
  .section { padding: 74px 24px; }
  .section-heading { align-items: flex-start; flex-direction: column; }
  .product-grid, .promo-banner, .steps-grid, .service-grid { grid-template-columns: 1fr; }
  .promo-banner { margin: 0 24px; padding: 34px 24px; }
  .process-section { margin-top: 74px; }
  .newsletter { margin: 0 24px 74px; padding: 34px 24px; }
  .newsletter form { flex-direction: column; }
  .newsletter button { min-height: 54px; border-left: 2px solid var(--black); border-top: 0; }
  footer { grid-template-columns: 1fr; padding: 50px 24px; }
}

/* Product configurator */
.add-cart { display:inline-flex; align-items:center; justify-content:center; border:1.5px solid var(--black); background:var(--black); color:var(--yellow); padding:10px 14px; font-weight:600; }
.back-link { justify-self:center; font-size:14px; text-decoration:underline; text-underline-offset:4px; }
.product-page { background:var(--white); }
.product-detail-layout { display:grid; grid-template-columns:.88fr 1.12fr; min-height:calc(100vh - 122px); border-bottom:2px solid var(--black); }
.product-preview-panel { position:sticky; top:82px; height:calc(100vh - 82px); padding:58px 5vw; background:var(--yellow); border-right:2px solid var(--black); overflow:hidden; }
.product-preview-art { min-height:430px; margin-top:24px; display:grid; place-items:center; border:2px solid var(--black); background:repeating-linear-gradient(45deg,var(--yellow-soft),var(--yellow-soft) 24px,var(--yellow) 24px,var(--yellow) 48px); font-size:clamp(42px,6vw,86px); font-weight:800; letter-spacing:-4px; transform:rotate(-2deg); box-shadow:12px 12px 0 var(--black); }
.preview-note { display:flex; justify-content:space-between; gap:20px; margin-top:34px; padding-top:20px; border-top:2px solid var(--black); }
.preview-note span { text-align:right; color:var(--muted); }
.product-config-panel { padding:58px 5vw 80px; }
.product-title-row { display:flex; justify-content:space-between; gap:24px; align-items:flex-start; border-bottom:2px solid var(--black); padding-bottom:30px; }
.product-title-row h1 { font-size:clamp(42px,5vw,74px); line-height:1; margin:8px 0 16px; letter-spacing:-2px; }
.product-title-row p { color:var(--muted); max-width:680px; line-height:1.7; }
.product-id { border:1.5px solid var(--black); padding:8px 12px; white-space:nowrap; }
.config-section { padding:30px 0; border-bottom:1px solid var(--line); }
.config-section h2 { font-size:21px; margin:0 0 16px; }
.option-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:10px; }
.choice-card { position:relative; cursor:pointer; }
.choice-card input { position:absolute; opacity:0; }
.choice-card span { display:flex; flex-direction:column; min-height:82px; padding:15px 16px; border:1.5px solid var(--black); background:white; transition:.15s ease; }
.choice-card small { margin-top:5px; color:var(--muted); }
.choice-card input:checked + span { background:var(--yellow); box-shadow:4px 4px 0 var(--black); transform:translate(-2px,-2px); }
.two-col-fields { display:grid; grid-template-columns:1fr 1fr; gap:14px; }
.two-col-fields label { display:flex; flex-direction:column; gap:9px; font-weight:600; }
.two-col-fields select { width:100%; min-height:52px; border:1.5px solid var(--black); background:white; padding:0 14px; }
.mini-upload { display:flex; gap:15px; align-items:center; border:1.5px dashed var(--black); padding:18px; cursor:pointer; background:white; }
.mini-upload > span { display:grid; place-items:center; width:44px; height:44px; border:1.5px solid var(--black); border-radius:50%; font-size:24px; }
.mini-upload div { display:flex; flex-direction:column; }
.mini-upload small { color:var(--muted); }
.price-box { margin-top:34px; padding:24px; background:var(--yellow); border:2px solid var(--black); display:flex; justify-content:space-between; gap:20px; align-items:center; }
.price-box > div { display:flex; flex-direction:column; }
.price-box strong { font-size:46px; line-height:1.1; }
.price-box small { color:var(--muted); }
.product-help { display:grid; grid-template-columns:repeat(3,1fr); gap:0; border-bottom:2px solid var(--black); }
.product-help article { padding:34px 5vw; display:flex; flex-direction:column; gap:7px; border-right:1px solid var(--black); }
.product-help article:last-child { border-right:0; }
.product-help span { color:var(--muted); line-height:1.6; }
@media (max-width:980px){
  .product-detail-layout{grid-template-columns:1fr}.product-preview-panel{position:relative;top:0;height:auto;border-right:0;border-bottom:2px solid var(--black)}.product-preview-art{min-height:320px}.product-help{grid-template-columns:1fr}.product-help article{border-right:0;border-bottom:1px solid var(--black)}
}
@media (max-width:640px){
  .back-link{display:none}.product-preview-panel,.product-config-panel{padding:38px 24px}.product-preview-art{min-height:240px;font-size:42px;box-shadow:7px 7px 0 var(--black)}.preview-note{flex-direction:column}.preview-note span{text-align:left}.product-title-row{flex-direction:column}.option-grid,.two-col-fields{grid-template-columns:1fr}.price-box{align-items:stretch;flex-direction:column}.price-box strong{font-size:38px}.product-help article{padding:28px 24px}
}

/* Checkout v3 */
textarea, select { font: inherit; }
.checkout-page { max-width: 1500px; margin: 0 auto; padding: 58px 5vw 90px; }
.checkout-title { margin-bottom: 34px; }
.checkout-title h1 { font-size: clamp(44px,6vw,82px); line-height:.95; letter-spacing:-3px; margin:8px 0 14px; }
.checkout-title p { color:var(--muted); font-size:17px; }
.checkout-layout { display:grid; grid-template-columns:minmax(0,1.45fr) minmax(320px,.7fr); gap:28px; align-items:start; }
.checkout-form { display:grid; gap:18px; }
.checkout-card, .order-summary { border:2px solid var(--black); background:#fffdf4; padding:28px; }
.checkout-step { display:flex; gap:16px; align-items:flex-start; padding-bottom:20px; margin-bottom:22px; border-bottom:1px solid var(--line); }
.checkout-step > span { width:42px; height:42px; flex:0 0 42px; display:grid; place-items:center; background:var(--black); color:var(--yellow); font-weight:700; }
.checkout-step h2, .summary-head h2 { margin:0; font-size:26px; }
.checkout-step p { margin:4px 0 0; color:var(--muted); }
.field-grid { display:grid; grid-template-columns:1fr 1fr; gap:16px; }
.field-full { grid-column:1/-1; }
.checkout-card label { display:grid; gap:7px; font-weight:500; }
.checkout-card input:not([type=radio]), .checkout-card textarea { width:100%; border:1.5px solid var(--black); background:white; padding:13px 14px; outline:none; }
.checkout-card input:focus, .checkout-card textarea:focus { box-shadow:4px 4px 0 var(--yellow); }
.delivery-options { display:grid; grid-template-columns:1fr 1fr; gap:12px; margin-bottom:18px; }
.address-fields.hidden { display:none; }
.payment-choice { max-width:560px; }
.order-summary { position:sticky; top:105px; background:var(--yellow); }
.summary-head { padding-bottom:20px; border-bottom:2px solid var(--black); }
.summary-items { display:grid; gap:0; }
.summary-item { display:grid; grid-template-columns:44px 1fr auto; gap:12px; align-items:center; padding:18px 0; border-bottom:1px solid rgba(17,17,17,.25); }
.summary-product-mark { width:44px; height:44px; display:grid; place-items:center; background:var(--black); color:var(--yellow); font-size:20px; font-weight:700; }
.summary-item div:nth-child(2) { display:grid; gap:3px; }
.summary-item span { color:#514a24; font-size:12px; }
.summary-totals { padding:18px 0 22px; display:grid; gap:9px; }
.summary-totals > div { display:flex; justify-content:space-between; gap:20px; }
.summary-grand { margin-top:7px; padding-top:14px; border-top:2px solid var(--black); font-size:22px; }
.summary-note { display:block; text-align:center; margin-top:12px; }
.empty-checkout { padding:24px 0; display:grid; gap:8px; }
.empty-checkout a { text-decoration:underline; }
.button:disabled { opacity:.45; cursor:not-allowed; }
.success-body { min-height:100vh; background:var(--yellow); display:grid; place-items:center; padding:30px; }
.success-wrap { width:min(760px,100%); }
.success-card { background:var(--white); border:3px solid var(--black); padding:clamp(30px,6vw,64px); box-shadow:12px 12px 0 var(--black); }
.success-mark { width:72px; height:72px; display:grid; place-items:center; border-radius:50%; background:var(--black); color:var(--yellow); font-size:36px; margin-bottom:26px; }
.success-card h1 { font-size:clamp(42px,7vw,72px); letter-spacing:-3px; line-height:1; margin:10px 0 18px; }
.success-card > p { font-size:17px; line-height:1.7; color:var(--muted); }
.order-number-box { background:var(--yellow); border:2px solid var(--black); padding:22px; display:grid; gap:4px; margin:28px 0; }
.order-number-box strong { font-size:clamp(24px,5vw,38px); }
.success-details { border-top:1px solid var(--line); border-bottom:1px solid var(--line); padding:14px 0; }
.success-details > div { display:flex; justify-content:space-between; gap:20px; padding:8px 0; }
.success-actions { display:flex; gap:10px; margin-top:26px; flex-wrap:wrap; }
@media (max-width:900px){ .checkout-layout{grid-template-columns:1fr}.order-summary{position:static}.delivery-options{grid-template-columns:1fr}.field-grid{grid-template-columns:1fr}.field-full{grid-column:auto} }