/* ==========================================================================
   Shell — header, thread-spool buttons, loom menu, footer, weave transition
   ========================================================================== */

/* ---------- header ---------- */
.hdr {
  position: sticky; top: env(safe-area-inset-top, 0px); z-index: 40;
  background: var(--mist); border-bottom: 1px solid var(--line);
}
.announce { margin: 0; background: var(--ink); color: var(--mist); }
.announce a { display: flex; justify-content: center; align-items: center; min-height: 34px; padding-inline: var(--gut); }
.announce span { font: 400 11px/1.3 var(--f-sans); letter-spacing: .18em; text-transform: uppercase; text-align: center; }
.announce span + span::before { content: "·"; margin-inline: 12px; color: var(--brass-l); }
@media (max-width: 767px) {            /* one offer at a time on a phone */
  .announce a { display: grid; }
  .announce span { grid-area: 1 / 1; opacity: 0; transition: opacity .6s; }
  .announce span.is-on { opacity: 1; }
  .announce span + span::before { content: none; }
}

.hdr__bar {
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center;
  min-height: 60px;
}
.hdr__side { display: flex; align-items: center; margin-inline: -10px; }
.hdr__side--end { justify-content: flex-end; }
.hdr__menu { display: inline-flex; gap: 10px; padding-inline: 10px; }
.hdr__menu svg { width: 28px; }
.hdr__menu-label, .hdr__sound { display: none; }
.hdr__nav { display: none; }

.wordmark {
  display: grid; justify-items: center; gap: 3px; text-align: center;
  font: 400 14px/1 var(--f-display); letter-spacing: .32em; color: var(--areca);
  padding-left: .32em; white-space: nowrap;
}
.wordmark span { font: 400 10px/1.3 var(--f-kn); letter-spacing: .06em; color: var(--bark); padding-right: .32em; }

.count {
  position: absolute; top: 4px; right: 2px;
  min-width: 16px; height: 16px; padding: 0 4px; border-radius: 8px;
  background: var(--areca); color: var(--mist);
  font: 400 10px/16px var(--f-sans); text-align: center;
}
.count[hidden] { display: none; }

/* nav links: a weft thread is woven under the word */
.weft { position: relative; padding-block: 8px; }
.weft::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2px;
  background: repeating-linear-gradient(90deg, var(--areca) 0 6px, transparent 6px 9px);
  transform: scaleX(0); transform-origin: left;
  transition: transform .7s var(--ease);
}
.weft:hover::after, .weft:focus-visible::after, .weft[aria-current="page"]::after { transform: scaleX(1); }

@media (min-width: 768px) {
  .hdr__bar { min-height: 72px; }
  .wordmark { font-size: 19px; gap: 5px; }
  .wordmark span { font-size: 11px; }
  .hdr__menu-label { display: inline; font: 400 11px/1 var(--f-sans); letter-spacing: .2em; text-transform: uppercase; }
  .hdr__sound { display: inline-grid; }
}
@media (min-width: 1000px) {
  .hdr__nav {
    display: flex; justify-content: center; gap: 44px; padding-bottom: 12px;
    font: 400 11px/1 var(--f-sans); letter-spacing: .2em; text-transform: uppercase;
  }
}

/* ---------- thread spool: the category button ---------- */
.spools { display: grid; grid-template-columns: repeat(auto-fit, minmax(92px, 1fr)); gap: 28px 8px; }
.spool {
  --thread: var(--areca);
  display: grid; justify-items: center; text-align: center;
  padding: 8px 4px; min-height: 44px;
}
.spool__body { display: grid; justify-items: center; perspective: 300px; transition: transform .8s var(--ease); }
.spool__pin { width: 4px; height: 10px; background: var(--brass); border-radius: 2px 2px 0 0; }
.spool__cap {
  width: 70px; height: 11px; border-radius: 50%;
  background: linear-gradient(to bottom, var(--brass-l), var(--brass) 55%, var(--brass-d));
  position: relative; z-index: 1;
}
.spool__yarn {
  position: relative; overflow: hidden;
  width: 54px; height: 60px; margin-block: -5px; border-radius: 9px / 16px;
  background: var(--thread);
}
.spool__yarn::before {          /* the wound thread */
  content: ""; position: absolute; inset: -12px 0;
  background: repeating-linear-gradient(to bottom,
    var(--thread) 0 3px, color-mix(in srgb, var(--thread) 68%, var(--ink)) 3px 4px);
  transform: skewY(-7deg);
}
.spool__yarn::after {           /* roundness */
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(90deg,
    color-mix(in srgb, var(--ink) 55%, transparent),
    transparent 30%,
    color-mix(in srgb, var(--mist) 28%, transparent) 46%,
    transparent 64%,
    color-mix(in srgb, var(--ink) 60%, transparent));
}
.spool__tail {                  /* loose end, pulled down to the name */
  width: 2px; height: 26px; background: var(--thread);
  transform: scaleY(.3); transform-origin: top;
  transition: transform .7s var(--ease);
}
.spool__name { font: 400 11px/1.3 var(--f-sans); letter-spacing: .2em; text-transform: uppercase; margin-top: 6px; }
.spool .kn { font-size: 12px; }

