.gd-footer-shipping-policy {
    margin-top: 6px;
    margin-bottom: 6px;
    text-align: center;
}

.gd-footer-shipping-policy a.gd-shipping-link {
    font-family: "Optimus Princeps", serif;
    font-size: 24px;
    text-transform: lowercase;
    color: #c4a46a !important;
    opacity: 0.8;
    letter-spacing: 0.4px;
    text-decoration: none;
    transition: 0.25s ease;
}

.gd-footer-shipping-policy a.gd-shipping-link:hover {
    color: #d8bb7a !important;
    text-decoration: underline !important;
    opacity: 1;
}

/* Remove cart icon entirely on mobile */
@media (max-width: 768px) {

    .wda-header-cart,
    .header-cart,
    .woocommerce-cart-link,
    .menu-item-cart,
    .wda-mobile-header .header-cart {
        display: none !important;
    }
}
/* ============================================================
   LAYOUT: Grimdark Button Wrapper (.gd-btn-wrap)
   Purpose : Lets you choose alignment per instance:
             - .gd-btn-wrap--left
             - .gd-btn-wrap--center
             - .gd-btn-wrap--right
   Default : left
   ============================================================ */

.gd-btn-wrap{
  width: 100%;
  display: flex;
  align-items: center;

  /* DEFAULT alignment (left) */
  justify-content: flex-start;
}

/* per-instance alignment modifiers */
.gd-btn-wrap--left{  justify-content: flex-start; }
.gd-btn-wrap--center{justify-content: center; }
.gd-btn-wrap--right{ justify-content: flex-end; }


/* ============================================================
   COMPONENT: Grimdark Image Button (Single Image Version)
   Purpose : Image-only at rest, soft glow on hover,
             BIG centered text, no underline
   ============================================================ */

.gd-btn{
  /* IMAGE SOURCE */
  --btn-image: url("https://grimdarkcompendium.com/wp-content/uploads/2026/01/button.png");

  display: inline-flex;
  align-items: center;
  justify-content: center;

  /* Match image display size */
  width: 280px;
  height: 70px;

  /* TYPOGRAPHY (BIGGER + MORE PRESENCE) */
  font-family: "Cinzel","Trajan Pro",serif;
  font-size: 26px;
  letter-spacing: 5px;
  text-transform: uppercase;

  color: #f5dfb4;

  /* FORCE REMOVE UNDERLINE (theme override) */
  text-decoration: none !important;
  border-bottom: none !important;

  cursor: pointer;
  user-select: none;

  position: relative;
  overflow: hidden;

  /* BUTTON IMAGE ONLY */
  background-image: var(--btn-image);
  background-repeat: no-repeat;
  background-position: center;
  background-size: 100% 100%;

  box-shadow: 0 10px 18px rgba(0,0,0,0.45);
}


/* ============================================================
   EFFECT LAYER: Inner glow (IDLE STATE)
   Purpose : Hidden by default, fades in on hover
   ============================================================ */

.gd-btn::before{
  content: "";
  position: absolute;
  inset: 6px;
  pointer-events: none;

  opacity: 0;

  transition:
    opacity 0.35s ease,
    box-shadow 0.35s ease,
    background 0.35s ease;
}


/* ============================================================
   HOVER STATE: SOFT, STRONG INNER GLOW
   ============================================================ */

.gd-btn:hover::before{
  opacity: 1;

  box-shadow:
    inset 0 0 28px rgba(255, 215, 150, 0.55),
    inset 0 0 14px rgba(255, 200, 120, 0.40),
    inset 0 0 4px rgba(255, 255, 255, 0.28);

  background:
    radial-gradient(130% 150% at 50% 30%,
      rgba(255,255,255,0.18) 0%,
      rgba(0,0,0,0.00) 45%,
      rgba(0,0,0,0.40) 100%);
}


/* ============================================================
   CONTENT: Button Label
   ============================================================ */

.gd-btn__label{
  position: relative;
  z-index: 1;
  line-height: 1;

  text-shadow:
    0 3px 0 rgba(0,0,0,0.9),
    0 0 22px rgba(255, 215, 150, 0.45);
}


/* ============================================================
   SAFETY NET: Remove icons / arrows / pseudo-icons
   ============================================================ */

.gd-btn svg,
.gd-btn i,
.gd-btn .icon,
.gd-btn [class*="icon"],
.gd-btn [class*="external"],
.gd-btn [aria-hidden="true"]{
  display: none !important;
}

.gd-btn::after{
  content: none !important;
}


/* ============================================================
   INTERACTIONS
   ============================================================ */

.gd-btn:hover{
  filter: brightness(1.06);
}

.gd-btn:active{
  transform: translateY(1px);
}

.gd-btn:focus-visible{
  outline: 2px solid rgba(255, 215, 150, 0.45);
  outline-offset: 2px;
}

/*
==================================================================================
Return Policy
*/
.gd-header-policy a.gd-refund-link,
.gd-footer-policy a.gd-refund-link,
a.gd-refund-link {
    font-family: "Optimus Princeps", serif;
    font-size: 13px;
    text-transform: lowercase;
    color: #c4a46a !important;
    opacity: 0.8;
    letter-spacing: 0.4px;
    text-decoration: none;
    transition: 0.25s ease;
}

.gd-header-policy a.gd-refund-link:hover,
.gd-footer-policy a.gd-refund-link:hover,
a.gd-refund-link:hover {
    color: #d8bb7a !important;
    text-decoration: underline !important;
    opacity: 1;
}

.gd-header-policy,
.gd-footer-policy {
    margin-top: 6px;
    margin-bottom: 6px;
    text-align: center;
}

/* =========================================================
   00) WooCommerce: variation selects (readable, no iOS zoom)
   ========================================================= */
.woocommerce div.product form.cart .variations select{
  width: 100%;
  font-size: 16px;                 /* prevents iOS zoom on focus */
  background: #fff !important;
  color: #000 !important;
  border: 1px solid #ccc;
  padding: 6px 10px;
  border-radius: 4px;
  -webkit-appearance: none;
  appearance: none;
}
.woocommerce div.product form.cart .variations select:hover,
.woocommerce div.product form.cart .variations select:focus{
  background: #f9f9f9 !important;
  color: #000 !important;
  border-color: #666;
}

/* =========================================================
   01) Brand fonts
   ========================================================= */
/* H1: Optimus Princeps */
@font-face{
  font-family: "Optimus Princeps";
  src:
    url("/wp-content/fonts/optimusprinceps/optimusprinceps-webfont.woff2") format("woff2"),
    url("/wp-content/fonts/optimusprinceps/optimusprinceps-webfont.woff")  format("woff");
  font-weight: 400; font-style: normal; font-display: swap;
}
/* H2: Wrong Time Wrong Place (aka “Living Hell”) */
@font-face{
  font-family: "Wrong Time Wrong Place";
  src:
    url("/wp-content/fonts/wrong_time_wrong_place/wrong_time_wrong_place-webfont.woff2") format("woff2"),
    url("/wp-content/fonts/wrong_time_wrong_place/wrong_time_wrong_place-webfont.woff")  format("woff");
  font-weight: 400; font-style: normal; font-display: swap;
}

/* =========================================================
   02) Global variables & tiny utilities
   ========================================================= */
:root{
  /* layout */
  --rail: clamp(24px, 4vw, 64px);
  --gap:  clamp(14px, 2vw, 24px);

  /* card chrome */
  --card-bg: rgba(15,15,15,.40);
  --card-bdr: rgba(255,255,255,.18);
  --card-radius: 12px;
  --card-hover: #c3ae82;

  /* brand stacks */
  --gdc-h1-font: "Optimus Princeps", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --gdc-h2-font: "Wrong Time Wrong Place", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
}

ul.wp-block-post-template{ list-style:none; margin:0; padding:0; }

/* =========================================================
   03) Brand titles (fonts + lowercase)
   ========================================================= */
/* Primary titles (post/page/product singles) */
.single .entry-title,
.page .entry-title,
.single .wp-block-post-title,
.page .wp-block-post-title,
.woocommerce div.product .product_title,
.product_title.entry-title,
h1.entry-title,
.page-title,
.page-header .page-title,
.article-title,
.post-title,
.post__title{
  font-family: var(--gdc-h1-font) !important;
  font-weight: 400; letter-spacing:.01em;
  line-height: 1.1;
  text-transform: lowercase !important;
  font-variant-caps: normal;
  font-feature-settings: "smcp" 0, "c2sc" 0;
}

/* Card/list titles (archives, loops, grids) */
.wp-block-post-title,
.wp-block-post-title a,
.blog .entry-title,
.archive .entry-title,
.search .entry-title,
.woocommerce ul.products li.product .woocommerce-loop-product__title,
.wc-block-grid__product .wc-block-grid__product-title{
  font-family: var(--gdc-h1-font) !important;
  font-weight: 400; letter-spacing:.01em;
  line-height: 1.1;
  text-transform: lowercase !important;
}

/* Secondary headings (explicit H2 look) */
h2, .is-style-gdc-h2, .wp-block-heading.is-style-gdc-h2{
  font-family: var(--gdc-h2-font);
  font-weight: 400; letter-spacing:.01em;
  line-height: 1.15;
  text-transform: lowercase !important;
  font-variant-caps: normal;
  font-feature-settings: "smcp" 0, "c2sc" 0;
}

/* Ensure links inherit lowercase & family */
.entry-title a,
.wp-block-post-title a,
.woocommerce-loop-product__title a,
.wc-block-grid__product-title a,
h1 a, h2 a{ text-transform: inherit !important; font-family: inherit !important; }

/* =========================================================
   04) FEATURED NEWS (Cover: .gc-featured)
   (values preserved exactly)
   ========================================================= */
.gc-featured{ --gap: clamp(12px, 1.4vw, 20px); --split-left: 65%; }

/* Full-bleed band with inner rails */
.gc-featured.alignfull{ margin-left:calc(50% - 50vw); margin-right:calc(50% - 50vw); width:100vw; }
.gc-featured .wp-block-cover__inner-container{ max-width:none; padding:clamp(24px, 5vw, 64px) var(--rail); }

/* Section heading aligned to rails */
.gc-featured .wp-block-heading{ margin:0 0 14px; padding:0 var(--rail); }

/* Two-column split, gap controlled */
.gc-featuredGrid.wp-block-columns{
  display:grid !important;
  grid-template-columns: minmax(0,var(--split-left)) minmax(0,calc(100% - var(--split-left)));
  column-gap:var(--gap) !important; row-gap:var(--gap) !important;
  padding:0 var(--rail);
}
.gc-featuredGrid.wp-block-columns > .wp-block-column{ margin:0 !important; padding:0 !important; }
.gc-featuredGrid.is-layout-flex{ gap:0 !important; } /* safety */

