/* ==========================================================================
   TemplatesDesk — Corporate Glassmorphism theme
   Isometric Diorama · Phygital · Clean Corporate Design · Polished 3D Render
   Holographic Data · Hyper-detailed · Luminous Pastels · Professional Lighting
   Loaded AFTER each page's inline <style> block so these rules win the
   cascade at equal specificity, re-skinning every page from one file.
   ========================================================================== */

:root{
  /* luminous pastel canvas */
  --cream:#F3F1FC;
  --paper:#FFFFFF;

  /* ink, cooled toward plum for a corporate-glass feel */
  --ink:#332F4C;
  --ink-soft:#6C6790;

  /* holographic mint */
  --sage:#8FE3CB;
  --sage-deep:#3FAE8E;

  /* sky blue */
  --blue:#AECBFF;
  --blue-deep:#4E7FE0;
  --blue-pale:#EEF3FF;

  /* lilac */
  --lavender:#CBB9F7;
  --lavender-deep:#8C63E0;

  /* warm accent, kept for CTAs / highlights */
  --clay:#FFC9A0;
  --clay-deep:#EE8F52;

  --line:#E6E0F9;

  /* glass system tokens */
  --glass-fill: linear-gradient(150deg, rgba(255,255,255,0.72), rgba(255,255,255,0.32));
  --glass-fill-strong: linear-gradient(150deg, rgba(255,255,255,0.85), rgba(255,255,255,0.5));
  --glass-border: rgba(255,255,255,0.75);
  --glass-shadow: 0 20px 44px -20px rgba(76,63,140,0.28);
  --glass-shadow-lg: 0 30px 70px -24px rgba(76,63,140,0.32);
  --glass-inset: inset 0 1px 1px rgba(255,255,255,0.85);
}

/* ---------- base + type ---------- */
body{
  background:
    radial-gradient(circle at 12% 8%, rgba(174,203,255,0.25), transparent 42%),
    radial-gradient(circle at 88% 6%, rgba(203,185,247,0.28), transparent 40%),
    radial-gradient(circle at 50% 100%, rgba(143,227,203,0.20), transparent 45%),
    var(--cream) !important;
  font-family:'Inter', 'IBM Plex Sans', sans-serif !important;
}
h1,h2,h3{
  font-family:'Space Grotesk', 'Fraunces', sans-serif !important;
  letter-spacing:-0.015em !important;
}
.brand .mark, .foot-brand .mark{ font-family:'Space Grotesk', 'Fraunces', sans-serif !important; }
.eyebrow, .price-pill, footer h4, .count, .drawer .tab, .fmt, .th-1, .th-2, .th-3, .th-4{
  font-family:'IBM Plex Mono', monospace !important;
}

/* ---------- header: frosted glass, floating ---------- */
header{
  background: rgba(255,255,255,0.6) !important;
  backdrop-filter: blur(18px) saturate(160%);
  -webkit-backdrop-filter: blur(18px) saturate(160%);
  border-bottom: 1px solid var(--glass-border) !important;
  box-shadow: 0 8px 30px -18px rgba(76,63,140,0.35);
}
.search-form{
  background: rgba(255,255,255,0.55) !important;
  border: 1px solid var(--glass-border) !important;
  backdrop-filter: blur(6px);
}
.search-form button{
  background: linear-gradient(135deg, var(--lavender-deep), var(--blue-deep)) !important;
  color:#fff !important;
  box-shadow: 0 8px 18px -8px rgba(140,99,224,0.55);
}
.search-form button:hover{ background: linear-gradient(135deg, var(--blue-deep), var(--lavender-deep)) !important; }

.price-pill{
  background: linear-gradient(135deg, rgba(143,227,203,0.55), rgba(78,127,224,0.35)) !important;
  border: 1px solid var(--glass-border);
  color:#1E5744 !important;
  box-shadow: var(--glass-inset);
}

