/* v6n23c — spacing, sizing and formatting from the Nov 11 2026 audit.
   Scope: homepage (body.p-index) and department pages (body:is(.p-dept, .p-jewelry)).
   Loaded last. Does not change copy, the hero video, or the phone
   Services peek (piercing photo) from v6n23b.
   Undo: remove the <link> to this file, or git revert the v6n23c commit. */

/* ============================================================
   1. Walk the aisle — Islamic chips must all be readable
   The motion cards had a fixed height and hidden overflow, so
   the longer Islamic chip list was cut mid-word.
   ============================================================ */
.mo .p-index #aisles .bay.type{
  height:auto;
  min-height:min(60svh,600px);
  overflow:hidden;
}
.p-index #aisles .bay.type .bay-body{
  overflow:visible;
  flex:1 0 auto;
  justify-content:space-between;
  gap:20px;
}
.p-index #aisles .bay.type ul{
  display:flex;
  flex-wrap:wrap;
  gap:6px 8px;
  overflow:visible;
  margin:0;
}
.p-index #aisles .bay.type li{
  max-width:100%;
  font-size:14px;
  white-space:nowrap;
}

/* ============================================================
   2. Department pages — jump chips sit above the Call bar,
   wrap so no name is cut mid-word, and the hero isn't a
   tall empty navy field that pushes them off the first screen.
   ============================================================ */
/* The site-wide "dock clearance" padding was on every main section,
   including the hero, which reserved a 134px empty strip and pushed
   the jump chips under the Call bar. Clearance belongs at the page
   bottom, not under the hero. */
:is(.p-dept, .p-jewelry) main > section.ihero{
  padding-bottom:16px;
}
:is(.p-dept, .p-jewelry) .ih-media{
  min-height:0;
}
:is(.p-dept, .p-jewelry) .ihero .wrap.ih-txt{
  padding:24px 0 20px;
}
@media (max-width:899px){
  :is(.p-dept, .p-jewelry) .ih-media{
    min-height:38svh;
  }
}
@media (min-width:900px){
  :is(.p-dept, .p-jewelry) .ih-media{
    min-height:40svh;
  }
  :is(.p-dept, .p-jewelry) .ihero .wrap.ih-txt{
    padding:36px 0 28px;
  }
  :is(.p-dept, .p-jewelry) .ihero .wrap{
    padding-bottom:28px;
  }
}

:is(.p-dept, .p-jewelry) .jump ul{
  flex-wrap:wrap;
  overflow-x:visible;
  overflow-y:visible;
  gap:8px 8px;
  padding-block:10px 8px;
  scrollbar-width:none;
}
:is(.p-dept, .p-jewelry) .jump li{
  flex:0 1 auto;
  max-width:100%;
}
:is(.p-dept, .p-jewelry) .jump a{
  white-space:nowrap;
}
/* On a phone, two chips to a row so every aisle name is visible
   without a tall stack or a mid-word cut. */
@media (max-width:599px){
  :is(.p-dept, .p-jewelry) .jump li{
    flex:0 1 calc(50% - 8px);
    max-width:calc(50% - 8px);
  }
  :is(.p-dept, .p-jewelry) .jump a{
    white-space:normal;
    text-wrap:balance;
    width:100%;
    justify-content:center;
    text-align:center;
    min-height:44px;
    padding:8px 10px;
    font-size:13px;
    line-height:1.25;
  }
}

/* Women's: the bridal note stays on the page, just below the
   aisle chips instead of between the hero and the chips. */
.p-dept.p-d-women main{
  display:flex;
  flex-direction:column;
}
.p-dept.p-d-women main > .ihero{order:0}
.p-dept.p-d-women main > .jump{order:1}
.p-dept.p-d-women main > .light:has(.bridal-note){order:2}
.p-dept.p-d-women main > *:not(.ihero):not(.jump):not(:has(.bridal-note)){order:3}

/* ============================================================
   3. Urdu Thank-you — English body must read left-to-right
   so "Al Hamra" isn't shown as ".Hamra".
   ============================================================ */
html:lang(ur) .thanks .letter p[lang="en"],
html:lang(ur) .thanks .letter p.ltr-en{
  direction:ltr;
  unicode-bidi:isolate;
  text-align:start;
}

/* ============================================================
   4. Occasion photo row — never clip the first or last photo,
   especially on a right-to-left page.
   ============================================================ */
.p-index #occasions .occ-more{
  padding-inline:12px;
  scroll-padding-inline:12px;
}
html:lang(ur) .p-index #occasions .occ-more,
html[dir="rtl"] .p-index #occasions .occ-more{
  direction:ltr;
  padding-inline:16px;
  scroll-padding-inline:16px;
}

/* ============================================================
   5. Visit — heading clears the sticky header; desktop
   uses the width a little more evenly. Phone buttons stay
   as they are from v6n23b.
   ============================================================ */
.p-index #visit{
  scroll-margin-top:calc(var(--hdr-real, var(--hdr, 90px)) + 16px);
}
@media (min-width:900px){
  .p-index #visit .vrows,
  .p-index #visit .bridal-note,
  .p-index #visit .visit-card > .row-btns{
    max-width:720px;
  }
}

/* ============================================================
   6. New arrivals — less empty padding around a short,
   text-only section. No invented products.
   ============================================================ */
.p-index main > .v6n12-arrivals,
.p-index #new-arrivals{
  padding-top:28px;
  padding-bottom:32px;
}

/* ============================================================
   7. Thank-you card — less empty cream under the letter
   ============================================================ */
.p-index main > .thanks .letter{
  padding:32px 28px 28px;
  min-height:0;
}
@media (min-width:900px){
  .p-index main > .thanks .letter{
    padding:44px 48px 40px;
  }
}

/* ============================================================
   Image and element rhythm: consistent gaps in photo rows
   that already exist, without changing v6n23b phone peek.
   ============================================================ */
.p-index #walls .ch,
.p-index #all-around-store .ch{
  /* leave existing photo sizes; just make sure figures don't overflow */
  min-width:0;
}