/* Left (hero) */
.gc-left{ display:grid; gap:10px; grid-template-rows:auto auto; }
.gc-hero-img .wp-block-post-featured-image{
  margin:0 !important; line-height:0;
  background:var(--card-bg); border:1px solid var(--card-bdr);
  border-radius:var(--card-radius); overflow:hidden;
}
@media (min-width:980px){ .gc-hero-img .wp-block-post-featured-image{ aspect-ratio:16/9; } }
.gc-hero-img .wp-block-post-featured-image img{ width:100%; height:100%; object-fit:cover; display:block; }
.gc-hero-img .wp-block-post-featured-image:hover{ border-color:var(--card-hover); box-shadow:0 10px 30px rgba(0,0,0,.35); }
.gc-meta-below{ display:flex; flex-direction:column; gap:6px; }
.gc-meta-below .wp-block-post-title{ margin:0; line-height:1.2; }
.gc-meta-below .wp-block-post-date{ margin:0; font-size:12px; color:#a7a7a7; }

/* Right (3-up column; text, text, image) */
.gc-right{ display:block; }
.gc-right .wp-block-post-template{
  display:grid !important; grid-template-columns:1fr; row-gap:var(--gap) !important;
  margin:0 !important; padding:0 !important; list-style:none;
}
.gc-right .wp-block-post-template > li{ margin:0 !important; }

/* #1 and #2: text cards */
.gc-right .wp-block-post-template > li:nth-child(1),
.gc-right .wp-block-post-template > li:nth-child(2){
  background:var(--card-bg); border:1px solid var(--card-bdr);
  border-radius:var(--card-radius);
  padding:clamp(12px, 1.6vw, 20px);
  box-shadow:0 0 0 1px rgba(255,255,255,.03) inset;
  transition:border-color .15s ease, box-shadow .15s ease;
}
.gc-right .wp-block-post-template > li:nth-child(1):hover,
.gc-right .wp-block-post-template > li:nth-child(2):hover{
  border-color:var(--card-hover); box-shadow:0 10px 30px rgba(0,0,0,.35);
}
/* hide their images */
.gc-right .wp-block-post-template > li:nth-child(1) .wp-block-post-featured-image,
.gc-right .wp-block-post-template > li:nth-child(2) .wp-block-post-featured-image{ display:none !important; }

/* #3: image card */
.gc-right .wp-block-post-template > li:nth-child(3){ padding:0; background:transparent; border:0; }
.gc-right .wp-block-post-template > li:nth-child(3) .wp-block-post-featured-image{
  margin:0 !important; line-height:0;
  background:var(--card-bg); border:1px solid var(--card-bdr);
  border-radius:var(--card-radius); overflow:hidden;
  aspect-ratio:16/9;
  transition:border-color .15s ease, box-shadow .15s ease;
}
.gc-right .wp-block-post-template > li:nth-child(3) .wp-block-post-featured-image img{ width:100%; height:100%; object-fit:cover; display:block; }
.gc-right .wp-block-post-template > li:nth-child(3) .wp-block-post-featured-image:hover{ border-color:var(--card-hover); box-shadow:0 10px 30px rgba(0,0,0,.35); }
.gc-right .wp-block-post-template > li:nth-child(3) .gc-meta-below{ margin-top:8px; }

/* Featured links */
.gc-featured .wp-block-post-title a{ color:#fff; text-decoration:none; }
.gc-featured .wp-block-post-title a:hover{ color:#fff; text-decoration:underline; text-underline-offset:2px; }

/* Responsive: stack Featured on mobile (keep gaps as-is) */
@media (max-width:980px){
  .gc-featuredGrid.wp-block-columns{
    grid-template-columns:1fr !important;
    column-gap:0 !important; row-gap:var(--gap) !important;
    padding-left:var(--rail); padding-right:var(--rail);
  }
}

/* =========================================================
   05) LATEST NEWS (4×2 grid)
   (kept exactly; unified image height + no crop)
   ========================================================= */
.gc-latest.alignfull{ margin-left:calc(50% - 50vw); margin-right:calc(50% - 50vw); width:100vw; }
.gc-latest .wp-block-cover__inner-container{ max-width:none; padding:clamp(24px, 5vw, 64px) var(--rail); }
.gc-latest .wp-block-heading{ margin:0 0 14px; padding:0 var(--rail); }

.gc-latest ul.wp-block-post-template.gc-latestGrid{
  display:grid !important;
  grid-template-columns: repeat(4, minmax(0,1fr));
  gap:var(--gap);
  padding:0 var(--rail); margin:0; list-style:none;
}
.gc-latest ul.wp-block-post-template.gc-latestGrid > li{ margin:0; }

.ln-card{ display:flex; flex-direction:column; gap:10px; }

/* unified image box */
.gc-latest{ --ln-aspect: 16/9; }         /* helpers: .gc-latest--fourthree / --square if you need */
.gc-latest--fourthree{ --ln-aspect: 4/3; }
.gc-latest--square{    --ln-aspect: 1/1; }

.ln-card__img{
  background:var(--card-bg); border:1px solid var(--card-bdr);
  border-radius:var(--card-radius); overflow:hidden; line-height:0;
  transition:border-color .15s ease, box-shadow .15s ease;
}
.ln-card__img .wp-block-post-featured-image{
  margin:0 !important; aspect-ratio:var(--ln-aspect) !important; width:100%;
}
.ln-card__img .wp-block-post-featured-image img{
  width:100%; height:100%;
  object-fit:contain !important;          /* show full image; no crop */
  object-position:center center; display:block;
}
.ln-card__img:hover{ border-color:var(--card-hover); box-shadow:0 10px 30px rgba(0,0,0,.35); }

.ln-card__meta{ display:flex; flex-direction:column; gap:6px; }
.ln-card__meta .wp-block-post-title{ margin:0; line-height:1.25; }
.ln-card__meta .wp-block-post-date{ margin:0; font-size:12px; color:#a7a7a7; }

.gc-latest .wp-block-post-title a{ color:#fff; text-decoration:none; }
.gc-latest .wp-block-post-title a:hover{ color:#fff; text-decoration:underline; text-underline-offset:2px; }

/* Latest responsive columns */
@media (max-width:1100px){ .gc-latest ul.wp-block-post-template.gc-latestGrid{ grid-template-columns:repeat(3, minmax(0,1fr)); } }
@media (max-width:800px){  .gc-latest ul.wp-block-post-template.gc-latestGrid{ grid-template-columns:repeat(2, minmax(0,1fr)); } }
@media (max-width:520px){  .gc-latest ul.wp-block-post-template.gc-latestGrid{ grid-template-columns:1fr; } }

/* =========================================================
   06) Mobile typography polish (no changes to gaps/images)
   ========================================================= */
@media (max-width:680px){
  html{ -webkit-text-size-adjust:100%; }
  body{ line-height:1.6; }

  /* scale titles nicely */
  .single .entry-title,
  .page .entry-title,
  .single .wp-block-post-title,
  .page .wp-block-post-title,
  .woocommerce div.product .product_title,
  .product_title.entry-title{
    font-size: clamp(22px, 6.2vw, 28px) !important;
    line-height: 1.15;
  }
  .wp-block-post-title,
  .gc-featured .wp-block-post-title,
  .gc-latest .wp-block-post-title,
  .woocommerce ul.products li.product .woocommerce-loop-product__title,
  .wc-block-grid__product .wc-block-grid__product-title{
    font-size: clamp(16px, 4.6vw, 20px) !important;
    line-height: 1.2;
  }
  h2, .is-style-gdc-h2, .wp-block-heading.is-style-gdc-h2{
    font-size: clamp(18px, 5.2vw, 24px) !important;
    line-height: 1.2;
  }

  /* safe wrapping */
  .wp-block-post-title,
  .wp-block-heading,
  .entry-title{ overflow-wrap:anywhere; hyphens:auto; }

  /* media overflow safety */
  .wp-block-image img,
  .wp-block-embed iframe,
  .wp-block-embed object{ max-width:100%; height:auto; }
}

/* Extra-small phones */
@media (max-width:480px){
  .single .entry-title,
  .page .entry-title,
  .single .wp-block-post-title,
  .page .wp-block-post-title,
  .woocommerce div.product .product_title,
  .product_title.entry-title{
    font-size: clamp(20px, 7vw, 24px) !important;
  }
  .wp-block-post-title,
  .gc-featured .wp-block-post-title,
  .gc-latest .wp-block-post-title,
  .woocommerce ul.products li.product .woocommerce-loop-product__title,
  .wc-block-grid__product .wc-block-grid__product-title{
    font-size: clamp(15px, 4.8vw, 18px) !important;
  }
  h2, .is-style-gdc-h2, .wp-block-heading.is-style-gdc-h2{
    font-size: clamp(17px, 5.8vw, 22px) !important;
  }
}
/* Top bar becomes a slim footer strip on phones */
@media (max-width:680px){
  .gdc-in-footer{
    padding: 10px var(--rail);
    border-top: 1px solid rgba(255,255,255,.12);
    background: transparent; /* keep your site bg */
  }
  .gdc-in-footer .wpdevart-top-header-section{
    display:flex !important;
    align-items:center !important;
    justify-content:center !important;
    flex-wrap:wrap !important;
    gap:10px !important;
    min-height:auto !important;
    line-height:1.2 !important;
  }
  .gdc-in-footer .wpdevart-top-header-left,
  .gdc-in-footer .wpdevart-top-header-right{
    display:flex !important;
    align-items:center !important;
    gap:12px !important;
    flex-wrap:wrap !important;
  }
  .gdc-in-footer .wpdevart-phone-email-text{ font-size:13px !important; }
  .gdc-in-footer .top-header-icons,
  .gdc-in-footer .wpdevart-social-icons a svg{
    width:18px !important; height:18px !important;
  }

  /* If space is tight on very small phones, drop the address */
  @media (max-width:420px){
    .gdc-in-footer .wpdevart-top-header-address{ display:none !important; }
  }
}
/* Full-bleed ONLY for the top Cover with anchor #gcTopBand */
#gcTopBand.wp-block-cover{
  margin-left: calc(50% - 50vw) !important;
  margin-right: calc(50% - 50vw) !important;
  width: 100vw !important;
  max-width: 100vw !important;
  border-radius: 0; /* no corner peeking */
}

/* Match your other bands’ inner rails (doesn’t change gaps/images) */
#gcTopBand .wp-block-cover__inner-container{
  max-width: none !important;
  padding-left: var(--rail);
  padding-right: var(--rail);
}

/* If it’s the first block, remove any stray top gap so it kisses the header */
.entry-content > #gcTopBand:first-child,
.wp-block-post-content > #gcTopBand:first-child{
  margin-top: 0 !important;
}
/* ===========================
   FEATURED — hard gap between columns
   (only affects .gc-featured)
   =========================== */

/* 1) Define the gap once */
.gc-featured{ --gdc-col-gap: clamp(16px, 1.8vw, 28px); }

/* 2) Force the Columns block to a real grid and use our gap */
.gc-featured .gc-featuredGrid.wp-block-columns{
  display: grid !important;
  grid-template-columns: minmax(0, 64%) minmax(0, 36%);
  column-gap: var(--gdc-col-gap) !important;
  row-gap: var(--gdc-col-gap) !important;
  padding: 0 var(--rail);
}

/* 3) Kill theme-injected margins/padding that collapse the gap */
.gc-featured .gc-featuredGrid.wp-block-columns > .wp-block-column{
  margin: 0 !important;
  padding: 0 !important;
}

/* 4) Safety: if the theme flips it to flex, still keep the gap */
.gc-featured .gc-featuredGrid.is-layout-flex{ gap: var(--gdc-col-gap) !important; }

/* 5) Right column’s internal list keeps even spacing too */
.gc-featured .gc-right .wp-block-post-template{
  display: grid !important;
  grid-template-columns: 1fr;
  row-gap: var(--gdc-col-gap) !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* 6) Mobile: stack with the same vertical spacing */
@media (max-width: 980px){
  .gc-featured .gc-featuredGrid.wp-block-columns{
    grid-template-columns: 1fr !important;
    column-gap: 0 !important;
    row-gap: var(--gdc-col-gap) !important;
  }
}
/* RIGHT COLUMN (Featured): show images on cards 1–2 and use them as a dimmed background */
.gc-right .wp-block-post-template > li:nth-child(-n+2){
  position: relative;
  isolation: isolate;
  overflow: hidden;
}

/* Undo earlier "display:none" and stretch the featured image to cover the card */
.gc-right .wp-block-post-template > li:nth-child(-n+2) figure.wp-block-post-featured-image{
  display: block !important;
  position: absolute;
  inset: 0;
  margin: 0 !important;
  z-index: 0;
  pointer-events: none;
}

/* Make the image fill & crop to the card (background-like) */
.gc-right .wp-block-post-template > li:nth-child(-n+2) figure.wp-block-post-featured-image img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Dim overlay so text is prominent */
.gc-right .wp-block-post-template > li:nth-child(-n+2)::after{
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(180deg, rgba(0,0,0,.60), rgba(0,0,0,.90));
}

/* Lift the text above the image+overlay and improve readability */
.gc-right .wp-block-post-template > li:nth-child(-n+2) .gc-meta-below,
.gc-right .wp-block-post-template > li:nth-child(-n+2) .wp-block-post-title,
.gc-right .wp-block-post-template > li:nth-child(-n+2) .wp-block-post-date{
  position: relative;
  z-index: 2;
  color: #fff;
  text-shadow: 0 2px 8px rgba(0,0,0,1.99);
}

/* Optional: set a sensible minimum height so the image/background has room */
.gc-right .wp-block-post-template > li:nth-child(-n+2){
  min-height: 140px;
}
@media (min-width: 980px){
  .gc-right .wp-block-post-template > li:nth-child(-n+2){ min-height: 170px; }
}
/* RIGHT column cards 1–2: keep them compact again */
.gc-right .wp-block-post-template > li:nth-child(-n+2){
  min-height: 0 !important;
  padding-top: clamp(10px, 1.2vw, 16px);
  padding-bottom: clamp(10px, 1.2vw, 16px);
}

/* Prevent long titles making the card tall */
.gc-right .wp-block-post-template > li:nth-child(-n+2) .wp-block-post-title{
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  max-height: calc(1.25em * 2);
  line-height: 1.25;
}

/* ============================================
   PER-SECTION Y CONTROLS (right column cards 1 & 2)
   - NEWS (posts)  → .gc-featured--news
   - VI (products) → .gc-featured--vi
   ============================================ */

/* ---------- NEWS (posts) ---------- */
.gc-featured--news{
  --news-y: 15%;
  --news-y-1: var(--news-y);
  --news-y-2: var(--news-y);
}

/* Card 1 */
.gc-featured--news .gc-right .wp-block-post-template > li:nth-child(1)
  .wp-block-post-featured-image img{
  width:100%; height:100%;
  object-fit: cover;
  object-position: 5% var(--news-y-1);
  display:block;
}

/* Card 2 */
.gc-featured--news .gc-right .wp-block-post-template > li:nth-child(2)
  .wp-block-post-featured-image img{
  width:100%; height:100%;
  object-fit: cover;
  object-position: 50% var(--news-y-2);
  display:block;
}


/* ---------- VI (products) ---------- */
.gc-featured--vi{
  --vi-y: 40%;
  --vi-y-1: var(--vi-y);
  --vi-y-2: var(--vi-y);
}

/* Card 1 — cover Woo product image in all common markups */
.gc-featured--vi .gc-right :is(.wp-block-post-template, ul.wc-block-grid__products, ul.products)
  > li:nth-child(1)
  :is(.wp-block-post-featured-image img,
      .wc-block-grid__product-image img,
      .woocommerce-LoopProduct-link img,
      img.wp-post-image){
  width:100%; height:100%;
  object-fit: cover;
  object-position: 50% var(--vi-y-1);
  display:block;
}

/* Card 2 */
.gc-featured--vi .gc-right :is(.wp-block-post-template, ul.wc-block-grid__products, ul.products)
  > li:nth-child(2)
  :is(.wp-block-post-featured-image img,
      .wc-block-grid__product-image img,
      .woocommerce-LoopProduct-link img,
      img.wp-post-image){
  width:100%; height:100%;
  object-fit: cover;
  object-position: 50% var(--vi-y-2);
  display:block;
}


/* ---------- Optional per-card utilities ---------- */
.gc-featured--news .y-top,
.gc-featured--vi   .y-top    { --y: 0%;   }
.gc-featured--news .y-20,
.gc-featured--vi   .y-20     { --y: 20%;  }
.gc-featured--news .y-30,
.gc-featured--vi   .y-30     { --y: 30%;  }
.gc-featured--news .y-40,
.gc-featured--vi   .y-40     { --y: 40%;  }
.gc-featured--news .y-center,
.gc-featured--vi   .y-center { --y: 50%;  }
.gc-featured--news .y-60,
.gc-featured--vi   .y-60     { --y: 60%;  }
.gc-featured--news .y-70,
.gc-featured--vi   .y-70     { --y: 70%;  }
.gc-featured--news .y-80,
.gc-featured--vi   .y-80     { --y: 80%;  }
.gc-featured--news .y-bottom,
.gc-featured--vi   .y-bottom { --y: 100%; }
/* ---------- VI (products) — add control for Card 3 ---------- */
.gc-featured--vi{
  --vi-y: 40%;
  --vi-y-1: var(--vi-y);
  --vi-y-2: var(--vi-y);
  --vi-y-3: var(--vi-y);
}

/* Card 3 — cover product image and allow per-card override via --y */
.gc-featured--vi .gc-right :is(.wp-block-post-template, ul.wc-block-grid__products, ul.products)
  > li:nth-child(3)
  :is(.wp-block-post-featured-image img,
      .wc-block-grid__product-image img,
      .woocommerce-LoopProduct-link img,
      img.wp-post-image){
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% var(--y, var(--vi-y-3));
  display: block;
}
/* ==========================================
   Force WHITE for bundled line-item prices ONLY
   (table body rows; leaves totals/subtotals alone)
   ========================================== */

/* Official WooCommerce Product Bundles: table body prices */
.single-product .bundle_form table.bundled_table tbody td .price,
.single-product .bundle_form table.bundled_table tbody td .price *,
.single-product .bundle_form table.bundled_table tbody td .woocommerce-Price-amount,
.single-product .bundle_form table.bundled_table tbody td .woocommerce-Price-amount bdi,
.single-product .bundle_form .bundled_products .bundled_table tbody td .price,
.single-product .bundle_form .bundled_products .bundled_table tbody td .woocommerce-Price-amount {
  color: #fff !important;
}

/* Generic safety for any tabular bundle layout */
.single-product .bundle_form table tbody td .price,
.single-product .bundle_form table tbody td .price a,
.single-product .bundle_form table tbody td .woocommerce-Price-amount,
.single-product .bundle_form table tbody td .woocommerce-Price-amount bdi {
  color: #fff !important;
}

/* WPClever Product Bundles (if that’s your plugin) */
.single-product .wpcpb-bundle .wpcpb-table tbody td .price,
.single-product .wpcpb-bundle .wpcpb-table tbody td .price *,
.single-product .wpcpb-bundle .wpcpb-table tbody td .woocommerce-Price-amount,
.single-product .wpcpb-bundle .wpcpb-table tbody td .woocommerce-Price-amount bdi {
  color: #fff !important;
}

/* Sale formats in row items: keep del muted but white-toned */
.single-product .bundle_form table.bundled_table tbody td .price del,
.single-product .bundle_form table.bundled_table tbody td .price del .amount,
.single-product .bundle_form table.bundled_table tbody td .price del .woocommerce-Price-amount {
  color: rgba(255,255,255,.65) !important;
}
.single-product .bundle_form table.bundled_table tbody td .price ins,
.single-product .bundle_form table.bundled_table tbody td .price ins .amount,
.single-product .bundle_form table.bundled_table tbody td .price ins .woocommerce-Price-amount {
  color: #fff !important;
}

/* DO NOT touch totals/subtotals/footer rows */
.single-product .bundle_form table.bundled_table tfoot .price,
.single-product .bundle_form table.bundled_table tfoot .woocommerce-Price-amount,
.single-product .wpcpb-bundle .wpcpb-table tfoot .price {
  color: inherit !important;
}
/* --- Tunables --- */
:root{
  --gd-hover-duration: 300ms;
  --gd-hover-scale: 1.05;
  --gd-radius: 12px;
}

/* Container */
.gd-hover-swap{
  position: relative;
  display: block;
  overflow: hidden;
  border-radius: var(--gd-radius);
  isolation: isolate;
}

/* Base image styles */
.gd-hover-swap .gd-img{
  display: block;
  width: 100%;
  height: auto;
  pointer-events: none;
  user-select: none;
  transform-origin: center center;
  transition:
    opacity var(--gd-hover-duration) ease,
    transform var(--gd-hover-duration) ease,
    filter var(--gd-hover-duration) ease;
  will-change: opacity, transform;
}

/* Stack images */
.gd-hover-swap .gd-img.primary{ position: relative; z-index: 1; }
.gd-hover-swap .gd-img.secondary{
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  opacity: 0;
  z-index: 2;
}

/* Hover state: secondary fades in + grows slightly */
.gd-hover-swap:hover .gd-img.secondary{
  opacity: 1;
  transform: scale(var(--gd-hover-scale));
}

/* Optional: primary also grows a touch to add depth */
.gd-hover-swap:hover .gd-img.primary{
  transform: scale(calc(var(--gd-hover-scale) - 0.02));
  filter: brightness(0.95);
}

/* Respect users who prefer reduced motion */
@media (prefers-reduced-motion: reduce){
  .gd-hover-swap .gd-img{
    transition: opacity 150ms linear;
    transform: none !important;
  }
}
/* ==========================================================
   ENHANCED FADE TEXT WITH HEADING
   ========================================================== */

.fade-text .hover-content {
  position: absolute;
  left: 16px; right: 16px; bottom: 16px;
  padding: 14px 16px;
  z-index: 5;
  color: #fff;
  background: rgba(0, 0, 0, 0.35);
  backdrop-filter: blur(2px);
  border-radius: 10px;
  text-shadow: 0 0 8px rgba(0, 0, 0, 0.5);
  opacity: 0;
  transform: translateY(12px);
  transition:
    opacity 0.8s ease 0.4s,
    transform 0.8s ease 0.4s;
  pointer-events: none;
  white-space: normal;
  overflow-wrap: anywhere;
  word-break: break-word;
  line-height: 1.4;
  max-height: 60%;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(to bottom,
                      rgba(0,0,0,1) 0%,
                      rgba(0,0,0,1) 85%,
                      rgba(0,0,0,0) 100%);
          mask-image: linear-gradient(to bottom,
                      rgba(0,0,0,1) 0%,
                      rgba(0,0,0,1) 85%,
                      rgba(0,0,0,0) 100%);
}

/* Hover in */
.fade-text:hover .hover-content {
  opacity: 1;
  transform: translateY(0);
}

/* Title / Heading styling */
.fade-text .hover-heading {
  font-family: "Wrong Time Wrong Place", serif;
  font-size: clamp(18px, 2vw, 26px);
  font-weight: 400;
  margin: 0 0 8px 0;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: #d4af37;
  text-shadow:
    0 0 5px rgba(212,175,55,0.5),
    0 0 10px rgba(212,175,55,0.25);
}

/* Main text */
.fade-text .hover-text {
  font-family: "Optimus Princeps", serif;
  font-size: clamp(14px, 1.5vw, 18px);
  color: #f2f2f2;
  margin: 0;
}

/* Responsive tuning for mobile */
@media (max-width: 480px) {
  .fade-text .hover-content {
    left: 12px; right: 12px; bottom: 12px;
    padding: 10px 12px;
  }
  .fade-text .hover-heading {
    font-size: clamp(16px, 4vw, 22px);
  }
  .fade-text .hover-text {
    font-size: clamp(13px, 3.6vw, 16px);
  }
}
/* ================================
   MOBILE SCALING FOR HOVER TEXT
   ================================ */

.fade-text .hover-content {
  max-width: 52ch;
}
.fade-text .hover-heading {
  text-wrap: balance;
}

/* Tablet and down */
@media (max-width: 1024px){
  .fade-text .hover-content{
    left: 14px; right: 14px; bottom: 14px;
    padding: 12px 14px;
    max-height: 62%;
  }
  .fade-text .hover-heading{
    font-size: clamp(17px, 2.2vw, 24px);
  }
  .fade-text .hover-text{
    font-size: clamp(13px, 1.8vw, 18px);
    max-width: 46ch;
  }
}

/* Phones */
@media (max-width: 680px){
  .fade-text .hover-content{
    left: 12px; right: 12px; bottom: 12px;
    padding: 10px 12px;
    max-height: 66%;
    background: rgba(0,0,0,0.42);
    backdrop-filter: blur(3px);
  }
  .fade-text .hover-heading{
    font-size: clamp(16px, 4.6vw, 22px);
    line-height: 1.2;
  }
  .fade-text .hover-text{
    font-size: clamp(13px, 3.9vw, 17px);
    line-height: 1.38;
    max-width: 38ch;
    white-space: normal;
    overflow-wrap: anywhere;
    word-break: break-word;
    hyphens: auto;
  }
}

/* Small phones */
@media (max-width: 380px){
  .fade-text .hover-content{
    left: 10px; right: 10px; bottom: 10px;
    padding: 9px 10px;
    max-height: 70%;
  }
  .fade-text .hover-heading{
    font-size: clamp(15px, 5.2vw, 20px);
  }
  .fade-text .hover-text{
    font-size: clamp(12.5px, 4.4vw, 16px);
    max-width: 34ch;
  }
}

/* Optional: on touch devices (no hover), show text by default and shorten delay */
@media (hover: none){
  .fade-text .hover-content{
    opacity: 1;
    transform: none;
    transition: opacity .45s ease;
  }
}
/* =========================================================
   GDC — GLOBAL MOBILE / LAYOUT UTILITIES
   (use across ANY sale: Winter, Black Friday, whatever)
   ========================================================= */

/* ---------------------------------------------------------
   1) FULL-BLEED COVER / HERO
   Usage: add "gdc-fullbleed-cover" to a Cover block
   Result: removes theme rails, image spans full viewport
   --------------------------------------------------------- */

.gdc-fullbleed-cover,
.gdc-fullbleed-cover.wp-block-cover{
  margin-left: calc(50% - 50vw) !important;
  margin-right: calc(50% - 50vw) !important;
  width: 100vw !important;
  max-width: 100vw !important;
  border-radius: 0 !important;
}

.gdc-fullbleed-cover .wp-block-cover__inner-container{
  max-width: none !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
}

/* ---------------------------------------------------------
   2) TOP HERO BANNER — MOBILE SLIM VERSION
   Usage:
     - add "gdc-top-banner" to any hero Cover you want
       cropped & tightened on phones
   --------------------------------------------------------- */

@media (max-width: 680px){

  .gdc-top-banner{
    height: 180px !important;
    max-height: 180px !important;
    min-height: 0 !important;
    overflow: hidden !important;
    position: relative;
    padding: 0 !important;
    margin: 0 !important;
  }

  .gdc-top-banner img,
  .gdc-top-banner .wp-block-cover__image-background{
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    /* tweak this if you want the crop higher/lower */
    object-position: center 25% !important;
  }

  .gdc-top-banner .wp-block-cover__inner-container{
    padding: 10px 16px !important;
  }

  .gdc-top-banner h1,
  .gdc-top-banner h2,
  .gdc-top-banner h3,
  .gdc-top-banner p{
    margin: 4px 0 !important;
  }

  .gdc-top-banner .wp-block-buttons,
  .gdc-top-banner .wp-block-button{
    margin-top: 6px !important;
    margin-bottom: 0 !important;
  }
}

/* ---------------------------------------------------------
   3) MOBILE TIGHTENING — HERO BANNER + META BLOCKS
   Usage:
     - same "gdc-top-banner" class as above
     - for membership / info cards:
         card group  → class "gdc-membership-card"
         text group  → class "gdc-membership-meta"
   This reproduces the nice tight mobile stack you had.
   --------------------------------------------------------- */

@media (max-width: 680px){

  /* refine hero again for stacked layouts */
  .gdc-top-banner{
    height: auto !important;
    max-height: none !important;
    min-height: 0 !important;
    overflow: visible !important;
    margin-top: 0 !important;
    margin-bottom: 8px !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
  }

  .gdc-top-banner .wp-block-cover__inner-container{
    padding-top: 0 !important;
    padding-bottom: 0 !important;
  }

  .gdc-top-banner img,
  .gdc-top-banner .wp-block-cover__image-background{
    width: 100% !important;
    height: auto !important;
    max-height: 180px !important;
    object-fit: cover !important;
    object-position: center 25% !important;
  }

  .gdc-top-banner .wp-block-image{
    margin-top: 0 !important;
    margin-bottom: 4px !important;
  }

  .gdc-top-banner .wp-block-spacer:first-child{
    height: 16px !important;
  }

  .gdc-top-banner .wp-block-spacer:not(:first-child){
    height: 0 !important;
  }

  .gdc-top-banner .wp-block-buttons,
  .gdc-top-banner .wp-block-button{
    margin-top: 0 !important;
    margin-bottom: 6px !important;
  }

  .gdc-top-banner .wp-block-button .wp-block-button__link{
    margin: 0 !important;
  }

  /* MEMBERSHIP / PRODUCT CARD + META STACK
     card = image/tarot
     meta = text block underneath
  */

  .gdc-membership-card{
    margin-bottom: 12px !important;
  }

  .gdc-membership-card + .gdc-membership-meta{
    margin-top: 6px !important;
    margin-bottom: 24px !important;
    padding: 0 !important;
  }

  .gdc-membership-card + .gdc-membership-meta h2,
  .gdc-membership-card + .gdc-membership-meta h3,
  .gdc-membership-card + .gdc-membership-meta p{
    margin-top: 4px !important;
    margin-bottom: 4px !important;
  }

  .gdc-membership-card + .gdc-membership-meta ul{
    margin-top: 6px !important;
    margin-bottom: 10px !important;
  }

  .gdc-membership-card + .gdc-membership-meta .wp-block-buttons,
  .gdc-membership-card + .gdc-membership-meta .wp-block-button{
    margin-top: 8px !important;
    margin-bottom: 4px !important;
  }
}

/* ================================
   LEARN GRIMDARK – HERO BANNER
   ================================ */

/* Wrapper */
.lg-hero-banner {
  display: block;
  max-width: 900px;        /* adjust size */
  margin: 0 auto 40px;
  text-decoration: none;
  color: #fff;
  text-align: center;
}

/* --- IMAGE SWAP AREA --- */
.lg-hero-art {
  position: relative;
  width: 100%;
  display: block;
}

/* Base styles for both PNGs */
.lg-img {
  width: 100%;
  height: auto;
  display: block;
  transition: opacity 0.35s ease-in-out;
}

/* Image A (default) */
.lg-img.primary {
  position: relative;
  z-index: 1;
  opacity: 1;
}

/* Image B (hover) */
.lg-img.secondary {
  position: absolute;
  inset: 0;
  z-index: 2;
  opacity: 0;
}

/* Swap on hover */
.lg-hero-banner:hover .lg-img.primary {
  opacity: 0;
}
.lg-hero-banner:hover .lg-img.secondary {
  opacity: 1;
}

/* --- TEXT METADATA AREA --- */
.lg-hero-meta {
  margin-top: 16px;
  opacity: 0;
  transform: translateY(10px);
  transition: opacity 0.35s ease, transform 0.35s ease;
  pointer-events: none;
}

/* Reveal text on hover */
.lg-hero-banner:hover .lg-hero-meta {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

/* Title */
.lg-hero-title {
  font-family: var(--gdc-h1-font);
  text-transform: uppercase;
  letter-spacing: 0.12em;
  font-size: clamp(22px, 3vw, 34px);
  color: rgba(255,255,255,0.92);
  text-shadow:
    0 2px 6px rgba(0,0,0,0.85),
    0 0 8px rgba(0,0,0,0.75);
}

/* Flavor text */
.lg-hero-flavour {
  font-family: var(--gdc-h1-font);
  font-size: clamp(14px, 1.8vw, 18px);
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.85);
  margin-top: 6px;
}

/* BUY NOW button text */
.lg-hero-buy {
  margin-top: 12px;
  font-family: var(--gdc-h2-font);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  font-size: clamp(18px, 2vw, 24px);
  color: #f7f2e8;
  text-shadow:
    0 2px 6px rgba(0,0,0,0.85),
    0 0 8px rgba(0,0,0,0.75);
  transition: text-shadow 0.25s ease, color 0.25s ease;
}

/* BUY NOW glow ALWAYS on hover */
.lg-hero-banner:hover .lg-hero-buy {
  text-shadow:
    0 0 10px rgba(255,225,150,1),
    0 0 22px rgba(195,174,130,1),
    0 0 40px rgba(195,174,130,0.85);
  color: #fffdf5;
}
/* =========================================================
   WINTER SALE 2025 — GLOBAL WRAPPER
   ========================================================= */

#winter-sale-2025{
  background-color: #050305;
  color: #f5f1e6;
}

#winter-sale-2025 img{
  max-width: 100%;
  height: auto;
  display: block;
}

/* =========================================================
   WINTER SALE — DESKTOP HERO BANNER
   ========================================================= */

.ws-hero-banner{
  display: block;
  max-width: 1200px;
  margin: 0 auto 40px;
  cursor: pointer;
  padding: 0 var(--rail);
  color: #fff;
  text-decoration: none;
}

/* HERO ART — BOX + BORDER + EMERALD GLOW */
.ws-hero-art{
  position: relative;
  border-radius: 20px;
  overflow: hidden;

  border: 1px solid rgba(255,255,255,0.25);
  background: rgba(0,0,0,0.50);

  box-shadow:
    0 0 22px rgba(31, 71, 54, 0.55),
    0 0 38px rgba(13, 59, 46, 0.45);

  transition:
    border-color 0.25s ease,
    box-shadow 0.25s ease;
}

.ws-hero-swap{
  position: relative;
}

.ws-hero-img{
  width: 100%;
  display: block;
}

.ws-hero-img.primary{
  z-index: 1;
  opacity: 1;
  position: relative;
  transition: opacity 0.35s ease-in-out;
}

.ws-hero-img.secondary{
  z-index: 2;
  opacity: 0;
  position: absolute;
  inset: 0;
  object-fit: cover;
  transition: opacity 0.35s ease-in-out;
}

.ws-hero-banner:hover .ws-hero-art{
  border-color: #c3ae82;
  box-shadow:
    0 0 26px rgba(31, 71, 54, 0.72),
    0 0 50px rgba(13, 59, 46, 0.60),
    0 0 12px rgba(58, 161, 123, 0.55),
    0 0 0 2px rgba(195,174,130,0.85);
}

.ws-hero-banner:hover .ws-hero-img.primary{
  opacity: 0;
}

.ws-hero-banner:hover .ws-hero-img.secondary{
  opacity: 1;
}

/* =========================================================
   HERO META TEXT / BUY NOW
   ========================================================= */

.ws-hero-meta{
  margin-top: 18px;
  text-align: center;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.ws-hero-meta *,
.ws-hero-meta *:hover,
.ws-hero-meta *:focus,
.ws-hero-meta *:active{
  text-decoration: none !important;
  outline: none !important;
  box-shadow: none !important;
}

.ws-hero-title,
.ws-hero-flavour,
.ws-hero-buy{
  text-shadow:
    0 2px 6px rgba(0,0,0,0.85),
    0 0 8px rgba(0,0,0,0.75);
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 0.45s ease, transform 0.45s ease;
}

.ws-hero-title{
  font-family: var(--gdc-h1-font);
  text-transform: uppercase;
  font-size: clamp(18px, 2.3vw, 26px);
  letter-spacing: 0.16em;
  color: rgba(255,255,255,0.92);
  transition-delay: 0.10s;
}

.ws-hero-flavour{
  font-family: var(--gdc-h1-font);
  font-size: clamp(13px, 1.5vw, 16px);
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.85);
  transition-delay: 0.22s;
}

/* BUY NOW – Living Hell, no forced ALL CAPS */
.ws-hero-buy{
  font-family: var(--gdc-h2-font);
  text-transform: none;
  letter-spacing: 0.18em;
  font-size: clamp(22px, 2.6vw, 32px);
  color: #f5f1e6;
  margin-top: 8px;
  display: inline-block;

  transition:
    opacity 0.45s ease 0.32s,
    transform 0.45s ease 0.32s,
    text-shadow 0.20s ease,
    color 0.20s ease;
}

.ws-hero-banner:hover .ws-hero-title,
.ws-hero-banner:hover .ws-hero-flavour,
.ws-hero-banner:hover .ws-hero-buy{
  opacity: 1;
  transform: translateY(0);
}

.ws-hero-buy:hover{
  text-shadow:
    0 0 10px rgba(255, 240, 200, 0.95),
    0 0 20px rgba(195,174,130,1),
    0 0 34px rgba(195,174,130,0.98),
    0 0 52px rgba(195,174,130,0.95);
  color: #fffdf3;
  cursor: pointer;
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce){
  .ws-hero-title,
  .ws-hero-flavour,
  .ws-hero-buy{
    transition: opacity 0.25s linear !important;
    transform: none !important;
  }

  .ws-hero-img.primary,
  .ws-hero-img.secondary{
    transition: opacity 0.25s linear !important;
  }
}

/* =========================================================
   WINTER PACKS — CARD
   ========================================================= */

.ws-pack-card{
  --ws-hover-scale: 1.03;

  position: relative;
  display: block;
  width: 100%;
  height: 100%;
  color: #fff;
  text-decoration: none;

  background-color: #000;
  border-radius: 18px;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,0.25);

  box-shadow:
    0 0 18px rgba(31, 71, 54, 0.55),
    0 0 30px rgba(13, 59, 46, 0.45);

  transition: border-color 0.25s ease, box-shadow 0.25s ease;
}

