/*
 * Storefront redesign: shared base for every redesigned page (catalog, product).
 * Loaded on itm_is_redesigned_page() pages and scoped by body.itm-redesign -
 * see inc/itm-category.php. Fonts, design tokens, breadcrumbs, eyebrow labels,
 * net prices, the product card grid and the "Cere ofertă" CTA strip.
 * Schibsted Grotesk is declared globally in custom-style.css.
 */

/* JetBrains Mono is declared in itm-layout.css, loaded on every page. */

/* The design tokens and the Martfury primary colour mapping are set on every
   page in itm-layout.css. */
body.itm-redesign {
  background-color: var(--itm-paper);
}

body.itm-redesign :is(.page-header-catalog, .page-header-page),
body.itm-redesign #content {
  font-family: var(--itm-font);
  color: var(--itm-ink);
  background-color: var(--itm-paper);
}

/* Breadcrumbs bar: compact white bar under the main navigation on every
   redesigned page (catalog and product headers, and page headers such as the cart). */
body.itm-redesign :is(.page-header-catalog, .page-header-page) {
  margin: 0;
  padding: 0;
  border-bottom: 1px solid var(--itm-line);
  background: var(--itm-white);
}

body.itm-redesign :is(.page-header-catalog, .page-header-page) .page-breadcrumbs {
  margin: 0;
  padding: 14px 0;
}

body.itm-redesign :is(.page-header-catalog, .page-header-page) ul.breadcrumbs {
  padding: 0; /* Martfury adds 20px above and below. */
}

/* Martfury pads the content area 30px; each page's first block sets its own
   top spacing (category header 40px, shop title 40px, product grid 24px). */
body.itm-redesign #content {
  padding-top: 0;
}

body.itm-redesign :is(.page-header-catalog, .page-header-page) .breadcrumbs {
  margin: 0;
  font-size: 14px;
  line-height: 1.4;
  color: var(--itm-muted-2);
}

body.itm-redesign :is(.page-header-catalog, .page-header-page) .breadcrumbs a,
body.itm-redesign :is(.page-header-catalog, .page-header-page) .breadcrumbs .sep {
  color: var(--itm-muted-2);
}

body.itm-redesign :is(.page-header-catalog, .page-header-page) .breadcrumbs .sep {
  margin: 0 8px;
}

body.itm-redesign :is(.page-header-catalog, .page-header-page) .breadcrumbs a:hover {
  color: var(--itm-ink);
}

body.itm-redesign :is(.page-header-catalog, .page-header-page) .breadcrumbs li:last-child a,
body.itm-redesign :is(.page-header-catalog, .page-header-page) .breadcrumbs li:last-child span {
  color: var(--itm-ink);
  font-weight: 500;
}

/* Shared */
body.itm-redesign .itm-eyebrow {
  margin: 0;
  font-family: var(--itm-font-mono);
  font-size: 13px;
  font-weight: 400;
  line-height: 1.4;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--itm-muted-2);
}

/* Prices on category pages show the net amount only; the "netto" suffix
   added by the itmedia plugins is explained in the cart and on product pages.
   !important is needed against the global suffix and .amount rules in custom-style.css. */
body.itm-redesign .itm-featured__price br,
body.itm-redesign .itm-featured__price .woocommerce-price-suffix,
body.itm-redesign .itm-card__price br,
body.itm-redesign .itm-card__price .woocommerce-price-suffix {
  display: none !important;
}

/* Product grid and cards (catalog pages and [products] shortcode loops on redesigned pages).
   Selectors are anchored on ul.products:not(.slick-slider) to outrank Martfury's
   ".woocommerce ul.products:not(.slick-slider)" and "li.product h2 a" rules. */
:is(body.itm-redesign.woocommerce, body.itm-redesign .woocommerce) ul.products:not(.slick-slider) {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 20px;
  margin: 0;
  padding: 0;
  list-style: none;
}

:is(body.itm-redesign.woocommerce, body.itm-redesign .woocommerce) ul.products:not(.slick-slider)::before,
:is(body.itm-redesign.woocommerce, body.itm-redesign .woocommerce) ul.products:not(.slick-slider)::after {
  content: none;
  display: none;
}

