/* ============================================================
   LACALI — storefront refinement layer
   Loaded after store.css to lift the home page (and the shop)
   toward a calmer, more editorial European-boutique feel.
   Pure presentation: spacing, type scale, hover. No new markup.
   ============================================================ */

/* ---- Section rhythm: more air, an even cadence down the page ---- */
.section{ padding: clamp(3.6rem, 7vw, 6.2rem) 0; }
.section + .section{ padding-top: clamp(3rem, 6vw, 5.2rem); }

/* ---- Section headers: a hairline rule, a thinner display face ---- */
.sec-head{
  align-items: flex-end;
  margin-bottom: clamp(1.8rem, 3vw, 2.6rem);
  padding-bottom: 1.1rem;
  border-bottom: 1px solid var(--line);
}
.sec-head .titles{ gap: .45rem; }
.eyebrow{ letter-spacing: .3em; font-size: .68rem; font-weight: 600; }
.sec-head h2{
  font-weight: 500;
  letter-spacing: -.012em;
  line-height: 1.04;
  font-size: clamp(1.75rem, 3.4vw, 2.7rem);
}
.link-more{ border-bottom: none; font-size: .72rem; letter-spacing: .2em; }
.link-more::after{ height: 1px; background: currentColor; }

/* ---- Buttons: squarer, quieter, more tracked ---- */
.btn{
  border-radius: 2px;
  text-transform: uppercase;
  letter-spacing: .15em;
  font-weight: 600;
  font-size: .76rem;
  padding: 1.05em 1.9em;
}
.btn--sm{ padding: .78em 1.25em; font-size: .68rem; letter-spacing: .12em; }
.btn:hover{ transform: translateY(-1px); }

/* ---- Product cards: calmer frame, slower zoom, finer meta ---- */
.card-media{
  background: #f4f1ec;
  border: 1px solid var(--line);
  border-radius: 3px;
}
.card-media img{ transition: transform 1s cubic-bezier(.2,.7,.2,1); }
.card:hover .card-media img{ transform: scale(1.045); }
.card-body{ padding-top: 1rem; gap: .3rem; }
.card-brand{ font-size: .62rem; letter-spacing: .24em; color: var(--muted); }
.card-title{ font-size: 1.02rem; font-weight: 500; letter-spacing: .002em; }
.card-price{ margin-top: .15rem; }
.card-price .now{ font-weight: 600; }
.card-price .was{ font-size: .82rem; }

/* flags: smaller, less shouty */
.flag{
  font-size: .6rem;
  letter-spacing: .12em;
  padding: .36em .62em;
  border-radius: 2px;
  font-weight: 700;
}
.flag--new{ background: var(--ink); color: #fff; }

/* ---- Brand row: airier, a thin ring, a softer lift ---- */
.brand-row{ gap: clamp(1rem, 2.6vw, 2.2rem); }
.brand-chip{ padding: 1.2rem .5rem; border: none; background: transparent; }
.brand-chip:hover{ transform: none; box-shadow: none; }
.brand-chip img{
  width: 86px; height: 86px;
  border: 1px solid var(--line);
  box-shadow: none;
  transition: transform .4s ease, border-color .3s ease;
}
.brand-chip:hover img{ transform: translateY(-4px); border-color: var(--camel); }
.brand-chip span{ font-size: .7rem; letter-spacing: .18em; margin-top: .7rem; }

/* ---- Department tiles: deeper gradient, display label in Francois One ---- */
.tiles{ gap: clamp(1rem, 2vw, 1.6rem); }
.tile{ border-radius: 3px; }
.tile img{ opacity: .9; }
.tile:hover img{ opacity: .82; }
.tile-cap{
  padding: 1.7rem 1.6rem;
  background: linear-gradient(transparent, rgba(20,17,14,.2) 35%, rgba(20,17,14,.88));
}
.tile-cap h3{
  font-family: "Francois One", var(--display), serif;
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: .02em;
  font-size: 1.6rem;
  margin-top: .25rem;
}
.tile-cap span{ letter-spacing: .2em; color: #ece4d6; }

/* ---- Hero: a touch more editorial ---- */
.hero-copy h1{
  font-weight: 500;
  letter-spacing: -.015em;
  line-height: 1.05;
  font-size: clamp(2.1rem, 4.6vw, 3.4rem);
}
.hero-copy .eyebrow{ letter-spacing: .32em; }
.hero-copy p{ font-size: 1.06rem; line-height: 1.65; }

/* ---- Editorial split panels: a little more room to breathe ---- */
.split{ gap: clamp(1.6rem, 4vw, 3.4rem); }

/* ---- Newsletter: refined heading ---- */
.news h2, .newsletter h2{ font-weight: 500; letter-spacing: -.01em; }

/* ---- Header: a warm ivory ground instead of plain white ----
   Subtle and premium; keeps the black logo and menu. The search box turns white
   so it still reads as a crisp, tappable field against the ivory. */
.site-header{ background: #f6f3ee; }
.header-main .header-search{ background: #fff; border-color: var(--line); }
/* the thin line under the menu row, a touch softer on the ivery ground */
.header-main .primary-nav{ border-top-color: #e8e1d6; }

/* ---- Whole-page ground: the same warm ivory as the header, so the page flows
   seamlessly from top to bottom. Cards, dropdowns and panels stay white and pop. ---- */
body{ background: #f6f3ee; }

/* ---- Logo: the uploaded logo image has a white background baked in, which shows as a
   white box on the ivory header. "multiply" blends that white into the ivory so only the
   dark wordmark remains — no need to re-export the logo as a transparent PNG. (A black/
   dark logo is required for this to look right, which LACALI's is.) ---- */
.brand img{ mix-blend-mode: multiply; }

/* ---- Sub-categories (e.g. Casual / Sports / Classic under Shoes): indented, a touch
   smaller and quieter, so the hierarchy reads at a glance. ---- */
.mega .mega-col > a.sub-cat{ padding-inline-start: 1rem; font-size: .9rem; color: var(--muted,#8c857a); }
.mega .mega-col > a.sub-cat::before{ content: "– "; }
.mega .mega-col > a.sub-cat:hover{ color: var(--ink,#1a1714); }
.filter-block a.sub-cat{ padding-inline-start: 1.1rem; font-size: .95rem; }
.filter-block a.sub-cat > span:first-child::before{ content: "– "; color: var(--muted,#8c857a); }
.drawer nav .sub > a.sub-cat{ padding-inline-start: 1.4rem; opacity: .85; }
.drawer nav .sub > a.sub-cat::before{ content: "– "; }

/* ---- Hide stock counts from customers: the number beside each sidebar filter and the
   "N items" total above the grid. (They still work behind the scenes for filtering/sorting.) ---- */
.filter-block a .n{ display: none !important; }
.shop-bar .count{ display: none !important; }


/* ---- BRANDS dropdown clipping fix ----------------------------------------
   The mega dropdowns are centred under their menu item. BRANDS sits at the
   edge of the bar, so centring pushed its left column ("Brand Houses" heading
   and the "Shop all brands →" link) off the screen. Anchor the Brands panel to
   its trigger's edge instead so the whole panel stays on-screen. In Arabic
   (RTL) the item is on the right, so anchor to the right edge there. ---- */
.mega.mega--brands{
  left: 0;
  right: auto;
  transform: translateX(0) translateY(8px);
}
.header-nav > li:hover .mega.mega--brands{
  transform: translateX(0) translateY(0);
}
[dir="rtl"] .mega.mega--brands{
  left: auto;
  right: 0;
}