/*
Theme Name: Tholth Mall Pro Ultimate
Theme URI: https://tholth.com/mall
Author: Manus AI / Tholth
Version: 6.3.0
Description: Snow landing page, overlay-only mall, 360 viewer, 5 skins, WooCommerce, Taager, mobile-ready.
Requires at least: 6.0
WC requires at least: 7.0
Text Domain: tholth-mall-pro
*/

/* ═══ SKIN VARIABLES ═══════════════════════════════ */
:root,body.skin-default{
  --a:#e8c97a;--a2:#c45f3c;--ar:232,201,122;
  --bg:#080a10;--s1:#10131c;--s2:#181c28;--s3:#21273d;
  --bd:rgba(255,255,255,.07);--bd2:rgba(255,255,255,.13);
  --t:#f0eee8;--t2:#b8b4aa;--tm:#6e6b64;--ti:#080a10;
  --ob:rgba(6,7,12,.97);--cb:#13161f;--ch:#1a1e2c;
  --ok:#2ec864;--er:#e8453c;--wa:#fbb040;
  --sh:0 12px 48px rgba(0,0,0,.7);--ss:0 4px 16px rgba(0,0,0,.4);
  --gl:0 0 32px rgba(232,201,122,.22);
  --r:16px;--rs:8px;--rx:4px;--rp:999px;
  --fd:'Cormorant Garamond',Georgia,serif;
  --fb:'DM Sans',system-ui,sans-serif;
  --fm:'JetBrains Mono',monospace;
  --ef:.15s;--em:.32s;--es:.6s;
  --ez:cubic-bezier(.4,0,.2,1);--eb:cubic-bezier(.34,1.56,.64,1);--eo:cubic-bezier(0,0,.2,1);
}
body.skin-ivory{
  --a:#a67c1a;--a2:#7c4e2d;--ar:166,124,26;
  --bg:#f7f3ec;--s1:#fffdf8;--s2:#f2ece0;--s3:#e8dfd0;
  --bd:rgba(0,0,0,.08);--bd2:rgba(0,0,0,.14);
  --t:#1a1208;--t2:#4a3d2a;--tm:#8a7a66;--ti:#fffdf8;
  --ob:rgba(247,243,236,.97);--cb:#fff;--ch:#fffef9;
  --sh:0 12px 48px rgba(0,0,0,.1);--ss:0 4px 16px rgba(0,0,0,.06);--gl:0 0 32px rgba(166,124,26,.15);
}
body.skin-azure{
  --a:#4fc3f7;--a2:#7c4dff;--ar:79,195,247;
  --bg:#020b1a;--s1:#041020;--s2:#071835;--s3:#0c224a;
  --bd:rgba(79,195,247,.1);--bd2:rgba(79,195,247,.2);
  --t:#e4f3fd;--t2:#8ab8d6;--tm:#4a7a9a;--ti:#020b1a;
  --ob:rgba(2,11,26,.97);--cb:#060f24;--ch:#0c1a38;--gl:0 0 40px rgba(79,195,247,.2);
}
body.skin-rose{
  --a:#f48fb1;--a2:#e91e63;--ar:244,143,177;
  --bg:#140610;--s1:#1c0c18;--s2:#261220;--s3:#321828;
  --bd:rgba(244,143,177,.1);--bd2:rgba(244,143,177,.2);
  --t:#fce4ec;--t2:#c4849a;--tm:#8a5870;--ti:#140610;
  --ob:rgba(20,6,16,.97);--cb:#1a0a16;--ch:#261020;--gl:0 0 32px rgba(244,143,177,.22);
}
body.skin-forest{
  --a:#69f0ae;--a2:#ff8a65;--ar:105,240,174;
  --bg:#020e07;--s1:#041208;--s2:#071a0e;--s3:#0c2416;
  --bd:rgba(105,240,174,.1);--bd2:rgba(105,240,174,.18);
  --t:#e4f5e9;--t2:#84b894;--tm:#4a7a5a;--ti:#020e07;
  --ob:rgba(2,14,7,.97);--cb:#06120a;--ch:#0c1c12;--gl:0 0 32px rgba(105,240,174,.2);
}

/* ═══ BASE ══════════════════════════════════════════ */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{font-size:16px;scroll-behavior:smooth;-webkit-font-smoothing:antialiased;-webkit-tap-highlight-color:transparent}
body{background:var(--bg);color:var(--t);font-family:var(--fb);line-height:1.6;overflow-x:hidden;transition:background var(--em) var(--ez),color var(--em) var(--ez)}
img{display:block;max-width:100%}
a{color:var(--a);text-decoration:none}
button{cursor:pointer;font-family:inherit;border:none;background:none;-webkit-tap-highlight-color:transparent}
input,select,textarea{font-family:inherit;font-size:1rem}

/* ═══ SNOW LANDING ══════════════════════════════════ */
#tm-landing{
  position:fixed;inset:0;z-index:10000;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  background:linear-gradient(135deg,var(--bg) 0%,var(--s1) 100%);
  overflow:hidden;
  transition:opacity .8s var(--ez),visibility .8s;
}
#tm-landing.hidden{opacity:0;visibility:hidden;pointer-events:none}

.tm-snow-container{position:absolute;inset:0;overflow:hidden;pointer-events:none}
.tm-snowflake{
  position:absolute;top:-10px;
  color:rgba(255,255,255,.8);
  animation:snowfall linear infinite;
  text-shadow:0 0 8px rgba(255,255,255,.4);
}
@keyframes snowfall{
  from{transform:translateY(0) rotate(0deg);opacity:1}
  to{transform:translateY(105vh) rotate(360deg);opacity:.2}
}

.tm-landing-content{
  position:relative;z-index:1;text-align:center;
  padding:20px;max-width:640px;
  animation:fadeUp 1.2s var(--eo) both;
}
@keyframes fadeUp{from{opacity:0;transform:translateY(30px)}to{opacity:1;transform:none}}

.tm-landing-logo{
  font-family:var(--fd);
  font-size:clamp(2.6rem,9vw,5rem);
  font-weight:700;letter-spacing:.05em;color:var(--t);
  margin-bottom:12px;text-shadow:0 4px 20px rgba(0,0,0,.4);
}
.tm-landing-logo span{color:var(--a);text-shadow:0 0 24px rgba(var(--ar),.5)}

.tm-landing-tagline{
  font-size:clamp(.9rem,2.5vw,1.15rem);color:var(--t2);
  margin-bottom:40px;letter-spacing:.04em;line-height:1.5;
}

.tm-enter-btn{
  display:inline-flex;align-items:center;gap:12px;
  padding:clamp(14px,3.5vw,18px) clamp(32px,8vw,48px);
  background:var(--a);color:var(--ti);border-radius:var(--rp);
  font-size:clamp(.9rem,2.5vw,1.08rem);font-weight:700;
  letter-spacing:.06em;text-transform:uppercase;
  box-shadow:var(--sh),var(--gl);
  transition:all var(--em) var(--eb);position:relative;overflow:hidden;
}
.tm-enter-btn::after{content:'';position:absolute;inset:0;background:rgba(255,255,255,0);transition:background var(--ef)}
.tm-enter-btn:hover{transform:translateY(-5px) scale(1.04);box-shadow:0 20px 60px rgba(0,0,0,.6),0 0 50px rgba(var(--ar),.4)}
.tm-enter-btn:hover::after{background:rgba(255,255,255,.12)}
.tm-enter-btn:active{transform:scale(.98)}

.tm-landing-stats{
  margin-top:48px;display:flex;gap:clamp(24px,6vw,40px);
  justify-content:center;flex-wrap:wrap;
  font-size:clamp(.75rem,2vw,.85rem);color:var(--tm);
}
.tm-stat-item{display:flex;flex-direction:column;align-items:center;gap:4px}
.tm-stat-val{font-size:clamp(1.4rem,4vw,2rem);font-weight:700;color:var(--a);font-family:var(--fd)}

/* Landing Page Footer Links */
.tm-landing-footer{
  display:flex;align-items:center;justify-content:center;gap:12px;
  margin-top:40px;padding-top:30px;
  border-top:1px solid rgba(255,255,255,.08);
  max-width:600px;margin-left:auto;margin-right:auto;
}

