/*
Theme Name: Flippy Storefront
Theme URI: https://buyflippy.com
Description: Modern, simple Storefront child theme for Flippy — asphalt + amber LED brand.
Author: Flippy
Template: storefront
Version: 1.7.3
Text Domain: flippy-storefront
*/

/* =========================================================
   Design tokens — night-drive asphalt + product amber LED
   ========================================================= */
:root {
  --flip-ink: #0e1116;
  --flip-ink-soft: #5c6570;
  --flip-paper: #f7f5f2;
  --flip-white: #ffffff;
  --flip-amber: #ff8a1f;
  --flip-amber-deep: #e56a00;
  --flip-asphalt: #151a22;
  --flip-asphalt-2: #1e2633;
  --flip-line: rgba(14, 17, 22, 0.08);
  --flip-radius: 14px;
  /* Outfit only — Syne was too condensed/hard to read for titles */
  --flip-font: "Outfit", system-ui, sans-serif;
  --flip-display: "Outfit", system-ui, sans-serif;
  --flip-max: 1140px;
  --flip-gutter: clamp(1.25rem, 4.5vw, 2.75rem);
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

/* =========================================================
   Base
   ========================================================= */
html {
  overflow-x: clip;
}

body {
  font-family: var(--flip-font);
  color: var(--flip-ink);
  background:
    radial-gradient(1200px 600px at 10% -10%, rgba(255, 138, 31, 0.12), transparent 55%),
    radial-gradient(900px 500px at 100% 0%, rgba(30, 38, 51, 0.06), transparent 50%),
    var(--flip-paper);
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}

h1, h2, h3, h4, .site-title, .site-header .site-branding .site-title a {
  font-family: var(--flip-display);
  letter-spacing: -0.03em;
  font-weight: 800;
}

a { color: var(--flip-amber-deep); }
a:hover, a:focus { color: var(--flip-ink); }

/* =========================================================
   Header / chrome
   ========================================================= */
.site-header {
  background: rgba(247, 245, 242, 0.88) !important;
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--flip-line);
  padding-top: 0.75rem;
  padding-bottom: 0.75rem;
  /* Storefront adds a huge margin-bottom on static-front-page templates
     (.home.page:not(.page-template-template-homepage)) to leave room for
     its own hero widget. We build our own hero, so kill that gap. */
  margin-bottom: 0 !important;
}

/* Keep chrome inset on every page / device */
.site-header .col-full,
.site-footer .col-full,
.storefront-breadcrumb .col-full {
  max-width: var(--flip-max) !important;
  margin-left: auto !important;
  margin-right: auto !important;
  padding-left: var(--flip-gutter) !important;
  padding-right: var(--flip-gutter) !important;
  width: 100% !important;
}

.site-header .site-branding .site-title a,
.site-header .site-branding .site-title {
  font-family: var(--flip-display);
  font-weight: 800;
  font-size: 1.55rem;
  letter-spacing: -0.04em;
  color: var(--flip-ink) !important;
  text-transform: none;
}

.site-header .site-description { display: none; }

/* Minimal chrome: one row — logo left, account + cart right */
.site-header .site-search,
.site-header .main-navigation,
.site-header .menu-toggle,
.site-header .primary-navigation,
.site-header #site-navigation,
.site-header #site-navigation > .menu,
.site-header .storefront-primary-navigation,
.secondary-navigation {
  display: none !important;
}

.site-header > .col-full {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 0.75rem;
  width: 100% !important;
}

.site-header .site-branding {
  margin: 0 !important;
  float: none !important;
  width: auto !important;
}

.site-header .custom-logo-link {
  display: inline-block;
  line-height: 0;
  flex-shrink: 0;
  width: auto;
  height: auto;
}

/* Wide wordmark — override Storefront/customizer width:100% square squash */
.site-header .custom-logo-link img.custom-logo,
.site-header .site-logo-link img.custom-logo {
  display: block !important;
  height: 3rem !important;
  width: auto !important;
  max-width: 220px !important;
  max-height: none !important;
}

@media (min-width: 768px) {
  .site-header .custom-logo-link img.custom-logo,
  .site-header .site-logo-link img.custom-logo {
    height: 3.25rem !important;
    max-width: 240px !important;
  }
}

.site-header .site-branding:has(.custom-logo-link) .site-title,
.site-header .site-branding:has(.custom-logo-link) .site-description {
  display: none !important;
}

