/* ======================================================
   ub-v2.css – v1.3.2 stable — 2025-10-04
   Underbug Child Theme — Clean scoped structure
   Focus: Home hero, shop header, product grid, footer
   Next: Mini-cart island rework
====================================================== */

/* ================================
   CUSTOM FONT — GT Pressura Mono
================================ */
@font-face {
  font-family: 'GT Pressura Mono';
  src: url('fonts/GT-Pressura-Mono-Regular.woff2') format('woff2'),
    url('fonts/GT-Pressura-Mono-Regular.woff') format('woff');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'GT Pressura Mono';
  src: url('fonts/GT-Pressura-Mono-Bold.woff2') format('woff2'),
    url('fonts/GT-Pressura-Mono-Bold.woff') format('woff');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'GT Pressura Mono';
  src: url('fonts/GT-Pressura-Mono-Light.woff2') format('woff2'),
    url('fonts/GT-Pressura-Mono-Light.woff') format('woff');
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}

/* ===============================================
   ub-v2.css — mobile-first, scoped, layered
   Home + Archive separation with footer fix
================================================ */
@layer tokens, base, layout, components, utilities, desktop, woocommerce;


/* ================================
   TOKENS — Design system
================================ */
@layer tokens {
  :where(.ub-v2) {
    --ub-clr-ink: #1E1E1E;
    --ub-clr-bg: #DDDCBC;
    --ub-clr-accent: #FFDB00;
    --ub-clr-brand: #510000;

    --ub-radius: 10px;
    --ub-rail-width: clamp(820px, 60vw, 1200px);
    --ub-gutter: clamp(8px, 2vw, 16px);
    --ub-margin-fluid: 3px;

    --ub-fs-50: clamp(12px, 3.5vw, 14px);
    --ub-fs-100: clamp(14px, 3.2vw, 16px);
    --ub-fs-200: clamp(16px, 3vw, 18px);
    --ub-fs-300: clamp(18px, 2.4vw, 20px);
    --ub-fs-400: clamp(20px, 2.2vw, 24px);
  }
}

/* ================================
   BASE — Global resets & fonts
================================ */
@layer base {
  :where(.ub-v2) {
    font-family: 'GT Pressura Mono', monospace;
    color: var(--ub-clr-ink);
    overflow-x: hidden;
    margin: 0;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
  }

  :where(body.home.ub-v2) img {
    max-width: 100%;
    height: auto;
    display: block;
  }

  :where(.ub-v2) a {
    text-decoration: none;
    color: inherit;
  }

  main,
  .page-content {
    flex: 1;
  }


}

/* ================================
   LAYOUT — Page structure
================================ */
@layer layout {
  :where(body.home.ub-v2) .page-content {
    max-width: var(--ub-rail-width);
    box-sizing: border-box;
    position: relative;
    z-index: 2;
    display: flex;
    flex-direction: column;
    gap: 3px;
    margin-left: auto;
    margin-right: 0;
    padding-right: 3px;
  }

  :where(body.home.ub-v2) .underbug-info-stack,
  :where(body.home.ub-v2) .underbug-product-stack {
    display: flex;
    flex-direction: column;
    gap: var(--ub-margin-fluid);
    align-items: flex-end;
  }

  @media (max-width: 1024px) {

    :where(body.home.ub-v2) .underbug-info-stack,
    :where(body.home.ub-v2) .underbug-product-stack {
      align-items: center;
    }

    .footer-container.footer-home,
    .footer-container.footer-archive {
      align-items: center;
    }





  }


}



/* plugin */
@layer components {
  /* Underbug — WOOFC drawer fixes */

  .woofc-action-left {
    display: none !important;
  }

  .woofc-action-inner {
    justify-content: center !important;
  }

  .woofc-action-right {
    width: 100% !important;
    flex: 1 1 100% !important;
  }

  a.woofc-action-checkout {
    display: block !important;
    width: 100% !important;
    text-align: center !important;
  }
}