/* No random underlines */
.ws-pack-card *,
.ws-pack-card *:hover,
.ws-pack-card *:focus,
.ws-pack-card *:active{
  text-decoration: none !important;
  outline: none !important;
}

/* Media area with fixed 5:4 aspect ratio */
.ws-pack-media{
  position: relative;
  width: 100%;
  overflow: hidden;
}

/* Maintain 5:4 ratio (height = 80% of width) */
.ws-pack-media::before{
  content: "";
  display: block;
  padding-bottom: 80%; /* 5:4 */
}

/* Images A/B */
.ws-pack-img{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition:
    opacity 0.35s ease-in-out,
    transform 0.20s ease;
}

.ws-pack-img.primary{
  z-index: 1;
  opacity: 1;
}

.ws-pack-img.secondary{
  z-index: 2;
  opacity: 0;
}

/* Hover frame + glow */
.ws-pack-card:hover{
  border-color: #c3ae82;
  box-shadow:
    0 0 22px rgba(31, 71, 54, 0.72),
    0 0 38px rgba(13, 59, 46, 0.60),
    0 0 0 2px rgba(195,174,130,0.85);
}

/* Image swap */
.ws-pack-card:hover .ws-pack-img.primary{
  opacity: 0;
  transform: scale(1.01);
}

