:root{
  --bg: #0c0f13;
  --bg-2:#12161c;
  --panel:#141922;
  --panel-2:#171d27;
  --panel-soft:rgba(255,255,255,.04);
  --text:#f3f5f7;
  --muted:#9ba4b2;
  --line:rgba(255,255,255,.08);
  --accent:#b78f67;
  --accent-2:#d0ae89;
  --shadow:0 22px 56px rgba(0,0,0,.35);
  --topbar:rgba(12,15,19,.82);
  --drawer:rgba(15,18,24,.97);
  --footer:rgba(15,18,24,.7);
  --backdrop:rgba(0,0,0,.52);
}
:root[data-theme="light"]{
  --bg:#f6f8fb;
  --bg-2:#eef2f7;
  --panel:#ffffff;
  --panel-2:#fbfcfe;
  --panel-soft:rgba(17,24,39,.04);
  --text:#121826;
  --muted:#5b6472;
  --line:rgba(17,24,39,.09);
  --accent:#8f6848;
  --accent-2:#b68c67;
  --shadow:0 18px 44px rgba(26,39,65,.10);
  --topbar:rgba(246,248,251,.86);
  --drawer:rgba(255,255,255,.98);
  --footer:rgba(255,255,255,.76);
  --backdrop:rgba(17,24,39,.18);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;font-family:'Inter',system-ui,sans-serif;color:var(--text);
  background:linear-gradient(180deg,var(--bg),var(--bg-2) 70%);
}
a{text-decoration:none;color:inherit}
img{max-width:100%;display:block}
button,input,select,textarea{font:inherit}
.container{width:min(1180px,calc(100% - 28px));margin:0 auto}

.topbar{position:sticky;top:0;z-index:40;background:var(--topbar);backdrop-filter:blur(14px);border-bottom:1px solid var(--line)}
.nav{display:flex;align-items:center;justify-content:space-between;min-height:76px;gap:16px}
.brand{display:inline-flex;align-items:center;gap:12px}
.brand-mark{
  width:38px;height:38px;border-radius:14px;display:grid;place-items:center;
  background:var(--panel-soft);border:1px solid var(--line);font-weight:800;font-size:1.5rem;
  color:var(--accent);transition:all .2s ease
}
.brand-word{font-weight:700;letter-spacing:.22em;font-size:.92rem}
.nav-links,.nav-actions{display:flex;align-items:center;gap:14px}
.nav-links a{color:var(--muted);padding:8px 4px}
.nav-links a:hover{color:var(--text)}
.cart-button,.primary-btn,.secondary-btn,.ghost-btn,.theme-toggle,.switch-chip,.theme-chip,.wood-swatch{
  border:0;cursor:pointer;border-radius:14px
}
.cart-button,.secondary-btn,.ghost-btn,.theme-toggle,.switch-chip,.theme-chip{
  background:var(--panel-soft);color:var(--text);border:1px solid var(--line);padding:12px 16px
}
.primary-btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:14px 18px;
  background:linear-gradient(135deg,var(--accent),var(--accent-2));color:#fff;font-weight:700;box-shadow:var(--shadow)
}
.secondary-btn:hover,.ghost-btn:hover,.theme-toggle:hover,.cart-button:hover,.switch-chip:hover,.theme-chip:hover{background:rgba(255,255,255,.06)}
.theme-toggle{display:inline-flex;align-items:center;gap:8px}
.full{width:100%}

