/* RICH4PET — Brand Identity Lock V1
   Source of truth: the real RICH logo (red R, serif RICH, black wave lines) and the real packaging
   (deep red, black/charcoal, warm kraft, soft off-white). Loaded after site.css; it overrides tokens and re-skins components.
   Logo rule: the logo file is used as supplied (trimmed margins only), never recoloured, filtered, stretched or placed on dark or photo backgrounds. */
:root{
  /* --- brand colour tokens (sampled from logo and packaging, rounded) --- */
  --red:#9D0212;          /* Brand Red: the R in the logo */
  --red-deep:#6F0A12;     /* Deep Red / Burgundy: hover, pressed, dark red surfaces */
  --red-tint:#F6E6E7;     /* selected / error-soft background */
  --black:#141210;        /* packaging black label blocks */
  --charcoal:#222222;     /* logo lettering */
  --graphite:#4A4642;     /* secondary text on light */
  --kraft:#B49872;        /* kraft paper on the packs */
  --kraft-light:#D8C8AD;
  --kraft-pale:#EBE2D1;
  --paper:#F5F1E8;        /* Warm Paper: page */
  --neutral:#EFECE6;      /* Soft Neutral: panels */
  --white:#FFFFFF;
  --gold:#B8923A;         /* restrained accent: highlights only, never text on light */
  --ok:#1E6B3A; --ok-tint:#E4F1E8;
  --warn:#7A4E00; --warn-tint:#FFF6DD;
  --err:#B42318; --err-tint:#FDECEA;
  /* --- legacy names used by site.css, remapped to the brand --- */
  --paper-2:#EBE6DB; --paper-3:#E0D8C8; --ink:var(--black); --ink-2:#3A3633; --mute:#625C55;
  --maroon:var(--red); --maroon-2:#B3121F; --night:var(--black); --night-2:#1E1B18;
  --gold-hi:var(--kraft-light); --line:rgba(20,18,16,.18); --line-night:rgba(216,200,173,.3);
  --wave:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='140' height='26' viewBox='0 0 140 26'><path d='M0 8 C23 0 47 0 70 8 S117 16 140 8' fill='none' stroke='%23141210' stroke-width='1.6'/><path d='M0 18 C23 10 47 10 70 18 S117 26 140 18' fill='none' stroke='%23141210' stroke-width='1.6'/></svg>");
  --kraft-tex:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 .32  0 0 0 0 .22  0 0 0 0 .1  0 0 0 .13 0'/></filter><rect width='180' height='180' filter='url(%23n)'/></svg>");
}
body{background:var(--paper)}
.logo img,.ftr img{filter:none}

