/* ==========================================================================
   Bacalao Maribel - child theme overrides on top of PrestaShop Classic.
   Palette: deep Atlantic blue, salt white, olive-oil amber, coral accent.
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,400;9..144,600;9..144,700&family=Inter:wght@400;500;600;700&display=swap');

:root {
  --bm-deep:        #0b2e3f;
  --bm-deep-soft:   #123d52;
  --bm-sea:         #1d6a8c;
  --bm-foam:        #e8f1f4;
  --bm-salt:        #faf7f1;
  --bm-paper:       #ffffff;
  --bm-amber:       #c8892e;
  --bm-amber-soft:  #e3b45f;
  --bm-coral:       #d9613f;
  --bm-ink:         #16242c;
  --bm-muted:       #5d6f79;
  --bm-line:        #e2dad0;

  --bm-radius:      14px;
  --bm-radius-lg:   24px;
  --bm-shadow:      0 10px 30px rgba(11, 46, 63, .08);
  --bm-shadow-lift: 0 18px 44px rgba(11, 46, 63, .16);

  --bm-font-display: 'Fraunces', Georgia, 'Times New Roman', serif;
  --bm-font-body:    'Inter', -apple-system, 'Segoe UI', Roboto, sans-serif;
}

/* --------------------------------------------------------------------------
   Base typography
   -------------------------------------------------------------------------- */

body {
  font-family: var(--bm-font-body);
  color: var(--bm-ink);
  background: var(--bm-salt);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, .h1, .h2, .h3, .h4,
.page-header h1, .product-title, .featured-products .h2 {
  font-family: var(--bm-font-display);
  font-weight: 600;
  color: var(--bm-deep);
  letter-spacing: -0.015em;
}

h1, .h1 { font-size: clamp(2rem, 4vw, 3rem); line-height: 1.12; }
h2, .h2 { font-size: clamp(1.6rem, 3vw, 2.25rem); line-height: 1.2; }

a { color: var(--bm-sea); transition: color .18s ease; }
a:hover, a:focus { color: var(--bm-amber); text-decoration: none; }

.text-muted, .product-comments__stars-count { color: var(--bm-muted) !important; }

/* Section title with a short rule underneath, used across the storefront. */
.bm-section-title {
  position: relative;
  text-align: center;
  margin-bottom: 2.5rem;
}
.bm-section-title::after {
  content: '';
  display: block;
  width: 68px;
  height: 3px;
  margin: 1rem auto 0;
  border-radius: 2px;
  background: linear-gradient(90deg, var(--bm-amber), var(--bm-coral));
}

/* --------------------------------------------------------------------------
   Buttons
   -------------------------------------------------------------------------- */

.btn {
  font-family: var(--bm-font-body);
  font-weight: 600;
  letter-spacing: .02em;
  border-radius: 999px;
  padding: .75rem 1.75rem;
  border: none;
  transition: transform .18s ease, box-shadow .18s ease, background-color .18s ease;
}

.btn-primary,
.btn-primary:not(:disabled):not(.disabled),
#header .btn-primary {
  background: var(--bm-deep);
  color: var(--bm-salt);
  box-shadow: 0 6px 18px rgba(11, 46, 63, .22);
}
.btn-primary:hover, .btn-primary:focus, .btn-primary:active {
  background: var(--bm-sea);
  color: #fff;
  transform: translateY(-2px);
  box-shadow: var(--bm-shadow-lift);
}

.btn-secondary, .btn-outline-primary {
  background: transparent;
  color: var(--bm-deep);
  box-shadow: inset 0 0 0 2px var(--bm-deep);
}
.btn-secondary:hover, .btn-outline-primary:hover {
  background: var(--bm-deep);
  color: var(--bm-salt);
}

/* Add-to-cart gets the warm accent so it stands out from navigation actions. */
.product-add-to-cart .add-to-cart,
.btn.add-to-cart {
  background: var(--bm-amber);
  color: #1b1206;
  text-transform: none;
  font-size: 1.02rem;
}
.product-add-to-cart .add-to-cart:hover,
.btn.add-to-cart:hover {
  background: var(--bm-coral);
  color: #fff;
}

/* --------------------------------------------------------------------------
   Header
   -------------------------------------------------------------------------- */