:is(body.itm-redesign.woocommerce, body.itm-redesign .woocommerce) ul.products:not(.slick-slider) li.itm-card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 14px;
  float: none;
  width: auto;
  min-width: 0;
  margin: 0;
  padding: 20px;
  border: 1px solid var(--itm-line);
  border-radius: var(--itm-radius-card);
  background: var(--itm-white);
  box-shadow: none;
  transition: border-color 0.15s;
}

:is(body.itm-redesign.woocommerce, body.itm-redesign .woocommerce) ul.products:not(.slick-slider) li.itm-card:hover {
  border-color: #cfc7bb;
  box-shadow: none;
}

:is(body.itm-redesign.woocommerce, body.itm-redesign .woocommerce) ul.products:not(.slick-slider) li.itm-card .itm-card__media {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 150px;
  padding: 16px;
  border-radius: 14px;
  background: var(--itm-soft);
  overflow: hidden;
}

:is(body.itm-redesign.woocommerce, body.itm-redesign .woocommerce) ul.products:not(.slick-slider) li.itm-card .itm-card__media picture {
  display: contents;
}

:is(body.itm-redesign.woocommerce, body.itm-redesign .woocommerce) ul.products:not(.slick-slider) li.itm-card .itm-card__media img {
  width: 100%;
  height: 100%;
  margin: 0;
  border-radius: 10px;
  object-fit: contain;
}

:is(body.itm-redesign.woocommerce, body.itm-redesign .woocommerce) ul.products:not(.slick-slider) li.itm-card .onsale {
  position: absolute;
  top: 10px;
  left: 10px;
  z-index: 1;
  min-width: 0;
  min-height: 0;
  margin: 0;
  padding: 4px 10px;
  border-radius: var(--itm-radius-pill);
  background: var(--itm-ink);
  color: var(--itm-white);
  font-family: var(--itm-font-mono);
  font-size: 11px;
  font-weight: 500;
  line-height: 1.4;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

:is(body.itm-redesign.woocommerce, body.itm-redesign .woocommerce) ul.products:not(.slick-slider) li.itm-card .itm-card__body {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
}

:is(body.itm-redesign.woocommerce, body.itm-redesign .woocommerce) ul.products:not(.slick-slider) li.itm-card .itm-card__type {
  margin: 0;
  font-family: var(--itm-font-mono);
  font-size: 11px;
  line-height: 1.4;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--itm-muted-3);
}

:is(body.itm-redesign.woocommerce, body.itm-redesign .woocommerce) ul.products:not(.slick-slider) li.itm-card .itm-card__title {
  margin: 0;
  padding: 0;
  font-family: var(--itm-font);
  font-size: 18px;
  font-weight: 600;
  line-height: 1.25;
}

:is(body.itm-redesign.woocommerce, body.itm-redesign .woocommerce) ul.products:not(.slick-slider) li.itm-card .itm-card__title a {
  color: var(--itm-ink);
}

:is(body.itm-redesign.woocommerce, body.itm-redesign .woocommerce) ul.products:not(.slick-slider) li.itm-card .itm-card__title a::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
}

:is(body.itm-redesign.woocommerce, body.itm-redesign .woocommerce) ul.products:not(.slick-slider) li.itm-card .itm-card__subtitle {
  display: -webkit-box;
  margin: 0;
  overflow: hidden;
  font-size: 14px;
  line-height: 1.45;
  color: var(--itm-muted-2);
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
}

:is(body.itm-redesign.woocommerce, body.itm-redesign .woocommerce) ul.products:not(.slick-slider) li.itm-card .itm-card__footer {
  display: flex;
  flex-wrap: wrap; /* a long price and "Alege opțiunile" do not fit side by side in narrow cards */
  align-items: center;
  justify-content: space-between;
  gap: 10px 12px;
  margin-top: auto;
}

:is(body.itm-redesign.woocommerce, body.itm-redesign .woocommerce) ul.products:not(.slick-slider) li.itm-card .itm-card__price,
:is(body.itm-redesign.woocommerce, body.itm-redesign .woocommerce) ul.products:not(.slick-slider) li.itm-card .itm-card__price .amount {
  margin: 0;
  font-size: 20px;
  font-weight: 700;
  line-height: 1.2;
  white-space: nowrap;
  color: var(--itm-ink) !important;
}

