/* Ladybug Fashion — storefront chrome.

   The announcement bar, masthead, department nav and collection row from the
   approved design. Loaded after lf.css and overrides the older masthead.

   Locked palette only. Aqua, teal, cyan and turquoise are banned brand colours
   and appear nowhere here. */

/* ---------- announcement bar ---------- */
.anno{background:linear-gradient(90deg,var(--red) 0%,var(--pink-deep) 26%,var(--purple) 74%,var(--black) 100%);
  color:var(--cream);font-size:.74rem;letter-spacing:.06em;font-weight:600}
.anno__in{max-width:var(--wrap);margin:0 auto;padding:8px 20px;display:flex;align-items:center;
  justify-content:center;gap:14px;flex-wrap:wrap;position:relative}
.anno a{color:var(--cream);text-decoration:none;border-bottom:1px solid rgba(255,248,242,.45)}
.anno a:hover{border-bottom-color:var(--cream)}
.anno__sep{opacity:.55}
.anno__social{display:flex;gap:12px;align-items:center;margin-left:auto}
.anno__social a{border:0;display:inline-flex;opacity:.9}
.anno__social a:hover{opacity:1}
.anno__social svg{width:15px;height:15px;fill:currentColor;display:block}
@media (max-width:900px){ .anno__social{display:none} }

/* ---------- masthead ---------- */
.mast{background:var(--pink-wash);border-bottom:1px solid var(--line)}
.mast__in{max-width:var(--wrap);margin:0 auto;padding:16px 20px;
  display:grid;gap:18px;align-items:center;
  grid-template-columns:minmax(200px,300px) minmax(0,1fr) auto}
