/*
Theme Name: Bootscore Child
Theme URI: https://bootscore.me/
Author: Bootscore
Author URI: https://bootscore.me
Description: Bootscore Child Theme
Template: bootscore
Version: 1.0.0
License: MIT License
License URI: https://github.com/bootscore/bootscore/blob/main/LICENSE
Text Domain: bootscore-child
*/

/*--------------------------------------------------------------
>>> TABLE OF CONTENTS:
----------------------------------------------------------------
1.0 Normalize
2.0 Typography
3.0 Elements
4.0 Forms
5.0 Navigation
6.0 Accessibility
7.0 Alignments
8.0 Clearings
9.0 Widgets
10.0 Content
11.0 Infinite scroll
12.0 Comments
13.0 Print
--------------------------------------------------------------*/

/* Add your custom CSS here */

html {
  scroll-behavior: smooth;
}

#courses,
#blog,
#podcasts,
#books,
#store,
#approach,
#sketches,
#youtube,
#instagram,
#testimonials,
#substack-blog {
  scroll-margin-top: 100px;
}

@media (max-width: 991.98px) {
  #courses,
  #blog,
  #podcasts,
  #books,
  #store,
  #approach,
  #sketches,
  #youtube,
  #instagram,
  #testimonials,
  #substack-blog {
    scroll-margin-top: 80px;
  }
}


/* Animations from CloudGirl Custom Hero */
@keyframes float {

  0%,
  100% {
    transform: translateY(0px);
  }

  50% {
    transform: translateY(-12px);
  }
}

@keyframes float2 {

  0%,
  100% {
    transform: translateY(0px) rotate(-6deg);
  }

  50% {
    transform: translateY(-8px) rotate(-6deg);
  }
}

@keyframes pulse {

  0%,
  100% {
    transform: scale(1) rotate(0deg);
  }

  50% {
    transform: scale(1.18) rotate(10deg);
  }
}

@keyframes wiggle {

  0%,
  100% {
    transform: rotate(-5deg);
  }

  50% {
    transform: rotate(5deg);
  }
}

@keyframes logoScroll {
  0% {
    transform: translateX(0);
  }

  100% {
    transform: translateX(-50%);
  }
}

@keyframes ctaPulse {

  0%,
  100% {
    transform: scale(1);
    box-shadow: 0 0 0 0 rgba(33, 122, 255, 0.5);
  }

  50% {
    transform: scale(1.04);
    box-shadow: 0 0 0 8px rgba(33, 122, 255, 0);
  }
}

.cta-btn:hover {
  filter: brightness(1.15);
  animation-play-state: paused;
  transform: scale(1.06);
}

/* Custom CloudGirl Pill Nav (WordPress Menu overrides) */
.cloudgirl-pill-nav-container {
  display: flex;
  align-items: center;
  gap: 4px;
  background: rgba(255, 255, 255, 0.06);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-radius: 999px;
  padding: 6px 12px;
  border: 1.5px solid rgba(255, 255, 255, 0.45);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3), inset 0 0 12px rgba(255, 255, 255, 0.08), 0 0 15px rgba(255, 255, 255, 0.12);
  flex-shrink: 0;
  white-space: nowrap;
  max-width: 100%;
  transition: all 0.3s ease;
}

.cloudgirl-pill-nav-container:hover {
  border-color: rgba(255, 255, 255, 0.7);
  box-shadow: 0 6px 24px rgba(0, 0, 0, 0.35), inset 0 0 16px rgba(255, 255, 255, 0.12), 0 0 20px rgba(255, 255, 255, 0.2);
}

.cloudgirl-pill-nav {
  display: flex;
  align-items: center;
  gap: 4px;
  list-style: none;
  margin: 0;
  padding: 0;
  flex-wrap: nowrap;
}

.cloudgirl-pill-nav li {
  margin: 0;
  padding: 0;
  flex-shrink: 0;
  position: relative;
}

.cloudgirl-pill-nav li a {
  font-family: 'Gochi Hand', cursive;
  font-size: 13px;
  font-weight: 700;
  color: #ffffff;
  text-decoration: none;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  padding: 8px 16px;
  border-radius: 999px;
  display: inline-block;
  white-space: nowrap;
  transition: all 0.2s ease;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.6);
}

.cloudgirl-pill-nav li a:hover,
.cloudgirl-pill-nav li.current-menu-item a,
.cloudgirl-pill-nav li.current-page-ancestor a {
  color: #000000 !important;
  background: #FFDF00 !important;
  text-shadow: none;
  box-shadow: 0 0 12px rgba(255, 223, 0, 0.5);
}

/* Specific overrides for inner pages (#masthead cream background) */
#masthead .cloudgirl-pill-nav-container {
  background: rgba(0, 0, 0, 0.03);
  border: 1.5px solid rgba(0, 0, 0, 0.18);
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.04);
}

#masthead .cloudgirl-pill-nav li a {
  color: #0d1117;
  text-shadow: none;
}

#masthead .cloudgirl-pill-nav li a:hover,
#masthead .cloudgirl-pill-nav li.current-menu-item a,
#masthead .cloudgirl-pill-nav li.current-page-ancestor a {
  color: #000000 !important;
  background: #FFDF00 !important;
}

/* Sub-menu support for pill nav */
.cloudgirl-pill-nav .sub-menu {
  position: absolute;
  top: 100%;
  left: 0;
  margin-top: 8px;
  background: #ffffff;
  border: 1px solid rgba(0, 0, 0, 0.1);
  border-radius: 16px;
  padding: 8px;
  list-style: none;
  min-width: 180px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
  display: none;
  z-index: 1000;
}

.cloudgirl-pill-nav li:hover>.sub-menu {
  display: block;
}

.cloudgirl-pill-nav .sub-menu li a {
  color: #111111;
  display: block;
  padding: 8px 14px;
  border-radius: 8px;
  width: 100%;
  box-sizing: border-box;
}

.cloudgirl-pill-nav .sub-menu li a:hover {
  background: #FFDF00 !important;
  color: #000000 !important;
}

@media (max-width: 991px) {
  .cloudgirl-pill-nav-container {
    overflow-x: auto;
    scrollbar-width: none;
  }

  .cloudgirl-pill-nav-container::-webkit-scrollbar {
    display: none;
  }
}

/* Offer Card Hover Styles */
.offer-card {
  transition: transform 0.25s ease, box-shadow 0.25s ease;
  cursor: pointer;
}

.offer-card-1:hover {
  transform: translateY(-6px);
  box-shadow: 0 20px 48px rgba(79, 184, 191, 0.35);
}

.offer-card-2:hover,
.offer-card-4:hover {
  transform: translateY(-6px);
  box-shadow: 0 20px 48px rgba(250, 217, 130, 0.35);
}

.offer-card-3:hover {
  transform: translateY(-6px);
  box-shadow: 0 20px 48px rgba(75, 187, 193, 0.35);
}


/* Instagram Section Styles */
.ig-cell {
  position: relative;
  overflow: hidden;
  border-radius: 16px;
  cursor: pointer;
  background: #0d2e30;
}

.ig-cell .ig-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(253, 84, 73, 0.88) 0%, rgba(214, 36, 159, 0.88) 50%, rgba(40, 90, 235, 0.88) 100%);
  opacity: 0;
  transition: opacity 0.32s ease;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 20px;
}

.ig-cell:hover .ig-overlay {
  opacity: 1;
}

.ig-cell:hover {
  box-shadow: 0 24px 56px rgba(214, 36, 159, 0.38);
}

/* ==========================================================================
   WOOCOMMERCE CUSTOM DESIGN SYSTEM & WORKFLOW STYLES
   ========================================================================== */

/* 1. Header Cart Launcher Icon & Badge */
.cloudgirl-cart-trigger {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  background: #ffffff;
  border: 1px solid rgba(0, 0, 0, 0.14);
  border-radius: 50%;
  color: #0d1117;
  text-decoration: none !important;
  transition: all 0.2s ease;
  cursor: pointer;
}

.cloudgirl-cart-trigger:hover {
  background: #FFDF00;
  transform: translateY(-2px);
}

.cloudgirl-cart-count {
  position: absolute;
  top: -4px;
  right: -4px;
  background: #FF5E7D;
  color: #ffffff;
  font-family: 'Paytone One', sans-serif;
  font-size: 10px;
  line-height: 1;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* 2. Offcanvas Cart Drawer (Image 1 Reference) */
#offcanvas-cart.offcanvas {
  width: 420px;
  max-width: 90vw;
  background: #ffffff;
  border-left: 1px solid #e5e7eb;
  box-shadow: -10px 0 40px rgba(0, 0, 0, 0.15);
}

#offcanvas-cart .offcanvas-header {
  padding: 24px 28px 20px;
  border-bottom: 1px solid #f3f4f6;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

#offcanvas-cart .offcanvas-title {
  font-family: 'Paytone One', sans-serif;
  font-size: 24px;
  color: #111827;
  margin: 0;
}

#offcanvas-cart .btn-close {
  opacity: 0.6;
  transition: opacity 0.2s ease;
}

#offcanvas-cart .btn-close:hover {
  opacity: 1;
}

.cg-cart-drawer-items {
  padding: 20px 28px;
  overflow-y: auto;
  flex: 1;
}

.cg-cart-drawer-item {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 16px 0;
  border-bottom: 1px solid #f3f4f6;
  position: relative;
}

.cg-cart-drawer-item:last-child {
  border-bottom: none;
}

.cg-cart-drawer-thumb {
  width: 72px;
  height: 72px;
  border-radius: 12px;
  object-fit: cover;
  border: 1px solid #e5e7eb;
  flex-shrink: 0;
}

.cg-cart-drawer-details {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.cg-cart-drawer-title {
  font-family: 'Paytone One', sans-serif;
  font-size: 15px;
  color: #111827;
  text-decoration: none;
  line-height: 1.3;
}

.cg-cart-drawer-title:hover {
  color: #2563eb;
}

.cg-cart-drawer-price-line {
  font-family: 'Gochi Hand', cursive;
  font-size: 14px;
  color: #6b7280;
}

.cg-cart-drawer-unit-price {
  font-family: 'Paytone One', sans-serif;
  font-size: 15px;
  color: #111827;
  margin-left: auto;
}

.cg-qty-stepper {
  display: inline-flex;
  align-items: center;
  background: #f9fafb;
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  overflow: hidden;
  margin-top: 6px;
  width: fit-content;
}

.cg-qty-stepper button {
  background: transparent;
  border: none;
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  font-weight: 600;
  color: #374151;
  cursor: pointer;
  transition: background 0.15s ease;
}

.cg-qty-stepper button:hover {
  background: #e5e7eb;
}

.cg-qty-stepper input.qty {
  width: 40px;
  height: 32px;
  text-align: center;
  border: none;
  border-left: 1px solid #e5e7eb;
  border-right: 1px solid #e5e7eb;
  background: #fff;
  font-family: 'Paytone One', sans-serif;
  font-size: 14px;
  color: #111827;
  padding: 0;
  -moz-appearance: textfield;
}

.cg-qty-stepper input.qty::-webkit-outer-spin-button,
.cg-qty-stepper input.qty::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

.cg-cart-remove-btn {
  background: transparent;
  border: none;
  color: #ef4444;
  cursor: pointer;
  padding: 6px;
  border-radius: 6px;
  transition: all 0.15s ease;
  margin-left: auto;
}

.cg-cart-remove-btn:hover {
  background: #fee2e2;
  color: #dc2626;
}

.cg-cart-drawer-footer {
  padding: 24px 28px 28px;
  background: #f9fafb;
  border-top: 1px solid #f3f4f6;
  margin-top: auto;
}

.cg-cart-drawer-subtotal {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 18px;
}

.cg-cart-drawer-subtotal-label {
  font-family: 'Paytone One', sans-serif;
  font-size: 18px;
  color: #111827;
}

.cg-cart-drawer-subtotal-amount {
  font-family: 'Paytone One', sans-serif;
  font-size: 22px;
  color: #111827;
}

.cg-btn-checkout {
  display: block;
  width: 100%;
  text-align: center;
  background: #2563eb;
  color: #ffffff !important;
  font-family: 'Paytone One', sans-serif;
  font-size: 16px;
  padding: 14px 24px;
  border-radius: 12px;
  text-decoration: none !important;
  transition: all 0.2s ease;
  box-shadow: 0 4px 14px rgba(37, 99, 235, 0.35);
  border: none;
  cursor: pointer;
}

.cg-btn-checkout:hover {
  background: #1d4ed8;
  transform: translateY(-1px);
  box-shadow: 0 6px 20px rgba(37, 99, 235, 0.45);
}

/* 3. Checkout Page Redesign (Matching Checkout Standalone.html) */

/* Force entire page background & wrappers to warm cream (#FBF3E0) seamlessly */
body.woocommerce-checkout,
body.woocommerce-checkout #page,
body.woocommerce-checkout #content,
body.woocommerce-checkout #primary,
body.woocommerce-checkout .site-content,
body.woocommerce-checkout main,
body.woocommerce-checkout article,
body.woocommerce-checkout .entry-content,
body.woocommerce-checkout .post-inner,
body.post-type-archive-product,
body.post-type-archive-product #page,
body.post-type-archive-product #content,
body.post-type-archive-product #primary,
body.woocommerce-shop,
body.woocommerce-shop #page,
body.woocommerce-shop #content,
body.tax-product_cat,
body.tax-product_cat #page,
body.tax-product_cat #content {
  background-color: #FBF3E0 !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
  padding-top: 0 !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  max-width: 100% !important;
  width: 100% !important;
  border: none !important;
  box-shadow: none !important;
}

/* Hide default theme entry header & duplicate Checkout title */
body.woocommerce-checkout .entry-header,
body.woocommerce-checkout h1.entry-title,
body.woocommerce-checkout .page-header {
  display: none !important;
}

/* Hide default blue coupon toggle banner (since promo code is in Order Summary) */
body.woocommerce-checkout .woocommerce-form-coupon-toggle,
body.woocommerce-checkout .woocommerce-checkout>.woocommerce-info {
  display: none !important;
}

/* Style any required WooCommerce notices (errors/messages) seamlessly */
body.woocommerce-checkout .woocommerce-NoticeGroup,
body.woocommerce-checkout .woocommerce-message,
body.woocommerce-checkout .woocommerce-error {
  max-width: 1320px !important;
  margin: 20px auto !important;
  padding: 16px 24px !important;
  border-radius: 16px !important;
  font-family: 'Gochi Hand', cursive !important;
  font-size: 16px !important;
  background: #ffffff !important;
  border: 1.5px solid rgba(0, 0, 0, 0.12) !important;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.05) !important;
}

body.woocommerce-checkout .woocommerce-error {
  border-color: #FF5E7D !important;
  color: #c02642 !important;
}

.cg-checkout-page-wrap {
  background: #FBF3E0;
  min-height: 100vh;
  padding-bottom: 88px;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  width: 100%;
}

.cg-checkout-inner-container {
  max-width: 1320px;
  margin: 0 auto;
  padding: 0 40px;
}

@media (max-width: 1200px) {
  .cg-checkout-inner-container {
    padding: 0 24px;
  }
}

/* Breadcrumbs */
.cg-checkout-breadcrumb-wrap {
  padding: 26px 0 0;
}

.cg-checkout-breadcrumb {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: 'Gochi Hand', cursive;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.5px;
}

.cg-checkout-breadcrumb a {
  color: rgba(0, 0, 0, 0.4);
  text-decoration: none;
}

.cg-checkout-breadcrumb a:hover {
  color: #0d1117;
}

.cg-breadcrumb-sep {
  color: rgba(0, 0, 0, 0.22);
}

.cg-breadcrumb-current {
  color: #0d1117;
}

/* Hero Section */
.cg-checkout-hero {
  padding: 22px 0 20px;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;
}

.cg-checkout-main-title {
  font-family: 'Paytone One', sans-serif;
  font-size: 56px;
  color: #0d1117;
  line-height: 1.0;
  letter-spacing: -1.5px;
  margin: 0;
}

.cg-checkout-subtitle {
  font-family: 'Gochi Hand', cursive;
  font-size: 18px;
  color: rgba(0, 0, 0, 0.55);
  margin: 12px 0 0;
}

.cg-checkout-ssl-badge {
  display: flex;
  align-items: center;
  gap: 8px;
  background: rgba(79, 184, 191, 0.14);
  border: 1px solid rgba(79, 184, 191, 0.4);
  padding: 10px 18px;
  border-radius: 999px;
  flex-shrink: 0;
}

.cg-checkout-ssl-badge span {
  font-family: 'Gochi Hand', cursive;
  font-size: 13px;
  font-weight: 700;
  color: #2f8288;
  letter-spacing: 0.5px;
}