/* ================================
   COMPONENTS — Content blocks
================================ */
@layer components {



  @media (max-width: 1199px) {

    :where(body.home) .ub-v2 .underbug-hero-slide picture,
    :where(body.home) .ub-v2 .underbug-hero-slide img {
      pointer-events: none !important;
    }

    :where(body.home) .ub-v2 .underbug-hero-dots,
    :where(body.home) .ub-v2 .underbug-hero-dot {
      pointer-events: auto !important;
    }

    :where(body.home) .ub-v2 .underbug-hero-slider {
      touch-action: pan-y !important;
    }

    :where(body.home) .ub-v2 .underbug-hero {
      position: relative;
      
      padding: 0 var(--ub-margin-fluid);
      box-sizing: border-box;
      margin: 0;
      overflow: hidden;
      z-index: 1;
      border-radius: 12px;
    }

    :where(body.home) .ub-v2 .underbug-hero-slider,
    :where(body.home) .ub-v2 .underbug-hero-slide {
      position: relative;
      width: 100%;
      height: 100%;
      overflow: visible !important;
    }

    :where(body.home) .ub-v2 .underbug-hero-slide {
      display: none;
      justify-content: center;
      align-items: center;
    }

    :where(body.home) .ub-v2 .underbug-hero-slide.active {
      display: flex;
    }

    :where(body.home) .ub-v2 .underbug-hero-slide img,
    :where(body.home) .ub-v2 .underbug-hero-slide picture {
      width: 100%;
      height: 100%;
      display: block;
    }

    :where(body.home) .ub-v2 .underbug-hero-slide img {
      object-fit: cover;
      transform: scale(1.03);
      transform-origin: center;
    }

    :where(body.home) .ub-v2 .underbug-hero-slide .underbug-hero-bleed {
      display: none !important;
    }

    :where(body.home) .ub-v2 .page-content {
      margin-left: 0.188rem;
      margin-right: 0.188rem;
    }
  }



  .underbug-hero-slide .underbug-hero-bleed {
    position: absolute;
    top: -1rem;
    right: -24vw;
    width: 25vw;
    height: 104.5vh;
    background-image: var(--bleed-img);
    background-size: cover;
    background-position: center right;
    filter: blur(6px);
    transform: scaleX(-1);
    pointer-events: none;
    z-index: 0;
  }

  /* keep the main image above the bleed layer */
  .underbug-hero-slide picture,
  .underbug-hero-slide img {
    position: relative;
    z-index: 1;
  }


  @media (max-width: 1199px) {

    /* ----------------------------
     INFO BOXES
  ---------------------------- */
    :where(body.home.ub-v2) .info-box {
      padding: 30px 30px 20px 30px;
      border-radius: var(--ub-radius);
      background: #fff;
      box-sizing: border-box;
      color: var(--ub-clr-ink);
      text-transform: uppercase;
      font-size: var(--ub-fs-200);
      width: 100%;
    }

    :where(body.home.ub-v2) .info-box.yellow {
      background-color: var(--ub-clr-accent);
      color: var(--ub-clr-brand);
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      gap: 8px;
    }

    :where(body.home.ub-v2) .info-box.yellow h3 {
      font-size: var(--ub-fs-300);
      margin: 0 0 50px;
      font-weight: 400;
    }

    :where(body.home.ub-v2) .info-box.yellow p {
      font-size: var(--ub-fs-100);
      line-height: 1.4;
      margin: 0;
      text-transform: none;
      font-weight: 400;
    }

    :where(body.home.ub-v2) .info-box.yellow a {
      color: var(--ub-clr-accent);
    }

    :where(body.home.ub-v2) .info-box.green {
      background-color: #DDDCBC;
      color: #006100;
      font-size: var(--ub-fs-400);
      line-height: 1.4rem;
      font-weight: 400;
    }

    :where(body.home.ub-v2) .info-box.logo-box {
      background: none;
      border: 0;
      padding: 0rem;
      display: flex;
      align-items: center;
      justify-content: center;
    }

    :where(body.home.ub-v2) .info-box.logo-box img {
      width: 100%;
      object-fit: contain;
    }

    /* ----------------------------
     PRODUCT BOXES (Home)
  ---------------------------- */
    :where(body.home.ub-v2) .product-box {
      padding: 20px;
      border-radius: var(--ub-radius);
      display: flex;
      flex-direction: column;
      gap: 20px;
      text-align: left;
      min-height: 360px;
      box-sizing: border-box;
      width: 100%;
    }


    :where(body.home.ub-v2) .product-box img {
      border-radius: var(--ub-radius);
      width: 100%;
      margin: 0 auto;
      display: block;
    }

    :where(body.home.ub-v2) .product-box h3 {
      font-size: var(--ub-fs-200);
      margin: 0rem 0 2rem 0;
      text-transform: uppercase;
    }

    :where(body.home.ub-v2) .product-box p {
      font-size: var(--ub-fs-100);
      line-height: 1.5;
      margin: 0;
    }

    .ub-v2 .btn,
    :where(body.home.ub-v2) .product-box .button {
      display: inline-block;
      margin-top: 2rem;
      align-self: flex-start;
      background: var(--ub-clr-brand);
      color: white;
      padding: 0.3rem 1rem 0.3rem 1rem;
      border-radius: 20px;
      font-size: 1rem;
      font-weight: 400;
      letter-spacing: 0.5px;
      text-align: center;

      text-transform: uppercase;

      text-align: center;

    }

    .ub-v2 .btn:hover,
    :where(body.home.ub-v2) .product-box .button:hover {
      background: var(--ub-clr-brand);
    }
  }

  @media (min-width: 1200px) {
    :where(body.home.ub-v2) .underbug-hero-dots {
      position: fixed;
      bottom: 20px;
      left: 20px;
      transform: none;

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

      padding: 10px 22px;
      background: #DEDDAB;
      /* your light beige */
      border-radius: 999px;
      /* pill shape */
      box-shadow: 0 4px 10px rgba(0, 0, 0, 0.08);

      z-index: 9999;
      /* stays above hero */
    }

    /* outer ring */
    :where(body.home.ub-v2) .underbug-hero-dot {
      width: 15px;
      height: 15px;

      border: 2px solid #1E1E1E;
      border-radius: 50%;
      background-color: transparent;

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

      transition: transform 0.2s ease, background-color 0.2s ease;
    }

    /* inner filled active circle */
    :where(body.home.ub-v2) .underbug-hero-dot::after {
      content: "";
      width: 12.5px;
      height: 12.5px;
      border-radius: 50%;
      background: #1E1E1E;
      opacity: 0;
      transition: opacity 0.25s ease;
    }

    :where(body.home.ub-v2) .underbug-hero-dot.active::after {
      opacity: 1;
    }

    /* optional hover */
    :where(body.home.ub-v2) .underbug-hero-dot:hover {
      transform: scale(1.05);
    }






    /* ================================
   ARCHIVE / SHOP — DESKTOP
   Responsive grid, portrait images, full-width button
================================ */
    :where(body.archive.woocommerce) {
      background: var(--ub-clr-bg);
      font-family: 'GT Pressura Mono', monospace;

    }

    /* ✅ Product Grid — 3 per row */
    :where(body.archive.woocommerce) ul.products {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 3vw;
      list-style: none;
      margin: 0 auto;
      padding: 0;
      justify-items: center;
    }

    /* ✅ Product Card */
    :where(body.archive.woocommerce) ul.products li.product {
      background: #ffffff00;
      border: none;
      box-shadow: none;
      display: flex;
      flex-direction: column;
      align-items: center;
      text-align: center;
      width: 100%;
      max-width: 23vw;
      /* padding: 1vw 0vw 0vw 0vw; */
      box-sizing: border-box;
      transition: transform 0.25s ease;
      /* margin-bottom: 50px; */

    }


    /* ✅ Product Image — Portrait 3:4 ratio */
    :where(body.archive.woocommerce) ul.products li.product a img {
      width: 100%;
      height: auto;
      aspect-ratio: 3 / 4;
      object-fit: contain;
      border-radius: var(--ub-radius);
      opacity: 0.7;
    }

    :where(body.archive.woocommerce) ul.products li.product:hover a img {
      opacity: 100%;
      transform: translateY(-0.1vh);
    }

    /* ✅ Title + Price Row */
    :where(body.archive.woocommerce) ul.products li.product .title-price-row {
      display: flex;
      flex-direction: initial;
      justify-content: center;
      align-items: center;
      gap: 2.0vh;
      width: 100%;
      margin-bottom: 2vh;
    }

    :where(body.archive.woocommerce) ul.products li.product .woocommerce-loop-product__title {
      font-size: clamp(0.9rem, 1vw, 1.1rem);
      font-weight: 400;
      text-transform: uppercase;
      color: var(--ub-clr-ink);
      margin: 0;
    }

    :where(body.archive.woocommerce) ul.products li.product .price {
      font-size: clamp(0.9rem, 1vw, 1.1rem);
      font-weight: 400;
      color: var(--ub-clr-ink);
    }

    /* ✅ Full-width Add-to-Cart Button */
    :where(body.archive.woocommerce) ul.products li.product a.button {
      display: inline-block;
      background: var(--ub-clr-ink);
      color: var(--ub-clr-bg);
      border-radius: 20px;
      font-size: 16px;
      font-weight: 400;
      letter-spacing: 0.5px;
      text-transform: uppercase;
      text-align: center;
      transition: background 0.25s ease;
      line-height: 100%;
      padding: 0.7rem 1rem 0.5rem 1rem;
      border: none !important;
      text-align: center;
      /* width: 30%; */
      margin: 0 auto;
      cursor: pointer;

    }

    :where(body.archive.woocommerce) ul.products li.product a.button:hover {
      background: #222;

    }

    /* ✅ Added to cart link (after click) */
    :where(body.archive.woocommerce) a.added_to_cart {
      display: block;
      width: 100%;
      margin-top: 1vh;
      padding: 1vh 0;
      background: var(--ub-clr-accent);
      color: var(--ub-clr-ink);
      border-radius: 50px;
      text-transform: uppercase;
      font-size: clamp(0.8rem, 0.9vw, 1rem);
      text-align: center;
      transition: background 0.25s ease;
    }

    :where(body.archive.woocommerce) a.added_to_cart:hover {
      background: #e0c900;
    }


    /* ----------------------------
     FOOTER — home + archive
  ---------------------------- */
    .underbug-footer {
      font-family: 'GT Pressura Mono', monospace;

      max-width: var(--ub-rail-width);
      margin-left: 3px;
      margin-right: 3px;
      font-size: var(--ub-fs-50) !important;
      margin-top: 3px;
      margin-bottom: 2px;

    }


    .footer-container.footer-shop-only,
    .footer-container.footer-home,
    .footer-container.footer-shop {
      display: flex;
      flex-direction: column;
      gap: 2px;
      max-width: var(--ub-rail-width);
      align-items: flex-end;
    }

    .footer-container.footer-shop-only>div,
    .footer-container.footer-home>div,
    .footer-container.footer-shop>div {
      background: #222;
      border-radius: var(--ub-radius);
      padding: 20px;
      color: var(--ub-clr-bg);
      display: grid;
      grid-template-columns: 120px 1fr;
      align-items: start;
      gap: 16px;
      width: clamp(320px, 25vw, 477px);
    }

    .footer-container.footer-shop-only h3,
    .footer-container.footer-home h3,
    .footer-container.footer-shop h3 {
      font-size: var(--ub-fs-50);
      color: var(--ub-clr-bg);
      text-align: left;
      margin: 0px;
    }

    .footer-container.footer-shop-only ul,
    .footer-container.footer-home ul,
    .footer-container.footer-shop ul {
      list-style: none;
      margin: 0;
      padding: 0;
      display: flex;
      flex-direction: column;
      gap: 0px;
      align-items: flex-start;
    }

    .footer-container.footer-shop-only li,
    .footer-container.footer-home li,
    .footer-container.footer-shop li {
      margin: 0;
    }

    .footer-container.footer-shop-only a,
    .footer-container.footer-home a,
    .footer-container.footer-shop a {
      color: var(--ub-clr-bg);
      text-decoration: none;
      /* font-size: var(--ub-fs-50); */
      line-height: 1.5;
      transition: color 0.2s ease;
    }

    .footer-container.footer-shop-only a:hover,
    .footer-container.footer-home a:hover,
    .footer-container.footer-shop a:hover {
      color: #ffffff;
    }

    /* Hide logo ONLY on home and single-product page */

    body.home .footer-logo,
    body.single-product .footer-logo {
      display: none !important;
    }

    body.archive .footer-logo {
      background: none;
      padding: 0 !important;
      width: 105% !important;
      margin-bottom: 0 !important;
    }

    /* ✅ Reset all list item margins */
    .footer-pages ul li {
      margin-top: 0;
    }

    /* Small gap between normal items */

    .footer-socials ul li+li {
      margin-top: 6px;
    }

    /* Bigger gap ONLY after every 2nd item (before 3rd, 5th, 7th...) */

    .footer-pages ul li:nth-child(2n + 1):not(:first-child) {
      margin-top: 16px;
    }

    .footer-contact ul li:nth-child(1n + 1):not(:first-child) {
      margin-top: 16px;
    }


    /* Add this in the desktop layer around line 2100+ where single product styles are */

    /* ================================
   SINGLE PRODUCT FOOTER - Independent styling
================================ */

    body.single-product .underbug-footer {
      font-family: 'GT Pressura Mono', monospace;
      width: 100%;
      max-width: 100%;
      margin: 0;
      font-size: var(--ub-fs-100) !important;
    }

    body.single-product .footer-container.footer-home {
      display: flex;
      flex-direction: column;
      gap: 3px;
      width: 100%;
      max-width: 100%;
      align-items: stretch;
    }

    body.single-product .footer-container.footer-home>div {
      background: #222;
      border-radius: var(--ub-radius);
      padding: 20px;
      color: var(--ub-clr-bg);
      display: grid;
      grid-template-columns: 120px 1fr;
      align-items: start;
      gap: 16px;
      width: 100%;
      max-width: 100%;
      box-sizing: border-box;
    }

    body.single-product .footer-container.footer-home h3 {
      font-size: var(--ub-fs-100);
      color: var(--ub-clr-bg);
      text-align: left;
      margin: 0px;

    }

    body.single-product .footer-container.footer-home ul {
      list-style: none;
      margin: 0;
      padding: 0;
      display: flex;
      flex-direction: column;
      gap: 0px;
      align-items: flex-start;
    }

    body.single-product .footer-container.footer-home li {
      margin: 0;
    }

    body.single-product .footer-container.footer-home a {
      color: var(--ub-clr-bg);
      text-decoration: none;
      /* font-size: var(--ub-fs-50); */
      line-height: 1.5;
      transition: color 0.2s ease;
    }

    body.single-product .footer-container.footer-home a:hover {
      color: #ffffff;
    }

    /* Single product footer spacing */
    body.single-product .footer-pages ul li {
      margin-top: 0;
    }

    body.single-product .footer-socials ul li+li {
      margin-top: 6px;
    }

    body.single-product .footer-pages ul li:nth-child(2n + 1):not(:first-child) {
      margin-top: 16px;
    }

    body.single-product .footer-contact ul li:nth-child(1n + 1):not(:first-child) {
      margin-top: 16px;
    }



    body.single-product .underbug-inner-footer {
      width: 100%;

      box-sizing: border-box;
    }

    body.single-product .underbug-inner-footer .footer-container {
      width: 100% !important;
      max-width: 100% !important;
      align-items: stretch !important;
    }


    body.single-product .underbug-inner-footer .footer-container>div {
      width: 100% !important;
      max-width: 100% !important;
    }


    body.single-product .footer-container.footer-home>div {
      width: 100% !important;
    }

    body.archive .underbug-footer {
      width: 100%;
      max-width: none;
      margin: 25px 0 3px 0;
      padding: 0 3px;
      box-sizing: border-box;
    }

    body.archive .footer-container.footer-shop-only {
      width: 100%;
      max-width: 100% !important;
      margin: 0;
      display: grid;
      grid-template-columns: repeat(4, minmax(0, 1fr));
      gap: 3px;
      box-sizing: border-box;
    }

    body.archive .footer-container.footer-shop-only>div {
      width: 100% !important;
      max-width: 100% !important;
      min-width: 0;
      padding: 20px;
      box-sizing: border-box;
      background: #222;
      border-radius: var(--ub-radius);
      color: var(--ub-clr-bg);
      display: grid;
      grid-template-columns: 120px 1fr;
      gap: 16px;
      align-items: start;
    }

    body.archive .footer-container.footer-shop-only>.footer-pages {
      order: 1;
    }

    body.archive .footer-container.footer-shop-only>.footer-contact {
      order: 2;
    }

    body.archive .footer-container.footer-shop-only>.footer-socials {
      order: 3;
    }

    body.archive .footer-container.footer-shop-only>.footer-logo {
      order: 4;
      display: flex;
      align-items: center;
      justify-content: center;
      background: none;
      padding: 0 !important;
    }

    body.archive .footer-container.footer-shop-only .footer-logo img {
      width: 100%;
      max-width: 100%;
      height: auto;
      display: block;
    }


    /* ----------------------------
     INFO BOXES
  ---------------------------- */
    :where(body.home.ub-v2) .info-box {
      padding: 30px 30px 20px 30px;
      border-radius: var(--ub-radius);
      background: #fff;
      box-sizing: border-box;
      color: var(--ub-clr-ink);
      text-transform: uppercase;
      font-size: var(--ub-fs-200);
      width: 100%;
    }

    :where(body.home.ub-v2) .info-box.yellow {
      background-color: var(--ub-clr-accent);
      color: var(--ub-clr-brand);
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      gap: 8px;
    }

    :where(body.home.ub-v2) .info-box.yellow h3 {
      font-size: var(--ub-fs-300);
      margin: 0 0 50px;
      font-weight: 400;
    }

    :where(body.home.ub-v2) .info-box.yellow p {
      font-size: var(--ub-fs-100);
      line-height: 1.4;
      margin: 0;
      text-transform: none;
      font-weight: 400;
    }

    :where(body.home.ub-v2) .info-box.yellow a {
      color: var(--ub-clr-accent);
    }

    :where(body.home.ub-v2) .info-box.green {
      background-color: #DDDCBC;
      color: #006100;
      font-size: var(--ub-fs-400);
      line-height: 1.4rem;
      font-weight: 400;
    }

    :where(body.home.ub-v2) .info-box.logo-box {
      background: none;
      border: 0;
      padding: 0rem;
      display: flex;
      align-items: center;
      justify-content: center;
    }

    :where(body.home.ub-v2) .info-box.logo-box img {
      width: 100%;
      object-fit: contain;
    }

    /* ----------------------------
     PRODUCT BOXES (Home)
  ---------------------------- */
    :where(body.home.ub-v2) .product-box {
      padding: 20px;
      border-radius: var(--ub-radius);
      display: flex;
      flex-direction: column;
      gap: 20px;
      text-align: left;
      min-height: 360px;
      box-sizing: border-box;
      width: 100%;
    }


    :where(body.home.ub-v2) .product-box img {
      border-radius: var(--ub-radius);
      width: 100%;
      margin: 0 auto;
      display: block;
    }

    :where(body.home.ub-v2) .product-box h3 {
      font-size: var(--ub-fs-200);
      margin: 0rem 0 2rem 0;
      text-transform: uppercase;
    }

    :where(body.home.ub-v2) .product-box p {
      font-size: var(--ub-fs-100);
      line-height: 1.5;
      margin: 0;
    }

    .ub-v2 .btn,
    :where(body.home.ub-v2) .product-box .button {
      display: inline-block;
      margin-top: 2rem;
      align-self: flex-start;
      background: var(--ub-clr-brand);
      color: white;
      padding: 0.45rem 1rem 0.3rem 1rem;
      border-radius: 20px;
      font-size: 1rem;
      font-weight: 400;
      letter-spacing: 0.5px;
      text-align: center;

      text-transform: uppercase;

      text-align: center;

    }

    .ub-v2 .btn:hover,
    :where(body.home.ub-v2) .product-box .button:hover {
      background: var(--ub-clr-brand);
    }




  }




  /* ----------------------------
     SHOP / ARCHIVE — mobile only
  ---------------------------- */
  @media (max-width: 1024px) {

    body.archive.woocommerce,
    body.single-product {
      background-color: #DDDCBC;
      font-family: 'GT Pressura Mono', monospace !important;
    }

    .woocommerce ul.products {
      display: grid;
      grid-template-columns: 1fr;
      gap: 100px;
      margin: 0 auto 40px;
      padding: 0;
      list-style: none;
      max-width: 100%;
      box-sizing: border-box;
      justify-items: center;
    }

    .woocommerce ul.products li.product {
      background: none;
      border: none;
      box-shadow: none;
      text-align: center;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      margin: 0 auto;
      box-sizing: border-box;
      width: 100%;
      max-width: 420px;
    }

    .woocommerce ul.products li.product a img {
      width: 100%;
      max-width: 200px;
      height: auto;
      object-fit: contain;
      margin: 0 auto;
      border-radius: 10px;
      /* opacity: 0.7; */
      transition: opacity 0.3s;
    }

    .woocommerce ul.products li.product:hover a img {
      opacity: 1;
    }

    .woocommerce ul.products li.product .title-price-row {
      display: flex;
      justify-content: center;
      align-items: center;
      gap: 12px;
      width: 100%;
      margin-top: 0.5rem;
      font-size: var(--ub-fs-100);
    }

    .woocommerce ul.products li.product .product-title-wrap {
      flex: 0 0 auto;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;


    }

    .woocommerce ul.products li.product .woocommerce-loop-product__title {
      font-size: 16px !important;
      font-weight: 400;
      text-transform: uppercase;
      color: var(--ub-clr-ink);
      margin: 0;
      text-align: center;
    }

    .woocommerce ul.products li.product .product-price-wrap {
      flex: 0 0 auto;
      white-space: nowrap;
    }

    .woocommerce ul.products li.product .price {
      font-size: 16px !important;
      font-weight: 400;
      color: var(--ub-clr-ink);
      margin: 0;
    }

    body.single-product .single_add_to_cart_button {
      display: inline-block;
      background: var(--ub-clr-ink);
      color: var(--ub-clr-bg);
      border-radius: 20px;
      font-size: 14px;
      font-weight: 400;
      letter-spacing: 0.5px;
      text-transform: uppercase;
      text-align: center;
      transition: background 0.25s ease;
      line-height: 100%;
      padding: 0.7rem 0.7rem 0.7rem 0.7rem;
      border: none !important;
      text-align: center;
      margin: 10px auto;
    }

    .woocommerce ul.products li.product a.button {
      display: inline-block;
      background: var(--ub-clr-ink);
      color: var(--ub-clr-bg);
      border-radius: 20px;
      font-size: 14px;
      font-weight: 400;
      letter-spacing: 0.5px;
      text-transform: uppercase;
      text-align: center;
      transition: background 0.25s ease;
      line-height: 100%;
      padding: 0.7rem 0.7rem 0.6rem 0.7rem;
      border: none !important;
      text-align: center;
      /* width: 30%; */
      margin: 10px auto;
    }



    .woocommerce ul.products li.product a.button:hover {
      background: #222;
    }

    :where(body.archive.woocommerce) a.added_to_cart {
      display: inline-block !important;
      margin-left: 0.5rem;
      background: var(--ub-clr-accent);
      color: var(--ub-clr-ink);
      border-radius: 20px;
      padding: 0.35rem 0.9rem;
      font-size: var(--ub-fs-100);
      text-transform: uppercase;
    }

    :where(body.archive.woocommerce) .add-to-cart-wrap,
    .ub-v2 .add-to-cart-wrap {
      display: flex;
      justify-content: center;
      align-items: center;
      gap: 8px;
      margin-top: 0.8rem;
      width: 100%;
    }
  }

  @media (max-width: 1024px) {





    /* ----------------------------
       NEW: Desktop-style fixed dots for Mobile/Tablet
    ---------------------------- */
    :where(body.home.ub-v2) .underbug-hero-dots {
      position: absolute;

      bottom: 15px;
      left: 20%;

      transform: translateX(-50%);


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

      padding: 10px 22px;
      background: #DEDDAB;
      border-radius: 999px;
      box-shadow: 0 4px 10px rgba(0, 0, 0, 0.08);

      z-index: 9999;
    }

    /* outer ring */
    :where(body.home.ub-v2) .underbug-hero-dot {
      width: 10px;
      height: 10px;
      border: 2px solid #1E1E1E;
      border-radius: 50%;
      background-color: transparent;
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;

    }

    /* inner filled active circle */
    :where(body.home.ub-v2) .underbug-hero-dot::after {
      content: "";
      width: 8px;
      height: 8px;
      border-radius: 50%;
      background: #1E1E1E;
      opacity: 0;

    }

    :where(body.home.ub-v2) .underbug-hero-dot.active::after {
      opacity: 1;
    }

    /* optional hover */
    :where(body.home.ub-v2) .underbug-hero-dot:hover {
      transform: scale(1.05);
    }


    /* Footer wrapper */
    body.home .underbug-footer {
      background: transparent;
      max-width: 100%;
      margin: 0 0 3px 0;
      padding: 0;
    }

    body.archive.woocommerce .underbug-footer {
      margin: 100px 0 3px 0;
      align-items: center;
      max-width: 100%;
      padding: 0;
    }

    /* ✅ Full-width footer container */
    .underbug-footer {
      display: flex;
      justify-content: center;
      align-items: center;
      width: 100%;
      padding: 0;
    }

    /* ✅ Responsive footer container */
    .footer-container {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      gap: 2px;
      width: 100%;
      max-width: 100%;
      margin: 0 auto;
      padding: 0 var(--ub-margin-fluid);
      box-sizing: border-box;
      font-size: var(--ub-fs-50) !important;

    }

    /* Footer boxes */
    .footer-container .footer-contact,
    .footer-container .footer-pages,
    .footer-container .footer-socials {
      padding: 22px !important;
      width: 100%;
    }

    /* ✅ Full-width boxes with screen-aligned margin */
    .footer-container>div {
      background: #222;
      border-radius: var(--ub-radius);
      color: var(--ub-clr-bg);
      display: grid;
      grid-template-columns: 120px 1fr;
      align-items: start;
      justify-content: center;
      width: 100%;
      /* 👈 full width */
      margin: 0 auto;
      text-align: left;
      box-sizing: border-box;

    }

    .footer-container h3 {
      font-size: var(--ub-fs-50);
      margin-bottom: 10px;
      text-align: left;
      margin: 0px;
    }




    .footer-container ul,
    .footer-container ul,
    .footer-container ul {
      list-style: none;
      margin: 0;
      padding: 0;
      display: flex;
      flex-direction: column;
      gap: 0px;
      align-items: flex-start;
    }

    .footer-container li,
    .footer-container li,
    .footer-container li {
      margin: 0;
    }

    .footer-container a,
    .footer-container a,
    .footer-container a {
      color: var(--ub-clr-bg);
      text-decoration: none;
      font-size: var(--ub-fs-50);
      line-height: 1.5;
      transition: color 0.2s ease;
    }


    /* ✅ Reset all list item margins */
    .footer-pages ul li {
      margin-top: 0;
    }

    /* Small gap between normal items */

    .footer-socials ul li+li {
      margin-top: 6px;
    }

    /* Bigger gap ONLY after every 2nd item (before 3rd, 5th, 7th...) */

    .footer-pages ul li:nth-child(2n + 1):not(:first-child) {
      margin-top: 16px;
    }

    .footer-contact ul li:nth-child(1n + 1):not(:first-child) {
      margin-top: 16px;
    }



    .footer-logo {
      display: flex;
      justify-content: center;
      padding: 0;
      background: none !important;
      width: 100% !important;
      grid-template-columns: none !important;
    }

    .footer-logo img {
      width: 100%;
      /* 👈 responsive image */
      max-width: 100%;
      /* 👈 always scale */
      height: auto;
      margin: 3px 0 0 0;
    }



  }




  @media (max-width: 1024px) {

    .underbug-single-product-grid {
      margin-top: -45px;

    }

    /* Outer wrapper */
    .underbug-product-slider {
      position: relative;
      width: 99vw;
      margin: 0 auto;
      background: #DDDCBC;
      border-radius: 10px;
      overflow: hidden;
      box-shadow: 0 2px 12px rgba(0, 0, 0, 0.04);
      min-height: 320px;
    }

    /* Track — remove flex */
    .underbug-product-slider-track {
      width: 100%;
      height: auto;
      cursor: grab;
    }



    .underbug-product-slider-track.is-draggable {
      cursor: grab;
    }

    /* Slides */
    .underbug-product-slide {
      width: 100%;
      display: block;
      background: #bcbba0;
    }

    /* Image */
    .underbug-product-slider-img {
      width: 100%;
      height: auto;
      display: block;
      object-fit: contain;
      margin-left: 2px;
      /* margin-right: 2px; */
      border-radius: 10px;
    }

    /* ... around line 837 in ub-v2.css, inside @media (max-width: 1024px) ... */

    /* ✅ Style Flickity dots - FINAL MOBILE VERSION (Absolute & Centered, Pill Style) */
    .flickity-page-dots {

      position: absolute !important;
      bottom: 15px !important;
      left: 15px !important;
      transform: none !important;
      width: auto !important;
      padding: 10px 20px !important;
      background: #DEDDAB;
      border-radius: 999px;
      box-shadow: 0 4px 10px rgba(0, 0, 0, 0.08);
      z-index: 9999;
      display: flex !important;
      justify-content: center;
      align-items: center;
      gap: 10px;
      margin: 0 !important;
      list-style: none !important;
      text-align: center !important;
      line-height: 1 !important;
    }

    /* outer ring (10px - Requested) */
    .flickity-page-dots .dot {
      display: flex !important;
      width: 10px;
      height: 10px;

      margin: 0 !important;

      background: transparent !important;
      border-radius: 50% !important;

      opacity: 1 !important;
      cursor: pointer;

      border: 2px solid #1E1E1E;
      /* Dark outer ring */
      position: relative;
      align-items: center;
      justify-content: center;

      transition: background 0.3s ease, transform 0.3s ease;
    }

    /* Inner filled circle (8px - Requested) */
    .flickity-page-dots .dot::after {
      content: "";
      width: 8px;
      /* Requested fill size */
      height: 8px;
      border-radius: 50%;
      background: #1E1E1E;
      opacity: 0;
      transition: opacity 0.25s ease;
    }

    /* Active dot */
    .flickity-page-dots .dot.is-selected::after {
      opacity: 1;
    }

    /* Hover */
    .flickity-page-dots .dot:hover {
      transform: scale(1.05);
    }

    /* ✅ Hide Flickity prev/next arrows on mobile */
    .flickity-button {
      display: none !important;
      visibility: hidden !important;
      opacity: 0 !important;
      pointer-events: none !important;
    }
  }

  /* ----------------------------
     SHOP / ARCHIVE — mobile only product title + price row   single product
  ---------------------------- */
  @media (max-width: 1024px) {

    .ub-title-price-row {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 12px 0;
      border-bottom: 1px solid #1E1E1E;
      /* 👈 light separator below */
      padding-bottom: 50px !important;
      padding-top: 20px !important;


    }

    .ub-product-title {
      font-size: 16px;
      font-weight: 400;
      text-transform: uppercase;
      margin: 0;
    }

    .ub-product-price {
      font-size: 16px;
      font-weight: 400;
      color: var(--ub-clr-ink);
    }


    .underbug-product-details {
      padding: 3px 3px 3px 3px;
    }

    .underbug-product-details>div {
      padding: 20px 20px 0px 20px;

    }

    .underbug-inner-footer {
      padding: 0px !important;
    }

    body.single-product .single_add_to_cart_button {
      margin: 20px 20px 20px 20px !important;
    }

    body.single-product footer.underbug-footer,
    body.single-product footer.underbug-footer .footer-container {
      padding: 50px 0px 0px 0px !important;
      margin-top: 0 !important;
    }



    .product-info-section {
      border-bottom: 1px solid #1E1E1E;
      padding: 16px 0;
    }


    .product-info-section .toggle-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      cursor: pointer;
      font-size: clamp(13px, 3.2vw, 15px);
      text-transform: uppercase;
      letter-spacing: 0.04em;
      padding: 4px 0;
    }

    .product-info-section .toggle-content {
      padding-top: 10px;
      font-size: clamp(13px, 3vw, 14px);
      line-height: 1.5;
      color: rgba(30, 30, 30, 0.9);
    }

    .underbug-product-details .cart {
      margin-top: 10px;
    }


    .product-info-section .toggle-header {
      font-size: 14px;
      font-weight: 400;
      text-transform: uppercase;
      margin-bottom: 20px;
      cursor: pointer;
      display: flex;
      justify-content: space-between;
      align-items: center;
    }


    .product-info-section .toggle-content p,
    .product-info-section .toggle-content a {
      display: inline;
      word-break: keep-all;
      /* overflow-wrap: break-word; */
      max-width: 100%;
    }

    .product-info-section .toggle-content p {
      display: block;
      word-break: normal;
      overflow-wrap: normal;
      max-width: 100%;
      white-space: normal;
      margin: 0 0 1rem 0;
      letter-spacing: 0.3px;
    }
  }

  /* ----------------------------
     single product  / ARCHIVE — mobile only product info section 
  ---------------------------- */
  @media (max-width: 1024px) {

    /* ----------------------------
   SHOP HEADER
---------------------------- */

    :where(body.archive.woocommerce) .shop-header,
    :where(body.single-product.woocommerce) .shop-header {
      background: var(--ub-clr-bg);
      padding: 12px 20px;
      font-family: 'GT Pressura Mono', monospace;
      position: relative;
      z-index: 1001;
    }

    :where(body.single-product.woocommerce) .shop-header {
      background: transparent !important;
    }



    :where(body.archive.woocommerce) .shop-header-container,
    :where(body.single-product.woocommerce) .shop-header-container {
      display: flex;
      justify-content: space-between;
      align-items: center;
      max-width: var(--ub-rail-width);
      margin: 0 auto;
    }

    :where(body.archive.woocommerce) .basket-group,
    :where(body.single-product.woocommerce) .basket-group {
      display: flex;
      align-items: center;
      gap: 10px;
      /* 👈 this is where the spacing lives */


    }

    :where(body.archive.woocommerce) .shop-home-button,
    :where(body.archive.woocommerce) .shop-basket-button,
    :where(body.single-product.woocommerce) .shop-home-button,
    :where(body.single-product.woocommerce) .shop-basket-button {

      color: #1E1E1E;
      padding: 6px 0px;
      text-transform: uppercase;
      letter-spacing: 0.5px;
      cursor: pointer;
      background: none;
      border: none;
      font-size: 14px;
      font-weight: 400;
      font-family: 'GT Pressura Mono', monospace;
      line-height: 1;
    }

    :where(body.archive.woocommerce) .cart-count,
    :where(body.single-product.woocommerce) .cart-count {
      color: var(--ub-clr-ink);
      width: 26px;
      height: 26px;
      display: flex;
      justify-content: center;
      align-items: center;
      font-size: 14px;
      font-weight: 400;
    }


  }

  /* Base: all sections closed */
  .product-info-section .toggle-content {
    display: none;
  }

  /* Open state */
  .product-info-section.open .toggle-content {
    display: block;
  }

}

