/* Hararah · Format Stations · Polish layer (merged from hararah_fs_polish v0.1.6 → FS v1.23.0) Activated via attributes set by buildPolishInjection(). */ /* === 1) Smart circular fit =========================================== Real photos cover the circle. SVG line drawings stay at 70%, untouched. */ html[data-fsp-circular="1"] .fs-bottle img, html[data-fsp-circular="1"] .fs-grid-bottle img, html[data-fsp-circular="1"] .fs[data-layout="tabs"] .fs-grid-bottle img { width: 100% !important; height: 100% !important; border-radius: 50% !important; object-fit: cover !important; object-position: center 50% !important; display: block; } html[data-fsp-circular="1"] .fs-bottle > svg, html[data-fsp-circular="1"] .fs-grid-bottle > svg { width: 70% !important; height: 70% !important; margin: auto !important; display: block; position: relative; z-index: 1; } html[data-fsp-circular="1"] .fs-bottle:not(:has(img)), html[data-fsp-circular="1"] .fs-grid-bottle:not(:has(img)) { background: #F7F4EF !important; } /* === 1a) Tighter defaults across ALL layouts — applied always v1.23.4: shrink bottles. v1.23.7: also shrink the GRID columns that were reserving space for the original 78px bottles. */ /* Bottles (Stations rows + Carousel cards + general use) */ .fs .fs-bottle { width: 60px !important; height: 60px !important; } /* Stations layout — accordion rows. Override grid-template-columns so the bottle column matches the new bottle size, otherwise the row stays as wide as the original 78px. */ .fs[data-layout="stations"] .fs-size, .fs .fs-size { grid-template-columns: 60px 1fr auto !important; padding: 8px 12px !important; gap: 12px !important; } .fs[data-layout="stations"] .fs-stations, .fs[data-layout="stations"] .fs-station { /* Tighter station card chrome */ } .fs[data-layout="stations"] .fs-size-label, .fs[data-layout="stations"] .fs-size-name, .fs[data-layout="stations"] .fs-size-info { font-size: 14px !important; } .fs[data-layout="stations"] .fs-size-price, .fs[data-layout="stations"] .fs-size-total { font-size: 16px !important; } .fs[data-layout="stations"] .fs-station-head { padding: 12px 16px !important; } /* Tabs layout — grid tiles. Shrink minmax so columns track tile size. */ .fs[data-layout="tabs"] .fs-grid { grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)) !important; gap: 8px !important; } .fs[data-layout="tabs"] .fs-grid-tile { padding: 10px 8px !important; border-radius: 12px !important; } .fs[data-layout="tabs"] .fs-grid-bottle { width: 56px !important; height: 56px !important; margin-bottom: 4px !important; } .fs[data-layout="tabs"] .fs-grid-tile .fs-grid-label, .fs[data-layout="tabs"] .fs-grid-tile .fs-tile-label { font-size: 13px !important; margin-top: 4px !important; } .fs[data-layout="tabs"] .fs-grid-tile .fs-grid-price, .fs[data-layout="tabs"] .fs-grid-tile .fs-tile-price, .fs[data-layout="tabs"] .fs-grid-tile .fs-price { font-size: 15px !important; margin-top: 2px !important; } /* Compare layout — column cells */ .fs[data-layout="compare"] .fs-compare-cell .fs-bottle { width: 56px !important; height: 56px !important; } .fs[data-layout="compare"] .fs-compare-row { padding: 8px 10px !important; } /* Carousel — card content */ .fs[data-layout="carousel"] .fs-carousel-card { padding: 12px 14px !important; } .fs[data-layout="carousel"] .fs-carousel-card .fs-bottle { width: 64px !important; height: 64px !important; } /* Mobile defaults — even tighter */ @media (max-width: 720px) { .fs .fs-bottle { width: 50px !important; height: 50px !important; } .fs[data-layout="stations"] .fs-size, .fs .fs-size { grid-template-columns: 50px 1fr auto !important; padding: 6px 10px !important; gap: 10px !important; } .fs[data-layout="tabs"] .fs-grid { grid-template-columns: repeat(auto-fill, minmax(90px, 1fr)) !important; } .fs[data-layout="tabs"] .fs-grid-tile { padding: 8px 6px !important; } .fs[data-layout="tabs"] .fs-grid-bottle { width: 48px !important; height: 48px !important; } .fs[data-layout="tabs"] .fs-grid-tile .fs-grid-label { font-size: 12px !important; } .fs[data-layout="tabs"] .fs-grid-tile .fs-grid-price { font-size: 13px !important; } } /* === 1b) Density — admin-pickable card size ========================== */ /* Compact: even tighter than the v1.23.4 defaults */ html[data-fsp-density="compact"] .fs .fs-bottle { width: 46px !important; height: 46px !important; } html[data-fsp-density="compact"] .fs[data-layout="tabs"] .fs-grid-bottle { width: 44px !important; height: 44px !important; } html[data-fsp-density="compact"] .fs .fs-size { grid-template-columns: 46px 1fr auto !important; padding: 6px 10px !important; gap: 8px !important; } html[data-fsp-density="compact"] .fs[data-layout="tabs"] .fs-grid { grid-template-columns: repeat(auto-fill, minmax(90px, 1fr)) !important; gap: 6px !important; } html[data-fsp-density="compact"] .fs[data-layout="tabs"] .fs-grid-tile { padding: 8px 6px !important; } html[data-fsp-density="compact"] .fs-size-label, html[data-fsp-density="compact"] .fs[data-layout="tabs"] .fs-grid-label { font-size: 12px !important; } html[data-fsp-density="compact"] .fs-size-price, html[data-fsp-density="compact"] .fs[data-layout="tabs"] .fs-grid-price { font-size: 13px !important; } @media (max-width: 720px) { html[data-fsp-density="compact"] .fs .fs-bottle { width: 38px !important; height: 38px !important; } html[data-fsp-density="compact"] .fs[data-layout="tabs"] .fs-grid-bottle { width: 38px !important; height: 38px !important; } } /* Large: bigger bottles + serene spacing — for premium hero feel */ html[data-fsp-density="large"] .fs-bottle { width: 96px !important; height: 96px !important; } html[data-fsp-density="large"] .fs[data-layout="tabs"] .fs-grid-bottle { width: 104px !important; height: 104px !important; } html[data-fsp-density="large"] .fs-size { padding: 18px 20px !important; gap: 18px !important; } html[data-fsp-density="large"] .fs-size-info, html[data-fsp-density="large"] .fs-size-label { font-size: 16px !important; } html[data-fsp-density="large"] .fs-size-price { font-size: 20px !important; } @media (max-width: 720px) { html[data-fsp-density="large"] .fs-bottle { width: 76px !important; height: 76px !important; } } /* === 2) Cart bar — toggle + tones =================================== */ html[data-fsp-no-cart="1"] .fs-cart, html[data-fsp-no-cart="1"] .fs-cart-inner { display: none !important; visibility: hidden !important; } html[data-fsp-no-cart="1"] body { padding-bottom: 0 !important; } html:not([data-fsp-no-cart="1"]) .fs-cart { border-top-left-radius: 14px !important; border-top-right-radius: 14px !important; box-shadow: 0 -10px 28px rgba(0,0,0,.18) !important; } html[data-fsp-cart-tone="gold"]:not([data-fsp-no-cart="1"]) .fs-cart { background: linear-gradient(135deg, #C09B7B 0%, #9C7A5A 100%) !important; } html[data-fsp-cart-tone="gold"]:not([data-fsp-no-cart="1"]) .fs-cart, html[data-fsp-cart-tone="gold"]:not([data-fsp-no-cart="1"]) .fs-cart .fs-cart-label, html[data-fsp-cart-tone="gold"]:not([data-fsp-no-cart="1"]) .fs-cart .fs-cart-value, html[data-fsp-cart-tone="gold"]:not([data-fsp-no-cart="1"]) .fs-cart .fs-cart-price { color: #fff !important; } html[data-fsp-cart-tone="dark"]:not([data-fsp-no-cart="1"]) .fs-cart { background: rgba(28,27,28,.96) !important; } html[data-fsp-cart-tone="dark"]:not([data-fsp-no-cart="1"]) .fs-cart, html[data-fsp-cart-tone="dark"]:not([data-fsp-no-cart="1"]) .fs-cart .fs-cart-label, html[data-fsp-cart-tone="dark"]:not([data-fsp-no-cart="1"]) .fs-cart .fs-cart-value, html[data-fsp-cart-tone="dark"]:not([data-fsp-no-cart="1"]) .fs-cart .fs-cart-price { color: #fff !important; } html[data-fsp-cart-tone="glass"]:not([data-fsp-no-cart="1"]) .fs-cart { background: rgba(255,255,255,.78) !important; backdrop-filter: blur(14px) saturate(140%) !important; -webkit-backdrop-filter: blur(14px) saturate(140%) !important; border-top: 1px solid rgba(192,155,123,.3) !important; } /* v1.24.18 — Luxe cart bar, with direct classes stamped on .fs-cart. This survives script order, cached html attributes, and Journal re-mounts. */ .fs-cart.is-fsp-hidden, .fs-cart.fsp-cart-tone-off, html[data-fsp-no-cart="1"] .fs-cart { display: none !important; visibility: hidden !important; pointer-events: none !important; } html:not([data-fsp-no-cart="1"]) .fs-cart, .fs-cart:not(.is-fsp-hidden) { left: max(12px, env(safe-area-inset-left)) !important; right: max(12px, env(safe-area-inset-right)) !important; bottom: max(10px, env(safe-area-inset-bottom)) !important; width: auto !important; max-width: 760px !important; margin: 0 auto !important; padding: 0 !important; border-radius: 22px !important; overflow: hidden !important; border: 1px solid rgba(192,155,123,.34) !important; box-shadow: 0 22px 55px rgba(22,18,14,.26), 0 1px 0 rgba(255,255,255,.28) inset !important; z-index: 9900 !important; } .fs-cart:not(.is-fsp-hidden)::before { content: '' !important; position: absolute !important; inset: 0 !important; pointer-events: none !important; background: radial-gradient(circle at 14% 0%, rgba(255,255,255,.24), transparent 30%), linear-gradient(90deg, rgba(255,255,255,.16), transparent 42%, rgba(255,255,255,.10)) !important; opacity: .9 !important; } .fs-cart:not(.is-fsp-hidden) .fs-cart-inner { position: relative !important; max-width: none !important; min-height: 78px !important; padding: 13px 16px !important; display: grid !important; grid-template-columns: minmax(0, 1fr) auto !important; gap: 14px !important; } .fs-cart:not(.is-fsp-hidden) .fs-cart-label { font-size: 10px !important; letter-spacing: .22em !important; font-weight: 700 !important; opacity: .78 !important; } .fs-cart:not(.is-fsp-hidden) .fs-cart-value { display: flex !important; flex-wrap: wrap !important; align-items: baseline !important; gap: 7px !important; font-size: clamp(16px, 2.2vw, 21px) !important; line-height: 1.25 !important; white-space: normal !important; } .fs-cart:not(.is-fsp-hidden) .fs-cart-price { margin-left: 0 !important; font-family: var(--fs-sans) !important; font-size: clamp(16px, 2vw, 20px) !important; font-weight: 800 !important; } .fs-cart:not(.is-fsp-hidden) .fs-cta { min-width: 188px !important; min-height: 52px !important; justify-content: center !important; border-radius: 999px !important; padding: 0 24px !important; font-size: 13px !important; font-weight: 800 !important; letter-spacing: .08em !important; box-shadow: 0 12px 28px rgba(0,0,0,.18) !important; } .fs-cart.fsp-cart-tone-gold, html[data-fsp-cart-tone="gold"]:not([data-fsp-no-cart="1"]) .fs-cart { background: linear-gradient(135deg, #D7B16F 0%, #C09B7B 40%, #8F6A43 100%) !important; color: #fff !important; } .fs-cart.fsp-cart-tone-gold .fs-cart-label, .fs-cart.fsp-cart-tone-gold .fs-cart-value, .fs-cart.fsp-cart-tone-gold .fs-cart-price, html[data-fsp-cart-tone="gold"]:not([data-fsp-no-cart="1"]) .fs-cart .fs-cart-label, html[data-fsp-cart-tone="gold"]:not([data-fsp-no-cart="1"]) .fs-cart .fs-cart-value, html[data-fsp-cart-tone="gold"]:not([data-fsp-no-cart="1"]) .fs-cart .fs-cart-price { color: #fff !important; } .fs-cart.fsp-cart-tone-gold .fs-cta, html[data-fsp-cart-tone="gold"]:not([data-fsp-no-cart="1"]) .fs-cart .fs-cta { background: #19130D !important; color: #F8E8BE !important; } .fs-cart.fsp-cart-tone-dark, html[data-fsp-cart-tone="dark"]:not([data-fsp-no-cart="1"]) .fs-cart { background: linear-gradient(135deg, rgba(22,18,14,.98), rgba(45,34,24,.98)) !important; color: #F8F0E2 !important; border-color: rgba(216,177,111,.42) !important; } .fs-cart.fsp-cart-tone-dark .fs-cart-label, .fs-cart.fsp-cart-tone-dark .fs-cart-price, html[data-fsp-cart-tone="dark"]:not([data-fsp-no-cart="1"]) .fs-cart .fs-cart-label, html[data-fsp-cart-tone="dark"]:not([data-fsp-no-cart="1"]) .fs-cart .fs-cart-price { color: #D7B16F !important; } .fs-cart.fsp-cart-tone-dark .fs-cart-value, html[data-fsp-cart-tone="dark"]:not([data-fsp-no-cart="1"]) .fs-cart .fs-cart-value { color: #F8F0E2 !important; } .fs-cart.fsp-cart-tone-dark .fs-cta, html[data-fsp-cart-tone="dark"]:not([data-fsp-no-cart="1"]) .fs-cart .fs-cta { background: linear-gradient(135deg, #E8C77B, #B88A49) !important; color: #1C140B !important; } .fs-cart.fsp-cart-tone-glass, html[data-fsp-cart-tone="glass"]:not([data-fsp-no-cart="1"]) .fs-cart { background: rgba(255,252,245,.76) !important; color: #261E16 !important; border-color: rgba(192,155,123,.40) !important; backdrop-filter: blur(22px) saturate(155%) !important; -webkit-backdrop-filter: blur(22px) saturate(155%) !important; } .fs-cart.fsp-cart-tone-glass .fs-cart-label, .fs-cart.fsp-cart-tone-glass .fs-cart-price, html[data-fsp-cart-tone="glass"]:not([data-fsp-no-cart="1"]) .fs-cart .fs-cart-label, html[data-fsp-cart-tone="glass"]:not([data-fsp-no-cart="1"]) .fs-cart .fs-cart-price { color: #9C7A5A !important; } .fs-cart.fsp-cart-tone-glass .fs-cart-value, html[data-fsp-cart-tone="glass"]:not([data-fsp-no-cart="1"]) .fs-cart .fs-cart-value { color: #261E16 !important; } .fs-cart.fsp-cart-tone-glass .fs-cta, html[data-fsp-cart-tone="glass"]:not([data-fsp-no-cart="1"]) .fs-cart .fs-cta { background: #20170E !important; color: #F8E8BE !important; } @media (max-width: 560px) { html:not([data-fsp-no-cart="1"]) .fs-cart, .fs-cart:not(.is-fsp-hidden) { left: 8px !important; right: 8px !important; bottom: max(8px, env(safe-area-inset-bottom)) !important; border-radius: 20px !important; } .fs-cart:not(.is-fsp-hidden) .fs-cart-inner { min-height: 84px !important; grid-template-columns: minmax(0, 1fr) minmax(128px, 42%) !important; gap: 10px !important; padding: 12px !important; } .fs-cart:not(.is-fsp-hidden) .fs-cta { min-width: 0 !important; width: 100% !important; min-height: 50px !important; padding: 0 12px !important; font-size: 11px !important; } .fs-cart:not(.is-fsp-hidden) .fs-cart-label { font-size: 9px !important; } .fs-cart:not(.is-fsp-hidden) .fs-cart-value { font-size: 15px !important; } } /* === 3) Wide-Luxe PDP =============================================== */ html[data-fsp-wide="1"] body.product-product #content, html[data-fsp-wide="1"] body[class*="product-product"] #content { max-width: 1480px !important; margin-left: auto !important; margin-right: auto !important; padding-left: 28px !important; padding-right: 28px !important; } html[data-fsp-wide="1"] body.product-product .container, html[data-fsp-wide="1"] body[class*="product-product"] .container { max-width: 1480px !important; width: 100% !important; } html[data-fsp-wide="1"] body.product-product #content > .row, html[data-fsp-wide="1"] body[class*="product-product"] #content > .row { display: grid !important; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr) !important; gap: 56px !important; align-items: start !important; } @media (max-width: 991px) { html[data-fsp-wide="1"] body.product-product #content > .row, html[data-fsp-wide="1"] body[class*="product-product"] #content > .row { grid-template-columns: 1fr !important; gap: 24px !important; } } html[data-fsp-wide="1"] body.product-product #content > .row > [class^="col-"], html[data-fsp-wide="1"] body[class*="product-product"] #content > .row > [class^="col-"] { width: 100% !important; max-width: 100% !important; flex: 0 0 100% !important; padding-left: 0 !important; padding-right: 0 !important; } html[data-fsp-wide="1"] body[class*="product-product"] h1 { font-family: 'Playfair Display', 'Cormorant Garamond', Georgia, serif !important; font-size: clamp(28px, 3.4vw, 44px) !important; line-height: 1.1 !important; font-weight: 600 !important; letter-spacing: -.01em !important; margin: 0 0 14px !important; } html[data-fsp-wide="1"][data-fsp-sticky-gallery="1"] body[class*="product-product"] #content > .row > div:first-child { position: sticky !important; top: 24px !important; align-self: start !important; } @media (max-width: 991px) { html[data-fsp-wide="1"][data-fsp-sticky-gallery="1"] body[class*="product-product"] #content > .row > div:first-child { position: static !important; } } html[data-fsp-wide="1"] body[class*="product-product"] .product-image, html[data-fsp-wide="1"] body[class*="product-product"] .image, html[data-fsp-wide="1"] body[class*="product-product"] .magnifier-thumb-wrapper, html[data-fsp-wide="1"] body[class*="product-product"] .product-page-images { border-radius: 18px !important; overflow: hidden !important; box-shadow: 0 12px 36px rgba(0,0,0,.10) !important; background: linear-gradient(135deg, #F7F4EF 0%, #fff 60%) !important; } html[data-fsp-wide="1"] body[class*="product-product"] .price, html[data-fsp-wide="1"] body[class*="product-product"] [class*="product-price"], html[data-fsp-wide="1"] body[class*="product-product"] h2.price { font-family: 'Playfair Display', Georgia, serif !important; font-size: clamp(22px, 2.4vw, 32px) !important; color: #9C7A5A !important; font-weight: 600 !important; } html[data-fsp-wide="1"] body[class*="product-product"] #button-cart { background: linear-gradient(135deg, #C09B7B 0%, #9C7A5A 100%) !important; border: none !important; color: #fff !important; padding: 14px 28px !important; font-size: 14px !important; letter-spacing: .04em !important; text-transform: uppercase !important; border-radius: 100px !important; box-shadow: 0 6px 18px rgba(192,155,123,.35) !important; } html[data-fsp-wide="1"] body[class*="product-product"] #button-cart:hover { transform: translateY(-1px) !important; box-shadow: 0 10px 24px rgba(192,155,123,.45) !important; } html[data-fsp-wide="1"] body[class*="product-product"] .nav-tabs { border-bottom: 1px solid #E8DCC6 !important; } html[data-fsp-wide="1"] body[class*="product-product"] .nav-tabs > li > a { color: #6E7275 !important; border: 0 !important; font-weight: 600 !important; letter-spacing: .04em !important; text-transform: uppercase !important; font-size: 12px !important; padding: 14px 20px !important; } html[data-fsp-wide="1"] body[class*="product-product"] .nav-tabs > li.active > a, html[data-fsp-wide="1"] body[class*="product-product"] .nav-tabs > li > a:hover { color: #9C7A5A !important; border-bottom: 2px solid #C09B7B !important; background: transparent !important; } html[data-fsp-wide="1"] body[class*="product-product"] .tab-content { padding: 32px 0 !important; font-size: 15px !important; line-height: 1.75 !important; } html[data-fsp-wide="1"] body[class*="product-product"] .tab-content h2, html[data-fsp-wide="1"] body[class*="product-product"] .tab-content h3 { font-family: 'Playfair Display', Georgia, serif !important; color: #9C7A5A !important; font-weight: 600 !important; } @media (max-width: 720px) { html[data-fsp-wide="1"] body[class*="product-product"] #content { padding-left: 14px !important; padding-right: 14px !important; } } @media (prefers-reduced-motion: reduce) { html[data-fsp-wide="1"] body[class*="product-product"] #button-cart { transition: none !important; transform: none !important; } } /* === 4) Big hover-zoom popup ======================================== When data-fsp-hover-zoom="1", JS attaches a 380×380 floating card to on hover over any size option. Shows the actual photo + label + price. Disappears on mouse-leave. Smart left/right placement. */ #hh-fs-hover-zoom { position: fixed; z-index: 99980; width: 380px; background: #fff; border: 1px solid #C09B7B; border-radius: 18px; box-shadow: 0 18px 48px rgba(0,0,0,.22); padding: 18px; pointer-events: none; opacity: 0; transform: scale(.96); transition: opacity .14s ease, transform .18s ease; font-family: Inter, system-ui, -apple-system, sans-serif; color: #2C2B2C; } #hh-fs-hover-zoom.is-on { opacity: 1; transform: scale(1); } #hh-fs-hover-zoom .hzo-img-wrap { width: 100%; height: 280px; border-radius: 14px; background: linear-gradient(135deg, #F7F4EF 0%, #fff 60%); display: flex; align-items: center; justify-content: center; overflow: hidden; margin-bottom: 14px; position: relative; } #hh-fs-hover-zoom .hzo-img-wrap img { max-width: 90%; max-height: 90%; object-fit: contain; filter: drop-shadow(0 8px 14px rgba(0,0,0,.18)); } #hh-fs-hover-zoom .hzo-img-wrap svg { width: 70%; height: 70%; color: #9C7A5A; opacity: .7; } #hh-fs-hover-zoom .hzo-row { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; } #hh-fs-hover-zoom .hzo-label { font-family: 'Playfair Display', Georgia, serif; font-size: 22px; font-weight: 600; color: #2C2B2C; margin: 0; } #hh-fs-hover-zoom .hzo-price { font-family: 'Playfair Display', Georgia, serif; font-size: 22px; font-weight: 600; color: #9C7A5A; } #hh-fs-hover-zoom .hzo-perml { font-size: 12px; color: #6E7275; margin-top: 2px; } #hh-fs-hover-zoom .hzo-badges { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; } #hh-fs-hover-zoom .hzo-badge { padding: 3px 10px; border-radius: 100px; font-size: 10px; text-transform: uppercase; letter-spacing: .04em; font-weight: 600; background: #F7F4EF; color: #9C7A5A; } #hh-fs-hover-zoom .hzo-badge--popular { background: rgba(192,155,123,.18); color: #9C7A5A; } #hh-fs-hover-zoom .hzo-badge--value { background: rgba(122,191,163,.18); color: #2D7E5F; } #hh-fs-hover-zoom .hzo-badge--travel { background: rgba(111,158,200,.18); color: #4A7A99; } #hh-fs-hover-zoom .hzo-badge--refill { background: rgba(217,119,6,.16); color: #a85a05; } /* Hide on touch — mouse-only feature */ @media (hover: none) { #hh-fs-hover-zoom { display: none !important; } } @media (max-width: 720px) { #hh-fs-hover-zoom { display: none !important; } } @media (prefers-reduced-motion: reduce) { #hh-fs-hover-zoom { transition: opacity .1s linear; transform: none !important; } } /* === 5) Polish-only layout variants (v1.23.5) ========================= These rebuild the visual on top of an existing FS layout DOM: • pillrow → built on stations DOM, rendered as a horizontal pill row • compactlist → built on stations DOM, rendered as a flat single-column list • photowall → built on tabs DOM, rendered as a 4-col photo grid No JS changes needed; pure CSS transformation. */ /* ---- 5a) Pill Row — single horizontal pill list ---------------------- Built on Stations DOM. Hides station heads, expands all bodies, renders sizes inline as compact pills. Polish JS forces all stations open (overrides inline max-height). */ html[data-fsp-variant="pillrow"] .fs-head, html[data-fsp-variant="pillrow"] .fs-station-head, html[data-fsp-variant="pillrow"] .fs-station-icon, html[data-fsp-variant="pillrow"] .fs-station-title, html[data-fsp-variant="pillrow"] .fs-station-meta, html[data-fsp-variant="pillrow"] .fs-meta-line { display: none !important; } html[data-fsp-variant="pillrow"] .fs-station { border: 0 !important; background: transparent !important; margin: 0 0 10px !important; padding: 0 !important; box-shadow: none !important; } html[data-fsp-variant="pillrow"] .fs-station::before, html[data-fsp-variant="compactlist"] .fs-station::before { content: attr(data-title); position: static !important; inset: auto !important; display: block !important; width: auto !important; height: auto !important; margin: 5px 0 4px !important; padding: 0 2px !important; background: none !important; border: 0 !important; box-shadow: none !important; transform: none !important; pointer-events: none !important; font-family: var(--fs-sans, inherit) !important; font-size: 11px !important; font-weight: 800 !important; line-height: 1.2 !important; letter-spacing: 1.8px !important; text-transform: uppercase !important; color: #6F5336 !important; opacity: 1 !important; visibility: visible !important; } html[data-fsp-variant="pillrow"] .fs-station::after { content: none !important; display: none !important; } html[data-fsp-variant="pillrow"] .fs-body { max-height: none !important; overflow: visible !important; } html[data-fsp-variant="pillrow"] .fs-body-inner { padding: 0 !important; border: 0 !important; } html[data-fsp-variant="pillrow"] .fs-sizes { display: flex !important; flex-direction: row !important; flex-wrap: nowrap !important; gap: 8px !important; padding: 6px 0 !important; overflow-x: auto !important; overflow-y: hidden !important; scroll-snap-type: x mandatory !important; -webkit-overflow-scrolling: touch; } /* v1.24.17 — cream/gold theme. Was using --fs-bg-chip (dark theme) which clashed badly with cream-theme stores like Arabiva. Hard-coded to the Arabiva palette (cream card · soft border · dark label · gold price) so the variant looks right on any host theme. */ html[data-fsp-variant="pillrow"] .fs-size { flex: 0 0 auto !important; display: inline-flex !important; flex-direction: row !important; align-items: center !important; grid-template-columns: none !important; background: #fff !important; border: 1px solid #E8DCC6 !important; border-radius: 100px !important; padding: 6px 14px 6px 6px !important; gap: 8px !important; scroll-snap-align: start !important; cursor: pointer; transition: all .15s ease; box-shadow: 0 1px 2px rgba(124, 95, 70, .06); } html[data-fsp-variant="pillrow"] .fs-size:hover, html[data-fsp-variant="pillrow"] .fs-size.is-selected { border-color: #C09B7B !important; background: linear-gradient(135deg, #FAF5EC, #fff) !important; box-shadow: 0 2px 8px rgba(192,155,123,.25); } html[data-fsp-variant="pillrow"] .fs-size .fs-bottle { width: 32px !important; height: 32px !important; flex-shrink: 0 !important; margin: 0 !important; } html[data-fsp-variant="pillrow"] .fs-size .fs-bottle svg { width: 64% !important; height: 64% !important; } html[data-fsp-variant="pillrow"] .fs-size-label, html[data-fsp-variant="pillrow"] .fs-size-info, html[data-fsp-variant="pillrow"] .fs-size .fs-label { font-size: 13px !important; font-weight: 600 !important; color: #2C2B2C !important; white-space: nowrap !important; margin: 0 !important; } html[data-fsp-variant="pillrow"] .fs-size-price, html[data-fsp-variant="pillrow"] .fs-size .fs-price { font-size: 13px !important; font-weight: 700 !important; color: #9C7A5A !important; white-space: nowrap !important; margin-left: 4px !important; } html[data-fsp-variant="pillrow"] .fs-size .fs-perml, html[data-fsp-variant="pillrow"] .fs-size .fs-badge { display: none !important; } /* ---- 5b) Compact List — flat single-column dense list ---------------- Built on Stations DOM. Hides station heads, expands all bodies, renders sizes as a flat dense list. Polish JS forces all open. */ html[data-fsp-variant="compactlist"] .fs-head, html[data-fsp-variant="compactlist"] .fs-station-head, html[data-fsp-variant="compactlist"] .fs-station-icon, html[data-fsp-variant="compactlist"] .fs-station-title, html[data-fsp-variant="compactlist"] .fs-station-meta, html[data-fsp-variant="compactlist"] .fs-meta-line { display: none !important; } html[data-fsp-variant="compactlist"] .fs-station { border: 0 !important; background: transparent !important; margin: 0 !important; padding: 0 !important; box-shadow: none !important; } html[data-fsp-variant="compactlist"] .fs-station::before { margin: 9px 12px 7px !important; } html[data-fsp-variant="compactlist"] .fs-body { max-height: none !important; overflow: visible !important; } html[data-fsp-variant="compactlist"] .fs-body-inner { padding: 0 !important; border: 0 !important; } html[data-fsp-variant="compactlist"] .fs-sizes { display: flex !important; flex-direction: column !important; gap: 0 !important; padding: 0 !important; } /* v1.24.17 — cream/gold theme. Was using --fs-bg-chip dark variables which produced black rows with invisible labels on cream-theme stores. */ html[data-fsp-variant="compactlist"] .fs-size { display: flex !important; flex-direction: row !important; align-items: center !important; grid-template-columns: none !important; background: #fff !important; border: 0 !important; border-bottom: 1px solid #E8DCC6 !important; border-radius: 0 !important; padding: 10px 14px !important; gap: 12px !important; cursor: pointer; transition: background .15s ease, box-shadow .15s ease; } html[data-fsp-variant="compactlist"] .fs-stations > .fs-station:first-child .fs-sizes .fs-size:first-child { border-top-left-radius: 10px; border-top-right-radius: 10px; } html[data-fsp-variant="compactlist"] .fs-stations > .fs-station:last-child .fs-sizes .fs-size:last-child { border-bottom-left-radius: 10px; border-bottom-right-radius: 10px; border-bottom: 0 !important; } /* Outer cream frame for the whole list (a single soft border surrounding all rows) */ html[data-fsp-variant="compactlist"] .fs-stations { border: 1px solid #E8DCC6 !important; border-radius: 10px !important; overflow: hidden !important; background: #FAF5EC !important; box-shadow: 0 1px 3px rgba(124, 95, 70, .06) !important; } html[data-fsp-variant="compactlist"] .fs-size:hover { background: #FAF5EC !important; } html[data-fsp-variant="compactlist"] .fs-size.is-selected { background: linear-gradient(90deg, #FAF5EC 0%, #fff 100%) !important; box-shadow: inset 3px 0 0 #C09B7B !important; } html[data-fsp-variant="compactlist"] .fs-size .fs-bottle { width: 30px !important; height: 30px !important; flex-shrink: 0 !important; margin: 0 !important; } html[data-fsp-variant="compactlist"] .fs-size-label, html[data-fsp-variant="compactlist"] .fs-size-info, html[data-fsp-variant="compactlist"] .fs-size .fs-label { font-size: 13px !important; font-weight: 600 !important; color: #2C2B2C !important; flex: 1 !important; margin: 0 !important; } html[data-fsp-variant="compactlist"] .fs-size-price, html[data-fsp-variant="compactlist"] .fs-size .fs-price { font-size: 14px !important; font-weight: 700 !important; color: #9C7A5A !important; margin-left: auto !important; } /* ---- 5c) Photo Wall — 4-col tight photo grid ------------------------- Built on Tabs DOM. Smaller tiles, no padding chrome — pure photos. Hides labels/prices unless hovered. */ html[data-fsp-variant="photowall"] .fs[data-layout="tabs"] .fs-grid { grid-template-columns: repeat(4, 1fr) !important; gap: 6px !important; } @media (max-width: 720px) { html[data-fsp-variant="photowall"] .fs[data-layout="tabs"] .fs-grid { grid-template-columns: repeat(3, 1fr) !important; } } html[data-fsp-variant="photowall"] .fs[data-layout="tabs"] .fs-grid-tile { padding: 6px !important; border-radius: 10px !important; background: #fff !important; border: 1px solid #E8DCC6 !important; cursor: pointer; position: relative !important; } html[data-fsp-variant="photowall"] .fs[data-layout="tabs"] .fs-grid-tile:hover { transform: translateY(-2px) !important; box-shadow: 0 6px 16px rgba(0,0,0,.12) !important; border-color: #C09B7B !important; } html[data-fsp-variant="photowall"] .fs[data-layout="tabs"] .fs-grid-bottle { width: 100% !important; height: 80px !important; margin: 0 !important; border-radius: 8px !important; background: linear-gradient(135deg, #F7F4EF, #fff) !important; } html[data-fsp-variant="photowall"] .fs[data-layout="tabs"] .fs-grid-bottle img { border-radius: 8px !important; } html[data-fsp-variant="photowall"] .fs[data-layout="tabs"] .fs-grid-tile .fs-grid-label { font-size: 11px !important; margin-top: 4px !important; text-align: center; display: block; } html[data-fsp-variant="photowall"] .fs[data-layout="tabs"] .fs-grid-tile .fs-grid-price { font-size: 12px !important; margin-top: 0 !important; text-align: center; color: #9C7A5A !important; font-weight: 600 !important; } html[data-fsp-variant="photowall"] .fs[data-layout="tabs"] .fs-grid-tile .fs-badge { display: none !important; } html[data-fsp-variant="photowall"] .fs[data-layout="tabs"] .fs-grid-tile.is-selected { border-color: #C09B7B !important; box-shadow: 0 0 0 2px #C09B7B !important; } /* ---- 5d) Icon Bar — minimal icon row + cards on demand =============== Built on Tabs DOM. NO body shown until user clicks an icon — `data-fsp-armed="1"` is set by polish.js on the first click. Premium, minimal, luxe. */ /* Hide ALL tab bodies until armed (initial calm state) */ html[data-fsp-variant="iconbar"] .fs[data-layout="tabs"] .fs-tab-body { display: none !important; } /* Once armed, FS's default `.fs-tab-body.is-active { display: block }` takes effect again — we just bump it with !important to be safe. */ html[data-fsp-variant="iconbar"][data-fsp-armed="1"] .fs[data-layout="tabs"] .fs-tab-body.is-active { display: block !important; } /* Hide the Smart Bundle card too until user has chosen a format — it makes no sense to show "buy this with that" before there's a "this". */ html[data-fsp-variant="iconbar"]:not([data-fsp-armed="1"]) .fs-bundle-host, html[data-fsp-variant="iconbar"]:not([data-fsp-armed="1"]) .fs-bundle, html[data-fsp-variant="iconbar"]:not([data-fsp-armed="1"]) .fs-bundle-card, html[data-fsp-lazy="1"]:not([data-fsp-armed="1"]) .fs-bundle-host, html[data-fsp-lazy="1"]:not([data-fsp-armed="1"]) .fs-bundle, html[data-fsp-lazy="1"]:not([data-fsp-armed="1"]) .fs-bundle-card { display: none !important; } /* ============================================================ 6) LAZY REVEAL — applies the iconbar "click to reveal" behavior to other compatible layouts (tabs / stations / carousel). Activated via set by buildPolishInjection. ============================================================ */ /* TABS layout — hide all bodies until armed */ html[data-fsp-lazy="1"][data-fsp-variant=""] .fs[data-layout="tabs"] .fs-tab-body, html[data-fsp-lazy="1"]:not([data-fsp-variant]) .fs[data-layout="tabs"] .fs-tab-body { display: none !important; } html[data-fsp-lazy="1"][data-fsp-armed="1"] .fs[data-layout="tabs"] .fs-tab-body.is-active { display: block !important; } html[data-fsp-lazy="1"]:not([data-fsp-armed="1"]) .fs[data-layout="tabs"] .fs-tabs-bodies::before { content: "Tap a tab above to view sizes"; display: block; text-align: center; color: var(--fs-text-secondary, #8a8270); font-size: 12px; font-style: italic; letter-spacing: .04em; padding: 30px 20px 50px; opacity: .6; } [dir="rtl"] html[data-fsp-lazy="1"]:not([data-fsp-armed="1"]) .fs[data-layout="tabs"] .fs-tabs-bodies::before, html[dir="rtl"][data-fsp-lazy="1"]:not([data-fsp-armed="1"]) .fs[data-layout="tabs"] .fs-tabs-bodies::before { content: "اضغط على تاب لرؤية الأحجام"; } /* STATIONS layout — close all bodies completely until armed. v1.24.16 — Guard against compactlist/pillrow variants. Those variants are built on the stations DOM but hide the station heads and ALWAYS show sizes expanded. Combining them with lazy mode hides everything and leaves only the placeholder pseudo-element visible. */ html[data-fsp-lazy="1"]:not([data-fsp-armed="1"]):not([data-fsp-variant="compactlist"]):not([data-fsp-variant="pillrow"]) .fs[data-layout="stations"] .fs-body { max-height: 0 !important; overflow: hidden !important; border: 0 !important; } html[data-fsp-lazy="1"][data-fsp-armed="1"] .fs[data-layout="stations"] .fs-station.is-open .fs-body { /* once armed, FS's normal accordion behavior takes over */ } html[data-fsp-lazy="1"]:not([data-fsp-armed="1"]):not([data-fsp-variant="compactlist"]):not([data-fsp-variant="pillrow"]) .fs[data-layout="stations"] .fs-stations::after { content: "Tap a station to expand"; display: block; text-align: center; color: var(--fs-text-secondary, #8a8270); font-size: 12px; font-style: italic; letter-spacing: .04em; padding: 18px 20px; opacity: .55; } [dir="rtl"] html[data-fsp-lazy="1"]:not([data-fsp-armed="1"]):not([data-fsp-variant="compactlist"]):not([data-fsp-variant="pillrow"]) .fs[data-layout="stations"] .fs-stations::after, html[dir="rtl"][data-fsp-lazy="1"]:not([data-fsp-armed="1"]):not([data-fsp-variant="compactlist"]):not([data-fsp-variant="pillrow"]) .fs[data-layout="stations"] .fs-stations::after { content: "اضغط على قسم لتوسيعه"; } /* v1.24.18 — carousel is already a guided browse surface. Hiding it leaves only arrows/dots visible, which reads as broken. Keep cards visible even if an older cached page still has data-fsp-lazy="1". */ html[data-fsp-lazy="1"]:not([data-fsp-armed="1"]) .fs[data-layout="carousel"] .fs-carousel-track { display: flex !important; } html[data-fsp-lazy="1"]:not([data-fsp-armed="1"]) .fs[data-layout="carousel"] .fs-carousel-card { display: block !important; } /* COMPARE layout — hide columns until armed */ html[data-fsp-lazy="1"]:not([data-fsp-armed="1"]) .fs[data-layout="compare"] .fs-compare-rows { display: none !important; } html[data-fsp-lazy="1"]:not([data-fsp-armed="1"]) .fs[data-layout="compare"] .fs-compare-col { cursor: pointer; } html[data-fsp-lazy="1"][data-fsp-armed="1"] .fs[data-layout="compare"] .fs-compare-col:not(.is-active) .fs-compare-rows { /* armed but column not active: stay hidden until that column is clicked */ } /* Bundle — already handled in section 5d, but extend for lazy variant */ html[data-fsp-lazy="1"]:not([data-fsp-armed="1"]) .fs-bundle-host, html[data-fsp-lazy="1"]:not([data-fsp-armed="1"]) .fs-bundle, html[data-fsp-lazy="1"]:not([data-fsp-armed="1"]) .fs-bundle-card { display: none !important; } /* Subtle hint while not armed — shown in the empty area below icons */ html[data-fsp-variant="iconbar"]:not([data-fsp-armed="1"]) .fs[data-layout="tabs"] .fs-tabs-bodies::before { content: "Tap an icon above to choose a format"; display: block; text-align: center; color: var(--fs-text-secondary, #8a8270); font-size: 12px; font-style: italic; letter-spacing: .04em; padding: 40px 20px 60px; opacity: .65; } [dir="rtl"] html[data-fsp-variant="iconbar"]:not([data-fsp-armed="1"]) .fs[data-layout="tabs"] .fs-tabs-bodies::before, html[data-fsp-variant="iconbar"][dir="rtl"]:not([data-fsp-armed="1"]) .fs[data-layout="tabs"] .fs-tabs-bodies::before { content: "اضغط على أيقونة لاختيار العبوة"; } /* Icon bar layout proper */ html[data-fsp-variant="iconbar"] .fs[data-layout="tabs"] .fs-tabs-head { display: flex !important; justify-content: center !important; gap: 18px !important; border-bottom: 1px solid var(--fs-border-soft, rgba(192,155,123,.18)) !important; padding: 14px 8px 12px !important; margin-bottom: 18px !important; overflow-x: auto !important; } html[data-fsp-variant="iconbar"] .fs[data-layout="tabs"] .fs-tab { flex: 0 0 auto !important; display: flex !important; flex-direction: column !important; align-items: center !important; gap: 6px !important; padding: 6px 10px 10px !important; background: transparent !important; border: 0 !important; cursor: pointer; position: relative; transition: transform .2s ease, opacity .2s ease; opacity: .55; } html[data-fsp-variant="iconbar"] .fs[data-layout="tabs"] .fs-tab:hover { opacity: 1 !important; transform: translateY(-1px); } html[data-fsp-variant="iconbar"] .fs[data-layout="tabs"] .fs-tab.is-active { opacity: 1 !important; } /* Big circular icon */ html[data-fsp-variant="iconbar"] .fs[data-layout="tabs"] .fs-tab-icon { width: 56px !important; height: 56px !important; border-radius: 50% !important; background: linear-gradient(160deg, rgba(255,255,255,.04), rgba(0,0,0,.18)) !important; border: 1px solid var(--fs-border-soft, rgba(192,155,123,.22)) !important; display: flex !important; align-items: center !important; justify-content: center !important; box-shadow: inset 0 1px 2px rgba(255,255,255,.05), 0 4px 12px rgba(0,0,0,.18); transition: all .25s ease; } html[data-fsp-variant="iconbar"] .fs[data-layout="tabs"] .fs-tab-icon svg { width: 26px !important; height: 26px !important; color: var(--fs-text-secondary, #8a8270) !important; transition: color .2s ease; } html[data-fsp-variant="iconbar"] .fs[data-layout="tabs"] .fs-tab.is-active .fs-tab-icon { background: linear-gradient(135deg, rgba(192,155,123,.18), rgba(192,155,123,.05)) !important; border-color: var(--fs-gold, #C09B7B) !important; box-shadow: inset 0 0 0 1px rgba(192,155,123,.25), 0 6px 18px rgba(192,155,123,.25); } html[data-fsp-variant="iconbar"] .fs[data-layout="tabs"] .fs-tab.is-active .fs-tab-icon svg { color: var(--fs-gold, #C09B7B) !important; } /* Small label under icon (smaller than default Tabs) */ html[data-fsp-variant="iconbar"] .fs[data-layout="tabs"] .fs-tab-label { font-size: 11px !important; font-family: 'Playfair Display', Georgia, serif !important; letter-spacing: .04em !important; text-transform: uppercase !important; color: var(--fs-text-secondary, #8a8270) !important; margin: 0 !important; padding: 0 !important; font-weight: 500 !important; } html[data-fsp-variant="iconbar"] .fs[data-layout="tabs"] .fs-tab.is-active .fs-tab-label { color: var(--fs-gold, #C09B7B) !important; font-weight: 600 !important; } /* Gold underline below active icon */ html[data-fsp-variant="iconbar"] .fs[data-layout="tabs"] .fs-tab.is-active::after { content: ""; position: absolute; left: 50%; bottom: -1px; width: 24px; height: 2px; background: var(--fs-gold, #C09B7B); transform: translateX(-50%); border-radius: 2px; box-shadow: 0 0 12px rgba(192,155,123,.5); } /* Body — clean, generous, focused */ html[data-fsp-variant="iconbar"] .fs[data-layout="tabs"] .fs-tabs-bodies { padding: 0 4px !important; } html[data-fsp-variant="iconbar"] .fs[data-layout="tabs"] .fs-tab-headline { text-align: center !important; font-size: 12px !important; letter-spacing: .06em !important; text-transform: uppercase !important; color: var(--fs-text-secondary, #8a8270) !important; margin-bottom: 18px !important; padding: 0 !important; opacity: .85; } /* Sizes grid — 2 cols on desktop, 2 on tablet, 1 on mobile. Looks airier than the default 4-column tabs grid. */ html[data-fsp-variant="iconbar"] .fs[data-layout="tabs"] .fs-grid { grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)) !important; gap: 10px !important; max-width: 720px !important; margin: 0 auto !important; } html[data-fsp-variant="iconbar"] .fs[data-layout="tabs"] .fs-grid-tile { background: var(--fs-bg-chip, #1a1612) !important; border: 1px solid var(--fs-border-soft, rgba(192,155,123,.15)) !important; border-radius: 14px !important; padding: 14px !important; display: flex !important; flex-direction: row !important; align-items: center !important; text-align: left !important; gap: 14px !important; transition: all .25s ease; } html[data-fsp-variant="iconbar"] .fs[data-layout="tabs"] .fs-grid-tile:hover { transform: translateY(-1px) !important; border-color: var(--fs-gold, #C09B7B) !important; box-shadow: 0 6px 18px rgba(192,155,123,.18); } html[data-fsp-variant="iconbar"] .fs[data-layout="tabs"] .fs-grid-tile.is-selected { border-color: var(--fs-gold, #C09B7B) !important; box-shadow: 0 0 0 1px var(--fs-gold, #C09B7B), 0 8px 24px rgba(192,155,123,.22) !important; background: var(--fs-bg-chip-active, #221c17) !important; } html[data-fsp-variant="iconbar"] .fs[data-layout="tabs"] .fs-grid-bottle { width: 52px !important; height: 52px !important; margin: 0 !important; flex-shrink: 0 !important; } html[data-fsp-variant="iconbar"] .fs[data-layout="tabs"] .fs-grid-tile .fs-grid-label { font-family: 'Playfair Display', Georgia, serif !important; font-size: 15px !important; font-weight: 600 !important; margin: 0 0 2px !important; text-align: left !important; } html[data-fsp-variant="iconbar"] .fs[data-layout="tabs"] .fs-grid-tile .fs-grid-price { font-family: 'Playfair Display', Georgia, serif !important; font-size: 16px !important; font-weight: 600 !important; color: var(--fs-gold, #C09B7B) !important; margin-left: auto !important; text-align: right !important; flex-shrink: 0 !important; white-space: nowrap !important; } /* v1.24.4 — keep the /ml pill INSIDE the tile (was overflowing) */ html[data-fsp-variant="iconbar"] .fs[data-layout="tabs"] .fs-grid-tile .fs-grid-perml { font-size: 11px !important; color: var(--fs-text-dim, rgba(228,217,205,.55)) !important; margin-left: 8px !important; align-self: center !important; white-space: nowrap !important; flex-shrink: 0 !important; max-width: 22% !important; } /* v1.24.5 — let labels wrap (max 2 lines) instead of clipping; widen tiles */ html[data-fsp-variant="iconbar"] .fs[data-layout="tabs"] .fs-grid-tile { overflow: hidden !important; } html[data-fsp-variant="iconbar"] .fs[data-layout="tabs"] .fs-grid-tile .fs-grid-label { white-space: normal !important; word-break: normal !important; overflow-wrap: break-word !important; overflow: hidden !important; display: -webkit-box !important; -webkit-line-clamp: 2 !important; -webkit-box-orient: vertical !important; line-height: 1.25 !important; min-width: 0 !important; flex: 1 1 auto !important; } /* Wider tiles: 2 columns on the typical PDP width, 3 only when really roomy */ html[data-fsp-variant="iconbar"] .fs[data-layout="tabs"] .fs-grid { grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)) !important; gap: 12px !important; } @media (min-width: 1100px) { html[data-fsp-variant="iconbar"] .fs[data-layout="tabs"] .fs-grid { grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)) !important; } } /* Slightly smaller bottle to free up label space */ html[data-fsp-variant="iconbar"] .fs[data-layout="tabs"] .fs-grid-bottle { width: 46px !important; height: 46px !important; } /* Smooth fade-in when switching tabs */ html[data-fsp-variant="iconbar"] .fs[data-layout="tabs"] .fs-tab-body { animation: fsp-iconbar-fade .35s ease both; } @keyframes fsp-iconbar-fade { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: translateY(0); } } /* Mobile: smaller icons, vertical-friendly tile */ @media (max-width: 720px) { html[data-fsp-variant="iconbar"] .fs[data-layout="tabs"] .fs-tabs-head { gap: 12px !important; } html[data-fsp-variant="iconbar"] .fs[data-layout="tabs"] .fs-tab-icon { width: 46px !important; height: 46px !important; } html[data-fsp-variant="iconbar"] .fs[data-layout="tabs"] .fs-tab-icon svg { width: 22px !important; height: 22px !important; } html[data-fsp-variant="iconbar"] .fs[data-layout="tabs"] .fs-tab-label { font-size: 10px !important; } html[data-fsp-variant="iconbar"] .fs[data-layout="tabs"] .fs-grid { grid-template-columns: 1fr !important; } } @media (prefers-reduced-motion: reduce) { html[data-fsp-variant="iconbar"] .fs[data-layout="tabs"] .fs-tab-body { animation: none !important; } html[data-fsp-variant="iconbar"] .fs[data-layout="tabs"] .fs-tab, html[data-fsp-variant="iconbar"] .fs[data-layout="tabs"] .fs-grid-tile { transition: none !important; transform: none !important; } }