/* ============================================================
   HACEMO DESIGN SYSTEM
   Product-photo-first e-commerce — clean, modern, real store
   ============================================================ */

:root {
  /* Brand */
  --coral: #E8553A;
  --coral-light: #F0785F;
  --coral-dark: #C9412A;
  --slate: #1E2A3A;
  --slate-light: #2D3E52;
  --cream: #FAF6F1;
  --sage: #5A8C6F;
  --sage-light: #6FA383;

  /* Neutrals */
  --white: #FFFFFF;
  --gray-50: #F9FAFB;
  --gray-100: #F3F4F6;
  --gray-200: #E5E7EB;
  --gray-300: #D1D5DB;
  --gray-400: #9CA3AF;
  --gray-500: #6B7280;
  --gray-600: #4B5563;
  --gray-700: #374151;
  --gray-800: #1F2937;
  --gray-900: #111827;

  /* Semantic */
  --success: #059669;
  --warning: #D97706;
  --error: #DC2626;
  --info: #2563EB;

  /* Typography */
  --font: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --fs-xs: 0.75rem;
  --fs-sm: 0.875rem;
  --fs-base: 1rem;
  --fs-lg: 1.125rem;
  --fs-xl: 1.25rem;
  --fs-2xl: 1.5rem;
  --fs-3xl: 1.875rem;
  --fs-4xl: 2.25rem;
  --fs-5xl: 3rem;
  --fs-6xl: 3.75rem;

  /* Spacing */
  --s1: 0.25rem; --s2: 0.5rem; --s3: 0.75rem; --s4: 1rem;
  --s5: 1.25rem; --s6: 1.5rem; --s8: 2rem; --s10: 2.5rem;
  --s12: 3rem; --s16: 4rem; --s20: 5rem; --s24: 6rem;

  /* Layout */
  --max-w: 1280px;
  --max-w-narrow: 960px;
  --nav-h: 72px;

  /* Borders */
  --r-sm: 6px;
  --r-md: 8px;
  --r-lg: 12px;
  --r-xl: 16px;
  --r-full: 9999px;

  /* Shadows */
  --sh-sm: 0 1px 2px rgba(30,42,58,.05);
  --sh-md: 0 4px 12px rgba(30,42,58,.08);
  --sh-lg: 0 8px 24px rgba(30,42,58,.1);
  --sh-xl: 0 16px 48px rgba(30,42,58,.12);

  /* Transitions */
  --t-fast: 150ms ease;
  --t-base: 250ms ease;
  --t-slow: 400ms ease;
}

/* --- Reset --- */
*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}
html{font-size:16px;scroll-behavior:smooth;-webkit-font-smoothing:antialiased}
body{font-family:var(--font);font-size:var(--fs-base);line-height:1.6;color:var(--slate);background:var(--white)}
img{max-width:100%;height:auto;display:block}
a{color:inherit;text-decoration:none}
button{font-family:inherit;cursor:pointer;border:none;background:none}
input,textarea,select{font-family:inherit;font-size:inherit}
ul,ol{list-style:none}

/* --- Typography --- */
h1,h2,h3,h4,h5,h6{font-weight:700;line-height:1.15;color:var(--slate)}
h1{font-size:var(--fs-5xl);letter-spacing:-.025em}
h2{font-size:var(--fs-4xl);letter-spacing:-.015em}
h3{font-size:var(--fs-2xl)}
h4{font-size:var(--fs-xl)}
h5{font-size:var(--fs-lg)}

/* --- Layout --- */
.container{width:100%;max-width:var(--max-w);margin:0 auto;padding:0 var(--s6)}
.container--narrow{max-width:var(--max-w-narrow)}
.section{padding:var(--s20) 0}
.section--sm{padding:var(--s12) 0}
.section--cream{background:var(--cream)}
.section--slate{background:var(--slate);color:var(--white)}
.section--slate h2,.section--slate h3,.section--slate h4{color:var(--white)}

/* Grid */
.grid{display:grid;gap:var(--s6)}
.grid-2{grid-template-columns:repeat(2,1fr)}
.grid-3{grid-template-columns:repeat(3,1fr)}
.grid-4{grid-template-columns:repeat(4,1fr)}