:is(body.itm-redesign.woocommerce, body.itm-redesign .woocommerce) ul.products:not(.slick-slider) li.itm-card .itm-card__price del,
:is(body.itm-redesign.woocommerce, body.itm-redesign .woocommerce) ul.products:not(.slick-slider) li.itm-card .itm-card__price del .amount {
  margin-right: 6px;
  font-size: 14px;
  font-weight: 500;
  color: var(--itm-muted-3) !important;
}

:is(body.itm-redesign.woocommerce, body.itm-redesign .woocommerce) ul.products:not(.slick-slider) li.itm-card .itm-card__price ins {
  text-decoration: none;
}

/* Card controls sit above the stretched title link. */
:is(body.itm-redesign.woocommerce, body.itm-redesign .woocommerce) ul.products:not(.slick-slider) li.itm-card .itm-card__footer .button,
:is(body.itm-redesign.woocommerce, body.itm-redesign .woocommerce) ul.products:not(.slick-slider) li.itm-card .itm-card__footer .added_to_cart,
:is(body.itm-redesign.woocommerce, body.itm-redesign .woocommerce) ul.products:not(.slick-slider) li.itm-card .coterm-date-sign {
  position: relative;
  z-index: 1;
}

:is(body.itm-redesign.woocommerce, body.itm-redesign .woocommerce) ul.products:not(.slick-slider) li.itm-card .itm-card__add {
  display: inline-flex;
  flex: none;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: var(--itm-ink);
  color: var(--itm-white);
  line-height: 1;
}

:is(body.itm-redesign.woocommerce, body.itm-redesign .woocommerce) ul.products:not(.slick-slider) li.itm-card .itm-card__add svg {
  display: block;
  width: 16px;
  height: 16px;
}

:is(body.itm-redesign.woocommerce, body.itm-redesign .woocommerce) ul.products:not(.slick-slider) li.itm-card .itm-card__add:hover {
  background: var(--itm-ink-2);
  color: var(--itm-white);
}

:is(body.itm-redesign.woocommerce, body.itm-redesign .woocommerce) ul.products:not(.slick-slider) li.itm-card .itm-card__add.loading {
  opacity: 0.6;
}

:is(body.itm-redesign.woocommerce, body.itm-redesign .woocommerce) ul.products:not(.slick-slider) li.itm-card .itm-card__add.loading::after,
:is(body.itm-redesign.woocommerce, body.itm-redesign .woocommerce) ul.products:not(.slick-slider) li.itm-card .itm-card__add.added::after {
  display: none;
}

/* After a successful AJAX add the plus turns into a check mark. */
:is(body.itm-redesign.woocommerce, body.itm-redesign .woocommerce) ul.products:not(.slick-slider) li.itm-card .itm-card__add.added svg {
  display: none;
}

:is(body.itm-redesign.woocommerce, body.itm-redesign .woocommerce) ul.products:not(.slick-slider) li.itm-card .itm-card__add.added::before {
  content: "✓";
  font-size: 18px;
  font-weight: 600;
  line-height: 1;
}

:is(body.itm-redesign.woocommerce, body.itm-redesign .woocommerce) ul.products:not(.slick-slider) li.itm-card .itm-card__link,
:is(body.itm-redesign.woocommerce, body.itm-redesign .woocommerce) ul.products:not(.slick-slider) li.itm-card .view-more {
  display: inline-flex;
  flex: none;
  align-items: center;
  height: auto;
  margin: 0;
  padding: 10px 16px;
  border: 1px solid var(--itm-input-border);
  border-radius: var(--itm-radius-pill);
  background: var(--itm-white);
  color: var(--itm-ink);
  font-family: var(--itm-font);
  font-size: 14px;
  font-weight: 600;
  line-height: 1.2;
  text-transform: none;
}

:is(body.itm-redesign.woocommerce, body.itm-redesign .woocommerce) ul.products:not(.slick-slider) li.itm-card .itm-card__link:hover,
:is(body.itm-redesign.woocommerce, body.itm-redesign .woocommerce) ul.products:not(.slick-slider) li.itm-card .view-more:hover {
  border-color: var(--itm-ink);
  background: var(--itm-white);
  color: var(--itm-ink);
}

:is(body.itm-redesign.woocommerce, body.itm-redesign .woocommerce) ul.products:not(.slick-slider) li.itm-card .added_to_cart {
  display: none;
}

