/* =====================================================================
   RICH4PET Brand Identity Lock V1.1 — final visual polish (loaded after brand.css)
   ===================================================================== */
:root{--ease-calm:cubic-bezier(.22,.61,.36,1)}

/* ---------- hero: designed around cut-out products (no white card) ---------- */
.hero-art{width:min(100%,600px);aspect-ratio:1/1.02;justify-self:end;position:relative}
.hero-art::before,.hero-art::after{content:none}
.hk{position:absolute;display:block;z-index:0}
.hk-paper{inset-block:5% 2%;inset-inline:0 4%;background:linear-gradient(180deg,#E9E1D0,#DDD3BF)}
.hk-frame{inset-block:13% -1%;inset-inline:9% -3%;border:2px solid var(--black)}
.hk-kraft{inset-block:18% 6%;inset-inline:14% 2%;background:var(--kraft);background-image:var(--kraft-tex);box-shadow:0 30px 50px -30px rgba(20,18,16,.55)}
.hk-kraft::before{content:"";position:absolute;inset-block:0;inset-inline-start:0;width:9px;background:var(--red)}
.hk-kraft::after{content:"";position:absolute;inset-inline-end:0;inset-block-end:0;width:42%;height:36px;background:var(--black);border-top:5px solid var(--red)}
.hero-art .hwave{inset-inline:-14%;inset-block-end:14%;width:128%;height:20%;z-index:1;pointer-events:none}
.hero-art .hwave path{stroke-width:2.2}
.hpanel{position:absolute;inset:0;z-index:2;background:none;border:0;box-shadow:none;overflow:visible}
.hpanel img{position:absolute;height:auto;mix-blend-mode:normal;filter:drop-shadow(0 24px 18px rgba(20,18,16,.34)) drop-shadow(0 4px 5px rgba(20,18,16,.25));transition:transform 1.4s var(--ease-calm)}
.hp-bag{width:120%;inset-inline-start:-10%;top:-13%;z-index:2}
.hp-tubs{width:52%;inset-inline-start:-3%;top:56%;z-index:3}
.hp-can{width:58%;inset-inline-start:47.5%;top:40%;z-index:3}
.hero-art .art-note{inset-block:0 auto;inset-inline:auto 0;max-width:42%;background:none;color:var(--graphite);padding:0;font-size:.62rem;line-height:1.35;text-align:end;z-index:5}
@media (max-width:900px){.hero-art .art-note{max-width:48%;font-size:.58rem}}
/* entrance: layers settle one after another, calmly */
.mo .hero-art .hk{opacity:0;transform:translateY(18px);transition:opacity 1.1s var(--ease-calm),transform 1.3s var(--ease-calm)}
.mo .hero-art.in .hk{opacity:1;transform:none}
.mo .hero-art.in .hk-paper{transition-delay:.05s}.mo .hero-art.in .hk-frame{transition-delay:.18s}.mo .hero-art.in .hk-kraft{transition-delay:.3s}
.mo .hpanel img{transform:translateY(22px);opacity:0;transition:transform 1.4s var(--ease-calm),opacity 1s var(--ease-calm)}
.mo .hero-art.in .hpanel img{transform:none;opacity:1}
.mo .hero-art.in .hp-bag{transition-delay:.45s}.mo .hero-art.in .hp-tubs{transition-delay:.65s}.mo .hero-art.in .hp-can{transition-delay:.8s}
.mo .hero-art.in .hwave path{animation:wavein 2.4s var(--ease-calm) .5s forwards}
.mo .hero-art.in .hwave path+path{animation-delay:.8s}
.hero-art:hover .hp-can{transform:translateX(-5px)}.hero-art:hover .hp-tubs{transform:translateX(5px)}
[dir=rtl] .hero-art:hover .hp-can{transform:translateX(5px)}[dir=rtl] .hero-art:hover .hp-tubs{transform:translateX(-5px)}
@media (max-width:900px){.hero-art{width:min(80%,340px)}}

/* ---------- Arabic hero: its own composition ---------- */
:lang(ar){--t-hero:clamp(2rem,.8rem + 3vw,3.9rem)}
:lang(ar) .hero h1{font-weight:540;color:#1B1917;text-wrap:balance;word-spacing:.04em}
:lang(ar) .hero h1 .ln:not(:last-child){line-height:1.3}
:lang(ar) .hero h1 .ln:last-child{font-size:clamp(1.05rem,.85rem + .9vw,1.55rem);font-weight:500;line-height:1.55;max-width:26ch;color:var(--graphite)}
:lang(ar) .hero .lead{max-width:40ch}
:lang(ar) .eyebrow{font-weight:600}

/* ---------- footer: light kraft, logo sits directly on the surface ---------- */
.ftr{background:var(--kraft-pale);color:var(--black);position:relative;padding:clamp(72px,7vw,108px) 0 0}
.ftr::before{content:"";position:absolute;inset:0 0 auto 0;height:26px;background:var(--wave) repeat-x center;opacity:.6}
.ftr::after{content:"";position:absolute;inset:0;background:var(--kraft-tex);opacity:.35;mix-blend-mode:multiply;pointer-events:none}
.ftr>*{position:relative;z-index:1}
.logoplate{background:none;padding:0;line-height:0}
.logoplate img{height:56px;width:auto;mix-blend-mode:multiply}
.ftr .fh{color:var(--red)}
.ftr .small{color:var(--graphite)}
.ftr a{color:var(--black)}
.ftr a:hover{color:var(--red)}
.ftr :focus-visible{outline-color:var(--red)}
.ftr-bot{background:var(--black);color:var(--kraft-light);margin-top:clamp(40px,5vw,64px);padding:16px 0;border:0;border-top:4px solid var(--red)}
.ftr-bot-in{display:flex;flex-wrap:wrap;justify-content:space-between;gap:10px;font-size:.82rem}

/* ---------- catalog: sectioned trade-catalog layout ---------- */
.catbody{display:block;outline:none}
.cs{margin-bottom:clamp(44px,6vw,84px)}
.csh{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:6px 22px;align-items:end;padding:38px 0 16px;position:relative;background:var(--wave) repeat-x top}
.csh::after{content:"";position:absolute;inset-inline:0;bottom:0;height:3px;background:var(--black)}
.csh .no{font:800 clamp(2.4rem,1.6rem + 2.6vw,4rem)/1 var(--f-disp);color:var(--red);letter-spacing:-.04em}
.csh h2{font-size:clamp(1.6rem,1.1rem + 1.8vw,2.7rem)}
.csh .story{color:var(--graphite);margin-top:6px;max-width:60ch}
.csh .cnt{font-size:.8rem;color:var(--mute);white-space:nowrap}
.csh .cnt b{color:var(--black)}
.cgrid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));grid-auto-flow:dense;gap:clamp(14px,1.6vw,24px);padding-top:22px}
.pc{transition:transform .7s var(--ease-calm),box-shadow .7s var(--ease-calm),border-color .4s}
.pc:hover{transform:translateY(-3px);border-color:var(--black);box-shadow:0 20px 30px -24px rgba(20,18,16,.45)}
.pc .ph img.real{transition:transform 1.4s var(--ease-calm)}
.pc:hover .ph img.real{transform:scale(1.025)}
.pc.feat,.pc.wide{grid-column:span 2;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
.pc.feat{grid-template-columns:minmax(0,1.15fr) minmax(0,1fr)}
.pc.feat .ph,.pc.wide .ph{aspect-ratio:auto;min-height:100%;border-bottom:0;border-inline-end:1px solid #E1DACC}
.pc.feat .ph img.real,.pc.wide .ph img.real{position:absolute;inset:0;height:100%}
.pc.feat .bd,.pc.wide .bd{align-content:center;padding:clamp(16px,2vw,28px)}
.pc.feat h3{font-size:clamp(1.25rem,1rem + 1vw,1.85rem);line-height:1.15}
.pc.feat{border-top:4px solid var(--red)}
.ftag{position:absolute;inset-block-start:0;inset-inline-start:0;background:var(--red);color:#fff;font:600 .66rem var(--f-mono);letter-spacing:.14em;text-transform:uppercase;padding:5px 12px;z-index:2}
:lang(ar) .ftag{font-family:var(--f-body);letter-spacing:0;font-size:.8rem}
.pc.feat .tag,.pc.wide .tag{inset-block-start:auto;inset-block-end:10px}
.band{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));margin:4px 0 0;border:1px solid var(--black)}
.band div{padding:5px 8px;border-inline-start:1px solid var(--black);min-width:0}
.band div:first-child{border-inline-start:0}
.band dt{font:500 .58rem var(--f-mono);letter-spacing:.1em;text-transform:uppercase;color:var(--red)}
:lang(ar) .band dt{font-family:var(--f-body);text-transform:none;font-size:.72rem;letter-spacing:0}
.band dd{margin:0;font:600 .78rem var(--f-body);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pc .btn.just{animation:confirm 1s var(--ease-calm)}
@keyframes confirm{0%{box-shadow:0 0 0 0 rgba(30,107,58,.45)}100%{box-shadow:0 0 0 14px rgba(30,107,58,0)}}
@media (max-width:1100px) and (min-width:961px){.cgrid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:960px){
  .cgrid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .csh{grid-template-columns:auto minmax(0,1fr)}.csh .cnt{grid-column:1/-1}
}
@media (max-width:600px){
  .pc.feat,.pc.wide{grid-template-columns:1fr}
  .pc.feat .ph,.pc.wide .ph{aspect-ratio:1/1;border-inline-end:0;border-bottom:1px solid #E1DACC}
  .pc.feat .ph img.real,.pc.wide .ph img.real{position:static;height:100%}
  .cgrid{gap:12px}
}

/* ---------- calmer motion everywhere ---------- */
.mo [data-reveal]{transform:translateY(14px);transition:opacity 1s var(--ease-calm),transform 1s var(--ease-calm);transition-delay:var(--d,0s)}
.mo .hero [data-reveal]{transition:transform .8s var(--ease-calm);transition-delay:calc(var(--d,0s) * .6)}
.mo .hero #heroArt[data-reveal]{transition:opacity .6s var(--ease-calm),transform .6s var(--ease-calm)}
.tile{transition:transform .8s var(--ease-calm)}.tile:hover{transform:translateY(-4px)}
.tile .art{transition:transform 1s var(--ease-calm)}.tile:hover .art{transform:translateY(-8px)}
.rail button{transition:border-color .4s,background .4s,transform .6s var(--ease-calm)}
.qpill.bump{animation:bumpcalm .6s var(--ease-calm)}
@keyframes bumpcalm{40%{transform:scale(1.05)}}
.tray{transition:transform .7s var(--ease-calm)}
.hdr{transition:transform .6s var(--ease-calm)}
@media (prefers-reduced-motion:reduce){
  .mo .hero-art .hk,.mo .hpanel img,.mo .hero-art.in .hk,.mo .hero-art.in .hpanel img{opacity:1;transform:none}
  .pc:hover,.pc:hover .ph img.real,.tile:hover,.tile:hover .art,.rail button:hover{transform:none}
  .pc .btn.just{animation:none}
}

/* ---------- V1.1 fixes from visual review ---------- */
.hero-art .hwave{inset-block:23% auto;inset-inline:6% -3%;width:auto;height:17%}
.pc .meta{white-space:normal;line-height:1.5}
.pc.feat .meta,.pc.wide .meta{max-width:100%}