/* ====================================================================== WRAPPER STRUCTURE ====================================================================== */ .home-block-wrapper { position: relative; isolation: isolate; z-index: 1; } /* Ensure scroll container doesn't block arrows */ .home-block-wrapper .cms-row.home-block-grid { position: relative; z-index: 1; } /* Ensure arrows are always above scroll container */ .home-block-wrapper { position: relative !important; isolation: isolate !important; z-index: 1; overflow: visible !important; } .home-block-nav-arrows { pointer-events: none !important; z-index: 9999 !important; position: absolute !important; inset: 0; } .home-block-nav-arrow { pointer-events: auto !important; z-index: 10000 !important; position: absolute !important; } /* Grid remains scrollable - overflow controlled by media queries */ .cms-row.home-block-grid { position: relative; } /* ====================================================================== BASE GRID LAYOUT (desktop only - ≥1551px) ====================================================================== */ .home-block-grid, .home-blocks-grid { display: grid; gap: 8px; align-items: stretch; } /* Ensure all carousel containers have relative positioning for arrow placement */ .home-block-grid, .home-blocks-grid, .cms-row.home-block-grid, #content-top-modules .cms-row.home-block-grid { position: relative; } @media (min-width: 1551px) { #content-top-modules .cms-row.home-block-grid { display: grid !important; gap: 8px; align-items: stretch; } } html.home-page .home-block-grid, html.home-page .home-blocks-grid { margin: 5px auto 10px auto; max-width: 1880px; padding: 0 16px; } html.home-page .cms-row.home-block-grid > .journal2_cms_blocks > .box.cms-blocks { padding-left: 6px !important; padding-right: 6px !important; } html.home-page .cms-row.home-block-grid { padding: 12px 10px !important; } html.home-page .home-block-grid .box.cms-blocks, html.home-page .home-block-grid .cms-block--journal-cms, html.home-page .home-blocks-grid .box.cms-blocks, html.home-page .home-blocks-grid .cms-block--journal-cms { float: none !important; display: block; width: auto !important; height: auto !important; margin: 0 !important; } /* ====================================================================== CARD BASE STYLE ====================================================================== */ .home-block-card { display: flex; flex-direction: column; justify-content: space-between; background: #ffffff; border-radius: 10px; box-shadow: 0 2px 6px rgba(0,0,0,0.12); padding: 20px; box-sizing: border-box; width: 100%; height: 450px; max-width: none; } /* Journal's module.css (.journal-cms-block { max-width: 430px; padding: 10px; … }) is normally bundled before this file, but the lazy loader re-appends it to after injecting a row, so by order it would win. Beat it by specificity instead; hero-only keeps its zero padding. */ .home-block-card.journal-cms-block { max-width: none !important; padding: 20px; border-radius: 10px; /* The card is a fixed height; a tall tile layout is cut here, never spilled over the row below. */ overflow: hidden; } .home-block-card.journal-cms-block.cms-block-hero-only { padding: 0 !important; } .home-block-card .block-title { font-size: 18px; font-weight: 700; margin-bottom: 12px; } .home-block-card .journal-cms-tiles-grid { flex: 1 1 auto; display: grid; grid-template-columns: repeat(2, 1fr); column-gap: 12px; row-gap: 12px; } .home-block-card:not(.cms-block-single-tile):not(.cms-block-single-product-tile) .journal-cms-tiles-grid { row-gap: 12px !important; } .home-block-card .tile-image { height: 145px; } .home-block-card:not(.cms-block-single-product-tile) .journal-cms-tile.product-tile.has-product-name.has-discount-badge .tile-image, .home-block-card:not(.cms-block-single-product-tile) .journal-cms-tile.product-tile.has-product-name.has-product-price .tile-image { height: 115px; } .home-block-card .tile-image img, .home-block-card img { width: 100%; height: 100%; object-fit: cover; display: block; } .home-block-card:not(.cms-block-single-tile):not(.cms-block-single-product-tile) .journal-cms-tile:not(.product-tile):has(.tile-label) .tile-image img { object-fit: inherit; } .home-block-card:not(.cms-block-single-tile):not(.cms-block-single-product-tile) .journal-cms-tile:not(.product-tile):not(:has(.tile-label)) .tile-image img { object-fit: cover; } .home-block-card:not(.cms-block-single-product-tile) .journal-cms-tile.product-tile .tile-image img { object-fit: cover; scale: 1.00; } .home-block-card .journal-cms-tile { border-radius: 8px; overflow: hidden; display: flex; flex-direction: column; height: 100%; padding: 0px 0px 0px; } .home-block-card .journal-cms-tile:not(.product-tile) { display: flex; flex-direction: column; height: 100%; } .home-block-card .journal-cms-tile:not(.product-tile) .tile-image { flex: 1 1 auto; min-height: 0; } .home-block-card .tile-label { font-size: 13px; font-weight: 600; color: #333; padding: 0 4px 4px; margin-top: auto; } .home-block-card .cms-block-more-link { margin-top: 12px; } .home-block-card .journal-cms-tile.product-tile .sale-badge { display: inline-block; direction: ltr; unicode-bidi: isolate; background: var(--brand-cms_discount_badge_background, #CC0C39); color: #fff; border-radius: 6px; padding: 4px 6px; font-size: 12px; line-height: 1; font-weight: 700; flex-shrink: 0; white-space: nowrap; } /* Single hero image block (applies to both category and product tiles) */ .home-block-card.cms-block-single-tile .journal-cms-tiles-grid { grid-template-columns: 1fr; height: 100%; } .home-block-card.cms-block-single-tile .journal-cms-tile, .home-block-card.cms-block-single-tile .tile-image { height: 100%; } .home-block-card.cms-block-single-tile .tile-image img { height: 100% !important; object-fit: contain !important; transform: none !important; transform-origin: center center; } .home-block-card.cms-block-single-tile .journal-cms-tile.product-tile .tile-image img { object-fit: contain !important; transform: none !important; } .home-block-card.cms-block-single-tile .tile-image { position: relative; overflow: visible; } .home-block-card.cms-block-single-tile .tile-image .sale-badge { position: absolute; bottom: 10px; left: 10px; z-index: 10; margin-top: 0; } /* Hero-only: single image, no title, no see-more — image fills entire card */ .home-block-card.cms-block-hero-only { padding: 0 !important; overflow: hidden; border-radius: 10px; } .home-block-card.cms-block-hero-only .journal-cms-tiles-grid { gap: 0 !important; height: 100%; width: 100%; } .home-block-card.cms-block-hero-only .journal-cms-tile { padding: 0 !important; border-radius: 0 !important; background: transparent !important; height: 100%; width: 100%; } .home-block-card.cms-block-hero-only .tile-image { height: 100% !important; width: 100% !important; overflow: hidden; } .home-block-card.cms-block-hero-only .tile-image img { width: 100% !important; height: 100% !important; object-fit: cover !important; display: block; } .home-block-card.cms-block-hero-only .tile-label { display: none; } .home-block-card.cms-block-single-product-tile .journal-cms-tile { display: flex; flex-direction: column; height: 100%; overflow: visible; } .home-block-card.cms-block-single-product-tile .tile-image { flex: 1 1 0; min-height: 0; position: relative; overflow: hidden; max-height: calc(100% - 80px); height: auto; } .home-block-card.cms-block-single-product-tile .tile-image img { width: 100%; height: 100%; object-fit: contain !important; transform: none !important; transform-origin: center center; } .home-block-card.cms-block-single-product-tile .journal-cms-tile.product-tile .tile-product-name, .home-block-card.cms-block-single-product-tile .journal-cms-tile.product-tile .tile-product-price { flex-shrink: 0; } /* ====================================================================== DESKTOP — GRID LAYOUT (≥1551px) ====================================================================== */ @media (min-width: 1551px) { .home-block-grid, .home-blocks-grid { display: grid !important; grid-template-columns: repeat(5, minmax(300px, 1fr)) !important; overflow-x: visible !important; } .home-block-nav-arrows { display: none; } .home-block-card { height: 500px; } .home-block-card .tile-image { height: 150px; } .home-block-card.cms-block-single-tile:not(.cms-block-hero-only) .tile-image img { object-fit: contain !important; transform: none !important; } /* Hero blocks with products */ .home-block-card.cms-block-single-tile:not(.cms-block-hero-only) .journal-cms-tile.product-tile .tile-image img { object-fit: contain !important; transform: none !important; } .home-block-card.cms-block-single-product-tile .tile-image img { object-fit: contain !important; transform: none !important; } .home-block-card:not(.cms-block-single-tile):not(.cms-block-single-product-tile) .journal-cms-tiles-grid { row-gap: 8px !important; } /* Reduce image size when name + badge or name + price are shown */ .home-block-card:not(.cms-block-single-product-tile) .journal-cms-tile.product-tile.has-product-name.has-discount-badge .tile-image, .home-block-card:not(.cms-block-single-product-tile) .journal-cms-tile.product-tile.has-product-name.has-product-price .tile-image { height: 145px; } /* Badge and prices side-by-side for min-width: 1551px */ .home-block-card .journal-cms-tile.product-tile .tile-product-price { flex-direction: row !important; align-items: center !important; flex-wrap: nowrap !important; } /* Ensure price wrapper keeps prices side-by-side */ .home-block-card .journal-cms-tile.product-tile .tile-product-price .price-wrapper { flex-direction: row !important; flex-wrap: nowrap !important; } /* Category tiles: labeled = inherit, image-only = cover */ .home-block-card:not(.cms-block-single-tile):not(.cms-block-single-product-tile) .journal-cms-tile:not(.product-tile):has(.tile-label) .tile-image img { object-fit: inherit; } .home-block-card:not(.cms-block-single-tile):not(.cms-block-single-product-tile) .journal-cms-tile:not(.product-tile):not(:has(.tile-label)) .tile-image img { object-fit: cover; } .home-block-card:not(.cms-block-single-product-tile) .journal-cms-tile.product-tile .tile-image img { object-fit: cover; scale: 1; } .home-block-card.cms-block-single-tile:not(.cms-block-single-product-tile):not(.cms-block-hero-only) { padding: 15px !important; } .home-block-card.cms-block-single-tile:not(.cms-block-single-product-tile):not(.cms-block-hero-only) .journal-cms-tiles-grid { gap: 0 !important; height: 100%; width: 100%; margin-top: -4px; } .home-block-card.cms-block-single-tile:not(.cms-block-single-product-tile):not(.cms-block-hero-only) .journal-cms-tile:not(.product-tile) { padding: 0 !important; border-radius: 8px !important; background: transparent !important; height: 100%; width: 100%; } .home-block-card.cms-block-single-tile:not(.cms-block-single-product-tile):not(.cms-block-hero-only) .tile-image { height: 100% !important; width: 100% !important; overflow: hidden; } .home-block-card.cms-block-single-tile:not(.cms-block-single-product-tile):not(.cms-block-hero-only) .journal-cms-tile:not(.product-tile):has(.tile-label) .tile-image img { width: 100% !important; height: 100% !important; object-fit: inherit !important; display: block; } .home-block-card.cms-block-single-tile:not(.cms-block-single-product-tile):not(.cms-block-hero-only) .journal-cms-tile:not(.product-tile):not(:has(.tile-label)) .tile-image img { width: 100% !important; height: 100% !important; object-fit: cover !important; display: block; } } /* ====================================================================== TABLET TO DESKTOP — HORIZONTAL CAROUSEL (768px to 1550px) ====================================================================== */ @media (min-width: 768px) and (max-width: 1550px) { /* Override base grid layout with flex carousel */ .home-block-grid, .home-blocks-grid { display: flex !important; overflow-x: auto !important; -webkit-overflow-scrolling: touch; scroll-snap-type: x mandatory; scroll-behavior: smooth; gap: 8px !important; flex-wrap: nowrap !important; padding: 0 12px 8px 10px !important; max-width: 100%; } /* Navigation arrows for carousel */ .home-block-grid, .home-blocks-grid, #content-top-modules .cms-row.home-block-grid { position: relative; /* Allow horizontal scrolling but keep arrows visible */ overflow-x: auto !important; overflow-y: visible !important; z-index: 1; } /* Ensure parent containers don't clip arrows - but allow horizontal scrolling */ #content-top-modules { overflow-y: visible !important; } /* Scrollable containers need horizontal scroll but visible vertical overflow for arrows */ #content-top-modules .cms-row.home-block-grid { overflow-x: auto !important; overflow-y: visible !important; } .home-block-wrapper { isolation: isolate !important; position: relative !important; overflow: visible !important; } .home-block-nav-arrows { position: absolute !important; inset: 0; pointer-events: none !important; z-index: 9999 !important; isolation: isolate; } .home-block-nav-arrow { position: absolute !important; top: 50%; transform: translateY(-50%); pointer-events: auto !important; width: 40px; height: 40px; border-radius: 50%; background: rgba(255, 255, 255, 0.95); border: 1px solid rgba(0, 0, 0, 0.1); display: flex; align-items: center; justify-content: center; cursor: pointer !important; transition: opacity 0.3s ease, background 0.2s ease, transform 0.2s ease; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15); z-index: 10000 !important; padding: 0; margin: 0; } .home-block-nav-arrow:hover:not(.disabled) { background: rgba(255, 255, 255, 1); box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2); } .home-block-nav-arrow:active:not(.disabled) { transform: translateY(-50%) scale(0.95); } .home-block-nav-arrow.disabled { opacity: 0.5; cursor: not-allowed; pointer-events: auto; } .home-block-nav-arrow.disabled:hover { background: rgba(255, 255, 255, 0.9); box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15); } .home-block-nav-arrow.prev { left: -20px; } .home-block-nav-arrow.next { right: -20px; } .home-block-nav-arrow svg { width: 20px; height: 20px; color: #333; } .home-block-nav-arrow.disabled svg { color: #999; } /* RTL Support for arrows - swap positions */ html[dir="rtl"] .home-block-wrapper { isolation: isolate !important; position: relative !important; overflow: visible !important; } html[dir="rtl"] .home-block-nav-arrows { position: absolute !important; pointer-events: none !important; z-index: 9999 !important; isolation: isolate; } html[dir="rtl"] .home-block-nav-arrow { position: absolute !important; pointer-events: auto !important; z-index: 10000 !important; } html[dir="rtl"] .home-block-nav-arrow.prev { right: -20px; left: auto; } html[dir="rtl"] .home-block-nav-arrow.next { left: -20px; right: auto; } /* Reverse arrow icon directions in RTL */ html[dir="rtl"] .home-block-nav-arrow.prev svg { transform: scaleX(-1); } html[dir="rtl"] .home-block-nav-arrow.next svg { transform: scaleX(-1); } html[dir="rtl"] .home-block-nav-arrow.prev:active:not(.disabled) { transform: translateY(-50%) scale(0.95); } html[dir="rtl"] .home-block-nav-arrow.prev:active:not(.disabled) svg { transform: scaleX(-1); } html[dir="rtl"] .home-block-nav-arrow.next:active:not(.disabled) { transform: translateY(-50%) scale(0.95); } html[dir="rtl"] .home-block-nav-arrow.next:active:not(.disabled) svg { transform: scaleX(-1); } #content-top-modules .cms-row.home-block-grid { display: flex !important; overflow-x: auto !important; -webkit-overflow-scrolling: touch; scroll-snap-type: x mandatory; scroll-behavior: smooth; gap: 8px !important; flex-wrap: nowrap !important; padding: 12px 10px !important; } /* Carousel container - relative positioning for arrows */ .home-block-grid, .home-blocks-grid, #content-top-modules .cms-row.home-block-grid { position: relative; } /* Ensure scroll container doesn't block arrow clicks */ .home-block-wrapper .home-block-grid, .home-block-wrapper .home-blocks-grid, .home-block-wrapper .cms-row.home-block-grid { pointer-events: auto; } /* Arrows must be above everything */ .home-block-wrapper .home-block-nav-arrows { pointer-events: none !important; } .home-block-wrapper .home-block-nav-arrow { pointer-events: auto !important; } /* Show scrollbars - styled for all browsers */ .home-block-grid, .home-blocks-grid, #content-top-modules .cms-row.home-block-grid { scrollbar-width: thin; /* Firefox */ scrollbar-color: #cbd5e0 #f7fafc; /* Firefox: thumb and track */ } /* WebKit scrollbar styling (Chrome, Safari, Edge) */ .home-block-grid::-webkit-scrollbar, .home-blocks-grid::-webkit-scrollbar, #content-top-modules .cms-row.home-block-grid::-webkit-scrollbar { height: 8px; } .home-block-grid::-webkit-scrollbar-track, .home-blocks-grid::-webkit-scrollbar-track, #content-top-modules .cms-row.home-block-grid::-webkit-scrollbar-track { background: #f7fafc; border-radius: 4px; } .home-block-grid::-webkit-scrollbar-thumb, .home-blocks-grid::-webkit-scrollbar-thumb, #content-top-modules .cms-row.home-block-grid::-webkit-scrollbar-thumb { background: #cbd5e0; border-radius: 4px; } .home-block-grid::-webkit-scrollbar-thumb:hover, .home-blocks-grid::-webkit-scrollbar-thumb:hover, #content-top-modules .cms-row.home-block-grid::-webkit-scrollbar-thumb:hover { background: #a0aec0; } /* Fixed width cards for scrolling */ .home-block-grid > .home-block-card, .home-blocks-grid > .home-block-card, #content-top-modules .cms-row.home-block-grid > .journal2_cms_blocks > .box.cms-blocks, #content-top-modules .cms-row.home-block-grid > .home-block-card { flex: 0 0 300px !important; min-width: 300px !important; flex-shrink: 0 !important; scroll-snap-align: start; scroll-snap-stop: always; } /* RTL: native, exactly like the phone strip below and the lazy loader's enforceRTL(). The old direction:ltr + row-reverse trick laid the cards out from the right but put the overflow on the negative side of an LTR scroll box, which cannot be scrolled to — the last card(s) of an Arabic row were unreachable. A native RTL container scrolls into negative scrollLeft; home-blocks-scroll.js (v6) inverts its arrow delta for it. iOS keeps its own scaleX(-1) mirror (content_top.tpl, ios-rtl-fix). */ html[dir="rtl"] .home-block-grid, html[dir="rtl"] .home-blocks-grid, html[dir="rtl"] #content-top-modules .cms-row.home-block-grid, html[dir="rtl"] .cms-row.home-block-grid { direction: rtl !important; flex-direction: row !important; -webkit-transform: translateZ(0); transform: translateZ(0); -webkit-backface-visibility: hidden; backface-visibility: hidden; will-change: scroll-position; } /* RTL cards still use start for snap alignment */ html[dir="rtl"] .home-block-grid > .home-block-card, html[dir="rtl"] .home-blocks-grid > .home-block-card, html[dir="rtl"] #content-top-modules .cms-row.home-block-grid > .journal2_cms_blocks > .box.cms-blocks { scroll-snap-align: start; } html[dir="rtl"] .home-block-card { direction: rtl !important; text-align: right !important; } html[dir="rtl"] .home-block-card .block-title { direction: rtl !important; text-align: right !important; } html[dir="rtl"] .home-block-card .tile-label { direction: rtl !important; text-align: right !important; } html[dir="rtl"] .home-block-card .cms-block-more-link { direction: rtl !important; text-align: right !important; } /* Make image fill the journal-cms-tiles-grid container for hero non-product blocks, but keep the same card padding / inner white container as hero product blocks */ .home-block-card.cms-block-single-tile:not(.cms-block-single-product-tile):not(.cms-block-hero-only) { padding: 10px !important; } .home-block-card.cms-block-single-tile:not(.cms-block-single-product-tile):not(.cms-block-hero-only) .journal-cms-tiles-grid { gap: 0 !important; height: 100%; width: 100%; } .home-block-card.cms-block-single-tile:not(.cms-block-single-product-tile):not(.cms-block-hero-only) .journal-cms-tile:not(.product-tile) { /* no inner padding/background so we don't see white strips around the image */ padding: 0 !important; border-radius: 8px !important; background: transparent !important; height: 100%; width: 100%; } .home-block-card.cms-block-single-tile:not(.cms-block-single-product-tile):not(.cms-block-hero-only) .tile-image { height: 100% !important; width: 100% !important; overflow: hidden; } .home-block-card.cms-block-single-tile:not(.cms-block-single-product-tile):not(.cms-block-hero-only) .journal-cms-tile:not(.product-tile):has(.tile-label) .tile-image img { width: 100% !important; height: 100% !important; object-fit: inherit !important; display: block; } .home-block-card.cms-block-single-tile:not(.cms-block-single-product-tile):not(.cms-block-hero-only) .journal-cms-tile:not(.product-tile):not(:has(.tile-label)) .tile-image img { width: 100% !important; height: 100% !important; object-fit: cover !important; display: block; } } /* ====================================================================== MOBILE — HORIZONTAL CAROUSEL (<768px) ====================================================================== */ @media (max-width: 768px) { .home-block-grid, .home-blocks-grid { display: flex !important; overflow-x: auto; -webkit-overflow-scrolling: touch; scroll-snap-type: x mandatory; scroll-behavior: smooth; gap: 8px; padding: 0 12px 8px 10px; max-width: 100%; } /* Show scrollbars - styled for all browsers */ .home-block-grid, .home-blocks-grid { scrollbar-width: thin; /* Firefox */ scrollbar-color: #cbd5e0 #f7fafc; /* Firefox: thumb and track */ } /* WebKit scrollbar styling (Chrome, Safari, Edge) */ .home-block-grid::-webkit-scrollbar, .home-blocks-grid::-webkit-scrollbar { height: 8px; } .home-block-grid::-webkit-scrollbar-track, .home-blocks-grid::-webkit-scrollbar-track { background: #f7fafc; border-radius: 4px; } .home-block-grid::-webkit-scrollbar-thumb, .home-blocks-grid::-webkit-scrollbar-thumb { background: #cbd5e0; border-radius: 4px; } .home-block-grid::-webkit-scrollbar-thumb:hover, .home-blocks-grid::-webkit-scrollbar-thumb:hover { background: #a0aec0; } .home-block-grid > .home-block-card, .home-blocks-grid > .home-block-card { flex: 0 0 300px !important; min-width: 300px !important; scroll-snap-align: start; scroll-snap-stop: always; } .home-block-card { height: 475px !important; } /* Reduce padding ONLY for non-hero blocks - more space for images */ .home-block-card:not(.cms-block-single-tile):not(.cms-block-single-product-tile) { padding: 12px !important; } html[dir="rtl"] .home-block-grid, html[dir="rtl"] .home-blocks-grid { direction: rtl !important; flex-direction: row !important; -webkit-transform: translateZ(0); transform: translateZ(0); -webkit-backface-visibility: hidden; backface-visibility: hidden; will-change: scroll-position; } /* Explicitly cover the row wrapper variant to block late overrides */ html[dir="rtl"] .cms-row.home-block-grid { direction: rtl !important; flex-direction: row !important; -webkit-transform: translateZ(0); transform: translateZ(0); -webkit-backface-visibility: hidden; backface-visibility: hidden; will-change: scroll-position; } html[dir="rtl"] .home-block-grid > .home-block-card, html[dir="rtl"] .home-blocks-grid > .home-block-card { scroll-snap-align: end; } html[dir="rtl"] .home-block-card { direction: rtl !important; text-align: right !important; } html[dir="rtl"] .home-block-card .block-title { direction: rtl !important; text-align: right !important; } html[dir="rtl"] .home-block-card .tile-label { direction: rtl !important; text-align: right !important; } html[dir="rtl"] .home-block-card .cms-block-more-link { direction: rtl !important; text-align: right !important; } .home-block-card:not(.cms-block-single-tile):not(.cms-block-single-product-tile) .journal-cms-tiles-grid { column-gap: 8px !important; row-gap: 4px !important; } .home-block-card:not(.cms-block-single-tile):not(.cms-block-single-product-tile) .tile-image { height:135px !important; } .home-block-card:not(.cms-block-single-tile):not(.cms-block-single-product-tile) .journal-cms-tile:not(.product-tile):has(.tile-label) .tile-image img { object-fit: inherit !important; } .home-block-card:not(.cms-block-single-tile):not(.cms-block-single-product-tile) .journal-cms-tile:not(.product-tile):not(:has(.tile-label)) .tile-image img { object-fit: cover !important; } .home-block-card:not(.cms-block-single-product-tile) .journal-cms-tile.product-tile .tile-image img { object-fit: cover !important; } .home-block-card:not(.cms-block-single-product-tile) .journal-cms-tile.product-tile.has-product-name.has-discount-badge .tile-image, .home-block-card:not(.cms-block-single-product-tile) .journal-cms-tile.product-tile.has-product-name.has-product-price .tile-image { height: 105px !important; } .home-block-card:not(.cms-block-single-tile):not(.cms-block-single-product-tile) .journal-cms-tile { padding: 0px 0px 0px !important; } .home-block-card .journal-cms-tile.product-tile .tile-product-price { flex-direction: row !important; align-items: center !important; gap: 2px !important; flex-wrap: nowrap !important; } .home-block-card .journal-cms-tile.product-tile .tile-product-price .price-wrapper { flex-direction: row !important; flex-wrap: nowrap !important; min-width: 0 !important; gap: 8px !important; } /* Allow prices to shrink slightly to fit JOD */ .home-block-card .journal-cms-tile.product-tile .tile-product-price .price-wrapper .price-special, .home-block-card .journal-cms-tile.product-tile .tile-product-price .price-wrapper .price-old, .home-block-card .journal-cms-tile.product-tile .tile-product-price .price-wrapper .price-regular { flex-shrink: 1 !important; min-width: 0 !important; overflow: visible !important; } /* RTL Support for Mobile - Product Name, Price, and Badge */ html[dir="rtl"] .home-block-card .journal-cms-tile.product-tile .tile-product-name { direction: rtl !important; text-align: right !important; } html[dir="rtl"] .home-block-card .journal-cms-tile.product-tile .tile-product-price { flex-direction: row-reverse !important; direction: ltr !important; text-align: right !important; } html[dir="rtl"] .home-block-card .journal-cms-tile.product-tile .tile-product-price .sale-badge { text-align: right !important; margin-left: 0 !important; } html[dir="rtl"] .home-block-card .journal-cms-tile.product-tile .tile-product-price .price-wrapper { flex-direction: row-reverse !important; } html[dir="rtl"] .home-block-card .journal-cms-tile.product-tile .tile-product-price .price-special, html[dir="rtl"] .home-block-card .journal-cms-tile.product-tile .tile-product-price .price-regular, html[dir="rtl"] .home-block-card .journal-cms-tile.product-tile .tile-product-price .price-old { text-align: right !important; direction: ltr !important; } .home-block-nav-arrows { display: none; } /* Make image fill the journal-cms-tiles-grid container for hero non-product blocks, but keep the same card padding / inner white container as hero product blocks */ .home-block-card.cms-block-single-tile:not(.cms-block-single-product-tile):not(.cms-block-hero-only) { padding: 10px !important; } .home-block-card.cms-block-single-tile:not(.cms-block-single-product-tile):not(.cms-block-hero-only) .journal-cms-tiles-grid { gap: 0 !important; height: 100%; width: 100%; } .home-block-card.cms-block-single-tile:not(.cms-block-single-product-tile):not(.cms-block-hero-only) .journal-cms-tile:not(.product-tile) { /* no inner padding/background so we don't see white strips around the image */ padding: 0 !important; border-radius: 8px !important; background: transparent !important; height: 100%; width: 100%; } .home-block-card.cms-block-single-tile:not(.cms-block-single-product-tile):not(.cms-block-hero-only) .tile-image { height: 100% !important; width: 100% !important; overflow: hidden; } .home-block-card.cms-block-single-tile:not(.cms-block-single-product-tile):not(.cms-block-hero-only) .journal-cms-tile:not(.product-tile):has(.tile-label) .tile-image img { width: 100% !important; height: 100% !important; object-fit: inherit !important; display: block; } .home-block-card.cms-block-single-tile:not(.cms-block-single-product-tile):not(.cms-block-hero-only) .journal-cms-tile:not(.product-tile):not(:has(.tile-label)) .tile-image img { width: 100% !important; height: 100% !important; object-fit: cover !important; display: block; } } /* ====================================================================== PRODUCT TILE - NAME AND PRICE STYLING ====================================================================== */ /* Product name styling */ .home-block-card .journal-cms-tile.product-tile .tile-product-name { font-size: 13px; font-weight: 600; color: #333; margin-top: 1px; line-height: 1.4; padding: 0 6px; display: -webkit-box; -webkit-line-clamp: 1; line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden; text-overflow: ellipsis; min-height: 20px; } /* RTL Support - Product Name */ html[dir="rtl"] .home-block-card .journal-cms-tile.product-tile .tile-product-name { direction: rtl; text-align: right; } /* Product price styling */ .home-block-card .journal-cms-tile.product-tile .tile-product-price { margin-top: 1px; padding: 0 6px; display: flex; flex-direction: row; align-items: center; gap: 8px; flex-wrap: nowrap; } /* RTL Support - Product Price Container */ html[dir="rtl"] .home-block-card .journal-cms-tile.product-tile .tile-product-price { flex-direction: row-reverse !important; direction: ltr !important; text-align: right !important; } /* Badge appears beside prices */ .home-block-card .journal-cms-tile.product-tile .tile-product-price .sale-badge { margin-bottom: 0; line-height: 1; flex-shrink: 0; } /* RTL Support - Sale Badge */ html[dir="rtl"] .home-block-card .journal-cms-tile.product-tile .tile-product-price .sale-badge { text-align: right !important; margin-left: 0 !important; } /* Price wrapper keeps prices side-by-side */ .home-block-card .journal-cms-tile.product-tile .tile-product-price .price-wrapper { display: flex !important; flex-direction: row !important; align-items: center !important; gap: 8px !important; flex-wrap: nowrap !important; min-width: 0 !important; overflow: visible !important; } /* RTL Support - Price Wrapper */ html[dir="rtl"] .home-block-card .journal-cms-tile.product-tile .tile-product-price .price-wrapper { flex-direction: row-reverse !important; } /* Prices inside wrapper - ensure they stay side-by-side*/ .home-block-card .journal-cms-tile.product-tile .tile-product-price .price-wrapper > .price-special, .home-block-card .journal-cms-tile.product-tile .tile-product-price .price-wrapper > .price-old, .home-block-card .journal-cms-tile.product-tile .tile-product-price .price-wrapper > .price-regular { display: block !important; white-space: nowrap !important; min-width: 0 !important; overflow: visible !important; } .home-block-card .journal-cms-tile.product-tile .tile-product-price .price-special { font-size: 16px; font-weight: 700; color: var(--brand-cms_discount_badge_background, #CC0C39); flex-shrink: 0; white-space: nowrap; } /* RTL Support - Price Elements */ html[dir="rtl"] .home-block-card .journal-cms-tile.product-tile .tile-product-price .price-special, html[dir="rtl"] .home-block-card .journal-cms-tile.product-tile .tile-product-price .price-regular, html[dir="rtl"] .home-block-card .journal-cms-tile.product-tile .tile-product-price .price-old { text-align: right !important; direction: ltr !important; } /* Currency symbol */ .home-block-card .journal-cms-tile.product-tile .tile-product-price .currency-symbol { font-size: 9px !important; font-weight: 400 !important; opacity: 0.7; vertical-align: baseline; line-height: 1; margin-left: 0 !important; padding-left: 0 !important; } /* RTL Support - Currency Symbol */ html[dir="rtl"] .home-block-card .journal-cms-tile.product-tile .tile-product-price .currency-symbol { margin-right: 0 !important; padding-right: 0 !important; } /* Price number - isolate for BiDi stability */ .home-block-card .journal-cms-tile.product-tile .tile-product-price .price-number { direction: ltr; unicode-bidi: isolate; display: inline-block; margin-bottom: 1px; } html[dir="rtl"] .home-block-card .journal-cms-tile.product-tile .tile-product-price .currency-symbol { direction: rtl; unicode-bidi: isolate; display: inline-block; margin-bottom: 1px; } .home-block-card .journal-cms-tile.product-tile .tile-product-price .price-wrapper .price-special, .home-block-card .journal-cms-tile.product-tile .tile-product-price .price-wrapper .price-old { flex-shrink: 1; } .home-block-card .journal-cms-tile.product-tile .tile-product-price .price-old { font-size: 13px; color: #999; text-decoration: line-through !important; font-weight: 400; flex-shrink: 0; white-space: nowrap; } .home-block-card .journal-cms-tile.product-tile .tile-product-price .price-old *, .home-block-card .journal-cms-tile.product-tile .tile-product-price .price-old span { text-decoration: inherit !important; } .home-block-card .journal-cms-tile.product-tile .tile-product-price .price-regular { font-size: 16px; font-weight: 600; color: #333; } /* Single tile adjustments */ .home-block-card.cms-block-single-tile .journal-cms-tile.product-tile .tile-product-name { font-size: 16px; -webkit-line-clamp: 2; line-clamp: 1; min-height: 24px; } .home-block-card.cms-block-single-tile .journal-cms-tile.product-tile .tile-product-price .price-special { font-size: 18px; } .home-block-card.cms-block-single-tile .journal-cms-tile.product-tile .tile-product-price .price-regular { font-size: 18px; } @media (max-width: 500px) { .home-block-card { height: 470px !important; } /* Reduce padding ONLY for non-hero blocks on very small screens */ .home-block-card:not(.cms-block-single-tile):not(.cms-block-single-product-tile) { padding: 10px !important; } /* Make images larger ONLY for non-hero blocks */ .home-block-card:not(.cms-block-single-tile):not(.cms-block-single-product-tile) .tile-image { height: 145px !important; } /* Category tiles: labeled = inherit, image-only = cover */ .home-block-card:not(.cms-block-single-tile):not(.cms-block-single-product-tile) .journal-cms-tile:not(.product-tile):has(.tile-label) .tile-image img { object-fit: inherit !important; } .home-block-card:not(.cms-block-single-tile):not(.cms-block-single-product-tile) .journal-cms-tile:not(.product-tile):not(:has(.tile-label)) .tile-image img { object-fit: cover !important; } /* Ensure product tiles also resize without cropping on very small screens */ .home-block-card:not(.cms-block-single-product-tile) .journal-cms-tile.product-tile .tile-image img { object-fit: cover !important; } /* Reduce gap even more on very small screens - ONLY for non-hero blocks */ .home-block-card:not(.cms-block-single-tile):not(.cms-block-single-product-tile) .journal-cms-tiles-grid { column-gap: 12px !important; row-gap: 12px !important; } /* Price layout - badge and prices side-by-side on very small screens */ .home-block-card .journal-cms-tile.product-tile .tile-product-price { flex-direction: row !important; align-items: center !important; gap: 3px !important; flex-wrap: nowrap !important; } /* Ensure price wrapper keeps prices side-by-side on very small screens */ .home-block-card .journal-cms-tile.product-tile .tile-product-price .price-wrapper { flex-direction: row !important; flex-wrap: nowrap !important; } /* Price typography */ .home-block-card .journal-cms-tile.product-tile .tile-product-price .price-special { font-size: 14px; } .home-block-card .journal-cms-tile.product-tile .tile-product-price .price-old { font-size: 11px; } /* Ensure prices in wrapper stay side-by-side on mobile */ .home-block-card .journal-cms-tile.product-tile .tile-product-price .price-wrapper { display: flex !important; flex-direction: row !important; flex-wrap: nowrap !important; gap: 8px !important; flex: 1 1 auto !important; min-width: 0 !important; overflow: visible !important; } /* Ensure each price stays on one line but can shrink to fit JOD */ .home-block-card .journal-cms-tile.product-tile .tile-product-price .price-wrapper .price-special, .home-block-card .journal-cms-tile.product-tile .tile-product-price .price-wrapper .price-old, .home-block-card .journal-cms-tile.product-tile .tile-product-price .price-wrapper .price-regular { white-space: nowrap !important; min-width: 0 !important; overflow: visible !important; } /* Reduce image size when name + badge or name + price are shown */ .home-block-card:not(.cms-block-single-product-tile) .journal-cms-tile.product-tile.has-product-name.has-discount-badge .tile-image, .home-block-card:not(.cms-block-single-product-tile) .journal-cms-tile.product-tile.has-product-name.has-product-price .tile-image { height: 140px !important; } /* RTL Support for Very Small Mobile Screens */ html[dir="rtl"] .home-block-card .journal-cms-tile.product-tile .tile-product-name { direction: rtl !important; text-align: right !important; } html[dir="rtl"] .home-block-card .journal-cms-tile.product-tile .tile-product-price { flex-direction: row-reverse !important; direction: ltr !important; text-align: right !important; } html[dir="rtl"] .home-block-card .journal-cms-tile.product-tile .tile-product-price .sale-badge { text-align: right !important; margin-left: 0 !important; } html[dir="rtl"] .home-block-card .journal-cms-tile.product-tile .tile-product-price .price-wrapper { flex-direction: row-reverse !important; } html[dir="rtl"] .home-block-card .journal-cms-tile.product-tile .tile-product-price .price-special, html[dir="rtl"] .home-block-card .journal-cms-tile.product-tile .tile-product-price .price-regular, html[dir="rtl"] .home-block-card .journal-cms-tile.product-tile .tile-product-price .price-old { text-align: right !important; direction: ltr !important; } /* Make image fill the journal-cms-tiles-grid container for hero non-product blocks, but keep the same card padding / inner white container as hero product blocks */ .home-block-card.cms-block-single-tile:not(.cms-block-single-product-tile):not(.cms-block-hero-only) { padding: 10px !important; } .home-block-card.cms-block-single-tile:not(.cms-block-single-product-tile):not(.cms-block-hero-only) .journal-cms-tiles-grid { gap: 0 !important; height: 100%; width: 100%; } .home-block-card.cms-block-single-tile:not(.cms-block-single-product-tile):not(.cms-block-hero-only) .journal-cms-tile:not(.product-tile) { /* no inner padding/background so we don't see white strips around the image */ padding: 0 !important; border-radius: 8px !important; background: transparent !important; height: 100%; width: 100%; } .home-block-card.cms-block-single-tile:not(.cms-block-single-product-tile):not(.cms-block-hero-only) .tile-image { height: 100% !important; width: 100% !important; overflow: hidden; } .home-block-card.cms-block-single-tile:not(.cms-block-single-product-tile):not(.cms-block-hero-only) .journal-cms-tile:not(.product-tile):has(.tile-label) .tile-image img { width: 100% !important; height: 100% !important; object-fit: inherit !important; display: block; } .home-block-card.cms-block-single-tile:not(.cms-block-single-product-tile):not(.cms-block-hero-only) .journal-cms-tile:not(.product-tile):not(:has(.tile-label)) .tile-image img { width: 100% !important; height: 100% !important; object-fit: cover !important; display: block; } } /* ====================================================================== TEXT ON IMAGE (Amazon-style overlay) Markup: .tile-image.tile-image--has-overlay > img + .tile-overlay > .tile-overlay__box Variants come from the admin as class suffixes (whitelisted server-side): layout .tile-overlay--top-start | --center | --bottom-start | --badge theme .tile-overlay--light | --dark shade .tile-overlay--scrim Alignment uses flex-start / text-align:start so RTL mirrors for free. ====================================================================== */ .home-block-card .tile-image--has-overlay { position: relative; overflow: hidden; border-radius: 8px; } .home-block-card .tile-image--has-overlay img, .home-block-card.cms-block-single-tile .tile-image--has-overlay img { width: 100% !important; height: 100% !important; object-fit: cover !important; display: block; } .home-block-card.cms-block-hero-only .tile-image--has-overlay { border-radius: 0; } .tile-overlay { position: absolute; inset: 0; z-index: 2; display: flex; flex-direction: column; justify-content: flex-start; align-items: flex-start; padding: 20px; box-sizing: border-box; pointer-events: none; text-align: start; /* single-tile cards keep .tile-image overflow visible, so clip the shade by radius, not overflow */ border-radius: inherit; overflow: hidden; } .tile-overlay__box { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; max-width: 88%; } .tile-overlay__subtitle, .tile-overlay__title { display: -webkit-box; -webkit-box-orient: vertical; overflow: hidden; word-break: break-word; } .tile-overlay__subtitle { font-size: 16px; font-weight: 700; line-height: 1.3; -webkit-line-clamp: 2; } .tile-overlay__title { font-size: clamp(22px, 1.9vw, 30px); font-weight: 700; line-height: 1.15; -webkit-line-clamp: 3; } .tile-overlay__cta { display: inline-block; margin-top: 10px; padding: 9px 18px; border-radius: 999px; font-size: 14px; font-weight: 700; line-height: 1; white-space: nowrap; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25); } /* layouts */ .tile-overlay--center { justify-content: center; align-items: center; text-align: center; } .tile-overlay--center .tile-overlay__box { align-items: center; } .tile-overlay--bottom-start { justify-content: flex-end; } .tile-overlay--badge .tile-overlay__box { padding: 10px 14px; border-radius: 10px; max-width: 75%; } /* themes */ .tile-overlay--light { color: #ffffff; text-shadow: 0 1px 2px rgba(0, 0, 0, 0.35); } .tile-overlay--light .tile-overlay__cta { background: #ffffff; color: #0F1111; text-shadow: none; } .tile-overlay--dark { color: #0F1111; } .tile-overlay--dark .tile-overlay__cta { background: #0F1111; color: #ffffff; } .tile-overlay--badge.tile-overlay--light .tile-overlay__box { background: rgba(15, 17, 17, 0.78); } .tile-overlay--badge.tile-overlay--dark .tile-overlay__box { background: rgba(255, 255, 255, 0.9); } /* shade behind the text: a gradient anchored to the edge the text sits on */ .tile-overlay--scrim:not(.tile-overlay--badge)::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; } .tile-overlay--scrim.tile-overlay--light::before { background: linear-gradient(180deg, rgba(0, 0, 0, 0.55) 0%, rgba(0, 0, 0, 0) 65%); } .tile-overlay--scrim.tile-overlay--light.tile-overlay--bottom-start::before { background: linear-gradient(0deg, rgba(0, 0, 0, 0.6) 0%, rgba(0, 0, 0, 0) 65%); } .tile-overlay--scrim.tile-overlay--light.tile-overlay--center::before { background: rgba(0, 0, 0, 0.35); } .tile-overlay--scrim.tile-overlay--dark::before { background: linear-gradient(180deg, rgba(255, 255, 255, 0.75) 0%, rgba(255, 255, 255, 0) 65%); } .tile-overlay--scrim.tile-overlay--dark.tile-overlay--bottom-start::before { background: linear-gradient(0deg, rgba(255, 255, 255, 0.8) 0%, rgba(255, 255, 255, 0) 65%); } .tile-overlay--scrim.tile-overlay--dark.tile-overlay--center::before { background: rgba(255, 255, 255, 0.45); } /* ── Card header (category cards): Amazon-style subtitle + title above the tile grid ── Normal flow, not an overlay: nothing sits behind it, so no shade and no corner presets. */ .home-block-card .cms-block-header { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; margin-bottom: 12px; text-align: start; flex: 0 0 auto; } .home-block-card .cms-block-header--center { align-items: center; text-align: center; } .home-block-card .cms-block-header__subtitle { font-size: 15px; font-weight: 700; line-height: 1.3; } .home-block-card .cms-block-header__title { margin: 0; font-size: clamp(20px, 1.5vw, 26px); font-weight: 700; line-height: 1.15; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; word-break: break-word; } .home-block-card .cms-block-header__cta { display: inline-block; margin-top: 8px; padding: 7px 16px; border-radius: 999px; font-size: 13px; font-weight: 700; line-height: 1; white-space: nowrap; } .home-block-card .cms-block-header--dark { color: #0F1111; } .home-block-card .cms-block-header--dark .cms-block-header__cta { background: #0F1111; color: #ffffff; } .home-block-card .cms-block-header--light { color: #ffffff; } .home-block-card .cms-block-header--light .cms-block-header__cta { background: #ffffff; color: #0F1111; } @media (max-width: 768px) { .tile-overlay { padding: 16px; } .tile-overlay__subtitle { font-size: 14px; } .tile-overlay__title { font-size: 22px; } .tile-overlay__cta { font-size: 13px; padding: 8px 14px; } } @media (max-width: 500px) { .tile-overlay { padding: 14px; } .tile-overlay__title { font-size: 20px; } } @media (max-width: 768px) { .home-block-card .cms-block-header__subtitle { font-size: 13px; } .home-block-card .cms-block-header__title { font-size: 19px; } .home-block-card .cms-block-header__cta { font-size: 12px; padding: 6px 13px; } } /* ====================================================================== HERO VIDEO