/* Grid Layout */
.cg-checkout-grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: 48px;
  align-items: start;
  margin-top: 10px;
}

@media (max-width: 991px) {
  .cg-checkout-hero {
    flex-direction: column;
    align-items: flex-start;
  }

  .cg-checkout-main-title {
    font-size: 42px;
  }

  .cg-checkout-grid {
    grid-template-columns: 1fr;
    gap: 32px;
  }
}

/* Left Column - Cards */
.cg-checkout-left-col {
  display: flex;
  flex-direction: column;
  gap: 28px;
}

.cg-checkout-card {
  background: #ffffff;
  border-radius: 24px;
  padding: 34px 36px;
  box-shadow: 0 12px 44px rgba(0, 0, 0, 0.07);
  border: none;
}

.cg-checkout-card-header {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 26px;
}

.cg-step-badge {
  flex-shrink: 0;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: #FFDF00;
  color: #0d1117;
  font-family: 'Paytone One', sans-serif;
  font-size: 15px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.cg-checkout-card-title {
  font-family: 'Paytone One', sans-serif;
  font-size: 24px;
  color: #0d1117;
  letter-spacing: -0.5px;
  margin: 0;
}

.cg-card-icons {
  display: flex;
  gap: 6px;
}

.cg-card-tag {
  font-family: 'Paytone One', sans-serif;
  font-size: 11px;
  color: #fff;
  padding: 5px 9px;
  border-radius: 6px;
}

.cg-card-tag.visa {
  background: #1a1f71;
}

.cg-card-tag.mc {
  background: #eb001b;
}

.cg-card-tag.paypal {
  background: #003087;
}

/* Form inputs & WooCommerce Form Fields */
.cg-checkout-card-body label,
.woocommerce-checkout .form-row label {
  display: block;
  font-family: 'Gochi Hand', cursive;
  font-size: 14px;
  font-weight: 700;
  color: rgba(0, 0, 0, 0.6);
  letter-spacing: 0.5px;
  margin-bottom: 8px;
}

.cg-checkout-card-body input[type="text"],
.cg-checkout-card-body input[type="email"],
.cg-checkout-card-body input[type="tel"],
.cg-checkout-card-body select,
.cg-checkout-card-body textarea,
.woocommerce-checkout input[type="text"],
.woocommerce-checkout input[type="email"],
.woocommerce-checkout input[type="tel"],
.woocommerce-checkout select,
.woocommerce-checkout textarea {
  width: 100%;
  font-size: 17px;
  color: #0d1117;
  padding: 15px 18px;
  border: 1.5px solid rgba(0, 0, 0, 0.14);
  border-radius: 14px;
  background: #FBF3E0;
  outline: none;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.cg-checkout-card-body input:focus,
.cg-checkout-card-body select:focus,
.woocommerce-checkout input:focus,
.woocommerce-checkout select:focus {
  border-color: #4fb8bf !important;
  box-shadow: 0 0 0 3px rgba(79, 184, 191, 0.2) !important;
  background: #ffffff !important;
}

.cg-checkbox-label {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: 'Gochi Hand', cursive;
  font-size: 14px;
  color: rgba(0, 0, 0, 0.6);
  margin-top: 16px;
  cursor: pointer;
}

.cg-checkbox-label input[type="checkbox"] {
  width: 17px;
  height: 17px;
  accent-color: #FF5E7D;
}

/* WooCommerce Form Rows Override */
.woocommerce-checkout .form-row {
  margin-bottom: 18px;
  padding: 0;
}

.woocommerce-checkout .form-row-first,
.woocommerce-checkout .form-row-last {
  width: 48%;
  float: left;
}

.woocommerce-checkout .form-row-last {
  float: right;
}

.woocommerce-checkout .form-row-wide {
  clear: both;
  width: 100%;
}

@media (max-width: 600px) {

  .woocommerce-checkout .form-row-first,
  .woocommerce-checkout .form-row-last {
    width: 100%;
    float: none;
  }
}

/* Right Column - Order Summary Card */
.cg-checkout-right-col {
  position: sticky;
  top: 100px;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.cg-order-summary-card {
  position: relative;
  background: #ffffff;
  border-radius: 24px;
  overflow: hidden;
  box-shadow: 0 12px 44px rgba(0, 0, 0, 0.10);
  border: none;
}

.cg-summary-top-bar {
  height: 8px;
  background: linear-gradient(90deg, #4fb8bf, #FFDF00);
}

.cg-summary-star {
  position: absolute;
  top: 26px;
  right: 26px;
  z-index: 3;
  color: #FFDF00;
  font-size: 20px;
  animation: pulse 2.8s ease-in-out infinite;
}

.cg-summary-content {
  padding: 30px 32px;
}

.cg-order-summary-title {
  font-family: 'Paytone One', sans-serif;
  font-size: 22px;
  color: #0d1117;
  letter-spacing: -0.5px;
  margin: 0 0 24px;
}

/* Summary Items */
.cg-summary-item-row {
  display: flex;
  gap: 16px;
  align-items: center;
  padding-bottom: 22px;
  border-bottom: 1px dashed rgba(0, 0, 0, 0.15);
  margin-bottom: 16px;
}

.cg-summary-thumb-wrap {
  position: relative;
  flex-shrink: 0;
}

.cg-summary-item-img {
  width: 78px;
  height: 78px;
  object-fit: cover;
  border-radius: 14px;
  background: #eef6f6;
  border: 1px solid rgba(0, 0, 0, 0.08);
}

.cg-summary-qty-badge {
  position: absolute;
  top: -8px;
  right: -8px;
  background: #FF5E7D;
  color: #fff;
  font-family: 'Paytone One', sans-serif;
  font-size: 12px;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.cg-summary-item-details {
  flex: 1;
  min-width: 0;
}

.cg-summary-item-name {
  font-family: 'Paytone One', sans-serif;
  font-size: 17px;
  color: #0d1117;
  letter-spacing: -0.3px;
  margin: 0 0 4px;
}

.cg-summary-item-meta {
  font-family: 'Gochi Hand', cursive;
  font-size: 14px;
  color: rgba(0, 0, 0, 0.5);
  margin: 0;
}

.cg-summary-item-price {
  font-family: 'Paytone One', sans-serif;
  font-size: 18px;
  color: #0d1117;
  margin: 0;
  white-space: nowrap;
}

/* Promo / Coupon */
.cg-promo-code-wrap {
  margin: 22px 0;
}

.cg-promo-input-row {
  display: flex;
  gap: 10px;
}

.cg-promo-input {
  flex: 1;
  font-size: 15px;
  color: #0d1117;
  padding: 13px 16px;
  border: 1.5px solid rgba(0, 0, 0, 0.14);
  border-radius: 12px;
  background: #FBF3E0;
  outline: none;
}

.cg-promo-btn {
  flex-shrink: 0;
  background: #0d1117;
  color: #fff;
  font-family: 'Paytone One', sans-serif;
  font-size: 13px;
  border: none;
  border-radius: 12px;
  padding: 0 22px;
  cursor: pointer;
  letter-spacing: 0.5px;
  transition: background 0.2s ease;
}

.cg-promo-btn:hover {
  background: #217AFF;
}

/* Totals */
.cg-summary-totals {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding-top: 6px;
}

.cg-summary-row {
  display: flex;
  justify-content: space-between;
  font-family: 'Gochi Hand', cursive;
  font-size: 16px;
  color: rgba(0, 0, 0, 0.6);
}

.cg-summary-row.grand-total {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-top: 22px;
  padding-top: 22px;
  border-top: 2px solid #0d1117;
}

.cg-summary-total-label {
  font-family: 'Paytone One', sans-serif;
  font-size: 22px;
  color: #0d1117;
}

.cg-summary-total-val {
  font-family: 'Paytone One', sans-serif;
  font-size: 30px;
  color: #0d1117;
  letter-spacing: -1px;
}

/* WooCommerce Place Order Button & Legal Notice */
.woocommerce-checkout #place_order,
#place_order {
  width: 100%;
  margin-top: 26px;
  background: #FFDF00 !important;
  color: #0d1117 !important;
  font-family: 'Paytone One', sans-serif !important;
  font-size: 18px !important;
  border: none !important;
  border-radius: 14px !important;
  padding: 19px !important;
  cursor: pointer !important;
  letter-spacing: 0.3px !important;
  box-shadow: 0 6px 22px rgba(255, 223, 0, 0.45) !important;
  transition: filter 0.15s ease, transform 0.15s ease !important;
}

.woocommerce-checkout #place_order:hover,
#place_order:hover {
  filter: brightness(1.06);
  transform: translateY(-2px);
}

.cg-checkout-legal-notice {
  font-family: 'Gochi Hand', cursive;
  font-size: 12px;
  color: rgba(0, 0, 0, 0.4);
  text-align: center;
  line-height: 1.6;
  margin: 16px 0 0;
}

.cg-checkout-legal-notice a {
  color: #217AFF;
  text-decoration: none;
}

/* Trust Badges */
.cg-trust-badges {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 4px 8px;
}

.cg-trust-item {
  display: flex;
  align-items: center;
  gap: 12px;
}

.cg-trust-icon {
  flex-shrink: 0;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: rgba(79, 184, 191, 0.16);
  display: flex;
  align-items: center;
  justify-content: center;
}

.cg-trust-text {
  font-family: 'Gochi Hand', cursive;
  font-size: 14px;
  color: rgba(0, 0, 0, 0.6);
  font-weight: 700;
}

/* Hide WooCommerce Sidebar Widgets on Checkout/Cart/Single Product pages */
.woocommerce-checkout #secondary,
.woocommerce-cart #secondary,
.single-product #secondary,
.woocommerce-page #secondary {
  display: none !important;
}

.woocommerce-checkout #primary,
.woocommerce-cart #primary,
.single-product #primary,
.woocommerce-page #primary {
  width: 100% !important;
  max-width: 100% !important;
  flex: 0 0 100% !important;
}


/* 4. Shop Page Catalog Redesign (The Cloud Girl Theme) */
.cg-shop-hero-v2 {
  background: linear-gradient(135deg, #04191b 0%, #0d2e30 60%, #154245 100%);
  padding: 80px 0 64px;
  color: #ffffff;
  text-align: center;
  position: relative;
  overflow: hidden;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.cg-shop-sparkle-1 {
  position: absolute;
  top: 40px;
  left: 8%;
  color: #FFDF00;
  font-size: 28px;
  animation: pulse 2.6s ease-in-out infinite;
  pointer-events: none;
}

.cg-shop-sparkle-2 {
  position: absolute;
  bottom: 50px;
  right: 10%;
  color: #FF5E7D;
  font-size: 24px;
  animation: pulse 3.2s ease-in-out infinite;
  pointer-events: none;
}

.cg-shop-dot-grid {
  position: absolute;
  inset: 0;
  background-image: radial-gradient(circle, rgba(255, 255, 255, 0.12) 1.5px, transparent 1.5px);
  background-size: 24px 24px;
  pointer-events: none;
  opacity: 0.6;
}

.cg-shop-hero-badge {
  font-family: 'Gochi Hand', cursive;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 2.5px;
  text-transform: uppercase;
  color: #FFDF00;
  margin-bottom: 12px;
  display: inline-flex;
  align-items: center;
}

.cg-shop-hero-title {
  font-family: 'Paytone One', sans-serif;
  font-size: 54px;
  line-height: 1.05;
  color: #ffffff;
  margin-bottom: 16px;
  letter-spacing: -0.5px;
}

@media (max-width: 768px) {
  .cg-shop-hero-title {
    font-size: 36px;
  }
}

.cg-shop-hero-subtitle {
  font-family: 'Gochi Hand', cursive;
  font-size: 20px;
  color: rgba(255, 255, 255, 0.85);
  max-width: 680px;
  margin: 0 auto 32px;
  line-height: 1.5;
}

/* Feature badges strip */
.cg-shop-feature-strip {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 36px;
}

.cg-hero-feat-pill {
  font-family: 'Gochi Hand', cursive;
  font-size: 13px;
  font-weight: 700;
  color: rgba(255, 255, 255, 0.9);
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.18);
  padding: 6px 16px;
  border-radius: 999px;
  backdrop-filter: blur(4px);
}

/* Category Filter Pills v2 */
.cg-category-pills-v2 {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  flex-wrap: wrap;
}

.cg-cat-pill-v2 {
  font-family: 'Paytone One', sans-serif;
  font-size: 13px;
  padding: 10px 24px;
  border-radius: 999px;
  text-decoration: none !important;
  transition: all 0.25s ease;
  background: rgba(255, 255, 255, 0.12);
  color: rgba(255, 255, 255, 0.9);
  border: 1px solid rgba(255, 255, 255, 0.25);
  letter-spacing: 0.5px;
}

.cg-cat-pill-v2:hover {
  background: rgba(255, 255, 255, 0.25);
  color: #fff;
  transform: translateY(-2px);
}

.cg-cat-pill-v2.active {
  background: #FFDF00 !important;
  color: #04191b !important;
  border-color: #FFDF00 !important;
  box-shadow: 0 4px 18px rgba(255, 223, 0, 0.4);
}

/* Main Shop Grid & Container */
body.post-type-archive-product,
body.tax-product_cat,
body.tax-product_tag,
body.woocommerce-shop,
.cg-shop-main-section {
  background: #FBF3E0 !important;
  padding: 50px 0 90px;
  min-height: 80vh;
}

/* Catalog Toolbar */
.cg-shop-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  margin-bottom: 36px;
  padding-bottom: 20px;
  border-bottom: 1px solid #e5e7eb;
  flex-wrap: wrap;
}

.cg-shop-count {
  font-family: 'Gochi Hand', cursive;
  font-size: 17px;
  font-weight: 700;
  color: #4b5563;
}

.cg-shop-toolbar-actions {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
}

.cg-shop-search-form {
  position: relative;
  display: flex;
  align-items: center;
}

.cg-shop-search-input {
  background: #ffffff;
  border: 1px solid #d1d5db;
  border-radius: 999px;
  padding: 8px 40px 8px 18px;
  font-family: inherit;
  font-size: 13px;
  color: #111827;
  outline: none;
  width: 220px;
  transition: all 0.2s ease;
}

.cg-shop-search-input:focus {
  border-color: #217aff;
  box-shadow: 0 0 0 3px rgba(33, 122, 255, 0.15);
  width: 260px;
}

.cg-shop-search-btn {
  position: absolute;
  right: 12px;
  background: transparent;
  border: none;
  color: #6b7280;
  cursor: pointer;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.cg-shop-search-btn:hover {
  color: #111827;
}

.cg-shop-ordering-wrap select.orderby {
  background: #ffffff;
  border: 1px solid #d1d5db;
  border-radius: 999px;
  padding: 8px 36px 8px 18px;
  font-family: 'Paytone One', sans-serif;
  font-size: 12px;
  color: #374151;
  outline: none;
  cursor: pointer;
  appearance: none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23374151' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'></polyline></svg>");
  background-repeat: no-repeat;
  background-position: right 14px center;
  transition: border-color 0.2s ease;
}

.cg-shop-ordering-wrap select.orderby:focus {
  border-color: #217aff;
}

/* Product Cards Grid v2 */
.cg-product-grid-v2 {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 32px;
}

@media (max-width: 576px) {
  .cg-product-grid-v2 {
    grid-template-columns: 1fr;
  }
}

.cg-product-card-v2 {
  background: #ffffff;
  border-radius: 24px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  box-shadow: 0 6px 28px rgba(0, 0, 0, 0.06);
  border: 1px solid rgba(0, 0, 0, 0.06);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  position: relative;
}

.cg-product-card-v2:hover {
  transform: translateY(-8px);
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.12);
}

.cg-card-top-strip {
  height: 6px;
  width: 100%;
}

.cg-card-badge-sale {
  position: absolute;
  top: 18px;
  left: 18px;
  z-index: 3;
  background: #FF5E7D;
  color: #ffffff;
  font-family: 'Paytone One', sans-serif;
  font-size: 10px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  padding: 5px 12px;
  border-radius: 999px;
  box-shadow: 0 4px 12px rgba(255, 94, 125, 0.4);
}

.cg-card-badge-featured {
  position: absolute;
  top: 18px;
  right: 18px;
  z-index: 3;
  background: #FFDF00;
  color: #111827;
  font-family: 'Paytone One', sans-serif;
  font-size: 10px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  padding: 5px 12px;
  border-radius: 999px;
  box-shadow: 0 4px 12px rgba(255, 223, 0, 0.4);
}

.cg-card-thumb-link {
  display: block;
  width: 100%;
  height: 230px;
  overflow: hidden;
  position: relative;
  background: #f3f4f6;
}

.cg-card-thumb-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.4s ease;
}

