/* =========================================================
   ADILA MANUFACTURING — main.css
   Clean minimal, matching adila.com.my
   ========================================================= */

/* ---------- TOKENS ---------- */
:root {
  --blue:        #0065F2;
  --blue-dark:   #0052CC;
  --blue-darker: #003E99;

  --ink:         #111111;
  --ink-2:       #1c1c1c;
  --muted:       #666666;
  --muted-2:     #8a8a8a;

  --bg:          #ffffff;
  --bg-soft:     #ebebeb;
  --bg-soft-2:   #f5f5f5;
  --line:        #e2e2e2;

  --charcoal:    #3b3b3b;
  --charcoal-2:  #2e2e2e;

  --green-accent: #1FE058;

  --container:   1180px;
  --gutter:      clamp(20px, 4vw, 40px);
  --section-y:   clamp(64px, 9vw, 120px);

  --radius:      4px;
  --radius-lg:   8px;

  --ease:        cubic-bezier(.2,.7,.2,1);

  --font-sans:   "Inter", "Helvetica Neue", Helvetica, Arial, "Segoe UI", Roboto, sans-serif;
}

/* ---------- RESET ---------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:84px}
body{margin:0}
img,svg{display:block;max-width:100%;height:auto}
button,input,select,textarea{font:inherit;color:inherit}
a{color:inherit;text-decoration:none}
ol,ul{margin:0;padding:0;list-style:none}
h1,h2,h3,h4,h5,p,dl,dd{margin:0}
::selection{background:var(--blue);color:#fff}

/* ---------- BASE ---------- */
body{
  font-family:var(--font-sans);
  font-weight:400;
  font-size:16px;
  line-height:1.55;
  color:var(--ink);
  background:var(--bg);
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  font-feature-settings:"cv11", "ss01";
  overflow-x:hidden;
}

/* ---------- PRELOADER ---------- */
.preloader{
  position:fixed;
  inset:0;
  z-index:9999;
  display:flex;
  align-items:center;
  justify-content:center;
  background:#fff;
  transition:opacity .5s ease, visibility .5s ease;
}
.preloader__logo{
  width:clamp(120px, 22vw, 180px);
  height:auto;
  animation:preloaderPulse 1.2s ease-in-out infinite;
}
@keyframes preloaderPulse{
  0%,100%{opacity:.5; transform:scale(.97)}
  50%{opacity:1; transform:scale(1.02)}
}
body.is-loaded .preloader{
  opacity:0;
  visibility:hidden;
  pointer-events:none;
}
@media (prefers-reduced-motion: reduce){
  .preloader__logo{animation:none}
}

/* ---------- LAYOUT ---------- */
.container{
  width:100%;
  max-width:var(--container);
  margin-inline:auto;
  padding-inline:var(--gutter);
}

/* ---------- TYPOGRAPHY ---------- */
.title-xl{
  font-size:clamp(36px, 5.2vw, 62px);
  font-weight:800;
  line-height:1.04;
  letter-spacing:-.025em;
  color:var(--ink);
}
.title-lg{
  font-size:clamp(32px, 4.4vw, 52px);
  font-weight:800;
  line-height:1.08;
  letter-spacing:-.02em;
  color:var(--ink);
}
.kicker, .overline{
  display:inline-block;
  font-size:12.5px;
  font-weight:700;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:var(--ink);
  margin-bottom:14px;
}
.overline--center{display:block;text-align:center}
.subhead{
  font-size:12.5px;
  font-weight:700;
  letter-spacing:.16em;
  text-transform:uppercase;
  text-align:center;
  color:var(--ink);
  margin: clamp(36px, 5vw, 56px) 0 24px;
}
.lede{
  font-size:15.5px;
  line-height:1.6;
  color:var(--muted);
  max-width:46ch;
  margin-bottom:28px;
}

