/* ============================================================
   F&T Pet Products — landing page
   Brand: cream #FFFCE9 · orange #E35C2A · ink #292933
   ============================================================ */

:root{
  --cream:#FFFCE9;
  --cream-2:#FDF7E8;
  --orange:#E35C2A;
  --orange-d:#C94A1C;
  --orange-l:#FFE0C4;
  --ink:#292933;
  --ink-2:#5A5A68;
  --line:#EBE3CC;
  --wa:#25D366;
  --mint:#CFE9D8;
  --sky:#D4E7F5;
  --lilac:#E2DAF5;
  --butter:#FBE08A;
  --blush:#FBD9D2;

  --r-sm:12px;
  --r:18px;
  --r-lg:28px;
  --shadow:0 2px 4px rgba(41,41,51,.04), 0 10px 26px rgba(41,41,51,.07);
  --shadow-lg:0 8px 16px rgba(41,41,51,.06), 0 24px 56px rgba(41,41,51,.11);
  --head:"Baloo 2", "Arial Rounded MT Bold", system-ui, sans-serif;
  --body:"Nunito", system-ui, -apple-system, "Segoe UI", sans-serif;
}

*,*::before,*::after{box-sizing:border-box}

html{scroll-behavior:smooth; scroll-padding-top:92px}
@media (prefers-reduced-motion:reduce){ html{scroll-behavior:auto} }