.cg-product-card-v2:hover .cg-card-thumb-img {
  transform: scale(1.06);
}

.cg-card-body {
  padding: 24px;
  display: flex;
  flex-direction: column;
  flex: 1;
}

.cg-card-cat-pill {
  display: inline-flex;
  align-items: center;
  padding: 4px 14px;
  border-radius: 999px;
  border: 1px solid;
  margin-bottom: 12px;
  width: fit-content;
}

.cg-card-cat-pill span {
  font-family: 'Gochi Hand', cursive;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 1.5px;
  text-transform: uppercase;
}

.cg-card-title {
  font-family: 'Paytone One', sans-serif;
  font-size: 21px;
  line-height: 1.25;
  color: #111827;
  margin-bottom: 10px;
}

.cg-card-title a {
  color: inherit;
  text-decoration: none !important;
  transition: color 0.2s ease;
}

.cg-card-title a:hover {
  color: #217aff;
}

.cg-card-excerpt {
  font-family: 'Gochi Hand', cursive;
  font-size: 15px;
  color: #4b5563;
  line-height: 1.5;
  margin-bottom: 20px;
  flex: 1;
}

.cg-card-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: auto;
  padding-top: 16px;
  border-top: 1px solid #f3f4f6;
}

.cg-card-price {
  font-family: 'Paytone One', sans-serif;
  font-size: 24px;
  color: #111827;
  letter-spacing: -0.5px;
  display: flex;
  align-items: baseline;
  gap: 8px;
}

.cg-card-price del {
  font-size: 16px;
  color: #9ca3af;
  font-weight: normal;
  text-decoration: line-through;
}

.cg-card-price ins {
  text-decoration: none;
  color: #111827;
}

.cg-btn-add-cart {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: #FFDF00;
  color: #111827 !important;
  font-family: 'Paytone One', sans-serif;
  font-size: 13px;
  padding: 10px 18px;
  border-radius: 12px;
  text-decoration: none !important;
  transition: all 0.2s ease;
  border: none;
  cursor: pointer;
  white-space: nowrap;
}

.cg-btn-add-cart:hover {
  background: #facc15;
  transform: translateY(-2px);
  box-shadow: 0 4px 14px rgba(250, 204, 21, 0.45);
}

/* Shop Pagination */
.cg-shop-pagination-wrap {
  margin-top: 50px;
  display: flex;
  justify-content: center;
}

.cg-shop-pagination-wrap ul.page-numbers {
  display: flex;
  align-items: center;
  gap: 8px;
  list-style: none;
  margin: 0;
  padding: 0;
}

.cg-shop-pagination-wrap ul.page-numbers li a,
.cg-shop-pagination-wrap ul.page-numbers li span {
  font-family: 'Paytone One', sans-serif;
  font-size: 14px;
  padding: 8px 16px;
  border-radius: 10px;
  text-decoration: none !important;
  background: #ffffff;
  color: #374151;
  border: 1px solid #e5e7eb;
  transition: all 0.2s ease;
  display: block;
}

.cg-shop-pagination-wrap ul.page-numbers li a:hover,
.cg-shop-pagination-wrap ul.page-numbers li span.current {
  background: #04191b;
  color: #FFDF00;
  border-color: #04191b;
}

/* Empty State */
.cg-shop-empty-state {
  text-align: center;
  padding: 80px 20px;
  max-width: 500px;
  margin: 0 auto;
}

.cg-empty-icon {
  font-size: 56px;
  margin-bottom: 16px;
}

.cg-shop-empty-state h2 {
  font-family: 'Paytone One', sans-serif;
  font-size: 28px;
  color: #111827;
  margin-bottom: 12px;
}

.cg-shop-empty-state p {
  font-family: 'Gochi Hand', cursive;
  font-size: 18px;
  color: #6b7280;
  margin-bottom: 24px;
}

.cg-btn-reset-filters {
  display: inline-block;
  background: #FFDF00;
  color: #111827 !important;
  font-family: 'Paytone One', sans-serif;
  font-size: 14px;
  padding: 12px 24px;
  border-radius: 999px;
  text-decoration: none !important;
  transition: all 0.2s ease;
}

.cg-btn-reset-filters:hover {
  background: #facc15;
  transform: translateY(-2px);
}

/* Shop Trust Bar Section */
.cg-shop-trust-section {
  background: #fad982;
  padding: 60px 0;
  border-top: 1px solid rgba(0, 0, 0, 0.06);
  border-bottom: 1px solid rgba(0, 0, 0, 0.06);
}

.cg-trust-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 32px;
}

@media (max-width: 991px) {
  .cg-trust-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 576px) {
  .cg-trust-grid {
    grid-template-columns: 1fr;
  }
}

.cg-trust-card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.cg-trust-icon {
  font-size: 32px;
  margin-bottom: 12px;
  line-height: 1;
}

.cg-trust-card h4 {
  font-family: 'Paytone One', sans-serif;
  font-size: 18px;
  color: #111827;
  margin-bottom: 8px;
}

.cg-trust-card p {
  font-family: 'Gochi Hand', cursive;
  font-size: 15px;
  color: #374151;
  margin: 0;
  line-height: 1.45;
}

/* Shop Pre-footer Callout Section */
.cg-shop-callout-section {
  background: #04191b;
  padding: 64px 0;
  color: #ffffff;
}

.cg-shop-callout-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 32px;
  flex-wrap: wrap;
}

.cg-callout-text h3 {
  font-family: 'Paytone One', sans-serif;
  font-size: 32px;
  color: #ffffff;
  margin-bottom: 8px;
}

.cg-callout-text p {
  font-family: 'Gochi Hand', cursive;
  font-size: 18px;
  color: #FFDF00;
  margin: 0;
}

.cg-callout-btn {
  background: #FFDF00;
  color: #04191b !important;
  font-family: 'Paytone One', sans-serif;
  font-size: 14px;
  padding: 14px 32px;
  border-radius: 999px;
  text-decoration: none !important;
  letter-spacing: 1px;
  transition: all 0.25s ease;
  white-space: nowrap;
}

.cg-callout-btn:hover {
  background: #ffffff;
  transform: scale(1.05);
}

/* ═══════ Front Page Store Section Base Styles ═══════ */
.cg-store-section {
  background: #1c0f07;
  padding: 96px 0 104px;
  overflow: hidden;
  position: relative;
}

.cg-store-glow {
  position: absolute;
  top: -60px;
  left: 50%;
  transform: translateX(-50%);
  width: 800px;
  height: 500px;
  background: radial-gradient(ellipse at center, rgba(196, 106, 56, 0.18) 0%, transparent 68%);
  pointer-events: none;
}

.cg-store-sparkle-1 {
  position: absolute;
  top: 72px;
  right: 160px;
  color: #FFDF00;
  font-size: 20px;
  animation: pulse 3s ease-in-out infinite;
  pointer-events: none;
}

.cg-store-sparkle-2 {
  position: absolute;
  bottom: 120px;
  left: 140px;
  color: #c46a38;
  font-size: 14px;
  animation: pulse 4s ease-in-out infinite 1s;
  pointer-events: none;
}

.cg-store-header-wrap {
  padding: 0 120px;
  margin-bottom: 52px;
  position: relative;
  z-index: 1;
}

.cg-store-header {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
}

.cg-store-header-left {
  display: flex;
  align-items: center;
  gap: 32px;
}

.cg-store-tag {
  font-family: 'Gochi Hand', cursive;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 2.5px;
  text-transform: uppercase;
  color: #c46a38;
  margin-bottom: 14px;
}

.cg-store-title {
  font-family: 'Paytone One', sans-serif;
  font-size: 54px;
  color: #fff;
  letter-spacing: -1.5px;
  line-height: 0.95;
  margin: 0;
}

.cg-store-header-img {
  height: 180px;
  width: auto;
  display: block;
  flex-shrink: 0;
}

.cg-store-header-right {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 14px;
}

.cg-store-subtitle {
  font-family: 'Gochi Hand', cursive;
  font-size: 15px;
  color: rgba(255, 255, 255, 0.38);
  max-width: 220px;
  text-align: right;
  line-height: 1.6;
  margin: 0;
}

.cg-store-cta-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: 'Paytone One', sans-serif;
  font-size: 13px;
  color: #1c0f07;
  background: #FFDF00;
  text-decoration: none;
  padding: 12px 24px;
  border-radius: 999px;
  letter-spacing: 0.3px;
  white-space: nowrap;
  transition: transform 0.2s ease, background 0.2s ease;
}

.cg-store-cta-btn:hover {
  background: #ffe64d;
  transform: translateY(-2px);
  color: #1c0f07;
}

.cg-store-track {
  display: flex;
  gap: 22px;
  overflow-x: auto;
  padding: 8px 120px 28px;
  scrollbar-width: none;
  -ms-overflow-style: none;
  -webkit-overflow-scrolling: touch;
}

.cg-store-track::-webkit-scrollbar {
  display: none;
}

.cg-store-card {
  flex: 0 0 330px;
  background: #fff;
  border-radius: 24px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  box-shadow: 0 4px 32px rgba(0, 0, 0, 0.35);
  transition: transform 0.25s ease, box-shadow 0.25s ease;
  cursor: pointer;
  position: relative;
}

.cg-store-card:hover {
  transform: translateY(-7px);
  box-shadow: 0 24px 56px rgba(196, 106, 56, 0.3);
}

.cg-store-card-sale-badge {
  position: absolute;
  top: 16px;
  left: 16px;
  z-index: 2;
  background: #FF5E7D;
  color: #fff;
  font-family: 'Paytone One', sans-serif;
  font-size: 10px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  padding: 5px 12px;
  border-radius: 999px;
}

.cg-store-card-top-strip {
  height: 6px;
  flex-shrink: 0;
}

.cg-store-card-img {
  width: 100%;
  display: block;
  flex-shrink: 0;
  object-fit: cover;
}

.cg-store-card-body {
  padding: 24px 24px 26px;
  display: flex;
  flex-direction: column;
  flex: 1;
}

.cg-store-card-cat-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 12px;
  border-radius: 999px;
  margin-bottom: 14px;
  width: fit-content;
  border: 1px solid transparent;
}

.cg-store-card-cat-badge span {
  font-family: 'Gochi Hand', cursive;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 2px;
  text-transform: uppercase;
}

.cg-store-card-title {
  font-family: 'Paytone One', sans-serif;
  font-size: 21px;
  color: #0d1117;
  line-height: 1.2;
  margin-bottom: 18px;
  flex: 1;
}

.cg-store-card-price-wrap {
  display: flex;
  align-items: baseline;
  gap: 10px;
  margin-bottom: 20px;
}

.cg-store-price-main {
  font-family: 'Paytone One', sans-serif;
  font-size: 28px;
  color: #0d1117;
  letter-spacing: -1px;
}

.cg-store-price-old {
  font-family: 'Gochi Hand', cursive;
  font-size: 14px;
  color: rgba(0, 0, 0, 0.28);
  text-decoration: line-through;
}

.cg-store-price-off {
  font-family: 'Gochi Hand', cursive;
  font-size: 11px;
  font-weight: 700;
  color: #FF5E7D;
  background: rgba(255, 94, 125, 0.1);
  padding: 2px 8px;
  border-radius: 999px;
}

.cg-store-add-cart-btn {
  display: block;
  text-align: center;
  background: #FFDF00;
  color: #0d1117 !important;
  font-family: 'Paytone One', sans-serif;
  font-size: 15px;
  padding: 15px 20px;
  border-radius: 14px;
  text-decoration: none !important;
  letter-spacing: 0.3px;
  border: none;
  cursor: pointer;
  transition: background 0.2s ease, transform 0.2s ease;
}

.cg-store-add-cart-btn:hover {
  background: #ffe64d;
  transform: translateY(-2px);
}

/* 5. Single Product Redesign */
.cg-single-product-wrap {
  padding: 60px 0 80px;
  background: #fdfbf7;
}

.cg-single-product-container {
  max-width: 1140px;
  margin: 0 auto;
  padding: 0 24px;
}

.cg-single-product-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 48px;
  align-items: start;
}

@media (max-width: 768px) {
  .cg-single-product-grid {
    grid-template-columns: 1fr;
  }
}

.cg-product-gallery-img {
  width: 100%;
  border-radius: 24px;
  object-fit: cover;
  box-shadow: 0 12px 36px rgba(0, 0, 0, 0.12);
  border: 1px solid #e5e7eb;
}

.cg-single-product-meta {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.cg-product-page-title {
  font-family: 'Paytone One', sans-serif;
  font-size: 36px;
  color: #111827;
  line-height: 1.2;
}

.cg-product-page-price {
  font-family: 'Paytone One', sans-serif;
  font-size: 32px;
  color: #111827;
}


/* Footer Hover Styles */
.footer-btn-1:hover {
  filter: brightness(1.05);
}

.footer-btn-2:hover {
  background: rgba(0, 0, 0, 0.12) !important;
}

.footer-link:hover {
  color: rgba(0, 0, 0, 0.7) !important;
}

/* ── BLOG ────────────────────────────────────────── */
.blog-section {
  background: var(--surface);
  padding: 80px 0;
}

.blog-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}

.blog-card {
  background: var(--page);
  border: 1px solid var(--ink-10);
  border-radius: var(--r-lg, 16px);
  padding: 24px;
  text-decoration: none;
  color: var(--ink);
  transition: border-color .2s, transform .2s;
  display: block;
}

.blog-card:hover {
  border-color: var(--cloud-mid);
  transform: translateY(-2px);
}

.blog-tag {
  margin-bottom: 14px;
}

.blog-title {
  font-family: var(--serif);
  font-size: 17px;
  font-weight: 400;
  line-height: 1.35;
  color: var(--ink);
  margin-bottom: 10px;
}

.blog-excerpt {
  font-size: 13px;
  color: var(--ink-60);
  line-height: 1.65;
  margin-bottom: 16px;
}

.blog-meta {
  display: flex;
  gap: 10px;
  align-items: center;
}

.blog-date {
  font-size: 11px;
  color: var(--ink-30);
}

.blog-dot {
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: var(--ink-30);
}

.blog-read {
  font-size: 11px;
  color: var(--ink-30);
}

@media (max-width: 900px) {
  .blog-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 640px) {
  .blog-grid {
    grid-template-columns: 1fr;
  }
}

/* ==========================================================================
   5. SINGLE PRODUCT DESCRIPTION PAGE REDESIGN (THE CLOUD GIRL THEME)
   ========================================================================== */