/* ---------- BUTTONS ---------- */
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  font-family:inherit;
  font-size:14px;
  font-weight:600;
  line-height:1;
  padding:14px 24px;
  border-radius:var(--radius);
  border:1.5px solid transparent;
  cursor:pointer;
  text-align:center;
  transition: background .2s var(--ease), color .2s var(--ease), border-color .2s var(--ease), transform .15s var(--ease);
  user-select:none;
  white-space:nowrap;
}
.btn--primary{
  background:var(--blue);
  color:#fff;
  border-color:var(--blue);
}
.btn--primary:hover{
  background:var(--blue-dark);
  border-color:var(--blue-dark);
}
.btn--primary:active{
  background:var(--blue-darker);
  transform:translateY(1px);
}
.btn--outline{
  background:transparent;
  color:var(--ink);
  border-color:var(--ink);
}
.btn--outline:hover{
  background:var(--ink);
  color:#fff;
}
.btn--block{
  width:100%;
  padding:16px 24px;
}

/* ---------- HEADER ---------- */
.site-header{
  position:sticky;
  top:0;
  z-index:50;
  background:rgba(255,255,255,0.96);
  backdrop-filter:saturate(1.4) blur(8px);
  -webkit-backdrop-filter:saturate(1.4) blur(8px);
  border-bottom:1px solid var(--line);
}
.header-row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  height:72px;
  gap:24px;
}
.brand{
  display:flex;
  align-items:center;
  gap:10px;
}
.brand__logo{
  height:34px;
  width:auto;
  display:block;
}
.brand__name{
  font-size:13px;
  font-weight:800;
  letter-spacing:.16em;
  color:var(--ink);
}

.primary-nav{
  display:flex;
  align-items:center;
  gap:32px;
}
.primary-nav a:not(.btn){
  font-size:14px;
  font-weight:500;
  color:var(--ink);
  transition: color .15s var(--ease);
}
.primary-nav a:not(.btn):hover{
  color:var(--blue);
}
.primary-nav .btn{
  padding:11px 20px;
  font-size:13px;
}

.menu-toggle{
  display:none;
  background:none;
  border:0;
  width:40px;height:40px;
  cursor:pointer;
  padding:0;
}
.menu-toggle span{
  display:block;
  width:22px;height:2px;
  background:var(--ink);
  margin:5px auto;
  transition: transform .25s var(--ease), opacity .25s var(--ease);
}
.menu-toggle[aria-expanded="true"] span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.menu-toggle[aria-expanded="true"] span:nth-child(2){opacity:0}
.menu-toggle[aria-expanded="true"] span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

.mobile-nav{
  display:none;
  flex-direction:column;
  gap:0;
  padding:8px var(--gutter) 16px;
  border-top:1px solid var(--line);
  background:#fff;
}
.mobile-nav a{
  padding:12px 0;
  font-size:15px;
  font-weight:500;
  border-bottom:1px solid var(--line);
}
.mobile-nav a:last-child{border-bottom:0;margin-top:8px}
.mobile-nav .btn{padding:14px 20px}

@media (max-width: 820px){
  .primary-nav{display:none}
  .menu-toggle{display:block}
  .site-header.is-open .mobile-nav{display:flex}
}

