/* ===========================
   Global base styles
   =========================== */

/* Box model & resets */
* { box-sizing: border-box; }
html, body { margin:0; padding:0; }
img { max-width:100%; height:auto; display:block; }

:root{ --content-max:1200px; --gutter:16px; }

/* Typography & page */
body {
  font-family: Arial, sans-serif;
  color:#111;
  background:#f3ebe0;   /* requested site background */
}
a { color: inherit; text-decoration: none; }

/* Containers & common ui */
.container { max-width:1200px; margin:0 auto; padding:0 16px; }
.section { padding:24px 0; }
h1,h2,h3 { margin:0 0 12px; line-height:1.25; }
h2 { font-size:22px; }

/* Announcement */
.announcement { background:#f3f4f6; text-align:center; padding:10px; font-weight:600; }

/* ===== Promo Bar (announcement strip) ===== */
.promo-bar {
  background: #000;             /* black background */
  color: #fff;                  /* white text */
  text-align: center;
  font-size: 14px;
  font-weight: 600;
  padding: 6px 0;
  letter-spacing: 0.3px;
}

.promo-bar a {
  color: #fff;
  text-decoration: underline;
}

.promo-bar a:hover {
  opacity: 0.85;
}

/* Header / Nav (kept minimal so your header.cfm controls the rest) */
.nav { display:flex; justify-content:space-between; align-items:center; gap:16px; }
.brand { font-weight:bold; font-size:18px; }
.navlinks a { margin:0 8px; color:#374151; }
.navlinks a:hover { text-decoration:underline; }

/* ===== Header layout (logo  search  icons) ===== */
header.site { 
  background:#f3ebe0; 
  border-bottom:1px solid #e5e7eb; 
  position: sticky; top:0; z-index:100;
}
header.site .container,
 .hero .container{
  max-width: var(--content-max);
  margin-inline: auto;
  padding-inline: var(--gutter);
}
/* Top bar: logo | search | icons */
header.site .topbar{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  padding:8px 16px;
  position:relative;
}
header.site .brand { display:flex; align-items:center; }
header.site .brand img{ height:96px; width:auto; display:block; z-index:20; }
header.site .tagline{
  position:absolute;
  inset:0;                 /* occupy the topbar’s content box */
  display:grid;
  place-items:center;      /* true center both axes */
  padding:0 96px;          /* reserve space so it never collides with logo/icons */
  max-width:none;          /* let grid handle centering */
  text-align:center;
  z-index:10;
  font-family:"Playfair Display", Georgia, "Times New Roman", Times, serif;
  font-size:clamp(1.15rem, 1.25vw + .7rem, 1.7rem);
  font-weight:600;
  font-style:italic;
  line-height:1.3;
  letter-spacing:.3px;
  color:#2d2d2d;

  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
@media (max-width:900px){
  header.site .tagline{display:none}
}/* Search centered, grows but capped */
header.site .search{
  flex:1;
  display:flex;
  justify-content:center;
  min-width:200px;
}
header.site .search form{ display:flex; align-items:center; gap:8px; }
header.site .search input[type="text"],
header.site .search input[type="search"]{
  height:40px;
  padding:0 14px;
  border:1px solid #cbd5e1;
  border-radius:9999px;
  width:min(520px, 60vw);
  background:#fff;
}
header.site .search button{
  height:40px;
  padding:0 14px;
  border:1px solid #cbd5e1;
  border-radius:10px;
  background:#fff;
  cursor:pointer;
}

/* Right-side icons */
header.site .actions{
  display:flex;
  margin-right: 0;
  align-items:center;
  gap:16px;
  min-width:72px; /* keep from collapsing on narrow screens */
  position: relative;
  z-index: 50;
}
header.site .actions a{ display:inline-flex; align-items:center; }

/* Nav row under the topbar */
header.site .navlinks{
  display:flex;
  justify-content:center;
  gap:24px;
  padding:8px 0 12px;
}
header.site .navlinks a{ color:#374151; font-weight:600; }
header.site .navlinks a.active{ color:var(--primary); position:relative; }
header.site .navlinks a.active::after{
  content:""; position:absolute; left:0; right:0; bottom:-8px;
  height:3px; background:var(--primary); border-radius:3px;
}

/* Mobile */
@media (max-width: 900px){
  header.site .topbar{
    flex-wrap:wrap;
    row-gap:10px;
  }
  header.site .brand{ order:1; }
  header.site .search{ order:3; width:100%; justify-content:stretch; }
  header.site .search input[type="text"],
  header.site .search input[type="search"]{ width:100%; }
  header.site .actions{ order:2; }
  header.site .navlinks{ gap:16px; }
}
/* Buttons */



/* ===== Product Grid (Homepage / Best Sellers / New Arrivals) ===== */
.grid {
  display: flex;
  flex-wrap: wrap;              /* wrap to new lines */
  gap: 16px;                    /* space between cards */
  justify-content: flex-start;  /* left-align cards */
}

.card {
  flex: 0 0 auto;               /* no stretching */
  width: 280px;                 /* fixed max width */
  border: 1px solid #ddd;
  border-radius: 8px;
  background: #fff;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: transform .2s ease, box-shadow .2s ease;
}

.card:hover {
  transform: translateY(-3px);
  box-shadow: 0 4px 12px rgba(0,0,0,0.08);
}

.card img {
  width: 100%;
  height: auto;
  object-fit: cover;
  background: #fff;
}

.card-body {
  padding: 12px;
  text-align: center;
  flex-grow: 1;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.card-body h3 {
  font-size: 12px;
  font-weight: 700;
  color: #111;
  margin: 6px 0 4px;
  white-space: nowrap;          
  overflow: hidden;
  text-overflow: ellipsis;      
}
.title {
  font-size: 12px;
  font-weight: 700;
  color: #111;
  margin: 8px 0 4px;
  text-align: center;
  white-space: nowrap;      /* keep title on one line */
  overflow: visible;        /* show full name */
  text-overflow: clip;
}
  
.price {
  display: block;
  font-weight: 600;
  color: var(--primary-color, #1E40AF); /* uses site theme color */
  font-size: 0.95rem;
  margin-top: 2px;
}

/* Footer */
footer.site { border-top:1px solid #ddd; padding:20px 0; text-align:center; margin-top:40px; font-size:14px; color:#555; }
footer.site .fab { margin:0 8px; color:#555; transition:color .2s; }
footer.site .fab:hover { color: var(--primary); }

/* Announcement & utility */
.tiny { font-size:12px; color:#6b7280; }

/* =========================================
   PRODUCT PAGE (product.cfm)  ALL STYLES
   ========================================= */

.product-page { padding: 0 0 20px; }

.product-layout {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
}

/* Image area */
.product-images {
  position: relative;
  padding: 12px;
  background: transparent;
  border: none;
  overflow: visible; /* allows content below */
  box-sizing: border-box;
}

/* Square stage for the carousel itself */
.product-images .carousel-container {
  position: relative;
  width: 100%;
  aspect-ratio: 1 / 1;          /* perfect square for 1024x1024 images */
  overflow: hidden;
  background: #f3ebe0;
  border: 1px solid #ddd;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
}
@media (max-width: 900px){
  /* ~10% shorter than square on phones */
  .product-images .carousel-container { aspect-ratio: 1.1; } /* width/height; bigger ratio => shorter height */
}
.product-images .carousel-slides-inner,
#carousel-slides {
  position: relative;
  top: 0; left: 0;
  width: 100%;
  height: 100%;
  display: flex;                          /* critical: make slides sit horizontally */
  transition: transform .3s ease-in-out;  /* enables the slide animation */
  will-change: transform;
}
/* Thumbnails */
.product-images .thumbs{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  margin-top:12px;
  justify-content:center;
}
.product-images .thumbs img{
  width:70px !important;
  height:70px !important;
  flex:0 0 70px;
  object-fit:contain;
  border:1px solid #ddd;
  border-radius:8px;
  background:#fff;
  cursor:pointer;
}

/* Details column */
.product-details {
  background:#fff;
  border:1px solid #ddd;
  border-radius:10px;
  padding:16px;
}
.product-details h1 {
  font-size:24px;
  margin:0 0 6px;
}
.product-details .price {
  font-size:22px;
  font-weight:800;
  margin:0;
}
/* PRICE + ACTIONS row */
.product-details .purchase-row{
  display:flex;
  align-items:center;
  gap:12px;
  width:100%;                          /* bind to card width */
  max-width:100%;
  flex-wrap:nowrap;                     /* desktop: one line */
  overflow:hidden;                      /* prevent visual spill */
}

.product-details .purchase-row .price{
  font-size:22px; font-weight:800; margin:0; line-height:1;
  flex:0 1 auto;                        /* allow price to shrink if needed */
  min-width:0;                          /* let it shrink below content-size */
}

/* unique class to avoid global collisions */
.product-details .purchase-row .purchase-actions{
  display:flex;
  gap:8px;
  margin-left:auto;                     /* push to the right */
  flex:0 0 auto;                        /* don't grow past the row */
  position:static; float:none;          /* neutralize any stray globals */
}

/* keep buttons compact but primary-styled */
.product-details .purchase-row .purchase-actions .btn{
  display:inline-flex;
  width:auto; min-width:0; white-space:nowrap;
  font-size:.85rem; padding:4px 12px;
}
.product-details .purchase-row .purchase-actions .btn i{ margin-right:4px; }
.purchase-note {
  margin: 10px 0 10px;
  padding-top: 8px;
  border-top: 1px solid #e5e7eb;   /* subtle divider line */
  font-size: 0.85rem;
  color: #4b5563;
  text-align: center;              /* centers text under buttons */
  line-height: 1.4;
}

/* Phone: force single-line price | fb-share | add-to-cart */
@media (max-width: 480px){
  #product-details .product-subheading { font-size: 0.9rem; margin-top: 2px !important; line-height: 1.25; }
  #product-details h2 { margin-top: 0; margin-bottom: 0.2rem; }
  .product-details .purchase-row{
	margin-top: 0.25rem;
	margin-bottom: 0.35rem;
    display:flex;
    align-items:center;
    flex-wrap: nowrap;          /* critical: no wrapping */
    gap: 6px;
    overflow: hidden;
  }
  .product-details .purchase-row .price{
    font-size: 1rem;            /* smaller price on phones */
    margin-right: 6px;
    white-space: nowrap;
    min-width: 0;               /* allow a little shrink if needed */
  }
  .product-details .purchase-row .purchase-actions{
    display:flex;
    align-items:center;
    gap: 6px;
    flex: 0 0 auto;             /* never expand to 100% */
    width: auto;
    margin-left: 0;
    white-space: nowrap;
  }
  .product-details .purchase-row .purchase-actions .btn{
    display:inline-flex;
    align-items:center;
    width:auto;
    min-width:0;
    padding: 6px 8px;           /* tighter buttons */
    font-size: .82rem;
  }
  .purchase-actions .btn.btn-primary{
    padding: 8px 12px;                /* slightly taller */
    font-weight: 700;                  /* crisper legibility */
  }
  /* Make FB share icon-only on phones to save space (no HTML change needed) */
 .product-details .purchase-row .purchase-actions a[href*="facebook.com/sharer"]{
  display: inline-flex;
  align-items: center;
  font-size: .82rem;
  padding: 6px 10px;
  white-space: nowrap;
}
.product-details .purchase-row .purchase-actions a[href*="facebook.com/sharer"] i{
  font-size: 1rem;
  margin-right: 4px;  /* small gap before “Share” */
}
}

/* Options layout */
.option-group { margin-top:0.25rem; margin-bottom:0.25rem; }
.option-row { display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
.option-label {
  display: inline-block;
  font-weight: 600;
  color: #374151;
  margin-right: 6px;
  white-space: nowrap;
}
.option-row .colors {
  flex-basis: 100%;              /* take the whole row */
  width: 100%;
  display: flex;                 /* keep swatches in a row */
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 6px;
}

/* Size buttons  50px tall, blue when selected */
.sizes .size-btn{
  height:50px; min-width:50px; padding:0 16px;
  border:1px solid #cbd5e1; border-radius:10px;
  background:#fff; color:#111; font-weight:700; font-size:14px; line-height:50px;
  cursor:pointer; transition:background .15s, color .15s, border-color .15s, box-shadow .15s;
}
.sizes .size-btn:is(:hover,:focus){ border-color: var(--primary); box-shadow:0 0 0 2px rgba(30,64,175,.10); outline:none; }
.sizes .size-btn.is-selected{ background:var(--primary); color:#fff; border-color:var(--primary); box-shadow:0 0 0 2px rgba(30,64,175,.15); }
@media (max-width: 900px) {
  .sizes .size-btn {
    min-width: 40px;
    height: 34px;
    font-size: 0.8rem;
    padding: 0 6px;
  }
}
/* Color buttons  5050 circles, checkmark overlay on selection */
.colors .color-btn{
  width:50px; height:50px; border:3px solid #999; border-radius:50%;
  margin:0 6px 6px 0; cursor:pointer; display:inline-block; position:relative;
  transition:border-color .15s, box-shadow .15s, transform .05s;
}
.colors .color-btn:is(:hover,:focus){ border-color:var(--primary); box-shadow:0 0 0 2px rgba(30,64,175,.10); outline:none; }
.colors .color-btn.is-selected{ border-color:var(--primary); box-shadow:0 0 0 2px rgba(30,64,175,.25); }
/* Use Unicode escape so no garbled glyphs */
.colors .color-btn.is-selected::after{
  content:"\2713";               /* ? */
  position:absolute; inset:0; display:grid; place-items:center;
  font-size:22px; font-weight:900; color:var(--checkmark-color, #fff); text-shadow:0 1px 2px rgba(0,0,0,.25);
}
.colors .color-btn.is-selected::before{
  content:""; position:absolute; inset:0; border-radius:inherit; box-shadow:inset 0 0 0 2px rgba(0,0,0,.18); pointer-events:none;
}
/* Qty */
.quantity select,
.qty select {
  padding:8px 10px;
  border:1px solid #d1d5db;
  border-radius:8px;
}
/* --- Large Add to Cart Button --- */
.btn-atc-large {
  display: block;
  width: 100%;
  text-align: center;
  padding: 16px 20px;
  margin: 16px 0 20px;
  font-size: 1.1rem;
  font-weight: 700;
  border: none;
  border-radius: 8px;
  color: #fff;
  background: linear-gradient(90deg, #2563eb 0%, #1d4ed8 100%);
  cursor: pointer;
  transition: background 0.2s ease, transform 0.1s ease;
}

.btn-atc-large:hover {
  background: linear-gradient(90deg, #1d4ed8 0%, #1e40af 100%);
}

.btn-atc-large:active {
  transform: scale(0.98);
}

/* Adjust spacing so it feels natural */
.add-to-cart-block {
  margin-top: 10px;
}

/* Desktop: tighten up slightly */
@media (min-width: 900px) {
  .btn-atc-large {
    max-width: 360px;
    margin: 18px auto 24px;
    font-size: 1rem;
  }
}

/* --- Global alert styling --- */
.alert {
  display: none;
  margin: 10px 0 14px;
  padding: 12px 14px;
  border-radius: 10px;
  font-weight: 700;
  font-size: 0.98rem;
  line-height: 1.35;
}
.alert.show { display: block; }

.alert-error {
  color: #7f1d1d;              /* dark red text */
  background: #fee2e2;         /* soft red background */
  border: 1px solid #fecaca;   /* red border */
  box-shadow: 0 1px 0 rgba(0,0,0,.03);
}

/* subtle attention animation */
@keyframes shake {
  0%,100%{ transform: translateX(0); }
  20%{ transform: translateX(-6px); }
  40%{ transform: translateX(6px); }
  60%{ transform: translateX(-4px); }
  80%{ transform: translateX(4px); }
}
.alert.attention { animation: shake .36s ease both; }

@media (max-width: 900px){
  .alert{ margin: 8px 0 12px; }
}

/* CTA button in details col */
.product-details 

/* Tabs */
.tabs { display:flex; gap:18px; border-bottom:1px solid #e5e7eb; margin-top:8px; }
.tab { padding:10px 0; background:none; border:none; font-weight:600; cursor:pointer; }
.tab.active { color: var(--primary); border-bottom:2px solid var(--primary); }
.tab-content { display:none; padding:12px 0 6px; }
.tab-content.active { display:block; }

/* Trust badges layout: 2 per row, centered */
.trust-badges {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
  margin-top: 20px;
}

.trust-badges .badge {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 16px;
  background: #fff;
  border: 1px solid #ddd;
  border-radius: 10px;
  text-align: center;
  font-weight: 600;
  color: #374151;
  transition: box-shadow 0.2s ease-in-out;
}

.trust-badges .badge img {
  width: 56px;
  height: 56px;
  margin-bottom: 8px;
}

.trust-badges .badge:hover {
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}
@media (max-width: 768px){
  .product-details + .trust-badges,
  .purchase-row + .trust-badges{
    margin-top: 10px;   /* was 20px */
    gap: 12px;          /* was 20px */
  }
  .trust-badges .badge{
    padding: 12px;      /* was 16px */
  }
}

/* Cart badge */
.nav-cart { position: relative; display: inline-block; }
.nav-cart .cart-badge {
  position: absolute;
  top: 0; 
  right: 0;
  transform: translate(50%, -50%);
  display: flex; 
  align-items: center;
  justify-content: center;
  min-width: 20px; 
  height: 20px;
  padding: 0 4px;
  border-radius: 9999px;
  background: #d32;           /* red badge */
  color: #fff;
  font-size: 12px; 
  font-weight: 700;
  border: 2px solid #fff;     /* white ring */
  box-shadow: 0 1px 2px rgba(0,0,0,.15);
  line-height: 1;
}

/* NEW badge for product cards */
.card { position: relative; }           /* if not already positioned */
.badge-new {
  position: absolute;
  top: 8px; left: 8px;
  padding: 3px 8px;
  border-radius: 9999px;
  background: #1f4fd1;   /* your primary blue */
  color: #fff;
  font-size: 12px;
  font-weight: 700;
  line-height: 1;
  box-shadow: 0 1px 2px rgba(0,0,0,.15);
}
/* Form field wrapper */
.field {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

/* Actions row (buttons) */
.actions {
  display: flex;
  gap: 12px;
  align-items: center;
}

/* Grid span for full-width fields */
.col-span-2 {
  flex: 0 0 100%;
}

/* Optional: style <details> disclosure sections */
details {
  border: 1px solid #ddd;
  border-radius: 8px;
  padding: 12px;
  background: #fff;
}
details summary {
  font-weight: 600;
  cursor: pointer;
}
/* ===== Checkout: Address page polish ===== */

/* Page header spacing */
.page-header { margin: 20px 0 12px; }
.page-header h1 { font-size: 28px; }

/* Form controls (inputs/selects/buttons already exist via .btn) */
.form input[type="text"],
.form input[type="tel"],
.form input[type="email"],
.form input[type="search"],
.form input[type="number"],
.form input {
	margin-top: 4px;
}
.form label {
	display: block;
	margin-top: 8px;
}
.form select {
  height: 40px;
  padding: 0 12px;
  border: 1px solid #cbd5e1;
  border-radius: 8px;
  background: #fff;
}

/* Grid for forms (2 cols on desktop, 1 on mobile) */
.form .grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px 16px;
}
@media (max-width: 900px){
  .form .grid { grid-template-columns: 1fr; }
}

/* Fields */
.field label { font-weight: 600; color: #374151; }
.field input, .field select { width: 100%; }

/* Full-width fields */
.col-span-2 { grid-column: 1 / -1; }

/* Actions row */
.actions { display: flex; gap: 12px; align-items: center; margin-top: 14px; }

/* Saved address cards */
.address-list { 
  display: grid; 
  grid-template-columns: repeat(3, minmax(240px, 1fr)); 
  gap: 16px; 
  margin: 8px 0 14px; 
}
@media (max-width: 1100px){ .address-list { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 700px){ .address-list { grid-template-columns: 1fr; } }

.address-card { 
  position: relative; 
  border: 1px solid #ddd; 
  border-radius: 10px; 
  background: #fff; 
  padding: 12px;
  cursor: pointer;
  transition: box-shadow .2s, border-color .2s, transform .05s;
  display: block;
}
.address-card:hover { box-shadow: 0 4px 12px rgba(0,0,0,.08); }

.address-card input[type="radio"]{
  position: absolute; 
  right: 12px; 
  top: 12px; 
  accent-color: var(--primary);
}

/* Highlight selected card (uses :has for modern browsers; graceful fallback otherwise) */
.address-card:has(input:checked) {
  border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(30,64,175,.15);
}

/* Card title + badge */
.address-card .title { display:flex; gap:8px; align-items:baseline; font-weight:700; margin-bottom:6px; }
.badge { padding: 3px 8px; border-radius: 9999px; background: #e5edff; color: #1f4fd1; font-size: 12px; font-weight: 700; }

/* Address text */
address { font-style: normal; color:#374151; line-height: 1.4; }

/* Collapsible Add new address */
details {
  border: 1px solid #ddd;
  border-radius: 10px;
  padding: 12px;
  background: #fff;
}
details summary { font-weight: 700; cursor: pointer; list-style: none; }
details summary::-webkit-details-marker { display: none; }
/* ===== Checkout v2 layout & polish ===== */
.checkout-grid { 
  display:grid; grid-template-columns: minmax(0,1fr) 360px; gap:28px; 
}
.checkout-grid > .checkout-main,
.checkout-grid > aside { align-self:start; }
.checkout-grid > aside { position:sticky; top:24px; }

.checkout-main .card, .checkout-summary.card {
  background:#fff; border:1px solid #e6e6e6; border-radius:16px; box-shadow:0 4px 20px rgba(0,0,0,.05);
}
.card-body { padding:24px; }
.summary-title { font-size:20px; margin:0 0 14px; }
.summary-row { display:flex; justify-content:space-between; margin:8px 0; color:#333; }
.summary-muted { color:#777; }
.summary-total { font-weight:700; font-size:18px; }

.page-header { margin: 10px 0 16px; }
.page-header h1 { font-size:28px; margin:0; }
.page-header .tiny{ color:#6b7280; }

.form input[type="text"], .form input[type="tel"], .form input[type="email"], 
.form input[type="search"], .form input[type="number"], .form select {
  height:44px; padding:0 12px; border:2px solid #e6e6e6; border-radius:10px; background:#fff;
}
.form input:focus, .form select:focus { outline:none; border-color:#bfbfbf; box-shadow:0 0 0 3px rgba(0,0,0,.06); }

.form .grid { display:grid; grid-template-columns:1fr 1fr; gap:14px 16px; }
@media (max-width: 980px){ .checkout-grid { grid-template-columns:1fr; } .form .grid{ grid-template-columns:1fr; } }

.radio { display:flex; align-items:center; gap:12px; padding:16px; border:1px solid #e6e6e6; border-radius:12px; margin-bottom:12px; background:#fff; }
.radio input { width:18px; height:18px; }

.actions { display:flex; justify-content:space-between; margin-top:16px; }



.badge{ display:inline-block; padding:6px 10px; border:1px solid #e6e6e6; border-radius:999px; font-size:12px; color:#444; background:#f3f4f6; }
/* ===== Cart v4  responsive grid-as-table (no summary) ===== */
.container.cartv4{max-width:1100px;margin:0 auto;padding:24px 16px}
.cartv4 .page-header{margin:10px 0 16px}
.cartv4 .page-header h1{font-size:28px;margin:0}

/* HEADERS (desktop only) */
.cartv4-head{
  display:grid;
  grid-template-columns: minmax(0,1.6fr) minmax(0,.6fr) minmax(0,.7fr) minmax(0,.5fr) minmax(0,.5fr) minmax(0,.6fr) minmax(0,.5fr);
  gap:16px;
  opacity:.7;
  font-weight:600;
  margin:8px 0 10px;
}

.cartv4-head .th{padding:0 6px}

/* ROWS */
.cartv4-row{
  display:grid;
  grid-template-columns: minmax(0,1.6fr) minmax(0,.6fr) minmax(0,.7fr) minmax(0,.5fr) minmax(0,.5fr) minmax(0,.6fr) minmax(0,.5fr);
  gap:16px;
  align-items:center;
  padding:14px 0;
  border-bottom:1px solid rgba(17,17,17,.08);
}
.cartv4-row:last-child{border-bottom:0}
.td{padding:4px 6px}
.td-unit,.td-line{font-weight:700}

/* ITEM CELL */
.media{display:flex;align-items:center;gap:12px}
.media img{width:64px;height:auto;border-radius:8px;border:1px solid #eee}
.media .title{font-size:16px;font-weight:600}
.muted{color:#6b7280;font-size:13px}

/* QTY FORM */
.qty-form{display:flex;align-items:center;gap:8px}
.input.qty{width:80px;height:38px;border:1px solid #cbd5e1;border-radius:10px;padding:0 10px}

/* LINKS / BTNS */
.link-danger{color:#b91c1c;text-decoration:none}
.link-danger:hover{text-decoration:underline}
.cartv4-actions{display:flex;justify-content:space-between;margin-top:18px}





.mobile-only{display:none}

/* ===== Mobile behavior ===== */
@media (max-width: 980px){
  .cartv4-head{display:none}
  .cartv4-row{
    grid-template-columns: 1fr 1fr;
    grid-template-areas:
      "item item"
      "sku opts"
      "unit qty"
      "line actions";
    gap:10px; padding:12px 0; border-bottom:1px solid #eee;
  }
  .td-item{grid-area:item}
  .td-sku{grid-area:sku}
  .td-opts{grid-area:opts}
  .td-unit{grid-area:unit}
  .td-qty{grid-area:qty}
  .td-line{grid-area:line}
  .td-actions{grid-area:actions;justify-self:end}
  .mobile-only{display:block}
  .media img{width:60px}
  .cartv4-actions{flex-direction:column;gap:10px}
}
/* ============================================================
   Cart / Checkout  shared styles (CF2016-friendly)
   These classes are used by checkout/address.cfm and cart/index.cfm
   Append-only: placed last so they override earlier defaults
   ============================================================ */

/* Page container */
.cartv4 {
  max-width: 1080px;
  margin: 32px auto 72px;
  padding: 0 16px;
}
.cartv4 h1 {
  font-size: 36px;
  line-height: 1.15;
  margin: 8px 0 18px;
  font-weight: 800;
}

/* Table-like header row for cart list */
.cart-header {
  display: grid;
  grid-template-columns: minmax(0,1.2fr) minmax(0,.6fr) minmax(0,.6fr) minmax(0,.6fr) minmax(0,.4fr) minmax(0,.6fr);
  gap: 16px;
  opacity: .7;
  font-weight: 600;
  margin: 8px 0 10px;
}
/* Cart item rows (remove border on last row) */
.cart-rows .cart-row {
  display: grid;
  grid-template-columns: minmax(0,1.2fr) minmax(0,.6fr) minmax(0,.6fr) minmax(0,.6fr) minmax(0,.4fr) minmax(0,.6fr);
  gap: 16px;
  align-items: center;
  padding: 14px 0;
  border-bottom: 1px solid rgba(17,17,17,.08);
}
.cart-rows .cart-row:last-child {
  border-bottom: 0; /* remove faint line under final item */
}

/* Cells: image + name cluster, thumbnail, strong line total */
.cart-img-name { display: flex; align-items: center; gap: 12px; min-width: 0; }
.cart-thumb { border-radius: 8px; }
.cart-name {
  font-weight: 700;
  min-width: 0;              /* allows shrinking inside grid/flex */
  overflow-wrap: anywhere;   /* wraps long text naturally */
  word-break: break-word;    /* ensures wrapping for long tokens */
}

.cart-line { font-weight: 700; }

/* Thick, dark divider between cart and checkout */
.cart-divider {
  border: none;
  height: 3px;
  background: #111;
  margin: 28px 0;
}

/* 75% / 25% split for checkout flow (left) and totals (right) */
.checkout-grid {
  display: grid;
  grid-template-columns: 3fr 1fr; /* 75% / 25% */
  gap: 32px;
  align-items: start;
}

/* Cards, buttons, totals  shared UI blocks */
.card {
  background: #fff;
  border-radius: 14px;
  padding: 22px;
  box-shadow: 0 1px 0 rgba(17,17,17,.06), 0 8px 24px rgba(17,17,17,.04);
}
.card h2 { font-size: 22px; font-weight: 800; margin: 0 0 16px; }

.totals { padding: 8px 0; }
.totals .row {
  display: flex;
  justify-content: space-between;
  margin: 10px 0;
  font-size: 18px;
}
.totals .row.total { font-weight: 800; font-size: 22px; }

.muted { color: #6b7280; font-style: italic; }

/* Responsive */
@media (max-width: 860px) {
  .checkout-grid { grid-template-columns: 1fr; }
}
/* ===== Cart page button/layout fixes (scoped, non-invasive) ===== */
.cartv4-actions{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:16px;
  margin-top:16px;
}
.cartv4-actions .right-actions{
  display:flex;
  gap:12px;
}

/* --- Ensure 75% / 25% layout on Shipping step --- */
.cartv4 .checkout-grid{
  display:grid;
  grid-template-columns: minmax(0,3fr) minmax(0,1fr); /* 75% / 25% and allow stretch */
  gap:32px;
  align-items:start;
}

/* Make the main white card actually fill its grid track */
.cartv4 .checkout-grid > .card{
  width:100%;
  max-width:none;   /* override any earlier cap */
}

/* Inside the white card, keep Ship To | Shipping Method side-by-side */
.cartv4 .ship-grid{
  display:grid;
  grid-template-columns: minmax(0,1fr) minmax(0,1fr);
  gap:24px;
}

/* ============================
   BUTTONS
   ============================ */
.btn {
  display:inline-flex; align-items:center; justify-content:center;
  padding:10px 20px; line-height:1.2; border-radius:8px; border:1px solid transparent;
  font-weight:600; cursor:pointer; text-decoration:none; font-size:15px;
}
.btn-primary { background:var(--primary); color:#fff; border-color:var(--primary); }
.btn-secondary { background:#fff; color:#111; border:1px solid #111; padding:8px 16px; font-weight:500; }
.btn-light { background:#f3f4f6; border-color:#e5e7eb; color:#111; }

.btn:hover{ filter:brightness(1.05); }
.btn-primary:hover{ filter:brightness(1.08); }
.btn-secondary:hover{ background:var(--primary); color:#fff; }
.btn-light:hover{ background:#e9ecef; }


/* ADDRESS FORM LAYOUT */
.address-form .row{
  display:flex;
  flex-wrap:wrap;
  gap:12px;
  align-items:flex-end;      /* align inputs nicely on one baseline */
  margin-top:12px;           /* space between rows */
}
.address-form .row > label{
  display:flex;
  flex-direction:column;     /* label on top, input below */
  gap:6px;                   /* space between label text and input */
  flex:1 1 0;
  min-width:0;
}
.address-form .row .col-2{   /* wider column helper */
  flex:2 1 0;
}

/* City / State / Postal on one line */
.address-form .row.city-line .col-city  { flex:2 1 0; min-width:0; }
.address-form .row.city-line .col-state { flex:0 0 120px; }  /* narrower */
.address-form .row.city-line .col-postal{ flex:0 0 150px; }  /* narrower */

/* Ensure inputs fill the column and have breathing room */
.form input, .form select, .form textarea { width:100%; }
.form label { margin-top: 6px; }  /* extra vertical padding between blocks */

/* Stack gracefully on small screens */
@media (max-width: 640px){
  .address-form .row.city-line .col-state,
  .address-form .row.city-line .col-postal{ flex:1 1 0; }
}
.modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.5);
  display: none;           /* default hidden */
  align-items: center;
  justify-content: center;
  z-index: 9999;
}
.modal-overlay.show { display: flex; }

.modal-content {
  background: #fff;
  padding: 1.75rem;
  border-radius: 10px;
  max-width: 540px;
  width: 92%;
  position: relative;
  box-shadow: 0 10px 30px rgba(0,0,0,0.25);
}

.modal-close {
  position: absolute;
  top: 8px; right: 10px;
  background: none;
  border: 0;
  font-size: 1.5rem;
  line-height: 1;
  cursor: pointer;
}

.modal-content h2 { margin: 0 0 .5rem; }
.modal-content ul { margin: .75rem 0 1rem; padding-left: 1.25rem; }

.modal-actions { display: flex; gap: 12px; justify-content: flex-end; }
button.btn, input[type="submit"].btn { display:inline-block; cursor:pointer; text-align:center; }
/* ===== Success Modal ===== */
.modal-content.success {
  border-left: 6px solid #28a745; /* green accent */
}
.modal-content.success h2 {
  color: #28a745;
}



/* === Nav/Hamburger: mobile-only hamburger; desktop full nav (global, minimal) === */
@media (min-width: 901px) {
  .hamburger { display: none !important; }
  header.site .navlinks { display: flex !important; }
}
@media (max-width: 900px) {
  header.site .navlinks { display: none !important; }
  header.site .navlinks.is-open {
    display: block !important;
    position: absolute;
    left: 0; right: 0;
    top: calc(var(--topbar-height, 72px));
    background: #fff;
    border-top: 1px solid #e5e7eb;
    box-shadow: 0 10px 18px rgba(0,0,0,.08);
    z-index: 60;
    padding: 10px 16px;
  }
  header.site .navlinks.is-open a {
    display: block;
    padding: 10px 8px;
    font-weight: 600;
    border-radius: 10px;
  }
  .hamburger {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px; height: 44px;
    border: 1px solid #e5e7eb;
    border-radius: 10px;
    background: #fff;
  }
  header.site { position: relative; }
  header.site .topbar { --topbar-height: 72px; }
}


/* === Merged non-header mobile product overrides (from site.product-aligned.css) === */
/* ==========================================================================
   Faith Fashions – site.product-aligned.css
   MOBILE-ONLY overrides (≤900px). Desktop remains defined by site.css.
   ========================================================================== */
   @media (max-width:900px){/* Safety: no sideways scroll */
  html, body{ overflow-x: hidden; }/* Centered brand, compact logo */
  header.site .brand{ justify-self: center; }header.site .brand img{ height: 56px; }/* Account + Cart on ONE line (right aligned) */
  header.site .header-icons,
  header.site .icons{
    justify-self: end;
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: flex-end !important;
    gap: 14px !important;
    white-space: nowrap;
  }header.site .header-icons a,
  header.site .icons a{
    display: inline-flex; align-items: center; justify-content: center;
    min-width: 36px; min-height: 36px;
  }/* Promo banner (match tone, mobile sizing) */
  .promo-bar{
    background:#000; color:#fff; text-align:center;
    font-size:14px; font-weight:600; padding:6px 0; letter-spacing:.3px;
  }.promo-bar a{ color:#fff; text-decoration:underline; }.promo-bar a:hover{ opacity:.85; }/* ---------- Breadcrumbs ---------- */
  .breadcrumbs, .breadcrumb{
    font-size:14px; color:#1f2937; padding:8px 16px 6px;
    white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
  }.breadcrumbs a, .breadcrumb a{ color:#1f2937; text-decoration:none; }.breadcrumbs a:hover, .breadcrumb a:hover{ text-decoration:underline; }.breadcrumbs .sep, .breadcrumb .sep{ margin:0 6px; color:#9ca3af; }/* ---------- Product layout ---------- */
  .product-layout{
    display:grid; grid-template-columns:1fr;
    grid-template-areas:
      "images"
      "details";    /* HERO first on mobile */
    gap: 1px;
  }
  .product-images{ grid-area: images; }
  .product-details{ grid-area: details; }/* NEW: Align price and button side-by-side on mobile */
  .purchase-row .btn-primary{ width: auto !important; display: inline-flex !important; flex-shrink: 0; min-width:0 !important }/* Hero: show full shirt design (no crop) */
  .product-images .main-wrap{
    padding: 6px; border-radius:14px; background:#fff;
    box-shadow: 0 6px 16px rgba(0,0,0,.06);
  }.product-images .main-wrap img{
    width:100%; height:auto; max-height:420px;
    object-fit: contain; object-position: center;
  }/* Remove thumbnail strip below hero */
  .thumbs, .thumbnail-strip, .product-thumbs{ display:none !important; }/* Text wrapping safety */
  .product-details, .tab-panel, .tab-content{
    overflow-wrap:anywhere; word-break:break-word;
  }/* ---------- Title / Price / CTA ---------- */
  .product-title{ font-size: clamp(1.25rem, 5.2vw, 1.75rem); margin: 0 16px; }/* Standard actions block (desktop/fallback).
     If CTA was moved into price-row, hide duplicate here. */
  .actions{ margin:12px 16px 0; display:flex; gap:12px; flex-wrap:wrap; }.actions .btn-primary{ width:100%; min-height:44px; border-radius:9999px; font-weight:700; }.actions.has-cta-in-price .btn-primary,
  .actions.has-cta-in-price button.btn-primary,
  .actions.has-cta-in-price input[type="submit"].btn-primary{
    display:none !important;
  }/* Qty */
  .form-row{ display:flex; gap:12px; align-items:center; margin:12px 16px 0; flex-wrap:wrap; }.qty{ display:inline-flex; align-items:center; border:1px solid #e5e7eb; border-radius:12px; overflow:hidden; }.qty input{ width:56px; height:40px; border:0; text-align:center; }.qty button{ width:40px; height:40px; border:0; background:#fff; }/* ---------- Options ---------- */
  .option{ margin:12px 16px 0; }.option label{ display:block; font-weight:700; margin-bottom:6px; }.sizes, .colors{ display:flex; flex-wrap:wrap; gap:8px; }.size-btn, .color-btn{
    display:inline-flex; align-items:center; justify-content:center;
    min-width:44px; height:44px; padding:0 12px;
    border-radius:9999px; border:1px solid #e5e7eb; background:#fff; font-weight:600;
  }.size-btn.selected, .color-btn.selected,
  .size-btn.is-selected, .color-btn.is-selected{
    border-color:#1f4fd1; box-shadow:0 0 0 3px rgba(31,79,209,.12);
  }/* ---------- Trust badges (placed below description via JS) ---------- */
  .trust-badges{
    display:grid; grid-template-columns:1fr 1fr; gap:14px; margin:16px 16px 0;
  }.trust-badges .badge{
    background:#fff; border-radius:14px; box-shadow:0 6px 16px rgba(0,0,0,.06);
    padding:16px; text-align:center;
  }.trust-badges .badge img{ width:36px; height:36px; margin:0 auto 8px; }.trust-badges .badge div{ font-weight:700; color:#111827; }/* ---------- Tabs / Description ---------- */
  .product-tabs{ margin:16px 16px 0; }.tab-list{ display:flex; gap:10px; border-bottom:1px solid #e5e7eb; }.tab-list .tab{
    padding:10px 14px; font-weight:700; border:0; background:transparent;
    border-bottom:2px solid transparent;
  }.tab-list .tab.is-active, .tab-list .tab.active{ border-color:#1f4fd1; color:#1f4fd1; }.tab-panel, .tab-content{ padding:12px 0; color:#374151; }/* ---------- Footer ---------- */
  .footer{ padding:24px 0 40px; background:#fff; color:#4b5563; }.footer .cols{ display:grid; grid-template-columns:1fr; gap:14px; }.footer a{ color:#4b5563; text-decoration:none; }.footer a:hover{ text-decoration: underline; }.footer .legal{ font-size:.85rem; color:#6b7280; }
}
@media (max-width:900px){/* Hide nav by default on mobile (product pages will get is-collapsed initially) */
  .navlinks{ display: none; }/* Ensure header provides positioning context */
  header.site{ position: relative; }form{
    /* Prevents default browser margins from causing overflow */
    margin: 0; 
    padding: 0;
    /* Forces the form to only take the space it needs, no extra width */
    width: 100%; 
    box-sizing: border-box; 
  }
  }
/* === Product listing grid: 1-up on phone portrait, 2-up on phone landscape & all tablets === */

/* Target common listing containers */
:where(.collection-grid, .grid.cards, .grid.products, .cards, .products-grid, .product-grid, .grid.products-grid) {
  display: grid;
  gap: 20px;
}

/* Desktop (leave as-is if you already set columns elsewhere) */

/* Mobile & tablets baseline: 2 columns up to 900px */
@media (max-width: 900px) {
  .collection-grid,
  .grid.cards,
  .grid.products,
  .cards,
  .products-grid,
  .product-grid,
  .grid.products-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 16px;
  }
}

/* Phone portrait override: 1 column on small screens in portrait */
@media (max-width: 640px) and (orientation: portrait) {
  .collection-grid,
  .grid.cards,
  .grid.products,
  .cards,
  .products-grid,
  .product-grid,
  .grid.products-grid {
    grid-template-columns: 1fr !important;
    max-width: 520px;
    margin: 0 auto; /* center the single column */
  }
}

/* Ensure cards fill their grid cell */
@media (max-width: 900px) {
  .collection-grid > *,
  .grid.cards > *,
  .grid.products > *,
  .cards > *,
  .products-grid > *,
  .product-grid > *,
  .grid.products-grid > * {
    width: 100% !important;
    margin: 0 !important;
  }
}
/* === Listing cards: make them fill rows on mobile === */

/* Default for mobile & tablets up to 900px: TWO per row (phones landscape + tablets) */
@media (max-width: 900px) {
  .grid > .card,
  .grid.cards > .card,
  .collection-grid > .card,
  .products-grid > .card,
  .product-grid > .card {
    /* override the 280px fixed width */
    width: auto !important;
    /* two-up in flex container with 16px gap */
    flex: 1 1 calc(50% - 16px) !important;
    max-width: calc(50% - 16px) !important;
    display: flex;            /* keep column layout inside */
    flex-direction: column;
  }

  /* make the anchor fill the card area */
  .grid > .card > a,
  .grid.cards > .card > a,
  .collection-grid > .card > a {
    display: block;
    width: 100%;
  }
}

/* Phones in PORTRAIT: ONE per row */
@media (max-width: 640px) and (orientation: portrait) {
  .grid > .card,
  .grid.cards > .card,
  .collection-grid > .card,
  .products-grid > .card,
  .product-grid > .card {
    flex: 1 1 100% !important;
    max-width: 100% !important;
  }
}
/* ---------- Home Page Badges (index.cfm only) ---------- */
.home-badges {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  max-width: 980px;
  margin: 16px auto 6px;
  justify-items: center;
  text-align: center;
}

.home-badges .badge {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  background: transparent;
  border: none;
  box-shadow: none;
}

.home-badges img {
  width: 96px;
  height: 96px;
  object-fit: contain;
  margin-bottom: 8px;
}

.home-badges div {
  font-weight: 700;
  font-size: 0.95rem;
  color: #111;
}

/* Tablet */
@media (max-width: 1024px) {
  .home-badges {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* Mobile */
@media (max-width: 600px) {
  .home-badges {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: nowrap;
    gap: 10px;
    margin: 14px auto 6px;
    max-width: 92%;
  }
  .home-badges .badge {
    background: transparent;
    border: 0;
    padding: 0;
  }
  .home-badges .badge > div {
    display: none;
  }
  .home-badges img {
    width: 44px;
    height: 44px;
    margin: 0;
    object-fit: contain;
  }
}
/*========================
     Product Page / Responsive Carousel Styles
   ========================= */

/* --- Carousel Base Styles --- */
/* --- Product image stage is already 1:1 via .product-images --- */
/* Scope the “moving track” correctly (NOT all children) */

/* Keep slides at 100% of the track width */
.carousel-slide { 
  flex: 0 0 100%;      /* Each slide takes 100% of the track width */
  min-width: 100%;     /* Prevent shrinking — ensures one full slide per view */
  height: 100%;        /* Match the height of the carousel container */
}
.carousel-slide img { 
  width: 100%; 
  height: auto; 
  max-height: 100%;
  object-fit: contain; 
  object-position: center; 
}

.carousel-nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background: rgba(0,0,0,0.5);
    color: white;
    border: none;
    padding: 10px;
    cursor: pointer;
    z-index: 10;
    opacity: 0.8;
    transition: opacity 0.2s;
}
.carousel-nav:hover {
    opacity: 1;
}
.carousel-nav.prev { left: 0; }
.carousel-nav.next { right: 0; }

/* --- Mobile Breakpoint: Hide Navigation Arrows --- */
@media (max-width: 900px) {
  .carousel-container { position: relative; }

  .carousel-nav {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 9999px;
    background: rgba(0,0,0,.35);
    color: #fff;
    font-size: 18px;
    line-height: 1;
    opacity: .9;
    z-index: 10;
    /* subtle shadow for legibility on photos */
    box-shadow: 0 2px 8px rgba(0,0,0,.25);
  }
  .carousel-nav.prev { left: 6px; }
  .carousel-nav.next { right: 6px; }
}
/* --- Slightly reduce product image height on mobile --- */
  .product-images,
  .carousel-slide img {
    max-height: 85vh;   /* 90% of viewport height */
  }
  /* Hero trust seal overlay (tiny, scoped) */
/* 30-Day Guarantee seal overlay (anchored to the image/slide) */
#carousel-slides{position:relative}
.hero-badge{position:absolute;top:8px;left:8px;width:clamp(56px,18vw,88px);z-index:9;pointer-events:none}
.hero-badge img{width:100%;height:auto;display:block}
@media (min-width:768px){.hero-badge{width:112px;top:10px;left:10px}}


/* --- Thumbnail Styles --- */
#image-thumbnails.thumbs {
    display: flex;
    overflow-x: auto;
    gap: 8px;
    margin-top: 10px;
    justify-content: center;
}
#image-thumbnails.thumbs img {
    width: 60px; 
    height: 60px;
    object-fit: cover;
    cursor: pointer;
    border: 2px solid transparent;
}
#image-thumbnails.thumbs img.active {
    border-color: #007bff; 
}/* Label above color swatches */
#selected-color-name {
  display: inline-block;
  font-weight: 600;
  color: #374151;
  white-space: nowrap;
  overflow: visible;
  text-overflow: clip;
}
#selected-color-name::after {
  content: "";
  display: block;
  flex-basis: 100%;
  height: 0;
}/* Force color swatches below the color name */
.product-details .option-group.colors .option-row {
  display: flex;
  flex-wrap: wrap;        /* allow a new line */
}

.product-details .option-group.colors .option-label {
  flex: 1 0 100%;         /* full width for label */
  margin-bottom: 6px;
}

.product-details .option-group.colors .option-controls {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.product-details, .product-details * { pointer-events: auto !important; }