/*
 * Carpatian p15 design: product page, quickview, "added to cart" popup, cart, quick checkout, account / contact forms
 * (owned by the product design agent, docs/packages/p15_design_prod.md). Loaded after Journal, the skin custom CSS,
 * cr_visual.css and the other cr_design_* files of the base/header/home/listing zones by vqmod/xml/cr_p15_design.xml.
 * Colours and fonts only from cr_design_tokens.css. Red is the "buy" colour only (add to cart, checkout, sale price);
 * graphite for form submits, dark blue for secondary buttons and links.
 * html[class] body = one class + two elements in front of the Journal selector, so the rules win by specificity and
 * order; !important only where Journal or the skin custom CSS use it, or against inline styles.
 */
:root {
  /* local helpers derived from the tokens (field borders need 3:1 against white, WCAG 1.4.11) */
  --crp-field: color-mix(in srgb, var(--cr-text-muted) 80%, var(--cr-bg));
  --crp-focus: color-mix(in srgb, var(--cr-blue) 22%, transparent);
  --crp-buy: var(--cr-accent-hover); /* white text on #df1f2c = 4.8:1 (AA); #f8303d only for large text */
  --crp-buy-hover: color-mix(in srgb, var(--cr-accent-hover) 82%, var(--cr-dark-deep));
  --crp-panel-pad: 28px;
}

/* =============================================================================================
 * 1. Shared: fields, buttons and focus on the pages of this zone
 * ============================================================================================= */
html.route-product-product body .form-control,
html[class*="route-checkout-"] body .form-control,
html[class*="route-account-"] body .form-control,
html.route-information-contact body .form-control {
  min-height: 46px;
  border: 1px solid var(--crp-field);
  border-radius: var(--cr-radius-sm);
  background-color: var(--cr-bg);
  color: var(--cr-text);
  font-family: var(--cr-font-body);
  font-size: 16px; /* 16px: no zoom-on-focus on iOS */
  box-shadow: none;
  transition: border-color var(--cr-fast) ease, box-shadow var(--cr-fast) ease;
}

html.route-product-product body textarea.form-control,
html[class*="route-checkout-"] body textarea.form-control,
html[class*="route-account-"] body textarea.form-control,
html.route-information-contact body textarea.form-control {
  min-height: 110px;
}

html.route-product-product body .form-control:focus,
html[class*="route-checkout-"] body .form-control:focus,
html[class*="route-account-"] body .form-control:focus,
html.route-information-contact body .form-control:focus {
  border-color: var(--cr-blue);
  box-shadow: 0 0 0 3px var(--crp-focus);
  outline: none;
}

html.route-product-product body .btn:focus-visible,
html[class*="route-checkout-"] body .btn:focus-visible,
html[class*="route-account-"] body .btn:focus-visible,
html.route-information-contact body .btn:focus-visible,
html.route-product-product body .product-info a:focus-visible,
html[class*="route-checkout-"] body #content a:focus-visible,
html[class*="route-account-"] body #content a:focus-visible,
html.route-product-product body input[type="radio"]:focus-visible,
html.route-product-product body input[type="checkbox"]:focus-visible,
html[class*="route-checkout-"] body input[type="radio"]:focus-visible,
html[class*="route-checkout-"] body input[type="checkbox"]:focus-visible,
html[class*="route-account-"] body input[type="checkbox"]:focus-visible,
html.route-information-contact body input[type="checkbox"]:focus-visible {
  outline: 2px solid var(--cr-blue);
  outline-offset: 2px;
  box-shadow: none;
}

html.route-product-product body .control-label,
html[class*="route-checkout-"] body .control-label,
html[class*="route-account-"] body .control-label,
html.route-information-contact body .control-label {
  color: var(--cr-text);
  font-family: var(--cr-font-body);
  font-size: 15px;
  font-weight: 600;
}

html.route-product-product body .required > .control-label::after,
html[class*="route-checkout-"] body .required > .control-label::after,
html[class*="route-account-"] body .required > .control-label::after,
html.route-information-contact body .required > .control-label::after,
html.route-product-product body .required .control-label + * .required-mark {
  color: var(--crp-buy);
}

/* form submit (login, register, contact, review, account forms): graphite; hover dark blue */
html[class*="route-account-"] body #content .btn-primary,
html.route-information-contact body #content .btn-primary,
html.route-product-product body #button-review,
html[class*="route-checkout-"] body #content .checkout-section .btn-primary:not(#quick-checkout-button-confirm) {
  min-height: 46px;
  padding: 0 28px;
  border: 0;
  border-radius: var(--cr-radius-sm) !important;
  background: var(--cr-dark);
  color: var(--cr-text-on-dark) !important;
  font-family: var(--cr-font-display) !important;
  font-size: 16px !important;
  font-weight: 700 !important;
  letter-spacing: .04em;
  text-transform: uppercase !important;
  box-shadow: none;
  transition: background-color var(--cr-fast) ease;
}

html[class*="route-account-"] body #content .btn-primary:hover,
html.route-information-contact body #content .btn-primary:hover,
html.route-product-product body #button-review:hover,
html[class*="route-checkout-"] body #content .checkout-section .btn-primary:not(#quick-checkout-button-confirm):hover {
  background: var(--cr-blue);
  color: var(--cr-bg) !important;
}

/* secondary (continue shopping, back): outline dark blue */
html[class*="route-account-"] body #content .buttons .btn-default,
html[class*="route-checkout-"] body #content .buttons .btn-default,
html.route-checkout-cart body .cart-page .buttons .btn-default {
  min-height: 46px;
  padding: 0 22px;
  border: 1px solid var(--cr-blue);
  border-radius: var(--cr-radius-sm) !important;
  background: var(--cr-bg);
  color: var(--cr-blue) !important;
  font-family: var(--cr-font-display) !important;
  font-size: 15px !important;
  font-weight: 700 !important;
  letter-spacing: .04em;
  text-transform: uppercase !important;
}

html[class*="route-account-"] body #content .buttons .btn-default:hover,
html[class*="route-checkout-"] body #content .buttons .btn-default:hover,
html.route-checkout-cart body .cart-page .buttons .btn-default:hover {
  background: var(--cr-blue);
  color: var(--cr-bg) !important;
}

/* page titles of the zone: no gold bar under them (old Journal "Background Accent") */
html.route-product-product body .product-details > .title.page-title::after,
html[class*="route-checkout-"] body #content > h1.page-title::after,
html[class*="route-checkout-"] body h1.title.page-title::after,
html[class*="route-account-"] body h1.title.page-title::after,
html.route-information-contact body h1.title.page-title::after {
  display: none;
}

/* =============================================================================================
 * 2. Product page: two panels (gallery | buy box) on a white surface
 * ============================================================================================= */
html.route-product-product:not(.popup) body .product-info {
  padding: 30px;
  border: 1px solid var(--cr-line);
  border-radius: var(--cr-radius);
  background: var(--cr-bg);
}

/* gallery */
html.route-product-product body .product-info .product-image .main-image {
  border: 1px solid var(--cr-line);
  border-radius: var(--cr-radius);
  background: var(--cr-bg);
  overflow: hidden;
}

html.route-product-product body .product-info .product-image .main-image .swiper-slide img {
  border: 0;
}

html.route-product-product body .product-info .additional-images {
  margin-top: 12px;
}

html.route-product-product body .product-info .additional-images .additional-image {
  border: 1px solid var(--cr-line);
  border-radius: var(--cr-radius-sm);
  background: var(--cr-bg);
  overflow: hidden;
  cursor: pointer;
  opacity: .78;
  transition: opacity var(--cr-fast) ease, border-color var(--cr-fast) ease;
}

html.route-product-product body .product-info .additional-images .additional-image:hover,
html.route-product-product body .product-info .additional-images .additional-image.swiper-slide-active {
  border-color: var(--cr-dark);
  opacity: 1;
}