.ws-pack-card:hover .ws-pack-img.secondary{
  opacity: 1;
  transform: scale(var(--ws-hover-scale));
}

/* =========================================================
   WINTER PACKS — OVERLAY META
   (TITLE → BUY NOW → PRICE → FLAVOUR)
   ========================================================= */

.ws-pack-overlay{
  position: absolute;
  inset: 0;
  z-index: 3;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  padding: 1.75rem 1.5rem 1.9rem;
  text-align: center;

  background: linear-gradient(
    to top,
    rgba(0,0,0,0.55) 0%,
    rgba(0,0,0,0.25) 30%,
    transparent 70%
  );

  opacity: 0;
  transform: translateY(10px);
  pointer-events: auto;
  transition: opacity 0.45s ease, transform 0.45s ease;
}

.ws-pack-card:hover .ws-pack-overlay{
  opacity: 1;
  transform: translateY(0);
}

/* Shared text shadow + motion base */
.ws-pack-label,
.ws-pack-cta,
.ws-pack-name,
.ws-pack-meta{
  text-shadow:
    0 2px 6px rgba(0,0,0,0.85),
    0 0 8px rgba(0,0,0,0.8);
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 0.40s ease, transform 0.40s ease;
}

/* TITLE */
.ws-pack-label{
  font-family: var(--gdc-h1-font);
  text-transform: uppercase;
  letter-spacing: 0.16em;
  font-size: clamp(14px, 1.4vw, 16px);
  color: rgba(245,241,230,0.92);
  margin-bottom: 4px;
  transition-delay: 0.10s;
}

