/* * 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}