.flip-header-actions {
  display: inline-flex;
  align-items: center;
  gap: 0.2rem;
  margin-left: auto;
  flex: 0 0 auto;
}

.flip-header-account {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 999px;
  color: var(--flip-ink) !important;
  text-decoration: none !important;
  transition: background 0.15s ease;
}

.flip-header-account:hover {
  background: rgba(14, 17, 22, 0.06);
  color: var(--flip-ink) !important;
}

.flip-header-account svg {
  width: 1.35rem;
  height: 1.35rem;
  display: block;
}

.site-header-cart {
  margin: 0 !important;
  list-style: none !important;
}

.site-header-cart .cart-contents {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  gap: 0.35rem;
  min-width: 2.5rem;
  min-height: 2.5rem;
  padding: 0.35rem 0.55rem !important;
  border-radius: 999px;
  color: var(--flip-ink) !important;
  font-weight: 700 !important;
  font-size: 0.85rem !important;
}

.site-header-cart .cart-contents:hover {
  background: rgba(14, 17, 22, 0.06);
}

.site-header-cart .cart-contents .amount {
  display: none; /* icon + count only */
}

.site-header-cart .cart-contents .count {
  background: var(--flip-asphalt);
  color: #fff;
  border-radius: 999px;
  padding: 0.1rem 0.45rem;
  font-size: 0.72rem;
  line-height: 1.2;
}

/* Handheld bar: keep account + cart, hide search */
.storefront-handheld-footer-bar ul li.search {
  display: none !important;
}

.flip-footer-legal {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 0.5rem 0.75rem;
  padding: 0.5rem var(--flip-gutter) 1.25rem;
  font-size: 0.9rem;
  font-weight: 600;
}

.flip-footer-legal a {
  color: rgba(255, 255, 255, 0.85) !important;
  text-decoration: none;
}

.flip-footer-legal a:hover {
  color: var(--flip-amber) !important;
}

.flip-footer-legal span {
  color: rgba(255, 255, 255, 0.35);
}

.flip-buytrust a {
  color: inherit;
  text-decoration: none;
}

.flip-buytrust a:hover strong {
  color: var(--flip-amber-deep);
}

/* Soften Storefront handheld footer */
/* Hidden — account + cart already live in the header on every device. */
.storefront-handheld-footer-bar {
  display: none !important;
}
.storefront-handheld-footer-bar ul li > a {
  color: #fff !important;
}
.storefront-handheld-footer-bar ul li > a::before {
  color: #fff !important;
}

/* =========================================================
   Buttons (do NOT style .flip-bundle / .menu-toggle — those are UI chrome)
   ========================================================= */
input[type="submit"],
.button,
.wc-block-components-button,
.woocommerce a.button,
.woocommerce button.button:not(.flip-bundle),
.woocommerce input.button,
.woocommerce #respond input#submit,
.woocommerce a.button.alt,
.woocommerce button.button.alt,
.added_to_cart,
.flip-cta,
button.single_add_to_cart_button {
  font-family: var(--flip-font) !important;
  font-weight: 700 !important;
  border-radius: 999px !important;
  border: 0 !important;
  background: linear-gradient(135deg, var(--flip-amber), var(--flip-amber-deep)) !important;
  color: #fff !important;
  box-shadow: 0 10px 28px rgba(229, 106, 0, 0.28);
  transition: transform 0.18s ease, box-shadow 0.18s ease !important;
}

.woocommerce a.button:hover,
.woocommerce button.button:not(.flip-bundle):hover,
.button:hover,
button.single_add_to_cart_button:hover {
  transform: translateY(-2px);
  box-shadow: 0 14px 32px rgba(229, 106, 0, 0.38) !important;
}

/* =========================================================
   Front page: hide “Home” title + tighten layout
   ========================================================= */
.home .entry-header,
.home .entry-title,
.page-id-88 .entry-header,
.page-id-88 .entry-title {
  display: none !important;
}

.home #primary,
.home .content-area,
.home .site-main,
.page-id-88 #primary,
.page-id-88 .site-main {
  margin: 0 !important;
  padding: 0 !important;
  max-width: none !important;
  width: 100% !important;
}

/* Full-bleed only for page content — not header/footer */
.home .site-content > .col-full,
.page-id-88 .site-content > .col-full {
  max-width: none !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  width: 100% !important;
}

