/* ===========================================================
   KediKO – Sevgi dolu pet shop (redesign)
   Bricolage Grotesque + Plus Jakarta Sans · warm coral palette
   =========================================================== */

/* ---------- Fonts ---------- */
@import url('https://fonts.googleapis.com/css2?family=Bricolage+Grotesque:wght@400;500;600;700;800&family=Plus+Jakarta+Sans:wght@400;500;600;700;800&family=Caveat:wght@500;700&display=swap');

/* ---------- Tokens ---------- */
:root, html[data-theme="light"]{
  --primary:#E76F51;
  --primary-dark:#C85A3F;
  --accent:#2A9D8F;
  --gold:#E9C46A;
  --pink:#F4A6B8;
  --bg:#FFF8F0;
  --bg-warm:#FBEFE0;
  --bg-card:#ffffff;
  --text:#2C1810;
  --text-soft:#6B5544;
  --text-muted:#9A8478;
  --border:#F0E2D0;
  --brand:var(--primary);
  --brand2:var(--accent);
  --muted:var(--text-muted);
  --card:var(--bg-card);
  --shadow-sm:0 2px 8px rgba(231,111,81,.08);
  --shadow:0 6px 24px rgba(231,111,81,.12);
  --shadow-md:0 6px 24px rgba(231,111,81,.12);
  --shadow-lg:0 16px 48px rgba(231,111,81,.16);

  --radius:18px;
  --radius-sm:12px;
  --radius-lg:28px;

  --font-head:'Bricolage Grotesque',serif;
  --font-body:'Plus Jakarta Sans',sans-serif;
  --font-script:'Caveat',cursive;

  --anim-speed:1;
  --max:1280px;
}

html[data-theme="dark"]{
  --primary:#FF9472;
  --primary-dark:#E76F51;
  --accent:#4FCFBE;
  --gold:#F2D779;
  --pink:#F4A6B8;
  --bg:#0F0A07;
  --bg-warm:#1F1612;
  --bg-card:#1A120E;
  --text:#FFF3E6;
  --text-soft:#D4BCA8;
  --text-muted:#8B7565;
  --border:#2E211A;
  --brand:var(--primary);
  --brand2:var(--accent);
  --muted:var(--text-muted);
  --card:var(--bg-card);
  --shadow-sm:0 2px 8px rgba(0,0,0,.4);
  --shadow:0 6px 24px rgba(0,0,0,.5);
  --shadow-md:0 6px 24px rgba(0,0,0,.5);
  --shadow-lg:0 16px 48px rgba(0,0,0,.6);
}

/* ---------- Base ---------- */
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  font-family:var(--font-body),system-ui,-apple-system,Segoe UI,Roboto,sans-serif;
  background:var(--bg);
  color:var(--text);
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
  min-height:100vh;
}
a{color:inherit;text-decoration:none}
h1,h2,h3,h4,h5{font-family:var(--font-head);color:var(--text);margin:0;letter-spacing:-.02em;line-height:1.15}
button{font-family:inherit;cursor:pointer;border:none;background:none;color:inherit}
input,textarea,select{font-family:inherit}
.container{max-width:var(--max);margin:0 auto;padding:0 24px}

/* ---------- Header / Topbar ---------- */
.topbar{
  position:sticky;top:0;z-index:100;
  background:rgba(255,248,240,.85);
  backdrop-filter:blur(20px);
  border-bottom:1px solid var(--border);
}
html[data-theme="dark"] .topbar{background:rgba(15,10,7,.85)}
.topbar .nav{
  display:flex;align-items:center;gap:24px;
  padding:14px 0;height:auto;
}
.brand{
  display:flex;align-items:center;gap:10px;cursor:pointer;
  font-family:var(--font-head);font-weight:700;color:var(--text);
}
.brand:hover .logo{animation:wiggle .6s ease}
.brand .logo{
  width:46px;height:46px;border-radius:14px;
  background:url('images/kediko-logo-mark.png') center/contain no-repeat;
  background-color:transparent;
  position:relative;
}
.brand .logo::after{display:none}
.brand span{font-size:22px;font-weight:800;color:var(--text);font-family:var(--font-head)}
.brand span em{font-style:normal;color:var(--primary)}

