/* ============================================================
   2mm.ART — Main Stylesheet v3
   UI reference: Shopify Dawn, ASOS, Amazon
   ============================================================ */

/* ── Reset & Base ────────────────────────────────────────── */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
:root{
  --brand:#823b18; --brand2:#a0522d; --brand-light:#fbf0e8;
  --dark:#1a1a1a; --text:#333; --gray:#6b7280; --light-gray:#f9fafb;
  --border:#e5e7eb; --white:#fff;
  --navbar-bg:#fff; --navbar-text:#1a1a1a;
  --hero-bg1:#1b0d08; --hero-bg2:#823b18;
  --footer-bg:#1b0d08;
  --radius:8px; --radius-lg:12px; --radius-full:100px;
  --shadow-sm:0 1px 3px rgba(0,0,0,.08);
  --shadow:0 4px 16px rgba(0,0,0,.08);
  --shadow-lg:0 12px 40px rgba(0,0,0,.12);
  --transition:.18s ease;
  --btn-radius:8px;
  --font:-apple-system,BlinkMacSystemFont,'Segoe UI',system-ui,sans-serif;
}
html{font-size:16px;scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{font-family:var(--font);color:var(--text);background:#fff;line-height:1.6}
img{max-width:100%;display:block;height:auto}
a{color:var(--brand);text-decoration:none;transition:color var(--transition)}
a:hover{color:var(--brand2)}
ul{list-style:none}
button{font-family:var(--font)}

/* ── Typography ─────────────────────────────────────────── */
h1{font-size:clamp(1.75rem,4vw,2.75rem);font-weight:800;line-height:1.15;letter-spacing:-.02em}
h2{font-size:clamp(1.3rem,2.5vw,1.9rem);font-weight:700;line-height:1.2;letter-spacing:-.01em}
h3{font-size:1.1rem;font-weight:700}
h4{font-size:.9rem;font-weight:700}
p{margin-bottom:.75rem;color:var(--text)}
p:last-child{margin-bottom:0}

/* ── Layout ─────────────────────────────────────────────── */
.container{max-width:1200px;margin:0 auto;padding:0 24px}
.section{padding:72px 0}
@media(max-width:768px){.section{padding:48px 0}.container{padding:0 16px}}

/* ── Buttons (Shopify-quality) ───────────────────────────── */
.btn-primary,.btn-outline,.btn-white,.btn-wa,.btn-wa-lg,.btn-sm,.btn-lg,.btn-xl,.btn-place-order,
.nav-btn-login,.nav-btn-register{
  display:inline-flex;align-items:center;justify-content:center;gap:6px;
  padding:.625rem 1.25rem;border-radius:var(--btn-radius);font-size:.875rem;
  font-weight:600;cursor:pointer;border:1.5px solid transparent;
  transition:all var(--transition);text-decoration:none;line-height:1.25;
  white-space:nowrap;font-family:var(--font);
}
.btn-primary{background:var(--brand);color:#fff;border-color:var(--brand)}
.btn-primary:hover{background:#6d3114;border-color:#6d3114;color:#fff;text-decoration:none;transform:translateY(-1px);box-shadow:0 4px 12px rgba(130,59,24,.3)}
.btn-outline{background:transparent;color:var(--brand);border-color:var(--brand)}
.btn-outline:hover{background:var(--brand);color:#fff;text-decoration:none;transform:translateY(-1px)}
.btn-white{background:#fff;color:var(--brand);border-color:#fff}
.btn-white:hover{background:var(--brand-light);text-decoration:none;color:var(--brand)}
.btn-sm{padding:.375rem .75rem;font-size:.8rem}
.btn-lg{padding:.75rem 1.75rem;font-size:.95rem}
.btn-xl{padding:.875rem 2rem;font-size:1rem;width:100%}
.btn-place-order{background:var(--brand);color:#fff;border:none;width:100%;padding:.9rem 1.5rem;font-size:1rem;font-weight:700;border-radius:var(--btn-radius);cursor:pointer;display:flex;align-items:center;justify-content:center;gap:.5rem;transition:all var(--transition);margin-top:1rem}
.btn-place-order:hover{background:#6d3114;transform:translateY(-1px);box-shadow:0 4px 16px rgba(130,59,24,.3)}

/* WhatsApp buttons — subtle, not overpowering */
.btn-wa{background:#fff;color:#128C7E;border:1.5px solid #128C7E;padding:.5rem .9rem}
.btn-wa:hover{background:#128C7E;color:#fff;text-decoration:none}
.btn-wa-lg{background:#25D366;color:#fff;border-color:#25D366;padding:.75rem 1.5rem;font-size:.9rem}
.btn-wa-lg:hover{background:#1da851;border-color:#1da851;text-decoration:none;color:#fff}
.wa-btn{display:inline-flex;align-items:center;gap:.5rem;background:#25D366;color:#fff;padding:.5rem 1rem;border-radius:var(--btn-radius);font-size:.82rem;font-weight:600;text-decoration:none;transition:background var(--transition)}
.wa-btn:hover{background:#1da851;color:#fff;text-decoration:none}

/* Floating WhatsApp FAB — industry standard positioning */
.wa-fab{
  position:fixed;bottom:24px;right:24px;z-index:1000;
  width:52px;height:52px;border-radius:50%;
  background:#25D366;color:#fff;
  display:flex;align-items:center;justify-content:center;
  box-shadow:0 4px 20px rgba(37,211,102,.4);
  transition:all .2s;text-decoration:none;
  border:none;cursor:pointer;
}
.wa-fab:hover{background:#1da851;transform:scale(1.08);box-shadow:0 6px 28px rgba(37,211,102,.5);text-decoration:none;color:#fff}
.wa-fab svg{width:26px;height:26px}
.wa-fab-tooltip{
  position:absolute;right:calc(100% + 10px);top:50%;transform:translateY(-50%);
  background:#1a1a1a;color:#fff;padding:.4rem .8rem;border-radius:6px;
  font-size:.78rem;font-weight:600;white-space:nowrap;
  opacity:0;pointer-events:none;transition:opacity .15s;
}
.wa-fab:hover .wa-fab-tooltip{opacity:1}
.wa-fab-pulse{
  position:absolute;width:100%;height:100%;border-radius:50%;
  background:#25D366;animation:waPulse 2s ease-out infinite;
  top:0;left:0;
}
@keyframes waPulse{0%{opacity:.6;transform:scale(1)}100%{opacity:0;transform:scale(1.6)}}
@media(max-width:768px){.wa-fab{bottom:20px;right:16px;width:48px;height:48px}.wa-fab svg{width:22px;height:22px}}

/* ── Announcement bar ─────────────────────────────────────── */
.announcement-bar{background:var(--brand);color:#fff;text-align:center;padding:.45rem 1rem;font-size:.8rem;font-weight:600;letter-spacing:.01em}

/* ── Navbar ─────────────────────────────────────────────── */
.navbar{background:var(--navbar-bg);border-bottom:1px solid var(--border);position:sticky;top:0;z-index:200;transition:box-shadow var(--transition)}
.navbar.scrolled{box-shadow:var(--shadow)}
.nav-inner{max-width:1200px;margin:0 auto;padding:0 24px;display:flex;align-items:center;gap:2rem;height:64px}
.nav-logo{flex-shrink:0;text-decoration:none}
.logo-text{font-size:1.3rem;font-weight:900;color:var(--brand);letter-spacing:-.03em;font-family:var(--font)}
.logo-text em{font-style:normal;color:var(--brand2)}
.nav-links{display:flex;gap:.25rem;flex:1;align-items:center}
.nav-links a{font-size:.875rem;font-weight:500;color:var(--navbar-text);padding:.4rem .65rem;border-radius:6px;transition:all var(--transition);white-space:nowrap;text-decoration:none}
.nav-links a:hover{color:var(--brand);background:var(--brand-light)}
.nav-links a.nav-active{color:var(--brand);font-weight:700}
.nav-actions{display:flex;align-items:center;gap:.5rem;flex-shrink:0}

/* Cart icon */
.nav-cart{position:relative;display:flex;align-items:center;justify-content:center;width:40px;height:40px;border-radius:8px;color:var(--navbar-text);transition:all var(--transition);text-decoration:none;border:1px solid transparent}
.nav-cart:hover{background:var(--light-gray);border-color:var(--border);color:var(--brand);text-decoration:none}
.cart-badge{position:absolute;top:-4px;right:-4px;background:var(--brand);color:#fff;font-size:.62rem;font-weight:800;min-width:18px;height:18px;border-radius:100px;display:flex;align-items:center;justify-content:center;border:2px solid #fff;line-height:1}

/* Language toggle */
.nav-lang{font-size:.78rem;font-weight:700;color:var(--gray);border:1px solid var(--border);border-radius:6px;padding:.3rem .65rem;transition:all var(--transition);text-decoration:none}
.nav-lang:hover{border-color:var(--brand);color:var(--brand)}

/* Login/Register buttons */
.nav-btn-login{color:var(--text);border:1px solid var(--border);padding:.4rem .9rem;font-size:.82rem;font-weight:600;background:transparent;border-radius:6px}
.nav-btn-login:hover{border-color:var(--brand);color:var(--brand);text-decoration:none}
.nav-btn-register{background:var(--brand);color:#fff;border-color:var(--brand);padding:.4rem .9rem;font-size:.82rem;font-weight:700;border-radius:6px}
.nav-btn-register:hover{background:#6d3114;border-color:#6d3114;color:#fff;text-decoration:none}

/* User dropdown */
.nav-user-menu{position:relative}
.nav-user-btn{display:flex;align-items:center;gap:.45rem;padding:.35rem .65rem;border-radius:8px;border:1px solid var(--border);background:transparent;cursor:pointer;font-size:.82rem;font-weight:600;color:var(--text);transition:all var(--transition)}
.nav-user-btn:hover{border-color:var(--brand);color:var(--brand);background:var(--brand-light)}
.nav-avatar{width:26px;height:26px;border-radius:50%;background:var(--brand);color:#fff;font-size:.72rem;font-weight:800;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.nav-username{max-width:80px;overflow:hidden;text-overflow:ellipsis}
.nav-user-dropdown{position:absolute;top:calc(100% + 8px);right:0;background:#fff;border:1px solid var(--border);border-radius:var(--radius-lg);box-shadow:var(--shadow-lg);min-width:180px;padding:.4rem;opacity:0;visibility:hidden;transform:translateY(-6px);transition:all .18s;z-index:300}
.nav-user-dropdown.open{opacity:1;visibility:visible;transform:translateY(0)}
.nav-user-dropdown a{display:block;padding:.55rem .85rem;font-size:.85rem;color:var(--text);border-radius:6px;transition:background var(--transition);text-decoration:none}
.nav-user-dropdown a:hover{background:var(--light-gray);color:var(--brand)}
.dropdown-divider{height:1px;background:var(--border);margin:.35rem .5rem}

/* Hamburger */
.nav-hamburger{display:none;flex-direction:column;gap:5px;background:none;border:1px solid var(--border);padding:.5rem .6rem;border-radius:6px;cursor:pointer;transition:all var(--transition);margin-left:.5rem}
.nav-hamburger span{display:block;width:18px;height:2px;background:var(--text);transition:all var(--transition);border-radius:2px}
.nav-hamburger.open span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.nav-hamburger.open span:nth-child(2){opacity:0}
.nav-hamburger.open span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

/* Mobile menu */
.nav-mobile{display:none;flex-direction:column;background:#fff;border-top:1px solid var(--border);padding:.5rem 0;max-height:0;overflow:hidden;transition:max-height .3s ease}
.nav-mobile.open{max-height:600px}
.nav-mobile a{padding:.7rem 24px;font-size:.9rem;font-weight:500;color:var(--text);text-decoration:none;transition:background var(--transition);display:block}
.nav-mobile a:hover,.nav-mobile a.active{background:var(--brand-light);color:var(--brand)}
.mobile-divider{height:1px;background:var(--border);margin:.35rem 24px}

@media(max-width:900px){
  .nav-links{display:none}
  .nav-hamburger{display:flex}
  .nav-mobile{display:flex}
  .nav-username{display:none}
  .nav-inner{gap:1rem}
}

/* ── Hero ────────────────────────────────────────────────── */
.hero{background:linear-gradient(135deg,var(--hero-bg1) 0%,var(--hero-bg2) 100%);color:#fff;min-height:560px;display:flex;align-items:center;padding:80px 24px}
.hero-content{max-width:1200px;margin:0 auto;width:100%;display:grid;grid-template-columns:1fr 380px;gap:3.5rem;align-items:center}
.hero h1{color:#fff;font-size:clamp(1.9rem,4.5vw,3rem);margin-bottom:1rem}
.hero p{font-size:1.1rem;color:rgba(255,255,255,.8);margin-bottom:2rem;max-width:500px;line-height:1.7}
.hero-btns{display:flex;gap:.75rem;flex-wrap:wrap;margin-bottom:2.5rem}
.hero-stats{display:flex;gap:2.5rem;flex-wrap:wrap}
.stat{display:flex;flex-direction:column}
.stat-num{font-size:1.75rem;font-weight:900;color:#fff;letter-spacing:-.02em}
.stat-label{font-size:.75rem;color:rgba(255,255,255,.65);margin-top:.1rem}
.hero-visual{display:flex;justify-content:center;align-items:center}
.hero-badge{background:rgba(255,255,255,.1);backdrop-filter:blur(12px);border:1px solid rgba(255,255,255,.2);color:#fff;padding:2rem 2.5rem;border-radius:16px;font-size:1rem;font-weight:700;text-align:center;letter-spacing:-.01em}
@media(max-width:900px){.hero-content{grid-template-columns:1fr}.hero-visual{display:none}.hero{min-height:420px;padding:60px 16px}}

/* ── Section headers ─────────────────────────────────────── */
.section-title{margin-bottom:.5rem;color:var(--dark)}
.section-sub{color:var(--gray);margin-bottom:2.5rem;max-width:580px;line-height:1.7}
.section-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:2rem;flex-wrap:wrap;gap:.75rem}

/* ── Catalogues ─────────────────────────────────────────── */
.catalogues-section{background:var(--light-gray)}
.catalogues-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:1rem}
.catalogue-card{background:#fff;border:1px solid var(--border);border-radius:var(--radius-lg);padding:1.5rem;text-decoration:none;color:var(--text);transition:all var(--transition);display:flex;flex-direction:column;gap:.4rem}
.catalogue-card:hover{border-color:var(--brand);box-shadow:var(--shadow);transform:translateY(-2px);text-decoration:none}
.cat-icon{font-size:1.5rem;line-height:1}
.catalogue-card h3{font-size:.95rem;font-weight:700;color:var(--dark);margin-top:.1rem}
.catalogue-card p{font-size:.8rem;color:var(--gray);flex:1;line-height:1.6}
.cat-cta{font-size:.8rem;font-weight:700;color:var(--brand);margin-top:.25rem}

/* ── Products grid ──────────────────────────────────────── */
.products-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:1.25rem}
.products-grid-sm{grid-template-columns:repeat(auto-fill,minmax(210px,1fr))}
.product-card{background:#fff;border:1px solid var(--border);border-radius:var(--radius-lg);overflow:hidden;text-decoration:none;color:var(--text);transition:all var(--transition);display:flex;flex-direction:column}
.product-card:hover{box-shadow:var(--shadow);transform:translateY(-3px);border-color:#c9d3dd;text-decoration:none}
.product-img{position:relative;aspect-ratio:4/3;background:var(--light-gray);overflow:hidden}
.product-img img{width:100%;height:100%;object-fit:cover;transition:transform .4s ease}
.product-card:hover .product-img img{transform:scale(1.04)}
.product-img-placeholder{width:100%;height:100%;display:flex;align-items:center;justify-content:center;font-size:3rem;background:linear-gradient(135deg,#f0e8e0,#e8d8cc)}
.product-tag{position:absolute;top:10px;left:10px;background:var(--brand);color:#fff;padding:2px 10px;border-radius:var(--radius-full);font-size:.68rem;font-weight:700;letter-spacing:.02em}
.eco-badge{position:absolute;top:10px;right:10px;font-size:.95rem;line-height:1}
.product-info{padding:1rem;flex:1;display:flex;flex-direction:column;gap:.35rem}
.product-info h3{font-size:.9rem;font-weight:700;line-height:1.35;color:var(--dark)}
.product-info>p{font-size:.78rem;color:var(--gray);flex:1;line-height:1.5}
.product-footer{display:flex;align-items:center;justify-content:space-between;margin-top:.6rem;flex-wrap:wrap;gap:.3rem}
.price{font-size:.95rem;font-weight:800;color:var(--brand)}
.price-on-request{font-size:.78rem;color:var(--gray);font-style:italic}
.sold-count{font-size:.7rem;color:var(--gray);background:var(--light-gray);padding:2px 8px;border-radius:var(--radius-full)}

/* ── Steps ──────────────────────────────────────────────── */
.how-section{background:var(--light-gray)}
.steps-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:1.25rem;margin-top:2rem}
.step-card{background:#fff;border:1px solid var(--border);border-radius:var(--radius-lg);padding:1.75rem;position:relative;transition:box-shadow var(--transition)}
.step-card:hover{box-shadow:var(--shadow)}
.step-num{font-size:2.25rem;font-weight:900;color:var(--brand);opacity:.18;margin-bottom:.4rem;display:block;line-height:1}
.step-card h3{font-size:.95rem;font-weight:700;margin-bottom:.4rem}
.step-card p{font-size:.82rem;color:var(--gray);line-height:1.65}

/* ── CTA Strip ──────────────────────────────────────────── */
.cta-strip{background:var(--brand);color:#fff;padding:72px 0;text-align:center}
.cta-strip h2{color:#fff;margin-bottom:.75rem}
.cta-strip p{color:rgba(255,255,255,.82);margin-bottom:2.25rem;font-size:1.05rem}
.cta-btns{display:flex;gap:.875rem;justify-content:center;flex-wrap:wrap}

/* ── B2B Strip ──────────────────────────────────────────── */
.b2b-strip{background:var(--hero-bg1);color:#fff;padding:64px 0}
.b2b-content{display:flex;align-items:center;justify-content:space-between;gap:2.5rem;flex-wrap:wrap}
.b2b-content h2{color:#fff;font-size:clamp(1.1rem,2vw,1.45rem)}
.b2b-content p{color:rgba(255,255,255,.7);max-width:540px;margin-top:.5rem;font-size:.9rem}

/* ── Page hero ──────────────────────────────────────────── */
.page-hero{background:linear-gradient(135deg,var(--hero-bg1),var(--hero-bg2));color:#fff;padding:52px 0}
.page-hero h1{color:#fff;font-size:clamp(1.4rem,3vw,2.2rem)}
.page-hero p{color:rgba(255,255,255,.78);margin-top:.5rem;font-size:.95rem}

/* ── Shop ────────────────────────────────────────────────── */
.shop-layout{display:grid;grid-template-columns:220px 1fr;gap:2.5rem;align-items:start}
@media(max-width:768px){.shop-layout{grid-template-columns:1fr}}
.shop-sidebar h4{font-size:.72rem;font-weight:700;color:var(--gray);text-transform:uppercase;letter-spacing:.06em;margin:1.25rem 0 .5rem}
.cat-link{display:block;padding:.45rem .8rem;border-radius:6px;font-size:.85rem;color:var(--text);text-decoration:none;margin-bottom:2px;transition:all var(--transition)}
.cat-link:hover,.cat-link.active{background:var(--brand-light);color:var(--brand);font-weight:600}
.search-form{display:flex;gap:.4rem;margin-bottom:1.25rem}
.search-form input{flex:1;padding:.5rem .8rem;border:1px solid var(--border);border-radius:var(--radius);font-size:.85rem;transition:border var(--transition)}
.search-form input:focus{outline:none;border-color:var(--brand)}
.search-form button{padding:.5rem .9rem;background:var(--brand);color:#fff;border:none;border-radius:var(--radius);cursor:pointer;font-size:.82rem;font-weight:700;transition:background var(--transition)}
.search-form button:hover{background:#6d3114}

/* ── Product page ───────────────────────────────────────── */
.product-page{padding:40px 0 64px}
.product-layout{display:grid;grid-template-columns:1fr 1fr;gap:3.5rem;margin-bottom:3.5rem}
@media(max-width:768px){.product-layout{grid-template-columns:1fr}}
.gallery-main{aspect-ratio:1;background:var(--light-gray);border-radius:var(--radius-lg);overflow:hidden}
.gallery-main img,.gallery-main video{width:100%;height:100%;object-fit:cover}
.gallery-placeholder{display:flex;align-items:center;justify-content:center;height:100%;font-size:6rem;background:linear-gradient(135deg,#f0e8e0,#e8d8cc)}
.gallery-thumbs{display:flex;gap:.5rem;flex-wrap:wrap;margin-top:.6rem}
.thumb{width:70px;height:70px;border-radius:8px;overflow:hidden;cursor:pointer;border:2px solid var(--border);flex-shrink:0;transition:border var(--transition)}
.thumb.active,.thumb:hover{border-color:var(--brand)}
.thumb img{width:100%;height:100%;object-fit:cover}
.thumb-video{width:100%;height:100%;background:var(--brand);display:flex;align-items:center;justify-content:center;color:#fff;font-size:1.3rem}
.breadcrumb{font-size:.78rem;color:var(--gray);margin-bottom:1rem}
.breadcrumb a{color:var(--gray);text-decoration:none}.breadcrumb a:hover{color:var(--brand)}
.rating-bar{display:flex;align-items:center;gap:.4rem;margin:.5rem 0}
.star{color:#e5e7eb;font-size:1rem;line-height:1}.star.filled{color:#f59e0b}
.sold-bar{font-size:.8rem;color:var(--brand);font-weight:700;background:var(--brand-light);padding:.35rem .8rem;border-radius:var(--radius-full);display:inline-block;margin:.5rem 0}
.product-short-desc{color:var(--gray);margin:.75rem 0;font-size:.9rem;line-height:1.7}
.price-display{margin:1rem 0;display:flex;align-items:baseline;gap:.65rem}
.price-big{font-size:1.75rem;font-weight:900;color:var(--brand)}
.price-vat{font-size:.8rem;color:var(--gray)}
.price-quote{font-size:.95rem;color:var(--gray);font-style:italic}
.selector-section{margin:1.25rem 0}
.selector-section h4{font-size:.82rem;font-weight:700;margin-bottom:.6rem;color:var(--dark);text-transform:uppercase;letter-spacing:.04em}
.material-swatches{display:flex;flex-direction:column;gap:.3rem}
.swatch-option{display:flex;align-items:center;gap:.65rem;cursor:pointer;padding:.55rem .85rem;border-radius:var(--radius);border:1.5px solid var(--border);transition:all var(--transition)}
.swatch-option:hover,.swatch-option.selected{border-color:var(--brand);background:var(--brand-light)}
.swatch-option input{display:none}
.swatch-circle{width:22px;height:22px;border-radius:50%;border:2px solid rgba(0,0,0,.1);flex-shrink:0}
.swatch-label{font-size:.82rem;display:flex;align-items:center;gap:.4rem;flex-wrap:wrap;color:var(--text)}
.finish-options{display:flex;flex-direction:column;gap:.3rem}
.finish-option{display:flex;align-items:flex-start;gap:.75rem;cursor:pointer;padding:.75rem;border-radius:var(--radius);border:1.5px solid var(--border);transition:all var(--transition)}
.finish-option:hover,.finish-option.selected{border-color:var(--brand)}
.finish-option input{margin-top:3px;flex-shrink:0;accent-color:var(--brand)}
.finish-name{font-weight:700;font-size:.85rem}
.finish-usecase{font-size:.68rem;padding:2px 7px;border-radius:var(--radius-full);font-weight:700;margin-left:.4rem}
.finish-usecase.indoor{background:#e0f2fe;color:#0369a1}
.finish-usecase.outdoor{background:#dcfce7;color:#15803d}
.finish-usecase.both{background:#f3e8ff;color:#7c3aed}
.finish-desc{font-size:.78rem;color:var(--gray);margin-top:.2rem;line-height:1.5}
.drawing-options,.drawing-options-form{display:flex;flex-direction:column;gap:.35rem}
.drawing-opt{display:flex;align-items:flex-start;gap:.5rem;cursor:pointer;font-size:.85rem;padding:.3rem 0;color:var(--text)}
.drawing-opt input{accent-color:var(--brand);margin-top:2px;flex-shrink:0}
.product-actions{display:flex;gap:.65rem;flex-wrap:wrap;margin:1.5rem 0}
.eco-note{font-size:.78rem;color:#15803d;background:#dcfce7;padding:.5rem .8rem;border-radius:var(--radius);border:1px solid #bbf7d0}
.product-tabs{margin-bottom:2.5rem}
.tab-nav{display:flex;gap:.15rem;border-bottom:2px solid var(--border);margin-bottom:1.5rem}
.tab-btn{background:none;border:none;padding:.6rem 1rem;font-size:.875rem;font-weight:600;cursor:pointer;color:var(--gray);border-bottom:2px solid transparent;margin-bottom:-2px;transition:all var(--transition);font-family:var(--font)}
.tab-btn.active{color:var(--brand);border-bottom-color:var(--brand)}
.tab-panel{display:none}.tab-panel.active{display:block}
.product-desc{font-size:.9rem;line-height:1.85;color:var(--text)}
.review-item{padding:1.25rem 0;border-bottom:1px solid var(--border)}
.review-header{display:flex;align-items:center;gap:.75rem;margin-bottom:.4rem;flex-wrap:wrap}
.review-stars{color:#f59e0b;font-size:.9rem;letter-spacing:.05em}
.review-date{font-size:.74rem;color:var(--gray);margin-left:auto}
.related-section h2{margin-bottom:1.5rem}

/* ── Forms ──────────────────────────────────────────────── */
.form-group{margin-bottom:1rem}
.form-group label{display:block;font-size:.8rem;font-weight:700;margin-bottom:.35rem;color:var(--dark);letter-spacing:.01em}
.form-group input,.form-group select,.form-group textarea{width:100%;padding:.65rem .9rem;border:1.5px solid var(--border);border-radius:var(--radius);font-size:.9rem;font-family:var(--font);background:#fff;transition:border var(--transition);color:var(--text)}
.form-group input:focus,.form-group select:focus,.form-group textarea:focus{outline:none;border-color:var(--brand);box-shadow:0 0 0 3px rgba(130,59,24,.09)}
.form-group input[type=file]{padding:.4rem .5rem;border-style:dashed}
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:1rem}
@media(max-width:540px){.form-row{grid-template-columns:1fr}}
.form-section{background:#fff;border:1px solid var(--border);border-radius:var(--radius-lg);padding:1.5rem;margin-bottom:1.25rem}
.form-section h3{font-size:.9rem;font-weight:700;color:var(--brand);margin-bottom:1rem;padding-bottom:.6rem;border-bottom:1px solid var(--border);text-transform:uppercase;letter-spacing:.04em}
.form-hint{font-size:.75rem;color:var(--gray);margin-top:.3rem;line-height:1.5}
.form-check label{display:flex;align-items:center;gap:.5rem;font-size:.875rem;cursor:pointer;font-weight:500}
.form-check input{accent-color:var(--brand);flex-shrink:0}
.dims-row{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem}
@media(max-width:480px){.dims-row{grid-template-columns:1fr}}
.outdoor-badge{background:#dcfce7;color:#15803d;font-size:.68rem;padding:1px 7px;border-radius:var(--radius-full);font-weight:700}
.finish-list-form{display:flex;flex-direction:column;gap:.35rem}
.finish-opt{display:flex;align-items:flex-start;gap:.65rem;padding:.8rem;border:1.5px solid var(--border);border-radius:var(--radius);cursor:pointer;transition:border var(--transition)}
.finish-opt:hover,.finish-opt.selected{border-color:var(--brand)}
.finish-opt input{margin-top:3px;flex-shrink:0;accent-color:var(--brand)}
.form-actions{text-align:center;margin-top:1.75rem}
.submit-note{font-size:.78rem;color:var(--gray);margin-top:.75rem;line-height:1.6}

/* ── Alerts ──────────────────────────────────────────────── */
.alert{padding:.875rem 1.1rem;border-radius:var(--radius);margin-bottom:1.25rem;font-size:.875rem;font-weight:600;display:flex;align-items:flex-start;gap:.5rem}
.alert-success{background:#dcfce7;color:#15803d;border:1px solid #bbf7d0}
.alert-error{background:#fee2e2;color:#dc2626;border:1px solid #fecaca}
.alert-info{background:#dbeafe;color:#1d4ed8;border:1px solid #bfdbfe}

/* ── Auth ─────────────────────────────────────────────────── */
.login-form,.reg-form{background:#fff;border:1px solid var(--border);border-radius:var(--radius-lg);padding:2rem}
.type-tabs{display:flex;gap:.25rem;background:var(--light-gray);border:1px solid var(--border);border-radius:var(--radius-lg);padding:.3rem;margin-bottom:1.5rem}
.type-tab{padding:.45rem .85rem;border-radius:var(--radius);font-size:.82rem;font-weight:600;color:var(--gray);text-decoration:none;transition:all var(--transition);flex:1;text-align:center}
.type-tab.active{background:#fff;color:var(--brand);box-shadow:var(--shadow-sm)}

/* ── Cart ────────────────────────────────────────────────── */
.cart-empty-state{text-align:center;padding:5rem 2rem;background:var(--light-gray);border-radius:var(--radius-lg)}
.cart-empty-icon{font-size:4rem;margin-bottom:1rem}
.cart-empty-state h2{font-size:1.4rem;color:var(--dark);margin-bottom:.5rem}
.cart-empty-state p{color:var(--gray);font-size:.9rem}
.cart-layout{display:grid;grid-template-columns:1fr 380px;gap:2.5rem;align-items:start}
@media(max-width:900px){.cart-layout{grid-template-columns:1fr}}

/* Cart rows (ASOS style) */
.cart-row{display:grid;grid-template-columns:80px 1fr auto auto auto;gap:1rem;align-items:center;padding:1.25rem 0;border-bottom:1px solid var(--border);transition:opacity .2s,transform .2s}
.cart-row:last-of-type{border-bottom:none}
.cart-row-img{width:80px;height:80px;border-radius:var(--radius);overflow:hidden;flex-shrink:0;background:var(--light-gray);border:1px solid var(--border)}
.cart-row-img img{width:100%;height:100%;object-fit:cover}
.cart-row-placeholder{width:100%;height:100%;display:flex;align-items:center;justify-content:center;font-size:1.8rem}
.cart-row-name{font-size:.9rem;font-weight:700;color:var(--dark);text-decoration:none;display:block;margin-bottom:.25rem;line-height:1.35}
.cart-row-name:hover{color:var(--brand)}
.cart-row-price-unit{font-size:.8rem;color:var(--gray)}
.cart-row-qty{display:flex;align-items:center;gap:.5rem;border:1.5px solid var(--border);border-radius:var(--radius);padding:.2rem .4rem}
.qty-btn{width:28px;height:28px;border:none;background:transparent;font-size:1.1rem;cursor:pointer;border-radius:4px;color:var(--text);display:flex;align-items:center;justify-content:center;transition:background var(--transition);font-family:var(--font);font-weight:700}
.qty-btn:hover{background:var(--light-gray);color:var(--brand)}
.qty-num{font-size:.9rem;font-weight:700;min-width:24px;text-align:center;color:var(--dark)}
.cart-row-total{font-size:.95rem;font-weight:800;color:var(--brand);min-width:90px;text-align:right}
.cart-row-remove{background:none;border:none;color:var(--gray);cursor:pointer;padding:.35rem;border-radius:4px;transition:all var(--transition);display:flex;align-items:center;justify-content:center}
.cart-row-remove:hover{background:#fee2e2;color:#dc2626}
.cart-continue{padding:1rem 0;font-size:.875rem}

/* Cart summary panel */
.cart-summary-panel{background:var(--light-gray);border:1px solid var(--border);border-radius:var(--radius-lg);padding:1.5rem;position:sticky;top:80px}
.summary-heading{font-size:1rem;font-weight:700;color:var(--dark);margin-bottom:1.25rem;padding-bottom:.75rem;border-bottom:1px solid var(--border)}
.summary-lines{display:flex;flex-direction:column;gap:.6rem;margin-bottom:1.25rem}
.summary-line{display:flex;justify-content:space-between;align-items:center;font-size:.875rem;color:var(--text)}
.summary-total{font-size:1.05rem;font-weight:800;color:var(--brand);padding-top:.6rem;border-top:2px solid var(--border);margin-top:.4rem}
.summary-payment-note{font-size:.75rem;color:var(--gray);background:#fff;border:1px solid var(--border);border-radius:var(--radius);padding:.65rem .9rem;margin-bottom:1.25rem;line-height:1.6}
.summary-login-nudge{font-size:.78rem;color:var(--gray);background:var(--brand-light);border-radius:var(--radius);padding:.6rem .9rem;margin-bottom:1rem}
.summary-login-nudge a{color:var(--brand);font-weight:700}
.checkout-form{display:flex;flex-direction:column;gap:.75rem}

/* ── Dashboard ──────────────────────────────────────────── */
.dashboard-layout{display:grid;grid-template-columns:220px 1fr;gap:2.5rem;align-items:start}
@media(max-width:768px){.dashboard-layout{grid-template-columns:1fr}}
.dashboard-nav{background:#fff;border:1px solid var(--border);border-radius:var(--radius-lg);padding:1.5rem;position:sticky;top:80px}
.user-avatar{width:52px;height:52px;background:var(--brand);color:#fff;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:1.25rem;font-weight:900;margin-bottom:.75rem}
.dashboard-nav h3{font-size:.95rem;font-weight:700;color:var(--dark)}
.dashboard-nav p{font-size:.75rem;color:var(--gray);margin-bottom:1rem;text-transform:capitalize}
.dashboard-nav nav{display:flex;flex-direction:column;gap:.1rem}
.dashboard-nav nav a{padding:.55rem .8rem;border-radius:var(--radius);font-size:.85rem;font-weight:600;color:var(--text);text-decoration:none;transition:all var(--transition)}
.dashboard-nav nav a:hover{background:var(--brand-light);color:var(--brand)}
.dash-section{margin-bottom:2.5rem}
.dash-section h2{font-size:1rem;font-weight:700;margin-bottom:1rem;padding-bottom:.6rem;border-bottom:1px solid var(--border);color:var(--dark)}
.orders-list{display:flex;flex-direction:column;gap:.75rem}
.order-card{background:#fff;border:1px solid var(--border);border-radius:var(--radius-lg);padding:1.1rem 1.25rem;transition:box-shadow var(--transition)}
.order-card:hover{box-shadow:var(--shadow-sm)}
.order-header{display:flex;align-items:center;gap:.75rem;flex-wrap:wrap;margin-bottom:.5rem}
.order-num{font-family:monospace;font-weight:700;color:var(--brand);font-size:.85rem}
.order-date{font-size:.73rem;color:var(--gray);margin-left:auto}
.order-body{display:flex;gap:1.5rem;font-size:.83rem;flex-wrap:wrap;color:var(--text)}
.order-note{font-size:.76rem;color:#1d4ed8;background:#dbeafe;border-radius:var(--radius);padding:.4rem .75rem;margin-top:.5rem}
.designs-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:1rem}
.design-card{background:#fff;border:1px solid var(--border);border-radius:var(--radius-lg);padding:1rem}
.design-card h4{font-size:.88rem;font-weight:700;margin-bottom:.35rem}
.design-date{font-size:.72rem;color:var(--gray);margin-top:.5rem}

/* ── Empty state ─────────────────────────────────────────── */
.empty-state{text-align:center;padding:3rem 1.5rem;background:var(--light-gray);border:1px dashed var(--border);border-radius:var(--radius-lg)}
.empty-state p{color:var(--gray);margin-bottom:1rem;font-size:.9rem}

/* ── Contact / Services ──────────────────────────────────── */
.contact-layout{display:grid;grid-template-columns:1fr 1fr;gap:3.5rem}
@media(max-width:768px){.contact-layout{grid-template-columns:1fr}}
.contact-info h3{margin-bottom:.85rem;font-size:1rem}
.contact-info a,.contact-info p{font-size:.875rem;display:block;margin-bottom:.45rem;color:var(--text);text-decoration:none}
.contact-info a:hover{color:var(--brand)}
.contact-form{background:#fff;border:1px solid var(--border);border-radius:var(--radius-lg);padding:2rem}
.services-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(290px,1fr));gap:1.5rem;margin-top:1.5rem}
.service-card{background:#fff;border:1px solid var(--border);border-radius:var(--radius-lg);padding:1.75rem;transition:box-shadow var(--transition);display:flex;flex-direction:column}
.service-card:hover{box-shadow:var(--shadow)}
.service-card h3{font-size:1rem;font-weight:700;margin-bottom:.5rem;color:var(--brand)}
.service-card p{font-size:.84rem;color:var(--gray);line-height:1.65;flex:1}
.service-deliverables{margin-top:.85rem;display:flex;flex-direction:column;gap:.3rem;flex:1}
.service-deliverables li{font-size:.8rem;color:var(--text);display:flex;gap:.4rem;align-items:flex-start}
.service-deliverables li::before{content:"✓";color:var(--brand);font-weight:800;flex-shrink:0}

/* ── Tier/Status badges ──────────────────────────────────── */
.badge{display:inline-block;padding:2px 9px;border-radius:var(--radius-full);font-size:.68rem;font-weight:700;line-height:1.4}
.tier-budget{background:#f1f5f9;color:#64748b}
.tier-mid{background:#dbeafe;color:#1d4ed8}
.tier-premium{background:var(--brand-light);color:var(--brand)}
.tier-luxury{background:#f3e8ff;color:#7c3aed}

/* ── Footer ──────────────────────────────────────────────── */
.footer{background:var(--footer-bg);color:rgba(255,255,255,.75);padding:64px 0 0}
.footer-inner{max-width:1200px;margin:0 auto;padding:0 24px;display:grid;grid-template-columns:1.8fr 1fr 1fr 1.3fr;gap:3rem;margin-bottom:3rem}
@media(max-width:1000px){.footer-inner{grid-template-columns:1fr 1fr;gap:2rem}}
@media(max-width:540px){.footer-inner{grid-template-columns:1fr}}
.footer-brand .logo-text{color:#fff;font-size:1.2rem;display:block;margin-bottom:.5rem}
.footer-brand p{font-size:.8rem;color:rgba(255,255,255,.55);margin-bottom:.25rem;line-height:1.6}
.social-links{display:flex;gap:.4rem;flex-wrap:wrap;margin-top:.85rem}
.social-links a{background:rgba(255,255,255,.1);color:rgba(255,255,255,.75);padding:.28rem .55rem;border-radius:5px;font-size:.72rem;font-weight:700;text-decoration:none;transition:all var(--transition)}
.social-links a:hover{background:var(--brand);color:#fff}
.footer-links h4,.footer-contact h4{font-size:.7rem;font-weight:700;color:#fff;text-transform:uppercase;letter-spacing:.08em;margin-bottom:.9rem}
.footer-links a{display:block;font-size:.8rem;color:rgba(255,255,255,.58);text-decoration:none;margin-bottom:.4rem;transition:color var(--transition)}
.footer-links a:hover{color:#fff}
.footer-contact a,.footer-contact p{display:block;font-size:.8rem;color:rgba(255,255,255,.58);text-decoration:none;margin-bottom:.4rem;transition:color var(--transition)}
.footer-contact a:hover{color:#fff}
.footer-bottom{max-width:1200px;margin:0 auto;padding:1.25rem 24px;border-top:1px solid rgba(255,255,255,.07);display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:.5rem}
.footer-bottom p{font-size:.74rem;color:rgba(255,255,255,.35)}

/* ── Admin ──────────────────────────────────────────────── */
.admin-table{width:100%;border-collapse:collapse;background:#fff;border-radius:var(--radius-lg);overflow:hidden;box-shadow:var(--shadow-sm)}
.admin-table thead{background:#fdf9f6}
.admin-table th{padding:.7rem 1rem;text-align:left;font-size:.73rem;font-weight:700;color:var(--brand);border-bottom:1px solid var(--border);white-space:nowrap}
.admin-table td{padding:.7rem 1rem;font-size:.82rem;border-bottom:1px solid #faf5f0;vertical-align:middle}
.admin-table tr:last-child td{border:none}
.admin-table tr:hover td{background:#fdf9f6}

/* ── Misc ────────────────────────────────────────────────── */
@media(max-width:480px){
  .hero-btns,.cta-btns,.product-actions{flex-direction:column}
  .cart-row{grid-template-columns:64px 1fr;gap:.75rem}
  .cart-row-qty,.cart-row-total,.cart-row-remove{grid-column:2}
  .b2b-content{flex-direction:column}
}