/* BUY NOW — Living Hell, no all caps */
.ws-pack-cta{
  font-family: var(--gdc-h2-font);
  text-transform: none;
  letter-spacing: 0.20em;
  font-size: clamp(24px, 2.5vw, 34px);
  color: #f5f1e6;
  margin-bottom: 6px;
  cursor: pointer;
  transition:
    opacity 0.40s ease 0.18s,
    transform 0.40s ease 0.18s,
    color 0.20s ease,
    text-shadow 0.20s ease;
}

/* PRICE */
.ws-pack-name{
  font-family: var(--gdc-h1-font);
  text-transform: uppercase;
  letter-spacing: 0.12em;
  font-size: clamp(16px, 1.9vw, 22px);
  color: #ffecc0;
  margin-bottom: 6px;
  transition-delay: 0.26s;
}

/* FLAVOUR TEXT */
.ws-pack-meta{
  font-family: var(--gdc-h1-font);
  text-transform: lowercase;
  letter-spacing: 0.10em;
  font-size: clamp(13px, 1.4vw, 17px);
  color: rgba(245,241,230,0.90);
  max-width: 90%;
  transition-delay: 0.34s;
}

/* Reveal sequence on hover */
.ws-pack-card:hover .ws-pack-label,
.ws-pack-card:hover .ws-pack-cta,
.ws-pack-card:hover .ws-pack-name,
.ws-pack-card:hover .ws-pack-meta{
  opacity: 1;
  transform: translateY(0);
}

/* Emphasise BUY NOW on hover */
.ws-pack-cta:hover{
  color: #fffdf3;
  text-shadow:
    0 0 12px rgba(255, 240, 200, 1),
    0 0 24px rgba(195,174,130,1),
    0 0 42px rgba(195,174,130,0.95);
}

/* ============================================
   WINTER PACKS — RESPONSIVE LAYOUT (1700px)
   ============================================ */

.ws-packs{
  max-width: 1700px;
  margin: 0 auto 70px;
  padding: 0 40px;
}

.ws-packs .wp-block-columns{
  display: flex;
  justify-content: center;
  align-items: stretch;
  gap: 50px;
}

.ws-packs .wp-block-column{
  flex: 0 0 50%;
  max-width: 50%;
}

/* Remove extra margin inside columns, if any */
.ws-packs .wp-block-column > .wp-block-group,
.ws-packs .wp-block-column > .wp-block-custom-html{
  margin: 0 !important;
}

/* Tablet breakpoint */
@media (max-width: 1024px){
  .ws-packs{
    max-width: 100%;
    padding: 0 20px;
  }
  .ws-packs .wp-block-columns{
    flex-direction: column;
    gap: 35px;
  }
  .ws-packs .wp-block-column{
    flex: 0 0 100%;
    max-width: 100%;
  }
}

/* Mobile breakpoint */
@media (max-width: 768px){
  .ws-packs{
    padding: 0 10px;
  }
}

/* =========================================================
   WINTER BUNDLES — 3-CARD ROW LAYOUT
   ========================================================= */

.wb-bundles{
  max-width: 1700px;
  margin: 0 auto 80px;
  padding: 0 40px;
}

.wb-bundles .wp-block-columns{
  display: flex;
  justify-content: center;
  align-items: stretch;
  gap: 40px;
}

.wb-bundles .wp-block-column{
  flex: 0 0 33.333%;
  max-width: 33.333%;
}

/* Remove any theme margins inside the columns */
.wb-bundles .wp-block-column > .wp-block-group,
.wb-bundles .wp-block-column > .wp-block-custom-html{
  margin: 0 !important;
}

/* Tablet: 2 across */
@media (max-width: 1100px){
  .wb-bundles .wp-block-columns{
    flex-wrap: wrap;
    justify-content: center;
  }
  .wb-bundles .wp-block-column{
    flex: 0 0 48%;
    max-width: 48%;
  }
}

/* Mobile: 1 per row */
@media (max-width: 768px){
  .wb-bundles{
    padding: 0 16px;
  }
  .wb-bundles .wp-block-column{
    flex: 0 0 100%;
    max-width: 100%;
  }
}

/* =========================================================
   WINTER BUNDLES — GENERIC CARD FRAME (4:5)
   (use "wb-card-frame" on static bundle images AND slider)
   ========================================================= */

.wb-card-frame{
  position: relative;
  display: block;
  width: 100%;
  max-width: 495px;
  margin-left: auto;
  margin-right: auto;

  background-color: #000;
  border-radius: 18px;
  border: 1px solid rgba(255,255,255,0.25);

  /* EMERALD GLOW (same family as hero/packs/stocking) */
  box-shadow:
    0 0 18px rgba(31, 71, 54, 0.55),
    0 0 30px rgba(13, 59, 46, 0.45);

  transition: border-color 0.25s ease, box-shadow 0.25s ease;
  overflow: hidden;
}

/* STATIC CARDS (Learn / Master):
   enforce a clean 4:5 box on the element that has wb-card-frame */
.wb-card-frame:not(.wb-slider){
  aspect-ratio: 4 / 5;
}

/* Images inside any bundle frame (static or slider) */
.wb-card-frame img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.20s ease;
}

/* Hover: emerald glow + slight zoom for static cards */
.wb-card-frame:hover{
  border-color: #c3ae82;
  box-shadow:
    0 0 22px rgba(31, 71, 54, 0.72),
    0 0 38px rgba(13, 59, 46, 0.60),
    0 0 0 2px rgba(195,174,130,0.85);
}

.wb-card-frame:not(.wb-slider):hover img{
  transform: scale(1.03);
}

/* =========================================================
   WINTER BUNDLES — SLIDER (5 ITEMS, 4:5 ASPECT)
   ========================================================= */

.wb-slider{
  position: relative;
  width: 100%;
  max-width: 495px;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 34px;               /* space for dots underneath */
}

/* Usually used as: class="wb-slider wb-card-frame" */
.wb-slider.wb-card-frame{
  overflow: visible;                 /* allow arrows + dots outside */
}