.home .entry-content,
.page-id-88 .entry-content {
  margin: 0 !important;
  max-width: none !important;
  width: 100%;
  overflow-x: clip;
}

.home .site-content,
.page-id-88 .site-content {
  padding-top: 0 !important;
}

/* =========================================================
   Custom homepage sections
   ========================================================= */
.flip-announce {
  background: var(--flip-amber);
  color: #14110e;
  text-align: center;
  font-weight: 800;
  font-size: clamp(0.72rem, 2.2vw, 0.85rem);
  letter-spacing: 0.04em;
  padding: 0.65rem var(--flip-gutter);
}

.flip-hero {
  position: relative;
  min-height: min(92vh, 820px);
  display: grid;
  align-items: stretch;
  overflow: hidden;
  background: linear-gradient(160deg, var(--flip-asphalt) 0%, var(--flip-asphalt-2) 45%, #2a1a10 100%);
  color: #fff;
}

.flip-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 70% 55% at 75% 45%, rgba(255, 138, 31, 0.35), transparent 60%),
    radial-gradient(ellipse 40% 40% at 20% 80%, rgba(255, 255, 255, 0.05), transparent 55%);
  pointer-events: none;
}

.flip-hero__inner {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
  gap: clamp(1.5rem, 3vw, 2.5rem);
  max-width: var(--flip-max);
  margin: 0 auto;
  padding: clamp(2.5rem, 5vw, 3.75rem) var(--flip-gutter) clamp(2.25rem, 4vw, 3.25rem);
  align-items: center;
  width: 100%;
}

.flip-hero__copy {
  min-width: 0;
}

.flip-brand {
  display: inline-block;
  font-family: var(--flip-display);
  font-weight: 800;
  font-size: clamp(2.6rem, 6vw, 4.2rem);
  letter-spacing: -0.05em;
  line-height: 0.95;
  margin: 0 0 1rem;
  color: #fff;
}

.flip-brand span {
  color: var(--flip-amber);
}

/* Retired: redundant with the "4.9 · 2,847 reviews" line already in the
   reviews section further down the page. Kept as a hard kill-switch. */
.flip-rating-row {
  display: none !important;
}

.flip-rating-row__stars,
.flip-buy__rating span:first-child {
  color: var(--flip-amber);
  letter-spacing: 0.06em;
}

.flip-rating-row strong {
  color: #fff;
  font-weight: 800;
}

.flip-buy__rating {
  margin: 0.35rem 0 0.75rem !important;
  font-size: 1rem;
  font-weight: 600;
  color: var(--flip-ink-soft);
}

.flip-buy__rating strong {
  color: var(--flip-ink);
}

.flip-reviews__foot {
  margin: 1.5rem 0 0;
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--flip-ink-soft);
}

/* Custom badge retired — WooCommerce's native .woocommerce-product-rating
   (styled below) already shows the same info once, not twice. Keep this
   selector as a hard kill-switch in case an old cached JS still injects it. */
.flip-product-rating {
  display: none !important;
}

.single-product .woocommerce-product-rating {
  margin: 0.35rem 0 0.85rem !important;
  font-size: 0.95rem;
}

.single-product .woocommerce-product-rating .star-rating {
  color: var(--flip-amber);
  font-size: 1.05rem;
}

.single-product .woocommerce-product-rating a {
  color: var(--flip-ink-soft);
  font-weight: 600;
  text-decoration: underline;
}

.flip-hero h1 {
  font-family: var(--flip-display);
  font-size: clamp(1.75rem, 3.8vw, 2.75rem);
  line-height: 1.1;
  margin: 0 0 1rem;
  font-weight: 700;
  letter-spacing: -0.03em;
  color: #fff;
}

.flip-hero h1 em {
  font-style: normal;
  color: var(--flip-amber);
}

.flip-hero__copy p {
  font-size: 1.1rem;
  line-height: 1.55;
  color: rgba(255, 255, 255, 0.78);
  max-width: 34rem;
  margin: 0 0 1.75rem;
}

.flip-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.95rem 1.6rem;
  border-radius: 999px;
  background: linear-gradient(135deg, var(--flip-amber), var(--flip-amber-deep));
  color: #fff !important;
  font-weight: 700;
  text-decoration: none !important;
  box-shadow: 0 12px 36px rgba(255, 138, 31, 0.35);
  transition: transform 0.18s ease, box-shadow 0.18s ease;
}

