/* States the approved design does not draw. Every rule here is a declared addition to the design. */
.stock.is-out { color: #5c655f; }
.stock.is-out::before { background: #b8bcb7; }
/* Catalog pagination (archives larger than one page); the design shows a single page. */
.catalog-pagination { margin-top: 36px; }
.catalog-pagination ul { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; list-style: none; }
.catalog-pagination a, .catalog-pagination span { display: inline-flex; align-items: center; justify-content: center; min-width: 44px; min-height: 44px; padding: 0 12px; border: 1px solid var(--line); background: white; font-size: 12px; font-weight: 800; color: var(--ink); text-decoration: none; }
.catalog-pagination .current { border-color: var(--ink); background: var(--ink); color: white; }
/* The design scales the card image on hover; a transformed image paints above the favorite button placed
   before it, so a click on the heart landed on the image link. The heart keeps its own layer. */
.product-media .heart { z-index: 2; }
/* Favorites link in the header (operator 2026-09-21, option 1): the design's round icon with a badge drawn like the cart's (its own class: WooCommerce refreshes every .cart-count in the header with the cart total). */
.mf-fav { position: relative; }
.mf-fav-count { position: absolute; top: -5px; right: -5px; display: grid; place-items: center; width: 20px; height: 20px; border-radius: 50%; background: var(--lime); color: var(--ink); font-size: 12px; font-weight: 900; }
.mf-fav-count[hidden] { display: none; }
/* After an add to cart WooCommerce inserts a cart link next to the button; the design draws no such state. */
.purchase-row .added_to_cart { flex-basis: 100%; margin-top: 4px; color: var(--ink); font: 800 12px/1.4 var(--body); letter-spacing: .08em; text-transform: uppercase; text-decoration: underline; text-underline-offset: 4px; }
.purchase-row .add-to-cart.is-added { background: var(--ink); color: white; animation: mf-cart-confirm .34s ease-out; }
.mf-cart-toast { position: fixed; right: 24px; bottom: 24px; z-index: 1200; max-width: min(360px, calc(100vw - 32px)); padding: 15px 20px; border: 1px solid color-mix(in srgb, var(--lime) 72%, white); border-radius: 4px; background: var(--ink); box-shadow: 0 18px 42px color-mix(in srgb, var(--ink) 28%, transparent); color: white; font: 800 13px/1.35 var(--body); letter-spacing: .04em; opacity: 0; pointer-events: none; transform: translateY(12px); transition: opacity .2s ease, transform .2s ease; }
.mf-cart-toast.is-visible { opacity: 1; transform: translateY(0); }
@keyframes mf-cart-confirm { 0% { transform: scale(1); } 45% { transform: scale(.97); } 100% { transform: scale(1); } }
@media (max-width: 760px) { .mf-cart-toast { top: 14px; right: 16px; bottom: auto; left: 16px; max-width: none; text-align: center; transform: translateY(-12px); } .mf-cart-toast.is-visible { transform: translateY(0); } }
@media (prefers-reduced-motion: reduce) { .purchase-row .add-to-cart.is-added { animation: none; } .mf-cart-toast { transition: none; } }
/* Shared quick buy (master-theme/inc/product-purchase.php) in the Fitness purchase row: second column, outlined. */
.purchase-row .dvk-quick-buy { grid-column:2; min-height:52px; border:2px solid var(--ink); background:transparent; color:var(--ink); }
.purchase-row .dvk-quick-buy:hover, .purchase-row .dvk-quick-buy:focus-visible { background:var(--ink); color:white; }
.purchase-row .dvk-quick-buy__status { grid-column:2; font:700 12px/1.45 var(--body); }
.dvk-sticky-cart .dvk-sticky-cart__button { min-height:52px; }
@media (max-width: 620px) { .dvk-sticky-cart .dvk-sticky-cart__button { min-height:46px; padding-inline:14px; } }
/* Header menu from the WordPress menu (operator 2026-09-21: the same menu as the previous site). Submenus drop down
   under their label; the design draws no submenu. */
/* Store menu dropdowns (operator 2026-09-29: "meniul nu arata deloc ok"): a group opens a panel across the
   whole menu row with its links in columns, on the header's own surface and ink (colour roles header / header-ink;
   the base and white when a design has none), so every link reads on its panel. */
.mf-nav-row .container { position: relative; }
.mf-drop { position: static; }
.mf-drop-list { position: absolute; top: 100%; left: 0; right: 0; z-index: 90; display: none; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 2px 28px; padding: 22px 28px; background: var(--header, var(--ink)); border: 1px solid var(--line); border-top: 3px solid var(--lime); box-shadow: 0 24px 50px color-mix(in srgb, var(--ink) 18%, transparent); }
.mf-drop:hover .mf-drop-list, .mf-drop:focus-within .mf-drop-list, .mf-drop.open .mf-drop-list { display: grid; }
.site-header .main-nav .mf-drop-list a { display: block; padding: 10px 0; border-bottom: 1px solid color-mix(in srgb, var(--line) 60%, transparent); color: var(--header-ink, white); font-size: 14px; text-align: left; white-space: normal; }
.site-header .main-nav .mf-drop-list a:hover { color: var(--text, var(--lime)); }
.mobile-menu .mf-menu-group { padding: 22px 0 6px; color: var(--lime); font-size: 12px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
/* Mobile menu (operator 2026-10-05, phone screenshot): the design drew every entry 30px tall in capitals, so a store
   menu of sixteen entries ran about 1,400px with no search and no account. It now opens wherever the menu button
   shows (up to 1100px, where the design gave the panel no style) as a panel from the header's bottom edge to the
   screen's (absolute and sized by script: the header's backdrop-filter makes it the box a fixed panel is placed in): search, categories as 20px rows, submenus as chips, other pages and the account as small links. */
@media (max-width: 1100px) {
  .site-header .mobile-menu { position: absolute; inset: 100% 0 auto; z-index: 79; display: none; height: calc(100dvh - var(--mf-menu-top, 66px)); min-height: 0; flex-direction: column; padding: 14px 18px 28px; overflow-y: auto; overscroll-behavior: contain; background: var(--ink); color: white; }
  .menu-open .site-header .mobile-menu { display: flex; }
  .site-header .mobile-menu a { border: 0; background: transparent; color: white; text-align: left; text-transform: none; }
  .mobile-menu .mf-menu-search .mf-search { gap: 8px; margin: 0 0 6px; }
  .mobile-menu .mf-menu-search input[type=search] { min-height: 48px; }
  .site-header .mobile-menu .mf-search .btn { min-height: 48px; padding: 0 16px; border: 0; border-radius: 4px; background: var(--lime); color: var(--ink); font: 800 13px/1 var(--body); text-transform: uppercase; }
  .site-header .mobile-menu .mf-menu-main a { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 52px; padding: 12px 0; border-bottom: 1px solid color-mix(in srgb, currentColor 16%, transparent); font-family: var(--display); font-size: 20px; line-height: 1.15; text-transform: uppercase; }
  .site-header .mobile-menu .mf-menu-main a::after { content: "›"; color: var(--lime); font-size: 24px; line-height: 1; }
  .mobile-menu .mf-menu-chips { display: flex; flex-wrap: wrap; gap: 8px; }
  .site-header .mobile-menu .mf-menu-chips a { display: inline-flex; align-items: center; min-height: 40px; padding: 8px 14px; border: 1px solid color-mix(in srgb, currentColor 28%, transparent); border-radius: 99px; font: 600 14px/1.2 var(--body); }
  .mobile-menu .mf-menu-more { display: grid; grid-template-columns: 1fr 1fr; gap: 0 16px; margin-top: 22px; padding-top: 8px; border-top: 1px solid color-mix(in srgb, currentColor 16%, transparent); }
  .site-header .mobile-menu .mf-menu-more a { display: flex; align-items: center; min-height: 44px; padding: 10px 0; font: 600 15px/1.3 var(--body); color: color-mix(in srgb, white 80%, transparent); }
  .site-header .mobile-menu a:hover, .site-header .mobile-menu a:focus-visible { color: var(--lime); }
}
/* The store's menu has eleven entries; they sit on their own row under the logo and icons, spread across the width
   (the design's single row holds six). Below the design's breakpoint the row goes and the mobile menu takes over. */
.mf-nav-row { border-top: 1px solid #2c3530; }
.mf-nav-row .main-nav { justify-content: space-between; gap: 16px; }
.mf-nav-row .main-nav > a, .mf-nav-row .mf-drop-toggle { padding: 16px 0; white-space: nowrap; }
@media (max-width: 1100px) { .mf-nav-row { display: none; } }
/* With the menu on its own row the header grid keeps logo | (empty) | icons; the icons stay in the last column. */
.header-main > .header-actions { grid-column: 3; }
/* Phone header (operator 2026-10-05: "in meniu trebuie sa fie wishlist, cos si buton de search"): search, favourites,
   cart and the menu button, icons only; the blog is reached from the footer, never from the header. */
@media (max-width: 760px) {
  .site-header .header-actions { gap: 6px; }
  .site-header .header-actions .icon-btn.mf-search-btn, .site-header .header-actions .icon-btn.mf-fav { display: grid; place-items: center; width: 44px; min-width: 44px; padding: 0; }
}
/* Product search form in the title band of search results and on the not-found page. */
.mf-search { display: flex; gap: 10px; max-width: 640px; margin-top: 28px; }
.mf-search input[type=search] { flex: 1; min-width: 0; min-height: 52px; padding: 0 18px; border: 1px solid #39433e; border-radius: 4px; background: var(--white); color: var(--ink); font: 500 15px/1.4 var(--body); }
.mf-page .mf-search input[type=search] { border-color: var(--line); }
.mf-search-products + .section { padding-top: 0; }
/* WordPress's standard visually-hidden rule (the -1px margin keeps it from adding a pixel to the page). */
.screen-reader-text { position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0; border: 0; overflow: hidden; clip: rect(1px, 1px, 1px, 1px); clip-path: inset(50%); white-space: nowrap; word-wrap: normal !important; }
/* Header actions (operator 2026-10-01): glyphs alone made search, favourites and account indistinguishable to sighted
   visitors. Desktop and tablet actions are labelled pills; the phone header keeps its compact controls. */
.site-header .mf-header-action { position: relative; grid-auto-flow: column; align-items: center; gap: 0; line-height: 1; text-decoration: none; }
.site-header .mf-header-action-icon { display: grid; place-items: center; min-width: 16px; font-size: 18px; font-weight: 400; line-height: 1; }
.site-header .mf-header-action-label { white-space: nowrap; }
.site-header .cart { position: relative; }
.site-header .cart .mf-cart-icon { display: grid; place-items: center; width: 20px; height: 20px; }
.site-header .mf-search-icon svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
.site-header .cart .mf-cart-icon svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
@media (min-width: 761px) {
  .site-header .mf-header-action { width: auto; min-width: 44px; padding-inline: 14px; border-radius: 99px; gap: 8px; font-size: 12px; font-weight: 800; }
  .site-header .cart { font-size: 13px; }
}
@media (min-width: 761px) and (max-width: 820px) {
  .site-header .header-main { gap: 24px; }
  .site-header .header-actions { gap: 7px; }
  .site-header .mf-header-action { padding-inline: 10px; gap: 6px; font-size: 12px; }
}
.site-header .cart .cart-count { position: static; }
@media (max-width: 760px) {
  .site-header .mf-header-action:not(.cart) .mf-header-action-label { display: none; }
  .site-header .cart .mf-cart-label { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(1px, 1px, 1px, 1px); clip-path: inset(50%); white-space: nowrap; }
  .site-header .cart .cart-count { position: absolute; top: -6px; right: -6px; width: 20px; height: 20px; border: 2px solid var(--header, var(--ink)); font-size: 12px; }
}
/* Catalog on phones (operator 2026-09-21: "filtrele ocupa mult ... as pune 2 produse pe rand"): filters open as a
   panel from the "Filtreaza" button instead of filling the page above the products, and products sit two per row
   down to the smallest phones (the design went to one column under 410 px). */
.mf-filters-head, .mf-filters-done { display: none; }
@media (max-width: 760px) {
  .catalog-layout > .filters { display: none; }
  body.mf-filters-open { overflow: hidden; }
  .filters.mf-panel { position: fixed; inset: 0; z-index: 1000; display: block; overflow-y: auto; padding: 0 16px 96px; background: var(--paper); }
  .filters.mf-panel .filter-group { margin-bottom: 12px; }
  .filters.mf-panel .filter-option:nth-of-type(n+4) { display: flex; }
  .filters.mf-panel .mf-filters-head { position: sticky; top: 0; z-index: 2; display: flex; align-items: center; justify-content: space-between; margin: 0 -16px 16px; padding: 16px; background: var(--ink); color: white; }
  .mf-filters-head strong { font-family: var(--display); font-size: 28px; text-transform: uppercase; }
  .mf-filters-close { width: 44px; height: 44px; border: 1px solid rgba(255,255,255,.25); border-radius: 50%; background: transparent; color: white; font-size: 18px; cursor: pointer; }
  .filters.mf-panel .mf-filters-done { position: fixed; left: 16px; right: 16px; bottom: 16px; z-index: 1001; display: flex; width: auto; }
}
@media (max-width: 410px) {
  .catalog-products, .product-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
/* Product names made for shopping feeds can run past 200 characters; as a page heading they get a smaller size
   (products with editorial content show their own short heading instead). */
.product-summary h1.mf-long-title, h1.mf-long-title { font-size: clamp(28px, 2.4vw, 40px); line-height: 1.05; }
/* Homepage FitTronic block (operator 2026-09-21: "iar se vad rau aceste imagini"): the design floats a cut-out
   product on a dark panel, but store photos have a white background and showed as a white box between black bands.
   The panel is light and the photo blends into it, so only the product shows. */
.brand-visual { background: #f1f3ec; } .brand-visual::before { -webkit-text-stroke: 1px rgba(13, 17, 15, .12); } .brand-visual img { width: 70%; mix-blend-mode: multiply; filter: none; }
/* WordPress / WP Rocket add width and height attributes to images while the design sizes many of them by width
   only, which squeezed them (homepage hero and FitTronic block, operator 2026-09-21: "poza e prea lunga si e
   diforma"). Height follows the image's proportions unless a rule sets it on purpose. */
img { height: auto; }
/* Product names on cards (operator 2026-09-21: "sa aiba maxim 2 randuri"): two lines at most, the full name in
   the link title. Header menu entries larger ("titlurile sunt prea mici"). */
.product-card h3 { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.mf-nav-row .main-nav > a, .mf-nav-row .mf-drop-toggle { font-size: 16px; }
/* Breadcrumbs readable (proposal.json parameter 51, operator 2026-09-29: "breadcrumb-ul prea mic"). */
.breadcrumbs { font-size: 13px; }
/* Product gallery shows every image (operator 2026-09-22; the design drew 4): the desktop thumbnail column stops at the
   main image's height and scrolls; on phones the thumbnail row already scrolls sideways. */
.thumb-list { max-height: 640px; overflow-y: auto; scrollbar-width: thin; }
.thumb { flex-shrink: 0; }
@media (max-width: 760px) { .thumb-list { max-height: none; overflow-y: hidden; } }
/* Cookie consent on phones (operator 2026-09-22, option "bottom bar, compact"): the Complianz banner sits at the
   bottom; on phones its long text scrolls inside a short box and Accept / Refuse share one row, so the banner covers
   the page far less and stops being the page's largest paint. Every button stays visible. */
@media (max-width: 760px) {
  .cmplz-cookiebanner.cmplz-bottom { padding: 12px 14px !important; row-gap: 8px !important; }
  .cmplz-cookiebanner.cmplz-bottom .cmplz-message { font-size: 12px !important; line-height: 1.45 !important; max-height: 70px; overflow-y: auto; }
  .cmplz-cookiebanner.cmplz-bottom .cmplz-buttons { display: flex !important; flex-flow: row wrap !important; gap: 8px !important; }
  .cmplz-cookiebanner.cmplz-bottom .cmplz-buttons .cmplz-btn { flex: 1 1 40% !important; min-width: 0 !important; height: 42px !important; margin: 0 !important; font-size: 14px !important; }
  .cmplz-cookiebanner.cmplz-bottom .cmplz-buttons .cmplz-btn.cmplz-view-preferences,
  .cmplz-cookiebanner.cmplz-bottom .cmplz-buttons .cmplz-btn.cmplz-save-preferences { flex-basis: 100% !important; height: 36px !important; }
  .cmplz-cookiebanner.cmplz-bottom .cmplz-links { margin: 0 !important; }
}
/* Store reviews on product pages (operator 2026-09-22): every real review of the shop, each naming its product. */
.mf-reviews { margin-top: 28px; }
.mf-reviews-title { margin: 0 0 14px; font-weight: 800; text-transform: uppercase; letter-spacing: .06em; font-size: 12px; }
.mf-review-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 14px; }
.mf-review { padding: 18px; border: 1px solid var(--line); background: var(--white); }
.mf-review.is-own { border-left: 4px solid var(--lime); }
.mf-review p { margin: 8px 0 0; }
.mf-review-stars { color: #d9a400; letter-spacing: 2px; }
.mf-review-meta, .mf-review-product { font-size: 13px; color: var(--muted); }
/* Review form at #reviews (review-reminder emails link here). */
.mf-review-form { margin-top: 28px; padding: 24px; border: 1px solid var(--line); background: var(--white); scroll-margin-top: 120px; }
.mf-review-form h3 { margin: 0 0 14px; font-size: 20px; font-weight: 800; }
.mf-review-form p { margin: 0 0 14px; }
.mf-review-form label { display: block; margin-bottom: 6px; font-size: 13px; font-weight: 700; }
.mf-review-form input[type=text], .mf-review-form input[type=email], .mf-review-form select, .mf-review-form textarea { width: 100%; max-width: 560px; padding: 12px; border: 1px solid var(--line); background: #fff; font: inherit; }
.mf-review-form .form-submit input { padding: 14px 24px; border: 0; background: var(--lime); color: var(--ink); font-weight: 800; text-transform: uppercase; cursor: pointer; }
.mf-review-note { font-size: 13px; color: var(--muted); }
.mf-review-thanks { padding: 14px 16px; border-left: 4px solid var(--lime); background: #f5f6f0; font-weight: 700; }
/* WooCommerce turns the rating select into five star links (p.stars); its own stylesheet is not loaded here. */
.mf-review-form p.stars { margin: 0; }
.mf-review-form p.stars a { display: inline-block; width: 36px; height: 36px; font-size: 0; text-decoration: none; }
.mf-review-form p.stars a::before { content: '★'; font-size: 32px; line-height: 36px; color: #cfd3cc; }
.mf-review-form p.stars.selected a::before { color: #d9a400; }
.mf-review-form p.stars.selected a.active ~ a::before { color: #cfd3cc; }
/* Hover preview only with a mouse: on touch screens a hover style turned the first tap into a hover. */
@media (hover: hover) {
  .mf-review-form p.stars:hover a::before { color: #d9a400; }
  .mf-review-form p.stars a:hover ~ a::before { color: #cfd3cc; }
}

/* Rating next to the product title: stars plus the count, linking to the reviews below. */
.product-rating { display: flex; width: max-content; max-width: 100%; align-items: center; gap: 8px; margin-top: 10px; text-decoration: none; color: inherit; }
.product-rating-stars { color: #d9a400; letter-spacing: 2px; font-size: 15px; line-height: 1; }
.product-rating-text { font-size: 13px; color: var(--muted); }
.product-rating:hover .product-rating-text { color: var(--ink); text-decoration: underline; }

/* Store reviews as a carousel: one scrollable track, cards snap, arrows move it by one card. */
.mf-reviews-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 14px; }
.mf-review-nav { display: flex; gap: 8px; }
.mf-review-arrow { width: 38px; height: 38px; border: 1px solid var(--line); background: var(--white); color: var(--ink); font-size: 20px; line-height: 1; cursor: pointer; }
.mf-review-arrow:hover { background: var(--lime); border-color: var(--lime); }
.mf-review-track { display: flex; align-items: flex-start; gap: 14px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; padding-bottom: 4px; }
.mf-review-track::-webkit-scrollbar { display: none; }
.mf-review-track .mf-review { flex: 0 0 min(340px, 82%); scroll-snap-align: start; display: flex; flex-direction: column; gap: 10px; padding: 22px; }
.mf-review-text { margin: 0; font-size: 16px; line-height: 1.5; color: var(--ink);
  display: -webkit-box; -webkit-line-clamp: 5; -webkit-box-orient: vertical; overflow: hidden; }
.mf-review-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0; }
.mf-review-meta b { font-weight: 800; color: var(--ink); }
.mf-review-verified { padding: 2px 8px; background: var(--lime); color: var(--ink); font-size: 12px; font-weight: 800; text-transform: uppercase; letter-spacing: .04em; }

/* Folded review form: a small button until the buyer chooses to write; the box appears only once it is open. */
.mf-review-form { padding: 0; border: 0; background: transparent; }
.mf-review-form-open { display: inline-flex; align-items: center; width: max-content; padding: 12px 20px;
  border: 1px solid var(--ink); background: var(--white); font-size: 14px; font-weight: 800; text-transform: uppercase;
  letter-spacing: .04em; cursor: pointer; list-style: none; }
.mf-review-form-open::-webkit-details-marker { display: none; }
.mf-review-form-open::after { content: '+'; margin-left: 10px; font-size: 16px; }
.mf-review-form[open] .mf-review-form-open::after { content: '−'; }
.mf-review-form-open:hover { background: var(--lime); border-color: var(--lime); }
.mf-review-form[open] { padding: 22px; border: 1px solid var(--line); background: var(--white); }
.mf-review-form[open] .mf-review-form-open { margin-bottom: 18px; }
.mf-review-form-body { padding: 0; }
.mf-review-form .comment-reply-title { display: none; }

/* Quote pills under the rating: the strip scrolls by itself, stops on hover, and holds still for reduced motion. */
/* The product column is laid out with align-items: start, so a child as wide as its content widens the whole column
   and the page with it. The track is taken out of flow: the strip then measures 0 and can never push anything. */
.mf-review-pills { position: relative; height: 34px; margin-top: 12px; width: 100%; max-width: 100%; min-width: 0; overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 20px, #000 calc(100% - 40px), transparent);
  mask-image: linear-gradient(90deg, transparent, #000 20px, #000 calc(100% - 40px), transparent); }
.mf-review-pills-track { position: absolute; left: 0; top: 0; display: flex; gap: 8px; width: max-content; animation: mf-pill-slide 45s linear infinite; }
.mf-pill-copy { display: contents; }
.mf-review-pills:hover .mf-review-pills-track { animation-play-state: paused; }
.mf-pill { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border: 1px solid var(--line);
  background: var(--white); font-size: 13px; line-height: 1.2; white-space: nowrap; }
.mf-pill b { color: #d9a400; font-size: 12px; }
.mf-pill i { font-style: normal; color: var(--ink); }
.mf-pill em { font-style: normal; color: var(--muted); font-size: 12px; }
@keyframes mf-pill-slide { from { transform: translateX(0); } to { transform: translateX(calc(-50% - 4px)); } }
@media (prefers-reduced-motion: reduce) {
  .mf-review-pills { overflow-x: auto; }
  .mf-review-pills-track { animation: none; }
}
/* EU legal guarantee notice trigger (inc/legal-guarantee.php), a legal addition the design did not draw. */
.mf-legal-guarantee { margin: 14px 0 0; font-size: 13px; color: var(--muted); }
.footer-bottom .dvk-lg-trigger { font-size: inherit; }
/* Phone carousels (operator 2026-09-28 and 2026-09-30): a group of cards that is a selection — departments, equipment,
   fit guidance, featured and recommended products, articles, related categories, policies — scrolls sideways one card at a time instead of
   stacking into several screens; the next card shows at the edge so the row reads as one that continues. Listings
   people browse and filter (category products, favourites, search) stay grids. */
@media (max-width: 760px) {
  .goal-grid, .equipment-grid, .fit-grid, .featured .product-grid, .recommendations .product-grid, .journal-grid, .related-grid, .policy-grid {
    display: flex; gap: 12px; overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory;
    scroll-padding-inline: 14px; margin-inline: -14px; padding: 0 14px 6px; scrollbar-width: none;
  }
  .goal-grid::-webkit-scrollbar, .equipment-grid::-webkit-scrollbar, .fit-grid::-webkit-scrollbar, .featured .product-grid::-webkit-scrollbar, .recommendations .product-grid::-webkit-scrollbar,
  .journal-grid::-webkit-scrollbar, .related-grid::-webkit-scrollbar, .policy-grid::-webkit-scrollbar { display: none; }
  .goal-grid > *, .equipment-grid > *, .fit-grid > *, .featured .product-grid > *, .recommendations .product-grid > *, .journal-grid > *, .related-grid > *, .policy-grid > * {
    flex: 0 0 82%; min-width: 0; scroll-snap-align: start;
  }
}
/* Image logo (config/navigation.json "logo"."image"): the image keeps its proportions at the height the config gives. */
/* The logo image is as tall as the child's navigation config says (logo.height), in CSS: the preset's img rule
   (height: auto) outranks an HTML height attribute, and the logo grew to its file's size, past its header row, over
   the store menu (operator 2026-09-29). */
.logo img { display: block; width: auto; height: var(--logo-height, 44px); max-width: 220px; object-fit: contain; }
/* Header controls centre their icon, visible label and optional count as one unit. */
.site-header .icon-btn { justify-content: center; align-content: center; }
/* Footer on phones (operator 2026-09-29): short link columns sit two per row instead of one under another with the
   right half empty; the intro keeps the full width. */
@media (max-width: 760px) {
  .footer-grid { grid-template-columns: 1fr 1fr; column-gap: 20px; }
  .footer-grid > .footer-intro { grid-column: 1 / -1; }
}
/* Brands page (the previous theme's brand_grid shortcode, inc/pages.php): one card per brand with products. */
.mf-brand-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 12px; margin: 24px 0; }
.mf-brand-card { display: grid; place-items: center; gap: 10px; min-height: 120px; padding: 18px; border: 1px solid var(--line); background: var(--white); color: var(--ink); font-weight: 800; text-align: center; text-decoration: none; }
.mf-brand-card img { max-width: 100%; max-height: 60px; width: auto; height: auto; object-fit: contain; }
.mf-brand-card:hover { border-color: var(--ink); }
@media (max-width: 760px) { .mf-brand-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
/* Home banners (proposal.json parameter 54, operator 2026-09-29: "vreau sa bagi aici bannere"): the shop's own wide
   image across the container, its text on a solid panel of the base colour (never straight on the photo, so it reads on
   any image); on phones the image sits above the panel. */
.mf-banners .container { display: grid; gap: 20px; }
.mf-banner { position: relative; display: flex; align-items: flex-end; min-height: 360px; overflow: hidden; background: var(--ink); color: var(--white); cursor: pointer; }
.mf-banner img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.mf-banner-panel { position: relative; display: grid; gap: 12px; justify-items: start; max-width: 440px; margin: 32px; padding: 28px 30px; background: var(--ink); color: var(--white); }
.mf-banner-panel .eyebrow { margin: 0; color: var(--lime); }
.mf-banner-panel h2 { margin: 0; color: var(--white); font-family: var(--display); font-size: 44px; line-height: .95; text-transform: uppercase; }
.mf-banner-meta { color: var(--muted-dark); font-size: 14px; }
.mf-banner:hover .mf-banner-panel { background: var(--ink-2); }
@media (max-width: 760px) {
  .mf-banner { display: block; min-height: 0; }
  .mf-banner img { position: static; display: block; height: auto; aspect-ratio: 16 / 7; }
  .mf-banner-panel { max-width: none; margin: 0; padding: 22px 20px; }
  .mf-banner-panel h2 { font-size: 32px; }
}

/* Favourites on the shared module (master-theme/inc/favorites.php): the card heart keeps the design's .heart look
   (an SVG instead of the text glyph; .is-active replaces the design's .active), the list body uses the list styles. */
.product-media .heart svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linejoin: round; }
.product-media .heart.is-active { background: var(--ink); color: var(--lime); }
.product-media .heart.is-active svg { fill: currentColor; }
.mf-list .dvk-fav-empty, .mf-list .dvk-fav-error { font-size: 16px; }
.mf-list .dvk-fav-status { display: grid; justify-items: start; gap: 16px; }
.mf-list .dvk-fav-status[hidden] { display: none; }
.mf-list .dvk-fav-status .dvk-fav-error { margin: 0; }
.mf-list .dvk-fav-retry { display: inline-flex; align-items: center; justify-content: center; min-height: 48px; padding: 0 22px; border: 1px solid var(--ink); border-radius: 4px; background: transparent; color: var(--ink); font-weight: 800; cursor: pointer; }

/* Product page favourites heart (shared module), a round icon button beside add to cart in the design's look. */
/* In the purchase grid (quantity | add to cart) the heart takes the free cell under the quantity, on the quick-buy row. */
.purchase-row .mf-product-heart { grid-column: 1; grid-row: 2; justify-self: start; }
.product-buying .mf-product-heart { display: inline-grid; place-items: center; flex: 0 0 auto; width: 52px; height: 52px; padding: 0; border: 1px solid var(--line); border-radius: 50%; background: var(--white, #fff); color: var(--ink); cursor: pointer; }
.product-buying .mf-product-heart svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linejoin: round; }
.product-buying .mf-product-heart.is-active { background: var(--ink); color: var(--lime); border-color: var(--ink); }
.product-buying .mf-product-heart.is-active svg { fill: currentColor; }