/* ================================
   UTILITIES        CHECK this 
================================ */
@layer utilities {
  :where(.ub-v2) .u-hide {
    display: none !important;
  }
}

/* ================================
   DESKTOP (≥1200px)
================================ */
@layer desktop {
  @media (min-width: 1200px) {

    /* 1. HERO CONTAINER: FIXED, FULL SCREEN, CLIPS IMAGE */
    :where(body.home.ub-v2) .underbug-hero {
      position: fixed;
      inset: 0;
      /* top:0 right:0 bottom:0 left:0 */
      width: 100vw;
      height: 100vh;
      /* FIXED: Now 100vh to cover full viewport */
      overflow: hidden;
      /* ADDED: Clips the overscaled image */
      z-index: 1;
    }

    :where(body.home.ub-v2) .underbug-hero-slider {
      width: 100%;
      height: 100%;
    }

    /* 2. INDIVIDUAL SLIDES: COVER CONTAINER, HANDLE DISPLAY STATE */
    :where(body.home.ub-v2) .underbug-hero-slide {
      position: absolute;
      inset: 0;
      width: 100%;
      height: 100%;
      display: none;
      /* Default state: hidden */
      justify-content: center;
      align-items: center;
    }

    :where(body.home.ub-v2) .underbug-hero-slide.active {
      display: flex;
      /* Active state: show */
    }

    /* 3. HERO IMAGE: ENSURE FULL COVERAGE + OVERSCALE FOR ZOOM-OUT FIX */
    :where(body.home.ub-v2) .underbug-hero-slide picture,
    :where(body.home.ub-v2) .underbug-hero-slide img {
      width: 100%;
      height: 100%;
      display: block;
      object-fit: cover;
      object-position: center;
      /* The critical fix: make image larger than the viewport */
      transform: scale(1.1);
      /* CORRECTED: Increased to 1.1 for robust coverage on zoom-out */
      transform-origin: center;
    }

    :where(body.home.ub-v2) .info-box.green {
      width: clamp(300px, 22vw, 427px);

    }

    :where(body.home.ub-v2) .info-box.yellow {
      width: clamp(320px, 25vw, 477px);
    }

    :where(body.home.ub-v2) .info-box.logo-box {
      width: clamp(300px, 20vw, 427px);
    }

    :where(body.home.ub-v2) .product-box.small {
      width: clamp(280px, 20vw, 377px);
    }

    :where(body.home.ub-v2) .product-box.medium {
      width: clamp(300px, 23vw, 427px);
    }

    :where(body.home.ub-v2) .product-box.large {
      width: clamp(340px, 28vw, 477px);
    }

    .woocommerce.ub-v2 ul.products {
      grid-template-columns: repeat(3, 1fr) !important;
      gap: 20px !important;
      margin-top: 0px;
      margin-bottom: 0px;
    }

    body.archive.woocommerce .shop-wrapper {
      padding-bottom: 100px;
      box-sizing: border-box;
    }

    .footer-container.footer-home>div,
    .footer-container.footer-shop>div {
      width: clamp(320px, 25vw, 477px);
    }

   
    body.home.ub-v2 .underbug-footer {
      position: relative;
      z-index: 5;
      margin-left: auto;
      margin-right: 3px;

    }

    body.home.ub-v2 .underbug-hero {
      z-index: 1;
    }


    /* ----------------------------
   SHOP HEADER
---------------------------- */

    :where(body.archive.woocommerce) .shop-header,
    :where(body.single-product.woocommerce) .shop-header {
      background: var(--ub-clr-bg);
      padding: 12px 20px;
      font-family: 'GT Pressura Mono', monospace;

      z-index: 1001;

    }

    :where(body.single-product.woocommerce.ub-v2) .shop-header {
      position: fixed !important;
      top: 0 !important;
      left: 0 !important;
      width: 98% !important;
      z-index: 99998 !important;
      background: transparent !important;
    }

    :where(body.single-product.woocommerce.ub-v2) .shop-header::after {
      content: none !important;
    }


    :where(body.single-product.woocommerce.ub-v2) .shop-header-container {
      position: relative;
      z-index: 2;
    }

    :where(body.archive.woocommerce) .shop-header-container,
    :where(body.single-product.woocommerce) .shop-header-container {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin: 0 auto;
    }

    :where(body.archive.woocommerce) .basket-group,
    :where(body.single-product.woocommerce) .basket-group {
      display: flex;
      align-items: center;
      gap: 10px;



    }

    :where(body.archive.woocommerce) .shop-home-button,
    :where(body.archive.woocommerce) .shop-basket-button,
    :where(body.single-product.woocommerce) .shop-home-button,
    :where(body.single-product.woocommerce) .shop-basket-button {

      color: #1E1E1E;
      padding: 6px 0px;
      text-transform: uppercase;
      letter-spacing: 0.5px;
      cursor: pointer;
      background: none;
      border: none;
      font-size: 16px;
      font-weight: 400;
      font-family: 'GT Pressura Mono', monospace;
      line-height: 1;
    }

    :where(body.archive.woocommerce) .cart-count,
    :where(body.single-product.woocommerce) .cart-count {
      color: var(--ub-clr-ink);
      width: 26px;
      height: 26px;
      display: flex;
      justify-content: center;
      align-items: center;
      font-size: 16px;
      font-weight: 400;
    }

    /* Footer block that lives INSIDE the product-details column */
    body.single-product .underbug-inner-footer {
      margin-top: 40px;
    }



    body.single-product .underbug-inner-footer {
      width: 100%;
      max-width: 100%;
      margin-top: 150px !important;

      box-sizing: border-box;
    }

    body.single-product .underbug-inner-footer .underbug-footer {
      width: 100%;
      max-width: 100%;
      margin: 0 !important;
      padding: 0;
      box-sizing: border-box;
    }

    body.single-product .underbug-inner-footer .footer-container {
      width: 100% !important;
      max-width: 100% !important;
      margin: 0 !important;
      display: flex;
      flex-direction: column;
      gap: 3px;
      align-items: stretch !important;
      box-sizing: border-box;
    }

    body.single-product .underbug-inner-footer .footer-container>div {
      width: 100% !important;
      max-width: 100% !important;
      box-sizing: border-box;
    }




  }

  body.single-product footer.site-footer.underbug-footer {
    display: none !important;
  }



  @media (min-width: 1200px) {

    /* ✅ Layout: Grid with sticky slider */
    .underbug-single-product-grid {
      display: grid;
      grid-template-columns: 69vw 1fr;
      margin-top: -90px;
      align-items: start;
      background: #DDDCBC;
      overflow: visible;
    }



    :where(body.single-product.woocommerce.ub-v2) {
      --ub-shop-header-h: 56px;
      /* adjust later if needed */
    }

    :where(body.single-product.woocommerce.ub-v2) .underbug-single-product-grid {
      padding-top: var(--ub-shop-header-h) !important;
    }





    /* ✅ Left: Slider column pinned */
    .underbug-product-gallery {
      position: sticky;
      top: 0;
      height: 100vh;
      display: flex;
      align-items: center;
      justify-content: center;
      overflow: hidden;
      will-change: transform;
      backface-visibility: hidden;
      z-index: 1;
    }

    /* ✅ Slider container */
    .underbug-product-slider {
      width: 69vw;
      max-width: 69vw;
      height: 99.8vh;
      border-radius: 10px;
      background: #DDDCBC;
      overflow: hidden;
      padding: 0 0.05vw;
    }

    .underbug-product-slider-track {
      transition: transform 1.2s cubic-bezier(.4, 0, .2, 1);
    }

    /* 
    .underbug-product-slide {
      width: 40vw;
      aspect-ratio: 764 / 1074;
      display: flex;
      align-items: center;
      justify-content: space-between;
      border-radius: 10px;
      overflow: hidden;
      background: transparent;
      height: 99.8vh;
      padding: 0 0.1vw;
    } */

    :where(body.single-product.woocommerce.ub-v2) {
      --ub-sp-slide-w: 40vw;
      --ub-sp-slide-gap: 0.2vw;
      /* existing visual gap from left+right padding */
    }

    .underbug-product-slide {
      width: var(--ub-sp-slide-w);
      aspect-ratio: 764 / 1074;
      display: flex;
      align-items: center;
      justify-content: space-between;
      border-radius: 10px;
      overflow: hidden;
      background: transparent;
      height: 99.8vh;
      padding: 0 calc(var(--ub-sp-slide-gap) / 2);
      box-sizing: border-box;
    }

    .underbug-product-slide.is-last-slide {
      width: calc((var(--ub-sp-slide-w) * 2) + var(--ub-sp-slide-gap));
    }

    .underbug-product-slider-img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      object-position: center;
      display: block;
      border-radius: 10px;
    }

    /* ✅ Right: Product details scrollable */
    .underbug-product-details {

      max-height: 95%;

      overflow: visible;
      position: relative;
      padding: 3px 3px 3px 3px;
    }

    .underbug-product-details::before {
      content: "";
      position: sticky;
      top: 0;
      display: block;
      height: 10vh;
      background: #DDDCBC;
      z-index: 2;
      background: linear-gradient(to bottom, #DDDCBC 40%, transparent 50%);
    }

    /* ✅ Title + price row */
    .ub-title-price-row {
      display: flex;
      justify-content: space-between;
      align-items: center;
     
      border-bottom: 1px solid #1E1E1E;

      max-width: 100%;
      font-size: 24px !important;
      margin: 15px;
    }

    .ub-product-title {
      font-size: 24px;
      font-weight: 400;
      text-transform: uppercase;
      margin-left: 10px;
    }

    .ub-product-price {
      font-size: 24px;
      font-weight: 400;
      color: var(--ub-clr-ink);
      margin-right: 30px;
    }

    /* ✅ Product sections */
    .product-info-section {
      border-bottom: 1px solid #1E1E1E;
      padding: 20px 0;
      margin: 20px;
    }

    /* ✅ Toggle header + icon */
    .toggle-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      font-size: 16px;
      font-weight: 400;
      text-transform: uppercase;
      cursor: pointer;
      width: 100%;
      max-width: 95%;
      padding: 0 1rem 0rem 1rem;
    }


    .toggle-icon {
      font-size: 20px;
      transition: transform 0.3s ease;
    }

    .product-info-section.open .toggle-icon {
      transform: rotate(180deg);
    }



    .product-info-section .toggle-content p,
    .product-info-section .toggle-content a {
      display: inline;
      word-break: normal;
      max-width: 100%;
    }

    .product-info-section .toggle-content p {
      display: block;
      white-space: normal;
      margin: 1.5rem 1rem 1rem 1rem;
      letter-spacing: 0.3px;
    }

    /* ✅ Add-to-cart button spacing */
    .underbug-product-details .cart {
      margin-top: 20px;
      margin-left: 10px;
    }



    :where(body.single-product.ub-v2) .flickity-page-dots {
      position: fixed !important;
      width: auto !important;
      bottom: 20px !important;
      padding: 10px 22px !important;
      /* margin: 40px 40px 40px 10px !important; */
      list-style: none !important;
      text-align: center !important;
      line-height: 1 !important;
      left: 20px;
      display: flex;
      align-items: center;
      gap: 10px;
      background: #DEDDAB;
      border-radius: 999px;
      box-shadow: 0 4px 10px rgba(0, 0, 0, 0.08);
      z-index: 9999;
    }

    :where(body.single-product.ub-v2) .flickity-page-dots .dot {
      display: flex !important;

      width: 15px !important;
      height: 15px !important;

      margin: 0 !important;

      background: transparent !important;
      border-radius: 50% !important;

      opacity: 1 !important;
      cursor: pointer !important;

      border: 2px solid #1E1E1E;
      position: relative;
      align-items: center;
      justify-content: center;

      transition: transform 0.2s ease;
    }

    /* Inner filled circle */
    :where(body.single-product.ub-v2) .flickity-page-dots .dot::after {
      content: "";
      width: 12.5px;
      height: 12.5px;

      border-radius: 50%;
      background: #1E1E1E;
      opacity: 0;

      transition: opacity 0.25s ease;
    }

    /* Active dot */
    :where(body.single-product.ub-v2) .flickity-page-dots .dot.is-selected::after {
      opacity: 1;
    }

    /* Hover */
    :where(body.single-product.ub-v2) .flickity-page-dots .dot:hover {
      transform: scale(1.05);
    }


    .single_add_to_cart_button.button.alt {
      display: inline-block;
      background: var(--ub-clr-ink);
      color: var(--ub-clr-bg);
      border-radius: 20px;
      font-size: 16px;
      font-weight: 400;
      letter-spacing: 0.5px;
      text-transform: uppercase;
      text-align: center;
      transition: background 0.25s ease;
      line-height: 100%;
      padding: 0.7rem 1rem 0.7rem 1rem;
      border: none !important;
      text-align: center;
      /* width: 30%; */
      margin: 0 auto;

    }

    .single_add_to_cart_button.button.alt:hover {
      cursor: pointer;
    }





  }







  /* ======================================================
   UNDERBUG — Compact Refined Cart Layout (≥1200px)
   Slightly narrower + balanced tone-on-tone aesthetic
   ====================================================== */
  @media (min-width: 1200px) {

    body.woocommerce-cart {
      background-color: #ECEBD1 !important;
      font-family: 'GT Pressura Mono', monospace;
      color: #1E1E1E;
      line-height: 1.55;
      margin: 0;
      padding: 0;
    }

    main.page-content>h1 {
      font-family: 'GT Pressura Mono', monospace;
      font-size: clamp(1.2rem, 1.4vw, 1.5rem);
      /* max ~24px */
      text-transform: uppercase;
      letter-spacing: 0.05em;
      font-weight: 500;
      color: #1E1E1E;
      margin: 6vh auto 2vh;
      text-align: left;
      width: 90%;
      max-width: 60rem;
      padding-left: 0.5rem;
      line-height: 1.2;
    }

    /* --- MAIN CONTAINER --- */
    .wc-block-cart,
    .wc-block-cart__main {
      max-width: 60rem;
      margin: 8vh auto;
      display: flex;
      justify-content: center;
      align-items: flex-start;
      gap: 3vw;
    }

    /* --- LEFT: PRODUCT LIST --- */
    .wc-block-cart-items,
    .wc-block-components-main.wc-block-cart__main {
      flex: 1 1 62%;
      background: #ECEBD1;
    }

    /* --- RIGHT: TOTALS --- */
    .wc-block-components-sidebar.wc-block-cart__sidebar,
    .page-id-321ocommerce-cart-totals-block {
      flex: 1 1 36%;
      padding: 2vw;

    }

    /* --- PRODUCT ROWS --- */
    .wc-block-cart-items th,
    .wc-block-cart-items td {
      border: none;
      background: transparent;
      padding: 1rem 0.6rem;
      font-size: 0.9rem;
    }

    .wc-block-cart-item__wrap {
      border-bottom: 0.07rem solid rgba(0, 0, 0, 0.07);
      margin-bottom: 1rem;
      padding-bottom: 1rem;
    }

    .wc-block-cart-item__image img {
      width: 3.8rem;
      height: auto;
      background: rgba(30, 30, 30, 0.05);
      border: none;
      padding: 0.2rem;
    }

    .wc-block-cart-item__product a {
      color: #1E1E1E;
      text-decoration: none;
      transition: color 0.2s ease;
    }

    .wc-block-cart-item__product a:hover {
      color: #000;
    }

    /* --- QUANTITY + PRICE --- */
    .wc-block-cart-item__quantity input {
      background: rgba(30, 30, 30, 0.06) !important;
      border: none;
      padding: 0.5rem 0.8rem;
      width: 4rem;
      font-family: inherit;
      font-size: 0.85rem;
      text-align: center;
    }

    .wc-block-cart-item__total {
      text-align: right;
      font-size: 0.88rem;
      font-weight: 500;
    }

    /* --- BUTTONS / CTA --- */
    .wc-block-cart__submit-container .wc-block-components-button {
      display: block;
      width: 95%;
      margin: 1.5rem auto 0;
      background: #1E1E1E !important;
      color: #ECEBD1 !important;
      text-transform: uppercase;
      font-size: 0.9rem;
      letter-spacing: 0.04em;
      padding: 0.8rem 1.2rem;
      border: none;
      border-radius: 2rem;
      cursor: pointer;
      transition: background 0.25s ease, transform 0.2s ease;
      text-align: center;
    }

    .wc-block-cart__submit-container .wc-block-components-button:hover {
      background: #000 !important;
      transform: translateY(-0.1rem);
    }

    /* --- TOTALS SECTION --- */
    .wc-block-cart-totals,
    .wc-block-components-totals-wrapper {
      background: transparent;
      padding: 1.5vw 0;
    }

    .wc-block-components-totals-wrapper th,
    .wc-block-components-totals-wrapper td {
      font-size: 0.85rem;
      padding: 0.5rem 0;
    }

    .wc-block-components-totals-wrapper tfoot td {
      font-weight: 600;
    }

    /* --- ALIGNMENT / RESPONSIVE BEHAVIOR --- */
    .wc-block-components-sidebar {
      position: sticky;
      top: 5vh;
      align-self: flex-start;
    }


  }






  /* ================================
   DESKTOP PRIVACY POLICY PAGE (≥1200px)
================================ */
  @media (min-width: 1200px) {

    body.page-id-321,
    body.page-id-15,
    body.page-id-325,
    body.privacy-policy {
      background-color: var(--ub-clr-bg);
      font-family: 'GT Pressura Mono', monospace;
      color: var(--ub-clr-ink);
    }

    body.wp-singular main.page-content,
    body.privacy-policy main.page-content {
      max-width: 80vw;
      padding: clamp(24px, 4vw, 48px);
      margin: 0 auto;
      box-sizing: border-box;
    }

    body.page-id-325 .page-body,
    body.page-id-15 .page-body,
    body.page-id-321 .page-body,
    body.privacy-policy .page-body {
      max-width: 80vw;
      margin: 0 auto;
    }

    body.page-id-325 h1,
    body.page-id-325 .page-body h1,
    body.page-id-15 h1,
    body.page-id-15 .page-body h1,
    body.page-id-321 h1,
    body.page-id-321 .page-body h1,
    body.privacy-policy h1,
    body.privacy-policy .page-body h1 {
      font-family: 'GT Pressura Mono', monospace;
      font-size: clamp(24px, 2.5vw, 32px);
      text-transform: uppercase;
      letter-spacing: 0.04em;
      font-weight: 600;
      text-align: center;
      color: var(--ub-clr-ink);
    }

    body.page-id-325 h2,
    body.page-id-325 .page-body h2,
    body.page-id-325 .page-content .page-id-325ading,
    body.page-id-15 .page-content .page-id-15ading,
    body.page-id-15 h2,
    body.page-id-15 .page-body h2,

    body.page-id-321 .page-content .page-id-321ading,
    body.page-id-321 h2,
    body.page-id-321 .page-body h2,

    body.privacy-policy h2,
    body.privacy-policy .page-id-321ading,
    body.privacy-policy .page-body h2 {
      font-family: 'GT Pressura Mono', monospace;
      font-size: clamp(20px, 2vw, 24px);
      text-transform: uppercase;
      letter-spacing: 0.04em;
      font-weight: 400;
      margin: clamp(20px, 3vw, 32px) 0 clamp(12px, 2vw, 16px);
      color: var(--ub-clr-ink);
    }

    body.page-id-325 h3,
    body.page-id-325 .page-body h3,
    body.page-id-15 h3,
    body.page-id-15 .page-body h3,
    body.page-id-321 h3,
    body.page-id-321 .page-body h3,
    body.privacy-policy h3,
    body.privacy-policy .page-body h3 {
      font-family: 'GT Pressura Mono', monospace;
      font-size: clamp(16px, 1.5vw, 18px);
      text-transform: uppercase;
      letter-spacing: 0.03em;
      font-weight: 400;
      margin: clamp(16px, 2.5vw, 24px) 0 clamp(10px, 1.5vw, 14px);
      color: var(--ub-clr-ink);
    }

    body.page-id-325 p,
    body.page-id-325 .page-body p,
    body.page-id-15 p,
    body.page-id-15 .page-body p,
    body.page-id-321 p,
    body.page-id-321 .page-body p,
    body.privacy-policy p,
    body.privacy-policy .page-body p {
      font-family: 'GT Pressura Mono', monospace;
      font-size: clamp(14px, 1.2vw, 16px);
      line-height: 1.6;
      margin: 0 0 clamp(14px, 2vw, 18px);
      color: var(--ub-clr-ink);
    }

    body.page-id-325 ul,
    body.page-id-325 ol,
    body.page-id-15 ul,
    body.page-id-15 ol,
    body.page-id-321 ul,
    body.page-id-321 ol,
    body.page-id-321 .page-body ul,
    body.page-id-321 .page-body ol,
    body.privacy-policy ul,
    body.privacy-policy ol,
    body.privacy-policy .page-body ul,
    body.privacy-policy .page-body ol {
      font-family: 'GT Pressura Mono', monospace;
      font-size: clamp(14px, 1.2vw, 16px);
      line-height: 1.6;
      margin: 0 0 clamp(14px, 2vw, 18px);
      padding-left: clamp(24px, 3vw, 32px);
      color: var(--ub-clr-ink);
    }

    body.page-id-325 li,
    body.page-id-325 .page-body li,
    body.page-id-15 li,
    body.page-id-15 .page-body li,
    body.page-id-321 li,
    body.page-id-321 .page-body li,
    body.privacy-policy li,
    body.privacy-policy .page-body li {
      margin-bottom: clamp(8px, 1.5vw, 12px);
    }

    body.page-id-325 a,
    body.page-id-325 .page-body a,
    body.page-id-15 a,
    body.page-id-15 .page-body a,
    body.page-id-321 a,
    body.page-id-321 .page-body a,
    body.privacy-policy a,
    body.privacy-policy .page-body a {
      color: var(--ub-clr-ink);
      text-decoration: underline;
      text-underline-offset: 2px;
    }

    body.page-id-325 footer,
    body.page-id-15 footer,
    body.page-id-321 footer,
    body.privacy-policy footer {
      display: none;
    }










  }

  /* ================================
   RESPONSIVE LEGAL PAGES (≤1024px)
================================ */
  @media (max-width: 1024px) {

    /* Shared body styling */
    body.page-id-321,
    body.page-id-15,
    body.page-id-325,
    body.privacy-policy {
      background-color: var(--ub-clr-bg);
      font-family: 'GT Pressura Mono', monospace;
      color: var(--ub-clr-ink);
    }

    /* Container for content */
    body.wp-singular main.page-content,
    body.privacy-policy main.page-content {
      width: 100%;
      max-width: 100%;
      padding: clamp(1rem, 6vw, 2rem);
      margin: 0;
      box-sizing: border-box;
    }

    /* Main text wrapper */
    body.page-id-325 .page-body,
    body.page-id-15 .page-body,
    body.page-id-321 .page-body,
    body.privacy-policy .page-body {
      width: 100%;
      max-width: 100%;
      margin: 0 auto;
    }

    /* Headings */
    body.page-id-325 h1,
    body.page-id-325 .page-body h1,
    body.page-id-15 h1,
    body.page-id-15 .page-body h1,
    body.page-id-321 h1,
    body.page-id-321 .page-body h1,
    body.privacy-policy h1,
    body.privacy-policy .page-body h1 {
      font-family: 'GT Pressura Mono', monospace;
      font-size: clamp(1.5rem, 5vw, 2rem);
      text-transform: uppercase;
      letter-spacing: 0.04em;
      font-weight: 400;
      margin: clamp(1rem, 6vw, 2rem) 0 clamp(0.8rem, 4vw, 1.5rem);
      text-align: center;
      color: var(--ub-clr-ink);
    }

    body.page-id-325 h2,
    body.page-id-325 .page-body h2,
    body.page-id-15 h2,
    body.page-id-15 .page-body h2,
    body.page-id-321 h2,
    body.page-id-321 .page-body h2,
    body.privacy-policy h2,
    body.privacy-policy .page-body h2 {
      font-family: 'GT Pressura Mono', monospace;
      font-size: clamp(1.25rem, 4vw, 1.75rem);
      text-transform: uppercase;
      letter-spacing: 0.04em;
      font-weight: 400;
      margin: clamp(0.9rem, 5vw, 1.8rem) 0 clamp(0.7rem, 3.5vw, 1.4rem);
      color: var(--ub-clr-ink);
    }

    body.page-id-325 h3,
    body.page-id-325 .page-body h3,
    body.page-id-15 h3,
    body.page-id-15 .page-body h3,
    body.page-id-321 h3,
    body.page-id-321 .page-body h3,
    body.privacy-policy h3,
    body.privacy-policy .page-body h3 {
      font-family: 'GT Pressura Mono', monospace;
      font-size: clamp(1rem, 3.5vw, 1.5rem);
      text-transform: uppercase;
      letter-spacing: 0.03em;
      font-weight: 400;
      margin: clamp(0.8rem, 4vw, 1.4rem) 0 clamp(0.6rem, 2.5vw, 1rem);
      color: var(--ub-clr-ink);
    }

    /* Paragraphs */
    body.page-id-325 p,
    body.page-id-325 .page-body p,
    body.page-id-15 p,
    body.page-id-15 .page-body p,
    body.page-id-321 p,
    body.page-id-321 .page-body p,
    body.privacy-policy p,
    body.privacy-policy .page-body p {
      font-family: 'GT Pressura Mono', monospace;
      font-size: clamp(1rem, 3vw, 1.125rem);
      line-height: 1.6;
      margin: 0 0 clamp(0.9rem, 3vw, 1.3rem);
      color: var(--ub-clr-ink);
    }

    /* Lists */
    body.page-id-325 ul,
    body.page-id-325 ol,
    body.page-id-15 ul,
    body.page-id-15 ol,
    body.page-id-321 ul,
    body.page-id-321 ol,
    body.page-id-321 .page-body ul,
    body.page-id-321 .page-body ol,
    body.privacy-policy ul,
    body.privacy-policy ol,
    body.privacy-policy .page-body ul,
    body.privacy-policy .page-body ol {
      font-family: 'GT Pressura Mono', monospace;
      font-size: clamp(1rem, 3vw, 1.125rem);
      line-height: 1.6;
      margin: 0 0 clamp(0.9rem, 3vw, 1.3rem);
      padding-left: clamp(1.5rem, 6vw, 2rem);
      color: var(--ub-clr-ink);
    }

    body.page-id-325 li,
    body.page-id-325 .page-body li,
    body.page-id-15 li,
    body.page-id-15 .page-body li,
    body.page-id-321 li,
    body.page-id-321 .page-body li,
    body.privacy-policy li,
    body.privacy-policy .page-body li {
      margin-bottom: clamp(0.5rem, 2vw, 0.75rem);
    }

    /* Links */
    body.page-id-325 a,
    body.page-id-325 .page-body a,
    body.page-id-15 a,
    body.page-id-15 .page-body a,
    body.page-id-321 a,
    body.page-id-321 .page-body a,
    body.privacy-policy a,
    body.privacy-policy .page-body a {
      color: var(--ub-clr-ink);
      text-decoration: underline;
      text-underline-offset: 2px;
    }

    /* Hide footer on these pages */
    body.page-id-325 footer,
    body.page-id-15 footer,
    body.page-id-321 footer,
    body.privacy-policy footer {
      display: none;
    }
  }

}