.flip-cta:hover {
  transform: translateY(-2px);
  box-shadow: 0 16px 40px rgba(255, 138, 31, 0.45);
  color: #fff !important;
}

.flip-hero__media {
  position: relative;
  min-width: 0;
  animation: flip-float 5.5s ease-in-out infinite;
}

.flip-hero__media img,
.flip-hero__media video {
  width: 100%;
  max-width: 100%;
  height: auto;
  display: block;
  border-radius: 20px;
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.45);
  background: #0e1116;
}

@keyframes flip-float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-10px); }
}

.flip-trust {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem 1.25rem;
  margin-top: 1.5rem;
  font-size: 0.88rem;
  color: rgba(255, 255, 255, 0.65);
  font-weight: 600;
}

.flip-trust span::before {
  content: "✓ ";
  color: var(--flip-amber);
}

.flip-proof {
  background: var(--flip-white);
  border-bottom: 1px solid var(--flip-line);
}

.flip-proof__inner {
  max-width: 960px;
  margin: 0 auto;
  padding: 1.5rem var(--flip-gutter);
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.75rem 1rem;
  text-align: center;
  align-items: start;
}

.flip-proof__stat strong {
  display: block;
  font-family: var(--flip-display);
  font-size: 1.6rem;
  font-weight: 800;
  color: var(--flip-ink);
  letter-spacing: -0.03em;
}

.flip-proof__stat span {
  font-size: 0.85rem;
  color: var(--flip-ink-soft);
  font-weight: 600;
}

.flip-gallery {
  max-width: 1040px;
  margin: 0 auto;
  padding: clamp(2.5rem, 5vw, 3.5rem) var(--flip-gutter) 1rem;
  text-align: center;
}

.flip-gallery h2 {
  margin: 0 0 0.4rem;
  font-size: clamp(1.6rem, 3vw, 2.2rem);
}

.flip-gallery > p {
  color: var(--flip-ink-soft);
  margin: 0 0 1.75rem;
}

/* "8 patterns" feature grid — small circular badges, not full photos */
.flip-gallery__grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1rem 0.75rem;
  list-style: none;
  padding: 0;
  margin: 0;
}

.flip-gallery__grid li {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.6rem;
}

.flip-gallery__grid img {
  width: 100%;
  max-width: 128px;
  aspect-ratio: 1;
  object-fit: cover;
  border-radius: 50%;
  background: #0e1116;
  border: 1px solid var(--flip-line);
  box-shadow: 0 10px 26px rgba(14, 17, 22, 0.14);
}

.flip-gallery__grid span {
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--flip-ink);
}

.flip-features {
  max-width: 960px;
  margin: 0 auto;
  padding: clamp(2.25rem, 4vw, 3rem) var(--flip-gutter) 1rem;
  text-align: center;
}

.flip-features h2 {
  margin: 0 0 1.75rem;
  font-size: clamp(1.5rem, 3vw, 2.1rem);
}

.flip-features__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1.5rem;
  text-align: left;
}

.flip-features__grid > div {
  background: var(--flip-white);
  border: 1px solid var(--flip-line);
  border-radius: 16px;
  padding: 1.25rem 1.2rem;
}

.flip-features__grid h3 {
  margin: 0 0 0.4rem;
  font-size: 1.1rem;
}

.flip-features__grid p {
  margin: 0;
  color: var(--flip-ink-soft);
}

.flip-reviews {
  max-width: 1040px;
  margin: 0 auto;
  padding: clamp(2.25rem, 4vw, 3rem) var(--flip-gutter);
  text-align: center;
}

.flip-reviews h2 {
  margin: 0 0 0.35rem;
}

.flip-reviews__sub {
  color: var(--flip-ink-soft);
  margin: 0 0 1.75rem;
}

.flip-reviews__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1rem;
  text-align: left;
}

.flip-reviews blockquote {
  margin: 0;
  background: var(--flip-white);
  border: 1px solid var(--flip-line);
  border-radius: 16px;
  padding: 1.25rem;
}

.flip-reviews .stars {
  color: var(--flip-amber);
  margin-bottom: 0.5rem;
  letter-spacing: 0.05em;
}

.flip-reviews p {
  margin: 0 0 0.85rem;
  color: var(--flip-ink);
  font-size: 0.98rem;
  line-height: 1.5;
}

.flip-reviews cite {
  font-style: normal;
  font-size: 0.85rem;
  color: var(--flip-ink-soft);
  font-weight: 600;
}

