:root{
  --primary:#FF6B00;
  --bg:#f6f7fb;
  --card:#ffffff;
  --text:#0b0d10;
  --muted:#5a657a;
  --border: rgba(16,24,40,.12);
  --shadow: 0 10px 30px rgba(16,24,40,.08);
  --shadow2: 0 12px 40px rgba(16,24,40,.12);
  --radius: 18px;
  --radius2: 24px;
}

html[data-theme="dark"]{
  --bg:#0b0d10;
  --card:#121621;
  --text:#f5f7fb;
  --muted:#a9b1c1;
  --border: rgba(255,255,255,.08);
  --shadow: 0 12px 40px rgba(0,0,0,.35);
  --shadow2: 0 20px 60px rgba(0,0,0,.45);
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family: "Hind Siliguri", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  background: var(--bg);
  color: var(--text);
}
a{color:inherit; text-decoration:none}
img{max-width:100%}
.container{max-width:1120px; margin:0 auto; padding:16px}
.muted{color:var(--muted)}
.small{font-size:12px}
.strong{font-weight:800}
.center{text-align:center; margin-top:16px}

.btn{display:inline-flex; align-items:center; justify-content:center; gap:8px; padding:10px 14px; border-radius:12px; border:1px solid var(--border); background: rgba(16,24,40,.03); cursor:pointer; font-weight:800; line-height:1}
.btn:hover{background: rgba(16,24,40,.05)}
.btn-primary{background: linear-gradient(180deg, rgba(255,107,0,.98), rgba(255,107,0,.78)); border-color: rgba(255,107,0,.45); color:#121212}
.btn-primary:hover{filter:brightness(1.03)}
.btn-outline{background: transparent; border-color: rgba(255,107,0,.55)}
.btn-ghost{background:transparent}
.badge{padding:6px 10px; border-radius:999px; border:1px solid var(--border); background: rgba(16,24,40,.03); font-weight:800}

.alert{
  padding:12px 14px; border-radius: 16px; border:1px solid var(--border);
  margin:12px 0;
  background: rgba(16,24,40,.03);
}
.alert.success{background: rgba(16,185,129,.12); border-color: rgba(16,185,129,.22)}
.alert.error{background: rgba(239,68,68,.12); border-color: rgba(239,68,68,.22)}

.card{
  border:1px solid var(--border);
  border-radius: var(--radius);
  background: linear-gradient(180deg, rgba(255,255,255,.98), rgba(255,255,255,.92));
  box-shadow: var(--shadow);
  overflow:hidden;
}
html[data-theme="dark"] .card{
  background: linear-gradient(180deg, rgba(18,22,33,.92), rgba(18,22,33,.72));
}
.card.pad{padding:16px}
.card-body{padding:14px}

.field{display:flex; flex-direction:column; gap:6px; margin-bottom:12px}
.field input, .field textarea, .field select{
  padding:10px 12px; border-radius:14px; border:1px solid var(--border);
  background: rgba(16,24,40,.03);
  color:var(--text);
  outline:none;
}
.field input:focus, .field textarea:focus, .field select:focus{border-color: rgba(255,107,0,.45); box-shadow: 0 0 0 4px rgba(255,107,0,.12)}
.field.checkbox{flex-direction:column}

.site-header{
  position:sticky; top:0; z-index:50;
  background: rgba(255,255,255,.92);
  backdrop-filter: blur(18px);
  border-bottom:1px solid rgba(16,24,40,.08);
  box-shadow: 0 8px 30px rgba(15, 23, 42, .06);
  transition: background .28s ease, box-shadow .28s ease, border-color .28s ease, transform .28s ease;
}
.site-header.is-scrolled{
  background: rgba(255,255,255,.96);
  border-bottom-color: rgba(255,107,0,.12);
  box-shadow: 0 16px 34px rgba(15,23,42,.08);
}
html[data-theme="dark"] .site-header,
html[data-theme="dark"] .site-header.is-scrolled{
  background: rgba(11,13,16,.82);
  border-bottom-color: rgba(255,255,255,.08);
}
.header-inner{
  display:grid;
  grid-template-columns:auto 1fr auto;
  gap:18px;
  align-items:center;
  min-height:84px;
}
.logo{
  display:inline-flex;
  align-items:center;
  gap:12px;
  min-width:0;
}
.logo-mark{
  width:44px;
  height:44px;
  border-radius:14px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  font-weight:900;
  font-size:20px;
  color:#fff;
  background: linear-gradient(135deg, rgba(255,107,0,.96), rgba(255,140,56,.82));
  box-shadow: 0 14px 24px rgba(255,107,0,.22);
  flex:0 0 auto;
}
.logo-copy{
  display:flex;
  flex-direction:column;
  min-width:0;
}
.logo-copy strong{
  font-size:18px;
  line-height:1.1;
  letter-spacing:.01em;
}
.logo-copy small{
  color: var(--muted);
  font-size:12px;
  line-height:1.2;
  margin-top:2px;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.nav{
  display:flex;
  justify-content:center;
  gap:8px;
  align-items:center;
  min-width:0;
}
.nav a{
  position:relative;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:42px;
  padding:10px 14px;
  border-radius:999px;
  color: var(--muted);
  font-weight:600;
  transition: color .22s ease, background .22s ease, transform .22s ease, box-shadow .22s ease;
}
.nav a:hover{
  color: var(--text);
  background: rgba(255,107,0,.07);
  transform: translateY(-1px);
}
.nav a.is-active{
  color: var(--primary);
  background: rgba(255,107,0,.1);
  box-shadow: inset 0 0 0 1px rgba(255,107,0,.12);
}
.header-actions{
  display:flex;
  justify-content:flex-end;
  gap:10px;
  align-items:center;
}
.header-pill,
.header-account{
  min-height:44px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  padding:10px 14px;
  border-radius:999px;
  border:1px solid rgba(16,24,40,.08);
  background:#fff;
  box-shadow: 0 8px 18px rgba(15,23,42,.04);
  font-weight:700;
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease, background .22s ease;
}
.header-pill:hover,
.header-account:hover{
  transform: translateY(-1px);
  box-shadow: 0 12px 22px rgba(15,23,42,.07);
  border-color: rgba(255,107,0,.16);
}
.language-switch{
  color: var(--primary);
}
.header-account{
  min-width:112px;
}
.account-dot{
  width:9px;
  height:9px;
  border-radius:50%;
  background: linear-gradient(135deg, rgba(255,107,0,.95), rgba(255,140,56,.8));
  box-shadow: 0 0 0 5px rgba(255,107,0,.12);
}
.header-logout{
  color:#a94410;
}
.burger{
  display:none;
  min-width:44px;
  width:44px;
  height:44px;
  padding:0;
  border-radius:14px;
  font-size:18px;
  background: linear-gradient(180deg, rgba(255,107,0,.1), rgba(255,107,0,.04));
  border-color: rgba(255,107,0,.16);
}
html[data-theme="dark"] .header-pill,
html[data-theme="dark"] .header-account,
html[data-theme="dark"] .burger{
  background: rgba(255,255,255,.04);
  border-color: rgba(255,255,255,.08);
  box-shadow:none;
}
.mobile-drawer{
  position:fixed; inset:0; z-index:80;
  visibility:hidden;
  pointer-events:none;
}
.mobile-drawer.open{
  visibility:visible;
  pointer-events:auto;
}
.mobile-drawer .backdrop{
  position:absolute; inset:0; background: rgba(15,23,42,.42);
  opacity:0;
  transition: opacity .28s ease;
}
.mobile-drawer.open .backdrop{ opacity:1; }
.mobile-drawer .panel{
  position:absolute; top:0; right:0;
  width:min(360px, 88vw);
  height:100%;
  background: rgba(255,255,255,.98);
  border-left:1px solid rgba(16,24,40,.08);
  box-shadow: -20px 0 45px rgba(15,23,42,.16);
  padding:18px;
  display:flex;
  flex-direction:column;
  gap:18px;
  transform: translateX(104%);
  transition: transform .3s ease;
}
.mobile-drawer.open .panel{ transform: translateX(0); }
html[data-theme="dark"] .mobile-drawer .panel{
  background: rgba(18,22,33,.98);
  border-left-color: rgba(255,255,255,.08);
}
.drawer-head,
.drawer-brand,
.drawer-meta{
  display:flex;
  align-items:center;
  gap:12px;
}
.drawer-head{ justify-content:space-between; }
.drawer-brand{ align-items:flex-start; }
.drawer-links{
  display:flex;
  flex-direction:column;
  gap:8px;
}
.drawer-links a{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding:14px 16px;
  border-radius:18px;
  border:1px solid rgba(16,24,40,.06);
  background: rgba(16,24,40,.02);
  font-weight:700;
  transition: transform .22s ease, border-color .22s ease, background .22s ease;
}
.drawer-links a:hover,
.drawer-links a.is-active{
  transform: translateX(-2px);
  background: rgba(255,107,0,.08);
  border-color: rgba(255,107,0,.14);
}
.drawer-meta{
  margin-top:auto;
  flex-direction:column;
  align-items:stretch;
}
.drawer-meta > *{ width:100%; }

.site-footer{
  margin-top:40px;
  border-top:1px solid var(--border);
  background: rgba(255,255,255,.86);
}
html[data-theme="dark"] .site-footer{background: rgba(0,0,0,.18)}
.footer-inner{display:flex; justify-content:space-between; flex-wrap:wrap; gap:10px}

.hero{margin-top:10px}
.hero-card{
  padding:26px; border-radius: var(--radius2);
  background: linear-gradient(180deg, rgba(255,107,0,.08), rgba(255,255,255,.96));
  border:1px solid rgba(255,107,0,.2);
  box-shadow: var(--shadow);
}
html[data-theme="dark"] .hero-card{
  background: linear-gradient(180deg, rgba(255,107,0,.12), rgba(18,22,33,.75));
}

.section{margin:26px 0}
.section-head{display:flex; justify-content:space-between; align-items:end; gap:10px; flex-wrap:wrap}

.grid{display:grid; grid-template-columns: repeat(4, 1fr); gap:14px; margin-top:14px}
.grid2{display:grid; grid-template-columns: 1fr 1fr; gap:14px; margin-top:14px}

.product .thumb{
  aspect-ratio: 16/10;
  max-height: 220px;
  overflow:hidden;
  background: rgba(16,24,40,.03);
}
.product img{width:100%; height:100%; object-fit:cover; display:block}
.title{font-weight:900}
.price{display:flex; gap:10px; align-items:baseline; margin-top:6px}
.price .now{font-weight:900}
.price .was{color:var(--muted); text-decoration: line-through}

.gallery{display:flex; gap:10px; flex-wrap:wrap; margin-top:12px}
.gallery img{width:110px; height:110px; object-fit:cover; border-radius:16px; border:1px solid var(--border)}

.product-page{display:grid; grid-template-columns: 1.1fr .9fr; gap:18px; margin-top:14px}
.product-gallery .main-img{width:100%; border-radius: var(--radius2); border:1px solid var(--border); background: rgba(16,24,40,.03)}
.thumb-row{display:flex; gap:10px; margin-top:10px; flex-wrap:wrap}
.thumb-img{width:74px; height:74px; object-fit:cover; border-radius:16px; border:1px solid var(--border); cursor:pointer}
.product-info .badges{display:flex; gap:10px; margin:10px 0; flex-wrap:wrap}
.cta-row{display:flex; gap:10px; flex-wrap:wrap; margin-top:12px}

.checkout{display:grid; grid-template-columns: 1.05fr .95fr; gap:16px; margin-top:12px}
.summary{display:flex; flex-direction:column; gap:10px}
.sum-row{display:grid; grid-template-columns: 1fr 90px 110px; gap:10px; align-items:center; padding:8px 0; border-bottom:1px dashed var(--border)}
.sum-row:last-child{border-bottom:none}
.qty input{width:100%}
.sum-total{display:flex; justify-content:space-between; align-items:center; margin-top:10px}

.table{display:flex; flex-direction:column; gap:8px}
.table .row{display:grid; grid-template-columns: 80px 1.6fr 1fr 1fr 1.4fr 1fr 110px; gap:10px; padding:10px 12px; border:1px solid var(--border); border-radius:16px; background: rgba(16,24,40,.03); align-items:center}
.table .row.head{background: rgba(16,24,40,.06); font-weight:900}
.actions{display:flex; gap:8px; justify-content:flex-end; flex-wrap:wrap}
.inline{display:flex; gap:10px; align-items:center}
.maxw{max-width:460px}

.countdown{margin-top:12px; padding:12px; border-radius:16px; border:1px solid rgba(255,107,0,.35); background: rgba(255,107,0,.08)}
.countdown-timer{font-weight:900; margin-left:8px}

.support-fab{
  position:fixed; right:14px; bottom:14px; display:flex; flex-direction:column; gap:10px; z-index:70;
}
.fab{
  width:54px; height:54px; border-radius:18px; display:flex; align-items:center; justify-content:center;
  background: rgba(255,107,0,.92); color:#111; font-weight:900;
  border:1px solid rgba(255,107,0,.6);
}
.fab:hover{filter:brightness(1.05)}

.admin-shell{display:grid; grid-template-columns: 260px 1fr; min-height: calc(100vh - 0px)}
.admin-sidebar{
  position:sticky; top:0; align-self:start; height:100vh;
  background: rgba(255,255,255,.86);
  border-right:1px solid var(--border);
  box-shadow: var(--shadow);
  padding:14px;
}
html[data-theme="dark"] .admin-sidebar{background: rgba(11,13,16,.75)}
.admin-sidebar .brand{font-weight:900; padding:10px 10px; border-radius:14px}
.admin-sidebar a{display:flex; align-items:center; gap:10px; padding:10px 10px; border-radius:14px}
.admin-sidebar a:hover{background: rgba(16,24,40,.05)}
.admin-topbar{
  position:sticky; top:0; z-index:40;
  background: rgba(255,255,255,.86);
  border-bottom:1px solid var(--border);
  box-shadow: var(--shadow);
}
html[data-theme="dark"] .admin-topbar{background: rgba(11,13,16,.75)}
.admin-topbar-inner{display:flex; justify-content:space-between; align-items:center; gap:10px}
.admin-content{padding:16px}

@media (max-width: 980px){
  .grid{grid-template-columns: repeat(2, 1fr)}
  .grid2{grid-template-columns: 1fr}
  .product-page{grid-template-columns: 1fr}
  .checkout{grid-template-columns: 1fr}
  .header-inner{grid-template-columns: 1fr auto; min-height:76px; gap:12px}
  .nav{display:none}
  .logo-copy small{display:none}
  .header-actions{gap:8px}
  .header-pill,
  .header-account{display:none}
  .burger{display:inline-flex}
  .admin-shell{grid-template-columns: 1fr}
  .admin-sidebar{display:none}
}

@media (max-width: 640px){
  .container{padding:14px}
  .header-inner{min-height:72px}
  .logo-mark{width:40px; height:40px; border-radius:12px; font-size:18px}
  .logo-copy strong{font-size:16px}
  .mobile-drawer .panel{width:min(100vw, 360px); padding:16px}
  .drawer-links a{padding:13px 14px; border-radius:16px}
}


.orders-toolbar{display:flex; gap:12px; align-items:center; flex-wrap:wrap; justify-content:flex-end}
.orders-search{display:flex; gap:10px; align-items:center; flex-wrap:wrap}
.orders-search input{min-width:260px; width: min(420px, 86vw)}
.orders-search select{min-width:120px}
.translations-grid{display:grid; grid-template-columns: 220px 1fr 1fr; gap:10px; align-items:center}
.t-head{font-weight:900; color:var(--muted); padding:6px 0}
.t-key{font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; font-size:12px; color:var(--muted)}
.t-input{width:100%}
@media (max-width: 980px){
  .translations-grid{grid-template-columns: 1fr; }
  .t-head{display:none}
  .t-key{margin-top:12px}
}



/* Admin form polish */
input, select, textarea{font-size:14px}
.admin-content .card{border-radius:24px}
.admin-content h1{font-size:34px; margin:4px 0 14px}
.admin-content h3{margin:10px 0}
.field input, .field select, .field textarea{width:100%}
.table{gap:10px}
.table .row{border-radius:18px}
.table .row.head{border-radius:18px}
.actions form{margin:0}
.btn{border-radius:16px}
.btn-primary{padding:11px 16px}
.btn-outline{padding:10px 14px}
.btn-ghost{padding:10px 12px}
.orders-toolbar{width:100%}
.orders-search{flex:1; justify-content:flex-end}
.orders-search input{flex:1; min-width:220px}
.orders-search select{min-width:120px}

@media (max-width: 980px){
  .orders-toolbar{flex-direction:column; align-items:stretch}
  .orders-search{width:100%}
  .orders-search input{width:100%}
  .orders-search select{width:100%}
  .orders-search .btn{width:100%}
  .table .row, .table .row.head{grid-template-columns: 1fr !important; gap:6px}
  .table .row > div, .table .row.head > div{padding:4px 0}
  .actions{justify-content:flex-start}
}



/* Better admin tables + inputs */
.admin-content input, .admin-content select, .admin-content textarea{
  border:1px solid var(--border);
  background: rgba(255,255,255,.9);
  border-radius:14px;
}
html[data-theme="dark"] .admin-content input,
html[data-theme="dark"] .admin-content select,
html[data-theme="dark"] .admin-content textarea{
  background: rgba(16,24,40,.35);
}

.table .row{background: rgba(255,255,255,.9)}
html[data-theme="dark"] .table .row{background: rgba(16,24,40,.35)}
.table .row > div{display:flex; align-items:center}
.table .row.head > div{font-size:12px; letter-spacing:.3px; text-transform:uppercase}

/* Orders row status inline controls */
.inline select{min-width:140px}
.inline .btn{white-space:nowrap}

/* Translations polished */
.translations-card{
  border:1px solid var(--border);
  border-radius: 22px;
  overflow:hidden;
}
.trow{
  padding:10px 12px;
  border-bottom:1px solid var(--border);
}
.trow:last-child{border-bottom:none}
.trow.thead{
  background: rgba(16,24,40,.04);
}
.tinput{
  padding:10px 12px;
  border-radius:14px;
  border:1px solid var(--border);
  background: rgba(255,255,255,.92);
}
html[data-theme="dark"] .tinput{
  background: rgba(16,24,40,.35);
}
@media (max-width: 980px){
  .translations-card{border:none; overflow:visible}
  .trow{
    border:1px solid var(--border);
    border-radius:18px;
    background: rgba(255,255,255,.92);
    margin-bottom:10px;
  }
  html[data-theme="dark"] .trow{background: rgba(16,24,40,.35)}
}


.status-form{display:flex; gap:8px; align-items:center; flex-wrap:wrap}
.status-form select{min-width:130px}
.status-form .btn{padding:8px 12px; border-radius:14px}



/* Orders clean table */
.orders-table{display:flex; flex-direction:column; gap:10px; margin-top:14px}
.orders-head{
  display:grid;
  grid-template-columns: 1.2fr .8fr 1fr 1fr 1.6fr;
  gap:12px;
  padding:10px 14px;
  border:1px solid var(--border);
  border-radius:18px;
  background: rgba(16,24,40,.04);
  font-weight:900;
  text-transform:uppercase;
  letter-spacing:.3px;
  font-size:12px;
}
.order-row{
  display:grid;
  grid-template-columns: 1.2fr .8fr 1fr 1fr 1.6fr;
  gap:12px;
  padding:12px 14px;
  border:1px solid var(--border);
  border-radius:18px;
  background: rgba(255,255,255,.9);
  box-shadow: 0 10px 26px rgba(16,24,40,.04);
}
html[data-theme="dark"] .order-row{background: rgba(16,24,40,.35)}
.cell{display:flex; flex-direction:column; justify-content:center; gap:4px}
.cell.total{align-items:flex-start}
.cell.actions{gap:10px}
.statusline{display:flex; gap:10px; align-items:center; flex-wrap:wrap}
.status-select{min-width:160px}
.actionline{display:flex; gap:10px; align-items:center; justify-content:flex-start; flex-wrap:wrap}
.pager{display:flex; gap:10px; justify-content:center; align-items:center; margin-top:14px; flex-wrap:wrap}

/* Mobile stacking */
@media (max-width: 980px){
  .orders-head{display:none}
  .order-row{
    grid-template-columns: 1fr;
    gap:10px;
  }
  .cell.total, .cell.payment, .cell.date{flex-direction:row; justify-content:space-between; align-items:center}
  .cell.total::before{content:"Total"; color:var(--muted); font-size:12px}
  .cell.payment::before{content:"Payment"; color:var(--muted); font-size:12px}
  .cell.date::before{content:"Date"; color:var(--muted); font-size:12px}
}



/* Minimal Orders UI */
.orders-top{display:flex; align-items:center; justify-content:space-between; gap:14px; flex-wrap:wrap; margin:6px 0 12px}
.orders-title{display:flex; align-items:baseline; gap:10px}
.orders-title h1{margin:0; font-size:32px}
.orders-actions{display:flex; align-items:center; gap:10px; flex-wrap:wrap}
.orders-filters{display:flex; gap:8px; align-items:center}
.orders-filters input{width:220px; max-width:42vw}
.orders-filters select{width:120px}
.orders-filters .btn{padding:9px 12px}

.orders-list{display:flex; flex-direction:column; gap:10px}
.orders-head, .orders-row{
  display:grid;
  grid-template-columns: 1.3fr .7fr 1fr .9fr 1fr 1.1fr;
  gap:12px;
  align-items:center;
}
.orders-head{
  padding:10px 12px;
  border:1px solid var(--border);
  border-radius:16px;
  background: rgba(16,24,40,.04);
  font-weight:900;
  text-transform:uppercase;
  letter-spacing:.25px;
  font-size:12px;
}
.orders-row{
  padding:12px 12px;
  border:1px solid var(--border);
  border-radius:16px;
  background: rgba(255,255,255,.92);
}
html[data-theme="dark"] .orders-row{background: rgba(16,24,40,.35)}
.right{text-align:right}
.orders-row .right{justify-self:end}
.pill{display:inline-flex; align-items:center; padding:6px 10px; border-radius:999px; border:1px solid var(--border); background: rgba(16,24,40,.03); font-weight:900; font-size:12px}
.status-select{margin-left:8px; padding:8px 10px; border-radius:14px}
.actions{display:flex; gap:8px; align-items:center; justify-content:flex-end; flex-wrap:wrap}
.actions form{margin:0}

@media (max-width: 980px){
  .orders-actions{width:100%; justify-content:flex-start}
  .orders-filters{width:100%}
  .orders-filters input{width:100%; max-width:100%}
  .orders-filters select{width:100%}
  .orders-filters .btn{width:100%}
  .orders-head{display:none}
  .orders-row{
    grid-template-columns: 1fr;
    align-items:flex-start;
  }
  .orders-row .right{text-align:left; justify-self:start}
  .actions{justify-content:flex-start}
  .status-select{margin-left:0; width:100%}
}



/* Colorful Orders redesign */
.orders-wrap{margin-top:8px}
.orders-hero{
  display:flex; justify-content:space-between; align-items:flex-end; gap:14px; flex-wrap:wrap;
  padding:18px 18px;
  border-radius:22px;
  border:1px solid rgba(255,107,0,.25);
  background: linear-gradient(135deg, rgba(255,107,0,.16), rgba(255,255,255,.92));
  box-shadow: 0 14px 40px rgba(16,24,40,.08);
}
html[data-theme="dark"] .orders-hero{
  background: linear-gradient(135deg, rgba(255,107,0,.18), rgba(16,24,40,.35));
}
.orders-kicker{font-weight:900; letter-spacing:.3px; color:var(--muted); text-transform:uppercase; font-size:12px}
.orders-h1{font-size:34px; font-weight:900; display:flex; gap:10px; align-items:baseline}
.orders-count{
  font-size:12px; padding:6px 10px; border-radius:999px; border:1px solid rgba(255,107,0,.35);
  background: rgba(255,107,0,.18); font-weight:900;
}
.orders-hero-actions{display:flex; gap:10px; align-items:center; flex-wrap:wrap}

.orders-bar{
  display:flex; gap:10px; align-items:center; flex-wrap:wrap;
  margin:14px 0 10px;
}
.searchbox{
  display:flex; align-items:center; gap:8px;
  padding:10px 12px;
  border-radius:18px;
  border:1px solid var(--border);
  background: rgba(255,255,255,.92);
  min-width: 320px;
  flex:1;
}
html[data-theme="dark"] .searchbox{background: rgba(16,24,40,.35)}
.searchbox .icon{opacity:.7}
.searchbox input{border:none !important; background:transparent !important; padding:0 !important; width:100%}
.searchbox input:focus{outline:none}
.filter{
  min-width:150px;
  border-radius:18px;
  padding:10px 12px;
}

.orders-grid-head{
  display:grid;
  grid-template-columns: 1.5fr .8fr 1fr 1fr 1.2fr 1fr;
  gap:12px;
  padding:10px 12px;
  border-radius:16px;
  border:1px solid var(--border);
  background: rgba(16,24,40,.04);
  font-weight:900;
  text-transform:uppercase;
  letter-spacing:.25px;
  font-size:12px;
}
.orders-grid{display:flex; flex-direction:column; gap:10px; margin-top:10px}
.order-card{
  display:grid;
  grid-template-columns: 1.5fr .8fr 1fr 1fr 1.2fr 1fr;
  gap:12px;
  align-items:center;
  padding:14px 12px;
  border-radius:18px;
  border:1px solid var(--border);
  background: rgba(255,255,255,.92);
  box-shadow: 0 12px 34px rgba(16,24,40,.06);
}
html[data-theme="dark"] .order-card{background: rgba(16,24,40,.35)}
.c-customer{display:flex; gap:10px; align-items:center}
.avatar{
  width:40px; height:40px; border-radius:14px;
  display:flex; align-items:center; justify-content:center;
  background: linear-gradient(180deg, rgba(255,107,0,.95), rgba(255,107,0,.65));
  font-weight:900; color:#151515; border:1px solid rgba(255,107,0,.45);
}
.c-actions{display:flex; gap:10px; justify-content:flex-end; align-items:center; flex-wrap:wrap}
.c-actions form{margin:0}
.right{text-align:right}
.orders-grid-head .right{justify-self:end}
.order-card .right{justify-self:end}

.status-row{display:flex; gap:10px; align-items:center; flex-wrap:wrap}
.status-pill{
  display:inline-flex; align-items:center;
  padding:6px 10px; border-radius:999px; font-weight:900; font-size:12px;
  border:1px solid var(--border);
}
.status-pending{background: rgba(245,158,11,.18); border-color: rgba(245,158,11,.35)}
.status-processing{background: rgba(59,130,246,.18); border-color: rgba(59,130,246,.35)}
.status-complete{background: rgba(16,185,129,.18); border-color: rgba(16,185,129,.35)}
.status-cancelled{background: rgba(239,68,68,.18); border-color: rgba(239,68,68,.35)}
.status-select{border-radius:16px; padding:9px 10px; min-width:170px}

@media (max-width: 980px){
  .orders-grid-head{display:none}
  .order-card{
    grid-template-columns: 1fr;
    align-items:flex-start;
  }
  .c-actions{justify-content:flex-start}
  .searchbox{min-width: 100%}
  .filter{width:100%}
}



/* Page header (admin) */
.page-head{display:flex; justify-content:space-between; align-items:flex-end; gap:14px; flex-wrap:wrap; margin:6px 0 14px}
.ph-left .kicker{font-weight:900; letter-spacing:.3px; color:var(--muted); text-transform:uppercase; font-size:12px}
.ph-left .title{font-size:34px; font-weight:900}
.ph-left .sub{margin-top:4px}
.ph-actions{display:flex; gap:10px; align-items:center; flex-wrap:wrap}
.btn.danger{border-color: rgba(239,68,68,.35); color: #991b1b}
html[data-theme="dark"] .btn.danger{color:#fecaca}

/* Order details */
.grid3{display:grid; grid-template-columns: 1.1fr .9fr 1fr; gap:14px; margin-top:12px}
.custo{display:flex; gap:12px; align-items:center; margin-top:10px}
.avatar.lg{width:52px; height:52px; border-radius:18px; font-size:20px}
.card-title{font-weight:900; color:var(--muted); text-transform:uppercase; letter-spacing:.25px; font-size:12px}
.status-box{margin-top:10px}
.pay-box{margin-top:10px}
.pay-pill{display:flex; justify-content:space-between; align-items:center; padding:10px 12px; border:1px solid var(--border); border-radius:16px; background: rgba(16,24,40,.03); margin-bottom:10px}
.items-head, .items-row{display:grid; grid-template-columns: 1.4fr .5fr .6fr .6fr; gap:10px; align-items:center}
.items-head{padding:10px 0; font-weight:900; color:var(--muted); text-transform:uppercase; letter-spacing:.25px; font-size:12px; border-bottom:1px solid var(--border)}
.items-row{padding:10px 0; border-bottom:1px dashed var(--border)}
.items-row:last-child{border-bottom:none}
.items-foot{display:grid; grid-template-columns: 1fr 1fr 1fr 1fr; gap:10px; margin-top:12px; padding-top:12px; border-top:1px solid var(--border)}
.items-foot > div:nth-child(2), .items-foot > div:nth-child(4){text-align:right}
.right{text-align:right}

/* Products cards */
.prod-grid{display:grid; grid-template-columns: repeat(3, 1fr); gap:14px}
.prod-card{border:1px solid var(--border); border-radius:22px; overflow:hidden; background: rgba(255,255,255,.92); box-shadow: 0 12px 34px rgba(16,24,40,.06)}
html[data-theme="dark"] .prod-card{background: rgba(16,24,40,.35)}
.prod-thumb{position:relative; aspect-ratio: 16/10; background: rgba(16,24,40,.03)}
.prod-thumb img{width:100%; height:100%; object-fit:cover; display:block}
.prod-type{position:absolute; left:12px; top:12px; padding:6px 10px; border-radius:999px; border:1px solid var(--border); background: rgba(255,255,255,.85); font-weight:900; font-size:12px}
html[data-theme="dark"] .prod-type{background: rgba(16,24,40,.55)}
.prod-body{padding:12px 12px}
.prod-title{font-weight:900; font-size:16px; margin-bottom:4px}
.prod-meta{display:flex; justify-content:space-between; align-items:baseline; margin-top:10px}
.prod-actions{display:flex; gap:10px; justify-content:flex-end; align-items:center; margin-top:12px; flex-wrap:wrap}
.prod-actions form{margin:0}

@media (max-width: 980px){
  .grid3{grid-template-columns: 1fr}
  .prod-grid{grid-template-columns: 1fr}
}



/* Button polish */
.btn:hover{background: rgba(16,24,40,.06)}
.btn-primary:hover{filter:brightness(1.03)}
.btn-outline{background: transparent; border-color: rgba(255,107,0,.45)}
.btn-outline:hover{background: rgba(255,107,0,.08)}
.btn-ghost{background: transparent}
.btn-ghost:hover{background: rgba(16,24,40,.05)}


.form-row{display:flex; gap:10px; align-items:center; flex-wrap:wrap; margin-top:10px}
.form-row select{min-width:160px; padding:9px 10px; border-radius:12px}
.form-row .btn{padding:10px 14px}



/* WP-like editor */
.wp-toolbar{
  display:flex;
  gap:8px;
  align-items:center;
  flex-wrap:wrap;
  padding:10px 10px;
  border:1px solid var(--border);
  border-radius:14px;
  background: rgba(16,24,40,.03);
}
.wp-toolbar .spacer{flex:1}
.wp-toolbar .btn{padding:8px 10px}
.wp-toolbar .btn.active{
  background: rgba(255,107,0,.12);
  border-color: rgba(255,107,0,.35);
}
.wp-editor{
  margin-top:10px;
  min-height:220px;
  border:1px solid var(--border);
  border-radius:18px;
  background: rgba(255,255,255,.92);
  outline:none;
}
html[data-theme="dark"] .wp-editor{background: rgba(16,24,40,.35)}
.wp-editor:focus{border-color: rgba(255,107,0,.45); box-shadow: 0 0 0 4px rgba(255,107,0,.10)}



/* ===== Pro UI Kit (Admin + Site) ===== */
:root{
  --ui-radius: 14px;
  --ui-radius2: 18px;
  --ui-shadow: 0 12px 30px rgba(16,24,40,.06);
  --ui-shadow2: 0 18px 46px rgba(16,24,40,.10);
  --ui-ring: 0 0 0 4px rgba(255,107,0,.14);
}

/* Smooth motion */
*{scroll-behavior:smooth}
a, button, input, select, textarea, .card, .table .row, .order-card, .prod-card{
  transition: background .18s ease, border-color .18s ease, transform .18s ease, box-shadow .18s ease, color .18s ease, opacity .18s ease;
}

/* Inputs */
input, select, textarea{
  width:100%;
  padding:11px 12px;
  border-radius: var(--ui-radius);
  border:1px solid var(--border);
  background: rgba(255,255,255,.92);
  font-size:14px;
  line-height:1.2;
}
html[data-theme="dark"] input, 
html[data-theme="dark"] select, 
html[data-theme="dark"] textarea{
  background: rgba(16,24,40,.35);
}
input:focus, select:focus, textarea:focus{
  outline:none;
  border-color: rgba(255,107,0,.55);
  box-shadow: var(--ui-ring);
}

/* Buttons */
.btn{
  border-radius: 12px;
  padding:10px 14px;
  font-weight:900;
  border:1px solid var(--border);
  background: rgba(16,24,40,.03);
}
.btn:active{transform: translateY(1px) scale(.99)}
.btn-primary{
  background: linear-gradient(180deg, rgba(255,107,0,.98), rgba(255,107,0,.78));
  border-color: rgba(255,107,0,.45);
  color:#121212;
  box-shadow: 0 10px 30px rgba(255,107,0,.18);
}
.btn-primary:hover{filter:brightness(1.03); box-shadow: 0 14px 44px rgba(255,107,0,.22)}
.btn-outline{background: transparent; border-color: rgba(255,107,0,.45)}
.btn-outline:hover{background: rgba(255,107,0,.08)}
.btn-ghost{background: transparent}
.btn-ghost:hover{background: rgba(16,24,40,.06)}
.btn.danger{border-color: rgba(239,68,68,.35); color:#991b1b}
html[data-theme="dark"] .btn.danger{color:#fecaca}

/* Cards */
.card{border-radius: var(--ui-radius2); box-shadow: var(--ui-shadow)}
.card:hover{box-shadow: var(--ui-shadow2)}

/* Micro animations */
@keyframes fadeUp { from {opacity:0; transform: translateY(8px)} to {opacity:1; transform: translateY(0)}}
@keyframes pulseRing { 0%{box-shadow:0 0 0 0 rgba(255,107,0,.25)} 100%{box-shadow:0 0 0 14px rgba(255,107,0,0)} }

.animate-in{animation: fadeUp .28s ease both}
.hover-lift:hover{transform: translateY(-2px)}
.pulse{animation:pulseRing 1.2s ease-out}

/* Table polish */
.table .row, .table .row.head{border-radius: var(--ui-radius2)}
.table .row:hover{transform: translateY(-1px); box-shadow: var(--ui-shadow)}

/* Admin spacing */
.section-head{display:flex; justify-content:space-between; align-items:center; gap:12px; flex-wrap:wrap}
.section-head h1{margin:0}
.grid2{display:grid; grid-template-columns:1fr 1fr; gap:12px}
@media (max-width: 980px){ .grid2{grid-template-columns:1fr} }



/* Admin sidebar mobile */
.admin-shell{display:grid; grid-template-columns: 240px 1fr; min-height:100vh}
.admin-sidebar{position:sticky; top:0; height:100vh}
.sidebar-toggle{display:none}
@media (max-width: 980px){
  .admin-shell{grid-template-columns: 1fr}
  .admin-sidebar{
    position:fixed; left:0; top:0; bottom:0;
    width: 260px;
    transform: translateX(-110%);
    background: rgba(255,255,255,.98);
    z-index: 50;
    box-shadow: 0 18px 50px rgba(16,24,40,.18);
  }
  html[data-theme="dark"] .admin-sidebar{background: rgba(16,24,40,.92)}
  .admin-shell.sidebar-open .admin-sidebar{transform: translateX(0)}
  .sidebar-toggle{display:inline-flex}
}

/* Auth layout */
.admin-auth .auth-bg{
  min-height:100vh;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:24px;
  background:
    radial-gradient(900px 400px at 20% 20%, rgba(255,107,0,.28), transparent 60%),
    radial-gradient(700px 360px at 80% 30%, rgba(59,130,246,.18), transparent 60%),
    linear-gradient(180deg, rgba(16,24,40,.04), rgba(255,255,255,.92));
}
.admin-auth .auth-card{
  width:min(520px, 92vw);
  border-radius:24px;
  border:1px solid rgba(255,107,0,.22);
  background: rgba(255,255,255,.92);
  box-shadow: 0 24px 70px rgba(16,24,40,.14);
  padding:18px;
}
html[data-theme="dark"] .admin-auth .auth-card{background: rgba(16,24,40,.55)}
.auth-brand{display:flex; gap:12px; align-items:center; margin-bottom:14px}
.auth-logo{
  width:44px; height:44px; border-radius:16px;
  display:flex; align-items:center; justify-content:center;
  background: linear-gradient(180deg, rgba(255,107,0,.98), rgba(255,107,0,.78));
  color:#121212; font-weight:900;
  box-shadow: 0 14px 44px rgba(255,107,0,.22);
}
.auth-title h1{margin:6px 0 6px; font-size:34px}
.auth-form .btn{width:100%; justify-content:center}



/* Sidebar dropdown (Customization) */
.admin-nav .nav-group{margin:8px 10px}
.admin-nav .nav-group-title{
  list-style:none;
  cursor:pointer;
  padding:10px 12px;
  border-radius:14px;
  border:1px solid var(--border);
  background: rgba(16,24,40,.03);
  font-weight:900;
  display:flex;
  align-items:center;
  justify-content:space-between;
}
.admin-nav .nav-group-title::-webkit-details-marker{display:none}
.admin-nav .nav-group-title:after{
  content:"▾";
  opacity:.7;
}
.admin-nav details[open] .nav-group-title:after{content:"▴"}
.admin-nav .nav-group-items{
  margin-top:8px;
  display:flex;
  flex-direction:column;
  gap:6px;
  padding-left:8px;
}
.admin-nav .nav-group-items a{
  padding:9px 12px;
  border-radius:14px;
  border:1px solid transparent;
}
.admin-nav .nav-group-items a:hover{
  background: rgba(255,107,0,.08);
  border-color: rgba(255,107,0,.25);
  transform: translateY(-1px);
}
@media (max-width: 980px){
  .admin-nav .nav-group{margin:8px 12px}
}



/* Fix sidebar overlap: ensure nav links are block and spaced */
.admin-sidebar, .admin-nav{line-height:1.25}
.admin-nav a{
  display:block;
  padding:10px 12px;
  margin:2px 10px;
  border-radius:14px;
}
.admin-nav a + a{margin-top:2px}
.admin-nav .nav-group{margin:8px 10px}
.admin-nav .nav-group-items{padding-left:0}
.admin-nav .nav-group-items a{margin:0 0 4px 0}
.admin-nav .nav-group-items a:last-child{margin-bottom:0}

/* Ensure details summary doesn't overlap next elements */
.admin-nav details.nav-group{padding:0}
.admin-nav details.nav-group > summary{margin:0}



/* Clean sidebar + icons */
.admin-nav a, .admin-nav .nav-group-title{
  display:flex;
  align-items:center;
  gap:10px;
}
.admin-nav .nav-ico{
  width:18px;
  text-align:center;
  opacity:.55;
  font-weight:900;
  filter: grayscale(1);
}
.admin-nav .nav-txt{flex:1}
.admin-nav a{color: inherit; text-decoration:none}
.admin-nav a:hover .nav-ico, .admin-nav .nav-group-title:hover .nav-ico{opacity:.85; filter:none}

/* Make dropdown look identical to links */
.admin-nav .nav-group{margin:2px 0}
.admin-nav details.nav-group{margin:0}
.admin-nav .nav-group-title{
  margin:2px 10px;
  padding:10px 12px;
  border-radius:14px;
  border:1px solid transparent;
  background: transparent;
}
.admin-nav .nav-group-title:hover{
  background: rgba(255,107,0,.06);
  border-color: rgba(255,107,0,.18);
  transform: translateY(-1px);
}
.admin-nav .nav-group-items{margin:0 10px 6px 10px; padding-left:0}
.admin-nav .nav-group-items a{margin:0; padding:10px 12px}
.admin-nav .nav-group-items a{border:1px solid transparent}
.admin-nav .nav-group-items a:hover{
  background: rgba(255,107,0,.06);
  border-color: rgba(255,107,0,.18);
  transform: translateY(-1px);
}

/* Collapsed indicator rotation */

/* Indent dropdown items slightly */
.admin-nav .nav-group-items a{padding-left:34px}
.admin-nav .nav-group-items a .nav-ico{position:absolute; margin-left:-22px}

/* Ensure relative positioning for pseudo indent icon */
.admin-nav .nav-group-items a{position:relative}



/* Customization summary: clickable like link, arrow on right (no big icon) */
.admin-nav details.nav-group > summary.nav-group-title{
  position:relative;
}
.admin-nav details.nav-group > summary.nav-group-title:after{
  content:"▾";
  position:absolute;
  right:12px;
  opacity:.55;
  transition: transform .18s ease, opacity .18s ease;
}
.admin-nav details.nav-group[open] > summary.nav-group-title:after{
  transform: rotate(180deg);
  opacity:.8;
}



/* ===== Sidebar clean system ===== */
.admin-sidebar{border-right:1px solid var(--border); background: rgba(255,255,255,.92)}
html[data-theme="dark"] .admin-sidebar{background: rgba(16,24,40,.55)}
.admin-nav{padding:10px 0}
.admin-nav a, .admin-nav summary.nav-group-title{
  margin:0 10px;
  padding:10px 12px;
  border-radius:14px;
  display:flex;
  align-items:center;
  gap:10px;
  border:1px solid transparent;
  color:inherit;
  text-decoration:none;
}
.admin-nav a:hover, .admin-nav summary.nav-group-title:hover{
  background: rgba(255,107,0,.06);
  border-color: rgba(255,107,0,.18);
  transform: translateY(-1px);
}
.admin-nav a:active, .admin-nav summary.nav-group-title:active{transform: translateY(0)}
.admin-nav .nav-ico{
  width:18px;
  text-align:center;
  opacity:.45;
  font-weight:900;
  font-size:13px;
}
.admin-nav a:hover .nav-ico, .admin-nav summary.nav-group-title:hover .nav-ico{opacity:.75}

/* Details marker off + cursor */
.admin-nav summary.nav-group-title{cursor:pointer}
.admin-nav summary.nav-group-title::marker{content:""}
.admin-nav summary.nav-group-title::-webkit-details-marker{display:none}

/* Dropdown items look like normal links */
.admin-nav details.nav-group{margin:0}
.admin-nav .nav-group-items{
  margin:6px 10px 8px 10px;
  display:flex;
  flex-direction:column;
  gap:6px;
}
.admin-nav .nav-group-items a{
  margin:0;
  padding:10px 12px 10px 34px;
  position:relative;
}
.admin-nav .nav-group-items a .nav-ico{
  position:absolute;
  left:12px;
  margin:0;
}

/* Arrow on right (transparent) */
.admin-nav details.nav-group > summary.nav-group-title:after{
  content:"▾";
  margin-left:auto;
  opacity:.45;
  transition: transform .18s ease, opacity .18s ease;
}
.admin-nav details.nav-group[open] > summary.nav-group-title:after{
  transform: rotate(180deg);
  opacity:.75;
}

/* Mobile sidebar spacing */
@media (max-width: 980px){
  .admin-nav a, .admin-nav summary.nav-group-title{margin:0 12px}
  .admin-nav .nav-group-items{margin:6px 12px 10px 12px}
}


/* ===== Sidebar Pro (icons + active) ===== */
.admin-sidebar .admin-nav{padding:10px 0}
.admin-sidebar .admin-nav a,
.admin-sidebar .admin-nav summary.nav-group-title{
  margin:0 10px;
  padding:10px 12px;
  border-radius:14px;
  display:flex;
  align-items:center;
  gap:10px;
  border:1px solid transparent;
  color:inherit;
  text-decoration:none;
  cursor:pointer;
}
.admin-sidebar .admin-nav a:hover,
.admin-sidebar .admin-nav summary.nav-group-title:hover{
  background: rgba(255,107,0,.06);
  border-color: rgba(255,107,0,.18);
  transform: translateY(-1px);
}
.admin-sidebar .admin-nav a.active{
  background: rgba(255,107,0,.12);
  border-color: rgba(255,107,0,.30);
  box-shadow: 0 10px 26px rgba(255,107,0,.10);
}
.admin-sidebar .admin-nav .ico{
  width:18px; height:18px; flex:0 0 18px;
  background: currentColor;
  opacity:.55;
  -webkit-mask-repeat:no-repeat; mask-repeat:no-repeat;
  -webkit-mask-position:center; mask-position:center;
  -webkit-mask-size:contain; mask-size:contain;
}
.admin-sidebar .admin-nav a.active .ico{opacity:.85}
.admin-sidebar .admin-nav .txt{flex:1; min-width:0}
.admin-sidebar .admin-nav summary.nav-group-title::marker{content:""}
.admin-sidebar .admin-nav summary.nav-group-title::-webkit-details-marker{display:none}
.admin-sidebar .admin-nav details.nav-group{margin:0}
.admin-sidebar .admin-nav details.nav-group > summary.nav-group-title:after{
  content:"▾";
  margin-left:auto;
  opacity:.45;
  transition: transform .18s ease, opacity .18s ease;
}
.admin-sidebar .admin-nav details.nav-group[open] > summary.nav-group-title:after{
  transform: rotate(180deg);
  opacity:.75;
}
.admin-sidebar .admin-nav .nav-group-items{
  margin:6px 10px 8px 10px;
  display:flex;
  flex-direction:column;
  gap:6px;
}
.admin-sidebar .admin-nav .nav-group-items a{margin:0; padding-left:34px; position:relative}
.admin-sidebar .admin-nav .nav-group-items a .ico{position:absolute; left:12px}
@media (max-width: 980px){
  .admin-sidebar .admin-nav a, .admin-sidebar .admin-nav summary.nav-group-title{margin:0 12px}
  .admin-sidebar .admin-nav .nav-group-items{margin:6px 12px 10px 12px}
}
.admin-sidebar .admin-nav .i-dashboard{-webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22%3E%3Cpath fill=%22none%22 stroke=%22black%22 stroke-width=%222%22 stroke-linecap=%22round%22 d=%22M4 13V4h7v9H4zm9 7V11h7v9h-7zM4 20v-5h7v5H4zm9-9V4h7v5h-7z%22/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22%3E%3Cpath fill=%22none%22 stroke=%22black%22 stroke-width=%222%22 stroke-linecap=%22round%22 d=%22M4 13V4h7v9H4zm9 7V11h7v9h-7zM4 20v-5h7v5H4zm9-9V4h7v5h-7z%22/%3E%3C/svg%3E");}
.admin-sidebar .admin-nav .i-products{-webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22%3E%3Cpath fill=%22none%22 stroke=%22black%22 stroke-width=%222%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22 d=%22M21 8l-9-5-9 5 9 5 9-5zM3 8v8l9 5 9-5V8%22/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22%3E%3Cpath fill=%22none%22 stroke=%22black%22 stroke-width=%222%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22 d=%22M21 8l-9-5-9 5 9 5 9-5zM3 8v8l9 5 9-5V8%22/%3E%3C/svg%3E");}
.admin-sidebar .admin-nav .i-landing{-webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22%3E%3Cpath fill=%22none%22 stroke=%22black%22 stroke-width=%222%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22 d=%22M20.5 13.5L13 21l-9-9V3h9l7.5 7.5z%22/%3E%3Cpath fill=%22none%22 stroke=%22black%22 stroke-width=%222%22 d=%22M7.5 7.5h.01%22/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22%3E%3Cpath fill=%22none%22 stroke=%22black%22 stroke-width=%222%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22 d=%22M20.5 13.5L13 21l-9-9V3h9l7.5 7.5z%22/%3E%3Cpath fill=%22none%22 stroke=%22black%22 stroke-width=%222%22 d=%22M7.5 7.5h.01%22/%3E%3C/svg%3E");}
.admin-sidebar .admin-nav .i-orders{-webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22%3E%3Cpath fill=%22none%22 stroke=%22black%22 stroke-width=%222%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22 d=%22M6 6h15l-1.5 9h-12z%22/%3E%3Cpath fill=%22none%22 stroke=%22black%22 stroke-width=%222%22 stroke-linecap=%22round%22 d=%22M6 6L5 3H2%22/%3E%3Cpath fill=%22none%22 stroke=%22black%22 stroke-width=%222%22 d=%22M9 21a1 1 0 1 0 0-2 1 1 0 0 0 0 2zm9 0a1 1 0 1 0 0-2 1 1 0 0 0 0 2z%22/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22%3E%3Cpath fill=%22none%22 stroke=%22black%22 stroke-width=%222%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22 d=%22M6 6h15l-1.5 9h-12z%22/%3E%3Cpath fill=%22none%22 stroke=%22black%22 stroke-width=%222%22 stroke-linecap=%22round%22 d=%22M6 6L5 3H2%22/%3E%3Cpath fill=%22none%22 stroke=%22black%22 stroke-width=%222%22 d=%22M9 21a1 1 0 1 0 0-2 1 1 0 0 0 0 2zm9 0a1 1 0 1 0 0-2 1 1 0 0 0 0 2z%22/%3E%3C/svg%3E");}
.admin-sidebar .admin-nav .i-plus{-webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22%3E%3Cpath fill=%22none%22 stroke=%22black%22 stroke-width=%222%22 stroke-linecap=%22round%22 d=%22M12 5v14M5 12h14%22/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22%3E%3Cpath fill=%22none%22 stroke=%22black%22 stroke-width=%222%22 stroke-linecap=%22round%22 d=%22M12 5v14M5 12h14%22/%3E%3C/svg%3E");}
.admin-sidebar .admin-nav .i-pages{-webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22%3E%3Cpath fill=%22none%22 stroke=%22black%22 stroke-width=%222%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22 d=%22M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z%22/%3E%3Cpath fill=%22none%22 stroke=%22black%22 stroke-width=%222%22 stroke-linecap=%22round%22 d=%22M14 2v6h6%22/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22%3E%3Cpath fill=%22none%22 stroke=%22black%22 stroke-width=%222%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22 d=%22M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z%22/%3E%3Cpath fill=%22none%22 stroke=%22black%22 stroke-width=%222%22 stroke-linecap=%22round%22 d=%22M14 2v6h6%22/%3E%3C/svg%3E");}
.admin-sidebar .admin-nav .i-translations{-webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22%3E%3Cpath fill=%22none%22 stroke=%22black%22 stroke-width=%222%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22 d=%22M4 5h7M7.5 5c0 7-3.5 11-3.5 11%22/%3E%3Cpath fill=%22none%22 stroke=%22black%22 stroke-width=%222%22 stroke-linecap=%22round%22 d=%22M4 16h8%22/%3E%3Cpath fill=%22none%22 stroke=%22black%22 stroke-width=%222%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22 d=%22M14 20l4-12 4 12%22/%3E%3Cpath fill=%22none%22 stroke=%22black%22 stroke-width=%222%22 d=%22M15.5 16h5%22/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22%3E%3Cpath fill=%22none%22 stroke=%22black%22 stroke-width=%222%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22 d=%22M4 5h7M7.5 5c0 7-3.5 11-3.5 11%22/%3E%3Cpath fill=%22none%22 stroke=%22black%22 stroke-width=%222%22 stroke-linecap=%22round%22 d=%22M4 16h8%22/%3E%3Cpath fill=%22none%22 stroke=%22black%22 stroke-width=%222%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22 d=%22M14 20l4-12 4 12%22/%3E%3Cpath fill=%22none%22 stroke=%22black%22 stroke-width=%222%22 d=%22M15.5 16h5%22/%3E%3C/svg%3E");}
.admin-sidebar .admin-nav .i-media{-webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22%3E%3Cpath fill=%22none%22 stroke=%22black%22 stroke-width=%222%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22 d=%22M4 5h16v14H4z%22/%3E%3Cpath fill=%22none%22 stroke=%22black%22 stroke-width=%222%22 stroke-linecap=%22round%22 d=%22M8 11a1 1 0 1 0 0-2 1 1 0 0 0 0 2z%22/%3E%3Cpath fill=%22none%22 stroke=%22black%22 stroke-width=%222%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22 d=%22M4 16l5-5 4 4 3-3 4 4%22/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22%3E%3Cpath fill=%22none%22 stroke=%22black%22 stroke-width=%222%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22 d=%22M4 5h16v14H4z%22/%3E%3Cpath fill=%22none%22 stroke=%22black%22 stroke-width=%222%22 stroke-linecap=%22round%22 d=%22M8 11a1 1 0 1 0 0-2 1 1 0 0 0 0 2z%22/%3E%3Cpath fill=%22none%22 stroke=%22black%22 stroke-width=%222%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22 d=%22M4 16l5-5 4 4 3-3 4 4%22/%3E%3C/svg%3E");}
.admin-sidebar .admin-nav .i-pay{-webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22%3E%3Cpath fill=%22none%22 stroke=%22black%22 stroke-width=%222%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22 d=%22M3 7h18v10H3z%22/%3E%3Cpath fill=%22none%22 stroke=%22black%22 stroke-width=%222%22 stroke-linecap=%22round%22 d=%22M3 10h18%22/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22%3E%3Cpath fill=%22none%22 stroke=%22black%22 stroke-width=%222%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22 d=%22M3 7h18v10H3z%22/%3E%3Cpath fill=%22none%22 stroke=%22black%22 stroke-width=%222%22 stroke-linecap=%22round%22 d=%22M3 10h18%22/%3E%3C/svg%3E");}
.admin-sidebar .admin-nav .i-custom{-webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22%3E%3Cpath fill=%22none%22 stroke=%22black%22 stroke-width=%222%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22 d=%22M12 3l2.5 5 5.5.8-4 3.9.9 5.6-4.9-2.6-4.9 2.6.9-5.6-4-3.9 5.5-.8z%22/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22%3E%3Cpath fill=%22none%22 stroke=%22black%22 stroke-width=%222%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22 d=%22M12 3l2.5 5 5.5.8-4 3.9.9 5.6-4.9-2.6-4.9 2.6.9-5.6-4-3.9 5.5-.8z%22/%3E%3C/svg%3E");}
.admin-sidebar .admin-nav .i-checkout{-webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22%3E%3Cpath fill=%22none%22 stroke=%22black%22 stroke-width=%222%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22 d=%22M6 2h12v20l-2-1-2 1-2-1-2 1-2-1-2 1z%22/%3E%3Cpath fill=%22none%22 stroke=%22black%22 stroke-width=%222%22 stroke-linecap=%22round%22 d=%22M9 7h6M9 11h6M9 15h6%22/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22%3E%3Cpath fill=%22none%22 stroke=%22black%22 stroke-width=%222%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22 d=%22M6 2h12v20l-2-1-2 1-2-1-2 1-2-1-2 1z%22/%3E%3Cpath fill=%22none%22 stroke=%22black%22 stroke-width=%222%22 stroke-linecap=%22round%22 d=%22M9 7h6M9 11h6M9 15h6%22/%3E%3C/svg%3E");}
.admin-sidebar .admin-nav .i-home{-webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22%3E%3Cpath fill=%22none%22 stroke=%22black%22 stroke-width=%222%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22 d=%22M3 11l9-8 9 8v10a1 1 0 0 1-1 1h-5v-7H9v7H4a1 1 0 0 1-1-1z%22/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22%3E%3Cpath fill=%22none%22 stroke=%22black%22 stroke-width=%222%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22 d=%22M3 11l9-8 9 8v10a1 1 0 0 1-1 1h-5v-7H9v7H4a1 1 0 0 1-1-1z%22/%3E%3C/svg%3E");}
.admin-sidebar .admin-nav .i-menus{-webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22%3E%3Cpath fill=%22none%22 stroke=%22black%22 stroke-width=%222%22 stroke-linecap=%22round%22 d=%22M4 6h16M4 12h16M4 18h16%22/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22%3E%3Cpath fill=%22none%22 stroke=%22black%22 stroke-width=%222%22 stroke-linecap=%22round%22 d=%22M4 6h16M4 12h16M4 18h16%22/%3E%3C/svg%3E");}
.admin-sidebar .admin-nav .i-support{-webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22%3E%3Cpath fill=%22none%22 stroke=%22black%22 stroke-width=%222%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22 d=%22M21 15a4 4 0 0 1-4 4H8l-5 3V7a4 4 0 0 1 4-4h10a4 4 0 0 1 4 4z%22/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22%3E%3Cpath fill=%22none%22 stroke=%22black%22 stroke-width=%222%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22 d=%22M21 15a4 4 0 0 1-4 4H8l-5 3V7a4 4 0 0 1 4-4h10a4 4 0 0 1 4 4z%22/%3E%3C/svg%3E");}
.admin-sidebar .admin-nav .i-tracking{-webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22%3E%3Cpath fill=%22none%22 stroke=%22black%22 stroke-width=%222%22 stroke-linecap=%22round%22 d=%22M12 3v4M3 12h4M12 17v4M17 12h4%22/%3E%3Cpath fill=%22none%22 stroke=%22black%22 stroke-width=%222%22 d=%22M12 8a4 4 0 1 0 0 8 4 4 0 0 0 0-8z%22/%3E%3Cpath fill=%22none%22 stroke=%22black%22 stroke-width=%222%22 d=%22M12 11a1 1 0 1 0 0 2 1 1 0 0 0 0-2z%22/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22%3E%3Cpath fill=%22none%22 stroke=%22black%22 stroke-width=%222%22 stroke-linecap=%22round%22 d=%22M12 3v4M3 12h4M12 17v4M17 12h4%22/%3E%3Cpath fill=%22none%22 stroke=%22black%22 stroke-width=%222%22 d=%22M12 8a4 4 0 1 0 0 8 4 4 0 0 0 0-8z%22/%3E%3Cpath fill=%22none%22 stroke=%22black%22 stroke-width=%222%22 d=%22M12 11a1 1 0 1 0 0 2 1 1 0 0 0 0-2z%22/%3E%3C/svg%3E");}
.admin-sidebar .admin-nav .i-settings{-webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22%3E%3Cpath fill=%22none%22 stroke=%22black%22 stroke-width=%222%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22 d=%22M12 15.5a3.5 3.5 0 1 0 0-7 3.5 3.5 0 0 0 0 7z%22/%3E%3Cpath fill=%22none%22 stroke=%22black%22 stroke-width=%222%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22 d=%22M19.4 15a7.7 7.7 0 0 0 .1-1l2-1.2-2-3.4-2.3.5a7.4 7.4 0 0 0-.8-.8l.5-2.3-3.4-2-1.2 2a7.7 7.7 0 0 0-1 0l-1.2-2-3.4 2 .5 2.3a7.4 7.4 0 0 0-.8.8l-2.3-.5-2 3.4 2 1.2a7.7 7.7 0 0 0 0 1l-2 1.2 2 3.4 2.3-.5c.25.3.52.56.8.8l-.5 2.3 3.4 2 1.2-2c.33.03.66.03 1 0l1.2 2 3.4-2-.5-2.3c.3-.25.56-.52.8-.8l2.3.5 2-3.4z%22/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22%3E%3Cpath fill=%22none%22 stroke=%22black%22 stroke-width=%222%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22 d=%22M12 15.5a3.5 3.5 0 1 0 0-7 3.5 3.5 0 0 0 0 7z%22/%3E%3Cpath fill=%22none%22 stroke=%22black%22 stroke-width=%222%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22 d=%22M19.4 15a7.7 7.7 0 0 0 .1-1l2-1.2-2-3.4-2.3.5a7.4 7.4 0 0 0-.8-.8l.5-2.3-3.4-2-1.2 2a7.7 7.7 0 0 0-1 0l-1.2-2-3.4 2 .5 2.3a7.4 7.4 0 0 0-.8.8l-2.3-.5-2 3.4 2 1.2a7.7 7.7 0 0 0 0 1l-2 1.2 2 3.4 2.3-.5c.25.3.52.56.8.8l-.5 2.3 3.4 2 1.2-2c.33.03.66.03 1 0l1.2 2 3.4-2-.5-2.3c.3-.25.56-.52.8-.8l2.3.5 2-3.4z%22/%3E%3C/svg%3E");}



/* Admin layout safety */
.admin-shell{display:grid; grid-template-columns: 260px 1fr; min-height:100vh}
.admin-main{min-width:0}
.admin-content{padding:18px 0 30px}
@media (max-width: 980px){
  .admin-shell{grid-template-columns: 1fr}
  .admin-main{grid-column:1}
}



/* Support FAB icons */
.support-fab .fab{
  width:52px; height:52px;
  display:flex; align-items:center; justify-content:center;
}
.support-fab .fab img{
  width:24px; height:24px; object-fit:contain;
  filter: drop-shadow(0 10px 18px rgba(16,24,40,.18));
}



/* Support FAB: icon should fill the round button */
.support-fab .fab{
  width:56px !important;
  height:56px !important;
  border-radius:999px !important;
  overflow:hidden;
}
.support-fab .fab img{
  width:100% !important;
  height:100% !important;
  object-fit:cover !important;
  display:block;
  filter:none !important;
}



/* Support FAB: show only logo (no orange background) + shadow + effects */
.support-fab .fab{
  background: transparent !important;
  border: none !important;
  box-shadow: 0 16px 40px rgba(16,24,40,.18) !important;
  transition: transform .18s ease, box-shadow .18s ease, filter .18s ease;
}
.support-fab .fab:hover{
  transform: translateY(-2px) scale(1.04);
  box-shadow: 0 22px 55px rgba(16,24,40,.22) !important;
}
.support-fab .fab:active{
  transform: translateY(0) scale(0.98);
}
.support-fab .fab:focus-visible{
  outline: none;
  box-shadow: 0 0 0 5px rgba(255,107,0,.18), 0 22px 55px rgba(16,24,40,.22) !important;
}
@keyframes fabFloat {
  0%,100%{transform: translateY(0)}
  50%{transform: translateY(-2px)}
}
.support-fab .fab{
  animation: fabFloat 2.6s ease-in-out infinite;
}
.support-fab:hover .fab{
  animation: none;
}



/* ===== Frontend redesign ===== */
.home{padding-bottom:30px}
.section{padding:26px 0}
.section-head{display:flex; justify-content:space-between; align-items:flex-end; gap:12px; margin-bottom:14px}
.h2{font-size:26px; margin:0; letter-spacing:-.02em}
.center{text-align:center}

.hero{padding:18px 0 6px}
.hero-inner{max-width:1100px; margin:0 auto; padding:0 14px}
.hero-slider{position:relative; border-radius:26px; overflow:hidden; border:1px solid var(--border); box-shadow: 0 26px 80px rgba(16,24,40,.10)}
.hero-slide{position:absolute; inset:0; opacity:0; transform: scale(1.02); transition: opacity .5s ease, transform .7s ease}
.hero-slide img{width:100%; height:380px; object-fit:cover; display:block}
.hero-slide.is-active{opacity:1; position:relative; transform: scale(1)}
.hero-nav{position:absolute; top:50%; transform:translateY(-50%); width:42px; height:42px; border-radius:999px; border:1px solid rgba(255,255,255,.6); background: rgba(16,24,40,.25); color:#fff; display:flex; align-items:center; justify-content:center; font-size:24px; backdrop-filter: blur(8px); cursor:pointer}
.hero-nav.prev{left:12px}
.hero-nav.next{right:12px}
.hero-nav:hover{background: rgba(16,24,40,.45)}
.hero-dots{position:absolute; left:0; right:0; bottom:12px; display:flex; gap:8px; justify-content:center}
.hero-dots .dot{width:9px; height:9px; border-radius:999px; border:0; background: rgba(255,255,255,.55); cursor:pointer}
.hero-dots .dot.active{background: rgba(255,255,255,.95); width:22px}

.product-grid{display:grid; grid-template-columns: repeat(4, 1fr); gap:14px}
.p-card{border:1px solid var(--border); border-radius:22px; overflow:hidden; background: rgba(255,255,255,.92); box-shadow: 0 18px 44px rgba(16,24,40,.06); transform: translateY(6px); opacity:0; transition: transform .35s ease, opacity .35s ease, box-shadow .35s ease}
.p-card.in{transform: translateY(0); opacity:1}
.p-card:hover{transform: translateY(-3px); box-shadow: 0 26px 66px rgba(16,24,40,.10)}
.p-img{display:block; aspect-ratio:1/1; background: rgba(16,24,40,.03)}
.p-img img{width:100%; height:100%; object-fit:cover; display:block}
.p-body{padding:12px 12px 14px}
.p-title{display:block; font-weight:900; color: inherit; text-decoration:none; line-height:1.2; margin-bottom:8px}
.p-price{display:flex; gap:10px; align-items:center; margin-bottom:10px}
.p-price .now{font-weight:900}
.p-price .old{text-decoration: line-through; opacity:.55}
.p-actions{display:flex; gap:10px; align-items:center}
.p-actions .btn{flex:1}
.p-cart{margin:0}

.review-grid{display:grid; grid-template-columns: repeat(6, 1fr); gap:10px}
.review-card{border:1px solid var(--border); border-radius:18px; overflow:hidden; background:#fff; box-shadow: 0 14px 34px rgba(16,24,40,.06); transform: translateY(6px); opacity:0; transition: transform .35s ease, opacity .35s ease}
.review-card.in{transform: translateY(0); opacity:1}
.review-card img{width:100%; height:100%; aspect-ratio:1/1; object-fit:cover; display:block}

.btn.glow{box-shadow: 0 18px 44px rgba(255,107,0,.18)}
.btn.glow:hover{box-shadow: 0 26px 66px rgba(255,107,0,.22)}

@media (max-width: 1100px){
  .product-grid{grid-template-columns: repeat(3, 1fr)}
  .review-grid{grid-template-columns: repeat(4, 1fr)}
  .hero-slide img{height:320px}
}
@media (max-width: 780px){
  .product-grid{grid-template-columns: repeat(2, 1fr)}
  .review-grid{grid-template-columns: repeat(3, 1fr)}
  .hero-slide img{height:240px}
  .h2{font-size:22px}
}
@media (max-width: 420px){
  .product-grid{grid-template-columns: 1fr}
  .review-grid{grid-template-columns: repeat(2, 1fr)}
}



/* ===== Product detail (modern) ===== */
.pd{padding: 18px 0 26px}
.pd-wrap{max-width:1100px; margin:0 auto; padding:0 14px; display:grid; grid-template-columns: 1.05fr .95fr; gap:18px; align-items:start}
.pd-gallery{border:1px solid var(--border); border-radius:26px; background: rgba(255,255,255,.92); box-shadow: 0 26px 80px rgba(16,24,40,.08); overflow:hidden; transform: translateY(6px); opacity:0; transition: transform .35s ease, opacity .35s ease}
.pd-gallery.in{transform: translateY(0); opacity:1}
.pd-main{position:relative; aspect-ratio:1/1; background: rgba(16,24,40,.03)}
.pd-main img{width:100%; height:100%; object-fit:cover; display:block; transition: opacity .28s ease}
.pd-badge{position:absolute; left:14px; top:14px; padding:8px 10px; border-radius:999px; background: rgba(255,107,0,.12); border:1px solid rgba(255,107,0,.25); font-weight:900; backdrop-filter: blur(8px)}
.pd-thumbs{display:flex; gap:10px; padding:12px; overflow:auto; background: rgba(255,255,255,.92)}
.pd-thumb{border:1px solid var(--border); border-radius:16px; padding:0; background:#fff; width:66px; height:66px; overflow:hidden; cursor:pointer; flex:0 0 66px; transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease}
.pd-thumb img{width:100%; height:100%; object-fit:cover; display:block}
.pd-thumb:hover{transform: translateY(-2px); box-shadow: 0 14px 30px rgba(16,24,40,.10)}
.pd-thumb.active{border-color: rgba(255,107,0,.35); box-shadow: 0 0 0 4px rgba(255,107,0,.12)}

.pd-info{transform: translateY(6px); opacity:0; transition: transform .35s ease, opacity .35s ease}
.pd-info.in{transform: translateY(0); opacity:1}
.pd-title{font-size:34px; margin:0; letter-spacing:-.02em}
.pd-sub{margin-top:8px}
.pd-price{display:flex; align-items:baseline; gap:12px; margin-top:14px}
.pd-now{font-size:34px; font-weight:900}
.pd-old{opacity:.6; text-decoration: line-through}
.pd-meta{display:flex; flex-wrap:wrap; gap:10px; margin-top:12px}
.chip{display:inline-flex; align-items:center; gap:6px; padding:8px 10px; border-radius:999px; border:1px solid var(--border); background: rgba(16,24,40,.03); font-weight:800}
.chip-ok{background: rgba(34,197,94,.10); border-color: rgba(34,197,94,.25)}
.chip-warn{background: rgba(234,179,8,.12); border-color: rgba(234,179,8,.25)}
.pd-actions{display:flex; gap:12px; margin-top:14px}
.pd-actions .btn{flex:1}
.pd-safe{display:grid; grid-template-columns: 1fr 1fr; gap:10px; margin-top:14px}
.safe-item{border:1px solid var(--border); border-radius:16px; padding:10px 12px; background: rgba(255,255,255,.9); box-shadow: 0 14px 34px rgba(16,24,40,.05)}
.pd-desc{margin-top:14px}
.prose{line-height:1.7}
.prose p{margin:0 0 10px}
.prose img{max-width:100%; border-radius:16px}
.prose table{width:100%; border-collapse:collapse}
.prose td,.prose th{border:1px solid var(--border); padding:8px}

@media (max-width: 980px){
  .pd-wrap{grid-template-columns: 1fr; gap:14px}
  .pd-title{font-size:28px}
  .pd-now{font-size:28px}
  .pd-actions{flex-direction:column}
  .pd-safe{grid-template-columns:1fr}
}



/* Product page tweaks */
.pd-actions{display:flex; gap:12px; margin-top:14px}
.pd-actions .btn{width:100%}
.safe-item{display:flex; align-items:center; gap:8px}
.safe-item .s-ico{font-size:16px}



/* ===== Product detail clean (pd2) ===== */
.pd2{padding:18px 0 28px}
.pd2-wrap{max-width:1100px; margin:0 auto; padding:0 14px}
.pd2-grid{display:grid; grid-template-columns: 1.05fr .95fr; gap:18px; align-items:start}
.pd2-gallery{border:1px solid var(--border); border-radius:22px; background: rgba(255,255,255,.94); box-shadow: 0 22px 70px rgba(16,24,40,.08); overflow:hidden; transform: translateY(6px); opacity:0; transition: transform .35s ease, opacity .35s ease}
.pd2-gallery.in{transform: translateY(0); opacity:1}
.pd2-main{position:relative; aspect-ratio:1/1; background: rgba(16,24,40,.03)}
.pd2-main img{width:100%; height:100%; object-fit:cover; display:block; transition: opacity .25s ease}
.pd2-save{position:absolute; left:14px; top:14px; padding:8px 10px; border-radius:999px; background: rgba(255,107,0,.10); border:1px solid rgba(255,107,0,.22); font-weight:900}
.pd2-thumbs{display:flex; gap:10px; padding:12px; overflow:auto; background: rgba(255,255,255,.96)}
.pd2-thumb{border:1px solid var(--border); border-radius:14px; padding:0; background:#fff; width:64px; height:64px; overflow:hidden; cursor:pointer; flex:0 0 64px; transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease}
.pd2-thumb img{width:100%; height:100%; object-fit:cover; display:block}
.pd2-thumb:hover{transform: translateY(-2px); box-shadow: 0 14px 30px rgba(16,24,40,.10)}
.pd2-thumb.active{border-color: rgba(255,107,0,.35); box-shadow: 0 0 0 4px rgba(255,107,0,.10)}

.pd2-info{transform: translateY(6px); opacity:0; transition: transform .35s ease, opacity .35s ease}
.pd2-info.in{transform: translateY(0); opacity:1}
.pd2-title{font-size:34px; margin:0 0 8px; letter-spacing:-.02em}
.pd2-short{margin:6px 0 14px}
.pd2-priceRow{display:flex; flex-wrap:wrap; align-items:baseline; gap:10px; padding:12px 14px; border:1px solid var(--border); border-radius:18px; background: rgba(255,255,255,.92); box-shadow: 0 14px 34px rgba(16,24,40,.05)}
.pd2-price{font-size:30px; font-weight:900}
.pd2-old{opacity:.55; text-decoration:line-through}
.pd2-spacer{flex:1}
.pd2-pill{display:inline-flex; align-items:center; gap:6px; padding:7px 10px; border-radius:999px; border:1px solid var(--border); background: rgba(16,24,40,.03); font-weight:800}
.pd2-pill.ok{background: rgba(34,197,94,.10); border-color: rgba(34,197,94,.25)}
.pd2-pill.warn{background: rgba(234,179,8,.12); border-color: rgba(234,179,8,.25)}
.pd2-cta{margin-top:14px}
.pd2-cta .btn{width:100%}

.pd2-badges{display:flex; gap:10px; flex-wrap:wrap; margin-top:12px}
.pd2-badge{display:flex; align-items:center; gap:8px; padding:10px 12px; border:1px solid var(--border); border-radius:16px; background: rgba(255,255,255,.92); box-shadow: 0 14px 34px rgba(16,24,40,.05)}
.pd2-badge .bi{font-size:16px}

.pd2-desc{margin-top:14px}

/* Make editor content look clean */
.prose{line-height:1.75}
.prose h1,.prose h2,.prose h3{margin:10px 0 8px}
.prose ul{padding-left:18px}
.prose li{margin:6px 0}
.prose img{max-width:100%; border-radius:16px; box-shadow: 0 18px 44px rgba(16,24,40,.10)}
.prose table{width:100%; border-collapse:collapse}
.prose td,.prose th{border:1px solid var(--border); padding:8px}

@media (max-width: 980px){
  .pd2-grid{grid-template-columns:1fr; gap:14px}
  .pd2-title{font-size:28px}
  .pd2-price{font-size:26px}
}



/* Bigger editor area for short description */
.wp-editor-lg{
  min-height: 220px;
}
#wpVisualShort.wp-editor-lg{
  min-height: 220px;
}



/* ===== Product page v3 (clean + modern) ===== */
.pdp{padding:18px 0 30px}
.pdp-wrap{max-width:1100px; margin:0 auto; padding:0 14px}
.pdp-grid{display:grid; grid-template-columns: 1.05fr .95fr; gap:18px; align-items:start}

.pdp-card{border:1px solid var(--border); border-radius:22px; background: rgba(255,255,255,.94); box-shadow: 0 22px 70px rgba(16,24,40,.08); overflow:hidden}
.pdp-gallery{transform: translateY(6px); opacity:0; transition: transform .35s ease, opacity .35s ease}
.pdp-gallery.in{transform: translateY(0); opacity:1}
.pdp-main{position:relative; aspect-ratio:1/1; background: rgba(16,24,40,.03)}
.pdp-main img{width:100%; height:100%; object-fit:cover; display:block; transition: opacity .25s ease}
.pdp-badge{position:absolute; left:14px; top:14px; padding:8px 10px; border-radius:999px; background: rgba(255,107,0,.10); border:1px solid rgba(255,107,0,.22); font-weight:900}


.pdp-info{transform: translateY(6px); opacity:0; transition: transform .35s ease, opacity .35s ease}
.pdp-info.in{transform: translateY(0); opacity:1}
.pdp-title{font-size:34px; margin:0 0 10px; letter-spacing:-.02em}
.pdp-priceRow{display:flex; flex-wrap:wrap; align-items:baseline; gap:10px; padding:12px 14px; border:1px solid var(--border); border-radius:18px; background: rgba(255,255,255,.92); box-shadow: 0 14px 34px rgba(16,24,40,.05)}
.pdp-price{font-size:30px; font-weight:900}
.pdp-old{opacity:.55; text-decoration:line-through}
.pdp-pill{display:inline-flex; align-items:center; gap:6px; padding:7px 10px; border-radius:999px; border:1px solid var(--border); background: rgba(16,24,40,.03); font-weight:800}
.pdp-pill.ok{background: rgba(34,197,94,.10); border-color: rgba(34,197,94,.25)}
.pdp-pill.warn{background: rgba(234,179,8,.12); border-color: rgba(234,179,8,.25)}

.pdp-short{margin-top:12px}
.pdp-cta{width:100%; margin-top:14px}
.pdp-trust{display:flex; gap:10px; flex-wrap:wrap; margin-top:12px}
.trust{display:flex; align-items:center; gap:8px; padding:10px 12px; border:1px solid var(--border); border-radius:16px; background: rgba(255,255,255,.92); box-shadow: 0 14px 34px rgba(16,24,40,.05)}
.trust span{font-size:16px}

/* Description sandbox: editor content styles apply only inside .desc-box */
.desc-box{border:1px solid var(--border); border-radius:16px; background: rgba(255,255,255,.96); padding:14px; box-shadow: inset 0 1px 0 rgba(16,24,40,.02)}
.desc-scope{font-size:15px; line-height:1.75; color: rgba(16,24,40,.92)}
.desc-scope h1,.desc-scope h2,.desc-scope h3{margin:10px 0 8px; line-height:1.25}
.desc-scope p{margin:0 0 10px}
.desc-scope ul,.desc-scope ol{padding-left:18px; margin:0 0 10px}
.desc-scope li{margin:6px 0}
.desc-scope a{color: var(--primary); text-decoration: underline}
.desc-scope img{max-width:100%; border-radius:14px; box-shadow: 0 18px 44px rgba(16,24,40,.10)}
.desc-scope table{width:100%; border-collapse:collapse; margin:10px 0}
.desc-scope td,.desc-scope th{border:1px solid var(--border); padding:8px; text-align:left}
.desc-scope blockquote{margin:10px 0; padding:10px 12px; border-left:4px solid rgba(255,107,0,.35); background: rgba(255,107,0,.06); border-radius:12px}

@media (max-width: 980px){
  .pdp-grid{grid-template-columns:1fr; gap:14px}
  .pdp-title{font-size:28px}
  .pdp-price{font-size:26px}
}









@media (max-width: 980px){
  .pdp-sticky{
    display:block;
    position: fixed;
    left: 0; right: 0; bottom: 0;
    padding: 10px 12px calc(10px + env(safe-area-inset-bottom));
    background: rgba(255,255,255,.94);
    backdrop-filter: blur(10px);
    border-top: 1px solid var(--border);
    z-index: 1500;
    transform: translateY(110%);
    transition: transform .28s ease, opacity .28s ease;
    opacity: 0;
  }
  .pdp-sticky.show{
    transform: translateY(0);
    opacity: 1;
  }
  .pdp-sticky-inner{
    max-width: 1100px;
    margin: 0 auto;
    display:flex;
    align-items:center;
    gap: 12px;
  }
  .pdp-sticky-price{
    display:flex;
    flex-direction:column;
    line-height:1.1;
    min-width: 92px;
  }
  .pdp-sticky-price .p{font-weight:900; font-size:16px}
  .pdp-sticky-price .o{font-size:12px; opacity:.55; text-decoration: line-through}
  .pdp-sticky-btn{flex:1; border-radius: 14px; padding: 12px 14px}
  /* page bottom spacing so sticky never covers content */
  .pdp{padding-bottom: 110px}
}

/* Mobile sticky bottom CTA (v3 - floating pill) */
.pdp-sticky{display:none}
@media (max-width: 980px){
  .pdp-sticky{
    display:block;
    position: fixed;
    left: 12px; right: 12px;
    bottom: calc(12px + env(safe-area-inset-bottom));
    z-index: 1800;
    transform: translateY(130%);
    opacity: 0;
    transition: transform .26s ease, opacity .26s ease;
    pointer-events: none;
  }
  .pdp-sticky.show{
    transform: translateY(0);
    opacity: 1;
    pointer-events: auto;
  }
  .pdp-sticky-inner{
    max-width: 560px;
    margin: 0 auto;
    display:flex;
    align-items:center;
    gap: 12px;
    padding: 10px 10px;
    border-radius: 18px;
    border: 1px solid var(--border);
    background: rgba(255,255,255,.96);
    backdrop-filter: blur(10px);
    box-shadow: 0 18px 50px rgba(16,24,40,.18);
  }
  .pdp-sticky-price{
    display:flex;
    flex-direction:column;
    line-height:1.05;
    min-width: 96px;
    padding-left: 6px;
  }
  .pdp-sticky-price .p{font-weight:900; font-size:16px}
  .pdp-sticky-price .o{font-size:12px; opacity:.55; text-decoration: line-through}
  .pdp-sticky-btn{
    flex:1;
    border-radius: 14px;
    padding: 12px 14px;
  }
  /* keep content visible above sticky */
  .pdp{padding-bottom: 130px}
  /* move WhatsApp button above sticky if it uses bottom-right fixed */
  .support-float, .sp-support-float, .support-button, .wa-float, .whatsapp-float{
    bottom: calc(92px + env(safe-area-inset-bottom)) !important;
  }
}


/* Product page trust badges (professional) */
.pdp-trust-mini{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  margin-top:12px;
}
.pdp-trust-mini .t{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:8px 10px;
  border:1px solid rgba(16,24,40,.10);
  border-radius:14px;
  background: rgba(16,24,40,.02);
  color: rgba(16,24,40,.72);
  font-size:12.5px;
}
.pdp-trust-mini .ico{
  width:22px;
  height:22px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border-radius:999px;
  background: rgba(255,107,0,.10);
  border:1px solid rgba(255,107,0,.18);
  font-size:13px;
}

/* Reduce side padding on small mobiles */
@media (max-width: 520px){
  .pdp-wrap{padding-left:10px; padding-right:10px}
  .pdp-grid{gap:12px}
  .pdp-card{border-radius:18px}
  .pdp-thumb{width:58px; height:58px; flex:0 0 58px}
  .pdp-title{font-size:26px}
}

/* ===============================
   Checkout redesign
   =============================== */
.checkout-page{
  position:relative;
  isolation:isolate;
  margin-top:10px;
  padding-bottom:8px;
}
.checkout-bg{
  position:absolute;
  inset:-24px -14px auto -14px;
  height:360px;
  pointer-events:none;
  z-index:-1;
  overflow:hidden;
}
.checkout-orb{
  position:absolute;
  border-radius:999px;
  filter:blur(10px);
  opacity:.82;
  animation: floatOrb 16s ease-in-out infinite;
}
.checkout-orb.orb-a{
  width:240px;
  height:240px;
  top:10px;
  left:-30px;
  background:radial-gradient(circle at 30% 30%, rgba(255,107,0,.46), rgba(255,107,0,0));
}
.checkout-orb.orb-b{
  width:230px;
  height:230px;
  right:6%;
  top:0;
  background:radial-gradient(circle at 50% 50%, rgba(255,61,129,.40), rgba(255,61,129,0));
  animation-delay:-5s;
}
.checkout-orb.orb-c{
  width:280px;
  height:280px;
  right:28%;
  top:60px;
  background:radial-gradient(circle at 50% 50%, rgba(124,58,237,.32), rgba(124,58,237,0));
  animation-delay:-9s;
}

.checkout-hero{
  position:relative;
  display:grid;
  grid-template-columns: minmax(0, 1.22fr) minmax(280px, .78fr);
  gap:20px;
  padding:28px;
  border-radius:30px;
  border:1px solid rgba(255,107,0,.18);
  background:
    linear-gradient(135deg, rgba(255,107,0,.15), rgba(255,61,129,.12) 34%, rgba(124,58,237,.12) 68%, rgba(255,255,255,.96)),
    linear-gradient(180deg, rgba(255,255,255,.95), rgba(255,255,255,.86));
  box-shadow: 0 26px 60px rgba(16,24,40,.12);
  overflow:hidden;
}
.checkout-hero::before{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(110deg, transparent 0%, rgba(255,255,255,.2) 48%, rgba(255,255,255,.5) 50%, transparent 54%);
  transform:translateX(-130%);
  animation: heroShine 7s linear infinite;
  pointer-events:none;
}
html[data-theme="dark"] .checkout-hero{
  background:
    linear-gradient(135deg, rgba(255,107,0,.18), rgba(255,61,129,.12) 34%, rgba(124,58,237,.18) 68%, rgba(18,22,33,.94)),
    linear-gradient(180deg, rgba(18,22,33,.94), rgba(18,22,33,.86));
}
.checkout-kicker{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:9px 14px;
  border-radius:999px;
  font-size:12px;
  font-weight:900;
  letter-spacing:.3px;
  text-transform:uppercase;
  color:var(--text);
  border:1px solid rgba(255,107,0,.18);
  background:rgba(255,255,255,.58);
  backdrop-filter: blur(12px);
}
.checkout-title{
  margin:14px 0 10px;
  font-size:clamp(30px, 4vw, 48px);
  line-height:1.08;
}
.checkout-subtitle{
  margin:0;
  max-width:720px;
  font-size:16px;
  line-height:1.65;
  color:var(--muted);
}
.checkout-steps{
  display:grid;
  grid-template-columns:repeat(4, minmax(0, 1fr));
  gap:12px;
  margin-top:22px;
}
.checkout-step{
  display:flex;
  gap:12px;
  align-items:flex-start;
  padding:14px;
  border-radius:22px;
  border:1px solid rgba(16,24,40,.07);
  background:rgba(255,255,255,.62);
  backdrop-filter: blur(12px);
  box-shadow: 0 12px 28px rgba(16,24,40,.05);
}
html[data-theme="dark"] .checkout-step{
  background:rgba(18,22,33,.72);
}
.checkout-step .step-no{
  flex:0 0 auto;
  width:42px;
  height:42px;
  border-radius:16px;
  display:flex;
  align-items:center;
  justify-content:center;
  font-weight:900;
  background:rgba(16,24,40,.06);
}
.checkout-step strong,
.checkout-step span{
  display:block;
}
.checkout-step strong{
  font-size:14px;
}
.checkout-step span:last-child{
  margin-top:4px;
  font-size:12px;
  color:var(--muted);
}
.checkout-step.is-done{
  border-color: rgba(15,157,88,.18);
  background:linear-gradient(135deg, rgba(15,157,88,.12), rgba(255,255,255,.8));
}
.checkout-step.is-done .step-no{
  background:linear-gradient(135deg, rgba(15,157,88,.24), rgba(15,157,88,.12));
}
.checkout-step.is-current{
  border-color: rgba(255,107,0,.25);
  background:linear-gradient(135deg, rgba(255,107,0,.18), rgba(255,255,255,.86));
  box-shadow: 0 18px 34px rgba(255,107,0,.14);
}
.checkout-step.is-current .step-no{
  background:linear-gradient(135deg, rgba(255,107,0,.24), rgba(255,61,129,.18));
}
.checkout-step.is-next{
  border-color: rgba(124,58,237,.14);
}
.checkout-hero-side{
  display:grid;
  gap:12px;
  align-content:start;
}
.hero-stat{
  padding:18px;
  border-radius:24px;
  border:1px solid rgba(16,24,40,.07);
  background:rgba(255,255,255,.66);
  backdrop-filter: blur(12px);
  box-shadow: 0 16px 34px rgba(16,24,40,.06);
  animation: softFloat 9s ease-in-out infinite;
}
html[data-theme="dark"] .hero-stat{
  background:rgba(18,22,33,.74);
}
.hero-stat:nth-child(2){animation-delay:-2.3s}
.hero-stat:nth-child(3){animation-delay:-4.6s}
.hero-stat strong,
.hero-stat small,
.hero-stat span{
  display:block;
}
.hero-stat-label{
  font-size:12px;
  font-weight:900;
  letter-spacing:.25px;
  text-transform:uppercase;
  color:var(--muted);
}
.hero-stat strong{
  margin-top:10px;
  font-size:28px;
  line-height:1.1;
}
.hero-stat small{
  margin-top:8px;
  color:var(--muted);
  line-height:1.45;
}
.hero-stat.accent{
  border-color: rgba(255,107,0,.14);
  background:linear-gradient(135deg, rgba(255,107,0,.12), rgba(255,255,255,.88));
}
.hero-stat.purple{
  border-color: rgba(124,58,237,.14);
  background:linear-gradient(135deg, rgba(124,58,237,.12), rgba(255,255,255,.88));
}
html[data-theme="dark"] .hero-stat.accent{
  background:linear-gradient(135deg, rgba(255,107,0,.16), rgba(18,22,33,.9));
}
html[data-theme="dark"] .hero-stat.purple{
  background:linear-gradient(135deg, rgba(124,58,237,.18), rgba(18,22,33,.9));
}

.checkout-shell{
  display:grid;
  grid-template-columns:minmax(0, 1.08fr) minmax(320px, .92fr);
  gap:18px;
  align-items:start;
  margin-top:18px;
}
.checkout-form-card,
.checkout-summary-card,
.checkout-support-card,
.checkout-mini-card,
.checkout-empty-card{
  border-radius:28px;
  border:1px solid rgba(16,24,40,.08);
  background:linear-gradient(180deg, rgba(255,255,255,.96), rgba(255,255,255,.9));
  box-shadow: 0 24px 60px rgba(16,24,40,.08);
}
html[data-theme="dark"] .checkout-form-card,
html[data-theme="dark"] .checkout-summary-card,
html[data-theme="dark"] .checkout-support-card,
html[data-theme="dark"] .checkout-mini-card,
html[data-theme="dark"] .checkout-empty-card{
  background:linear-gradient(180deg, rgba(18,22,33,.94), rgba(18,22,33,.82));
}
.checkout-form-card,
.checkout-summary-card{
  padding:0 22px 22px;
}
.checkout-summary-card{
  position:sticky;
  top:82px;
}
.checkout-card-head{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:16px;
  padding:22px 0 10px;
}
.checkout-card-head h2,
.checkout-card-head h3{
  margin:6px 0 4px;
  font-size:26px;
  line-height:1.15;
}
.checkout-card-head p{margin:0}
.section-label{
  display:inline-flex;
  align-items:center;
  gap:8px;
  font-size:12px;
  font-weight:900;
  letter-spacing:.25px;
  text-transform:uppercase;
  color:var(--muted);
}
.checkout-head-badge,
.summary-pill,
.payment-mini-badge{
  padding:9px 12px;
  border-radius:999px;
  border:1px solid rgba(255,107,0,.18);
  font-weight:900;
  font-size:12px;
  line-height:1.1;
  white-space:nowrap;
  background:linear-gradient(135deg, rgba(255,107,0,.14), rgba(255,61,129,.08));
}
.checkout-section-grid{
  display:grid;
  grid-template-columns:repeat(2, minmax(0, 1fr));
  gap:14px;
}
.checkout-section-grid .full{grid-column:1 / -1}
.fancy-field{margin:0}
.fancy-field label{
  margin-bottom:8px;
  font-size:13px;
  font-weight:900;
  color:var(--muted);
}
.fancy-field-control{
  position:relative;
}
.fancy-field-control::before{
  content:attr(data-icon);
  position:absolute;
  left:16px;
  top:50%;
  transform:translateY(-50%);
  font-size:18px;
  line-height:1;
  opacity:.9;
  pointer-events:none;
}
.fancy-field input,
.fancy-field textarea,
.fancy-field select{
  width:100%;
  padding:15px 16px 15px 48px;
  border-radius:18px;
  border:1px solid rgba(16,24,40,.08);
  background:linear-gradient(180deg, rgba(255,255,255,.88), rgba(255,255,255,.72));
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.7),
    0 10px 22px rgba(16,24,40,.04);
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease, background .2s ease;
}
html[data-theme="dark"] .fancy-field input,
html[data-theme="dark"] .fancy-field textarea,
html[data-theme="dark"] .fancy-field select{
  background:linear-gradient(180deg, rgba(16,24,40,.56), rgba(16,24,40,.38));
}
.fancy-field textarea{
  min-height:108px;
  resize:vertical;
  padding-top:16px;
}
.fancy-field textarea + *{display:none}
.fancy-field input:focus,
.fancy-field textarea:focus,
.fancy-field select:focus{
  border-color: rgba(255,107,0,.32);
  box-shadow:
    0 0 0 5px rgba(255,107,0,.1),
    0 16px 28px rgba(255,107,0,.08);
  transform:translateY(-1px);
}
.checkout-inline-panels{
  display:grid;
  grid-template-columns:1.2fr .8fr;
  gap:12px;
  margin-top:18px;
}
.account-toggle,
.checkout-help-chip{
  display:flex;
  align-items:flex-start;
  gap:14px;
  padding:18px;
  border-radius:22px;
  border:1px solid rgba(16,24,40,.08);
  background:linear-gradient(135deg, rgba(255,255,255,.84), rgba(255,255,255,.7));
}
html[data-theme="dark"] .account-toggle,
html[data-theme="dark"] .checkout-help-chip{
  background:linear-gradient(135deg, rgba(16,24,40,.55), rgba(16,24,40,.38));
}
.account-toggle{
  cursor:pointer;
}
.account-toggle input{
  margin-top:2px;
  width:18px;
  height:18px;
  accent-color:var(--primary);
}
.checkout-help-chip span{
  width:42px;
  height:42px;
  border-radius:16px;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:22px;
  background:linear-gradient(135deg, rgba(255,107,0,.16), rgba(255,61,129,.12));
}
.checkout-help-chip small{
  display:block;
  margin-top:6px;
  line-height:1.4;
  color:var(--muted);
}
.payment-section{
  margin-top:20px;
}
.payment-section-head{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:14px;
}
.payment-section h3{
  margin:6px 0 0;
  font-size:24px;
}
.payment-method-grid{
  display:grid;
  grid-template-columns:repeat(2, minmax(0, 1fr));
  gap:12px;
  margin-top:14px;
}
.payment-option{
  display:block;
  position:relative;
}
.payment-option input{
  position:absolute;
  opacity:0;
  pointer-events:none;
}
.payment-option-ui{
  display:flex;
  align-items:flex-start;
  gap:14px;
  min-height:112px;
  padding:16px;
  border-radius:24px;
  border:1px solid rgba(16,24,40,.08);
  background:linear-gradient(135deg, rgba(255,255,255,.92), rgba(255,255,255,.76));
  box-shadow: 0 12px 28px rgba(16,24,40,.04);
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease, background .18s ease;
}
html[data-theme="dark"] .payment-option-ui{
  background:linear-gradient(135deg, rgba(16,24,40,.56), rgba(16,24,40,.40));
}
.payment-option:hover .payment-option-ui{
  transform:translateY(-2px);
  box-shadow: 0 18px 34px rgba(16,24,40,.08);
}
.payment-option.is-active .payment-option-ui,
.payment-option input:checked + .payment-option-ui{
  border-color: rgba(255,107,0,.35);
  background:linear-gradient(135deg, rgba(255,107,0,.14), rgba(255,61,129,.08), rgba(255,255,255,.92));
  box-shadow: 0 20px 36px rgba(255,107,0,.12);
}
html[data-theme="dark"] .payment-option.is-active .payment-option-ui,
html[data-theme="dark"] .payment-option input:checked + .payment-option-ui{
  background:linear-gradient(135deg, rgba(255,107,0,.18), rgba(255,61,129,.08), rgba(18,22,33,.92));
}
.payment-badge{
  flex:0 0 auto;
  width:52px;
  height:52px;
  border-radius:18px;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:24px;
  background:radial-gradient(circle at 35% 35%, rgba(255,255,255,.95), rgba(255,255,255,.45));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.7), 0 10px 20px rgba(16,24,40,.06);
}
html[data-theme="dark"] .payment-badge{
  background:radial-gradient(circle at 35% 35%, rgba(255,255,255,.18), rgba(255,255,255,.06));
}
.payment-copy{
  display:flex;
  flex-direction:column;
  gap:8px;
  min-width:0;
}
.payment-title-row{
  display:flex;
  align-items:center;
  gap:8px;
  flex-wrap:wrap;
}
.payment-title-row strong{
  font-size:16px;
}
.pay-chip{
  display:inline-flex;
  align-items:center;
  padding:5px 9px;
  border-radius:999px;
  font-size:11px;
  line-height:1;
  font-weight:900;
  border:1px solid rgba(255,107,0,.18);
  background:rgba(255,255,255,.6);
}
.payment-check{
  margin-left:auto;
  width:28px;
  height:28px;
  border-radius:999px;
  border:1px solid rgba(16,24,40,.12);
  background:rgba(16,24,40,.04);
  position:relative;
  flex:0 0 auto;
}
.payment-option.is-active .payment-check,
.payment-option input:checked + .payment-option-ui .payment-check{
  border-color: transparent;
  background:linear-gradient(135deg, var(--primary), #ff3d81 58%, #7c3aed);
  box-shadow: 0 10px 18px rgba(255,107,0,.2);
}
.payment-option.is-active .payment-check::after,
.payment-option input:checked + .payment-option-ui .payment-check::after{
  content:"";
  position:absolute;
  inset:7px;
  border-radius:999px;
  background:#fff;
}
.checkout-note-grid{
  display:grid;
  grid-template-columns:repeat(2, minmax(0, 1fr));
  gap:12px;
  margin-top:18px;
}
.checkout-note-card{
  display:flex;
  align-items:flex-start;
  gap:14px;
  padding:16px;
  border-radius:22px;
  border:1px solid rgba(16,24,40,.08);
}
.checkout-note-card strong,
.checkout-note-card p{
  display:block;
}
.checkout-note-card p{
  margin:8px 0 0;
  line-height:1.55;
  color:var(--muted);
}
.note-icon{
  width:44px;
  height:44px;
  border-radius:16px;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:22px;
  flex:0 0 auto;
}
.checkout-note-card.soft-orange{
  background:linear-gradient(135deg, rgba(255,107,0,.11), rgba(255,255,255,.9));
}
.checkout-note-card.soft-orange .note-icon{
  background:linear-gradient(135deg, rgba(255,107,0,.18), rgba(255,61,129,.12));
}
.checkout-note-card.soft-purple{
  background:linear-gradient(135deg, rgba(124,58,237,.1), rgba(255,255,255,.92));
}
.checkout-note-card.soft-purple .note-icon{
  background:linear-gradient(135deg, rgba(124,58,237,.16), rgba(255,61,129,.1));
}
html[data-theme="dark"] .checkout-note-card.soft-orange{
  background:linear-gradient(135deg, rgba(255,107,0,.16), rgba(18,22,33,.9));
}
html[data-theme="dark"] .checkout-note-card.soft-purple{
  background:linear-gradient(135deg, rgba(124,58,237,.18), rgba(18,22,33,.9));
}
.btn-checkout-submit{
  width:100%;
  margin-top:18px;
  padding:18px 22px;
  border:0;
  border-radius:20px;
  color:#fff;
  font-size:16px;
  letter-spacing:.2px;
  background:linear-gradient(135deg, var(--primary), #ff3d81 56%, #7c3aed);
  box-shadow: 0 22px 40px rgba(255,107,0,.22);
  transition: transform .18s ease, box-shadow .18s ease, filter .18s ease;
}
.btn-checkout-submit:hover{
  transform:translateY(-1px);
  box-shadow: 0 26px 48px rgba(255,107,0,.26);
  filter:brightness(1.03);
}
.btn-checkout-submit[disabled]{
  opacity:.82;
  cursor:wait;
}
.pulse-submit{
  animation: submitPulse 3.2s ease-in-out infinite;
}

.checkout-saving-banner{
  display:flex;
  align-items:center;
  gap:12px;
  padding:15px 16px;
  border-radius:22px;
  border:1px solid rgba(15,157,88,.14);
  background:linear-gradient(135deg, rgba(255,107,0,.1), rgba(15,157,88,.12));
}
.checkout-saving-banner span{
  font-size:24px;
}
.checkout-saving-banner strong,
.checkout-saving-banner div{
  display:block;
}
.checkout-saving-banner div:last-child{
  font-weight:900;
}
.summary-list{
  display:flex;
  flex-direction:column;
  gap:12px;
  margin-top:10px;
}
.summary-item{
  display:grid;
  grid-template-columns:86px 1fr;
  gap:12px;
  padding:14px;
  border-radius:24px;
  border:1px solid rgba(16,24,40,.08);
  background:linear-gradient(135deg, rgba(255,255,255,.92), rgba(255,255,255,.78));
  box-shadow: 0 12px 28px rgba(16,24,40,.04);
}
html[data-theme="dark"] .summary-item{
  background:linear-gradient(135deg, rgba(16,24,40,.58), rgba(16,24,40,.42));
}
.summary-media{
  width:86px;
  height:86px;
  border-radius:18px;
  overflow:hidden;
  background:rgba(16,24,40,.05);
}
.summary-media img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}
.summary-copy{
  min-width:0;
}
.summary-top{
  display:flex;
  justify-content:space-between;
  gap:12px;
  align-items:flex-start;
}
.summary-title{
  font-size:15px;
  font-weight:900;
  line-height:1.35;
}
.summary-meta{
  margin-top:5px;
  font-size:13px;
  color:var(--muted);
}
.summary-line-total{
  font-size:18px;
  font-weight:900;
  white-space:nowrap;
}
.summary-bottom{
  display:flex;
  justify-content:space-between;
  gap:12px;
  flex-wrap:wrap;
  align-items:center;
  margin-top:14px;
}
.qty-stepper{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:6px;
  border-radius:999px;
  border:1px solid rgba(16,24,40,.08);
  background:rgba(16,24,40,.03);
}
.qty-btn{
  width:36px;
  height:36px;
  border-radius:999px;
  border:0;
  cursor:pointer;
  font-size:24px;
  line-height:1;
  display:flex;
  align-items:center;
  justify-content:center;
  background:linear-gradient(135deg, rgba(255,107,0,.16), rgba(124,58,237,.14));
  transition: transform .14s ease, filter .14s ease;
}
.qty-btn:hover{transform:scale(1.06); filter:brightness(1.04)}
.qty-btn.bump{transform:scale(1.08)}
.qty-stepper input{
  width:56px;
  padding:8px 4px;
  text-align:center;
  border:none;
  background:transparent;
  font-weight:900;
  color:var(--text);
}
.qty-stepper input:focus{outline:none; box-shadow:none}
.qty-stepper input::-webkit-outer-spin-button,
.qty-stepper input::-webkit-inner-spin-button{
  -webkit-appearance:none;
  margin:0;
}
.summary-savings{
  display:inline-flex;
  align-items:center;
  padding:7px 10px;
  border-radius:999px;
  font-size:12px;
  font-weight:900;
  color:#0f9d58;
  border:1px solid rgba(15,157,88,.18);
  background:rgba(15,157,88,.12);
}
.checkout-totals{
  margin-top:16px;
  padding-top:16px;
  border-top:1px dashed var(--border);
  display:flex;
  flex-direction:column;
  gap:10px;
}
.total-row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  color:var(--muted);
}
.total-row strong{
  color:var(--text);
  font-size:18px;
}
.total-row.accent strong{color:#0f9d58}
.total-row.grand{
  padding:15px 16px;
  border-radius:22px;
  border:1px solid rgba(255,107,0,.16);
  background:linear-gradient(135deg, rgba(255,107,0,.14), rgba(124,58,237,.12));
}
.total-row.grand span,
.total-row.grand strong{
  color:var(--text);
  font-size:18px;
  font-weight:900;
}
.summary-actions{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  margin-top:16px;
}
.summary-actions .btn{
  flex:1;
  min-width:170px;
}
.btn-update-cart{
  background:linear-gradient(135deg, rgba(255,107,0,.12), rgba(255,61,129,.06));
  border-color: rgba(255,107,0,.22);
}
.trust-strip{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  margin-top:14px;
}
.trust-pill{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:10px 12px;
  border-radius:999px;
  border:1px solid rgba(16,24,40,.08);
  background:rgba(16,24,40,.03);
  font-size:12px;
  font-weight:900;
}
.checkout-side-stack{
  display:grid;
  gap:14px;
  margin-top:14px;
}
.checkout-support-card,
.checkout-mini-card{
  display:flex;
  align-items:flex-start;
  gap:14px;
  padding:18px;
}
.checkout-support-card{
  background:linear-gradient(135deg, rgba(37,211,102,.12), rgba(255,255,255,.94));
}
.checkout-mini-card{
  background:linear-gradient(135deg, rgba(124,58,237,.12), rgba(255,255,255,.94));
}
html[data-theme="dark"] .checkout-support-card{
  background:linear-gradient(135deg, rgba(37,211,102,.14), rgba(18,22,33,.92));
}
html[data-theme="dark"] .checkout-mini-card{
  background:linear-gradient(135deg, rgba(124,58,237,.16), rgba(18,22,33,.92));
}
.support-icon{
  width:52px;
  height:52px;
  border-radius:18px;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:24px;
  flex:0 0 auto;
  background:radial-gradient(circle at 35% 35%, rgba(255,255,255,.92), rgba(255,255,255,.4));
  box-shadow: 0 12px 24px rgba(16,24,40,.08);
}
.support-icon.mini{
  background:radial-gradient(circle at 35% 35%, rgba(255,255,255,.88), rgba(255,255,255,.32));
}
.support-copy h4{
  margin:2px 0 8px;
  font-size:18px;
}
.support-copy p{
  margin:0;
  color:var(--muted);
  line-height:1.55;
}
.support-copy .link-hint{
  margin-top:10px;
  font-weight:900;
  color:var(--primary);
}
.checkout-mini-card ul{
  margin:10px 0 12px;
  padding-left:18px;
  color:var(--muted);
}
.checkout-mini-card li{
  margin-bottom:6px;
}

.checkout-empty-state{
  max-width:760px;
  margin:0 auto;
}
.checkout-empty-card{
  padding:34px;
  text-align:center;
}
.empty-cart-icon{
  width:88px;
  height:88px;
  border-radius:28px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  font-size:42px;
  background:linear-gradient(135deg, rgba(255,107,0,.14), rgba(124,58,237,.12));
  box-shadow: 0 22px 40px rgba(255,107,0,.12);
}
.checkout-empty-actions{
  justify-content:center;
  margin-top:20px;
}

.reveal-on-scroll{
  opacity:0;
  transform:translateY(16px) scale(.99);
  transition: opacity .6s ease, transform .6s ease;
}
.reveal-on-scroll.is-visible{
  opacity:1;
  transform:none;
}

@keyframes floatOrb{
  0%, 100%{transform:translate3d(0,0,0) scale(1)}
  25%{transform:translate3d(18px,-10px,0) scale(1.05)}
  50%{transform:translate3d(-12px,12px,0) scale(.96)}
  75%{transform:translate3d(10px,18px,0) scale(1.04)}
}
@keyframes heroShine{
  0%{transform:translateX(-130%)}
  14%,100%{transform:translateX(130%)}
}
@keyframes softFloat{
  0%, 100%{transform:translateY(0)}
  50%{transform:translateY(-6px)}
}
@keyframes submitPulse{
  0%, 100%{box-shadow: 0 22px 40px rgba(255,107,0,.22)}
  50%{box-shadow: 0 28px 54px rgba(255,107,0,.32)}
}

@media (max-width: 1080px){
  .checkout-shell{grid-template-columns:1fr}
  .checkout-summary-card{position:relative; top:0}
}
@media (max-width: 980px){
  .checkout-hero{grid-template-columns:1fr; padding:24px}
  .checkout-steps{grid-template-columns:repeat(2, minmax(0, 1fr))}
  .checkout-section-grid,
  .payment-method-grid,
  .checkout-note-grid,
  .checkout-inline-panels{grid-template-columns:1fr}
}
@media (max-width: 720px){
  .checkout-card-head{flex-direction:column}
  .payment-section-head{flex-direction:column; align-items:flex-start}
  .summary-item{grid-template-columns:72px 1fr}
  .summary-media{width:72px; height:72px}
}
@media (max-width: 560px){
  .checkout-bg{height:280px}
  .checkout-hero{padding:20px; border-radius:24px}
  .checkout-title{font-size:30px}
  .checkout-steps{grid-template-columns:1fr}
  .checkout-form-card,
  .checkout-summary-card{padding:0 18px 18px}
  .summary-item{grid-template-columns:1fr}
  .summary-media{width:100%; height:180px}
  .summary-top{flex-direction:column}
  .summary-line-total{font-size:20px}
  .summary-actions{flex-direction:column}
  .summary-actions .btn{width:100%}
  .checkout-empty-card{padding:24px}
}
@media (prefers-reduced-motion: reduce){
  .checkout-orb,
  .checkout-hero::before,
  .hero-stat,
  .pulse-submit,
  .reveal-on-scroll{
    animation:none !important;
    transition:none !important;
    transform:none !important;
  }
}


/* === CHECKOUT MINIMAL ORANGE REDESIGN === */
:root{
  --checkout-accent:#f97316;
  --checkout-accent-deep:#ea580c;
  --checkout-accent-soft:#fff7ed;
  --checkout-border:#e5e7eb;
  --checkout-text:#111827;
  --checkout-muted:#6b7280;
  --checkout-surface:#ffffff;
  --checkout-shadow:0 22px 48px rgba(17,24,39,.08);
}
.checkout-minimal-wrap{
  min-height:calc(100vh - 120px);
  padding:48px 16px 72px;
  background:radial-gradient(circle at top, rgba(249,115,22,.08), transparent 32%), #fff;
  display:flex;
  justify-content:center;
  align-items:flex-start;
}
.checkout-minimal-card{
  width:min(100%, 480px);
  background:var(--checkout-surface);
  border:1px solid var(--checkout-border);
  border-radius:28px;
  box-shadow:var(--checkout-shadow);
  padding:28px;
  display:flex;
  flex-direction:column;
  gap:22px;
  animation:checkoutFadeUp .55s ease both;
}
.checkout-empty-wrap{ align-items:center; }
.checkout-empty-card{ text-align:center; }
.checkout-empty-icon{
  width:68px; height:68px; border-radius:20px; margin:0 auto 8px;
  display:grid; place-items:center; font-size:28px;
  background:var(--checkout-accent-soft); color:var(--checkout-accent-deep);
}
.checkout-minimal-header{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:16px;
}
.checkout-overline{
  margin:0 0 8px;
  font-size:12px;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--checkout-accent-deep);
  font-weight:700;
}
.checkout-minimal-header h1,
.checkout-empty-card h1{
  margin:0;
  font-size:32px;
  line-height:1.1;
  color:var(--checkout-text);
}
.checkout-empty-card p{ color:var(--checkout-muted); margin:0 0 12px; }
.checkout-summary-pill{
  flex:0 0 auto;
  min-width:64px;
  text-align:center;
  padding:10px 14px;
  border-radius:999px;
  background:var(--checkout-accent-soft);
  color:var(--checkout-accent-deep);
  font-size:13px;
  font-weight:700;
}
.checkout-summary-block{
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  gap:16px;
  padding:18px 18px;
  border:1px solid var(--checkout-border);
  border-radius:20px;
  background:#fff;
}
.checkout-summary-block h2,
.checkout-section-title{
  margin:0 0 8px;
  font-size:14px;
  line-height:1.4;
  color:var(--checkout-text);
  font-weight:700;
}
.checkout-summary-block p{ margin:0; color:var(--checkout-muted); }
.checkout-summary-block .muted{ color:var(--checkout-muted); }
.summary-price{
  font-size:28px;
  line-height:1;
  font-weight:800;
  color:var(--checkout-accent-deep);
  white-space:nowrap;
}
.checkout-form-section, .checkout-payment-section{ display:flex; flex-direction:column; gap:14px; }
.checkout-form-section .field{ display:flex; flex-direction:column; gap:8px; margin:0; }
.checkout-form-section label{ font-size:14px; font-weight:600; color:var(--checkout-text); }
.checkout-form-section input, .checkout-form-section textarea{
  width:100%;
  border:1px solid var(--checkout-border);
  border-radius:16px;
  background:#fff;
  color:var(--checkout-text);
  padding:14px 16px;
  font-size:15px;
  transition:border-color .22s ease, box-shadow .22s ease, transform .22s ease;
}
.checkout-form-section textarea{ min-height:110px; resize:vertical; }
.checkout-form-section input::placeholder, .checkout-form-section textarea::placeholder{ color:#9ca3af; }
.checkout-form-section input:focus, .checkout-form-section textarea:focus{
  outline:none;
  border-color:rgba(249,115,22,.7);
  box-shadow:0 0 0 4px rgba(249,115,22,.12);
  transform:translateY(-1px);
}
.checkout-register-box{
  display:flex;
  gap:12px;
  align-items:flex-start;
  padding:16px 16px;
  border:1px solid var(--checkout-border);
  border-radius:18px;
  background:#fffaf5;
  cursor:pointer;
  transition:border-color .22s ease, transform .22s ease, box-shadow .22s ease;
}
.checkout-register-box:hover{
  border-color:rgba(249,115,22,.35);
  transform:translateY(-1px);
  box-shadow:0 14px 30px rgba(249,115,22,.08);
}
.checkout-register-box input{
  width:18px; height:18px; margin-top:2px; accent-color:var(--checkout-accent);
}
.checkout-register-box strong{ display:block; color:var(--checkout-text); font-size:14px; }
.checkout-register-box small{ display:block; margin-top:4px; color:var(--checkout-muted); line-height:1.5; }
.checkout-payment-list{ display:flex; flex-direction:column; gap:12px; }
.checkout-payment-card{ display:block; cursor:pointer; }
.checkout-payment-card input{ position:absolute; opacity:0; pointer-events:none; }
.checkout-payment-ui{
  display:flex; align-items:center; gap:14px;
  border:1px solid var(--checkout-border);
  border-radius:18px;
  padding:16px;
  background:#fff;
  transition:border-color .22s ease, box-shadow .22s ease, transform .22s ease, background .22s ease;
}
.checkout-payment-card:hover .checkout-payment-ui{
  border-color:rgba(249,115,22,.35);
  transform:translateY(-1px);
  box-shadow:0 14px 30px rgba(17,24,39,.05);
}
.checkout-payment-card.is-active .checkout-payment-ui,
.checkout-payment-card input:checked + .checkout-payment-ui{
  border-color:rgba(249,115,22,.6);
  background:linear-gradient(180deg, #fffaf5 0%, #ffffff 100%);
  box-shadow:0 16px 34px rgba(249,115,22,.12);
}
.checkout-payment-badge{
  min-width:52px; height:52px; padding:0 10px;
  display:grid; place-items:center;
  border-radius:16px;
  background:var(--checkout-accent-soft);
  color:var(--checkout-accent-deep);
  font-size:13px; font-weight:800; letter-spacing:.04em;
}
.checkout-payment-text{ display:flex; flex-direction:column; gap:4px; min-width:0; flex:1 1 auto; }
.checkout-payment-text strong{ color:var(--checkout-text); font-size:15px; line-height:1.3; }
.checkout-payment-text small{ color:var(--checkout-muted); line-height:1.45; }
.checkout-payment-dot{
  width:20px; height:20px; border-radius:999px; border:1.6px solid #cbd5e1; position:relative; flex:0 0 auto;
  transition:border-color .22s ease, transform .22s ease;
}
.checkout-payment-dot::after{
  content:''; position:absolute; inset:4px; border-radius:999px; background:var(--checkout-accent);
  transform:scale(.2); opacity:0; transition:transform .22s ease, opacity .22s ease;
}
.checkout-payment-card.is-active .checkout-payment-dot,
.checkout-payment-card input:checked + .checkout-payment-ui .checkout-payment-dot{ border-color:var(--checkout-accent); transform:scale(1.03); }
.checkout-payment-card.is-active .checkout-payment-dot::after,
.checkout-payment-card input:checked + .checkout-payment-ui .checkout-payment-dot::after{ transform:scale(1); opacity:1; }
.checkout-minimal-btn{
  width:100%;
  min-height:56px;
  border:none;
  border-radius:18px;
  font-size:16px;
  font-weight:800;
  letter-spacing:.01em;
  background:linear-gradient(135deg, var(--checkout-accent) 0%, var(--checkout-accent-deep) 100%);
  box-shadow:0 18px 34px rgba(249,115,22,.22);
  transition:transform .22s ease, box-shadow .22s ease, filter .22s ease;
}
.checkout-minimal-btn:hover{
  transform:translateY(-2px);
  box-shadow:0 22px 40px rgba(249,115,22,.28);
  filter:saturate(1.05);
}
.checkout-minimal-btn:active{ transform:translateY(0); }
@keyframes checkoutFadeUp{
  from{ opacity:0; transform:translateY(18px); }
  to{ opacity:1; transform:translateY(0); }
}
@media (max-width: 640px){
  .checkout-minimal-wrap{ padding:20px 12px 40px; }
  .checkout-minimal-card{ width:100%; padding:20px; border-radius:24px; gap:18px; }
  .checkout-minimal-header{ flex-direction:column; align-items:flex-start; }
  .checkout-minimal-header h1, .checkout-empty-card h1{ font-size:28px; }
  .checkout-summary-block{ padding:16px; }
  .summary-price{ font-size:24px; }
  .checkout-payment-ui{ padding:14px; }
}
html[data-theme="dark"] .checkout-minimal-wrap{ background:#0f172a; }
html[data-theme="dark"] .checkout-minimal-card,
html[data-theme="dark"] .checkout-summary-block,
html[data-theme="dark"] .checkout-payment-ui,
html[data-theme="dark"] .checkout-form-section input,
html[data-theme="dark"] .checkout-form-section textarea{
  background:#111827; color:#f9fafb; border-color:#253144;
}
html[data-theme="dark"] .checkout-minimal-header h1,
html[data-theme="dark"] .checkout-empty-card h1,
html[data-theme="dark"] .checkout-section-title,
html[data-theme="dark"] .checkout-form-section label,
html[data-theme="dark"] .checkout-payment-text strong,
html[data-theme="dark"] .checkout-register-box strong{ color:#f9fafb; }
html[data-theme="dark"] .checkout-summary-block p,
html[data-theme="dark"] .checkout-register-box small,
html[data-theme="dark"] .checkout-payment-text small,
html[data-theme="dark"] .checkout-empty-card p{ color:#cbd5e1; }
html[data-theme="dark"] .checkout-register-box{ background:#1f2937; border-color:#253144; }


.account-shell{
  display:flex;
  flex-direction:column;
  gap:18px;
  padding:20px 0 32px;
}
.account-hero{
  display:grid;
  grid-template-columns:minmax(0,1fr) 320px;
  gap:18px;
  padding:22px;
  border-radius:28px;
  background:
    radial-gradient(circle at top left, rgba(255,107,0,.14), transparent 34%),
    linear-gradient(180deg, rgba(255,255,255,.99), rgba(255,255,255,.93));
}
.account-kicker{
  display:inline-flex;
  width:max-content;
  padding:8px 12px;
  border-radius:999px;
  border:1px solid rgba(255,107,0,.16);
  background:rgba(255,107,0,.08);
  color:var(--primary);
  font-weight:800;
  letter-spacing:.08em;
  text-transform:uppercase;
  font-size:12px;
}
.account-hero h1{
  margin:14px 0 10px;
  font-size:clamp(28px, 5vw, 40px);
  line-height:1.08;
}
.account-hero__meta{
  display:flex;
  flex-wrap:wrap;
  gap:12px;
  margin-top:18px;
}
.account-chip{
  min-width:180px;
  display:flex;
  flex-direction:column;
  gap:6px;
  padding:14px 16px;
  border-radius:18px;
  border:1px solid rgba(16,24,40,.08);
  background:rgba(255,255,255,.8);
}
.account-chip span,
.account-stat span,
.info-row span{
  color:var(--muted);
  font-size:13px;
}
.account-profile{
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  justify-content:space-between;
  gap:16px;
  padding:20px;
  border-radius:24px;
}
.account-avatar{
  width:68px;
  height:68px;
  border-radius:20px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  font-size:28px;
  font-weight:900;
  color:#fff;
  background:linear-gradient(135deg, rgba(255,107,0,.96), rgba(255,140,56,.82));
  box-shadow:0 18px 34px rgba(255,107,0,.24);
}
.account-profile__name{font-size:20px; margin-bottom:4px}
.account-stats{
  display:grid;
  grid-template-columns:repeat(4, minmax(0, 1fr));
  gap:14px;
}
.account-stat{
  min-height:126px;
  display:flex;
  flex-direction:column;
  justify-content:space-between;
}
.account-stat strong{
  font-size:28px;
  line-height:1;
}
.account-stat small{
  color:var(--muted);
}
.account-grid{
  display:grid;
  grid-template-columns:minmax(0, 1.3fr) minmax(280px, .7fr);
  gap:18px;
}
.account-side{
  display:flex;
  flex-direction:column;
  gap:18px;
}
.account-panel{
  border-radius:24px;
}
.section-head{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:12px;
  margin-bottom:18px;
}
.section-head.compact{margin-bottom:14px}
.section-head h2{
  margin:0 0 4px;
  font-size:22px;
}
.section-head p{margin:0}
.info-list{
  display:flex;
  flex-direction:column;
  gap:12px;
}
.info-row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding:14px 16px;
  border-radius:16px;
  background:rgba(16,24,40,.03);
  border:1px solid rgba(16,24,40,.06);
}
.account-password-form{display:flex; flex-direction:column; gap:4px}
.account-submit{width:100%; min-height:48px; margin-top:4px}
.account-empty{
  display:flex;
  align-items:flex-start;
  gap:14px;
  padding:18px;
  border-radius:18px;
  border:1px dashed rgba(255,107,0,.24);
  background:rgba(255,107,0,.04);
}
.account-empty__icon{
  width:44px;
  height:44px;
  border-radius:14px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  background:#fff;
  border:1px solid rgba(255,107,0,.14);
  font-size:20px;
  flex:0 0 auto;
}
.account-empty p{margin:6px 0 0}
.download-list,
.order-list{
  display:flex;
  flex-direction:column;
  gap:14px;
}
.download-card,
.order-card{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  padding:16px 18px;
  border-radius:20px;
  border:1px solid rgba(16,24,40,.08);
  background:rgba(255,255,255,.76);
  transition:transform .22s ease, box-shadow .22s ease, border-color .22s ease;
}
.download-card:hover,
.order-card:hover{
  transform:translateY(-2px);
  box-shadow:0 18px 34px rgba(15,23,42,.08);
  border-color:rgba(255,107,0,.18);
}
.download-card h3,
.order-card h3{margin:0 0 4px; font-size:18px}
.download-card p,
.order-card p{margin:0}
.order-card{
  flex-direction:column;
  align-items:stretch;
}
.order-card__top,
.order-meta{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  flex-wrap:wrap;
}
.order-total{
  font-size:22px;
}
.status-pill{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:36px;
  padding:8px 12px;
  border-radius:999px;
  font-weight:800;
  font-size:13px;
  border:1px solid transparent;
}
.status-pill.success{background:rgba(16,185,129,.12); color:#0f8d67; border-color:rgba(16,185,129,.18)}
.status-pill.warning{background:rgba(245,158,11,.13); color:#b76d00; border-color:rgba(245,158,11,.18)}
.status-pill.danger{background:rgba(239,68,68,.12); color:#c13b3b; border-color:rgba(239,68,68,.18)}
.status-pill.neutral{background:rgba(16,24,40,.05); color:var(--muted); border-color:rgba(16,24,40,.08)}

@media (max-width: 1024px){
  .account-hero,
  .account-grid,
  .account-stats{
    grid-template-columns:1fr;
  }
}

@media (max-width: 640px){
  .account-shell{padding-top:8px}
  .account-hero,
  .account-panel,
  .account-profile{border-radius:22px}
  .account-hero{padding:18px}
  .account-hero__meta,
  .download-card{
    flex-direction:column;
    align-items:stretch;
  }
  .account-chip,
  .download-card .btn{width:100%}
  .account-stat strong{font-size:24px}
  .info-row,
  .order-card__top{
    flex-direction:column;
    align-items:flex-start;
  }
}

html[data-theme="dark"] .account-hero{
  background:
    radial-gradient(circle at top left, rgba(255,107,0,.18), transparent 34%),
    linear-gradient(180deg, rgba(18,22,33,.96), rgba(18,22,33,.82));
}
html[data-theme="dark"] .account-chip,
html[data-theme="dark"] .download-card,
html[data-theme="dark"] .order-card,
html[data-theme="dark"] .info-row,
html[data-theme="dark"] .account-empty__icon{
  background:rgba(255,255,255,.03);
  border-color:rgba(255,255,255,.08);
}
html[data-theme="dark"] .account-empty{
  background:rgba(255,107,0,.08);
  border-color:rgba(255,107,0,.22);
}