/* * 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)} /* The cart is a list, never a 2x2: the renderer gives its grid no data-count, so none of the thin-block shapes above can reach it and its lines need no rules to undo them. The thumbnail states its height beside its width (the 52px the deleted override used to give it), so its size does not depend on aspect-ratio support; this one rule sizes it in every browser. */ .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-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; height: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 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} }