html.route-product-product body .product-info .additional-images .additional-image img {
  border: 0;
}

/* buy box: one column, reassurance blocks moved under the buttons */
html.route-product-product body .product-info .product-details {
  display: flex;
  flex-direction: column;
}

html.route-product-product body .product-info .product-details > * {
  order: 5;
}

html.route-product-product body .product-info .product-details > .title.page-title { order: 1; }
html.route-product-product body .product-info .product-details > .product-labels-outside { order: 1; }
html.route-product-product body .product-info .product-details > .product-stats { order: 2; }
html.route-product-product body .product-info .product-details > .rating { order: 2; }
html.route-product-product body .product-info .product-details > .cr-stock { order: 3; }
html.route-product-product body .product-info .product-details > .countdown-wrapper { order: 3; }
html.route-product-product body .product-info .product-details > .product-price-group { order: 4; }
html.route-product-product body .product-info .product-details > .product-options { order: 5; }
html.route-product-product body .product-info .product-details > .button-group-page { order: 6; }
html.route-product-product body .product-info .product-details > .product-blocks.blocks-top { order: 7; }
html.route-product-product body .product-info .product-details > .product-blocks.blocks-bottom { order: 8; }

html.route-product-product body .product-info .product-details > .title.page-title {
  margin: 0 0 14px;
  padding: 0;
  color: var(--cr-dark-deep);
  font-family: var(--cr-font-display);
  font-size: 32px;
  font-weight: 700;
  line-height: 1.12;
  letter-spacing: .01em;
  text-transform: uppercase;
}

/* stats: stock / brand / model / SKU as quiet label-value rows */
html.route-product-product body .product-info .product-stats {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  margin: 0 0 6px;
  padding: 0;
}

html.route-product-product body .product-info .product-stats ul {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 22px;
  margin: 0;
  padding: 0;
  list-style: none;
}

html.route-product-product body .product-info .product-stats li {
  margin: 0;
  padding: 0;
  color: var(--cr-text);
  font-size: 14px;
  line-height: 1.6;
}

html.route-product-product body .product-info .product-stats li::before {
  display: none;
}

html.route-product-product body .product-info .product-stats li b {
  margin-right: 4px;
  color: var(--cr-text-muted);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: .04em;
  text-transform: uppercase;
}

html.route-product-product body .product-info .product-stats li span,
html.route-product-product body .product-info .product-stats li a {
  color: var(--cr-text);
  font-weight: 600;
  text-transform: none;
}

html.route-product-product body .product-info .product-stats .product-manufacturer a {
  color: var(--cr-link);
}

/* stock: dark text with a coloured dot (the old green #2ab858 text was 2.6:1 on white) */
html.route-product-product body .product-info .product-stats .product-stock span {
  color: var(--cr-text) !important;
}

html.route-product-product body .product-info .product-stats .product-stock span::before {
  content: "";
  display: inline-block;
  width: 9px;
  height: 9px;
  margin-right: 6px;
  border-radius: 50%;
  background: var(--cr-success);
  vertical-align: 1px;
}

html.route-product-product body .product-info .product-stats .product-stock.out-of-stock span::before {
  background: var(--cr-accent);
}

html.route-product-product body .product-info .product-stats .brand-image {
  flex: 0 0 auto;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
}

html.route-product-product body .product-info .product-details .product-stats .brand-image a {
  margin: 0; /* skin: margin-top -30px */
  padding: 6px;
  border: 1px solid var(--cr-line);
  border-radius: var(--cr-radius);
  background: var(--cr-bg);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  color: var(--cr-link);
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
}

html.route-product-product body .product-info .product-stats .brand-image img {
  width: 64px;
  height: auto;
}

html.route-product-product body .product-info .rating.rating-page {
  margin: 4px 0 0;
  font-size: 14px;
}

html.route-product-product body .product-info .rating.rating-page .review-links a {
  color: var(--cr-link);
}

/* price: one line, dark; sale price in the accent, old price muted and struck */
html.route-product-product body .product-info .product-price-group {
  margin: 18px 0 4px;
  padding: 18px 0 0;
  border-top: 1px solid var(--cr-line);
  background: transparent;
}

html.route-product-product body .product-info .product-price-group .price-wrapper {
  display: block;
}

html.route-product-product body .product-info .product-details .price-group {
  display: flex !important; /* skin custom CSS: .route-product:not(.popup) ... .price-group { display: block !important } */
  flex-direction: row !important;
  flex-wrap: wrap;
  align-items: baseline !important;
  gap: 2px 14px;
  margin: 0 !important;
}

html.route-product-product body .product-info .product-details .product-price,
html.route-product-product body .product-info .product-details .product-price-new {
  display: inline-block;
  margin: 0;
  color: var(--cr-dark-deep);
  font-family: var(--cr-font-display);
  font-size: 38px;
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: .01em;
}

html.route-product-product body .product-info .product-details .product-price-new {
  color: var(--cr-accent); /* 38px bold = large text, 3.6:1 passes AA */
}

html.route-product-product body .product-info .product-details .product-price-old {
  display: inline-block;
  margin: 0;
  color: var(--cr-text-muted);
  font-family: var(--cr-font-body);
  font-size: 20px;
  font-weight: 400;
  text-decoration: line-through;
}

html.route-product-product body .product-info .product-details .product-tax,
html.route-product-product body .product-info .product-details .cr-vat-note,
html.route-product-product body .product-info .product-details .product-points {
  display: block;
  margin: 4px 0 0;
  color: var(--cr-text-muted);
  font-size: 13px;
  font-weight: 400;
}

html.route-product-product body .product-info .product-details .product-discount {
  color: var(--cr-text);
  font-size: 14px;
}

/* informative price in lei (logic: p17, cr_catalog.css): a discreet line, not a green box */
html.route-product-product body .product-info .product-details .cr-lei-price {
  display: block;
  margin: 6px 0 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: none;
  color: var(--cr-text-muted);
  font-size: 14px;
  line-height: 1.5;
}

html.route-product-product body .product-info .product-details .cr-lei-price__new,
html.route-product-product body .product-info .product-details .cr-lei-price__value {
  color: var(--cr-text);
  font-weight: 600;
}

html.route-product-product body .product-info .product-details .cr-lei-price__old {
  margin-left: 8px;
  color: var(--cr-text-muted);
  text-decoration: line-through;
}

/* stock per warehouse (p17 .cr-stock): keep their layout, quieter frame */
html.route-product-product body .product-info .product-details .cr-stock {
  margin: 14px 0 0;
  border-left-color: var(--cr-dark);
}

/* options (Related Options logic is p08: only the look here) */
html.route-product-product body .product-info .product-options {
  margin: 18px 0 4px;
  padding: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
}

html.route-product-product body .product-info .product-options .options-title {
  margin: 0 0 10px;
  padding: 0;
  color: var(--cr-text-muted);
  font-family: var(--cr-font-display);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
}

html.route-product-product body .product-info .product-options .options-title::after {
  display: none;
}

html.route-product-product body .product-info .product-options > .form-group {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 6px;
  margin: 0 0 14px;
  padding: 0;
}

html.route-product-product body .product-info .product-options > .form-group > .control-label {
  width: auto;
  max-width: none;
  margin: 0;
  padding: 0;
  text-align: start;
}

html.route-product-product body .product-info .product-options select.form-control {
  width: 100%;
  max-width: 420px;
  height: 46px;
  padding: 0 12px;
}

html.route-product-product body .product-info .product-options .radio label,
html.route-product-product body .product-info .product-options .checkbox label {
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 12px;
  border: 1px solid var(--crp-field);
  border-radius: var(--cr-radius-sm);
  background: var(--cr-bg);
  color: var(--cr-text);
  cursor: pointer;
}

html.route-product-product body .product-info .product-options .radio label:hover,
html.route-product-product body .product-info .product-options .checkbox label:hover {
  border-color: var(--cr-blue);
}