/* Hide radios (logic only) */
.wb-slide-radio{
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

/* Slides wrapper */
.wb-slider-frame{
  position: relative;
  overflow: hidden;
  border-radius: 18px;
  aspect-ratio: 4 / 5;
}

/* Individual slides */
.wb-slide{
  position: absolute;
  inset: 0;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.40s ease;
}

.wb-slide img{
  transform-origin: center center;
}

/* Active slide based on which radio is checked */
#wb-bundle-1:checked ~ .wb-slider-frame .wb-slide:nth-child(1),
#wb-bundle-2:checked ~ .wb-slider-frame .wb-slide:nth-child(2),
#wb-bundle-3:checked ~ .wb-slider-frame .wb-slide:nth-child(3),
#wb-bundle-4:checked ~ .wb-slider-frame .wb-slide:nth-child(4),
#wb-bundle-5:checked ~ .wb-slider-frame .wb-slide:nth-child(5){
  opacity: 1;
  pointer-events: auto;
}

/* Hover zoom for current slide */
.wb-slider-frame:hover .wb-slide img{
  transform: scale(1.03);
}

/* =========================================================
   SLIDER ARROWS
   ========================================================= */

.wb-arrows{
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  pointer-events: none;
}

.wb-arrows-prev{ left: -32px; }
.wb-arrows-next{ right: -32px; }

.wb-arrow{
  display: none;
  pointer-events: auto;
  width: 64px;
  height: 64px;
  cursor: pointer;
  filter: drop-shadow(0 0 6px rgba(195,174,130,0.7));
  transform-origin: center center;
  animation: wbArrowPulse 2.1s ease-in-out infinite;
}

.wb-arrow img{
  width: 100%;
  height: 100%;
  object-fit: contain;
}

/* Pulse animation */
@keyframes wbArrowPulse{
  0%   { transform: scale(1); }
  50%  { transform: scale(1.08); }
  100% { transform: scale(1); }
}

/* On hover: stop pulsing and give a stronger pop */
.wb-arrow:hover,
.wb-arrow:active,
.wb-arrow:focus-visible{
  animation: none;
  transform: scale(1.10);
  filter: drop-shadow(0 0 10px rgba(195,174,130,1));
}

/* Show the correct left arrow for the active slide */
#wb-bundle-1:checked ~ .wb-arrows-prev .wb-arrow-prev-1,
#wb-bundle-2:checked ~ .wb-arrows-prev .wb-arrow-prev-2,
#wb-bundle-3:checked ~ .wb-arrows-prev .wb-arrow-prev-3,
#wb-bundle-4:checked ~ .wb-arrows-prev .wb-arrow-prev-4,
#wb-bundle-5:checked ~ .wb-arrows-prev .wb-arrow-prev-5{
  display: block;
}

/* Show the correct right arrow for the active slide */
#wb-bundle-1:checked ~ .wb-arrows-next .wb-arrow-next-1,
#wb-bundle-2:checked ~ .wb-arrows-next .wb-arrow-next-2,
#wb-bundle-3:checked ~ .wb-arrows-next .wb-arrow-next-3,
#wb-bundle-4:checked ~ .wb-arrows-next .wb-arrow-next-4,
#wb-bundle-5:checked ~ .wb-arrows-next .wb-arrow-next-5{
  display: block;
}

/* =========================================================
   SLIDER DOTS (BELOW THE CARD)
   ========================================================= */

.wb-dots{
  position: absolute;
  left: 50%;
  bottom: -22px;
  transform: translateX(-50%);
  margin-top: 0;
  display: flex;
  justify-content: center;
  gap: 6px;
}

.wb-dot{
  width: 7px;
  height: 7px;
  border-radius: 999px;
  background: rgba(255,255,255,0.28);
  cursor: pointer;
  transition:
    transform 0.25s ease,
    background-color 0.25s ease,
    box-shadow 0.25s ease,
    width 0.25s ease;
}

/* Active dot */
#wb-bundle-1:checked ~ .wb-dots .wb-dot-1,
#wb-bundle-2:checked ~ .wb-dots .wb-dot-2,
#wb-bundle-3:checked ~ .wb-dots .wb-dot-3,
#wb-bundle-4:checked ~ .wb-dots .wb-dot-4,
#wb-bundle-5:checked ~ .wb-dots .wb-dot-5{
  width: 18px;
  background: #c3ae82;
  box-shadow: 0 0 10px rgba(195,174,130,0.9);
  transform: translateY(-1px);
}

/* =========================================================
   SLIDER — RESPONSIVE TWEAKS
   ========================================================= */

@media (max-width: 780px){
  .wb-slider.wb-card-frame{
    max-width: 360px;
    width: 88vw;
  }
  .wb-arrows-prev{ left: -20px; }
  .wb-arrows-next{ right: -20px; }
}
/* =========================================================
   STOCKING STUFFERS — HORIZONTAL BANNER CARD
   (image A → image B + right-side overlay on hover)
   UPDATED: Flexible height based on image dimensions
   ========================================================= */

.ss-banner{
  max-width: 1200px;
  margin: 0 auto 70px;
  padding: 0 var(--rail);
}

/* Outer card */
.ss-card{
  position: relative;
  display: block;
  width: 100%;
  color: #fff;
  text-decoration: none;

  border-radius: 20px;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,0.25);
  background: rgba(0,0,0,0.50);

  box-shadow:
    0 0 18px rgba(31, 71, 54, 0.55),
    0 0 30px rgba(13, 59, 46, 0.45);

  transition:
    border-color 0.25s ease,
    box-shadow 0.25s ease,
    transform 0.28s ease;
}

/* no random underlines */
.ss-card *,
.ss-card *:hover,
.ss-card *:focus,
.ss-card *:active{
  text-decoration: none !important;
  outline: none !important;
}

/* =========================================================
   MEDIA: FLEXIBLE HEIGHT (NO FIXED ASPECT RATIO)
   Purpose : Let banner height come from the image itself
   ========================================================= */

.ss-media{
  position: relative;
  width: 100%;
  overflow: hidden;
}

/* IMPORTANT: disable the fixed-aspect spacer */
.ss-media::before{
  content: none !important;
  display: none !important;
  padding-bottom: 0 !important;
}

/* Images now participate in layout (define height) */
.ss-img{
  position: absolute; /* kept for swap layering */
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;     /* show entire banner, no cropping */
  display: block;

  transition:
    opacity 0.35s ease-in-out,
    transform 0.25s ease;
}

/* Make .ss-media’s height follow the image by giving it an intrinsic ratio.
   Since you told me your banner is 1389x389, we set it here.
   You can override this per banner later if needed. */
.ss-media{
  aspect-ratio: 1389 / 389;  /* <-- key line (flexible, responsive) */
}

/* Both images are layered */
.ss-img.primary{
  z-index: 1;
  opacity: 1;
}

.ss-img.secondary{
  z-index: 2;
  opacity: 0;
}

/* OVERLAY: right side, inside image */
.ss-overlay{
  position: absolute;
  inset: 0;
  z-index: 3;

  display: flex;
  justify-content: flex-end;
  align-items: center;

  padding: 0 clamp(26px, 4vw, 40px);

  background: linear-gradient(
    to left,
    rgba(0,0,0,0.92) 0%,
    rgba(0,0,0,0.70) 25%,
    rgba(0,0,0,0.35) 45%,
    transparent 70%
  );

  opacity: 0;
  transform: translateX(14px);
  pointer-events: none;
  transition:
    opacity 0.45s ease,
    transform 0.45s ease;
}

/* Inner text block, anchored right, internally centered */
.ss-overlay-inner{
  max-width: 480px;
  margin-left: auto;
  margin-right: 0;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}

/* Title — Living Hell */
.ss-title{
  font-family: var(--gdc-h2-font);
  font-weight: 400;
  text-transform: none;
  font-size: clamp(22px, 2.7vw, 30px);
  letter-spacing: 0.04em;
  color: #f5f1e6;
  text-shadow:
    0 2px 6px rgba(0,0,0,0.85),
    0 0 8px rgba(0,0,0,0.75);
}

/* Flavour text */
.ss-flavour{
  font-family: var(--gdc-h1-font);
  text-transform: lowercase;
  font-size: clamp(14px, 1.6vw, 18px);
  letter-spacing: 0.08em;
  line-height: 1.45;
  color: rgba(245,241,230,0.92);
}

/* CTA + price row */
.ss-meta{
  display: flex;
  flex-wrap: wrap;
  gap: 10px 18px;
  align-items: baseline;
  justify-content: center;
  margin-top: 6px;
}

/* Add to cart — Optimus Princeps */
.ss-cta{
  font-family: var(--gdc-h1-font);
  text-transform: uppercase;
  letter-spacing: 0.18em;
  font-size: clamp(17px, 1.9vw, 21px);
  color: #f5f1e6;
  cursor: pointer;
  text-shadow:
    0 2px 6px rgba(0,0,0,0.85),
    0 0 8px rgba(0,0,0,0.75);
  transition:
    color 0.20s ease,
    text-shadow 0.20s ease,
    transform 0.20s ease;
  pointer-events: auto;
}

/* Price */
.ss-price{
  font-family: var(--gdc-h1-font);
  text-transform: lowercase;
  font-size: clamp(19px, 2.1vw, 23px);
  letter-spacing: 0.10em;
  color: #ffecc0;
  text-shadow:
    0 2px 6px rgba(0,0,0,0.85),
    0 0 8px rgba(0,0,0,0.75);
}

/* HOVER BEHAVIOUR */
.ss-card:hover{
  border-color: #c3ae82;
  box-shadow:
    0 0 22px rgba(31, 71, 54, 0.72),
    0 0 38px rgba(13, 59, 46, 0.60),
    0 0 0 2px rgba(195,174,130,0.85);
  transform: scale(1.015);
}

.ss-card:hover .ss-img.primary{
  opacity: 0;
  transform: scale(1.01);
  filter: brightness(0.95);
}

.ss-card:hover .ss-img.secondary{
  opacity: 1;
  transform: scale(1.03);
}

.ss-card:hover .ss-overlay{
  opacity: 1;
  transform: translateX(0);
}

/* CTA glow when hovered directly */
.ss-card .ss-cta:hover{
  color: #fffdf3 !important;
  text-shadow:
    0 0 10px rgba(255,240,200,1),
    0 0 20px rgba(195,174,130,1),
    0 0 36px rgba(195,174,130,0.95),
    0 0 52px rgba(195,174,130,0.85) !important;
  transform: translateY(-1px);
}

/* RESPONSIVE TWEAKS */
@media (max-width: 768px){
  .ss-banner{
    padding: 0 16px;
  }
  .ss-overlay-inner{
    max-width: 100%;
  }
  .ss-overlay{
    padding: 0 18px;
    background: linear-gradient(
      to left,
      rgba(0,0,0,0.92) 0%,
      rgba(0,0,0,0.80) 35%,
      rgba(0,0,0,0.40) 65%,
      transparent 90%
    );
  }
}

/* =========================================================
   WINTER PACKS — "What's inside" details + 5:4 card
   ========================================================= */

/* 5:4 card inside the details (keeps your existing glow/border) */
.wb-card-frame.ws-inside-card:not(.wb-slider){
  aspect-ratio: 5 / 4 !important;    /* override the generic 4:5 */
}

