/* v6n23 — homepage polish from Shah's handwritten notes (Nov 11 2026).
   Scope: homepage only (body.p-index). Loaded last on /, /bn/, /hi/, /ur/.
   Undo: remove the <link> to this file (or git revert the v6n23 commit). */

.p-index{--v23-y:clamp(56px,6vw,88px);--v23-gutter:max(20px,calc((100% - 1240px)/2))}

/* ---------- 1 + 11. Section rhythm: one consistent vertical padding ---------- */
.p-index main > #aisles{padding-top:var(--v23-y);padding-bottom:calc(var(--v23-y)*.5)}
.p-index main > .promise{padding-top:calc(var(--v23-y)*.5);padding-bottom:12px}
.p-index main > .v6n12-arrivals{padding-top:calc(var(--v23-y)*.5);padding-bottom:var(--v23-y)}
.p-index main > #everything,
.p-index main > #occasions,
.p-index main > #walls,
.p-index main > #all-around-store,
.p-index main > .thanks{padding-top:var(--v23-y);padding-bottom:var(--v23-y)}
.p-index main > .thanks .letter{margin-top:0;margin-bottom:0}
.p-index main > #visit{padding-bottom:28px} /* <main> already reserves 100px for the fixed Directions/Call dock */

/* Headings that animate in: never leave them invisible (Shah: "What we carry" title missing). */
html body.p-index #everything .reveal,
html body.p-index #occasions .reveal,
html body.p-index #press .reveal,
html body.p-index .thanks .letter{opacity:1;transform:none}

/* ---------- 3. Walk the aisle: lighter card overlay so the loops read clearer (CSS only) ---------- */
.p-index #aisles .bay .ph::after{background:linear-gradient(180deg,rgba(14,21,54,0) 0%,rgba(14,21,54,0) 38%,rgba(14,21,54,.42) 58%,rgba(14,21,54,.82) 80%,rgba(14,21,54,.92) 100%)}
.p-index #aisles .bay-body h3{text-shadow:0 1px 14px rgba(14,21,54,.55)}

/* ---------- 1 + 4. What we carry ---------- */
.p-index #everything .wrap > h2{margin-top:6px;margin-bottom:12px}
.p-index #everything .sub{margin:0 0 22px}
@media (min-width:900px){
  /* expanded department: smaller hero photo beside the intro, not a giant banner */
  .p-index #everything .flap-in .fl-body{display:grid;grid-template-columns:minmax(0,420px) minmax(0,1fr);column-gap:36px;align-items:end;padding-top:32px}
  .p-index #everything .flap-in .fl-body > *{grid-column:1 / -1}
  .p-index #everything .flap-in .fl-body > .fl-hero{grid-column:1;margin:0;border-radius:14px;overflow:hidden;aspect-ratio:16/10;width:100%;max-height:none}
  .p-index #everything .flap-in .fl-body > .fl-hero picture{width:100%;height:100%;aspect-ratio:auto}
  .p-index #everything .flap-in .fl-body > .fl-hero img{width:100%;height:100%;object-fit:cover}
  .p-index #everything .flap-in .fl-body > .fl-intro{grid-column:2;align-self:end;margin:0;max-width:56ch}
  .p-index #everything .flap-in .fl-body > .fl-hero + .fl-intro{padding-bottom:4px}
  .p-index #everything .flap-in .fl-body > :nth-child(3){margin-top:28px}
  /* photo grids inside an open department: even tiles, aligned edges */
  .p-index #everything .flap-in .ph-strip{display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:12px;padding:0;margin:0 0 24px;overflow:visible;width:100%;max-width:none}
  .p-index #everything .flap-in .grp > .fl-vid{max-width:300px;margin:0 0 16px;border-radius:12px;overflow:hidden}
  .p-index #everything .flap-in .ph-strip > figure{flex:none;width:auto;max-width:none;margin:0;aspect-ratio:4/5;border-radius:12px;overflow:hidden}
  .p-index #everything .flap-in .ph-strip > figure picture{width:100%;height:100%;aspect-ratio:auto}
  .p-index #everything .flap-in .ph-strip > figure img{width:100%;height:100%;aspect-ratio:auto;object-fit:cover}
}
@media (max-width:899px){
  .p-index #everything .flap-in .fl-body > .fl-hero{aspect-ratio:16/10;max-height:240px;overflow:hidden}
  .p-index #everything .flap-in .fl-body > .fl-hero picture,
  .p-index #everything .flap-in .fl-body > .fl-hero img{width:100%;height:100%;aspect-ratio:auto;object-fit:cover}
  .p-index #everything .flap-in .ph-strip > figure img{object-fit:cover}
}