.mast__logo{display:block}
.mast__logo img{height:62px;width:auto}
.mast__search{display:flex;max-width:440px;width:100%}
.mast__search input{flex:1 1 auto;min-width:0;border:1px solid var(--line);border-right:0;
  border-radius:999px 0 0 999px;padding:11px 18px;font:inherit;font-size:.9rem;background:#fff;color:var(--ink)}
.mast__search input:focus{outline:2px solid var(--purple);outline-offset:-2px}
.mast__search button{border:0;border-radius:0 999px 999px 0;padding:0 18px;cursor:pointer;
  background:var(--red);color:var(--cream);display:grid;place-items:center}
.mast__search button:hover{background:var(--pink-deep)}
.mast__search svg{width:17px;height:17px;fill:currentColor}
.mast__acts{display:flex;gap:22px;align-items:center}
.mast__act{display:grid;justify-items:center;gap:4px;text-decoration:none;color:var(--ink);
  font-size:.68rem;letter-spacing:.05em;font-weight:600;text-transform:uppercase;position:relative}
.mast__act svg{width:22px;height:22px;fill:none;stroke:var(--ink);stroke-width:1.7}
.mast__act:hover{color:var(--red)}
.mast__act:hover svg{stroke:var(--red)}
.mast__act b{position:absolute;top:-5px;right:2px;background:var(--red);color:var(--cream);
  font-size:.6rem;min-width:15px;height:15px;border-radius:999px;display:grid;place-items:center}
@media (max-width:1000px){
  .mast__in{grid-template-columns:1fr auto;grid-template-areas:"logo acts" "search search"}
  .mast__logo{grid-area:logo} .mast__acts{grid-area:acts} .mast__search{grid-area:search;max-width:none}
}
@media (max-width:520px){ .mast__act span{display:none} .mast__logo img{height:48px} }

/* ---------- department nav ---------- */
.dept{background:#fff;border-bottom:1px solid var(--line);position:sticky;top:0;z-index:40}
.dept__in{max-width:var(--wrap);margin:0 auto;padding:0 20px;display:flex;gap:4px;
  align-items:center;overflow-x:auto;scrollbar-width:thin}
.dept a{white-space:nowrap;padding:14px 12px;text-decoration:none;color:var(--ink);
  font-size:.78rem;font-weight:600;letter-spacing:.04em;text-transform:uppercase;
  border-bottom:3px solid transparent;transition:color .18s,border-color .18s}
.dept a:hover{color:var(--red);border-bottom-color:var(--pink)}
.dept a[aria-current="page"]{color:var(--red);border-bottom-color:var(--red)}
.dept__home svg{width:15px;height:15px;fill:currentColor;vertical-align:-2px}
.dept a.is-new{color:var(--pink-nav);font-weight:700}
.dept a.is-new:hover{color:var(--pink-nav);border-bottom-color:var(--pink-nav)}
.dept a.is-new[aria-current="page"]{color:var(--pink-nav);border-bottom-color:var(--pink-nav)}

/* ---------- trust strip ---------- */
.trust{background:var(--pink-wash);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.trust__in{max-width:var(--wrap);margin:0 auto;padding:16px 20px;display:grid;gap:14px;
  grid-template-columns:repeat(auto-fit,minmax(170px,1fr))}
.trust__i{display:flex;gap:11px;align-items:center;justify-content:center}
.trust__i svg{width:22px;height:22px;fill:var(--red);flex:0 0 auto}
.trust__i b{display:block;font-size:.72rem;letter-spacing:.07em;text-transform:uppercase;line-height:1.35}
.trust__i span{display:block;font-size:.7rem;color:var(--ink-soft);letter-spacing:.04em;text-transform:uppercase}

/* ---------- collection circles ---------- */
.circles{padding:44px 0 8px}
.circles__grid{display:grid;gap:20px;grid-template-columns:repeat(auto-fit,minmax(118px,1fr));
  max-width:var(--wrap);margin:0 auto;padding:0 20px}
.circle{text-decoration:none;display:grid;justify-items:center;gap:11px}
.circle i{display:grid;place-items:center;width:100%;aspect-ratio:1;border-radius:50%;
  background:radial-gradient(circle at 50% 35%,#fff,var(--pink-wash) 62%,var(--pink) 100%);
  border:2px solid transparent;overflow:hidden;
  transition:transform .26s cubic-bezier(.2,.7,.3,1),border-color .26s,box-shadow .26s}
.circle img{width:100%;height:100%;object-fit:cover}
.circle:hover i{transform:translateY(-6px) scale(1.04);border-color:var(--red);box-shadow:var(--shadow-lift)}
.circle span{font-size:.72rem;font-weight:700;letter-spacing:.09em;text-transform:uppercase;
  color:var(--ink);text-align:center}
.circle:hover span{color:var(--red)}

/* ---------- section headings in the storefront voice ---------- */
.shead{text-align:center;margin:0 auto 26px;max-width:var(--wrap);padding:0 20px}
.shead h2{font-family:var(--script);font-size:clamp(1.7rem,3.4vw,2.5rem);margin:0;font-weight:600}
.shead h2 em{font-style:normal;color:var(--red)}
.shead p{margin:8px 0 0;color:var(--ink-soft)}

/* ---------- tagline ribbon ---------- */
.tagline{background:var(--pink-wash);padding:20px;text-align:center;
  font-family:var(--script);font-size:clamp(1.05rem,2.3vw,1.5rem);color:var(--ink)}
.tagline span{color:var(--red)}

@media (prefers-reduced-motion:reduce){
  .circle i{transition:none}
}

/* ============================================================
   ROOMS

   The department card is a scene rather than a tile. Four layers on their own
   depth: a back wall carrying the product photograph, a light falling from
   above it, a floor darkening toward the bottom, and a plate of type standing
   in front of all three. On hover the layers move by different amounts, which
   is the whole trick; there is no 3D engine here and nothing expensive to draw.

   Each room sets its own --r-deep, --r-accent and --r-art, so every department
   has its own atmosphere while staying inside the locked five colours. Aqua,
   teal, cyan and turquoise appear nowhere.
   ============================================================ */

.rooms{display:grid;gap:24px;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));
  max-width:var(--wrap);margin:0 auto;padding:8px 20px 20px}
.rooms--tight{grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:18px}

.room{position:relative;display:block;overflow:hidden;text-decoration:none;
  min-height:330px;border-radius:var(--radius);padding:28px;
  background:var(--r-deep,var(--purple));color:var(--cream);
  border:1px solid var(--line);box-shadow:var(--shadow);
  transition:transform .5s cubic-bezier(.2,.7,.3,1),box-shadow .5s ease}
.room:hover{transform:translateY(-6px);box-shadow:0 28px 60px rgba(36,32,36,.3)}
.room:focus-visible{outline:3px solid var(--r-accent,var(--pink));outline-offset:4px}
.rooms--tight .room{min-height:250px;padding:22px}

.r-wall,.r-light,.r-floor{position:absolute;inset:0;z-index:0;
  transition:transform .5s cubic-bezier(.2,.7,.3,1)}
.r-wall{background-image:var(--r-art);background-size:cover;background-position:center;
  transform:scale(1.06)}
.r-light{background:radial-gradient(72% 54% at 50% -8%,var(--r-accent,var(--pink)) 0%,transparent 64%);
  opacity:.3;mix-blend-mode:soft-light}
/* These product photographs are shot on white and pale pink, so the floor has
   to carry nearly all of the contrast for the plate. It starts higher and lands
   darker than a scene built on dark art would need. */
/* Measured against the plate rather than eyeballed: the kicker sits 52% down
   the card, so the floor has to be past .7 by then. It is .74 there, which puts
   cream at about 5.9:1 on the palest photograph in the set. */
.r-floor{top:auto;height:78%;
  background:linear-gradient(180deg,rgba(36,32,36,0) 0%,rgba(36,32,36,.45) 20%,
    rgba(36,32,36,.78) 42%,rgba(36,32,36,.94) 100%)}
.room:hover .r-wall{transform:scale(1.12)}
.room:hover .r-light{transform:translateY(8px)}

/* The shadow is what lets the pink kicker stay pink over a white-shot product
   photo instead of being demoted to cream. */
.r-plate{position:relative;z-index:2;display:flex;flex-direction:column;height:100%;
  justify-content:flex-end;min-height:inherit;text-shadow:0 1px 10px rgba(36,32,36,.9)}
.r-kicker{font-size:.58rem;font-weight:700;letter-spacing:.22em;text-transform:uppercase;
  color:var(--r-accent,var(--pink));margin:0 0 9px}
.r-name{font-family:var(--display);font-weight:600;font-size:clamp(1.6rem,3.2vw,2.3rem);
  line-height:1.04;margin:0 0 9px;color:var(--cream)}
.r-line{font-size:.9rem;line-height:1.6;opacity:.94;max-width:34ch;margin:0 0 16px;color:var(--cream)}
.r-go{display:inline-flex;align-items:center;gap:.5rem;align-self:flex-start;
  font-size:.68rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
  padding-bottom:5px;border-bottom:1px solid var(--r-accent,var(--pink))}
.r-go .arw{display:inline-block;transition:transform .3s ease}
.room:hover .r-go .arw{transform:translateX(6px)}

/* A department with nothing behind it yet is a plate on the wall, not a link. */
.room.locked{cursor:default}
.room.locked .r-go{border-bottom-style:dashed;opacity:.75}

/* ---------- the held opening ----------
   A composed hold rather than a white flash while the plaza artwork arrives.
   It removes itself on load, and a hard timeout removes it even if something
   on the page never finishes, so it can never become a locked door. */
#lf-hold{position:fixed;inset:0;z-index:120;display:flex;flex-direction:column;
  align-items:center;justify-content:center;gap:20px;background:var(--cream);
  transition:opacity .55s ease,visibility .55s ease}
#lf-hold.gone{opacity:0;visibility:hidden}
#lf-hold img{width:58px;height:auto;opacity:.9}
.hold-line{font-family:var(--display);font-size:1.3rem;color:var(--ink-soft);text-align:center;padding:0 24px}
.hold-bar{width:min(280px,64vw);height:2px;background:var(--line);overflow:hidden}
.hold-bar i{display:block;height:100%;width:0;background:var(--red);transition:width .35s ease}

/* ---------- translucent chrome ----------
   The department nav lifts off the page it is sitting over instead of covering
   it, which is what makes a scrolled page still feel like a place. */
.dept{background:rgba(255,255,255,.92);
  backdrop-filter:saturate(1.2) blur(8px);-webkit-backdrop-filter:saturate(1.2) blur(8px)}

/* ---------- lite ----------
   Everything expensive comes off: no parallax, no blur, no deep shadows. The
   rooms stay exactly as legible, which is the point. */
body.lite .r-wall,body.lite .r-light,body.lite .r-floor{transition:none;transform:none}
body.lite .r-light{display:none}
body.lite .room,body.lite .room:hover{transform:none;box-shadow:0 2px 10px rgba(36,32,36,.1);transition:none}
body.lite .dept{backdrop-filter:none;background:#fff}
body.lite .circle i{transition:none}

@media (max-width:700px){
  .rooms{grid-template-columns:1fr;gap:18px}
  .room{min-height:280px;padding:22px}
}
@media (prefers-reduced-motion:reduce){
  .room,.r-wall,.r-light,.r-floor,.r-go .arw{transition:none !important}
  .room:hover{transform:none}
  .room:hover .r-wall,.room:hover .r-light{transform:scale(1.06)}
  .room:hover .r-go .arw{transform:none}
}

/* A room and the list of what is in it are one cell of the grid. */
.room-cell{display:flex;flex-direction:column;gap:14px}
.col__fams--under{list-style:none;padding:0;margin:0;display:flex;flex-wrap:wrap;gap:7px}
.col__fams--under a{display:inline-block;padding:5px 11px;border-radius:999px;
  background:var(--pink-wash);border:1px solid var(--line);text-decoration:none;
  color:var(--ink);font-size:.76rem;font-weight:600;transition:background .2s,border-color .2s}
.col__fams--under a:hover{background:var(--pink);border-color:var(--red)}

/* ---------- the ladybug, now her finished artwork ----------
   The picture already contains the eight products, so nothing is drawn on top
   of it. The anchors are round, transparent and sized to the circles she
   painted; the only mark the code makes is a ring of light on hover, on focus,
   and as the slow highlight passes through. */
.bug__art{position:relative;display:block;width:100%;margin:0 auto}
.bug__art img{display:block;width:100%;height:auto}
.bug__spot{position:absolute;display:block;border-radius:50%;
  box-shadow:0 0 0 0 rgba(239,167,196,0);
  transition:box-shadow .3s ease,transform .3s ease}
.bug__spot:hover,.bug__spot:focus-visible,.bug__spot.is-on{
  box-shadow:0 0 0 6px rgba(239,167,196,.92), 0 0 26px rgba(239,167,196,.7);
  transform:scale(1.03)}
.bug__spot:focus-visible{outline:none;
  box-shadow:0 0 0 5px var(--cream), 0 0 0 10px var(--purple)}
/* her artwork is drawn on its own pale pink ground, so the section matches it
   exactly rather than cutting a rectangle out of the page */
.section--bug{background:#FDF2F8}
@media (prefers-reduced-motion:reduce){
  .bug__spot{transition:none}
  .bug__spot:hover,.bug__spot.is-on{transform:none}
}