@charset "UTF-8";
/* Pets Pash home page body. The section CSS below is taken unchanged from the supplied index.html (Desktop, 2026-10-08);
   the integration block at the end adapts it to the OpenCart theme. Loaded only on the home page and scoped to .pp.
   The top bar, header and footer are NOT here: the home page uses the same shared ones as every other page (ps18-v2.css). */
.pp{--g:#145530;--gd:#0f3d26;--o:#e8871e;--ink:#1f4530;--mut:#6d7a70;font-family:'Poppins',sans-serif;color:var(--ink);background:#fff;width:100%;overflow:hidden}
.pp *{box-sizing:border-box}
.pp img{display:block;max-width:100%}
.pp a{color:inherit;text-decoration:none}
.pp ul{list-style:none;margin:0;padding:0}
.pp h1,.pp h2,.pp h3,.pp h4,.pp p{margin:0}
.pp .i{width:1em;height:1em;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;flex:none}
.pp .i.f{fill:currentColor;stroke:none}
.pp .paw{color:var(--o)}
/* hero + category strip */
.pp .hero img{width:100%;height:auto}
.pp .cats{display:grid;grid-template-columns:341fr 322fr 285fr 317fr 335fr;gap:12px;padding:14px 15px 2px}
.pp .cats a{display:block;border-radius:14px;overflow:hidden;box-shadow:0 6px 16px rgba(0,0,0,.1);transition:transform .2s}
.pp .cats a:hover{transform:translateY(-4px)}
.pp .cats img{width:100%;height:auto}
/* feature strip */
.pp .feat{margin:12px 15px;border:1px solid #ecdfc5;border-radius:14px;background:#fdfbf5;display:grid;grid-template-columns:repeat(5,1fr);padding:24px 0}
.pp .fi{text-align:center;padding:0 22px;border-left:1px solid #eadcc0}
.pp .fi:first-child{border-left:0}
.pp .fi img{width:84px;margin:0 auto 14px;mix-blend-mode:multiply}
.pp .fi b{display:block;font-size:13px;font-weight:700;text-transform:uppercase;letter-spacing:.2px}
.pp .fi p{font-size:12px;color:var(--mut);margin-top:8px;line-height:1.5}
/* need it today */
.pp .need{margin:12px 15px;border-radius:14px;background:linear-gradient(100deg,#fcf1e1,#fbf5ea 62%,#fbf0e2);height:395px;position:relative;overflow:hidden;display:flex;align-items:center}
.pp .need .l{flex:0 0 52.6%;display:flex;align-items:center;gap:20px;padding:0 50px 0 55px;height:56%;border-right:1px solid #e6d8bd}
.pp .need .ph{width:70px;height:70px;border-radius:50%;background:#f4e9d6;border:1px solid #e3d3b3;display:flex;align-items:center;justify-content:center;font-size:24px;flex:none;margin-left:-0px}
.pp .need h2{font-size:36px;font-weight:800;letter-spacing:.3px;line-height:1.1}
.pp .need h3{font-size:19px;font-weight:700;margin-top:8px}
.pp .need .rule{width:150px;border-bottom:1px solid #e2b772;margin:14px 0;position:relative}
.pp .need .rule:after{content:'';position:absolute;left:50%;top:-3px;width:6px;height:6px;border-radius:50%;background:var(--o);transform:translateX(-50%)}
.pp .need p{font-size:15px;line-height:1.55}
.pp .need .r{padding-left:46px}
.pp .need .r small{display:block;font-size:12px;font-weight:700;letter-spacing:1px;margin-bottom:16px}
.pp .call{display:flex;align-items:center;gap:14px;margin-bottom:18px}
.pp .call i{width:38px;height:38px;border-radius:50%;background:#e5ecdc;color:var(--g);display:flex;align-items:center;justify-content:center;font-size:17px;font-style:normal}
.pp .call span{display:block;font-size:10.5px;font-weight:600;color:var(--mut);letter-spacing:.4px}
.pp .call b{font-size:21px;font-weight:700}
.pp .need .dog{position:absolute;right:16px;bottom:0;width:360px;mix-blend-mode:multiply}
.pp .need .leaf{position:absolute;left:12px;bottom:0;width:120px;mix-blend-mode:multiply}
/* titles */
.pp .ttl{text-align:center}
.pp .ttl h2{font-size:27px;font-weight:800;letter-spacing:.4px;text-transform:uppercase;display:inline-flex;align-items:center;gap:14px}
.pp .sprig{width:60px;height:24px;stroke:#5d8a3f;fill:none;stroke-width:1.6;stroke-linecap:round}
.pp .ttl .sub{display:flex;align-items:center;justify-content:center;gap:12px;color:var(--o);font-weight:700;font-size:15px;letter-spacing:2px;margin-top:6px}
.pp .ttl .sub:before,.pp .ttl .sub:after{content:'';width:46px;border-top:1px solid #eab565}
.pp .ttl p{font-size:15px;color:#4d5f52;margin-top:8px}
.pp .orn{display:flex;align-items:center;justify-content:center;gap:8px;margin-bottom:10px;font-size:22px}
.pp .orn:before,.pp .orn:after{content:'';width:42px;border-top:2px solid #eab565}
/* top brands carousel. The artwork (title, leaves, paws, waves) and the seven logo cards are cut from the supplied
   banner (tb-*.jpg). Art = three slices (top with the title, a plain band, bottom); the band holds the sliding cards.
   Everything scales with the section width, so at full width it is the banner pixel for pixel. Card box = 207.5 x 176,
   gap 18, side padding 22 (of 1600). */
.pp .tb{--n:7;--g:1.125%;--p:.75%;margin:12px 15px;border-radius:16px;overflow:hidden;position:relative;background:#fdf1e0}
.pp .tb-top{aspect-ratio:1600/186;background:url(../image/petspash/tb-top.jpg) center/100% 100% no-repeat}
.pp .tb-bot{aspect-ratio:1600/106;background:url(../image/petspash/tb-bot.jpg) center/100% 100% no-repeat}
.pp .tb-mid{position:relative;background:url(../image/petspash/tb-mid.jpg) center/100% 100% no-repeat}
.pp .tb-view{overflow:hidden;touch-action:pan-y;margin:0 .625%;padding:.625% 0 1.3125%} /* the room above / below the cards (10px / 21px of 1600) keeps their shadow and hover lift unclipped */
.pp .tb-track{display:flex;gap:var(--g);padding:0 var(--p);transition:transform .6s cubic-bezier(.4,0,.2,1);will-change:transform}
.pp .tb-card{flex:0 0 calc((100% - (var(--n) - 1) * var(--g)) / var(--n));aspect-ratio:207.5/176;display:flex;align-items:center;justify-content:center;border-radius:10.1%/11.9%;background:#fff8ee;box-shadow:0 5px 18px rgba(170,100,30,.13);transition:transform .2s,box-shadow .2s}
.pp .tb-card img{width:94.4%;height:auto}
.pp .tb-card:hover,.pp .tb-card:focus-visible{transform:translateY(-4px);box-shadow:0 10px 24px rgba(170,100,30,.2)}
.pp .tb-card:focus-visible{outline:2px solid var(--o);outline-offset:2px}
.pp .tb-arr{position:absolute;top:50%;transform:translateY(-50%);z-index:3;width:36px;height:36px;border-radius:50%;background:#fff;border:1px solid #ecdcc0;color:var(--ink);display:flex;align-items:center;justify-content:center;cursor:pointer;font-size:16px;padding:0;box-shadow:0 3px 10px rgba(120,80,20,.18);opacity:0;transition:opacity .2s}
.pp .tb-arr.p{left:8px}.pp .tb-arr.n{right:8px}
.pp .tb:hover .tb-arr,.pp .tb-arr:focus-visible{opacity:1}
@media (hover:none){.pp .tb-arr{display:none}}
@media (prefers-reduced-motion:reduce){.pp .tb-track,.pp .tb-card{transition:none}}
@media (max-width:1099px){.pp .tb{--n:5}}
@media (max-width:759px){
.pp .tb{--n:3;--g:10px;--p:8px}
.pp .tb-top{aspect-ratio:auto;height:76px;background-size:auto 100%}
.pp .tb-bot{aspect-ratio:auto;height:40px;background-size:auto 100%;background-position:center bottom}
.pp .tb-view{margin:0;padding:6px 0 12px}
}
@media (max-width:479px){.pp .tb{--n:2}}
/* reviews */
.pp .rev{margin:12px 15px;border-radius:14px;background:linear-gradient(#fcefe2,#fdf2e6);padding:44px 30px 34px;position:relative;overflow:hidden}
.pp .rev .rd{position:absolute;left:8px;top:2px;width:100px;mix-blend-mode:multiply}
.pp .rgrid{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;max-width:1340px;margin:30px auto 0}
.pp .rc{background:#fdfaf3;border:1px solid #f0e3d0;border-radius:14px;padding:20px 22px;height:218px;position:relative}
.pp .rc .h{display:flex;align-items:center;gap:12px}
.pp .rc .av{width:40px;height:40px;border-radius:50%;background:var(--gd);color:#fff;font-weight:700;display:flex;align-items:center;justify-content:center;font-size:15px}
.pp .rc b{display:block;font-size:14px;font-weight:700}
.pp .rc .st{color:#f0a21a;font-size:11px;letter-spacing:1px;line-height:1.2}
.pp .rc .gg{font-size:10px;color:#6d6d6d;display:block}
.pp .rc .gg em{font-style:normal;font-weight:700;color:#4285f4;margin-right:3px}
.pp .rc .q{font-size:34px;line-height:1;color:#f1c98e;font-family:Georgia,serif;margin:18px 0 -6px}
.pp .rc p{font-size:14px;line-height:1.55;color:#33493a;max-width:230px}
.pp .rc .dc{position:absolute;right:16px;bottom:14px;font-size:38px;color:#e2d4bb}
.pp .rc .dc .i{stroke-width:1.3}
/* stores */
.pp .stores{margin:12px 15px;border-radius:14px;background:#eef3ea;padding:38px 20px 42px}
.pp .sgrid{display:grid;grid-template-columns:1fr 1fr;gap:24px;max-width:1210px;margin:28px auto 0}
.pp .sc{background:#fff;border-radius:16px;padding:22px;box-shadow:0 4px 18px rgba(40,70,40,.08)}
.pp .sc .h{display:flex;align-items:center;gap:12px;margin-bottom:16px}
.pp .sc .h i{width:38px;height:38px;border-radius:50%;border:1.5px solid #bcd1bb;color:var(--g);display:flex;align-items:center;justify-content:center;font-size:18px;font-style:normal}
.pp .sc h3{font-size:17px;font-weight:700}
.pp .sc .h span{font-size:12.5px;font-weight:700;color:#1b7a45;display:block}
.pp .sim{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-bottom:16px}
.pp .sim img{width:100%;height:auto;border-radius:8px}
.pp .sl{display:flex;gap:8px;font-size:13.5px;line-height:1.5;margin-top:9px;color:#33493a}
.pp .sl .i{margin-top:4px;color:var(--g)}
.pp .btns{display:flex;gap:10px;margin-top:20px;flex-wrap:wrap}
.pp .btn{display:inline-flex;align-items:center;gap:6px;border-radius:8px;border:1.5px solid var(--g);padding:10px 16px;font-size:13px;font-weight:700;color:var(--g);background:#fff}
.pp .btn.s{background:var(--g);color:#fff}
/* soft edges on cropped photos */
.pp .need .dog,.pp .need .leaf,.pp .rev .rd,.pp .fi img{mask-composite:intersect;-webkit-mask-composite:source-in}
.pp .need .dog{-webkit-mask-image:linear-gradient(to right,transparent,#000 12%,#000 88%,transparent),linear-gradient(to bottom,transparent,#000 8%);mask-image:linear-gradient(to right,transparent,#000 12%,#000 88%,transparent),linear-gradient(to bottom,transparent,#000 8%)}
.pp .need .leaf{-webkit-mask-image:linear-gradient(to right,#000 55%,transparent),linear-gradient(to bottom,transparent,#000 40%);mask-image:linear-gradient(to right,#000 55%,transparent),linear-gradient(to bottom,transparent,#000 40%)}
.pp .rev .rd{-webkit-mask-image:linear-gradient(to right,#000 55%,transparent),linear-gradient(to bottom,#000 55%,transparent);mask-image:linear-gradient(to right,#000 55%,transparent),linear-gradient(to bottom,#000 55%,transparent)}
.pp .fi img{-webkit-mask-image:radial-gradient(circle closest-side,#000 88%,transparent 100%);mask-image:radial-gradient(circle closest-side,#000 88%,transparent 100%)}
@media (max-width:900px){
.pp .need .dog,.pp .rev .rd{display:none}
.pp .cats{grid-template-columns:repeat(2,1fr)}
.pp .feat{grid-template-columns:1fr 1fr;row-gap:20px}
.pp .need{height:auto;padding:30px 0;flex-direction:column;align-items:flex-start}
.pp .need .l{flex:none;height:auto;border:0;padding:0 24px}
.pp .need .r{padding:24px}
.pp .rgrid,.pp .sgrid{grid-template-columns:1fr}
.pp .ttl h2{font-size:20px}
}
.pp .sprite{position:absolute}.pp .flip{transform:scaleX(-1)}

/* ═══════════════════════════════════════════════════════════════
   INTEGRATION with the OpenCart theme (everything above is the design file, unchanged)
═══════════════════════════════════════════════════════════════ */
/* ps18-custom.css gives every h1-h6 the Oswald font; keep the design's Poppins */
/* the theme's body is 13px / line-height 1.8; the design was built against browser defaults */
.pp{font-size:16px;line-height:normal}
.pp h1,.pp h2,.pp h3,.pp h4,.pp h5,.pp h6{font-family:inherit;line-height:normal}
.pp button{font-family:inherit}
.pp .btn{line-height:normal}
.pp .btn:hover{opacity:.9}

/* ═══════════════════════════════════════════════════════════════
   HTML / CSS rebuild of the home page sections (hero, category tiles, feature strip, top brands).
   Only photographs are pictures (catalog/view/image/petspash/home/*.jpg); every word, icon, button and
   background below is live markup.
═══════════════════════════════════════════════════════════════ */
.pp{--gr:#0f4a3a;--or:#f26a1e;--script:'Courgette','Kalam','Segoe Script',cursive;--cond:'Oswald','Arial Narrow',sans-serif}

/* ---- hero ---- */
.pp .hh{position:relative;overflow:hidden;min-height:clamp(300px,23.8vw,458px);display:flex;justify-content:center;align-items:center;background:linear-gradient(90deg,#faeede 0%,#fbefe1 50%,#fcf0e0 100%)}
.pp .hh-l,.pp .hh-r{position:absolute;bottom:0;height:100%;width:auto;max-width:none}
.pp .hh-l{left:0;-webkit-mask-image:linear-gradient(90deg,#000 80%,transparent 100%);mask-image:linear-gradient(90deg,#000 80%,transparent 100%)}
.pp .hh-r{right:0;-webkit-mask-image:linear-gradient(270deg,#000 85%,transparent 100%);mask-image:linear-gradient(270deg,#000 85%,transparent 100%)}
.pp .hh-script{position:absolute;z-index:2;left:22.5%;top:7%;margin:0;font-family:var(--script);font-size:clamp(18px,2.1vw,40px);line-height:1.15;color:#1b2a24;transform:rotate(-6deg)}
.pp .hh-script i{color:var(--or);font-size:.9em;vertical-align:-2px}
.pp .hh-c{position:relative;z-index:2;text-align:center;padding:0 12px;display:flex;flex-direction:column;align-items:center}
.pp .hh-paw{display:flex;align-items:center;gap:18px;color:var(--or);font-size:clamp(30px,3.6vw,64px);line-height:1}
.pp .hh-paw::before,.pp .hh-paw::after{content:"";width:clamp(18px,2.2vw,40px);height:2px;background:var(--or)}
.pp .hh-name{margin:2px 0 0;font-family:var(--cond)!important;font-weight:700;font-size:clamp(46px,6.4vw,124px);line-height:1;letter-spacing:2px;color:var(--gr);text-transform:uppercase}
.pp .hh-tag{display:flex;align-items:center;gap:14px;margin:clamp(6px,.8vw,14px) 0 0;font-weight:600;font-size:clamp(14px,1.6vw,30px);letter-spacing:2px;color:var(--gr)}
.pp .hh-tag i{width:clamp(24px,3vw,56px);height:2px;background:var(--or);position:relative}
.pp .hh-tag i::before{content:"";position:absolute;top:-3px;width:8px;height:8px;border-radius:50%;background:var(--or)}
.pp .hh-tag i:first-child::before{right:0}.pp .hh-tag i:last-child::before{left:0}
.pp .hh-since{display:flex;align-items:center;gap:12px;margin:clamp(2px,.4vw,8px) 0 0;font-weight:600;font-size:clamp(12px,1.3vw,24px);letter-spacing:2px;color:var(--or)}
.pp .hh-since::before,.pp .hh-since::after{content:"";width:clamp(22px,2.4vw,46px);height:2px;background:var(--or)}
.pp .hh-cats{display:flex;gap:clamp(10px,1.6vw,30px);margin-top:clamp(10px,1.4vw,26px)}
.pp .hh-cats a{display:flex;flex-direction:column;align-items:center;gap:6px;font-size:clamp(10px,.82vw,15px);font-weight:600;letter-spacing:.4px;color:var(--gr);text-decoration:none}
.pp .hh-cats a span{width:clamp(40px,3.6vw,70px);aspect-ratio:1;border-radius:50%;background:#fffaf1;border:1px solid #f0d9bd;display:grid;place-items:center;font-size:clamp(17px,1.6vw,30px);color:var(--gr);box-shadow:0 3px 10px rgba(150,100,40,.12);transition:transform .2s,background .2s,color .2s}
.pp .hh-cats a:hover span{transform:translateY(-3px);background:var(--gr);color:#fff}

/* ---- category tiles ---- */
.pp .ct-row{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:12px;padding:14px 15px 2px}
.pp .ct{--top:#fdf0db;--bot:#eeb16e;--ink:#5a2a12;--btn:#6b3a1d;position:relative;display:flex;flex-direction:column;align-items:center;aspect-ratio:341/563;border-radius:14px;overflow:hidden;text-decoration:none;text-align:center;background:linear-gradient(180deg,var(--top) 0%,var(--top) 28%,var(--bot) 100%);box-shadow:0 6px 16px rgba(0,0,0,.1);transition:transform .2s,box-shadow .2s}
.pp .ct:hover{transform:translateY(-4px);box-shadow:0 12px 24px rgba(0,0,0,.15)}
.pp .ct-brand{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;column-gap:8px;margin-top:4.5%;color:var(--ink);line-height:1.1;position:relative;z-index:2}
.pp .ct-brand i{font-size:clamp(20px,2.4vw,44px);color:var(--btn)}
.pp .ct-brand b{font-family:var(--cond);font-weight:700;font-size:clamp(13px,1.2vw,22px);letter-spacing:.5px}
.pp .ct-brand small{flex-basis:100%;font-size:clamp(7px,.62vw,11px);letter-spacing:.8px;font-weight:600;text-align:center}
.pp .ct-for{font-family:var(--script);font-size:clamp(17px,1.9vw,34px);color:var(--ink);margin-top:3.5%;line-height:1.1;position:relative;z-index:2}
.pp .ct-name{font-family:var(--cond);font-weight:700;font-size:clamp(30px,3.4vw,62px);line-height:1;letter-spacing:1px;color:var(--ink);position:relative;z-index:2;padding:0 6px}
.pp .ct-ph{flex:1 1 auto;width:100%;min-height:0;margin-top:-1%;display:block;position:relative;overflow:hidden;-webkit-mask-image:linear-gradient(180deg,transparent 0,#000 14%);mask-image:linear-gradient(180deg,transparent 0,#000 14%)}
.pp .ct-ph img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center bottom}
.pp .ct-btn{position:absolute;left:50%;bottom:3.4%;transform:translateX(-50%);z-index:3;display:inline-flex;align-items:center;gap:8px;padding:clamp(7px,.8vw,13px) clamp(22px,2.6vw,46px);border-radius:999px;background:var(--btn);color:#fff;font-weight:600;font-size:clamp(11px,1.05vw,19px);white-space:nowrap;box-shadow:0 4px 10px rgba(0,0,0,.25);transition:filter .2s}
.pp .ct:hover .ct-btn{filter:brightness(1.12)}
.pp .ct-dogs{--top:#fdf0db;--bot:#eeb16e;--ink:#5a2a12;--btn:#6b3a1d}
.pp .ct-cats{--top:#fcdde3;--bot:#fdb5c7;--ink:#c4185f;--btn:#c3205f}
.pp .ct-birds{--top:#f1f8d8;--bot:#dba570;--ink:#123d24;--btn:#14502f}
.pp .ct-fishes{--top:#c5f5fd;--bot:#7dc7f7;--ink:#12344d;--btn:#134a6b}
.pp .ct-other{--top:#fbeac0;--bot:#dc9d60;--ink:#8a4a14;--btn:#a8531a}

/* ---- feature strip ---- */
.pp .feat .fi{text-align:center;padding:4px 10px}
.pp .fi-ic{width:clamp(56px,5vw,84px);aspect-ratio:1;border-radius:50%;display:inline-grid;place-items:center;font-size:clamp(22px,2.1vw,36px);margin-bottom:12px;background:#f3ead6;color:#1f5a3f}
.pp .fi-ic.c2{background:#fdebd0;color:#e8901a}
.pp .fi-ic.c3{background:#e2efe3;color:#1f6b3a}
.pp .fi-ic.c4{background:#fbe9d2;color:#d9741a}
.pp .fi-ic.c5{background:#dfece6;color:#1f5a4a}

/* ---- top brands ---- */
.pp .tb{background:linear-gradient(180deg,#fdf1e0,#fbe7cc)}
.pp .tb-top{position:relative;aspect-ratio:auto;background:none;padding:clamp(18px,2.4vw,40px) 12px 6px;text-align:center;overflow:hidden}
.pp .tb-title{margin:0;font-family:var(--cond)!important;font-weight:700;font-size:clamp(28px,3.6vw,64px);letter-spacing:1px;line-height:1.1}
.pp .tb-title span{color:var(--gr)}.pp .tb-title em{font-style:normal;color:var(--or)}
.pp .tb-sub{margin:4px 0 0;color:var(--or);font-size:18px}
.pp .tb-leaf{position:absolute;top:8%;font-size:clamp(46px,6vw,110px);color:#7aa24c;opacity:.85}
.pp .tb-leaf.l{left:-1%;transform:rotate(-30deg)}.pp .tb-leaf.r{right:-1%;transform:rotate(30deg) scaleX(-1)}
.pp .tb-paw{position:absolute;color:#f0cfa6;font-size:clamp(20px,2.4vw,42px);opacity:.8}
.pp .tb-mid{background:none}
.pp .tb-bot{aspect-ratio:auto;height:clamp(40px,5vw,90px);background:radial-gradient(120% 140% at 50% 130%,#cfe3b4 0 38%,transparent 39%),radial-gradient(90% 120% at 12% 130%,#f7d9b0 0 40%,transparent 41%),radial-gradient(90% 120% at 90% 130%,#f7d9b0 0 40%,transparent 41%)}
.pp .tb-card{background:#fff8ee}
.pp .tb-card img{width:84%;height:auto;max-height:78%;object-fit:contain;mix-blend-mode:multiply}

@media (max-width:900px){
  .pp .hh{flex-direction:column;padding-top:18px}
  .pp .hh-l,.pp .hh-r{position:relative;height:auto;width:50%}
  .pp .hh-script{display:none}
  .pp .hh-c{order:-1;margin-bottom:10px}
  .pp .ct-row{grid-template-columns:repeat(2,minmax(0,1fr))}
  .pp .ct:last-child{grid-column:1 / -1;aspect-ratio:auto;min-height:420px}
  .pp .hh-l{align-self:flex-start}.pp .hh-r{align-self:flex-end;margin-top:-40%}
}

/* Social follow cards (between "Need it today" and "Top brands"): artwork cut from the supplied design, links laid over it */
.pp .soc{margin:12px 15px;display:grid;grid-template-columns:324fr 305fr 301fr 304fr 315fr;gap:10px}
.pp .sf{position:relative;border-radius:14px;overflow:hidden;box-shadow:0 6px 16px rgba(0,0,0,.1);transition:transform .2s}
.pp .sf:hover{transform:translateY(-4px)}
.pp .sf img{width:100%;height:auto;display:block}
.pp .sf .hit{position:absolute;inset:0}
.pp .sf-pt .hit.l{right:auto;width:50%}
.pp .sf-pt .hit.r{left:auto;width:50%}
@media (max-width:1100px){.pp .soc{grid-template-columns:repeat(3,1fr)}}
@media (max-width:700px){.pp .soc{grid-template-columns:repeat(2,1fr)}}
@media (max-width:440px){.pp .soc{grid-template-columns:1fr}}