/* ---------- 6. Services: closed peek + open state ---------- */
/* Closed: Shah's ear-piercing photo big and uncropped (native 2560x1709 ratio), the two others beside it */
.p-index #everything .service-peek{display:grid;grid-template-columns:minmax(0,2fr) minmax(0,1fr);grid-template-rows:1fr 1fr;gap:10px;max-width:760px;overflow:visible;padding:4px 0 0}
.p-index #everything .service-peek figure{flex:none;max-width:none;width:auto;margin:0;border-radius:12px;overflow:hidden;min-height:0}
.p-index #everything .service-peek figure picture{display:block;width:100%;height:100%}
.p-index #everything .service-peek figure img{width:100%;height:100%;aspect-ratio:auto;object-fit:cover}
.p-index #everything .service-peek figure.svc-ear{grid-column:1;grid-row:1 / span 2;aspect-ratio:2560/1709;align-self:start}
.p-index #everything .service-peek figure.svc-ear img{object-fit:contain;background:#14284b}
.p-index #everything .service-peek figure:not(.svc-ear){grid-column:2;position:relative}
.p-index #everything .service-peek figure:not(.svc-ear) img{position:absolute;inset:0}
.p-index #everything .svc-note{margin-top:16px;max-width:760px}
@media (max-width:599px){
  .p-index #everything .service-peek{grid-template-columns:1fr 1fr;grid-template-rows:auto auto}
  .p-index #everything .service-peek figure.svc-ear{grid-column:1 / -1;grid-row:1}
  .p-index #everything .service-peek figure:not(.svc-ear){grid-column:auto;grid-row:2;aspect-ratio:4/3}
}
.p-index #everything:has(#dept-services[open]) .svc-note{display:none}

/* Open: clear hierarchy — photo, ear piercing, clothing services, then hours/buttons */
.p-index #dept-services .svc-ear-open{margin:4px 0 18px;border-radius:14px;overflow:hidden;aspect-ratio:2560/1709;max-width:560px}
.p-index #dept-services .svc-ear-open picture,
.p-index #dept-services .svc-ear-open img{display:block;width:100%;height:100%;object-fit:contain}
.p-index #dept-services .grp{padding-top:8px}
.p-index #dept-services .grp + .grp{margin-top:28px;padding-top:28px;border-top:1px solid rgba(14,21,54,.1)}
.p-index #dept-services .grp-head{margin-bottom:12px}
.p-index #dept-services .custom-contact{margin-top:20px}
.p-index #dept-services .fl-end{margin-top:28px}
@media (min-width:900px){
  .p-index #dept-services .flap-in .fl-body > .fl-hero{aspect-ratio:4/3}
  .p-index #dept-services #f-services-personal-service{display:grid;grid-template-columns:minmax(0,520px) minmax(0,1fr);column-gap:36px;align-items:start}
  .p-index #dept-services #f-services-personal-service > .grp-head{grid-column:1 / -1;grid-row:1}
  .p-index #dept-services #f-services-personal-service > .svc-ear-open{grid-column:1;grid-row:2;margin:0}
  .p-index #dept-services #f-services-personal-service > .items{grid-column:2;grid-row:2;grid-template-columns:1fr;align-self:center}
}

/* ---------- 7. What's the occasion ---------- */
.p-index #occasions .sub{margin-bottom:18px}
.p-index #occasions .chips{margin-bottom:22px}
.p-index #occasions .occ-txt .eyebrow{margin:18px 0 10px}
.p-index #occasions .occ-more > figure img{object-fit:cover}
/* Only the chosen occasion takes up space (stacked hidden panels left an empty band under shorter ones) */
.p-index #occasions .occ-panel{display:none}
.p-index #o-eid:checked~.occ-panels .p-eid,
.p-index #o-wedding:checked~.occ-panels .p-wedding,
.p-index #o-baby:checked~.occ-panels .p-baby,
.p-index #o-everyday:checked~.occ-panels .p-everyday,
.p-index #o-umrah:checked~.occ-panels .p-umrah{display:grid}
@media (min-width:900px){
  .p-index #occasions .occ-panel{grid-template-columns:minmax(0,5fr) minmax(0,7fr);column-gap:44px;align-items:start}
  .p-index #occasions .occ-ph{margin:0}
  /* "more photos" become one tidy scrolling row instead of a tall half-empty grid */
  .p-index #occasions .occ-more{display:flex;flex-wrap:nowrap;gap:12px;overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x proximity;margin:22px 0 0;padding:2px 2px 10px}
  .p-index #occasions .occ-more > figure{flex:0 0 150px;width:150px;max-width:none;aspect-ratio:4/5;margin:0;scroll-snap-align:start;border-radius:12px;overflow:hidden}
  .p-index #occasions .occ-more > figure picture{width:100%;height:100%;aspect-ratio:auto}
  .p-index #occasions .occ-more > figure img{width:100%;height:100%;aspect-ratio:auto}
}

