@import url('https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,500;9..144,600;9..144,700&family=Inter:wght@400;500;600;700;800&family=JetBrains+Mono:wght@400;600&display=swap');

:root{
  --bg:#faf7f0; --panel:#ffffff; --panel-2:#f2ede0; --ink:#12231f; --ink-dim:#5c6b64;
  --line:#e2dccb; --rust:#b3502a; --rust-2:#8a3d1f; --gold:#c99a44; --cream:#f7ecd2;
  --shadow:0 20px 46px -24px rgba(15,44,38,.22);
  --shadow-lg:0 34px 80px -28px rgba(15,44,38,.3);
  /* Fixed, theme-independent — the admin sidebar is always dark-styled
     regardless of the light/dark toggle, so it must NOT use --ink
     (which flips to a light color in dark mode). */
  --sidebar-bg:#12231f; --sidebar-ink:#faf7f0;
}
[data-theme="dark"]{
  --bg:#1c1913; --panel:#252017; --panel-2:#1d1a13; --ink:#f1ead9; --ink-dim:#9c9280;
  --line:#3a3427; --rust:#e07548; --rust-2:#c9633c; --gold:#e0b869; --cream:#3a3320;
  --shadow:0 20px 55px -18px rgba(0,0,0,.6);
  --shadow-lg:0 34px 90px -20px rgba(0,0,0,.7);
}
*{box-sizing:border-box; margin:0; padding:0;}
html{scroll-behavior:smooth;}
body{background:var(--bg); color:var(--ink); font-family:'Inter',sans-serif; transition:background .4s ease,color .4s ease; overflow-x:hidden;}
a{color:inherit; text-decoration:none;}
.serif{font-family:'Fraunces',serif;}
.mono{font-family:'JetBrains Mono',monospace;}
::selection{background:var(--gold); color:#fff;}

.progress{position:fixed; top:0; left:0; height:3px; background:linear-gradient(90deg,var(--rust),var(--gold)); z-index:100; width:0%;}


header{position:sticky; top:0; z-index:50; background:color-mix(in srgb, var(--bg) 88%, transparent); backdrop-filter:blur(10px); border-bottom:1px solid var(--line); transition:padding .3s ease;}
body:has(.announce-bar) header{top:38px;}
.nav{max-width:1200px; margin:0 auto; padding:18px 26px; display:flex; align-items:center; justify-content:space-between;}
header.shrink .nav{padding:11px 26px;}
.logo{font-family:'Fraunces'; font-weight:700; font-size:1.2rem; display:flex; align-items:center; gap:9px;}
.logo .mark{width:22px; height:22px; border-radius:6px; background:var(--rust); position:relative;}
.logo .mark::after{content:""; position:absolute; inset:5px; border:1.5px solid var(--cream); border-radius:2px;}
.navlinks{display:flex; gap:26px; font-size:.87rem; color:var(--ink-dim); font-weight:500;}
.navlinks a{position:relative; padding-bottom:2px;}
.navlinks a::after{content:""; position:absolute; left:0; bottom:0; width:0; height:1.5px; background:var(--gold); transition:width .25s ease;}
.navlinks a:hover{color:var(--ink);}
.navlinks a:hover::after{width:100%;}
.nav-right{display:flex; align-items:center; gap:14px;}
.toggle{width:50px; height:26px; border-radius:14px; background:var(--line); border:none; position:relative; cursor:pointer;}
.toggle .knob{position:absolute; top:2px; left:2px; width:20px; height:20px; border-radius:50%; background:var(--rust); transition:transform .3s cubic-bezier(.5,-.3,.5,1.3); display:flex; align-items:center; justify-content:center; font-size:.6rem; color:#fff;}
[data-theme="dark"] .toggle .knob{transform:translateX(23px);}
.btn{font-weight:600; font-size:.85rem; padding:11px 20px; border-radius:8px; border:1.5px solid var(--ink); cursor:pointer; transition:.2s; display:inline-block;}
.btn-solid{background:var(--rust); color:#fff; border-color:var(--rust);}
.btn-solid:hover{filter:brightness(1.1); box-shadow:0 14px 28px -12px var(--rust); transform:translateY(-2px);}
.btn-ghost:hover{background:var(--panel); transform:translateY(-2px);}

/* HERO */
.hero{max-width:1200px; margin:0 auto; padding:76px 26px 50px; display:grid; grid-template-columns:1.05fr .95fr; gap:50px; align-items:center; position:relative;}
.hero-dots::before{
  content:""; position:absolute; inset:0; z-index:-1; pointer-events:none;
  background-image:radial-gradient(color-mix(in srgb, var(--ink) 14%, transparent) 1.5px, transparent 1.5px);
  background-size:22px 22px;
  mask-image:radial-gradient(ellipse 70% 60% at 50% 30%, #000 40%, transparent 85%);
  -webkit-mask-image:radial-gradient(ellipse 70% 60% at 50% 30%, #000 40%, transparent 85%);
}
.eyebrow{display:inline-flex; align-items:center; gap:8px; font-family:'JetBrains Mono'; font-size:.72rem; color:var(--rust-2); letter-spacing:.06em; margin-bottom:20px; text-transform:uppercase;}
.eyebrow .dot{width:6px; height:6px; border-radius:50%; background:var(--gold);}
h1{font-family:'Fraunces'; font-weight:700; font-size:clamp(2.3rem,4.6vw,3.5rem); line-height:1.06; letter-spacing:-.01em;}
h1 .em{color:var(--rust-2); font-style:italic; font-weight:600;}
.hero p.sub{color:var(--ink-dim); font-size:1.03rem; max-width:48ch; margin:22px 0 30px;}
.hero-cta{display:flex; gap:14px; flex-wrap:wrap; margin-bottom:26px;}
.hero-tags{display:flex; gap:8px; flex-wrap:wrap;}
.hero-tags span{font-size:.74rem; font-weight:600; padding:6px 12px; border-radius:20px; background:var(--panel-2); color:var(--ink-dim); border:1px solid var(--line);}

/* platform switcher preview */
.preview{background:var(--panel); border:1px solid var(--line); border-radius:16px; overflow:hidden; box-shadow:var(--shadow-lg);}
.preview-tabs{display:flex; gap:6px; padding:12px; background:var(--panel-2); border-bottom:1px solid var(--line);}
.ptab{font-size:.74rem; font-weight:600; padding:7px 13px; border-radius:20px; color:var(--ink-dim); cursor:pointer; transition:.2s; border:1px solid transparent; display:flex; align-items:center; gap:6px;}
.ptab i{font-size:.9rem;}
.ptab.active{background:var(--rust); color:#fff;}
.preview-body{padding:26px; min-height:260px; position:relative;}
.pscreen{display:none; animation:fadeUp .4s ease;}
.pscreen.active{display:block;}
@keyframes fadeUp{from{opacity:0; transform:translateY(8px);} to{opacity:1; transform:none;}}
.pscreen-icon{width:52px; height:52px; border-radius:14px; background:var(--panel-2); border:1px solid var(--line); display:flex; align-items:center; justify-content:center; font-size:1.4rem; color:var(--rust); margin-bottom:16px;}
.pscreen-title{font-family:'Fraunces'; font-size:1.15rem; margin-bottom:16px;}
.pscreen-list{display:flex; flex-direction:column; gap:10px;}
.pscreen-item{font-size:.86rem; color:var(--ink-dim); display:flex; align-items:center; gap:9px;}
.pscreen-item i{color:var(--rust); font-size:.78rem;}
.pscreen .price-tag{display:inline-block; margin-top:18px; font-family:'JetBrains Mono'; font-size:.72rem; background:var(--cream); color:var(--ink); padding:5px 11px; border-radius:20px;}

section{max-width:1200px; margin:0 auto; padding:96px 26px; position:relative;}
.sec-head{margin-bottom:48px; max-width:64ch; display:flex; justify-content:space-between; align-items:flex-end; gap:20px; flex-wrap:wrap;}
.sec-head .tag{font-family:'JetBrains Mono'; font-size:.74rem; letter-spacing:.08em; text-transform:uppercase; color:var(--gold); display:block; margin-bottom:10px;}
.sec-head h2{font-family:'Fraunces'; font-weight:700; font-size:clamp(1.7rem,3vw,2.4rem);}
.sec-head p{color:var(--ink-dim); font-size:.92rem; max-width:38ch;}

.reveal{opacity:0; transform:translateY(26px); transition:opacity .7s cubic-bezier(.2,.7,.3,1), transform .7s cubic-bezier(.2,.7,.3,1);}
.reveal.in{opacity:1; transform:none;}
.stagger.in > *{transition-delay:calc(var(--i,0) * 90ms);}

/* PLATFORM */
.platform-grid{display:grid; grid-template-columns:1.1fr .9fr; gap:36px; align-items:center;}
.platform-feats{display:flex; flex-direction:column; gap:20px;}
.pfeat{display:flex; gap:16px;}
.pfeat .ico{width:38px; height:38px; border-radius:10px; background:var(--rust); color:#fff; display:flex; align-items:center; justify-content:center; font-size:1rem; flex-shrink:0;}
.pfeat h4{font-weight:700; margin-bottom:4px;}
.pfeat p{color:var(--ink-dim); font-size:.87rem;}

/* addon shelf */
.addon-panel{background:var(--panel); border:1px solid var(--line); border-radius:16px; padding:24px; box-shadow:var(--shadow);}
.addon-panel h4{font-family:'Fraunces'; font-size:1.1rem; margin-bottom:16px;}
.addon-list{display:flex; flex-direction:column; gap:10px;}
.addon-item{display:flex; align-items:center; gap:12px; padding:10px 12px; border-radius:10px; background:var(--panel-2); border:1px solid var(--line); transition:.2s;}
.addon-item:hover{border-color:var(--rust-2); transform:translateX(4px);}
.addon-item .aico{width:30px; height:30px; border-radius:8px; background:var(--cream); display:flex; align-items:center; justify-content:center; font-size:.85rem;}
.addon-item .aname{font-weight:600; font-size:.87rem; flex:1;}
.addon-item .aprice{font-family:'JetBrains Mono'; font-size:.78rem; color:var(--rust-2); font-weight:600;}
.custom-callout{margin-top:16px; padding:14px 16px; border-radius:10px; border:1.5px dashed var(--gold); font-size:.83rem; color:var(--ink-dim); display:flex; justify-content:space-between; align-items:center; gap:10px; flex-wrap:wrap;}
.custom-callout b{color:var(--ink);}
.custom-callout a{font-size:.78rem; font-weight:700; color:var(--gold);}

/* SERVICES — menu board */
.menu{background:var(--rust); color:#fff; border-radius:20px; padding:44px; box-shadow:var(--shadow-lg);}
.hire-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:18px;}
.hire-card{background:var(--panel); border:1px solid var(--line); border-radius:14px; padding:22px; transition:transform .25s ease, box-shadow .3s ease, border-color .25s ease; display:block;}
.hire-card:hover{border-color:var(--rust); transform:translateY(-6px); box-shadow:var(--shadow);}
.hire-top{display:flex; justify-content:space-between; align-items:center; margin-bottom:14px;}
.hire-icon{width:40px; height:40px; border-radius:10px; background:var(--panel-2); display:flex; align-items:center; justify-content:center; color:var(--rust); font-size:1rem;}
.hire-price{font-family:'JetBrains Mono'; font-size:.78rem; color:var(--rust-2); font-weight:600;}
.hire-card h4{font-family:'Fraunces'; font-size:1rem; margin-bottom:6px;}
.hire-card p{font-size:.82rem; color:var(--ink-dim); margin-bottom:16px; min-height:2.4em;}
.hire-cta{font-size:.8rem; font-weight:600; color:var(--rust); display:flex; align-items:center; gap:6px;}
.hire-cta i{font-size:.7rem; transition:transform .18s;}
.hire-card:hover .hire-cta i{transform:translateX(3px);}
.hire-more{text-align:center; margin-top:32px;}

/* PORTFOLIO cards */
.products{display:grid; grid-template-columns:repeat(3,1fr); gap:20px;}
.product{background:var(--panel); border:1px solid var(--line); border-radius:14px; overflow:hidden; transition:transform .3s ease, box-shadow .3s ease;}
.product:hover{transform:translateY(-6px); box-shadow:var(--shadow-lg);}
.product-top{height:120px; background:linear-gradient(135deg, var(--rust), var(--rust-2)); position:relative;}
.product:nth-child(2) .product-top{background:linear-gradient(135deg, var(--gold), #ffab8f);}
.product:nth-child(3) .product-top{background:linear-gradient(135deg, #4a5a52, var(--rust));}
.stock{position:absolute; top:12px; left:12px; font-family:'JetBrains Mono'; font-size:.65rem; background:rgba(255,255,255,.92); color:var(--ink); padding:3px 9px; border-radius:20px;}
.product-body{padding:20px;}
.product-body .sku{font-family:'JetBrains Mono'; font-size:.68rem; color:var(--ink-dim); margin-bottom:8px;}
.product-body h3{font-family:'Fraunces'; font-size:1.08rem; margin-bottom:8px;}
.product-body p{color:var(--ink-dim); font-size:.85rem; margin-bottom:16px;}
.pfoot{display:flex; justify-content:space-between; align-items:center; padding-top:14px; border-top:1px solid var(--line);}
.platform-badge{font-size:.72rem; font-weight:600; color:var(--rust-2);}
.mini{font-size:.76rem; border:1px solid var(--ink); padding:6px 13px; border-radius:8px; transition:.2s;}
.mini:hover{background:var(--ink); color:var(--bg);}

/* ============ PORTFOLIO CARDS — sticky footer ============ */
.portfolio-card{
  display:flex;
  flex-direction:column;
  height:100%;
}
.portfolio-card .product-top{
  flex-shrink:0;
}
.portfolio-card .product-body{
  flex:1;
  display:flex;
  flex-direction:column;
}
/* Pins the footer to the bottom of the card, aligned across a row */
.portfolio-card .catalog-foot{
  margin-top:auto;
}

  /* ============================================================
     PORTFOLIO CARD — Reviews + Repeat row
     ============================================================ */
  .portfolio-reviews{
    display:flex;
    align-items:center;
    gap:8px;
    margin-bottom:10px;
    font-size:.78rem;
    font-weight:600;
    color:var(--ink-dim);
    flex-wrap:wrap;
  }
  .portfolio-reviews-stars{
    display:inline-flex;
    align-items:center;
    line-height:1;
    color:var(--gold);
    font-size:.85rem;
    letter-spacing:1px;
  }
  .portfolio-reviews-stars .stars{
    display:inline-flex;
    align-items:center;
    gap:1px;
  }
  .portfolio-reviews-rating{
    color:var(--ink);
    font-weight:800;
  }
  .portfolio-reviews-sep{
    opacity:.5;
  }

  /* Repeat buyer chip — sits inline in the reviews row */
  .portfolio-repeat-badge{
    display:inline-flex;
    align-items:center;
    gap:5px;
    font-size:.72rem;
    font-weight:700;
    color:var(--rust);
    background:rgba(194,65,12,.08);
    border:1px solid rgba(194,65,12,.18);
    padding:3px 9px;
    border-radius:999px;
    line-height:1;
    white-space:nowrap;
  }
  .portfolio-repeat-badge i{
    font-size:.7rem;
  }





/* testimonials */
.testimonials {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 22px;
}
.tcard {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 26px;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  position: relative;
  overflow: hidden;
}
.tcard:hover {
  transform: translateY(-6px);
  border-color: var(--rust);
  box-shadow: var(--shadow);
}
.tcard::before {
  content: "\201C";
  position: absolute;
  top: 8px;
  right: 22px;
  font-size: 5rem;
  line-height: 1;
  color: color-mix(in srgb, var(--rust) 12%, transparent);
  font-family: Georgia, serif;
  pointer-events: none;
  z-index: 0;
}
.tcard > * {
  position: relative;
  z-index: 1;
}
.tcard .stars {
  color: var(--gold);
  font-size: 0.9rem;
  margin-bottom: 14px;
  letter-spacing: 2px;
}
.tcard p {
  font-family: 'Fraunces';
  font-style: italic;
  font-size: 1.0rem;
  margin-bottom: 18px;
  line-height: 1.5;
}
.tcard .who {
  font-size: 0.82rem;
  color: var(--ink-dim);
  font-weight: 600;
}
.tcard .who b {
  color: var(--rust);
  font-weight: 800;
}


/* ============ HOMEPAGE STATS STRIP ============ */
.stats-strip-section {
  max-width: 1200px;
  margin: -38px auto 0;
  padding: 0 26px;
  position: relative;
  z-index: 3;
}
.stats-strip {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
}
.stat-tile {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 16px;
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.06);
  padding: 22px 24px;
  text-align: center;
  transition: transform 0.25s ease, box-shadow 0.3s ease;
}
.stat-tile:hover {
  transform: translateY(-4px);
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.10);
}
.stat-tile-num {
  font-family: 'Fraunces', serif;
  font-size: clamp(1.6rem, 2.6vw, 2.2rem);
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1.05;
  background: linear-gradient(120deg, var(--rust), var(--gold));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.stat-tile-cap {
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--ink-dim);
  margin-top: 4px;
}
@media (max-width: 920px) {
  .stats-strip { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px) {
  .stats-strip { grid-template-columns: 1fr; }
  .stats-strip-section { margin-top: 0; }
}
/* Stats strip — mobile responsive (stacks to 2 columns under 640px) */
  @media (max-width: 640px) {
    #stats-strip > div {
      grid-template-columns: repeat(2, 1fr) !important;
      gap: 14px !important;
    }
    #stats-strip .stat-tile {
      padding: 20px 14px !important;
    }
    #stats-strip .stat-tile-num {
      font-size: 1.8rem !important;
    }
  }
  
 

.cta{background:var(--ink); color:var(--bg); border-radius:22px; padding:66px 40px; text-align:center; margin:100px 0; position:relative; overflow:hidden;}
.cta::before{content:""; position:absolute; inset:-2px; background:conic-gradient(from 0deg, var(--rust), var(--gold), var(--rust-2), var(--rust)); opacity:.18; animation:spin 9s linear infinite;}
.cta-in{position:relative; z-index:1;}
@keyframes spin{to{transform:rotate(360deg);}}
.cta h2{font-family:'Fraunces'; font-size:clamp(1.7rem,3.4vw,2.6rem); margin-bottom:20px;}
.cta .btn-solid{background:var(--gold); border-color:var(--gold);}

/* TICKET ROW — replaces the lonely single receipt */
.tally-band{background:var(--panel-2); border-top:1px solid var(--line); border-bottom:1px solid var(--line); margin:0 -26px;}
.tally-band-in{max-width:1200px; margin:0 auto; padding:64px 26px;}
.tally-head{text-align:center; margin-bottom:40px;}
.tally-head h2{font-family:'Fraunces'; font-size:1.8rem; margin-top:8px;}
.tally-row{display:grid; grid-template-columns:repeat(4,1fr); gap:24px; text-align:center;}
.tally-num{font-family:'Fraunces'; font-size:2.6rem; font-weight:700; color:var(--rust); line-height:1;}
.tally-lbl{font-size:.85rem; color:var(--ink-dim); margin-top:10px; display:flex; align-items:center; justify-content:center; gap:7px;}
.tally-lbl i{color:var(--rust); font-size:.9rem;}
.ticket .num{font-family:'Fraunces'; font-weight:700; font-size:2.1rem; color:var(--rust);}
.ticket .lbl{font-size:.8rem; color:var(--ink-dim); margin-top:4px;}

@media(max-width:920px){
  .hero{grid-template-columns:1fr;}
  .platform-grid{grid-template-columns:1fr;}
  .hire-grid{grid-template-columns:1fr 1fr;}
  .products, .testimonials{grid-template-columns:1fr;}
  .tally-row{grid-template-columns:repeat(2,1fr);}
  .ticket::before, .ticket::after{display:none;}
  .navlinks{display:none;}
}

/* ============ INNER-PAGE COMPONENTS ============ */

/* page header banner (non-hero pages) */
.page-head{max-width:1200px; margin:0 auto; padding:60px 26px 10px;}
.breadcrumb{font-family:'JetBrains Mono'; font-size:.74rem; color:var(--ink-dim); margin-bottom:18px;}
.breadcrumb a:hover{color:var(--rust);}
.breadcrumb span{margin:0 6px; opacity:.6;}
.page-head h1{font-size:clamp(2rem,4vw,2.8rem);}
.page-head p.sub{color:var(--ink-dim); max-width:56ch; margin-top:16px; font-size:1rem;}

/* filter bar */
.filter-bar{max-width:1200px; margin:32px auto 0; padding:0 26px; display:flex; gap:10px; flex-wrap:wrap;}
.chip{font-size:.8rem; font-weight:600; padding:8px 16px; border-radius:20px; border:1px solid var(--line); color:var(--ink-dim); cursor:pointer; transition:.2s; background:var(--panel);}
.chip:hover{border-color:var(--rust);}
.chip.active{background:var(--rust); color:#fff; border-color:var(--rust);}

/* generic content section spacing reused on inner pages */
.content-section{max-width:1200px; margin:0 auto; padding:50px 26px 100px;}

/* forms */
.form-card{background:var(--panel); border:1px solid var(--line); border-radius:16px; padding:36px; box-shadow:var(--shadow); max-width:640px; margin:0 auto;}
.form-card.wide{max-width:820px;}
.form-group{margin-bottom:20px;}
.form-group label{display:block; font-size:.83rem; font-weight:600; margin-bottom:8px; color:var(--ink);}
.form-group .hint{font-size:.76rem; color:var(--ink-dim); margin-top:6px;}
.form-row{display:grid; grid-template-columns:1fr 1fr; gap:16px;}
input[type="text"], input[type="email"], input[type="password"], input[type="number"], input[type="url"], input[type="date"], input[type="datetime-local"], select, textarea{
  width:100%; padding:13px 16px; border-radius:10px; border:1.5px solid var(--line); background:var(--panel-2); color:var(--ink);
  font-family:'Inter',sans-serif; font-size:.9rem; transition:border-color .2s ease, box-shadow .2s ease; outline:none;
}
input:focus, select:focus, textarea:focus{border-color:var(--rust); box-shadow:0 0 0 4px color-mix(in srgb, var(--rust) 12%, transparent);}
input::placeholder, textarea::placeholder{color:var(--ink-dim); opacity:.7;}
textarea{resize:vertical; min-height:120px;}
.form-actions{display:flex; gap:12px; margin-top:8px; align-items:center; flex-wrap:wrap;}
button.btn{font-family:inherit;}
.form-error{color:var(--rust); font-size:.78rem; margin-top:6px;}
.checkbox-row{display:flex; align-items:center; gap:8px; font-size:.85rem; color:var(--ink-dim);}
.checkbox-row input{width:auto;}

/* alerts / flash messages */
.alert{border-radius:10px; padding:14px 18px; font-size:.87rem; margin-bottom:22px; border:1px solid var(--line);}
.alert-success{background:color-mix(in srgb, var(--rust) 8%, var(--panel)); border-color:var(--rust); color:var(--ink);}
.alert-error{background:color-mix(in srgb, #c0392b 10%, var(--panel)); border-color:#c0392b; color:var(--ink);}

/* badges / status pills */
.badge{display:inline-block; font-size:.7rem; font-weight:700; padding:4px 11px; border-radius:20px; letter-spacing:.03em; text-transform:uppercase;}
.badge-active, .badge-paid, .badge-published, .badge-live{background:color-mix(in srgb, var(--rust) 16%, transparent); color:var(--rust);}
.badge-pending, .badge-draft, .badge-submitted{background:color-mix(in srgb, var(--gold) 22%, transparent); color:var(--rust-2);}
.badge-failed, .badge-declined, .badge-revoked{background:color-mix(in srgb, #c0392b 14%, transparent); color:#c0392b;}

/* tables (used in dashboard) */
.table-wrap{overflow-x:auto; border:1px solid var(--line); border-radius:12px; background:var(--panel);}
table{width:100%; border-collapse:collapse; font-size:.87rem;}
thead th{text-align:left; padding:14px 18px; font-family:'JetBrains Mono'; font-size:.7rem; letter-spacing:.06em; text-transform:uppercase; color:var(--ink-dim); border-bottom:1px solid var(--line);}
tbody td{padding:14px 18px; border-bottom:1px solid var(--line);}
tbody tr:last-child td{border-bottom:none;}
tbody tr:hover{background:var(--panel-2);}
.mono-cell{font-family:'JetBrains Mono'; font-size:.8rem; color:var(--ink-dim);}

/* pagination */
.pagination{display:flex; gap:8px; justify-content:center; margin-top:40px;}
.pagination a, .pagination span{width:36px; height:36px; display:flex; align-items:center; justify-content:center; border-radius:8px; border:1px solid var(--line); font-size:.83rem; color:var(--ink-dim);}
.pagination a:hover{border-color:var(--rust); color:var(--rust);}
.pagination .current{background:var(--rust); color:#fff; border-color:var(--rust);}

/* addon / service detail layout */
.detail-grid{display:grid; grid-template-columns:1.4fr .9fr; gap:44px; align-items:start;}
.detail-media{background:var(--panel); border:1px solid var(--line); border-radius:16px; height:280px; display:flex; align-items:center; justify-content:center; font-size:3rem; color:var(--rust); box-shadow:var(--shadow);}
.detail-side{background:var(--panel); border:1px solid var(--line); border-radius:16px; padding:26px; box-shadow:var(--shadow); position:sticky; top:100px;}
.detail-side .price{font-family:'Fraunces'; font-size:2.2rem; font-weight:700; color:var(--rust); margin-bottom:6px;}
.detail-side .meta-row{display:flex; justify-content:space-between; font-size:.83rem; padding:10px 0; border-bottom:1px dashed var(--line); color:var(--ink-dim);}
.detail-side .meta-row b{color:var(--ink);}
.detail-body h2{font-family:'Fraunces'; font-size:1.4rem; margin:28px 0 12px;}
.detail-body p{color:var(--ink-dim); line-height:1.7; margin-bottom:14px;}
.detail-body ul{padding-left:20px; color:var(--ink-dim); margin-bottom:14px;}
.detail-body li{margin-bottom:6px;}


/* ============================================================
   CART LAYOUT — responsive two-column grid
   ============================================================ */
.cart-layout{
  display:grid;
  grid-template-columns:1.6fr .9fr;
  gap:36px;
  align-items:start;
}
@media (max-width:900px){
  .cart-layout{
    grid-template-columns:1fr;
    gap:24px;
  }
}

/* ============================================================
   CART ITEM CARD
   ============================================================ */
.cart-items{
  display:flex;
  flex-direction:column;
  gap:14px;
}

.cart-item{
  display:grid;
  grid-template-columns:88px 1fr auto auto;
  gap:20px;
  align-items:center;
  background:var(--panel);
  border:1px solid var(--line);
  border-radius:16px;
  padding:18px;
  transition:border-color .25s ease, box-shadow .25s ease;
}
.cart-item:hover{
  border-color:rgba(194,65,12,.25);
  box-shadow:0 6px 24px rgba(0,0,0,.05);
}

/* Thumbnail */
.cart-item__thumb{
  width:88px;
  height:88px;
  border-radius:12px;
  background:var(--panel-2);
  border:1px solid var(--line);
  overflow:hidden;
  display:flex;
  align-items:center;
  justify-content:center;
  flex-shrink:0;
  font-size:1.6rem;
  color:var(--rust);
}
.cart-item__thumb img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}

/* Info column */
.cart-item__info{
  min-width:0;
}
.cart-item__name{
  font-family:'Fraunces', serif;
  font-size:1.08rem;
  font-weight:700;
  color:var(--ink);
  margin:0 0 8px;
  line-height:1.3;
  word-break:break-word;
}
.cart-item__meta{
  display:flex;
  flex-wrap:wrap;
  gap:6px;
}
.cart-item__chip{
  display:inline-flex;
  align-items:center;
  font-size:.7rem;
  font-weight:700;
  letter-spacing:.04em;
  padding:4px 10px;
  border-radius:999px;
  background:var(--panel-2);
  border:1px solid var(--line);
  color:var(--ink);
  text-transform:uppercase;
}
.cart-item__chip--muted{
  color:var(--ink-dim);
  background:transparent;
  text-transform:none;
  letter-spacing:0;
  font-weight:600;
}

/* Price (desktop) */
.cart-item__price{
  font-family:'Fraunces', serif;
  font-size:1.25rem;
  font-weight:700;
  color:var(--ink);
  display:flex;
  flex-direction:column;
  align-items:flex-end;
  gap:2px;
  white-space:nowrap;
  flex-shrink:0;
}
.cart-item__price-mobile{ display:none; }

/* Shared price pieces (also used in mobile block) */
.price-was{
  font-family:'Inter', sans-serif;
  font-size:.8rem;
  font-weight:600;
  color:var(--ink-dim);
  text-decoration:line-through;
}
.price-now{ color:var(--ink); }

/* Remove button */
.cart-item__remove-form{ margin:0; }
.cart-item__remove{
  display:inline-flex;
  align-items:center;
  gap:7px;
  background:transparent;
  border:1px solid var(--line);
  color:var(--ink-dim);
  padding:8px 14px;
  border-radius:10px;
  font:inherit;
  font-size:.8rem;
  font-weight:700;
  cursor:pointer;
  transition:all .2s ease;
  white-space:nowrap;
}
.cart-item__remove:hover{
  border-color:#c0392b;
  color:#c0392b;
  background:rgba(192,57,43,.06);
}
.cart-item__remove i{ font-size:.75rem; }

/* ---------- Mobile stacking ---------- */
@media (max-width:640px){
  .cart-item{
    grid-template-columns:72px 1fr;
    grid-template-areas:
      "thumb info"
      "remove remove";
    gap:14px 16px;
    padding:16px;
  }
  .cart-item__thumb{ grid-area:thumb; width:72px; height:72px; font-size:1.3rem; }
  .cart-item__info{ grid-area:info; }
  .cart-item__price{ display:none; }
  .cart-item__price-mobile{
    display:flex;
    align-items:baseline;
    gap:8px;
    margin-top:10px;
    font-family:'Fraunces', serif;
    font-size:1.15rem;
    font-weight:700;
  }
  .cart-item__remove-form{ grid-area:remove; }
  .cart-item__remove{
    width:100%;
    justify-content:center;
    padding:10px;
  }
  .cart-item__name{ font-size:1rem; }
}

/* ============================================================
   EMPTY STATE
   ============================================================ */
.cart-empty{
  background:var(--panel);
  border:1px solid var(--line);
  border-radius:16px;
  padding:60px 30px;
  text-align:center;
}
.cart-empty__icon{
  width:72px;
  height:72px;
  margin:0 auto 20px;
  border-radius:50%;
  background:var(--panel-2);
  border:1px solid var(--line);
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:1.6rem;
  color:var(--rust);
}
.cart-empty h3{
  font-family:'Fraunces', serif;
  font-size:1.3rem;
  font-weight:700;
  color:var(--ink);
  margin:0 0 8px;
}
.cart-empty p{
  color:var(--ink-dim);
  font-size:.92rem;
  line-height:1.6;
  margin:0 0 24px;
  max-width:44ch;
  margin-left:auto;
  margin-right:auto;
}
.cart-empty__actions{
  display:flex;
  gap:12px;
  justify-content:center;
  flex-wrap:wrap;
}

/* ============================================================
   ORDER SUMMARY (sticky, offset below sticky header)
   ============================================================ */
.cart-summary{
  background:var(--panel);
  border:1px solid var(--line);
  border-radius:16px;
  padding:26px 24px;
  position:sticky;
  /* Offset below the sticky header (~80px) + breathing room */
  top:calc(var(--header-height, 80px) + 24px);
  /* Prevent bottom from being cut off on short screens */
  max-height:calc(100vh - var(--header-height, 80px) - 48px);
  overflow-y:auto;
  scrollbar-width:thin;
  scrollbar-color:var(--line) transparent;
}
.cart-summary::-webkit-scrollbar{ width:6px; }
.cart-summary::-webkit-scrollbar-track{ background:transparent; }
.cart-summary::-webkit-scrollbar-thumb{
  background:var(--line);
  border-radius:999px;
}
.cart-summary::-webkit-scrollbar-thumb:hover{ background:var(--ink-dim); }

@media (max-width:900px){
  .cart-summary{
    position:static;
    max-height:none;
    overflow:visible;
  }
}

.cart-summary__title{
  font-family:'Fraunces', serif;
  font-size:1.15rem;
  font-weight:700;
  color:var(--ink);
  margin:0 0 20px;
  padding-bottom:16px;
  border-bottom:1px solid var(--line);
}

.cart-summary__lines{
  display:flex;
  flex-direction:column;
  gap:14px;
  margin-bottom:20px;
}
.summary-line{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:12px;
  font-size:.9rem;
  color:var(--ink-dim);
}
.summary-line__val{
  color:var(--ink);
  font-weight:700;
}
.summary-line__val--muted{
  color:var(--ink-dim);
  font-weight:600;
  font-size:.82rem;
}

.cart-summary__total{
  display:flex;
  justify-content:space-between;
  align-items:baseline;
  padding-top:18px;
  border-top:1px solid var(--line);
  margin-bottom:20px;
  font-size:.95rem;
  font-weight:700;
  color:var(--ink-dim);
}
.cart-summary__total span:last-child{
  font-family:'Fraunces', serif;
  font-size:1.5rem;
  font-weight:700;
  color:var(--ink);
}

.cart-summary__cta{
  display:flex;
  align-items:center;
  justify-content:center;
  width:100%;
  padding:14px 20px;
  box-sizing:border-box;
  font-size:.95rem;
}

.cart-summary__continue{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:7px;
  margin-top:12px;
  font-size:.82rem;
  font-weight:600;
  color:var(--ink-dim);
  text-decoration:none;
  transition:color .2s ease;
}
.cart-summary__continue:hover{ color:var(--rust); }

.cart-summary__hint{
  margin:18px 0 0;
  padding-top:16px;
  border-top:1px solid var(--line);
  font-size:.78rem;
  line-height:1.55;
  color:var(--ink-dim);
  text-align:center;
}
  
  
/* ============================================================
   CHECKOUT LAYOUT
   ============================================================ */
.checkout-layout{
  display:grid;
  grid-template-columns:1.6fr .9fr;
  gap:36px;
  align-items:start;
}
@media (max-width:900px){
  .checkout-layout{ grid-template-columns:1fr; gap:24px; }
}

/* ============================================================
   LEFT — Form card
   ============================================================ */
.checkout-form-card{
  background:var(--panel);
  border:1px solid var(--line);
  border-radius:16px;
  overflow:hidden;
}

.checkout-section{
  padding:26px 28px;
  border-bottom:1px solid var(--line);
}
.checkout-section--last{
  border-bottom:none;
}

.checkout-section__head{
  display:flex;
  gap:14px;
  align-items:flex-start;
  margin-bottom:22px;
}
.checkout-section__num{
  flex-shrink:0;
  width:32px;
  height:32px;
  border-radius:10px;
  background:var(--rust);
  color:#fff;
  font-family:'Fraunces', serif;
  font-size:.85rem;
  font-weight:700;
  display:flex;
  align-items:center;
  justify-content:center;
  box-shadow:0 4px 12px rgba(194,65,12,.22);
}
.checkout-section__title{
  font-family:'Fraunces', serif;
  font-size:1.15rem;
  font-weight:700;
  color:var(--ink);
  margin:0 0 4px;
  line-height:1.25;
}
.checkout-section__desc{
  font-size:.85rem;
  color:var(--ink-dim);
  line-height:1.5;
  margin:0;
}

/* Validation alert */
.checkout-alert{
  display:flex;
  gap:14px;
  align-items:flex-start;
  padding:16px 20px;
  background:rgba(192,57,43,.06);
  border-bottom:1px solid rgba(192,57,43,.2);
  color:#c0392b;
}
.checkout-alert > i{
  font-size:1.1rem;
  margin-top:2px;
  flex-shrink:0;
}
.checkout-alert strong{
  display:block;
  font-size:.88rem;
  margin-bottom:6px;
  color:#c0392b;
}
.checkout-alert ul{
  margin:0;
  padding-left:18px;
  font-size:.82rem;
  line-height:1.6;
}

/* ============================================================
   PAYMENT METHOD CARDS
   ============================================================ */
.pay-methods{
  display:grid;
  gap:10px;
}
.pay-method{
  position:relative;
  cursor:pointer;
  display:block;
}
.pay-method input[type="radio"]{
  position:absolute;
  opacity:0;
  pointer-events:none;
}
.pay-method__body{
  display:flex;
  align-items:center;
  gap:16px;
  padding:16px 18px;
  border:1px solid var(--line);
  border-radius:14px;
  background:var(--panel-2);
  transition:all .2s ease;
}
.pay-method:hover .pay-method__body{
  border-color:rgba(194,65,12,.35);
}
.pay-method input:checked + .pay-method__body{
  border-color:var(--rust);
  background:rgba(194,65,12,.05);
  box-shadow:0 0 0 3px rgba(194,65,12,.1);
}
.pay-method input:focus-visible + .pay-method__body{
  outline:2px solid var(--rust);
  outline-offset:2px;
}

.pay-method__icon{
  width:44px;
  height:44px;
  border-radius:12px;
  background:#fff;
  border:1px solid var(--line);
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:1.1rem;
  color:var(--rust);
  flex-shrink:0;
}
.pay-method input:checked + .pay-method__body .pay-method__icon{
  background:var(--rust);
  color:#fff;
  border-color:transparent;
}

.pay-method__text{
  display:flex;
  flex-direction:column;
  gap:3px;
  min-width:0;
  flex:1;
}
.pay-method__name{
  font-size:.95rem;
  font-weight:700;
  color:var(--ink);
  line-height:1.2;
}
.pay-method__sub{
  font-size:.78rem;
  color:var(--ink-dim);
  line-height:1.4;
}

.pay-method__check{
  flex-shrink:0;
  font-size:1.15rem;
  color:var(--line);
  transition:color .2s ease, transform .2s ease;
}
.pay-method input:checked + .pay-method__body .pay-method__check{
  color:var(--rust);
  transform:scale(1.05);
}

/* ============================================================
   TERMS CHECKBOX
   ============================================================ */
.terms-check{
  display:flex;
  gap:12px;
  align-items:flex-start;
  padding:16px 18px;
  border:1px solid var(--line);
  border-radius:12px;
  background:var(--panel-2);
  cursor:pointer;
  margin-bottom:20px;
  transition:border-color .2s ease;
}
.terms-check:hover{ border-color:rgba(194,65,12,.3); }
.terms-check input[type="checkbox"]{
  position:absolute;
  opacity:0;
  pointer-events:none;
}
.terms-check__box{
  flex-shrink:0;
  width:20px;
  height:20px;
  border-radius:6px;
  border:2px solid var(--line);
  background:#fff;
  display:flex;
  align-items:center;
  justify-content:center;
  margin-top:1px;
  transition:all .2s ease;
  position:relative;
}
.terms-check__box::after{
  content:"";
  width:10px;
  height:6px;
  border-left:2px solid #fff;
  border-bottom:2px solid #fff;
  transform:rotate(-45deg) scale(0);
  transform-origin:center;
  transition:transform .2s ease;
  margin-top:-2px;
}
.terms-check input:checked + .terms-check__box{
  background:var(--rust);
  border-color:transparent;
}
.terms-check input:checked + .terms-check__box::after{
  transform:rotate(-45deg) scale(1);
}
.terms-check input:focus-visible + .terms-check__box{
  outline:2px solid var(--rust);
  outline-offset:2px;
}
.terms-check__text{
  font-size:.85rem;
  color:var(--ink-dim);
  line-height:1.55;
}
.terms-check__text a{
  color:var(--rust);
  font-weight:600;
  text-decoration:underline;
}

/* ============================================================
   SUBMIT + SECURE NOTE
   ============================================================ */
.checkout-submit{
  width:100%;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:16px 24px;
  font-size:.98rem;
  box-sizing:border-box;
}
.checkout-secure-note{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  margin:14px 0 0;
  font-size:.78rem;
  color:var(--ink-dim);
  text-align:center;
}
.checkout-secure-note i{
  color:var(--rust);
}

/* ============================================================
   RIGHT — Order summary
   ============================================================ */
.checkout-summary{
  background:var(--panel);
  border:1px solid var(--line);
  border-radius:16px;
  padding:24px;
  position:sticky;
  /* Offset below the sticky header (~80px) + breathing room */
  top:calc(var(--header-height, 80px) + 24px);
  /* Prevent the bottom from being cut off on short screens */
  max-height:calc(100vh - var(--header-height, 80px) - 48px);
  overflow-y:auto;
  scrollbar-width:thin;
  scrollbar-color:var(--line) transparent;
}
.checkout-summary::-webkit-scrollbar{ width:6px; }
.checkout-summary::-webkit-scrollbar-track{ background:transparent; }
.checkout-summary::-webkit-scrollbar-thumb{
  background:var(--line);
  border-radius:999px;
}
.checkout-summary::-webkit-scrollbar-thumb:hover{ background:var(--ink-dim); }

@media (max-width:900px){
  .checkout-summary{
    position:static;
    max-height:none;
    overflow:visible;
  }
}

.checkout-summary__title{
  font-family:'Fraunces', serif;
  font-size:1.1rem;
  font-weight:700;
  color:var(--ink);
  margin:0 0 18px;
  padding-bottom:16px;
  border-bottom:1px solid var(--line);
}

/* Line items */
.checkout-summary__items{
  display:flex;
  flex-direction:column;
  gap:14px;
  margin-bottom:20px;
}
.checkout-item{
  display:grid;
  grid-template-columns:52px 1fr auto;
  gap:12px;
  align-items:center;
}
.checkout-item__thumb{
  width:52px;
  height:52px;
  border-radius:11px;
  background:var(--panel-2);
  border:1px solid var(--line);
  overflow:hidden;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:1rem;
  color:var(--rust);
  flex-shrink:0;
}
.checkout-item__thumb img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}
.checkout-item__info{
  display:flex;
  flex-direction:column;
  gap:3px;
  min-width:0;
}
.checkout-item__name{
  font-size:.88rem;
  font-weight:700;
  color:var(--ink);
  line-height:1.3;
  word-break:break-word;
}
.checkout-item__meta{
  font-size:.72rem;
  color:var(--ink-dim);
  line-height:1.3;
}
.checkout-item__price{
  font-family:'Fraunces', serif;
  font-size:.95rem;
  font-weight:700;
  color:var(--ink);
  white-space:nowrap;
  flex-shrink:0;
}

/* Coupon block */
.checkout-summary__coupon{
  padding:16px 0;
  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);
  margin-bottom:16px;
}

.coupon-row{
  display:flex;
  gap:8px;
}
.coupon-row__input{
  flex:1;
  display:flex;
  align-items:center;
  gap:8px;
  padding:0 14px;
  background:var(--panel-2);
  border:1px solid var(--line);
  border-radius:10px;
  transition:border-color .2s ease, box-shadow .2s ease;
}
.coupon-row__input:focus-within{
  border-color:var(--rust);
  box-shadow:0 0 0 3px rgba(194,65,12,.1);
}

input:focus {
  box-shadow: none;
}
.coupon-row__input i{
  color:var(--ink-dim);
  font-size:.8rem;
}
.coupon-row__input input{
  flex:1;
  background:transparent;
  border:none;
  outline:none;
  padding:11px 0;
  font-size:.85rem;
  color:var(--ink);
  font-family:inherit;
  min-width:0;
}
.coupon-row .mini-solid{
  padding:0 18px;
  white-space:nowrap;
  cursor:pointer;
}

.coupon-applied{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:10px;
  padding:12px 14px;
  background:rgba(22,163,74,.06);
  border:1px solid rgba(22,163,74,.2);
  border-radius:10px;
}
.coupon-applied__info{
  display:flex;
  align-items:center;
  gap:8px;
  font-size:.82rem;
  color:#16a34a;
}
.coupon-applied__info b{
  font-weight:800;
  letter-spacing:.02em;
}
.coupon-applied__remove{
  background:transparent;
  border:none;
  color:#16a34a;
  font-family:inherit;
  font-size:.75rem;
  font-weight:700;
  cursor:pointer;
  padding:4px 8px;
  border-radius:6px;
  transition:background .2s ease;
}
.coupon-applied__remove:hover{
  background:rgba(22,163,74,.1);
}

/* Totals */
.checkout-summary__totals{
  display:flex;
  flex-direction:column;
  gap:12px;
  margin-bottom:16px;
}
.summary-line{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:12px;
  font-size:.88rem;
  color:var(--ink-dim);
}
.summary-line__val{
  color:var(--ink);
  font-weight:700;
}
.summary-line__val--muted{
  color:var(--ink-dim);
  font-weight:600;
  font-size:.78rem;
}
.summary-line--discount .summary-line__val{
  color:#16a34a;
}

.checkout-summary__total{
  display:flex;
  justify-content:space-between;
  align-items:baseline;
  padding-top:16px;
  border-top:1px solid var(--line);
  margin-bottom:18px;
  font-size:.95rem;
  font-weight:700;
  color:var(--ink-dim);
}
.checkout-summary__total span:last-child{
  font-family:'Fraunces', serif;
  font-size:1.45rem;
  font-weight:700;
  color:var(--ink);
}

.checkout-summary__note{
  font-size:.76rem;
  line-height:1.55;
  color:var(--ink-dim);
  margin:0;
  padding-top:14px;
  border-top:1px solid var(--line);
}

/* ============================================================
   MOBILE
   ============================================================ */
@media (max-width:640px){
  .checkout-section{ padding:22px 20px; }
  .checkout-section__title{ font-size:1.05rem; }
  .checkout-section__num{ width:28px; height:28px; font-size:.78rem; }

  .pay-method__body{ padding:14px 16px; gap:12px; }
  .pay-method__icon{ width:38px; height:38px; font-size:.95rem; }
  .pay-method__name{ font-size:.88rem; }
  .pay-method__sub{ font-size:.72rem; }

  .terms-check{ padding:14px 16px; }
  .terms-check__text{ font-size:.8rem; }

  .checkout-submit{ padding:15px 20px; font-size:.92rem; }

  .checkout-summary{ padding:20px; }
  .checkout-item{ grid-template-columns:44px 1fr auto; gap:10px; }
  .checkout-item__thumb{ width:44px; height:44px; border-radius:9px; font-size:.9rem; }
  .checkout-item__name{ font-size:.82rem; }
  .checkout-item__meta{ font-size:.68rem; }
  .checkout-item__price{ font-size:.88rem; }

  .coupon-row{ flex-direction:column; }
  .coupon-row .mini-solid{ padding:11px 18px; }
}
  


/* auth pages */
.auth-wrap{min-height:calc(100vh - 200px); display:flex; align-items:center; justify-content:center; padding:60px 26px;}
.auth-card{background:var(--panel); border:1px solid var(--line); border-radius:18px; padding:40px; max-width:420px; width:100%; box-shadow:var(--shadow-lg);}
.auth-card h1{font-size:1.6rem; margin-bottom:8px;}
.auth-card p.sub{color:var(--ink-dim); font-size:.87rem; margin-bottom:26px;}
.auth-foot{text-align:center; font-size:.85rem; color:var(--ink-dim); margin-top:20px;}
.auth-foot a{color:var(--rust); font-weight:600;}

/* dashboard */
.dash-layout{display:grid; grid-template-columns:220px 1fr; gap:34px; align-items:start;}
.dash-nav{background:var(--panel); border:1px solid var(--line); border-radius:14px; padding:14px; position:sticky; top:100px;}
.dash-nav a{display:block; padding:10px 14px; border-radius:8px; font-size:.87rem; color:var(--ink-dim); font-weight:500; margin-bottom:2px;}
.dash-nav a:hover{background:var(--panel-2); color:var(--ink);}
.dash-nav a.active{background:var(--rust); color:#fff;}
.dash-stats{display:grid; grid-template-columns:repeat(3,1fr); gap:16px; margin-bottom:30px;}
.dash-tile{background:var(--panel); border:1px solid var(--line); border-radius:12px; padding:20px;}
.dash-tile .num{font-family:'Fraunces'; font-weight:700; font-size:1.8rem; color:var(--rust);}
.dash-tile .lbl{font-size:.8rem; color:var(--ink-dim); margin-top:4px;}
.license-key{font-family:'JetBrains Mono'; font-size:.8rem; background:var(--panel-2); padding:4px 10px; border-radius:6px; letter-spacing:.02em;}
.copy-btn{font-size:.7rem; border:1px solid var(--line); padding:3px 9px; border-radius:6px; margin-left:8px; cursor:pointer;}

@media(max-width:920px){
  .detail-grid{grid-template-columns:1fr;}
  .detail-side{position:static;}
  .dash-layout{grid-template-columns:1fr;}
  .dash-nav{position:static; display:flex; overflow-x:auto; gap:4px;}
  .dash-nav a{white-space:nowrap;}
  .dash-stats{grid-template-columns:1fr 1fr;}
  .form-row{grid-template-columns:1fr;}
  .navlinks{display:none;}
}

/* addon shelf + service catalog cards */
.catalog-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:20px;}
.addon-card, .service-card{background:var(--panel); border:1px solid var(--line); border-radius:14px; overflow:hidden; transition:transform .25s ease, box-shadow .3s ease, border-color .25s ease;}
.addon-card:hover, .service-card:hover{border-color:var(--rust); transform:translateY(-6px); box-shadow:var(--shadow);}
.addon-thumb{height:180px; overflow:hidden;}
.addon-thumb img{width:100%; height:100%; object-fit:cover; display:block;}
.addon-thumb-placeholder{width:100%; height:100%; background:var(--panel-2); display:flex; align-items:center; justify-content:center; font-size:2rem; color:var(--ink-dim);}
.addon-body, .service-card{padding:22px;}
.addon-meta-row{display:flex; align-items:center; gap:8px; flex-wrap:wrap; margin-bottom:12px;}
.service-thumb{height:180px; overflow:hidden; margin:-22px -22px 0; width:calc(100% + 44px);}
.service-thumb img{width:100%; height:100%; object-fit:cover; display:block;}
.service-thumb-placeholder{width:100%; height:100%; background:var(--panel-2); display:flex; align-items:center; justify-content:center; font-size:2rem; color:var(--ink-dim);}
.service-meta-row{display:flex; align-items:center; gap:8px; flex-wrap:wrap; margin:16px 0 12px;}
.addon-card .cat-tag, .service-card .cat-tag{display:inline-block; font-size:.68rem; letter-spacing:.06em; text-transform:uppercase; color:var(--rust-2); border:1px solid var(--line); padding:3px 9px; border-radius:4px; margin-bottom:0;}
.addon-card .aico-lg{width:44px; height:44px; border-radius:10px; background:var(--cream); display:flex; align-items:center; justify-content:center; font-size:1.2rem; margin-bottom:14px;}
.addon-card h3, .service-card h3{font-family:'Fraunces'; font-size:1.1rem; margin-bottom:8px;}
.addon-card p, .service-card p{color:var(--ink-dim); font-size:.85rem; margin-bottom:18px; min-height:2.6em;}
.catalog-foot{display:flex; justify-content:space-between; align-items:center; padding-top:14px; border-top:1px dashed var(--line);}
.catalog-foot .price{font-family:'Fraunces'; font-weight:700; color:var(--rust); font-size:1.05rem;}
.catalog-foot .price small{font-size:.7rem; color:var(--ink-dim); font-weight:400;}
.mini{font-size:.76rem; border:1px solid var(--ink); padding:7px 14px; border-radius:8px; transition:.2s;}
.mini:hover{background:var(--ink); color:var(--bg);}
.mini-solid{font-size:.76rem; background:var(--rust); color:#fff; padding:7px 14px; border-radius:8px; border:1px solid var(--rust); transition:.2s;}
.mini-solid:hover{filter:brightness(1.1);}
.empty-state{text-align:center; padding:60px 20px; color:var(--ink-dim);}
.empty-state h3{font-family:'Fraunces'; color:var(--ink); margin-bottom:8px; font-size:1.2rem;}

@media(max-width:920px){ .catalog-grid{grid-template-columns:1fr;} }

  /* ============================================================
     Existing thumbnail rules
     ============================================================ */
  @media (max-width: 768px) {
    .service-thumb {
      height: auto !important;
    }
    .service-thumb img {
      height: auto !important;
      object-fit: contain !important;
    }
    .service-thumb-placeholder {
      height: 250px !important;
    }
  }

  .service-thumb img {
    pointer-events: none;
    user-select: none;
  }
  .service-thumb:hover img {
    transform: none !important;
    transition: none !important;
  }
  

/* ============ ADMIN PANEL ============ */
.admin-shell{display:grid; grid-template-columns:250px 1fr; min-height:100vh;}
.admin-sidebar{background:var(--sidebar-bg); color:var(--sidebar-ink); padding:26px 18px; position:sticky; top:0; height:100vh; overflow-y:auto;}
.admin-logo{font-family:'Fraunces'; font-weight:700; font-size:1.15rem; display:flex; align-items:center; gap:9px; padding:0 10px 26px; border-bottom:1px solid rgba(255,255,255,.12); margin-bottom:20px;}
.admin-logo .mark{width:20px; height:20px; border-radius:6px; background:var(--rust);}
.admin-logo .tag{font-family:'JetBrains Mono'; font-size:.62rem; color:var(--gold); display:block; margin-top:2px; letter-spacing:.08em;}
.admin-nav-group{margin-bottom:22px;}
.admin-nav-group .grp-label{font-family:'JetBrains Mono'; font-size:.65rem; letter-spacing:.1em; text-transform:uppercase; color:rgba(255,255,255,.4); padding:0 10px; margin-bottom:8px; display:block;}
.admin-nav-group a{display:flex; align-items:center; justify-content:space-between; padding:10px 12px; border-radius:8px; color:rgba(255,255,255,.75); font-size:.87rem; font-weight:500; margin-bottom:2px; transition:.15s;}
.admin-nav-group a:hover{background:rgba(255,255,255,.06); color:#fff;}
.admin-nav-group a.active{background:var(--rust); color:#fff;}
.admin-nav-group a .count{font-family:'JetBrains Mono'; font-size:.68rem; background:rgba(255,255,255,.12); padding:1px 7px; border-radius:10px;}
.admin-nav-group a.active .count{background:rgba(255,255,255,.25);}

.admin-main{background:var(--bg);}
.admin-topbar{position:sticky; top:0; z-index:20; background:color-mix(in srgb, var(--bg) 92%, transparent); backdrop-filter:blur(8px); border-bottom:1px solid var(--line); padding:16px 30px; display:flex; justify-content:space-between; align-items:center;}
.admin-topbar h1{font-family:'Fraunces'; font-size:1.3rem;}
.admin-topbar .crumb{font-family:'JetBrains Mono'; font-size:.72rem; color:var(--ink-dim);}
.admin-content{padding:30px;}

.admin-toolbar{display:flex; justify-content:space-between; align-items:center; margin-bottom:22px; gap:16px; flex-wrap:wrap;}
.admin-toolbar .search{max-width:280px;}
.stat-row{display:grid; grid-template-columns:repeat(4,1fr); gap:16px; margin-bottom:30px;}
.admin-card{background:var(--panel); border:1px solid var(--line); border-radius:14px; padding:24px;}
.admin-card h3{font-family:'Fraunces'; font-size:1.1rem; margin-bottom:16px;}

.row-actions{display:flex; gap:8px;}
.row-actions a, .row-actions button{font-size:.74rem; border:1px solid var(--line); padding:5px 11px; border-radius:6px; background:none; cursor:pointer; color:var(--ink);}
.row-actions a:hover, .row-actions button:hover{border-color:var(--rust); color:var(--rust);}
.row-actions .danger:hover{border-color:#c0392b; color:#c0392b;}

@media(max-width:960px){
  .admin-shell{grid-template-columns:1fr;}
  .admin-sidebar{position:static; height:auto;}
  .stat-row{grid-template-columns:1fr 1fr;}
}

/* ============ MERCHANDISING: badges, sale price ============ */
.badge-ribbon{display:inline-flex; gap:6px; margin-bottom:10px; flex-wrap:wrap;}
.ribbon{font-size:.65rem; font-weight:700; letter-spacing:.04em; text-transform:uppercase; padding:3px 9px; border-radius:20px;}
.ribbon-featured{background:color-mix(in srgb, var(--gold) 22%, transparent); color:var(--rust-2);}
.ribbon-sale{background:#c0392b; color:#fff;}
.ribbon-new{background:color-mix(in srgb, var(--rust) 16%, transparent); color:var(--rust);}

.price-was{text-decoration:line-through; color:var(--ink-dim); font-size:.82rem; font-weight:400; margin-right:6px;}
.price-now{color:#c0392b;}

.rating-stars{color:var(--gold); font-size:.82rem; letter-spacing:1px;}
.rating-count{font-size:.76rem; color:var(--ink-dim); margin-left:6px;}

/* ============ NAV SEARCH ============ */
.nav-search{display:flex;}
.nav-search input{
  width:190px; padding:8px 14px; border-radius:20px; border:1px solid var(--line); background:var(--panel-2);
  color:var(--ink); font-size:.82rem; font-family:'Inter',sans-serif; outline:none; transition:.2s;
}
.nav-search input:focus{border-color:var(--rust); width:220px;}

/* ============ NEWSLETTER STRIP ============ */
.newsletter-strip{background:var(--panel-2); border-top:1px solid var(--line); border-bottom:1px solid var(--line);}
.newsletter-in{max-width:1200px; margin:0 auto; padding:36px 26px; display:flex; justify-content:space-between; align-items:center; gap:24px; flex-wrap:wrap;}
.newsletter-in h4{font-family:'Fraunces'; font-size:1.15rem; margin-bottom:4px;}
.newsletter-in p{font-size:.85rem; color:var(--ink-dim);}
.newsletter-form{display:flex; gap:10px;}
.newsletter-form input{padding:11px 16px; border-radius:8px; border:1.5px solid var(--line); background:var(--bg); color:var(--ink); font-size:.87rem; min-width:220px;}

/* ============ COUPON UI (checkout) ============ */
.coupon-row{display:flex; gap:8px; margin:16px 0;}
.coupon-row input{flex:1;}
.coupon-applied{display:flex; justify-content:space-between; align-items:center; background:color-mix(in srgb, var(--rust) 8%, var(--panel)); border:1px solid var(--rust); border-radius:8px; padding:10px 14px; font-size:.83rem; margin:16px 0;}
.coupon-applied button{font-size:.72rem; border:none; background:none; color:var(--ink-dim); text-decoration:underline; cursor:pointer;}
.summary-line.discount{color:#c0392b;}

@media(max-width:920px){
  .nav-search{display:none;}
  .newsletter-in{flex-direction:column; align-items:flex-start;}
}

/* ============ SALE COUNTDOWN ============ */
.countdown-chip{
  display:inline-flex; align-items:center; gap:6px; font-family:'JetBrains Mono',monospace; font-size:.72rem; font-weight:600;
  color:#c0392b; background:color-mix(in srgb, #c0392b 10%, transparent); padding:4px 10px; border-radius:20px; margin-bottom:14px;
}
.countdown-chip::before{content:"\f254"; font-family:"Font Awesome 6 Free"; font-weight:900;}

/* ============ TOAST NOTIFICATIONS ============ */
.toast-stack{position:fixed; bottom:158px; right:24px; z-index:200; display:flex; flex-direction:column; gap:10px; max-width:360px;}
.toast{
  background:var(--panel); border:1px solid var(--line); border-left:4px solid var(--rust); border-radius:10px;
  padding:14px 18px; box-shadow:var(--shadow-lg); font-size:.87rem; display:flex; align-items:flex-start; gap:10px;
  opacity:0; transform:translateX(30px); transition:opacity .3s ease, transform .3s ease;
}
.toast.show{opacity:1; transform:none;}
.toast.toast-success{border-left-color:var(--rust);}
.toast.toast-error{border-left-color:#c0392b;}
.toast .toast-icon{flex-shrink:0; font-size:1.1rem; margin-top:1px;}
.toast .toast-body{flex:1; color:var(--ink);}
.toast .toast-close{cursor:pointer; color:var(--ink-dim); font-size:1rem; line-height:1; flex-shrink:0;}
@media(max-width:640px){ .toast-stack{left:16px; right:16px; bottom:16px; max-width:none;} }

/* ============ SCROLL TO TOP ============ */
.scroll-top-btn{
  position:fixed; bottom:24px; right:24px; z-index:150; width:44px; height:44px; border-radius:50%;
  background:var(--ink); color:var(--bg); border:none; display:flex; align-items:center; justify-content:center;
  cursor:pointer; box-shadow:var(--shadow-lg); opacity:0; visibility:hidden; transform:translateY(10px);
  transition:opacity .25s ease, transform .25s ease, visibility .25s;
}
.scroll-top-btn.show{opacity:1; visibility:visible; transform:none;}
.scroll-top-btn:hover{background:var(--rust);}

/* ============ GENERIC MODAL ============ */
.modal-overlay{position:fixed; inset:0; background:rgba(20,17,12,.55); backdrop-filter:blur(3px); z-index:300; display:none; align-items:center; justify-content:center; padding:20px;}
.modal-overlay.open{display:flex;}
.modal-box{background:var(--panel); border-radius:16px; padding:30px; max-width:420px; width:100%; box-shadow:var(--shadow-lg); transform:scale(.94); opacity:0; transition:transform .2s ease, opacity .2s ease;}
.modal-overlay.open .modal-box{transform:scale(1); opacity:1;}
.modal-box h3{font-family:'Fraunces'; font-size:1.2rem; margin-bottom:10px;}
.modal-box p{color:var(--ink-dim); font-size:.88rem; margin-bottom:24px;}
.modal-actions{display:flex; gap:10px; justify-content:flex-end;}

/* ============ TOP ANNOUNCEMENT BAR ============ */
.announce-bar{background:var(--ink); color:var(--bg); text-align:center; padding:9px 40px 9px 16px; font-size:.82rem; font-weight:500; position:sticky; top:0; z-index:51;}
.announce-bar a{text-decoration:underline; text-underline-offset:2px;}
.announce-bar .announce-close{position:absolute; right:14px; top:50%; transform:translateY(-50%); background:none; border:none; color:var(--bg); opacity:.7; cursor:pointer; font-size:1rem; padding:4px;}
.announce-bar .announce-close:hover{opacity:1;}

/* ============ HEADER: cart icon, mobile layout ============ */
.icon-btn{position:relative; width:40px; height:40px; border-radius:50%; display:flex; align-items:center; justify-content:center; border:1px solid var(--line); background:var(--panel); color:var(--ink); cursor:pointer; transition:.2s; flex-shrink:0;}
.icon-btn:hover{border-color:var(--rust); color:var(--rust);}
.icon-btn .cart-count{position:absolute; top:-5px; right:-5px; background:var(--rust); color:#fff; font-size:.62rem; font-weight:700; min-width:17px; height:17px; border-radius:50%; display:flex; align-items:center; justify-content:center; padding:0 3px;}
.hamburger-btn{display:none; width:40px; height:40px; border-radius:10px; border:1px solid var(--line); background:var(--panel); align-items:center; justify-content:center; cursor:pointer; flex-direction:column; gap:4px;}
.hamburger-btn span{display:block; width:18px; height:2px; background:var(--ink); border-radius:2px; transition:.25s;}
.mobile-logo{display:none; font-family:'Fraunces'; font-weight:700; font-size:1.1rem; position:absolute; left:50%; transform:translateX(-50%);}

/* ============ OFFCANVAS SIDE MENU (mobile) ============ */
.offcanvas-overlay{position:fixed; inset:0; background:rgba(20,17,12,.5); z-index:250; opacity:0; visibility:hidden; transition:opacity .3s ease, visibility .3s;}
.offcanvas-overlay.open{opacity:1; visibility:visible;}
.offcanvas{
  position:fixed; top:0; left:0; height:100%; width:86%; max-width:340px; background:var(--bg); z-index:251;
  transform:translateX(-100%); transition:transform .32s cubic-bezier(.2,.8,.3,1); overflow-y:auto; box-shadow:var(--shadow-lg);
}
.offcanvas.open{transform:translateX(0);}
.offcanvas-head{display:flex; justify-content:space-between; align-items:center; padding:20px; border-bottom:1px solid var(--line);}
.offcanvas-close{width:36px; height:36px; color:var(--ink); border-radius:50%; border:1px solid var(--line); background:var(--panel); font-size:1rem; cursor:pointer;}
.offcanvas-search{padding:16px 20px; border-bottom:1px solid var(--line);}
.offcanvas-search input{width:100%; padding:11px 16px; border-radius:10px; border:1.5px solid var(--line); background:var(--panel-2); color:var(--ink);}
.offcanvas-links{padding:12px 8px;}
.offcanvas-links a{display:block; padding:14px 16px; border-radius:10px; font-weight:600; color:var(--ink); font-size:.98rem;}
.offcanvas-links a:hover, .offcanvas-links a.active{background:var(--panel-2); color:var(--rust);}
.offcanvas-foot{padding:20px; border-top:1px solid var(--line); display:flex; flex-direction:column; gap:10px; margin-top:10px;}



/* ============ SIDE CART DRAWER ============ */
.cart-drawer{
  position:fixed; top:0; right:0; height:100%; width:92%; max-width:400px; background:var(--bg); z-index:251;
  transform:translateX(100%); transition:transform .32s cubic-bezier(.2,.8,.3,1); display:flex; flex-direction:column; box-shadow:var(--shadow-lg);
}
.cart-drawer.open{transform:translateX(0);}
.cart-drawer-head{display:flex; justify-content:space-between; align-items:center; padding:20px; border-bottom:1px solid var(--line);}
.cart-drawer-head h3{font-family:'Fraunces'; font-size:1.15rem;}
.cart-drawer-body{flex:1; overflow-y:auto; padding:16px 20px;}
.cart-drawer-foot{padding:20px; border-top:1px solid var(--line);}
.drawer-item{display:flex; gap:12px; align-items:center; padding:14px 0; border-bottom:1px solid var(--line);}
.drawer-item .thumb{width:44px; height:44px; border-radius:8px; background:var(--cream); display:flex; align-items:center; justify-content:center; flex-shrink:0; overflow:hidden;}
.drawer-item .thumb img{width:100%; height:100%; object-fit:cover; display:block; border-radius:inherit;}
.drawer-item .info{flex:1;}
.drawer-item .info h5{font-size:.87rem; font-weight:700;}
.drawer-item .info span{font-size:.76rem; color:var(--ink-dim);}
.drawer-item .price{font-family:'JetBrains Mono'; font-size:.82rem; font-weight:700; color:var(--rust);}

/* ============ MODERN FOOTER (4 columns + copyright bar) ============ */
footer{border-top:1px solid var(--line); background:var(--panel-2); color:var(--ink-dim);}
.footer-main{max-width:1200px; margin:0 auto; padding:64px 26px 40px; display:grid; grid-template-columns:1.3fr 1fr 1fr 1.2fr; gap:40px; text-align:left;}
.footer-col{text-align:left;}
.footer-col h4{font-family:'Fraunces'; color:var(--ink); font-size:1.02rem; margin-bottom:14px; position:relative; padding-bottom:12px;}
.footer-col h4::after{content:""; position:absolute; left:0; bottom:0; width:34px; height:2px; background:var(--rust); border-radius:2px;}
.footer-col ul{list-style:none; text-align:left;}
.footer-col li{margin-bottom:9px;}
.footer-col a{font-size:.86rem; color:var(--ink-dim); display:inline-flex; align-items:center; gap:8px; transition:.18s; text-align:left;}
.footer-col a i{font-size:.68rem; color:var(--rust); transition:transform .18s;}
.footer-col a:hover{color:var(--rust); transform:translateX(3px);}
.footer-col a:hover i{transform:translateX(2px);}
.footer-brand{display:flex; align-items:center; gap:9px; font-family:'Fraunces'; font-weight:700; font-size:1.2rem; color:var(--ink); margin-bottom:14px;}
.footer-brand .mark{width:22px; height:22px; border-radius:6px; background:var(--rust);}
.footer-desc{font-size:.86rem; line-height:1.6; margin-bottom:20px; max-width:32ch; text-align:left;}
.footer-social{display:flex; gap:10px;}
.footer-social a{width:36px; height:36px; border-radius:50%; border:1px solid var(--line); display:flex; align-items:center; justify-content:center; font-size:.9rem; color:var(--ink-dim); transition:.2s;}
.footer-social a:hover{border-color:var(--rust); color:var(--rust); transform:translateY(-2px);} 
.footer-newsletter-form{display:flex; flex-direction:column; gap:10px; margin-top:6px;}
.footer-newsletter-form input{padding:11px 16px; border-radius:8px; border:1.5px solid var(--line); background:var(--bg); color:var(--ink); font-size:.86rem;}
.footer-bottom{border-top:1px solid var(--line);}
.footer-bottom-in{max-width:1200px; margin:0 auto; padding:20px 26px; display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:12px; font-size:.8rem;}
.footer-made-with{display:flex; align-items:center; gap:6px; font-weight:600; color:var(--ink);}
.footer-made-with i{color:var(--rust); font-size:.78rem;}

@media(max-width:920px){
  .footer-main{grid-template-columns:1fr 1fr; gap:32px 24px;}
}
@media(max-width:640px){
  .footer-main{grid-template-columns:1fr; gap:34px; padding:48px 20px 32px; text-align:left;}
  .footer-desc{max-width:none;}
  .footer-bottom-in{flex-direction:column; align-items:center; text-align:center; gap:8px;}
  .hamburger-btn{display:flex;}
  .mobile-logo{display:block;}
  .navlinks, .nav-search{display:none !important;}
  .nav{position:relative; justify-content:space-between;}
  .nav-right{gap:10px;}
  .nav-right .btn{display:none;}
  .nav-right .toggle{display:none;}
}

/* ============ LEGAL / LONG-FORM CONTENT PAGES ============ */
.legal-body{max-width:820px;}
.legal-body h2{font-family:'Fraunces'; font-size:1.3rem; margin:32px 0 14px;}
.legal-body h2:first-child{margin-top:0;}
.legal-body p{color:var(--ink-dim); line-height:1.75; margin-bottom:14px;}
.legal-body ul{padding-left:22px; color:var(--ink-dim); margin-bottom:14px;}
.legal-body li{margin-bottom:8px; line-height:1.6;}
.legal-updated{font-size:.82rem; color:var(--ink-dim); font-family:'JetBrains Mono',monospace; margin-bottom:36px; display:block;}

/* ============ ABOUT PAGE ============ */
.about-hero{text-align:center; max-width:760px; margin:0 auto 60px;}
.value-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:22px;}
.value-card{background:var(--panel); border:1px solid var(--line); border-radius:14px; padding:28px; transition:.25s;}
.value-card:hover{transform:translateY(-5px); box-shadow:var(--shadow);}
.value-card .vico{font-size:1.6rem; margin-bottom:14px;}
.value-card h3{font-family:'Fraunces'; font-size:1.1rem; margin-bottom:8px;}
.value-card p{color:var(--ink-dim); font-size:.87rem;}

.expertise-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:16px;}
.expertise-chip{background:var(--panel); border:1px solid var(--line); border-radius:12px; padding:20px; text-align:center; transition:.2s;}
.expertise-chip:hover{border-color:var(--rust); transform:translateY(-3px);}
.expertise-chip .eico{font-size:1.5rem; margin-bottom:10px;  background: var(--rust); border-radius: 12px;}
.expertise-chip h4{font-size:.9rem; font-weight:700;}

@media(max-width:920px){ .value-grid{grid-template-columns:1fr;} .expertise-grid{grid-template-columns:1fr 1fr;} }

/* ============ FAQ ACCORDION ============ */
.faq-list{max-width:760px;}
.faq-item{border-bottom:1px solid var(--line);}
.faq-q{display:flex; justify-content:space-between; align-items:center; padding:20px 4px; cursor:pointer; font-weight:600; font-size:.95rem; gap:16px;}
.faq-q .faq-plus{font-size:1.3rem; color:var(--rust); transition:transform .25s ease; flex-shrink:0;}
.faq-item.open .faq-plus{transform:rotate(45deg);}
.faq-a{max-height:0; overflow:hidden; transition:max-height .3s ease;}
.faq-a-in{padding:0 4px 20px; color:var(--ink-dim); font-size:.88rem; line-height:1.7;}
.faq-cat-tabs{display:flex; gap:8px; margin-bottom:30px; flex-wrap:wrap;}

/* ============ ADMIN NOTIFICATION BELL ============ */
.notif-bell{position:relative;}
.notif-bell-btn{width:38px; height:38px; border-radius:50%; border:1px solid var(--line); background:var(--panel); display:flex; align-items:center; justify-content:center; cursor:pointer; position:relative;}
.notif-bell-btn .dot{position:absolute; top:6px; right:7px; width:8px; height:8px; border-radius:50%; background:#c0392b;}
.notif-dropdown{position:absolute; top:48px; right:0; width:340px; max-height:420px; overflow-y:auto; background:var(--panel); border:1px solid var(--line); border-radius:14px; box-shadow:var(--shadow-lg); z-index:60; display:none;}
.notif-dropdown.open{display:block;}
.notif-dropdown-head{display:flex; justify-content:space-between; align-items:center; padding:14px 16px; border-bottom:1px solid var(--line); font-weight:700; font-size:.85rem;}
.notif-item{display:block; padding:12px 16px; border-bottom:1px solid var(--line); font-size:.82rem;}
.notif-item:hover{background:var(--panel-2);}
.notif-item.unread{background:color-mix(in srgb, var(--rust) 5%, transparent);}
.notif-item .n-title{font-weight:700; color:var(--ink); margin-bottom:3px;}
.notif-item .n-body{color:var(--ink-dim); font-size:.78rem;}
.notif-item .n-time{color:var(--ink-dim); font-size:.7rem; margin-top:4px; display:block;}

/* ============ LIVE CHAT WIDGET (frontend) ============ */
.chat-fab{
  position:fixed; bottom:90px; right:24px; width:56px; height:56px; border-radius:50%; background:var(--rust); color:#fff;
  border:none; font-size:1.4rem; cursor:pointer; box-shadow:var(--shadow-lg); z-index:180; display:flex; align-items:center; justify-content:center;
  transition:transform .2s ease;
}
.chat-fab:hover{transform:scale(1.06);}
.chat-panel{
  position:fixed; bottom:158px; right:24px; width:340px; max-height:480px; background:var(--panel); border:1px solid var(--line);
  border-radius:16px; box-shadow:var(--shadow-lg); z-index:180; display:none; flex-direction:column; overflow:hidden;
}
.chat-panel.open{display:flex;}
.chat-head{background:var(--ink); color:var(--bg); padding:16px 18px;}
.chat-head h4{font-family:'Fraunces'; font-size:1rem;}
.chat-head span{font-size:.74rem; opacity:.7;}
.chat-body{flex:1; overflow-y:auto; padding:14px 16px; display:flex; flex-direction:column; gap:10px; min-height:220px;}
.chat-msg{max-width:78%; padding:9px 13px; border-radius:14px; font-size:.83rem; line-height:1.45;}
.chat-msg.customer{align-self:flex-end; background:var(--rust); color:#fff; border-bottom-right-radius:4px;}
.chat-msg.admin{align-self:flex-start; background:var(--panel-2); color:var(--ink); border-bottom-left-radius:4px;}
.chat-foot{display:flex; gap:8px; padding:12px; border-top:1px solid var(--line);}
.chat-foot input{flex:1; padding:10px 14px; border-radius:20px; border:1.5px solid var(--line); background:var(--bg); color:var(--ink); font-size:.83rem;}
.chat-foot button{width:38px; height:38px; border-radius:50%; background:var(--rust); color:#fff; border:none; cursor:pointer; flex-shrink:0;}
@media(max-width:640px){ .chat-panel{right:12px; left:12px; width:auto; bottom:150px;} .chat-fab{right:16px; bottom:86px;} .scroll-top-btn{right:16px; bottom:24px;} }

/* ============ ADMIN CHAT INBOX ============ */
.chat-inbox{display:grid; grid-template-columns:300px 1fr; gap:0; border:1px solid var(--line); border-radius:14px; overflow:hidden; height:600px; background:var(--panel);}
.chat-thread-list{border-right:1px solid var(--line); overflow-y:auto;}
.chat-thread-item{display:block; padding:14px 16px; border-bottom:1px solid var(--line);}
.chat-thread-item:hover, .chat-thread-item.active{background:var(--panel-2);}
.chat-thread-item .tname{font-weight:700; font-size:.88rem;}
.chat-thread-item .tpreview{font-size:.78rem; color:var(--ink-dim); margin-top:3px;}
.chat-main{display:flex; flex-direction:column; height:100%;}
.chat-main-body{flex:1; overflow-y:auto; padding:20px; display:flex; flex-direction:column; gap:12px;}
.chat-main-foot{border-top:1px solid var(--line); padding:14px; display:flex; gap:10px;}

/* ============ AUTH SPLIT LAYOUT ============ */
.auth-split{display:grid; grid-template-columns:1fr 1fr; min-height:calc(100vh - 70px);}
.auth-split-form{display:flex; align-items:center; justify-content:center; padding:60px 26px;}
.auth-split-visual{
  background:linear-gradient(150deg, var(--rust) 0%, var(--rust-2) 55%, #6b3018 100%);
  display:flex; flex-direction:column; justify-content:center; padding:60px; color:#fff; position:relative; overflow:hidden;
}
.auth-split-visual::before{
  content:""; position:absolute; inset:0; opacity:.15;
  background-image:radial-gradient(circle at 1px 1px, #fff 1px, transparent 0); background-size:26px 26px;
}
.auth-split-visual .content{position:relative; z-index:1; max-width:420px;}
.auth-split-visual h2{font-family:'Fraunces'; font-size:2rem; margin-bottom:16px; line-height:1.15;}
.auth-split-visual p{opacity:.9; font-size:.95rem; line-height:1.6; margin-bottom:28px;}
.auth-split-visual .stat-mini{display:flex; gap:28px; margin-top:10px;}
.auth-split-visual .stat-mini div b{font-family:'Fraunces'; font-size:1.6rem; display:block;}
.auth-split-visual .stat-mini div span{font-size:.75rem; opacity:.8;}
.auth-card-v2{max-width:400px; width:100%;}
.auth-card-v2 h1{font-family:'Fraunces'; font-size:1.7rem; margin-bottom:6px;}
.auth-card-v2 p.sub{color:var(--ink-dim); font-size:.87rem; margin-bottom:30px;}
.auth-divider{display:flex; align-items:center; gap:12px; margin:22px 0; color:var(--ink-dim); font-size:.78rem;}
.auth-divider::before, .auth-divider::after{content:""; flex:1; height:1px; background:var(--line);}

@media(max-width:920px){ .auth-split{grid-template-columns:1fr;} .auth-split-visual{display:none;} }

/* ============ HOMEPAGE v2 additions ============ */
.trust-bar{
  position:relative;
  overflow:hidden;
  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);
  background:var(--panel-2);
  padding:15px 0;
}

/* Fade edges — blend into the panel-2 background */
.trust-bar::before,
.trust-bar::after{
  content:"";
  position:absolute;
  top:0; bottom:0;
  width:90px;
  z-index:2;
  pointer-events:none;
}
.trust-bar::before{
  left:0;
  background:linear-gradient(90deg, var(--panel-2), transparent);
}
.trust-bar::after{
  right:0;
  background:linear-gradient(-90deg, var(--panel-2), transparent);
}

.trust-track{
  display:flex;
  gap:38px;
  padding:0;
  white-space:nowrap;
  animation:trustScroll 30s linear infinite;
  width:max-content;
  align-items:center;
}

/* Pause on hover */
.trust-bar:hover .trust-track{
  animation-play-state:paused;
}

.trust-track span{
  display:flex;
  align-items:center;
  gap:10px;
  font-family:'Inter', system-ui, -apple-system, sans-serif;
  font-size:.84rem;
  font-weight:800;
  letter-spacing:.06em;
  text-transform:uppercase;
  color:var(--ink-dim);
  white-space:nowrap;
}

/* Bullet dot before each item */
.trust-track span::before{
  content:"";
  width:6px;
  height:6px;
  border-radius:50%;
  background:var(--rust);
  opacity:.6;
  flex-shrink:0;
}

@keyframes trustScroll{
  from{transform:translateX(0);}
  to{transform:translateX(-50%);}
}

.rotate-text{display:inline-block; color:var(--rust); font-weight:800; transition:opacity .25s ease;}

.build-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:18px;}
.build-card{background:var(--panel); border:1px solid var(--line); border-radius:14px; padding:26px; transition:transform .3s ease, box-shadow .3s ease, border-color .3s ease; position:relative; overflow:hidden;}
.build-card:hover{transform:translateY(-6px); box-shadow:var(--shadow-lg); border-color:var(--rust);}
.build-card .bico{width:44px; height:44px; border-radius:12px; background:var(--rust); color:#fff; display:flex; align-items:center; justify-content:center; font-size:1.2rem; margin-bottom:16px;}
.build-card h3{font-family:'Fraunces'; font-size:1.08rem; margin-bottom:8px;}
.build-card p{color:var(--ink-dim); font-size:.85rem;}

.why-row{display:grid; grid-template-columns:repeat(4,1fr); gap:20px;}
.why-item{text-align:center; padding:10px;}
.why-item .wico{width:52px; height:52px; border-radius:50%; background:var(--panel); border:1px solid var(--line); display:flex; align-items:center; justify-content:center; font-size:1.3rem; margin:0 auto 16px; transition:.3s;}
.why-item:hover .wico{border-color:var(--rust); transform:scale(1.08);}
.why-item h4{font-weight:700; font-size:.95rem; margin-bottom:6px;}
.why-item p{color:var(--ink-dim); font-size:.82rem;}

@media(max-width:920px){ .build-grid{grid-template-columns:1fr 1fr;} .why-row{grid-template-columns:1fr 1fr;} }
@media(max-width:640px){ .build-grid{grid-template-columns:1fr;} .why-row{grid-template-columns:1fr;} }

/* ============ BLOG v2 ============ */
.blog-featured{display:grid; grid-template-columns:1.3fr 1fr; gap:30px; background:var(--panel); border:1px solid var(--line); border-radius:18px; overflow:hidden; margin-bottom:50px; box-shadow:var(--shadow);}
.blog-featured .bf-img{background:linear-gradient(135deg, var(--rust), var(--gold)); min-height:280px;}
.blog-featured .bf-body{padding:34px 34px 34px 0; display:flex; flex-direction:column; justify-content:center;}
.blog-featured .bf-tag{font-family:'JetBrains Mono'; font-size:.7rem; color:var(--rust); letter-spacing:.08em; text-transform:uppercase; margin-bottom:10px;}
.blog-featured h2{font-family:'Fraunces'; font-size:1.6rem; margin-bottom:12px; line-height:1.2;}
.blog-featured p{color:var(--ink-dim); margin-bottom:18px;}
.blog-meta{display:flex; gap:14px; align-items:center; font-size:.78rem; color:var(--ink-dim); margin-top:10px;}
.blog-meta .avatar{width:26px; height:26px; border-radius:50%; background:var(--cream); display:flex; align-items:center; justify-content:center; font-size:.7rem; font-weight:700; color:var(--rust);}
.share-row{display:flex; gap:10px; margin-top:30px;}
.share-row a{width:38px; height:38px; border-radius:50%; border:1px solid var(--line); display:flex; align-items:center; justify-content:center; font-size:.8rem; color:var(--ink-dim);}
.share-row a:hover{border-color:var(--rust); color:var(--rust);}
@media(max-width:800px){ .blog-featured{grid-template-columns:1fr;} .blog-featured .bf-body{padding:26px;} .blog-featured .bf-img{min-height:200px;} }

/* ============ BLOG CARDS ============ */
.blog-card{
  display:flex;
  flex-direction:column;
  height:100%;
}

.blog-card-link{
  display:flex;
  flex-direction:column;
  height:100%;
  text-decoration:none;
  color:inherit;
}

/* Cover image — fixed height, never squeezed */
.blog-card .product-top{
  height:250px;
  flex-shrink:0;
  background-size:cover;
  background-position:center;
  background-repeat:no-repeat;
}

/* Body grows to fill remaining space */
.blog-card .product-body{
  flex:1;
  display:flex;
  flex-direction:column;
}

/* Meta row — Latest badge, date, read time */
.blog-card .blog-meta{
  display:flex;
  align-items:center;
  gap:10px;
  font-size:.78rem;
  color:var(--ink-dim);
  font-weight:600;
  flex-wrap:wrap;
}
.blog-card .blog-meta .meta-item{
  display:flex;
  align-items:center;
  gap:4px;
}
.blog-card .blog-meta .meta-item i{
  color:var(--rust);
}
.blog-card .blog-meta .meta-sep{
  color:var(--line);
}

/* Description spacing */
.blog-card .product-body p{
  margin-bottom:16px;
}

/* Footer — pinned to bottom, aligned across all cards in a row */
.blog-card .pfoot{
  display:flex;
  justify-content:space-between;
  align-items:center;
  margin-top:auto;
  padding-top:12px;
  border-top:1px solid var(--line);
}
.blog-card .pfoot .platform-badge{
  display:flex;
  align-items:center;
  gap:6px;
}
.blog-card .pfoot .platform-badge i{
  color:var(--rust);
}

/* ============ FA STAR RATING PARTIAL ============ */
.stars i, .rating-stars i{color:var(--gold); font-size:.85rem; margin-right:1px;}

/* ============ FILE UPLOAD FIELD ============ */
.upload-field{border:2px dashed var(--line); border-radius:12px; padding:20px; text-align:center; background:var(--panel-2); position:relative; transition:.2s;}
.upload-field.dragover{border-color:var(--rust); background:color-mix(in srgb, var(--rust) 6%, var(--panel-2));}
.upload-field input[type="file"]{position:absolute; inset:0; opacity:0; cursor:pointer; width:100%; height:100%;}
.upload-field .upload-icon{font-size:1.6rem; color:var(--ink-dim); margin-bottom:8px;}
.upload-field .upload-text{font-size:.85rem; color:var(--ink-dim);}
.upload-field .upload-text b{color:var(--rust);}
.upload-preview{margin-top:14px; display:flex; align-items:center; gap:14px;}
.upload-preview img{width:80px; height:80px; object-fit:cover; border-radius:10px; border:1px solid var(--line);}
.upload-preview .upload-preview-remove{font-size:.76rem; color:#c0392b; border:1px solid var(--line); padding:5px 11px; border-radius:6px; cursor:pointer; background:none;}

/* ============ UPLOADED SITE LOGO ============ */
.logo-img{height:40px; width:auto; vertical-align:middle;}
.logo-img-mobile{height:40px; width:auto; vertical-align:middle;}
.logo-img-dark{display:none;}
[data-theme="dark"] .logo-img-light{display:none;}
[data-theme="dark"] .logo-img-dark{display:inline-block;}
.admin-sidebar .logo-img-light{display:none;}
.admin-sidebar .logo-img-dark{display:inline-block;}

/* ============ USER MENU & ICON ============ */
  .user-menu { position: relative; }
    .user-dropdown {
        display: none;
        position: absolute;
        top: calc(100% + 10px);
        right: 0;
        background: var(--bg, #fff);
        border: 1px solid var(--line, #ddd);
        border-radius: 8px;
        box-shadow: 0 5px 15px rgba(0,0,0,0.1);
        min-width: 150px;
        z-index: 100;
        overflow: hidden;
    }
    .user-dropdown.open { display: block; }
    .user-dropdown a, .user-dropdown button {
        display: block;
        width: 100%;
        padding: 10px 16px;
        font-size: .85rem;
        color: var(--ink, #333);
        text-decoration: none;
        text-align: left;
        background: none;
        border: none;
        cursor: pointer;
        transition: background .2s;
    }
    .user-dropdown a:hover, .user-dropdown button:hover {
        background: var(--panel-2, #f5f5f5);
    }

    /* Hide the user icon on small devices (mobile/tablet) */
    @media (max-width: 768px) {
        .user-menu { display: none !important; }
    }

/* ============ CHAT UNREAD BADGE ============ */
.chat-fab .chat-badge{
  position:absolute; top:-4px; right:-4px; background:#c0392b; color:#fff; font-size:.68rem; font-weight:700;
  min-width:19px; height:19px; border-radius:50%; display:none; align-items:center; justify-content:center; padding:0 4px;
  border:2px solid var(--bg);
}
.chat-fab .chat-badge.show{display:flex;}

/* ============ SMALL-PHONE PASS (≤480px) ============ */
/* A consolidated pass over grids that looked fine at tablet width but
   were still multi-column (and cramped/overflowing) on small phones. */
@media(max-width:480px){
  .hire-grid{grid-template-columns:1fr;}
  .tally-row{grid-template-columns:1fr;}
  .ticket::before, .ticket::after{display:none;}
  .stat-row{grid-template-columns:1fr;}
  .dash-stats{grid-template-columns:1fr;}
  .content-section{padding:32px 16px 70px;}
  .nav{padding:14px 16px;}
  header.shrink .nav{padding:9px 16px;}
  .sec-head{flex-direction:column; align-items:flex-start; gap:10px;}
  .catalog-grid, .products, .hire-grid{gap:16px;}
  .admin-card{padding:18px;}
  .table-wrap table{font-size:.78rem;}
  .table-wrap th, .table-wrap td{padding:9px 10px; white-space:nowrap;}
  .hero h1, .page-title{font-size:clamp(1.6rem,7vw,2.1rem) !important;}
  .cta h2{font-size:1.4rem !important;}
  .filter-bar{overflow-x:auto; flex-wrap:nowrap; -webkit-overflow-scrolling:touch; padding-bottom:6px;}
  .chip{white-space:nowrap;}
  .form-actions{flex-direction:column; align-items:stretch;}
  .form-actions .btn{width:100%; text-align:center;}
  .toast-stack{bottom:150px;}
}

/* ============ PAGINATION ============ */
.pagination-nav{display:flex; justify-content:center; margin-top:44px;}
.pagination-list{display:flex; align-items:center; gap:6px; list-style:none; flex-wrap:wrap;}
.page-item{display:flex;}
.page-link{
  display:flex; align-items:center; justify-content:center; min-width:38px; height:38px; padding:0 12px;
  font-size:.82rem; font-weight:600; color:var(--ink-dim); background:var(--panel); border:1px solid var(--line);
  border-radius:20px; text-decoration:none; cursor:pointer; transition:.2s;
}
.page-item a.page-link:hover{border-color:var(--rust); color:var(--rust);}
.page-item.active .page-link{background:var(--rust); color:#fff; border-color:var(--rust);}
.page-item.disabled .page-link{color:var(--ink-dim); opacity:.4; cursor:default;}
.page-link.page-dots{background:none; border:none; cursor:default;}
@media(max-width:480px){
  .page-link{min-width:34px; height:34px; padding:0 9px; font-size:.78rem;}
}


/* ============ AFFILIATE PROGRAM PAGE ============ */

/* ---------- Hero stats ---------- */
.aff-hero{ padding-top:0; }
.aff-stats{
  display:grid; grid-template-columns:repeat(4, 1fr); gap:16px; margin-bottom:32px;
}
.aff-stat{
  background:var(--panel); border:1px solid var(--line); border-radius:16px;
  padding:24px 20px; text-align:center; position:relative; overflow:hidden;
  transition:transform .25s ease, border-color .25s ease;
}
.aff-stat::before{
  content:""; position:absolute; inset:0 0 auto 0; height:3px;
  background:linear-gradient(90deg, var(--rust), var(--gold));
  opacity:0; transition:opacity .25s ease;
}
.aff-stat:hover{ transform:translateY(-3px); border-color:var(--rust); }
.aff-stat:hover::before{ opacity:1; }
.aff-stat-ico{
  width:44px; height:44px; margin:0 auto 12px; border-radius:12px;
  background:var(--panel-2); border:1px solid var(--line);
  display:flex; align-items:center; justify-content:center;
  color:var(--rust); font-size:1rem;
}
.aff-stat-num{
  font-family:'Fraunces'; font-size:2rem; font-weight:700; line-height:1;
  color:var(--ink); margin-bottom:6px;
}
.aff-stat-lbl{ font-size:.78rem; font-weight:600; color:var(--ink-dim); letter-spacing:.02em; }

/* ---------- Live commission calculator ---------- */
.aff-calc{
  background:var(--panel); border:1px solid var(--line); border-radius:20px;
  overflow:hidden; box-shadow:0 10px 40px rgba(0,0,0,.04);
  position:relative;
}
.aff-calc::after{
  content:""; position:absolute; inset:0; pointer-events:none; border-radius:20px;
  background:radial-gradient(600px 200px at 100% 0%, rgba(217,119,6,.05), transparent 60%);
}
.aff-calc-head{
  display:flex; justify-content:space-between; align-items:center; gap:18px;
  padding:24px 28px; border-bottom:1px solid var(--line); flex-wrap:wrap;
  background:
    radial-gradient(420px 160px at 100% 0%, rgba(194,65,12,.08), transparent 60%),
    var(--panel);
  position:relative; z-index:1;
}
.aff-calc-eyebrow{
  display:inline-block; font-size:.7rem; font-weight:800; letter-spacing:.14em;
  text-transform:uppercase; color:var(--rust); margin-bottom:6px;
}
.aff-calc-title{
  font-family:'Fraunces'; font-size:clamp(1.3rem, 2.4vw, 1.7rem);
  font-weight:700; color:var(--ink); margin:0; line-height:1.2;
}
.aff-calc-badge{
  display:inline-flex; align-items:center; gap:8px;
  font-size:.74rem; font-weight:700; color:var(--rust);
  background:rgba(194,65,12,.08); border:1px solid rgba(194,65,12,.18);
  padding:7px 13px; border-radius:999px;
}
.aff-calc-badge i{ font-size:.7rem; }

.aff-calc-body{ padding:28px; position:relative; z-index:1; }

.aff-calc-inputs{
  display:grid; grid-template-columns:1fr 1fr; gap:24px; margin-bottom:28px;
}
.aff-field{ display:flex; flex-direction:column; gap:12px; }
.aff-field-head{
  display:flex; justify-content:space-between; align-items:center; gap:14px;
}
.aff-field-head label{
  font-size:.85rem; font-weight:700; color:var(--ink); letter-spacing:.01em;
}
.aff-field-value{
  display:inline-flex; align-items:baseline; gap:2px;
  background:var(--panel-2); border:1px solid var(--line); border-radius:10px;
  padding:6px 12px; transition:border-color .2s ease, box-shadow .2s ease;
}
.aff-field-value:focus-within{
  border-color:var(--rust);
  box-shadow:0 0 0 3px rgba(194,65,12,.12);
}
.aff-field-value input{
  width:74px; background:transparent; border:none; outline:none;
  font-family:'Fraunces'; font-size:1.05rem; font-weight:700;
  color:var(--rust); text-align:right; padding:0;
  -moz-appearance:textfield;
}
.aff-field-value input::-webkit-outer-spin-button,
.aff-field-value input::-webkit-inner-spin-button{ -webkit-appearance:none; margin:0; }
.aff-field-prefix, .aff-field-suffix{
  font-size:.8rem; font-weight:700; color:var(--ink-dim);
}

/* Sliders */
.aff-slider{
  -webkit-appearance:none; appearance:none; width:100%; height:5px;
  border-radius:999px; background:var(--line); outline:none; cursor:pointer;
}
.aff-slider::-webkit-slider-thumb{
  -webkit-appearance:none; appearance:none;
  width:20px; height:20px; border-radius:50%;
  background:var(--rust); border:3px solid var(--panel);
  box-shadow:0 2px 8px rgba(194,65,12,.35); cursor:grab;
  transition:transform .15s ease;
}
.aff-slider::-webkit-slider-thumb:active{ cursor:grabbing; transform:scale(1.12); }
.aff-slider::-moz-range-thumb{
  width:20px; height:20px; border-radius:50%;
  background:var(--rust); border:3px solid var(--panel);
  box-shadow:0 2px 8px rgba(194,65,12,.35); cursor:grab;
}
.aff-range-ticks{
  display:flex; justify-content:space-between;
  font-size:.72rem; color:var(--ink-dim); font-weight:600;
}

/* Results */
.aff-calc-results{
  display:grid; grid-template-columns:repeat(3, 1fr); gap:14px;
  padding-top:24px; border-top:1px dashed var(--line);
}
.aff-result{
  background:var(--panel-2); border:1px solid var(--line); border-radius:14px;
  padding:20px 18px; text-align:center;
  transition:transform .25s ease, border-color .25s ease;
}
.aff-result:hover{ transform:translateY(-2px); }
.aff-result--primary{
  background:linear-gradient(135deg, rgba(194,65,12,.06), rgba(217,119,6,.06));
  border-color:rgba(194,65,12,.28);
}
.aff-result--primary:hover{ border-color:var(--rust); }
.aff-result-lbl{
  display:inline-flex; align-items:center; gap:7px;
  font-size:.72rem; font-weight:700; letter-spacing:.08em;
  text-transform:uppercase; color:var(--ink-dim); margin-bottom:10px;
}
.aff-result-lbl i{ color:var(--rust); font-size:.75rem; }
.aff-result-num{
  font-family:'Fraunces'; font-size:clamp(1.4rem, 2.6vw, 1.9rem);
  font-weight:700; color:var(--ink); line-height:1.1;
  transition:color .2s ease;
}
.aff-result--primary .aff-result-num{ color:var(--rust); }

.aff-calc-foot{
  margin-top:22px; font-size:.8rem; color:var(--ink-dim);
  text-align:center; line-height:1.6;
}
.aff-calc-foot strong{ color:var(--rust); }

/* ---------- Three-step process ---------- */
.aff-steps{
  display:grid; grid-template-columns:repeat(3, 1fr); gap:18px;
}
.aff-step{
  position:relative; background:var(--panel); border:1px solid var(--line);
  border-radius:16px; padding:28px 24px;
  transition:transform .3s ease, border-color .3s ease, box-shadow .3s ease;
  overflow:hidden;
}
.aff-step:hover{
  transform:translateY(-4px); border-color:var(--rust);
  box-shadow:0 14px 40px rgba(0,0,0,.06);
}
.aff-step-num{
  position:absolute; top:14px; right:20px;
  font-family:'Fraunces'; font-size:2.4rem; font-weight:700;
  color:var(--line); line-height:1; opacity:.7;
  transition:color .3s ease, opacity .3s ease;
}
.aff-step:hover .aff-step-num{ color:var(--rust); opacity:.35; }
.aff-step-ico{
  width:48px; height:48px; border-radius:14px;
  background:var(--panel-2); border:1px solid var(--line);
  display:flex; align-items:center; justify-content:center;
  color:var(--rust); font-size:1.1rem; margin-bottom:16px;
}
.aff-step h4{
  font-size:1rem; font-weight:700; color:var(--ink);
  margin:0 0 8px; position:relative;
}
.aff-step p{
  font-size:.86rem; color:var(--ink-dim); line-height:1.65; margin:0;
}
.aff-step p strong{ color:var(--rust); }

/* ---------- Benefits grid ---------- */
.aff-benefits{
  display:grid; grid-template-columns:repeat(4, 1fr); gap:16px;
}
.aff-benefit{
  background:var(--panel); border:1px solid var(--line); border-radius:16px;
  padding:26px 22px; position:relative; overflow:hidden;
  transition:transform .3s ease, border-color .3s ease, box-shadow .3s ease;
}
.aff-benefit::before{
  content:""; position:absolute; left:0; right:0; top:0; height:2px;
  background:linear-gradient(90deg, var(--rust), var(--gold));
  transform:scaleX(0); transform-origin:left;
  transition:transform .35s ease;
}
.aff-benefit:hover{
  transform:translateY(-5px); border-color:var(--rust);
  box-shadow:0 14px 40px rgba(0,0,0,.06);
}
.aff-benefit:hover::before{ transform:scaleX(1); }
.aff-benefit-ico{
  width:46px; height:46px; border-radius:13px;
  background:var(--panel-2); border:1px solid var(--line);
  display:flex; align-items:center; justify-content:center;
  color:var(--rust); font-size:1.05rem; margin-bottom:16px;
}
.aff-benefit h4{
  font-size:.98rem; font-weight:700; color:var(--ink); margin:0 0 8px;
}
.aff-benefit p{
  font-size:.85rem; color:var(--ink-dim); line-height:1.65; margin:0;
}

/* ---------- Terms ---------- */
.aff-terms{
  display:grid; grid-template-columns:repeat(2, 1fr); gap:14px;
}
.aff-term{
  display:flex; gap:18px; align-items:flex-start;
  background:var(--panel); border:1px solid var(--line); border-radius:14px;
  padding:22px 24px; height:100%;
  transition:border-color .25s ease, transform .25s ease, box-shadow .25s ease;
}
.aff-term:hover{
  border-color:var(--rust); transform:translateY(-2px);
  box-shadow:0 10px 30px rgba(0,0,0,.05);
}
.aff-term-ico{
  width:42px; height:42px; border-radius:12px; flex-shrink:0;
  background:var(--panel-2); border:1px solid var(--line);
  display:flex; align-items:center; justify-content:center;
  color:var(--rust); font-size:1rem;
}
.aff-term h4{
  font-size:.96rem; font-weight:700; color:var(--ink); margin:0 0 6px;
}
.aff-term p{
  font-size:.86rem; color:var(--ink-dim); line-height:1.65; margin:0;
}
.aff-term p strong{ color:var(--rust); }
.aff-term a{ color:var(--rust); font-weight:600; }

/* ---------- Referral link strip (logged-in) ---------- */
.aff-link-strip{
  margin-bottom:22px;
}
.aff-link-inner{
  display:grid; grid-template-columns:1fr auto; gap:24px; align-items:center;
  background:
    radial-gradient(400px 160px at 0% 50%, rgba(194,65,12,.08), transparent 60%),
    var(--panel);
  border:1px solid var(--line); border-radius:18px; padding:24px 28px;
  position:relative; overflow:hidden;
}
.aff-link-copy{ min-width:0; }
.aff-link-eyebrow{
  display:inline-flex; align-items:center; gap:7px;
  font-size:.7rem; font-weight:800; letter-spacing:.14em; text-transform:uppercase;
  color:var(--rust); margin-bottom:6px;
}
.aff-link-eyebrow i{ font-size:.7rem; }
.aff-link-copy h3{
  font-family:'Fraunces'; font-size:clamp(1.05rem, 1.8vw, 1.3rem);
  font-weight:700; color:var(--ink); margin:0 0 4px; line-height:1.25;
}
.aff-link-copy p{
  font-size:.84rem; color:var(--ink-dim); margin:0; line-height:1.55;
}
.aff-link-field{
  display:flex; align-items:stretch; gap:0; min-width:280px;
  background:var(--panel-2); border:1px solid var(--line); border-radius:12px;
  overflow:hidden;
  transition:border-color .2s ease, box-shadow .2s ease;
}
.aff-link-field:focus-within{
  border-color:var(--rust);
  box-shadow:0 0 0 3px rgba(194,65,12,.12);
}
.aff-link-field input{
  flex:1; background:transparent; border:none; outline:none;
  padding:12px 14px; font-family:'JetBrains Mono', monospace;
  font-size:.82rem; color:var(--ink); min-width:0;
  text-overflow:ellipsis;
}
.aff-copy-btn{
  display:inline-flex; align-items:center; gap:8px;
  background:var(--rust); color:#fff; border:none;
  padding:0 18px; font-weight:700; font-size:.82rem;
  cursor:pointer; transition:background .2s ease, transform .15s ease;
  font-family:inherit;
}
.aff-copy-btn:hover{ background:var(--gold); }
.aff-copy-btn:active{ transform:scale(.97); }
.aff-copy-btn i{ font-size:.85rem; }
.aff-copy-btn.is-copied{ background:#16a34a; }

/* ---------- FAQ ---------- */
.faq-list{
  max-width:760px; display:flex; flex-direction:column; gap:12px;
}
.faq-item{
  background:var(--panel); border:1px solid var(--line); border-radius:12px;
  padding:18px 22px; transition:border-color .2s;
}
.faq-item:hover{ border-color:var(--rust); }
.faq-item[open]{ border-color:var(--rust); }
.faq-item summary{
  font-weight:600; font-size:.95rem; cursor:pointer; list-style:none;
  display:flex; justify-content:space-between; align-items:center; gap:14px;
  color:var(--ink);
}
.faq-item summary::-webkit-details-marker{ display:none; }
.faq-item summary::after{
  content:"\f078"; font-family:"Font Awesome 6 Free"; font-weight:900;
  font-size:.8rem; color:var(--ink-dim); transition:transform .2s;
}
.faq-item[open] summary::after{ transform:rotate(180deg); color:var(--rust); }
.faq-item p{
  color:var(--ink-dim); font-size:.88rem; line-height:1.65; margin-top:14px;
}
.faq-item a{ color:var(--rust); font-weight:600; }

/* ---------- Responsive ---------- */
@media (max-width:1020px){
  .aff-stats{ grid-template-columns:repeat(2, 1fr); }
  .aff-calc-inputs{ grid-template-columns:1fr; }
  .aff-steps{ grid-template-columns:1fr; }
  .aff-benefits{ grid-template-columns:repeat(2, 1fr); }
  .aff-terms{ grid-template-columns:1fr; }
  .aff-link-inner{ grid-template-columns:1fr; }
  .aff-link-field{ min-width:0; width:100%; }
}
@media (max-width:640px){
  .aff-stats{ grid-template-columns:1fr; }
  .aff-benefits{ grid-template-columns:1fr; }
  .aff-calc-head{ padding:20px; }
  .aff-calc-body{ padding:22px 20px; }
  .aff-calc-results{ grid-template-columns:1fr; }
  .aff-result{ padding:16px; }
  .aff-term{ flex-direction:column; gap:12px; }
  .aff-link-inner{ padding:20px; }
  .aff-field-head{ flex-direction:column; align-items:flex-start; gap:10px; }
  .aff-field-value{ align-self:flex-end; }
}



/* ============ HERO PLATFORM SLIDER (auto-advancing) ============ */
.preview-dots{display:flex; justify-content:center; gap:8px; padding:14px 0 18px;}
.preview-dot{
  width:8px; height:8px; border-radius:50%; background:var(--line); border:none; cursor:pointer; padding:0;
  transition:background .25s ease, transform .25s ease;
}
.preview-dot.active{background:var(--rust); transform:scale(1.3);}
.preview-dot:hover{background:var(--rust-2);}

/* ============ ADDON SHELF EMPTY STATE ============ */
.addon-empty{
  text-align:center; padding:28px 16px; color:var(--ink-dim); font-size:.85rem;
  border:1px dashed var(--line); border-radius:10px; background:var(--panel-2);
}
.addon-empty i{font-size:1.6rem; color:var(--ink-dim); display:block; margin-bottom:10px; opacity:.6;}

/* ============ TALLY CARDS (replaces the plain tally-row on the homepage) ============ */
.tally-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:20px;}
.tally-card{
  background:var(--panel); border:1px solid var(--line); border-radius:16px; padding:28px 20px; text-align:center;
  transition:transform .25s ease, box-shadow .3s ease, border-color .25s ease;
}
.tally-card:hover{border-color:var(--rust); transform:translateY(-5px); box-shadow:var(--shadow);}
.tally-card-icon{
  width:48px; height:48px; border-radius:12px; background:var(--panel-2); display:flex; align-items:center; justify-content:center;
  font-size:1.25rem; color:var(--rust); margin:0 auto 16px;
}
.tally-card-num{font-family:'Fraunces'; font-size:2.4rem; font-weight:700; color:var(--ink); line-height:1;}
.tally-card-lbl{font-size:.84rem; color:var(--ink-dim); margin-top:8px;}

@media(max-width:920px){
  .tally-grid{grid-template-columns:repeat(2,1fr);}
}
@media(max-width:640px){
  .tally-grid{grid-template-columns:1fr 1fr; gap:14px;}
  .tally-card{padding:20px 14px;}
  .tally-card-num{font-size:1.9rem;}
  .preview-tabs{flex-wrap:wrap; justify-content:center;}
}
@media(max-width:480px){
  .tally-grid{grid-template-columns:1fr;}
}
/* ============ BLOG INDEX PAGE ============ */
  .latest-badge {
    background: var(--rust);
    color: #fff;
    padding: 2px 8px;
    border-radius: 4px;
    text-transform: uppercase;
    font-size: .65rem;
    letter-spacing: .5px;
    font-weight: 700;
  }
  
  
/* ============Preview panel layout enhancements + thumbnail hover lock============ */
  /* ---- Preview panel: outer wrapper ---- */
  #platformSlider {
    position: relative;
  }

  /* ---- Tabs ---- */
  .preview-tabs {
    display: flex;
    gap: 4px;
    flex-wrap: nowrap;
    overflow: hidden;
  }
  .ptab {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    white-space: nowrap;
    transition: all .22s ease;
  }
  .ptab i { font-size: .92rem; }
  .ptab:not(.active):hover {
    background: rgba(193, 99, 55, 0.06);
  }

  /* Only the active screen is visible */
  .pscreen { display: none; }
  .pscreen.active { display: block; }

  /* Screen header: circular icon badge + eyebrow + title */
  .pscreen-header {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 16px;
  }
  .pscreen-header-text { min-width: 0; flex: 1; }
  .pscreen-eyebrow {
    display: block;
    font-size: .68rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1.2px;
    color: var(--rust);
    margin-bottom: 4px;
  }
  .pscreen-title {
    font-family: 'Fraunces', Georgia, serif;
    font-size: 1.15rem;
    font-weight: 700;
    line-height: 1.25;
    color: var(--ink);
  }

  /* Icon badge */
  .pscreen-icon {
    width: 52px;
    height: 52px;
    border-radius: 14px;
    background: linear-gradient(145deg, rgba(193, 99, 55, 0.14), rgba(210, 164, 90, 0.18));
    color: var(--rust);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.4rem;
    flex-shrink: 0;
    box-shadow: inset 0 0 0 1px rgba(193, 99, 55, 0.1);
  }

  /* Short description under the title */
  .pscreen-desc {
    font-size: .88rem;
    line-height: 1.55;
    color: var(--ink-dim);
    margin: 0 0 20px;
  }

  /* "What's included" label */
  .pscreen-section-label {
    font-size: .68rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: var(--ink-dim);
    margin-bottom: 12px;
  }

  /* Feature list */
  .pscreen-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-bottom: 22px;
  }
  .pscreen-item {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: .86rem;
    font-weight: 500;
    color: var(--ink);
    line-height: 1.4;
  }
  .pscreen-check {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: rgba(193, 99, 55, 0.12);
    color: var(--rust);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: .6rem;
    flex-shrink: 0;
  }

  /* Bottom stats row */
  .pscreen-stats {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
    padding-top: 18px;
    border-top: 1px solid var(--line, #e5e5e5);
  }
  .pscreen-stat {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
  }
  .pscreen-stat-icon {
    width: 32px;
    height: 32px;
    border-radius: 9px;
    background: var(--panel-2, #f6f4f0);
    color: var(--rust);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: .78rem;
    flex-shrink: 0;
  }
  .pscreen-stat-label {
    font-size: .62rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .5px;
    color: var(--ink-dim);
    margin-bottom: 2px;
  }
  .pscreen-stat-value {
    font-size: .82rem;
    font-weight: 700;
    color: var(--ink);
    line-height: 1.2;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  /* Tighter padding for the panel body */
  .preview-body { padding: 24px 22px 22px; }

  /* ---- Mobile: keep all tabs in one row ---- */
  @media (max-width: 640px) {
    .preview-tabs {
      padding: 8px 8px 0;
      gap: 3px;
    }
    .ptab {
      flex: 1 1 0;
      min-width: 0;
      padding: 10px 4px;
      font-size: .95rem;
      border-radius: 8px 8px 0 0;
    }
    .ptab-label { display: none; } /* Hide labels on mobile — icons only */
    .ptab i { font-size: 1rem; }

    .preview-body { padding: 18px 16px 18px; }
    .pscreen-header { gap: 12px; margin-bottom: 14px; }
    .pscreen-icon { width: 44px; height: 44px; font-size: 1.15rem; border-radius: 12px; }
    .pscreen-title { font-size: 1rem; }
    .pscreen-eyebrow { font-size: .62rem; letter-spacing: 1px; }
    .pscreen-desc { font-size: .82rem; margin-bottom: 16px; }
    .pscreen-section-label { margin-bottom: 10px; }
    .pscreen-list { gap: 8px; margin-bottom: 18px; }
    .pscreen-item { font-size: .8rem; gap: 8px; }
    .pscreen-check { width: 18px; height: 18px; font-size: .55rem; }
    .pscreen-stats { gap: 8px; padding-top: 14px; }
    .pscreen-stat { gap: 7px; }
    .pscreen-stat-icon { width: 28px; height: 28px; font-size: .7rem; border-radius: 8px; }
    .pscreen-stat-label { font-size: .58rem; }
    .pscreen-stat-value { font-size: .74rem; }
  }

  /* Medium screens: keep labels but tighten them */
  @media (min-width: 641px) and (max-width: 920px) {
    .ptab { padding: 9px 12px; font-size: .74rem; }
  }
  
/* ============================================================
   HOMEPAGE Process Steps - Hero social proof line
   ============================================================ */
  /* ===== ADDED: Hero social proof line ===== */
  .hero-proof {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-top: 20px;
    font-size: 0.9rem;
    color: var(--ink-dim);
  }
  .proof-stars {
    color: var(--gold);
    letter-spacing: 2px;
  }
  .hero-proof strong {
    color: var(--ink);
    font-weight: 700;
  }

  /* ===== ADDED: Process Section Styles ===== */
  .process-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 24px;
    margin-top: 40px;
  }
  .process-step {
    position: relative;
    padding: 32px 24px 24px;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: 14px;
    transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
  }
  .process-step:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 32px rgba(0,0,0,0.08);
    border-color: var(--rust);
  }
  .step-num {
    position: absolute;
    top: 16px;
    right: 20px;
    font-size: 2.5rem;
    font-weight: 800;
    color: var(--rust);
    opacity: 0.15;
    font-variant-numeric: tabular-nums;
  }
  .step-icon {
    width: 48px;
    height: 48px;
    background: var(--rust);
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 1.2rem;
    margin-bottom: 16px;
  }
  .process-step h3 {
    font-size: 1.15rem;
    margin-bottom: 8px;
    color: var(--ink);
  }
  .process-step p {
    font-size: 0.92rem;
    color: var(--ink-dim);
    line-height: 1.6;
    margin: 0;
  }
  

/* ============================================================
   BLOG POST CONTENT (scoped to .blog-content)
   These rules apply ONLY to blog post bodies, not to other
   .detail-body pages (services/show, addons/show, etc.).
   ============================================================ */
.blog-content {
  max-width: 100%;
  min-width: 0;
  padding-left: 4px;
  padding-right: 4px;
  word-wrap: break-word;
  overflow-wrap: break-word;
}

/* Lists inside blog content */
.blog-content ol,
.blog-content ul {
  padding-left: 24px;
  margin: 16px 0;
}
.blog-content ol li,
.blog-content ul li {
  margin-bottom: 10px;
  line-height: 1.75;
  padding-left: 4px;
}

/* Headings inside blog content */
.blog-content h2,
.blog-content h3,
.blog-content h4 {
  margin-top: 32px;
  margin-bottom: 12px;
  color: var(--ink);
  line-height: 1.3;
}
.blog-content p {
  margin-bottom: 16px;
}
.blog-content img {
  max-width: 100%;
  height: auto;
  border-radius: 10px;
  margin: 20px 0;
}

/* ============================================================
   OVERFLOW PROTECTION
   Prevents iframes, video, pre blocks, and other embeds from
   forcing a page-wide horizontal scrollbar. Each one scrolls
   inside itself instead.
   ============================================================ */
.blog-content iframe,
.blog-content video,
.blog-content embed,
.blog-content object {
  max-width: 100% !important;
  width: 100%;
  height: auto;
}

/* Pasted code snippets scroll inside their own block */
.blog-content pre {
  max-width: 100%;
  overflow-x: auto;
  white-space: pre;
  -webkit-overflow-scrolling: touch;
  padding: 12px 14px;
  background: var(--panel-2);
  border-radius: 8px;
  scrollbar-width: thin;
}

.blog-content code {
  word-break: break-word;
  overflow-wrap: anywhere;
}

/* Figures and blockquotes never exceed the container */
.blog-content figure,
.blog-content blockquote {
  max-width: 100%;
  margin-left: 0;
  margin-right: 0;
}

/* ============================================================
   TABLE SCROLL WRAPPER (blog content)
   Wraps every table in a scrollable container. The table itself
   stays native (fills 100% width on desktop), and the wrapper
   handles horizontal overflow on mobile.
   ============================================================ */
.blog-content .table-scroll-wrapper {
  width: 100%;
  max-width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch; /* smooth momentum scroll on iOS */
  margin: 20px 0;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--bg);
  scrollbar-width: thin;
  scrollbar-color: rgba(193, 99, 55, 0.35) rgba(0, 0, 0, 0.05);
}
.blog-content .table-scroll-wrapper::-webkit-scrollbar {
  height: 8px;
}
.blog-content .table-scroll-wrapper::-webkit-scrollbar-track {
  background: rgba(0, 0, 0, 0.04);
  border-radius: 0 0 10px 10px;
}
.blog-content .table-scroll-wrapper::-webkit-scrollbar-thumb {
  background: rgba(193, 99, 55, 0.35);
  border-radius: 10px;
}
.blog-content .table-scroll-wrapper::-webkit-scrollbar-thumb:hover {
  background: rgba(193, 99, 55, 0.55);
}

/* Native table inside the wrapper — fills full width on desktop */
.blog-content .table-scroll-wrapper table {
  width: 100%;
  border-collapse: collapse;
  font-size: .88rem;
  line-height: 1.5;
  margin: 0;
  border: none;
  background: transparent;
}

/* Table cells */
.blog-content .table-scroll-wrapper table th,
.blog-content .table-scroll-wrapper table td {
  padding: 10px 14px;
  text-align: left;
  border-bottom: 1px solid var(--line);
  color: var(--ink);
  vertical-align: top;
}
.blog-content .table-scroll-wrapper table th {
  background: var(--panel-2);
  font-weight: 700;
  font-size: .78rem;
  text-transform: uppercase;
  letter-spacing: .4px;
  color: var(--ink-dim);
  white-space: nowrap;
}
.blog-content .table-scroll-wrapper table tr:last-child td {
  border-bottom: none;
}
.blog-content .table-scroll-wrapper table tr:nth-child(even) td {
  background: rgba(0, 0, 0, 0.015);
}

/* ============================================================
   MOBILE
   ============================================================ */
@media (max-width: 768px) {
  .blog-content {
    padding-left: 8px;
    padding-right: 8px;
  }
  .blog-content ol,
  .blog-content ul {
    padding-left: 28px;
    margin: 14px 0;
  }
  .blog-content ol li,
  .blog-content ul li {
    margin-bottom: 12px;
    line-height: 1.8;
  }
  .blog-content h2 { font-size: 1.25rem; }
  .blog-content h3 { font-size: 1.1rem; }

  .blog-content .table-scroll-wrapper {
    margin: 16px 0;
    border-radius: 8px;
  }
  .blog-content .table-scroll-wrapper table {
    font-size: .82rem;
  }
  .blog-content .table-scroll-wrapper table th,
  .blog-content .table-scroll-wrapper table td {
    padding: 9px 12px;
  }
  .blog-content .table-scroll-wrapper table th {
    font-size: .72rem;
  }
}

/* Very small screens — extra safety padding */
@media (max-width: 480px) {
  .blog-content {
    padding-left: 10px;
    padding-right: 10px;
  }
  .blog-content ol,
  .blog-content ul {
    padding-left: 30px;
  }
  .blog-content .table-scroll-wrapper table {
    font-size: .78rem;
  }
  .blog-content .table-scroll-wrapper table th,
  .blog-content .table-scroll-wrapper table td {
    padding: 8px 10px;
  }
}

  /* ============================================================
     SHARE SECTION
     (only border-color + icon color change on hover, no bg change)
     ============================================================ */
  .share-section {
    margin-top: 40px;
    padding-top: 28px;
    border-top: 1px solid var(--line);
  }
  .share-label {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: .78rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .8px;
    color: var(--ink-dim);
    margin-bottom: 16px;
  }
  .share-label i {
    color: var(--rust);
    font-size: .9rem;
  }

  .share-icons {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
  }

  /* Icon buttons — same dimensions + hover as footer-social */
  .share-icon {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    border: 1px solid var(--line);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: .9rem;
    color: var(--ink-dim);
    cursor: pointer;
    transition: .2s;
    padding: 0;
    font-family: inherit;
    background: transparent;
  }
  .share-icon:hover {
    border-color: var(--rust);
    color: var(--rust);
    transform: translateY(-2px);
  }

  /* Copy-link button success state — only color changes, no bg */
  .share-icon.copied {
    border-color: #27c93f;
    color: #27c93f;
  }

  /* Mobile — slightly tighter gap, keep same icon size */
  @media (max-width: 640px) {
    .share-section {
      margin-top: 32px;
      padding-top: 22px;
    }
    .share-icons {
      gap: 8px;
    }
    .share-label {
      font-size: .72rem;
      margin-bottom: 14px;
    }
  }


/* ============ ADMIN: PORTFOLIO "WHAT WAS INCLUDED" CHECKBOXES ============ */
.checkbox-grid{display:flex; flex-wrap:wrap; gap:10px; margin-top:6px;}
.checkbox-pill{
  display:flex; align-items:center; gap:7px; font-size:.82rem; font-weight:600; color:var(--ink-dim);
  background:var(--panel-2); border:1px solid var(--line); padding:8px 14px; border-radius:20px; cursor:pointer;
  transition:.2s;
}
.checkbox-pill:hover{border-color:var(--rust);}
.checkbox-pill input{width:auto; accent-color:var(--rust); margin:0;}
.checkbox-pill:has(input:checked){background:var(--rust); border-color:var(--rust); color:#fff;}

/* ============ FRONTEND: "WHAT WAS INCLUDED" TAGS ============ */
.included-tags{display:flex; flex-wrap:wrap; gap:8px; margin-top:6px;}
.included-tag{
  display:inline-flex; align-items:center; gap:6px; font-size:.8rem; font-weight:600; color:var(--rust-2);
  background:var(--panel-2); border:1px solid var(--line); padding:6px 13px; border-radius:20px;
}
.included-tag i{font-size:.7rem; color:var(--rust);}



/* ============================================================
     SERVICES IDEXS CARD FOOTER
     ============================================================ */
  .catalog-foot{
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:14px;
    padding-top:16px;
    border-top:1px solid var(--line);
    margin-top:auto;  
  }

  /* Left cluster — the two blocks sit on one row, side by side */
  .svc-meta{
    display:flex;
    align-items:center;
    gap:18px;
    flex-wrap:nowrap;
    min-width:0;
  }

  /* Each block: stacked label + value */
  .svc-info{
    display:inline-flex;
    flex-direction:column;
    gap:3px;
    min-width:0;
    white-space:nowrap;
  }

  /* Vertical divider before the second block (Delivery) */
  .svc-info + .svc-info{
    position:relative;
    padding-left:18px;
  }
  .svc-info + .svc-info::before{
    content:"";
    position:absolute;
    left:0;
    top:0;
    bottom:0;
    width:1px;
    background:var(--line);
  }

  /* Small uppercase label on top */
  .svc-info-label{
    font-size:.62rem;
    font-weight:800;
    letter-spacing:.1em;
    text-transform:uppercase;
    color:var(--ink-dim);
    line-height:1;
  }

  /* Mobile safety — allow delivery to truncate on very tight cards */
  @media (max-width:420px){
    .svc-meta{ gap:14px; }
    .svc-info + .svc-info{ padding-left:14px; }
  }