/* ==========================================================================
   Vorlise - Hair & Skin Care (WordPress + WooCommerce theme)
   --------------------------------------------------------------------------
   Every colour, font and radius below is a CSS custom property that the
   Customizer rewrites at runtime (see inc/dynamic-css.php). Edit this file
   only for structural changes.
   ========================================================================== */

/* 1. TOKENS ================================================================ */
:root{
  /* brand — midnight blue + champagne gold */
  --brand:#16255a;
  --brand-dark:#0d1740;
  --brand-soft:#eaeefb;
  --gold:#c2a25a;
  --gold-soft:#f6efdf;

  /* neutrals */
  --cream:#f7faf8;
  --ink:#111827;
  --body:#454b57;
  --muted:#7b818d;
  --line:#e5e6ea;
  --line-2:#f1f2f5;
  --white:#ffffff;

  /* status */
  --green:#2e7d4f;
  --green-soft:#e8f4ec;
  --red:#c62828;

  /* type */
  --font-display:"Marcellus","Playfair Display",Georgia,serif;
  --font-body:"Jost","Poppins","Segoe UI",system-ui,-apple-system,sans-serif;

  --step--2:.6875rem;   /* 11px */
  --step--1:.8125rem;   /* 13px */
  --step-0:.9375rem;    /* 15px */
  --step-1:1.0625rem;   /* 17px */
  --step-2:1.375rem;    /* 22px */
  --step-3:1.75rem;     /* 28px */
  --step-4:2.25rem;     /* 36px */

  /* layout */
  --wrap:1280px;
  --gutter:16px;
  --radius:14px;
  --radius-sm:9px;
  --radius-pill:999px;

  --shadow-1:0 1px 2px rgba(20,24,33,.05);
  --shadow-2:0 6px 20px -8px rgba(20,24,33,.18);
  --shadow-3:0 18px 44px -18px rgba(20,24,33,.32);

  --header-h:112px;
  --ease:cubic-bezier(.22,.61,.36,1);
}

@media (min-width:900px){
  :root{
    --gutter:28px;
    --step-0:.9375rem;
    --step-2:1.5rem;
    --step-3:2.125rem;
    --step-4:3rem;
    --header-h:152px;
  }
}

/* 2. RESET ================================================================= */
*,*::before,*::after{box-sizing:border-box;}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;}
body{
  margin:0;
  background:var(--white);
  color:var(--body);
  font-family:var(--font-body);
  font-size:var(--step-0);
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
body.is-locked{overflow:hidden;}
img{max-width:100%;display:block;height:auto;}
a{color:inherit;text-decoration:none;}
button,input,select,textarea{font:inherit;color:inherit;}
button{background:none;border:0;cursor:pointer;}
ul,ol{margin:0;padding:0;list-style:none;}
h1,h2,h3,h4,h5{margin:0;font-family:var(--font-display);color:var(--ink);font-weight:500;line-height:1.2;letter-spacing:.005em;}
p{margin:0;}
table{border-collapse:collapse;width:100%;}
:focus-visible{outline:2px solid var(--brand);outline-offset:3px;border-radius:4px;}

/* 3. HELPERS =============================================================== */
.wrap{width:100%;max-width:var(--wrap);margin-inline:auto;padding-inline:var(--gutter);}
.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;}
.desk-only.desk-only{display:none;}
.mob-only.mob-only{display:block;}
@media (min-width:900px){
  .desk-only.desk-only{display:block;}
  .mob-only.mob-only{display:none;}
}

.section{padding-block:40px;}
@media (min-width:900px){.section{padding-block:64px;}}
.section--tint{background:var(--cream);}

.sec-head{text-align:center;margin-bottom:22px;}
.sec-head .eyebrow{
  display:inline-block;font-size:var(--step--2);letter-spacing:.22em;
  text-transform:uppercase;color:var(--gold);font-weight:600;margin-bottom:8px;
}
.sec-head h2{font-size:var(--step-3);letter-spacing:.01em;}
.sec-head p{margin-top:8px;color:var(--muted);font-size:var(--step--1);}
.sec-head .rule{
  width:64px;height:2px;margin:12px auto 0;
  background:linear-gradient(90deg,transparent,var(--gold),transparent);
}

