/* ==========================================================================
   Dahab v24 — home sections after the story hero (owner HOME)
   collections · products (chips) · ribbon · bundle banner · about · wholesale
   Values = resolved reference cascade (spec 03 + spec 07 G1/G7/G10/G13/G27).
   RTL is the default; [dir=ltr] rules only where the reference differs.
   ========================================================================== */

/* ---------- shared section chrome used by the home sections ---------- */
/* .section-heading, its h2 and its .text-link (all breakpoints) are base.css rules */
:is(.collections,.featured,.about-section,.wholesale-section) .eyebrow{display:block;margin-bottom:12px;color:#966a79;font-size:14px}

/* ==========================================================================
   1. Collections (#collections)
   ========================================================================== */
section.collections{padding-top:90px}
.collection-carousel{position:relative}
.collection-viewport{overflow:hidden;margin:-8px;padding:8px}        /* room for the hover lift + focus ring */
.collection-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:18px;margin:0}
.collection-slide{min-width:0;padding:0}

.collection-card{position:relative;display:block;width:100%;height:475px;padding:26px;overflow:hidden;isolation:isolate;
  border-radius:16px;background:var(--card-tint,#fcebf3);color:inherit;text-decoration:none;cursor:pointer;transition:transform .6s}
.hair-collection{background:var(--card-tint,#fff0ef)}
.body-collection{background:var(--card-tint,#e8f7fa)}
.skin-collection{background:var(--card-tint,#fff4f7)}
.bundle-collection{background:var(--card-tint,#fcebf3)}
.collection-card:hover{transform:translateY(-8px)}
.collection-card:focus-visible{outline:3px solid #8c3d65;outline-offset:5px}

/* top row: always LTR (number left, arrow right) */
.collection-top{position:relative;z-index:4;direction:ltr;display:flex;justify-content:space-between;align-items:center}
.collection-top>span:first-child{font:400 11px/1.5 Damas,Arial,sans-serif;letter-spacing:2px}
.round-arrow{display:grid;place-items:center;width:39px;height:39px;border:1px solid #591d3a38;border-radius:50%;
  transition:background .3s,transform .3s}
.round-arrow svg{display:block}
.collection-card:hover .round-arrow{background:#fff9;transform:rotate(-5deg)}

/* art box + giant Latin word + cut-out */
.collection-art{position:absolute;inset:36px 0 78px;height:280px;display:flex;justify-content:center;align-items:center;pointer-events:none}
.category-word{position:absolute;top:35%;left:50%;transform:translate(-50%);
  font:normal 600 128px/1 Damas,Arial,sans-serif;letter-spacing:-8px;color:#fff5;white-space:nowrap}
.skin-collection .category-word{color:#b66c99}
.collection-art>[data-product-image]{position:relative;z-index:2;display:block;width:auto;max-width:86%;height:250px;object-fit:contain;
  filter:drop-shadow(0 15px 10px #56263d19);transform:rotate(-12deg);transition:transform .8s cubic-bezier(.2,.7,.2,1);
  background:none;box-shadow:none;border-radius:0}
.body-collection .collection-art>[data-product-image]{transform:rotate(10deg)}
.collection-card:hover .collection-art>[data-product-image]{transform:rotate(-4deg) translateY(-10px) scale(1.04)}
.collection-art>svg[data-product-image]{width:85%;max-width:86%;height:250px}   /* the photo-cut SVG stays 250px at every desktop width */

/* title (physical right, also in EN) */
.collection-text{position:absolute;z-index:4;bottom:26px;right:26px;pointer-events:none}
.collection-text h3{margin:3px 0 0;font-size:28px;font-weight:500}

/* mobile carousel controls (hidden above 800px) */
.collection-swipe-controls,.collection-swipe-hint{display:none}

@media (min-width:1450px){
  .collection-art{height:350px}
  .collection-art>img[data-product-image]{height:325px}
}
@media (max-width:1150px){
  .collection-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .collection-card{height:420px;padding:20px}
  .collection-art{height:300px}
  .collection-art>img[data-product-image]{height:285px}
  .collection-text{bottom:22px;right:20px}
}
@media (max-width:900px){
  .collection-grid{gap:15px}
}
@media (max-width:800px){
  section.collections{padding-top:60px}
  .collections .section-heading{flex-wrap:wrap;align-items:center}
  .collections .section-heading h2{font-size:clamp(27px,7vw,34px)}
  .collections .section-heading .text-link{white-space:nowrap;align-self:auto}

  .collection-carousel .collection-grid{display:flex;gap:14px;touch-action:pan-y pinch-zoom}
  .collection-carousel .collection-slide{flex:0 0 86%;max-width:370px}
  .collection-carousel .collection-card{border-radius:13px;height:clamp(370px,105vw,420px);min-height:0;padding:20px;
    -webkit-user-select:none;user-select:none;-webkit-user-drag:none}
  .collection-carousel .collection-card:hover{transform:none}
  .collection-carousel .collection-card:focus-visible{outline-offset:-4px}
  .collection-carousel .collection-top>span:first-child{font-size:12px;letter-spacing:1px}
  .round-arrow{width:32px;height:32px}
  .collection-carousel .collection-card .collection-art{width:auto;height:auto;inset:52px 5% 76px}
  .collection-carousel .collection-art>[data-product-image]{width:auto;max-width:86%;height:100%}
  .collection-carousel .collection-card .category-word{font-size:105px;letter-spacing:-6px;top:35%;left:50%}
  .collection-carousel .collection-card .collection-text{inset:auto 22px 22px}
  .collection-carousel .collection-text h3{margin:0;font-size:28px;line-height:1.45}

  .collection-swipe-controls{display:flex;justify-content:center;align-items:center;gap:18px;margin-top:18px}
  .collection-swipe-controls>.collection-nav{display:inline-flex;flex-shrink:0;align-items:center;justify-content:center;width:44px;height:44px;
    padding:0;border:1px solid #591d3a30;border-radius:50%;background:none;color:#591d3a;cursor:pointer;
    transition:all .15s cubic-bezier(.4,0,.2,1)}
  .collection-swipe-controls>.collection-nav svg{width:16px;height:16px;flex-shrink:0;pointer-events:none}
  .collection-swipe-controls>.collection-nav:disabled{opacity:.3;pointer-events:none;cursor:default}
  .collection-pagination{display:flex;align-items:center;gap:0}
  .collection-pagination button{display:grid;place-items:center;width:36px;height:44px;padding:0;border:0;background:none;cursor:pointer}
  .collection-pagination button span{display:block;width:7px;height:7px;border-radius:8px;background:#591d3a35;transition:width .2s,background .2s}
  .collection-pagination button[aria-current=true] span{width:23px;background:#591d3a}
  .collection-swipe-hint{display:block;margin:3px 0 0;text-align:center;color:#80596d;font-size:14px}
}
@media (max-width:600px){
  .collection-top{padding:18px 15px;font-size:12px}
  .collection-text{padding:15px}
}
/* bundles ("more") card and any landscape pack shot: fills the art box, no tilt, no shadow, no word */
.collection-carousel .bundle-collection .collection-art,
.collection-carousel .is-landscape .collection-art{width:auto;height:auto;inset:74px 8px 80px}
.collection-carousel .bundle-collection .collection-art>[data-product-image],
.collection-carousel .is-landscape .collection-art>[data-product-image]{width:100%;max-width:100%;height:100%;object-fit:contain;filter:none;transform:none}
.collection-carousel .bundle-collection:hover .collection-art>[data-product-image],
.collection-carousel .is-landscape:hover .collection-art>[data-product-image]{transform:translateY(-4px) scale(1.02)}
.collection-carousel .bundle-collection .category-word,
.collection-carousel .is-landscape .category-word{display:none}

/* ==========================================================================
   2. Products (#products) — section chrome + filter chips (the card is CATALOG's)
   ========================================================================== */
section.featured{padding-top:6px}
.featured-item{display:contents}
.featured-item[hidden]{display:none}

.catalog-tabs{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 30px}
.catalog-tabs button{display:inline-flex;flex-shrink:0;align-items:center;justify-content:center;gap:8px;min-width:80px;height:auto;
  padding:10px 24px;border:1px solid #dfbdce;border-radius:30px;background:transparent;color:#501d39;
  font:300 16px/1.7 Damas,Arial,sans-serif;white-space:nowrap;cursor:pointer;transition:all .15s cubic-bezier(.4,0,.2,1)}
@media (hover:hover){.catalog-tabs button:hover{background:#efc9d9}}
.catalog-tabs button[aria-pressed=true]{color:#fff;background:#581d3e;border-color:#581d3e}

@media (max-width:800px){
  section.featured{padding-top:0}
}

/* ==========================================================================
   3. Ribbon marquee (.ribbon)
   ========================================================================== */
.ribbon{overflow:hidden;padding:23px 0;background:#f0d5df;border-top:1px solid #5e214b0b;border-bottom:1px solid #5e214b0b}
.ribbon>div{display:flex;gap:60px;width:max-content;animation:dahab-marquee 45s linear infinite}
.ribbon>div>span{display:flex;align-items:center;gap:45px;white-space:nowrap;font-size:23px}
.ribbon b{font:400 12px Damas,Arial,sans-serif;letter-spacing:3px}
.ribbon .brand-logo{display:block;flex-shrink:0;width:52px;height:52px;object-fit:contain}
@keyframes dahab-marquee{to{transform:translate(25%)}}
/* LTR: the track is anchored left, so run it from -25% to 0 (same rightward motion, no empty gap) */
[dir=ltr] .ribbon>div{animation-name:dahab-marquee-ltr}
@keyframes dahab-marquee-ltr{from{transform:translate(-25%)}to{transform:none}}
@media (max-width:800px){
  .ribbon{padding:19px 0}
  .ribbon>div{gap:30px}
  .ribbon>div>span{gap:26px;font-size:21px}
  .ribbon b{letter-spacing:2px;font-size:10px}
}
@media (max-width:480px){.ribbon .brand-logo{width:44px;height:44px}}

/* ==========================================================================
   4. Bundle banner (#better-together)
   ========================================================================== */
#better-together{position:relative;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.12fr);align-items:center;gap:28px;
  min-height:610px;margin:90px 5.2%;padding:50px 4.5%;overflow:hidden;border-radius:20px;background:#e5d8f4;color:#52255f}
#better-together .bundle-banner-copy{position:relative;z-index:3}
#better-together .eyebrow{display:block;margin-bottom:12px;color:#795b90;font:400 11px Damas,Arial,sans-serif;letter-spacing:2px}
#better-together .bundle-banner-copy h2{max-width:520px;margin:0;font-size:49px;font-weight:600;line-height:1.45}
[dir=ltr] #better-together .bundle-banner-copy h2{line-height:1.15}
#better-together .bundle-banner-copy p{margin:21px 0 30px;color:#72587f;font-size:17px}

#better-together .bundle-banner-art{position:relative;isolation:isolate;direction:ltr;display:flex;justify-content:center;align-items:center;
  width:100%;min-width:0;height:530px;margin:0;container-type:inline-size}
#better-together .bundle-banner-art>span{position:absolute;top:32%;left:-6%;transform:rotate(-10deg);pointer-events:none;white-space:nowrap;
  font:normal 600 clamp(100px,12vw,190px)/1 Damas,Arial,sans-serif;color:#8653aa16}

#better-together .banner-product{--display-height:min(530px,105cqw);--bottle-tilt:-3deg;--float-rise:-17px;
  position:relative;z-index:1;display:block;flex:none;width:calc(var(--display-height) * 2 / 3);max-width:none;height:var(--display-height);
  margin:0 calc(var(--display-height) * -.18);object-fit:contain;background:none;box-shadow:none;border-radius:0;
  filter:drop-shadow(0 15px 14px #41102725);transform:rotate(var(--bottle-tilt));transform-origin:50% 75%;
  animation:dahab-product-float 6.4s ease-in-out infinite paused}
#better-together .banner-grow-max{z-index:2;--display-height:min(440px,87cqw);--bottle-tilt:-10deg;--float-rise:-22px;animation-duration:6.8s;animation-delay:-1.8s}
#better-together .banner-conditioner{--display-height:min(480px,95cqw);--bottle-tilt:10deg;--float-rise:-19px;animation-duration:7.2s;animation-delay:-3.4s}
#better-together[data-moving=true] .banner-product{animation-play-state:running}
@keyframes dahab-product-float{
  0%,to{transform:translateY(9px) rotate(var(--bottle-tilt))}
  50%{transform:translateY(var(--float-rise)) rotate(calc(var(--bottle-tilt) + 3deg))}
}

.banner-motion-toggle{position:absolute;z-index:4;bottom:17px;inset-inline-end:20px;display:inline-flex;flex-shrink:0;align-items:center;justify-content:center;
  width:40px;height:40px;padding:0;border:1px solid #60377555;border-radius:50%;background:#ffffff35;color:#603775;cursor:pointer;
  transition:all .15s cubic-bezier(.4,0,.2,1)}
.banner-motion-toggle svg{display:block;width:16px;height:16px;flex-shrink:0;pointer-events:none}
.banner-motion-toggle:hover{background:#ffffff80}

@media (max-width:1150px){#better-together .bundle-banner-copy h2{font-size:43px}}
@media (max-width:800px){
  #better-together{grid-template-columns:minmax(0,1fr);gap:10px;min-height:0;margin:55px 6%;padding:38px 22px 48px;text-align:center}
  #better-together .bundle-banner-copy{min-width:0}
  #better-together .bundle-banner-copy h2{font-size:41px;margin-inline:auto}
  #better-together .eyebrow{margin-bottom:8px}
  #better-together .bundle-banner-copy p{margin:14px 0 12px;font-size:16px}
  #better-together .bundle-banner-art{display:block;position:relative;aspect-ratio:1/1.08;justify-self:center;width:100%;min-width:0;
    max-width:420px;height:auto;margin:0 auto;container-type:normal}
  #better-together .bundle-banner-art>span{font-size:100px;top:35%;left:-4%}
  #better-together .banner-product{position:absolute;inset:auto;bottom:6%;left:19%;width:62%;max-width:none;height:94%;margin:0;
    display:block;object-fit:contain;--float-rise:-10px}
  #better-together .banner-grow-max{height:76%;bottom:7%;left:-12%;--bottle-tilt:-7deg;--float-rise:-9px}
  #better-together .banner-conditioner{height:85%;bottom:7%;left:49%;--bottle-tilt:6deg;--float-rise:-8px}
}
@media (max-width:480px){
  #better-together{padding-inline:18px}
  #better-together .bundle-banner-copy h2{font-size:34px}
  .banner-motion-toggle{bottom:12px;inset-inline-end:15px}
}
@media (prefers-reduced-motion:reduce){
  #better-together .banner-product{transform:rotate(var(--bottle-tilt));animation:none}
  .banner-motion-toggle{display:none}
}

/* ==========================================================================
   5. About (#about)
   ========================================================================== */
.section.about-section{display:grid;grid-template-columns:1.5fr 1fr;align-items:center;gap:8%;
  max-width:1800px;margin:auto;padding:35px 5.2% 90px;scroll-margin-top:110px}
.about-copy h2{margin:0 0 22px;font-size:48px;font-weight:600;line-height:1.4}
.about-copy>p{max-width:780px;margin:0 0 20px;color:#755467;font-size:19px;line-height:1.95}
.about-copy .about-signature{margin-top:30px;color:#591d3a;font-size:24px;font-weight:600}
.about-community{display:flex;flex-direction:column;justify-content:center;align-items:center;gap:15px;min-height:410px;
  padding:40px 24px;border-radius:160px 160px 24px 24px;background:#e1eeeb;text-align:center}
.about-community .brand-logo{display:block;flex-shrink:0;width:135px;height:135px;object-fit:contain}
.about-community .customer-count{display:block;min-width:6.2ch;text-align:center;font-variant-numeric:tabular-nums;
  font-size:clamp(50px,5.5vw,86px);font-weight:600;line-height:1.2;letter-spacing:-2px}
.about-community>span{max-width:280px;font-size:18px;line-height:1.7}
@media (max-width:800px){
  .section.about-section{grid-template-columns:1fr;gap:35px;padding:15px 6% 90px}
  .about-copy h2{font-size:36px}
  .about-copy>p{font-size:18px}
  .about-community{justify-self:center;width:100%;max-width:430px;min-height:310px;padding:30px 22px;border-radius:120px 120px 22px 22px}
  .about-community .brand-logo{width:100px;height:100px}
  .about-community .customer-count{font-size:64px}
}

/* ==========================================================================
   6. Wholesale (#wholesale)
   ========================================================================== */
.wholesale-section{display:flex;justify-content:space-between;align-items:center;gap:35px;margin:0 5.2% 90px;padding:48px 5%;
  border-radius:20px;background:#f3d6e3;scroll-margin-top:110px}
.wholesale-section h2{margin:0;font-size:42px;font-weight:600;line-height:1.5}
.wholesale-section p{margin:8px 0 0;color:#785269;font-size:21px}
.wholesale-section .button{display:inline-flex;flex-shrink:0;align-items:center;justify-content:center;gap:36px;height:auto;min-height:54px;
  padding:15px 28px;border-radius:40px;background:#571b3b;color:#fffaf8;font:500 17px/1.35 Damas,Arial,sans-serif;white-space:nowrap;
  text-decoration:none;transition:background .2s,transform .25s}
.wholesale-section .button:hover{background:#722b4e;transform:translateY(-3px)}
.wholesale-section .button svg{display:block;width:16px;height:16px;flex-shrink:0;pointer-events:none}
@media (max-width:800px){
  .wholesale-section{flex-direction:column;align-items:flex-start;gap:22px;margin:0 6% 60px;padding:30px 24px}
  .wholesale-section h2{font-size:34px}
  .wholesale-section p{font-size:19px}
}

/* ---------- ≤800 / ≤480 heading + eyebrow rules (after the section rules so they win) ---------- */
@media (max-width:800px){
  .collections .section-heading{align-items:center}
  .collections .section-heading h2{font-size:clamp(27px,7vw,34px)}
  .collections .section-heading .text-link{align-self:auto}
  :is(.collections,.featured,.about-section,.wholesale-section) .eyebrow{margin-bottom:8px;font-size:13px}
}
@media (max-width:480px){
  .collections .section-heading h2{font-size:clamp(27px,7vw,34px)}
}

/* ---------- focus rings of the shadcn-style controls (G27) ---------- */
.catalog-tabs button:focus-visible,
.collection-swipe-controls>.collection-nav:focus-visible,
.banner-motion-toggle:focus-visible,
.wholesale-section .button:focus-visible{outline:2px solid #9a3c6d;outline-offset:6px;box-shadow:0 0 0 3px #af5b7d80}
.collection-pagination button:focus-visible{outline:2px solid #9a3c6d;outline-offset:6px}

@media (prefers-reduced-motion:reduce){
  .ribbon>div{animation:none}
  .collection-card,.collection-art>[data-product-image],.round-arrow,.collection-pagination button span{transition:none}
}