/* quantity -/+ and the big red "Adaugă în coș" */
html.route-product-product:not(.popup) body .product-info .button-group-page {
  margin: 10px 0 0;
  padding: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
}

html.route-product-product body .product-info .button-group-page .buttons-wrapper {
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
  gap: 12px;
}

html.route-product-product body .product-info .button-group-page .stepper-group {
  display: flex;
  flex: 1 1 auto;
  flex-wrap: nowrap;
  align-items: stretch;
  gap: 12px;
  margin: 0;
}

html.route-product-product body .product-info .button-group-page .stepper-group > .control-label {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

html.route-product-product body .product-info .stepper {
  display: flex;
  flex: 0 0 auto;
  align-items: stretch;
  width: 140px;
  height: 54px;
  padding: 0;
  border: 1px solid var(--crp-field);
  border-radius: var(--cr-radius-sm);
  background: var(--cr-bg);
  overflow: hidden;
}

html.route-product-product body .product-info .stepper input.form-control {
  flex: 1 1 auto;
  width: 48px;
  min-width: 0;
  height: 100%;
  min-height: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  color: var(--cr-dark-deep);
  font-size: 17px;
  font-weight: 600;
  text-align: center;
}

html.route-product-product body .product-info .stepper button {
  position: static;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 100%;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: var(--cr-bg-alt);
  color: var(--cr-dark);
  font-size: 0;
  cursor: pointer;
  transition: background-color var(--cr-fast) ease;
}

html.route-product-product body .product-info .stepper button:hover {
  background: var(--cr-line);
}

html.route-product-product body .product-info .stepper button::before {
  color: var(--cr-dark);
  font-family: var(--cr-font-body) !important; /* skin: icomoon !important */
  font-size: 22px;
  font-weight: 600;
  line-height: 1;
}

html.route-product-product body .product-info .stepper .fa-angle-down::before { content: "\2212" !important; }
html.route-product-product body .product-info .stepper .fa-angle-up::before { content: "+" !important; }

html.route-product-product body .product-info .button-group-page #button-cart.btn-cart {
  display: inline-flex;
  flex: 1 1 220px;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 54px;
  margin: 0;
  padding: 0 24px;
  border: 0;
  border-radius: var(--cr-radius-sm) !important;
  background: var(--crp-buy);
  box-shadow: 0 6px 14px color-mix(in srgb, var(--cr-accent) 28%, transparent);
  color: var(--cr-bg) !important;
  font-family: var(--cr-font-display) !important;
  font-size: 19px !important;
  font-weight: 700 !important;
  letter-spacing: .05em;
  text-transform: uppercase !important;
  transition: background-color var(--cr-fast) ease, transform var(--cr-fast) ease;
}

html.route-product-product body .product-info .button-group-page #button-cart.btn-cart:hover {
  background: var(--crp-buy-hover);
  color: var(--cr-bg) !important;
}

html.route-product-product body .product-info .button-group-page #button-cart.btn-cart:active {
  transform: translateY(1px);
}

html.route-product-product body .product-info .button-group-page #button-cart.btn-cart:focus-visible {
  outline: 3px solid var(--cr-dark);
  outline-offset: 2px;
}

html.route-product-product body .product-info .button-group-page #button-cart.btn-cart::before {
  color: var(--cr-bg) !important;
}

html.route-product-product body .product-info .button-group-page #button-cart .btn-text {
  color: inherit !important;
  font: inherit;
}

/* wishlist / compare: outline buttons with text */
html.route-product-product body .product-info .button-group-page .wishlist-compare {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  width: 100%;
  margin: 0;
  padding: 0;
  border: 0;
}

html.route-product-product body .product-info .button-group-page .wishlist-compare .btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  margin: 0;
  padding: 0 16px;
  border: 1px solid var(--cr-line);
  border-radius: var(--cr-radius-sm) !important;
  background: var(--cr-bg);
  color: var(--cr-blue) !important;
  font-family: var(--cr-font-body) !important;
  font-size: 15px !important;
  font-weight: 600 !important;
  text-transform: none !important;
  transition: border-color var(--cr-fast) ease, background-color var(--cr-fast) ease;
}

html.route-product-product body .product-info .button-group-page .wishlist-compare .btn:hover {
  border-color: var(--cr-blue);
  background: var(--cr-bg-alt);
  color: var(--cr-blue) !important;
}

html.route-product-product body .product-info .button-group-page .wishlist-compare .btn::before,
html.route-product-product body .product-info .button-group-page .wishlist-compare .btn .btn-text {
  color: inherit !important;
}

/* =============================================================================================
 * 3. Reassurance (#294 product blocks: Livrare #250, Suport telefonic #318)
 * ============================================================================================= */
html.route-product-product body .product-info .product-blocks.blocks-top {
  margin: 22px 0 0;
}

html.route-product-product body .product-info .product-blocks-294 {
  border: 1px solid var(--cr-line);
  border-radius: var(--cr-radius);
  background: var(--cr-bg-alt);
  overflow: hidden;
}

html.route-product-product body .product-info .product-blocks-294 .grid-row,
html.route-product-product body .product-info .product-blocks-294 .grid-col,
html.route-product-product body .product-info .product-blocks-294 .module-body {
  margin: 0;
  padding: 0;
  border: 0; /* row 1: 1px #ddd + 15px padding; module #318: 1px #333 box */
}

html.route-product-product body .product-info .product-blocks-294 .grid-row + .grid-row {
  border-top: 1px solid var(--cr-line);
}

html.route-product-product body .product-info .product-blocks-294 .row-bg {
  background: none;
}

html.route-product-product body .product-info .product-blocks-294 .info-block {
  display: flex;
  align-items: flex-start;
  justify-content: flex-start;
  gap: 14px;
  min-height: 0;
  margin: 0;
  padding: 14px 18px;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  text-align: start;
}

html.route-product-product body .product-info .product-blocks-294 a.info-block:hover {
  background: var(--cr-bg);
}

html.route-product-product body .product-info .product-blocks-294 .info-block::before {
  flex: 0 0 auto;
  width: 40px;
  margin: 2px 0 0;
  color: var(--cr-blue) !important;
  font-size: 30px;
  text-align: center;
}

html.route-product-product body .product-info .product-blocks-294 .info-block-content {
  padding: 0;
  text-align: start;
}

html.route-product-product body .product-info .product-blocks-294 .info-block-title {
  margin: 0 0 2px;
  color: var(--cr-dark-deep);
  font-family: var(--cr-font-display);
  font-size: 15px;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
}

html.route-product-product body .product-info .product-blocks-294 .info-block-text {
  color: var(--cr-text-muted);
  font-size: 13px;
  line-height: 1.5;
}

html.route-product-product body .product-info .product-blocks-294 .info-block-text strong[style] {
  color: var(--cr-blue) !important; /* inline style="color:red" in module #318 */
  font-family: var(--cr-font-display);
  font-size: 20px;
  letter-spacing: .03em;
}

html.route-product-product body .product-info .product-blocks-294 .info-block-button {
  display: none;
}

/* =============================================================================================
 * 4. Description / specifications / reviews (#304 / #303 / #301) as white sections
 * ============================================================================================= */
html.route-product-product body .product-blocks.blocks-default {
  margin-top: 30px;
}

html.route-product-product body .product-blocks.blocks-default .product_extra > div[class*="product-extra-"] {
  max-width: none;
  margin: 0 0 24px;
  padding: var(--crp-panel-pad) calc(var(--crp-panel-pad) + 4px);
  border: 1px solid var(--cr-line);
  border-radius: var(--cr-radius);
  background: var(--cr-bg);
}

html.route-product-product body .product-blocks.blocks-default .module-title {
  margin: 0 0 18px;
  padding: 0;
  color: var(--cr-dark-deep);
  font-family: var(--cr-font-display);
  font-size: 24px;
  font-weight: 700;
  letter-spacing: .02em;
  text-transform: uppercase;
}