/* ==========================================================
   CHECKOUT — unlayered so it beats WooCommerce Blocks CSS
   Design v2: logo header, back link, sentence-case sections,
   summary + quote box. Layout follows Woo's container classes:
   .is-large = two columns, anything else = stacked
   ========================================================== */
body.woocommerce-checkout {
  --co-bg: #ECEBD1;
  --co-card: #F1F0DF;
  --co-field: #F7F6EB;
  --co-ink: #1E1E1E;
  --co-muted: rgba(30, 30, 30, 0.62);
  --co-line: rgba(30, 30, 30, 0.14);
  --co-radius: 12px;
  background-color: var(--co-bg) !important;
  font-family: 'GT Pressura Mono', monospace;
  color: var(--co-ink);
}

/* Fix: privacy-page rule (body.wp-singular main.page-content) shrank checkout to 0 width */
body.woocommerce-checkout main.page-content,
body.woocommerce-cart main.page-content {
  width: 100%;
  box-sizing: border-box;
}

body.woocommerce-checkout main.page-content {
  max-width: 1180px;
  padding: 28px 24px 64px;
  position: relative;
  z-index: 1;
}

/* Background ladybugs */
body.woocommerce-checkout::before,
body.woocommerce-checkout::after {
  content: "";
  position: fixed;
  width: 380px;
  height: 260px;
  background: url('images/ladybug-small.png') center / contain no-repeat;
  opacity: 0.12;
  pointer-events: none;
  z-index: 0;
}