/* 4. BUTTONS =============================================================== */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  padding:13px 26px;border-radius:var(--radius-pill);
  font-size:var(--step--1);font-weight:600;letter-spacing:.06em;
  text-transform:uppercase;text-align:center;
  transition:transform .2s var(--ease),box-shadow .2s var(--ease),background .2s var(--ease),color .2s var(--ease);
}
.btn:hover{transform:translateY(-2px);}
.btn:active{transform:translateY(0);}
.btn--primary{background:var(--brand);color:#fff;box-shadow:var(--shadow-2);}
.btn--primary:hover{background:var(--brand-dark);}
.btn--gold{background:var(--gold);color:#fff;}
.btn--gold:hover{background:#a9852e;}
.btn--outline{border:1.5px solid var(--brand);color:var(--brand);background:#fff;}
.btn--outline:hover{background:var(--brand);color:#fff;}
.btn--ghost{border:1px solid var(--line);color:var(--ink);}
.btn--ghost:hover{border-color:var(--brand);color:var(--brand);}
.btn--block{width:100%;}
.btn--lg{padding:16px 30px;font-size:var(--step-0);}
.btn[disabled]{opacity:.5;pointer-events:none;}

/* 5. FORM CONTROLS ========================================================= */
.field{position:relative;margin-bottom:12px;}
.field input,.field select,.field textarea{
  width:100%;padding:18px 14px 8px;border:1px solid var(--line);
  border-radius:var(--radius-sm);background:#fff;font-size:var(--step-0);
  transition:border-color .18s,box-shadow .18s;
}
.field textarea{padding-top:22px;min-height:96px;resize:vertical;}
.field select{padding-top:20px;appearance:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23867579' stroke-width='2.5' stroke-linecap='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 14px center;
}
.field label{
  position:absolute;left:14px;top:15px;font-size:var(--step-0);color:var(--muted);
  pointer-events:none;transition:.16s var(--ease);
}
.field select+label,
.field input:focus+label,
.field input:not(:placeholder-shown)+label,
.field textarea:focus+label,
.field textarea:not(:placeholder-shown)+label{
  top:6px;font-size:var(--step--2);color:var(--muted);letter-spacing:.03em;
}
.field input:focus,.field select:focus,.field textarea:focus{
  outline:none;border-color:var(--brand);box-shadow:0 0 0 3px var(--brand-soft);
}
.field.is-error input,.field.is-error select{border-color:var(--red);box-shadow:0 0 0 3px #fdeaea;}
.field .err{display:none;color:var(--red);font-size:var(--step--2);margin-top:5px;}
.field.is-error .err{display:block;}
.field-row{display:grid;gap:12px;}
@media (min-width:640px){.field-row--2{grid-template-columns:1fr 1fr;}.field-row--3{grid-template-columns:1fr 1fr 1fr;}}

.check{display:flex;align-items:flex-start;gap:10px;font-size:var(--step--1);color:var(--body);cursor:pointer;padding:6px 0;}
.check input{width:17px;height:17px;margin:2px 0 0;accent-color:var(--brand);flex:none;}

/* 6. ANNOUNCEMENT BAR ====================================================== */
.announce{background:var(--brand);color:#fff;overflow:hidden;}
.announce__track{
  display:flex;gap:56px;width:max-content;padding:8px 0;
  animation:marquee 26s linear infinite;
}
.announce span{font-size:var(--step--2);letter-spacing:.14em;text-transform:uppercase;white-space:nowrap;}
.announce span b{color:var(--gold-soft);font-weight:600;}
@keyframes marquee{from{transform:translateX(0)}to{transform:translateX(-50%)}}

/* 7. HEADER ================================================================ */
.header{position:sticky;top:0;z-index:60;background:#fff;border-bottom:1px solid var(--line);}
.header__bar{display:flex;align-items:center;gap:12px;height:62px;}
.header__logo{
  font-family:var(--font-display);font-size:1.375rem;color:var(--brand);
  letter-spacing:.04em;font-weight:600;line-height:1;
}
.header__logo small{
  display:block;font-family:var(--font-body);font-size:7.5px;letter-spacing:.2em;
  color:var(--gold);text-transform:uppercase;margin-top:3px;white-space:nowrap;
}
@media (min-width:420px){.header__logo small{font-size:8.5px;letter-spacing:.3em;}}
.header__side{display:flex;align-items:center;gap:4px;margin-left:auto;}
.icon-btn{
  width:40px;height:40px;display:grid;place-items:center;border-radius:50%;
  color:var(--ink);position:relative;transition:background .18s,color .18s;
}
.icon-btn:hover{background:var(--brand-soft);color:var(--brand);}
.icon-btn svg{width:21px;height:21px;}
.cart-count{
  position:absolute;top:2px;right:1px;min-width:18px;height:18px;padding:0 5px;
  background:var(--brand);color:#fff;border-radius:var(--radius-pill);
  font-size:10px;font-weight:600;display:grid;place-items:center;line-height:1;
}
.header__login{display:none;white-space:nowrap;}

/* very small phones (<=379px) */
@media (max-width:379px){
  .header__bar{gap:6px;}
  .header__logo{font-size:1.15rem;}
  .header__logo small{font-size:6.5px;letter-spacing:.14em;}
  .icon-btn{width:34px;height:34px;}
  .icon-btn svg{width:19px;height:19px;}
  .hide-xs{display:none !important;}
}

/* desktop header */
@media (min-width:900px){
  .header__bar{height:78px;gap:24px;}
  .header__logo{font-size:1.75rem;}
  .header__login{display:inline-flex;align-items:center;gap:7px;font-size:var(--step--1);font-weight:500;padding:9px 15px;border-radius:var(--radius-pill);}
  .header__login:hover{background:var(--brand-soft);color:var(--brand);}
  .header__search{
    flex:1;max-width:360px;display:flex;align-items:center;gap:9px;
    border:1px solid var(--line);border-radius:var(--radius-pill);padding:9px 16px;background:var(--cream);
  }
  .header__search input{border:0;background:none;width:100%;min-width:0;font-size:var(--step--1);}
  .header__search input:focus{outline:none;}
  .header__search svg{width:17px;height:17px;color:var(--muted);flex:none;}
}

/* category nav strip */
.navstrip{border-top:1px solid var(--line-2);background:#fff;display:none;}
@media (min-width:900px){.navstrip{display:block;}}
.navstrip ul{display:flex;justify-content:center;flex-wrap:wrap;gap:4px;}
.navstrip a{
  display:block;padding:13px 16px;font-size:var(--step--1);font-weight:500;
  letter-spacing:.05em;text-transform:uppercase;color:var(--ink);position:relative;
}
.navstrip a::after{
  content:"";position:absolute;left:16px;right:16px;bottom:8px;height:1.5px;
  background:var(--brand);transform:scaleX(0);transform-origin:left;transition:transform .25s var(--ease);
}
.navstrip a:hover{color:var(--brand);}
.navstrip a:hover::after,.navstrip a[aria-current="page"]::after{transform:scaleX(1);}
.navstrip .tag{
  margin-left:6px;background:var(--gold);color:#fff;font-size:9px;padding:2px 6px;
  border-radius:4px;letter-spacing:.08em;vertical-align:1px;
}

/* 8. MOBILE DRAWER MENU ==================================================== */
.overlay{
  position:fixed;inset:0;background:rgba(20,24,33,.5);backdrop-filter:blur(2px);
  opacity:0;visibility:hidden;transition:.25s var(--ease);z-index:80;
}
.overlay.is-open{opacity:1;visibility:visible;}

.drawer{
  position:fixed;top:0;bottom:0;width:min(88vw,360px);background:#fff;z-index:90;
  display:flex;flex-direction:column;transition:transform .32s var(--ease);
}
.drawer--left{left:0;transform:translateX(-102%);}
.drawer--right{right:0;width:min(92vw,420px);transform:translateX(102%);}
.drawer.is-open{transform:translateX(0);}
.drawer__head{
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:16px var(--gutter);border-bottom:1px solid var(--line);
}
.drawer__head h3{font-size:var(--step-1);letter-spacing:.02em;}
.drawer__body{flex:1;overflow-y:auto;padding:8px var(--gutter) 20px;}
.drawer__foot{border-top:1px solid var(--line);padding:16px var(--gutter);background:var(--cream);}
.drawer__nav a{
  display:flex;align-items:center;justify-content:space-between;
  padding:14px 2px;border-bottom:1px solid var(--line-2);
  font-size:var(--step-0);font-weight:500;color:var(--ink);
}
.drawer__nav a:hover{color:var(--brand);}
.drawer__nav svg{width:16px;height:16px;color:var(--muted);}
.drawer__meta{margin-top:22px;padding-top:18px;border-top:1px solid var(--line);}
.drawer__meta a{display:block;padding:9px 2px;font-size:var(--step--1);color:var(--muted);}

/* 9. SEARCH OVERLAY ======================================================== */
.searchbox{
  position:fixed;top:0;left:0;right:0;background:#fff;z-index:95;padding:18px var(--gutter) 24px;
  transform:translateY(-104%);transition:transform .3s var(--ease);box-shadow:var(--shadow-3);
}
.searchbox.is-open{transform:translateY(0);}
.searchbox form{display:flex;align-items:center;gap:10px;border-bottom:2px solid var(--brand);padding-bottom:10px;}
.searchbox input{flex:1;min-width:0;border:0;font-size:var(--step-2);font-family:var(--font-display);}
.searchbox input:focus{outline:none;}
.searchbox__sug{display:flex;flex-wrap:wrap;gap:8px;margin-top:16px;}
.searchbox__sug b{width:100%;font-size:var(--step--2);letter-spacing:.16em;text-transform:uppercase;color:var(--muted);font-weight:600;}
.searchbox__sug a{
  padding:7px 14px;border:1px solid var(--line);border-radius:var(--radius-pill);
  font-size:var(--step--1);
}
.searchbox__sug a:hover{background:var(--brand-soft);border-color:var(--brand-soft);color:var(--brand);}

/* 10. HERO SLIDER ========================================================== */
.hero{position:relative;background:var(--cream);overflow:hidden;}
.hero__track{display:flex;transition:transform .6s var(--ease);}
.hero__slide{min-width:100%;position:relative;}
.hero__media{position:relative;aspect-ratio:4/5;}
@media (min-width:700px){.hero__media{aspect-ratio:21/9;}}
.hero__media img{width:100%;height:100%;object-fit:cover;}
.hero__scrim{
  position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(20,24,33,.05) 0%,rgba(20,24,33,.55) 72%,rgba(20,24,33,.72) 100%);
}
@media (min-width:700px){
  .hero__scrim{background:linear-gradient(90deg,rgba(20,24,33,.68) 0%,rgba(20,24,33,.32) 46%,rgba(20,24,33,0) 72%);}
}
.hero__copy{
  position:absolute;inset:auto 0 0 0;padding:0 var(--gutter) 34px;color:#fff;text-align:center;
}
@media (min-width:700px){
  .hero__copy{
    inset:0;display:flex;flex-direction:column;justify-content:center;align-items:flex-start;
    text-align:left;max-width:var(--wrap);margin-inline:auto;padding:0 var(--gutter);
  }
}
.hero__copy .eyebrow{
  display:block;font-size:var(--step--2);letter-spacing:.28em;text-transform:uppercase;
  color:var(--gold-soft);margin-bottom:10px;
}
.hero__copy h1{color:#fff;font-size:clamp(1.75rem,6vw,3.5rem);line-height:1.08;max-width:14ch;margin-inline:auto;}
@media (min-width:700px){.hero__copy h1{margin-inline:0;}}
.hero__copy h1 em{font-style:italic;color:var(--gold-soft);}
.hero__copy p{margin:12px auto 20px;max-width:38ch;font-size:var(--step--1);color:rgba(255,255,255,.86);}
@media (min-width:700px){.hero__copy p{margin-inline:0;font-size:var(--step-0);}}
.hero__btns{display:flex;gap:10px;justify-content:center;flex-wrap:wrap;}
@media (min-width:700px){.hero__btns{justify-content:flex-start;}}
.hero__btns .btn--outline{background:transparent;border-color:rgba(255,255,255,.75);color:#fff;}
.hero__btns .btn--outline:hover{background:#fff;color:var(--ink);border-color:#fff;}

.hero__arrow{
  position:absolute;top:50%;translate:0 -50%;width:42px;height:42px;border-radius:50%;
  background:rgba(255,255,255,.9);display:none;place-items:center;color:var(--ink);
  box-shadow:var(--shadow-2);transition:background .2s;
}
.hero__arrow:hover{background:#fff;}
.hero__arrow svg{width:19px;height:19px;}
.hero__arrow--prev{left:16px;}
.hero__arrow--next{right:16px;}
@media (min-width:900px){.hero__arrow{display:grid;}}
.hero__dots{position:absolute;left:0;right:0;bottom:14px;display:flex;justify-content:center;gap:7px;}
.hero__dots button{width:8px;height:8px;border-radius:50%;background:rgba(255,255,255,.5);transition:.24s var(--ease);}
.hero__dots button.is-active{width:26px;border-radius:var(--radius-pill);background:var(--gold);}

/* 11. USP STRIP ============================================================ */
.usp{border-bottom:1px solid var(--line);background:#fff;}
.usp__grid{display:grid;grid-template-columns:repeat(2,1fr);}
@media (min-width:900px){.usp__grid{grid-template-columns:repeat(4,1fr);}}
.usp__item{
  display:flex;align-items:center;gap:11px;padding:16px 12px;
  border-right:1px solid var(--line-2);border-bottom:1px solid var(--line-2);
}
.usp__item svg{width:24px;height:24px;color:var(--gold);flex:none;}
.usp__item b{display:block;font-size:var(--step--1);color:var(--ink);font-weight:600;line-height:1.3;}
.usp__item span{font-size:var(--step--2);color:var(--muted);}

/* 12. CATEGORY RAIL ======================================================== */
.rail{display:flex;gap:14px;overflow-x:auto;scroll-snap-type:x mandatory;padding-bottom:10px;
  -ms-overflow-style:none;scrollbar-width:none;}
.rail::-webkit-scrollbar{display:none;}
.cat{flex:0 0 auto;width:104px;scroll-snap-align:start;text-align:center;}
@media (min-width:900px){.cat{width:128px;}}
.cat__ring{
  display:block;width:104px;height:104px;border-radius:50%;padding:3px;
  background:linear-gradient(135deg,var(--gold),#ffffff,var(--brand-soft),var(--gold));
  transition:transform .28s var(--ease);
}
@media (min-width:900px){.cat__ring{width:128px;height:128px;}}
.cat:hover .cat__ring{transform:translateY(-4px) scale(1.03);}
.cat__ring img{width:100%;height:100%;border-radius:50%;object-fit:cover;border:3px solid #fff;}
.cat b{display:block;margin-top:10px;font-size:var(--step--1);font-weight:600;color:var(--ink);}
.cat span{font-size:var(--step--2);color:var(--muted);}

/* 13. PRODUCT CARD ========================================================= */
.pgrid{display:grid;grid-template-columns:repeat(2,1fr);gap:14px;}
@media (min-width:640px){.pgrid{grid-template-columns:repeat(3,1fr);gap:18px;}}
@media (min-width:1024px){.pgrid{grid-template-columns:repeat(4,1fr);gap:22px;}}
.pgrid--3{grid-template-columns:repeat(2,1fr);}
@media (min-width:1024px){.pgrid--3{grid-template-columns:repeat(3,1fr);}}

.card{
  position:relative;background:#fff;border:1px solid var(--line-2);border-radius:var(--radius);
  overflow:hidden;display:flex;flex-direction:column;
  transition:box-shadow .28s var(--ease),transform .28s var(--ease),border-color .28s;
}
.card:hover{box-shadow:var(--shadow-3);transform:translateY(-4px);border-color:var(--line);}
.card__media{position:relative;aspect-ratio:1/1;overflow:hidden;background:var(--cream);}
.card__media img{width:100%;height:100%;object-fit:cover;transition:transform .55s var(--ease),opacity .35s;}
.card:hover .card__media img{transform:scale(1.07);}
.card__badge{
  position:absolute;top:9px;left:9px;z-index:2;background:var(--brand);color:#fff;
  font-size:var(--step--2);font-weight:600;letter-spacing:.08em;text-transform:uppercase;
  padding:4px 9px;border-radius:5px;
}
.card__badge--new{background:var(--green);}
.card__badge--best{background:var(--gold);}
.card__rate{
  position:absolute;top:9px;right:9px;z-index:2;background:rgba(255,255,255,.94);
  border-radius:var(--radius-pill);padding:3px 9px;font-size:var(--step--2);
  font-weight:600;color:var(--ink);box-shadow:var(--shadow-1);
}
.card__rate i{font-style:normal;color:var(--gold);}
.card__top{position:relative;}
.card__wish{
  position:absolute;bottom:9px;right:9px;z-index:3;width:34px;height:34px;border-radius:50%;
  background:rgba(255,255,255,.94);display:grid;place-items:center;color:var(--ink);
  box-shadow:var(--shadow-1);opacity:0;translate:0 6px;transition:.25s var(--ease);
}
.card:hover .card__wish,
.card__wish.is-on,
.card__wish:focus-visible{opacity:1;translate:0 0;}
/* touch devices have no hover — keep the heart visible there */
@media (hover:none),(max-width:767px){.card__wish{opacity:1;translate:0 0;}}
.card__wish:hover{color:var(--brand);}
.card__wish svg{width:17px;height:17px;}
.card__wish.is-on{color:var(--brand);background:var(--brand-soft);}
.card__wish.is-on svg{fill:currentColor;}

/* badge and rating chip used to collide in the 2-column mobile grid */
@media (max-width:479px){
  .card__badge{font-size:9px;padding:3px 6px;letter-spacing:.04em;}
  .card__rate{font-size:9px;padding:2px 6px;}
  .card__badge,.card__rate{top:7px;}
  .card__badge{left:7px;}
  .card__rate{right:7px;}
}
.card__body{padding:12px 12px 14px;display:flex;flex-direction:column;flex:1;gap:6px;}
.card__title{
  font-family:var(--font-body);font-size:var(--step--1);font-weight:500;color:var(--ink);
  line-height:1.4;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
}
.stars{display:flex;align-items:center;gap:5px;font-size:var(--step--2);color:var(--muted);}
.stars i{color:var(--gold);letter-spacing:1px;font-style:normal;}
.card__price{display:flex;align-items:baseline;flex-wrap:wrap;gap:7px;margin-top:auto;padding-top:4px;}
.card__price .now{font-size:var(--step-0);font-weight:700;color:var(--ink);}
.card__price .was{font-size:var(--step--1);color:var(--muted);text-decoration:line-through;}
.card__price .off{font-size:var(--step--2);font-weight:700;color:var(--green);}
.card__best{font-size:var(--step--2);color:var(--muted);}
.card__best b{color:var(--green);}
.card__add{
  margin-top:8px;width:100%;padding:10px;border:1.5px solid var(--brand);border-radius:var(--radius-pill);
  color:var(--brand);background:#fff;font-size:var(--step--2);font-weight:700;
  letter-spacing:.1em;text-transform:uppercase;transition:.22s var(--ease);
}
.card__add:hover{background:var(--brand);color:#fff;}
.card__add.is-added{background:var(--green);border-color:var(--green);color:#fff;}

.more{text-align:center;margin-top:28px;}

/* 14. SPLIT BANNER ========================================================= */
.banner{position:relative;overflow:hidden;}
.banner__media{aspect-ratio:16/10;}
@media (min-width:700px){.banner__media{aspect-ratio:24/8;}}
.banner__media img{width:100%;height:100%;object-fit:cover;}
.banner__inner{
  position:absolute;inset:0;display:grid;place-items:center;text-align:center;padding:var(--gutter);
  background:linear-gradient(180deg,rgba(20,24,33,.15),rgba(20,24,33,.6));color:#fff;
}
.banner__inner h3{color:#fff;font-size:clamp(1.375rem,4.4vw,2.5rem);}
.banner__inner p{margin:10px 0 18px;font-size:var(--step--1);color:rgba(255,255,255,.86);max-width:44ch;}
.banner__inner .eyebrow{display:block;font-size:var(--step--2);letter-spacing:.28em;text-transform:uppercase;color:var(--gold-soft);margin-bottom:8px;}

/* 15. SHOP BY RATE ========================================================= */
.rates{display:grid;grid-template-columns:repeat(2,1fr);gap:12px;}
@media (min-width:900px){.rates{grid-template-columns:repeat(4,1fr);gap:22px;}}
.rate{
  position:relative;border-radius:var(--radius);overflow:hidden;background:var(--cream);
  transition:transform .3s var(--ease),box-shadow .3s var(--ease);
}
.rate:hover{transform:translateY(-5px);box-shadow:var(--shadow-3);}
.rate__media{aspect-ratio:3/4;}
.rate__media img{width:100%;height:100%;object-fit:cover;}
.rate__cap{
  position:absolute;inset:auto 0 0 0;padding:34px 14px 14px;text-align:center;color:#fff;
  background:linear-gradient(180deg,rgba(20,24,33,0),rgba(20,24,33,.82));
}
.rate__cap b{display:block;font-family:var(--font-display);font-size:var(--step-1);}
.rate__cap span{font-size:var(--step--2);letter-spacing:.16em;text-transform:uppercase;color:var(--gold-soft);}

/* 16. TESTIMONIALS ========================================================= */
.rev-score{
  display:flex;align-items:center;justify-content:center;gap:16px;flex-wrap:wrap;
  background:#fff;border:1px solid var(--line);border-radius:var(--radius);
  padding:16px 22px;max-width:520px;margin:0 auto 24px;box-shadow:var(--shadow-1);
}
.rev-score__g{font-size:1.5rem;font-weight:700;letter-spacing:-.02em;font-family:var(--font-body);}
.rev-score__g i:nth-child(1){color:#4285F4;font-style:normal;}
.rev-score__g i:nth-child(2){color:#EA4335;font-style:normal;}
.rev-score__g i:nth-child(3){color:#FBBC05;font-style:normal;}
.rev-score__g i:nth-child(4){color:#4285F4;font-style:normal;}
.rev-score__g i:nth-child(5){color:#34A853;font-style:normal;}
.rev-score__g i:nth-child(6){color:#EA4335;font-style:normal;}
.rev-score__num{font-size:var(--step-3);font-weight:700;color:var(--ink);line-height:1;font-family:var(--font-body);}
.rev-score__meta i{color:var(--gold);font-style:normal;letter-spacing:2px;}
.rev-score__meta span{display:block;font-size:var(--step--2);color:var(--muted);}

.revs{display:flex;gap:14px;overflow-x:auto;scroll-snap-type:x mandatory;padding-bottom:12px;
  -ms-overflow-style:none;scrollbar-width:none;}
.revs::-webkit-scrollbar{display:none;}
.rev{
  flex:0 0 auto;width:min(80vw,300px);scroll-snap-align:center;background:#fff;
  border:1px solid var(--line);border-radius:var(--radius);padding:18px;
}
.rev__top{display:flex;align-items:center;gap:11px;margin-bottom:10px;}
.rev__top img{width:42px;height:42px;border-radius:50%;object-fit:cover;flex:none;}
.rev__top b{display:block;font-size:var(--step--1);color:var(--ink);}
.rev__top span{font-size:var(--step--2);color:var(--muted);}
.rev i{color:var(--gold);font-style:normal;letter-spacing:2px;font-size:var(--step--1);}
.rev p{margin-top:7px;font-size:var(--step--1);color:var(--body);}
.rev__ok{display:inline-flex;align-items:center;gap:5px;margin-top:10px;font-size:var(--step--2);color:var(--green);font-weight:600;}
.rev__ok svg{width:13px;height:13px;}

/* 17. GALLERY ============================================================== */
.gal{display:grid;grid-template-columns:repeat(2,1fr);gap:8px;}
@media (min-width:700px){.gal{grid-template-columns:repeat(4,1fr);gap:12px;}}
.gal a{position:relative;overflow:hidden;border-radius:var(--radius-sm);aspect-ratio:1/1;display:block;}
.gal a:first-child{grid-column:span 2;grid-row:span 2;aspect-ratio:1/1;}
.gal img{width:100%;height:100%;object-fit:cover;transition:transform .5s var(--ease);}
.gal a:hover img{transform:scale(1.08);}
.gal a::after{
  content:"";position:absolute;inset:0;background:rgba(29,37,55,.32);
  opacity:0;transition:opacity .3s;
}
.gal a:hover::after{opacity:1;}

/* 18. NEWSLETTER =========================================================== */
.news{background:var(--brand);color:#fff;text-align:center;padding-block:40px;}
.news h2{color:#fff;font-size:var(--step-3);}
.news p{margin:8px auto 18px;max-width:46ch;font-size:var(--step--1);color:rgba(255,255,255,.8);}
.news form{display:flex;gap:8px;max-width:440px;margin-inline:auto;flex-wrap:wrap;}
.news input{
  flex:1 1 200px;padding:14px 18px;border:0;border-radius:var(--radius-pill);font-size:var(--step--1);
}
.news input:focus{outline:2px solid var(--gold);}
.news .btn--gold{flex:0 0 auto;}
.news small{display:block;margin-top:12px;font-size:var(--step--2);color:rgba(255,255,255,.6);}

/* 19. FOOTER =============================================================== */
.footer{background:var(--ink);color:rgba(255,255,255,.72);padding-block:40px 24px;}
.footer__grid{display:grid;gap:28px;}
@media (min-width:900px){.footer__grid{grid-template-columns:1.4fr 1fr 1fr 1.3fr;gap:40px;}}
.footer h4{
  color:#fff;font-family:var(--font-body);font-size:var(--step--1);font-weight:600;
  letter-spacing:.16em;text-transform:uppercase;margin-bottom:14px;
}
.footer__brand .logo{font-family:var(--font-display);font-size:1.625rem;color:#fff;letter-spacing:.04em;}
.footer__brand .logo small{display:block;font-family:var(--font-body);font-size:9px;letter-spacing:.36em;color:var(--gold);text-transform:uppercase;margin-top:4px;}
.footer__brand p{margin-top:14px;font-size:var(--step--1);line-height:1.75;}
.footer ul li a{display:block;padding:5px 0;font-size:var(--step--1);transition:color .2s,padding-left .2s;}
.footer ul li a:hover{color:var(--gold);padding-left:5px;}
.footer__social{display:flex;gap:9px;margin-top:16px;}
.footer__social a{
  width:36px;height:36px;border:1px solid rgba(255,255,255,.2);border-radius:50%;
  display:grid;place-items:center;transition:.22s var(--ease);
}
.footer__social a:hover{background:var(--brand);border-color:var(--brand);color:#fff;transform:translateY(-3px);}
.footer__social svg{width:16px;height:16px;}
.footer__contact li{display:flex;gap:9px;padding:6px 0;font-size:var(--step--1);}
.footer__contact svg{width:16px;height:16px;color:var(--gold);flex:none;margin-top:3px;}
.footer__bottom{
  margin-top:28px;padding-top:18px;border-top:1px solid rgba(255,255,255,.12);
  display:flex;flex-direction:column;gap:14px;align-items:center;text-align:center;font-size:var(--step--2);
}
@media (min-width:900px){.footer__bottom{flex-direction:row;justify-content:space-between;text-align:left;}}
.pay{display:flex;gap:7px;flex-wrap:wrap;justify-content:center;}
.pay span{
  padding:5px 10px;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.14);
  border-radius:5px;font-size:9px;font-weight:700;letter-spacing:.1em;color:#fff;
}

/* 20. MOBILE BOTTOM BAR ==================================================== */
.tabbar{
  position:fixed;left:0;right:0;bottom:0;z-index:70;background:#fff;
  border-top:1px solid var(--line);box-shadow:0 -4px 18px -10px rgba(20,24,33,.3);
  padding-bottom:env(safe-area-inset-bottom);
}
@media (min-width:900px){.tabbar{display:none;}}
.tabbar ul{display:grid;grid-template-columns:repeat(5,1fr);}
.tabbar a{
  display:flex;flex-direction:column;align-items:center;gap:3px;padding:8px 2px 7px;
  font-size:9.5px;letter-spacing:.04em;color:var(--muted);position:relative;
}
.tabbar svg{width:20px;height:20px;}
.tabbar a[aria-current="page"],.tabbar a:hover{color:var(--brand);}
.tabbar .dot{
  position:absolute;top:5px;right:calc(50% - 18px);background:var(--brand);color:#fff;
  font-size:8px;font-weight:700;padding:1px 5px;border-radius:var(--radius-pill);
}
body{padding-bottom:60px;}
@media (min-width:900px){body{padding-bottom:0;}}

/* 21. CART DRAWER + TOAST ================================================== */
.mini{display:flex;gap:12px;padding:14px 0;border-bottom:1px solid var(--line-2);}
.mini img{width:74px;height:88px;object-fit:cover;border-radius:var(--radius-sm);flex:none;background:var(--cream);}
.mini__info{flex:1;min-width:0;}
.mini__info b{display:block;font-family:var(--font-body);font-size:var(--step--1);font-weight:500;color:var(--ink);}
.mini__info span{display:block;font-size:var(--step--2);color:var(--muted);margin-top:2px;}
.mini__info .price{margin-top:6px;font-weight:700;color:var(--ink);font-size:var(--step--1);}
.mini__x{color:var(--muted);align-self:flex-start;padding:2px;}
.mini__x:hover{color:var(--red);}
.mini__x svg{width:16px;height:16px;}

.qty{display:inline-flex;align-items:center;border:1px solid var(--line);border-radius:var(--radius-pill);overflow:hidden;margin-top:8px;}
.qty button{width:30px;height:30px;display:grid;place-items:center;color:var(--ink);font-size:15px;transition:background .18s;}
.qty button:hover{background:var(--brand-soft);color:var(--brand);}
.qty input{width:34px;height:30px;border:0;text-align:center;font-size:var(--step--1);font-weight:600;background:none;}
.qty input:focus{outline:none;}
.qty input::-webkit-outer-spin-button,.qty input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0;}

.ship-bar{background:var(--cream);border-radius:var(--radius-sm);padding:12px;margin-bottom:6px;}
.ship-bar p{font-size:var(--step--2);color:var(--body);margin-bottom:8px;}
.ship-bar p b{color:var(--brand);}
.ship-bar__track{height:6px;background:var(--line);border-radius:var(--radius-pill);overflow:hidden;}
.ship-bar__fill{height:100%;background:linear-gradient(90deg,var(--gold),var(--brand));transition:width .5s var(--ease);}

.sum-row{display:flex;justify-content:space-between;gap:12px;padding:7px 0;font-size:var(--step--1);}
.sum-row--total{
  border-top:1px solid var(--line);margin-top:8px;padding-top:14px;
  font-size:var(--step-1);font-weight:700;color:var(--ink);font-family:var(--font-body);
}
.sum-row--save{color:var(--green);font-weight:600;}

.toast{
  position:fixed;left:50%;bottom:74px;translate:-50% 0;z-index:100;
  background:var(--ink);color:#fff;padding:12px 20px;border-radius:var(--radius-pill);
  font-size:var(--step--1);display:flex;align-items:center;gap:9px;box-shadow:var(--shadow-3);
  opacity:0;visibility:hidden;transform:translate(-50%,12px);transition:.28s var(--ease);
}
@media (min-width:900px){.toast{bottom:26px;}}
.toast.is-on{opacity:1;visibility:visible;transform:translate(-50%,0);}
.toast svg{width:17px;height:17px;color:#6fd39f;}

/* 22. CART PAGE ============================================================ */
.crumbs{display:flex;gap:7px;align-items:center;font-size:var(--step--2);color:var(--muted);padding-top:18px;}
.crumbs a:hover{color:var(--brand);}
.crumbs span{color:var(--ink);}

.page-head{padding:18px 0 24px;display:flex;align-items:flex-end;justify-content:space-between;gap:16px;flex-wrap:wrap;}
.page-head h1{font-size:var(--step-4);letter-spacing:.01em;}
.page-head a{font-size:var(--step--1);color:var(--brand);border-bottom:1px solid currentColor;padding-bottom:2px;}

.cart-layout{display:grid;gap:26px;align-items:start;padding-bottom:50px;}
.cart-layout>*{min-width:0;}          /* lets grid items shrink below content width */
.cart-layout textarea{max-width:100%;}
@media (min-width:1000px){.cart-layout{grid-template-columns:1fr 372px;gap:44px;}}

.cart-head{
  display:none;grid-template-columns:1fr 150px 110px;gap:16px;padding-bottom:12px;
  border-bottom:1px solid var(--line);font-size:var(--step--2);letter-spacing:.16em;
  text-transform:uppercase;color:var(--muted);font-weight:600;
}
@media (min-width:760px){.cart-head{display:grid;}}
.cart-head span:nth-child(2){text-align:center;}
.cart-head span:nth-child(3){text-align:right;}

.line{
  display:grid;grid-template-columns:88px minmax(0,1fr);gap:14px;
  padding:18px 0;border-bottom:1px solid var(--line-2);
}
.line__qty{grid-column:2;}
@media (min-width:760px){
  .line{grid-template-columns:104px minmax(0,1fr) 150px 110px;gap:18px;align-items:center;}
  .line__qty{grid-column:auto;}
}
.line__media img{width:100%;aspect-ratio:4/5;object-fit:cover;border-radius:var(--radius-sm);background:var(--cream);}
.line__info b{font-family:var(--font-body);font-size:var(--step-0);font-weight:600;color:var(--ink);display:block;}
.line__opt{font-size:var(--step--2);color:var(--muted);margin-top:3px;}
.line__info .p{margin-top:7px;display:flex;align-items:baseline;gap:8px;}
.line__info .p .now{font-weight:700;color:var(--ink);}
.line__info .p .was{font-size:var(--step--1);color:var(--muted);text-decoration:line-through;}
.line__info .stock{display:inline-flex;align-items:center;gap:5px;margin-top:6px;font-size:var(--step--2);color:var(--green);}
.line__info .stock::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--green);}
.line__qty{display:flex;align-items:center;gap:12px;margin-top:10px;}
@media (min-width:760px){
  .line__qty{margin-top:0;justify-content:center;}
  .line__info .p{display:block;}
}
.line__qty .qty{margin-top:0;}
.line__rm{font-size:var(--step--2);color:var(--muted);text-decoration:underline;}
.line__rm:hover{color:var(--red);}
.line__total{display:none;text-align:right;font-weight:700;color:var(--ink);}
@media (min-width:760px){.line__total{display:block;}}

.side{
  background:var(--cream);border:1px solid var(--line);border-radius:var(--radius);padding:20px;
}
@media (min-width:1000px){.side{position:sticky;top:calc(var(--header-h) + 16px);}}
.side h3{font-size:var(--step-1);margin-bottom:14px;}
.side__note{
  background:#fff;border:1px dashed var(--line);border-radius:var(--radius-sm);
  padding:11px 13px;font-size:var(--step--2);color:var(--muted);margin-bottom:14px;
}
.side__note a{color:var(--brand);font-weight:600;}
.coupon{display:flex;gap:8px;margin-bottom:14px;}
.coupon input{flex:1;min-width:0;padding:12px 14px;border:1px solid var(--line);border-radius:var(--radius-sm);background:#fff;font-size:var(--step--1);}
.coupon input:focus{outline:none;border-color:var(--brand);}
.coupon button{padding:0 18px;border:1px solid var(--ink);border-radius:var(--radius-sm);font-size:var(--step--2);font-weight:700;letter-spacing:.08em;text-transform:uppercase;}
.coupon button:hover{background:var(--ink);color:#fff;}
.side__tax{font-size:var(--step--2);color:var(--muted);margin:10px 0 14px;}
.side__tax a{color:var(--brand);text-decoration:underline;}
.side__trust{display:grid;gap:8px;margin-top:16px;padding-top:14px;border-top:1px solid var(--line);}
.side__trust li{display:flex;gap:8px;align-items:center;font-size:var(--step--2);color:var(--muted);}
.side__trust svg{width:15px;height:15px;color:var(--green);flex:none;}

.empty{text-align:center;padding:56px 20px;border:1px dashed var(--line);border-radius:var(--radius);}
.empty svg{width:56px;height:56px;color:var(--line);margin:0 auto 14px;}
.empty h2{font-size:var(--step-2);}
.empty p{margin:8px 0 20px;color:var(--muted);font-size:var(--step--1);}
.is-hidden{display:none !important;}

/* 23. CHECKOUT PAGE ======================================================== */
body.checkout-page{background:#fff;padding-bottom:0;}
.co-top{border-bottom:1px solid var(--line);}
.co-top__in{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:16px 0;}
.co-top .logo{font-family:var(--font-display);font-size:1.375rem;color:var(--brand);letter-spacing:.04em;}
.co-top .secure{display:inline-flex;align-items:center;gap:6px;font-size:var(--step--2);color:var(--green);font-weight:600;}
.co-top .secure svg{width:14px;height:14px;}

.co-steps{display:flex;flex-wrap:wrap;gap:6px;align-items:center;font-size:var(--step--2);color:var(--muted);padding:0 0 14px;}
.co-steps a:hover{color:var(--brand);}
.co-steps .on{color:var(--ink);font-weight:600;}
.co-steps svg{width:12px;height:12px;}

.co-summary-toggle{
  width:100%;display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:14px var(--gutter);background:var(--cream);border-block:1px solid var(--line);
  font-size:var(--step--1);color:var(--brand);font-weight:600;
}
@media (min-width:1000px){.co-summary-toggle{display:none;}}
.co-summary-toggle .amt{color:var(--ink);font-size:var(--step-1);font-weight:700;}
.co-summary-toggle svg{width:15px;height:15px;transition:transform .25s var(--ease);}
.co-summary-toggle[aria-expanded="true"] svg{transform:rotate(180deg);}

.co-layout{display:grid;padding-bottom:40px;}
.co-layout>*{min-width:0;}
@media (min-width:1000px){
  .co-layout{grid-template-columns:1fr 1fr;max-width:1140px;margin-inline:auto;gap:0;}
}
.co-main{padding:22px var(--gutter) 0;}
@media (min-width:1000px){.co-main{padding:32px 46px 40px var(--gutter);}}

.co-block{margin-bottom:26px;}
.co-block__head{display:flex;align-items:baseline;justify-content:space-between;gap:12px;margin-bottom:12px;}
.co-block h2{font-family:var(--font-body);font-size:var(--step-1);font-weight:600;color:var(--ink);}
.co-block__head a{font-size:var(--step--2);color:var(--brand);text-decoration:underline;}
.co-block>p.hint{font-size:var(--step--2);color:var(--muted);margin-bottom:10px;}

.express{display:grid;grid-template-columns:repeat(3,1fr);gap:9px;}
.express button{
  padding:13px 6px;border-radius:var(--radius-sm);color:#fff;font-size:var(--step--1);
  font-weight:700;letter-spacing:.03em;transition:opacity .2s,transform .2s;
}
.express button:hover{opacity:.88;transform:translateY(-1px);}
.express .e1{background:#1a1a1a;}
.express .e2{background:#5f259f;}
.express .e3{background:#012970;}
.or-line{display:flex;align-items:center;gap:12px;margin:20px 0;color:var(--muted);font-size:var(--step--2);letter-spacing:.14em;text-transform:uppercase;}
.or-line::before,.or-line::after{content:"";flex:1;height:1px;background:var(--line);}

.opt-list{border:1px solid var(--line);border-radius:var(--radius-sm);overflow:hidden;}
.opt{
  display:flex;align-items:center;gap:11px;padding:15px 14px;cursor:pointer;
  border-bottom:1px solid var(--line);transition:background .18s;
}
.opt:last-of-type{border-bottom:0;}
.opt:hover{background:var(--cream);}
.opt input{width:17px;height:17px;accent-color:var(--brand);flex:none;}
.opt__txt{flex:1;min-width:0;}
.opt__txt b{display:block;font-size:var(--step--1);font-weight:600;color:var(--ink);}
.opt__txt span{font-size:var(--step--2);color:var(--muted);}
.opt__amt{font-size:var(--step--1);font-weight:600;color:var(--ink);white-space:nowrap;}
.opt__amt.free{color:var(--green);text-transform:uppercase;letter-spacing:.06em;font-size:var(--step--2);}
.opt:has(input:checked){background:var(--brand-soft);}
.opt-panel{display:none;padding:16px 14px;background:var(--cream);border-bottom:1px solid var(--line);}
.opt-panel.is-open{display:block;}
.opt-panel .upi-note{font-size:var(--step--2);color:var(--muted);margin-top:4px;}

.co-actions{display:flex;flex-direction:column-reverse;gap:14px;align-items:center;margin-top:22px;}
@media (min-width:560px){.co-actions{flex-direction:row;justify-content:space-between;}}
.co-actions a{font-size:var(--step--1);color:var(--brand);display:inline-flex;align-items:center;gap:6px;}
.co-actions svg{width:14px;height:14px;}
.co-actions .btn{flex:1;}
@media (min-width:560px){.co-actions .btn{flex:0 0 auto;min-width:230px;}}

.co-foot{border-top:1px solid var(--line);margin-top:26px;padding-top:16px;display:flex;flex-wrap:wrap;gap:14px;}
.co-foot a{font-size:var(--step--2);color:var(--muted);text-decoration:underline;}
.co-foot a:hover{color:var(--brand);}

.co-aside{
  background:var(--cream);border-top:1px solid var(--line);padding:22px var(--gutter) 26px;
}
@media (min-width:1000px){
  .co-aside{
    border-top:0;border-left:1px solid var(--line);padding:32px var(--gutter) 40px 46px;
    position:sticky;top:0;align-self:start;min-height:100vh;
  }
}
.co-aside.is-collapsed{display:none;}
@media (min-width:1000px){.co-aside.is-collapsed{display:block;}}
.co-item{display:flex;gap:13px;align-items:center;padding:11px 0;}
.co-item__img{position:relative;flex:none;}
.co-item__img img{width:62px;height:74px;object-fit:cover;border-radius:var(--radius-sm);border:1px solid var(--line);background:#fff;}
.co-item__img .q{
  position:absolute;top:-7px;right:-7px;min-width:21px;height:21px;padding:0 6px;
  background:var(--brand);color:#fff;border-radius:var(--radius-pill);font-size:11px;
  font-weight:700;display:grid;place-items:center;
}
.co-item__t{flex:1;min-width:0;}
.co-item__t b{display:block;font-family:var(--font-body);font-size:var(--step--1);font-weight:600;color:var(--ink);}
.co-item__t span{font-size:var(--step--2);color:var(--muted);}
.co-item__p{font-size:var(--step--1);font-weight:600;color:var(--ink);white-space:nowrap;}
.co-divider{height:1px;background:var(--line);margin:14px 0;}
.co-total{display:flex;align-items:flex-end;justify-content:space-between;gap:12px;padding-top:14px;border-top:1px solid var(--line);margin-top:8px;}
.co-total b{font-family:var(--font-body);font-size:var(--step-3);font-weight:700;color:var(--ink);line-height:1;}
.co-total .cur{font-size:var(--step--2);color:var(--muted);margin-right:6px;}
.co-save{margin-top:10px;background:var(--green-soft);color:var(--green);border-radius:var(--radius-sm);padding:9px 12px;font-size:var(--step--2);font-weight:600;}

/* 24. REVEAL ANIMATION ===================================================== */
.reveal{opacity:0;transform:translateY(22px);transition:opacity .6s var(--ease),transform .6s var(--ease);}
.reveal.is-in{opacity:1;transform:none;}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms !important;animation-iteration-count:1 !important;transition-duration:.001ms !important;scroll-behavior:auto !important;}
  .reveal{opacity:1;transform:none;}
}

/* ==========================================================================
   25. PRODUCT DETAIL PAGE
   ========================================================================== */
.pdp{display:grid;gap:26px;padding-bottom:44px;}
.pdp>*{min-width:0;}                 /* lets grid items shrink below content width */
.pdp-gallery>*,.pdp-info>*{min-width:0;}
@media (min-width:960px){.pdp{grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);gap:52px;align-items:start;}}

.pdp-gallery{display:grid;gap:10px;}
@media (min-width:960px){.pdp-gallery{position:sticky;top:calc(var(--header-h) + 14px);}}
.pdp-main{
  position:relative;aspect-ratio:1/1;border-radius:var(--radius);overflow:hidden;
  background:var(--cream);border:1px solid var(--line-2);
}
.pdp-main img{width:100%;height:100%;object-fit:cover;transition:transform .5s var(--ease);}
.pdp-main:hover img{transform:scale(1.06);}
.pdp-main__badge{
  position:absolute;top:12px;left:12px;background:var(--brand);color:#fff;
  font-size:var(--step--2);font-weight:600;letter-spacing:.08em;text-transform:uppercase;
  padding:5px 10px;border-radius:5px;
}
.pdp-thumbs{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;}
.pdp-thumbs button{
  aspect-ratio:1/1;border-radius:var(--radius-sm);overflow:hidden;
  border:1.5px solid var(--line);background:var(--cream);padding:0;transition:border-color .2s;
}
.pdp-thumbs button.is-active{border-color:var(--brand);}
.pdp-thumbs img{width:100%;height:100%;object-fit:cover;}

.pdp-info .eyebrow{
  display:block;font-size:var(--step--2);letter-spacing:.2em;text-transform:uppercase;
  color:var(--gold);font-weight:600;margin-bottom:8px;
}
.pdp-info h1{font-size:var(--step-3);line-height:1.18;}
.pdp-meta{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-top:9px;font-size:var(--step--1);color:var(--muted);}
.pdp-meta i{color:var(--gold);font-style:normal;letter-spacing:2px;}
.pdp-meta .cert{
  display:inline-flex;align-items:center;gap:5px;background:var(--green-soft);color:var(--green);
  padding:3px 9px;border-radius:var(--radius-pill);font-size:var(--step--2);font-weight:600;
}
.pdp-meta .cert svg{width:12px;height:12px;}

.pdp-price{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap;margin:16px 0 4px;}
.pdp-price .now{font-size:var(--step-3);font-weight:700;color:var(--ink);font-family:var(--font-body);line-height:1;}
.pdp-price .was{font-size:var(--step-0);color:var(--muted);text-decoration:line-through;}
.pdp-price .off{
  font-size:var(--step--2);font-weight:700;color:var(--green);
  background:var(--green-soft);padding:3px 9px;border-radius:var(--radius-pill);
}
.pdp-emi{font-size:var(--step--1);color:var(--muted);}
.pdp-emi b{color:var(--ink);}
.pdp-tax{font-size:var(--step--2);color:var(--muted);margin-top:4px;}

.opt-group{margin-top:20px;}
.opt-group__lbl{
  display:flex;align-items:baseline;justify-content:space-between;gap:10px;margin-bottom:9px;
  font-size:var(--step--2);letter-spacing:.14em;text-transform:uppercase;color:var(--muted);font-weight:600;
}
.opt-group__lbl b{color:var(--ink);letter-spacing:0;text-transform:none;font-size:var(--step--1);font-weight:600;}
.opt-group__lbl a{color:var(--brand);text-transform:none;letter-spacing:0;font-size:var(--step--2);text-decoration:underline;}
.swatches{display:flex;gap:9px;flex-wrap:wrap;}
.swatch{
  display:inline-flex;align-items:center;gap:8px;padding:9px 14px;border:1.5px solid var(--line);
  border-radius:var(--radius-pill);font-size:var(--step--1);background:#fff;transition:.2s var(--ease);
}
.swatch:hover{border-color:var(--muted);}
.swatch.is-on{border-color:var(--brand);background:var(--brand-soft);color:var(--ink);font-weight:600;}
.swatch .dotc{width:15px;height:15px;border-radius:50%;border:1px solid rgba(0,0,0,.12);flex:none;}
.sizes{display:flex;gap:8px;flex-wrap:wrap;}
.size{
  min-width:44px;padding:9px 6px;text-align:center;border:1.5px solid var(--line);
  border-radius:var(--radius-sm);font-size:var(--step--1);background:#fff;transition:.2s var(--ease);
}
.size:hover{border-color:var(--muted);}
.size.is-on{border-color:var(--brand);background:var(--brand);color:#fff;font-weight:600;}

.pdp-buy{display:flex;gap:10px;align-items:center;margin-top:22px;flex-wrap:wrap;}
.pdp-buy .qty{margin-top:0;}
.pdp-buy .btn{flex:1 1 180px;}
.btn--wish{
  width:48px;height:48px;flex:0 0 48px;border:1.5px solid var(--line);border-radius:50%;
  display:grid;place-items:center;color:var(--ink);background:#fff;transition:.2s var(--ease);
}
.btn--wish:hover{border-color:var(--brand);color:var(--brand);}
.btn--wish svg{width:20px;height:20px;}
.btn--wish.is-on{background:var(--brand-soft);border-color:var(--brand);color:var(--brand);}
.btn--wish.is-on svg{fill:currentColor;}

.pin-check{display:flex;gap:8px;margin-top:18px;}
.pin-check input{
  flex:1;min-width:0;padding:12px 14px;border:1px solid var(--line);
  border-radius:var(--radius-sm);font-size:var(--step--1);
}
.pin-check input:focus{outline:none;border-color:var(--brand);}
.pin-check button{
  padding:0 18px;border:1px solid var(--ink);border-radius:var(--radius-sm);
  font-size:var(--step--2);font-weight:700;letter-spacing:.08em;text-transform:uppercase;
}
.pin-check button:hover{background:var(--ink);color:#fff;}
.pin-out{font-size:var(--step--2);margin-top:7px;color:var(--green);min-height:1em;}

.pdp-trust{display:grid;gap:9px;margin-top:20px;padding-top:18px;border-top:1px solid var(--line);}
.pdp-trust li{display:flex;gap:9px;align-items:center;font-size:var(--step--1);color:var(--body);}
.pdp-trust svg{width:17px;height:17px;color:var(--gold);flex:none;}

.acc{margin-top:24px;border-top:1px solid var(--line);}
.acc__item{border-bottom:1px solid var(--line);}
.acc__btn{
  width:100%;display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:15px 2px;font-size:var(--step-0);font-weight:600;color:var(--ink);text-align:left;
}
.acc__btn svg{width:16px;height:16px;color:var(--muted);transition:transform .25s var(--ease);flex:none;}
.acc__btn[aria-expanded="true"] svg{transform:rotate(180deg);}
.acc__panel{display:none;padding:0 2px 18px;font-size:var(--step--1);color:var(--body);}
.acc__panel.is-open{display:block;}
.acc__panel p+p{margin-top:9px;}
.spec{width:100%;font-size:var(--step--1);}
.spec th,.spec td{text-align:left;padding:8px 0;border-bottom:1px solid var(--line-2);vertical-align:top;}
.spec th{color:var(--muted);font-weight:500;width:42%;}
.spec td{color:var(--ink);font-weight:500;}

/* ==========================================================================
   26. WISHLIST PAGE
   ========================================================================== */
.wish-bar{
  display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;
  padding:14px 16px;background:var(--cream);border:1px solid var(--line);
  border-radius:var(--radius);margin-bottom:22px;
}
.wish-bar p{font-size:var(--step--1);color:var(--body);}
.wish-bar p b{color:var(--ink);}
.wish-bar__act{display:flex;gap:9px;flex-wrap:wrap;}
.wish-bar__act .btn{padding:10px 18px;}

.card__rm{
  position:absolute;top:9px;right:9px;z-index:3;width:30px;height:30px;border-radius:50%;
  background:rgba(255,255,255,.95);display:grid;place-items:center;color:var(--muted);
  box-shadow:var(--shadow-1);transition:.2s var(--ease);
}
.card__rm:hover{color:var(--red);background:#fff;}
.card__rm svg{width:15px;height:15px;}

/* header icon count bubble (wishlist) */
.wish-count{
  position:absolute;top:2px;right:1px;min-width:18px;height:18px;padding:0 5px;
  background:var(--gold);color:#fff;border-radius:var(--radius-pill);
  font-size:10px;font-weight:600;display:grid;place-items:center;line-height:1;
}

/* ==========================================================================
   27. RELATED PRODUCTS / SHARED
   ========================================================================== */
.card__link{display:block;color:inherit;}
.card__link:hover .card__title{color:var(--brand);}
.card__title{transition:color .2s;}

/* ==========================================================================
   19. SHOPIFY ADDITIONS
   Extra rules for the pages Shopify adds on top of the original five
   (blog, article, search, collection, customer account, policies).
   They reuse the same tokens, so the look is unchanged.
   ========================================================================== */

/* --- rich text (product description, pages, articles, blocks) ------------- */
.rte{color:var(--body);font-size:var(--step-0);}
.rte > *:first-child{margin-top:0;}
.rte > *:last-child{margin-bottom:0;}
.rte p{margin:0 0 12px;}
.rte h1,.rte h2,.rte h3,.rte h4,.rte h5,.rte h6{
  font-family:var(--font-display);color:var(--ink);margin:26px 0 10px;line-height:1.25;
}
.rte h1{font-size:var(--step-4);}
.rte h2{font-size:var(--step-3);}
.rte h3{font-size:var(--step-2);}
.rte h4,.rte h5,.rte h6{font-size:var(--step-1);}
.rte ul,.rte ol{margin:0 0 14px;padding-left:20px;}
.rte li{margin-bottom:5px;}
.rte a{color:var(--brand);text-decoration:underline;text-underline-offset:2px;}
.rte a:hover{color:var(--gold);}
.rte img{max-width:100%;height:auto;border-radius:var(--radius-sm);}
.rte blockquote{
  margin:16px 0;padding:12px 18px;border-left:3px solid var(--gold);
  background:var(--cream);border-radius:0 var(--radius-sm) var(--radius-sm) 0;font-style:italic;
}
.rte table{width:100%;border-collapse:collapse;font-size:var(--step--1);margin-bottom:14px;}
.rte th,.rte td{border:1px solid var(--line);padding:9px 11px;text-align:left;}
.rte th{background:var(--cream);color:var(--ink);font-weight:600;}
.rte hr{border:0;border-top:1px solid var(--line);margin:22px 0;}

/* --- shared page shell ---------------------------------------------------- */
.page-narrow{max-width:760px;margin-inline:auto;}
.page-lead{color:var(--muted);font-size:var(--step--1);margin-top:6px;}
.stack-lg{margin-top:26px;}

/* --- toolbar (collection + search) ---------------------------------------- */
.toolbar{
  display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px;
  padding:12px 0 16px;border-bottom:1px solid var(--line);margin-bottom:20px;
}
.toolbar__count{font-size:var(--step--1);color:var(--muted);}
.toolbar__sort{display:flex;align-items:center;gap:8px;}
.toolbar__sort label{font-size:var(--step--2);letter-spacing:.14em;text-transform:uppercase;color:var(--muted);font-weight:600;}
.toolbar__sort select{
  appearance:none;border:1px solid var(--line);border-radius:var(--radius-pill);
  background:#fff;padding:9px 34px 9px 14px;font-family:inherit;font-size:var(--step--1);color:var(--ink);cursor:pointer;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23867579' stroke-width='2.5' stroke-linecap='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 13px center;
}
.toolbar__sort select:focus{outline:none;border-color:var(--brand);box-shadow:0 0 0 3px var(--brand-soft);}

/* --- facet filters -------------------------------------------------------- */
.facets{margin-bottom:18px;}
.facets__list{display:flex;flex-wrap:wrap;gap:10px;}
.facet{border:1px solid var(--line);border-radius:var(--radius-sm);background:#fff;overflow:hidden;min-width:190px;}
.facet summary{
  list-style:none;cursor:pointer;padding:11px 14px;font-size:var(--step--1);font-weight:600;color:var(--ink);
  display:flex;align-items:center;justify-content:space-between;gap:10px;
}
.facet summary::-webkit-details-marker{display:none;}
.facet summary::after{content:"";width:9px;height:9px;border-right:2px solid var(--muted);border-bottom:2px solid var(--muted);transform:rotate(45deg) translateY(-2px);}
.facet[open] summary::after{transform:rotate(-135deg) translateY(-2px);}
.facet__body{padding:4px 14px 14px;border-top:1px solid var(--line-2);max-height:260px;overflow:auto;}
.facet__body .check{font-size:var(--step--1);}
.facet__price{display:flex;align-items:center;gap:8px;padding-top:10px;}
.facet__price input{
  width:100%;border:1px solid var(--line);border-radius:var(--radius-sm);padding:8px 10px;font-family:inherit;font-size:var(--step--1);
}
.active-facets{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin-bottom:16px;}
.active-facets a{
  display:inline-flex;align-items:center;gap:7px;border:1px solid var(--line);border-radius:var(--radius-pill);
  padding:6px 13px;font-size:var(--step--2);color:var(--ink);background:#fff;
}
.active-facets a:hover{border-color:var(--brand);color:var(--brand);}
.active-facets a svg{width:12px;height:12px;}
.active-facets .clear{color:var(--muted);text-decoration:underline;border:0;padding:6px 2px;}

/* --- pagination ----------------------------------------------------------- */
.pager{display:flex;justify-content:center;align-items:center;gap:6px;margin-top:34px;flex-wrap:wrap;}
.pager a,.pager span{
  min-width:38px;height:38px;display:inline-flex;align-items:center;justify-content:center;
  border:1px solid var(--line);border-radius:var(--radius-sm);font-size:var(--step--1);color:var(--ink);background:#fff;padding:0 10px;
}
.pager a:hover{border-color:var(--brand);color:var(--brand);}
.pager .is-current{background:var(--brand);border-color:var(--brand);color:#fff;font-weight:600;}
.pager .is-dots{border:0;background:none;color:var(--muted);min-width:20px;}
.pager svg{width:15px;height:15px;}

/* --- collection list ------------------------------------------------------ */
.coll-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:14px;}
@media(min-width:700px){.coll-grid{grid-template-columns:repeat(3,1fr);}}
@media(min-width:1000px){.coll-grid{grid-template-columns:repeat(4,1fr);}}
.coll{
  display:block;border:1px solid var(--line-2);border-radius:var(--radius);overflow:hidden;background:#fff;
  transition:box-shadow .3s var(--ease),transform .3s var(--ease);
}
.coll:hover{box-shadow:var(--shadow-3);transform:translateY(-4px);}
.coll__media{aspect-ratio:1/1;overflow:hidden;background:var(--cream);}
.coll__media img{width:100%;height:100%;object-fit:cover;transition:transform .5s var(--ease);}
.coll:hover .coll__media img{transform:scale(1.06);}
.coll__body{padding:12px 14px 16px;text-align:center;}
.coll__body b{display:block;color:var(--ink);font-size:var(--step-0);font-weight:600;}
.coll__body span{font-size:var(--step--2);color:var(--muted);}

/* --- collection hero ------------------------------------------------------ */
.coll-hero{position:relative;border-radius:var(--radius);overflow:hidden;margin-bottom:22px;background:var(--cream);}
.coll-hero__media{position:absolute;inset:0;}
.coll-hero__media img{width:100%;height:100%;object-fit:cover;}
.coll-hero__media::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(20,24,33,.72),rgba(20,24,33,.24));}
.coll-hero__in{position:relative;padding:34px 22px;color:#fff;}
.coll-hero--plain .coll-hero__in{color:inherit;padding:0 0 4px;}
.coll-hero h1{font-size:var(--step-4);line-height:1.12;}
.coll-hero p{margin-top:8px;font-size:var(--step--1);max-width:62ch;opacity:.92;}
.coll-hero--plain h1{color:var(--ink);}
.coll-hero--plain p{color:var(--muted);}
@media(min-width:900px){.coll-hero__in{padding:56px 44px;}}

/* --- blog ----------------------------------------------------------------- */
.blog-grid{display:grid;grid-template-columns:1fr;gap:18px;}
@media(min-width:700px){.blog-grid{grid-template-columns:repeat(2,1fr);}}
@media(min-width:1050px){.blog-grid{grid-template-columns:repeat(3,1fr);}}
.post{
  display:flex;flex-direction:column;border:1px solid var(--line-2);border-radius:var(--radius);
  overflow:hidden;background:#fff;transition:box-shadow .3s var(--ease),transform .3s var(--ease);
}
.post:hover{box-shadow:var(--shadow-3);transform:translateY(-4px);}
.post__media{aspect-ratio:16/10;overflow:hidden;background:var(--cream);}
.post__media img{width:100%;height:100%;object-fit:cover;transition:transform .5s var(--ease);}
.post:hover .post__media img{transform:scale(1.06);}
.post__body{padding:16px 16px 20px;display:flex;flex-direction:column;gap:8px;flex:1;}
.post__meta{font-size:var(--step--2);letter-spacing:.14em;text-transform:uppercase;color:var(--gold);font-weight:600;}
.post__body h3{font-family:var(--font-display);font-size:var(--step-2);color:var(--ink);line-height:1.25;}
.post__body p{font-size:var(--step--1);color:var(--muted);}
.post__more{margin-top:auto;font-size:var(--step--1);font-weight:600;color:var(--brand);}
.article{max-width:760px;margin-inline:auto;}
.article__head{text-align:center;margin-bottom:22px;}
.article__head h1{font-size:var(--step-4);line-height:1.15;}
.article__head .meta{margin-top:10px;font-size:var(--step--2);letter-spacing:.14em;text-transform:uppercase;color:var(--muted);}
.article__cover{border-radius:var(--radius);overflow:hidden;margin-bottom:24px;}
.article__cover img{width:100%;height:auto;display:block;}
.article__tags{display:flex;flex-wrap:wrap;gap:8px;margin-top:24px;}
.article__tags a{border:1px solid var(--line);border-radius:var(--radius-pill);padding:5px 13px;font-size:var(--step--2);color:var(--body);}
.article__tags a:hover{border-color:var(--brand);color:var(--brand);}
.comment{border:1px solid var(--line-2);border-radius:var(--radius-sm);padding:14px 16px;margin-bottom:12px;background:#fff;}
.comment b{color:var(--ink);font-size:var(--step--1);}
.comment span{display:block;font-size:var(--step--2);color:var(--muted);margin-bottom:6px;}

/* --- customer account ----------------------------------------------------- */
.auth{max-width:440px;margin-inline:auto;}
.auth h1{font-size:var(--step-3);text-align:center;}
.auth > p{text-align:center;color:var(--muted);font-size:var(--step--1);margin:6px 0 22px;}
.auth__card{border:1px solid var(--line);border-radius:var(--radius);padding:22px;background:#fff;box-shadow:var(--shadow-1);}
.auth__alt{text-align:center;font-size:var(--step--1);color:var(--muted);margin-top:16px;}
.auth__alt a{color:var(--brand);font-weight:600;text-decoration:underline;text-underline-offset:2px;}
.acct-grid{display:grid;gap:22px;}
@media(min-width:900px){.acct-grid{grid-template-columns:1fr 300px;align-items:start;}}
.table-wrap{overflow-x:auto;border:1px solid var(--line);border-radius:var(--radius-sm);background:#fff;}
table.data{width:100%;border-collapse:collapse;font-size:var(--step--1);min-width:520px;}
table.data th,table.data td{padding:12px 14px;text-align:left;border-bottom:1px solid var(--line-2);}
table.data th{
  background:var(--cream);color:var(--muted);font-size:var(--step--2);
  letter-spacing:.14em;text-transform:uppercase;font-weight:600;white-space:nowrap;
}
table.data tr:last-child td{border-bottom:0;}
table.data td b{color:var(--ink);}
table.data tfoot td{border-top:1px solid var(--line);font-weight:600;color:var(--ink);}
.pill{display:inline-block;padding:3px 10px;border-radius:var(--radius-pill);font-size:var(--step--2);font-weight:600;background:var(--brand-soft);color:var(--brand);}
.pill--ok{background:var(--green-soft);color:var(--green);}
.addr-card{border:1px solid var(--line);border-radius:var(--radius-sm);padding:16px;background:#fff;margin-bottom:12px;}
.addr-card h3{font-size:var(--step-1);color:var(--ink);margin-bottom:6px;}
.addr-card address{font-style:normal;font-size:var(--step--1);color:var(--body);line-height:1.7;}
.addr-card__act{display:flex;gap:8px;margin-top:12px;flex-wrap:wrap;}

/* --- form feedback -------------------------------------------------------- */
.notice{border-radius:var(--radius-sm);padding:12px 15px;font-size:var(--step--1);margin-bottom:16px;border:1px solid;}
.notice--error{background:#fdeaea;border-color:#f3c4c4;color:var(--red);}
.notice--ok{background:var(--green-soft);border-color:#c4dfd1;color:var(--green);}
.notice ul{margin:6px 0 0;padding-left:18px;}

/* --- misc ----------------------------------------------------------------- */
.sold-out{opacity:.55;}
.card__badge--sold{background:var(--ink);color:#fff;}
.pdp-media-video video,.pdp-media-video iframe{width:100%;height:100%;object-fit:cover;border:0;}
.pdp-vendor{font-size:var(--step--2);letter-spacing:.14em;text-transform:uppercase;color:var(--muted);font-weight:600;}
.inventory{display:flex;align-items:center;gap:8px;font-size:var(--step--1);color:var(--green);margin-top:10px;}
.inventory .dot-i{width:8px;height:8px;border-radius:50%;background:var(--green);flex:none;}
.inventory--low{color:#a9852e;}
.inventory--low .dot-i{background:#a9852e;}
.inventory--out{color:var(--red);}
.inventory--out .dot-i{background:var(--red);}
.share{display:flex;align-items:center;gap:10px;margin-top:16px;font-size:var(--step--1);color:var(--muted);}
.share button{
  border:1px solid var(--line);background:#fff;border-radius:var(--radius-pill);
  padding:7px 15px;font-family:inherit;font-size:var(--step--1);color:var(--ink);cursor:pointer;
}
.share button:hover{border-color:var(--brand);color:var(--brand);}
.gift-card-page{max-width:420px;margin:60px auto;text-align:center;}
.gift-card-page .code{
  font-family:var(--font-body);font-size:var(--step-2);letter-spacing:.18em;background:var(--cream);
  border:1px dashed var(--gold);border-radius:var(--radius-sm);padding:14px;margin:18px 0;color:var(--ink);word-break:break-all;
}
.password-page{max-width:460px;margin:0 auto;text-align:center;padding:60px 0;}
.password-page h1{font-family:var(--font-display);font-size:var(--step-4);color:var(--ink);}
.password-page .logo{justify-content:center;margin-bottom:18px;}
.shopify-challenge__container{max-width:460px;margin:60px auto;text-align:center;}

/* --- Shopify section wrappers ---------------------------------------------
   `display:contents` keeps the header, its drawers and the footer laid out as
   direct children of <body>, exactly as in the original markup, so the sticky
   header and the fixed drawers stack in the right order. */
.header-section,.footer-section,.tabbar-section,.cart-drawer-section{display:contents;}
.hero__copy h2 em{font-style:italic;color:var(--gold-soft);}
.hero__copy h2{margin-inline:auto;}
@media (min-width:700px){.hero__copy h2{margin-inline:0;}}

/* ==========================================================================
   20. FIXES — v1.0.1
   ========================================================================== */

/* --- inline icon sizing ----------------------------------------------------
   An <svg> that carries a viewBox but no width/height falls back to the
   browser's 300 x 150 replaced-element default. Inside `.btn--block` that blew
   the mobile drawer's "Log in / Sign up" button up to the full width of the
   drawer. Every icon now has a floor size. The per-component rules further up
   this file are more specific, so they all still win. */
.icon{width:18px;height:18px;flex:none;}

.btn svg{width:17px;height:17px;flex:none;}
.btn--lg svg{width:19px;height:19px;}
.header__login svg{width:19px;height:19px;flex:none;}
.pay .payment-icon{width:38px;height:24px;}

/* --- desktop search bar -----------------------------------------------------
   Two things were wrong here.

   1. `.desk-only.desk-only{display:block}` (0,2,0) outranks
      `.header__search{display:flex}` (0,1,0), so the pill was never actually a
      flex row. The `gap`, the vertical centring and `flex:none` on the icon all
      did nothing, and the source whitespace between the icon and the input
      rendered as a text space — that is the gap you were seeing.

   2. At 9px of vertical padding on a 13px font the pill sat about 42px tall.

   The rules below restore the flex row, tuck the text up against the icon and
   slim the pill to 34px. Change `height` if you want it thinner still. */
@media (min-width:900px){
  .header form.header__search{
    display:flex;
    align-items:center;
    gap:6px;
    height:34px;
    padding:0 14px;
    max-width:400px;
  }
  .header form.header__search input{
    height:100%;
    padding:0;
    line-height:1;
  }
  .header form.header__search svg{
    width:16px;height:16px;flex:none;
  }
}