/* ==========================================================================
   Marketa skin — Pickaboo-style marketplace identity layered over the Console
   base. Blue command header, orange commerce accent, Manrope, white base.
   All rules scoped to html[data-ec-storefront="marketa"] so nothing here can
   affect other themes. Loaded LAST in the layout head.
   ========================================================================== */
:root {
  --mk-blue: #1b5dd5;
  --mk-blue-dark: #134bb0;
  --mk-blue-wash: #eaf1fd;
  --mk-orange: var(--ec-style-primary, #ff5722);
  --mk-orange-dark: #e64a19;
  --mk-navy: #002f67;
  --mk-ink: #1a1d24;
  --mk-body: #41454f;
  --mk-muted: #6e7480;
  --mk-line: #e6e9ef;
  --mk-page: #f1f3f7;
}

html[data-ec-storefront="marketa"] {
  /* --ec-style-primary is NOT set here: html[attr] outranks the :root block the storefront
     writes from the merchant's Style options, so pinning it made that setting do nothing.
     Marketa's own orange is the fallback in marketa-theme-css.blade.php instead. */
  --ec-style-header-bg: var(--mk-blue);
  /* make every element that uses --font-family follow the store font (Instrument Sans) */
  --font-family: var(--ec-style-font, "Instrument Sans", Arial, "Helvetica Neue", Helvetica, sans-serif);
}

html[data-ec-storefront="marketa"] body {
  background: var(--mk-page);
  color: var(--mk-body);
}

/* ---------- top promo bar → slim navy ---------- */
html[data-ec-storefront="marketa"] .promotional-banner-section {
  background: var(--mk-navy) !important;
  padding-top: 5px;
  padding-bottom: 5px;
}
html[data-ec-storefront="marketa"] .promotional-banner-wrapper {
  background: transparent;
}
html[data-ec-storefront="marketa"] .promotional-banner-wrapper .ec-console-promo-primary,
html[data-ec-storefront="marketa"] .promotional-banner-wrapper .ec-console-promo-secondary {
  color: #ffffff !important;
  font-size: 14px;
}

/* ---------- header → blue ---------- */
html[data-ec-storefront="marketa"] .header-section,
html[data-ec-storefront="marketa"] .navber.ec-console-header-nav {
  background: var(--mk-blue);
  border-bottom: 0;
  box-shadow: 0 1px 0 rgba(0, 0, 0, 0.06);
}
html[data-ec-storefront="marketa"] .navbar-wrapper.ec-console-navbar {
  background: transparent;
}

/* white logo already; keep icons white via invert */
html[data-ec-storefront="marketa"] .ec-console-mobile-toolbar {
  background: var(--mk-blue);
}
html[data-ec-storefront="marketa"] .ec-console-menu-icon,
html[data-ec-storefront="marketa"] .ec-console-mobile-icon-btn img,
html[data-ec-storefront="marketa"] .ec-console-mobile-cart-btn .cart-image,
html[data-ec-storefront="marketa"] .navbar_info-block > img,
html[data-ec-storefront="marketa"] .navbar_info-block .cart-image,
html[data-ec-storefront="marketa"] .customer-support-icon {
  filter: brightness(0) invert(1);
}

/* search bar → white rounded pill + orange submit */
html[data-ec-storefront="marketa"] .search-bar.ec-console-search-form {
  background: #fff;
  border: 0;
  border-radius: 9px;
  overflow: hidden;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
}
html[data-ec-storefront="marketa"] .search-bar .search-icon {
  opacity: 0.5;
}
html[data-ec-storefront="marketa"] .search-bar .text-block-2,
html[data-ec-storefront="marketa"] .search-bar .search-input {
  color: var(--mk-ink);
}
html[data-ec-storefront="marketa"] .search-button-2 {
  background: var(--mk-orange);
  color: #fff;
}
html[data-ec-storefront="marketa"] .search-button-2 .text-block-6 {
  color: #fff;
  font-size: 15px;
}
html[data-ec-storefront="marketa"] .search-button-2:hover {
  background: var(--mk-orange-dark);
}

/* info blocks (help / account / cart) text → white on blue */
html[data-ec-storefront="marketa"] .navbar_info-block .xsmall-text {
  color: rgba(255, 255, 255, 0.72);
}
html[data-ec-storefront="marketa"] .navbar_info-block .text-semibold,
html[data-ec-storefront="marketa"] .navbar_info-block .text-semibold.black,
html[data-ec-storefront="marketa"] .navbar_info-block .text-semibold.red-orange,
html[data-ec-storefront="marketa"] .ec-header-cart-subtotal {
  color: #fff;
}
html[data-ec-storefront="marketa"] .navbar_info-block:hover {
  opacity: 0.9;
}

/* cart count badge → orange */
html[data-ec-storefront="marketa"] .header-cart-quantity {
  background: var(--mk-orange);
  color: #fff;
  border: 2px solid var(--mk-blue);
}

/* second-row nav bar (menu) → sits directly on the blue header, white text, left-aligned */
html[data-ec-storefront="marketa"] .nav-menu-wrapper {
  background: transparent !important;
  border-bottom: 0 !important;
  padding-left: 0 !important;
  justify-content: flex-start !important;
}
html[data-ec-storefront="marketa"] .header-section .nav-menu-block {
  padding-top: 7px;
  padding-bottom: 7px;
  align-items: center;
  justify-content: flex-start;
}
html[data-ec-storefront="marketa"] .header-section .nav-menu.w-nav-menu {
  align-items: center;
  justify-content: flex-start;
}
/* nav links white so they pop on the blue (webflow sets -webkit-text-fill-color,
   which overrides plain color, so both must be set) */
html[data-ec-storefront="marketa"] .nav-menu-wrapper .nav-menu-link,
html[data-ec-storefront="marketa"] .nav-menu-wrapper .nav-menu-link.w-nav-link,
html[data-ec-storefront="marketa"] .nav-menu-wrapper .nav-menu-link.w--current,
html[data-ec-storefront="marketa"] .nav-menu-wrapper .ec-nav-dropdown-trigger,
html[data-ec-storefront="marketa"] .nav-menu-wrapper .ec-mega-nav__trigger {
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
}
html[data-ec-storefront="marketa"] .nav-menu-wrapper .nav-menu-link:hover {
  opacity: 0.85;
}
html[data-ec-storefront="marketa"] .nav-menu-wrapper .header-section .navber.w-nav .arrow-down-icon,
html[data-ec-storefront="marketa"] .nav-menu-wrapper .arrow-down-icon {
  color: rgba(255, 255, 255, 0.85) !important;
}
html[data-ec-storefront="marketa"] .discount-tag .text-semibold.black {
  color: #ffffff;
}
html[data-ec-storefront="marketa"] .discount-tag img {
  filter: brightness(0) invert(1);
}

/* ---------- primary buttons / accents ---------- */
html[data-ec-storefront="marketa"] .primary-button,
html[data-ec-storefront="marketa"] .product-cart,
html[data-ec-storefront="marketa"] .add-to-cart-button,
html[data-ec-storefront="marketa"] .buy-now-button {
  background: var(--mk-orange);
  border-radius: 8px;
}
html[data-ec-storefront="marketa"] .primary-button:hover,
html[data-ec-storefront="marketa"] .product-cart:hover,
html[data-ec-storefront="marketa"] .add-to-cart-button:hover,
html[data-ec-storefront="marketa"] .buy-now-button:hover {
  background: var(--mk-orange-dark);
}
/* product-card "Add to bag" → orange (beats console's white outline rule,
   which uses .ec-console-add-to-cart-form .product-cart !important) */
html[data-ec-storefront="marketa"] .ec-console-add-to-cart-form .product-cart {
  background: var(--mk-orange) !important;
  color: #fff !important;
  border-color: var(--mk-orange) !important;
}
html[data-ec-storefront="marketa"] .ec-console-add-to-cart-form .product-cart:hover:not(:disabled),
html[data-ec-storefront="marketa"] .ec-console-add-to-cart-form .product-cart:focus-visible:not(:disabled) {
  background: var(--mk-orange-dark) !important;
  color: #fff !important;
  border-color: var(--mk-orange-dark) !important;
}
html[data-ec-storefront="marketa"] .ec-console-add-to-cart-form .product-cart img {
  filter: brightness(0) invert(1);
}

/* section heading accent underline/bar → orange */
html[data-ec-storefront="marketa"] .section-title-line,
html[data-ec-storefront="marketa"] .title-underline {
  background: var(--mk-orange);
}

/* cart drawer accents */
html[data-ec-storefront="marketa"] .ec-cart-checkout {
  background: var(--mk-orange);
}
html[data-ec-storefront="marketa"] .ec-cart-checkout:hover {
  background: var(--mk-orange-dark);
}

/* ---------- weekly deals → clean full-width product-tabs section ----------
   The console deal-spotlight left rail uses an autoplay swiper that lands on
   blank clones + reads very console; drop it and let the reliable New Arrivals
   / On Sale / Best Rated / Top Selling tabs fill the section. */
html[data-ec-storefront="marketa"] .ec-console-weekly-deals .new-arrivals-left-content-wrap {
  display: none !important;
}
html[data-ec-storefront="marketa"] .ec-console-weekly-deals .new-arrivals-section-wrapper {
  display: block !important;
}
html[data-ec-storefront="marketa"] .ec-console-weekly-deals .new-arrivals-right-content {
  width: 100% !important;
  max-width: 100% !important;
}
/* consistent vertical rhythm for the product/tab sections */
html[data-ec-storefront="marketa"] .ec-console-home .ec-console-weekly-deals {
  padding-top: 14px !important;
  padding-bottom: 6px !important;
}
html[data-ec-storefront="marketa"] .ec-console-home .featured-products-section {
  padding-top: 36px !important;
  padding-bottom: 36px !important;
}

/* ---------- home section headers → Marketa treatment (orange bar + bold) ---------- */
html[data-ec-storefront="marketa"] .ec-console-home .section-title,
html[data-ec-storefront="marketa"] .ec-console-home .ec-console-sec-head,
html[data-ec-storefront="marketa"] .new-arrivals-section .medium-text.line-height-114 {
  position: relative;
  font-weight: 800 !important;
  letter-spacing: -0.02em !important;
  color: var(--mk-ink) !important;
  padding-left: 15px;
}
html[data-ec-storefront="marketa"] .ec-console-home .section-title::before,
html[data-ec-storefront="marketa"] .ec-console-home .ec-console-sec-head::before,
html[data-ec-storefront="marketa"] .new-arrivals-section .medium-text.line-height-114::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 5px;
  height: 22px;
  border-radius: 3px;
  background: var(--mk-orange);
}
/* product tabs (New Arrivals / On Sale…) → cleaner pill-ish underline */
html[data-ec-storefront="marketa"] .ec-console-product-tabs .ec-console-tab-pane.ec-console-tab-active,
html[data-ec-storefront="marketa"] .product-tab-link.active {
  color: var(--mk-orange) !important;
}
/* alternate section rhythm: give product sections room to breathe */
html[data-ec-storefront="marketa"] .ec-console-home .featured-products-section,
html[data-ec-storefront="marketa"] .ec-console-home .latest-product-section {
  padding-top: 34px;
  padding-bottom: 34px;
}

