/* CLEARANCE STYLES */
@import url("https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;700;900&display=swap");
:root{
  --blue: #4792BC; /* hsl(204,47%,55%) */
  --green:#92CA6A;
  --purple:#A194C7;
  --orange:#EDA04E;
  --text:#555555;
  --heading:#4792BC;
  --bg:#FFFFFF;
  --soft:#F8F4F2;
  --border:#D4D4D4;
  --wave:#59AFB2;
  --footer:#EFF9FD;
}
* {box-sizing:border-box}
html,body{margin:0;padding:0;background:var(--bg);color:var(--text);font-family:Roboto,system-ui,-apple-system,"Segoe UI",Helvetica,Arial,sans-serif;font-size:18px;}
img{display:block}
a{text-decoration:none;color:inherit}

.container{width:100%;max-width:1200px;margin:0 auto;padding:0 20px}
.section{padding:80px 0 0;width:100%}
.h1{color:var(--heading);font-weight:900;line-height:1.2;margin:20px 0}
.h2{color:var(--text);font-weight:900;line-height:1.3;font-size:30px;text-align:left;margin:0}
.h3{color:var(--text);font-weight:700}
.center{text-align:center}
.center > img{margin-left:auto;margin-right:auto}
.why .container>img{margin-left:auto;margin-right:auto}
.muted{color:#757575}
.round{border-radius:20px}
.shadow{box-shadow:5px 5px 10px 0 #D4D4D4}
.badge{display:inline-flex;align-items:center;justify-content:center;padding:5px 10px;color:#fff;font-weight:700;font-size:22px;line-height:1}
.badge.blue{background:var(--blue)}
.badge.green{background:var(--green)}
.badge.used{background:var(--green)}
.price{color:var(--heading);font-weight:900}
.line-through{text-decoration-line: line-through;text-decoration-thickness:1px;text-decoration-color: black;}
.grid{display:grid;gap:20px;align-items:stretch}
.grid-3{grid-template-columns:repeat(3,minmax(0,1fr))}
.grid-4{grid-template-columns:repeat(4,minmax(0,1fr))}

@media (max-width:1024px){
	.grid-4{grid-template-columns:repeat(2,1fr)}.grid-3{grid-template-columns:repeat(2,1fr)}
}

@media (max-width:640px){
	.grid-4,.grid-3{grid-template-columns:1fr}
}

/* Navbar */
.nav{background:#FBFBFB;box-shadow:0 4px 4px rgba(0,0,0,.25)}
.nav-inner{display:flex;align-items:center;gap:50px}
.nav-links{display:flex;align-items:center;gap:32px;margin-left:auto}
.nav-underline{height:2px;background:var(--blue);width:86px}

/* Hero */
.hero{width:100%;height:423px;background-image:url('/images/page/woman_holding_packages__hero__clearance.jpg');background-position:center;background-repeat:no-repeat;background-size:cover;display:flex;align-items:center}
.hero h1{max-width:610px;font-size:50px;font-weight:900;color:var(--heading);line-height:60px;margin:0}
.hero p{max-width:583px;font-size:30px;font-weight:700;line-height:40px;margin:10px 0 0}

/* Why Shop */
.why .cards{display:grid;gap:20px}
/*.why .cards-2{grid-template-columns:repeat(2,1fr)}*/
.why .cards-2{grid-template-columns: repeat(2, minmax(300px, 1fr));}
.why .cards-3{grid-template-columns:repeat(2,1fr)}
.card{background:var(--soft);padding:20px;border:1px solid var(--border);border-radius:20px}
.card-row{display:flex;gap:20px;align-items:center}
.card h3{color:var(--heading);font-size:25px;margin:0}
.card p{font-size:22px;line-height:35px;margin:20px 0 0}
.why .card {background: var(--soft);padding: 20px;border: 1px solid var(--border);border-radius: 20px;min-width: 300px;width: 100%;}
/* Ensure Why Shop cards are left-aligned */
.why .card,.why .card h3,.why .card p{text-align:left}
.why .card h3 {color: var(--heading);font-size: 25px;margin: 0;}
.why .card p {font-size: 22px;line-height: 35px;margin: 20px 0 0;}
.why .card-row {display: flex;gap: 20px;align-items: center;}
/* Ensure icons/graphics inside cards align left (override global centering) */
.why .card-row img{margin:0}
/* Responsive with min-width preservation */
@media (max-width: 1000px) {.why .cards-3 {grid-template-columns: repeat(2, minmax(250px, 1fr));}}
@media (max-width: 640px) {.why .cards-2,.why .cards-3 {grid-template-columns: 1fr;  /* Stack to single column */}.why .card {min-width: 100%;  /* Full width on mobile */ max-width: 400px; /* Prevent overly wide cards */ }}

/* Category icons */
.cat-grid{display:grid;grid-template-columns:repeat(3,245px);justify-content:center;gap:20px;}
@media(max-width:1100px){.cat-grid{grid-template-columns:repeat(2,245px);gap:20px 40px;justify-content:center}}
@media(max-width:560px){.cat-grid{grid-template-columns:1fr}}
.cat{position:relative;height:193px;width:245px;margin:0 auto}
.cat-pill{position:absolute;left:0;top:84px;width:245px;height:109px;border-radius:20px;border:1px solid var(--border);display:flex;align-items:flex-end;justify-content:center;padding:10px}
.cat-pill.green{background:var(--green)}
.cat-pill.blue{background:var(--blue)}
.cat-pill.purple{background:var(--purple)}
.cat-pill.orange{background:var(--orange)}
.cat-name{height:74px;/*display:flex;align-items:center;justify-content:center;*/color:#fff;font-size:25px;font-weight:900;text-align:center}
.cat-avatar{position:absolute;left:73px;top:13px;width:100px;height:100px;border-radius:50%;background:#fff;border:6px solid #000;display:flex;align-items:center;justify-content:center;box-sizing:border-box;overflow:hidden}
.cat-avatar img{width:100%;height:100%;border-radius:50%;object-fit:cover;display:block}
.cat-avatar.green{border-color:var(--green)}
.cat-avatar.blue{border-color:var(--blue)}
.cat-avatar.purple{border-color:var(--purple)}
.cat-avatar.orange{border-color:var(--orange)}
/* enforce 6px thickness for all four */
.cat-avatar{border-width:6px}

/* Product Card */
.pcard{border:1px solid var(--border);border-radius:20px;background:#fff;display:flex;flex-direction:column;height:100%}
.pimg{height:263px;background-size:cover;background-position:center;border-top-left-radius:20px;border-top-right-radius:20px;position:relative}
.pbadges{position:absolute;left:0;bottom:0;top:auto;display:flex;gap:8px}
.pbody{background:var(--soft);padding:20px;border-bottom-left-radius:20px;border-bottom-right-radius:20px;display:flex;flex-direction:column;gap:10px;flex:1;align-items: flex-start !important;}
.pbody h4{font-size:25px;margin:0;font-weight:700;text-align:left}
.pmeta{font-size:20px;line-height:35px;text-align:left}