html.route-product-product body .product-blocks.blocks-default .module-title::after {
  content: "";
  display: block;
  width: 40px;
  height: 3px;
  margin-top: 10px;
  background: var(--cr-dark);
}

html.route-product-product body .product-blocks.blocks-default .block-content {
  color: var(--cr-text);
  font-size: 16px;
  line-height: 1.7;
}

html.route-product-product body .product-blocks.blocks-default .block-content p,
html.route-product-product body .product-blocks.blocks-default .block-content ul {
  max-width: 82ch;
}

html.route-product-product body .product-blocks.blocks-default .block-content iframe {
  max-width: 100%;
  border-radius: var(--cr-radius);
}

/* "Vezi mai mult": white fade + small dark-blue button (its text comes from the skin, white) */
html.route-product-product body .product-blocks.blocks-default .block-expand-overlay {
  background: linear-gradient(to bottom, color-mix(in srgb, var(--cr-bg) 0%, transparent), var(--cr-bg) 70%);
}

html.route-product-product body .product-blocks.blocks-default .block-expand.btn {
  min-height: 40px;
  padding: 0 18px;
  border: 0;
  border-radius: var(--cr-radius-sm) !important;
  background: var(--cr-blue);
  color: var(--cr-bg) !important;
  font-size: 14px !important;
  font-weight: 600 !important;
}

html.route-product-product body .product-blocks.blocks-default .block-expand.btn:hover {
  background: var(--cr-link);
}

/* specifications table */
html.route-product-product body .product-blocks.blocks-default #tab-specification .table {
  width: 100%;
  margin: 0;
  border: 1px solid var(--cr-line);
  border-collapse: collapse;
  table-layout: auto;
}

html.route-product-product body .product-blocks.blocks-default #tab-specification .table td {
  padding: 11px 16px;
  border: 0;
  border-top: 1px solid var(--cr-line);
  color: var(--cr-text);
  font-size: 15px;
  line-height: 1.55;
  vertical-align: top;
  word-break: normal;
  overflow-wrap: break-word;
}

html.route-product-product body .product-blocks.blocks-default #tab-specification .table tbody td:first-child {
  width: 32%;
  min-width: 130px;
  color: var(--cr-text-muted);
  font-weight: 600;
}

html.route-product-product body .product-blocks.blocks-default #tab-specification .table tbody tr:nth-child(even) td {
  background: var(--cr-bg-alt);
}

html.route-product-product body .product-blocks.blocks-default #tab-specification .table thead td {
  border-top: 0;
  background: var(--cr-dark);
  color: var(--cr-text-on-dark);
  font-family: var(--cr-font-display);
  font-size: 14px;
  letter-spacing: .06em;
  text-transform: uppercase;
}

html.route-product-product body .product-blocks.blocks-default #tab-specification .table thead td strong {
  color: inherit;
  font-weight: 700;
}

/* reviews */
html.route-product-product body .product-extra-reviews #form-review h4 {
  margin: 8px 0 16px;
  color: var(--cr-dark-deep);
  font-family: var(--cr-font-display);
  font-size: 18px;
  font-weight: 700;
  text-transform: uppercase;
}

html.route-product-product body .product-extra-reviews #form-review .form-group {
  max-width: 760px;
}

html.route-product-product body .product-extra-reviews #form-review .help-block {
  color: var(--cr-text-muted);
  font-size: 13px;
}

html.route-product-product body .product-extra-reviews #form-review .help-block span[style] {
  color: var(--crp-buy) !important;
}

html.route-product-product body .product-extra-reviews #form-review .rate {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 6px;
}

html.route-product-product body .product-extra-reviews #form-review .rate input[type="radio"] {
  width: 22px;
  height: 22px;
  margin: 0 2px;
  accent-color: var(--cr-blue);
  cursor: pointer;
}

html.route-product-product body .product-extra-reviews #form-review .buttons {
  max-width: 760px;
  margin-top: 8px;
}

html.route-product-product body .product-extra-reviews #form-review .buttons .pull-right {
  float: none;
}

html.route-product-product body #button-review {
  width: auto;
  min-width: 180px;
}

/* =============================================================================================
 * 5. Related products row (#296 "Din aceeași categorie / Același brand", layout row bottom 4)
 * ============================================================================================= */
html.route-product-product:not(.popup) body .grid-row-bottom-3,
html.route-product-product:not(.popup) body .grid-row-bottom-4 {
  padding-top: 50px;
  padding-bottom: 50px;
}

/* layout row backgrounds (#eee and #daedf6 in the layout): white band, then the light page grey */
html.route-product-product:not(.popup) body .grid-row-bottom-3 > .row-bg,
html.route-product-product:not(.popup) body .grid-row-bottom-3 > .grid-cols-wrapper > .grid-cols {
  background-color: var(--cr-bg);
}

html.route-product-product:not(.popup) body .grid-row-bottom-4 > .row-bg,
html.route-product-product:not(.popup) body .grid-row-bottom-4 > .grid-cols-wrapper > .grid-cols {
  background-color: var(--cr-bg-alt);
}

html.route-product-product:not(.popup) body .grid-row-bottom-3 {
  border-top: 1px solid var(--cr-line);
  border-bottom: 1px solid var(--cr-line);
}

html.route-product-product body .module-products-262 .nav-tabs,
html.route-product-product body .module-products-296 .nav-tabs {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 4px 28px;
  margin: 0 0 26px;
  border: 0;
  background: transparent;
}

html.route-product-product body .module-products-262 .nav-tabs > li,
html.route-product-product body .module-products-296 .nav-tabs > li {
  float: none;
  margin: 0;
}

html.route-product-product body .module-products-262 .nav-tabs > li > a,
html.route-product-product body .module-products-296 .nav-tabs > li > a {
  min-height: 44px;
  display: flex;
  align-items: center;
  margin: 0;
  padding: 0 4px;
  border: 0;
  border-bottom: 4px solid transparent;
  border-radius: 0;
  background: transparent;
  color: var(--cr-text-muted);
  font-family: var(--cr-font-display);
  font-size: 22px;
  font-weight: 700;
  letter-spacing: .02em;
  text-transform: uppercase;
}

html.route-product-product body .module-products-262 .nav-tabs > li > a::after,
html.route-product-product body .module-products-296 .nav-tabs > li > a::after {
  display: none;
}

html.route-product-product body .module-products-262 .nav-tabs > li.active > a,
html.route-product-product body .module-products-296 .nav-tabs > li.active > a,
html.route-product-product body .module-products-262 .nav-tabs > li > a:hover,
html.route-product-product body .module-products-296 .nav-tabs > li > a:hover {
  border-bottom-color: var(--cr-accent);
  background: transparent;
  color: var(--cr-dark-deep);
}

/* =============================================================================================
 * 6. Phones / tablets: product page
 * ============================================================================================= */
@media (max-width: 1023px) {
  html.route-product-product:not(.popup) body .product-info {
    padding: 20px;
  }

  html.route-product-product body .product-info .product-details > .title.page-title {
    font-size: 26px;
  }
}

