/* ========================================================= fitZ Shop Enhancements — listing pages only Layout is fully resolved on the server and in CSS. Nothing here depends on a measurement taken after paint, which is what keeps CLS at zero. ========================================================= */ /* --------------------------------------------------------- GRID COLUMNS 2 columns is the painted default on mobile and tablet, so the first paint already matches the stored preference for almost every visitor. An inline script in adds .fitz-view-1 to before paint for the minority who chose single column, so that case does not reflow either. !important is required because the Archive Products widget writes its own inline grid-template-columns. --------------------------------------------------------- */ @media (max-width: 1023px) { .elementor-products-grid ul.products.elementor-grid, html.fitz-view-2 .elementor-products-grid ul.products.elementor-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; } html.fitz-view-1 .elementor-products-grid ul.products.elementor-grid { grid-template-columns: repeat(1, minmax(0, 1fr)) !important; } } /* --------------------------------------------------------- VIEW TOGGLE — hidden from 1024px up, along with its Elementor wrapper so no margin is left behind. --------------------------------------------------------- */ .fitz-view-toggle { display: flex; justify-content: flex-end; align-items: center; gap: 12px; padding: 4px 0 10px; } @media (min-width: 1024px) { .fitz-view-toggle, .elementor-widget-fitz_shop_view_toggle { display: none !important; } } /* Theme button styling would otherwise paint these as filled squares. */ .fitz-view-btn { display: inline-flex !important; align-items: center !important; justify-content: center !important; width: auto !important; min-width: 0 !important; padding: 2px !important; margin: 0 !important; line-height: 0 !important; color: #C8C6BE !important; background: transparent !important; border: none !important; border-radius: 0 !important; box-shadow: none !important; appearance: none !important; cursor: pointer; transition: color 0.15s ease; } .fitz-view-btn.is-active, .fitz-view-btn:hover { color: #121212 !important; } .fitz-view-btn svg { display: block; } .fitz-view-btn:focus-visible { outline: 2px solid #121212; outline-offset: 2px; } /* --------------------------------------------------------- CARD FORM Sits between the photo and the title, inside WooCommerce's product link. The bag is absolutely positioned against this form and pulled up onto the photo, so it takes no space in flow and needs no JS measurement. --------------------------------------------------------- */ .fitz-card-form { position: relative; display: block; margin: 0 0 8px; padding: 0; } /* --------------------------------------------------------- INJECTED "VIEW CART" LINK WooCommerce appends this after whatever element is passed to the added_to_cart event — here, the bag button. The header cart icon already covers it, and letting it appear would push the card contents down after the add. --------------------------------------------------------- */ li.product .added_to_cart, .fitz-card-form .added_to_cart, .fitz-card-form + .added_to_cart { display: none !important; } /* --------------------------------------------------------- TITLE SPACING The loop title carries its own top margin, set by the Archive Products widget with a highly specific selector. Left alone it sits on top of the size row's own spacing, which made the "Space Below Size Row" control look like it did nothing — the control was working, it just was not the element creating the gap. Zeroed here with matching weight so that control governs the whole distance. --------------------------------------------------------- */ ul.products li.product .fitz-card-form + h2, ul.products li.product .fitz-card-form + h3, ul.products li.product .fitz-card-form + .woocommerce-loop-product__title, .elementor-products-grid ul.products li.product .fitz-card-form + .woocommerce-loop-product__title { margin-top: 0 !important; padding-top: 0 !important; } /* --------------------------------------------------------- BAG BUTTON No background — the icon sits directly on the photo, in the same weight as the header cart icon. --------------------------------------------------------- */ .fitz-bag-btn { position: absolute; right: 10px; bottom: 100%; top: auto; margin-bottom: 10px; z-index: 2; display: flex !important; align-items: center !important; justify-content: center !important; min-width: 0 !important; padding: 0 !important; margin-left: 0 !important; margin-right: 0 !important; margin-top: 0 !important; width: 32px; height: 32px; color: #3A3A3A !important; background: transparent !important; border: none !important; border-radius: 0; box-shadow: none; appearance: none !important; cursor: pointer; /* Reads as inactive until a size is chosen, but stays clickable so an early tap nudges the size row rather than doing nothing. */ opacity: 0.45; transition: opacity 0.15s ease, color 0.15s ease, transform 0.15s ease; } .fitz-bag-btn.is-ready { opacity: 1; color: #121212 !important; } .fitz-bag-btn:hover { opacity: 1; color: #121212 !important; } .fitz-bag-btn:active { transform: scale(0.94); } .fitz-bag-btn.is-loading { opacity: 0.4; cursor: wait; } .fitz-bag-btn.is-added { opacity: 1; color: #34C759 !important; } .fitz-bag-btn.is-error { opacity: 1; color: #FF3B30 !important; } .fitz-bag-btn.needs-size { opacity: 1; animation: fitz-nudge 0.4s ease; } .fitz-bag-btn:focus-visible { outline: 2px solid #121212; outline-offset: 2px; } .fitz-bag-svg { display: block; width: 62%; height: 62%; } @keyframes fitz-nudge { 10%, 90% { transform: translateX(-1px); } 20%, 80% { transform: translateX(2px); } 30%, 50%, 70% { transform: translateX(-4px); } 40%, 60% { transform: translateX(4px); } } /* --------------------------------------------------------- SIZE ROW These buttons sit inside the product link, so the theme styles them as link descendants. Every colour, size and decoration property needs !important or the labels render invisible. --------------------------------------------------------- */ .fitz-size-row { display: flex; flex-wrap: wrap; gap: 6px; padding-top: 10px; margin: 0; } .fitz-size-row.needs-size .fitz-size-btn:not(.is-disabled) { border-color: #FF3B30 !important; } .fitz-size-btn { width: auto !important; max-width: none !important; height: auto !important; margin: 0 !important; /* No !important on these — the Size Buttons controls in the fitZ View Toggle widget drive them, and an !important here would block the control. Colour, background and border keep !important because those are the properties the theme overrides on link descendants. */ min-width: 30px; padding: 5px 9px; font-family: inherit; font-size: 11px; font-weight: 400; line-height: 1.2; letter-spacing: 0.3px; text-transform: uppercase; border-radius: 0; text-decoration: none !important; text-indent: 0 !important; color: #121212 !important; background: transparent !important; border: 1px solid #E0E0E0 !important; box-shadow: none !important; appearance: none !important; cursor: pointer; transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease; } .fitz-size-btn:hover:not(.is-disabled):not(.is-selected) { color: #FFFFFF !important; background: #121212 !important; border-color: #121212 !important; } .fitz-size-btn.is-selected { color: #FFFFFF !important; background: #121212 !important; border-color: #121212 !important; } .fitz-size-btn.is-disabled, .fitz-size-btn:disabled { color: #B4B2A9 !important; background: transparent !important; border-color: #EEEEEE !important; text-decoration: line-through !important; cursor: not-allowed; } .fitz-size-btn:focus-visible { outline: 2px solid #121212; outline-offset: 2px; } /* --------------------------------------------------------- INLINE MESSAGE — takes no height when empty so cards never jump. --------------------------------------------------------- */ .fitz-card-msg { margin: 4px 0 0; font-size: 11px; line-height: 1.4; color: #3A3A3A; } .fitz-card-msg:empty { display: none; } .fitz-card-msg.is-error { color: #A32D2D; } /* --------------------------------------------------------- DENSER SIZING IN THE 2-COLUMN VIEW --------------------------------------------------------- */ @media (max-width: 1023px) { html:not(.fitz-view-1) .fitz-size-btn { min-width: 27px; } html:not(.fitz-view-1) .fitz-size-row { gap: 4px; } } @media (prefers-reduced-motion: reduce) { .fitz-size-btn, .fitz-bag-btn, .fitz-view-btn { transition: none; } .fitz-bag-btn.needs-size { animation: none; } .fitz-bag-btn:active { transform: none; } } /* --------------------------------------------------------- INFINITE SCROLL The sentinel and status block reserve their own space before any loading happens, so nothing on screen moves when a batch arrives. Appended cards land below the fold and therefore do not count toward CLS. --------------------------------------------------------- */ .fitz-pagination-hidden { display: none !important; } .fitz-infinite-controls { display: flex; flex-direction: column; align-items: center; gap: 10px; width: 100%; padding: 16px 0 4px; } .fitz-infinite-sentinel { width: 100%; height: 1px; } .fitz-load-more { display: inline-flex; align-items: center; justify-content: center; padding: 12px 28px; font-family: inherit; font-size: 13px; font-weight: 500; letter-spacing: 0.3px; text-transform: uppercase; color: #121212 !important; background: transparent !important; border: 1px solid #121212 !important; border-radius: 4px; box-shadow: none !important; appearance: none !important; cursor: pointer; transition: background-color 0.2s ease, color 0.2s ease; } .fitz-load-more:hover:not(:disabled) { color: #F4F4F4 !important; background: #121212 !important; } .fitz-load-more:disabled { opacity: 0.5; cursor: wait; } .fitz-load-more:focus-visible { outline: 2px solid #121212; outline-offset: 2px; } .fitz-infinite-status { margin: 0; min-height: 1em; font-size: 12px; line-height: 1.4; text-align: center; color: #3A3A3A; } @media (prefers-reduced-motion: reduce) { .fitz-load-more { transition: none; } } /* ========================================================= FILTERS Bottom sheet on mobile, right-hand drawer from 1024px up. Both are the same element — only the transform axis and the sizing change — so there is one panel in the DOM and one set of behaviour to reason about. ========================================================= */ .fitz-filter-panel { --fitz-accent: #121212; --fitz-panel-width: 400px; --fitz-sheet-height: 80vh; } /* --------------------------------------------------------- TRIGGER --------------------------------------------------------- */ .fitz-filter-bar { display: flex; align-items: center; padding: 4px 0 10px; } .fitz-filter-trigger { display: inline-flex !important; align-items: center; gap: 8px; padding: 9px 16px !important; margin: 0 !important; font-family: inherit; font-size: 13px; letter-spacing: 0.3px; color: #121212 !important; background: transparent !important; border: 1px solid #E0E0E0 !important; border-radius: 4px; box-shadow: none !important; appearance: none !important; cursor: pointer; } .fitz-filter-trigger svg { display: block; flex: 0 0 auto; } /* Icon-only keeps a square footprint so it lines up with the view toggle. */ .fitz-filter-trigger.is-icon-only { gap: 6px; padding: 9px 12px !important; } /* Visible to screen readers, not on screen — the label still needs to exist for anyone not seeing the icon. */ .fitz-filter-trigger .screen-reader-text { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } .fitz-filter-count { display: inline-flex; align-items: center; justify-content: center; min-width: 18px; height: 18px; padding: 0 5px; font-size: 10px; font-weight: 600; line-height: 1; color: #FFFFFF; background: var(--fitz-accent, #121212); border-radius: 9px; } .fitz-filter-count[hidden] { display: none; } .fitz-filter-trigger:focus-visible { outline: 2px solid #121212; outline-offset: 2px; } /* --------------------------------------------------------- OVERLAY --------------------------------------------------------- */ .fitz-filter-overlay { position: fixed; inset: 0; z-index: 9998; background: rgba(0, 0, 0, 0.35); opacity: 0; transition: opacity 0.25s ease; } .fitz-filter-overlay.is-open { opacity: 1; } .fitz-filter-overlay[hidden] { display: none; } /* Locking the page prevents the grid scrolling under the sheet. */ body.fitz-filter-open { overflow: hidden; } /* --------------------------------------------------------- PANEL — mobile bottom sheet --------------------------------------------------------- */ .fitz-filter-panel { position: fixed; left: 0; right: 0; bottom: 0; z-index: 9999; display: flex; flex-direction: column; max-height: var(--fitz-sheet-height); background: #FFFFFF; border-radius: 14px 14px 0 0; box-shadow: 0 -8px 30px rgba(0, 0, 0, 0.15); transform: translateY(100%); transition: transform 0.28s cubic-bezier(0.32, 0.72, 0, 1); } .fitz-filter-panel.is-open { transform: translateY(0); } .fitz-filter-panel[hidden] { display: none; } /* --------------------------------------------------------- PANEL — desktop right drawer --------------------------------------------------------- */ @media (min-width: 1024px) { /* No drag gesture on the desktop drawer. */ .fitz-filter-head { touch-action: auto; cursor: default; } .fitz-filter-panel { left: auto; top: 0; bottom: 0; width: var(--fitz-panel-width); max-width: 92vw; max-height: none; border-radius: 0; box-shadow: -8px 0 30px rgba(0, 0, 0, 0.12); transform: translateX(100%); } .fitz-filter-panel.is-open { transform: translateX(0); } .fitz-filter-grabber { display: none; } } /* --------------------------------------------------------- PANEL CHROME --------------------------------------------------------- */ .fitz-filter-head { position: relative; touch-action: none; cursor: grab; user-select: none; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 16px 20px 12px; border-bottom: 1px solid #EEEEEE; } .fitz-filter-grabber { position: absolute; top: 8px; left: 50%; transform: translateX(-50%); width: 44px; height: 4px; background: #D5D5D5; border-radius: 2px; } .fitz-filter-title { margin: 0; font-size: 15px; font-weight: 600; letter-spacing: 0.3px; text-transform: uppercase; } .fitz-filter-close { display: flex !important; align-items: center; justify-content: center; width: 32px !important; height: 32px !important; padding: 0 !important; margin: 0 !important; color: inherit !important; background: transparent !important; border: none !important; box-shadow: none !important; cursor: pointer; } .fitz-filter-body { flex: 1 1 auto; overflow-y: auto; -webkit-overflow-scrolling: touch; padding: 4px 20px 20px; } .fitz-filter-panel.is-loading .fitz-filter-body { opacity: 0.55; pointer-events: none; } /* --------------------------------------------------------- GROUPS --------------------------------------------------------- */ .fitz-filter-group { padding: 18px 0; border-bottom: 1px solid #F0F0F0; } .fitz-filter-group:last-child { border-bottom: none; } .fitz-filter-group-title { margin: 0 0 12px; font-size: 12px; font-weight: 600; letter-spacing: 0.6px; text-transform: uppercase; } .fitz-filter-options { display: flex; flex-direction: column; gap: 10px; } .fitz-filter-option { display: flex; align-items: center; gap: 10px; font-size: 13px; cursor: pointer; } /* The native box is hidden but kept focusable and reachable by assistive tech, rather than replaced with a div. */ .fitz-filter-check { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; } .fitz-filter-box { display: inline-block; flex: 0 0 auto; width: 16px; height: 16px; border: 1px solid #C9C9C9; border-radius: 2px; transition: background-color 0.15s ease, border-color 0.15s ease; } .fitz-filter-check:checked + .fitz-filter-box { background: var(--fitz-accent, #121212); border-color: var(--fitz-accent, #121212); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3.5 8.5l3 3 6-7' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); background-size: 100% 100%; } .fitz-filter-check:focus-visible + .fitz-filter-box { outline: 2px solid var(--fitz-accent, #121212); outline-offset: 2px; } /* --------------------------------------------------------- PRICE --------------------------------------------------------- */ .fitz-price-inputs { display: flex; align-items: center; gap: 10px; margin-bottom: 18px; } .fitz-price-field { display: flex; align-items: center; gap: 6px; flex: 1 1 0; padding: 10px 12px; border: 1px solid #E0E0E0; border-radius: 6px; } .fitz-price-prefix { font-size: 12px; opacity: 0.6; } .fitz-price-field input { width: 100%; min-width: 0; padding: 0 !important; font-size: 13px; color: inherit; background: transparent !important; border: none !important; box-shadow: none !important; appearance: textfield; -moz-appearance: textfield; } .fitz-price-field input::-webkit-outer-spin-button, .fitz-price-field input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; } .fitz-price-dash { opacity: 0.5; } .fitz-price-slider { position: relative; height: 24px; margin: 0 8px; } .fitz-price-track, .fitz-price-fill { position: absolute; top: 50%; height: 2px; transform: translateY(-50%); border-radius: 2px; } .fitz-price-track { left: 0; right: 0; background: #E0E0E0; } .fitz-price-fill { background: var(--fitz-accent, #121212); } /* Two ranges stacked on one track. Only the thumbs accept pointer events, so the lower input cannot swallow clicks meant for the upper one. */ .fitz-price-range { position: absolute; left: -8px; right: -8px; top: 0; width: calc(100% + 16px); height: 24px; margin: 0; padding: 0; background: none !important; border: none !important; appearance: none; -webkit-appearance: none; pointer-events: none; } .fitz-price-range::-webkit-slider-thumb { -webkit-appearance: none; width: 16px; height: 16px; background: #FFFFFF; border: 2px solid var(--fitz-accent, #121212); border-radius: 50%; cursor: pointer; pointer-events: auto; } .fitz-price-range::-moz-range-thumb { width: 16px; height: 16px; background: #FFFFFF; border: 2px solid var(--fitz-accent, #121212); border-radius: 50%; cursor: pointer; pointer-events: auto; } .fitz-price-range:focus-visible::-webkit-slider-thumb { outline: 2px solid var(--fitz-accent, #121212); outline-offset: 2px; } /* --------------------------------------------------------- FOOTER --------------------------------------------------------- */ .fitz-filter-foot { display: flex; align-items: center; gap: 12px; padding: 14px 20px; padding-bottom: calc(14px + env(safe-area-inset-bottom, 0px)); border-top: 1px solid #EEEEEE; background: inherit; } .fitz-filter-clear, .fitz-filter-apply { flex: 1 1 0; height: 44px; font-family: inherit; font-size: 13px; font-weight: 500; letter-spacing: 0.3px; border-radius: 4px; box-shadow: none !important; appearance: none !important; cursor: pointer; } .fitz-filter-clear { flex: 0 0 auto; padding: 0 18px !important; color: inherit !important; background: transparent !important; border: 1px solid #E0E0E0 !important; } .fitz-filter-apply { color: #FFFFFF !important; background: var(--fitz-accent, #121212) !important; border: 1px solid var(--fitz-accent, #121212) !important; } .fitz-filter-apply[hidden] { display: none; } @media (prefers-reduced-motion: reduce) { .fitz-filter-panel, .fitz-filter-overlay, .fitz-filter-box { transition: none; } } /* Shown when a filter combination matches nothing. */ .fitz-filter-empty { margin: 24px 0; padding: 0 4px; font-size: 13px; line-height: 1.5; text-align: center; color: #3A3A3A; }