from the HTML once the final layout is confirmed. ──────────────────────────────────────────────────────────── */ .strip-separator { height: 10px; background: var(--border-color, #e0e0e0); width: 100%; } /* ── 0c. CATEGORY GRID ─────────────────────────────────────── Fluid columns — all images always visible, resize with screen. Images: public_html/images/categorystrip/ ┌─────────────────────────────────────────────────────┐ │ TO CHANGE COLUMNS — edit ONE line below: │ │ Also add / remove elements in the HTML. │ │ --cat-cols: 5; → 5 columns (default) │ │ --cat-cols: 4; → 4 columns │ │ --cat-cols: 3; → 3 columns │ └─────────────────────────────────────────────────────┘ ──────────────────────────────────────────────────────────── */ .cat-grid-section { background: #fff; } .cat-grid { --cat-cols: 4; /* ← EDIT THIS NUMBER */ display: grid; grid-template-columns: repeat(var(--cat-cols), 1fr); gap: 10px; /* ← gap between images */ width: 100%; } .cat-grid-item { display: flex; flex-direction: column; text-decoration: none; color: inherit; } /* Image wrapper — overflow:hidden clips the hover scale to the image area only, so the label is never affected by the zoom */ .cat-grid-img { overflow: hidden; flex-shrink: 0; } .cat-grid-img img { width: 100%; aspect-ratio: 3 / 4; /* maintains portrait ratio on all screen sizes */ object-fit: cover; object-position: center top; display: block; transition: transform 0.45s ease; } .cat-grid-item:hover .cat-grid-img img { transform: scale(1.05); } /* ── Category label ────────────────────────────────────────── Separator line between image and label text. Adjust the two marked values to control the divider. ──────────────────────────────────────────────────────────── */ .cat-grid-label { display: block; text-align: center; padding: 0.65rem 0.5rem 0.75rem; font-size: 1rem; font-variant: small-caps; letter-spacing: 1.8px; color: var(--text-dark, #111); background: #fff; border-top-width: 1px; /* ← separator thickness */ border-top-style: solid; border-top-color: #e0e0e0; /* ← separator colour */ transition: color 0.25s ease; } .cat-grid-item:hover .cat-grid-label { color: var(--primary-gold); } /* ── 0d. TRUST BADGES ───────────────────────────────────── */ .trust-strip { background: #fafafa; padding: 36px 24px; border-bottom: 1px solid #ececec; } .trust-strip-inner { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; max-width: 900px; margin: 0 auto; } .trust-strip .product-badge { display: flex; align-items: center; justify-content: flex-start; gap: 18px; /* override style.css width: 50% which halves the card inside the grid cell */ width: 100%; box-sizing: border-box; padding: 28px 24px; background: #fff; border: 1px solid #ececec; border-radius: 14px; transition: transform 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease; } .trust-strip .product-badge:hover { transform: translateY(-2px); border-color: #d8d8d8; box-shadow: 0 4px 12px rgba(0,0,0,0.04); } .trust-strip .product-badge__icon { display: flex; align-items: center; justify-content: center; flex-shrink: 0; width: 40px; height: 40px; } .trust-strip .product-badge__icon svg { width: 32px !important; height: 32px !important; stroke-width: 1.6; } .trust-strip .product-badge__label { font-size: 1rem; font-weight: 600; line-height: 1.3; color: #111; white-space: normal; overflow-wrap: break-word; } /* ── Mobile ───────────────────────────────────────────── */ @media (max-width: 600px) { .trust-strip { padding: 24px 14px; } .trust-strip-inner { gap: 12px; } .trust-strip .product-badge { padding: 20px 16px; gap: 14px; border-radius: 12px; } .trust-strip .product-badge__icon { width: 32px; height: 32px; } .trust-strip .product-badge__icon svg { width: 24px !important; height: 24px !important; } .trust-strip .product-badge__label { font-size: 0.875rem; } } /* ── 0e. BESTSELLER BANNER ─────────────────────────────────── Sits below the category strip / trust badges. Shorter than the hero (40vh / 450px max), full page width. Upload image to: images/bestseller-banner.jpg Recommended: landscape, 1600 × 650 px ────────────────────────────────────────────────────────────── */ .bestseller-banner { position: relative; width: 100%; height: 40vh; max-height: 450px; overflow: hidden; } .bestseller-banner img { width: 100%; height: 100%; object-fit: cover; object-position: center; display: block; } .bestseller-overlay { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.5rem; background: rgba(0, 0, 0, 0.28); text-align: center; padding: 1.5rem; } .bestseller-overlay .eyebrow { display: block; font-size: 0.72rem; letter-spacing: 3px; text-transform: uppercase; color: rgba(255, 255, 255, 0.8); } .bestseller-overlay h2 { font-size: clamp(1.8rem, 4vw, 3rem); font-weight: 300; color: #fff; margin: 0; letter-spacing: 2px; } .btn-shop { display: inline-block; margin-top: 0.75rem; padding: 0.65rem 2rem; background: #fff; color: var(--text-dark, #1a1a1a); font-size: 0.78rem; font-weight: 600; letter-spacing: 1.5px; text-transform: uppercase; text-decoration: none; border: 2px solid #fff; transition: background 0.25s ease, color 0.25s ease; } .btn-shop:hover { background: transparent; color: #fff; } @media (max-width: 600px) { .bestseller-banner { height: 50vw; min-height: 200px; max-height: 300px; } .bestseller-overlay h2 { font-size: 1.5rem; } .btn-shop { padding: 0.55rem 1.5rem; font-size: 0.72rem; } } /* ── 1. FEATURED PRODUCT ROW ───────────────────────────────── Desktop : 5 columns Tablet : 3 columns (≤ 900px) Mobile : configurable columns (≤ 768px) WHY !important: style.css has an unscoped ".products-grid" rule at 768px with the same specificity as our scoped rule. Since both files are loaded and both breakpoints apply on iPhone, !important is the clean, reliable way to guarantee our homepage layout always wins. ──────────────────────────────────────────────────────────── */ .products { padding-top: 2.5rem; } .products-title { font-weight: 300; } /* ── Desktop: 5 columns ──────────────────────────────────── */ body.page-index .products-grid { display: grid !important; grid-template-columns: repeat(5, 1fr) !important; gap: 1.25rem 1rem; } /* ── Tablet: 3 columns ───────────────────────────────────── */ @media (max-width: 900px) { body.page-index .products-grid { grid-template-columns: repeat(3, 1fr) !important; gap: 1.25rem 0.75rem; } } /* ── Mobile: configurable columns ──────────────────────────── ┌─────────────────────────────────────────────────────┐ │ TO CHANGE THE MOBILE LAYOUT — edit ONE line below: │ │ │ │ --mobile-cols: 2; → 2 columns (default) │ │ --mobile-cols: 3; → 3 columns │ │ --mobile-cols: 1; → single column │ └─────────────────────────────────────────────────────┘ Breakpoint is 768px to match style.css and guarantee this rule always wins on iPhone/Android. ──────────────────────────────────────────────────────────── */ @media (max-width: 768px) { body.page-index .products-grid { --mobile-cols: 2; /* ← EDIT THIS NUMBER */ display: grid !important; grid-template-columns: repeat(var(--mobile-cols), 1fr) !important; gap: 1rem 0.6rem; } } /* ── 2. CARD CONTENT — compact text for small featured cards ── ──────────────────────────────────────────────────────────── */ body.page-index .product-card { min-height: 260px; } body.page-index .product-image { margin-bottom: 0.4rem; } body.page-index .product-info { gap: 0.2rem; } body.page-index .product-name { font-size: 0.875rem; min-height: unset; } body.page-index .product-price { font-size: 0.78rem; margin: 0.1rem 0 0.15rem; } body.page-index .add-to-cart-btn { padding: 0.4rem 0.45rem; font-size: 0.62rem; letter-spacing: 0.35px; } body.page-index .wishlist-btn, body.page-index .quick-view { width: 28px; height: 28px; } body.page-index .heart-icon { font-size: 1rem; } /* ── 3. QUICK-VIEW POPUP — button style parity ─────────────── ──────────────────────────────────────────────────────────── */ .quick-view-popup .add-to-cart-btn { display: inline-block; width: 100%; padding: 0.6rem 1rem; font-size: 0.8rem !important; font-weight: 600 !important; text-transform: uppercase !important; letter-spacing: 0.8px !important; } /* Ensure wishlist button inside quick-view matches Add to Cart sizing */ .quick-view-popup .quick-view-wishlist-btn { font-size: 0.8rem !important; font-weight: 600 !important; text-transform: uppercase !important; letter-spacing: 0.8px !important; padding: 0.6rem 1rem !important; } .quick-view-popup .quick-view-wishlist-btn svg { width: 18px; height: 18px; } /* ── 4. GIF FEATURE STRIP ──────────────────────────────────── ──────────────────────────────────────────────────────────── */ .gif-strip { padding: 2.5rem 0 3.5rem; background: #fff; } .gif-strip-inner { display: flex; justify-content: center; align-items: flex-start; gap: 10px; flex-wrap: nowrap; } .gif-box { position: relative; width: 300px; height: 450px; flex: 0 0 300px; overflow: hidden; background: #f0f0f0; border-radius: 4px; } .gif-box img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; } .gif-box__placeholder { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; color: #aaa; font-size: 0.78rem; text-align: center; gap: 0.6rem; pointer-events: none; padding: 1rem; line-height: 1.5; } .gif-box__placeholder svg { opacity: 0.3; } .gif-box img[src]:not([src=""]) ~ .gif-box__placeholder { display: none; } @media (max-width: 1000px) { .gif-strip-inner { gap: 8px; } .gif-box { flex: 1 1 0; width: auto; height: 0; padding-bottom: 150%; } } /* ── 6. NEWSLETTER SUBLINE ─────────────────────────────────── ──────────────────────────────────────────────────────────── */ .newsletter-sub { font-size: 0.9rem; color: var(--text-gray); margin: 0.4rem 0 1.2rem; } @media (max-width: 600px) { .gif-strip-inner { flex-direction: column; align-items: center; gap: 14px; } .gif-box { width: 85vw; max-width: 320px; flex: 0 0 auto; height: calc(85vw * 1.5); max-height: 480px; padding-bottom: 0; } }