/* Slider banners: 2:2.5 (4:5) ratio; mobile 3, tablet 4, desktop 6. */
/* Chethu Creations | premium promotional banner slider only | beneath homepage category circles | v2.1.16 */
.cchp,.cchp *{box-sizing:border-box}
.cchp{width:calc(100% - 24px);max-width:1600px;margin:10px auto 28px;padding:12px;background:#f3f4f6;border-radius:14px;font-family:Arial,Helvetica,sans-serif;color:#172739}
.cchp-rail{position:relative}
.cchp-track{display:flex;gap:12px;overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x mandatory;scrollbar-width:none;direction:ltr;-webkit-overflow-scrolling:touch}
.cchp-track::-webkit-scrollbar{display:none}
.cchp-card{--tone:#e2d2b5;--accent:#75532e;position:relative;flex:0 0 calc((100% - 24px)/3);min-width:0;aspect-ratio:4/5;overflow:hidden;scroll-snap-align:start;border:1px solid #ffffffa0;border-radius:14px;background:radial-gradient(ellipse at 50% 54%,#fff 0%,#ffffff88 25%,transparent 65%),linear-gradient(145deg,#fffdf7 4%,var(--tone) 100%);box-shadow:0 3px 12px #17273914;isolation:isolate}
.cchp-card:nth-child(3n+2){--tone:#c8dceb;--accent:#254f70}
.cchp-card:nth-child(3n){--tone:#cdded4;--accent:#315e4c}
.cchp-card>a{position:absolute;inset:0;display:block;color:#172739;text-decoration:none;background:none}
.cchp-card>a:before{content:'';position:absolute;z-index:0;inset:35% -22% -18% 20%;border:1px solid #ffffff90;border-radius:50%;transform:rotate(-25deg);pointer-events:none}
.cchp-card>a:after{content:'';position:absolute;z-index:0;left:12%;right:12%;top:77%;height:7%;border-radius:50%;background:radial-gradient(ellipse,#27374620,transparent 70%);pointer-events:none}
.cchp-card img.cchp-product-image{position:absolute;inset:28% 4% auto;width:92%;height:53%;object-fit:contain;object-position:center;background:transparent;border:0;border-radius:0;padding:0;z-index:1;filter:drop-shadow(0 7px 5px #22314518);transform:none}
.cchp-card .cchp-shade{display:none}
.cchp-card .cchp-copy{position:absolute;z-index:2;top:0;left:0;right:0;padding:clamp(10px,1.4vw,20px);text-align:center}
.cchp-card .cchp-copy h2{font-family:inherit;font-size:clamp(18px,2.1vw,30px);line-height:1.12;font-weight:750;letter-spacing:-.4px;color:#172739;margin:0 0 6px;text-wrap:balance;overflow-wrap:break-word}
.cchp-card .cchp-copy p{margin:0 auto;font-size:clamp(11px,1.05vw,15px);line-height:1.3;max-width:30ch;color:#354354}
.cchp-card .cchp-tag{z-index:2;position:absolute;left:50%;bottom:3%;transform:translateX(-50%);max-width:94%;white-space:nowrap;padding:7px 10px;box-shadow:0 3px 7px #0001;background:var(--accent);border:1px solid #ffffff60;color:#fff;border-radius:6px;letter-spacing:.4px;font-size:11px;font-weight:700;line-height:1.2;text-align:center}
.cchp a:focus-visible,.cchp-track:focus-visible{outline:3px solid #007185;outline-offset:-3px}
@media(max-width:1100px){.cchp-card .cchp-copy{padding:10px}.cchp-card .cchp-copy h2{font-size:20px}.cchp-card .cchp-copy p{font-size:12px}.cchp-card .cchp-tag{font-size:9px;padding:5px}}
@media(max-width:767px){.cchp{width:100%;padding:8px;border-radius:8px;margin:6px 0 18px}.cchp-track{gap:6px}.cchp-card{flex-basis:calc((100% - 12px)/3);border-radius:9px}.cchp-card img.cchp-product-image{inset:31% 3% auto;width:94%;height:49%;filter:drop-shadow(0 3px 3px #22314518)}.cchp-card .cchp-copy{padding:7px 5px}.cchp-card .cchp-copy h2{font-size:clamp(12px,3.1vw,21px);line-height:1.12;letter-spacing:-.2px;margin:0}.cchp-card .cchp-copy p{display:none}.cchp-card .cchp-tag{bottom:3%;max-width:94%;padding:3px 4px;font-size:clamp(8px,1.7vw,11px);letter-spacing:0}}
@media(prefers-reduced-motion:reduce){.cchp-track{scroll-behavior:auto}}

/* Responsive visible-banner counts: phone 3, tablet 4, desktop 6.
   Scroll snapping, carousel position and automatic advance are unchanged. */
@media (min-width:768px) and (max-width:1199px) {
  .cchp-track { gap:10px; }
  .cchp-card { flex:0 0 calc((100% - 30px) / 4); }
  .cchp-card .cchp-copy { padding:10px 7px; }
  .cchp-card .cchp-copy h2 { font-size:clamp(14px,1.65vw,20px); line-height:1.13; letter-spacing:-.15px; }
  .cchp-card .cchp-copy p { font-size:clamp(10px,1.06vw,12px); }
  .cchp-card .cchp-tag { padding:5px 7px; font-size:clamp(9px,0.9vw,11px); letter-spacing:0; }
}
@media (min-width:1200px) {
  .cchp-card { flex:0 0 calc((100% - 60px) / 6); }
  .cchp-card .cchp-copy { padding:clamp(10px,1vw,15px) 7px; }
  .cchp-card .cchp-copy h2 { font-size:clamp(16px,1.35vw,22px); line-height:1.14; letter-spacing:-.2px; }
  .cchp-card .cchp-copy p { font-size:clamp(10px,.83vw,12px); line-height:1.25; }
  .cchp-card .cchp-tag { padding:6px 7px; font-size:clamp(9px,.74vw,11px); letter-spacing:0; }
}