/* =========================
   RESET
========================= */
*,
*::before,
*::after { box-sizing: border-box;}
* { margin: 0;}
img { display: block;width: 100%; }
button, input { font: inherit;}
a { text-decoration: none; color: inherit;}
ul { list-style: none;}

/* =========================
   VARIABLES
========================= */
:root {
  --bg: #ffffff;
  --surface: #f8fafc;
  --surface-hover: #f1f5f9;
  --text: #0f172a;
  --muted: #64748b;
  --primary: #0099ff;
  --primary-hover: #21b9f1;
  --border: #e2e8f0;
  --radius-sm: 12px;
  --radius-md: 18px;
  --radius-lg: 28px;
  --shadow-sm: 0 1px 2px rgba(0,0,0,.04);
  --shadow-md: 0 8px 24px rgba(15,23,42,.08);
  --container: min(1200px, 92%);
  --transition: all 0.3s ease;
}

/* =========================
   GLOBAL
========================= */
html { font-size:16px }
body { font-family: "Inter", system-ui, sans-serif; font-size:1rem; background: var(--bg); color: var(--text); line-height: 1.5;}
.container { width: var(--container); margin-left: auto; margin-right: auto;}
.section { padding: 3rem 0;}
/* =========================
   TYPOGRAPHY
========================= */
h1, h2, h3, h4 { line-height:1.1; margin-bottom:1rem; }
h1 { font-size:2rem; font-weight:700; letter-spacing:-2px; }
h2 { font-size:1.5rem;}
h3 { font-size:1rem;}
h4 { font-size:1rem;}
p { color:var(--muted); }

/* =========================
   BUTTONS
========================= */
.btn { display:inline-flex; align-items:center; justify-content:center; border:none; cursor:pointer; 
      padding:.9rem 1.4rem; border-radius:14px; transition:transform var(--transition), background var(--transition); }
.btn:hover { transform:translateY(-2px); }
.btn-primary { background:var(--primary); color:white; }
.btn-primary:hover { background:var(--primary-hover); }
.btn-secondary { background:var(--surface); color:var(--text); border:1px solid var(--border); }
.btn-secondary:hover { background:var(--surface-hover); transform:translateY(-2px); }

/* =========================
   HEADER
========================= */
.site-header { position:sticky; top:0; z-index:999; background:rgba(255,255,255,.85); -webkit-backdrop-filter:blur(12px); 
              backdrop-filter:blur(12px); border-bottom:1px solid rgba(226,232,240,.7); transition:var(--transition); }
.nav-wrapper { height:80px; display:flex; align-items:center; justify-content:space-between; gap:1rem; }

/* =========================
   DESKTOP NAV
========================= */
.main-nav { display:flex; }
.nav-list { display:flex; align-items:center; gap:2rem; list-style:none; }
.nav-list li { position:relative; }
.nav-list a { display:flex; align-items:center; height:80px; color:var(--muted); font-weight:500; transition: var(--transition); }
.nav-list a:hover { color:var(--text); }

/* =========================
   DROPDOWN
========================= */
.has-dropdown { position:relative; }
.dropdown-menu { position:absolute; top:calc(100% - 10px); left:0; min-width:220px; padding:.75rem; list-style:none; background:white; 
                border:1px solid var(--border); border-radius:18px; display:grid; gap:.25rem; opacity:0; visibility:hidden; transform:translateY(10px); transition: var(--transition); box-shadow:0 10px 40px rgba(0,0,0,.08); }
.dropdown-menu li a { height:auto; padding:.2rem .5rem; border-radius:12px; }
.dropdown-menu li a:hover { background:var(--surface); }
.has-dropdown:hover .dropdown-menu { opacity:1; visibility:visible; transform:translateY(0); }

/* =========================
   NAV ACTIONS
========================= */
.nav-actions { display:flex; align-items:center; gap:.75rem; }

/* =========================
   SEARCH BOX
========================= */
.search-box { position:relative; display:flex; align-items:center; width:260px; height:48px; overflow:hidden; background:white; border:1px solid var(--border); border-radius:14px; transition:width .35s ease; }
.search-box input { width:100%; border:none; outline:none; background:transparent; padding-left:1rem; color:var(--text); }
.search-box input::placeholder { color:var(--muted); }

