/* States the approved design does not draw. Every rule here is a declared addition to the design. */
.stock.is-out { color: #7d837c; }
.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: 10px; font-weight: 900; }
.mf-fav-count[hidden] { display: none; }
/* After an add to cart WooCommerce inserts "Vezi coșul" 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 11px/1.4 var(--body); letter-spacing: .08em; text-transform: uppercase; text-decoration: underline; text-underline-offset: 4px; }
/* 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. */
.mf-drop { position: relative; }
.mf-drop-list { position: absolute; top: 100%; left: -18px; z-index: 90; display: none; min-width: 200px; padding: 8px 0; background: var(--ink); border: 1px solid #2c3530; }
.mf-drop:hover .mf-drop-list, .mf-drop:focus-within .mf-drop-list, .mf-drop.open .mf-drop-list { display: block; }
.main-nav .mf-drop-list a { display: block; padding: 12px 18px; text-align: left; }
.mobile-menu .mf-menu-group { padding: 22px 0 6px; color: var(--lime); font-size: 11px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
/* 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; }
/* 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; }
/* Cart button (operator 2026-09-21: "nu mi place cum arata butonul de cos"): the design's icon grid stacked the
   label and the count, so the count hung out of the pill. Label and count now sit side by side. */
.site-header .cart { grid-auto-flow: column; align-items: center; gap: 0; line-height: 1; }
@media (min-width: 761px) { .site-header .cart { gap: 8px; font-size: 13px; font-weight: 800; } }
.site-header .cart .cart-count { position: static; }
/* 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: 14px; }
/* 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: 11px; 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; }
}