/* dasteknik.net storefront — clean white / blue accent (Casper-style) */
:root{
  --accent:#0d6efd;
  --accent-dark:#0a58ca;
  --ink:#1a1f2b;
  --muted:#6b7280;
  --line:#e9ecef;
  --bg:#ffffff;
  --soft:#f5f7fa;
  --radius:12px;
}
*{box-sizing:border-box}
body{font-family:"Segoe UI",system-ui,Roboto,Arial,sans-serif;color:var(--ink);background:var(--bg);margin:0}
a{text-decoration:none;color:inherit}
img{max-width:100%}

/* Topbar */
.topbar{background:var(--soft);font-size:.82rem;padding:.4rem 0;border-bottom:1px solid var(--line)}
.topbar a{color:var(--muted)}
.topbar a:hover{color:var(--accent)}

/* Main header */
.main-header{border-bottom:1px solid var(--line)}
.logo{font-size:1.6rem;font-weight:800;letter-spacing:-.5px;color:var(--ink);line-height:1;display:inline-flex;align-items:baseline}
.logo .logo-das{font-size:2.1rem;color:var(--ink)}
.logo span:not(.logo-das){color:var(--accent)}
.search-box{position:relative}
.search-box input{border-radius:30px;padding:.65rem 3rem .65rem 1.2rem;border:1.5px solid var(--line)}
.search-box input:focus{border-color:var(--accent);box-shadow:none;outline:none}
.search-box button{position:absolute;right:6px;top:50%;transform:translateY(-50%);background:var(--accent);color:#fff;border:none;width:38px;height:38px;border-radius:50%}
.header-icons a{font-size:1.4rem;color:var(--ink);position:relative}
.header-icons a:hover{color:var(--accent)}
.cart-count{position:absolute;top:-6px;right:-10px;background:var(--accent);color:#fff;font-size:.65rem;border-radius:50%;padding:1px 6px}

/* Category nav */
.cat-nav{background:var(--bg);border-bottom:1px solid var(--line);padding:.4rem 0;font-size:.92rem}
.cat-nav a{padding:.45rem .8rem;border-radius:8px;color:var(--ink);font-weight:500}
.cat-nav a:hover{background:var(--soft);color:var(--accent)}
.cat-nav a.highlight{color:var(--accent)}

/* Hero */
.hero{background:var(--soft)}
.hero-slide{min-height:340px;display:flex;align-items:center;position:relative;
  background:linear-gradient(120deg,#e7f0ff,#f5f7fa);
  background-size:cover;background-position:center;background-repeat:no-repeat}
/* When a slide has a background image, darken it slightly and use light text */
.hero-slide[style*="background-image"]{background-color:#0a0e1a}
.hero-slide[style*="background-image"]::before{content:"";position:absolute;inset:0;
  background:linear-gradient(90deg,rgba(8,12,26,.78),rgba(8,12,26,.35));z-index:1}
.hero-slide[style*="background-image"] .hero-text{position:relative;z-index:2}
.hero-slide[style*="background-image"] .hero-text h2{color:#fff}
.hero-slide[style*="background-image"] .hero-text p{color:#cfe0ff}
.hero-text{max-width:560px;padding:2.5rem;margin:0 auto;text-align:center}
.hero-text h2{font-size:2.4rem;font-weight:800;margin-bottom:.6rem}
.hero-text p{font-size:1.15rem;color:var(--muted);margin-bottom:1.4rem}
.carousel-control-prev-icon,.carousel-control-next-icon{filter:invert(1) opacity(.4)}

/* Services row */
.services{margin:1.6rem auto}
.service-item{display:flex;flex-direction:column;align-items:center;gap:.4rem;padding:1rem;border:1px solid var(--line);border-radius:var(--radius);height:100%}
.service-item i{font-size:1.7rem;color:var(--accent)}
.service-item span{font-size:.82rem;color:var(--muted)}

/* Sections */
.section{margin:2.4rem auto}
.section-title{font-size:1.4rem;font-weight:700;margin-bottom:1.2rem;display:flex;align-items:center;gap:.6rem}
.section-title .see-all,.section-title .highlight{font-size:.85rem;font-weight:500;color:var(--accent);margin-left:auto}

/* Category cards */
.cat-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:.9rem}
.cat-card{display:flex;flex-direction:column;align-items:center;gap:.6rem;padding:1.4rem 1rem;border:1px solid var(--line);border-radius:var(--radius);background:#fff;transition:.18s}
.cat-card:hover{border-color:var(--accent);box-shadow:0 6px 18px rgba(13,110,253,.08);transform:translateY(-2px)}
.cat-card i{font-size:2rem;color:var(--accent)}
.cat-card span{font-weight:600;font-size:.9rem}

/* Product grid + cards */
.product-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:1rem}
.product-card{position:relative;border:1px solid var(--line);border-radius:var(--radius);background:#fff;overflow:hidden;display:flex;flex-direction:column;transition:.18s}
.product-card:hover{box-shadow:0 8px 24px rgba(0,0,0,.08);transform:translateY(-3px)}
.badge-discount{position:absolute;top:10px;left:10px;background:#e63946;color:#fff;font-size:.78rem;font-weight:700;padding:2px 8px;border-radius:6px;z-index:2}
.p-img{display:block;aspect-ratio:1;background:var(--soft);display:flex;align-items:center;justify-content:center}
.p-img img{object-fit:contain;height:100%}
.img-placeholder{font-size:3rem;color:#ccd}
.p-body{padding:.9rem;display:flex;flex-direction:column;gap:.4rem;flex:1}
.p-name{font-weight:600;font-size:.95rem;line-height:1.3;min-height:2.4em;color:var(--ink)}
.p-name:hover{color:var(--accent)}
.p-specs{font-size:.8rem;color:var(--muted);margin:0;min-height:2.2em}
.p-price{display:flex;align-items:baseline;gap:.5rem;margin-top:auto}
.p-price .old{color:var(--muted);text-decoration:line-through;font-size:.85rem}
.p-price .new{color:var(--accent);font-weight:800;font-size:1.15rem}
.installment{color:#198754;font-size:.75rem}
.btn-add{margin-top:.5rem;background:var(--accent);color:#fff;border:none;border-radius:8px;padding:.55rem;font-weight:600;font-size:.88rem;transition:.15s}
.btn-add:hover{background:var(--accent-dark)}

/* Info blocks */
.info-block{display:flex;flex-direction:column;align-items:center;gap:.5rem;padding:1.6rem;background:var(--soft);border-radius:var(--radius);text-align:center}
.info-block i{font-size:2rem;color:var(--accent)}
.info-block h6{margin:0;font-size:.95rem}

/* Footer */
.site-footer{background:#0f1623;color:#c7ccd6;margin-top:3rem;padding:2.6rem 0 1.4rem}
.site-footer h6{color:#fff;font-size:.95rem;margin-bottom:1rem}
.site-footer ul{list-style:none;padding:0;margin:0}
.site-footer ul li{margin-bottom:.5rem}
.site-footer ul a{color:#9aa3b2;font-size:.88rem}
.site-footer ul a:hover{color:var(--accent)}
.footer-bottom{border-top:1px solid #1e2838;margin-top:2rem;padding-top:1.2rem;font-size:.83rem;color:#7b8494;gap:1rem}
.payment-logos i,.social a{font-size:1.3rem;color:#9aa3b2}
.social a:hover{color:var(--accent)}

/* Admin shared */
.admin-wrap{display:flex;min-height:100vh}
.admin-sidebar{width:240px;background:#0f1623;color:#c7ccd6;padding:1rem 0;flex-shrink:0}
.admin-sidebar .brand{font-weight:800;font-size:1.2rem;color:#fff;padding:0 1.2rem 1rem}
.admin-sidebar .brand span{color:var(--accent)}
.admin-sidebar a{display:flex;align-items:center;gap:.6rem;padding:.7rem 1.2rem;color:#9aa3b2;font-size:.9rem}
.admin-sidebar a:hover,.admin-sidebar a.active{background:#1a2334;color:#fff}
.admin-main{flex:1;background:var(--soft)}
.admin-topbar{background:#fff;border-bottom:1px solid var(--line);padding:.8rem 1.4rem;display:flex;justify-content:space-between;align-items:center}
.admin-content{padding:1.6rem}
.stat-card{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:1.3rem}
.stat-card .num{font-size:1.8rem;font-weight:800;color:var(--accent)}
.stat-card .lbl{color:var(--muted);font-size:.85rem}

/* Login */
.login-page{min-height:100vh;display:flex;align-items:center;justify-content:center;background:var(--soft)}
.login-card{background:#fff;border:1px solid var(--line);border-radius:16px;padding:2.4rem;width:100%;max-width:400px;box-shadow:0 10px 40px rgba(0,0,0,.06)}
.login-card .logo{display:block;text-align:center;margin-bottom:1.4rem}

@media(max-width:768px){
  .hero-text h2{font-size:1.7rem}
  .admin-sidebar{width:64px}
  .admin-sidebar .brand,.admin-sidebar a span{display:none}
}

/* ===== Category listing (Phase 4) ===== */
.breadcrumb-bar{font-size:.85rem;color:var(--muted);margin-bottom:1.2rem;display:flex;align-items:center;gap:.4rem}
.breadcrumb-bar a{color:var(--accent)}
.breadcrumb-bar i{font-size:.7rem}

.listing-layout{display:grid;grid-template-columns:250px 1fr;gap:1.6rem;align-items:start}

.filter-sidebar{border:1px solid var(--line);border-radius:var(--radius);padding:1.2rem;position:sticky;top:1rem}
.filter-group{padding-bottom:1rem;margin-bottom:1rem;border-bottom:1px solid var(--line)}
.filter-group h6{font-size:.9rem;font-weight:700;margin-bottom:.6rem}
.filter-check{display:flex;align-items:center;gap:.5rem;font-size:.85rem;color:#333;padding:.2rem 0;cursor:pointer}
.filter-check input{accent-color:var(--accent)}
.price-row{display:flex;align-items:center;gap:.4rem}
.price-row span{color:var(--muted)}

.listing-toolbar{display:flex;justify-content:space-between;align-items:center;margin-bottom:1.2rem}
.listing-toolbar #resultCount{color:var(--muted);font-size:.9rem}
.listing-toolbar .form-select{width:auto}

#gridContainer{transition:opacity .15s}
#gridContainer.loading{opacity:.45;pointer-events:none}

.empty-state{text-align:center;padding:3rem 1rem;color:var(--muted)}
.empty-state i{font-size:2.4rem;display:block;margin-bottom:.6rem;color:#ccd}

.pagination-nav{display:flex;gap:.4rem;justify-content:center;margin-top:1.8rem;flex-wrap:wrap}
.page-btn{border:1px solid var(--line);background:#fff;width:38px;height:38px;border-radius:8px;font-weight:600;color:var(--ink);transition:.15s}
.page-btn:hover{border-color:var(--accent);color:var(--accent)}
.page-btn.active{background:var(--accent);color:#fff;border-color:var(--accent)}

@media(max-width:860px){
  .listing-layout{grid-template-columns:1fr}
  .filter-sidebar{position:static}
}

/* ===== Product detail (Phase 5) ===== */
.product-detail{display:grid;grid-template-columns:1fr 1fr;gap:2.4rem;margin-bottom:2.4rem}

.pd-main-img{position:relative;border:1px solid var(--line);border-radius:var(--radius);background:var(--soft);aspect-ratio:1;display:flex;align-items:center;justify-content:center;overflow:hidden}
.pd-main-img img{object-fit:contain;width:100%;height:100%}
.pd-main-img .img-placeholder{font-size:4rem;color:#ccd}
.pd-thumbs{display:flex;gap:.6rem;margin-top:.8rem;flex-wrap:wrap}
.pd-thumb{width:70px;height:70px;border:1.5px solid var(--line);border-radius:8px;background:#fff;padding:4px;cursor:pointer;overflow:hidden}
.pd-thumb img{width:100%;height:100%;object-fit:contain}
.pd-thumb.active{border-color:var(--accent)}

.pd-brand{color:var(--accent);font-weight:600;font-size:.85rem;text-transform:uppercase;letter-spacing:.5px}
.pd-title{font-size:1.7rem;font-weight:800;margin:.3rem 0 .4rem;line-height:1.25}
.pd-model{color:var(--muted);font-size:.85rem;margin-bottom:.6rem}
.pd-short{color:#444;margin-bottom:1.2rem}

.pd-price-box{background:var(--soft);border-radius:var(--radius);padding:1.2rem;margin-bottom:1rem}
.pd-old{color:var(--muted);text-decoration:line-through;font-size:1rem;margin-right:.6rem}
.pd-save{background:#e63946;color:#fff;font-size:.78rem;font-weight:700;padding:2px 8px;border-radius:6px}
.pd-now{font-size:2rem;font-weight:800;color:var(--accent);margin:.3rem 0}
.pd-installment{color:#198754;font-size:.9rem;display:flex;align-items:center;gap:.4rem}

.pd-stock{margin-bottom:.8rem;font-size:.92rem}
.pd-stock .in{color:#198754}
.pd-stock .out{color:#e63946}
.pd-meta{display:flex;gap:1.4rem;color:var(--muted);font-size:.85rem;margin-bottom:1.4rem;flex-wrap:wrap}
.pd-meta i{color:var(--accent)}

.pd-actions{display:flex;gap:.7rem;align-items:stretch}
.qty-picker{display:flex;border:1.5px solid var(--line);border-radius:10px;overflow:hidden}
.qty-btn{width:42px;background:var(--soft);border:none;font-size:1.2rem;color:var(--ink)}
.qty-btn:hover{background:#e9eef5;color:var(--accent)}
.qty-picker input{width:54px;border:none;text-align:center;font-weight:600;-moz-appearance:textfield}
.qty-picker input::-webkit-outer-spin-button,.qty-picker input::-webkit-inner-spin-button{-webkit-appearance:none}
.btn-add-lg{flex:1;background:var(--accent);color:#fff;border:none;border-radius:10px;font-weight:700;padding:.8rem 1.4rem;font-size:1rem;transition:.15s}
.btn-add-lg:hover:not(:disabled){background:var(--accent-dark)}
.btn-add-lg:disabled{background:#aab4c2;cursor:not-allowed}
.btn-wish{width:52px;border:1.5px solid var(--line);background:#fff;border-radius:10px;font-size:1.2rem;color:var(--muted)}
.btn-wish:hover{border-color:#e63946;color:#e63946}

.pd-tabs{margin-bottom:2.4rem}
.pd-tab-nav{display:flex;gap:.4rem;border-bottom:2px solid var(--line);margin-bottom:1.2rem}
.pd-tab{background:none;border:none;padding:.8rem 1.2rem;font-weight:600;color:var(--muted);border-bottom:2px solid transparent;margin-bottom:-2px}
.pd-tab.active{color:var(--accent);border-bottom-color:var(--accent)}
.pd-tab-panel{display:none}
.pd-tab-panel.active{display:block}
.spec-table{width:100%;max-width:620px;border-collapse:collapse}
.spec-table th,.spec-table td{text-align:left;padding:.7rem 1rem;border-bottom:1px solid var(--line);font-size:.92rem}
.spec-table th{width:200px;color:var(--muted);font-weight:600;background:var(--soft)}
.pd-desc{line-height:1.7;color:#333;max-width:760px}

@media(max-width:860px){
  .product-detail{grid-template-columns:1fr;gap:1.4rem}
  .pd-title{font-size:1.4rem}
}

/* ===== Admin product media + specs (Option B) ===== */
.admin-thumb{max-width:120px;max-height:120px;border:1px solid var(--line);border-radius:8px;object-fit:contain;background:var(--soft);padding:4px}
.admin-thumb-sm{width:44px;height:44px;border:1px solid var(--line);border-radius:6px;object-fit:contain;background:var(--soft);display:inline-flex;align-items:center;justify-content:center}
.admin-thumb-sm.placeholder{color:#ccd;font-size:1.2rem}
.admin-gallery{display:flex;flex-wrap:wrap;gap:.6rem}
.admin-gallery-item{position:relative;width:84px;height:84px;border:1px solid var(--line);border-radius:8px;overflow:hidden;background:var(--soft)}
.admin-gallery-item img{width:100%;height:100%;object-fit:contain;padding:4px}
.admin-gallery-item .del{position:absolute;top:2px;right:4px;background:rgba(230,57,70,.92);color:#fff;width:20px;height:20px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:1rem;line-height:1;text-decoration:none}
.spec-row{display:grid;grid-template-columns:1fr 1fr 1.2fr 1.2fr auto;gap:.5rem;margin-bottom:.5rem}

/* ===== Cart / Checkout (Phase 6) ===== */
.page-h1{font-size:1.7rem;font-weight:800;margin-bottom:1.4rem}

.cart-layout{display:grid;grid-template-columns:1fr 320px;gap:1.6rem;align-items:start}
.cart-items{display:flex;flex-direction:column;gap:.8rem}
.cart-row{display:grid;grid-template-columns:80px 1fr auto auto auto;gap:1rem;align-items:center;border:1px solid var(--line);border-radius:var(--radius);padding:.8rem}
.cart-thumb{width:80px;height:80px;border-radius:8px;background:var(--soft);display:flex;align-items:center;justify-content:center;overflow:hidden}
.cart-thumb img{width:100%;height:100%;object-fit:contain}
.cart-thumb .ph{color:#ccd;font-size:1.6rem}
.cart-name{font-weight:600;color:var(--ink);display:block}
.cart-name:hover{color:var(--accent)}
.cart-unit{color:var(--muted);font-size:.85rem}
.cart-line{font-weight:700;color:var(--accent);min-width:90px;text-align:right}
.cart-remove{background:none;border:none;color:var(--muted);font-size:1.1rem}
.cart-remove:hover{color:#e63946}
.qty-picker.sm{transform:scale(.9)}

.cart-summary,.checkout-summary{border:1px solid var(--line);border-radius:var(--radius);padding:1.2rem;position:sticky;top:1rem}
.cart-summary h6,.checkout-summary h6{font-weight:700;margin-bottom:1rem}
.coupon-box{display:flex;gap:.4rem;margin-bottom:.4rem}
.coupon-msg{font-size:.8rem;min-height:1rem;margin-bottom:.6rem}
.coupon-msg.ok{color:#198754}.coupon-msg.err{color:#e63946}
.sum-row{display:flex;justify-content:space-between;padding:.4rem 0;font-size:.92rem}
.sum-row.total{border-top:1px solid var(--line);margin-top:.4rem;padding-top:.7rem;font-weight:800;font-size:1.1rem}
.sum-row.total span:last-child{color:var(--accent)}
.ship-hint{font-size:.8rem;color:#198754;margin:.6rem 0 0}

.checkout-layout{display:grid;grid-template-columns:1fr 340px;gap:1.6rem;align-items:start}
.checkout-main{display:flex;flex-direction:column;gap:1.2rem}
.co-card{border:1px solid var(--line);border-radius:var(--radius);padding:1.3rem}
.co-card h6{font-weight:700;margin-bottom:1rem}
.co-option{display:flex;align-items:center;gap:.6rem;padding:.7rem;border:1px solid var(--line);border-radius:8px;margin-bottom:.5rem;cursor:pointer}
.co-option:hover{border-color:var(--accent)}
.co-option input{accent-color:var(--accent)}
.co-opt-meta{margin-left:auto;color:var(--muted);font-size:.85rem}
.co-line{display:grid;grid-template-columns:auto 1fr auto;gap:.5rem;font-size:.88rem;padding:.3rem 0}
.co-qty{color:var(--muted)}
.co-amt{font-weight:600}

.order-success{max-width:620px;margin:0 auto;text-align:center}
.os-icon{font-size:3.5rem;color:#198754;margin-bottom:.6rem}
.order-success h1{font-size:1.6rem;font-weight:800}
.os-card{border:1px solid var(--line);border-radius:var(--radius);padding:1.3rem;text-align:left;margin:1.4rem 0}
.os-card h6{font-weight:700;margin-bottom:.8rem}
.os-meta{text-align:left;border:1px solid var(--line);border-radius:var(--radius);padding:1.2rem;font-size:.9rem;display:flex;flex-direction:column;gap:.4rem}

@media(max-width:860px){
  .cart-layout,.checkout-layout{grid-template-columns:1fr}
  .cart-summary,.checkout-summary{position:static}
  .cart-row{grid-template-columns:64px 1fr auto;grid-template-areas:'thumb info remove' 'thumb qty line';row-gap:.5rem}
  .cart-thumb{grid-area:thumb}.cart-info{grid-area:info}.cart-remove{grid-area:remove}
}

/* ===== Customer accounts (Phase 7) ===== */
.auth-wrap{max-width:440px;margin:0 auto;border:1px solid var(--line);border-radius:var(--radius);padding:1.6rem}
.auth-tabs{display:flex;gap:.4rem;border-bottom:2px solid var(--line);margin-bottom:1.4rem}
.auth-tab{flex:1;background:none;border:none;padding:.7rem;font-weight:700;color:var(--muted);border-bottom:2px solid transparent;margin-bottom:-2px}
.auth-tab.active{color:var(--accent);border-bottom-color:var(--accent)}
.auth-form{display:none}
.auth-form.active{display:block}

.account-layout{display:grid;grid-template-columns:240px 1fr;gap:1.6rem;align-items:start}
.account-nav{border:1px solid var(--line);border-radius:var(--radius);padding:.8rem;position:sticky;top:1rem}
.account-hi{display:flex;align-items:center;gap:.7rem;padding:.6rem .4rem 1rem;border-bottom:1px solid var(--line);margin-bottom:.6rem}
.account-hi i{font-size:2rem;color:var(--accent)}
.account-hi strong{display:block;font-size:.95rem}
.account-hi span{font-size:.78rem;color:var(--muted);word-break:break-all}
.account-nav a{display:flex;align-items:center;gap:.6rem;padding:.6rem .7rem;border-radius:8px;color:var(--ink);font-size:.9rem;font-weight:500}
.account-nav a:hover{background:var(--soft);color:var(--accent)}
.account-nav a.active{background:var(--accent);color:#fff}

.guest-prompt{background:#e7f0ff;border:1px solid #cfe0ff;border-radius:8px;padding:.8rem 1rem;margin-bottom:1.2rem;font-size:.9rem;color:#0a3d8f}
.guest-prompt a{color:var(--accent);font-weight:600}

@media(max-width:860px){
  .account-layout{grid-template-columns:1fr}
  .account-nav{position:static}
}

/* ===== Admin content modules (Phase 9) ===== */
.footer-admin-links{list-style:none;padding:0;margin:0}
.footer-admin-links li{display:flex;justify-content:space-between;align-items:flex-start;gap:.4rem;padding:.4rem 0;border-bottom:1px solid var(--line);font-size:.85rem}
.footer-admin-links li:last-child{border-bottom:none}
a.stat-card{color:inherit;transition:.15s}
a.stat-card:hover{border-color:var(--accent);box-shadow:0 6px 18px rgba(13,110,253,.08)}

/* ===== Content & support pages (Phase 8) ===== */
.cms-page{max-width:800px}
.cms-body{line-height:1.8;color:#333}

.faq-list{max-width:800px}
.faq-item{border:1px solid var(--line);border-radius:var(--radius);margin-bottom:.7rem;overflow:hidden}
.faq-q{width:100%;background:#fff;border:none;padding:1rem 1.2rem;display:flex;justify-content:space-between;align-items:center;font-weight:600;text-align:left;gap:1rem}
.faq-q:hover{background:var(--soft)}
.faq-q i{transition:transform .2s;color:var(--accent)}
.faq-q.active i{transform:rotate(180deg)}
.faq-a{max-height:0;overflow:hidden;transition:max-height .25s ease}
.faq-a.open{max-height:400px}
.faq-a p{padding:0 1.2rem 1.1rem;margin:0;color:#444;line-height:1.7}
.faq-cta{text-align:center;margin-top:2rem;padding:1.6rem;background:var(--soft);border-radius:var(--radius);max-width:800px}
.faq-cta p{margin-bottom:.8rem;color:var(--muted)}

.contact-layout{display:grid;grid-template-columns:1fr 320px;gap:1.6rem;align-items:start}
.contact-info p{display:flex;align-items:center;gap:.6rem;margin-bottom:.6rem}
.contact-info i{color:var(--accent)}

.support-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:1rem;margin-bottom:2rem}
.support-card{border:1px solid var(--line);border-radius:var(--radius);padding:1.6rem;text-align:center;color:var(--ink);transition:.18s;display:block}
.support-card:hover{border-color:var(--accent);box-shadow:0 6px 18px rgba(13,110,253,.08);transform:translateY(-2px);color:var(--ink)}
.support-card i{font-size:2.2rem;color:var(--accent);display:block;margin-bottom:.6rem}
.support-card h6{font-weight:700;margin-bottom:.3rem}
.support-card p{font-size:.83rem;color:var(--muted);margin:0}
.support-contact{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:1rem;background:var(--soft);border-radius:var(--radius);padding:1.6rem}
.support-phone{display:flex;align-items:center;gap:.6rem;font-size:1.3rem;font-weight:700;color:var(--accent)}

.ticket-body{background:var(--soft);border-radius:8px;padding:1rem;line-height:1.7}

@media(max-width:860px){.contact-layout{grid-template-columns:1fr}}

/* ===== Campaigns page ===== */
.campaign-hero{display:flex;align-items:center;gap:1.2rem;background:linear-gradient(120deg,#e7f0ff,#f5f7fa);border-radius:var(--radius);padding:1.6rem;margin-bottom:1.6rem}
.campaign-hero i{font-size:2.6rem;color:var(--accent)}
.campaign-hero h1{font-size:1.5rem;font-weight:800;margin:0}
.campaign-hero p{margin:0;color:var(--muted)}

/* ===== Wishlist heart on product cards ===== */
.product-card{position:relative}
.card-wish{position:absolute;top:10px;right:10px;z-index:3;width:34px;height:34px;border-radius:50%;border:1px solid var(--line);background:rgba(255,255,255,.92);color:var(--muted);display:flex;align-items:center;justify-content:center;font-size:1rem;transition:.15s;cursor:pointer}
.card-wish:hover{color:#e63946;border-color:#e63946}
.card-wish.active,.card-wish .bi-heart-fill{color:#e63946}
.btn-wish.active,.btn-wish .bi-heart-fill{color:#e63946;border-color:#e63946}

/* ===== Order status timeline ===== */
.order-timeline{display:flex;justify-content:space-between;position:relative;margin:1.4rem 0 .4rem;max-width:560px}
.order-timeline::before{content:'';position:absolute;top:16px;left:5%;right:5%;height:2px;background:var(--line);z-index:0}
.ot-step{display:flex;flex-direction:column;align-items:center;gap:.4rem;position:relative;z-index:1;flex:1}
.ot-dot{width:34px;height:34px;border-radius:50%;background:#fff;border:2px solid var(--line);display:flex;align-items:center;justify-content:center;color:var(--muted)}
.ot-step.done .ot-dot{background:var(--accent);border-color:var(--accent);color:#fff}
.ot-step span{font-size:.78rem;color:var(--muted);text-align:center}
.ot-step.done span{color:var(--ink);font-weight:600}

/* ===== Language switcher ===== */
.lang-switch a{color:var(--muted);font-weight:600;padding:0 2px}
.lang-switch a.active{color:var(--accent)}
.lang-switch .sep{color:var(--muted);opacity:.5}

/* Campaigns link highlighted in the top bar */
.topbar-campaign{color:var(--accent) !important;font-weight:600}
.topbar .d-md-flex a:hover{color:var(--accent)}

/* Home link in category nav */
.nav-home{font-weight:600;color:var(--accent)}

/* ==================================================
   TOP BAR
================================================== */

.topbar {
    min-height: 42px;
    background: #f5f7fa;
    border-bottom: 1px solid #e3e7ed;
}

.topbar-inner {
    min-height: 42px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 25px;
}

.topbar-left,
.topbar-right {
    display: flex;
    align-items: center;
    gap: 16px;
}

.topbar-left {
    flex: 1;
    min-width: 0;
}

.topbar-right {
    flex-shrink: 0;
    margin-left: auto;
}

.topbar-item,
.lang-switch {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    white-space: nowrap;
    color: #566075;
    text-decoration: none;
    font-size: 14px;
    line-height: 1;
}

a.topbar-item:hover {
    color: #0d6efd;
}

.whatsapp-link {
    color: #128c4b !important;
}

.whatsapp-link:hover {
    color: #0d713c !important;
}

.live-support-link {
    position: relative;
}

.live-status-dot {
    display: inline-block;
    width: 7px;
    height: 7px;
    flex: 0 0 7px;
    border-radius: 50%;
    background-color: #20c997;
    box-shadow: 0 0 0 3px rgba(32, 201, 151, 0.16);
}

.topbar-campaign {
    color: #0d6efd !important;
    font-weight: 600;
}

.lang-switch {
    gap: 7px;
}

.lang-switch a {
    color: #566075;
    text-decoration: none;
}

.lang-switch a.active {
    color: #0d6efd;
    font-weight: 600;
}

.lang-switch .sep {
    color: #a3a9b3;
}
@media (max-width: 1199px) {
    .topbar-left {
        gap: 11px;
    }

    .topbar-right {
        gap: 11px;
    }

    .topbar-item,
    .lang-switch {
        font-size: 13px;
    }
}

@media (max-width: 991px) {
    .topbar-left .topbar-item:nth-of-type(4),
    .topbar-left .topbar-item:nth-of-type(5) {
        display: none;
    }
}

@media (max-width: 767px) {
    .topbar-inner {
        min-height: 38px;
        justify-content: flex-end;
    }

    .topbar-left {
        display: none;
    }

    .topbar-right {
        width: 100%;
        justify-content: flex-end;
    }
}
/* ==================================================
   RESPONSIVE STOREFRONT HEADER
   Desktop remains unchanged
================================================== */

/* Header structure */
.header-main-row {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding-top: 1rem;
    padding-bottom: 1rem;
}

.desktop-search {
    flex: 1;
}

.header-icons {
    display: flex;
    align-items: center;
    gap: 1rem;
    flex-shrink: 0;
}

/* Hidden on desktop */
.mobile-menu-btn,
.mobile-search {
    display: none;
}

/* Mobile offcanvas */
.mobile-category-offcanvas {
    width: min(86vw, 360px) !important;
}

.mobile-category-offcanvas .offcanvas-header {
    border-bottom: 1px solid var(--line);
    padding: 1rem 1.2rem;
}

.mobile-category-offcanvas .offcanvas-body {
    padding: 0;
}

.mobile-menu-logo {
    display: inline-flex;
    align-items: baseline;
    color: var(--accent);
    font-size: 1.35rem;
    font-weight: 800;
    letter-spacing: -0.5px;
}

.mobile-logo-das {
    color: var(--ink);
    font-size: 1.65rem;
}

.mobile-menu-heading {
    padding: 1rem 1.2rem 0.6rem;
    color: var(--muted);
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.mobile-category-list {
    display: flex;
    flex-direction: column;
}

.mobile-category-list a {
    display: flex;
    align-items: center;
    gap: 0.8rem;
    min-height: 50px;
    padding: 0.7rem 1.2rem;
    border-bottom: 1px solid var(--line);
    color: var(--ink);
    font-size: 0.95rem;
    font-weight: 500;
}

.mobile-category-list a:hover {
    color: var(--accent);
    background: var(--soft);
}

.mobile-category-list a > i:first-child {
    width: 22px;
    color: var(--accent);
    font-size: 1.05rem;
    text-align: center;
}

.mobile-menu-arrow {
    margin-left: auto;
    color: #aab1bc;
    font-size: 0.75rem;
}

.mobile-support-links {
    padding: 1rem;
    background: var(--soft);
}

.mobile-support-links > a {
    display: flex;
    align-items: center;
    gap: 0.8rem;
    margin-bottom: 0.65rem;
    padding: 0.8rem;
    border: 1px solid var(--line);
    border-radius: 10px;
    background: #fff;
    color: var(--ink);
}

.mobile-support-links > a:last-child {
    margin-bottom: 0;
}

.mobile-support-links > a > i {
    color: var(--accent);
    font-size: 1.2rem;
}

.mobile-support-links strong,
.mobile-support-links small {
    display: block;
}

.mobile-support-links small {
    margin-top: 2px;
    color: var(--muted);
    font-size: 0.75rem;
}

.mobile-support-links .mobile-whatsapp-support > i {
    color: #128c4b;
}

/* ==================================================
   MOBILE
================================================== */

@media (max-width: 767px) {

    /* Hide the large desktop category navigation */
    .cat-nav {
        display: none;
    }

    .main-header {
        background: #fff;
    }

    .header-main-row {
        display: grid;
        grid-template-columns: auto minmax(0, 1fr) auto;
        grid-template-areas:
            "menu logo icons"
            "search search search";
        column-gap: 0.7rem;
        row-gap: 0.85rem;
        padding-top: 0.8rem;
        padding-bottom: 0.85rem;
    }

    /* Hamburger */
    .mobile-menu-btn {
        grid-area: menu;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 42px;
        height: 42px;
        padding: 0;
        border: 1px solid var(--line);
        border-radius: 50%;
        background: #fff;
        color: var(--ink);
        font-size: 1.65rem;
    }

    .mobile-menu-btn:active {
        background: var(--soft);
    }

    /* Smaller mobile logo */
    .header-main-row .logo {
        grid-area: logo;
        justify-self: start;
        min-width: 0;
        font-size: 1.25rem;
    }

    .header-main-row .logo .logo-das {
        font-size: 1.7rem;
    }

    /* Desktop search is hidden */
    .desktop-search {
        display: none;
    }

    /* Full-width search underneath */
    .mobile-search {
        grid-area: search;
        display: block;
        width: 100%;
    }

    .mobile-search input {
        height: 46px;
        padding-left: 1rem;
        padding-right: 3.2rem;
        font-size: 0.92rem;
    }

    .mobile-search button {
        width: 38px;
        height: 38px;
        right: 4px;
    }

    /* Mobile header icons */
    .header-icons {
        grid-area: icons;
        justify-self: end;
        gap: 0.75rem;
    }

    .header-icons a {
        font-size: 1.3rem;
    }

    .cart-count {
        top: -7px;
        right: -9px;
    }
}

/* Extra-small phones */
@media (max-width: 420px) {

    .header-main-row {
        column-gap: 0.5rem;
    }

    .mobile-menu-btn {
        width: 38px;
        height: 38px;
        font-size: 1.45rem;
    }

    .header-main-row .logo {
        font-size: 1.05rem;
    }

    .header-main-row .logo .logo-das {
        font-size: 1.45rem;
    }

    .header-icons {
        gap: 0.6rem;
    }

    .header-icons a {
        font-size: 1.18rem;
    }
}
/* ==================================================
   FINAL MOBILE HEADER CORRECTION
================================================== */

.mobile-menu-btn,
.mobile-search {
    display: none;
}

.header-main-row {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding-top: 1rem;
    padding-bottom: 1rem;
}

.desktop-search {
    flex: 1;
}

.header-icons {
    display: flex;
    align-items: center;
    gap: 1rem;
    flex-shrink: 0;
}

/* Mobile side-menu styling */
.mobile-category-offcanvas {
    width: min(86vw, 360px) !important;
}

.mobile-category-offcanvas .offcanvas-header {
    padding: 1rem 1.2rem;
    border-bottom: 1px solid var(--line);
}

.mobile-category-offcanvas .offcanvas-body {
    padding: 0;
}

.mobile-menu-logo {
    display: inline-flex;
    align-items: baseline;
    color: var(--accent);
    font-size: 1.35rem;
    font-weight: 800;
}

.mobile-logo-das {
    color: var(--ink);
    font-size: 1.65rem;
}

.mobile-menu-heading {
    padding: 1rem 1.2rem 0.6rem;
    color: var(--muted);
    font-size: 0.8rem;
    font-weight: 700;
    text-transform: uppercase;
}

.mobile-category-list {
    display: flex;
    flex-direction: column;
}

.mobile-category-list a {
    display: flex;
    align-items: center;
    gap: 0.8rem;
    min-height: 50px;
    padding: 0.75rem 1.2rem;
    border-bottom: 1px solid var(--line);
    color: var(--ink);
    font-size: 0.95rem;
    font-weight: 500;
}

.mobile-category-list a > i:first-child {
    width: 23px;
    color: var(--accent);
    text-align: center;
}

.mobile-category-list a:hover {
    color: var(--accent);
    background: var(--soft);
}

.mobile-menu-arrow {
    margin-left: auto;
    color: #aab1bc;
    font-size: 0.75rem;
}

.mobile-support-links {
    padding: 1rem;
    background: var(--soft);
}

.mobile-support-links > a {
    display: flex;
    align-items: center;
    gap: 0.8rem;
    margin-bottom: 0.65rem;
    padding: 0.85rem;
    border: 1px solid var(--line);
    border-radius: 10px;
    background: #fff;
    color: var(--ink);
}

.mobile-support-links > a > i {
    color: var(--accent);
    font-size: 1.2rem;
}

.mobile-support-links strong,
.mobile-support-links small {
    display: block;
}

.mobile-support-links small {
    margin-top: 2px;
    color: var(--muted);
    font-size: 0.75rem;
}

.mobile-support-links .mobile-whatsapp-support > i {
    color: #128c4b;
}

/* ==================================================
   PHONE LAYOUT
================================================== */

@media (max-width: 767px) {

    /* Hide desktop category row */
    .cat-nav {
        display: none !important;
    }

    /* Main header layout */
    .header-main-row {
        display: grid !important;
        grid-template-columns: auto minmax(0, 1fr) auto;
        grid-template-areas:
            "menu logo icons"
            "search search search";
        align-items: center;
        column-gap: 0.65rem;
        row-gap: 0.8rem;
        padding-top: 0.8rem;
        padding-bottom: 0.85rem;
    }

    /* Hamburger */
    .mobile-menu-btn {
        grid-area: menu;
        display: inline-flex !important;
        align-items: center;
        justify-content: center;
        width: 42px;
        height: 42px;
        padding: 0;
        border: 1px solid var(--line);
        border-radius: 50%;
        background: #fff;
        color: var(--ink);
        font-size: 1.6rem;
        line-height: 1;
    }

    /* Logo */
    .header-main-row .logo {
        grid-area: logo;
        justify-self: start;
        font-size: 1.2rem;
        white-space: nowrap;
    }

    .header-main-row .logo .logo-das {
        font-size: 1.65rem;
    }

    /* Prevent duplicated search */
    .desktop-search {
        display: none !important;
    }

    .mobile-search {
        grid-area: search;
        display: block !important;
        width: 100%;
    }

    .mobile-search input {
        width: 100%;
        height: 46px;
        padding-left: 1rem;
        padding-right: 3.2rem;
        font-size: 0.92rem;
    }

    .mobile-search button {
        right: 4px;
        width: 38px;
        height: 38px;
    }

    /* Icons */
    .header-icons {
        grid-area: icons;
        display: flex !important;
        justify-self: end;
        align-items: center;
        gap: 0.7rem;
    }

    .header-icons a {
        font-size: 1.25rem;
    }

    /* Show a compact mobile top bar */
    .topbar {
        display: block !important;
        padding: 0.4rem 0;
    }

    .topbar-inner {
        display: flex !important;
        flex-direction: column;
        align-items: stretch;
        gap: 0.45rem;
        min-height: auto;
    }

    .topbar-right {
        order: 1;
        display: flex !important;
        width: 100%;
        justify-content: flex-end;
    }

    .topbar-left {
        order: 2;
        display: flex !important;
        width: 100%;
        justify-content: center;
        gap: 1rem;
    }

    /* Hide less-important mobile top-bar links */
    .topbar-left > .topbar-item {
        display: none !important;
    }

    /* Keep only WhatsApp and Live Support */
    .topbar-left > .whatsapp-link,
    .topbar-left > .live-support-link {
        display: inline-flex !important;
    }
}

@media (max-width: 420px) {

    .header-main-row {
        column-gap: 0.45rem;
    }

    .mobile-menu-btn {
        width: 38px;
        height: 38px;
        font-size: 1.4rem;
    }

    .header-main-row .logo {
        font-size: 1rem;
    }

    .header-main-row .logo .logo-das {
        font-size: 1.4rem;
    }

    .header-icons {
        gap: 0.55rem;
    }

    .header-icons a {
        font-size: 1.15rem;
    }
}