/* V1.1 polish, part 2: catalog feature row, fillers, sub-headings, footer blend fix */
.pc .bd,.pc .ph{min-width:0}
.cfeat{padding-top:22px}
.pc.feat{grid-column:1/-1;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);border-top:4px solid var(--red)}
.pc.feat .ph{min-height:clamp(320px,34vw,470px);aspect-ratio:auto}
.pc.feat .ph img.real{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;padding:4%}
.pc.feat .bd{padding:clamp(20px,3vw,44px);align-content:center;gap:12px}
.pc.feat h3{font-size:clamp(1.4rem,1.05rem + 1.4vw,2.3rem)}
.pc.feat .band{margin-top:8px}
.pc.feat .acts{max-width:420px}
.pc.fill{grid-column:span var(--span,1);background:var(--kraft);background-image:var(--kraft-tex);border:0;border-inline-start:6px solid var(--red);padding:clamp(18px,2.4vw,32px);display:grid;align-content:center;gap:12px;color:var(--black)}
.pc.fill:hover{transform:none;box-shadow:none}
.pc.fill .fk{font-size:.7rem;letter-spacing:.14em;color:var(--black);opacity:.8}
:lang(ar) .pc.fill .fk{font-family:var(--f-body);letter-spacing:0;font-size:.85rem}
.pc.fill b{font:800 clamp(1.4rem,1rem + 1.4vw,2.2rem)/1.1 var(--f-disp);letter-spacing:-.02em}
:lang(ar) .pc.fill b{font-weight:600;line-height:1.4}
.pc.fill p{max-width:34ch}
.pc.fill .btn{justify-self:start}
.subh{display:flex;align-items:baseline;gap:10px;margin:34px 0 0;font:700 1.15rem var(--f-disp);padding-bottom:8px;border-bottom:1px solid var(--line)}
.subh .mono{font-size:.72rem;color:var(--mute);font-weight:400}
.subh+.cgrid{padding-top:16px}
@media (max-width:960px){
  .pc.fill{grid-column:1/-1}
  .pc.feat{grid-template-columns:1fr}
  .pc.feat .ph{min-height:0;aspect-ratio:4/3}
}
/* footer: no stacking context so the logo's multiply blend reaches the kraft background */
.ftr>*{z-index:auto}
.ftr::after{z-index:0}
/* compact spec rows for products without an owner image */
.crows{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px 16px;padding-top:16px}
.pc.row{display:grid;grid-template-columns:72px minmax(0,1fr) auto;gap:14px;align-items:center;padding:12px 14px;border-inline-start:4px solid var(--kraft)}
.pc.row:hover{transform:none;border-color:var(--black);border-inline-start-color:var(--red)}
.pc.row .ph{width:72px;aspect-ratio:1;border:0;display:grid;place-items:center;background:var(--kraft-pale)}
.pc.row .ph .pk{width:56%}
.pc.row .bd{padding:0;gap:4px;display:grid;align-content:center}
.pc.row h3{font-size:.98rem;line-height:1.25}
.pc.row .rk{font-size:.62rem;letter-spacing:.08em;text-transform:uppercase;color:var(--red)}
:lang(ar) .pc.row .rk{font-family:var(--f-body);text-transform:none;letter-spacing:0;font-size:.78rem}
.pc.row .sku{border:0;padding:0}
.pc.row .acts{display:grid;gap:4px;margin:0;padding:0;justify-items:stretch}
.pc.row .acts .btn{flex:none}
@media (max-width:1100px){.crows{grid-template-columns:1fr}}
@media (max-width:520px){.pc.row{grid-template-columns:60px minmax(0,1fr)}.pc.row .ph{width:60px}.pc.row .acts{grid-column:1/-1;grid-template-columns:1fr auto;align-items:center}}
:lang(ar) .pc h3{line-height:1.3}
:lang(ar) .pc.feat h3{line-height:1.2}
@media (max-width:900px){.hero-art{justify-self:center;width:min(78%,460px)}}
/* the base rule :lang(ar){line-height:1.85} matches every descendant, so links inside headings need to inherit the heading's leading */
:lang(ar) .pc h3 a,:lang(ar) .pd h1,:lang(ar) .csh .story{line-height:inherit}
:lang(ar) .pc h3 a{line-height:inherit}
:lang(ar) .pd h1.ltr{line-height:1.15}