/* ── WooCommerce Custom Styles ─────────────────────── */
:root {
  --blue-50: #EFE6FF;
  --blue-100: #D4BBFF;
  --blue-200: #B99EFF;
  --blue-500: #7B5EA7;
  --blue-600: #6A4C93;
  --blue-700: #5C3D88;
  --blue-900: #2D1B5E;
  --gray-50: #F3F0FF;
  --gray-100: #EDE9FE;
  --gray-200: #DDE0E6;
  --gray-400: #9CA3AF;
  --gray-600: #4B5563;
  --gray-800: #1F2937;
  --gray-900: #111827;
  --white: #FAF8FF;
  --accent: #9B72CF;
  --font-display: 'DM Serif Display', Georgia, serif;
  --font-body: 'DM Sans', -apple-system, sans-serif;
  --radius: 10px;
  --radius-lg: 16px;
  /* Consistent product image background - matching BAC Water style */
  --product-bg: #F3EEFF;
}

body { font-family: var(--font-body); background: var(--white); color: var(--gray-800); }

/* ══════════════════════════════════════════
   PRODUCT CARD IMAGE - Homepage & Shop Grid
   ══════════════════════════════════════════ */
/* Homepage product cards */
.product-card .product-img {
  background: #F3EEFF !important;
  width: 100%;
  height: 240px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  overflow: hidden;
  position: relative;
  border-radius: 12px 12px 0 0;
  padding: 0 !important;
}

.product-card .product-img img,
.product-card .product-img img.attachment-medium,
.product-card .product-img img.wp-post-image {
  width: 100% !important;
  height: 240px !important;
  object-fit: contain !important;
  padding: 24px !important;
  margin: 0 !important;
  display: block !important;
  max-width: none !important;
  background: #F3EEFF !important;
}

/* WooCommerce shop archive grid */
.woocommerce ul.products li.product a img,
.woocommerce ul.products li.product img {
  width: 100% !important;
  height: 240px !important;
  object-fit: contain !important;
  padding: 24px !important;
  background: #F3EEFF !important;
  display: block !important;
  max-width: none !important;
}

/* Ensure archive product image container has consistent bg */
.woocommerce ul.products li.product a {
  display: block;
  background: #F3EEFF !important;
  overflow: hidden;
}

/* ══════════════════════════════════════════
   SINGLE PRODUCT PAGE IMAGE
   ══════════════════════════════════════════ */
.woocommerce div.product {
  max-width: 1160px;
  margin: 60px auto;
  padding: 0 2rem;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 64px;
  align-items: start;
}

.woocommerce div.product div.images {
  background: #F3EEFF !important;
  border-radius: 20px;
  overflow: hidden;
  border: 1px solid #D4BBFF;
  aspect-ratio: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 !important;
}

.woocommerce div.product div.images img,
.woocommerce div.product div.images .woocommerce-product-gallery img,
img.wp-post-image,
.woocommerce-product-gallery__image img {
  width: 100% !important;
  height: 100% !important;
  object-fit: contain !important;
  object-position: center !important;
  background: #F3EEFF !important;
  max-height: none !important;
  padding: 32px !important;
}

.woocommerce div.product div.images .woocommerce-product-gallery,
.woocommerce div.product div.images .woocommerce-product-gallery__wrapper,
.woocommerce div.product div.images figure,
.woocommerce-product-gallery,
.woocommerce-product-gallery__wrapper,
.woocommerce-product-gallery figure,
.woocommerce-product-gallery ol,
.woocommerce-product-gallery__image {
  background: #F3EEFF !important;
  background-image: none !important;
  width: 100% !important;
  height: 100% !important;
}

/* ── Product Title & Price ── */
.woocommerce div.product .product_title {
  font-family: 'DM Serif Display', Georgia, serif;
  font-size: 42px;
  color: #111827;
  line-height: 1.1;
  letter-spacing: -0.5px;
  margin-bottom: 8px;
}

.woocommerce div.product .woocommerce-product-details__short-description {
  font-size: 14px;
  color: #9CA3AF;
  margin-bottom: 20px;
  font-weight: 500;
}

.woocommerce div.product p.price,
.woocommerce div.product span.price {
  font-family: 'DM Serif Display', Georgia, serif;
  font-size: 36px;
  color: #111827;
  margin-bottom: 20px;
  display: block;
}

/* ── Buttons ── */
.woocommerce div.product form.cart .button,
.woocommerce #respond input#submit,
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button {
  background: #6A4C93 !important;
  color: white !important;
  font-family: 'DM Sans', sans-serif !important;
  font-size: 16px !important;
  font-weight: 600 !important;
  padding: 14px 32px !important;
  border-radius: 10px !important;
  border: none !important;
  cursor: pointer !important;
  transition: all 0.2s !important;
  width: 100% !important;
  text-align: center !important;
}

.woocommerce div.product form.cart .button:hover,
.woocommerce a.button:hover,
.woocommerce button.button:hover {
  background: #5C3D88 !important;
  transform: translateY(-1px) !important;
}

/* ── Cart Form ── */
.woocommerce div.product form.cart {
  display: flex;
  gap: 12px;
  align-items: center;
  margin-bottom: 20px;
}

.woocommerce div.product form.cart .qty {
  width: 70px !important;
  padding: 12px !important;
  border-radius: 8px !important;
  border: 1.5px solid #B99EFF !important;
  font-size: 16px !important;
  text-align: center !important;
  background: white !important;
}

/* ── Tabs ── */
.woocommerce div.product .woocommerce-tabs ul.tabs,
.woocommerce div.product ul.tabs.wc-tabs { display: none !important; }
.woocommerce div.product .woocommerce-tabs .panel h2 { display: none !important; }
.woocommerce div.product .woocommerce-tabs {
  max-width: 1160px;
  margin: 40px auto;
  padding: 0 2rem;
  grid-column: 1 / -1;
}

/* ── Breadcrumb ── */
.woocommerce .woocommerce-breadcrumb {
  max-width: 1160px;
  margin: 20px auto 0;
  padding: 0 2rem;
  font-size: 13px;
  color: #9CA3AF;
}
.woocommerce .woocommerce-breadcrumb a { color: #6A4C93; text-decoration: none; }

/* ══════════════════════════════════════════
   SHOP PAGE PRODUCT GRID
   ══════════════════════════════════════════ */
.woocommerce ul.products {
  max-width: 1160px;
  margin: 40px auto;
  padding: 0 2rem;
  display: grid !important;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)) !important;
  gap: 20px !important;
  list-style: none !important;
}

.woocommerce ul.products li.product {
  background: white;
  border: 1px solid #DDE0E6;
  border-radius: 16px;
  overflow: hidden;
  transition: transform 0.2s, box-shadow 0.2s;
  padding: 0 !important;
  margin: 0 !important;
  float: none !important;
  width: auto !important;
}

.woocommerce ul.products li.product:hover {
  transform: translateY(-4px);
  box-shadow: 0 16px 48px rgba(106,76,147,0.13);
  border-color: #D4BBFF;
}

.woocommerce ul.products li.product .woocommerce-loop-product__title {
  font-size: 16px;
  font-weight: 600;
  color: #111827;
  padding: 12px 16px 4px !important;
}

.woocommerce ul.products li.product .price {
  font-size: 20px;
  font-weight: 700;
  color: #111827;
  padding: 0 16px 12px !important;
  display: block;
}

.woocommerce ul.products li.product .button {
  margin: 0 16px 16px !important;
  width: calc(100% - 32px) !important;
  border-radius: 8px !important;
  padding: 10px !important;
  font-size: 14px !important;
}

/* ══════════════════════════════════════════
   PRODUCT CARD STYLES (Homepage/Custom)
   ══════════════════════════════════════════ */
.product-card {
  background: white;
  border: 1px solid #DDE0E6;
  border-radius: 16px;
  overflow: hidden;
  cursor: pointer;
  transition: transform 0.2s, box-shadow 0.2s, border-color 0.2s;
}

.product-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 16px 40px rgba(106,76,147,0.12);
  border-color: #D4BBFF;
}

.product-body {
  padding: 14px 16px 16px;
}

.product-name {
  font-size: 15px;
  font-weight: 600;
  color: #111827;
  margin-bottom: 10px;
  line-height: 1.3;
}

.product-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.product-price {
  font-family: 'DM Serif Display', Georgia, serif;
  font-size: 20px;
  color: #111827;
  font-weight: 700;
}

.product-size {
  font-size: 11px;
  color: #9CA3AF;
  margin-top: 2px;
}

.product-img-badge {
  position: absolute;
  top: 10px;
  left: 10px;
  background: #6A4C93;
  color: white;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.5px;
  padding: 4px 8px;
  border-radius: 5px;
  text-transform: uppercase;
  z-index: 2;
}

.add-btn {
  background: #6A4C93;
  color: white;
  border: none;
  padding: 9px 14px;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  text-decoration: none;
  white-space: nowrap;
  transition: background 0.2s;
  font-family: 'DM Sans', sans-serif;
}

