/* GH STUDIO - product page styles */

.nav-links a:hover,
.nav-links a.active{

    color:#fff;

}
.page-hero-image{

    position:absolute;

    inset:0;

    background-image:
        linear-gradient(
            90deg,
            rgba(0,0,0,.92),
            rgba(0,0,0,.6) 45%,
            rgba(0,0,0,.15) 75%,
            transparent 100%
        ),
        url(
        '../img/home_product.webp'
        );

    background-size:cover;

    background-position:center;

    filter:grayscale(100%);

    transform:scale(1.02);

}
/* =====================================================
   FEATURED PRODUCT (ARTICLE PROMO)
===================================================== */

.featured-product{

    padding:100px 0 40px;

    /* Hidden until JS confirms which product is actually featured
       (Supabase data or static fallback) — prevents a flash of the
       wrong product before the real data loads. */
    opacity:0;
    transition:opacity .35s ease;

}
.featured-product.fp-ready{

    opacity:1;

}
.featured-grid{

    display:grid;
    grid-template-columns:1fr 1fr;
    gap:65px;
    align-items:center;

}
.featured-image-wrap{

    display:flex;
    flex-direction:column;

}
.featured-image{

    position:relative;

    aspect-ratio:4/5;

    overflow:hidden;

    background:#111;

}
.featured-image img{

    width:100%;
    height:100%;
    object-fit:cover;
    object-position:top center;

    transition:transform .8s;

}
.featured-image:hover img{

    transform:scale(1.06);

}
.featured-badge{

    display:inline-flex;

    align-self:flex-start;

    background:#fff;
    color:#000;

    font-size:10px;
    font-weight:800;
    letter-spacing:2px;
    text-transform:uppercase;

    padding:10px 16px;

    margin-bottom:14px;

}
.featured-content h2{

    margin:16px 0 20px;

    font-family:"Playfair Display",serif;
    font-weight:500;

    font-size:clamp(32px,4.2vw,54px);
    line-height:1.05;
    letter-spacing:-2px;

}
.featured-intro{

    color:#aaa;
    font-size:14.5px;
    line-height:1.9;
    margin-bottom:8px;

}
.featured-section-title{

    display:flex;
    align-items:center;
    gap:10px;

    margin:28px 0 12px;

    font-size:11px;
    font-weight:800;
    letter-spacing:2.5px;
    text-transform:uppercase;
    color:#fff;

}
.featured-section-title::before{

    content:"";

    width:18px;
    height:1px;

    background:#555;

}
.featured-benefits{

    list-style:none;
    display:grid;
    gap:10px;

}
.featured-benefits li{

    position:relative;
    padding-left:22px;

    color:#ccc;
    font-size:13.5px;
    line-height:1.7;

}
.featured-benefits li::before{

    content:"";
    position:absolute;
    left:0;
    top:7px;

    width:7px;
    height:7px;

    border:1px solid #fff;
    border-radius:50%;

}
.featured-text{

    color:#aaa;
    font-size:13.5px;
    line-height:1.9;

}
.featured-price-row{

    display:flex;
    align-items:center;
    flex-wrap:wrap;
    gap:22px;

    margin-top:36px;
    padding-top:26px;

    border-top:1px solid var(--line);

}
.featured-price{

    font-size:26px;
    font-weight:800;
    letter-spacing:.5px;

}
@media(max-width:900px){

    .featured-grid{
        grid-template-columns:1fr;
        gap:35px;
    }

    .featured-product{
        padding:70px 0 10px;
    }

}
/* =====================================================
   FEATURED PRODUCT — VISUAL EFFECTS
   Toggled via JS based on the "Featured Effect" chosen
   for that product in the admin panel. Only one
   fp-fx-* class is applied at a time to #featuredProduct.
===================================================== */

