/* DESERTROSE ATHLETICS — Styles (Polished Light Rose Theme) */

/* --- Core Theme Tokens --- */
:root{
  /* Base palette */
  --bg:#edafb8;        /* light rose page background */
  --fg:#1b1b1f;        /* primary text */
  --muted:#5b4d52;     /* secondary text */
  --brand:#e15b64;     /* brand accent */
  --brand-2:#ffd3dc;   /* soft highlight */
  --card:#fff6f7;      /* cards/surfaces */
  --stroke:#e8c8ce;    /* borders */
  --max:1200px;

  /* Themed surfaces (no blacks) */
  --rose-700:#c97986;  /* header/footer surface */
  --rose-750:#cf838f;  /* hover/active on header */
  --rose-800:#b86573;  /* cart drawer surface */
  --rose-850:#a85766;  /* deeper rose accents */
  --rose-tint:#ffeef1; /* light image placeholder */
}

/* --- Base / Reset --- */
*{box-sizing:border-box}
html,body{
  margin:0;padding:0;
  background:var(--bg);color:var(--fg);
  font:16px/1.5 system-ui,Segoe UI,Roboto,Helvetica,Arial,sans-serif;
  -webkit-font-smoothing:antialiased;
}
.container{max-width:var(--max);margin:0 auto;padding:0 20px}
h1,h2,h3{line-height:1.1;margin:0 0 .5rem;color:#0f0f12}
h1{font-size:clamp(2rem,4vw,3.5rem);letter-spacing:-0.02em}
h2{font-size:clamp(1.4rem,3vw,2.2rem);}
p{margin:.5rem 0 1rem;color:var(--muted)}

/* --- Buttons --- */
.btn{display:inline-block;padding:.8rem 1.1rem;border-radius:999px;border:1px solid transparent;cursor:pointer;text-decoration:none;font-weight:600;transition:.2s}
.btn.brand{background:var(--brand);color:#fff}
.btn.brand:hover{filter:brightness(1.06)}
.btn.ghost{background:transparent;border-color:var(--stroke);color:var(--fg)}
.btn.ghost:hover{background:#f3d3d9}

/* --- Icon Buttons (ensure visible over rose header) --- */
.icon-btn{
  background:transparent;border:1px solid var(--stroke);
  border-radius:12px;padding:.5rem;display:inline-grid;place-items:center;
  cursor:pointer;position:relative;color:inherit;
}
.icon-btn svg,.icon-btn svg path{ fill: currentColor; }
.cart-count{position:absolute;transform:translate(8px,-8px);background:var(--brand);color:#fff;border-radius:999px;padding:0 .35rem;font-size:.7rem;line-height:1.2;}

/* --- Header / Nav (darker rose, white text) --- */
.site-header{
  position:sticky;top:0;z-index:50;
  background: var(--rose-700);
  border-bottom:1px solid var(--stroke);
  color:#fff;
}
.nav{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:64px}
.logo{color:#fff;font-weight:900;letter-spacing:.08em;text-decoration:none}
.logo span{color:#fff}
.nav-links{display:flex;gap:18px}
.nav-links a{color:#fff;opacity:.95;text-decoration:none;padding:.6rem .5rem;border-radius:8px}
.nav-links a:hover{background:var(--rose-750);opacity:1}

.nav-right{display:flex;align-items:center;gap:10px;position:relative;color:#fff}
.hamburger{display:none;cursor:pointer;padding:6px 8px;border-radius:10px;border:1px solid rgba(255,255,255,.35);background:transparent}
.hamburger span{display:block;width:22px;height:2px;background:#fff;margin:5px 0;transition:.2s}

/* Mobile nav */
.nav-toggle{display:none}
@media (max-width:860px){
  .nav{gap:6px}
  .nav-links{position:absolute;left:0;right:0;top:64px;background:var(--rose-700);border-bottom:1px solid var(--stroke);display:none;flex-direction:column;padding:10px 16px}
  .nav-links a{padding:.9rem;border:1px solid transparent}
  .nav-links a:hover{border-color:rgba(255,255,255,.25);background:var(--rose-750)}
  .nav-toggle:checked ~ .nav-links{display:flex}
  .hamburger{display:inline-block;order:2}
  /* Order: cart before hamburger on mobile */
  .icon-cart{order:1;color:#fff}
  .nav-right{order:3;margin-left:auto}
  .brand{order:1}
  .nav-toggle{order:2}
}
@media (min-width:861px){ .nav-right{margin-left:auto} } /* Desktop: cart is right-most */

/* --- Hero (rose-tinted overlay, no black) --- */
.hero{position:relative;min-height:50vh;display:grid;place-items:center;overflow:hidden;border-bottom:1px solid var(--stroke)}
.hero::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(180deg, rgba(200,101,115,0.25), rgba(185,101,115,0.55));
}
.collage{position:absolute;inset:0;display:grid;grid-template-columns:repeat(6,1fr);grid-auto-rows:16vw;gap:6px;padding:6px;opacity:.95}
.collage img{width:100%;height:100%;object-fit:cover;border-radius:10px;filter:saturate(104%) contrast(103%) brightness(0.98)}
@media (max-width:860px){ .collage{grid-template-columns:repeat(3,1fr);grid-auto-rows:28vw} }
.hero-content{position:relative;text-align:center;z-index:1;color:#fff}
.hero h1{color:#fff}
.hero h1 span{color:#fff}
.hero .sub{max-width:780px;margin:10px auto 20px;color:#fff;opacity:.98}

/* --- Shop --- */
.shop{padding:clamp(40px,5vw,80px) 20px}
.product-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
@media (max-width:1100px){.product-grid{grid-template-columns:repeat(3,1fr)}}
@media (max-width:860px){.product-grid{grid-template-columns:repeat(2,1fr)}}
@media (max-width:520px){.product-grid{grid-template-columns:1fr}}

.card{background:var(--card);border:1px solid var(--stroke);border-radius:16px;overflow:hidden;display:flex;flex-direction:column}
.card figure{ aspect-ratio:4/4;background:var(--rose-tint);overflow:hidden; }
.card img{width:100%;height:auto;object-fit:cover;display:block;}
.card .info{padding:14px}
.card h3{font-size:1rem;margin:0 0 6px;color:#111114}
.price{font-weight:700;color:#111114}
.badge{display:inline-block;font-size:.75rem;padding:.25rem .5rem;border-radius:8px;border:1px solid var(--stroke);color:#5b4d52;background:#fff}

.card .actions{margin-top:auto;display:flex;gap:8px;align-items:center;justify-content:space-between;padding:14px}
.out{color:#8a6b73}
.card .add{width:100%}

/* --- Reviews (light rose band) --- */
.reviews{padding:clamp(40px,5vw,80px) 0;background:#f6d9df;border-top:1px solid var(--stroke);border-bottom:1px solid var(--stroke)}
.review-card{padding:24px;max-width:820px;margin:0 auto;text-align:center;}
.stars{letter-spacing:.1em;color:#ffb703;font-size:1.2rem;margin-bottom:8px}
blockquote{margin:0 0 6px;color:#2b2b33;font-size:1.5em;}
.author{color:#7a666c}
.review-actions{margin-top:30px}

/* --- Gallery --- */
.gallery{padding:clamp(40px,5vw,80px) 0;}
.masonry{columns:4 260px;column-gap:12px}
.masonry figure{break-inside:avoid;background:var(--card);border:1px solid var(--stroke);border-radius:12px;margin:0 0 12px;padding:6px}
.masonry img{width:100%;border-radius:10px;display:block}

/* --- Contact --- */
.contact{padding:clamp(40px,5vw,80px) 0;border-top:1px solid var(--stroke)}
.contact-form{background:var(--card);border:1px solid var(--stroke);border-radius:16px;padding:20px}
.contact-form label{display:block;color:#2b2b33;margin-bottom:12px}
.contact-form input,.contact-form textarea{width:100%;margin-top:8px;padding:12px 14px;background:#fff;border:1px solid var(--stroke);border-radius:10px;color:var(--fg)}
.contact-form input:focus,.contact-form textarea:focus{outline:2px solid var(--brand);}

/* --- Footer (darker rose with white links) --- */
.site-footer{position:sticky;bottom:0;background:var(--rose-700);border-top:1px solid var(--stroke);z-index:40;color:#fff}
.footer-grid{display:flex;justify-content:space-between;align-items:center;gap:10px;min-height:56px}
.footer-grid a{color:#fff;text-decoration:none;padding:6px 10px;border-radius:8px;opacity:.95}
.footer-grid a:hover{background:var(--rose-750);opacity:1}

/* --- Cart Drawer (dark rose) --- */
.cart-drawer{position:fixed;right:-420px;top:0;bottom:0;width:400px;background:var(--rose-800);border-left:1px solid var(--stroke);transition:right .25s;z-index:60;display:flex;flex-direction:column;color:#fff}
.cart-drawer.open{right:0}
.cart-header{display:flex;justify-content:space-between;align-items:center;padding:16px;border-bottom:1px solid rgba(255,255,255,.25);color:#fff}
.cart-items{flex:1;overflow:auto;padding:12px;display:flex;flex-direction:column;gap:10px}
.item{display:grid;grid-template-columns:64px 1fr auto;gap:10px;border:1px solid rgba(255,255,255,.2);border-radius:12px;padding:8px;align-items:center;background:var(--rose-700);color:#fff}
.item img{width:64px;height:64px;border-radius:8px;object-fit:cover}
.item h4{margin:0;font-size:.95rem;color:#fff}
.item .meta{color:#ffe5ea;font-size:.85rem}
.item .qty{display:flex;align-items:center;gap:6px}
.qty button{width:28px;height:28px;border-radius:8px;border:1px solid rgba(255,255,255,.35);background:transparent;color:#fff;cursor:pointer}
.qty input{width:40px;text-align:center;background:transparent;border:1px solid rgba(255,255,255,.35);color:#fff;border-radius:8px;padding:4px}
.cart-footer{border-top:1px solid rgba(255,255,255,.25);padding:12px;display:flex;flex-direction:column;gap:10px;color:#fff}
.totals span{opacity:.9}
.totals strong{color:#fff}
.paypal-note{color:#ffe5ea;font-size:.8rem}

/* --- Accessibility: minimal motion on request --- */
@media (prefers-reduced-motion: reduce){
  .masonry figure,
  .masonry figure img,
  .masonry figure::after,
  .masonry figure::before{
    transition: none !important;
    animation: none !important;
    transform: none !important;
  }
}


/* === Clean Hero (logo left, copy right) === */
.hero-clean{background:#ffffff;min-height:50vh;display:block}
.hero-clean .hero-grid{display:grid;grid-template-columns:minmax(220px,420px) 1fr;gap:clamp(24px,4vw,56px);align-items:center;max-width:var(--max);margin:0 auto;padding:clamp(36px,6vw,88px) 20px}
.hero-clean .hero-logo img{width:100%;height:auto;display:block}
.hero-clean .hero-copy h1{margin:0 0 8px;font-size:clamp(32px,4.6vw,56px);line-height:1.08;color:var(--rose-850)}
.hero-clean .hero-copy .sub{margin:0;max-width:52ch;font-size:clamp(15px,1.4vw,20px);color:var(--rose-800)}
/* Fade utility for rotating text */
.fade{opacity:0;transform:translateY(6px);transition:opacity .6s ease,transform .6s ease}
.fade.show{opacity:1;transform:translateY(0)}
@media (max-width: 780px){
  .hero-clean .hero-grid{grid-template-columns:1fr;text-align:center}
  .hero-clean .hero-logo{max-width:280px;margin:0 auto}
  .hero-clean .hero-copy{justify-self:center}
}

.hero-clean::after{content:none}

/* Hero CTAs bottom-centered */
.hero-clean{position:relative}
.hero-ctas{position:absolute;left:50%;bottom:24px;transform:translateX(-50%);display:flex;gap:12px;z-index:2}
.hero-ctas .btn{padding:.9rem 1.2rem;font-weight:700;border-radius:999px}
@media (max-width:780px){
  .hero-ctas{ display: none !important;}
}

.buy-row {
  display: flex;
  gap: 8px;
  align-items: center;
  width: 100%;
}

.buy-row .size {
  appearance: none;
  padding: 10px 12px;
  border: 1px solid var(--stroke);
  background: #fff;
  border-radius: 10px;
  font: inherit;
  line-height: 1;
}

.buy-row .btn {
  margin: 0;
}

@media (max-width:520px){
  .buy-row { gap:6px }
  .buy-row .size { padding:8px 10px }
}

.deals-grid {
  display: grid;
  grid-template-columns: repeat(2,1fr);
  gap: 16px;
}
@media (max-width:860px){ .deals-grid{ grid-template-columns:repeat(2,1fr) } }
@media (max-width:520px){ .deals-grid{ grid-template-columns:1fr } }

.ship-box{padding:12px; margin-bottom:12px; }
.ship-box h3{margin:0 0 8px 0;font-size:1.05rem}
.ship-box label{display:block;font-size:.9rem;margin:6px 0}
.ship-box input{width:100%;padding:10px;border:1px solid #ccc;border-radius:8px}
.ship-box .row{display:flex;gap:12px}
.ship-box .row > label{flex:1}
@media (max-width:640px){.ship-box .row{flex-direction:column}}