/* PDP Hero Header Banner */
.cg-pdp-hero {
  background: linear-gradient(135deg, #04191b 0%, #0d2e30 60%, #154245 100%);
  padding: 60px 0 50px;
  color: #ffffff;
  position: relative;
  overflow: hidden;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.cg-pdp-container {
  max-width: 1160px;
  margin: 0 auto;
  padding: 0 24px;
}

.cg-pdp-breadcrumb {
  font-family: 'Gochi Hand', cursive;
  font-size: 15px;
  color: rgba(255, 255, 255, 0.7);
  margin-bottom: 20px;
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.cg-pdp-breadcrumb a {
  color: rgba(255, 255, 255, 0.75);
  text-decoration: none !important;
  transition: color 0.2s ease;
}

.cg-pdp-breadcrumb a:hover {
  color: #FFDF00;
}

.cg-pdp-breadcrumb .sep {
  color: rgba(255, 255, 255, 0.35);
}

.cg-pdp-breadcrumb .current {
  color: #FFDF00;
  font-weight: 700;
}

.cg-pdp-hero-badge {
  display: inline-flex;
  align-items: center;
  font-family: 'Gochi Hand', cursive;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 2px;
  padding: 5px 16px;
  border-radius: 999px;
  margin-bottom: 14px;
  backdrop-filter: blur(4px);
}

.cg-pdp-hero-title {
  font-family: 'Paytone One', sans-serif;
  font-size: 44px;
  line-height: 1.1;
  color: #ffffff;
  margin-bottom: 16px;
  letter-spacing: -0.5px;
}

@media (max-width: 768px) {
  .cg-pdp-hero-title {
    font-size: 32px;
  }
}

.cg-pdp-hero-rating {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.cg-pdp-hero-rating .stars {
  color: #FFDF00;
  font-size: 18px;
  letter-spacing: 2px;
}

.cg-pdp-hero-rating .rating-score {
  font-family: 'Paytone One', sans-serif;
  font-size: 16px;
  color: #ffffff;
}

.cg-pdp-hero-rating .rating-count {
  font-family: 'Gochi Hand', cursive;
  font-size: 15px;
  color: rgba(255, 255, 255, 0.75);
}

.cg-pdp-hero-rating .verified-pill {
  font-family: 'Gochi Hand', cursive;
  font-size: 12px;
  background: rgba(79, 184, 191, 0.2);
  border: 1px solid rgba(79, 184, 191, 0.4);
  color: #4fb8bf;
  padding: 3px 10px;
  border-radius: 999px;
  font-weight: 700;
}

/* PDP Main Container */
.cg-pdp-main-wrap {
  background: #fdfbf7;
  padding: 60px 0 90px;
}

.cg-pdp-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 48px;
  align-items: start;
  margin-bottom: 60px;
}

@media (max-width: 991px) {
  .cg-pdp-grid {
    grid-template-columns: 1fr;
    gap: 36px;
  }
}

/* Left Column: Gallery */
.cg-pdp-main-image-card {
  position: relative;
  background: #ffffff;
  border-radius: 28px;
  overflow: hidden;
  border: 1px solid rgba(0, 0, 0, 0.08);
  box-shadow: 0 16px 48px rgba(0, 0, 0, 0.08);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.cg-pdp-main-image-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.12);
}

.cg-pdp-sale-badge {
  position: absolute;
  top: 20px;
  left: 20px;
  z-index: 5;
  background: #FF5E7D;
  color: #ffffff;
  font-family: 'Paytone One', sans-serif;
  font-size: 11px;
  letter-spacing: 1.5px;
  padding: 6px 14px;
  border-radius: 999px;
  box-shadow: 0 6px 16px rgba(255, 94, 125, 0.45);
  display: flex;
  align-items: center;
  gap: 6px;
}

.cg-pdp-sale-badge .percent {
  background: rgba(255, 255, 255, 0.25);
  padding: 2px 8px;
  border-radius: 999px;
}

.cg-pdp-main-img {
  width: 100%;
  height: 480px;
  object-fit: cover;
  display: block;
  transition: opacity 0.2s ease, transform 0.4s ease;
}

@media (max-width: 768px) {
  .cg-pdp-main-img {
    height: 340px;
  }
}

.cg-pdp-zoom-btn {
  position: absolute;
  bottom: 20px;
  right: 20px;
  background: rgba(255, 255, 255, 0.9);
  border: 1px solid rgba(0, 0, 0, 0.1);
  color: #111827;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.12);
  transition: all 0.2s ease;
  z-index: 5;
}

.cg-pdp-zoom-btn:hover {
  background: #04191b;
  color: #FFDF00;
  transform: scale(1.1);
}

.cg-pdp-thumbnails {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 16px;
  overflow-x: auto;
  padding-bottom: 6px;
}

.cg-pdp-thumb-item {
  width: 80px;
  height: 80px;
  border-radius: 16px;
  overflow: hidden;
  border: 2px solid transparent;
  cursor: pointer;
  transition: all 0.2s ease;
  background: #ffffff;
  flex-shrink: 0;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
}

.cg-pdp-thumb-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.cg-pdp-thumb-item:hover,
.cg-pdp-thumb-item.active {
  border-color: #FFDF00;
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(255, 223, 0, 0.4);
}

/* Social proof under gallery */
.cg-pdp-social-proof-card {
  margin-top: 24px;
  background: #ffffff;
  border: 1px solid #e5e7eb;
  border-radius: 20px;
  padding: 16px 20px;
  display: flex;
  align-items: center;
  gap: 16px;
  box-shadow: 0 4px 18px rgba(0, 0, 0, 0.03);
}

.cg-proof-avatars {
  display: flex;
  align-items: center;
}

.cg-avatar {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'Paytone One', sans-serif;
  font-size: 12px;
  border: 2px solid #ffffff;
  margin-left: -10px;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
}

.cg-avatar:first-child {
  margin-left: 0;
}

.cg-proof-text strong {
  display: block;
  font-family: 'Paytone One', sans-serif;
  font-size: 14px;
  color: #111827;
}

.cg-proof-text span {
  font-family: 'Gochi Hand', cursive;
  font-size: 14px;
  color: #6b7280;
}

/* Right Column: Meta & Buying Card */
.cg-pdp-meta-card {
  background: #ffffff;
  border: 1px solid #e5e7eb;
  border-radius: 28px;
  padding: 36px;
  box-shadow: 0 12px 36px rgba(0, 0, 0, 0.05);
  display: flex;
  flex-direction: column;
}

@media (max-width: 576px) {
  .cg-pdp-meta-card {
    padding: 24px;
  }
}

.cg-pdp-stock-status {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: rgba(16, 185, 129, 0.1);
  border: 1px solid rgba(16, 185, 129, 0.25);
  padding: 5px 14px;
  border-radius: 999px;
  width: fit-content;
  margin-bottom: 18px;
}

.pulse-dot {
  width: 8px;
  height: 8px;
  background: #10b981;
  border-radius: 50%;
  box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.7);
  animation: pulseGreen 2s infinite;
}

@keyframes pulseGreen {
  0% {
    transform: scale(0.95);
    box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.7);
  }

  70% {
    transform: scale(1);
    box-shadow: 0 0 0 8px rgba(16, 185, 129, 0);
  }

  100% {
    transform: scale(0.95);
    box-shadow: 0 0 0 0 rgba(16, 185, 129, 0);
  }
}

.status-label {
  font-family: 'Gochi Hand', cursive;
  font-size: 13px;
  font-weight: 700;
  color: #047857;
  letter-spacing: 0.5px;
}

.cg-pdp-title {
  font-family: 'Paytone One', sans-serif;
  font-size: 34px;
  line-height: 1.15;
  color: #111827;
  margin-bottom: 16px;
  letter-spacing: -0.5px;
}

.cg-pdp-price-box {
  font-family: 'Paytone One', sans-serif;
  font-size: 36px;
  color: #111827;
  margin-bottom: 20px;
  display: flex;
  align-items: baseline;
  gap: 12px;
  letter-spacing: -0.5px;
}

.cg-pdp-price-box del {
  font-size: 22px;
  color: #9ca3af;
  font-weight: normal;
  text-decoration: line-through;
}

.cg-pdp-price-box ins {
  text-decoration: none;
  color: #111827;
}

.cg-pdp-short-desc {
  font-family: 'Gochi Hand', cursive;
  font-size: 18px;
  color: #4b5563;
  line-height: 1.65;
  margin-bottom: 24px;
  padding-bottom: 20px;
  border-bottom: 1px solid #f3f4f6;
}

/* Action Box: WooCommerce Add to Cart Form overrides */
.cg-pdp-action-box form.cart {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 16px;
  flex-wrap: wrap;
}

.cg-pdp-action-box .quantity {
  margin: 0 !important;
}

.cg-pdp-action-box .quantity input.qty {
  width: 70px;
  height: 52px;
  border: 1px solid #d1d5db;
  border-radius: 14px;
  text-align: center;
  font-family: 'Paytone One', sans-serif;
  font-size: 16px;
  color: #111827;
  background: #f9fafb;
}

.cg-pdp-action-box button.single_add_to_cart_button {
  flex: 1;
  min-width: 200px;
  height: 52px;
  background: #FFDF00 !important;
  color: #04191b !important;
  font-family: 'Paytone One', sans-serif !important;
  font-size: 16px !important;
  border-radius: 14px !important;
  border: none !important;
  box-shadow: 0 6px 20px rgba(255, 223, 0, 0.45) !important;
  transition: all 0.25s ease !important;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  letter-spacing: 0.5px;
}

.cg-pdp-action-box button.single_add_to_cart_button:hover {
  background: #facc15 !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 10px 24px rgba(255, 223, 0, 0.55) !important;
}

/* Direct Buy Now Button */
.cg-pdp-direct-buy {
  margin-bottom: 28px;
}

.cg-btn-buy-now {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  padding: 16px 24px;
  background: #04191b;
  color: #FFDF00 !important;
  font-family: 'Paytone One', sans-serif;
  font-size: 16px;
  border-radius: 14px;
  text-decoration: none !important;
  transition: all 0.25s ease;
  box-shadow: 0 6px 20px rgba(4, 25, 27, 0.3);
  letter-spacing: 0.5px;
}

.cg-btn-buy-now:hover {
  background: #0d2e30;
  color: #ffffff !important;
  transform: translateY(-2px);
  box-shadow: 0 10px 28px rgba(4, 25, 27, 0.45);
}

/* Feature Perks Box */
.cg-pdp-perks-box {
  background: #f9fafb;
  border: 1px solid #f3f4f6;
  border-radius: 20px;
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.cg-perk-item {
  display: flex;
  align-items: flex-start;
  gap: 12px;
}

.cg-perk-item .icon {
  font-size: 18px;
  line-height: 1.2;
}

.cg-perk-item .text strong {
  display: block;
  font-family: 'Paytone One', sans-serif;
  font-size: 13px;
  color: #111827;
}

.cg-perk-item .text span {
  font-family: 'Gochi Hand', cursive;
  font-size: 14px;
  color: #6b7280;
  line-height: 1.3;
}

/* Value Proposition Strip */
.cg-pdp-value-strip {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
  margin-bottom: 60px;
}

@media (max-width: 991px) {
  .cg-pdp-value-strip {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 576px) {
  .cg-pdp-value-strip {
    grid-template-columns: 1fr;
  }
}

.cg-value-card {
  background: #ffffff;
  border: 1px solid #e5e7eb;
  border-radius: 20px;
  padding: 24px;
  text-align: center;
  box-shadow: 0 4px 18px rgba(0, 0, 0, 0.03);
  transition: transform 0.25s ease;
}

.cg-value-card:hover {
  transform: translateY(-4px);
  border-color: #FFDF00;
}

.cg-value-icon {
  font-size: 32px;
  margin-bottom: 12px;
}

.cg-value-card h4 {
  font-family: 'Paytone One', sans-serif;
  font-size: 17px;
  color: #111827;
  margin-bottom: 8px;
}

.cg-value-card p {
  font-family: 'Gochi Hand', cursive;
  font-size: 15px;
  color: #4b5563;
  margin: 0;
  line-height: 1.4;
}

/* Tabs Container */
.cg-pdp-tabs-card {
  background: #ffffff;
  border: 1px solid #e5e7eb;
  border-radius: 28px;
  padding: 40px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.04);
  margin-bottom: 70px;
}

@media (max-width: 576px) {
  .cg-pdp-tabs-card {
    padding: 24px;
  }
}

.cg-pdp-nav-tabs {
  display: flex;
  align-items: center;
  gap: 12px;
  list-style: none;
  margin: 0 0 32px;
  padding: 0 0 20px;
  border-bottom: 1px solid #f3f4f6;
  flex-wrap: wrap;
}

.cg-pdp-nav-tabs li {
  font-family: 'Paytone One', sans-serif;
  font-size: 14px;
  padding: 10px 22px;
  border-radius: 999px;
  background: #f3f4f6;
  color: #4b5563;
  cursor: pointer;
  transition: all 0.2s ease;
}

.cg-pdp-nav-tabs li:hover {
  background: #e5e7eb;
  color: #111827;
}

.cg-pdp-nav-tabs li.active {
  background: #04191b;
  color: #FFDF00;
  box-shadow: 0 4px 14px rgba(4, 25, 27, 0.25);
}

.cg-pdp-tab-pane {
  display: none;
}

.cg-pdp-tab-pane.active {
  display: block;
}

.cg-pdp-prose {
  font-family: 'Gochi Hand', cursive;
  font-size: 19px;
  color: #374151;
  line-height: 1.8;
}

.cg-pdp-prose p {
  margin-bottom: 20px;
}

/* What's Included Grid */
.cg-pdp-included-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
}

@media (max-width: 768px) {
  .cg-pdp-included-grid {
    grid-template-columns: 1fr;
  }
}

.cg-inc-item {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  background: #f9fafb;
  border: 1px solid #f3f4f6;
  border-radius: 18px;
  padding: 20px;
}

.cg-inc-item .check {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: #10b981;
  color: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  flex-shrink: 0;
  font-weight: bold;
}

.cg-inc-item strong {
  display: block;
  font-family: 'Paytone One', sans-serif;
  font-size: 16px;
  color: #111827;
  margin-bottom: 4px;
}

.cg-inc-item p {
  font-family: 'Gochi Hand', cursive;
  font-size: 15px;
  color: #6b7280;
  margin: 0;
}

/* FAQ Accordion */
.cg-pdp-faq-list {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.cg-faq-item {
  background: #f9fafb;
  border: 1px solid #e5e7eb;
  border-radius: 16px;
  padding: 16px 20px;
  transition: border-color 0.2s ease;
}

.cg-faq-item[open] {
  border-color: #4fb8bf;
  background: #ffffff;
}

.cg-faq-item summary {
  font-family: 'Paytone One', sans-serif;
  font-size: 16px;
  color: #111827;
  cursor: pointer;
  outline: none;
  user-select: none;
}

.cg-faq-body {
  font-family: 'Gochi Hand', cursive;
  font-size: 17px;
  color: #4b5563;
  line-height: 1.6;
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid #f3f4f6;
}

/* Related Products Section */
.cg-pdp-related-section {
  margin-top: 70px;
}

.cg-pdp-section-heading {
  font-family: 'Paytone One', sans-serif;
  font-size: 34px;
  color: #111827;
  margin-bottom: 32px;
  text-align: center;
  letter-spacing: -0.5px;
}

.cg-pdp-related-section .related.products {
  width: 100%;
}

.cg-pdp-related-section ul.products {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 30px;
  list-style: none;
  padding: 0;
  margin: 0;
}

.cg-pdp-related-section ul.products li.product {
  background: #ffffff;
  border: 1px solid #e5e7eb;
  border-radius: 24px;
  padding: 24px;
  display: flex;
  flex-direction: column;
  box-shadow: 0 6px 24px rgba(0, 0, 0, 0.05);
  transition: transform 0.25s ease;
}

.cg-pdp-related-section ul.products li.product:hover {
  transform: translateY(-6px);
  box-shadow: 0 16px 36px rgba(0, 0, 0, 0.1);
}

/* Mobile Sticky Bar */
.cg-pdp-mobile-bar {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  background: #04191b;
  border-top: 1px solid rgba(255, 255, 255, 0.15);
  padding: 12px 20px;
  display: none;
  align-items: center;
  justify-content: space-between;
  z-index: 999;
  box-shadow: 0 -6px 20px rgba(0, 0, 0, 0.2);
}

@media (max-width: 768px) {
  .cg-pdp-mobile-bar {
    display: flex;
  }
}

.cg-mob-info {
  display: flex;
  align-items: center;
  gap: 12px;
}

.cg-mob-info img {
  width: 44px;
  height: 44px;
  border-radius: 10px;
  object-fit: cover;
  border: 1px solid rgba(255, 255, 255, 0.2);
}

.cg-mob-title {
  font-family: 'Paytone One', sans-serif;
  font-size: 13px;
  color: #ffffff;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 160px;
}

.cg-mob-price {
  font-family: 'Paytone One', sans-serif;
  font-size: 14px;
  color: #FFDF00;
}

.cg-mob-btn {
  background: #FFDF00;
  color: #04191b !important;
  font-family: 'Paytone One', sans-serif;
  font-size: 13px;
  padding: 10px 18px;
  border-radius: 999px;
  text-decoration: none !important;
  white-space: nowrap;
}

/* ═══════ STANDALONE PRODUCT PAGE STYLES ═══════ */
.single-product.woocommerce div.product form.cart .quantity,
.single-product .cart .quantity {
  display: none !important;
}

.single-product.woocommerce div.product form.cart {
  margin: 0 !important;
  padding: 0 !important;
  display: block !important;
}

.single-product.woocommerce div.product form.cart .button,
.single-product .cart .single_add_to_cart_button {
  width: 100% !important;
  max-width: 360px !important;
  background: #FFDF00 !important;
  color: #0d1117 !important;
  font-family: 'Paytone One', sans-serif !important;
  font-size: 17px !important;
  border: none !important;
  border-radius: 14px !important;
  padding: 18px 24px !important;
  cursor: pointer !important;
  letter-spacing: 0.3px !important;
  box-shadow: 0 6px 22px rgba(255, 223, 0, 0.45) !important;
  transition: filter 0.15s ease, transform 0.15s ease !important;
  display: block !important;
  text-align: center !important;
}

.single-product.woocommerce div.product form.cart .button:hover,
.single-product .cart .single_add_to_cart_button:hover {
  filter: brightness(1.06) !important;
  transform: translateY(-2px) !important;
}

@media (max-width: 991px) {
  .cg-standalone-product-grid {
    grid-template-columns: 1fr !important;
    gap: 36px !important;
    padding: 24px 20px 48px !important;
  }

  .cg-standalone-breadcrumb-wrap {
    padding: 20px 20px 0 !important;
  }

  .cg-standalone-tabs-wrap,
  .cg-standalone-substack-wrap,
  .cg-standalone-related-wrap {
    padding-left: 20px !important;
    padding-right: 20px !important;
  }

  footer div[style*="padding: 96px 120px"] {
    padding: 60px 20px !important;
  }

  footer div[style*="margin: 0 120px"] {
    margin: 0 20px !important;
  }
}

/* ══════════════════════════════════════════════════════════════
   CLOUD GIRL COMICS PAGE DESIGN SYSTEM (#FBF3E0 Light Theme)
   ══════════════════════════════════════════════════════════════ */

.cg-comics-main-section {
  background: #FBF3E0;
  padding: 40px 0 100px;
  min-height: calc(100vh - 150px);
}

.cg-comics-toolbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 20px;
  margin-bottom: 40px;
  padding-bottom: 20px;
  border-bottom: 1px solid rgba(0, 0, 0, 0.08);
}