/* ---------- PDP (single product) Marketa accents ---------- */
/* main price → orange (matches cards + PLP) + bolder for prominence */
html[data-ec-storefront="marketa"] #ec-price-main {
  color: var(--mk-orange-dark) !important;
  font-weight: 800 !important;
  letter-spacing: -0.02em !important;
}
/* discount badge is a solid red pill → white text (was orange-on-red, unreadable) */
html[data-ec-storefront="marketa"] #ec-price-badge {
  color: #fff !important;
  font-weight: 700 !important;
}
/* quantity stepper: icons were collapsing to 0px; force size + readable number */
html[data-ec-storefront="marketa"] .quantity-selector .ec-qty-btn img,
html[data-ec-storefront="marketa"] .quantity-selector .minus-sign,
html[data-ec-storefront="marketa"] .quantity-selector .plus-sign {
  width: 16px !important;
  height: 16px !important;
  display: inline-block !important;
}
html[data-ec-storefront="marketa"] #ec-pdp-qty {
  color: var(--mk-ink) !important;
  -webkit-text-fill-color: var(--mk-ink) !important;
  font-weight: 700 !important;
  font-size: 15px !important;
  width: 6rem !important;
  -moz-appearance: textfield;
  appearance: textfield;
}
/* hide the number-input spinner arrows */
html[data-ec-storefront="marketa"] #ec-pdp-qty::-webkit-outer-spin-button,
html[data-ec-storefront="marketa"] #ec-pdp-qty::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
/* Title → theme ink + tighter (was an off-brand purple-navy at 600) */
html[data-ec-storefront="marketa"] .product-summaty-content h1,
html[data-ec-storefront="marketa"] .product-details-content h1 {
  color: var(--mk-ink) !important;
  font-weight: 700 !important;
  font-size: 27px !important;
  line-height: 1.25 !important;
  letter-spacing: -0.02em !important;
}
/* Tighten the loose 32px stack between summary blocks */
html[data-ec-storefront="marketa"] .product-summaty-content {
  gap: 24px !important;
}
/* Add to bag = orange primary (white label) */
html[data-ec-storefront="marketa"] #ec-add-to-bag-btn div,
html[data-ec-storefront="marketa"] #ec-add-to-bag-btn span {
  color: #fff !important;
}
html[data-ec-storefront="marketa"] #ec-add-to-bag-btn img,
html[data-ec-storefront="marketa"] #ec-add-to-bag-btn svg {
  filter: brightness(0) invert(1);
}
/* Buy now = deep blue secondary (white label) */
html[data-ec-storefront="marketa"] #ec-buy-now-btn {
  background: var(--mk-blue) !important;
  border-color: var(--mk-blue) !important;
}
html[data-ec-storefront="marketa"] #ec-buy-now-btn:hover {
  background: var(--mk-blue-dark) !important;
  border-color: var(--mk-blue-dark) !important;
}
html[data-ec-storefront="marketa"] #ec-buy-now-btn div,
html[data-ec-storefront="marketa"] #ec-buy-now-btn span {
  color: #fff !important;
}