#header {
  background: var(--bm-deep);
  color: var(--bm-foam);
  box-shadow: 0 2px 20px rgba(11, 46, 63, .18);
}
#header a { color: var(--bm-foam); }
#header a:hover { color: var(--bm-amber-soft); }

/* Thin announcement strip above the logo row. */
#header .header-nav {
  background: linear-gradient(90deg, var(--bm-deep-soft), var(--bm-sea));
  border-bottom: 1px solid rgba(255, 255, 255, .08);
  font-size: .86rem;
  padding: .35rem 0;
  min-height: auto;
}
#header .header-nav .container { padding-top: 0; padding-bottom: 0; }

#header .header-top { background: transparent; padding-bottom: 1rem; }
#header .header-top .logo { max-height: 74px; width: auto; }

#header .header-top .menu > ul > li > a,
#_desktop_top_menu .top-menu a[data-depth="0"] {
  color: var(--bm-foam);
  font-weight: 600;
  font-size: .95rem;
  letter-spacing: .03em;
  text-transform: uppercase;
  padding: .6rem .8rem;
  border-radius: 999px;
}
#_desktop_top_menu .top-menu a[data-depth="0"]:hover {
  background: rgba(255, 255, 255, .1);
  color: #fff;
}

/* Sub menus render on the light surface. */
#_desktop_top_menu .popover.sub-menu {
  background: var(--bm-paper);
  border: none;
  border-radius: var(--bm-radius);
  box-shadow: var(--bm-shadow-lift);
  margin-top: .5rem;
}
#_desktop_top_menu .popover.sub-menu a { color: var(--bm-ink); }

/* Classic positions the magnifier absolutely with a fixed `top`, which never
   lines up with the input text once the field is taller than stock. Lay the
   row out with flex instead: icon and input then share one centre line. */
#search_widget form {
  display: flex;
  align-items: center;
  gap: .55rem;
  /* The height used to come from the input's own padding; now that the input
     is a flex item with none, the row carries it. */
  padding: .72rem 1.1rem;
  background: rgba(255, 255, 255, .12);
  border-radius: 999px;
  overflow: hidden;
}
#search_widget form input[type="text"] {
  flex: 1 1 auto;
  min-width: 0;
  background: transparent;
  border: none;
  color: var(--bm-foam);
  padding: 0;
  line-height: 1.2;
}
#search_widget form .material-icons.search,
#search_widget form button[type="submit"] {
  position: static;
  flex: none;
  top: auto;
  left: auto;
  right: auto;
  transform: none;
  margin: 0;
  padding: 0;
  background: transparent;
  border: none;
  font-size: 1.2rem;
  line-height: 1;
  color: var(--bm-amber-soft);
}
#search_widget form .material-icons.clear {
  position: static;
  flex: none;
  order: 3;
  transform: none;
  margin: 0;
  line-height: 1;
}
#search_widget form input[type="text"]::placeholder { color: rgba(232, 241, 244, .65); }
#search_widget form button[type="submit"] .search { color: var(--bm-amber-soft); }

.blockcart.cart-preview .header {
  background: var(--bm-amber);
  border-radius: 999px;
  padding: .45rem 1rem;
}
.blockcart.cart-preview .header a,
.blockcart.cart-preview .header i { color: #1b1206; }

/* --------------------------------------------------------------------------
   Breadcrumb and page headers
   -------------------------------------------------------------------------- */

.breadcrumb {
  background: transparent;
  padding-left: 0;
  font-size: .85rem;
}
.breadcrumb li::after { color: var(--bm-line); }

#main .page-header {
  border-bottom: 1px solid var(--bm-line);
  padding-bottom: 1rem;
  margin-bottom: 1.75rem;
}

/* --------------------------------------------------------------------------
   Product cards
   -------------------------------------------------------------------------- */

.product-miniature .thumbnail-container {
  width: 100%;
  height: auto;
  background: var(--bm-paper);
  border-radius: var(--bm-radius-lg);
  border: 1px solid var(--bm-line);
  box-shadow: none;
  overflow: hidden;
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  margin-bottom: 1.75rem;
}
.product-miniature .thumbnail-container:hover {
  transform: translateY(-6px);
  box-shadow: var(--bm-shadow-lift);
  border-color: transparent;
}