/* ---------- category pill nav ---------- */
.cat-nav{
  background: rgba(255,255,255,0.4) !important;
  border-top: 1px solid var(--glass-border) !important;
  backdrop-filter: blur(10px);
}
.cat-nav-inner a{
  background: rgba(255,255,255,0.55) !important;
  border: 1px solid var(--glass-border) !important;
  backdrop-filter: blur(4px);
}
.cat-nav-inner a:hover{ border-color: var(--lavender-deep) !important; }
.cat-nav-inner a.is-current, .cat-nav-inner a.active{
  background: linear-gradient(135deg, rgba(143,227,203,0.65), rgba(174,203,255,0.5)) !important;
  border-color: var(--sage-deep) !important;
  color: var(--ink) !important;
}

/* ---------- buttons ---------- */
.btn-primary, .buy-btn{
  background: linear-gradient(135deg, var(--lavender-deep), var(--blue-deep)) !important;
  box-shadow: 0 14px 30px -12px rgba(140,99,224,0.55);
  border: none !important;
}
.btn-primary:hover, .buy-btn:hover{
  background: linear-gradient(135deg, var(--blue-deep), var(--sage-deep)) !important;
}
.btn-ghost{ border-bottom: 1px solid var(--lavender-deep) !important; color: var(--ink) !important; }