/* Glow Pulse — soft pulsing glow around the photo */
.featured-product.fp-fx-glow .featured-image{
    animation:fpGlowPulse 2.8s ease-in-out infinite;
}
@keyframes fpGlowPulse{
    0%,100%{ box-shadow:0 0 25px 2px rgba(255,255,255,.15); }
    50%{ box-shadow:0 0 55px 10px rgba(255,255,255,.4); }
}
/* Gradient Border — slow-moving gradient frame around the photo */
.featured-product.fp-fx-gradient .featured-image{
    padding:4px;
    background:linear-gradient(120deg,#fff,#777,#fff,#333);
    background-size:300% 300%;
    animation:fpGradientMove 6s ease infinite;
}
@keyframes fpGradientMove{
    0%{ background-position:0% 50%; }
    50%{ background-position:100% 50%; }
    100%{ background-position:0% 50%; }
}
/* Shine Sweep — a light sweep passing over the photo */
.featured-product.fp-fx-shine .featured-image{
    position:relative;
}
.featured-product.fp-fx-shine .featured-image::after{
    content:"";
    position:absolute;
    top:0;
    left:-60%;
    width:55%;
    height:100%;
    background:linear-gradient(120deg,transparent,rgba(255,255,255,.35),transparent);
    transform:skewX(-20deg);
    animation:fpShineSweep 3.4s ease-in-out infinite;
    pointer-events:none;
}
@keyframes fpShineSweep{
    0%{ left:-60%; }
    55%{ left:130%; }
    100%{ left:130%; }
}
/* Floating — the whole image column drifts gently up and down */
.featured-product.fp-fx-float .featured-image-wrap{
    animation:fpFloat 3.6s ease-in-out infinite;
}
@keyframes fpFloat{
    0%,100%{ transform:translateY(0); }
    50%{ transform:translateY(-14px); }
}
/* Spotlight — soft radial light glowing behind the photo */
.featured-product.fp-fx-spotlight .featured-image-wrap{
    position:relative;
}
.featured-product.fp-fx-spotlight .featured-image-wrap::before{
    content:"";
    position:absolute;
    top:-50px;
    left:50%;
    width:140%;
    height:190px;
    transform:translateX(-50%);
    background:radial-gradient(ellipse at center,rgba(255,255,255,.28),transparent 70%);
    filter:blur(12px);
    animation:fpSpotlightPulse 3s ease-in-out infinite;
    pointer-events:none;
    z-index:0;
}
.featured-product.fp-fx-spotlight .featured-image{
    position:relative;
    z-index:1;
}
@keyframes fpSpotlightPulse{
    0%,100%{ opacity:.5; }
    50%{ opacity:1; }
}
/* Ribbon Corner — diagonal "FEATURED" ribbon across the photo corner */
.featured-product.fp-fx-ribbon .featured-image{
    position:relative;
    overflow:visible;
}
.featured-product.fp-fx-ribbon .featured-image::before{
    content:"FEATURED";
    position:absolute;
    top:20px;
    right:-42px;
    width:160px;
    padding:6px 0;
    background:#fff;
    color:#000;
    font-size:10px;
    font-weight:800;
    letter-spacing:2px;
    text-align:center;
    transform:rotate(45deg);
    box-shadow:0 2px 8px rgba(0,0,0,.4);
    z-index:2;
}
@media(max-width:900px){
    .featured-product.fp-fx-ribbon .featured-image{
        overflow:hidden;
    }
    .featured-product.fp-fx-ribbon .featured-image::before{
        right:-46px;
    }
}
/* =====================================================
   PRODUCTS
===================================================== */

.products{

    padding:100px 0 150px;

}
.product-grid{

    display:flex;

    flex-direction:column;

}
/* =====================================================
   CATALOG PLATES — each product is a full-width editorial
   row instead of a card, alternating image left/right.
===================================================== */

.catalog-plate{

    display:grid;

    grid-template-columns:1fr 1fr;

    align-items:center;

    gap:70px;

    padding:70px 0;

    border-bottom:1px solid var(--line);

    position:relative;

}
.catalog-plate:first-child{

    border-top:1px solid var(--line);

}
.catalog-plate:nth-child(even) .plate-image{

    order:2;

}
.catalog-plate:nth-child(even) .plate-text{

    order:1;

    text-align:right;

    margin-left:auto;

}
.catalog-plate:nth-child(even) .plate-index{

    right:auto;

    left:0;

}
.plate-image{

    position:relative;

    aspect-ratio:4/3;

    overflow:hidden;

    background:#111;

}
.plate-image img{

    width:100%;

    height:100%;

    object-fit:cover;

    filter:grayscale(45%);

    transition:transform 1s cubic-bezier(.2,.8,.2,1), filter .6s;

}
.catalog-plate:hover .plate-image img{

    transform:scale(1.045);

    filter:grayscale(0%);

}
.plate-text{

    max-width:420px;

}
.plate-index{

    position:absolute;

    top:70px;

    right:0;

    font-size:11px;

    color:var(--gray2);

    letter-spacing:2px;

}
.plate-name{

    font-family:"Playfair Display",serif;

    font-size:clamp(30px,3vw,42px);

    font-weight:600;

    line-height:1.15;

    margin-top:18px;

    margin-bottom:4px;

}
.plate-badge{

    display:inline-block;

    font-size:10px;

    color:var(--gray);

    letter-spacing:1.5px;

    text-transform:uppercase;

    margin-top:10px;

}
.plate-desc{

    color:var(--gray);

    font-size:14px;

    line-height:1.85;

    margin-top:18px;

}
.plate-footer{

    display:flex;

    align-items:center;

    gap:24px;

    margin-top:32px;

}
.catalog-plate:nth-child(even) .plate-footer{

    justify-content:flex-end;

}
.plate-price{

    font-size:15px;

    font-weight:700;

    letter-spacing:.3px;

}
.plate-buy{

    font-size:11px;

    font-weight:700;

    letter-spacing:1.5px;

    text-transform:uppercase;

    padding-bottom:4px;

    border-bottom:1px solid var(--white);

    transition:.3s;

}
.plate-buy:hover{

    color:var(--gray);

    border-color:var(--gray);

}
.catalog-plate.gh-hidden{

    display:none!important;

}
/* =====================================================
   PRODUCT CATALOG — LAYOUT VARIANTS
   Controlled from Admin > Display > "Product Catalog — Layout".
   Default (no class) = Elegant Grid, the original alternating plates.
===================================================== */

.product-grid.layout-masonry{
    display:block;
    columns:2;
    column-gap:60px;
}
.product-grid.layout-masonry .catalog-plate{
    display:block;
    grid-template-columns:none;
    break-inside:avoid;
    padding:0 0 55px;
    margin-bottom:55px;
    border-bottom:1px solid var(--line);
    border-top:0!important;
}
.product-grid.layout-masonry .plate-image{ order:0!important; aspect-ratio:1/1; }
.product-grid.layout-masonry .plate-text{ order:0!important; text-align:left!important; margin-left:0!important; max-width:none; }
.product-grid.layout-masonry .plate-index{ position:static; display:block; margin:16px 0 0; }
.product-grid.layout-masonry .plate-footer{ justify-content:flex-start!important; }
.product-grid.layout-compact{
    display:flex;
    flex-direction:column;
}
.product-grid.layout-compact .catalog-plate{
    display:grid;
    grid-template-columns:110px 1fr auto;
    align-items:center;
    gap:22px;
    padding:20px 0;
}
.product-grid.layout-compact .plate-image{ order:0!important; aspect-ratio:1/1; }
.product-grid.layout-compact .plate-text{ order:0!important; text-align:left!important; margin-left:0!important; max-width:none; }
.product-grid.layout-compact .plate-index{ display:none; }
.product-grid.layout-compact .plate-name{ font-size:17px; margin-top:0; }
.product-grid.layout-compact .plate-desc{ display:none; }
.product-grid.layout-compact .plate-footer{ grid-column:1/-1; justify-content:flex-start!important; margin-top:6px; }
@media(min-width:640px){
    .product-grid.layout-compact .plate-footer{
        grid-column:auto;
        margin-top:0;
        flex-direction:column;
        align-items:flex-end;
        gap:10px;
    }
}
@media(max-width:800px){
    .product-grid.layout-masonry{ columns:1; }
    .product-grid.layout-compact .catalog-plate{ grid-template-columns:70px 1fr; }
    .product-grid.layout-compact .plate-footer{ grid-column:1/-1; }
}
@media(max-width:800px){

    .catalog-plate{

        grid-template-columns:1fr;

        gap:26px;

        padding:50px 0;

    }

    .catalog-plate:nth-child(even) .plate-image{ order:0; }

    .catalog-plate:nth-child(even) .plate-text{ order:0; text-align:left; margin-left:0; }
    .catalog-plate:nth-child(even) .plate-footer{ justify-content:flex-start; }
    .catalog-plate:nth-child(even) .plate-index{ right:0; left:auto; }

    .plate-index{ position:static; display:block; margin-bottom:10px; }

    .plate-text{ max-width:none; }

}
@media(max-width:800px){
    .nav-inner{position:relative;}
    .nav-inner nav{display:none;}
    .nav-toggle{display:flex;}
    .mobile-menu{display:block;}
}
/* =====================================================
   MOBILE
===================================================== */

@media(max-width:800px){

    .container,
    .nav-inner,
    .page-hero-content{

        width:calc(100% - 30px);

    }

    .page-hero{

        min-height:44vh;

        padding-bottom:55px;

    }

    .page-hero-content{

        padding-top:0;

    }

    .page-hero h1{

        font-size:46px;

        letter-spacing:-2px;

    }

    .footer-grid{

        grid-template-columns:1fr;

    }

    .footer-bottom{

        display:block;

        line-height:2;

    }

}
@media(max-width:560px){

    .page-hero h1{

        font-size:38px;

    }

    .cta h2{

        font-size:44px;

    }

}