.hero{display:grid;grid-template-columns:1.05fr .95fr;gap:28px;align-items:center;padding:60px 0 34px}
.eyebrow{font-size:.8rem;font-weight:800;letter-spacing:.18em;text-transform:uppercase;color:var(--accent)}
.hero h1,.section h1{font-size:clamp(2.3rem,5vw,4.7rem);line-height:1.02;margin:14px 0}
.hero p,.section-heading p,.product-meta p,.checkout-form-wrap p,.admin-card p,.admin-card li{color:var(--muted);line-height:1.7}
.hero-actions{display:flex;gap:12px;flex-wrap:wrap;margin:28px 0}
.stat-row,.steps-grid,.product-grid,.footer-grid,.form-grid,.admin-grid{display:grid;gap:18px}
.stat-row{grid-template-columns:repeat(3,1fr)}
.card,.stat-card{background:var(--panel);border:1px solid var(--line);border-radius:24px;box-shadow:var(--shadow)}
.stat-card{padding:18px}
.stat-card strong{display:block;margin-bottom:6px}
.stat-card span{color:var(--muted);font-size:.92rem}
.panel-preview{width:min(100%,460px);padding:20px}
.panel-header,.preview-lines div,.meta-inline,.product-actions,.config-row,.cart-header,.cart-total-row,.summary-total,.admin-top,.editor-head{
  display:flex;justify-content:space-between;align-items:center;gap:12px
}
.status-dot{width:10px;height:10px;border-radius:50%;background:#22c55e;box-shadow:0 0 16px #22c55e}
.preview-lines div{padding:12px 0;border-top:1px solid var(--line)}
.family-slider{overflow:hidden}
.family-track{display:flex;transition:transform .25s ease}
.family-slide{min-width:100%}
.family-arrows{display:flex;justify-content:space-between;gap:12px;margin-top:14px}
.family-arrow{width:42px;height:42px;border-radius:999px;border:1px solid var(--line);background:var(--panel-soft);color:var(--text);font-size:1.4rem;line-height:1;display:grid;place-items:center}
.family-arrow:hover{background:rgba(255,255,255,.06)}

.section{padding:40px 0 20px}
.compact-top{padding-top:24px}
.section-heading{max-width:760px;margin-bottom:22px}
.section-heading h2{font-size:clamp(1.9rem,4vw,2.9rem);margin:10px 0}
.collection-switch,.theme-chip-row,.wood-swatch-row,.wood-picker{display:flex;gap:10px;flex-wrap:wrap}
.switch-chip.active,.theme-chip.active{background:var(--accent);border-color:transparent;color:#fff}
.hidden{display:none !important}

.steps-grid{grid-template-columns:repeat(3,1fr)}
.step-card{padding:22px}
.step-number{display:inline-flex;margin-bottom:12px;color:var(--accent);font-weight:800}

.product-grid{grid-template-columns:repeat(4,1fr)}
.product-card{position:relative;overflow:hidden;display:flex;flex-direction:column}
.product-link{display:block}
.product-badge{
  position:absolute;top:14px;left:14px;z-index:2;background:rgba(17,24,39,.72);backdrop-filter:blur(8px);
  color:#fff;border:1px solid rgba(255,255,255,.14);padding:8px 11px;border-radius:999px;font-size:.79rem
}
:root[data-theme="light"] .product-badge{background:rgba(255,255,255,.82);color:var(--text);border-color:var(--line)}
.product-image-wrap img,.family-slide img{aspect-ratio:16/11;object-fit:cover;width:100%}
.product-meta{padding:18px 18px 8px}
.product-meta h3{margin:0 0 8px}
.meta-inline{color:var(--muted);font-size:.92rem}
.product-actions{padding:0 18px 18px;align-items:center}
.secondary-btn{display:inline-flex;align-items:center;justify-content:center}
.product-actions .secondary-btn{margin-left:auto}

.wood-swatch{
  width:20px;height:20px;border-radius:999px;padding:0;background:var(--swatch);border:2px solid rgba(255,255,255,.25);
  box-shadow:0 0 0 1px rgba(17,24,39,.15)
}
.wood-swatch.active{outline:2px solid var(--accent);outline-offset:2px}
.current-wood{margin-top:12px}

.product-page,.checkout-page{display:grid;grid-template-columns:1fr 1fr;gap:22px}
.product-image-panel,.product-config,.checkout-form-wrap,.order-summary,.admin-card,.center-card{padding:22px}
.detail-image img{border-radius:22px}
.config-grid{margin:18px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.config-row{padding:14px 0}
label{display:block;margin-top:16px;font-weight:600}
input,select,textarea{
  width:100%;margin-top:8px;padding:14px;border-radius:14px;border:1px solid var(--line);
  background:var(--panel-soft);color:var(--text)
}
textarea{resize:vertical}
.info-box,.success-box,.error-box{
  margin-top:16px;padding:16px 18px;border-radius:18px;border:1px solid var(--line);background:var(--panel-soft)
}
.success-box{background:rgba(16,185,129,.12)}
.error-box{background:rgba(239,68,68,.12)}

.board-editor{
  position:relative;margin-top:16px;border-radius:26px;overflow:hidden;border:1px solid var(--line);background:var(--panel-2);
  aspect-ratio:16/11
}
.editor-board-image{width:100%;height:100%;object-fit:cover}
.safe-zone{
  position:absolute;inset:20%;border:2px dashed rgba(183,143,103,.55);border-radius:18px;pointer-events:none;z-index:2
}
.design-layer{position:absolute;inset:0;z-index:3}
.text-overlay,.image-overlay{
  position:absolute;left:50%;top:50%;transform:translate(-50%,-50%) scale(1);transform-origin:center center;
  max-width:60%;max-height:60%;user-select:none;touch-action:none
}
.text-overlay{
  color:rgba(70,45,24,.74);font-weight:700;font-size:1.2rem;letter-spacing:.03em;padding:10px 14px;text-align:center
}
.image-overlay{object-fit:contain}
.editor-grid{display:grid;gap:12px;margin-top:12px}
.editor-note{padding:10px 0}

.order-summary{height:fit-content;position:sticky;top:96px}
.summary-item,.cart-item{padding:12px 0;border-bottom:1px solid var(--line)}
.summary-item-title{font-weight:600}
.summary-item-sub,.cart-item-sub,.muted{color:var(--muted);font-size:.92rem}
.cart-drawer{
  position:fixed;top:0;right:-420px;width:min(420px,100vw);height:100vh;background:var(--drawer);
  border-left:1px solid var(--line);z-index:100;transition:right .22s ease;display:flex;flex-direction:column;overflow:hidden
}
.cart-drawer.open{right:0}
.cart-backdrop{position:fixed;inset:0;background:var(--backdrop);opacity:0;visibility:hidden;transition:all .22s ease;z-index:90}
.cart-backdrop.open{opacity:1;visibility:visible}
.cart-header,.cart-footer{padding:18px}
.cart-header{border-bottom:1px solid var(--line)}
.cart-items{padding:0 18px 18px;overflow-y:auto;flex:1 1 auto}
.cart-footer{
  position:sticky;bottom:0;border-top:1px solid var(--line);background:var(--drawer);
  padding-bottom:calc(18px + env(safe-area-inset-bottom,0px))
}

.footer{margin-top:44px;border-top:1px solid var(--line);background:var(--footer)}
.footer-grid{grid-template-columns:1.5fr 1fr 1fr;padding:28px 0}
.footer p,.footer a,.footer-bottom{color:var(--muted)}
.footer-bottom{padding:18px 0 26px;border-top:1px solid var(--line)}
.footer-brand{margin-bottom:12px}

.admin-list{display:grid;gap:18px}
.admin-grid{grid-template-columns:repeat(3,1fr);margin:18px 0;padding:18px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.status-pill{padding:10px 14px;border-radius:999px;background:var(--panel-soft);border:1px solid var(--line)}
.center-card{max-width:540px;margin:40px auto;text-align:center}

@media (max-width: 1080px){
  .product-grid{grid-template-columns:repeat(3,1fr)}
}
@media (max-width: 980px){
  .hero,.product-page,.checkout-page,.footer-grid{grid-template-columns:1fr}
  .steps-grid,.admin-grid,.form-grid,.stat-row{grid-template-columns:1fr}
}
@media (max-width: 700px){
  .nav{flex-wrap:wrap;padding:12px 0}
  .nav-links{order:3;width:100%;overflow:auto;padding-bottom:4px}
  .nav-actions{width:100%;justify-content:space-between}
  .theme-label{display:none}
  .product-grid{grid-template-columns:repeat(2,1fr)}
  .cart-drawer{width:100vw;right:-100vw}
  .container{width:min(100% - 20px, 1180px)}
  .product-actions{align-items:flex-start;flex-direction:column}
  .product-actions .secondary-btn{margin-left:0;width:100%}
}

.theme-chip.active,.switch-chip.active{box-shadow:0 10px 24px rgba(0,0,0,.16)}
.nav-links a.active-link{color:var(--text)}