/* Adiva desktop refinements - 2026-08-13 -----------------------------------
   Everything here is gated to >=901px. adiva-mobile-v2 owns <=900px and
   rebuilds the header wholesale there; overlapping the two would mean two
   sets of rules fighting over the same nodes.

   Do NOT write a closing style tag anywhere in this file, including inside a
   comment - an HTML parser terminates a style element on that string
   regardless of CSS comment syntax.
--------------------------------------------------------------------------- */

@media (min-width: 901px) {

/* 1 ---------------------------------------------------------------------
   Header icons were literal emoji glyphs. Each OS draws its own artwork, so
   the header rendered a blue Apple person and a pink shopping bag next to a
   thin outlined heart - three unrelated illustration styles at three optical
   weights. mv2 replaced them on phones; desktop never got the same treatment.

   The glyph is a text node, so CSS cannot delete it - font-size:0 collapses it
   and a masked pseudo element draws the real icon. mask (not background) so the
   existing :hover colour change still applies.
------------------------------------------------------------------------- */
/* NOTE: the site ships two header markups. The homepage is rendered from the
   adiva_v5_home_html option and uses .nav-icons/.nav-cats; every other page is
   rendered by adiva-v5-header and uses .av5-icons/.av5-cats. Both stylesheets
   are present on both pages, so matching only one set silently fixes the
   homepage and leaves the rest of the store on emoji. */
.nav-icons a,
.av5-icons a {
  font-size: 0 !important;
  width: 26px; height: 26px;
  display: inline-flex; align-items: center; justify-content: center;
  color: var(--ink, #2E0E1E);
}
.nav-icons a::before,
.av5-icons a::before {
  content: "";
  width: 22px; height: 22px;
  background: currentColor;
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
  -webkit-mask-position: center;  mask-position: center;
  -webkit-mask-size: contain;     mask-size: contain;
}
/* storefront - this link points at /shop/, so it gets a shop icon rather than
   the heart it used to show (a heart reads as a wishlist, which does not exist) */
.nav-icons a[href*="/shop"]::before,
.av5-icons a[href*="/shop"]::before {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3.2 9.4 4.9 4.7A1.7 1.7 0 0 1 6.5 3.6h11a1.7 1.7 0 0 1 1.6 1.1l1.7 4.7'/%3E%3Cpath d='M3.2 9.4h17.6v1.4a2.9 2.9 0 0 1-5.9 0 2.9 2.9 0 0 1-5.9 0 2.9 2.9 0 0 1-5.8 0z'/%3E%3Cpath d='M5.2 13.6v6.8h13.6v-6.8'/%3E%3C/svg%3E");
          mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3.2 9.4 4.9 4.7A1.7 1.7 0 0 1 6.5 3.6h11a1.7 1.7 0 0 1 1.6 1.1l1.7 4.7'/%3E%3Cpath d='M3.2 9.4h17.6v1.4a2.9 2.9 0 0 1-5.9 0 2.9 2.9 0 0 1-5.9 0 2.9 2.9 0 0 1-5.8 0z'/%3E%3Cpath d='M5.2 13.6v6.8h13.6v-6.8'/%3E%3C/svg%3E");
}
.nav-icons a[href*="my-account"]::before,
.av5-icons a[href*="my-account"]::before {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='8.2' r='3.7'/%3E%3Cpath d='M4.8 20.4a7.4 7.4 0 0 1 14.4 0'/%3E%3C/svg%3E");
          mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='8.2' r='3.7'/%3E%3Cpath d='M4.8 20.4a7.4 7.4 0 0 1 14.4 0'/%3E%3C/svg%3E");
}
.nav-icons a[href*="/cart"]::before,
.av5-icons a[href*="/cart"]::before {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5.4 7.6h13.2l1 12.8H4.4z'/%3E%3Cpath d='M8.9 7.6V6.1a3.1 3.1 0 0 1 6.2 0v1.5'/%3E%3C/svg%3E");
          mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5.4 7.6h13.2l1 12.8H4.4z'/%3E%3Cpath d='M8.9 7.6V6.1a3.1 3.1 0 0 1 6.2 0v1.5'/%3E%3C/svg%3E");
}
/* the bag count is a child span, so it has to opt back out of font-size:0 */
.nav-icons a .pill,
.av5-icons a .pill {
  font-size: 10px !important;
  line-height: 15px;
}
.nav-icons a:hover,
.av5-icons a:hover { color: var(--pink-deep, #C42E72); }

/* the search field led with a magnifier emoji sitting in the text flow */
.searchwrap form, form[role="search"], .navsearch form { position: relative; }
.nav-search-ico { display: none; }

/* 2 ---------------------------------------------------------------------
   Hero pagination dots sat on top of the call-to-action buttons.

   .dots is absolutely positioned at bottom:22px of .hero, while .slide is
   inset:0 with align-items:center - so the centred content block grew down
   into the dot lane. Padding on .slides cannot fix it: .slide is absolutely
   positioned against the padding box, so it ignores that padding. Padding on
   .slide itself does work, because the flex centring happens inside its own
   content box.
------------------------------------------------------------------------- */
.hero .slides { height: clamp(500px, 63vh, 640px); }
.hero .slide  { padding-bottom: 46px; }
.hero .dots   { bottom: 15px; }

/* inactive slides are 1421px wide inside a 1366px viewport and hang 27px past
   both edges; they are display:none when inactive, but the transition means
   they are briefly paintable during a slide change */
.hero .slides, .hero { max-width: 100vw; }

/* 3 ---------------------------------------------------------------------
   The ABOUT dropdown is the last item in the nav and carries margin-left:auto,
   so it sits hard against the right edge. .dropmenu centres itself with
   left:50%/translateX(-50%), which pushed 15px of a 230px panel off-screen at
   1366px - the single most common laptop width in India. Anchor that one menu
   to its right edge instead.
------------------------------------------------------------------------- */
.about-drop .dropmenu {
  left: auto !important;
  right: 0 !important;
  transform: translateX(0) translateY(8px) !important;
}
.about-drop:hover .dropmenu,
.about-drop:focus-within .dropmenu,
.about-drop.open .dropmenu,
.about-drop.on .dropmenu,
.about-drop.is-open .dropmenu {
  transform: translateX(0) translateY(0) !important;
}

/* 4 ---------------------------------------------------------------------
   The promo bar ran at 19px tall with 12px text - readable, but it reads as
   chrome rather than as the shipping promise it actually is.
------------------------------------------------------------------------- */
.promos .pbar,
.av5-promos .av5-pbar { min-height: 34px; display: flex; align-items: center; justify-content: center; }
.promos .pbar-msg,
.av5-promos .av5-pbar-msg { font-size: 13px; letter-spacing: .01em; padding: 7px 0; }
.promos .pbar-bow,
.av5-promos .pbar-bow {
  display: inline-block; width: 15px; height: 11px; margin-right: 8px;
  vertical-align: -1px; background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 44'%3E%3Cpath d='M30 22C30 22 12 9 7 8 2 7 1 12 3 16L9 22 3 28C1 32 2 37 7 36 12 35 30 22 30 22Z'/%3E%3Cpath d='M34 22C34 22 52 9 57 8 62 7 63 12 61 16L55 22 61 28C63 32 62 37 57 36 52 35 34 22 34 22Z'/%3E%3Cellipse cx='32' cy='22' rx='5.2' ry='6.8'/%3E%3C/svg%3E") center/contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 44'%3E%3Cpath d='M30 22C30 22 12 9 7 8 2 7 1 12 3 16L9 22 3 28C1 32 2 37 7 36 12 35 30 22 30 22Z'/%3E%3Cpath d='M34 22C34 22 52 9 57 8 62 7 63 12 61 16L55 22 61 28C63 32 62 37 57 36 52 35 34 22 34 22Z'/%3E%3Cellipse cx='32' cy='22' rx='5.2' ry='6.8'/%3E%3C/svg%3E") center/contain no-repeat;
}

}  /* end min-width 901 */


/* 5 ---------------------------------------------------------------------
   Shop and category grids were pinned to four 285px columns inside a 1200px
   track at every width, so a 1920px screen spent 720px - more than a third of
   the display - on empty margin. Widen the container and add a fifth column
   once there is genuinely room for one, and only on listing pages.
------------------------------------------------------------------------- */
@media (min-width: 1600px) {
  body.woocommerce-shop .site-content .ast-container,
  body.tax-product_cat .site-content .ast-container,
  body.post-type-archive-product .site-content .ast-container { max-width: 1560px; }

  body.woocommerce-shop ul.products.columns-4,
  body.tax-product_cat ul.products.columns-4,
  body.post-type-archive-product ul.products.columns-4 {
    grid-template-columns: repeat(5, 1fr) !important;
  }
}

/* 6 ---------------------------------------------------------------------
   Keyboard focus was invisible on a light background - the browser default
   outline is overridden by the theme reset. Only shows for keyboard users.
------------------------------------------------------------------------- */
a:focus-visible, button:focus-visible,
input:focus-visible, select:focus-visible, textarea:focus-visible {
  outline: 2.5px solid #C42E72 !important;
  outline-offset: 2px !important;
  border-radius: 3px;
}

/* 7 ---------------------------------------------------------------------
   404 recovery page (template supplied by the plugin).
------------------------------------------------------------------------- */
.adv-404 { max-width: 1080px; margin: 0 auto; padding: 58px 20px 76px; }
.adv-404 .adv-kick { font-size: 12px; letter-spacing: .18em; text-transform: uppercase;
  color: #C42E72; font-weight: 700; margin: 0 0 10px; }
.adv-404 h1 { font-size: clamp(1.7rem, 3.6vw, 2.7rem); line-height: 1.15; margin: 0 0 14px;
  color: #2E0E1E; }
.adv-404 .adv-lede { font-size: 1.02rem; line-height: 1.65; color: #6b4a5c; max-width: 56ch;
  margin: 0 0 26px; }
.adv-404 form.adv-search { display: flex; gap: 10px; max-width: 540px; margin: 0 0 34px; }
.adv-404 form.adv-search input[type="search"], .adv-404 form.adv-search input[type="text"] {
  flex: 1; min-width: 0; height: 50px; padding: 0 16px; font-size: 16px;
  border: 1.5px solid #ecd6e1; border-radius: 12px; background: #fff; color: #2E0E1E; }
.adv-404 form.adv-search button { height: 50px; padding: 0 26px; border: 0; border-radius: 12px;
  background: #C42E72; color: #fff; font-weight: 700; font-size: 15px; cursor: pointer; }
.adv-404 form.adv-search button:hover { background: #a82560; }
.adv-404 .adv-h2 { font-size: 1.02rem; font-weight: 700; color: #2E0E1E; margin: 0 0 14px; }
.adv-404 .adv-cats { display: flex; flex-wrap: wrap; gap: 10px; margin: 0 0 42px; padding: 0; list-style: none; }
.adv-404 .adv-cats a { display: inline-block; padding: 10px 18px; border-radius: 40px;
  border: 1.5px solid #ecd6e1; background: #fff; color: #2E0E1E; text-decoration: none;
  font-size: 14px; font-weight: 600; }
.adv-404 .adv-cats a:hover { border-color: #C42E72; color: #C42E72; }
.adv-404 .adv-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; margin: 0 0 40px; }
.adv-404 .adv-card { text-decoration: none; color: inherit; display: block; }
.adv-404 .adv-card img { width: 100%; aspect-ratio: 1/1; object-fit: cover; border-radius: 14px;
  display: block; background: #faf1f5; }
.adv-404 .adv-card b { display: block; font-size: 13.5px; font-weight: 600; line-height: 1.4;
  margin: 10px 0 3px; color: #2E0E1E; }
.adv-404 .adv-card span { font-size: 13.5px; color: #C42E72; font-weight: 700; }
.adv-404 .adv-help { border-top: 1px solid #f0e0e8; padding-top: 22px; font-size: 14.5px; color: #6b4a5c; }
.adv-404 .adv-help a { color: #C42E72; font-weight: 600; }
@media (max-width: 900px) {
  .adv-404 { padding: 34px 16px 54px; }
  .adv-404 .adv-grid { grid-template-columns: repeat(2, 1fr); gap: 14px; }
  .adv-404 form.adv-search { flex-direction: column; }
  .adv-404 form.adv-search button { width: 100%; }
}


/* 8 ---------------------------------------------------------------------
   The product-page trust row still drew four emoji (palette, truck, card,
   speech bubble) in a span.ti. Same problem as the header icons: three
   different illustration styles at three optical weights, drawn by the OS.
   The span holds nothing but the glyph, so this needs no JS - font-size:0
   collapses it and a masked pseudo element draws the real icon.
   Not gated to desktop: the row shows at every width.
------------------------------------------------------------------------- */
.adiva-trust .ti {
  font-size: 0 !important;
  width: 22px; height: 22px;
  display: inline-flex; align-items: center; justify-content: center;
  color: #C42E72;
}
.adiva-trust .ti::before {
  content: ""; width: 22px; height: 22px; background: currentColor;
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
  -webkit-mask-position: center;  mask-position: center;
  -webkit-mask-size: contain;     mask-size: contain;
}
.adiva-trust .adiva-trust-i:nth-child(1) .ti::before {
  -webkit-mask-image: var(--adv-palette); mask-image: var(--adv-palette);
}
.adiva-trust .adiva-trust-i:nth-child(2) .ti::before {
  -webkit-mask-image: var(--adv-truck); mask-image: var(--adv-truck);
}
.adiva-trust .adiva-trust-i:nth-child(3) .ti::before {
  -webkit-mask-image: var(--adv-card); mask-image: var(--adv-card);
}
.adiva-trust .adiva-trust-i:nth-child(4) .ti::before {
  -webkit-mask-image: var(--adv-chat); mask-image: var(--adv-chat);
}
:root {
  --adv-palette: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3a9 9 0 1 0 0 18c1.2 0 1.8-.8 1.8-1.7 0-.5-.2-.9-.5-1.2-.3-.3-.5-.7-.5-1.2 0-.9.8-1.7 1.8-1.7h1.6A4.8 4.8 0 0 0 21 10.4C21 6.3 16.9 3 12 3z'/%3E%3Ccircle cx='7.6' cy='11.4' r='1.1'/%3E%3Ccircle cx='10.2' cy='7.4' r='1.1'/%3E%3Ccircle cx='15' cy='7.8' r='1.1'/%3E%3C/svg%3E");
  --adv-truck: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M1.5 6.5h11v10h-11z'/%3E%3Cpath d='M12.5 10h4.2l3.8 3.4v3.1h-8z'/%3E%3Ccircle cx='6' cy='19' r='2'/%3E%3Ccircle cx='17' cy='19' r='2'/%3E%3C/svg%3E");
  --adv-card: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='2' y='5' width='20' height='14' rx='2'/%3E%3Cpath d='M2 10h20M5.5 15h4'/%3E%3C/svg%3E");
  --adv-chat: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 11.5a8 8 0 0 1-8.5 8 9 9 0 0 1-3.4-.6L3 21l1.6-4.6A8 8 0 0 1 12.5 3.5a8 8 0 0 1 8.5 8z'/%3E%3C/svg%3E");
}