
/*
 * 6666 Perfumes Bottle Sets — v2.4.0
 * Full-bleed, theme-safe premium black/gold layout.
 */
.sixsixsixsix-page,
.sixsixsixsix-page *{
    box-sizing:border-box;
}
.sixsixsixsix-page{
    --gold:#d4af37;
    --gold-light:#f4d35e;
    --gold-dark:#a77d0a;
    --black:#050505;
    --panel:#0e0e0e;
    --muted:#a9a9a9;

    position:relative !important;
    display:block !important;
    width:100vw !important;
    max-width:100vw !important;
    min-width:100vw !important;

    /* Escape Astra/Elementor horizontal containers. */
    margin-left:calc(50% - 50vw) !important;
    margin-right:calc(50% - 50vw) !important;
    margin-top:0 !important;
    margin-bottom:0 !important;
    padding:0 !important;

    color:#fff;
    background:var(--black);
    overflow:visible;
    isolation:isolate;
    text-align:left;
    font-family:inherit;
}
.sixsixsixsix-page > *{
    margin-top:0 !important;
    margin-bottom:0 !important;
}

/* Prevent common theme/Elementor rules from adding gaps around the shortcode. */
.sixsixsixsix-page,
.sixsixsixsix-page:first-child,
.sixsixsixsix-page:last-child{
    border:0 !important;
    box-shadow:none;
}
.sixsixsixsix-page img{
    max-width:100%;
}

/* HERO */
.sixsixsixsix-hero{
    position:relative !important;
    width:100% !important;
    max-width:none !important;
    min-height:520px;
    margin:0 !important;
    padding:74px 28px 68px !important;
    display:flex !important;
    align-items:center !important;
    justify-content:center !important;
    text-align:center !important;
    background-color:#0a0a0a;
    background-size:cover;
    background-position:center center;
    border:0 !important;
    border-radius:0 !important;
    isolation:isolate;
}
.sixsixsixsix-hero::before{
    content:"";
    position:absolute;
    inset:0;
    background:linear-gradient(180deg,rgba(0,0,0,.08),rgba(0,0,0,.24));
    pointer-events:none;
    z-index:-1;
}
.sixsixsixsix-hero-content{
    position:relative;
    z-index:1;
    width:min(1100px,100%);
    margin:0 auto !important;
    padding:0 !important;
    text-align:center !important;
}
.sixsixsixsix-hero-content > span{
    display:block;
    margin:0 0 14px !important;
    color:var(--gold-light);
    font-size:13px;
    font-weight:800;
    letter-spacing:2.5px;
    line-height:1.4;
    text-transform:uppercase;
}
.sixsixsixsix-hero h1{
    margin:0 auto 16px !important;
    padding:0 !important;
    max-width:1100px;
    color:#fff !important;
    font-size:clamp(40px,5.1vw,74px);
    line-height:1.02;
    font-weight:800;
    text-align:center !important;
    text-shadow:0 3px 20px rgba(0,0,0,.45);
}
.sixsixsixsix-hero p{
    margin:0 auto !important;
    padding:0 !important;
    max-width:760px;
    color:#f5f5f5 !important;
    font-size:18px;
    line-height:1.5;
    text-align:center !important;
    text-shadow:0 2px 10px rgba(0,0,0,.45);
}

/* MAIN SECTION — no external margin/gap */
.sixsixsixsix-section{
    width:100% !important;
    max-width:none !important;
    margin:0 !important;
    padding:56px clamp(18px,3.5vw,64px) 72px !important;
    background:#050505 !important;
    text-align:center !important;
}
.sixsixsixsix-section-inner{
    width:100% !important;
    max-width:none !important;
    margin:0 auto !important;
    padding:0 !important;
}
.sixsixsixsix-section h2{
    margin:0 auto 10px !important;
    padding:0 !important;
    color:#fff !important;
    font-size:clamp(30px,3vw,42px);
    line-height:1.15;
    font-weight:800;
    text-align:center !important;
}
.sixsixsixsix-note{
    margin:0 auto 22px !important;
    padding:0 !important;
    color:var(--muted) !important;
    font-size:15px;
    line-height:1.5;
    text-align:center !important;
}