/* ---------- 9. "A boutique staple of Hillside Avenue" (press) ---------- */
.p-index main > #press{margin-top:0;padding:var(--v23-y) var(--v23-gutter)}
.p-index #press h2{font-size:clamp(34px,4.6vw,64px);line-height:1.05;margin:10px 0 10px;max-width:20ch}
.p-index #press .press-src{margin:0 0 26px;max-width:70ch}
.p-index #press .press-card{margin:0;border-radius:18px;overflow:hidden}
.p-index #press .press-body{padding:clamp(20px,2.6vw,36px);align-content:center;gap:14px}
@media (min-width:900px){
  .p-index #press .press-card{grid-template-columns:minmax(0,1.15fr) minmax(0,1fr)}
  .p-index #press .press-card figure,
  .p-index #press .press-card picture{height:100%}
  .p-index #press .press-card img{height:100%;width:100%;object-fit:cover;min-height:320px}
}

/* ---------- 10. Visit link list + footer: fewer underlines, tighter rhythm ---------- */
.p-index #visit dl a,
.p-index .foot a{text-decoration:none}
.p-index #visit dl a{border-bottom:1px solid rgba(230,194,126,.45)}
.p-index #visit dl a:hover,.p-index #visit dl a:focus-visible{border-bottom-color:currentColor}
.p-index .foot a:hover,.p-index .foot a:focus-visible{text-decoration:underline;text-underline-offset:3px}
.p-index .foot{margin-top:32px;padding:22px 0 0}
.p-index .foot nav{gap:4px 22px;margin:0}
.p-index .foot .soc{margin:8px 0 0;padding-top:8px}
.p-index .foot .cap{margin:10px 0 0}
.p-index .foot .cap + .cap{margin-top:2px}
.p-index .foot .bsi-footer{margin-top:14px}
.p-index .foot .leave-review{margin:10px 0 0}
.p-index .foot .leave-review a{color:var(--gold-hi,#e6c27e)}
.p-index #visit .bridal-note{margin-top:14px}

/* =====================================================================
   v6n23b — Shah's review (Nov 11 2026): "Why is the piercing photo so big?
   And wtf is this spacing." + spacing/sizing audit. Overrides above.
   ===================================================================== */

/* ---------- A. Services, closed: a modest photo row, not a hero ----------
   Same 16px gap as every other department row. Piercing photo is shown
   whole (contain, native 2560x1709 ratio), the two 4:3 companions match its height. */
.p-index #everything .service-peek{display:grid;grid-template-columns:minmax(0,300fr) minmax(0,267fr) minmax(0,267fr);grid-template-rows:auto;gap:16px;max-width:866px;padding:4px 0 0;align-items:start}
.p-index #everything .service-peek figure{position:relative;aspect-ratio:4/3;height:auto;align-self:start}
.p-index #everything .service-peek figure.svc-ear{order:-1;grid-column:auto;grid-row:auto;aspect-ratio:2560/1709;background:#14284b}
.p-index #everything .service-peek figure:not(.svc-ear){grid-column:auto}
.p-index #everything .service-peek figure img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.p-index #everything .service-peek figure.svc-ear img{object-fit:contain}
.p-index #everything .svc-note{margin-top:14px;max-width:62ch}
@media (min-width:1180px){
  /* fill the space to the right of the 866px row with the one-line summary instead of empty navy */
  .p-index #everything .service-peek{min-height:0}
  .p-index #everything .svc-note{max-width:330px;min-height:200px;margin-block-start:-200px;margin-inline-start:906px;display:flex;align-items:center}
}
@media (max-width:599px){
  /* phone: piercing on top (capped ~200px tall, whole photo), two companions side by side under it */
  .p-index #everything .service-peek{grid-template-columns:1fr 1fr;gap:8px;max-width:300px}
  .p-index #everything .service-peek figure.svc-ear{grid-column:1 / -1}
  .p-index #everything .service-peek figure:not(.svc-ear){grid-row:auto;aspect-ratio:4/3}
}

/* ---------- B. Services, open: compact photo card beside "Ear piercing" ---------- */
.p-index #dept-services .svc-ear-open{max-width:260px;width:100%;margin:2px 0 12px;border-radius:12px;background:#f1e9dc}
.p-index #dept-services .svc-ear-open img{object-fit:contain}
.p-index #dept-services .grp{padding-top:4px}
.p-index #dept-services .grp + .grp{margin-top:20px;padding-top:20px}
.p-index #dept-services .grp-head{margin-bottom:10px}
.p-index #dept-services .custom-contact{margin-top:16px}
.p-index #dept-services .fl-end{margin-top:20px}
@media (min-width:900px){
  .p-index #dept-services .flap-in .fl-body{grid-template-columns:minmax(0,280px) minmax(0,1fr);align-items:center;padding-top:24px}
  .p-index #dept-services .flap-in .fl-body > .fl-hero{aspect-ratio:16/10}
  .p-index #dept-services .flap-in .fl-body > .fl-hero + .fl-intro{align-self:center;padding-bottom:0}
  .p-index #dept-services .flap-in .fl-body > :nth-child(3){margin-top:20px}
  .p-index #dept-services #f-services-personal-service{grid-template-columns:minmax(0,260px) minmax(0,1fr);column-gap:28px;align-items:center}
  .p-index #dept-services #f-services-personal-service > .svc-ear-open{align-self:center}
  .p-index #dept-services #f-services-personal-service > .items{align-self:center}
}
@media (max-width:899px){
  .p-index #dept-services .flap-in .fl-body > .fl-hero{max-height:180px}
}

/* ---------- C. Look closer: thumbnail + label + arrow on one row ----------
   <picture> is display:contents site-wide and the <source> tags were being
   laid out as grid items, pushing the label to column 3 and the arrow to a new row. */
.p-index #walls .keys{gap:10px}
.p-index #walls .keys li{grid-template-columns:56px minmax(0,1fr) 44px;grid-template-rows:auto;gap:14px;align-items:center;padding:10px 8px 10px 10px;min-height:76px}
.p-index #walls .keys li source{display:none}
.p-index #walls .keys li img{grid-column:1;grid-row:1;width:56px;height:56px;object-fit:cover}
.p-index #walls .keys li > span{grid-column:2;grid-row:1;min-width:0}
.p-index #walls .keys li > a{grid-column:3;grid-row:1;justify-self:end}
.p-index #walls .keys b{display:block;line-height:1.25}

/* ---------- D. Visit block (the circled area): even rhythm, four equal buttons ---------- */
.p-index #visit .vrows{margin:0}
.p-index #visit .vrows > div:last-child{border-bottom:0}
.p-index #visit .bridal-note{margin:0;padding:16px 0 0;border-top:1px solid rgba(250,246,239,.14)}
.p-index #visit .bridal-note p{margin:0 0 4px}
.p-index #visit .bridal-note .bridal-contact{margin:0 0 12px}
.p-index #visit .visit-card .row-btns{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;margin:0}
.p-index #visit .visit-card > .row-btns{margin-top:16px}
.p-index #visit .visit-card .row-btns .btn{width:100%;min-width:0;min-height:48px;margin:0;padding:8px 12px;justify-content:center;text-align:center;white-space:normal;line-height:1.2;border-radius:999px}
@media (min-width:900px){
  /* one column of content, all the same width */
  .p-index #visit .vrows,
  .p-index #visit .bridal-note,
  .p-index #visit .visit-card > .row-btns{max-width:560px}
}

/* ---------- E. Footer: one small, even rhythm under the visit block ---------- */
.p-index .foot{margin-top:28px;padding-top:20px}
.p-index .foot nav{gap:0 20px}
.p-index .foot .soc{margin:10px 0 0;padding-top:10px}
.p-index .foot .cap{margin:12px 0 0}
.p-index .foot .cap + .cap{margin-top:4px}
.p-index .foot .bsi-footer{margin-top:12px}
.p-index .foot .leave-review{margin:8px 0 0}
@media (min-width:900px){
  /* 2, 3 or 4 cards per wall: always one full row, no orphan card */
  .p-index #walls .keys{grid-template-columns:repeat(auto-fit,minmax(260px,1fr))}
}
@media (max-width:599px){
  .p-index #visit .visit-card .row-btns .btn{font-size:14px;padding:8px 10px;min-height:52px}
}