.cg-comics-count {
  font-family: 'Gochi Hand', cursive;
  font-size: 16px;
  color: #555555;
  letter-spacing: 1px;
}

.cg-comics-search-wrap {
  position: relative;
  width: 100%;
  max-width: 380px;
}

.cg-comics-search-input {
  width: 100%;
  background: #ffffff;
  border: 1.5px solid rgba(0, 0, 0, 0.15);
  border-radius: 999px;
  padding: 11px 45px 11px 20px;
  color: #0d1117;
  font-size: 14px;
  outline: none;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
  transition: all 0.25s ease;
}

.cg-comics-search-input:focus {
  background: #ffffff;
  border-color: #0d1117;
  box-shadow: 0 0 14px rgba(0, 0, 0, 0.12);
}

.cg-comics-search-icon {
  position: absolute;
  right: 16px;
  top: 50%;
  transform: translateY(-50%);
  color: rgba(0, 0, 0, 0.45);
  pointer-events: none;
}

/* Comics Grid */
.cg-comics-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 32px;
}

@media (max-width: 991px) {
  .cg-comics-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 640px) {
  .cg-comics-grid {
    grid-template-columns: 1fr;
  }
}

/* Comic Card */
.cg-comic-card {
  background: #ffffff;
  border: 1.5px solid rgba(0, 0, 0, 0.08);
  border-radius: 24px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.05);
  transition: transform 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
}

.cg-comic-card:hover {
  transform: translateY(-8px);
  border-color: #0d1117;
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.12);
}

.cg-comic-thumb-wrap {
  position: relative;
  width: 100%;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background: #f3edd9;
  cursor: pointer;
}

.cg-comic-thumb-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.4s ease;
}

.cg-comic-card:hover .cg-comic-thumb-img {
  transform: scale(1.05);
}

.cg-comic-overlay {
  position: absolute;
  inset: 0;
  background: rgba(13, 17, 23, 0.65);
  backdrop-filter: blur(4px);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  opacity: 0;
  transition: opacity 0.3s ease;
}

.cg-comic-card:hover .cg-comic-overlay {
  opacity: 1;
}

.cg-comic-btn-view {
  font-family: 'Paytone One', sans-serif;
  font-size: 13px;
  color: #000000;
  background: #FFDF00;
  border: none;
  padding: 10px 20px;
  border-radius: 999px;
  cursor: pointer;
  transition: transform 0.2s ease, filter 0.2s ease;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  text-decoration: none;
}

.cg-comic-btn-view:hover {
  transform: scale(1.06);
  color: #000000;
  filter: brightness(1.05);
}

.cg-comic-badge {
  position: absolute;
  top: 14px;
  left: 14px;
  background: #0d1117;
  color: #FFDF00;
  font-family: 'Gochi Hand', cursive;
  font-size: 12px;
  font-weight: 700;
  padding: 5px 14px;
  border-radius: 999px;
  z-index: 2;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.cg-comic-card-body {
  padding: 24px;
  display: flex;
  flex-direction: column;
  flex-grow: 1;
}

.cg-comic-card-title {
  font-family: 'Paytone One', sans-serif;
  font-size: 21px;
  color: #0d1117;
  margin: 0 0 10px;
  line-height: 1.3;
}

.cg-comic-card-desc {
  font-family: 'Gochi Hand', cursive;
  font-size: 16px;
  color: #555555;
  margin: 0 0 20px;
  line-height: 1.5;
  flex-grow: 1;
}

.cg-comic-card-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-top: 1px solid rgba(0, 0, 0, 0.08);
  padding-top: 18px;
}

.cg-comic-action-icon {
  background: #f5eedb;
  border: 1.5px solid rgba(0, 0, 0, 0.1);
  color: #0d1117;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.2s ease;
  text-decoration: none;
}

.cg-comic-action-icon:hover {
  background: #FFDF00;
  color: #000000;
  border-color: #0d1117;
  transform: translateY(-2px);
}

/* LIGHTBOX MODAL */
.cg-lightbox-modal {
  position: fixed;
  inset: 0;
  z-index: 99999;
  background: rgba(4, 8, 18, 0.94);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  display: none;
  flex-direction: column;
  opacity: 0;
  transition: opacity 0.3s ease;
}

.cg-lightbox-modal.active {
  display: flex;
  opacity: 1;
}

.cg-lightbox-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 28px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  background: rgba(13, 17, 23, 0.8);
}

.cg-lightbox-title {
  font-family: 'Paytone One', sans-serif;
  font-size: 20px;
  color: #ffffff;
  margin: 0;
}

.cg-lightbox-close {
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.2);
  color: #ffffff;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  cursor: pointer;
  transition: all 0.2s ease;
}

.cg-lightbox-close:hover {
  background: #FF5E7D;
  color: #ffffff;
  border-color: #FF5E7D;
}

.cg-lightbox-body {
  flex-grow: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  padding: 20px;
  overflow: auto;
}

.cg-lightbox-img {
  max-width: 90%;
  max-height: 80vh;
  object-fit: contain;
  border-radius: 12px;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.6);
  transition: transform 0.3s ease;
}

.cg-lightbox-nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background: rgba(255, 255, 255, 0.1);
  border: 1.5px solid rgba(255, 255, 255, 0.2);
  color: #ffffff;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.2s ease;
  z-index: 10;
}

.cg-lightbox-nav:hover {
  background: #FFDF00;
  color: #000000;
  border-color: #FFDF00;
}

.cg-lightbox-prev {
  left: 24px;
}

.cg-lightbox-next {
  right: 24px;
}

.cg-lightbox-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 28px;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  background: rgba(13, 17, 23, 0.8);
}

/* ==========================================================================
   LET'S TALK POPUP MODAL STYLES (Light Warm Cream Theme - Site Matching)
   ========================================================================== */
.cg-talk-modal .modal-backdrop.show {
  opacity: 0.65;
  backdrop-filter: blur(6px);
}

.cg-talk-modal .modal-dialog {
  max-width: 760px;
  margin: 1.75rem auto;
}

.cg-modal-content {
  background: #FBF3E0;
  border: 1px solid rgba(0, 0, 0, 0.1);
  border-radius: 24px;
  box-shadow: 0 25px 65px -10px rgba(0, 0, 0, 0.22);
  overflow: hidden;
  color: #0d1117;
}

.cg-modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 24px 32px 12px 32px;
  background: transparent;
  border-bottom: none;
}

.cg-modal-badge {
  font-family: 'Paytone One', sans-serif;
  font-size: 11px;
  letter-spacing: 1.5px;
  color: #0d1117;
  background: #FFDF00;
  border: 1px solid #e5c200;
  padding: 6px 14px;
  border-radius: 999px;
  text-transform: uppercase;
}