/* ---------- ALERT ---------- */
.alert{
  margin:0;
  padding:14px var(--gutter);
  font-size:14px;
  font-weight:600;
  text-align:center;
  border-bottom:1px solid transparent;
}
.alert--ok{background:#E8F6EE;color:#0E6B36;border-bottom-color:#BBE3CB}
.alert--err{background:#FBEAEA;color:#9B1C1C;border-bottom-color:#F1C5C5}

/* ---------- HERO ---------- */
.hero{
  background:var(--bg-soft);
  padding: clamp(40px, 6vw, 72px) 0 clamp(48px, 8vw, 96px);
}
.hero__inner{
  display:grid;
  grid-template-columns: 1.05fr 1fr;
  gap: clamp(24px, 6vw, 80px);
  align-items:center;
}
.hero__copy .kicker{color:var(--ink)}
.hero__art{
  position:relative;
  display:flex;
  align-items:center;
  justify-content:center;
  aspect-ratio: 1 / 1;
  max-width:520px;
  width:100%;
  margin-left:auto;
}
.hero__art svg{
  width:100%;
  height:100%;
  filter: drop-shadow(0 24px 40px rgba(0,0,0,.18));
  animation: heroFloat 7s ease-in-out infinite;
}
@keyframes heroFloat{
  0%,100%{transform: translateY(0) rotate(0deg)}
  50%{transform: translateY(-8px) rotate(-1deg)}
}

@media (max-width:820px){
  .hero__inner{grid-template-columns:1fr;text-align:left}
  .hero__art{order:-1;max-width:340px;margin:0 auto 8px}
  .lede{margin-left:0;margin-right:0}
}

/* ---------- PRODUCTS ---------- */
.products{
  background:#fff;
  padding: var(--section-y) 0;
}
.products .overline{margin-bottom:24px}

.product-grid{
  display:grid;
  grid-template-columns: 1.25fr 1fr;
  grid-template-rows: 1fr 1fr;
  gap:16px;
  min-height:560px;
}
.prod-card{
  background:var(--bg-soft-2);
  border-radius:var(--radius);
  overflow:hidden;
  position:relative;
  display:flex;
  flex-direction:column;
  transition: transform .25s var(--ease), box-shadow .25s var(--ease);
}
.prod-card:hover{
  transform: translateY(-3px);
  box-shadow: 0 14px 30px rgba(0,0,0,.08);
}
.prod-card--feature{
  grid-row: span 2;
}
.prod-card__img{
  flex:1;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:32px;
  min-height:200px;
  position:relative;
  overflow:hidden;
}
.prod-card__img svg,
.prod-card__img img{
  width:auto;
  height:100%;
  max-height:320px;
  object-fit:contain;
  transition: transform .5s var(--ease);
}
.prod-card--feature .prod-card__img svg,
.prod-card--feature .prod-card__img img{
  max-height:380px;
}
.prod-card:hover .prod-card__img svg,
.prod-card:hover .prod-card__img img{
  transform: scale(1.04) rotate(-1deg);
}
.prod-card__caption{
  padding: 18px 24px 22px;
  background:#fff;
  border-top:1px solid var(--line);
}
.prod-card--feature .prod-card__caption{
  padding: 22px 28px 26px;
}
.prod-card__kicker{
  display:block;
  font-size:10.5px;
  font-weight:700;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:var(--muted-2);
  margin-bottom:6px;
}
.prod-card__title{
  font-size:clamp(18px, 1.4vw + 8px, 24px);
  font-weight:800;
  letter-spacing:-.01em;
  line-height:1.2;
  color:var(--ink);
}
.prod-card--feature .prod-card__title{
  font-size:clamp(22px, 1.6vw + 10px, 30px);
}

.products__cta{
  margin-top:32px;
  display:flex;
  justify-content:flex-start;
}

@media (max-width:820px){
  .product-grid{
    grid-template-columns:1fr;
    grid-template-rows:auto;
    min-height:auto;
  }
  .prod-card--feature{grid-row:auto}
  .prod-card__img{min-height:240px}
}

/* ---------- MISSION ---------- */
.mission{
  background:var(--bg-soft);
  padding: var(--section-y) 0;
  text-align:center;
}
.mission__inner{
  display:flex;
  flex-direction:column;
  align-items:center;
}
.mission .overline{margin-bottom:24px}
.mission .title-lg{
  max-width:18ch;
  margin-inline:auto;
}
.mission__lede{
  font-size:16px;
  line-height:1.7;
  color:var(--muted);
  max-width:62ch;
  margin:18px auto 0;
}
.mission__figure{
  margin:clamp(28px, 4vw, 44px) auto 0;
  width:100%;
  max-width:900px;
  border-radius:var(--radius);
  overflow:hidden;
  box-shadow:0 24px 50px -22px rgba(0,0,0,.35);
}
.mission__figure img{
  display:block;
  width:100%;
  height:auto;
}
.section-anchor{
  display:block;
  height:0;
  visibility:hidden;
}
.usp-grid{
  display:grid;
  grid-template-columns:repeat(4, 1fr);
  gap:16px;
  width:100%;
  margin-top:clamp(36px, 5vw, 56px);
}
.usp-card{
  background:#fff;
  border:1px solid var(--line);
  border-radius:var(--radius);
  padding:28px 22px;
  text-align:left;
  display:flex;
  flex-direction:column;
  gap:10px;
  box-shadow:0 1px 0 rgba(0,0,0,.04), 0 8px 20px -10px rgba(0,0,0,.06);
}
.usp-card__icon{
  display:flex;
  align-items:center;
  justify-content:center;
  width:48px;
  height:48px;
  border-radius:12px;
  background:rgba(0,101,242,.08);
  color:var(--blue);
}
.usp-card__icon svg{
  width:26px;
  height:26px;
}
.usp-card__title{
  font-size:15px;
  font-weight:800;
  line-height:1.3;
  color:var(--ink);
}
.usp-card__desc{
  font-size:13px;
  color:var(--muted);
  line-height:1.55;
}
@media (max-width:900px){
  .usp-grid{grid-template-columns:repeat(2, 1fr)}
}
@media (max-width:560px){
  .usp-grid{grid-template-columns:1fr}
}

/* ---------- COLOR VARIATION ---------- */
.colors{
  background:#fff;
  padding: var(--section-y) 0;
  text-align:center;
}
.colors__title{
  text-align:center;
  letter-spacing:-.01em;
  margin-bottom: clamp(16px, 2vw, 24px);
}

.swatch-grid{
  display:grid;
  gap:16px;
  max-width:920px;
  margin-inline:auto;
}
.swatch-grid--3{grid-template-columns:repeat(3, 1fr)}
.swatch-grid--2{grid-template-columns:repeat(2, 1fr);max-width:620px}

.swatch{
  margin:0;
  display:flex;
  flex-direction:column;
  border-radius:var(--radius);
  overflow:hidden;
  background:var(--bg-soft-2);
  transition: transform .25s var(--ease);
}
.swatch:hover{transform: translateY(-3px)}

.swatch__img{
  aspect-ratio: 1 / 1;
  background: var(--c1);
  position:relative;
  overflow:hidden;
}
.swatch__photo{
  aspect-ratio: 1 / 1;
  width:100%;
  object-fit:cover;
  display:block;
}
/* gentle gloss highlight */
.swatch__img::before{
  content:"";
  position:absolute;
  inset:8% 8% auto 8%;
  height:30%;
  background:radial-gradient(ellipse at 30% 20%, rgba(255,255,255,.35), transparent 70%);
  pointer-events:none;
}
/* rubber grain */
.swatch__img::after{
  content:"";
  position:absolute;
  inset:0;
  background-image: radial-gradient(rgba(0,0,0,.06) 1px, transparent 1.2px);
  background-size: 3px 3px;
  pointer-events:none;
  mix-blend-mode: multiply;
}
.swatch__img--dual{
  background: linear-gradient(135deg, var(--c1) 0%, var(--c1) 50%, var(--c2) 50%, var(--c2) 100%);
}
.swatch__img--marble{
  background:
    radial-gradient(circle at 25% 30%, var(--c3) 0%, transparent 28%),
    radial-gradient(circle at 75% 65%, var(--c2) 0%, transparent 35%),
    radial-gradient(circle at 50% 80%, var(--c3) 0%, transparent 22%),
    var(--c1);
  filter: contrast(1.05) saturate(1.05);
}
.swatch__img--silicone{
  background: var(--c1);
  opacity:.88;
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.08), inset 0 0 40px rgba(0,0,0,.08);
}
.swatch__img--silicone-dual{
  background: linear-gradient(135deg, var(--c1) 0%, var(--c1) 50%, var(--c2) 50%, var(--c2) 100%);
  opacity:.88;
}

.swatch figcaption{
  background:var(--charcoal);
  color:#fff;
  text-align:center;
  font-size:12px;
  font-weight:600;
  letter-spacing:.04em;
  padding: 14px 12px;
}

@media (max-width:680px){
  .swatch-grid--3{grid-template-columns:1fr 1fr}
  .swatch-grid--3 .swatch:last-child{grid-column:1 / -1}
}

/* ---------- GALLERY ---------- */
.gallery{
  background:#fff;
  padding: var(--section-y) 0;
}
.gallery__title{
  text-align:center;
  margin-bottom: clamp(32px, 4vw, 48px);
}
.gallery-grid{
  display:grid;
  grid-template-columns: repeat(4, 1fr);
  grid-auto-rows: 180px;
  gap:12px;
}
.g{
  margin:0;
  background:#fff;
  border:1px solid var(--line);
  border-radius:var(--radius);
  overflow:hidden;
  position:relative;
  transition: transform .3s var(--ease), box-shadow .3s var(--ease);
}
.g__img{
  width:100%;
  height:100%;
  object-fit:contain;
  padding:16px;
  display:block;
  transition: transform .4s var(--ease);
}
.g:hover{
  transform: translateY(-2px);
  box-shadow: 0 12px 24px rgba(0,0,0,.06);
}
.g:hover .g__img{
  transform: scale(1.03);
}

.g--a{grid-column: span 2; grid-row: span 2}
.g--b{grid-column: span 1}
.g--c{grid-column: span 1}
.g--d{grid-column: span 1; grid-row: span 1}
.g--e{grid-column: span 1; grid-row: span 2}
.g--f{grid-column: span 1}
.g--g{grid-column: span 1}
.g--h{grid-column: span 2}

@media (max-width:820px){
  .gallery-grid{grid-template-columns: repeat(2, 1fr); grid-auto-rows:140px}
  .g--a{grid-column: span 2; grid-row: span 2}
  .g--b,.g--c,.g--d,.g--e,.g--f,.g--g,.g--h{grid-column: span 1; grid-row: span 1}
}

/* ---------- STEPS ---------- */
.steps{
  background:#fff;
  padding: 0 0 var(--section-y);
}
.steps__title{
  text-align:center;
  margin-bottom: clamp(32px, 4vw, 48px);
}
.steps__grid{
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap:16px;
}
.step{
  background:var(--charcoal);
  color:#fff;
  border-radius:var(--radius);
  padding: clamp(28px, 3vw, 40px);
  min-height:280px;
  display:flex;
  flex-direction:column;
  justify-content:flex-end;
  gap:12px;
  position:relative;
  overflow:hidden;
  transition: background .25s var(--ease), transform .25s var(--ease);
}
.step:hover{
  background:var(--charcoal-2);
  transform:translateY(-3px);
}
.step::before{
  content:"";
  position:absolute;
  top:-20%;
  right:-10%;
  width:60%;
  aspect-ratio:1;
  background: radial-gradient(circle, rgba(0,101,242,0.15), transparent 70%);
  pointer-events:none;
}
.step__num{
  font-size:clamp(22px, 2vw + 8px, 32px);
  font-weight:800;
  letter-spacing:-.01em;
  color:#fff;
}
.step__name{
  font-size:13px;
  font-weight:700;
  letter-spacing:.14em;
  color:rgba(255,255,255,.78);
  text-transform:uppercase;
  line-height:1.4;
  max-width:24ch;
}
.step__desc{
  font-size:13px;
  color:rgba(255,255,255,.55);
  line-height:1.55;
  max-width:30ch;
}

@media (max-width:820px){
  .steps__grid{grid-template-columns:1fr}
  .step{min-height:200px}
}

/* ---------- QUOTE SECTION ---------- */
.quote-section{
  background:var(--bg-soft);
  padding: var(--section-y) 0;
}
.quote-section__inner{
  max-width:720px;
}
.quote-section .overline{margin-bottom:18px}
.quote-section .title-lg{margin-bottom:14px}
.quote-section__lede{
  color:var(--muted);
  font-size:16px;
  line-height:1.55;
  margin-bottom: clamp(28px, 4vw, 40px);
  max-width:60ch;
}

.quote-form{
  display:flex;
  flex-direction:column;
  gap:18px;
}
.hp{
  position:absolute !important;
  width:1px;height:1px;
  margin:-1px;padding:0;
  overflow:hidden;
  clip:rect(0,0,0,0);
  white-space:nowrap;
  border:0;
}
.field{
  display:flex;
  flex-direction:column;
  gap:6px;
}
.field__label{
  font-size:13.5px;
  font-weight:600;
  color:var(--ink);
}
.field input,
.field textarea,
.field select{
  font-size:15px;
  background:#cccccc;
  border:0;
  padding: 14px 16px;
  border-radius:var(--radius);
  outline: 2px solid transparent;
  outline-offset: -2px;
  transition: outline-color .15s var(--ease), background .15s var(--ease);
  color:#1a1a1a;
  width:100%;
  font-family:inherit;
}
.field input::placeholder,
.field textarea::placeholder{
  color: #6e6e6e;
}
.field input:focus,
.field textarea:focus,
.field select:focus{
  outline-color: var(--blue);
  background:#d9d9d9;
}
.field textarea{
  min-height:130px;
  resize:vertical;
  line-height:1.5;
}
.select-wrap{
  position:relative;
  display:block;
}
.select-wrap select{
  -webkit-appearance:none;
  appearance:none;
  padding-right:40px;
  cursor:pointer;
}
.select-caret{
  position:absolute;
  right:16px;
  top:50%;
  transform:translateY(-50%);
  pointer-events:none;
  color:var(--ink-2);
}
.quote-form .btn--block{margin-top:6px}
.quote-form__small{
  font-size:12.5px;
  color:var(--muted);
  text-align:center;
  margin-top:4px;
}

/* ---------- FOOTER ---------- */
.site-footer{
  background:#fff;
  border-top:1px solid var(--line);
  padding-top: clamp(56px, 7vw, 96px);
}
.site-footer__inner{
  display:grid;
  grid-template-columns: 2fr 1fr 1fr 1.4fr;
  gap: clamp(28px, 4vw, 56px);
}
.footer-col--about p{
  font-size:13.5px;
  line-height:1.65;
  color:var(--muted);
  max-width: 38ch;
}
.footer-col__small{
  margin-top:14px;
  font-size:13px;
}
.footer-col__small a{color:var(--ink);transition: color .15s var(--ease)}
.footer-col__small a:hover{color:var(--blue)}

.footer-col h4{
  font-size:14px;
  font-weight:800;
  color:var(--ink);
  margin-bottom:16px;
  letter-spacing:.01em;
}
.footer-col ul{
  display:flex;
  flex-direction:column;
  gap:10px;
}
.footer-col a{
  font-size:13.5px;
  color:var(--muted);
  transition: color .15s var(--ease);
}
.footer-col a:hover{color:var(--blue)}

.footer-col p{
  font-size:13.5px;
  line-height:1.65;
  color:var(--muted);
}

.site-footer__bottom{
  margin-top: clamp(48px, 6vw, 72px);
  padding: 22px 0;
  border-top: 1px solid var(--line);
  background:#fff;
}
.site-footer__bottom-row{
  display:flex;
  justify-content:space-between;
  align-items:center;
  flex-wrap:wrap;
  gap:12px;
  font-size:12.5px;
  color:var(--muted-2);
}

@media (max-width:980px){
  .site-footer__inner{grid-template-columns: 1fr 1fr}
  .footer-col--about{grid-column: 1 / -1}
}
@media (max-width:560px){
  .site-footer__inner{grid-template-columns: 1fr}
}

/* ---------- ACCESSIBILITY / MOTION ---------- */
@media (prefers-reduced-motion: reduce){
  *{animation-duration:.001ms !important; transition: none !important}
  .hero__art svg{animation:none}
}

/* focus visible */
:focus-visible{
  outline: 2px solid var(--blue);
  outline-offset: 3px;
  border-radius: 2px;
}

/* skip link helper - not currently rendered but available */
.visually-hidden{
  position:absolute !important;
  width:1px;height:1px;
  margin:-1px;padding:0;
  overflow:hidden;
  clip:rect(0,0,0,0);
  white-space:nowrap;
  border:0;
}

/* =========================================================
   PRODUCT-CARD link wrapper (cards on home & catalog now link)
   ========================================================= */
.prod-card__link-wrap{
  display:flex;
  flex-direction:column;
  height:100%;
  color:inherit;
}
.prod-card{ position:relative; }
.btn--small{
  padding:9px 16px;
  font-size:12px;
}

/* =========================================================
   PRODUCT INDEX / CATALOGUE PAGE
   ========================================================= */
.catalog-hero{
  background:var(--bg-soft);
  padding: clamp(60px, 8vw, 100px) 0 clamp(60px, 9vw, 110px);
}
.catalog-hero .kicker{ color:var(--ink); margin-bottom: 14px; }
.catalog-hero .title-xl{
  max-width: 14ch;
  margin-bottom: 22px;
}
.catalog-hero .lede{
  margin-bottom: 28px;
}

.cat-grid-section{
  background:#fff;
  padding: var(--section-y) 0;
}
.cat-grid-section .overline{ margin-bottom:24px }
.cat-grid{
  display:grid;
  grid-template-columns: repeat(4, 1fr);
  gap:16px;
}
.cat-card{
  display:flex;
  flex-direction:column;
  background:var(--bg-soft-2);
  border-radius:var(--radius);
  overflow:hidden;
  color:inherit;
  transition: transform .25s var(--ease), box-shadow .25s var(--ease);
  text-decoration:none;
}
.cat-card:hover{
  transform: translateY(-4px);
  box-shadow: 0 14px 30px rgba(0,0,0,.08);
}
.cat-card__img{
  flex:1;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:28px;
  min-height:220px;
  overflow:hidden;
}
.cat-card__img svg,
.cat-card__img img{
  width:auto;
  height:100%;
  max-height:200px;
  object-fit:contain;
  transition: transform .5s var(--ease);
}
.cat-card:hover .cat-card__img svg,
.cat-card:hover .cat-card__img img{
  transform: scale(1.06) rotate(-1deg);
}
.cat-card__caption{
  background: var(--charcoal);
  color:#fff;
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding: 16px 18px;
  gap:8px;
}
.cat-card__name{
  font-size:13px;
  font-weight:800;
  letter-spacing:.06em;
  line-height:1.2;
}
.cat-card__cta{
  background:var(--blue);
  color:#fff;
  border-radius:var(--radius);
  padding: 8px 14px;
  font-size:11px;
  font-weight:600;
  letter-spacing:.02em;
  white-space:nowrap;
  transition: background .15s var(--ease);
}
.cat-card:hover .cat-card__cta{
  background:var(--blue-dark);
}
@media (max-width:980px){
  .cat-grid{grid-template-columns:1fr 1fr}
}
@media (max-width:540px){
  .cat-grid{grid-template-columns:1fr}
}

.cat-section{
  background:#fff;
  padding: var(--section-y) 0;
}
.cat-section--alt{
  background: var(--bg-soft);
}
.cat-section__title{
  text-align:left;
  margin-bottom: clamp(28px, 4vw, 44px);
}
.cat-product-grid{
  display:grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
  margin-bottom: clamp(32px, 5vw, 56px);
}
.cat-product-grid .prod-card{
  min-height: 360px;
}
.cat-product-grid .prod-card__img{
  background: var(--bg-soft-2);
  padding: 24px;
  min-height: 240px;
}
.cat-section--alt .cat-product-grid .prod-card__img{
  background:#fff;
}
.cat-product-grid .prod-card__caption{
  background:#fff;
  display:flex;
  flex-direction:column;
  gap: 10px;
}
.cat-section--alt .cat-product-grid .prod-card__caption{
  background: var(--bg-soft);
}
.cat-product-grid .prod-card__caption .btn{
  align-self:flex-start;
  margin-top: 4px;
}
.cat-product-grid .prod-card__title{
  font-size: clamp(22px, 1.6vw + 10px, 30px);
  font-weight: 800;
}

.cat-features{
  display:grid;
  grid-template-columns: repeat(5, 1fr);
  gap:12px;
}
.cat-feature{
  background:#fff;
  border-radius: var(--radius);
  padding: 24px 20px;
  box-shadow: 0 1px 0 rgba(0,0,0,.04), 0 8px 20px -10px rgba(0,0,0,.06);
  display:flex;
  flex-direction:column;
  gap:8px;
  border: 1px solid var(--line);
}
.cat-feature__icon{
  display:flex;
  align-items:center;
  justify-content:center;
  width:46px;
  height:46px;
  border-radius:12px;
  background: rgba(0,101,242,.08);
  color: var(--blue);
  margin-bottom: 10px;
}
.cat-feature__icon svg{
  width:24px;
  height:24px;
}
.cat-feature__title{
  font-size:13px;
  font-weight:800;
  line-height:1.3;
}
.cat-feature__desc{
  font-size:12.5px;
  color: var(--muted);
  line-height:1.5;
}

@media (max-width:980px){
  .cat-features{grid-template-columns: repeat(2, 1fr)}
}
@media (max-width:680px){
  .cat-product-grid{grid-template-columns:1fr}
  .cat-features{grid-template-columns: 1fr}
}

/* =========================================================
   PRODUCT DETAIL PAGE
   ========================================================= */
.prod-hero{
  background:#fff;
  padding: clamp(40px, 6vw, 72px) 0 clamp(60px, 8vw, 96px);
}
.prod-hero__inner{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(28px, 6vw, 80px);
  align-items:center;
}
.prod-crumbs{
  display:flex;
  align-items:center;
  gap:8px;
  font-size:12px;
  color: var(--muted);
  margin-bottom: 24px;
  flex-wrap:wrap;
}
.prod-crumbs a{
  color: var(--muted);
  transition: color .15s var(--ease);
}
.prod-crumbs a:hover{ color: var(--blue) }
.prod-crumbs span[aria-current="page"]{
  color: var(--ink);
  font-weight:600;
}
.prod-hero__title{
  font-size: clamp(48px, 8vw, 96px);
  font-weight: 800;
  line-height: .95;
  letter-spacing: -.03em;
  margin: 6px 0 18px;
}
.prod-hero__desc{
  font-size: 15px;
  color: var(--muted);
  line-height: 1.6;
  max-width: 42ch;
  margin-bottom: 28px;
  text-align: justify;
}
.prod-hero__sub-label{
  font-size: 14px;
  font-weight: 700;
  color: var(--ink);
  margin-bottom: 12px;
}
.prod-sizes{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  margin-bottom: 28px;
}
.prod-sizes li{
  border: 1px solid var(--line);
  background: var(--bg-soft-2);
  padding: 8px 14px;
  border-radius: var(--radius);
  font-size: 13px;
  font-weight: 600;
  color: var(--ink);
}
.prod-hero__cta{
  display:flex;
  flex-wrap:wrap;
  gap:12px;
}
.prod-hero__art{
  display:flex;
  align-items:center;
  justify-content:center;
  aspect-ratio: 1 / 1;
  width:100%;
}
.prod-hero__art svg,
.prod-hero__art img{
  width: 100%;
  height: 100%;
  max-height: 480px;
  object-fit: contain;
  filter: drop-shadow(0 24px 40px rgba(0,0,0,.18));
  animation: heroFloat 7s ease-in-out infinite;
}

@media (max-width:820px){
  .prod-hero__inner{ grid-template-columns: 1fr; }
  .prod-hero__art{ order: -1; max-width: 340px; margin:0 auto; }
  .prod-hero__title{ font-size: clamp(42px, 12vw, 72px); }
}

.prod-gallery{
  background: #fff;
  padding: 0 0 var(--section-y);
}
.prod-gallery__grid{
  display:grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
}
.prod-gallery__cell{ margin:0 }
.prod-gallery__placeholder{
  position:relative;
  background: var(--bg-soft);
  border-radius: var(--radius);
  aspect-ratio: 1 / 1;
  overflow:hidden;
  display:flex;
  align-items:center;
  justify-content:center;
  padding: 18px;
}
.prod-gallery__placeholder svg,
.prod-gallery__placeholder img{
  width: 70%;
  height: 70%;
  object-fit: contain;
  opacity: .85;
}
.prod-gallery__placeholder::after{
  content: attr(data-label);
  position:absolute;
  left: 12px; bottom: 12px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--muted-2);
}
@media (max-width:820px){
  .prod-gallery__grid{ grid-template-columns: repeat(2, 1fr); }
}

.prod-related{
  background: var(--bg-soft);
  padding: var(--section-y) 0;
}
.prod-related .overline{ margin-bottom: 24px; }
.prod-related__grid{
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}
.prod-related__grid .prod-card{
  min-height: 360px;
}
.prod-related__grid .prod-card__img{
  background:#fff;
  padding: 24px;
  min-height: 220px;
}
.prod-related__grid .prod-card__caption{
  background:#fff;
}
@media (max-width:820px){
  .prod-related__grid{ grid-template-columns: 1fr; }
}