body{
  margin:0;
  background:var(--cream);
  color:var(--ink);
  font-family:var(--body);
  font-size:16px;
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

h1,h2,h3,h4{font-family:var(--head); line-height:1.12; margin:0; letter-spacing:-.01em}
h1{font-size:clamp(2.05rem,4.6vw,3.4rem); font-weight:800; text-wrap:balance; max-width:20ch}
h2{font-size:clamp(1.7rem,3.6vw,2.6rem); font-weight:700}
h3{font-size:1.2rem; font-weight:700}
p{margin:0}
img{max-width:100%; display:block}
a{color:inherit; text-decoration:none}
button{font:inherit; color:inherit}

.wrap{width:min(1180px, 100% - 2rem); margin-inline:auto}
@media (min-width:700px){ .wrap{width:min(1180px, 100% - 4rem)} }

.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.skip-link{position:absolute;left:-999px;top:0;z-index:100;background:var(--ink);color:#fff;padding:.7rem 1.1rem;border-radius:0 0 var(--r-sm) 0}
.skip-link:focus{left:0}

:focus-visible{outline:3px solid var(--orange); outline-offset:3px; border-radius:6px}

/* ───────────── buttons ───────────── */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:.5rem;
  padding:.82rem 1.5rem; border:0; border-radius:999px; cursor:pointer;
  font-family:var(--head); font-weight:700; font-size:1rem; text-decoration:none;
  transition:transform .18s ease, box-shadow .18s ease, background .18s ease;
  white-space:nowrap;
}
.btn:hover{transform:translateY(-2px)}
.btn:active{transform:translateY(0)}
.btn--sm{padding:.6rem 1.15rem; font-size:.92rem}
.btn--full{width:100%}
.btn--light{background:var(--cream); color:var(--orange); box-shadow:var(--shadow)}
.btn--light:hover{background:#fff}
.btn--dark{background:var(--ink); color:var(--cream)}
.btn--dark:hover{background:#1b1b22}
.btn--ghost{background:transparent; color:currentColor; box-shadow:inset 0 0 0 2px currentColor}
.btn--ghost:hover{background:rgba(255,255,255,.14)}
.btn--wa{background:var(--wa); color:#06331a}
.btn--wa:hover{background:#1fbd5a}
.ico-wa{width:20px;height:20px;fill:currentColor;flex:none}

.linkbtn{background:none;border:0;padding:0;color:var(--orange);font-weight:700;cursor:pointer;text-decoration:underline}

.eyebrow{
  font-family:var(--head); font-weight:700; font-size:.82rem;
  letter-spacing:.14em; text-transform:uppercase; opacity:.85; margin-bottom:.6rem;
}
.eyebrow--dark{color:var(--orange); opacity:1}

/* ───────────── announce ───────────── */
.announce{background:var(--ink); color:#F6F1DE; font-size:.82rem}
.announce__in{display:flex; align-items:center; justify-content:center; gap:1rem; padding:.5rem 0; flex-wrap:wrap}
.announce__sep{width:4px;height:4px;border-radius:50%;background:currentColor;opacity:.4}
.announce__phone{font-weight:700;text-decoration:none}
.announce__phone:hover{color:var(--butter)}
@media (max-width:640px){ .announce__item--hide-sm{display:none} }

/* ───────────── header ───────────── */
.hdr{position:sticky; top:0; z-index:50; background:rgba(255,252,233,.92); backdrop-filter:blur(10px); border-bottom:1px solid var(--line)}
.hdr__in{display:flex; align-items:center; gap:1rem; padding:.7rem 0}
.brand{display:flex; align-items:center; gap:.6rem; text-decoration:none; flex:none}
.brand img{width:52px;height:auto}
.brand__txt{display:flex; flex-direction:column; line-height:1}
.brand__txt strong{font-family:var(--head); font-size:1.45rem; font-weight:800; color:var(--orange)}
.brand__txt small{font-size:.68rem; letter-spacing:.12em; text-transform:uppercase; color:var(--ink-2); font-weight:700}

.nav{display:flex; gap:.35rem; margin-left:auto}
.nav__a{
  text-decoration:none; font-weight:700; font-size:.95rem; padding:.5rem .85rem;
  border-radius:999px; transition:background .16s, color .16s;
}
.nav__a:hover,.nav__a.is-active{background:var(--orange-l); color:var(--orange-d)}

.hdr__act{display:flex; align-items:center; gap:.5rem; margin-left:auto}
.nav + .hdr__act{margin-left:0}
.iconbtn{
  width:42px;height:42px;display:grid;place-items:center;border:0;border-radius:50%;
  background:var(--orange-l); cursor:pointer; transition:background .16s;
}
.iconbtn:hover{background:#FFD0AA}
.iconbtn svg{width:21px;height:21px;fill:none;stroke:var(--orange-d);stroke-width:2;stroke-linecap:round}
.iconbtn--menu{display:none}

.searchbar{border-top:1px solid var(--line); background:var(--cream)}
.searchbar .wrap{display:flex; align-items:center; gap:.5rem; padding:.75rem 0}
.searchbar input{
  flex:1; padding:.8rem 1.1rem; border:2px solid var(--line); border-radius:999px;
  background:#fff; font:inherit; color:var(--ink);
}
.searchbar input:focus{border-color:var(--orange); outline:none}
.searchbar__close{background:none;border:0;font-size:1.8rem;line-height:1;cursor:pointer;color:var(--ink-2);padding:0 .4rem}

@media (max-width:900px){
  .iconbtn--menu{display:grid}
  .hdr__wa span{display:none}
  .hdr__wa{padding:.7rem .9rem}
  .nav{
    position:absolute; top:100%; left:0; right:0; background:var(--cream);
    flex-direction:column; gap:0; padding:.5rem 1rem 1rem; border-bottom:1px solid var(--line);
    box-shadow:var(--shadow); display:none;
  }
  .nav.is-open{display:flex}
  .nav__a{padding:.8rem 1rem; border-radius:var(--r-sm)}
  .nav__cta{display:grid; gap:.5rem; margin-top:.8rem; padding-top:.9rem; border-top:1px solid var(--line)}
}

/* ───────────── hero ───────────── */
.hero{position:relative; background:var(--orange); color:var(--cream); overflow:hidden; padding-bottom:70px}
.hero__bg{
  position:absolute; inset:0;
  background-image:
    radial-gradient(circle at 12% 18%, rgba(255,255,255,.14) 0 14px, transparent 15px),
    radial-gradient(circle at 88% 72%, rgba(255,255,255,.10) 0 22px, transparent 23px),
    radial-gradient(circle at 70% 12%, rgba(255,255,255,.08) 0 10px, transparent 11px),
    radial-gradient(circle at 30% 88%, rgba(255,255,255,.08) 0 16px, transparent 17px),
    linear-gradient(135deg, #EF6E39 0%, #E35C2A 55%, #CF4D1E 100%);
}
.hero__in{position:relative; display:grid; grid-template-columns:1.05fr .95fr; gap:2rem; align-items:center; padding:3.4rem 0 1rem; min-height:460px}
.hero__copy{max-width:36rem}
.hero__copy h1{max-width:19ch}
.hero__sub{font-size:1.06rem; margin:1rem 0 1.8rem; opacity:.95; max-width:33rem}
.hero__cta{display:flex; gap:.8rem; flex-wrap:wrap}
.hero__stats{list-style:none; display:flex; gap:2.2rem; margin:2.3rem 0 0; padding:0; flex-wrap:wrap}
.hero__stats li{display:flex; flex-direction:column}
.hero__stats strong{font-family:var(--head); font-size:2rem; font-weight:800; line-height:1}
.hero__stats span{font-size:.82rem; text-transform:uppercase; letter-spacing:.08em; opacity:.85; font-weight:600}

.hero__art{position:relative; height:420px}
.hero__pet{position:absolute; filter:drop-shadow(0 18px 28px rgba(0,0,0,.22))}
.hero__pet--1{width:46%; left:4%;  bottom:8%;  z-index:3; animation:bob 5s ease-in-out infinite}
.hero__pet--2{width:44%; right:2%; bottom:14%; z-index:2; animation:bob 5s ease-in-out .9s infinite}
.hero__pet--3{width:28%; left:34%; top:-4%;    z-index:1; animation:bob 6s ease-in-out .4s infinite}
.hero__pet--4{width:34%; right:14%; bottom:-2%; z-index:4; animation:bob 5.5s ease-in-out 1.4s infinite}
@keyframes bob{0%,100%{transform:translateY(0)}50%{transform:translateY(-12px)}}
@media (prefers-reduced-motion:reduce){ .hero__pet{animation:none} }

.hero__wave{position:absolute; bottom:-1px; left:0; width:100%; height:90px; display:block}
.hero__wave path{fill:var(--cream)}

@media (max-width:900px){
  .hero__in{grid-template-columns:1fr; padding-top:2.4rem; text-align:center}
  .hero__copy{max-width:none; margin-inline:auto}
  .hero__sub{margin-inline:auto}
  .hero__cta,.hero__stats{justify-content:center}
  .hero__art{height:300px; width:100%; max-width:460px; margin:1rem auto 0}
}
@media (max-width:520px){
  .hero__stats{gap:1.4rem}
  .hero__stats strong{font-size:1.5rem}
  .hero__art{height:230px}
}

/* ───────────── sections ───────────── */
.sec{padding:4.2rem 0}
.sec--tight{padding:2.2rem 0}
.sec__head{display:flex; align-items:flex-end; justify-content:space-between; gap:1.5rem; flex-wrap:wrap; margin-bottom:2rem}
.sec__head--center{flex-direction:column; align-items:center; text-align:center}

/* ───────────── categories ───────────── */
.cats{display:grid; grid-template-columns:repeat(6,1fr); gap:1rem}
.cat{
  display:flex; flex-direction:column; text-align:center; text-decoration:none;
  background:none; border:0; padding:0; color:inherit; cursor:pointer;
  transition:transform .2s ease;
}
.cat:hover{transform:translateY(-6px)}
.cat__pic{
  border-radius:var(--r-lg); overflow:hidden; aspect-ratio:1; margin-bottom:.7rem;
  box-shadow:var(--shadow); background:var(--cream-2);
}
.cat:nth-child(6n+1) .cat__pic{background:var(--blush)}
.cat:nth-child(6n+2) .cat__pic{background:var(--mint)}
.cat:nth-child(6n+3) .cat__pic{background:var(--sky)}
.cat:nth-child(6n+4) .cat__pic{background:var(--butter)}
.cat:nth-child(6n+5) .cat__pic{background:var(--lilac)}
.cat:nth-child(6n+6) .cat__pic{background:var(--orange-l)}
.cat__pic img{width:100%;height:100%;object-fit:cover; mix-blend-mode:multiply}
.cat__name{font-family:var(--head); font-weight:700; font-size:1rem; display:block; line-height:1.25}
.cat__n{display:block; font-size:.8rem; color:var(--ink-2)}
@media (max-width:980px){ .cats{grid-template-columns:repeat(3,1fr)} }
@media (max-width:520px){ .cats{grid-template-columns:repeat(2,1fr); gap:.8rem} }

/* ───────────── featured ───────────── */
.feat{display:grid; grid-template-columns:.9fr 1.3fr; gap:2rem; align-items:center;
  background:var(--cream-2); border:1px solid var(--line); border-radius:var(--r-lg); padding:2.2rem}
.feat__copy p{color:var(--ink-2); margin:.8rem 0 1.4rem}
.feat__cards{display:grid; grid-template-columns:1fr 1fr; gap:1rem}
@media (max-width:860px){ .feat{grid-template-columns:1fr; padding:1.5rem} }
@media (max-width:520px){ .feat__cards{grid-template-columns:1fr} }

/* ───────────── promos ───────────── */
.promos{display:grid; grid-template-columns:1fr 1fr; gap:1.2rem}
.promo{
  position:relative; display:flex; align-items:center; justify-content:space-between; gap:1rem;
  border-radius:var(--r-lg); padding:1.8rem 1.9rem; overflow:hidden; min-height:170px;
}
.promo--orange{background:linear-gradient(120deg,#EF6E39,#D9521F); color:var(--cream)}
.promo--mint{background:linear-gradient(120deg,#DCEFE3,#C4E3D1); color:var(--ink)}
.promo__kicker{font-size:.8rem; text-transform:uppercase; letter-spacing:.1em; font-weight:700; opacity:.85}
.promo h3{font-size:1.5rem; margin:.3rem 0 1rem; max-width:14ch}
.promo__img{width:38%; max-width:180px; align-self:flex-end; filter:drop-shadow(0 12px 18px rgba(0,0,0,.18))}
@media (max-width:760px){ .promos{grid-template-columns:1fr} }

/* ───────────── filters ───────────── */
.filters{display:flex; gap:.5rem; flex-wrap:wrap}
.chip{
  border:2px solid var(--line); background:var(--cream-2); border-radius:999px;
  padding:.5rem 1.05rem; cursor:pointer; font-weight:700; font-size:.9rem; color:var(--ink-2);
  transition:all .16s ease;
}
.chip:hover{border-color:var(--orange); color:var(--orange)}
.chip.is-on{background:var(--orange); border-color:var(--orange); color:#fff}

.result{color:var(--ink-2); font-size:.9rem; margin-bottom:1rem}
.empty{text-align:center; padding:3rem 0; color:var(--ink-2)}

/* ───────────── product grid ───────────── */
.grid{display:grid; grid-template-columns:repeat(4,1fr); gap:1.2rem}
@media (max-width:980px){ .grid{grid-template-columns:repeat(3,1fr)} }
@media (max-width:760px){ .grid{grid-template-columns:repeat(2,1fr); gap:.9rem} }

.card{
  position:relative; display:flex; flex-direction:column; text-align:left;
  text-decoration:none; color:inherit;
  background:#fff; border:1px solid var(--line); border-radius:var(--r);
  padding:.7rem .7rem 1rem; cursor:pointer; overflow:hidden;
  transition:transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.card:hover{transform:translateY(-5px); box-shadow:var(--shadow-lg); border-color:var(--orange-l)}
.card__pic{position:relative; border-radius:var(--r-sm); overflow:hidden; aspect-ratio:1; background:var(--cream-2)}
.card__pic img{width:100%;height:100%;object-fit:cover; transition:transform .35s ease}
.card:hover .card__pic img{transform:scale(1.05)}
.card__tag{
  position:absolute; top:.55rem; left:.55rem; background:var(--ink); color:var(--cream);
  font-size:.68rem; font-weight:700; letter-spacing:.06em; text-transform:uppercase;
  padding:.25rem .6rem; border-radius:999px;
}
.card__view{
  position:absolute; inset:auto 0 0 0; background:rgba(41,41,51,.86); color:var(--cream);
  font-family:var(--head); font-weight:700; font-size:.85rem; text-align:center; padding:.5rem;
  transform:translateY(100%); transition:transform .22s ease;
}
.card:hover .card__view, .card:focus-visible .card__view{transform:translateY(0)}
.card__cat{font-size:.74rem; text-transform:uppercase; letter-spacing:.08em; color:var(--orange); font-weight:700; margin:.75rem 0 .2rem}
.card__name{font-family:var(--head); font-weight:700; font-size:1rem; line-height:1.25; margin-bottom:.4rem}
.card__price{margin-top:auto; font-family:var(--head); font-weight:800; font-size:1.1rem; color:var(--ink);
  display:flex; align-items:baseline; gap:.35rem; flex-wrap:wrap}
.card__price small{font-family:var(--body); font-weight:600; font-size:.76rem; color:var(--ink-2); letter-spacing:.01em}
.card__meta{font-size:.72rem; color:var(--ink-2); line-height:1.35; margin-top:.3rem}

/* ───────────── why ───────────── */
.why{background:var(--butter); padding:4.2rem 0; position:relative}
.why__grid{display:grid; grid-template-columns:repeat(3,1fr); gap:1.1rem}
.why__card{background:var(--cream); border-radius:var(--r); padding:1.5rem 1.4rem; box-shadow:0 6px 18px rgba(41,41,51,.07)}
.why__ico{
  display:grid; place-items:center; width:44px;height:44px; border-radius:14px;
  background:var(--orange); color:#fff; font-size:1.25rem; font-weight:700; margin-bottom:.9rem;
  font-family:var(--head);
}
.why__card p{color:var(--ink-2); font-size:.95rem; margin-top:.4rem}
@media (max-width:900px){ .why__grid{grid-template-columns:repeat(2,1fr)} }
@media (max-width:560px){ .why__grid{grid-template-columns:1fr} }

/* ───────────── cta ───────────── */
.cta{background:var(--ink); color:var(--cream); padding:4rem 0}
.cta__in{display:grid; grid-template-columns:1.3fr .7fr; gap:2.5rem; align-items:center}
.cta__sub{opacity:.78; margin:1rem 0 1.8rem; max-width:40rem}
.cta__btns{display:flex; gap:.8rem; flex-wrap:wrap}
.cta__list{list-style:none; margin:0; padding:0; display:grid; gap:.9rem}
.cta__list li{display:flex; flex-direction:column; border-left:3px solid var(--orange); padding-left:.9rem}
.cta__list span{font-size:.74rem; text-transform:uppercase; letter-spacing:.1em; opacity:.6; font-weight:700}
.cta__list a,.cta__list em{font-style:normal; font-weight:700; text-decoration:none; overflow-wrap:anywhere}
.cta__list a:hover{color:var(--butter)}
@media (max-width:860px){ .cta__in{grid-template-columns:1fr} }

/* ───────────── footer ───────────── */
.foot{background:var(--cream-2); border-top:1px solid var(--line); padding:3rem 0 5.5rem}
.foot__in{display:grid; grid-template-columns:1.6fr 1fr 1fr 1.2fr; gap:2rem}
.foot__brand p{color:var(--ink-2); font-size:.92rem; margin:.8rem 0 1rem; max-width:28ch}
.foot__social{display:flex; gap:.55rem}
.foot__social a{width:38px;height:38px;display:grid;place-items:center;border-radius:50%;background:var(--orange-l);color:var(--orange-d);transition:background .16s}
.foot__social a:hover{background:var(--orange); color:#fff}
.foot__social svg{width:19px;height:19px;fill:none;stroke:currentColor;stroke-width:1.9}
.foot__col h4{font-size:.98rem; margin-bottom:.8rem}
.foot__col ul{list-style:none; margin:0; padding:0; display:grid; gap:.5rem}
.foot__col a{text-decoration:none; color:var(--ink-2); font-size:.93rem}
.foot__col a:hover{color:var(--orange)}
.foot__col em{font-style:normal; color:var(--ink-2); font-size:.93rem}
.brk{word-break:break-word; overflow-wrap:anywhere}
.foot__base{display:flex; justify-content:space-between; gap:1rem; flex-wrap:wrap;
  border-top:1px solid var(--line); margin-top:2.5rem; padding-top:1.2rem;
  font-size:.82rem; color:var(--ink-2)}
@media (max-width:860px){ .foot__in{grid-template-columns:1fr 1fr} }
@media (max-width:520px){ .foot__in{grid-template-columns:1fr} }

/* ───────────── fab ───────────── */
.fab{
  position:fixed; right:1.1rem; bottom:1.1rem; z-index:45;
  width:56px;height:56px; border-radius:50%; background:var(--wa); color:#fff;
  display:grid; place-items:center; box-shadow:0 10px 26px rgba(37,211,102,.45);
  transition:transform .2s ease;
}
.fab:hover{transform:scale(1.08)}
.fab svg{width:30px;height:30px}

/* ───────────── modal ───────────── */
.modal{position:fixed; inset:0; z-index:60; display:grid; place-items:center; padding:1rem}
.modal[hidden]{display:none}
.modal__scrim{position:absolute; inset:0; background:rgba(41,41,51,.6); backdrop-filter:blur(3px)}
.modal__box{
  position:relative; display:grid; grid-template-columns:1fr 1fr; gap:0;
  width:min(900px,100%); max-height:90vh; overflow:auto;
  background:var(--cream); border-radius:var(--r-lg); box-shadow:var(--shadow-lg);
  animation:pop .22s ease;
}
@keyframes pop{from{opacity:0; transform:translateY(14px) scale(.98)}}
.modal__x{
  position:absolute; top:.6rem; right:.7rem; z-index:2; width:38px;height:38px; border:0; border-radius:50%;
  background:var(--cream); color:var(--ink); font-size:1.7rem; line-height:1; cursor:pointer; box-shadow:var(--shadow);
}
.modal__media{background:var(--cream-2); padding:1.2rem; display:flex; flex-direction:column; gap:.7rem}
.modal__media > img{border-radius:var(--r); aspect-ratio:1; object-fit:cover; width:100%}
.modal__thumbs{display:flex; gap:.45rem; flex-wrap:wrap}
.modal__thumbs button{
  width:52px;height:52px; border-radius:10px; overflow:hidden; border:2px solid transparent;
  padding:0; cursor:pointer; background:var(--cream)
}
.modal__thumbs button.is-on{border-color:var(--orange)}
.modal__thumbs img{width:100%;height:100%;object-fit:cover}
.modal__body{padding:1.8rem 1.6rem}
.modal__cat{font-size:.76rem; text-transform:uppercase; letter-spacing:.1em; color:var(--orange); font-weight:700}
.modal__body h3{font-size:1.5rem; margin:.3rem 0 .5rem}
.modal__price{font-family:var(--head); font-weight:800; font-size:1.4rem; margin-bottom:.9rem}
.modal__price small{font-family:var(--body); font-size:.78rem; font-weight:600; color:var(--ink-2)}
.modal__blurb{color:var(--ink-2); font-size:.95rem}
.modal__body h4{font-size:.86rem; text-transform:uppercase; letter-spacing:.09em; color:var(--ink-2); margin:1.2rem 0 .5rem}
.modal__feats{list-style:none; margin:0 0 1.4rem; padding:0; display:grid; gap:.4rem; font-size:.93rem}
.modal__feats li{padding-left:1.4rem; position:relative}
.modal__feats li::before{content:"🐾"; position:absolute; left:0; font-size:.8rem}
.modal__fine{font-size:.76rem; color:var(--ink-2); margin-top:.8rem; text-align:center}
@media (max-width:760px){ .modal__box{grid-template-columns:1fr} .modal__body{padding:1.3rem} }

body.is-locked{overflow:hidden}
html:has(body.is-locked){overflow:hidden}

/* ============================================================
   Multi-page additions: page heroes, PDP, legal, FAQ, contact
   ============================================================ */

/* ───────────── page hero (sub-pages) ───────────── */
.phero{position:relative; background:var(--orange); color:var(--cream); padding:3.2rem 0 5rem; overflow:hidden}
.phero::before{
  content:""; position:absolute; inset:0;
  background-image:
    radial-gradient(circle at 10% 20%, rgba(255,255,255,.12) 0 12px, transparent 13px),
    radial-gradient(circle at 86% 70%, rgba(255,255,255,.09) 0 20px, transparent 21px),
    linear-gradient(135deg,#EF6E39 0%, #E35C2A 60%, #CF4D1E 100%);
}
.phero > .wrap{position:relative}
.phero h1{font-size:clamp(2rem,4.6vw,3.2rem); max-width:18ch}
.phero__sub{margin-top:1rem; max-width:52ch; opacity:.94; font-size:1.05rem}
.phero--slim{padding-bottom:4.5rem}
.phero--slim h1{max-width:22ch}
.phero .hero__wave{position:absolute; bottom:-1px; left:0; width:100%; height:70px}

/* ───────────── breadcrumbs ───────────── */
.crumbs{padding:1.1rem 0 .2rem; font-size:.86rem; color:var(--ink-2)}
.crumbs a{text-decoration:none; color:var(--ink-2)}
.crumbs a:hover{color:var(--orange)}
.crumbs span{margin:0 .35rem; opacity:.5}
.crumbs em{font-style:normal; color:var(--ink); font-weight:700}

/* ───────────── product detail page ───────────── */
.pdp{display:grid; grid-template-columns:1fr 1fr; gap:2.5rem; padding:1.5rem 0 3rem; align-items:start}
.pdp__main{background:var(--cream-2); border:1px solid var(--line); border-radius:var(--r-lg); overflow:hidden}
.pdp__main img{width:100%; aspect-ratio:1; object-fit:cover}
.pdp__thumbs{display:flex; gap:.5rem; flex-wrap:wrap; margin-top:.7rem}
.pdp__thumb{
  width:66px;height:66px;border-radius:12px;overflow:hidden;border:2px solid var(--line);
  padding:0;cursor:pointer;background:var(--cream-2);transition:border-color .16s
}
.pdp__thumb img{width:100%;height:100%;object-fit:cover}
.pdp__thumb:hover{border-color:var(--orange-l)}
.pdp__thumb.is-on{border-color:var(--orange)}

.pdp__cat{font-size:.78rem; text-transform:uppercase; letter-spacing:.1em; color:var(--orange); font-weight:700}
.pdp__info h1{font-size:clamp(1.6rem,3.2vw,2.3rem); margin:.4rem 0 .6rem; max-width:none}
.pdp__price{font-family:var(--head); font-weight:800; font-size:1.8rem; margin-bottom:.2rem}
.pdp__price small{font-family:var(--body); font-size:.86rem; font-weight:700; color:var(--ink-2)}
.pdp__variants{font-size:.88rem; color:var(--ink-2); margin-bottom:1rem}
.pdp__blurb{color:var(--ink-2); font-size:1rem}
.pdp__h{font-size:.86rem; text-transform:uppercase; letter-spacing:.09em; color:var(--ink-2); margin:1.5rem 0 .6rem; font-family:var(--body); font-weight:700}
.pdp__feats{list-style:none; margin:0; padding:0; display:grid; gap:.45rem; font-size:.96rem}
.pdp__feats li{padding-left:1.5rem; position:relative}
.pdp__feats li::before{content:"🐾"; position:absolute; left:0; font-size:.82rem}

.pdp__spec{
  display:grid; grid-template-columns:auto 1fr; gap:.1rem 1.2rem; margin:1.6rem 0;
  background:var(--cream-2); border:1px solid var(--line); border-radius:var(--r); padding:1.1rem 1.3rem;
  font-size:.93rem;
}
.pdp__spec dt{color:var(--ink-2); padding:.3rem 0}
.pdp__spec dd{margin:0; font-weight:700; padding:.3rem 0}

.pdp__cta{display:grid; gap:.6rem; margin-top:1.4rem}
.btn--dark-ghost{color:var(--ink)}
.pdp__fine{font-size:.8rem; color:var(--ink-2); margin-top:.8rem; text-align:center}

@media (max-width:860px){ .pdp{grid-template-columns:1fr; gap:1.6rem} }

.card__ask{font-family:var(--body); font-size:.95rem; font-weight:700; color:var(--orange)}

/* ───────────── catalogue search bar ───────────── */
.catbar{display:flex; flex-direction:column; gap:.9rem; align-items:flex-end}
.catsearch{position:relative; width:min(340px,100%)}
.catsearch svg{
  position:absolute; left:.95rem; top:50%; transform:translateY(-50%);
  width:18px;height:18px;fill:none;stroke:var(--ink-2);stroke-width:2;stroke-linecap:round; pointer-events:none;
}
.catsearch input{
  width:100%; padding:.72rem 1rem .72rem 2.6rem; border:2px solid var(--line); border-radius:999px;
  background:#fff; font:inherit; font-size:.95rem; color:var(--ink);
}
.catsearch input:focus{border-color:var(--orange); outline:none}
@media (max-width:760px){ .catbar{align-items:stretch} .catsearch{width:100%} }

/* ───────────── two-column page layouts ───────────── */
.split{display:grid; grid-template-columns:1.55fr .85fr; gap:2.5rem; align-items:start}
.split--form{grid-template-columns:1.1fr .9fr}
.split--faq{grid-template-columns:1.6fr .8fr}
@media (max-width:900px){ .split,.split--form,.split--faq{grid-template-columns:1fr; gap:1.8rem} }

/* ───────────── prose ───────────── */
.prose h2{margin-top:2rem; font-size:1.5rem}
.prose h2:first-child{margin-top:0}
.prose p{margin:.8rem 0; color:var(--ink-2)}
.prose ol,.prose ul{color:var(--ink-2); padding-left:1.2rem; margin:.8rem 0}
.prose li{margin:.45rem 0}
.prose strong{color:var(--ink)}
.prose a,.legal a,.faq__a a,.formcard__alt a,.catnote a,.pdp__spec a{
  color:var(--orange-d); font-weight:700; text-underline-offset:3px;
}
.prose a:hover,.legal a:hover,.faq__a a:hover,.formcard__alt a:hover,.catnote a:hover,.pdp__spec a:hover{
  text-decoration:underline;
}

/* ───────────── fact card / side boxes ───────────── */
.factcard,.sidebox{
  background:var(--cream-2); border:1px solid var(--line); border-radius:var(--r-lg); padding:1.5rem 1.4rem;
}
.sidebox + .sidebox{margin-top:1rem}
.sidebox--accent{background:var(--butter); border-color:#EBC95E}
.sidebox h3,.factcard h3{font-size:1.15rem; margin-bottom:.7rem}
.sidebox p{color:var(--ink-2); font-size:.94rem; margin-bottom:1rem}
.sidebox .btn + .btn{margin-top:.5rem}
.factcard dl{display:grid; grid-template-columns:auto 1fr; gap:.1rem 1rem; font-size:.92rem; margin:0 0 1.2rem}
.factcard dt{color:var(--ink-2); padding:.3rem 0}
.factcard dd{margin:0; font-weight:700; padding:.3rem 0; min-width:0}
.factcard a{color:var(--orange)}
.linklist{list-style:none; margin:0; padding:0; display:grid; gap:.5rem; font-size:.94rem}
.linklist a{color:var(--ink-2); text-decoration:none}
.linklist a:hover{color:var(--orange)}

/* ───────────── contact form ───────────── */
.formcard{background:var(--cream-2); border:1px solid var(--line); border-radius:var(--r-lg); padding:1.8rem 1.7rem}
.formcard h2{font-size:1.5rem}
.formcard__note{color:var(--ink-2); font-size:.9rem; margin:.5rem 0 1.4rem}
.formcard__alt{text-align:center; font-size:.88rem; color:var(--ink-2); margin-top:.9rem}
.formcard__alt a{color:var(--orange)}
.field{margin-bottom:1rem; display:grid; gap:.35rem}
.field label{font-weight:700; font-size:.9rem}
.field label span{color:var(--orange)}
.field input,.field select,.field textarea{
  width:100%; padding:.72rem .95rem; border:2px solid var(--line); border-radius:var(--r-sm);
  background:#fff; font:inherit; font-size:.96rem; color:var(--ink); resize:vertical;
}
.field input:focus,.field select:focus,.field textarea:focus{border-color:var(--orange); outline:none}
.field__err{background:var(--blush); color:#8A2A16; border-radius:var(--r-sm); padding:.7rem .9rem; font-size:.9rem; margin-bottom:.9rem}

.cinfo{list-style:none; margin:0 0 1.2rem; padding:0; display:grid; gap:1rem}
.cinfo li{border-left:3px solid var(--orange); padding-left:.9rem; display:grid; gap:.1rem; min-width:0}
.cinfo__k{font-size:.74rem; text-transform:uppercase; letter-spacing:.1em; color:var(--ink-2); font-weight:700}
.cinfo__v{font-weight:700; font-style:normal; text-decoration:none; font-size:1.02rem}
a.cinfo__v:hover{color:var(--orange)}
.cinfo em{font-style:normal; font-size:.86rem; color:var(--ink-2); font-weight:400}

.faqteaser{
  display:flex; align-items:center; justify-content:space-between; gap:1.5rem; flex-wrap:wrap;
  background:var(--cream-2); border:1px solid var(--line); border-radius:var(--r-lg); padding:1.8rem;
}
.faqteaser p{color:var(--ink-2); margin-top:.4rem}

/* ───────────── FAQ ───────────── */
.faqgroup{font-size:.84rem; text-transform:uppercase; letter-spacing:.12em; color:var(--orange);
  font-family:var(--body); font-weight:800; margin:2rem 0 .8rem}
.faqgroup:first-child{margin-top:0}
.faq{border:1px solid var(--line); background:var(--cream-2); border-radius:var(--r); margin-bottom:.6rem; overflow:hidden}
.faq summary{
  cursor:pointer; padding:1rem 3rem 1rem 1.2rem; font-family:var(--head); font-weight:700;
  font-size:1.03rem; list-style:none; position:relative;
}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{
  content:"+"; position:absolute; right:1.1rem; top:50%; transform:translateY(-50%);
  font-size:1.5rem; line-height:1; color:var(--orange); font-weight:700;
}
.faq[open] summary::after{content:"–"}
.faq summary:hover{color:var(--orange)}
.faq__a{padding:0 1.2rem 1.1rem}
.faq__a p{color:var(--ink-2); font-size:.96rem; margin-bottom:.6rem}
.faq__a p:last-child{margin-bottom:0}
.faq__a a{color:var(--orange)}
.faq__a strong{color:var(--ink)}

/* ───────────── legal pages ───────────── */
.legal{max-width:70ch; margin-inline:auto}
.legal__meta{font-size:.85rem; color:var(--ink-2); padding-bottom:1.2rem; border-bottom:1px solid var(--line); margin-bottom:.5rem}
.legal h2{font-size:1.3rem; margin:2rem 0 .6rem}
.legal p{margin:.8rem 0; color:var(--ink-2)}
.legal ul,.legal ol{color:var(--ink-2); padding-left:1.3rem}
.legal li{margin:.5rem 0}
.legal strong{color:var(--ink)}
.legal a{color:var(--orange)}
.legal__cta{
  margin-top:2.5rem; padding:1.5rem; text-align:center;
  background:var(--cream-2); border:1px solid var(--line); border-radius:var(--r-lg);
}
.legal__cta p{margin-bottom:.9rem; font-weight:700; color:var(--ink)}

/* ───────────── SEO page additions: category pages, areas, 404 ───────────── */
.sec__lede{max-width:60ch; margin:.8rem auto 0; color:var(--ink-2); text-align:center}
.catnote{max-width:72ch; margin:1.8rem auto 0; color:var(--ink-2); text-align:center; font-size:.98rem}

.catlinks{list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(3,1fr); gap:.7rem}
.catlinks li{display:flex; justify-content:space-between; align-items:center; gap:.8rem;
  background:var(--cream-2); border:1px solid var(--line); border-radius:var(--r); padding:.9rem 1.1rem}
.catlinks a{text-decoration:none; font-family:var(--head); font-weight:700}
.catlinks a:hover{color:var(--orange)}
.catlinks span{font-size:.8rem; color:var(--ink-2); background:var(--orange-l); border-radius:999px; padding:.1rem .6rem}
@media (max-width:760px){ .catlinks{grid-template-columns:1fr 1fr} }
@media (max-width:460px){ .catlinks{grid-template-columns:1fr} }

.pdp__cat a{text-decoration:none}
.pdp__cat a:hover{text-decoration:underline}

.areas{display:grid; grid-template-columns:1.3fr .7fr; gap:2rem; align-items:center;
  background:var(--cream-2); border:1px solid var(--line); border-radius:var(--r-lg); padding:2rem 2.2rem}
.areas__copy p{color:var(--ink-2); margin:.8rem 0 1.3rem; max-width:58ch}
.areas__list{list-style:none; margin:0; padding:0; display:flex; flex-wrap:wrap; gap:.5rem}
.areas__list li{background:var(--orange-l); color:var(--orange-d); border-radius:999px;
  padding:.4rem .9rem; font-weight:700; font-size:.88rem}
@media (max-width:860px){ .areas{grid-template-columns:1fr; padding:1.6rem} }

.notfound{text-align:center; padding:5rem 0}
.notfound h1{max-width:none; margin:.5rem 0 1rem}
.notfound p{color:var(--ink-2); max-width:48ch; margin:0 auto 1.8rem}
.notfound .cta__btns{justify-content:center}

/* ============================================================
   MOBILE REFINEMENT
   Everything below applies only to phones. The goal is fewer
   competing elements per screen and far less vertical scroll.
   ============================================================ */

.announce__item--sm-only{display:none}
.nav__cta{display:none}
.gridmore{display:none}

@media (max-width:759px){

  /* ── rhythm: sections were ~2× too tall for a phone ───────────── */
  .sec{padding:2.4rem 0}
  .sec--tight{padding:1.3rem 0}
  .sec__head{margin-bottom:1.2rem; gap:1rem}
  .why{padding:2.4rem 0}
  .cta{padding:2.6rem 0}
  h2{font-size:1.55rem}
  .sec__lede{font-size:.94rem; margin-top:.5rem}

  /* ── top bar: one line, not three ─────────────────────────────── */
  .announce{font-size:.76rem}
  .announce__in{padding:.42rem 0; gap:.6rem; flex-wrap:nowrap}
  .announce__item--hide-sm{display:none}
  .announce__item--sm-only{display:inline}

  /* ── header: logo + menu only. Search was a duplicate link and
        the WhatsApp pill duplicates the floating button. ────────── */
  .iconbtn--hide-sm,.hdr__wa{display:none}
  .nav .nav__cta{display:grid}
  .hdr__in{padding:.55rem 0}
  .brand img{width:44px}
  .brand__txt strong{font-size:1.25rem}
  .brand__txt small{font-size:.6rem}

  /* ── hero: same message, two-thirds the height ────────────────── */
  .hero{padding-bottom:52px}
  .hero__in{padding:1.8rem 0 .5rem; min-height:0; gap:1rem}
  .hero h1{font-size:1.95rem; line-height:1.14}
  .eyebrow{font-size:.7rem; margin-bottom:.4rem}
  .hero__sub{font-size:.96rem; margin:.7rem auto 1.2rem; max-width:34ch}
  .hero__cta{gap:.5rem}
  .hero__cta .btn{flex:1 1 0; min-width:0; padding:.72rem .6rem; font-size:.92rem}
  .hero__stats{gap:0; margin-top:1.4rem; display:grid; grid-template-columns:repeat(3,1fr)}
  .hero__stats li{align-items:center}
  .hero__stats strong{font-size:1.4rem}
  .hero__stats span{font-size:.64rem; letter-spacing:.04em; text-align:center}
  .hero__art{height:196px; width:100%; margin-top:1.4rem}
  .hero__pet{max-height:100%; filter:drop-shadow(0 10px 18px rgba(0,0,0,.2))}
  .hero__pet--1{width:38%; left:3%;  bottom:4%}
  .hero__pet--2{width:36%; right:3%; bottom:10%}
  .hero__pet--3{width:22%; left:36%; top:2%}
  .hero__pet--4{width:27%; right:16%; bottom:-2%}
  .hero__wave{height:52px}

  .phero{padding:2rem 0 3.4rem}
  .phero h1{font-size:1.8rem}
  .phero__sub{font-size:.96rem}
  .phero .hero__wave{height:46px}

  /* ── categories: one swipeable row instead of three stacked ───── */
  .cats{
    display:flex; gap:.7rem; overflow-x:auto; scroll-snap-type:x mandatory;
    margin-inline:-1rem; padding:.2rem 1rem 1rem; scrollbar-width:none;
    -webkit-overflow-scrolling:touch;
  }
  .cats::-webkit-scrollbar{display:none}
  .cat{flex:0 0 40%; scroll-snap-align:start}
  .cat:hover{transform:none}
  .cat__pic{border-radius:var(--r); margin-bottom:.5rem}
  .cat__name{font-size:.88rem}
  .cat__n{font-size:.72rem}

  /* ── product cards: the text block was taller than the photo ──── */
  .grid{gap:.7rem}
  .card{padding:.5rem .5rem .75rem; border-radius:var(--r)}
  .card:hover{transform:none; box-shadow:none; border-color:var(--line)}
  .card__pic img{transition:none}
  .card:hover .card__pic img{transform:none}
  .card__view{display:none}
  .card__tag{font-size:.6rem; padding:.18rem .45rem; top:.4rem; left:.4rem}
  .card__cat{font-size:.63rem; margin:.5rem 0 .15rem; letter-spacing:.06em}
  .card__name{font-size:.86rem; line-height:1.25; margin-bottom:.3rem}
  .card__price{font-size:.98rem; gap:.25rem}
  .card__price small{font-size:.68rem}
  /* identical on every card — it belongs on the product page, not 27× here */
  .card__meta{display:none}

  .gridmore{display:flex; justify-content:center; margin-top:1.2rem}
  .result{font-size:.82rem; margin-bottom:.7rem}

  /* ── catalogue controls ───────────────────────────────────────── */
  .catsearch input{padding:.62rem .9rem .62rem 2.4rem; font-size:.92rem}
  .filters{gap:.4rem; overflow-x:auto; flex-wrap:nowrap; margin-inline:-1rem;
    padding:.1rem 1rem; scrollbar-width:none}
  .filters::-webkit-scrollbar{display:none}
  .chip{white-space:nowrap; padding:.42rem .85rem; font-size:.84rem}

  /* ── featured + promos ────────────────────────────────────────── */
  .feat{padding:1.2rem; gap:1.2rem}
  .feat__copy p{margin:.6rem 0 1rem; font-size:.94rem}
  .feat__cards{grid-template-columns:1fr 1fr; gap:.7rem}
  .promos{gap:.8rem}
  .promo{min-height:0; padding:1.3rem 1.4rem}
  .promo h3{font-size:1.25rem; margin:.25rem 0 .9rem}
  .promo__img{width:32%; max-width:120px}

  /* ── why: compact cards, icon beside the title ────────────────── */
  .why__grid{gap:.7rem}
  .why__card{padding:1rem 1.1rem; display:grid; grid-template-columns:auto 1fr;
    column-gap:.8rem; align-items:center}
  .why__ico{width:36px; height:36px; border-radius:11px; font-size:1.05rem; margin:0; grid-row:1}
  .why__card h3{font-size:1rem; grid-column:2}
  .why__card p{grid-column:2; font-size:.88rem; margin-top:.2rem}

  /* ── service area ─────────────────────────────────────────────── */
  .areas{padding:1.4rem; gap:1.2rem}
  .areas__copy p{font-size:.94rem; margin:.6rem 0 1rem}
  .areas__list li{font-size:.8rem; padding:.3rem .7rem}

  /* ── enquiry band ─────────────────────────────────────────────── */
  .cta__in{gap:1.5rem}
  .cta__sub{font-size:.95rem; margin:.7rem 0 1.3rem}
  .cta__btns{gap:.5rem}
  .cta__btns .btn{flex:1 1 0; padding:.72rem .6rem; font-size:.92rem}

  /* ── product page ─────────────────────────────────────────────── */
  /* one line: the H1 right below already names the current page */
  .crumbs{font-size:.78rem; padding:.8rem 0 0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
  .crumbs em,.crumbs span:last-of-type{display:none}
  .pdp{padding:1rem 0 2rem; gap:1.2rem}
  .pdp__info h1{font-size:1.45rem}
  .pdp__price{font-size:1.5rem}
  .pdp__thumb{width:56px; height:56px}
  .pdp__spec{grid-template-columns:1fr; padding:1rem 1.1rem; gap:0}
  .pdp__spec dt{padding:.5rem 0 0; font-size:.8rem; text-transform:uppercase;
    letter-spacing:.06em; font-weight:700}
  .pdp__spec dd{padding:0 0 .5rem}

  /* ── content pages ────────────────────────────────────────────── */
  .split,.split--form,.split--faq{gap:1.2rem}
  .prose h2{font-size:1.3rem; margin-top:1.5rem}
  .prose p,.prose li{font-size:.95rem}
  .factcard,.sidebox,.formcard{padding:1.2rem 1.1rem}
  .factcard dl{grid-template-columns:1fr; gap:0}
  .factcard dt{padding:.45rem 0 0; font-size:.78rem; text-transform:uppercase; letter-spacing:.06em}
  .factcard dd{padding:0 0 .45rem}
  .faq summary{font-size:.95rem; padding:.85rem 2.6rem .85rem 1rem}
  .faq__a{padding:0 1rem .9rem}
  .faq__a p{font-size:.92rem}
  .legal h2{font-size:1.15rem; margin-top:1.5rem}
  .legal p,.legal li{font-size:.94rem}
  .faqteaser{padding:1.3rem; gap:1rem}

  /* ── footer: two columns instead of four stacked ──────────────── */
  .foot{padding:2rem 0 3.6rem}
  .foot__in{grid-template-columns:1fr 1fr; gap:1.4rem}
  .foot__brand{grid-column:1 / -1}
  .foot__col:last-child{grid-column:1 / -1; border-top:1px solid var(--line); padding-top:1.1rem}
  .foot__brand p{font-size:.88rem; margin:.6rem 0 .8rem; max-width:none}
  .foot__brand img{width:52px}
  .foot__col h4{font-size:.92rem; margin-bottom:.5rem}
  .foot__col ul{gap:.38rem}
  .foot__col a,.foot__col em{font-size:.86rem}
  .foot__base{margin-top:1.5rem; padding-top:1rem; font-size:.76rem; gap:.5rem}

  /* ── floating button: smaller, out of the way ─────────────────── */
  .fab{width:50px; height:50px; right:.85rem; bottom:.85rem}
  .fab svg{width:26px; height:26px}
}

/* very narrow phones */
@media (max-width:380px){
  .cat{flex:0 0 46%}
  .grid{gap:.55rem}
  .card__name{font-size:.82rem}
  .hero h1{font-size:1.8rem}
}

/* ───────────── price list table ───────────── */
.tablewrap{overflow-x:auto; border:1px solid var(--line); border-radius:var(--r-lg); background:#fff}
.pricetable{width:100%; border-collapse:collapse; font-size:.94rem; min-width:620px}
.pricetable caption{
  caption-side:top; text-align:left; padding:1.1rem 1.3rem; color:var(--ink-2);
  font-size:.88rem; border-bottom:1px solid var(--line); background:var(--cream-2);
  border-radius:var(--r-lg) var(--r-lg) 0 0;
}
.pricetable th,.pricetable td{padding:.7rem 1.1rem; text-align:left; border-bottom:1px solid var(--line)}
.pricetable thead th{
  font-family:var(--head); font-size:.78rem; text-transform:uppercase; letter-spacing:.07em;
  color:var(--ink-2); background:var(--cream-2);
}
.pricetable tbody tr:last-child td{border-bottom:0}
.pricetable tbody tr:hover{background:var(--cream-2)}
.pricetable .num{text-align:right; font-variant-numeric:tabular-nums; white-space:nowrap}
.pricetable td.num{font-weight:700}
.pricetable code{font-size:.84rem; color:var(--ink-2); white-space:nowrap}
.pricetable a{color:var(--ink); font-weight:600}
.pricetable a:hover{color:var(--orange); text-decoration:underline}
.pricenotes{margin-top:2.2rem; max-width:70ch}
.pricenotes + .faqteaser{margin-top:2rem}

/* ───────────── key facts (home) ───────────── */
.facts{
  display:grid; grid-template-columns:repeat(4,1fr); gap:1px; overflow:hidden;
  background:var(--line); border:1px solid var(--line); border-radius:var(--r-lg);
}
.facts div{background:var(--cream); padding:1.1rem 1.2rem}
.facts dt{font-size:.74rem; text-transform:uppercase; letter-spacing:.09em; color:var(--ink-2); font-weight:700}
.facts dd{margin:.25rem 0 0; font-family:var(--head); font-weight:700; font-size:1.02rem; line-height:1.3}
@media (max-width:860px){ .facts{grid-template-columns:repeat(2,1fr)} }

@media (max-width:759px){
  .pricetable{font-size:.86rem; min-width:560px}
  .pricetable th,.pricetable td{padding:.55rem .8rem}
  .pricetable caption{padding:.9rem 1rem; font-size:.82rem}
  .facts div{padding:.85rem .95rem}
  .facts dd{font-size:.94rem}
}
.sec__sub{color:var(--ink-2); font-size:.94rem; margin-top:.5rem; max-width:48ch}