/* SECTION 02 — live HTML copy and transparent media asset artwork. */
:root {
  --category-ink: #0a2341;
  --category-teal: #039e9d;
  --category-coral: #ff5b52;
  --category-purple: #7042c2;
}
.shop-by-category,.shop-by-category *,.shop-by-category *::before,.shop-by-category *::after{box-sizing:border-box}
.shop-by-category { color:var(--category-ink);font-family:"Inter Display","Inter",Arial,Helvetica,sans-serif;-webkit-font-smoothing:antialiased;width:100%; max-width:1440px; margin:0 auto; padding:clamp(18px,2vw,31px) 3.82% clamp(18px,2vw,30px) 4.25%; background:#fff; }
.shop-by-category__heading { display:flex; align-items:center; justify-content:space-between; gap:16px; margin-bottom:clamp(12px,1.6vw,23px) }
.shop-by-category h2 {font-size:clamp(28px,3.35vw,48px); letter-spacing:-.045em; line-height:1.1; font-weight:900; margin:0; color:var(--category-ink); text-wrap:balance}
.shop-by-category h2 span{color:var(--category-teal);margin-left:.15em}
.shop-by-category__all{display:inline-flex;align-items:center;gap:5px;text-decoration:none;color:#008d90;font-size:clamp(10px,1.05vw,15px);line-height:1.2;font-weight:750;white-space:nowrap;transition:color .15s}
.shop-by-category__all:hover{color:#045d67}
.shop-by-category__all svg{width:1em;height:1em}
.shop-by-category__grid{display:grid;grid-template-columns:1.04fr 1fr 1.05fr .99fr;gap:1%}
.category-card{position:relative;display:block;height:16.36vw;max-height:236px;min-width:0; isolation:isolate; overflow:hidden; border-radius:clamp(14px,1.55vw,22px);text-decoration:none;color:var(--category-ink);container-type:inline-size; transition:transform .18s, box-shadow .18s;}
.category-card:hover{transform:translateY(-3px);box-shadow:0 13px 25px rgba(13,37,58,.12)}
.category-card:focus-visible, .shop-by-category__all:focus-visible{outline:3px solid #ff6b58;outline-offset:4px}
.category-card--devices{background:linear-gradient(122deg,#b8f0eb 0%,#b3f3ed 42%,#acece8 100%)}
.category-card--terea{background:linear-gradient(124deg,#ffccca 0%,#ffbfc1 60%,#ffa4a6 100%)}
.category-card--accessories{background:linear-gradient(120deg,#e2c9fd 0%,#d8b6f8 58%,#c4a5f2 100%)}
.category-card--arrivals{background:linear-gradient(115deg,#e5ffae 0%,#ebffb2 55%,#dcfd98 100%)}
.category-card__ornament{position:absolute;z-index:-1;pointer-events:none}
.category-card--devices .category-card__ornament{height:61cqi;width:89cqi;right:-49cqi;bottom:-39cqi;border-radius:50%;background:#85ded9;opacity:.68}
.category-card--terea .category-card__ornament{width:76cqi;height:85cqi;right:-18cqi;top:11cqi;background:#ff7774;border-radius:50% 50% 30% 36%; transform:rotate(29deg)}
.category-card--accessories .category-card__ornament{height:80cqi;width:118cqi;bottom:-56cqi;right:-18cqi;border-radius:50%;background:#b28af1;opacity:.78}
.category-card--arrivals .category-card__ornament{height:86cqi;width:110cqi;bottom:-60cqi;right:-35cqi;border-radius:50%;background:#6ee7df}
.category-card__copy{position:absolute; z-index:3; left:9.5%;top:11%; display:flex;flex-direction:column;align-items:flex-start; max-width:71%; }
.category-card__name{display:block;font-size:clamp(20px,11.75cqi,42px);font-weight:900;letter-spacing:-.065em;line-height:.96;white-space:nowrap}
.category-card__description{display:block;margin-top:3.8cqi;font-size:clamp(10px,5.65cqi,19px);font-weight:460;line-height:1.16;letter-spacing:-.03em}
.category-card--accessories .category-card__copy{top:11%;max-width:76%}
.category-card--accessories .category-card__name{font-size:clamp(20px,10.5cqi,37px)}
.category-card--accessories .category-card__description{margin-top:3cqi}
.category-card__arrow{position:absolute;left:9%;bottom:8%;width:15.7cqi;height:15.7cqi;max-width:56px;max-height:56px;display:grid;place-items:center;border-radius:50%;background:#03a2a5;color:#fff;box-shadow:0 3px 5px rgba(1,45,68,.13);z-index:4}
.category-arrow__icon{width:60%;height:60%}
.category-card--terea .category-card__arrow{background:#ff5b52}
.category-card--accessories .category-card__arrow{background:#7845c7}
.category-card--arrivals .category-card__arrow{background:#102a46}
.category-card__badge{position:absolute;right:10%;top:8%;background:#ff5d32;color:#fff;padding:3.5cqi 3.5cqi;transform:rotate(13deg);border-radius:48% 52% 47% 53%;font-weight:850; font-size:7.9cqi;line-height:1;z-index:5;box-shadow:0 2px 6px #ff5d3240}
.category-art{position:absolute;z-index:2;pointer-events:none;overflow:visible;}
.category-art--device{width:78%;height:103%;right:5%;bottom:-7%;filter:drop-shadow(3px 6px 4px rgba(6,74,75,.18))}
.category-art--terea{width:82%;height:96%;right:-7%;bottom:-5%;filter:drop-shadow(1px 5px 4px rgba(124,30,26,.23))}
.category-art--accessory{width:77%;height:104%;right:-11%;bottom:-6%;filter:drop-shadow(1px 3px 3px rgba(48,20,66,.2))}
.category-art--arrival{width:76%;height:120%;right:4%;bottom:-24%;filter:drop-shadow(1px 5px 4px rgba(6,70,100,.23))}
@media(max-width:850px){
  .shop-by-category {padding:28px 4.5% 34px}
  .shop-by-category__grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
  .shop-by-category__heading{margin-bottom:19px}
  .shop-by-category h2{font-size:clamp(29px,4.65vw,41px)}
  .shop-by-category__all{font-size:12px}
  .category-card{border-radius:19px;height:auto;max-height:none;aspect-ratio:1.355/1}
  .category-card__name{font-size:clamp(22px,11.75cqi,42px)}
}
@media(max-width:520px){
  .shop-by-category{padding:28px 16px 34px}
  .shop-by-category__heading{align-items:flex-start;flex-direction:column;gap:8px;margin-bottom:18px}
  .shop-by-category__all{font-size:12px}
  .shop-by-category__grid{grid-template-columns:1fr;gap:14px;max-width:440px;margin-inline:auto}
  .category-card{border-radius:19px;aspect-ratio:1.5/1}
  .category-card__name{font-size:clamp(25px,10.9cqi,46px)}
  .category-card__description{font-size:clamp(13px,4.4cqi,19px);margin-top:4.7cqi}
  .category-card--accessories .category-card__name{font-size:clamp(26px,8.8cqi,39px)}
  .category-card--accessories .category-card__description{margin-top:3cqi}
  .category-card__arrow{width:13.5cqi;height:13.5cqi;bottom:9%}
  .category-art--device{right:0;width:68%}
  .category-art--terea{width:64%;right:-4%;bottom:-12%}
  .category-art--accessory{width:68%;right:-8%;bottom:-17%}
  .category-art--arrival{width:70%;right:-2%}
  .category-card--arrivals .category-card__arrow{bottom:4%}
  .category-card__badge{padding:2.3cqi;font-size:6cqi}
}
@media(prefers-reduced-motion:reduce){.category-card,.shop-by-category__all{transition:none}}

/* ILUMA i ONE: match the title-to-description spacing of the other category cards. */
.shop-by-category .category-card--iluma-one .category-card__name{
  margin:0;
  padding:0;
  line-height:.96;
}
.shop-by-category .category-card--iluma-one .category-card__description{
  margin:3.8cqi 0 0;
  padding:0;
  line-height:1.16;
}
@media(max-width:520px){
  .shop-by-category .category-card--iluma-one .category-card__description{
    margin-top:4.7cqi;
  }
}

/* CATEGORY MEDIA — transparent PNG/WebP artwork; heading/CTA/button remain live HTML */
.category-art { position:absolute; display:block; pointer-events:none; background:transparent; object-fit:contain; object-position:right bottom; z-index:2; }
.category-card--devices .category-art--device { width:72%; height:95%; right:0%; bottom:-3%; }
.category-card--terea .category-art--terea { width:68%; height:79%; right:-3%; bottom:-5%; }
.category-card--accessories .category-art--accessory { width:77%; height:92%; right:-5%; bottom:-3%; }
.category-card--arrivals .category-art--arrival { width:69%; height:93%; right:-1%; bottom:-2%; }
@media (max-width:520px) {
  .category-card--devices .category-art--device { width:69%; height:92%; right:-1%; bottom:-2%; }
  .category-card--terea .category-art--terea { width:60%; height:70%; right:-3%; bottom:-4%; }
  .category-card--accessories .category-art--accessory { width:68%; height:85%; right:-5%; bottom:-2%; }
  .category-card--arrivals .category-art--arrival { width:70%; height:92%; right:-2%; bottom:-2%; }
}