:root {
    --sk-navy: #1a1a2e;
    --sk-navy-2: #16213e;
    --sk-navy-3: #0f3460;
    --sk-orange: #ff7801;
    --sk-orange-hover: #ff6500;
    --sk-text: #1e293b;
    --sk-muted: #64748b;
    --sk-bg: #f5f7fa;
    --sk-surface: #ffffff;
    --sk-line: #e2e8f0;
    --sk-radius: 12px;
    --sk-shadow-sm: 0 1px 3px rgba(0,0,0,.06);
    --sk-shadow: 0 4px 16px rgba(0,0,0,.08);
    --sk-shadow-lg: 0 10px 40px rgba(0,0,0,.12);
}
* { box-sizing: border-box; }
html, body { background: var(--sk-bg); color: var(--sk-text); }
body { font-family: 'Inter', system-ui, -apple-system, sans-serif; -webkit-font-smoothing: antialiased; margin: 0; }
a { color: var(--sk-orange); text-decoration: none; }
a:hover { color: var(--sk-orange-hover); }

.btn-orange {
    background: linear-gradient(135deg, var(--sk-orange) 0%, var(--sk-orange-hover) 100%);
    color: #fff;
    border: none;
    font-weight: 700;
    box-shadow: 0 4px 16px rgba(255,120,1,.35);
    transition: transform .15s ease, box-shadow .15s ease, filter .15s ease;
}
.btn-orange:hover, .btn-orange:focus { color:#fff; filter: brightness(1.04); transform: translateY(-1px); box-shadow: 0 6px 22px rgba(255,120,1,.45); }
.btn-orange:disabled { opacity:.55; transform:none; box-shadow:none; cursor:not-allowed; }

.btn-outline-light { color:#fff; border-color: rgba(255,255,255,.6); }
.btn-outline-light:hover { background: rgba(255,255,255,.08); color:#fff; border-color:#fff; }

/* ── Header ───────────────────────────────────────────── */
.sk-header { position: sticky; top: 0; z-index: 1030; background: linear-gradient(135deg, var(--sk-navy) 0%, var(--sk-navy-2) 50%, var(--sk-navy-3) 100%); border-bottom: 3px solid var(--sk-orange); box-shadow: 0 4px 20px rgba(10,30,61,.25); }
.sk-topbar { background: rgba(0,0,0,.3); color: rgba(255,255,255,.75); font-size: .8rem; padding: 6px 0; border-bottom: 1px solid rgba(255,255,255,.07); }
.sk-topbar strong { color: var(--sk-orange); }
@media (max-width: 575px) { .sk-topbar { font-size: .7rem; text-align: center; } .sk-topbar .container { justify-content: center !important; } }
.sk-logo { color: #fff !important; font-weight: 800; }
.sk-logo:hover { color: var(--sk-orange) !important; }
.sk-logo-img { height: 42px; width: auto; padding: 4px; border-radius: 8px; border: 2px solid var(--sk-orange); background: rgba(255,255,255,.08); }
.sk-logo-text { color:#fff; font-size: 1.1rem; line-height: 1.2; }
.sk-logo-sub { color: rgba(255,255,255,.55); font-weight: 400; font-size: .7rem; }
.sk-header-phone-label { color: rgba(255,255,255,.55); font-size: .72rem; }
.sk-header-phone { color: var(--sk-orange); font-weight: 800; font-size: .95rem; text-decoration: none; }
.sk-header-phone:hover { color: #ffa94d; }
.sk-header-phone-mobile { display:inline-flex; align-items:center; justify-content:center; width:38px; height:38px; border-radius:50%; background: rgba(255,120,1,.18); color: var(--sk-orange); }
.sk-cart-btn { display:inline-flex; align-items:center; gap:6px; padding: 8px 16px; border-radius: 999px; background: var(--sk-orange); color:#fff; font-weight:700; font-size:.9rem; text-decoration:none; box-shadow: 0 4px 14px rgba(255,120,1,.35); position:relative; }
.sk-cart-btn:hover { color:#fff; filter: brightness(1.06); }
.sk-cart-badge { position: absolute; top: -6px; right: -6px; background:#fff; color: var(--sk-navy); font-size: .7rem; font-weight: 800; min-width: 22px; height:22px; border-radius:11px; display:inline-flex; align-items:center; justify-content:center; box-shadow: 0 2px 8px rgba(0,0,0,.15); padding: 0 6px;}

/* ── Hero ─────────────────────────────────────────────── */
.sk-main { min-height: 60vh; }
.sk-hero { background: linear-gradient(135deg, var(--sk-navy) 0%, var(--sk-navy-2) 50%, var(--sk-navy-3) 100%); color:#fff; padding: 64px 0 84px; position:relative; overflow:hidden; }
.sk-hero::before { content:""; position:absolute; inset:0; background-image: radial-gradient(circle at 20% 20%, rgba(255,120,1,.18) 0%, transparent 40%), radial-gradient(circle at 90% 80%, rgba(255,120,1,.12) 0%, transparent 35%); pointer-events:none; }
.sk-hero > .container { position: relative; z-index: 1; }
.sk-hero-badge { display:inline-block; background: rgba(255,120,1,.18); color: var(--sk-orange); padding: 6px 14px; border-radius: 999px; font-weight:700; font-size:.82rem; letter-spacing:.02em; border:1px solid rgba(255,120,1,.3); }
.sk-hero-title { font-size: clamp(2rem, 4.4vw, 3.2rem); font-weight: 800; line-height: 1.1; margin: 18px 0 12px; }
.sk-hero-sub { color: rgba(255,255,255,.78); font-size: 1.05rem; max-width: 560px; line-height: 1.65; margin-bottom: 24px; }
.sk-hero-cta { display:flex; flex-wrap:wrap; gap:12px; margin-bottom: 28px; }
.sk-hero-trust { display:flex; flex-wrap:wrap; gap: 22px; color: rgba(255,255,255,.75); font-size:.88rem; }
.sk-hero-trust span i { color: var(--sk-orange); margin-right: 6px; }
.sk-hero-image { background: rgba(255,255,255,.06); padding: 18px; border-radius: 18px; border: 1px solid rgba(255,255,255,.08); box-shadow: 0 25px 60px rgba(0,0,0,.4); }
.sk-hero-image img,
.sk-hero-image video { border-radius: 12px; display:block; width:100%; height:auto; }
.sk-hero-video { background:#0b1d3a; aspect-ratio: 16 / 9; object-fit: cover; }

/* ── Sections ─────────────────────────────────────────── */
.sk-section { padding: 64px 0; }
.sk-section-alt { background: #fff; border-top: 1px solid var(--sk-line); border-bottom: 1px solid var(--sk-line); }
.sk-section-head { text-align:center; margin-bottom: 40px; }
.sk-section-head h2 { font-size: clamp(1.6rem, 3vw, 2.2rem); font-weight: 800; color: var(--sk-navy); margin: 0 0 8px; }
.sk-section-head p { color: var(--sk-muted); margin: 0; font-size: 1.02rem; }

/* ── Product card ─────────────────────────────────────── */
.sk-card { background: var(--sk-surface); border-radius: var(--sk-radius); box-shadow: var(--sk-shadow-sm); border: 1px solid var(--sk-line); overflow: hidden; transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease; height: 100%; display:flex; flex-direction: column; position: relative; }
.sk-card:hover { transform: translateY(-4px); box-shadow: var(--sk-shadow-lg); border-color: rgba(255,120,1,.3); }
.sk-card-pack { border: 2px solid var(--sk-orange); }
.sk-card-pack::after { content:""; position:absolute; inset:0; background: radial-gradient(circle at 80% -20%, rgba(255,120,1,.12), transparent 60%); pointer-events:none; }
.sk-card-badge { position: absolute; top: 14px; left: 14px; background: var(--sk-navy); color: var(--sk-orange); padding: 6px 12px; border-radius: 999px; font-size: .72rem; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; z-index: 2; box-shadow: 0 4px 12px rgba(0,0,0,.2); }
.sk-card-img-link { display:block; }
.sk-card-img { aspect-ratio: 1 / 1; background:#f1f5f9; display:flex; align-items:center; justify-content:center; overflow:hidden; }
.sk-card-img img { width:100%; height:100%; object-fit: cover; transition: transform .35s ease; }
.sk-card:hover .sk-card-img img { transform: scale(1.04); }
.sk-card-body { padding: 20px; flex: 1; display:flex; flex-direction:column; gap: 10px; }
.sk-card-title { font-size: 1.1rem; font-weight: 800; color: var(--sk-navy); margin: 0; line-height: 1.3; }
.sk-card-title a { color: inherit; text-decoration: none; }
.sk-card-title a:hover { color: var(--sk-orange); }
.sk-card-desc { color: var(--sk-muted); font-size: .9rem; margin: 0; line-height: 1.55; }
.sk-card-price { display:flex; align-items: baseline; flex-wrap: wrap; gap: 10px; margin-top: auto; padding-top: 6px; }
.sk-price-now { font-size: 1.7rem; font-weight: 800; color: var(--sk-navy); }
.sk-price-was { color: var(--sk-muted); text-decoration: line-through; font-size: 1rem; }
.sk-price-save { background: #dcfce7; color: #166534; font-weight: 700; font-size: .75rem; padding: 3px 9px; border-radius: 999px; }
.sk-card-add { padding-top: 8px; }
.sk-qty-input { max-width: 72px; text-align: center; font-weight: 700; }

/* ── Feature strip ────────────────────────────────────── */
.sk-feature-strip { background: var(--sk-navy); color: #fff; padding: 38px 0; }
.sk-feat { display:flex; align-items:center; gap: 14px; justify-content: center; }
.sk-feat i { font-size: 1.7rem; color: var(--sk-orange); width: 44px; height: 44px; border-radius: 50%; background: rgba(255,120,1,.15); display:inline-flex; align-items:center; justify-content:center; }
.sk-feat strong { display:block; font-size: 1.05rem; font-weight: 800; }
.sk-feat span { display:block; color: rgba(255,255,255,.6); font-size: .8rem; }

/* ── FAQ ──────────────────────────────────────────────── */
.sk-faq { background: var(--sk-surface); border: 1px solid var(--sk-line); border-radius: var(--sk-radius); padding: 22px 24px; margin-bottom: 16px; box-shadow: var(--sk-shadow-sm); }
.sk-faq h3 { font-size: 1.05rem; color: var(--sk-navy); margin: 0 0 8px; font-weight: 700; }
.sk-faq p { color: var(--sk-muted); margin: 0; font-size: .95rem; line-height: 1.6; }

/* ── Cart / Checkout ──────────────────────────────────── */
.sk-panel { background: var(--sk-surface); border-radius: var(--sk-radius); border: 1px solid var(--sk-line); box-shadow: var(--sk-shadow-sm); padding: 24px; }
.sk-panel-title { font-size: 1.05rem; font-weight: 800; color: var(--sk-navy); margin: 0 0 16px; display:flex; align-items:center; gap: 10px; }
.sk-step { display:inline-flex; align-items:center; justify-content:center; width: 28px; height: 28px; border-radius:50%; background: var(--sk-navy); color: var(--sk-orange); font-size:.85rem; font-weight:800; }
.sk-back-link { color: var(--sk-muted); font-weight:600; text-decoration:none; }
.sk-back-link:hover { color: var(--sk-orange); }

.sk-cart-table { width:100%; border-collapse: collapse; }
.sk-cart-table thead th { color: var(--sk-muted); font-weight:600; text-transform: uppercase; font-size:.75rem; padding: 10px 8px; border-bottom: 1px solid var(--sk-line); }
.sk-cart-table tbody td { padding: 14px 8px; border-bottom: 1px solid var(--sk-line); vertical-align: middle; font-size: .95rem; }
.sk-cart-item { display:flex; align-items:center; gap: 14px; }
.sk-cart-item img { width: 64px; height: 64px; object-fit: cover; border-radius: 8px; border:1px solid var(--sk-line); background:#f8fafc; }
.sk-cart-item-name { color: var(--sk-navy); font-weight: 700; text-decoration: none; }
.sk-cart-item-name:hover { color: var(--sk-orange); }

.sk-summary { position: sticky; top: 100px; }
.sk-summary-list { margin: 0; padding: 0; }
.sk-summary-list > div { display:flex; justify-content:space-between; padding: 6px 0; }
.sk-summary-list dt { color: var(--sk-muted); font-weight:600; }
.sk-summary-list dd { margin: 0; font-weight: 700; }
.sk-summary-list .sk-total-row { font-size: 1.2rem; padding-top: 12px; border-top: 2px solid var(--sk-line); margin-top: 6px; }
.sk-summary-list .sk-total-row dt, .sk-summary-list .sk-total-row dd { color: var(--sk-navy); }

.sk-summary-items { list-style:none; margin: 0 0 8px; padding: 0; }
.sk-summary-items li { display:flex; align-items:center; gap: 12px; padding: 8px 0; border-bottom: 1px solid var(--sk-line); font-size:.9rem; }
.sk-summary-items li:last-child { border-bottom:none; }
.sk-summary-items img { width:46px; height:46px; object-fit: cover; border-radius:6px; background:#f8fafc; }
.sk-summary-items .sk-sum-name { font-weight: 700; color: var(--sk-navy); line-height:1.2; }
.sk-summary-items .sk-sum-meta { color: var(--sk-muted); font-size:.78rem; }
.sk-summary-items .sk-sum-price { font-weight: 700; color: var(--sk-navy); margin-left: auto; white-space: nowrap; }

.sk-empty-cart { text-align:center; padding: 70px 20px; background: var(--sk-surface); border-radius: var(--sk-radius); box-shadow: var(--sk-shadow-sm); }
.sk-empty-cart i { font-size: 3rem; color: #cbd5e1; margin-bottom: 16px; }
.sk-empty-cart h3 { color: var(--sk-navy); font-weight: 800; }

.sk-section-checkout { background: var(--sk-bg); }
.sk-checkout-head h2 { color: var(--sk-navy); font-weight: 800; margin: 0 0 6px; }
.sk-checkout-head p { color: var(--sk-muted); margin: 0 0 24px; }

.sk-ship-option { display:flex; justify-content:space-between; align-items:center; padding: 12px 14px; border:1px solid var(--sk-line); border-radius: 10px; margin-bottom: 8px; cursor: pointer; transition: border-color .15s ease, background .15s ease; }
.sk-ship-option:hover { border-color: var(--sk-orange); background: #fff8f1; }
.sk-ship-option input[type=radio] { accent-color: var(--sk-orange); }
.sk-ship-option.is-selected { border-color: var(--sk-orange); background: #fff8f1; box-shadow: inset 0 0 0 1px var(--sk-orange); }
.sk-ship-option-name { font-weight:700; color: var(--sk-navy); }
.sk-ship-option-cost { font-weight:800; color: var(--sk-navy); }

/* ── Product page ─────────────────────────────────────── */
.sk-product-page { background:#fff; }
.sk-product-main-img { aspect-ratio: 1/1; background:#f1f5f9; border-radius: var(--sk-radius); border:1px solid var(--sk-line); overflow:hidden; display:flex; align-items:center; justify-content:center; position:relative; }
.sk-product-main-img img,
.sk-product-main-img video,
.sk-product-main-img iframe { width:100%; height:100%; object-fit: contain; display:block; }
.sk-product-main-img video,
.sk-product-main-img iframe { background:#000; border:0; }
.sk-product-thumbs { display:flex; flex-wrap: wrap; gap: 8px; }
.sk-thumb { position:relative; background:#f8fafc; border:2px solid transparent; border-radius:8px; padding: 0; overflow:hidden; cursor:pointer; width:72px; height:72px; }
.sk-thumb.is-active { border-color: var(--sk-orange); }
.sk-thumb img { width:100%; height:100%; object-fit: cover; }
.sk-thumb.is-video::after { content:""; position:absolute; inset:0; background: rgba(15,23,42,.35); pointer-events:none; }
.sk-thumb-play { position:absolute; inset:0; display:flex; align-items:center; justify-content:center; color:#fff; font-size:1.05rem; text-shadow: 0 1px 4px rgba(0,0,0,.6); pointer-events:none; z-index:1; }
.sk-thumb-play .fa-play { background: rgba(15,23,42,.7); width:28px; height:28px; border-radius:50%; display:inline-flex; align-items:center; justify-content:center; padding-left:3px; font-size:.75rem; }
.sk-thumb.is-active.is-video::after { background: rgba(15,23,42,.15); }
.sk-product-title { color: var(--sk-navy); font-weight: 800; font-size: clamp(1.5rem, 3vw, 2.1rem); margin: 10px 0; }
.sk-product-price .sk-price-now { font-size: 2.2rem; }
.sk-product-short { font-size: 1.05rem; color: var(--sk-muted); line-height:1.6; }
.sk-product-meta { list-style:none; padding: 12px 0; margin: 0 0 16px; border-top: 1px solid var(--sk-line); border-bottom: 1px solid var(--sk-line); display:flex; flex-wrap:wrap; gap: 18px; }
.sk-product-meta li { font-size:.9rem; color: var(--sk-muted); }
.sk-product-meta li strong { color: var(--sk-navy); margin-right:4px; }
.sk-product-long { color: #334155; font-size: 1rem; line-height: 1.7; }
.sk-product-long ul { padding-left: 20px; }
.sk-product-badge { position: relative; top: auto; left: auto; display:inline-block; }

/* ── Success ──────────────────────────────────────────── */
.sk-success { text-align:center; max-width: 720px; margin: 0 auto; }
.sk-success-icon { font-size: 5rem; color: #16a34a; margin-bottom: 12px; }
.sk-success h1 { color: var(--sk-navy); font-weight: 800; }

/* ── Footer ───────────────────────────────────────────── */
.sk-footer { background: linear-gradient(135deg, var(--sk-navy) 0%, var(--sk-navy-2) 50%, var(--sk-navy-3) 100%); color: rgba(255,255,255,.7); border-top: 3px solid var(--sk-orange); }
.sk-footer a { color: rgba(255,255,255,.85); text-decoration: none; }
.sk-footer a:hover { color: var(--sk-orange); }
.sk-footer-brand { color:#fff; font-weight:800; font-size: 1.25rem; }
.sk-footer-tagline { color: rgba(255,255,255,.55); font-size:.92rem; }
.sk-footer-h { color:#fff; font-weight:700; margin-bottom: 10px; }
.sk-footer-list { list-style:none; padding:0; margin:0; }
.sk-footer-list li { margin-bottom: 6px; font-size:.92rem; }
.sk-footer-divider { border-color: rgba(255,255,255,.1); }
.sk-footer-copy { color: rgba(255,255,255,.55); font-size:.82rem; }
.sk-footer-copy i { color: var(--sk-orange); }

/* ── Admin ────────────────────────────────────────────── */
.sk-admin-body { background: #f1f5f9; min-height: 100vh; }
.sk-admin-shell { display:flex; min-height: 100vh; }
.sk-admin-sidebar { width: 240px; background: var(--sk-navy); color:#fff; padding: 22px 0; flex-shrink:0; position: sticky; top: 0; height: 100vh; overflow-y: auto; border-right: 3px solid var(--sk-orange); }
.sk-admin-sidebar .sk-admin-brand { padding: 0 22px 18px; border-bottom: 1px solid rgba(255,255,255,.07); margin-bottom: 16px; color:#fff; font-weight: 800; }
.sk-admin-sidebar .sk-admin-brand small { color: var(--sk-orange); display:block; font-weight:600; font-size:.7rem; letter-spacing:.06em; text-transform: uppercase; margin-top: 2px; }
.sk-admin-nav a { display:flex; align-items:center; gap: 10px; padding: 10px 22px; color: rgba(255,255,255,.78); font-weight: 600; font-size:.92rem; text-decoration:none; border-left: 3px solid transparent; }
.sk-admin-nav a:hover, .sk-admin-nav a.is-active { color:#fff; background: rgba(255,255,255,.05); border-left-color: var(--sk-orange); }
.sk-admin-nav a i { width: 18px; color: var(--sk-orange); }
.sk-admin-main { flex: 1; padding: 24px 32px; min-width: 0; }
.sk-admin-topbar { display:flex; align-items:center; justify-content:space-between; margin-bottom: 22px; }
.sk-admin-topbar h1 { font-size: 1.4rem; font-weight: 800; color: var(--sk-navy); margin: 0; }
.sk-admin-card { background:#fff; border-radius: var(--sk-radius); border:1px solid var(--sk-line); box-shadow: var(--sk-shadow-sm); padding: 20px; margin-bottom: 18px; }
.sk-admin-card h3 { font-size: 1.05rem; color: var(--sk-navy); margin: 0 0 12px; font-weight: 800; }
.sk-admin-table { width:100%; border-collapse: collapse; font-size:.92rem; }
.sk-admin-table th { text-align:left; color: var(--sk-muted); font-weight: 700; text-transform: uppercase; font-size: .72rem; padding: 10px 8px; border-bottom: 1px solid var(--sk-line); }
.sk-admin-table td { padding: 10px 8px; border-bottom: 1px solid var(--sk-line); vertical-align: middle; }
.sk-admin-stat { display:flex; flex-direction: column; gap: 6px; }
.sk-admin-stat .v { font-size: 1.7rem; font-weight: 800; color: var(--sk-navy); }
.sk-admin-stat .l { color: var(--sk-muted); font-size: .85rem; }

.sk-login-shell { min-height: 100vh; display: flex; align-items:center; justify-content:center; background: linear-gradient(135deg, var(--sk-navy) 0%, var(--sk-navy-2) 50%, var(--sk-navy-3) 100%); padding: 24px; }
.sk-login-card { background:#fff; border-radius: 14px; box-shadow: 0 20px 60px rgba(0,0,0,.3); padding: 36px; max-width: 420px; width:100%; }
.sk-login-card h1 { color: var(--sk-navy); font-weight: 800; margin: 0 0 8px; }
.sk-login-card p { color: var(--sk-muted); margin: 0 0 22px; }

/* ── Slide-out cart drawer ────────────────────────────── */
.sk-drawer-backdrop {
    position: fixed; inset: 0; background: rgba(15, 23, 42, .55);
    z-index: 1080; opacity: 0; transition: opacity .25s ease;
    -webkit-tap-highlight-color: transparent;
}
body.sk-drawer-open .sk-drawer-backdrop { opacity: 1; }
body.sk-drawer-open { overflow: hidden; }
/* iOS scroll-lock helper applied by JS */
body.sk-drawer-open-ios { position: fixed; left: 0; right: 0; width: 100%; }

.sk-drawer {
    position: fixed; top: 0; right: 0;
    height: 100vh; height: 100dvh;
    width: 100%; max-width: 440px;
    background: #fff; z-index: 1090;
    box-shadow: -20px 0 60px rgba(0,0,0,.25);
    transform: translateX(100%); transition: transform .3s cubic-bezier(.4,.0,.2,1);
    display: flex; flex-direction: column;
    overscroll-behavior: contain;
}
.sk-drawer.is-open { transform: translateX(0); }

.sk-drawer-head {
    display: flex; align-items: center; justify-content: space-between;
    padding: 14px 18px;
    padding-top: max(14px, env(safe-area-inset-top));
    background: linear-gradient(135deg, var(--sk-navy) 0%, var(--sk-navy-2) 100%);
    color: #fff; border-bottom: 3px solid var(--sk-orange); flex-shrink: 0;
}
.sk-drawer-title { margin: 0; font-size: 1.05rem; font-weight: 800; display: flex; align-items: center; gap: 8px; }
.sk-drawer-title i { color: var(--sk-orange); }
.sk-drawer-count {
    background: var(--sk-orange); color: #fff; font-size: .75rem; font-weight: 800;
    padding: 2px 10px; border-radius: 999px; min-width: 28px; text-align: center;
}
.sk-drawer-close {
    background: rgba(255,255,255,.12); color: #fff; border: 0;
    width: 44px; height: 44px;
    border-radius: 50%; font-size: 1.6rem; line-height: 1; cursor: pointer;
    transition: background .15s; -webkit-tap-highlight-color: transparent;
}
.sk-drawer-close:hover, .sk-drawer-close:focus-visible { background: rgba(255,255,255,.25); }

.sk-drawer-flash {
    padding: 10px 18px; font-size: .9rem; font-weight: 600;
    border-bottom: 1px solid var(--sk-line);
}
.sk-drawer-flash.is-ok { background: #ecfdf5; color: #065f46; }
.sk-drawer-flash.is-error { background: #fef2f2; color: #991b1b; }

.sk-drawer-body {
    flex: 1 1 auto; overflow-y: auto; -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
    padding: 12px 18px;
}
.sk-drawer-empty { text-align: center; padding: 50px 16px; }
.sk-drawer-empty i { font-size: 3rem; color: #cbd5e1; margin-bottom: 14px; }
.sk-drawer-empty h4 { color: var(--sk-navy); font-weight: 800; margin: 0 0 6px; }
.sk-drawer-empty p { color: var(--sk-muted); margin: 0 0 18px; }

.sk-drawer-items { list-style: none; margin: 0; padding: 0; }
.sk-drawer-item {
    display: grid;
    grid-template-columns: 64px 1fr;
    grid-template-areas:
        "img info"
        "img qty";
    column-gap: 12px; row-gap: 8px;
    padding: 14px 0; border-bottom: 1px solid var(--sk-line);
}
.sk-drawer-item:last-child { border-bottom: 0; }
.sk-drawer-item-img { grid-area: img; display: block; align-self: start; }
.sk-drawer-item-img img {
    width: 64px; height: 64px; object-fit: cover; border-radius: 8px;
    border: 1px solid var(--sk-line); background: #f8fafc; display: block;
}
.sk-drawer-item-info {
    grid-area: info; min-width: 0;
    display: grid; grid-template-columns: 1fr auto; column-gap: 8px; align-items: start;
}
.sk-drawer-item-info-text { min-width: 0; }
.sk-drawer-item-name {
    color: var(--sk-navy); font-weight: 700; font-size: .95rem;
    text-decoration: none; line-height: 1.3; display: block;
    overflow-wrap: anywhere;
}
.sk-drawer-item-name:hover { color: var(--sk-orange); }
.sk-drawer-item-meta { color: var(--sk-muted); font-size: .78rem; margin-top: 2px; }
.sk-drawer-item-total {
    font-weight: 800; color: var(--sk-navy); white-space: nowrap;
    font-size: .95rem; text-align: right;
}

.sk-drawer-qty {
    grid-area: qty;
    display: flex; align-items: center; gap: 6px;
    justify-content: space-between;
}
.sk-drawer-qty-group { display: inline-flex; align-items: center; gap: 6px; }
.sk-drawer-qty-btn {
    width: 36px; height: 36px; border-radius: 8px; border: 1px solid var(--sk-line);
    background: #f8fafc; color: var(--sk-navy); font-weight: 700; cursor: pointer;
    display: inline-flex; align-items: center; justify-content: center; font-size: 1rem;
    -webkit-tap-highlight-color: transparent; touch-action: manipulation;
    transition: background .15s, border-color .15s, color .15s;
}
.sk-drawer-qty-btn:hover, .sk-drawer-qty-btn:active { background: var(--sk-orange); color: #fff; border-color: var(--sk-orange); }
.sk-drawer-qty-input {
    width: 48px; height: 36px; text-align: center; border: 1px solid var(--sk-line);
    border-radius: 8px; font-weight: 700; font-size: .95rem; padding: 0;
    -moz-appearance: textfield; appearance: textfield;
}
.sk-drawer-qty-input::-webkit-outer-spin-button,
.sk-drawer-qty-input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.sk-drawer-remove {
    background: transparent; border: 0; color: #94a3b8;
    width: 36px; height: 36px; border-radius: 8px;
    cursor: pointer; padding: 0; display: inline-flex; align-items: center; justify-content: center;
    -webkit-tap-highlight-color: transparent;
    transition: background .15s, color .15s;
}
.sk-drawer-remove:hover, .sk-drawer-remove:active { color: #dc2626; background: #fef2f2; }

.sk-drawer-foot {
    flex-shrink: 0; padding: 14px 18px;
    padding-bottom: max(14px, env(safe-area-inset-bottom));
    border-top: 1px solid var(--sk-line); background: #f8fafc;
}
.sk-drawer-promo { display: flex; gap: 6px; margin-bottom: 8px; }
.sk-drawer-promo .form-control { font-size: 16px; height: 40px; } /* 16px prevents iOS zoom */
.sk-drawer-promo .btn { white-space: nowrap; }

/* Checkout-summary promo code */
.sk-co-promo-form { display: flex; gap: 6px; }
.sk-co-promo-form .form-control { font-size: 16px; height: 38px; text-transform: uppercase; }
.sk-co-promo-form .btn { white-space: nowrap; }
.sk-co-promo-applied {
    display: flex; align-items: center; flex-wrap: wrap; gap: 4px;
    padding: 8px 10px; border: 1px dashed var(--sk-line, #d6dde6);
    border-radius: 6px; background: #f5fbf6; color: #1f5132;
}
.sk-co-promo-applied .btn-link { font-size: .85rem; text-decoration: none; }
.sk-co-promo-applied .btn-link:hover { text-decoration: underline; }
.sk-drawer-totals { margin: 10px 0 12px; padding: 0; }
.sk-drawer-totals > div { display: flex; justify-content: space-between; padding: 4px 0; font-size: .92rem; }
.sk-drawer-totals dt { color: var(--sk-muted); font-weight: 600; margin: 0; }
.sk-drawer-totals dd { margin: 0; font-weight: 700; color: var(--sk-navy); }
.sk-drawer-total-row { font-size: 1.1rem !important; padding-top: 10px !important; border-top: 2px solid var(--sk-line); margin-top: 4px; }
.sk-drawer-total-row dt, .sk-drawer-total-row dd { color: var(--sk-navy) !important; font-weight: 800 !important; }
.sk-drawer-view-cart {
    display: block; text-align: center; margin-top: 10px;
    color: var(--sk-muted); font-weight: 600; font-size: .85rem; text-decoration: underline;
}
.sk-drawer-view-cart:hover { color: var(--sk-orange); }

@media (max-width: 575px) {
    .sk-drawer { max-width: 100%; }
    .sk-drawer-head { padding-left: 14px; padding-right: 14px; }
    .sk-drawer-body { padding-left: 14px; padding-right: 14px; }
    .sk-drawer-foot { padding-left: 14px; padding-right: 14px; }
}

/* ── Payment method tabs ──────────────────────────────── */
.sk-pay-tabs { display: flex; gap: 6px; margin: -4px 0 16px; border-bottom: 1px solid var(--sk-line); }
.sk-pay-tab {
    flex: 1; background: transparent; border: 0; padding: 12px 14px;
    font-weight: 700; font-size: .92rem; color: var(--sk-muted);
    border-bottom: 3px solid transparent; cursor: pointer; transition: color .15s, border-color .15s, background .15s;
    border-radius: 8px 8px 0 0;
}
.sk-pay-tab:hover { color: var(--sk-navy); background: #f8fafc; }
.sk-pay-tab.is-active { color: var(--sk-navy); border-bottom-color: var(--sk-orange); background: #fff8f1; }
.sk-pay-tab i { color: var(--sk-orange); }

.sk-pay-pane { display: none; }
.sk-pay-pane.is-active { display: block; }

#sk-paypal-buttons.is-disabled { opacity: .55; pointer-events: none; filter: grayscale(.4); }
#sk-paypal-buttons { min-height: 48px; }

/* Google Places autocomplete dropdown z-index above any panels */
.pac-container { z-index: 2000 !important; box-shadow: 0 10px 30px rgba(0,0,0,.18); border-radius: 8px; border: 1px solid var(--sk-line); margin-top: 4px; }
.pac-item { padding: 8px 12px; cursor: pointer; }
.pac-item:hover, .pac-item.pac-item-selected { background: #fff8f1; }

@media (max-width: 991.98px) {
    .sk-admin-shell { flex-direction: column; }
    .sk-admin-sidebar { width:100%; height:auto; position: static; border-right: none; border-bottom: 3px solid var(--sk-orange); padding: 12px 0; }
    .sk-admin-nav { display:flex; flex-wrap: wrap; gap: 4px; padding: 0 12px; }
    .sk-admin-nav a { padding: 8px 12px; border-left: none; border-bottom: 3px solid transparent; }
    .sk-admin-nav a:hover, .sk-admin-nav a.is-active { border-left: none; border-bottom-color: var(--sk-orange); }
    .sk-admin-main { padding: 16px; }
    .sk-summary { position: static; }
}

/* ── Global mobile polish ─────────────────────────────── */
/* Avoid iOS auto-zoom on focusing form controls */
@media (max-width: 767.98px) {
    input.form-control, select.form-select, textarea.form-control { font-size: 16px; }
    .form-control-sm, .form-select-sm { font-size: 14px; }
}

/* Larger, easier-to-tap buttons on touch devices */
@media (hover: none) and (pointer: coarse) {
    .btn { min-height: 44px; }
    .btn-sm { min-height: 38px; }
    .sk-cart-btn { min-height: 40px; }
}

/* Hero adjustments for phones */
@media (max-width: 767.98px) {
    .sk-hero { padding: 36px 0 44px; }
    .sk-hero-title { margin: 14px 0 10px; }
    .sk-hero-sub { font-size: .98rem; margin-bottom: 18px; }
    .sk-hero-cta .btn { flex: 1 1 100%; justify-content: center; }
    .sk-hero-cta { gap: 10px; }
    .sk-hero-trust { gap: 14px 18px; font-size: .82rem; }
    .sk-hero-image { padding: 12px; border-radius: 14px; margin-top: 6px; }
    .sk-section { padding: 40px 0; }
    .sk-section-head { margin-bottom: 26px; }
}

/* Header tightening on phones */
@media (max-width: 575px) {
    .sk-logo-img { height: 36px; }
    .sk-cart-btn { padding: 8px 12px; font-size: .85rem; }
    .sk-cart-badge { top: -4px; right: -4px; min-width: 20px; height: 20px; font-size: .68rem; }
    .sk-header-phone-mobile { width: 40px; height: 40px; }
}

/* Product card add-to-cart row stacks on tiny screens */
@media (max-width: 359px) {
    .sk-card-add { flex-wrap: wrap; }
    .sk-card-add .sk-qty-input { max-width: 100%; flex: 1 1 100%; }
    .sk-card-add .btn { flex: 1 1 100%; }
}

/* Feature strip vertical spacing on phones */
@media (max-width: 767.98px) {
    .sk-feature-strip { padding: 26px 0; }
    .sk-feat { justify-content: flex-start; }
}

/* Product page mobile */
@media (max-width: 767.98px) {
    .sk-product-page.sk-section { padding: 28px 0 40px; }
    .sk-product-title { font-size: 1.55rem; margin: 8px 0 6px; }
    .sk-product-price .sk-price-now { font-size: 1.8rem; }
    .sk-product-meta { gap: 10px 18px; padding: 10px 0; }
    .sk-product-thumbs { gap: 6px; }
    .sk-thumb { width: 60px; height: 60px; }
}

/* ── Cart page: table → cards on mobile ───────────────── */
@media (max-width: 767.98px) {
    .sk-cart-table thead { display: none; }
    .sk-cart-table, .sk-cart-table tbody, .sk-cart-table tr, .sk-cart-table td { display: block; width: 100%; }
    .sk-cart-table tr {
        background: #fff; border: 1px solid var(--sk-line); border-radius: 12px;
        padding: 12px; margin-bottom: 12px; position: relative;
    }
    .sk-cart-table tbody td {
        padding: 6px 0; border: 0; text-align: left !important;
        font-size: .95rem;
    }
    .sk-cart-table tbody td.text-end, .sk-cart-table tbody td.text-center { text-align: left !important; }
    .sk-cart-item { gap: 12px; }
    .sk-cart-item img { width: 56px; height: 56px; }
    .sk-qty-form { gap: 6px; }
    .sk-qty-form .sk-qty-input { width: 64px !important; max-width: 64px; height: 40px; }
    .sk-qty-form .btn { height: 40px; }
    /* Remove button to top-right */
    .sk-cart-table tr td:last-child { position: absolute; top: 8px; right: 8px; padding: 0; width: auto; }
    .sk-cart-table tr td:last-child .btn { width: 36px; height: 36px; padding: 0; display: inline-flex; align-items: center; justify-content: center; }
    .sk-panel { padding: 14px; }
    .sk-summary { margin-top: 16px; }
}

/* ── Checkout: sticky mobile order bar ────────────────── */
.sk-mobile-order-bar { display: none; }

@media (max-width: 991.98px) {
    .sk-checkout-page .sk-summary { position: static; margin-top: 16px; }
    .sk-checkout-page .sk-panel { padding: 16px; }
    .sk-pay-tabs { flex-wrap: wrap; }
    .sk-pay-tab { padding: 10px 12px; font-size: .88rem; }

    /* Hide the in-summary place-order; show sticky bar instead so it's always visible */
    .sk-checkout-page #sk-pay-btn { /* keep visible inside summary as fallback */ }

    .sk-mobile-order-bar {
        display: flex; align-items: center; justify-content: space-between; gap: 12px;
        position: fixed; left: 0; right: 0; bottom: 0; z-index: 1050;
        background: #fff; border-top: 1px solid var(--sk-line);
        padding: 10px 14px;
        padding-bottom: max(10px, env(safe-area-inset-bottom));
        box-shadow: 0 -8px 24px rgba(15,23,42,.10);
    }
    .sk-mobile-order-bar .sk-mob-total { display: flex; flex-direction: column; line-height: 1.1; min-width: 0; }
    .sk-mobile-order-bar .sk-mob-total small { color: var(--sk-muted); font-size: .72rem; font-weight: 600; }
    .sk-mobile-order-bar .sk-mob-total strong { color: var(--sk-navy); font-size: 1.15rem; font-weight: 800; }
    .sk-mobile-order-bar .btn { flex: 1 1 auto; max-width: 60%; min-height: 46px; }
    body.sk-checkout-page { padding-bottom: 80px; }
}

/* Checkout form spacing on phones */
@media (max-width: 575px) {
    .sk-checkout-head h2 { font-size: 1.4rem; }
    .sk-pay-tab { flex: 1 1 100%; border-radius: 8px; border-bottom: 0; }
    .sk-pay-tab.is-active { background: #fff8f1; border-bottom: 0; box-shadow: inset 0 0 0 2px var(--sk-orange); }
    .sk-pay-tabs { border-bottom: 0; gap: 6px; margin-bottom: 14px; }
}

/* Footer compaction on phones */
@media (max-width: 767.98px) {
    .sk-footer .row { text-align: center; }
    .sk-footer .d-flex.flex-wrap { justify-content: center; }
}