/* --- Navigation --- */
.nav{position:sticky;top:0;z-index:100;background:var(--white);border-bottom:1px solid var(--gray-200);height:var(--nav-h)}
.nav__inner{display:flex;align-items:center;justify-content:space-between;height:100%;max-width:var(--max-w);margin:0 auto;padding:0 var(--s6)}
.nav__logo{display:flex;align-items:center;gap:var(--s3)}
.nav__logo img{height:40px;width:auto}
.nav__logo-text{font-size:var(--fs-xl);font-weight:700;color:var(--slate);letter-spacing:-.01em}
.nav__links{display:flex;align-items:center;gap:var(--s8)}
.nav__link{font-size:var(--fs-sm);font-weight:500;color:var(--gray-600);transition:color var(--t-fast);position:relative}
.nav__link:hover,.nav__link--active{color:var(--slate)}
.nav__link--active::after{content:'';position:absolute;bottom:-4px;left:0;right:0;height:2px;background:var(--coral);border-radius:1px}
.nav__actions{display:flex;align-items:center;gap:var(--s4)}
.nav__cart{position:relative;display:flex;align-items:center;justify-content:center;width:40px;height:40px;border-radius:var(--r-md);transition:background var(--t-fast)}
.nav__cart:hover{background:var(--gray-100)}
.nav__cart svg{width:22px;height:22px;stroke:var(--slate)}
.nav__cart-count{position:absolute;top:2px;right:2px;width:18px;height:18px;background:var(--coral);color:var(--white);font-size:11px;font-weight:700;border-radius:var(--r-full);display:flex;align-items:center;justify-content:center;line-height:1}
.nav__hamburger{display:none;width:40px;height:40px;align-items:center;justify-content:center;border-radius:var(--r-md)}
.nav__hamburger svg{width:24px;height:24px;stroke:var(--slate)}
.nav__lang{display:flex;align-items:center;justify-content:center;width:36px;height:36px;border-radius:var(--r-full);border:1.5px solid var(--gray-300);font-size:var(--fs-xs);font-weight:700;color:var(--slate);transition:all var(--t-fast);letter-spacing:.02em;cursor:pointer;background:none}
.nav__lang:hover{border-color:var(--coral);color:var(--coral)}

/* Mobile menu */
.mobile-menu{display:none;position:fixed;top:var(--nav-h);left:0;right:0;bottom:0;background:var(--white);z-index:99;padding:var(--s6);flex-direction:column;gap:var(--s2)}
.mobile-menu.is-open{display:flex}
.mobile-menu a{display:block;padding:var(--s4);font-size:var(--fs-lg);font-weight:500;color:var(--slate);border-radius:var(--r-md);transition:background var(--t-fast)}
.mobile-menu a:hover{background:var(--gray-50)}