@media (max-width: 767px) {
  html.route-product-product:not(.popup) body .product-info {
    padding: 0;
    border: 0;
    background: transparent;
  }

  html.route-product-product body .product-info .product-details > .title.page-title {
    margin-top: 16px;
    font-size: 24px;
  }

  html.route-product-product body .product-info .product-details .product-price,
  html.route-product-product body .product-info .product-details .product-price-new {
    font-size: 32px;
  }

  html.route-product-product body .product-info .product-options select.form-control {
    max-width: none;
  }

  html.route-product-product body .product-blocks.blocks-default .product_extra > div[class*="product-extra-"] {
    padding: 20px 16px;
  }

  html.route-product-product body .product-blocks.blocks-default #tab-specification .table tbody td:first-child {
    width: 40%;
    min-width: 0;
  }

  html.route-product-product body .module-products-262 .nav-tabs > li > a,
  html.route-product-product body .module-products-296 .nav-tabs > li > a {
    font-size: 18px;
  }

  html.route-product-product:not(.popup) body .grid-row-bottom-3,
  html.route-product-product:not(.popup) body .grid-row-bottom-4 {
    padding-top: 30px;
    padding-bottom: 30px;
  }

  /* reviews form: labels above the fields */
  html.route-product-product body .product-extra-reviews #form-review .form-group > .control-label,
  html.route-product-product body .product-extra-reviews #form-review .form-group > [class*="col-sm-"] {
    width: 100%;
    float: none;
    padding-left: 0;
    padding-right: 0;
    text-align: start;
  }

  html.route-product-product body #button-review {
    width: 100%;
  }
}

/* phones and tablets: Journal pins the quantity + "Adaugă în coș" bar to the bottom of the screen (html.mobile).
   One row: stepper | button | wishlist | compare, white and opaque, 44px+ targets. */
html.mobile.route-product-product:not(.popup) body .product-info .button-group-page {
  margin: 0;
  padding: 8px 12px calc(8px + env(safe-area-inset-bottom, 0px));
  border-top: 1px solid var(--cr-line);
  background: var(--cr-bg);
  box-shadow: 0 -6px 16px rgba(14, 17, 20, .08);
}

html.mobile.route-product-product:not(.popup) body .product-info .button-group-page .buttons-wrapper {
  flex-wrap: nowrap;
  gap: 8px;
  margin: 0;
}

html.mobile.route-product-product:not(.popup) body .product-info .button-group-page .stepper-group {
  flex: 1 1 auto;
  gap: 8px;
  min-width: 0;
}

html.mobile.route-product-product:not(.popup) body .product-info .button-group-page .stepper-group > *,
html.mobile.route-product-product:not(.popup) body .product-info .button-group-page .wishlist-compare > a {
  margin: 0;
}

html.mobile.route-product-product:not(.popup) body .product-info .stepper {
  width: 104px;
  height: 48px;
}

html.mobile.route-product-product:not(.popup) body .product-info .stepper button {
  width: 34px;
}

html.mobile.route-product-product:not(.popup) body .product-info .button-group-page #button-cart.btn-cart {
  flex: 1 1 auto;
  min-width: 0;
  min-height: 48px;
  padding: 0 10px;
  font-size: 16px !important;
  letter-spacing: .03em;
  box-shadow: none;
}

html.mobile.route-product-product:not(.popup) body .product-info .button-group-page .wishlist-compare {
  flex: 0 0 auto;
  flex-wrap: nowrap;
  gap: 8px;
  width: auto;
  margin: 0;
  padding: 0;
  border: 0;
}

html.mobile.route-product-product:not(.popup) body .product-info .button-group-page .wishlist-compare .btn {
  justify-content: center;
  width: 44px;
  min-height: 48px;
  padding: 0;
}

html.mobile.route-product-product:not(.popup) body .product-info .button-group-page .wishlist-compare .btn .btn-text {
  display: none;
}

html.mobile.route-product-product:not(.popup) body .product-info .button-group-page .wishlist-compare .btn::before {
  margin: 0;
  color: var(--cr-blue);
  font-size: 20px;
}

/* the fixed bar must not hide the end of the page */
html.mobile.route-product-product:not(.popup) body footer {
  padding-bottom: 72px;
}

html.mobile.route-product-product:not(.popup) body .product-info .button-group-page #button-cart.btn-cart::before {
  display: none; /* the text needs the whole width of the button on a 360-414px screen */
}

html.mobile.route-product-product:not(.popup) body .product-info .button-group-page #button-cart .btn-text {
  overflow: visible;
  max-width: none;
  white-space: nowrap;
  text-overflow: clip;
}

/* the cookie banner / preferences button (cr_consent.css) sit above the bar on the product page, not on the stepper:
   their own offset variable, as for the Journal bottom menu */
html.mobile.route-product-product:not(.popup) {
  --cr-cookie-bottom: 66px;
}

/* phones: description / specifications / reviews are an accordion: one white card, 54px rows */
@media (max-width: 767px) {
  html.route-product-product body .product-blocks.blocks-default .panel-group {
    border: 1px solid var(--cr-line);
    border-radius: var(--cr-radius);
    background: var(--cr-bg);
    overflow: hidden;
  }

  html.route-product-product body .product-blocks.blocks-default .product_extra > div[class*="product-extra-"].panel {
    margin: 0;
    padding: 0;
    border: 0;
    border-top: 1px solid var(--cr-line);
    border-radius: 0;
    background: transparent;
    box-shadow: none;
  }

  html.route-product-product body .product-blocks.blocks-default .product_extra > div[class*="product-extra-"].panel:first-child {
    border-top: 0;
  }

  html.route-product-product body .product-blocks.blocks-default .panel .panel-heading {
    border: 0;
  }

  html.route-product-product body .product-blocks.blocks-default .panel .panel-title a {
    min-height: 54px;
    align-items: center;
    padding: 0 16px;
    color: var(--cr-dark-deep);
    font-family: var(--cr-font-display);
    font-size: 17px;
    font-weight: 700;
    letter-spacing: .03em;
    text-transform: uppercase;
  }

  html.route-product-product body .product-blocks.blocks-default .panel .panel-body {
    padding: 0 16px 18px;
  }
}

/* =============================================================================================
 * 7. "Added to cart" popup (Journal notification): opaque card, inside the screen on phones
 * ============================================================================================= */
html body .notification-wrapper .notification {
  border: 1px solid var(--cr-line);
  border-radius: var(--cr-radius);
  background: var(--cr-bg);
  box-shadow: var(--cr-shadow-lg);
  opacity: 1;
  color: var(--cr-text);
}

html body .notification-wrapper .notification .notification-title {
  color: var(--cr-dark-deep);
  font-family: var(--cr-font-display);
  font-size: 17px;
  font-weight: 700;
}

html body .notification-wrapper .notification .notification-text,
html body .notification-wrapper .notification .notification-text a {
  color: var(--cr-text);
  font-size: 15px;
}

html body .notification-wrapper .notification .notification-text a {
  color: var(--cr-link);
  font-weight: 600;
}

html body .notification-wrapper .notification .notification-content > img {
  border: 1px solid var(--cr-line);
  border-radius: var(--cr-radius-sm);
}

html body .notification-wrapper .notification-buttons .btn {
  min-height: 44px;
  border-radius: var(--cr-radius-sm) !important;
  font-family: var(--cr-font-display) !important;
  font-size: 15px !important;
  font-weight: 700 !important;
  letter-spacing: .04em;
  text-transform: uppercase !important;
}

html body .notification-wrapper .notification-buttons .btn-cart.btn {
  border: 1px solid var(--cr-blue);
  background: var(--cr-bg) !important; /* skin: div.cart-content .cart-buttons .btn-cart.btn (green) */
  color: var(--cr-blue) !important;
}

html body .notification-wrapper .notification-buttons .btn-cart.btn:hover {
  background: var(--cr-blue) !important;
  color: var(--cr-bg) !important;
}

html body .notification-wrapper .notification-buttons .notification-checkout.btn {
  border: 0;
  background: var(--crp-buy) !important; /* skin: .btn-success (green) */
  color: var(--cr-bg) !important;
}

html body .notification-wrapper .notification-buttons .notification-checkout.btn:hover {
  background: var(--crp-buy-hover) !important;
  color: var(--cr-bg) !important;
}

html body .notification-wrapper .notification .notification-close {
  min-width: 44px;
  min-height: 44px;
}

@media (max-width: 575px) {
  html body .notification-wrapper {
    top: 64px;
    left: 0;
    right: 0;
  }
}

/* =============================================================================================
 * 8. Quickview popup (product page inside the Journal iframe, html.popup)
 * ============================================================================================= */
