/* ==========================================================================
   components.css — buttons, cards, header, footer, USP, section-head, hero
   ========================================================================== */

/* ---------- buttons ---------- */
.ly-btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.5em;
  font-family:var(--font-heading);font-weight:600;font-size:14px;
  padding:12px 22px;border-radius:var(--radius-pill);
  transition:transform .2s var(--ease), background .2s var(--ease), border-color .2s var(--ease), color .2s var(--ease);
  cursor:pointer;text-decoration:none;line-height:1;
  border:1.5px solid transparent;
  min-height:44px;
}
.ly-btn--primary{background:var(--mocha-dark);color:#fff;border-color:var(--mocha-dark)}
.ly-btn--primary:hover{background:var(--ink);border-color:var(--ink)}
.ly-btn--secondary{background:#fff;color:var(--mocha-dark);border-color:var(--mocha-dark)}
.ly-btn--secondary:hover{background:var(--peach-soft)}
.ly-btn--ghost{background:transparent;color:var(--mocha-dark);border-color:transparent}
.ly-btn--ghost:hover{background:var(--peach-soft)}
.ly-btn--block{display:flex;width:100%;min-width:100%}
.ly-btn--lg{padding:14px 26px;font-size:15px;min-height:50px}
.ly-btn--sm{padding:8px 14px;font-size:12.5px;min-height:34px}
.ly-btn[disabled],.ly-btn.is-disabled{opacity:.55;cursor:not-allowed}

/* ---------- announcement bar ---------- */
.ly-announce{background:var(--mocha-dark);color:#fff;font-size:12.5px;font-family:var(--font-heading);font-weight:500;padding:8px 0;text-align:center}
.ly-announce a{color:#fff;text-decoration:underline;text-underline-offset:2px}
.ly-announce__inner{display:flex;gap:24px;justify-content:center;align-items:center;flex-wrap:wrap}
.ly-announce__inner > span{display:inline-flex;gap:6px;align-items:center}

/* ---------- header (sticky) ---------- */
.ly-header{position:sticky;top:0;z-index:100;background:rgba(255,255,255,.95);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);border-bottom:1px solid rgba(140,116,106,.10)}
.ly-header__inner{display:flex;align-items:center;gap:20px;padding:14px 0;min-height:64px}
.ly-header__logo{display:flex;align-items:center;color:var(--mocha-dark);font-family:var(--font-heading);font-weight:700;font-size:20px;letter-spacing:.01em}
.ly-header__logo img{max-height:36px;width:auto}
.ly-header__nav{display:none}
@media (min-width:980px){
  .ly-header__nav{display:flex;gap:22px;flex:1;margin-left:24px}
  .ly-header__nav a{font-family:var(--font-heading);font-weight:500;font-size:13.5px;color:var(--ink);padding:8px 4px;border-radius:8px;transition:color .2s var(--ease)}
  .ly-header__nav a:hover,.ly-header__nav .current-menu-item > a{color:var(--mocha-dark)}
}
.ly-header__icons{margin-left:auto;display:flex;align-items:center;gap:8px}
.ly-icon-btn{display:inline-flex;align-items:center;justify-content:center;width:40px;height:40px;border-radius:var(--radius-pill);color:var(--ink);transition:background .2s var(--ease),color .2s var(--ease);position:relative}
.ly-icon-btn:hover{background:var(--peach-soft);color:var(--mocha-dark)}
.ly-icon-btn svg{width:20px;height:20px;stroke:currentColor;fill:none;stroke-width:1.7}
.ly-cart-badge{position:absolute;top:2px;right:2px;background:var(--pink);color:#fff;min-width:18px;height:18px;padding:0 5px;border-radius:9px;font-family:var(--font-heading);font-weight:600;font-size:10.5px;display:inline-flex;align-items:center;justify-content:center;line-height:1}
.ly-cart-badge[data-count="0"]{display:none}
@media (min-width:980px){.ly-menu-btn{display:none}}

/* ---------- hero (page-hero, shared across pages) ---------- */
.ly-page-hero{background:linear-gradient(180deg,#fdeee7 0%,var(--cream) 100%);padding:44px 0 40px;text-align:center}
.ly-page-hero h1{margin:.35em auto .35em;max-width:22ch}
.ly-page-hero__lede{color:var(--fg-soft);max-width:56ch;margin:0 auto;font-size:15px}

/* ---------- section-head (reusable) ---------- */
.ly-section-head{display:flex;align-items:flex-end;justify-content:space-between;gap:20px;margin-bottom:24px;flex-wrap:wrap}
.ly-section-head__title{margin:0}
.ly-section-head__eyebrow{margin-bottom:8px}
.ly-section-head__link{font-family:var(--font-heading);font-weight:600;font-size:13px;color:var(--mocha-dark);text-decoration:underline;text-underline-offset:3px}

/* ---------- USP strip (4 cols desktop, 2 mobile) ---------- */
.ly-usps{background:#fff;padding:22px 0;border-block:1px solid rgba(140,116,106,.08)}
.ly-usps__grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
@media (min-width:768px){.ly-usps__grid{grid-template-columns:repeat(4,minmax(0,1fr));gap:20px}}
.ly-usp{display:flex;align-items:center;gap:10px}
.ly-usp__icon{flex:0 0 auto;width:34px;height:34px;border-radius:var(--radius-pill);background:var(--peach-soft);color:var(--mocha-dark);display:inline-flex;align-items:center;justify-content:center}
.ly-usp__icon svg{width:18px;height:18px;stroke:currentColor;fill:none;stroke-width:1.7}
.ly-usp__text{font-family:var(--font-heading);font-weight:500;font-size:12.5px;color:var(--ink);line-height:1.3}
.ly-usp__text strong{display:block;font-weight:600;font-size:13px;margin-bottom:2px;color:var(--ink)}

/* ---------- product card (SINGLE source of truth) ---------- */
.ly-pcard{position:relative;background:#fff;border-radius:var(--radius);overflow:hidden;box-shadow:0 2px 8px rgba(140,116,106,.06);transition:transform .3s var(--ease), box-shadow .3s var(--ease);display:flex;flex-direction:column}
.ly-pcard:hover{transform:translateY(-3px);box-shadow:var(--shadow)}
.ly-pcard__media{position:relative;aspect-ratio:1/1;background:var(--peach-soft);overflow:hidden}
.ly-pcard__media img{width:100%;height:100%;object-fit:cover;transition:transform .6s var(--ease)}
.ly-pcard:hover .ly-pcard__media img{transform:scale(1.04)}
.ly-pcard__badges{position:absolute;top:10px;left:10px;display:flex;flex-direction:column;gap:6px;z-index:2}
.ly-badge{display:inline-flex;align-items:center;padding:4px 9px;border-radius:var(--radius-pill);font-family:var(--font-heading);font-weight:600;font-size:10.5px;letter-spacing:.02em}
.ly-badge--sale{background:var(--pink);color:#fff}
.ly-badge--new{background:var(--sage);color:#fff}
.ly-badge--low{background:var(--peach);color:var(--mocha-dark)}
.ly-pcard__wish{position:absolute;top:10px;right:10px;z-index:2;background:rgba(255,255,255,.9);border-radius:var(--radius-pill);width:34px;height:34px;display:inline-flex;align-items:center;justify-content:center;color:var(--mocha-dark)}
.ly-pcard__wish svg{width:16px;height:16px;stroke:currentColor;fill:none;stroke-width:1.7}
.ly-pcard__body{padding:12px 14px 14px;display:flex;flex-direction:column;gap:6px;flex:1}
.ly-pcard__title{font-family:var(--font-heading);font-weight:600;font-size:13.5px;color:var(--ink);margin:0;min-height:2.7em;line-height:1.35;overflow-wrap:anywhere;min-width:0}
.ly-pcard__rating{display:flex;align-items:center;gap:4px;font-size:11.5px;color:var(--fg-soft)}
.ly-pcard__rating svg{width:12px;height:12px;fill:var(--peach);stroke:none}
.ly-pcard__price{display:flex;align-items:baseline;gap:6px;font-family:var(--font-heading);font-weight:600;color:var(--ink)}
.ly-pcard__price ins{background:none;color:var(--mocha-dark);text-decoration:none;font-size:15px}
.ly-pcard__price del{color:var(--fg-soft);font-size:12.5px;font-weight:500}
.ly-pcard__price .ly-price-current{font-size:15px}
.ly-pcard__swatches{display:flex;gap:5px;margin-top:auto}
.ly-swatch-mini{width:14px;height:14px;border-radius:var(--radius-pill);border:1px solid rgba(0,0,0,.06);display:inline-block}
.ly-pcard__add{margin-top:10px;display:block;width:100%;min-width:100%;text-align:center;padding:9px;border-radius:var(--radius-pill);background:var(--mocha-dark);color:#fff;font-family:var(--font-heading);font-weight:600;font-size:12.5px;transition:background .2s var(--ease)}
.ly-pcard__add:hover{background:var(--ink)}

/* ---------- product-grid ---------- */
.ly-product-grid{display:grid;gap:14px;grid-template-columns:repeat(2,minmax(0,1fr))}
@media (min-width:640px){.ly-product-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}}
@media (min-width:980px){.ly-product-grid{grid-template-columns:repeat(4,minmax(0,1fr));gap:22px}}
.ly-product-grid[data-cols="3"]{grid-template-columns:repeat(2,minmax(0,1fr))}
@media (min-width:980px){.ly-product-grid[data-cols="3"]{grid-template-columns:repeat(3,minmax(0,1fr))}}

/* ---------- category tiles ---------- */
.ly-cat-tiles{display:grid;gap:14px;grid-template-columns:repeat(2,minmax(0,1fr))}
@media (min-width:768px){.ly-cat-tiles{grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}}
@media (min-width:1100px){.ly-cat-tiles{grid-template-columns:repeat(4,minmax(0,1fr))}}
.ly-cat-tile{position:relative;display:block;aspect-ratio:1/1.05;border-radius:var(--radius-lg);overflow:hidden;background:var(--peach-soft);transition:transform .3s var(--ease), box-shadow .3s var(--ease)}
.ly-cat-tile:hover{transform:translateY(-3px);box-shadow:var(--shadow)}
.ly-cat-tile img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.ly-cat-tile__title{position:absolute;left:14px;bottom:14px;color:#fff;font-family:var(--font-heading);font-weight:700;font-size:16px;text-shadow:0 1px 4px rgba(0,0,0,.35);z-index:2}
.ly-cat-tile::after{content:"";position:absolute;inset:0;background:linear-gradient(to top,rgba(0,0,0,.35),transparent 55%);z-index:1}

/* ---------- footer ---------- */
.ly-footer{background:var(--mocha-dark);color:#fff;padding:56px 0 30px;margin-top:60px}
.ly-footer a{color:#fff}
.ly-footer__grid{display:grid;gap:32px;grid-template-columns:1fr}
@media (min-width:768px){.ly-footer__grid{grid-template-columns:1.5fr repeat(4,1fr);gap:40px}}
.ly-footer__brand p{color:rgba(255,255,255,.75);font-size:13.5px;margin:12px 0 18px}
.ly-footer__social{display:flex;gap:8px}
.ly-footer__social a{width:36px;height:36px;border-radius:var(--radius-pill);background:rgba(255,255,255,.10);display:inline-flex;align-items:center;justify-content:center;transition:background .2s var(--ease)}
.ly-footer__social a:hover{background:rgba(255,255,255,.20)}
.ly-footer__col h4{color:#fff;margin:0 0 12px;font-size:13px;font-weight:600;text-transform:uppercase;letter-spacing:.06em}
.ly-footer__col ul{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:8px;font-size:13.5px;color:rgba(255,255,255,.80)}
.ly-footer__col a:hover{color:var(--peach)}
.ly-footer__strip{margin-top:36px;padding-top:20px;border-top:1px solid rgba(255,255,255,.10);display:flex;justify-content:space-between;gap:14px;flex-wrap:wrap;font-size:12px;color:rgba(255,255,255,.65)}

/* ---------- reveal animation gate (fail-SAFE) ---------- */
.js-anim .ly-reveal{opacity:0;transform:translateY(24px);transition:opacity .7s var(--ease), transform .7s var(--ease)}
.js-anim .ly-reveal.is-visible{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){.js-anim .ly-reveal{opacity:1;transform:none;transition:none}}