.nav-links{
  display:flex;align-items:center;gap:4px;list-style:none;margin:0;padding:0;flex:1;
}
.nav-links a{
  padding:10px 18px;border-radius:12px;
  font-size:15px;font-weight:600;color:var(--text-soft);
  transition:all .2s;
}
.nav-links a:hover{background:var(--bg-warm);color:var(--text)}
.nav-links a.active{background:var(--primary);color:#fff;box-shadow:var(--shadow-sm)}

/* Sadece ekran okuyucu için */
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

.nav-actions{display:flex;gap:10px;align-items:center;flex-wrap:nowrap}
.nav-actions .icon-btn{
  width:44px;height:44px;border-radius:14px;
  background:var(--bg-card);border:1px solid var(--border);
  color:var(--text);
  display:inline-flex;align-items:center;justify-content:center;
  text-decoration:none;cursor:pointer;
  transition:all .2s;position:relative;
  font-size:18px;
  flex:0 0 auto;
}
.nav-actions .icon-btn .ico{font-size:20px;line-height:1;display:inline-flex;align-items:center;justify-content:center}
.nav-actions .icon-btn:hover{background:var(--bg-warm);transform:translateY(-2px);box-shadow:var(--shadow-sm)}
.nav-actions .icon-btn--primary{
  background:var(--primary);color:#fff;border-color:var(--primary);
}
.nav-actions .icon-btn--primary:hover{
  background:var(--primary-dark);border-color:var(--primary-dark);
}
.nav-actions .icon-btn--primary .ico{color:#fff}
.nav-actions .icon-btn--logout:hover{
  background:rgba(231,111,81,.1);color:var(--primary);border-color:rgba(231,111,81,.2);
}
.nav-actions #navFavoritesBtn:hover{background:#FFE5EC;border-color:rgba(231,111,81,.25);color:var(--primary)}
html[data-theme="dark"] .nav-actions #navFavoritesBtn:hover{background:rgba(231,111,81,.15)}

/* Badge — icon-btn üstünde yuvarlak sayı */
.nav-actions .cart-badge{
  position:absolute;top:-6px;right:-6px;
  min-width:22px;height:22px;padding:0 6px;
  border-radius:11px;
  background:var(--text);color:#fff;
  font-size:11px;font-weight:800;
  display:inline-flex;align-items:center;justify-content:center;
  border:2px solid var(--bg);
  font-family:var(--font-body);
  line-height:1;
}
html[data-theme="dark"] .nav-actions .cart-badge{border-color:var(--bg)}
.nav-actions .icon-btn--primary .cart-badge{background:var(--text);color:#fff}

@media (max-width:600px){
  .nav-actions{gap:6px}
  .nav-actions .icon-btn{width:40px;height:40px;font-size:16px}
  .nav-actions .icon-btn .ico{font-size:18px}
}

.badge{
  position:absolute;top:-6px;right:-6px;
  background:var(--text);color:#fff;
  min-width:20px;height:20px;padding:0 6px;border-radius:50%;
  font-size:11px;font-weight:700;
  display:inline-flex;align-items:center;justify-content:center;
  border:none;
}

.hamburger{
  display:none;
  width:42px;height:42px;border-radius:12px;
  border:1px solid var(--border);
  background:var(--bg-card);
  color:var(--text);
  font-size:18px;
  cursor:pointer;
}

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  padding:14px 26px;border-radius:14px;border:none;
  font-weight:700;font-size:15px;
  background:var(--bg-card);
  border:1px solid var(--border);
  color:var(--text);
  cursor:pointer;
  transition:all .2s;
  text-decoration:none;
}
.btn:hover{transform:translateY(-2px);box-shadow:var(--shadow-sm)}
.btn.primary{
  background:var(--primary);color:#fff;border-color:var(--primary);
  box-shadow:var(--shadow-sm);
}
.btn.primary:hover{background:var(--primary-dark);border-color:var(--primary-dark);box-shadow:var(--shadow-md)}
.btn.ghost{
  background:rgba(255,255,255,.7);
  border:1px solid rgba(255,255,255,.9);
  color:var(--text);
}
html[data-theme="dark"] .btn.ghost{background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.12);color:var(--text)}
.btn.ghost:hover{background:#fff}
html[data-theme="dark"] .btn.ghost:hover{background:rgba(255,255,255,.15)}
.btn.danger{background:#E63946;color:#fff;border-color:#E63946}
.btn.danger:hover{background:#c12c38;border-color:#c12c38}

/* ---------- Hero (new design) ---------- */
.home-hero{padding:32px 0 16px;position:relative}
.home-hero .container{padding-left:24px;padding-right:24px}
.hero-card,
.hero-slider .hero-slide.is-active{
  background:linear-gradient(135deg,var(--bg-warm) 0%,#FFE5D0 50%,#FFD4B8 100%);
  border-radius:var(--radius-lg);
  padding:56px 48px;
  position:relative;overflow:hidden;
  display:grid;grid-template-columns:1.2fr 1fr;gap:40px;align-items:center;
  min-height:460px;
}
html[data-theme="dark"] .hero-card,
html[data-theme="dark"] .hero-slider .hero-slide.is-active{
  background:linear-gradient(135deg,#2A1F18 0%,#3A2A20 50%,#4A3528 100%);
}
.hero-slider{position:relative}
.hero-slider .hero-slide{display:none}
.hero-slider .hero-slide.is-active{display:grid}
.hero-copy{position:relative;z-index:2}
.eyebrow,.hero-eyebrow{
  display:inline-flex;align-items:center;gap:8px;
  padding:8px 16px;border-radius:100px;
  background:rgba(255,255,255,.7);color:var(--primary);
  font-size:12px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;
}
html[data-theme="dark"] .eyebrow,
html[data-theme="dark"] .hero-eyebrow{background:rgba(255,255,255,.1)}
.hero-copy h1,.hero-card h1{font-size:54px;font-weight:700;margin:20px 0;color:var(--text);line-height:1.1}
.hero-copy h1 .hl,.hero-card h1 .hl{
  color:var(--primary);position:relative;display:inline-block;
}
.hero-copy h1 .hl::after,.hero-card h1 .hl::after{
  content:'';position:absolute;left:0;bottom:4px;width:100%;height:12px;
  background:var(--gold);opacity:.4;z-index:-1;border-radius:4px;
}
.hero-copy p,.hero-card p{font-size:18px;color:var(--text-soft);max-width:480px;margin:0 0 28px;line-height:1.6}
.hero-actions{display:flex;gap:12px;flex-wrap:wrap}
.hero-stats{display:flex;gap:24px;margin-top:32px;padding-top:24px;border-top:1px dashed rgba(44,24,16,.15)}
html[data-theme="dark"] .hero-stats{border-top-color:rgba(255,255,255,.15)}
.hero-stats strong{font-size:24px;font-family:var(--font-head);display:block;color:var(--text)}
.hero-stats small{font-size:12px;color:var(--text-soft)}

.hero-stage{position:relative;display:flex;align-items:center;justify-content:center;min-height:360px}
.hero-bubble{
  position:absolute;background:#fff;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  box-shadow:var(--shadow-md);
}
html[data-theme="dark"] .hero-bubble{background:#2A1F18}

/* Existing site's hero markup compatibility: slider in subsequent (non-active) slides */
.hero-slider .hero-products{display:flex;align-items:center;justify-content:center;gap:18px;position:relative;z-index:2;flex-wrap:wrap}
.hero-slider .hero-products img{
  max-width:200px;max-height:200px;border-radius:24px;
  background:#fff;padding:12px;box-shadow:var(--shadow-md);
  transition:transform .3s;
}
html[data-theme="dark"] .hero-slider .hero-products img{background:#2A1F18}
.hero-slider .hero-products img:hover{transform:translateY(-6px) rotate(-2deg)}
.hero-controls{
  position:absolute;bottom:18px;left:0;right:0;
  display:flex;align-items:center;justify-content:center;gap:14px;z-index:3;
}
.hero-arrow{
  width:38px;height:38px;border-radius:50%;
  background:#fff;color:var(--primary);font-size:20px;font-weight:800;
  box-shadow:var(--shadow-sm);cursor:pointer;
  display:flex;align-items:center;justify-content:center;
}
html[data-theme="dark"] .hero-arrow{background:#2A1F18;color:var(--primary)}
.hero-dots{display:flex;gap:6px}
.hero-dot{
  width:8px;height:8px;border-radius:50%;
  background:rgba(44,24,16,.25);border:none;cursor:pointer;transition:all .2s;
}
.hero-dot.is-active{background:var(--primary);width:24px;border-radius:8px}

.trust-strip{
  display:grid;grid-template-columns:repeat(4,1fr);gap:16px;
  padding:18px;margin-top:18px;
  background:var(--bg-card);border:1px solid var(--border);
  border-radius:var(--radius);
}
.trust-strip span{
  display:flex;align-items:center;gap:8px;
  font-size:13px;color:var(--text-soft);font-weight:600;
}
.trust-strip span::before{content:"🐾";font-size:18px}

/* ---------- Floating animations ---------- */
.float{animation:float calc(4s / var(--anim-speed)) ease-in-out infinite}
.float-2{animation:float calc(5s / var(--anim-speed)) ease-in-out infinite .5s}
.float-3{animation:float calc(6s / var(--anim-speed)) ease-in-out infinite 1s}
@keyframes float{
  0%,100%{transform:translateY(0) rotate(0)}
  50%{transform:translateY(-14px) rotate(2deg)}
}
@keyframes wiggle{
  0%,100%{transform:rotate(0)}
  25%{transform:rotate(-10deg)}
  75%{transform:rotate(10deg)}
}
@keyframes pop{
  0%{transform:scale(0);opacity:0}
  50%{transform:scale(1.2)}
  100%{transform:scale(1);opacity:1}
}
@keyframes heartBurst{
  0%{transform:scale(1)} 30%{transform:scale(1.4)} 60%{transform:scale(.9)} 100%{transform:scale(1)}
}
@keyframes slideUp{from{opacity:0;transform:translateY(30px)} to{opacity:1;transform:translateY(0)}}
@keyframes fadeIn{from{opacity:0} to{opacity:1}}
@keyframes pulseRing{0%{box-shadow:0 0 0 0 rgba(231,111,81,.5)} 100%{box-shadow:0 0 0 12px rgba(231,111,81,0)}}
.fade-in{animation:fadeIn calc(.5s / var(--anim-speed)) ease-out}
.slide-up{animation:slideUp calc(.6s / var(--anim-speed)) ease-out backwards}

[data-reveal]{opacity:0;transform:translateY(20px);transition:opacity .6s ease, transform .6s ease}
[data-reveal].is-visible{opacity:1;transform:translateY(0)}

/* ---------- Section heads ---------- */
.section{padding:56px 0}
.section-title,
.section-head{
  display:flex;justify-content:space-between;align-items:flex-end;gap:16px;margin-bottom:32px;
}
.section-title .eyebrow,
.section-head .eyebrow,
.section-eyebrow{
  display:inline-block;font-size:12px;font-weight:700;color:var(--primary);
  letter-spacing:.1em;text-transform:uppercase;background:none;padding:0;
}
.section-title h2,
.section-head h2{font-size:40px;margin-top:6px;color:var(--text)}
.section-title .sub{color:var(--text-muted);font-size:14px}
.text-link,.see-all{color:var(--primary);font-weight:700;font-size:15px}
.text-link:hover,.see-all:hover{text-decoration:underline}

/* ---------- Features strip ---------- */
.features{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;padding:24px 0}
.feature-card{
  background:var(--bg-card);border-radius:var(--radius);padding:20px;
  border:1px solid var(--border);display:flex;gap:14px;align-items:center;
  transition:all .3s;
}
.feature-card:hover{transform:translateY(-4px);box-shadow:var(--shadow-md);border-color:transparent}
.feature-icon{
  width:44px;height:44px;border-radius:12px;background:var(--bg-warm);
  display:flex;align-items:center;justify-content:center;font-size:22px;flex-shrink:0;
}
.feature-card h4{font-size:14px;margin-bottom:2px;font-family:var(--font-body)}
.feature-card p{margin:0;font-size:12px;color:var(--text-muted)}

/* ---------- Category cards ---------- */
.cat-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:20px}
.cat-card{
  border-radius:var(--radius-lg);padding:28px;cursor:pointer;
  position:relative;overflow:hidden;transition:all .4s;min-height:200px;
  display:flex;flex-direction:column;justify-content:space-between;
}
.cat-card:hover{transform:translateY(-8px) rotate(-1deg);box-shadow:var(--shadow-lg)}
.cat-card .emoji{font-size:56px;transition:transform .4s}
.cat-card:hover .emoji{transform:scale(1.2) rotate(-10deg)}
.cat-card h3{font-size:24px;color:#fff}
.cat-card .count{color:rgba(255,255,255,.85);font-size:13px;font-weight:600}
.cat-card::before{
  content:'';position:absolute;bottom:-30px;right:-30px;width:120px;height:120px;
  background:rgba(255,255,255,.15);border-radius:50%;
}

/* ---------- Product cards (new design + JS legacy classes) ---------- */
.product-grid,
.catalog-grid,
.home-grid{
  display:grid;grid-template-columns:repeat(4,1fr);gap:20px;
}
.products-grid-3,
.catalog-grid.cols-3{grid-template-columns:repeat(3,1fr)}

.product-card,
.catalog-card,
.card{
  background:var(--bg-card);border-radius:var(--radius);overflow:hidden;
  border:1px solid var(--border);transition:all .3s;position:relative;
  display:flex;flex-direction:column;cursor:pointer;
  min-height:auto;
  grid-column:auto;
}
.product-card:hover,
.catalog-card:hover{transform:translateY(-6px);box-shadow:var(--shadow-lg);border-color:transparent}

.product-img,
.catalog-card__media,
.card .img{
  height:200px;position:relative;
  display:flex;align-items:center;justify-content:center;
  background:var(--bg-warm);overflow:hidden;
}
html[data-theme="dark"] .product-img,
html[data-theme="dark"] .catalog-card__media,
html[data-theme="dark"] .card .img{background:var(--bg-warm)}
.catalog-card__media a{display:flex;align-items:center;justify-content:center;width:100%;height:100%}
.catalog-card__media img,
.card .img img{
  max-width:80%;max-height:80%;object-fit:contain;
  transition:transform .4s;
  filter:drop-shadow(0 4px 10px rgba(0,0,0,.08));
}
.product-card:hover .catalog-card__media img,
.catalog-card:hover .catalog-card__media img{transform:scale(1.08) rotate(4deg)}
.product-img .emoji-big{font-size:96px;transition:transform .4s}
.product-card:hover .product-img .emoji-big{transform:scale(1.15) rotate(8deg)}

.product-info,
.catalog-card__body,
.card .body{
  padding:16px;flex:1;display:flex;flex-direction:column;gap:8px;
}
.product-brand,
.brand-line{
  font-size:11px;font-weight:700;color:var(--primary);
  letter-spacing:.08em;text-transform:uppercase;margin-bottom:2px;
}
.product-name,
.catalog-card__body h3,
.card h3{
  font-size:14px;font-weight:600;color:var(--text);line-height:1.4;
  min-height:40px;margin:0;font-family:var(--font-body);
}
.catalog-card__body h3 a{color:inherit}
.product-rating,
.rating-line{
  display:flex;align-items:center;gap:4px;
  font-size:12px;color:var(--text-muted);
}
.stars{color:var(--gold);letter-spacing:-1px;font-weight:900}
.product-stock,
.catalog-meta{
  display:flex;flex-wrap:wrap;gap:6px;
  font-size:12px;color:var(--text-muted);
  margin:2px 0 4px;
}
.product-stock.low,
.catalog-meta .low{color:var(--primary);font-weight:600}
.catalog-meta > span:first-child{
  display:inline-flex;align-items:center;gap:5px;
  padding:4px 10px;background:rgba(42,157,143,.12);
  color:var(--accent);border-radius:100px;
  font-size:11px;font-weight:700;
}
.catalog-meta > span:first-child::before{content:"✓";font-weight:900}
.catalog-meta > span{display:inline-flex;align-items:center;gap:4px}
.catalog-meta > span:not(:first-child){padding:4px 0;color:var(--text-muted)}

.product-price-row,
.catalog-price-row,
.price-row{
  display:flex;align-items:baseline;gap:8px;
  margin-top:auto;padding-top:4px;
}
.product-price,
.price,
.catalog-price-row .price-now{
  font-size:22px;font-weight:800;color:var(--accent);
  font-family:var(--font-head);
  flex-direction:row;
}
.product-old-price,
.catalog-price-row .price-old{
  font-size:14px;color:var(--text-muted);text-decoration:line-through;font-weight:500;
}
.catalog-price-row .price-old{font-weight:500}

.product-actions,
.catalog-actions{
  display:flex;gap:8px;margin-top:10px;align-items:center;
}
.btn-sm{padding:10px 14px;border-radius:10px;font-size:13px;font-weight:700;flex:1;text-align:center;border:none}
.btn-outline,
.btn.btn-outline{
  background:transparent;border:1.5px solid var(--border);color:var(--text);
}
.btn-outline:hover{border-color:var(--primary);color:var(--primary)}
.catalog-actions .btn{padding:10px 14px;font-size:13px;border-radius:10px;flex:1}
.catalog-actions .cart-action-btn{flex:1}
.catalog-actions .catalog-action-slot{flex:1;display:flex}
.catalog-actions .catalog-action-slot .btn{flex:1;justify-content:center}
.catalog-actions .qty.product-card-qty{
  flex:1;display:inline-flex;gap:0;align-items:center;justify-content:space-between;
  background:var(--bg-warm);border-radius:10px;padding:4px;
}
.catalog-actions .qty.product-card-qty .btn{
  flex:0 0 auto;width:34px;height:34px;padding:0;border-radius:8px;
  background:var(--bg-card);font-size:18px;font-weight:700;border:none;
}
.catalog-actions .qty.product-card-qty .q{
  flex:1;text-align:center;font-weight:700;background:none;border:none;padding:0;font-size:14px;
}

/* Favorite & badges */
.fav-btn,
.favorite-btn{
  position:absolute;top:12px;right:12px;
  width:38px;height:38px;border-radius:50%;background:#fff;
  display:flex;align-items:center;justify-content:center;
  transition:all .2s;box-shadow:var(--shadow-sm);
  color:var(--primary);font-size:18px;
  border:none;cursor:pointer;
}
html[data-theme="dark"] .fav-btn,
html[data-theme="dark"] .favorite-btn{background:var(--bg-card)}
.fav-btn:hover,
.favorite-btn:hover{transform:scale(1.15)}
.fav-btn.active,
.favorite-btn.is-active{background:#FFE5EC;color:var(--primary)}
.fav-btn.is-popping,
.favorite-btn.is-popping{animation:heartBurst .5s ease}

.product-badge,
.sale-badge,
.rank-badge,
.stock-badge{
  position:absolute;top:12px;left:12px;
  padding:5px 12px;border-radius:100px;
  background:var(--primary);color:#fff;
  font-size:11px;font-weight:700;letter-spacing:.05em;
  z-index:2;
}
.product-badge.sale,.sale-badge{background:var(--accent)}
.product-badge.new{background:var(--gold);color:var(--text)}
.rank-badge{background:var(--gold);color:var(--text);top:12px;left:12px}
.sale-badge{top:12px;left:12px}
/* If multiple badges, stack */
.catalog-card__media .rank-badge ~ .sale-badge{top:46px}
.catalog-card__media .rank-badge ~ .sale-badge ~ .stock-badge{top:80px}
.stock-badge{background:#64748B}

/* Deal tabs */
.deal-tabs{display:flex;gap:8px;margin-bottom:24px;flex-wrap:wrap}
.deal-tab{
  padding:8px 18px;border-radius:100px;font-size:14px;font-weight:600;
  background:var(--bg-card);color:var(--text-soft);
  border:1px solid var(--border);transition:all .2s;cursor:pointer;
}
.deal-tab:hover{background:var(--bg-warm)}
.deal-tab.is-active,.deal-tab.active{background:var(--primary);color:#fff;border-color:var(--primary)}

/* ---------- Promo strip ---------- */
.promo,
.promo-card{
  background:linear-gradient(135deg,var(--accent) 0%, #1F7A6E 100%);
  border-radius:var(--radius-lg);padding:48px;color:#fff;
  display:grid;grid-template-columns:1.5fr 1fr;gap:32px;align-items:center;
  position:relative;overflow:hidden;
}
.promo h2{color:#fff;font-size:36px;margin-bottom:12px}
.promo p{color:rgba(255,255,255,.9);margin:0 0 20px}
.promo .btn.ghost{background:#fff;color:var(--accent);border-color:#fff}
.promo .btn.ghost:hover{background:rgba(255,255,255,.9)}

/* ---------- Testimonials ---------- */
.testimonial-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.testimonial-track{display:flex;gap:20px;overflow-x:auto;scroll-snap-type:x mandatory;padding-bottom:8px}
.testimonial-track > *{flex:0 0 320px;scroll-snap-align:start}
/* Boş testimonial track'i olan section'ı gizle (modern :has) */
.testimonials:has(#testimonialTrack:empty){display:none!important}

.testi-card,
.testimonial-card{
  background:var(--bg-card);border-radius:var(--radius);padding:28px;
  border:1px solid var(--border);position:relative;transition:all .3s;
}
.testi-card:hover,
.testimonial-card:hover{transform:translateY(-4px);box-shadow:var(--shadow-md)}
.testi-card .quote{
  font-size:60px;color:var(--bg-warm);
  position:absolute;top:8px;right:16px;line-height:1;font-family:var(--font-head);
}
.testi-text{font-size:15px;color:var(--text-soft);line-height:1.6;margin-bottom:16px;position:relative;z-index:1}
.testi-author{display:flex;align-items:center;gap:12px}
.testi-avatar{
  width:44px;height:44px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  font-weight:700;color:#fff;font-size:16px;
  background:var(--primary);
}
.testi-author strong{display:block;font-size:14px}
.testi-author small{color:var(--text-muted);font-size:12px}

/* ---------- Footer ---------- */
.footer{
  background:var(--text);color:rgba(255,255,255,.7);
  padding:60px 0 24px;margin-top:80px;
  border:none;
}
html[data-theme="dark"] .footer{background:#050302}
.footer-grid{
  display:grid;grid-template-columns:2fr 1fr 1fr 1fr 1fr;gap:40px;margin-bottom:40px;
}
.footer h5,.footer h4{color:#fff;font-size:14px;margin-bottom:16px;font-family:var(--font-body);font-weight:700}
.footer ul{list-style:none;padding:0;margin:0}
.footer li{margin-bottom:10px;font-size:14px;cursor:pointer;transition:color .2s;color:rgba(255,255,255,.7)}
.footer li:hover,.footer a:hover{color:var(--gold)}
.footer a{color:rgba(255,255,255,.7)}
.footer-brand p{font-size:14px;line-height:1.6;margin:12px 0 20px;color:rgba(255,255,255,.7)}
.footer-bottom{padding-top:24px;border-top:1px solid rgba(255,255,255,.1);display:flex;justify-content:space-between;font-size:13px;flex-wrap:wrap;gap:8px}
.social-row{display:flex;gap:10px}
.social-btn{
  width:38px;height:38px;border-radius:10px;background:rgba(255,255,255,.08);
  display:flex;align-items:center;justify-content:center;transition:all .2s;color:#fff;
  border:none;cursor:pointer;font-size:16px;
}
.social-btn:hover{background:var(--primary);transform:translateY(-2px)}
.footer-brand .brand{color:#fff;background:rgba(255,255,255,.06);padding:8px 14px;border-radius:14px;display:inline-flex;width:fit-content}
.footer-brand .brand span{color:#fff}
.footer-brand .brand span::before{color:#fff}
.footer-brand .brand span::after{color:var(--gold)}

/* ---------- Page hero (subpages) ---------- */
.page-hero,
.banner{
  background:linear-gradient(135deg,var(--bg-warm) 0%,#FFE5D0 100%);
  border-radius:var(--radius-lg);padding:56px 48px;text-align:center;
  margin:32px 0;position:relative;overflow:hidden;
  border:none;
}
html[data-theme="dark"] .page-hero,
html[data-theme="dark"] .banner{background:linear-gradient(135deg,#2A1F18 0%,#3A2A20 100%)}
.page-hero h1,.banner h1{font-size:48px;margin:12px 0;color:var(--text)}
.page-hero p,.banner p{color:var(--text-soft);max-width:600px;margin:0 auto;font-size:17px;line-height:1.6}

/* ---------- Filter bar / sidebar ---------- */
.filter-bar,
.toolbar{
  display:grid;grid-template-columns:1fr 200px 200px;gap:12px;
  background:var(--bg-card);padding:16px;border-radius:var(--radius);
  border:1px solid var(--border);margin-bottom:24px;
}
.toolbar{display:flex;flex-wrap:wrap}
.filter-input,.input,.select,.form-input,.form-textarea{
  padding:12px 16px;border-radius:12px;border:1px solid var(--border);
  background:var(--bg);color:var(--text);font-size:14px;
  outline:none;transition:all .2s;
}
html[data-theme="dark"] .filter-input,
html[data-theme="dark"] .input,
html[data-theme="dark"] .select,
html[data-theme="dark"] .form-input,
html[data-theme="dark"] .form-textarea{background:var(--bg-warm)}
.filter-input:focus,.input:focus,.select:focus,
.form-input:focus,.form-textarea:focus{border-color:var(--primary);background:#fff}
html[data-theme="dark"] .filter-input:focus,
html[data-theme="dark"] .input:focus,
html[data-theme="dark"] .select:focus,
html[data-theme="dark"] .form-input:focus,
html[data-theme="dark"] .form-textarea:focus{background:var(--bg-card)}
.form-textarea{min-height:100px;resize:vertical;width:100%}
.form-input{width:100%}

.products-layout{display:grid;grid-template-columns:260px 1fr;gap:24px}
.filter-sidebar,
.side-card{
  background:var(--bg-card);border:1px solid var(--border);
  border-radius:var(--radius);padding:24px;height:fit-content;
}
.filter-sidebar h4,.side-card h3{
  font-size:16px;margin-bottom:12px;font-family:var(--font-body);color:var(--text);
}
.filter-section{
  margin-bottom:24px;padding-bottom:24px;border-bottom:1px solid var(--border);
}
.filter-section:last-child{border-bottom:none;padding-bottom:0}
.filter-check{
  display:flex;align-items:center;gap:10px;padding:6px 0;
  font-size:14px;color:var(--text-soft);cursor:pointer;
}
.filter-check input{accent-color:var(--primary)}

.form-group{margin-bottom:16px}
.form-group label{display:block;font-size:13px;color:var(--text-soft);margin-bottom:6px;font-weight:600}
.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}

/* ---------- Product detail ---------- */
.detail-grid,
.product-detail{display:grid;grid-template-columns:1fr 1fr;gap:40px;margin:32px 0}
.detail-img-wrap,
.gallery{
  background:linear-gradient(135deg,var(--bg-warm),#FFE5D0);
  border-radius:var(--radius-lg);padding:30px;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  min-height:480px;position:relative;overflow:hidden;
}
html[data-theme="dark"] .detail-img-wrap,
html[data-theme="dark"] .gallery{background:linear-gradient(135deg,#2A1F18,#3A2A20)}
.detail-emoji{font-size:200px}
.gallery .g-main{
  width:100%;height:380px;
  border-radius:18px;background:#fff;
  background-size:contain!important;background-repeat:no-repeat;background-position:center;
  cursor:zoom-in;box-shadow:var(--shadow-sm);
}
html[data-theme="dark"] .gallery .g-main{background-color:var(--bg-card)}
.gallery .thumb-row{display:flex;gap:10px;margin-top:14px;overflow-x:auto;padding-bottom:6px;width:100%;justify-content:center;flex-wrap:wrap}
.gallery .thumb{
  flex:0 0 auto;width:70px;height:70px;
  border-radius:12px;border:2px solid transparent;
  background-size:cover;background-position:center;background-color:#fff;
  cursor:pointer;opacity:.65;transition:all .2s;
}
html[data-theme="dark"] .gallery .thumb{background-color:var(--bg-card)}
.gallery .thumb.active{opacity:1;border-color:var(--primary)}
.g-btn{
  position:absolute;top:50%;transform:translateY(-50%);
  width:42px;height:42px;border-radius:14px;
  background:#fff;color:var(--primary);box-shadow:var(--shadow-sm);
  display:flex;align-items:center;justify-content:center;
  cursor:pointer;border:none;z-index:2;font-size:18px;
}
html[data-theme="dark"] .g-btn{background:var(--bg-card)}
.g-btn.prev{left:12px} .g-btn.next{right:12px}

.detail-info h1,
.product-detail h1{font-size:32px;margin:12px 0;color:var(--text)}
.detail-price,
.price-tag,
.product-detail .price{
  font-size:36px;color:var(--accent);font-weight:800;
  font-family:var(--font-head);margin:16px 0;
}
.rating-row{display:flex;align-items:center;gap:10px;margin:8px 0 0}
.qty-row{display:flex;align-items:center;gap:16px;margin:20px 0}
.qty-control,.qty{
  display:inline-flex;align-items:center;gap:12px;
  background:var(--bg-card);border:1px solid var(--border);
  border-radius:12px;padding:4px;
}
html[data-theme="dark"] .qty,.qty-control{background:var(--bg-warm)}
.qty .btn,.qty-control button{
  width:36px;height:36px;border-radius:8px;
  background:var(--bg-warm);font-size:18px;font-weight:700;
  border:none;color:var(--text);cursor:pointer;
  display:flex;align-items:center;justify-content:center;padding:0;
}
html[data-theme="dark"] .qty .btn{background:var(--bg-card)}
.qty .btn:hover,.qty-control button:hover{background:var(--primary);color:#fff}
.qty .q{min-width:30px;text-align:center;font-weight:700;padding:0 8px;background:none;border:none}

.buy-row{display:flex;flex-wrap:wrap;gap:16px;align-items:center;justify-content:space-between;margin-top:24px}
.buy-actions{display:flex;gap:12px;align-items:center;flex-wrap:wrap}

.detail-meta{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin:20px 0}
.detail-meta-card{background:var(--bg-warm);padding:14px;border-radius:12px}
.detail-meta-card .label{font-size:11px;color:var(--text-muted);text-transform:uppercase;letter-spacing:.05em}
.detail-meta-card .value{font-size:14px;font-weight:700;margin-top:4px;color:var(--text)}

/* Accordions */
.acc,details.acc{
  border:1px solid var(--border);border-radius:var(--radius);
  background:var(--bg-card);margin:12px 0;overflow:hidden;
}
.acc summary{
  cursor:pointer;padding:18px 22px;font-weight:700;list-style:none;
  display:flex;justify-content:space-between;align-items:center;color:var(--text);
}
.acc summary::-webkit-details-marker{display:none}
.acc summary:after{content:"⌄";color:var(--primary);font-size:22px;transition:transform .3s}
.acc[open] summary:after{transform:rotate(180deg)}
.acc-body{padding:0 22px 22px;color:var(--text-soft);line-height:1.7}
.bullets{margin:10px 0 0;padding-left:20px}
.bullets li{margin:8px 0;line-height:1.6}

.specs{width:100%;border-collapse:collapse}
.specs td{border-top:1px solid var(--border);padding:12px 8px;color:var(--text-soft)}
.specs tr td:first-child{color:var(--text);font-weight:700;width:45%}
.desc{color:var(--text-soft);line-height:1.8}

/* Reviews / Q&A carousel */
.rev-summary{
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:2px 2px 12px;margin-bottom:16px;
}
.rev-score{display:flex;flex-direction:column;gap:4px}
.rev-num{font-size:36px;font-weight:900;color:var(--text);font-family:var(--font-head)}
.hwrap{position:relative}
.hs{display:flex;gap:14px;overflow-x:auto;padding:12px 56px 10px;scroll-snap-type:x mandatory}
.hs::-webkit-scrollbar{height:8px}
.hs::-webkit-scrollbar-thumb{background:var(--border);border-radius:999px}
.hs-btn{
  position:absolute;top:50%;transform:translateY(-50%);
  width:42px;height:42px;border-radius:14px;
  background:#fff;color:var(--primary);box-shadow:var(--shadow-sm);
  cursor:pointer;z-index:2;border:none;font-size:18px;
}
html[data-theme="dark"] .hs-btn{background:var(--bg-card)}
.hs-btn.prev{left:0} .hs-btn.next{right:0}
.hcard{
  flex:0 0 320px;background:var(--bg-card);border:1px solid var(--border);
  border-radius:14px;padding:16px;scroll-snap-align:start;min-height:128px;
}
.hcard-top{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:8px}
.hname{font-weight:800;color:var(--text)}
.htext{color:var(--text-soft);line-height:1.6;font-size:14px}

.review{
  border:1px solid var(--border);border-radius:14px;
  background:var(--bg-warm);padding:16px;margin-bottom:10px;
}
.review-head{display:flex;align-items:center;justify-content:space-between;gap:10px}
.review-text{margin-top:8px;color:var(--text-soft);line-height:1.7}

/* Lightbox */
.lightbox{position:fixed;inset:0;display:none;z-index:2000}
.lightbox.open{display:block}
.lb-backdrop{position:absolute;inset:0;background:rgba(44,24,16,.7);backdrop-filter:blur(8px)}
.lb-card{
  position:relative;max-width:min(1000px,92vw);max-height:86vh;
  margin:7vh auto 0;border-radius:18px;background:#fff;
  box-shadow:var(--shadow-lg);padding:16px;
}
html[data-theme="dark"] .lb-card{background:var(--bg-card)}
.lb-card img{width:100%;height:auto;max-height:calc(86vh - 60px);object-fit:contain;border-radius:14px}
.lb-x,.lb-nav{
  width:42px;height:42px;border-radius:14px;
  background:#fff;color:var(--primary);box-shadow:var(--shadow-sm);
  cursor:pointer;border:none;font-size:18px;
}
html[data-theme="dark"] .lb-x,
html[data-theme="dark"] .lb-nav{background:var(--bg-card)}
.lb-x{position:absolute;top:10px;right:10px}
.lb-nav{position:absolute;top:50%;transform:translateY(-50%)}
.lb-nav.prev{left:10px} .lb-nav.next{right:10px}

/* ---------- Cart ---------- */
.cart-layout{display:grid;grid-template-columns:1.5fr 1fr;gap:24px;margin:32px 0}
.cart-item{
  display:grid;grid-template-columns:80px 1fr auto auto;gap:16px;padding:16px;
  background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius);
  align-items:center;margin-bottom:12px;
}
.cart-item-img{
  width:80px;height:80px;border-radius:12px;background:var(--bg-warm);
  display:flex;align-items:center;justify-content:center;font-size:40px;
  overflow:hidden;
}
.cart-item-img img{max-width:100%;max-height:100%;object-fit:contain}
.cart-summary{
  background:var(--bg-card);border:1px solid var(--border);
  border-radius:var(--radius);padding:24px;height:fit-content;
  position:sticky;top:100px;
}
.summary-row{display:flex;justify-content:space-between;padding:10px 0;font-size:14px;color:var(--text-soft)}
.summary-row.total{
  font-size:20px;font-weight:800;color:var(--text);
  padding-top:16px;border-top:1px solid var(--border);
  margin-top:8px;font-family:var(--font-head);
}

/* Legacy table cart */
.table{width:100%;border-collapse:collapse}
.table th,.table td{border-bottom:1px solid var(--border);padding:14px 10px;text-align:left;color:var(--text-soft)}
.table th{color:var(--text);font-size:13px;font-weight:700}
.table td{font-size:14px}
.right{text-align:right}

/* ---------- Orders ---------- */
.order-card{
  background:var(--bg-card);border:1px solid var(--border);
  border-radius:var(--radius);padding:24px;margin-bottom:16px;
}
.order-head{
  display:flex;justify-content:space-between;align-items:flex-start;
  margin-bottom:20px;padding-bottom:16px;border-bottom:1px dashed var(--border);
  gap:14px;flex-wrap:wrap;
}
.order-status{
  padding:6px 14px;border-radius:100px;font-size:12px;font-weight:700;
  background:rgba(42,157,143,.1);color:var(--accent);
}
.order-status.shipping{background:rgba(233,196,106,.2);color:#B8860B}
.tracker{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin-bottom:20px}
.tracker-step{text-align:center}
.tracker-dot{
  width:32px;height:32px;border-radius:50%;background:var(--border);
  margin:0 auto 8px;display:flex;align-items:center;justify-content:center;
  color:#fff;font-weight:700;font-size:14px;transition:all .3s;
}
.tracker-dot.done{background:var(--accent)}
.tracker-dot.active{background:var(--primary);animation:pulseRing 2s infinite}
.tracker-step .lbl{font-size:12px;color:var(--text-muted);font-weight:600}
.tracker-step.done .lbl{color:var(--text)}

.orders-empty{text-align:center;padding:60px 24px;color:var(--text-muted)}

/* ---------- Stats / Dashboard ---------- */
.stat-row{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin:16px 0}
.stat-card{
  background:var(--bg-warm);padding:16px;border-radius:14px;text-align:center;
}
.stat-card .num{
  font-size:28px;font-weight:800;color:var(--primary);font-family:var(--font-head);
}
.stat-card .lbl{font-size:11px;color:var(--text-muted);text-transform:uppercase;letter-spacing:.05em}

.dash-card,.panel{
  background:var(--bg-card);border-radius:var(--radius);padding:28px;
  border:1px solid var(--border);transition:all .3s;
}
.dash-card:hover{box-shadow:var(--shadow-md)}
.dash-card h3{font-size:20px;margin-bottom:8px;color:var(--text)}
.dash-card .desc{color:var(--text-muted);font-size:14px;margin-bottom:16px}
.dashboard-grid{display:grid;grid-template-columns:1fr 1fr;gap:24px}

/* ---------- Legal pages ---------- */
.legal-content{max-width:820px;margin:0 auto}
.legal-section{
  background:var(--bg-card);border:1px solid var(--border);
  border-radius:var(--radius);padding:28px;margin-bottom:16px;
  transition:all .3s;
}
.legal-section:hover{box-shadow:var(--shadow-sm)}
.legal-section h3{
  font-size:18px;margin-bottom:12px;padding-left:14px;
  border-left:4px solid var(--primary);color:var(--text);
}
.legal-section p,.legal-section li{color:var(--text-soft);line-height:1.7;font-size:14px}
.legal-section ul{padding-left:20px}

/* ---------- Contact ---------- */
.contact-grid{display:grid;grid-template-columns:1fr 1fr;gap:24px;margin:32px 0}
.contact-info-card{
  background:var(--bg-card);border:1px solid var(--border);
  border-radius:var(--radius);padding:28px;
}
.contact-channel{
  display:flex;gap:14px;padding:14px;border-radius:12px;background:var(--bg);
  margin-bottom:10px;transition:all .2s;
}
.contact-channel:hover{background:var(--bg-warm);transform:translateX(4px)}
.contact-channel-icon{
  width:44px;height:44px;border-radius:12px;background:var(--bg-warm);
  display:flex;align-items:center;justify-content:center;font-size:22px;flex-shrink:0;
}

/* ---------- Empty states ---------- */
.empty-state{
  text-align:center;padding:60px 24px;background:var(--bg-card);
  border:2px dashed var(--border);border-radius:var(--radius);
}
.empty-state .emoji{font-size:80px;margin-bottom:16px;display:inline-block;animation:float 3s ease-in-out infinite}
.empty-state h3{font-size:22px;margin-bottom:8px;color:var(--text)}
.empty-state p{color:var(--text-muted);margin-bottom:20px}

/* ---------- Toast ---------- */
.toast{
  position:fixed;bottom:24px;left:50%;transform:translateX(-50%);
  background:var(--text);color:#fff;padding:14px 22px;
  border-radius:14px;font-weight:600;
  z-index:1000;box-shadow:var(--shadow-lg);
  max-width:90vw;
  display:none;
  align-items:center;gap:12px;
}
.toast.show{display:inline-flex;animation:slideUp .3s ease}
.toast .t{font-weight:800}
.toast .d{font-size:13px;opacity:.9;margin-left:6px}

/* ---------- Cursor paw ---------- */
.cursor-paw{position:fixed;pointer-events:none;z-index:1;animation:pawFade 1.2s ease-out forwards;opacity:.55}
/* Form alanları paw cursor'ın üstünde kalsın */
.form-input,.form-textarea,.input,.select,.auth-input,.profile-input,.profile-textarea,.profile-select,.ap-input,
textarea,input[type="text"],input[type="email"],input[type="password"],input[type="search"],input[type="tel"],input[type="number"],input[type="date"]{
  position:relative;z-index:2;
}
/* Hero, header, kartlar gibi görünür katmanlar paw'ın üstünde dursun */
.hero-card,.hero-slider .hero-slide.is-active,.page-hero,.banner,
.panel,.product-card,.catalog-card,.feature-card,.cat-card,.testi-card,.testimonial-card,
.cart-item,.cart-summary,.order-card,.dash-card,.profile-card,.legal-card,.legal-section,
.contact-info-card,.contact-form-card,.detail-meta-card,.detail-img-wrap,.gallery,
.filter-sidebar,.filter-panel,.side-card,.auth-panel,.empty-state,.favorites-toolbar{
  position:relative;z-index:2;
}
.cursor-paw svg{filter:blur(.4px)}
@keyframes pawFade{
  0%{opacity:.6;transform:scale(.5) rotate(0)}
  20%{opacity:.5;transform:scale(1) rotate(15deg)}
  100%{opacity:0;transform:scale(.8) rotate(15deg) translateY(-20px)}
}

/* ---------- Auth forms (login/register) ---------- */
.auth-wrap{
  max-width:480px;margin:60px auto;padding:0 24px;
}
.auth-card{
  background:var(--bg-card);border:1px solid var(--border);
  border-radius:var(--radius-lg);padding:40px 32px;box-shadow:var(--shadow-md);
}
.auth-card h1{font-size:30px;margin-bottom:8px;text-align:center}
.auth-card .lead{text-align:center;color:var(--text-soft);margin-bottom:24px;font-size:15px;line-height:1.5}
.auth-card .form-group{margin-bottom:14px}
.auth-card .btn{width:100%;justify-content:center}
.auth-card .small,.auth-card .form-hint{color:var(--text-muted);font-size:13px;margin-top:12px;text-align:center}
.auth-card .small a,.auth-card .form-hint a{color:var(--primary);font-weight:700}
.auth-divider{
  display:flex;align-items:center;gap:10px;margin:18px 0;color:var(--text-muted);font-size:12px;
}
.auth-divider::before,.auth-divider::after{content:"";flex:1;height:1px;background:var(--border)}

/* ---------- Two-col / Grid helpers ---------- */
.two-col{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.kicker{color:var(--text-muted);font-weight:600;letter-spacing:0;font-size:13px;text-transform:uppercase}
.h1{margin:8px 0 10px;font-size:38px;line-height:1.08;color:var(--text);font-family:var(--font-head)}
.lead{margin:0 0 18px;color:var(--text-soft);font-size:16px;line-height:1.6;max-width:56ch}
.pills{display:flex;gap:10px;flex-wrap:wrap;margin-top:14px}
.pill{
  display:inline-flex;align-items:center;gap:8px;padding:8px 14px;border-radius:999px;
  background:var(--bg-card);border:1px solid var(--border);color:var(--text-soft);font-size:13px;
}
.small{color:var(--text-muted);font-size:13px;line-height:1.6}

/* Hide auth-only elements by default — pre-paint script on <html> sets
   .is-authed before first paint when user is signed in (prevents FOUC). */
html:not(.is-authed) [data-auth-only]{display:none !important}
html:not(.is-authed) .nav-actions [data-auth-only]{display:none !important}

/* ---------- Responsive ---------- */
@media (max-width: 1100px){
  .hero-card,.hero-slider .hero-slide.is-active{grid-template-columns:1fr;padding:40px 28px;min-height:auto}
  .hero-stage{min-height:280px}
  .hero-copy h1,.hero-card h1{font-size:42px}
  .features,.cat-grid,.product-grid,.catalog-grid,.home-grid,.testimonial-grid,.testimonials,.products-grid-3{grid-template-columns:repeat(3,1fr)}
  .footer-grid{grid-template-columns:2fr 1fr 1fr}
}
@media (max-width: 900px){
  .nav-links{display:none;position:absolute;top:72px;left:0;right:0;
    background:var(--bg-card);border-bottom:1px solid var(--border);
    padding:14px 24px;flex-direction:column;align-items:stretch;gap:4px;z-index:99;
    box-shadow:var(--shadow-md);
  }
  .nav-links.open{display:flex}
  .nav-links a{width:100%}
  .hamburger{display:inline-flex;align-items:center;justify-content:center}
  .features,.cat-grid,.product-grid,.catalog-grid,.home-grid,.testimonial-grid,.testimonials,.products-grid-3,.stat-row,.trust-strip{grid-template-columns:repeat(2,1fr)}
  .detail-grid,.product-detail,.cart-layout,.contact-grid,.dashboard-grid,.two-col{grid-template-columns:1fr}
  .products-layout{grid-template-columns:1fr}
  .promo,.promo-card{grid-template-columns:1fr;padding:32px 24px}
  .footer-grid{grid-template-columns:1fr 1fr;gap:24px}
  .section-title h2,.section-head h2,.page-hero h1,.banner h1{font-size:32px}
  .hero-copy h1,.hero-card h1{font-size:36px}
  .filter-bar{grid-template-columns:1fr}
  .cart-item{grid-template-columns:60px 1fr;gap:10px}
  .cart-item .qty-control,.cart-item .qty{grid-column:1/-1}
}
@media (max-width: 560px){
  .features,.cat-grid,.product-grid,.catalog-grid,.home-grid,.testimonial-grid,.testimonials,.products-grid-3,.stat-row,.trust-strip,.footer-grid{grid-template-columns:1fr}
  .page-hero,.banner{padding:36px 22px}
  .hero-card,.hero-slider .hero-slide.is-active{padding:32px 20px}
  .hero-copy h1,.hero-card h1{font-size:28px}
  .nav-actions .btn span:not(.badge){display:none}
  .container{padding:0 16px}
}

/* ---------- Misc legacy class hooks ---------- */
.text-warm{color:var(--primary)}
.bg-warm-card{background:var(--bg-warm);border-radius:var(--radius);padding:18px}
.shadow-soft{box-shadow:var(--shadow-md)}
.divider-dashed{border-top:1px dashed var(--border);margin:20px 0}

/* Profile / settings sidebar (existing class hooks) */
.profile-layout{display:grid;grid-template-columns:260px 1fr;gap:24px;margin-top:24px}
.profile-side{
  background:var(--bg-card);border:1px solid var(--border);
  border-radius:var(--radius);padding:18px;height:fit-content;
}
.profile-side .avatar{
  width:80px;height:80px;border-radius:50%;background:var(--primary);
  color:#fff;display:flex;align-items:center;justify-content:center;
  font-size:32px;font-weight:800;margin:0 auto 8px;font-family:var(--font-head);
}
.profile-side button,.profile-side .tab-btn{
  display:block;width:100%;text-align:left;padding:10px 12px;
  border-radius:10px;background:transparent;color:var(--text-soft);
  font-weight:500;margin-bottom:4px;font-size:14px;cursor:pointer;border:none;
  transition:all .15s;
}
.profile-side button:hover,.profile-side .tab-btn:hover{background:var(--bg-warm);color:var(--text)}
.profile-side button.is-active,.profile-side .tab-btn.is-active,
.profile-side button.active,.profile-side .tab-btn.active{background:var(--bg-warm);color:var(--primary);font-weight:700}

/* Tags */
.tag{
  display:inline-flex;align-items:center;gap:4px;padding:4px 10px;
  border-radius:100px;font-size:11px;font-weight:700;
  background:var(--bg-warm);color:var(--text-soft);
  margin-right:4px;
}
.tag.primary{background:var(--primary);color:#fff}
.tag.accent{background:var(--accent);color:#fff}
.tag.gold{background:var(--gold);color:var(--text)}

/* Utility */
.hidden{display:none!important}
.flex{display:flex} .flex-col{flex-direction:column}
.gap-12{gap:12px} .gap-16{gap:16px} .gap-24{gap:24px}
.mt-12{margin-top:12px} .mt-24{margin-top:24px}
.mb-12{margin-bottom:12px} .mb-24{margin-bottom:24px}
.text-center{text-align:center}
.w-full{width:100%}
.justify-center{justify-content:center}
.items-center{align-items:center}

/* ---------- JS-generated footer (data-modern-footer) ---------- */
.site-footer{background:var(--text);color:rgba(255,255,255,.75);padding:60px 0 24px;margin-top:80px}
html[data-theme="dark"] .site-footer{background:#050302}
.site-footer__top{
  display:grid;grid-template-columns:2fr 1fr 1fr 1fr 1fr;gap:40px;margin-bottom:40px;
}
.site-footer .footer-intro{color:rgba(255,255,255,.75)}
.site-footer .footer-brand{
  display:inline-flex;align-items:center;gap:10px;
  background:rgba(255,255,255,.06);padding:8px 14px;border-radius:14px;
  color:#fff;font-family:var(--font-head);font-weight:800;font-size:18px;
  width:fit-content;
}
.site-footer .footer-brand .logo{
  width:36px;height:36px;border-radius:10px;
  background:url('images/kediko-logo-mark.png') center/contain no-repeat;
  background-color:#fff;
}
.site-footer .footer-intro p{margin:14px 0 18px;font-size:14px;line-height:1.6;color:rgba(255,255,255,.7)}
.site-footer .social-row a{
  width:38px;height:38px;border-radius:10px;background:rgba(255,255,255,.08);
  display:inline-flex;align-items:center;justify-content:center;color:#fff;font-weight:700;
  transition:all .2s;font-size:14px;
}
.site-footer .social-row a:hover{background:var(--primary);transform:translateY(-2px)}
.site-footer .footer-col h4{color:#fff;font-size:14px;margin-bottom:16px;font-family:var(--font-body);font-weight:700}
.site-footer .footer-col ul{list-style:none;padding:0;margin:0}
.site-footer .footer-col li{margin-bottom:10px;font-size:14px}
.site-footer .footer-col a{color:rgba(255,255,255,.7);transition:color .2s}
.site-footer .footer-col a:hover{color:var(--gold)}
.site-footer__bottom{
  padding-top:24px;border-top:1px solid rgba(255,255,255,.1);
  display:flex;justify-content:space-between;font-size:13px;
  color:rgba(255,255,255,.6);flex-wrap:wrap;gap:8px;
}
.local-badge{
  display:inline-flex;align-items:center;gap:6px;padding:4px 12px;
  border-radius:100px;background:rgba(255,255,255,.08);color:rgba(255,255,255,.8);
}
.local-badge::before{content:"🐾";font-size:13px}

@media (max-width:900px){
  .site-footer__top{grid-template-columns:1fr 1fr;gap:24px}
}
@media (max-width:560px){
  .site-footer__top{grid-template-columns:1fr}
}

/* ---------- JS-generated testimonials ---------- */
.testimonial-card{
  background:var(--bg-card);border-radius:var(--radius);padding:24px;
  border:1px solid var(--border);transition:all .3s;
  display:flex;flex-direction:column;gap:14px;min-width:0;
}
.testimonial-card:hover{transform:translateY(-4px);box-shadow:var(--shadow-md)}
.testimonial-head{display:flex;align-items:center;gap:12px}
.testimonial-head .avatar{
  width:44px;height:44px;border-radius:50%;
  background:var(--primary);color:#fff;
  display:flex;align-items:center;justify-content:center;
  font-weight:800;font-size:16px;font-family:var(--font-head);
}
.testimonial-head .avatar--blue{background:#88B0BF}
.testimonial-head .avatar--green{background:var(--accent)}
.testimonial-head strong{display:block;font-size:14px;color:var(--text)}
.testimonial-head small{color:var(--text-muted);font-size:12px}
.testimonial-card .stars{font-size:14px}
.testimonial-card p{margin:0;font-size:14px;color:var(--text-soft);line-height:1.6}
.mini-product{
  display:flex;align-items:center;gap:10px;padding:10px;
  background:var(--bg-warm);border-radius:12px;
  margin-top:auto;color:var(--text);
  transition:all .2s;
}
.mini-product:hover{background:var(--bg);box-shadow:var(--shadow-sm)}
.mini-product img{width:40px;height:40px;object-fit:contain;border-radius:8px;background:#fff;padding:4px}
html[data-theme="dark"] .mini-product img{background:var(--bg-card)}
.mini-product span{font-size:13px;font-weight:600;line-height:1.3}

/* showcase wrapper */
.product-showcase,.deals-section,.testimonials{padding:48px 0}
.modern-title{display:flex;justify-content:space-between;align-items:flex-end;gap:14px}

/* ---------- Catalog page (products.html) ---------- */
.catalog-page{padding-top:8px}
.catalog-hero{margin:24px 0}
.catalog-toolbar{
  display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:14px;
  background:var(--bg-card);padding:18px;border:1px solid var(--border);
  border-radius:var(--radius);margin-bottom:24px;
}
.catalog-toolbar label{display:flex;flex-direction:column;gap:6px;font-size:12px;color:var(--text-soft);font-weight:600}
.catalog-toolbar .input,.catalog-toolbar .select{margin:0}
.search-field{position:relative}
.search-field input{padding-left:38px}
.search-field::after{content:"🔍";position:absolute;left:14px;bottom:13px;font-size:14px;opacity:.6;pointer-events:none}

.catalog-layout{display:grid;grid-template-columns:260px 1fr;gap:24px;align-items:start}
.filter-panel{
  background:var(--bg-card);border:1px solid var(--border);
  border-radius:var(--radius);padding:22px;height:fit-content;
  position:sticky;top:96px;
}
.filter-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:14px}
.filter-head strong{font-size:16px;color:var(--text);font-family:var(--font-head)}
.reset-link{background:none;border:none;color:var(--primary);font-weight:700;cursor:pointer;font-size:13px}
.filter-group{padding:14px 0;border-bottom:1px solid var(--border)}
.filter-group:last-child{border-bottom:none}
.filter-group h3{font-size:13px;font-family:var(--font-body);font-weight:700;color:var(--text);margin-bottom:10px;text-transform:uppercase;letter-spacing:.04em}
.facet-list{display:flex;flex-direction:column;gap:6px;font-size:14px;color:var(--text-soft)}
.facet-list label{display:flex;align-items:center;gap:8px;cursor:pointer;padding:4px 0}
.facet-list input{accent-color:var(--primary)}
.facet-list--scroll{max-height:200px;overflow-y:auto;padding-right:6px}
.price-filter{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.price-filter .input{padding:10px 12px;font-size:13px;width:100%}
.checkbox-stack{display:flex;flex-direction:column;gap:8px}
.checkbox-stack label{display:flex;align-items:center;gap:8px;font-size:14px;color:var(--text-soft);cursor:pointer}
.checkbox-stack input{accent-color:var(--primary)}
[data-pet-filter]{
  display:inline-flex;align-items:center;gap:6px;padding:6px 12px;
  border-radius:100px;background:var(--bg-warm);color:var(--text-soft);
  border:1px solid var(--border);font-size:13px;font-weight:600;
  cursor:pointer;margin:0 4px 6px 0;transition:all .2s;
}
[data-pet-filter].is-active{background:var(--primary);color:#fff;border-color:var(--primary)}

.catalog-results{min-width:0}
.results-head{display:flex;justify-content:space-between;align-items:flex-start;gap:14px;margin-bottom:14px}
.results-head strong{display:block;font-size:18px;color:var(--text);font-family:var(--font-head)}
.results-head p{margin:4px 0 0;font-size:13px;color:var(--text-muted)}

@media (max-width:900px){
  .catalog-toolbar{grid-template-columns:1fr}
  .catalog-layout{grid-template-columns:1fr}
  .filter-panel{position:static}
}

/* ---------- About page ---------- */
.about-page .panel-soft{
  background:var(--bg-card);border:1px solid var(--border);
  border-radius:var(--radius-lg);padding:32px;margin:20px 0;
  box-shadow:var(--shadow-sm);
}
.about-page .panel-soft h2{font-size:28px;margin:6px 0 12px;color:var(--text)}
.about-page .panel-soft p{color:var(--text-soft);line-height:1.7;margin:0 0 12px}
.about-page .panel-soft p:last-child{margin-bottom:0}
.about-story{display:grid;grid-template-columns:1fr 1.4fr;gap:32px;align-items:start}
.about-story__copy p{margin:0 0 14px}
.mission-grid{display:grid;grid-template-columns:1fr 1fr;gap:24px;margin:32px 0}
.mission-grid .panel-soft{margin:0}
.values-section{padding:32px 0}
.value-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.value-grid article{
  background:var(--bg-card);border:1px solid var(--border);
  border-radius:var(--radius);padding:24px;transition:all .3s;
}
.value-grid article:hover{transform:translateY(-4px);box-shadow:var(--shadow-md)}
.value-grid article span{
  display:inline-flex;width:44px;height:44px;border-radius:12px;
  background:var(--bg-warm);color:var(--primary);
  align-items:center;justify-content:center;
  font-size:22px;font-weight:800;margin-bottom:12px;
}
.value-grid article strong{display:block;font-size:18px;font-family:var(--font-head);margin-bottom:6px;color:var(--text)}
.value-grid article p{margin:0;color:var(--text-soft);font-size:14px;line-height:1.6}

.stats-grid{
  display:grid;grid-template-columns:repeat(4,1fr);gap:16px;
  background:linear-gradient(135deg,var(--primary),#F4A261);
  border-radius:var(--radius-lg);padding:40px;color:#fff;
  margin:32px 0;text-align:center;
}
.stats-grid article strong{display:block;font-size:30px;font-family:var(--font-head);margin-bottom:4px;color:#fff}
.stats-grid article span{font-size:14px;opacity:.92}

.about-cta{
  display:grid;grid-template-columns:1.5fr 1fr;gap:24px;align-items:center;
  background:var(--bg-card);border:1px solid var(--border);
  border-radius:var(--radius-lg);padding:36px;margin:32px 0;
}
.about-cta h2{font-size:28px;margin:6px 0 8px;color:var(--text)}
.about-cta p{color:var(--text-soft);margin:0;line-height:1.6}
.about-cta .cta-actions{display:flex;flex-direction:column;gap:10px}

@media (max-width:900px){
  .about-story,.mission-grid,.about-cta{grid-template-columns:1fr}
  .value-grid{grid-template-columns:1fr 1fr}
  .stats-grid{grid-template-columns:1fr 1fr}
}
@media (max-width:560px){
  .value-grid,.stats-grid{grid-template-columns:1fr}
}

/* ---------- Contact page extras ---------- */
.contact-channel-card,.contact-info-card,.contact-form-card{
  background:var(--bg-card);border:1px solid var(--border);
  border-radius:var(--radius);padding:28px;transition:all .3s;
}
.contact-channel-card:hover{transform:translateY(-4px);box-shadow:var(--shadow-md)}
.contact-layout{display:grid;grid-template-columns:1fr 1.2fr;gap:24px;margin:24px 0}
.contact-info-card h2,.contact-form-card h2{font-size:24px;margin:6px 0 18px;color:var(--text)}
.contact-info-card p{color:var(--text-soft);line-height:1.6;margin:0 0 16px}
.contact-list{display:flex;flex-direction:column;gap:10px;margin:16px 0}
.contact-list > div{
  display:flex;justify-content:space-between;align-items:center;gap:10px;
  padding:14px;background:var(--bg-warm);border-radius:12px;
  transition:all .2s;
}
.contact-list > div:hover{transform:translateX(4px)}
.contact-list span{font-size:12px;color:var(--text-muted);text-transform:uppercase;letter-spacing:.05em;font-weight:600}
.contact-list strong,.contact-list a{font-size:15px;color:var(--text);font-weight:700}
.contact-list a{color:var(--primary)}
.hours-card{
  margin-top:18px;padding:18px;background:linear-gradient(135deg,var(--primary),#F4A261);
  color:#fff;border-radius:14px;
}
.hours-card span{display:block;font-size:12px;text-transform:uppercase;letter-spacing:.05em;opacity:.85;font-weight:600}
.hours-card strong{display:block;font-size:18px;margin-top:4px;font-family:var(--font-head)}
.hours-card small{display:block;margin-top:2px;font-size:13px;opacity:.85}

.contact-form label{display:flex;flex-direction:column;gap:6px;margin-bottom:14px}
.contact-form label > span{font-size:13px;font-weight:600;color:var(--text-soft)}
.contact-form .input{padding:14px 16px;font-size:14px}
.contact-form textarea.input{min-height:140px;resize:vertical;font-family:inherit}
.contact-form .char-count{text-align:right;font-size:12px;color:var(--text-muted);margin-bottom:14px}
.contact-form .btn{width:100%;justify-content:center}

@media (max-width:900px){.contact-layout{grid-template-columns:1fr}}

/* ---------- Profile page color overrides (uses page-scoped CSS) ---------- */
.page-profile .profile-hero{
  background:linear-gradient(135deg,var(--bg-warm) 0%,#FFE5D0 50%,#FFD4B8 100%)!important;
  border-radius:var(--radius-lg)!important;border:none!important;
  box-shadow:var(--shadow-sm)!important;
}
html[data-theme="dark"] .page-profile .profile-hero{
  background:linear-gradient(135deg,#2A1F18 0%,#3A2A20 50%,#4A3528 100%)!important;
}
.page-profile .profile-kicker{color:var(--primary)!important}
.page-profile .profile-name,
.page-profile .card-title,
.page-profile .mini-tile h4,
.page-profile .setting-head h4,
.page-profile .saved-card-title,
.page-profile .saved-address-title,
.page-profile .timeline-item b{color:var(--text)!important;font-family:var(--font-head)}
.page-profile .profile-email,
.page-profile .field-label,
.page-profile .card-sub,
.page-profile .mini-tile p,
.page-profile .field-help,
.page-profile .counter,
.page-profile .saved-card-sub,
.page-profile .saved-address-sub,
.page-profile .setting-box p,
.page-profile .timeline-item .time,
.page-profile .hero-copy{color:var(--text-soft)!important}
.page-profile .profile-avatar{
  background:var(--primary)!important;color:#fff!important;
  border-radius:24px!important;border:none!important;
  font-family:var(--font-head);
}
.page-profile .avatar-edit{
  background:var(--accent)!important;color:#fff!important;
  border:none!important;border-radius:12px!important;
}
.page-profile .status-chip{
  background:rgba(231,111,81,.12)!important;color:var(--primary)!important;
  border:1px solid rgba(231,111,81,.2)!important;border-radius:100px!important;
}
.page-profile .profile-card,
.page-profile .mini-tile,
.page-profile .setting-box,
.page-profile .saved-card,
.page-profile .saved-address,
.page-profile .timeline-item,
.page-profile .stat-card{
  background:var(--bg-card)!important;color:var(--text)!important;
  border-radius:var(--radius)!important;border:1px solid var(--border)!important;
  box-shadow:var(--shadow-sm)!important;
}
.page-profile .profile-input,
.page-profile .profile-textarea,
.page-profile .profile-select{
  background:var(--bg)!important;color:var(--text)!important;
  border:1px solid var(--border)!important;border-radius:12px!important;
}
html[data-theme="dark"] .page-profile .profile-input,
html[data-theme="dark"] .page-profile .profile-textarea,
html[data-theme="dark"] .page-profile .profile-select{background:var(--bg-warm)!important}
.page-profile .profile-input:focus,
.page-profile .profile-textarea:focus,
.page-profile .profile-select:focus{
  border-color:var(--primary)!important;background:#fff!important;
  box-shadow:0 0 0 4px rgba(231,111,81,.12)!important;
}
.page-profile .soft-btn,
.page-profile .action-small{
  background:var(--bg-card)!important;color:var(--text)!important;
  border:1px solid var(--border)!important;border-radius:12px!important;
}
.page-profile .soft-btn:hover,
.page-profile .action-small:hover{
  background:var(--bg-warm)!important;border-color:var(--primary)!important;
  color:var(--primary)!important;
}
.page-profile .stat-card .v{color:var(--primary)!important;font-family:var(--font-head)}
.page-profile .stat-card .l{color:var(--text-muted)!important}
.page-profile .card-chip,
.page-profile .address-chip,
.page-profile .timeline-dot{
  background:linear-gradient(135deg,var(--primary),#F4A261)!important;color:#fff!important;
  border-radius:10px!important;
}
.page-profile .switch input:checked + .slider{background:var(--primary)!important}
.page-profile .switch input:checked + .slider:before{background:#fff!important}
.page-profile .slider{background:var(--border)!important;border:none!important}
.page-profile .danger-box{
  background:rgba(231,111,81,.06)!important;
  border:2px solid rgba(231,111,81,.2)!important;border-radius:14px!important;
}
.page-profile .danger-box h4{color:var(--primary)!important}
.page-profile .danger-box p{color:var(--text-soft)!important}
.page-profile .danger-btn{
  background:transparent!important;color:var(--primary)!important;
  border:2px solid var(--primary)!important;border-radius:12px!important;
}
.page-profile .danger-btn:hover{background:var(--primary)!important;color:#fff!important}
.page-profile .favorite-tile{
  background:var(--bg-card)!important;border:1px solid var(--border)!important;
  border-radius:var(--radius)!important;
}
.page-profile .favorite-media{background:var(--bg-warm)!important;border:none!important;border-radius:12px!important}
.page-profile .favorite-info strong{color:var(--primary)!important}
.page-profile .favorite-info a{color:var(--text)!important}
.page-profile .favorite-info span{color:var(--accent)!important}
.page-profile .account-modal-card{
  background:var(--bg-card)!important;color:var(--text)!important;
  border-radius:var(--radius)!important;
}
.page-profile .account-modal-card h3{color:var(--text)!important;font-family:var(--font-head)}
.page-profile .account-modal-card p{color:var(--text-soft)!important}

/* ---------- Favorites page ---------- */
.favorites-toolbar{
  display:flex;justify-content:space-between;align-items:center;gap:14px;
  background:var(--bg-card);border:1px solid var(--border);
  border-radius:var(--radius);padding:18px 22px;margin-bottom:18px;
  flex-wrap:wrap;
}
.favorites-toolbar strong{display:block;font-size:18px;color:var(--text);font-family:var(--font-head)}
.favorites-toolbar p{margin:4px 0 0;font-size:13px;color:var(--text-muted)}

.favorites-page-grid{
  display:grid;grid-template-columns:repeat(3,1fr);gap:20px;
  align-items:start;
}
.favorite-page-card{
  background:var(--bg-card);border:1px solid var(--border);
  border-radius:var(--radius);overflow:hidden;
  display:flex;flex-direction:column;
  transition:all .3s;position:relative;z-index:2;
}
.favorite-page-card:hover{transform:translateY(-6px);box-shadow:var(--shadow-md);border-color:transparent}
.favorite-page-card__media{
  display:flex;align-items:center;justify-content:center;
  height:200px;background:var(--bg-warm);overflow:hidden;
  position:relative;
}
html[data-theme="dark"] .favorite-page-card__media{background:var(--bg-warm)}
.favorite-page-card__media img{
  max-width:75%;max-height:75%;width:auto;height:auto;
  object-fit:contain;display:block;
  filter:drop-shadow(0 6px 14px rgba(0,0,0,.08));
  transition:transform .4s;
}
.favorite-page-card:hover .favorite-page-card__media img{transform:scale(1.08) rotate(4deg)}
.favorite-page-card__body{
  padding:16px;display:flex;flex-direction:column;gap:8px;flex:1;min-width:0;
}
.favorite-page-card__body .brand-line{
  font-size:11px;font-weight:700;color:var(--primary);
  letter-spacing:.08em;text-transform:uppercase;margin:0;
}
.favorite-page-card__name{
  font-size:14px;font-weight:600;color:var(--text);
  line-height:1.4;min-height:38px;
  display:-webkit-box;-webkit-line-clamp:2;line-clamp:2;-webkit-box-orient:vertical;
  overflow:hidden;text-overflow:ellipsis;
}
.favorite-page-card__name:hover{color:var(--primary)}
.favorite-page-card__stock{
  font-size:12px;color:var(--text-muted);margin-top:2px;
}
.favorite-page-card__actions{
  display:flex;gap:6px;padding:0 16px 16px;flex-wrap:wrap;
}
.favorite-page-card__actions .btn{
  flex:1;justify-content:center;padding:10px 12px;font-size:13px;
  border-radius:10px;font-weight:700;min-width:0;
}
.favorite-page-card__actions .btn.ghost{
  background:transparent;border:1.5px solid var(--border);color:var(--text);
}
.favorite-page-card__actions .btn.ghost:hover{border-color:var(--primary);color:var(--primary)}
.favorite-page-card__actions .btn.danger-soft{
  background:rgba(231,111,81,.08);color:var(--primary);
  border:1px solid rgba(231,111,81,.18);flex:0 0 auto;padding:10px 12px;
}
.favorite-page-card__actions .btn.danger-soft:hover{background:var(--primary);color:#fff;border-color:var(--primary)}

.favorites-empty{
  text-align:center;padding:60px 24px;background:var(--bg-card);
  border:2px dashed var(--border);border-radius:var(--radius);
  grid-column:1/-1;
}
.favorites-empty strong{display:block;font-size:20px;margin-bottom:8px;color:var(--text);font-family:var(--font-head)}
.favorites-empty p{color:var(--text-muted);margin:0 0 18px}

@media (max-width:900px){.favorites-page-grid{grid-template-columns:repeat(2,1fr)}}
@media (max-width:560px){.favorites-page-grid{grid-template-columns:1fr}}

/* ---------- Orders / Returns / Questions / Reviews pages ---------- */
.compact-section{padding:32px 0}
.compact-section .container > .panel{margin-top:18px}

.orders-section{padding:32px 0}
.orders-page-hero{
  background:linear-gradient(135deg,var(--bg-warm) 0%,#FFE5D0 100%);
  border-radius:var(--radius-lg);padding:48px 40px;
  position:relative;overflow:hidden;margin-bottom:28px;
}
html[data-theme="dark"] .orders-page-hero{background:linear-gradient(135deg,#2A1F18 0%,#3A2A20 100%)}
.orders-page-hero__kicker{
  display:inline-flex;align-items:center;gap:8px;padding:8px 16px;
  border-radius:100px;background:rgba(255,255,255,.7);
  color:var(--primary);font-weight:700;font-size:12px;
  margin:0 0 12px;text-transform:uppercase;letter-spacing:.1em;
}
html[data-theme="dark"] .orders-page-hero__kicker{background:rgba(255,255,255,.1)}
.orders-page-hero__title{font-size:42px;margin:8px 0;color:var(--text);font-family:var(--font-head)}
.orders-page-hero__lead{font-size:16px;color:var(--text-soft);margin:0;max-width:560px;line-height:1.6}
.orders-page-hero__glow{
  position:absolute;right:-60px;top:-60px;width:240px;height:240px;
  border-radius:50%;background:rgba(255,255,255,.3);pointer-events:none;
}

.orders-main-grid{display:grid;grid-template-columns:1fr 320px;gap:24px;align-items:start}
.orders-list{display:flex;flex-direction:column;gap:16px;min-width:0}
.orders-summary-aside{
  position:sticky;top:96px;
  background:var(--bg-card);border:1px solid var(--border);
  border-radius:var(--radius);padding:20px;
}
@media (max-width:900px){
  .orders-main-grid{grid-template-columns:1fr}
  .orders-summary-aside{position:static}
  .orders-page-hero__title{font-size:32px}
  .orders-page-hero{padding:36px 24px}
}

/* ---------- Legal pages ---------- */
.legal-page .legal-stack{max-width:820px;margin:0 auto;display:flex;flex-direction:column;gap:14px}
.legal-page .legal-card{
  background:var(--bg-card);border:1px solid var(--border);
  border-radius:var(--radius);padding:28px;
  transition:all .3s;
}
.legal-page .legal-card:hover{box-shadow:var(--shadow-sm)}
.legal-page .legal-card h2{
  font-size:20px;margin:0 0 12px;color:var(--text);
  padding-left:14px;border-left:4px solid var(--primary);
  font-family:var(--font-head);
}
.legal-page .legal-card p,
.legal-page .legal-card li{color:var(--text-soft);line-height:1.7;font-size:14px}
.legal-page .legal-card ul{padding-left:20px;margin:0}
.legal-page .legal-card li{margin:6px 0}
.legal-note{
  margin-top:14px;padding:14px 16px;background:var(--bg-warm);
  border-radius:12px;color:var(--text-soft);font-size:13px;line-height:1.6;
}
.legal-note strong{color:var(--text)}

/* Returns / Questions / Reviews — generic info pages share .panel & .section */

/* ---------- Breadcrumb (product detail) ---------- */
.breadcrumb{
  display:flex;align-items:center;gap:8px;
  padding:20px 0 8px;font-size:13px;color:var(--text-muted);
  flex-wrap:wrap;
}
.breadcrumb a{color:var(--text-soft);transition:color .2s}
.breadcrumb a:hover{color:var(--primary)}
.breadcrumb .bc-sep{opacity:.5}
.breadcrumb .bc-current{color:var(--text);font-weight:600}

/* ---------- Product detail (6.foto görünümü) ---------- */
.product-detail-section .two-col{
  display:grid;grid-template-columns:1fr 1fr;gap:32px;align-items:start;margin-bottom:32px;
}
.product-detail-section .two-col > .panel{
  background:var(--bg-card);border:1px solid var(--border);
  border-radius:var(--radius-lg);padding:32px;box-shadow:var(--shadow-sm);
}
.product-detail-section .two-col > .panel:first-child{
  background:linear-gradient(135deg,var(--bg-warm),#FFE5D0);
  border:none;padding:40px;position:relative;overflow:hidden;
}
html[data-theme="dark"] .product-detail-section .two-col > .panel:first-child{
  background:linear-gradient(135deg,#2A1F18,#3A2A20);
}
.product-detail-section .gallery{min-height:auto;padding:0;background:transparent}
.product-detail-section .gallery .g-main{
  width:100%;height:380px;background:#fff;
  background-size:contain!important;background-repeat:no-repeat;background-position:center;
  border-radius:18px;box-shadow:var(--shadow-sm);
}
html[data-theme="dark"] .product-detail-section .gallery .g-main{background-color:var(--bg-card)}

.product-detail-section .panel .kicker{
  display:inline-block;font-size:11px;font-weight:700;color:var(--primary);
  letter-spacing:.1em;text-transform:uppercase;margin:0 0 6px;
}
.product-detail-section .panel h2{
  font-family:var(--font-head);font-size:28px;font-weight:700;
  color:var(--text);margin:6px 0 12px;line-height:1.2;letter-spacing:-.01em;
}
.product-detail-section .rating-row{
  display:flex;align-items:center;gap:10px;margin:8px 0 18px;
}
.product-detail-section .rating-row .stars{color:var(--gold);font-size:16px}
.product-detail-section .rating-row .small{color:var(--text-muted);font-size:13px}

.product-detail-section .buy-row{
  display:block;margin-top:18px;
}
.product-detail-section .buy-row > div:first-child{
  display:flex;align-items:baseline;gap:14px;flex-wrap:wrap;margin-bottom:8px;
}
.product-detail-section .buy-row .price,
.product-detail-section .buy-row .price-tag{
  font-family:var(--font-head);font-size:32px;font-weight:800;color:var(--accent);
}
.product-detail-section .buy-row .stock{
  display:inline-flex;align-items:center;gap:6px;padding:6px 12px;
  background:rgba(42,157,143,.12);color:var(--accent);
  border-radius:100px;font-size:13px;font-weight:700;
}
.product-detail-section .buy-row .stock::before{content:"✓";font-weight:900}

.product-detail-section .buy-actions{
  display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-top:18px;
}
.product-detail-section .buy-actions .qty{
  background:var(--bg-warm);border:1px solid var(--border);border-radius:12px;padding:4px;
}
.product-detail-section .buy-actions #addBtn{
  flex:1;min-width:200px;justify-content:center;font-size:15px;height:50px;
}
.product-detail-section .buy-actions #detailFavoriteBtn{
  width:50px;height:50px;padding:0;border-radius:12px;
  background:var(--bg-card);color:var(--primary);font-size:18px;
}
.product-detail-section .buy-actions #askBtn{height:50px;padding:0 18px}

.product-detail-section .pills{margin-top:14px}
.product-detail-section .pills .pill{
  background:var(--bg-warm);color:var(--text-soft);
  border:1px solid var(--border);
  font-size:12px;padding:6px 12px;
}

@media (max-width:900px){
  .product-detail-section .two-col{grid-template-columns:1fr;gap:18px}
  .product-detail-section .two-col > .panel:first-child{padding:24px}
  .product-detail-section .gallery .g-main{height:300px}
  .product-detail-section .panel h2{font-size:22px}
}

/* ---------- Product detail right panel (new layout, 4. foto) ---------- */
.detail-info-panel{
  padding:32px;
}
.brand-eyebrow{
  display:inline-block;font-size:11px;font-weight:800;letter-spacing:.12em;
  text-transform:uppercase;color:var(--primary);margin-bottom:6px;
}
.detail-title{
  font-size:30px;line-height:1.18;color:var(--text);
  font-family:var(--font-head);font-weight:700;margin:6px 0 10px;
  letter-spacing:-.02em;
}
.detail-info-panel .rating-row{display:flex;align-items:center;gap:10px;margin:4px 0 14px;font-size:13px}
.detail-info-panel .rating-row .stars{font-size:16px;color:var(--gold)}
.detail-info-panel .rating-row .small{color:var(--text-muted)}

.detail-price-block{
  display:flex;align-items:baseline;gap:10px;margin:6px 0 14px;
  font-family:var(--font-head);
}
.detail-price-block .price-now,
.detail-price-block .price-current,
.detail-price-block strong,
.detail-price-block .price{
  font-size:32px;font-weight:800;color:var(--accent);font-family:var(--font-head);
}
.detail-price-block .price-old,
.detail-price-block s,
.detail-price-block del{
  font-size:18px;color:var(--text-muted);text-decoration:line-through;font-weight:500;
}

.detail-desc{
  color:var(--text-soft);line-height:1.7;font-size:15px;margin:0 0 18px;
}

.detail-info-panel .detail-meta{
  display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin:14px 0 18px;
}
.detail-info-panel .detail-meta-card{
  background:var(--bg-warm);padding:12px 14px;border-radius:12px;
  border:1px solid transparent;
}
.detail-info-panel .detail-meta-card .label{
  font-size:11px;color:var(--text-muted);
  text-transform:uppercase;letter-spacing:.05em;font-weight:700;
  display:flex;align-items:center;gap:4px;
}
.detail-info-panel .detail-meta-card .value{
  font-size:14px;font-weight:700;margin-top:4px;color:var(--text);
}

.detail-qty-row{
  display:flex;align-items:center;gap:14px;margin:14px 0 16px;
}
.detail-qty-label{font-weight:600;color:var(--text-soft);font-size:14px}
.detail-qty-row .qty-control{
  display:inline-flex;align-items:center;gap:8px;
  background:var(--bg);border:1.5px solid var(--border);
  border-radius:12px;padding:4px;
}
html[data-theme="dark"] .detail-qty-row .qty-control{background:var(--bg-warm)}
.detail-qty-row .qty-control button{
  width:36px;height:36px;border-radius:8px;
  background:var(--bg-warm);font-size:18px;font-weight:700;
  border:none;color:var(--text);cursor:pointer;
  display:flex;align-items:center;justify-content:center;padding:0;
}
html[data-theme="dark"] .detail-qty-row .qty-control button{background:var(--bg-card)}
.detail-qty-row .qty-control button:hover{background:var(--primary);color:#fff}
.detail-qty-row .qty-control .q{
  min-width:36px;text-align:center;font-weight:700;font-size:16px;color:var(--text);
}

.detail-cta{
  display:flex;align-items:stretch;gap:12px;margin:8px 0 14px;
}
.detail-add-btn{
  flex:1;justify-content:center;padding:16px 20px;
  font-size:16px;font-weight:800;border-radius:14px;
  min-height:54px;
}
.detail-fav-btn{
  width:54px;height:54px;border-radius:50%;
  background:#FFE5EC;color:var(--primary);
  font-size:26px;font-weight:700;
  display:flex;align-items:center;justify-content:center;
  border:none;cursor:pointer;
  transition:all .2s;flex-shrink:0;
  box-shadow:var(--shadow-sm);
}
html[data-theme="dark"] .detail-fav-btn{background:rgba(231,111,81,.18)}
.detail-fav-btn:hover{transform:scale(1.08);box-shadow:var(--shadow-md)}
.detail-fav-btn.is-active{background:var(--primary);color:#fff}
.detail-fav-btn.is-active:hover{background:var(--primary-dark)}

.detail-foot-row{
  display:flex;justify-content:flex-end;margin-top:10px;
}
.detail-ask-link{
  background:transparent;border:none;color:var(--primary);
  font-size:14px;font-weight:700;cursor:pointer;padding:8px 4px;
  display:inline-flex;align-items:center;gap:6px;
}
.detail-ask-link:hover{text-decoration:underline}

@media (max-width:560px){
  .detail-info-panel{padding:22px}
  .detail-title{font-size:24px}
  .detail-price-block .price-now,.detail-price-block strong{font-size:26px}
  .detail-info-panel .detail-meta{grid-template-columns:1fr}
}

/* ---------- Q&A / Reviews ask-row ---------- */
.ask-row,.ask-row--question{
  display:flex;flex-direction:column;gap:10px;margin-top:14px;
  max-width:100%;
}
.ask-row .input,.ask-row textarea.input{
  width:100%;max-width:100%;box-sizing:border-box;
}
.ask-row textarea.input,.ask-row--question textarea.input,
textarea.input,textarea.form-input{
  min-height:110px;max-height:240px;resize:vertical;
  width:100%;max-width:100%;box-sizing:border-box;
  font-family:inherit;line-height:1.55;
  padding:12px 14px;
}
.masked-name-chip{
  display:inline-block;padding:10px 14px;background:var(--bg-warm);
  border:1px dashed var(--border);border-radius:12px;
  font-weight:700;color:var(--text-soft);font-size:14px;
  max-width:240px;width:fit-content;
}
.ask-row .btn{align-self:flex-start}
.review-compose__login{
  display:flex;justify-content:space-between;align-items:center;gap:14px;
  padding:14px 16px;background:var(--bg-warm);border-radius:12px;flex-wrap:wrap;
}
.vlist{display:flex;flex-direction:column;gap:12px}
.vitem{
  background:var(--bg-warm);border:1px solid var(--border);
  border-radius:14px;padding:16px;
}
.vhead{display:flex;justify-content:space-between;align-items:center;gap:10px;margin-bottom:8px}
.vtext{color:var(--text-soft);font-size:14px;line-height:1.6;margin:4px 0}
.vtext b{color:var(--text);font-weight:700}

/* FAQ */
.faq-grid{display:grid;grid-template-columns:1fr;gap:12px;max-width:820px;margin:0 auto}
.faq-card{
  background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius);
  padding:0;overflow:hidden;transition:all .2s;
}
.faq-card[open]{box-shadow:var(--shadow-sm)}
.faq-card summary{
  cursor:pointer;padding:18px 22px;font-weight:700;
  display:flex;justify-content:space-between;align-items:center;gap:12px;
  list-style:none;color:var(--text);font-family:var(--font-body);
}
.faq-card summary::-webkit-details-marker{display:none}
.faq-card summary::after{content:"⌄";color:var(--primary);font-size:22px;transition:transform .25s}
.faq-card[open] summary::after{transform:rotate(180deg)}
.faq-card p{margin:0;padding:0 22px 20px;color:var(--text-soft);line-height:1.7;font-size:14px}

/* ---------- Profile (new tab-based layout) ---------- */
.page-profile .profile-layout{display:grid;grid-template-columns:260px 1fr;gap:24px;align-items:start;margin-top:24px}
.page-profile .profile-side{
  background:var(--bg-card);border:1px solid var(--border);
  border-radius:var(--radius);padding:18px;
  position:sticky;top:96px;height:fit-content;
  z-index:2;
}
.page-profile .profile-side .avatar{
  width:88px;height:88px;border-radius:50%;
  background:var(--primary);color:#fff;
  display:flex;align-items:center;justify-content:center;
  font-size:32px;font-weight:800;font-family:var(--font-head);
  overflow:hidden;
}
.page-profile .pp-tab-btn{
  display:block;width:100%;text-align:left;
  padding:10px 14px;border-radius:10px;
  background:transparent;color:var(--text-soft);
  font-weight:500;font-size:14px;margin-bottom:2px;
  cursor:pointer;border:none;
  transition:all .15s;font-family:inherit;
}
.page-profile .pp-tab-btn:hover{background:var(--bg-warm);color:var(--text)}

.page-profile .dash-card{
  background:var(--bg-card);border:1px solid var(--border);
  border-radius:var(--radius);padding:28px;
  margin-bottom:18px;position:relative;z-index:2;
}
.page-profile .dash-card h3{
  font-size:22px;margin-bottom:6px;color:var(--text);
  font-family:var(--font-head);letter-spacing:-.01em;
}
.page-profile .dash-card .desc{
  color:var(--text-muted);font-size:14px;margin-bottom:18px;line-height:1.6;
}
.page-profile .dash-card .form-input,
.page-profile .dash-card .form-textarea{
  background:var(--bg);
}
html[data-theme="dark"] .page-profile .dash-card .form-input,
html[data-theme="dark"] .page-profile .dash-card .form-textarea{background:var(--bg-warm)}

.page-profile .stat-card{
  background:var(--bg-warm);padding:18px;border-radius:14px;
  text-align:center;border:1px solid transparent;
  transition:all .2s;
}
.page-profile .stat-card:hover{border-color:rgba(231,111,81,.18);transform:translateY(-2px)}
.page-profile .stat-card .num{
  font-size:30px;font-weight:800;color:var(--primary);font-family:var(--font-head);
}
.page-profile .stat-card .lbl{
  font-size:11px;color:var(--text-muted);text-transform:uppercase;letter-spacing:.06em;margin-top:4px;font-weight:600;
}

/* Toggle switch */
.page-profile .switch{position:relative;width:48px;height:28px;display:inline-block;flex:0 0 48px}
.page-profile .switch input{display:none}
.page-profile .switch .slider{
  position:absolute;cursor:pointer;inset:0;background:var(--border);
  border-radius:100px;transition:.2s;
}
.page-profile .switch .slider::before{
  content:"";position:absolute;width:22px;height:22px;left:3px;top:3px;
  background:#fff;border-radius:50%;transition:.2s;
  box-shadow:0 2px 4px rgba(0,0,0,.18);
}
.page-profile .switch input:checked + .slider{background:var(--primary)}
.page-profile .switch input:checked + .slider::before{transform:translateX(20px)}

.page-profile .theme-pick{padding:14px;text-align:left;justify-content:flex-start}
.page-profile .theme-pick.primary{background:var(--primary);color:#fff;border-color:var(--primary)}

@media (max-width:900px){
  .page-profile .profile-layout{grid-template-columns:1fr}
  .page-profile .profile-side{position:static;display:flex;flex-direction:column;gap:4px;flex-wrap:wrap}
  .page-profile .profile-side > div:first-child{width:100%;text-align:left;display:flex;align-items:center;gap:14px;padding-bottom:14px}
  .page-profile .profile-side .avatar{margin:0!important;width:54px;height:54px;font-size:20px}
  .page-profile .stat-row{grid-template-columns:1fr 1fr}
  #accountSecurityCard{grid-template-columns:1fr!important}
}
@media (max-width:560px){
  .page-profile .stat-row{grid-template-columns:1fr}
}

/* ---------- Profile: Ayarlar paneli (tweak-panel benzeri) ---------- */
.page-profile .set-block{
  padding:18px 20px;background:var(--bg-warm);
  border-radius:14px;margin-bottom:14px;
}
.page-profile .set-block-title{
  font-weight:700;color:var(--text);font-size:15px;
  margin-bottom:12px;font-family:var(--font-body);
  display:flex;align-items:center;gap:6px;
}

/* Tema Modu kartları */
.page-profile .theme-mode-grid{
  display:grid;grid-template-columns:1fr 1fr;gap:10px;
}
.page-profile .theme-mode-card{
  padding:16px;border-radius:12px;
  background:var(--bg-card);color:var(--text);
  border:2px solid var(--border);
  text-align:left;cursor:pointer;
  display:flex;flex-direction:column;gap:4px;
  transition:all .2s;font-family:inherit;
}
.page-profile .theme-mode-card strong{font-size:14px;color:var(--text)}
.page-profile .theme-mode-card span{font-size:12px;color:var(--text-muted)}
.page-profile .theme-mode-card:hover{border-color:rgba(231,111,81,.35)}
.page-profile .theme-mode-card.is-active{
  background:var(--primary);border-color:var(--primary);color:#fff;
}
.page-profile .theme-mode-card.is-active strong,
.page-profile .theme-mode-card.is-active span{color:#fff;opacity:.95}

/* Renk paleti */
.page-profile .color-palette{
  display:flex;flex-wrap:wrap;gap:10px;
}
.page-profile .color-pick{
  display:flex;flex-direction:column;align-items:center;gap:6px;
  padding:8px;border-radius:12px;
  background:transparent;border:2px solid transparent;
  cursor:pointer;transition:all .2s;
  font-family:inherit;
}
.page-profile .color-pick .dot{
  width:38px;height:38px;border-radius:50%;display:block;
  box-shadow:0 2px 8px rgba(0,0,0,.15);
}
.page-profile .color-pick em{
  font-style:normal;font-size:11px;font-weight:600;
  color:var(--text-soft);
}
.page-profile .color-pick:hover{background:var(--bg-card)}
.page-profile .color-pick.is-active{background:var(--bg-card);border-color:currentColor}
.page-profile .color-pick.is-active em{color:var(--text)}

/* Set row (toggle/label) */
.page-profile .set-row{
  display:flex;justify-content:space-between;align-items:center;gap:14px;
}
.page-profile .set-row-title{font-weight:700;color:var(--text);font-size:14px}
.page-profile .set-row-hint{font-size:12px;color:var(--text-muted);display:block;margin-top:2px}

/* Animasyon slider */
.page-profile .anim-slider{
  width:100%;accent-color:var(--primary);
  height:6px;
}
.page-profile .anim-labels{
  display:flex;justify-content:space-between;font-size:11px;
  color:var(--text-muted);margin-top:6px;
}
.page-profile .anim-labels span:nth-child(2){font-weight:700;color:var(--primary)}

/* Bildirim listesi */
.page-profile .notify-list{display:flex;flex-direction:column;gap:6px}
.page-profile .notify-row{
  display:flex;justify-content:space-between;align-items:center;gap:14px;
  padding:10px 12px;border-radius:10px;
  background:var(--bg);cursor:pointer;
  transition:background .2s;
}
html[data-theme="dark"] .page-profile .notify-row{background:var(--bg-card)}
.page-profile .notify-row:hover{background:var(--bg-card)}
.page-profile .notify-row span{font-size:13px;color:var(--text-soft)}
.page-profile .notify-row input{accent-color:var(--primary);width:18px;height:18px;cursor:pointer}

/* ---------- Profile: Patilerim kartları ---------- */
.page-profile .pets-grid{
  display:grid;grid-template-columns:1fr 1fr;gap:14px;
  margin-top:14px;
}
.page-profile .pet-card{
  display:flex;gap:16px;align-items:center;
  padding:18px;background:var(--bg-warm);border-radius:14px;
  position:relative;transition:all .2s;
}
.page-profile .pet-card:hover{transform:translateY(-2px);box-shadow:var(--shadow-sm)}
.page-profile .pet-card .pet-avatar{
  width:72px;height:72px;border-radius:18px;
  background:var(--bg-card);
  display:flex;align-items:center;justify-content:center;
  flex-shrink:0;overflow:hidden;
  border:1px solid var(--border);
}
.page-profile .pet-card .pet-avatar svg{width:60px;height:60px}
.page-profile .pet-card .pet-info{min-width:0;flex:1}
.page-profile .pet-card .pet-info strong{display:block;font-size:16px;color:var(--text);font-family:var(--font-head)}
.page-profile .pet-card .pet-info .pet-meta{font-size:13px;color:var(--text-soft);margin-top:2px}
.page-profile .pet-card .pet-info .pet-age{font-size:12px;color:var(--text-muted);margin-top:2px}
.page-profile .pet-card .pet-actions{
  display:flex;flex-direction:column;gap:4px;flex-shrink:0;
}
.page-profile .pet-card .pet-actions button{
  width:30px;height:30px;border-radius:8px;
  background:var(--bg-card);border:1px solid var(--border);
  cursor:pointer;font-size:14px;
  display:flex;align-items:center;justify-content:center;
  color:var(--text-soft);transition:all .15s;
}
.page-profile .pet-card .pet-actions button:hover{background:var(--primary);color:#fff;border-color:var(--primary)}
.page-profile .pet-card .pet-actions .pet-remove:hover{background:#E63946;border-color:#E63946}

.page-profile .pet-add-card{
  display:flex;align-items:center;justify-content:center;gap:8px;
  padding:18px;background:transparent;
  border:2px dashed var(--border);border-radius:14px;
  color:var(--text-muted);font-weight:600;font-size:14px;
  cursor:pointer;transition:all .2s;font-family:inherit;
  min-height:108px;
}
.page-profile .pet-add-card:hover{
  border-color:var(--primary);color:var(--primary);background:rgba(231,111,81,.04);
}

.page-profile .pet-form{
  margin-top:14px;padding:18px;background:var(--bg-warm);
  border-radius:14px;border:1px dashed var(--primary);
}

@media (max-width:560px){
  .page-profile .pets-grid,
  .page-profile .theme-mode-grid{grid-template-columns:1fr}
}

/* ==========================================================
 *  ORDERS — Sipariş listesi (kullanıcı tarafı, orders.html)
 * ========================================================== */

/* Sayfa kabuğu */
.orders-page-hero{
  background:linear-gradient(135deg,var(--bg-warm) 0%,#FFE5D0 100%);
  border-radius:var(--radius-lg);padding:48px 40px;
  position:relative;overflow:hidden;margin:24px 0 28px;
}
html[data-theme="dark"] .orders-page-hero{background:linear-gradient(135deg,#2A1F18 0%,#3A2A20 100%)}
.orders-page-hero__kicker{
  display:inline-flex;align-items:center;gap:8px;padding:8px 16px;
  border-radius:100px;background:rgba(255,255,255,.7);
  color:var(--primary);font-weight:700;font-size:12px;
  margin:0 0 12px;text-transform:uppercase;letter-spacing:.1em;
}
html[data-theme="dark"] .orders-page-hero__kicker{background:rgba(255,255,255,.1)}
.orders-page-hero__title{font-size:42px;margin:8px 0;color:var(--text);font-family:var(--font-head);letter-spacing:-.02em}
.orders-page-hero__lead{font-size:16px;color:var(--text-soft);margin:0;max-width:560px;line-height:1.6}
.orders-page-hero__glow{
  position:absolute;right:-60px;top:-60px;width:240px;height:240px;
  border-radius:50%;background:rgba(255,255,255,.3);pointer-events:none;
}

/* Layout: liste + özet sidebar */
.orders-main-grid{display:grid;grid-template-columns:1fr 320px;gap:24px;align-items:start}
.orders-list{display:flex;flex-direction:column;gap:18px;min-width:0}
.orders-summary-aside{
  position:sticky;top:96px;
  background:transparent;
  border:none;padding:0;
  display:flex;flex-direction:column;gap:14px;
}

/* Özet kartı (sağ sidebar) */
.orders-summary-card{
  background:var(--bg-card);border:1px solid var(--border);
  border-radius:var(--radius);padding:24px;
  position:relative;z-index:2;
}
.orders-summary-card h3{
  margin:0 0 4px;font-size:18px;color:var(--text);
  font-family:var(--font-head);
}
.orders-summary-card__desc{
  margin:0 0 16px;color:var(--text-soft);font-size:13px;line-height:1.6;
}
.orders-summary-card__desc b{color:var(--text)}
.orders-stat-row{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:8px}
.orders-stat{
  background:var(--bg-warm);border-radius:14px;padding:14px;
  display:flex;flex-direction:column;gap:4px;align-items:flex-start;
}
.orders-stat__val{
  font-size:24px;font-weight:800;color:var(--primary);
  font-family:var(--font-head);line-height:1.1;
}
.orders-stat__lbl{
  font-size:11px;color:var(--text-muted);text-transform:uppercase;letter-spacing:.06em;font-weight:600;
}

/* Sipariş kartı */
.order-card{
  background:var(--bg-card);border:1px solid var(--border);
  border-radius:var(--radius);padding:24px;
  position:relative;overflow:hidden;
  transition:all .25s;z-index:2;
}
.order-card:hover{box-shadow:var(--shadow-md);transform:translateY(-2px)}
.order-card__accent{
  position:absolute;top:0;left:0;right:0;height:4px;
  background:linear-gradient(90deg,var(--primary),#F4A261);
}
.order-card__top{
  display:flex;justify-content:space-between;align-items:flex-start;gap:16px;
  margin-bottom:20px;padding-bottom:16px;
  border-bottom:1px dashed var(--border);flex-wrap:wrap;
}
.order-card__label{
  display:block;font-size:11px;color:var(--text-muted);
  text-transform:uppercase;letter-spacing:.06em;font-weight:700;margin-bottom:4px;
}
.order-card__id{
  font-size:20px;color:var(--text);margin:0 0 4px;
  font-family:var(--font-head);letter-spacing:-.01em;
}
.order-card__time{
  font-size:13px;color:var(--text-muted);display:block;
}
.order-card__meta{
  text-align:right;display:flex;flex-direction:column;gap:8px;align-items:flex-end;
}
.order-card__total{
  font-size:22px;font-weight:800;color:var(--accent);
  font-family:var(--font-head);margin:0;
}
.order-status{
  display:inline-flex;align-items:center;gap:6px;
  padding:6px 14px;border-radius:100px;
  font-size:12px;font-weight:700;
  background:rgba(233,196,106,.2);color:#B8860B;
}
.order-status.is-pending{background:rgba(233,196,106,.2);color:#B8860B}
.order-status.is-shipping{background:rgba(136,176,191,.18);color:#3F7585}
.order-status.is-delivered{background:rgba(42,157,143,.14);color:var(--accent)}
.order-status.is-cancelled{background:rgba(231,111,81,.12);color:var(--primary)}

/* Stepper */
.order-stepper{
  display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin:20px 0;
  position:relative;
}
.order-step{
  display:flex;flex-direction:column;align-items:center;gap:8px;
  position:relative;text-align:center;
}
.order-step::after{
  content:"";position:absolute;top:16px;left:60%;right:-40%;
  height:2px;background:var(--border);z-index:0;
}
.order-step:last-child::after{display:none}
.order-step.is-done::after{background:var(--accent)}
.order-step__dot{
  width:34px;height:34px;border-radius:50%;
  background:var(--border);color:#fff;
  display:flex;align-items:center;justify-content:center;
  font-weight:700;font-size:14px;
  position:relative;z-index:1;
  transition:all .25s;
}
.order-step.is-done .order-step__dot{background:var(--accent)}
.order-step.is-current .order-step__dot{
  background:var(--primary);
  box-shadow:0 0 0 0 rgba(231,111,81,.5);
  animation:pulseRing 2s infinite;
}
.order-step.is-done .order-step__dot::after{content:"✓"}
.order-step.is-done .order-step__dot{font-size:0}
.order-step.is-done .order-step__dot::after{font-size:14px}
.order-step__text{display:flex;flex-direction:column;gap:2px;min-width:0}
.order-step__text strong{
  font-size:12px;color:var(--text-muted);font-weight:600;
  font-family:var(--font-body);
}
.order-step.is-done .order-step__text strong,
.order-step.is-current .order-step__text strong{color:var(--text);font-weight:700}
.order-step__text span{font-size:11px;color:var(--text-muted)}
.order-step.is-done .order-step__text span{color:var(--accent)}
.order-step.is-current .order-step__text span{color:var(--primary);font-weight:600}

/* Kart gövdesi (ürünler + adres yan yana) */
.order-card__body{
  display:grid;grid-template-columns:1.4fr 1fr;gap:24px;margin-top:8px;
}
.order-block-title{
  font-size:14px;color:var(--text);
  text-transform:uppercase;letter-spacing:.05em;font-weight:700;
  margin:0 0 10px;font-family:var(--font-body);
}
.order-lines{display:flex;flex-direction:column;gap:8px}
.order-line{
  display:grid;grid-template-columns:54px 1fr auto;gap:12px;align-items:center;
  padding:10px 14px;background:var(--bg-warm);border-radius:12px;
}
.order-line__img{
  width:54px;height:54px;border-radius:10px;background:#fff;padding:4px;
  object-fit:contain;border:1px solid var(--border);
}
html[data-theme="dark"] .order-line__img{background:var(--bg-card)}
.order-line__info{min-width:0}
.order-line__name{
  font-size:14px;color:var(--text);font-weight:600;line-height:1.3;
  display:-webkit-box;-webkit-line-clamp:2;line-clamp:2;-webkit-box-orient:vertical;
  overflow:hidden;text-overflow:ellipsis;
}
.order-line__qty{font-size:12px;color:var(--text-muted);margin-top:2px}
.order-line__price{
  font-size:15px;font-weight:800;color:var(--accent);
  font-family:var(--font-head);text-align:right;flex-shrink:0;
}

/* Adres / ödeme / kargo kutuları */
.order-detail-box{
  background:var(--bg-warm);border-radius:12px;padding:14px 16px;
  color:var(--text-soft);font-size:13.5px;line-height:1.55;
  border:1px solid transparent;
}
.order-detail-box b{color:var(--text);font-weight:700}
.order-detail-box .small{font-size:12px;color:var(--text-muted)}

/* === FATURA KUTUSU (öne çıkan) === */
.order-invoice-box{
  background:linear-gradient(135deg,rgba(42,157,143,.08),rgba(42,157,143,.02));
  border:1.5px solid rgba(42,157,143,.22);
  border-radius:14px;padding:16px;
  position:relative;
}
html[data-theme="dark"] .order-invoice-box{
  background:linear-gradient(135deg,rgba(79,207,190,.1),rgba(79,207,190,.03));
}
.order-invoice-head{
  display:flex;align-items:center;gap:12px;margin-bottom:12px;
}
.order-invoice-ico{
  width:42px;height:42px;border-radius:12px;
  background:var(--accent);color:#fff;
  display:flex;align-items:center;justify-content:center;
  font-size:20px;flex-shrink:0;
}
.order-invoice-head strong{
  display:block;font-size:14px;color:var(--text);
  font-family:var(--font-head);
}
.order-invoice-head .small{
  display:block;font-size:12px;color:var(--text-muted);margin-top:1px;
}
.order-invoice-list{display:flex;flex-direction:column;gap:8px}
.order-invoice-item{
  display:flex;justify-content:space-between;align-items:center;gap:12px;
  padding:12px 14px;background:var(--bg-card);
  border:1px solid var(--border);border-radius:10px;
  text-decoration:none;color:var(--text);
  transition:all .2s;cursor:pointer;
}
.order-invoice-item:hover{
  border-color:var(--accent);background:var(--bg);
  transform:translateX(2px);
}
.order-invoice-item.is-disabled{opacity:.6;cursor:not-allowed}
.order-invoice-item__info{min-width:0;flex:1}
.order-invoice-item__info strong{
  display:block;font-size:14px;color:var(--text);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.order-invoice-item__info span{
  display:block;font-size:11px;color:var(--text-muted);margin-top:1px;
}
.order-invoice-dl{
  display:inline-flex;align-items:center;gap:6px;
  padding:8px 14px;border-radius:10px;
  background:var(--accent);color:#fff;
  font-size:12px;font-weight:700;flex-shrink:0;
  transition:all .15s;
}
.order-invoice-item:hover .order-invoice-dl{background:#1f7a6e}

/* Boş durum */
.orders-empty{
  text-align:center;padding:60px 24px;background:var(--bg-card);
  border:2px dashed var(--border);border-radius:var(--radius);
}
.orders-empty__icon{
  font-size:64px;margin-bottom:16px;display:inline-block;
  animation:float 3s ease-in-out infinite;
}
.orders-empty h3{
  font-size:22px;margin-bottom:8px;color:var(--text);
  font-family:var(--font-head);
}
.orders-empty p{color:var(--text-muted);margin-bottom:20px;line-height:1.5}

/* Responsive */
@media (max-width:1100px){
  .order-card__body{grid-template-columns:1fr}
}
@media (max-width:900px){
  .orders-main-grid{grid-template-columns:1fr}
  .orders-summary-aside{position:static}
  .orders-page-hero__title{font-size:32px}
  .orders-page-hero{padding:36px 24px}
  .order-stepper{grid-template-columns:1fr 1fr;gap:14px}
  .order-step::after{display:none}
  .order-card__top{flex-direction:column;align-items:flex-start}
  .order-card__meta{text-align:left;align-items:flex-start}
}
@media (max-width:560px){
  .order-card{padding:18px}
  .order-line{grid-template-columns:44px 1fr auto;gap:10px}
  .order-line__img{width:44px;height:44px}
}

/* ==========================================================
 *  ORDERS — Yorum Yap akışı (teslim edilen siparişler)
 * ========================================================== */

.order-reviews-block{
  background:linear-gradient(135deg,rgba(233,196,106,.12),rgba(244,166,184,.08));
  border:1.5px dashed rgba(233,196,106,.45);
  border-radius:14px;padding:18px;
}
html[data-theme="dark"] .order-reviews-block{
  background:linear-gradient(135deg,rgba(233,196,106,.06),rgba(244,166,184,.04));
}
.order-reviews-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:12px;flex-wrap:wrap;gap:8px}
.order-reviews-head strong{display:block;font-size:15px;color:var(--text);font-family:var(--font-head)}
.order-reviews-head .small{display:block;font-size:12px;color:var(--text-muted);margin-top:2px}

.order-review-list{display:flex;flex-direction:column;gap:8px}
.order-review-item{
  display:grid;grid-template-columns:48px 1fr auto;gap:12px;align-items:center;
  padding:12px 14px;background:var(--bg-card);border:1px solid var(--border);
  border-radius:12px;transition:all .2s;
}
.order-review-item:hover{box-shadow:var(--shadow-sm);border-color:rgba(231,111,81,.25)}
.order-review-item.is-done{
  background:rgba(42,157,143,.06);
  border-color:rgba(42,157,143,.22);
}
.order-review-item__img{
  width:48px;height:48px;border-radius:10px;background:#fff;padding:4px;
  object-fit:contain;border:1px solid var(--border);
}
html[data-theme="dark"] .order-review-item__img{background:var(--bg-warm)}
.order-review-item__info{min-width:0}
.order-review-item__info strong{display:block;font-size:14px;color:var(--text);font-weight:600;line-height:1.3;
  display:-webkit-box;-webkit-line-clamp:1;line-clamp:1;-webkit-box-orient:vertical;overflow:hidden;text-overflow:ellipsis}
.order-review-item__info .small{display:block;font-size:12px;color:var(--text-muted);margin-top:2px}
.order-review-item.is-done .order-review-item__info .small{color:var(--accent);font-weight:600}
.order-review-item .btn{flex-shrink:0;padding:8px 14px;font-size:13px;border-radius:10px}
.order-review-item .btn.ghost{background:transparent;border:1.5px solid var(--border);color:var(--text-soft)}
.order-review-item .btn.ghost:hover{border-color:var(--accent);color:var(--accent)}

/* Yorum modalı */
.order-review-modal{
  position:fixed;inset:0;z-index:2500;display:none;
}
.order-review-modal.is-open{display:block;animation:fadeIn .2s ease}
.order-review-modal__backdrop{
  position:absolute;inset:0;background:rgba(44,24,16,.6);backdrop-filter:blur(6px);
}
.order-review-modal__card{
  position:relative;max-width:520px;width:calc(100% - 32px);
  margin:5vh auto 0;background:var(--bg-card);border-radius:var(--radius-lg);
  box-shadow:var(--shadow-lg);overflow:hidden;
  border:1px solid var(--border);
  animation:slideUp .3s ease;
}
.order-review-modal__x{
  position:absolute;top:14px;right:14px;
  width:36px;height:36px;border-radius:50%;
  background:var(--bg-warm);color:var(--text);
  border:none;cursor:pointer;font-size:22px;font-weight:300;
  display:flex;align-items:center;justify-content:center;
  transition:all .15s;
}
.order-review-modal__x:hover{background:var(--primary);color:#fff}
.order-review-modal__head{
  padding:28px 28px 20px;
  background:linear-gradient(135deg,var(--bg-warm) 0%,#FFE5D0 100%);
  border-bottom:1px solid var(--border);
}
html[data-theme="dark"] .order-review-modal__head{background:linear-gradient(135deg,#2A1F18,#3A2A20)}
.order-review-modal__eyebrow{
  display:inline-block;font-size:11px;font-weight:800;
  color:var(--primary);letter-spacing:.1em;text-transform:uppercase;
}
.order-review-modal__head h3{
  font-size:22px;color:var(--text);margin:6px 0 4px;
  font-family:var(--font-head);letter-spacing:-.01em;
}
.order-review-modal__head .small{font-size:13px;color:var(--text-soft);margin:0}
.order-review-modal__body{padding:24px 28px}
.order-review-modal__foot{
  padding:16px 28px;border-top:1px solid var(--border);
  display:flex;justify-content:flex-end;gap:10px;flex-wrap:wrap;
  background:var(--bg-warm);
}

.order-review-label{
  display:block;font-size:13px;color:var(--text-soft);
  font-weight:600;margin:0 0 10px;
}
.order-review-modal__body .form-textarea{
  width:100%;min-height:100px;
}
.order-review-count{
  text-align:right;font-size:11px;color:var(--text-muted);margin-top:6px;
}

.order-review-stars{
  display:flex;gap:8px;margin-bottom:18px;
}
.order-review-stars button{
  width:42px;height:42px;border:none;background:transparent;
  color:var(--border);font-size:32px;cursor:pointer;
  transition:all .15s;line-height:1;padding:0;
  display:flex;align-items:center;justify-content:center;
}
.order-review-stars button:hover,
.order-review-stars button.is-hover,
.order-review-stars button.is-active{
  color:var(--gold);transform:scale(1.1);
}
.order-review-stars button.is-active{color:var(--gold)}

@media (max-width:600px){
  .order-review-item{grid-template-columns:42px 1fr;grid-template-rows:auto auto}
  .order-review-item .btn{grid-column:1 / -1;width:100%;justify-content:center}
  .order-review-modal__head{padding:22px}
  .order-review-modal__body{padding:18px 22px}
  .order-review-modal__foot{padding:14px 22px}
}

/* ---------- Kargo takip kutusu ---------- */
.order-shipping-box{
  background:linear-gradient(135deg,rgba(88,176,191,.1),rgba(88,176,191,.04));
  border:1.5px solid rgba(88,176,191,.28);
  border-radius:14px;padding:16px;
}
html[data-theme="dark"] .order-shipping-box{
  background:linear-gradient(135deg,rgba(88,176,191,.08),rgba(88,176,191,.03));
}
.order-shipping-head{
  display:flex;align-items:center;gap:12px;margin-bottom:12px;
}
.order-shipping-ico{
  width:42px;height:42px;border-radius:12px;
  background:#88B0BF;color:#fff;
  display:flex;align-items:center;justify-content:center;font-size:22px;flex-shrink:0;
}
.order-shipping-head strong{display:block;font-size:14px;color:var(--text);font-family:var(--font-head)}
.order-shipping-head .small{display:block;font-size:12px;color:var(--text-muted);margin-top:1px}
.order-shipping-track{
  display:flex;justify-content:space-between;align-items:center;gap:10px;
  padding:10px 14px;background:var(--bg-card);
  border:1px solid var(--border);border-radius:10px;margin-bottom:10px;
}
.order-shipping-track .small{font-size:11px;color:var(--text-muted);text-transform:uppercase;letter-spacing:.05em;font-weight:700}
.order-shipping-track strong{font-size:14px;color:var(--text);font-family:var(--font-head);letter-spacing:.02em;
  word-break:break-all;text-align:right;
}
.order-shipping-cta{
  width:100%;justify-content:center;font-size:14px;
  background:#88B0BF;border-color:#88B0BF;
}
.order-shipping-cta:hover{background:#5A8A99;border-color:#5A8A99}

/* ==========================================================
 *  BUTTON CONTRAST — okunabilirlik garantisi
 *  Özellikle gradient kutular içindeki butonlar
 * ========================================================== */

/* Promo gradient kutu içindeki ghost button — yeşil arka, beyaz text+border */
.promo .btn.ghost,
.promo-card .btn.ghost{
  background:#fff !important;
  color:var(--accent) !important;
  border:2px solid #fff !important;
  font-weight:800;
}
.promo .btn.ghost:hover,
.promo-card .btn.ghost:hover{
  background:transparent !important;
  color:#fff !important;
  border-color:#fff !important;
}

/* About hedefler gradient — daima beyaz text + içeride accent renkli BG */
.stats-grid article strong,
.stats-grid article span{
  color:#fff !important;
}

/* Dark modda ghost button — boş arka plan + okunabilir text */
html[data-theme="dark"] .btn.ghost{
  background:rgba(255,255,255,.08) !important;
  color:var(--text) !important;
  border-color:rgba(255,255,255,.18) !important;
}
html[data-theme="dark"] .btn.ghost:hover{
  background:rgba(255,255,255,.16) !important;
  border-color:rgba(255,255,255,.28) !important;
}

/* Stats hero gradient — text her zaman beyaz */
html[data-theme="dark"] .stats-grid article strong,
html[data-theme="dark"] .stats-grid article span,
html[data-theme="dark"] .stats-grid h2,
html[data-theme="dark"] .stats-grid p,
html[data-theme="dark"] .stats-grid div{
  color:#fff !important;
}

/* Promo (renkli gradient kutu) — h2 / p / button her durumda okunabilir */
.promo h2,
.promo p,
.promo span,
.promo-card h2,
.promo-card p{
  color:#fff !important;
}
.promo .btn,
.promo-card .btn{
  font-weight:800;
}

/* Newsletter gradient kalkmış; ama eski .btn[type=submit] beyaz-bg fallback */
.btn[style*="background:rgba(255,255,255"]{
  color:var(--text) !important;
  font-weight:800 !important;
}

/* General: btn primary text her durumda beyaz */
.btn.primary,
.btn.primary *{color:#fff !important}

/* General: btn DANGER */
.btn.danger{background:#E63946;color:#fff !important;border-color:#E63946}
.btn.danger:hover{background:#c12c38;border-color:#c12c38}

/* Pet recommendation section başlık dark uyumu */
html[data-theme="dark"] .pet-recommend-section h2{color:var(--text) !important}

/* Notification item hover */
.notif-item{cursor:pointer}
.notif-item:hover{transform:translateY(-2px);box-shadow:var(--shadow-sm)}

/* ==========================================================
 *  SALE PRICE — net iki satır gösterim
 *  Üstte üstü çizili eski fiyat (küçük gri)
 *  Altta indirimli fiyat (büyük accent)
 * ========================================================== */
.price.price--sale{
  display:flex;flex-direction:column;align-items:flex-start;gap:0;
  line-height:1.1;
}
.price.price--sale .old-price{
  order:1;
  font-size:13px;color:#9A8478;text-decoration:line-through;
  text-decoration-color:#E63946;text-decoration-thickness:2px;
  font-weight:500;margin-bottom:2px;
}
.price.price--sale .price-current{
  order:2;
  font-size:22px;font-weight:800;color:var(--accent);
  font-family:var(--font-head);
}
.price.price--big.price--sale .price-current{font-size:32px}
.price.price--big.price--sale .old-price{font-size:16px}

/* Product detail için */
.detail-price-block .price.price--sale{margin-top:6px}
.detail-price-block .price.price--sale .price-current{font-size:32px}
.detail-price-block .price.price--sale .old-price{font-size:18px;text-decoration-thickness:2px}

/* Catalog card için */
.catalog-price-row .price.price--sale .price-current{font-size:22px}
.catalog-price-row .price.price--sale .old-price{font-size:12px}

/* Favoriler */
.favorite-price.price--sale{flex-direction:column;align-items:flex-start;gap:0}
.favorite-price.price--sale .old-price{
  font-size:12px;color:#9A8478;text-decoration:line-through;
  text-decoration-color:#E63946;text-decoration-thickness:2px;
  font-weight:500;margin-bottom:2px;
}
.favorite-price.price--sale .price-current{
  font-size:18px;color:var(--accent);font-weight:800;font-family:var(--font-head);
}

html[data-theme="dark"] .price.price--sale .old-price,
html[data-theme="dark"] .favorite-price.price--sale .old-price{
  color:var(--text-muted);
}

/* ==========================================================
 *  PAYMENT BAND (iyzico footer logo bandı)
 * ========================================================== */
.site-footer__payments{
  display:flex;flex-direction:column;align-items:center;gap:10px;
  padding:24px 0;margin:18px 0;
  border-top:1px solid rgba(255,255,255,.1);
  border-bottom:1px solid rgba(255,255,255,.1);
}
.payment-band{
  background:#fff;border-radius:14px;padding:14px 22px;
  display:inline-flex;align-items:center;justify-content:center;
  box-shadow:0 4px 12px rgba(0,0,0,.18);
  max-width:100%;
}
.payment-band img{
  height:38px;width:auto;display:block;max-width:100%;
}
.payment-band-note{
  font-size:12px;color:rgba(255,255,255,.6);
}

/* ==========================================================
 *  DARK MODE — KAPSAMLI ÖRTÜŞTÜRME
 *  Inline color/background style attribute'ları + uygulamada
 *  unutulan dark fallback'leri burada düzeltiyoruz.
 * ========================================================== */
html[data-theme="dark"]{
  /* ---- Base body ---- */
  color-scheme: dark;
}

/* Tüm gradient backgroundlu hero kartları (inline 'background:linear-gradient' kullanıldı) */
html[data-theme="dark"] [style*="linear-gradient(135deg, var(--bg-warm)"],
html[data-theme="dark"] [style*="linear-gradient(135deg,var(--bg-warm)"]{
  background:linear-gradient(135deg,#2A1F18 0%,#3A2A20 50%,#4A3528 100%)!important;
}
html[data-theme="dark"] [style*="background:rgba(255,255,255,.95)"],
html[data-theme="dark"] [style*="background:rgba(255,255,255,0.95)"]{
  background:var(--bg-card)!important;
  color:var(--text)!important;
}
html[data-theme="dark"] [style*="background:rgba(255,255,255,.7)"]{
  background:rgba(255,255,255,.08)!important;
}

/* Tüm formal inputlar (inline style ile yazılanlar) */
html[data-theme="dark"] input.form-input,
html[data-theme="dark"] input.auth-input,
html[data-theme="dark"] input.input,
html[data-theme="dark"] input.profile-input,
html[data-theme="dark"] textarea.form-textarea,
html[data-theme="dark"] textarea.input,
html[data-theme="dark"] textarea.profile-textarea,
html[data-theme="dark"] select.form-input,
html[data-theme="dark"] select.input,
html[data-theme="dark"] select.select,
html[data-theme="dark"] select.profile-select,
html[data-theme="dark"] input[type="text"],
html[data-theme="dark"] input[type="email"],
html[data-theme="dark"] input[type="password"],
html[data-theme="dark"] input[type="tel"],
html[data-theme="dark"] input[type="number"],
html[data-theme="dark"] input[type="search"],
html[data-theme="dark"] input[type="date"],
html[data-theme="dark"] input[type="url"]{
  background:var(--bg-warm)!important;
  color:var(--text)!important;
  border-color:var(--border)!important;
}
html[data-theme="dark"] input.form-input:focus,
html[data-theme="dark"] input.auth-input:focus,
html[data-theme="dark"] input.input:focus,
html[data-theme="dark"] textarea.form-textarea:focus,
html[data-theme="dark"] textarea.input:focus,
html[data-theme="dark"] select.form-input:focus,
html[data-theme="dark"] select.input:focus{
  background:var(--bg-card)!important;
  border-color:var(--primary)!important;
}
html[data-theme="dark"] input::placeholder,
html[data-theme="dark"] textarea::placeholder{
  color:var(--text-muted)!important;
  opacity:.7;
}
html[data-theme="dark"] select option{
  background:var(--bg-card);
  color:var(--text);
}

/* Tüm beyaz/açık arkaplanlı admin alanları */
html[data-theme="dark"] .ap-body{
  --bg:#0F0A07;
  --card:#1A120E;
  --text:#FFF3E6;
  --muted:#8B7565;
  --border:#2E211A;
  background:var(--bg)!important;
  color:var(--text);
}
html[data-theme="dark"] .ap-panel,
html[data-theme="dark"] .ap-sidebar,
html[data-theme="dark"] .ap-topbar,
html[data-theme="dark"] .msg-detail-card,
html[data-theme="dark"] .coupon-card,
html[data-theme="dark"] .inbox-tab{
  background:var(--bg-card)!important;
  color:var(--text);
}

/* Hardcoded #fff backgroundlar (inline veya panel) */
html[data-theme="dark"] [style*="background:#fff"]:not(.payment-band):not(.cursor-paw),
html[data-theme="dark"] [style*="background:#FFFFFF"]:not(.payment-band):not(.cursor-paw),
html[data-theme="dark"] [style*="background:white"]:not(.payment-band):not(.cursor-paw){
  background:var(--bg-card)!important;
  color:var(--text)!important;
}

/* Hardcoded text colors (kart içlerinde sayfa hardcoded yazılmış) */
html[data-theme="dark"] [style*="color:#334155"],
html[data-theme="dark"] [style*="color:#475569"],
html[data-theme="dark"] [style*="color:#64748b"],
html[data-theme="dark"] [style*="color:#64748B"]{
  color:var(--text-soft)!important;
}
html[data-theme="dark"] [style*="color:#132238"],
html[data-theme="dark"] [style*="color:#14213d"],
html[data-theme="dark"] [style*="color:#0f172a"]{
  color:var(--text)!important;
}

/* Modal arkaplanları */
html[data-theme="dark"] .lb-card,
html[data-theme="dark"] .order-review-modal__card,
html[data-theme="dark"] .account-modal-card{
  background:var(--bg-card);
  color:var(--text);
  border-color:var(--border);
}
html[data-theme="dark"] .order-review-modal__head,
html[data-theme="dark"] .order-review-modal__foot{
  background:var(--bg-warm);
}
html[data-theme="dark"] .order-review-modal__x{
  background:var(--bg-warm);
  color:var(--text);
}

/* QA / Review / Hero kartları */
html[data-theme="dark"] .vitem,
html[data-theme="dark"] .review,
html[data-theme="dark"] .order-detail-box,
html[data-theme="dark"] .order-shipping-track,
html[data-theme="dark"] .stat-card,
html[data-theme="dark"] .feature-card,
html[data-theme="dark"] .testi-card,
html[data-theme="dark"] .testimonial-card,
html[data-theme="dark"] .pet-card,
html[data-theme="dark"] .filter-sidebar,
html[data-theme="dark"] .filter-panel,
html[data-theme="dark"] .panel,
html[data-theme="dark"] .product-card,
html[data-theme="dark"] .catalog-card,
html[data-theme="dark"] .favorite-page-card{
  background:var(--bg-card)!important;
}
html[data-theme="dark"] .vitem,
html[data-theme="dark"] .review,
html[data-theme="dark"] .order-detail-box,
html[data-theme="dark"] .pet-card{
  background:var(--bg-warm)!important;
}

/* Hero bubble'lar (büyük gradient kartların içinde) */
html[data-theme="dark"] .hero-bubble{
  background:var(--bg-card)!important;
}

/* Banner / page-hero */
html[data-theme="dark"] .banner,
html[data-theme="dark"] .page-hero{
  background:linear-gradient(135deg,#2A1F18 0%,#3A2A20 100%)!important;
}
html[data-theme="dark"] .banner h1,
html[data-theme="dark"] .page-hero h1,
html[data-theme="dark"] .banner p,
html[data-theme="dark"] .page-hero p{
  color:var(--text)!important;
}
html[data-theme="dark"] .page-hero p,
html[data-theme="dark"] .banner p{
  color:var(--text-soft)!important;
}
html[data-theme="dark"] .eyebrow,
html[data-theme="dark"] .hero-eyebrow,
html[data-theme="dark"] .section-eyebrow{
  background:rgba(255,255,255,.08)!important;
  color:var(--primary)!important;
}

/* Tüm sayfa hero'lar (orders / about / favorites vb.) */
html[data-theme="dark"] .orders-page-hero,
html[data-theme="dark"] .legal-hero,
html[data-theme="dark"] .catalog-hero,
html[data-theme="dark"] .favorites-hero,
html[data-theme="dark"] .contact-hero,
html[data-theme="dark"] .about-hero{
  background:linear-gradient(135deg,#2A1F18 0%,#3A2A20 100%)!important;
}
html[data-theme="dark"] .orders-page-hero__kicker,
html[data-theme="dark"] .auth-kicker{
  background:rgba(255,255,255,.1)!important;
  color:var(--primary)!important;
}

/* Footer */
html[data-theme="dark"] .footer,
html[data-theme="dark"] .site-footer{
  background:#050302!important;
}

/* Toast */
html[data-theme="dark"] .toast{
  background:var(--bg-card)!important;
  color:var(--text)!important;
  border:1px solid var(--border);
}

/* Tablo */
html[data-theme="dark"] .table th,
html[data-theme="dark"] .table td{
  color:var(--text-soft)!important;
  border-color:var(--border)!important;
}
html[data-theme="dark"] .table th{color:var(--text)!important}

/* Faq cards */
html[data-theme="dark"] .faq-card{
  background:var(--bg-card)!important;
}

/* Order Review block + items */
html[data-theme="dark"] .order-reviews-block{
  background:linear-gradient(135deg,rgba(233,196,106,.06),rgba(244,166,184,.04))!important;
}
html[data-theme="dark"] .order-review-item{
  background:var(--bg-warm)!important;
  border-color:var(--border)!important;
}
html[data-theme="dark"] .order-review-item.is-done{
  background:rgba(42,157,143,.08)!important;
}

/* Coupon box (checkout) */
html[data-theme="dark"] .coupon-box{
  background:linear-gradient(135deg,rgba(231,111,81,.1),rgba(244,166,184,.04))!important;
}

/* Detail page meta cards */
html[data-theme="dark"] .detail-meta-card{
  background:var(--bg-warm)!important;
}
html[data-theme="dark"] .detail-meta-card .value{
  color:var(--text)!important;
}

/* QTY control */
html[data-theme="dark"] .qty,
html[data-theme="dark"] .qty-control,
html[data-theme="dark"] .detail-qty-row .qty-control{
  background:var(--bg-warm)!important;
}
html[data-theme="dark"] .qty .btn,
html[data-theme="dark"] .qty-control button{
  background:var(--bg-card)!important;
  color:var(--text)!important;
}

/* Cart item */
html[data-theme="dark"] .cart-item{
  background:var(--bg-card)!important;
}
html[data-theme="dark"] .cart-item-img,
html[data-theme="dark"] .order-line__img{
  background:var(--bg-warm)!important;
}

/* Order shipping & invoice boxes */
html[data-theme="dark"] .order-shipping-box{
  background:linear-gradient(135deg,rgba(88,176,191,.08),rgba(88,176,191,.03))!important;
}
html[data-theme="dark"] .order-shipping-track{
  background:var(--bg-warm)!important;
}
html[data-theme="dark"] .order-invoice-box{
  background:linear-gradient(135deg,rgba(79,207,190,.1),rgba(79,207,190,.03))!important;
}
html[data-theme="dark"] .order-invoice-item{
  background:var(--bg-warm)!important;
  border-color:var(--border)!important;
}

/* Newsletter / Promo (turuncu gradient'lar dark'ta da güzel ama text ayarı) */
html[data-theme="dark"] .promo{
  background:linear-gradient(135deg,#1F7A6E 0%, #155A52 100%)!important;
}
html[data-theme="dark"] .stats-grid{
  background:linear-gradient(135deg,var(--primary-dark),#A04A36)!important;
}

/* Cat cards (category) */
html[data-theme="dark"] .cat-card{
  filter:saturate(1.15) brightness(.9);
}

/* Theme picker'da seçim renkleri */
html[data-theme="dark"] .theme-mode-card{
  background:var(--bg-warm);
  border-color:var(--border);
}
html[data-theme="dark"] .theme-mode-card.is-active{
  background:var(--primary);
  color:#fff;
}

/* Switch */
html[data-theme="dark"] .switch .slider{
  background:#3a2a20;
}

/* Order summary card sticky */
html[data-theme="dark"] .orders-summary-card,
html[data-theme="dark"] .cart-summary{
  background:var(--bg-card)!important;
}
html[data-theme="dark"] .orders-stat{
  background:var(--bg-warm)!important;
}

/* About — değer kartları, mission/vision kartları */
html[data-theme="dark"] .panel-soft,
html[data-theme="dark"] .value-grid article,
html[data-theme="dark"] .dash-card,
html[data-theme="dark"] .legal-card,
html[data-theme="dark"] .legal-section,
html[data-theme="dark"] .contact-info-card,
html[data-theme="dark"] .contact-form-card,
html[data-theme="dark"] .contact-channel{
  background:var(--bg-card)!important;
  color:var(--text);
}
html[data-theme="dark"] .legal-note{
  background:var(--bg-warm)!important;
  color:var(--text-soft)!important;
}
html[data-theme="dark"] .legal-card p,
html[data-theme="dark"] .legal-card li,
html[data-theme="dark"] .legal-section p,
html[data-theme="dark"] .legal-section li{
  color:var(--text-soft)!important;
}
html[data-theme="dark"] .contact-channel{
  background:var(--bg-warm)!important;
}
html[data-theme="dark"] .contact-channel:hover{
  background:var(--bg-card)!important;
}
html[data-theme="dark"] .contact-channel-icon,
html[data-theme="dark"] .feature-icon{
  background:var(--bg-card)!important;
}
html[data-theme="dark"] .contact-list > div{
  background:var(--bg-warm)!important;
}

/* Settings sayfası ayarlar bölümleri */
html[data-theme="dark"] .set-block{
  background:var(--bg-warm)!important;
}
html[data-theme="dark"] .notify-row{
  background:var(--bg-card)!important;
}
html[data-theme="dark"] .notify-row:hover{
  background:var(--bg-warm)!important;
}
html[data-theme="dark"] .color-pick.is-active{
  background:var(--bg-card)!important;
}

/* Header / topbar */
html[data-theme="dark"] .topbar{
  background:rgba(15,10,7,.92)!important;
  border-color:var(--border)!important;
}
html[data-theme="dark"] .nav-actions .icon-btn{
  background:var(--bg-card);
  border-color:var(--border);
}
html[data-theme="dark"] .nav-actions .icon-btn:hover{
  background:var(--bg-warm);
}

/* nav-links */
html[data-theme="dark"] .nav-links a{color:var(--text-soft)}
html[data-theme="dark"] .nav-links a:hover{background:var(--bg-warm);color:var(--text)}
html[data-theme="dark"] .nav-links a.active{background:var(--primary);color:#fff}

/* Empty states */
html[data-theme="dark"] .empty-state,
html[data-theme="dark"] .orders-empty,
html[data-theme="dark"] .favorites-empty{
  background:var(--bg-card)!important;
  border-color:var(--border)!important;
}

/* Detail image wrap (gradient) */
html[data-theme="dark"] .detail-img-wrap,
html[data-theme="dark"] .gallery{
  background:linear-gradient(135deg,#2A1F18,#3A2A20)!important;
}
html[data-theme="dark"] .gallery .g-main{
  background-color:var(--bg-card)!important;
}
html[data-theme="dark"] .gallery .thumb{
  background-color:var(--bg-card)!important;
}
html[data-theme="dark"] .g-btn,
html[data-theme="dark"] .hs-btn,
html[data-theme="dark"] .lb-x,
html[data-theme="dark"] .lb-nav{
  background:var(--bg-card)!important;
  color:var(--text)!important;
}

/* Profile hero */
html[data-theme="dark"] .page-profile .profile-hero{
  background:linear-gradient(135deg,#2A1F18 0%,#3A2A20 50%,#4A3528 100%)!important;
}

/* mini-product (testimonials) */
html[data-theme="dark"] .mini-product{
  background:var(--bg-warm)!important;
}
html[data-theme="dark"] .mini-product:hover{
  background:var(--bg-card)!important;
}
html[data-theme="dark"] .mini-product img{
  background:var(--bg-card)!important;
}

/* Favorite media bg */
html[data-theme="dark"] .favorite-page-card__media{
  background:var(--bg-warm)!important;
}
html[data-theme="dark"] .favorite-page-card__media img{
  filter:brightness(.95);
}

/* All catalog card medias */
html[data-theme="dark"] .product-img,
html[data-theme="dark"] .catalog-card__media,
html[data-theme="dark"] .card .img{
  background:var(--bg-warm)!important;
}

/* Form labels in dark — visible */
html[data-theme="dark"] label,
html[data-theme="dark"] .form-group label{
  color:var(--text-soft);
}

/* Counter badges */
html[data-theme="dark"] .char-count,
html[data-theme="dark"] .counter,
html[data-theme="dark"] .order-review-count{
  color:var(--text-muted)!important;
}

/* Dropdown / select arrow için browser default beyaz background sorunu */
html[data-theme="dark"] select{
  color-scheme:dark;
}

/* Hover'lar */
html[data-theme="dark"] .product-card:hover,
html[data-theme="dark"] .catalog-card:hover{
  background:var(--bg-warm)!important;
}

/* Modal arkaplan */
html[data-theme="dark"] .order-review-modal__backdrop,
html[data-theme="dark"] #deleteAccountModal,
html[data-theme="dark"] .account-modal,
html[data-theme="dark"] .lb-backdrop{
  background:rgba(0,0,0,.7);
}

/* Pet add card */
html[data-theme="dark"] .pet-add-card{
  border-color:var(--border)!important;
  color:var(--text-muted)!important;
}
html[data-theme="dark"] .pet-add-card:hover{
  background:rgba(231,111,81,.08)!important;
}

/* Order step text */
html[data-theme="dark"] .order-step__text strong,
html[data-theme="dark"] .order-step.is-done .order-step__text strong,
html[data-theme="dark"] .order-step.is-current .order-step__text strong{
  color:var(--text);
}

/* Hero promo content (newsletter) */
html[data-theme="dark"] [style*="background:linear-gradient(135deg,var(--primary)"]{
  background:linear-gradient(135deg,var(--primary-dark),#A04A36)!important;
}

/* Cart summary stick top */
html[data-theme="dark"] .checkout-summary-panel{
  background:var(--bg-card)!important;
}

/* Newsletter form input (white forced) */
html[data-theme="dark"] #newsletterEmail{
  background:var(--bg-warm)!important;
  color:var(--text)!important;
}

/* Hardcoded background-image url (logo container vs.) */
html[data-theme="dark"] .brand .logo{
  background-color:rgba(255,255,255,.04);
}

/* Sale/badge'lar */
html[data-theme="dark"] .product-badge.new,
html[data-theme="dark"] .rank-badge{
  color:#1A120E!important;
}

/* Reviews carousel cards (hcard) */
html[data-theme="dark"] .hcard{
  background:var(--bg-card)!important;
}
html[data-theme="dark"] .hcard .htext{
  color:var(--text-soft)!important;
}

/* Order shipping CTA */
html[data-theme="dark"] .order-shipping-cta{
  background:#3F7585!important;
  border-color:#3F7585!important;
}
html[data-theme="dark"] .order-shipping-cta:hover{
  background:#2A5A6C!important;
}

/* Theme-aware scrollbar */
html[data-theme="dark"]::-webkit-scrollbar-thumb,
html[data-theme="dark"] *::-webkit-scrollbar-thumb{
  background:#3A2A20;
}

/* ==========================================================
 *  HIGH-CONTRAST: button text okunabilirliği
 * ========================================================== */
html[data-theme="dark"] .btn.primary{color:#fff!important}
html[data-theme="dark"] .btn.ghost{color:var(--text)!important}
html[data-theme="dark"] .btn-outline{color:var(--text)!important}

/* Tüm gradient hero kart h1'leri açık kalsın */
html[data-theme="dark"] .hero-card h1,
html[data-theme="dark"] .hero-copy h1,
html[data-theme="dark"] .page-hero h1{
  color:var(--text)!important;
}
html[data-theme="dark"] .hero-card h1 .hl,
html[data-theme="dark"] .hero-copy h1 .hl{
  color:var(--primary)!important;
}
html[data-theme="dark"] .hero p,
html[data-theme="dark"] .hero-card p,
html[data-theme="dark"] .hero-copy p{
  color:var(--text-soft)!important;
}

/* ==========================================================
 *  STICKY MOBILE CART BAR  —  ürün detayda mobilde alttan çıkar
 * ========================================================== */
.mobile-cart-bar{
  display:none;
  position:fixed;left:0;right:0;bottom:0;
  background:var(--bg-card);
  border-top:1px solid var(--border);
  padding:10px 14px;
  z-index:99;
  box-shadow:0 -4px 18px rgba(0,0,0,.12);
  animation:slideUp .35s ease;
}
.mobile-cart-bar__inner{
  display:grid;grid-template-columns:auto 1fr;gap:14px;align-items:center;
  max-width:600px;margin:0 auto;
}
.mobile-cart-bar__price{
  font-family:var(--font-head);font-weight:800;font-size:22px;
  color:var(--accent);line-height:1;
}
.mobile-cart-bar__old{
  font-size:13px;color:var(--text-muted);text-decoration:line-through;
  font-weight:500;display:block;margin-top:2px;
}
.mobile-cart-bar__cta{
  display:flex;align-items:center;justify-content:center;gap:8px;
  padding:14px;background:var(--primary);color:#fff;
  border-radius:14px;border:none;font-size:15px;font-weight:800;
  cursor:pointer;transition:background .2s;
}
.mobile-cart-bar__cta:hover{background:var(--primary-dark)}
.mobile-cart-bar__cta:disabled{background:var(--text-muted);cursor:not-allowed}
@media (max-width:760px){
  body.has-mobile-cart-bar{padding-bottom:80px}
  body.has-mobile-cart-bar .mobile-cart-bar{display:block}
}

/* ==========================================================
 *  SKELETON LOADING  —  yüklenirken iskelet kutular
 * ========================================================== */
@keyframes skeletonShimmer{
  0%   { background-position:-200% 0; }
  100% { background-position:200% 0; }
}
.skeleton{
  background:linear-gradient(90deg,
    var(--bg-warm) 0%,
    rgba(255,255,255,.08) 50%,
    var(--bg-warm) 100%);
  background-size:200% 100%;
  animation:skeletonShimmer 1.5s ease-in-out infinite;
  border-radius:8px;
  display:block;
}
html[data-theme="dark"] .skeleton{
  background:linear-gradient(90deg,
    var(--bg-warm) 0%,
    rgba(255,255,255,.04) 50%,
    var(--bg-warm) 100%);
  background-size:200% 100%;
}
.skeleton-card{
  background:var(--bg-card);border:1px solid var(--border);
  border-radius:var(--radius);padding:14px;
  display:flex;flex-direction:column;gap:10px;
}
.skeleton-line{height:14px;border-radius:6px}
.skeleton-line--short{width:50%}
.skeleton-line--medium{width:75%}
.skeleton-image{aspect-ratio:1;border-radius:12px;width:100%}
.skeleton-circle{width:44px;height:44px;border-radius:50%}

/* ==========================================================
 *  SEARCH OVERLAY  —  header'da büyük arama modalı
 * ========================================================== */
.nav-search-btn{
  width:44px;height:44px;border-radius:14px;
  background:var(--bg-card);border:1px solid var(--border);
  color:var(--text);font-size:20px;
  display:inline-flex;align-items:center;justify-content:center;
  cursor:pointer;transition:all .2s;
}
.nav-search-btn:hover{background:var(--bg-warm);transform:translateY(-2px);box-shadow:var(--shadow-sm)}

.search-overlay{
  position:fixed;inset:0;z-index:2000;
  background:rgba(44,24,16,.55);backdrop-filter:blur(8px);
  display:none;
  animation:fadeIn .2s ease;
}
.search-overlay.is-open{display:block}
html[data-theme="dark"] .search-overlay{background:rgba(0,0,0,.6)}
.search-overlay__panel{
  background:var(--bg);max-width:760px;margin:60px auto 0;
  border-radius:var(--radius-lg);overflow:hidden;
  box-shadow:var(--shadow-lg);
  animation:slideUp .3s ease;
  max-height:80vh;display:flex;flex-direction:column;
}
.search-overlay__head{
  padding:18px 22px;background:var(--bg-card);
  border-bottom:1px solid var(--border);
  display:flex;align-items:center;gap:12px;
}
.search-overlay__head svg,
.search-overlay__head .ico{font-size:24px;color:var(--text-muted);flex-shrink:0}
.search-overlay__input{
  flex:1;border:none;background:transparent;
  font-size:20px;color:var(--text);outline:none;
  font-family:var(--font-body);
  padding:8px 0;
}
.search-overlay__input::placeholder{color:var(--text-muted)}
.search-overlay__close{
  width:36px;height:36px;border-radius:50%;
  background:var(--bg-warm);color:var(--text);
  display:flex;align-items:center;justify-content:center;
  border:none;cursor:pointer;font-size:18px;font-weight:700;
}
.search-overlay__close:hover{background:var(--primary);color:#fff}

.search-overlay__body{
  flex:1;overflow:auto;padding:18px 22px;
}
.search-section{margin-bottom:18px}
.search-section h4{
  font-size:11px;font-weight:800;color:var(--text-muted);
  letter-spacing:.1em;text-transform:uppercase;
  margin:0 0 10px;font-family:var(--font-body);
}
.search-tags{display:flex;flex-wrap:wrap;gap:8px}
.search-tag{
  display:inline-flex;align-items:center;gap:6px;
  padding:8px 14px;background:var(--bg-card);
  border:1px solid var(--border);border-radius:100px;
  font-size:13px;color:var(--text);
  cursor:pointer;transition:all .15s;text-decoration:none;
}
.search-tag:hover{background:var(--primary);color:#fff;border-color:var(--primary)}
.search-results{display:flex;flex-direction:column;gap:8px}
.search-result-item{
  display:grid;grid-template-columns:48px 1fr auto;gap:12px;align-items:center;
  padding:10px 12px;background:var(--bg-card);
  border:1px solid transparent;border-radius:12px;
  cursor:pointer;text-decoration:none;color:var(--text);
  transition:all .15s;
}
.search-result-item:hover{border-color:var(--primary);background:var(--bg-warm)}
.search-result-item__img{
  width:48px;height:48px;border-radius:10px;
  background:var(--bg-warm);padding:4px;object-fit:contain;
  border:1px solid var(--border);
}
.search-result-item__info{min-width:0}
.search-result-item__info strong{
  display:block;font-size:14px;color:var(--text);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.search-result-item__info .small{font-size:12px;color:var(--text-muted)}
.search-result-item__price{
  font-family:var(--font-head);font-weight:800;
  color:var(--accent);font-size:15px;flex-shrink:0;
}
.search-empty{
  text-align:center;padding:40px 20px;color:var(--text-muted);
}
.search-empty .em{font-size:48px;margin-bottom:10px;display:block}

/* Keyboard hint */
.search-kbd{
  display:inline-block;padding:2px 8px;
  background:var(--bg-warm);border:1px solid var(--border);
  border-radius:6px;font-family:monospace;font-size:11px;
  color:var(--text-soft);font-weight:700;
}

@media (max-width:600px){
  .search-overlay__panel{
    margin:0;border-radius:0;height:100vh;max-height:100vh;
  }
  .search-overlay__head{padding:14px}
  .search-overlay__input{font-size:18px}
}

/* ---------- Selection ---------- */
::selection{background:var(--primary);color:#fff}

/* Scrollbar */
::-webkit-scrollbar{width:10px;height:10px}
::-webkit-scrollbar-thumb{background:var(--border);border-radius:999px}
::-webkit-scrollbar-thumb:hover{background:var(--text-muted)}
::-webkit-scrollbar-track{background:transparent}