.spool:hover .spool__body, .spool:focus-visible .spool__body { transform: translateY(-6px) rotateX(14deg); }
.spool:hover .spool__tail, .spool:focus-visible .spool__tail { transform: scaleY(1); }
.spool:hover .spool__yarn::before, .spool:focus-visible .spool__yarn::before { animation: wind .45s linear infinite; }
@keyframes wind { to { background-position: 0 8px; } }

/* ---------- loom menu ---------- */
.loom {
  position: fixed; inset: 0; z-index: 60; overflow-y: auto; overscroll-behavior: contain;
  background: var(--forest); color: var(--mist);
  padding: calc(env(safe-area-inset-top, 0px) + 12px) 0 calc(env(safe-area-inset-bottom, 0px) + 32px);
  visibility: hidden; transform: translateY(-100%);
  transition: transform .8s var(--ease), visibility 0s .8s;
}
.loom.is-open { visibility: visible; transform: none; transition: transform .8s var(--ease); }
.loom::before {                 /* warp threads */
  content: ""; position: fixed; inset: 0; pointer-events: none;
  background: repeating-linear-gradient(90deg, transparent 0 27px, var(--line-light) 27px 28px);
  opacity: .6;
}
.loom__in { position: relative; }
.loom__top { display: flex; justify-content: space-between; align-items: center; min-height: 48px; margin-bottom: 20px; }
.loom__top .hdr__menu-label { display: inline; font: 400 11px/1 var(--f-sans); letter-spacing: .2em; text-transform: uppercase; }
.loom__sect + .loom__sect { margin-top: 40px; padding-top: 32px; border-top: 1px solid var(--line-light); }
.loom__sect > .eyebrow { margin-bottom: 20px; }

.loom .spools { grid-template-columns: repeat(3, 1fr); }
@media (min-width: 1200px) { .loom .spools { grid-template-columns: repeat(5, 1fr); } }

.loom__links { display: grid; gap: 4px; }
.loom__links a { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 14px; padding: 10px 0; min-height: 44px; }
.loom__links b { font: 400 clamp(26px, 6vw, 40px)/1.1 var(--f-display); }
.loom__links span { font-size: 13px; color: var(--brass-l); }
.loom__links .weft::after { background: repeating-linear-gradient(90deg, var(--brass-l) 0 6px, transparent 6px 9px); }

@media (min-width: 900px) {
  .loom__grid { display: grid; grid-template-columns: 1.2fr 1fr; gap: 72px; align-items: start; }
  .loom__sect + .loom__sect { margin-top: 0; padding-top: 0; border-top: 0; }
  .loom__sect--foot { grid-column: 1 / -1; padding-top: 32px !important; border-top: 1px solid var(--line-light) !important; }
}

/* ---------- footer ---------- */
.selvedge {                     /* temple-border teeth */
  height: 12px;
  background:
    linear-gradient(135deg, var(--mist) 25%, transparent 25%) -12px 0 / 24px 24px,
    linear-gradient(225deg, var(--mist) 25%, transparent 25%) -12px 0 / 24px 24px,
    var(--areca);
  border-bottom: 2px solid var(--brass);
}
.ftr { background: var(--forest); color: var(--mist); }
.ftr__in { padding-block: var(--band-y-tight); display: grid; gap: 40px; }
.ftr .wordmark { justify-items: start; text-align: left; color: var(--mist); padding-left: 0; font-size: 18px; }
.ftr .wordmark span { color: var(--brass-l); font-size: 12px; }
.ftr address { font-style: normal; opacity: .82; margin-top: 18px; }
.ftr__cols { display: grid; grid-template-columns: repeat(2, 1fr); gap: 32px 20px; }
.ftr__cols .eyebrow { margin-bottom: 10px; }
.ftr__cols a { display: flex; align-items: center; min-height: 44px; opacity: .88; }
.ftr__cols a:hover { opacity: 1; color: var(--brass-l); }
.ftr__base {
  border-top: 1px solid var(--line-light);
  padding-block: 18px calc(env(safe-area-inset-bottom, 0px) + 18px);
  font-size: 12px; opacity: .7;
}
@media (min-width: 900px) {
  .ftr__in { grid-template-columns: 1fr 2fr; gap: 64px; }
  .ftr__cols { grid-template-columns: repeat(4, 1fr); }
}

