/* ============================================
     CART PAGE
     ============================================ */
.product-breadcrumb {
  max-width: 1200px;
  margin: 0 auto;
  padding: 10px 32px 0;
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  font-weight: 600;
  color: #6b6b6b;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.product-breadcrumb a:hover {
  color: #ff6b35;
}

/* Page header */
.cart-header {
  max-width: 1200px;
  margin: 0 auto;
  padding: 28px 32px 0;
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 16px;
}

.cart-header h1 {
  font-size: clamp(40px, 7vw, 80px);
  font-weight: 900;
  letter-spacing: -0.04em;
  line-height: 1;
}

.cart-header h1 .accent {
  background: linear-gradient(135deg, #1f5d3f 0%, #ff6b35 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

.cart-header .meta {
  font-size: 16px;
  font-weight: 600;
  color: #555;
}

/* Main layout */
.cart-layout {
  max-width: 1200px;
  margin: 0 auto;
  padding: 32px 32px 80px;
  display: grid;
  grid-template-columns: 1fr 380px;
  gap: 40px;
  align-items: start;
}

/* ============== FREE SHIPPING TRACKER ============== */
.ship-tracker {
  background: #1a1a1a;
  color: #fcfaf4;
  border-radius: 24px;
  padding: 24px 28px;
  margin-bottom: 14px;
  position: relative;
  overflow: hidden;
}

.ship-tracker.qualified {
  background: linear-gradient(135deg, #1f5d3f 0%, #2a7a52 100%);
}

.ship-tracker-head {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 14px;
}

.ship-tracker-icon {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: #ff6b35;
  color: #1a1a1a;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
  flex-shrink: 0;
}

.ship-tracker.qualified .ship-tracker-icon {
  background: #fcfaf4;
  color: #1f5d3f;
}

.ship-tracker-msg {
  display: flex;
  align-items: baseline;
  gap: 10px;
  font-size: 15px;
  font-weight: 700;
  line-height: 1.2;
  flex-wrap: wrap;
}

.ship-tracker-amount {
  font-size: 32px;
  font-weight: 900;
  font-style: italic;
  letter-spacing: -0.03em;
  color: #ff6b35;
  line-height: 1;
}

.ship-tracker-label {
  color: #fcfaf4;
}

.ship-tracker-msg strong {
  color: #ff6b35;
  font-weight: 900;
}

.ship-tracker.qualified .ship-tracker-amount {
  color: #fcfaf4;
}

.ship-tracker.qualified .ship-tracker-msg strong {
  color: #fcfaf4;
}

@media (max-width: 480px) {
  .ship-tracker-amount {
    font-size: 26px;
  }

  .ship-tracker-label {
    font-size: 13px;
  }
}

.ship-tracker-bar {
  height: 12px;
  background: rgba(255, 248, 240, 0.15);
  border-radius: 6px;
  overflow: hidden;
  position: relative;
}

.ship-tracker-fill {
  height: 100%;
  background: linear-gradient(90deg, #ff6b35 0%, #ffd56b 100%);
  border-radius: 6px;
  transition: width 0.4s ease;
  position: relative;
}

.ship-tracker.qualified .ship-tracker-fill {
  background: #fcfaf4;
  width: 100% !important;
}

.ship-tracker-amounts {
  display: flex;
  justify-content: space-between;
  margin-top: 8px;
  font-size: 12px;
  color: rgba(255, 248, 240, 0.7);
  font-weight: 600;
}

/* ============== LINE ITEMS ============== */
.line-items {
  background: #fff;
  border: 3px solid #1a1a1a;
  border-radius: 24px;
  overflow: hidden;
}

.line-item {
  display: grid;
  grid-template-columns: 100px 1fr auto;
  gap: 20px;
  padding: 24px;
  border-bottom: 2px solid #f0e8d8;
  align-items: start;
}

.line-item:last-child {
  border-bottom: none;
}

.line-img {
  aspect-ratio: 1 / 1;
  border-radius: 16px;
  border: 2px solid #1a1a1a;
  background-size: cover;
  background-position: center;
}

.line-info {
  min-width: 0;
}

.line-category {
  font-size: 11px;
  font-weight: 800;
  color: #ff6b35;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-bottom: 4px;
}

.line-name {
  font-size: 18px;
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1.2;
  margin-bottom: 4px;
  margin-top: 0;
}

.line-name a {
  font-weight: 800;
  color: inherit;
  text-decoration: none !important;
}

.line-name a:hover {
  color: #ff6b35;
}

.line-meta {
  font-size: 13px;
  color: #6b6b6b;
  margin-bottom: 10px;
}

.line-controls {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}

.line-qty {
  display: inline-flex;
  align-items: center;
  border: 2px solid #1a1a1a;
  border-radius: 980px;
  background: #fff;
  overflow: hidden;
}

.line-qty button {
  width: 32px;
  height: 36px;
  font-size: 16px;
  font-weight: 700;
  background: none;
  border: none;
  cursor: pointer;
  font-family: inherit;
  transition: background 0.2s;
  display: flex;
  align-items: center;
  justify-content: center;
}

.line-qty button:hover {
  background: #ff6b35;
}

.line-qty input {
  width: 36px;
  height: 36px;
  text-align: center;
  background: transparent;
  border: none;
  font-size: 14px;
  font-weight: 800;
  color: #1a1a1a;
  font-family: inherit;
  outline: none;
}

.line-remove {
  font-size: 12px;
  color: #6b6b6b;
  font-weight: 600;
  text-decoration: underline;
  background: none;
  border: none;
  cursor: pointer;
  font-family: inherit;
  padding: 0;
}

.line-remove:hover {
  color: #ff6b35;
  background: none !important;
}

.line-bundle-items {
  list-style: none;
  margin: 0 0 10px;
  padding: 8px 10px;
  background: #f9f5ec;
  border-radius: 10px;
  border: 1px dashed #d8d2c4;
}

.line-bundle-items li {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  font-size: 12.5px;
  font-weight: 600;
  color: #4a4a4a;
  padding: 3px 0;
}

.line-bundle-item-qty {
  color: #888;
  font-weight: 700;
  flex-shrink: 0;
}

.line-bundle-edit {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 12px;
  font-weight: 700;
  color: #ff6b35;
  text-decoration: underline;
  margin-bottom: 10px;
}

.line-bundle-edit:hover {
  color: #1f5d3f;
}

.line-bundle-edit iconify-icon {
  font-size: 13px;
}

.line-price {
  text-align: right;
  align-self: start;
}

.line-price-current {
  font-size: 22px;
  font-weight: 900;
  letter-spacing: -0.02em;
  color: #1a1a1a;
}

.line-price-was {
  display: block;
  font-size: 13px;
  color: #b0b0b0;
  text-decoration: line-through;
  font-weight: 600;
  margin-top: 2px;
}

.line-price-unit {
  display: block;
  font-size: 11px;
  color: #6b6b6b;
  margin-top: 4px;
}

/* Empty state for cart */
.empty-state {
  text-align: center;
  padding: 14px 32px;
  background: #fff;
  border: 3px solid #1a1a1a;
  border-radius: 24px;
}

.empty-state .icon {
  font-size: 80px;
  color: #d0c8b8;
  margin-bottom: 16px;
}

.empty-state h3 {
  font-size: 28px;
  font-weight: 900;
  letter-spacing: -0.02em;
  margin-bottom: 8px;
}

.empty-state p {
  color: #6b6b6b;
  margin-bottom: 14px;
}

.empty-cat-pills {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
  margin: 22px 0 16px;
}

.empty-cat-pill {
  padding: 8px 16px;
  background: #fcfaf4;
  border: 2px solid #1a1a1a;
  border-radius: 980px;
  font-size: 13px;
  font-weight: 700;
  color: #1a1a1a;
  /* !important: same Storefront ".hentry .entry-content a" underline
     override as .product-card (see cards.css) — out-specifies a plain
     class selector. */
  text-decoration: none !important;
  transition: background 0.2s, color 0.2s;
}
.empty-cat-pill:hover {
  background: #1a1a1a;
  color: #ff6b35;
}

.empty-signin-line {
  padding-top: 16px;
  margin-top: 4px;
  margin-bottom: 0 !important;
  border-top: 2px dashed #e0d8c8;
  font-size: 13.5px;
  color: #6b6b6b;
}
.empty-signin-line a {
  color: #1f5d3f;
  font-weight: 800;
  text-decoration: underline;
}

/* Coupon section */
.coupon-section {
  margin-top: 20px;
  padding: 20px 24px;
  background: rgba(255, 107, 53, 0.06);
  border: 2px dashed #ff6b35;
  border-radius: 18px;
}

.coupon-form {
  display: flex;
  gap: 10px;
  justify-content: center;
  margin-top: 12px;
  margin-bottom: 0;
}

.coupon-form input {
  flex: 1;
  padding: 12px 18px;
  background: #fff;
  border: 2px solid #1a1a1a;
  border-radius: 12px;
  font-size: 14px;
  font-family: inherit;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-weight: 700;
  color: #1a1a1a;
  outline: none;
}

.coupon-form input::placeholder {
  color: #999;
  letter-spacing: 0;
  text-transform: none;
  font-weight: 500;
}

.coupon-form input:focus {
  border-color: #ff6b35;
}

.coupon-form button {
  padding: 12px 22px;
  background: #1a1a1a;
  color: #ff6b35;
  border-radius: 12px;
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.coupon-form button:hover {
  background: #ff6b35;
  color: #1a1a1a;
}

.coupon-label {
  font-size: 14px;
  font-weight: 800;
  color: #1a1a1a;
  display: flex;
  align-items: center;
  gap: 8px;
}

.coupon-label iconify-icon {
  color: #ff6b35;
  font-size: 18px;
}

.coupon-applied {
  display: none;
  margin-top: 10px;
  padding: 10px 14px;
  background: rgba(31, 93, 63, 0.1);
  color: #1f5d3f;
  border-radius: 10px;
  font-size: 13px;
  font-weight: 700;
  align-items: center;
  gap: 8px;
}

.coupon-applied.shown {
  display: flex;
}

/* ============== ORDER SUMMARY (sidebar) ============== */
.summary {
  position: sticky;
  top: 100px;
  background: #fff;
  border: 3px solid #1a1a1a;
  border-radius: 24px;
  padding: 28px;
}

.summary h2 {
  font-size: 22px;
  font-weight: 900;
  letter-spacing: -0.02em;
  margin-bottom: 20px;
  padding-bottom: 16px;
  border-bottom: 2px dashed #e0d8c8;
}

.summary-row {
  display: flex;
  justify-content: space-between;
  padding: 8px 0;
  font-size: 15px;
}

.summary-row.discount {
  color: #1f5d3f;
  font-weight: 700;
}

.summary-row.shipping {
  font-weight: 700;
}

.summary-row.shipping.free {
  color: #1f5d3f;
}

.summary-divider {
  height: 2px;
  background: #1a1a1a;
  margin: 16px 0;
}

.summary-total {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding: 8px 0 20px;
}

.summary-total-label {
  font-size: 14px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.summary-total-value {
  font-size: 32px;
  font-weight: 900;
  letter-spacing: -0.03em;
  color: #1a1a1a;
}

.checkout-btn {
  width: 100%;
  padding: 18px;
  background: #1f5d3f;
  color: #fcfaf4;
  border-radius: 14px;
  font-size: 16px;
  font-weight: 800;
  letter-spacing: 0.02em;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  box-shadow: 5px 5px 0 #1a1a1a;
  transition: transform 0.2s, box-shadow 0.2s, background 0.2s;
  margin-bottom: 14px;
}

.checkout-btn:hover {
  background: #2a7a52;
  transform: translate(-2px, -2px);
  box-shadow: 7px 7px 0 #1a1a1a;
}

.continue-shopping {
  display: block;
  text-align: center;
  font-size: 13px;
  font-weight: 700;
  color: #6b6b6b;
  text-decoration: underline;
  margin-bottom: 20px;
}

.continue-shopping:hover {
  color: #1a1a1a;
}

/* Payment / trust icons */
.summary-trust {
  padding-top: 20px;
  border-top: 2px dashed #e0d8c8;
  text-align: center;
}

.summary-trust-icons {
  display: flex;
  justify-content: center;
  gap: 8px;
  margin-bottom: 12px;
  flex-wrap: wrap;
}

.summary-trust-icon {
  padding: 6px 12px;
  background: #fcfaf4;
  border: 1.5px solid #e0d8c8;
  border-radius: 8px;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.04em;
  color: #555;
}

.summary-trust-msg {
  font-size: 12px;
  color: #6b6b6b;
  line-height: 1.5;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
}

.summary-trust-msg iconify-icon {
  color: #1f5d3f;
  font-size: 14px;
}

/* ============== RECOMMENDATIONS ============== */
.recs-section {
  background: #fcfaf4;
  padding: 70px 32px;
  border-top: 3px solid #1a1a1a;
}

.recs-inner {
  max-width: 1200px;
  margin: 0 auto;
}

.recs-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 28px;
  flex-wrap: wrap;
  gap: 12px;
}

.recs-header h2 {
  font-size: clamp(28px, 4vw, 40px);
  font-weight: 900;
  letter-spacing: -0.03em;
  line-height: 1;
}

.recs-header h2 .accent {
  background: linear-gradient(135deg, #1f5d3f 0%, #ff6b35 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

.recs-grid {
  display: flex;
  flex-wrap: nowrap;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
  scroll-snap-type: x mandatory;
  gap: 20px;
  padding-top: 4px;
  padding-left: 4px;
  padding-bottom: 8px;
}

.recs-grid::-webkit-scrollbar {
  height: 4px;
}

.recs-grid::-webkit-scrollbar-thumb {
  background: rgba(26, 26, 26, 0.2);
  border-radius: 4px;
}

.recs-controls {
  display: flex;
  gap: 8px;
  flex-shrink: 0;
}

.recs-btn {
  background: #fff;
  border: 3px solid #1a1a1a;
  border-radius: 50%;
  width: 40px;
  padding: 0;
  min-height: 0 !important;
  height: 40px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  transition: background 0.15s, color 0.15s;
}

.recs-btn:hover {
  background: #1a1a1a;
  color: #fff;
}

.recs-grid .product-card {
  flex: 0 0 calc(25% - 15px);
  scroll-snap-align: start;
  min-width: 0;
}

.rec-card:hover {
  transform: translate(-3px, -3px);
  box-shadow: 6px 6px 0 #1a1a1a;
}

.rec-img {
  height: 160px;
  border-bottom: 3px solid #1a1a1a;
  background-size: cover;
  background-position: center;
  position: relative;
}

.rec-tag {
  position: absolute;
  top: 10px;
  left: 10px;
  padding: 4px 10px;
  background: #ff6b35;
  color: #1a1a1a;
  border-radius: 980px;
  font-size: 10px;
  font-weight: 800;
  transform: rotate(-2deg);
}

.rec-body {
  padding: 16px;
}

.rec-name {
  font-size: 16px;
  font-weight: 800;
  letter-spacing: -0.01em;
  margin-bottom: 4px;
}

.rec-meta {
  font-size: 12px;
  color: #6b6b6b;
  margin-bottom: 10px;
}

.rec-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.rec-price {
  font-size: 16px;
  font-weight: 900;
}

.rec-add {
  padding: 6px 14px;
  background: #1a1a1a;
  color: #ff6b35;
  border-radius: 980px;
  font-size: 11px;
  font-weight: 800;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.rec-add:hover {
  background: #ff6b35;
  color: #fcfaf4;
}

/* Responsive */

@media (max-width: 1024px) {

  .cart-layout {
    grid-template-columns: 1fr;
    gap: 24px;
    padding: 24px 22px 60px;
  }

  .summary {
    position: static;
  }

  .recs-section {
    padding: 48px 22px;
  }

  .recs-grid {
    gap: 16px;
  }

  .recs-grid .product-card {
    flex: 0 0 calc(50% - 8px);
  }
}

@media (max-width: 640px) {
  .line-item {
    grid-template-columns: 80px 1fr;
    gap: 14px;
    padding: 16px;
  }

  .line-price {
    grid-column: 1 / -1;
    text-align: left;
    padding-top: 8px;
    border-top: 1px dashed #e0d8c8;
    display: flex;
    justify-content: space-between;
    align-items: center;
  }

  .recs-section {
    padding: 32px 16px;
  }

  .recs-grid {
    gap: 12px;
  }

  .recs-grid .product-card {
    flex: 0 0 calc(50% - 6px);
  }
}





/* ====================================================================
     MOBILE E-COMMERCE NORMALIZATION (standard phone patterns)
     ==================================================================== */

/* ≤640px (phone) — 2-col product grids, tighter cards, compact hero */
@media (max-width: 640px) {

  /* Product grids — 2 columns (standard e-comm on phone, NOT single col) */
  .products-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 10px !important;
  }

  /* Product cards — compact, tighter */
  .product-card {
    border-radius: 14px !important;
    border-width: 2px !important;
  }

  .product-image {
    height: 130px !important;
  }

  .product-body {
    padding: 10px !important;
  }

  .product-category {
    font-size: 10px !important;
    margin-bottom: 2px !important;
  }

  .product-name {
    font-size: 13px !important;
    margin-bottom: 2px !important;
    line-height: 1.15 !important;
  }

  .product-meta {
    font-size: 10px !important;
    margin-bottom: 4px !important;
  }

  .product-meta>span {
    font-size: 10px !important;
  }

  .product-rating {
    font-size: 10px !important;
  }

  .product-price {
    font-size: 14px !important;
  }

  .quick-add,
  .related-card-add {
    font-size: 11px !important;
    padding: 5px 8px !important;
  }

  .product-footer {
    gap: 4px !important;
  }

  .product-badge {
    font-size: 9px !important;
    padding: 3px 7px !important;
    top: 6px !important;
    left: 6px !important;
  }

  .product-fav {
    top: 6px !important;
    right: 6px !important;
  }

  /* Section padding — tighter */
  section {
    padding: 32px 14px !important;
  }

  /* Page-hero — tighter */
  .page-hero,
  .contact-hero,
  .about-hero,
  .bundles-hero,
  .faq-hero,
  .reviews-hero,
  .rewards-hero,
  .category-hero,
  .post-hero,
  .blog-hero {
    padding: 28px 16px 16px !important;
  }

  /* Headlines slightly tighter on mobile but readable */
  .page-hero h1,
  .contact-hero h1,
  .about-hero h1,
  .bundles-hero h1,
  .faq-hero h1,
  .reviews-hero h1,
  .rewards-hero h1,
  .category-hero h1,
  .post-hero h1,
  .blog-hero h1 {
    font-size: clamp(28px, 9vw, 42px) !important;
  }

  /* Buttons — bigger tap targets, full-ish width */
  .btn-primary,
  .btn-secondary,
  .vault-cta,
  .hero-cta-primary,
  .welcome-cta {
    padding: 12px 18px !important;
    font-size: 14px !important;
  }

  /* Container padding */
  .container {
    padding-left: 14px !important;
    padding-right: 14px !important;
  }
}

/* ≤480px (small phone) — even tighter */
@media (max-width: 480px) {
  .product-image {
    height: 110px !important;
  }

  .product-name {
    font-size: 12px !important;
  }

  .product-price {
    font-size: 13px !important;
  }

  section {
    padding: 28px 12px !important;
  }
}

/* ≤380px (iPhone SE) — minimum sane */
@media (max-width: 380px) {
  .products-grid {
    gap: 8px !important;
  }

  .product-image {
    height: 95px !important;
  }

  .product-body {
    padding: 8px !important;
  }

  .product-name {
    font-size: 11px !important;
  }

  .product-price {
    font-size: 12px !important;
  }
}


/* Cart-specific mobile layout */
@media (max-width: 768px) {
  .cart-layout {
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 16px !important;
    padding: 20px 14px !important;
  }

  .cart-layout>* {
    min-width: 0;
  }

  .cart-line {
    grid-template-columns: 80px 1fr !important;
    gap: 12px !important;
    padding: 14px !important;
  }

  .line-thumb {
    width: 80px !important;
    height: 80px !important;
  }

  .line-info {
    font-size: 13px !important;
  }

  .line-name {
    font-size: 14px !important;
  }

  .line-controls {
    grid-column: 1 / -1 !important;
    justify-content: space-between !important;
    margin-top: 8px !important;
  }

  .cart-summary {
    position: static !important;
    padding: 18px !important;
  }
}

/* ==========================================================================
   Shopify-style mobile normalization (appended for site-wide consistency)
   - 2-col product grids on phone (not 1-col)
   - 44px+ tap targets
   - Horizontal-scroll rails for related products / category chips / trust badges
   - Single-col forms on small screens
   - No emoji-only headings; readable type at small sizes
   ========================================================================== */
@media (max-width: 768px) {

  .products-grid,
  .product-grid,
  .related-grid,
  .related-products,
  .you-may-also-like {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 12px !important;
  }

  .collections-grid,
  .categories-grid,
  .feel-grid,
  .effects-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 12px !important;
  }

  .bundle-grid {
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 10px !important;
  }

  /* Horizontal scroll rails — trust badges, category chips, related products on PDP */
  .badge-rail,
  .chip-rail,
  .pill-rail,
  .filter-chips,
  .trust-marquee,
  .category-chips {
    display: flex !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
    scrollbar-width: none !important;
    gap: 10px !important;
    padding: 4px 22px 8px !important;
    margin: 0 -22px !important;
    scroll-snap-type: x mandatory !important;
  }

  .badge-rail::-webkit-scrollbar,
  .chip-rail::-webkit-scrollbar,
  .pill-rail::-webkit-scrollbar,
  .filter-chips::-webkit-scrollbar,
  .trust-marquee::-webkit-scrollbar,
  .category-chips::-webkit-scrollbar {
    display: none !important;
  }
}

@media (max-width: 640px) {
  section {
    padding: 40px 22px !important;
  }

  /* Tap targets — Shopify minimum is 44px */
  .btn-primary,
  .btn-secondary,
  .btn,
  button[type="submit"],
  .add-to-cart,
  .cta {
    min-height: 44px !important;
    padding: 12px 18px !important;
  }

  /* Product cards on phone — Shopify style */
  .product-card {
    border-radius: 14px !important;
    border-width: 2px !important;
  }

  .product-image,
  .product-thumb {
    height: 130px !important;
  }

  .product-body {
    padding: 10px !important;
  }

  .product-name,
  .product-title {
    font-size: 13px !important;
    line-height: 1.3 !important;
  }

  .product-price {
    font-size: 14px !important;
  }

  /* Single-col forms on phone */
  .form-grid,
  .form-row,
  .checkout-grid,
  .cart-grid,
  .account-grid {
    grid-template-columns: 1fr !important;
    gap: 14px !important;
  }

  /* Headings — keep readable on phone */
  h1,
  .h1 {
    font-size: clamp(28px, 8vw, 40px) !important;
    line-height: 1.05 !important;
  }

  h2,
  .h2 {
    font-size: clamp(22px, 6.5vw, 32px) !important;
    line-height: 1.1 !important;
  }

  /* Hero CTAs stack full-width on phone */
  .hero-ctas,
  .cta-group {
    flex-direction: column !important;
  }

  .hero-ctas .btn-primary,
  .hero-ctas .btn-secondary,
  .cta-group .btn {
    width: 100% !important;
    justify-content: center !important;
  }
}

/* ============== Mobile sticky checkout bar (Shopify pattern) ============== */
.mobile-checkout-bar {
  display: none;
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  background: #fcfaf4;
  border-top: 2px solid #1a1a1a;
  padding: 12px 16px calc(12px + env(safe-area-inset-bottom));
  box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.12);
  z-index: 9000;
  align-items: center;
  gap: 12px;
}

.mcb-total {
  display: flex;
  flex-direction: column;
  flex-shrink: 0;
}

.mcb-total-label {
  font-size: 11px;
  color: #6b6b6b;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.mcb-total-value {
  font-size: 20px;
  font-weight: 900;
  font-style: italic;
  color: #1a1a1a;
  line-height: 1.1;
}

.mcb-checkout {
  flex: 1;
  min-height: 50px;
  background: #1a1a1a;
  color: #fcfaf4;
  border: none;
  border-radius: 14px;
  font-size: 15px;
  font-weight: 800;
  letter-spacing: 0.02em;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  text-decoration: none;
  transition: background 0.2s, transform 0.1s;
}

.mcb-checkout:hover {
  background: #ff6b35;
  color: #1a1a1a;
}

.mcb-checkout:active {
  transform: scale(0.98);
}

.mcb-checkout iconify-icon {
  font-size: 18px;
}

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

  body {
    padding-bottom: 86px;
  }
}


/* =========================================================================
   CART FLOW POLISH (round 22)
   - Line-items header with clear-bag affordance
   - Toast with optional Undo action — used for remove + clear-bag + rec-add
   - Stronger Remove affordance (red on hover, not just a text link)
   - Coupon error/success state transitions cleanly when retrying
   ========================================================================= */

/* Line-items section header (count + clear bag) */
.line-items-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 0 4px 14px;
  border-bottom: 1px solid rgba(26, 26, 26, 0.08);
  margin-bottom: 14px;
}

.line-items-head-count {
  font-size: 13px;
  font-weight: 700;
  color: #1a1a1a;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}

.line-items-clear {
  background: none;
  border: none;
  padding: 0;
  font-family: inherit;
  font-size: 13px;
  font-weight: 600;
  color: #666;
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
  transition: color 0.15s;
}

.line-items-clear:hover {
  color: #c93838;
}

/* Stronger Remove button — more obvious it's destructive on hover */
.line-remove {
  position: relative;
  transition: color 0.15s, background 0.15s;
}

.line-remove:hover {
  color: #c93838 !important;
}

/* Toast — bottom-center, slides up. Replaces silent line-remove. */
.cart-toast {
  position: fixed;
  bottom: 24px;
  left: 50%;
  transform: translate(-50%, 24px);
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 12px 16px 12px 20px;
  background: #1a1a1a;
  color: #fcfaf4;
  border-radius: 999px;
  font-size: 14px;
  font-weight: 600;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.18);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.18s ease, transform 0.18s ease;
  z-index: 9999;
  max-width: calc(100vw - 32px);
}

.cart-toast.is-visible {
  opacity: 1;
  transform: translate(-50%, 0);
  pointer-events: auto;
}

.cart-toast-msg {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 60vw;
}

.cart-toast-action {
  background: #ff6b35;
  color: #1a1a1a;
  border: none;
  border-radius: 999px;
  padding: 6px 14px;
  font-family: inherit;
  font-size: 13px;
  font-weight: 800;
  cursor: pointer;
  transition: background 0.15s;
}

.cart-toast-action:hover {
  background: #ff8050;
}

/* Mobile: keep toast above the sticky checkout bar */
@media (max-width: 820px) {
  .cart-toast {
    bottom: calc(80px + 16px);
    font-size: 13px;
  }
}

/* Reduced motion — instant show/hide, no slide */
@media (prefers-reduced-motion: reduce) {
  .cart-toast {
    transition: opacity 0.01s;
    transform: translate(-50%, 0);
  }
}


/* Dark variant of .dd-tag — dark bg, orange text. Used on the Bulk dropdown
   item so it visually distinguishes from the Bundles tag (orange bg, dark text).
   Matches the BULK badge palette used on the bulk product cards. */
.dd-tag.dd-tag-dark {
  background: #1a1a1a;
  color: #ff6b35;
}


/* ---- WooCommerce notices (e.g. $50 minimum order) ---- */
.woocommerce-error,
.woocommerce-message,
.woocommerce-info {
  list-style: none;
  margin: 0 0 18px;
  padding: 16px 18px;
  border-radius: 12px;
  font-family: "Inter", -apple-system, BlinkMacSystemFont, sans-serif;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.4;
  background: #fbeceb;
  color: #1a1a1a;
  border: 1px solid #f0c9c6;
}

.woocommerce-message {
  background: #e7f3ec;
  border-color: #c6e3d3;
}

.woocommerce-info {
  background: #f0e8d8;
  border-color: #e0d8c8;
}

.woocommerce-error li,
.woocommerce-message li,
.woocommerce-info li {
  margin: 0;
  padding: 0;
}

.woocommerce-error a.button,
.woocommerce-message a.button {
  margin-left: 8px;
  font-weight: 800;
  color: #1f5d3f;
  text-decoration: underline;
}