.product-miniature .thumbnail-container .product-thumbnail { display: block; }
.product-miniature .thumbnail-container .product-thumbnail img {
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  transition: transform .5s ease;
}
.product-miniature .thumbnail-container:hover .product-thumbnail img { transform: scale(1.06); }

.product-miniature .product-description {
  position: static;
  width: auto;
  background: transparent;
  border: none;
  padding: 1.1rem 1.25rem 1.4rem;
  text-align: left;
  box-shadow: none;
}

.product-miniature .product-title { margin-bottom: .4rem; }
.product-miniature .product-title a {
  font-family: var(--bm-font-display);
  font-size: 1.12rem;
  font-weight: 600;
  color: var(--bm-deep);
  text-transform: none;
}

.product-miniature .product-price-and-shipping {
  display: flex;
  align-items: baseline;
  gap: .6rem;
  flex-wrap: wrap;
}
.product-miniature .product-price-and-shipping .price {
  font-family: var(--bm-font-display);
  font-size: 1.32rem;
  font-weight: 700;
  color: var(--bm-deep);
}
.product-miniature .product-price-and-shipping .regular-price {
  color: var(--bm-muted);
  font-size: .95rem;
}

/* Quick view.

   Classic parks this block below the card (`top: 100%`) and on hover slides it
   up to `calc(100% - 4.4rem)`, which leaves it straddling the bottom edge of
   the photo: half over the image, half over the white card, and unreadable
   either way. Turn it into a deliberate veil over the image instead. */
.product-miniature .thumbnail-container .product-thumbnail { position: relative; }

.product-miniature .highlighted-informations,
.product-miniature .highlighted-informations.no-variants {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  /* Matches the aspect ratio forced on the product image above, so the veil
     covers the photo exactly and never the text below it. */
  aspect-ratio: 4 / 3;
  height: auto;
  width: auto;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0;
  padding: 0;
  z-index: 2;
  background: rgba(11, 46, 63, .58);
  box-shadow: none;
  opacity: 0;
  transition: opacity .22s ease;
  pointer-events: none;
}

.product-miniature .thumbnail-container:hover .highlighted-informations,
.product-miniature .thumbnail-container:focus .highlighted-informations,
.product-miniature .thumbnail-container:focus-within .highlighted-informations,
.product-miniature .thumbnail-container:hover .highlighted-informations.no-variants,
.product-miniature .thumbnail-container:focus .highlighted-informations.no-variants,
.product-miniature .thumbnail-container.has-reviews:hover .highlighted-informations,
.product-miniature .thumbnail-container.has-reviews:focus .highlighted-informations {
  top: 0;
  height: auto;
  opacity: 1;
  pointer-events: auto;
}

.product-miniature .highlighted-informations::after { content: none; }

.product-miniature .highlighted-informations .quick-view {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  padding: .5rem 1.1rem;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, .75);
  color: #fff;
  font-size: .9rem;
  font-weight: 600;
  line-height: 1;
}
.product-miniature .highlighted-informations .quick-view:hover {
  background: var(--bm-amber);
  border-color: var(--bm-amber);
  color: #1b1206;
}
.product-miniature .highlighted-informations .quick-view .material-icons {
  font-size: 1.05rem;
  line-height: 1;
  margin: 0;
}

/* Sale / new / pack flags */
.product-flags li.product-flag {
  font-family: var(--bm-font-body);
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  border-radius: 999px;
  padding: .3rem .85rem;
  background: var(--bm-deep);
  color: var(--bm-salt);
  box-shadow: 0 4px 12px rgba(11, 46, 63, .25);
}
.product-flags li.product-flag.discount,
.product-flags li.product-flag.on-sale { background: var(--bm-coral); }
.product-flags li.product-flag.new { background: var(--bm-amber); color: #1b1206; }

/* --------------------------------------------------------------------------
   Product page
   -------------------------------------------------------------------------- */

#product #main .images-container .js-qv-mask,
#product .product-cover img {
  border-radius: var(--bm-radius-lg);
  box-shadow: var(--bm-shadow);
}