body.woocommerce-checkout::before {
  top: 80px;
  left: -90px;
  transform: rotate(25deg);
}

body.woocommerce-checkout::after {
  bottom: 60px;
  right: -80px;
  transform: rotate(-35deg);
}

/* Hide footer on checkout */
body.woocommerce-checkout footer,
body.woocommerce-checkout .underbug_footer,
body.woocommerce-checkout .underbug-footer {
  display: none !important;
}

/* --- Header bar (page.php): logo only --- */
.ub-checkout-header {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  padding: 14px clamp(16px, 5vw, 64px);
  border-bottom: 1px solid var(--co-line);
}

.ub-checkout-header__logo img {
  display: block;
  height: 32px;
  width: auto;
}

/* --- Back to cart --- */
.ub-back-link {
  display: flex;
  align-items: center;
  gap: 10px;
  max-width: 1108px;
  margin: 0 auto 18px;
  font-size: 14px;
  color: var(--co-ink) !important;
  text-decoration: none !important;
}

.ub-back-link span {
  transition: transform 0.2s ease;
}

.ub-back-link:hover span {
  transform: translateX(-3px);
}

/* --- Two-column layout --- */
.wc-block-components-sidebar-layout.wc-block-checkout {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: center;
  gap: 20px;
  margin: 0 auto;
  padding: 0;
  max-width: none;
}