html.popup.route-product-product body .product-info .product-details > .title.page-title {
  font-size: 24px;
}

html.popup.route-product-product body .product-info .product-details .button-group-page {
  border-top: 1px solid var(--cr-line);
  background: var(--cr-bg);
  box-shadow: 0 -6px 16px rgba(14, 17, 20, .06);
}

/* one row in the popup: quantity | add to cart | wishlist | compare | details */
html.popup.route-product-product body .product-info .button-group-page .buttons-wrapper {
  flex-wrap: nowrap;
  align-items: center;
  gap: 8px;
}

html.popup.route-product-product body .product-info .button-group-page .wishlist-compare {
  flex: 0 0 auto;
  flex-wrap: nowrap;
  gap: 8px;
  width: auto;
  margin: 0;
  padding: 0;
  border: 0;
}

html.popup.route-product-product body .product-info .button-group-page .wishlist-compare .btn,
html.popup.route-product-product body .product-info .button-group-page .btn-more-details.btn {
  width: 48px;
  min-height: 48px;
  margin: 0;
  padding: 0;
  justify-content: center;
}

html.popup.route-product-product body .product-info .button-group-page .btn-wishlist.btn,
html.popup.route-product-product body .product-info .button-group-page .btn-compare.btn,
html.popup.route-product-product body .product-info .button-group-page .btn-more-details.btn {
  border: 1px solid var(--cr-line);
  background: var(--cr-bg);
  color: var(--cr-blue) !important;
}

html.popup.route-product-product body .product-info .button-group-page .btn-wishlist.btn:hover,
html.popup.route-product-product body .product-info .button-group-page .btn-compare.btn:hover,
html.popup.route-product-product body .product-info .button-group-page .btn-more-details.btn:hover {
  border-color: var(--cr-blue);
  background: var(--cr-blue);
  color: var(--cr-bg) !important;
}

html.popup.route-product-product body .product-info .button-group-page .btn-wishlist.btn::before,
html.popup.route-product-product body .product-info .button-group-page .btn-compare.btn::before,
html.popup.route-product-product body .product-info .button-group-page .btn-more-details.btn::before {
  color: inherit !important;
}

/* =============================================================================================
 * 9. Cart page
 * ============================================================================================= */
html.route-checkout-cart body .cart-page .cart-table .table-responsive {
  border: 1px solid var(--cr-line);
  border-radius: var(--cr-radius);
  background: var(--cr-bg);
}

html.route-checkout-cart body .cart-page .cart-table .table,
html.route-checkout-checkout body .cart-section .table {
  margin: 0;
  border: 0;
  background: var(--cr-bg);
}

html.route-checkout-cart body .cart-page .cart-table .table td,
html.route-checkout-checkout body .cart-section .table td {
  padding: 14px 12px;
  border: 0;
  border-top: 1px solid var(--cr-line);
  color: var(--cr-text);
  font-size: 15px;
  vertical-align: middle;
}

html.route-checkout-cart body .cart-page .cart-table .table thead td,
html.route-checkout-checkout body .cart-section .table thead td {
  padding-top: 12px;
  padding-bottom: 12px;
  border-top: 0;
  background: var(--cr-bg-alt);
  color: var(--cr-text-muted);
  font-family: var(--cr-font-body);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
}

html.route-checkout-cart body .cart-page .cart-table .td-name a,
html.route-checkout-checkout body .cart-section .td-name a {
  color: var(--cr-dark-deep);
  font-size: 16px;
  font-weight: 600;
  text-decoration: none;
}

html.route-checkout-cart body .cart-page .cart-table .td-name a:hover,
html.route-checkout-checkout body .cart-section .td-name a:hover {
  color: var(--cr-blue);
  text-decoration: underline;
}

html.route-checkout-cart body .cart-page .cart-table .td-model,
html.route-checkout-checkout body .cart-section .td-model {
  color: var(--cr-text-muted);
  font-size: 14px;
}

html.route-checkout-cart body .cart-page .cart-table .td-image img,
html.route-checkout-checkout body .cart-section .td-image img {
  width: 72px;
  height: auto;
  padding: 0;
  border: 1px solid var(--cr-line);
  border-radius: var(--cr-radius-sm);
}

html.route-checkout-cart body .cart-page .cart-table .td-total,
html.route-checkout-checkout body .cart-section .td-total {
  color: var(--cr-dark-deep);
  font-weight: 700;
}

/* quantity: - input + then update / remove, 44px targets */
html.route-checkout-cart body .cart-page .td-qty .input-group,
html.route-checkout-checkout body .cart-section .td-qty .input-group {
  display: inline-flex;
  flex-wrap: nowrap;
  align-items: stretch;
  gap: 6px;
  width: auto;
}

html.route-checkout-cart body .cart-page .td-qty .stepper,
html.route-checkout-checkout body .cart-section .td-qty .stepper {
  display: flex;
  align-items: stretch;
  width: 124px;
  height: 44px;
  padding: 0;
  border: 1px solid var(--crp-field);
  border-radius: var(--cr-radius-sm);
  background: var(--cr-bg);
  overflow: hidden;
}

html.route-checkout-cart body .cart-page .td-qty .stepper input.form-control,
html.route-checkout-checkout body .cart-section .td-qty .stepper input.form-control {
  flex: 1 1 auto;
  width: 36px;
  min-width: 0;
  height: 100%;
  min-height: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  font-size: 16px;
  font-weight: 600;
  text-align: center;
}

html.route-checkout-cart body .cart-page .td-qty .stepper button,
html.route-checkout-checkout body .cart-section .td-qty .stepper button {
  position: static;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 100%;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: var(--cr-bg-alt);
  color: var(--cr-dark);
  font-size: 0;
}

html.route-checkout-cart body .cart-page .td-qty .stepper button::before,
html.route-checkout-checkout body .cart-section .td-qty .stepper button::before {
  color: var(--cr-dark);
  font-family: var(--cr-font-body) !important;
  font-size: 20px;
  font-weight: 600;
  line-height: 1;
}

html.route-checkout-cart body .cart-page .td-qty .stepper .fa-angle-down::before,
html.route-checkout-checkout body .cart-section .td-qty .stepper .fa-angle-down::before { content: "\2212" !important; }
html.route-checkout-cart body .cart-page .td-qty .stepper .fa-angle-up::before,
html.route-checkout-checkout body .cart-section .td-qty .stepper .fa-angle-up::before { content: "+" !important; }

html.route-checkout-cart body .cart-page .td-qty .input-group-btn,
html.route-checkout-checkout body .cart-section .td-qty .input-group-btn {
  display: inline-flex;
  gap: 6px;
  width: auto;
}

html.route-checkout-cart body .cart-page .td-qty .btn-update,
html.route-checkout-cart body .cart-page .td-qty .btn-remove,
html.route-checkout-checkout body .cart-section .td-qty .btn-update,
html.route-checkout-checkout body .cart-section .td-qty .btn-remove {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  min-width: 44px;
  height: 44px;
  margin: 0;
  padding: 0;
  border: 1px solid var(--cr-line);
  border-radius: var(--cr-radius-sm) !important;
  background: var(--cr-bg);
  color: var(--cr-blue) !important;
  font-size: 16px !important;
}

html.route-checkout-cart body .cart-page .td-qty .btn-remove,
html.route-checkout-checkout body .cart-section .td-qty .btn-remove {
  color: var(--cr-text-muted) !important;
}

html.route-checkout-cart body .cart-page .td-qty .btn-update:hover,
html.route-checkout-checkout body .cart-section .td-qty .btn-update:hover {
  border-color: var(--cr-blue);
  background: var(--cr-blue);
  color: var(--cr-bg) !important;
}

html.route-checkout-cart body .cart-page .td-qty .btn-remove:hover,
html.route-checkout-checkout body .cart-section .td-qty .btn-remove:hover {
  border-color: var(--crp-buy);
  background: var(--crp-buy);
  color: var(--cr-bg) !important;
}