.tm-landing-link{
  background:none;border:none;
  color:rgb(var(--tm));font-size:.85rem;
  cursor:pointer;padding:8px 12px;
  transition:all .2s;font-family:inherit;
  text-decoration:none;opacity:.8;
}

.tm-landing-link:hover{
  color:rgb(var(--ac));opacity:1;
  transform:translateY(-1px);
}

.tm-landing-sep{
  color:rgb(var(--tm));opacity:.4;font-size:.8rem;
}

/* ═══ LOADER ════════════════════════════════════════ */
#tm-loader{
  position:fixed;inset:0;z-index:9100;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:20px;
  background:var(--bg);
  transition:opacity var(--es) var(--ez),visibility var(--es);
}
#tm-loader.hidden{opacity:0;visibility:hidden;pointer-events:none}
.tm-loader-logo{font-family:var(--fd);font-size:2.4rem;font-weight:700;color:var(--t)}
.tm-loader-logo span{color:var(--a)}
.tm-loader-bar{width:180px;height:2px;background:var(--s3);border-radius:1px;overflow:hidden}
.tm-loader-bar-fill{height:100%;background:var(--a);border-radius:1px;animation:ldrFill 1.8s var(--ez) forwards}
@keyframes ldrFill{from{width:0}to{width:100%}}
.tm-loader-status{font-size:.75rem;color:var(--tm);letter-spacing:.06em}

/* ═══ BACKDROP ══════════════════════════════════════ */
#tm-backdrop{position:fixed;inset:0;z-index:0;background:var(--bg);overflow:hidden;pointer-events:none}
#tm-backdrop::before{
  content:'';position:absolute;inset:-40%;
  background:radial-gradient(ellipse 55% 45% at 25% 35%,rgba(var(--ar),.055) 0%,transparent 70%),
             radial-gradient(ellipse 45% 55% at 75% 70%,rgba(var(--ar),.03) 0%,transparent 65%);
  animation:bkDrift 22s ease-in-out infinite alternate;
}
@keyframes bkDrift{from{transform:translate(0,0) scale(1)}to{transform:translate(2%,1.5%) scale(1.04)}}

/* ═══ TOPBAR ════════════════════════════════════════ */
#tm-topbar{
  position:fixed;top:0;left:0;right:0;z-index:1000;height:58px;
  display:flex;align-items:center;justify-content:space-between;
  padding:0 clamp(12px,3vw,24px);
  background:linear-gradient(180deg,var(--ob) 0%,transparent 100%);
  backdrop-filter:blur(18px) saturate(1.5);
  -webkit-backdrop-filter:blur(18px) saturate(1.5);
  border-bottom:1px solid var(--bd);
}
.tm-logo{font-family:var(--fd);font-size:clamp(1.1rem,4vw,1.5rem);font-weight:700;letter-spacing:.04em;color:var(--t)}
.tm-logo span{color:var(--a)}
.tm-topbar-right{display:flex;align-items:center;gap:clamp(6px,2vw,10px)}

