/* ========== Categories — soft topic cards (desktop + mobile) ========== */
.section-categories.style-soft,
.section-categories.style-minimal,
.section-categories.style-outline,
.section-categories.style-showcase,
.section-categories.style-aurora,
.section-categories.style-frost,
.section-categories.style-photo{
  --cat-cols-d:3;
  --cat-cols-m:2;
  --cat-gap:16px;
  --cat-gap-m:12px;
  --cat-title-size:14px;
  --cat-title-size-m:13px;
  --cat-img-scale:72%;
  --cat-img-scale-m:68%;
  --cat-radius:20px;
  --cat-pad-d:18px;
  --cat-pad-m:14px;
  --cat-card-bg:#F0F4F7;
  --cat-title-color:#0b1526;
  --cat-stagger:90ms;
  padding-block:8px 4px;
}
.section-categories.style-soft .section-head,
.section-categories.style-minimal .section-head,
.section-categories.style-outline .section-head,
.section-categories.style-showcase .section-head,
.section-categories.style-aurora .section-head,
.section-categories.style-frost .section-head,
.section-categories.style-photo .section-head{
  margin-bottom:22px;
}

/* ========== Photo + glass title button (reference layout) ========== */
.section-categories.style-photo{
  --cat-card-bg:transparent;
  --cat-btn-bg:#e8f4fa;
  --cat-btn-border:#c5e4f2;
  --cat-desc-color:#6b7d90;
  --cat-arrow-bg:#d4eef8;
  --cat-arrow-color:#0b6f8a;
  --cat-btn-radius:22px;
  --cat-title-weight:850;
  --cat-btn-overlap:8px;
  padding-block:clamp(12px, 2vw, 28px);
  background:transparent;
}
.section-categories.style-photo .cats-showcase{
  max-width:1120px;
  gap:var(--cat-gap, 22px);
}
.section-categories.style-photo .cats-showcase > li{
  background:transparent !important;
  border:0 !important;
  box-shadow:none !important;
}
.section-categories.style-photo .cat-photo{
  display:flex;
  flex-direction:column;
  align-items:stretch;
  gap:0;
  text-decoration:none;
  color:var(--cat-title-color, #0b1526);
  width:100%;
  min-width:0;
  background:transparent !important;
  border:0 !important;
  box-shadow:none !important;
  padding:0 !important;
  border-radius:0 !important;
}
.section-categories.style-photo .cat-photo::before,
.section-categories.style-photo .cat-photo::after{
  content:none !important;
  display:none !important;
}
/* Floating cutout image — no square card */
.section-categories.style-photo .cat-photo-frame{
  display:block;
  width:100%;
  aspect-ratio:1 / 1;
  border-radius:0 !important;
  overflow:visible !important;
  background:transparent !important;
  border:0 !important;
  box-shadow:none !important;
  z-index:1;
  transition:transform .4s cubic-bezier(.22,1,.36,1);
}
.section-categories.style-photo .cat-photo-frame img{
  width:var(--cat-img-scale, 92%);
  height:var(--cat-img-scale, 92%);
  margin-inline:auto;
  object-fit:contain;
  object-position:center bottom;
  display:block;
  background:transparent !important;
  border:0 !important;
  filter:drop-shadow(0 10px 20px rgba(8,32,56,.14)) drop-shadow(0 22px 40px rgba(8,40,70,.1));
  transition:transform .45s cubic-bezier(.22,1,.36,1), filter .45s;
}
/* Glass button stuck under the image */
.section-categories.style-photo .cat-glass-btn{
  position:relative;
  z-index:2;
  display:flex;
  flex-direction:column;
  gap:8px;
  margin-top:calc(var(--cat-btn-overlap, 8px) * -1);
  padding:14px 14px 14px 16px;
  border-radius:var(--cat-btn-radius, 22px);
  background:
    linear-gradient(165deg, rgba(255,255,255,.92) 0%, color-mix(in srgb, var(--cat-btn-bg, #e8f4fa) 88%, #fff) 100%);
  backdrop-filter:blur(14px) saturate(1.25);
  -webkit-backdrop-filter:blur(14px) saturate(1.25);
  border:1px solid var(--cat-btn-border, #c5e4f2);
  box-shadow:
    0 1px 0 rgba(255,255,255,.9) inset,
    0 12px 28px rgba(20,80,120,.1);
  transition:transform .3s, box-shadow .3s, border-color .3s;
}
.section-categories.style-photo .cat-glass-bar{
  display:block;
  width:34px;
  height:3px;
  border-radius:999px;
  background:var(--cat-underline, #00a8c1);
}
.section-categories.style-photo.is-barless .cat-glass-bar{display:none}
.section-categories.style-photo .cat-glass-row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
}
.section-categories.style-photo .cat-glass-text{
  display:flex;
  flex-direction:column;
  gap:4px;
  min-width:0;
  flex:1 1 auto;
  text-align:start;
}
.section-categories.style-photo .cat-glass-title{
  display:block;
  font-size:var(--cat-title-size, 16px);
  font-weight:var(--cat-title-weight, 850);
  color:var(--cat-title-color, #0b1526);
  line-height:1.3;
  letter-spacing:-.02em;
}
.section-categories.style-photo .cat-glass-desc{
  display:block;
  font-size:12px;
  line-height:1.55;
  font-weight:600;
  color:var(--cat-desc-color, #6b7d90);
}
.section-categories.style-photo.is-nodesc .cat-glass-desc{display:none}
.section-categories.style-photo .cat-glass-go{
  flex:0 0 auto;
  width:38px;
  height:38px;
  border-radius:50%;
  display:grid;
  place-items:center;
  background:var(--cat-arrow-bg, #d4eef8);
  color:var(--cat-arrow-color, #0b6f8a);
  box-shadow:0 6px 14px rgba(0,168,193,.16);
  transition:transform .25s, background .25s, color .25s;
}
.section-categories.style-photo .cat-glass-go svg{
  width:16px;height:16px;display:block;
}
html[dir="rtl"] .section-categories.style-photo .cat-glass-go svg{
  transform:scaleX(-1);
}
.section-categories.style-photo.is-noarrow .cat-glass-go{display:none}
.section-categories.style-photo .cat-photo:hover .cat-photo-frame{
  transform:translateY(-4px);
}
.section-categories.style-photo .cat-photo:hover .cat-photo-frame img{
  transform:scale(1.03);
  filter:drop-shadow(0 14px 26px rgba(8,32,56,.16)) drop-shadow(0 28px 48px rgba(0,140,170,.12));
}
.section-categories.style-photo .cat-photo:hover .cat-glass-btn{
  border-color:color-mix(in srgb, var(--cat-underline, #00a8c1) 45%, var(--cat-btn-border, #c5e4f2));
  box-shadow:
    0 1px 0 rgba(255,255,255,.95) inset,
    0 16px 36px rgba(0,140,170,.14);
}
.section-categories.style-photo .cat-photo:hover .cat-glass-go{
  background:var(--cat-underline, #00a8c1);
  color:#041018;
  transform:scale(1.06);
}
@media (max-width:780px){
  .section-categories.style-photo .cat-photo-frame img{
    width:var(--cat-img-scale-m, 88%);
    height:var(--cat-img-scale-m, 88%);
    filter:drop-shadow(0 8px 16px rgba(8,32,56,.12)) drop-shadow(0 16px 28px rgba(8,40,70,.08));
  }
  .section-categories.style-photo .cat-glass-btn{
    padding:12px;
    border-radius:calc(var(--cat-btn-radius, 22px) - 4px);
  }
  .section-categories.style-photo .cat-glass-title{
    font-size:var(--cat-title-size-m, 14px);
  }
  .section-categories.style-photo .cat-glass-desc{
    font-size:11px;
  }
  .section-categories.style-photo .cat-glass-go{
    width:34px;height:34px;
  }
  .section-categories.style-photo .cat-photo:hover .cat-photo-frame{
    transform:none;
  }
}
.section-categories.is-headless .section-head{display:none}
.section-categories.is-barless .cat-arch-bar{display:none}

.cats-showcase,
.cats-soft,
.cats-logos{
  display:grid;
  grid-template-columns:repeat(var(--cat-cols-d, 3), minmax(0, 1fr));
  gap:var(--cat-gap, 16px);
  align-items:stretch;
  justify-items:stretch;
  max-width:1080px;
  margin-inline:auto;
  list-style:none;
  padding:0;
  margin-block:0;
}
.cats-showcase > li{
  min-width:0;
  display:flex;
  height:100%;
}
.cats-showcase > li > .cat-arch,
.cats-showcase > li > .cat-photo{
  flex:1 1 auto;
  width:100%;
}
.cats-showcase.cats-count-1{grid-template-columns:minmax(0,240px);justify-content:center}
.cats-showcase.cats-count-2{grid-template-columns:repeat(2,minmax(0,1fr));max-width:560px}
.cats-showcase.cats-count-3{grid-template-columns:repeat(3,minmax(0,1fr));max-width:820px}
.cats-showcase.cats-count-4{grid-template-columns:repeat(4,minmax(0,1fr));max-width:980px}
.cats-showcase.cats-count-5{grid-template-columns:repeat(5,minmax(0,1fr))}
.cats-showcase.cats-count-6{grid-template-columns:repeat(var(--cat-cols-d, 3), minmax(0, 1fr))}
.cats-showcase.cats-count-7,
.cats-showcase.cats-count-8{grid-template-columns:repeat(4,minmax(0,1fr))}

.section-categories.cats-d-cols-2 .cats-showcase{grid-template-columns:repeat(2,minmax(0,1fr));max-width:640px}
.section-categories.cats-d-cols-3 .cats-showcase{grid-template-columns:repeat(3,minmax(0,1fr))}
.section-categories.cats-d-cols-4 .cats-showcase{grid-template-columns:repeat(4,minmax(0,1fr));max-width:1100px}
.section-categories.cats-d-cols-5 .cats-showcase{grid-template-columns:repeat(5,minmax(0,1fr));max-width:1200px}
.section-categories.cats-d-cols-6 .cats-showcase{grid-template-columns:repeat(6,minmax(0,1fr));max-width:1280px}

.cat-arch{
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:flex-start;
  text-align:center;
  text-decoration:none;
  color:var(--midnight,#0b1526);
  background:var(--cat-card-bg, #F0F4F7);
  border-radius:var(--cat-radius, 20px);
  padding:var(--cat-pad-d, 18px) calc(var(--cat-pad-d, 18px) * .75) calc(var(--cat-pad-d, 18px) * .85);
  border:1px solid rgba(8,20,38,.05);
  box-shadow:0 1px 0 rgba(255,255,255,.7) inset, 0 10px 28px rgba(8,20,38,.05);
  transition:transform .35s cubic-bezier(.22,1,.36,1), box-shadow .35s ease, border-color .25s ease, background .25s ease;
  min-width:0;
  width:100%;
  max-width:none;
  position:relative;
  overflow:hidden;
  -webkit-tap-highlight-color:transparent;
  isolation:isolate;
}
.cat-arch::before{
  content:"";
  position:absolute;
  inset:0;
  background:radial-gradient(120% 80% at 50% 0%, rgba(255,255,255,.55), transparent 62%);
  pointer-events:none;
  z-index:0;
}
.cat-tile-arrow{display:none}
.cat-arch:hover{
  transform:translateY(-5px);
  box-shadow:0 1px 0 rgba(255,255,255,.85) inset, 0 18px 40px rgba(8,20,38,.1);
  border-color:rgba(0,168,193,.18);
}
.cat-arch:focus-visible{
  outline:2px solid var(--cyan,#00a8c1);
  outline-offset:3px;
}
.cat-arch-frame{
  width:100%;
  aspect-ratio:1 / 1;
  border-radius:calc(var(--cat-radius, 20px) - 6px);
  background:var(--cat-arch-bg, transparent);
  display:grid;
  place-items:center;
  overflow:hidden;
  position:relative;
  z-index:1;
  margin-bottom:12px;
}
.cat-arch-frame img{
  width:var(--cat-img-scale, 72%);
  height:var(--cat-img-scale, 72%);
  object-fit:contain;
  object-position:center;
  position:relative;
  z-index:1;
  transition:transform .4s cubic-bezier(.22,1,.36,1);
  /* Blend white logo boxes into soft card bg */
  mix-blend-mode:multiply;
  filter:contrast(1.02);
}
.cat-arch:hover .cat-arch-frame img{transform:scale(1.05)}
.cat-arch-title{
  margin:0;
  position:relative;
  z-index:1;
  display:block;
  font-size:var(--cat-title-size, 14px);
  font-weight:800;
  color:var(--cat-title-color, #0b1526);
  line-height:1.45;
  letter-spacing:-.015em;
  max-width:15em;
}
.cat-arch-glow{display:none}

/* Stagger appear — replays whenever section re-enters the viewport */
.section-categories.has-cat-stagger .cat-stagger{
  opacity:0;
  transform:translateY(16px) scale(.97);
  will-change:transform, opacity;
}
.section-categories.has-cat-stagger.is-cats-out .cat-stagger{
  opacity:0;
  transform:translateY(18px) scale(.96);
  animation:none;
  transition:opacity .35s ease, transform .35s ease;
}
.section-categories.has-cat-stagger.is-cats-in .cat-stagger{
  animation:catStaggerIn .65s cubic-bezier(.22,1,.36,1) both;
  animation-delay:calc(var(--cat-i, 0) * var(--cat-stagger, 70ms));
}
.section-categories.has-cat-stagger.is-cats-in .cat-stagger .cat-photo-frame img,
.section-categories.has-cat-stagger.is-cats-in .cat-stagger .cat-arch-frame img{
  animation:catFloatIn .7s cubic-bezier(.22,1,.36,1) both;
  animation-delay:calc(var(--cat-i, 0) * var(--cat-stagger, 70ms) + 40ms);
}
@keyframes catStaggerIn{
  0%{opacity:0;transform:translateY(16px) scale(.97)}
  100%{opacity:1;transform:translateY(0) scale(1)}
}
@keyframes catFloatIn{
  0%{transform:translateY(8px) scale(.98);opacity:.7}
  100%{transform:none;opacity:1}
}
@media (max-width:760px){
  .section-categories.has-cat-stagger .cat-stagger{
    transform:translateY(22px) scale(.95);
  }
  .section-categories.has-cat-stagger.is-cats-in .cat-stagger{
    animation-duration:.7s;
  }
  .section-categories.has-cat-stagger.is-cats-in .cat-glass-btn,
  .section-categories.has-cat-stagger.is-cats-in .cat-frost-meta{
    animation:catMetaIn .55s cubic-bezier(.22,1,.36,1) both;
    animation-delay:calc(var(--cat-i, 0) * var(--cat-stagger, 70ms) + 90ms);
  }
}
@keyframes catMetaIn{
  0%{opacity:0;transform:translateY(10px)}
  100%{opacity:1;transform:none}
}
@media (prefers-reduced-motion:reduce){
  .section-categories.has-cat-stagger .cat-stagger,
  .section-categories.has-cat-stagger.is-cats-in .cat-stagger,
  .section-categories.has-cat-stagger.is-cats-out .cat-stagger,
  .section-categories.has-cat-stagger.is-cats-in .cat-stagger .cat-photo-frame img,
  .section-categories.has-cat-stagger.is-cats-in .cat-stagger .cat-arch-frame img,
  .section-categories.has-cat-stagger.is-cats-in .cat-glass-btn,
  .section-categories.has-cat-stagger.is-cats-in .cat-frost-meta{
    animation:none !important;
    opacity:1 !important;
    transform:none !important;
    filter:none !important;
    will-change:auto;
  }
}

/* Aurora — creative branded look */
.section-categories.style-aurora .cat-arch{
  background:
    linear-gradient(165deg, rgba(255,255,255,.92), rgba(240,244,247,.96)),
    var(--cat-card-bg, #F0F4F7);
  border:1px solid rgba(0,168,193,.12);
  box-shadow:
    0 1px 0 rgba(255,255,255,.85) inset,
    0 14px 32px rgba(8,20,38,.07);
  overflow:hidden;
}
.section-categories.style-aurora .cat-arch-glow{
  display:block;
  position:absolute;
  inset:-40% -20% auto;
  height:70%;
  background:radial-gradient(ellipse at 50% 0%, rgba(0,168,193,.22), transparent 68%);
  pointer-events:none;
  z-index:0;
  opacity:.85;
  transition:opacity .35s ease, transform .45s ease;
}
.section-categories.style-aurora .cat-arch:hover .cat-arch-glow,
.section-categories.style-aurora .cat-arch:focus-visible .cat-arch-glow{
  opacity:1;
  transform:translateY(6%) scale(1.05);
}
.section-categories.style-aurora .cat-arch-frame{
  border-radius:calc(var(--cat-radius, 22px) - 4px);
  background:
    radial-gradient(circle at 50% 40%, rgba(255,255,255,.9), transparent 62%),
    var(--cat-arch-bg, rgba(0,168,193,.06));
  box-shadow:0 0 0 1px rgba(0,168,193,.1) inset;
}
.section-categories.style-aurora .cat-arch-frame::after{
  content:"";
  position:absolute;
  inset:8%;
  border-radius:inherit;
  border:1px dashed rgba(0,168,193,.18);
  pointer-events:none;
  z-index:0;
  opacity:.7;
  transition:opacity .3s, transform .4s;
}
.section-categories.style-aurora .cat-arch:hover .cat-arch-frame::after{
  opacity:1;
  transform:scale(1.03);
}
.section-categories.style-aurora .cat-arch:hover{
  transform:translateY(-7px);
  border-color:rgba(0,168,193,.28);
  box-shadow:
    0 1px 0 rgba(255,255,255,.9) inset,
    0 22px 44px rgba(0,168,193,.14),
    0 10px 28px rgba(8,20,38,.08);
}
.section-categories.style-aurora .cat-arch-title{
  color:var(--cat-title-color, #0b1526);
  transition:color .25s ease;
}
.section-categories.style-aurora .cat-arch:hover .cat-arch-title{
  color:var(--cat-underline, #00a8c1);
}

/* ========== Frost glass category cards (homepage reference) ========== */
.section-categories.style-frost{
  --cat-card-bg:#f4f8fb;
  --cat-radius:32px;
  position:relative;
  padding-block:clamp(22px, 3.5vw, 44px) clamp(16px, 2.8vw, 32px);
  background:
    radial-gradient(85% 60% at 50% -10%, rgba(170, 220, 240, .7), transparent 62%),
    radial-gradient(60% 50% at 100% 80%, rgba(200, 230, 245, .45), transparent 55%),
    linear-gradient(180deg, #e4f2f9 0%, #eef6fb 38%, #f5f9fc 100%);
  border-radius:0;
  overflow:hidden;
}
.section-categories.style-frost .container{
  position:relative;
  z-index:1;
}
.section-categories.style-frost .cats-showcase{
  max-width:1120px;
  gap:var(--cat-gap, 22px);
}
.section-categories.style-frost .cat-arch.cat-frost,
.section-categories.style-frost .cat-frost{
  align-items:stretch;
  text-align:start;
  background:
    linear-gradient(160deg, rgba(255,255,255,.78) 0%, rgba(245,250,253,.72) 55%, rgba(236,245,250,.68) 100%);
  backdrop-filter:blur(18px) saturate(1.35);
  -webkit-backdrop-filter:blur(18px) saturate(1.35);
  border:1px solid rgba(255,255,255,.88);
  border-radius:var(--cat-radius, 32px);
  padding:var(--cat-pad-d, 22px);
  box-shadow:
    0 1px 0 rgba(255,255,255,.95) inset,
    0 0 0 1px rgba(160,210,230,.18),
    0 20px 44px rgba(8,40,64,.08);
  overflow:hidden;
  min-height:0;
}
.section-categories.style-frost .cat-arch::before{
  opacity:.55;
  background:radial-gradient(120% 80% at 50% 0%, rgba(255,255,255,.7), transparent 65%);
}
.section-categories.style-frost .cat-arch-glow{
  display:block;
  position:absolute;
  left:50%;
  top:8%;
  width:78%;
  height:48%;
  transform:translateX(-50%);
  background:radial-gradient(circle at 50% 50%, rgba(140,210,230,.5), rgba(140,210,230,.14) 45%, transparent 72%);
  pointer-events:none;
  z-index:0;
  opacity:1;
  filter:blur(2px);
  border-radius:50%;
}
.section-categories.style-frost .cat-arch-frame{
  position:relative;
  z-index:1;
  aspect-ratio:1.05 / 1;
  width:86%;
  margin:4px auto 16px;
  border-radius:50%;
  background:
    linear-gradient(165deg, rgba(255,255,255,.55), rgba(220,238,248,.35));
  box-shadow:
    0 1px 0 rgba(255,255,255,.85) inset,
    0 12px 28px rgba(20,80,110,.08);
  display:grid;
  place-items:center;
  overflow:hidden;
}
.section-categories.style-frost .cat-arch-frame img{
  width:var(--cat-img-scale, 78%);
  height:var(--cat-img-scale, 78%);
  object-fit:contain;
  mix-blend-mode:normal;
  filter:drop-shadow(0 12px 20px rgba(8,32,56,.14));
  transition:transform .5s cubic-bezier(.22,1,.36,1);
}
.section-categories.style-frost .cat-arch:hover .cat-arch-frame img{
  transform:scale(1.07) translateY(-5px);
}
.section-categories.style-frost .cat-frost-meta{
  position:relative;
  z-index:1;
  display:flex;
  flex-direction:column;
  align-items:stretch;
  gap:8px;
  margin-top:auto;
  padding-inline:2px;
}
.section-categories.style-frost .cat-arch-bar{
  display:block;
  width:34px;
  max-width:34px;
  height:3px;
  margin:0;
  border-radius:999px;
  background:linear-gradient(90deg, var(--cat-underline, var(--cyan,#00a8c1)), color-mix(in srgb, var(--cyan,#00a8c1) 40%, #fff));
  opacity:1;
  transform:none;
}
.section-categories.style-frost.is-barless .cat-arch-bar{display:none}
.section-categories.style-frost .cat-frost-row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
}
.section-categories.style-frost .cat-arch-title{
  font-size:var(--cat-title-size, 17px);
  font-weight:900;
  color:var(--cat-title-color, #0b1526);
  max-width:none;
  line-height:1.3;
  letter-spacing:-.025em;
}
.section-categories.style-frost .cat-frost-go{
  flex:0 0 auto;
  width:38px;
  height:38px;
  border-radius:50%;
  display:grid;
  place-items:center;
  background:color-mix(in srgb, var(--cyan,#00a8c1) 18%, #fff);
  color:#0a2740;
  box-shadow:0 8px 18px rgba(0,168,193,.18);
  transition:transform .28s cubic-bezier(.22,1,.36,1), background .25s, color .25s, box-shadow .25s;
}
.section-categories.style-frost .cat-frost-go svg{
  width:16px;
  height:16px;
  display:block;
}
html[dir="rtl"] .section-categories.style-frost .cat-frost-go svg{
  transform:scaleX(-1);
}
.section-categories.style-frost .cat-frost-desc{
  display:block;
  font-size:12.5px;
  line-height:1.7;
  color:#6b7d90;
  font-weight:600;
  max-width:28em;
}
.section-categories.style-frost .cat-arch:hover{
  transform:translateY(-8px);
  border-color:rgba(255,255,255,.95);
  box-shadow:
    0 1px 0 rgba(255,255,255,.98) inset,
    0 0 0 1px rgba(0,168,193,.16),
    0 28px 56px rgba(0,140,170,.14),
    0 14px 28px rgba(8,32,56,.08);
}
.section-categories.style-frost .cat-arch:hover .cat-frost-go{
  background:var(--cyan,#00a8c1);
  color:#041018;
  transform:scale(1.08);
  box-shadow:0 10px 22px rgba(0,168,193,.28);
}
.section-categories.style-frost .cat-arch:hover .cat-arch-glow{
  opacity:1;
  filter:blur(1px);
  background:radial-gradient(circle at 50% 50%, rgba(120,205,230,.62), rgba(120,205,230,.16) 48%, transparent 74%);
}
.section-categories.style-frost .cat-tile-arrow{display:none !important}

@media (max-width:780px){
  .section-categories.style-frost{
    padding-block:16px 14px;
  }
  .section-categories.style-frost .cat-arch.cat-frost{
    padding:var(--cat-pad-m, 14px);
    border-radius:calc(var(--cat-radius, 32px) - 6px);
  }
  .section-categories.style-frost .cat-arch-title{
    font-size:var(--cat-title-size-m, 14px);
  }
  .section-categories.style-frost .cat-frost-desc{
    font-size:11.5px;
    line-height:1.55;
  }
  .section-categories.style-frost .cat-frost-go{
    width:32px;
    height:32px;
  }
  .section-categories.style-frost .cat-arch-frame{
    margin-bottom:12px;
    width:82%;
    aspect-ratio:1 / 1;
  }
}
.cat-arch-bar{
  display:block;
  width:28%;
  max-width:44px;
  height:2px;
  margin:10px auto 0;
  border-radius:999px;
  background:var(--cat-underline,var(--cyan,#00a8c1));
  opacity:0;
  transform:scaleX(.4);
  transition:opacity .3s ease, transform .35s cubic-bezier(.22,1,.36,1);
  position:relative;
  z-index:1;
}
.section-categories:not(.is-barless) .cat-arch:hover .cat-arch-bar,
.section-categories:not(.is-barless) .cat-arch:focus-visible .cat-arch-bar{
  opacity:.9;
  transform:scaleX(1);
}

/* Soft / minimal / outline variants */
.section-categories.style-minimal .cat-arch{
  background:transparent;
  border-color:transparent;
  box-shadow:none;
}
.section-categories.style-minimal .cat-arch::before{display:none}
.section-categories.style-minimal .cat-arch:hover{
  background:var(--cat-card-bg, #F0F4F7);
  box-shadow:none;
  transform:translateY(-2px);
}
.section-categories.style-minimal .cat-arch-frame img{
  mix-blend-mode:normal;
  filter:drop-shadow(0 8px 18px rgba(8,20,38,.08));
}
.section-categories.style-outline .cat-arch{
  background:#fff;
  border:1.5px solid rgba(8,20,38,.1);
  box-shadow:none;
}
.section-categories.style-outline .cat-arch::before{opacity:.35}
.section-categories.style-outline .cat-arch:hover{
  border-color:var(--cat-underline, var(--cyan,#00a8c1));
  box-shadow:0 12px 28px rgba(8,20,38,.07);
}
.section-categories.style-outline .cat-arch-frame img{
  mix-blend-mode:normal;
}

/* classic layouts keep existing rules; add 5-col */
.category-grid.cats-5{grid-template-columns:repeat(5,minmax(0,1fr))}
.category-grid.cats-4{grid-template-columns:repeat(4,minmax(0,1fr))}


/* ========== Products — promo + scrollable rail ========== */
.products-stage{
  display:grid;
  grid-template-columns:minmax(0,1fr);
  gap:var(--p-gap, 14px);
  align-items:stretch;
  position:relative;
}
.products-stage.has-promo{
  grid-template-columns:minmax(160px,220px) minmax(0,1fr);
}
.product-promo{
  position:relative;
  display:flex;
  flex-direction:column;
  border-radius:20px;
  overflow:hidden;
  min-height:100%;
  background:linear-gradient(180deg,var(--promo-from,#00a8c1) 0%,var(--promo-to,#dfe8ee) 72%);
  border:1px solid rgba(8,20,38,.06);
  text-decoration:none;
  color:#fff;
  padding:22px 18px 18px;
  transition:transform .35s cubic-bezier(.22,1,.36,1),box-shadow .35s;
  z-index:2;
}
.product-promo:hover{
  transform:translateY(-4px);
  box-shadow:0 18px 36px rgba(8,20,38,.14);
}
.product-promo-title{
  margin:0;
  font-size:clamp(24px,2.4vw,32px);
  font-weight:950;
  letter-spacing:-.03em;
  line-height:1.15;
  color:#fff;
  text-shadow:0 2px 10px rgba(0,40,60,.18);
}
.product-promo-brand{
  flex:1;
  display:grid;
  place-items:center;
  padding:18px 8px;
}
.product-promo-brand img{
  max-width:min(78%,150px);
  max-height:86px;
  width:auto;
  height:auto;
  object-fit:contain;
  filter:drop-shadow(0 8px 16px rgba(0,0,0,.12));
}
.product-promo-brand .site-brand-text{
  font-size:20px;
  font-weight:950;
  color:#0b1a2e;
  text-align:center;
}
.product-promo-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:100%;
  min-height:44px;
  border-radius:12px;
  background:var(--cyan,#00a8c1);
  color:#fff;
  font-size:13px;
  font-weight:900;
  border:0;
  margin-top:auto;
}

.products-rail{
  position:relative;
  min-width:0;
  display:flex;
  align-items:stretch;
}
.products-rail-viewport{
  width:100%;
  overflow-x:auto;
  overflow-y:hidden;
  scroll-snap-type:x mandatory;
  scroll-behavior:smooth;
  -webkit-overflow-scrolling:touch;
  scrollbar-width:none;
  cursor:grab;
  padding-block:2px;
  touch-action:pan-x;
  mask-image:linear-gradient(90deg, transparent 0, #000 12px, #000 calc(100% - 12px), transparent 100%);
}
.products-rail-viewport::-webkit-scrollbar{display:none}
.products-rail-viewport.is-dragging{
  cursor:grabbing;
  scroll-behavior:auto;
  scroll-snap-type:none;
}
.products-rail-track,
.section-products.is-rail .product-grid{
  display:grid;
  grid-auto-flow:column;
  grid-template-columns:none;
  grid-auto-columns:minmax(var(--p-card-w, 220px), calc((100% - (var(--p-visible, 4) - 1) * var(--p-gap, 14px)) / var(--p-visible, 4)));
  gap:var(--p-gap, 14px);
  align-items:stretch;
  width:max-content;
  min-width:100%;
}
.section-products.is-grid .products-rail-viewport{
  overflow:visible;
  mask-image:none;
  cursor:default;
}
.section-products.is-grid .products-rail-track,
.section-products.is-grid .product-grid{
  display:grid;
  grid-auto-flow:row;
  grid-template-columns:repeat(var(--p-visible, 4), minmax(0, 1fr));
  grid-auto-columns:unset;
  width:100%;
  min-width:0;
}
.section-products.is-grid .products-rail-nav{display:none}

.products-rail-track > .product-card,
.products-rail-track > .vento-empty-state{
  scroll-snap-align:start;
  min-width:0;
  height:100%;
}

.products-rail-nav{
  position:absolute;
  top:50%;
  transform:translateY(-50%);
  z-index:5;
  width:42px;
  height:42px;
  border-radius:50%;
  border:1px solid rgba(8,20,38,.1);
  background:#fff;
  color:#0b1a2e;
  display:grid;
  place-items:center;
  box-shadow:0 8px 20px rgba(8,20,38,.12);
  cursor:pointer;
  transition:transform .2s, opacity .2s, background .2s;
  padding:0;
}
.products-rail-nav:hover{
  background:var(--cyan,#00a8c1);
  color:#fff;
  border-color:transparent;
}
.products-rail-nav.is-disabled,
.products-rail-nav:disabled{
  opacity:.35;
  pointer-events:none;
}
.products-rail:not(.is-scrollable) .products-rail-nav{
  opacity:0;
  pointer-events:none;
}
.products-rail.is-scrollable .products-rail-nav{
  opacity:1;
}
.products-rail-nav.is-prev{inset-inline-start:-8px}
.products-rail-nav.is-next{inset-inline-end:-8px}
.products-rail-nav .vento-icon{
  width:18px;
  height:18px;
  display:grid;
  place-items:center;
}
.products-rail-nav .vento-icon svg{width:18px;height:18px}
.products-rail-nav .rail-chevron.is-prev{transform:scaleX(-1)}
html[dir="rtl"] .products-rail-nav .rail-chevron:not(.is-prev){transform:scaleX(-1)}
html[dir="rtl"] .products-rail-nav .rail-chevron.is-prev{transform:none}

/* Product card polish */
.product-card{
  background:#fff !important;
  border-radius:18px;
  border:1px solid rgba(8,20,38,.08);
  display:flex;
  flex-direction:column;
  overflow:hidden;
  transition:transform .3s cubic-bezier(.22,1,.36,1), box-shadow .3s;
}
.product-card:hover{
  transform:translateY(-3px);
  box-shadow:0 14px 28px rgba(8,20,38,.1);
}
.product-image{
  aspect-ratio:1/1.12;
  background:#f3f5f7;
  position:relative;
  overflow:hidden;
}
.product-image img{
  width:100%;
  height:100%;
  object-fit:contain;
  object-position:center;
  display:block;
}
.product-image-hover{
  position:absolute;
  inset:0;
  opacity:0;
  transition:opacity .35s;
}
.product-card:hover .product-image-hover{opacity:1}
.product-body{
  padding:12px 14px 6px;
  text-align:center;
  flex:1;
}
.product-body h3{
  font-size:14px;
  font-weight:800;
  line-height:1.45;
  margin:0 0 6px;
  display:-webkit-box;
  -webkit-line-clamp:2;
  line-clamp:2;
  -webkit-box-orient:vertical;
  overflow:hidden;
  min-height:2.9em;
  color:#0b1a2e;
}
.product-rating{
  display:flex;
  gap:2px;
  margin:0 auto 8px;
  color:#c9d0d8;
  font-size:13px;
  letter-spacing:.02em;
  justify-content:center;
}
.product-rating.is-filled{color:#f5a623}
.product-cat{
  color:var(--cyan, #196f93);
}
.product-price{
  color:var(--midnight, #0a1220);
}
.product-price .amount,
.product-price .woocommerce-Price-amount{
  color:var(--cyan, #196f93);
}
.product-price{
  display:flex;
  flex-direction:column;
  gap:2px;
  color:var(--midnight, #0a1220);
  font-size:14px;
  font-weight:900;
  margin-bottom:4px;
  align-items:center;
}
.product-price del{
  color:#9aa3ad;
  font-size:12px;
  font-weight:600;
  order:-1;
}
.product-price ins{
  text-decoration:none;
  color:#111;
  font-weight:900;
}
.product-badge.badge-sale-pct{
  top:10px;
  right:10px;
  width:44px;
  height:44px;
  padding:0;
  display:grid;
  place-items:center;
  border-radius:50%;
  background:#ff7a1a;
  color:#fff;
  font-size:12px;
  font-weight:950;
  box-shadow:0 6px 14px rgba(255,122,26,.35);
  position:absolute;
  z-index:2;
}
.product-card-actions{
  padding:0 12px 14px;
  margin-top:auto;
}
.product-card-atc,
.btn.product-card-atc{
  background:var(--cyan,#00a8c1) !important;
  color:#fff !important;
  border:0 !important;
  border-radius:12px;
  min-height:42px;
  font-size:13px;
  font-weight:900;
  width:100%;
  display:inline-flex;
  align-items:center;
  justify-content:center;
}

/* Responsive — tablet */
@media(max-width:1100px){
  .cats-showcase{
    grid-template-columns:repeat(3,minmax(0,1fr));
    max-width:860px;
  }
  .section-categories.cats-d-cols-4 .cats-showcase,
  .section-categories.cats-d-cols-5 .cats-showcase,
  .section-categories.cats-d-cols-6 .cats-showcase{
    grid-template-columns:repeat(3,minmax(0,1fr));
  }
  .products-stage.has-promo{
    grid-template-columns:minmax(140px,180px) minmax(0,1fr);
  }
  .section-products{
    --p-visible:3;
  }
}

/* Responsive — mobile */
@media(max-width:780px){
  .section-categories.style-soft,
  .section-categories.style-minimal,
  .section-categories.style-outline,
  .section-categories.style-showcase{
    padding-block:8px 4px;
  }
  .cats-showcase,
  .cats-soft,
  .cats-logos{
    grid-template-columns:repeat(var(--cat-cols-m, 2), minmax(0, 1fr)) !important;
    gap:var(--cat-gap-m, var(--cat-gap, 12px));
    max-width:none;
    justify-items:stretch;
  }
  .section-categories.cats-m-cols-1 .cats-showcase{grid-template-columns:1fr !important}
  .section-categories.cats-m-cols-2 .cats-showcase{grid-template-columns:repeat(2,minmax(0,1fr)) !important}
  .section-categories.cats-m-cols-3 .cats-showcase{grid-template-columns:repeat(3,minmax(0,1fr)) !important}

  .cat-arch{
    max-width:none;
    padding:var(--cat-pad-m, 14px) calc(var(--cat-pad-m, 14px) * .7) calc(var(--cat-pad-m, 14px) * .8);
    border-radius:calc(var(--cat-radius, 20px) - 2px);
  }
  .cat-arch:hover{transform:none;box-shadow:0 1px 0 rgba(255,255,255,.7) inset, 0 8px 20px rgba(8,20,38,.06)}
  .cat-arch:active{transform:scale(.985)}
  .cat-arch-frame{
    margin-bottom:8px;
    border-radius:calc(var(--cat-radius, 20px) - 8px);
  }
  .cat-arch-frame img{
    width:var(--cat-img-scale-m, var(--cat-img-scale, 68%));
    height:var(--cat-img-scale-m, var(--cat-img-scale, 68%));
  }
  .cat-arch-title{
    font-size:var(--cat-title-size-m, var(--cat-title-size, 13px));
    max-width:12em;
  }
  .cat-arch-bar{
    width:26%;
    max-width:36px;
    height:2px;
    margin-top:7px;
  }
  .cats-showcase.is-scroll,
  .category-grid.cats-scroll.cats-showcase{
    display:flex !important;
    overflow-x:auto;
    scroll-snap-type:x mandatory;
    gap:var(--cat-gap-m, 12px);
    padding-bottom:6px;
    -webkit-overflow-scrolling:touch;
  }
  .cats-showcase.is-scroll > li{
    flex:0 0 42%;
    scroll-snap-align:start;
  }
  .cats-showcase.is-scroll .cat-arch,
  .category-grid.cats-scroll.cats-showcase .cat-arch{
    flex:1 1 auto;
    width:100%;
    scroll-snap-align:start;
    max-width:none;
  }

  .products-stage,
  .products-stage.has-promo{
    grid-template-columns:1fr;
    gap:12px;
  }
  .product-promo{
    min-height:0;
    flex-direction:row;
    align-items:center;
    gap:12px;
    padding:14px 16px;
    border-radius:16px;
  }
  .product-promo.m-hide-promo{display:none !important}
  .product-promo-title{
    font-size:22px;
    flex:0 0 auto;
    max-width:42%;
  }
  .product-promo-brand{padding:0;flex:1}
  .product-promo-brand img{max-height:48px}
  .product-promo-btn{
    width:auto;
    min-width:110px;
    padding:0 14px;
    margin:0;
    min-height:40px;
    font-size:12px;
  }

  .section-products.m-mode-rail{
    /* One primary card + slight peek — never 3 skinny cards */
    --m-p-visible:1.22;
    --p-visible:1.22;
  }
  .section-products.m-mode-rail .products-rail-track,
  .section-products.m-mode-rail .product-grid{
    grid-template-columns:none;
    grid-auto-flow:column;
    grid-auto-columns:minmax(220px, calc((100% - 10px) / 1.22));
    gap:10px;
    width:max-content;
    min-width:100%;
  }
  .section-products.m-mode-rail .products-rail-viewport{
    max-width:100%;
    min-width:0;
    mask-image:none;
  }
  .section-products.m-mode-grid .products-rail-viewport{
    overflow:visible;
    mask-image:none;
    cursor:default;
  }
  .section-products.m-mode-grid .products-rail-track,
  .section-products.m-mode-grid .product-grid{
    display:grid;
    grid-auto-flow:row;
    grid-template-columns:repeat(var(--m-cols, 2), minmax(0, 1fr));
    grid-auto-columns:unset;
    width:100%;
    min-width:0;
    gap:10px;
  }
  .section-products.m-mode-grid .products-rail-nav{display:none}

  .products-rail-nav{
    width:36px;
    height:36px;
  }
  .products-rail-nav.is-prev{inset-inline-start:4px}
  .products-rail-nav.is-next{inset-inline-end:4px}
  .products-rail-nav.m-hide-nav{display:none !important}

  .product-card:hover{transform:none;box-shadow:none}
  .product-body h3{font-size:13px;min-height:0}
  .product-card-atc{font-size:12px;min-height:38px}
}
@media(max-width:380px){
  .cat-arch-title{font-size:12px}
  .cats-showcase{gap:8px}
  .section-products.m-mode-rail{
    --m-p-visible:1.12;
    --p-visible:1.12;
  }
  .section-products.m-mode-rail .products-rail-track,
  .section-products.m-mode-rail .product-grid{
    grid-auto-columns:minmax(200px, calc(100% / 1.12));
  }
  .product-promo-title{font-size:18px}
}

/* —— Products section head: polished desktop + mobile —— */
.products-section-head{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:16px 20px;
  margin-bottom:clamp(18px, 2.8vw, 32px);
}
.products-section-head .eyebrow{
  margin-bottom:0;
}
.products-section-head .section-title{
  margin-top:6px;
  font-size:clamp(28px, 3.6vw, 48px);
  letter-spacing:-.04em;
  line-height:1.05;
}
.products-section-head .btn{
  flex:0 0 auto;
  min-height:44px;
  padding-inline:18px;
  border-radius:999px;
  font-size:13px;
  font-weight:800;
  white-space:nowrap;
}

@media (max-width:980px){
  .section-head.products-section-head{
    display:flex !important;
    flex-direction:row !important;
    align-items:center !important;
    justify-content:space-between !important;
    gap:12px !important;
    margin-bottom:14px !important;
    padding:0;
  }
  .section-head.products-section-head > div{
    min-width:0;
    flex:1 1 auto;
  }
  .section-head.products-section-head .eyebrow{
    font-size:9px;
    letter-spacing:.14em;
    opacity:.75;
  }
  .section-head.products-section-head .eyebrow:before{
    width:16px;
  }
  .section-head.products-section-head .section-title{
    margin-top:4px !important;
    font-size:clamp(20px, 5.8vw, 26px) !important;
    line-height:1.15 !important;
    letter-spacing:-.035em;
  }
  .section-head.products-section-head .btn{
    align-self:center !important;
    width:auto !important;
    min-width:0 !important;
    flex:0 0 auto !important;
    min-height:36px;
    padding:0 14px !important;
    font-size:12px !important;
    border-radius:999px !important;
    border-width:1px;
    background:transparent;
    box-shadow:none;
  }
}

@media (max-width:420px){
  .products-section-head .eyebrow{
    display:none;
  }
  .products-section-head .section-title{
    font-size:20px !important;
  }
  .products-section-head .btn{
    padding:0 12px;
    font-size:11.5px;
    min-height:34px;
  }
}