/* (hero is now a self-styled from-scratch block: tenants/marketa/blocks/hero_with_categories) */

/* ==========================================================================
   Design polish — unified type scale, section rhythm & hierarchy
   One consistent system across every home section (overrides Console defaults).
   ========================================================================== */

/* --- Section vertical rhythm: even spacing everywhere --- */
html[data-ec-storefront="marketa"] .mk-cat-section,
html[data-ec-storefront="marketa"] .ec-console-home .featured-products-section,
html[data-ec-storefront="marketa"] .mk-flash {
  padding-top: 36px !important;
  padding-bottom: 36px !important;
}
html[data-ec-storefront="marketa"] .mk-obg-section {
  padding-top: 22px !important;
  padding-bottom: 22px !important;
}

/* --- Unified section title scale (21px / 700) --- */
html[data-ec-storefront="marketa"] .mk-sec-title,
html[data-ec-storefront="marketa"] .mk-flash-title,
html[data-ec-storefront="marketa"] .featured-products-section h2,
html[data-ec-storefront="marketa"] .ec-console-sec-head h2,
html[data-ec-storefront="marketa"] .section-title h2 {
  font-size: 21px !important;
  font-weight: 700 !important;
  line-height: 1.25 !important;
  letter-spacing: -0.01em !important;
  margin: 0 !important;
}
/* Dark ink for on-white titles (flash title stays white on its navy bar) */
html[data-ec-storefront="marketa"] .mk-sec-title,
html[data-ec-storefront="marketa"] .featured-products-section h2,
html[data-ec-storefront="marketa"] .ec-console-sec-head h2,
html[data-ec-storefront="marketa"] .section-title h2 {
  color: var(--mk-ink) !important;
}

