/** Shopify CDN: Minification failed

Line 21:0 All "@import" rules must come first

**/
/* searchbar (expandable) */
.searchbar{ max-height:0; overflow:hidden; background: var(--white); border-bottom:1px solid transparent; transition: max-height .25s ease, border-color .25s ease; position: sticky; top: var(--header-h); z-index:55; }
.searchbar.is-open{ max-height:90px; border-bottom-color: var(--line); }
.searchbar__in{ display:flex; align-items:center; gap:12px; padding-block:16px; }
.searchbar__ico{ color: var(--ink-faint); display:grid; place-items:center; }
.searchbar__ico svg{ width:22px; height:22px; }
.searchbar__input{ flex:1; border:none; outline:none; font-family: var(--font-display); font-size: clamp(18px,3vw,26px); font-weight:500; background:transparent; color: var(--ink); }
.searchbar__input::placeholder{ color: var(--ink-faint); }

/* =========================================================================
   TRENDIX — Sistema de diseño compartido
   Tienda e-commerce de productos para mascotas (Chile)
   Paleta cálida · tipografía geométrica redondeada · móvil primero
   ========================================================================= */

@import url('https://fonts.googleapis.com/css2?family=Fredoka:wght@400;500;600;700&family=Plus+Jakarta+Sans:ital,wght@0,400;0,500;0,600;0,700;0,800;1,500&display=swap');

:root{
  /* Color */
  --cream:        #FFF6EE;
  --cream-2:      #FFEEDF;
  --cream-3:      #FCE4D2;
  --ink:          #1F1A17;
  --ink-soft:     #6B5E54;
  --ink-faint:    #9A8C81;
  --orange:       #F2691E;
  --orange-dark:  #D2540D;
  --orange-tint:  #FDE7D7;
  --green:        #28A745;
  --green-dark:   #1E8A38;
  --green-tint:   #DFF3E5;
  --black:        #16120F;
  --white:        #FFFFFF;
  --line:         rgba(31,26,23,.10);
  --line-strong:  rgba(31,26,23,.16);

  /* Radii */
  --r-pill: 999px;
  --r-lg: 28px;
  --r-md: 18px;
  --r-sm: 12px;

  /* Shadow */
  --sh-sm: 0 2px 8px rgba(31,26,23,.06);
  --sh-md: 0 10px 30px rgba(31,26,23,.10);
  --sh-lg: 0 24px 60px rgba(31,26,23,.16);
  --sh-orange: 0 12px 28px rgba(242,105,30,.30);

  /* Type */
  --font-display: 'Fredoka', system-ui, sans-serif;
  --font-body: 'Plus Jakarta Sans', system-ui, sans-serif;

  /* Layout */
  --maxw: 1240px;
  --gutter: clamp(18px, 5vw, 56px);
  --topbar-h: 40px;
  --header-h: 70px;
}