/* PREMIUM FILTER */
.sixsixsixsix-filters{
    width:min(820px,100%);
    min-height:60px;
    margin:0 auto 40px !important;
    padding:5px !important;
    display:flex !important;
    align-items:center !important;
    justify-content:space-between !important;
    gap:0 !important;
    border:1px solid rgba(212,175,55,.9) !important;
    border-radius:999px !important;
    background:#080808 !important;
    box-shadow:0 8px 24px rgba(0,0,0,.28),inset 0 0 0 1px rgba(255,255,255,.025);
    overflow:hidden;
}
.sixsixsixsix-filters button{
    flex:1 1 0;
    min-width:0;
    min-height:48px;
    margin:0 !important;
    padding:12px 18px !important;
    appearance:none;
    border:0 !important;
    border-radius:999px !important;
    background:transparent !important;
    color:#f1f1f1 !important;
    font:inherit !important;
    font-size:14px !important;
    font-weight:800 !important;
    letter-spacing:.5px;
    line-height:1 !important;
    text-align:center !important;
    white-space:nowrap;
    cursor:pointer;
    transition:background .2s ease,color .2s ease,box-shadow .2s ease,transform .2s ease;
}
.sixsixsixsix-filters button:hover{
    color:var(--gold-light) !important;
    background:rgba(212,175,55,.08) !important;
}
.sixsixsixsix-filters button.active{
    background:linear-gradient(180deg,#f4d35e,#d4af37) !important;
    color:#090909 !important;
    box-shadow:0 5px 16px rgba(212,175,55,.22);
}
.sixsixsixsix-filters button:focus-visible{
    outline:2px solid var(--gold-light);
    outline-offset:2px;
}
.sixsixsixsix-filter-divider{
    flex:0 0 1px;
    width:1px;
    height:24px;
    background:rgba(212,175,55,.45);
}

/* PRODUCT GRID */
.sixsixsixsix-grid{
    width:100% !important;
    max-width:none !important;
    margin:0 !important;
    padding:0 !important;
    display:grid !important;
    grid-template-columns:repeat(4,minmax(0,1fr));
    gap:24px;
    align-items:stretch;
    text-align:left;
}
.sixsixsixsix-product{
    min-width:0;
    margin:0 !important;
    padding:0 !important;
    background:linear-gradient(180deg,#151515,#0d0d0d) !important;
    border:1px solid rgba(212,175,55,.28) !important;
    border-radius:18px !important;
    overflow:hidden;
    display:flex;
    flex-direction:column;
    transition:transform .2s ease,border-color .2s ease,box-shadow .2s ease;
}
.sixsixsixsix-product:hover{
    transform:translateY(-4px);
    border-color:rgba(212,175,55,.65) !important;
    box-shadow:0 16px 35px rgba(0,0,0,.32);
}
.sixsixsixsix-product.is-hidden{display:none !important}

.sixsixsixsix-art{
    width:100%;
    height:310px;
    margin:0 !important;
    padding:16px !important;
    display:flex;
    align-items:center;
    justify-content:center;
    background:radial-gradient(circle at center,rgba(212,175,55,.10),transparent 65%);
    overflow:hidden;
}
.sixsixsixsix-art img{
    display:block;
    width:100%;
    height:100%;
    object-fit:cover;
    object-position:center;
    border:0 !important;
    border-radius:0 !important;
}
.sixsixsixsix-body{
    min-width:0;
    padding:20px 22px 24px !important;
    margin:0 !important;
    display:flex;
    flex-direction:column;
    flex:1;
}
.sixsixsixsix-body h3{
    min-height:50px;
    margin:0 0 8px !important;
    padding:0 !important;
    color:#fff !important;
    font-size:19px !important;
    line-height:1.3 !important;
    font-weight:800 !important;
    overflow-wrap:anywhere;
    word-break:normal;
    white-space:normal;
}
.sixsixsixsix-body p{
    margin:0 0 14px !important;
    padding:0 !important;
    color:#aaa !important;
    font-size:14px !important;
    line-height:1.45 !important;
}
.sixsixsixsix-body strong{
    display:block;
    margin:0 0 18px !important;
    padding:0 !important;
    color:var(--gold-light) !important;
    font-size:24px !important;
    line-height:1.2 !important;
}
.sixsixsixsix-button{
    display:flex !important;
    align-items:center;
    justify-content:center;
    width:100% !important;
    min-height:48px;
    margin:auto 0 0 !important;
    padding:13px 18px !important;
    border:0 !important;
    border-radius:999px !important;
    background:linear-gradient(180deg,#f4d35e,#d4af37) !important;
    color:#000 !important;
    font-size:15px !important;
    line-height:1.2 !important;
    font-weight:800 !important;
    text-align:center !important;
    text-decoration:none !important;
    white-space:normal;
}
.sixsixsixsix-button:hover{
    color:#000 !important;
    filter:brightness(1.08);
    transform:translateY(-1px);
}
.sixsixsixsix-empty{
    display:none;
    grid-column:1/-1;
    margin:0 !important;
    padding:50px 20px !important;
    color:#aaa !important;
    text-align:center;
}

/* Fallback bottle */
.s-bottle{
    position:relative;
    width:92px;
    height:220px;
    border-radius:14px 14px 10px 10px;
    background:linear-gradient(145deg,#fff,#d9d9d9);
    border:2px solid rgba(255,255,255,.8);
    display:flex;
    align-items:center;
    justify-content:center;
    color:#111;
    font-weight:800;
    box-shadow:0 20px 35px rgba(0,0,0,.25);
}
.s-bottle:before{
    content:"";
    position:absolute;
    top:-46px;
    width:76px;
    height:48px;
    border-radius:10px 10px 4px 4px;
    background:linear-gradient(90deg,#8d6400,#f4cc48,#8d6400);
    border:1px solid #c89f2a;
}
.s-bottle.tall{height:250px}
.s-bottle.tall:before{top:-50px;height:52px}

@media(max-width:1200px){
    .sixsixsixsix-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
    .sixsixsixsix-hero{min-height:470px}
}
@media(max-width:820px){
    .sixsixsixsix-section{padding:48px 18px 60px !important}
    .sixsixsixsix-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
    .sixsixsixsix-art{height:270px}
    .sixsixsixsix-body{padding:18px !important}
    .sixsixsixsix-body h3{font-size:17px !important;min-height:45px}
    .sixsixsixsix-filters{
        width:min(620px,100%);
        overflow-x:auto;
        justify-content:flex-start !important;
        scrollbar-width:none;
    }
    .sixsixsixsix-filters::-webkit-scrollbar{display:none}
    .sixsixsixsix-filters button{flex:0 0 140px}
    .sixsixsixsix-filter-divider{flex:0 0 1px}
    .sixsixsixsix-hero{min-height:400px;padding:55px 20px !important}
}
@media(max-width:520px){
    .sixsixsixsix-section{padding:40px 14px 52px !important}
    .sixsixsixsix-grid{grid-template-columns:1fr;gap:16px}
    .sixsixsixsix-art{height:300px}
    .sixsixsixsix-body{padding:20px !important}
    .sixsixsixsix-body h3{font-size:18px !important;min-height:0}
    .sixsixsixsix-hero{min-height:360px;padding:45px 18px !important}
    .sixsixsixsix-hero h1{font-size:38px !important}
    .sixsixsixsix-hero p{font-size:16px}
    .sixsixsixsix-filters{margin-bottom:30px !important}
    .sixsixsixsix-filters button{flex:0 0 125px;padding-left:12px !important;padding-right:12px !important}
}

/* If an Elementor/Astra wrapper adds a margin to the shortcode itself, cancel it. */
.elementor-widget-shortcode .sixsixsixsix-page,
.wp-block-shortcode .sixsixsixsix-page{
    margin-top:0 !important;
    margin-bottom:0 !important;
}

/* =========================================================
   TOP/BOTTOM GAP HARD RESET + PREMIUM USP STRIP
   ========================================================= */
html body:has(.sixsixsixsix-page),
body:has(.sixsixsixsix-page) .site-content,
body:has(.sixsixsixsix-page) .site-main,
body:has(.sixsixsixsix-page) .content-area,
body:has(.sixsixsixsix-page) .entry-content,
body:has(.sixsixsixsix-page) .elementor,
body:has(.sixsixsixsix-page) .elementor-section-wrap {
    margin-top:0 !important;
    margin-bottom:0 !important;
    padding-top:0 !important;
    padding-bottom:0 !important;
}

/* The shortcode's Elementor widget/section must not introduce a white divider or spacer. */
body:has(.sixsixsixsix-page) .elementor-widget-shortcode,
body:has(.sixsixsixsix-page) .elementor-widget-shortcode > .elementor-widget-container,
body:has(.sixsixsixsix-page) .elementor-element:has(.sixsixsixsix-page),
body:has(.sixsixsixsix-page) .elementor-element:has(.sixsixsixsix-page) > .elementor-container,
body:has(.sixsixsixsix-page) .elementor-element:has(.sixsixsixsix-page) > .elementor-widget-wrap {
    margin-top:0 !important;
    margin-bottom:0 !important;
    padding-top:0 !important;
    padding-bottom:0 !important;
    border-top:0 !important;
    border-bottom:0 !important;
    box-shadow:none !important;
}

/* Remove a common empty/divider Elementor section immediately before the shortcode. */
body:has(.sixsixsixsix-page) .elementor-element:has(+ .elementor-element .sixsixsixsix-page),
body:has(.sixsixsixsix-page) .elementor-element:has(+ .elementor-element > .elementor-container .sixsixsixsix-page),
body:has(.sixsixsixsix-page) .elementor-element:has(+ .elementor-element > .elementor-widget-wrap .sixsixsixsix-page) {
    min-height:0 !important;
    height:0 !important;
    margin:0 !important;
    padding:0 !important;
    border:0 !important;
    overflow:hidden !important;
}

/* Eliminate any pseudo-element/divider that can create the visible white bar. */
body:has(.sixsixsixsix-page) .elementor-element:has(.sixsixsixsix-page)::before,
body:has(.sixsixsixsix-page) .elementor-element:has(.sixsixsixsix-page)::after {
    display:none !important;
    content:none !important;
}

/* Plugin must begin immediately after the offer/header area. */
.sixsixsixsix-page {
    margin-top:0 !important;
    padding-top:0 !important;
}
.sixsixsixsix-hero {
    margin-top:0 !important;
    border-top:0 !important;
}

/* Premium USP strip */
.sixsixsixsix-usps {
    width:100% !important;
    margin:0 !important;
    padding:0 18px !important;
    background:#050505 !important;
    border:0 !important;
}
.sixsixsixsix-usps-inner {
    width:min(1320px,100%);
    margin:0 auto !important;
    padding:20px 0 !important;
    display:grid !important;
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:0;
    border-top:1px solid rgba(212,175,55,.28);
    border-bottom:1px solid rgba(212,175,55,.28);
}
.sixsixsixsix-usp {
    min-width:0;
    display:flex;
    align-items:center;
    justify-content:center;
    gap:12px;
    padding:4px 24px !important;
    text-align:left;
}
.sixsixsixsix-usp + .sixsixsixsix-usp {
    border-left:1px solid rgba(212,175,55,.24);
}
.sixsixsixsix-usp-icon {
    flex:0 0 38px;
    width:38px;
    height:38px;
    display:flex;
    align-items:center;
    justify-content:center;
    border:1px solid rgba(212,175,55,.75);
    border-radius:50%;
    background:rgba(212,175,55,.08);
    color:var(--gold-light);
    font-size:17px;
    line-height:1;
}
.sixsixsixsix-usp strong {
    display:block;
    margin:0 0 3px !important;
    color:#f4d35e !important;
    font-size:13px !important;
    line-height:1.25 !important;
    font-weight:800 !important;
    letter-spacing:.55px;
}
.sixsixsixsix-usp small {
    display:block;
    margin:0 !important;
    color:#aaa !important;
    font-size:12px !important;
    line-height:1.35 !important;
}

@media(max-width:820px){
    .sixsixsixsix-usps-inner {
        grid-template-columns:1fr;
        gap:0;
        padding:8px 0 !important;
    }
    .sixsixsixsix-usp {
        justify-content:flex-start;
        padding:12px 10px !important;
    }
    .sixsixsixsix-usp + .sixsixsixsix-usp {
        border-left:0;
        border-top:1px solid rgba(212,175,55,.18);
    }
}