.wc-block-components-sidebar-layout.is-large .wc-block-checkout__main {
  flex: 1 1 560px;
  max-width: 660px;
  width: auto;
}

.wc-block-components-sidebar-layout.is-large .wc-block-checkout__sidebar {
  flex: 0 1 428px;
  width: auto;
  padding: 0 !important;
  position: sticky;
  top: 24px;
}

.wc-block-components-sidebar-layout:not(.is-large) .wc-block-checkout__main,
.wc-block-components-sidebar-layout:not(.is-large) .wc-block-checkout__sidebar {
  flex: 1 1 100%;
  width: 100%;
  max-width: 660px;
  padding: 0 !important;
}

/* --- Cards --- */
.wc-block-checkout__main,
.wp-block-woocommerce-checkout-order-summary-block {
  background: var(--co-card) !important;
  border: 1px solid var(--co-line) !important;
  border-radius: var(--co-radius) !important;
  box-shadow: 0 2px 14px rgba(30, 30, 30, 0.05) !important;
  box-sizing: border-box;
}

/* One spacing scale for mobile + desktop */
.wc-block-checkout__main {
  padding: clamp(20px, 4vw, 36px) !important;
}

/* --- Sections --- */
.wc-block-checkout__main .wc-block-components-checkout-step {
  position: relative;
  margin: 0 0 24px;
  padding: 0 0 24px !important;
  border: none;
  border-bottom: 1px solid var(--co-line);
}