.wb-card-frame.ws-inside-card img{
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Generic details wrapper on desktop / large screens */
.ws-pack-details{
  margin: 10px 0 14px;
  font-family: var(--gdc-h1-font);   /* Optimus Princeps */
}

/* Summary line (the clickable "What's inside...") */
.ws-pack-details > summary{
  list-style: none;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 0;

  text-transform: uppercase;
  letter-spacing: 0.18em;
  font-size: 0.9rem;

  color: #c3ae82;
  text-shadow:
    0 2px 6px rgba(0,0,0,0.85),
    0 0 8px rgba(0,0,0,0.75);

  transition:
    color 0.25s ease,
    text-shadow 0.25s ease;
}

/* Hide native disclosure triangle in WebKit */
.ws-pack-details > summary::-webkit-details-marker{
  display: none;
}

/* Custom little arrow */
.ws-pack-details > summary::before{
  content: "▼";
  font-size: 0.8em;
  transform-origin: center;
  transition: transform 0.25s ease;
}

/* Hover state */
.ws-pack-details > summary:hover{
  color: #ffecc0;
  text-shadow:
    0 0 10px rgba(255,240,200,0.95),
    0 0 20px rgba(195,174,130,1);
}

/* Open state: rotate arrow up */
.ws-pack-details[open] > summary::before{
  transform: rotate(180deg);
}

/* Inner text (desktop): Optimus, tighter, tidy */
.ws-pack-details p,
.ws-pack-details ul,
.ws-pack-details li{
  font-family: var(--gdc-h1-font);     /* Optimus Princeps */
  text-transform: none;
  font-size: 0.92rem;
  line-height: 1.55;
}

.ws-pack-details p{
  margin: 8px 0 10px;
}

.ws-pack-details ul{
  padding-left: 1.1em;
  margin: 6px 0 10px;
}

.ws-pack-details li{
  margin-bottom: 3px;
}



/* =========================================================
   WINTER PACKS — MOBILE "LEARN MORE" DETAILS
   Smooth open/close animation
   ========================================================= */

@media (max-width: 768px){

  /* Details wrapper */
  #winter-sale-2025 details.ws-mobile-details{
    margin: 16px auto 8px;
    max-width: 480px;
    border: none;
    color: #f5f1e6;
    font-family: var(--gdc-h1-font);    /* Optimus Princeps body */
  }

  /* SUMMARY (clickable row) */
  #winter-sale-2025 details.ws-mobile-details > summary{
    list-style: none;
    font-family: var(--gdc-h1-font);    /* Optimus Princeps */
    text-transform: uppercase;
    letter-spacing: 0.18em;
    font-size: 13px;
    color: #c3ae82;
    cursor: pointer;
    position: relative;
    padding: 6px 0 4px 18px;            /* left space for caret */
  }

  /* Hide native ▸ marker */
  #winter-sale-2025 details.ws-mobile-details > summary::-webkit-details-marker{
    display: none;
  }
  #winter-sale-2025 details.ws-mobile-details > summary::marker{
    content: "";
  }

  /* Custom caret */
  #winter-sale-2025 details.ws-mobile-details > summary::before{
    content: "▼";
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    font-size: 11px;
    color: #c3ae82;
    transition: transform 0.25s ease;
  }

  /* Rotate caret when open */
  #winter-sale-2025 details.ws-mobile-details[open] > summary::before{
    transform: translateY(-50%) rotate(180deg);
  }

  /* SUMMARY hover / focus glow */
  #winter-sale-2025 details.ws-mobile-details > summary:hover{
    color: #fffdf3;
    text-shadow:
      0 0 8px rgba(195,174,130,0.9),
      0 0 14px rgba(195,174,130,0.8);
  }

  /* INNER BODY: animated height + fade */
  #winter-sale-2025 .ws-mobile-details-body{
    max-width: 480px;
    margin: 0 auto;
    max-height: 0;
    overflow: hidden;
    opacity: 0;
    transform: translateY(-6px);
    transition:
      max-height 0.45s ease,
      opacity 0.35s ease,
      transform 0.35s ease;
  }

  /* Typographic cleanup inside the mobile body */
  #winter-sale-2025 .ws-mobile-details-body p,
  #winter-sale-2025 .ws-mobile-details-body ul,
  #winter-sale-2025 .ws-mobile-details-body li{
    font-family: var(--gdc-h1-font);    /* Optimus Princeps */
    text-transform: none;
    font-size: 14px;
    line-height: 1.55;
  }

  #winter-sale-2025 .ws-mobile-details-body p{
    margin: 8px 0 10px;
  }

  #winter-sale-2025 .ws-mobile-details-body ul{
    padding-left: 1.2em;
    margin: 6px 0 10px;
  }

  #winter-sale-2025 .ws-mobile-details-body li{
    margin-bottom: 3px;
  }

  /* When details is open → reveal smoothly */
  #winter-sale-2025 details.ws-mobile-details[open] .ws-mobile-details-body{
    max-height: 2000px;     /* large enough cap */
    opacity: 1;
    transform: translateY(0);
  }
}
/* =========================================================
   WINTER PACKS — top description paragraph (Optimus)
   ========================================================= */

#winter-sale-2025 .ws-pack-copy{
  font-family: var(--gdc-h1-font);   /* Optimus Princeps */
  text-transform: none;
  font-size: 14px;
  line-height: 1.6;
  letter-spacing: 0.03em;
  margin: 12px 0 10px;
}
/* =========================================================
   WINTER PACKS — top description paragraph (Optimus)
   ========================================================= */

/* If the class is on the paragraph itself */
p.ws-pack-copy{
  font-family: var(--gdc-h1-font) !important;  /* Optimus Princeps */
  text-transform: none;
  font-size: 14px;
  line-height: 1.6;
  letter-spacing: 0.03em;
  margin: 12px 0 10px;
}

/* If the class is on a wrapper that contains the paragraph */
.ws-pack-copy p{
  font-family: var(--gdc-h1-font) !important;
  text-transform: none;
  font-size: 14px;
  line-height: 1.6;
  letter-spacing: 0.03em;
  margin: 12px 0 10px;
}
/* =========================================================
   WINTER PACKS — MOBILE PRICE + BUTTON SKIN
   (matches the desktop gold / Living Hell vibe)
   ========================================================= */

/* Price under the card (mobile layout only, via class) */
#winter-sale-2025 .ws-pack-mobile-price{
  font-family: var(--gdc-h1-font);        /* Optimus Princeps */
  font-size: clamp(20px, 2.4vw, 24px);
  line-height: 1.2;
  text-align: center;
  margin: 18px 0 10px;

  color: #ffecc0;
  text-transform: none;
  letter-spacing: 0.10em;

  text-shadow:
    0 2px 6px rgba(0,0,0,0.85),
    0 0 8px rgba(0,0,0,0.75);
}

/* Button wrapper + link (Gutenberg: class goes on .wp-block-button) */
#winter-sale-2025 .ws-pack-mobile-btn{
  text-align: center;
}

#winter-sale-2025 .ws-pack-mobile-btn .wp-block-button__link,
#winter-sale-2025 a.ws-pack-mobile-btn{
  display: inline-block;
  font-family: var(--gdc-h2-font);        /* Living Hell */
  text-transform: none;
  letter-spacing: 0.18em;
  font-size: clamp(15px, 1.9vw, 18px);

  padding: 0.9em 2.8em;
  border-radius: 999px;

  background: radial-gradient(circle at 50% 0,
              #f4493b 0%,
              #c22828 45%,
              #731114 100%);
  color: #fdf5ec;
  border: 1px solid rgba(0,0,0,0.7);

  box-shadow:
    0 6px 14px rgba(0,0,0,0.85),
    0 0 16px rgba(124,17,17,0.6);

  text-decoration: none !important;
  transition:
    background 0.22s ease,
    box-shadow 0.22s ease,
    transform 0.18s ease,
    color 0.18s ease;
}

/* Hover / focus: brighter, slight lift, subtle gold glow */
#winter-sale-2025 .ws-pack-mobile-btn .wp-block-button__link:hover,
#winter-sale-2025 .ws-pack-mobile-btn .wp-block-button__link:focus-visible,
#winter-sale-2025 a.ws-pack-mobile-btn:hover,
#winter-sale-2025 a.ws-pack-mobile-btn:focus-visible{
  background: radial-gradient(circle at 50% 0,
              #ff5a4a 0%,
              #d73434 45%,
              #86171b 100%);
  color: #fffdf3;
  transform: translateY(-1px);

  box-shadow:
    0 8px 18px rgba(0,0,0,0.9),
    0 0 20px rgba(195,174,130,0.75);
}

/* Small tap feedback */
#winter-sale-2025 .ws-pack-mobile-btn .wp-block-button__link:active,
#winter-sale-2025 a.ws-pack-mobile-btn:active{
  transform: translateY(1px) scale(0.98);
  box-shadow:
    0 3px 10px rgba(0,0,0,0.8),
    0 0 14px rgba(124,17,17,0.6);
}
/* =========================================================
   ANTI-DEATH — 5:4 HERO CARD SYSTEM
   (LEFT: text overlay + dim)
   (RIGHT: image-only variant available)
   ========================================================= */

.ad-pack-card{
  --ad-hover-scale: 1.06;

  /* readability controls */
  --ad-text-width: 46ch;     /* consistent text column */
  --ad-panel-width: 560px;   /* max panel block width */

  position: relative;
  display: block;
  width: 100%;
  color: #fff;
  text-decoration: none;

  background: #000;
  border-radius: 18px;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.25);

  box-shadow:
    0 0 18px rgba(31,71,54,.55),
    0 0 30px rgba(13,59,46,.45);

  transition: border-color .25s ease, box-shadow .25s ease;
}

/* No random underlines */
.ad-pack-card *,
.ad-pack-card *:hover,
.ad-pack-card *:focus,
.ad-pack-card *:active{
  text-decoration: none !important;
  outline: none !important;
}

.ad-pack-card:hover{
  border-color:#c3ae82;
  box-shadow:
    0 0 22px rgba(31,71,54,.72),
    0 0 38px rgba(13,59,46,.60),
    0 0 0 2px rgba(195,174,130,.85);
}

/* =========================================================
   MEDIA: fixed 5:4
   ========================================================= */

.ad-pack-media{
  position: relative;
  width: 100%;
  overflow: hidden;
}

.ad-pack-media::before{
  content:"";
  display:block;
  padding-bottom:80%; /* 5:4 */
}

.ad-pack-img{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;

  transition:
    opacity .35s ease,
    transform .25s ease,
    filter .35s ease;
}

.ad-pack-img.primary{ opacity:1; z-index:1; }
.ad-pack-img.secondary{
  opacity:0;
  z-index:2;
  transform:scale(1.02);
}

/* =========================================================
   DIM + SHADOW GRADIENT (LEFT CARD ONLY by default)
   ========================================================= */

.ad-pack-media::after{
  content:"";
  position:absolute;
  inset:0;
  z-index:2;               /* above images, below overlay text */
  pointer-events:none;
  opacity:0;
  transition:opacity .45s ease;

  background:
    radial-gradient(120% 90% at 50% 40%,
      rgba(0,0,0,0) 0%,
      rgba(0,0,0,.55) 70%,
      rgba(0,0,0,.85) 100%),
    linear-gradient(to left,
      rgba(0,0,0,.92) 0%,
      rgba(0,0,0,.60) 45%,
      rgba(0,0,0,.22) 70%,
      rgba(0,0,0,0) 92%);
}

.ad-pack-card:hover .ad-pack-media::after{ opacity:1; }

/* Image swap + zoom + dim */
.ad-pack-card:hover .ad-pack-img.primary{
  opacity:0;
  transform:scale(1.02);
  filter:brightness(.80) contrast(1.05);
}

.ad-pack-card:hover .ad-pack-img.secondary{
  opacity:1;
  transform:scale(var(--ad-hover-scale));
  filter:brightness(.80) contrast(1.05);
}