/* How it works — one job section, no card chrome */
.flip-steps {
  max-width: 960px;
  margin: 0 auto;
  padding: clamp(3rem, 6vw, 4.5rem) var(--flip-gutter) clamp(2.5rem, 5vw, 3.5rem);
  text-align: center;
}

.flip-steps h2 {
  font-size: clamp(1.6rem, 3vw, 2.2rem);
  margin: 0 0 0.5rem;
}

.flip-steps > p {
  color: var(--flip-ink-soft);
  margin: 0 0 2.5rem;
}

.flip-steps__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 2rem;
  text-align: left;
}

.flip-steps__grid h3 {
  font-size: 1.15rem;
  margin: 0 0 0.4rem;
}

.flip-steps__grid p {
  margin: 0;
  color: var(--flip-ink-soft);
  font-size: 0.98rem;
}

.flip-steps__num {
  display: inline-flex;
  width: 2rem;
  height: 2rem;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  background: var(--flip-asphalt);
  color: var(--flip-amber);
  font-weight: 800;
  font-size: 0.85rem;
  margin-bottom: 0.75rem;
}

.flip-band {
  background: var(--flip-asphalt);
  color: #fff;
  text-align: center;
  padding: clamp(2.75rem, 5vw, 3.5rem) var(--flip-gutter) clamp(3.25rem, 6vw, 4.5rem);
}

.flip-band h2 {
  color: #ffffff !important;
  margin: 0 0 0.75rem;
  font-size: clamp(1.5rem, 3vw, 2rem);
}

.flip-band p {
  color: rgba(255, 255, 255, 0.78) !important;
  margin: 0 0 1.25rem;
}

.flip-band .flip-cta {
  margin-top: 0.5rem;
  color: #fff !important;
}

/* "See it in action" — real customer-style demo clip */
.flip-action {
  background: var(--flip-asphalt);
  color: #fff;
  text-align: center;
  padding: clamp(3rem, 6vw, 4.5rem) var(--flip-gutter);
}

.flip-action h2 {
  color: #fff !important;
  margin: 0 0 0.5rem;
  font-size: clamp(1.6rem, 3vw, 2.2rem);
}

.flip-action > p {
  color: rgba(255, 255, 255, 0.72) !important;
  margin: 0 0 2rem;
}

.flip-action__video {
  width: 100%;
  max-width: 640px;
  height: auto;
  display: block;
  margin: 0 auto;
  border-radius: var(--flip-radius);
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.5);
  background: #000;
}

/* Buy intro above embedded product */
.flip-buy {
  padding: clamp(2.5rem, 5vw, 3.5rem) var(--flip-gutter) 0.5rem;
  max-width: 960px;
  margin: 0 auto;
  text-align: center;
}

.flip-buy h2 {
  font-size: clamp(1.7rem, 3vw, 2.3rem);
  margin: 0 0 0.5rem;
}

.flip-buy p {
  color: var(--flip-ink-soft);
  margin: 0;
  font-size: 1.05rem;
}

/* Embedded [product_page] on homepage — single-product layout */
.home .product.type-product,
.page-id-88 .product.type-product {
  max-width: 1040px;
  width: min(1040px, calc(100% - (var(--flip-gutter) * 2))) !important;
  margin: 0 auto 2rem !important;
  padding: clamp(1rem, 3vw, 1.75rem) !important;
  background: var(--flip-white);
  border-radius: 24px;
  box-shadow: 0 18px 50px rgba(14, 17, 22, 0.08);
  border: 1px solid var(--flip-line);
  box-sizing: border-box;
}

/* Gallery removed on homepage buy block — keep summary full-width. */
.home div.product .woocommerce-product-gallery,
.page-id-88 div.product .woocommerce-product-gallery,
.home div.product div.images,
.page-id-88 div.product div.images,
.home div.product .onsale,
.page-id-88 div.product .onsale,
.home div.product .product_title,
.page-id-88 div.product .product_title,
.home div.product .woocommerce-product-rating,
.page-id-88 div.product .woocommerce-product-rating,
.home div.product .woocommerce-product-details__short-description,
.page-id-88 div.product .woocommerce-product-details__short-description {
  display: none !important;
}

.home div.product .summary,
.page-id-88 div.product .summary {
  width: 100% !important;
  float: none !important;
  max-width: 100%;
  min-width: 0;
  margin: 0 !important;
  padding: 0 !important;
}