.wc-block-checkout__main .wc-block-components-checkout-step::before,
.wc-block-checkout__main .wc-block-components-checkout-step::after {
  content: none !important;
}

.wc-block-components-checkout-step__heading {
  margin: 0 0 2px;
}

.wc-block-components-checkout-step__title,
.wc-block-components-checkout-step__heading .wc-block-components-title {
  font-family: 'GT Pressura Mono', monospace !important;
  font-size: 18px !important;
  font-weight: 500 !important;
  text-transform: none !important;
  letter-spacing: 0.01em !important;
  color: var(--co-ink);
  margin: 0 !important;
}

/* Section descriptions */
.wc-block-components-checkout-step__heading-container::after {
  display: block;
  margin: 2px 0 16px;
  font-size: 12px;
  color: var(--co-muted);
}

#contact-fields .wc-block-components-checkout-step__heading-container::after {
  content: "We'll use this email to send your order updates.";
}

#shipping-fields .wc-block-components-checkout-step__heading-container::after {
  content: "Your order will be shipped to this address.";
}

#billing-fields .wc-block-components-checkout-step__heading-container::after {
  content: "The address that matches your payment method.";
}

#shipping-option .wc-block-components-checkout-step__heading-container::after {
  content: "Choose how you'd like to receive your order.";
}

#payment-method .wc-block-components-checkout-step__heading-container::after {
  content: "Choose a secure payment method.";
}

/* Order notes: last row, no divider */
.wc-block-checkout__main .wc-block-checkout__order-notes {
  font-size: 13px;
}

/* --- Fields --- */
.wc-block-checkout__main .wc-block-components-text-input input,
.wc-block-checkout__main .wc-blocks-components-select__select,
.wc-block-checkout__main .wc-block-components-textarea,
.wc-block-components-totals-coupon .wc-block-components-text-input input {
  background: var(--co-field) !important;
  border: 1px solid var(--co-line) !important;
  border-radius: 8px !important;
  color: var(--co-ink) !important;
  font-family: 'GT Pressura Mono', monospace !important;
  box-shadow: none !important;
}

.wc-block-checkout__main .wc-blocks-components-select__container {
  background: var(--co-field) !important;
  border-radius: 8px;
}

.wc-block-checkout__main .wc-block-components-text-input input:focus,
.wc-block-checkout__main .wc-blocks-components-select__select:focus,
.wc-block-checkout__main .wc-block-components-textarea:focus,
.wc-block-components-totals-coupon .wc-block-components-text-input input:focus {
  border-color: var(--co-ink) !important;
  outline: none;
}

.wc-block-components-text-input label,
.wc-blocks-components-select__label {
  font-family: 'GT Pressura Mono', monospace;
  color: var(--co-muted);
}

/* Saved address card */
.wc-block-components-address-card {
  background: var(--co-field) !important;
  border: 1px solid var(--co-line) !important;
  border-radius: 8px !important;
  padding: 16px !important;
  font-size: 12px;
}

.wc-block-components-address-card__edit {
  color: var(--co-ink) !important;
  text-decoration: none !important;
}

.wc-block-components-address-card__edit::after {
  content: " \270E";
}

/* Checkboxes */
.wc-block-components-checkbox .wc-block-components-checkbox__input[type="checkbox"] {
  background: var(--co-field);
  border: 1px solid rgba(30, 30, 30, 0.35);
  border-radius: 4px;
}

.wc-block-components-checkbox__label {
  font-size: 13px !important;
}

/* --- Radio boxes (shipping + payment) --- */
.wc-block-checkout__main .wc-block-components-radio-control--highlight-checked {
  background: var(--co-field);
  border-radius: 8px;
}

.wc-block-checkout__main .wc-block-components-radio-control--highlight-checked::after,
.wc-block-checkout__main .wc-block-components-radio-control--highlight-checked div.wc-block-components-radio-control-accordion-option--checked-option-highlighted,
.wc-block-checkout__main .wc-block-components-radio-control--highlight-checked label.wc-block-components-radio-control__option--checked-option-highlighted {
  border-radius: 8px;
  box-shadow: inset 0 0 0 1px var(--co-ink) !important;
}

.wc-block-checkout__main .wc-block-components-radio-control__option {
  font-size: 14px;
}

.wc-block-checkout__main .wc-block-components-radio-control__input:checked {
  border-color: var(--co-ink);
}

.wc-block-checkout__main .wc-block-components-radio-control__input:checked::before {
  background: var(--co-ink);
}

/* Shipping row: radio, truck, name ... price */
#shipping-option .wc-block-components-radio-control__option {
  padding-left: 96px !important;
}

#shipping-option .wc-block-components-radio-control__option::before {
  content: "";
  position: absolute;
  left: 50px;
  top: 50%;
  width: 30px;
  height: 22px;
  transform: translateY(-50%);
  background: var(--co-ink);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 22' fill='none' stroke='black' stroke-width='1.5'%3E%3Cpath d='M1 3h17v13H1zM18 8h6l5 5v3h-11z'/%3E%3Ccircle cx='6' cy='18' r='2.5'/%3E%3Ccircle cx='23' cy='18' r='2.5'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 22' fill='none' stroke='black' stroke-width='1.5'%3E%3Cpath d='M1 3h17v13H1zM18 8h6l5 5v3h-11z'/%3E%3Ccircle cx='6' cy='18' r='2.5'/%3E%3Ccircle cx='23' cy='18' r='2.5'/%3E%3C/svg%3E") center / contain no-repeat;
}

#shipping-option .wc-block-components-radio-control__label-group {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

#shipping-option .wc-block-components-radio-control__secondary-label {
  margin-left: auto;
}

/* Stripe payment box */
.StripeElements {
  border: none !important;
}

/* "Encrypted and secure" line, inside the payment box */
#payment-method .wc-block-components-radio-control-accordion-content::after {
  content: "Your payment information is encrypted and secure.";
  display: block;
  margin-top: 14px;
  padding-left: 18px;
  font-size: 11px;
  color: var(--co-muted);
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 14'%3E%3Cpath fill='%231E1E1E' fill-opacity='.7' d='M2 6V4a4 4 0 0 1 8 0v2h1v8H1V6zm2 0h4V4a2 2 0 0 0-4 0z'/%3E%3C/svg%3E") left center / 10px 12px no-repeat;
}

/* --- Terms + Place order --- */
.wc-block-checkout__terms {
  margin: 0 0 20px !important;
  padding: 0 !important;
  border: none !important;
  font-size: 11px;
  line-height: 1.6;
  color: var(--co-ink);
}

.wc-block-checkout__terms a {
  color: var(--co-ink);
  font-weight: 500;
  text-decoration: underline;
}