/* --- Consistent section header row (title left, action right) --- */
html[data-ec-storefront="marketa"] .mk-sec-head,
html[data-ec-storefront="marketa"] .ec-console-sec-head,
html[data-ec-storefront="marketa"] .section-title {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 16px !important;
  margin-bottom: 20px !important;
}

/* --- Unified "view all" action link --- */
html[data-ec-storefront="marketa"] .mk-sec-more,
html[data-ec-storefront="marketa"] .ec-console-sec-head a,
html[data-ec-storefront="marketa"] .section-title a {
  font-size: 16px !important;
  font-weight: 700 !important;
  color: var(--mk-blue) !important;
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  gap: 5px;
}

/* Benefit strip: a touch more breathing room under the hero */
html[data-ec-storefront="marketa"] .mk-benefit {
  padding-top: 10px !important;
  padding-bottom: 24px !important;
}

/* --- Mobile menu panel: solid bg (desktop nav is transparent-on-blue, but the
   mobile off-canvas is the SAME .nav-menu-wrapper and must be opaque) --- */
@media screen and (max-width: 991px) {
  html[data-ec-storefront="marketa"] .nav-menu-wrapper,
  html[data-ec-storefront="marketa"] .nav-menu.w-nav-menu {
    background: #ffffff !important;
    border-bottom: 0 !important;
  }
  html[data-ec-storefront="marketa"] .nav-menu-wrapper .nav-menu-link,
  html[data-ec-storefront="marketa"] .nav-menu-wrapper .nav-menu-link.w-nav-link {
    color: var(--mk-ink) !important;
    -webkit-text-fill-color: var(--mk-ink) !important;
  }
  html[data-ec-storefront="marketa"] .nav-menu-wrapper .nav-menu-link-wrap {
    border-bottom: 1px solid var(--mk-line) !important;
  }
}