.tm-skin-sw{display:flex;gap:4px;background:var(--s2);border:1px solid var(--bd);border-radius:var(--rp);padding:3px}
.tm-skin-dot{width:clamp(16px,4vw,20px);height:clamp(16px,4vw,20px);border-radius:50%;border:2px solid transparent;transition:border-color var(--ef),transform var(--ef);min-width:16px}
.tm-skin-dot.active,.tm-skin-dot:hover{transform:scale(1.2);border-color:var(--t)}
.tm-skin-dot[data-skin=default]{background:conic-gradient(#e8c97a 0deg 180deg,#0d0d0d 180deg)}
.tm-skin-dot[data-skin=ivory]{background:conic-gradient(#a67c1a 0deg 180deg,#f7f3ec 180deg)}
.tm-skin-dot[data-skin=azure]{background:conic-gradient(#4fc3f7 0deg 180deg,#020b1a 180deg)}
.tm-skin-dot[data-skin=rose]{background:conic-gradient(#f48fb1 0deg 180deg,#140610 180deg)}
.tm-skin-dot[data-skin=forest]{background:conic-gradient(#69f0ae 0deg 180deg,#020e07 180deg)}

.tm-icon-btn{
  position:relative;width:clamp(36px,9vw,40px);height:clamp(36px,9vw,40px);
  display:flex;align-items:center;justify-content:center;
  background:var(--s2);border:1px solid var(--bd);border-radius:var(--rs);
  color:var(--t);font-size:clamp(.95rem,2.5vw,1.05rem);
  transition:background var(--ef),transform var(--ef);min-width:36px;
}
.tm-icon-btn:hover{background:var(--s3);transform:translateY(-2px)}
.tm-icon-btn:active{transform:translateY(0)}
.tm-badge-count{
  position:absolute;top:-6px;right:-6px;
  background:var(--a);color:var(--ti);
  font-size:.62rem;font-weight:700;min-width:17px;height:17px;
  border-radius:var(--rp);display:flex;align-items:center;justify-content:center;padding:0 3px;
}
@media(max-width:400px){.tm-skin-sw{display:none}}

/* ═══ OVERLAY BOARD ═════════════════════════════════ */
#tm-board{
  position:fixed;inset:0;z-index:10;
  padding:clamp(64px,15vw,72px) clamp(12px,3vw,24px) clamp(12px,3vw,24px);
  overflow-y:auto;scrollbar-width:thin;scrollbar-color:var(--s3) transparent;
}
#tm-board::-webkit-scrollbar{width:5px}
#tm-board::-webkit-scrollbar-thumb{background:var(--s3);border-radius:3px}

#tm-search-row{display:flex;gap:10px;margin-bottom:clamp(16px,3.5vw,20px)}
#tm-search-input{
  flex:1;padding:clamp(9px,2vw,10px) clamp(14px,3vw,16px);
  background:var(--s2);border:1px solid var(--bd);border-radius:var(--rs);
  color:var(--t);font-size:clamp(.85rem,2.2vw,.88rem);outline:none;
  transition:border-color var(--ef),box-shadow var(--ef);
}
#tm-search-input::placeholder{color:var(--tm)}
#tm-search-input:focus{border-color:var(--a);box-shadow:0 0 0 3px rgba(var(--ar),.15)}

#tm-filter-bar{
  display:flex;gap:clamp(6px,2vw,8px);flex-wrap:wrap;
  margin-bottom:clamp(18px,4vw,24px);
  animation:slideDown var(--es) var(--eo) both;
}
@keyframes slideDown{from{opacity:0;transform:translateY(-14px)}to{opacity:1;transform:none}}
.tm-filter-btn{
  padding:clamp(6px,1.5vw,7px) clamp(12px,3vw,16px);border-radius:var(--rp);
  border:1px solid var(--bd);background:var(--s2);color:var(--tm);
  font-size:clamp(.75rem,2vw,.8rem);font-weight:500;white-space:nowrap;
  transition:all var(--ef) var(--ez);
}
.tm-filter-btn:hover,.tm-filter-btn.active{background:var(--a);color:var(--ti);border-color:var(--a);transform:translateY(-2px);box-shadow:var(--gl)}
.tm-filter-btn:active{transform:translateY(0)}

#tm-product-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(clamp(155px,44vw,255px),1fr));
  gap:clamp(12px,3vw,18px);
}

/* Card */
.tm-card{
  background:var(--cb);border:1px solid var(--bd);border-radius:var(--r);
  overflow:hidden;cursor:pointer;position:relative;
  opacity:0;animation:cardIn var(--es) var(--eo) forwards;
  transition:border-color var(--em),background var(--em);will-change:transform;
}
@keyframes cardIn{from{opacity:0;transform:translateY(28px) scale(.97)}to{opacity:1;transform:none}}
.tm-card:hover{border-color:rgba(var(--ar),.35);background:var(--ch)}
.tm-card:active{transform:scale(.98)}

.tm-card-badge-row{position:absolute;top:8px;left:8px;display:flex;gap:5px;z-index:2}
.tm-badge{
  padding:clamp(2px,.5vw,3px) clamp(7px,2vw,9px);border-radius:var(--rp);
  font-size:clamp(.6rem,1.5vw,.66rem);font-weight:700;letter-spacing:.07em;text-transform:uppercase;
}
.tm-badge-sale{background:#2a7cff;color:#fff}
.tm-badge-new{background:var(--a);color:var(--ti)}
.tm-badge-hot{background:#e8453c;color:#fff}
.tm-badge-360{background:rgba(255,255,255,.1);color:var(--t);border:1px solid var(--bd2);backdrop-filter:blur(8px)}

.tm-card-wish{
  position:absolute;top:8px;right:8px;z-index:2;
  width:clamp(28px,7vw,32px);height:clamp(28px,7vw,32px);
  display:flex;align-items:center;justify-content:center;
  background:rgba(0,0,0,.4);border-radius:50%;backdrop-filter:blur(6px);
  font-size:clamp(.85rem,2.2vw,.95rem);color:var(--t);
  border:1px solid var(--bd);transition:all var(--ef);
}
.tm-card-wish:hover,.tm-card-wish.wished{color:#e8453c;background:rgba(232,69,60,.15);border-color:rgba(232,69,60,.3)}
.tm-card-wish.wished{animation:heartPop .3s var(--eb)}
@keyframes heartPop{0%,100%{transform:scale(1)}50%{transform:scale(1.4)}}

.tm-card-img{position:relative;aspect-ratio:1;overflow:hidden;background:var(--s2)}
.tm-card-img img{width:100%;height:100%;object-fit:cover;transition:transform var(--es) var(--ez)}
.tm-card:hover .tm-card-img img{transform:scale(1.07)}
.tm-360-hint{
  position:absolute;bottom:6px;right:6px;
  width:clamp(28px,7vw,34px);height:clamp(28px,7vw,34px);
  background:rgba(0,0,0,.5);border-radius:50%;border:1px solid rgba(255,255,255,.2);
  display:flex;align-items:center;justify-content:center;
  font-size:clamp(.8rem,2vw,.9rem);color:var(--t);backdrop-filter:blur(6px);
  opacity:0;transition:opacity var(--ef);animation:spin 3s linear infinite;
}
.tm-card:hover .tm-360-hint{opacity:1}
@keyframes spin{from{transform:rotate(0)}to{transform:rotate(360deg)}}

.tm-card-body{padding:clamp(12px,3vw,14px) clamp(14px,3.5vw,16px) clamp(14px,3.5vw,16px)}
.tm-card-cat{font-size:clamp(.63rem,1.6vw,.67rem);text-transform:uppercase;letter-spacing:.09em;color:var(--a);font-weight:600;margin-bottom:4px}
.tm-card-name{font-family:var(--fd);font-size:clamp(1rem,2.6vw,1.12rem);font-weight:600;color:var(--t);line-height:1.25;margin-bottom:clamp(8px,2vw,10px)}
.tm-card-swatches{display:flex;gap:4px;margin-bottom:clamp(10px,2.5vw,12px)}
.tm-swatch{width:clamp(12px,3vw,14px);height:clamp(12px,3vw,14px);border-radius:50%;border:2px solid transparent;cursor:pointer;transition:transform var(--ef),border-color var(--ef)}
.tm-swatch:hover,.tm-swatch.active{transform:scale(1.25);border-color:var(--t)}
.tm-card-foot{display:flex;align-items:center;justify-content:space-between;gap:8px}
.tm-card-price{font-size:clamp(.95rem,2.4vw,1.05rem);font-weight:700;color:var(--t)}
.tm-card-price .old{font-size:clamp(.72rem,1.8vw,.78rem);color:var(--tm);text-decoration:line-through;margin-left:4px;font-weight:400}
.tm-qv-btn{
  padding:clamp(4px,1vw,5px) clamp(10px,2.5vw,12px);border-radius:var(--rp);
  background:var(--s3);border:1px solid var(--bd);color:var(--t);
  font-size:clamp(.7rem,1.8vw,.73rem);font-weight:500;white-space:nowrap;
  transition:all var(--ef);
}
.tm-qv-btn:hover{background:var(--a);color:var(--ti);border-color:var(--a);transform:translateY(-2px);box-shadow:var(--gl)}

/* ═══ SHARED PANEL BASE ══════════════════════════════ */
.tm-panel-overlay{
  position:fixed;inset:0;z-index:2000;
  display:flex;align-items:center;justify-content:center;
  padding:clamp(12px,3vw,16px);
  opacity:0;visibility:hidden;
  transition:opacity var(--em) var(--ez),visibility var(--em);
}
.tm-panel-overlay.open{opacity:1;visibility:visible}
.tm-panel-bd{position:absolute;inset:0;background:rgba(0,0,0,.88);backdrop-filter:blur(14px) saturate(1.6);-webkit-backdrop-filter:blur(14px) saturate(1.6);cursor:pointer}
.tm-panel{
  position:relative;z-index:1;
  background:var(--s1);border:1px solid var(--bd);border-radius:var(--r);
  box-shadow:var(--sh);max-height:92vh;overflow-y:auto;
  scrollbar-width:thin;scrollbar-color:var(--s3) transparent;
  transform:translateY(24px) scale(.98);
  transition:transform var(--em) var(--eb);
}
.tm-panel::-webkit-scrollbar{width:5px}
.tm-panel::-webkit-scrollbar-thumb{background:var(--s3);border-radius:3px}
.tm-panel-overlay.open .tm-panel{transform:none}
.tm-panel-x{
  position:absolute;top:14px;right:14px;z-index:10;
  width:clamp(32px,8vw,36px);height:clamp(32px,8vw,36px);
  display:flex;align-items:center;justify-content:center;
  background:var(--s2);border:1px solid var(--bd);border-radius:50%;
  color:var(--t);font-size:1rem;transition:background var(--ef),transform var(--ef);
}
.tm-panel-x:hover{background:var(--er);transform:rotate(90deg)}

/* ═══ PRODUCT PANEL ══════════════════════════════════ */
#tm-product-panel .tm-panel{width:100%;max-width:960px;display:grid;grid-template-columns:1fr 1fr}
@media(max-width:700px){#tm-product-panel .tm-panel{grid-template-columns:1fr;max-height:94vh}}

.tm-vwr-pane{padding:clamp(18px,4vw,22px);display:flex;flex-direction:column;gap:clamp(12px,3vw,14px);background:var(--s2);border-right:1px solid var(--bd)}
@media(max-width:700px){.tm-vwr-pane{border-right:none;border-bottom:1px solid var(--bd)}}

#tm-360-canvas{
  position:relative;aspect-ratio:1;border-radius:var(--rs);overflow:hidden;
  background:var(--s3);cursor:grab;user-select:none;touch-action:none;
}
#tm-360-canvas:active{cursor:grabbing}
#tm-360-canvas.zoomed{transform:scale(1.6);transform-origin:center;z-index:5}
#tm-360-canvas img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:opacity .07s}

.tm-vctrl-row{display:flex;align-items:center;gap:clamp(6px,1.5vw,8px)}
.tm-vctrl{
  width:clamp(32px,8vw,36px);height:clamp(32px,8vw,36px);
  display:flex;align-items:center;justify-content:center;
  background:var(--s3);border:1px solid var(--bd);border-radius:var(--rx);
  color:var(--t);font-size:.9rem;transition:background var(--ef),transform var(--ef);min-width:32px;
}
.tm-vctrl:hover,.tm-vctrl.on{background:var(--a);color:var(--ti)}
.tm-vctrl:active{transform:scale(.93)}
.tm-vwr-progress{flex:1;height:3px;background:var(--s3);border-radius:2px;overflow:hidden}
.tm-vwr-fill{height:100%;background:var(--a);border-radius:2px;transition:width .08s linear}

.tm-thumb-strip{display:flex;gap:clamp(6px,1.5vw,7px);overflow-x:auto;scrollbar-width:none;padding-bottom:2px}
.tm-thumb-strip::-webkit-scrollbar{display:none}
.tm-thumb{
  flex-shrink:0;width:clamp(46px,11vw,52px);height:clamp(46px,11vw,52px);
  border-radius:var(--rx);border:2px solid var(--bd);overflow:hidden;cursor:pointer;
  transition:border-color var(--ef),transform var(--ef);
}
.tm-thumb:hover,.tm-thumb.active{border-color:var(--a);transform:scale(1.06)}
.tm-thumb img{width:100%;height:100%;object-fit:cover}

.tm-info-pane{padding:clamp(20px,4.5vw,26px) clamp(18px,4vw,24px);display:flex;flex-direction:column;gap:clamp(14px,3vw,16px)}
.tm-info-cat{font-size:clamp(.68rem,1.7vw,.7rem);text-transform:uppercase;letter-spacing:.1em;color:var(--a);font-weight:600}
.tm-info-name{font-family:var(--fd);font-size:clamp(1.5rem,4vw,1.9rem);font-weight:700;line-height:1.2;color:var(--t)}
.tm-info-sku{font-size:clamp(.68rem,1.7vw,.72rem);color:var(--tm);font-family:var(--fm)}
.tm-rating-row{display:flex;align-items:center;gap:8px;font-size:clamp(.75rem,2vw,.8rem);color:var(--tm)}
.tm-stars{color:var(--a);letter-spacing:2px}
.tm-price-row{display:flex;align-items:baseline;gap:clamp(8px,2vw,10px);flex-wrap:wrap}
.tm-price-now{font-size:clamp(1.5rem,4vw,1.85rem);font-weight:800;color:var(--t)}
.tm-price-was{font-size:clamp(.95rem,2.4vw,1.05rem);color:var(--tm);text-decoration:line-through}
.tm-price-save{padding:2px clamp(7px,2vw,9px);background:rgba(46,200,100,.14);color:#2ec864;border-radius:var(--rp);font-size:clamp(.72rem,1.8vw,.75rem);font-weight:700}

.tm-var-block{display:flex;flex-direction:column;gap:clamp(6px,1.5vw,7px)}
.tm-var-label{font-size:clamp(.7rem,1.8vw,.75rem);font-weight:600;text-transform:uppercase;letter-spacing:.07em;color:var(--tm)}
.tm-color-opts{display:flex;gap:clamp(6px,1.5vw,7px);flex-wrap:wrap}
.tm-color-sw{
  width:clamp(26px,6vw,30px);height:clamp(26px,6vw,30px);border-radius:50%;
  border:3px solid transparent;cursor:pointer;box-shadow:0 2px 6px rgba(0,0,0,.3);
  transition:transform var(--ef) var(--eb),border-color var(--ef);
}
.tm-color-sw:hover{transform:scale(1.25) translateY(-3px)}
.tm-color-sw.active{border-color:var(--t);transform:scale(1.15)}
.tm-size-opts{display:flex;gap:clamp(6px,1.5vw,7px);flex-wrap:wrap}
.tm-size-btn{
  min-width:clamp(38px,10vw,42px);padding:clamp(5px,1.2vw,6px) clamp(10px,2.5vw,12px);
  background:var(--s2);border:1px solid var(--bd);border-radius:var(--rx);
  color:var(--tm);font-size:clamp(.75rem,2vw,.8rem);font-weight:500;text-align:center;
  transition:all var(--ef);
}
.tm-size-btn:hover{background:var(--s3);color:var(--t);transform:translateY(-2px)}
.tm-size-btn.active{background:var(--a);color:var(--ti);border-color:var(--a)}
.tm-size-btn.oos{opacity:.3;cursor:not-allowed;text-decoration:line-through;pointer-events:none}
.tm-qty-row{display:flex;align-items:center;gap:clamp(10px,2.5vw,12px)}
.tm-qty-ctrl{display:flex;align-items:center;background:var(--s2);border:1px solid var(--bd);border-radius:var(--rx);overflow:hidden}
.tm-qty-btn{width:clamp(32px,8vw,36px);height:clamp(32px,8vw,36px);display:flex;align-items:center;justify-content:center;color:var(--t);font-size:1rem;transition:background var(--ef)}
.tm-qty-btn:hover{background:var(--s3)}
.tm-qty-num{width:clamp(32px,8vw,36px);text-align:center;font-weight:600;font-size:.88rem;color:var(--t)}
.tm-ship-prev{display:flex;align-items:center;gap:8px;padding:clamp(8px,2vw,9px) clamp(10px,2.5vw,12px);background:rgba(46,200,100,.08);border:1px solid rgba(46,200,100,.2);border-radius:var(--rx);font-size:clamp(.75rem,2vw,.8rem);color:var(--ok)}
.tm-cta-row{display:flex;gap:clamp(6px,1.5vw,8px)}
.tm-btn-cart{
  flex:1;padding:clamp(12px,3vw,13px) clamp(18px,4vw,20px);
  background:var(--a);color:var(--ti);border-radius:var(--rs);
  font-size:clamp(.85rem,2.2vw,.9rem);font-weight:700;letter-spacing:.04em;
  transition:all var(--em) var(--eb);position:relative;overflow:hidden;
}
.tm-btn-cart:hover{transform:translateY(-3px);box-shadow:var(--gl)}
.tm-btn-cart:active{transform:scale(.97)}
.tm-btn-cart.ok{background:var(--ok)}
.tm-btn-wish{
  width:clamp(44px,11vw,48px);background:var(--s2);border:1px solid var(--bd);
  border-radius:var(--rs);display:flex;align-items:center;justify-content:center;
  font-size:1.05rem;color:var(--t);transition:all var(--ef);
}
.tm-btn-wish:hover,.tm-btn-wish.wished{background:rgba(232,69,60,.15);color:#e8453c;border-color:rgba(232,69,60,.3)}
.tm-btn-buynow{
  width:100%;padding:clamp(11px,2.5vw,12px);margin-top:-6px;
  background:var(--s2);border:1px solid var(--bd);border-radius:var(--rs);
  color:var(--t2);font-size:clamp(.78rem,2vw,.82rem);font-weight:500;
  display:flex;align-items:center;justify-content:center;gap:6px;transition:all var(--ef);
}
.tm-btn-buynow:hover{background:var(--s3);color:var(--t)}

.tm-accordion{display:flex;flex-direction:column;gap:2px}
.tm-acc-item{border:1px solid var(--bd);border-radius:var(--rx);overflow:hidden}
.tm-acc-head{width:100%;display:flex;align-items:center;justify-content:space-between;padding:clamp(10px,2.5vw,11px) clamp(12px,3vw,14px);background:var(--s2);color:var(--t);font-size:clamp(.78rem,2vw,.83rem);font-weight:600;transition:background var(--ef)}
.tm-acc-head:hover{background:var(--s3)}
.tm-acc-ch{font-size:.68rem;transition:transform var(--ef)}
.tm-acc-item.open .tm-acc-ch{transform:rotate(180deg)}
.tm-acc-body{max-height:0;overflow:hidden;transition:max-height var(--em) var(--ez);background:var(--s1)}
.tm-acc-item.open .tm-acc-body{max-height:500px}
.tm-acc-inner{padding:clamp(11px,2.5vw,12px) clamp(12px,3vw,14px);font-size:clamp(.78rem,2vw,.82rem);color:var(--t2);line-height:1.7}
.tm-acc-inner table{width:100%;border-collapse:collapse}
.tm-acc-inner td{padding:5px 0;border-bottom:1px solid var(--bd)}
.tm-acc-inner td:first-child{color:var(--tm);width:42%}

/* ═══ CART PANEL ═════════════════════════════════════ */
#tm-cart-panel .tm-panel{
  position:fixed;top:0;right:0;bottom:0;
  width:min(380px,100vw);max-height:100vh;
  border-radius:var(--r) 0 0 var(--r);
  transform:translateX(100%);transition:transform var(--em) var(--ez);
  display:flex;flex-direction:column;
}
#tm-cart-panel.open .tm-panel{transform:translateX(0)}
@media(max-width:560px){
  #tm-cart-panel .tm-panel{top:auto;bottom:0;left:0;right:0;width:100%;max-height:88vh;border-radius:var(--r) var(--r) 0 0;transform:translateY(100%)}
  #tm-cart-panel.open .tm-panel{transform:translateY(0)}
}
.tm-cart-hdr{padding:clamp(16px,4vw,20px) clamp(16px,4vw,20px) clamp(12px,3vw,14px);border-bottom:1px solid var(--bd);display:flex;align-items:center;justify-content:space-between;flex-shrink:0}
.tm-cart-title{font-family:var(--fd);font-size:clamp(1.15rem,3vw,1.3rem);font-weight:700;color:var(--t)}
.tm-cart-items{flex:1;overflow-y:auto;padding:clamp(12px,3vw,14px) clamp(16px,4vw,20px);display:flex;flex-direction:column;gap:clamp(10px,2.5vw,12px);scrollbar-width:thin;scrollbar-color:var(--s3) transparent}
.tm-cart-item{display:flex;gap:clamp(10px,2.5vw,12px);align-items:flex-start;padding:clamp(10px,2.5vw,12px);background:var(--s2);border-radius:var(--rs);border:1px solid var(--bd)}
.tm-ci-img{width:clamp(54px,14vw,60px);height:clamp(54px,14vw,60px);border-radius:var(--rx);overflow:hidden;flex-shrink:0;background:var(--s3)}
.tm-ci-img img{width:100%;height:100%;object-fit:cover}
.tm-ci-info{flex:1;min-width:0}
.tm-ci-name{font-size:clamp(.82rem,2.1vw,.85rem);font-weight:600;color:var(--t);margin-bottom:3px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tm-ci-meta{font-size:clamp(.72rem,1.8vw,.75rem);color:var(--tm);margin-bottom:6px}
.tm-ci-row{display:flex;align-items:center;gap:clamp(6px,1.5vw,8px)}
.tm-ci-price{font-size:clamp(.85rem,2.1vw,.88rem);font-weight:700;color:var(--a)}
.tm-ci-qty{display:flex;align-items:center;gap:3px;background:var(--s3);border-radius:var(--rx);padding:2px 3px}
.tm-ci-qty button{width:clamp(18px,4.5vw,20px);height:clamp(18px,4.5vw,20px);font-size:.8rem;color:var(--t);display:flex;align-items:center;justify-content:center}
.tm-ci-qty span{width:clamp(22px,5.5vw,24px);text-align:center;font-size:.8rem;font-weight:600;color:var(--t)}
.tm-ci-rm{margin-left:auto;color:var(--tm);font-size:.85rem;padding:4px;transition:color var(--ef)}
.tm-ci-rm:hover{color:var(--er)}
.tm-cart-empty{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;color:var(--tm);font-size:.88rem}
.tm-cart-empty-icon{font-size:3rem;opacity:.4}
.tm-cart-ftr{padding:clamp(12px,3vw,14px) clamp(16px,4vw,20px) clamp(16px,4vw,20px);border-top:1px solid var(--bd);flex-shrink:0;display:flex;flex-direction:column;gap:clamp(8px,2vw,10px)}
.tm-cart-totals{display:flex;flex-direction:column;gap:clamp(5px,1.2vw,6px)}
.tm-cart-trow{display:flex;justify-content:space-between;font-size:clamp(.82rem,2.1vw,.85rem);color:var(--t2)}
.tm-cart-trow.grand{font-size:clamp(.95rem,2.4vw,1rem);font-weight:700;color:var(--t);padding-top:6px;border-top:1px solid var(--bd)}
.tm-btn-co{width:100%;padding:clamp(13px,3.2vw,14px);background:var(--a);color:var(--ti);border-radius:var(--rs);font-size:clamp(.85rem,2.2vw,.9rem);font-weight:700;letter-spacing:.04em;transition:all var(--em) var(--eb)}
.tm-btn-co:hover{transform:translateY(-2px);box-shadow:var(--gl)}
.tm-btn-co:active{transform:translateY(0)}
.tm-payicons{display:flex;align-items:center;justify-content:center;gap:clamp(6px,1.5vw,8px);font-size:clamp(.68rem,1.7vw,.72rem);color:var(--tm)}
.tm-payicons span{background:var(--s2);border:1px solid var(--bd);padding:3px clamp(6px,1.5vw,8px);border-radius:var(--rx);font-weight:500}

/* ═══ CHECKOUT PANEL ═════════════════════════════════ */
#tm-checkout-panel .tm-panel{width:100%;max-width:840px}
.tm-co-grid{display:grid;grid-template-columns:1fr 340px}
@media(max-width:700px){.tm-co-grid{grid-template-columns:1fr}}
.tm-co-left{padding:clamp(18px,4vw,26px);display:flex;flex-direction:column;gap:clamp(18px,4vw,22px)}
.tm-co-right{padding:clamp(18px,4vw,26px);background:var(--s2);border-left:1px solid var(--bd);display:flex;flex-direction:column;gap:16px}
@media(max-width:700px){.tm-co-right{border-left:none;border-top:1px solid var(--bd)}}
.tm-sec-title{font-family:var(--fd);font-size:clamp(1rem,2.5vw,1.1rem);font-weight:700;color:var(--t);margin-bottom:12px}
.tm-sec-title small{font-size:.72rem;color:var(--tm);font-family:var(--fb);font-weight:400;margin-left:6px}
.tm-field-row{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.tm-field-row.full{grid-template-columns:1fr}
@media(max-width:560px){.tm-field-row{grid-template-columns:1fr}}
.tm-field{display:flex;flex-direction:column;gap:5px}
.tm-field label{font-size:clamp(.73rem,1.8vw,.75rem);font-weight:600;color:var(--tm);text-transform:uppercase;letter-spacing:.05em}
.tm-field input,.tm-field select{padding:clamp(9px,2vw,10px) clamp(12px,3vw,14px);background:var(--s1);border:1px solid var(--bd);border-radius:var(--rx);color:var(--t);font-size:clamp(.84rem,2.1vw,.88rem);outline:none;transition:border-color var(--ef),box-shadow var(--ef)}
.tm-field input:focus,.tm-field select:focus{border-color:var(--a);box-shadow:0 0 0 3px rgba(var(--ar),.12)}
.tm-field select option{background:var(--s1);color:var(--t)}

.tm-zone-opts,.tm-pay-opts{display:flex;flex-direction:column;gap:8px}
.tm-zone-opt,.tm-pay-opt{
  display:flex;align-items:center;gap:12px;padding:clamp(9px,2.2vw,11px) clamp(12px,3vw,14px);
  background:var(--s1);border:1px solid var(--bd);border-radius:var(--rx);cursor:pointer;
  transition:border-color var(--ef),background var(--ef);
}
.tm-zone-opt:hover,.tm-pay-opt:hover,.tm-zone-opt.active,.tm-pay-opt.active{border-color:var(--a);background:rgba(var(--ar),.06)}
.tm-zone-opt input,.tm-pay-opt input{accent-color:var(--a);flex-shrink:0}
.tm-zone-lbl,.tm-pay-lbl{flex:1}
.tm-zone-name,.tm-pay-name{font-size:clamp(.83rem,2.1vw,.85rem);font-weight:600;color:var(--t)}
.tm-zone-time,.tm-pay-desc{font-size:clamp(.72rem,1.8vw,.75rem);color:var(--tm)}
.tm-zone-price{font-size:clamp(.85rem,2.1vw,.88rem);font-weight:700;color:var(--a)}
.tm-pay-icon{font-size:1.4rem}

.tm-order-lines{display:flex;flex-direction:column;gap:8px}
.tm-order-line{display:flex;justify-content:space-between;align-items:center;font-size:clamp(.8rem,2vw,.83rem);color:var(--t2)}
.tm-order-line .name{max-width:180px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tm-order-line .price{font-weight:600;color:var(--t)}
.tm-sep{height:1px;background:var(--bd)}
.tm-order-grand{display:flex;justify-content:space-between;font-size:clamp(.95rem,2.4vw,1rem);font-weight:700;color:var(--t)}
.tm-btn-place{width:100%;padding:clamp(13px,3.2vw,14px);background:var(--a);color:var(--ti);border-radius:var(--rs);font-size:clamp(.85rem,2.2vw,.9rem);font-weight:700;letter-spacing:.04em;transition:all var(--em) var(--eb)}
.tm-btn-place:hover{transform:translateY(-2px);box-shadow:var(--gl)}
.tm-btn-place:active{transform:translateY(0)}
.tm-btn-place:disabled{opacity:.6;cursor:not-allowed;transform:none}
.tm-secure{display:flex;align-items:center;justify-content:center;gap:6px;font-size:clamp(.72rem,1.8vw,.73rem);color:var(--tm)}

/* ═══ ACCOUNT PANEL ══════════════════════════════════ */
#tm-account-panel .tm-panel{width:100%;max-width:520px}
.tm-account-wrap{padding:clamp(22px,5vw,28px) clamp(22px,5vw,28px) clamp(28px,6vw,32px)}
.tm-account-tabs{display:flex;border-bottom:1px solid var(--bd);margin-bottom:24px}
.tm-account-tab{padding:10px 18px;font-size:clamp(.8rem,2vw,.83rem);font-weight:600;color:var(--tm);border-bottom:2px solid transparent;cursor:pointer;transition:color var(--ef),border-color var(--ef)}
.tm-account-tab.active{color:var(--a);border-color:var(--a)}
.tm-tab-pane{display:none}
.tm-tab-pane.active{display:block}
.tm-auth-form{display:flex;flex-direction:column;gap:14px}
.tm-auth-err{padding:8px 12px;background:rgba(232,69,60,.12);border:1px solid rgba(232,69,60,.25);border-radius:var(--rx);color:var(--er);font-size:.8rem;display:none}
.tm-auth-err.show{display:block}
.tm-btn-auth{width:100%;padding:12px;background:var(--a);color:var(--ti);border-radius:var(--rs);font-size:clamp(.86rem,2.2vw,.88rem);font-weight:700;transition:all var(--em) var(--eb)}
.tm-btn-auth:hover{transform:translateY(-2px);box-shadow:var(--gl)}
.tm-btn-auth.secondary{background:var(--s2);color:var(--t);border:1px solid var(--bd)}
.tm-auth-link{font-size:.8rem;color:var(--a);text-align:center;cursor:pointer}
.tm-auth-divider{display:flex;align-items:center;gap:10px;color:var(--tm);font-size:.78rem}
.tm-auth-divider::before,.tm-auth-divider::after{content:'';flex:1;height:1px;background:var(--bd)}
.tm-my-account{display:flex;flex-direction:column;gap:16px}
.tm-acct-avatar{display:flex;align-items:center;gap:14px;padding:16px;background:var(--s2);border-radius:var(--rs);border:1px solid var(--bd)}
.tm-avatar-icon{width:52px;height:52px;background:var(--a);border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:1.5rem;color:var(--ti);font-weight:700}
.tm-acct-name{font-size:1rem;font-weight:600;color:var(--t)}
.tm-acct-email{font-size:.78rem;color:var(--tm)}
.tm-acct-menu{display:flex;flex-direction:column;gap:2px}
.tm-acct-menu-item{display:flex;align-items:center;gap:12px;padding:12px 14px;background:var(--s2);border:1px solid var(--bd);border-radius:var(--rx);color:var(--t);font-size:.85rem;font-weight:500;cursor:pointer;transition:background var(--ef),border-color var(--ef)}
.tm-acct-menu-item:hover{background:var(--s3);border-color:var(--bd2)}
.tm-acct-menu-item .icon{font-size:1rem;width:20px;text-align:center}
.tm-acct-menu-item .arr{margin-left:auto;color:var(--tm);font-size:.75rem}
.tm-orders-list{display:flex;flex-direction:column;gap:8px}
.tm-order-row{padding:12px 14px;background:var(--s2);border:1px solid var(--bd);border-radius:var(--rx);display:flex;align-items:center;justify-content:space-between;gap:8px;flex-wrap:wrap}
.tm-order-id{font-size:.8rem;font-weight:600;color:var(--t);font-family:var(--fm)}
.tm-order-date{font-size:.75rem;color:var(--tm)}
.tm-order-status{padding:3px 9px;border-radius:var(--rp);font-size:.7rem;font-weight:700}
.tm-status-processing{background:rgba(42,124,255,.15);color:#4fc3f7}
.tm-status-completed{background:rgba(46,200,100,.15);color:#2ec864}
.tm-status-pending{background:rgba(251,176,64,.15);color:#fbb040}
.tm-order-total{font-size:.88rem;font-weight:700;color:var(--a)}

/* ═══ SUCCESS PANEL ══════════════════════════════════ */
#tm-success-panel .tm-panel{width:100%;max-width:460px}
.tm-success-wrap{padding:40px 32px;display:flex;flex-direction:column;align-items:center;gap:16px;text-align:center}
.tm-success-icon{font-size:4rem;animation:successBounce .6s var(--eb)}
@keyframes successBounce{from{transform:scale(0);opacity:0}to{transform:scale(1);opacity:1}}
.tm-success-title{font-family:var(--fd);font-size:clamp(1.6rem,4vw,1.9rem);font-weight:700;color:var(--t)}
.tm-success-sub{font-size:.88rem;color:var(--t2)}
.tm-success-order{font-family:var(--fm);font-size:1rem;color:var(--a)}
.tm-success-ship{padding:12px 20px;background:rgba(46,200,100,.1);border:1px solid rgba(46,200,100,.2);border-radius:var(--rs);font-size:.82rem;color:var(--ok);width:100%}
.tm-btn-continue{padding:12px 28px;background:var(--a);color:var(--ti);border-radius:var(--rs);font-size:.88rem;font-weight:700;transition:all var(--em) var(--eb)}
.tm-btn-continue:hover{transform:translateY(-2px);box-shadow:var(--gl)}

/* ═══ TOASTS ═════════════════════════════════════════ */
#tm-toasts{position:fixed;bottom:clamp(16px,4vw,24px);right:clamp(16px,4vw,24px);z-index:9999;display:flex;flex-direction:column;gap:clamp(6px,1.5vw,8px);pointer-events:none;max-width:calc(100vw - 32px)}
.tm-toast{padding:clamp(10px,2.5vw,11px) clamp(16px,4vw,18px);background:var(--s2);border:1px solid var(--bd);border-left:3px solid var(--a);border-radius:var(--rs);color:var(--t);font-size:clamp(.78rem,2vw,.83rem);box-shadow:var(--ss);pointer-events:all;display:flex;align-items:center;gap:clamp(8px,2vw,9px);animation:toastIn var(--em) var(--eb) forwards,toastOut var(--em) var(--ez) 3.2s forwards}
.tm-toast.error{border-left-color:var(--er)}
.tm-toast.success{border-left-color:var(--ok)}
@keyframes toastIn{from{transform:translateX(110%);opacity:0}to{transform:translateX(0);opacity:1}}
@keyframes toastOut{to{transform:translateX(110%);opacity:0}}
@media(max-width:560px){#tm-toasts{left:16px;right:16px}}

/* ═══ MOBILE FIXES - PREVENT OVERLAPPING ════════════ */
@media(max-width:900px){
  /* Product grid - 2 columns on tablet */
  .tm-product-grid{grid-template-columns:repeat(2,1fr)!important;gap:12px!important;padding:12px!important}
  
  /* Overlay panels - full width on mobile */
  .tm-panel{width:calc(100vw - 24px)!important;max-width:100%!important;margin:12px!important}
  
  /* Product panel - FORCE single column layout */
  #tm-product-panel .tm-panel{
    grid-template-columns:1fr!important;
    max-height:90vh!important;
    overflow-y:auto!important;
  }
  
  /* Viewer pane - fix height on mobile */
  .tm-vwr-pane{
    border-right:none!important;
    border-bottom:1px solid var(--bd)!important;
    min-height:auto!important;
  }
  
  /* Canvas - reduce height on mobile */
  #tm-360-canvas{
    height:300px!important;
    aspect-ratio:auto!important;
  }
  
  /* Info pane - ensure vertical scroll */
  .tm-info-pane{
    overflow-y:auto!important;
    max-height:none!important;
  }
  
  /* Cart panel - adjust spacing */
  #tm-cart-panel .tm-panel{width:calc(100vw - 24px)!important;max-width:420px!important}
  
  /* Topbar - reduce padding */
  #tm-topbar{padding:10px 14px!important;gap:8px!important}
  .tm-brand{font-size:1.1rem!important}
  
  /* Filter bar - wrap categories */
  #tm-filter-bar{flex-wrap:wrap!important;gap:8px!important;padding:10px!important}
  .tm-filter-btn{font-size:.8rem!important;padding:6px 12px!important}
  .tm-filter-cat-img{width:20px!important;height:20px!important}
}

@media(max-width:560px){
  /* Product grid - single column on phone */
  .tm-product-grid{grid-template-columns:1fr!important;gap:10px!important;padding:10px!important}
  
  /* Product overlay - MOBILE OPTIMIZED VERTICAL LAYOUT */
  #tm-product-panel .tm-panel{
    grid-template-columns:1fr!important;
    max-height:95vh!important;
    overflow-y:auto!important;
    display:flex!important;
    flex-direction:column!important;
  }
  
  /* Viewer section - compact on mobile */
  .tm-vwr-pane{
    padding:14px!important;
    border-right:none!important;
    border-bottom:1px solid var(--bd)!important;
    flex-shrink:0!important;
  }
  
  /* Canvas - mobile-friendly size */
  #tm-360-canvas{
    height:280px!important;
    width:100%!important;
    aspect-ratio:1!important;
  }
  
  /* Viewer controls - stack properly */
  .tm-vctrl-row{
    flex-wrap:wrap!important;
    gap:6px!important;
  }
  
  .tm-vctrl{
    width:36px!important;
    height:36px!important;
    min-width:36px!important;
  }
  
  /* Thumbnails - horizontal scroll */
  .tm-thumb-strip{
    gap:6px!important;
    overflow-x:auto!important;
    -webkit-overflow-scrolling:touch!important;
  }
  
  .tm-thumb{
    width:50px!important;
    height:50px!important;
    flex-shrink:0!important;
  }
  
  /* Info section - scrollable content */
  .tm-info-pane{
    padding:16px!important;
    overflow-y:auto!important;
    flex:1!important;
    min-height:0!important;
  }
  
  /* Product title - readable size */
  .tm-info-name{
    font-size:1.3rem!important;
    line-height:1.3!important;
    margin-bottom:8px!important;
  }
  
  /* Price - prominent but not huge */
  .tm-price-now{
    font-size:1.5rem!important;
  }
  
  .tm-price-was{
    font-size:.95rem!important;
  }
  
  /* Color swatches - larger tap targets */
  .tm-color-sw{
    width:34px!important;
    height:34px!important;
    border-width:2px!important;
  }
  
  /* Size buttons - comfortable tapping */
  .tm-size-btn{
    min-width:44px!important;
    padding:8px 12px!important;
    font-size:.85rem!important;
  }
  
  /* Quantity controls - bigger */
  .tm-qty-ctrl button{
    width:36px!important;
    height:36px!important;
    font-size:1rem!important;
  }
  
  .tm-qty-num{
    min-width:40px!important;
    font-size:.95rem!important;
  }
  
  /* Action buttons - full width and stackable */
  .tm-act-row{
    flex-direction:column!important;
    gap:10px!important;
  }
  
  .tm-btn-atc,.tm-btn-buy{
    width:100%!important;
    padding:14px!important;
    font-size:.9rem!important;
    min-height:48px!important;
  }
  
  /* Shipping estimate - compact */
  .tm-ship-est{
    padding:10px!important;
    font-size:.8rem!important;
  }
  
  /* Description - readable */
  .tm-info-desc{
    font-size:.85rem!important;
    line-height:1.6!important;
  }
  
  /* Product cards - optimize for mobile */
  .tm-card{min-height:auto!important}
  .tm-card-img{height:280px!important}
  .tm-card-name{font-size:.9rem!important;line-height:1.3!important}
  .tm-card-price{font-size:.85rem!important}
  .tm-qv-btn{font-size:.75rem!important;padding:6px 10px!important}
  
  /* Cart items - compact layout */
  .tm-ci{gap:10px!important;padding:10px!important}
  .tm-ci-img{width:60px!important;height:60px!important}
  .tm-ci-name{font-size:.82rem!important}
  .tm-ci-price{font-size:.8rem!important}
  
  /* Checkout - single column */
  .tm-co-grid{grid-template-columns:1fr!important}
  .tm-co-right{border-left:none!important;border-top:1px solid var(--bd)!important}
  
  /* Form fields - full width */
  .tm-field-row{grid-template-columns:1fr!important;gap:12px!important}
  .tm-field input,.tm-field select{font-size:.9rem!important;padding:10px 12px!important}
  
  /* Topbar - compact */
  .tm-brand{font-size:1rem!important}
  .tm-topbar-icons{gap:10px!important}
  .tm-icon-btn{width:36px!important;height:36px!important;font-size:1rem!important}
  
  /* Landing - optimize for mobile */
  .tm-landing-logo{font-size:2.6rem!important;line-height:1.1!important}
  .tm-landing-tagline{font-size:.95rem!important;margin-bottom:30px!important}
  .tm-enter-btn{padding:14px 32px!important;font-size:.9rem!important}
  
  /* Stats - stack vertically */
  .tm-landing-stats{flex-direction:column!important;gap:16px!important}
  .tm-stat-num{font-size:2rem!important}
  
  /* Panel close button - bigger tap target */
  .tm-panel-x{
    width:40px!important;
    height:40px!important;
    font-size:1.4rem!important;
    top:10px!important;
    right:10px!important;
  }
}

/* Fix z-index stacking */
#tm-topbar{z-index:100}
.tm-overlay{z-index:200}
#tm-loader{z-index:9998}
#tm-landing{z-index:10000}
#tm-toasts{z-index:9999}

/* Prevent horizontal scroll */
body,html{overflow-x:hidden!important;max-width:100vw!important}
.tm-board{overflow-x:hidden!important;max-width:100vw!important}

/* Ensure panels scroll smoothly on mobile */
.tm-panel{
  overflow-y:auto!important;
  -webkit-overflow-scrolling:touch!important;
  overscroll-behavior:contain!important;
}

/* Touch-friendly spacing */
@media(hover:none){
  button,a,.tm-card,.tm-filter-btn,.tm-icon-btn{min-height:44px!important;min-width:44px!important}
  .tm-card{cursor:pointer!important;-webkit-tap-highlight-color:rgba(var(--ar),.1)!important}
}

/* ═══════════════════════════════════════════════════
   FOOTER
   ═══════════════════════════════════════════════════ */
#tm-footer{
  background:rgba(var(--fg),.02);
  border-top:1px solid var(--bd);
  padding:60px 20px 30px;
  margin-top:auto;
}

.tm-footer-content{
  max-width:1200px;
  margin:0 auto;
}

/* Trust Badges */
.tm-trust-section{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
  gap:20px;
  margin-bottom:50px;
}

.tm-trust-badge{
  display:flex;
  align-items:center;
  gap:12px;
  padding:16px;
  background:rgba(var(--ac),.05);
  border-radius:12px;
  border:1px solid rgba(var(--ac),.15);
  transition:all .3s ease;
}

.tm-trust-badge:hover{
  transform:translateY(-2px);
  box-shadow:0 8px 20px rgba(var(--ac),.15);
}

.tm-trust-icon{
  font-size:2rem;
  flex-shrink:0;
}

.tm-trust-text{
  flex:1;
}

.tm-trust-title{
  font-weight:600;
  color:rgb(var(--fg));
  margin-bottom:2px;
  font-size:.95rem;
}

.tm-trust-desc{
  font-size:.8rem;
  color:rgb(var(--tm));
  opacity:.8;
}

/* Footer Links */
.tm-footer-links{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(200px,1fr));
  gap:40px;
  margin-bottom:40px;
}

.tm-footer-col{}

.tm-footer-heading{
  font-size:1rem;
  font-weight:600;
  margin-bottom:16px;
  color:rgb(var(--fg));
}

.tm-footer-link{
  display:block;
  color:rgb(var(--tm));
  text-decoration:none;
  padding:6px 0;
  font-size:.9rem;
  transition:color .2s;
  background:none;
  border:none;
  cursor:pointer;
  text-align:left;
  font-family:inherit;
}

.tm-footer-link:hover{
  color:rgb(var(--ac));
}

.tm-footer-about{
  font-size:.85rem;
  line-height:1.6;
  color:rgb(var(--tm));
  margin-bottom:16px;
}

.tm-footer-social{
  display:flex;
  gap:12px;
}

.tm-social-icon{
  font-size:1.4rem;
  transition:transform .2s;
  text-decoration:none;
  display:inline-block;
}

.tm-social-icon:hover{
  transform:scale(1.2);
}

/* Payment Icons */
.tm-footer-payments{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:12px;
  padding:20px 0;
  border-top:1px solid var(--bd);
  border-bottom:1px solid var(--bd);
  margin-bottom:20px;
}

.tm-payment-label{
  font-size:.85rem;
  color:rgb(var(--tm));
  margin-right:8px;
}

.tm-payment-icon{
  font-size:.9rem;
  padding:6px 12px;
  background:rgba(var(--fg),.04);
  border-radius:6px;
  border:1px solid var(--bd);
}

/* Footer Bottom */
.tm-footer-bottom{
  text-align:center;
  padding-top:20px;
}

.tm-footer-bottom p{
  margin:4px 0;
  font-size:.85rem;
  color:rgb(var(--tm));
}

.tm-footer-tagline{
  opacity:.7;
}

/* ═══════════════════════════════════════════════════
   POLICY PANELS
   ═══════════════════════════════════════════════════ */
.tm-policy-panel{
  max-width:800px!important;
  max-height:90vh;
  overflow-y:auto;
}

.tm-policy-content{
  padding:30px;
}

.tm-policy-title{
  font-size:1.8rem;
  font-weight:600;
  margin-bottom:10px;
  color:rgb(var(--ac));
}

.tm-policy-updated{
  font-size:.85rem;
  color:rgb(var(--tm));
  margin-bottom:30px;
  font-style:italic;
}

.tm-policy-body h3{
  font-size:1.3rem;
  font-weight:600;
  margin:30px 0 16px;
  color:rgb(var(--fg));
  border-bottom:2px solid rgba(var(--ac),.2);
  padding-bottom:8px;
}

.tm-policy-body h4{
  font-size:1.1rem;
  font-weight:600;
  margin:20px 0 12px;
  color:rgb(var(--fg));
}

.tm-policy-body p{
  line-height:1.7;
  margin-bottom:16px;
  color:rgb(var(--tm));
}

.tm-policy-body ul,
.tm-policy-body ol{
  margin:12px 0 16px 20px;
  line-height:1.8;
  color:rgb(var(--tm));
}

.tm-policy-body li{
  margin-bottom:8px;
}

.tm-policy-body strong{
  color:rgb(var(--ac));
  font-weight:600;
}

/* ═══════════════════════════════════════════════════
   REVIEW SYSTEM
   ═══════════════════════════════════════════════════ */
.tm-reviews-count{
  font-size:.85rem;
  color:rgb(var(--tm));
  margin-left:4px;
}

.tm-reviews-summary{
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding:20px;
  background:rgba(var(--ac),.05);
  border-radius:12px;
  margin-bottom:24px;
  border:1px solid rgba(var(--ac),.15);
}

.tm-reviews-avg{
  text-align:center;
}

.tm-reviews-score{
  font-size:2.5rem;
  font-weight:700;
  color:rgb(var(--ac));
  line-height:1;
  margin-bottom:8px;
}

.tm-reviews-stars-big{
  font-size:1.5rem;
  color:#ffa500;
  margin-bottom:4px;
}

.tm-reviews-total{
  font-size:.85rem;
  color:rgb(var(--tm));
  opacity:.8;
}

.tm-btn-write-review{
  padding:10px 24px;
  background:rgb(var(--ac));
  color:#fff;
  border:none;
  border-radius:8px;
  font-size:.9rem;
  font-weight:600;
  cursor:pointer;
  transition:all .2s;
}

.tm-btn-write-review:hover{
  transform:translateY(-2px);
  box-shadow:0 4px 12px rgba(var(--ac),.3);
}

/* Review Items */
.tm-review-item{
  padding:20px;
  border-bottom:1px solid var(--bd);
  transition:background .2s;
}

.tm-review-item:hover{
  background:rgba(var(--fg),.02);
}

.tm-review-header{
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  margin-bottom:12px;
}

.tm-review-author{
  flex:1;
}

.tm-review-name{
  font-weight:600;
  color:rgb(var(--fg));
  margin-bottom:4px;
}

.tm-review-date{
  font-size:.8rem;
  color:rgb(var(--tm));
  opacity:.7;
}

.tm-review-rating{
  font-size:1.1rem;
  color:#ffa500;
}

.tm-review-title{
  font-weight:600;
  color:rgb(var(--fg));
  margin-bottom:8px;
  font-size:.95rem;
}

.tm-review-text{
  line-height:1.6;
  color:rgb(var(--tm));
  font-size:.9rem;
}

.tm-review-verified{
  display:inline-flex;
  align-items:center;
  gap:4px;
  font-size:.75rem;
  color:rgb(var(--ac));
  margin-top:8px;
  padding:4px 8px;
  background:rgba(var(--ac),.1);
  border-radius:4px;
}

/* Review Form */
#tm-review-form{
  padding:24px;
  background:rgba(var(--fg),.02);
  border-radius:12px;
  border:1px solid var(--bd);
  margin-top:20px;
}

.tm-review-form-title{
  font-size:1.2rem;
  font-weight:600;
  margin-bottom:20px;
  color:rgb(var(--fg));
}

.tm-review-form-body .tm-field{
  margin-bottom:16px;
}

.tm-review-form-body label{
  display:block;
  font-size:.85rem;
  font-weight:600;
  margin-bottom:6px;
  color:rgb(var(--fg));
}

.tm-review-form-body input,
.tm-review-form-body textarea{
  width:100%;
  padding:10px 14px;
  border:1px solid var(--bd);
  border-radius:8px;
  background:rgba(var(--bg),.5);
  color:rgb(var(--fg));
  font-size:.9rem;
  font-family:inherit;
  transition:all .2s;
}

.tm-review-form-body input:focus,
.tm-review-form-body textarea:focus{
  outline:none;
  border-color:rgb(var(--ac));
  box-shadow:0 0 0 3px rgba(var(--ac),.1);
}

.tm-review-form-body textarea{
  resize:vertical;
  min-height:100px;
}

/* Star Rating Input */
.tm-rating-input{
  display:flex;
  gap:6px;
  margin-top:6px;
}

.tm-star-btn{
  font-size:2rem;
  background:none;
  border:none;
  color:#ddd;
  cursor:pointer;
  transition:all .2s;
  padding:0;
  line-height:1;
}

.tm-star-btn:hover,
.tm-star-btn.active{
  color:#ffa500;
  transform:scale(1.1);
}

/* Review Form Actions */
.tm-review-form-actions{
  display:flex;
  gap:12px;
  margin-top:20px;
}

.tm-btn-cancel-review,
.tm-btn-submit-review{
  flex:1;
  padding:12px 24px;
  border-radius:8px;
  font-size:.9rem;
  font-weight:600;
  cursor:pointer;
  border:none;
  transition:all .2s;
}

.tm-btn-cancel-review{
  background:rgba(var(--fg),.08);
  color:rgb(var(--fg));
}

.tm-btn-cancel-review:hover{
  background:rgba(var(--fg),.12);
}

.tm-btn-submit-review{
  background:rgb(var(--ac));
  color:#fff;
}

.tm-btn-submit-review:hover{
  transform:translateY(-2px);
  box-shadow:0 4px 12px rgba(var(--ac),.3);
}

/* Mobile Footer Styles */
@media(max-width:700px){
  #tm-footer{
    padding:40px 16px 20px;
  }
  
  .tm-trust-section{
    grid-template-columns:1fr;
    gap:12px;
  }
  
  .tm-trust-badge{
    padding:12px;
  }
  
  .tm-trust-icon{
    font-size:1.6rem;
  }
  
  .tm-footer-links{
    grid-template-columns:1fr;
    gap:30px;
  }
  
  .tm-footer-payments{
    justify-content:center;
  }
  
  /* Landing Page Footer Mobile */
  .tm-landing-footer{
    flex-direction:column;
    gap:8px;
    margin-top:30px;
    padding-top:20px;
  }
  
  .tm-landing-sep{
    display:none;
  }
  
  .tm-landing-link{
    font-size:.8rem;
    padding:6px 10px;
  }
  
  .tm-reviews-summary{
    flex-direction:column;
    gap:16px;
    text-align:center;
  }
  
  .tm-policy-content{
    padding:20px;
  }
  
  .tm-policy-title{
    font-size:1.4rem;
  }
  
  .tm-policy-body h3{
    font-size:1.1rem;
  }
}