/* ==========================================================================
   IT Soft BD — UI layer.
   Loaded last, on both the storefront and the admin panel.
   Governs the design system: fluid type, the spacing/radius/shadow scales,
   component polish, motion and accessibility.
   Palette stays strictly to --brand / --gray / --cyan and their derived tints,
   so the Appearance screen keeps control of every colour on the site.
   ========================================================================== */

:root{
  /* ---- fluid type scale (min .. max, viewport-driven) ---- */
  --fs-xs:  clamp(.75rem,  .72rem + .12vw, .8rem);
  --fs-sm:  clamp(.84rem,  .81rem + .14vw, .9rem);
  --fs-md:  clamp(.94rem,  .91rem + .16vw, 1rem);
  --fs-lg:  clamp(1.05rem, .99rem + .3vw,  1.2rem);
  --fs-xl:  clamp(1.25rem, 1.14rem + .55vw, 1.6rem);
  --fs-2xl: clamp(1.55rem, 1.32rem + 1.15vw, 2.35rem);
  --fs-3xl: clamp(1.95rem, 1.55rem + 2vw,    3.2rem);

  /* ---- spacing scale (4pt base, fluid gutters) ---- */
  --s-1:.25rem; --s-2:.5rem;  --s-3:.75rem; --s-4:1rem;
  --s-5:1.5rem; --s-6:2rem;   --s-7:2.75rem; --s-8:3.5rem; --s-9:5rem;
  --gutter: clamp(1rem, .55rem + 2.2vw, 2rem);

  /* ---- radii ---- */
  --r-xs:6px; --r-sm:9px; --r-md:12px; --r-lg:16px; --r-xl:22px; --r-pill:999px;

  /* ---- elevation: hairlines + layered soft shadows, no heavy borders ---- */
  --hairline:1px solid color-mix(in srgb, var(--gray) 14%, #fff);
  --e1:0 1px 2px color-mix(in srgb, var(--gray) 7%, transparent);
  --e2:0 1px 2px color-mix(in srgb, var(--gray) 6%, transparent),
       0 4px 12px -6px color-mix(in srgb, var(--brand) 16%, transparent);
  --e3:0 2px 4px color-mix(in srgb, var(--gray) 6%, transparent),
       0 14px 34px -18px color-mix(in srgb, var(--brand) 28%, transparent);
  --e4:0 3px 6px color-mix(in srgb, var(--gray) 7%, transparent),
       0 28px 60px -30px color-mix(in srgb, var(--brand) 34%, transparent);

  --ring:0 0 0 3px color-mix(in srgb, var(--cyan) 30%, transparent);
  --t-fast:.15s cubic-bezier(.4,0,.2,1);
  --t-base:.25s cubic-bezier(.4,0,.2,1);
  --t-slow:.45s cubic-bezier(.22,1,.36,1);
  --font:ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto,
         "Helvetica Neue", Arial, "Noto Sans", sans-serif;
  --mono:ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
}

/* --------------------------------------------------------------- typography */
html{-webkit-text-size-adjust:100%; scroll-behavior:smooth; scroll-padding-top:88px}
body{
  font-family:var(--font);
  font-size:var(--fs-md);
  line-height:1.65;
  text-rendering:optimizeLegibility;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  font-kerning:normal;
  font-variant-ligatures:common-ligatures;
  color:color-mix(in srgb, var(--gray) 88%, #fff);
}
h1,h2,h3,h4,h5{
  font-family:var(--font);
  font-weight:700;
  line-height:1.15;
  letter-spacing:-.021em;
  text-wrap:balance;                     /* no orphan words in headings */
  color:color-mix(in srgb, var(--gray) 88%, #000);
}
h1{font-size:var(--fs-3xl); letter-spacing:-.028em; line-height:1.08}
h2{font-size:var(--fs-2xl); letter-spacing:-.024em}
h3{font-size:var(--fs-lg)}
h4{font-size:var(--fs-md)}
p,li{text-wrap:pretty}
p{max-width:72ch}
strong,b{font-weight:650}
small{font-size:var(--fs-sm)}
code,kbd,samp,pre{font-family:var(--mono); font-size:.9em}
.num,.table td,.price,.stat b{font-variant-numeric:tabular-nums}
.muted{color:color-mix(in srgb, var(--gray) 62%, #fff)}
.tiny{font-size:var(--fs-xs)}
.small{font-size:var(--fs-sm)}

/* --------------------------------------------------------------- structure */
.wrap{width:100%; max-width:1240px; margin-inline:auto; padding-inline:var(--gutter)}
.blk{padding-block:var(--s-9)}
.blk.tight{padding-block:var(--s-7)}
.blk-head{
  display:flex; align-items:flex-end; justify-content:space-between;
  gap:var(--s-5); margin-bottom:var(--s-6); flex-wrap:wrap;
}
.blk-head h2{max-width:22ch; margin:.1em 0 0}
.blk-head p{margin:.5em 0 0}

/* consistent grid rhythm */
.cards{display:grid; gap:var(--s-5)}
.cards.two{grid-template-columns:repeat(auto-fit,minmax(min(100%,320px),1fr))}
.cards.three{grid-template-columns:repeat(auto-fit,minmax(min(100%,290px),1fr))}
.cards.four{grid-template-columns:repeat(auto-fit,minmax(min(100%,230px),1fr))}
.stack>*+*{margin-top:var(--s-4)}
.row{display:flex; gap:var(--s-3); align-items:center; flex-wrap:wrap}

/* ---------------------------------------------------------------- surfaces */
.card,.a-card,.panel{
  background:#fff;
  border:var(--hairline);
  border-radius:var(--r-lg);
  box-shadow:var(--e1);
  transition:box-shadow var(--t-base), transform var(--t-base), border-color var(--t-base);
}
a.card{color:inherit; text-decoration:none}
a.card:hover,.card.interactive:hover{
  border-color:color-mix(in srgb, var(--cyan) 45%, #fff);
  box-shadow:var(--e3);
  transform:translateY(-3px);
}
.card-ic{
  display:inline-grid; place-items:center;
  width:46px; height:46px; border-radius:var(--r-md);
  background:color-mix(in srgb, var(--brand) 8%, #fff);
  color:var(--brand); margin-bottom:var(--s-3);
  transition:background var(--t-base), color var(--t-base);
}
a.card:hover .card-ic{background:var(--brand); color:#fff}

/* ---------------------------------------------------------------- controls */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:.5em;
  min-height:44px;                            /* comfortable tap target */
  padding:.62em 1.15em;
  border-radius:var(--r-sm);
  font-size:var(--fs-sm); font-weight:600; letter-spacing:.005em;
  border:1px solid transparent; cursor:pointer; white-space:nowrap;
  transition:background var(--t-fast), color var(--t-fast),
             border-color var(--t-fast), box-shadow var(--t-fast), transform var(--t-fast);
}
.btn:active{transform:translateY(1px)}
.btn.lg{min-height:52px; padding:.78em 1.5em; font-size:var(--fs-md)}
.btn.sm{min-height:36px; padding:.42em .85em; font-size:var(--fs-xs)}
.btn.full{width:100%}
.btn:disabled,.btn[aria-disabled=true]{opacity:.5; cursor:not-allowed; transform:none}
.btn .ic{width:1.05em; height:1.05em}

input,select,textarea,button{font:inherit}
input[type=text],input[type=email],input[type=password],input[type=number],
input[type=search],input[type=tel],input[type=url],input[type=date],
input[type=time],select,textarea{
  width:100%; min-height:44px; padding:.6em .8em;
  background:#fff; color:color-mix(in srgb, var(--gray) 92%, #000);
  border:var(--hairline); border-radius:var(--r-sm);
  transition:border-color var(--t-fast), box-shadow var(--t-fast), background var(--t-fast);
}
textarea{min-height:104px; resize:vertical; line-height:1.6}
input:hover,select:hover,textarea:hover{border-color:color-mix(in srgb, var(--gray) 26%, #fff)}
input:focus,select:focus,textarea:focus{
  outline:none; border-color:var(--cyan); box-shadow:var(--ring);
}
.fld,.form label{display:block; margin-bottom:var(--s-4)}
.fld>span,.form label>span,.a-form label>span{
  display:block; margin-bottom:.35em;
  font-size:var(--fs-xs); font-weight:650; letter-spacing:.02em;
  color:color-mix(in srgb, var(--gray) 78%, #fff);
}
:focus-visible{outline:2px solid var(--cyan); outline-offset:2px; border-radius:var(--r-xs)}

/* --------------------------------------------------------------- feedback */
.tag,.pill,.badge{
  display:inline-flex; align-items:center; gap:.35em;
  padding:.2em .6em; border-radius:var(--r-pill);
  font-size:var(--fs-xs); font-weight:650; letter-spacing:.01em;
  background:color-mix(in srgb, var(--brand) 7%, #fff);
  color:color-mix(in srgb, var(--brand) 72%, #000);
}
.tag.ok{background:color-mix(in srgb, var(--cyan) 12%, #fff); color:color-mix(in srgb, var(--cyan) 82%, #000)}
.tag.warn{background:color-mix(in srgb, var(--gray) 8%, #fff); color:var(--gray)}
.eyebrow{
  display:inline-block; font-size:var(--fs-xs); font-weight:700;
  letter-spacing:.15em; text-transform:uppercase;
  color:color-mix(in srgb, var(--cyan) 82%, #000);
}

/* --------------------------------------------------------------- tables */
.table,.a-table,.i-table{width:100%; border-collapse:separate; border-spacing:0; font-size:var(--fs-sm)}
.table th,.a-table th,.i-table th{
  text-align:left; font-size:var(--fs-xs); font-weight:650;
  letter-spacing:.06em; text-transform:uppercase;
  color:color-mix(in srgb, var(--gray) 58%, #fff);
  background:color-mix(in srgb, var(--gray) 5%, #fff);
  padding:.7em .9em; border-bottom:var(--hairline);
  position:sticky; top:0; z-index:1;
}
.table td,.a-table td,.i-table td{
  padding:.75em .9em; border-bottom:var(--hairline);
  vertical-align:middle; color:color-mix(in srgb, var(--gray) 88%, #000);
}
.table tbody tr:last-child td{border-bottom:0}
.table tbody tr{transition:background var(--t-fast)}
.table tbody tr:hover{background:color-mix(in srgb, var(--brand) 4%, #fff)}

/* --------------------------------------------------------------- motion */
.reveal{opacity:0; transform:translateY(14px); transition:opacity .6s var(--t-slow), transform .6s var(--t-slow)}
.reveal.in{opacity:1; transform:none}
.reveal[data-d="1"]{transition-delay:.06s}
.reveal[data-d="2"]{transition-delay:.12s}
.reveal[data-d="3"]{transition-delay:.18s}
.reveal[data-d="4"]{transition-delay:.24s}

/* header settles on scroll */
.site-header{transition:box-shadow var(--t-base), backdrop-filter var(--t-base), background var(--t-base)}
.site-header.stuck{
  background:color-mix(in srgb, #fff 88%, transparent);
  backdrop-filter:saturate(180%) blur(14px);
  -webkit-backdrop-filter:saturate(180%) blur(14px);
  box-shadow:var(--e2);
}

/* --------------------------------------------------------------- skeleton */
.skeleton{
  background:linear-gradient(90deg,
    color-mix(in srgb, var(--gray) 6%, #fff) 25%,
    color-mix(in srgb, var(--gray) 11%, #fff) 37%,
    color-mix(in srgb, var(--gray) 6%, #fff) 63%);
  background-size:400% 100%;
  animation:shimmer 1.4s ease-in-out infinite;
  border-radius:var(--r-sm);
}
@keyframes shimmer{0%{background-position:100% 0}100%{background-position:0 0}}

/* ------------------------------------------------------- admin refinements */
body.admin .a-side{position:sticky; top:0; height:100vh; overflow-y:auto}
body.admin .a-side nav a{
  display:flex; align-items:center; gap:.6em;
  min-height:42px; padding:.55em .85em; border-radius:var(--r-sm);
  font-size:var(--fs-sm); font-weight:520;
  transition:background var(--t-fast), color var(--t-fast);
}
body.admin .a-side nav a.on{font-weight:650}
body.admin .a-side::-webkit-scrollbar{width:8px}
body.admin .a-side::-webkit-scrollbar-thumb{background:rgba(255,255,255,.18); border-radius:8px}
body.admin .a-top{
  position:sticky; top:0; z-index:20;
  background:color-mix(in srgb, #fff 90%, transparent);
  backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px);
}
body.admin .a-top h1{font-size:var(--fs-xl); letter-spacing:-.02em}
body.admin .a-card{padding:var(--s-5)}
body.admin .a-card-head{
  display:flex; align-items:baseline; justify-content:space-between;
  gap:var(--s-4); margin-bottom:var(--s-4);
  padding-bottom:var(--s-3); border-bottom:var(--hairline);
}
body.admin .a-card-head h2{font-size:var(--fs-md); margin:0}
body.admin .a-body{padding:var(--s-5)}
body.admin .stat-row{display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,180px),1fr)); gap:var(--s-4)}
body.admin .stat{
  background:#fff; border:var(--hairline); border-radius:var(--r-md);
  padding:var(--s-4); box-shadow:var(--e1);
}
body.admin .stat b{display:block; font-size:var(--fs-xl); font-weight:750; letter-spacing:-.02em}
body.admin .stat span{font-size:var(--fs-xs); text-transform:uppercase; letter-spacing:.08em; color:color-mix(in srgb, var(--gray) 58%, #fff)}
body.admin .a-toolbar{position:sticky; top:64px; z-index:10; background:color-mix(in srgb, #fff 92%, transparent); backdrop-filter:blur(10px); padding:.5rem 0}

/* management hub grid */
.mg-grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,260px),1fr)); gap:var(--s-4)}
.mg-card{
  display:flex; flex-direction:column; gap:var(--s-3);
  background:#fff; border:var(--hairline); border-radius:var(--r-lg);
  padding:var(--s-5); box-shadow:var(--e1);
  transition:box-shadow var(--t-base), transform var(--t-base), border-color var(--t-base);
}
.mg-card:hover{transform:translateY(-3px); box-shadow:var(--e3); border-color:color-mix(in srgb, var(--cyan) 40%, #fff)}
.mg-head{display:flex; align-items:center; gap:var(--s-3)}
.mg-head .mg-ic{
  display:grid; place-items:center; width:42px; height:42px; flex:none;
  border-radius:var(--r-md); background:color-mix(in srgb, var(--brand) 8%, #fff); color:var(--brand);
}
.mg-head b{font-size:var(--fs-md); color:color-mix(in srgb, var(--gray) 88%, #000)}
.mg-head .mg-n{
  margin-left:auto; font-size:var(--fs-xl); font-weight:750;
  font-variant-numeric:tabular-nums; color:color-mix(in srgb, var(--gray) 88%, #000);
}
.mg-links{display:flex; flex-wrap:wrap; gap:.4em; margin-top:auto}
.mg-links a{
  font-size:var(--fs-xs); font-weight:600; padding:.3em .7em;
  border-radius:var(--r-pill); border:var(--hairline); background:#fff;
  transition:background var(--t-fast), border-color var(--t-fast), color var(--t-fast);
}
.mg-links a:hover{background:color-mix(in srgb, var(--brand) 6%, #fff); border-color:color-mix(in srgb, var(--cyan) 45%, #fff)}
.mg-state{font-size:var(--fs-xs); color:color-mix(in srgb, var(--gray) 58%, #fff)}
.mg-group{margin-bottom:var(--s-6)}
.mg-group>h2{font-size:var(--fs-md); letter-spacing:.02em; margin-bottom:var(--s-4); display:flex; align-items:center; gap:.6em}
.mg-group>h2::after{content:""; flex:1; height:1px; background:var(--hairline)}

/* --------------------------------------------------------------- a11y */
.sr{position:absolute!important; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0}
/* ratings must read as filled stars, not hollow outlines */
.stars .ic{fill:currentColor; stroke-width:0}
.skip{position:absolute; left:-9999px; top:0; z-index:300; background:var(--brand); color:#fff; padding:.7em 1.1em; border-radius:0 0 var(--r-sm) 0}
.skip:focus{left:0}
[aria-busy=true]{cursor:progress}
.acc summary{min-height:44px; display:flex; align-items:center; cursor:pointer}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .reveal{opacity:1!important; transform:none!important}
  *,*::before,*::after{animation-duration:.01ms!important; animation-iteration-count:1!important; transition-duration:.01ms!important}
}
@media (prefers-contrast:more){
  :root{--hairline:1px solid color-mix(in srgb, var(--gray) 45%, #fff)}
}
@media print{
  .site-header,.site-footer,.chat,.to-top,.pre-footer{display:none!important}
  body{background:#fff}
}

/* --------------------------------------------------------------- responsive */
@media (max-width:1024px){
  :root{--gutter:1.1rem}
  body.admin .a-body{padding:var(--s-4)}
}
@media (max-width:760px){
  .blk{padding-block:var(--s-8)}
  .blk-head{margin-bottom:var(--s-5)}
  h1{letter-spacing:-.022em}
  .mg-card{padding:var(--s-4)}
}

/* desktop search needs enough room for its placeholder */
.head-search{flex:1 1 260px; max-width:420px}
.head-search input{min-width:150px}

/* ==========================================================================
   Services page
   ========================================================================== */
.svc-hero{
  padding-block:var(--s-8) var(--s-7);
  background:linear-gradient(180deg, color-mix(in srgb, var(--brand) 6%, #fff) 0%, #fff 100%);
  border-bottom:var(--hairline);
}
.svc-hero-grid{display:grid; grid-template-columns:minmax(0,1.35fr) minmax(0,.65fr); gap:var(--s-7); align-items:start}
.svc-hero h1{font-size:var(--fs-3xl); max-width:20ch; margin:.35em 0 .4em}
.svc-hero .lead{font-size:var(--fs-lg); color:color-mix(in srgb, var(--gray) 74%, #fff); max-width:60ch}
.svc-jump{
  display:flex; flex-direction:column; gap:.15rem;
  background:#fff; border:var(--hairline); border-radius:var(--r-lg);
  padding:var(--s-4); box-shadow:var(--e1);
  position:sticky; top:96px;
}
.svc-jump>span{padding:.2rem .6rem .5rem}
.svc-jump a{
  display:flex; align-items:center; gap:.6em;
  min-height:46px; padding:0 .7em; border-radius:var(--r-sm);
  font-size:var(--fs-sm); font-weight:570; color:color-mix(in srgb, var(--gray) 88%, #000);
  transition:background var(--t-fast), color var(--t-fast);
}
.svc-jump a:hover{background:color-mix(in srgb, var(--brand) 6%, #fff); color:var(--brand)}
.svc-jump a .ic{width:17px; height:17px; color:var(--cyan)}
.svc-jump a b{margin-left:auto; font-size:var(--fs-xs); color:var(--muted)}

/* tech strip */
.tech-strip{background:#fff; border-bottom:var(--hairline); padding-block:var(--s-5)}
.tech-strip .wrap{display:flex; align-items:center; gap:var(--s-4); flex-wrap:wrap}
.tech-label{font-size:var(--fs-xs); font-weight:700; letter-spacing:.13em; text-transform:uppercase; color:var(--muted); flex:none}
.tech-row{display:flex; gap:.4rem; flex-wrap:wrap}
.tech-chip{
  font-size:var(--fs-xs); font-weight:600;
  padding:.32em .72em; border-radius:var(--r-pill);
  background:color-mix(in srgb, var(--gray) 5%, #fff);
  border:var(--hairline); color:color-mix(in srgb, var(--gray) 78%, #000);
}

/* service cards */
.svc-grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,370px),1fr)); gap:var(--s-5)}
.svc-card{
  display:flex; flex-direction:column;
  background:#fff; border:var(--hairline); border-radius:var(--r-lg);
  padding:var(--s-5); box-shadow:var(--e1);
  transition:box-shadow var(--t-base), transform var(--t-base), border-color var(--t-base);
}
.svc-card:hover{transform:translateY(-3px); box-shadow:var(--e3); border-color:color-mix(in srgb, var(--cyan) 42%, #fff)}
.svc-card-head{display:flex; align-items:center; gap:.6rem; margin-bottom:var(--s-4)}
.svc-card-head .card-ic{margin:0}
.svc-cat{background:color-mix(in srgb, var(--gray) 6%, #fff); color:var(--muted)}
.svc-pop{margin-left:auto}
.svc-card h3{margin:0 0 .4em; font-size:var(--fs-lg); letter-spacing:-.015em}
.svc-card h3 a{color:inherit; text-decoration:none}
.svc-card h3 a:hover{color:var(--brand)}
.svc-desc{margin:0 0 var(--s-4); font-size:var(--fs-sm); color:color-mix(in srgb, var(--gray) 70%, #fff)}
.svc-list{list-style:none; margin:0 0 var(--s-5); padding:0; display:grid; gap:.5rem}
.svc-list li{display:flex; gap:.55em; font-size:var(--fs-sm); align-items:flex-start}
.svc-list .ic{width:16px; height:16px; flex:none; margin-top:.22em; color:var(--cyan-700)}
.svc-card-foot{
  display:flex; align-items:center; justify-content:space-between; gap:var(--s-4);
  margin-top:auto; padding-top:var(--s-4); border-top:var(--hairline);
}
.svc-price{display:flex; flex-direction:column; gap:3px; line-height:1.15; font-weight:750; font-size:var(--fs-lg); letter-spacing:-.02em}
.svc-price small{font-size:var(--fs-xs); font-weight:600; letter-spacing:.08em; text-transform:uppercase; color:var(--muted)}

/* engagement models */
.model-card{display:flex; flex-direction:column; gap:.5rem}
.model-card h3{margin:0}
.model-price{font-size:var(--fs-xl); font-weight:750; letter-spacing:-.02em}
.model-card .ticks{margin:.4rem 0 var(--s-5)}
.model-card .btn{margin-top:auto}

/* what you get */
.include-grid{display:grid; grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr); gap:var(--s-7); align-items:start}
.include-list{list-style:none; margin:0; padding:0; display:grid; gap:.1rem}
.include-list li{
  display:flex; gap:1rem; align-items:flex-start;
  padding:var(--s-4) 0; border-bottom:var(--hairline);
  font-size:var(--fs-md); font-weight:520;
}
.include-list li:first-child{border-top:var(--hairline)}
.inc-n{
  flex:none; font-size:var(--fs-xs); font-weight:800; letter-spacing:.06em;
  color:var(--cyan-700); font-variant-numeric:tabular-nums; padding-top:.25em;
}

/* industries */
.industry-row{display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,215px),1fr)); gap:.6rem}
.industry{
  display:flex; align-items:center; gap:.55em;
  padding:.85em 1em; border-radius:var(--r-md);
  background:#fff; border:var(--hairline);
  font-size:var(--fs-sm); font-weight:560;
}
.industry .ic{width:16px; height:16px; color:var(--cyan-700); flex:none}

@media (max-width:1024px){
  .svc-hero-grid{grid-template-columns:1fr; gap:var(--s-6)}
  .svc-jump{position:static; flex-direction:row; flex-wrap:wrap; gap:.4rem; padding:var(--s-3)}
  .svc-jump>span{width:100%}
  .svc-jump a{min-height:40px; border:var(--hairline); border-radius:var(--r-pill); flex:1 1 auto}
  .svc-jump{padding-bottom:var(--s-4); align-content:flex-start}
  .include-grid{grid-template-columns:1fr; gap:var(--s-5)}
}

/* ==========================================================================
   Catalogue — unique style
   ========================================================================== */
.cat-hero{
  padding-block:var(--s-7) var(--s-6);
  background:linear-gradient(180deg, color-mix(in srgb, var(--brand) 7%, #fff) 0%, #fff 100%);
  border-bottom:var(--hairline);
}
.cat-hero-top{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,440px); gap:var(--s-6); align-items:end}
.cat-hero h1{font-size:var(--fs-2xl); margin:.25em 0 .3em}
.cat-hero .lead{font-size:var(--fs-md); color:color-mix(in srgb, var(--gray) 68%, #fff); margin:0}
.cat-search{display:flex; gap:.5rem}
.cat-search input{
  flex:1; min-height:52px; border-radius:var(--r-md);
  background:#fff; box-shadow:var(--e1); border:var(--hairline);
}
.cat-search button{
  min-height:52px; width:56px; display:grid; place-items:center;
  border:0; border-radius:var(--r-md); background:var(--brand); color:#fff; cursor:pointer;
  transition:background var(--t-fast);
}
.cat-search button:hover{background:var(--blue-950)}

/* quick filter pills */
.quick-pills{display:flex; gap:.45rem; flex-wrap:wrap; margin-top:var(--s-5)}
.qpill{
  font-size:var(--fs-sm); font-weight:600; padding:.5em 1em;
  border-radius:var(--r-pill); border:var(--hairline); background:#fff; color:color-mix(in srgb, var(--gray) 84%, #000);
  transition:background var(--t-fast), color var(--t-fast), border-color var(--t-fast);
}
.qpill:hover{border-color:color-mix(in srgb, var(--cyan) 50%, #fff); color:var(--brand)}
.qpill.is-on{background:var(--brand); border-color:var(--brand); color:#fff}

/* bento category grid */
.cat-bento{
  display:grid; gap:var(--s-3); margin-top:var(--s-5);
  grid-template-columns:repeat(auto-fit, minmax(min(100%,190px), 1fr));
}
.bento-tile{
  display:flex; flex-direction:column; gap:.15rem;
  padding:var(--s-4); border-radius:var(--r-lg);
  background:#fff; border:var(--hairline); box-shadow:var(--e1);
  transition:transform var(--t-base), box-shadow var(--t-base), border-color var(--t-base);
  position:relative; overflow:hidden;
}
.bento-tile::after{
  content:""; position:absolute; inset:auto auto -30px -30px;
  width:90px; height:90px; border-radius:50%;
  background:color-mix(in srgb, var(--brand) 8%, #fff); transition:transform var(--t-slow);
}
.bento-tile:hover{transform:translateY(-3px); box-shadow:var(--e3); border-color:color-mix(in srgb, var(--cyan) 45%, #fff)}
.bento-tile:hover::after{transform:scale(1.35)}
.bento-tile.is-on{border-color:var(--brand); box-shadow:0 0 0 3px color-mix(in srgb, var(--brand) 12%, transparent), var(--e2)}
.bento-ic{
  display:grid; place-items:center; width:40px; height:40px; border-radius:var(--r-sm);
  background:color-mix(in srgb, var(--brand) 8%, #fff); color:var(--brand); margin-bottom:.5rem;
  position:relative; z-index:1;
}
.bento-tile b{font-size:var(--fs-md); position:relative; z-index:1; color:color-mix(in srgb, var(--gray) 88%, #000)}
.bento-n{font-size:var(--fs-xs); color:var(--muted); position:relative; z-index:1}

/* spotlight */
.spotlight-wrap{padding-top:var(--s-7)}
.spotlight{
  display:grid; grid-template-columns:minmax(0,.95fr) minmax(0,1.05fr);
  border:var(--hairline); border-radius:var(--r-xl); overflow:hidden;
  background:#fff; box-shadow:var(--e3);
}
.spot-media{display:block; position:relative; min-height:100%}
.spot-media .spot-img{width:100%; height:100%; object-fit:cover; display:block}
.spot-body{padding:var(--s-6); display:flex; flex-direction:column; gap:var(--s-4)}
.spot-flag{
  display:inline-flex; align-items:center; gap:.4em; align-self:flex-start;
  font-size:var(--fs-xs); font-weight:750; letter-spacing:.12em; text-transform:uppercase;
  color:#fff; background:var(--grad); padding:.35em .8em; border-radius:var(--r-pill);
}
.spot-flag .ic{width:14px; height:14px}
.spot-body h2{font-size:var(--fs-xl); margin:0; letter-spacing:-.022em}
.spot-body h2 a{color:inherit; text-decoration:none}
.spot-body h2 a:hover{color:var(--brand)}
.spot-body>p{margin:0; color:color-mix(in srgb, var(--gray) 70%, #fff)}
.spot-points{list-style:none; margin:0; padding:0; display:grid; gap:.5rem}
.spot-points li{display:flex; gap:.55em; font-size:var(--fs-sm); align-items:flex-start}
.spot-points .ic{width:16px; height:16px; flex:none; margin-top:.2em; color:var(--cyan-700)}
.spot-foot{
  display:flex; align-items:center; gap:var(--s-4); flex-wrap:wrap;
  margin-top:auto; padding-top:var(--s-4); border-top:var(--hairline);
}
.spot-price{display:flex; align-items:baseline; gap:.5em}
.spot-price b{font-size:var(--fs-xl); font-weight:780; letter-spacing:-.025em}
.spot-price s{font-size:var(--fs-sm); color:var(--muted)}
.spot-foot .btn{margin-left:auto}

/* toolbar */
.catalogue{padding-block:var(--s-6) var(--s-8)}
.ptool{
  display:flex; align-items:center; justify-content:space-between; gap:var(--s-4);
  flex-wrap:wrap; padding-bottom:var(--s-4); border-bottom:var(--hairline); position:relative;
}
.ptool-l{display:flex; align-items:center; gap:var(--s-3); flex-wrap:wrap; min-width:0}
.ptool-count{font-size:var(--fs-md); color:color-mix(in srgb, var(--gray) 88%, #000)}
.ptool-r{display:flex; align-items:center; gap:var(--s-3); flex-wrap:wrap}
.active-chips{display:flex; gap:.35rem; flex-wrap:wrap}
.fchip{
  display:inline-flex; align-items:center; gap:.4em;
  font-size:var(--fs-xs); font-weight:600; padding:.35em .6em;
  border-radius:var(--r-pill); background:color-mix(in srgb, var(--brand) 7%, #fff);
  color:color-mix(in srgb, var(--brand) 78%, #000);
  border:1px solid color-mix(in srgb, var(--brand) 14%, #fff);
}
.fchip .ic{width:12px; height:12px; opacity:.7}
.fchip:hover{background:color-mix(in srgb, var(--brand) 12%, #fff)}
.fchip.clear{background:#fff; border:var(--hairline); color:var(--muted)}

.sortpills{display:flex; gap:.25rem; background:color-mix(in srgb, var(--gray) 5%, #fff); padding:.22rem; border-radius:var(--r-pill); border:var(--hairline)}
.spill{font-size:var(--fs-xs); font-weight:620; padding:.42em .8em; border-radius:var(--r-pill); color:color-mix(in srgb, var(--gray) 72%, #fff); transition:background var(--t-fast), color var(--t-fast); white-space:nowrap}
.spill:hover{color:var(--brand)}
.spill.is-on{background:#fff; color:var(--brand); box-shadow:var(--e1)}

.filter-open{
  display:inline-flex; align-items:center; gap:.45em;
  min-height:40px; padding:0 1rem;
  border:var(--hairline); border-radius:var(--r-pill); background:#fff;
  font-size:var(--fs-sm); font-weight:620; color:color-mix(in srgb, var(--gray) 84%, #000); cursor:pointer;
}
.filter-open:hover{border-color:color-mix(in srgb, var(--cyan) 45%, #fff); color:var(--brand)}
.filter-open .ic{width:16px; height:16px}
.filter-open b{
  background:var(--cyan); color:#083344; border-radius:var(--r-pill);
  font-size:var(--fs-xs); padding:.1em .5em; font-variant-numeric:tabular-nums;
}

.viewtoggle{display:flex; gap:.15rem; background:color-mix(in srgb, var(--gray) 5%, #fff); padding:.22rem; border-radius:var(--r-sm); border:var(--hairline)}
.viewtoggle button{
  display:grid; place-items:center; width:36px; height:32px;
  border:0; background:transparent; border-radius:7px; color:var(--muted); cursor:pointer;
  transition:background var(--t-fast), color var(--t-fast);
}
.viewtoggle button.is-on{background:#fff; color:var(--brand); box-shadow:var(--e1)}
.viewtoggle .ic{width:16px; height:16px}

/* filters panel: hidden until opened (mobile turns it into a bottom sheet) */
.filters{display:none}
.filters.is-open{
  display:block; position:absolute; z-index:60;
  top:calc(100% + .6rem); right:0; width:min(420px, 92vw);
  background:#fff; border:var(--hairline); border-radius:var(--r-lg);
  box-shadow:var(--e4); padding:var(--s-5);
  max-height:70vh; overflow-y:auto;
}
.filters.is-open .fgroup:first-of-type{margin-top:0}
.fgroup-actions{display:flex; gap:.5rem; margin-top:var(--s-4)}
.fgroup-actions .btn{flex:1}
.fgroup-actions .btn.ghost{flex:0 0 auto}

/* product list + tiles */
.plist{display:grid; gap:var(--s-5); margin-top:var(--s-5); grid-template-columns:repeat(auto-fit, minmax(min(100%,330px), 1fr))}
.ptile{
  position:relative; display:flex; flex-direction:column;
  background:#fff; border:var(--hairline); border-radius:var(--r-lg);
  overflow:hidden; box-shadow:var(--e1);
  transition:box-shadow var(--t-base), transform var(--t-base), border-color var(--t-base);
}
.ptile:hover{transform:translateY(-4px); box-shadow:var(--e3); border-color:color-mix(in srgb, var(--cyan) 40%, #fff)}
.ptile-n{
  position:absolute; top:.6rem; right:.7rem; z-index:3;
  font-size:var(--fs-xs); font-weight:800; letter-spacing:.06em;
  color:#fff; mix-blend-mode:overlay;
}
.ptile-media{position:relative; display:block; aspect-ratio:16/10; overflow:hidden; background:color-mix(in srgb, var(--brand) 6%, #fff)}
.ptile-media .ptile-img{width:100%; height:100%; object-fit:cover; display:block; transition:transform var(--t-slow)}
.ptile:hover .ptile-media .ptile-img{transform:scale(1.045)}
.ptile-cat,.ptile-off,.ptile-star{
  position:absolute; z-index:2; font-size:var(--fs-xs); font-weight:700;
  border-radius:var(--r-pill); padding:.28em .65em;
}
.ptile-cat{top:.6rem; left:.6rem; background:rgba(255,255,255,.92); color:color-mix(in srgb, var(--gray) 88%, #000); backdrop-filter:blur(6px)}
.ptile-off{bottom:.6rem; right:.6rem; background:var(--cyan); color:#083344; font-variant-numeric:tabular-nums}
.ptile-star{bottom:.6rem; left:.6rem; background:rgba(30,58,138,.88); color:#fff; display:inline-flex; align-items:center; gap:.3em; backdrop-filter:blur(6px)}
.ptile-star .ic{width:11px; height:11px; fill:currentColor; stroke-width:0}
.ptile-body{padding:var(--s-4) var(--s-5) var(--s-5); display:flex; flex-direction:column; gap:.55rem; flex:1}
.ptile-body h3{margin:0; font-size:var(--fs-md); line-height:1.32; letter-spacing:-.012em}
.ptile-body h3 a{color:inherit; text-decoration:none}
.ptile-body h3 a:hover{color:var(--brand)}
.ptile-desc{margin:0; font-size:var(--fs-sm); color:color-mix(in srgb, var(--gray) 66%, #fff);
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden}
.ptile-specs{display:flex; gap:.3rem; flex-wrap:wrap}
.spec-chip{
  font-size:var(--fs-xs); font-weight:560; padding:.24em .58em; border-radius:var(--r-xs);
  background:color-mix(in srgb, var(--gray) 5%, #fff); border:var(--hairline);
  color:color-mix(in srgb, var(--gray) 70%, #fff);
}
.ptile-meta{display:flex; align-items:center; gap:.4rem; font-size:var(--fs-xs); margin-top:auto}
.ptile-meta .dot{width:3px; height:3px; border-radius:50%; background:var(--gray-400)}
.ptile-foot{
  display:flex; align-items:center; justify-content:space-between; gap:var(--s-3);
  padding-top:var(--s-3); border-top:var(--hairline);
}
.ptile-price{display:flex; align-items:baseline; gap:.4em; flex-wrap:wrap}
.ptile-price b{font-size:var(--fs-lg); font-weight:760; letter-spacing:-.022em}
.ptile-price s{font-size:var(--fs-xs); color:var(--muted)}
.ptile-acts{display:flex; align-items:center; gap:.35rem}
.ptile-acts form{margin:0}
.btn.icon{padding:.4em .5em; min-width:38px}
.btn.icon .ic{width:16px; height:16px}

/* list view */
.plist.is-list{grid-template-columns:1fr}
.plist.is-list .ptile{flex-direction:row; align-items:stretch}
.plist.is-list .ptile-media{flex:0 0 260px; aspect-ratio:auto}
.plist.is-list .ptile-body{justify-content:center}
.plist.is-list .ptile-desc{-webkit-line-clamp:3}

/* empty state */
.empty{text-align:center; padding:var(--s-9) var(--s-5); align-items:center; display:flex; flex-direction:column; gap:.6rem}
.empty-ic{
  display:grid; place-items:center; width:58px; height:58px; border-radius:var(--r-lg);
  background:color-mix(in srgb, var(--brand) 7%, #fff); color:var(--brand); margin-bottom:.4rem;
}
.empty-ic .ic{width:26px; height:26px}

@media (max-width:1024px){
  .cat-hero-top{grid-template-columns:1fr; gap:var(--s-4); align-items:start}
  .spotlight{grid-template-columns:1fr}
  .spot-media{aspect-ratio:16/9}
  .spot-body{padding:var(--s-5)}
  .spot-foot .btn{margin-left:0; width:100%}
  .plist.is-list .ptile-media{flex:0 0 180px}
}