/* ============================================================================
  HOME PAGE STYLES (Buyer-ready)
  - Clean structure, clear comments, no duplicates
  - Hero carousel fixes: visible prev/next + safe overflow
  - Responsive sliders, cards, promo, newsletter
============================================================================ */

/* =========================
   0) BASIC LAYOUT UTILITIES
   ========================= */
.section { padding: 40px 0; }
.section--white { background: #fff; }
.section--pink  { background: #ffe4ec; }
.section--promo { background: transparent; padding: 24px 0 36px; }
.section--hero  { padding: 0 0 28px; } /* space for hero dots */

.container { max-width: 1200px; margin: 0 auto; padding: 0 16px; }

.section-head {
  display: flex; align-items: end; justify-content: space-between;
  margin-bottom: 18px;
}
.section-title { margin: 0; text-align: left; font-size: 28px; line-height: 1.2; }
.link { color: #1e3a8a; text-decoration: none; font-weight: 600; }

/* =================
   1) HERO CAROUSEL
   ================= */
.hero {
  position: relative;
  overflow: visible;                 /* allow dots to sit outside the hero */
  background: #0b0b2b;
}
.hero--wide { height: clamp(220px, 36vw, 720px); }
.hero__viewport { width: 100%; height: 100%; overflow: hidden; }
.hero__track { display: flex; height: 100%; transition: transform .45s ease; will-change: transform; }
.hero__slide { flex: 0 0 100%; min-width: 100%; height: 100%; position: relative; }
.hero__img {
  width: 100%; height: 100%;
  object-fit: cover;                 /* screenshot-accurate fill */
  display: block; user-select: none; -webkit-user-drag: none;
}

/* Hero navigation buttons */
.hero__nav{
  position: absolute; top: 50%; transform: translateY(-50%);
  height: 46px; width: 46px; border-radius: 999px; border: 0;
  background: #ffffffcc; color: #111827;
  box-shadow: 0 4px 12px rgba(0,0,0,.14);
  font-size: 22px; line-height: 1; display: grid; place-items: center;
  cursor: pointer; font-weight: 700;
  z-index: 9999;                     /* ensure above images/overlays */
}
.hero__nav:hover { background: #fff; box-shadow: 0 6px 16px rgba(0,0,0,.18); }
.hero__nav--prev { left: 18px; }
.hero__nav--next { right: 18px; }

/* Hero dots */
.hero__dots{
  position: absolute; left: 50%; bottom: -14px; transform: translateX(-50%);
  display: flex; gap: 6px; z-index: 9998;
}
.hero__dots button{
  width: 8px; height: 8px; border-radius: 999px; background: #cbd5e1; border: 0;
  text-indent: -9999px; cursor: pointer;
}
.hero__dots button[aria-selected="true"]{ width: 22px; height: 8px; background: #111827; }

/* Hero responsive tweaks */
@media (max-width: 640px){
  .hero__nav{ height: 40px; width: 40px; }
  .hero__nav--prev{ left: 12px; } .hero__nav--next{ right: 12px; }
  .section--hero{ padding-bottom: 22px; }
  .hero__dots{ bottom: -11px; }
}

/* Optional: nudge prev button inward on wide desktops (avoid edge widgets) */
@media (min-width: 1200px){ .hero__nav--prev { left: 56px; } }

/* Slightly taller hero on very large screens (keeps impact) */
@media (min-width: 1440px){ .hero--wide { height: min(40vw, 720px); } }

/* ============================
   2) TRENDING CATEGORIES GRID
   ============================ */
.cat-grid{ display: flex; flex-wrap: wrap; gap: 18px; }
.cat-card{
  flex: 1 1 calc(25% - 18px); min-width: 240px;
  background: #fff; border: 2px dotted #d1d5db; border-radius: 18px; padding: 12px;
  display: flex; flex-direction: column; gap: 12px;
  transition: box-shadow .2s ease, transform .2s ease;
  text-decoration: none; color: inherit;
}
.cat-card:hover{ box-shadow: 0 8px 22px rgba(2,8,23,.12); transform: translateY(-2px); }
.cat-card__title{ margin: 0; font-size: 16px; }

/* Reference-accurate refinements */
.trend-cats .cat-grid{ gap: 22px; justify-content: center; }
.trend-cats .cat-card{ flex: 1 1 calc(25% - 22px); min-width: 260px; max-width: 320px; gap: 12px; }
.trend-cats .cat-card__frame{ border: 4px dotted #9aa1a8; border-radius: 18px; padding: 14px; }
.trend-cats .cat-card__tile{
  border-radius: 14px; height: 240px; display: flex; align-items: center; justify-content: center; overflow: hidden;
}
.trend-cats .cat-card__tile img{ width: auto; height: 100%; object-fit: contain; display: block; }
.trend-cats .tile--yellow { background: #f6c21b; }
.trend-cats .tile--indigo { background: #4b50be; }
.trend-cats .tile--red    { background: #e3382f; }
.trend-cats .tile--navy   { background: #2c2c6c; }
.trend-cats .cat-card__body{ padding: 0 6px 4px; }
.trend-cats .cat-card__title{
  margin: 8px 0 0; font-weight: 800; font-size: 18px; line-height: 1.25; text-align: center;
  text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 3px; text-decoration-color: transparent;
}
.trend-cats .cat-card:hover .cat-card__frame{ box-shadow: 0 8px 24px rgba(2,8,23,.12); border-color:#8c949c; }

@media (max-width: 1024px){ .trend-cats .cat-card{ flex: 1 1 calc(50% - 22px); } .trend-cats .cat-card__tile{ height: 220px; } }
@media (max-width: 640px){ .trend-cats .cat-card{ flex: 1 1 100%; } .trend-cats .cat-card__tile{ height: 200px; } }

/* ==========================
   3) PROMO — “MEGA SALE” HERO
   ========================== */
.promo--mega .promo{
  position: relative; min-height: clamp(320px, 42vw, 520px);
  padding: clamp(28px, 4vw, 40px) 16px;
  border-radius: 0; box-shadow: none;
  background: url("/assets/images/backgrounds/Red_and_Yellow_background.webp") center/cover no-repeat, #ffcf28;
  display: grid; place-items: center; gap: clamp(14px, 2vw, 22px); text-align: center;
}
.promo--mega .timer{ display: flex; align-items: center; gap: clamp(14px, 2.2vw, 24px); }
.promo--mega .timer__cell{
  background: #ffe4ec; border: 2px solid rgba(64,37,181,.25); border-radius: 12px;
  min-width: clamp(66px, 10vw, 96px); padding: clamp(8px, 1.3vw, 12px) clamp(10px, 1.6vw, 14px);
  box-shadow: 0 6px 14px rgba(0,0,0,.08);
}
.promo--mega .timer__cell b{
  display: block; font-weight: 900; letter-spacing: 1px;
  font-size: clamp(28px, 5.2vw, 44px); line-height: 1; color: #2a2f8f;
}
.promo--mega .timer__cell span{
  display: block; margin-top: 6px; font-size: clamp(10px, 1.6vw, 12px); letter-spacing: .8px; color: #2a2f8f;
}
.promo--mega .timer__cell:not(:last-child){ position: relative; margin-right: clamp(6px, 1.2vw, 8px); }
.promo--mega .timer__cell:not(:last-child)::after{
  content:"·"; position: absolute; right: calc(-.9em); top: 50%; transform: translateY(-65%);
  font-size: clamp(20px, 3.6vw, 28px); line-height: 1; color:#1a1a1a; opacity:.85;
}
.promo--mega .promo__title{
  margin: 0; font-weight: 900; letter-spacing: -.02em;
  font-size: clamp(36px, 7vw, 72px); line-height: 1.05; color: #0b0b0b;
  text-shadow: 0 2px 0 rgba(255,255,255,.25);
}
.promo--mega .promo__text{ margin: 6px 0 12px; font-size: clamp(14px, 2.2vw, 18px); color: #353535; }
.promo--mega .btn--pill{ border-radius: 9999px; padding: 12px 22px; font-weight: 700; box-shadow: 0 6px 16px rgba(0,0,0,.18); }

@media (max-width:640px){
  .promo--mega .timer{ gap: 12px; }
  .promo--mega .timer__cell:not(:last-child)::after{ right: -.8em; }
}

/* ============================================
   4) HORIZONTAL SLIDER (BASE) + PRODUCT CARD
   ============================================ */
.h-slider { position: relative; }
.h-slider__viewport { display: flex; gap: 14px; overflow: auto; scroll-behavior: smooth; padding: 6px 0; }

.h-slider__nav{
  position: absolute; top: 50%; transform: translateY(-50%); z-index: 2;
  height: 40px; padding: 0 12px; border-radius: 10px; border: 1px solid #e5e7eb;
  background: #fff; cursor: pointer; box-shadow: 0 4px 10px rgba(2,8,23,.08);
}
.h-slider__nav--prev{ left: -4px; }
.h-slider__nav--next{ right: -4px; }

/* Product cards (base) */
.p-card{
  flex: 0 0 260px; background: #fff; border: 1px solid #e5e7eb; border-radius: 16px;
  overflow: hidden; display: flex; flex-direction: column;
  transition: box-shadow .2s ease, transform .2s ease;
}
.p-card:hover{ box-shadow: 0 10px 22px rgba(2,8,23,.12); transform: translateY(-2px); }

.p-card__img{
  height: 180px; background: #f1f5f9;
  display: flex; align-items: center; justify-content: center; text-align: center;
}
.p-card__img img{
  margin: 0 auto; width: auto; height: auto; max-width: 90%; max-height: 90%;
  object-fit: contain; display: block;
}

.p-card__body{ padding: 12px; display: grid; gap: 8px; }
.p-card__price del{ color: #9ca3af; }
.p-card__title{ font-weight: 600; font-size: 15px; text-decoration: none; color: inherit; }
.p-card__title:hover, .p-card__title:focus{ text-decoration: underline; }

/* Flip-on-hover (shared) */
.p-card--flip .p-card__img{ position: relative; overflow: hidden; border-radius: 12px 12px 0 0; }
.p-card--flip .p-card__img img{ position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; transition: opacity .25s ease; }
.p-card--flip .img--back{ opacity: 0; }
.p-card--flip:hover .img--back, .p-card--flip:focus-within .img--back{ opacity: 1; }
.p-card--flip:hover .img--front, .p-card--flip:focus-within .img--front{ opacity: 0; }

/* Paged mode (5/4/3/2/1 per view via CSS vars + media queries) */
.h-slider--paged{ --gap:16px; --per:5; position: relative; }
.h-slider--paged .h-slider__viewport{
  display: flex; gap: var(--gap); overflow: hidden; scroll-behavior: smooth; scroll-snap-type: x mandatory; padding: 4px 0;
}
.h-slider--paged .p-card{
  flex: 0 0 calc((100% - (var(--gap) * (var(--per) - 1))) / var(--per)); scroll-snap-align: start;
}
.h-slider--paged .h-slider__nav{
  position: absolute; top: 50%; transform: translateY(-50%);
  height: 42px; padding: 0 12px; border-radius: 10px; border: 1px solid #e5e7eb; background: #fff; cursor: pointer;
  box-shadow: 0 4px 10px rgba(2,8,23,.10);
}
.h-slider--paged .h-slider__nav--prev{ left: -4px; }
.h-slider--paged .h-slider__nav--next{ right: -4px; }

.h-slider--paged .h-slider__dots{ display: flex; gap: 8px; justify-content: center; margin-top: 10px; }
.h-slider--paged .h-slider__dots button{
  width: 8px; height: 8px; border-radius: 999px; border: 0; background: #cbd5e1; cursor: pointer; text-indent: -9999px;
}
.h-slider--paged .h-slider__dots button[aria-selected="true"]{ width: 22px; background: #111827; }

/* Optional: outside arrows variant */
.h-slider--outside .h-slider__nav{
  height: 44px; min-width: 44px; padding: 0 14px; border-radius: 12px;
  border: 1px solid #e5e7eb; background: #fff; box-shadow: 0 8px 22px rgba(2,8,23,.10); cursor: pointer; z-index: 2;
}
.h-slider--outside .h-slider__nav--prev{ left: -28px; }
.h-slider--outside .h-slider__nav--next{ right: -28px; }

/* Paged per-view counts (single source of truth) */
@media (max-width:1279.98px){ .h-slider--paged{ --per:4; } }
@media (max-width:1023.98px){ .h-slider--paged{ --per:3; } }
@media (max-width: 767.98px){ .h-slider--paged{ --per:2; } }
@media (max-width: 479.98px){ .h-slider--paged{ --per:1; } }

/* New Lines slider (scoped look & feel) */
.h-slider--paged.nl { --gap:16px; --per:5; }
.h-slider--paged.nl .h-slider__viewport{ padding: 2px 0 10px; }
.h-slider--paged.nl .h-slider__nav{
  position: absolute; top: 48%; transform: translateY(-50%);
  height: 44px; width: 44px; border-radius: 999px; border: 1px solid #e5e7eb; background: #fff;
  box-shadow: 0 6px 16px rgba(2,8,23,.12);
  font-size: 24px; line-height: 1; display: grid; place-items: center;
}
.h-slider--paged.nl .h-slider__nav--prev{ left: -22px; }
.h-slider--paged.nl .h-slider__nav--next{ right: -22px; }

.p-card--nl{
  position: relative; border: 1.5px solid #2b2a8222; border-radius: 16px; overflow: hidden; background: #fff;
}
.p-card--nl .p-card__img{ height: 200px; border-bottom: 1px solid #eef2f7; }
.p-card--nl .p-card__body{ padding: 14px; display: grid; gap: 10px; }
.p-card--nl .p-card__badge{
  position: absolute; top: 10px; right: 10px; z-index: 2;
  background:#ef4444; color:#fff; font-weight:700; font-size:12px; line-height:1;
  padding: 6px 8px; border-radius: 8px; box-shadow: 0 6px 12px rgba(239,68,68,.35);
}
/* Dual price rows */
.p-card--nl .price-lines{ display: grid; gap: 4px; }
.p-card--nl .price-line{ display: flex; align-items: baseline; gap: 8px; }
.p-card--nl .price-line span{ font-weight: 700; color:#111827; }
.p-card--nl .price-line small{ color:#6b7280; font-size: 12px; }
/* Title + buy button */
.p-card--nl .p-card__title{ font-weight: 600; font-size: 15px; color: #111827; text-decoration: none; }
.p-card--nl .p-card__title:hover{ text-decoration: underline; text-underline-offset: 2px; }
.btn--buy{
  height: 44px; border-radius: 999px; background: #251f6a; color: #fff; border: 2px solid #251f6a;
  font-weight: 700; cursor: pointer;
}
.btn--buy:hover{ filter: brightness(1.06); }

/* ==============================
   5) SHOP BY COUNTRY (HONEYCOMB)
   ============================== */
.country-section{
  --hex: #f7cddd; --hex2: #f4bcd0;
  background:
    radial-gradient(circle at 25px 15px, var(--hex) 2px, transparent 3px) 0 0/30px 26px,
    radial-gradient(circle at 10px 28px, var(--hex) 2px, transparent 3px) 0 0/30px 26px,
    linear-gradient(#ffdbe6,#ffdbe6);
}
.country-grid.v2{
  display: grid; grid-template-columns: repeat(4, minmax(240px,1fr));
  gap: 22px; justify-items: stretch; align-items: stretch; margin-top: 14px;
}
.country-card.v2{ text-decoration: none; color: inherit; display: block; }
.country-card.v2 .country-card__frame{
  height: 100%; display: grid; grid-template-rows: auto 1fr;
  gap: 12px; padding: 14px; background: #fff; border-radius: 18px;
  border: 4px dotted #9aa1a8; box-shadow: 0 0 0 0 rgba(0,0,0,0);
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.country-card.v2:hover .country-card__frame{
  transform: translateY(-2px); box-shadow: 0 10px 24px rgba(2,8,23,.12); border-color:#8c949c;
}
.country-card.v2 .country-card__thumb{
  height: 210px; border-radius: 12px; background:#fff; display: grid; place-items: center; overflow: hidden;
}
.country-card.v2 .country-card__thumb img{ width: 88%; height: 88%; object-fit: contain; display: block; }
.country-card.v2 .country-card__body{ padding: 0 6px 2px; text-align: center; }
.country-card.v2 .country-card__body h3{ margin: 4px 0 6px; font-weight: 800; font-size: 16px; line-height: 1.25; }
.country-card.v2 .country-card__body p{ margin: 0; color:#64748b; font-size: 14px; }

@media (max-width:1100px){ .country-grid.v2{ grid-template-columns: repeat(3, minmax(220px,1fr)); } }
@media (max-width: 820px){ .country-grid.v2{ grid-template-columns: repeat(2, minmax(220px,1fr)); } }
@media (max-width: 520px){
  .country-grid.v2{ grid-template-columns: 1fr; }
  .country-card.v2 .country-card__thumb{ height: 190px; }
}

/* ======================
   6) FLASH SALES (V2 UI)
   ====================== */
#flash-title{ margin: 5% 0 8% 0; }
.flash-grid.flash-v2{
  display: grid; grid-template-columns: repeat(4, minmax(240px,1fr));
  gap: 24px; align-items: stretch; justify-items: center; margin: 14px 0 5%;
}
.flash-card.v2{
  position: relative; width: 100%; max-width: 420px; border-radius: 22px;
  padding: 28px 20px 16px; box-shadow: 0 10px 28px rgba(2,8,23,.10);
  display: flex; flex-direction: column; align-items: center; text-align: center;
  transition: transform .18s ease, box-shadow .18s ease;
}
.flash-card.v2:hover{ transform: translateY(-2px); box-shadow: 0 16px 36px rgba(2,8,23,.14); }

/* Colour variants */
.flash--mint  { background: #d7f3da; }
.flash--pearl { background: #f6e9df; }
.flash--ice   { background: #e7eef9; }
.flash--blush { background: #ffd7dd; }

.flash-badge{
  position: absolute; left: 50%; top: -28px; transform: translateX(-50%);
  width: 96px; height: 96px; border-radius: 999px; display: grid; place-items: center;
  box-shadow: 0 6px 16px rgba(2,8,23,.15);
}
.flash-badge img{ width: 82%; height: 82%; object-fit: contain; border-radius: 999px; }

.flash-card.v2 h3{ margin: 58px 0 6px; font-size: 22px; font-weight: 800; color:#0b0b0b; }
.flash-card.v2 p { margin: 0 0 14px; color:#475569; }

.flash-btn{
  display: inline-flex; align-items: center; justify-content: center;
  padding: 10px 18px; border-radius: 999px; font-weight: 700; text-decoration: none;
  box-shadow: 0 6px 14px rgba(0,0,0,.12);
}
.flash-btn--orange{ background: #ff7235; color: #fff; }
.flash-btn--indigo{ background: #1e2b78; color: #fff; }

.flash-avatars{ list-style: none; padding: 0; margin: 14px 0 0; display: flex; gap: 12px; }
.flash-avatars li{
  width: 38px; height: 38px; border-radius: 999px; display: block; background: #fff; padding: 3px;
  box-shadow: 0 2px 8px rgba(2,8,23,.10);
}
.flash-avatars img{ width: 100%; height: 100%; object-fit: cover; border-radius: 999px; }

@media (max-width:1100px){ .flash-grid.flash-v2{ grid-template-columns: repeat(2,minmax(240px,1fr)); margin-bottom: 5%; } }
@media (max-width: 560px){ .flash-grid.flash-v2{ grid-template-columns: 1fr; } }

/* ======================
   7) FEATURED COLLECTION
   ====================== */
.featured-v2 .section-sub{ margin-top: 4px; color: #64748b; }

/* 4 → 3/2/1 per view */
.featured-v2 .ftr-slider{ --per: 4; }
@media (max-width:1200px){ .featured-v2 .ftr-slider{ --per: 3; } }
@media (max-width: 900px){ .featured-v2 .ftr-slider{ --per: 2; } }
@media (max-width: 560px){ .featured-v2 .ftr-slider{ --per: 1; } }

/* Tall product card */
.p-card--tall{
  border: 1px solid #e5e7eb; border-radius: 18px; background: #fff;
  display: flex; flex-direction: column; overflow: hidden;
}
.p-card--tall .p-card__img{
  height: 260px; display: flex; align-items: center; justify-content: center;
  background: radial-gradient(ellipse at 50% 48%, rgba(2,8,23,.04), transparent 60%);
}
.p-card--tall .p-card__img img{ width: auto; height: 88%; object-fit: contain; display: block; }
.p-card--tall .p-card__body{ padding: 16px; display: grid; gap: 10px; }
.p-card--tall .p-card__price{ display: grid; gap: 2px; color: #0f172a; }
.p-card--tall .p-card__price span{ color: #6b7280; font-weight: 500; margin-left: 4px; }
.p-card--tall .p-card__title{ text-decoration: none; color: #0b0b0b; font-weight: 700; line-height: 1.35; }
.p-card--tall .p-card__title:hover{ text-decoration: underline; }

.btn--indigo{ background: #1e2b78; color: #fff; border: 0; }
.btn--pill{ border-radius: 999px; padding: 12px 20px; font-weight: 700; }
.featured-v2 .h-slider__nav{ box-shadow: 0 6px 14px rgba(2,8,23,.10); }
.featured-v2 .h-slider__nav--prev{ left: -6px; }
.featured-v2 .h-slider__nav--next{ right: -6px; }

/* ============================
   8) SHOP BY COLLECTION (RAIL)
   ============================ */
.collection-rail{ position: relative; margin-bottom: 14px; }

.cr__viewport{
  display: flex; gap: 18px; overflow: hidden;
  scroll-snap-type: x mandatory; scroll-behavior: smooth;
  padding: 4px 2px;
}
.col-card{
  flex: 0 0 210px; scroll-snap-align: start;
  text-decoration: none; color: inherit; background: #fff;
  border: 3px dotted #9aa3b8; border-radius: 14px;
  display: flex; flex-direction: column; align-items: stretch;
  transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease;
}
.col-card:hover{
  transform: translateY(-2px); border-color: #7d8aa3; box-shadow: 0 10px 24px rgba(2,8,23,.10);
}
.col-card__img{
  height: 165px; padding: 12px; display: flex; align-items: center; justify-content: center;
  background: radial-gradient(60% 60% at 50% 50%, rgba(246,247,255,.35), transparent 60%);
}
.col-card__img img{ max-width: 90%; max-height: 100%; width: auto; height: auto; object-fit: contain; display: block; }
.col-card__caption{
  background: #241E89; color: #fff; font-weight: 700; text-align: center;
  padding: 12px 10px; border-radius: 0 0 10px 10px;
  font-size: 14px; line-height: 1.1; min-height: 44px; display: grid; place-items: center;
}

/* Rail arrows + dots */
.cr__nav{
  position: absolute; top: 50%; transform: translateY(-50%);
  height: 40px; min-width: 40px; padding: 0 10px;
  border-radius: 999px; border: 1px solid #e5e7eb; background: #fff; cursor: pointer;
  box-shadow: 0 4px 10px rgba(2,8,23,.10); z-index: 2;
  font-size: 20px; font-weight: 800; color: #111827;
}
.cr__nav--prev{ left: -8px; }
.cr__nav--next{ right: -8px; }
.cr__nav[disabled]{ opacity: .4; cursor: not-allowed; }

.cr__dots{ display: flex; gap: 8px; justify-content: center; margin-top: 10px; }
.cr__dots button{
  width: 8px; height: 8px; border-radius: 999px; border: 0; background: #cbd5e1; cursor: pointer; text-indent: -9999px;
}
.cr__dots button[aria-selected="true"]{ width: 22px; background: #111827; }

/* ===========================
   9) NEWSLETTER (FINAL VERSION)
   =========================== */
.nl-banner{
  display: grid; grid-template-columns: minmax(260px, 480px) 1fr;
  align-items: center; gap: clamp(18px, 4vw, 40px);
  background: #232b86; color: #fff; border-radius: 22px;
  padding: clamp(22px, 4vw, 36px); box-shadow: 0 22px 48px rgba(2,8,23,.20);
  overflow: visible; /* allow artwork to pop above the card */
}
.nl-banner__media{
  position: relative; min-height: 220px;
  display: flex; align-items: flex-end; justify-content: center;
}
.nl-banner__media img{
  position: absolute;
  width: 100%; max-width: 315px; height: auto; object-fit: contain;
  transform: translateY(clamp(-18px, -5vw, -54px));
  filter: drop-shadow(0 12px 28px rgba(0,0,0,.25));
  will-change: transform;
}

.nl-banner__content h2{
  margin: 0 0 14px; font-weight: 800; letter-spacing: -.01em; font-size: clamp(22px, 3.4vw, 34px);
}

.nl-form{
  display: flex; align-items: center; gap: 0; width: min(780px, 100%);
  background: #fff; border-radius: 9999px; overflow: hidden; box-shadow: 0 10px 26px rgba(0,0,0,.22);
  margin: 6px 0 10px;
}
.nl-form input{
  flex: 1 1 auto; min-width: 0; height: 56px; border: 0; outline: 0; padding: 0 18px; font-size: 16px; color: #111827;
}
.nl-form input::placeholder{ color: #6b7280; }
.nl-btn{
  height: 56px; padding: 0 22px; background: #0b102e; color: #fff; border: 0; cursor: pointer; font-weight: 700; white-space: nowrap;
}
.nl-btn:focus-visible{ outline: 2px solid #fff; outline-offset: 2px; }
.nl-note{ margin: 0; opacity: .95; font-size: 14px; }

/* A11y helper */
.visually-hidden{
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* Newsletter responsive */
@media (max-width: 1024px){
  .nl-banner{ grid-template-columns: 1fr; overflow: hidden; }
  .nl-banner__media{ order: -1; min-height: 180px; }
  .nl-banner__media img{ transform: none; max-width: 315px; }
  .nl-form{ width: 100%; }
}
@media (max-width: 560px){
  .nl-form{ box-shadow: 0 8px 20px rgba(0,0,0,.18); }
  .nl-form input{ height: 52px; }
  .nl-btn{ height: 52px; padding: 0 18px; }
}

/* ==========================================
   10) SHARED RESPONSIVE CARD GROUP HELPERS
   ========================================== */
@media (max-width:1180px){ .cat-card, .country-card, .flash-tile, .p-grid .p-card{ flex: 1 1 calc(33.333% - 16px); } }
@media (max-width: 900px){
  .promo{ flex-direction: column; text-align: center; }
  .newsletter{ flex-direction: column; align-items: flex-start; }
}
@media (max-width: 768px){ .cat-card, .country-card, .flash-tile, .p-grid .p-card{ flex: 1 1 calc(50% - 16px); } }
@media (max-width: 640px){
  .cat-card, .country-card, .flash-tile, .p-grid .p-card{ flex: 1 1 100%; }
  .logo-rail__item{ flex-basis: 120px; }
}

/* =================
   End of home.css
   ================= */