/*
 Theme Name:   Storefront Child - Genius Guppies
 Theme URI:    https://geniusguppies.com
 Description:  Genius Guppies child theme based on Storefront
 Author:       Genius Guppies Dev Team
 Author URI:   https://geniusguppies.com
 Template:     storefront
 Version:      8.0.0
 License:      GNU General Public License v2 or later
 License URI:  http://www.gnu.org/licenses/gpl-2.0.html
 Text Domain:  storefront-child
*/

:root {
  --gg-header-height-desktop: 72px;
  --gg-header-height-mobile: 60px;
  --gg-discount-bar-height: 56px;
  --gg-admin-bar-offset: 0px;
  --gg-shell-width: 1360px;
  --gg-navy: #1e3a5f;
  --gg-blue: #1b75bb;
  --gg-orange: #ff6b35;
  --gg-yellow: #ffd93d;
  --gg-border: #e5ecf3;
  --gg-text: #2d3748;
  --gg-muted: #64748b;
  --gg-bg: #fafbfc;
  --gg-card-shadow: 0 10px 30px rgba(30, 58, 95, 0.08);
}

body.admin-bar {
  --gg-admin-bar-offset: 32px;
}

@media (max-width: 782px) {
  body.admin-bar {
    --gg-admin-bar-offset: 46px;
  }
}

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

html {
  scroll-behavior: smooth;
}

body {
  font-family: "Inter", "Source Sans Pro", sans-serif;
  color: var(--gg-text);
  background: var(--gg-bg);
  padding-top: calc(var(--gg-header-height-desktop) + var(--gg-admin-bar-offset));
  padding-bottom: var(--gg-discount-bar-height);
  overflow-x: hidden;
}

body.gg-mobile-nav-open {
  overflow: hidden;
}

body:not(.gg-has-discount-bar) {
  --gg-discount-bar-height: 0px;
  padding-bottom: 0;
}

img,
svg {
  max-width: 100%;
}

.screen-reader-text {
  border: 0;
  clip: rect(1px, 1px, 1px, 1px);
  clip-path: inset(50%);
  height: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute;
  width: 1px;
  word-wrap: normal !important;
}

#page.hfeed {
  min-height: 100vh;
}

.storefront-handheld-footer-bar {
  display: none !important;
}

#secondary,
.widget-area,
aside.widget-area {
  display: none !important;
  width: 0 !important;
}

.site-content > .col-full {
  max-width: 100%;
  padding: 0;
}

#primary,
.content-area,
.woocommerce #primary,
.woocommerce-page #primary,
.woocommerce .content-area,
.woocommerce-page .content-area,
.left-sidebar .content-area,
.right-sidebar .content-area,
.storefront-full-width-content .content-area {
  width: 100%;
  max-width: 100%;
  float: none;
  clear: both;
  margin: 0;
  padding: 0 48px;
}

.woocommerce-breadcrumb {
  margin: 16px 48px 8px;
  padding: 0;
  color: var(--gg-muted);
}

.woocommerce-breadcrumb a {
  color: var(--gg-muted);
}

.storefront-breadcrumb {
  margin: 0 !important;
  padding: 14px 0 6px !important;
  border: 0 !important;
  background: transparent !important;
}

.storefront-breadcrumb .col-full {
  max-width: var(--gg-shell-width);
  margin: 0 auto;
  padding: 0 48px;
}

.gg-announcement-bar {
  position: relative;
  width: 100%;
  overflow: hidden;
  padding: 10px 0;
  background: linear-gradient(90deg, #1d4268 0%, #1b75bb 100%);
  color: #fff;
  box-shadow: 0 12px 24px rgba(27, 117, 187, 0.14);
}

.gg-ticker-wrap {
  display: flex;
  align-items: center;
  gap: 0;
  width: max-content;
  will-change: transform;
}

.gg-ticker-item {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 0 14px;
  color: #fff;
  font-size: 13px;
  font-weight: 700;
  line-height: 1.4;
  white-space: nowrap;
}

.gg-ticker-item .emoji {
  width: 14px;
  height: 14px;
  flex: 0 0 auto;
}

.gg-ticker-dot {
  width: 6px;
  height: 6px;
  margin: 0 2px;
  border-radius: 50%;
  background: rgba(255, 217, 61, 0.95);
  flex: 0 0 auto;
}

.gg-announcement-bar .badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 24px;
  padding: 0 10px;
  border-radius: 999px;
  background: var(--gg-yellow);
  color: var(--gg-navy);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

#gg-site-header {
  position: fixed;
  top: var(--gg-admin-bar-offset);
  left: 0;
  right: 0;
  z-index: 9999;
  padding: 0 !important;
  background: rgba(255, 255, 255, 0.98);
  border-bottom: 1px solid var(--gg-border);
  box-shadow: 0 10px 24px rgba(15, 23, 42, 0.08);
  backdrop-filter: blur(12px);
}

.gg-header-shell {
  max-width: var(--gg-shell-width);
  margin: 0 auto;
  padding: 0 24px;
  position: relative;
}

.gg-header-row {
  min-height: var(--gg-header-height-desktop);
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) minmax(260px, 360px) auto;
  align-items: center;
  column-gap: 18px;
}

.gg-header-branding,
.gg-header-branding a,
.gg-header-branding .logo {
  display: flex;
  align-items: center;
  justify-content: center;
}

.gg-header-branding {
  width: 128px;
  margin: 0 !important;
}

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

.gg-header-branding .custom-logo-link,
.gg-header-branding .site-logo-link,
.gg-header-branding .site-logo-anchor,
.gg-header-branding .custom-logo-link img,
.gg-header-branding .site-logo-link img {
  margin: 0 !important;
}

.gg-header-branding img {
  display: block;
  width: auto;
  height: 44px;
  max-width: 128px;
}

.gg-header-branding .site-title {
  margin: 0;
  font-size: 1.2rem;
  font-weight: 800;
  color: var(--gg-navy);
}

.gg-header-branding .site-title a {
  color: inherit;
  text-decoration: none;
}

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

.gg-primary-nav {
  flex: 1 1 auto;
  min-width: 0;
}

.gg-primary-nav .menu {
  display: flex;
  align-items: center;
  gap: 4px;
  flex-wrap: nowrap;
  list-style: none;
  margin: 0;
  padding: 0;
  min-width: 0;
}

.gg-primary-nav .menu > li {
  margin: 0;
  padding: 0;
}

.gg-primary-nav .menu > li > a {
  display: inline-flex;
  align-items: center;
  min-height: 40px;
  padding: 0 13px;
  border-radius: 999px;
  color: var(--gg-navy);
  font-size: 14px;
  font-weight: 700;
  text-decoration: none;
  text-transform: uppercase;
  white-space: nowrap;
  transition: background-color 0.2s ease, color 0.2s ease;
}

.gg-primary-nav .menu > li.current-menu-item > a,
.gg-primary-nav .menu > li.current_page_item > a,
.gg-primary-nav .menu > li > a:hover {
  background: #ffd8c8;
  color: var(--gg-orange);
  box-shadow: inset 0 0 0 1px rgba(255, 107, 53, 0.12);
}

.gg-header-tools {
  display: grid;
  grid-template-columns: minmax(260px, 360px) auto;
  align-items: center;
  justify-content: end;
  gap: 14px;
}

.gg-header-search {
  width: 100%;
  min-width: 0;
}

.gg-search-form {
  position: relative;
  margin: 0;
}

.gg-search-form .search-field {
  display: block;
  width: 100%;
  min-height: 44px;
  margin: 0;
  padding: 0 52px 0 18px;
  border: 1px solid #cad5e2;
  border-radius: 999px;
  background: #fff;
  color: var(--gg-text);
  font-size: 15px;
  box-shadow: 0 8px 18px rgba(15, 23, 42, 0.05);
}

.gg-search-form .search-field:focus {
  outline: none;
  border-color: var(--gg-blue);
  box-shadow: 0 0 0 4px rgba(27, 117, 187, 0.12);
}

.gg-search-submit {
  position: absolute;
  top: 50%;
  right: 12px;
  transform: translateY(-50%);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--gg-navy);
  cursor: pointer;
}

.gg-search-submit svg,
.gg-cart-pill__icon svg,
.gg-mobile-trigger svg,
.gg-discount-bar__icon svg {
  width: 20px;
  height: 20px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.gg-mobile-trigger {
  display: none;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: rgba(27, 117, 187, 0.08);
  color: var(--gg-navy);
  cursor: pointer;
}

.gg-header-cart-slot {
  display: flex;
  align-items: center;
  justify-content: flex-end;
}

.gg-cart-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 42px;
  min-width: 82px;
  padding: 0 14px;
  border: 2px solid var(--gg-navy);
  border-radius: 999px;
  background: #fff;
  color: var(--gg-navy);
  font-size: 14px;
  font-weight: 700;
  line-height: 1;
  text-decoration: none;
  transition: background-color 0.2s ease, color 0.2s ease, transform 0.2s ease;
}

.gg-cart-pill:hover {
  background: var(--gg-navy);
  color: #fff;
  transform: translateY(-1px);
}

.gg-cart-pill__count {
  min-width: 18px;
  text-align: center;
}

#gg-mobile-search-panel[hidden],
#gg-mobile-nav[hidden] {
  display: none !important;
}

#gg-mobile-search-panel {
  display: none;
}

#gg-mobile-nav {
  display: none;
}

#gg-mobile-search-panel:not([hidden]) {
  display: flex !important;
}

#gg-mobile-nav:not([hidden]) {
  display: block !important;
}

#gg-discount-bar {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 9997;
  min-height: var(--gg-discount-bar-height);
  border-top: 1px solid var(--gg-border);
  background: rgba(248, 250, 252, 0.97);
  box-shadow: 0 -12px 24px rgba(15, 23, 42, 0.07);
  backdrop-filter: blur(8px);
}

.gg-discount-bar__inner {
  max-width: var(--gg-shell-width);
  min-height: var(--gg-discount-bar-height);
  margin: 0 auto;
  padding: 10px 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  text-align: center;
  color: #0f172a;
  font-size: 14px;
  font-weight: 600;
}

.gg-discount-bar__icon {
  display: inline-flex;
  color: #10b981;
}

.gg-discount-bar__text strong {
  color: var(--gg-navy);
}

.woocommerce .woocommerce-products-header,
.woocommerce-page .woocommerce-products-header {
  text-align: center;
  padding: 0 !important;
  margin: 0 0 10px !important;
  min-height: 0 !important;
}

.woocommerce .page-title,
.woocommerce-page .page-title {
  color: var(--gg-navy);
  font-size: 28px;
  font-weight: 800;
  margin: 0 !important;
  padding: 0 !important;
}

.post-type-archive-product .site-main {
  display: flex;
  flex-direction: column;
  gap: 12px;
  width: 100%;
  max-width: var(--gg-shell-width);
  margin: 0 auto;
  padding-top: 0;
}

.storefront-sorting {
  width: 100%;
  max-width: none;
  margin: 0 0 12px;
  display: grid;
  grid-template-columns: minmax(220px, 260px) minmax(0, 1fr);
  align-items: center;
  gap: 12px 20px;
}

.storefront-sorting .woocommerce-notices-wrapper:empty {
  display: none;
}

.woocommerce .woocommerce-ordering,
.woocommerce-page .woocommerce-ordering,
.woocommerce .woocommerce-result-count,
.woocommerce-page .woocommerce-result-count {
  float: none;
  margin: 0;
}

.woocommerce .woocommerce-ordering,
.woocommerce-page .woocommerce-ordering {
  order: 1;
  justify-self: start;
}

.woocommerce .woocommerce-result-count,
.woocommerce-page .woocommerce-result-count {
  order: 2;
  justify-self: end;
  text-align: right;
  color: var(--gg-muted);
  font-size: 15px;
}

.woocommerce-ordering .orderby {
  min-height: 42px;
  min-width: 200px;
  padding: 0 40px 0 14px;
  border: 1px solid #cad5e2;
  border-radius: 12px;
  background: #fff;
  color: var(--gg-navy);
  font-size: 14px;
}

ul.products,
.woocommerce ul.products,
.woocommerce-page ul.products {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 28px;
  list-style: none;
  margin: 0 0 48px;
  padding: 0;
  width: 100%;
  max-width: none;
}

ul.products::before,
ul.products::after,
.woocommerce ul.products::before,
.woocommerce ul.products::after,
.woocommerce-page ul.products::before,
.woocommerce-page ul.products::after {
  content: none !important;
  display: none !important;
}

ul.products li.product,
.woocommerce ul.products li.product,
.woocommerce-page ul.products li.product {
  flex: 0 0 31%;
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  width: 31% !important;
  max-width: 31%;
  min-width: 0;
  height: 100%;
  float: none !important;
  clear: none !important;
  margin: 0;
  margin-right: 0 !important;
  padding: 22px 20px 20px;
  border: 1.5px solid #eef1f6;
  border-radius: 18px;
  background: #fff;
  box-shadow: var(--gg-card-shadow);
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}

ul.products li.product:hover {
  transform: translateY(-6px);
  box-shadow: 0 18px 36px rgba(30, 58, 95, 0.14);
}

ul.products li.product img {
  width: 100%;
  height: 210px;
  object-fit: contain;
  border-radius: 12px;
  margin-bottom: 16px;
}

ul.products li.product h2.woocommerce-loop-product__title {
  margin: 0 0 10px;
  min-height: 4.35em;
  color: var(--gg-navy);
  font-size: 14px;
  font-weight: 700;
  line-height: 1.45;
}

ul.products li.product .price {
  margin-bottom: 18px;
  color: var(--gg-orange);
  font-size: 18px;
  font-weight: 800;
}

ul.products li.product .button,
ul.products li.product a.button,
.woocommerce ul.products li.product .add_to_cart_button,
.woocommerce ul.products li.product .product_type_simple {
  display: block;
  width: 100%;
  margin-top: auto;
  padding: 12px 18px;
  border: 0;
  border-radius: 999px;
  background: var(--gg-orange);
  color: #fff;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.02em;
  text-decoration: none;
}

ul.products li.product .button:hover,
ul.products li.product a.button:hover,
.woocommerce ul.products li.product .add_to_cart_button:hover {
  background: #e5571f;
  color: #fff;
}

.gg-card-badges-wrapper {
  position: absolute;
  inset: 0 0 auto 0;
  height: 210px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  pointer-events: none;
  z-index: 2;
}

.gg-badge {
  display: inline-flex;
  align-self: flex-start;
  margin: 0;
  padding: 6px 10px;
  border-radius: 0 0 12px 0;
  color: #fff;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.gg-badge-bestseller {
  background: #f59e0b;
}

.gg-badge-new {
  background: var(--gg-blue);
}

.gg-badge-featured {
  background: var(--gg-navy);
}

.gg-badge-age {
  display: inline-flex;
  align-self: flex-start;
  margin: 0 0 10px 12px;
  padding: 6px 12px;
  border-radius: 999px;
  background: #e0f2fe;
  color: #0369a1;
  font-size: 11px;
  font-weight: 700;
}

body.blog:not(.single-post) #primary::before {
  content: "Learning Corner";
  display: block;
  margin: 0 -48px 32px;
  padding: 32px 48px;
  background: linear-gradient(120deg, var(--gg-navy), #2a5298);
  color: #fff;
  font-size: 30px;
  font-weight: 800;
  letter-spacing: 0.02em;
}

body.blog:not(.single-post) #main {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 28px;
  padding-bottom: 48px;
}

body.blog:not(.single-post) article.post {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border: 1.5px solid #eef1f6;
  border-radius: 18px;
  background: #fff;
  box-shadow: var(--gg-card-shadow);
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}

body.blog:not(.single-post) article.post:hover {
  transform: translateY(-6px);
  box-shadow: 0 18px 36px rgba(30, 58, 95, 0.14);
}

body.blog:not(.single-post) article.post .post-thumbnail {
  height: 200px;
  overflow: hidden;
  background: linear-gradient(135deg, var(--gg-navy), #2a5298);
}

body.blog:not(.single-post) article.post .post-thumbnail img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

body.blog:not(.single-post) .entry-header,
body.blog:not(.single-post) .entry-summary,
body.blog:not(.single-post) .entry-content,
body.blog:not(.single-post) .entry-footer,
body.blog:not(.single-post) .entry-meta,
body.blog:not(.single-post) .cat-links {
  padding-left: 18px;
  padding-right: 18px;
}

body.blog:not(.single-post) .cat-links {
  padding-top: 16px;
  padding-bottom: 4px;
}

body.blog:not(.single-post) .cat-links a {
  display: inline-flex;
  padding: 4px 10px;
  border-radius: 999px;
  background: #fff3e0;
  color: var(--gg-orange);
  font-size: 11px;
  font-weight: 700;
  text-decoration: none;
}

body.blog:not(.single-post) .entry-title {
  margin: 0;
  color: var(--gg-navy);
  font-size: 17px;
  font-weight: 700;
  line-height: 1.45;
}

body.blog:not(.single-post) .entry-title a {
  color: inherit;
  text-decoration: none;
}

body.blog:not(.single-post) .entry-title a:hover {
  color: var(--gg-orange);
}

body.blog:not(.single-post) .entry-meta {
  color: #94a3b8;
  font-size: 12px;
  padding-bottom: 8px;
}

body.blog:not(.single-post) .entry-summary,
body.blog:not(.single-post) .entry-content {
  color: #556070;
  font-size: 13px;
  line-height: 1.75;
  padding-bottom: 16px;
}

body.blog:not(.single-post) .entry-content h2,
body.blog:not(.single-post) .entry-content h3,
body.blog:not(.single-post) .entry-content h4,
body.blog:not(.single-post) .entry-content ul,
body.blog:not(.single-post) .entry-content ol {
  display: none;
}

body.blog:not(.single-post) .more-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 11px 18px;
  border-radius: 999px;
  background: var(--gg-navy);
  color: #fff;
  font-size: 13px;
  font-weight: 700;
  text-decoration: none;
}

body.blog:not(.single-post) .more-link:hover {
  background: var(--gg-orange);
  color: #fff;
}

body.single-post article.post {
  max-width: 860px;
  margin: 0 auto 48px;
  color: #475569;
  font-size: 16px;
  line-height: 1.9;
}

body.single-post .entry-title {
  color: var(--gg-navy);
  font-size: 34px;
  font-weight: 800;
  line-height: 1.2;
}

body.single-post .post-thumbnail img {
  border-radius: 18px;
}

body.page #primary {
  padding: 0;
}

body.page #main,
body.page article.page,
body.page .entry-content {
  width: 100%;
  max-width: 100%;
}

body.page .elementor-section-boxed > .elementor-container,
body.page .elementor-section > .elementor-container,
body.page .e-con-inner,
body.page .elementor-container {
  width: 100%;
  max-width: 100%;
}

body.page .elementor-inner-section .elementor-container {
  max-width: 1200px;
}

body.page .entry-header {
  margin: 0 -48px 40px;
  padding: 0 48px;
  background: linear-gradient(120deg, var(--gg-navy), #2a5298);
}

body.page .entry-title {
  margin: 0;
  padding: 48px 0 12px;
  color: #fff;
  font-size: 36px;
  font-weight: 800;
  text-align: center;
}

body.page:not(.elementor-page) .entry-content h2 {
  margin: 40px 0 16px;
  padding-left: 16px;
  border-left: 4px solid var(--gg-orange);
  color: var(--gg-navy);
  font-size: 24px;
  font-weight: 700;
}

body.page:not(.elementor-page) .entry-content p {
  color: #4a5568;
  font-size: 15.5px;
  line-height: 1.85;
}

body.page-id-48 .gg-au-cta h2,
body.page-id-48 .gg-au-cta h2 span,
body.page-id-48 .gg-au-cta p {
  border: 0;
  padding-left: 0;
}

/* CTA buttons must NOT inherit the padding-left:0 reset above */
body.page-id-48 .gg-au-btn-primary,
body.page-id-48 .gg-au-btn-outline {
  padding: 14px 32px !important;
  text-align: center !important;
}

body.page-id-48 .gg-au-cta {
  background-color: #1b3a5c !important;
  background-image: linear-gradient(135deg, #1b3a5c 0%, #1b75bb 100%) !important;
  background-repeat: no-repeat !important;
  color: #fff;
}

body.page-id-48 .gg-au-cta h2 {
  color: #fff !important;
}

body.page-id-48 .gg-au-cta h2 span {
  color: var(--gg-yellow) !important;
}

body.page-id-48 .gg-au-cta p {
  color: rgba(255, 255, 255, 0.86) !important;
}

body.page-id-48 .gg-au-btn-outline {
  border-color: rgba(255, 255, 255, 0.6) !important;
}

body.page-id-49 .gg-ct-form {
  display: grid !important;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  gap: 16px 20px !important;
  align-items: start;
}

body.page-id-49 .gg-ct-field-row {
  display: grid !important;
  grid-column: 1 / -1;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}

body.page-id-49 .gg-ct-form > div:nth-of-type(2) {
  grid-column: 1;
  grid-row: 2;
}

body.page-id-49 .gg-ct-form > div:nth-of-type(3) {
  grid-column: 2;
  grid-row: 2 / span 2;
}

body.page-id-49 .gg-ct-form > div:nth-of-type(3) textarea {
  min-height: 188px;
}

body.page-id-49 .gg-ct-submit {
  grid-column: 1;
  grid-row: 3;
  align-self: end;
}

.wpcf7 input[type="text"],
.wpcf7 input[type="email"],
.wpcf7 input[type="tel"],
.wpcf7 textarea,
.wpcf7 select {
  width: 100%;
  margin: 4px 0 14px;
  padding: 12px 16px;
  border: 1.5px solid #d0dae6;
  border-radius: 12px;
  background: #fff;
  color: var(--gg-text);
  font-size: 14px;
}

.wpcf7 input:focus,
.wpcf7 textarea:focus,
.wpcf7 select:focus {
  outline: none;
  border-color: var(--gg-navy);
  box-shadow: 0 0 0 3px rgba(30, 58, 95, 0.1);
}

.wpcf7 textarea {
  min-height: 130px;
}

.wpcf7 input[type="submit"],
.wpcf7-submit {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  padding: 0 28px;
  border: 0;
  border-radius: 999px;
  background: var(--gg-orange);
  color: #fff;
  font-size: 15px;
  font-weight: 700;
  cursor: pointer;
}

.wpcf7 input[type="submit"]:hover,
.wpcf7-submit:hover {
  background: #e5571f;
}

footer.site-footer,
#colophon,
.site-footer {
  background: #1a2f4a;
  color: #c4d0de;
  padding: 48px 0 0;
}

.footer-widgets {
  padding: 0 32px 40px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.site-footer .widget-title,
.site-footer h1,
.site-footer h2,
.site-footer h3 {
  margin-bottom: 16px;
  padding-bottom: 8px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  color: #fff;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.site-footer a {
  color: #8ea8c3;
  text-decoration: none;
}

.site-footer a:hover {
  color: var(--gg-orange);
}

.site-footer p {
  color: #8ea8c3;
  font-size: 13.5px;
  line-height: 1.7;
}

body.gg-hide-site-footer footer.site-footer,
body.gg-hide-site-footer #colophon,
body.gg-hide-site-footer .site-footer {
  display: none !important;
}

.site-footer .widget ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

.site-footer .widget ul li {
  margin-bottom: 10px;
}

.gg-footer-logo-image {
  display: block;
  width: auto;
  height: 48px;
  max-width: 160px;
  margin-bottom: 14px;
  filter: brightness(0) invert(1);
}

.site-info {
  background: #0f1d2d;
  color: #5a7a96;
  padding: 14px 32px;
  font-size: 12px;
  text-align: center;
}

.site-info a {
  color: var(--gg-orange);
}

#gg-scroll-top {
  position: fixed;
  left: 20px;
  bottom: calc(var(--gg-discount-bar-height) + 20px);
  z-index: 9998;
  display: none;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--gg-orange);
  color: #fff;
  font-size: 20px;
  line-height: 1;
  text-decoration: none;
  box-shadow: 0 10px 20px rgba(255, 107, 53, 0.28);
  transition: transform 0.2s ease, background-color 0.2s ease;
}

#gg-scroll-top.visible {
  display: inline-flex;
}

#gg-scroll-top:hover {
  background: #e5571f;
  transform: translateY(-2px);
}

.gg-wa-float {
  position: fixed;
  right: 20px;
  bottom: calc(var(--gg-discount-bar-height) + 18px) !important;
  z-index: 9996;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: #22c55e;
  border: 3px solid rgba(255, 255, 255, 0.94);
  box-shadow: 0 16px 28px rgba(34, 197, 94, 0.28);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.gg-wa-float svg {
  width: 26px;
  height: 26px;
}

.gg-wa-float:hover {
  transform: translateY(-2px);
  box-shadow: 0 18px 30px rgba(34, 197, 94, 0.32);
}

@media (max-width: 1024px) {
  body {
    padding-top: calc(var(--gg-header-height-mobile) + var(--gg-admin-bar-offset));
  }

  #primary,
  .content-area,
  .woocommerce #primary,
  .woocommerce-page #primary {
    padding: 0 24px;
  }

  .woocommerce-breadcrumb {
    margin: 14px 0 8px;
  }

  .storefront-breadcrumb .col-full {
    padding: 0 24px;
  }

  .gg-header-shell {
    padding: 0 16px;
  }

  .gg-header-row {
    min-height: var(--gg-header-height-mobile);
    display: grid;
    grid-template-columns: 104px minmax(0, 1fr) 104px;
    gap: 8px;
  }

  .gg-primary-nav,
  .gg-header-search {
    display: none;
  }

  .gg-mobile-trigger {
    display: inline-flex;
    position: relative;
    z-index: 4;
  }

  .gg-header-branding {
    position: static;
    z-index: 2;
    width: auto;
    max-width: none;
    justify-self: center;
  }

  .gg-header-branding img {
    height: 32px;
    max-width: 92px;
  }

  .gg-header-tools {
    width: 104px;
    grid-template-columns: 42px auto;
    gap: 8px;
    justify-self: end;
    z-index: 4;
  }

  #gg-mobile-menu-trigger {
    justify-self: start;
  }

  #gg-mobile-search-trigger {
    justify-self: end;
  }

  .gg-cart-pill {
    min-height: 38px;
    padding: 0 10px;
    min-width: 54px;
    gap: 0;
  }

  .gg-cart-pill__icon {
    display: none;
  }

  #gg-mobile-search-panel {
    position: absolute;
    inset: 0 12px;
    display: flex;
    align-items: center;
    background: #fff;
    z-index: 5;
  }

  .gg-mobile-search-open .gg-header-row {
    opacity: 0;
    pointer-events: none;
  }

  .gg-mobile-search-open #gg-mobile-search-panel {
    opacity: 1;
    pointer-events: auto;
  }

  .gg-mobile-search-panel__inner {
    display: flex;
    width: 100%;
    align-items: center;
    gap: 10px;
  }

  .gg-mobile-search-panel__close {
    display: inline-flex;
    flex: 0 0 42px;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    border: 0;
    border-radius: 50%;
    background: rgba(15, 23, 42, 0.08);
    color: var(--gg-navy);
    cursor: pointer;
    box-shadow: inset 0 0 0 1px rgba(30, 58, 95, 0.08);
  }

  .gg-mobile-search-panel__close::before {
    content: "\00d7";
    font-size: 28px;
    font-weight: 500;
    line-height: 1;
    color: var(--gg-navy);
    transform: translateY(-1px);
  }

  .gg-mobile-search-panel__close svg {
    display: none;
  }

  #gg-mobile-nav {
    position: fixed;
    top: calc(var(--gg-header-height-mobile) + var(--gg-admin-bar-offset));
    left: 0;
    right: 0;
    bottom: auto;
    height: calc(100vh - var(--gg-header-height-mobile) - var(--gg-admin-bar-offset) - var(--gg-discount-bar-height));
    z-index: 9998;
    background: #fff;
    border-top: 1px solid var(--gg-border);
    box-shadow: 0 22px 40px rgba(15, 23, 42, 0.12);
    overflow: hidden;
  }

  @supports (height: 100dvh) {
    #gg-mobile-nav {
      height: calc(100dvh - var(--gg-header-height-mobile) - var(--gg-admin-bar-offset) - var(--gg-discount-bar-height));
    }
  }

  .gg-mobile-nav__scroll {
    height: 100%;
    min-height: 100%;
    overflow-y: auto;
    padding: 10px 0 28px;
  }

  .gg-mobile-nav__menu .menu,
  .gg-mobile-nav__menu ul {
    list-style: none;
    margin: 0;
    padding: 0;
  }

  .gg-mobile-nav__menu .menu > li > a {
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: 56px;
    padding: 0 20px;
    border-bottom: 1px solid #edf2f7;
    color: var(--gg-navy);
    font-size: 16px;
    font-weight: 600;
    text-decoration: none;
  }

  .gg-mobile-nav__menu .menu > li > a::after {
    content: ">";
    color: #94a3b8;
    font-size: 18px;
    font-weight: 400;
  }

  .gg-mobile-nav__extras {
    margin: 18px 20px 0;
    padding-top: 18px;
    border-top: 1px solid var(--gg-border);
  }

  .gg-mobile-nav__extras a {
    display: block;
    padding: 10px 0;
    color: #475569;
    font-size: 14px;
    font-weight: 500;
    text-decoration: none;
  }

  .gg-mobile-nav__extras .gg-mobile-nav__cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-top: 8px;
    padding: 12px 18px;
    border-radius: 999px;
    background: #25d366;
    color: #fff;
    font-weight: 700;
  }

  ul.products,
  .woocommerce ul.products,
  .woocommerce-page ul.products {
    gap: 20px;
  }

  ul.products li.product,
  .woocommerce ul.products li.product,
  .woocommerce-page ul.products li.product {
    flex: 0 0 48.5%;
    width: 48.5% !important;
    max-width: 48.5%;
  }

  body.page-id-49 .gg-ct-form {
    grid-template-columns: 1fr !important;
  }

  body.page-id-49 .gg-ct-field-row,
  body.page-id-49 .gg-ct-form > div:nth-of-type(2),
  body.page-id-49 .gg-ct-form > div:nth-of-type(3),
  body.page-id-49 .gg-ct-submit {
    grid-column: auto;
    grid-row: auto;
  }

  body.blog:not(.single-post) #main {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 20px;
  }

  body.blog:not(.single-post) #primary::before,
  body.page .entry-header {
    margin-left: -24px;
    margin-right: -24px;
    padding-left: 24px;
    padding-right: 24px;
  }
}

@media (max-width: 767px) {
  #primary,
  .content-area,
  .woocommerce #primary,
  .woocommerce-page #primary {
    padding: 0 14px;
  }

  .woocommerce-breadcrumb {
    margin: 12px 0 8px;
    font-size: 12px;
  }

  .storefront-breadcrumb .col-full {
    padding: 0 14px;
  }

  body.page-id-133 .gg-announcement-bar {
    margin: 0 14px 10px;
    border-radius: 14px;
  }

  body.page-id-133 .gg-ticker-wrap {
    width: 100%;
    animation: none !important;
    transform: none !important;
  }

  body.page-id-133 .gg-ticker-wrap > * {
    display: none !important;
  }

  body.page-id-133 .gg-ticker-wrap > .gg-ticker-item:first-of-type {
    display: flex !important;
    justify-content: center;
    width: 100%;
    padding: 0 14px;
    font-size: 12px;
    line-height: 1.45;
    white-space: normal;
    text-align: center;
  }

  body.page-id-133 .gg-announcement-bar .badge {
    min-height: 22px;
    padding: 0 8px;
    font-size: 9px;
  }

  .gg-discount-bar__inner {
    padding-left: 16px;
    padding-right: 16px;
    font-size: 13px;
  }

  .gg-discount-bar__icon {
    display: none;
  }

  ul.products,
  .woocommerce ul.products,
  .woocommerce-page ul.products {
    gap: 14px;
  }

  ul.products li.product,
  .woocommerce ul.products li.product,
  .woocommerce-page ul.products li.product {
    flex: 0 0 100%;
    max-width: 100%;
    min-width: 0;
    width: 100% !important;
    padding: 18px 14px 16px;
  }

  ul.products li.product img {
    height: 136px;
  }

  .gg-card-badges-wrapper {
    height: 136px;
  }

  ul.products li.product h2.woocommerce-loop-product__title {
    font-size: 12px;
  }

  ul.products li.product .price {
    font-size: 15px;
  }

  ul.products li.product .button,
  ul.products li.product a.button,
  .woocommerce ul.products li.product .add_to_cart_button,
  .woocommerce ul.products li.product .product_type_simple {
    padding: 10px 12px;
    font-size: 11px;
  }

  .storefront-sorting {
    grid-template-columns: 1fr;
    gap: 10px;
  }

  .woocommerce .woocommerce-ordering,
  .woocommerce-page .woocommerce-ordering,
  .woocommerce .woocommerce-result-count,
  .woocommerce-page .woocommerce-result-count {
    justify-self: start;
    text-align: left;
  }

  body.blog:not(.single-post) #main {
    grid-template-columns: 1fr;
  }

  body.blog:not(.single-post) #primary::before {
    margin-left: -14px;
    margin-right: -14px;
    padding-left: 14px;
    padding-right: 14px;
    font-size: 22px;
  }

  body.page .entry-header {
    margin-left: -14px;
    margin-right: -14px;
    padding-left: 14px;
    padding-right: 14px;
  }

  body.page .entry-title {
    font-size: 28px;
    padding-top: 32px;
  }

  .footer-widgets {
    padding: 0 16px 32px;
  }

  .site-info {
    padding-left: 16px;
    padding-right: 16px;
  }

  #gg-scroll-top {
    left: 14px;
    bottom: calc(var(--gg-discount-bar-height) + 16px);
    width: 40px;
    height: 40px;
    font-size: 17px;
  }

  .gg-wa-float {
    right: 12px;
    bottom: calc(var(--gg-discount-bar-height) + 12px) !important;
    width: 48px;
    height: 48px;
  }

  .gg-wa-float svg {
    width: 22px;
    height: 22px;
  }
}

/* ================================================================
   GG PATCH v9  –  March 2026
   Fixes:
     1. Body padding  → ticker / first section no longer clips behind header shadow
     2. Announcement bar  → small top gap from header
     3. Cart page  → remove-button (×) no longer overlaps product image
     4. Full-width shop / archive / product-cat header banner
     5. Product grid centering  →  !important guards vs. Elementor / WC overrides
     6. Mobile & iPad menu drawer alignment
     7. Shop-by-Age Elementor section  →  scale down on mobile
     8. Professional polish  (typography, hover, spacing)
   ================================================================ */

/* ----------------------------------------------------------------
   1.  BODY PADDING  – extra 8 px clears the header's box-shadow
       so the first Elementor section is never visually clipped.
   ---------------------------------------------------------------- */
body {
  padding-top: calc(var(--gg-header-height-desktop) + var(--gg-admin-bar-offset) + 8px);
}

@media (max-width: 1024px) {
  body {
    padding-top: calc(var(--gg-header-height-mobile) + var(--gg-admin-bar-offset) + 8px);
  }
}

/* ----------------------------------------------------------------
   2.  ANNOUNCEMENT TICKER  – breathing room + shadow clearance
   ---------------------------------------------------------------- */
.gg-announcement-bar {
  margin-top: 2px;        /* pull away from header bottom edge      */
  margin-bottom: 0;
}

/* ----------------------------------------------------------------
   3.  CART PAGE  –  product-remove (×) button fix
       Without woocommerce-smallscreen.css the table renders as a
       standard <table>; .product-remove td must not float over the
       thumbnail cell.  On mobile we convert rows to flex cards.
   ---------------------------------------------------------------- */
.woocommerce-cart-form td.product-remove {
  padding: 12px 8px 0 0;
  vertical-align: top;
  width: 40px;
  min-width: 40px;
  border-bottom: 0;
  background: transparent;
}

.woocommerce-cart-form td.product-remove a.remove {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: #fee2e2 !important;
  color: #dc2626 !important;
  font-size: 20px;
  font-weight: 700;
  line-height: 1;
  text-decoration: none;
  border: 0 !important;
  position: static !important;   /* override any float/absolute from WC */
  top: auto !important;
  right: auto !important;
  transition: background-color 0.18s ease;
}

.woocommerce-cart-form td.product-remove a.remove:hover {
  background: #fca5a5 !important;
}

/* Cart thumbnail – prevent it from being clipped */
.woocommerce-cart-form td.product-thumbnail {
  position: static;
  padding: 12px 8px;
}

.woocommerce-cart-form td.product-thumbnail img {
  display: block;
  width: 80px;
  height: 80px;
  border-radius: 10px;
  object-fit: contain;
}

/* Cart table cells baseline */
.woocommerce-cart-form table.shop_table td {
  vertical-align: middle;
}

/* Cart sub-headings */
.cross-sells > h2,
.cart_totals > h2 {
  color: var(--gg-navy);
  font-size: 22px;
  font-weight: 800;
  margin-bottom: 16px;
}

/* ----------------------------------------------------------------
   4.  SHOP / ARCHIVE  –  full-viewport-width header banner
       Uses the classic  left:50% + margin-left:-50vw  trick;
       body { overflow-x:hidden } prevents a horizontal scrollbar.
   ---------------------------------------------------------------- */

/* Reset existing constrained rules */
.woocommerce .woocommerce-products-header,
.woocommerce-page .woocommerce-products-header,
.post-type-archive-product .woocommerce-products-header,
.tax-product_cat .woocommerce-products-header {
  /* full-bleed breakout */
  position: relative;
  left: 50%;
  width: 100vw;
  margin-left: -50vw !important;
  margin-right: 0 !important;
  margin-bottom: 28px !important;
  /* styles */
  padding: 44px 48px 40px !important;
  background: linear-gradient(120deg, var(--gg-navy) 0%, var(--gg-blue) 60%, #2a9d8f 100%) !important;
  min-height: 130px;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex-direction: column;
  text-align: center !important;
  overflow: hidden;
}

/* Subtle background pattern circle */
.woocommerce .woocommerce-products-header::after,
.tax-product_cat .woocommerce-products-header::after {
  content: "";
  position: absolute;
  right: -60px;
  top: -40px;
  width: 240px;
  height: 240px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.06);
  pointer-events: none;
}

.woocommerce .page-title,
.woocommerce-page .page-title,
.post-type-archive-product .page-title,
.tax-product_cat .page-title {
  color: #fff !important;
  font-size: 34px !important;
  font-weight: 900 !important;
  letter-spacing: -0.01em;
  margin: 0 !important;
  padding: 0 !important;
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.18);
}

/* Single product page  –  stylish title area */
.single-product div.product .product_title.entry-title {
  color: var(--gg-navy);
  font-size: 26px;
  font-weight: 800;
  line-height: 1.25;
  margin-bottom: 12px;
}

/* ----------------------------------------------------------------
   5.  PRODUCT GRID CENTERING
       The homepage uses shortcodes / Elementor WC widget which
       don't always sit inside a .woocommerce body class, so we
       reinforce the flex rules without a parent-class dependency
       and add !important guards.
   ---------------------------------------------------------------- */
ul.products {
  display: flex !important;
  flex-wrap: wrap !important;
  justify-content: center !important;
  gap: 28px !important;
  padding: 0 !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  width: 100% !important;
  max-width: none !important;
}

ul.products::before,
ul.products::after {
  content: none !important;
  display: none !important;
}

ul.products li.product {
  float: none !important;
  clear: none !important;
  margin-right: 0 !important;
  margin-left: 0 !important;
}

/* Elementor WC products widget specific overrides */
.elementor-widget-woocommerce-products .products {
  display: flex !important;
  flex-wrap: wrap !important;
  justify-content: center !important;
  gap: 28px !important;
}

.elementor-widget-woocommerce-products .products li.product {
  float: none !important;
  clear: none !important;
}

/* ----------------------------------------------------------------
   6.  MOBILE / iPAD MENU DRAWER
   ---------------------------------------------------------------- */

/* --- iPad sidebar-style drawer (768 – 1024 px) --- */
@media (min-width: 768px) and (max-width: 1024px) {
  #gg-mobile-nav {
    left: 0;
    right: auto;
    width: 320px;
    border-right: 1px solid var(--gg-border);
    box-shadow: 4px 0 28px rgba(15, 23, 42, 0.14);
    border-top: 1px solid var(--gg-border);
  }

  .gg-mobile-nav__menu .menu > li > a {
    padding: 0 28px;
    min-height: 60px;
    font-size: 16px;
  }

  .gg-mobile-nav__extras {
    margin: 18px 28px 0;
  }
}

/* --- Universal drawer item alignment --- */
.gg-mobile-nav__scroll {
  display: flex;
  flex-direction: column;
}

.gg-mobile-nav__menu {
  flex: 1;
}

.gg-mobile-nav__menu .menu,
.gg-mobile-nav__menu ul {
  width: 100%;
}

.gg-mobile-nav__menu .menu > li {
  width: 100%;
  display: block;
}

/* Current / active item highlight */
.gg-mobile-nav__menu .menu > li.current-menu-item > a,
.gg-mobile-nav__menu .menu > li.current_page_item > a {
  color: var(--gg-orange);
  background: #fff3ee;
  border-left: 3px solid var(--gg-orange);
  padding-left: 17px;        /* offset the 3 px border */
}

/* Extra links section */
.gg-mobile-nav__extras a:not(.gg-mobile-nav__cta) {
  display: flex;
  align-items: center;
  padding: 12px 0;
  border-bottom: 1px solid var(--gg-border);
  color: #475569;
  font-size: 14px;
  font-weight: 500;
}

.gg-mobile-nav__extras a:last-of-type:not(.gg-mobile-nav__cta) {
  border-bottom: 0;
}

/* ----------------------------------------------------------------
   7.  SHOP BY AGE  –  scale down on small phones
       Targets Elementor image-box elements typically used for age
       category bubbles / cards.
   ---------------------------------------------------------------- */
@media (max-width: 480px) {
  /* Shrink any Elementor image-box used for age categories */
  .elementor-widget-image-box .elementor-image-box-img img {
    width: 60px !important;
    height: 60px !important;
    max-width: 60px !important;
  }

  .elementor-image-box-title {
    font-size: 12px !important;
    line-height: 1.3 !important;
  }

  .elementor-image-box-description {
    font-size: 11px !important;
  }

  /* Age circle / bubble classes from common Elementor patterns */
  [class*="age-bubble"],
  [class*="age-card"],
  [class*="gg-age"] {
    width: 72px !important;
    height: 72px !important;
    font-size: 11px !important;
  }
}

/* ----------------------------------------------------------------
   8.  PROFESSIONAL POLISH  (Skillmatics-inspired)
   ---------------------------------------------------------------- */

/* --- Typography hierarchy --- */
.elementor-heading-title {
  font-weight: 800 !important;
  line-height: 1.15 !important;
  letter-spacing: -0.01em;
}

/* --- Product cards --- */
ul.products li.product {
  transition: transform 0.22s ease, box-shadow 0.22s ease, border-color 0.22s ease;
}

ul.products li.product:hover {
  border-color: rgba(27, 117, 187, 0.22) !important;
}

/* --- CTA buttons: rounder, more vibrant --- */
.button,
button,
input[type="submit"],
.wp-element-button {
  transition: background-color 0.18s ease, transform 0.18s ease, box-shadow 0.18s ease;
}

a.button:hover,
button:not(#gg-mobile-menu-trigger):not(#gg-mobile-search-trigger):not(#gg-mobile-search-close):hover,
input[type="submit"]:hover {
  transform: translateY(-1px);
  box-shadow: 0 6px 14px rgba(255, 107, 53, 0.22);
}

/* --- Blog single-post text --- */
body.single-post .entry-content p,
body.single-post .entry-content li {
  color: #475569;
  font-size: 16px;
  line-height: 1.85;
}

body.single-post .entry-content h2,
body.single-post .entry-content h3 {
  color: var(--gg-navy);
  font-weight: 700;
  margin-top: 2em;
}

/* --- Cart / Checkout polish --- */
.woocommerce-cart .woocommerce,
.woocommerce-checkout .woocommerce {
  max-width: 900px;
  margin: 24px auto 48px;
}

.woocommerce-cart-form table.shop_table th {
  color: var(--gg-navy);
  font-size: 13px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  padding: 10px 12px;
  background: #f8fafc;
}

/* Proceed to checkout button */
.wc-proceed-to-checkout .checkout-button,
.woocommerce #payment #place_order,
.woocommerce-checkout #payment #place_order {
  display: block;
  width: 100%;
  padding: 15px 24px;
  border-radius: 999px;
  background: var(--gg-orange);
  color: #fff;
  font-size: 16px;
  font-weight: 700;
  text-align: center;
  text-decoration: none;
  border: 0;
  cursor: pointer;
  transition: background-color 0.18s ease, transform 0.18s ease;
}

.wc-proceed-to-checkout .checkout-button:hover,
.woocommerce #payment #place_order:hover {
  background: #e5571f;
  transform: translateY(-1px);
}

/* --- Responsive overrides for the new shop header --- */
@media (max-width: 1024px) {
  .woocommerce .woocommerce-products-header,
  .woocommerce-page .woocommerce-products-header,
  .post-type-archive-product .woocommerce-products-header,
  .tax-product_cat .woocommerce-products-header {
    padding: 32px 24px 28px !important;
    min-height: 100px;
  }

  .woocommerce .page-title,
  .woocommerce-page .page-title {
    font-size: 26px !important;
  }

  ul.products {
    gap: 20px !important;
  }
}

@media (max-width: 767px) {
  .woocommerce .woocommerce-products-header,
  .woocommerce-page .woocommerce-products-header,
  .post-type-archive-product .woocommerce-products-header,
  .tax-product_cat .woocommerce-products-header {
    padding: 24px 16px 20px !important;
    min-height: 80px;
  }

  .woocommerce .page-title,
  .woocommerce-page .page-title {
    font-size: 22px !important;
  }

  ul.products {
    gap: 14px !important;
  }

  /* Cart remove button stays visible on tiny screens */
  .woocommerce-cart-form td.product-remove {
    display: table-cell;
    width: 44px;
    padding: 8px 6px;
  }
}

/* --- end of GG PATCH v9 --- */

/* =============================================================================
   GG PATCH v10 — Design Iteration: Nav Polish · Trust · Cards · Typography
   March 2026
   ============================================================================= */

/* ---------------------------------------------------------------------------
   1. NAV: Separate hover from active/current-page states
   Active = faded orange pill with bottom dot indicator
   Hover  = very subtle tint (no pill weight)
   --------------------------------------------------------------------------- */

/* Reset the combined rule first */
.gg-primary-nav .menu > li.current-menu-item > a,
.gg-primary-nav .menu > li.current_page_item > a,
.gg-primary-nav .menu > li > a:hover {
  background: transparent;
  color: inherit;
  box-shadow: none;
}

/* Hover — lightweight tint */
.gg-primary-nav .menu > li > a:hover {
  background: rgba(255, 107, 53, 0.08);
  color: var(--gg-orange);
  border-radius: 6px;
}

/* Active / current page — distinct faded-orange pill */
.gg-primary-nav .menu > li.current-menu-item > a,
.gg-primary-nav .menu > li.current_page_item > a {
  background: rgba(255, 107, 53, 0.15);
  color: var(--gg-orange);
  border-radius: 6px;
  font-weight: 600;
  box-shadow: inset 0 0 0 1.5px rgba(255, 107, 53, 0.25);
  position: relative;
}

/* Small orange dot below the active label */
.gg-primary-nav .menu > li.current-menu-item > a::after,
.gg-primary-nav .menu > li.current_page_item > a::after {
  content: "";
  position: absolute;
  bottom: 3px;
  left: 50%;
  transform: translateX(-50%);
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--gg-orange);
  opacity: 0.85;
}

/* ---------------------------------------------------------------------------
   2. SECTION HEADINGS — Consistent, bold, professional
   --------------------------------------------------------------------------- */

/* Section title pattern used in homepage widgets & Elementor sections */
.elementor-heading-title,
.wp-block-heading,
h2.widget-title,
.woocommerce-loop-product__title {
  letter-spacing: -0.01em;
}

/* Large section banners (e.g. "OUR COLLECTION", "SHOP BY AGE") */
.elementor-widget-heading .elementor-heading-title[class*="elementor-size-xl"],
.elementor-widget-heading .elementor-heading-title[class*="elementor-size-xxl"] {
  font-family: var(--gg-font-heading, 'Nunito', sans-serif);
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1.15;
}

/* ---------------------------------------------------------------------------
   3. PRODUCT CARDS — Skillmatics-inspired: clean, rounded, subtle hover lift
   --------------------------------------------------------------------------- */

ul.products li.product {
  border-radius: 14px !important;
  overflow: hidden !important;
  border: 1px solid rgba(0, 0, 0, 0.06) !important;
  background: #fff !important;
  transition: transform 0.22s ease, box-shadow 0.22s ease !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06) !important;
}

ul.products li.product:hover {
  transform: translateY(-5px) !important;
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.11) !important;
}

/* Product image — fixed ratio for consistency */
ul.products li.product .woocommerce-loop-product__link img,
ul.products li.product img.attachment-woocommerce_thumbnail {
  border-radius: 0 !important;
  display: block !important;
  width: 100% !important;
  aspect-ratio: 1 / 1 !important;
  object-fit: cover !important;
}

/* Product title */
ul.products li.product .woocommerce-loop-product__title {
  font-size: 15px !important;
  font-weight: 700 !important;
  color: var(--gg-navy, #1e3a5f) !important;
  margin: 10px 14px 4px !important;
  line-height: 1.35 !important;
}

/* Price */
ul.products li.product .price {
  font-size: 15px !important;
  font-weight: 800 !important;
  color: var(--gg-orange, #ff6b35) !important;
  margin: 0 14px 10px !important;
  display: block !important;
}

ul.products li.product .price del {
  color: #9ca3af !important;
  font-weight: 500 !important;
  font-size: 13px !important;
  margin-right: 4px !important;
}

/* Add to cart button on product loops */
ul.products li.product .button,
ul.products li.product .add_to_cart_button {
  display: block !important;
  width: calc(100% - 28px) !important;
  margin: 0 14px 14px !important;
  padding: 9px 16px !important;
  background: var(--gg-navy, #1e3a5f) !important;
  color: #fff !important;
  border: none !important;
  border-radius: 8px !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  letter-spacing: 0.02em !important;
  text-transform: uppercase !important;
  cursor: pointer !important;
  transition: background 0.18s ease, transform 0.18s ease !important;
  text-align: center !important;
}

ul.products li.product .button:hover,
ul.products li.product .add_to_cart_button:hover {
  background: var(--gg-orange, #ff6b35) !important;
  transform: none !important;
}

/* ---------------------------------------------------------------------------
   4. SHOP BY AGE — Circular image bubbles with brand-coloured ring
   --------------------------------------------------------------------------- */

/* Target the age section image blocks (Elementor image widgets in that row) */
.elementor-widget-image img {
  transition: transform 0.22s ease, box-shadow 0.22s ease;
}

/* Age bubble treatment — applied via the parent widget wrapper */
.gg-age-bubble img,
[class*="age-bubble"] img {
  border-radius: 50% !important;
  aspect-ratio: 1 / 1 !important;
  object-fit: cover !important;
  border: 4px solid var(--gg-orange, #ff6b35) !important;
  box-shadow: 0 4px 16px rgba(255, 107, 53, 0.2) !important;
}

/* Age label text below bubble */
.gg-age-label,
[class*="age-label"] {
  font-family: var(--gg-font-heading, 'Nunito', sans-serif);
  font-weight: 800;
  font-size: 15px;
  color: var(--gg-navy, #1e3a5f);
  text-align: center;
  margin-top: 8px;
  letter-spacing: 0.01em;
}

/* ---------------------------------------------------------------------------
   5. WHY SHOP SECTION — Clean icon+text grid, brand-accented
   --------------------------------------------------------------------------- */

/* Feature box: icon circle + heading + body */
.gg-why-feature,
[class*="why-feature"],
[class*="feature-box"] {
  text-align: center;
  padding: 24px 20px;
  border-radius: 14px;
  background: #fff;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06);
  border: 1px solid rgba(30, 58, 95, 0.07);
  transition: box-shadow 0.2s ease, transform 0.2s ease;
}

.gg-why-feature:hover,
[class*="why-feature"]:hover {
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.10);
  transform: translateY(-3px);
}

/* The icon wrapper */
.gg-why-icon,
[class*="why-icon"] {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  background: rgba(255, 107, 53, 0.12);
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 14px;
  font-size: 28px;
}

/* Why section heading */
.gg-why-feature h3,
[class*="why-feature"] h3 {
  font-size: 16px;
  font-weight: 700;
  color: var(--gg-navy, #1e3a5f);
  margin-bottom: 6px;
}

.gg-why-feature p,
[class*="why-feature"] p {
  font-size: 14px;
  color: #6b7280;
  line-height: 1.6;
  margin: 0;
}

/* ---------------------------------------------------------------------------
   6. TESTIMONIALS — Quote card with navy accent stripe, star rating
   --------------------------------------------------------------------------- */

.gg-testimonial,
[class*="testimonial-card"],
.elementor-testimonial-wrapper {
  background: #fff;
  border-radius: 14px;
  padding: 24px 22px 20px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.07);
  border-left: 4px solid var(--gg-orange, #ff6b35);
  position: relative;
}

/* Big quotation mark decoration */
.gg-testimonial::before,
[class*="testimonial-card"]::before {
  content: "\201C";
  position: absolute;
  top: 10px;
  right: 18px;
  font-size: 72px;
  line-height: 1;
  color: rgba(255, 107, 53, 0.10);
  font-family: Georgia, serif;
  pointer-events: none;
}

/* Testimonial text */
.gg-testimonial blockquote,
.gg-testimonial p,
[class*="testimonial-card"] p {
  font-size: 14px;
  line-height: 1.7;
  color: #374151;
  font-style: italic;
  margin: 0 0 14px;
}

/* Author name */
.gg-testimonial cite,
.gg-testimonial .gg-testimonial-name,
[class*="testimonial-card"] cite {
  font-size: 13px;
  font-weight: 700;
  color: var(--gg-navy, #1e3a5f);
  font-style: normal;
}

/* Star rating */
.gg-stars {
  color: var(--gg-yellow, #ffd93d);
  font-size: 16px;
  letter-spacing: 2px;
  margin-bottom: 8px;
  display: block;
}

/* ---------------------------------------------------------------------------
   7. BLOG CARDS — Compact 3-column grid on homepage
   --------------------------------------------------------------------------- */

/* Target the blog/post loop used inside homepage */
.gg-blog-card,
.elementor-posts .elementor-post {
  border-radius: 12px !important;
  overflow: hidden !important;
  background: #fff !important;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.07) !important;
  border: 1px solid rgba(0, 0, 0, 0.05) !important;
  transition: transform 0.2s ease, box-shadow 0.2s ease !important;
}

.gg-blog-card:hover,
.elementor-posts .elementor-post:hover {
  transform: translateY(-4px) !important;
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.11) !important;
}

/* Blog thumbnail */
.gg-blog-card img,
.elementor-post__thumbnail img {
  width: 100% !important;
  aspect-ratio: 16 / 9 !important;
  object-fit: cover !important;
  display: block !important;
}

/* Category pill on blog cards */
.gg-blog-category,
.elementor-post__badge {
  display: inline-block;
  background: var(--gg-orange, #ff6b35);
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  padding: 3px 10px;
  border-radius: 20px;
  margin-bottom: 6px;
}

/* Blog card title */
.gg-blog-card h3,
.gg-blog-card .entry-title,
.elementor-post__title {
  font-size: 15px !important;
  font-weight: 700 !important;
  color: var(--gg-navy, #1e3a5f) !important;
  line-height: 1.4 !important;
  margin: 6px 0 4px !important;
}

/* Blog date */
.gg-blog-card .entry-date,
.elementor-post-date {
  font-size: 12px;
  color: #9ca3af;
}

/* ---------------------------------------------------------------------------
   8. HOMEPAGE BANNER / HERO SECTION — Polished full-width hero
   --------------------------------------------------------------------------- */

/* Banner section background refinement when no image is set */
.gg-hero-section,
[class*="gg-hero"] {
  background: linear-gradient(135deg, var(--gg-navy, #1e3a5f) 0%, #1b5ea8 60%, #0e9ccc 100%);
  padding: 80px 0;
}

/* Hero heading */
.gg-hero-heading {
  font-size: clamp(32px, 5vw, 54px);
  font-weight: 900;
  line-height: 1.1;
  color: #fff;
  letter-spacing: -0.03em;
}

/* Hero sub-heading */
.gg-hero-subheading {
  font-size: clamp(16px, 2vw, 20px);
  color: rgba(255, 255, 255, 0.85);
  font-weight: 500;
  line-height: 1.55;
}

/* CTA button on hero */
.gg-hero-cta,
.gg-hero-section .elementor-button {
  background: var(--gg-orange, #ff6b35) !important;
  color: #fff !important;
  border: none !important;
  border-radius: 10px !important;
  font-weight: 700 !important;
  font-size: 16px !important;
  padding: 14px 32px !important;
  letter-spacing: 0.01em !important;
  box-shadow: 0 4px 18px rgba(255, 107, 53, 0.35) !important;
  transition: background 0.18s ease, transform 0.18s ease, box-shadow 0.18s ease !important;
}

.gg-hero-cta:hover,
.gg-hero-section .elementor-button:hover {
  background: #e5571f !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 8px 24px rgba(255, 107, 53, 0.4) !important;
}

/* ---------------------------------------------------------------------------
   9. ANNOUNCEMENT BAR — Subtle, professional ticker
   --------------------------------------------------------------------------- */

.gg-announcement-bar {
  background: var(--gg-navy, #1e3a5f) !important;
  color: #fff !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  letter-spacing: 0.03em !important;
}

.gg-announcement-bar a {
  color: var(--gg-yellow, #ffd93d) !important;
  font-weight: 700 !important;
  text-decoration: none !important;
}

.gg-announcement-bar a:hover {
  text-decoration: underline !important;
}

/* ---------------------------------------------------------------------------
   10. FOOTER — Clean, brand-aligned footer polish
   --------------------------------------------------------------------------- */

.site-footer {
  background: var(--gg-navy, #1e3a5f) !important;
  color: rgba(255, 255, 255, 0.80) !important;
  border-top: 3px solid var(--gg-orange, #ff6b35) !important;
}

.site-footer a {
  color: rgba(255, 255, 255, 0.70) !important;
  transition: color 0.15s ease !important;
}

.site-footer a:hover {
  color: var(--gg-yellow, #ffd93d) !important;
  text-decoration: none !important;
}

.site-footer .widget-title {
  color: #fff !important;
  font-size: 14px !important;
  font-weight: 800 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.08em !important;
  margin-bottom: 12px !important;
}

/* Footer bottom bar */
.site-info,
.footer-widgets + .site-info {
  background: rgba(0, 0, 0, 0.25) !important;
  border-top: 1px solid rgba(255, 255, 255, 0.08) !important;
  font-size: 12px !important;
  color: rgba(255, 255, 255, 0.5) !important;
  padding: 14px 0 !important;
}

/* ---------------------------------------------------------------------------
   11. WOOCOMMERCE PAGE CHROME — Breadcrumbs, result counts, sorting
   --------------------------------------------------------------------------- */

/* Breadcrumbs */
.woocommerce-breadcrumb {
  font-size: 13px !important;
  color: #9ca3af !important;
  margin-bottom: 16px !important;
}

.woocommerce-breadcrumb a {
  color: var(--gg-blue, #1b75bb) !important;
}

.woocommerce-breadcrumb a:hover {
  color: var(--gg-orange, #ff6b35) !important;
}

/* Woocommerce result count + ordering row */
.woocommerce-result-count {
  font-size: 13px !important;
  color: #6b7280 !important;
}

.woocommerce-ordering select {
  border: 1px solid #e5e7eb !important;
  border-radius: 8px !important;
  padding: 8px 12px !important;
  font-size: 13px !important;
  color: var(--gg-navy, #1e3a5f) !important;
  background: #fff !important;
}

/* ---------------------------------------------------------------------------
   12. SINGLE PRODUCT PAGE — Title, price, CTA polish
   --------------------------------------------------------------------------- */

.single-product .product_title.entry-title {
  font-size: clamp(22px, 4vw, 32px) !important;
  font-weight: 900 !important;
  color: var(--gg-navy, #1e3a5f) !important;
  line-height: 1.2 !important;
  letter-spacing: -0.02em !important;
}

.single-product .price {
  font-size: 26px !important;
  font-weight: 800 !important;
  color: var(--gg-orange, #ff6b35) !important;
}

.single-product .price del {
  font-size: 18px !important;
  color: #9ca3af !important;
  font-weight: 500 !important;
}

/* Product tabs */
.woocommerce-tabs ul.tabs li a {
  font-weight: 600 !important;
  color: #6b7280 !important;
}

.woocommerce-tabs ul.tabs li.active a {
  color: var(--gg-orange, #ff6b35) !important;
  border-bottom-color: var(--gg-orange, #ff6b35) !important;
}

/* ---------------------------------------------------------------------------
   13. MOBILE RESPONSIVE — v10 refinements
   --------------------------------------------------------------------------- */

@media (max-width: 767px) {

  /* Product card: stacked 2-column on phone */
  ul.products li.product {
    flex-basis: calc(50% - 10px) !important;
    max-width: calc(50% - 10px) !important;
  }

  /* Nav dot indicator hidden on mobile (dot has no meaning inside drawer) */
  .gg-primary-nav .menu > li.current-menu-item > a::after,
  .gg-primary-nav .menu > li.current_page_item > a::after {
    display: none;
  }

  /* Tighter section padding */
  .gg-hero-section,
  [class*="gg-hero"] {
    padding: 48px 0;
  }

  /* Footer widget columns */
  .footer-widgets .col-1,
  .footer-widgets .col-2,
  .footer-widgets .col-3 {
    margin-bottom: 28px;
  }
}

@media (min-width: 768px) and (max-width: 1024px) {

  /* Tablet: 2-column product grid */
  ul.products li.product {
    flex-basis: calc(50% - 14px) !important;
    max-width: calc(50% - 14px) !important;
  }
}

/* --- end of GG PATCH v10 --- */

/* =============================================================================
   GG PATCH v11 — Professional Refinement: Typography · Nav · Cards · WC Chrome
   March 2026
   ============================================================================= */

/* ---------------------------------------------------------------------------
   0. TYPOGRAPHY FOUNDATION — Nunito for headings, Inter for body
   --------------------------------------------------------------------------- */

:root {
  --gg-font-body:    'Inter', 'Source Sans Pro', sans-serif;
  --gg-font-heading: 'Nunito', 'Inter', sans-serif;

  /* Refined shadow tokens */
  --gg-shadow-xs:  0 1px 3px rgba(15, 23, 42, 0.06);
  --gg-shadow-sm:  0 2px 8px  rgba(15, 23, 42, 0.08);
  --gg-shadow-md:  0 6px 20px rgba(15, 23, 42, 0.10);
  --gg-shadow-lg:  0 16px 40px rgba(15, 23, 42, 0.13);

  /* Refined colour additions */
  --gg-orange-light: rgba(255, 107, 53, 0.10);
  --gg-navy-light:   rgba(30, 58, 95, 0.06);
  --gg-surface:      #f7f9fc;         /* off-white page sections */
  --gg-border-light: #edf0f5;         /* uniform light border */
}

body {
  font-family: var(--gg-font-body);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, h4, h5, h6,
.gg-section-title,
.woocommerce-loop-product__title,
.elementor-heading-title {
  font-family: var(--gg-font-heading);
}

/* Global link colour */
a {
  color: var(--gg-blue);
  transition: color 0.15s ease;
}
a:hover {
  color: var(--gg-orange);
}

/* ---------------------------------------------------------------------------
   1. NAV — Remove UPPERCASE, clean professional case, refined size
   --------------------------------------------------------------------------- */

.gg-primary-nav .menu > li > a {
  font-size: 15px !important;
  font-weight: 600 !important;
  text-transform: none !important;    /* ← removes SHOUTING all-caps */
  letter-spacing: 0.01em !important;
  color: var(--gg-navy) !important;
  padding: 0 14px !important;
  border-radius: 8px !important;
}

/* Hover — keep from v10 */
.gg-primary-nav .menu > li > a:hover {
  background: var(--gg-orange-light) !important;
  color: var(--gg-orange) !important;
  border-radius: 8px !important;
}

/* Active / current — keep from v10 */
.gg-primary-nav .menu > li.current-menu-item > a,
.gg-primary-nav .menu > li.current_page_item > a {
  background: rgba(255, 107, 53, 0.13) !important;
  color: var(--gg-orange) !important;
  border-radius: 8px !important;
  font-weight: 700 !important;
  box-shadow: inset 0 0 0 1.5px rgba(255, 107, 53, 0.22) !important;
}

/* ---------------------------------------------------------------------------
   2. PRODUCT CARDS — Reconcile v10 conflicts, restore best-of styles
   --------------------------------------------------------------------------- */

/* Override v10's mistaken navy button + wrong radius/image rules */
ul.products li.product {
  border-radius: 18px !important;    /* restore 18px — looks better than v10's 14px */
  border: 1.5px solid var(--gg-border-light) !important;
  box-shadow: var(--gg-shadow-sm) !important;
  background: #fff !important;
  overflow: visible !important;      /* badges need to overflow */
  transition: transform 0.22s ease, box-shadow 0.22s ease !important;
}

ul.products li.product:hover {
  transform: translateY(-6px) !important;
  box-shadow: var(--gg-shadow-lg) !important;
}

/* Product image — keep contain + height (card game boxes need contain) */
ul.products li.product .woocommerce-loop-product__link img,
ul.products li.product img.attachment-woocommerce_thumbnail {
  width: 100% !important;
  height: 210px !important;
  aspect-ratio: unset !important;     /* undo v10's 1:1 aspect-ratio */
  object-fit: contain !important;     /* restore contain — boxes look better */
  border-radius: 10px !important;
  background: var(--gg-surface) !important;
  padding: 8px !important;
}

/* Product title — clean & readable */
ul.products li.product .woocommerce-loop-product__title {
  font-family: var(--gg-font-heading) !important;
  font-size: 14.5px !important;
  font-weight: 700 !important;
  color: var(--gg-navy) !important;
  margin: 12px 0 8px !important;
  line-height: 1.4 !important;
}

/* Product price */
ul.products li.product .price {
  font-size: 17px !important;
  font-weight: 800 !important;
  color: var(--gg-orange) !important;
  margin-bottom: 14px !important;
}

ul.products li.product .price del {
  font-size: 13px !important;
  color: #94a3b8 !important;
  font-weight: 500 !important;
  margin-right: 4px !important;
}

/* Add to Cart — ORANGE pill (not navy — undo v10's navy) */
ul.products li.product .button,
ul.products li.product a.button,
ul.products li.product .add_to_cart_button,
.woocommerce ul.products li.product .product_type_simple {
  display: block !important;
  width: 100% !important;
  margin: 0 !important;
  padding: 11px 18px !important;
  border: 0 !important;
  border-radius: 999px !important;
  background: var(--gg-orange) !important;
  color: #fff !important;
  font-family: var(--gg-font-body) !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  letter-spacing: 0.03em !important;
  text-transform: uppercase !important;
  text-align: center !important;
  cursor: pointer !important;
  transition: background 0.18s ease, transform 0.15s ease !important;
  box-shadow: 0 3px 10px rgba(255, 107, 53, 0.28) !important;
}

ul.products li.product .button:hover,
ul.products li.product a.button:hover,
ul.products li.product .add_to_cart_button:hover {
  background: #e5571f !important;
  transform: translateY(-1px) !important;
  box-shadow: 0 5px 14px rgba(255, 107, 53, 0.38) !important;
  color: #fff !important;
}

/* WooCommerce on-sale sticker */
ul.products li.product .onsale {
  position: absolute !important;
  top: 12px !important;
  right: 12px !important;
  left: auto !important;
  min-height: 0 !important;
  min-width: 0 !important;
  width: auto !important;
  padding: 4px 10px !important;
  border-radius: 999px !important;
  background: #ef4444 !important;
  color: #fff !important;
  font-size: 11px !important;
  font-weight: 800 !important;
  letter-spacing: 0.04em !important;
  text-transform: uppercase !important;
  line-height: 1.4 !important;
}

/* ---------------------------------------------------------------------------
   3. WOOCOMMERCE NOTICES — Professional styled messages
   --------------------------------------------------------------------------- */

.woocommerce-message,
.woocommerce-error,
.woocommerce-info,
.woocommerce-notice {
  border-radius: 10px !important;
  border: none !important;
  padding: 14px 20px !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  margin-bottom: 20px !important;
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
}

.woocommerce-message {
  background: #f0fdf4 !important;
  color: #166534 !important;
  border-left: 4px solid #22c55e !important;
}

.woocommerce-error {
  background: #fef2f2 !important;
  color: #991b1b !important;
  border-left: 4px solid #ef4444 !important;
}

.woocommerce-info {
  background: #eff6ff !important;
  color: #1e40af !important;
  border-left: 4px solid #3b82f6 !important;
}

/* ---------------------------------------------------------------------------
   4. QUANTITY STEPPER — Minimal, clean
   --------------------------------------------------------------------------- */

.woocommerce .quantity .qty,
.woocommerce input.qty {
  width: 60px !important;
  height: 44px !important;
  padding: 0 10px !important;
  border: 1.5px solid var(--gg-border-light) !important;
  border-radius: 8px !important;
  background: #fff !important;
  color: var(--gg-navy) !important;
  font-size: 15px !important;
  font-weight: 700 !important;
  text-align: center !important;
  -moz-appearance: textfield !important;
}

.woocommerce .quantity .qty:focus,
.woocommerce input.qty:focus {
  outline: none !important;
  border-color: var(--gg-blue) !important;
  box-shadow: 0 0 0 3px rgba(27, 117, 187, 0.12) !important;
}

/* Remove browser number spinners */
.woocommerce .quantity .qty::-webkit-outer-spin-button,
.woocommerce .quantity .qty::-webkit-inner-spin-button {
  -webkit-appearance: none !important;
}

/* ---------------------------------------------------------------------------
   5. CHECKOUT & CART FORM INPUTS — Unified clean style
   --------------------------------------------------------------------------- */

.woocommerce-checkout .woocommerce-input-wrapper input,
.woocommerce-checkout .woocommerce-input-wrapper select,
.woocommerce-checkout .woocommerce-input-wrapper textarea,
.woocommerce-cart .woocommerce-cart-form input,
.woocommerce-cart .woocommerce-cart-form select,
.woocommerce form.checkout p.form-row input,
.woocommerce form.checkout p.form-row select,
.woocommerce form.checkout p.form-row textarea {
  width: 100%;
  padding: 12px 16px !important;
  border: 1.5px solid #d0dae6 !important;
  border-radius: 10px !important;
  background: #fff !important;
  color: var(--gg-text) !important;
  font-size: 14px !important;
  font-family: var(--gg-font-body) !important;
  transition: border-color 0.15s ease, box-shadow 0.15s ease !important;
}

.woocommerce-checkout .woocommerce-input-wrapper input:focus,
.woocommerce-checkout .woocommerce-input-wrapper select:focus,
.woocommerce-checkout .woocommerce-input-wrapper textarea:focus,
.woocommerce form.checkout p.form-row input:focus,
.woocommerce form.checkout p.form-row select:focus {
  outline: none !important;
  border-color: var(--gg-blue) !important;
  box-shadow: 0 0 0 3px rgba(27, 117, 187, 0.10) !important;
}

.woocommerce form.checkout .woocommerce-checkout-review-order-table {
  border-radius: 14px !important;
  overflow: hidden !important;
  border: 1.5px solid var(--gg-border-light) !important;
}

/* Checkout section headings */
.woocommerce-checkout h3,
.woocommerce-checkout #order_review_heading {
  font-family: var(--gg-font-heading) !important;
  font-size: 18px !important;
  font-weight: 800 !important;
  color: var(--gg-navy) !important;
  margin-bottom: 16px !important;
  padding-bottom: 10px !important;
  border-bottom: 2px solid var(--gg-border-light) !important;
}

/* ---------------------------------------------------------------------------
   6. SINGLE PRODUCT — Richer, more editorial
   --------------------------------------------------------------------------- */

/* Product gallery */
.woocommerce div.product .woocommerce-product-gallery {
  border-radius: 16px !important;
  overflow: hidden !important;
  box-shadow: var(--gg-shadow-md) !important;
}

.woocommerce div.product .woocommerce-product-gallery .flex-viewport img {
  border-radius: 12px !important;
  background: var(--gg-surface) !important;
}

/* Product title */
.woocommerce div.product h1.product_title {
  font-family: var(--gg-font-heading) !important;
  font-size: clamp(24px, 3.5vw, 34px) !important;
  font-weight: 900 !important;
  color: var(--gg-navy) !important;
  line-height: 1.18 !important;
  letter-spacing: -0.025em !important;
  margin-bottom: 12px !important;
}

/* Short description */
.woocommerce div.product .woocommerce-product-details__short-description {
  font-size: 15px !important;
  color: #4b5563 !important;
  line-height: 1.75 !important;
  border-left: 3px solid var(--gg-orange) !important;
  padding-left: 14px !important;
  margin: 16px 0 !important;
}

/* Price in single product */
.woocommerce div.product p.price,
.woocommerce div.product span.price {
  font-family: var(--gg-font-heading) !important;
  font-size: 28px !important;
  font-weight: 900 !important;
  color: var(--gg-orange) !important;
}

.woocommerce div.product p.price del,
.woocommerce div.product span.price del {
  font-size: 18px !important;
  color: #94a3b8 !important;
  font-weight: 500 !important;
}

/* Add to cart button — single product */
.woocommerce div.product .single_add_to_cart_button,
.woocommerce #respond input#submit,
.woocommerce a.button.alt,
.woocommerce button.button.alt {
  background: var(--gg-orange) !important;
  color: #fff !important;
  border: 0 !important;
  border-radius: 999px !important;
  padding: 14px 36px !important;
  font-size: 15px !important;
  font-weight: 700 !important;
  letter-spacing: 0.02em !important;
  text-transform: uppercase !important;
  box-shadow: 0 4px 14px rgba(255, 107, 53, 0.30) !important;
  transition: background 0.18s ease, transform 0.15s ease, box-shadow 0.15s ease !important;
}

.woocommerce div.product .single_add_to_cart_button:hover,
.woocommerce a.button.alt:hover,
.woocommerce button.button.alt:hover {
  background: #e5571f !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 7px 20px rgba(255, 107, 53, 0.38) !important;
  color: #fff !important;
}

/* Product tabs */
.woocommerce div.product .woocommerce-tabs ul.tabs {
  padding: 0 !important;
  border-bottom: 2px solid var(--gg-border-light) !important;
}

.woocommerce div.product .woocommerce-tabs ul.tabs li {
  background: transparent !important;
  border: none !important;
  border-radius: 0 !important;
}

.woocommerce div.product .woocommerce-tabs ul.tabs li a {
  font-family: var(--gg-font-heading) !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  color: var(--gg-muted) !important;
  padding: 10px 18px !important;
  border-radius: 0 !important;
  transition: color 0.15s ease !important;
}

.woocommerce div.product .woocommerce-tabs ul.tabs li.active a,
.woocommerce div.product .woocommerce-tabs ul.tabs li a:hover {
  color: var(--gg-orange) !important;
}

.woocommerce div.product .woocommerce-tabs ul.tabs li.active {
  border-bottom: 2px solid var(--gg-orange) !important;
  margin-bottom: -2px !important;
}

/* ---------------------------------------------------------------------------
   7. CART PAGE — Clean table, professional totals box
   --------------------------------------------------------------------------- */

.woocommerce-cart-form table.cart {
  border-radius: 14px !important;
  overflow: hidden !important;
  border: 1.5px solid var(--gg-border-light) !important;
  border-collapse: separate !important;
  border-spacing: 0 !important;
}

.woocommerce-cart-form table.cart thead tr {
  background: var(--gg-surface) !important;
}

.woocommerce-cart-form table.cart thead th {
  font-family: var(--gg-font-heading) !important;
  font-size: 12px !important;
  font-weight: 800 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.08em !important;
  color: var(--gg-muted) !important;
  padding: 14px 16px !important;
  border-bottom: 1.5px solid var(--gg-border-light) !important;
}

.woocommerce-cart-form table.cart tbody td {
  padding: 16px !important;
  border-bottom: 1px solid var(--gg-border-light) !important;
  vertical-align: middle !important;
}

.woocommerce-cart-form table.cart tbody tr:last-child td {
  border-bottom: none !important;
}

.woocommerce-cart-form table.cart .product-name a {
  font-weight: 600 !important;
  color: var(--gg-navy) !important;
  font-size: 15px !important;
}

.woocommerce-cart-form table.cart .product-price,
.woocommerce-cart-form table.cart .product-subtotal {
  font-weight: 700 !important;
  color: var(--gg-orange) !important;
  font-size: 15px !important;
}

/* Cart totals box */
.woocommerce .cart-collaterals .cart_totals {
  background: #fff !important;
  border: 1.5px solid var(--gg-border-light) !important;
  border-radius: 16px !important;
  padding: 24px !important;
  box-shadow: var(--gg-shadow-sm) !important;
}

.woocommerce .cart_totals h2 {
  font-family: var(--gg-font-heading) !important;
  font-size: 18px !important;
  font-weight: 800 !important;
  color: var(--gg-navy) !important;
  margin-bottom: 16px !important;
}

.woocommerce .cart_totals table {
  border: none !important;
  width: 100% !important;
}

.woocommerce .cart_totals table th {
  font-size: 13px !important;
  font-weight: 600 !important;
  color: var(--gg-muted) !important;
  padding: 10px 0 !important;
  border-bottom: 1px solid var(--gg-border-light) !important;
}

.woocommerce .cart_totals table td {
  font-size: 15px !important;
  font-weight: 700 !important;
  color: var(--gg-navy) !important;
  padding: 10px 0 !important;
  border-bottom: 1px solid var(--gg-border-light) !important;
  text-align: right !important;
}

.woocommerce .cart_totals .order-total th,
.woocommerce .cart_totals .order-total td {
  font-size: 17px !important;
  font-weight: 900 !important;
  color: var(--gg-navy) !important;
  border-bottom: none !important;
  padding-top: 14px !important;
}

.woocommerce .cart_totals .order-total td {
  color: var(--gg-orange) !important;
}

/* ---------------------------------------------------------------------------
   8. BREADCRUMBS — Clean, professional
   --------------------------------------------------------------------------- */

.woocommerce-breadcrumb,
nav.woocommerce-breadcrumb {
  font-size: 13px !important;
  color: #94a3b8 !important;
  margin: 16px 0 8px !important;
  font-weight: 500 !important;
}

.woocommerce-breadcrumb a,
nav.woocommerce-breadcrumb a {
  color: #64748b !important;
  text-decoration: none !important;
}

.woocommerce-breadcrumb a:hover,
nav.woocommerce-breadcrumb a:hover {
  color: var(--gg-orange) !important;
}

/* Breadcrumb separator */
.woocommerce-breadcrumb .breadcrumb-sep,
.woocommerce-breadcrumb > span:not(:last-child)::after {
  content: " › ";
  color: #cbd5e1;
  margin: 0 2px;
}

/* ---------------------------------------------------------------------------
   9. SECTION ALTERNATING BACKGROUNDS — Visual rhythm on homepage
   --------------------------------------------------------------------------- */

/* Give Elementor sections a subtle alternating background by type */
.elementor-section.gg-section-light,
.e-con.gg-section-light {
  background-color: var(--gg-surface) !important;
}

.elementor-section.gg-section-navy,
.e-con.gg-section-navy {
  background: linear-gradient(135deg, var(--gg-navy) 0%, #1b5ea8 100%) !important;
  color: #fff !important;
}

.elementor-section.gg-section-navy h1,
.elementor-section.gg-section-navy h2,
.elementor-section.gg-section-navy h3,
.e-con.gg-section-navy h1,
.e-con.gg-section-navy h2,
.e-con.gg-section-navy h3 {
  color: #fff !important;
}

/* ---------------------------------------------------------------------------
   10. PAGE & SECTION HEADINGS — Consistent Nunito treatment
   --------------------------------------------------------------------------- */

/* Shared heading style across pages */
.entry-title,
.page-title,
.woocommerce-products-header__title,
.woocommerce .page-title {
  font-family: var(--gg-font-heading) !important;
  font-weight: 900 !important;
  letter-spacing: -0.025em !important;
  line-height: 1.15 !important;
}

/* Elementor headings */
.elementor-widget-heading .elementor-heading-title {
  font-family: var(--gg-font-heading) !important;
  letter-spacing: -0.015em !important;
}

/* ---------------------------------------------------------------------------
   11. FOOTER — Accent top border, warmer tone
   --------------------------------------------------------------------------- */

footer.site-footer,
#colophon,
.site-footer {
  border-top: 3px solid var(--gg-orange) !important;
}

.site-footer .widget-title,
.site-footer h1,
.site-footer h2,
.site-footer h3 {
  font-family: var(--gg-font-heading) !important;
  letter-spacing: 0.06em !important;
}

/* ---------------------------------------------------------------------------
   12. SCROLLBAR — Thin, branded (Webkit)
   --------------------------------------------------------------------------- */

::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}

::-webkit-scrollbar-track {
  background: #f1f5f9;
}

::-webkit-scrollbar-thumb {
  background: #cbd5e1;
  border-radius: 999px;
}

::-webkit-scrollbar-thumb:hover {
  background: var(--gg-blue);
}

/* ---------------------------------------------------------------------------
   13. MOBILE REFINEMENTS — v11
   --------------------------------------------------------------------------- */

@media (max-width: 767px) {

  /* Nav stays sentence-case, compact */
  .gg-primary-nav .menu > li > a {
    font-size: 14px !important;
    padding: 0 10px !important;
  }

  /* Single product price on mobile */
  .woocommerce div.product p.price,
  .woocommerce div.product span.price {
    font-size: 22px !important;
  }

  /* Cart table: scrollable on small screens */
  .woocommerce-cart-form {
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
  }

  /* Cart totals — full width */
  .woocommerce .cart-collaterals .cart_totals {
    width: 100% !important;
  }

  /* Checkout columns stack */
  .woocommerce-checkout #customer_details .col-1,
  .woocommerce-checkout #customer_details .col-2 {
    float: none !important;
    width: 100% !important;
    margin: 0 0 24px !important;
  }
}

@media (min-width: 768px) and (max-width: 1024px) {
  /* Tablet product card sizing */
  ul.products li.product {
    flex-basis: calc(50% - 14px) !important;
    max-width: calc(50% - 14px) !important;
    width: calc(50% - 14px) !important;
  }
}

/* --- end of GG PATCH v11 --- */

/* =============================================================================
   GG PATCH v12 — Full-site page consistency: every page themed header→footer
   March 2026
   ============================================================================= */

/* ─────────────────────────────────────────────────────────────────────────────
   SHARED PAGE BANNER MIXIN  (reproduced across pages via shared CSS vars)
   Every inner page gets the same gradient hero strip at the top so the site
   feels continuous whether you're on Shop, Cart, Checkout, Blog or Account.
   ───────────────────────────────────────────────────────────────────────────── */

:root {
  --gg-page-banner-bg:  linear-gradient(120deg, var(--gg-navy) 0%, #1b5298 55%, #1b75bb 100%);
  --gg-page-banner-min: 120px;
  --gg-page-banner-pad: 40px 48px 36px;
}

/* Shared banner geometry — used by ::before pseudo-elements on each page */
.gg-page-banner,
body.woocommerce-cart   #primary::before,
body.woocommerce-checkout #primary::before,
body.woocommerce-account  #primary::before,
body.woocommerce-order-received #primary::before,
body.woocommerce-view-order #primary::before {
  display: block !important;
  position: relative !important;
  left: 50% !important;
  width: 100vw !important;
  margin-left: -50vw !important;
  margin-bottom: 36px !important;
  padding: var(--gg-page-banner-pad) !important;
  background: var(--gg-page-banner-bg) !important;
  min-height: var(--gg-page-banner-min) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  text-align: center !important;
  overflow: hidden !important;
  /* Typography */
  color: #fff !important;
  font-family: var(--gg-font-heading) !important;
  font-size: 32px !important;
  font-weight: 900 !important;
  letter-spacing: -0.02em !important;
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.18) !important;
  line-height: 1.2 !important;
  /* Subtle circle decoration */
  background-image: var(--gg-page-banner-bg),
    radial-gradient(circle at 90% -10%, rgba(255,255,255,0.07) 0%, transparent 50%) !important;
}

/* Page-specific banner labels */
body.woocommerce-cart              #primary::before { content: "Your Shopping Cart"; }
body.woocommerce-checkout          #primary::before { content: "Secure Checkout"; }
body.woocommerce-order-received    #primary::before { content: "Order Confirmed! 🎉"; }
body.woocommerce-view-order        #primary::before { content: "Order Details"; }
body.woocommerce-account           #primary::before { content: "My Account"; }
body.woocommerce-account.woocommerce-orders        #primary::before { content: "My Orders"; }
body.woocommerce-account.woocommerce-edit-account  #primary::before { content: "Edit Account"; }
body.woocommerce-account.woocommerce-edit-address  #primary::before { content: "My Addresses"; }

/* Mobile: shrink the banner */
@media (max-width: 767px) {
  body.woocommerce-cart   #primary::before,
  body.woocommerce-checkout #primary::before,
  body.woocommerce-account  #primary::before,
  body.woocommerce-order-received #primary::before,
  body.woocommerce-view-order #primary::before {
    font-size: 22px !important;
    min-height: 80px !important;
    padding: 24px 16px 20px !important;
    margin-left: -50vw !important;
  }
}

/* ─────────────────────────────────────────────────────────────────────────────
   CONTENT MAX-WIDTH CONTAINERS
   Focused-task pages (cart, checkout) get a tighter container;
   The math ensures the full-bleed banners above still work perfectly.
   ───────────────────────────────────────────────────────────────────────────── */

/* Cart — focused task page, max 1000px */
body.woocommerce-cart #primary > .woocommerce,
body.woocommerce-cart #primary > .wc-empty-cart-message {
  max-width: 1020px;
  margin: 0 auto;
  width: 100%;
}

/* Checkout — 2-col layout, needs a bit more room */
body.woocommerce-checkout #primary > .woocommerce {
  max-width: 1100px;
  margin: 0 auto;
  width: 100%;
}

/* Account pages */
body.woocommerce-account #primary > .woocommerce {
  max-width: 1100px;
  margin: 0 auto;
  width: 100%;
}

/* Order received */
body.woocommerce-order-received #primary > .woocommerce {
  max-width: 860px;
  margin: 0 auto;
  width: 100%;
}

/* ─────────────────────────────────────────────────────────────────────────────
   SINGLE PRODUCT PAGE — Full themed treatment
   ───────────────────────────────────────────────────────────────────────────── */

/* Product breadcrumb bar — subtle tinted strip */
body.single-product .storefront-breadcrumb {
  background: var(--gg-surface) !important;
  border-bottom: 1px solid var(--gg-border-light) !important;
  margin-bottom: 0 !important;
  padding: 0 !important;
}

body.single-product .storefront-breadcrumb .col-full {
  padding-top: 12px !important;
  padding-bottom: 12px !important;
}

/* Single product content area */
body.single-product #primary {
  padding: 0 48px !important;
  max-width: 1360px !important;
  margin: 0 auto !important;
  box-sizing: border-box !important;
}

/* Product layout — flex two-column on desktop */
body.single-product div.product {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 48px !important;
  padding: 40px 0 !important;
  align-items: flex-start !important;
}

body.single-product div.product .woocommerce-product-gallery {
  flex: 0 0 46% !important;
  max-width: 46% !important;
  min-width: 0 !important;
}

body.single-product div.product .summary.entry-summary {
  flex: 1 1 0 !important;
  min-width: 0 !important;
}

/* Product category tag above title */
body.single-product .posted_in {
  font-size: 12px !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.08em !important;
  color: var(--gg-muted) !important;
  margin-bottom: 6px !important;
  display: block !important;
}

body.single-product .posted_in a {
  color: var(--gg-blue) !important;
  text-decoration: none !important;
}

body.single-product .posted_in a:hover {
  color: var(--gg-orange) !important;
}

/* Product meta (SKU, categories, tags) */
body.single-product .product_meta {
  padding: 14px 0 !important;
  border-top: 1px solid var(--gg-border-light) !important;
  margin-top: 14px !important;
  font-size: 13px !important;
  color: var(--gg-muted) !important;
}

body.single-product .product_meta span {
  display: block !important;
  margin-bottom: 4px !important;
}

body.single-product .product_meta a {
  color: var(--gg-blue) !important;
}

/* Related products section */
body.single-product .related.products,
body.single-product .upsells.products {
  clear: both !important;
  width: 100% !important;
  padding: 48px 0 !important;
  border-top: 2px solid var(--gg-border-light) !important;
  margin-top: 32px !important;
}

body.single-product .related > h2,
body.single-product .upsells > h2 {
  font-family: var(--gg-font-heading) !important;
  font-size: 24px !important;
  font-weight: 900 !important;
  color: var(--gg-navy) !important;
  text-align: center !important;
  margin-bottom: 32px !important;
  letter-spacing: -0.02em !important;
  position: relative !important;
}

/* Decorative underline on related products heading */
body.single-product .related > h2::after,
body.single-product .upsells > h2::after {
  content: "" !important;
  display: block !important;
  width: 48px !important;
  height: 3px !important;
  background: var(--gg-orange) !important;
  border-radius: 2px !important;
  margin: 8px auto 0 !important;
}

/* Mobile single product: stack columns */
@media (max-width: 767px) {
  body.single-product div.product {
    gap: 24px !important;
    padding: 20px 0 !important;
  }

  body.single-product div.product .woocommerce-product-gallery,
  body.single-product div.product .summary.entry-summary {
    flex: 0 0 100% !important;
    max-width: 100% !important;
  }

  body.single-product #primary {
    padding: 0 14px !important;
  }
}

@media (min-width: 768px) and (max-width: 1024px) {
  body.single-product div.product {
    gap: 28px !important;
  }

  body.single-product div.product .woocommerce-product-gallery {
    flex: 0 0 44% !important;
    max-width: 44% !important;
  }

  body.single-product #primary {
    padding: 0 24px !important;
  }
}

/* ─────────────────────────────────────────────────────────────────────────────
   CART PAGE — Polished two-section layout
   ───────────────────────────────────────────────────────────────────────────── */

/* Cart page layout: table left, totals right */
body.woocommerce-cart .woocommerce-cart-form + .cart-collaterals,
body.woocommerce-cart .cart-collaterals {
  display: flex !important;
  justify-content: flex-end !important;
  margin-top: 24px !important;
}

/* Continue shopping link */
body.woocommerce-cart .wc-proceed-to-checkout {
  margin-top: 16px !important;
}

body.woocommerce-cart .wc-proceed-to-checkout a.checkout-button {
  display: block !important;
  width: 100% !important;
  text-align: center !important;
  padding: 16px !important;
  font-size: 15px !important;
  background: var(--gg-orange) !important;
  border-radius: 10px !important;
}

/* Cross-sells heading */
body.woocommerce-cart .cross-sells > h2 {
  font-family: var(--gg-font-heading) !important;
  font-size: 22px !important;
  font-weight: 900 !important;
  color: var(--gg-navy) !important;
  margin: 40px 0 20px !important;
  position: relative !important;
}

body.woocommerce-cart .cross-sells > h2::after {
  content: "" !important;
  display: block !important;
  width: 36px !important;
  height: 3px !important;
  background: var(--gg-orange) !important;
  border-radius: 2px !important;
  margin-top: 6px !important;
}

/* Empty cart */
body.woocommerce-cart .cart-empty {
  text-align: center !important;
  padding: 60px 0 40px !important;
  font-size: 18px !important;
  font-weight: 600 !important;
  color: var(--gg-muted) !important;
}

body.woocommerce-cart .return-to-shop {
  text-align: center !important;
  margin-top: 20px !important;
}

body.woocommerce-cart .return-to-shop .button {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 14px 32px !important;
  background: var(--gg-orange) !important;
  color: #fff !important;
  border-radius: 999px !important;
  font-size: 15px !important;
  font-weight: 700 !important;
  text-decoration: none !important;
  border: 0 !important;
  box-shadow: 0 4px 14px rgba(255, 107, 53, 0.28) !important;
  transition: background 0.18s ease, transform 0.15s ease !important;
}

body.woocommerce-cart .return-to-shop .button:hover {
  background: #e5571f !important;
  transform: translateY(-2px) !important;
}

/* ─────────────────────────────────────────────────────────────────────────────
   CHECKOUT PAGE — Branded two-column layout
   ───────────────────────────────────────────────────────────────────────────── */

/* Checkout: billing left, order summary right */
body.woocommerce-checkout #customer_details {
  float: left !important;
  width: 55% !important;
  padding-right: 24px !important;
}

body.woocommerce-checkout #order_review_heading,
body.woocommerce-checkout #order_review {
  float: right !important;
  width: 42% !important;
}

body.woocommerce-checkout::after {
  content: "" !important;
  display: table !important;
  clear: both !important;
}

/* Checkout section card wrapper */
body.woocommerce-checkout #customer_details .woocommerce-billing-fields,
body.woocommerce-checkout #customer_details .woocommerce-shipping-fields {
  background: #fff !important;
  border: 1.5px solid var(--gg-border-light) !important;
  border-radius: 14px !important;
  padding: 24px !important;
  margin-bottom: 20px !important;
}

/* Order review card */
body.woocommerce-checkout #order_review {
  background: #fff !important;
  border: 1.5px solid var(--gg-border-light) !important;
  border-radius: 14px !important;
  padding: 24px !important;
}

/* Payment section */
body.woocommerce-checkout #payment {
  background: var(--gg-surface) !important;
  border-radius: 12px !important;
  padding: 20px !important;
  border: 1.5px solid var(--gg-border-light) !important;
  margin-top: 20px !important;
}

body.woocommerce-checkout #payment h3 {
  font-family: var(--gg-font-heading) !important;
  font-size: 16px !important;
  font-weight: 800 !important;
  color: var(--gg-navy) !important;
  margin-bottom: 14px !important;
}

/* Checkout progress steps indicator */
body.woocommerce-checkout #primary::after {
  content: "Cart  →  Checkout  →  Confirmation";
  display: block;
  text-align: center;
  font-size: 12px;
  font-weight: 600;
  color: var(--gg-muted);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: 10px 0 24px;
  clear: both;
}

/* Mobile checkout: stack columns */
@media (max-width: 767px) {
  body.woocommerce-checkout #customer_details,
  body.woocommerce-checkout #order_review_heading,
  body.woocommerce-checkout #order_review {
    float: none !important;
    width: 100% !important;
    padding-right: 0 !important;
  }
}

/* ─────────────────────────────────────────────────────────────────────────────
   ORDER RECEIVED PAGE — Celebratory, warm
   ───────────────────────────────────────────────────────────────────────────── */

body.woocommerce-order-received .woocommerce-order {
  max-width: 760px !important;
  margin: 0 auto !important;
}

body.woocommerce-order-received .woocommerce-thankyou-order-received {
  font-family: var(--gg-font-heading) !important;
  font-size: 22px !important;
  font-weight: 700 !important;
  color: #166534 !important;
  background: #f0fdf4 !important;
  border: 1.5px solid #86efac !important;
  border-radius: 12px !important;
  padding: 18px 24px !important;
  margin-bottom: 28px !important;
  text-align: center !important;
}

body.woocommerce-order-received .woocommerce-order-overview {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 16px !important;
  list-style: none !important;
  padding: 0 !important;
  margin: 0 0 28px !important;
}

body.woocommerce-order-received .woocommerce-order-overview li {
  flex: 1 1 180px !important;
  background: #fff !important;
  border: 1.5px solid var(--gg-border-light) !important;
  border-radius: 12px !important;
  padding: 16px 20px !important;
  font-size: 14px !important;
  color: var(--gg-muted) !important;
  text-align: center !important;
}

body.woocommerce-order-received .woocommerce-order-overview li strong {
  display: block !important;
  font-size: 17px !important;
  font-weight: 800 !important;
  color: var(--gg-navy) !important;
  margin-top: 4px !important;
}

body.woocommerce-order-received .woocommerce-order-details,
body.woocommerce-order-received .woocommerce-customer-details {
  background: #fff !important;
  border: 1.5px solid var(--gg-border-light) !important;
  border-radius: 14px !important;
  padding: 24px !important;
  margin-bottom: 24px !important;
}

body.woocommerce-order-received .woocommerce-order-details h2,
body.woocommerce-order-received .woocommerce-customer-details h2 {
  font-family: var(--gg-font-heading) !important;
  font-size: 18px !important;
  font-weight: 800 !important;
  color: var(--gg-navy) !important;
  margin-bottom: 16px !important;
  padding-bottom: 12px !important;
  border-bottom: 2px solid var(--gg-border-light) !important;
}

/* ─────────────────────────────────────────────────────────────────────────────
   MY ACCOUNT PAGES — Sidebar nav + content area
   ───────────────────────────────────────────────────────────────────────────── */

body.woocommerce-account .woocommerce {
  display: flex !important;
  gap: 32px !important;
  align-items: flex-start !important;
  flex-wrap: wrap !important;
}

/* Account navigation sidebar */
body.woocommerce-account .woocommerce-MyAccount-navigation {
  flex: 0 0 220px !important;
  max-width: 220px !important;
  background: #fff !important;
  border: 1.5px solid var(--gg-border-light) !important;
  border-radius: 14px !important;
  overflow: hidden !important;
  box-shadow: var(--gg-shadow-xs) !important;
}

body.woocommerce-account .woocommerce-MyAccount-navigation ul {
  list-style: none !important;
  margin: 0 !important;
  padding: 8px 0 !important;
}

body.woocommerce-account .woocommerce-MyAccount-navigation ul li {
  margin: 0 !important;
  border-bottom: 1px solid var(--gg-border-light) !important;
}

body.woocommerce-account .woocommerce-MyAccount-navigation ul li:last-child {
  border-bottom: none !important;
}

body.woocommerce-account .woocommerce-MyAccount-navigation ul li a {
  display: block !important;
  padding: 12px 18px !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  color: var(--gg-navy) !important;
  text-decoration: none !important;
  transition: background 0.15s ease, color 0.15s ease !important;
}

body.woocommerce-account .woocommerce-MyAccount-navigation ul li a:hover {
  background: var(--gg-orange-light) !important;
  color: var(--gg-orange) !important;
}

body.woocommerce-account .woocommerce-MyAccount-navigation ul li.is-active a,
body.woocommerce-account .woocommerce-MyAccount-navigation ul li.woocommerce-MyAccount-navigation-link--is-active a {
  background: rgba(255, 107, 53, 0.12) !important;
  color: var(--gg-orange) !important;
  font-weight: 700 !important;
  border-left: 3px solid var(--gg-orange) !important;
  padding-left: 15px !important;
}

/* Account content area */
body.woocommerce-account .woocommerce-MyAccount-content {
  flex: 1 1 0 !important;
  min-width: 0 !important;
  background: #fff !important;
  border: 1.5px solid var(--gg-border-light) !important;
  border-radius: 14px !important;
  padding: 28px !important;
  box-shadow: var(--gg-shadow-xs) !important;
}

/* Account orders table */
body.woocommerce-account .woocommerce-orders-table {
  width: 100% !important;
  border-collapse: collapse !important;
}

body.woocommerce-account .woocommerce-orders-table th {
  font-family: var(--gg-font-heading) !important;
  font-size: 12px !important;
  font-weight: 800 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.07em !important;
  color: var(--gg-muted) !important;
  padding: 10px 12px !important;
  border-bottom: 2px solid var(--gg-border-light) !important;
  background: var(--gg-surface) !important;
}

body.woocommerce-account .woocommerce-orders-table td {
  padding: 14px 12px !important;
  font-size: 14px !important;
  border-bottom: 1px solid var(--gg-border-light) !important;
  color: var(--gg-text) !important;
}

body.woocommerce-account .woocommerce-orders-table__cell-order-actions .woocommerce-button {
  display: inline-flex !important;
  padding: 6px 14px !important;
  background: var(--gg-navy) !important;
  color: #fff !important;
  border-radius: 6px !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  text-decoration: none !important;
}

/* Order status badges */
.woocommerce-order-status-processing,
.woocommerce-order-status-on-hold,
.woocommerce-order-status-completed,
.woocommerce-order-status-cancelled {
  display: inline-flex !important;
  padding: 3px 10px !important;
  border-radius: 999px !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  letter-spacing: 0.04em !important;
  text-transform: uppercase !important;
}

.woocommerce-order-status-processing  { background: #dbeafe !important; color: #1d4ed8 !important; }
.woocommerce-order-status-on-hold     { background: #fef9c3 !important; color: #854d0e !important; }
.woocommerce-order-status-completed   { background: #dcfce7 !important; color: #15803d !important; }
.woocommerce-order-status-cancelled   { background: #fee2e2 !important; color: #b91c1c !important; }

/* Account mobile: stack sidebar below banner */
@media (max-width: 767px) {
  body.woocommerce-account .woocommerce {
    flex-direction: column !important;
  }

  body.woocommerce-account .woocommerce-MyAccount-navigation {
    flex: 0 0 100% !important;
    max-width: 100% !important;
  }
}

/* ─────────────────────────────────────────────────────────────────────────────
   BLOG PAGE — Consistent with rest of site
   ───────────────────────────────────────────────────────────────────────────── */

/* Blog banner — same style as page banners */
body.blog:not(.single-post) #primary::before {
  position: relative !important;
  left: 50% !important;
  width: 100vw !important;
  margin-left: -50vw !important;
  margin-bottom: 36px !important;
  padding: 40px 48px 36px !important;
  background: var(--gg-page-banner-bg) !important;
  min-height: 120px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  text-align: center !important;
  /* Restate content and typography */
  content: "Learning Corner" !important;
  font-family: var(--gg-font-heading) !important;
  font-size: 32px !important;
  font-weight: 900 !important;
  letter-spacing: -0.02em !important;
  color: #fff !important;
  text-shadow: 0 2px 10px rgba(0,0,0,0.18) !important;
}

@media (max-width: 767px) {
  body.blog:not(.single-post) #primary::before {
    font-size: 24px !important;
    min-height: 80px !important;
    padding: 24px 16px !important;
  }
}

/* Blog grid: consistent max-width + spacing */
body.blog:not(.single-post) #main {
  max-width: 1200px !important;
  margin: 0 auto !important;
  padding-bottom: 60px !important;
}

/* ─────────────────────────────────────────────────────────────────────────────
   SINGLE BLOG POST — Article reading layout
   ───────────────────────────────────────────────────────────────────────────── */

body.single-post #primary {
  max-width: 100% !important;
  padding: 0 48px !important;
}

body.single-post article.post {
  max-width: 800px !important;
  margin: 40px auto 60px !important;
}

/* Post hero image */
body.single-post .post-thumbnail {
  margin: 0 0 28px !important;
  border-radius: 16px !important;
  overflow: hidden !important;
  box-shadow: var(--gg-shadow-md) !important;
}

body.single-post .post-thumbnail img {
  display: block !important;
  width: 100% !important;
  height: auto !important;
  max-height: 480px !important;
  object-fit: cover !important;
}

/* Post header */
body.single-post .entry-header {
  margin-bottom: 28px !important;
}

body.single-post .entry-title {
  font-family: var(--gg-font-heading) !important;
  font-size: clamp(26px, 4vw, 40px) !important;
  font-weight: 900 !important;
  color: var(--gg-navy) !important;
  line-height: 1.15 !important;
  letter-spacing: -0.025em !important;
  margin-bottom: 12px !important;
}

/* Post meta row */
body.single-post .entry-meta {
  display: flex !important;
  align-items: center !important;
  gap: 16px !important;
  flex-wrap: wrap !important;
  font-size: 13px !important;
  color: var(--gg-muted) !important;
  padding: 12px 0 !important;
  border-top: 1px solid var(--gg-border-light) !important;
  border-bottom: 1px solid var(--gg-border-light) !important;
  margin-bottom: 24px !important;
}

body.single-post .entry-meta a {
  color: var(--gg-blue) !important;
  font-weight: 600 !important;
  text-decoration: none !important;
}

/* Article body typography */
body.single-post .entry-content {
  font-size: 16.5px !important;
  line-height: 1.85 !important;
  color: #374151 !important;
}

body.single-post .entry-content h2 {
  font-family: var(--gg-font-heading) !important;
  font-size: 24px !important;
  font-weight: 800 !important;
  color: var(--gg-navy) !important;
  margin: 40px 0 16px !important;
  letter-spacing: -0.015em !important;
}

body.single-post .entry-content h3 {
  font-family: var(--gg-font-heading) !important;
  font-size: 20px !important;
  font-weight: 700 !important;
  color: var(--gg-navy) !important;
  margin: 28px 0 12px !important;
}

body.single-post .entry-content p {
  margin-bottom: 20px !important;
}

body.single-post .entry-content a {
  color: var(--gg-orange) !important;
  font-weight: 600 !important;
}

body.single-post .entry-content blockquote {
  border-left: 4px solid var(--gg-orange) !important;
  padding: 12px 20px !important;
  margin: 24px 0 !important;
  background: var(--gg-surface) !important;
  border-radius: 0 8px 8px 0 !important;
  font-style: italic !important;
  color: #4b5563 !important;
}

body.single-post .entry-content ul,
body.single-post .entry-content ol {
  padding-left: 22px !important;
  margin-bottom: 20px !important;
}

body.single-post .entry-content li {
  margin-bottom: 6px !important;
}

/* Post footer — tags + author */
body.single-post .entry-footer {
  margin-top: 36px !important;
  padding-top: 20px !important;
  border-top: 2px solid var(--gg-border-light) !important;
}

body.single-post .entry-footer .cat-links a,
body.single-post .entry-footer .tags-links a {
  display: inline-flex !important;
  padding: 4px 12px !important;
  margin: 4px 4px 4px 0 !important;
  background: var(--gg-surface) !important;
  border: 1px solid var(--gg-border-light) !important;
  border-radius: 999px !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  color: var(--gg-muted) !important;
  text-decoration: none !important;
}

body.single-post .entry-footer .tags-links a:hover {
  background: var(--gg-orange-light) !important;
  color: var(--gg-orange) !important;
  border-color: rgba(255,107,53,0.2) !important;
}

/* Mobile single post */
@media (max-width: 767px) {
  body.single-post #primary {
    padding: 0 14px !important;
  }

  body.single-post article.post {
    margin: 20px auto 40px !important;
  }

  body.single-post .entry-title {
    font-size: 26px !important;
  }

  body.single-post .entry-content {
    font-size: 15px !important;
  }
}

/* ─────────────────────────────────────────────────────────────────────────────
   ABOUT / CONTACT PAGES — Consistent page headers, clean content
   ───────────────────────────────────────────────────────────────────────────── */

/* Page entry header — same gradient as all other page banners */
body.page .entry-header {
  background: var(--gg-page-banner-bg) !important;
  margin: 0 -48px !important;     /* bleeds to #primary edges */
  padding: 0 48px !important;
  position: relative !important;
}

/* Decorative circle on right */
body.page .entry-header::after {
  content: "" !important;
  position: absolute !important;
  right: -40px !important;
  top: -30px !important;
  width: 200px !important;
  height: 200px !important;
  border-radius: 50% !important;
  background: rgba(255,255,255,0.06) !important;
  pointer-events: none !important;
}

/* Page title */
body.page .entry-title {
  font-family: var(--gg-font-heading) !important;
  font-size: clamp(28px, 4vw, 40px) !important;
  font-weight: 900 !important;
  color: #fff !important;
  letter-spacing: -0.025em !important;
  padding: 44px 0 40px !important;
  margin: 0 !important;
  text-align: center !important;
  text-shadow: 0 2px 8px rgba(0,0,0,0.18) !important;
  position: relative !important;
  z-index: 1 !important;
}

/* Page content area */
body.page:not(.elementor-page) .entry-content {
  max-width: 860px !important;
  margin: 40px auto !important;
  font-size: 16px !important;
  line-height: 1.8 !important;
  color: #374151 !important;
}

body.page:not(.elementor-page) .entry-content h2 {
  font-family: var(--gg-font-heading) !important;
  font-size: 26px !important;
  font-weight: 800 !important;
  color: var(--gg-navy) !important;
  margin: 36px 0 14px !important;
  letter-spacing: -0.015em !important;
}

/* Mobile page banners */
@media (max-width: 767px) {
  body.page .entry-header {
    margin: 0 -14px !important;
    padding: 0 14px !important;
  }

  body.page .entry-title {
    font-size: 26px !important;
    padding: 28px 0 24px !important;
  }
}

/* ─────────────────────────────────────────────────────────────────────────────
   SHOP TOOLBAR — Consistent sorting row
   ───────────────────────────────────────────────────────────────────────────── */

.woocommerce-result-count {
  font-size: 13px !important;
  color: var(--gg-muted) !important;
  font-weight: 500 !important;
}

.woocommerce-ordering {
  float: right !important;
}

.woocommerce-ordering select {
  border: 1.5px solid var(--gg-border-light) !important;
  border-radius: 8px !important;
  padding: 8px 12px !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  color: var(--gg-navy) !important;
  background: #fff !important;
  cursor: pointer !important;
}

.woocommerce-ordering select:focus {
  outline: none !important;
  border-color: var(--gg-blue) !important;
  box-shadow: 0 0 0 3px rgba(27, 117, 187, 0.10) !important;
}

/* ─────────────────────────────────────────────────────────────────────────────
   SHARED SECTION HEADING PATTERN
   Apply class "gg-section-heading" to any widget/block heading to get the
   standard centred title + orange underline across all homepage sections.
   ───────────────────────────────────────────────────────────────────────────── */

.gg-section-heading {
  font-family: var(--gg-font-heading);
  font-size: clamp(24px, 3.5vw, 36px);
  font-weight: 900;
  color: var(--gg-navy);
  text-align: center;
  letter-spacing: -0.025em;
  line-height: 1.15;
  margin-bottom: 8px;
}

.gg-section-heading::after {
  content: "";
  display: block;
  width: 40px;
  height: 3px;
  background: var(--gg-orange);
  border-radius: 2px;
  margin: 10px auto 0;
}

.gg-section-sub {
  text-align: center;
  font-size: 16px;
  color: var(--gg-muted);
  line-height: 1.65;
  max-width: 560px;
  margin: 0 auto 36px;
}

/* ─────────────────────────────────────────────────────────────────────────────
   DISCOUNT / PROMO BAR — Consistent with page style
   ───────────────────────────────────────────────────────────────────────────── */

.gg-discount-bar {
  position: fixed !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  z-index: 9990 !important;
  background: var(--gg-orange) !important;
  color: #fff !important;
  min-height: var(--gg-discount-bar-height) !important;
  box-shadow: 0 -4px 20px rgba(255, 107, 53, 0.25) !important;
}

.gg-discount-bar__inner {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 10px !important;
  height: var(--gg-discount-bar-height) !important;
  max-width: var(--gg-shell-width) !important;
  margin: 0 auto !important;
  font-size: 14px !important;
  font-weight: 700 !important;
}

.gg-discount-bar__text a {
  color: var(--gg-yellow) !important;
  font-weight: 800 !important;
  text-decoration: underline !important;
  text-underline-offset: 2px !important;
}

/* ─────────────────────────────────────────────────────────────────────────────
   WOOCOMMERCE PAGINATION — Branded, clean
   ───────────────────────────────────────────────────────────────────────────── */

.woocommerce-pagination,
.woocommerce nav.woocommerce-pagination {
  text-align: center !important;
  padding: 32px 0 !important;
}

.woocommerce-pagination ul {
  display: inline-flex !important;
  gap: 6px !important;
  list-style: none !important;
  padding: 0 !important;
  margin: 0 !important;
}

.woocommerce-pagination ul li {
  margin: 0 !important;
}

.woocommerce-pagination ul li a,
.woocommerce-pagination ul li span {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 38px !important;
  height: 38px !important;
  border-radius: 8px !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  color: var(--gg-navy) !important;
  border: 1.5px solid var(--gg-border-light) !important;
  background: #fff !important;
  text-decoration: none !important;
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease !important;
}

.woocommerce-pagination ul li a:hover {
  background: var(--gg-orange-light) !important;
  border-color: rgba(255,107,53,0.3) !important;
  color: var(--gg-orange) !important;
}

.woocommerce-pagination ul li span.current {
  background: var(--gg-orange) !important;
  border-color: var(--gg-orange) !important;
  color: #fff !important;
}

/* ─────────────────────────────────────────────────────────────────────────────
   GLOBAL BUTTON HIERARCHY — Primary, Secondary, Ghost
   ───────────────────────────────────────────────────────────────────────────── */

/* Any generic WooCommerce button defaults to secondary style */
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 10px 22px !important;
  border: 0 !important;
  border-radius: 8px !important;
  background: var(--gg-navy) !important;
  color: #fff !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  text-decoration: none !important;
  cursor: pointer !important;
  transition: background 0.18s ease, transform 0.15s ease !important;
  letter-spacing: 0.02em !important;
}

.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce input.button:hover {
  background: #162d4a !important;
  color: #fff !important;
  transform: translateY(-1px) !important;
}

/* Primary CTA variant already handled by .button.alt, .single_add_to_cart_button etc. */

/* ─────────────────────────────────────────────────────────────────────────────
   GLOBAL FOCUS RING — Accessible, branded
   ───────────────────────────────────────────────────────────────────────────── */

*:focus-visible {
  outline: 2px solid var(--gg-orange);
  outline-offset: 3px;
  border-radius: 4px;
}

/* ─────────────────────────────────────────────────────────────────────────────
   STOREFRONT HANDHELD FOOTER / DEFAULT ELEMENTS — Keep hidden
   ───────────────────────────────────────────────────────────────────────────── */

/* Storefront sometimes re-shows these */
.storefront-handheld-footer-bar,
.storefront-handheld-footer-bar * {
  display: none !important;
}

.storefront-full-width-content .site-main,
#wrapper-navbar {
  padding-top: 0 !important;
}

/* Suppress default Storefront header elements that may re-appear */
.storefront-primary-navigation,
header.site-header:not(#gg-site-header),
.site-header:not(#gg-site-header) {
  display: none !important;
}

/* --- end of GG PATCH v12 --- */

/* =============================================================================
   GG PATCH v13 — Age Bubbles Equal Size · Account Icon · Reviews · Age Grid
   March 2026
   ============================================================================= */

/* ─────────────────────────────────────────────────────────────────────────────
   1. HEADER — account slot + pill styles
   ───────────────────────────────────────────────────────────────────────────── */

.gg-header-tools {
  grid-template-columns: minmax(240px, 340px) auto auto auto !important;
  gap: 10px !important;
}

.gg-account-pill {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  min-height: 40px !important;
  padding: 0 14px 0 10px !important;
  border-radius: 999px !important;
  border: 1.5px solid var(--gg-border-light) !important;
  background: #fff !important;
  color: var(--gg-navy) !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  text-decoration: none !important;
  white-space: nowrap !important;
  transition: border-color 0.18s ease, background 0.18s ease, color 0.18s ease !important;
  cursor: pointer !important;
}

.gg-account-pill:hover {
  border-color: var(--gg-orange) !important;
  color: var(--gg-orange) !important;
  background: var(--gg-orange-light) !important;
}

.gg-account-pill--in {
  border-color: var(--gg-orange) !important;
  background: rgba(255, 107, 53, 0.08) !important;
  color: var(--gg-orange) !important;
}

.gg-account-pill__icon svg {
  width: 20px !important;
  height: 20px !important;
  fill: none !important;
  stroke: currentColor !important;
  stroke-width: 2 !important;
  stroke-linecap: round !important;
  stroke-linejoin: round !important;
  display: block !important;
}

.gg-account-pill__label {
  max-width: 80px !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

@media (max-width: 1024px) {
  .gg-header-tools {
    grid-template-columns: auto auto auto auto !important;
  }

  .gg-header-account-slot {
    display: none !important;
  }
}

/* ─────────────────────────────────────────────────────────────────────────────
   2. AGE BUBBLES (Elementor image widgets) — force all equal 160×160px circles
      Add CSS class "gg-shop-by-age" to the Elementor SECTION containing the bubbles
   ───────────────────────────────────────────────────────────────────────────── */

.gg-shop-by-age .elementor-widget-image img,
.gg-shop-by-age .elementor-image img {
  width: 160px !important;
  height: 160px !important;
  min-width: 160px !important;
  min-height: 160px !important;
  max-width: 160px !important;
  max-height: 160px !important;
  border-radius: 50% !important;
  object-fit: cover !important;
  border: 4px solid rgba(255, 107, 53, 0.22) !important;
  box-shadow: 0 6px 20px rgba(30, 58, 95, 0.12) !important;
  display: block !important;
  margin: 0 auto !important;
  transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease !important;
}

.gg-shop-by-age .elementor-widget-image:hover img,
.gg-shop-by-age .elementor-image:hover img {
  transform: scale(1.06) !important;
  border-color: var(--gg-orange) !important;
  box-shadow: 0 10px 28px rgba(255, 107, 53, 0.22) !important;
}

/* Force equal column width so no bubble stretches larger */
.gg-shop-by-age .elementor-column {
  flex: 1 1 0 !important;
  min-width: 0 !important;
  text-align: center !important;
}

/* Age badge button below bubble */
.gg-shop-by-age .elementor-button {
  border-radius: 999px !important;
  font-size: 13px !important;
  font-weight: 800 !important;
  padding: 6px 18px !important;
  min-width: 90px !important;
  text-align: center !important;
  letter-spacing: 0.01em !important;
  box-shadow: 0 2px 8px rgba(0,0,0,0.15) !important;
  display: inline-block !important;
}

@media (max-width: 767px) {
  .gg-shop-by-age .elementor-column {
    flex: 0 0 50% !important;
    max-width: 50% !important;
    margin-bottom: 20px !important;
  }

  .gg-shop-by-age .elementor-widget-image img,
  .gg-shop-by-age .elementor-image img {
    width: 120px !important;
    height: 120px !important;
    min-width: 120px !important;
    min-height: 120px !important;
    max-width: 120px !important;
    max-height: 120px !important;
  }
}

/* ─────────────────────────────────────────────────────────────────────────────
   3. [gg_age_grid] SHORTCODE STYLES
   ───────────────────────────────────────────────────────────────────────────── */

.gg-age-grid-wrap {
  padding: 48px 0;
  text-align: center;
}

.gg-age-grid__heading {
  font-family: var(--gg-font-heading);
  font-size: clamp(24px, 3.5vw, 36px);
  font-weight: 900;
  color: var(--gg-navy);
  letter-spacing: -0.025em;
  margin-bottom: 4px;
}

.gg-age-grid__heading::after {
  content: "";
  display: block;
  width: 40px;
  height: 3px;
  background: var(--gg-orange);
  border-radius: 2px;
  margin: 8px auto 36px;
}

.gg-age-grid {
  display: flex;
  justify-content: center;
  align-items: flex-start;
  gap: 28px;
  flex-wrap: wrap;
}

.gg-age-bubble-link {
  text-decoration: none !important;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.gg-age-bubble {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 160px;
  transition: transform 0.22s ease;
}

.gg-age-bubble-link:hover .gg-age-bubble {
  transform: translateY(-6px);
}

.gg-age-bubble__circle {
  width: 160px;
  height: 160px;
  border-radius: 50%;
  background: linear-gradient(135deg, #f0f5ff 0%, #e8f4fd 100%);
  border: 4px solid rgba(255, 107, 53, 0.18);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 6px 20px rgba(30, 58, 95, 0.10);
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
  position: relative;
  z-index: 1;
}

.gg-age-bubble-link:hover .gg-age-bubble__circle {
  border-color: var(--gg-orange);
  box-shadow: 0 12px 32px rgba(255, 107, 53, 0.20);
}

.gg-age-bubble__icon {
  font-size: 54px;
  line-height: 1;
  display: block;
}

.gg-age-bubble__badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 6px 18px;
  border-radius: 999px;
  color: #fff;
  font-family: var(--gg-font-heading);
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 0.02em;
  margin-top: -18px;
  position: relative;
  z-index: 2;
  box-shadow: 0 3px 10px rgba(0,0,0,0.18);
  white-space: nowrap;
}

.gg-age-bubble__sub {
  font-size: 13px;
  font-weight: 600;
  color: var(--gg-muted);
  margin-top: 10px;
  text-align: center;
}

@media (max-width: 767px) {
  .gg-age-grid { gap: 16px; }

  .gg-age-bubble,
  .gg-age-bubble__circle {
    width: 118px;
    height: 118px;
  }

  .gg-age-bubble__icon { font-size: 38px; }

  .gg-age-bubble__badge {
    font-size: 11px;
    padding: 5px 12px;
    margin-top: -12px;
  }
}

/* ─────────────────────────────────────────────────────────────────────────────
   4. PRODUCT REVIEWS — professional card layout
   ───────────────────────────────────────────────────────────────────────────── */

.woocommerce-product-rating {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  margin-bottom: 12px !important;
}

.woocommerce-product-rating .woocommerce-review-link {
  font-size: 13px !important;
  color: var(--gg-blue) !important;
  font-weight: 600 !important;
  text-decoration: none !important;
}

.woocommerce-product-rating .woocommerce-review-link:hover {
  color: var(--gg-orange) !important;
}

/* Review list */
.woocommerce-Reviews #reviews ol.commentlist {
  list-style: none !important;
  padding: 0 !important;
  margin: 0 0 28px !important;
}

.woocommerce-Reviews #reviews ol.commentlist li.comment {
  border: 1.5px solid var(--gg-border-light) !important;
  border-radius: 14px !important;
  padding: 20px 22px !important;
  margin-bottom: 14px !important;
  background: #fff !important;
  box-shadow: var(--gg-shadow-xs) !important;
  overflow: hidden !important;
}

.woocommerce-Reviews #reviews ol.commentlist li.comment img.avatar {
  border-radius: 50% !important;
  width: 46px !important;
  height: 46px !important;
  float: left !important;
  margin: 0 14px 0 0 !important;
  border: 2px solid var(--gg-border-light) !important;
}

.woocommerce-Reviews #reviews ol.commentlist li .comment-text {
  margin-left: 60px !important;
}

.woocommerce-Reviews #reviews ol.commentlist li .meta .woocommerce-review__author {
  font-family: var(--gg-font-heading) !important;
  font-size: 15px !important;
  font-weight: 700 !important;
  color: var(--gg-navy) !important;
}

.woocommerce-Reviews #reviews ol.commentlist li .meta time {
  font-size: 12px !important;
  color: var(--gg-muted) !important;
}

.woocommerce-Reviews #reviews ol.commentlist li .description p {
  font-size: 14.5px !important;
  line-height: 1.75 !important;
  color: #4b5563 !important;
  margin: 8px 0 0 !important;
}

.woocommerce-review__verified {
  display: inline-flex !important;
  padding: 2px 8px !important;
  background: #dcfce7 !important;
  color: #15803d !important;
  border-radius: 999px !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  margin-left: 6px !important;
}

/* Review form */
.woocommerce-Reviews #review_form_wrapper h3,
.woocommerce-Reviews #respond h3 {
  font-family: var(--gg-font-heading) !important;
  font-size: 20px !important;
  font-weight: 800 !important;
  color: var(--gg-navy) !important;
  margin-bottom: 16px !important;
}

.woocommerce-Reviews #review_form .comment-form {
  background: var(--gg-surface) !important;
  border: 1.5px solid var(--gg-border-light) !important;
  border-radius: 14px !important;
  padding: 24px !important;
}

.woocommerce-Reviews #review_form .comment-form input[type="text"],
.woocommerce-Reviews #review_form .comment-form input[type="email"],
.woocommerce-Reviews #review_form .comment-form textarea {
  width: 100% !important;
  padding: 11px 14px !important;
  border: 1.5px solid #d0dae6 !important;
  border-radius: 10px !important;
  background: #fff !important;
  font-size: 14px !important;
  font-family: var(--gg-font-body) !important;
  transition: border-color 0.15s ease !important;
}

.woocommerce-Reviews #review_form .comment-form input:focus,
.woocommerce-Reviews #review_form .comment-form textarea:focus {
  outline: none !important;
  border-color: var(--gg-blue) !important;
  box-shadow: 0 0 0 3px rgba(27, 117, 187, 0.10) !important;
}

.woocommerce-Reviews #review_form .stars a {
  font-size: 28px !important;
  color: #d1d5db !important;
  text-decoration: none !important;
  transition: color 0.12s ease !important;
}

.woocommerce-Reviews #review_form .stars a:hover,
.woocommerce-Reviews #review_form .stars a.active {
  color: var(--gg-yellow) !important;
}

.woocommerce-Reviews #review_form .form-submit input[type="submit"] {
  display: inline-flex !important;
  padding: 12px 28px !important;
  background: var(--gg-orange) !important;
  color: #fff !important;
  border: 0 !important;
  border-radius: 999px !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  cursor: pointer !important;
  box-shadow: 0 3px 12px rgba(255, 107, 53, 0.28) !important;
  transition: background 0.18s ease !important;
}

.woocommerce-Reviews #review_form .form-submit input[type="submit"]:hover {
  background: #e5571f !important;
}

/* Stars on product loop cards */
ul.products li.product .star-rating {
  display: block !important;
  margin: 0 auto 6px !important;
  font-size: 12px !important;
}

/* ─────────────────────────────────────────────────────────────────────────────
   5. LOGIN/REGISTER PAGE
   ───────────────────────────────────────────────────────────────────────────── */

body.woocommerce-account .u-columns {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 28px !important;
}

body.woocommerce-account .u-column1,
body.woocommerce-account .u-column2 {
  background: #fff !important;
  border: 1.5px solid var(--gg-border-light) !important;
  border-radius: 14px !important;
  padding: 28px !important;
  box-shadow: var(--gg-shadow-xs) !important;
}

body.woocommerce-account .u-column1 h2,
body.woocommerce-account .u-column2 h2 {
  font-family: var(--gg-font-heading) !important;
  font-size: 22px !important;
  font-weight: 800 !important;
  color: var(--gg-navy) !important;
  margin-bottom: 18px !important;
  padding-bottom: 12px !important;
  border-bottom: 2px solid var(--gg-border-light) !important;
}

body.woocommerce-account .woocommerce-form input[type="text"],
body.woocommerce-account .woocommerce-form input[type="email"],
body.woocommerce-account .woocommerce-form input[type="password"] {
  width: 100% !important;
  padding: 11px 14px !important;
  border: 1.5px solid #d0dae6 !important;
  border-radius: 10px !important;
  background: #fff !important;
  font-size: 14px !important;
  margin-bottom: 12px !important;
}

body.woocommerce-account .woocommerce-form input:focus {
  outline: none !important;
  border-color: var(--gg-blue) !important;
  box-shadow: 0 0 0 3px rgba(27, 117, 187, 0.10) !important;
}

body.woocommerce-account .woocommerce-form button[type="submit"],
body.woocommerce-account .woocommerce-form .button {
  width: 100% !important;
  padding: 13px !important;
  background: var(--gg-orange) !important;
  color: #fff !important;
  border: 0 !important;
  border-radius: 999px !important;
  font-size: 15px !important;
  font-weight: 700 !important;
  cursor: pointer !important;
  transition: background 0.18s ease !important;
  text-align: center !important;
  display: block !important;
}

body.woocommerce-account .woocommerce-form button:hover {
  background: #e5571f !important;
}

@media (max-width: 767px) {
  body.woocommerce-account .u-columns {
    grid-template-columns: 1fr !important;
  }
}

/* ─────────────────────────────────────────────────────────────────────────────
   6. ELEMENTOR HELPER CLASSES (add in Advanced › CSS Classes)
      gg-titled-section  — auto centred heading + orange underline
      gg-why-section     — off-white bg, icon circles
   ───────────────────────────────────────────────────────────────────────────── */

.gg-titled-section .elementor-heading-title {
  font-family: var(--gg-font-heading) !important;
  font-weight: 900 !important;
  color: var(--gg-navy) !important;
  letter-spacing: -0.025em !important;
  text-align: center !important;
}

.gg-titled-section .elementor-widget-heading {
  position: relative !important;
  padding-bottom: 14px !important;
  margin-bottom: 8px !important;
}

.gg-titled-section .elementor-widget-heading::after {
  content: "" !important;
  position: absolute !important;
  bottom: 0 !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
  width: 40px !important;
  height: 3px !important;
  background: var(--gg-orange) !important;
  border-radius: 2px !important;
}

.gg-why-section {
  background: var(--gg-surface) !important;
}

.gg-why-section .elementor-column {
  text-align: center !important;
}

.gg-why-section .elementor-icon-box-icon .elementor-icon {
  width: 64px !important;
  height: 64px !important;
  border-radius: 50% !important;
  background: rgba(255, 107, 53, 0.10) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  margin: 0 auto 14px !important;
}

/* --- end of GG PATCH v13 --- */

/* =============================================================================
   GG PATCH v14 — Skillmatics-style Account: icon-only desktop · strip mobile
   March 2026
   ============================================================================= */

/* ─────────────────────────────────────────────────────────────────────────────
   DESKTOP ACCOUNT ICON — icon-only pill, no label (matches Skillmatics header)
   ───────────────────────────────────────────────────────────────────────────── */

/* Override v13's labelled pill → compact icon button */
.gg-account-pill {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 40px !important;
  height: 40px !important;
  min-height: 40px !important;
  padding: 0 !important;
  border-radius: 50% !important;
  border: 1.5px solid var(--gg-border-light) !important;
  background: #fff !important;
  color: var(--gg-navy) !important;
  text-decoration: none !important;
  gap: 0 !important;
  transition: border-color 0.18s ease, background 0.18s ease, color 0.18s ease !important;
  position: relative !important;
}

.gg-account-pill:hover {
  border-color: var(--gg-orange) !important;
  background: var(--gg-orange-light) !important;
  color: var(--gg-orange) !important;
}

/* Logged-in: orange circle */
.gg-account-pill--in {
  border-color: var(--gg-orange) !important;
  background: rgba(255, 107, 53, 0.10) !important;
  color: var(--gg-orange) !important;
}

/* Logged-in dot indicator */
.gg-account-pill--in::after {
  content: "" !important;
  position: absolute !important;
  top: 1px !important;
  right: 1px !important;
  width: 9px !important;
  height: 9px !important;
  border-radius: 50% !important;
  background: #22c55e !important;
  border: 2px solid #fff !important;
}

.gg-account-pill__icon svg {
  width: 20px !important;
  height: 20px !important;
  fill: none !important;
  stroke: currentColor !important;
  stroke-width: 2 !important;
  stroke-linecap: round !important;
  stroke-linejoin: round !important;
  display: block !important;
}

/* Hide the text label on desktop — icon only like Skillmatics */
.gg-account-pill__label {
  display: none !important;
}

/* Header tools: tighten grid now that account is icon-only */
.gg-header-tools {
  grid-template-columns: minmax(220px, 320px) auto auto auto !important;
  align-items: center !important;
  gap: 8px !important;
}

/* ─────────────────────────────────────────────────────────────────────────────
   MOBILE NAV ACCOUNT STRIP — full-width banner at top of drawer
   Skillmatics pattern: avatar circle + name + sub-label + chevron
   ───────────────────────────────────────────────────────────────────────────── */

.gg-mob-account {
  display: flex !important;
  align-items: center !important;
  gap: 14px !important;
  padding: 18px 20px !important;
  background: linear-gradient(90deg, var(--gg-navy) 0%, #1b5298 100%) !important;
  text-decoration: none !important;
  border-bottom: 3px solid var(--gg-orange) !important;
  transition: opacity 0.15s ease !important;
}

.gg-mob-account:hover {
  opacity: 0.92 !important;
}

/* Logged-in: slightly warmer tint */
.gg-mob-account--in {
  background: linear-gradient(90deg, #1a3a5c 0%, #1b5ea8 100%) !important;
}

/* Avatar circle */
.gg-mob-account__avatar {
  flex: 0 0 44px !important;
  width: 44px !important;
  height: 44px !important;
  border-radius: 50% !important;
  background: rgba(255, 255, 255, 0.15) !important;
  border: 2px solid rgba(255, 255, 255, 0.30) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

.gg-mob-account__avatar svg {
  width: 22px !important;
  height: 22px !important;
  stroke: #fff !important;
  fill: none !important;
  stroke-width: 2 !important;
  stroke-linecap: round !important;
  stroke-linejoin: round !important;
}

/* Text block */
.gg-mob-account__text {
  flex: 1 1 0 !important;
  min-width: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 2px !important;
}

.gg-mob-account__name {
  font-family: var(--gg-font-heading) !important;
  font-size: 15px !important;
  font-weight: 800 !important;
  color: #fff !important;
  display: block !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

.gg-mob-account__sub {
  font-size: 11.5px !important;
  color: rgba(255, 255, 255, 0.70) !important;
  display: block !important;
  font-weight: 500 !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

/* Chevron */
.gg-mob-account__arrow {
  font-size: 22px !important;
  color: rgba(255, 255, 255, 0.50) !important;
  line-height: 1 !important;
  flex: 0 0 auto !important;
}

/* ─────────────────────────────────────────────────────────────────────────────
   AGE CATEGORY PAGES — header banner gets correct colour per age
   Adds an age-group colour accent when viewing a category page
   ───────────────────────────────────────────────────────────────────────────── */

/* WooCommerce category archive: the products-header description text */
.woocommerce-products-header__description,
.term-description {
  color: rgba(255, 255, 255, 0.88) !important;
  font-size: 15px !important;
  margin-top: 8px !important;
  max-width: 600px !important;
  text-align: center !important;
}

/* Age-specific banner accents (add these slugs as body classes WC adds automatically) */
body.term-ages-3-5  .woocommerce-products-header { background: linear-gradient(120deg, #c2410c 0%, var(--gg-orange) 60%, #fb923c 100%) !important; }
body.term-ages-5-7  .woocommerce-products-header { background: linear-gradient(120deg, #1e40af 0%, var(--gg-blue)   60%, #38bdf8 100%) !important; }
body.term-ages-7-9  .woocommerce-products-header { background: linear-gradient(120deg, var(--gg-navy) 0%, #1b5298   60%, #1b75bb 100%) !important; }
body.term-ages-10-plus .woocommerce-products-header { background: linear-gradient(120deg, #0f766e 0%, #2a9d8f 60%, #34d399 100%) !important; }

/* ─────────────────────────────────────────────────────────────────────────────
   NAV "SHOP BY AGE" DROPDOWN — style sub-menu if WP nav menu has it
   ───────────────────────────────────────────────────────────────────────────── */

.gg-primary-nav .menu > li > ul.sub-menu {
  display: none !important;
  position: absolute !important;
  top: calc(100% + 8px) !important;
  left: 0 !important;
  min-width: 200px !important;
  background: #fff !important;
  border: 1.5px solid var(--gg-border-light) !important;
  border-radius: 12px !important;
  padding: 8px 0 !important;
  box-shadow: var(--gg-shadow-md) !important;
  z-index: 9999 !important;
  list-style: none !important;
}

.gg-primary-nav .menu > li:hover > ul.sub-menu,
.gg-primary-nav .menu > li:focus-within > ul.sub-menu {
  display: block !important;
}

.gg-primary-nav .menu > li > ul.sub-menu li {
  margin: 0 !important;
  padding: 0 !important;
}

.gg-primary-nav .menu > li > ul.sub-menu li a {
  display: block !important;
  padding: 10px 18px !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  color: var(--gg-navy) !important;
  text-decoration: none !important;
  border-radius: 0 !important;
  min-height: 0 !important;
  text-transform: none !important;
  letter-spacing: 0 !important;
  transition: background 0.12s ease, color 0.12s ease !important;
}

.gg-primary-nav .menu > li > ul.sub-menu li a:hover {
  background: var(--gg-orange-light) !important;
  color: var(--gg-orange) !important;
}

/* Parent item that has a sub-menu: show a small chevron */
.gg-primary-nav .menu > li.menu-item-has-children > a::after {
  content: " ▾" !important;
  font-size: 10px !important;
  opacity: 0.6 !important;
  margin-left: 2px !important;
}

/* ─────────────────────────────────────────────────────────────────────────────
   MOBILE NAV — sub-menu items (age groups under "Shop by Age")
   ───────────────────────────────────────────────────────────────────────────── */

.gg-mobile-nav__menu .menu > li > ul.sub-menu {
  display: block !important;
  list-style: none !important;
  padding: 0 !important;
  margin: 0 !important;
  background: var(--gg-surface) !important;
  border-left: 3px solid var(--gg-orange) !important;
}

.gg-mobile-nav__menu .menu > li > ul.sub-menu li a {
  display: block !important;
  padding: 10px 28px !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  color: var(--gg-muted) !important;
  text-decoration: none !important;
  border-bottom: 1px solid var(--gg-border-light) !important;
}

.gg-mobile-nav__menu .menu > li > ul.sub-menu li a:hover {
  color: var(--gg-orange) !important;
  background: var(--gg-orange-light) !important;
}

/* --- end of GG PATCH v14 --- */

/* ============================================================
   GG PATCH v15 — Fix double heading + account registration UI
   ============================================================ */

/* 1. Hide the WooCommerce/WordPress native <h1> page title on pages
      where our CSS ::before banner already shows the title.
      Affects: Cart, Checkout, My Account, Order Received, Shop */
body.woocommerce-cart .entry-header,
body.woocommerce-checkout .entry-header,
body.woocommerce-account .entry-header,
body.woocommerce-order-received .entry-header,
body.woocommerce .entry-header {
  display: none !important;
}

/* 2. My Account — Login / Register tabs look polished */
.woocommerce-account .woocommerce-MyAccount-navigation {
  width: 220px;
  min-width: 180px;
  flex-shrink: 0;
}

/* Registration column — make it feel equal to the login column */
.woocommerce-account:not(.woocommerce-logged-in) .woocommerce > .woocommerce-notices-wrapper + * {
  display: flex;
  gap: 32px;
  flex-wrap: wrap;
  align-items: flex-start;
}

/* Login + Register two-column layout on /my-account/ when logged out */
body.woocommerce-account:not([class*="woocommerce-myaccount-"]) .woocommerce > form.woocommerce-form-login,
body.woocommerce-account:not([class*="woocommerce-myaccount-"]) .woocommerce > .u-column1,
body.woocommerce-account:not([class*="woocommerce-myaccount-"]) .woocommerce > .u-column2 {
  flex: 1 1 320px;
  background: #fff;
  border: 1px solid var(--gg-border-light);
  border-radius: 12px;
  padding: 32px;
  box-shadow: var(--gg-shadow-sm);
}

/* Column headings */
body.woocommerce-account .u-column1 h2,
body.woocommerce-account .u-column2 h2 {
  font-family: var(--gg-font-heading);
  font-size: 1.4rem;
  font-weight: 800;
  color: var(--gg-navy);
  border-left: 4px solid var(--gg-orange);
  padding-left: 12px;
  margin-bottom: 24px;
}

/* Register column highlight */
body.woocommerce-account .u-column2 {
  border-top: 3px solid var(--gg-orange) !important;
}

/* "Already have an account?" helper text */
body.woocommerce-account .woocommerce-privacy-policy-text {
  font-size: 12px;
  color: var(--gg-muted);
  margin-top: 12px;
  line-height: 1.5;
}

/* Register button — make it stand out */
body.woocommerce-account .u-column2 .woocommerce-Button,
body.woocommerce-account .u-column2 input[type="submit"] {
  background: var(--gg-orange) !important;
  color: #fff !important;
  border: none !important;
  border-radius: 8px !important;
  font-weight: 700 !important;
  padding: 12px 28px !important;
  width: 100% !important;
  font-size: 15px !important;
  cursor: pointer !important;
  transition: background 0.2s ease !important;
}
body.woocommerce-account .u-column2 .woocommerce-Button:hover,
body.woocommerce-account .u-column2 input[type="submit"]:hover {
  background: #e05a20 !important;
}

/* Wrap the two columns inside #primary for proper spacing */
body.woocommerce-account:not([class*="woocommerce-myaccount"]) #primary .woocommerce {
  display: block;
  max-width: 900px;
  margin: 0 auto;
  padding: 48px 24px;
}
body.woocommerce-account:not([class*="woocommerce-myaccount"]) #primary .woocommerce > .col2-set {
  display: flex;
  gap: 32px;
  flex-wrap: wrap;
}
body.woocommerce-account:not([class*="woocommerce-myaccount"]) #primary .woocommerce > .col2-set .col-1,
body.woocommerce-account:not([class*="woocommerce-myaccount"]) #primary .woocommerce > .col2-set .col-2 {
  flex: 1 1 320px;
  background: #fff;
  border: 1px solid var(--gg-border-light);
  border-radius: 12px;
  padding: 32px;
  box-shadow: var(--gg-shadow-sm);
}
body.woocommerce-account:not([class*="woocommerce-myaccount"]) #primary .woocommerce > .col2-set .col-2 {
  border-top: 3px solid var(--gg-orange);
}

/* --- end of GG PATCH v15 --- */

/* =============================================================================
   GG PATCH v16 — Coupon Code · Checkout Progress Stepper · Cart Empty State
                 · Product Gallery Mobile · Wishlist / Share Buttons Polish
   March 2026
   ============================================================================= */

/* ─────────────────────────────────────────────────────────────────────────────
   1.  COUPON CODE FIELD — Prominent, easy-to-use on both Cart and Checkout
   ───────────────────────────────────────────────────────────────────────────── */

/* Cart coupon row */
.woocommerce-cart-form .coupon {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  flex-wrap: wrap !important;
  padding: 20px 24px !important;
  background: linear-gradient(135deg, #fffbf5 0%, #fff8f0 100%) !important;
  border: 1.5px dashed rgba(255, 107, 53, 0.35) !important;
  border-radius: 14px !important;
  margin-bottom: 20px !important;
}

/* "Have a coupon?" label */
.woocommerce-cart-form .coupon label {
  font-family: var(--gg-font-heading) !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  color: var(--gg-navy) !important;
  white-space: nowrap !important;
  min-width: 130px !important;
}

/* Coupon code input */
.woocommerce-cart-form .coupon #coupon_code,
input#coupon_code {
  flex: 1 1 180px !important;
  padding: 11px 16px !important;
  border: 1.5px solid #fbbf24 !important;
  border-radius: 10px !important;
  background: #fff !important;
  font-size: 14px !important;
  font-family: var(--gg-font-body) !important;
  color: var(--gg-navy) !important;
  letter-spacing: 0.03em !important;
  transition: border-color 0.15s ease, box-shadow 0.15s ease !important;
  min-width: 140px !important;
  max-width: 260px !important;
}

.woocommerce-cart-form .coupon #coupon_code:focus,
input#coupon_code:focus {
  outline: none !important;
  border-color: var(--gg-orange) !important;
  box-shadow: 0 0 0 3px rgba(255, 107, 53, 0.12) !important;
}

.woocommerce-cart-form .coupon #coupon_code::placeholder {
  color: #94a3b8 !important;
  font-style: italic !important;
}

/* "Apply Coupon" button */
.woocommerce-cart-form .coupon .button,
button[name="apply_coupon"] {
  padding: 11px 22px !important;
  background: var(--gg-orange) !important;
  color: #fff !important;
  border: none !important;
  border-radius: 10px !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  letter-spacing: 0.04em !important;
  text-transform: uppercase !important;
  cursor: pointer !important;
  white-space: nowrap !important;
  box-shadow: 0 3px 10px rgba(255, 107, 53, 0.28) !important;
  transition: background 0.18s ease, transform 0.15s ease !important;
}

.woocommerce-cart-form .coupon .button:hover,
button[name="apply_coupon"]:hover {
  background: #e5571f !important;
  transform: translateY(-1px) !important;
  color: #fff !important;
}

/* Applied coupon notice */
.woocommerce-remove-coupon {
  display: inline-flex !important;
  align-items: center !important;
  gap: 4px !important;
  font-size: 12px !important;
  color: #6b7280 !important;
  margin-left: 8px !important;
  text-decoration: none !important;
  background: #f1f5f9 !important;
  padding: 3px 10px !important;
  border-radius: 999px !important;
  transition: background 0.15s ease !important;
}

.woocommerce-remove-coupon:hover {
  background: #fee2e2 !important;
  color: #dc2626 !important;
}

/* Checkout page coupon toggle */
.woocommerce-form-coupon-toggle {
  padding: 14px 20px !important;
  background: #fffbf5 !important;
  border: 1.5px dashed rgba(255, 107, 53, 0.30) !important;
  border-radius: 12px !important;
  margin-bottom: 24px !important;
}

.woocommerce-form-coupon-toggle .woocommerce-info {
  background: transparent !important;
  border: none !important;
  padding: 0 !important;
  font-size: 14px !important;
  color: var(--gg-navy) !important;
  font-weight: 500 !important;
  margin: 0 !important;
}

.woocommerce-form-coupon-toggle .woocommerce-info a.showcoupon {
  color: var(--gg-orange) !important;
  font-weight: 700 !important;
  text-decoration: underline !important;
  text-underline-offset: 2px !important;
}

/* Checkout coupon form (shown after clicking "Click here") */
.checkout_coupon.woocommerce-form-coupon {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  flex-wrap: wrap !important;
  padding: 20px !important;
  background: #fff !important;
  border: 1.5px solid var(--gg-border-light) !important;
  border-radius: 12px !important;
  margin-bottom: 24px !important;
}

.checkout_coupon .form-row {
  flex: 1 1 180px !important;
  margin: 0 !important;
  padding: 0 !important;
}

.checkout_coupon .form-row input {
  width: 100% !important;
  padding: 11px 16px !important;
  border: 1.5px solid #fbbf24 !important;
  border-radius: 10px !important;
  font-size: 14px !important;
  letter-spacing: 0.03em !important;
}

.checkout_coupon .form-row input:focus {
  border-color: var(--gg-orange) !important;
  box-shadow: 0 0 0 3px rgba(255, 107, 53, 0.12) !important;
}

.checkout_coupon .form-row-last .button {
  width: 100% !important;
  padding: 11px 22px !important;
  background: var(--gg-orange) !important;
  color: #fff !important;
  border: none !important;
  border-radius: 10px !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  cursor: pointer !important;
}

/* ─────────────────────────────────────────────────────────────────────────────
   2.  CHECKOUT PROGRESS STEPPER — Visual 3-step indicator
       Replaces the plain text "::after" text from v12 with a real visual bar.
   ───────────────────────────────────────────────────────────────────────────── */

/* Overwrite the old plain-text ::after */
body.woocommerce-checkout #primary::after {
  content: "" !important;
  display: none !important;
}

/* Insert a proper stepper before the checkout form */
body.woocommerce-checkout #primary .woocommerce::before {
  content: "" !important;
  display: block !important;
  text-align: center !important;
  padding: 0 0 28px 0 !important;
  background: none !important;
  position: static !important;
  width: auto !important;
  left: auto !important;
  margin: 0 !important;
}

/* The stepper is rendered as a decorative progress bar above the form.
   We use a custom element approach via CSS-only: a horizontal track with 3 labeled nodes. */
.gg-checkout-steps {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0;
  padding: 0 0 32px 0;
  max-width: 480px;
  margin: 0 auto;
  position: relative;
}

.gg-checkout-steps__step {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  flex: 1;
  position: relative;
  z-index: 1;
}

/* Connecting line between steps */
.gg-checkout-steps__step:not(:last-child)::after {
  content: "";
  position: absolute;
  top: 18px;
  left: 50%;
  right: -50%;
  height: 2px;
  background: #e5e7eb;
  z-index: 0;
  transform: none;
}

/* Completed line colour */
.gg-checkout-steps__step.is-done:not(:last-child)::after {
  background: var(--gg-orange);
}

/* Step circle */
.gg-checkout-steps__circle {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 2.5px solid #e5e7eb;
  background: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--gg-font-heading);
  font-size: 14px;
  font-weight: 800;
  color: #94a3b8;
  position: relative;
  z-index: 2;
  transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}

.gg-checkout-steps__step.is-done .gg-checkout-steps__circle {
  background: var(--gg-orange);
  border-color: var(--gg-orange);
  color: #fff;
}

.gg-checkout-steps__step.is-active .gg-checkout-steps__circle {
  background: var(--gg-navy);
  border-color: var(--gg-navy);
  color: #fff;
  box-shadow: 0 0 0 4px rgba(30, 58, 95, 0.12);
}

/* Step label */
.gg-checkout-steps__label {
  font-family: var(--gg-font-heading);
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: #94a3b8;
  text-align: center;
}

.gg-checkout-steps__step.is-done .gg-checkout-steps__label {
  color: var(--gg-orange);
}

.gg-checkout-steps__step.is-active .gg-checkout-steps__label {
  color: var(--gg-navy);
}

/* ─────────────────────────────────────────────────────────────────────────────
   3.  CART EMPTY STATE — Friendly, on-brand empty cart message
   ───────────────────────────────────────────────────────────────────────────── */

.woocommerce-cart .cart-empty,
.woocommerce-cart p.cart-empty,
.wc-empty-cart-message {
  text-align: center !important;
  padding: 60px 24px 40px !important;
  font-family: var(--gg-font-heading) !important;
  font-size: 20px !important;
  font-weight: 700 !important;
  color: var(--gg-navy) !important;
}

.woocommerce-cart .return-to-shop {
  text-align: center !important;
  padding-bottom: 40px !important;
}

.woocommerce-cart .return-to-shop .button,
a.wc-backward,
.woocommerce-cart a.button.wc-backward {
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  padding: 14px 32px !important;
  background: var(--gg-navy) !important;
  color: #fff !important;
  border-radius: 999px !important;
  font-size: 15px !important;
  font-weight: 700 !important;
  text-decoration: none !important;
  border: none !important;
  box-shadow: 0 4px 14px rgba(30, 58, 95, 0.22) !important;
  transition: background 0.18s ease, transform 0.15s ease !important;
}

.woocommerce-cart .return-to-shop .button:hover,
a.wc-backward:hover {
  background: var(--gg-orange) !important;
  transform: translateY(-2px) !important;
  color: #fff !important;
}

/* ─────────────────────────────────────────────────────────────────────────────
   4.  PRODUCT GALLERY — Mobile improvements
       On phones, the gallery thumbnails row scrolls horizontally;
       the main image fills the screen width cleanly.
   ───────────────────────────────────────────────────────────────────────────── */

@media (max-width: 767px) {

  /* Full-width gallery on mobile */
  body.single-product div.product .woocommerce-product-gallery {
    flex: 0 0 100% !important;
    max-width: 100% !important;
    margin-bottom: 24px !important;
  }

  body.single-product div.product .summary.entry-summary {
    flex: 0 0 100% !important;
    width: 100% !important;
  }

  /* Main gallery image — fill mobile width */
  .woocommerce-product-gallery .flex-viewport,
  .woocommerce-product-gallery ol.flex-control-thumbs {
    width: 100% !important;
  }

  /* Thumbnails: horizontal scroll row */
  .woocommerce-product-gallery ol.flex-control-thumbs {
    display: flex !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
    gap: 8px !important;
    padding: 8px 0 !important;
    list-style: none !important;
    margin: 0 !important;
  }

  .woocommerce-product-gallery ol.flex-control-thumbs li {
    flex: 0 0 70px !important;
    margin: 0 !important;
  }

  .woocommerce-product-gallery ol.flex-control-thumbs li img {
    width: 70px !important;
    height: 70px !important;
    object-fit: contain !important;
    border-radius: 8px !important;
    border: 2px solid var(--gg-border-light) !important;
    background: var(--gg-surface) !important;
    cursor: pointer !important;
  }

  .woocommerce-product-gallery ol.flex-control-thumbs li img.flex-active {
    border-color: var(--gg-orange) !important;
    box-shadow: 0 0 0 2px rgba(255, 107, 53, 0.25) !important;
  }

  /* Single product layout — stack */
  body.single-product div.product {
    flex-direction: column !important;
    gap: 0 !important;
    padding: 20px 0 !important;
  }

  /* Single product #primary: tighter padding on mobile */
  body.single-product #primary {
    padding: 0 16px !important;
  }
}

/* ─────────────────────────────────────────────────────────────────────────────
   5.  STICKY ADD-TO-CART BAR — Appears at bottom on single product (mobile)
       A subtle bar that shows the product price + ATC button when the native
       button has scrolled off-screen on phones.
   ───────────────────────────────────────────────────────────────────────────── */

/* The sticky bar is injected by JS (gg-header.js) — this is just its style */
#gg-sticky-atc {
  position: fixed !important;
  bottom: var(--gg-discount-bar-height, 48px) !important;
  left: 0 !important;
  right: 0 !important;
  z-index: 9990 !important;
  background: #fff !important;
  border-top: 1.5px solid var(--gg-border-light) !important;
  box-shadow: 0 -4px 20px rgba(15, 23, 42, 0.10) !important;
  padding: 12px 20px !important;
  display: none; /* shown by JS when native ATC scrolled off */
  align-items: center !important;
  justify-content: space-between !important;
  gap: 16px !important;
}

#gg-sticky-atc.is-visible {
  display: flex !important;
}

#gg-sticky-atc .gg-sticky-atc__title {
  font-family: var(--gg-font-heading) !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  color: var(--gg-navy) !important;
  line-height: 1.3 !important;
  flex: 1 1 0 !important;
  min-width: 0 !important;
  overflow: hidden !important;
  white-space: nowrap !important;
  text-overflow: ellipsis !important;
}

#gg-sticky-atc .gg-sticky-atc__price {
  font-family: var(--gg-font-heading) !important;
  font-size: 17px !important;
  font-weight: 900 !important;
  color: var(--gg-orange) !important;
  white-space: nowrap !important;
}

#gg-sticky-atc .gg-sticky-atc__btn {
  display: inline-flex !important;
  align-items: center !important;
  padding: 10px 22px !important;
  background: var(--gg-orange) !important;
  color: #fff !important;
  border: none !important;
  border-radius: 999px !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.04em !important;
  cursor: pointer !important;
  white-space: nowrap !important;
  text-decoration: none !important;
  box-shadow: 0 3px 10px rgba(255, 107, 53, 0.28) !important;
  transition: background 0.18s ease !important;
}

#gg-sticky-atc .gg-sticky-atc__btn:hover {
  background: #e5571f !important;
  color: #fff !important;
}

/* Only show on mobile/tablet */
@media (min-width: 1025px) {
  #gg-sticky-atc { display: none !important; }
}

/* ─────────────────────────────────────────────────────────────────────────────
   6.  "YOU MAY ALSO LIKE" ENHANCEMENTS
       The related products row gets a tinted background section,
       a decorative heading, and consistent card sizing.
   ───────────────────────────────────────────────────────────────────────────── */

body.single-product .related.products {
  background: var(--gg-surface) !important;
  padding: 36px 32px !important;
  border-radius: 20px !important;
  margin: 36px 0 !important;
}

body.single-product .related > h2 {
  position: relative !important;
  display: inline-block !important;
  padding-bottom: 0 !important;
  margin-bottom: 28px !important;
}

/* Constrain related product cards to 4 across on desktop */
body.single-product .related ul.products {
  display: grid !important;
  grid-template-columns: repeat(4, 1fr) !important;
  gap: 20px !important;
}

@media (max-width: 1024px) {
  body.single-product .related ul.products {
    grid-template-columns: repeat(3, 1fr) !important;
  }
}

@media (max-width: 767px) {
  body.single-product .related.products {
    padding: 24px 16px !important;
  }

  body.single-product .related ul.products {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 12px !important;
  }
}

/* --- end of GG PATCH v16 --- */

/* =============================================================================
   GG PATCH v17 — Mini-Cart Drawer · Learning Outcomes · 404 · Search Results
                 · Checkout Stepper Number Labels · Product Badge Refinements
   March 2026
   ============================================================================= */

/* ─────────────────────────────────────────────────────────────────────────────
   1.  CHECKOUT STEPS — Numbered circles (1 / 2 / 3) using CSS counters
       The PHP renders empty .gg-checkout-steps__circle divs;
       we use a CSS counter to fill them with numbers.
   ───────────────────────────────────────────────────────────────────────────── */

.gg-checkout-steps {
  counter-reset: gg-step;
}

.gg-checkout-steps__step .gg-checkout-steps__circle::before {
  counter-increment: gg-step;
  content: counter(gg-step);
  font-size: 14px;
  font-weight: 800;
  font-family: var(--gg-font-heading);
}

/* When the circle already has a ✓ text child (order-received), hide the counter */
.gg-checkout-steps__step.is-done .gg-checkout-steps__circle {
  font-size: 16px;
  line-height: 1;
}

.gg-checkout-steps__step.is-done .gg-checkout-steps__circle::before {
  content: "✓";
  font-size: 16px;
}

/* Wrapper margins */
.gg-checkout-steps {
  margin: 0 0 28px !important;
}

/* ─────────────────────────────────────────────────────────────────────────────
   2.  MINI-CART DRAWER — Slide-in panel from the right
       Triggered by clicking the cart pill; JS adds .is-open to #gg-mini-cart.
   ───────────────────────────────────────────────────────────────────────────── */

#gg-mini-cart {
  position: fixed;
  inset: 0;
  z-index: 99998;
  pointer-events: none;
}

#gg-mini-cart.is-open {
  pointer-events: auto;
}

/* Semi-transparent backdrop */
.gg-mini-cart__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(15, 23, 42, 0.45);
  opacity: 0;
  transition: opacity 0.28s ease;
  cursor: pointer;
}

#gg-mini-cart.is-open .gg-mini-cart__backdrop {
  opacity: 1;
}

/* The slide-in panel */
.gg-mini-cart__panel {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: min(400px, 92vw);
  background: #fff;
  display: flex;
  flex-direction: column;
  box-shadow: -8px 0 32px rgba(15, 23, 42, 0.14);
  transform: translateX(100%);
  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

#gg-mini-cart.is-open .gg-mini-cart__panel {
  transform: translateX(0);
}

/* Panel header */
.gg-mini-cart__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px 20px 16px;
  border-bottom: 1.5px solid var(--gg-border-light);
  flex-shrink: 0;
}

.gg-mini-cart__title {
  font-family: var(--gg-font-heading) !important;
  font-size: 18px !important;
  font-weight: 800 !important;
  color: var(--gg-navy) !important;
  margin: 0 !important;
}

.gg-mini-cart__close {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 8px;
  border: 1.5px solid var(--gg-border-light);
  background: transparent;
  cursor: pointer;
  color: var(--gg-navy);
  transition: background 0.15s ease;
}

.gg-mini-cart__close:hover {
  background: var(--gg-surface);
}

.gg-mini-cart__close svg {
  width: 16px;
  height: 16px;
  stroke: currentColor;
  stroke-width: 2;
  fill: none;
}

/* Scrollable body */
.gg-mini-cart__body {
  flex: 1 1 0;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding: 0;
}

/* WooCommerce mini-cart inner */
.gg-mini-cart__body .woocommerce-mini-cart {
  padding: 0 !important;
  margin: 0 !important;
  list-style: none !important;
}

/* Each mini-cart item */
.gg-mini-cart__body .woocommerce-mini-cart-item {
  display: flex !important;
  align-items: center !important;
  gap: 14px !important;
  padding: 16px 20px !important;
  border-bottom: 1px solid var(--gg-border-light) !important;
}

/* Product thumbnail in mini-cart */
.gg-mini-cart__body .woocommerce-mini-cart-item img {
  width: 64px !important;
  height: 64px !important;
  object-fit: contain !important;
  border-radius: 8px !important;
  background: var(--gg-surface) !important;
  flex-shrink: 0 !important;
  border: 1px solid var(--gg-border-light) !important;
}

/* Product name */
.gg-mini-cart__body .woocommerce-mini-cart-item .remove_from_cart_button {
  display: inline-flex !important;
  width: 22px !important;
  height: 22px !important;
  align-items: center !important;
  justify-content: center !important;
  border-radius: 50% !important;
  background: #fee2e2 !important;
  color: #dc2626 !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  text-decoration: none !important;
  line-height: 1 !important;
  flex-shrink: 0 !important;
  transition: background 0.15s ease !important;
}

.gg-mini-cart__body .woocommerce-mini-cart-item .remove_from_cart_button:hover {
  background: #dc2626 !important;
  color: #fff !important;
}

/* Item name link */
.gg-mini-cart__body .woocommerce-mini-cart-item a:not(.remove_from_cart_button) {
  font-size: 14px !important;
  font-weight: 600 !important;
  color: var(--gg-navy) !important;
  text-decoration: none !important;
  line-height: 1.35 !important;
}

.gg-mini-cart__body .woocommerce-mini-cart-item a:not(.remove_from_cart_button):hover {
  color: var(--gg-orange) !important;
}

/* Quantity × price */
.gg-mini-cart__body .woocommerce-mini-cart-item .quantity {
  display: block !important;
  font-size: 13px !important;
  color: var(--gg-muted) !important;
  margin-top: 3px !important;
}

.gg-mini-cart__body .woocommerce-mini-cart-item .quantity .woocommerce-Price-amount {
  font-weight: 700 !important;
  color: var(--gg-orange) !important;
}

/* Mini-cart total row */
.gg-mini-cart__body .woocommerce-mini-cart__total {
  padding: 16px 20px !important;
  border-top: 2px solid var(--gg-border-light) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  font-size: 16px !important;
  font-weight: 700 !important;
  color: var(--gg-navy) !important;
}

.gg-mini-cart__body .woocommerce-mini-cart__total .woocommerce-Price-amount {
  color: var(--gg-orange) !important;
  font-family: var(--gg-font-heading) !important;
  font-weight: 900 !important;
  font-size: 18px !important;
}

/* Mini-cart CTA buttons */
.gg-mini-cart__body .woocommerce-mini-cart__buttons {
  padding: 16px 20px 24px !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 10px !important;
}

.gg-mini-cart__body .woocommerce-mini-cart__buttons a.button {
  display: block !important;
  width: 100% !important;
  text-align: center !important;
  padding: 13px 20px !important;
  border-radius: 10px !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  text-decoration: none !important;
  transition: background 0.18s ease, transform 0.15s ease !important;
}

/* View Cart */
.gg-mini-cart__body .woocommerce-mini-cart__buttons a.button.wc-forward {
  background: var(--gg-surface) !important;
  color: var(--gg-navy) !important;
  border: 1.5px solid var(--gg-border-light) !important;
}

.gg-mini-cart__body .woocommerce-mini-cart__buttons a.button.wc-forward:hover {
  background: #e5e9f0 !important;
}

/* Checkout */
.gg-mini-cart__body .woocommerce-mini-cart__buttons a.checkout.button {
  background: var(--gg-orange) !important;
  color: #fff !important;
  border: none !important;
  box-shadow: 0 4px 14px rgba(255, 107, 53, 0.30) !important;
}

.gg-mini-cart__body .woocommerce-mini-cart__buttons a.checkout.button:hover {
  background: #e5571f !important;
  transform: translateY(-1px) !important;
  color: #fff !important;
}

/* Empty cart state in drawer */
.gg-mini-cart__body .woocommerce-mini-cart__empty-message {
  text-align: center !important;
  padding: 48px 24px !important;
  color: var(--gg-muted) !important;
  font-size: 15px !important;
}

/* ─────────────────────────────────────────────────────────────────────────────
   3.  LEARNING OUTCOMES CALLOUT — Product page "What Your Child Will Learn"
       Rendered by gg_render_learning_outcomes() in functions.php.
   ───────────────────────────────────────────────────────────────────────────── */

.gg-learning-outcomes {
  background: linear-gradient(135deg, #f0f9ff 0%, #e0f2fe 100%);
  border: 1.5px solid #bae6fd;
  border-left: 4px solid var(--gg-blue, #1b75bb);
  border-radius: 14px;
  padding: 20px 24px;
  margin: 20px 0;
}

.gg-learning-outcomes__heading {
  font-family: var(--gg-font-heading) !important;
  font-size: 15px !important;
  font-weight: 800 !important;
  color: var(--gg-navy) !important;
  margin: 0 0 12px !important;
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
}

.gg-learning-outcomes__list {
  list-style: none !important;
  margin: 0 !important;
  padding: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 6px !important;
}

.gg-learning-outcomes__list li {
  display: flex !important;
  align-items: flex-start !important;
  gap: 8px !important;
  font-size: 14px !important;
  color: #1e3a5f !important;
  line-height: 1.55 !important;
}

.gg-learning-outcomes__list li::before {
  content: "✓";
  display: inline-flex;
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: #1b75bb;
  color: #fff;
  font-size: 11px;
  font-weight: 800;
  margin-top: 1px;
}

/* ─────────────────────────────────────────────────────────────────────────────
   4.  404 PAGE — Friendly branded error page
   ───────────────────────────────────────────────────────────────────────────── */

body.error404 #primary {
  text-align: center !important;
  padding: 80px 24px !important;
}

body.error404 .page-content {
  max-width: 540px;
  margin: 0 auto;
}

body.error404 .page-header .page-title {
  font-family: var(--gg-font-heading);
  font-size: clamp(64px, 12vw, 120px);
  font-weight: 900;
  color: var(--gg-navy);
  line-height: 1;
  letter-spacing: -0.04em;
  margin-bottom: 8px;
}

body.error404 .page-content p {
  font-size: 17px;
  color: #4b5563;
  margin-bottom: 28px;
  line-height: 1.7;
}

body.error404 .page-content .search-form {
  display: flex;
  gap: 8px;
  justify-content: center;
  margin-bottom: 24px;
  max-width: 400px;
  margin-left: auto;
  margin-right: auto;
}

body.error404 .page-content .search-field {
  flex: 1;
  padding: 12px 16px;
  border: 1.5px solid var(--gg-border-light);
  border-radius: 10px;
  font-size: 14px;
  color: var(--gg-navy);
}

body.error404 .page-content .search-submit {
  padding: 12px 20px;
  background: var(--gg-orange);
  color: #fff;
  border: none;
  border-radius: 10px;
  font-weight: 700;
  font-size: 14px;
  cursor: pointer;
  transition: background 0.18s ease;
}

body.error404 .page-content .search-submit:hover {
  background: #e5571f;
}

body.error404 .page-content a.button,
body.error404 .page-content a[class*="button"] {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 13px 28px;
  background: var(--gg-navy);
  color: #fff;
  border-radius: 999px;
  font-size: 15px;
  font-weight: 700;
  text-decoration: none;
  box-shadow: 0 4px 14px rgba(30, 58, 95, 0.22);
  transition: background 0.18s ease, transform 0.15s ease;
}

body.error404 .page-content a.button:hover {
  background: var(--gg-orange);
  transform: translateY(-2px);
  color: #fff;
}

/* ─────────────────────────────────────────────────────────────────────────────
   5.  SEARCH RESULTS PAGE — Consistent banner + product grid
   ───────────────────────────────────────────────────────────────────────────── */

body.search-results #primary::before,
body.search-no-results #primary::before {
  content: attr(data-search-heading);
  display: block !important;
  position: relative !important;
  left: 50% !important;
  width: 100vw !important;
  margin-left: -50vw !important;
  margin-bottom: 28px !important;
  padding: 36px 48px !important;
  background: var(--gg-page-banner-bg) !important;
  min-height: 100px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  text-align: center !important;
  color: #fff !important;
  font-family: var(--gg-font-heading) !important;
  font-size: 28px !important;
  font-weight: 900 !important;
  letter-spacing: -0.02em !important;
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.18) !important;
}

/* Fallback label when data attribute not used */
body.search-results #primary::before {
  content: "Search Results";
}

body.search-no-results #primary::before {
  content: "No Results Found";
}

/* Search page post list */
body.search-results .search-results article {
  background: #fff;
  border: 1.5px solid var(--gg-border-light);
  border-radius: 14px;
  padding: 24px;
  margin-bottom: 20px;
  transition: box-shadow 0.2s ease;
}

body.search-results .search-results article:hover {
  box-shadow: var(--gg-shadow-md);
}

body.search-results .search-results .entry-title a {
  font-family: var(--gg-font-heading);
  font-size: 18px;
  font-weight: 800;
  color: var(--gg-navy);
  text-decoration: none;
}

body.search-results .search-results .entry-title a:hover {
  color: var(--gg-orange);
}

/* ─────────────────────────────────────────────────────────────────────────────
   6.  PRODUCT BADGE REFINEMENTS
       The badge wrapper needs `position: relative` on the product image
       wrapper, not the card itself (since the card is `overflow: visible`).
   ───────────────────────────────────────────────────────────────────────────── */

ul.products li.product .woocommerce-loop-product__link {
  position: relative !important;
  display: block !important;
}

.gg-card-badges-wrapper {
  position: absolute !important;
  top: 8px !important;
  left: 8px !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 4px !important;
  z-index: 3 !important;
  pointer-events: none !important;
}

.gg-badge {
  display: inline-flex !important;
  align-items: center !important;
  padding: 3px 10px !important;
  border-radius: 999px !important;
  font-size: 10.5px !important;
  font-weight: 800 !important;
  letter-spacing: 0.05em !important;
  text-transform: uppercase !important;
  line-height: 1.4 !important;
  white-space: nowrap !important;
}

.gg-badge-bestseller {
  background: #fef3c7 !important;
  color: #92400e !important;
  border: 1px solid #fcd34d !important;
}

.gg-badge-new {
  background: #d1fae5 !important;
  color: #065f46 !important;
  border: 1px solid #6ee7b7 !important;
}

.gg-badge-featured {
  background: #ede9fe !important;
  color: #5b21b6 !important;
  border: 1px solid #c4b5fd !important;
}

.gg-badge-age {
  display: inline-flex !important;
  align-items: center !important;
  padding: 3px 10px !important;
  border-radius: 999px !important;
  background: rgba(27, 58, 95, 0.85) !important;
  color: #fff !important;
  font-size: 10.5px !important;
  font-weight: 700 !important;
  letter-spacing: 0.04em !important;
  backdrop-filter: blur(4px) !important;
  white-space: nowrap !important;
}

/* ─────────────────────────────────────────────────────────────────────────────
   7.  MOBILE: keep mini-cart panel full-width on very small screens
   ───────────────────────────────────────────────────────────────────────────── */

@media (max-width: 479px) {
  .gg-mini-cart__panel {
    width: 100vw !important;
  }
}

/* --- end of GG PATCH v17 --- */

/* =============================================================================
   GG PATCH v18 — My Account: Address Cards · Edit-Address Form · Mobile Nav
                 · Account Details Form · Downloads tab safety-net CSS
   March 2026
   ============================================================================= */

/* ─────────────────────────────────────────────────────────────────────────────
   1.  ADDRESS DISPLAY CARDS
       Shown on /my-account/ dashboard AND /my-account/edit-address/
       WooCommerce HTML: .woocommerce-Addresses > .woocommerce-Address (×2)
       (also rendered as .col2-set.addresses > .col-1 / .col-2)
   ───────────────────────────────────────────────────────────────────────────── */

/* Two-column grid wrapper */
.woocommerce-MyAccount-content .woocommerce-Addresses,
.woocommerce-MyAccount-content .col2-set.addresses,
body.woocommerce-account .woocommerce-MyAccount-content .addresses {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 24px !important;
  margin: 0 !important;
}

/* Each address card */
.woocommerce-MyAccount-content .woocommerce-Address,
.woocommerce-MyAccount-content .woocommerce-column--billing-address,
.woocommerce-MyAccount-content .woocommerce-column--shipping-address,
.woocommerce-MyAccount-content .col2-set.addresses .col-1,
.woocommerce-MyAccount-content .col2-set.addresses .col-2 {
  background: #fff !important;
  border: 1.5px solid var(--gg-border-light) !important;
  border-radius: 16px !important;
  padding: 24px !important;
  box-shadow: var(--gg-shadow-xs) !important;
  display: flex !important;
  flex-direction: column !important;
}

/* Orange top-border accent on billing card */
.woocommerce-MyAccount-content .woocommerce-column--billing-address,
.woocommerce-MyAccount-content .col2-set.addresses .col-1 {
  border-top: 3px solid var(--gg-orange) !important;
}

/* Blue top-border accent on shipping card */
.woocommerce-MyAccount-content .woocommerce-column--shipping-address,
.woocommerce-MyAccount-content .col2-set.addresses .col-2 {
  border-top: 3px solid var(--gg-blue, #1b75bb) !important;
}

/* Card header row: heading + Edit link side by side */
.woocommerce-MyAccount-content .woocommerce-Address-title,
.woocommerce-MyAccount-content header.title {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 12px !important;
  border-bottom: 1.5px solid var(--gg-border-light) !important;
  padding-bottom: 12px !important;
  margin-bottom: 16px !important;
}

/* Card heading */
.woocommerce-MyAccount-content .woocommerce-Address-title h2,
.woocommerce-MyAccount-content header.title h2 {
  font-family: var(--gg-font-heading) !important;
  font-size: 14px !important;
  font-weight: 800 !important;
  color: var(--gg-navy) !important;
  margin: 0 !important;
  letter-spacing: 0.02em !important;
  text-transform: uppercase !important;
}

/* "Edit" link — small pill */
.woocommerce-MyAccount-content .woocommerce-Address-title a,
.woocommerce-MyAccount-content header.title a {
  display: inline-flex !important;
  align-items: center !important;
  gap: 4px !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  color: var(--gg-orange) !important;
  background: rgba(255, 107, 53, 0.09) !important;
  padding: 4px 12px !important;
  border-radius: 999px !important;
  text-decoration: none !important;
  white-space: nowrap !important;
  transition: background 0.15s ease, color 0.15s ease !important;
  flex-shrink: 0 !important;
}

.woocommerce-MyAccount-content .woocommerce-Address-title a::before,
.woocommerce-MyAccount-content header.title a::before {
  content: "✎ " !important;
  font-size: 11px !important;
}

.woocommerce-MyAccount-content .woocommerce-Address-title a:hover,
.woocommerce-MyAccount-content header.title a:hover {
  background: var(--gg-orange) !important;
  color: #fff !important;
}

/* The formatted address text */
.woocommerce-MyAccount-content address {
  font-style: normal !important;
  font-size: 14px !important;
  line-height: 1.85 !important;
  color: #374151 !important;
  flex: 1 !important;
}

/* "You have not set up this type of address yet" message */
.woocommerce-MyAccount-content .woocommerce-Address p,
.woocommerce-MyAccount-content .woocommerce-column p {
  font-size: 13px !important;
  color: var(--gg-muted) !important;
  font-style: italic !important;
  flex: 1 !important;
  margin: 0 !important;
}

/* ─────────────────────────────────────────────────────────────────────────────
   2.  EDIT-ADDRESS FORM
       /my-account/edit-address/billing/ and /shipping/
       WooCommerce wraps fields in .woocommerce-address-fields
   ───────────────────────────────────────────────────────────────────────────── */

/* Page heading for address edit pages */
body.woocommerce-account.woocommerce-edit-address .woocommerce-MyAccount-content > h3,
body.woocommerce-account.woocommerce-edit-address .woocommerce-MyAccount-content > h2 {
  font-family: var(--gg-font-heading) !important;
  font-size: 18px !important;
  font-weight: 800 !important;
  color: var(--gg-navy) !important;
  padding-bottom: 14px !important;
  border-bottom: 2px solid var(--gg-border-light) !important;
  margin-bottom: 24px !important;
}

/* Two-column grid for the field pairs */
.woocommerce-address-fields__field-wrapper {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 0 20px !important;
}

/* Full-width fields (Company, Address line 2, City, Postcode, Phone) */
.woocommerce-address-fields .form-row.form-row-wide,
.woocommerce-address-fields .form-row.address-field {
  grid-column: 1 / -1 !important;
}

/* Input and select styling — matches checkout */
.woocommerce-address-fields .form-row input[type="text"],
.woocommerce-address-fields .form-row input[type="email"],
.woocommerce-address-fields .form-row input[type="tel"],
.woocommerce-address-fields .form-row select {
  width: 100% !important;
  padding: 12px 16px !important;
  border: 1.5px solid #d0dae6 !important;
  border-radius: 10px !important;
  background: #fff !important;
  color: var(--gg-text, #1e3a5f) !important;
  font-size: 14px !important;
  font-family: var(--gg-font-body) !important;
  transition: border-color 0.15s ease, box-shadow 0.15s ease !important;
  appearance: none !important;
  -webkit-appearance: none !important;
}

.woocommerce-address-fields .form-row input:focus,
.woocommerce-address-fields .form-row select:focus {
  outline: none !important;
  border-color: var(--gg-blue, #1b75bb) !important;
  box-shadow: 0 0 0 3px rgba(27, 117, 187, 0.10) !important;
}

/* Field labels */
.woocommerce-address-fields .form-row label {
  display: block !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  color: var(--gg-navy) !important;
  margin-bottom: 6px !important;
}

/* Required star */
.woocommerce-address-fields .form-row label .required {
  color: #ef4444 !important;
  text-decoration: none !important;
}

/* "Save address" button */
.woocommerce-address-fields button[type="submit"],
.woocommerce-address-fields input[type="submit"],
.woocommerce-address-fields .button[type="submit"] {
  margin-top: 8px !important;
  padding: 13px 36px !important;
  background: var(--gg-orange) !important;
  color: #fff !important;
  border: none !important;
  border-radius: 999px !important;
  font-size: 15px !important;
  font-weight: 700 !important;
  letter-spacing: 0.02em !important;
  cursor: pointer !important;
  box-shadow: 0 4px 14px rgba(255, 107, 53, 0.28) !important;
  transition: background 0.18s ease, transform 0.15s ease !important;
}

.woocommerce-address-fields button[type="submit"]:hover,
.woocommerce-address-fields input[type="submit"]:hover {
  background: #e5571f !important;
  transform: translateY(-1px) !important;
}

/* ─────────────────────────────────────────────────────────────────────────────
   3.  ACCOUNT DETAILS FORM (Edit Account — name, email, password)
       /my-account/edit-account/
   ───────────────────────────────────────────────────────────────────────────── */

.woocommerce-EditAccountForm .form-row {
  margin-bottom: 18px !important;
}

.woocommerce-EditAccountForm .form-row label {
  display: block !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  color: var(--gg-navy) !important;
  margin-bottom: 6px !important;
}

.woocommerce-EditAccountForm .form-row input[type="text"],
.woocommerce-EditAccountForm .form-row input[type="email"],
.woocommerce-EditAccountForm .form-row input[type="password"] {
  width: 100% !important;
  max-width: 480px !important;
  padding: 12px 16px !important;
  border: 1.5px solid #d0dae6 !important;
  border-radius: 10px !important;
  background: #fff !important;
  font-size: 14px !important;
  font-family: var(--gg-font-body) !important;
  color: var(--gg-text, #1e3a5f) !important;
  transition: border-color 0.15s ease, box-shadow 0.15s ease !important;
}

.woocommerce-EditAccountForm .form-row input:focus {
  outline: none !important;
  border-color: var(--gg-blue, #1b75bb) !important;
  box-shadow: 0 0 0 3px rgba(27, 117, 187, 0.10) !important;
}

/* Password strength meter */
.woocommerce-EditAccountForm .woocommerce-password-strength {
  margin-top: 6px !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  padding: 4px 10px !important;
  border-radius: 6px !important;
  display: inline-block !important;
}

/* Password hint text */
.woocommerce-EditAccountForm .woocommerce-password-hint {
  font-size: 12px !important;
  color: var(--gg-muted) !important;
  margin-top: 4px !important;
  display: block !important;
}

/* "Change password" fieldset */
.woocommerce-EditAccountForm fieldset {
  border: 1.5px solid var(--gg-border-light) !important;
  border-radius: 12px !important;
  padding: 20px 24px !important;
  margin: 20px 0 !important;
}

.woocommerce-EditAccountForm fieldset legend {
  font-family: var(--gg-font-heading) !important;
  font-size: 13px !important;
  font-weight: 800 !important;
  color: var(--gg-navy) !important;
  text-transform: uppercase !important;
  letter-spacing: 0.06em !important;
  padding: 0 8px !important;
}

/* Save changes button */
.woocommerce-EditAccountForm button[type="submit"],
.woocommerce-EditAccountForm input[type="submit"] {
  padding: 13px 36px !important;
  background: var(--gg-orange) !important;
  color: #fff !important;
  border: none !important;
  border-radius: 999px !important;
  font-size: 15px !important;
  font-weight: 700 !important;
  cursor: pointer !important;
  box-shadow: 0 4px 14px rgba(255, 107, 53, 0.28) !important;
  transition: background 0.18s ease, transform 0.15s ease !important;
}

.woocommerce-EditAccountForm button[type="submit"]:hover {
  background: #e5571f !important;
  transform: translateY(-1px) !important;
}

/* ─────────────────────────────────────────────────────────────────────────────
   4.  DOWNLOADS TAB — CSS safety-net hide (PHP filter is primary removal)
       The woocommerce_account_menu_items filter in functions.php removes it
       server-side, but this covers edge cases where cache serves stale HTML.
   ───────────────────────────────────────────────────────────────────────────── */

.woocommerce-MyAccount-navigation-link--downloads {
  display: none !important;
}

/* ─────────────────────────────────────────────────────────────────────────────
   5.  MOBILE MY ACCOUNT — Full redesign of nav + content at ≤767px
   ───────────────────────────────────────────────────────────────────────────── */

@media (max-width: 767px) {

  /* ── Sidebar becomes a horizontal scrollable pill-tab strip ── */
  body.woocommerce-account .woocommerce-MyAccount-navigation {
    flex: 0 0 100% !important;
    max-width: 100% !important;
    border-radius: 12px !important;
    overflow: visible !important; /* allow the scroll container below to overflow */
    border: none !important;
    box-shadow: none !important;
    background: transparent !important;
  }

  body.woocommerce-account .woocommerce-MyAccount-navigation ul {
    display: flex !important;
    flex-direction: row !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
    gap: 8px !important;
    padding: 4px 0 12px !important;
    scrollbar-width: none !important; /* Firefox */
    -ms-overflow-style: none !important;
  }

  body.woocommerce-account .woocommerce-MyAccount-navigation ul::-webkit-scrollbar {
    display: none !important; /* Chrome/Safari */
  }

  body.woocommerce-account .woocommerce-MyAccount-navigation ul li {
    flex: 0 0 auto !important;
    border-bottom: none !important;
    margin: 0 !important;
  }

  body.woocommerce-account .woocommerce-MyAccount-navigation ul li a {
    display: inline-flex !important;
    align-items: center !important;
    padding: 8px 18px !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    border-radius: 999px !important;
    border: 1.5px solid var(--gg-border-light) !important;
    background: #fff !important;
    color: var(--gg-navy) !important;
    white-space: nowrap !important;
    transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease !important;
  }

  body.woocommerce-account .woocommerce-MyAccount-navigation ul li a:hover {
    background: var(--gg-orange-light) !important;
    border-color: var(--gg-orange) !important;
    color: var(--gg-orange) !important;
  }

  /* Active tab pill */
  body.woocommerce-account .woocommerce-MyAccount-navigation ul li.is-active a,
  body.woocommerce-account .woocommerce-MyAccount-navigation ul li.woocommerce-MyAccount-navigation-link--is-active a {
    background: var(--gg-orange) !important;
    border-color: var(--gg-orange) !important;
    color: #fff !important;
    font-weight: 700 !important;
    border-left: none !important;  /* remove the left-border from desktop active state */
    padding-left: 18px !important;
    box-shadow: 0 3px 10px rgba(255, 107, 53, 0.28) !important;
  }

  /* ── Content area: tighter padding on small screens ── */
  body.woocommerce-account .woocommerce-MyAccount-content {
    padding: 20px 16px !important;
    border-radius: 12px !important;
  }

  /* ── Address cards: stack to 1 column ── */
  .woocommerce-MyAccount-content .woocommerce-Addresses,
  .woocommerce-MyAccount-content .col2-set.addresses,
  body.woocommerce-account .woocommerce-MyAccount-content .addresses {
    grid-template-columns: 1fr !important;
    gap: 16px !important;
  }

  /* ── Address edit form: single-column ── */
  .woocommerce-address-fields__field-wrapper {
    grid-template-columns: 1fr !important;
    gap: 0 !important;
  }

  /* ── Account details form: full-width inputs ── */
  .woocommerce-EditAccountForm .form-row input[type="text"],
  .woocommerce-EditAccountForm .form-row input[type="email"],
  .woocommerce-EditAccountForm .form-row input[type="password"] {
    max-width: 100% !important;
  }

  /* ── Orders table: make it scrollable on very small phones ── */
  body.woocommerce-account .woocommerce-orders-table {
    display: block !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
    font-size: 13px !important;
  }

  body.woocommerce-account .woocommerce-orders-table th,
  body.woocommerce-account .woocommerce-orders-table td {
    padding: 10px 8px !important;
    white-space: nowrap !important;
  }
}

/* ─────────────────────────────────────────────────────────────────────────────
   6.  TABLET (768–1024px) — tighten address + account content
   ───────────────────────────────────────────────────────────────────────────── */

@media (min-width: 768px) and (max-width: 1024px) {

  /* Sidebar narrows a little */
  body.woocommerce-account .woocommerce-MyAccount-navigation {
    flex: 0 0 180px !important;
    max-width: 180px !important;
  }

  /* Address cards: keep 2-col but reduce padding */
  .woocommerce-MyAccount-content .woocommerce-Addresses,
  .woocommerce-MyAccount-content .col2-set.addresses {
    gap: 16px !important;
  }

  .woocommerce-MyAccount-content .woocommerce-Address,
  .woocommerce-MyAccount-content .woocommerce-column--billing-address,
  .woocommerce-MyAccount-content .woocommerce-column--shipping-address {
    padding: 18px !important;
  }
}

/* --- end of GG PATCH v18 --- */

/* =============================================================================
   GG PATCH v19 — Login / Register page: full unified redesign
   Overrides all conflicting rules from v13 and v15.
   Design rationale: both cards on one page is correct for e-commerce,
   but they must be visually distinct — navy = returning, orange = new.
   March 2026
   ============================================================================= */

/* ─────────────────────────────────────────────────────────────────────────────
   0.  PAGE SHELL — constrain width, clean padding, centred
   ───────────────────────────────────────────────────────────────────────────── */

/* Logged-out My Account: block (not flex) so the login form takes full width */
body.woocommerce-account:not(.woocommerce-logged-in) #primary .woocommerce,
body.woocommerce-account:not([class*="woocommerce-myaccount-"]) #primary .woocommerce {
  display: block !important;
  max-width: 960px !important;
  margin: 0 auto !important;
  padding: 40px 24px 60px !important;
}

/* ─────────────────────────────────────────────────────────────────────────────
   1.  TWO-COLUMN GRID
       WooCommerce renders either .u-columns (newer) or .col2-set (older).
       Cover both; they wrap .u-column1/.col-1 and .u-column2/.col-2.
   ───────────────────────────────────────────────────────────────────────────── */

body.woocommerce-account:not(.woocommerce-logged-in) .woocommerce .u-columns,
body.woocommerce-account:not(.woocommerce-logged-in) .woocommerce .col2-set#customer_login {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 28px !important;
  align-items: start !important;
}

@media (max-width: 680px) {
  body.woocommerce-account:not(.woocommerce-logged-in) .woocommerce .u-columns,
  body.woocommerce-account:not(.woocommerce-logged-in) .woocommerce .col2-set#customer_login {
    grid-template-columns: 1fr !important;
  }
}

/* ─────────────────────────────────────────────────────────────────────────────
   2.  CARD BASE — shared styles for both columns
   ───────────────────────────────────────────────────────────────────────────── */

body.woocommerce-account:not(.woocommerce-logged-in) .woocommerce .u-column1,
body.woocommerce-account:not(.woocommerce-logged-in) .woocommerce .u-column2,
body.woocommerce-account:not(.woocommerce-logged-in) .woocommerce .col-1,
body.woocommerce-account:not(.woocommerce-logged-in) .woocommerce .col-2 {
  background: #fff !important;
  border: 1.5px solid var(--gg-border-light) !important;
  border-radius: 16px !important;
  padding: 32px 32px 28px !important;
  box-shadow: var(--gg-shadow-sm) !important;
  flex: unset !important;       /* cancel any old flex: 1 1 320px */
  width: auto !important;
}

/* LOGIN card — navy top accent: "I'm already a customer" */
body.woocommerce-account:not(.woocommerce-logged-in) .woocommerce .u-column1,
body.woocommerce-account:not(.woocommerce-logged-in) .woocommerce .col-1 {
  border-top: 4px solid var(--gg-navy) !important;
}

/* REGISTER card — orange top accent: "I'm new here" */
body.woocommerce-account:not(.woocommerce-logged-in) .woocommerce .u-column2,
body.woocommerce-account:not(.woocommerce-logged-in) .woocommerce .col-2 {
  border-top: 4px solid var(--gg-orange) !important;
}

/* ─────────────────────────────────────────────────────────────────────────────
   3.  CARD HEADINGS
   ───────────────────────────────────────────────────────────────────────────── */

body.woocommerce-account:not(.woocommerce-logged-in) .woocommerce .u-column1 h2,
body.woocommerce-account:not(.woocommerce-logged-in) .woocommerce .col-1 h2 {
  font-family: var(--gg-font-heading) !important;
  font-size: 20px !important;
  font-weight: 900 !important;
  color: var(--gg-navy) !important;
  margin: 0 0 4px !important;
  padding: 0 !important;
  border: none !important;      /* cancel v13/v15 border-left */
  letter-spacing: -0.02em !important;
}

body.woocommerce-account:not(.woocommerce-logged-in) .woocommerce .u-column2 h2,
body.woocommerce-account:not(.woocommerce-logged-in) .woocommerce .col-2 h2 {
  font-family: var(--gg-font-heading) !important;
  font-size: 20px !important;
  font-weight: 900 !important;
  color: var(--gg-orange) !important;
  margin: 0 0 4px !important;
  padding: 0 !important;
  border: none !important;
  letter-spacing: -0.02em !important;
}

/* Sub-heading line below each card title */
body.woocommerce-account:not(.woocommerce-logged-in) .woocommerce .u-column1 h2::after,
body.woocommerce-account:not(.woocommerce-logged-in) .woocommerce .col-1 h2::after {
  content: "Welcome back — sign in to your account";
  display: block !important;
  font-family: var(--gg-font-body) !important;
  font-size: 13px !important;
  font-weight: 400 !important;
  color: var(--gg-muted) !important;
  margin-top: 3px !important;
  margin-bottom: 20px !important;
  letter-spacing: 0 !important;
  padding-bottom: 18px !important;
  border-bottom: 1.5px solid var(--gg-border-light) !important;
}

body.woocommerce-account:not(.woocommerce-logged-in) .woocommerce .u-column2 h2::after,
body.woocommerce-account:not(.woocommerce-logged-in) .woocommerce .col-2 h2::after {
  content: "New to Genius Guppies? Create a free account";
  display: block !important;
  font-family: var(--gg-font-body) !important;
  font-size: 13px !important;
  font-weight: 400 !important;
  color: var(--gg-muted) !important;
  margin-top: 3px !important;
  margin-bottom: 20px !important;
  letter-spacing: 0 !important;
  padding-bottom: 18px !important;
  border-bottom: 1.5px solid var(--gg-border-light) !important;
}

/* ─────────────────────────────────────────────────────────────────────────────
   4.  FORM ROWS — clean label + input stacking
   ───────────────────────────────────────────────────────────────────────────── */

/* Ensure form rows are block elements with good spacing */
body.woocommerce-account:not(.woocommerce-logged-in) .woocommerce-form .form-row {
  float: none !important;
  width: 100% !important;
  margin: 0 0 16px !important;
  padding: 0 !important;
  clear: both !important;
}

/* Labels */
body.woocommerce-account:not(.woocommerce-logged-in) .woocommerce-form .form-row label {
  display: block !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  color: var(--gg-navy) !important;
  margin-bottom: 6px !important;
  letter-spacing: 0.01em !important;
}

/* Required star */
body.woocommerce-account:not(.woocommerce-logged-in) .woocommerce-form .form-row label .required {
  color: #ef4444 !important;
  text-decoration: none !important;
  margin-left: 2px !important;
}

/* Text / email / password inputs */
body.woocommerce-account:not(.woocommerce-logged-in) .woocommerce-form input[type="text"],
body.woocommerce-account:not(.woocommerce-logged-in) .woocommerce-form input[type="email"],
body.woocommerce-account:not(.woocommerce-logged-in) .woocommerce-form input[type="password"] {
  display: block !important;
  width: 100% !important;
  padding: 12px 16px !important;
  border: 1.5px solid #d0dae6 !important;
  border-radius: 10px !important;
  background: #fff !important;
  color: var(--gg-navy) !important;
  font-size: 14px !important;
  font-family: var(--gg-font-body) !important;
  margin: 0 !important;           /* cancel v13's margin-bottom: 12px */
  transition: border-color 0.15s ease, box-shadow 0.15s ease !important;
}

body.woocommerce-account:not(.woocommerce-logged-in) .woocommerce-form input[type="text"]:focus,
body.woocommerce-account:not(.woocommerce-logged-in) .woocommerce-form input[type="email"]:focus,
body.woocommerce-account:not(.woocommerce-logged-in) .woocommerce-form input[type="password"]:focus {
  outline: none !important;
  border-color: var(--gg-blue, #1b75bb) !important;
  box-shadow: 0 0 0 3px rgba(27, 117, 187, 0.10) !important;
}

/* ─────────────────────────────────────────────────────────────────────────────
   5.  "REMEMBER ME" ROW
       WooCommerce puts checkbox + submit inside the same .form-row.
       We turn it into a flex row: checkbox left, lost-password link right.
   ───────────────────────────────────────────────────────────────────────────── */

.woocommerce-form-login .woocommerce-form__label-for-checkbox {
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  color: var(--gg-muted) !important;
  cursor: pointer !important;
}

.woocommerce-form-login .woocommerce-form__label-for-checkbox input[type="checkbox"] {
  width: 16px !important;
  height: 16px !important;
  accent-color: var(--gg-navy) !important;
  cursor: pointer !important;
  flex-shrink: 0 !important;
  margin: 0 !important;
}

/* Row that holds checkbox + submit: flex with space-between */
.woocommerce-form-login .form-row-last,
.woocommerce-form-login p.form-row:last-of-type {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 12px !important;
  flex-wrap: wrap !important;
  margin-bottom: 16px !important;
}

/* "Lost your password?" — styled as a small muted link */
.woocommerce-form-login .lost_password a,
.woocommerce-LostPassword a,
.woocommerce-form-login p.lost_password a {
  font-size: 13px !important;
  color: var(--gg-muted) !important;
  text-decoration: underline !important;
  text-underline-offset: 2px !important;
  transition: color 0.15s ease !important;
}

.woocommerce-form-login .lost_password a:hover,
.woocommerce-LostPassword a:hover {
  color: var(--gg-orange) !important;
}

/* ─────────────────────────────────────────────────────────────────────────────
   6.  SUBMIT BUTTONS — differentiated by card role
   ───────────────────────────────────────────────────────────────────────────── */

/* LOGIN button — navy: familiar, trusted, "I know this place" */
body.woocommerce-account:not(.woocommerce-logged-in) .woocommerce .u-column1 button[type="submit"],
body.woocommerce-account:not(.woocommerce-logged-in) .woocommerce .u-column1 input[type="submit"],
body.woocommerce-account:not(.woocommerce-logged-in) .woocommerce .col-1 button[type="submit"],
body.woocommerce-account:not(.woocommerce-logged-in) .woocommerce .col-1 input[type="submit"] {
  display: block !important;
  width: 100% !important;
  padding: 13px 20px !important;
  background: var(--gg-navy) !important;
  color: #fff !important;
  border: none !important;
  border-radius: 999px !important;
  font-family: var(--gg-font-body) !important;
  font-size: 15px !important;
  font-weight: 700 !important;
  letter-spacing: 0.02em !important;
  cursor: pointer !important;
  box-shadow: 0 4px 14px rgba(30, 58, 95, 0.22) !important;
  transition: background 0.18s ease, transform 0.15s ease !important;
  text-align: center !important;
}

body.woocommerce-account:not(.woocommerce-logged-in) .woocommerce .u-column1 button[type="submit"]:hover,
body.woocommerce-account:not(.woocommerce-logged-in) .woocommerce .col-1 button[type="submit"]:hover {
  background: #163052 !important;
  transform: translateY(-1px) !important;
}

/* REGISTER button — orange: energetic, "join us" CTA */
body.woocommerce-account:not(.woocommerce-logged-in) .woocommerce .u-column2 button[type="submit"],
body.woocommerce-account:not(.woocommerce-logged-in) .woocommerce .u-column2 input[type="submit"],
body.woocommerce-account:not(.woocommerce-logged-in) .woocommerce .col-2 button[type="submit"],
body.woocommerce-account:not(.woocommerce-logged-in) .woocommerce .col-2 input[type="submit"] {
  display: block !important;
  width: 100% !important;
  padding: 13px 20px !important;
  background: var(--gg-orange) !important;
  color: #fff !important;
  border: none !important;
  border-radius: 999px !important;
  font-family: var(--gg-font-body) !important;
  font-size: 15px !important;
  font-weight: 700 !important;
  letter-spacing: 0.02em !important;
  cursor: pointer !important;
  box-shadow: 0 4px 14px rgba(255, 107, 53, 0.28) !important;
  transition: background 0.18s ease, transform 0.15s ease !important;
  text-align: center !important;
}

body.woocommerce-account:not(.woocommerce-logged-in) .woocommerce .u-column2 button[type="submit"]:hover,
body.woocommerce-account:not(.woocommerce-logged-in) .woocommerce .col-2 button[type="submit"]:hover {
  background: #e5571f !important;
  transform: translateY(-1px) !important;
}

/* ─────────────────────────────────────────────────────────────────────────────
   7.  REGISTER CARD — trust signals below the form
       Privacy policy text + benefit chips
   ───────────────────────────────────────────────────────────────────────────── */

/* Privacy policy text */
body.woocommerce-account .woocommerce-privacy-policy-text {
  font-size: 12px !important;
  color: var(--gg-muted) !important;
  line-height: 1.6 !important;
  margin-top: 14px !important;
  padding-top: 14px !important;
  border-top: 1px solid var(--gg-border-light) !important;
}

body.woocommerce-account .woocommerce-privacy-policy-text a {
  color: var(--gg-blue) !important;
  text-decoration: underline !important;
}

/* Trust chips injected via ::after on the register card */
body.woocommerce-account:not(.woocommerce-logged-in) .woocommerce .u-column2::after,
body.woocommerce-account:not(.woocommerce-logged-in) .woocommerce .col-2::after {
  content: "✓ Free account   ✓ Track your orders   ✓ Faster checkout";
  display: block !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  color: #15803d !important;
  background: #f0fdf4 !important;
  border: 1px solid #bbf7d0 !important;
  border-radius: 8px !important;
  padding: 10px 14px !important;
  margin-top: 16px !important;
  line-height: 1.7 !important;
  letter-spacing: 0.01em !important;
}

/* ─────────────────────────────────────────────────────────────────────────────
   8.  WOOCOMMERCE NOTICES (errors / success messages above the form)
   ───────────────────────────────────────────────────────────────────────────── */

body.woocommerce-account .woocommerce-notices-wrapper {
  margin-bottom: 24px !important;
}

/* ─────────────────────────────────────────────────────────────────────────────
   9.  MOBILE (≤680px) — stack cards vertically, tighten padding
   ───────────────────────────────────────────────────────────────────────────── */

@media (max-width: 680px) {

  body.woocommerce-account:not(.woocommerce-logged-in) .woocommerce .u-column1,
  body.woocommerce-account:not(.woocommerce-logged-in) .woocommerce .u-column2,
  body.woocommerce-account:not(.woocommerce-logged-in) .woocommerce .col-1,
  body.woocommerce-account:not(.woocommerce-logged-in) .woocommerce .col-2 {
    padding: 24px 20px !important;
  }

  body.woocommerce-account:not(.woocommerce-logged-in) .woocommerce .u-column1 h2::after,
  body.woocommerce-account:not(.woocommerce-logged-in) .woocommerce .u-column2 h2::after,
  body.woocommerce-account:not(.woocommerce-logged-in) .woocommerce .col-1 h2::after,
  body.woocommerce-account:not(.woocommerce-logged-in) .woocommerce .col-2 h2::after {
    font-size: 12px !important;
  }

  body.woocommerce-account:not(.woocommerce-logged-in) #primary .woocommerce {
    padding: 24px 16px 40px !important;
  }
}

/* --- end of GG PATCH v19 --- */

/* =============================================================================
   GG PATCH v20 — UX Audit Fixes (March 2026)
   Six targeted improvements identified via full UI audit:
     1.  Mobile search panel: stretch to true full-width (was inset 12px each side)
     2.  Tablet (768–1024px): restore account pill in header (was hidden)
     3.  Mobile: show cart icon inside cart pill (was hidden, count-only looked bare)
     4.  Search submit button: visible hover/focus state (was invisible on hover)
     5.  Mobile drawer WhatsApp CTA: full-width pill button
     6.  Cart count badge: hide "0" text when cart is empty (requires data-count attr)
   ============================================================================= */

/* ─── 1. Mobile search panel — true full-width ───────────────────────────────
   The panel was using `inset: 0 12px` which left 12px gaps either side.
   Fix: stretch to `inset: 0` and let __inner handle breathing room.         */
@media (max-width: 1024px) {
  #gg-mobile-search-panel {
    inset: 0 !important;           /* edge-to-edge */
    padding: 0 !important;
  }

  .gg-mobile-search-panel__inner {
    padding: 0 10px !important;    /* internal horizontal breathing room */
    gap: 8px !important;
  }

  /* Ensure the search field stretches to fill available space */
  .gg-mobile-search-panel__inner .gg-search-form {
    flex: 1 1 0 !important;
    min-width: 0 !important;
  }
}

/* ─── 2. Tablet header: restore account pill (768–1024px) ────────────────────
   The account slot was hidden at ≤1024px, leaving tablet users with zero
   header-level account access. Restore it from 768px up.                    */
@media (min-width: 768px) and (max-width: 1024px) {
  .gg-header-account-slot {
    display: flex !important;
    align-items: center !important;
  }
}

/* ─── 3. Mobile: show cart icon in cart pill ─────────────────────────────────
   On mobile the cart icon was hidden, showing only a bare number. Showing
   the icon makes the cart recognisable even when count is 0.                */
@media (max-width: 767px) {
  .gg-cart-pill__icon {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    margin-right: 2px !important;
  }

  /* Keep the pill compact on small screens */
  .gg-cart-pill {
    gap: 4px !important;
    padding: 0 10px !important;
  }
}

/* ─── 4. Search submit button — visible hover & focus state ──────────────────
   The button background was transparent, making it invisible on hover.
   Give it a subtle branded fill so users know it's clickable.               */
.gg-search-submit:hover,
.gg-search-submit:focus-visible {
  background: var(--gg-orange) !important;
  color: #fff !important;
  outline: none !important;
  box-shadow: 0 2px 8px rgba(255, 107, 53, 0.28) !important;
  transition: background 0.18s ease, box-shadow 0.18s ease !important;
}

.gg-search-submit:focus-visible {
  outline: 2px solid var(--gg-orange) !important;
  outline-offset: 2px !important;
}

/* ─── 5. Mobile drawer WhatsApp CTA — full-width pill ────────────────────────
   Was inline-flex with auto width, making it look undersized in the drawer.
   Stretch to full width for a proper CTA affordance.                        */
@media (max-width: 1024px) {
  .gg-mobile-nav__extras .gg-mobile-nav__cta {
    display: flex !important;
    width: 100% !important;
    justify-content: center !important;
    box-sizing: border-box !important;
    padding: 14px 20px !important;
    font-size: 15px !important;
    letter-spacing: 0.01em !important;
  }
}

/* ─── 6. Cart count badge — hide "0" when cart is empty ─────────────────────
   Requires the cart pill anchor to carry data-count="N" (added in PHP).
   Hides the count visually when 0; icon alone communicates the empty state. */
#gg-header-cart-link[data-count="0"] .gg-cart-pill__count {
  display: none !important;
}

/* When cart has items, give count a branded badge appearance */
#gg-header-cart-link:not([data-count="0"]) .gg-cart-pill__count {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-width: 20px !important;
  height: 20px !important;
  padding: 0 5px !important;
  border-radius: 999px !important;
  background: var(--gg-orange) !important;
  color: #fff !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  line-height: 1 !important;
}

/* --- end of GG PATCH v20 --- */

/* =============================================================================
   GG PATCH v21 — Product Grid Consistency + WC Cart Page Stability
   March 2026

   Problems fixed:
   A. Mobile product grid shows 1 item in one row, 2 in another (row-orphan
      caused by 4+ conflicting @media (max-width:767px) blocks across patches
      v9–v10 that each set different subsets of flex/width/max-width).
   B. WooCommerce blockUI overlay on the cart page has a very high z-index
      that can sit above the fixed header at certain paint moments, making
      the menu trigger appear unresponsive during cart AJAX updates.
   ============================================================================= */

/* ─── A. Definitive mobile product grid ─────────────────────────────────────
   This single block authoritatively sets ALL sizing properties so no earlier
   patch can leave a stale `width:100%` or a mismatched flex-basis.
   Result: clean 2-column grid on phones ≥ 420px, 1 column below.            */

@media (max-width: 767px) {
  ul.products,
  .woocommerce ul.products,
  .woocommerce-page ul.products {
    justify-content: flex-start !important; /* orphan items align left, not centred */
  }

  ul.products li.product,
  .woocommerce ul.products li.product,
  .woocommerce-page ul.products li.product {
    flex-grow:   0                    !important;
    flex-shrink: 0                    !important;
    flex-basis:  calc(50% - 7px)      !important; /* half of container minus half of gap */
    width:       calc(50% - 7px)      !important;
    max-width:   calc(50% - 7px)      !important;
    min-width:   0                    !important;
  }
}

/* Very small phones (≤ 420px): single column so cards aren't cramped */
@media (max-width: 420px) {
  ul.products li.product,
  .woocommerce ul.products li.product,
  .woocommerce-page ul.products li.product {
    flex-grow:   0    !important;
    flex-shrink: 0    !important;
    flex-basis:  100% !important;
    width:       100% !important;
    max-width:   100% !important;
  }
}

/* ─── B. WooCommerce cart-page blockUI: ensure header stays interactive ──────
   jQuery blockUI creates a `.blockOverlay` div with inline z-index.
   We can't control that, but we CAN guarantee our fixed header shell is
   always painted above it.  The real blocking issue (covered viewport from
   an open mini-cart on bfcache restore) is fixed in gg-header.js. This rule
   is a defensive CSS backstop for the cart page in particular.              */
body.woocommerce-cart #gg-site-header,
body.woocommerce-checkout #gg-site-header {
  z-index: 100000 !important; /* above blockUI's typical 1000-1001 AND above WC notices */
}

/* --- end of GG PATCH v21 --- */

/* =============================================================================
   GG PATCH v22 — Critical: Fix Dead Header Buttons + Age Circle Aspect Ratio
   March 2026

   Root-cause bug:
   ────────────────
   .gg-mobile-search-open .gg-header-row {
     opacity: 0;
     pointer-events: none;   ← THIS LINE kills ALL header buttons
   }

   When the mobile search panel opens, that rule makes every button in the
   header row (hamburger, search icon, cart icon) completely unclickable.
   If the class ever gets stuck — due to bfcache restore, WooCommerce AJAX
   fragment rebuild, navigation timing, or any JS error — the header is
   permanently dead. Users cannot open the menu, search, or access their
   cart.

   The search panel already has position:absolute; inset:0; background:#fff;
   z-index:5 — it physically covers the header row. pointer-events:none on
   the header row was never needed.

   FIX: Override that rule so the header row ALWAYS has pointer-events:auto
   and opacity:1. The search panel's own white background + z-index
   naturally prevents clicks on the buttons underneath.
   ============================================================================= */

/* ─── A. Kill the dangerous pointer-events:none on header row ───────────────
   This single rule is the root cause of:
   - "Cart page menu button not working"
   - "Search button not working"
   - "After search, CSS haywire and menu/search don't work"
   - "Home page looks weird sometimes after cart"                             */
.gg-mobile-search-open .gg-header-row {
  opacity: 1 !important;
  pointer-events: auto !important;
  visibility: visible !important;
}

/* ─── B. Ensure search panel itself catches all clicks when open ─────────────
   Since we removed pointer-events:none from the header row, ensure the
   search panel is a solid click-barrier above the header row items.         */
@media (max-width: 1024px) {
  #gg-mobile-search-panel:not([hidden]) {
    position: absolute !important;
    inset: 0 !important;
    z-index: 10 !important;          /* above header-row z-index: 4 */
    background: #fff !important;
    pointer-events: auto !important;
  }
}

/* ─── C. Age circles — force perfect circles on mobile ───────────────────────
   The Elementor age section has 3 columns that get squeezed on mobile,
   distorting the circular shapes into ovals.  Force equal columns and
   proper aspect-ratio.                                                       */

/* Target the Elementor section with "gg-shop-by-age" class */
@media (max-width: 767px) {
  .gg-shop-by-age .elementor-row,
  .gg-shop-by-age .elementor-container {
    flex-wrap: nowrap !important;
    justify-content: center !important;
    gap: 8px !important;
  }

  .gg-shop-by-age .elementor-column {
    flex: 1 1 0 !important;       /* equal columns */
    max-width: 33.33% !important;
    min-width: 0 !important;
  }

  .gg-shop-by-age .elementor-widget-image img,
  .gg-shop-by-age .elementor-image img {
    width: 90px !important;
    height: 90px !important;
    min-width: 90px !important;
    min-height: 90px !important;
    max-width: 90px !important;
    max-height: 90px !important;
    border-radius: 50% !important;
    object-fit: cover !important;
    aspect-ratio: 1 / 1 !important;
  }
}

/* Wider phones get slightly bigger circles */
@media (min-width: 420px) and (max-width: 767px) {
  .gg-shop-by-age .elementor-widget-image img,
  .gg-shop-by-age .elementor-image img {
    width: 110px !important;
    height: 110px !important;
    min-width: 110px !important;
    min-height: 110px !important;
    max-width: 110px !important;
    max-height: 110px !important;
  }
}

/* Age grid shortcode: enforce circles on mobile */
@media (max-width: 767px) {
  .gg-age-bubble,
  .gg-age-bubble__circle {
    width: 100px !important;
    height: 100px !important;
    aspect-ratio: 1 / 1 !important;
  }
}

@media (min-width: 420px) and (max-width: 767px) {
  .gg-age-bubble,
  .gg-age-bubble__circle {
    width: 118px !important;
    height: 118px !important;
  }
}

/* ─── D. Desktop search submit — slightly smaller, subtler ──────────────────
   The circle was 32px which felt oversized against the 38px-tall input.    */
.gg-search-submit {
  width: 28px !important;
  height: 28px !important;
}

.gg-search-submit svg {
  width: 16px !important;
  height: 16px !important;
}

/* ─── E. Tablet: fix header-tools grid for account slot restore ─────────────
   PATCH v20 restored .gg-header-account-slot at 768-1024px, but the
   header-tools grid only had 2 columns (42px auto). With 3 visible items
   (search, account, cart) the layout overflows. Add a 3-column grid.       */
@media (min-width: 768px) and (max-width: 1024px) {
  .gg-header-tools {
    width: auto !important;
    grid-template-columns: 42px auto auto !important;
    gap: 6px !important;
  }
}

/* --- end of GG PATCH v22 --- */

/* =============================================================================
   GG PATCH v23 — Cart Icon: fill the 768–1024px gap where icon was hidden
   March 2026

   Root cause: @media (max-width:1024px) sets .gg-cart-pill__icon{display:none}.
   Patch v20 restored it at ≤767px. The 768–1024px band (tablet/narrowed
   desktop) was left without the icon, rendering an empty pill when cart=0.

   Fix: restore the icon globally across ALL viewports where the mobile
   header layout is active (≤1024px), matching the ≤767px treatment.
   ============================================================================= */

@media (min-width: 768px) and (max-width: 1024px) {
  .gg-cart-pill__icon {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
  }

  /* Tighten pill padding now that icon + optional count are both visible */
  .gg-cart-pill {
    gap: 4px !important;
    padding: 0 10px !important;
  }
}

/* --- end of GG PATCH v23 --- */

/* =============================================================================
   GG PATCH v24 — Related / Upsell Products: button text + price layout fix
   March 2026

   Bug: "Add to Cart" button text renders vertically (one letter per line) in
   the related products section on both mobile and desktop. Root cause: at
   tablet widths the 3-column grid makes cards ~110 px wide; with uppercase
   13 px text and calc(100% - 28px) button width the text has no room and
   wraps character by character.

   Fix A — Prevent text wrapping: white-space: nowrap is the definitive fix.
   Fix B — Scoped padding reduction for related/upsell cards so button text
            has breathing room at every breakpoint.
   Fix C — Ensure mobile uses 2 columns (confirm the patch-v16 rule wins).
   Fix D — "(incl. GST)" price suffix: constrain font so suffix stays close
            to the price figure without an awkward orphan line.
   ============================================================================= */

/* ─── A. Button — stop text from ever stacking vertically ──────────────────── */
body.single-product .related ul.products li.product .button,
body.single-product .related ul.products li.product a.button,
body.single-product .related ul.products li.product .add_to_cart_button,
body.single-product .upsells ul.products li.product .button,
body.single-product .upsells ul.products li.product a.button,
body.single-product .upsells ul.products li.product .add_to_cart_button {
  white-space: nowrap !important;           /* ← primary fix: no line breaks  */
  overflow: hidden !important;
  text-overflow: ellipsis !important;       /* graceful fallback if still tight */
  writing-mode: horizontal-tb !important;  /* safety net against vertical mode  */
  width: calc(100% - 24px) !important;
  margin: 0 12px 12px !important;
  padding: 10px 10px !important;
  font-size: 12px !important;
  letter-spacing: 0.02em !important;
  display: block !important;
}

/* ─── B. Product title — tighter on narrow cards ────────────────────────────── */
body.single-product .related ul.products li.product .woocommerce-loop-product__title,
body.single-product .upsells ul.products li.product .woocommerce-loop-product__title {
  font-size: 13px !important;
  margin: 8px 12px 4px !important;
  line-height: 1.3 !important;
}

/* ─── C. Price — tighter margins + keep (incl. GST) close ─────────────────── */
body.single-product .related ul.products li.product .price,
body.single-product .upsells ul.products li.product .price {
  font-size: 14px !important;
  margin: 0 12px 8px !important;
  line-height: 1.4 !important;
}

/* ─── D. Mobile: confirm 2-column grid (prevents 3-col narrow squash) ──────── */
@media (max-width: 767px) {
  body.single-product .related ul.products,
  body.single-product .upsells ul.products {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 10px !important;
  }

  body.single-product .related ul.products li.product .button,
  body.single-product .related ul.products li.product .add_to_cart_button,
  body.single-product .upsells ul.products li.product .button,
  body.single-product .upsells ul.products li.product .add_to_cart_button {
    font-size: 11px !important;
    padding: 9px 8px !important;
    width: calc(100% - 16px) !important;
    margin: 0 8px 10px !important;
  }
}

/* ─── E. Tablet (768–1024px): 2-col instead of 3-col for related cards ──────
   3-col at tablet creates ~140 px cards where nowrap still clips the label.
   2-col gives ~200 px+ — comfortable for any text length.                   */
@media (min-width: 768px) and (max-width: 1024px) {
  body.single-product .related ul.products,
  body.single-product .upsells ul.products {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 16px !important;
  }
}

/* --- end of GG PATCH v24 --- */

/* =============================================================================
   GG PATCH v25 — My Account: notice text clip + layout + mobile nav fix
   March 2026

   Three bugs fixed:
   A. Notification text clipped ("ur account…" missing first 2 chars).
      Root cause: display:flex on the notice makes ::before a flex item but
      Storefront's ::before retains margin-left:-2.5em, pulling it behind the
      border-left and masking the first ~20 px of text. Fix: hide ::before.
   B. Desktop: nav appears on right, large blank area on left.
      Storefront floats nav left (25%) and content right. Our display:flex
      overrides the floats but doesn't set order explicitly.  Fix: explicit
      order values + min-width on content ensures left=nav, right=content.
   C. Mobile: scroll container needs width:100% to allow overflow-x scrolling
      and all nav tabs must be reachable by swiping.
   ============================================================================= */

/* ─── A. WooCommerce notice — kill the ::before icon that clips text ─────── */
.woocommerce-info::before,
.woocommerce-message::before,
.woocommerce-error::before,
.woocommerce-notice::before,
.woocommerce-info::after,
.woocommerce-message::after {
  display: none !important;
  float: none !important;
  margin: 0 !important;
  content: none !important;
  width: 0 !important;
}

/* ─── B. Desktop My Account — explicit order keeps nav LEFT, content RIGHT ─ */
body.woocommerce-account .woocommerce-MyAccount-navigation {
  order: 1 !important;
  flex: 0 0 220px !important;
  width: 220px !important;
  max-width: 220px !important;
  float: none !important;   /* override any Storefront float */
}

body.woocommerce-account .woocommerce-MyAccount-content {
  order: 2 !important;
  flex: 1 1 0 !important;
  min-width: 0 !important;
  float: none !important;   /* override any Storefront float */
  width: auto !important;
}

/* Ensure the flex container doesn't accidentally reverse */
body.woocommerce-account .woocommerce {
  flex-direction: row !important;
  flex-wrap: wrap !important;
}

/* ─── C. Mobile: scrollable nav strip — ensure full width so tabs scroll ─── */
@media (max-width: 767px) {

  body.woocommerce-account .woocommerce-MyAccount-navigation {
    order: 1 !important;
    width: 100% !important;
    max-width: 100% !important;
    flex: 0 0 100% !important;
    float: none !important;
  }

  body.woocommerce-account .woocommerce-MyAccount-content {
    order: 2 !important;
    width: 100% !important;
    flex: 0 0 100% !important;
    float: none !important;
  }

  /* Give the <ul> an explicit width so overflow-x scrolling actually works */
  body.woocommerce-account .woocommerce-MyAccount-navigation ul {
    width: 100% !important;
    min-width: 0 !important;
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
  }

  /* Make sure each tab doesn't shrink — all must be fully visible when scrolled to */
  body.woocommerce-account .woocommerce-MyAccount-navigation ul li {
    flex-shrink: 0 !important;
    flex-grow: 0 !important;
  }
}

/* ─── D. Ensure "My Account" page heading is hidden (banner replaces it) ─── */
body.woocommerce-account .entry-header,
body.woocommerce-account .page-title,
body.woocommerce-account h1.entry-title {
  display: none !important;
}

/* --- end of GG PATCH v25 --- */

/* =============================================================================
   GG PATCH v26 — Visual Polish Sprint (March 2026)
   Competitive parity with Skillmatics-class educational toy stores.
   Areas: product card image zoom, review stars, trust badge strip,
          BESTSELLER/NEW/AGE badges, video embed styling, category banners.
   ============================================================================= */

/* ─── A. Product card — image zoom on hover ─────────────────────────────────
   Adds a smooth scale-up to product thumbnail on card hover.
   The image already has aspect-ratio:1/1 set in earlier patches.           */
ul.products li.product .woocommerce-loop-product__link {
  display: block !important;
  overflow: hidden !important;
  border-radius: 14px 14px 0 0 !important;
}

ul.products li.product .woocommerce-loop-product__link img {
  transition: transform 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94) !important;
  transform-origin: center center !important;
}

ul.products li.product:hover .woocommerce-loop-product__link img {
  transform: scale(1.07) !important;
}

/* ─── B. Product card — NEW and BESTSELLER badges ───────────────────────────
   WordPress lets admins add custom CSS classes to products via Elementor
   or WooCommerce custom fields. Classes: .gg-badge-new, .gg-badge-best     */
.gg-badge-new,
.gg-badge-best,
.gg-badge-age {
  position: absolute !important;
  top: 10px !important;
  left: 10px !important;
  z-index: 3 !important;
  display: inline-flex !important;
  align-items: center !important;
  padding: 4px 10px !important;
  border-radius: 999px !important;
  font-size: 10px !important;
  font-weight: 800 !important;
  letter-spacing: 0.06em !important;
  text-transform: uppercase !important;
  line-height: 1 !important;
  box-shadow: 0 2px 8px rgba(0,0,0,0.15) !important;
}

.gg-badge-new  { background: #f0fdf4 !important; color: #16a34a !important; border: 1.5px solid #86efac !important; }
.gg-badge-best { background: #fff7ed !important; color: var(--gg-orange) !important; border: 1.5px solid #fdba74 !important; }
.gg-badge-age  { background: #eff6ff !important; color: #1d4ed8 !important; border: 1.5px solid #93c5fd !important; top: 10px !important; left: auto !important; right: 10px !important; }

/* Make the li.product position:relative so badges anchor correctly */
ul.products li.product {
  position: relative !important;
}

/* ─── C. Review stars — styled WooCommerce star rating on product cards ─────  */
ul.products li.product .star-rating {
  margin: 0 14px 6px !important;
  font-size: 13px !important;
  line-height: 1 !important;
  display: flex !important;
  align-items: center !important;
}

ul.products li.product .star-rating::before,
ul.products li.product .star-rating span::before {
  color: var(--gg-orange) !important;
  font-size: 13px !important;
}

/* PDP star rating */
.woocommerce-product-rating .star-rating {
  font-size: 16px !important;
}

.woocommerce-product-rating .star-rating::before,
.woocommerce-product-rating .star-rating span::before {
  color: var(--gg-orange) !important;
}

.woocommerce-review-link {
  font-size: 13px !important;
  color: var(--gg-muted) !important;
  margin-left: 6px !important;
}

/* ─── D. Trust badge strip ──────────────────────────────────────────────────
   Add a <div class="gg-trust-strip"> anywhere (footer, cart, homepage).
   Example HTML:
   <div class="gg-trust-strip">
     <div class="gg-trust-item"><span class="gg-trust-icon">🚚</span><span>Free shipping above ₹999</span></div>
     ...
   </div>                                                                    */
.gg-trust-strip {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 0 !important;
  background: #fff !important;
  border: 1.5px solid var(--gg-border-light) !important;
  border-radius: 14px !important;
  overflow: hidden !important;
  margin: 28px 0 !important;
}

.gg-trust-item {
  flex: 1 1 200px !important;
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  padding: 16px 20px !important;
  border-right: 1px solid var(--gg-border-light) !important;
  transition: background 0.18s ease !important;
}

.gg-trust-item:last-child {
  border-right: none !important;
}

.gg-trust-item:hover {
  background: #fff8f4 !important;
}

.gg-trust-icon {
  font-size: 22px !important;
  flex-shrink: 0 !important;
}

.gg-trust-item span:last-child {
  font-size: 13px !important;
  font-weight: 600 !important;
  color: var(--gg-navy) !important;
  line-height: 1.3 !important;
}

@media (max-width: 767px) {
  .gg-trust-strip {
    gap: 0 !important;
  }

  .gg-trust-item {
    flex: 1 1 calc(50% - 1px) !important;
    padding: 12px 14px !important;
    border-bottom: 1px solid var(--gg-border-light) !important;
  }

  .gg-trust-item:nth-child(2n) {
    border-right: none !important;
  }

  .gg-trust-item:nth-last-child(-n+2) {
    border-bottom: none !important;
  }
}

/* ─── E. WooCommerce category page banner ───────────────────────────────────
   The term description becomes a styled intro card.                        */
.woocommerce-products-header {
  text-align: center !important;
  padding: 0 !important;
  margin-bottom: 32px !important;
}

.woocommerce-products-header__title.page-title {
  display: block !important; /* restored – #primary::before was never implemented for shop archive */
}

.term-description {
  background: var(--gg-orange-light, #fff8f4) !important;
  border-left: 4px solid var(--gg-orange) !important;
  border-radius: 10px !important;
  padding: 14px 20px !important;
  font-size: 14px !important;
  color: var(--gg-muted) !important;
  max-width: 680px !important;
  margin: 0 auto 24px !important;
  text-align: left !important;
}

/* ─── F. Product video wrapper ──────────────────────────────────────────────
   Wrap a YouTube/Vimeo embed in <div class="gg-product-video"> in the
   WooCommerce product description.                                         */
.gg-product-video {
  position: relative !important;
  width: 100% !important;
  padding-bottom: 56.25% !important; /* 16:9 */
  border-radius: 14px !important;
  overflow: hidden !important;
  margin: 24px 0 !important;
  box-shadow: 0 8px 24px rgba(0,0,0,0.12) !important;
}

.gg-product-video iframe {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  border: none !important;
  border-radius: 14px !important;
}

/* ─── G. Quick-add wishlist placeholder button ──────────────────────────────
   Add <button class="gg-wishlist-btn"> inside a product card to get the
   heart button. Needs JS to toggle .is-wishlisted class.                  */
.gg-wishlist-btn {
  position: absolute !important;
  bottom: 58px !important;
  right: 12px !important;
  z-index: 4 !important;
  width: 34px !important;
  height: 34px !important;
  border-radius: 50% !important;
  background: #fff !important;
  border: 1.5px solid var(--gg-border-light) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  cursor: pointer !important;
  font-size: 16px !important;
  line-height: 1 !important;
  transition: background 0.18s ease, border-color 0.18s ease, transform 0.18s ease !important;
  opacity: 0 !important;
  transform: scale(0.8) !important;
  box-shadow: 0 2px 8px rgba(0,0,0,0.10) !important;
}

ul.products li.product:hover .gg-wishlist-btn {
  opacity: 1 !important;
  transform: scale(1) !important;
}

.gg-wishlist-btn:hover,
.gg-wishlist-btn.is-wishlisted {
  background: #fee2e2 !important;
  border-color: #f87171 !important;
}

/* --- end of GG PATCH v26 --- */

/* =============================================================================
   GG PATCH v27 — Interactivity Sprint (March 2026)
   Free shipping progress bar, stock/urgency indicators, scroll-reveal
   animations, sticky mobile add-to-cart, quantity stepper pulse.
   ============================================================================= */

/* ─── A. Free shipping progress bar ────────────────────────────────────────
   Injected via JS into .gg-free-ship-bar container in the mini-cart header.
   HTML (via JS): <div class="gg-free-ship-bar"><div class="gg-free-ship-bar__inner">
     <p class="gg-free-ship-bar__msg">Add ₹X more for free shipping!</p>
     <div class="gg-free-ship-bar__track"><div class="gg-free-ship-bar__fill" style="width:60%"></div></div>
   </div></div>                                                              */
.gg-free-ship-bar {
  background: #fff8f4 !important;
  border-bottom: 1px solid rgba(232,108,0,0.2) !important;
  padding: 10px 16px !important;
}

.gg-free-ship-bar__msg {
  font-size: 12px !important;
  font-weight: 600 !important;
  color: var(--gg-navy) !important;
  margin-bottom: 6px !important;
  text-align: center !important;
}

.gg-free-ship-bar__msg em {
  color: var(--gg-orange) !important;
  font-style: normal !important;
  font-weight: 800 !important;
}

.gg-free-ship-bar__track {
  height: 6px !important;
  background: rgba(232,108,0,0.15) !important;
  border-radius: 999px !important;
  overflow: hidden !important;
}

.gg-free-ship-bar__fill {
  height: 100% !important;
  background: linear-gradient(90deg, var(--gg-orange) 0%, #ffb347 100%) !important;
  border-radius: 999px !important;
  transition: width 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) !important;
}

.gg-free-ship-bar--achieved .gg-free-ship-bar__msg {
  color: #16a34a !important;
}

.gg-free-ship-bar--achieved .gg-free-ship-bar__fill {
  background: linear-gradient(90deg, #16a34a 0%, #4ade80 100%) !important;
}

/* ─── B. Stock / urgency indicator ─────────────────────────────────────────
   WooCommerce adds .low-stock to the stock message. We style it to create
   urgency. Also style .in-stock and .out-of-stock.                         */
.woocommerce-variation-availability .stock,
.stock {
  font-size: 13px !important;
  font-weight: 700 !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  padding: 4px 12px !important;
  border-radius: 999px !important;
}

.stock.in-stock {
  background: #f0fdf4 !important;
  color: #16a34a !important;
}

.stock.in-stock::before {
  content: "✓" !important;
  font-weight: 900 !important;
}

.stock.out-of-stock {
  background: #fef2f2 !important;
  color: #dc2626 !important;
}

.stock.low-stock,
p.stock.available-on-backorder {
  background: #fff7ed !important;
  color: var(--gg-orange) !important;
  animation: gg-pulse-stock 2s ease-in-out infinite !important;
}

.stock.low-stock::before {
  content: "⚡" !important;
}

@keyframes gg-pulse-stock {
  0%, 100% { box-shadow: 0 0 0 0 rgba(232,108,0,0); }
  50%       { box-shadow: 0 0 0 4px rgba(232,108,0,0.18); }
}

/* ─── C. Scroll-reveal animations ──────────────────────────────────────────
   JS adds .gg-reveal class to elements. Before intersection: invisible.
   After intersection observer fires: .gg-revealed class → visible.
   Variants: .gg-reveal--up, .gg-reveal--left, .gg-reveal--scale           */
.gg-reveal {
  opacity: 0 !important;
  transition: opacity 0.5s ease, transform 0.5s cubic-bezier(0.22, 1, 0.36, 1) !important;
}

.gg-reveal--up    { transform: translateY(28px) !important; }
.gg-reveal--left  { transform: translateX(-28px) !important; }
.gg-reveal--scale { transform: scale(0.94) !important; }

.gg-reveal.gg-revealed {
  opacity: 1 !important;
  transform: none !important;
}

/* Staggered delay for grid children */
.gg-reveal-group > *:nth-child(1) { transition-delay: 0s !important; }
.gg-reveal-group > *:nth-child(2) { transition-delay: 0.08s !important; }
.gg-reveal-group > *:nth-child(3) { transition-delay: 0.16s !important; }
.gg-reveal-group > *:nth-child(4) { transition-delay: 0.24s !important; }
.gg-reveal-group > *:nth-child(5) { transition-delay: 0.32s !important; }
.gg-reveal-group > *:nth-child(6) { transition-delay: 0.40s !important; }

/* ─── D. Sticky mobile Add to Cart bar on PDP ───────────────────────────────
   JS adds .gg-sticky-atc-bar to body once the main ATC button scrolls
   out of view. Shows a fixed bottom bar with product name + ATC button.  */
.gg-sticky-atc {
  position: fixed !important;
  bottom: 0 !important;
  left: 0 !important;
  right: 0 !important;
  z-index: 99998 !important;
  background: #fff !important;
  border-top: 1.5px solid var(--gg-border-light) !important;
  box-shadow: 0 -4px 20px rgba(0,0,0,0.10) !important;
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  padding: 10px 16px env(safe-area-inset-bottom, 10px) !important;
  transform: translateY(100%) !important;
  transition: transform 0.3s cubic-bezier(0.22, 1, 0.36, 1) !important;
}

body.gg-sticky-atc-visible .gg-sticky-atc {
  transform: translateY(0) !important;
}

.gg-sticky-atc__img {
  width: 44px !important;
  height: 44px !important;
  border-radius: 8px !important;
  object-fit: cover !important;
  flex-shrink: 0 !important;
  border: 1px solid var(--gg-border-light) !important;
}

.gg-sticky-atc__info {
  flex: 1 !important;
  min-width: 0 !important;
}

.gg-sticky-atc__title {
  font-size: 12px !important;
  font-weight: 700 !important;
  color: var(--gg-navy) !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

.gg-sticky-atc__price {
  font-size: 14px !important;
  font-weight: 800 !important;
  color: var(--gg-orange) !important;
}

.gg-sticky-atc__btn {
  flex-shrink: 0 !important;
  background: var(--gg-orange) !important;
  color: #fff !important;
  border: none !important;
  border-radius: 999px !important;
  padding: 10px 20px !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  cursor: pointer !important;
  white-space: nowrap !important;
  transition: background 0.18s ease !important;
}

.gg-sticky-atc__btn:hover {
  background: #c45a00 !important;
}

/* Only show on mobile */
@media (min-width: 768px) {
  .gg-sticky-atc {
    display: none !important;
  }
}

/* ─── E. Quantity stepper — pulse when changed ──────────────────────────────
   JS adds .gg-qty-changed for 400ms on change event.                      */
.woocommerce .quantity.gg-qty-changed input.qty {
  animation: gg-qty-pulse 0.4s ease !important;
}

@keyframes gg-qty-pulse {
  0%   { transform: scale(1); }
  40%  { transform: scale(1.12); background: #fff8f4; border-color: var(--gg-orange); }
  100% { transform: scale(1); }
}

/* ─── F. Cart item count — bounce animation when item added ─────────────────
   JS adds .gg-cart-bounce class on the cart pill for 600ms.               */
.gg-cart-pill.gg-cart-bounce .gg-cart-pill__count {
  animation: gg-badge-bounce 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) !important;
}

@keyframes gg-badge-bounce {
  0%   { transform: scale(1); }
  40%  { transform: scale(1.5); }
  70%  { transform: scale(0.9); }
  100% { transform: scale(1); }
}

/* ─── G. Page loading indicator ─────────────────────────────────────────────
   Thin orange bar at top of page during navigation.
   JS toggles body.gg-loading.                                             */
body.gg-loading::before {
  content: "" !important;
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  height: 3px !important;
  z-index: 999999 !important;
  background: linear-gradient(90deg, var(--gg-orange) 0%, #ffb347 50%, var(--gg-orange) 100%) !important;
  background-size: 200% 100% !important;
  animation: gg-progress 1s linear infinite !important;
  width: 100% !important;
}

@keyframes gg-progress {
  0%   { background-position: 100% 0; }
  100% { background-position: -100% 0; }
}

/* --- end of GG PATCH v27 --- */

/* =============================================================================
   GG PATCH v28 — Performance Sprint (March 2026)
   CSS performance hints: will-change, contain, font-display, paint layers.
   Reduces layout thrash and improves Core Web Vitals (LCP, CLS, INP).
   ============================================================================= */

/* ─── A. will-change on animated elements ───────────────────────────────────
   Promotes elements to their own GPU compositor layer BEFORE animation.
   Only apply to elements that ACTUALLY animate to avoid memory waste.     */
ul.products li.product {
  will-change: transform, box-shadow !important;
  contain: layout style !important; /* ← prevents card from affecting page layout */
}

.gg-mini-cart {
  will-change: transform !important;
}

.gg-mobile-nav {
  will-change: transform !important;
}

.gg-sticky-atc {
  will-change: transform !important;
}

.gg-mobile-search-panel {
  will-change: opacity, transform !important;
}

/* ─── B. CSS contain — isolate independent sections ─────────────────────────
   Tells the browser these elements are independent subtrees.
   Avoids costly full-page layout recalculations.                          */
.gg-site-header {
  contain: layout !important;
}

body.single-product .related.products,
body.single-product .upsells.products {
  contain: layout !important;
}

.gg-footer {
  contain: layout style !important;
}

/* ─── C. Image rendering — improve perceived sharpness ─────────────────────  */
ul.products li.product img,
.gg-mini-cart img,
body.single-product .woocommerce-product-gallery img {
  image-rendering: -webkit-optimize-contrast !important;
  image-rendering: crisp-edges !important;
}

/* ─── D. Smooth scrolling (respect prefers-reduced-motion) ─────────────────  */
html {
  scroll-behavior: smooth !important;
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto !important; }

  /* Kill all transitions / animations for accessibility */
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }

  /* Keep the scroll-reveal elements visible (no animation to trigger) */
  .gg-reveal {
    opacity: 1 !important;
    transform: none !important;
  }
}

/* ─── E. Font loading optimisation ──────────────────────────────────────────
   Ensures system fallback is used until web font is ready (prevents FOIT).
   font-display:swap is set in @font-face — this ensures fallback metrics  */
body,
.woocommerce-loop-product__title,
.gg-nav-menu a,
.woocommerce-MyAccount-content {
  font-synthesis: none !important; /* don't fake bold/italic = avoids CLS */
}

/* ─── F. Aspect-ratio on hero / banner images ───────────────────────────────
   Prevents layout shift while hero images load (CLS fix).                 */
.gg-hero img,
.gg-hero .elementor-image img,
.gg-hero .wp-block-cover__image-background {
  aspect-ratio: 16 / 7 !important;
  object-fit: cover !important;
}

/* ─── G. Scrollbar styling (Chrome / Edge) ──────────────────────────────────  */
::-webkit-scrollbar {
  width: 6px !important;
  height: 6px !important;
}

::-webkit-scrollbar-track {
  background: #f1f5f9 !important;
}

::-webkit-scrollbar-thumb {
  background: #cbd5e1 !important;
  border-radius: 999px !important;
}

::-webkit-scrollbar-thumb:hover {
  background: var(--gg-navy) !important;
}

/* ─── H. Selection colour ───────────────────────────────────────────────────  */
::selection {
  background: rgba(232, 108, 0, 0.2) !important;
  color: var(--gg-navy) !important;
}

/* ─── I. Focus-visible ring (accessibility + polish) ────────────────────────  */
:focus-visible {
  outline: 2.5px solid var(--gg-orange) !important;
  outline-offset: 3px !important;
  border-radius: 4px !important;
}

/* ─── J. Input / select transition ─────────────────────────────────────────  */
input[type="text"],
input[type="email"],
input[type="password"],
input[type="tel"],
input[type="number"],
select,
textarea {
  transition: border-color 0.18s ease, box-shadow 0.18s ease !important;
}

input[type="text"]:focus,
input[type="email"]:focus,
input[type="password"]:focus,
input[type="tel"]:focus,
input[type="number"]:focus,
select:focus,
textarea:focus {
  border-color: var(--gg-orange) !important;
  box-shadow: 0 0 0 3px rgba(232,108,0,0.15) !important;
  outline: none !important;
}

/* --- end of GG PATCH v28 --- */

/* =============================================================================
   GG PATCH v29 — Exit-Intent Popup
   March 2026 · Slide-up overlay when user moves mouse toward browser top.
   Discount code display, email capture field, close button.
   JS in gg-enhancements.js triggers .gg-exit-popup--visible on body.
   ============================================================================= */

/* ── Overlay backdrop ─────────────────────────────────────────────────────── */
.gg-exit-popup-backdrop {
  position: fixed !important;
  inset: 0 !important;
  background: rgba(10, 20, 40, 0.55) !important;
  z-index: 999990 !important;
  opacity: 0 !important;
  pointer-events: none !important;
  transition: opacity 0.35s ease !important;
  backdrop-filter: blur(2px) !important;
}

body.gg-exit-popup--visible .gg-exit-popup-backdrop {
  opacity: 1 !important;
  pointer-events: auto !important;
}

/* ── Popup card ───────────────────────────────────────────────────────────── */
.gg-exit-popup {
  position: fixed !important;
  bottom: 0 !important;
  left: 50% !important;
  transform: translateX(-50%) translateY(100%) !important;
  z-index: 999991 !important;
  width: min(520px, 96vw) !important;
  background: #fff !important;
  border-radius: 20px 20px 0 0 !important;
  box-shadow: 0 -8px 40px rgba(0,0,0,0.18) !important;
  transition: transform 0.42s cubic-bezier(0.22, 1, 0.36, 1) !important;
  overflow: hidden !important;
}

body.gg-exit-popup--visible .gg-exit-popup {
  transform: translateX(-50%) translateY(0) !important;
}

/* ── Coloured top stripe ──────────────────────────────────────────────────── */
.gg-exit-popup::before {
  content: "" !important;
  display: block !important;
  height: 5px !important;
  background: linear-gradient(90deg, var(--gg-navy) 0%, var(--gg-orange) 100%) !important;
}

/* ── Inner layout ─────────────────────────────────────────────────────────── */
.gg-exit-popup__inner {
  padding: 28px 32px 32px !important;
  text-align: center !important;
}

/* ── Close button ─────────────────────────────────────────────────────────── */
.gg-exit-popup__close {
  position: absolute !important;
  top: 14px !important;
  right: 16px !important;
  width: 32px !important;
  height: 32px !important;
  background: #f1f5f9 !important;
  border: none !important;
  border-radius: 50% !important;
  cursor: pointer !important;
  font-size: 16px !important;
  line-height: 32px !important;
  text-align: center !important;
  color: var(--gg-navy) !important;
  transition: background 0.18s ease !important;
  z-index: 2 !important;
}

.gg-exit-popup__close:hover {
  background: #e2e8f0 !important;
}

/* ── Emoji / illustration ─────────────────────────────────────────────────── */
.gg-exit-popup__emoji {
  font-size: 48px !important;
  line-height: 1 !important;
  margin-bottom: 12px !important;
  display: block !important;
}

/* ── Headline & sub ───────────────────────────────────────────────────────── */
.gg-exit-popup__headline {
  font-family: var(--gg-font-heading) !important;
  font-size: 22px !important;
  font-weight: 900 !important;
  color: var(--gg-navy) !important;
  margin-bottom: 6px !important;
  line-height: 1.2 !important;
}

.gg-exit-popup__sub {
  font-size: 14px !important;
  color: var(--gg-muted) !important;
  margin-bottom: 20px !important;
  line-height: 1.5 !important;
}

/* ── Discount code pill ───────────────────────────────────────────────────── */
.gg-exit-popup__code {
  display: inline-flex !important;
  align-items: center !important;
  gap: 10px !important;
  background: #fff8f4 !important;
  border: 2px dashed var(--gg-orange) !important;
  border-radius: 12px !important;
  padding: 12px 20px !important;
  margin-bottom: 20px !important;
  cursor: pointer !important;
  transition: background 0.18s ease !important;
  width: 100% !important;
  justify-content: center !important;
}

.gg-exit-popup__code:hover {
  background: #fff0e6 !important;
}

.gg-exit-popup__code-label {
  font-size: 11px !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.08em !important;
  color: var(--gg-muted) !important;
}

.gg-exit-popup__code-value {
  font-family: 'Courier New', monospace !important;
  font-size: 22px !important;
  font-weight: 900 !important;
  color: var(--gg-orange) !important;
  letter-spacing: 0.08em !important;
}

.gg-exit-popup__code-copy {
  font-size: 11px !important;
  color: var(--gg-orange) !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.06em !important;
}

.gg-exit-popup__code--copied .gg-exit-popup__code-copy {
  color: #16a34a !important;
}

/* ── Email row ────────────────────────────────────────────────────────────── */
.gg-exit-popup__email-row {
  display: flex !important;
  gap: 8px !important;
  margin-bottom: 12px !important;
}

.gg-exit-popup__email-input {
  flex: 1 !important;
  border: 1.5px solid var(--gg-border-light) !important;
  border-radius: 999px !important;
  padding: 11px 18px !important;
  font-size: 14px !important;
  outline: none !important;
  transition: border-color 0.18s ease !important;
}

.gg-exit-popup__email-input:focus {
  border-color: var(--gg-orange) !important;
}

.gg-exit-popup__email-btn {
  background: var(--gg-orange) !important;
  color: #fff !important;
  border: none !important;
  border-radius: 999px !important;
  padding: 11px 22px !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  cursor: pointer !important;
  white-space: nowrap !important;
  transition: background 0.18s ease !important;
}

.gg-exit-popup__email-btn:hover {
  background: #c45a00 !important;
}

/* ── Dismiss link ─────────────────────────────────────────────────────────── */
.gg-exit-popup__dismiss {
  font-size: 12px !important;
  color: var(--gg-muted) !important;
  cursor: pointer !important;
  text-decoration: underline !important;
  background: none !important;
  border: none !important;
}

.gg-exit-popup__dismiss:hover {
  color: var(--gg-navy) !important;
}

/* ── Mobile: full-width sheet ─────────────────────────────────────────────── */
@media (max-width: 480px) {
  .gg-exit-popup {
    width: 100% !important;
    border-radius: 16px 16px 0 0 !important;
  }

  .gg-exit-popup__inner {
    padding: 20px 20px 28px !important;
  }

  .gg-exit-popup__headline {
    font-size: 18px !important;
  }

  .gg-exit-popup__email-row {
    flex-direction: column !important;
  }
}

/* --- end of GG PATCH v29 --- */

/* =============================================================================
   GG PATCH v30 — Recently Viewed Products Strip
   March 2026 · Horizontal scroll row at bottom of PDP.
   JS populates .gg-recently-viewed__list from localStorage.
   ============================================================================= */

.gg-recently-viewed {
  margin: 40px 0 !important;
  padding: 28px 0 !important;
  border-top: 1.5px solid var(--gg-border-light) !important;
}

.gg-recently-viewed__heading {
  font-family: var(--gg-font-heading) !important;
  font-size: 16px !important;
  font-weight: 800 !important;
  color: var(--gg-navy) !important;
  margin-bottom: 16px !important;
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
}

.gg-recently-viewed__heading::before {
  content: "👀" !important;
  font-size: 18px !important;
}

.gg-recently-viewed__list {
  display: flex !important;
  gap: 14px !important;
  overflow-x: auto !important;
  -webkit-overflow-scrolling: touch !important;
  scrollbar-width: none !important;
  padding-bottom: 8px !important;
}

.gg-recently-viewed__list::-webkit-scrollbar {
  display: none !important;
}

/* ── Individual card ─────────────────────────────────────────────────────── */
.gg-rv-card {
  flex: 0 0 130px !important;
  background: #fff !important;
  border: 1.5px solid var(--gg-border-light) !important;
  border-radius: 12px !important;
  overflow: hidden !important;
  text-decoration: none !important;
  transition: transform 0.2s ease, box-shadow 0.2s ease !important;
  display: block !important;
}

.gg-rv-card:hover {
  transform: translateY(-3px) !important;
  box-shadow: 0 8px 20px rgba(0,0,0,0.10) !important;
}

.gg-rv-card__img {
  width: 100% !important;
  aspect-ratio: 1 / 1 !important;
  object-fit: cover !important;
  display: block !important;
}

.gg-rv-card__info {
  padding: 8px 10px !important;
}

.gg-rv-card__title {
  font-size: 11px !important;
  font-weight: 700 !important;
  color: var(--gg-navy) !important;
  line-height: 1.3 !important;
  margin-bottom: 4px !important;
  display: -webkit-box !important;
  -webkit-line-clamp: 2 !important;
  -webkit-box-orient: vertical !important;
  overflow: hidden !important;
}

.gg-rv-card__price {
  font-size: 12px !important;
  font-weight: 800 !important;
  color: var(--gg-orange) !important;
}

/* --- end of GG PATCH v30 --- */

/* =============================================================================
   GG PATCH v31 — Bundle Offer Card
   March 2026 · "Buy any 2 — save 10%" upsell card on PDP and shop page.
   Add <div class="gg-bundle-offer"> in product short description or via
   WooCommerce product tab hook.
   ============================================================================= */

.gg-bundle-offer {
  background: linear-gradient(135deg, #fff8f4 0%, #fff3e8 100%) !important;
  border: 2px solid rgba(232,108,0,0.25) !important;
  border-radius: 16px !important;
  padding: 20px 24px !important;
  margin: 24px 0 !important;
  display: flex !important;
  align-items: center !important;
  gap: 16px !important;
}

.gg-bundle-offer__icon {
  font-size: 36px !important;
  flex-shrink: 0 !important;
  line-height: 1 !important;
}

.gg-bundle-offer__body {
  flex: 1 !important;
  min-width: 0 !important;
}

.gg-bundle-offer__title {
  font-family: var(--gg-font-heading) !important;
  font-size: 16px !important;
  font-weight: 900 !important;
  color: var(--gg-navy) !important;
  margin-bottom: 4px !important;
}

.gg-bundle-offer__title em {
  color: var(--gg-orange) !important;
  font-style: normal !important;
}

.gg-bundle-offer__desc {
  font-size: 13px !important;
  color: var(--gg-muted) !important;
  line-height: 1.45 !important;
}

.gg-bundle-offer__badge {
  flex-shrink: 0 !important;
  background: var(--gg-orange) !important;
  color: #fff !important;
  border-radius: 999px !important;
  padding: 8px 16px !important;
  font-size: 13px !important;
  font-weight: 800 !important;
  text-align: center !important;
  line-height: 1.2 !important;
  text-decoration: none !important;
  transition: background 0.18s ease, transform 0.18s ease !important;
  display: inline-block !important;
}

.gg-bundle-offer__badge:hover {
  background: #c45a00 !important;
  transform: scale(1.04) !important;
  color: #fff !important;
}

.gg-bundle-offer__badge span {
  display: block !important;
  font-size: 10px !important;
  font-weight: 600 !important;
  opacity: 0.85 !important;
}

@media (max-width: 480px) {
  .gg-bundle-offer {
    flex-direction: column !important;
    text-align: center !important;
  }

  .gg-bundle-offer__badge {
    width: 100% !important;
    padding: 12px !important;
  }
}

/* --- end of GG PATCH v31 --- */

/* =============================================================================
   GG PATCH v32 — Blog Index Page
   March 2026 · Article card grid, featured image, category pill,
   excerpt, read-more CTA. Body class: .blog, .archive.
   ============================================================================= */

/* ── Page banner ──────────────────────────────────────────────────────────── */
body.blog:not(.single-post) #primary::before,
body.category #primary::before {
  content: "From the Guppies Blog" !important;
}

/* ── Grid container ───────────────────────────────────────────────────────── */
body.blog:not(.single-post) #main,
body.archive:not(.woocommerce-page) #main {
  display: grid !important;
  grid-template-columns: repeat(3, 1fr) !important;
  gap: 28px !important;
  align-items: start !important;
}

@media (max-width: 1024px) {
  body.blog:not(.single-post) #main,
  body.archive:not(.woocommerce-page) #main {
    grid-template-columns: repeat(2, 1fr) !important;
  }
}

@media (max-width: 600px) {
  body.blog:not(.single-post) #main,
  body.archive:not(.woocommerce-page) #main {
    grid-template-columns: 1fr !important;
    gap: 18px !important;
  }
}

/* ── Article card ─────────────────────────────────────────────────────────── */
body.blog article,
body.archive article {
  background: #fff !important;
  border: 1.5px solid var(--gg-border-light) !important;
  border-radius: 16px !important;
  overflow: hidden !important;
  transition: transform 0.22s ease, box-shadow 0.22s ease !important;
  box-shadow: 0 2px 8px rgba(0,0,0,0.05) !important;
  display: flex !important;
  flex-direction: column !important;
}

body.blog article:hover,
body.archive article:hover {
  transform: translateY(-4px) !important;
  box-shadow: 0 12px 28px rgba(0,0,0,0.10) !important;
}

/* ── Featured image ───────────────────────────────────────────────────────── */
body.blog article .post-thumbnail,
body.archive article .post-thumbnail {
  display: block !important;
  overflow: hidden !important;
  border-radius: 0 !important;
  margin: 0 !important;
  aspect-ratio: 16 / 9 !important;
}

body.blog article .post-thumbnail img,
body.archive article .post-thumbnail img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  transition: transform 0.4s ease !important;
}

body.blog article:hover .post-thumbnail img,
body.archive article:hover .post-thumbnail img {
  transform: scale(1.05) !important;
}

/* ── Card body ────────────────────────────────────────────────────────────── */
body.blog article .entry-header,
body.archive article .entry-header {
  display: block !important; /* override the hide from WC pages */
  padding: 16px 20px 0 !important;
}

body.blog article .entry-title,
body.archive article .entry-title {
  font-size: 16px !important;
  font-weight: 800 !important;
  color: var(--gg-navy) !important;
  line-height: 1.35 !important;
  margin-bottom: 8px !important;
}

body.blog article .entry-title a,
body.archive article .entry-title a {
  color: inherit !important;
  text-decoration: none !important;
}

body.blog article .entry-title a:hover,
body.archive article .entry-title a:hover {
  color: var(--gg-orange) !important;
}

/* ── Category pill ────────────────────────────────────────────────────────── */
body.blog article .cat-links,
body.archive article .cat-links {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 6px !important;
  margin-bottom: 8px !important;
}

body.blog article .cat-links a,
body.archive article .cat-links a {
  background: rgba(232,108,0,0.1) !important;
  color: var(--gg-orange) !important;
  border-radius: 999px !important;
  padding: 3px 10px !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.05em !important;
  text-decoration: none !important;
}

/* ── Excerpt ──────────────────────────────────────────────────────────────── */
body.blog article .entry-summary,
body.archive article .entry-summary {
  padding: 0 20px !important;
  font-size: 13.5px !important;
  color: var(--gg-muted) !important;
  line-height: 1.65 !important;
  flex: 1 !important;
}

/* ── Read more ────────────────────────────────────────────────────────────── */
body.blog article .entry-footer,
body.archive article .entry-footer {
  padding: 12px 20px 18px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  border-top: 1px solid var(--gg-border-light) !important;
  margin-top: 14px !important;
}

body.blog article .more-link,
body.archive article .more-link {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  color: var(--gg-orange) !important;
  text-decoration: none !important;
}

body.blog article .more-link::after {
  content: "→" !important;
  transition: transform 0.18s ease !important;
}

body.blog article .more-link:hover::after {
  transform: translateX(4px) !important;
}

body.blog article .posted-on,
body.archive article .posted-on {
  font-size: 11px !important;
  color: var(--gg-muted) !important;
}

/* --- end of GG PATCH v32 --- */

/* =============================================================================
   GG PATCH v33 — 404 Page
   March 2026 · Friendly layout: big emoji, clear message, search box,
   back-to-shop CTA. Body class: .error404
   ============================================================================= */

body.error404 #primary {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-height: 70vh !important;
  padding: 40px 20px !important;
}

body.error404 .page-content {
  text-align: center !important;
  max-width: 520px !important;
  margin: 0 auto !important;
}

/* ── Illustration ─────────────────────────────────────────────────────────── */
body.error404 .page-content::before {
  content: "🐟" !important;
  display: block !important;
  font-size: 80px !important;
  line-height: 1 !important;
  margin-bottom: 8px !important;
  animation: gg-float 3s ease-in-out infinite !important;
}

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

/* ── Heading ──────────────────────────────────────────────────────────────── */
body.error404 .page-header .page-title {
  font-family: var(--gg-font-heading) !important;
  font-size: 80px !important;
  font-weight: 900 !important;
  color: var(--gg-navy) !important;
  line-height: 1 !important;
  margin-bottom: 0 !important;
  opacity: 0.12 !important;
  position: absolute !important;
  pointer-events: none !important;
}

body.error404 .page-content > p:first-of-type {
  font-family: var(--gg-font-heading) !important;
  font-size: 26px !important;
  font-weight: 900 !important;
  color: var(--gg-navy) !important;
  margin-bottom: 8px !important;
}

body.error404 .page-content > p:nth-of-type(2) {
  font-size: 15px !important;
  color: var(--gg-muted) !important;
  margin-bottom: 28px !important;
  line-height: 1.6 !important;
}

/* ── Search box ───────────────────────────────────────────────────────────── */
body.error404 .search-form {
  display: flex !important;
  gap: 8px !important;
  margin-bottom: 24px !important;
  background: #f8fafc !important;
  border: 1.5px solid var(--gg-border-light) !important;
  border-radius: 999px !important;
  padding: 6px 6px 6px 20px !important;
  transition: border-color 0.18s ease !important;
}

body.error404 .search-form:focus-within {
  border-color: var(--gg-orange) !important;
}

body.error404 .search-form .search-field {
  flex: 1 !important;
  border: none !important;
  background: transparent !important;
  font-size: 15px !important;
  outline: none !important;
  box-shadow: none !important;
}

body.error404 .search-form .search-submit {
  background: var(--gg-orange) !important;
  color: #fff !important;
  border: none !important;
  border-radius: 999px !important;
  padding: 10px 22px !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  cursor: pointer !important;
  white-space: nowrap !important;
  transition: background 0.18s ease !important;
}

body.error404 .search-form .search-submit:hover {
  background: #c45a00 !important;
}

/* ── Quick links row ──────────────────────────────────────────────────────── */
.gg-404-links {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 10px !important;
  justify-content: center !important;
  margin-top: 8px !important;
}

.gg-404-links a {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  padding: 9px 18px !important;
  border: 1.5px solid var(--gg-border-light) !important;
  border-radius: 999px !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  color: var(--gg-navy) !important;
  text-decoration: none !important;
  background: #fff !important;
  transition: border-color 0.18s ease, background 0.18s ease !important;
}

.gg-404-links a:hover {
  border-color: var(--gg-orange) !important;
  background: #fff8f4 !important;
  color: var(--gg-orange) !important;
}

/* --- end of GG PATCH v33 --- */

/* =============================================================================
   GG PATCH v34 — Order Confirmation Page
   March 2026 · Celebratory layout for .woocommerce-order-received:
   confetti-like CSS particle animation, social share row, thank you message.
   ============================================================================= */

/* ── Page banner override ─────────────────────────────────────────────────── */
body.woocommerce-order-received #primary::before {
  content: "Order Confirmed! 🎉" !important;
}

/* ── Confetti particles (pure CSS, 12 dots) ──────────────────────────────── */
body.woocommerce-order-received::after {
  content: "🎊 🎉 ✨ 🌟 🎊 🎉 ✨ 🌟 🎊 🎉 ✨ 🌟" !important;
  display: block !important;
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  width: 100% !important;
  font-size: 24px !important;
  word-spacing: 48px !important;
  letter-spacing: 32px !important;
  pointer-events: none !important;
  z-index: 1 !important;
  animation: gg-confetti-fall 3s ease-in forwards !important;
  opacity: 0 !important;
  transform: translateY(-80px) !important;
}

@keyframes gg-confetti-fall {
  0%   { opacity: 1; transform: translateY(-40px) rotate(0deg); }
  60%  { opacity: 1; transform: translateY(120px) rotate(15deg); }
  100% { opacity: 0; transform: translateY(200px) rotate(30deg); }
}

/* ── Thank you card ───────────────────────────────────────────────────────── */
body.woocommerce-order-received .woocommerce-order {
  background: linear-gradient(135deg, #f0fdf4 0%, #fff 60%) !important;
  border: 1.5px solid #86efac !important;
  border-radius: 20px !important;
  padding: 36px !important;
  text-align: center !important;
  position: relative !important;
  overflow: hidden !important;
}

body.woocommerce-order-received .woocommerce-order::before {
  content: "" !important;
  position: absolute !important;
  top: 0 !important; left: 0 !important; right: 0 !important;
  height: 5px !important;
  background: linear-gradient(90deg, #16a34a, #4ade80, var(--gg-orange)) !important;
}

/* ── Order notice ─────────────────────────────────────────────────────────── */
body.woocommerce-order-received .woocommerce-notice {
  font-size: 18px !important;
  font-weight: 800 !important;
  color: var(--gg-navy) !important;
  margin-bottom: 20px !important;
  display: block !important;
  text-align: center !important;
  background: transparent !important;
  border: none !important;
  padding: 0 !important;
}

/* ── Order detail table ───────────────────────────────────────────────────── */
body.woocommerce-order-received .woocommerce-order-overview {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 12px !important;
  justify-content: center !important;
  list-style: none !important;
  margin: 0 0 28px !important;
  padding: 0 !important;
}

body.woocommerce-order-received .woocommerce-order-overview li {
  background: #fff !important;
  border: 1.5px solid var(--gg-border-light) !important;
  border-radius: 12px !important;
  padding: 12px 20px !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  color: var(--gg-muted) !important;
  text-align: center !important;
  min-width: 120px !important;
}

body.woocommerce-order-received .woocommerce-order-overview li strong {
  display: block !important;
  font-size: 15px !important;
  color: var(--gg-navy) !important;
  margin-top: 4px !important;
}

/* ── Social share row ─────────────────────────────────────────────────────── */
.gg-order-share {
  margin-top: 28px !important;
  padding-top: 24px !important;
  border-top: 1px solid var(--gg-border-light) !important;
}

.gg-order-share__label {
  font-size: 13px !important;
  color: var(--gg-muted) !important;
  margin-bottom: 12px !important;
  font-weight: 600 !important;
}

.gg-order-share__buttons {
  display: flex !important;
  gap: 10px !important;
  justify-content: center !important;
  flex-wrap: wrap !important;
}

.gg-order-share__btn {
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  padding: 10px 18px !important;
  border-radius: 999px !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  text-decoration: none !important;
  transition: opacity 0.18s ease, transform 0.18s ease !important;
  color: #fff !important;
}

.gg-order-share__btn:hover {
  opacity: 0.88 !important;
  transform: translateY(-2px) !important;
  color: #fff !important;
}

.gg-order-share__btn--whatsapp { background: #25D366 !important; }
.gg-order-share__btn--instagram { background: linear-gradient(45deg,#f09433,#e6683c,#dc2743,#cc2366,#bc1888) !important; }
.gg-order-share__btn--copy     { background: var(--gg-navy) !important; }

/* --- end of GG PATCH v34 --- */

/* ============================================================
   GG PATCH v35 — Search Results Page Enhancement
   Sprint 6 · March 2026
   ============================================================ */

/* Search results header */
.search-results .page-title,
body.search .page-title {
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  flex-wrap: wrap !important;
}

/* Highlighted search term in results */
.search-results mark,
body.search mark {
  background: rgba(232, 108, 0, 0.15) !important;
  color: var(--gg-orange, #e86c00) !important;
  font-weight: 700 !important;
  padding: 1px 4px !important;
  border-radius: 3px !important;
}

/* Result count pill */
.gg-result-count {
  display: inline-flex !important;
  align-items: center !important;
  background: var(--gg-navy, #1a355e) !important;
  color: #fff !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  padding: 4px 12px !important;
  border-radius: 999px !important;
  letter-spacing: 0.03em !important;
  white-space: nowrap !important;
}

/* No results state */
.gg-no-results {
  text-align: center !important;
  padding: 60px 20px !important;
}
.gg-no-results .gg-no-results-icon {
  font-size: 56px !important;
  display: block !important;
  margin-bottom: 16px !important;
  opacity: .7 !important;
}
.gg-no-results h2 {
  font-size: 22px !important;
  font-weight: 800 !important;
  color: var(--gg-navy, #1a355e) !important;
  margin-bottom: 8px !important;
}
.gg-no-results p {
  color: #64748b !important;
  font-size: 15px !important;
  margin-bottom: 24px !important;
}
.gg-no-results .gg-search-form-inline {
  display: flex !important;
  max-width: 480px !important;
  margin: 0 auto !important;
  gap: 0 !important;
  border: 2px solid var(--gg-navy, #1a355e) !important;
  border-radius: 999px !important;
  overflow: hidden !important;
}
.gg-no-results .gg-search-form-inline input[type="search"] {
  flex: 1 !important;
  border: none !important;
  outline: none !important;
  padding: 12px 20px !important;
  font-size: 14px !important;
  background: #fff !important;
}
.gg-no-results .gg-search-form-inline button {
  background: var(--gg-navy, #1a355e) !important;
  color: #fff !important;
  border: none !important;
  padding: 12px 24px !important;
  font-weight: 700 !important;
  font-size: 14px !important;
  cursor: pointer !important;
  transition: background .2s !important;
}
.gg-no-results .gg-search-form-inline button:hover {
  background: var(--gg-orange, #e86c00) !important;
}

/* Search filter chips */
.gg-search-filters {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 8px !important;
  margin: 16px 0 24px !important;
  padding: 0 !important;
  list-style: none !important;
}
.gg-search-filters li {
  display: inline-flex !important;
}
.gg-search-filter-chip {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  padding: 6px 14px !important;
  border-radius: 999px !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  border: 1.5px solid var(--gg-border-light, #e2e8f0) !important;
  background: #fff !important;
  color: #475569 !important;
  cursor: pointer !important;
  transition: all .2s !important;
  text-decoration: none !important;
}
.gg-search-filter-chip:hover,
.gg-search-filter-chip.is-active {
  background: var(--gg-navy, #1a355e) !important;
  border-color: var(--gg-navy, #1a355e) !important;
  color: #fff !important;
}
.gg-search-filter-chip.is-active::after {
  content: '×' !important;
  font-size: 14px !important;
  line-height: 1 !important;
  font-weight: 900 !important;
}

/* Search suggestion pills under no-results */
.gg-search-suggestions {
  display: flex !important;
  flex-wrap: wrap !important;
  justify-content: center !important;
  gap: 8px !important;
  margin-top: 16px !important;
  padding: 0 !important;
  list-style: none !important;
}
.gg-search-suggestions li a {
  display: inline-block !important;
  padding: 6px 16px !important;
  background: #f1f5f9 !important;
  border-radius: 999px !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  color: var(--gg-navy, #1a355e) !important;
  text-decoration: none !important;
  transition: all .2s !important;
}
.gg-search-suggestions li a:hover {
  background: var(--gg-orange, #e86c00) !important;
  color: #fff !important;
}

@media (max-width: 600px) {
  .gg-search-filters { gap: 6px !important; }
  .gg-search-filter-chip { font-size: 11px !important; padding: 5px 12px !important; }
  .gg-no-results { padding: 40px 16px !important; }
  .gg-no-results .gg-no-results-icon { font-size: 44px !important; }
}

/* --- end of GG PATCH v35 --- */

/* ============================================================
   GG PATCH v36 — Age Filter Sidebar + Breadcrumb Enhancement
   Sprint 6 · March 2026
   ============================================================ */

/* ── Age filter sidebar ── */
.gg-filter-sidebar {
  background: #fff !important;
  border: 1px solid var(--gg-border-light, #e2e8f0) !important;
  border-radius: 14px !important;
  padding: 20px !important;
  margin-bottom: 24px !important;
}
.gg-filter-sidebar h4 {
  font-size: 13px !important;
  font-weight: 800 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.06em !important;
  color: var(--gg-navy, #1a355e) !important;
  margin-bottom: 14px !important;
}
.gg-filter-age-group {
  display: flex !important;
  flex-direction: column !important;
  gap: 8px !important;
  padding: 0 !important;
  list-style: none !important;
  margin: 0 !important;
}
.gg-filter-age-group li label {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  cursor: pointer !important;
  font-size: 14px !important;
  color: #475569 !important;
  padding: 8px 10px !important;
  border-radius: 8px !important;
  transition: background .15s !important;
  user-select: none !important;
}
.gg-filter-age-group li label:hover {
  background: #f8fafc !important;
  color: var(--gg-navy, #1a355e) !important;
}
.gg-filter-age-group li input[type="checkbox"] {
  appearance: none !important;
  -webkit-appearance: none !important;
  width: 18px !important;
  height: 18px !important;
  border: 2px solid #cbd5e1 !important;
  border-radius: 5px !important;
  flex-shrink: 0 !important;
  transition: all .15s !important;
  position: relative !important;
  cursor: pointer !important;
}
.gg-filter-age-group li input[type="checkbox"]:checked {
  background: var(--gg-navy, #1a355e) !important;
  border-color: var(--gg-navy, #1a355e) !important;
}
.gg-filter-age-group li input[type="checkbox"]:checked::after {
  content: '' !important;
  position: absolute !important;
  left: 3px !important;
  top: 0px !important;
  width: 6px !important;
  height: 10px !important;
  border: 2px solid #fff !important;
  border-top: none !important;
  border-left: none !important;
  transform: rotate(45deg) !important;
}
.gg-filter-age-group li .gg-age-count {
  margin-left: auto !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  background: #f1f5f9 !important;
  color: #64748b !important;
  border-radius: 999px !important;
  padding: 2px 8px !important;
}
.gg-filter-apply {
  display: block !important;
  width: 100% !important;
  margin-top: 16px !important;
  padding: 11px 0 !important;
  background: var(--gg-orange, #e86c00) !important;
  color: #fff !important;
  font-size: 13px !important;
  font-weight: 800 !important;
  letter-spacing: 0.04em !important;
  border: none !important;
  border-radius: 8px !important;
  cursor: pointer !important;
  transition: opacity .2s !important;
  text-align: center !important;
}
.gg-filter-apply:hover { opacity: .9 !important; }
.gg-filter-clear {
  display: block !important;
  width: 100% !important;
  margin-top: 8px !important;
  text-align: center !important;
  font-size: 12px !important;
  color: #64748b !important;
  text-decoration: underline !important;
  cursor: pointer !important;
  background: none !important;
  border: none !important;
}
.gg-filter-clear:hover { color: var(--gg-navy, #1a355e) !important; }

/* ── Breadcrumb Enhancement ── */
.woocommerce-breadcrumb,
.breadcrumb,
.gg-breadcrumb {
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  gap: 0 !important;
  font-size: 12px !important;
  color: #94a3b8 !important;
  margin-bottom: 20px !important;
  padding: 10px 0 !important;
  border-bottom: 1px solid var(--gg-border-light, #e2e8f0) !important;
  list-style: none !important;
}
.woocommerce-breadcrumb a,
.breadcrumb a,
.gg-breadcrumb a {
  color: #64748b !important;
  text-decoration: none !important;
  font-weight: 600 !important;
  transition: color .15s !important;
  padding: 2px 4px !important;
}
.woocommerce-breadcrumb a:hover,
.breadcrumb a:hover,
.gg-breadcrumb a:hover {
  color: var(--gg-navy, #1a355e) !important;
}
/* Chevron separator using CSS */
.woocommerce-breadcrumb > *:not(:last-child)::after {
  content: '›' !important;
  margin: 0 4px !important;
  color: #cbd5e1 !important;
  font-weight: 400 !important;
}
/* Current page — final crumb */
.woocommerce-breadcrumb > *:last-child,
.woocommerce-breadcrumb > span:last-child {
  color: var(--gg-navy, #1a355e) !important;
  font-weight: 700 !important;
}

/* Home icon on first breadcrumb */
.woocommerce-breadcrumb a[href*="geniusguppies.com"]::before,
.woocommerce-breadcrumb a[href$="/"]::before {
  content: '⌂ ' !important;
  font-size: 13px !important;
}

@media (max-width: 600px) {
  .gg-filter-sidebar { padding: 16px !important; border-radius: 10px !important; }
  .woocommerce-breadcrumb { font-size: 11px !important; }
}

/* --- end of GG PATCH v36 --- */

/* ============================================================
   GG PATCH v37 — Countdown Timer + Social Proof Counter
   Sprint 6 · March 2026
   ============================================================ */

/* ── Sale countdown timer ── */
.gg-countdown {
  display: inline-flex !important;
  align-items: center !important;
  gap: 4px !important;
  background: #fff3e8 !important;
  border: 1.5px solid var(--gg-orange, #e86c00) !important;
  border-radius: 10px !important;
  padding: 8px 14px !important;
  margin: 12px 0 !important;
}
.gg-countdown-label {
  font-size: 11px !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.06em !important;
  color: var(--gg-orange, #e86c00) !important;
  margin-right: 8px !important;
  white-space: nowrap !important;
}
.gg-countdown-unit {
  display: inline-flex !important;
  flex-direction: column !important;
  align-items: center !important;
  min-width: 36px !important;
}
.gg-countdown-unit .gg-cd-num {
  font-size: 20px !important;
  font-weight: 900 !important;
  color: var(--gg-navy, #1a355e) !important;
  line-height: 1 !important;
  font-variant-numeric: tabular-nums !important;
  letter-spacing: -0.02em !important;
}
.gg-countdown-unit .gg-cd-lbl {
  font-size: 9px !important;
  font-weight: 600 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.08em !important;
  color: #94a3b8 !important;
  margin-top: 2px !important;
}
.gg-countdown-sep {
  font-size: 18px !important;
  font-weight: 900 !important;
  color: var(--gg-orange, #e86c00) !important;
  align-self: flex-start !important;
  margin-top: 2px !important;
  padding: 0 2px !important;
  animation: gg-sep-blink 1s step-end infinite !important;
}
@keyframes gg-sep-blink {
  0%, 100% { opacity: 1; }
  50% { opacity: 0; }
}

/* Compact inline variant for product cards */
.gg-countdown-sm {
  display: inline-flex !important;
  align-items: center !important;
  gap: 4px !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  color: var(--gg-orange, #e86c00) !important;
  background: #fff3e8 !important;
  padding: 3px 8px !important;
  border-radius: 5px !important;
  margin-top: 4px !important;
}
.gg-countdown-sm .gg-cd-num { font-size: 12px !important; font-weight: 900 !important; color: var(--gg-navy, #1a355e) !important; }

/* ── Social proof counter ── */
.gg-social-proof {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  color: #16a34a !important;
  background: #f0fdf4 !important;
  border: 1px solid #bbf7d0 !important;
  border-radius: 8px !important;
  padding: 6px 12px !important;
  margin: 8px 0 !important;
}
.gg-social-proof .gg-sp-icon {
  font-size: 14px !important;
  animation: gg-sp-pulse 2.5s ease-in-out infinite !important;
}
.gg-social-proof .gg-sp-count {
  font-weight: 900 !important;
  color: var(--gg-navy, #1a355e) !important;
}
@keyframes gg-sp-pulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.2); }
}

/* "X bought in last 24h" variant */
.gg-proof-bought {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  color: #7c3aed !important;
  background: #f5f3ff !important;
  border: 1px solid #ddd6fe !important;
  border-radius: 8px !important;
  padding: 6px 12px !important;
  margin: 6px 0 !important;
}
.gg-proof-bought .gg-pb-num {
  font-weight: 900 !important;
  font-size: 14px !important;
  color: #6d28d9 !important;
}

/* Activity ticker — live feed strip */
.gg-activity-ticker {
  overflow: hidden !important;
  height: 36px !important;
  position: relative !important;
}
.gg-activity-ticker ul {
  list-style: none !important;
  padding: 0 !important;
  margin: 0 !important;
  animation: gg-ticker-scroll 8s ease-in-out infinite !important;
}
.gg-activity-ticker li {
  height: 36px !important;
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  font-size: 12px !important;
  color: #475569 !important;
}
.gg-activity-ticker li .gg-at-avatar {
  width: 24px !important;
  height: 24px !important;
  border-radius: 50% !important;
  background: var(--gg-navy, #1a355e) !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  color: #fff !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  flex-shrink: 0 !important;
}
@keyframes gg-ticker-scroll {
  0%   { transform: translateY(0); }
  28%  { transform: translateY(0); }
  33%  { transform: translateY(-36px); }
  61%  { transform: translateY(-36px); }
  66%  { transform: translateY(-72px); }
  94%  { transform: translateY(-72px); }
  100% { transform: translateY(0); }
}

/* ── Newsletter popup (time-delayed) ── */
.gg-newsletter-popup-backdrop {
  position: fixed !important;
  inset: 0 !important;
  background: rgba(0,0,0,.55) !important;
  z-index: 99998 !important;
  opacity: 0 !important;
  transition: opacity .3s !important;
  pointer-events: none !important;
}
.gg-newsletter-popup-backdrop.is-open {
  opacity: 1 !important;
  pointer-events: all !important;
}
.gg-newsletter-popup {
  position: fixed !important;
  top: 50% !important;
  left: 50% !important;
  transform: translate(-50%, -50%) scale(.92) !important;
  width: min(480px, 92vw) !important;
  background: #fff !important;
  border-radius: 20px !important;
  overflow: hidden !important;
  z-index: 99999 !important;
  opacity: 0 !important;
  transition: all .35s cubic-bezier(.34,1.56,.64,1) !important;
  pointer-events: none !important;
  box-shadow: 0 24px 60px rgba(26,53,94,.25) !important;
}
.gg-newsletter-popup.is-open {
  opacity: 1 !important;
  transform: translate(-50%, -50%) scale(1) !important;
  pointer-events: all !important;
}
.gg-newsletter-popup-img {
  height: 160px !important;
  background: linear-gradient(135deg, var(--gg-navy, #1a355e) 0%, #2d5491 100%) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 60px !important;
  position: relative !important;
  overflow: hidden !important;
}
.gg-newsletter-popup-img::before {
  content: '🐟🐠🐡' !important;
  font-size: 40px !important;
  opacity: .3 !important;
  position: absolute !important;
  bottom: -10px !important;
  right: -10px !important;
  filter: blur(2px) !important;
}
.gg-newsletter-popup-body {
  padding: 24px !important;
  text-align: center !important;
}
.gg-newsletter-popup-body h3 {
  font-size: 20px !important;
  font-weight: 900 !important;
  color: var(--gg-navy, #1a355e) !important;
  margin-bottom: 8px !important;
  line-height: 1.3 !important;
}
.gg-newsletter-popup-body p {
  font-size: 14px !important;
  color: #64748b !important;
  margin-bottom: 20px !important;
  line-height: 1.6 !important;
}
.gg-newsletter-email-row {
  display: flex !important;
  gap: 0 !important;
  border: 2px solid var(--gg-navy, #1a355e) !important;
  border-radius: 999px !important;
  overflow: hidden !important;
  margin-bottom: 12px !important;
}
.gg-newsletter-email-row input[type="email"] {
  flex: 1 !important;
  border: none !important;
  outline: none !important;
  padding: 12px 18px !important;
  font-size: 14px !important;
  background: #fff !important;
}
.gg-newsletter-email-row button {
  background: var(--gg-navy, #1a355e) !important;
  color: #fff !important;
  border: none !important;
  padding: 12px 22px !important;
  font-size: 13px !important;
  font-weight: 800 !important;
  cursor: pointer !important;
  transition: background .2s !important;
  white-space: nowrap !important;
}
.gg-newsletter-email-row button:hover {
  background: var(--gg-orange, #e86c00) !important;
}
.gg-newsletter-popup-dismiss {
  font-size: 12px !important;
  color: #94a3b8 !important;
  cursor: pointer !important;
  background: none !important;
  border: none !important;
  text-decoration: underline !important;
  display: block !important;
  margin: 0 auto !important;
}
.gg-newsletter-popup-dismiss:hover { color: #475569 !important; }
.gg-newsletter-popup-close {
  position: absolute !important;
  top: 12px !important;
  right: 14px !important;
  background: rgba(255,255,255,.25) !important;
  border: none !important;
  color: #fff !important;
  font-size: 18px !important;
  line-height: 1 !important;
  cursor: pointer !important;
  width: 28px !important;
  height: 28px !important;
  border-radius: 50% !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-weight: 900 !important;
}
.gg-newsletter-popup-close:hover { background: rgba(255,255,255,.4) !important; }

@media (max-width: 480px) {
  .gg-countdown { flex-wrap: wrap !important; gap: 8px !important; justify-content: center !important; }
  .gg-newsletter-popup-img { height: 120px !important; font-size: 44px !important; }
  .gg-newsletter-popup-body { padding: 18px !important; }
}

/* --- end of GG PATCH v37 --- */

/* ============================================================
   GG PATCH v38 — Audit Fixes: Z-index, Legibility, Cursors
   Discovered by code audit · March 2026
   ============================================================ */

/* ── FIX 1: Z-index stacking conflict ────────────────────────────────
   mini-cart backdrop was z-index:99998 (same as newsletter backdrop).
   Raise newsletter stack above mini-cart stack.                        */

.gg-newsletter-popup-backdrop {
  z-index: 100000 !important;
}
.gg-newsletter-popup {
  z-index: 100001 !important;
}

/* Confirmed stacking order (highest→lowest):
   999999  — page loading overlay
   999991  — exit popup
   999990  — exit popup backdrop
   100001  — newsletter popup          ← raised
   100000  — newsletter backdrop       ← raised
    99998  — mini-cart (panel+backdrop)
     9999  — site header
     9998  — mobile nav / scroll-top
     9997  — discount bar
     9996  — WhatsApp float
     9990  — sticky ATC / free-ship-bar  */

/* ── FIX 2: Font legibility improvements on small screens ─────────── */

/* Countdown unit label — raised 9px → 10px */
.gg-countdown-unit .gg-cd-lbl {
  font-size: 10px !important;
}

/* Recently viewed card title — raised 11px → 12px */
.gg-rv-card__title {
  font-size: 12px !important;
}

/* Mobile breadcrumb — ensure 12px minimum */
@media (max-width: 600px) {
  .woocommerce-breadcrumb,
  .gg-breadcrumb {
    font-size: 12px !important;
  }
}

/* ── FIX 3: Cursor pointer on interactive elements ────────────────── */

/* Any GG button/trigger without cursor declared */
.gg-mobile-trigger,
.gg-free-ship-bar__close,
.gg-sticky-atc__btn,
.gg-wishlist-btn,
.gg-exit-popup__code,
.gg-order-share__btn,
.gg-newsletter-email-row button,
.gg-newsletter-popup-close,
.gg-newsletter-popup-dismiss,
.gg-filter-apply,
.gg-filter-clear,
.gg-scroll-top,
#gg-scroll-top {
  cursor: pointer !important;
}

/* ── FIX 4: Age bubble link — add focus-visible state for keyboard nav */
.gg-age-bubble-link:focus-visible .gg-age-bubble__circle {
  outline: 3px solid var(--gg-orange, #e86c00) !important;
  outline-offset: 4px !important;
}

/* ── FIX 5: Blog card hover transition — ensure consistency ───────── */
body.blog article,
body.archive:not(.woocommerce-page) article {
  transition: transform 0.22s ease, box-shadow 0.22s ease !important;
}

/* ── FIX 6: Why-feature card hover transition ─────────────────────── */
.gg-why-feature,
[class*="why-feature"] {
  transition: transform 0.22s ease, box-shadow 0.22s ease !important;
}

/* ── FIX 7: Mini-cart panel — ensure it always sits above newsletter backdrop */
#gg-mini-cart,
.gg-mini-cart__panel {
  z-index: 99999 !important;
}
.gg-mini-cart__backdrop {
  z-index: 99998 !important;
}

/* ── FIX 8: Exit popup — confirm it always appears above newsletter popup */
.gg-exit-popup-backdrop {
  z-index: 100002 !important;
}
.gg-exit-popup {
  z-index: 100003 !important;
}

/* ── FIX 9: Improve tap target size on mobile for small interactive elements */
@media (max-width: 767px) {
  .gg-wishlist-btn,
  .gg-newsletter-popup-close,
  .gg-exit-popup__dismiss {
    min-width: 44px !important;
    min-height: 44px !important;
  }
  /* Checkout steps label — ensure readable */
  .gg-checkout-steps__label {
    font-size: 12px !important;
  }
}

/* ── FIX 10: Social proof / proof-bought — ensure line-height for mobile */
.gg-social-proof,
.gg-proof-bought {
  line-height: 1.5 !important;
}

/* --- end of GG PATCH v38 --- */

/* =============================================================================
   GG PATCH v39 — Audit Fixes: 404 page watermark + product grid
   March 2026
   ============================================================================= */

/* ── FIX 1: Contain the ghost h1 watermark within .page-header ───────────────
   The h1.page-title is position:absolute with opacity:0.12 — it overflows a
   zero-height .page-header and bleeds over the page content. Clip it.         */
body.error404 .page-header {
  position: relative !important;
  overflow: hidden !important;
  /* Give it some height so the ghost text has a container to bleed into safely */
  min-height: 1px !important;
}

/* ── FIX 2: 404 two-column layout → stack vertically ────────────────────────
   WooCommerce renders a .fourohfour-columns-2 div with two <section> cols of
   ~249px each. At that width the ATC button text wraps vertically. Stack them
   so each section is the full 520px page-content width.                        */
body.error404 .fourohfour-columns-2 {
  display: flex !important;
  flex-direction: column !important;
  gap: 24px !important;
}

body.error404 .fourohfour-columns-2 section,
body.error404 .fourohfour-columns-2 .col-1,
body.error404 .fourohfour-columns-2 .col-2 {
  width: 100% !important;
  float: none !important;
}

/* Product grid in 404 — 2 equal columns, full width */
body.error404 ul.products {
  display: grid !important;
  grid-template-columns: repeat(2, 1fr) !important;
  gap: 16px !important;
  width: 100% !important;
  max-width: none !important;
}

/* Override WooCommerce's very specific .error404 .fourohfour-columns-2 .col-1
   ul.products li.product { width: 45.4545%; flex-basis: 31% } rule.
   We use the same selector chain + !important to win.                         */
.error404 .fourohfour-columns-2 .col-1 ul.products li.product,
body.error404 ul.products li.product {
  width: auto !important;
  flex-basis: auto !important;
  max-width: none !important;
  min-width: 0 !important;
  float: none !important;
  margin: 0 !important;
}

/* Make ATC buttons on 404 always horizontal */
body.error404 ul.products .button,
body.error404 ul.products .add_to_cart_button {
  white-space: nowrap !important;
  width: 100% !important;
  text-align: center !important;
  display: block !important;
}

/* ── FIX 3: 404 sidebar widget area — sensible product list widget styling  */
body.error404 .widget_products ul.product_list_widget,
body.error404 .widget-area ul.product_list_widget {
  display: flex !important;
  flex-direction: column !important;
  gap: 12px !important;
}

/* --- end of GG PATCH v39 --- */

/* =============================================================================
   GG PATCH v40 — Mobile sticky ATC + WhatsApp overlap fix
   March 2026
   ============================================================================= */

/* ── FIX 1: WhatsApp button overlaps sticky ATC on mobile ───────────────────
   The .gg-sticky-atc bar is full-width at bottom. The WhatsApp float sits at
   right:16px overlapping the ATC button. Add right padding so the button
   stays clear of the float.                                                    */
@media (max-width: 767px) {
  .gg-sticky-atc {
    padding-right: 76px !important; /* clear WhatsApp button (60px) + gap */
  }

  /* Widen the button slightly to compensate — it gets compressed by the padding */
  .gg-sticky-atc__btn {
    flex-shrink: 0 !important;
    padding: 10px 16px !important;
  }
}

/* ── FIX 2: Also suppress the old #gg-sticky-atc from gg-header.js ─────────
   gg-enhancements.js now removes it via DOM before creating its own bar.
   This CSS rule ensures that even if the old bar persists it stays hidden.    */
#gg-sticky-atc {
  display: none !important;
}

/* --- end of GG PATCH v40 --- */

/* ============================================================
   GG PATCH v41 — Search Results: JS Interactivity + PHP Injection
   Sprint 7 · March 2026
   ============================================================ */

/* Sort / order bar on search results page */
.search-results .woocommerce-ordering,
body.search .woocommerce-ordering {
  margin-bottom: 16px !important;
}

/* Search page hero bar (count + filters row wrapper) */
.gg-search-header-bar {
  display: flex !important;
  align-items: center !important;
  flex-wrap: wrap !important;
  gap: 12px !important;
  margin-bottom: 24px !important;
  padding-bottom: 16px !important;
  border-bottom: 1px solid #e2e8f0 !important;
}

/* Type-group headings injected by JS */
.gg-search-type-heading {
  font-size: 13px !important;
  font-weight: 700 !important;
  color: var(--gg-navy, #1e3a5f) !important;
  text-transform: uppercase !important;
  letter-spacing: 0.06em !important;
  margin: 28px 0 12px !important;
  padding-bottom: 6px !important;
  border-bottom: 2px solid var(--gg-orange, #ff6b35) !important;
  display: block !important;
}

/* Hide entire result-type section when filtered out */
.gg-search-section[hidden] {
  display: none !important;
}

/* Empty state when a filtered section has 0 items */
.gg-search-empty-section {
  text-align: center !important;
  padding: 40px 20px !important;
  color: #64748b !important;
  font-size: 14px !important;
}

@media (max-width: 600px) {
  .gg-search-header-bar {
    flex-direction: column !important;
    align-items: flex-start !important;
  }
}

/* --- end of GG PATCH v41 --- */

/* ============================================================
   GG PATCH v42 — Age Filter Sidebar: PHP query hook + sticky CSS
   Sprint 7 · March 2026
   ============================================================ */

/* ── Sticky sidebar positioning ── */
.gg-filter-sidebar {
  position: sticky !important;
  top: 120px !important;          /* clears fixed header (~90px) + breathing room */
  max-height: calc(100vh - 140px) !important;
  overflow-y: auto !important;
}

/* ── Active state: Apply button shows count badge ── */
.gg-filter-apply[data-active-count]::after {
  content: attr(data-active-count) !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 20px !important;
  height: 20px !important;
  border-radius: 50% !important;
  background: #fff !important;
  color: var(--gg-orange, #ff6b35) !important;
  font-size: 11px !important;
  font-weight: 900 !important;
  margin-left: 8px !important;
}

/* ── Loading overlay on product grid while filtering ── */
.gg-filter-loading {
  position: relative !important;
}
.gg-filter-loading::after {
  content: '' !important;
  position: absolute !important;
  inset: 0 !important;
  background: rgba(255,255,255,.7) !important;
  z-index: 10 !important;
  border-radius: 12px !important;
  backdrop-filter: blur(2px) !important;
}
.gg-filter-loading::before {
  content: '' !important;
  position: absolute !important;
  top: 50% !important;
  left: 50% !important;
  transform: translate(-50%,-50%) !important;
  width: 32px !important;
  height: 32px !important;
  border: 3px solid #e2e8f0 !important;
  border-top-color: var(--gg-orange, #ff6b35) !important;
  border-radius: 50% !important;
  animation: gg-spin .7s linear infinite !important;
  z-index: 11 !important;
}
@keyframes gg-spin { to { transform: translate(-50%,-50%) rotate(360deg); } }

/* ── Active filter indicator banner (injected by JS) ── */
.gg-filter-active-bar {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  flex-wrap: wrap !important;
  background: #eff6ff !important;
  border: 1px solid #bfdbfe !important;
  border-radius: 8px !important;
  padding: 8px 14px !important;
  margin-bottom: 16px !important;
  font-size: 13px !important;
  color: var(--gg-navy, #1e3a5f) !important;
}
.gg-filter-active-bar .gg-filter-chip {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  background: var(--gg-navy, #1e3a5f) !important;
  color: #fff !important;
  border-radius: 999px !important;
  padding: 3px 10px 3px 12px !important;
  font-size: 12px !important;
  font-weight: 700 !important;
}
.gg-filter-active-bar .gg-filter-chip button {
  background: none !important;
  border: none !important;
  color: #fff !important;
  cursor: pointer !important;
  font-size: 14px !important;
  line-height: 1 !important;
  padding: 0 !important;
  opacity: .8 !important;
}
.gg-filter-active-bar .gg-filter-chip button:hover { opacity: 1 !important; }

@media (max-width: 768px) {
  /* On mobile sidebar stacks above products — remove sticky */
  .gg-filter-sidebar {
    position: static !important;
    max-height: none !important;
  }
  .gg-filter-active-bar { font-size: 12px !important; }
}

/* --- end of GG PATCH v42 --- */

/* GG PATCH v43 — Breadcrumb Enhancement: chevron separators + schema styling */

/* ── Wrapper ── */
.woocommerce-breadcrumb {
  font-family: 'Inter', 'Nunito', sans-serif !important;
  font-size: 13px !important;
  line-height: 1.5 !important;
  color: #64748b !important;
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  gap: 0 !important;
  padding: 10px 0 16px !important;
  margin: 0 0 20px !important;
  border-bottom: 1px solid #e2e8f0 !important;
  background: transparent !important;
}

/* ── Links ── */
.woocommerce-breadcrumb a {
  color: #1e3a5f !important;
  text-decoration: none !important;
  font-weight: 500 !important;
  transition: color 0.18s ease !important;
  white-space: nowrap !important;
}

.woocommerce-breadcrumb a:hover,
.woocommerce-breadcrumb a:focus {
  color: #ff6b35 !important;
  text-decoration: underline !important;
  outline: none !important;
}

/* ── Chevron separator (injected via PHP filter as <span class="gg-bc-sep">) ── */
.woocommerce-breadcrumb .gg-bc-sep {
  display: inline-block !important;
  color: #94a3b8 !important;
  font-size: 14px !important;
  font-style: normal !important;
  font-weight: 400 !important;
  margin: 0 7px !important;
  line-height: 1 !important;
  user-select: none !important;
  pointer-events: none !important;
  vertical-align: middle !important;
}

/* ── Current page (plain text node — last child, not a link) ── */
.woocommerce-breadcrumb > span:not(.gg-bc-sep):not(.breadcrumb-separator):last-child,
.woocommerce-breadcrumb > :last-child:not(a):not(.gg-bc-sep):not(.breadcrumb-separator) {
  color: #ff6b35 !important;
  font-weight: 600 !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  max-width: 220px !important;
}

/* ── Home icon — prepend a house emoji before first link ── */
.woocommerce-breadcrumb a:first-child::before {
  content: '🏠 ' !important;
  font-size: 12px !important;
}

/* ── Mobile: shrink slightly ── */
@media (max-width: 600px) {
  .woocommerce-breadcrumb {
    font-size: 12px !important;
    padding: 8px 0 12px !important;
  }
  .woocommerce-breadcrumb a:first-child::before {
    content: '' !important;
  }
  .woocommerce-breadcrumb > span:not(.gg-bc-sep):not(.breadcrumb-separator):last-child,
  .woocommerce-breadcrumb > :last-child:not(a):not(.gg-bc-sep):not(.breadcrumb-separator) {
    max-width: 150px !important;
  }
}

/* --- end of GG PATCH v43 --- */

/* GG PATCH v44a — QA fixes: login error-notice gap + change-password alignment */

/* ── Fix 1: Login page — tighten gap caused by error notice ─────────────── */

/* Strip excess top-margin and halve the bottom gap on the notices wrapper
   so the error banner sits flush and doesn't push the form columns far down */
body.woocommerce-account:not(.woocommerce-logged-in) .woocommerce-notices-wrapper {
  margin-top: 0 !important;
  margin-bottom: 12px !important;
}

/* Compact the error notice itself — remove the generic 20px bottom margin
   that stacks on top of the wrapper's own margin */
body.woocommerce-account:not(.woocommerce-logged-in) .woocommerce-notices-wrapper .woocommerce-error {
  padding: 11px 16px !important;
  margin-bottom: 0 !important;
}

/* Remove browser-default list indentation inside the login-page error notice */
body.woocommerce-account:not(.woocommerce-logged-in) .woocommerce-error > li {
  list-style: none !important;
  padding-left: 0 !important;
  margin: 0 !important;
}

/* ── Fix 2: Change-password page — align inputs + submit button ──────────── */

/* The first/last-name rows above the fieldset use floats; ensure those are
   fully cleared before the password fieldset so it sits at full width */
.woocommerce-EditAccountForm fieldset {
  clear: both !important;
}

/* Password input rows inside the fieldset: remove any inherited float / padding
   that would cause them to sit side-by-side or indent unevenly */
.woocommerce-EditAccountForm fieldset .form-row {
  float: none !important;
  clear: both !important;
  width: 100% !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
}

/* Submit button: clear floats, make it block-level so it sits directly
   below the last field with consistent left alignment */
.woocommerce-EditAccountForm button[type="submit"],
.woocommerce-EditAccountForm input[type="submit"] {
  display: block !important;
  clear: both !important;
  margin-top: 20px !important;
}

/* --- end of GG PATCH v44a --- */

/* GG PATCH v44 — Product Comparison Drawer */

/* ── Compare button on product cards ── */
.gg-compare-btn {
  display: inline-flex !important;
  align-items: center !important;
  gap: 4px !important;
  margin-top: 6px !important;
  padding: 4px 10px !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  color: #1e3a5f !important;
  background: transparent !important;
  border: 1px solid #1e3a5f !important;
  border-radius: 999px !important;
  cursor: pointer !important;
  transition: background .2s, color .2s !important;
  font-family: 'Inter', sans-serif !important;
  line-height: 1 !important;
  width: auto !important;
}
.gg-compare-btn:hover,
.gg-compare-btn.gg-compare-active {
  background: #1e3a5f !important;
  color: #fff !important;
}
.gg-compare-btn svg {
  width: 12px !important;
  height: 12px !important;
  flex-shrink: 0 !important;
}

/* ── Floating compare pill ── */
#gg-compare-pill {
  position: fixed !important;
  bottom: 80px !important;
  left: 50% !important;
  transform: translateX(-50%) translateY(20px) !important;
  opacity: 0 !important;
  pointer-events: none !important;
  z-index: 9990 !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 10px !important;
  background: #1e3a5f !important;
  color: #fff !important;
  padding: 10px 20px !important;
  border-radius: 999px !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  font-family: 'Inter', sans-serif !important;
  box-shadow: 0 4px 20px rgba(0,0,0,.25) !important;
  transition: opacity .3s, transform .3s !important;
  cursor: pointer !important;
  white-space: nowrap !important;
}
#gg-compare-pill.gg-visible {
  opacity: 1 !important;
  pointer-events: auto !important;
  transform: translateX(-50%) translateY(0) !important;
}
#gg-compare-pill .gg-pill-count {
  background: #ff6b35 !important;
  border-radius: 999px !important;
  padding: 1px 7px !important;
  font-size: 12px !important;
}
#gg-compare-pill .gg-pill-clear {
  opacity: .7 !important;
  font-size: 11px !important;
  font-weight: 400 !important;
  text-decoration: underline !important;
  cursor: pointer !important;
}

/* ── Comparison drawer backdrop ── */
#gg-compare-backdrop {
  position: fixed !important;
  inset: 0 !important;
  background: rgba(0,0,0,.45) !important;
  z-index: 9991 !important;
  opacity: 0 !important;
  pointer-events: none !important;
  transition: opacity .3s !important;
}
#gg-compare-backdrop.gg-visible {
  opacity: 1 !important;
  pointer-events: auto !important;
}

/* ── Comparison drawer panel ── */
#gg-compare-drawer {
  position: fixed !important;
  bottom: 0 !important;
  left: 0 !important;
  right: 0 !important;
  z-index: 9992 !important;
  background: #fff !important;
  border-radius: 20px 20px 0 0 !important;
  box-shadow: 0 -8px 40px rgba(0,0,0,.18) !important;
  transform: translateY(100%) !important;
  transition: transform .35s cubic-bezier(.4,0,.2,1) !important;
  max-height: 80vh !important;
  display: flex !important;
  flex-direction: column !important;
  font-family: 'Inter', sans-serif !important;
}
#gg-compare-drawer.gg-open {
  transform: translateY(0) !important;
}

/* ── Drawer header ── */
.gg-compare-header {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  padding: 18px 24px 14px !important;
  border-bottom: 1px solid #e2e8f0 !important;
  flex-shrink: 0 !important;
}
.gg-compare-header h3 {
  font-size: 16px !important;
  font-weight: 800 !important;
  color: #1e3a5f !important;
  margin: 0 !important;
}
.gg-compare-close {
  background: #f1f5f9 !important;
  border: none !important;
  border-radius: 50% !important;
  width: 32px !important;
  height: 32px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  cursor: pointer !important;
  color: #1e3a5f !important;
  font-size: 18px !important;
  line-height: 1 !important;
  transition: background .2s !important;
}
.gg-compare-close:hover { background: #e2e8f0 !important; }

/* ── Drawer scroll body ── */
.gg-compare-body {
  overflow-x: auto !important;
  overflow-y: auto !important;
  flex: 1 !important;
  padding: 20px 24px 28px !important;
  -webkit-overflow-scrolling: touch !important;
}

/* ── Comparison table ── */
.gg-compare-table {
  width: 100% !important;
  border-collapse: collapse !important;
  min-width: 480px !important;
}
.gg-compare-table th,
.gg-compare-table td {
  padding: 10px 14px !important;
  text-align: left !important;
  vertical-align: top !important;
  font-size: 13px !important;
  border-bottom: 1px solid #f1f5f9 !important;
}
.gg-compare-table th {
  font-size: 11px !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: .06em !important;
  color: #64748b !important;
  background: #f8fafc !important;
  width: 110px !important;
  white-space: nowrap !important;
}
.gg-compare-table td { color: #1e293b !important; }

/* product image row */
.gg-ct-img img {
  width: 80px !important;
  height: 80px !important;
  object-fit: cover !important;
  border-radius: 8px !important;
  display: block !important;
}

/* price row */
.gg-ct-price { font-weight: 700 !important; color: #ff6b35 !important; font-size: 15px !important; }

/* remove button per column */
.gg-ct-remove {
  background: none !important;
  border: 1px solid #e2e8f0 !important;
  border-radius: 6px !important;
  padding: 4px 10px !important;
  font-size: 11px !important;
  color: #64748b !important;
  cursor: pointer !important;
  transition: border-color .2s, color .2s !important;
}
.gg-ct-remove:hover { border-color: #dc2626 !important; color: #dc2626 !important; }

/* ATC row */
.gg-ct-atc {
  display: inline-block !important;
  background: #ff6b35 !important;
  color: #fff !important;
  border: none !important;
  border-radius: 999px !important;
  padding: 8px 18px !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  cursor: pointer !important;
  text-decoration: none !important;
  transition: background .2s !important;
  font-family: 'Inter', sans-serif !important;
}
.gg-ct-atc:hover { background: #e55a24 !important; color: #fff !important; }

/* empty slots placeholder */
.gg-ct-empty {
  color: #cbd5e1 !important;
  font-size: 12px !important;
  font-style: italic !important;
}

/* ── Max products notice ── */
.gg-compare-max-notice {
  display: none !important;
  background: #fff7ed !important;
  border: 1px solid #fed7aa !important;
  color: #9a3412 !important;
  border-radius: 8px !important;
  padding: 8px 14px !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  text-align: center !important;
  margin-bottom: 10px !important;
}
.gg-compare-max-notice.gg-visible { display: block !important; }

/* ── "Add more products" hint (shows when < 2 products selected) ── */
.gg-compare-hint {
  display: none !important;
  background: #eff6ff !important;
  border: 1px solid #bfdbfe !important;
  border-radius: 8px !important;
  padding: 10px 14px !important;
  font-size: 13px !important;
  color: #1e3a5f !important;
  text-align: center !important;
  margin-bottom: 10px !important;
}
.gg-compare-hint.gg-visible { display: block !important; }

@media (max-width: 767px) {
  #gg-compare-drawer { max-height: 90vh !important; }
  .gg-compare-header { padding: 14px 16px 12px !important; }
  .gg-compare-body { padding: 14px 16px 20px !important; }
  #gg-compare-pill { bottom: 70px !important; font-size: 12px !important; }
}

@media (prefers-reduced-motion: reduce) {
  #gg-compare-drawer,
  #gg-compare-backdrop,
  #gg-compare-pill { transition: none !important; }
}
/* --- end of GG PATCH v44 --- */

/* =============================================================================
   GG PATCH v45 — Lost/Set-Password Form: layout, button colour, card styling
   Applies to body.woocommerce-lost-password — covers BOTH the "request reset"
   page (email entry) and the "set new password" page (?key=…&login=…).
   Fixes:
     1. .clear div has clear:none → submit row squeezed to ~137px
     2. form-row-first / form-row-last 47% float columns → cramped 2-col layout
     3. Save button renders gray instead of brand orange
     4. No card framing — form floats bare on white background
   ============================================================================= */

/* ── 1. Card container ── */
body.woocommerce-lost-password .woocommerce-ResetPassword {
  max-width: 480px !important;
  margin: 0 auto !important;
  background: #fff !important;
  border: 1px solid var(--gg-border-light) !important;
  border-radius: 16px !important;
  padding: 36px 40px !important;
  box-shadow: 0 4px 24px rgba(30, 58, 95, 0.08) !important;
}

/* ── 2. Intro paragraph ── */
body.woocommerce-lost-password .woocommerce-ResetPassword > p:first-of-type {
  font-size: 14px !important;
  color: var(--gg-muted, #6b7280) !important;
  margin-bottom: 20px !important;
  line-height: 1.6 !important;
}

/* ── 3. Stack all form rows full-width vertically (un-float the columns) ── */
body.woocommerce-lost-password .woocommerce-ResetPassword .woocommerce-form-row,
body.woocommerce-lost-password .woocommerce-ResetPassword .form-row {
  float: none !important;
  clear: both !important;
  width: 100% !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  box-sizing: border-box !important;
}

/* ── 4. Force .clear div to actually clear the float ── */
body.woocommerce-lost-password .woocommerce-ResetPassword .clear {
  clear: both !important;
  display: block !important;
  width: 100% !important;
}

/* ── 5. Inputs — full width ── */
body.woocommerce-lost-password .woocommerce-ResetPassword input[type="text"],
body.woocommerce-lost-password .woocommerce-ResetPassword input[type="email"],
body.woocommerce-lost-password .woocommerce-ResetPassword input[type="password"] {
  width: 100% !important;
  box-sizing: border-box !important;
}

/* ── 6. Save / Reset button — orange primary CTA ── */
body.woocommerce-lost-password .woocommerce-ResetPassword button[type="submit"],
body.woocommerce-lost-password .woocommerce-ResetPassword input[type="submit"],
body.woocommerce-lost-password .woocommerce-ResetPassword .woocommerce-Button,
body.woocommerce-lost-password .woocommerce-ResetPassword button.button,
body.woocommerce-lost-password .woocommerce-ResetPassword input.button {
  width: 100% !important;
  padding: 14px !important;
  background: var(--gg-orange) !important;
  color: #fff !important;
  border: 0 !important;
  border-radius: 999px !important;
  font-size: 15px !important;
  font-weight: 700 !important;
  cursor: pointer !important;
  transition: background 0.18s ease !important;
  display: block !important;
  box-sizing: border-box !important;
  text-align: center !important;
}

body.woocommerce-lost-password .woocommerce-ResetPassword button[type="submit"]:hover,
body.woocommerce-lost-password .woocommerce-ResetPassword input[type="submit"]:hover,
body.woocommerce-lost-password .woocommerce-ResetPassword .woocommerce-Button:hover,
body.woocommerce-lost-password .woocommerce-ResetPassword button.button:hover {
  background: #e55c2d !important;
}

/* ── 7. Password strength indicator ── */
body.woocommerce-lost-password .woocommerce-password-strength {
  margin-top: 8px !important;
  font-size: 13px !important;
  border-radius: 6px !important;
  padding: 4px 10px !important;
}

body.woocommerce-lost-password .woocommerce-password-hint {
  margin-top: 6px !important;
  font-size: 12px !important;
  color: var(--gg-muted, #6b7280) !important;
  line-height: 1.5 !important;
}

/* ── 8. Mobile ── */
@media (max-width: 767px) {
  body.woocommerce-lost-password .woocommerce-ResetPassword {
    padding: 24px 20px !important;
    border-radius: 12px !important;
  }
}

/* --- end of GG PATCH v45 --- */

/* GG PATCH v46 — Newsletter Popup: time-delayed, cookie-gated */

/* Backdrop overlay */
.gg-newsletter-backdrop {
  display: none !important;
  position: fixed !important;
  inset: 0 !important;
  background: rgba(0, 0, 0, 0.55) !important;
  z-index: 99990 !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 20px !important;
}
.gg-newsletter-backdrop.gg-nl-active {
  display: flex !important;
}

/* Modal card */
.gg-newsletter-popup {
  background: #ffffff !important;
  border-radius: 16px !important;
  max-width: 480px !important;
  width: 100% !important;
  padding: 40px 36px 32px !important;
  position: relative !important;
  text-align: center !important;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.25) !important;
  animation: gg-nl-slidein 0.35s cubic-bezier(0.34, 1.56, 0.64, 1) both !important;
  font-family: 'Inter', 'Nunito', sans-serif !important;
}

@keyframes gg-nl-slidein {
  from { opacity: 0; transform: translateY(40px) scale(0.96); }
  to   { opacity: 1; transform: translateY(0)   scale(1);    }
}

/* Top gradient bar */
.gg-newsletter-popup::before {
  content: '' !important;
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  height: 5px !important;
  background: linear-gradient(90deg, #1e3a5f 0%, #ff6b35 100%) !important;
  border-radius: 16px 16px 0 0 !important;
}

/* Close button */
.gg-nl-close {
  position: absolute !important;
  top: 14px !important;
  right: 14px !important;
  width: 32px !important;
  height: 32px !important;
  border: none !important;
  background: #f1f5f9 !important;
  border-radius: 50% !important;
  cursor: pointer !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 18px !important;
  color: #64748b !important;
  line-height: 1 !important;
  transition: background 0.2s, color 0.2s !important;
  padding: 0 !important;
}
.gg-nl-close:hover {
  background: #e2e8f0 !important;
  color: #1e293b !important;
}

/* Emoji icon */
.gg-nl-icon {
  font-size: 44px !important;
  display: block !important;
  margin-bottom: 10px !important;
  line-height: 1 !important;
}

/* Offer badge pill */
.gg-nl-badge {
  display: inline-block !important;
  background: #fff3ec !important;
  color: #ff6b35 !important;
  border: 1.5px solid #ffd5c3 !important;
  border-radius: 999px !important;
  padding: 4px 14px !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  letter-spacing: 0.05em !important;
  text-transform: uppercase !important;
  margin-bottom: 14px !important;
}

/* Heading */
.gg-newsletter-popup h3 {
  font-size: 22px !important;
  font-weight: 800 !important;
  color: #1e3a5f !important;
  margin: 0 0 10px !important;
  line-height: 1.3 !important;
}

/* Sub-text */
.gg-nl-sub {
  font-size: 14px !important;
  color: #64748b !important;
  margin-bottom: 22px !important;
  line-height: 1.65 !important;
}

/* Email + submit row */
.gg-nl-form {
  display: flex !important;
  gap: 8px !important;
  margin-bottom: 10px !important;
}
.gg-nl-input {
  flex: 1 !important;
  height: 46px !important;
  border: 1.5px solid #e2e8f0 !important;
  border-radius: 8px !important;
  padding: 0 14px !important;
  font-size: 14px !important;
  font-family: inherit !important;
  outline: none !important;
  color: #1e293b !important;
  transition: border-color 0.2s !important;
  background: #fff !important;
}
.gg-nl-input:focus {
  border-color: #ff6b35 !important;
  box-shadow: 0 0 0 3px rgba(255, 107, 53, 0.12) !important;
}
.gg-nl-submit {
  height: 46px !important;
  padding: 0 20px !important;
  background: #ff6b35 !important;
  color: #ffffff !important;
  border: none !important;
  border-radius: 8px !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  font-family: inherit !important;
  cursor: pointer !important;
  white-space: nowrap !important;
  transition: background 0.2s, transform 0.1s !important;
}
.gg-nl-submit:hover {
  background: #e55a28 !important;
  transform: translateY(-1px) !important;
}

/* Success message */
.gg-nl-success {
  display: none !important;
  padding: 14px 16px !important;
  background: #dcfce7 !important;
  border-radius: 8px !important;
  color: #16a34a !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  margin-top: 8px !important;
  line-height: 1.5 !important;
}
.gg-nl-success.gg-nl-visible {
  display: block !important;
}

/* Skip / no-thanks link */
.gg-nl-skip {
  font-size: 12px !important;
  color: #94a3b8 !important;
  cursor: pointer !important;
  background: none !important;
  border: none !important;
  text-decoration: underline !important;
  display: block !important;
  margin-top: 12px !important;
  padding: 0 !important;
  font-family: inherit !important;
  transition: color 0.2s !important;
  width: 100% !important;
  text-align: center !important;
}
.gg-nl-skip:hover {
  color: #64748b !important;
}

/* Privacy note */
.gg-nl-privacy {
  font-size: 11px !important;
  color: #cbd5e1 !important;
  margin-top: 8px !important;
  display: block !important;
}

/* Mobile: stack form vertically */
@media (max-width: 480px) {
  .gg-newsletter-popup {
    padding: 32px 20px 24px !important;
  }
  .gg-newsletter-popup h3 {
    font-size: 19px !important;
  }
  .gg-nl-form {
    flex-direction: column !important;
  }
  .gg-nl-submit {
    width: 100% !important;
  }
}

/* Respect reduced-motion preference */
@media (prefers-reduced-motion: reduce) {
  .gg-newsletter-popup {
    animation: none !important;
  }
}

/* --- end of GG PATCH v46 --- */

/* ── GG PATCH v46-fix — Newsletter popup card: override stale v37 rules ──
   The v37 CSS set .gg-newsletter-popup to position:fixed / opacity:0 /
   transform:translate(-50%,-50%) for a now-replaced popup system.
   Those rules break the v46 system where .gg-newsletter-popup lives
   inside a flex backdrop container.  Override them here. */
.gg-newsletter-backdrop .gg-newsletter-popup {
  position: relative !important;  /* stay inside the flex container */
  top: auto !important;
  left: auto !important;
  transform: none !important;
  opacity: 1 !important;
  pointer-events: all !important;
  transition: none !important;
  /* card dimensions / layout come from the v46 rules above */
}

/* GG PATCH v47 — Image Alt Text Audit & Auto-Fallback */

/* ── Admin: highlight images missing alt text ──────────────────── */
.wp-admin img[alt=""],
.wp-admin img:not([alt]) {
  outline: 3px solid #dc2626 !important;
  outline-offset: 2px !important;
  position: relative !important;
}

/* ── Admin notice banner styling ──────────────────────────────── */
.gg-alt-audit-notice {
  border-left: 4px solid #ff6b35 !important;
  background: #fff8f5 !important;
  padding: 12px 16px !important;
  display: flex !important;
  align-items: flex-start !important;
  gap: 12px !important;
  font-family: Inter, sans-serif !important;
}
.gg-alt-audit-notice .gg-alt-icon {
  font-size: 20px !important;
  line-height: 1 !important;
  flex-shrink: 0 !important;
}
.gg-alt-audit-notice h3 {
  margin: 0 0 4px !important;
  font-size: 14px !important;
  color: #1e3a5f !important;
}
.gg-alt-audit-notice p {
  margin: 0 !important;
  font-size: 13px !important;
  color: #475569 !important;
}
.gg-alt-audit-notice ul {
  margin: 8px 0 0 16px !important;
  font-size: 12px !important;
  color: #64748b !important;
  line-height: 1.8 !important;
}
.gg-alt-audit-notice a {
  color: #ff6b35 !important;
  font-weight: 600 !important;
}

/* --- end of GG PATCH v47 --- */

/* GG PATCH v48 — Critical CSS Inline: render-blocking elimination + async full-sheet load */

/*
 * FOUC guard — body starts hidden; gg-crit-ready class (set by async-sheet
 * onload or footer fallback script) reveals it.  Falls back to visible after
 * 800 ms via animation so no-JS users are never stuck.
 */
body.gg-crit-pending {
  opacity: 0 !important;
  animation: gg-fouc-reveal 0s 0.8s forwards !important;
}
@keyframes gg-fouc-reveal {
  to { opacity: 1 !important; }
}
body.gg-crit-ready {
  opacity: 1 !important;
  transition: opacity 0.15s ease !important;
}

/*
 * Loading indicator — thin orange progress bar at top of viewport while
 * the full stylesheet is still downloading.
 */
body.gg-crit-pending::before {
  content: '' !important;
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  width: 60% !important;
  height: 3px !important;
  background: #ff6b35 !important;
  z-index: 99999 !important;
  animation: gg-load-bar 0.9s ease-in-out infinite alternate !important;
}
@keyframes gg-load-bar {
  from { width: 30% !important; }
  to   { width: 90% !important; }
}

/*
 * Skeleton placeholder for product cards — shown while async sheet loads
 * so the layout does not collapse to zero height.
 */
body.gg-crit-pending .products li.product {
  min-height: 280px !important;
  background: linear-gradient(90deg, #f0f4f8 25%, #e2e8f0 50%, #f0f4f8 75%) !important;
  background-size: 400% 100% !important;
  animation: gg-skeleton-shimmer 1.4s ease infinite !important;
  border-radius: 12px !important;
}
@keyframes gg-skeleton-shimmer {
  0%   { background-position: 100% 50% !important; }
  100% { background-position:   0% 50% !important; }
}

/*
 * Ensure the inlined critical header remains fully functional even
 * in the narrow window before the full sheet arrives.
 */
body.gg-crit-pending .gg-header-bar {
  background: #1e3a5f !important;
  position: sticky !important;
  top: 0 !important;
  z-index: 1000 !important;
  width: 100% !important;
}
body.gg-crit-pending .gg-header-inner {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  max-width: 1280px !important;
  margin: 0 auto !important;
  padding: 0 24px !important;
  height: 70px !important;
}
body.gg-crit-pending .gg-logo img {
  height: 44px !important;
  width: auto !important;
  display: block !important;
}

/* prefers-reduced-motion: skip animations, reveal immediately */
@media (prefers-reduced-motion: reduce) {
  body.gg-crit-pending {
    opacity: 1 !important;
    animation: none !important;
  }
  body.gg-crit-pending::before {
    display: none !important;
  }
  body.gg-crit-pending .products li.product {
    animation: none !important;
    background: #f0f4f8 !important;
  }
}

/* --- end of GG PATCH v48 --- */

/* GG PATCH v49 — Order Tracking Page: Status Step Indicator + GG Styling */

/* --- mobile first (320px-768px) --- */
@media (max-width: 768px) {

  /* ── Page wrapper ── */
  .woocommerce-order-tracking {
    padding: 16px !important;
  }

  /* ── Form card ── */
  .woocommerce-form-track-order {
    background: #ffffff !important;
    border: 1px solid #e5e7eb !important;
    border-radius: 12px !important;
    padding: 20px 16px !important;
    box-shadow: 0 2px 8px rgba(30,58,95,0.08) !important;
    margin-bottom: 24px !important;
  }

  .woocommerce-form-track-order p {
    margin-bottom: 14px !important;
  }

  .woocommerce-form-track-order label {
    font-size: 13px !important;
    font-weight: 700 !important;
    color: var(--gg-navy, #1e3a5f) !important;
    display: block !important;
    margin-bottom: 6px !important;
    font-family: 'Inter', 'Source Sans Pro', sans-serif !important;
  }

  .woocommerce-form-track-order input[type="text"],
  .woocommerce-form-track-order input[type="email"] {
    width: 100% !important;
    height: 48px !important;         /* >= 44px touch target */
    padding: 0 14px !important;
    border: 1.5px solid #d1d5db !important;
    border-radius: 8px !important;
    font-size: 15px !important;
    box-sizing: border-box !important;
    transition: border-color 0.2s !important;
  }

  .woocommerce-form-track-order input:focus {
    border-color: var(--gg-orange, #ff6b35) !important;
    outline: none !important;
    box-shadow: 0 0 0 3px rgba(255,107,53,0.15) !important;
  }

  .woocommerce-form-track-order button[type="submit"],
  .woocommerce-form-track-order input[type="submit"] {
    width: 100% !important;
    height: 52px !important;
    background: var(--gg-orange, #ff6b35) !important;
    color: #ffffff !important;
    font-size: 16px !important;
    font-weight: 700 !important;
    border: none !important;
    border-radius: 10px !important;
    cursor: pointer !important;
    font-family: 'Inter', 'Source Sans Pro', sans-serif !important;
    letter-spacing: 0.3px !important;
    transition: background 0.2s, transform 0.1s !important;
  }

  .woocommerce-form-track-order button[type="submit"]:active,
  .woocommerce-form-track-order input[type="submit"]:active {
    transform: scale(0.98) !important;
    background: #e55a25 !important;
  }

  /* ── Step indicator — compact horizontal row on mobile ── */
  .gg-track-steps {
    display: flex !important;
    flex-direction: row !important;
    align-items: flex-start !important;
    justify-content: space-between !important;
    position: relative !important;
    padding: 20px 0 24px !important;
    margin-bottom: 20px !important;
    overflow: hidden !important;
  }

  /* Connector line behind dots */
  .gg-track-steps::before {
    content: '' !important;
    position: absolute !important;
    top: 38px !important;
    left: 12% !important;
    right: 12% !important;
    height: 2px !important;
    background: #e5e7eb !important;
    z-index: 0 !important;
  }

  /* Orange progress fill — width driven by data-target-width, animated via JS */
  .gg-track-steps__progress {
    position: absolute !important;
    top: 38px !important;
    left: 12% !important;
    height: 2px !important;
    background: var(--gg-orange, #ff6b35) !important;
    z-index: 1 !important;
    transition: width 0.7s cubic-bezier(0.4,0,0.2,1) !important;
    max-width: 76% !important;
  }

  .gg-track-step {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    gap: 8px !important;
    flex: 1 !important;
    position: relative !important;
    z-index: 2 !important;
  }

  /* Dot — 44px touch-proxy (display only) */
  .gg-track-step__dot {
    width: 44px !important;
    height: 44px !important;
    border-radius: 50% !important;
    border: 2px solid #d1d5db !important;
    background: #ffffff !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 17px !important;
    line-height: 1 !important;
    transition: all 0.3s ease !important;
    box-sizing: border-box !important;
  }

  .gg-track-step__label {
    font-size: 10px !important;
    font-weight: 600 !important;
    color: #9ca3af !important;
    text-align: center !important;
    max-width: 64px !important;
    line-height: 1.3 !important;
    font-family: 'Inter', 'Source Sans Pro', sans-serif !important;
  }

  .gg-track-step--done .gg-track-step__dot {
    border-color: var(--gg-navy, #1e3a5f) !important;
    background: var(--gg-navy, #1e3a5f) !important;
  }
  .gg-track-step--done .gg-track-step__label {
    color: var(--gg-navy, #1e3a5f) !important;
    font-weight: 700 !important;
  }

  .gg-track-step--active .gg-track-step__dot {
    border-color: var(--gg-orange, #ff6b35) !important;
    background: var(--gg-orange, #ff6b35) !important;
    box-shadow: 0 0 0 5px rgba(255,107,53,0.18) !important;
  }
  .gg-track-step--active .gg-track-step__label {
    color: var(--gg-orange, #ff6b35) !important;
    font-weight: 700 !important;
  }

  .gg-track-step--cancelled .gg-track-step__dot {
    border-color: #ef4444 !important;
    background: #fee2e2 !important;
  }
  .gg-track-step--cancelled .gg-track-step__label {
    color: #dc2626 !important;
    font-weight: 700 !important;
  }

  /* ── Status badge ── */
  .gg-track-status-badge {
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    padding: 8px 16px !important;
    border-radius: 24px !important;
    font-size: 13px !important;
    font-weight: 700 !important;
    margin-bottom: 16px !important;
    font-family: 'Inter', 'Source Sans Pro', sans-serif !important;
  }
  .gg-track-status-badge--processing {
    background: #fef3c7 !important;
    color: #92400e !important;
    border: 1px solid #fde68a !important;
  }
  .gg-track-status-badge--completed {
    background: #d1fae5 !important;
    color: #065f46 !important;
    border: 1px solid #6ee7b7 !important;
  }
  .gg-track-status-badge--pending,
  .gg-track-status-badge--on-hold {
    background: #e0e7ff !important;
    color: #3730a3 !important;
    border: 1px solid #c7d2fe !important;
  }
  .gg-track-status-badge--cancelled,
  .gg-track-status-badge--failed {
    background: #fee2e2 !important;
    color: #991b1b !important;
    border: 1px solid #fca5a5 !important;
  }

  /* ── Delivery map button — full-width on mobile ── */
  .gg-track-map-link {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    width: 100% !important;
    min-height: 48px !important;         /* >= 44px touch target */
    background: var(--gg-navy, #1e3a5f) !important;
    color: #ffffff !important;
    font-size: 14px !important;
    font-weight: 700 !important;
    border-radius: 10px !important;
    text-decoration: none !important;
    margin: 12px 0 20px !important;
    padding: 0 20px !important;
    box-shadow: 0 2px 6px rgba(30,58,95,0.18) !important;
    font-family: 'Inter', 'Source Sans Pro', sans-serif !important;
    transition: background 0.2s !important;
    box-sizing: border-box !important;
  }
  .gg-track-map-link:hover,
  .gg-track-map-link:focus {
    background: #162d4a !important;
    color: #ffffff !important;
    text-decoration: none !important;
  }

  /* ── Order details table ── */
  .woocommerce-order-tracking .woocommerce-table--order-details {
    width: 100% !important;
    border-collapse: collapse !important;
    overflow: hidden !important;
    font-size: 13px !important;
  }
  .woocommerce-order-tracking .woocommerce-table--order-details thead {
    background: var(--gg-navy, #1e3a5f) !important;
  }
  .woocommerce-order-tracking .woocommerce-table--order-details thead th {
    padding: 10px 14px !important;
    font-size: 12px !important;
    font-weight: 700 !important;
    text-align: left !important;
    color: #ffffff !important;
    font-family: 'Inter', 'Source Sans Pro', sans-serif !important;
  }
  .woocommerce-order-tracking .woocommerce-table--order-details tbody tr:nth-child(even) {
    background: #f8fafc !important;
  }
  .woocommerce-order-tracking .woocommerce-table--order-details tbody td {
    padding: 10px 14px !important;
    border-bottom: 1px solid #f1f5f9 !important;
  }
  .woocommerce-order-tracking .woocommerce-table--order-details tfoot {
    background: #f0f4f8 !important;
    font-weight: 700 !important;
  }
  .woocommerce-order-tracking .woocommerce-table--order-details tfoot td,
  .woocommerce-order-tracking .woocommerce-table--order-details tfoot th {
    padding: 10px 14px !important;
    color: var(--gg-navy, #1e3a5f) !important;
  }

} /* end @media (max-width: 768px) */

/* --- desktop (769px+) --- */

.woocommerce-order-tracking {
  max-width: 720px !important;
  margin: 0 auto !important;
  padding: 32px 24px !important;
}

.woocommerce-form-track-order {
  background: #ffffff !important;
  border: 1px solid #e5e7eb !important;
  border-radius: 14px !important;
  padding: 32px 36px !important;
  box-shadow: 0 4px 16px rgba(30,58,95,0.08) !important;
  margin-bottom: 32px !important;
}

.woocommerce-form-track-order label {
  font-size: 14px !important;
  font-weight: 700 !important;
  color: var(--gg-navy, #1e3a5f) !important;
  display: block !important;
  margin-bottom: 6px !important;
  font-family: 'Inter', 'Source Sans Pro', sans-serif !important;
}

.woocommerce-form-track-order input[type="text"],
.woocommerce-form-track-order input[type="email"] {
  width: 100% !important;
  height: 48px !important;
  padding: 0 16px !important;
  border: 1.5px solid #d1d5db !important;
  border-radius: 8px !important;
  font-size: 15px !important;
  box-sizing: border-box !important;
  transition: border-color 0.2s, box-shadow 0.2s !important;
}

.woocommerce-form-track-order input:focus {
  border-color: var(--gg-orange, #ff6b35) !important;
  outline: none !important;
  box-shadow: 0 0 0 3px rgba(255,107,53,0.15) !important;
}

.woocommerce-form-track-order button[type="submit"],
.woocommerce-form-track-order input[type="submit"] {
  height: 52px !important;
  padding: 0 40px !important;
  background: var(--gg-orange, #ff6b35) !important;
  color: #ffffff !important;
  font-size: 16px !important;
  font-weight: 700 !important;
  border: none !important;
  border-radius: 10px !important;
  cursor: pointer !important;
  font-family: 'Inter', 'Source Sans Pro', sans-serif !important;
  letter-spacing: 0.3px !important;
  transition: background 0.2s, transform 0.1s, box-shadow 0.2s !important;
}

.woocommerce-form-track-order button[type="submit"]:hover,
.woocommerce-form-track-order input[type="submit"]:hover {
  background: #e55a25 !important;
  box-shadow: 0 4px 12px rgba(255,107,53,0.35) !important;
}

.gg-track-steps {
  display: flex !important;
  flex-direction: row !important;
  align-items: flex-start !important;
  justify-content: space-between !important;
  position: relative !important;
  padding: 24px 0 28px !important;
  margin-bottom: 24px !important;
}

.gg-track-steps::before {
  content: '' !important;
  position: absolute !important;
  top: 46px !important;
  left: 10% !important;
  right: 10% !important;
  height: 2px !important;
  background: #e5e7eb !important;
  z-index: 0 !important;
}

.gg-track-steps__progress {
  position: absolute !important;
  top: 46px !important;
  left: 10% !important;
  height: 2px !important;
  background: var(--gg-orange, #ff6b35) !important;
  z-index: 1 !important;
  transition: width 0.7s cubic-bezier(0.4,0,0.2,1) !important;
  max-width: 80% !important;
}

.gg-track-step {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  gap: 10px !important;
  flex: 1 !important;
  position: relative !important;
  z-index: 2 !important;
}

.gg-track-step__dot {
  width: 52px !important;
  height: 52px !important;
  border-radius: 50% !important;
  border: 2px solid #d1d5db !important;
  background: #ffffff !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 20px !important;
  transition: all 0.35s ease !important;
  box-sizing: border-box !important;
}

.gg-track-step__label {
  font-size: 12px !important;
  font-weight: 600 !important;
  color: #9ca3af !important;
  text-align: center !important;
  max-width: 84px !important;
  line-height: 1.4 !important;
  font-family: 'Inter', 'Source Sans Pro', sans-serif !important;
}

.gg-track-step--done .gg-track-step__dot {
  border-color: var(--gg-navy, #1e3a5f) !important;
  background: var(--gg-navy, #1e3a5f) !important;
}
.gg-track-step--done .gg-track-step__label {
  color: var(--gg-navy, #1e3a5f) !important;
  font-weight: 700 !important;
}

.gg-track-step--active .gg-track-step__dot {
  border-color: var(--gg-orange, #ff6b35) !important;
  background: var(--gg-orange, #ff6b35) !important;
  box-shadow: 0 0 0 6px rgba(255,107,53,0.15) !important;
}
.gg-track-step--active .gg-track-step__label {
  color: var(--gg-orange, #ff6b35) !important;
  font-weight: 700 !important;
}

.gg-track-step--cancelled .gg-track-step__dot {
  border-color: #ef4444 !important;
  background: #fee2e2 !important;
}
.gg-track-step--cancelled .gg-track-step__label {
  color: #dc2626 !important;
  font-weight: 700 !important;
}

.gg-track-status-badge {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  padding: 8px 20px !important;
  border-radius: 24px !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  margin-bottom: 20px !important;
  font-family: 'Inter', 'Source Sans Pro', sans-serif !important;
}
.gg-track-status-badge--processing {
  background: #fef3c7 !important;
  color: #92400e !important;
  border: 1px solid #fde68a !important;
}
.gg-track-status-badge--completed {
  background: #d1fae5 !important;
  color: #065f46 !important;
  border: 1px solid #6ee7b7 !important;
}
.gg-track-status-badge--pending,
.gg-track-status-badge--on-hold {
  background: #e0e7ff !important;
  color: #3730a3 !important;
  border: 1px solid #c7d2fe !important;
}
.gg-track-status-badge--cancelled,
.gg-track-status-badge--failed {
  background: #fee2e2 !important;
  color: #991b1b !important;
  border: 1px solid #fca5a5 !important;
}

.gg-track-map-link {
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  min-height: 48px !important;
  background: var(--gg-navy, #1e3a5f) !important;
  color: #ffffff !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  border-radius: 10px !important;
  text-decoration: none !important;
  margin: 12px 0 24px !important;
  padding: 0 24px !important;
  box-shadow: 0 2px 8px rgba(30,58,95,0.18) !important;
  font-family: 'Inter', 'Source Sans Pro', sans-serif !important;
  transition: background 0.2s, box-shadow 0.2s !important;
}
.gg-track-map-link:hover,
.gg-track-map-link:focus {
  background: #162d4a !important;
  color: #ffffff !important;
  text-decoration: none !important;
  box-shadow: 0 4px 14px rgba(30,58,95,0.28) !important;
}

.woocommerce-order-tracking .woocommerce-table--order-details {
  width: 100% !important;
  border-collapse: collapse !important;
  border-radius: 12px !important;
  overflow: hidden !important;
  font-size: 14px !important;
  box-shadow: 0 1px 6px rgba(30,58,95,0.07) !important;
}
.woocommerce-order-tracking .woocommerce-table--order-details thead {
  background: var(--gg-navy, #1e3a5f) !important;
}
.woocommerce-order-tracking .woocommerce-table--order-details thead th {
  padding: 12px 18px !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  text-align: left !important;
  color: #ffffff !important;
  font-family: 'Inter', 'Source Sans Pro', sans-serif !important;
}
.woocommerce-order-tracking .woocommerce-table--order-details tbody tr:nth-child(even) {
  background: #f8fafc !important;
}
.woocommerce-order-tracking .woocommerce-table--order-details tbody td {
  padding: 12px 18px !important;
  border-bottom: 1px solid #f1f5f9 !important;
}
.woocommerce-order-tracking .woocommerce-table--order-details tfoot {
  background: #f0f4f8 !important;
}
.woocommerce-order-tracking .woocommerce-table--order-details tfoot td,
.woocommerce-order-tracking .woocommerce-table--order-details tfoot th {
  padding: 12px 18px !important;
  font-weight: 700 !important;
  color: var(--gg-navy, #1e3a5f) !important;
  font-family: 'Inter', 'Source Sans Pro', sans-serif !important;
}

/* --- end of GG PATCH v49 --- */

/* GG PATCH v50 — Sale Countdown Timer: Urgency Widget on PDP */

/* --- mobile first (320px-768px) --- */
@media (max-width: 768px) {

  .gg-countdown-timer {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    background: linear-gradient(135deg, #fff4ef 0%, #fff8f5 100%) !important;
    border: 2px solid var(--gg-orange, #ff6b35) !important;
    border-radius: 10px !important;
    padding: 12px 14px !important;
    margin: 12px 0 16px !important;
    width: 100% !important;
    box-sizing: border-box !important;
    gap: 8px !important;
  }

  .gg-ct-label {
    font-family: 'Inter', 'Source Sans Pro', sans-serif !important;
    font-size: 12px !important;
    font-weight: 700 !important;
    color: var(--gg-navy, #1e3a5f) !important;
    text-transform: uppercase !important;
    letter-spacing: 0.08em !important;
    line-height: 1.2 !important;
    margin-bottom: 2px !important;
  }

  .gg-ct-blocks {
    display: flex !important;
    align-items: center !important;
    gap: 4px !important;
    flex-wrap: nowrap !important;
  }

  .gg-ct-block {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    background: #fff !important;
    border: 1px solid rgba(255, 107, 53, 0.3) !important;
    border-radius: 6px !important;
    min-width: 44px !important;
    padding: 6px 8px !important;
    box-shadow: 0 2px 6px rgba(255, 107, 53, 0.12) !important;
  }

  .gg-ct-block.gg-ct-days {
    display: none !important;
  }

  .gg-ct-num {
    font-family: 'Inter', 'Source Sans Pro', sans-serif !important;
    font-size: 22px !important;
    font-weight: 800 !important;
    color: var(--gg-orange, #ff6b35) !important;
    line-height: 1 !important;
    letter-spacing: -0.02em !important;
    min-width: 28px !important;
    text-align: center !important;
    display: block !important;
    font-variant-numeric: tabular-nums !important;
  }

  .gg-ct-unit {
    font-family: 'Inter', 'Source Sans Pro', sans-serif !important;
    font-size: 9px !important;
    font-weight: 600 !important;
    color: var(--gg-navy, #1e3a5f) !important;
    text-transform: uppercase !important;
    letter-spacing: 0.05em !important;
    margin-top: 1px !important;
    display: block !important;
    text-align: center !important;
  }

  .gg-ct-sep {
    font-size: 20px !important;
    font-weight: 800 !important;
    color: var(--gg-orange, #ff6b35) !important;
    line-height: 1 !important;
    padding-bottom: 14px !important;
    user-select: none !important;
  }

  .gg-countdown-timer.gg-ct-urgent {
    border-color: #e53e00 !important;
    background: linear-gradient(135deg, #fff0ea 0%, #fff4ef 100%) !important;
    animation: gg-ct-pulse 2s ease-in-out infinite !important;
  }

  .gg-countdown-timer.gg-ct-urgent .gg-ct-num {
    color: #e53e00 !important;
  }

  @keyframes gg-ct-pulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(229, 62, 0, 0); }
    50%       { box-shadow: 0 0 0 4px rgba(229, 62, 0, 0.18); }
  }

  .gg-countdown-timer.gg-ct-expired {
    display: none !important;
  }
}

/* --- desktop (769px+) --- */

.gg-countdown-timer {
  display: inline-flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  background: linear-gradient(135deg, #fff4ef 0%, #fff8f5 100%) !important;
  border: 2px solid var(--gg-orange, #ff6b35) !important;
  border-radius: 10px !important;
  padding: 14px 18px !important;
  margin: 12px 0 18px !important;
  gap: 8px !important;
  max-width: 380px !important;
}

.gg-ct-label {
  font-family: 'Inter', 'Source Sans Pro', sans-serif !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  color: var(--gg-navy, #1e3a5f) !important;
  text-transform: uppercase !important;
  letter-spacing: 0.1em !important;
  line-height: 1.2 !important;
}

.gg-ct-blocks {
  display: flex !important;
  align-items: center !important;
  gap: 6px !important;
}

.gg-ct-block {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  background: #fff !important;
  border: 1px solid rgba(255, 107, 53, 0.3) !important;
  border-radius: 7px !important;
  min-width: 52px !important;
  padding: 8px 10px !important;
  box-shadow: 0 2px 8px rgba(255, 107, 53, 0.14) !important;
}

.gg-ct-num {
  font-family: 'Inter', 'Source Sans Pro', sans-serif !important;
  font-size: 28px !important;
  font-weight: 800 !important;
  color: var(--gg-orange, #ff6b35) !important;
  line-height: 1 !important;
  letter-spacing: -0.02em !important;
  min-width: 34px !important;
  text-align: center !important;
  display: block !important;
  font-variant-numeric: tabular-nums !important;
}

.gg-ct-unit {
  font-family: 'Inter', 'Source Sans Pro', sans-serif !important;
  font-size: 10px !important;
  font-weight: 600 !important;
  color: var(--gg-navy, #1e3a5f) !important;
  text-transform: uppercase !important;
  letter-spacing: 0.06em !important;
  margin-top: 2px !important;
  display: block !important;
  text-align: center !important;
}

.gg-ct-sep {
  font-size: 24px !important;
  font-weight: 800 !important;
  color: var(--gg-orange, #ff6b35) !important;
  line-height: 1 !important;
  padding-bottom: 18px !important;
  user-select: none !important;
}

@keyframes gg-ct-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(229, 62, 0, 0); }
  50%       { box-shadow: 0 0 0 4px rgba(229, 62, 0, 0.18); }
}

.gg-countdown-timer.gg-ct-urgent {
  border-color: #e53e00 !important;
  background: linear-gradient(135deg, #fff0ea 0%, #fff4ef 100%) !important;
  animation: gg-ct-pulse 2s ease-in-out infinite !important;
}

.gg-countdown-timer.gg-ct-urgent .gg-ct-num {
  color: #e53e00 !important;
}

.gg-countdown-timer.gg-ct-expired {
  display: none !important;
}

/* --- end of GG PATCH v50 --- */

/* GG PATCH v51 — Social Proof Counter: Live Viewer Badge on PDP */

/* --- mobile first (320px–768px) --- */
@media (max-width: 768px) {

  .gg-social-proof {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    background: #fff8f5 !important;
    border: 1px solid rgba(255, 107, 53, 0.25) !important;
    border-radius: 24px !important;
    padding: 10px 16px !important;
    min-height: 44px !important;           /* touch-target safe */
    width: 100% !important;
    box-sizing: border-box !important;
    margin: 0 0 12px !important;
    font-family: 'Inter', 'Source Sans Pro', sans-serif !important;
  }

  .gg-sp-dot {
    width: 8px !important;
    height: 8px !important;
    min-width: 8px !important;
    border-radius: 50% !important;
    background: var(--gg-orange, #ff6b35) !important;
    animation: gg-sp-pulse 1.8s ease-in-out infinite !important;
    flex-shrink: 0 !important;
  }

  .gg-sp-text {
    font-size: 13px !important;
    color: var(--gg-navy, #1e3a5f) !important;
    line-height: 1.3 !important;
    font-weight: 500 !important;
  }

  .gg-sp-count {
    font-weight: 700 !important;
    color: var(--gg-orange, #ff6b35) !important;
  }

  .gg-sp-icon {
    font-size: 15px !important;
    flex-shrink: 0 !important;
    line-height: 1 !important;
  }

}

/* --- desktop (769px+) --- */

.gg-social-proof {
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  background: #fff8f5 !important;
  border: 1px solid rgba(255, 107, 53, 0.22) !important;
  border-radius: 24px !important;
  padding: 7px 14px !important;
  margin: 0 0 14px !important;
  font-family: 'Inter', 'Source Sans Pro', sans-serif !important;
  width: auto !important;
}

.gg-sp-dot {
  width: 8px !important;
  height: 8px !important;
  min-width: 8px !important;
  border-radius: 50% !important;
  background: var(--gg-orange, #ff6b35) !important;
  animation: gg-sp-pulse 1.8s ease-in-out infinite !important;
  flex-shrink: 0 !important;
}

.gg-sp-text {
  font-size: 13px !important;
  color: var(--gg-navy, #1e3a5f) !important;
  line-height: 1.3 !important;
  font-weight: 500 !important;
}

.gg-sp-count {
  font-weight: 700 !important;
  color: var(--gg-orange, #ff6b35) !important;
}

.gg-sp-icon {
  font-size: 14px !important;
  flex-shrink: 0 !important;
  line-height: 1 !important;
}

/* Keyframe — defined outside the media query so it applies to both breakpoints */
@keyframes gg-sp-pulse {
  0%, 100% { opacity: 1;   transform: scale(1); }
  50%       { opacity: 0.5; transform: scale(1.35); }
}

/* Transition for count number swap (JS adds/removes .gg-sp-fade) */
.gg-sp-count {
  transition: opacity 0.3s ease !important;
}
.gg-sp-count.gg-sp-fade {
  opacity: 0 !important;
}

/* Hide widget on non-single-product pages (defensive) */
body:not(.single-product) .gg-social-proof {
  display: none !important;
}

/* Honour prefers-reduced-motion */
@media (prefers-reduced-motion: reduce) {
  .gg-sp-dot {
    animation: none !important;
  }
  .gg-sp-count {
    transition: none !important;
  }
}

/* --- end of GG PATCH v51 --- */

/* GG PATCH v52 — WebP Image Support: MIME enable, auto-convert on upload, feature detection */

/* --- mobile first (320px-768px) --- */
@media (max-width: 768px) {
    /* Normalise <picture> element and any WebP <img> children on mobile.
       Prevents layout collapse when browsers swap src to the WebP source. */
    picture {
        display: block !important;
        width: 100% !important;
        line-height: 0 !important; /* kill phantom gap below inline <img> */
    }
    picture img {
        display: block !important;
        width: 100% !important;
        height: auto !important;
        object-fit: cover !important;
        image-rendering: auto !important;
    }

    /* WooCommerce gallery images — keep cover behaviour on WebP swap */
    .woocommerce-product-gallery__image picture img,
    .woocommerce-product-gallery__image img[src$=".webp"] {
        width: 100% !important;
        height: auto !important;
        object-fit: cover !important;
        object-position: center center !important;
    }

    /* Product cards: thumbnails rendered as WebP must not stretch */
    .woocommerce ul.products li.product a img[src$=".webp"],
    .woocommerce ul.products li.product picture img {
        width: 100% !important;
        height: auto !important;
        aspect-ratio: 1 / 1 !important;
        object-fit: cover !important;
    }

    /* CSS-background WebP support: applied by JS feature-detect below.
       .no-webp class uses the JPEG/PNG fallback variable. */
    .no-webp .gg-hero-bg {
        background-image: var(--gg-hero-bg-fallback, none) !important;
    }
    .webp .gg-hero-bg {
        background-image: var(--gg-hero-bg-webp, var(--gg-hero-bg-fallback, none)) !important;
    }
}

/* --- desktop (769px+) --- */
picture {
    display: block !important;
    width: 100% !important;
    line-height: 0 !important;
}
picture img {
    display: block !important;
    width: 100% !important;
    height: auto !important;
    object-fit: cover !important;
    image-rendering: auto !important;
}

.woocommerce-product-gallery__image picture img,
.woocommerce-product-gallery__image img[src$=".webp"] {
    width: 100% !important;
    height: auto !important;
    object-fit: cover !important;
    object-position: center center !important;
}

.woocommerce ul.products li.product a img[src$=".webp"],
.woocommerce ul.products li.product picture img {
    width: 100% !important;
    height: auto !important;
    aspect-ratio: 1 / 1 !important;
    object-fit: cover !important;
}

.no-webp .gg-hero-bg {
    background-image: var(--gg-hero-bg-fallback, none) !important;
}
.webp .gg-hero-bg {
    background-image: var(--gg-hero-bg-webp, var(--gg-hero-bg-fallback, none)) !important;
}
/* --- end of GG PATCH v52 --- */

/* GG PATCH v53 — Deferred Non-Critical CSS: async preload for wp-block-library & Storefront Gutenberg stylesheets */

/* --- mobile first (320px-768px) --- */
@media (max-width: 768px) {

    /*
     * FOUC guard for Gutenberg / block-rendered content.
     * While wp-block-library loads asynchronously, block elements
     * (paragraphs, images, columns) fall back to readable defaults
     * so content is usable on mobile before the deferred sheet arrives.
     */
    .gg-crit-pending .wp-block-image img {
        display: block !important;
        max-width: 100% !important;
        height: auto !important;
    }
    .gg-crit-pending .wp-block-columns {
        display: flex !important;
        flex-direction: column !important;
        gap: 1rem !important;
    }
    .gg-crit-pending .wp-block-column {
        flex: 1 1 100% !important;
        min-width: 0 !important;
    }
    .gg-crit-pending .wp-block-button__link,
    .gg-crit-pending .wp-element-button {
        display: inline-block !important;
        min-height: 44px !important;        /* touch target */
        padding: 12px 20px !important;
        background: #1e3a5f !important;
        color: #ffffff !important;
        border-radius: 6px !important;
        text-decoration: none !important;
        line-height: 1.4 !important;
    }
    .gg-crit-pending .wp-block-group {
        padding: 16px !important;
    }

}

/* --- desktop (769px+) --- */

/*
 * Same fallbacks for desktop — block layout stays readable
 * in the window before the deferred block-library sheet arrives.
 */
.gg-crit-pending .wp-block-image img {
    display: block !important;
    max-width: 100% !important;
    height: auto !important;
}
.gg-crit-pending .wp-block-columns {
    display: flex !important;
    flex-direction: row !important;
    gap: 1.5rem !important;
    flex-wrap: wrap !important;
}
.gg-crit-pending .wp-block-column {
    flex: 1 1 200px !important;
    min-width: 0 !important;
}
.gg-crit-pending .wp-block-button__link,
.gg-crit-pending .wp-element-button {
    display: inline-block !important;
    min-height: 44px !important;
    padding: 12px 24px !important;
    background: #1e3a5f !important;
    color: #ffffff !important;
    border-radius: 6px !important;
    text-decoration: none !important;
    line-height: 1.4 !important;
}
.gg-crit-pending .wp-block-group {
    padding: 24px !important;
}

/* Ensure prefers-reduced-motion users are never affected */
@media (prefers-reduced-motion: reduce) {
    .gg-crit-pending .wp-block-image img,
    .gg-crit-pending .wp-block-columns,
    .gg-crit-pending .wp-block-column {
        transition: none !important;
        animation: none !important;
    }
}

/* --- end of GG PATCH v53 --- */

/* GG PATCH v54 — Express Checkout Strip: UPI / GPay badges + checkout payment styling */

/* --- mobile first (320px-768px) --- */
@media (max-width: 768px) {

  /* Express checkout strip — top of checkout page */
  .gg-express-checkout {
    display: flex !important;
    flex-direction: column !important;
    gap: 10px !important;
    background: #f8fbff !important;
    border: 1px solid var(--gg-border) !important;
    border-radius: 12px !important;
    padding: 16px !important;
    margin: 0 0 24px !important;
  }

  .gg-express-checkout__label {
    font-size: 11px !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.06em !important;
    color: var(--gg-muted) !important;
    text-align: center !important;
  }

  .gg-express-checkout__buttons {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 8px !important;
    justify-content: center !important;
  }

  /* Individual express pay button — touch target >= 44px */
  .gg-express-btn {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 6px !important;
    min-height: 44px !important;
    padding: 10px 16px !important;
    border-radius: 8px !important;
    border: 1.5px solid var(--gg-border) !important;
    background: #fff !important;
    font-size: 13px !important;
    font-weight: 700 !important;
    color: var(--gg-navy) !important;
    cursor: pointer !important;
    text-decoration: none !important;
    transition: border-color 0.2s, box-shadow 0.2s !important;
    flex: 1 1 120px !important;
    max-width: 180px !important;
  }

  .gg-express-btn:hover,
  .gg-express-btn:focus {
    border-color: var(--gg-blue) !important;
    box-shadow: 0 0 0 3px rgba(27, 117, 187, 0.15) !important;
    outline: none !important;
  }

  .gg-express-btn img,
  .gg-express-btn svg {
    width: 24px !important;
    height: 24px !important;
    object-fit: contain !important;
    flex-shrink: 0 !important;
  }

  .gg-express-btn--gpay { border-color: #e8f0fe !important; background: #f8fbff !important; }
  .gg-express-btn--upi  { border-color: #e8f5e9 !important; background: #f1f8f1 !important; }

  /* Divider "OR pay with card" */
  .gg-express-divider {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    font-size: 11px !important;
    color: var(--gg-muted) !important;
    font-weight: 600 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.05em !important;
  }
  .gg-express-divider::before,
  .gg-express-divider::after {
    content: '' !important;
    flex: 1 !important;
    height: 1px !important;
    background: var(--gg-border) !important;
  }

  /* ── Accepted payment icons strip ── */
  .gg-payment-icons {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 6px !important;
    align-items: center !important;
    justify-content: center !important;
    margin: 16px 0 0 !important;
  }

  .gg-payment-icons__badge {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    height: 28px !important;
    padding: 0 8px !important;
    border: 1px solid var(--gg-border) !important;
    border-radius: 6px !important;
    background: #fff !important;
    font-size: 10px !important;
    font-weight: 800 !important;
    letter-spacing: 0.02em !important;
    color: var(--gg-navy) !important;
    white-space: nowrap !important;
  }

  .gg-payment-icons__badge--upi  { color: #097939 !important; border-color: #c3e6cb !important; }
  .gg-payment-icons__badge--gpay { color: #1a73e8 !important; border-color: #c5d8fc !important; }
  .gg-payment-icons__badge--visa { color: #1a1f71 !important; border-color: #c9cde8 !important; }
  .gg-payment-icons__badge--mc   { color: #eb001b !important; border-color: #f8c9cb !important; }

  /* ── WooCommerce payment method list: badge icons beside label ── */
  .woocommerce-checkout #payment .payment_methods li.payment_method_razorpay label,
  .woocommerce-checkout #payment .payment_methods li[class*="upi"] label,
  .woocommerce-checkout #payment .payment_methods li[class*="gpay"] label {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    color: var(--gg-navy) !important;
    min-height: 44px !important;
  }

  /* Payment method badge pill appended via JS */
  .gg-pm-badge {
    display: inline-block !important;
    font-size: 10px !important;
    font-weight: 700 !important;
    padding: 2px 8px !important;
    border-radius: 999px !important;
    background: #e8f5e9 !important;
    color: #097939 !important;
    margin-left: 6px !important;
  }

  .gg-pm-badge--fast {
    background: #fff3e0 !important;
    color: #e65100 !important;
  }

  /* Cart sidebar UPI trust badge */
  .gg-upi-trust {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    padding: 10px 12px !important;
    background: #f1f8f1 !important;
    border: 1px solid #c3e6cb !important;
    border-radius: 8px !important;
    margin: 12px 0 0 !important;
    font-size: 12px !important;
    font-weight: 600 !important;
    color: #097939 !important;
  }

  .gg-upi-trust svg,
  .gg-upi-trust img {
    width: 20px !important;
    height: 20px !important;
    flex-shrink: 0 !important;
  }

} /* end mobile */

/* --- desktop (769px+) --- */

.gg-express-checkout {
  flex-direction: column !important;
  gap: 12px !important;
  padding: 20px 24px !important;
  border-radius: 14px !important;
  margin: 0 0 28px !important;
}

.gg-express-checkout__buttons {
  flex-direction: row !important;
  flex-wrap: nowrap !important;
  justify-content: flex-start !important;
}

.gg-express-btn {
  flex: 0 0 auto !important;
  min-width: 150px !important;
  font-size: 14px !important;
}

.gg-express-checkout__label {
  text-align: left !important;
}

.gg-payment-icons {
  /* Base flex layout — not just mobile (the @media max-768 block that had these
     rules was not applying on desktop viewports, causing badges to render as
     a single concatenated text string "UPIGPayPhonePeVISAMastercardCOD"). */
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 6px !important;
  align-items: center !important;
  justify-content: flex-start !important;
  margin: 12px 0 0 !important;
}

.gg-payment-icons__badge {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  height: 30px !important;
  padding: 0 8px !important;
  border: 1px solid var(--gg-border-light) !important;
  border-radius: 6px !important;
  background: #fff !important;
  font-size: 11px !important;
  font-weight: 800 !important;
  letter-spacing: 0.02em !important;
  color: var(--gg-navy) !important;
  white-space: nowrap !important;
}

.gg-upi-trust {
  font-size: 13px !important;
}

.woocommerce-checkout #payment .payment_methods li {
  padding: 12px 16px !important;
  border-radius: 8px !important;
  margin-bottom: 6px !important;
  transition: background 0.15s !important;
}

.woocommerce-checkout #payment .payment_methods li:hover {
  background: #f8fbff !important;
}

/* --- end of GG PATCH v54 --- */

/* GG PATCH v55 — CDN Integration: content-visibility + rendering optimisation */

/* --- mobile first (320px-768px) --- */
@media (max-width: 768px) {

  /* content-visibility: offscreen sections render-skipped until near viewport */
  .gg-trust-strip,
  .gg-recently-viewed,
  .gg-bundle-offer,
  .gg-free-ship-bar {
    content-visibility: auto !important;
    contain-intrinsic-size: auto 120px !important;
  }

  /* blog card list items: layout + style containment */
  .blog article.post,
  .archive article.post {
    contain: layout style !important;
    content-visibility: auto !important;
    contain-intrinsic-size: auto 260px !important;
  }

  /* recently-viewed cards: fixed intrinsic height prevents CLS */
  .gg-rv-card {
    content-visibility: auto !important;
    contain-intrinsic-size: auto 180px !important;
  }
}

/* --- desktop (769px+) --- */

.gg-trust-strip,
.gg-recently-viewed,
.gg-bundle-offer,
.gg-free-ship-bar {
  content-visibility: auto !important;
  contain-intrinsic-size: auto 160px !important;
}

.blog article.post,
.archive article.post {
  contain: layout style !important;
  content-visibility: auto !important;
  contain-intrinsic-size: auto 320px !important;
}

.gg-rv-card {
  content-visibility: auto !important;
  contain-intrinsic-size: auto 200px !important;
}

/* product grid cards: add strict layout+style containment for CDN-served images */
ul.products li.product {
  contain: layout style !important;
}

/* --- end of GG PATCH v55 --- */

/* GG PATCH v56 — A/B Test: Hero Variant B (CTA Style + Gradient Experiment) */

/* --- mobile first (320px-768px) --- */
@media (max-width: 768px) {

  /* Variant B: steeper gradient angle, deeper navy anchor */
  body.gg-ab-variant-b .gg-hero-section,
  body.gg-ab-variant-b [class*="gg-hero"] {
    background: linear-gradient(160deg, #0a1f3c 0%, #1b5ea8 55%, #1d8cbf 100%) !important;
  }

  /* Slightly larger mobile heading for visual impact */
  body.gg-ab-variant-b .gg-hero-heading {
    font-size: clamp(36px, 9vw, 46px) !important;
  }

  /* Inverted CTA: white bg + navy text (tests softer contrast against dark hero bg) */
  body.gg-ab-variant-b .gg-hero-cta,
  body.gg-ab-variant-b .gg-hero-section .elementor-button {
    background: #ffffff !important;
    color: var(--gg-navy, #1e3a5f) !important;
    border: 2px solid rgba(255, 107, 53, 0.40) !important;
    box-shadow: 0 4px 18px rgba(0, 0, 0, 0.15) !important;
    min-height: 48px !important;
  }

  body.gg-ab-variant-b .gg-hero-cta:hover,
  body.gg-ab-variant-b .gg-hero-cta:focus,
  body.gg-ab-variant-b .gg-hero-section .elementor-button:hover,
  body.gg-ab-variant-b .gg-hero-section .elementor-button:focus {
    background: #fff4ef !important;
    border-color: var(--gg-orange, #ff6b35) !important;
    color: var(--gg-navy, #1e3a5f) !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.18) !important;
  }

  /*
   * QA label — invisible in production (opacity:0).
   * Set opacity:1 in DevTools to confirm which variant is active during QA.
   * Delete entire rule once experiment concludes.
   */
  body.gg-ab-variant-b::after {
    content: 'AB:B' !important;
    position: fixed !important;
    bottom: 4px !important;
    left: 4px !important;
    font-size: 9px !important;
    background: rgba(0, 0, 0, 0.40) !important;
    color: #fff !important;
    padding: 2px 5px !important;
    border-radius: 4px !important;
    z-index: 9998 !important;
    pointer-events: none !important;
    opacity: 0 !important;
  }

}

/* --- desktop (769px+) --- */

body.gg-ab-variant-b .gg-hero-section,
body.gg-ab-variant-b [class*="gg-hero"] {
  background: linear-gradient(160deg, #0a1f3c 0%, #1b5ea8 55%, #1d8cbf 100%) !important;
}

body.gg-ab-variant-b .gg-hero-heading {
  font-size: clamp(36px, 5vw, 56px) !important;
}

body.gg-ab-variant-b .gg-hero-cta,
body.gg-ab-variant-b .gg-hero-section .elementor-button {
  background: #ffffff !important;
  color: var(--gg-navy, #1e3a5f) !important;
  border: 2px solid rgba(255, 107, 53, 0.40) !important;
  box-shadow: 0 4px 18px rgba(0, 0, 0, 0.15) !important;
  min-height: 48px !important;
}

body.gg-ab-variant-b .gg-hero-cta:hover,
body.gg-ab-variant-b .gg-hero-cta:focus,
body.gg-ab-variant-b .gg-hero-section .elementor-button:hover,
body.gg-ab-variant-b .gg-hero-section .elementor-button:focus {
  background: #fff4ef !important;
  border-color: var(--gg-orange, #ff6b35) !important;
  color: var(--gg-navy, #1e3a5f) !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.18) !important;
}

/* --- end of GG PATCH v56 --- */

/* GG PATCH v57 — A/B Test: Hero CTA Copy Variants */

/* --- mobile first (320px-768px) --- */
@media (max-width: 768px) {

  /*
   * Variant B: "Explore All Toys →" is longer than "Shop Now".
   * Prevent wrapping on narrow screens; keep touch target >= 48px.
   * padding-left/right increased so arrow glyph has breathing room.
   */
  body.gg-ab-copy-b .gg-hero-cta,
  body.gg-ab-copy-b .gg-hero-section .elementor-button,
  body.gg-ab-copy-b .wp-block-cover .wp-block-button__link {
    min-width: 220px !important;
    min-height: 52px !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    padding-left: 20px !important;
    padding-right: 20px !important;
    font-size: 16px !important;
    letter-spacing: 0.01em !important;
  }

  /*
   * Variant B sub-headline: allow 2 lines on narrow screens so the longer
   * benefit copy doesn't overflow the hero container.
   */
  body.gg-ab-copy-b .gg-hero-sub,
  body.gg-ab-copy-b .gg-hero-section .gg-hero-subtitle,
  body.gg-ab-copy-b .wp-block-cover__inner-container > p:first-of-type {
    max-width: 88% !important;
    line-height: 1.5 !important;
    font-size: 14px !important;
  }

  /*
   * QA debug pill — invisible in production (opacity:0).
   * Set opacity:1 in DevTools to confirm variant during QA.
   * Offset 48px right of v56 "AB:B" pill (left:4px) to prevent overlap.
   * REMOVE once experiment concludes.
   */
  body.gg-ab-copy-b::after {
    content: 'AB-COPY:B' !important;
    position: fixed !important;
    bottom: 4px !important;
    left: 52px !important;
    font-size: 9px !important;
    background: rgba(255, 107, 53, 0.75) !important;
    color: #fff !important;
    padding: 2px 5px !important;
    border-radius: 4px !important;
    z-index: 9998 !important;
    pointer-events: none !important;
    opacity: 0 !important;
  }

}

/* --- desktop (769px+) --- */

body.gg-ab-copy-b .gg-hero-cta,
body.gg-ab-copy-b .gg-hero-section .elementor-button,
body.gg-ab-copy-b .wp-block-cover .wp-block-button__link {
  min-width: 240px !important;
  min-height: 52px !important;
  white-space: nowrap !important;
  padding-left: 28px !important;
  padding-right: 28px !important;
  font-size: 17px !important;
  letter-spacing: 0.01em !important;
}

body.gg-ab-copy-b .gg-hero-sub,
body.gg-ab-copy-b .gg-hero-section .gg-hero-subtitle,
body.gg-ab-copy-b .wp-block-cover__inner-container > p:first-of-type {
  font-size: 18px !important;
  line-height: 1.55 !important;
}

/* --- end of GG PATCH v57 --- */

/* GG PATCH v58 — A/B Test: Product Card Grid (3-up vs. 4-up + aspect ratio) */

/* --- mobile first (320px-768px) --- */
@media (max-width: 768px) {

  /*
   * Variant B mobile: grid stays 2-up (touch targets preserved >= 44px).
   * Only the image aspect ratio changes — square crop with cover fill gives
   * consistent card height on narrow screens regardless of source image dimensions.
   */
  body.gg-ab-grid-b ul.products li.product img,
  body.gg-ab-grid-b .woocommerce ul.products li.product img,
  body.gg-ab-grid-b .woocommerce-page ul.products li.product img {
    height: auto !important;
    aspect-ratio: 1 / 1 !important;
    object-fit: cover !important;
    object-position: center top !important;
    width: 100% !important;
    border-radius: 10px !important;
    margin-bottom: 12px !important;
  }

  /*
   * Variant B mobile: GRID stays 2-up — explicitly counter the desktop
   * 4-up rules above, which have higher specificity (body.gg-ab-grid-b prefix,
   * 0-3-3) than the v21 definitive mobile grid (0-2-2) and would otherwise
   * win on mobile, producing 4 narrow columns that violate the 44px touch rule.
   * Values mirror v21 (calc(50% - 7px) with 14px gap).
   */
  body.gg-ab-grid-b ul.products,
  body.gg-ab-grid-b .woocommerce ul.products,
  body.gg-ab-grid-b .woocommerce-page ul.products {
    gap: 14px !important;
    justify-content: flex-start !important;
  }

  body.gg-ab-grid-b ul.products li.product,
  body.gg-ab-grid-b .woocommerce ul.products li.product,
  body.gg-ab-grid-b .woocommerce-page ul.products li.product {
    flex: 0 0 calc(50% - 7px) !important;
    width: calc(50% - 7px) !important;
    max-width: calc(50% - 7px) !important;
    min-width: 0 !important;
    padding: 12px 10px !important;
  }

  /*
   * QA debug pill — invisible in production (opacity:0).
   * Set opacity:1 in DevTools to confirm variant during QA.
   * Offset: v56 pill at left:4px, v57 pill at left:52px, v58 at left:108px.
   * REMOVE entire rule once experiment concludes.
   */
  body.gg-ab-grid-b::after {
    content: 'AB-GRID:B' !important;
    position: fixed !important;
    bottom: 4px !important;
    left: 108px !important;
    font-size: 9px !important;
    background: rgba(30, 58, 95, 0.75) !important;
    color: #fff !important;
    padding: 2px 5px !important;
    border-radius: 4px !important;
    z-index: 9998 !important;
    pointer-events: none !important;
    opacity: 0 !important;
  }

}

/* --- desktop (769px+) --- */

/*
 * Variant B: switch ul.products to a 4-column grid.
 * calc(25% - 15px) x4 + 20px gap x3 ≈ 100% — safe at 1200px+.
 * justify-content: flex-start prevents orphan centering at partial rows.
 */
body.gg-ab-grid-b ul.products,
body.gg-ab-grid-b .woocommerce ul.products,
body.gg-ab-grid-b .woocommerce-page ul.products {
  gap: 20px !important;
  justify-content: flex-start !important;
}

body.gg-ab-grid-b ul.products li.product,
body.gg-ab-grid-b .woocommerce ul.products li.product,
body.gg-ab-grid-b .woocommerce-page ul.products li.product {
  flex: 0 0 calc(25% - 15px) !important;
  width: calc(25% - 15px) !important;
  max-width: calc(25% - 15px) !important;
  padding: 16px 14px 16px !important;
}

/*
 * Variant B desktop image: square aspect ratio, cover fill.
 * Replaces the 210px fixed-height approach — gives uniform card height
 * at the narrower 25% column width without letterboxing.
 */
body.gg-ab-grid-b ul.products li.product img,
body.gg-ab-grid-b .woocommerce ul.products li.product img,
body.gg-ab-grid-b .woocommerce-page ul.products li.product img {
  height: auto !important;
  aspect-ratio: 1 / 1 !important;
  object-fit: cover !important;
  object-position: center top !important;
  width: 100% !important;
  border-radius: 10px !important;
  margin-bottom: 14px !important;
}

/*
 * Scale product title down slightly so text doesn't wrap badly in the
 * narrower 4-up columns. 13px floor preserves readability at all widths.
 */
body.gg-ab-grid-b ul.products li.product h2.woocommerce-loop-product__title,
body.gg-ab-grid-b .woocommerce ul.products li.product h2.woocommerce-loop-product__title {
  font-size: clamp(13px, 1.15vw, 15px) !important;
  line-height: 1.35 !important;
  margin-bottom: 6px !important;
}

/*
 * Tighten price size in 4-up column — 14px floor.
 */
body.gg-ab-grid-b ul.products li.product .price,
body.gg-ab-grid-b .woocommerce ul.products li.product .price {
  font-size: clamp(14px, 1.1vw, 16px) !important;
  margin-bottom: 10px !important;
}

/*
 * ATC button in narrow 4-up column: reduce horizontal padding so
 * "Add to cart" text doesn't clip. min-height stays >= 44px.
 */
body.gg-ab-grid-b ul.products li.product .button,
body.gg-ab-grid-b ul.products li.product a.button,
body.gg-ab-grid-b .woocommerce ul.products li.product .add_to_cart_button,
body.gg-ab-grid-b .woocommerce ul.products li.product .product_type_simple {
  padding: 10px 12px !important;
  font-size: 13px !important;
  min-height: 44px !important;
  width: 100% !important;
}

/* --- end of GG PATCH v58 --- */

/* GG PATCH v59 — Age Filter: fix duplicate hooks & JS touch events */

/* --- mobile first (320px-768px) --- */
@media (max-width: 768px) {
  /* Ensure filter sidebar fills width on mobile */
  .gg-filter-sidebar {
    margin-left: 0 !important;
    margin-right: 0 !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }

  /* Apply / Clear buttons — min 44px touch targets */
  .gg-filter-apply,
  .gg-filter-clear {
    min-height: 44px !important;
    font-size: 15px !important;
  }

  /* Filter chip close buttons — min 44px touch target */
  .gg-filter-chip button {
    min-width: 44px !important;
    min-height: 44px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
  }
}

/* --- desktop (769px+) --- */
.gg-filter-apply,
.gg-filter-clear {
  min-height: 40px !important;
}

.gg-filter-chip button {
  min-width: 28px !important;
  min-height: 28px !important;
}

/* --- end of GG PATCH v59 --- */

/* GG PATCH v60 — Cart Quantity: fix invisible text on desktop */

/* --- mobile first (320px-768px) --- */
@media (max-width: 768px) {

  /* Classic cart — high-specificity reset (0,4,1) overrides the padding conflict */
  .woocommerce-cart .woocommerce-cart-form .quantity input.qty {
    color: var(--gg-navy) !important;
    -webkit-text-fill-color: var(--gg-navy) !important;
    background-color: #ffffff !important;
    width: 60px !important;
    height: 44px !important;
    padding: 0 10px !important;
    line-height: 44px !important;
    text-align: center !important;
    font-size: 15px !important;
    font-weight: 700 !important;
    opacity: 1 !important;
  }

  /* Block cart (WooCommerce 9+) — colour-anchor the container */
  .wc-block-cart .wc-block-components-quantity-selector,
  .wp-block-woocommerce-cart .wc-block-components-quantity-selector {
    color: var(--gg-navy) !important;
    background-color: #ffffff !important;
    border-color: var(--gg-border) !important;
  }

  .wc-block-cart .wc-block-components-quantity-selector__input,
  .wp-block-woocommerce-cart .wc-block-components-quantity-selector__input {
    color: var(--gg-navy) !important;
    -webkit-text-fill-color: var(--gg-navy) !important;
    opacity: 1 !important;
    min-height: 44px !important;
  }

  /* ± buttons — touch target ≥ 44 px */
  .wc-block-cart .wc-block-components-quantity-selector__button,
  .wp-block-woocommerce-cart .wc-block-components-quantity-selector__button {
    color: var(--gg-navy) !important;
    opacity: 0.8 !important;
    min-width: 44px !important;
    min-height: 44px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 18px !important;
    font-weight: 700 !important;
  }

}

/* --- desktop (769px+) --- */

/* Classic cart */
.woocommerce-cart .woocommerce-cart-form .quantity input.qty {
  color: var(--gg-navy) !important;
  -webkit-text-fill-color: var(--gg-navy) !important;
  background-color: #ffffff !important;
  width: 64px !important;
  height: 44px !important;
  padding: 0 10px !important;
  line-height: 44px !important;
  text-align: center !important;
  font-size: 15px !important;
  font-weight: 700 !important;
  opacity: 1 !important;
  border: 1.5px solid var(--gg-border) !important;
  border-radius: 8px !important;
}

/* Block cart */
.wc-block-cart .wc-block-components-quantity-selector,
.wp-block-woocommerce-cart .wc-block-components-quantity-selector {
  color: var(--gg-navy) !important;
  background-color: #ffffff !important;
  border: 1.5px solid var(--gg-border) !important;
  border-radius: 8px !important;
}

.wc-block-cart .wc-block-components-quantity-selector__input,
.wp-block-woocommerce-cart .wc-block-components-quantity-selector__input {
  color: var(--gg-navy) !important;
  -webkit-text-fill-color: var(--gg-navy) !important;
  opacity: 1 !important;
  background: transparent !important;
  font-size: 15px !important;
  font-weight: 700 !important;
}

.wc-block-cart .wc-block-components-quantity-selector__button,
.wp-block-woocommerce-cart .wc-block-components-quantity-selector__button {
  color: var(--gg-navy) !important;
  opacity: 0.75 !important;
  font-size: 18px !important;
  font-weight: 700 !important;
}

/* --- end of GG PATCH v60 --- */

/* GG PATCH v61 — Express checkout strip: UPI / payment trust badge strip */

/* --- mobile first (320px-768px) --- */
@media (max-width: 768px) {

  .gg-payment-strip {
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    gap: 6px 8px !important;
    margin: 12px 0 4px !important;
    padding: 10px 12px !important;
    background: #f7f9fc !important;
    border: 1px solid #e2e8f0 !important;
    border-radius: 10px !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }

  .gg-payment-strip__label {
    display: flex !important;
    align-items: center !important;
    gap: 4px !important;
    font-family: 'Inter', 'Source Sans Pro', sans-serif !important;
    font-size: 11px !important;
    font-weight: 600 !important;
    color: var(--gg-navy, #1e3a5f) !important;
    letter-spacing: 0.02em !important;
    text-transform: uppercase !important;
    width: 100% !important;
    margin-bottom: 2px !important;
  }

  .gg-payment-strip__label svg {
    width: 13px !important;
    height: 13px !important;
    flex-shrink: 0 !important;
  }

  .gg-payment-strip__badges {
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    gap: 5px !important;
    width: 100% !important;
  }

  .gg-payment-strip__badge {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-height: 24px !important;
    padding: 3px 9px !important;
    background: #ffffff !important;
    border: 1px solid #d1dae6 !important;
    border-radius: 6px !important;
    font-family: 'Inter', 'Source Sans Pro', sans-serif !important;
    font-size: 10px !important;
    font-weight: 700 !important;
    letter-spacing: 0.01em !important;
    color: #374151 !important;
    white-space: nowrap !important;
    box-shadow: 0 1px 2px rgba(0,0,0,0.06) !important;
    line-height: 1 !important;
  }

  /* Per-brand accent colours — left border stripe */
  .gg-payment-strip__badge--upi {
    border-left: 3px solid #6d28d9 !important;
    color: #5b21b6 !important;
  }

  .gg-payment-strip__badge--gpay {
    border-left: 3px solid #4285f4 !important;
    color: #1a73e8 !important;
  }

  .gg-payment-strip__badge--phonepe {
    border-left: 3px solid #5f259f !important;
    color: #5f259f !important;
  }

  .gg-payment-strip__badge--paytm {
    border-left: 3px solid #00b9f1 !important;
    color: #0080c0 !important;
  }

  .gg-payment-strip__badge--visa {
    border-left: 3px solid #1a1f71 !important;
    color: #1a1f71 !important;
  }

  .gg-payment-strip__badge--mc {
    border-left: 3px solid #eb001b !important;
    color: #c0001a !important;
  }

  .gg-payment-strip__badge--rupay {
    border-left: 3px solid #006a4e !important;
    color: #006a4e !important;
  }

  /* On mobile, hide the vertical divider (it stacks vertically anyway) */
  .gg-payment-strip__divider {
    display: none !important;
  }

}

/* --- desktop (769px+) --- */

.gg-payment-strip {
  display: flex !important;
  flex-wrap: nowrap !important;
  align-items: center !important;
  gap: 0 10px !important;
  margin: 14px 0 6px !important;
  padding: 10px 14px !important;
  background: #f7f9fc !important;
  border: 1px solid #e2e8f0 !important;
  border-radius: 10px !important;
  width: 100% !important;
  box-sizing: border-box !important;
}

.gg-payment-strip__label {
  display: flex !important;
  align-items: center !important;
  gap: 5px !important;
  font-family: 'Inter', 'Source Sans Pro', sans-serif !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  color: var(--gg-navy, #1e3a5f) !important;
  letter-spacing: 0.03em !important;
  text-transform: uppercase !important;
  white-space: nowrap !important;
  flex-shrink: 0 !important;
  margin-bottom: 0 !important;
  width: auto !important;
}

.gg-payment-strip__label svg {
  width: 14px !important;
  height: 14px !important;
}

.gg-payment-strip__divider {
  display: block !important;
  width: 1px !important;
  height: 20px !important;
  background: #d1dae6 !important;
  flex-shrink: 0 !important;
}

.gg-payment-strip__badges {
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  gap: 5px !important;
  width: auto !important;
}

.gg-payment-strip__badge {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-height: 24px !important;
  padding: 3px 10px !important;
  background: #ffffff !important;
  border: 1px solid #d1dae6 !important;
  border-radius: 6px !important;
  font-family: 'Inter', 'Source Sans Pro', sans-serif !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  letter-spacing: 0.01em !important;
  color: #374151 !important;
  white-space: nowrap !important;
  box-shadow: 0 1px 2px rgba(0,0,0,0.06) !important;
  line-height: 1 !important;
  transition: box-shadow 0.15s ease !important;
}

.gg-payment-strip__badge:hover {
  box-shadow: 0 2px 6px rgba(0,0,0,0.12) !important;
}

/* --- end of GG PATCH v61 --- */

/* GG PATCH v62 — Age Filter: sidebar injection fix + category slug alignment */

/* --- mobile first (320px-768px) --- */
@media (max-width: 768px) {
  /* Injected filter anchor: full-width pill bar above product grid on mobile */
  .gg-age-filter-bar {
    display: block !important;
    width: 100% !important;
    box-sizing: border-box !important;
    background: #fff !important;
    border: 1px solid #e2e8f0 !important;
    border-radius: 12px !important;
    padding: 14px 16px !important;
    margin: 0 0 18px !important;
  }

  .gg-age-filter-bar h4 {
    font-size: 12px !important;
    font-weight: 800 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.06em !important;
    color: var(--gg-navy, #1e3a5f) !important;
    margin: 0 0 10px !important;
  }

  /* Horizontal wrap of age pills on mobile */
  .gg-age-filter-bar .gg-filter-age-group {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: wrap !important;
    gap: 8px !important;
    list-style: none !important;
    padding: 0 !important;
    margin: 0 0 12px !important;
  }

  /* Each pill label is the full tap target (>=44px) */
  .gg-age-filter-bar .gg-filter-age-group li label {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 6px !important;
    padding: 9px 14px !important;
    min-height: 44px !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    color: #475569 !important;
    border: 1.5px solid #e2e8f0 !important;
    border-radius: 999px !important;
    cursor: pointer !important;
    user-select: none !important;
    white-space: nowrap !important;
    background: #f8fafc !important;
    transition: background 0.15s, border-color 0.15s, color 0.15s !important;
  }

  /* Hidden checkbox — pill label is the interactive element */
  .gg-age-filter-bar .gg-filter-age-group li input[type="checkbox"] {
    display: none !important;
  }

  /* Selected pill state */
  .gg-age-filter-bar .gg-filter-age-group li:has(input:checked) label {
    background: var(--gg-navy, #1e3a5f) !important;
    border-color: var(--gg-navy, #1e3a5f) !important;
    color: #fff !important;
  }

  /* Apply / Clear row */
  .gg-age-filter-bar .gg-filter-row {
    display: flex !important;
    gap: 8px !important;
    align-items: center !important;
  }

  .gg-age-filter-bar .gg-filter-apply {
    flex: 1 !important;
    min-height: 44px !important;
    font-size: 14px !important;
    font-weight: 800 !important;
    background: var(--gg-orange, #ff6b35) !important;
    color: #fff !important;
    border: none !important;
    border-radius: 8px !important;
    cursor: pointer !important;
    letter-spacing: 0.03em !important;
  }

  .gg-age-filter-bar .gg-filter-clear {
    min-height: 44px !important;
    padding: 0 14px !important;
    font-size: 12px !important;
    font-weight: 600 !important;
    color: #64748b !important;
    text-decoration: underline !important;
    background: none !important;
    border: none !important;
    cursor: pointer !important;
    white-space: nowrap !important;
  }
}

/* --- desktop (769px+) --- */
.gg-age-filter-bar {
  display: block !important;
  width: 100% !important;
  box-sizing: border-box !important;
  background: #fff !important;
  border: 1px solid #e2e8f0 !important;
  border-radius: 14px !important;
  padding: 18px 20px !important;
  margin: 0 0 24px !important;
}

.gg-age-filter-bar h4 {
  font-size: 13px !important;
  font-weight: 800 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.06em !important;
  color: var(--gg-navy, #1e3a5f) !important;
  margin: 0 0 14px !important;
}

.gg-age-filter-bar .gg-filter-age-group {
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: wrap !important;
  gap: 8px !important;
  list-style: none !important;
  padding: 0 !important;
  margin: 0 0 14px !important;
}

.gg-age-filter-bar .gg-filter-age-group li label {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  padding: 7px 16px !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  color: #475569 !important;
  border: 1.5px solid #e2e8f0 !important;
  border-radius: 999px !important;
  cursor: pointer !important;
  user-select: none !important;
  background: #f8fafc !important;
  transition: background 0.15s, border-color 0.15s, color 0.15s !important;
}

.gg-age-filter-bar .gg-filter-age-group li label:hover {
  background: #f1f5f9 !important;
  border-color: var(--gg-navy, #1e3a5f) !important;
  color: var(--gg-navy, #1e3a5f) !important;
}

.gg-age-filter-bar .gg-filter-age-group li input[type="checkbox"] {
  display: none !important;
}

.gg-age-filter-bar .gg-filter-age-group li:has(input:checked) label {
  background: var(--gg-navy, #1e3a5f) !important;
  border-color: var(--gg-navy, #1e3a5f) !important;
  color: #fff !important;
}

.gg-age-filter-bar .gg-filter-row {
  display: flex !important;
  gap: 10px !important;
  align-items: center !important;
}

.gg-age-filter-bar .gg-filter-apply {
  padding: 9px 24px !important;
  font-size: 13px !important;
  font-weight: 800 !important;
  background: var(--gg-orange, #ff6b35) !important;
  color: #fff !important;
  border: none !important;
  border-radius: 8px !important;
  cursor: pointer !important;
  letter-spacing: 0.04em !important;
  transition: opacity 0.2s !important;
}

.gg-age-filter-bar .gg-filter-apply:hover {
  opacity: 0.9 !important;
}

.gg-age-filter-bar .gg-filter-clear {
  font-size: 12px !important;
  font-weight: 600 !important;
  color: #64748b !important;
  text-decoration: underline !important;
  background: none !important;
  border: none !important;
  cursor: pointer !important;
}

.gg-age-filter-bar .gg-filter-clear:hover {
  color: var(--gg-navy, #1e3a5f) !important;
}

/* =============================================================================
   GG PATCH v74 — Age filter: one-tap pills, Ages 8-12, Apply row hidden
   ============================================================================= */

/* The Apply/Clear row is redundant now that clicking a pill navigates directly */
.gg-age-filter-bar .gg-filter-row,
.gg-filter-sidebar .gg-filter-row {
  display: none !important;
}

/* Active pill — clearer visual when filter is set */
.gg-age-filter-bar .gg-filter-age-group li:has(input:checked) label,
.gg-filter-sidebar .gg-filter-age-group li:has(input:checked) label {
  background: var(--gg-navy, #1e3a5f) !important;
  border-color: var(--gg-navy, #1e3a5f) !important;
  color: #fff !important;
  font-weight: 700 !important;
  box-shadow: 0 2px 8px rgba(30, 58, 95, 0.25) !important;
}

/* Make the filter bar more prominent above the product grid */
.gg-age-filter-bar {
  background: #f0f6ff !important;
  border: 1.5px solid #c7dff7 !important;
  border-radius: 14px !important;
}

.gg-age-filter-bar h4 {
  color: var(--gg-navy, #1e3a5f) !important;
}

/* Pill hover — more obvious it's clickable */
.gg-age-filter-bar .gg-filter-age-group li label:hover {
  background: #dbeafe !important;
  border-color: var(--gg-blue, #1b75bb) !important;
  color: var(--gg-navy, #1e3a5f) !important;
  transform: translateY(-1px) !important;
  box-shadow: 0 2px 6px rgba(27, 117, 187, 0.15) !important;
}

/* --- end of GG PATCH v62 --- */

/* GG PATCH v63 — Bulk Discount Engine: Auto-apply Flat 10% OFF for 2+ items */

/* --- mobile first (320px-768px) --- */
@media (max-width: 768px) {
  /* Active state: 2+ items in cart — green confirmation */
  #gg-discount-bar.gg-discount-bar--active {
    background: linear-gradient(135deg, #16a34a 0%, #15803d 100%) !important;
    border-bottom: 2px solid #14532d !important;
  }

  /* One-more nudge state: 1 item in cart — amber urgency */
  #gg-discount-bar.gg-discount-bar--one-more {
    background: linear-gradient(135deg, #d97706 0%, #b45309 100%) !important;
    border-bottom: 2px solid #92400e !important;
  }

  /* Pulsing animation on active state (mobile) */
  #gg-discount-bar.gg-discount-bar--active .gg-discount-bar__text {
    animation: gg-v63-pulse 2s ease-in-out 3 !important;
  }

  /* Cart fee line: style the Bulk Discount fee row */
  .cart-discount.gg-bulk-discount td,
  .cart-discount.gg-bulk-discount th,
  tr.fee td,
  tr.fee th {
    color: #16a34a !important;
    font-weight: 700 !important;
    font-size: 15px !important;
  }

  /* Cart success notice for bulk discount */
  .woocommerce-message.gg-v63-notice {
    border-top-color: #16a34a !important;
    font-size: 14px !important;
    padding: 12px 16px !important;
    min-height: 44px !important;
    display: flex !important;
    align-items: center !important;
  }
}

/* --- desktop (769px+) --- */
#gg-discount-bar.gg-discount-bar--active {
  background: linear-gradient(135deg, #16a34a 0%, #15803d 100%) !important;
  border-bottom: 2px solid #14532d !important;
}

#gg-discount-bar.gg-discount-bar--one-more {
  background: linear-gradient(135deg, #d97706 0%, #b45309 100%) !important;
  border-bottom: 2px solid #92400e !important;
}

#gg-discount-bar.gg-discount-bar--active .gg-discount-bar__text {
  animation: gg-v63-pulse 2s ease-in-out 3 !important;
}

tr.fee td,
tr.fee th {
  color: #16a34a !important;
  font-weight: 700 !important;
}

@keyframes gg-v63-pulse {
  0%, 100% { opacity: 1; }
  50%       { opacity: 0.75; }
}

/* --- end of GG PATCH v63 --- */

/* GG PATCH v64 — Checkout UX: Razorpay modal guard + form field polish + thankyou delivery timeline */

/* --- mobile first (320px-768px) --- */
@media (max-width: 768px) {

  /* ── 1. Razorpay modal guard ───────────────────────────────────────────── */
  /* When body carries .gg-razorpay-open (added by JS MutationObserver),
     suppress our sticky UI so it doesn't bleed through the backdrop.       */
  body.gg-razorpay-open .gg-sticky-atc,
  body.gg-razorpay-open .gg-whatsapp-btn,
  body.gg-razorpay-open #gg-sticky-atc,
  body.gg-razorpay-open .gg-floating-whatsapp {
    opacity: 0 !important;
    pointer-events: none !important;
    transition: opacity 0.2s ease !important;
  }

  /* ── 2. Checkout form field polish ────────────────────────────────────── */

  /* Section headings */
  .woocommerce-checkout h3,
  .woocommerce-checkout #order_review_heading {
    font-family: 'Inter', 'Source Sans Pro', sans-serif !important;
    font-size: 16px !important;
    font-weight: 700 !important;
    color: var(--gg-navy, #1e3a5f) !important;
    padding-bottom: 8px !important;
    border-bottom: 2px solid var(--gg-orange, #ff6b35) !important;
    margin-bottom: 18px !important;
  }

  /* Input focus ring — navy glow */
  .woocommerce-checkout .woocommerce-input-wrapper input:focus,
  .woocommerce-checkout .woocommerce-input-wrapper select:focus,
  .woocommerce-checkout .woocommerce-input-wrapper textarea:focus,
  .woocommerce form.checkout p.form-row input:focus,
  .woocommerce form.checkout p.form-row select:focus {
    border-color: var(--gg-navy, #1e3a5f) !important;
    box-shadow: 0 0 0 3px rgba(30, 58, 95, 0.15) !important;
    outline: none !important;
  }

  /* Validation error state */
  .woocommerce-checkout .woocommerce-invalid input,
  .woocommerce-checkout .woocommerce-invalid select,
  .woocommerce-checkout .woocommerce-invalid textarea,
  .woocommerce form.checkout .woocommerce-invalid .input-text {
    border-color: #e53e3e !important;
    box-shadow: 0 0 0 3px rgba(229, 62, 62, 0.15) !important;
  }

  .woocommerce-checkout .woocommerce-invalid-required-field::after,
  .woocommerce-checkout .woocommerce-invalid .woocommerce-error {
    color: #e53e3e !important;
    font-size: 12px !important;
    font-weight: 600 !important;
  }

  /* ── 3. Payment method selection highlight ────────────────────────────── */
  .woocommerce-checkout #payment .payment_methods li {
    border: 1px solid #e2e8f0 !important;
    border-radius: 8px !important;
    padding: 12px 14px !important;
    margin-bottom: 8px !important;
    cursor: pointer !important;
    transition: border-color 0.15s, background 0.15s !important;
    min-height: 44px !important;
  }

  .woocommerce-checkout #payment .payment_methods li.payment_method_razorpay {
    border-left: 3px solid #072654 !important;
  }

  .woocommerce-checkout #payment .payment_methods li input[type="radio"]:checked ~ label,
  .woocommerce-checkout #payment .payment_methods li.gg-pm-selected {
    color: var(--gg-navy, #1e3a5f) !important;
    font-weight: 700 !important;
  }

  .woocommerce-checkout #payment .payment_methods li:has(input[type="radio"]:checked) {
    background: #f0f4ff !important;
    border-color: var(--gg-navy, #1e3a5f) !important;
    border-left-color: var(--gg-orange, #ff6b35) !important;
    border-left-width: 3px !important;
  }

  /* ── 4. Place order button — full width + >=44px touch target ─────────── */
  .woocommerce #payment #place_order,
  .woocommerce-checkout #payment #place_order {
    width: 100% !important;
    min-height: 52px !important;
    font-size: 17px !important;
    font-weight: 700 !important;
    font-family: 'Inter', 'Source Sans Pro', sans-serif !important;
    letter-spacing: 0.02em !important;
    background: var(--gg-orange, #ff6b35) !important;
    color: #fff !important;
    border: none !important;
    border-radius: 10px !important;
    cursor: pointer !important;
    padding: 14px 24px !important;
    transition: background 0.2s, transform 0.1s !important;
  }

  .woocommerce #payment #place_order:active,
  .woocommerce-checkout #payment #place_order:active {
    background: #e55a27 !important;
    transform: scale(0.98) !important;
  }

  .woocommerce #payment #place_order::before,
  .woocommerce-checkout #payment #place_order::before {
    content: "🔒 " !important;
    font-size: 15px !important;
  }

  /* ── 5. Thank-you: Razorpay payment card ─────────────────────────────── */
  .gg-rzp-confirm {
    background: #f0f7ff !important;
    border: 1px solid #c5d8fc !important;
    border-left: 4px solid #1a73e8 !important;
    border-radius: 10px !important;
    padding: 16px !important;
    margin: 20px 0 !important;
    font-family: 'Inter', 'Source Sans Pro', sans-serif !important;
  }

  .gg-rzp-confirm__title {
    font-size: 14px !important;
    font-weight: 700 !important;
    color: var(--gg-navy, #1e3a5f) !important;
    margin: 0 0 8px !important;
  }

  .gg-rzp-confirm__row {
    display: flex !important;
    justify-content: space-between !important;
    font-size: 13px !important;
    color: #374151 !important;
    padding: 4px 0 !important;
    border-bottom: 1px solid #e2e8f0 !important;
  }

  .gg-rzp-confirm__row:last-child {
    border-bottom: none !important;
  }

  .gg-rzp-confirm__label {
    font-weight: 600 !important;
    color: #6b7280 !important;
  }

  .gg-rzp-confirm__value {
    font-weight: 700 !important;
    color: var(--gg-navy, #1e3a5f) !important;
    font-family: 'Courier New', monospace !important;
    font-size: 12px !important;
  }

  /* ── 6. Thank-you: delivery timeline ─────────────────────────────────── */
  .gg-delivery-timeline {
    margin: 24px 0 !important;
    padding: 16px !important;
    background: #fff !important;
    border: 1px solid #e2e8f0 !important;
    border-radius: 10px !important;
    font-family: 'Inter', 'Source Sans Pro', sans-serif !important;
  }

  .gg-delivery-timeline__heading {
    font-size: 14px !important;
    font-weight: 700 !important;
    color: var(--gg-navy, #1e3a5f) !important;
    margin: 0 0 16px !important;
  }

  .gg-delivery-timeline__steps {
    display: flex !important;
    flex-direction: column !important;
    gap: 0 !important;
    position: relative !important;
  }

  .gg-delivery-timeline__steps::before {
    content: "" !important;
    position: absolute !important;
    left: 14px !important;
    top: 20px !important;
    bottom: 20px !important;
    width: 2px !important;
    background: #e2e8f0 !important;
  }

  .gg-dt-step {
    display: flex !important;
    align-items: flex-start !important;
    gap: 12px !important;
    padding: 10px 0 !important;
    position: relative !important;
  }

  .gg-dt-step__dot {
    width: 28px !important;
    height: 28px !important;
    border-radius: 50% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 13px !important;
    flex-shrink: 0 !important;
    z-index: 1 !important;
    background: #e2e8f0 !important;
    color: #6b7280 !important;
  }

  .gg-dt-step--done .gg-dt-step__dot {
    background: #d1fae5 !important;
    color: #065f46 !important;
  }

  .gg-dt-step--active .gg-dt-step__dot {
    background: var(--gg-orange, #ff6b35) !important;
    color: #fff !important;
    box-shadow: 0 0 0 4px rgba(255, 107, 53, 0.2) !important;
  }

  .gg-dt-step__content {
    padding-top: 4px !important;
  }

  .gg-dt-step__title {
    font-size: 13px !important;
    font-weight: 700 !important;
    color: var(--gg-navy, #1e3a5f) !important;
    margin: 0 0 2px !important;
  }

  .gg-dt-step__sub {
    font-size: 12px !important;
    color: #6b7280 !important;
    margin: 0 !important;
  }

  .gg-dt-step--active .gg-dt-step__title {
    color: var(--gg-orange, #ff6b35) !important;
  }

} /* end mobile */

/* --- desktop (769px+) --- */

/* Razorpay modal guard — desktop too */
body.gg-razorpay-open .gg-sticky-atc,
body.gg-razorpay-open .gg-whatsapp-btn,
body.gg-razorpay-open #gg-sticky-atc,
body.gg-razorpay-open .gg-floating-whatsapp {
  opacity: 0 !important;
  pointer-events: none !important;
  transition: opacity 0.2s ease !important;
}

/* Section headings */
.woocommerce-checkout h3,
.woocommerce-checkout #order_review_heading {
  font-family: 'Inter', 'Source Sans Pro', sans-serif !important;
  font-size: 18px !important;
  font-weight: 700 !important;
  color: var(--gg-navy, #1e3a5f) !important;
  padding-bottom: 10px !important;
  border-bottom: 2px solid var(--gg-orange, #ff6b35) !important;
  margin-bottom: 22px !important;
}

/* Sticky order review sidebar — clears sticky header (z-index 100) */
.woocommerce-checkout #order_review {
  position: sticky !important;
  top: 110px !important;
}

/* Payment method selected state */
.woocommerce-checkout #payment .payment_methods li:has(input[type="radio"]:checked) {
  background: #f0f4ff !important;
  border-color: var(--gg-navy, #1e3a5f) !important;
  border-left-color: var(--gg-orange, #ff6b35) !important;
  border-left-width: 3px !important;
}

/* Place order button — desktop */
.woocommerce #payment #place_order,
.woocommerce-checkout #payment #place_order {
  min-height: 52px !important;
  font-size: 16px !important;
  font-weight: 700 !important;
  font-family: 'Inter', 'Source Sans Pro', sans-serif !important;
  background: var(--gg-orange, #ff6b35) !important;
  color: #fff !important;
  border: none !important;
  border-radius: 10px !important;
  padding: 14px 32px !important;
  cursor: pointer !important;
  transition: background 0.2s, box-shadow 0.2s, transform 0.1s !important;
}

.woocommerce #payment #place_order:hover,
.woocommerce-checkout #payment #place_order:hover {
  background: #e55a27 !important;
  box-shadow: 0 4px 16px rgba(255, 107, 53, 0.35) !important;
  transform: translateY(-1px) !important;
}

.woocommerce #payment #place_order::before,
.woocommerce-checkout #payment #place_order::before {
  content: "🔒 " !important;
  font-size: 14px !important;
}

/* Thank-you cards — desktop sizing */
.gg-rzp-confirm {
  padding: 20px 24px !important;
  margin: 24px 0 !important;
}

.gg-rzp-confirm__title {
  font-size: 15px !important;
}

.gg-rzp-confirm__row {
  font-size: 14px !important;
}

.gg-rzp-confirm__value {
  font-size: 13px !important;
}

.gg-delivery-timeline {
  padding: 20px 24px !important;
  margin: 28px 0 !important;
}

.gg-delivery-timeline__heading {
  font-size: 15px !important;
}

.gg-delivery-timeline__steps {
  flex-direction: row !important;
  gap: 0 !important;
  justify-content: space-between !important;
}

.gg-delivery-timeline__steps::before {
  top: 14px !important;
  left: 14px !important;
  right: 14px !important;
  bottom: auto !important;
  width: auto !important;
  height: 2px !important;
}

.gg-dt-step {
  flex-direction: column !important;
  align-items: center !important;
  text-align: center !important;
  flex: 1 !important;
  gap: 8px !important;
}

.gg-dt-step__dot {
  width: 32px !important;
  height: 32px !important;
  font-size: 14px !important;
}

.gg-dt-step__content {
  padding-top: 0 !important;
}

/* --- end of GG PATCH v64 --- */

/* GG PATCH v65 — Checkout Progress Indicator: 3-step visual bar */

/* --- mobile first (320px-768px) --- */
@media (max-width: 768px) {

  .gg-progress {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 0 !important;
    padding: 12px 16px 10px !important;
    background: #f8f9fa !important;
    border-bottom: 1px solid #e0e0e0 !important;
    margin: 0 0 20px !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }

  /* Each step = icon circle + label stacked vertically */
  .gg-progress__step {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    gap: 4px !important;
    position: relative !important;
    flex: 1 !important;
    min-width: 0 !important;
  }

  /* Connecting line between steps */
  .gg-progress__step:not(:last-child)::after {
    content: "" !important;
    position: absolute !important;
    top: 22px !important;
    left: calc(50% + 22px) !important;
    right: calc(-50% + 22px) !important;
    height: 2px !important;
    background: #ddd !important;
    z-index: 0 !important;
  }

  .gg-progress__step.is-done:not(:last-child)::after {
    background: var(--gg-navy, #1e3a5f) !important;
  }

  /* Icon circle — 44px touch target */
  .gg-progress__icon {
    width: 44px !important;
    height: 44px !important;
    border-radius: 50% !important;
    background: #e0e0e0 !important;
    border: 2px solid #ccc !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 18px !important;
    position: relative !important;
    z-index: 1 !important;
    transition: background 0.2s, border-color 0.2s !important;
    flex-shrink: 0 !important;
  }

  .gg-progress__step.is-done .gg-progress__icon {
    background: var(--gg-navy, #1e3a5f) !important;
    border-color: var(--gg-navy, #1e3a5f) !important;
    color: #fff !important;
  }

  .gg-progress__step.is-active .gg-progress__icon {
    background: var(--gg-orange, #ff6b35) !important;
    border-color: var(--gg-orange, #ff6b35) !important;
    color: #fff !important;
  }

  .gg-progress__label {
    font-family: 'Inter', 'Source Sans Pro', sans-serif !important;
    font-size: 10px !important;
    font-weight: 600 !important;
    color: #999 !important;
    text-align: center !important;
    line-height: 1.2 !important;
    max-width: 64px !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }

  .gg-progress__step.is-done .gg-progress__label {
    color: var(--gg-navy, #1e3a5f) !important;
  }

  .gg-progress__step.is-active .gg-progress__label {
    color: var(--gg-orange, #ff6b35) !important;
  }
}

/* --- desktop (769px+) --- */

@media (min-width: 769px) {

  .gg-progress {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 0 !important;
    padding: 20px 40px 16px !important;
    background: #f8f9fa !important;
    border-bottom: 1px solid #e0e0e0 !important;
    margin: 0 0 32px !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }

  .gg-progress__step {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    gap: 8px !important;
    position: relative !important;
    flex: 1 !important;
    max-width: 200px !important;
  }

  .gg-progress__step:not(:last-child)::after {
    content: "" !important;
    position: absolute !important;
    top: 24px !important;
    left: calc(50% + 26px) !important;
    right: calc(-50% + 26px) !important;
    height: 3px !important;
    background: #ddd !important;
    z-index: 0 !important;
  }

  .gg-progress__step.is-done:not(:last-child)::after {
    background: var(--gg-navy, #1e3a5f) !important;
  }

  .gg-progress__icon {
    width: 48px !important;
    height: 48px !important;
    border-radius: 50% !important;
    background: #e0e0e0 !important;
    border: 2px solid #ccc !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 20px !important;
    position: relative !important;
    z-index: 1 !important;
    transition: background 0.25s ease, border-color 0.25s ease !important;
    flex-shrink: 0 !important;
  }

  .gg-progress__step.is-done .gg-progress__icon {
    background: var(--gg-navy, #1e3a5f) !important;
    border-color: var(--gg-navy, #1e3a5f) !important;
    color: #fff !important;
  }

  .gg-progress__step.is-active .gg-progress__icon {
    background: var(--gg-orange, #ff6b35) !important;
    border-color: var(--gg-orange, #ff6b35) !important;
    color: #fff !important;
    box-shadow: 0 0 0 4px rgba(255,107,53,.18) !important;
  }

  .gg-progress__label {
    font-family: 'Inter', 'Source Sans Pro', sans-serif !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    color: #999 !important;
    text-align: center !important;
    line-height: 1.3 !important;
    white-space: nowrap !important;
  }

  .gg-progress__step.is-done .gg-progress__label {
    color: var(--gg-navy, #1e3a5f) !important;
  }

  .gg-progress__step.is-active .gg-progress__label {
    color: var(--gg-orange, #ff6b35) !important;
    font-weight: 700 !important;
  }

  /* Done steps: hide emoji, show checkmark via ::before */
  .gg-progress__step.is-done .gg-progress__icon span {
    display: none !important;
  }

  .gg-progress__step.is-done .gg-progress__icon::before {
    content: "\2713" !important;
    font-size: 20px !important;
    color: #fff !important;
    font-weight: 700 !important;
  }

} /* end @media (min-width: 769px) */

/* --- end of GG PATCH v65 --- */

/* GG PATCH v66 — Checkout: Mobile Order Summary Toggle */

/* --- mobile first (320px-768px) --- */
@media (max-width: 768px) {

  /* ── Toggle bar ─────────────────────────────────────────────────────────── */
  .gg-order-summary-bar {
    display: flex !important;
    align-items: center !important;
    background: var(--gg-navy, #1e3a5f) !important;
    color: #fff !important;
    padding: 0 16px !important;
    min-height: 52px !important;
    border-radius: 12px !important;
    margin: 0 0 16px !important;
    cursor: pointer !important;
    user-select: none !important;
    -webkit-tap-highlight-color: transparent !important;
    border: none !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }

  .gg-order-summary-bar__inner {
    display: flex !important;
    align-items: center !important;
    width: 100% !important;
    gap: 8px !important;
  }

  .gg-order-summary-bar__label {
    font-family: 'Inter', 'Source Sans Pro', sans-serif !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    color: rgba(255, 255, 255, 0.85) !important;
    flex: 1 !important;
  }

  .gg-order-summary-bar__total {
    font-family: 'Inter', 'Source Sans Pro', sans-serif !important;
    font-size: 15px !important;
    font-weight: 700 !important;
    color: var(--gg-orange, #ff6b35) !important;
  }

  /* Chevron: › rotated 90° = ▼ (collapsed), 270° = ▲ (expanded) */
  .gg-order-summary-bar__chevron {
    font-size: 22px !important;
    font-weight: 300 !important;
    color: rgba(255, 255, 255, 0.7) !important;
    transform: rotate(90deg) !important;
    transition: transform 0.22s ease !important;
    line-height: 1 !important;
    display: inline-block !important;
    flex-shrink: 0 !important;
  }

  .gg-order-summary-bar.is-open .gg-order-summary-bar__chevron {
    transform: rotate(270deg) !important;
  }

  /* ── Suppress WC's redundant "Your order" heading on mobile ───────────── */
  body.woocommerce-checkout #order_review_heading {
    display: none !important;
  }

  /* ── Order items table: collapsed by default on mobile ───────────────── */
  .woocommerce-checkout .shop_table.woocommerce-checkout-review-order-table {
    display: none !important;
  }

  /* ── Expanded state — JS adds .gg-summary-open to <body> ─────────────── */
  body.gg-summary-open .woocommerce-checkout .shop_table.woocommerce-checkout-review-order-table {
    display: table !important;
    animation: gg-v66-slide-down 0.22s ease forwards !important;
  }

  @keyframes gg-v66-slide-down {
    from { opacity: 0; transform: translateY(-8px); }
    to   { opacity: 1; transform: translateY(0); }
  }

  /* NOTE: #payment (payment methods + Place Order) lives inside #order_review
     but OUTSIDE the table element — it is never hidden by the rules above.    */

}

/* --- desktop (769px+) --- */

/* Toggle bar hidden on desktop — sidebar order review is always visible */
.gg-order-summary-bar {
  display: none !important;
}

/* WC "Your order" heading always visible on desktop */
body.woocommerce-checkout #order_review_heading {
  display: block !important;
}

/* Order items table always visible on desktop */
.woocommerce-checkout .shop_table.woocommerce-checkout-review-order-table {
  display: table !important;
}

/* --- end of GG PATCH v66 --- */

/* GG PATCH v67 — Google Pay Express Checkout (Cart + Checkout via Razorpay API) */

/* --- mobile first (320px-768px) --- */
@media (max-width: 768px) {

  /* Section wrapper */
  .gg-gpay-section {
    display: block !important;
    width: 100% !important;
    box-sizing: border-box !important;
    margin: 16px 0 0 !important;
    padding: 0 !important;
  }

  /* "or pay with" divider */
  .gg-gpay-or {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    margin: 0 0 12px !important;
  }

  .gg-gpay-or::before,
  .gg-gpay-or::after {
    content: '' !important;
    flex: 1 !important;
    height: 1px !important;
    background: var(--gg-border, #e5ecf3) !important;
  }

  .gg-gpay-or__text {
    font-family: 'Inter', 'Source Sans Pro', sans-serif !important;
    font-size: 11px !important;
    font-weight: 600 !important;
    color: var(--gg-muted, #64748b) !important;
    text-transform: uppercase !important;
    letter-spacing: 0.08em !important;
    white-space: nowrap !important;
  }

  /* Google Pay button — black per Google's brand spec */
  .gg-gpay-btn {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 10px !important;
    width: 100% !important;
    min-height: 48px !important;
    padding: 0 20px !important;
    background: #000 !important;
    color: #fff !important;
    border: none !important;
    border-radius: 10px !important;
    font-family: 'Inter', 'Source Sans Pro', sans-serif !important;
    font-size: 15px !important;
    font-weight: 600 !important;
    letter-spacing: 0.01em !important;
    cursor: pointer !important;
    -webkit-tap-highlight-color: transparent !important;
    transition: opacity 0.18s ease, transform 0.1s ease !important;
    box-sizing: border-box !important;
    position: relative !important;
    overflow: hidden !important;
  }

  .gg-gpay-btn:active {
    opacity: 0.88 !important;
    transform: scale(0.98) !important;
  }

  /* "G" logo mark: gradient text to suggest Google's multicolour G */
  .gg-gpay-btn__logo {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 22px !important;
    height: 22px !important;
    border-radius: 4px !important;
    flex-shrink: 0 !important;
    font-size: 14px !important;
    font-weight: 900 !important;
    background-image: linear-gradient(135deg, #4285F4 0%, #EA4335 35%, #FBBC05 65%, #34A853 100%) !important;
    -webkit-background-clip: text !important;
    background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    color: transparent !important;
    letter-spacing: -1px !important;
  }

  .gg-gpay-btn__label {
    color: #fff !important;
  }

  /* Loading state */
  .gg-gpay-btn.is-loading {
    pointer-events: none !important;
    opacity: 0.75 !important;
  }

  .gg-gpay-btn.is-loading .gg-gpay-btn__label::after {
    content: '' !important;
    display: inline-block !important;
    width: 14px !important;
    height: 14px !important;
    border: 2px solid rgba(255,255,255,0.4) !important;
    border-top-color: #fff !important;
    border-radius: 50% !important;
    animation: gg-v67-spin 0.7s linear infinite !important;
    vertical-align: middle !important;
    margin-left: 8px !important;
  }

  @keyframes gg-v67-spin {
    to { transform: rotate(360deg); }
  }

  /* Error message */
  .gg-gpay-error {
    display: none !important;
    margin-top: 8px !important;
    padding: 10px 14px !important;
    background: #fef2f2 !important;
    border: 1px solid #fca5a5 !important;
    border-radius: 8px !important;
    color: #b91c1c !important;
    font-size: 13px !important;
    font-weight: 500 !important;
    line-height: 1.4 !important;
  }

  .gg-gpay-error.is-visible {
    display: block !important;
  }

  /* Hide the cart-page GPay section when on the checkout page (mobile focus is order summary bar) */
  body.woocommerce-checkout .gg-gpay-section--cart {
    display: none !important;
  }

  /* GPay checkout-page wrapper */
  .gg-gpay-checkout-wrap {
    display: block !important;
    margin: 12px 0 0 !important;
  }

  .gg-gpay-checkout-wrap .gg-gpay-btn {
    min-height: 52px !important;
    font-size: 16px !important;
    border-radius: 12px !important;
  }

}

/* --- desktop (769px+) --- */

.gg-gpay-section {
  display: block !important;
  width: 100% !important;
  box-sizing: border-box !important;
  margin: 20px 0 0 !important;
  padding: 0 !important;
}

.gg-gpay-or {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  margin: 0 0 14px !important;
}

.gg-gpay-or::before,
.gg-gpay-or::after {
  content: '' !important;
  flex: 1 !important;
  height: 1px !important;
  background: var(--gg-border, #e5ecf3) !important;
}

.gg-gpay-or__text {
  font-family: 'Inter', 'Source Sans Pro', sans-serif !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  color: var(--gg-muted, #64748b) !important;
  text-transform: uppercase !important;
  letter-spacing: 0.08em !important;
  white-space: nowrap !important;
}

.gg-gpay-btn {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 10px !important;
  width: 100% !important;
  min-height: 46px !important;
  padding: 0 24px !important;
  background: #000 !important;
  color: #fff !important;
  border: none !important;
  border-radius: 10px !important;
  font-family: 'Inter', 'Source Sans Pro', sans-serif !important;
  font-size: 15px !important;
  font-weight: 600 !important;
  letter-spacing: 0.01em !important;
  cursor: pointer !important;
  transition: opacity 0.18s ease !important;
  box-sizing: border-box !important;
  position: relative !important;
}

.gg-gpay-btn:hover {
  opacity: 0.88 !important;
}

.gg-gpay-btn:active {
  opacity: 0.75 !important;
}

.gg-gpay-btn__logo {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 22px !important;
  height: 22px !important;
  border-radius: 4px !important;
  flex-shrink: 0 !important;
  font-size: 14px !important;
  font-weight: 900 !important;
  background-image: linear-gradient(135deg, #4285F4 0%, #EA4335 35%, #FBBC05 65%, #34A853 100%) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  color: transparent !important;
  letter-spacing: -1px !important;
}

.gg-gpay-btn__label {
  color: #fff !important;
}

.gg-gpay-btn.is-loading {
  pointer-events: none !important;
  opacity: 0.75 !important;
}

.gg-gpay-btn.is-loading .gg-gpay-btn__label::after {
  content: '' !important;
  display: inline-block !important;
  width: 14px !important;
  height: 14px !important;
  border: 2px solid rgba(255,255,255,0.4) !important;
  border-top-color: #fff !important;
  border-radius: 50% !important;
  animation: gg-v67-spin 0.7s linear infinite !important;
  vertical-align: middle !important;
  margin-left: 8px !important;
}

.gg-gpay-error {
  display: none !important;
  margin-top: 10px !important;
  padding: 10px 16px !important;
  background: #fef2f2 !important;
  border: 1px solid #fca5a5 !important;
  border-radius: 8px !important;
  color: #b91c1c !important;
  font-size: 13px !important;
  font-weight: 500 !important;
}

.gg-gpay-error.is-visible {
  display: block !important;
}

.gg-gpay-checkout-wrap {
  display: block !important;
  margin: 16px 0 0 !important;
}

/* Cart-page section is not displayed on the checkout page on any viewport */
body.woocommerce-checkout .gg-gpay-section--cart {
  display: none !important;
}

/* --- end of GG PATCH v67 --- */

/* GG PATCH v68 — UPI Acceptance Badge */

/* --- mobile first (320px-768px) --- */
@media (max-width: 768px) {

  .gg-upi-badge {
    display: flex !important;
    flex-direction: column !important;
    gap: 10px !important;
    margin: 12px 0 4px !important;
    padding: 14px 14px 12px !important;
    background: linear-gradient(135deg, #f5f0ff 0%, #fdf8ff 100%) !important;
    border: 1.5px solid #d4bbf5 !important;
    border-radius: 12px !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }

  /* Header row: UPI logo + title */
  .gg-upi-badge__header {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
  }

  /* SVG UPI logo container */
  .gg-upi-badge__logo {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 44px !important;
    height: 44px !important;
    min-width: 44px !important;
    background: #ffffff !important;
    border-radius: 8px !important;
    border: 1px solid #d4bbf5 !important;
    box-shadow: 0 1px 4px rgba(109, 40, 217, 0.10) !important;
    flex-shrink: 0 !important;
  }

  .gg-upi-badge__logo svg {
    width: 28px !important;
    height: 18px !important;
  }

  .gg-upi-badge__title-wrap {
    display: flex !important;
    flex-direction: column !important;
    gap: 1px !important;
  }

  .gg-upi-badge__title {
    font-family: 'Inter', 'Source Sans Pro', sans-serif !important;
    font-size: 13px !important;
    font-weight: 700 !important;
    color: var(--gg-navy, #1e3a5f) !important;
    line-height: 1.3 !important;
    margin: 0 !important;
  }

  .gg-upi-badge__sub {
    font-family: 'Inter', 'Source Sans Pro', sans-serif !important;
    font-size: 11px !important;
    font-weight: 500 !important;
    color: #6d28d9 !important;
    line-height: 1.2 !important;
  }

  /* App pills */
  .gg-upi-badge__apps {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 6px !important;
    align-items: center !important;
  }

  .gg-upi-badge__app {
    display: inline-flex !important;
    align-items: center !important;
    gap: 4px !important;
    padding: 5px 10px !important;
    min-height: 28px !important;
    background: #ffffff !important;
    border: 1px solid #d4bbf5 !important;
    border-radius: 20px !important;
    font-family: 'Inter', 'Source Sans Pro', sans-serif !important;
    font-size: 11px !important;
    font-weight: 600 !important;
    color: #374151 !important;
    white-space: nowrap !important;
    box-shadow: 0 1px 3px rgba(109, 40, 217, 0.07) !important;
    line-height: 1 !important;
  }

  .gg-upi-badge__app-dot {
    width: 7px !important;
    height: 7px !important;
    border-radius: 50% !important;
    flex-shrink: 0 !important;
  }
  .gg-upi-badge__app-dot--bhim    { background: #00569b !important; }
  .gg-upi-badge__app-dot--phonepe { background: #5f259f !important; }
  .gg-upi-badge__app-dot--gpay    { background: #4285f4 !important; }
  .gg-upi-badge__app-dot--paytm   { background: #00b9f1 !important; }

  /* Trust line */
  .gg-upi-badge__trust {
    display: flex !important;
    align-items: center !important;
    gap: 5px !important;
    font-family: 'Inter', 'Source Sans Pro', sans-serif !important;
    font-size: 10px !important;
    font-weight: 500 !important;
    color: #6b7280 !important;
    line-height: 1.3 !important;
  }

  .gg-upi-badge__trust svg {
    width: 12px !important;
    height: 12px !important;
    flex-shrink: 0 !important;
    color: #6d28d9 !important;
  }

  /* Desktop-only divider hidden on mobile */
  .gg-upi-badge__divider {
    display: none !important;
  }

  /* Trust-line wrapper: show as a single row on mobile */
  .gg-upi-badge__trust-line {
    display: inline-flex !important;
    align-items: center !important;
    gap: 4px !important;
  }

  /* Variant guards */
  body.woocommerce-checkout .gg-upi-badge--cart     { display: none !important; }
  body.woocommerce-cart    .gg-upi-badge--checkout  { display: none !important; }

}

/* --- desktop (769px+) --- */

.gg-upi-badge {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  gap: 0 12px !important;
  margin: 14px 0 6px !important;
  padding: 12px 16px !important;
  background: linear-gradient(135deg, #f5f0ff 0%, #fdf8ff 100%) !important;
  border: 1.5px solid #d4bbf5 !important;
  border-radius: 12px !important;
  width: 100% !important;
  box-sizing: border-box !important;
}

.gg-upi-badge__header {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  flex-shrink: 0 !important;
}

.gg-upi-badge__logo {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 48px !important;
  height: 48px !important;
  min-width: 48px !important;
  background: #ffffff !important;
  border-radius: 8px !important;
  border: 1px solid #d4bbf5 !important;
  box-shadow: 0 1px 4px rgba(109, 40, 217, 0.10) !important;
  flex-shrink: 0 !important;
}

.gg-upi-badge__logo svg {
  width: 30px !important;
  height: 20px !important;
}

.gg-upi-badge__title-wrap {
  display: flex !important;
  flex-direction: column !important;
  gap: 2px !important;
}

.gg-upi-badge__title {
  font-family: 'Inter', 'Source Sans Pro', sans-serif !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  color: var(--gg-navy, #1e3a5f) !important;
  line-height: 1.3 !important;
  margin: 0 !important;
  white-space: nowrap !important;
}

.gg-upi-badge__sub {
  font-family: 'Inter', 'Source Sans Pro', sans-serif !important;
  font-size: 11px !important;
  font-weight: 500 !important;
  color: #6d28d9 !important;
  line-height: 1.2 !important;
  white-space: nowrap !important;
}

/* Vertical divider */
.gg-upi-badge__divider {
  display: block !important;
  width: 1px !important;
  height: 32px !important;
  background: #d4bbf5 !important;
  flex-shrink: 0 !important;
}

.gg-upi-badge__apps {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 5px !important;
  align-items: center !important;
  flex: 1 !important;
}

.gg-upi-badge__app {
  display: inline-flex !important;
  align-items: center !important;
  gap: 4px !important;
  padding: 4px 11px !important;
  min-height: 26px !important;
  background: #ffffff !important;
  border: 1px solid #d4bbf5 !important;
  border-radius: 20px !important;
  font-family: 'Inter', 'Source Sans Pro', sans-serif !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  color: #374151 !important;
  white-space: nowrap !important;
  box-shadow: 0 1px 3px rgba(109, 40, 217, 0.07) !important;
  line-height: 1 !important;
  transition: box-shadow 0.15s ease !important;
}

.gg-upi-badge__app:hover {
  box-shadow: 0 2px 6px rgba(109, 40, 217, 0.15) !important;
}

.gg-upi-badge__app-dot {
  width: 7px !important;
  height: 7px !important;
  border-radius: 50% !important;
  flex-shrink: 0 !important;
}
.gg-upi-badge__app-dot--bhim    { background: #00569b !important; }
.gg-upi-badge__app-dot--phonepe { background: #5f259f !important; }
.gg-upi-badge__app-dot--gpay    { background: #4285f4 !important; }
.gg-upi-badge__app-dot--paytm   { background: #00b9f1 !important; }

.gg-upi-badge__trust {
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-end !important;
  gap: 2px !important;
  flex-shrink: 0 !important;
  margin-left: auto !important;
}

.gg-upi-badge__trust-line {
  display: flex !important;
  align-items: center !important;
  gap: 4px !important;
  font-family: 'Inter', 'Source Sans Pro', sans-serif !important;
  font-size: 10px !important;
  font-weight: 500 !important;
  color: #6b7280 !important;
  line-height: 1.3 !important;
  white-space: nowrap !important;
}

.gg-upi-badge__trust-line svg {
  width: 11px !important;
  height: 11px !important;
  flex-shrink: 0 !important;
  color: #6d28d9 !important;
}

/* Variant guards */
body.woocommerce-checkout .gg-upi-badge--cart     { display: none !important; }
body.woocommerce-cart    .gg-upi-badge--checkout  { display: none !important; }

/* --- end of GG PATCH v68 --- */

/* GG PATCH v69 — Express Checkout Strip (Cart Page Unification) */

/* --- mobile first (320px-768px) --- */
@media (max-width: 768px) {

  /* Outer wrapper — sits between cart totals and the standard Proceed button */
  .gg-express-strip {
    display: block !important;
    width: 100% !important;
    box-sizing: border-box !important;
    margin: 16px 0 8px !important;
    padding: 14px 14px 10px !important;
    background: linear-gradient(135deg, #f0f7ff 0%, #fdf4ef 100%) !important;
    border: 1.5px solid #c7dff7 !important;
    border-radius: 14px !important;
    box-shadow: 0 2px 12px rgba(30,58,95,0.07) !important;
  }

  /* Header row */
  .gg-express-strip__header {
    display: flex !important;
    align-items: center !important;
    gap: 6px !important;
    margin-bottom: 12px !important;
  }

  .gg-express-strip__bolt {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 24px !important;
    height: 24px !important;
    border-radius: 50% !important;
    background: var(--gg-orange, #ff6b35) !important;
    flex-shrink: 0 !important;
  }

  .gg-express-strip__bolt svg {
    width: 13px !important;
    height: 13px !important;
    fill: #fff !important;
    display: block !important;
  }

  .gg-express-strip__title {
    font-family: 'Inter', 'Source Sans Pro', sans-serif !important;
    font-size: 13px !important;
    font-weight: 700 !important;
    color: var(--gg-navy, #1e3a5f) !important;
    line-height: 1.2 !important;
    letter-spacing: 0.01em !important;
  }

  .gg-express-strip__sub {
    font-family: 'Inter', 'Source Sans Pro', sans-serif !important;
    font-size: 10px !important;
    font-weight: 500 !important;
    color: #5a7a9e !important;
    line-height: 1.3 !important;
    display: block !important;
  }

  /* Inner content area — children stacked on mobile */
  .gg-express-strip__body {
    display: flex !important;
    flex-direction: column !important;
    gap: 10px !important;
  }

  /* Override GPay section within the strip — remove its own outer margin */
  .gg-express-strip .gg-gpay-section--cart {
    margin: 0 !important;
    padding: 0 !important;
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
  }

  /* Hide the redundant "or pay with" text from v67 — strip header replaces it */
  .gg-express-strip .gg-gpay-or {
    display: none !important;
  }

  /* GPay button full-width on mobile, min 48px touch target */
  .gg-express-strip .gg-gpay-btn {
    width: 100% !important;
    min-height: 48px !important;
    justify-content: center !important;
    font-size: 14px !important;
  }

  /* UPI badge within strip — remove its own margin */
  .gg-express-strip .gg-upi-badge {
    margin: 0 !important;
  }

  /* "or checkout normally" divider — rendered below the .gg-express-strip div */
  .gg-express-strip__divider {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    margin: 12px 0 4px !important;
    color: #8fa8c4 !important;
    font-family: 'Inter', 'Source Sans Pro', sans-serif !important;
    font-size: 11px !important;
    font-weight: 500 !important;
    letter-spacing: 0.02em !important;
    text-transform: uppercase !important;
  }

  .gg-express-strip__divider::before,
  .gg-express-strip__divider::after {
    content: '' !important;
    flex: 1 !important;
    height: 1px !important;
    background: #c7dff7 !important;
  }

}

/* --- desktop (769px+) --- */

.gg-express-strip {
  margin: 18px 0 10px !important;
  padding: 16px 18px 12px !important;
  background: linear-gradient(135deg, #f0f7ff 0%, #fdf4ef 100%) !important;
  border: 1.5px solid #c7dff7 !important;
  border-radius: 14px !important;
  box-shadow: 0 2px 12px rgba(30,58,95,0.07) !important;
}

.gg-express-strip__header {
  margin-bottom: 14px !important;
}

.gg-express-strip__bolt {
  width: 26px !important;
  height: 26px !important;
}

.gg-express-strip__bolt svg {
  width: 14px !important;
  height: 14px !important;
}

.gg-express-strip__title {
  font-size: 14px !important;
}

.gg-express-strip__sub {
  font-size: 11px !important;
  display: block !important;
}

/* On desktop: GPay button + UPI badge side by side */
.gg-express-strip__body {
  display: flex !important;
  flex-direction: row !important;
  align-items: flex-start !important;
  gap: 12px !important;
  flex-wrap: wrap !important;
}

.gg-express-strip .gg-gpay-section--cart {
  margin: 0 !important;
  padding: 0 !important;
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  flex: 0 0 auto !important;
}

.gg-express-strip .gg-gpay-or {
  display: none !important;
}

.gg-express-strip .gg-gpay-btn {
  min-height: 46px !important;
  font-size: 14px !important;
  padding-left: 20px !important;
  padding-right: 20px !important;
}

.gg-express-strip .gg-upi-badge {
  margin: 0 !important;
  flex: 1 !important;
  min-width: 0 !important;
}

.gg-express-strip__divider {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  margin: 14px 0 6px !important;
  color: #8fa8c4 !important;
  font-family: 'Inter', 'Source Sans Pro', sans-serif !important;
  font-size: 11px !important;
  font-weight: 500 !important;
  letter-spacing: 0.03em !important;
  text-transform: uppercase !important;
}

.gg-express-strip__divider::before,
.gg-express-strip__divider::after {
  content: '' !important;
  flex: 1 !important;
  height: 1px !important;
  background: #c7dff7 !important;
}

/* --- end of GG PATCH v69 --- */

/* ── GG PATCH breadcrumb-fix — Single clean separator ────────────────────────
   Several CSS rules were generating duplicate › separators:
     1. line ~3195: > span:not(:last-child)::after { content:" › " }
     2. line ~9689: > *:not(:last-child)::after   { content:'›' }
   Storefront also outputs <span class="breadcrumb-separator"> / </span>.
   Fix: kill all CSS-generated ::after separators, replace the Storefront
   span with a styled › via ::before instead of the raw "/" text.
   ────────────────────────────────────────────────────────────────────────── */

/* 1. Kill ALL breadcrumb ::after content (eliminates duplicates) */
.woocommerce-breadcrumb > *::after,
nav.woocommerce-breadcrumb > *::after {
  content: none !important;
  display: none !important;
}

/* 2. Style the Storefront separator span — just make the "/" look clean */
.woocommerce-breadcrumb .breadcrumb-separator {
  display: inline !important;
  color: #94a3b8 !important;
  font-size: 13px !important;
  font-weight: 400 !important;
  padding: 0 4px !important;
  margin: 0 !important;
}

/* 3. Also style the v43 gg-bc-sep span for pages where the filter does fire */
.woocommerce-breadcrumb .gg-bc-sep {
  font-size: 13px !important;
  color: #94a3b8 !important;
  margin: 0 2px !important;
  display: inline !important;
}
/* --- end of GG PATCH breadcrumb-fix --- */

/* ── GG PATCH breadcrumb-fix-v2 — Kill remaining duplicate separator ─────────
   JS inspection revealed two residual problems:
   a) Separator 0 (non-last element) still has ::after content:"›" because the
      competing rule at line ~9689:
        .woocommerce-breadcrumb > *:not(:last-child)::after { content:'›' !important }
      has specificity (0,2,0,1) which beats our kill at (0,1,0,1).
      Fix: match the same :not(:last-child) selector so specificity ties, then
      our later position in the file wins.
   b) Both .breadcrumb-separator spans show display:block instead of inline.
      Fix: boost specificity with "html body" prefix.
   c) Last separator inherits navy colour instead of grey.
      Fix: same high-specificity rule forces #94a3b8 on both separators.
   ─────────────────────────────────────────────────────────────────────────── */

/* 1. Kill ::after on non-last-child breadcrumb items (same-specificity override) */
.woocommerce-breadcrumb > *:not(:last-child)::after,
.woocommerce-breadcrumb > span:not(:last-child)::after,
nav.woocommerce-breadcrumb > *:not(:last-child)::after,
nav.woocommerce-breadcrumb > span:not(:last-child)::after {
  content: none !important;
  display: none !important;
}

/* 2. Force separator inline + grey colour with elevated specificity */
html body .woocommerce-breadcrumb span.breadcrumb-separator,
html body nav.woocommerce-breadcrumb span.breadcrumb-separator {
  display: inline !important;
  color: #94a3b8 !important;
  font-size: 13px !important;
  font-weight: 400 !important;
  padding: 0 5px !important;
  margin: 0 !important;
  overflow: visible !important;
  max-width: none !important;
  white-space: normal !important;
}

/* 3. Ensure no pseudo-content on separator spans */
html body .woocommerce-breadcrumb span.breadcrumb-separator::before,
html body .woocommerce-breadcrumb span.breadcrumb-separator::after {
  content: none !important;
  display: none !important;
}

/* --- end of GG PATCH breadcrumb-fix-v2 --- */

/* ── GG PATCH v70 — Mini-cart close button + button icon-font gibberish ──────
   Issues:
   1. Close button X (SVG) invisible — parent theme / WC may hide button SVGs
   2. "View cart ŒE«" / "Checkout ŒE«" — Storefront icon-font ::after character
      renders as raw mojibake when the storefront-icons webfont fails to load.
      These characters come from the Storefront parent theme CSS:
        a.button.wc-forward::after  { font-family:storefront-icons; content:"\e001" }
        a.button.checkout::after    { font-family:storefront-icons; content:"\e001" }
      and also appear on the product-card "View cart" (added_to_cart button).
   ─────────────────────────────────────────────────────────────────────────── */

/* 1. Force close-button SVG to be fully visible.
      Root cause: flex-shrink:1 collapses SVG to 0 width because SVG with viewBox
      but no width/height HTML attribute has min-content size = 0.
      Fix: min-width + flex-shrink:0 prevent the collapse. */
.gg-mini-cart__close svg {
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
  width: 18px !important;
  height: 18px !important;
  min-width: 18px !important;
  flex-shrink: 0 !important;
  stroke: var(--gg-navy, #1e3a5f) !important;
  stroke-width: 2.5 !important;
  fill: none !important;
  stroke-linecap: round !important;
  overflow: visible !important;
  pointer-events: none !important;
}

.gg-mini-cart__close svg path {
  stroke: var(--gg-navy, #1e3a5f) !important;
  stroke-width: 2.5 !important;
  fill: none !important;
  stroke-linecap: round !important;
}

/* 2. Kill the icon-font glyph on mini-cart drawer View Cart + Checkout buttons */
.gg-mini-cart__body .woocommerce-mini-cart__buttons a.button::after,
.gg-mini-cart__body .woocommerce-mini-cart__buttons a.button::before {
  content: none !important;
  display: none !important;
}

/* 3. Kill the icon-font glyph on the product-card "View cart" button
      (appears as a dark tooltip/pill after Add to Cart is clicked) */
a.added_to_cart::after,
a.added_to_cart::before,
.woocommerce a.button.wc-forward::after,
.woocommerce a.button.wc-forward::before,
.woocommerce-page a.button.wc-forward::after,
.woocommerce-page a.button.wc-forward::before {
  content: none !important;
  display: none !important;
}

/* 4. Kill storefront-icons glyph on ALL buttons sitewide (catch-all) */
.button::after,
a.button::after,
button.button::after,
input.button::after,
.wp-element-button::after {
  font-family: inherit !important;
  content: none !important;
  display: none !important;
}

/* --- end of GG PATCH v70 --- */

/* GG PATCH v71 — Hide Storefront product prev/next pagination nav
   The Storefront theme renders these as position:fixed panels that bleed
   off the left (-455px) and right (988px+) viewport edges regardless of
   parent overflow. Hiding the entire nav is the cleanest solution. */
.storefront-product-pagination {
  display: none !important;
}

/* --- end of GG PATCH v71 --- */

/* =============================================================================
   GG PATCH v72 — Comprehensive Mobile Layout Fix
   Fixes the broken mobile header where nav shows as a bulleted list, logo is
   oversized, hamburger icon is invisible, and Storefront handheld bar leaks
   through.  All mobile rules now carry !important to beat parent-theme and
   earlier-patch overrides that use !important on desktop rules.
   ============================================================================= */

/* ─────────────────────────────────────────────────────────────────────────────
   1. FORCE-HIDE Storefront default elements on ALL viewports
      (belt-and-suspenders — earlier patches set this too, but cascade order
       matters when the parent theme reloads its own styles)
   ───────────────────────────────────────────────────────────────────────────── */
.storefront-handheld-footer-bar,
.storefront-handheld-footer-bar *,
.storefront-primary-navigation,
header.site-header:not(#gg-site-header),
.site-header:not(#gg-site-header),
.storefront-handheld-footer-bar ul,
.storefront-handheld-footer-bar li,
.storefront-handheld-footer-bar a {
  display: none !important;
  visibility: hidden !important;
  height: 0 !important;
  min-height: 0 !important;
  overflow: hidden !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

/* ─────────────────────────────────────────────────────────────────────────────
   2. MOBILE HEADER — max-width: 1024px overrides with !important
   ───────────────────────────────────────────────────────────────────────────── */
@media (max-width: 1024px) {

  /* --- Header row: 3-column mobile grid --- */
  .gg-header-row {
    display: grid !important;
    grid-template-columns: 48px minmax(0, 1fr) auto !important;
    align-items: center !important;
    gap: 8px !important;
    min-height: var(--gg-header-height-mobile) !important;
  }

  /* --- Hide desktop nav on mobile --- */
  .gg-primary-nav,
  nav.gg-primary-nav,
  #gg-site-header .gg-primary-nav {
    display: none !important;
    visibility: hidden !important;
    width: 0 !important;
    height: 0 !important;
    overflow: hidden !important;
    position: absolute !important;
    pointer-events: none !important;
  }

  /* --- Hide desktop search on mobile --- */
  .gg-header-search,
  #gg-site-header .gg-header-search {
    display: none !important;
  }

  /* --- Hamburger trigger — visible and styled --- */
  .gg-mobile-trigger,
  #gg-mobile-menu-trigger {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 42px !important;
    height: 42px !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 50% !important;
    background: rgba(27, 117, 187, 0.08) !important;
    color: var(--gg-navy, #1e3a5f) !important;
    cursor: pointer !important;
    position: relative !important;
    z-index: 4 !important;
    flex-shrink: 0 !important;
  }

  /* --- Hamburger SVG lines visible --- */
  .gg-mobile-trigger svg,
  #gg-mobile-menu-trigger svg {
    display: block !important;
    width: 20px !important;
    height: 20px !important;
    min-width: 20px !important;
    fill: none !important;
    stroke: var(--gg-navy, #1e3a5f) !important;
    stroke-width: 2 !important;
    stroke-linecap: round !important;
    stroke-linejoin: round !important;
    flex-shrink: 0 !important;
  }

  .gg-mobile-trigger svg path,
  #gg-mobile-menu-trigger svg path {
    stroke: var(--gg-navy, #1e3a5f) !important;
    stroke-width: 2 !important;
    fill: none !important;
  }

  /* --- Logo branding — constrained for mobile --- */
  .gg-header-branding {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    justify-self: center !important;
    width: auto !important;
    max-width: none !important;
    position: static !important;
    z-index: 2 !important;
  }

  .gg-header-branding img {
    height: 36px !important;
    max-width: 100px !important;
    width: auto !important;
    display: block !important;
  }

  .gg-header-branding .custom-logo-link,
  .gg-header-branding .site-logo-link,
  .gg-header-branding .site-logo-anchor {
    display: flex !important;
    align-items: center !important;
  }

  /* --- Header tools: right side — search trigger + cart only --- */
  .gg-header-tools {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
    gap: 6px !important;
    /* Reset the grid that Patch v13 forces */
    grid-template-columns: none !important;
    width: auto !important;
  }

  /* Hide account slot on mobile */
  .gg-header-account-slot {
    display: none !important;
  }

  /* --- Mobile search trigger --- */
  #gg-mobile-search-trigger {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 38px !important;
    height: 38px !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 50% !important;
    background: rgba(27, 117, 187, 0.08) !important;
    color: var(--gg-navy, #1e3a5f) !important;
    cursor: pointer !important;
  }

  #gg-mobile-search-trigger svg {
    display: block !important;
    width: 18px !important;
    height: 18px !important;
    min-width: 18px !important;
    fill: none !important;
    stroke: var(--gg-navy, #1e3a5f) !important;
    stroke-width: 2 !important;
    stroke-linecap: round !important;
    stroke-linejoin: round !important;
  }

  #gg-mobile-search-trigger svg circle,
  #gg-mobile-search-trigger svg path {
    stroke: var(--gg-navy, #1e3a5f) !important;
    fill: none !important;
  }

  /* --- Cart pill — compact for mobile --- */
  .gg-cart-pill {
    min-height: 38px !important;
    padding: 0 10px !important;
    min-width: 48px !important;
    gap: 4px !important;
  }

  .gg-cart-pill__icon {
    display: none !important;
  }

  /* --- Header shell padding --- */
  .gg-header-shell {
    padding: 0 12px !important;
  }

  /* --- Mobile search panel (overlay) --- */
  #gg-mobile-search-panel {
    position: absolute !important;
    inset: 0 12px !important;
    display: flex !important;
    align-items: center !important;
    background: #fff !important;
    z-index: 5 !important;
  }

  #gg-mobile-search-panel[hidden] {
    display: none !important;
  }

  /* When mobile search is open, hide the header row behind it */
  .gg-mobile-search-open .gg-header-row {
    opacity: 0 !important;
    pointer-events: none !important;
  }

  .gg-mobile-search-open #gg-mobile-search-panel {
    opacity: 1 !important;
    pointer-events: auto !important;
  }
}

/* ─────────────────────────────────────────────────────────────────────────────
   3. SMALL MOBILE (≤ 480px) — tighter spacing
   ───────────────────────────────────────────────────────────────────────────── */
@media (max-width: 480px) {
  .gg-header-row {
    grid-template-columns: 42px minmax(0, 1fr) auto !important;
    gap: 4px !important;
  }

  .gg-header-branding img {
    height: 30px !important;
    max-width: 80px !important;
  }

  .gg-header-shell {
    padding: 0 10px !important;
  }
}

/* ─────────────────────────────────────────────────────────────────────────────
   4. MOBILE NAV DRAWER — styles for the slide-in menu
   ───────────────────────────────────────────────────────────────────────────── */
@media (max-width: 1024px) {
  /* The drawer container */
  #gg-mobile-nav {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    bottom: 0 !important;
    width: 300px !important;
    max-width: 85vw !important;
    background: #fff !important;
    z-index: 10001 !important;
    box-shadow: 4px 0 24px rgba(0, 0, 0, 0.15) !important;
    transform: translateX(-100%) !important;
    transition: transform 0.3s ease !important;
    overflow: hidden !important;
  }

  #gg-mobile-nav[hidden] {
    display: block !important;
    transform: translateX(-100%) !important;
    visibility: hidden !important;
    pointer-events: none !important;
  }

  /* Open state via JS (body class or attribute toggle) */
  body.gg-mobile-nav-open #gg-mobile-nav,
  #gg-mobile-nav:not([hidden]) {
    transform: translateX(0) !important;
    visibility: visible !important;
    pointer-events: auto !important;
  }

  /* Scrollable content inside drawer */
  .gg-mobile-nav__scroll {
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
    height: 100% !important;
    padding: 16px 0 !important;
  }

  /* Menu list — clean, no bullets */
  .gg-mobile-nav__menu .menu,
  .gg-mobile-nav__menu ul,
  #gg-mobile-nav .menu,
  #gg-mobile-nav ul {
    list-style: none !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  /* Menu items */
  .gg-mobile-nav__menu .menu > li > a,
  #gg-mobile-nav .menu > li > a {
    display: flex !important;
    align-items: center !important;
    padding: 14px 24px !important;
    font-size: 15px !important;
    font-weight: 600 !important;
    color: var(--gg-navy, #1e3a5f) !important;
    text-decoration: none !important;
    border-bottom: 1px solid rgba(0, 0, 0, 0.06) !important;
  }

  .gg-mobile-nav__menu .menu > li > a:hover,
  #gg-mobile-nav .menu > li > a:hover {
    background: rgba(27, 117, 187, 0.06) !important;
    color: var(--gg-blue, #1b75bb) !important;
  }

  /* Mobile account strip */
  .gg-mob-account {
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
    padding: 16px 24px !important;
    text-decoration: none !important;
    border-bottom: 1px solid rgba(0, 0, 0, 0.08) !important;
    margin-bottom: 8px !important;
  }

  .gg-mob-account__avatar {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 40px !important;
    height: 40px !important;
    border-radius: 50% !important;
    background: rgba(27, 117, 187, 0.1) !important;
    flex-shrink: 0 !important;
  }

  .gg-mob-account__avatar svg {
    width: 20px !important;
    height: 20px !important;
    fill: none !important;
    stroke: var(--gg-navy, #1e3a5f) !important;
    stroke-width: 2 !important;
    stroke-linecap: round !important;
  }

  .gg-mob-account__text {
    display: flex !important;
    flex-direction: column !important;
    gap: 2px !important;
    min-width: 0 !important;
  }

  .gg-mob-account__name {
    font-size: 14px !important;
    font-weight: 700 !important;
    color: var(--gg-navy, #1e3a5f) !important;
  }

  .gg-mob-account__sub {
    font-size: 12px !important;
    color: #64748b !important;
  }

  .gg-mob-account__arrow {
    margin-left: auto !important;
    font-size: 18px !important;
    color: #94a3b8 !important;
  }

  /* Extra links at bottom of drawer */
  .gg-mobile-nav__extras {
    padding: 16px 24px !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 8px !important;
  }

  .gg-mobile-nav__extras a {
    font-size: 13px !important;
    color: var(--gg-text-muted, #64748b) !important;
    text-decoration: none !important;
    padding: 6px 0 !important;
  }

  .gg-mobile-nav__cta {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 10px 16px !important;
    background: var(--gg-orange, #ff6b35) !important;
    color: #fff !important;
    border-radius: 8px !important;
    font-weight: 700 !important;
    text-align: center !important;
  }
}

/* ─────────────────────────────────────────────────────────────────────────────
   5. MOBILE BODY PADDING — ensure content is below the fixed header
   ───────────────────────────────────────────────────────────────────────────── */
@media (max-width: 1024px) {
  body {
    padding-bottom: 0 !important; /* no Storefront handheld bar, so no padding needed */
  }

  /* Remove any bottom padding the Storefront parent theme adds for its handheld bar */
  .site-content {
    padding-bottom: 0 !important;
  }
}

/* ─────────────────────────────────────────────────────────────────────────────
   6. MOBILE PRODUCT CARDS / SHOP GRID
   ───────────────────────────────────────────────────────────────────────────── */
@media (max-width: 767px) {
  /* 2-column product grid on small mobile */
  ul.products {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 12px !important;
  }

  ul.products li.product {
    width: 100% !important;
    margin: 0 !important;
    float: none !important;
  }

  /* Product card text sizing */
  ul.products li.product .woocommerce-loop-product__title,
  ul.products li.product h2 {
    font-size: 13px !important;
    line-height: 1.3 !important;
  }

  ul.products li.product .price {
    font-size: 14px !important;
  }

  /* Add-to-cart button compact */
  ul.products li.product .button,
  ul.products li.product a.add_to_cart_button {
    font-size: 12px !important;
    padding: 8px 10px !important;
  }
}

@media (max-width: 480px) {
  ul.products {
    gap: 8px !important;
  }
}

/* ─────────────────────────────────────────────────────────────────────────────
   7. MOBILE SINGLE PRODUCT PAGE
   ───────────────────────────────────────────────────────────────────────────── */
@media (max-width: 767px) {
  /* Stack image and summary vertically */
  .single-product div.product {
    display: flex !important;
    flex-direction: column !important;
  }

  .single-product div.product .woocommerce-product-gallery,
  .single-product div.product .summary {
    width: 100% !important;
    float: none !important;
    margin-left: 0 !important;
  }

  .single-product div.product .summary {
    padding: 0 !important;
    margin-top: 16px !important;
  }

  /* Product title sizing */
  .single-product div.product .product_title {
    font-size: 22px !important;
    line-height: 1.3 !important;
  }

  /* Price */
  .single-product div.product .price {
    font-size: 20px !important;
  }

  /* Breadcrumb on mobile */
  .woocommerce-breadcrumb {
    font-size: 12px !important;
    padding: 10px 0 !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
  }

  /* Payment icons on mobile */
  .gg-payment-icons {
    flex-wrap: wrap !important;
    gap: 4px !important;
  }

  .gg-payment-icons__badge {
    font-size: 10px !important;
    height: 26px !important;
    padding: 0 6px !important;
  }
}

/* ─────────────────────────────────────────────────────────────────────────────
   8. MOBILE CART PAGE
   ───────────────────────────────────────────────────────────────────────────── */
@media (max-width: 767px) {
  /* Cart table: make it scrollable */
  .woocommerce-cart table.shop_table {
    display: block !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
  }

  /* Cart totals full width */
  .cart-collaterals,
  .cart_totals {
    width: 100% !important;
    float: none !important;
  }

  /* Checkout button */
  .wc-proceed-to-checkout a.checkout-button {
    width: 100% !important;
    text-align: center !important;
    display: block !important;
  }
}

/* ─────────────────────────────────────────────────────────────────────────────
   9. MOBILE CONTENT PAGES (Blog, About, Contact)
   ───────────────────────────────────────────────────────────────────────────── */
@media (max-width: 767px) {
  /* Blog grid — single column on small screens */
  body.blog:not(.single-post) #main {
    grid-template-columns: 1fr !important;
    gap: 16px !important;
  }

  /* Entry content — prevent overflow */
  .entry-content,
  .page .entry-content {
    overflow-wrap: break-word !important;
    word-wrap: break-word !important;
  }

  .entry-content img,
  .page .entry-content img {
    max-width: 100% !important;
    height: auto !important;
  }

  /* Contact form fields full width */
  .gg-ct-form input,
  .gg-ct-form textarea,
  .gg-ct-form select,
  .wpcf7 input,
  .wpcf7 textarea {
    width: 100% !important;
    max-width: 100% !important;
  }
}

/* ─────────────────────────────────────────────────────────────────────────────
   10. MINI-CART DRAWER — mobile adjustments
   ───────────────────────────────────────────────────────────────────────────── */
@media (max-width: 767px) {
  .gg-mini-cart__body {
    width: 100vw !important;
    max-width: 100vw !important;
    right: 0 !important;
  }
}

/* ─────────────────────────────────────────────────────────────────────────────
   11. DISCOUNT / PROMO BAR — mobile compact
   ───────────────────────────────────────────────────────────────────────────── */
@media (max-width: 767px) {
  .gg-discount-bar {
    font-size: 12px !important;
    padding: 8px 12px !important;
  }

  .gg-discount-bar__icon svg {
    width: 16px !important;
    height: 16px !important;
  }
}

/* ─────────────────────────────────────────────────────────────────────────────
   12. STICKY ADD-TO-CART BAR — mobile
   ───────────────────────────────────────────────────────────────────────────── */
@media (max-width: 767px) {
  .gg-sticky-atc {
    padding: 8px 12px !important;
  }

  .gg-sticky-atc__info {
    gap: 8px !important;
  }

  .gg-sticky-atc__thumb {
    width: 36px !important;
    height: 36px !important;
  }

  .gg-sticky-atc__title {
    font-size: 12px !important;
    max-width: 120px !important;
  }

  .gg-sticky-atc__price {
    font-size: 13px !important;
  }

  .gg-sticky-atc__btn {
    font-size: 12px !important;
    padding: 8px 14px !important;
  }
}

/* =============================================================================
   GG PATCH v73 — Mobile nav drawer: text visibility + close button
   ============================================================================= */

/* ── Close button at top of drawer ────────────────────────────────────────── */
@media (max-width: 1024px) {
  #gg-mobile-nav-close {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
    width: 100% !important;
    padding: 12px 16px 4px !important;
    background: transparent !important;
    border: none !important;
    cursor: pointer !important;
    box-sizing: border-box !important;
  }

  #gg-mobile-nav-close .gg-nav-close__inner {
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    color: #475569 !important;
    letter-spacing: 0.01em !important;
  }

  #gg-mobile-nav-close svg {
    display: block !important;
    width: 18px !important;
    height: 18px !important;
    fill: none !important;
    stroke: #475569 !important;
    stroke-width: 2.5 !important;
    stroke-linecap: round !important;
    flex-shrink: 0 !important;
  }

  #gg-mobile-nav-close:hover .gg-nav-close__inner,
  #gg-mobile-nav-close:hover svg {
    color: #1e3a5f !important;
    stroke: #1e3a5f !important;
  }
}

/* ── Main nav menu items — stronger contrast ──────────────────────────────── */
@media (max-width: 1024px) {
  .gg-mobile-nav__menu .menu > li > a,
  #gg-mobile-nav .menu > li > a {
    color: #1e3a5f !important;        /* explicit navy, no CSS var dependency */
    font-weight: 700 !important;
    font-size: 15px !important;
    letter-spacing: 0.01em !important;
  }

  .gg-mobile-nav__menu .menu > li > a:hover,
  #gg-mobile-nav .menu > li > a:hover {
    color: #1b75bb !important;
    background: rgba(27, 117, 187, 0.07) !important;
  }

  /* Sub-menu items */
  .gg-mobile-nav__menu .menu .sub-menu a,
  #gg-mobile-nav .menu .sub-menu a {
    color: #334155 !important;
    font-weight: 500 !important;
    font-size: 14px !important;
    padding-left: 40px !important;
  }
}

/* ── Account strip — readable text on white ──────────────────────────────── */
@media (max-width: 1024px) {
  .gg-mob-account {
    background: #f1f5f9 !important;   /* light blue-grey tint instead of plain white */
    border-radius: 0 !important;
    border-bottom: 1px solid #e2e8f0 !important;
  }

  .gg-mob-account__name {
    color: #1e3a5f !important;
    font-weight: 700 !important;
    font-size: 14px !important;
  }

  .gg-mob-account__sub {
    color: #475569 !important;        /* was #64748b — one step darker */
    font-size: 12px !important;
  }

  .gg-mob-account__arrow {
    color: #64748b !important;
    font-size: 20px !important;
  }

  .gg-mob-account__avatar svg {
    stroke: #1e3a5f !important;
  }
}

/* ── Extra footer links — visible, not muted ──────────────────────────────── */
@media (max-width: 1024px) {
  .gg-mobile-nav__extras {
    border-top: 1px solid #e2e8f0 !important;
    padding: 16px 24px 24px !important;
  }

  .gg-mobile-nav__extras a:not(.gg-mobile-nav__cta) {
    color: #334155 !important;        /* was #64748b — much more visible */
    font-size: 14px !important;
    font-weight: 500 !important;
    padding: 8px 0 !important;
    display: block !important;
  }

  .gg-mobile-nav__extras a:not(.gg-mobile-nav__cta):hover {
    color: #1b75bb !important;
  }

  .gg-mobile-nav__cta {
    margin-top: 12px !important;
    font-size: 14px !important;
    padding: 12px 20px !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }
}

/* --- end of GG PATCH v72 — Mobile Layout Fix --- */

/* =====================================================
   GG PATCH v77 — Mobile Fixes
   1. Single-column product grid at ≤420px
   2. Add to Cart button no-wrap
   3. Smaller age bubbles on tiny phones
   4. Blog #primary full-width on mobile
   ===================================================== */

/* 1. Single column product grid at ≤420px */
@media (max-width: 420px) {
  ul.products,
  .woocommerce ul.products,
  .woocommerce-page ul.products {
    grid-template-columns: 1fr !important;
  }
}

/* 2. Add to Cart / product buttons — no wrapping */
ul.products li.product .button,
ul.products li.product a.button,
.woocommerce ul.products li.product .button,
.woocommerce ul.products li.product a.button,
.woocommerce ul.products li.product .add_to_cart_button {
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

/* 3. Age bubbles — smaller on very small phones */
@media (max-width: 420px) {
  .gg-age-grid {
    gap: 10px !important;
  }
  .gg-age-bubble,
  .gg-age-bubble__circle {
    width: 88px !important;
    height: 88px !important;
    min-width: 88px !important;
    min-height: 88px !important;
  }
  .gg-age-bubble__icon {
    font-size: 32px !important;
  }
  .gg-age-bubble__badge {
    font-size: 9px !important;
    padding: 3px 8px !important;
    margin-top: -10px !important;
  }
}

/* 4. Blog / archive — #primary full-width on mobile */
@media (max-width: 767px) {
  body.blog #primary,
  body.archive #primary {
    width: 100% !important;
    max-width: 100% !important;
    float: none !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
  body.blog:not(.single-post) #main,
  body.archive #main {
    padding-left: 16px !important;
    padding-right: 16px !important;
  }
}

/* 5. Cart pill icon — force visible on mobile (overrides display:none at ≤1024px) */
@media (max-width: 1024px) {
  .gg-cart-pill__icon {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 20px !important;
    height: 20px !important;
    flex-shrink: 0 !important;
  }
  .gg-cart-pill__icon svg {
    display: block !important;
    width: 20px !important;
    height: 20px !important;
    fill: none !important;
    stroke: currentColor !important;
    stroke-width: 2 !important;
  }
}

/* 6. Age filter bar — always above products, never a side column */
.gg-age-filter-bar {
  position: static !important;
  float: none !important;
  left: auto !important;
  top: auto !important;
  transform: none !important;
  width: 100% !important;
  max-width: 100% !important;
  display: block !important;
}

/* 7. Age section + bubble grid — full-width on mobile (fixes 72px Elementor column bug) */
@media (max-width: 767px) {
  .gg-age-section {
    width: 100% !important;
    min-width: 100% !important;
    padding-top: 36px !important;
    padding-bottom: 40px !important;
    padding-left: 16px !important;
    padding-right: 16px !important;
    box-sizing: border-box !important;
  }
  .gg-age-bubbles {
    width: 100% !important;
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: wrap !important;
    justify-content: center !important;
    gap: 12px !important;
  }
  .gg-age-bubble {
    flex-shrink: 0 !important;
  }
}

/* --- end of GG PATCH v77 — Mobile Fixes --- */