/* ===========================================================================
 * DUNEUS BUNDLES — "Editorial Hero" bundle section (Concept 1)
 * Presentation only. Colours/spacing come from the section settings via the
 * --dnb-* custom properties set inline on .dn-bundles.
 * ======================================================================== */
.dn-bundles[hidden]{ display:none !important; }
.dn-bundle[hidden]{ display:none !important; }

.dn-bundles{
  background:var(--dnb-bg,#fff);
  padding-top:var(--dnb-pt,44px);
  padding-bottom:var(--dnb-pb,44px);
  --dnb-line:#e7e7e9;
  --dnb-mute:#8a8a90;
  --dnb-panel:#f5f5f6;
  font-family:'Montserrat','Tajawal',sans-serif;
}
[dir="rtl"] .dn-bundles{ font-family:'Tajawal','Montserrat',sans-serif; }

.dn-bundles__head{
  margin:0 0 22px; display:flex; align-items:flex-end; justify-content:space-between;
  gap:16px; flex-wrap:wrap;
}
.dn-bundles__headtext{ min-width:0; }
.dn-bundles__all{
  flex:none; display:inline-flex; align-items:center; gap:7px; text-decoration:none;
  border:1px solid var(--dnb-ink,#111214); color:var(--dnb-ink,#111214);
  border-radius:999px; padding:11px 20px; font-weight:800; font-size:12px;
  letter-spacing:.08em; text-transform:uppercase; white-space:nowrap;
  transition:background .2s ease, color .2s ease, border-color .2s ease;
}
[dir="rtl"] .dn-bundles__all{ letter-spacing:0; text-transform:none; }
.dn-bundles__all svg{ width:15px; height:15px; }
[dir="rtl"] .dn-bundles__all svg{ transform:scaleX(-1); }
.dn-bundles__all:hover{ background:var(--dnb-ink,#111214); color:#fff; border-color:var(--dnb-ink,#111214); }
.dn-bundles__title{
  font-weight:900; font-size:clamp(1.4rem,3.4vw,2rem); letter-spacing:-.01em;
  text-transform:uppercase; margin:0; color:var(--dnb-ink,#111214);
}
[dir="rtl"] .dn-bundles__title{ text-transform:none; }
.dn-bundles__sub{ color:var(--dnb-mute); margin:6px 0 0; max-width:60ch; font-size:.95rem; }

.dn-bundles__list{ display:flex; flex-direction:column; gap:22px; }
.dn-bundles--cols2 .dn-bundles__list{ display:grid; grid-template-columns:1fr; gap:22px; }

/* ---- the hero card ---- */
.dn-bundle{
  display:grid; grid-template-columns:1.05fr 1fr; gap:0; align-items:start;
  border:1px solid var(--dnb-line); border-radius:18px; overflow:hidden;
  background:#fff; opacity:0; transform:translateY(8px);
  animation:dnbIn .45s cubic-bezier(.2,.7,.2,1) forwards;
}
@keyframes dnbIn{ to{ opacity:1; transform:none; } }
@media (prefers-reduced-motion:reduce){ .dn-bundle{ animation:none; opacity:1; transform:none; } }

/* Show the product photo at its OWN aspect ratio — full, never cropped and no
   empty letterbox bands. All DUNEUS product shots share one ratio, so the cards
   line up. */
.dn-bundle__media{
  position:relative; display:block; overflow:hidden; background:#f2f2f3;
  align-self:start; aspect-ratio:4/5;   /* refined to the real image ratio by JS */
}
.dn-bundle__gallery{ border-radius:inherit; }
/* arrows appear on hover (desktop); touch devices flip by swipe */
.dn-bundle__media:hover .dn-card-gnav{ opacity:1; }
.dn-bundle__badge{
  position:absolute; inset-inline-start:0; top:0; margin:14px; z-index:5;
  background:var(--dnb-accent,#FF5100); color:#fff; font-weight:800; font-size:10px;
  letter-spacing:.14em; text-transform:uppercase; padding:6px 11px; border-radius:7px;
}
[dir="rtl"] .dn-bundle__badge{ letter-spacing:0; text-transform:none; }

.dn-bundle__body{
  padding:30px; display:flex; flex-direction:column; gap:16px; justify-content:center;
}
.dn-bundle__eyebrow{
  font-weight:800; font-size:11px; letter-spacing:.22em; text-transform:uppercase;
  color:var(--dnb-accent,#FF5100);
}
[dir="rtl"] .dn-bundle__eyebrow{ letter-spacing:.02em; text-transform:none; }
.dn-bundle__name{
  font-weight:900; font-size:clamp(1.3rem,3vw,1.9rem); line-height:1.05;
  text-transform:uppercase; margin:0; letter-spacing:-.01em;
}
[dir="rtl"] .dn-bundle__name{ text-transform:none; }
.dn-bundle__name a{ color:var(--dnb-ink,#111214); text-decoration:none; }

/* the deal, in words */
.dn-bundle__deal{
  margin:0; font-weight:700; font-size:.95rem; line-height:1.45;
  color:var(--dnb-ink,#111214);
}

/* second piece(s) */
.dn-bundle__gifts{ display:flex; flex-direction:column; gap:10px; }
.dn-bundle__gifts-k{
  font-weight:800; font-size:11px; letter-spacing:.14em; text-transform:uppercase;
  color:var(--dnb-accent,#FF5100);
}
[dir="rtl"] .dn-bundle__gifts-k{ letter-spacing:0; text-transform:none; }
.dn-bundle__giftrow{
  display:flex; gap:10px; overflow-x:auto; scrollbar-width:none; padding-bottom:2px;
}
.dn-bundle__giftrow::-webkit-scrollbar{ display:none; }
.dn-bundle__gift{
  flex:0 0 120px; display:flex; flex-direction:column; gap:7px; text-decoration:none;
  border:1px solid var(--dnb-line); border-radius:12px; padding:8px; background:#fff;
  transition:border-color .18s ease, transform .18s ease;
}
.dn-bundle__gift:hover{ border-color:var(--dnb-ink,#111214); transform:translateY(-2px); }
.dn-bundle__gift-thumb{
  width:100%; aspect-ratio:1/1; border-radius:8px; overflow:hidden;
  background:radial-gradient(120% 120% at 60% 20%,#3a3d44,#16171b);
  display:flex; align-items:center; justify-content:center; color:#fff;
}
.dn-bundle__gift-thumb img{ width:100%; height:100%; object-fit:cover; }
.dn-bundle__gift-v{
  font-weight:700; font-size:12px; line-height:1.3; color:var(--dnb-ink,#111214);
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
}
.dn-bundle__gift-price{ display:flex; align-items:baseline; gap:6px; flex-wrap:wrap; margin-top:auto; }
.dn-bundle__gift-price .is-old{ font-weight:700; font-size:11px; color:var(--dnb-mute); text-decoration:line-through; }
.dn-bundle__gift-price .is-new{ font-weight:900; font-size:13px; color:var(--dnb-ink,#111214); }
.dn-bundle__gift-price .is-free{ font-weight:900; font-size:12px; color:#16a34a; letter-spacing:.04em; }

/* price + save + cta */
.dn-bundle__foot{ display:flex; align-items:center; gap:14px; flex-wrap:wrap; }
.dn-bundle__price{ display:flex; align-items:baseline; gap:10px; }
.dn-bundle__price-new{ font-weight:900; font-size:1.6rem; color:var(--dnb-ink,#111214); }
.dn-bundle__price-old{ font-weight:700; font-size:1rem; color:var(--dnb-mute); text-decoration:line-through; }
.dn-bundle__save{
  font-weight:800; font-size:12px; color:#fff; background:#16a34a; border-radius:6px;
  padding:5px 10px; letter-spacing:.03em;
}
.dn-bundle__cta{
  margin-top:2px; text-align:center; text-decoration:none; background:var(--dnb-ink,#111214);
  color:#fff; border-radius:12px; font-weight:800; font-size:13px; letter-spacing:.1em;
  text-transform:uppercase; padding:16px; transition:background .2s ease;
}
[dir="rtl"] .dn-bundle__cta{ letter-spacing:.02em; text-transform:none; }
.dn-bundle__cta:hover{ background:var(--dnb-accent,#FF5100); color:#fff; }

/* multi-column layouts (2–4). The wide image|body hero is only for 1 column;
   from 2 columns up, each card becomes vertical (image on top, body below). */
@media (min-width:992px){
  .dn-bundles--cols2 .dn-bundles__list,
  .dn-bundles--cols3 .dn-bundles__list,
  .dn-bundles--cols4 .dn-bundles__list{ display:grid; gap:20px; }
  .dn-bundles--cols2 .dn-bundles__list{ grid-template-columns:repeat(2,1fr); }
  .dn-bundles--cols3 .dn-bundles__list{ grid-template-columns:repeat(3,1fr); }
  .dn-bundles--cols4 .dn-bundles__list{ grid-template-columns:repeat(4,1fr); }

  .dn-bundles--cols2 .dn-bundle,
  .dn-bundles--cols3 .dn-bundle,
  .dn-bundles--cols4 .dn-bundle{ grid-template-columns:1fr; }
  .dn-bundles--cols3 .dn-bundle__body,
  .dn-bundles--cols4 .dn-bundle__body{ padding:18px; gap:12px; }
  .dn-bundles--cols3 .dn-bundle__name,
  .dn-bundles--cols4 .dn-bundle__name{ font-size:1.1rem; }
}
/* tablet: cap at two columns so cards never get too cramped */
@media (min-width:600px) and (max-width:991.98px){
  .dn-bundles--cols2 .dn-bundles__list,
  .dn-bundles--cols3 .dn-bundles__list,
  .dn-bundles--cols4 .dn-bundles__list{ display:grid; grid-template-columns:repeat(2,1fr); gap:18px; }
  .dn-bundles--cols2 .dn-bundle,
  .dn-bundles--cols3 .dn-bundle,
  .dn-bundles--cols4 .dn-bundle{ grid-template-columns:1fr; }
}

/* responsive — stack image over body */
@media (max-width:860px){
  .dn-bundles{ padding-top:var(--dnb-pt-m,28px); padding-bottom:var(--dnb-pb-m,28px); }
  .dn-bundles__list,
  .dn-bundles--cols2 .dn-bundles__list{ grid-template-columns:1fr; gap:18px; }
  .dn-bundle{ grid-template-columns:1fr; border-radius:14px; }
  .dn-bundle__media{ width:100%; }
  .dn-bundle__body{ padding:18px; gap:13px; }
  .dn-bundle__name{ font-size:1.2rem; }
  .dn-bundle__deal{ font-size:.9rem; }
  .dn-bundle__gift{ flex-basis:116px; }
  .dn-bundle__foot{ gap:10px; }
  .dn-bundle__price-new{ font-size:1.4rem; }
}
/* very small phones: let the 2nd-piece row breathe */
@media (max-width:420px){
  .dn-bundle__gift{ flex-basis:104px; }
}

/* visibility toggles from section settings */
@media (min-width:992px){ .dn-bundles.dn-hide-d{ display:none !important; } }
@media (max-width:991.98px){ .dn-bundles.dn-hide-m{ display:none !important; } }

/* Men/Women filter inside the bundles section */
.dn-bundles__gen{ margin:0 0 18px; }