.cg-modal-close-btn {
  background: #ffffff;
  border: 1px solid rgba(0, 0, 0, 0.12);
  color: #0d1117;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.2s ease;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}

.cg-modal-close-btn:hover {
  background: #0d1117;
  color: #FFDF00;
  border-color: #0d1117;
  transform: rotate(90deg);
}

.cg-modal-body {
  padding: 12px 32px 32px 32px;
}

/* Intro profile header */
.cg-talk-profile-header {
  display: flex;
  align-items: center;
  gap: 20px;
  margin-bottom: 28px;
  padding: 20px 24px;
  background: #ffffff;
  border: 1.5px solid rgba(0, 0, 0, 0.08);
  border-radius: 20px;
  box-shadow: 0 4px 18px rgba(0, 0, 0, 0.04);
}

.cg-talk-avatar-wrap {
  position: relative;
  flex-shrink: 0;
}

.cg-talk-avatar {
  width: 68px;
  height: 68px;
  border-radius: 50%;
  object-fit: cover;
  border: 3px solid #FFDF00;
}

.cg-talk-status-dot {
  position: absolute;
  bottom: 2px;
  right: 2px;
  width: 14px;
  height: 14px;
  background: #10b981;
  border: 2.5px solid #ffffff;
  border-radius: 50%;
}

.cg-talk-profile-text h3 {
  font-family: 'Paytone One', sans-serif;
  font-size: 24px;
  color: #0d1117;
  margin: 0 0 4px 0;
  line-height: 1.2;
}

.cg-talk-profile-text p {
  font-family: 'Gochi Hand', cursive;
  font-size: 16px;
  color: rgba(0, 0, 0, 0.65);
  margin: 0;
  line-height: 1.5;
}

/* Form controls */
.cg-talk-form {
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.cg-form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}

@media (max-width: 576px) {
  .cg-form-row {
    grid-template-columns: 1fr;
  }
}

.cg-form-group {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.cg-form-group label {
  font-family: 'Gochi Hand', cursive;
  font-size: 15px;
  font-weight: 700;
  color: rgba(0, 0, 0, 0.7);
  letter-spacing: 0.3px;
}

.cg-req {
  color: #ef4444;
}

.cg-form-input,
.cg-form-select,
.cg-form-textarea {
  background: #ffffff;
  border: 1.5px solid rgba(0, 0, 0, 0.14);
  border-radius: 14px;
  padding: 13px 18px;
  font-family: inherit;
  font-size: 15px;
  color: #0d1117;
  outline: none;
  transition: all 0.2s ease;
}

.cg-form-input::placeholder,
.cg-form-textarea::placeholder {
  color: rgba(0, 0, 0, 0.38);
}

.cg-form-input:focus,
.cg-form-select:focus,
.cg-form-textarea:focus {
  background: #ffffff;
  border-color: #4fb8bf;
  box-shadow: 0 0 0 3px rgba(79, 184, 191, 0.2);
}

.cg-form-select option {
  background: #ffffff;
  color: #0d1117;
}

/* Service Pills Checkbox */
.cg-services-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 4px;
}

.cg-service-pill {
  cursor: pointer;
  user-select: none;
}

.cg-service-pill input[type="checkbox"] {
  display: none;
}

.cg-service-pill span {
  display: inline-block;
  font-family: 'Paytone One', sans-serif;
  font-size: 12px;
  color: #0d1117;
  background: #ffffff;
  border: 1.5px solid rgba(0, 0, 0, 0.14);
  padding: 9px 18px;
  border-radius: 999px;
  transition: all 0.2s ease;
}

.cg-service-pill:hover span {
  background: #f3f4f6;
  border-color: rgba(0, 0, 0, 0.25);
}

.cg-service-pill.active span,
.cg-service-pill input[type="checkbox"]:checked+span {
  background: #FFDF00;
  color: #0d1117;
  border-color: #FFDF00;
  box-shadow: 0 3px 12px rgba(250, 204, 21, 0.45);
}

/* Submit Button */
.cg-form-submit-wrap {
  margin-top: 10px;
}

.cg-talk-submit-btn {
  width: 100%;
  background: #FFDF00;
  color: #0d1117;
  font-family: 'Paytone One', sans-serif;
  font-size: 16px;
  padding: 16px 28px;
  border: none;
  border-radius: 999px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  transition: all 0.2s ease;
  letter-spacing: 0.5px;
  box-shadow: 0 4px 14px rgba(250, 204, 21, 0.35);
}

.cg-talk-submit-btn:hover {
  background: #facc15;
  transform: translateY(-2px);
  box-shadow: 0 8px 25px rgba(250, 204, 21, 0.5);
}

.cg-talk-submit-btn:disabled {
  opacity: 0.6;
  cursor: not-allowed;
  transform: none;
}

.cg-btn-spark {
  font-size: 18px;
  color: #0d1117;
}

/* Response alert box */
.cg-form-response {
  padding: 14px 18px;
  border-radius: 14px;
  font-family: 'Gochi Hand', cursive;
  font-size: 16px;
  line-height: 1.4;
}

.cg-form-response.success {
  background: #d1fae5;
  border: 1.5px solid #10b981;
  color: #065f46;
}

.cg-form-response.error {
  background: #fee2e2;
  border: 1.5px solid #ef4444;
  color: #991b1b;
}

/* Footer Info in Modal */
.cg-modal-footer-info {
  margin-top: 24px;
  padding-top: 20px;
  border-top: 1.5px solid rgba(0, 0, 0, 0.08);
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
}

.cg-modal-footer-info p {
  font-family: 'Gochi Hand', cursive;
  font-size: 15px;
  color: rgba(0, 0, 0, 0.65);
  margin: 0;
}

.cg-modal-footer-info a {
  color: #0d1117;
  font-weight: 700;
  text-decoration: underline;
}

.cg-modal-socials {
  display: flex;
  gap: 12px;
}

.cg-modal-socials a {
  color: #0d1117;
  transition: color 0.2s ease, transform 0.2s ease;
  display: flex;
  align-items: center;
  opacity: 0.75;
}

.cg-modal-socials a:hover {
  opacity: 1;
  transform: translateY(-2px);
}

/* ==========================================================================
   MOBILE & TABLET RESPONSIVE STYLES (HOME PAGE)
   ========================================================================== */

@media (max-width: 991px) {

  /* Section Padding Reset */
  .cg-hero-header,
  .cg-hero-section,
  .cg-trusted-by-section,
  .cg-approach-section,
  .cg-offer-section,
  .cg-sketches-section,
  .cg-books-section,
  .cg-store-section,
  .cg-yt-section,
  .cg-podcast-section,
  .cg-ig-section,
  .cg-testimonials-section,
  .cg-blogs-section {
    padding-left: 24px !important;
    padding-right: 24px !important;
  }

  /* Header Responsive Row & Logo Cloud */
  .cg-hero-header {
    flex-direction: row !important;
    align-items: center !important;
    justify-content: space-between !important;
    padding: 14px 20px 0px !important;
    gap: 12px !important;
  }

  .cg-hero-logo-cloud {
    width: 170px !important;
    max-width: 170px !important;
    height: 90px !important;
  }

  .cg-hero-logo-cloud img:first-child {
    height: 100% !important;
  }

  .cg-hero-logo-cloud img:last-child {
    height: 70px !important;
    bottom: 8px !important;
  }

  .cg-hero-header-actions {
    width: auto !important;
    justify-content: flex-end !important;
    flex-wrap: nowrap !important;
    gap: 10px !important;
  }

  /* Masthead inner header adjustments */
  .cg-masthead-inner {
    padding: 8px 20px !important;
  }

  .cg-header-logo-link {
    width: 170px !important;
    height: 90px !important;
  }

  .cg-header-logo-link img:last-child {
    height: 70px !important;
    bottom: 8px !important;
  }

  /* Hero Main Grid */
  #banner-hero {
    min-height: auto !important;
    height: auto !important;
  }

  .cg-hero-content-grid {
    grid-template-columns: 1fr !important;
    gap: 24px !important;
    padding: 24px 20px 0px 20px !important;
    min-height: auto !important;
  }

  .cg-hero-title {
    font-size: clamp(32px, 8vw, 54px) !important;
    line-height: 1.05 !important;
    margin-bottom: 20px !important;
  }

  .cg-hero-left-col {
    padding-top: 10px !important;
    padding-bottom: 0 !important;
  }

  /* Stats Strip */
  .cg-hero-stats-strip {
    position: relative !important;
    bottom: auto !important;
    left: auto !important;
    right: auto !important;
    top: auto !important;
    z-index: 4 !important;
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 12px !important;
    padding: 16px !important;
    margin: 20px 20px 24px 20px !important;
    background: rgba(13, 17, 23, 0.75) !important;
    backdrop-filter: blur(12px) !important;
    -webkit-backdrop-filter: blur(12px) !important;
    border: 1px solid rgba(255, 255, 255, 0.12) !important;
    border-radius: 20px !important;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3) !important;
  }

  .cg-hero-pink-triangle {
    display: none !important;
  }

  .cg-stat-box {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
    padding: 14px 10px !important;
    margin: 0 !important;
    flex: none !important;
    background: rgba(255, 255, 255, 0.05) !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    border-radius: 14px !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }

  .cg-stat-box span:first-child,
  .cg-stat-box [id^="stat-num-"] {
    font-size: 26px !important;
    line-height: 1.1 !important;
    letter-spacing: -0.5px !important;
    display: block !important;
  }

  .cg-stat-box span:last-child {
    font-size: 11px !important;
    line-height: 1.3 !important;
    letter-spacing: 0.8px !important;
    color: rgba(255, 255, 255, 0.75) !important;
    text-transform: uppercase !important;
    white-space: normal !important;
    margin-top: 4px !important;
    word-break: normal !important;
    word-wrap: normal !important;
  }

  /* Trusted By Row */
  .cg-trusted-by-row {
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 16px !important;
    width: 100% !important;
    text-align: center !important;
  }

  .cg-trusted-by-label {
    padding: 0 !important;
    margin: 0 auto !important;
    width: 100% !important;
    text-align: center !important;
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
  }

  .cg-trusted-by-label p {
    text-align: center !important;
  }

  .cg-trusted-by-divider {
    display: none !important;
  }

  .cg-trusted-by-row>div:last-child {
    width: 100% !important;
  }

  /* Approach Section (Who I Am) */
  .cg-approach-section {
    padding-top: 48px !important;
    padding-bottom: 48px !important;
  }

  .cg-approach-grid {
    grid-template-columns: 1fr !important;
    gap: 32px !important;
  }

  .cg-approach-img-col {
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    width: 100% !important;
    padding: 0 !important;
    text-align: center !important;
  }

  .cg-approach-img-wrapper {
    max-width: 520px !important;
    width: 100% !important;
    margin: 0 auto !important;
    border-radius: 16px !important;
    overflow: hidden !important;
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.08) !important;
  }

  .cg-approach-intro-img {
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    display: block !important;
    margin: 0 auto !important;
    border-radius: 16px !important;
    object-fit: contain !important;
  }

  .cg-approach-zoom-icon {
    width: 56px !important;
    height: 56px !important;
  }

  .cg-approach-gradient-overlay {
    display: none !important;
  }

  .cg-approach-content-wrap {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    width: 100% !important;
  }

  .cg-approach-text-col {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    text-align: center !important;
    padding: 12px 0 24px 0 !important;
    width: 100% !important;
    max-width: 560px !important;
    margin: 0 auto !important;
    box-sizing: border-box !important;
  }

  .cg-approach-label {
    text-align: center !important;
    margin: 0 auto 12px auto !important;
    width: 100% !important;
  }

  .cg-approach-title {
    text-align: center !important;
    font-size: clamp(32px, 7vw, 44px) !important;
    margin: 0 auto 28px auto !important;
    line-height: 1.15 !important;
    width: 100% !important;
  }

  .cg-approach-block {
    margin-bottom: 24px !important;
    text-align: center !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    width: 100% !important;
  }

  .cg-approach-subheading {
    text-align: center !important;
    font-size: 20px !important;
    margin: 0 auto 8px auto !important;
    width: 100% !important;
  }

  .cg-approach-desc {
    text-align: center !important;
    font-size: 15px !important;
    line-height: 1.65 !important;
    max-width: 100% !important;
    margin: 0 auto !important;
  }

  .cg-approach-divider {
    margin: 0 auto 24px auto !important;
    width: 48px !important;
    height: 2px !important;
  }

  .cg-approach-cta {
    align-self: center !important;
    margin: 8px auto 0 auto !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
  }

  .cg-approach-character-col {
    width: 100% !important;
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    padding: 16px 0 0 0 !important;
    margin: 0 auto !important;
  }

  .cg-approach-character-img {
    width: 220px !important;
    max-width: 65% !important;
    height: auto !important;
    margin: 0 auto !important;
  }

  /* Section Header Rows */
  .cg-section-header {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 20px !important;
  }

  .cg-offer-header p:last-child {
    text-align: left !important;
    max-width: 100% !important;
  }

  .cg-offer-header h2 {
    font-size: clamp(28px, 6vw, 42px) !important;
  }

  /* Grids: 4-cols to 2-cols */
  .cg-offer-grid,
  .cg-books-grid,
  .cg-yt-grid,
  .cg-podcast-grid,
  .cg-blogs-grid {
    grid-template-columns: repeat(2, 1fr) !important;
  }

  /* Testimonials / Kind Words Section (Tablet) */
  .cg-testimonials-section {
    padding-top: 56px !important;
    padding-bottom: 64px !important;
    padding-left: 24px !important;
    padding-right: 24px !important;
  }

  .cg-testimonials-header {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 16px !important;
    margin-bottom: 40px !important;
  }

  .cg-testimonials-header-left {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    width: 100% !important;
    gap: 20px !important;
  }

  .cg-testimonials-title {
    font-size: clamp(32px, 6.5vw, 46px) !important;
    line-height: 0.98 !important;
  }

  .cg-testimonials-header-img {
    height: 140px !important;
    max-width: 150px !important;
  }

  .cg-testimonials-subtitle {
    text-align: left !important;
    max-width: 100% !important;
    font-size: 14px !important;
  }

  .cg-featured-testimonial-card {
    grid-template-columns: 1fr !important;
    padding: 40px 36px !important;
    gap: 24px !important;
    border-radius: 24px !important;
  }

  .cg-featured-testimonial-content {
    font-size: 22px !important;
    margin-bottom: 28px !important;
  }

  .cg-testimonial-quote-mark {
    font-size: 90px !important;
    top: 20px !important;
    left: 28px !important;
  }

  .cg-testimonials-grid {
    grid-template-columns: 1fr !important;
    gap: 16px !important;
  }


  /* Book Lightbox */
  .cg-book-lightbox-content {
    flex-direction: column !important;
    gap: 24px !important;
  }

  .cg-book-lightbox-content>div:first-child {
    flex: 0 0 auto !important;
    width: 100% !important;
    max-width: 260px !important;
    margin: 0 auto !important;
  }

  /* Published Works (Books) Section - Tablet & Mobile Responsive */
  .cg-books-section {
    padding-top: 48px !important;
    padding-bottom: 64px !important;
    padding-left: 24px !important;
    padding-right: 24px !important;
  }

  .cg-books-header {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 20px !important;
    margin-bottom: 36px !important;
  }

  .cg-books-header-left {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: space-between !important;
    width: 100% !important;
    gap: 16px !important;
  }

  .cg-books-title {
    font-size: clamp(32px, 7vw, 44px) !important;
    line-height: 1.05 !important;
    letter-spacing: -1px !important;
  }

  .cg-books-header-img {
    height: 140px !important;
    max-width: 130px !important;
  }

  .cg-books-header-right {
    align-items: flex-start !important;
    width: 100% !important;
    gap: 14px !important;
  }

  .cg-books-subtitle {
    text-align: left !important;
    max-width: 100% !important;
    font-size: 14px !important;
  }

  .cg-books-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 16px !important;
  }

  .cg-books-grid .book-card {
    height: 460px !important;
    border-radius: 20px !important;
  }

  /* Visual Library (Sketches) Section Responsive */
  .cg-sketches-section {
    padding-top: 48px !important;
    padding-bottom: 48px !important;
    padding-left: 24px !important;
    padding-right: 24px !important;
  }

  .cg-sketches-inner {
    padding: 0 !important;
  }

  .cg-sketches-header {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 20px !important;
    margin-bottom: 32px !important;
  }

  .cg-sketches-title-wrap {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: space-between !important;
    width: 100% !important;
    gap: 16px !important;
  }

  .cg-sketches-title-text h2 {
    font-size: clamp(32px, 7vw, 44px) !important;
    line-height: 1.05 !important;
  }

  .cg-sketches-header-img {
    height: 130px !important;
    max-width: 120px !important;
  }

  .cg-sketches-meta-wrap {
    align-items: flex-start !important;
    width: 100% !important;
    gap: 12px !important;
  }

  .cg-sketches-subtitle {
    text-align: left !important;
    max-width: 100% !important;
    font-size: 14px !important;
  }

  .cg-sketches-chips {
    display: flex !important;
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    gap: 8px !important;
    margin-bottom: 28px !important;
    padding-bottom: 8px !important;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    margin-left: -24px !important;
    margin-right: -24px !important;
    padding-left: 0 !important;
    padding-right: 24px !important;
  }

  .cg-sketches-chips::before {
    content: '' !important;
    display: block !important;
    flex: 0 0 24px !important;
    width: 24px !important;
    height: 1px !important;
  }

  .cg-sketches-chips::-webkit-scrollbar {
    display: none;
  }

  .sketch-filter-chip {
    flex: 0 0 auto !important;
    white-space: nowrap !important;
    font-size: 12px !important;
    padding: 8px 16px !important;
  }

  .cg-sketches-track {
    margin-left: -24px !important;
    margin-right: -24px !important;
    padding-left: 0 !important;
    padding-right: 24px !important;
    padding-top: 4px !important;
    padding-bottom: 16px !important;
    gap: 16px !important;
    scroll-padding-left: 24px !important;
  }

  .cg-sketches-track::before {
    content: '' !important;
    display: block !important;
    flex: 0 0 24px !important;
    width: 24px !important;
    height: 1px !important;
  }

  .sketch-card {
    flex: 0 0 240px !important;
    height: 210px !important;
  }

  /* Front Page Store Section Responsive - Tablet (max-width: 991px) */
  .cg-store-section {
    padding-top: 48px !important;
    padding-bottom: 64px !important;
    padding-left: 24px !important;
    padding-right: 24px !important;
  }

  .cg-store-sparkle-1,
  .cg-store-sparkle-2 {
    display: none !important;
  }

  .cg-store-header-wrap {
    padding: 0 !important;
    margin-bottom: 36px !important;
  }

  .cg-store-header {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 20px !important;
  }

  .cg-store-header-left {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: space-between !important;
    width: 100% !important;
    gap: 16px !important;
  }

  .cg-store-title {
    font-size: clamp(32px, 7vw, 44px) !important;
    line-height: 1.05 !important;
    letter-spacing: -1px !important;
  }

  .cg-store-header-img {
    height: 140px !important;
    max-width: 130px !important;
  }

  .cg-store-header-right {
    align-items: flex-start !important;
    width: 100% !important;
    gap: 14px !important;
  }

  .cg-store-subtitle {
    text-align: left !important;
    max-width: 100% !important;
    font-size: 14px !important;
  }

  .cg-store-track {
    margin-left: -24px !important;
    margin-right: -24px !important;
    padding-left: 0 !important;
    padding-right: 24px !important;
    padding-top: 4px !important;
    padding-bottom: 20px !important;
    gap: 16px !important;
    scroll-padding-left: 24px !important;
  }

  .cg-store-track::before {
    content: '' !important;
    display: block !important;
    flex: 0 0 24px !important;
    width: 24px !important;
    height: 1px !important;
  }

  .cg-store-card {
    flex: 0 0 290px !important;
    max-width: 82vw !important;
    border-radius: 20px !important;
  }

  /* Catalog Shop Page Responsive - Tablet (max-width: 991px) */
  .cg-shop-toolbar {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 16px !important;
  }

  .cg-shop-toolbar-actions {
    width: 100% !important;
    justify-content: space-between !important;
  }

  .cg-product-grid-v2 {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 20px !important;
  }
}

