:root{
  --primary:#FE5A01; --secondary:#FF8F00; --white:#FFFFFF;
  --bg:#FFF9F5; --bg-2:#FFF3E8; --card:#FFFFFF;
  --text:#1F2937; --text-2:#6B7280; --muted:#9CA3AF;
  --border:#F2D6C2; --divider:#F5E5D8;
  --success:#16A34A; --warning:#F59E0B; --error:#DC2626; --info:#0EA5E9;
  --link:#FE5A01; --link-hover:#D94D00;
  --radius:14px; --radius-sm:10px;
  --shadow-sm:0 1px 2px rgba(31,41,55,.06),0 1px 3px rgba(31,41,55,.05);
  --shadow:0 8px 24px rgba(254,90,1,.10),0 2px 6px rgba(31,41,55,.06);
  --grad:linear-gradient(135deg,#FE5A01 0%,#FF8F00 100%);
}
*{box-sizing:border-box}
body{font-family:'Inter',system-ui,sans-serif;color:var(--text);background:var(--bg);margin:0;line-height:1.6}
h1,h2,h3,h4,h5,.brand-word,.footer-brand{font-family:'Sora',sans-serif;letter-spacing:-.02em}
a{color:var(--link);text-decoration:none}
a:hover{color:var(--link-hover)}
.container{width:100%;max-width:1200px;margin-inline:auto;padding-inline:16px}
.brand-accent{color:var(--primary)}
.text-muted-2{color:var(--text-2)}

/* Buttons */
.btn-brand{background:var(--grad);color:#fff;border:none;border-radius:var(--radius-sm);
  padding:.6rem 1.3rem;font-weight:600;box-shadow:var(--shadow-sm);transition:transform .15s,box-shadow .15s,filter .15s}
.btn-brand:hover{color:#fff;transform:translateY(-2px);box-shadow:var(--shadow);filter:brightness(1.03)}
.btn-outline-brand{border:1.5px solid var(--primary);color:var(--primary);background:#fff;border-radius:var(--radius-sm);
  padding:.55rem 1.2rem;font-weight:600;transition:all .15s}
.btn-outline-brand:hover{background:var(--bg-2);color:var(--link-hover)}

/* Header */
.topbar{background:var(--text);color:#fff;font-size:.82rem;padding:.4rem 0}
.main-nav{background:#fff;box-shadow:var(--shadow-sm);padding-block:.6rem}
.brand-word{font-weight:800;font-size:1.4rem;color:var(--text)}
.nav-link{color:var(--text);font-weight:500}
.nav-link.active,.nav-link:hover{color:var(--primary)}
.nav-icon{font-size:1.1rem}
.search-form{position:relative;flex:1;max-width:460px}
.search-form input{border:1px solid var(--border);border-radius:999px;padding:.55rem 2.6rem .55rem 1.1rem;background:var(--bg)}
.search-form button{position:absolute;right:6px;top:50%;transform:translateY(-50%);background:var(--grad);
  border:none;color:#fff;width:34px;height:34px;border-radius:50%;display:grid;place-items:center}
.cart-count{background:var(--primary);color:#fff;border-radius:999px;font-size:.7rem;padding:.05rem .4rem}

/* Cards / sections */
.section{padding-block:3rem}
.section-title{font-size:1.6rem;font-weight:700;margin-bottom:.25rem}
.card-product{background:var(--card);border:1px solid var(--divider);border-radius:var(--radius);
  overflow:hidden;transition:transform .18s,box-shadow .18s;height:100%}
.card-product:hover{transform:translateY(-4px);box-shadow:var(--shadow)}
.card-product .thumb{aspect-ratio:1;object-fit:cover;width:100%;background:var(--bg-2)}
.card-product .body{padding:.9rem 1rem}
.price{color:var(--primary);font-weight:700;font-family:'Sora',sans-serif}
.price-old{color:var(--muted);text-decoration:line-through;font-size:.85rem;margin-left:.4rem}
.badge-deal{background:var(--error);color:#fff;border-radius:999px;font-size:.7rem;padding:.15rem .55rem}

/* Hero */
.hero{background:var(--grad);border-radius:0 0 32px 32px;color:#fff;padding:4rem 0}
.hero h1{font-size:clamp(2rem,5vw,3.4rem);font-weight:800}
.hero .lead{opacity:.95}

/* Category pills */
.cat-tile{background:#fff;border:1px solid var(--divider);border-radius:var(--radius);padding:1.2rem;text-align:center;
  transition:transform .15s,box-shadow .15s;display:block;color:var(--text)}
.cat-tile:hover{transform:translateY(-3px);box-shadow:var(--shadow);color:var(--primary)}

/* Footer */
.site-footer{background:#fff;border-top:1px solid var(--divider);margin-top:3rem;padding:3rem 0 1.5rem}
.footer-brand{font-weight:800}
.footer-links{list-style:none;padding:0;margin:0}
.footer-links a{color:var(--text-2);display:block;padding:.2rem 0}
.footer-links a:hover{color:var(--primary)}
.footer-divider{border-color:var(--divider);margin:2rem 0 1rem}

/* WhatsApp float */
.whatsapp-float{position:fixed;right:20px;bottom:20px;width:56px;height:56px;border-radius:50%;
  background:#25D366;color:#fff;display:grid;place-items:center;box-shadow:var(--shadow);z-index:999;transition:transform .15s}
.whatsapp-float:hover{transform:scale(1.08);color:#fff}

/* Accessibility */
:focus-visible{outline:3px solid var(--secondary);outline-offset:2px}
@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}

/* ---- Product detail (Phase 5) ---- */
.product-gallery .main-image-wrap{border:1px solid var(--divider);border-radius:var(--radius);overflow:hidden;background:#fff;aspect-ratio:1;display:grid;place-items:center}
.product-gallery .main-image{width:100%;height:100%;object-fit:contain;transition:transform .3s;cursor:zoom-in}
.product-gallery .main-image:hover{transform:scale(1.6)}
.thumb-strip{display:flex;gap:.5rem;flex-wrap:wrap}
.gallery-thumb{width:64px;height:64px;object-fit:cover;border-radius:8px;border:2px solid transparent;cursor:pointer}
.gallery-thumb.active,.gallery-thumb:hover{border-color:var(--primary)}
.variant-chip{border:1.5px solid var(--border);border-radius:999px;padding:.3rem .8rem;font-size:.85rem;cursor:pointer;transition:all .15s}
.variant-chip:hover,.variant-chip.selected{border-color:var(--primary);color:var(--primary);background:var(--bg-2)}
.price-block .price.h3{font-size:1.9rem}
.nav-tabs .nav-link{color:var(--text-2);font-weight:600}
.nav-tabs .nav-link.active{color:var(--primary);border-color:var(--divider) var(--divider) #fff}

/* Catalog filters */
.catalog-filters .form-check-label{font-size:.9rem}

/* Live search dropdown */
.search-form{position:relative}
.search-suggest{position:absolute;top:calc(100% + 6px);left:0;right:0;background:#fff;border:1px solid var(--divider);border-radius:12px;box-shadow:var(--shadow);z-index:50;overflow:hidden;display:none}
.search-suggest.show{display:block}
.search-suggest a{display:flex;align-items:center;gap:.7rem;padding:.6rem .9rem;color:var(--text)}
.search-suggest a:hover{background:var(--bg-2)}
.search-suggest img{width:40px;height:40px;object-fit:cover;border-radius:8px}
.search-suggest .s-price{margin-left:auto;color:var(--primary);font-weight:600}

/* ---- Account area (Phase 8) ---- */
.account-nav nav a{padding:.5rem .25rem;color:var(--text-2);font-weight:500;border-radius:8px}
.account-nav nav a:hover{color:var(--primary)}
.account-nav nav a.active{color:var(--primary);font-weight:600}
.stat-card .num{font-size:1.8rem}

/* ---- Hero carousel + why-choose-us (Phase 9) ---- */
.hero-carousel{border-radius:0 0 24px 24px;overflow:hidden}
.hero-slide{min-height:440px;background-size:cover;background-position:center;display:flex;align-items:center;position:relative}
.hero-slide::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(31,41,55,.55),rgba(31,41,55,.05))}
.hero-slide-content{position:relative;z-index:2;color:#fff;max-width:600px}
.hero-slide-content h1{font-size:clamp(1.8rem,4.5vw,3rem);font-weight:800;font-family:'Sora',sans-serif}
.why-tile{padding:1.2rem}
.why-icon{font-size:2rem;margin-bottom:.4rem}
.why-tile h6{font-weight:700}

/* ============================================================
   ENHANCEMENT LAYER — refined warm-orange identity
   Appends to and refines the base above. Safe to remove as a block.
   ============================================================ */
:root{
  --ink:#161B22; --ink-soft:#37414F;
  --line:#EFE2D6; --line-soft:#F6ECE2;
  --ring:rgba(254,90,1,.35);
  --shadow-xs:0 1px 2px rgba(31,41,55,.05);
  --shadow-md:0 4px 12px rgba(31,41,55,.06),0 12px 28px rgba(254,90,1,.07);
  --shadow-lg:0 10px 20px rgba(31,41,55,.08),0 24px 48px rgba(254,90,1,.10);
  --ease:cubic-bezier(.22,.61,.36,1);
  --sp:1.25rem;
}
html{scroll-behavior:smooth}
body{-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;background:
  radial-gradient(1200px 480px at 85% -8%, #FFF1E6 0%, rgba(255,241,230,0) 60%),
  var(--bg);}
::selection{background:var(--secondary);color:#fff}

/* Type rhythm */
h1{font-weight:800;letter-spacing:-.025em;line-height:1.1}
h2{font-weight:800;letter-spacing:-.02em}
h3,h4,h5{font-weight:700;letter-spacing:-.015em}
.section{padding-block:clamp(2.5rem,6vw,4.5rem)}
.section-title{font-size:clamp(1.5rem,3.5vw,2rem);position:relative}
.eyebrow{font-family:'Sora',sans-serif;font-size:.72rem;font-weight:700;letter-spacing:.14em;
  text-transform:uppercase;color:var(--primary);display:inline-block;margin-bottom:.5rem}

/* Buttons — tactile, with press state */
.btn-brand,.btn-outline-brand{transition:transform .18s var(--ease),box-shadow .18s var(--ease),filter .18s var(--ease),background .18s}
.btn-brand{box-shadow:0 2px 6px rgba(254,90,1,.22),inset 0 1px 0 rgba(255,255,255,.18);letter-spacing:.01em}
.btn-brand:hover{transform:translateY(-2px);box-shadow:0 8px 20px rgba(254,90,1,.30),inset 0 1px 0 rgba(255,255,255,.22)}
.btn-brand:active{transform:translateY(0);box-shadow:0 2px 6px rgba(254,90,1,.22)}
.btn-outline-brand:hover{transform:translateY(-1px)}
.btn-lg{padding:.8rem 1.7rem;font-size:1.02rem;border-radius:12px}

/* Header — sticky, subtle blur, refined */
.site-header{position:sticky;top:0;z-index:1030}
.main-nav{backdrop-filter:saturate(1.4) blur(8px);background:rgba(255,255,255,.86);
  border-bottom:1px solid var(--line-soft);box-shadow:0 1px 0 rgba(31,41,55,.03)}
.brand-word{font-size:1.45rem;transition:opacity .15s}
.brand-word:hover{opacity:.85}
.nav-link{position:relative;padding-inline:.15rem}
.nav-link::after{content:"";position:absolute;left:0;right:0;bottom:-4px;height:2px;
  background:var(--grad);border-radius:2px;transform:scaleX(0);transform-origin:left;transition:transform .22s var(--ease)}
.nav-link:hover::after,.nav-link.active::after{transform:scaleX(1)}
.search-form input{transition:box-shadow .18s,border-color .18s;background:#fff}
.search-form input:focus{border-color:var(--primary);box-shadow:0 0 0 4px var(--ring);outline:none}

/* Product cards — depth + image zoom */
.card-product{border-color:var(--line);box-shadow:var(--shadow-xs);position:relative;isolation:isolate}
.card-product::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.6)}
.card-product .thumb{transition:transform .5s var(--ease)}
.card-product:hover{transform:translateY(-6px);box-shadow:var(--shadow-lg);border-color:var(--border)}
.card-product:hover .thumb{transform:scale(1.06)}
.card-product .body{padding:1rem 1.05rem 1.15rem}
.card-product .p-name{font-weight:600;color:var(--ink);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;min-height:2.6em;line-height:1.3}
.card-product .p-name:hover{color:var(--primary)}
.price{font-size:1.12rem}
.badge-deal{box-shadow:0 4px 10px rgba(220,38,38,.28);letter-spacing:.02em;font-weight:700}

/* Category tiles */
.cat-tile{border-color:var(--line);box-shadow:var(--shadow-xs)}
.cat-tile:hover{border-color:var(--border);box-shadow:var(--shadow-md)}

/* Hero — layered warmth + subtle grain */
.hero,.hero-carousel{position:relative}
.hero{background:var(--grad);box-shadow:inset 0 -1px 0 rgba(0,0,0,.05)}
.hero::before,.hero-slide::before{content:"";position:absolute;inset:0;opacity:.5;pointer-events:none;
  background-image:radial-gradient(rgba(255,255,255,.14) 1px,transparent 1px);background-size:18px 18px}
.hero .lead{font-size:clamp(1rem,2vw,1.18rem);max-width:38ch}

/* Forms — consistent, focused */
.form-control,.form-select{border-color:var(--line);border-radius:10px;padding:.6rem .85rem;transition:border-color .15s,box-shadow .15s}
.form-control:focus,.form-select:focus{border-color:var(--primary);box-shadow:0 0 0 4px var(--ring)}
.form-label{font-weight:600;font-size:.9rem;color:var(--ink-soft);margin-bottom:.35rem}
.input-group .btn-brand{border-radius:0 10px 10px 0}

/* Badges & pills refinements */
.badge{font-weight:600;letter-spacing:.01em;padding:.4em .7em;border-radius:8px}

/* Generic cards used across pages (bootstrap .card) */
.card{border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow-xs);transition:box-shadow .2s}

/* Footer polish */
.site-footer{background:linear-gradient(180deg,#fff 0%,#FFFCF9 100%);border-top:1px solid var(--line)}
.site-footer h6{font-family:'Sora',sans-serif;font-weight:700;font-size:.8rem;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-soft)}
.footer-links a{transition:color .15s,transform .15s;width:fit-content}
.footer-links a:hover{transform:translateX(3px)}
.newsletter-form .form-control{border-radius:10px 0 0 10px}

/* WhatsApp float — gentle attention pulse */
.whatsapp-float{box-shadow:0 6px 18px rgba(37,211,102,.45)}
.whatsapp-float::before{content:"";position:absolute;inset:0;border-radius:50%;box-shadow:0 0 0 0 rgba(37,211,102,.5);animation:wa-pulse 2.4s var(--ease) infinite}
@keyframes wa-pulse{0%{box-shadow:0 0 0 0 rgba(37,211,102,.45)}70%{box-shadow:0 0 0 16px rgba(37,211,102,0)}100%{box-shadow:0 0 0 0 rgba(37,211,102,0)}}

/* Empty states */
.empty-state{text-align:center;padding:3.5rem 1rem;color:var(--text-2)}
.empty-state .icon{font-size:2.6rem;margin-bottom:.6rem;opacity:.6}

/* Breadcrumbs */
.breadcrumb{font-size:.85rem}
.breadcrumb a{color:var(--text-2)}
.breadcrumb a:hover{color:var(--primary)}

/* Subtle entrance for product grids */
@media (prefers-reduced-motion:no-preference){
  .card-product{animation:card-in .5s var(--ease) both}
}
@keyframes card-in{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}

/* Reduced-motion guard already in base; reinforce for new animations */
@media (prefers-reduced-motion:reduce){
  .whatsapp-float::before,.card-product{animation:none!important}
  html{scroll-behavior:auto}
}