.add-btn:hover { background: #5C3D88; }

/* ── Product Card Quantity Controls ── */
.product-price-row { margin-bottom: 10px; }
.product-card-actions {
  display: flex; align-items: center;
  gap: 8px; flex-direction: row;
}
.card-qty-row {
  display: flex; align-items: center; gap: 4px;
  background: #F9F7FF;
  border: 1.5px solid #DDE0E6;
  border-radius: 8px; padding: 3px;
  flex-shrink: 0;
}
.card-qty-btn {
  width: 28px; height: 28px; border: none;
  background: transparent; color: #4B5563;
  font-size: 16px; cursor: pointer; border-radius: 6px;
  display: flex; align-items: center; justify-content: center;
  line-height: 1; transition: background 0.15s; flex-shrink: 0;
}
.card-qty-btn:hover { background: #D4BBFF; color: #6A4C93; }
.card-qty-input {
  width: 28px; text-align: center; border: none;
  background: transparent; font-size: 13px;
  font-weight: 700; color: #111827; outline: none;
  -moz-appearance: textfield;
}
.card-qty-input::-webkit-inner-spin-button,
.card-qty-input::-webkit-outer-spin-button { -webkit-appearance: none; }
.card-add-btn { flex: 1; text-align: center; padding: 9px 10px; font-size: 13px; white-space: nowrap; }
/**
 * NuroPeptides — My Account Page Styling
 * Add this to your theme's woocommerce.css OR style.css
 * Located at: public_html/wp-content/themes/nuropeptides-theme/woocommerce.css
 *
 * This styles the WooCommerce My Account dashboard, login/register page,
 * orders, addresses, and account details to match the site's premium look.
 */

/* ============================================================
   MY ACCOUNT — PAGE WRAPPER
   ============================================================ */

.woocommerce-account .woocommerce {
    max-width: 1200px;
    margin: 60px auto 80px;
    padding: 0 24px;
}

.woocommerce-account .woocommerce-MyAccount-navigation,
.woocommerce-account .woocommerce-MyAccount-content {
    box-sizing: border-box;
}

/* ============================================================
   SIDEBAR NAVIGATION
   ============================================================ */

.woocommerce-account .woocommerce-MyAccount-navigation {
    width: 26%;
    float: left;
    padding-right: 0;
}

.woocommerce-account .woocommerce-MyAccount-navigation ul {
    background: #fff;
    border-radius: 16px;
    box-shadow: 0 4px 24px rgba(45, 27, 94, 0.08);
    padding: 12px;
    margin: 0;
    list-style: none;
    border: 1px solid rgba(123, 79, 191, 0.08);
}

.woocommerce-account .woocommerce-MyAccount-navigation ul li {
    margin: 0;
    padding: 0;
    list-style: none;
    border-bottom: 1px solid rgba(45, 27, 94, 0.05);
}

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

.woocommerce-account .woocommerce-MyAccount-navigation ul li a {
    display: block;
    padding: 14px 18px;
    color: #2D1B5E;
    text-decoration: none;
    font-size: 14.5px;
    font-weight: 500;
    border-radius: 10px;
    transition: all 0.2s ease;
    position: relative;
}

.woocommerce-account .woocommerce-MyAccount-navigation ul li a:hover {
    background: rgba(123, 79, 191, 0.08);
    color: #7B4FBF;
    transform: translateX(3px);
}

.woocommerce-account .woocommerce-MyAccount-navigation ul li.is-active a {
    background: linear-gradient(135deg, #7B4FBF 0%, #5A2FA8 100%);
    color: #fff;
    font-weight: 600;
    box-shadow: 0 4px 14px rgba(123, 79, 191, 0.35);
}

.woocommerce-account .woocommerce-MyAccount-navigation ul li.is-active a:hover {
    transform: none;
    background: linear-gradient(135deg, #6A3FAF 0%, #4A1F98 100%);
}

/* ============================================================
   CONTENT AREA
   ============================================================ */

.woocommerce-account .woocommerce-MyAccount-content {
    width: 71%;
    float: right;
    background: #fff;
    border-radius: 16px;
    box-shadow: 0 4px 24px rgba(45, 27, 94, 0.08);
    padding: 36px 40px;
    border: 1px solid rgba(123, 79, 191, 0.08);
}

.woocommerce-account .woocommerce-MyAccount-content > p:first-child {
    font-family: 'DM Serif Display', Georgia, serif;
    font-size: 26px;
    color: #2D1B5E;
    margin: 0 0 8px;
    line-height: 1.3;
    font-weight: 400;
    letter-spacing: -0.3px;
}

.woocommerce-account .woocommerce-MyAccount-content > p:first-child strong {
    color: #7B4FBF;
    font-weight: 400;
}

.woocommerce-account .woocommerce-MyAccount-content > p {
    color: #555;
    font-size: 14.5px;
    line-height: 1.7;
    margin: 0 0 16px;
}

.woocommerce-account .woocommerce-MyAccount-content > p a {
    color: #7B4FBF;
    text-decoration: underline;
    font-weight: 500;
    transition: color 0.2s;
}

.woocommerce-account .woocommerce-MyAccount-content > p a:hover {
    color: #5A2FA8;
}

/* Section headings within account pages */
.woocommerce-account .woocommerce-MyAccount-content h2,
.woocommerce-account .woocommerce-MyAccount-content h3 {
    font-family: 'DM Serif Display', Georgia, serif;
    color: #2D1B5E;
    font-weight: 400;
    margin: 0 0 18px;
    letter-spacing: -0.3px;
}

.woocommerce-account .woocommerce-MyAccount-content h2 {
    font-size: 22px;
}

.woocommerce-account .woocommerce-MyAccount-content h3 {
    font-size: 18px;
}

/* ============================================================
   FORMS — Account details, addresses, etc.
   ============================================================ */

.woocommerce-account .woocommerce-MyAccount-content form .form-row {
    margin-bottom: 18px;
}

.woocommerce-account .woocommerce-MyAccount-content form label {
    display: block;
    font-size: 13px;
    font-weight: 600;
    color: #2D1B5E;
    margin-bottom: 6px;
    letter-spacing: 0.2px;
}

.woocommerce-account .woocommerce-MyAccount-content form input[type="text"],
.woocommerce-account .woocommerce-MyAccount-content form input[type="email"],
.woocommerce-account .woocommerce-MyAccount-content form input[type="password"],
.woocommerce-account .woocommerce-MyAccount-content form input[type="tel"],
.woocommerce-account .woocommerce-MyAccount-content form select,
.woocommerce-account .woocommerce-MyAccount-content form textarea {
    width: 100%;
    padding: 12px 16px;
    font-size: 14px;
    border: 1.5px solid #e0d8ed;
    border-radius: 10px;
    background: #faf9fc;
    color: #2D1B5E;
    transition: border-color 0.2s, background 0.2s, box-shadow 0.2s;
    box-sizing: border-box;
    outline: none;
    font-family: inherit;
}

.woocommerce-account .woocommerce-MyAccount-content form input:focus,
.woocommerce-account .woocommerce-MyAccount-content form select:focus,
.woocommerce-account .woocommerce-MyAccount-content form textarea:focus {
    border-color: #7B4FBF;
    background: #fff;
    box-shadow: 0 0 0 3px rgba(123, 79, 191, 0.12);
}

/* Buttons */
.woocommerce-account .woocommerce-MyAccount-content button.button,
.woocommerce-account .woocommerce-MyAccount-content input[type="submit"],
.woocommerce-account .woocommerce-MyAccount-content .button {
    display: inline-block;
    background: linear-gradient(135deg, #7B4FBF 0%, #5A2FA8 100%);
    color: #fff;
    border: none;
    padding: 13px 28px;
    border-radius: 10px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    text-decoration: none;
    letter-spacing: 0.3px;
    transition: transform 0.15s, box-shadow 0.2s;
    box-shadow: 0 4px 14px rgba(123, 79, 191, 0.3);
    font-family: inherit;
}

.woocommerce-account .woocommerce-MyAccount-content button.button:hover,
.woocommerce-account .woocommerce-MyAccount-content input[type="submit"]:hover,
.woocommerce-account .woocommerce-MyAccount-content .button:hover {
    transform: translateY(-1px);
    box-shadow: 0 6px 20px rgba(123, 79, 191, 0.4);
    background: linear-gradient(135deg, #6A3FAF 0%, #4A1F98 100%);
    color: #fff;
}

/* ============================================================
   ORDERS TABLE
   ============================================================ */

.woocommerce-account .woocommerce-orders-table,
.woocommerce-account .shop_table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    margin: 16px 0;
    background: #fff;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 2px 12px rgba(45, 27, 94, 0.05);
}

.woocommerce-account .woocommerce-orders-table th,
.woocommerce-account .shop_table th {
    background: linear-gradient(135deg, #7B4FBF 0%, #5A2FA8 100%);
    color: #fff;
    padding: 14px 18px;
    text-align: left;
    font-size: 12.5px;
    font-weight: 700;
    letter-spacing: 0.5px;
    text-transform: uppercase;
}

.woocommerce-account .woocommerce-orders-table td,
.woocommerce-account .shop_table td {
    padding: 14px 18px;
    border-bottom: 1px solid rgba(45, 27, 94, 0.06);
    color: #2D1B5E;
    font-size: 14px;
}

.woocommerce-account .woocommerce-orders-table tr:last-child td,
.woocommerce-account .shop_table tr:last-child td {
    border-bottom: none;
}

.woocommerce-account .woocommerce-orders-table tr:hover td,
.woocommerce-account .shop_table tr:hover td {
    background: rgba(123, 79, 191, 0.03);
}

/* Order status badges */
.woocommerce-account .woocommerce-orders-table .woocommerce-orders-table__cell-order-status {
    font-weight: 600;
    text-transform: capitalize;
}

/* ============================================================
   ADDRESSES PAGE
   ============================================================ */

.woocommerce-account .woocommerce-Addresses {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
    margin: 20px 0;
}

.woocommerce-account .woocommerce-Address {
    background: #faf9fc;
    border: 1px solid rgba(123, 79, 191, 0.12);
    border-radius: 12px;
    padding: 24px;
    transition: border-color 0.2s, transform 0.2s;
}

.woocommerce-account .woocommerce-Address:hover {
    border-color: #7B4FBF;
    transform: translateY(-2px);
}

.woocommerce-account .woocommerce-Address-title {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 14px;
    border-bottom: 1px solid rgba(45, 27, 94, 0.08);
    padding-bottom: 12px;
}

.woocommerce-account .woocommerce-Address-title h2,
.woocommerce-account .woocommerce-Address-title h3 {
    margin: 0;
    font-size: 18px;
}

.woocommerce-account .woocommerce-Address-title .edit {
    color: #7B4FBF;
    text-decoration: none;
    font-size: 13px;
    font-weight: 600;
    padding: 6px 14px;
    border: 1.5px solid #7B4FBF;
    border-radius: 8px;
    transition: all 0.2s;
}

.woocommerce-account .woocommerce-Address-title .edit:hover {
    background: #7B4FBF;
    color: #fff;
}

.woocommerce-account .woocommerce-Address address {
    font-style: normal;
    color: #555;
    font-size: 14px;
    line-height: 1.7;
}

/* ============================================================
   LOGIN / REGISTER PAGE (logged-out state)
   ============================================================ */

.woocommerce-account:not(.logged-in) .woocommerce {
    max-width: 900px;
}

.woocommerce-account .u-columns {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 30px;
}

.woocommerce-account .u-column1,
.woocommerce-account .u-column2 {
    width: 100% !important;
    float: none !important;
    background: #fff;
    border-radius: 16px;
    box-shadow: 0 4px 24px rgba(45, 27, 94, 0.08);
    padding: 36px 32px;
    border: 1px solid rgba(123, 79, 191, 0.08);
    box-sizing: border-box;
}

.woocommerce-account .u-column1 h2,
.woocommerce-account .u-column2 h2 {
    font-family: 'DM Serif Display', Georgia, serif;
    font-size: 28px;
    color: #2D1B5E;
    margin: 0 0 8px;
    font-weight: 400;
    letter-spacing: -0.3px;
}

.woocommerce-account .woocommerce-form-login,
.woocommerce-account .woocommerce-form-register {
    border: none;
    padding: 0;
    margin: 0;
}

.woocommerce-account .woocommerce-form__label-for-checkbox {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    color: #555;
    cursor: pointer;
}

.woocommerce-account .woocommerce-form__input-checkbox {
    width: 16px;
    height: 16px;
    accent-color: #7B4FBF;
    cursor: pointer;
}

.woocommerce-account .lost_password a {
    color: #7B4FBF;
    text-decoration: none;
    font-size: 13px;
    font-weight: 500;
}

.woocommerce-account .lost_password a:hover {
    text-decoration: underline;
}

/* ============================================================
   NOTICES, MESSAGES, ERRORS
   ============================================================ */

.woocommerce-account .woocommerce-message,
.woocommerce-account .woocommerce-info,
.woocommerce-account .woocommerce-error,
.woocommerce-account .woocommerce-notice {
    border-radius: 10px;
    padding: 14px 20px;
    margin-bottom: 20px;
    font-size: 14px;
    border-left: 4px solid;
    background: #faf9fc;
}

.woocommerce-account .woocommerce-message {
    border-color: #4CAF50;
    background: #f0faf3;
    color: #1e5128;
}

.woocommerce-account .woocommerce-info {
    border-color: #7B4FBF;
    background: #f5f0fa;
    color: #2D1B5E;
}

.woocommerce-account .woocommerce-error {
    border-color: #e53e3e;
    background: #fef2f2;
    color: #742a2a;
}

/* ============================================================
   RESPONSIVE — MOBILE
   ============================================================ */

@media (max-width: 768px) {
    .woocommerce-account .woocommerce {
        margin: 30px auto 50px;
        padding: 0 16px;
    }

    .woocommerce-account .woocommerce-MyAccount-navigation,
    .woocommerce-account .woocommerce-MyAccount-content {
        width: 100%;
        float: none;
    }

    .woocommerce-account .woocommerce-MyAccount-navigation {
        margin-bottom: 20px;
    }

    .woocommerce-account .woocommerce-MyAccount-content {
        padding: 24px 20px;
    }

    .woocommerce-account .u-columns {
        grid-template-columns: 1fr;
    }

    .woocommerce-account .woocommerce-Addresses {
        grid-template-columns: 1fr;
    }

    .woocommerce-account .woocommerce-MyAccount-content > p:first-child {
        font-size: 22px;
    }

    /* Make tables scrollable on mobile */
    .woocommerce-account .woocommerce-orders-table,
    .woocommerce-account .shop_table {
        display: block;
        overflow-x: auto;
        white-space: nowrap;
    }
}

/* ============================================================
   FIX: clear float at end of My Account
   ============================================================ */

.woocommerce-account .woocommerce::after {
    content: "";
    display: table;
    clear: both;
}
/* ============================================================
   NUROPEPTIDES — MOBILE OPTIMIZATIONS
   Append this to the bottom of woocommerce.css
   All changes apply ONLY at ≤768px (mobile/small tablet)
   Desktop is 100% untouched
   ============================================================ */

@media (max-width: 768px) {

    /* ──────────────────────────────────────────────
       1. ANNOUNCEMENT BAR — slimmer, no "third-party tested"
       (The header.php already has the smaller font from earlier;
        this hides the third-party text and tightens spacing)
       ────────────────────────────────────────────── */
    .announcement-bar {
        font-size: 10px !important;
        padding: 3px 10px !important;
        line-height: 1.3 !important;
        letter-spacing: 0 !important;
    }

    /* ──────────────────────────────────────────────
       2. HERO — restructure layout for mobile
       Goal: headline is the first thing visible,
       ONE faded vial sits behind it as background
       ────────────────────────────────────────────── */

    /* Reduce hero padding so headline appears immediately */
    .hero {
        padding: 32px 1.25rem 40px !important;
        min-height: auto !important;
    }

    /* Hide decorative blobs (clutter on mobile) */
    .hero > div[style*="border-radius:50%"] {
        display: none !important;
    }

    /* Stack hero grid: text on top, vial area becomes background */
    .hero-grid {
        position: relative !important;
        grid-template-columns: 1fr !important;
        gap: 0 !important;
        min-height: 420px !important;
    }

    /* Text takes priority — relative positioning, on top */
    .hero-text {
        position: relative !important;
        z-index: 10 !important;
        text-align: center !important;
        padding-top: 20px !important;
    }

    /* Hide "Research Grade Peptides" pill on mobile */
    .hero-badge {
        display: none !important;
    }

    /* Bigger, tighter headline */
    .hero-text h1 {
        font-size: 38px !important;
        line-height: 1.1 !important;
        margin: 0 0 16px !important;
        text-align: center !important;
    }

    /* Subtitle smaller and centered */
    .hero-sub {
        font-size: 14.5px !important;
        line-height: 1.55 !important;
        text-align: center !important;
        margin: 0 auto 22px !important;
        max-width: 340px !important;
    }

    /* Action buttons stack and full-width-ish */
    .hero-actions {
        display: flex !important;
        flex-direction: column !important;
        gap: 10px !important;
        align-items: center !important;
        margin-bottom: 18px !important;
    }
    .hero-actions .btn {
        width: 100% !important;
        max-width: 280px !important;
        text-align: center !important;
        padding: 12px 20px !important;
    }

    /* Trust row: smaller, centered, wraps if needed */
    .hero-trust {
        display: flex !important;
        flex-wrap: wrap !important;
        justify-content: center !important;
        gap: 8px 14px !important;
        margin-top: 4px !important;
    }
    .hero-trust-item {
        font-size: 11.5px !important;
    }

    /* Vial column becomes a positioned BACKGROUND layer */
    .hero-grid > div:last-child {
        position: absolute !important;
        top: 0 !important;
        left: 0 !important;
        right: 0 !important;
        bottom: 0 !important;
        min-height: 0 !important;
        z-index: 1 !important;
        pointer-events: none !important;
        opacity: 0.18 !important;
        overflow: hidden !important;
    }

    /* Hide the back vial — only show the front one as bg */
    .hero-grid > div:last-child > div:nth-of-type(2) {
        display: none !important; /* the back vial */
    }

    /* The remaining vial: shrink it, center it, even more faded */
    .hero-grid > div:last-child img {
        height: 280px !important;
        max-height: 70vw !important;
        filter: drop-shadow(0 8px 16px rgba(106,76,147,0.15)) !important;
        opacity: 0.7 !important;
        mix-blend-mode: multiply !important;
    }

    /* Hide ALL the floating badges on mobile (Purity, Promise, USA, HPLC) */
    .hero-grid > div:last-child > div[style*="position:absolute"]:not([style*="50%"]) {
        display: none !important;
    }

    /* Also hide the glow circle behind vials */
    .hero-grid > div:last-child > div[style*="radial-gradient"] {
        display: none !important;
    }

    /* ──────────────────────────────────────────────
       3. STATS BAR — half size on mobile
       ────────────────────────────────────────────── */
    .stats-bar {
        padding: 20px 16px !important;
    }
    .stats-inner {
        gap: 12px !important;
    }
    .stat-item {
        padding: 0 !important;
    }
    .stat-num {
        font-size: 18px !important;
        line-height: 1.2 !important;
        margin-bottom: 2px !important;
    }
    .stat-label {
        font-size: 10.5px !important;
        line-height: 1.3 !important;
    }

    /* ──────────────────────────────────────────────
       4. PRODUCTS GRID — 2 cards per row, smaller
       (Prime Peptides–style mobile layout)
       ────────────────────────────────────────────── */
    .products-grid {
        display: grid !important;
        grid-template-columns: 1fr 1fr !important;
        gap: 12px !important;
        padding: 0 !important;
    }

    .product-card {
        border-radius: 12px !important;
    }

    /* Smaller product image area */
    .product-card .product-img {
        height: 160px !important;
    }
    .product-card .product-img img {
        height: 160px !important;
        padding: 16px !important;
    }

    /* Tighter card body */
    .product-card .product-body {
        padding: 10px 12px 12px !important;
    }
    .product-card .product-name {
        font-size: 13px !important;
        line-height: 1.3 !important;
        margin-bottom: 6px !important;
        /* Truncate long product names to 2 lines */
        display: -webkit-box !important;
        -webkit-line-clamp: 2 !important;
        -webkit-box-orient: vertical !important;
        overflow: hidden !important;
        min-height: 34px !important;
    }
    .product-card .product-price {
        font-size: 16px !important;
    }
    .product-card .product-size {
        font-size: 10px !important;
    }

    /* Stack the qty + add to cart vertically on tiny cards */
    .product-card .product-card-actions {
        flex-direction: column !important;
        gap: 6px !important;
        align-items: stretch !important;
    }
    .product-card .card-qty-row {
        align-self: center !important;
    }
    .product-card .card-add-btn {
        width: 100% !important;
        font-size: 12px !important;
        padding: 8px 6px !important;
    }
    .product-card .product-img-badge {
        font-size: 8px !important;
        padding: 3px 6px !important;
    }

    /* Filter chips: smaller and scrollable horizontally */
    .shop-toolbar {
        padding: 0 !important;
    }
    .filter-row {
        overflow-x: auto !important;
        flex-wrap: nowrap !important;
        scrollbar-width: none !important;
        -webkit-overflow-scrolling: touch !important;
        padding-bottom: 8px !important;
    }
    .filter-row::-webkit-scrollbar {
        display: none !important;
    }
    .filter-btn {
        flex-shrink: 0 !important;
        font-size: 12px !important;
        padding: 7px 14px !important;
    }
    .shop-count {
        font-size: 12px !important;
    }

    /* Section headings — slightly smaller on mobile */
    .section-heading {
        font-size: 26px !important;
        line-height: 1.15 !important;
    }
    .section-sub {
        font-size: 13.5px !important;
    }
    .section-tag {
        font-size: 10.5px !important;
    }

}

/* Even tighter on very small screens (older phones, ≤400px) */
@media (max-width: 400px) {
    .hero-text h1 {
        font-size: 32px !important;
    }
    .products-grid {
        gap: 10px !important;
    }
    .product-card .product-img,
    .product-card .product-img img {
        height: 140px !important;
    }
}
/* ============================================================
   NUROPEPTIDES — MOBILE CART IMPROVEMENTS
   Append to bottom of woocommerce.css (AFTER the previous mobile block)
   Mobile only (≤768px) — desktop cart is untouched
   ============================================================ */

@media (max-width: 768px) {

    /* ──────────────────────────────────────────────
       1. CART PAGE WRAPPER
       ────────────────────────────────────────────── */
    .woocommerce-cart .woocommerce {
        padding: 0 12px !important;
        margin: 16px auto !important;
    }

    /* Hide cart page heading if it's redundant */
    .woocommerce-cart-form {
        background: #fff !important;
        border-radius: 14px !important;
        box-shadow: 0 4px 20px rgba(45,27,94,0.06) !important;
        border: 1px solid rgba(123,79,191,0.08) !important;
        padding: 0 !important;
        overflow: hidden !important;
    }

    /* ──────────────────────────────────────────────
       2. CART LINE ITEM — horizontal layout
       Hide the table structure, recreate as flex
       ────────────────────────────────────────────── */
    .woocommerce-cart table.shop_table_responsive,
    .woocommerce-cart table.cart {
        border: none !important;
        background: transparent !important;
        box-shadow: none !important;
        margin: 0 !important;
    }

    /* Hide table header row */
    .woocommerce-cart table.cart thead {
        display: none !important;
    }

    .woocommerce-cart table.cart tbody {
        display: block !important;
    }

    /* Each cart row becomes a card-style line item */
    .woocommerce-cart table.cart tr.cart_item {
        display: grid !important;
        grid-template-columns: 70px 1fr auto !important;
        grid-template-rows: auto auto !important;
        grid-template-areas:
            "image  details remove"
            "image  qty     subtotal" !important;
        gap: 8px 12px !important;
        padding: 14px !important;
        border-bottom: 1px solid rgba(45,27,94,0.06) !important;
        background: #fff !important;
        align-items: center !important;
    }

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

    /* Hide the table cell styling */
    .woocommerce-cart table.cart tr.cart_item td {
        display: block !important;
        padding: 0 !important;
        border: none !important;
        background: transparent !important;
    }

    /* Hide "Product:", "Price:", "Quantity:", "Subtotal:" labels */
    .woocommerce-cart table.cart tr.cart_item td::before {
        display: none !important;
    }

    /* PRODUCT IMAGE */
    .woocommerce-cart table.cart tr.cart_item td.product-thumbnail {
        grid-area: image !important;
        width: 70px !important;
        height: 70px !important;
    }
    .woocommerce-cart table.cart tr.cart_item td.product-thumbnail a {
        display: block !important;
        width: 70px !important;
        height: 70px !important;
        background: #F3EEFF !important;
        border-radius: 10px !important;
        overflow: hidden !important;
    }
    .woocommerce-cart table.cart tr.cart_item td.product-thumbnail img {
        width: 70px !important;
        height: 70px !important;
        object-fit: contain !important;
        padding: 6px !important;
        display: block !important;
    }

    /* PRODUCT NAME + PRICE */
    .woocommerce-cart table.cart tr.cart_item td.product-name {
        grid-area: details !important;
        align-self: start !important;
    }
    .woocommerce-cart table.cart tr.cart_item td.product-name a {
        font-size: 14px !important;
        font-weight: 600 !important;
        color: #2D1B5E !important;
        text-decoration: none !important;
        line-height: 1.3 !important;
        display: block !important;
        margin-bottom: 4px !important;
    }

    /* Hide individual price column (we'll use subtotal instead) */
    .woocommerce-cart table.cart tr.cart_item td.product-price {
        display: none !important;
    }

    /* QUANTITY area */
    .woocommerce-cart table.cart tr.cart_item td.product-quantity {
        grid-area: qty !important;
        align-self: center !important;
    }
    .woocommerce-cart .quantity {
        display: inline-flex !important;
        align-items: center !important;
        background: #F9F7FF !important;
        border: 1.5px solid #DDE0E6 !important;
        border-radius: 8px !important;
        padding: 2px !important;
        gap: 0 !important;
    }
    .woocommerce-cart .quantity input.qty {
        width: 32px !important;
        text-align: center !important;
        border: none !important;
        background: transparent !important;
        font-size: 13px !important;
        font-weight: 700 !important;
        color: #111827 !important;
        outline: none !important;
        padding: 6px 0 !important;
        -moz-appearance: textfield !important;
    }
    .woocommerce-cart .quantity input.qty::-webkit-outer-spin-button,
    .woocommerce-cart .quantity input.qty::-webkit-inner-spin-button {
        -webkit-appearance: none !important;
        margin: 0 !important;
    }

    /* +/- buttons (added by JS) */
    .woocommerce-cart .nuro-qty-btn {
        width: 28px !important;
        height: 28px !important;
        border: none !important;
        background: transparent !important;
        color: #4B5563 !important;
        font-size: 16px !important;
        font-weight: 600 !important;
        cursor: pointer !important;
        border-radius: 6px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        line-height: 1 !important;
        transition: background 0.15s !important;
        padding: 0 !important;
    }
    .woocommerce-cart .nuro-qty-btn:hover {
        background: #D4BBFF !important;
        color: #6A4C93 !important;
    }

    /* SUBTOTAL */
    .woocommerce-cart table.cart tr.cart_item td.product-subtotal {
        grid-area: subtotal !important;
        text-align: right !important;
        font-size: 15px !important;
        font-weight: 700 !important;
        color: #111827 !important;
        align-self: center !important;
    }
    .woocommerce-cart table.cart tr.cart_item td.product-subtotal .woocommerce-Price-amount {
        font-size: 15px !important;
        font-weight: 700 !important;
    }

    /* REMOVE BUTTON (×) */
    .woocommerce-cart table.cart tr.cart_item td.product-remove {
        grid-area: remove !important;
        text-align: right !important;
        align-self: start !important;
    }
    .woocommerce-cart table.cart tr.cart_item td.product-remove a.remove {
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        width: 26px !important;
        height: 26px !important;
        font-size: 18px !important;
        line-height: 1 !important;
        color: #9CA3AF !important;
        background: #F3F0FF !important;
        border-radius: 50% !important;
        text-decoration: none !important;
        font-weight: 400 !important;
        transition: all 0.2s !important;
    }
    .woocommerce-cart table.cart tr.cart_item td.product-remove a.remove:hover {
        background: #fef2f2 !important;
        color: #e53e3e !important;
    }

    /* ──────────────────────────────────────────────
       3. ACTIONS ROW (Coupon + Update cart)
       Collapse into a clean compact area
       ────────────────────────────────────────────── */
    .woocommerce-cart table.cart tr.actions {
        display: block !important;
        padding: 0 !important;
        border: none !important;
        background: #faf9fc !important;
    }
    .woocommerce-cart table.cart tr.actions td {
        padding: 14px !important;
        display: block !important;
        border: none !important;
    }
    .woocommerce-cart table.cart tr.actions td::before {
        display: none !important;
    }

    /* Hide the giant Update cart button — we'll auto-update via JS */
    .woocommerce-cart table.cart tr.actions button[name="update_cart"],
    .woocommerce-cart table.cart tr.actions input[name="update_cart"] {
        display: none !important;
    }

    /* Coupon section: collapsed by default, expands on tap */
    .woocommerce-cart .coupon {
        display: block !important;
        margin: 0 !important;
        padding: 0 !important;
        position: relative !important;
    }

    /* Trigger label (hidden on desktop, shown on mobile) */
    .woocommerce-cart .coupon::before {
        content: "+ Have a coupon? Apply" !important;
        display: block !important;
        cursor: pointer !important;
        padding: 12px 14px !important;
        background: #fff !important;
        border: 1px dashed #c8b8e0 !important;
        border-radius: 10px !important;
        color: #7B4FBF !important;
        font-size: 13px !important;
        font-weight: 600 !important;
        text-align: center !important;
        transition: background 0.2s !important;
    }
    .woocommerce-cart .coupon.is-open::before {
        content: "− Hide coupon" !important;
        background: #f5f0fa !important;
    }

    .woocommerce-cart .coupon > * {
        display: none !important;
    }
    .woocommerce-cart .coupon.is-open > * {
        display: block !important;
    }
    .woocommerce-cart .coupon.is-open {
        display: flex !important;
        flex-direction: column !important;
        gap: 8px !important;
        margin-top: 10px !important;
    }
    .woocommerce-cart .coupon.is-open input[name="coupon_code"] {
        width: 100% !important;
        padding: 12px 14px !important;
        border: 1.5px solid #e0d8ed !important;
        border-radius: 10px !important;
        font-size: 14px !important;
        background: #fff !important;
        outline: none !important;
        box-sizing: border-box !important;
    }
    .woocommerce-cart .coupon.is-open input[name="coupon_code"]:focus {
        border-color: #7B4FBF !important;
    }
    .woocommerce-cart .coupon.is-open button[name="apply_coupon"] {
        width: 100% !important;
        padding: 12px !important;
        background: linear-gradient(135deg, #7B4FBF 0%, #5A2FA8 100%) !important;
        color: #fff !important;
        border: none !important;
        border-radius: 10px !important;
        font-size: 14px !important;
        font-weight: 600 !important;
        cursor: pointer !important;
    }

    /* ──────────────────────────────────────────────
       4. CART TOTALS
       ────────────────────────────────────────────── */
    .woocommerce-cart .cart-collaterals,
    .woocommerce-cart .cart_totals {
        width: 100% !important;
        float: none !important;
        margin-top: 16px !important;
    }

    .woocommerce-cart .cart_totals {
        background: #fff !important;
        border-radius: 14px !important;
        box-shadow: 0 4px 20px rgba(45,27,94,0.06) !important;
        border: 1px solid rgba(123,79,191,0.08) !important;
        padding: 18px !important;
    }

    .woocommerce-cart .cart_totals h2 {
        font-family: 'DM Serif Display', Georgia, serif !important;
        font-size: 20px !important;
        color: #2D1B5E !important;
        margin: 0 0 14px !important;
        font-weight: 400 !important;
    }

    .woocommerce-cart .cart_totals table {
        width: 100% !important;
        border: none !important;
        background: transparent !important;
        margin: 0 !important;
    }

    .woocommerce-cart .cart_totals table tr {
        border-bottom: 1px solid rgba(45,27,94,0.06) !important;
    }

    .woocommerce-cart .cart_totals table th,
    .woocommerce-cart .cart_totals table td {
        padding: 10px 0 !important;
        border: none !important;
        background: transparent !important;
        font-size: 14px !important;
        color: #2D1B5E !important;
    }

    .woocommerce-cart .cart_totals table th {
        font-weight: 600 !important;
    }

    .woocommerce-cart .cart_totals table td {
        text-align: right !important;
    }

    /* TOTAL row — bigger and bolder */
    .woocommerce-cart .cart_totals .order-total th,
    .woocommerce-cart .cart_totals .order-total td {
        font-size: 17px !important;
        font-weight: 700 !important;
        padding-top: 14px !important;
        padding-bottom: 4px !important;
        border-bottom: none !important;
    }
    .woocommerce-cart .cart_totals .order-total .woocommerce-Price-amount {
        color: #7B4FBF !important;
        font-size: 19px !important;
    }

    /* Checkout button area */
    .woocommerce-cart .cart_totals .wc-proceed-to-checkout {
        padding: 16px 0 0 !important;
        margin: 0 !important;
    }
    .woocommerce-cart .cart_totals .wc-proceed-to-checkout a.checkout-button {
        display: block !important;
        width: 100% !important;
        text-align: center !important;
        background: linear-gradient(135deg, #7B4FBF 0%, #5A2FA8 100%) !important;
        color: #fff !important;
        font-size: 15px !important;
        font-weight: 700 !important;
        padding: 15px !important;
        border-radius: 12px !important;
        border: none !important;
        text-decoration: none !important;
        box-shadow: 0 4px 14px rgba(123,79,191,0.3) !important;
        letter-spacing: 0.3px !important;
    }
    .woocommerce-cart .cart_totals .wc-proceed-to-checkout a.checkout-button::after {
        content: " →" !important;
    }

    /* Hide shipping calculator on mobile cart (already disabled, but just in case) */
    .woocommerce-cart .shipping-calculator-button,
    .woocommerce-cart .shipping-calculator-form {
        display: none !important;
    }

    /* Hide cross-sells on mobile cart (saves space) */
    .woocommerce-cart .cross-sells {
        display: none !important;
    }

    /* Loading state during AJAX update */
    .woocommerce-cart-form.is-loading {
        opacity: 0.6 !important;
        pointer-events: none !important;
        transition: opacity 0.2s !important;
    }
}
/* ============================================================
   NUROPEPTIDES — CART POLISH (FINAL)
   Append to bottom of woocommerce.css
   Mobile only (≤768px)
   ============================================================ */

@media (max-width: 768px) {

    /* ──────────────────────────────────────────────
       1. HIDE UPDATE CART BUTTON ENTIRELY
       Stronger selectors to override any framework styling
       ────────────────────────────────────────────── */
    .woocommerce-cart button[name="update_cart"],
    .woocommerce-cart input[name="update_cart"],
    .woocommerce-cart .actions button[name="update_cart"],
    .woocommerce-cart .actions input[name="update_cart"],
    .woocommerce-cart [name="update_cart"],
    .woocommerce-cart-form [name="update_cart"],
    .woocommerce-cart .button[name="update_cart"] {
        display: none !important;
        visibility: hidden !important;
        height: 0 !important;
        width: 0 !important;
        padding: 0 !important;
        margin: 0 !important;
        opacity: 0 !important;
        position: absolute !important;
        left: -9999px !important;
    }

    /* ──────────────────────────────────────────────
       2. TIGHTER CART LINE ITEM
       Reduce padding and thumbnail size
       ────────────────────────────────────────────── */
    .woocommerce-cart table.cart tr.cart_item {
        grid-template-columns: 56px 1fr auto !important;
        gap: 6px 10px !important;
        padding: 10px 12px !important;
    }

    .woocommerce-cart table.cart tr.cart_item td.product-thumbnail {
        width: 56px !important;
        height: 56px !important;
    }
    .woocommerce-cart table.cart tr.cart_item td.product-thumbnail a {
        width: 56px !important;
        height: 56px !important;
        border-radius: 8px !important;
    }
    .woocommerce-cart table.cart tr.cart_item td.product-thumbnail img {
        width: 56px !important;
        height: 56px !important;
        padding: 4px !important;
    }

    .woocommerce-cart table.cart tr.cart_item td.product-name a {
        font-size: 13px !important;
        margin-bottom: 2px !important;
    }

    .woocommerce-cart table.cart tr.cart_item td.product-subtotal,
    .woocommerce-cart table.cart tr.cart_item td.product-subtotal .woocommerce-Price-amount {
        font-size: 14px !important;
    }

    /* Tighter quantity controls */
    .woocommerce-cart .quantity input.qty {
        width: 28px !important;
        font-size: 12px !important;
        padding: 4px 0 !important;
    }
    .woocommerce-cart .nuro-qty-btn {
        width: 24px !important;
        height: 24px !important;
        font-size: 14px !important;
    }

    /* Smaller remove × */
    .woocommerce-cart table.cart tr.cart_item td.product-remove a.remove {
        width: 22px !important;
        height: 22px !important;
        font-size: 16px !important;
    }

    /* ──────────────────────────────────────────────
       3. INJECT "PROCEED TO CHECKOUT" INTO ACTIONS ROW
       Use the cart totals' checkout button via CSS
       (We can't truly move DOM with CSS, but we can:
        - Hide the original checkout button in cart_totals
        - Style a duplicate placed via JS, OR
        - Just visually reorder using flex on the cart wrapper)
       
       Simpler approach: use flexbox order on the cart's
       main container to put cart_totals BEFORE actions
       row, but that's fragile. Best fix is to make the
       checkout button sticky at the bottom of the cart
       so it's always visible.
       ────────────────────────────────────────────── */

    /* Make the checkout button STICKY at bottom of viewport on mobile */
    .woocommerce-cart .cart_totals .wc-proceed-to-checkout {
        position: sticky !important;
        bottom: 12px !important;
        z-index: 50 !important;
        background: rgba(255,255,255,0.95) !important;
        backdrop-filter: blur(8px) !important;
        -webkit-backdrop-filter: blur(8px) !important;
        padding: 12px !important;
        margin: 16px -18px -18px !important;
        border-radius: 0 0 14px 14px !important;
        border-top: 1px solid rgba(123,79,191,0.1) !important;
    }

    /* Also: reorder so cart_totals appears BEFORE the actions row's coupon area
       on mobile. Use flex order on the cart wrapper. */
    .woocommerce-cart .woocommerce {
        display: flex !important;
        flex-direction: column !important;
    }
    .woocommerce-cart .woocommerce > .woocommerce-cart-form {
        order: 1 !important;
    }
    .woocommerce-cart .woocommerce > .cart-collaterals {
        order: 2 !important;
    }
    .woocommerce-cart .woocommerce > .woocommerce-notices-wrapper {
        order: 0 !important;
    }

    /* Within the cart-form, put coupon (actions row) AFTER all cart items
       but it stays where it is in DOM. We move the cart_totals to appear
       above the cart actions visually by making the totals card stand out
       and pinning the checkout button. */

    /* Hide the cart_totals "Cart totals" heading on mobile to save space */
    .woocommerce-cart .cart_totals > h2 {
        display: none !important;
    }

    /* Tighter cart_totals padding */
    .woocommerce-cart .cart_totals {
        padding: 14px !important;
    }
    .woocommerce-cart .cart_totals table th,
    .woocommerce-cart .cart_totals table td {
        padding: 8px 0 !important;
        font-size: 13px !important;
    }
    .woocommerce-cart .cart_totals .order-total th,
    .woocommerce-cart .cart_totals .order-total td {
        font-size: 16px !important;
        padding-top: 12px !important;
    }
    .woocommerce-cart .cart_totals .order-total .woocommerce-Price-amount {
        font-size: 18px !important;
    }

    /* ──────────────────────────────────────────────
       4. APPLY COUPON button styling
       (Keep dark purple gradient — it's the primary
        action when the coupon section is expanded)
       ────────────────────────────────────────────── */
    .woocommerce-cart .coupon.is-open button[name="apply_coupon"] {
        background: linear-gradient(135deg, #7B4FBF 0%, #5A2FA8 100%) !important;
        color: #fff !important;
        font-weight: 600 !important;
    }

    /* ──────────────────────────────────────────────
       5. ACTIONS ROW (coupon area) - subtle background
       since Update cart is gone, less visual weight needed
       ────────────────────────────────────────────── */
    .woocommerce-cart table.cart tr.actions {
        background: transparent !important;
    }
    .woocommerce-cart table.cart tr.actions td {
        padding: 12px !important;
    }

}
/* ============================================================
   NUROPEPTIDES — CART POLISH v2 (FINAL)
   Append to bottom of woocommerce.css
   Mobile only (≤768px)
   ============================================================ */

@media (max-width: 768px) {

    /* ──────────────────────────────────────────────
       1. HIDE UPDATE CART BUTTON — corrected selectors
       The button doesn't have name="update_cart" attribute
       in Fluid Checkout. It's just a generic .button inside
       the .actions row, second button after Apply coupon.
       ────────────────────────────────────────────── */

    /* Hide the second button in the actions row (the Update cart button) */
    .woocommerce-cart .woocommerce-cart-form table tr.actions .button:not([name="apply_coupon"]):not(.coupon_code),
    .woocommerce-cart .woocommerce-cart-form .actions > button.button,
    .woocommerce-cart .woocommerce-cart-form tr.actions td.actions > button.button {
        display: none !important;
    }

    /* More aggressive: hide any button in actions that's NOT inside .coupon */
    .woocommerce-cart .woocommerce-cart-form tr.actions > td > button.button,
    .woocommerce-cart .woocommerce-cart-form tr.actions > td > input.button {
        display: none !important;
    }

    /* Also catch by name attribute (covers various WooCommerce versions) */
    .woocommerce-cart [name="update_cart"],
    .woocommerce-cart button[value*="Update"],
    .woocommerce-cart input[value*="Update cart"] {
        display: none !important;
    }

    /* ──────────────────────────────────────────────
       2. SMALLER QUANTITY CONTROLS
       The current −/+ buttons and qty input are too large
       ────────────────────────────────────────────── */
    .woocommerce-cart .quantity {
        padding: 1px !important;
        border-radius: 7px !important;
    }
    .woocommerce-cart .quantity input.qty {
        width: 26px !important;
        font-size: 12px !important;
        padding: 3px 0 !important;
    }
    .woocommerce-cart .nuro-qty-btn {
        width: 22px !important;
        height: 22px !important;
        font-size: 14px !important;
        font-weight: 600 !important;
    }

    /* ──────────────────────────────────────────────
       3. SMALLER CART TOTALS
       Subtotal, Shipping, Total — compact
       ────────────────────────────────────────────── */
    .woocommerce-cart .cart_totals {
        padding: 14px !important;
    }

    .woocommerce-cart .cart_totals > h2 {
        font-size: 17px !important;
        margin: 0 0 10px !important;
    }

    .woocommerce-cart .cart_totals table tr {
        border-bottom: 1px solid rgba(45,27,94,0.05) !important;
    }

    .woocommerce-cart .cart_totals table th,
    .woocommerce-cart .cart_totals table td {
        padding: 7px 0 !important;
        font-size: 12.5px !important;
        line-height: 1.4 !important;
    }

    .woocommerce-cart .cart_totals table th {
        font-weight: 600 !important;
    }

    /* Shipping section: compact the radio buttons */
    .woocommerce-cart .cart_totals .shipping ul#shipping_method {
        margin: 0 !important;
        padding: 0 !important;
        list-style: none !important;
    }
    .woocommerce-cart .cart_totals .shipping ul#shipping_method li {
        margin: 2px 0 !important;
        padding: 0 !important;
        font-size: 12px !important;
        line-height: 1.4 !important;
    }
    .woocommerce-cart .cart_totals .shipping ul#shipping_method li input[type="radio"] {
        margin-right: 4px !important;
        transform: scale(0.85) !important;
    }
    .woocommerce-cart .cart_totals .shipping ul#shipping_method li label {
        font-size: 12px !important;
    }

    /* "Shipping to..." text (the address line) — smaller */
    .woocommerce-cart .cart_totals .shipping-calculator-button,
    .woocommerce-cart .cart_totals .woocommerce-shipping-destination {
        font-size: 11px !important;
        color: #6B7280 !important;
        margin-top: 4px !important;
        line-height: 1.4 !important;
    }

    /* TOTAL row — bigger but tighter */
    .woocommerce-cart .cart_totals .order-total th {
        font-size: 14px !important;
        padding-top: 10px !important;
    }
    .woocommerce-cart .cart_totals .order-total td {
        font-size: 14px !important;
        padding-top: 10px !important;
        font-weight: 700 !important;
    }
    .woocommerce-cart .cart_totals .order-total .woocommerce-Price-amount {
        font-size: 17px !important;
        color: #7B4FBF !important;
        font-weight: 700 !important;
    }

    /* ──────────────────────────────────────────────
       4. SWAP BUTTON POSITIONS
       Move "Proceed to checkout" UP to where Update cart was
       (just below Apply coupon, inside the line item card)
       
       Approach: use position: fixed/sticky on the checkout
       button so it visually appears above the cart_totals
       
       Cleanest implementation: position the wc-proceed-to-checkout
       absolutely inside the cart-form, right after the actions row
       ────────────────────────────────────────────── */

    /* Promote the checkout button visually — pull it UP toward
       the actions row by giving it a negative margin and styling
       it to look like a primary action */
    .woocommerce-cart .cart_totals .wc-proceed-to-checkout {
        order: -1 !important;
        padding: 0 0 16px !important;
        margin: 0 !important;
        position: relative !important;
        bottom: auto !important;
        background: transparent !important;
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
        border-top: none !important;
        border-radius: 0 !important;
    }

    /* Make cart_totals a flex container so we can reorder children */
    .woocommerce-cart .cart_totals {
        display: flex !important;
        flex-direction: column !important;
    }
    .woocommerce-cart .cart_totals > h2 {
        order: 0 !important;
    }
    .woocommerce-cart .cart_totals > .shop_table {
        order: 1 !important;
    }
    .woocommerce-cart .cart_totals > .wc-proceed-to-checkout {
        order: 2 !important;
        padding-top: 16px !important;
    }

    /* Wait — actually keep checkout at the BOTTOM of cart_totals
       (after totals so customers see total before clicking).
       That's where it already is. The visual "swap" the user wants
       is making the Apply coupon area smaller/lighter so checkout
       feels like the primary action.
    */

    /* Apply coupon button: keep dark purple but slightly smaller */
    .woocommerce-cart .coupon.is-open button[name="apply_coupon"] {
        padding: 10px !important;
        font-size: 13px !important;
        background: linear-gradient(135deg, #7B4FBF 0%, #5A2FA8 100%) !important;
        color: #fff !important;
        font-weight: 600 !important;
    }

    /* Proceed to checkout: keep it as the dominant action */
    .woocommerce-cart .cart_totals .wc-proceed-to-checkout a.checkout-button {
        font-size: 15px !important;
        padding: 14px !important;
        font-weight: 700 !important;
        box-shadow: 0 6px 18px rgba(123,79,191,0.35) !important;
    }

    /* Tighten the line item card padding more */
    .woocommerce-cart-form {
        padding: 0 !important;
    }
}
/* ============================================================
   NUROPEPTIDES — CART QUANTITY FINAL FIX
   Append to bottom of woocommerce.css
   Mobile only (≤768px)
   
   Goals:
   - Quantity controls less than half current size
   - Quantity sits on the same horizontal line as price
   - Both align cleanly with the product image baseline
   ============================================================ */

@media (max-width: 768px) {

    /* Restructure the line item: image | (name + qty + price aligned) | remove */
    .woocommerce-cart table.cart tr.cart_item {
        grid-template-columns: 56px 1fr auto !important;
        grid-template-rows: auto auto !important;
        grid-template-areas:
            "image  details remove"
            "image  bottom  bottom" !important;
        gap: 4px 10px !important;
        padding: 12px !important;
        align-items: start !important;
    }

    /* Product name on top */
    .woocommerce-cart table.cart tr.cart_item td.product-name {
        grid-area: details !important;
        align-self: start !important;
        padding-top: 2px !important;
    }
    .woocommerce-cart table.cart tr.cart_item td.product-name a {
        font-size: 13px !important;
        font-weight: 600 !important;
        line-height: 1.25 !important;
        margin: 0 !important;
    }

    /* Combine quantity + subtotal into a single row beneath name */
    .woocommerce-cart table.cart tr.cart_item td.product-quantity {
        grid-area: bottom !important;
        display: inline-flex !important;
        align-items: center !important;
        align-self: end !important;
        margin-top: 4px !important;
    }

    .woocommerce-cart table.cart tr.cart_item td.product-subtotal {
        grid-area: bottom !important;
        justify-self: end !important;
        align-self: center !important;
        font-size: 14px !important;
        font-weight: 700 !important;
        margin-top: 4px !important;
        margin-left: auto !important;
    }

    /* Both qty and subtotal share the same grid cell — use flex on parent
       Override: put qty and subtotal in separate flex containers */
    .woocommerce-cart table.cart tr.cart_item {
        position: relative !important;
    }

    /* Rework: put qty+price on the same baseline */
    .woocommerce-cart table.cart tr.cart_item td.product-quantity {
        grid-area: bottom !important;
        align-self: center !important;
        justify-self: start !important;
    }
    .woocommerce-cart table.cart tr.cart_item td.product-subtotal {
        grid-area: bottom !important;
        align-self: center !important;
        justify-self: end !important;
    }

    /* TINY quantity controls — about 40% smaller */
    .woocommerce-cart .quantity {
        display: inline-flex !important;
        align-items: center !important;
        background: #F9F7FF !important;
        border: 1px solid #E5DFEF !important;
        border-radius: 6px !important;
        padding: 0 !important;
        height: 24px !important;
    }

    .woocommerce-cart .quantity input.qty {
        width: 22px !important;
        height: 22px !important;
        font-size: 11px !important;
        font-weight: 700 !important;
        padding: 0 !important;
        border: none !important;
        border-left: 1px solid #E5DFEF !important;
        border-right: 1px solid #E5DFEF !important;
        background: #fff !important;
        text-align: center !important;
        line-height: 22px !important;
        color: #2D1B5E !important;
    }

    .woocommerce-cart .nuro-qty-btn {
        width: 22px !important;
        height: 22px !important;
        font-size: 13px !important;
        font-weight: 600 !important;
        line-height: 22px !important;
        padding: 0 !important;
        border: none !important;
        background: transparent !important;
        color: #4B5563 !important;
        cursor: pointer !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        border-radius: 0 !important;
    }
    .woocommerce-cart .nuro-qty-btn:hover {
        background: #ECE3FA !important;
        color: #6A4C93 !important;
    }
    .woocommerce-cart .nuro-qty-btn.nuro-qty-minus {
        border-radius: 5px 0 0 5px !important;
    }
    .woocommerce-cart .nuro-qty-btn.nuro-qty-plus {
        border-radius: 0 5px 5px 0 !important;
    }

    /* Subtotal price — clean and aligned with quantity baseline */
    .woocommerce-cart table.cart tr.cart_item td.product-subtotal {
        font-size: 14px !important;
        font-weight: 700 !important;
        color: #111827 !important;
        line-height: 1 !important;
    }
    .woocommerce-cart table.cart tr.cart_item td.product-subtotal .woocommerce-Price-amount {
        font-size: 14px !important;
        font-weight: 700 !important;
    }

    /* Make the bottom row a flex container so qty + price sit perfectly aligned */
    .woocommerce-cart table.cart tr.cart_item td.product-quantity,
    .woocommerce-cart table.cart tr.cart_item td.product-subtotal {
        display: flex !important;
        align-items: center !important;
    }

    /* Product image — keep at 56px for clean alignment */
    .woocommerce-cart table.cart tr.cart_item td.product-thumbnail {
        grid-area: image !important;
        width: 56px !important;
        height: 56px !important;
        align-self: center !important;
    }

    /* Remove × — top right, small */
    .woocommerce-cart table.cart tr.cart_item td.product-remove {
        grid-area: remove !important;
        align-self: start !important;
    }
    .woocommerce-cart table.cart tr.cart_item td.product-remove a.remove {
        width: 20px !important;
        height: 20px !important;
        font-size: 14px !important;
    }
}
/* ============================================================
   NUROPEPTIDES — MOBILE FOOTER POLISH
   Append to bottom of woocommerce.css
   Mobile only (≤768px)
   
   Changes:
   - Smaller logo and logo container
   - Product Categories + Legal & Information side-by-side
     (instead of stacked top-to-bottom)
   - Tagline tightened
   - Newsletter section pulled up to fit
   ============================================================ */

@media (max-width: 768px) {

    /* ──────────────────────────────────────────────
       FOOTER TOP — tighter padding
       ────────────────────────────────────────────── */
    .footer-top {
        padding: 36px 0 28px !important;
    }

    .footer-inner {
        padding: 0 20px !important;
        gap: 24px !important;
        grid-template-columns: 1fr !important;
        grid-template-areas:
            "brand"
            "columns"
            "signup" !important;
    }

    /* ──────────────────────────────────────────────
       LOGO + TAGLINE
       ────────────────────────────────────────────── */
    .footer-brand {
        grid-area: brand !important;
        text-align: center !important;
    }

    .footer-logo-wrap {
        padding: 6px 12px !important;
        margin-bottom: 12px !important;
        border-radius: 8px !important;
    }

    .footer-logo {
        height: 26px !important;
    }

    .footer-tagline {
        font-size: 11.5px !important;
        line-height: 1.55 !important;
        max-width: 280px !important;
        margin: 0 auto !important;
        text-align: center !important;
    }

    /* ──────────────────────────────────────────────
       PRODUCT CATEGORIES + LEGAL — side by side
       Wrap them in a 2-column grid
       ────────────────────────────────────────────── */
    
    /* The two .footer-col elements (excluding the signup col) need
       to share a row. We use a clever trick: target the nth-child
       footer-col elements (2 and 3) and force them into a 2-column
       grid by giving the footer-inner a contents wrapper behavior. */

    /* Make footer-cols 2 and 3 display in a 2-column flex container */
    .footer-col:not(.footer-signup-col):not(.footer-brand) {
        display: block !important;
    }

    /* The trick: we use a CSS-only approach with :nth-of-type 
       to put cols 2 and 3 (Categories and Legal) into a wrapper-like 
       grid by assigning them to grid columns within "columns" area */
    
    .footer-inner > .footer-col:nth-of-type(2),
    .footer-inner > .footer-col:nth-of-type(3) {
        grid-area: columns !important;
    }

    /* Since both share the same grid-area, we need a real subgrid.
       Switch approach: keep them in the natural flow but use display:contents
       on the footer-inner and create a side-by-side layout for these two */

    /* Actually the cleanest way: target the 2 middle cols and 
       arrange them in a flex row using a parent pseudo-grid */
    
    /* Reset the grid-area approach above */
    .footer-inner > .footer-col:nth-of-type(2),
    .footer-inner > .footer-col:nth-of-type(3) {
        grid-area: auto !important;
    }

    /* Use grid auto-flow to place cols side by side */
    .footer-inner {
        grid-template-areas: none !important;
        grid-template-columns: 1fr 1fr !important;
        gap: 24px 20px !important;
    }

    /* Brand spans full width */
    .footer-brand {
        grid-column: 1 / -1 !important;
    }

    /* Categories and Legal each take one column, side by side */
    .footer-inner > .footer-col:nth-of-type(2) {
        grid-column: 1 / 2 !important;
    }
    .footer-inner > .footer-col:nth-of-type(3) {
        grid-column: 2 / 3 !important;
    }

    /* Signup spans full width below */
    .footer-signup-col {
        grid-column: 1 / -1 !important;
    }

    /* ──────────────────────────────────────────────
       COLUMN TITLES & LINKS — smaller on mobile
       ────────────────────────────────────────────── */
    .footer-col-title {
        font-size: 13px !important;
        margin-bottom: 12px !important;
    }

    .footer-link {
        font-size: 12px !important;
        margin-bottom: 8px !important;
        line-height: 1.4 !important;
    }

    .footer-link-all {
        font-size: 12.5px !important;
        margin-top: 4px !important;
    }

    /* ──────────────────────────────────────────────
       NEWSLETTER SIGNUP — tighter
       ────────────────────────────────────────────── */
    .footer-signup-col {
        margin-top: 4px !important;
    }

    .footer-signup-heading {
        font-size: 22px !important;
        line-height: 1.15 !important;
        margin-bottom: 6px !important;
    }

    .footer-signup-sub {
        font-size: 12px !important;
        margin-bottom: 14px !important;
    }

    .footer-email-row {
        padding: 4px 4px 4px 16px !important;
        margin-bottom: 10px !important;
    }

    .footer-email-input {
        font-size: 13px !important;
        padding: 8px 0 !important;
    }

    .footer-email-btn {
        width: 36px !important;
        height: 36px !important;
    }

    .footer-agree-label {
        font-size: 10.5px !important;
    }

    /* ──────────────────────────────────────────────
       FOOTER BOTTOM (disclaimers)
       ────────────────────────────────────────────── */
    .footer-bottom {
        padding: 22px 18px 28px !important;
    }

    .footer-research-label {
        font-size: 10.5px !important;
        margin-bottom: 10px !important;
    }

    .footer-disclaimer-text {
        font-size: 10px !important;
        line-height: 1.65 !important;
        margin-bottom: 6px !important;
    }

    .footer-copy {
        font-size: 10px !important;
        margin-top: 14px !important;
    }
}

/* Override the existing ≤560px inline rule that forces single column.
   We want categories + legal to STAY side-by-side even on small phones. */
@media (max-width: 560px) {
    .footer-inner {
        grid-template-columns: 1fr 1fr !important;
        padding: 0 16px !important;
    }
    .footer-brand,
    .footer-signup-col {
        grid-column: 1 / -1 !important;
    }
    .footer-inner > .footer-col:nth-of-type(2) {
        grid-column: 1 / 2 !important;
    }
    .footer-inner > .footer-col:nth-of-type(3) {
        grid-column: 2 / 3 !important;
    }
}
/* ============================================================
   NUROPEPTIDES — FINAL MOBILE POLISH
   Append to bottom of woocommerce.css
   Mobile only (≤768px)
   
   Changes:
   1. Footer: swap newsletter and brand positions
   2. Checkout payment method section: half size
   3. Calculator: tighter, dose unit toggle fits, results visible
   ============================================================ */

@media (max-width: 768px) {

    /* ──────────────────────────────────────────────
       1. FOOTER LAYOUT SWAP
       Newsletter goes FIRST, then categories+legal, brand LAST
       ────────────────────────────────────────────── */
    .footer-inner {
        grid-template-columns: 1fr 1fr !important;
        gap: 24px 20px !important;
    }

    /* Newsletter at top, full width */
    .footer-signup-col {
        grid-column: 1 / -1 !important;
        order: 1 !important;
        text-align: left !important;
    }

    /* Categories on left */
    .footer-inner > .footer-col:nth-of-type(2) {
        grid-column: 1 / 2 !important;
        order: 2 !important;
    }

    /* Legal on right */
    .footer-inner > .footer-col:nth-of-type(3) {
        grid-column: 2 / 3 !important;
        order: 3 !important;
    }

    /* Brand (logo + tagline) at bottom, full width */
    .footer-brand {
        grid-column: 1 / -1 !important;
        order: 4 !important;
        text-align: center !important;
        margin-top: 12px !important;
        padding-top: 18px !important;
        border-top: 1px solid rgba(255,255,255,0.08) !important;
    }

    /* Newsletter heading slightly smaller since it's now the first thing */
    .footer-signup-heading {
        font-size: 22px !important;
    }

    /* ──────────────────────────────────────────────
       2. CHECKOUT — PAYMENT METHOD SECTION HALF SIZE
       ────────────────────────────────────────────── */

    /* Payment Method title smaller */
    .woocommerce-checkout #payment .payment-method-title,
    .fc-checkout #payment_method_title,
    .fc-payment-section h2,
    .fc-step__title--payment_method,
    .wc-block-checkout__payment-method h2 {
        font-size: 14px !important;
        margin-bottom: 8px !important;
    }

    /* The whole payment box: tighter padding */
    .woocommerce-checkout #payment,
    .fc-payment-section,
    .fc-step--payment_method,
    .woocommerce-checkout .payment_methods {
        padding: 10px !important;
    }

    /* Each payment option label */
    .woocommerce-checkout ul.payment_methods,
    .woocommerce-checkout .payment_methods {
        padding: 0 !important;
        margin: 0 !important;
        list-style: none !important;
    }

    .woocommerce-checkout ul.payment_methods li,
    .woocommerce-checkout .wc_payment_method,
    .woocommerce-checkout .payment_method_nowpayments,
    .woocommerce-checkout li.payment_method {
        padding: 10px 12px !important;
        margin: 0 !important;
        font-size: 13px !important;
        line-height: 1.4 !important;
    }

    .woocommerce-checkout ul.payment_methods li label,
    .woocommerce-checkout .wc_payment_method label {
        font-size: 13px !important;
        font-weight: 600 !important;
        line-height: 1.3 !important;
        padding: 0 !important;
        margin: 0 !important;
    }

    /* Pay with NOWPayments helper text */
    .woocommerce-checkout .payment_box,
    .woocommerce-checkout .wc_payment_method .payment_box {
        padding: 8px 10px !important;
        margin-top: 4px !important;
        font-size: 12px !important;
        line-height: 1.4 !important;
    }

    /* Logo image inside payment method (NOWPayments logo) */
    .woocommerce-checkout ul.payment_methods li label img,
    .woocommerce-checkout .wc_payment_method label img {
        max-height: 22px !important;
        width: auto !important;
        vertical-align: middle !important;
    }

    /* Save changes button under payment */
    .woocommerce-checkout #place_order,
    .fc-checkout button[type="submit"] {
        padding: 12px !important;
        font-size: 14px !important;
    }

    /* ──────────────────────────────────────────────
       3. CALCULATOR — TIGHTER, BUTTONS PROPERLY ALIGNED
       ────────────────────────────────────────────── */

    /* Calculator wrapper — single column on mobile */
    .calc-wrapper {
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 16px !important;
    }

    /* Calculator box — tighter padding */
    .calc-box {
        padding: 18px !important;
        border-radius: 14px !important;
    }

    .calc-box h3 {
        font-size: 18px !important;
        margin: 0 0 8px !important;
        line-height: 1.2 !important;
    }

    .calc-intro {
        font-size: 12px !important;
        margin-bottom: 14px !important;
        line-height: 1.5 !important;
    }

    /* Form groups */
    .calc-box .form-group {
        margin-bottom: 12px !important;
    }

    .form-label {
        font-size: 12px !important;
        margin-bottom: 4px !important;
        font-weight: 600 !important;
    }
    .form-label span {
        font-size: 11px !important;
        font-weight: 400 !important;
    }

    .form-input {
        padding: 9px 12px !important;
        font-size: 14px !important;
        height: auto !important;
    }

    /* Form row with Bac water + Dose: stack on mobile */
    .calc-box .form-row {
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 12px !important;
    }

    /* Desired dose row — make sure mcg/mg buttons fit next to input */
    .calc-box .form-group > div[style*="display:flex"] {
        display: flex !important;
        gap: 6px !important;
        align-items: stretch !important;
    }
    .calc-box .form-group > div[style*="display:flex"] input.form-input {
        flex: 1 !important;
        min-width: 0 !important;
    }

    /* mcg/mg toggle buttons — properly sized */
    .dose-unit-btn {
        padding: 8px 12px !important;
        font-size: 12px !important;
        font-weight: 700 !important;
        white-space: nowrap !important;
        flex-shrink: 0 !important;
    }

    /* RESULT BOX — make sure it's visible and not cut off */
    .calc-result {
        margin-top: 16px !important;
        padding: 16px !important;
        border-radius: 12px !important;
    }

    .calc-result-label {
        font-size: 10px !important;
        margin-bottom: 4px !important;
        letter-spacing: 1px !important;
    }

    .calc-result-num {
        font-size: 32px !important;
        line-height: 1.1 !important;
        margin-bottom: 4px !important;
    }

    .calc-result-sub {
        font-size: 11px !important;
        margin-bottom: 12px !important;
        line-height: 1.4 !important;
    }

    /* Calculator breakdown grid — 2 columns on mobile */
    .calc-breakdown {
        display: grid !important;
        grid-template-columns: 1fr 1fr !important;
        gap: 8px !important;
    }

    .calc-breakdown-item {
        font-size: 11px !important;
        padding: 8px 10px !important;
        line-height: 1.3 !important;
        display: flex !important;
        flex-direction: column !important;
        gap: 2px !important;
    }
    .calc-breakdown-item strong {
        font-size: 13px !important;
    }

    /* Calculator info section (the "How to use" panel) — tighter */
    .calc-info {
        padding: 18px !important;
        border-radius: 14px !important;
    }

    .calc-info h4 {
        font-size: 16px !important;
        margin: 0 0 12px !important;
    }

    .info-step {
        gap: 10px !important;
        margin-bottom: 10px !important;
    }

    .info-step-num {
        width: 24px !important;
        height: 24px !important;
        font-size: 12px !important;
        flex-shrink: 0 !important;
    }

    .info-step-text {
        font-size: 12px !important;
        line-height: 1.5 !important;
    }
    .info-step-text strong {
        font-size: 12.5px !important;
    }
}
/* ============================================================
   NUROPEPTIDES — FINAL MOBILE POLISH
   Append to bottom of woocommerce.css
   Mobile only (≤768px)
   
   Changes:
   1. Footer: swap newsletter and brand positions
   2. Checkout payment method section: half size
   3. Calculator: tighter, dose unit toggle fits, results visible
   ============================================================ */

@media (max-width: 768px) {

    /* ──────────────────────────────────────────────
       1. FOOTER LAYOUT SWAP
       Newsletter goes FIRST, then categories+legal, brand LAST
       ────────────────────────────────────────────── */
    .footer-inner {
        grid-template-columns: 1fr 1fr !important;
        gap: 24px 20px !important;
    }

    /* Newsletter at top, full width */
    .footer-signup-col {
        grid-column: 1 / -1 !important;
        order: 1 !important;
        text-align: left !important;
    }

    /* Categories on left */
    .footer-inner > .footer-col:nth-of-type(2) {
        grid-column: 1 / 2 !important;
        order: 2 !important;
    }

    /* Legal on right */
    .footer-inner > .footer-col:nth-of-type(3) {
        grid-column: 2 / 3 !important;
        order: 3 !important;
    }

    /* Brand (logo + tagline) at bottom, full width */
    .footer-brand {
        grid-column: 1 / -1 !important;
        order: 4 !important;
        text-align: center !important;
        margin-top: 12px !important;
        padding-top: 18px !important;
        border-top: 1px solid rgba(255,255,255,0.08) !important;
    }

    /* Newsletter heading slightly smaller since it's now the first thing */
    .footer-signup-heading {
        font-size: 22px !important;
    }

    /* ──────────────────────────────────────────────
       2. CHECKOUT — PAYMENT METHOD SECTION HALF SIZE
       ────────────────────────────────────────────── */

    /* Payment Method title smaller */
    .woocommerce-checkout #payment .payment-method-title,
    .fc-checkout #payment_method_title,
    .fc-payment-section h2,
    .fc-step__title--payment_method,
    .wc-block-checkout__payment-method h2 {
        font-size: 14px !important;
        margin-bottom: 8px !important;
    }

    /* The whole payment box: tighter padding */
    .woocommerce-checkout #payment,
    .fc-payment-section,
    .fc-step--payment_method,
    .woocommerce-checkout .payment_methods {
        padding: 10px !important;
    }

    /* Each payment option label */
    .woocommerce-checkout ul.payment_methods,
    .woocommerce-checkout .payment_methods {
        padding: 0 !important;
        margin: 0 !important;
        list-style: none !important;
    }

    .woocommerce-checkout ul.payment_methods li,
    .woocommerce-checkout .wc_payment_method,
    .woocommerce-checkout .payment_method_nowpayments,
    .woocommerce-checkout li.payment_method {
        padding: 10px 12px !important;
        margin: 0 !important;
        font-size: 13px !important;
        line-height: 1.4 !important;
    }

    .woocommerce-checkout ul.payment_methods li label,
    .woocommerce-checkout .wc_payment_method label {
        font-size: 13px !important;
        font-weight: 600 !important;
        line-height: 1.3 !important;
        padding: 0 !important;
        margin: 0 !important;
    }

    /* Pay with NOWPayments helper text */
    .woocommerce-checkout .payment_box,
    .woocommerce-checkout .wc_payment_method .payment_box {
        padding: 8px 10px !important;
        margin-top: 4px !important;
        font-size: 12px !important;
        line-height: 1.4 !important;
    }

    /* Logo image inside payment method (NOWPayments logo) */
    .woocommerce-checkout ul.payment_methods li label img,
    .woocommerce-checkout .wc_payment_method label img {
        max-height: 22px !important;
        width: auto !important;
        vertical-align: middle !important;
    }

    /* Save changes button under payment */
    .woocommerce-checkout #place_order,
    .fc-checkout button[type="submit"] {
        padding: 12px !important;
        font-size: 14px !important;
    }

    /* ──────────────────────────────────────────────
       3. CALCULATOR — TIGHTER, BUTTONS PROPERLY ALIGNED
       ────────────────────────────────────────────── */

    /* Calculator wrapper — single column on mobile */
    .calc-wrapper {
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 16px !important;
    }

    /* Calculator box — tighter padding */
    .calc-box {
        padding: 18px !important;
        border-radius: 14px !important;
    }

    .calc-box h3 {
        font-size: 18px !important;
        margin: 0 0 8px !important;
        line-height: 1.2 !important;
    }

    .calc-intro {
        font-size: 12px !important;
        margin-bottom: 14px !important;
        line-height: 1.5 !important;
    }

    /* Form groups */
    .calc-box .form-group {
        margin-bottom: 12px !important;
    }

    .form-label {
        font-size: 12px !important;
        margin-bottom: 4px !important;
        font-weight: 600 !important;
    }
    .form-label span {
        font-size: 11px !important;
        font-weight: 400 !important;
    }

    .form-input {
        padding: 9px 12px !important;
        font-size: 14px !important;
        height: auto !important;
    }

    /* Form row with Bac water + Dose: stack on mobile */
    .calc-box .form-row {
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 12px !important;
    }

    /* Desired dose row — make sure mcg/mg buttons fit next to input */
    .calc-box .form-group > div[style*="display:flex"] {
        display: flex !important;
        gap: 6px !important;
        align-items: stretch !important;
    }
    .calc-box .form-group > div[style*="display:flex"] input.form-input {
        flex: 1 !important;
        min-width: 0 !important;
    }

    /* mcg/mg toggle buttons — properly sized */
    .dose-unit-btn {
        padding: 8px 12px !important;
        font-size: 12px !important;
        font-weight: 700 !important;
        white-space: nowrap !important;
        flex-shrink: 0 !important;
    }

    /* RESULT BOX — make sure it's visible and not cut off */
    .calc-result {
        margin-top: 16px !important;
        padding: 16px !important;
        border-radius: 12px !important;
    }

    .calc-result-label {
        font-size: 10px !important;
        margin-bottom: 4px !important;
        letter-spacing: 1px !important;
    }

    .calc-result-num {
        font-size: 32px !important;
        line-height: 1.1 !important;
        margin-bottom: 4px !important;
    }

    .calc-result-sub {
        font-size: 11px !important;
        margin-bottom: 12px !important;
        line-height: 1.4 !important;
    }

    /* Calculator breakdown grid — 2 columns on mobile */
    .calc-breakdown {
        display: grid !important;
        grid-template-columns: 1fr 1fr !important;
        gap: 8px !important;
    }

    .calc-breakdown-item {
        font-size: 11px !important;
        padding: 8px 10px !important;
        line-height: 1.3 !important;
        display: flex !important;
        flex-direction: column !important;
        gap: 2px !important;
    }
    .calc-breakdown-item strong {
        font-size: 13px !important;
    }

    /* Calculator info section (the "How to use" panel) — tighter */
    .calc-info {
        padding: 18px !important;
        border-radius: 14px !important;
    }

    .calc-info h4 {
        font-size: 16px !important;
        margin: 0 0 12px !important;
    }

    .info-step {
        gap: 10px !important;
        margin-bottom: 10px !important;
    }

    .info-step-num {
        width: 24px !important;
        height: 24px !important;
        font-size: 12px !important;
        flex-shrink: 0 !important;
    }

    .info-step-text {
        font-size: 12px !important;
        line-height: 1.5 !important;
    }
    .info-step-text strong {
        font-size: 12.5px !important;
    }
}
/* ============================================================
   NUROPEPTIDES — VIEW ALL + FILTER FADE
   Append to bottom of woocommerce.css
   Mobile only (≤768px)
   ============================================================ */

@media (max-width: 768px) {

    /* ──────────────────────────────────────────────
       1. PRODUCTS GRID — show 6, hide rest until View All clicked
       JS handles the .show-all class toggle
       ────────────────────────────────────────────── */

    /* By default on mobile, hide products beyond the 6th */
    .products-grid:not(.show-all) .product-card:nth-child(n+7) {
        display: none !important;
    }

    /* View All button container */
    .view-all-wrap {
        display: flex !important;
        justify-content: center !important;
        margin-top: 16px !important;
    }

    .view-all-btn {
        display: inline-flex !important;
        align-items: center !important;
        gap: 6px !important;
        padding: 10px 22px !important;
        background: transparent !important;
        border: 1.5px solid #7B4FBF !important;
        color: #7B4FBF !important;
        font-size: 13px !important;
        font-weight: 600 !important;
        border-radius: 50px !important;
        cursor: pointer !important;
        transition: all 0.2s !important;
        font-family: inherit !important;
    }
    .view-all-btn:hover,
    .view-all-btn:active {
        background: #7B4FBF !important;
        color: #fff !important;
    }

    /* When show-all is active, hide the View All button */
    .products-grid.show-all + .view-all-wrap {
        display: none !important;
    }

    /* ──────────────────────────────────────────────
       2. FILTER CHIPS — fade gradient on right edge
       Indicates there's more to scroll
       ────────────────────────────────────────────── */

    /* Wrap the filter row in a relative container for the fade overlay */
    .shop-toolbar {
        position: relative !important;
    }

    .filter-row {
        position: relative !important;
        overflow-x: auto !important;
        flex-wrap: nowrap !important;
        scrollbar-width: none !important;
        -webkit-overflow-scrolling: touch !important;
        padding: 4px 24px 12px 4px !important;
        scroll-padding-right: 24px !important;
        mask-image: linear-gradient(to right,
            transparent 0,
            #000 8px,
            #000 calc(100% - 28px),
            transparent 100%) !important;
        -webkit-mask-image: linear-gradient(to right,
            transparent 0,
            #000 8px,
            #000 calc(100% - 28px),
            transparent 100%) !important;
    }
    .filter-row::-webkit-scrollbar {
        display: none !important;
    }

    /* Optional: small chevron hint on the right edge */
    .shop-toolbar::after {
        content: "→" !important;
        position: absolute !important;
        top: 50% !important;
        right: 4px !important;
        transform: translateY(-50%) !important;
        color: #7B4FBF !important;
        font-size: 14px !important;
        opacity: 0.6 !important;
        pointer-events: none !important;
        font-weight: 600 !important;
        z-index: 5 !important;
    }
}
/* ============================================================
   NUROPEPTIDES — FINAL MOBILE TOUCH-UPS
   Append to bottom of woocommerce.css
   Mobile only (≤768px)
   ============================================================ */

@media (max-width: 768px) {

    /* ──────────────────────────────────────────────
       1. CART PAGE — remove "Apply coupon" section
       (Customers can still apply at checkout)
       ────────────────────────────────────────────── */
    .woocommerce-cart .woocommerce-cart-form .coupon,
    .woocommerce-cart-form table tr.actions,
    .woocommerce-cart-form table .actions {
        display: none !important;
    }

    /* Reduce empty space where coupon used to be */
    .woocommerce-cart .woocommerce-cart-form {
        margin-bottom: 12px !important;
    }

    /* ──────────────────────────────────────────────
       2. CHECKOUT — hide "Additional Notes" section
       (Backup CSS in case the WooCommerce setting alone
        doesn't fully hide it)
       ────────────────────────────────────────────── */
    .fc-step--order_notes,
    .fc-checkout-step--order_notes,
    .fc-step__substep--order_notes,
    .woocommerce-additional-fields,
    #order_comments_field,
    .fc-step--additional_notes,
    [data-step-id="order_notes"],
    [data-step-id="additional_notes"] {
        display: none !important;
    }

    /* Hide any "Additional notes" heading or label */
    .fc-step__title:has(+ * #order_comments_field),
    .form-row.notes,
    .woocommerce-additional-fields__field-wrapper {
        display: none !important;
    }

    /* ──────────────────────────────────────────────
       3. MOBILE DROPDOWN MENU — sleeker
       Inset from edges, rounded, subtle shadow
       ────────────────────────────────────────────── */

    .mobile-menu {
        top: 64px !important;
        left: 12px !important;
        right: 12px !important;
        width: auto !important;
        max-width: none !important;
        border-radius: 16px !important;
        box-shadow: 0 20px 50px rgba(45, 27, 94, 0.18),
                    0 4px 12px rgba(45, 27, 94, 0.08) !important;
        overflow: hidden !important;
        max-height: calc(100vh - 80px) !important;
        background: #fff !important;
    }

    /* Tighter menu items */
    .mobile-menu a,
    .mobile-menu .mobile-menu-link,
    .mobile-menu li a {
        padding: 14px 22px !important;
        font-size: 15px !important;
        font-weight: 500 !important;
        color: #2D1B5E !important;
    }

    /* Subtle hover/tap state */
    .mobile-menu a:hover,
    .mobile-menu a:active {
        background: #F5F0FA !important;
        color: #7B4FBF !important;
    }

    /* Cleaner separator between items */
    .mobile-menu li,
    .mobile-menu > a:not(:last-child) {
        border-bottom: 1px solid rgba(45, 27, 94, 0.05) !important;
    }
    .mobile-menu li:last-child,
    .mobile-menu > a:last-child {
        border-bottom: none !important;
    }

    /* Smooth chevron (› at end of each item) */
    .mobile-menu a::after,
    .mobile-menu .mobile-menu-link::after {
        color: rgba(123, 79, 191, 0.4) !important;
        font-size: 18px !important;
    }

    /* Overlay behind menu — slightly darker for depth */
    .mobile-menu-overlay {
        background: rgba(45, 27, 94, 0.35) !important;
        backdrop-filter: blur(3px) !important;
        -webkit-backdrop-filter: blur(3px) !important;
    }

    /* Hamburger to X transition — slightly smaller button */
    .mobile-menu-toggle,
    .menu-toggle {
        border-radius: 10px !important;
    }
}
/* ============================================================
   NUROPEPTIDES — BILLING CHECKBOX + SMALLER DROPDOWN
   Append to bottom of woocommerce.css
   Mobile only (≤768px)
   ============================================================ */

@media (max-width: 768px) {

    /* ──────────────────────────────────────────────
       1. BILLING ADDRESS "Same as shipping" checkbox
       Replace giant default checkbox with custom purple toggle
       ────────────────────────────────────────────── */

    /* Hide the native checkbox visually but keep it accessible */
    .fc-step--billing_address input[type="checkbox"],
    .fc-billing-same-as-shipping input[type="checkbox"],
    #billing_same_as_shipping,
    .fc-step__substep--billing_address input[type="checkbox"],
    input[name="billing_same_as_shipping"] {
        position: absolute !important;
        opacity: 0 !important;
        pointer-events: none !important;
        width: 0 !important;
        height: 0 !important;
    }

    /* Style the wrapping label as a custom toggle/checkbox */
    .fc-step--billing_address label,
    .fc-billing-same-as-shipping label,
    label[for="billing_same_as_shipping"],
    .fc-step__substep--billing_address > label {
        display: flex !important;
        align-items: center !important;
        gap: 10px !important;
        padding: 12px 14px !important;
        background: #F9F7FF !important;
        border: 1.5px solid #E5DFEF !important;
        border-radius: 10px !important;
        cursor: pointer !important;
        font-size: 13.5px !important;
        font-weight: 500 !important;
        color: #2D1B5E !important;
        transition: all 0.2s !important;
        margin: 0 !important;
        line-height: 1.3 !important;
        position: relative !important;
    }

    /* Add custom checkbox box before the label text using ::before */
    .fc-step--billing_address label::before,
    .fc-billing-same-as-shipping label::before,
    label[for="billing_same_as_shipping"]::before,
    .fc-step__substep--billing_address > label::before {
        content: "" !important;
        display: inline-block !important;
        width: 20px !important;
        height: 20px !important;
        border: 1.5px solid #C8B8E0 !important;
        border-radius: 5px !important;
        background: #fff !important;
        flex-shrink: 0 !important;
        transition: all 0.2s !important;
    }

    /* When the (hidden) input is checked, style the ::before as filled purple */
    .fc-step--billing_address input[type="checkbox"]:checked + label::before,
    .fc-step--billing_address label:has(input[type="checkbox"]:checked)::before,
    input[name="billing_same_as_shipping"]:checked ~ label::before,
    label:has(input[name="billing_same_as_shipping"]:checked)::before {
        background: linear-gradient(135deg, #7B4FBF 0%, #5A2FA8 100%) !important;
        border-color: #7B4FBF !important;
        background-image:
            linear-gradient(135deg, #7B4FBF 0%, #5A2FA8 100%),
            url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='white'><path d='M13.5 4.5L6 12l-3.5-3.5L4 7l2 2 6-6z'/></svg>") !important;
    }

    /* Stronger approach: create a custom checkmark using box-shadow inset */
    .fc-step--billing_address input[type="checkbox"]:checked ~ label::before,
    label:has(input[type="checkbox"]:checked)::before {
        background: #7B4FBF !important;
        border-color: #7B4FBF !important;
        background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><path d='M13.5 4.5L6 12l-3.5-3.5L4 7l2 2 6-6z' fill='white'/></svg>") !important;
        background-repeat: no-repeat !important;
        background-position: center !important;
        background-size: 14px !important;
    }

    /* Hover state on the label */
    .fc-step--billing_address label:hover,
    .fc-billing-same-as-shipping label:hover,
    label[for="billing_same_as_shipping"]:hover {
        background: #F5F0FA !important;
        border-color: #C8B8E0 !important;
    }

    /* ──────────────────────────────────────────────
       2. MOBILE DROPDOWN MENU — slightly smaller
       Reduce padding inside menu and font size
       ────────────────────────────────────────────── */

    .mobile-menu {
        top: 60px !important;
        left: 16px !important;
        right: 16px !important;
        max-width: 320px !important;
        margin-left: auto !important;
        margin-right: 12px !important;
        border-radius: 14px !important;
    }

    .mobile-menu a,
    .mobile-menu .mobile-menu-link,
    .mobile-menu li a {
        padding: 12px 18px !important;
        font-size: 14px !important;
    }

    .mobile-menu a::after,
    .mobile-menu .mobile-menu-link::after {
        font-size: 16px !important;
    }
}
/* ============================================================
   NUROPEPTIDES — TINY BILLING CHECKBOX + STATS ORDER FIX
   Append to bottom of woocommerce.css
   Mobile only (≤768px)
   ============================================================ */

@media (max-width: 768px) {

    /* ──────────────────────────────────────────────
       1. BILLING CHECKBOX — tiny inline style
       Override the previous "card style" with a small
       inline element similar to "Add phone number"
       ────────────────────────────────────────────── */

    /* Reset the previous big-card styling */
    .fc-step--billing_address label,
    .fc-billing-same-as-shipping label,
    label[for="billing_same_as_shipping"],
    .fc-step__substep--billing_address > label {
        display: inline-flex !important;
        align-items: center !important;
        gap: 6px !important;
        padding: 4px 0 !important;
        background: transparent !important;
        border: none !important;
        border-radius: 0 !important;
        cursor: pointer !important;
        font-size: 12.5px !important;
        font-weight: 500 !important;
        color: #2D1B5E !important;
        margin: 0 !important;
        line-height: 1.3 !important;
    }

    .fc-step--billing_address label:hover,
    .fc-billing-same-as-shipping label:hover,
    label[for="billing_same_as_shipping"]:hover {
        background: transparent !important;
        border: none !important;
        color: #7B4FBF !important;
    }

    /* Small custom checkbox box */
    .fc-step--billing_address label::before,
    .fc-billing-same-as-shipping label::before,
    label[for="billing_same_as_shipping"]::before,
    .fc-step__substep--billing_address > label::before {
        content: "" !important;
        display: inline-block !important;
        width: 14px !important;
        height: 14px !important;
        border: 1.5px solid #C8B8E0 !important;
        border-radius: 3px !important;
        background: #fff !important;
        flex-shrink: 0 !important;
        transition: all 0.15s !important;
    }

    /* Checked state */
    .fc-step--billing_address input[type="checkbox"]:checked ~ label::before,
    label:has(input[type="checkbox"]:checked)::before {
        background: #7B4FBF !important;
        border-color: #7B4FBF !important;
        background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><path d='M13.5 4.5L6 12l-3.5-3.5L4 7l2 2 6-6z' fill='white'/></svg>") !important;
        background-repeat: no-repeat !important;
        background-position: center !important;
        background-size: 10px !important;
    }

    /* ──────────────────────────────────────────────
       2. STATS BAR ORDER — make sure it appears
       AFTER products and calculator (force it)
       ────────────────────────────────────────────── */

    /* Re-assert section ordering with stronger specificity */
    body .hero            { order: 1 !important; }
    body #products        { order: 2 !important; }
    body #calculator      { order: 3 !important; }
    body .stats-bar       { order: 4 !important; }
    body #faq             { order: 5 !important; }
    body .site-footer     { order: 99 !important; }

    body .announcement-bar { order: -2 !important; }
    body .site-nav         { order: -1 !important; }

    /* Make sure body is flex (required for order to work) */
    body {
        display: flex !important;
        flex-direction: column !important;
    }
}
/* ============================================================
   NUROPEPTIDES — TINY INLINE BILLING CHECKBOX
   Append to bottom of woocommerce.css
   Both mobile and desktop
   
   Match style of "Add phone" small inline link
   ============================================================ */

/* Override previous pill/card styles for the billing checkbox.
   Make it tiny inline text with a small checkbox icon. */

.fc-step--billing_address label,
.fc-billing-same-as-shipping label,
label[for="billing_same_as_shipping"],
.fc-step__substep--billing_address > label {
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    padding: 0 !important;
    background: transparent !important;
    border: none !important;
    border-radius: 0 !important;
    cursor: pointer !important;
    font-size: 12px !important;
    font-weight: 500 !important;
    color: #6B7280 !important;
    transition: color 0.15s !important;
    margin: 0 !important;
    line-height: 1.3 !important;
    box-shadow: none !important;
}

.fc-step--billing_address label:hover,
.fc-billing-same-as-shipping label:hover,
label[for="billing_same_as_shipping"]:hover {
    background: transparent !important;
    border: none !important;
    color: #7B4FBF !important;
}

/* Tiny checkbox box */
.fc-step--billing_address label::before,
.fc-billing-same-as-shipping label::before,
label[for="billing_same_as_shipping"]::before,
.fc-step__substep--billing_address > label::before {
    content: "" !important;
    display: inline-block !important;
    width: 13px !important;
    height: 13px !important;
    border: 1.5px solid #C8B8E0 !important;
    border-radius: 3px !important;
    background: #fff !important;
    flex-shrink: 0 !important;
    transition: all 0.15s !important;
    box-shadow: none !important;
}

/* Checked state — tiny purple square with white check */
.fc-step--billing_address input[type="checkbox"]:checked ~ label::before,
label:has(input[type="checkbox"]:checked)::before {
    background: #7B4FBF !important;
    border-color: #7B4FBF !important;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><path d='M13.5 4.5L6 12l-3.5-3.5L4 7l2 2 6-6z' fill='white'/></svg>") !important;
    background-repeat: no-repeat !important;
    background-position: center !important;
    background-size: 9px !important;
}

/* When checked: keep label looking minimal, no fill background */
.fc-step--billing_address input[type="checkbox"]:checked ~ label,
label:has(input[type="checkbox"]:checked) {
    background: transparent !important;
    border: none !important;
    color: #7B4FBF !important;
}
/* ============================================================
   NUROPEPTIDES — MOBILE MENU FIX (STRONG)
   Append to bottom of woocommerce.css
   
   Force the mobile dropdown menu to be properly hidden when
   the hamburger isn't tapped. The menu was showing as part of
   the page flow at the top, instead of being a hidden overlay.
   ============================================================ */

@media (max-width: 768px) {

    /* FORCE the mobile menu to be a fixed positioned overlay
       that is HIDDEN by default */
    .mobile-menu {
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        right: 0 !important;
        z-index: 999 !important;
        background: white !important;
        transform: translateY(-100%) !important;
        transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1) !important;
        visibility: hidden !important;
        opacity: 0 !important;
        pointer-events: none !important;
        max-height: 100vh !important;
        overflow-y: auto !important;
        box-shadow: 0 8px 32px rgba(45,27,94,0.15) !important;
    }

    /* When .is-open class is added (by the hamburger toggle JS), show it */
    .mobile-menu.is-open {
        transform: translateY(0) !important;
        visibility: visible !important;
        opacity: 1 !important;
        pointer-events: all !important;
    }

    /* Same for the dark overlay behind the menu */
    .mobile-menu-overlay {
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        right: 0 !important;
        bottom: 0 !important;
        z-index: 998 !important;
        background: rgba(45,27,94,0.5) !important;
        opacity: 0 !important;
        visibility: hidden !important;
        pointer-events: none !important;
        transition: opacity 0.3s ease !important;
    }

    .mobile-menu-overlay.is-open {
        opacity: 1 !important;
        visibility: visible !important;
        pointer-events: all !important;
    }

    /* Make sure the mobile menu list inside the menu doesn't break layout */
    .mobile-menu-list {
        list-style: none !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    /* Make sure the menu items don't appear elsewhere on the page */
    body > ul.mobile-menu-list,
    .site-nav ~ ul.mobile-menu-list,
    .announcement-bar ~ ul.mobile-menu-list {
        display: none !important;
    }
}
/* ============================================================
   NUROPEPTIDES — MOBILE PRODUCT PAGE OVERFLOW FIX
   Append to bottom of woocommerce.css
   
   Fixes content extending past the right edge on mobile product pages.
   Forces all content to respect the viewport width.
   ============================================================ */

@media (max-width: 768px) {

    /* Prevent any horizontal scroll on the page */
    html, body {
        overflow-x: hidden !important;
        max-width: 100vw !important;
    }

    /* Force product page wrapper to fit within viewport */
    .woocommerce.single-product,
    .single-product .product,
    .single-product main,
    .single-product .site-main,
    .single-product .content-area,
    .single-product article {
        max-width: 100% !important;
        overflow-x: hidden !important;
        padding-left: 16px !important;
        padding-right: 16px !important;
        box-sizing: border-box !important;
    }

    /* Product image gallery — never wider than viewport */
    .single-product .woocommerce-product-gallery,
    .single-product .woocommerce-product-gallery__wrapper,
    .single-product .woocommerce-product-gallery__image {
        max-width: 100% !important;
        width: 100% !important;
        float: none !important;
        margin: 0 0 20px !important;
    }

    .single-product .woocommerce-product-gallery img,
    .single-product .woocommerce-product-gallery__image img {
        max-width: 100% !important;
        height: auto !important;
        width: auto !important;
        max-height: 400px !important;
        object-fit: contain !important;
    }

    /* Product summary / details section */
    .single-product .summary,
    .single-product .entry-summary {
        max-width: 100% !important;
        width: 100% !important;
        float: none !important;
        padding: 0 !important;
        margin: 0 !important;
    }

    /* Product title */
    .single-product .product_title,
    .single-product h1.entry-title {
        font-size: 24px !important;
        line-height: 1.2 !important;
        margin: 0 0 12px !important;
        word-wrap: break-word !important;
    }

    /* Price */
    .single-product .price {
        font-size: 22px !important;
        margin-bottom: 16px !important;
    }

    /* Short description */
    .single-product .woocommerce-product-details__short-description {
        font-size: 14px !important;
        line-height: 1.5 !important;
        margin-bottom: 18px !important;
    }

    /* Quantity + Add to Cart row */
    .single-product .cart {
        display: flex !important;
        flex-wrap: wrap !important;
        gap: 10px !important;
        align-items: center !important;
        max-width: 100% !important;
    }

    .single-product .cart .quantity {
        flex-shrink: 0 !important;
    }

    .single-product .cart .single_add_to_cart_button {
        flex: 1 !important;
        min-width: 200px !important;
        padding: 14px 20px !important;
        font-size: 14px !important;
    }

    /* Product meta (SKU, categories, tags) */
    .single-product .product_meta {
        font-size: 12px !important;
        margin-top: 16px !important;
    }

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

    /* Tabs (Description, Reviews, etc.) */
    .single-product .woocommerce-tabs {
        max-width: 100% !important;
        margin-top: 24px !important;
        clear: both !important;
    }

    .single-product .woocommerce-tabs ul.tabs {
        padding: 0 !important;
        margin: 0 0 16px !important;
        display: flex !important;
        flex-wrap: nowrap !important;
        overflow-x: auto !important;
        scrollbar-width: none !important;
        list-style: none !important;
    }
    .single-product .woocommerce-tabs ul.tabs::-webkit-scrollbar {
        display: none !important;
    }

    .single-product .woocommerce-tabs ul.tabs li {
        flex-shrink: 0 !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    .single-product .woocommerce-tabs ul.tabs li a {
        padding: 10px 16px !important;
        font-size: 13px !important;
    }

    .single-product .woocommerce-tabs .panel {
        max-width: 100% !important;
        padding: 16px 0 !important;
        font-size: 14px !important;
        line-height: 1.6 !important;
    }

    .single-product .woocommerce-tabs .panel img {
        max-width: 100% !important;
        height: auto !important;
    }

    .single-product .woocommerce-tabs .panel table {
        max-width: 100% !important;
        width: 100% !important;
        display: block !important;
        overflow-x: auto !important;
    }

    /* Related/upsell products */
    .single-product .related,
    .single-product .upsells {
        max-width: 100% !important;
        clear: both !important;
        margin-top: 32px !important;
    }

    .single-product .related ul.products,
    .single-product .upsells ul.products {
        display: grid !important;
        grid-template-columns: 1fr 1fr !important;
        gap: 12px !important;
        padding: 0 !important;
        margin: 0 !important;
        list-style: none !important;
    }

    .single-product .related ul.products li,
    .single-product .upsells ul.products li {
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 !important;
        float: none !important;
    }

    .single-product .related ul.products img,
    .single-product .upsells ul.products img {
        max-width: 100% !important;
        height: auto !important;
    }

    /* Catch-all: any element directly inside the product container that's wider than 100% */
    .single-product *,
    .woocommerce.single-product * {
        max-width: 100% !important;
        box-sizing: border-box !important;
    }

    /* Override the catch-all for things that should be allowed wider (modals, fixed elements) */
    .single-product .mobile-menu,
    .single-product .mobile-menu-overlay,
    .single-product .chat-widget,
    .single-product .chat-panel,
    .single-product .discount-overlay,
    .single-product .discount-popup {
        max-width: none !important;
    }
}
/* ============================================================
   NUROPEPTIDES — SHOP ARCHIVE MOBILE FIX
   Forces /shop/ page to use 2-column grid like the homepage
   Mobile only (≤768px)
   ============================================================ */

@media (max-width: 768px) {

    /* Shop archive grid: 2 columns matching homepage */
    .woocommerce ul.products,
    .woocommerce-shop ul.products,
    .post-type-archive-product ul.products,
    .tax-product_cat ul.products {
        display: grid !important;
        grid-template-columns: 1fr 1fr !important;
        gap: 12px !important;
        padding: 0 16px !important;
        margin: 20px auto !important;
        max-width: 100% !important;
        list-style: none !important;
        box-sizing: border-box !important;
    }

    /* Each product card */
    .woocommerce ul.products li.product {
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
        float: none !important;
        box-sizing: border-box !important;
        border-radius: 12px !important;
    }

    /* Product image inside shop card */
    .woocommerce ul.products li.product a img,
    .woocommerce ul.products li.product img {
        height: 160px !important;
        padding: 16px !important;
        width: 100% !important;
        object-fit: contain !important;
        box-sizing: border-box !important;
    }

    /* Product title */
    .woocommerce ul.products li.product .woocommerce-loop-product__title {
        font-size: 13px !important;
        padding: 10px 12px 4px !important;
        line-height: 1.3 !important;
        min-height: 34px !important;
        display: -webkit-box !important;
        -webkit-line-clamp: 2 !important;
        -webkit-box-orient: vertical !important;
        overflow: hidden !important;
    }

    /* Price */
    .woocommerce ul.products li.product .price {
        font-size: 16px !important;
        padding: 0 12px 10px !important;
    }

    /* Add to cart button */
    .woocommerce ul.products li.product .button {
        margin: 0 12px 12px !important;
        width: calc(100% - 24px) !important;
        font-size: 12px !important;
        padding: 9px !important;
    }

    /* Section wrapper shouldn't overflow */
    .woocommerce-shop .site-main,
    .woocommerce-shop .content-area,
    .post-type-archive-product .site-main,
    .post-type-archive-product .content-area {
        max-width: 100% !important;
        overflow-x: hidden !important;
        box-sizing: border-box !important;
    }
}

/* Even tighter on very small screens */
@media (max-width: 400px) {
    .woocommerce ul.products {
        gap: 10px !important;
        padding: 0 12px !important;
    }
    .woocommerce ul.products li.product a img,
    .woocommerce ul.products li.product img {
        height: 140px !important;
        padding: 12px !important;
    }
}
/* ============================================================
   NUROPEPTIDES — SHOP PAGE OVERFLOW FIX (FINAL)
   Forces 2-column layout on mobile, prevents overflow
   ============================================================ */

@media (max-width: 768px) {

    /* Force shop page wrapper to respect viewport */
    body.woocommerce-shop,
    body.post-type-archive-product,
    body.tax-product_cat {
        overflow-x: hidden !important;
    }

    body.woocommerce-shop .site-main,
    body.woocommerce-shop .content-area,
    body.woocommerce-shop main,
    body.post-type-archive-product .site-main,
    body.post-type-archive-product .content-area,
    body.post-type-archive-product main {
        max-width: 100vw !important;
        overflow-x: hidden !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
        box-sizing: border-box !important;
    }

    /* Override the desktop auto-fill grid with explicit 2-column */
    body.woocommerce-shop .woocommerce ul.products,
    body.post-type-archive-product .woocommerce ul.products,
    body.tax-product_cat .woocommerce ul.products,
    body.woocommerce ul.products,
    .woocommerce-page ul.products {
        display: grid !important;
        grid-template-columns: 1fr 1fr !important;
        gap: 12px !important;
        padding: 0 12px !important;
        margin: 16px 0 !important;
        max-width: 100% !important;
        width: 100% !important;
        box-sizing: border-box !important;
        list-style: none !important;
    }

    /* Each product card: never wider than its grid cell */
    body.woocommerce-shop .woocommerce ul.products li.product,
    body.post-type-archive-product .woocommerce ul.products li.product,
    body.tax-product_cat .woocommerce ul.products li.product {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        margin: 0 !important;
        padding: 0 !important;
        float: none !important;
        box-sizing: border-box !important;
        overflow: hidden !important;
    }

    /* Catch shop page header/title area too — prevent breadcrumb overflow */
    body.woocommerce-shop .woocommerce-breadcrumb,
    body.post-type-archive-product .woocommerce-breadcrumb,
    body.woocommerce-shop .woocommerce-products-header,
    body.post-type-archive-product .woocommerce-products-header {
        max-width: 100% !important;
        padding: 0 16px !important;
        margin: 12px 0 !important;
        box-sizing: border-box !important;
        overflow-wrap: break-word !important;
    }

    /* Result count + sorting — keep contained */
    body.woocommerce-shop .woocommerce-result-count,
    body.woocommerce-shop .woocommerce-ordering,
    body.post-type-archive-product .woocommerce-result-count,
    body.post-type-archive-product .woocommerce-ordering {
        max-width: 100% !important;
        padding: 0 16px !important;
        box-sizing: border-box !important;
        float: none !important;
    }
}
/* ============================================================
   NUROPEPTIDES — CARD ALIGNMENT + SHOP PAGE FIX
   1. Equal-height cards with bottom-aligned buttons
   2. Shop page shows ALL products (no view-all cutoff)
   ============================================================ */

/* ──────────────────────────────────────────────
   1. EQUAL-HEIGHT CARDS — buttons align to bottom
   Applies to BOTH homepage cards and shop archive cards
   Mobile and desktop
   ────────────────────────────────────────────── */

/* Homepage product grid: ensure rows stretch to equal heights */
.products-grid {
    align-items: stretch !important;
}

/* Each homepage card becomes a vertical flex container */
.products-grid .product-card {
    display: flex !important;
    flex-direction: column !important;
    height: 100% !important;
}

/* Card body grows to fill available space, pushing button to bottom */
.products-grid .product-card .product-body {
    display: flex !important;
    flex-direction: column !important;
    flex: 1 !important;
}

/* Push the actions row (qty + add to cart) to the bottom of the card */
.products-grid .product-card .product-card-actions {
    margin-top: auto !important;
}

/* Description / size text: don't let it shrink, but don't force min-height either —
   the flex layout handles spacing automatically */
.products-grid .product-card .product-size {
    margin-bottom: 4px !important;
}

/* ── Shop archive cards (woocommerce ul.products) ── */
.woocommerce ul.products {
    align-items: stretch !important;
}

.woocommerce ul.products li.product {
    display: flex !important;
    flex-direction: column !important;
    height: 100% !important;
}

/* The button at the bottom of each shop card sits flush */
.woocommerce ul.products li.product .button {
    margin-top: auto !important;
}

/* ──────────────────────────────────────────────
   2. SHOP PAGE — show ALL products on mobile
   Override the homepage view-all cutoff that's
   leaking onto the shop archive
   ────────────────────────────────────────────── */

@media (max-width: 768px) {

    /* Shop page uses .products-grid markup like the homepage.
       Force ALL product cards to show, overriding any nth-child cutoff */
    body.woocommerce-shop .products-grid .product-card,
    body.woocommerce-shop .products-grid .product-card:nth-child(n+7),
    body.post-type-archive-product .products-grid .product-card,
    body.post-type-archive-product .products-grid .product-card:nth-child(n+7),
    body.tax-product_cat .products-grid .product-card,
    body.tax-product_cat .products-grid .product-card:nth-child(n+7),
    .products-grid#shop-grid .product-card,
    .products-grid#shop-grid .product-card:nth-child(n+7) {
        display: flex !important;
    }

    /* Hide the View All button on the shop page (only relevant on homepage) */
    body.woocommerce-shop .view-all-wrap,
    body.post-type-archive-product .view-all-wrap,
    body.tax-product_cat .view-all-wrap,
    .products-grid#shop-grid + .view-all-wrap {
        display: none !important;
    }
}
/* ============================================================
   NUROPEPTIDES — MY ACCOUNT LOGIN/REGISTER SIDE-BY-SIDE
   Force the Login and Register boxes to sit next to each
   other on desktop. Falls back to stacked on mobile.
   ============================================================ */

@media (min-width: 769px) {

    /* Force the columns wrapper to be a 2-column grid */
    body.woocommerce-account .u-columns,
    body.woocommerce-account form.woocommerce-form-login + .u-columns,
    body.woocommerce-account .woocommerce > .u-columns,
    body.woocommerce-account .col2-set {
        display: grid !important;
        grid-template-columns: 1fr 1fr !important;
        gap: 30px !important;
        max-width: 1200px !important;
        margin: 60px auto !important;
        padding: 0 24px !important;
        width: 100% !important;
        box-sizing: border-box !important;
        float: none !important;
    }

    /* Each column takes equal width */
    body.woocommerce-account .u-column1,
    body.woocommerce-account .u-column2,
    body.woocommerce-account .col-1,
    body.woocommerce-account .col-2 {
        width: 100% !important;
        max-width: 100% !important;
        float: none !important;
        margin: 0 !important;
        padding: 36px 32px !important;
        background: #fff !important;
        border-radius: 16px !important;
        box-shadow: 0 4px 24px rgba(45, 27, 94, 0.08) !important;
        border: 1px solid rgba(123, 79, 191, 0.08) !important;
        box-sizing: border-box !important;
    }

    /* Make sure form inputs fill the column on desktop */
    body.woocommerce-account .u-column1 form,
    body.woocommerce-account .u-column2 form,
    body.woocommerce-account .col-1 form,
    body.woocommerce-account .col-2 form {
        max-width: 100% !important;
    }

    /* If WooCommerce wraps everything in .woocommerce, make sure it's full width */
    body.woocommerce-account.logged-out .woocommerce {
        max-width: 1280px !important;
        margin: 40px auto !important;
        padding: 0 16px !important;
    }
}

/* Mobile fallback — stack vertically (already handled in earlier
   responsive block, but reasserting for safety) */
@media (max-width: 768px) {
    body.woocommerce-account .u-columns,
    body.woocommerce-account .col2-set {
        display: flex !important;
        flex-direction: column !important;
        gap: 20px !important;
    }
}
/* ============================================================
   NUROPEPTIDES — MOBILE MENU POSITIONING FIX
   Make dropdown menu start BELOW the header, not over it
   ============================================================ */

@media (max-width: 768px) {

    /* Position the mobile menu below the announcement bar + nav */
    .mobile-menu {
        top: 50px !important;
        left: 12px !important;
        right: 12px !important;
        bottom: auto !important;
        max-height: calc(100vh - 120px) !important;
        border-radius: 16px !important;
        box-shadow: 0 20px 50px rgba(45, 27, 94, 0.18),
                    0 4px 12px rgba(45, 27, 94, 0.08) !important;
        overflow-y: auto !important;
    }

    /* Overlay should still cover the whole screen */
    .mobile-menu-overlay {
        top: 0 !important;
    }
}
/* ============================================================
   NUROPEPTIDES — MY ACCOUNT LOGIN/REGISTER (FINAL)
   Targets the actual #customer_login wrapper from the DOM.
   Side-by-side on desktop, stacked on mobile.
   ============================================================ */

/* Desktop: 2 columns side-by-side */
@media (min-width: 769px) {

    body.woocommerce-account #customer_login,
    body.woocommerce-account .u-columns.col2-set,
    body.woocommerce-account .woocommerce-page-content #customer_login {
        display: grid !important;
        grid-template-columns: 1fr 1fr !important;
        gap: 32px !important;
        max-width: 1100px !important;
        margin: 40px auto !important;
        padding: 0 24px !important;
        width: 100% !important;
        box-sizing: border-box !important;
        align-items: stretch !important;
    }

    /* Each column: equal size, styled card */
    body.woocommerce-account #customer_login > .u-column1,
    body.woocommerce-account #customer_login > .u-column2,
    body.woocommerce-account #customer_login > .col-1,
    body.woocommerce-account #customer_login > .col-2,
    body.woocommerce-account .u-columns.col2-set > div {
        width: 100% !important;
        max-width: 100% !important;
        float: none !important;
        margin: 0 !important;
        padding: 36px 32px !important;
        background: #fff !important;
        border-radius: 16px !important;
        box-shadow: 0 4px 24px rgba(45, 27, 94, 0.08) !important;
        border: 1px solid rgba(123, 79, 191, 0.08) !important;
        box-sizing: border-box !important;
    }

    /* Make the page wrapper wide enough on desktop */
    body.woocommerce-account .woocommerce-page-content {
        max-width: 1200px !important;
        margin: 60px auto !important;
        padding: 0 24px !important;
    }
}

/* Mobile: stacked (already handled, but reasserting for clarity) */
@media (max-width: 768px) {
    body.woocommerce-account #customer_login,
    body.woocommerce-account .u-columns.col2-set {
        display: flex !important;
        flex-direction: column !important;
        gap: 20px !important;
        padding: 0 16px !important;
        margin: 20px auto !important;
    }

    body.woocommerce-account #customer_login > .u-column1,
    body.woocommerce-account #customer_login > .u-column2,
    body.woocommerce-account .u-columns.col2-set > div {
        width: 100% !important;
        padding: 24px 20px !important;
       background: #fff !important;
        
    /* === COUPON FIX FINAL === */
body div.woocommerce .fc-wrapper .fc-coupon-code__collapsible .fc-coupon-code__apply {
    position: relative !important;
    top: auto !important;
    right: auto !important;
    width: 100% !important;
    display: block !important;
    margin-top: 10px !important;
}