/* ---------- prototype bar, header, footer ---------- */
.proto{background:var(--black);color:var(--kraft-light);border-bottom:2px solid var(--red)}
.hdr{background:#fff;color:var(--black);border-bottom:1px solid var(--line)}
.hdr .logo img{height:50px;width:auto}
.hdr.compact .logo img{height:42px}
.nav a{color:var(--charcoal)}
.nav a::after{background:var(--red)}
.lang{border-color:var(--line)}
.lang button{color:var(--charcoal)}
.lang button[aria-pressed=true]{background:var(--black);color:#fff}
.qpill{background:var(--red);color:#fff}
.qpill b{background:#fff;color:var(--red)}
.menu-btn{border-color:var(--line);color:var(--black)}
@media (max-width:960px){.nav{background:#fff;border-bottom:1px solid var(--line)}.nav a{border-bottom-color:var(--line)}}
.hdr :focus-visible{outline-color:var(--red)}
.ftr{background:var(--black);color:#E9E3D6}
.ftr .fh{color:var(--kraft)}
.ftr .small,.ftr-bot{color:#B8B0A2}
.ftr a:hover{color:var(--kraft-light)}
.logoplate{display:inline-block;background:#fff;padding:10px 14px;border-radius:2px;line-height:0}
.logoplate img{height:44px;width:auto}
.ftr-bot{border-top-color:rgba(216,200,173,.25)}

/* ---------- buttons ---------- */
.btn{--b-bg:var(--red);--b-fg:#fff;border-radius:0}
.btn:hover{background:var(--black);border-color:var(--black);color:#fff}
.btn.dark{--b-bg:var(--black);--b-fg:#fff}
.btn.dark:hover{background:var(--red);border-color:var(--red)}
.btn.line{--b-bg:transparent;--b-fg:var(--black);border-color:var(--black)}
.btn.line:hover{background:var(--black);color:#fff}
.btn.ghost{--b-bg:transparent;--b-fg:#fff;border-color:rgba(255,255,255,.7)}
.btn.ghost:hover{background:#fff;color:var(--black);border-color:#fff}
.pc .btn.dark{--b-bg:var(--red);border-color:var(--red)}
.pc .btn.dark:hover{background:var(--black);border-color:var(--black)}
.pc .btn.line[data-add]{--b-fg:var(--ok);border-color:var(--ok);background:var(--ok-tint)}
.pc .btn.line[data-add]:hover{background:var(--ok);color:#fff}
:focus-visible{outline-color:var(--red)}
.night :focus-visible,.ftr :focus-visible,.phead :focus-visible,.tray :focus-visible,.sticky-q :focus-visible,.proto :focus-visible,.hero-bottom :focus-visible{outline-color:var(--kraft-light)}

/* ---------- hero: product-led ---------- */
.hero{background:var(--paper);color:var(--black);align-items:start}
.hero::before{content:none}
.hero::after{background:var(--kraft-tex);opacity:.55;mix-blend-mode:multiply}
.eyebrow{color:var(--red)}
.eyebrow::before{background:var(--red)}
.hero h1{color:var(--black);font-weight:800;letter-spacing:-.025em}
.hero h1 .ln:last-child{color:var(--graphite);font-family:var(--f-body);font-weight:500;font-size:clamp(1.1rem,.9rem + 1vw,1.7rem);letter-spacing:0;line-height:1.35;max-width:24ch;white-space:normal;margin-top:.7em;padding-top:.7em;position:relative}
.hero h1 .ln:last-child::before{content:"";position:absolute;inset-block-start:0;inset-inline-start:0;width:64px;height:4px;background:var(--red)}
.hero .lead{color:var(--ink-2)}
@media (min-width:901px){.hero h1{width:auto;max-width:100%}.hero h1 .ln:not(:last-child){white-space:nowrap}}
.hero-grid{grid-template-columns:minmax(0,6fr) minmax(0,6fr);align-items:center}
.hero-art{width:min(100%,600px);aspect-ratio:1/1.02;justify-self:end}
.hero-art::before{content:"";position:absolute;inset:7% -7% 1% 12%;background:var(--kraft);background-image:var(--kraft-tex);z-index:0}
.hero-art::after{content:"";position:absolute;inset-inline-start:-3%;bottom:3%;width:96px;height:18px;background:var(--black);border-top:5px solid var(--red);z-index:4}
.hero-art .hwave{position:absolute;inset-inline:-12%;bottom:-5%;width:124%;height:22%;z-index:0;overflow:visible}
.hero-art .hwave path{fill:none;stroke:var(--black);stroke-width:2.4;stroke-linecap:round;stroke-dasharray:1;stroke-dashoffset:0;vector-effect:non-scaling-stroke}
.hpanel{position:absolute;inset:0 0 7% 0;z-index:1;background:linear-gradient(180deg,#FDFCFA,#EFECE6 86%,#E6E1D6);border:1px solid rgba(20,18,16,.14);overflow:hidden;box-shadow:0 36px 60px -34px rgba(20,18,16,.55)}
.hpanel img{position:absolute;height:auto;aspect-ratio:auto;mix-blend-mode:multiply;transition:transform 1s var(--ease)}
/* positions computed from each packshot's measured product bounding box so no product overlaps another (multiply blending would muddy overlaps) */
.hp-bag{width:107%;inset-inline-start:-25%;top:-7.5%;z-index:2}
.hp-tubs{width:44.4%;inset-inline-start:55.2%;top:.4%;z-index:1}
.hp-can{width:67.3%;inset-inline-start:42.7%;top:29.7%;z-index:2}
.mo .hpanel img{transform:translateY(26px)}
.mo .hero-art.in .hpanel img{transform:none}
.mo .hero-art.in .hp-tubs{transition-delay:.05s}.mo .hero-art.in .hp-can{transition-delay:.18s}.mo .hero-art.in .hp-bag{transition-delay:.3s}
.hero-art:hover .hp-can{transform:translateX(-8px) rotate(-1.5deg)}
.hero-art:hover .hp-tubs{transform:translateX(8px) rotate(1deg)}
[dir=rtl] .hero-art:hover .hp-can{transform:translateX(8px) rotate(1.5deg)}
[dir=rtl] .hero-art:hover .hp-tubs{transform:translateX(-8px) rotate(-1deg)}
.hero-art .art-note{position:absolute;z-index:5;inset-block:10px auto;inset-inline:12px auto;width:auto;text-align:start;background:rgba(255,255,255,.88);color:var(--graphite);padding:2px 7px;font-size:.64rem}
@keyframes wavein{from{stroke-dashoffset:1}to{stroke-dashoffset:0}}
.mo .hero-art .hwave path{stroke-dashoffset:1}
.mo .hero-art.in .hwave path{animation:wavein 1.8s var(--ease) .2s forwards}
.mo .hero-art.in .hwave path+path{animation-delay:.45s}
.hero-bottom .ledger-row{background:var(--black);border-top:none;color:#fff}
.ledger-row a{border-inline-end-color:rgba(216,200,173,.25);color:#fff}
.ledger-row a:hover{background:var(--red)}
.ledger-row .n{color:var(--kraft-light)}
.hero-bottom{inset-inline:0}
.hero-bottom .ledger-row.wrap{width:100%;max-width:none;margin:0;padding-inline:max(var(--gut),calc((100% - var(--maxw))/2))}
:lang(ar) .hero h1 .ln{white-space:normal}
:lang(ar){--t-hero:clamp(2.2rem,1rem + 3.7vw,4.6rem)}
:lang(ar) .hero h1 .ln:last-child{font-family:var(--f-body);font-weight:500}
@media (max-width:900px){
  .hero{padding-top:calc(60px + var(--proto))}
  .hero-grid{grid-template-columns:1fr;padding-bottom:196px;gap:26px}
  .hero-art{order:-1;width:min(76%,330px);justify-self:center;margin-bottom:34px}
  .hero-art::after{width:64px;height:14px}
  .hero h1 .ln:last-child{max-width:none}
}

/* ---------- sections ---------- */
.kick{color:var(--red)}
.sec.night .kick,.night .kick{color:var(--kraft)}
.kick .idx{border-color:var(--red)}
.night .kick .idx{border-color:var(--kraft)}
.sec.alt{background:var(--kraft-pale)}
.sec.alt::before,#story::before,.passport::before{content:"";position:absolute;inset:0 0 auto 0;height:26px;background:var(--wave) repeat-x center;opacity:.55;pointer-events:none}
#story,.sec.alt,.passport{position:relative}
.facts{border-top-color:var(--black)}
.fact .s::before{background:var(--red)}
.fact.pend .v{border-color:var(--warn);color:var(--warn);background:var(--warn-tint)}
.fact.pend .s::before{border-color:var(--warn)}
.fact.pend .s{color:var(--warn)}
.tile:nth-child(1){background:var(--red);color:#fff}
.tile:nth-child(2){background:var(--kraft);background-image:var(--kraft-tex);color:var(--black)}
.tile:nth-child(3){background:var(--black);color:#fff}
.tile:nth-child(4){background:#E7E1D4;color:var(--black)}
.tile .art{background:linear-gradient(180deg,#FDFCFA,#E9E5DC)}
.tile{border-radius:0}
.pp-step.on{border-top-color:var(--red)}
.route-fg{stroke:var(--red)}
.node.on circle{fill:var(--red);stroke:var(--red)}
.node.on text{fill:var(--red)}
.pp-stamp rect{stroke:var(--red)}.pp-stamp text{fill:var(--red)}
.pp-doc{background:#FDFCFA}
.pp-note{border-inline-start-color:var(--red)}
.sec.night{background:var(--black)}
.oem .stage{background:radial-gradient(70% 60% at 50% 45%,#2C2825,var(--black));border-color:rgba(216,200,173,.25)}
.oem p.lead,.need{color:#E9E3D6}
.need li{border-bottom-color:rgba(216,200,173,.25)}
.need li::before,.ctl .lbl{color:var(--kraft)}
.chip{border-color:var(--kraft);color:var(--kraft-light)}
.seg{border-color:rgba(216,200,173,.35)}
.seg button[aria-pressed=true]{background:var(--kraft);color:var(--black)}
.sw button[aria-pressed=true]{border-color:var(--kraft-light);box-shadow:0 0 0 3px var(--black),0 0 0 5px var(--kraft-light)}
.card{border-radius:0}
.phead{background:var(--black);border-bottom:4px solid var(--red)}
.phead::after{background:var(--kraft-tex);opacity:.4;mix-blend-mode:screen}
.phead .eyebrow{color:var(--kraft-light)}.phead .eyebrow::before{background:var(--kraft-light)}
.phead p{color:#E9E3D6}

/* ---------- catalog: trade-catalog language ---------- */
.dsn{background:var(--warn-tint);border:1px dashed var(--gold);color:#4F3500;border-radius:0}
.filters{border-radius:0;border-color:#D5CDBF}
.fgrp input[type=checkbox]{accent-color:var(--red)}
.rail button{border-radius:0;border-color:#D5CDBF}
.rail button[aria-pressed=true]{border-color:var(--red);background:var(--red-tint)}
.rail .th{background:linear-gradient(180deg,#FDFCFA,#E9E5DC)}
.pc{background:#fff;border:1px solid #D5CDBF;border-radius:0;box-shadow:none}
.pc:hover{box-shadow:0 22px 34px -26px rgba(20,18,16,.5)}
.pc .ph{background:#F4F1EB;border-bottom:1px solid #E1DACC}
.pc .tag{background:var(--black);color:#fff;border-radius:0}
.pc .tag.concept{background:transparent;color:var(--mute);border:1px dashed var(--mute)}
.pc .more{background:var(--black);color:#fff;border-radius:0}
.pc .meta{display:inline-block;width:max-content;max-width:100%;background:var(--black);color:#fff;padding:3px 9px;border-inline-start:4px solid var(--red);font-size:.66rem;letter-spacing:.08em}
:lang(ar) .pc .meta{font-size:.8rem;letter-spacing:0}
.pc h3 a{color:var(--black)}
.pc .sku{display:flex;gap:8px;align-items:baseline;border-top:1px solid var(--line);padding-top:8px;font-size:.74rem;color:var(--graphite)}
.pc .sku::before{content:"SKU";color:var(--red);font-weight:500;letter-spacing:.08em;direction:ltr}
.tray{background:var(--black);border-top:3px solid var(--red)}
.cmp input,.opts input{accent-color:var(--red)}
.opts label:has(input:checked){border-color:var(--red);background:var(--red-tint)}

/* ---------- product detail: spec-table language ---------- */
.pd-media{background:#F4F1EB;border-color:#D5CDBF;border-radius:0}
.pd-media .arch-bg{background:linear-gradient(180deg,#FFFFFF,#E9E4DA)}
.spec{border-top:3px solid var(--black)}
.spec .r:nth-child(odd){background:rgba(180,152,114,.14)}
.spec .r{padding-inline:12px}
.spec .k{color:var(--red)}
table.t th{background:var(--black);color:#fff}
table.t tbody tr:nth-child(even) td{background:rgba(180,152,114,.12)}
.pend-box{border-color:var(--gold);background:var(--warn-tint);border-radius:0}
.pend-box h2{color:var(--warn)}
.pend-box ul{color:#4F3500}
.thumbs button{border-radius:0;background:#F4F1EB}
.thumbs button[aria-current=true]{border-color:var(--red)}
.crumbs a:hover{color:var(--red)}
.sticky-q{background:var(--black);border-top:3px solid var(--red)}

/* ---------- forms ---------- */
.notice{border-color:var(--gold);background:var(--warn-tint);color:#4F3500;border-radius:0}
.steps li.on{border-color:var(--red)}
.steps li.done{border-color:var(--black)}
.field .err{color:var(--err)}
.field input[aria-invalid=true],.field select[aria-invalid=true]{border-color:var(--err)}
.field input:focus,.field select:focus,.field textarea:focus{outline-color:var(--red);border-color:var(--red)}
.preview{background:var(--black)}
.qline .rm:hover{background:var(--red-tint)}

@media (prefers-reduced-motion:reduce){
  .mo .hero-art .hwave path{animation:none;stroke-dashoffset:0}
  .mo .hpanel img,.mo .hero-art.in .hpanel img{transform:none}
  .hero-art:hover .hp-can,.hero-art:hover .hp-tubs{transform:none}
}
.pc .sku::before{margin-inline-end:.8em}
:lang(ar) .hero h1 .ln:not(:last-child){line-height:1.22}
:lang(ar) .hero h1 .ln:last-child{line-height:1.5}