#product .product-prices .current-price-value,
#product .product-prices .current-price span[itemprop="price"],
#product .current-price .price {
  font-family: var(--bm-font-display);
  font-size: 2.1rem;
  font-weight: 700;
  color: var(--bm-deep);
}

#product .product-information .product-description { font-size: 1.02rem; }

#product .product-actions .product-add-to-cart {
  background: var(--bm-paper);
  border: 1px solid var(--bm-line);
  border-radius: var(--bm-radius-lg);
  padding: 1.4rem;
}

/* --------------------------------------------------------------------------
   Quantity selector and add-to-cart

   Classic builds the quantity field with bootstrap-touchspin: a 48px input
   with a 24px column holding two 23px steppers, all square and flush against
   each other. It also gives .material-icons a 38.4px line-height, which pushes
   the cart icon below the centre line of its own button.

   These rules apply everywhere the control appears (product page, cart page
   and quick view), so the selectors are not scoped to #product.
   -------------------------------------------------------------------------- */

.product-quantity .qty,
.bootstrap-touchspin .input-group {
  margin-right: 0;
}

.qty .input-group.bootstrap-touchspin {
  display: flex;
  align-items: stretch;
  width: auto;
  height: 48px;
  background: var(--bm-paper);
  border: 1px solid var(--bm-line);
  border-radius: var(--bm-radius);
  overflow: hidden;
}

.qty .input-group.bootstrap-touchspin .form-control,
.qty .input-group.bootstrap-touchspin input#quantity_wanted {
  width: 62px;
  height: 100%;
  padding: 0 .35rem;
  border: none;
  border-radius: 0;
  background: transparent;
  text-align: center;
  font-size: 1.05rem;
  font-weight: 600;
  color: var(--bm-ink);
  box-shadow: none;
}
.qty .input-group.bootstrap-touchspin .form-control:focus { box-shadow: none; }

/* The two steppers become a proper column, wide enough to hit with a thumb. */
.qty .input-group-btn-vertical {
  display: flex;
  flex-direction: column;
  width: 40px;
  flex: none;
  border-left: 1px solid var(--bm-line);
}

.qty .input-group-btn-vertical > .btn,
.qty .input-group-btn-vertical > .bootstrap-touchspin-up,
.qty .input-group-btn-vertical > .bootstrap-touchspin-down {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 1 1 50%;
  width: 100%;
  min-height: 0;
  padding: 0;
  margin: 0;
  border: none;
  border-radius: 0;
  background: var(--bm-salt);
  color: var(--bm-deep);
  transition: background-color .15s ease, color .15s ease;
}

.qty .input-group-btn-vertical > .bootstrap-touchspin-up {
  border-bottom: 1px solid var(--bm-line);
}

.qty .input-group-btn-vertical > .btn:hover {
  background: var(--bm-amber);
  color: #1b1206;
}

.qty .input-group-btn-vertical i,
.qty .input-group-btn-vertical .touchspin-up,
.qty .input-group-btn-vertical .touchspin-down {
  position: static;
  top: auto;
  left: auto;
  font-size: 1.1rem;
  line-height: 1;
}

/* Row holding quantity, add-to-cart and the wishlist button. */
.product-quantity {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 1rem;
}
.product-quantity .qty,
.product-quantity .add { margin: 0; }

/* Add-to-cart: centre the icon against the label instead of letting the
   inherited icon line-height drag it down.

   The colour needs `:not(:disabled):not(.disabled)` to outweigh the
   .btn-primary rule further up, which carries the same pseudo-classes. */
.btn.btn-primary.add-to-cart,
.btn.btn-primary.add-to-cart:not(:disabled):not(.disabled) {
  background: var(--bm-amber);
  color: #1b1206;
  box-shadow: 0 6px 18px rgba(200, 137, 46, .28);
}
.btn.btn-primary.add-to-cart:hover,
.btn.btn-primary.add-to-cart:focus,
.btn.btn-primary.add-to-cart:not(:disabled):not(.disabled):hover {
  background: var(--bm-coral);
  color: #fff;
}
.btn.btn-primary.add-to-cart:disabled,
.btn.btn-primary.add-to-cart.disabled {
  background: var(--bm-line);
  color: var(--bm-muted);
  box-shadow: none;
}