/* =========================
   ICON BUTTON
========================= */
.icon-btn { appearance:none; -webkit-appearance:none; border:none; outline:none; background:transparent; width:48px; height:48px; display:flex; 
           align-items:center; justify-content:center; flex-shrink:0; cursor:pointer; padding:0; color:var(--text); transition:background .2s ease, color .2s ease; }
.icon-btn:hover { background:rgba(0,0,0,.04); }
.icon-btn svg { width:18px; height:18px; display:block; }
.search-box .icon-btn { border-radius:12px; }
.search-box .icon-btn:hover { background:var(--surface); }

/* =========================
   HAMBURGER
========================= */
.hamburger { width:48px; height:48px; display:none; border:none; background:transparent; cursor:pointer; position:relative; }
.hamburger span { position:absolute; left:12px; width:24px; height:2px; background:var(--text); transition: var(--transition); }
.hamburger span:nth-child(1) { top:16px; }
.hamburger span:nth-child(2) { top:23px; }
.hamburger span:nth-child(3) { top:30px; }
.hamburger.active span:nth-child(1) { top:23px; transform:rotate(45deg); }
.hamburger.active span:nth-child(2) { opacity:0; }
.hamburger.active span:nth-child(3) { top:23px; transform:rotate(-45deg); }

/* =========================
   MOBILE MENU
========================= */
.mobile-menu { display:none; background:white; border-top:1px solid var(--border); }
.mobile-menu.active { display:block; }
.mobile-menu ul { list-style:none; }
.mobile-menu li { border-bottom:1px solid var(--border); }
.mobile-menu a,.mobile-menu summary { display:block; padding:1rem 1.5rem; color:var(--text); cursor:pointer; font-weight:500; }
.mobile-menu details summary { list-style:none; }
.mobile-menu details summary::-webkit-details-marker { display:none; }
.mobile-submenu { padding-left:1rem; }

/* =========================
   RESPONSIVE
========================= */
@media (max-width:900px) { 
    .main-nav { display:none; } 
    .hamburger { display:block; } 
    .search-box { width:150px; } 
}

/* =========================
   DROPDOWN LINK
========================= */
.has-dropdown > a { display:flex; align-items:center; gap:.45rem; }
.dropdown-icon { display:flex; align-items:center; justify-content:center; width:18px; height:18px; flex-shrink:0; 
                opacity:.55; transition:transform .2s cubic-bezier(.4,0,.2,1); }
.dropdown-icon svg { display:block; }
.has-dropdown:hover .dropdown-icon { transform:rotate(180deg); opacity:1; }

/* =========================
   MOBILE DETAILS
========================= */
.mobile-menu details { width: 100%;}
.mobile-menu summary { list-style: none;}
.mobile-menu summary::-webkit-details-marker { display: none;}
.mobile-menu summary { display:flex; align-items:center; justify-content:space-between; padding:1rem 1.5rem; 
                      cursor:pointer; font-weight:500; }
.mobile-dropdown-icon { display:flex; align-items:center; justify-content:center; width:20px; height:20px; 
                       flex-shrink:0; transition:transform .25s ease; }
.mobile-dropdown-icon svg { display:block; }
.mobile-menu details[open] .mobile-dropdown-icon { transform:rotate(180deg); }
.mobile-submenu { list-style:none; padding:0 0 1rem 1rem; }
.mobile-submenu li a { display:block; padding:.85rem 1.5rem; color:var(--muted); border-radius:12px; }
.mobile-submenu li a:hover { background:var(--surface); color:var(--text); }

/* =========================
   HERO
========================= */
.hero-section { padding: 2rem;}
.hero-grid { display:grid; gap:4rem; align-items:center;}
.hero-title { font-size: 3rem; font-weight: 700; line-height: 1.1;}
.hero-content p { max-width:600px; margin:1.5rem 0 2rem; font-size:1.1rem; }
.hero-buttons { display:flex; gap:1rem; flex-wrap:wrap; }
.hero-image img { border-radius:var(--radius-lg); box-shadow: 0 8px 24px rgba(15,23,42,.08); aspect-ratio:1/1; object-fit:cover; }
.badge { display:inline-block; margin-bottom:1.5rem; background:#dbeafe; color:#1d4ed8; padding:.45rem .9rem; 
        border-radius:999px; font-size:.85rem; font-weight:600; }