html.route-checkout-cart body .cart-page .td-qty .btn-update i,
html.route-checkout-cart body .cart-page .td-qty .btn-remove i,
html.route-checkout-checkout body .cart-section .td-qty .btn-update i,
html.route-checkout-checkout body .cart-section .td-qty .btn-remove i {
  color: inherit !important;
}

/* summary panel: coupon / shipping / voucher + totals + buttons (the grey outer frame of .cart-bottom goes) */
html.route-checkout-cart body .cart-page .cart-bottom {
  padding: 0;
  border: 0;
  background: transparent;
}

html.route-checkout-cart body .cart-page .table-responsive::before {
  display: none; /* "Scroll ->" hint: the table fits, on phones it becomes cards */
}

html.route-checkout-cart body .cart-page .cart-bottom .panels-total {
  padding: var(--crp-panel-pad);
  border: 1px solid var(--cr-line);
  border-radius: var(--cr-radius);
  background: var(--cr-bg);
}

html.route-checkout-cart body .cart-page .cart-panels .title {
  margin: 0 0 8px;
  padding: 0;
  color: var(--cr-dark-deep);
  font-family: var(--cr-font-display);
  font-size: 20px;
  font-weight: 700;
  text-transform: uppercase;
}

html.route-checkout-cart body .cart-page .cart-panels .title::after {
  display: none;
}

html.route-checkout-cart body .cart-page .cart-panels .panel {
  border: 0;
  border-top: 1px solid var(--cr-line);
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

html.route-checkout-cart body .cart-page .cart-panels .panel-heading,
html.route-checkout-cart body .cart-page .cart-panels .panel-title {
  padding: 0;
  border: 0;
  background: transparent;
}

html.route-checkout-cart body .cart-page .cart-panels .panel-title a {
  display: flex;
  align-items: center;
  min-height: 46px;
  color: var(--cr-blue);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: .03em;
}

html.route-checkout-cart body .cart-page .cart-panels .panel-title a:hover {
  color: var(--cr-link);
  text-decoration: underline;
}

html.route-checkout-cart body .cart-page .cart-panels .panel-body .btn-primary {
  min-height: 46px;
  border: 0;
  border-radius: 0 var(--cr-radius-sm) var(--cr-radius-sm) 0 !important;
  background: var(--cr-dark);
  color: var(--cr-text-on-dark) !important;
}

html.route-checkout-cart body .cart-page .cart-panels .panel-body .btn-primary:hover {
  background: var(--cr-blue);
}

html.route-checkout-cart body .cart-page .cart-total table,
html.route-checkout-checkout body .cart-section .table tfoot {
  border: 0;
  background: transparent;
}

html.route-checkout-cart body .cart-page .cart-total {
  margin-top: 18px;
  padding-top: 8px;
  border-top: 1px solid var(--cr-line);
}

html.route-checkout-cart body .cart-page .cart-total table,
html.route-checkout-cart body .cart-page .cart-total table tr {
  border: 0 !important;
}

html.route-checkout-cart body .cart-page .cart-total table td {
  padding: 8px 0;
  border: 0 !important; /* skin: bordered totals table */
  background: transparent;
  color: var(--cr-text);
  font-size: 15px;
}

html.route-checkout-cart body .cart-page .cart-total table tr:last-child td,
html.route-checkout-checkout body .cart-section .table tfoot tr:last-child td {
  padding-top: 14px;
  border-top: 1px solid var(--cr-line);
  color: var(--cr-dark-deep);
  font-family: var(--cr-font-display);
  font-size: 22px;
  font-weight: 700;
}

html.route-checkout-cart body .cart-page .buttons {
  display: flex;
  flex-direction: column-reverse;
  gap: 10px;
  margin: 18px 0 0;
}

html.route-checkout-cart body .cart-page .buttons .pull-left,
html.route-checkout-cart body .cart-page .buttons .pull-right {
  float: none;
  width: 100%;
  margin: 0;
}

html.route-checkout-cart body .cart-page .buttons .btn {
  width: 100%;
}

html.route-checkout-cart body .cart-page .buttons .btn-primary {
  min-height: 54px;
  border: 0;
  border-radius: var(--cr-radius-sm) !important;
  background: var(--crp-buy);
  box-shadow: 0 6px 14px color-mix(in srgb, var(--cr-accent) 28%, transparent);
  color: var(--cr-bg) !important;
  font-family: var(--cr-font-display) !important;
  font-size: 19px !important;
  font-weight: 700 !important;
  letter-spacing: .05em;
  text-transform: uppercase !important;
}

html.route-checkout-cart body .cart-page .buttons .btn-primary:hover {
  background: var(--crp-buy-hover);
  color: var(--cr-bg) !important;
}

/* =============================================================================================
 * 10. Quick checkout (Journal): white sections, red confirm, compact cart table
 * ============================================================================================= */
html.route-checkout-checkout body .quick-checkout-wrapper .checkout-section {
  padding: 24px var(--crp-panel-pad);
  border: 1px solid var(--cr-line);
  border-radius: var(--cr-radius);
  background: var(--cr-bg);
  box-shadow: none;
}

html.route-checkout-checkout body .quick-checkout-wrapper .section-title {
  margin: 0 0 16px;
  padding: 0;
  color: var(--cr-dark-deep);
  font-family: var(--cr-font-display);
  font-size: 19px;
  font-weight: 700;
  letter-spacing: .02em;
  text-transform: uppercase;
}

html.route-checkout-checkout body .quick-checkout-wrapper .section-title::after {
  width: 32px;
  height: 3px;
  margin-top: 8px;
  background: var(--cr-dark);
}

html.route-checkout-checkout body .quick-checkout-wrapper .radio label,
html.route-checkout-checkout body .quick-checkout-wrapper .checkbox label {
  min-height: 32px;
  color: var(--cr-text);
  font-size: 15px;
  line-height: 1.5;
}

html.route-checkout-checkout body .quick-checkout-wrapper input[type="radio"],
html.route-checkout-checkout body .quick-checkout-wrapper input[type="checkbox"] {
  width: 18px;
  height: 18px;
  accent-color: var(--cr-blue);
}

html.route-checkout-checkout body .quick-checkout-wrapper .section-cvr .btn,
html.route-checkout-checkout body .quick-checkout-wrapper .section-login .btn {
  min-height: 46px;
  border: 0;
  border-radius: var(--cr-radius-sm) !important;
  background: var(--cr-dark);
  color: var(--cr-text-on-dark) !important;
}

html.route-checkout-checkout body .quick-checkout-wrapper .section-cvr .btn:hover,
html.route-checkout-checkout body .quick-checkout-wrapper .section-login .btn:hover {
  background: var(--cr-blue);
}

/* the checkout cart table: no product code column (it forced a horizontal scroll at 1440) */
html.route-checkout-checkout body .cart-section .table .td-model {
  display: none;
}

html.route-checkout-checkout body .cart-section .table-responsive::before {
  display: none;
}

html.route-checkout-checkout body .cart-section .table tfoot td {
  padding: 8px 12px;
  border: 0;
  background: transparent;
}

html.route-checkout-checkout body .cart-section .table tfoot .td-total-title {
  color: var(--cr-text);
}

html.route-checkout-checkout body #quick-checkout-button-confirm {
  width: 100%;
  min-height: 56px;
  border: 0;
  border-radius: var(--cr-radius-sm) !important;
  background: var(--crp-buy);
  box-shadow: 0 6px 14px color-mix(in srgb, var(--cr-accent) 28%, transparent);
  color: var(--cr-bg) !important;
  font-family: var(--cr-font-display) !important;
  font-size: 20px !important;
  font-weight: 700 !important;
  letter-spacing: .05em;
  text-transform: uppercase !important;
}

