/** Shopify CDN: Minification failed

Line 3288:0 All "@import" rules must come first

**/
.product-media-container .media {

  border-radius: 13px;

  overflow: hidden;

}

/* Buttons rounded rectangle */

.button,

.shopify-challenge__button {

  border-radius: 8px;

}

/* Hide color swatches on product cards */

.card-swatches {

  display: none;

}

/* ========================

   Add to Cart Button Hover

   ======================== */

.product-container-main .product-info .product-info-buy-buttons .add-cart-button:hover {

  background: #00793A !important;

  color: #ffffff !important;

  transition: background-color 300ms cubic-bezier(0, 0, 0.3, 1);

}

/* Hide Open Search Page button */

.search-pop-panel .search-button {

  display: none !important;

}

.variant-option-price--unavailable {

  color: rgba(0, 0, 0, 0.3);

  text-decoration: none;

}

/* ========================

   Variant Button — Size & Planter layout

   (name on top, sub-label or price below)

   ======================== */

.product-variant-selects .form-options-wrapper.button-options label {

  flex-direction: column;

  align-items: center;

  justify-content: center;

  gap: 2px;

  padding-block: 0.65rem;

  padding-inline: 0.75rem;

  min-width: 5.5rem;

  text-align: center;

  line-height: 1.2;

}



/* Size variant — main name */

.product-variant-selects .form-options-wrapper.button-options label .variant-btn-main {

  display: block;

  font-size: 0.9rem;

  font-weight: 600;

}



/* Size variant — inch sub-label */

.product-variant-selects .form-options-wrapper.button-options label .variant-btn-sub {

  display: block;

  font-size: 0.72rem;

  font-weight: 400;

  opacity: 0.75;

}



/* Sub-label white when selected */

input[type=radio]:checked + label .variant-btn-sub {

  opacity: 1;

  color: #ffffff;

}



/* Planter — price below name */

.variant-option-price {

  display: block;

  font-size: 0.75rem;

  font-weight: 600;

  line-height: 1.2;

  color: #00793A;

  transition: color 200ms ease;

  margin-top: 1px;

}



input[type=radio]:checked + label .variant-option-price {

  color: #ffffff;

}



/* Add to Cart & Buy it now */

.product-info .button {

  border-radius: 8px;

}

/* ========================

   Gift Options Block

   ======================== */

.gift-options-block {

  margin-block: 0.75rem;

}



.line-item-property__field {

  margin: 0;

  padding: 0;

}



.gift-checkbox-label {

  display: flex;

  align-items: center;

  gap: 0.6rem;

  cursor: pointer;

  font-size: 0.95rem;

  font-weight: 500;

  padding: 0.6rem 0;

}



.gift-checkbox {

  width: 1rem;

  height: 1rem;

  accent-color: #00793A;

  cursor: pointer;

  flex: 0 0 auto;

}



.gift-message-field {

  display: none;

  margin-top: 0.5rem;

}



.gift-message-textarea {

  width: 100%;

  padding: 0.6rem 0.75rem;

  border: 1px solid rgba(0, 0, 0, 0.15);

  border-radius: 6px;

  font-size: 0.875rem;

  font-family: inherit;

  resize: vertical;

  box-sizing: border-box;

  outline: none;

}



.gift-message-textarea:focus {

  border-color: #00793A;

  box-shadow: 0 0 0 2px rgba(0, 121, 58, 0.1);

}

/* Product card image border radius */

.card-media .media {

  border-radius: 8px;

  overflow: hidden;

}

/* ========================

   GreenX Plant Care Guide — Dark Green Card

   ======================== */