@media (min-width:768px) { 
    .hero-grid { grid-template-columns:1.1fr .9fr; } 
}
/* =========================
   PRODUCT SECTION
========================= */
.product-section { padding: 1rem;}
.section-heading { margin-bottom: 2rem;}

/* =========================
   PRODUCT GRID
========================= */
.product-grid { display:grid; gap:2rem; grid-template-columns: repeat( auto-fill, minmax(260px, 260px)); justify-content: start;}

/* =========================
   PRODUCT CARD
========================= */
.product-card { display:flex; flex-direction:column; height:100%; overflow:hidden; background:white; 
               border:1px solid var(--border); border-radius:24px; transition:transform .3s ease, box-shadow .3s ease, border-color .3s ease; position:relative; }
.product-card:hover { transform:translateY(-6px); border-color:rgba(37,99,235,.15); 
        box-shadow:0 20px 50px rgba(15,23,42,.08); }

.product-image { position:relative; overflow:hidden; aspect-ratio:1/1; background:var(--surface); }
.product-image img { width:100%; height:100%; object-fit:cover; transition:transform .5s ease; }
.product-card:hover .product-image img { transform:scale(1.05); }
.product-badge { position:absolute; top:1rem; left:1rem; background:white; color:var(--text); padding:.45rem .75rem; 
                border-radius:999px; font-size:.75rem; font-weight:700; box-shadow:0 4px 12px rgba(0,0,0,.08); }

.product-content { display:flex; flex-direction:column; flex:1; padding:1.25rem; }
.product-category { display:inline-flex; width:fit-content; color:var(--primary); font-size:.8rem; font-weight:700; 
                   margin-bottom:.85rem; text-transform:uppercase; letter-spacing:.04em; }