/* Bottom CTA strip */
.itm-cta {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 40px;
  margin: 56px 0 96px;
  padding: 36px 40px;
  border: 1px solid var(--itm-line);
  border-radius: var(--itm-radius-box);
  background: var(--itm-white);
}

body.itm-redesign img.itm-cta__badge {
  display: block;
  width: auto;
  height: 72px;
}

body.itm-redesign .itm-cta__title {
  margin: 0 0 6px;
  font-family: var(--itm-font);
  font-size: 24px;
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: -0.01em;
  color: var(--itm-ink);
  text-wrap: balance;
}

.itm-cta__text p {
  margin: 0;
  font-size: 16px;
  line-height: 1.5;
  color: var(--itm-muted);
}

body.itm-redesign .itm-cta__button {
  display: inline-flex;
  align-items: center;
  padding: 15px 26px;
  border-radius: var(--itm-radius-pill);
  background: var(--itm-ink);
  color: var(--itm-white);
  font-family: var(--itm-font);
  font-size: 16px;
  font-weight: 600;
  line-height: 1.2;
  white-space: nowrap;
}

body.itm-redesign .itm-cta__button:hover,
body.itm-redesign .itm-cta__button:focus {
  background: var(--itm-ink-2);
  color: var(--itm-white);
}

/* Responsive */
@media (max-width: 1199px) {
  .itm-cta {
    grid-template-columns: minmax(0, 1fr);
    justify-items: start;
    gap: 20px;
  }

  :is(body.itm-redesign.woocommerce, body.itm-redesign .woocommerce) ul.products:not(.slick-slider) {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 991px) {
  :is(body.itm-redesign.woocommerce, body.itm-redesign .woocommerce) ul.products:not(.slick-slider) {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 760px) {
  /* 20px side gutter: container padding minus Bootstrap row/column gutters (15px each). */
  body.itm-redesign #content > .container,
  body.itm-redesign :is(.page-header-catalog, .page-header-page) .container {
    padding-right: 20px;
    padding-left: 20px;
  }

  .itm-cta {
    margin: 40px 0 64px;
    padding: 28px 24px;
  }

  body.itm-redesign img.itm-cta__badge {
    height: 56px;
  }

  body.itm-redesign .itm-cta__title {
    font-size: 21px;
  }

  :is(body.itm-redesign.woocommerce, body.itm-redesign .woocommerce) ul.products:not(.slick-slider) {
    gap: 12px;
  }

  :is(body.itm-redesign.woocommerce, body.itm-redesign .woocommerce) ul.products:not(.slick-slider) li.itm-card {
    padding: 14px;
  }

  :is(body.itm-redesign.woocommerce, body.itm-redesign .woocommerce) ul.products:not(.slick-slider) li.itm-card .itm-card__media {
    height: 120px;
  }

  :is(body.itm-redesign.woocommerce, body.itm-redesign .woocommerce) ul.products:not(.slick-slider) li.itm-card .itm-card__title {
    font-size: 16px;
  }
}

@media (max-width: 479px) {
  :is(body.itm-redesign.woocommerce, body.itm-redesign .woocommerce) ul.products:not(.slick-slider) {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* Notices (.itm-notice): one white card, one row per notice, on the cart, the
   login, the account, the checkout and the order pages (also the checkout's
   AJAX error group). Success rows get an ink check, errors a red "!". */
/* Empty, or holding only whitespace after a notice was removed by script. */
:is(body.itm-cart-page, body.itm-auth-page, body.itm-account-page, body.itm-checkout-page, body.itm-order-page) :is(.woocommerce-notices-wrapper, .woocommerce-NoticeGroup):not(:has(*)) {
  display: none;
}

:is(body.itm-cart-page, body.itm-auth-page, body.itm-account-page, body.itm-checkout-page, body.itm-order-page) :is(.woocommerce-notices-wrapper, .woocommerce-NoticeGroup) {
  margin: 0;
  padding: 0;
  overflow: hidden;
  border: 1px solid var(--itm-line);
  border-radius: 16px;
  background: var(--itm-white);
}

:is(body.itm-cart-page, body.itm-auth-page, body.itm-account-page, body.itm-checkout-page, body.itm-order-page) :is(.woocommerce-notices-wrapper, .woocommerce-NoticeGroup):has(.woocommerce-error) {
  border-color: #e9c9c6;
}

:is(body.itm-cart-page, body.itm-auth-page, body.itm-account-page, body.itm-checkout-page, body.itm-order-page) :is(.woocommerce-notices-wrapper, .woocommerce-NoticeGroup) :is(.woocommerce-message, .woocommerce-info, .woocommerce-error) {
  position: relative;
  margin: 0 !important; /* Martfury: 20px below each notice */
  padding: 0;
  border: 0;
  background: none;
  box-shadow: none;
  font-size: 15px;
  line-height: 1.45;
  color: var(--itm-ink);
  list-style: none;
}

:is(body.itm-cart-page, body.itm-auth-page, body.itm-account-page, body.itm-checkout-page, body.itm-order-page) :is(.woocommerce-notices-wrapper, .woocommerce-NoticeGroup) :is(.woocommerce-message, .woocommerce-info),
:is(body.itm-cart-page, body.itm-auth-page, body.itm-account-page, body.itm-checkout-page, body.itm-order-page) :is(.woocommerce-notices-wrapper, .woocommerce-NoticeGroup) .woocommerce-error li {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  margin: 0;
  padding: 14px 18px;
}

:is(body.itm-cart-page, body.itm-auth-page, body.itm-account-page, body.itm-checkout-page, body.itm-order-page) :is(.woocommerce-notices-wrapper, .woocommerce-NoticeGroup) > * + *,
:is(body.itm-cart-page, body.itm-auth-page, body.itm-account-page, body.itm-checkout-page, body.itm-order-page) :is(.woocommerce-notices-wrapper, .woocommerce-NoticeGroup) .woocommerce-error li + li {
  border-top: 1px solid var(--itm-line);
}

:is(body.itm-cart-page, body.itm-auth-page, body.itm-account-page, body.itm-checkout-page, body.itm-order-page) :is(.woocommerce-notices-wrapper, .woocommerce-NoticeGroup) :is(.woocommerce-message, .woocommerce-info, .woocommerce-error li)::before {
  content: "\2713";
  position: static;
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  margin-top: 1px;
  border-radius: 50%;
  background: var(--itm-ink);
  font-family: var(--itm-font);
  font-size: 12px;
  line-height: 1;
  color: var(--itm-white) !important; /* Martfury colours the notice icon */
}

:is(body.itm-cart-page, body.itm-auth-page, body.itm-account-page, body.itm-checkout-page, body.itm-order-page) :is(.woocommerce-notices-wrapper, .woocommerce-NoticeGroup) .woocommerce-error li::before {
  content: "!";
  background: #b3261e;
  font-weight: 700;
}

:is(body.itm-cart-page, body.itm-auth-page, body.itm-account-page, body.itm-checkout-page, body.itm-order-page) :is(.woocommerce-notices-wrapper, .woocommerce-NoticeGroup) .woocommerce-error::before,
:is(body.itm-cart-page, body.itm-auth-page, body.itm-account-page, body.itm-checkout-page, body.itm-order-page) :is(.woocommerce-notices-wrapper, .woocommerce-NoticeGroup) :is(.woocommerce-message, .woocommerce-info) > i,
:is(body.itm-cart-page, body.itm-auth-page, body.itm-account-page, body.itm-checkout-page, body.itm-order-page) :is(.woocommerce-notices-wrapper, .woocommerce-NoticeGroup) .button.wc-forward {
  display: none;
}

:is(body.itm-cart-page, body.itm-auth-page, body.itm-account-page, body.itm-checkout-page, body.itm-order-page) :is(.woocommerce-notices-wrapper, .woocommerce-NoticeGroup) a:not(.button) {
  color: var(--itm-ink);
  text-decoration: underline;
}

/* WooCommerce zeroes the left padding of error list items with !important. */
:is(body.itm-cart-page, body.itm-auth-page, body.itm-account-page, body.itm-checkout-page, body.itm-order-page) :is(.woocommerce-notices-wrapper, .woocommerce-NoticeGroup) .woocommerce-error li {
  padding-left: 18px !important;
}

/* Broken [itm_price] / [itm_add_to_cart] shortcode, shown to editors in preview only. */
.itm-shortcode-warning {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 6px;
  background: #fde8e4;
  color: #a1260f;
  font-size: 13px;
  font-weight: 600;
}