.gx-care-card {

  margin-top: 1.25rem;

  background: linear-gradient(160deg, #0e3d22 0%, #0a2e19 100%);

  border-radius: 18px;

  padding: 1.5rem 1.25rem 0.75rem;

  box-shadow: 0 8px 24px rgba(0, 60, 30, 0.25);

}



.gx-care-card-heading {

  font-weight: 700;

  font-size: 1.15rem;

  margin: 0 0 1.1rem 0.1rem;

  color: #ffffff;

  letter-spacing: -0.01em;

  font-family: var(--font-heading-family), serif;

}



.gx-care-row {

  border-bottom: 1px solid rgba(255, 255, 255, 0.08);

}



.gx-care-row:last-child {

  border-bottom: none;

}



.gx-care-row-summary {

  display: flex;

  align-items: center;

  gap: 1rem;

  padding: 0.9rem 0.1rem;

  cursor: pointer;

  list-style: none;

  user-select: none;

  border-radius: 12px;

  transition: background 0.18s ease;

}



.gx-care-row-summary::-webkit-details-marker { display: none; }

.gx-care-row-summary::marker { content: ''; }



.gx-care-row-summary:hover {

  background: rgba(255, 255, 255, 0.04);

}



.gx-care-row-icon {

  display: flex;

  align-items: center;

  justify-content: center;

  width: 44px;

  height: 44px;

  background: rgba(255, 255, 255, 0.08);

  border: 1px solid rgba(255, 255, 255, 0.12);

  border-radius: 13px;

  flex-shrink: 0;

  color: #6fe3a8;

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

}



.gx-care-row-summary:hover .gx-care-row-icon {

  transform: scale(1.05);

}



.gx-care-row[open] .gx-care-row-icon {

  background: #6fe3a8;

  border-color: #6fe3a8;

  color: #0a2e19;

}



.gx-care-row-text {

  flex: 1;

  min-width: 0;

  display: flex;

  flex-direction: column;

  gap: 2px;

}



.gx-care-row-title {

  font-weight: 700;

  font-size: 0.95rem;

  color: #ffffff;

  letter-spacing: -0.005em;

}



.gx-care-row-preview {

  font-size: 0.78rem;

  color: rgba(255, 255, 255, 0.55);

  white-space: nowrap;

  overflow: hidden;

  text-overflow: ellipsis;

}



.gx-care-row[open] .gx-care-row-preview {

  display: none;

}



.gx-care-row-caret {

  color: rgba(255, 255, 255, 0.45);

  display: flex;

  align-items: center;

  flex-shrink: 0;

  transition: transform 0.25s ease, color 0.18s ease;

}



.gx-care-row[open] .gx-care-row-caret {

  transform: rotate(180deg);

  color: #6fe3a8;

}



.gx-care-row-content {

  padding: 0 0.1rem 1.1rem 3.75rem;

  font-size: 0.85rem;

  color: rgba(255, 255, 255, 0.7);

  line-height: 1.7;

  animation: gx-care-fade-in 0.2s ease;

}



@keyframes gx-care-fade-in {

  from { opacity: 0; transform: translateY(-3px); }

  to { opacity: 1; transform: translateY(0); }

}

/* ========================

   Before & After Banner — Rounded Rectangle

   ======================== */

.before-after__wrapper .before-after-main {

  border-radius: 8px;

  overflow: hidden;

}

/* ========================

   Hide unavailable color swatches completely

   ======================== */

.color-swatch:has(input.disabled) {

  display: none !important;

}

.card-cta-btn-wrap .card-cta-btn,

.card-cta-btn-wrap .card-cta-btn:visited {

  color: #00793A !important;

  border-color: #00793A !important;

  text-decoration: none;

}

.card-cta-btn-wrap .card-cta-btn:hover {

  background: #00793A !important;

  color: #ffffff !important;

  opacity: 1;

}



/* ========================

   Planter Card Variant Buttons

   ======================== */



/* Override button-options grid for Planter to show 4 per row */

.form-options-wrapper.button-options:has(.planter-card-label) {

  display: grid !important;

  grid-template-columns: repeat(4, 1fr);

  gap: 10px;

}



/* Remove default button styling for planter cards */

.form-options-wrapper.button-options input[type=radio] + .planter-card-label {

  flex-direction: column;

  align-items: center;

  justify-content: center;

  gap: 2px;

  padding: 0.5rem 0.4rem;

  min-width: unset;

  width: 100%;

  border: 1.5px solid rgba(0,0,0,0.12);

  border-radius: 10px;

  text-align: center;

  cursor: pointer;

  background: #fff;

  transition: border-color 200ms ease, background 200ms ease;

}



/* Selected planter card */

.form-options-wrapper.button-options input[type=radio]:checked + .planter-card-label {

  background: #00793A;

  border-color: #00793A;

  color: #ffffff;

}



/* Planter icon image */

.planter-card-icon {

  display: flex;

  align-items: center;

  justify-content: center;

  width: 36px;

  height: 36px;

  margin: 0 auto 2px;

}



.planter-card-icon img {

  width: 100%;

  height: 100%;

  object-fit: contain;

}



/* Invert icon to white when selected */

.form-options-wrapper.button-options input[type=radio]:checked + .planter-card-label .planter-card-icon img {

  filter: brightness(0) invert(1);

}



/* Planter name */

.planter-card-name {

  display: block;

  font-size: 0.75rem;

  font-weight: 600;

  line-height: 1.2;

}



/* Price color on planter card */

.form-options-wrapper.button-options input[type=radio] + .planter-card-label .variant-option-price {

  color: #00793A;

}



.form-options-wrapper.button-options input[type=radio]:checked + .planter-card-label .variant-option-price {

  color: #ffffff;

}



/* Unavailable planter card */

.form-options-wrapper.button-options input[type=radio].disabled + .planter-card-label {

  opacity: 0.45;

  pointer-events: none;

  position: relative;

}



.form-options-wrapper.button-options input[type=radio].disabled + .planter-card-label::after {

  content: '';

  position: absolute;

  inset: 0;

  background: linear-gradient(to bottom right, transparent calc(50% - 0.5px), rgba(0,0,0,0.2) calc(50% - 0.5px), rgba(0,0,0,0.2) calc(50% + 0.5px), transparent calc(50% + 0.5px));

  border-radius: 10px;

}



/* ========================

   GreenX Sticky Add to Cart Bar

   ======================== */

.gx-sticky-atc {

  position: fixed;

  inset-inline: 0;

  inset-block-end: 0;

  z-index: 50;

  background: #ffffff;

  border-top: 1px solid rgba(0, 0, 0, 0.08);

  box-shadow: 0 -4px 16px rgba(0, 0, 0, 0.08);

  transform: translateY(100%);

  opacity: 0;

  transition: transform 0.3s ease, opacity 0.3s ease;

  pointer-events: none;

}



.gx-sticky-atc.is-visible {

  transform: translateY(0);

  opacity: 1;

  pointer-events: auto;

}



.gx-sticky-atc-inner {

  display: flex;

  align-items: center;

  gap: 0.85rem;

  padding-block: 0.65rem;

}



.gx-sticky-atc-media {

  flex-shrink: 0;

  width: 48px;

  height: 48px;

  border-radius: 8px;

  overflow: hidden;

  background: #f3f3f3;

}



.gx-sticky-atc-media img {

  width: 100%;

  height: 100%;

  object-fit: cover;

  display: block;

}



.gx-sticky-atc-info {

  flex: 1;

  min-width: 0;

  display: flex;

  flex-direction: column;

  gap: 1px;

}



.gx-sticky-atc-title {

  font-size: 0.85rem;

  font-weight: 600;

  color: #1a1a1a;

  white-space: nowrap;

  overflow: hidden;

  text-overflow: ellipsis;

}



.gx-sticky-atc-price {

  font-size: 0.85rem;

  font-weight: 700;

  color: #00793A;

}



.gx-sticky-atc-button {

  flex-shrink: 0;

  background: #00793A;

  color: #ffffff;

  border: none;

  border-radius: 8px;

  padding: 0.7rem 1.4rem;

  font-size: 0.85rem;

  font-weight: 700;

  cursor: pointer;

  white-space: nowrap;

  transition: background 0.2s ease;

}



.gx-sticky-atc-button:hover {

  background: #04632f;

}



.gx-sticky-atc-button:disabled {

  background: #ccc;

  cursor: not-allowed;

}



@media screen and (max-width: 749px) {

  .gx-sticky-atc-title {

    max-width: 38vw;

  }

}



/* ========================

   GreenX — View Product Button (Collection Cards)

   ======================== */

.gx-view-product-wrap {

  margin-top: 0.6rem;

}



.gx-view-product-btn {

  display: inline-block;

  width: 100%;

  text-align: center;

  padding: 0.55rem 1rem;

  font-size: 0.8rem;

  font-weight: 600;

  letter-spacing: 0.01em;

  color: #00793A;

  background: transparent;

  border: 1.5px solid #00793A;

  border-radius: 8px;

  text-decoration: none;

  transition: background 0.2s ease, color 0.2s ease;

}



.gx-view-product-btn:hover {

  background: #00793A;

  color: #ffffff;

}

/* ================================================

   GreenX Corporate Gifting — Section & 3-Step Modal

   ================================================ */



/* ── Page Layout ─────────────────────────────── */

.gx-corp-page { max-width: 1200px; margin: 0 auto; }



.gx-corp-layout {

  display: grid;

  grid-template-columns: 1fr 1fr;

  gap: 3rem;

  align-items: start;

}



@media (max-width: 900px) {

  .gx-corp-layout { grid-template-columns: 1fr; gap: 2rem; }

}



/* ── Breadcrumb ──────────────────────────────── */

.gx-corp-breadcrumb {

  font-size: 0.78rem;

  color: rgba(0,0,0,0.45);

  margin-bottom: 0.75rem;

}

.gx-corp-breadcrumb a { color: inherit; text-decoration: none; }

.gx-corp-breadcrumb a:hover { color: #00793A; }

.gx-corp-breadcrumb span { color: #191919; }



/* ── Title ───────────────────────────────────── */

.gx-corp-title {

  font-size: 1.55rem;

  font-weight: 700;

  line-height: 1.25;

  color: #191919;

  margin: 0 0 1rem 0;

}



/* ── Description ─────────────────────────────── */

.gx-corp-desc { margin-bottom: 1.25rem; }

.gx-corp-desc ul { padding-left: 1.2rem; margin: 0.5rem 0; }

.gx-corp-desc li { font-size: 0.875rem; color: #444; margin-bottom: 0.25rem; }



/* ── Price Box ───────────────────────────────── */

.gx-corp-price-box {

  border: 1px solid rgba(0,0,0,0.1);

  border-radius: 12px;

  padding: 1rem 1.25rem;

  margin-bottom: 1.25rem;

  background: #fafafa;

}

.gx-corp-price-row {

  display: flex;

  align-items: baseline;

  gap: 0.5rem;

  flex-wrap: wrap;

  margin-bottom: 0.35rem;

}

.gx-corp-price-current { font-size: 1.6rem; font-weight: 700; color: #191919; }

.gx-corp-price-label   { font-size: 0.8rem; color: rgba(0,0,0,0.5); }

.gx-corp-price-compare { font-size: 0.9rem; color: rgba(0,0,0,0.4); text-decoration: line-through; }

.gx-corp-save-badge {

  background: #e8f7ef; color: #00793A; font-size: 0.72rem; font-weight: 700;

  padding: 0.2rem 0.55rem; border-radius: 20px; margin-left: auto;

}

.gx-corp-delivery { font-size: 0.8rem; color: rgba(0,0,0,0.55); }



/* ── Tier Cards ──────────────────────────────── */

.gx-corp-tiers-section { margin-bottom: 1.25rem; }

.gx-corp-tiers-label {

  font-size: 0.85rem; font-weight: 600; color: #191919;

  margin-bottom: 0.6rem; display: flex; align-items: center; gap: 0.5rem;

}

.gx-corp-tiers-hint { font-size: 0.75rem; font-weight: 400; color: rgba(0,0,0,0.45); }

.gx-corp-tiers { display: grid; grid-template-columns: repeat(3,1fr); gap: 0.6rem; }

.gx-corp-tier {

  display: flex; flex-direction: column; align-items: center; justify-content: center;

  gap: 3px; padding: 0.75rem 0.5rem;

  border: 1.5px solid rgba(0,0,0,0.12); border-radius: 10px;

  cursor: pointer; background: #fff; text-align: center;

  transition: border-color 0.15s, background 0.15s;

}

.gx-corp-tier:hover { border-color: #00793A; }

.gx-corp-tier.selected { border-color: #00793A; background: #fff; box-shadow: 0 0 0 3px rgba(0,121,58,0.1); }

.gx-corp-tier-range { font-size: 0.95rem; font-weight: 700; color: #191919; }

.gx-corp-tier-disc  { font-size: 0.75rem; color: #00793A; font-weight: 600; }



/* ── Contact Row ─────────────────────────────── */

.gx-corp-contact-section { margin-bottom: 1rem; }

.gx-corp-contact-label {

  font-size: 0.85rem; font-weight: 600; color: #191919;

  margin-bottom: 0.6rem; display: flex; align-items: center; gap: 0.5rem;

}

.gx-corp-contact-row { display: grid; grid-template-columns: 1fr 1fr; gap: 0.6rem; }

@media (max-width: 480px) { .gx-corp-contact-row { grid-template-columns: 1fr; } }



/* ── Shared Input ─────────────────────────────── */

.gx-corp-input {

  width: 100%; box-sizing: border-box;

  padding: 0.65rem 0.85rem;

  border: 1px solid rgba(0,0,0,0.15); border-radius: 8px;

  font-size: 0.875rem; font-family: inherit; color: #191919;

  background: #fff; outline: none;

  transition: border-color 0.15s, box-shadow 0.15s;

}

.gx-corp-input:focus { border-color: #00793A; box-shadow: 0 0 0 3px rgba(0,121,58,0.1); }

.gx-corp-input::placeholder { color: rgba(0,0,0,0.35); }



/* ── CTA Button ──────────────────────────────── */

.gx-corp-cta-btn {

  width: 100%; padding: 0.9rem 1.5rem;

  background: #9ec9b0; border: none; border-radius: 10px;

  font-size: 1rem; font-weight: 700; color: #fff;

  cursor: pointer; transition: background 0.2s ease;

  margin-top: 0.75rem; margin-bottom: 0.5rem;

  letter-spacing: 0.01em;

}

.gx-corp-cta-btn:hover { background: #00793A; }



/* ── Talk link ───────────────────────────────── */

.gx-corp-talk { font-size: 0.82rem; color: rgba(0,0,0,0.5); text-align: center; margin-bottom: 0.85rem; }

.gx-corp-talk-link { color: #00793A; text-decoration: none; font-weight: 600; }

.gx-corp-talk-link:hover { text-decoration: underline; }



/* ── Trust Badges ────────────────────────────── */

.gx-corp-badges { display: flex; gap: 0.75rem; flex-wrap: wrap; }

.gx-corp-badge {

  display: inline-flex; align-items: center; gap: 5px;

  font-size: 0.75rem; color: rgba(0,0,0,0.55);

  background: #f3f3f3; border-radius: 20px; padding: 0.3rem 0.65rem;

}



/* ================================================

   MODAL

   ================================================ */

.gx-modal-overlay {

  display: none; position: fixed; inset: 0; z-index: 9999;

  background: rgba(0,0,0,0.55); backdrop-filter: blur(2px);

  align-items: center; justify-content: center; padding: 1rem;

}

.gx-modal-overlay.is-open { display: flex; }



.gx-modal-box {

  background: #fff; border-radius: 18px;

  width: 100%; max-width: 900px; max-height: 92vh;

  overflow: hidden; display: flex; flex-direction: column;

  box-shadow: 0 24px 64px rgba(0,0,0,0.2);

}



/* Modal Header */

.gx-modal-header {

  display: flex; align-items: flex-start; justify-content: space-between;

  padding: 1.25rem 1.5rem 1rem;

  border-bottom: 1px solid rgba(0,0,0,0.08);

  flex-shrink: 0;

}

.gx-modal-title { font-size: 1.25rem; font-weight: 700; color: #191919; margin: 0 0 0.2rem; }

.gx-modal-help  { font-size: 0.8rem; color: #00793A; text-decoration: none; }

.gx-modal-help:hover { text-decoration: underline; }

.gx-modal-close {

  background: none; border: none; font-size: 1.6rem; line-height: 1;

  color: rgba(0,0,0,0.4); cursor: pointer; padding: 0 0.25rem;

  transition: color 0.15s;

}

.gx-modal-close:hover { color: #191919; }



/* Modal Body */

.gx-modal-body {

  display: grid; grid-template-columns: 42% 1fr;

  flex: 1; overflow: hidden;

}

@media (max-width: 680px) {

  .gx-modal-body { grid-template-columns: 1fr; }

}



/* Preview Panel */

.gx-modal-preview-panel {

  background: #f5f3ef; display: flex; flex-direction: column;

  align-items: center; justify-content: center; padding: 1.5rem 1rem;

  gap: 1rem; overflow: hidden;

}

.gx-modal-preview-label {

  font-size: 0.7rem; font-weight: 700; letter-spacing: 0.1em;

  color: rgba(0,0,0,0.4); align-self: flex-start;

}



/* Gift Card Preview */

.gx-preview-card {

  width: 200px; height: 280px;

  background: #ffd700; border-radius: 20px;

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

  box-shadow: 0 8px 32px rgba(0,0,0,0.12);

  position: relative; overflow: hidden;

}

.gx-preview-card-inner {

  width: 168px; height: 248px;

  border: 2px solid rgba(220,30,90,0.5); border-radius: 16px;

  display: flex; flex-direction: column; align-items: center;

  justify-content: space-between; padding: 1rem 0.75rem;

  background: rgba(255,255,255,0.08);

}

.gx-preview-logo-area {

  width: 80px; height: 60px;

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

  border: 1px dashed rgba(0,0,0,0.2); border-radius: 6px;

}

.gx-preview-logo-placeholder {

  font-size: 0.55rem; font-weight: 700; color: rgba(0,0,0,0.3);

  text-align: center; line-height: 1.4; letter-spacing: 0.05em;

}

.gx-preview-logo-img { max-width: 78px; max-height: 58px; object-fit: contain; border-radius: 4px; }

.gx-preview-message {

  font-size: 0.7rem; color: rgba(0,0,0,0.65); text-align: center;

  line-height: 1.5; font-style: italic; font-family: Montserrat, sans-serif;

  margin: 0; padding: 0 0.25rem; word-break: break-word;

}



/* Preview Thumbnails */

.gx-modal-thumbs { display: flex; gap: 0.75rem; }

.gx-modal-thumb {

  display: flex; flex-direction: column; align-items: center; gap: 4px;

  cursor: pointer; padding: 0.4rem 0.75rem; border-radius: 10px;

  border: 2px solid transparent; background: rgba(0,0,0,0.04);

  transition: border-color 0.15s;

}

.gx-modal-thumb.active { border-color: #00793A; background: #fff; }

.gx-thumb-icon { font-size: 1.4rem; }

.gx-modal-thumb span { font-size: 0.68rem; color: rgba(0,0,0,0.55); }



/* Steps Panel */

.gx-modal-steps-panel {

  padding: 1.25rem 1.5rem; overflow-y: auto;

  display: flex; flex-direction: column; gap: 1rem;

}



/* Step Indicator */

.gx-steps-indicator {

  display: flex; align-items: center; gap: 0; margin-bottom: 0.5rem;

}

.gx-step-dot {

  display: flex; align-items: center; gap: 0.4rem; flex-shrink: 0;

}

.gx-step-num {

  width: 28px; height: 28px; border-radius: 50%;

  background: rgba(0,0,0,0.12); color: rgba(0,0,0,0.4);

  font-size: 0.78rem; font-weight: 700;

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

  transition: background 0.2s, color 0.2s;

}

.gx-step-dot.active .gx-step-num { background: #191919; color: #fff; }

.gx-step-lbl {

  font-size: 0.78rem; font-weight: 600;

  color: rgba(0,0,0,0.35); white-space: nowrap;

  transition: color 0.2s;

}

.gx-step-dot.active .gx-step-lbl { color: #191919; }

.gx-step-line { flex: 1; height: 1px; background: rgba(0,0,0,0.12); margin: 0 0.5rem; }



/* Step Content */

.gx-step-content { display: none; }

.gx-step-content.active { display: flex; flex-direction: column; gap: 1rem; }



.gx-step-heading { font-size: 1.1rem; font-weight: 700; color: #191919; margin: 0; }

.gx-step-sub     { font-size: 0.82rem; color: rgba(0,0,0,0.55); margin: 0; }



/* Fields */

.gx-field-group { display: flex; flex-direction: column; gap: 0.4rem; }

.gx-field-label { font-size: 0.82rem; font-weight: 600; color: #191919; display: flex; align-items: center; gap: 0.4rem; }

.gx-field-hint  { font-size: 0.72rem; font-weight: 400; color: rgba(0,0,0,0.4); }

.gx-field-note  { font-size: 0.75rem; color: rgba(0,0,0,0.45); margin: 0; }

.gx-char-count  { font-size: 0.72rem; font-weight: 400; color: rgba(0,0,0,0.4); margin-left: auto; }

.gx-mt-8 { margin-top: 0.5rem; }



/* Textarea / Select */

.gx-corp-textarea {

  width: 100%; box-sizing: border-box;

  padding: 0.65rem 0.85rem; border: 1px solid rgba(0,0,0,0.15);

  border-radius: 8px; font-size: 0.875rem; font-family: inherit;

  color: #191919; resize: vertical; outline: none;

  transition: border-color 0.15s, box-shadow 0.15s;

}

.gx-corp-textarea:focus { border-color: #00793A; box-shadow: 0 0 0 3px rgba(0,121,58,0.1); }



.gx-corp-select {

  width: 100%; box-sizing: border-box;

  padding: 0.65rem 0.85rem; border: 1px solid rgba(0,0,0,0.15);

  border-radius: 8px; font-size: 0.875rem; background: #fff;

  color: #191919; outline: none; cursor: pointer;

  transition: border-color 0.15s;

}

.gx-corp-select:focus { border-color: #00793A; }



/* File Upload */

.gx-file-upload {

  border: 1.5px dashed rgba(0,0,0,0.2); border-radius: 10px;

  padding: 0.85rem 1rem; cursor: pointer;

  transition: border-color 0.15s, background 0.15s;

}

.gx-file-upload:hover, .gx-file-upload.drag-over {

  border-color: #00793A; background: rgba(0,121,58,0.03);

}

.gx-file-placeholder {

  display: flex; align-items: center; gap: 0.5rem;

  font-size: 0.82rem; color: rgba(0,0,0,0.45);

}

.gx-file-selected {

  display: flex; align-items: center; gap: 0.5rem;

  font-size: 0.82rem; color: #00793A;

}

.gx-file-remove {

  background: none; border: none; color: rgba(0,0,0,0.4);

  cursor: pointer; font-size: 1rem; padding: 0; margin-left: auto;

}

.gx-file-remove:hover { color: #191919; }



/* Checkbox / Radio rows */

.gx-checkbox-row, .gx-radio-row {

  display: flex; align-items: center; gap: 0.6rem;

  font-size: 0.875rem; color: #191919; cursor: pointer;

  padding: 0.7rem 1rem; border: 1px solid rgba(0,0,0,0.1);

  border-radius: 10px; margin-bottom: 0.4rem;

}

.gx-checkbox-row input[type=checkbox],

.gx-radio-row input[type=radio] {

  accent-color: #00793A; width: 16px; height: 16px; cursor: pointer;

}



/* Note Box */

.gx-note-box {

  background: #f8f8f8; border-radius: 10px; padding: 1rem 1.1rem;

  font-size: 0.78rem; color: rgba(0,0,0,0.6);

}

.gx-note-box strong { color: #191919; display: block; margin-bottom: 0.5rem; }

.gx-note-box ul { margin: 0; padding-left: 1.1rem; }

.gx-note-box li { margin-bottom: 0.3rem; line-height: 1.5; }



/* Qty Stepper */

.gx-qty-row { display: flex; align-items: center; gap: 0.75rem; flex-wrap: wrap; }

.gx-qty-stepper { display: flex; align-items: center; border: 1px solid rgba(0,0,0,0.15); border-radius: 8px; overflow: hidden; }

.gx-qty-btn {

  width: 38px; height: 38px; background: #f3f3f3; border: none;

  font-size: 1.1rem; cursor: pointer; display: flex; align-items: center; justify-content: center;

  transition: background 0.15s;

}

.gx-qty-btn:hover { background: #e0e0e0; }

.gx-qty-input {

  width: 52px; height: 38px; border: none; text-align: center;

  font-size: 0.95rem; font-weight: 600; outline: none; color: #191919;

  -moz-appearance: textfield;

}

.gx-qty-input::-webkit-outer-spin-button,

.gx-qty-input::-webkit-inner-spin-button { -webkit-appearance: none; }

.gx-qty-total {

  background: #f0f9f4; border-radius: 8px; padding: 0.5rem 0.85rem;

  display: flex; flex-direction: column; gap: 2px; flex: 1;

}

.gx-qty-total-formula { font-size: 0.72rem; color: rgba(0,0,0,0.5); }

.gx-qty-total-price   { font-size: 1rem; font-weight: 700; color: #00793A; }



/* Review Summary */

.gx-review-summary {

  background: #f8f8f8; border-radius: 12px; padding: 1rem 1.1rem;

  display: flex; flex-direction: column; gap: 0.4rem;

}

.gx-review-product { display: flex; justify-content: space-between; align-items: flex-start; gap: 1rem; }

.gx-review-product-name { font-size: 0.875rem; font-weight: 600; color: #191919; }

.gx-review-product-qty  { font-size: 0.82rem; color: rgba(0,0,0,0.5); white-space: nowrap; }

.gx-review-message-line { font-size: 0.78rem; color: rgba(0,0,0,0.5); }

.gx-review-price-line   { display: flex; justify-content: space-between; align-items: center; font-size: 0.875rem; color: #191919; padding-top: 0.4rem; border-top: 1px solid rgba(0,0,0,0.08); }

.gx-review-price-line strong { font-size: 1rem; color: #00793A; }



/* Two-col grid */

.gx-two-col { display: grid; grid-template-columns: 1fr 1fr; gap: 0.6rem; }

@media (max-width: 480px) { .gx-two-col { grid-template-columns: 1fr; } }



/* Step Footer */

.gx-step-footer {

  display: flex; align-items: center; justify-content: space-between;

  gap: 0.75rem; padding-top: 0.5rem; flex-wrap: wrap;

  border-top: 1px solid rgba(0,0,0,0.07); margin-top: 0.5rem;

}

.gx-step-footer--send { flex-direction: column; align-items: stretch; }

.gx-send-buttons { display: flex; gap: 0.75rem; flex-wrap: wrap; }

@media (max-width: 480px) { .gx-send-buttons { flex-direction: column; } }



.gx-btn-primary {

  background: #191919; color: #fff; border: none;

  padding: 0.75rem 1.5rem; border-radius: 10px;

  font-size: 0.875rem; font-weight: 700; cursor: pointer;

  transition: background 0.2s; white-space: nowrap;

}

.gx-btn-primary:hover { background: #00793A; }



.gx-btn-back {

  background: none; border: 1px solid rgba(0,0,0,0.15); color: #191919;

  padding: 0.7rem 1.2rem; border-radius: 10px;

  font-size: 0.875rem; font-weight: 600; cursor: pointer;

  transition: border-color 0.15s;

}

.gx-btn-back:hover { border-color: #191919; }



.gx-btn-skip {

  background: none; border: none; color: rgba(0,0,0,0.45);

  font-size: 0.82rem; cursor: pointer; text-decoration: underline;

  padding: 0;

}

.gx-btn-skip:hover { color: #191919; }



.gx-btn-whatsapp {

  flex: 1; background: #25d366; color: #fff; border: none;

  padding: 0.85rem 1.5rem; border-radius: 10px;

  font-size: 0.9rem; font-weight: 700; cursor: pointer;

  display: flex; align-items: center; justify-content: center; gap: 0.5rem;

  transition: background 0.2s;

}

.gx-btn-whatsapp:hover { background: #128c4e; }



.gx-btn-email {

  background: #fff; color: #191919;

  border: 1.5px solid rgba(0,0,0,0.15);

  padding: 0.85rem 1.2rem; border-radius: 10px;

  font-size: 0.875rem; font-weight: 600; cursor: pointer;

  display: flex; align-items: center; gap: 0.5rem;

  transition: border-color 0.15s;

}

.gx-btn-email:hover { border-color: #191919; }



.gx-modal-note {

  font-size: 0.75rem; color: rgba(0,0,0,0.45); text-align: center;

  line-height: 1.5; margin: 0;

}

/* ========================

   GreenX — Corporate Gift Card Styling

   ======================== */



/* Badge on image top-left */

.gx-corp-card-badge {

  position: absolute;

  top: 10px;

  left: 10px;

  z-index: 5;

  background: #00793A;

  color: #ffffff;

  font-size: 0.65rem;

  font-weight: 700;

  letter-spacing: 0.06em;

  padding: 5px 10px;

  border-radius: 6px;

  pointer-events: none;

  white-space: nowrap;

}



/* MOQ price text */

.gx-corp-card-price {

  font-size: 0.8rem;

  color: #555;

  font-weight: 500;

  margin-block: 0.25rem;

}



/* Customize Now button — solid green, always visible */

.gx-corp-customize-btn {

  display: block;

  width: 100%;

  text-align: center;

  padding: 0.65rem 1rem;

  font-size: 0.78rem;

  font-weight: 700;

  letter-spacing: 0.05em;

  color: #ffffff;

  background: #00793A;

  border-radius: 8px;

  text-decoration: none;

  transition: background 0.2s ease;

}



.gx-corp-customize-btn:hover {

  background: #015e2d;

  color: #ffffff;

}



/* ========================

   GreenX — Banner clickable link wrap

   ======================== */

.banner-link-wrap {

  display: contents;

  text-decoration: none;

}

/* ── Icon with Text block – note text size ──────────────────── */

.product-info-icon-text .icon {

  width: 18px !important;

  height: 18px !important;

}

.product-info-icon-text em {

  font-size: 0.75rem;

  line-height: 1.4;

}

/* ── Product Badge – mobile overflow fix ────────────────────── */

@media screen and (max-width: 480px) {

  .card-media .pn-badge-wrap,

  .card .pn-badge-wrap {

    top: 6px;

    left: 6px;

    max-width: calc(100% - 12px);

  }

  .pn-badge {

    font-size: 9px;

    padding: 4px 8px;

    white-space: normal;

    max-width: 100%;

    line-height: 1.3;

  }

}

/* ── Collection Banner – Adaptive height ────────────────────── */

/* Make the wrapper relative so it wraps the background image height */

.main-collection-banner__wrapper:has(.height--adaptive) {

  position: relative;

}

.main-collection-banner__wrapper:has(.height--adaptive) .background-image {

  position: relative !important;

  height: auto !important;

}

.main-collection-banner__wrapper:has(.height--adaptive) .background-image img {

  position: relative !important;

  width: 100%;

  height: auto !important;

  object-fit: cover;

  display: block;

  max-height: 600px;

}

.page-content-wrapper.height--adaptive {

  position: absolute !important;

  inset: 0 !important;

  min-height: 0 !important;

  height: 100% !important;

  display: flex;

  align-items: center;

}

/* тФАтФА Floating WhatsApp Button тФАтФАтФАтФАтФАтФАтФАтФАтФАтФАтФАтФАтФАтФАтФАтФАтФАтФАтФАтФАтФАтФАтФАтФАтФАтФАтФАтФАтФАтФАтФАтФАтФА */

.gx-wa-float {

  position: fixed;

  bottom: 24px;

  right: 24px;

  z-index: 9999;

  display: flex;

  align-items: center;

  gap: 10px;

  text-decoration: none;

}

.gx-wa-float__bubble {

  background: #fff;

  color: #128C7E;

  font-size: 13px;

  font-weight: 600;

  padding: 8px 14px;

  border-radius: 20px;

  box-shadow: 0 4px 16px rgba(0,0,0,0.15);

  white-space: nowrap;

  opacity: 0;

  transform: translateX(10px);

  transition: opacity 0.3s, transform 0.3s;

  pointer-events: none;

}

.gx-wa-float:hover .gx-wa-float__bubble {

  opacity: 1;

  transform: translateX(0);

  pointer-events: auto;

}

.gx-wa-float__btn {

  width: 56px;

  height: 56px;

  border-radius: 50%;

  background: #25D366;

  display: flex;

  align-items: center;

  justify-content: center;

  box-shadow: 0 4px 20px rgba(37,211,102,0.5);

  transition: transform 0.2s, box-shadow 0.2s;

  flex-shrink: 0;

}

.gx-wa-float:hover .gx-wa-float__btn {

  transform: scale(1.1);

  box-shadow: 0 6px 24px rgba(37,211,102,0.6);

}

.gx-wa-float__btn svg {

  width: 30px;

  height: 30px;

  fill: #fff;

}

/* Pulse animation */

.gx-wa-float__btn::after {

  content: '';

  position: absolute;

  width: 56px;

  height: 56px;

  border-radius: 50%;

  background: rgba(37,211,102,0.4);

  animation: gx-wa-pulse 2s ease-out infinite;

}

@keyframes gx-wa-pulse {

  0%   { transform: scale(1); opacity: 0.8; }

  100% { transform: scale(1.8); opacity: 0; }

}

/* Mobile adjustments */

@media (max-width: 749px) {

  .gx-wa-float {

    bottom: 80px; /* above mobile nav bar */

    right: 16px;

  }

  .gx-wa-float__btn {

    width: 50px;

    height: 50px;

  }

  .gx-wa-float__btn::after {

    width: 50px;

    height: 50px;

  }

}

/* GreenX — Free Shipping badge on product page */

.greenx-free-shipping-badge {

  display: flex;

  align-items: center;

  gap: 0.5rem;

  margin: 0.75rem 0 1rem;

  padding: 0.6rem 0.9rem;

  background: #EAF6EE;

  border: 1px solid #BFE3CB;

  border-radius: 8px;

  color: #00793A;

  font-size: 0.85rem;

  font-weight: 600;

  width: fit-content;

}



.greenx-free-shipping-badge svg {

  flex-shrink: 0;

  color: #00793A;

}







/* ================================================
   Fix Top White Space Gap Above Product Image Gallery
   ================================================ */
.product-container-main .product-media-gallery,
.product-container-main .product-media-slider,
.product-container-main .slider-thumbnails-container {
  top: 0 !important;
  margin-top: 0 !important;
  padding-top: 0 !important;
}

.product-container-main.product-scroll--sticky .product-media-gallery,
.product-container-main.product-scroll--sticky .product-info {
  top: calc(var(--header-height, 7rem) + 1rem) !important;
  margin-top: 0 !important;
  padding-top: 0 !important;
}

/* ================================================
   Native Thumbnail Strip — Mouse Wheel Hover Scroll
   ================================================ */
.product-media-gallery .slider-thumbnails-container,
.product-media-gallery .thumbnail-list {
  overflow-x: auto !important;
  overflow-y: hidden !important;
  overscroll-behavior: contain !important;
  scroll-behavior: smooth !important;
  scrollbar-width: none !important;
  -ms-overflow-style: none !important;
}

.product-media-gallery .slider-thumbnails-container::-webkit-scrollbar,
.product-media-gallery .thumbnail-list::-webkit-scrollbar {
  display: none !important;
}


/* ================================================
   Cart & Checkout Available Offer Box (save10)
   ================================================ */
.cart-available-offer-box {
  background: #fffdf7 !important;
  border: 1.5px dashed #e6dec5 !important;
  border-radius: 12px !important;
  padding: 1rem 1.15rem !important;
  margin-top: 1rem !important;
  margin-bottom: 1.2rem !important;
  box-sizing: border-box !important;
}

.cart-available-offer-box .offer-card-header {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
}

.cart-available-offer-box .offer-tag-title {
  display: flex !important;
  align-items: center !important;
  gap: 0.5rem !important;
  font-size: 1rem !important;
  color: #121212 !important;
}

.cart-available-offer-box .offer-tag-title svg {
  width: 18px !important;
  height: 18px !important;
  color: #b87000 !important;
}

.cart-available-offer-box .offer-code-name {
  font-weight: 700 !important;
  font-size: 1.05rem !important;
  color: #121212 !important;
}

.cart-available-offer-box .offer-apply-btn {
  background: #ffffff !important;
  border: 1px solid #dcd3b8 !important;
  border-radius: 8px !important;
  font-weight: 700 !important;
  font-size: 0.85rem !important;
  padding: 0.4rem 1.2rem !important;
  cursor: pointer !important;
  color: #121212 !important;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.04) !important;
  transition: all 0.2s ease !important;
}

.cart-available-offer-box .offer-apply-btn:hover:not(:disabled) {
  background: #00793A !important;
  color: #ffffff !important;
  border-color: #00793A !important;
}

.cart-available-offer-box .offer-apply-btn.disabled-btn,
.cart-available-offer-box .offer-apply-btn:disabled {
  background: #f4f0e6 !important;
  color: #888888 !important;
  border-color: #e0d8c0 !important;
  opacity: 0.6 !important;
  cursor: not-allowed !important;
}

.cart-available-offer-box .offer-description {
  font-size: 0.85rem !important;
  color: #555555 !important;
  margin-top: 0.35rem !important;
  line-height: 1.35 !important;
}

.cart-available-offer-box .offer-progress-text {
  font-size: 0.82rem !important;
  font-weight: 600 !important;
  color: #b87000 !important;
  margin-top: 0.6rem !important;
  padding-top: 0.5rem !important;
  border-top: 1px dashed #efe8d5 !important;
}

.cart-available-offer-box .offer-progress-text.offer-unlocked {
  color: #00793A !important;
}
/* === GreenX Product Block Compact Spacing ===
   Reduces large vertical gaps between:
   - Color swatches (.product-variant-selects)
   - View Light guide (.product-info-popup)
   - Make This a Gift (.gift-options-block)
   ================================================================== */

/* 1. Reduce top margin between consecutive product info blocks */
.product-container-main .product-info .product-info-block.product-variant-selects,
.product-container-main .product-info .product-info-block.product-info-popup,
.product-container-main .product-info .product-info-block.product-info-popup:not(:first-child),
.product-container-main .product-info .gift-options-block,
.product-container-main .product-info .product-info-block:not(:first-child):has(.gift-options-block) {
  margin-block-start: 0.5rem !important;
  margin-block-end: 0.25rem !important;
}

/* 2. Tighten padding on View Light guide popup trigger */
.product-container-main .product-info .product-info-popup {
  padding-block: 0.2rem !important;
}

/* 3. Tighten padding & margins on Make This a Gift option */
.gift-options-block {
  margin-block: 0.4rem !important;
}

.gift-checkbox-label {
  padding-block: 0.25rem !important;
}

/* === END GreenX Product Block Compact Spacing ===*/


/* === GreenX View Light Guide Pill Button ===
   Matches user design: rounded green outline, yellow glowing bulb,
   green text, and right arrow chevron.
   ================================================================== */

.gx-light-guide-opener {
  display: inline-block !important;
  margin-block: 0.35rem !important;
  cursor: pointer !important;
}

.gx-light-guide-btn {
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  padding: 0.45rem 0.95rem !important;
  border: 1.5px solid #00793A !important;
  border-radius: 10px !important;
  background: #ffffff !important;
  transition: all 0.2s ease !important;
  box-shadow: 0 1px 4px rgba(0, 121, 58, 0.05);
}

.gx-light-guide-btn:hover {
  background: #f4fbf7 !important;
  border-color: #005c2c !important;
  box-shadow: 0 2px 8px rgba(0, 121, 58, 0.12);
}

.gx-light-guide-text {
  font-size: 0.92rem !important;
  font-weight: 600 !important;
  color: #00793A !important;
  text-decoration: none !important;
  line-height: 1 !important;
}

.gx-bulb-icon {
  flex-shrink: 0;
}

.gx-arrow-icon {
  flex-shrink: 0;
  margin-left: 2px;
  transition: transform 0.2s ease;
}

.gx-light-guide-btn:hover .gx-arrow-icon {
  transform: translateX(2px);
}

/* === END GreenX View Light Guide Pill Button ===*/


/* === GreenX Make This a Gift Pill Checkbox ===
   Matches View Light Guide pill style: rounded green border, warm red gift icon,
   interactive toggle with checked background tint and gift-wiggle animation.
   ================================================================== */

.gift-options-block {
  margin-block: 0.4rem !important;
}

/* Hide native checkbox visually while maintaining accessibility */
.gift-checkbox-input {
  position: absolute !important;
  opacity: 0 !important;
  width: 1px !important;
  height: 1px !important;
  margin: -1px !important;
  padding: 0 !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  border: 0 !important;
  pointer-events: none !important;
}

/* Label wrapper */
.gift-checkbox-label {
  display: inline-block !important;
  margin: 0 !important;
  padding: 0 !important;
  cursor: pointer !important;
  user-select: none !important;
}

/* Custom Pill Box */
.gift-pill-box {
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  border: 1px solid #00793A !important;
  border-radius: 6px !important;
  padding: 8px 14px !important;
  width: fit-content !important;
  background: #ffffff !important;
  transition: all 0.2s ease !important;
  box-shadow: 0 1px 4px rgba(0, 121, 58, 0.05);
}

.gift-checkbox-label:hover .gift-pill-box {
  border-color: #005c2c !important;
  background: #f8fcf9 !important;
}

/* Checked State */
.gift-checkbox-input:checked + .gift-pill-box,
.gift-checkbox-label.is-checked .gift-pill-box {
  border-color: #005c2c !important;
  background-color: #f0f7f1 !important;
  box-shadow: 0 2px 6px rgba(0, 121, 58, 0.08);
}

/* Keyboard Focus Outline */
.gift-checkbox-input:focus-visible + .gift-pill-box,
.gift-checkbox-label:focus-visible .gift-pill-box {
  outline: 2px solid #00793A !important;
  outline-offset: 2px !important;
}

/* Gift Icon Styling (#D64545 warm red) */
.gift-icon-svg {
  flex-shrink: 0 !important;
  color: #D64545 !important;
  stroke: #D64545 !important;
  width: 16px !important;
  height: 16px !important;
  transform-origin: center center;
}

/* Wiggle animation */
@keyframes gift-wiggle {
  0%, 100% { transform: rotate(0); }
  20% { transform: rotate(-15deg); }
  40% { transform: rotate(12deg); }
  60% { transform: rotate(-8deg); }
  80% { transform: rotate(5deg); }
}

.gift-icon-wiggle {
  animation: gift-wiggle 0.5s ease !important;
}

/* Label text */
.gift-pill-text {
  font-size: 13px !important;
  font-weight: 500 !important;
  color: #00793A !important;
  line-height: 1 !important;
  white-space: nowrap !important;
}

/* Checkmark icon for checked state */
.gift-check-svg {
  flex-shrink: 0 !important;
  color: #00793A !important;
  stroke: #00793A !important;
  width: 14px !important;
  height: 14px !important;
  display: none !important;
  margin-left: 2px !important;
}

.gift-checkbox-input:checked + .gift-pill-box .gift-check-svg,
.gift-checkbox-label.is-checked .gift-pill-box .gift-check-svg {
  display: inline-block !important;
}

/* Gift message textarea styling */
.gift-message-field {
  margin-top: 0.6rem !important;
}

.gift-message-textarea {
  width: 100% !important;
  padding: 0.65rem 0.85rem !important;
  border: 1px solid #cce5d6 !important;
  border-radius: 8px !important;
  font-size: 0.88rem !important;
  font-family: inherit !important;
  resize: vertical !important;
  outline: none !important;
  transition: border-color 0.2s ease !important;
}

.gift-message-textarea:focus {
  border-color: #00793A !important;
  box-shadow: 0 0 0 2px rgba(0, 121, 58, 0.15) !important;
}

/* === END GreenX Make This a Gift Pill Checkbox ===*/

/* === GreenX Nav Contrast Fix ===
   Fixes:
   0. Fix image carousel/banner sliding under navbar (cancel height: 0 collapse)
   1. Header always white (not just on hover)
   2. Header bar height reduced (compact padding)
   3. Solid dark-green nav bar
   4. Vertical alignment of nav items & dropdown hover fixes
   5. Dropdown: white bg, dark text
   6. Search panel z-index
   ================================================================== */

/* ── 0. Prevent image carousel/banner from sliding under navbar & header ── */
.section-header .header-wrapper.header--background-transparent {
  height: auto !important;
}

/* ── 1. ALWAYS WHITE HEADER ── */
.section-header .header-wrapper.header--background-transparent .header:before {
  opacity: 1 !important;
  transition: none !important;
}

.section-header:not(:hover, .header--is-active, .scrolled-past-header)
  .header-wrapper.header--background-transparent .header {
  --color-foreground: var(--color-foreground) !important;
  --alpha-border: var(--alpha-border) !important;
}

/* ── 2. COMPACT HEADER HEIGHT ── */
.section-header .header-wrapper .header .header-main {
  padding-block-start: 0.25rem !important;
  padding-block-end: 0.25rem !important;
}

.section-header .header-wrapper .header .header-main .header-heading-logo-wrapper {
  --logo-width: 110px !important;
}

/* ── 3. Solid nav bar background ── */
.section-header .header-nav,
.section-header .header-wrapper.header--background-transparent .header-nav,
.section-header:not(:hover, .header--is-active, .scrolled-past-header)
  .header-wrapper.header--background-transparent .header-nav {
  background-color: #0f3d24 !important;
  background-image: none !important;
}

/* ── 4. Search pop-panel z-index ── */
.header-main .header-search .search-wrapper .search-pop-panel {
  z-index: 200 !important;
}

/* ── 5. VERTICAL ALIGNMENT: normalize <a> and <details>/<summary> ── */
.header-nav .header-menu-nav .menu-list,
.header-nav .header-menu-nav > ul,
.header-nav .header-menu-nav .header-menu-nav-list {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  flex-wrap: nowrap !important;
  list-style: none !important;
  margin: 0 !important;
  padding: 0 !important;
  gap: 0 !important;
  height: 100% !important;
}

.header-nav .header-menu-nav .menu-list > li,
.header-nav .header-menu-nav > ul > li {
  display: flex !important;
  align-items: center !important;
  height: 3rem !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* Plain <a> links */
.header-nav .header-menu-nav .menu-list > li > a,
.header-nav .header-menu-nav > ul > li > a {
  display: flex !important;
  align-items: center !important;
  height: 100% !important;
  padding: 0 0.85rem !important;
  line-height: 1 !important;
  white-space: nowrap !important;
  color: #ffffff !important;
  font-weight: 500 !important;
  font-size: 0.92rem !important;
  text-decoration: none !important;
  border-bottom: none !important;
  transition: opacity 0.2s ease !important;
}

/* <details> wrapper */
.header-nav .header-menu-nav .menu-list > li > details,
.header-nav .header-menu-nav > ul > li > details,
.header-nav .header-menu-nav .first-level-drop {
  display: flex !important;
  align-items: center !important;
  height: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* Make details element inside drop-menu span the full height of the navbar */
.header-nav .header-menu-nav .first-level-drop > details {
  height: 100% !important;
  width: 100% !important;
  display: block !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* <summary> trigger */
.header-nav .header-menu-nav .menu-list > li > details > summary,
.header-nav .header-menu-nav > ul > li > details > summary,
.header-nav .header-menu-nav .first-level-summary,
.header-nav .header-menu-nav .first-level-drop > details > summary {
  display: flex !important;
  align-items: center !important;
  height: 100% !important;
  padding: 0 0.85rem !important;
  line-height: 1 !important;
  list-style: none !important;
  cursor: pointer !important;
  white-space: nowrap !important;
  color: #ffffff !important;
  font-weight: 500 !important;
  font-size: 0.92rem !important;
  text-decoration: none !important;
  border-bottom: none !important;
  transition: opacity 0.2s ease !important;
}

.header-nav .header-menu-nav summary::-webkit-details-marker { display: none !important; }
.header-nav .header-menu-nav summary::marker { display: none !important; }

.header-nav .header-menu-nav .first-level-summary .menu-item-text {
  color: #ffffff !important;
  line-height: 1 !important;
}

.header-nav .header-menu-nav .first-level-summary .icon-caret {
  color: #ffffff !important;
  margin-inline-start: 0.25rem !important;
  width: 0.65rem !important;
  height: 0.65rem !important;
}

/* Hover */
.header-nav .header-menu-nav .menu-list > li > a:hover,
.header-nav .header-menu-nav .first-level-summary:hover {
  opacity: 0.75 !important;
}

/* Active / current page */
.header-nav .header-menu-nav .menu-item.active > a,
.header-nav .header-menu-nav .menu-item > a[aria-current="page"],
.header-nav .header-menu-nav .first-level-summary[aria-current="page"] {
  font-weight: 700 !important;
  text-decoration: underline !important;
  text-decoration-color: #ffffff !important;
  text-underline-offset: 4px !important;
  text-decoration-thickness: 2px !important;
}

/* ── 6. Dropdown: white bg, dark text ── */
.header-nav .header-menu-nav .menu-submenu,
.header-nav .header-menu-nav .sub-menu-wrap,
.header-nav .header-menu-nav details[open] .sub-menu-wrap,
.header-nav .header-menu-nav .mega-menu,
.header-nav .header-menu-nav .first-level-drop .menu-list {
  background-color: #ffffff !important;
  --color-foreground: 28, 28, 28 !important;
}

.header-nav .header-menu-nav .menu-submenu a,
.header-nav .header-menu-nav .sub-menu-wrap a,
.header-nav .header-menu-nav .first-level-drop .menu-list a,
.header-nav .header-menu-nav details[open] .menu-list a {
  color: #1c1c1c !important;
  font-weight: 500 !important;
  text-decoration: none !important;
  display: block !important;
  height: auto !important;
  padding: 0.5rem 1rem !important;
}

.header-nav .header-menu-nav .first-level-drop .menu-list a:hover,
.header-nav .header-menu-nav details[open] .menu-list a:hover {
  color: #0f3d24 !important;
  font-weight: 600 !important;
}

/* ── 7. Mobile ── */
@media screen and (max-width: 989px) {
  .header-nav { display: none !important; }
}

/* === END GreenX Nav Contrast Fix ===*/

/* === GreenX Add to Cart & Quantity Box Redesign ===
   Curved rectangular Add to Cart button (border-radius: 8px) + compact box size
   ================================================================== */

.product-info .quantity-selector,
.quantity-selector {
  border: 1px solid #e5e7eb !important;
  border-radius: 12px !important;
  padding: 0.55rem 0.85rem !important;
  margin-top: 0.4rem !important;
  margin-bottom: 0.4rem !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  justify-content: flex-start !important;
  gap: 0.45rem !important;
  background: #fafafa !important;
  width: 100% !important;
  box-sizing: border-box !important;
}

.product-info .quantity-selector .quantity-label,
.quantity-selector .quantity-label {
  font-size: 0.9rem !important;
  font-weight: 600 !important;
  color: #1f2937 !important;
  margin: 0 !important;
  padding: 0 !important;
  white-space: nowrap !important;
}

.product-info .quantity-selector .quantity-label b {
  font-weight: 600 !important;
}

.product-info .quantity-selector .quantity-input-wrapper,
.quantity-selector .quantity-input-wrapper {
  margin: 0 !important;
  padding: 0 !important;
  display: flex !important;
  align-items: center !important;
  gap: 0.75rem !important;
  width: 100% !important;
}

/* White boxed stepper with vertical line dividers */
.product-info .quantity-selector quantity-input.quantity,
.quantity-selector quantity-input.quantity {
  display: inline-flex !important;
  align-items: center !important;
  background: #ffffff !important;
  border: 1px solid #d1d5db !important;
  border-radius: 8px !important;
  overflow: hidden !important;
  height: 38px !important;
  padding: 0 !important;
  width: auto !important;
  flex: 0 0 auto !important;
}

.product-info .quantity-selector quantity-input.quantity .quantity-button,
.quantity-selector quantity-input.quantity .quantity-button {
  background: #ffffff !important;
  border: none !important;
  width: 34px !important;
  height: 38px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  cursor: pointer !important;
  color: #374151 !important;
  font-size: 1rem !important;
  padding: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  transition: background 0.15s ease !important;
}

.product-info .quantity-selector quantity-input.quantity .quantity-button:hover,
.quantity-selector quantity-input.quantity .quantity-button:hover {
  background: #f3f4f6 !important;
}

.product-info .quantity-selector quantity-input.quantity .quantity-input,
.quantity-selector quantity-input.quantity .quantity-input {
  background: #ffffff !important;
  border-left: 1px solid #e5e7eb !important;
  border-right: 1px solid #e5e7eb !important;
  border-top: none !important;
  border-bottom: none !important;
  width: 38px !important;
  height: 38px !important;
  text-align: center !important;
  font-size: 0.95rem !important;
  font-weight: 700 !important;
  color: #111827 !important;
  padding: 0 !important;
  margin: 0 !important;
  box-shadow: none !important;
  border-radius: 0 !important;
}

/* Curved rectangular Add to Cart button (border-radius: 8px like Buy button) */
.product-container-main .product-info .product-info-buy-buttons .add-cart-button,
.product-info .quantity-selector .add-cart-button,
.quantity-selector .add-cart-button,
.add-cart-button {
  flex: 1 !important;
  height: 38px !important;
  min-height: 38px !important;
  background: #ffffff !important;
  border: 1.5px solid #00793A !important;
  border-radius: 8px !important;
  color: #00793A !important;
  font-size: 0.92rem !important;
  font-weight: 600 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  cursor: pointer !important;
  transition: all 0.2s ease !important;
  padding: 0 0.85rem !important;
  box-shadow: none !important;
  margin: 0 !important;
}

.product-container-main .product-info .product-info-buy-buttons .add-cart-button:hover,
.product-info .quantity-selector .add-cart-button:hover,
.quantity-selector .add-cart-button:hover,
.add-cart-button:hover {
  background: #00793A !important;
  color: #ffffff !important;
  border-color: #00793A !important;
}

.product-container-main .product-info .product-info-buy-buttons .add-cart-button .button-text,
.product-info .quantity-selector .add-cart-button .button-text,
.add-cart-button .button-text {
  color: inherit !important;
}

/* === END GreenX Add to Cart & Quantity Box Redesign ===*/
/* === GreenX Combo Offers Mobile Vertical Layout ===
   Stacks cards vertically (down down down) ONLY on mobile screens (max-width: 767px)
   ================================================================== */

@media screen and (max-width: 767px) {
  .combo-offers-page .combo-slider-track,
  .template-page-combo-offers .combo-slider-track,
  .section-combo-offers .combo-slider-track,
  .template-page-combo-offers .grid:not(.bottom-nav-bar),
  .template-page-combo-offers .product-grid {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    gap: 1.5rem !important;
    overflow-x: visible !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }

  .combo-offers-page .combo-banner-card,
  .template-page-combo-offers .combo-banner-card,
  .section-combo-offers .combo-banner-card,
  .template-page-combo-offers .grid__item,
  .template-page-combo-offers .card-wrapper {
    flex: 0 0 auto !important;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }
}

/* === END GreenX Combo Offers Mobile Vertical Layout ===*/


/* === GreenX Offer Apply Button Touch & Pointer Fix ===
   1. Hides floating WhatsApp widget when cart drawer is open so it NEVER blocks mobile taps
   2. Gives Apply button touch-action: manipulation and min tap target size
   ================================================================== */

cart-drawer[open] ~ .gx-wa-float,
body:has(cart-drawer[open]) .gx-wa-float,
html:has(cart-drawer[open]) .gx-wa-float,
.drawer[open] ~ .gx-wa-float,
body:has(.drawer[open]) .gx-wa-float,
.overflow-hidden .gx-wa-float {
  opacity: 0 !important;
  pointer-events: none !important;
  visibility: hidden !important;
  transition: opacity 0.2s ease, visibility 0.2s ease !important;
}

.cart-available-offer-box {
  position: relative !important;
  z-index: 20 !important;
  pointer-events: auto !important;
}

.cart-available-offer-box .offer-apply-btn,
#greenx10-apply-btn {
  position: relative !important;
  z-index: 30 !important;
  pointer-events: auto !important;
  cursor: pointer !important;
  touch-action: manipulation !important;
  -webkit-tap-highlight-color: rgba(0, 121, 58, 0.2) !important;
  user-select: none !important;
  -webkit-user-select: none !important;
  min-height: 38px !important;
  min-width: 76px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
}

/* === END GreenX Offer Apply Button Touch & Pointer Fix ===*/


/* === GreenX Bottom Nav Bar Horizontal Protection === */
@media screen and (max-width: 749px) {
  .bottom-nav-bar,
  #Bottom-Nav-Bar {
    position: fixed !important;
    inset-inline-start: 0 !important;
    inset-block-end: 0 !important;
    left: 0 !important;
    bottom: 0 !important;
    width: 100% !important;
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: space-around !important;
    padding-block: 0.5rem !important;
    padding-inline: 0 !important;
    box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.1) !important;
    z-index: 99999 !important;
    background: #ffffff !important;
  }
  .bottom-nav-bar .nav-item,
  #Bottom-Nav-Bar .nav-item {
    flex: 1 1 0% !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
    line-height: 1 !important;
    text-decoration: none !important;
    color: inherit !important;
  }
}
/* === END GreenX Bottom Nav Bar Horizontal Protection === */

/* === GreenX Persistent Sticky Header Fix === */
.section-header.scrolled-past-header {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  width: 100% !important;
  z-index: 1000 !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08) !important;
  background: #ffffff !important;
  animation: stickyHeaderReveal 250ms ease-out forwards !important;
}

@keyframes stickyHeaderReveal {
  from {
    transform: translateY(-100%);
  }
  to {
    transform: translateY(0);
  }
}

/* === GreenX Hamburger Visible on Desktop ===
   Makes the hamburger/mobile-drawer trigger button visible on desktop (>= 1250px).
   
   Root cause: On desktop the grid-template-areas use "logo menu right" or "logo search right"
   — there is NO "left" area defined, so .header-left (which contains the hamburger)
   flows outside the grid and ends up on the RIGHT side.

   Fix: 
   1. Show the .header-left wrapper (override large-up-hide).
   2. Force grid-area: left and redefine grid-template-areas to include "left" before "logo".
   ================================================================== */
@media screen and (min-width: 1250px) {
  /* Show the wrapper */
  .header-main .header-left.large-up-hide {
    display: flex !important;
    align-items: center !important;
    grid-area: left !important;
  }

  /* menu-position--bottom (your site's layout): "logo search right" -> "left logo search right" */
  .header-main.menu-position--bottom {
    grid-template-areas: "left logo search right" !important;
    grid-template-columns: auto auto 1fr auto !important;
  }

  /* logo-line, logo-left: "logo menu right" -> "left logo menu right" */
  .header-main.menu-position--logo-line.logo-position--left {
    grid-template-areas: "left logo menu right" !important;
    grid-template-columns: auto auto 1fr auto !important;
  }

  /* logo-line, logo-center: "menu logo right" -> "left menu logo right" */
  .header-main.menu-position--logo-line.logo-position--center {
    grid-template-areas: "left logo menu right" !important;
    grid-template-columns: auto auto 1fr auto !important;
  }
}
/* === END GreenX Hamburger Visible on Desktop ===*/


/* === GreenX Cart Drawer Layering Fix ===
   Ensures Cart Drawer opens ABOVE sticky navbar (z-index: 1000) instead of under it */
cart-drawer,
.cart-drawer,
.section-drawer,
.cart-drawer.drawer.modal {
  z-index: 999999 !important;
}


/* ================================================
   Mobile Product Gallery Polish & Spacing
   Scoped strictly to mobile breakpoint (< 750px)
   ================================================ */
@media screen and (max-width: 749px) {
  /* 1. Native mobile horizontal touch scrolling for thumbnail container */
  .product-container-main .slider-thumbnails-container,
  .product-container-main .slider-thumbnails-wrapper,
  .product-container-main .product-thumbnail-slider,
  .product-container-main .product-thumbnail-slider .slider-container {
    overflow-x: auto !important;
    overflow-y: hidden !important;
    width: 100% !important;
    max-width: 100% !important;
    position: relative !important;
    -webkit-overflow-scrolling: touch !important;
  }

  /* 2. Flex track for thumbnail list ensuring full width & trailing padding */
  .product-container-main .product-media-gallery .product-thumbnail-slider .thumbnail-list {
    display: flex !important;
    flex-wrap: nowrap !important;
    gap: 10px !important;
    width: max-content !important;
    min-width: 100% !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    padding-right: 1.5rem !important;
    padding-left: 0.25rem !important;
    margin-top: 14px !important;
    transform: none !important; /* Prevent JS slider translate offset clipping last item */
    -webkit-overflow-scrolling: touch !important;
    scrollbar-width: none !important;
  }

  .product-container-main .product-media-gallery .thumbnail-list::-webkit-scrollbar {
    display: none !important;
  }

  /* 3. Equal size for all thumbnails (72px) without flex shrink */
  .product-container-main .product-media-gallery .thumbnail-list .thumbnail-list-item {
    flex: 0 0 72px !important;
    width: 72px !important;
    min-width: 72px !important;
    max-width: 72px !important;
    box-sizing: border-box !important;
  }

  /* 4. Rounded corners (8px) for thumbnails matching main image */
  .product-container-main .product-media-gallery .thumbnail-list .thumbnail-list-item,
  .product-container-main .product-media-gallery .thumbnail-list .thumbnail-media,
  .product-container-main .product-media-gallery .thumbnail-list .thumbnail-media img,
  .product-container-main .product-thumbnail-image {
    border-radius: 8px !important;
    overflow: hidden !important;
  }

  /* 5. Active/selected thumbnail highlight border (2px accent green ring) */
  .product-container-main .product-media-gallery .thumbnail-list .thumbnail-list-item:has(.thumbnail-media[aria-current]),
  .product-container-main .product-media-gallery .thumbnail-list .thumbnail-list-item.is-current-variant-thumbnail {
    box-shadow: 0 0 0 2px #00793A !important;
    border-color: #00793A !important;
  }

  .product-container-main .product-media-gallery .thumbnail-list .thumbnail-list-item .thumbnail-media[aria-current] {
    transform: none !important;
  }
}


/* ================================================
   Mobile Category Grid & New Arrivals Spacing & Button Collision Fix (< 750px)
   ================================================ */
@media screen and (max-width: 749px) {
  /* 1. Reposition floating back-to-top button out of content area to bottom right */
  .back-to-top-button {
    inset-block-end: 5rem !important;
    inset-inline-end: 1rem !important;
    z-index: 999 !important;
  }

  /* 2. Reduce excessive vertical whitespace between Category Grid and New Arrivals to ~24-32px */
  .responsive-image-grid-section {
    padding-bottom: 0 !important;
    margin-bottom: 0.5rem !important;
  }

  .featured-collection .section__wrapper {
    padding-top: 0.75rem !important;
  }

  .featured-collection .section-header-block {
    margin-block-end: 1.25rem !important;
    margin-top: 0 !important;
  }

  /* 3. Full width and zero truncation for New Arrivals subtitle text */
  .featured-collection .section-header-block p,
  .featured-collection .section-header-block div,
  .featured-collection .section-header-block .content-group {
    width: 100% !important;
    max-width: 100% !important;
    padding-inline: 0.75rem !important;
    box-sizing: border-box !important;
    overflow: visible !important;
    white-space: normal !important;
    word-break: break-word !important;
  }
}


/* ================================================
   New Arrivals Heading Restyling & Leaf Sway Animation
   ================================================ */
@keyframes swayLeaf {
  0%, 100% {
    transform: rotate(-8deg);
  }
  50% {
    transform: rotate(8deg);
  }
}

@import url('https://fonts.googleapis.com/css2?family=Baloo+2:wght@700&family=Fredoka:wght@700&display=swap');

.heading-block:has(.heading-leaf-wrap),
.featured-collection .heading-block {
  font-family: 'Baloo 2', 'Fredoka', cursive, sans-serif !important;
  font-weight: 700 !important;
  color: #1a4d2e !important;
  font-size: 1.95rem !important;
  text-transform: uppercase;
  letter-spacing: 0.01em;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
}

.heading-leaf-wrap {
  display: inline-block;
  margin-bottom: 6px;
}

.heading-leaf-icon {
  width: 26px;
  height: 26px;
  display: block;
  transform-origin: bottom center;
  animation: swayLeaf 2.2s ease-in-out infinite;
}

@media screen and (max-width: 749px) {
  .heading-block:has(.heading-leaf-wrap),
  .featured-collection .heading-block {
    font-size: 1.6rem !important;
  }
}