@media (max-width: 576px) {

  /* Section Padding for small screens */
  .cg-hero-header,
  .cg-hero-section,
  .cg-trusted-by-section,
  .cg-approach-section,
  .cg-offer-section,
  .cg-sketches-section,
  .cg-books-section,
  .cg-store-section,
  .cg-yt-section,
  .cg-podcast-section,
  .cg-ig-section,
  .cg-testimonials-section,
  .cg-blogs-section {
    padding-left: 16px !important;
    padding-right: 16px !important;
  }

  /* Visual Library (Sketches) Section - Small Mobile */
  .cg-sketches-section {
    padding-top: 36px !important;
    padding-bottom: 36px !important;
    padding-left: 16px !important;
    padding-right: 16px !important;
  }

  .cg-sketches-header {
    margin-bottom: 24px !important;
  }

  .cg-sketches-title-text h2 {
    font-size: 28px !important;
    line-height: 1.05 !important;
  }

  .cg-sketches-header-img {
    height: 95px !important;
    max-width: 90px !important;
  }

  .cg-sketches-subtitle {
    font-size: 13px !important;
  }

  .cg-sketches-chips {
    margin-left: -16px !important;
    margin-right: -16px !important;
    padding-left: 0 !important;
    padding-right: 16px !important;
    margin-bottom: 20px !important;
  }

  .cg-sketches-chips::before {
    flex: 0 0 16px !important;
    width: 16px !important;
  }

  .sketch-filter-chip {
    font-size: 11px !important;
    padding: 7px 14px !important;
  }

  .cg-sketches-track {
    margin-left: -16px !important;
    margin-right: -16px !important;
    padding-left: 0 !important;
    padding-right: 16px !important;
    gap: 12px !important;
    scroll-snap-type: x mandatory;
    scroll-padding-left: 16px !important;
  }

  .cg-sketches-track::before {
    flex: 0 0 16px !important;
    width: 16px !important;
  }

  .sketch-card {
    flex: 0 0 220px !important;
    height: 190px !important;
    scroll-snap-align: start;
    border-radius: 14px !important;
  }

  /* Sketch Lightbox Responsiveness */
  #sketch-lightbox {
    padding: 48px 16px 24px !important;
  }

  #sketch-lightbox>div:last-child {
    width: 100% !important;
  }

  #sketch-lightbox-image {
    border-radius: 12px !important;
    margin-bottom: 16px !important;
  }

  #sketch-lightbox>div:last-child>div:last-child {
    padding: 20px 16px !important;
    border-radius: 12px !important;
  }

  #sketch-lightbox-title {
    font-size: 22px !important;
    margin-bottom: 12px !important;
  }

  #sketch-lightbox-description {
    font-size: 15px !important;
    line-height: 1.5 !important;
  }

  /* Hero Title */
  .cg-hero-title {
    font-size: 32px !important;
    margin-bottom: 16px !important;
  }

  /* Stats Strip grid 2-cols on small mobile */
  .cg-hero-stats-strip {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 10px !important;
    margin: 16px 14px 20px 14px !important;
    padding: 12px !important;
    border-radius: 16px !important;
  }

  .cg-stat-box {
    padding: 10px 6px !important;
    border-radius: 12px !important;
  }

  .cg-stat-box span:first-child,
  .cg-stat-box [id^="stat-num-"] {
    font-size: 22px !important;
  }

  .cg-stat-box span:last-child {
    font-size: 10px !important;
  }

  /* CTA Buttons full width */
  .cg-hero-cta-group {
    flex-direction: column !important;
    width: 100% !important;
    gap: 10px !important;
  }

  .cg-hero-cta-group a,
  .cg-hero-cta-group button {
    width: 100% !important;
    justify-content: center !important;
  }

  /* Grids: 2-cols to 1-col on mobile (excluding offer-grid, yt-grid, podcast-grid, ig-grid and blogs-grid) */
  .cg-books-grid {
    grid-template-columns: 1fr !important;
  }

  /* Published Works (Books) Section - Small Mobile (<576px) */
  .cg-books-section {
    padding-top: 36px !important;
    padding-bottom: 48px !important;
    padding-left: 16px !important;
    padding-right: 16px !important;
  }

  .cg-books-header {
    margin-bottom: 24px !important;
  }

  .cg-books-header-left {
    gap: 12px !important;
  }

  .cg-books-title {
    font-size: 28px !important;
    line-height: 1.05 !important;
    letter-spacing: -0.5px !important;
  }

  .cg-books-header-img {
    height: 105px !important;
    max-width: 95px !important;
  }

  .cg-books-subtitle {
    font-size: 13px !important;
    line-height: 1.5 !important;
  }

  .cg-books-grid {
    grid-template-columns: 1fr !important;
    gap: 16px !important;
  }

  .cg-books-grid .book-card {
    height: 420px !important;
    border-radius: 16px !important;
  }

  .cg-book-badges {
    top: 12px !important;
    left: 12px !important;
    gap: 6px !important;
  }

  .cg-book-badges>div {
    padding: 4px 10px !important;
  }

  .cg-book-badges span {
    font-size: 9px !important;
    letter-spacing: 1.5px !important;
  }

  .cg-book-arrow-btn {
    top: 12px !important;
    right: 12px !important;
    width: 30px !important;
    height: 30px !important;
    font-size: 13px !important;
  }

  .cg-book-card-overlay {
    padding: 50px 18px 20px !important;
  }

  .cg-book-card-title {
    font-size: 19px !important;
    margin-bottom: 2px !important;
  }

  .cg-book-card-hint {
    font-size: 11px !important;
    margin-bottom: 14px !important;
  }

  .cg-book-card-price {
    font-size: 24px !important;
  }

  .cg-book-card-btn {
    font-size: 12px !important;
    padding: 10px 18px !important;
    border-radius: 8px !important;
  }

  /* Book Lightbox Mobile Modal */
  #book-lightbox {
    padding: 48px 16px 24px !important;
  }

  #book-lightbox-title {
    font-size: 24px !important;
    margin-bottom: 8px !important;
  }

  #book-lightbox-price {
    font-size: 20px !important;
    margin-bottom: 16px !important;
  }

  #book-lightbox-description {
    font-size: 15px !important;
    line-height: 1.5 !important;
    margin-bottom: 24px !important;
  }

  #book-lightbox-link {
    width: 100% !important;
    justify-content: center !important;
    font-size: 14px !important;
    padding: 12px 20px !important;
  }

  /* What I Offer Section - Mobile 2 Column View (2 rows of 2) */
  .cg-offer-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 10px !important;
  }

  .offer-card {
    border-radius: 16px !important;
  }

  .offer-card>div:first-child {
    padding: 12px 12px 0 !important;
  }

  .offer-card>div:first-child span:first-child {
    font-size: 11px !important;
  }

  .offer-card>div:first-child span:last-child {
    width: 26px !important;
    height: 26px !important;
    font-size: 12px !important;
  }

  .offer-card>div:nth-child(2) {
    padding: 8px 10px 4px !important;
  }

  .offer-card>div:nth-child(2) img {
    max-width: 120px !important;
  }

  .offer-card>div:nth-child(3) {
    padding: 10px 12px 16px !important;
    display: flex !important;
    flex-direction: column !important;
  }

  .offer-card h3 {
    font-size: 15px !important;
    line-height: 1.2 !important;
    margin-bottom: 6px !important;
  }

  .offer-card p {
    font-size: 12px !important;
    line-height: 1.4 !important;
    margin-bottom: 12px !important;
  }

  .offer-card a,
  .offer-card button {
    font-size: 11px !important;
    padding: 7px 10px !important;
    width: 100% !important;
    justify-content: center !important;
    text-align: center !important;
    box-sizing: border-box !important;
  }

  /* Sketches track horizontal scroll optimization */
  .cg-sketches-chips {
    overflow-x: auto !important;
    padding-bottom: 8px !important;
    -webkit-overflow-scrolling: touch;
  }

  /* Substack CTA strip stacking */
  .cg-substack-cta-strip {
    flex-direction: column !important;
    align-items: flex-start !important;
    padding: 28px 24px !important;
  }

  .cg-substack-cta-strip a {
    width: 100% !important;
    justify-content: center !important;
  }

  /* Approach Section (Who I Am) - Small Mobile */
  .cg-approach-section {
    padding-top: 36px !important;
    padding-bottom: 36px !important;
  }

  .cg-approach-img-wrapper {
    max-width: 100% !important;
    border-radius: 12px !important;
  }

  .cg-approach-intro-img {
    border-radius: 12px !important;
  }

  .cg-approach-zoom-icon {
    width: 44px !important;
    height: 44px !important;
  }

  .cg-approach-text-col {
    padding: 4px 0 16px 0 !important;
  }

  .cg-approach-title {
    font-size: 28px !important;
    margin-bottom: 20px !important;
  }

  .cg-approach-subheading {
    font-size: 18px !important;
  }

  .cg-approach-desc {
    font-size: 14px !important;
  }

  .cg-approach-cta {
    width: 100% !important;
    max-width: 280px !important;
    justify-content: center !important;
  }

  .cg-approach-character-img {
    width: 170px !important;
  }

  /* Front Page Store Section - Small Mobile (<576px) */
  .cg-store-section {
    padding-top: 36px !important;
    padding-bottom: 48px !important;
    padding-left: 16px !important;
    padding-right: 16px !important;
  }

  .cg-store-header-wrap {
    margin-bottom: 24px !important;
  }

  .cg-store-title {
    font-size: 28px !important;
    line-height: 1.05 !important;
    letter-spacing: -0.5px !important;
  }

  .cg-store-header-img {
    height: 95px !important;
    max-width: 90px !important;
  }

  .cg-store-subtitle {
    font-size: 13px !important;
    line-height: 1.5 !important;
  }

  .cg-store-cta-btn {
    font-size: 12px !important;
    padding: 10px 18px !important;
    width: 100% !important;
    justify-content: center !important;
  }

  .cg-store-track {
    margin-left: -16px !important;
    margin-right: -16px !important;
    padding-left: 0 !important;
    padding-right: 16px !important;
    gap: 14px !important;
    scroll-snap-type: x mandatory;
    scroll-padding-left: 16px !important;
  }

  .cg-store-track::before {
    flex: 0 0 16px !important;
    width: 16px !important;
  }

  .cg-store-card {
    flex: 0 0 270px !important;
    max-width: 82vw !important;
    scroll-snap-align: start;
    border-radius: 18px !important;
  }

  .cg-store-card-img {
    height: 180px !important;
  }

  .cg-store-card-body {
    padding: 18px 18px 20px !important;
  }

  .cg-store-card-title {
    font-size: 18px !important;
    margin-bottom: 12px !important;
  }

  .cg-store-price-main {
    font-size: 24px !important;
  }

  .cg-store-add-cart-btn {
    font-size: 13px !important;
    padding: 12px 16px !important;
    border-radius: 12px !important;
  }

  /* Catalog Shop Page Responsive - Small Mobile (<576px) */
  .cg-shop-hero-v2 {
    padding: 48px 16px 36px !important;
  }

  .cg-shop-hero-title {
    font-size: 28px !important;
  }

  .cg-shop-hero-subtitle {
    font-size: 15px !important;
    margin-bottom: 24px !important;
  }

  .cg-hero-feat-pill,
  .cg-cat-pill-v2 {
    font-size: 11px !important;
    padding: 7px 14px !important;
  }

  .cg-shop-toolbar {
    margin-bottom: 24px !important;
    padding-bottom: 16px !important;
  }

  .cg-shop-toolbar-actions {
    flex-direction: column !important;
    gap: 12px !important;
    align-items: stretch !important;
  }

  .cg-shop-search-form {
    width: 100% !important;
  }

  .cg-shop-search-input {
    width: 100% !important;
    box-sizing: border-box !important;
  }

  .cg-shop-search-input:focus {
    width: 100% !important;
  }

  .cg-shop-ordering-wrap {
    width: 100% !important;
  }

  .cg-shop-ordering-wrap select.orderby {
    width: 100% !important;
    box-sizing: border-box !important;
  }

  .cg-product-grid-v2 {
    grid-template-columns: 1fr !important;
    gap: 18px !important;
  }

  .cg-card-thumb-link {
    height: 200px !important;
  }

  .cg-shop-callout-card {
    flex-direction: column !important;
    align-items: flex-start !important;
    text-align: left !important;
    gap: 18px !important;
  }

  .cg-callout-text h3 {
    font-size: 22px !important;
  }

  .cg-callout-btn {
    width: 100% !important;
    text-align: center !important;
    justify-content: center !important;
  }
}

/* ═══════════════════════════════════════════════════════════════════════════
   MOBILE HAMBURGER MENU & OFFCANVAS DRAWER STYLES
   ═══════════════════════════════════════════════════════════════════════════ */

/* Mobile Hamburger Button Trigger */
.cg-mobile-menu-trigger {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 999px;
  background: #FFDF00;
  color: #000000;
  border: none;
  cursor: pointer;
  box-shadow: 0 4px 14px rgba(255, 223, 0, 0.4);
  transition: all 0.25s ease;
  flex-shrink: 0;
  padding: 0;
}

.cg-mobile-menu-trigger:hover,
.cg-mobile-menu-trigger:focus {
  background: #ffe633;
  transform: scale(1.05);
  box-shadow: 0 6px 18px rgba(255, 223, 0, 0.55);
}

/* Offcanvas Mobile Menu Drawer Container */
.cg-mobile-menu-offcanvas {
  width: 320px !important;
  max-width: 85vw !important;
  background: #0d1117 !important;
  /* Sleek dark mode */
  color: #ffffff !important;
  border-left: 1px solid rgba(255, 223, 0, 0.2) !important;
  box-shadow: -10px 0 30px rgba(0, 0, 0, 0.5) !important;
}

.cg-mobile-menu-offcanvas .offcanvas-header {
  background: #161b22;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1) !important;
  padding: 16px 20px !important;
}

.cg-mobile-menu-offcanvas .btn-close {
  filter: invert(1) grayscale(100%) brightness(200%);
  opacity: 0.8;
  transition: opacity 0.2s ease, transform 0.2s ease;
}

.cg-mobile-menu-offcanvas .btn-close:hover {
  opacity: 1;
  transform: scale(1.1);
}

/* Navigation Items inside Mobile Menu */
.cloudgirl-mobile-nav-container {
  width: 100%;
}

.cloudgirl-mobile-nav {
  list-style: none !important;
  padding: 0 !important;
  margin: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 6px !important;
}

.cloudgirl-mobile-nav li {
  margin: 0 !important;
  padding: 0 !important;
  width: 100% !important;
}

.cloudgirl-mobile-nav li a {
  display: block !important;
  font-family: 'Gochi Hand', cursive !important;
  font-size: 21px !important;
  font-weight: 700 !important;
  letter-spacing: 1.5px !important;
  color: rgba(255, 255, 255, 0.9) !important;
  text-decoration: none !important;
  padding: 10px 16px !important;
  border-radius: 12px !important;
  text-transform: uppercase !important;
  transition: all 0.2s ease !important;
}

.cloudgirl-mobile-nav li a:hover,
.cloudgirl-mobile-nav li.current-menu-item a,
.cloudgirl-mobile-nav li.current-page-ancestor a {
  background: #FFDF00 !important;
  color: #000000 !important;
  box-shadow: 0 4px 15px rgba(255, 223, 0, 0.35) !important;
  transform: translateX(4px);
}

/* Submenu inside Mobile Menu */
.cloudgirl-mobile-nav .sub-menu {
  list-style: none !important;
  padding-left: 16px !important;
  margin-top: 4px !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 4px !important;
}

.cloudgirl-mobile-nav .sub-menu li a {
  font-size: 17px !important;
  padding: 8px 14px !important;
}

/* Footer Section inside Mobile Menu */
.cg-mobile-social-label {
  font-family: 'Gochi Hand', cursive;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 2px;
  color: rgba(255, 255, 255, 0.5);
  text-transform: uppercase;
  margin: 0 0 12px 0;
}

.cg-mobile-social-icons {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}

.cg-mobile-social-icons a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  transition: transform 0.2s ease, filter 0.2s ease;
}

.cg-mobile-social-icons a:hover {
  transform: scale(1.15);
  filter: drop-shadow(0 4px 8px rgba(255, 255, 255, 0.3));
}

/* ==========================================================================
   YOUTUBE & PODCAST MOBILE RESPONSIVE & HORIZONTAL ROW SCROLLING
   ========================================================================== */

/* Tablet (max-width: 991px) */
@media (max-width: 991px) {

  .cg-yt-section,
  .cg-podcast-section {
    padding-top: 48px !important;
    padding-bottom: 64px !important;
    padding-left: 28px !important;
    padding-right: 28px !important;
  }

  .cg-yt-header,
  .cg-podcast-header {
    margin-bottom: 36px !important;
    gap: 20px !important;
  }

  .cg-yt-title,
  .cg-podcast-title {
    font-size: clamp(30px, 5vw, 42px) !important;
  }

  .cg-yt-header-img {
    height: 130px !important;
  }
}

/* Mobile Screens (max-width: 767px): Horizontal Row Scrolling */
@media (max-width: 767px) {

  .cg-yt-section,
  .cg-podcast-section {
    padding-top: 32px !important;
    padding-bottom: 40px !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    overflow: hidden !important;
  }

  .cg-yt-dots,
  .cg-podcast-dots {
    display: none !important;
  }

  .cg-yt-header,
  .cg-podcast-header {
    padding-left: 20px !important;
    padding-right: 20px !important;
    margin-bottom: 20px !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 14px !important;
  }

  .cg-yt-header-left,
  .cg-podcast-header-left {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: space-between !important;
    width: 100% !important;
    gap: 12px !important;
  }

  .cg-yt-subtitle,
  .cg-podcast-subtitle {
    font-size: 10px !important;
    letter-spacing: 2px !important;
    margin-bottom: 4px !important;
  }

  .cg-yt-title,
  .cg-podcast-title {
    font-size: clamp(22px, 6vw, 28px) !important;
    line-height: 1.15 !important;
    letter-spacing: -0.5px !important;
  }

  .cg-yt-header-img {
    height: 75px !important;
    max-width: 75px !important;
  }

  .cg-podcast-header-badge {
    width: 44px !important;
    height: 44px !important;
  }

  .cg-yt-header-right,
  .cg-podcast-header-right {
    width: 100% !important;
  }

  .cg-yt-channel-btn,
  .cg-podcast-channel-btn {
    display: inline-flex !important;
    font-size: 12px !important;
    padding: 9px 16px !important;
  }

  /* Horizontal Scrolling Row for Videos */
  .cg-yt-grid,
  .cg-podcast-grid {
    display: flex !important;
    flex-direction: row !important;
    grid-template-columns: none !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    scroll-snap-type: x mandatory !important;
    scroll-padding-left: 20px !important;
    -webkit-overflow-scrolling: touch !important;
    padding-left: 20px !important;
    padding-right: 20px !important;
    padding-bottom: 18px !important;
    padding-top: 4px !important;
    gap: 14px !important;
    width: 100% !important;
    box-sizing: border-box !important;
    scrollbar-width: none !important;
    /* Firefox */
  }

  .cg-yt-grid::-webkit-scrollbar,
  .cg-podcast-grid::-webkit-scrollbar {
    display: none !important;
    /* Chrome / Safari */
  }

  .cg-yt-card,
  .cg-podcast-card {
    flex: 0 0 78vw !important;
    max-width: 280px !important;
    min-width: 240px !important;
    scroll-snap-align: start !important;
    scroll-snap-stop: always !important;
    scroll-margin-left: 20px !important;
    height: auto !important;
    box-sizing: border-box !important;
    border-radius: 16px !important;
  }

  /* Card internal spacing & title font size fix */
  .cg-yt-card>div:first-child,
  .cg-podcast-card>div:first-child {
    padding: 14px 16px 0 !important;
  }

  .cg-yt-card>div:nth-child(2),
  .cg-podcast-card>div:nth-child(2) {
    margin: 10px 12px !important;
    border-radius: 10px !important;
  }

  .cg-yt-card>div:last-child,
  .cg-podcast-card>div:last-child {
    padding: 6px 16px 18px !important;
    gap: 10px !important;
  }

  .cg-yt-card h3,
  .cg-podcast-card h3 {
    font-size: 14px !important;
    line-height: 1.35 !important;
    -webkit-line-clamp: 2 !important;
    margin: 0 !important;
  }

  .cg-yt-card a,
  .cg-podcast-card a {
    font-size: 11px !important;
    padding: 6px 14px !important;
  }
}

/* Extra Small Screens (max-width: 480px) */
@media (max-width: 480px) {

  .cg-yt-header,
  .cg-podcast-header {
    padding-left: 16px !important;
    padding-right: 16px !important;
  }

  .cg-yt-grid,
  .cg-podcast-grid {
    padding-left: 16px !important;
    padding-right: 16px !important;
    scroll-padding-left: 16px !important;
    gap: 12px !important;
  }

  .cg-yt-card,
  .cg-podcast-card {
    flex: 0 0 80vw !important;
    max-width: 260px !important;
    min-width: 230px !important;
    scroll-margin-left: 16px !important;
  }

  .cg-yt-header-img {
    height: 65px !important;
    max-width: 65px !important;
  }
}

/* ═══════════════════════════════════════════════════════════════════════════
   INSTAGRAM SECTION - MOBILE & TABLET HORIZONTAL SCROLL RESPONSIVENESS
   ═══════════════════════════════════════════════════════════════════════════ */

@media (max-width: 991.98px) {
  .cg-ig-section {
    padding-top: 48px !important;
    padding-bottom: 56px !important;
    padding-left: 24px !important;
    padding-right: 24px !important;
  }

  .cg-ig-header {
    margin-bottom: 32px !important;
    flex-wrap: wrap !important;
    gap: 20px !important;
  }

  .cg-ig-header-left {
    display: flex !important;
    align-items: center !important;
    gap: 20px !important;
  }

  .cg-ig-title {
    font-size: clamp(32px, 5vw, 44px) !important;
  }

  .cg-ig-header-img {
    height: 140px !important;
    margin: 0 !important;
  }

  .cg-ig-grid {
    grid-template-columns: repeat(3, 1fr) !important;
    grid-template-rows: auto !important;
    gap: 16px !important;
  }

  .cg-ig-grid .ig-cell {
    grid-column: auto !important;
    grid-row: auto !important;
    height: 260px !important;
  }
}