.product-title { font-size:1.1rem; line-height:1.4; margin-bottom:.75rem; }
.product-title a { color:var(--text); }
.product-title a:hover { color:var(--primary); }
.product-description { font-size:.95rem; line-height:1.7; margin-bottom:1.25rem; color:var(--muted); }
.product-meta { display:flex; align-items:center; justify-content:space-between; gap:1rem; margin-bottom:1.5rem; }
.product-rating { display:flex; align-items:center; gap:.5rem; }
.stars { color:#f59e0b; letter-spacing:.05em; font-size:.9rem; }
.rating-text { font-size:.9rem; color:var(--muted); }
.rating-text span { opacity:.7; }
.product-stock { font-size:.8rem; font-weight:600; color:#16a34a; }
.product-footer { display:flex; align-items:center; justify-content:space-between; gap:1rem; margin-top:auto; }
.price { font-weight:700; letter-spacing:-.03em; }
.btn-view-product { padding:.5rem 1rem; background:var(--primary); font-size: .875rem; color:white; }
.btn-view-product:hover { background:var(--primary-hover); }

/* =========================
   NEWSLETTER
========================= */
.newsletter { padding-bottom:5rem; }
.newsletter-box { display:grid; gap:2rem; background:var(--surface); border-radius:var(--radius-lg); padding:3rem; }
.newsletter-form { display:flex; gap:1rem; flex-wrap:wrap; }
.newsletter-form input { flex:1; min-width:220px; padding:1rem; border:1px solid var(--border); border-radius:14px; 
                        background:white; }
@media (min-width:768px) { .newsletter-box { grid-template-columns:1fr auto; align-items:center; } }

/* =========================
   INTRO SECTION
========================= */
.intro-section { padding:2rem; }
.intro-box { margin-inline:auto; text-align:center; padding:2rem; background:linear-gradient(to bottom,#ffffff,#f8fafc); 
            border:1px solid var(--border); border-radius:32px; box-shadow:0 10px 40px rgba(0,0,0,.04); position:relative; overflow:hidden; }
.intro-box::before { content:""; position:absolute; width:280px; height:280px; background:rgba(37,99,235,.06); 
         border-radius:999px; top:-120px; right:-120px; }
.section-badge { display:inline-flex; align-items:center; justify-content:center; padding:.45rem .9rem; 
                margin-bottom:1.25rem; border-radius:999px; background:#dbeafe; color:#1d4ed8; font-size:.8rem; font-weight:700; letter-spacing:.08em; }
.intro-box h2 { margin-bottom:1.5rem; font-size:clamp(2rem,4vw,3rem); line-height:1.1; position:relative; }
.intro-box p { position:relative; font-size:1.05rem; line-height:1.9; color:var(--muted); }
@media (max-width:768px) { 
    .intro-box { padding:2rem 1.5rem; border-radius:24px; } 
    .intro-box p { font-size:1rem; line-height:1.8; }
}

/* =========================
   BRANDS SECTION
========================= */
.brands-section { padding:3rem; border-top:1px solid var(--border); }
.brands-heading { text-align:center; max-width:700px; margin:0 auto 3rem; }
.brands-heading h2 { margin-bottom:1rem; }
.brands-row { display:flex; align-items:center; justify-content:center; flex-wrap:wrap; gap:4rem; }
.brand-logo { display:flex; align-items:center; justify-content:center; opacity:.45; transition:opacity .25s ease, transform .25s ease; }
.brand-logo img { height:38px; width:auto; object-fit:contain; /* filter:grayscale(100%); */ transition:filter .25s ease, transform .25s ease; }
.brand-logo:hover { opacity: .95; transform: translateY(-2px);}
.brand-logo:hover img { filter: grayscale(0%) contrast(100%); transform: scale(1.03);}

/* =========================
   FOOTER
========================= */
.site-footer { padding: 2rem 0 1rem; background: #f8fafc; border-top: 1px solid var(--border);}
/* =========================
   GRID
========================= */
.footer-grid { display:grid; grid-template-columns:1.5fr 1fr 1fr 1fr; gap:2rem; padding-bottom:2rem }

/* =========================
   COMPANY
========================= */
.footer-company { max-width:380px; } 
.footer-logo { display:inline-block; margin-bottom:.5rem;} 
.footer-company p { font-size:.875rem; color:var(--muted); margin-bottom:.5rem }

/* =========================
   FOOTER INFO
========================= */
.footer-info { display:grid; margin-bottom:1rem }
.footer-info-item { display:grid; gap:.35rem }
.footer-info-label { font-size:.875rem; font-weight:700; letter-spacing:.05em; color:var(--text) }
.footer-info-item p, .footer-info-item a { font-size:.875rem; color:var(--muted); line-height:1.7; transition:color .25s ease }
.footer-info-item a:hover { color:var(--primary) }

/* =========================
   SOCIALS
========================= */
.footer-socials { display:flex; align-items:center; gap:1rem }
.footer-socials a { color:var(--muted); font-size: .9rem; transition:color .25s ease }
.footer-socials a:hover { color:var(--primary) }

/* =========================
   MENUS
========================= */
.footer-menu { font-size: .9rem;}
.footer-menu h4 { margin-bottom:1rem; font-weight:700 }
.footer-menu ul { padding:0; list-style:none; display:grid; gap:.5rem }
.footer-menu a { color:var(--muted); transition:color .25s ease, transform .25s ease }
.footer-menu a:hover { color:var(--text); transform:translateX(2px) }

/* =========================
   BOTTOM
========================= */
.footer-bottom { padding-top:1rem; font-size: .875rem; border-top:1px solid var(--border); display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap }
.footer-bottom p { color:var(--muted) }
/* LINKS */
.footer-bottom-links { display:flex; align-items:center;}
.footer-bottom-links a { color:var(--muted) }
.footer-bottom-links a:hover { color:var(--text) }

/* =========================
   RESPONSIVE
========================= */
@media (max-width:900px) {
.footer-grid { grid-template-columns:1fr 1fr; gap:2.5rem }}
@media (max-width:640px) { 
    .footer-grid { grid-template-columns:1fr }
    .footer-bottom { flex-direction:column; align-items:flex-start }
}

.category-hero { padding: 1rem 0 2rem;}
.category-hero-content { /* max-width: 700px; */}
.category-hero h1 { line-height:1.05 }
.category-hero p { font-size:1.05rem; line-height:1.8 }
.category-toolbar { padding:.5rem }
.toolbar-wrapper { display:flex; align-items:center; justify-content:space-between; gap:2rem; flex-wrap:wrap }
.toolbar-left { display:flex; align-items:center; gap:1rem; flex-wrap:wrap }
.product-count { color:var(--muted); font-size:.95rem }
.filter-chips { display:flex; align-items:center; gap:.75rem; flex-wrap:wrap }
.filter-chip { border:none; background:var(--surface); color:var(--text); padding:.7rem 1rem; border-radius:999px; cursor:pointer; transition:.25s ease }
.filter-chip:hover { background:rgba(37,99,235,.1); color:var(--primary) }
/* ACTIVE */
.filter-chip.active { background:var(--primary); color:white }
.sort-select { height:46px; padding:0 1rem; border:1px solid var(--border); border-radius:14px; background:white; color:var(--text); outline:none }

/* =========================
   BREADCRUMB SECTION
========================= */
.breadcrumb-section { padding: 1rem 0 1rem;}
.breadcrumb ol { padding:0; display:flex; align-items:center; flex-wrap:wrap; gap:.75rem; list-style:none }
.breadcrumb li { display:flex; align-items:center; font-size:.9rem; color:var(--muted) }
/* LINKS */
.breadcrumb a { color:var(--muted); transition:color .25s ease }
.breadcrumb a:hover { color:var(--text) }
/* SEPARATOR */
.breadcrumb li:not(:last-child)::after { content:"/"; margin-left:.75rem; opacity:.5 }
/* ACTIVE */
.breadcrumb li[aria-current="page"] { color:var(--text); font-weight:600 }


/* ===============================
   PAGINATION CONTAINER
================================= */
.pagination-container { padding: 1rem; display:flex; justify-content:center; }
.pagination-list { background: #f8fafc; display:flex;gap:8px; padding:8px 15px; border-radius:12px; border:1px solid var(--border);  align-items:center; list-style:none;  }
.pagination-link { width: 40px; height: 40px; display:flex; font-weight: 700; color:#212529; text-decoration:none; align-items:center; justify-content:center; border-radius:50%; transition:all 0.3s ease; }
.pagination-link.active { background-color:var(--primary); color: white; border-color: var(--primary);}
.pagination-link:hover:not(.active) { background: var(--surface);}
.pagination-link.prev,.pagination-link.next { width:auto; padding:0 20px; border-radius:30px; text-transform:uppercase; letter-spacing:1px; }
.pagination-link.prev span,.pagination-link.next span { margin:0 5px; }
@media (max-width:480px) { .pagination-link.prev span,.pagination-link.next span { display:none; } .pagination-link.prev,.pagination-link.next { width:40px; padding:0; } }

/* =========================
   SUPPORT SECTION
========================= */
.support-section { padding: 1rem;}
.support-hero-content { margin-bottom: 2rem;}
.support-hero-content h1 { line-height:1.05; letter-spacing:-.04em; margin-bottom:1.25rem; color:var(--text) }
.support-hero-content p { color: var(--muted);}

.support-content h2,
.support-content h3,
.support-content h4 { color:var(--text); line-height:1.2; letter-spacing:-.02em }
.support-content h2 { margin:3rem 0 1rem }
.support-content h3 { margin:2rem 0 .85rem }
.support-content h4 { margin:1.5rem 0 .75rem }
.support-content p { margin-bottom:.5rem; color:var(--muted) }
.support-content a { color:var(--primary); text-decoration:none }
.support-content a:hover { text-decoration:underline }
.support-content ul, .support-content ol { padding-left:1.25rem; margin-bottom:1.5rem; display:grid; gap:.75rem }
.support-content li { color:var(--muted); line-height:1.8 }
.support-content table { width:100%; border-collapse:collapse; margin:2rem 0 }
.support-content th, .support-content td { padding:1rem; border:1px solid var(--border); text-align:left }
.support-content th { background:var(--surface) }
.support-content img { width:100%; border-radius:24px; margin:2rem 0 }
.support-content hr { border:none; height:1px; background:var(--border); margin:3rem 0 }

/* =========================
   MOBILE
========================= */
@media (max-width:768px) {
.support-section { padding:2rem 0 4rem }
.support-hero-content { margin-bottom:2rem }
}

/* =========================
   CONTACT SECTION
========================= */
.contact-section { padding: 1rem 0 2rem;}
.contact-hero { max-width:960px; margin-bottom:2rem }
.contact-hero h1 { max-width:100%; line-height:1.05; letter-spacing:-.04em }
.contact-hero p { max-width:720px; color:var(--muted) }
.contact-layout { display:grid; grid-template-columns:40% 60%; gap:3rem; align-items:start } 

.contact-info { display: grid; gap: 1rem; }
.contact-card { padding: 1rem; background:white; border:1px solid var(--border); border-radius:24px }
.contact-card h3 { margin-bottom:.75rem; text-transform:uppercase;  }
.contact-card p, .contact-card a { color:var(--muted) }
.contact-label { display:inline-block; margin-bottom:.5rem; font-size: .875rem; font-weight:700; text-transform:uppercase; letter-spacing:.05em; 
                color:var(--text) }
/* =========================
   FORM WRAPPER
========================= */
.contact-form-wrapper { padding: 1.5rem; background:white; border:1px solid var(--border); border-radius:32px; 
                       box-shadow:0 10px 40px rgba(0,0,0,.03) }
.contact-form { display:grid; gap:.5rem }
.form-grid { display:grid; grid-template-columns:1fr 1fr; gap:1.5rem }
.form-group { display:grid; gap:1rem }
.form-group label { font-weight:600 }
.form-group input, .form-group textarea { width:100%; border:1px solid var(--border); background:var(--surface); border-radius:18px; 
                      padding:.75rem 1.1rem; outline:none; transition:border-color .25s ease, background .25s ease }
.form-group input:focus, .form-group textarea:focus { border-color:rgba(37,99,235,.4); background:white }
.form-group textarea { resize:vertical }
.btn-submit { width: fit-content; justify-self: start; background:var(--primary); color:white; }
.btn-submit:hover { background:var(--primary-hover); }

.form-group input::placeholder { font-size: .875rem; color:var(--muted); }
/* CAPTCHA */
.captcha-inline {  margin:0 0 1rem; display:flex; align-items:center; gap:20px; flex-wrap:wrap;}
.captcha-image { width:180px; height:60px; border:1px solid #ddd; border-radius:32px; background:#fff; }
.captcha-input { flex:1; min-width:160px; padding:12px; border:1px solid #ddd; border-radius:32px; }
.captcha-input:focus { outline:none; border-color:#222; }
.captcha-refresh { width:46px; height:46px; border:none; border-radius:32px; background:#111; color:#fff; font-size:20px; cursor:pointer; }
.captcha-refresh:hover { opacity:.9; }
@media (max-width:768px) { 
    .captcha-inline { flex-direction:column; align-items:stretch; } 
    .captcha-image { width:100%; max-width:220px; } 
    .captcha-refresh { width:100%; } 
}

@media (max-width: 900px) {
    .contact-layout { grid-template-columns: 1fr;}
}
@media (max-width: 640px) {
    .form-grid { grid-template-columns: 1fr;}
    .contact-form-wrapper { padding: 1.5rem;}
}

.contact-map { margin-top:1rem; border-radius:20px; overflow:hidden; border:1px solid var(--border); }
/* =========================
   PRODUCT SINGLE
========================= */
.product-single-section { padding:2rem 0 5rem }
.product-single { display:grid; grid-template-columns:1fr 480px; gap:4rem; align-items:start }
/* =========================
   GALLERY
========================= */
.product-gallery { position: sticky; top: 110px;}
.product-main-image { overflow:hidden; border-radius:32px; background:var(--surface); border:1px solid var(--border) }
.product-main-image img { width:100%; aspect-ratio:1 / 1; object-fit:cover; display:block }
.product-thumbs { display:flex; gap:1rem; margin-top:1rem }
.product-thumb { width:88px; height:88px; overflow:hidden; border:1px solid transparent; border-radius:20px; background:var(--surface); cursor:pointer; padding:0; transition:.25s ease }
.product-thumb img { width:100%; height:100%; object-fit:cover }
.product-thumb.active { border-color:rgba(37,99,235,.35) }

/* =========================
   INFO
========================= */
.product-info { max-width: 480px;}
.product-single-category { display:inline-flex; margin-bottom:1rem; color:var(--primary); font-weight:700; text-transform:uppercase; 
                          letter-spacing:.05em }
.product-info h1 { line-height:1.05; letter-spacing:-.04em; margin-bottom:1.5rem }
.product-single-rating { display:flex; align-items:center; gap:.75rem; margin-bottom:1.5rem }
.product-single-rating span { color:var(--muted) }
.product-single-price { margin-bottom:1.5rem }
.product-single-price span { font-size:2rem; font-weight:700; letter-spacing:-.03em }
.product-single-overview { line-height:1.9; color:var(--muted); margin-bottom:2rem }
.product-single-meta { display:grid; gap:1rem; margin-bottom:2rem }
.product-single-meta div { color:var(--muted) }
.product-single-meta span { display:block; margin-bottom:.25rem; font-size:.8rem; font-weight:700; text-transform:uppercase; 
                           letter-spacing:.05em; color:var(--text) }
.product-single-actions { display:flex; align-items:center; gap:1rem }
/* ACTIONS */

/* =========================
   DESCRIPTION
========================= */
.product-description-section { margin-top:5rem }
.product-description-section h2 { margin-bottom:1.5rem; font-size:2rem }
.product-description-content p { margin-bottom:1.5rem; color:var(--muted) }
.product-description-content ul, .product-description-content ol { padding-left:1.25rem; margin-bottom:1.5rem; display:grid; gap:.75rem }
.product-description-content li { color:var(--muted) }
.product-description-content table { width:100%; border-collapse:collapse; margin:2rem 0 }
.product-description-content th,
.product-description-content td { padding:1rem; border:1px solid var(--border); text-align:left }
.product-description-content th { background:var(--surface) }
/* =========================
   MOBILE
========================= */
@media (max-width:1024px) {
    .product-single { grid-template-columns:1fr; gap:3rem }
    .product-gallery { position:static }
    .product-info { max-width:100% }
}
@media (max-width:640px) {
    .product-thumb { width:72px; height:72px }
    .product-single-actions { flex-direction:column }
    .buy-now-btn { width:100% }
}

/* =========================
   404
========================= */
.error-section { display:flex; align-items:center; min-height: 50vh; padding:4rem 0; }
.error-wrapper { max-width:760px; margin-left: auto; margin-right: auto; text-align:center; }
.error-code { display:inline-block; margin-bottom:1.5rem; font-size:clamp(5rem,12vw,10rem); font-weight:700; line-height:1; letter-spacing:-.08em; background:#21b9f1; -webkit-background-clip:text; -webkit-text-fill-color:transparent; }
.error-wrapper h1 { margin-bottom:1rem; font-size: clamp(1rem, 2.5vw, 2rem); line-height:1.05; letter-spacing:-.04em; }
.error-wrapper p { max-width:620px; margin:0 auto 2.5rem; font-size:1.08rem; line-height:1.9; color:var(--muted); }
.error-actions { display:flex; align-items:center; justify-content:center; gap:1rem; flex-wrap:wrap; }

/* =========================
   MOBILE
========================= */
@media (max-width:640px) {
    .error-actions { flex-direction:column; }
}

/* ===============================
   Alert Base
================================= */
.alert { position:relative; padding:16px 18px; margin:0 0 20px 0; border-radius:10px; border:1px solid transparent; 
        font-size:15px; line-height:1.6; box-shadow:0 4px 12px rgba(0,0,0,.04); }
.alert-success { background:#ecfdf3; border-color:#b7ebc6; color:#166534; }
.alert-danger { background:#fef2f2; border-color:#fecaca; color:#991b1b; }
.alert .close { position:absolute; top:10px; right:12px; border:none; background:transparent; font-size:22px; line-height:1; 
        cursor:pointer; color:inherit; opacity:.65; padding:0; }
.alert .close:hover { opacity:1; }
.alert ul { margin:10px 0 0 18px; padding:0; }
.alert li { margin-bottom:6px; }
.alert strong { display:block; margin-bottom:6px; font-weight:600; }
@media (max-width:768px) { .alert { padding:14px 15px; font-size:14px; } .alert .close { font-size:20px; top:8px; right:10px; } }