/* ==========================================================================
   Unified button typography — all action buttons 15px / weight 500
   ========================================================================== */
html[data-ec-storefront="marketa"] #ec-add-to-bag-btn,
html[data-ec-storefront="marketa"] #ec-add-to-bag-btn div,
html[data-ec-storefront="marketa"] #ec-add-to-bag-btn span,
html[data-ec-storefront="marketa"] #ec-buy-now-btn,
html[data-ec-storefront="marketa"] #ec-buy-now-btn div,
html[data-ec-storefront="marketa"] #ec-buy-now-btn span,
html[data-ec-storefront="marketa"] .primary-cart-btn-text,
html[data-ec-storefront="marketa"] .mk-card .product-cart,
html[data-ec-storefront="marketa"] .mk-card .product-cart-text,
html[data-ec-storefront="marketa"] .product-cart,
html[data-ec-storefront="marketa"] .product-cart-text,
html[data-ec-storefront="marketa"] .mk-cta-btn,
html[data-ec-storefront="marketa"] .mk-obg-btn,
html[data-ec-storefront="marketa"] .mk-hero-btn,
html[data-ec-storefront="marketa"] .search-button-2,
html[data-ec-storefront="marketa"] .search-button-2 .text-block-6,
html[data-ec-storefront="marketa"] .primary-button,
html[data-ec-storefront="marketa"] .secondary-button,
html[data-ec-storefront="marketa"] .checkout-button,
html[data-ec-storefront="marketa"] .place-order-button,
html[data-ec-storefront="marketa"] .w-commerce-commercecheckoutplaceorderbutton,
html[data-ec-storefront="marketa"] .ec-checkout-default-submit,
html[data-ec-storefront="marketa"] .ec-checkout-default-coupon-btn,
html[data-ec-storefront="marketa"] .ec-cart-checkout-btn,
html[data-ec-storefront="marketa"] .ec-cart-checkout {
  font-size: 15px !important;
  font-weight: 500 !important;
}

/* ==========================================================================
   Mega menu typography + sticky header (keeps mega/dropdown panels attached)
   ========================================================================== */
html[data-ec-storefront="marketa"] .ec-mega-panel__heading {
  font-size: 15px !important;
  font-weight: 500 !important;
}
html[data-ec-storefront="marketa"] .ec-mega-panel__link,
html[data-ec-storefront="marketa"] .ec-mega-panel a.ec-nav-dropdown-link,
html[data-ec-storefront="marketa"] .ec-mega-panel .ec-nav-dropdown-link {
  font-size: 15px !important;
}
/* sticky header → the fixed mega panel top stays aligned on scroll
   (theme-fixes pins position:relative !important, so we must !important too) */
