
.gas-shop{--gas-bg:#FAF7F0;--gas-card:#FFFDF8;--gas-green:#214F3C;--gas-text:#183D2E;--gas-muted:#6A6A61;--gas-max:1420px;--gas-cols:4;--gas-tablet-cols:3;--gas-mobile-cols:2;--gas-gap:18px;--gas-cover-height:360px;--gas-cover-radius:28px;--gas-cover-fit:contain;--gas-card-radius:22px;--gas-image-fit:cover;--gas-button-radius:999px;--gas-button-height:44px;background:var(--gas-bg);color:var(--gas-text);font-family:Manrope,Arial,sans-serif;width:100%}
.gas-shop *{box-sizing:border-box}
.gas-wrap{width:min(var(--gas-max),calc(100% - 40px));margin:0 auto;padding:34px 0 72px}
.gas-cover{display:grid;grid-template-columns:minmax(320px,.9fr) minmax(460px,1.25fr);gap:34px;align-items:center;margin-bottom:22px}
.gas-cover-copy{padding:28px 0 28px 8px}
.gas-cover-copy>span,.gas-kicker{display:block;font-size:10px;letter-spacing:.18em;font-weight:800;color:var(--gas-green)}
.gas-cover-copy h1{font-family:Prata,Georgia,serif;font-size:58px;line-height:1;margin:10px 0 16px;font-weight:400;letter-spacing:-.035em}
.gas-cover-copy p{max-width:590px;margin:0;color:var(--gas-muted);font-size:15px;line-height:1.65}
.gas-cover-media{height:var(--gas-cover-height);overflow:hidden;background:#f3ecdf;border-radius:var(--gas-cover-radius)}
.gas-cover-media img{display:block;width:100%;height:100%;object-fit:var(--gas-cover-fit);border-radius:var(--gas-cover-radius)}
.gas-toolbar{display:flex;justify-content:space-between;align-items:center;gap:18px;margin-bottom:20px;overflow:visible}
.gas-tabs{display:flex;gap:9px;flex-wrap:wrap;overflow:visible;padding:6px 4px 8px}
.gas-tab{flex:0 0 auto;display:inline-flex;align-items:center;gap:8px;padding:10px 14px;border:1px solid rgba(33,79,60,.18);border-radius:999px;background:transparent;color:var(--gas-text);font-size:11px;font-weight:800;text-decoration:none;cursor:pointer;transition:.28s ease}
.gas-tab img{width:18px;height:18px;object-fit:contain}
.gas-dot{width:8px;height:8px;border:1.5px solid currentColor;border-radius:50%}
.gas-tab.active{background:var(--gas-green);border-color:var(--gas-green);color:#fff;box-shadow:0 8px 20px rgba(33,79,60,.14)}
.gas-tab-motion .gas-tab:hover{transform:translateY(-3px) scale(1.025);border-color:var(--gas-green);box-shadow:0 10px 24px rgba(33,79,60,.12)}
.gas-sort .woocommerce-ordering{display:block!important;margin:0!important}
.gas-sort select{border:1px solid rgba(33,79,60,.18);background:#fffdf8;color:var(--gas-text);padding:10px 34px 10px 13px;border-radius:999px;font-size:11px}
.gas-grid{display:grid;grid-template-columns:repeat(var(--gas-cols),minmax(0,1fr));gap:var(--gas-gap)}
.gas-product{min-width:0;background:var(--gas-card);border:1px solid rgba(33,79,60,.075);border-radius:var(--gas-card-radius);overflow:hidden;box-shadow:0 7px 24px rgba(40,50,43,.045);transition:transform .36s cubic-bezier(.2,.7,.2,1),box-shadow .36s ease,border-color .36s}
.gas-card-motion .gas-product:hover{transform:translateY(-6px);box-shadow:0 20px 42px rgba(40,50,43,.105);border-color:rgba(33,79,60,.16)}
.gas-media{position:relative;aspect-ratio:1/1;background:#efe9de;overflow:hidden}
.gas-media>a,.gas-media>a img{display:block;width:100%;height:100%}
.gas-media>a img{object-fit:var(--gas-image-fit);transition:transform .55s cubic-bezier(.2,.7,.2,1)}
.gas-image-motion .gas-product:hover .gas-media>a img{transform:scale(1.035)}
.gas-fast{position:absolute;right:12px;top:12px;width:36px;height:36px;border:0;border-radius:50%;background:rgba(255,255,255,.94);display:grid;place-items:center;cursor:pointer;color:var(--gas-green);box-shadow:0 7px 18px rgba(0,0,0,.07);transition:.25s}
.gas-fast:hover{background:var(--gas-green);color:#fff;transform:scale(1.07)}
.gas-fast svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.6}
.gas-body{padding:15px}
.gas-title{font-family:Prata,Georgia,serif;color:var(--gas-text);font-size:17px;line-height:1.25;text-decoration:none;display:block}
.gas-price{margin-top:9px;font-size:14px;font-weight:800}
.gas-actions,.gas-qv-actions{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:8px;margin-top:14px}
.gas-add,.gas-buy,.gas-options{min-height:var(--gas-button-height);border-radius:var(--gas-button-radius);font-size:10px;font-weight:800;display:flex;align-items:center;justify-content:center;text-decoration:none;cursor:pointer;transition:.25s;width:100%;margin:0}
.gas-add{border:1px solid rgba(33,79,60,.30);background:transparent;color:var(--gas-green)}
.gas-buy{border:1px solid var(--gas-green);background:var(--gas-green);color:#fff}
.gas-options{grid-column:1/-1;border:1px solid rgba(33,79,60,.30);color:var(--gas-green)}
.gas-add:hover,.gas-buy:hover{transform:translateY(-2px);box-shadow:0 8px 18px rgba(33,79,60,.12)}
.gas-add.is-adding{opacity:.62;pointer-events:none}
.gas-add.is-added{background:var(--gas-green);border-color:var(--gas-green);color:#fff}
.gas-shop .added_to_cart,.gas-shop a.added_to_cart{display:none!important}
.gas-empty{display:none;text-align:center;padding:50px;color:var(--gas-muted)}
.gas-modal{position:fixed;inset:0;z-index:999999;display:none;align-items:center;justify-content:center;padding:24px;background:rgba(18,29,23,.40);backdrop-filter:blur(8px)}
.gas-modal.open{display:flex}
.gas-modal-box{position:relative;width:min(980px,94vw);max-height:90vh;overflow:hidden;background:#fffdf8;border-radius:28px;box-shadow:0 35px 90px rgba(0,0,0,.22)}
.gas-close{position:absolute;right:14px;top:14px;z-index:4;width:38px;height:38px;border:0;border-radius:50%;background:#fff;color:#1d4938;font-size:24px;cursor:pointer;box-shadow:0 6px 18px rgba(0,0,0,.08)}
.gas-qv-grid{display:grid;grid-template-columns:1.05fr .95fr;min-height:560px;align-items:stretch}
.gas-qv-image{min-height:560px;height:100%;background:#f2ecdf;overflow:hidden}
.gas-qv-image img{display:block;width:100%;height:100%;min-height:560px;object-fit:cover}
.gas-qv-copy{padding:48px 46px;display:flex;flex-direction:column;justify-content:center}
.gas-qv-copy h2{font-family:Prata,Georgia,serif;font-size:38px;font-weight:400;line-height:1.08;margin:12px 0}
.gas-qv-price{font-weight:800;font-size:17px;margin-bottom:16px}
.gas-qv-desc{color:var(--gas-muted);font-size:14px;line-height:1.65}
.gas-full-link{display:inline-block;margin-top:18px;color:var(--gas-green);font-weight:800;text-decoration:none;font-size:12px}
@media(max-width:1100px){
 .gas-cover{grid-template-columns:.8fr 1.2fr}
 .gas-cover-copy h1{font-size:48px}
 .gas-grid{grid-template-columns:repeat(var(--gas-tablet-cols),minmax(0,1fr))}
}
@media(max-width:767px){
 .gas-wrap{width:calc(100% - 20px);padding:18px 0 52px}
 .gas-cover{grid-template-columns:1fr;gap:14px}
 .gas-cover-copy{order:2;padding:8px 4px 18px}
 .gas-cover-media{order:1;height:auto;aspect-ratio:4/5}
 .gas-cover-media img{object-fit:contain}
 .gas-cover-copy h1{font-size:40px}
 .gas-cover-copy p{font-size:13px}
 .gas-toolbar{align-items:stretch;flex-direction:column}
 .gas-tabs{flex-wrap:nowrap;overflow-x:auto;overflow-y:hidden;padding-bottom:10px}
 .gas-sort,.gas-sort select{width:100%}
 .gas-grid{grid-template-columns:repeat(var(--gas-mobile-cols),minmax(0,1fr));gap:10px}
 .gas-body{padding:10px}
 .gas-title{font-size:14px}
 .gas-price{font-size:12px}
 .gas-actions{gap:6px}
 .gas-add,.gas-buy,.gas-options{min-height:38px;font-size:9px}
 .gas-fast{width:31px;height:31px;right:8px;top:8px}
 .gas-qv-grid{grid-template-columns:1fr;min-height:0}
 .gas-qv-image{min-height:0;height:auto;aspect-ratio:1/1}
 .gas-qv-image img{min-height:0;height:100%}
 .gas-qv-copy{padding:28px 22px}
 .gas-qv-copy h2{font-size:29px}
}


/* v1.1 — standalone page sizing fix
   Break the shop section out of the theme's narrow page-content container
   WITHOUT touching the theme header/footer. */
.gas-shop{
    width:100vw !important;
    max-width:100vw !important;
    margin-left:calc(50% - 50vw) !important;
    margin-right:calc(50% - 50vw) !important;
    position:relative;
}

.gas-wrap{
    width:min(var(--gas-max), calc(100% - 64px)) !important;
    max-width:var(--gas-max) !important;
    margin:0 auto !important;
    padding:42px 0 76px !important;
}

/* Hero gets proper luxury scale */
.gas-cover{
    grid-template-columns:minmax(380px,.9fr) minmax(620px,1.3fr) !important;
    gap:54px !important;
    align-items:center !important;
    margin-bottom:28px !important;
}
.gas-cover-copy{
    padding:36px 0 36px 8px !important;
}
.gas-cover-copy h1{
    font-size:clamp(54px,4.2vw,76px) !important;
    line-height:.98 !important;
}
.gas-cover-copy p{
    font-size:16px !important;
    max-width:620px !important;
}
.gas-cover-media{
    min-height:420px !important;
    height:max(var(--gas-cover-height),420px) !important;
}

/* Toolbar uses the full available width */
.gas-toolbar{
    gap:22px !important;
    margin-bottom:24px !important;
}
.gas-tabs{
    flex:1 1 auto !important;
}
.gas-sort{
    flex:0 0 auto !important;
}

/* Product cards should feel full-size, not mini cards */
.gas-grid{
    grid-template-columns:repeat(var(--gas-cols),minmax(0,1fr)) !important;
    gap:max(var(--gas-gap),20px) !important;
}
.gas-product{
    width:100% !important;
    min-width:0 !important;
}
.gas-media{
    aspect-ratio:1 / 1 !important;
}
.gas-body{
    padding:18px !important;
}
.gas-title{
    font-size:18px !important;
    min-height:46px;
}
.gas-price{
    font-size:14px !important;
    margin-top:10px !important;
}

/* Keep both product buttons on ONE LINE */
.gas-actions,
.gas-qv-actions{
    grid-template-columns:minmax(0,1fr) minmax(0,1fr) !important;
    gap:10px !important;
    align-items:stretch !important;
}
.gas-add,
.gas-buy,
.gas-options{
    min-height:max(var(--gas-button-height),46px) !important;
    padding:0 12px !important;
    white-space:nowrap !important;
    word-break:normal !important;
    line-height:1 !important;
    font-size:10px !important;
}
.gas-add span,
.gas-buy span{
    white-space:nowrap !important;
}

/* Larger fast-view button */
.gas-fast{
    width:40px !important;
    height:40px !important;
}

/* Tablet */
@media(max-width:1100px){
    .gas-wrap{
        width:calc(100% - 36px) !important;
    }
    .gas-cover{
        grid-template-columns:minmax(300px,.9fr) minmax(460px,1.15fr) !important;
        gap:30px !important;
    }
    .gas-cover-media{
        min-height:360px !important;
        height:max(var(--gas-cover-height),360px) !important;
    }
    .gas-grid{
        grid-template-columns:repeat(var(--gas-tablet-cols),minmax(0,1fr)) !important;
        gap:16px !important;
    }
}

/* Mobile */
@media(max-width:767px){
    .gas-shop{
        width:100% !important;
        max-width:100% !important;
        margin-left:0 !important;
        margin-right:0 !important;
    }
    .gas-wrap{
        width:calc(100% - 20px) !important;
        padding:18px 0 52px !important;
    }
    .gas-cover{
        grid-template-columns:1fr !important;
        gap:14px !important;
    }
    .gas-cover-media{
        min-height:0 !important;
        height:auto !important;
        aspect-ratio:4/5 !important;
    }
    .gas-cover-copy h1{
        font-size:42px !important;
    }
    .gas-grid{
        grid-template-columns:repeat(var(--gas-mobile-cols),minmax(0,1fr)) !important;
        gap:10px !important;
    }
    .gas-body{
        padding:10px !important;
    }
    .gas-title{
        font-size:14px !important;
        min-height:36px;
    }
    .gas-actions{
        gap:6px !important;
    }
    .gas-add,
    .gas-buy,
    .gas-options{
        min-height:38px !important;
        padding:0 7px !important;
        font-size:8.5px !important;
        white-space:nowrap !important;
    }
}


/* Hide the normal WordPress page title on the standalone GLOWIE shop page only. */
body.glowie-auto-shop-page .entry-title,
body.glowie-auto-shop-page .wp-block-post-title,
body.glowie-auto-shop-page .page-title,
body.glowie-auto-shop-page .entry-header,
body.glowie-auto-shop-page main > header,
body.glowie-auto-shop-page .wp-block-group:has(> .wp-block-post-title){
    display:none !important;
}


/* v1.2.2 — mobile hero cover fix */
@media(max-width:767px){
    .gas-cover-media{
        width:100% !important;
        height:auto !important;
        min-height:0 !important;
        aspect-ratio:auto !important;
        padding:0 !important;
        margin:0 !important;
        overflow:hidden !important;
        background:transparent !important;
        border-radius:var(--gas-cover-radius) !important;
    }

    .gas-cover-media img{
        display:block !important;
        width:100% !important;
        height:auto !important;
        max-width:100% !important;
        object-fit:contain !important;
        object-position:center center !important;
        margin:0 !important;
        padding:0 !important;
        border-radius:var(--gas-cover-radius) !important;
    }

    .gas-cover{
        align-items:start !important;
    }
}


/* v1.2.3 — mobile tabs grid: 3 x 2, no slider */
@media(max-width:767px){
    .gas-tabs{
        display:grid !important;
        grid-template-columns:repeat(3,minmax(0,1fr)) !important;
        gap:8px !important;
        width:100% !important;
        overflow:visible !important;
        padding:4px 0 8px !important;
    }

    .gas-tab{
        width:100% !important;
        min-width:0 !important;
        min-height:42px !important;
        padding:8px 6px !important;
        justify-content:center !important;
        text-align:center !important;
        white-space:normal !important;
        line-height:1.15 !important;
        font-size:9px !important;
        border-radius:999px !important;
    }

    .gas-tab img{
        width:14px !important;
        height:14px !important;
        flex:0 0 14px !important;
    }

    .gas-dot{
        width:6px !important;
        height:6px !important;
        flex:0 0 6px !important;
    }

    .gas-toolbar{
        overflow:visible !important;
    }
}


/* v1.2.4 — desktop/tablet cover: full image, no blank bands, rounded corners */
@media(min-width:768px){
    .gas-cover-media{
        width:100% !important;
        height:auto !important;
        min-height:0 !important;
        aspect-ratio:auto !important;
        padding:0 !important;
        margin:0 !important;
        overflow:hidden !important;
        background:transparent !important;
        border-radius:var(--gas-cover-radius) !important;
    }

    .gas-cover-media img{
        display:block !important;
        width:100% !important;
        height:auto !important;
        max-width:100% !important;
        object-fit:contain !important;
        object-position:center center !important;
        margin:0 !important;
        padding:0 !important;
        border-radius:var(--gas-cover-radius) !important;
    }

    .gas-cover{
        align-items:center !important;
    }
}


/* GLOWIE Collections integration — preserve exact Shop design */
body.glowie-collection-shop-page .entry-title,
body.glowie-collection-shop-page .wp-block-post-title,
body.glowie-collection-shop-page .page-title,
body.glowie-collection-shop-page .entry-header,
body.glowie-collection-shop-page main > header,
body.glowie-collection-shop-page .wp-block-group:has(> .wp-block-post-title){display:none!important}


/* =========================================================
   v1.0.2 — SMALLER COLLECTION HERO ONLY
   Everything else remains identical to v1.0.1 exact-shop.
   ========================================================= */

@media(min-width:1025px){
  .gas-hero{
    min-height:0 !important;
    padding-top:clamp(28px,3vw,46px) !important;
    padding-bottom:clamp(24px,2.8vw,42px) !important;
    gap:clamp(30px,3vw,48px) !important;
    align-items:center !important;
  }

  .gas-hero-copy{
    padding-top:0 !important;
    padding-bottom:0 !important;
  }

  .gas-hero-title{
    font-size:clamp(52px,4.6vw,72px) !important;
    line-height:.96 !important;
    margin-bottom:14px !important;
  }

  .gas-hero-subtitle,
  .gas-hero-copy p{
    font-size:15px !important;
    line-height:1.55 !important;
    max-width:540px !important;
  }

  .gas-hero-media{
    height:320px !important;
    min-height:0 !important;
    max-height:320px !important;
    border-radius:24px !important;
  }

  .gas-hero-media img{
    width:100% !important;
    height:100% !important;
    object-fit:cover !important;
    display:block !important;
  }
}

@media(min-width:768px) and (max-width:1024px){
  .gas-hero{
    min-height:0 !important;
    padding-top:28px !important;
    padding-bottom:28px !important;
    gap:26px !important;
  }

  .gas-hero-title{
    font-size:52px !important;
  }

  .gas-hero-media{
    height:300px !important;
    min-height:0 !important;
    max-height:300px !important;
  }
}

@media(max-width:767px){
  .gas-hero{
    min-height:0 !important;
    padding-top:20px !important;
    padding-bottom:20px !important;
    gap:16px !important;
  }

  .gas-hero-title{
    font-size:42px !important;
    line-height:.98 !important;
  }

  .gas-hero-media{
    height:235px !important;
    min-height:0 !important;
    max-height:235px !important;
  }
}