/* Mobile Screens (max-width: 767.98px): Horizontal Scrolling Row */
@media (max-width: 767.98px) {
  .cg-ig-section {
    padding-top: 32px !important;
    padding-bottom: 40px !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    overflow: hidden !important;
  }

  .cg-ig-header {
    padding-left: 20px !important;
    padding-right: 20px !important;
    margin-bottom: 20px !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 14px !important;
  }

  .cg-ig-header-left {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: space-between !important;
    width: 100% !important;
    gap: 12px !important;
  }

  .cg-ig-eyebrow-text {
    font-size: 10px !important;
    letter-spacing: 2px !important;
  }

  .cg-ig-title {
    font-size: clamp(22px, 6vw, 28px) !important;
    line-height: 1.15 !important;
    letter-spacing: -0.5px !important;
  }

  .cg-ig-header-img {
    height: 75px !important;
    max-width: 75px !important;
    margin: 0 !important;
    align-self: center !important;
  }

  .cg-ig-header-right {
    width: 100% !important;
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 12px !important;
  }

  .cg-ig-subtitle {
    font-size: 13px !important;
    text-align: left !important;
    max-width: 180px !important;
    line-height: 1.4 !important;
    color: rgba(255, 255, 255, 0.6) !important;
  }

  .cg-ig-profile-btn {
    font-size: 12px !important;
    padding: 10px 18px !important;
    white-space: nowrap !important;
    flex-shrink: 0 !important;
  }

  /* Horizontal Scrolling Row for Instagram Grid */
  .cg-ig-grid {
    display: flex !important;
    flex-direction: row !important;
    grid-template-columns: none !important;
    grid-template-rows: none !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    scroll-snap-type: x mandatory !important;
    scroll-padding-left: 20px !important;
    -webkit-overflow-scrolling: touch !important;
    padding-left: 20px !important;
    padding-right: 20px !important;
    padding-bottom: 18px !important;
    padding-top: 4px !important;
    gap: 14px !important;
    width: 100% !important;
    box-sizing: border-box !important;
    scrollbar-width: none !important;
    /* Firefox */
  }

  .cg-ig-grid::-webkit-scrollbar {
    display: none !important;
    /* Chrome / Safari */
  }

  .cg-ig-grid .ig-cell {
    flex: 0 0 74vw !important;
    max-width: 270px !important;
    min-width: 220px !important;
    height: 340px !important;
    grid-column: auto !important;
    grid-row: auto !important;
    scroll-snap-align: start !important;
    scroll-snap-stop: always !important;
    scroll-margin-left: 20px !important;
    border-radius: 18px !important;
    box-shadow: 0 10px 28px rgba(0, 0, 0, 0.35) !important;
    position: relative !important;
    overflow: hidden !important;
  }

  .cg-ig-grid .ig-cell .ig-overlay {
    opacity: 1 !important;
    background: linear-gradient(to top, rgba(4, 25, 27, 0.96) 0%, rgba(4, 25, 27, 0.65) 50%, rgba(4, 25, 27, 0) 82%) !important;
    justify-content: flex-end !important;
    align-items: flex-start !important;
    padding: 16px 14px !important;
    gap: 6px !important;
  }

  .cg-ig-grid .ig-cell .ig-overlay>span:first-child {
    font-size: 9px !important;
    padding: 4px 10px !important;
    background: rgba(214, 36, 159, 0.35) !important;
    border: 1px solid rgba(255, 255, 255, 0.3) !important;
    backdrop-filter: blur(4px) !important;
    color: #fff !important;
  }

  .cg-ig-grid .ig-cell .ig-overlay p {
    font-size: 13.5px !important;
    text-align: left !important;
    margin: 2px 0 !important;
    max-width: 100% !important;
    line-height: 1.25 !important;
    display: -webkit-box !important;
    -webkit-line-clamp: 2 !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
  }

  .cg-ig-grid .ig-cell .ig-overlay>div {
    display: flex !important;
    justify-content: space-between !important;
    width: 100% !important;
    margin-top: 2px !important;
  }

  .cg-ig-grid .ig-cell .ig-overlay a {
    display: none !important;
  }
}

/* Extra Small Screens (max-width: 480px) */
@media (max-width: 480px) {
  .cg-ig-header {
    padding-left: 16px !important;
    padding-right: 16px !important;
  }

  .cg-ig-grid {
    padding-left: 16px !important;
    padding-right: 16px !important;
    scroll-padding-left: 16px !important;
    gap: 12px !important;
  }

  .cg-ig-grid .ig-cell {
    flex: 0 0 78vw !important;
    max-width: 250px !important;
    min-width: 210px !important;
    height: 320px !important;
    scroll-margin-left: 16px !important;
  }
}

/* ==========================================================================
   LATEST BLOGS & SUBSTACK BLOGS MOBILE RESPONSIVE & HORIZONTAL ROW SCROLLING
   ========================================================================== */

/* Base Desktop Grid for Blogs & Substack */
.cg-blogs-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
  position: relative;
  z-index: 1;
}

/* Tablet (max-width: 991px) */
@media (max-width: 991px) {
  .cg-blogs-section {
    padding-top: 48px !important;
    padding-bottom: 64px !important;
    padding-left: 28px !important;
    padding-right: 28px !important;
  }

  .cg-blogs-header {
    margin-bottom: 36px !important;
    gap: 20px !important;
    flex-wrap: wrap !important;
  }

  .cg-blogs-header-left,
  .cg-substack-header-left {
    display: flex !important;
    align-items: center !important;
    gap: 20px !important;
  }

  .cg-blogs-title,
  .cg-substack-title {
    font-size: clamp(30px, 5vw, 42px) !important;
    line-height: 1.05 !important;
  }

  .cg-blogs-header-img,
  .cg-substack-header-img {
    height: 130px !important;
    max-width: 130px !important;
  }

  .cg-blogs-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 16px !important;
  }

  .cg-substack-cta-strip {
    padding: 32px 36px !important;
  }
}

/* Mobile Screens (max-width: 767.98px): Horizontal Row Scrolling & Header Stacking */
@media (max-width: 767.98px) {
  .cg-blogs-section {
    padding-top: 32px !important;
    padding-bottom: 40px !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    overflow: hidden !important;
  }

  /* Hide static background dot grids and sparkles on small screens */
  .cg-blogs-section > div[style*="position: absolute"],
  .cg-blogs-dot-grid,
  .cg-substack-dot-grid-1,
  .cg-substack-dot-grid-2 {
    display: none !important;
  }

  .cg-blogs-header {
    padding-left: 20px !important;
    padding-right: 20px !important;
    margin-bottom: 20px !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 14px !important;
  }

  .cg-blogs-header-left,
  .cg-substack-header-left {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: space-between !important;
    width: 100% !important;
    gap: 12px !important;
  }

  .cg-blogs-badge-wrap,
  .cg-substack-badge-wrap {
    margin-bottom: 4px !important;
  }

  .cg-blogs-badge-text,
  .cg-substack-badge-text,
  .cg-substack-eyebrow {
    font-size: 10px !important;
    letter-spacing: 2px !important;
  }

  .cg-blogs-title,
  .cg-substack-title {
    font-size: clamp(22px, 6vw, 28px) !important;
    line-height: 1.15 !important;
    letter-spacing: -0.5px !important;
  }

  .cg-blogs-header-img,
  .cg-substack-header-img {
    height: 75px !important;
    max-width: 75px !important;
    margin: 0 !important;
    align-self: center !important;
  }

  .cg-blogs-header-right,
  .cg-substack-header-right {
    width: 100% !important;
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 12px !important;
  }

  .cg-blogs-subtitle,
  .cg-substack-subtitle {
    font-size: 13px !important;
    text-align: left !important;
    max-width: 180px !important;
    line-height: 1.4 !important;
    color: rgba(0, 0, 0, 0.5) !important;
    margin: 0 !important;
  }

  .cg-blogs-all-btn,
  .cg-substack-all-btn {
    font-size: 12px !important;
    padding: 9px 16px !important;
    white-space: nowrap !important;
    flex-shrink: 0 !important;
  }

  /* Horizontal Scroll Grid Row for Blogs & Substack */
  .cg-blogs-grid {
    display: flex !important;
    flex-direction: row !important;
    grid-template-columns: none !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    scroll-snap-type: x mandatory !important;
    scroll-padding-left: 20px !important;
    -webkit-overflow-scrolling: touch !important;
    padding-left: 20px !important;
    padding-right: 20px !important;
    padding-bottom: 18px !important;
    padding-top: 4px !important;
    gap: 14px !important;
    width: 100% !important;
    box-sizing: border-box !important;
    scrollbar-width: none !important;
  }

  .cg-blogs-grid::-webkit-scrollbar {
    display: none !important;
  }

  .cg-blog-card {
    flex: 0 0 78vw !important;
    max-width: 280px !important;
    min-width: 240px !important;
    scroll-snap-align: start !important;
    scroll-snap-stop: always !important;
    scroll-margin-left: 20px !important;
    height: auto !important;
    box-sizing: border-box !important;
    border-radius: 18px !important;
  }

  .cg-blog-card-thumb {
    height: 160px !important;
  }

  .cg-blog-card-body {
    padding: 16px 18px 20px !important;
    gap: 8px !important;
  }

  .cg-blog-card-title {
    font-size: 15px !important;
    line-height: 1.3 !important;
    display: -webkit-box !important;
    -webkit-line-clamp: 3 !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
  }

  .cg-blog-card-link {
    font-size: 12px !important;
    margin-top: auto !important;
  }

  /* Substack CTA strip mobile layout */
  .cg-substack-cta-strip {
    margin-top: 28px !important;
    margin-left: 20px !important;
    margin-right: 20px !important;
    padding: 24px 20px !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 16px !important;
    border-radius: 20px !important;
  }

  .cg-substack-cta-title {
    font-size: clamp(18px, 5vw, 22px) !important;
    line-height: 1.2 !important;
  }

  .cg-substack-cta-btn,
  .cg-substack-cta-strip a {
    width: 100% !important;
    justify-content: center !important;
    font-size: 13px !important;
    padding: 12px 20px !important;
    text-align: center !important;
    box-sizing: border-box !important;
  }

  /* Kind Words (Testimonials) Section Mobile View */
  .cg-testimonials-section {
    padding-top: 36px !important;
    padding-bottom: 44px !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    overflow: hidden !important;
  }

  .cg-testimonials-header {
    padding-left: 20px !important;
    padding-right: 20px !important;
    margin-bottom: 24px !important;
    gap: 14px !important;
    flex-direction: column !important;
    align-items: flex-start !important;
  }

  .cg-testimonials-header-left {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: space-between !important;
    width: 100% !important;
    gap: 16px !important;
  }

  .cg-testimonials-badge {
    font-size: 10px !important;
    letter-spacing: 2px !important;
    margin-bottom: 8px !important;
  }

  .cg-testimonials-title {
    font-size: clamp(24px, 6.5vw, 34px) !important;
    line-height: 1.0 !important;
    letter-spacing: -1px !important;
  }

  .cg-testimonials-header-img {
    height: 95px !important;
    max-width: 105px !important;
    margin: 0 !important;
    align-self: center !important;
  }

  .cg-testimonials-subtitle {
    font-size: 13px !important;
    text-align: left !important;
    max-width: 100% !important;
    line-height: 1.5 !important;
    color: rgba(255, 255, 255, 0.45) !important;
  }

  /* Featured Testimonial Card Mobile */
  .cg-featured-testimonial-card {
    margin-left: 20px !important;
    margin-right: 20px !important;
    padding: 28px 20px !important;
    grid-template-columns: 1fr !important;
    gap: 20px !important;
    border-radius: 20px !important;
    margin-bottom: 20px !important;
    box-sizing: border-box !important;
  }

  .cg-testimonial-quote-mark {
    font-size: 64px !important;
    top: 14px !important;
    left: 18px !important;
  }

  .cg-featured-testimonial-content {
    font-size: 17px !important;
    line-height: 1.45 !important;
    margin-bottom: 20px !important;
    letter-spacing: -0.3px !important;
  }

  .cg-featured-testimonial-author-row {
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
    flex-wrap: wrap !important;
  }

  .cg-featured-testimonial-avatar {
    width: 44px !important;
    height: 44px !important;
  }

  .cg-featured-testimonial-name {
    font-size: 15px !important;
  }

  .cg-featured-testimonial-role {
    font-size: 12px !important;
  }

  .cg-featured-testimonial-badge {
    padding: 6px 14px !important;
    margin-left: auto !important;
  }

  .cg-featured-testimonial-badge span {
    font-size: 10px !important;
    letter-spacing: 1.5px !important;
  }

  .cg-featured-testimonial-rating {
    flex-direction: row !important;
    align-items: center !important;
    justify-content: space-between !important;
    width: 100% !important;
    border-top: 1px solid rgba(0, 0, 0, 0.1) !important;
    padding-top: 14px !important;
    margin-top: 2px !important;
  }

  .cg-featured-testimonial-stars span {
    font-size: 20px !important;
  }

  .cg-featured-testimonial-rating-score {
    font-size: 13px !important;
  }

  /* Horizontal Snap Scroll Row for Small Testimonial Cards */
  .cg-testimonials-grid {
    display: flex !important;
    flex-direction: row !important;
    grid-template-columns: none !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    scroll-snap-type: x mandatory !important;
    scroll-padding-left: 20px !important;
    -webkit-overflow-scrolling: touch !important;
    padding-left: 20px !important;
    padding-right: 20px !important;
    padding-bottom: 16px !important;
    padding-top: 4px !important;
    gap: 14px !important;
    width: 100% !important;
    box-sizing: border-box !important;
    scrollbar-width: none !important;
  }

  .cg-testimonials-grid::-webkit-scrollbar {
    display: none !important;
  }

  .cg-testimonial-card {
    flex: 0 0 82vw !important;
    max-width: 310px !important;
    min-width: 250px !important;
    scroll-snap-align: start !important;
    scroll-snap-stop: always !important;
    scroll-margin-left: 20px !important;
    padding: 24px 20px !important;
    border-radius: 18px !important;
    gap: 16px !important;
    box-sizing: border-box !important;
    height: auto !important;
  }

  .cg-small-quote-mark {
    font-size: 44px !important;
    margin-bottom: 4px !important;
  }

  .cg-small-testimonial-content {
    font-size: 14px !important;
    line-height: 1.55 !important;
  }

  .cg-small-testimonial-footer {
    gap: 10px !important;
  }

  .cg-small-testimonial-avatar {
    width: 38px !important;
    height: 38px !important;
  }

  .cg-small-testimonial-name {
    font-size: 13px !important;
  }

  .cg-small-testimonial-role {
    font-size: 11px !important;
  }

  .cg-small-testimonial-stars span {
    font-size: 12px !important;
  }
}

/* Extra Small Screens (max-width: 480px) */
@media (max-width: 480px) {
  .cg-blogs-header {
    padding-left: 16px !important;
    padding-right: 16px !important;
  }

  .cg-blogs-grid {
    padding-left: 16px !important;
    padding-right: 16px !important;
    scroll-padding-left: 16px !important;
    gap: 12px !important;
  }

  .cg-blog-card {
    flex: 0 0 80vw !important;
    max-width: 260px !important;
    min-width: 230px !important;
    scroll-margin-left: 16px !important;
  }

  .cg-blogs-header-img,
  .cg-substack-header-img {
    height: 65px !important;
    max-width: 65px !important;
  }

  .cg-substack-cta-strip {
    margin-left: 16px !important;
    margin-right: 16px !important;
    padding: 20px 16px !important;
  }

  /* Kind Words Section Small Mobile */
  .cg-testimonials-header {
    padding-left: 16px !important;
    padding-right: 16px !important;
  }

  .cg-testimonials-header-img {
    height: 75px !important;
    max-width: 85px !important;
  }

  .cg-featured-testimonial-card {
    margin-left: 16px !important;
    margin-right: 16px !important;
    padding: 22px 16px !important;
    border-radius: 18px !important;
  }

  .cg-testimonial-quote-mark {
    font-size: 54px !important;
    top: 10px !important;
    left: 14px !important;
  }

  .cg-featured-testimonial-content {
    font-size: 15px !important;
    margin-bottom: 16px !important;
  }

  .cg-testimonials-grid {
    padding-left: 16px !important;
    padding-right: 16px !important;
    scroll-padding-left: 16px !important;
    gap: 12px !important;
  }

  .cg-testimonial-card {
    flex: 0 0 85vw !important;
    max-width: 280px !important;
    min-width: 230px !important;
    scroll-margin-left: 16px !important;
    padding: 20px 16px !important;
  }
}








}