/* ---------- glass panel treatment for every card-like surface ---------- */
.cat-card, .prod-card, .sub-card, .related-card, .stat-card, [class*="-card"]{
  background: var(--glass-fill) !important;
  border: 1px solid var(--glass-border) !important;
  border-radius: 18px !important;
  backdrop-filter: blur(14px) saturate(140%);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
  box-shadow: var(--glass-shadow), var(--glass-inset) !important;
}
.cat-card:hover, .prod-card:hover, .related-card:hover{
  box-shadow: var(--glass-shadow-lg), var(--glass-inset) !important;
  transform: translateY(-4px);
}
.cat-card .swatch, .prod-thumb{
  border-radius: 12px !important;
  box-shadow: 0 8px 18px -10px rgba(76,63,140,0.35), var(--glass-inset);
}
.c-family .swatch, .c-hr .swatch, .c-office .swatch{ background: linear-gradient(135deg, var(--sage), rgba(255,255,255,0.4)) !important; }
.c-money .swatch, .c-resume .swatch, .c-sales .swatch{ background: linear-gradient(135deg, var(--clay), rgba(255,255,255,0.4)) !important; }
.c-personal .swatch, .c-student .swatch{ background: linear-gradient(135deg, var(--lavender), rgba(255,255,255,0.4)) !important; }
.c-accounting .swatch, .c-procurement .swatch, .c-business .swatch, .c-specialized .swatch{ background: linear-gradient(135deg, var(--blue), rgba(255,255,255,0.4)) !important; }
.c-free .swatch{ background: linear-gradient(135deg, #FFE9B8, rgba(255,255,255,0.4)) !important; }

.prod-price, .stat-card b{
  color: var(--lavender-deep) !important;
}

/* ---------- trust strip ---------- */
.trust{
  background: var(--glass-fill) !important;
  border-radius: 18px !important;
  border: 1px solid var(--glass-border) !important;
  padding: 22px 26px !important;
  box-shadow: var(--glass-shadow), var(--glass-inset) !important;
  margin: 20px 0 !important;
}
.trust{ border-top: none !important; border-bottom: none !important; }

/* ---------- sub-band ---------- */
.sub-band{
  background: rgba(255,255,255,0.35) !important;
  border-top: 1px solid var(--glass-border) !important;
  border-bottom: 1px solid var(--glass-border) !important;
}

/* ---------- footer: deep phygital glass ---------- */
footer{
  background: linear-gradient(165deg, #2A2440, #241F3A 55%, #1F1B33) !important;
  color:#D9D3F0 !important;
  position: relative;
  overflow: hidden;
}
footer::before{
  content:'';
  position:absolute; inset:0;
  background:
    radial-gradient(circle at 15% 10%, rgba(143,227,203,0.14), transparent 40%),
    radial-gradient(circle at 85% 20%, rgba(174,203,255,0.14), transparent 40%);
  pointer-events:none;
}
footer h4{ color:#B7ADDD !important; }
footer li a:hover{ color: var(--sage) !important; }
.foot-brand .mark{ color:#fff !important; }
.foot-brand p{ color:#B0A8CF !important; }
.foot-legal{ color:#8E85B3 !important; border-top: 1px solid rgba(255,255,255,0.1); }
.foot-grid, .foot-cols{ border-bottom: 1px solid rgba(255,255,255,0.1) !important; }

/* ---------- isometric diorama hero (homepage) ---------- */
.iso-hero{
  position: relative;
  height: 430px;
  perspective: 1900px;
}
.iso-floor{
  position:absolute; inset:0;
  transform: rotateX(56deg) rotateZ(45deg);
  transform-style: preserve-3d;
}
.iso-grid{
  position:absolute; width:820px; height:820px;
  left:50%; top:50%; margin-left:-410px; margin-top:-410px;
  background-image:
    linear-gradient(rgba(140,120,200,0.08) 1px, transparent 1px),
    linear-gradient(90deg, rgba(140,120,200,0.08) 1px, transparent 1px);
  background-size:40px 40px;
  border-radius:40px;
}
.iso-pedestal{ position:absolute; width:184px; height:184px; transform-style:preserve-3d; }
.iso-pedestal .top{
  position:absolute; width:184px; height:184px; border-radius:22px;
  background: var(--glass-fill-strong);
  border:1px solid var(--glass-border);
  box-shadow: var(--glass-shadow-lg), var(--glass-inset);
}
.iso-pedestal .side{
  position:absolute; width:184px; height:56px; left:0; top:184px;
  background: linear-gradient(180deg, rgba(255,255,255,0.5), rgba(210,200,240,0.25));
  border-radius:0 0 22px 22px; border:1px solid var(--glass-border); border-top:none;
}
.iso-content{
  position:absolute; inset:0;
  transform: rotateZ(-45deg) rotateX(-56deg);
  display:flex; align-items:center; justify-content:center;
}
.iso-money   { left:20px;  top:170px; }
.iso-home    { left:280px; top:40px; }
.iso-sheet   { left:500px; top:190px; }

.iso-coin{
  position:absolute; border-radius:50%;
  background: radial-gradient(circle at 32% 28%, #fffaea, #f0d38f 45%, #d4a951 100%);
  box-shadow: 0 8px 14px rgba(170,140,80,0.35), inset 0 2px 3px rgba(255,255,255,0.75);
  border:1px solid rgba(255,255,255,0.6);
}
.iso-bag{
  position:absolute; width:62px; height:68px; left:60px; top:-56px;
  background: linear-gradient(160deg, #b7ecdc, #63c9a9 75%);
  border-radius:44% 44% 55% 55% / 55% 55% 45% 45%;
  box-shadow: 0 14px 22px rgba(90,170,145,0.4), inset 0 2px 4px rgba(255,255,255,0.6);
}
.iso-bag::before{
  content:''; position:absolute; left:18px; top:-11px; width:26px; height:18px;
  border:5px solid #4CAF8F; border-bottom:none; border-radius:18px 18px 0 0;
}
.iso-bag::after{
  content:'$'; position:absolute; left:0; right:0; top:20px; text-align:center;
  color:rgba(20,70,55,0.55); font-weight:700; font-size:20px; font-family:'Space Grotesk',sans-serif;
}
.iso-house{ position:absolute; left:48px; top:-64px; width:80px; }
.iso-house-body{
  width:80px; height:50px; border-radius:7px; position:relative;
  background: linear-gradient(160deg, rgba(203,185,247,0.95), rgba(160,130,230,0.9));
  box-shadow: 0 12px 20px rgba(120,95,190,0.35), inset 0 2px 3px rgba(255,255,255,0.7);
}
.iso-house-roof{
  position:absolute; top:-28px; left:-7px; width:0; height:0;
  border-left:47px solid transparent; border-right:47px solid transparent;
  border-bottom:33px solid rgba(174,203,255,0.95);
  filter: drop-shadow(0 6px 8px rgba(120,150,220,0.35));
}
.iso-house-door{ position:absolute; bottom:0; left:31px; width:17px; height:25px; background:rgba(100,80,160,0.45); border-radius:4px 4px 0 0; }
.iso-house-win{ position:absolute; top:10px; left:10px; width:13px; height:13px; background:rgba(255,255,255,0.85); border-radius:3px; }
.iso-house-win.r{ left:auto; right:10px; }

.iso-sheet-card{
  position:absolute; width:156px; height:106px; left:12px; top:-92px;
  background: linear-gradient(135deg, rgba(174,203,255,0.4), rgba(203,185,247,0.32));
  border:1px solid var(--glass-border); border-radius:12px;
  backdrop-filter: blur(6px);
  box-shadow: 0 0 24px rgba(174,203,255,0.4), 0 16px 30px rgba(120,120,200,0.3);
  padding:8px; display:grid; grid-template-columns:repeat(4,1fr); grid-template-rows:repeat(4,1fr); gap:4px;
}
.iso-sheet-card div{ background:rgba(255,255,255,0.4); border:1px solid rgba(255,255,255,0.55); border-radius:3px; }
.iso-sheet-card div.bar{ background: linear-gradient(180deg, rgba(63,174,142,0.7), rgba(63,174,142,0.2)); }

.iso-panel{
  position:absolute;
  background: var(--glass-fill-strong);
  border:1px solid var(--glass-border);
  border-radius:16px;
  backdrop-filter: blur(12px);
  box-shadow: var(--glass-shadow), var(--glass-inset);
  padding:12px 15px;
  animation: iso-float 6s ease-in-out infinite;
}
.iso-panel .l{ font-family:'IBM Plex Mono', monospace; font-size:9.5px; letter-spacing:0.06em; text-transform:uppercase; color:var(--ink-soft); margin-bottom:4px; font-weight:600; }
.iso-panel .v{ font-family:'Space Grotesk', sans-serif; font-size:17px; font-weight:700; color:var(--ink); }
.iso-panel .s{ font-size:10px; color:var(--sage-deep); margin-top:2px; font-weight:600; }
.iso-p1{ left:0; top:6px; width:150px; animation-delay:0s; }
.iso-p2{ left:210px; top:300px; width:160px; animation-delay:1.1s; }
.iso-p3{ left:540px; top:0; width:150px; animation-delay:2s; }

@keyframes iso-float{ 0%,100%{transform:translateY(0);} 50%{transform:translateY(-8px);} }

@media (max-width:860px){
  .iso-hero{ height:340px; transform:scale(0.72); transform-origin: top center; }
}

/* ---------- mini isometric diorama badge (category pages) ---------- */
.iso-mini{ position:relative; width:150px; height:150px; perspective:1200px; margin:0 0 22px auto; }
.iso-mini-floor{ position:absolute; inset:0; transform: rotateX(55deg) rotateZ(45deg); transform-style:preserve-3d; }
.iso-mini-top{
  position:absolute; width:150px; height:150px; border-radius:20px;
  background: var(--glass-fill-strong); border:1px solid var(--glass-border);
  box-shadow: var(--glass-shadow-lg), var(--glass-inset);
}
.iso-mini-side{
  position:absolute; width:150px; height:44px; left:0; top:150px;
  background: linear-gradient(180deg, rgba(255,255,255,0.5), rgba(210,200,240,0.25));
  border-radius:0 0 20px 20px; border:1px solid var(--glass-border); border-top:none;
}
.iso-mini-content{
  position:absolute; inset:0; transform: rotateZ(-45deg) rotateX(-55deg);
  display:flex; align-items:center; justify-content:center;
}
.iso-mini-obj{ transform: translateY(-24px); }

.iso-mini-money .iso-mini-obj{ display:flex; align-items:flex-end; gap:6px; }
.iso-mini-money .bag{
  width:46px; height:50px; position:relative;
  background: linear-gradient(160deg, #b7ecdc, #63c9a9 75%);
  border-radius:44% 44% 55% 55% / 55% 55% 45% 45%;
  box-shadow: 0 10px 16px rgba(90,170,145,0.4), inset 0 2px 3px rgba(255,255,255,0.6);
}
.iso-mini-money .bag::before{
  content:''; position:absolute; left:13px; top:-8px; width:20px; height:14px;
  border:4px solid #4CAF8F; border-bottom:none; border-radius:14px 14px 0 0;
}
.iso-mini-money .coin{
  width:20px; height:20px; border-radius:50%; align-self:flex-end;
  background: radial-gradient(circle at 32% 28%, #fffaea, #f0d38f 45%, #d4a951 100%);
  box-shadow: 0 5px 8px rgba(170,140,80,0.35), inset 0 1px 2px rgba(255,255,255,0.75);
  border:1px solid rgba(255,255,255,0.6);
}

.iso-mini-house .house-body{
  width:58px; height:36px; border-radius:6px; position:relative;
  background: linear-gradient(160deg, rgba(203,185,247,0.95), rgba(160,130,230,0.9));
  box-shadow: 0 8px 14px rgba(120,95,190,0.35), inset 0 2px 3px rgba(255,255,255,0.7);
}
.iso-mini-house .house-roof{
  position:absolute; top:-20px; left:-5px; width:0; height:0;
  border-left:34px solid transparent; border-right:34px solid transparent;
  border-bottom:24px solid rgba(174,203,255,0.95);
  filter: drop-shadow(0 4px 6px rgba(120,150,220,0.35));
}
.iso-mini-house .house-door{ position:absolute; bottom:0; left:22px; width:12px; height:18px; background:rgba(100,80,160,0.45); border-radius:3px 3px 0 0; }
.iso-mini-house .house-win{ position:absolute; top:7px; left:7px; width:9px; height:9px; background:rgba(255,255,255,0.85); border-radius:2px; }
.iso-mini-house .house-win.r{ left:auto; right:7px; }

.iso-mini-sheet .sheet-card{
  width:96px; height:66px;
  background: linear-gradient(135deg, rgba(174,203,255,0.4), rgba(203,185,247,0.32));
  border:1px solid var(--glass-border); border-radius:9px;
  backdrop-filter: blur(4px);
  box-shadow: 0 0 16px rgba(174,203,255,0.4), 0 10px 18px rgba(120,120,200,0.3);
  padding:6px; display:grid; grid-template-columns:repeat(4,1fr); grid-template-rows:repeat(3,1fr); gap:3px;
}
.iso-mini-sheet .sheet-card div{ background:rgba(255,255,255,0.4); border:1px solid rgba(255,255,255,0.55); border-radius:2px; }
.iso-mini-sheet .sheet-card div.bar{ background: linear-gradient(180deg, rgba(63,174,142,0.7), rgba(63,174,142,0.2)); }

@media (max-width:860px){
  .iso-mini{ margin: 0 auto 18px; }
}

/* ---------- account / sign-in widget ---------- */
.account-widget{
  display:flex; align-items:center; gap:8px;
  margin-left:6px;
}
.account-signin{
  display:flex; align-items:center; gap:8px;
  background: rgba(255,255,255,0.7);
  border:1px solid var(--glass-border);
  border-radius:20px;
  padding:8px 14px 8px 10px;
  font-family:'Inter','IBM Plex Sans',sans-serif;
  font-size:0.82rem; font-weight:600;
  color: var(--ink);
  cursor:pointer;
  backdrop-filter: blur(6px);
  box-shadow: var(--glass-inset);
  white-space:nowrap;
}
.account-signin:hover{ border-color: var(--lavender-deep); }
.account-chip{
  display:flex; align-items:center; gap:7px;
  background: linear-gradient(135deg, rgba(143,227,203,0.4), rgba(174,203,255,0.35));
  border:1px solid var(--glass-border);
  border-radius:20px;
  padding:5px 12px 5px 5px;
  font-size:0.82rem; font-weight:600; color:var(--ink);
}
.account-chip img{ width:22px; height:22px; border-radius:50%; display:block; }
.account-chip .account-dot{
  width:22px; height:22px; border-radius:50%;
  background: linear-gradient(135deg, var(--lavender-deep), var(--blue-deep));
}
.account-signout{
  background:transparent; border:1px solid var(--line); border-radius:20px;
  padding:7px 12px; font-size:0.78rem; color:var(--ink-soft); cursor:pointer;
  font-family:'Inter','IBM Plex Sans',sans-serif;
}
.account-signout:hover{ color: var(--ink); border-color: var(--lavender-deep); }

@media (max-width:860px){
  .account-widget{ margin-left:0; }
  .account-signin span:not(.account-dot), .account-chip span{ display:none; }
}