.hf-shop-hero-wrap{
    --hf-yellow:#F6C700;
    --hf-ink:#1B1B1B;
    --hf-navy:#0D1B3D;
    --hf-orange:#F4791F;
    --hf-orange-deep:#D9640E;
    --hf-paper:#FFFFFF;
    --hf-line:#ECE8DA;
    --hf-muted:#7B7E89;
    font-family:'Inter',sans-serif;
    color:var(--hf-ink);
}

.hf-shop-hero{
    max-width:1180px;
    margin:36px auto 0;
    padding:0 32px;
}
.hf-shop-hero-banner{
    background:
        radial-gradient(circle at 85% 20%, rgba(246,199,0,0.18), transparent 45%),
        linear-gradient(135deg, var(--hf-navy) 0%, #142853 100%);
    border-radius:20px;
    padding:48px;
    position:relative;
    overflow:hidden;
    display:grid;
    grid-template-columns:1.1fr 1fr;
    align-items:center;
    gap:24px;
}
.hf-shop-hero-bg-img{
    position:absolute;
    inset:0;
    width:100%;
    height:100%;
    object-fit:cover;
    z-index:0;
}
.hf-shop-hero-overlay{
    position:absolute;
    inset:0;
    z-index:1;
    background:linear-gradient(135deg, rgba(13,27,61,0.82), rgba(13,27,61,0.7));
}
.hf-shop-hero-copy{
    position:relative;
    z-index:2;
}
.hf-shop-hero-copy .hf-shop-eyebrow{
    display:inline-block;
    background:rgba(246,199,0,0.15);
    color:var(--hf-yellow);
    font-size:11px;
    font-weight:700;
    letter-spacing:0.1em;
    text-transform:uppercase;
    padding:6px 12px;
    border-radius:100px;
    margin-bottom:16px;
}
.hf-shop-hero-copy h1{
    font-family:'Sora',sans-serif;
    font-size:34px;
    line-height:1.15;
    color:#fff;
    font-weight:800;
    margin:0 0 14px;
}
.hf-shop-hero-copy h1 span{color:var(--hf-yellow);}
.hf-shop-hero-copy p{
    color:rgba(255,255,255,0.7);
    font-size:14px;
    line-height:1.6;
    margin:0 0 24px;
    max-width:38ch;
}
.hf-shop-hero-ctas{display:flex;gap:12px;flex-wrap:wrap;margin-top:12px;}
.hf-shop-hero-ctas .hf-btn-ghost{
    background:transparent;
    color:#fff;
    border:1.5px solid rgba(255,255,255,0.3);
    padding:13px 24px;
    border-radius:10px;
    font-family:'Sora',sans-serif;
    font-weight:700;
    font-size:13.5px;
    cursor:pointer;
    text-decoration:none;
    display:inline-block;
    transition:transform 0.2s ease, background 0.2s ease, border-color 0.2s ease;
}
.hf-shop-hero-ctas .hf-btn-ghost:hover{
    transform:translateY(-2px);
    background:rgba(255,255,255,0.08);
    border-color:rgba(255,255,255,0.5);
}
.hf-shop-hero-browse-all{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:9px;
    background:var(--hf-orange);
    border:0;
    color:#fff;
    font-family:'Sora',sans-serif;
    font-size:14px;
    font-weight:700;
    padding:15px 28px;
    border-radius:10px;
    text-decoration:none;
    box-shadow:0 12px 24px -10px rgba(244,121,31,0.5);
    transition:transform 0.2s ease, box-shadow 0.2s ease, filter 0.2s ease;
}
.hf-shop-hero-browse-all svg{
    flex-shrink:0;
    transition:transform 0.2s ease;
}
.hf-shop-hero-browse-all:hover{
    transform:translateY(-2px);
    background:var(--hf-orange);
    color:#fff;
    box-shadow:0 16px 30px -8px rgba(244,121,31,0.65);
    filter:brightness(1.06);
}
.hf-shop-hero-browse-all:hover svg{
    transform:translateX(3px);
}

/* Featured products — a skewed, swipeable row (matches the homepage
   hero's card style, but scrolls instead of using fixed positions so
   any number of featured slots works, on both desktop and mobile).
   The edges fade out via mask-image instead of a hard clip, and a
   pair of arrow buttons give desktop users an obvious way to browse
   without relying on drag/scroll gestures. */
.hf-shop-hero-art{
    position:relative;
    z-index:2;
    align-self:stretch;
    display:flex;
    flex-direction:column;
    align-items:stretch;
    justify-content:center;
    min-height:280px;
    min-width:0;
    overflow:hidden;
    -webkit-mask-image:linear-gradient(to right, black 0, black calc(100% - 60px), transparent 100%);
    mask-image:linear-gradient(to right, black 0, black calc(100% - 60px), transparent 100%);
}
.hf-shop-glow{
    position:absolute;
    width:340px;height:340px;
    right:-40px;top:50%;
    transform:translateY(-50%);
    background:radial-gradient(circle, rgba(246,199,0,0.18) 0%, transparent 70%);
    animation:hfShopPulse 4.5s ease-in-out infinite;
    pointer-events:none;
}
@keyframes hfShopPulse{
    0%,100%{opacity:0.7;transform:translateY(-50%) scale(1);}
    50%{opacity:1;transform:translateY(-50%) scale(1.08);}
}

.hf-shop-hero-art-controls{
    display:flex;
    align-items:center;
    justify-content:center;
    gap:14px;
    padding:6px 60px 0;
}
.hf-shop-scroll-btn{
    width:32px;height:32px;
    border-radius:50%;
    border:1px solid rgba(255,255,255,0.25);
    background:rgba(13,27,61,0.8);
    color:#fff;
    font-size:18px;
    line-height:1;
    cursor:pointer;
    display:flex;
    align-items:center;
    justify-content:center;
    transition:background 0.15s ease, opacity 0.15s ease;
}
.hf-shop-scroll-btn:hover{background:rgba(244,121,31,0.85);}
.hf-shop-scroll-btn:disabled{opacity:0.25;cursor:default;}
.hf-shop-scroll-btn:disabled:hover{background:rgba(13,27,61,0.8);}

.hf-shop-card-row{
    position:relative;
    display:flex;
    flex-wrap:nowrap;
    gap:22px;
    width:100%;
    min-width:0;
    padding:26px 10px 46px;
    overflow-x:auto;
    scroll-snap-type:x proximity;
    -webkit-overflow-scrolling:touch;
    scrollbar-width:none;
    cursor:grab;
}
.hf-shop-card-row::-webkit-scrollbar{display:none;}
.hf-shop-card-row.hf-dragging{cursor:grabbing;scroll-snap-type:none;}

.hf-shop-product-card{
    flex:0 0 auto;
    width:170px;
    scroll-snap-align:start;
    background:var(--hf-paper);
    border-radius:12px;
    box-shadow:0 12px 30px rgba(0,0,0,0.28);
    overflow:hidden;
    position:relative;
    text-decoration:none;
    display:block;
    transition:transform 0.2s ease, box-shadow 0.2s ease, rotate 0.2s ease;
}
.hf-shop-product-card:nth-child(odd){ rotate:-3deg; }
.hf-shop-product-card:nth-child(even){ rotate:3deg; margin-top:20px; }
.hf-shop-product-card:hover{
    transform:translateY(-4px);
    rotate:0deg;
    box-shadow:0 18px 36px rgba(0,0,0,0.38), 0 0 0 2px var(--hf-yellow);
    z-index:2;
}

.hf-shop-card-badge{
    position:absolute;
    top:8px;left:8px;
    background:var(--hf-yellow);
    color:var(--hf-ink);
    font-family:'Sora',sans-serif;
    font-weight:800;
    font-size:9px;
    padding:3px 8px;
    border-radius:10px;
    z-index:1;
    text-transform:uppercase;
    letter-spacing:0.03em;
}
.hf-shop-card-photo{
    height:150px;
    background-color:#EEF1F5;
    display:flex;
    align-items:center;
    justify-content:center;
    overflow:hidden;
}
.hf-shop-card-photo img{
    max-width:100%;
    max-height:100%;
    width:auto;
    height:auto;
    object-fit:contain;
    display:block;
    pointer-events:none;
}
.hf-shop-card-info{padding:10px 12px 12px;}
.hf-shop-card-name{
    font-family:'Sora',sans-serif;
    font-weight:700;
    font-size:11.5px;
    color:var(--hf-navy);
    margin:0 0 4px;
    line-height:1.3;
    display:-webkit-box;
    -webkit-line-clamp:2;
    -webkit-box-orient:vertical;
    overflow:hidden;
}
.hf-shop-card-price{
    font-family:'Sora',sans-serif;
    font-weight:800;
    font-size:13px;
    color:var(--hf-orange-deep);
    margin:0;
}
.hf-shop-price-old{
    color:#9aa0ac;
    font-weight:500;
    font-size:10.5px;
    text-decoration:line-through;
    margin-right:5px;
}

.hf-shop-section-head{
    max-width:1180px;
    margin:56px auto 20px;
    padding:0 32px;
    display:flex;
    align-items:baseline;
    justify-content:space-between;
}
.hf-shop-section-head h2{
    font-family:'Sora',sans-serif;
    font-size:20px;
    font-weight:800;
    color:var(--hf-navy);
    margin:0;
}
.hf-shop-section-head span{
    font-size:12.5px;
    color:var(--hf-muted);
}

/* Restyle WooCommerce's native "Shop page display: categories" tiles
   (ul.products li.product-category) into the mockup's card look. */
ul.products.columns-4{
    display:grid !important;
    grid-template-columns:repeat(4,1fr) !important;
    gap:22px !important;
    list-style:none !important;
    max-width:1180px;
    margin:0 auto 64px !important;
    padding:0 32px !important;
}
ul.products.columns-4 li.product-category{
    background:var(--hf-paper) !important;
    border-radius:18px;
    overflow:hidden;
    box-shadow:0 8px 24px rgba(13,27,61,0.10), 0 1px 3px rgba(13,27,61,0.06);
    transition:transform .2s ease, box-shadow .2s ease;
    position:relative;
    width:auto !important;
    margin:0 !important;
    padding:0 !important;
    float:none !important;
    text-align:left !important;
}
ul.products.columns-4 li.product-category:hover{
    transform:translateY(-6px);
    box-shadow:0 24px 40px -12px rgba(13,27,61,0.32);
}
ul.products.columns-4 li.product-category figure{
    aspect-ratio:4 / 3;
    height:auto;
    margin:0;
    background:linear-gradient(150deg, var(--hf-navy), #16264d);
    overflow:hidden;
    position:relative;
}
ul.products.columns-4 li.product-category:has(a[href*="/product-category/rewards/"]) figure{
    background:linear-gradient(150deg,#F6C700,#F4A100);
}
ul.products.columns-4 li.product-category figure a{
    display:block;
    height:100%;
}
ul.products.columns-4 li.product-category figure img{
    width:100%;
    height:100%;
    object-fit:cover;
    transition:transform .35s ease;
}
ul.products.columns-4 li.product-category:hover figure img{
    transform:scale(1.06);
}
/* Categories with no real thumbnail set fall back to WooCommerce's
   generic placeholder image — hide it and show a decorative icon on
   the gradient instead, since the placeholder image otherwise covers
   the whole figure and hides the colored background beneath it. */
ul.products.columns-4 li.product-category figure img[src*="woocommerce-placeholder"]{
    display:none;
}
ul.products.columns-4 li.product-category figure::after{
    content:"📦";
    display:none;
    position:absolute;
    inset:0;
    align-items:center;
    justify-content:center;
    font-size:56px;
}
ul.products.columns-4 li.product-category:has(img[src*="woocommerce-placeholder"]) figure::after{
    display:flex;
}
ul.products.columns-4 li.product-category:has(a[href*="/product-category/rewards/"]) figure::after{
    content:"🏆";
}
/* The product count already appears in the description text below
   ("1 product" / "4 products"), so the badge on the image itself is
   redundant clutter — hide it. */
ul.products.columns-4 li.product-category mark.count{
    display:none;
}
ul.products.columns-4 li.product-category .woocommerce-loop-category__title{
    padding:18px 18px 0;
    margin:0;
    font-family:'Sora',sans-serif;
    font-size:16.5px;
    font-weight:800;
    letter-spacing:-0.01em;
    color:var(--hf-navy);
}
ul.products.columns-4 li.product-category .woocommerce-loop-category__title a{
    color:inherit;
    text-decoration:none;
}
ul.products.columns-4 li.product-category .hf-cat-desc{
    padding:5px 18px 0;
    margin:0;
    font-size:12.5px;
    color:var(--hf-muted);
}
ul.products.columns-4 li.product-category .hf-cat-arrow{
    display:block;
    padding:12px 18px 20px;
    color:var(--hf-orange-deep);
    font-size:12.5px;
    font-weight:700;
    text-decoration:none;
}

@media(max-width:900px){
    .hf-shop-hero{margin:16px 0 32px;padding:0 16px;}
    .hf-shop-hero-banner{grid-template-columns:1fr;padding:28px 22px;border-radius:16px;}
    ul.products.columns-4{grid-template-columns:repeat(2,1fr) !important;}
    .hf-shop-scroll-btn{display:none;}
}
@media(max-width:560px){
    .hf-shop-hero{padding:0 12px;}
    .hf-shop-hero-banner{padding:24px 18px;}
    .hf-shop-hero-copy h1{font-size:26px;}
    .hf-shop-hero-copy p{max-width:none;}
    ul.products.columns-4{grid-template-columns:1fr !important;}
    .hf-shop-hero-art{min-height:240px;}
    .hf-shop-product-card{width:140px;}
    .hf-shop-card-photo{height:130px;}
}