/* ════════════════════════════════════════════════════════════════════════ MATTER CUSTOMIZER — MINI CART LAYOUT + UI PATCH ──────────────────────────────────────────────────────────────────────── Scoped to body.mc-minicart-fix for guaranteed specificity over the theme + Elementor cascade. Goals: 1. Vertical scroll INSIDE the products list (header + footer stay pinned). Critical: a flex parent + min-height:0 on the scrolling child is the only combination that reliably works across iOS Safari, Chrome, and Firefox. 2. Compact the per-line options block. Default WC

renders 5+ rows per item with verbose text like "Total do design: 2 unidades (descontos calculados sobre o total)" and "Preço unitário: 16,00€ +7,00€ = 23,00€" — useful on the cart PAGE, redundant in the mini cart drawer where users want a quick scannable summary. 3. Restyle the area rows as compact chips so the user sees WHICH areas were customized (Frente Completa, Costas Completas) without the verbose label/value dl format. What we do NOT touch: - Elementor's CSS variables (--cart-padding, --product-divider-gap, etc.). Users configure these in Site Settings → Theme Style. - The user's global scrollbar-color / ::-webkit-scrollbar styles. Those work because they're INSIDE a scrolling element; we just need to make sure scrolling actually happens. ════════════════════════════════════════════════════════════════════════ */ /* ── 1. LAYOUT (scroll fix) ──────────────────────────────────────────── */ /* The drawer panel — full viewport height, flex column. 100dvh is the dynamic viewport height (Safari iOS shrinks when the address bar appears); fallback 100vh for older browsers. Specificity: `body.mc-minicart-fix` beats most theme/plugin overrides. */ body.mc-minicart-fix .elementor-menu-cart__main { display: flex !important; flex-direction: column !important; height: 100vh; height: 100dvh; min-height: 0 !important; } /* The Elementor close-button-custom is a direct child of __main and should stay at natural height. Some Elementor versions render it absolutely-positioned; either way, we don't constrain its flex sizing. */ body.mc-minicart-fix .elementor-menu-cart__main > .elementor-menu-cart__close-button-custom { flex: 0 0 auto !important; } /* The shopping cart content wrapper — flex column, grows to fill the remaining height after the close button. Critical: - flex: 1 1 auto → take all available vertical space - min-height: 0 → allow children's overflow to clip below content - overflow: hidden → contain the inner scrolling region Without `min-height: 0` the flex item defaults to its natural content height and the overflow:auto on __products is silently ignored. This is the single most-missed CSS gotcha in flex-column scrollable layouts. */ body.mc-minicart-fix .elementor-menu-cart__main > .widget_shopping_cart_content { flex: 1 1 auto !important; min-height: 0 !important; display: flex !important; flex-direction: column !important; overflow: hidden !important; } /* The free-shipping bar — fixed height at top of the content wrapper. */ body.mc-minicart-fix .elementor-menu-cart__main .free-shipping-bar { flex: 0 0 auto !important; } /* The products list — the scrollable region. - flex: 1 1 auto + min-height: 0 → grow + allow shrink for overflow - overflow-y: auto → scroll vertically when content exceeds height - -webkit-overflow-scrolling: touch → momentum scroll on iOS - overscroll-behavior: contain → STOP scroll chaining. Without this, once the products list reaches its top or bottom, wheel/touch events propagate to , scrolling the product page behind the drawer. `contain` keeps the gesture inside the drawer, also suppressing the iOS pull-to-refresh and the Android over-scroll glow that would leak through. Supported in Chrome 63+, Firefox 59+, Safari 16+. Older browsers degrade to the old behaviour (no worse than before). Padding-right + negative margin-right reserve space for the user's global 5px scrollbar without overlapping remove-item buttons. */ body.mc-minicart-fix .elementor-menu-cart__main .elementor-menu-cart__products { flex: 1 1 auto !important; min-height: 0 !important; overflow-y: auto !important; overflow-x: hidden !important; overscroll-behavior: contain !important; -webkit-overflow-scrolling: touch; padding-right: 4px; margin-right: -4px; } /* v4.8.13 — also contain at the drawer level so wheel/touch on the header / free-shipping bar / subtotal / footer (anywhere INSIDE the drawer but OUTSIDE the scrollable __products) doesn't leak to the page behind. Belt-and-suspenders to the per-element contain above. */ body.mc-minicart-fix .elementor-menu-cart__main { overscroll-behavior: contain; } /* Footer block — fixed height at bottom of the content wrapper. */ body.mc-minicart-fix .elementor-menu-cart__main .elementor-menu-cart__subtotal, body.mc-minicart-fix .elementor-menu-cart__main .cart-shipping-disclaimer, body.mc-minicart-fix .elementor-menu-cart__main .elementor-menu-cart__footer-buttons, body.mc-minicart-fix .elementor-menu-cart__main .cart-trust-badge { flex: 0 0 auto !important; } /* ── 2. COMPACT PRODUCT OPTIONS ──────────────────────────────────────── */ /* The "Ver Opções" toggle (from the user's snippet 41). Make it look like a subtle text affordance instead of a primary action. */ body.mc-minicart-fix .elementor-menu-cart__main .wpcpo-toggle { font-size: var(--m-text-xs, 0.72rem); font-weight: 600; color: var(--m-grey, #888); display: inline-flex; align-items: center; gap: 4px; padding: 2px 0; background: none; border: 0; cursor: pointer; } body.mc-minicart-fix .elementor-menu-cart__main .wpcpo-toggle:hover { color: var(--m-dark, #0f0f0f); } body.mc-minicart-fix .elementor-menu-cart__main .wpcpo-options-wrapper { margin-top: 6px; } /* Hide the verbose WC variation rows in the mini cart context. Rationale per row: - variation-Totaldodesign (Total do design): the multi-size group aggregation explanation is helpful on the cart PAGE but burns 4-5 lines of vertical space in the mini cart for a tooltip-grade info. The user can see all details on the cart page. - variation-Preounitrio (Preço unitário): the unit-price breakdown (16€ +7€ = 23€) is shown only when the user wants to verify the math. The line total (1 × 23€) is already rendered next to it in the mini cart — no need to repeat the math. v4.8.25 — variation-Tcnica (Técnica) was hidden in v4.5+ because the plugin used to render a green "Bordado +12,00 €" pill inline. That pill was removed in v4.8.23 when render_cart_thumbnails() was simplified, leaving the mini-cart with NO indication of which technique was chosen. Re-enabling the row gives the customer the single piece of textual info the composed thumbnail can't convey (you can't see "bordado vs estampagem" from a low-res mock-up). WC generates the dt/dd class names from sanitize_html_class() of the key text, which strips diacritics and spaces: "Total do design" → variation-Totaldodesign "Preço unitário" → variation-Preounitrio Area rows (variation-FrenteCompleta, variation-CostasCompletas, etc.) stay visible so the user knows WHICH areas were customized. */ body.mc-minicart-fix .elementor-menu-cart__main dl.variation > dt.variation-Totaldodesign, body.mc-minicart-fix .elementor-menu-cart__main dl.variation > dd.variation-Totaldodesign, body.mc-minicart-fix .elementor-menu-cart__main dl.variation > dt.variation-Preounitrio, body.mc-minicart-fix .elementor-menu-cart__main dl.variation > dd.variation-Preounitrio { display: none !important; } /* Restyle the remaining variation rows as compact label|value grid. Tighter font + spacing than default WC. Background uses the soft surface tone so the options visually group inside the cart line. v4.8.11 — Font-size at 0.65rem with !important. Elementor ships a per-widget rule with 5-class specificity (.elementor-XXXX .elementor-element.elementor-element-YYYYY .elementor-menu-cart__product .variation { font-size: ... }) that beats our 3-class + 2-element selector at the parent level. The children (dt, dd, dd > p) then inherited Elementor's value because we had no font-size on them. !important locks the size; the children explicitly inherit so any future Elementor rule targeting dt/dd directly is also out-competed by our parent declaration. */ body.mc-minicart-fix .elementor-menu-cart__main dl.variation { /* v4.8.24 — Tighter than v4.8.11. Padding 4×6 instead of 6×8, row-gap collapsed to 0. The block reads as a single info chip stuck under the product name. */ margin: 3px 0 0; padding: 4px 6px; background: var(--m-surface, #f7f7f7); border-radius: var(--m-radius-sm, 8px); font-size: 0.65rem !important; line-height: 1.3; display: grid; grid-template-columns: max-content 1fr; column-gap: 6px; row-gap: 0; } body.mc-minicart-fix .elementor-menu-cart__main dl.variation dt { margin: 0; padding: 0; font-size: inherit !important; font-weight: 600; color: var(--m-grey, #888); } body.mc-minicart-fix .elementor-menu-cart__main dl.variation dd { margin: 0; padding: 0; font-size: inherit !important; color: var(--m-dark, #0f0f0f); } body.mc-minicart-fix .elementor-menu-cart__main dl.variation dd > p { margin: 0; padding: 0; font-size: inherit !important; } /* ── 3. PLUGIN'S OWN mc-cart-thumbs BLOCK ────────────────────────────── */ /* v4.8.24 — Compact horizontal thumb for the back-side preview. The back thumb is small (40×52) and the "Costas" label sits NEXT to it (row layout), not below. Total height is now ~52px instead of the ~84px the vertical layout used in v4.8.23. */ body.mc-minicart-fix .elementor-menu-cart__main .mc-cart-thumbs--back { display: inline-flex; align-items: center; gap: 6px; margin-top: 4px; padding: 3px 6px 3px 4px; background: var(--m-surface, #f7f7f7); border-radius: var(--m-radius-sm, 8px); } body.mc-minicart-fix .elementor-menu-cart__main .mc-cart-thumbs--back .mc-cart-thumb-wrap { display: inline-flex; align-items: center; gap: 6px; } /* Override the inline styles set by render_cart_thumbnails() with !important so the back-thumb visually matches the compact layout we want here. */ body.mc-minicart-fix .elementor-menu-cart__main .mc-cart-thumbs--back .mc-cart-thumb { width: 40px !important; max-width: 40px !important; max-height: 52px !important; } body.mc-minicart-fix .elementor-menu-cart__main .mc-cart-thumbs--back .mc-cart-thumb-label { font-size: 0.62rem; font-weight: 600; color: var(--m-grey, #888); letter-spacing: 0.04em; text-transform: uppercase; } /* ── 4. POLISH ───────────────────────────────────────────────────────── */ /* Tighter spacing between cart items so a mini cart of 4+ items reads as a list, not a stack of cards. Elementor's --product-divider-gap default is 30px — too generous on mobile. v4.8.3 — pulled in from 12px to 10px for the same reason. */ body.mc-minicart-fix .elementor-menu-cart__main .elementor-menu-cart__product { padding-block: 10px !important; } /* Product name — slightly tighter line height + explicit size. v4.8.24 — Pulled down from 0.85rem to 0.82rem so the name occupies one line for short titles ("Polo Premium 240 - Steel Blue, S") on most viewport widths. Long titles still wrap gracefully. */ body.mc-minicart-fix .elementor-menu-cart__main .elementor-menu-cart__product-name { line-height: 1.25; font-size: 0.82rem; } body.mc-minicart-fix .elementor-menu-cart__main .elementor-menu-cart__product-name > a { font-weight: 600; } /* v4.8.24 — Quantity × price line ("1 × 16,00 €"). Pulled from 0.78rem to 0.75rem to match the tighter overall scale. */ body.mc-minicart-fix .elementor-menu-cart__main .elementor-menu-cart__product .quantity, body.mc-minicart-fix .elementor-menu-cart__main .elementor-menu-cart__product-price { font-size: 0.75rem !important; line-height: 1.3; margin-top: 2px; } /* ── 5. JS-INJECTED ENHANCEMENTS (v4.8.1) ───────────────────────────── Styles for the four elements that assets/js/minicart.js injects into the menu cart drawer at runtime: - .free-shipping-bar progress to free-shipping threshold - .cart-shipping-disclaimer "Taxas incluídas..." line under subtotal - .cart-trust-badge "Pagamento seguro" after footer buttons - .custom-empty-container branded empty cart state Migrated from Rafael's Code Snippets entry #41. After installing v4.8.1, that snippet can be safely deleted — the plugin owns all of this end-to-end. */ /* Free shipping bar — sits at the top of the products list, above the cart items. Background uses the soft surface tint so it reads as a tray, not a primary header. */ body.mc-minicart-fix .elementor-menu-cart__main .free-shipping-bar { background: var(--m-surface, #f9f9f9); border-radius: var(--m-radius-sm, 10px); padding: 12px 14px; margin: 0 0 16px; } body.mc-minicart-fix .elementor-menu-cart__main .free-shipping-bar__msg { font-size: var(--m-text-xs, 13px); color: var(--m-grey, #888); display: block; margin-bottom: 8px; line-height: 1.3; } /* The wrapping the remaining amount in the progress message uses the darker text tone so the number reads as the key info while the surrounding sentence stays secondary. */ body.mc-minicart-fix .elementor-menu-cart__main .free-shipping-bar__msg strong { color: var(--m-dark, #0f0f0f); font-weight: 700; } body.mc-minicart-fix .elementor-menu-cart__main .free-shipping-bar__track { height: 4px; background: var(--m-border, #ebebeb); border-radius: 999px; overflow: hidden; } body.mc-minicart-fix .elementor-menu-cart__main .free-shipping-bar__fill { height: 100%; background: var(--m-green, #4a7259); border-radius: 999px; transition: width 0.4s ease; } /* Unlocked state — message gets the green-dark tone so the success reads visually without resorting to a celebratory emoji or banner. */ body.mc-minicart-fix .elementor-menu-cart__main .free-shipping-bar.is-unlocked .free-shipping-bar__msg { color: var(--m-green-dark, #3a5a47); font-weight: 600; } /* Shipping disclaimer — between subtotal and footer buttons. Quiet tone, left-aligned, sits flush against the subtotal block. */ body.mc-minicart-fix .elementor-menu-cart__main .cart-shipping-disclaimer { font-size: 12px; color: var(--m-grey, #888); margin: 0 0 12px; padding: 0; text-align: left; line-height: 1.4; } /* Trust badge — centred, single line, sits below the footer buttons. Currentcolor on the SVG stroke means the icon follows the text tone automatically; no separate fill/stroke management needed. */ body.mc-minicart-fix .elementor-menu-cart__main .cart-trust-badge { display: flex; align-items: center; justify-content: center; gap: 8px; padding: 12px 0 4px; font-size: 12px; color: var(--m-grey, #888); } body.mc-minicart-fix .elementor-menu-cart__main .cart-trust-badge span { display: flex; align-items: center; gap: 4px; } /* Some themes/Elementor configs squash footer-buttons margins — give it a touch of breathing room above for the badge to read clearly. */ body.mc-minicart-fix .elementor-menu-cart__main .elementor-menu-cart__footer-buttons { padding-top: 10px !important; } /* Empty cart state. WC's default empty-message element gets its border/padding stripped so our container fills cleanly inside it. */ body.mc-minicart-fix .elementor-menu-cart__main .woocommerce-mini-cart__empty-message { border: none !important; padding: 0 !important; } body.mc-minicart-fix .elementor-menu-cart__main .custom-empty-container { padding: 60px 20px; text-align: center; display: flex; flex-direction: column; align-items: center; gap: 12px; } body.mc-minicart-fix .elementor-menu-cart__main .empty-cart-icon { margin-bottom: 8px; opacity: 0.9; } body.mc-minicart-fix .elementor-menu-cart__main .custom-empty-container h3 { /* clamp() preserves the responsive sizing from snippet 41 verbatim, so the heading scales between 0.92rem on small viewports and 1.06rem on wider ones without media queries. */ font-size: clamp(0.92rem, 0.84483rem + 0.34483vw, 1.06rem); margin: 0; color: var(--m-dark, #0f0f0f); font-weight: 600; } body.mc-minicart-fix .elementor-menu-cart__main .custom-empty-container p { font-size: clamp(0.86rem, 0.84674rem + 0.06897vw, 0.89rem); color: #777; margin: 0 0 15px; max-width: 260px; line-height: 1.5; } body.mc-minicart-fix .elementor-menu-cart__main .btn-return-shop { display: inline-block; background-color: var(--m-dark, #0f0f0f); color: #fff !important; padding: 14px 30px; min-width: 200px; text-align: center; text-decoration: none !important; font-size: clamp(0.86rem, 0.84674rem + 0.06897vw, 0.89rem); font-weight: 500; border-radius: 12px; transition: opacity 0.3s ease; } body.mc-minicart-fix .elementor-menu-cart__main .btn-return-shop:hover { opacity: 0.85; }