/* ============================================================
   VayyaariBhama Couture — ornamental peacock identity
   Loaded after style.css; deliberately overrides its tokens.
   ============================================================ */

/* ---------------------------------------------------------------------
   Brand colour decode — peacock green + gold on ivory cream.
   The --teal-* names are kept as the shared "brand ink" scale so every
   rule already written against them follows the new palette.
   --------------------------------------------------------------------- */
:root {
  /* primary peacock */
  --peacock-deep:   #07604A;   /* logo wordmark green */
  --peacock-teal:   #0B6E52;   /* logo drape green, lit */
  --emerald:        #236D54;   /* logo drape green */
  --forest:         #0A3B26;   /* logo letter core */

  --teal-900: var(--forest);
  --teal-800: var(--forest);
  --teal-700: #2C6B52;
  --teal-600: var(--emerald);
  --teal-500: #3C8E58;

  /* peacock-feather accents */
  --feather-blue:  #0072A8;   /* logo lotus blue */
  --feather-green: #0F7A64;
  --feather-eye-green: #3C8E58;
  --feather-eye-gold:  #C7A545;
  --navy-dark:     #103A66;

  --peacock-blue: var(--navy-dark);
  --peacock-blue-lt: var(--feather-blue);

  /* gold */
  --gold-900: #A8842F;   /* logo gold, deepened for text */
  --gold:     #C2A055;   /* logo gold */
  --gold-lt:  #D9BB78;   /* logo gold highlight */
  --gold-pale:#E6D4AE;   /* logo gold, palest */

  /* background */
  --cream: #F7EDD9;        /* the logo's own ground — they must match */
  --cream-deep: #F1E4C8;   /* warm cream  */
  --beige: #E9DBBB;        /* light beige */

  /* typography */
  /* sampled from the reference wordmark (#22463F) — the picture uses the
     dark forest green, not the deep peacock green in the typography table */
  --brand-name: #07604A;
  --tagline: #A8842F;
  --menu-icon: #07604A;      /* interface icons follow the wordmark */
  --search-text: #6C6C6C;
  --product-name: #10402C;
  --price: #123D2A;

  --ink: var(--product-name);
  --muted: var(--search-text);

  --bg: var(--cream);
  --bg-deep: var(--cream-deep);
  --sand: var(--beige);
  --surface: #FFFAEF;
  --line: rgba(10, 59, 38, .18);

  /* style.css tokens, remapped so nothing is left on the old blue scale */
  --pb-900: #12281F; --pb-800: var(--forest); --pb-700: #2C6B52;
  --pb-600: #2C6B52; --pb-500: var(--emerald); --pb-400: var(--feather-eye-green);
  --pb-300: #7FC6A6;
  --pg-900: #12281F; --pg-800: var(--forest); --pg-700: var(--forest);
  --pg-600: var(--emerald); --pg-500: var(--feather-green); --pg-400: var(--feather-eye-green);
  --pg-300: #9AD3B6;

  --peacock-grad: linear-gradient(135deg, var(--peacock-teal) 0%, var(--peacock-deep) 55%, #06301E 100%);
  --peacock-grad-soft: linear-gradient(135deg, rgba(11,110,82,.10), rgba(7,96,74,.10));
  --gold-grad: linear-gradient(120deg, var(--gold-900), var(--gold), var(--gold-lt), var(--gold));
}

body { background: var(--bg); color: var(--ink); }

/* ------------------------------------------------ ornamental page frame */
/* A gold vine down each edge and along the foot of the window. Drawn as
   line-art on a transparent ground so it reads over the cream page and the
   dark footer alike, and it sits under the header so the two never fight. */
:root {
  --vine-v: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='56' viewBox='0 0 12 56'%3E%3Cpath d='M6 0V56' stroke='%23C89E42' stroke-width='1' opacity='.5'/%3E%3Cpath d='M6 9c4 1 5 5 3 9-3-1-4-5-3-9z' fill='%23C89E42' opacity='.5'/%3E%3Cpath d='M6 29c-4 1-5 5-3 9 3-1 4-5 3-9z' fill='%232C7A57' opacity='.45'/%3E%3Ccircle cx='6' cy='49' r='1.6' fill='%23C89E42' opacity='.8'/%3E%3C/svg%3E");
  --vine-h: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='56' height='12' viewBox='0 0 56 12'%3E%3Cpath d='M0 6H56' stroke='%23C89E42' stroke-width='1' opacity='.5'/%3E%3Cpath d='M9 6c1-4 5-5 9-3-1 3-5 4-9 3z' fill='%23C89E42' opacity='.5'/%3E%3Cpath d='M29 6c1 4 5 5 9 3-1-3-5-4-9-3z' fill='%232C7A57' opacity='.45'/%3E%3Ccircle cx='49' cy='6' r='1.6' fill='%23C89E42' opacity='.8'/%3E%3C/svg%3E");
}
.page-frame { position: fixed; inset: 0; pointer-events: none; z-index: 55; }
.pf-rail { position: absolute; display: block; }
.pf-left, .pf-right {
  top: 0; bottom: 0; width: 12px;
  background-image: var(--vine-v); background-repeat: repeat-y; background-position: center top;
}
.pf-left { left: 3px; }
.pf-right { right: 3px; transform: scaleX(-1); }
.pf-bottom {
  left: 0; right: 0; bottom: 3px; height: 12px;
  background-image: var(--vine-h); background-repeat: repeat-x; background-position: left center;
}
.pf-corner { position: absolute; bottom: 2px; width: 68px; height: 68px; opacity: .9; }
.pf-corner.bl { left: 2px; }
.pf-corner.br { right: 2px; transform: scaleX(-1); }

/* ---------------------------------------------- ornamental corner frame */
/* Wrap any panel in .ornate to get the cusped gold/teal corner brackets. */
.ornate { position: relative; }
.ornate::before, .ornate::after {
  content: ''; position: absolute; width: 46px; height: 46px; pointer-events: none;
  border-color: var(--gold); border-style: solid; opacity: .85;
}
.ornate::before { top: 6px; left: 6px; border-width: 1.5px 0 0 1.5px; border-radius: 12px 0 0 0; }
.ornate::after { bottom: 6px; right: 6px; border-width: 0 1.5px 1.5px 0; border-radius: 0 0 12px 0; }
.ornate-4::before, .ornate-4::after { width: 40px; height: 40px; }

/* full four-corner variant drawn with a background image so all four show */
.ornate-frame {
  position: relative;
  border: 1.5px solid var(--teal-700);
  border-radius: 4px;
  box-shadow: inset 0 0 0 4px var(--cream), inset 0 0 0 5.5px var(--gold);
}

/* ---------------------------------------------------------- brand block */
.site-header { background: var(--cream); border-bottom: 1px solid rgba(11,92,91,.16); backdrop-filter: none; }
.site-header.scrolled { background: var(--cream); box-shadow: 0 2px 18px rgba(11,92,91,.12); }

.brand-band {
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center;
  gap: 6px; padding: 12px 0 10px;
}
/* each side column is itself a row that spreads its two children apart:
   the icon cluster sits at the true page edge, the peacock sits at the
   inner end, against the logo. Equal 1fr columns keep the logo centred
   regardless of how the icon counts differ side to side. */
.header-left, .header-utils {
  display: flex; align-items: center; justify-content: space-between;
  gap: 6px; flex: none; height: 100%;
}
.brand-band > .header-left { justify-self: stretch; padding-left: clamp(2px, 0.8vw, 10px); }
.brand-band > .header-utils { justify-self: stretch; padding-right: clamp(2px, 0.8vw, 10px); }
.header-left-icons, .header-utils-icons { display: flex; align-items: center; gap: 2px; }
.header-left .action { color: var(--menu-icon); padding: 10px 7px 5px; }
.header-left .action span { color: var(--peacock-deep); font-weight: 500; }
/* the flanking peacock artwork — placed exactly as supplied, only scaled
   by the browser, never resampled by us */
.brand-peacock-flank {
  height: clamp(46px, 7.4vw, 92px); width: auto; flex: none;
  object-fit: contain; align-self: center;
}
/* screen-reader copy of the name, since the wordmark is now artwork */
.sr-only {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.brand-centre { text-align: center; min-width: 0; }
.brand-link { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; }
/* the artwork is never resampled by us — the browser scales the original */
.brand-logo {
  height: clamp(96px, 14vw, 168px); width: auto; max-width: 100%;
  object-fit: contain; image-rendering: auto;
}
.brand-under { display: block; }
.brand-centre h1 {
  font-family: var(--display); font-weight: 600;
  font-size: clamp(24px, 5.2vw, 46px); line-height: 1.05;
  color: var(--brand-name); letter-spacing: .01em; margin: 0;
}
.brand-centre .tagline {
  font-family: var(--display); font-style: italic; font-weight: 600;
  font-size: clamp(15px, 2.4vw, 24px); letter-spacing: .015em;
  color: var(--tagline); margin-top: 3px;
}
/* the icons hang from the top of the band, so they need their own breathing
   room above — otherwise the wishlist heart crowds the header edge */
.header-utils .action { padding: 10px 8px 5px; color: var(--menu-icon); }
.header-utils .action span { color: var(--peacock-deep); font-weight: 500; }
.header-utils .badge { top: 5px; right: 3px; background: var(--gold); color: #fff; border-color: var(--cream); }

/* country switcher, now a row inside the menu */
.menu-country { color: var(--peacock-deep); }
.menu-country .flag { font-size: 15px; font-weight: 400; line-height: 1; }
.menu-country span span { color: var(--gold-900); }

/* ------------------------------------------------------------- search */
/* The edge is a thin band of gold gradient rather than a flat line — the
   shell paints the metal, the field sits inside it on ivory. */
.search-shell {
  padding: 1.5px; border-radius: 13px;
  background: linear-gradient(115deg, var(--gold-900) 0%, var(--gold-pale) 30%,
                              var(--gold) 55%, var(--gold-900) 100%);
  box-shadow: 0 1px 4px rgba(182,138,60,.18);
}
.search-box {
  background: linear-gradient(180deg, #FFFDF7 0%, var(--cream) 100%);
  border: none; border-radius: 11.5px;
  box-shadow: none;
  /* a little extra room on both ends — the corner flourish now grows
     inward, so the magnifier and the mic/camera pair sit clear of it */
  padding: 8px 17px 8px 17px;
  gap: 9px;
  transition: background .25s;
}
.search-shell:focus-within { box-shadow: 0 0 0 3px rgba(200,158,66,.18), 0 2px 8px rgba(182,138,60,.22); }
/* the two corner flourishes: each is pre-positioned (inline transform) so
   its root sits exactly on the border corner and grows outward from there;
   only visibility toggles here, by breakpoint */
.sb-feather { position: absolute; pointer-events: none; z-index: 2; }
.sb-feather.phone { display: none; }
@media (max-width: 560px) {
  .sb-feather.desktop { display: none; }
  .sb-feather.phone { display: block; }
}
.search-box input { color: var(--search-text); font-size: 15px; }
.search-box input::placeholder { color: #A8A49C; }
/* the glass is the submit control, at the head of the bar */
.search-box .search-go {
  order: -1; width: 32px; height: 32px; border-radius: 50%;
  background: none; color: var(--gold-900); box-shadow: none; flex: none;
}
.search-box .search-go svg { width: 22px; height: 22px; stroke-width: 1.6; }
.search-box .search-go:hover { transform: none; color: var(--forest); background: rgba(200,158,66,.14); }
/* voice and camera read as a pair, set off by a hairline */
.icon-btn { color: var(--menu-icon); border-radius: 50%; width: 32px; height: 32px; display: grid; place-items: center; }
.icon-btn svg { width: 20px; height: 20px; }
.icon-btn:hover { background: rgba(200,158,66,.14); transform: none; }
.icon-btn.mic { position: relative; }
.icon-btn.mic::before {
  content: ''; position: absolute; left: -5px; top: 50%; transform: translateY(-50%);
  width: 1px; height: 16px; background: rgba(182,138,60,.45);
}

/* ------------------------------------------------------ filters bar */
.filter-strip {
  display: grid; grid-template-columns: 1fr 1px 1fr;
  background-color: var(--cream);
  /* hairlines that fade out where the page's vine border runs */
  background-image:
    linear-gradient(90deg, transparent, rgba(182,138,60,.6) 10%, rgba(182,138,60,.6) 90%, transparent),
    linear-gradient(90deg, transparent, rgba(182,138,60,.6) 10%, rgba(182,138,60,.6) 90%, transparent);
  background-size: 100% 1px, 100% 1px;
  background-position: top left, bottom left;
  background-repeat: no-repeat;
  border: none;
  position: relative;
}
/* the divider carries a small gold lozenge at its middle */
.filter-strip .rule {
  background: linear-gradient(180deg, transparent, rgba(182,138,60,.55) 22%,
                              rgba(182,138,60,.55) 78%, transparent);
  position: relative; overflow: visible;
}
.filter-strip .rule::before {
  content: '❖'; position: absolute; left: 50%; top: 50%;
  transform: translate(-50%, -50%);
  font-size: 8.5px; line-height: 1; color: var(--gold);
  background: var(--cream); padding: 3px 4px;
}
.filter-strip button {
  display: flex; align-items: center; justify-content: center; gap: 10px;
  padding: 15px 10px; font-size: 15px; color: var(--peacock-deep); letter-spacing: .01em;
  font-family: var(--display); font-weight: 600; transition: background .2s;
}
.filter-strip button:hover { background: var(--cream-deep); }
.filter-strip svg { color: var(--gold-900); }
.filter-strip svg { width: 18px; height: 18px; }

/* --------------------------------------------------------- nav / chips */
.nav a { color: var(--teal-800); }
.nav a:hover, .nav a.active { color: var(--gold-900); }
.nav a::after { background: var(--gold-grad); }
.nav a.accent { color: #A8321F; }

.chip.on { background: var(--peacock-grad); }
.btn-gold { background: var(--gold-grad); color: var(--teal-900); }
.btn-peacock { background: var(--peacock-grad); }
.btn-outline { border-color: var(--teal-700); color: var(--teal-800); }
.btn-outline:hover { background: var(--teal-800); }

/* ---------------------------------------------------------- product card */
.card {
  background: var(--surface); border-radius: 6px;
  border: 1px solid rgba(200,158,66,.38);      /* soft gold, matching the frame */
  box-shadow: 0 2px 10px rgba(11,92,91,.06);
}
/* no radius of its own: the card clips it, so the picture meets the corner
   cleanly instead of leaving a pale seam where two radii disagree */
.card-img { border-radius: 0; }

/* white star-rating pill, bottom-left of the image */
.rating-pill {
  position: absolute; left: 10px; bottom: 10px; z-index: 3;
  display: inline-flex; align-items: center; gap: 5px;
  padding: 4px 9px; border-radius: 5px;
  background: rgba(255,253,247,.96); box-shadow: var(--shadow-sm);
  color: var(--ink); font-size: 11px; font-weight: 600; letter-spacing: .02em;
}
.rating-pill .rp-stars { color: var(--gold); letter-spacing: .5px; font-size: 10.5px; }

/* fabric / technique / occasion, over the photograph. Always on for touch —
   there is no hover to reveal it there — and hover-revealed on a pointer. */
.card-spec {
  position: absolute; right: 0; bottom: 22%; z-index: 2;
  display: flex; flex-direction: column; align-items: flex-end; gap: 4px;
  transition: opacity .3s, transform .3s;
  pointer-events: none;
}
.card-spec span {
  position: relative; padding: 2px 19px 2px 8px; max-width: 92%;
  background: rgba(6,48,30,.78); color: #FDFBF3;
  font-size: 9.5px; line-height: 1.5; letter-spacing: .01em;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.card-spec span::after {                 /* small gold arrowhead, as drawn */
  content: ''; position: absolute; right: 8px; top: 50%; transform: translateY(-50%);
  width: 0; height: 0; border-left: 5px solid var(--gold-lt);
  border-top: 3.5px solid transparent; border-bottom: 3.5px solid transparent;
}
.card-spec b { font-weight: 600; }
@media (hover: hover) {
  .card-spec { opacity: 0; transform: translateX(8px); }
  .card:hover .card-spec { opacity: 1; transform: none; }
}

.card-meta { color: var(--emerald); }
.card-price .now { color: var(--price); }
.card-name { color: var(--product-name); }

/* the cards own the front page now that the weave circles are gone —
   the first row starts right under the Filters / Sort strip */
.section { padding: 34px 0; }
#bestRow { padding-top: 18px; }

/* ------------------------------------------------------ catalogue collage */
/* five columns, two rows, with a full-height tile in the first and third
   column — the mosaic that opens the page. It is deliberately smaller and
   framed as one panel, so it never reads as another row of product cards. */
.collage-sec { padding: 16px 0 4px; }
.collage-panel {
  padding: 8px; border-radius: 6px;
  border: none; background: var(--cream-deep);
  box-shadow: none;
}
.collage {
  display: grid; gap: 6px;
  grid-template-columns: repeat(5, 1fr);
  grid-template-rows: repeat(2, clamp(52px, 8.5vw, 100px));
}

#shop { padding-top: 4px; }
.col-tile {
  padding: 0; overflow: hidden; border-radius: 4px;
  border: 1px solid rgba(200,158,66,.35); background: var(--beige);
  transition: transform .3s cubic-bezier(.2,.8,.2,1), box-shadow .3s, border-color .3s;
}
.col-tile img { width: 100%; height: 100%; object-fit: cover; }
.col-tile:hover { transform: translateY(-3px); border-color: var(--gold); box-shadow: 0 8px 20px rgba(11,92,91,.18); }
.col-tile:nth-child(1) { grid-column: 1; grid-row: 1 / 3; }
.col-tile:nth-child(2) { grid-column: 2; grid-row: 1; }
.col-tile:nth-child(3) { grid-column: 2; grid-row: 2; }
.col-tile:nth-child(4) { grid-column: 3; grid-row: 1 / 3; }
.col-tile:nth-child(5) { grid-column: 4; grid-row: 1; }
.col-tile:nth-child(6) { grid-column: 4; grid-row: 2; }
.col-tile:nth-child(7) { grid-column: 5; grid-row: 1; }
.col-tile:nth-child(8) { grid-column: 5; grid-row: 2; }
.stamp { border-color: var(--gold); color: var(--teal-800); background: rgba(253,246,233,.96); }

/* -------------------------------------------- filter accordions (sheet) */
.facet { border-top: 1px solid rgba(11,92,91,.18); }
.facet:last-of-type { border-bottom: 1px solid rgba(11,92,91,.18); }
.facet > button {
  width: 100%; display: flex; align-items: center; justify-content: space-between;
  padding: 15px 2px; font-size: 14.5px; color: var(--teal-800); text-align: left;
  transition: color .2s;
}
.facet > button:hover { color: var(--gold-900); }
.facet > button svg { width: 15px; height: 15px; transition: transform .3s; flex: none; }
.facet.open > button svg { transform: rotate(180deg); }
.facet-body { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .34s cubic-bezier(.22,.9,.24,1); }
.facet-body > div { overflow: hidden; }
.facet.open .facet-body { grid-template-rows: 1fr; }
.facet-body label {
  display: flex; align-items: center; gap: 9px; padding: 6px 2px;
  font-size: 13px; color: var(--muted); cursor: pointer; transition: color .18s;
}
.facet-body label:hover { color: var(--teal-700); }
.facet-body label:last-child { padding-bottom: 14px; }
.facet-body input { accent-color: var(--teal-700); width: 15px; height: 15px; cursor: pointer; flex: none; }
.facet-body .n { margin-left: auto; font-size: 11.5px; opacity: .65; }
.facet-body .swatch { width: 13px; height: 13px; border-radius: 50%; border: 1px solid rgba(0,0,0,.18); flex: none; }

/* ------------------------------------------------------- section accents */
.section-head h2 em, .row-head h2 em { color: var(--teal-700); }
.section-head .kicker, .row-head .kicker { color: var(--gold-900); }
.divider-orn { color: var(--gold); }
.split-art { background: var(--peacock-grad); }
.promo { background: var(--teal-900); }
.site-footer { background: var(--teal-900); }
.foot-grid h5 { color: var(--gold-lt); }
.foot-care b { color: var(--gold-lt); }
.menu-care a { color: var(--gold-900); }   /* antique gold reads on cream */
.float-care { background: var(--peacock-grad); border: 1px solid var(--gold); }

/* ================= menu drawer: ornate peacock frame ================= */
.menu-drawer {
  background: var(--cream);
  clip-path: none !important;          /* the frame is the edge now */
  width: min(430px, 92vw);
  box-shadow: 22px 0 60px rgba(11,92,91,.28);
}
.menu-list > a, .menu-acc { color: var(--peacock-deep); border-bottom-color: rgba(10,59,38,.18); }

/* The panel artwork is the supplied peacock frame at
   app/static/img/photo-frame.jpeg — stretched to the panel so the border
   lands on the panel edge. Replace the file to change the artwork.
   The URL itself is set inline in index.html so it carries the ?v= asset
   stamp — a CSS-referenced image would otherwise stay cached after a redeploy. */
.menu-frame {
  position: absolute; inset: 0; pointer-events: none; z-index: 1;
  /* stretched, not cover: a frame's border has to reach all four edges */
  background-position: center; background-size: 100% 100%; background-repeat: no-repeat;
}

/* text sits inside the frame, clear of the bird on the right.
   Smaller, bolder rows — no brand line above them, so the links start
   at the top of the panel and every entry stays above the fold. */
.menu-scroll { padding: 92px 44% 60px 46px; }   /* clears the close button */
.menu-list > a, .menu-acc {
  font-family: var(--sans);
  padding: 9px 4px; font-size: 15.5px; font-weight: 700; letter-spacing: .01em;
}
.menu-acc i { font-size: 17px; font-weight: 600; color: var(--menu-icon); }
.menu-sub a { font-size: 12.5px; font-weight: 600; color: #2C6B52; padding: 7px 4px 7px 18px; }
.menu-sub a:hover { color: var(--emerald); }

/* WhatsApp moved off the main page and into the menu */
.menu-whatsapp { color: var(--emerald) !important; }
.menu-whatsapp svg { flex: none; }

.menu-care { padding-top: 12px; margin-top: 6px; }
.menu-care small { font-size: 9px; }
.menu-care a { font-size: 16px; }
.menu-care span { font-size: 11px; }
.menu-close { top: 26px; left: 30px; background: rgba(249,245,234,.9); color: var(--forest); }

/* signed-in identity, bottom-left corner of the menu panel */
.menu-user {
  position: absolute; left: 30px; bottom: 22px; z-index: 3;
  display: flex; align-items: center; gap: 8px; text-align: left;
  padding: 7px 13px 7px 10px; border-radius: 999px;
  border: 1px solid var(--gold-pale); background: rgba(255,253,246,.92);
  color: var(--forest); transition: border-color .2s, background .2s;
}
.menu-user:hover { border-color: var(--gold); background: #fff; }
.menu-user small {
  display: block; font-size: 8.5px; letter-spacing: .22em; text-transform: uppercase;
  color: var(--gold-900); line-height: 1.4;
}
.menu-user b {
  display: block; font-size: 12px; font-weight: 700; line-height: 1.2;
  max-width: 150px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

/* no eye animations — the artwork is simply present */
.menu-drawer .menu-peacock, .menu-drawer .menu-vine { animation: none !important; }

/* ------------------------------------------------------------ responsive */
@media (max-width: 860px) {
  /* one row always: hamburger, compact wordmark, then Country/Wishlist/
     Bag/Account beside it — the icon row no longer drops underneath */
  .brand-band { grid-template-columns: 1fr auto 1fr; gap: 4px; padding: 10px 0 8px; }
  .brand-band > .header-left { padding-left: 2px; }
  .brand-band > .header-utils { padding-right: 2px; }
  /* the logo lockup — bigger now, the peacocks flanking it in the yellow
     slots from the mark-up */
  .brand-logo { height: 96px; }
  .brand-peacock-flank { height: 58px; }
  .brand-link { gap: 0; }
  .brand-centre .tagline { font-size: 14px; margin-top: 2px; }
  /* grid children default to min-width:auto, which would force the page
     wider than the viewport and clip the logo */
  .brand-band > *, .brand-centre a, .brand-centre span { min-width: 0; }
  .header-utils { gap: 0; }
  .header-utils .action, .header-left .action { padding: 8px 4px 3px; }
  .header-utils .action span,
  .header-left .action span { display: none; }   /* icon-only: labels don't fit beside the logo */
  .header-utils .action svg, .header-left .action svg { width: 19px; height: 19px; }
  .header-utils .badge { top: 3px; right: 0; }
  .filter-strip button { font-size: 14px; padding: 13px 8px; }
  .menu-user { left: 24px; bottom: 18px; }
  .menu-scroll { padding-bottom: 56px; }
}

/* ====================================================================
   Phone layout, measured to the supplied spec (740 x 1600 device px at
   dpr 2, so every figure below is half the number on the drawing):
     header band 82.5 · search 42.5 · filters+sort 37.5
     lookbook 150 · one product row 282.5
   ==================================================================== */
@media (max-width: 560px) {
  /* header band — grown past the 82.5 spec on purpose, to fit the bigger
     logo and the flanking peacocks */
  .brand-band { padding: 9px 0 8px; gap: 4px; }
  .brand-band > .header-left { padding-left: 0; }
  .brand-band > .header-utils { padding-right: 0; }
  .brand-logo { height: 88px; }
  .brand-peacock-flank { height: 52px; }
  .brand-centre .tagline { font-size: 13.5px; margin-top: 1px; }
  .header-utils .action, .header-left .action { padding: 6px 4px 3px; }
  .header-utils .action svg, .header-left .action svg { width: 18px; height: 18px; }

  /* search — 42.5 */
  .search-band { padding-bottom: 5.5px; }
  .search-box { padding: 4px 6px 4px 13px; border-radius: 10px;
    box-shadow: inset 0 0 0 2.5px var(--cream); }
  .search-box input { font-size: 13.5px; }
  .search-box input { font-size: 13.5px; }
  .search-box .search-go, .icon-btn { width: 30px; height: 30px; }
  .search-box .search-go svg, .icon-btn svg { width: 19px; height: 19px; }

  /* filters + sort — 37.5 */
  .filter-strip button { padding: 10.4px 8px; font-size: 13.5px; }
  .filter-strip svg { width: 16px; height: 16px; }

  /* lookbook — 150 (16 top + 130 panel + 4 bottom) */
  .collage-sec { padding: 15px 0 3px; }
  .collage { grid-template-rows: repeat(2, 66.5px); }   /* section = 175 */

  /* one product row — 282.5. A five-figure price plus its struck-through
     MRP cannot share one line at this card width, so the picture gives the
     second line its room rather than the row growing past the spec. */
  .card-img { aspect-ratio: 3 / 3.76; }
  .card-body { padding: 7px 10px 9px; gap: 1px; }
  .card-name { font-size: 13px; line-height: 1.35; }
  .card-price { gap: 5px; row-gap: 0; }
  .card-price > * { white-space: nowrap; }
  .card-price .now { font-size: 14px; }
  .card-price .was { font-size: 10px; }
  .card-price .off { font-size: 9.5px; padding: 1px 5px; }
}