/* --- Buttons --- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--s2);padding:var(--s3) var(--s6);font-size:var(--fs-sm);font-weight:600;border-radius:var(--r-md);transition:all var(--t-fast);white-space:nowrap;line-height:1.4}
.btn svg{width:18px;height:18px;flex-shrink:0}
.btn--primary{background:var(--coral);color:var(--white)}
.btn--primary:hover{background:var(--coral-dark);transform:translateY(-1px);box-shadow:var(--sh-md)}
.btn--secondary{background:var(--slate);color:var(--white)}
.btn--secondary:hover{background:var(--slate-light);transform:translateY(-1px)}
.btn--outline{border:1.5px solid var(--gray-300);color:var(--slate);background:var(--white)}
.btn--outline:hover{border-color:var(--slate);background:var(--gray-50)}
.btn--ghost{color:var(--coral);background:transparent}
.btn--ghost:hover{background:rgba(232,85,58,.06)}
.btn--lg{padding:var(--s4) var(--s8);font-size:var(--fs-base);border-radius:var(--r-lg)}
.btn--sm{padding:var(--s2) var(--s4);font-size:var(--fs-xs)}
.btn--full{width:100%}
.btn--whatsapp{background:#25D366;color:var(--white)}
.btn--whatsapp:hover{background:#1DA851;transform:translateY(-1px)}

/* --- Product Card --- */
.product-card{background:var(--white);border-radius:var(--r-lg);overflow:hidden;border:1px solid var(--gray-200);transition:all var(--t-base);cursor:pointer;position:relative}
.product-card:hover{border-color:var(--gray-300);box-shadow:var(--sh-lg);transform:translateY(-4px)}
.product-card__img{aspect-ratio:1/1;background:var(--gray-50);display:flex;align-items:center;justify-content:center;overflow:hidden;position:relative;border-bottom:1px solid var(--gray-100)}
.product-card__img img{width:100%;height:100%;object-fit:cover}
.product-card__placeholder{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:var(--s2);width:100%;height:100%;color:var(--gray-300)}
.product-card__placeholder svg{width:32px;height:32px;stroke:var(--gray-300)}
.product-card__placeholder span{font-size:var(--fs-xs);color:var(--gray-400);font-weight:500}
.product-card__badge{position:absolute;top:var(--s3);left:var(--s3);padding:var(--s1) var(--s3);background:var(--coral);color:var(--white);font-size:11px;font-weight:700;border-radius:var(--r-full);letter-spacing:.02em;text-transform:uppercase}
.product-card__badge--sage{background:var(--sage)}
.product-card__body{padding:var(--s4)}
.product-card__cat{font-size:var(--fs-xs);color:var(--gray-500);text-transform:uppercase;letter-spacing:.05em;font-weight:600;margin-bottom:var(--s1)}
.product-card__title{font-size:var(--fs-sm);font-weight:600;color:var(--slate);margin-bottom:var(--s2);line-height:1.4;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.product-card__price-row{display:flex;align-items:center;justify-content:space-between}
.product-card__price{font-size:var(--fs-lg);font-weight:700;color:var(--slate)}
.product-card__price--from::before{content:'From ';font-size:var(--fs-xs);font-weight:500;color:var(--gray-500)}
.product-card__add{width:36px;height:36px;border-radius:var(--r-full);background:var(--coral);color:var(--white);display:flex;align-items:center;justify-content:center;transition:all var(--t-fast);flex-shrink:0}
.product-card__add:hover{background:var(--coral-dark);transform:scale(1.1)}
.product-card__add svg{width:18px;height:18px}

/* --- Category Card --- */
.cat-card{position:relative;border-radius:var(--r-lg);overflow:hidden;aspect-ratio:4/3;cursor:pointer;border:1px solid var(--gray-200);background:var(--gray-100);transition:all var(--t-base)}
.cat-card:hover{transform:translateY(-4px);box-shadow:var(--sh-lg)}
.cat-card__overlay{position:absolute;inset:0;background:linear-gradient(to top,rgba(30,42,58,.75) 0%,transparent 55%);display:flex;flex-direction:column;justify-content:flex-end;padding:var(--s6)}
.cat-card__name{color:var(--white);font-size:var(--fs-lg);font-weight:700}
.cat-card__count{color:rgba(255,255,255,.7);font-size:var(--fs-sm);margin-top:var(--s1)}

/* --- Build Feed (Instagram grid) --- */
.build-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:4px}
.build-grid__item{aspect-ratio:1/1;overflow:hidden;border-radius:var(--r-sm);position:relative;cursor:pointer;background:var(--gray-100)}
.build-grid__item img{width:100%;height:100%;object-fit:cover;transition:transform var(--t-base)}
.build-grid__item:hover img{transform:scale(1.05)}
.build-grid__hover{position:absolute;inset:0;background:rgba(30,42,58,.45);display:flex;align-items:center;justify-content:center;opacity:0;transition:opacity var(--t-base)}
.build-grid__item:hover .build-grid__hover{opacity:1}

