/* ============================================
   FONTS
   ============================================ */
@font-face { font-family: 'Beatrice'; src: url('https://customwovenlabels.com/pub/media/cwl2024/fonts/beatrice/Beatrice-Regular.woff2') format('woff2'); font-weight: 400; font-style: normal; font-display:swap; }
@font-face { font-family: 'Beatrice'; src: url('https://customwovenlabels.com/pub/media/cwl2024/fonts/beatrice/Beatrice-Bold.woff2') format('woff2'); font-weight: 700; font-style: normal; font-display:swap; }
@font-face { font-family: 'Gotham'; src: url('https://customwovenlabels.com/pub/media/cwl2024/fonts/Gotham-Medium.woff2') format('woff2'); font-weight: 500; font-style: normal; font-display:swap; }

/* ============================================
   RESET & BASE
   ============================================ */
*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }
html, body { overflow-x: hidden; width: 100%; max-width: 100vw; }
body { font-family: 'Beatrice', 'Segoe UI', system-ui, -apple-system, sans-serif; background: #fff; color: #1a1a2e; line-height: 1.65; font-size: 16px; }
a { text-decoration: none; color: inherit; }
img { max-width: 100%; height: auto; }
ul { list-style: none; }


/* ============================================
   V3 TOP BAR (exact from product page v3)
   ============================================ */
.promo-bar {
  background: #e8eaef;
  color: #333;
  padding: 0 40px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 12px;
  font-family: 'Gotham', 'Beatrice', sans-serif;
  letter-spacing: 0.2px;
}
.promo-bar .left { display: flex; align-items: center; gap: 16px; }
.promo-bar .reviews-badge { display: flex; align-items: center; gap: 7px; text-decoration: none; }
.promo-bar .reviews-badge img { height: 20px; }
.promo-bar .reviews-badge span { font-size: 13px; font-weight: 700; color: #333; }
.promo-bar .center { flex: 1; text-align: center; }
.promo-bar .promo {
  font-weight: 700; font-size: 12px; letter-spacing: 0.5px; color: #333;
}
.promo-bar .promo .highlight {
  color: #007AB7;
  font-weight: 700;
  background: rgba(0,122,183,0.1);
  padding: 2px 8px;
  border-radius: 3px;
  margin-left: 4px;
}
.promo-bar .right { display: flex; align-items: center; gap: 4px; }
.promo-bar .right a {
  color: #333; text-decoration: none; font-size: 13px; font-weight: 700;
  padding: 4px 10px; border-radius: 4px; transition: all 0.2s;
  display: flex; align-items: center; gap: 5px;
}
.promo-bar .right a:hover { background: rgba(0,0,0,0.06); color: #102051; }
.promo-bar .right .divider { width: 1px; height: 14px; background: rgba(0,0,0,0.15); }


/* ============================================
   V3 HEADER (exact from product page v3)
   ============================================ */
header {
  background: white;
  padding: 0 40px;
  height: 68px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 2px solid #007AB7;
  position: relative;
  box-shadow: 0 1px 4px rgba(0,0,0,0.04);
}
header .logo { display: flex; align-items: center; }
header .logo img { height: 44px; }
header .menu { display: flex; align-items: center; gap: 0; margin: 0; padding: 0; list-style: none; align-self: center; height: 100%; }
header .menu > .menu-item { display: flex !important; align-items: center !important; height: 100%; position: relative; margin: 0 !important; padding: 0 !important; float: none !important; }
header .menu > .menu-item > a {
  display: flex;
  align-items: center;
  padding: 6px 14px;
  margin: 0 3px;
  font-size: 13px;
  font-weight: 700;
  color: white;
  text-decoration: none;
  transition: all 0.2s;
  cursor: pointer;
  letter-spacing: 0.1px;
  font-family: 'Gotham', 'Beatrice', sans-serif;
  border: none;
  border-radius: 6px;
  background: linear-gradient(135deg, #007AB7 0%, #00a8e8 100%);
  position: relative;
  z-index: 101;
}
header .menu > .menu-item:hover > a { border-radius: 6px 6px 0 0; box-shadow: 0 4px 12px rgba(0,122,183,0.3); }
header .menu > .menu-item:hover .dropdown { display: block; }
.dropdown {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  background: white;
  border: 1px solid #e8eaef;
  border-top: none;
  border-radius: 0 0 10px 10px;
  box-shadow: 0 12px 32px rgba(0,0,0,0.12);
  min-width: 250px;
  z-index: 100;
  padding: 6px 0;
}
.dropdown a {
  display: block;
  padding: 9px 20px;
  font-size: 14px;
  color: #333;
  text-decoration: none;
  transition: all 0.15s;
  font-weight: 400;
}
.dropdown a:hover { background: #f0f7fc; color: #007AB7; padding-left: 24px; }
.dropdown a.highlight-link { color: #007AB7; font-weight: 700; border-top: 1px solid #eee; margin-top: 4px; padding-top: 12px; }
.header-actions { display: flex; align-items: center; gap: 10px; }
.button.get-quote {
  background: linear-gradient(135deg, #007AB7 0%, #00a8e8 100%) !important;
  color: white !important;
  padding: 9px 20px !important;
  border-radius: 6px !important;
  text-decoration: none !important;
  font-size: 13px;
  font-weight: 700;
  transition: all 0.2s;
  font-family: 'Gotham', 'Beatrice', sans-serif;
  letter-spacing: 0.3px;
  border: none !important;
  box-shadow: none;
}
.button.get-quote:hover { opacity: 0.9; transform: translateY(-1px); box-shadow: 0 4px 16px rgba(0,122,183,0.3); }
.minicart-link { position: relative; }
.cart-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: #cf4537;
  color: white;
  font-size: 10px;
  font-weight: 700;
  min-width: 18px;
  height: 18px;
  border-radius: 9px;
  padding: 0 5px;
  position: relative;
  top: -1px;
  margin-left: 3px;
  line-height: 1;
  font-family: 'Gotham', 'Beatrice', sans-serif;
}
/* Kill any Magento/Porto minicart counter badges */
.counter.qty,
.minicart-wrapper .counter.qty {
  display: none !important;
}
.phone-block { text-align: right; }
.btn-call {
  color: #102051;
  text-decoration: none;
  font-size: 13px;
  font-weight: 700;
  font-family: 'Gotham', 'Beatrice', sans-serif;
}
.office-hours {
  font-size: 10px;
  color: #6b7a90;
  font-weight: 600;
  font-family: 'Gotham', 'Beatrice', sans-serif;
  margin-top: 2px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  width: 100%;
}
.status-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  display: inline-block;
  flex-shrink: 0;
}
.status-dot.open {
  background: #22c55e;
  box-shadow: 0 0 6px rgba(34,197,94,0.6);
}
.status-dot.closed {
  background: #9ca3af;
}


/* ============================================
   V3 HAMBURGER (exact from product page v3)
   ============================================ */
.hamburger {
  display: none;
  background: none; border: none; cursor: pointer;
  width: 44px; height: 44px;
  flex-direction: column; align-items: center; justify-content: center; gap: 6px;
}
.hamburger span {
  display: block; width: 22px; height: 2px; background: #102051;
  border-radius: 2px; transition: all 0.3s;
}
.hamburger.open span:nth-child(1) { transform: rotate(45deg) translate(6px, 6px); }
.hamburger.open span:nth-child(2) { opacity: 0; }
.hamburger.open span:nth-child(3) { transform: rotate(-45deg) translate(6px, -6px); }


/* ============================================
   V3 MOBILE MENU (exact from product page v3)
   ============================================ */
.mobile-menu {
  display: none;
  position: fixed; top: 0; left: 0; right: 0; bottom: 0;
  background: white; z-index: 2000;
  overflow-y: auto; -webkit-overflow-scrolling: touch;
  padding: 0;
}
.mobile-menu.open { display: flex; flex-direction: column; }
.mobile-menu-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 20px; border-bottom: 2px solid #007AB7;
  position: sticky; top: 0; background: white; z-index: 1;
  box-shadow: 0 1px 4px rgba(0,0,0,0.04);
}
.mobile-menu-header img { height: 32px; }
.mobile-menu-close {
  background: none; border: none; font-size: 26px; color: #102051;
  cursor: pointer; width: 44px; height: 44px;
  display: flex; align-items: center; justify-content: center;
}
.mobile-menu-body { padding: 4px 0; flex: 1; }
.mobile-menu-body .mm-group { border-bottom: 1px solid #f0f0f0; }
.mobile-menu-body .mm-toggle {
  display: flex; justify-content: space-between; align-items: center;
  padding: 15px 20px; font-size: 16px; font-weight: 700; color: #102051;
  cursor: pointer; user-select: none;
  font-family: 'Gotham', 'Beatrice', sans-serif;
}
.mobile-menu-body .mm-toggle .mm-chev { transition: transform 0.3s; color: #bbb; font-size: 14px; }
.mobile-menu-body .mm-group.open .mm-chev { transform: rotate(180deg); color: #007AB7; }
.mobile-menu-body .mm-sub { display: none; padding: 0 20px 12px; }
.mobile-menu-body .mm-group.open .mm-sub { display: block; }
.mobile-menu-body .mm-sub a {
  display: block; padding: 11px 14px; font-size: 15px; color: #444;
  text-decoration: none; border-radius: 8px; font-weight: 400;
}
.mobile-menu-body .mm-sub a:active { background: #f0f7fc; }
.mobile-menu-body .mm-sub a.highlight-link { color: #007AB7; font-weight: 700; }
.mobile-menu-body .mm-link {
  display: block; padding: 15px 20px; font-size: 16px; font-weight: 700;
  color: #102051; text-decoration: none; border-bottom: 1px solid #f0f0f0;
  font-family: 'Gotham', 'Beatrice', sans-serif;
}
.mobile-menu-footer {
  padding: 16px 20px 24px;
  border-top: 1px solid #eee;
  background: #f8f9fb;
}
.mobile-menu-footer .button.get-quote {
  display: block; text-align: center; padding: 15px; font-size: 16px;
  border-radius: 10px; margin-bottom: 10px;
}
.mobile-menu-footer .btn-call {
  display: block; text-align: center; font-size: 15px; padding: 10px;
  color: #102051; text-decoration: none; font-weight: 700;
}
.mobile-menu-footer .mobile-hours {
  text-align: center; margin-top: 4px;
}


/* ============================================
   HERO (from approved cwl-hero-v1)
   ============================================ */
.hero {
  position: relative;
  min-height: 540px;
  background-image: url('https://customwovenlabels.com/pub/media/cwl2024/homepage-hero-v2/CWL_homepage_hero.webp');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  display: flex;
  align-items: center;
}
.hero::before {
  content: '';
  position: absolute;
  top: 0; left: 0; bottom: 0;
  width: 55%;
  background: linear-gradient(
    to right,
    rgba(0, 0, 0, 0.7) 0%,
    rgba(0, 0, 0, 0.55) 50%,
    rgba(0, 0, 0, 0.0) 100%
  );
  z-index: 1;
}
.hero-inner {
  position: relative;
  z-index: 2;
  max-width: 1400px;
  margin: 0 auto;
  padding: 56px 60px;
  width: 100%;
}
.hero-text {
  max-width: 520px;
}
.hero-text h1 {
  font-size: 42px;
  font-weight: 700;
  color: white;
  line-height: 1.15;
  letter-spacing: -0.5px;
  margin-bottom: 14px;
  text-shadow: 0 2px 8px rgba(0,0,0,0.3);
}
.hero-sub {
  font-size: 16px;
  color: rgba(255,255,255,0.85);
  line-height: 1.6;
  margin-bottom: 20px;
  text-shadow: 0 1px 4px rgba(0,0,0,0.3);
}
.hero-badges {
  display: flex;
  gap: 20px;
  margin-bottom: 28px;
  flex-wrap: wrap;
}
.hero-badge {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  font-weight: 700;
  color: white;
  font-family: 'Gotham', 'Beatrice', sans-serif;
  text-shadow: 0 1px 4px rgba(0,0,0,0.3);
}
.hero-badge .check {
  width: 22px; height: 22px;
  background: #28a745;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 11px; color: white; flex-shrink: 0;
}
.hero-ctas {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
}
.cta-primary { white-space: nowrap;
  background: linear-gradient(135deg, #007AB7, #00a8e8);
  color: white;
  padding: 14px 26px;
  border-radius: 8px;
  text-decoration: none;
  font-size: 15px;
  font-weight: 700;
  font-family: 'Gotham', 'Beatrice', sans-serif;
  letter-spacing: 0.3px;
  transition: all 0.2s;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  box-shadow: 0 4px 16px rgba(0,122,183,0.3);
}
.cta-primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 24px rgba(0,122,183,0.5);
}
.cta-secondary { white-space: nowrap;
  background: rgba(255,255,255,0.22);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  color: white;
  padding: 14px 26px;
  border-radius: 8px;
  text-decoration: none;
  font-size: 15px;
  font-weight: 700;
  font-family: 'Gotham', 'Beatrice', sans-serif;
  letter-spacing: 0.3px;
  transition: all 0.2s;
  border: 2px solid rgba(255,255,255,0.5);
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.cta-secondary:hover {
  border-color: white;
  background: rgba(255,255,255,0.3);
  transform: translateY(-2px);
}


/* ============================================
   HOMEPAGE: Section Spacing
   ============================================ */
.section { padding: 56px 0; }
.section-alt { background: #f8f9fb; }
.page-width { max-width: 1280px; margin: 0 auto; padding: 0 40px; }


/* ============================================
   HOMEPAGE: Brand Tags Bar
   ============================================ */
.brand-tags { padding: 32px 0; background: white; text-align: center; overflow: hidden; }
.brand-tags .heading { font-size: 14px; font-weight: 700; color: #007AB7; text-transform: uppercase; letter-spacing: 1px; margin-bottom: 16px; font-family: 'Gotham', 'Beatrice', sans-serif; }
.brand-tags .tags-img { max-width: 1280px; margin: 0 auto; padding: 0 40px; }
.brand-tags .tags-img img { width: 100%; border-radius: 6px; }
.brand-tags .tagline { max-width: 1280px; margin: 24px auto 0; padding: 0 40px; display: flex; align-items: center; justify-content: center; gap: 48px; }
.brand-tags .tagline h2 { font-size: 22px; font-weight: 700; color: #102051; line-height: 1.4; text-align: center; }
.brand-tags .tagline p { font-size: 14px; color: #555; line-height: 1.7; margin-top: 10px; text-align: center; }
.brand-tags .tagline-left { flex: 0 1 560px; }
.brand-tags .tagline-badges { flex: 0 0 auto; display: flex; flex-direction: row; gap: 40px; align-items: center; justify-content: center; }
.guarantee-badge { display: flex; flex-direction: column; align-items: center; gap: 8px; text-align: center; }
.guarantee-badge .badge-icon { width: 96px; height: 96px; border-radius: 50%; display: flex; align-items: center; justify-content: center; flex-shrink: 0; color: white; font-size: 34px; box-shadow: 0 4px 16px rgba(0,0,0,0.12); }
.guarantee-badge:first-child .badge-icon { background: linear-gradient(145deg, #007AB7 0%, #00c9ff 50%, #007AB7 100%); border: 3px solid rgba(255,255,255,0.6); }
.guarantee-badge:last-child .badge-icon { background: linear-gradient(145deg, #28a745 0%, #5dd879 50%, #28a745 100%); border: 3px solid rgba(255,255,255,0.6); }
.guarantee-badge .badge-text { font-size: 14px; font-weight: 700; color: #102051; font-family: "Gotham", "Beatrice", sans-serif; line-height: 1.4; letter-spacing: 0.2px; }


/* ============================================
   HOMEPAGE: Featured Products Grid
   ============================================ */
.featured-grid { padding: 24px 0 56px; background: #f8f9fb; }
.featured-heading { text-align: center; font-size: 34px; font-weight: 700; color: #102051; margin-bottom: 24px; padding: 0 40px; max-width: 1280px; margin-left: auto; margin-right: auto; }
.featured-grid .grid { max-width: 1280px; margin: 0 auto; padding: 0 40px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.featured-card { position: relative; border-radius: 12px; overflow: hidden; aspect-ratio: 1; display: flex; align-items: flex-start; text-decoration: none; transition: transform 0.3s, box-shadow 0.3s; }
.featured-card:hover { transform: translateY(-4px); box-shadow: 0 12px 32px rgba(0,0,0,0.15); }
.featured-card .card-bg { position: absolute; inset: 0; background-size: 100%; background-position: center; transition: transform 0.4s; }
.featured-card:hover .card-bg { transform: scale(1.05); }
.featured-card .card-overlay { display: none; }
.featured-card .card-content { position: relative; z-index: 2; padding: 16px 20px; width: 100%; text-align: center; }
.featured-card h3 { font-size: 21px; font-weight: 700; color: #102051; margin-bottom: 0; line-height: 1.2; }
.featured-card .subheading { font-size: 14px; color: #102051; font-family: 'Gotham', 'Beatrice', sans-serif; font-weight: 600; letter-spacing: 0.3px; display: inline-flex; align-items: center; gap: 5px; }


/* ============================================
   HOMEPAGE: Category Carousels
   ============================================ */
.all-products-title { text-align: center; font-size: 34px; font-weight: 700; color: #102051; max-width: 1280px; margin: 0 auto; padding: 20px 40px 12px; }
.category-section { padding: 24px 0; max-width: 1360px; margin: 0 auto; }
.category-section + .category-section { padding-top: 0; }
.carousel-header { max-width: 1280px; margin: 0 auto; padding: 0 40px 16px; display: flex; align-items: center; justify-content: space-between; }
.carousel-header h2 { font-size: 22px; font-weight: 700; color: #102051; }
.carousel-header h2 a { color: #102051; text-decoration: none; }
.carousel-header h2 a:hover { color: #007AB7; }
.btn-view-all { display: inline-block; background: linear-gradient(135deg, #007AB7 0%, #00a8e8 100%); color: white; padding: 8px 20px; border-radius: 6px; font-size: 12px; font-weight: 700; font-family: 'Gotham', 'Beatrice', sans-serif; letter-spacing: 0.3px; transition: all 0.2s; }
.btn-view-all:hover { opacity: 0.9; transform: translateY(-1px); box-shadow: 0 4px 12px rgba(0,122,183,0.3); }
.carousel-track { display: flex; gap: 16px; overflow-x: auto; padding: 4px 0 16px; max-width: 1200px; margin: 0 auto; -webkit-overflow-scrolling: touch; scroll-snap-type: x mandatory; scrollbar-width: thin; scrollbar-color: #c8d0dc transparent; }
.carousel-track::-webkit-scrollbar { height: 6px; }
.carousel-track::-webkit-scrollbar-track { background: transparent; }
.carousel-track::-webkit-scrollbar-thumb { background: #c8d0dc; border-radius: 3px; }
.carousel-track::-webkit-scrollbar-thumb:hover { background: #007AB7; }
.cat-card { flex: 0 0 270px; scroll-snap-align: start; text-decoration: none; transition: transform 0.2s; }
.cat-card:hover { transform: translateY(-4px); }
.cat-card .thumb { width: 270px; height: 270px; border-radius: 10px; overflow: hidden; background: #f0f0f0; margin-bottom: 10px; box-shadow: 0 2px 8px rgba(0,0,0,0.08); transition: box-shadow 0.2s; }
.cat-card:hover .thumb { box-shadow: 0 6px 20px rgba(0,0,0,0.15); }
.cat-card .thumb img { width: 100%; height: 100%; object-fit: cover; }
.cat-card h4 { font-size: 15px; font-weight: 700; color: #102051; text-align: center; line-height: 1.3; }


/* ============================================
   HOMEPAGE: Reviews + Features
   ============================================ */
.reviews-features { padding: 56px 0; position: relative; overflow: hidden; }
.reviews-features .rf-bg { position: absolute; inset: 0; background-size: cover; background-position: center; opacity: 0.08; }
.rf-grid { max-width: 1280px; margin: 0 auto; padding: 0 40px; display: grid; grid-template-columns: 1fr 1fr; gap: 40px; position: relative; z-index: 1; }
.reviews-col h3 { font-size: 20px; font-weight: 700; color: #102051; margin-bottom: 20px; line-height: 1.3; }
.google-logo { margin-bottom: 16px; }
.google-logo img { height: 24px; }
.review-card { background: white; border: 1px solid #e0e0e0; border-radius: 10px; padding: 20px; margin-bottom: 14px; transition: box-shadow 0.2s; }
.review-card:hover { box-shadow: 0 4px 16px rgba(0,0,0,0.08); }
.review-stars { color: #f5a623; margin-bottom: 6px; font-size: 14px; letter-spacing: 1px; }
.review-text { font-size: 14px; color: #444; line-height: 1.6; margin-bottom: 8px; }
.review-author { font-size: 13px; font-weight: 700; color: #102051; }
.btn-reviews { display: inline-block; background: linear-gradient(135deg, #007AB7 0%, #00a8e8 100%); color: white; padding: 10px 24px; border-radius: 6px; font-size: 13px; font-weight: 700; font-family: 'Gotham', 'Beatrice', sans-serif; transition: all 0.2s; margin-top: 8px; }
.btn-reviews:hover { opacity: 0.9; transform: translateY(-1px); box-shadow: 0 4px 16px rgba(0,122,183,0.3); }
.features-col h2 { font-size: 24px; font-weight: 700; color: #102051; margin-bottom: 24px; }
.feature-item { display: flex; gap: 16px; margin-bottom: 20px; align-items: flex-start; }
.feature-item:nth-child(even) { flex-direction: row-reverse; }
.feature-item .feat-img { width: 120px; height: 90px; border-radius: 10px; overflow: hidden; flex-shrink: 0; }
.feature-item .feat-img img { width: 100%; height: 100%; object-fit: cover; }
.feature-item .feat-text { flex: 1; font-size: 14px; color: #444; line-height: 1.65; }
.feature-item .feat-text b { color: #102051; }


/* ============================================
   HOMEPAGE: FAQ Section
   ============================================ */
.faq-section { padding: 56px 0; background: #f8f9fb; }
.faq-section .section-heading { text-align: center; font-size: 34px; font-weight: 700; color: #102051; margin-bottom: 32px; }
.faq-list { max-width: 860px; margin: 0 auto; }
.faq-item { background: white; border: 1px solid #e0e0e0; border-radius: 10px; margin-bottom: 10px; overflow: hidden; transition: box-shadow 0.2s; }
.faq-item:hover { box-shadow: 0 2px 12px rgba(0,0,0,0.06); }
.faq-question { padding: 16px 20px; font-weight: 700; font-size: 15px; color: #102051; cursor: pointer; display: flex; justify-content: space-between; align-items: center; transition: background 0.2s; font-family: 'Gotham', 'Beatrice', sans-serif; }
.faq-question:hover { background: #f8f9fb; }
.faq-chevron { transition: transform 0.3s; color: #999; font-size: 14px; }
.faq-item.open .faq-chevron { transform: rotate(180deg); color: #007AB7; }
.faq-answer { max-height: 0; overflow: hidden; transition: max-height 0.4s ease, padding 0.3s ease; }
.faq-item.open .faq-answer { max-height: 300px; padding: 0 20px 16px; }
.faq-answer p { font-size: 14px; color: #444; line-height: 1.75; }


/* ============================================
   HOMEPAGE: Sewing Services
   ============================================ */
.sewing-section { padding: 56px 0; background: white; }
.sewing-grid { max-width: 1280px; margin: 0 auto; padding: 0 40px; display: grid; grid-template-columns: 1fr 2fr 1fr; gap: 12px; min-height: 400px; }
.sewing-left, .sewing-right { display: flex; flex-direction: column; gap: 12px; }
.sewing-img { border-radius: 10px; overflow: hidden; flex: 1; min-height: 0; }
.sewing-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.sewing-center { position: relative; border-radius: 10px; overflow: hidden; display: flex; align-items: center; justify-content: center; }
.sewing-center .sc-bg { position: absolute; inset: 0; }
.sewing-center .sc-bg img { width: 100%; height: 100%; object-fit: cover; }
.sewing-center .sc-overlay { position: absolute; inset: 0; background: rgba(16,32,81,0.7); }
.sewing-center .sc-content { position: relative; z-index: 2; text-align: center; padding: 32px 24px; color: white; }
.sewing-center h2 { font-size: 42px; font-weight: 700; margin-bottom: 16px; }
.sewing-center p { font-size: 18px; line-height: 1.7; margin-bottom: 16px; opacity: 0.9; }
.sewing-center ul { text-align: left; display: inline-block; margin-bottom: 24px; }
.sewing-center ul li { font-size: 18px; padding: 5px 0; }
.sewing-center ul li::before { content: '✓'; color: #00a8e8; margin-right: 8px; font-weight: 700; }
.btn-sewing { display: inline-block; background: linear-gradient(135deg, #007AB7 0%, #00a8e8 100%); color: white; padding: 12px 28px; border-radius: 8px; font-size: 14px; font-weight: 700; font-family: 'Gotham', 'Beatrice', sans-serif; transition: all 0.2s; }
.btn-sewing:hover { opacity: 0.9; transform: translateY(-2px); box-shadow: 0 6px 20px rgba(0,122,183,0.35); }


/* ============================================
   HOMEPAGE: Instagram
   ============================================ */
.instagram-section { padding: 56px 0; background: #f8f9fb; text-align: center; }
.instagram-section h2 { font-size: 24px; font-weight: 700; color: #102051; margin-bottom: 8px; }
.instagram-section h2 a { color: #102051; }
.instagram-section h2 a:hover { color: #007AB7; }
.instagram-section .ig-subtitle { font-size: 14px; color: #555; margin-bottom: 24px; }
.ig-grid { max-width: 1100px; margin: 0 auto; padding: 0 40px; display: grid; grid-template-columns: repeat(6, 1fr); gap: 10px; }
.ig-placeholder { aspect-ratio: 1; background: #dde1e8; border-radius: 10px; display: flex; align-items: center; justify-content: center; color: #999; font-size: 24px; transition: opacity 0.2s; }
.ig-placeholder:hover { opacity: 0.8; }


/* ============================================
   HOMEPAGE: Samples
   ============================================ */
.samples-section { position: relative; padding: 56px 0; overflow: hidden; display: flex; align-items: center; min-height: 320px; }
.samples-section .samples-bg { position: absolute; inset: 0; background-size: cover; background-position: center; }
.samples-section .samples-overlay { position: absolute; inset: 0; background: rgba(16,32,81,0.2); }
.samples-content { position: relative; z-index: 2; max-width: 1280px; margin: 0 auto; padding: 0 40px; text-align: center; color: white; width: 100%; }
.samples-content .heading { font-size: 34px; font-weight: 700; margin-bottom: 12px; }
.samples-content p { font-size: 15px; margin-bottom: 8px; opacity: 0.9; }
.btn-samples { display: inline-block; background: linear-gradient(135deg, #007AB7 0%, #00a8e8 100%); color: white; padding: 14px 36px; border-radius: 8px; font-size: 15px; font-weight: 700; font-family: 'Gotham', 'Beatrice', sans-serif; margin-top: 16px; transition: all 0.2s; }
.btn-samples:hover { opacity: 0.9; transform: translateY(-2px); box-shadow: 0 6px 24px rgba(0,122,183,0.35); }


/* ============================================
   HOMEPAGE: Quote Form
   ============================================ */
.quote-section { padding: 56px 0; background: white; }
.quote-grid { max-width: 1280px; margin: 0 auto; padding: 0 40px; display: grid; grid-template-columns: 1fr 1fr; gap: 40px; align-items: stretch; }
.quote-mosaic { border-radius: 12px; overflow: hidden; align-self: stretch; }
.quote-mosaic img { width: 100%; height: 100%; object-fit: cover; display: block; border-radius: 12px; }
.quote-form h2 { font-size: 34px; font-weight: 700; color: #102051; margin-bottom: 6px; }
.quote-form .benefits { margin-bottom: 12px; }
.quote-form .benefits li { font-size: 16px; color: #444; padding: 4px 0; }
.quote-form .benefits li::before { content: '✓'; color: #007AB7; margin-right: 8px; font-weight: 700; }
.quote-note { font-size: 16px; color: #444; margin-bottom: 20px; font-family: 'Gotham', 'Beatrice', sans-serif; }
.quote-note em { color: #007AB7; font-style: normal; font-weight: 700; }
.form-group { margin-bottom: 14px; }
.form-group label { display: block; font-size: 11px; font-weight: 700; color: #888; text-transform: uppercase; letter-spacing: 0.5px; margin-bottom: 5px; font-family: 'Gotham', 'Beatrice', sans-serif; }
.form-group input, .form-group select, .form-group textarea { width: 100%; padding: 11px 14px; border: 1px solid #dde1e8; border-radius: 8px; font-size: 15px; font-family: inherit; color: #1a1a2e; background: #f8f9fb; transition: border-color 0.2s, background 0.2s; }
.form-group input:focus, .form-group select:focus, .form-group textarea:focus { outline: none; border-color: #007AB7; background: white; }
.form-group textarea { resize: vertical; min-height: 80px; }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.upload-area { border: 2px dashed #007AB7; border-radius: 10px; padding: 20px; text-align: center; background: #f0f7fc; cursor: pointer; transition: all 0.2s; margin-bottom: 14px; }
.upload-area:hover { background: #e0eff8; border-color: #005f8a; }
.upload-area i { font-size: 24px; color: #007AB7; margin-bottom: 4px; }
.upload-area .upload-text { font-size: 13px; color: #007AB7; font-weight: 600; }
.upload-area .upload-sub { font-size: 11px; color: #888; margin-top: 2px; }
.btn-submit { display: block; width: 100%; background: linear-gradient(135deg, #007AB7 0%, #00a8e8 100%); color: white; padding: 14px; border: none; border-radius: 8px; font-size: 15px; font-weight: 700; font-family: 'Gotham', 'Beatrice', sans-serif; cursor: pointer; transition: all 0.2s; letter-spacing: 0.3px; }
.btn-submit:hover { opacity: 0.9; transform: translateY(-1px); box-shadow: 0 4px 16px rgba(0,122,183,0.3); }


/* ============================================
   HOMEPAGE: SEO Content Grid
   ============================================ */
.seo-section { padding: 56px 0; background: #f8f9fb; }
.seo-grid { max-width: 1280px; margin: 0 auto; padding: 0 40px; display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.seo-card { background: white; border-radius: 10px; overflow: hidden; border: 1px solid #e8eaef; transition: transform 0.2s, box-shadow 0.2s; text-decoration: none; }
.seo-card:hover { transform: translateY(-4px); box-shadow: 0 8px 24px rgba(0,0,0,0.1); }
.seo-card .seo-img { width: 100%; aspect-ratio: 16/10; overflow: hidden; }
.seo-card .seo-img img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.3s; }
.seo-card:hover .seo-img img { transform: scale(1.05); }
.seo-card .seo-text { padding: 16px; }
.seo-card h3 { font-size: 15px; font-weight: 700; color: #102051; margin-bottom: 8px; display: flex; align-items: center; gap: 6px; }
.seo-card h3 i { color: #007AB7; font-size: 12px; }
.seo-card p { font-size: 13px; color: #555; line-height: 1.65; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.seo-card p.expanded { display: block; -webkit-line-clamp: unset; overflow: visible; }
.seo-read-more { display: inline-block; font-size: 12px; font-weight: 700; color: #007AB7; margin-top: 8px; cursor: pointer; }
.seo-read-more:hover { text-decoration: underline; }
.seo-section-title { text-align: center; font-size: 34px; font-weight: 700; color: #102051; max-width: 1280px; margin: 0 auto; padding: 0 40px 28px; }


/* ============================================
   HOMEPAGE: Info Columns
   ============================================ */
.info-section { padding: 56px 0; background: white; }
.info-grid { max-width: 1280px; margin: 0 auto; padding: 0 40px; display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; }
.info-card { text-align: center; border-radius: 12px; overflow: hidden; transition: transform 0.2s, box-shadow 0.2s; text-decoration: none; border: 1px solid #e8eaef; padding: 36px 20px 28px; }
.info-card:hover { transform: translateY(-4px); box-shadow: 0 8px 24px rgba(0,0,0,0.1); }
.info-card .info-icon { font-size: 48px; color: #007AB7; margin-bottom: 16px; }
.info-card h3 { font-size: 18px; font-weight: 700; color: #102051; margin-bottom: 6px; }
.info-card p { font-size: 13px; color: #555; }


/* ============================================
   HOMEPAGE: Contact CTA
   ============================================ */
.contact-cta { padding: 48px 0; background: #f8f9fb; }
.contact-inner { max-width: 860px; margin: 0 auto; padding: 0 40px; display: flex; align-items: center; gap: 24px; }
.contact-inner .icon-wrap { width: 48px; height: 48px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; }
.contact-inner .icon-wrap img { width: 48px; height: 48px; }
.contact-inner .contact-text { flex: 1; }
.contact-inner h3 { font-size: 20px; font-weight: 700; color: #102051; margin-bottom: 4px; }
.contact-inner p { font-size: 14px; color: #555; }
.btn-contact { display: inline-block; background: linear-gradient(135deg, #007AB7 0%, #00a8e8 100%); color: white !important; padding: 12px 28px; border-radius: 8px; font-size: 14px; font-weight: 700; font-family: 'Gotham', 'Beatrice', sans-serif; transition: all 0.2s; flex-shrink: 0; }
.btn-contact:hover { opacity: 0.9; transform: translateY(-1px); box-shadow: 0 4px 16px rgba(0,122,183,0.3); }


/* ============================================
/* ============================================
   CATEGORY PAGE SECTIONS
   ============================================ */

/* Spotlight Card */
.cat-spotlight {
  max-width: 1400px;
  margin: 40px auto;
  padding: 0 40px;
}
.spotlight-card {
  display: block;
  position: relative;
  border-radius: 16px;
  overflow: hidden;
  min-height: 280px;
  text-decoration: none;
  transition: transform 0.3s;
}
.spotlight-card:hover { transform: translateY(-3px); }
.spotlight-bg {
  position: absolute; inset: 0;
  background-size: cover;
  background-position: center;
  transition: transform 0.4s;
}
.spotlight-card:hover .spotlight-bg { transform: scale(1.03); }
.spotlight-overlay {
  position: absolute; inset: 0;
  background: linear-gradient(135deg, rgba(0,0,0,0.7) 0%, rgba(0,0,0,0.3) 60%, rgba(0,0,0,0.0) 100%);
}
.spotlight-content {
  position: relative; z-index: 2;
  padding: 48px 52px;
  color: white;
}
.spotlight-tag {
  display: inline-block;
  background: rgba(255,255,255,0.2);
  backdrop-filter: blur(8px);
  padding: 6px 16px;
  border-radius: 20px;
  font-size: 13px;
  font-weight: 700;
  font-family: 'Gotham', 'Beatrice', sans-serif;
  margin-bottom: 14px;
  letter-spacing: 0.5px;
}
.spotlight-content h2 {
  font-size: 36px;
  font-weight: 700;
  margin: 0 0 10px;
  color: white;
  font-family: 'Beatrice', sans-serif;
}
.spotlight-content p {
  font-size: 16px;
  color: rgba(255,255,255,0.95);
  margin: 0 0 20px;
  max-width: 480px;
  line-height: 1.5;
}
.spotlight-cta, .spotlight-cta:visited, .spotlight-cta:active, .spotlight-cta:hover {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: linear-gradient(135deg, #007AB7, #00a8e8) !important;
  color: white !important;
  padding: 12px 24px;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 700;
  font-family: 'Gotham', 'Beatrice', sans-serif;
  text-decoration: none !important;
}
.cat-spotlight-duo { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.cat-spotlight-duo .spotlight-card { min-height: 320px; }
.spotlight-tag-gold { background: linear-gradient(135deg, rgba(184,134,11,0.8) 0%, rgba(218,165,32,0.8) 50%, rgba(184,134,11,0.8) 100%) !important; }
.spotlight-tag-red { background: linear-gradient(135deg, rgba(192,57,43,0.8) 0%, rgba(231,76,60,0.8) 100%) !important; }
.cat-grid-2 { grid-template-columns: 1fr 1fr !important; }
.cat-card-lg { aspect-ratio: auto !important; min-height: 320px; }
.cat-card-lg .cat-card-content { padding: 24px; display: flex; flex-direction: column; justify-content: flex-start; align-items: flex-start; gap: 8px; position: absolute; top: 0; left: 0; right: 0; z-index: 3; }
.cat-card-lg .cat-card-overlay { background: linear-gradient(to right, rgba(0,0,0,0.75) 0%, rgba(0,0,0,0.4) 60%, rgba(0,0,0,0.0) 100%) !important; }
.cat-card-lg .cat-card-content h3 { font-size: 32px !important; font-family: 'Beatrice', sans-serif; line-height: 1.15; }
.cat-card-desc { font-size: 16px; color: rgba(255,255,255,0.95); line-height: 1.6; margin: 0; max-width: 480px; }
.cat-card-btn { display: inline-block; background: linear-gradient(135deg, #007AB7, #00a8e8); color: white !important; padding: 10px 22px; border-radius: 6px; font-size: 13px; font-weight: 700; font-family: 'Gotham', 'Beatrice', sans-serif; align-self: flex-start; margin-top: 4px; }

/* Section Headings */
.cat-grid-section {
  max-width: 1400px;
  margin: 0 auto;
  padding: 48px 40px;
}
.cat-section-heading {
  font-size: 32px;
  font-weight: 700;
  color: #102051;
  font-family: 'Beatrice', sans-serif;
  margin: 0 0 8px;
  text-align: center;
}
.cat-section-sub {
  font-size: 16px;
  color: #555;
  text-align: center;
  margin: 0 0 32px;
  max-width: 600px;
  margin-left: auto;
  margin-right: auto;
  line-height: 1.5;
}

/* Product Card Grid */
.cat-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
}
.cat-grid-3 {
  grid-template-columns: repeat(3, 1fr);
}
.cat-card-v2 {
  display: block;
  position: relative;
  border-radius: 12px;
  overflow: hidden;
  aspect-ratio: 4/3;
  text-decoration: none;
  transition: transform 0.3s, box-shadow 0.3s;
}
.cat-card-v2:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 32px rgba(0,0,0,0.15);
}
.cat-card-tall { aspect-ratio: 16/9; }
.cat-card-bg {
  position: absolute; inset: 0;
  background-size: cover;
  background-position: center;
  transition: transform 0.4s;
}
.cat-card-v2:hover .cat-card-bg { transform: scale(1.05); }
.cat-card-overlay {
  position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(0,0,0,0.7) 0%, rgba(0,0,0,0.0) 55%);
}
.cat-card-content {
  position: absolute;
  bottom: 0; left: 0; right: 0;
  padding: 20px;
  z-index: 2;
}
.cat-card-content h3 {
  font-size: 17px;
  font-weight: 700;
  color: white;
  margin: 0 0 4px;
  font-family: 'Gotham', 'Beatrice', sans-serif;
  text-shadow: 0 1px 4px rgba(0,0,0,0.4);
}
.cat-card-price {
  font-size: 13px;
  color: rgba(255,255,255,0.8);
  font-family: 'Gotham', 'Beatrice', sans-serif;
}

/* Highlight Bar */
.cat-highlight-bar {
  background: linear-gradient(135deg, #007AB7 0%, #00a8e8 100%);
  padding: 48px 40px;
}
.highlight-inner {
  max-width: 1400px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 40px;
}
.highlight-text h2 {
  font-size: 28px;
  font-weight: 700;
  color: white;
  margin: 0 0 8px;
  font-family: 'Beatrice', sans-serif;
}
.highlight-text p {
  font-size: 15px;
  color: rgba(255,255,255,0.85);
  margin: 0;
  max-width: 540px;
  line-height: 1.5;
}
.highlight-ctas {
  display: flex;
  gap: 12px;
  flex-shrink: 0;
}
.cat-highlight-bar .cta-primary,
.cat-highlight-bar .cta-primary:visited {
  background: white !important;
  color: #007AB7 !important;
  box-shadow: 0 4px 16px rgba(0,0,0,0.15);
}
.highlight-grid { display: grid; grid-template-columns: repeat(4, auto); gap: 10px; justify-content: center; }
.cat-highlight-bar .cta-primary:hover {
  background: #f0f0f0 !important;
  color: #007AB7 !important;
}


/* ============================================
   ============================================ */
.cwl-footer {
  background: #102051; color: white; padding: 48px 40px 24px;
  margin-top: 0;
}
.footer-grid {
  max-width: 1280px; margin: 0 auto;
  display: grid; grid-template-columns: repeat(6, 1fr); gap: 24px;
}
.footer-col h3 { font-weight: 700; margin-bottom: 12px; color: white; font-family: 'Gotham', 'Beatrice', sans-serif; text-transform: uppercase; letter-spacing: 0.5px; font-size: 12px; }
.footer-col h3 a { color: white; text-decoration: none; transition: color 0.2s; font-size: 12px; }
.footer-col h3 a:hover { color: #5ec6ff; }
.footer-col a { display: block; font-size: 13px; color: #a0b4d0; text-decoration: none; padding: 4px 0; transition: color 0.2s; }
.footer-col a:hover { color: white; }
.footer-contact { order: 99; }
.footer-contact .fc-item {
  display: flex; align-items: flex-start; gap: 10px; margin-bottom: 10px;
  font-size: 13px; color: #a0b4d0; line-height: 1.5;
}
.footer-contact .fc-item i { color: #5ec6ff; font-size: 14px; margin-top: 2px; width: 16px; text-align: center; flex-shrink: 0; }
.footer-contact .fc-item a { display: inline; padding: 0; color: #a0b4d0; }
.footer-contact .fc-item a:hover { color: white; }
.footer-contact .fc-map { display: block; opacity: 0.85; transition: opacity 0.2s; }
.footer-contact .fc-map:hover { opacity: 1; }
.footer-bottom { text-align: center; padding-top: 24px; margin-top: 24px; border-top: 1px solid rgba(255,255,255,0.08); font-size: 12px; color: #5a7a9a; max-width: 1280px; margin-left: auto; margin-right: auto; }


/* ============================================
   TABLET (≤1024px)
   ============================================ */
/* ≤1212px: Snap to hamburger menu */
@media (max-width: 1212px) {
  header { padding: 0 16px; height: 56px; }
  header .logo img { height: 36px; }
  header .menu { display: none; }
  .header-actions { display: none; }
  .hamburger { display: flex; }
}

@media (max-width: 1024px) {

  /* V3 Top Bar + Header */
  .promo-bar { padding: 0 20px; font-size: 12px; }
  .promo-bar .left { gap: 12px; }
  .promo-bar .right { gap: 10px; }

  /* Hero */
  .hero-inner { padding: 48px 30px; }
  .hero-text h1 { font-size: 36px; }

  /* Homepage body */
  .page-width { padding: 0 20px; }
  .brand-tags .tags-img { padding: 0 20px; }
  .brand-tags .tagline { padding: 0 20px; }
  .featured-heading { padding: 0 20px; }
  .featured-grid .grid { padding: 0 20px; grid-template-columns: repeat(2, 1fr); }
  .carousel-header { padding: 0 20px 16px; }
  .carousel-track { padding: 4px 20px 16px; max-width: none; }
  .rf-grid { padding: 0 20px; gap: 24px; }
  .faq-list { padding: 0 20px; }
  .sewing-grid { padding: 0 20px; }
  .ig-grid { padding: 0 20px; }
  .samples-content { padding: 0 20px; }
  .quote-grid { padding: 0 20px; }
  .seo-grid { padding: 0 20px; grid-template-columns: repeat(2, 1fr); }
  .info-grid { padding: 0 20px; }
  .contact-inner { padding: 0 20px; }

  /* V3 Footer */

  /* Category Page Mobile */
  .cat-spotlight-duo { grid-template-columns: 1fr !important; gap: 16px; padding: 0 16px; }
  .cat-spotlight { padding: 0 16px; }
  .cat-grid { grid-template-columns: 1fr 1fr !important; gap: 12px; padding: 0 16px; }
  .cat-grid-3 { grid-template-columns: 1fr 1fr !important; padding: 0 16px; }
  .highlight-inner { padding: 0 16px; flex-direction: column !important; align-items: stretch !important; gap: 20px; }
  .highlight-text { text-align: center; }
  .highlight-grid { grid-template-columns: 1fr 1fr !important; gap: 8px; max-width: none; justify-items: stretch; }
  .cat-highlight-bar .cta-primary { padding: 10px 12px; font-size: 12px; text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .cat-section-heading { font-size: 24px; padding: 0 16px; }
  .cat-section-sub { font-size: 14px; padding: 0 16px; }
  .cat-grid-section { padding: 36px 0; }
  .footer-grid { grid-template-columns: repeat(3, 1fr); gap: 24px; }
  .cwl-footer { padding: 36px 20px 20px; }
}


/* ============================================
   MOBILE (≤768px)
   ============================================ */
@media (max-width: 768px) {

  /* Global mobile overflow fix */
  body { overflow-x: hidden; width: 100vw; }
  section { overflow-x: hidden; max-width: 100vw; }
  .rf-grid, .seo-grid, .info-grid, .quote-grid, .sewing-grid, .faq-list, .ig-grid, .samples-content, .contact-inner, .carousel-header { max-width: 100vw; box-sizing: border-box; }
  p, h1, h2, h3, h4, div, li { overflow-wrap: break-word; word-wrap: break-word; }

  /* V3 Top Bar */
  .promo-bar {
    height: 32px; padding: 0 12px;
    flex-wrap: nowrap; gap: 0;
  }
  .promo-bar .left { display: none; }
  .promo-bar .center { flex: 1; text-align: left; }
  .promo-bar .promo { font-size: 11px; }
  .promo-bar .promo .highlight { padding: 1px 6px; font-size: 11px; }
  .promo-bar .right {
    gap: 2px; margin-left: auto; flex-shrink: 0;
  }
  .promo-bar .right a { font-size: 12px; padding: 3px 6px; font-weight: 700; }
  .promo-bar .right .divider { display: none; }

  /* Hero — keep desktop image at all widths */
  .hero {
    min-height: 460px;
    background-position: center top;
  }
  .hero::before {
    width: 100%;
    background: linear-gradient(
      to bottom,
      rgba(0,0,0,0.7) 0%,
      rgba(0,0,0,0.55) 40%,
      rgba(0,0,0,0.3) 70%,
      rgba(0,0,0,0.55) 100%
    );
  }
  .hero-inner { padding: 36px 16px; }
  .hero-text { max-width: 100%; }
  .hero-text h1 { font-size: 42px; line-height: 1.15; }
  .hero-sub { font-size: 16px; line-height: 1.6; }
  .hero-badges { gap: 10px; flex-wrap: wrap; }
  .hero-badge { font-size: 12px; }
  .hero-ctas { flex-direction: column; gap: 10px; }
  .cta-primary, .cta-secondary { text-align: center; justify-content: center; width: 100%; padding: 14px 20px; font-size: 15px; }

  /* Homepage body */
  .page-width { padding: 0 16px; }

  .brand-tags .tags-img { padding: 0 16px; }
  .brand-tags .tagline { padding: 0 16px; flex-direction: column; gap: 24px; }
  .brand-tags .tagline-left { flex: 1 1 100%; max-width: 100%; min-width: 0; }
  .brand-tags .tagline-badges { flex-direction: row; gap: 24px; }
  .brand-tags .tagline-text { padding: 0 16px; }
  .brand-tags .tagline p { font-size: 13px; }

  .guarantee-badge .badge-icon { width: 100px; }
  .brand-tags .tagline h2 { font-size: 18px; }

  .all-products-title { font-size: 26px; padding: 16px 16px 8px; }

  .featured-heading { font-size: 26px; padding: 0 16px; margin-bottom: 16px; }
  .featured-grid .grid { padding: 0 16px; grid-template-columns: 1fr 1fr; gap: 10px; }
  .featured-card h3 { font-size: 24px; }
  .featured-card .subheading { font-size: 14px; }
  .featured-card .card-content { padding: 14px; }

  .carousel-header { padding: 0 16px 12px; }
  .carousel-header h2 { font-size: 16px; }
  .btn-view-all { padding: 6px 14px; font-size: 11px; }
  .carousel-track { padding: 4px 0 12px; gap: 10px; max-width: none; margin-left: 16px; margin-right: 16px; }
  .cat-card { flex: 0 0 160px; }
  .cat-card .thumb { width: 160px; height: 160px; }
  .cat-card h4 { font-size: 12px; }

  .rf-grid { grid-template-columns: 1fr; padding: 0 16px; gap: 32px; min-width: 0; }
  .reviews-col { overflow: hidden; min-width: 0; }
  .review-card { overflow: hidden; }
  .review-text { font-size: 13px; }
  .features-col { min-width: 0; overflow: hidden; }
  .features-col h2 { font-size: 20px; }
  .feature-item { min-width: 0; }
  .feature-item, .feature-item:nth-child(even) { flex-direction: column; }
  .feature-item .feat-img { width: 100%; height: 140px; }
  .feat-text { font-size: 13px; overflow-wrap: break-word; word-wrap: break-word; min-width: 0; }
  .feat-text b { font-size: 14px; }

  .faq-list { padding: 0 16px; }
  .faq-section .section-heading { font-size: 20px; padding: 0 16px; }
  .faq-question { font-size: 13px; padding: 14px 16px; }

  .sewing-grid { grid-template-columns: 1fr; padding: 0 16px; min-height: auto; }
  .sewing-left, .sewing-right { flex-direction: row; }
  .sewing-img { min-height: 140px; }
  .sewing-center { min-height: 300px; }
  .sewing-center h2 { font-size: 28px; }
  .sewing-center p { font-size: 15px; }
  .sewing-center ul li { font-size: 15px; }

  .instagram-section { padding: 36px 0; }
  .instagram-section h2 { font-size: 20px; padding: 0 16px; }
  .instagram-section .ig-subtitle { font-size: 13px; padding: 0 16px; }
  .ig-grid { grid-template-columns: repeat(3, 1fr); padding: 0 16px; }

  .samples-content { padding: 0 16px; }
  .samples-content .heading { font-size: 22px; }
  .samples-content p { font-size: 13px; }

  .quote-grid { grid-template-columns: 1fr; padding: 0 16px; }
  .quote-mosaic { display: none; }
  .quote-form h2 { font-size: 28px; }

  .seo-section-title { font-size: 26px; padding: 0 16px 20px; }
  .seo-grid { grid-template-columns: 1fr 1fr; padding: 0 16px; gap: 12px; }
  .seo-card p { font-size: 12px; }

  .info-grid { grid-template-columns: 1fr 1fr; padding: 0 16px; gap: 12px; }
  .info-card { padding: 24px 12px 20px; }
  .info-card .info-icon { font-size: 36px; }
  .info-card h3 { font-size: 16px; }
  .info-card p { font-size: 12px; }

  .contact-inner { padding: 0 16px; flex-direction: column; text-align: center; }
  .contact-inner h2 { font-size: 22px; }
  .contact-inner p { font-size: 13px; }

  .fc-item { font-size: 12px; overflow-wrap: break-word; word-wrap: break-word; }

  /* V3 Footer */
  .cwl-footer { padding: 32px 16px 16px; }
  .footer-grid { grid-template-columns: 1fr 1fr; gap: 20px; }
  .footer-col h3 { font-size: 13px; }
  .footer-col a { font-size: 12px; padding: 4px 0; }
}


/* ============================================
   SMALL MOBILE (≤480px)
   ============================================ */
@media (max-width: 480px) {

  .promo-bar .promo { font-size: 11px; }
  .promo-bar .right a { font-size: 11px; }

  /* Hero */
  .hero { min-height: 400px; }
  .hero-text h1 { font-size: 42px; }
  .hero-sub { font-size: 16px; }
  .hero-badges { gap: 8px; }
  .hero-badge { font-size: 11px; gap: 5px; }
  .hero-badge .check { width: 18px; height: 18px; font-size: 9px; }

  /* Homepage body */
  .featured-heading { font-size: 22px; padding: 0 16px; margin-bottom: 12px; }
  .featured-grid .grid { grid-template-columns: 1fr!important; gap: 10px!important; }
  .featured-card h3 { font-size: 24px; }

  .cat-card { flex: 0 0 140px; }
  .cat-card .thumb { width: 140px; height: 140px; border-radius: 8px; }

  .seo-section-title { font-size: 22px; }
  .seo-grid { grid-template-columns: 1fr; }

  .ig-grid { grid-template-columns: repeat(2, 1fr); }

  .info-grid { grid-template-columns: 1fr 1fr; gap: 10px; }
  .info-card { padding: 20px 10px 16px; }
  .info-card .info-icon { font-size: 32px; margin-bottom: 10px; }
  .info-card h3 { font-size: 14px; }
  .info-card p { font-size: 11px; }

  .form-row { grid-template-columns: 1fr; }

  .sewing-center h2 { font-size: 24px; }
  .sewing-center p { font-size: 14px; }
  .sewing-center ul li { font-size: 14px; }

  /* V3 Footer */

  /* Category Page Small Mobile */
  .cat-spotlight-duo { grid-template-columns: 1fr !important; gap: 12px; }
  .highlight-grid { grid-template-columns: 1fr !important; gap: 6px; max-width: 280px; margin: 0 auto; }
  .cat-highlight-bar .cta-primary { padding: 12px 16px; font-size: 13px; }
  .cat-grid { grid-template-columns: 1fr !important; gap: 12px; }
  .cat-grid-3 { grid-template-columns: 1fr !important; }
  .cat-section-heading { font-size: 22px; }
  .cat-section-sub { font-size: 13px; }
  .footer-grid { grid-template-columns: 1fr 1fr; gap: 16px; }
}

/* ============================================
   CATEGORY PAGE OVERRIDES
   ============================================ */
@media screen and (min-width: 1080px) {
  .cwl.cms-all-labels-cwl .columns, .cwl.cms-all-patches-cwl .columns, .cwl.cms-all-hang-tags-cwl .columns, .cwl.cms-all-pins-cwl .columns {
    max-width: 100%;
    width: 100%;
  }
}
.card-content h3 {
  margin-top: 0px !important;
}