*{ box-sizing: border-box; }
html{ -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body{
  margin:0;
  font-family: var(--font-body);
  background: var(--cream);
  color: var(--ink);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
img{ max-width:100%; display:block; }
a{ color: inherit; text-decoration: none; }
button{ font-family: inherit; cursor: pointer; }
h1,h2,h3,h4,h5{ font-family: var(--font-display); font-weight: 600; line-height:1.05; margin:0; letter-spacing:-.01em; }
p{ margin:0; }
ul{ margin:0; }

::selection{ background: var(--orange); color:#fff; }

.wrap{ width:100%; max-width: var(--maxw); margin-inline:auto; padding-inline: var(--gutter); }
.section{ padding-block: clamp(48px, 8vw, 96px); }
.section--tight{ padding-block: clamp(36px, 6vw, 64px); }
.bg-cream2{ background: var(--cream-2); }
.bg-white{ background: var(--white); }

/* Section heading pattern --------------------------------------------------*/
.eyebrow{
  display:inline-flex; align-items:center; gap:8px;
  font-family: var(--font-body); font-weight:700; font-size:13px;
  letter-spacing:.14em; text-transform:uppercase; color: var(--orange-dark);
}
.eyebrow::before{ content:""; width:22px; height:2px; background: var(--orange); border-radius:2px; }
.sec-head{ display:flex; align-items:flex-end; justify-content:space-between; gap:24px; margin-bottom: clamp(24px,4vw,40px); flex-wrap:wrap; }
.sec-head h2{ font-size: clamp(28px, 4.4vw, 46px); max-width: 16ch; }
.sec-head p{ color: var(--ink-soft); max-width: 46ch; }

/* =========================== BUTTONS ===================================== */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  font-family: var(--font-body); font-weight:700; font-size:15px;
  border:none; border-radius: var(--r-pill); padding: 14px 26px;
  line-height:1; white-space:nowrap; transition: transform .15s ease, box-shadow .2s ease, background .2s ease;
}
.btn svg{ width:18px; height:18px; }
.btn:active{ transform: translateY(1px); }
.btn--primary{ background: var(--orange); color:#fff; box-shadow: var(--sh-orange); }
.btn--primary:hover{ background: var(--orange-dark); box-shadow: 0 16px 34px rgba(242,105,30,.38); transform: translateY(-2px); }
.btn--dark{ background: var(--black); color:#fff; }
.btn--dark:hover{ background:#000; transform: translateY(-2px); box-shadow: var(--sh-md); }
.btn--ghost{ background: transparent; color: var(--ink); border:1.5px solid var(--line-strong); }
.btn--ghost:hover{ border-color: var(--ink); background: var(--white); }
.btn--white{ background:#fff; color: var(--ink); box-shadow: var(--sh-sm); }
.btn--white:hover{ transform: translateY(-2px); box-shadow: var(--sh-md); }
.btn--wa{ background: var(--green); color:#fff; }
.btn--wa:hover{ background: var(--green-dark); transform: translateY(-2px); box-shadow: 0 14px 30px rgba(40,167,69,.32); }
.btn--lg{ padding: 17px 34px; font-size:16px; }
.btn--block{ width:100%; }
.btn--sm{ padding: 10px 18px; font-size:13.5px; }

.linkmore{ display:inline-flex; align-items:center; gap:7px; font-weight:700; color: var(--orange-dark); font-size:15px; }
.linkmore svg{ width:16px; height:16px; transition: transform .2s ease; }
.linkmore:hover svg{ transform: translateX(4px); }

/* =========================== BADGES ===================================== */
.badge{ display:inline-flex; align-items:center; gap:6px; font-weight:700; font-size:12px; line-height:1; padding:7px 11px; border-radius: var(--r-pill); letter-spacing:.01em; }
.badge svg{ width:13px; height:13px; }
.badge--ship{ background: var(--green); color:#fff; }
.badge--off{ background: var(--black); color:#fff; }
.badge--soft{ background: var(--orange-tint); color: var(--orange-dark); }
.badge--new{ background: var(--orange); color:#fff; }

/* =========================== TOPBAR ===================================== */
.topbar{
  background: linear-gradient(90deg, #211a16 0%, #3a2a1e 50%, #211a16 100%);
  color:#fff; font-size:13px; min-height: var(--topbar-h);
}
.topbar__in{ display:flex; align-items:center; justify-content:center; gap:16px; padding:9px var(--gutter); text-align:center; flex-wrap:wrap; }
.topbar__msg{ display:inline-flex; align-items:center; gap:9px; font-weight:600; letter-spacing:.01em; }
.topbar__msg svg{ width:15px; height:15px; color: var(--orange); }
.topbar__dot{ opacity:.5; }
.topbar__cta{ background: var(--orange); color:#fff; font-weight:700; font-size:12px; padding:6px 14px; border-radius: var(--r-pill); }
.topbar__cta:hover{ background: var(--orange-dark); }

/* =========================== HEADER ===================================== */
.header{ position: sticky; top:0; z-index:60; background: rgba(255,246,238,.86); backdrop-filter: blur(14px); border-bottom:1px solid var(--line); }
.header__in{ display:flex; align-items:center; gap:20px; height: var(--header-h); }
.brand{ display:inline-flex; align-items:center; gap:10px; font-family: var(--font-display); font-weight:700; font-size:23px; letter-spacing:-.02em; color: var(--ink); }
.brand__mark{ width:38px; height:38px; flex:none; }
.brand b{ color: var(--orange); font-weight:700; }

.nav{ display:flex; align-items:center; gap:4px; margin-inline:auto; }
.nav a{ position:relative; font-weight:600; font-size:15px; color: var(--ink); padding:10px 14px; border-radius:10px; display:inline-flex; align-items:center; gap:5px; transition: background .15s ease, color .15s ease; }
.nav a:hover{ background: var(--cream-3); color: var(--orange-dark); }
.nav a.is-active{ color: var(--orange-dark); }
.nav a.is-active::after{ content:""; position:absolute; left:14px; right:14px; bottom:4px; height:2px; background: var(--orange); border-radius:2px; }
.nav__caret{ width:13px; height:13px; opacity:.6; }

/* dropdown */
.nav__item{ position:relative; }
.nav__menu{ position:absolute; top:calc(100% + 6px); left:0; min-width:230px; background:#fff; border:1px solid var(--line); border-radius: var(--r-md); box-shadow: var(--sh-md); padding:8px; opacity:0; visibility:hidden; transform: translateY(8px); transition:.18s ease; }
.nav__item:hover .nav__menu{ opacity:1; visibility:visible; transform: translateY(0); }
.nav__menu a{ display:flex; align-items:center; gap:10px; padding:10px 12px; border-radius:10px; font-size:14.5px; width:100%; }
.nav__menu a:hover{ background: var(--cream-2); }
.nav__menu .ico{ width:30px; height:30px; border-radius:9px; background: var(--orange-tint); display:grid; place-items:center; color: var(--orange-dark); flex:none; }
.nav__menu .ico svg{ width:16px; height:16px; }

.header__tools{ display:flex; align-items:center; gap:6px; }
.icobtn{ width:42px; height:42px; border-radius: var(--r-pill); border:none; background: transparent; color: var(--ink); display:grid; place-items:center; position:relative; transition: background .15s ease; }
.icobtn:hover{ background: var(--cream-3); color: var(--orange-dark); }
.icobtn svg{ width:21px; height:21px; }
.icobtn__count{ position:absolute; top:4px; right:4px; min-width:18px; height:18px; padding:0 4px; background: var(--orange); color:#fff; font-size:11px; font-weight:700; border-radius:9px; display:grid; place-items:center; font-family: var(--font-body); }
.burger{ display:none; }

@media (max-width: 980px){
  .nav{ display:none; }
  .burger{ display:grid; }
}

/* mobile drawer */
.drawer{ position:fixed; inset:0; z-index:90; visibility:hidden; }
.drawer.is-open{ visibility:visible; }
.drawer__scrim{ position:absolute; inset:0; background: rgba(22,18,15,.45); opacity:0; transition:.25s; }
.drawer.is-open .drawer__scrim{ opacity:1; }
.drawer__panel{ position:absolute; top:0; right:0; height:100%; width:min(86vw,360px); background: var(--cream); box-shadow: var(--sh-lg); transform: translateX(100%); transition: transform .28s cubic-bezier(.4,0,.2,1); display:flex; flex-direction:column; padding:18px; overflow-y:auto; }
.drawer.is-open .drawer__panel{ transform: translateX(0); }
.drawer__head{ display:flex; align-items:center; justify-content:space-between; margin-bottom:14px; }
.drawer__nav a{ display:flex; align-items:center; justify-content:space-between; padding:15px 12px; border-radius:12px; font-weight:600; font-size:17px; border-bottom:1px solid var(--line); }
.drawer__nav a:hover{ background: var(--cream-2); }

/* =========================== PRODUCT CARD =============================== */
.pgrid{ display:grid; grid-template-columns: repeat(auto-fill, minmax(230px,1fr)); gap: clamp(14px,2vw,24px); }
.pgrid--4{ grid-template-columns: repeat(4,1fr); }
@media (max-width:1000px){ .pgrid--4{ grid-template-columns: repeat(2,1fr); } }
@media (max-width:520px){ .pgrid, .pgrid--4{ grid-template-columns: repeat(2,1fr); gap:12px; } }

.card{ background:#fff; border:1px solid var(--line); border-radius: var(--r-md); overflow:hidden; display:flex; flex-direction:column; transition: transform .2s ease, box-shadow .25s ease, border-color .2s ease; position:relative; }
.card:hover{ transform: translateY(-5px); box-shadow: var(--sh-md); border-color: transparent; }
.card__media{ position:relative; aspect-ratio: 1/1; background: var(--cream-2); }
.card__media image-slot{ width:100%; height:100%; }
.card__badges{ position:absolute; top:10px; left:10px; display:flex; flex-direction:column; gap:6px; z-index:2; align-items:flex-start; }
.card__fav{ position:absolute; top:10px; right:10px; width:34px; height:34px; border-radius:50%; background: rgba(255,255,255,.92); display:grid; place-items:center; z-index:2; border:none; color: var(--ink); box-shadow: var(--sh-sm); }
.card__fav:hover{ color: var(--orange); }
.card__fav svg{ width:17px; height:17px; }
.card__body{ padding:14px 15px 16px; display:flex; flex-direction:column; gap:8px; flex:1; }
.card__cat{ font-size:12px; font-weight:700; letter-spacing:.04em; text-transform:uppercase; color: var(--ink-faint); }
.card__name{ font-family: var(--font-body); font-weight:700; font-size:14.5px; line-height:1.32; color: var(--ink); display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.card__stars{ display:flex; align-items:center; gap:4px; font-size:12.5px; color: var(--ink-soft); font-weight:600; }
.card__stars .s{ color:#F5A623; letter-spacing:1px; }
.card__price{ display:flex; align-items:baseline; gap:9px; margin-top:auto; flex-wrap:wrap; }
.card__now{ font-family: var(--font-display); font-weight:600; font-size:20px; color: var(--ink); }
.card__was{ font-size:13.5px; color: var(--ink-faint); text-decoration: line-through; }
.card__add{ margin-top:6px; }
.card__add .btn{ width:100%; }

/* =========================== FORMS ===================================== */
.field{ display:flex; flex-direction:column; gap:7px; }
.field label{ font-weight:700; font-size:13.5px; color: var(--ink); }
.field .hint{ font-size:12.5px; color: var(--ink-faint); font-weight:500; }
.input, .select, .textarea{
  width:100%; font-family: var(--font-body); font-size:15px; color: var(--ink);
  background:#fff; border:1.5px solid var(--line-strong); border-radius: var(--r-sm);
  padding:13px 15px; transition: border-color .15s ease, box-shadow .15s ease;
}
.textarea{ min-height:130px; resize:vertical; }
.input:focus, .select:focus, .textarea:focus{ outline:none; border-color: var(--orange); box-shadow: 0 0 0 3px var(--orange-tint); }
.input::placeholder, .textarea::placeholder{ color: var(--ink-faint); }

/* =========================== FOOTER ===================================== */
.foot{ background: var(--black); color:#EFE7DF; margin-top: clamp(40px,7vw,90px); }
.foot__news{ background: linear-gradient(120deg,#2a201a,#3c2a1d 55%,#2a201a); border-bottom:1px solid rgba(255,255,255,.08); }
.foot__news-in{ display:grid; grid-template-columns: 1.1fr 1fr; gap:32px; align-items:center; padding-block: clamp(36px,5vw,56px); }
.foot__news h3{ font-size: clamp(24px,3.4vw,34px); color:#fff; }
.foot__news p{ color: rgba(255,255,255,.7); margin-top:10px; max-width:42ch; }
.foot__form{ display:flex; gap:10px; }
.foot__form .input{ background: rgba(255,255,255,.07); border-color: rgba(255,255,255,.16); color:#fff; }
.foot__form .input::placeholder{ color: rgba(255,255,255,.5); }
@media (max-width:760px){ .foot__news-in{ grid-template-columns:1fr; gap:20px; } }

.foot__main{ display:grid; grid-template-columns: 1.4fr repeat(3,1fr); gap:36px; padding-block: clamp(40px,5vw,64px); }
.foot__brand .brand{ color:#fff; }
.foot__brand .brand b{ color: var(--orange); }
.foot__brand p{ color: rgba(255,255,255,.62); margin-top:14px; max-width:34ch; font-size:14.5px; }
.foot__social{ display:flex; gap:10px; margin-top:18px; }
.foot__social a{ width:40px; height:40px; border-radius:50%; background: rgba(255,255,255,.08); display:grid; place-items:center; transition:.15s; }
.foot__social a:hover{ background: var(--orange); }
.foot__social svg{ width:18px; height:18px; color:#fff; }
.foot__col h5{ font-family: var(--font-body); font-weight:800; font-size:13px; letter-spacing:.08em; text-transform:uppercase; color: rgba(255,255,255,.5); margin-bottom:16px; }
.foot__col ul{ list-style:none; padding:0; display:flex; flex-direction:column; gap:11px; }
.foot__col a{ color: rgba(255,255,255,.78); font-size:14.5px; }
.foot__col a:hover{ color: var(--orange); }
@media (max-width:760px){ .foot__main{ grid-template-columns: 1fr 1fr; gap:28px; } .foot__brand{ grid-column:1 / -1; } }

.foot__pay{ display:flex; align-items:center; gap:8px; flex-wrap:wrap; margin-top:8px; }
.foot__pay .chip{ background: rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.12); border-radius:8px; padding:6px 10px; font-size:11.5px; font-weight:700; color: rgba(255,255,255,.8); }
.foot__bottom{ border-top:1px solid rgba(255,255,255,.08); }
.foot__bottom-in{ display:flex; align-items:center; justify-content:space-between; gap:14px; padding-block:20px; flex-wrap:wrap; color: rgba(255,255,255,.55); font-size:13px; }
.foot__bottom a{ color: rgba(255,255,255,.7); }
.foot__bottom a:hover{ color:#fff; }

/* =========================== WHATSAPP FAB =============================== */
.wa-fab{ position:fixed; right:18px; bottom:18px; z-index:80; display:flex; align-items:center; gap:0; }
.wa-fab__btn{ display:inline-flex; align-items:center; gap:10px; background: var(--green); color:#fff; font-weight:700; font-size:14.5px; padding:13px 18px 13px 14px; border-radius: var(--r-pill); box-shadow: 0 12px 30px rgba(40,167,69,.4); border:none; transition: transform .15s ease, box-shadow .2s ease; }
.wa-fab__btn:hover{ transform: translateY(-2px); background: var(--green-dark); }
.wa-fab__btn svg{ width:26px; height:26px; flex:none; }
.wa-fab__label{ white-space:nowrap; }
@media (max-width:560px){ .wa-fab__label{ display:none; } .wa-fab__btn{ padding:14px; } }
.wa-fab__pulse{ position:absolute; left:10px; top:50%; transform:translateY(-50%); width:46px; height:46px; border-radius:50%; background: var(--green); opacity:.4; animation: wapulse 2.4s ease-out infinite; z-index:-1; }
@keyframes wapulse{ 0%{ transform:translateY(-50%) scale(.7); opacity:.5; } 100%{ transform:translateY(-50%) scale(1.7); opacity:0; } }

/* =========================== PAGE BANNER (colección/cabecera) ========== */
.pagehero{ position:relative; overflow:hidden; background: var(--ink); color:#fff; }
.pagehero image-slot, .pagehero .ph-img{ position:absolute; inset:0; width:100%; height:100%; }
.pagehero__ov{ position:absolute; inset:0; background: linear-gradient(180deg, rgba(22,18,15,.35), rgba(22,18,15,.72)); z-index:1; }
.pagehero__in{ position:relative; z-index:2; padding-block: clamp(54px,8vw,96px); }
.pagehero__crumbs{ font-size:13.5px; color: rgba(255,255,255,.75); font-weight:600; margin-bottom:16px; display:flex; gap:8px; align-items:center; flex-wrap:wrap; }
.pagehero__crumbs a:hover{ color:#fff; }
.pagehero__crumbs span{ opacity:.5; }
.pagehero h1{ font-size: clamp(34px,6vw,64px); max-width:18ch; }
.pagehero p{ margin-top:16px; color: rgba(255,255,255,.84); max-width:52ch; font-size: clamp(15px,2vw,18px); }

/* Generic image placeholder look (for slots while empty handled by component) */
.ph{ background: repeating-linear-gradient(135deg, var(--cream-2), var(--cream-2) 14px, var(--cream-3) 14px, var(--cream-3) 28px); }

/* Utility */
.muted{ color: var(--ink-soft); }
.center{ text-align:center; }
.stack-sm{ display:flex; flex-direction:column; gap:8px; }
.row{ display:flex; align-items:center; gap:12px; flex-wrap:wrap; }
.pill-static{ display:inline-flex; align-items:center; gap:8px; background:#fff; border:1px solid var(--line); border-radius: var(--r-pill); padding:9px 16px; font-weight:600; font-size:14px; box-shadow: var(--sh-sm); }
.divider{ height:1px; background: var(--line); border:none; margin:0; }
.hide-mob{ }
@media (max-width:640px){ .hide-mob{ display:none !important; } }


/* ===== HOME-SPECIFIC ===== */

/* ---------- HOME hero ---------- */
.hero{ position:relative; overflow:hidden; background:#241a14; color:#fff; }
.hero image-slot{ position:absolute; inset:0; width:100%; height:100%; }
.hero__ov{ position:absolute; inset:0; z-index:1; background:
  linear-gradient(100deg, rgba(22,18,15,.86) 0%, rgba(22,18,15,.55) 46%, rgba(22,18,15,.15) 100%); }
.hero__in{ position:relative; z-index:2; padding-block: clamp(60px,11vw,128px); max-width:660px; }
.hero__tags{ display:flex; gap:10px; flex-wrap:wrap; margin-bottom:22px; }
.hero__tags .pill-static{ background:rgba(255,255,255,.12); border-color:rgba(255,255,255,.2); color:#fff; backdrop-filter:blur(4px); }
.hero h1{ font-size: clamp(38px,7vw,72px); line-height:1.0; }
.hero h1 em{ color: var(--orange); font-style:normal; }
.hero p{ margin-top:20px; font-size: clamp(16px,2.2vw,20px); color: rgba(255,255,255,.85); max-width:48ch; }
.hero__cta{ display:flex; gap:14px; flex-wrap:wrap; margin-top:30px; }
.hero__trust{ display:flex; gap:22px; flex-wrap:wrap; margin-top:34px; color:rgba(255,255,255,.8); font-size:14px; font-weight:600; }
.hero__trust span{ display:inline-flex; align-items:center; gap:8px; }
.hero__trust svg{ width:18px; height:18px; color: var(--green); }

/* ---------- benefits ---------- */
.benefits{ background: linear-gradient(120deg, #FFE3CF 0%, #FFD9C2 40%, #FFE9D6 100%); border-radius: var(--r-lg); padding: clamp(24px,4vw,44px); display:grid; grid-template-columns: repeat(3,1fr); gap:20px; }
.benefit{ display:flex; gap:16px; align-items:flex-start; }
.benefit__ico{ width:54px; height:54px; border-radius:16px; background:#fff; display:grid; place-items:center; color: var(--orange-dark); flex:none; box-shadow: var(--sh-sm); }
.benefit__ico svg{ width:26px; height:26px; }
.benefit h4{ font-size:19px; margin-bottom:5px; }
.benefit p{ color: var(--ink-soft); font-size:14.5px; }
@media (max-width:760px){ .benefits{ grid-template-columns:1fr; gap:8px; } }

/* ---------- categories ---------- */
.cats{ display:grid; grid-template-columns: repeat(4,1fr); gap: clamp(12px,2vw,20px); }
.catcard{ position:relative; border-radius: var(--r-md); overflow:hidden; aspect-ratio: 3/3.6; color:#fff; display:flex; align-items:flex-end; }
.catcard image-slot{ position:absolute; inset:0; width:100%; height:100%; }
.catcard__ov{ position:absolute; inset:0; background: linear-gradient(180deg, rgba(22,18,15,.05), rgba(22,18,15,.78)); z-index:1; }
.catcard__b{ position:relative; z-index:2; padding:18px; width:100%; }
.catcard__b h4{ font-size:22px; }
.catcard__b span{ display:inline-flex; align-items:center; gap:6px; font-weight:700; font-size:13.5px; color: rgba(255,255,255,.9); margin-top:4px; }
.catcard__b svg{ width:15px; height:15px; }
.catcard:hover image-slot{ transform: scale(1.05); }
.catcard image-slot{ transition: transform .4s ease; }
@media (max-width:760px){ .cats{ grid-template-columns: repeat(2,1fr); } }

/* ---------- featured single ---------- */
.feat{ display:grid; grid-template-columns: 1fr 1fr; gap: clamp(24px,4vw,56px); align-items:center; background:#fff; border:1px solid var(--line); border-radius: var(--r-lg); overflow:hidden; }
.feat__media{ position:relative; aspect-ratio: 1/1; background: var(--cream-2); }
.feat__media image-slot{ width:100%; height:100%; }
.feat__media .badge{ position:absolute; top:18px; left:18px; }
.feat__b{ padding: clamp(22px,4vw,52px) clamp(22px,4vw,52px) clamp(22px,4vw,52px) 0; }
.feat__b h3{ font-size: clamp(26px,3.6vw,40px); margin:12px 0 14px; }
.feat__price{ display:flex; align-items:baseline; gap:14px; margin:18px 0 22px; }
.feat__price .now{ font-family: var(--font-display); font-weight:600; font-size:38px; }
.feat__price .was{ font-size:20px; color: var(--ink-faint); text-decoration: line-through; }
.feat__list{ list-style:none; padding:0; display:flex; flex-direction:column; gap:11px; margin:0 0 26px; }
.feat__list li{ display:flex; gap:10px; align-items:center; font-size:15.5px; color: var(--ink-soft); }
.feat__list svg{ width:20px; height:20px; color: var(--green); flex:none; }
@media (max-width:820px){ .feat{ grid-template-columns:1fr; } .feat__b{ padding: 0 clamp(20px,5vw,36px) clamp(28px,6vw,40px); } }

/* ---------- steps ---------- */
.steps{ display:grid; grid-template-columns: repeat(3,1fr); gap: clamp(16px,3vw,28px); counter-reset: s; }
.step{ background:#fff; border:1px solid var(--line); border-radius: var(--r-md); padding: clamp(22px,3vw,32px); position:relative; }
.step::before{ counter-increment:s; content: counter(s); position:absolute; top:-18px; left:24px; width:46px; height:46px; border-radius:50%; background: var(--orange); color:#fff; font-family:var(--font-display); font-weight:700; font-size:22px; display:grid; place-items:center; box-shadow: var(--sh-orange); }
.step__ico{ width:48px; height:48px; color: var(--orange-dark); margin:14px 0 14px; }
.step__ico svg{ width:100%; height:100%; }
.step h4{ font-size:20px; margin-bottom:8px; }
.step p{ color: var(--ink-soft); font-size:15px; }
@media (max-width:760px){ .steps{ grid-template-columns:1fr; gap:34px; } }

/* ---------- about ---------- */
.about{ display:grid; grid-template-columns: 1fr 1fr; gap: clamp(24px,4vw,56px); align-items:stretch; }
.about__panel{ background: var(--black); color:#fff; border-radius: var(--r-lg); padding: clamp(28px,4vw,48px); display:flex; flex-direction:column; justify-content:center; position:relative; overflow:hidden; }
.about__panel .glow{ position:absolute; width:340px; height:340px; border-radius:50%; background: radial-gradient(circle, rgba(242,105,30,.5), transparent 70%); top:-120px; right:-100px; filter: blur(20px); }
.about__panel .brand{ color:#fff; position:relative; }
.about__panel h2{ font-size: clamp(26px,3.6vw,40px); margin:20px 0 16px; position:relative; }
.about__panel p{ color: rgba(255,255,255,.78); position:relative; font-size:16px; }
.about__stats{ display:flex; gap:30px; margin-top:28px; position:relative; flex-wrap:wrap; }
.about__stats b{ font-family:var(--font-display); font-size:34px; color: var(--orange); display:block; line-height:1; }
.about__stats span{ font-size:13.5px; color: rgba(255,255,255,.65); }
.about__media{ position:relative; border-radius: var(--r-lg); overflow:hidden; min-height:360px; background: var(--cream-2); }
.about__media image-slot{ position:absolute; inset:0; width:100%; height:100%; }
@media (max-width:820px){ .about{ grid-template-columns:1fr; } }

/* ---------- testimonials ---------- */
.testi{ background: var(--cream-2); }
.testi__track{ display:flex; gap:22px; overflow-x:auto; scroll-snap-type:x mandatory; padding-bottom:10px; scrollbar-width:none; }
.testi__track::-webkit-scrollbar{ display:none; }
.testi__card{ scroll-snap-align:start; flex:0 0 min(420px,86vw); background:#fff; border:1px solid var(--line); border-radius: var(--r-md); padding:30px; position:relative; }
.testi__q{ font-family: var(--font-display); font-size:56px; color: var(--orange); line-height:.6; height:30px; }
.testi__card p{ font-size:16.5px; color: var(--ink); line-height:1.6; margin-bottom:18px; }
.testi__who{ display:flex; align-items:center; gap:12px; }
.testi__av{ width:46px; height:46px; border-radius:50%; background: var(--orange-tint); display:grid; place-items:center; color: var(--orange-dark); font-weight:700; font-family:var(--font-display); }
.testi__who b{ display:block; font-size:15px; }
.testi__who span{ font-size:13px; color: var(--ink-faint); }
.testi__stars{ color:#F5A623; font-size:14px; margin-bottom:12px; letter-spacing:2px; }

/* ---------- seals ---------- */
.seals{ display:grid; grid-template-columns: repeat(4,1fr); gap:16px; }
.seal{ display:flex; gap:14px; align-items:center; background:#fff; border:1px solid var(--line); border-radius: var(--r-md); padding:18px 20px; }
.seal__ico{ width:42px; height:42px; color: var(--orange-dark); flex:none; }
.seal__ico svg{ width:100%; height:100%; }
.seal b{ display:block; font-size:15px; }
.seal span{ font-size:13px; color: var(--ink-soft); }
@media (max-width:820px){ .seals{ grid-template-columns: 1fr 1fr; } }

/* ---------- faq mini ---------- */
.acc{ max-width:820px; margin-inline:auto; }
.acc__item{ background:#fff; border:1px solid var(--line); border-radius: var(--r-md); margin-bottom:12px; overflow:hidden; }
.acc__q{ width:100%; text-align:left; background:none; border:none; padding:20px 22px; font-family:var(--font-display); font-weight:500; font-size:18px; color: var(--ink); display:flex; align-items:center; justify-content:space-between; gap:16px; }
.acc__q svg{ width:22px; height:22px; flex:none; color: var(--orange); transition: transform .2s ease; }
.acc__item.is-open .acc__q svg{ transform: rotate(45deg); }
.acc__a{ max-height:0; overflow:hidden; transition: max-height .28s ease; }
.acc__a-in{ padding:0 22px 22px; color: var(--ink-soft); font-size:15.5px; }
.acc__item.is-open .acc__a{ max-height:320px; }

/* ---------- blog grid ---------- */
.bloggrid{ display:grid; grid-template-columns: repeat(4,1fr); gap: clamp(14px,2vw,22px); }
@media (max-width:980px){ .bloggrid{ grid-template-columns:1fr 1fr; } }
@media (max-width:560px){ .bloggrid{ grid-template-columns:1fr; } }
.blogcard{ background:#fff; border:1px solid var(--line); border-radius: var(--r-md); overflow:hidden; transition: transform .2s ease, box-shadow .25s ease; }
.blogcard:hover{ transform: translateY(-4px); box-shadow: var(--sh-md); }
.blogcard__media{ aspect-ratio: 16/10; position:relative; background: var(--cream-2); }
.blogcard__media image-slot{ width:100%; height:100%; }
.blogcard__media .badge{ position:absolute; top:12px; left:12px; }
.blogcard__b{ padding:16px 18px 20px; }
.blogcard__meta{ font-size:12.5px; color: var(--ink-faint); font-weight:600; margin-bottom:8px; }
.blogcard__b h4{ font-family:var(--font-body); font-weight:800; font-size:16px; line-height:1.35; margin-bottom:8px; }
.blogcard__b p{ font-size:14px; color: var(--ink-soft); display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }