/* * Styles for the personalized homepage blocks (kh-homepage-blocks.js) and their * "See more" pages. Loaded in by common/home.php and product/homepage_block.php * so the placeholder the templates render is styled at FIRST PAINT; the script used * to inject these styles itself, which meant the row could only be reserved after * the whole document had parsed — and the CMS blocks were painted first, then pushed * down. Bump the ?v= in both controllers when this file changes. */ .kh-hb-row { display:grid; grid-template-columns:repeat(var(--kh-cols,4),1fr); gap:14px; margin:14px 0} .kh-hb-block { background:#fff; border:1px solid #e3e3e3; border-radius:10px; padding:12px; min-width:0} .kh-hb-head { display:flex; align-items:flex-start; justify-content:space-between; gap:8px; font-weight:700; font-size:15px; margin:0 0 10px; line-height:1.3; min-height:2.6em} .kh-hb-head>span { flex:1 1 auto; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap} .kh-hb-block[data-block-type="because_you_viewed"] .kh-hb-head>span { white-space:normal; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical} .kh-hb-more { flex:0 0 auto; display:inline-flex; align-items:center; justify-content:center; width:28px; height:28px; border-radius:50%; border:1px solid #d5d9d9; background:#fff; color:#0f1111; text-decoration:none; box-shadow:0 1px 2px rgba(15,17,17,.12)} .kh-hb-more:hover { background:#f7fafa; border-color:#8f9a9a} .kh-hb-more svg { width:14px; height:14px; display:block} [dir="rtl"] .kh-hb-more svg { transform:scaleX(-1)} .kh-hb-grid { display:grid; grid-template-columns:1fr 1fr; gap:10px} .kh-hb-grid[data-count="2"] .kh-hb-tile,.kh-hb-grid[data-count="3"] .kh-hb-tile:first-child { grid-column:span 2} /* A wide panel spans two columns AND the gap between them, so a plain 2:1 ratio is half a gap taller than a square panel and a stacked pair pushed the row down by a gap. Sized from the tile's own width instead (percent padding is relative to the containing block's width): 6px top + (50% - 4px) bottom equals a square panel's height exactly, whatever the column width. */ .kh-hb-grid[data-count="2"] .kh-hb-img,.kh-hb-grid[data-count="3"] .kh-hb-tile:first-child .kh-hb-img { aspect-ratio:auto; height:0; padding:6px 6px calc(50% - 4px)} .kh-hb-grid[data-count="2"] .kh-hb-img img,.kh-hb-grid[data-count="3"] .kh-hb-tile:first-child .kh-hb-img img { position:absolute; top:6px; left:6px; width:calc(100% - 12px); height:calc(100% - 12px)} .kh-hb-block[data-block-type="cart"] .kh-hb-grid { grid-template-columns:1fr; gap:6px} .kh-hb-block[data-block-type="cart"] .kh-hb-grid .kh-hb-tile { grid-column:auto} .kh-hb-block[data-block-type="cart"] .kh-hb-grid .kh-hb-img { aspect-ratio:1/1; height:52px; padding:3px} .kh-hb-block[data-block-type="cart"] .kh-hb-grid .kh-hb-img img { position:static; width:100%; height:100%} .kh-hb-block[data-block-type="cart"] .kh-hb-tile { display:flex; align-items:center; gap:10px; padding:6px 8px} .kh-hb-block[data-block-type="cart"] .kh-hb-img { flex:0 0 52px; width:52px; aspect-ratio:1/1; padding:3px; margin:0; border-radius:6px} .kh-hb-block[data-block-type="cart"] .kh-hb-text { min-width:0; flex:1 1 auto} .kh-hb-block[data-block-type="cart"] .kh-hb-name { margin-top:0; -webkit-line-clamp:1; min-height:0} .kh-hb-block[data-block-type="cart"] .kh-hb-price { margin-top:0} .kh-hb-block[data-block-type="cart"] .kh-hb-deal { flex-direction:row; flex-wrap:wrap; gap:6px; margin-top:0; min-height:0} .kh-hb-block[data-block-type="cart"] .kh-hb-deal:empty { display:none} .kh-hb-block[data-block-type="categories"] .kh-hb-grid { grid-template-columns:repeat(4,1fr)} @media(max-width:767px) { .kh-hb-block[data-block-type="categories"] .kh-hb-grid { grid-template-columns:repeat(2,1fr)} } .kh-hb-tile { display:block; color:inherit; text-decoration:none; min-width:0; background:#fff; border:1px solid #e7e7e7; border-radius:8px; padding:8px; transition:box-shadow .15s,border-color .15s} .kh-hb-tile:hover { border-color:#c7cdd1; box-shadow:0 2px 8px rgba(15,17,17,.08)} .kh-hb-tile.kh-hb-tile-text { display:flex; align-items:center; justify-content:center; text-align:center; min-height:64px; padding:12px 8px} .kh-hb-tile.kh-hb-tile-text .kh-hb-name { white-space:normal; font-size:13px; font-weight:600; margin:0; line-height:1.4; min-height:0; display:block} .kh-hb-img { position:relative; display:block; aspect-ratio:1/1; background:#f0f2f2; border-radius:7px 7px 0 0; overflow:hidden; padding:6px; box-sizing:border-box; margin:-8px -8px 0} .kh-hb-img img { width:100%; height:100%; object-fit:contain; mix-blend-mode:multiply; display:block} .kh-hb-deal { display:flex; flex-direction:column; align-items:flex-start; gap:3px; margin-top:8px; min-height:21px} .kh-hb-badge { display:inline-block; background:#cc0c39; color:#fff; font-weight:700; font-size:11px; line-height:1; padding:5px 6px; border-radius:3px; white-space:nowrap; unicode-bidi:isolate} .kh-hb-ltd { color:#cc0c39; font-weight:700; font-size:11px; line-height:1.2; white-space:nowrap} .kh-hb-price { display:block; font-size:15px; font-weight:700; margin-top:6px; line-height:1.3; color:#0f1111; white-space:nowrap; overflow:hidden; text-overflow:ellipsis} .kh-hb-cur { font-weight:400; font-size:11px; margin-inline-start:2px} .kh-hb-price s { color:#767676; font-weight:400; font-size:11px; margin-inline-start:5px} .kh-hb-name { display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; font-size:12px; line-height:1.35; margin-top:4px; color:#0f1111; min-height:2.7em; white-space:normal} .kh-hb-skeleton .kh-hb-tile { pointer-events:none} .kh-hb-skeleton .kh-hb-img,.kh-hb-skeleton .kh-hb-head span { background:#f0f1f3; border-radius:4px} .kh-hb-skeleton .kh-hb-img { border-radius:7px 7px 0 0} @supports not (aspect-ratio:1/1) { .kh-hb-img { height:0; padding:6px 6px calc(100% - 6px)} .kh-hb-img img { position:absolute; top:6px; left:6px; width:calc(100% - 12px); height:calc(100% - 12px)} .kh-hb-block[data-block-type="cart"] .kh-hb-img { height:52px; padding:3px} .kh-hb-block[data-block-type="cart"] .kh-hb-img img { top:3px; left:3px; width:calc(100% - 6px); height:calc(100% - 6px)} } .kh-hb-skeleton .kh-hb-head span { display:block; flex:0 0 60%; width:60%} .kh-hb-skeleton .kh-hb-name,.kh-hb-skeleton .kh-hb-price { visibility:hidden} @media(max-width:1024px) { .kh-hb-row { grid-template-columns:repeat(min(var(--kh-cols,4),2),1fr)} } @media(max-width:767px) { .kh-hb-row { display:flex; grid-template-columns:none; gap:12px; overflow-x:auto; overflow-y:hidden; -webkit-overflow-scrolling:touch; scroll-snap-type:x proximity; scrollbar-width:none; padding-bottom:6px} .kh-hb-row::-webkit-scrollbar { display:none} .kh-hb-row { align-items:flex-start} .kh-hb-block { flex:0 0 86%; scroll-snap-align:start} } .kh-hbp-grid { display:grid; grid-template-columns:repeat(6,1fr); gap:12px; margin:12px 0 24px} @media(max-width:1200px) { .kh-hbp-grid { grid-template-columns:repeat(5,1fr)} } @media(max-width:1024px) { .kh-hbp-grid { grid-template-columns:repeat(4,1fr)} } @media(max-width:767px) { .kh-hbp-grid { grid-template-columns:repeat(3,1fr); gap:8px} } @media(max-width:479px) { .kh-hbp-grid { grid-template-columns:repeat(2,1fr)} } .kh-hbp-empty { padding:32px 16px; text-align:center; color:#555; font-size:15px} .kh-hbp-empty a { display:inline-block; margin-top:12px; color:#007185; font-weight:600; text-decoration:none} .kh-hbp-empty a:hover { text-decoration:underline} /* * Compact layout (admin "Row layout: Compact"; the container carries .kh-hb-compact): the * classic cards, tiles, names, badge, arrow and carousel, without the space the classic tile * reserves on every tile. The badge sits on the price line in front of the price (the * classic tile keeps a badge row on every tile, sale or not, plus a second line for "limited * time", which goes); the title is one line; the card padding is tighter (the gap between * tiles stays 10px: the thin-block wide panel is sized for it); on phones a card is 80% * wide instead of 86%, so it is shorter and more of the next one shows. home.tpl's * placeholder uses the same tile (no badge row), so the reserved height IS the drawn height. */ .kh-hb-compact .kh-hb-row { gap:12px} .kh-hb-compact .kh-hb-block { padding:10px} .kh-hb-compact .kh-hb-head { min-height:28px; margin:0 0 8px; align-items:center} .kh-hb-compact .kh-hb-block[data-block-type="because_you_viewed"] .kh-hb-head>span { display:block; white-space:nowrap} /* position:relative: the pieces a line hides (below) are positioned inside the line itself, clipped by it, instead of against the page's #content. */ .kh-hb-compact .kh-hb-price { position:relative; margin-top:5px} /* The badge on the price line: its box stays inside the line (11px text, 2px padding), so the tile keeps the placeholder's height. Its short form ("-24%") only shows in a row too narrow for the long one, after the old prices and the currency have gone (fitPrices). What a line gives up is hidden from the eye only: a screen reader still reads the whole price, old price and currency included, as on the classic tile. */ .kh-hb-compact .kh-hb-price .kh-hb-badge { padding:2px 5px; line-height:1.2; margin-inline-end:6px; vertical-align:1px} .kh-hb-bs { display:none} .kh-hb-price.kh-hb-tightest .kh-hb-bs { display:inline} .kh-hb-price.kh-hb-tight s,.kh-hb-price.kh-hb-tighter .kh-hb-cur,.kh-hb-price.kh-hb-tightest .kh-hb-bl,.kh-hb-price.kh-hb-bare .kh-hb-badge { position:absolute; width:1px; height:1px; margin:0; padding:0; overflow:hidden; clip:rect(0,0,0,0); clip-path:inset(50%); white-space:nowrap; border:0} /* The theme takes the focus ring off every link (a { outline:0 }); compact brings one back. */ .kh-hb-compact .kh-hb-tile:focus-visible { outline:2px solid #007185; outline-offset:-2px} .kh-hb-compact .kh-hb-more:focus-visible { outline:2px solid #007185; outline-offset:2px} /* The single list a visitor with no history gets (data-variant="rail", in either layout): one block, one row of up to six tiles; a one-row list on phones. */ .kh-hb-row.kh-hb-rail { display:block} .kh-hb-row.kh-hb-rail .kh-hb-grid { grid-template-columns:repeat(6,minmax(0,1fr)); gap:12px} @media(max-width:767px) { .kh-hb-compact .kh-hb-row>.kh-hb-block { flex-basis:80%} .kh-hb-row.kh-hb-rail { display:block; overflow:visible; padding-bottom:0} .kh-hb-row.kh-hb-rail>.kh-hb-block { margin:0 0 12px} .kh-hb-row.kh-hb-rail .kh-hb-grid { display:flex; gap:8px; overflow-x:auto; overflow-y:hidden; -webkit-overflow-scrolling:touch; scroll-snap-type:x proximity; scrollbar-width:none} .kh-hb-row.kh-hb-rail .kh-hb-grid::-webkit-scrollbar { display:none} .kh-hb-row.kh-hb-rail .kh-hb-grid>.kh-hb-tile { flex:0 0 clamp(112px,38%,168px); scroll-snap-align:start} }