.home .product .woocommerce-tabs,
.page-id-88 .product .woocommerce-tabs,
.home .product .woocommerce-tabs.wc-tabs-wrapper,
.page-id-88 .product .woocommerce-tabs.wc-tabs-wrapper,
.home .product #reviews,
.page-id-88 .product #reviews,
.home .product .related,
.page-id-88 .product .related,
.home .product .upsells,
.page-id-88 .product .upsells,
.home .product .product_meta,
.page-id-88 .product .product_meta {
  display: none !important;
}

.flip-modes {
  padding: 2rem var(--flip-gutter) 4rem;
}

.flip-modes__inner {
  max-width: 1040px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
  gap: clamp(1.5rem, 3vw, 2.5rem);
  align-items: center;
}

.flip-modes__copy h2 {
  font-size: clamp(1.6rem, 3vw, 2.2rem);
  margin: 0 0 0.75rem;
}

.flip-modes__copy p {
  color: var(--flip-ink-soft);
  font-size: 1.05rem;
  margin: 0;
  line-height: 1.55;
}

.flip-modes__copy em {
  font-style: normal;
  color: var(--flip-amber-deep);
  font-weight: 700;
}

.flip-modes__media img {
  width: 100%;
  border-radius: 20px;
  box-shadow: 0 16px 40px rgba(14, 17, 22, 0.1);
  background: #fff;
}

.flip-faq {
  max-width: 720px;
  margin: 0 auto;
  padding: 1rem var(--flip-gutter) 4rem;
}

.flip-faq h2 {
  text-align: center;
  font-size: clamp(1.6rem, 3vw, 2.1rem);
  margin: 0 0 1.5rem;
}

.flip-faq details {
  border-bottom: 1px solid var(--flip-line);
  padding: 1rem 0;
}

.flip-faq summary {
  font-weight: 700;
  font-size: 1.05rem;
  cursor: pointer;
  list-style: none;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
}

.flip-faq summary::-webkit-details-marker { display: none; }

.flip-faq summary::after {
  content: "+";
  color: var(--flip-amber-deep);
  font-size: 1.35rem;
  font-weight: 700;
}

.flip-faq details[open] summary::after { content: "–"; }

.flip-faq details p {
  margin: 0.75rem 0 0;
  color: var(--flip-ink-soft);
  line-height: 1.55;
}

/* =========================================================
   Bundle cards (replace variation dropdown)
   ========================================================= */
.flip-bundles-hidden,
.variations_form .variations,
.variations_form .reset_variations {
  position: absolute !important;
  left: -9999px !important;
  width: 1px !important;
  height: 1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
}

.flip-bundles {
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
  margin: 0 0 1.1rem;
}

.flip-bundle {
  position: relative;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 0.85rem;
  align-items: center;
  width: 100%;
  text-align: left;
  padding: 0.95rem 1rem;
  border-radius: 14px;
  border: 2px solid rgba(14, 17, 22, 0.14) !important;
  background: #ffffff !important;
  color: var(--flip-ink) !important;
  box-shadow: none !important;
  cursor: pointer;
  font-family: var(--flip-font) !important;
  font-weight: 600 !important;
  transform: none !important;
  transition: border-color 0.15s ease, background 0.15s ease, box-shadow 0.15s ease;
}

.flip-bundle__body {
  min-width: 0;
}

.flip-bundle:hover {
  border-color: rgba(229, 106, 0, 0.55) !important;
  background: #fffaf4 !important;
  transform: none !important;
  box-shadow: none !important;
  color: var(--flip-ink) !important;
}

.flip-bundle.is-selected {
  border-color: var(--flip-asphalt) !important;
  background: #fffaf4 !important;
  box-shadow: 0 8px 24px rgba(14, 17, 22, 0.06) !important;
  color: var(--flip-ink) !important;
}

.flip-bundle__radio {
  width: 1.15rem;
  height: 1.15rem;
  border-radius: 50%;
  border: 2px solid rgba(14, 17, 22, 0.25);
  display: inline-block;
  position: relative;
}

.flip-bundle.is-selected .flip-bundle__radio {
  border-color: var(--flip-asphalt);
}

.flip-bundle.is-selected .flip-bundle__radio::after {
  content: "";
  position: absolute;
  inset: 3px;
  border-radius: 50%;
  background: var(--flip-amber);
}

