/* =====================================================================
   MARVOY - SIMPLE POLISH  (paste at the END of Theme Options > CSS Block)
   1. Category intro text: readable size, left aligned, brand-colour links
   2. Simple animations: cards, buttons, category tiles, soft entrance
   Additive only. Every selector is scoped to real Marvoy classes.
   Everything respects "reduce motion".
   ===================================================================== */

/* ---------- 1. Category intro text (the paragraph under the breadcrumb) ---------- */
.catalog-grid .content_container > div {
  max-width: 900px;
  margin: 0 auto 28px;
  animation: mvFadeUp 450ms ease both;
}
.catalog-grid .content_container > div > p {
  margin: 0 0 18px;
  font-size: 18px;
  line-height: 1.75;
  color: #3a3a45;
  text-align: left !important;          /* the editor puts text-align:center inline */
}
.catalog-grid .content_container > div > p:first-child {
  font-size: 20px;
  line-height: 1.65;
  color: #231f20;
}
/* links: brand navy instead of the editor's bright blue, one clean underline */
.catalog-grid .content_container span[style*="color"] { color: inherit !important; }
.catalog-grid .content_container span[style*="underline"] { text-decoration: none !important; }
.catalog-grid .content_container a,
.catalog-grid .content_container a span {
  color: #2c2a7e !important;
  font-weight: 500;
  text-decoration: underline !important;
  text-decoration-thickness: 1px !important;
  text-underline-offset: 3px;
  transition: color 150ms ease;
}
.catalog-grid .content_container a:hover,
.catalog-grid .content_container a:hover span {
  color: #027afe !important;
}
.catalog-grid .content_container em:has(a),
.catalog-grid .content_container a em { font-style: normal; }

@media (max-width: 767px) {
  .catalog-grid .content_container > div > p { font-size: 16px; line-height: 1.7; }
  .catalog-grid .content_container > div > p:first-child { font-size: 17px; }
}