.wc-block-checkout__actions {
  margin-top: 20px !important;
  padding: 0 !important;
}

.wc-block-checkout__actions_row {
  display: block !important;
}

/* Woo's own link is replaced by .ub-back-link at the top */
.wc-block-components-checkout-return-to-cart-button {
  display: none !important;
}

.wc-block-components-checkout-place-order-button {
  display: block;
  width: 100% !important;
  min-height: 54px;
  margin: 0 !important;
  padding: 16px 24px !important;
  border: none !important;
  border-radius: 999px !important;
  background: var(--co-ink) !important;
  color: var(--co-bg) !important;
  font-family: 'GT Pressura Mono', monospace !important;
  font-size: 16px !important;
  letter-spacing: 0.04em;
  text-transform: none !important;
  cursor: pointer;
  transition: background 0.2s ease, transform 0.2s ease;
}

.wc-block-components-checkout-place-order-button:hover {
  background: #000 !important;
  transform: translateY(-1px);
}

/* --- Order summary --- */
.wp-block-woocommerce-checkout-order-summary-block {
  padding: 0 !important;
}

.wc-block-components-checkout-order-summary__title {
  margin: 0 20px !important;
  padding: 24px 0 14px !important;
  border-bottom: 1px solid var(--co-line);
}

.wc-block-components-checkout-order-summary__title-text {
  font-family: 'GT Pressura Mono', monospace !important;
  font-size: 18px !important;
  font-weight: 500 !important;
  text-transform: none !important;
  letter-spacing: 0.01em !important;
  color: var(--co-ink);
}

.wc-block-components-checkout-order-summary__content {
  padding: 0 4px 8px !important;
}

.wc-block-components-order-summary-item__image > img {
  background: rgba(30, 30, 30, 0.06);
  border-radius: 6px;
  padding: 4px;
  box-sizing: border-box;
}

.wc-block-components-order-summary-item__quantity {
  background: var(--co-ink) !important;
  color: var(--co-bg) !important;
  border: 2px solid var(--co-card) !important;
  box-shadow: none !important;
}

.wc-block-components-order-summary-item .wc-block-components-product-name {
  font-size: 13px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--co-ink);
}

.wc-block-components-order-summary-item .wc-block-components-product-metadata {
  font-size: 11px;
  color: var(--co-muted);
}

/* Summary lines: only title / coupon / total get a line (Woo puts one on every wrapper) */
.wp-block-woocommerce-checkout-order-summary-block .wc-block-components-totals-wrapper,
.wp-block-woocommerce-checkout-order-summary-totals-block {
  border-top: 0 !important;
  border-bottom: 0 !important;
}

.wp-block-woocommerce-checkout-order-summary-block .wc-block-components-totals-wrapper:empty {
  display: none;
}

.wp-block-woocommerce-checkout-order-summary-block .wp-block-woocommerce-checkout-order-summary-coupon-form-block {
  border-top: 1px solid var(--co-line) !important;
  border-bottom: 1px solid var(--co-line) !important;
}

/* Coupon row with tag icon */
.wc-block-components-totals-coupon .wc-block-components-panel__button {
  padding-left: 28px !important;
  font-size: 13px;
  position: relative;
}

.wc-block-components-totals-coupon .wc-block-components-panel__button::before {
  content: "";
  position: absolute;
  left: 2px;
  top: 50%;
  width: 16px;
  height: 16px;
  transform: translateY(-50%);
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%231E1E1E' stroke-width='1.3'%3E%3Cpath d='M1.5 8.5 8 2h6v6l-6.5 6.5z'/%3E%3Ccircle cx='11' cy='5' r='1.2'/%3E%3C/svg%3E") center / contain no-repeat;
}

.wc-block-components-totals-coupon__form {
  display: flex;
  gap: 8px;
  align-items: stretch;
}

.wc-block-components-totals-coupon__button {
  flex: 0 0 auto;
  width: auto !important;
  margin: 0 !important;
  padding: 0 22px !important;
  background: var(--co-ink) !important;
  color: var(--co-bg) !important;
  border: none !important;
  border-radius: 999px !important;
  font-family: 'GT Pressura Mono', monospace !important;
  font-size: 13px !important;
}

/* Totals */
.wc-block-components-totals-item {
  font-size: 13px;
}

.wc-block-components-totals-footer-item {
  border-top: 1px solid var(--co-line);
}

.wc-block-components-totals-footer-item .wc-block-components-totals-item__label,
.wc-block-components-totals-footer-item .wc-block-components-totals-item__value {
  font-size: 20px !important;
  font-weight: 600 !important;
}

/* Small screens */
@media (max-width: 600px) {
  body.woocommerce-checkout main.page-content {
    padding: 18px 12px 40px;
  }

  .ub-checkout-header__logo img {
    height: 26px;
  }

  #shipping-option .wc-block-components-radio-control__option {
    padding-left: 88px !important;
  }

  body.woocommerce-checkout::before,
  body.woocommerce-checkout::after {
    width: 220px;
    height: 150px;
  }
}

/* ==========================================================
   LOADER — first visit: wordmark + ladybug / page change: ladybug
   Only transform/opacity animate (GPU) so it stays smooth on phones.
   .ub-loader__walker moves across; the image inside wobbles.
   ========================================================== */
#ub-loader {
  position: fixed;
  inset: 0;
  z-index: 99999;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #ECEBD1;
  opacity: 1;
  visibility: visible;
  overflow: hidden;
  user-select: none;
  transition: opacity 0.45s ease, visibility 0.45s ease;
}

#ub-loader.is-hidden {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

#ub-loader .ub-loader__logo,
#ub-loader .ub-loader__walker {
  display: none;
}

/* First visit: wordmark in the middle */
#ub-loader.is-first .ub-loader__logo {
  display: block;
  width: min(320px, 60vw);
  height: auto;
  animation: ub-logo-in 0.8s ease-out both;
}

/* Walking ladybug (both modes) */
#ub-loader.is-bug .ub-loader__walker,
#ub-loader.is-first .ub-loader__walker {
  display: block;
  position: absolute;
  top: 50%;
  left: 0;
  width: 110px;
  margin-top: -40px;
  will-change: transform;
  /* negative delay = already on screen when the loader appears */
  animation: ub-bug-walk 3s linear -0.7s infinite;
}

#ub-loader.is-first .ub-loader__walker {
  top: auto;
  bottom: 14vh;
  width: 72px;
  margin-top: 0;
}

#ub-loader .ub-loader__bug {
  display: block;
  width: 100%;
  height: auto;
  will-change: transform;
  /* image faces left; mirrored so it walks head-first to the right */
  animation: ub-bug-wobble 0.3s ease-in-out infinite alternate;
}

@keyframes ub-logo-in {
  from { opacity: 0; transform: scale(0.94); }
  to { opacity: 1; transform: scale(1); }
}

@keyframes ub-bug-walk {
  from { transform: translate3d(-140px, 0, 0); }
  to { transform: translate3d(calc(100vw + 20px), 0, 0); }
}

@keyframes ub-bug-wobble {
  from { transform: scaleX(-1) rotate(-5deg); }
  to { transform: scaleX(-1) rotate(5deg); }
}

@media (prefers-reduced-motion: reduce) {
  #ub-loader.is-first .ub-loader__logo,
  #ub-loader .ub-loader__walker {
    animation: none !important;
  }

  #ub-loader.is-bug .ub-loader__walker {
    left: 50%;
    margin-left: -55px;
  }

  #ub-loader .ub-loader__bug {
    animation: none;
    transform: scaleX(-1);
  }
}

/* ==========================================================
   PRODUCT ACCORDION — smooth open/close (single product)
   Unlayered: overrides the older display:none/block rules
   ========================================================== */
/* Height is animated by the script in single-product.php (0 <-> measured px) */
.product-info-section .toggle-content {
  display: block !important;
  height: 0;
  overflow: hidden;
  opacity: 0;
  padding: 0 !important;
  transition: height 0.4s ease, opacity 0.3s ease;
}

.product-info-section.open .toggle-content {
  height: auto;
  opacity: 1;
}

.product-info-section .toggle-inner {
  padding-bottom: 1px; /* keeps last paragraph margin inside the measured height */
}

.product-info-section .toggle-inner > :first-child {
  margin-top: 1rem;
}

/* +/– icon drawn with two bars; vertical bar rotates flat when open */
.product-info-section .toggle-icon {
  position: relative;
  flex: 0 0 auto;
  width: 16px;
  height: 16px;
  font-size: 0 !important;
  transform: none !important;
}

.product-info-section .toggle-icon::before,
.product-info-section .toggle-icon::after {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  width: 100%;
  height: 2px;
  margin-top: -1px;
  border-radius: 1px;
  background: currentColor;
  transition: transform 0.35s ease;
}

/* vertical bar: shrinks away when open (+ becomes -) */
.product-info-section .toggle-icon::after {
  transform: rotate(90deg) scaleX(1);
}

.product-info-section.open .toggle-icon::after {
  transform: rotate(90deg) scaleX(0);
}

.product-info-section .toggle-header {
  min-height: 24px;
}

.product-info-section .toggle-header:focus-visible {
  outline: 1px solid currentColor;
  outline-offset: 4px;
}

@media (prefers-reduced-motion: reduce) {
  .product-info-section .toggle-content,
  .product-info-section .toggle-inner,
  .product-info-section .toggle-icon::after {
    transition: none;
  }
}

/* ==========================================================
   PRODUCT SLIDER — prev/next arrows inside the dots pill
   ========================================================== */
.flickity-page-dots .ub-dot-arrow {
  display: flex;
  align-items: center;
  list-style: none;
  margin: 0;
  padding: 0;
}

.flickity-page-dots .ub-dot-arrow--prev {
  order: -1;
}

.flickity-page-dots .ub-dot-arrow--next {
  order: 999;
}

.flickity-page-dots .ub-dot-arrow button {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  color: #1E1E1E;
  cursor: pointer;
  transition: transform 0.2s ease, opacity 0.2s ease;
}

.flickity-page-dots .ub-dot-arrow svg {
  width: 16px;
  height: 16px;
}

.flickity-page-dots .ub-dot-arrow button:hover {
  transform: scale(1.1);
}

.flickity-page-dots .ub-dot-arrow button:focus-visible {
  outline: 1px solid #1E1E1E;
  outline-offset: 2px;
  border-radius: 50%;
}

.flickity-page-dots .ub-dot-arrow.is-disabled button {
  opacity: 0.3;
  pointer-events: none;
}

@media (max-width: 1024px) {
  .flickity-page-dots .ub-dot-arrow button {
    width: 16px;
    height: 16px;
  }

  .flickity-page-dots .ub-dot-arrow svg {
    width: 12px;
    height: 12px;
  }
}

/* Home hero on mobile: same right edge as the boxes below (page margin 3px + padding 3px) */
@media (max-width: 1199px) {
  body.home .underbug-hero {
    padding-right: calc(0.188rem + 3px);
  }

  /* Clip the scaled (1.03) hero image to the slider edges so it matches the boxes */
  body.home .underbug-hero-slider {
    clip-path: inset(0 round 12px);
  }
}