.flip-bundle__title {
  display: block;
  font-weight: 800;
  font-size: 0.98rem;
  color: var(--flip-ink);
  letter-spacing: -0.02em;
}

.flip-bundle__save {
  display: block;
  margin-top: 0.15rem;
  font-size: 0.82rem;
  font-weight: 700;
  color: #0d7a4f; /* darker green for contrast on cream/white */
}

.flip-bundle__price {
  text-align: right;
  white-space: nowrap;
}

.flip-bundle__now {
  display: block;
  font-weight: 800;
  font-size: 1.15rem;
  color: var(--flip-ink);
}

.flip-bundle__was {
  display: block;
  font-size: 0.85rem;
  color: #6b7280;
  text-decoration: line-through;
}

/* Hide Woo “50 in stock” — we show a simple In stock line instead */
.woocommerce-variation-availability,
.single_variation .stock,
.summary .stock {
  display: none !important;
}

/* Feature / section titles — readable weight & tracking */
.flip-features h2,
.flip-features h3,
.flip-steps h2,
.flip-steps h3,
.flip-reviews h2,
.flip-gallery h2,
.flip-buy h2,
.flip-faq h2,
.flip-modes__copy h2 {
  font-family: var(--flip-display);
  letter-spacing: -0.02em;
  font-weight: 800;
  color: var(--flip-ink);
}

.flip-features h3,
.flip-steps h3 {
  font-size: 1.15rem;
  line-height: 1.25;
}

.flip-bundle__badge {
  position: absolute;
  top: -0.55rem;
  right: 0.85rem;
  background: var(--flip-asphalt);
  color: #fff;
  font-size: 0.65rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  padding: 0.2rem 0.55rem;
  border-radius: 999px;
}

.flip-bundle[data-slug="2x-flippy"] .flip-bundle__badge {
  background: var(--flip-amber-deep);
}

.woocommerce div.product form.cart .single_add_to_cart_button,
.home .single_add_to_cart_button,
.page-id-88 .single_add_to_cart_button {
  width: 100% !important;
  margin-top: 0.35rem !important;
  padding: 1rem 1.25rem !important;
  font-size: 0.95rem !important;
  letter-spacing: 0.02em;
  border-radius: 12px !important;
  background: linear-gradient(135deg, #f0b35a, #e56a00) !important;
  color: #14110e !important;
  box-shadow: none !important;
}

.woocommerce-variation-add-to-cart .quantity {
  display: none !important; /* bundle qty is the variation */
}

.flip-stockline {
  margin: 0.85rem 0 0;
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--flip-ink-soft);
  display: flex;
  align-items: center;
  gap: 0.4rem;
}

.flip-stockline__dot {
  width: 0.55rem;
  height: 0.55rem;
  border-radius: 50%;
  background: #1fa774;
  display: inline-block;
}

.flip-buytrust {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.6rem;
  margin: 1rem 0 0;
}

.flip-buytrust div {
  background: #f3f1ee;
  border-radius: 12px;
  padding: 0.85rem 0.7rem;
  text-align: center;
}

.flip-buytrust strong {
  display: block;
  font-size: 0.88rem;
  font-weight: 800;
  color: var(--flip-ink);
}

.flip-buytrust span {
  display: block;
  margin-top: 0.15rem;
  font-size: 0.78rem;
  color: var(--flip-ink-soft);
  font-weight: 600;
}

/* =========================================================
   Product / shop polish
   ========================================================= */
.single-product .product_title {
  font-family: var(--flip-display);
  font-size: clamp(1.8rem, 3vw, 2.4rem);
}

.woocommerce div.product p.price,
.woocommerce div.product span.price {
  color: var(--flip-amber-deep) !important;
  font-weight: 800;
  font-size: 1.5rem;
}

/* Every bundle card below already shows its own clear price (with the
   strikethrough "was" price for the selected one), so the generic price
   range up top and the repeated "selected variation" price are just
   confusing clutter — one price per choice, not three. */
.single-product .summary > p.price,
.single-product .woocommerce-variation-price {
  display: none !important;
}

.woocommerce div.product div.images img {
  border-radius: var(--flip-radius);
  background: #fff;
}

.woocommerce-tabs ul.tabs li a {
  font-weight: 600;
}

.site-footer {
  background: var(--flip-asphalt) !important;
  color: rgba(255, 255, 255, 0.7);
  border-top: 0 !important;
}