html.route-checkout-checkout body #quick-checkout-button-confirm:hover {
  background: var(--crp-buy-hover);
  color: var(--cr-bg) !important;
}

html.route-checkout-checkout body #quick-checkout-button-confirm:focus-visible {
  outline: 3px solid var(--cr-dark);
  outline-offset: 2px;
}

/* =============================================================================================
 * 11. Cart tables as cards on phones (cart page and checkout): no sideways "Scroll ->"
 * ============================================================================================= */
@media (max-width: 767px) {
  html.route-checkout-cart body .cart-page .cart-table .table-responsive,
  html.route-checkout-checkout body .cart-section .table-responsive {
    overflow: visible;
  }

  html.route-checkout-cart body .cart-page .table-responsive::before,
  html.route-checkout-checkout body .cart-section .table-responsive::before {
    display: none;
  }

  html.route-checkout-cart body .cart-page .cart-table .table,
  html.route-checkout-checkout body .cart-section .table,
  html.route-checkout-cart body .cart-page .cart-table .table tbody,
  html.route-checkout-checkout body .cart-section .table tbody,
  html.route-checkout-checkout body .cart-section .table tfoot {
    display: block;
    width: 100%;
    min-width: 0;
  }

  html.route-checkout-cart body .cart-page .cart-table .table thead,
  html.route-checkout-checkout body .cart-section .table thead {
    display: none;
  }

  html.route-checkout-cart body .cart-page .cart-table .table tbody tr,
  html.route-checkout-checkout body .cart-section .table tbody tr {
    display: grid;
    grid-template-columns: 76px minmax(0, 1fr) auto;
    grid-template-areas:
      "img name name"
      "img model model"
      "img price total"
      "qty qty qty";
    gap: 4px 12px;
    padding: 14px;
    border-top: 1px solid var(--cr-line);
  }

  html.route-checkout-cart body .cart-page .cart-table .table tbody tr:first-child,
  html.route-checkout-checkout body .cart-section .table tbody tr:first-child {
    border-top: 0;
  }

  html.route-checkout-cart body .cart-page .cart-table .table tbody td,
  html.route-checkout-checkout body .cart-section .table tbody td {
    display: block;
    width: auto;
    padding: 0;
    border: 0;
    text-align: start;
  }

  html.route-checkout-cart body .cart-page .cart-table .table tbody .td-image,
  html.route-checkout-checkout body .cart-section .table tbody .td-image { grid-area: img; }
  html.route-checkout-cart body .cart-page .cart-table .table tbody .td-name,
  html.route-checkout-checkout body .cart-section .table tbody .td-name,
  html.route-checkout-checkout body .cart-section .table tbody .td-product { grid-area: name; }
  html.route-checkout-cart body .cart-page .cart-table .table tbody .td-model,
  html.route-checkout-checkout body .cart-section .table tbody .td-model { grid-area: model; }
  html.route-checkout-cart body .cart-page .cart-table .table tbody .td-price,
  html.route-checkout-checkout body .cart-section .table tbody .td-price {
    grid-area: price;
    align-self: end;
    color: var(--cr-text-muted);
    font-size: 14px;
  }
  html.route-checkout-cart body .cart-page .cart-table .table tbody .td-total,
  html.route-checkout-checkout body .cart-section .table tbody .td-total {
    grid-area: total;
    align-self: end;
    text-align: end;
    font-size: 17px;
  }
  html.route-checkout-cart body .cart-page .cart-table .table tbody .td-qty,
  html.route-checkout-checkout body .cart-section .table tbody .td-qty {
    grid-area: qty;
    padding-top: 10px;
  }

  html.route-checkout-cart body .cart-page .cart-table .table,
  html.route-checkout-checkout body .cart-section .table {
    min-width: 0 !important;
  }

  html.route-checkout-cart body .cart-page .cart-table .table tbody td,
  html.route-checkout-checkout body .cart-section .table tbody td,
  html.route-checkout-checkout body .cart-section .table tfoot td {
    border: 0 !important;
    min-width: 0;
    overflow-wrap: anywhere;
  }

  html.route-checkout-cart body .cart-page .cart-table .td-image img,
  html.route-checkout-checkout body .cart-section .td-image img {
    width: 76px;
  }

  html.route-checkout-checkout body .cart-section .table tfoot tr {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    padding: 6px 14px;
  }

  html.route-checkout-checkout body .cart-section .table tfoot td {
    display: block;
    width: auto;
    padding: 0 !important;
    white-space: nowrap;
  }

  html.route-checkout-checkout body .cart-section .table tfoot td[colspan] {
    flex: 1 1 auto;
  }

  html.route-checkout-cart body .cart-page .cart-bottom .panels-total,
  html.route-checkout-checkout body .quick-checkout-wrapper .checkout-section {
    padding: 20px 16px;
  }
}

/* =============================================================================================
 * 12. Login / register / account / contact
 * ============================================================================================= */
html.route-account-login body #content .well,
html[class*="route-account-"] body #content > form,
html.route-information-contact body #content form {
  padding: var(--crp-panel-pad);
  border: 1px solid var(--cr-line);
  border-radius: var(--cr-radius);
  background: var(--cr-bg);
  box-shadow: none;
}

html.route-account-login body #content .well h2 {
  margin: 0 0 12px;
  color: var(--cr-dark-deep);
  font-family: var(--cr-font-display);
  font-size: 22px;
  font-weight: 700;
  text-transform: uppercase;
}

html.route-account-login body #content .well h2::after,
html[class*="route-account-"] body #content legend::after,
html.route-information-contact body #content legend::after {
  width: 32px;
  height: 3px;
  background: var(--cr-dark);
}

html[class*="route-account-"] body #content legend,
html.route-information-contact body #content legend {
  margin-bottom: 16px;
  padding: 0;
  border: 0;
  color: var(--cr-dark-deep);
  font-family: var(--cr-font-display);
  font-size: 20px;
  font-weight: 700;
  text-transform: uppercase;
}

html[class*="route-account-"] body #content fieldset + fieldset {
  margin-top: 18px;
}

html[class*="route-account-"] body #content .form-group,
html.route-information-contact body #content .form-group {
  margin-bottom: 14px;
}

html.route-account-login body #content .well .form-group {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

html.route-account-login body #content .well .form-group > .control-label,
html.route-account-login body #content .well .form-group > [class*="col-sm-"] {
  width: 100%;
  max-width: none;
  padding: 0;
  text-align: start;
}

html.route-account-login body #content .well .btn-primary {
  width: 100%;
}

html[class*="route-account-"] body #content a:not(.btn),
html.route-information-contact body #content form a:not(.btn) {
  color: var(--cr-link) !important;
}

/* account menu (accordion menu #126) */
html[class*="route-account-"] body .accordion-menu-126 .menu-item > a {
  min-height: 40px;
  color: var(--cr-blue);
  font-size: 14px;
}

html[class*="route-account-"] body .accordion-menu-126 .menu-item > a:hover {
  color: var(--cr-link);
}

@media (max-width: 767px) {
  html.route-account-login body #content .well,
  html[class*="route-account-"] body #content > form,
  html.route-information-contact body #content form {
    padding: 20px 16px;
  }

  html[class*="route-account-"] body #content .form-group > .control-label,
  html[class*="route-account-"] body #content .form-group > [class*="col-sm-"],
  html.route-information-contact body #content .form-group > .control-label,
  html.route-information-contact body #content .form-group > [class*="col-sm-"] {
    width: 100%;
    float: none;
    padding-left: 0;
    padding-right: 0;
    text-align: start;
  }

  html[class*="route-account-"] body #content .buttons .btn,
  html.route-information-contact body #content .buttons .btn {
    width: 100%;
  }
}

@media (prefers-reduced-motion: reduce) {
  html.route-product-product body .product-info .button-group-page #button-cart.btn-cart,
  html.route-product-product body .product-info .additional-images .additional-image {
    transition: none;
  }
}