/* Auto-extracted from live homepage ml-critical — v5.3.29.178 */

    :root{--red:var(--colour-storefront-primary);--red-text:var(--colour-storefront-primary);--red-dark:var(--colour-storefront-primary-dark);--black:var(--colour-storefront-heading);--white:var(--colour-bg-light);--bg:var(--colour-storefront-background);--font:'Outfit',sans-serif}
    *{box-sizing:border-box;margin:0;padding:0}
    body{font-family:var(--font);color:var(--colour-storefront-text);background:var(--bg);overflow-x:hidden;-webkit-font-smoothing:antialiased}
    img,video{max-width:100%;height:auto}
    a{color:inherit;text-decoration:none}
    .site-header{background:var(--colour-bg-light);border-bottom:1px solid var(--colour-storefront-border-dark);z-index:9990;position:sticky;top:0}
    .ml-header-logo{display:flex;align-items:center;justify-content:space-between;padding:8px 12px 4px}
    .ml-header-bar{display:flex;align-items:center;gap:12px;padding:8px 12px}
    .ml-header-bar>.site-logo{margin-right:calc(2rem - 12px)}
    .site-logo__img{height:48px;width:auto;display:block}
    .header-search__wrap{flex:1;display:flex;align-items:center;gap:6px;background:var(--colour-storefront-background);border-radius:10px;padding:8px 12px}
    .header-search__input{border:none;background:transparent;flex:1;font-size:.82rem;font-family:var(--font);outline:none}
    .ml-header-icon{color:var(--colour-brand-dark);display:flex;align-items:center}
    #announcement-bar{background:var(--colour-storefront-primary);color:var(--colour-bg-light);text-align:center;font-size:1rem;font-weight:700}
    .cat-pills{overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch;border-bottom:1px solid var(--colour-border-light)}
    .cat-pills::-webkit-scrollbar{display:none}
    .cat-pills__inner{display:flex;gap:0;padding:0 8px;white-space:nowrap}
    .cat-pill{padding:10px 14px;font-size:.78rem;font-weight:600;color:var(--colour-text-dark-gray);white-space:nowrap;font-family:var(--font)}
    .cat-pill--active{color:var(--red);border-bottom:2px solid var(--red)}
    .section{padding:16px 12px}
    .product-row{padding:0 0 8px}
    .product-row__header{display:flex;align-items:center;justify-content:space-between;padding:12px 12px 8px}
    .product-row__title{font-size:1.05rem;font-weight:800;color:var(--colour-heading-dark)}
    .product-row__scroll{display:flex;gap:10px;overflow-x:auto;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;scrollbar-width:none;padding:0 12px 8px}
    .product-row__scroll::-webkit-scrollbar{display:none}
    /* v499984 — mobile product-card sizing in critical CSS. Without this the card
       width lived only in the external style.css, so cold-cache MOBILE loads
       painted cards as 0-width strips until the stylesheet arrived (broken layout
       + late LCP). Desktop was fine because its override is already inline. */
    .product-card{min-width:170px;max-width:170px;background:var(--colour-bg-light);border-radius:12px;overflow:hidden;flex-shrink:0;border:1px solid var(--colour-border-light);display:flex;flex-direction:column;scroll-snap-align:start}
    .product-card__photo,.product-card__image{position:relative;width:100%;aspect-ratio:1;overflow:hidden;background:var(--colour-bg-light)}
    .product-card__photo img,.product-card__image img{width:100%;height:100%;object-fit:contain;display:block}
    .ml-skip-link{position:absolute;left:-9999px;top:auto;width:1px;height:1px;overflow:hidden}
    .ml-skip-link:focus{position:fixed;top:0;left:0;width:auto;height:auto;z-index:99999;background:var(--colour-bg-light);padding:10px 20px}
    .deal-carousel{min-height:200px;border-radius:16px;overflow:hidden}
    .deal-carousel__slide{min-width:100%;min-height:200px}
    .promo-banner{min-height:80px;border-radius:16px}