html[data-ec-storefront="marketa"] .header-section {
  position: sticky !important;
  top: 0 !important;
  z-index: 150 !important;
}

/* ==========================================================================
   PDP: summary as a card + wider gallery (was a rigid 50/50 split)
   ========================================================================== */
html[data-ec-storefront="marketa"] .product-summaty-content {
  overflow-wrap: anywhere;
  border: 1px solid rgb(148 163 184 / .35);
  border-radius: 14px;
  padding: 20px;
  background: #fff;
}
html[data-ec-storefront="marketa"] .product-de-content {
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.18fr) !important;
}

/* toast/notification must float ABOVE the sticky header (z-index 150) */
html[data-ec-storefront="marketa"] .ec-toast-wrap {
  z-index: 2000 !important;
}

/* ==========================================================================
   Sticky header shrink-on-scroll → thinner bar (adds .mk-hstuck on <html>)
   ========================================================================== */
html[data-ec-storefront="marketa"] .nav-top-container,
html[data-ec-storefront="marketa"] .header-section .nav-menu-block,
html[data-ec-storefront="marketa"] .ec-console-logo-desktop {
  transition: height .18s ease, max-height .18s ease;
}
/* thinner nav row (height wins where padding is pinned by other rules) */
html.mk-hstuck[data-ec-storefront="marketa"] .nav-top-container {
  height: 62px !important;
}
/* thinner menu row */
html.mk-hstuck[data-ec-storefront="marketa"] .header-section .nav-menu-block {
  height: 30px !important;
}
/* slightly smaller logo when shrunk */
html.mk-hstuck[data-ec-storefront="marketa"] .ec-console-logo-desktop {
  max-height: 40px !important;
}
/* shorter search bar in the shrunk sticky bar */
html.mk-hstuck[data-ec-storefront="marketa"] .search-bar.ec-console-search-form {
  height: 40px !important;
  min-height: 40px !important;
}
/* a subtle shadow to lift the shrunk bar off the content */
html.mk-hstuck[data-ec-storefront="marketa"] .header-section {
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.12) !important;
}

/* ==========================================================================
   Cart drawer/sidebar — bump the small text to readable sizes
   ========================================================================== */
html[data-ec-storefront="marketa"] .ec-cart-panel .ec-cart-head h3,
html[data-ec-storefront="marketa"] .ec-cart-panel h3 { font-size: 16px !important; }
html[data-ec-storefront="marketa"] .ec-cart-count-label { font-size: 13px !important; }
html[data-ec-storefront="marketa"] .ec-cart-name { font-size: 14px !important; }
html[data-ec-storefront="marketa"] .ec-cart-line { font-size: 13.5px !important; }
html[data-ec-storefront="marketa"] .ec-cart-qty-value { font-size: 14px !important; }
html[data-ec-storefront="marketa"] .ec-cart-remove { font-size: 13px !important; }
html[data-ec-storefront="marketa"] .ec-cart-view { font-size: 13px !important; }
html[data-ec-storefront="marketa"] .ec-cart-subhead,
html[data-ec-storefront="marketa"] .ec-cart-subtotal { font-size: 14px !important; }

/* product-tabs .tab-link: inherit font, center, add bottom padding */
html[data-ec-storefront="marketa"] .tab-link {
  font-family: inherit;
  justify-content: center;
  padding: 0 0 15px 0 !important;
}

/* mobile sticky header: once scrolled, drop the search row so the stuck bar
   stays compact (just the logo/menu/cart toolbar) */
@media screen and (max-width: 991px) {
  html.mk-hstuck[data-ec-storefront="marketa"] .nav-top-container {
    display: none !important;
  }
  /* mobile header (non-sticky / at top): a little bottom breathing room */
  html[data-ec-storefront="marketa"] .header-section {
    padding-bottom: 12px !important;
  }
  /* once scrolled/compact, drop it */
  html.mk-hstuck[data-ec-storefront="marketa"] .header-section {
    padding-bottom: 0 !important;
  }
}