.btn.add-to-cart,
.product-add-to-cart .add-to-cart {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .6rem;
  height: 48px;
  padding: 0 1.75rem;
  line-height: 1;
}

.btn.add-to-cart .material-icons,
.product-add-to-cart .add-to-cart .material-icons {
  font-size: 1.3rem;
  line-height: 1;
  margin: 0;
}

/* Availability line ("Disponible", "Últimas unidades", "Agotado").

   Classic renders it as an inline span with a 24px icon carrying a 38.4px
   line-height, so the tick hangs below the text baseline. Same pattern in the
   delivery/return notices, so they are all handled together. */
#product-availability,
.js-product-availability,
.product-minimal-quantity,
.product-additional-info .delivery-information,
#block-reassurance li > span,
.cart-summary-line .label {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  line-height: 1.4;
}

#product-availability .material-icons,
.js-product-availability .material-icons,
.product-minimal-quantity .material-icons,
.product-additional-info .material-icons {
  font-size: 1.15rem;
  line-height: 1;
  margin: 0;
  vertical-align: middle;
}

/* Same icon-plus-label pattern in the product comments module. */
.btn-comment,
.post-product-comment,
.product-comments__panel-title,
#product-comments-list-header .comments-nb {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
}
.btn-comment .material-icons,
.post-product-comment .material-icons,
.product-comments__panel-title .material-icons {
  font-size: 1.15rem;
  line-height: 1;
  margin: 0;
}

#product-availability .product-available { color: #2e7d4f; }
#product-availability .product-last-items { color: var(--bm-amber); }
#product-availability .product-unavailable { color: var(--bm-coral); }

/* The wishlist button sits on the same line and matches the control height. */
.product-quantity .wishlist-button-add {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  padding: 0;
  margin: 0;
  border-radius: 50%;
}
.product-quantity .wishlist-button-add i { line-height: 1; margin: 0; }

.tabs .nav-tabs { border-bottom: 2px solid var(--bm-line); }
.tabs .nav-tabs .nav-link {
  color: var(--bm-muted);
  font-weight: 600;
  border: none;
  padding: .85rem 1.2rem;
}
.tabs .nav-tabs .nav-link.active {
  color: var(--bm-deep);
  border-bottom: 3px solid var(--bm-amber);
  background: transparent;
}

/* Reassurance row under the add-to-cart block (ps_customtext / custom HTML). */
.bm-product-reassurance {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  gap: .9rem;
  margin-top: 1.4rem;
}
.bm-product-reassurance div {
  background: var(--bm-foam);
  border-radius: var(--bm-radius);
  padding: .85rem 1rem;
  font-size: .88rem;
  color: var(--bm-deep-soft);
}

/* --------------------------------------------------------------------------
   Cards, blocks and sidebars
   -------------------------------------------------------------------------- */

.card, .block-categories, #search_filters, .page-content.page-cms {
  background: var(--bm-paper);
  border: 1px solid var(--bm-line);
  border-radius: var(--bm-radius-lg);
  box-shadow: none;
}

#left-column .block-categories .category-top-menu > li > a { color: var(--bm-deep); font-weight: 600; }

/* --------------------------------------------------------------------------
   Footer
   -------------------------------------------------------------------------- */

#footer { padding-top: 0; }

.footer-container {
  background: var(--bm-deep);
  color: var(--bm-foam);
  border-top: 4px solid var(--bm-amber);
  box-shadow: none;
  margin-top: 3rem;
  padding-top: 3rem;
}
.footer-container a,
.footer-container .h3,
.footer-container .links .title,
.footer-container li a { color: var(--bm-foam); }
.footer-container a:hover { color: var(--bm-amber-soft); }
.footer-container .h3, .footer-container .myaccount-title,
.footer-container .links .h3 {
  font-family: var(--bm-font-display);
  font-size: 1.05rem;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: #fff;
}
.footer-container .block-contact { border-left: 1px solid rgba(255, 255, 255, .12); }

#block_myaccount_infos .myaccount-title a { color: #fff; }