.site-footer a { color: #fff; }
.site-footer a:hover { color: var(--flip-amber); }
.site-info { border-top: 1px solid rgba(255, 255, 255, 0.1) !important; color: rgba(255, 255, 255, 0.45); }

/* Subtle entry motion */
.flip-hero__copy {
  animation: flip-rise 0.7s ease both;
}
.flip-hero__media {
  animation: flip-rise 0.9s ease 0.1s both, flip-float 5.5s ease-in-out 1s infinite;
}

@keyframes flip-rise {
  from { opacity: 0; transform: translateY(18px); }
  to { opacity: 1; transform: translateY(0); }
}

/* =========================================================
   Responsive — tablet
   ========================================================= */
@media (max-width: 1024px) {
  .flip-features__grid,
  .flip-reviews__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 900px) {
  .flip-hero {
    min-height: auto;
  }

  .flip-hero__inner {
    grid-template-columns: 1fr;
    gap: 1.75rem;
  }

  /* Mobile: text first (top), image below — desktop keeps text left / image right */
  .flip-hero__copy {
    order: 0;
  }

  .flip-hero__media {
    order: 1;
    max-width: 520px;
    margin: 0 auto;
    width: 100%;
  }

  .flip-brand {
    font-size: clamp(2.2rem, 10vw, 3.2rem);
  }

  .flip-steps__grid {
    grid-template-columns: 1fr;
    gap: 1.5rem;
    text-align: center;
  }

  .flip-steps__num {
    margin-left: auto;
    margin-right: auto;
  }

  .flip-modes__inner {
    grid-template-columns: 1fr;
    text-align: center;
  }

  .flip-modes__media {
    max-width: 520px;
    margin: 0 auto;
    width: 100%;
  }

  /* Keep proof stats on one row — 3 short items fit through tablet widths */
  .flip-proof__inner {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .site-header .site-search {
    max-width: 220px;
  }
}

/* =========================================================
   Responsive — phone
   ========================================================= */
@media (max-width: 600px) {
  :root {
    --flip-gutter: 1.15rem;
  }

  .site-header .site-search {
    display: none !important;
  }

  .flip-announce {
    line-height: 1.35;
  }

  .flip-trust {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.45rem;
  }

  .flip-proof__inner {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.5rem 0.4rem;
    padding-top: 1.15rem;
    padding-bottom: 1.15rem;
  }

  .flip-proof__stat strong {
    font-size: 1.15rem;
  }

  .flip-proof__stat span {
    font-size: 0.72rem;
    line-height: 1.25;
  }

  .flip-features__grid,
  .flip-reviews__grid {
    grid-template-columns: 1fr;
  }

  .flip-gallery__grid {
    gap: 0.7rem 0.5rem;
  }

  .flip-gallery__grid span {
    font-size: 0.72rem;
  }

  .flip-bundle {
    grid-template-columns: auto minmax(0, 1fr);
    grid-template-areas:
      "radio body"
      "radio price";
    gap: 0.35rem 0.75rem;
    padding: 0.85rem 0.85rem;
  }

  .flip-bundle__radio { grid-area: radio; align-self: start; margin-top: 0.2rem; }
  .flip-bundle__body { grid-area: body; }
  .flip-bundle__price {
    grid-area: price;
    text-align: left;
  }

  .flip-bundle__now {
    font-size: 1.05rem;
  }

  .flip-buytrust {
    grid-template-columns: 1fr;
  }

  .home .product.type-product,
  .page-id-88 .product.type-product {
    border-radius: 18px;
    padding: 0.9rem !important;
  }

  .home div.product div.images,
  .page-id-88 div.product div.images,
  .home div.product .summary,
  .page-id-88 div.product .summary {
    width: 100% !important;
    float: none !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }

  .woocommerce div.product form.cart .single_add_to_cart_button,
  .home .single_add_to_cart_button,
  .page-id-88 .single_add_to_cart_button {
    font-size: 0.88rem !important;
    padding: 0.95rem 0.85rem !important;
  }
}

@media (max-width: 380px) {
  .flip-gallery__grid {
    gap: 0.5rem 0.4rem;
  }

  .flip-proof__stat strong {
    font-size: 1.05rem;
  }

  .flip-proof__stat span {
    font-size: 0.68rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .flip-hero__copy,
  .flip-hero__media {
    animation: none !important;
  }
}