/* =========================================================
   OVERLAY (CENTERED COLUMN)
   ========================================================= */

.ad-pack-overlay{
  position:absolute;
  inset:0;
  z-index:3;

  display:flex;
  align-items:center;
  justify-content:center;

  /* keep whole card clickable */
  pointer-events:none;

  opacity:0;
  transform:translateY(12px);
  transition:opacity .45s ease, transform .45s ease;
}

.ad-pack-card:hover .ad-pack-overlay{
  opacity:1;
  transform:translateY(0);
}

.ad-pack-overlay-inner{
  width: min(var(--ad-panel-width), 92%);
  padding: 26px 24px;

  display:flex;
  flex-direction:column;
  gap:12px;

  align-items:center;
  text-align:center;
}

/* Same readable column width for ALL lines */
.ad-pack-label,
.ad-pack-meta,
.ad-pack-flavour,
.ad-pack-cta,
.ad-pack-price{
  width:100%;
  max-width: var(--ad-text-width);
  margin-left:auto;
  margin-right:auto;

  text-shadow:
    0 2px 6px rgba(0,0,0,.90),
    0 0 12px rgba(0,0,0,.82);

  opacity:0;
  transform:translateY(10px);
  transition:opacity .40s ease, transform .40s ease;
}

/* Reveal on hover */
.ad-pack-card:hover .ad-pack-label,
.ad-pack-card:hover .ad-pack-meta,
.ad-pack-card:hover .ad-pack-flavour,
.ad-pack-card:hover .ad-pack-cta,
.ad-pack-card:hover .ad-pack-price{
  opacity:1;
  transform:translateY(0);
}

/* Stagger */
.ad-pack-label{  transition-delay:.10s; }
.ad-pack-meta{   transition-delay:.18s; }
.ad-pack-flavour{transition-delay:.24s; }
.ad-pack-cta{    transition-delay:.30s; }
.ad-pack-price{  transition-delay:.36s; }

/* =========================================================
   TYPOGRAPHY + COLORS (LOCKED)
   - Body: WHITE
   - Title + Flavour + Price: GOLD
   - CTA: off-white
   ========================================================= */

/* TITLE — GOLD */
.ad-pack-label{
  font-family: var(--gdc-h2-font);
  text-transform: none;
  letter-spacing: .12em;
  font-size: clamp(26px, 2.8vw, 40px);
  line-height: 1.12;
  color: #ffecc0 !important;
}

/* BODY — WHITE */
.ad-pack-meta{
  font-family: var(--gdc-h1-font);
  text-transform: none;
  letter-spacing: .05em;
  font-size: clamp(15px, 1.6vw, 19px);
  line-height: 1.62;
  white-space: pre-line;
  color: rgba(245,241,230,0.92) !important;
}

/* FLAVOUR — GOLD */
.ad-pack-flavour{
  font-family: var(--gdc-h1-font);
  text-transform: none;
  letter-spacing: .14em;
  font-size: clamp(13px, 1.35vw, 16px);
  line-height: 1.45;
  color: #ffecc0 !important;
}

/* CTA — off-white + glow */
.ad-pack-cta{
  font-family: var(--gdc-h2-font);
  text-transform: none;
  letter-spacing: .18em;
  font-size: clamp(18px, 2vw, 28px);
  color: #f5f1e6 !important;

  display:inline-flex;
  justify-content:center;
  align-items:center;

  pointer-events:auto;

  transition:
    opacity .40s ease,
    transform .40s ease,
    color .20s ease,
    text-shadow .20s ease;
}

.ad-pack-cta:hover{
  color:#fffdf3 !important;
  text-shadow:
    0 0 12px rgba(255,240,200,1),
    0 0 24px rgba(195,174,130,1),
    0 0 42px rgba(195,174,130,.95);
  transform: translateY(-1px);
  cursor:pointer;
}

/* PRICE — GOLD */
.ad-pack-price{
  font-family: var(--gdc-h1-font);
  text-transform: none;
  letter-spacing: .14em;
  font-size: clamp(18px, 2.1vw, 24px);
  color: #ffecc0 !important;
}

/* =========================================================
   IMAGE ONLY VARIANT
   (hover swap + glow, NO overlay, NO dim)
   Usage: class="ad-pack-card ad-pack-card--imageonly"
   ========================================================= */

.ad-pack-card--imageonly .ad-pack-overlay{ display:none !important; }
.ad-pack-card--imageonly .ad-pack-media::after{ display:none !important; }

.ad-pack-card--imageonly:hover .ad-pack-img.primary{
  opacity:0;
  transform:scale(1.02);
  filter:none !important;
}
.ad-pack-card--imageonly:hover .ad-pack-img.secondary{
  opacity:1;
  transform:scale(var(--ad-hover-scale));
  filter:none !important;
}

/* =========================================================
   RESPONSIVE (mobile): keep centered column
   ========================================================= */

@media (max-width: 768px){
  .ad-pack-overlay-inner{
    width: min(560px, 94%);
    padding: 18px 18px 20px;
    gap: 10px;
  }

  .ad-pack-label,
  .ad-pack-meta,
  .ad-pack-flavour,
  .ad-pack-cta,
  .ad-pack-price{
    max-width: 54ch;
  }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce){
  .ad-pack-overlay,
  .ad-pack-label,
  .ad-pack-meta,
  .ad-pack-flavour,
  .ad-pack-cta,
  .ad-pack-price{
    transition: opacity .25s linear !important;
    transform: none !important;
  }

  .ad-pack-img.primary,
  .ad-pack-img.secondary{
    transition: opacity .25s linear !important;
    transform: none !important;
    filter: none !important;
  }

  .ad-pack-media::after{
    transition: opacity .25s linear !important;
  }
}
/* ---------------------------------------------------------
   1B) GENERIC 16:9 CONTENT CARD (interactive, not a banner)
   --------------------------------------------------------- */

.gdc-card-169{
  position: relative;
  display: block;
  width: 100%;

  /* WordPress sanitizer-safe */
  aspect-ratio: 16/9;

  overflow: hidden;

  background: var(--card-bg);
  border: 1px solid var(--card-bdr);
  border-radius: var(--card-radius);

  box-shadow: 0 0 0 1px rgba(255,255,255,0.03) inset;

  transition:
    border-color 0.18s ease,
    box-shadow 0.18s ease,
    transform 0.18s ease;
}

/* Media inside */
.gdc-card-169 img,
.gdc-card-169 video,
.gdc-card-169 iframe{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;

  transition:
    transform 0.22s ease,
    filter 0.22s ease;
}

/* Hover = subtle lift + light + grimdark red aura */
.gdc-card-169:hover{
  border-color: var(--card-hover);
  box-shadow:
    0 10px 28px rgba(0,0,0,0.38),
    0 0 22px rgba(120, 18, 18, 0.35), /* dark red glow */
    0 0 0 1px rgba(195,174,130,0.45);
  transform: translateY(-1px);
}

.gdc-card-169:hover img,
.gdc-card-169:hover video{
  transform: scale(1.025);
  filter: brightness(1.03) contrast(1.02);
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce){
  .gdc-card-169,
  .gdc-card-169 img,
  .gdc-card-169 video,
  .gdc-card-169 iframe{
    transition: none !important;
    transform: none !important;
    filter: none !important;
  }
}
/* =========================================================
   GDC — 16:9 CARD + LEFT PANEL OVERLAY (HOVER ONLY)
   (Robust: shade/blur applies even if __panel-inner is missing)
   ========================================================= */

.gdc-169-overlay{
  position: relative;
  display: block;
  width: 100%;
  overflow: hidden;
  aspect-ratio: 16/9;

  background: var(--card-bg);
  border: 1px solid var(--card-bdr);
  border-radius: var(--card-radius);

  box-shadow: 0 0 0 1px rgba(255,255,255,0.03) inset;
  text-decoration: none !important;
  color: inherit;

  transition: border-color 0.18s ease, box-shadow 0.18s ease, transform 0.18s ease;
}

/* Image */
.gdc-169-overlay__img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.22s ease, filter 0.22s ease;
}

/* ---------------------------------------------------------
   Panel (position + VISUAL SURFACE)
   Note: We apply the shade/blur here so it still works if
   your HTML doesn't include .gdc-169-overlay__panel-inner.
   --------------------------------------------------------- */
.gdc-169-overlay__panel{
  position: absolute;
  left: 16px;
  bottom: 16px;
  z-index: 2;

  /* VISUAL SURFACE */
  padding: 14px 16px;
  border-radius: 10px;
  background: rgba(0,0,0,0.55);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);

  box-shadow:
    0 10px 26px rgba(0,0,0,0.55),
    inset 0 0 0 1px rgba(255,255,255,0.06);

  text-shadow: 0 2px 10px rgba(0,0,0,0.95);
  max-width: min(60ch, calc(100vw - 64px));

  /* animation base */
  opacity: 0;
  transform: translateY(10px);
  pointer-events: none;

  transition:
    opacity 0.45s ease 0.14s,
    transform 0.45s ease 0.14s;
}

/* Inner wrapper is OPTIONAL now (layout only) */
.gdc-169-overlay__panel-inner{
  display: block;
  padding: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  max-width: none;
}

/* Title */
.gdc-169-overlay__eyebrow{
  font-family: var(--gdc-h1-font);
  text-transform: uppercase;
  letter-spacing: 0.16em;
  font-size: 13px;
  color: #ffecc0;
  margin: 0 0 6px 0;
}

/* Body */
.gdc-169-overlay__text{
  font-family: var(--gdc-h1-font);
  font-size: 14px;
  line-height: 1.45;
  letter-spacing: 0.04em;
  color: rgba(245,241,230,0.92);
  overflow-wrap: anywhere;
}

/* Hover behaviour */
.gdc-169-overlay:hover{
  border-color: var(--card-hover);
  box-shadow:
    0 10px 28px rgba(0,0,0,0.38),
    0 0 22px rgba(120,18,18,0.35),
    0 0 0 1px rgba(195,174,130,0.45);
  transform: translateY(-1px);
}

.gdc-169-overlay:hover .gdc-169-overlay__img{
  transform: scale(1.025);
  filter: brightness(1.03) contrast(1.02);
}

.gdc-169-overlay:hover .gdc-169-overlay__panel{
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

/* ---------------------------------------------------------
   Overlay policy:
   - Hover-capable desktops (mouse/trackpad): FORCE enable
   - Touch devices (mobile/tablet): disable reveal + hover fx
   --------------------------------------------------------- */

/* Force-enable overlay reveal on hover-capable devices */
@media (hover: hover) and (pointer: fine){
  .gdc-169-overlay:hover .gdc-169-overlay__panel{
    opacity: 1 !important;
    transform: translateY(0) !important;
    pointer-events: auto !important;
  }
}

/* Disable overlay + hover effects on touch devices */
@media (hover: none) and (pointer: coarse){

  /* Keep overlay hidden (shade/blur styling remains intact) */
  .gdc-169-overlay__panel{
    opacity: 0 !important;
    transform: translateY(10px) !important;
    pointer-events: none !important;
  }

  /* Neutralize hover reactions */
  .gdc-169-overlay:hover{
    transform: none !important;
  }

  .gdc-169-overlay:hover .gdc-169-overlay__img{
    transform: none !important;
    filter: none !important;
  }

  .gdc-169-overlay:hover .gdc-169-overlay__panel{
    opacity: 0 !important;
    transform: translateY(10px) !important;
    pointer-events: none !important;
  }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce){
  .gdc-169-overlay,
  .gdc-169-overlay__img,
  .gdc-169-overlay__panel{
    transition: none !important;
    transform: none !important;
    filter: none !important;
  }
}