/* Newsletter block sits on the amber strip above the dark footer. */
.block_newsletter {
  background: var(--bm-amber);
  border-radius: var(--bm-radius-lg);
  box-shadow: var(--bm-shadow);
  padding: 2rem;
  margin-bottom: -1rem;
  color: #1b1206;
}
.block_newsletter p, .block_newsletter .h3 { color: #1b1206; }
.block_newsletter input[type="email"] {
  border: none;
  border-radius: 999px;
  padding: .75rem 1.2rem;
  height: auto;
}
.block_newsletter .btn { background: var(--bm-deep); color: #fff; }

/* --------------------------------------------------------------------------
   Forms, alerts, checkout
   -------------------------------------------------------------------------- */

.form-control, .input-group .form-control {
  border: 1px solid var(--bm-line);
  border-radius: var(--bm-radius);
  padding: .7rem 1rem;
  height: auto;
  background: var(--bm-paper);
  color: var(--bm-ink);
}
.form-control:focus {
  border-color: var(--bm-sea);
  box-shadow: 0 0 0 3px rgba(29, 106, 140, .15);
  outline: none;
}

.alert-success { background: #e7f3ec; border-color: #bfe0cd; color: #1f5133; }
.alert-danger  { background: #fbeae6; border-color: #f0c5ba; color: #8c2f16; }

#checkout .step-title, #checkout .card-header { font-family: var(--bm-font-display); }
#checkout #js-checkout-summary .cart-summary-line .value { font-weight: 600; }

/* Carrier rows (Mail Boxes Etc. and any other) read as selectable cards. */
.delivery-option {
  background: var(--bm-paper);
  border: 1px solid var(--bm-line);
  border-radius: var(--bm-radius);
  padding: 1rem;
  margin-bottom: .75rem;
  transition: border-color .18s ease, box-shadow .18s ease;
}
.delivery-option:hover { border-color: var(--bm-sea); box-shadow: var(--bm-shadow); }
.delivery-option .carrier-name { font-weight: 600; color: var(--bm-deep); }

/* Payment options (Redsys card / Bizum) follow the same card language. */
.payment-options .payment-option {
  background: var(--bm-paper);
  border: 1px solid var(--bm-line);
  border-radius: var(--bm-radius);
  padding: .9rem 1rem;
  margin-bottom: .6rem;
}
.payment-options .payment-option img { max-height: 28px; width: auto; margin-left: .5rem; }

/* --------------------------------------------------------------------------
   Header layout.

   Classic lays both header rows out with Bootstrap floats, which leaves the
   contact link, the account link and the cart at three different heights, and
   drops the search field onto a second line as soon as the menu grows wide.
   Both rows become flex containers so everything shares one centre line.
   -------------------------------------------------------------------------- */

/* --- top bar: contact on the left, account and cart on the right --- */

#header .header-nav { padding: 0; }

#header .header-nav > .container > .row > div:first-child {
  display: flex;
  align-items: center;
  width: 100%;
  min-height: 46px;
}

#header .header-nav > .container > .row > div:first-child > div { float: none; }

#header .header-nav .left-nav,
#header .header-nav > .container > .row > div:first-child > div:first-child {
  display: flex;
  align-items: center;
  flex: 1 1 auto;
  min-width: 0;
}

#header .header-nav .right-nav {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 1.35rem;
  flex: 0 0 auto;
  width: auto;
  max-width: none;
  margin-left: auto;
}

/* Every item in the bar is a centred flex row of the same height, so the
   backgrounds Classic sets on some of them no longer stick out. */
#header .header-nav .right-nav > div,
#header .header-nav #_desktop_user_info,
#header .header-nav #_desktop_cart,
#header .header-nav .blockcart,
#header .header-nav .blockcart.cart-preview,
#header .header-nav .blockcart.cart-preview.active,
#header .header-nav .user-info,
#header .header-nav .currency-selector,
#header .header-nav .language-selector-wrapper,
#header .header-nav #_desktop_contact_link {
  display: flex;
  align-items: center;
  background: transparent;
  padding: 0;
  margin: 0;
  line-height: 1.2;
}

#header .header-nav .user-info a,
#header .header-nav #_desktop_contact_link > div {
  display: inline-flex;
  align-items: center;
  gap: .3rem;
}

#header .header-nav .blockcart .header {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  padding: .4rem 1rem;
  margin: 0;
  line-height: 1.2;
}