/* ---------- 2. Simple animations ---------- */
@keyframes mvFadeUp {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* product cards: soft lift + slow image zoom */
.tileparent.product {
  transition: transform 200ms ease, box-shadow 200ms ease;
}
.tileparent.product:hover,
.tileparent.product:focus-within {
  transform: translateY(-4px);
  box-shadow: 0 14px 26px -14px rgba(44, 42, 126, 0.30), 0 5px 10px -5px rgba(0, 0, 0, 0.10);
  z-index: 2;
}
.tileparent.product .imgthumbnail { overflow: hidden; }
.tileparent.product .imgthumbnail img { transition: transform 250ms ease; }
.tileparent.product:hover .imgthumbnail img,
.tileparent.product:focus-within .imgthumbnail img { transform: scale(1.05); }

/* category tiles on category pages (the photo grid under the intro) */
.cat-tiles .tile { overflow: hidden; transition: transform 200ms ease, box-shadow 200ms ease; }
.cat-tiles .tile:hover {
  transform: translateY(-4px);
  box-shadow: 0 14px 26px -14px rgba(44, 42, 126, 0.30);
}
.cat-tiles .tile img { transition: transform 250ms ease; }
.cat-tiles .tile:hover img { transform: scale(1.05); }

/* "Add to basket" button only */
.btn-add-to-cart { transition: transform 120ms ease, box-shadow 120ms ease; }
.btn-add-to-cart:hover { transform: translateY(-2px); box-shadow: 0 10px 18px -8px rgba(44, 42, 126, 0.45); }
.btn-add-to-cart:active { transform: translateY(0) scale(0.97); transition-duration: 80ms; }

/* scroll reveal: the small script already in your Footer Block adds these classes.
   Cards stay fully visible unless that script has run. */
.mv-reveal { opacity: 0; transform: translateY(14px); transition: opacity 350ms ease, transform 350ms ease; }
.mv-reveal.mv-in { opacity: 1; transform: translateY(0); }
.tileparent.product.mv-reveal:nth-child(4n+2) { transition-delay: 40ms; }
.tileparent.product.mv-reveal:nth-child(4n+3) { transition-delay: 80ms; }
.tileparent.product.mv-reveal:nth-child(4n+4) { transition-delay: 120ms; }

/* ---------- reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  .catalog-grid .content_container > div,
  .tileparent.product, .tileparent.product .imgthumbnail img,
  .cat-tiles .tile, .cat-tiles .tile img,
  .btn-add-to-cart, .mv-reveal { animation: none !important; transition: none !important; }
  .tileparent.product:hover, .tileparent.product:focus-within,
  .cat-tiles .tile:hover { transform: none; }
  .mv-reveal { opacity: 1; transform: none; }
}
/* Marvoy - stock availability colours on product tiles (search results, categories, brands).
   Tested on the live "bic" search page. Paste into the CSS Block (same place as the other Marvoy CSS).

   Why it is needed: on tiles the in-stock text takes the site's navy brand colour, and for some products (many BIC items)
   the out-of-stock label arrives EMPTY, so the tile shows a blank white box.
   On the product page itself the site already shows green and red; these rules use the very same colours. */

/* green: stock available */
.tileparent .live-inventory-v2-shipping.in-stock,
.tile .live-inventory-v2-shipping.in-stock {
  color: #008000 !important;
}

/* red: out of stock / extended lead time */
.tileparent .live-inventory-v2-shipping.out-stock,
.tile .live-inventory-v2-shipping.out-stock {
  color: #dc3545 !important;
}

/* out of stock with no text from the stock feed: write one, so the box is never empty */
.tileparent .live-inventory-v2-shipping.out-stock:empty::before,
.tile .live-inventory-v2-shipping.out-stock:empty::before {
  content: "Out of stock";
  font-weight: 700;
}
nav.menu.expanded { background: #2c2a7e !important; }
/* Marvoy - header search bar that clearly looks like a search bar (desktop). Tested on the live home page.
   Paste at the END of the CSS Block (add below what is already there, do not replace anything).
   Pair it with GTM-tag-search-placeholder.html, which writes the text "Search 120,000+ products by name, code or brand". */
@media (min-width: 992px) {
  /* a bigger, rounded bar with a clear outline */
  .search-form input.ajax-search-control {
    height: 58px !important;
    font-size: 17px !important;
    border: 2px solid #2c2a7e !important;       /* Marvoy navy */
    border-radius: 999px !important;
    padding: 6px 190px 6px 26px !important;     /* room for the Search button and the camera */
    box-shadow: 0 6px 18px -8px rgba(44, 42, 126, .45) !important;
  }
  .search-form input.ajax-search-control::placeholder { color: #5d6079 !important; opacity: 1 !important; font-size: 17px !important; }
  .search-form input.ajax-search-control:focus {
    border-color: #027afe !important;           /* Marvoy blue while typing */
    box-shadow: 0 0 0 4px rgba(2, 122, 254, .2) !important;
  }

  /* a solid "Search" button with the magnifier, so nobody has to guess what the bar is */
  .search-form button[type=submit] {
    display: inline-flex !important; align-items: center; gap: 8px;
    height: 46px !important; width: auto !important; padding: 0 22px !important;
    border-radius: 999px !important;
    background: #2c2a7e !important; color: #fff !important;
    font-size: 16px; font-weight: 600; line-height: 1; cursor: pointer;
  }
  .search-form button[type=submit] .fa-search { color: #fff !important; font-size: 18px !important; }
  .search-form button[type=submit]::after { content: "Search"; font-family: inherit; }
  .search-form button[type=submit]:hover { background: #027afe !important; }

  .search-form .fa-camera { font-size: 21px !important; }
}
/* =========================================================
   MARVOY - text animations (CSS part)
   ADD AT THE END of Theme Options > CSS Block (do not replace anything).
   Works together with MARVOY-text-animations.js (Footer Block). If that script does not run,
   nothing here applies: every headline stays fully visible as it is today.
   ========================================================= */

/* each word of a headline rises out of an invisible line, one after the other */
.mv-w { display: inline-block; overflow: hidden; vertical-align: top; padding-bottom: .14em; margin-bottom: -.14em; }
.mv-wi { display: inline-block; transform: translateY(115%); opacity: 0;
  transition: transform .75s cubic-bezier(.2, .7, .2, 1), opacity .5s ease;
  transition-delay: calc(var(--i, 0) * 75ms); }
[data-mvt].mv-t-in .mv-wi { transform: none; opacity: 1; }

/* a word that carries its own effect (the frozen "cold.") is not masked, so its glow and icicles are never cut */
.mv-w--unit { overflow: visible; padding-bottom: 0; margin-bottom: 0; }

/* small labels and paragraphs: soft fade-up, a little after the headline */
.mv-fade { opacity: 0; transform: translateY(14px); transition: opacity .7s ease, transform .7s cubic-bezier(.2, .7, .2, 1); transition-delay: var(--d, 0ms); }
.mv-fade.mv-t-in { opacity: 1; transform: none; }

/* the label above a headline: letters open up while it fades in */
.mv-fade.mvw__eyebrow, .mv-fade.mvba__eyebrow { letter-spacing: .02em; transition: opacity .7s ease, transform .7s ease, letter-spacing .9s cubic-bezier(.2, .7, .2, 1); }
.mv-fade.mvw__eyebrow.mv-t-in, .mv-fade.mvba__eyebrow.mv-t-in { letter-spacing: .14em; }

/* "cold." freezes: the icicles grow after the words have landed, then keep their slow drip */
@keyframes mvwGrow { from { transform: scaleY(0); opacity: 0; } to { transform: scaleY(1); opacity: .95; } }
@keyframes mvwFlash { 0% { filter: drop-shadow(0 0 0 rgba(255, 255, 255, 0)) brightness(1); } 35% { filter: drop-shadow(0 0 14px rgba(190, 233, 255, .95)) brightness(1.5); } 100% { filter: drop-shadow(0 2px 10px rgba(124, 200, 255, .5)) brightness(1); } }
[data-mvt].mv-t-in .mvw__cold { animation: mvwShine 6s ease-in-out infinite, mvwFlash 1.2s ease-out 1s both; }
[data-mvt].mv-t-in .mvw__cold::after { animation: mvwGrow 1.1s cubic-bezier(.2, .8, .2, 1) 1s both, mvwDrip 6s ease-in-out 2.2s infinite; }
[data-mvt]:not(.mv-t-in) .mvw__cold::after { transform: scaleY(0); opacity: 0; }

@media (prefers-reduced-motion: reduce) {
  .mv-wi, .mv-fade { transition: none !important; transform: none !important; opacity: 1 !important; letter-spacing: inherit; }
  [data-mvt] .mvw__cold, [data-mvt] .mvw__cold::after { animation: none !important; transform: none; opacity: 1; }
}
/* =========================================================
   MARVOY - category page titles (CSS part)
   ADD AT THE END of Theme Options > CSS Block (after what is already there; nothing is replaced).
   Styles the title that MARVOY-category-titles.js adds on category pages, and any H1/H2/H3 you write yourself in the
   category content editor, with the same look as the rest of the site. Only the intro area of category pages is touched.
   ========================================================= */
.catalog-grid .content_container h1,
.catalog-grid .content_container h2,
.catalog-grid .content_container h3,
.catalog-grid .mv-cat-title {
  font-family: 'Outfit', sans-serif;
  color: #2c2a7e !important;
  text-align: left !important;      /* the editor writes text-align:center inline */
  text-transform: none;
  letter-spacing: -.025em;
  text-wrap: balance;
}
.catalog-grid .content_container h1,
.catalog-grid .mv-cat-title {
  margin: 0 0 16px;
  font-size: clamp(36px, 4.6vw, 60px);
  font-weight: 800;
  line-height: 1.04;
}
.catalog-grid .content_container h2 {
  margin: 34px 0 12px;
  font-size: clamp(26px, 2.8vw, 36px);
  font-weight: 800;
  line-height: 1.1;
}
.catalog-grid .content_container h3 {
  margin: 26px 0 10px;
  font-size: clamp(21px, 2vw, 26px);
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -.01em;
}
/* the links and text inside a heading keep the heading look */
.catalog-grid .content_container h1 *, .catalog-grid .content_container h2 *, .catalog-grid .content_container h3 * { color: inherit !important; font: inherit; }

@media (max-width: 767px) {
  .catalog-grid .content_container h2 { margin-top: 26px; }
}
/* end of MARVOY titles css */
/* Marvoy - out of stock: nothing is written and there is no box at all (product lists AND the product page). */
.tileparent .live-inventory-v2-shipping.out-stock,
.tile .live-inventory-v2-shipping.out-stock,
body.ex-product .live-inventory-v2-shipping.out-stock {
  display: none !important;
}
.tileparent .live-inventory-v2-wrapper:has(> .live-inventory-v2-shipping.out-stock),
.tile .live-inventory-v2-wrapper:has(> .live-inventory-v2-shipping.out-stock),
body.ex-product .live-inventory-v2-wrapper:has(> .live-inventory-v2-shipping.out-stock) {
  display: none !important;
}
/* end of out of stock css */
/* Marvoy - VOW products (supplier 1001): when out of stock they ALWAYS say "Extended Lead Time", in red.
   Every other product that is out of stock keeps saying nothing (the rule you already have).
   ADD AT THE END of the CSS Block, below the out of stock rule (nothing is replaced). */

/* show the label for VOW products (product lists AND product page) */
html body .supplier_1001 .live-inventory-v2-shipping.out-stock {
  display: block !important;
  color: #dc3545 !important;
}
html body .supplier_1001 .live-inventory-v2-wrapper:has(> .live-inventory-v2-shipping.out-stock) {
  display: block !important;
}
/* the site sometimes sends it empty: write it */
html body .supplier_1001 .live-inventory-v2-shipping.out-stock:empty::before {
  content: "Extended Lead Time" !important;
  font-weight: 700;
}
/* end of VOW lead time css */