/* ---------- the page transition: a pallu falls over the page, then lifts away ---------- */
.weave { position: fixed; inset: 0; z-index: 80; pointer-events: none; visibility: hidden; overflow: hidden; }
.weave.is-in, .weave.is-out { visibility: visible; }
.drape {
  position: absolute; left: -12%; right: -12%; top: -8%; bottom: -8%;
  transform-origin: 100% 0; transform: translate(14%, -112%) rotate(-9deg);
  filter: drop-shadow(0 30px 40px rgba(0, 0, 0, .45));
}
.drape__cloth {
  position: absolute; inset: 0;
  background:
    repeating-linear-gradient(100deg, rgba(0, 0, 0, .22) 0 3px, rgba(0, 0, 0, 0) 3px 46px, rgba(255, 255, 255, .07) 58px, rgba(0, 0, 0, 0) 74px),
    radial-gradient(circle, #e8c56f 2px, transparent 2.6px) 0 0 / 46px 54px,
    radial-gradient(circle, #e8c56f 2px, transparent 2.6px) 23px 27px / 46px 54px,
    linear-gradient(160deg, #7a1838, #5a0f2a 60%, #3e0a1e);
}
.drape__border {
  position: absolute; left: 0; right: 0; bottom: 0; height: 15%;
  background:
    linear-gradient(135deg, #f7d68e 25%, transparent 25%) -10px 0 / 20px 14px repeat-x,
    linear-gradient(225deg, #f7d68e 25%, transparent 25%) -10px 0 / 20px 14px repeat-x,
    repeating-linear-gradient(90deg, rgba(122, 24, 56, .35) 0 2px, transparent 2px 22px),
    linear-gradient(#e3a325, #c9861a);
  border-top: 3px solid #f7d68e;
}
.drape__border::after {                 /* tassels */
  content: ""; position: absolute; left: 0; right: 0; top: 100%; height: 26px;
  background: radial-gradient(circle at 50% 0, #e3a325 5px, transparent 6px) 0 0 / 34px 26px repeat-x,
              repeating-linear-gradient(90deg, transparent 0 15px, #c9861a 15px 18px, transparent 18px 34px);
}
.drape__mark { position: absolute; left: 50%; top: 46%; transform: translate(-50%, -50%); display: grid; gap: 6px; text-align: center; color: #f7d68e; opacity: 0; transition: opacity .25s .3s; }
.drape__mark b { font: 400 clamp(22px, 5vw, 40px)/1 var(--f-display); letter-spacing: .3em; }
.drape__mark span { font: 400 14px/1 var(--f-kn); color: #f3e2c0; }
.weave.is-in .drape { transform: none; transition: transform .56s cubic-bezier(.3, .9, .3, 1.04); }
.weave.is-in .drape__mark { opacity: 1; }
.weave.is-out .drape { transform: translate(-118%, 6%) rotate(7deg); transition: transform .6s cubic-bezier(.6, 0, .4, 1); }

/* ---------- page head + foundation sheet ---------- */
.pagehead { padding-block: clamp(56px, 9vw, 120px); }
.swatches { display: grid; grid-template-columns: repeat(auto-fill, minmax(84px, 1fr)); gap: 10px; }
.swatch { font-size: 11px; color: var(--stone); }
.swatch i { display: block; aspect-ratio: 1; border: 1px solid var(--line); margin-bottom: 6px; background: var(--c); }
.sheet { display: grid; gap: 48px; }

/* ---------- WhatsApp, always one tap away ---------- */
.wa-float {
  position: fixed; z-index: 45; right: 16px; bottom: calc(env(safe-area-inset-bottom, 0px) + 18px);
  display: grid; place-items: center; width: 52px; height: 52px; border-radius: 50%;
  background: var(--areca); color: var(--mist); border: 1px solid var(--brass-l);
  box-shadow: 0 10px 24px color-mix(in srgb, var(--ink) 40%, transparent);
  transition: transform .3s var(--ease), opacity .4s, background .3s;
}
.wa-float svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; }
.wa-float:hover, .wa-float:focus-visible { background: var(--terra); transform: translateY(-2px); }
.is-world .wa-float { bottom: calc(env(safe-area-inset-bottom, 0px) + 58px); }   /* clears the offers ticker */
.is-intro .wa-float { opacity: 0; pointer-events: none; }

/* phones: a row of quick shelves under the header, as the big saree stores do */
.hdr__quick { display: none; }
@media (max-width: 899px) {
  .hdr__quick {
    display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; padding: 2px var(--gut) 10px;
    -webkit-overflow-scrolling: touch;
  }
  .hdr__quick::-webkit-scrollbar { display: none; }
  .hdr__quick a {
    flex: none; display: inline-flex; align-items: center; gap: 6px; min-height: 34px; padding: 0 12px;
    border: 1px solid var(--line); border-radius: 17px; font: 400 12px/1 var(--f-sans); letter-spacing: .06em; white-space: nowrap;
    border-color: color-mix(in srgb, currentColor 28%, transparent); background: color-mix(in srgb, currentColor 7%, transparent);
  }
  .hdr__quick i { width: 10px; height: 10px; border-radius: 50%; background: var(--c); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--ink) 20%, transparent); }
  .is-intro .hdr__quick { opacity: 0; pointer-events: none; }
}
@media (min-width: 768px) { .announce span:nth-child(n + 5) { display: none; } }