/* Classic sizes these icons for a taller bar. */
#header .header-nav .material-icons {
  font-size: 1.15rem;
  line-height: 1;
  margin-right: 0;
}

/* --- main row: logo, menu and search on one line --- */

#header .header-top { padding-top: 14px; padding-bottom: 14px; }
#header .header-top .row { align-items: center; }

#header .header-top #_desktop_logo { display: flex; align-items: center; }
#header .header-top #_desktop_logo img,
#header .header-top .logo {
  height: 62px;
  width: auto;
  max-height: none;
}

#header .header-top .header-top-right {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 1.5rem;
  float: none;
}

/* The menu keeps its natural width and the search field takes what is left,
   up to 340px. The other way round the menu ate the whole row and the search
   placeholder was cut off. */
#header .header-top #_desktop_top_menu {
  display: flex;
  align-items: center;
  flex: 0 0 auto;
  min-width: 0;
  padding-left: 0;
}
#header .header-top #_desktop_top_menu .top-menu {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  margin: 0;
}
#header .header-top #_desktop_top_menu .top-menu > li { float: none; }

#header .header-top #search_widget {
  float: none;
  flex: 1 1 200px;
  max-width: 340px;
  min-width: 180px;
}

#header .header-top .menu { margin-bottom: 0; }

/* The home page opens with the full-bleed hero, so Classic's 25px wrapper
   padding shows up as a pale strip between the header and the hero. */
#index #wrapper { padding-top: 0; }

/* --------------------------------------------------------------------------
   Responsive tweaks

   Kept at the end of the file on purpose: media queries do not raise
   specificity, so these have to come after the desktop rules they override.
   -------------------------------------------------------------------------- */

/* On touch devices :hover latches after a tap and would leave the veil stuck
   over the photo. There is no quick view worth showing there: tapping the card
   goes to the product. */
@media (hover: none) {
  .product-miniature .highlighted-informations,
  .product-miniature .highlighted-informations.no-variants { display: none; }
}

@media (max-width: 991px) {
  #header .header-top .header-top-right {
    justify-content: flex-end;
    gap: 1rem;
  }
  #header .header-top #search_widget { flex: 1 1 auto; }
}

@media (max-width: 767px) {
  #header .header-top .logo,
  #header .header-top #_desktop_logo img { height: 46px; }
  #header .header-nav > .container > .row > div:first-child { min-height: 40px; }
  #header .header-nav .right-nav { gap: .85rem; }

  /* The mobile bar is floated too: burger, logo, account and cart end up at
     different heights. Flex plus explicit order keeps the visual sequence. */
  #header .header-nav .hidden-md-up.mobile {
    display: flex;
    align-items: center;
    gap: .75rem;
    min-height: 52px;
  }
  #header .header-nav .hidden-md-up.mobile > div { float: none; }
  #header .header-nav .hidden-md-up.mobile > .clearfix { display: none; }
  #header .header-nav #menu-icon { order: 1; display: flex; align-items: center; }
  #header .header-nav #_mobile_logo {
    order: 2;
    flex: 1 1 auto;
    display: flex;
    align-items: center;
    min-width: 0;
  }
  #header .header-nav #_mobile_logo img { max-height: 40px; width: auto; }
  #header .header-nav #_mobile_user_info { order: 3; }
  #header .header-nav #_mobile_cart { order: 4; }
  #header .header-nav #_mobile_user_info,
  #header .header-nav #_mobile_cart {
    display: flex;
    align-items: center;
    background: transparent;
    padding: 0;
    margin: 0;
  }
  .product-miniature .product-description { padding: .9rem 1rem 1.2rem; }
  .block_newsletter { padding: 1.4rem; }

  /* The add-to-cart row wraps on narrow screens: quantity and wishlist stay on
     the first line and the button takes the full width below them. */
  .product-quantity .add { flex: 1 1 100%; order: 3; }
  .product-quantity .add .add-to-cart { width: 100%; }
  .product-quantity .wishlist-button-add { order: 2; margin-left: auto; }
}

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; }
  .product-miniature .thumbnail-container:hover { transform: none; }
}

/* Full-bleed home sections rely on 100vw; prevent the scrollbar from
   introducing a horizontal scroll on the page. */
body { overflow-x: hidden; }