/* --- Steps --- */
.step{text-align:center;padding:var(--s8) var(--s4)}
.step__num{display:inline-flex;align-items:center;justify-content:center;width:48px;height:48px;border-radius:var(--r-full);background:var(--cream);color:var(--coral);font-size:var(--fs-xl);font-weight:700;margin-bottom:var(--s4)}
.step__title{font-size:var(--fs-lg);font-weight:700;margin-bottom:var(--s2)}
.step__desc{font-size:var(--fs-sm);color:var(--gray-500);line-height:1.6}

/* --- Testimonials --- */
.testimonial{background:var(--white);border:1px solid var(--gray-200);border-radius:var(--r-lg);padding:var(--s6)}
.testimonial__stars{display:flex;gap:2px;margin-bottom:var(--s3)}
.testimonial__stars svg{width:16px;height:16px;fill:#FBBF24}
.testimonial__text{font-size:var(--fs-sm);line-height:1.7;color:var(--gray-700);margin-bottom:var(--s4)}
.testimonial__author{display:flex;align-items:center;gap:var(--s3)}
.testimonial__avatar{width:40px;height:40px;border-radius:var(--r-full);background:var(--cream);display:flex;align-items:center;justify-content:center;font-weight:700;color:var(--coral);font-size:var(--fs-sm)}
.testimonial__name{font-size:var(--fs-sm);font-weight:600}
.testimonial__loc{font-size:var(--fs-xs);color:var(--gray-500)}

/* --- Trust Bar --- */
.trust-bar{display:flex;justify-content:center;gap:var(--s12);padding:var(--s8) 0;border-top:1px solid var(--gray-200);border-bottom:1px solid var(--gray-200)}
.trust-item{display:flex;align-items:center;gap:var(--s3);font-size:var(--fs-sm);color:var(--gray-600);font-weight:500}
.trust-item svg{width:20px;height:20px;stroke:var(--sage);flex-shrink:0}

/* --- Section Headers --- */
.sh{margin-bottom:var(--s10)}
.sh--center{text-align:center}
.sh__label{display:inline-block;font-size:var(--fs-xs);font-weight:700;text-transform:uppercase;letter-spacing:.1em;color:var(--coral);margin-bottom:var(--s3)}
.sh p{font-size:var(--fs-lg);color:var(--gray-500);margin-top:var(--s3);max-width:560px}
.sh--center p{margin-left:auto;margin-right:auto}

/* --- Footer --- */
.footer{background:var(--slate);color:rgba(255,255,255,.75);padding:var(--s16) 0 var(--s8)}
.footer__grid{display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:var(--s12);margin-bottom:var(--s12)}
.footer__brand-text{font-size:var(--fs-sm);line-height:1.7;margin-top:var(--s4);max-width:280px}
.footer__heading{font-size:var(--fs-sm);font-weight:700;color:var(--white);margin-bottom:var(--s4);text-transform:uppercase;letter-spacing:.05em}
.footer__link{display:block;font-size:var(--fs-sm);padding:var(--s1) 0;transition:color var(--t-fast)}
.footer__link:hover{color:var(--white)}
.footer__bottom{padding-top:var(--s8);border-top:1px solid rgba(255,255,255,.1);display:flex;align-items:center;justify-content:space-between;font-size:var(--fs-xs)}

/* --- Forms --- */
.form-group{margin-bottom:var(--s5)}
.form-label{display:block;font-size:var(--fs-sm);font-weight:600;margin-bottom:var(--s2);color:var(--slate)}
.form-input{width:100%;padding:var(--s3) var(--s4);border:1.5px solid var(--gray-300);border-radius:var(--r-md);font-size:var(--fs-sm);transition:border-color var(--t-fast);background:var(--white);color:var(--slate)}
.form-input:focus{outline:none;border-color:var(--coral);box-shadow:0 0 0 3px rgba(232,85,58,.1)}
.form-input::placeholder{color:var(--gray-400)}
textarea.form-input{resize:vertical;min-height:120px}
.form-select{appearance:none;background-image:url("data:image/svg+xml,%3Csvg width='12' height='8' viewBox='0 0 12 8' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1.5L6 6.5L11 1.5' stroke='%236B7280' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right var(--s4) center;padding-right:var(--s10)}

/* --- Badges --- */
.badge{display:inline-flex;align-items:center;padding:var(--s1) var(--s3);font-size:var(--fs-xs);font-weight:600;border-radius:var(--r-full)}
.badge--coral{background:rgba(232,85,58,.1);color:var(--coral)}
.badge--sage{background:rgba(90,140,111,.1);color:var(--sage)}
.badge--slate{background:rgba(30,42,58,.08);color:var(--slate)}

/* --- Breadcrumb --- */
.breadcrumb{display:flex;align-items:center;gap:var(--s2);font-size:var(--fs-sm);color:var(--gray-500);margin-bottom:var(--s6)}
.breadcrumb a:hover{color:var(--coral)}
.breadcrumb__sep{color:var(--gray-300)}

/* --- Cart Drawer --- */
.cart-overlay{position:fixed;inset:0;background:rgba(30,42,58,.4);z-index:199;opacity:0;visibility:hidden;transition:all var(--t-base)}
.cart-overlay.is-open{opacity:1;visibility:visible}
.cart-drawer{position:fixed;top:0;right:-420px;width:420px;height:100vh;background:var(--white);box-shadow:var(--sh-xl);z-index:200;transition:right var(--t-base);display:flex;flex-direction:column}
.cart-drawer.is-open{right:0}
.cart-drawer__head{display:flex;align-items:center;justify-content:space-between;padding:var(--s6);border-bottom:1px solid var(--gray-200)}
.cart-drawer__head h3{font-size:var(--fs-lg)}
.cart-drawer__close{width:32px;height:32px;display:flex;align-items:center;justify-content:center;border-radius:var(--r-md);transition:background var(--t-fast)}
.cart-drawer__close:hover{background:var(--gray-100)}
.cart-drawer__close svg{width:20px;height:20px;stroke:var(--gray-600)}
.cart-drawer__body{flex:1;overflow-y:auto;padding:var(--s4)}
.cart-drawer__empty{display:flex;flex-direction:column;align-items:center;justify-content:center;height:100%;color:var(--gray-400);gap:var(--s4)}
.cart-drawer__empty svg{width:48px;height:48px;stroke:var(--gray-300)}
.cart-item{display:flex;gap:var(--s4);padding:var(--s4);border-bottom:1px solid var(--gray-100)}
.cart-item__img{width:72px;height:72px;border-radius:var(--r-md);background:var(--gray-50);flex-shrink:0;overflow:hidden}
.cart-item__info{flex:1;min-width:0}
.cart-item__title{font-size:var(--fs-sm);font-weight:600;margin-bottom:var(--s1)}
.cart-item__price{font-size:var(--fs-sm);color:var(--gray-600)}
.cart-item__qty{display:flex;align-items:center;gap:var(--s2);margin-top:var(--s2)}
.cart-item__qty button{width:28px;height:28px;border:1px solid var(--gray-300);border-radius:var(--r-sm);display:flex;align-items:center;justify-content:center;font-size:var(--fs-sm);color:var(--gray-600);transition:all var(--t-fast)}
.cart-item__qty button:hover{border-color:var(--slate);color:var(--slate)}
.cart-item__qty span{font-size:var(--fs-sm);font-weight:600;min-width:20px;text-align:center}
.cart-drawer__foot{padding:var(--s6);border-top:1px solid var(--gray-200)}
.cart-drawer__total{display:flex;justify-content:space-between;font-size:var(--fs-lg);font-weight:700;margin-bottom:var(--s4)}

/* --- Toast --- */
.toast{position:fixed;bottom:var(--s6);right:var(--s6);background:var(--slate);color:var(--white);padding:var(--s4) var(--s6);border-radius:var(--r-lg);font-size:var(--fs-sm);font-weight:500;box-shadow:var(--sh-xl);transform:translateY(100px);opacity:0;transition:all var(--t-base);z-index:300;display:flex;align-items:center;gap:var(--s3)}
.toast.is-visible{transform:translateY(0);opacity:1}
.toast svg{width:20px;height:20px;stroke:var(--sage-light);flex-shrink:0}

/* --- Pricing Table --- */
.pricing-table{width:100%;border-collapse:collapse}
.pricing-table th,.pricing-table td{padding:var(--s4) var(--s5);text-align:left;border-bottom:1px solid var(--gray-200);font-size:var(--fs-sm)}
.pricing-table th{font-weight:600;color:var(--gray-500);text-transform:uppercase;letter-spacing:.05em;font-size:var(--fs-xs);background:var(--gray-50)}
.pricing-table td:last-child{font-weight:700;color:var(--slate)}

/* --- Upload Zone --- */
.upload-zone{border:2px dashed var(--gray-300);border-radius:var(--r-lg);padding:var(--s12) var(--s8);text-align:center;cursor:pointer;transition:all var(--t-fast)}
.upload-zone:hover{border-color:var(--coral);background:rgba(232,85,58,.02)}
.upload-zone svg{width:40px;height:40px;stroke:var(--gray-400);margin:0 auto var(--s4)}
.upload-zone p{color:var(--gray-500);font-size:var(--fs-sm)}
.upload-zone strong{color:var(--coral)}

/* --- Filters --- */
.filter-group{margin-bottom:var(--s6);padding-bottom:var(--s6);border-bottom:1px solid var(--gray-200)}
.filter-group:last-child{border-bottom:none}
.filter-group__title{font-size:var(--fs-sm);font-weight:700;margin-bottom:var(--s3);color:var(--slate)}
.filter-option{display:flex;align-items:center;gap:var(--s3);padding:var(--s2) 0;font-size:var(--fs-sm);color:var(--gray-600);cursor:pointer;transition:color var(--t-fast)}
.filter-option:hover{color:var(--slate)}
.filter-option input[type="checkbox"]{width:16px;height:16px;accent-color:var(--coral)}
.filter-option__count{margin-left:auto;font-size:var(--fs-xs);color:var(--gray-400)}

/* --- Responsive --- */
@media(max-width:1024px){
  .grid-4{grid-template-columns:repeat(3,1fr)}
  .footer__grid{grid-template-columns:1fr 1fr;gap:var(--s8)}
  .trust-bar{gap:var(--s8)}
  h1{font-size:var(--fs-4xl)}
  h2{font-size:var(--fs-3xl)}
  .build-grid{grid-template-columns:repeat(3,1fr)}
}
@media(max-width:768px){
  :root{--nav-h:64px}
  .nav__links{display:none}
  .nav__hamburger{display:flex}
  .grid-2,.grid-3,.grid-4{grid-template-columns:repeat(2,1fr)}
  .section{padding:var(--s12) 0}
  h1{font-size:var(--fs-3xl)}
  h2{font-size:var(--fs-2xl)}
  .footer__grid{grid-template-columns:1fr;gap:var(--s6)}
  .footer__bottom{flex-direction:column;gap:var(--s4);text-align:center}
  .trust-bar{flex-wrap:wrap;gap:var(--s6);justify-content:center}
  .build-grid{grid-template-columns:repeat(2,1fr)}
  .cart-drawer{width:100%;right:-100%}
}
@media(max-width:480px){
  .container{padding:0 var(--s4)}
  .grid-2,.grid-3,.grid-4{grid-template-columns:1fr}
  h1{font-size:var(--fs-2xl)}
  .trust-bar{flex-direction:column;align-items:center;gap:var(--s4)}
  .step{padding:var(--s6) var(--s2)}
}

/* --- Utilities --- */
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);border:0}
.text-center{text-align:center}
.text-right{text-align:right}
.mt-2{margin-top:var(--s2)}.mt-4{margin-top:var(--s4)}.mt-6{margin-top:var(--s6)}.mt-8{margin-top:var(--s8)}
.mb-2{margin-bottom:var(--s2)}.mb-4{margin-bottom:var(--s4)}.mb-6{margin-bottom:var(--s6)}.mb-8{margin-bottom:var(--s8)}
.hidden{display:none!important}
@media(max-width:768px){.hide-mobile{display:none!important}}
@media(min-width:769px){.hide-desktop{display:none!important}}