:root {
  --bg: #ffffff;
  --surface: #ffffff;
  --surface-soft: #f8f8f8;
  --line: #e5e5e5;
  --text: #181116;
  --muted: #6e5f66;
  --brand: #000000;
  --brand-rgb: 0, 0, 0;
  --brand-dark: #1f1f1f;
  --danger: #ef4444;
  --success: #10b981;
  --shadow: 0 20px 40px rgba(0, 0, 0, 0.15);
  --radius: 24px;
}

* {
  box-sizing: border-box;
}

[hidden] {
  display: none !important;
}

body {
  margin: 0;
  font-family: "Segoe UI", system-ui, sans-serif;
  color: var(--text);
  background: var(--bg);
}

a {
  color: inherit;
  text-decoration: none;
}

img {
  max-width: 100%;
  display: block;
}

.container {
  max-width: 1500px;
  margin: 0 auto;
  padding: 0 8px;
}

@media (max-width: 992px) {
  .container {
    padding: 0 6px;
  }
}

.narrow {
  max-width: 820px;
  margin: 0 auto;
}

.site-header,
.site-footer,
.card,
.hero-card,
.product-card,
.category-card,
.success-card,
.stat-card {
  background: var(--surface);
  border: 1px solid var(--line);
  box-shadow: var(--shadow);
}

.site-header {
  position: sticky;
  top: 0;
  z-index: 30;
}

.header-inner,
.footer-grid,
.hero-grid,
.section-head,
.product-meta,
.summary-line,
.admin-topbar,
.hero-actions,
.table-actions,
.inline-form,
.product-actions,
.qty-controls,
.cart-item,
.checkout-layout,
.cart-layout {
  display: flex;
  gap: 32px;
}

@media (max-width: 992px) {
  .checkout-layout {
    flex-direction: column-reverse;
  }
  .cart-layout {
    flex-direction: column;
  }
}

.breadcrumb {
  margin-bottom: 24px;
}

.back-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  text-decoration: none;
  font-weight: 600;
  color: var(--muted);
  font-size: 14px;
  transition: color 0.3s;
}

.back-link:hover {
  color: var(--brand);
}

.qty-selector {
  display: flex;
  align-items: center;
  border: 1px solid var(--line);
  border-radius: 12px;
  overflow: hidden;
  background: var(--surface);
}

.qty-btn {
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: none;
  border: none;
  cursor: pointer;
  font-size: 18px;
  color: var(--text);
  transition: background 0.2s;
}

.qty-btn:hover {
  background: var(--surface-soft);
}

.qty-selector input {
  width: 50px;
  text-align: center;
  border: none;
  background: none;
  font-weight: 700;
  font-size: 16px;
  pointer-events: none;
  padding: 0;
  margin: 0;
}

.header-inner,
.section-head,
.admin-topbar {
  align-items: center;
  justify-content: space-between;
}

.header-inner {
  padding: 18px 0;
}

.brand,
.brand-mark,
.main-nav,
.hero-grid,
.product-grid,
.category-grid,
.footer-grid,
.admin-grid,
.stats-grid {
  display: grid;
}

.brand {
  grid-template-columns: auto 1fr;
  align-items: center;
  gap: 12px;
}

.brand img {
  height: 48px;
  width: auto;
}

.brand small,
.muted,
.site-footer p,
.site-footer a,
.product-card small,
.filters input,
.filters select,
.field input,
.field textarea,
.field select {
  color: var(--muted);
}

.main-nav {
  display: flex;
  align-items: center;
  gap: 48px;
}

.nav-links {
  display: flex;
  align-items: center;
  gap: 32px;
}

[data-auth-links] {
  display: flex;
  align-items: center;
  gap: 32px;
}

.nav-links a {
  text-decoration: none;
  font-weight: 600;
  color: var(--text);
  font-size: 15px;
  transition: color 0.3s;
  display: inline-block;
}

[data-auth-links] a + a {
  margin-left: 8px;
}

.nav-links a:hover {
  color: var(--brand);
}

.nav-links a.admin-link {
  color: var(--brand-dark);
  background: #f5f5f5;
  padding: 4px 10px;
  border-radius: 99px;
  font-size: 13px;
}

.header-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}

.icon-btn, .cart-link {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border: none;
  background: none;
  border-radius: 12px;
  color: var(--text);
  transition: all 0.2s;
  cursor: pointer;
}

.icon-btn:hover, .cart-link:hover {
  background: #f8fafc;
  color: var(--brand);
}

.cart-link svg, .icon-btn svg {
  stroke-width: 2.5;
}

.cart-badge {
  position: absolute;
  top: 6px;
  right: 6px;
  background: var(--brand);
  color: #fff;
  font-size: 10px;
  font-weight: 800;
  min-width: 18px;
  height: 18px;
  border-radius: 99px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 2px solid #fff;
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
  line-height: 1;
}

/* Hamburger Icon Styles */
.hamburger {
  display: none;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 6px;
  width: 44px;
  height: 44px;
  background: none;
  border: none;
  cursor: pointer;
  z-index: 1001;
  border-radius: 12px;
  transition: all 0.2s;
}

.hamburger:hover {
  background: #f8fafc;
}

.hamburger span {
  display: block;
  width: 24px;
  height: 2px;
  background: var(--text);
  border-radius: 2px;
  transition: all 0.3s ease;
}

/* Mobile Navigation */
@media (max-width: 992px) {
  .hamburger {
    display: flex;
  }

  .nav-links {
    position: fixed;
    top: 0;
    right: 0;
    width: 300px;
    height: 100vh;
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(20px);
    flex-direction: column;
    padding: 100px 32px;
    box-shadow: -10px 0 30px rgba(0, 0, 0, 0.05);
    transform: translateX(100%);
    transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1);
    z-index: 1000;
    gap: 32px;
    align-items: flex-start;
  }

  .nav-links.active {
    transform: translateX(0);
  }

  .nav-links a {
    font-size: 20px;
    width: 100%;
  }

  [data-auth-links] {
    flex-direction: column;
    align-items: flex-start;
    width: 100%;
  }

  /* Hamburger Animation */
  .hamburger.active span:nth-child(1) {
    transform: translateY(8px) rotate(45deg);
  }
  .hamburger.active span:nth-child(2) {
    opacity: 0;
  }
  .hamburger.active span:nth-child(3) {
    transform: translateY(-8px) rotate(-45deg);
  }

  .main-nav {
    gap: 12px;
  }
}

.page-shell {
  min-height: calc(100vh - 180px);
}

.section {
  padding: 56px 0;
}

.section-muted {
  background: #ffffff;
}

.hero {
  padding: 64px 0 32px;
}

.breadcrumb {
  margin-bottom: 24px;
}

.back-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  text-decoration: none;
  font-weight: 600;
  color: var(--muted);
  font-size: 14px;
  transition: color 0.3s;
}

.back-link:hover {
  color: var(--brand);
}

.back-link::before {
  content: '←';
}

.hero-grid {
  grid-template-columns: 1.15fr 0.55fr;
  align-items: center;
  position: relative;
}

.checkout-layout,
.product-detail {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: center;
  position: relative;
}

/* Slideshow Styles */
.hero-slideshow {
  position: relative;
  overflow: hidden;
  height: 100%;
  border-radius: var(--radius);
}

.hero-slide {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  transition: opacity 1s ease-in-out;
  display: flex;
  align-items: center;
}

.hero-slide.active {
  opacity: 1;
  position: relative;
}

.hero-content {
  flex: 1;
}

.hero-visual {
  flex: 1;
  height: 100%;
}

.hero-visual img {
  width: 100%;
  height: 100%;
  min-height: 400px;
  object-fit: cover;
  border-radius: var(--radius);
}

.slideshow-dots {
  position: absolute;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 8px;
  z-index: 10;
}

.dot {
  width: 10px;
  height: 10px;
  background: rgba(255, 255, 255, 0.4);
  border-radius: 50%;
  cursor: pointer;
  transition: background 0.3s;
}

.dot.active {
  background: #fff;
}

.hero-card,
.card,
.product-card,
.category-card,
.success-card,
.stat-card {
  border-radius: var(--radius);
}

.hero-card {
  overflow: hidden;
}

.hero-card img {
  height: 100%;
  min-height: 400px;
  object-fit: cover;
}

.eyebrow {
  display: inline-flex;
  align-items: center;
  padding: 8px 12px;
  border-radius: 999px;
  background: #f5f5f5;
  color: var(--brand-dark);
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

h1,
h2,
h3,
h4,
p {
  margin-top: 0;
}

h1 {
  font-size: clamp(2.25rem, 3.5vw, 3.5rem);
  line-height: 1.1;
  margin: 12px 0;
}

h2 {
  font-size: 2rem;
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 14px 22px;
  border: 0;
  border-radius: 999px;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.btn:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 20px rgba(var(--brand-rgb), 0.3);
}

.btn-primary:hover {
  filter: brightness(1.05);
}

.btn:active {
  transform: translateY(-1px);
}

.btn-small {
  padding: 8px 16px;
  font-size: 13px;
}

.icon-btn {
  background: none;
  border: none;
  padding: 8px;
  cursor: pointer;
  color: var(--text);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: color 0.3s;
  border-radius: 50%;
}

.icon-btn:hover {
  color: var(--brand);
  background: var(--surface-soft);
}

.btn-block {
  width: 100%;
}

.btn-primary {
  background: linear-gradient(135deg, #000000, #1f1f1f);
  color: #fff;
}

.btn-secondary {
  background: transparent;
  color: var(--text);
  border: 1px solid var(--line);
}

.btn-danger {
  background: #fee2e2;
  color: var(--danger);
}

.link-arrow,
.link-button {
  color: var(--brand-dark);
  font-weight: 700;
}

.link-button {
  background: none;
  border: 0;
  cursor: pointer;
}

.product-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 20px;
}

.product-card {
  position: relative;
  overflow: hidden;
  background: white;
  border-radius: 24px;
  transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
  border: 1px solid #f1f5f9;
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05);
}

.product-card:hover {
    transform: translateY(-10px);
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.1);
    border-color: var(--brand);
}

.product-card img {
  width: 100%;
  height: 260px;
  object-fit: cover;
  transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}

.product-card:hover img {
    transform: scale(1.1);
}

.product-card-body,
.card,
.success-card,
.stat-card {
  padding: 22px;
}

.product-card-body h3 {
  margin: 8px 0;
}

.product-meta,
.hero-actions,
.table-actions,
.inline-form,
.qty-controls {
  flex-wrap: wrap;
  align-items: center;
}

.category-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 24px;
}

.category-card {
  display: flex;
  flex-direction: column;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 20px;
  overflow: hidden;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  text-decoration: none;
  color: inherit;
  min-height: auto;
}

.category-card:hover {
  transform: translateY(-8px);
  border-color: var(--brand);
  box-shadow: var(--shadow);
}

.category-image {
  width: 100%;
  aspect-ratio: 16/10;
  overflow: hidden;
  background: var(--surface-soft);
}

.category-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.5s ease;
}

.category-card:hover .category-image img {
  transform: scale(1.08);
}

.category-card-body {
  padding: 20px;
  flex: 1;
  display: flex;
  flex-direction: column;
}

.category-card h3 {
  margin: 0 0 8px;
  font-size: 1.2rem;
  color: var(--text);
}

.category-card p {
  font-size: 0.9rem;
  color: var(--muted);
  line-height: 1.5;
  margin-bottom: 16px;
  flex: 1;
}

.category-explore {
  display: flex;
  align-items: center;
  gap: 8px;
  font-weight: 700;
  font-size: 13px;
  color: var(--brand);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.filters,
.form-grid {
  display: grid;
  gap: 16px;
}

.filters {
  grid-template-columns: 2fr 1fr auto auto;
  margin-bottom: 24px;
}

.field {
  display: grid;
  gap: 8px;
}

.field-full {
  grid-column: 1 / -1;
}

.field input:not([type="checkbox"]):not([type="radio"]),
.field textarea,
.filters input:not([type="checkbox"]):not([type="radio"]) {
  width: 100%;
  padding: 14px 16px;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: #fff;
  font: inherit;
  color: var(--text);
  transition: all 0.2s ease;
}

.field input:focus,
.filters input:focus {
  outline: none;
  border-color: var(--brand);
  box-shadow: 0 0 0 4px rgba(237, 189, 187, 0.2);
}

.field select,
.filters select,
.inline-form select {
  width: 100%;
  padding: 12px 40px 12px 16px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background-color: #fff;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%2364748b' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  background-size: 16px;
  font: inherit;
  color: var(--text);
  appearance: none;
  -webkit-appearance: none;
  cursor: pointer;
  transition: all 0.2s ease;
}

.field select:hover,
.filters select:hover,
.inline-form select:hover {
  border-color: var(--brand);
  background-color: var(--surface-soft);
}

.field select:focus,
.filters select:focus,
.inline-form select:focus {
  outline: none;
  border-color: var(--brand);
  box-shadow: 0 0 0 4px rgba(237, 189, 187, 0.2);
}

.checkbox {
  display: inline-flex;
  align-items: center;
  gap: 10px;
}

.product-detail {
  display: grid;
  gap: 32px;
  align-items: start;
}

.product-main-image {
  width: 100%;
  border-radius: var(--radius);
  min-height: 460px;
  object-fit: cover;
}

.thumb-grid {
  display: flex;
  gap: 12px;
  margin-top: 16px;
}

.thumb-btn {
  border: 1px solid var(--line);
  border-radius: 14px;
  overflow: hidden;
  width: 88px;
  height: 88px;
  padding: 0;
  background: #fff;
  cursor: pointer;
}

.thumb-btn img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.price {
  font-size: 2rem;
  color: var(--brand-dark);
  font-weight: 800;
}

.stock-status {
  padding: 10px 14px;
  border-radius: 12px;
  background: #f5f5f5;
  display: inline-flex;
  font-weight: 600;
}

/* ==========================================================================
   PACK MY CAKE LUXURY SHOPPING CART
   ========================================================================== */
.cart-hero {
  margin: 20px auto 0 !important;
  width: calc(100% - 2 * var(--site-gutter)) !important;
  padding: clamp(28px, 4vw, 42px) clamp(20px, 3.5vw, 48px) !important;
  background: linear-gradient(135deg, #ffffff 0%, #fdf6f5 55%, #fae8e6 100%) !important;
  border: 1.5px solid #f2dedb !important;
  border-radius: 28px !important;
  box-shadow: 0 10px 30px rgba(186, 107, 101, 0.05) !important;
  position: relative;
  overflow: hidden;
}
.cart-hero .breadcrumbs {
  margin-bottom: 12px !important;
}
.cart-hero-copy .kicker {
  display: inline-block;
  font-family: var(--pmc-sans, 'Plus Jakarta Sans', sans-serif);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: #ba6b65;
  margin-bottom: 6px;
}
.cart-hero-copy h1 {
  font-family: var(--pmc-sans, 'Plus Jakarta Sans', sans-serif) !important;
  font-size: clamp(28px, 3.4vw, 42px) !important;
  font-weight: 800 !important;
  color: #181116 !important;
  letter-spacing: -0.03em !important;
  line-height: 1.15 !important;
  margin: 0 0 8px !important;
}
.cart-hero-copy p {
  font-family: var(--pmc-sans, 'Plus Jakarta Sans', sans-serif) !important;
  font-size: 14.5px !important;
  color: #6d5b60 !important;
  max-width: 620px !important;
  line-height: 1.55 !important;
  margin: 0 !important;
}

.cart-section {
  padding: 36px 0 90px !important;
  min-height: 520px;
}

.cart-layout {
  display: grid !important;
  grid-template-columns: minmax(0, 1.55fr) minmax(340px, 390px) !important;
  gap: 36px !important;
  align-items: start !important;
}

/* Left Column: Cart Items Card */
.cart-items-card,
.cart-layout > .card:first-child {
  background: #ffffff !important;
  border: 1.5px solid #f2dedb !important;
  border-radius: 24px !important;
  padding: clamp(22px, 3vw, 36px) !important;
  box-shadow: 0 10px 30px rgba(186, 107, 101, 0.04) !important;
  box-sizing: border-box !important;
}
.cart-items-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-bottom: 18px;
  border-bottom: 1.5px solid #f2dedb;
  margin-bottom: 6px;
}
.cart-items-header h2 {
  font-family: var(--pmc-sans, 'Plus Jakarta Sans', sans-serif) !important;
  font-size: 18px !important;
  font-weight: 800 !important;
  color: #181116 !important;
  margin: 0 !important;
  letter-spacing: -0.02em;
}
.cart-continue-link {
  font-family: var(--pmc-sans, 'Plus Jakarta Sans', sans-serif) !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  color: #ba6b65 !important;
  text-decoration: none !important;
  transition: color 0.15s ease !important;
}
.cart-continue-link:hover {
  color: #9c4d47 !important;
  text-decoration: underline !important;
}

/* Cart Item Row */
.cart-item {
  display: grid !important;
  grid-template-columns: 96px 1fr auto !important;
  gap: 22px !important;
  align-items: center !important;
  padding: 22px 0 !important;
  border-bottom: 1px solid #f5e8e6 !important;
  background: transparent !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  border-top: none !important;
  border-left: none !important;
  border-right: none !important;
  margin: 0 !important;
  transition: background 0.2s ease !important;
}
.cart-item:last-child {
  border-bottom: none !important;
  padding-bottom: 6px !important;
}
.cart-item:first-child {
  padding-top: 18px !important;
}
.cart-item:hover {
  transform: none !important;
  box-shadow: none !important;
  border-color: #f5e8e6 !important;
}

.cart-item img,
.cart-item-image {
  width: 96px !important;
  height: 96px !important;
  border-radius: 18px !important;
  object-fit: contain !important;
  background: #fffcfb !important;
  border: 1.5px solid #f2dedb !important;
  padding: 6px !important;
  box-sizing: border-box !important;
  box-shadow: 0 4px 12px rgba(186, 107, 101, 0.05) !important;
  flex-shrink: 0 !important;
}

.cart-item-details,
.cart-item .item-details {
  display: flex !important;
  flex-direction: column !important;
  gap: 4px !important;
  min-width: 0 !important;
}
.cart-item-title,
.cart-item h3 {
  font-family: var(--pmc-sans, 'Plus Jakarta Sans', sans-serif) !important;
  font-size: 15.5px !important;
  font-weight: 750 !important;
  color: #181116 !important;
  line-height: 1.35 !important;
  margin: 0 !important;
}
.cart-item-price,
.cart-item .item-details p {
  font-family: var(--pmc-sans, 'Plus Jakarta Sans', sans-serif) !important;
  font-size: 13.5px !important;
  font-weight: 600 !important;
  color: #766a6e !important;
  margin: 0 !important;
}
.cart-item-unit {
  font-size: 12px !important;
  color: #9c8085 !important;
}

.cart-item-controls,
.cart-item > div:last-child {
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-end !important;
  gap: 10px !important;
  min-width: 130px !important;
}

.qty-controls {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  background: #fdf6f5 !important;
  border: 1.5px solid #f2dedb !important;
  padding: 4px 6px !important;
  border-radius: 999px !important;
  box-sizing: border-box !important;
}
.qty-controls button {
  width: 28px !important;
  height: 28px !important;
  border-radius: 50% !important;
  border: 1px solid #eedcd8 !important;
  background: #ffffff !important;
  color: #ba6b65 !important;
  font-family: var(--pmc-sans, 'Plus Jakarta Sans', sans-serif) !important;
  font-size: 15px !important;
  font-weight: 800 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  cursor: pointer !important;
  padding: 0 !important;
  line-height: 1 !important;
  box-shadow: 0 1px 3px rgba(186, 107, 101, 0.08) !important;
  transition: all 0.15s ease !important;
}
.qty-controls button:hover {
  background: #ba6b65 !important;
  color: #ffffff !important;
  border-color: #ba6b65 !important;
  transform: scale(1.06) !important;
}
.qty-controls span,
.qty-controls .qty-val {
  font-family: var(--pmc-sans, 'Plus Jakarta Sans', sans-serif) !important;
  font-size: 14px !important;
  font-weight: 750 !important;
  color: #181116 !important;
  min-width: 22px !important;
  text-align: center !important;
}

.cart-item-total,
.cart-item strong {
  font-family: var(--pmc-sans, 'Plus Jakarta Sans', sans-serif) !important;
  font-size: 17px !important;
  font-weight: 800 !important;
  color: #181116 !important;
  letter-spacing: -0.015em !important;
}

.remove-item-btn {
  font-family: var(--pmc-sans, 'Plus Jakarta Sans', sans-serif) !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  color: #9c8085 !important;
  background: transparent !important;
  border: none !important;
  cursor: pointer !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 4px !important;
  padding: 3px 6px !important;
  border-radius: 6px !important;
  transition: all 0.15s ease !important;
}
.remove-item-btn:hover {
  color: #d9433b !important;
  background: #fdf2f1 !important;
}

/* Right Column: Order Summary Card */
.cart-summary,
.cart-summary-card {
  background: #ffffff !important;
  border: 1.5px solid #f2dedb !important;
  border-radius: 24px !important;
  padding: clamp(22px, 3vw, 32px) !important;
  box-shadow: 0 10px 30px rgba(186, 107, 101, 0.05) !important;
  box-sizing: border-box !important;
  position: relative !important;
  top: auto !important;
}
.cart-summary-title,
.cart-summary h3 {
  font-family: var(--pmc-sans, 'Plus Jakarta Sans', sans-serif) !important;
  font-size: 19px !important;
  font-weight: 800 !important;
  color: #181116 !important;
  margin: 0 0 18px !important;
  letter-spacing: -0.02em !important;
}

.summary-line {
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  padding: 10px 0 !important;
  font-family: var(--pmc-sans, 'Plus Jakarta Sans', sans-serif) !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  color: #6d5b60 !important;
}
.summary-line strong {
  font-weight: 750 !important;
  color: #181116 !important;
  font-size: 15px !important;
}
.summary-line .delivery-note {
  font-size: 13px !important;
  color: #9c8085 !important;
  font-weight: 500 !important;
}

.summary-line.total {
  margin-top: 14px !important;
  padding-top: 16px !important;
  border-top: 1.5px solid #f2dedb !important;
  font-size: 16px !important;
  font-weight: 800 !important;
  color: #181116 !important;
}
.summary-line.total strong,
#cart-total {
  font-size: 22px !important;
  font-weight: 800 !important;
  color: #ba6b65 !important;
  letter-spacing: -0.02em !important;
}

.cart-checkout-action {
  margin-top: 20px !important;
}
.cart-checkout-action .btn,
.cart-summary .btn-primary {
  width: 100% !important;
  min-height: 48px !important;
  border-radius: 999px !important;
  background: #181116 !important;
  color: #ffffff !important;
  border: 1.5px solid #181116 !important;
  font-family: var(--pmc-sans, 'Plus Jakarta Sans', sans-serif) !important;
  font-size: 14px !important;
  font-weight: 800 !important;
  letter-spacing: .02em !important;
  box-shadow: 0 8px 22px rgba(24, 17, 22, 0.22) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  text-decoration: none !important;
  transition: all 0.2s ease !important;
}
.cart-checkout-action .btn:hover,
.cart-summary .btn-primary:hover {
  background: #36262d !important;
  border-color: #36262d !important;
  color: #ffffff !important;
  box-shadow: 0 12px 28px rgba(24, 17, 22, 0.32) !important;
  transform: translateY(-1.5px) !important;
}

.cart-bulk-prompt {
  margin-top: 18px !important;
  text-align: center !important;
  border-top: 1px dashed #eedcd8 !important;
  padding-top: 14px !important;
}
.cart-bulk-link {
  font-family: var(--pmc-sans, 'Plus Jakarta Sans', sans-serif) !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  color: #ba6b65 !important;
  text-decoration: none !important;
  transition: color 0.15s ease !important;
}
.cart-bulk-link:hover {
  color: #9c4d47 !important;
  text-decoration: underline !important;
}

.cart-trust-footer {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  margin-top: 14px !important;
  font-family: var(--pmc-sans, 'Plus Jakarta Sans', sans-serif) !important;
  font-size: 11.5px !important;
  font-weight: 600 !important;
  color: #9c8085 !important;
}

/* Footer Brand Name Visibility Fix */
.footer-brand .brand-v2 strong,
.footer-brand .brand strong,
.site-footer .brand strong,
.site-footer .brand-v2 strong,
.footer-v2 .brand strong,
.footer-v2 .brand-v2 strong {
  color: #ffffff !important;
}

@media (max-width: 960px) {
  .cart-layout {
    grid-template-columns: 1fr !important;
    gap: 28px !important;
  }
}
@media (max-width: 640px) {
  .cart-item {
    grid-template-columns: 80px 1fr !important;
    gap: 16px !important;
  }
  .cart-item img,
  .cart-item-image {
    width: 80px !important;
    height: 80px !important;
  }
  .cart-item-controls,
  .cart-item > div:last-child {
    grid-column: 1 / -1 !important;
    flex-direction: row !important;
    justify-content: space-between !important;
    align-items: center !important;
    width: 100% !important;
    padding-top: 10px !important;
    border-top: 1px dashed #f5e8e6 !important;
  }
}

.checkout-layout {
  align-items: start;
}

.order-meta,
.order-tracker {
  display: grid;
  gap: 12px;
  grid-template-columns: repeat(3, 1fr);
  margin: 24px 0;
}

.order-meta div,
.stat-card {
  border-radius: 18px;
  background: #ffffff;
  padding: 18px;
}

.order-meta span,
.stat-card span,
small {
  display: block;
  color: var(--muted);
}

.success-card {
  text-align: center;
}

.site-footer {
  margin-top: 0;
  padding: 36px 0;
}

.footer-grid {
  grid-template-columns: 2fr 1fr 1fr;
}

.site-footer a,
.site-footer p {
  display: block;
  margin: 6px 0;
}

.form-error,
.form-success {
  padding: 14px 18px;
  border-radius: 16px;
  margin-bottom: 16px;
}

.form-error {
  background: #fee2e2;
  color: var(--danger);
}

.form-success {
  background: #dcfce7;
  color: var(--success);
}

.empty-state,
.catalog-empty-state {
  grid-column: 1 / -1 !important;
  width: 100% !important;
  max-width: 680px;
  margin: 16px auto 40px !important;
  min-height: 240px;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 12px;
  padding: clamp(40px, 5vw, 56px) clamp(24px, 4vw, 48px) !important;
  border: 1.5px dashed #e8d0cb !important;
  border-radius: 28px !important;
  background: linear-gradient(180deg, #fffcfb 0%, #fff7f6 100%) !important;
  text-align: center !important;
  box-shadow: 0 14px 36px rgba(186, 107, 101, 0.05) !important;
  box-sizing: border-box !important;
  color: var(--pmc-ink, #181116) !important;
  font-family: var(--pmc-sans, 'Plus Jakarta Sans', sans-serif) !important;
  font-size: 15px;
}
.empty-state:has(.empty-state-card),
.catalog-empty-state:has(.empty-state-card) {
  min-height: auto !important;
  border: none !important;
  background: transparent !important;
  box-shadow: none !important;
  padding: 0 !important;
  max-width: 100% !important;
  margin: 12px 0 40px !important;
}
.empty-state h2, .empty-state h3, .empty-state-card h3 {
  margin: 0 0 10px !important;
  font-family: var(--pmc-sans, 'Plus Jakarta Sans', sans-serif) !important;
  font-size: clamp(22px, 2.5vw, 28px) !important;
  font-weight: 800 !important;
  color: var(--pmc-cocoa, #181116) !important;
  letter-spacing: -0.025em !important;
  line-height: 1.25 !important;
  text-align: center !important;
}
.empty-state p, .empty-state-lead {
  max-width: 520px !important;
  margin: 0 auto 18px !important;
  font-family: var(--pmc-sans, 'Plus Jakarta Sans', sans-serif) !important;
  color: var(--pmc-muted, #6d5b60) !important;
  font-size: 15px !important;
  font-weight: 500 !important;
  line-height: 1.6 !important;
  text-align: center !important;
}

/* ==========================================================================
   ADMIN PANEL V2 DESIGN SYSTEM (PACK MY CAKE LUXURY BAKERY THEME)
   ========================================================================== */

.admin-body {
  background: var(--pmc-bg, #ffffff);
  font-family: var(--font-body, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif);
  color: var(--pmc-ink, #1f1b1a);
  margin: 0;
  padding: 0;
  min-height: 100vh;
}

.admin-layout {
  display: grid;
  grid-template-columns: 270px 1fr;
  min-height: 100vh;
}

.admin-sidebar {
  background: #000000;
  color: #fdf6f4;
  position: sticky;
  top: 0;
  height: 100vh;
  display: flex;
  flex-direction: column;
  z-index: 100;
  border-right: 1px solid rgba(0, 0, 0, 0.12);
  padding: 24px 16px;
  box-sizing: border-box;
  overflow-y: auto;
}

.admin-sidebar-header {
  padding-bottom: 20px;
  margin-bottom: 16px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.admin-sidebar .admin-brand {
  display: flex;
  align-items: center;
  gap: 12px;
  text-decoration: none;
  color: #fff;
}

.admin-sidebar .admin-brand strong {
  font-size: 15px;
  font-weight: 800;
  letter-spacing: 0.06em;
  color: #fff;
  display: block;
}

.admin-sidebar .admin-badge {
  display: inline-block;
  font-size: 10px;
  font-weight: 700;
  background: #000000;
  color: #fff;
  padding: 2px 8px;
  border-radius: 999px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin-top: 3px;
}

.admin-nav-section-title {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: rgba(255, 255, 255, 0.45);
  font-weight: 700;
  padding: 8px 12px 6px;
}

.admin-nav {
  display: flex;
  flex-direction: column;
  gap: 4px;
  flex: 1;
}

.admin-nav a {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 14px;
  border-radius: 12px;
  color: rgba(255, 255, 255, 0.72);
  text-decoration: none;
  font-size: 14px;
  font-weight: 500;
  transition: all 0.2s ease;
  position: relative;
}

.admin-nav a svg {
  stroke: currentColor;
  opacity: 0.8;
  flex-shrink: 0;
}

.admin-nav a:hover {
  background: rgba(255, 255, 255, 0.08);
  color: #fff;
  transform: translateX(3px);
}

.admin-nav a.active {
  background: linear-gradient(135deg, rgba(0, 0, 0, 0.28), rgba(0, 0, 0, 0.14));
  color: #fff;
  font-weight: 600;
  border: 1px solid rgba(0, 0, 0, 0.4);
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.15);
}

.admin-nav a.active svg {
  stroke: var(--pmc-pink);
  opacity: 1;
}

.nav-pill-badge {
  margin-left: auto;
  font-size: 11px;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 999px;
  line-height: 1.3;
}

.nav-pill-badge.highlight {
  background: var(--pmc-pink);
  color: #fff;
}

.nav-pill-badge.warning {
  background: #f59e0b;
  color: #1e1412;
}

.admin-sidebar-footer {
  margin-top: auto;
  padding-top: 16px;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.sidebar-action-btn {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 12px;
  border-radius: 10px;
  font-size: 13px;
  font-weight: 500;
  text-decoration: none;
  transition: 0.2s ease;
}

.sidebar-action-btn.store-link {
  background: rgba(255, 255, 255, 0.06);
  color: #e2d9d6;
}

.sidebar-action-btn.store-link:hover {
  background: rgba(255, 255, 255, 0.12);
  color: #fff;
}

.sidebar-action-btn.logout-link {
  color: #fca5a5;
}

.sidebar-action-btn.logout-link:hover {
  background: rgba(239, 68, 68, 0.15);
  color: #fff;
}

.admin-main {
  background: var(--pmc-bg, #ffffff);
  min-width: 0;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

.admin-topbar {
  background: rgba(255, 255, 255, 0.88);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--pmc-line, #e5e5e5);
  padding: 18px 36px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  position: sticky;
  top: 0;
  z-index: 50;
}

.admin-breadcrumb {
  font-size: 11px;
  color: var(--pmc-muted, #7c6a66);
  display: flex;
  align-items: center;
  gap: 6px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-weight: 600;
  margin-bottom: 4px;
}

.admin-page-heading {
  font-size: 24px;
  font-weight: 800;
  color: var(--pmc-cocoa, #2b1f1d);
  margin: 0;
  letter-spacing: -0.02em;
}

.admin-topbar-right {
  display: flex;
  align-items: center;
  gap: 16px;
}

.admin-store-preview-btn {
  font-size: 13px;
  padding: 8px 16px;
  border-radius: 999px;
  text-decoration: none;
}

.admin-user-profile {
  display: flex;
  align-items: center;
  gap: 10px;
  background: #fff;
  padding: 6px 14px 6px 8px;
  border-radius: 999px;
  border: 1px solid var(--pmc-line);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
}

.admin-avatar {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: #000000;
  color: #fff;
  display: grid;
  place-items: center;
  font-weight: 800;
  font-size: 13px;
}

.admin-user-meta {
  display: flex;
  flex-direction: column;
  line-height: 1.15;
}

.admin-user-meta strong {
  font-size: 13px;
  color: var(--pmc-ink);
}

.admin-user-meta .role-chip {
  font-size: 10px;
  color: var(--pmc-pink-dark);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.admin-content-wrap {
  padding: 32px 36px 60px;
  max-width: 1400px;
  box-sizing: border-box;
  width: 100%;
}

.admin-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
  align-items: stretch;
  width: 100%;
}

.admin-grid-full {
  display: grid;
  grid-template-columns: 1fr;
  gap: 24px;
  width: 100%;
}

.card {
  background: #ffffff;
  border-radius: 20px;
  border: 1px solid var(--pmc-line, #e5e5e5);
  box-shadow: 0 4px 20px rgba(43, 31, 29, 0.04);
  padding: 24px 28px;
  margin-bottom: 24px;
  position: relative;
  min-width: 0;
  box-sizing: border-box;
}

.table-responsive {
  width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.card h2, .card h3 {
  color: var(--pmc-cocoa, #2b1f1d);
  font-size: 20px;
  font-weight: 700;
  margin: 0 0 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.stats-grid-v2 {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 20px;
  margin-bottom: 28px;
}

.stat-card-v2 {
  background: #ffffff;
  border-radius: 20px;
  border: 1px solid var(--pmc-line, #e5e5e5);
  padding: 22px 24px;
  box-shadow: 0 4px 18px rgba(43, 31, 29, 0.04);
  display: flex;
  flex-direction: column;
  gap: 10px;
  position: relative;
  overflow: hidden;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.stat-card-v2:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 26px rgba(43, 31, 29, 0.08);
  border-color: rgba(217, 120, 143, 0.35);
}

.stat-card-v2 .stat-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.stat-card-v2 .stat-title {
  font-size: 12px;
  font-weight: 700;
  color: var(--pmc-muted, #7c6a66);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.stat-card-v2 .stat-icon {
  width: 42px;
  height: 42px;
  border-radius: 12px;
  display: grid;
  place-items: center;
  font-size: 18px;
}

.stat-card-v2.primary .stat-icon {
  background: linear-gradient(135deg, #f5f5f5, #f0f0f0);
  color: #b8546b;
}

.stat-card-v2.success .stat-icon {
  background: #ecfdf5;
  color: #059669;
}

.stat-card-v2.warning .stat-icon {
  background: #fffbeb;
  color: #d97706;
}

.stat-card-v2.info .stat-icon {
  background: #eff6ff;
  color: #2563eb;
}

.stat-card-v2 .stat-value {
  font-size: 28px;
  font-weight: 800;
  color: var(--pmc-cocoa, #2b1f1d);
  letter-spacing: -0.02em;
  line-height: 1;
}

.stat-card-v2 .stat-subtext {
  font-size: 12px;
  color: var(--pmc-muted, #7c6a66);
  display: flex;
  align-items: center;
  gap: 6px;
}

.stat-subtext .trend-up {
  color: #059669;
  font-weight: 700;
}

.stat-subtext .trend-warn {
  color: #d97706;
  font-weight: 700;
}

/* Sales booster promotional banner */
.sales-action-bar {
  background: linear-gradient(135deg, #ffffff, #f5f5f5);
  border: 1px solid rgba(217, 120, 143, 0.28);
  border-radius: 20px;
  padding: 20px 24px;
  margin-bottom: 28px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  flex-wrap: wrap;
}

.sales-action-info {
  display: flex;
  align-items: center;
  gap: 14px;
}

.sales-action-icon {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  background: var(--pmc-pink);
  color: #fff;
  display: grid;
  place-items: center;
  font-size: 22px;
  flex-shrink: 0;
}

.sales-action-text strong {
  display: block;
  font-size: 15px;
  color: var(--pmc-ink);
}

.sales-action-text p {
  margin: 2px 0 0;
  font-size: 13px;
  color: var(--pmc-muted);
}

.sales-action-btns {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.data-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  margin-top: 10px;
}

.data-table th {
  background: #f8f8f8;
  color: var(--pmc-ink);
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  padding: 12px 16px;
  border-top: 1px solid var(--pmc-line);
  border-bottom: 1px solid var(--pmc-line);
  text-align: left;
}

.data-table th:first-child {
  border-top-left-radius: 12px;
  border-bottom-left-radius: 12px;
}

.data-table th:last-child {
  border-top-right-radius: 12px;
  border-bottom-right-radius: 12px;
}

.data-table td {
  padding: 14px 16px;
  border-bottom: 1px solid var(--pmc-line);
  vertical-align: middle;
  font-size: 14px;
}

.data-table tr:hover td {
  background: #f8f8f8;
}

.product-table-cell {
  display: flex;
  align-items: center;
  gap: 12px;
}

.product-table-thumb {
  width: 46px;
  height: 46px;
  border-radius: 10px;
  object-fit: cover;
  border: 1px solid var(--pmc-line);
  background: #ffffff;
  flex-shrink: 0;
}

.badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 11px;
  font-weight: 700;
  padding: 4px 10px;
  border-radius: 999px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  line-height: 1.3;
}

.badge-paid {
  background: #ecfdf5;
  color: #065f46;
  border: 1px solid #a7f3d0;
}

.badge-pending {
  background: #fffbeb;
  color: #92400e;
  border: 1px solid #fde68a;
}

.badge-shipped {
  background: #eff6ff;
  color: #1e40af;
  border: 1px solid #bfdbfe;
}

.badge-delivered {
  background: #f0fdf4;
  color: #166534;
  border: 1px solid #bbf7d0;
}

.badge-cancelled {
  background: #fef2f2;
  color: #991b1b;
  border: 1px solid #fecaca;
}

.badge-instock {
  background: #ecfdf5;
  color: #065f46;
}

.badge-lowstock {
  background: #fff7ed;
  color: #c2410c;
  border: 1px solid #fed7aa;
}

.badge-outstock {
  background: #fef2f2;
  color: #991b1b;
  border: 1px solid #fecaca;
}

.badge-promo {
  background: #f5f5f5;
  color: var(--pmc-pink-dark);
  border: 1px solid #e5e5e5;
  font-weight: 800;
}

.badge-category {
  background: #f5f5f5;
  color: var(--pmc-ink);
  border: 1px solid #e5e5e5;
}

.whatsapp-btn-sm {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: #25d366;
  color: #fff !important;
  font-size: 12px;
  font-weight: 700;
  padding: 6px 12px;
  border-radius: 8px;
  text-decoration: none;
  transition: 0.2s ease;
  border: none;
  cursor: pointer;
}

.whatsapp-btn-sm:hover {
  background: #1ebc59;
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(37, 211, 102, 0.3);
}

/* Admin Responsive Styles */
.admin-mobile-header {
  display: none;
  align-items: center;
  justify-content: space-between;
  padding: 12px 20px;
  background: #000000;
  color: #fff;
  position: sticky;
  top: 0;
  width: 100%;
  box-sizing: border-box;
  z-index: 1001;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.admin-mobile-header .admin-brand {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 0;
  line-height: 1.2;
}

.admin-mobile-header .admin-brand strong {
  font-size: 16px;
  font-weight: 800;
  color: #fff;
}

.admin-mobile-header .admin-brand small {
  display: block;
  font-size: 10px;
  opacity: 0.9;
  color: var(--pmc-pink);
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.admin-hamburger {
  display: flex;
  flex-direction: column;
  gap: 5px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 8px;
}

.admin-hamburger span {
  display: block;
  width: 24px;
  height: 2px;
  background: #fff;
  border-radius: 2px;
  transition: all 0.3s ease;
}

.admin-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  background: rgba(30, 20, 18, 0.65);
  backdrop-filter: blur(4px);
  z-index: 1002;
  opacity: 0;
  visibility: hidden;
  transition: all 0.3s ease;
}

.admin-overlay.open {
  opacity: 1;
  visibility: visible;
}

@media (max-width: 960px) {
  .admin-layout {
    grid-template-columns: 1fr;
  }

  .admin-sidebar {
    position: fixed;
    top: 0;
    left: -300px;
    width: 280px;
    height: 100vh;
    z-index: 1003;
    transition: left 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  }

  .admin-sidebar.open {
    left: 0;
  }

  .admin-mobile-header {
    display: flex;
  }

  .admin-topbar {
    padding: 14px 20px;
  }

  .admin-content-wrap {
    padding: 20px 16px 40px;
  }

  .admin-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 1024px) {
    .admin-mobile-header {
        display: flex;
    }

    .admin-layout {
        grid-template-columns: 1fr;
    }

    .admin-sidebar {
        position: fixed;
        left: 0;
        top: 0;
        z-index: 1003;
        width: 280px;
        transform: translateX(-100%);
        transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
        box-shadow: 20px 0 50px rgba(0, 0, 0, 0.2);
    }

    .admin-sidebar-active .admin-sidebar {
        transform: translateX(0);
    }

    .admin-sidebar-active .admin-overlay {
        opacity: 1;
        visibility: visible;
    }

    .admin-sidebar-active .admin-hamburger span:nth-child(1) {
        transform: translateY(7px) rotate(45deg);
    }
    .admin-sidebar-active .admin-hamburger span:nth-child(2) {
        opacity: 0;
    }
    .admin-sidebar-active .admin-hamburger span:nth-child(3) {
        transform: translateY(-7px) rotate(-45deg);
    }

    .admin-main {
        padding: 16px;
    }

    .admin-topbar {
        margin-bottom: 24px;
    }

    .admin-topbar h1 {
        font-size: 24px;
    }

    .admin-grid {
        grid-template-columns: 1fr;
        gap: 24px;
    }
}

@media (max-width: 640px) {
    .admin-topbar {
        flex-direction: column;
        align-items: flex-start;
        gap: 12px;
    }
    
    .data-table td, .data-table th {
        padding: 12px 16px;
        font-size: 13px;
    }
}

.card h2 {
    font-size: 20px;
    margin-bottom: 24px;
    font-weight: 700;
}

.field {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.field-full {
    grid-column: span 2;
}

.field label {
    font-size: 13px;
    font-weight: 600;
    color: #64748b;
}

.field input:not([type="checkbox"]), 
.field select, 
.field textarea {
    width: 100%;
    padding: 12px 16px;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    font-size: 14px;
    transition: all 0.2s ease;
}

.field input:focus, 
.field select:focus, 
.field textarea:focus {
    outline: none;
    background: white;
    border-color: var(--brand);
    box-shadow: 0 0 0 4px rgba(var(--brand-rgb, 219, 137, 102), 0.1);
}

.checkbox {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 14px;
    cursor: pointer;
}

.checkbox input {
    width: 18px;
    height: 18px;
    border-radius: 4px;
    cursor: pointer;
}

.data-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  background: white;
  border-radius: 20px;
  overflow: hidden;
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05);
}

.data-table th {
    background: #f1f5f9;
    padding: 16px 24px;
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: #475569;
    border-bottom: 1px solid #e2e8f0;
}

.data-table td {
  padding: 20px 24px;
  border-bottom: 1px solid #f1f5f9;
  vertical-align: middle;
  color: #334155;
  font-size: 15px;
}

.data-table tr:last-child td {
    border-bottom: none;
}

.data-table tr {
    transition: background 0.2s ease;
}

.data-table tr:hover {
    background: #f8fafc;
}

.data-table select {
  padding: 8px 32px 8px 12px;
  font-size: 13px;
  border-radius: 8px;
  background-position: right 10px center;
  background-size: 14px;
  min-width: 140px;
}

/* Status Badges */
.badge {
    display: inline-flex;
    align-items: center;
    padding: 6px 12px;
    border-radius: 99px;
    font-size: 12px;
    font-weight: 600;
    text-transform: capitalize;
}

.badge-stock-in { background: #dcfce7; color: #166534; }
.badge-stock-low { background: #fef9c3; color: #854d0e; }
.badge-stock-out { background: #fee2e2; color: #991b1b; }
.badge-category { background: #f1f5f9; color: #475569; }

.table-actions {
    display: flex;
    gap: 8px;
}

.table-actions form,
.inline-form {
  display: inline-flex;
}

.mono {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 12px;
  color: var(--muted);
}

.order-items-inline {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.order-items-inline span {
  padding: 8px 12px;
  border-radius: 999px;
  background: #ffffff;
}

.admin-login-body {
  min-height: 100vh;
  display: grid;
  place-items: center;
  background: #ffffff;
}

.admin-login-card {
  width: min(420px, calc(100% - 32px));
  padding: 28px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 24px;
  box-shadow: var(--shadow);
}

@media (max-width: 960px) {
  .hero-grid,
  .checkout-layout,
  .cart-layout,
  .product-detail,
  .admin-grid,
  .footer-grid,
  .filters,
  .stats-grid,
  .category-grid,
  .product-grid {
    grid-template-columns: 1fr;
    display: flex;
    flex-direction: column;
    gap: 24px;
  }

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

  .field-full {
    grid-column: span 1 !important;
  }

  .main-nav {
    grid-auto-flow: row;
    justify-items: start;
  }

  .admin-layout {
    grid-template-columns: 1fr;
  }

  .admin-sidebar {
    padding-bottom: 0;
  }

  .order-meta,
  .order-tracker {
    grid-template-columns: 1fr;
  }
}

/* Search Overlay */
.search-overlay {
  position: fixed;
  inset: 0;
  z-index: 1200;
  background: rgba(255, 255, 255, 0.98);
  backdrop-filter: blur(10px);
  display: flex;
  align-items: center;
  justify-content: center;
  animation: fadeIn 0.3s ease;
}

.search-overlay[hidden] {
  display: none !important;
}

.search-close {
  position: absolute;
  top: 40px;
  right: 40px;
  font-size: 48px;
  line-height: 1;
  background: none;
  border: none;
  cursor: pointer;
  color: var(--text);
  opacity: 0.5;
  transition: opacity 0.3s, transform 0.3s;
}

.search-close:hover {
  opacity: 1;
  transform: rotate(90deg);
}

.search-container {
  width: min(800px, 90%);
  text-align: center;
}

.search-form input {
  width: 100%;
  border: none;
  border-bottom: 3px solid var(--line);
  background: none;
  font-size: 3rem;
  font-weight: 800;
  padding: 20px 0;
  color: var(--text);
  outline: none;
  transition: border-color 0.3s;
  text-align: center;
}

.search-form input::placeholder {
  color: var(--line);
}

.search-form input:focus {
  border-color: var(--brand);
}

.search-hint {
  margin-top: 24px;
  color: var(--muted);
  font-weight: 600;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  font-size: 14px;
}

@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

@media (max-width: 768px) {
  .search-form input {
    font-size: 1.5rem;
  }
  .search-close {
    top: 20px;
    right: 20px;
    font-size: 32px;
  }
}

/* Sales Boosting Styles */
.trust-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 24px;
  margin-top: 32px;
  padding-top: 24px;
  border-top: 1px solid var(--line);
}

.trust-item {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 13px;
  font-weight: 600;
  color: var(--muted);
}

.trust-item svg {
  color: var(--brand);
}

/* Exit Intent Modal */
.modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.4);
    backdrop-filter: blur(8px);
    z-index: 1150;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
}

.modal-overlay[hidden] {
    display: none !important;
}

.modal-content.glass {
    background: rgba(255, 255, 255, 0.95);
    border: 1px solid rgba(255, 255, 255, 0.4);
    box-shadow: 0 32px 64px -16px rgba(0, 0, 0, 0.2);
    border-radius: 24px;
    position: relative;
    max-width: 440px;
    width: 100%;
    padding: 40px 32px;
    animation: modal-pop 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.modal-close {
    position: absolute;
    top: 16px;
    right: 16px;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: #f3f4f6;
    border: none;
    font-size: 20px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s;
}

.modal-close:hover {
    background: #e5e7eb;
    transform: rotate(90deg);
}

@keyframes modal-pop {
    from { opacity: 0; transform: scale(0.9) translateY(20px); }
    to { opacity: 1; transform: scale(1) translateY(0); }
}

.exit-modal h2 {
    font-size: 28px;
    margin: 8px 0 16px;
    color: #111827;
}

.exit-modal p {
    color: #4b5563;
    line-height: 1.6;
    margin-bottom: 24px;
}

.related-section {
  margin-top: 80px;
  padding-top: 64px;
  border-top: 1px solid var(--line);
}

.related-section h2 {
  margin-bottom: 32px;
}

/* Side Cart Drawer */
.side-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.4);
  backdrop-filter: blur(4px);
  z-index: 1100;
  animation: fadeIn 0.3s ease;
}

.side-cart {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  width: min(420px, 90%);
  background: var(--bg);
  z-index: 1101;
  box-shadow: -10px 0 50px rgba(0, 0, 0, 0.1);
  display: flex;
  flex-direction: column;
  animation: slideInRight 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

.side-cart[hidden], .side-overlay[hidden] {
  display: none !important;
}

.side-cart-header {
  padding: 24px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 1px solid var(--line);
}

.side-cart-close {
  background: none;
  border: none;
  font-size: 32px;
  cursor: pointer;
  color: var(--muted);
  line-height: 1;
}

.side-cart-body {
  flex: 1;
  overflow-y: auto;
  padding: 24px;
}

.side-cart-footer {
  padding: 24px;
  border-top: 1px solid var(--line);
  background: var(--surface-soft);
  display: flex;
  flex-direction: column;
  gap: 12px;
}

/* Shipping Progress Bar */
.shipping-goal {
  background: var(--surface-soft);
  padding: 16px;
  border-radius: 12px;
  margin-bottom: 24px;
  text-align: center;
}

.shipping-goal p {
  font-size: 13px;
  font-weight: 600;
  margin-bottom: 10px;
}

.progress-bar-wrap {
  height: 8px;
  background: rgba(0, 0, 0, 0.05);
  border-radius: 4px;
  overflow: hidden;
}

.progress-bar-fill {
  height: 100%;
  background: var(--brand);
  transition: width 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}

/* Side Cart Items */
.side-cart-items {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.side-cart-extra {
  margin-top: 24px;
  padding-top: 20px;
  border-top: 1px solid var(--line);
}

.side-cart-extra .eyebrow {
  display: block;
  margin-bottom: 12px;
}

.side-cart-suggestions {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.mini-item {
  display: grid;
  grid-template-columns: 80px 1fr auto;
  gap: 16px;
  align-items: center;
}

.mini-item img {
  width: 80px;
  height: 80px;
  object-fit: cover;
  border-radius: 12px;
  border: 1px solid var(--line);
}

.mini-item h4 {
  font-size: 14px;
  margin-bottom: 4px;
}

.mini-item p {
  font-size: 13px;
  color: var(--muted);
}

.mini-qty {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 8px;
}

.mini-qty button {
  width: 24px;
  height: 24px;
  background: var(--surface-soft);
  border: none;
  border-radius: 4px;
  cursor: pointer;
}

.remove-item-btn {
  width: 26px;
  height: 26px;
  background: none;
  border: none;
  border-radius: 50%;
  cursor: pointer;
  color: #9ca3af;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  transition: color 0.2s, background 0.2s;
  margin-left: 2px;
}

.remove-item-btn:hover {
  color: #ef4444;
  background: #fee2e2;
}

.discount-line {
  color: #16a34a;
  font-weight: 600;
  display: block;
  font-size: 12px;
  margin-top: 2px;
}

.link-button {
  background: none;
  border: none;
  cursor: pointer;
  color: var(--muted);
  font-size: 14px;
  text-decoration: underline;
  padding: 0;
}

.link-button:hover {
  color: var(--brand);
}


@keyframes slideInRight {
  from { transform: translateX(100%); }
  to { transform: translateX(0); }
}

/* Account Dashboard */
.account-layout {
    display: grid;
    grid-template-columns: 280px 1fr;
    gap: 40px;
}

@media (max-width: 992px) {
    .account-layout {
        grid-template-columns: 1fr;
        gap: 24px;
    }
    
    .account-sidebar {
        position: static;
        margin-bottom: 8px;
    }

    .account-sidebar-nav {
        flex-direction: row !important;
        overflow-x: auto;
        padding-bottom: 12px;
        gap: 12px;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none; /* Firefox */
    }

    .account-sidebar-nav::-webkit-scrollbar {
        display: none; /* Chrome, Safari */
    }

    .account-sidebar-nav a {
        white-space: nowrap;
        padding: 10px 20px !important;
        flex-shrink: 0;
    }
}
.account-sidebar-nav {
    display: flex;
    flex-direction: column;
    gap: 8px;
    background: var(--surface);
    padding: 12px;
    border-radius: 20px;
    border: 1px solid var(--line);
}

.account-main h1 {
    font-size: 2.5rem;
    margin: 8px 0;
}

.account-sidebar-nav a {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 20px;
    border-radius: 12px;
    color: var(--muted);
    font-weight: 500;
    transition: all 0.3s ease;
}

.account-sidebar-nav a:hover {
    background: var(--surface-soft);
    color: var(--text);
}

.account-sidebar-nav a.active {
    background: var(--brand);
    color: white;
    box-shadow: 0 10px 20px rgba(var(--brand-rgb, 219, 137, 102), 0.2);
}

.account-sidebar-nav a i {
    font-size: 1.1em;
}

.account-stats-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 20px;
    margin-bottom: 32px;
}

@media (max-width: 600px) {
    .account-stats-grid {
        grid-template-columns: 1fr;
    }
}

.stat-card {
    background: var(--surface);
    padding: 24px;
    border-radius: 20px;
    border: 1px solid var(--line);
    display: flex;
    flex-direction: column;
    gap: 8px;
    transition: transform 0.3s ease;
}

.stat-card:hover {
    transform: translateY(-5px);
}

.stat-card .label {
    font-size: 13px;
    color: var(--muted);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.stat-card .value {
    font-size: 28px;
    font-weight: 700;
    color: var(--text);
}

.section-card {
    background: var(--surface);
    padding: 32px;
    border-radius: 24px;
    border: 1px solid var(--line);
    margin-bottom: 24px;
}

.section-card-header {
    margin-bottom: 24px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.section-card h3 {
    margin-bottom: 8px;
}

.address-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 20px;
}

.address-card {
    border: 1px solid var(--line);
    padding: 24px;
    border-radius: 16px;
    position: relative;
    transition: all 0.3s ease;
}

.address-card:hover {
    border-color: var(--brand);
}

.address-card.is-default {
    border-color: var(--brand);
    background: rgba(var(--brand-rgb, 219, 137, 102), 0.05);
}

.address-badge {
    position: absolute;
    top: 24px;
    right: 24px;
    background: var(--brand);
    color: white;
    font-size: 11px;
    padding: 4px 10px;
    border-radius: 20px;
    text-transform: uppercase;
    font-weight: 700;
}

/* Modal UI */
.modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.4);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    z-index: 2000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    animation: fadeIn 0.3s ease;
}

.modal {
    background: var(--surface);
    width: 100%;
    max-width: 500px;
    border-radius: 32px;
    border: 1px solid rgba(255, 255, 255, 0.2);
    box-shadow: 0 30px 60px rgba(0, 0, 0, 0.2);
    overflow: hidden;
    animation: modalSlideUp 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

.modal-header {
    padding: 32px 32px 16px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.modal-header h3 {
    font-size: 22px;
    margin: 0;
}

.modal-close {
    background: var(--surface-soft);
    border: none;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-size: 20px;
    color: var(--muted);
    transition: all 0.2s ease;
}

.modal-close:hover {
    background: #ef4444;
    color: white;
    transform: rotate(90deg);
}

.modal-body {
    padding: 16px 32px 40px;
}

@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

@keyframes modalSlideUp {
    from { transform: translateY(30px); opacity: 0; }
    to { transform: translateY(0); opacity: 1; }
}

.address-actions {
    margin-top: 16px;
    display: flex;
    gap: 12px;
}

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

.form-group {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.form-group label {
    font-size: 14px;
    font-weight: 600;
    color: var(--text);
}

.form-group input {
    width: 100%;
    padding: 14px 16px;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: 12px;
    font-size: 14px;
    transition: all 0.2s ease;
    color: var(--text);
}

.form-group input:focus {
    outline: none;
    border-color: var(--brand);
    box-shadow: 0 0 0 4px rgba(var(--brand-rgb, 219, 137, 102), 0.1);
}

.form-group input::placeholder {
    color: var(--muted);
    opacity: 0.5;
}

@media (max-width: 992px) {
    .account-layout {
        grid-template-columns: 1fr;
    }
    
    .account-sidebar {
        position: static;
    }
    
    .account-sidebar-nav {
        flex-direction: row;
        overflow-x: auto;
        padding: 8px;
    }
    
    .account-sidebar-nav a {
        white-space: nowrap;
        padding: 10px 16px;
    }
    
    .form-grid {
        grid-template-columns: 1fr;
    }
}

/* Scroll Reveal Animations */
.reveal {
  opacity: 0;
  transform: translateY(30px);
  transition: all 0.9s cubic-bezier(0.16, 1, 0.3, 1);
  will-change: transform, opacity;
}

.reveal.reveal-visible {
  opacity: 1;
  transform: translateY(0);
}

.reveal-left {
  transform: translateX(-30px);
}

.reveal-right {
  transform: translateX(30px);
}

.reveal-zoom {
  transform: scale(0.95);
}

/* Staggered Delays */
.reveal-delay-1 { transition-delay: 0.1s; }
.reveal-delay-2 { transition-delay: 0.2s; }
.reveal-delay-3 { transition-delay: 0.3s; }
.reveal-delay-4 { transition-delay: 0.4s; }
.reveal-delay-5 { transition-delay: 0.5s; }

/* Mobile Navigation Dock */
.mobile-dock {
    display: none;
    position: fixed;
    bottom: 24px;
    left: 50%;
    transform: translateX(-50%);
    width: calc(100% - 32px);
    max-width: 420px;
    background: rgba(255, 255, 255, 0.82);
    backdrop-filter: blur(24px);
    -webkit-backdrop-filter: blur(24px);
    border: 1px solid rgba(255, 255, 255, 0.4);
    border-radius: 999px;
    padding: 6px 4px;
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.12);
    z-index: 1000;
    justify-content: space-evenly;
    align-items: center;
    transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

.dock-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    padding: 8px 0;
    width: 25%;
    border-radius: 999px;
    color: var(--text);
    text-decoration: none;
    background: none;
    border: none;
    cursor: pointer;
    transition: all 0.3s ease;
}

.dock-item span {
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    opacity: 0.7;
}

.dock-item svg {
    width: 20px;
    height: 20px;
    opacity: 0.8;
}

.dock-item:hover, .dock-item.active {
    background: none;
    color: var(--brand);
}

.dock-item:hover svg, .dock-item.active svg {
    opacity: 1;
    transform: translateY(-1px);
}

.dock-item:hover span, .dock-item.active span {
    opacity: 1;
}

.dock-cart-icon {
    position: relative;
}

.dock-badge {
    position: absolute;
    top: -6px;
    right: -8px;
    background: var(--brand);
    color: white;
    font-size: 10px;
    font-weight: 700;
    min-width: 16px;
    height: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    padding: 0 4px;
    border: 2px solid #fff;
}

@media (max-width: 768px) {
    .mobile-dock {
        display: flex;
    }
    
    /* Hide site footer to prevent overlap padding if needed, or add bottom padding to body */
    body {
        padding-bottom: 100px;
    }
}

/* Ensure admin pages don't show the user dock */
.admin-body .mobile-dock {
    display: none !important;
}

/* Improved Cart Mobile Visibility */
@media (max-width: 768px) {
    .cart-layout {
        grid-template-columns: 1fr;
        gap: 32px;
    }
    
    .cart-item {
        grid-template-columns: 120px 1fr;
        gap: 20px;
        padding: 20px;
        align-items: start;
    }
    
    .cart-item img {
        width: 120px;
        height: 120px;
        border-radius: 16px;
    }
    
    .cart-item h3 {
        font-size: 15px;
        line-height: 1.4;
        margin-bottom: 4px;
    }
    
    .cart-item-price {
        font-size: 16px;
        font-weight: 700;
        color: var(--brand);
    }
    
    .qty-controls {
        margin-top: 12px;
        transform: scale(0.9);
        transform-origin: left center;
    }
}

@media (max-width: 480px) {
    .cart-item {
        grid-template-columns: 100px 1fr;
        padding: 16px;
        gap: 16px;
    }
    
    .cart-item img {
        width: 100px;
        height: 100px;
    }
    
    .cart-summary {
        padding: 20px;
    }
}

/* ========================================================================== */
/* Pack My Cake storefront v2                                                 */
/* ========================================================================== */

:root {
  --pmc-ink: #181116;
  --pmc-text: #241c21;
  --pmc-muted: #6e5f66;
  --pmc-pink: #000000;
  --pmc-pink-primary: #000000;
  --pmc-pink-vibrant: #111111;
  --pmc-pink-hover: #1f1f1f;
  --pmc-pink-dark: #000000;
  --pmc-pink-soft: #eeeeee;
  --pmc-pink-pastel: #f8f8f8;
  --pmc-blush: #f8f8f8;
  --pmc-cream: #ffffff;
  --pmc-cocoa: #000000;
  --pmc-plum: #000000;
  --pmc-blue: #e0f2fe;
  --pmc-line: #e5e5e5;
  --pmc-white: #ffffff;
  --pmc-shadow: 0 18px 60px rgba(0, 0, 0, .18);
  --pmc-serif: 'Playfair Display', Georgia, serif;
  --pmc-sans: 'Plus Jakarta Sans', 'DM Sans', system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
  --brand: var(--pmc-pink);
  --brand-dark: var(--pmc-pink-dark);
  --surface-soft: var(--pmc-blush);
  --line: var(--pmc-line);
  --text: var(--pmc-ink);
  --muted: var(--pmc-muted);
}

body:not(.admin-body) {
  --site-gutter: clamp(24px, 5vw, 96px);
  color: var(--pmc-ink);
  background: var(--pmc-white);
  font-family: var(--pmc-sans);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

body:not(.admin-body) .container {
  width: calc(100% - 2 * var(--site-gutter));
  max-width: none;
  margin-inline: auto;
  padding: 0;
}

.skip-link {
  position: fixed;
  left: 16px;
  top: -70px;
  z-index: 999;
  padding: 12px 18px;
  background: var(--pmc-ink);
  color: white;
  border-radius: 4px;
}

.skip-link:focus { top: 16px; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }

.announcement-bar {
  background: #000000;
  color: #fff;
  min-height: 34px;
  display: flex;
  align-items: center;
  font-size: 11px;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.announcement-inner { display: flex; align-items: center; justify-content: space-between; gap: 20px; }
.announcement-inner a { color: #ffffff; text-decoration: underline; text-underline-offset: 3px; font-weight: 700; }

.site-header.v2-header {
  position: sticky;
  inset-block-start: 0;
  z-index: 60;
  border: 0;
  border-bottom: 1px solid var(--pmc-line);
  box-shadow: 0 4px 24px rgba(0, 0, 0, .06);
  background: rgba(255,255,255,.98);
  backdrop-filter: blur(14px);
}

.header-main { min-height: 82px; display: grid; grid-template-columns: 265px minmax(280px, 680px) auto; align-items: center; justify-content: space-between; gap: 42px; position: relative; z-index: 50; }
.brand-v2 { display: inline-flex; align-items: center; gap: 10px; min-width: 0; }
.brand-v2 img { width: 50px; height: 50px; object-fit: contain; }
.brand-v2 span { display: flex; flex-direction: column; line-height: 1; }
.brand-v2 strong { font-family: var(--pmc-sans); font-weight: 800; letter-spacing: .06em; font-size: 19px; color: var(--pmc-ink); }
.brand-v2 small { color: var(--pmc-pink); font-size: 10.5px; font-weight: 800; letter-spacing: .16em; margin-top: 5px; }

.header-search { height: 46px; border: 1.5px solid #e5e5e5; border-radius: 100px; display: grid; grid-template-columns: auto 1fr auto; align-items: center; padding-left: 17px; color: #766e6a; background: #fff; position: relative; z-index: 100; }
.header-search:focus-within { border-color: var(--pmc-pink); box-shadow: 0 0 0 3px rgba(0, 0, 0, .16); }
.header-search input { border: 0; outline: 0; padding: 0 14px; font: inherit; font-size: 14px; width: 100%; color: var(--pmc-ink); background: transparent; -webkit-appearance: none; appearance: none; }
.header-search input:focus, .header-search input:focus-visible { border: 0 !important; outline: 0 !important; outline: none !important; box-shadow: none !important; }
.header-search button { align-self: stretch; border: 0; border-left: 1.5px solid #e5e5e5; background: transparent; padding: 0 20px; font: inherit; font-weight: 800; font-size: 13px; color: var(--pmc-pink); cursor: pointer; transition: color 0.2s ease; }
.header-search button:hover { color: var(--pmc-pink-dark); }
.search-suggestions { position: absolute; left: 0; right: 0; top: calc(100% + 9px); padding: 8px; background: #fff; border: 1.5px solid var(--pmc-line); border-radius: 16px; box-shadow: var(--pmc-shadow); max-height: 390px; overflow: auto; z-index: 99999; }
.search-suggestion { display: grid; grid-template-columns: 54px 1fr auto; gap: 12px; align-items: center; padding: 8px; border-radius: 10px; }
.search-suggestion:hover, .search-suggestion:focus { background: var(--pmc-blush); }
.search-suggestion img { width: 54px; height: 54px; border-radius: 8px; object-fit: cover; background: #f5f5f5; border: 1px solid #e5e5e5; }
.search-suggestion strong { font-size: 13px; line-height: 1.35; font-weight: 700; color: var(--pmc-ink); }
.search-suggestion small { display: block; color: var(--pmc-muted); font-size: 11.5px; margin-top: 3px; }
.search-suggestion b { font-size: 13.5px; color: var(--pmc-pink-dark); font-weight: 800; }

.v2-header .header-actions { display: flex; align-items: center; justify-content: flex-end; gap: 7px; }
.v2-header .icon-btn, .v2-header .cart-link { width: 42px; height: 42px; border-radius: 50%; color: var(--pmc-ink); display: inline-flex; align-items: center; justify-content: center; position: relative; transition: all 0.2s ease; }
.v2-header .icon-btn:hover, .v2-header .cart-link:hover { background: var(--pmc-blush); color: var(--pmc-pink-dark); transform: scale(1.05); }
.v2-header .cart-badge { top: 0; right: -2px; background: var(--pmc-pink); color: #181116; font-size: 11px; font-weight: 800; }
.v2-header .hamburger { display: none; }
.v2-header .mobile-search-trigger { display: none; }
/* User Account Dropdown Menu */
.user-header-menu {
  position: relative;
  display: inline-flex;
  align-items: center;
}

.user-dropdown-toggle,
.v2-header .icon-btn.user-dropdown-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  cursor: pointer;
  background: transparent;
  border: 1px solid transparent;
  width: auto;
  min-width: 44px;
  height: 42px;
  padding: 0 10px 0 8px;
  border-radius: 999px;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
  position: relative;
  color: var(--pmc-ink);
}

.user-dropdown-toggle:hover,
.user-dropdown-toggle.active,
.user-dropdown-wrapper:hover .user-dropdown-toggle {
  background: var(--pmc-blush, #fbeeee);
  border-color: #f2dedb;
  color: var(--pmc-pink-dark, #ba6b65);
  transform: none;
}

.user-dropdown-caret {
  display: inline-flex;
  align-items: center;
  color: var(--pmc-muted, #766a6e);
  transition: transform 0.22s ease, color 0.22s ease;
  margin-left: -1px;
}

.user-dropdown-toggle.active .user-dropdown-caret,
.user-dropdown-wrapper:hover .user-dropdown-caret {
  transform: rotate(180deg);
  color: var(--pmc-pink-dark, #ba6b65);
}

.user-dropdown-menu {
  position: absolute;
  top: calc(100% + 12px);
  right: 0;
  min-width: 270px;
  background: #ffffff;
  border-radius: 20px;
  border: 1.5px solid #eadad7;
  box-shadow: 0 20px 48px rgba(35, 27, 25, 0.16), 0 4px 14px rgba(186, 107, 101, 0.1);
  overflow: visible;
  z-index: 1000;
  display: flex;
  flex-direction: column;
  animation: userDropdownIn 0.22s cubic-bezier(0.16, 1, 0.3, 1);
  box-sizing: border-box;
}

/* Invisible bridge so mouse never drops hover crossing the 12px gap */
.user-dropdown-menu::before {
  content: '';
  position: absolute;
  top: -14px;
  left: 0;
  right: 0;
  height: 14px;
  background: transparent;
}

.user-dropdown-menu[hidden] {
  display: none !important;
}

@media (hover: hover) and (pointer: fine) {
  .user-dropdown-wrapper:hover .user-dropdown-menu {
    display: flex !important;
  }
}

@keyframes userDropdownIn {
  from {
    opacity: 0;
    transform: translateY(-8px) scale(0.97);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

.user-dropdown-header {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px 18px;
  background: linear-gradient(135deg, #fff9f8 0%, #fef2f0 100%);
  border-bottom: 1px solid #f2e3e0;
  border-radius: 18px 18px 0 0;
}

.user-dropdown-avatar {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: linear-gradient(135deg, #f2dedb 0%, #fad0cb 100%);
  color: var(--pmc-pink-dark, #ba6b65);
  font-weight: 800;
  font-size: 16px;
  display: grid;
  place-items: center;
  box-shadow: inset 0 0 0 1px rgba(186, 107, 101, 0.25), 0 4px 10px rgba(186, 107, 101, 0.15);
  flex-shrink: 0;
}

.user-dropdown-info {
  display: flex;
  flex-direction: column;
  min-width: 0;
  flex: 1;
}

.user-dropdown-name {
  font-size: 14.5px;
  font-weight: 750;
  color: var(--pmc-cocoa, #231b19);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  letter-spacing: -0.015em;
  line-height: 1.3;
}

.user-dropdown-email {
  font-size: 12px;
  color: #766a6e;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin-top: 1px;
}

.user-role-badge {
  font-size: 9.5px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  background: var(--pmc-pink-dark, #ba6b65);
  color: #ffffff;
  padding: 2px 7px;
  border-radius: 999px;
  align-self: flex-start;
  box-shadow: 0 2px 6px rgba(186, 107, 101, 0.25);
}

.user-dropdown-nav {
  padding: 8px 6px;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.user-dropdown-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 9px 14px;
  border-radius: 12px;
  font-size: 13.5px;
  font-weight: 600;
  color: #3b2b2e;
  text-decoration: none;
  transition: all 0.18s cubic-bezier(0.16, 1, 0.3, 1);
}

.user-dropdown-item svg {
  color: #8c797d;
  flex-shrink: 0;
  transition: color 0.18s ease;
}

.user-dropdown-item:hover {
  background: #fdf2f1;
  color: var(--pmc-pink-dark, #ba6b65);
  padding-left: 18px;
}

.user-dropdown-item:hover svg {
  color: var(--pmc-pink-dark, #ba6b65);
}

.user-dropdown-admin {
  background: #fff8f7;
  color: var(--pmc-pink-dark, #ba6b65);
  font-weight: 700;
}
.user-dropdown-admin svg {
  color: var(--pmc-pink-dark, #ba6b65);
}

.user-dropdown-divider {
  height: 1px;
  background: #f0e1de;
  margin: 4px 12px;
}

.user-dropdown-footer {
  padding: 6px 6px 8px;
  border-radius: 0 0 18px 18px;
}

.user-dropdown-item.is-logout {
  color: #dc2626;
  font-weight: 700;
}

.user-dropdown-item.is-logout svg {
  color: #ef4444;
}

.user-dropdown-item.is-logout:hover {
  background: #fef2f2;
  color: #b91c1c;
  padding-left: 18px;
}

.user-dropdown-item.is-logout:hover svg {
  color: #b91c1c;
}

@media (max-width: 600px) {
  .user-dropdown-menu {
    right: -8px;
    min-width: 250px;
    max-width: calc(100vw - 28px);
  }
}

.category-nav { border-top: 1px solid #e5e5e5; background: #ffffff; position: relative; z-index: 10; }
.category-nav-inner { display: flex; align-items: center; justify-content: center; gap: clamp(22px, 2.2vw, 42px); min-height: 48px; overflow-x: auto; scrollbar-width: none; }
.category-nav-inner::-webkit-scrollbar { display: none; }
.category-nav a { font-size: 13.5px; font-weight: 700; white-space: nowrap; position: relative; color: var(--pmc-text); transition: color 0.18s ease; }
.category-nav a:hover { color: var(--pmc-pink-dark); }
.category-nav a::after { content: ''; position: absolute; height: 2.5px; left: 50%; right: 50%; bottom: -6px; background: var(--pmc-pink); transition: .2s; border-radius: 999px; }
.category-nav a:hover::after, .category-nav a.active::after { left: 0; right: 0; }

.hero-v2 { background: #ffffff; overflow: hidden; padding: 12px 0 16px; }
.hero-v2-grid { min-height: 600px; display: grid; grid-template-columns: .83fr 1.17fr; align-items: center; background: linear-gradient(135deg, #ffffff 0%, #f7f7f7 50%, #f0f0f0 100%); border: 1.5px solid #e5e5e5; border-radius: 32px; overflow: hidden; box-shadow: 0 24px 65px rgba(0, 0, 0, 0.12); }
.hero-copy { padding: 65px clamp(30px,5vw,88px) 58px 48px; position: relative; z-index: 2; }
.kicker, .eyebrow { display: inline-flex; align-items: center; gap: 8px; color: var(--pmc-pink-dark); font-weight: 800; font-size: 11px; line-height: 1.3; letter-spacing: .16em; text-transform: uppercase; }
.kicker::before { content: ''; width: 22px; height: 2px; background: currentColor; border-radius: 999px; }
.kicker-light { color: #eeeeee; }
.hero-copy h1, .section-heading h2, .find-box-copy h2, .audience-card h2, .custom-copy h2, .faq-grid h2, .newsletter-inner h2, .collection-hero h1, .page-hero h1 {
  font-family: var(--pmc-sans);
  letter-spacing: -.035em;
  font-weight: 800;
  line-height: 1.05;
}
.hero-copy h1 { font-size: clamp(48px, 4.6vw, 72px); margin: 22px 0 24px; color: var(--pmc-ink); }
.hero-copy h1 em, .custom-copy h2 em { color: var(--pmc-pink-dark); font-weight: 800; }
.hero-copy > p { color: var(--pmc-muted); font-size: 16px; max-width: 570px; margin: 0 0 31px; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 12px; }
.btn { min-height: 48px; border-radius: 999px; padding: 0 26px; display: inline-flex; align-items: center; justify-content: center; gap: 12px; border: 1.5px solid transparent; font-family: var(--pmc-sans); font-weight: 700; font-size: 13.5px; letter-spacing: .01em; cursor: pointer; transition: transform .18s ease, box-shadow .18s ease, background .18s ease, border-color .18s ease; }
.btn:hover { transform: translateY(-2px); }
.btn-primary { background: #000000; color: #181116; border-color: transparent; box-shadow: 0 10px 25px rgba(0, 0, 0, 0.35); font-weight: 800; }
.btn-primary:hover { background: #1f1f1f; border-color: transparent; color: #181116; box-shadow: 0 14px 32px rgba(0, 0, 0, 0.45); }
.btn-secondary { color: var(--pmc-ink); background: #ffffff; border-color: #e5e5e5; box-shadow: 0 4px 14px rgba(0, 0, 0, 0.1); }
.btn-secondary:hover { background: #f5f5f5; border-color: var(--pmc-pink); color: var(--pmc-pink-dark); box-shadow: 0 6px 20px rgba(0, 0, 0, 0.25); }
.btn-white { color: var(--pmc-pink-dark); background: #fff; border-color: #fff; font-weight: 800; }
.btn-block { width: 100%; }
.hero-proof { display: flex; align-items: flex-start; gap: 30px; margin-top: 43px; color: var(--pmc-muted); font-size: 12px; line-height: 1.5; }
.hero-proof span { display: grid; padding-left: 14px; border-left: 2px solid #e5e5e5; }
.hero-proof b { color: var(--pmc-ink); text-transform: uppercase; letter-spacing: .08em; font-size: 12px; font-weight: 800; }

.hero-product-stage { min-height: 600px; align-self: stretch; position: relative; background: linear-gradient(145deg, #0a0a0a 0%, #141414 50%, #1f1f1f 100%); border-radius: 26px; margin: 18px 18px 18px 0; overflow: hidden; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.6), 0 20px 50px rgba(0, 0, 0, 0.08); display: flex; align-items: center; justify-content: center; }
.hero-product-stage::before { content: ''; position: absolute; inset: 0; background-image: linear-gradient(rgba(255, 255, 255, 0.45) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, 0.45) 1px, transparent 1px); background-size: 46px 46px; mask-image: radial-gradient(circle at 60% 50%, black 45%, transparent 85%); pointer-events: none; }
.stage-copy { position: absolute; top: 40px; left: 44px; z-index: 5; color: #000000; }
.stage-copy span { display: block; font-family: var(--pmc-sans); font-size: 16px; font-weight: 700; color: #000000; margin-bottom: 2px; }
.stage-copy strong { font-family: var(--pmc-sans); letter-spacing: .18em; font-weight: 800; font-size: 11px; text-transform: uppercase; color: #000000; }
.hero-box { margin: 0; position: absolute; filter: drop-shadow(0 35px 30px rgba(0, 0, 0, 0.18)); }
.hero-box img { width: 100%; height: 100%; object-fit: contain; }
.hero-box-main { width: 77%; height: 67%; right: 0; bottom: 4%; transform: rotate(-2deg); z-index: 2; }
.hero-box-small { width: 34%; height: 34%; left: 1%; bottom: 6%; transform: rotate(5deg); z-index: 1; opacity: .97; }
.stage-seal { position: absolute; right: 30px; top: 36px; z-index: 5; width: 88px; height: 88px; border: 1.5px solid rgba(0, 0, 0, 0.35); border-radius: 50%; display: grid; place-items: center; text-align: center; font-size: 8px; font-weight: 800; line-height: 1.5; letter-spacing: .12em; transform: rotate(8deg); background: rgba(255, 255, 255, 0.7); backdrop-filter: blur(6px); color: var(--pmc-pink-dark); box-shadow: 0 4px 14px rgba(0, 0, 0, 0.12); }

.trust-strip { border-bottom: 1px solid var(--pmc-line); background: #ffffff; }
.trust-strip-grid { display: grid; grid-template-columns: repeat(4,1fr); padding-block: 22px; }
.trust-strip-grid > div { display: flex; align-items: center; justify-content: center; gap: 14px; padding-inline: 22px; border-right: 1px solid var(--pmc-line); }
.trust-strip-grid > div:last-child { border: 0; }
.trust-icon { width: 36px; height: 36px; border: 1.5px solid #e5e5e5; background: #f5f5f5; border-radius: 50%; display: grid; place-items: center; color: var(--pmc-pink); font-size: 15px; }
.trust-strip p { margin: 0; display: grid; }
.trust-strip strong { font-size: 13.5px; font-weight: 700; color: var(--pmc-ink); }
.trust-strip small { color: var(--pmc-muted); font-size: 12px; margin-top: 2px; }

.section { padding-block: 76px; }
.section-heading { margin-bottom: 39px; }
.section-heading h2 { font-size: clamp(34px,3.4vw,50px); margin: 13px 0 0; font-weight: 800; color: var(--pmc-ink); }
.split-heading { display: flex; justify-content: space-between; align-items: end; gap: 40px; }
.split-heading > p { max-width: 390px; color: var(--pmc-muted); font-size: 14.5px; margin: 0 0 7px; }
.text-link { font-size: 14px; font-weight: 700; color: var(--pmc-pink-dark); border-bottom: 1.5px solid currentColor; padding-bottom: 4px; white-space: nowrap; text-decoration: none; display: inline-flex; align-items: center; gap: 6px; transition: color 0.2s ease; }
.text-link:hover { color: var(--pmc-pink); }
.section-heading-row { display: flex; justify-content: space-between; gap: 40px; align-items: end; }
.section-heading-row h2 { max-width: 720px; }
.centered { text-align: center; }
.centered .kicker { justify-content: center; }
.centered > p { color: var(--pmc-muted); font-size: 13px; }

.category-section { background: #f8f8f8; }
.category-showcase { 
  display: grid; 
  grid-template-columns: repeat(4, 1fr); 
  gap: 20px; 
}
.category-tile { 
  position: relative; 
  min-height: 380px; 
  background: #ffffff; 
  border: 1.5px solid #e5e5e5;
  border-radius: 24px;
  overflow: hidden; 
  padding: 26px 22px; 
  display: flex; 
  flex-direction: column; 
  justify-content: flex-end; 
  text-decoration: none;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.06);
  transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.3s ease, border-color 0.3s ease;
}
.category-tile:hover {
  transform: translateY(-4px);
  border-color: var(--pmc-pink);
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.15);
}
.category-tile::after { 
  content: ''; 
  position: absolute; 
  inset: 20% 0 0; 
  background: linear-gradient(transparent 0%, rgba(24, 17, 22, 0.88) 100%); 
  z-index: 1; 
  pointer-events: none;
}
.category-tile img { 
  position: absolute; 
  inset: 0; 
  width: 100%; 
  height: 100%; 
  object-fit: cover; 
  transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1); 
}
.category-tile:hover img { 
  transform: scale(1.06); 
}
.category-tile h3, .category-tile > span { 
  position: relative; 
  z-index: 2; 
  color: #fff; 
}
.category-tile h3 { 
  font-family: var(--pmc-sans); 
  font-weight: 800;
  font-size: 24px; 
  margin: 0 0 6px; 
  line-height: 1.15; 
  letter-spacing: -0.02em;
}
.category-tile > span { 
  font-size: 12px; 
  font-weight: 700; 
  color: #888888;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  transition: color 0.2s ease, transform 0.2s ease;
}
.category-tile:hover > span {
  color: #ffffff;
  transform: translateX(3px);
}
.category-tile .category-count { 
  position: absolute; 
  top: 20px; 
  left: 20px; 
  background: rgba(255, 255, 255, 0.95); 
  backdrop-filter: blur(8px);
  color: var(--pmc-ink); 
  border: 1px solid #e5e5e5;
  padding: 6px 12px; 
  border-radius: 999px;
  font-size: 10px; 
  font-weight: 800;
  text-transform: uppercase; 
  letter-spacing: 0.06em; 
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  z-index: 2;
}

.products-section { 
  background: #ffffff; 
  padding-block: 70px 90px;
}
.product-grid { 
  display: grid; 
  grid-template-columns: repeat(4, minmax(0, 1fr)); 
  gap: 24px; 
}
.product-card { 
  min-width: 0; 
  border: 0; 
  box-shadow: none; 
  background: transparent; 
  display: flex; 
  flex-direction: column; 
  transition: transform 0.25s ease;
}
.product-card:hover {
  transform: translateY(-4px);
}
.product-card > a:first-child, .product-card-image { 
  display: flex; 
  align-items: center;
  justify-content: center;
  aspect-ratio: 1 / 1; 
  overflow: hidden; 
  background: #ffffff; 
  border: 1.5px solid #e5e5e5;
  border-radius: 22px; 
  position: relative; 
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.04);
  padding: 18px;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.product-card:hover > a:first-child, .product-card:hover .product-card-image {
  border-color: var(--pmc-pink);
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.12);
}
.product-card > a:first-child::after, .product-card-image::after { 
  content: 'View details ↗'; 
  position: absolute; 
  left: 14px; 
  right: 14px; 
  bottom: 14px; 
  padding: 10px 14px; 
  background: #000000; 
  backdrop-filter: blur(8px); 
  color: #ffffff;
  border-radius: 999px;
  text-align: center; 
  font-size: 11px; 
  font-weight: 800; 
  letter-spacing: 0.06em; 
  text-transform: uppercase; 
  transform: translateY(150%); 
  transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1); 
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.35);
  z-index: 3;
}
.product-card:hover > a:first-child::after, .product-card:hover .product-card-image::after { 
  transform: translateY(0); 
}
.product-card > a:first-child img, .product-card-image img, .product-card > img { 
  width: 100%; 
  height: 100%; 
  object-fit: contain; 
  transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1); 
  filter: drop-shadow(0 8px 16px rgba(0, 0, 0, 0.08));
}
.product-card:hover > a:first-child img, .product-card:hover .product-card-image img { 
  transform: scale(1.06); 
}
.product-card-body { 
  display: flex; 
  flex-direction: column; 
  flex: 1; 
  padding: 16px 2px 0; 
}
.product-card-body > small { 
  color: var(--pmc-pink); 
  font-size: 11px; 
  font-weight: 800; 
  letter-spacing: 0.12em; 
  text-transform: uppercase; 
  margin-bottom: 2px;
}
.product-card h3 { 
  font-size: 15px; 
  line-height: 1.35; 
  font-weight: 700; 
  min-height: 42px; 
  margin: 4px 0 8px; 
  color: var(--pmc-ink);
}
.product-card h3 a {
  color: var(--pmc-ink);
  text-decoration: none;
  transition: color 0.15s ease;
}
.product-card h3 a:hover {
  color: var(--pmc-pink);
}
.product-card-body > p { 
  font-size: 13px; 
  color: var(--pmc-muted); 
  margin: 0 0 10px; 
  line-height: 1.4;
}
.product-specs { 
  display: flex; 
  flex-wrap: wrap; 
  gap: 6px; 
  margin: 0 0 14px; 
}
.product-specs span { 
  padding: 4px 10px; 
  background: #f8f8f8; 
  border: 1px solid #e5e5e5; 
  border-radius: 999px;
  color: #9d174d; 
  font-size: 11px; 
  font-weight: 700;
  letter-spacing: 0.02em;
}
.product-meta { 
  display: flex; 
  align-items: center; 
  justify-content: space-between; 
  gap: 12px; 
  margin-top: auto; 
  padding-top: 4px;
}
.product-meta strong { 
  font-family: var(--pmc-sans); 
  font-weight: 800;
  font-size: 18px; 
  color: var(--pmc-ink);
  letter-spacing: -0.01em;
}
.quick-add, .product-meta .btn-small { 
  min-height: 38px; 
  background: #ffffff; 
  color: var(--pmc-ink); 
  border: 1.5px solid #e5e5e5; 
  border-radius: 999px; 
  padding: 0 18px; 
  font-family: var(--pmc-sans); 
  font-size: 12px; 
  font-weight: 800; 
  cursor: pointer; 
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
  transition: all 0.2s ease;
}
.quick-add:hover, .product-meta .btn-small:hover { 
  background: #000000; 
  color: #ffffff; 
  border-color: transparent;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.35);
  transform: translateY(-1px);
}

.product-badge {
  position: absolute;
  top: 12px;
  left: 12px;
  z-index: 2;
  background: linear-gradient(135deg, var(--pmc-pink, #000000), var(--pmc-pink-hover, #1f1f1f));
  color: #181116;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 4px 10px;
  border-radius: 999px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.35);
}

.price-wrap {
  display: flex;
  align-items: baseline;
  gap: 6px;
  flex-wrap: wrap;
}

.compare-price {
  font-size: 13px;
  color: var(--pmc-muted, #7c6a66);
  opacity: 0.75;
  font-weight: normal;
}

/* ==========================================================================
   Find Box Section (Dual-tone unified capsule card matching user reference)
   ========================================================================== */
.find-box-section {
  background: #ffffff;
  padding-block: 48px 88px;
}

.find-box-grid {
  background: #000000;
  border-radius: 36px;
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.16);
  display: grid;
  grid-template-columns: 1fr 1.15fr;
  align-items: stretch;
  overflow: hidden;
  padding: 0;
  margin: 0 auto;
  max-width: 1140px;
  border: 1px solid rgba(0, 0, 0, 0.15);
}

.find-box-copy {
  background: #f2b7b3;
  padding: clamp(44px, 4.8vw, 64px) clamp(36px, 4.2vw, 56px);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 28px;
  position: relative;
  z-index: 2;
}

.find-box-kicker {
  display: flex;
  align-items: center;
  gap: 10px;
  color: #732a2f;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  margin-bottom: 22px;
}
.find-box-kicker::before {
  content: "";
  display: inline-block;
  width: 22px;
  height: 2px;
  background: #732a2f;
  border-radius: 999px;
}

.find-box-copy h2 {
  font-family: var(--pmc-sans);
  font-weight: 800;
  font-size: clamp(34px, 3.8vw, 48px);
  line-height: 1.05;
  color: #181116;
  letter-spacing: -0.035em;
  margin: 0 0 16px 0;
}

.find-box-copy p {
  color: #382124;
  font-size: 14.5px;
  line-height: 1.55;
  max-width: 380px;
  margin: 0;
}

.dimension-wireframe {
  margin-top: auto;
  padding-top: 20px;
  width: 100%;
  max-width: 290px;
}
.dimension-wireframe svg {
  width: 100%;
  height: auto;
  display: block;
}

/* Right Column - Vibrant Pastel Form Side */
.box-finder {
  background: #f8f8f8;
  color: var(--pmc-ink);
  padding: clamp(40px, 4.5vw, 56px) clamp(36px, 4.2vw, 56px) clamp(32px, 3.8vw, 44px);
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  border-radius: 0;
  border-left: 1px solid #e5e5e5;
  box-shadow: none;
  margin: 0;
  width: 100%;
  position: relative;
  z-index: 2;
}

.finder-progress {
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 1px solid #e5e5e5;
  padding-bottom: 14px;
  margin-bottom: 22px;
}
.finder-progress span:first-child {
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.12em;
  color: #8f707f;
  text-transform: uppercase;
}
.finder-step {
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.06em;
  color: var(--pmc-pink);
}

.box-finder fieldset {
  border: 0;
  margin: 0 0 20px;
  padding: 0;
}
.box-finder legend {
  font-family: var(--pmc-sans);
  font-weight: 800;
  font-size: clamp(23px, 2.2vw, 28px);
  color: var(--pmc-ink);
  margin-bottom: 16px;
  letter-spacing: -0.02em;
  line-height: 1.2;
}

.choice-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
}
.choice-grid label {
  background: #ffffff;
  border: 1.5px solid #e5e5e5;
  border-radius: 14px;
  padding: 14px 8px 12px;
  min-height: 82px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  cursor: pointer;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.03);
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
  position: relative;
}
.choice-grid label:hover {
  border-color: #ffffff;
  background: #f5f5f5;
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.1);
}
.choice-grid label:has(input:checked) {
  border: 2px solid var(--pmc-pink);
  background: #f5f5f5;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.18);
  transform: none;
}
.choice-grid input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}
.choice-grid label span {
  font-size: 24px;
  line-height: 1;
}
.choice-grid label strong {
  font-size: 12.5px;
  font-weight: 700;
  color: var(--pmc-ink);
}

.finder-label {
  display: block;
  font-size: 11.5px;
  font-weight: 800;
  color: var(--pmc-ink);
  margin-bottom: 8px;
  letter-spacing: 0.01em;
}

.finder-select-wrap {
  position: relative;
  width: 100%;
  margin-bottom: 14px;
}
.finder-select-wrap select {
  width: 100%;
  height: 48px;
  border-radius: 999px;
  background-color: #ffffff;
  border: 1.5px solid #e5e5e5;
  font-family: var(--pmc-sans);
  font-size: 14px;
  font-weight: 600;
  color: var(--pmc-ink);
  padding: 0 20px;
  padding-right: 44px;
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23000000' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 18px center;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.03);
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.finder-select-wrap select:focus {
  border-color: var(--pmc-pink);
  outline: none;
  box-shadow: 0 0 0 3px rgba(0, 0, 0, 0.16);
}

.btn-finder-submit {
  width: 100%;
  height: 48px;
  border-radius: 999px;
  background: #000000;
  color: #ffffff;
  border: 0;
  font-family: var(--pmc-sans);
  font-size: 14px;
  font-weight: 800;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  cursor: pointer;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35);
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
  margin-top: 4px;
}
.btn-finder-submit:hover {
  background: #1f1f1f;
  color: #ffffff;
  transform: translateY(-2px);
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.45);
}
.btn-finder-submit:active {
  transform: translateY(0);
}

.finder-note {
  font-size: 11.5px;
  color: var(--pmc-muted);
  line-height: 1.45;
  margin: 14px 0 0 0;
  text-align: left;
}

@media (max-width: 960px) {
  .find-box-grid {
    grid-template-columns: 1fr;
    border-radius: 28px;
    width: min(100% - 24px, 1140px);
  }
  .find-box-copy {
    padding: 38px 24px 28px;
  }
  .box-finder {
    padding: 32px 24px 34px;
    border-top: 1px solid rgba(32, 21, 24, 0.06);
  }
}

/* ==========================================================================
   Size Section & Size Grid (Enclosed capsule card with clean balanced cells)
   ========================================================================== */
.size-section {
  background: #ffffff;
  padding-block: 56px 76px;
}

.size-section .section-heading {
  margin-bottom: 36px;
  text-align: center;
}

.size-section .kicker {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  color: var(--pmc-pink);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  margin-bottom: 12px;
}
.size-section .kicker::before {
  content: "";
  display: inline-block;
  width: 20px;
  height: 2px;
  background: currentColor;
  border-radius: 999px;
}

.size-section .section-heading h2 {
  font-family: var(--pmc-sans);
  font-weight: 800;
  font-size: clamp(30px, 3.4vw, 42px);
  color: var(--pmc-ink);
  letter-spacing: -0.035em;
  margin: 0 0 10px 0;
}

.size-section .section-heading p {
  color: var(--pmc-muted);
  font-size: 14.5px;
  margin: 0 auto;
  max-width: 520px;
  line-height: 1.5;
}

.size-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  background: #ffffff;
  border: 1.5px solid #e5e5e5;
  border-radius: 20px;
  overflow: hidden;
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.05);
  max-width: 1140px;
  margin: 0 auto;
}

.size-grid a {
  min-height: 116px;
  padding: clamp(24px, 2.4vw, 30px) clamp(16px, 1.8vw, 24px);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  border-right: 1px solid #e5e5e5;
  border-top: 0;
  border-left: 0;
  border-bottom: 0;
  position: relative;
  text-decoration: none;
  background: #ffffff;
  transition: background 0.2s ease;
}

.size-grid a:last-child {
  border-right: none;
}

.size-grid a:hover {
  background: #f8f8f8;
}

.size-grid strong {
  font-family: var(--pmc-sans);
  font-size: clamp(17px, 1.6vw, 21px);
  font-weight: 800;
  line-height: 1.15;
  color: var(--pmc-ink);
  letter-spacing: -0.025em;
  display: block;
}

.size-grid small {
  display: block;
  font-size: 11.5px;
  font-weight: 600;
  color: var(--pmc-muted);
  margin-top: 6px;
  letter-spacing: 0.01em;
}

.size-grid span {
  position: absolute;
  right: 18px;
  top: 18px;
  color: var(--pmc-pink);
  font-size: 15px;
  font-weight: 800;
  line-height: 1;
  transition: transform 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}

.size-grid a:hover span {
  transform: translateX(4px);
}

.audience-section { padding-block: 28px 48px; }
.audience-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.audience-card {
  min-height: 480px;
  padding: clamp(38px, 4.2vw, 56px);
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
  border-radius: 28px;
  box-shadow: 0 14px 38px rgba(75, 44, 49, 0.08);
  transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.35s ease;
}
.audience-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 20px 48px rgba(75, 44, 49, 0.12);
}
.audience-card-content,
.audience-card > div:first-child {
  position: relative;
  z-index: 2;
  max-width: 375px;
}
.audience-card .kicker {
  display: inline-block;
  margin-bottom: 12px;
  font-size: 11.5px;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #ba6b65;
}
.audience-card h2 {
  font-family: var(--pmc-sans);
  font-size: clamp(30px, 2.7vw, 42px);
  font-weight: 800;
  line-height: 1.14;
  letter-spacing: -0.025em;
  margin: 0 0 16px;
  color: #181116;
}
.audience-card p {
  font-size: 14.5px;
  max-width: 340px;
  margin-bottom: 28px;
  line-height: 1.58;
  color: #4b3d42;
  font-weight: 500;
}

/* Card 1: Home Bakers (01.png full card background) */
.home-baker-card {
  background-color: #fbf7f5;
  background-image:
    linear-gradient(90deg, rgba(254, 251, 249, 0.96) 0%, rgba(254, 251, 249, 0.90) 38%, rgba(254, 251, 249, 0.35) 68%, rgba(254, 251, 249, 0) 86%),
    url('bottomsectionimgs/01.png');
  background-repeat: no-repeat;
  background-position: right center;
  background-size: cover;
  border: 1px solid #f0dedb;
  color: #181116;
}

/* Card 2: Bakeries & Studios (02.png full card background) */
.wholesale-card {
  background-color: #f7e6e2;
  background-image:
    linear-gradient(90deg, rgba(246, 228, 223, 0.97) 0%, rgba(246, 228, 223, 0.90) 40%, rgba(246, 228, 223, 0.35) 68%, rgba(246, 228, 223, 0) 86%),
    url('bottomsectionimgs/02.png');
  background-repeat: no-repeat;
  background-position: right center;
  background-size: cover;
  border: 1px solid #ebd3cd;
  color: #181116;
}
.wholesale-card h2 { color: #181116; }
.wholesale-card p { color: #4b3d42; }
.wholesale-card .kicker { color: #a0544f; }

/* Audience card buttons */
.audience-card .btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 0 24px;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: -0.01em;
  text-decoration: none;
  transition: all 0.25s ease;
}
.home-baker-card .btn,
.btn-audience-baker {
  background: #ffffff !important;
  color: #181116 !important;
  border: 1.5px solid #181116 !important;
  box-shadow: 0 4px 14px rgba(24, 17, 22, 0.08) !important;
}
.home-baker-card .btn:hover,
.btn-audience-baker:hover {
  background: #181116 !important;
  color: #ffffff !important;
  border-color: #181116 !important;
  box-shadow: 0 8px 22px rgba(24, 17, 22, 0.24) !important;
  transform: translateY(-1px);
}
.wholesale-card .btn,
.btn-audience-wholesale {
  background: #ffffff !important;
  color: #181116 !important;
  border: 1.5px solid #ebd3cd !important;
  box-shadow: 0 4px 14px rgba(75, 44, 49, 0.1) !important;
}
.wholesale-card .btn:hover,
.btn-audience-wholesale:hover {
  background: #f2b7b3 !important;
  color: #181116 !important;
  border-color: #df9994 !important;
  box-shadow: 0 8px 22px rgba(186, 107, 101, 0.25) !important;
  transform: translateY(-1px);
}

@media (max-width: 900px) {
  .audience-grid { grid-template-columns: 1fr; gap: 20px; }
  .audience-card { min-height: 440px; }
}
@media (max-width: 600px) {
  .audience-card { min-height: 420px; padding: 32px 24px; align-items: flex-start; }
  .home-baker-card {
    background-image:
      linear-gradient(180deg, rgba(254, 251, 249, 0.96) 0%, rgba(254, 251, 249, 0.90) 55%, rgba(254, 251, 249, 0.35) 100%),
      url('bottomsectionimgs/01.png');
    background-position: right bottom;
  }
  .wholesale-card {
    background-image:
      linear-gradient(180deg, rgba(246, 228, 223, 0.97) 0%, rgba(246, 228, 223, 0.90) 55%, rgba(246, 228, 223, 0.35) 100%),
      url('bottomsectionimgs/02.png');
    background-position: right bottom;
  }
  .audience-card-content,
  .audience-card > div:first-child { max-width: 100%; }
}

.custom-section {
  background: #fdf6f5;
  padding-block: clamp(56px, 7vw, 92px);
  border-top: 1px solid #f2dedb;
  border-bottom: 1px solid #f2dedb;
}
.custom-grid {
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  align-items: center;
  gap: clamp(40px, 6vw, 90px);
}
.custom-visual {
  position: relative;
  overflow: hidden;
  border-radius: 28px;
  background: #f7e6e2;
  border: 1px solid #ebd3cd;
  box-shadow: 0 16px 44px rgba(75, 44, 49, 0.1);
  display: flex;
  align-items: center;
  justify-content: center;
  aspect-ratio: 1508 / 1043;
}
.custom-visual-img,
.custom-visual img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  border-radius: 28px;
  transition: transform 0.6s cubic-bezier(0.22, 1, 0.36, 1);
}
.custom-visual:hover img {
  transform: scale(1.025);
}
.custom-copy {
  max-width: 520px;
}
.custom-copy .kicker {
  display: inline-block;
  margin-bottom: 12px;
  font-size: 11.5px;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #ba6b65;
}
.custom-copy h2 {
  font-family: var(--pmc-sans);
  font-size: clamp(38px, 3.8vw, 54px);
  font-weight: 800;
  line-height: 1.08;
  letter-spacing: -0.03em;
  margin: 0 0 20px;
  color: #181116;
}
.custom-copy h2 em {
  font-style: normal;
  color: #ba6b65;
  text-decoration: underline;
  text-decoration-color: #f2b7b3;
  text-underline-offset: 4px;
}
.custom-copy > p {
  color: #4b3d42;
  max-width: 480px;
  font-size: 15px;
  line-height: 1.62;
  margin-bottom: 24px;
}
.check-list {
  list-style: none;
  padding: 0;
  margin: 0 0 32px;
  display: grid;
  gap: 12px;
  font-size: 13.5px;
  font-weight: 600;
  color: #181116;
}
.check-list li {
  display: flex;
  align-items: center;
  gap: 12px;
}
.check-list li::before {
  content: '✓';
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  border-radius: 5px;
  background: #f2b7b3;
  color: #181116;
  font-size: 11px;
  font-weight: 800;
  flex-shrink: 0;
}

/* ==========================================================================
   Guides / Know-How Section
   ========================================================================== */
.guide-section { 
  background: #ffffff; 
  padding-block: 56px 76px; 
}

.guide-grid { 
  display: grid; 
  grid-template-columns: 1.25fr 1fr 1fr; 
  gap: 22px; 
  margin-top: 36px; 
}

.guide-card { 
  min-height: 250px; 
  padding: clamp(28px, 3vw, 36px); 
  border: 1.5px solid #e5e5e5; 
  border-radius: 24px; 
  background: #ffffff; 
  box-shadow: 0 6px 24px rgba(0, 0, 0, 0.04); 
  display: flex; 
  flex-direction: column; 
  justify-content: space-between; 
  text-decoration: none; 
  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1); 
  position: relative; 
}

.guide-card:hover { 
  transform: translateY(-4px); 
  box-shadow: 0 14px 36px rgba(0, 0, 0, 0.12); 
  border-color: var(--pmc-pink); 
}

.guide-card-featured { 
  background: linear-gradient(135deg, #fde4e1 0%, #f7b7b3 50%, #ee9b96 100%); 
  color: #181116; 
  border-color: #e59a95; 
  box-shadow: 0 12px 34px rgba(242, 183, 179, 0.4);
}

.guide-card-featured:hover { 
  background: linear-gradient(135deg, #fde4e1 0%, #f7b7b3 50%, #ee9b96 100%); 
  border-color: #e59a95; 
  box-shadow: 0 16px 40px rgba(242, 183, 179, 0.5); 
}

.guide-card-top { 
  display: flex; 
  align-items: center; 
  gap: 12px; 
  width: 100%; 
  margin-bottom: 24px; 
}

.guide-no { 
  font-family: var(--pmc-sans); 
  font-size: 15px; 
  font-weight: 800; 
  color: var(--pmc-pink); 
  line-height: 1; 
}

.guide-card-featured .guide-no { 
  color: #ba6b65; 
}

.guide-card-top small { 
  font-family: var(--pmc-sans); 
  font-size: 11.5px; 
  font-weight: 800; 
  letter-spacing: 0.12em; 
  text-transform: uppercase; 
  color: var(--pmc-muted); 
}

.guide-card-featured .guide-card-top small { 
  color: #7d444a; 
}

.guide-arrow { 
  margin-left: auto; 
  font-size: 20px; 
  font-weight: 800; 
  line-height: 1; 
  color: var(--pmc-pink); 
  transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1); 
}

.guide-card-featured .guide-arrow { 
  color: #ba6b65; 
}

.guide-card:hover .guide-arrow { 
  transform: translate(3px, -3px); 
}

.guide-card-content h3 { 
  font-family: var(--pmc-sans); 
  font-size: clamp(20px, 1.8vw, 24px); 
  font-weight: 800; 
  line-height: 1.25; 
  color: var(--pmc-ink); 
  letter-spacing: -0.025em; 
  margin: 0 0 12px 0; 
}

.guide-card-featured .guide-card-content h3 { 
  color: #181116; 
}

.guide-card-content p { 
  font-size: 14px; 
  line-height: 1.55; 
  color: var(--pmc-muted); 
  margin: 0; 
  font-weight: 450; 
}

.guide-card-featured .guide-card-content p { 
  color: #4a3237; 
}

/* ==========================================================================
   FAQ Section - Large, Prominent, Highly Legible Accordion
   ========================================================================== */
.faq-section { 
  background: #ffffff; 
  padding-block: 72px 96px; 
}

.faq-grid { 
  display: grid; 
  grid-template-columns: 0.78fr 1.22fr; 
  gap: clamp(48px, 6vw, 96px); 
  align-items: start; 
  max-width: 1180px;
  margin: 0 auto;
}

.faq-grid .kicker {
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.16em;
  color: var(--pmc-pink);
  margin-bottom: 12px;
}

.faq-grid h2 { 
  font-family: var(--pmc-sans);
  font-size: clamp(38px, 4vw, 54px); 
  font-weight: 800;
  line-height: 1.06;
  color: var(--pmc-ink);
  letter-spacing: -0.035em;
  margin: 0 0 18px 0; 
}

.faq-grid > div:first-child p { 
  color: var(--pmc-muted); 
  font-size: 16px; 
  line-height: 1.6; 
  margin: 0 0 28px 0; 
  max-width: 380px; 
}

.faq-grid .text-link {
  font-size: 15px;
  font-weight: 800;
  color: var(--pmc-pink-dark);
}

.faq-list { 
  border-top: 1.5px solid #e5e5e5; 
}

.faq-list details { 
  border-bottom: 1.5px solid #e5e5e5; 
  transition: background 0.2s ease; 
}

.faq-list details[open] { 
  background: #f8f8f8; 
  border-radius: 12px;
}

.faq-list summary { 
  list-style: none; 
  cursor: pointer; 
  min-height: 78px; 
  display: flex; 
  justify-content: space-between; 
  align-items: center; 
  gap: 24px; 
  font-family: var(--pmc-sans);
  font-weight: 800; 
  font-size: clamp(17px, 1.6vw, 20px); 
  color: var(--pmc-ink); 
  padding: 24px 8px 24px 8px; 
  letter-spacing: -0.02em;
  line-height: 1.3;
}

.faq-list summary::-webkit-details-marker { 
  display: none; 
}

.faq-list summary .faq-icon,
.faq-list summary span:last-child { 
  color: var(--pmc-pink); 
  font-size: 24px; 
  font-weight: 700; 
  line-height: 1; 
  transition: transform .25s ease; 
  flex-shrink: 0; 
}

.faq-list details[open] summary .faq-icon,
.faq-list details[open] summary span:last-child { 
  transform: rotate(45deg); 
  color: var(--pmc-pink-dark);
}

.faq-list details p { 
  color: #4a3840; 
  font-size: 15.5px; 
  line-height: 1.65; 
  font-weight: 450;
  padding: 0 36px 26px 8px; 
  margin: 0; 
}

/* ==========================================================================
   Newsletter & Footer (Seamless Dark Zone)
   ========================================================================== */
.newsletter-section { 
  background: #000000; 
  color: #fff; 
  padding-block: 56px; 
  border-bottom: 1px solid rgba(0, 0, 0, 0.15);
  margin-bottom: 0;
}

.newsletter-inner { 
  display: grid; 
  grid-template-columns: 1.15fr 0.85fr; 
  align-items: center; 
  gap: 50px; 
  max-width: 1180px;
  margin: 0 auto;
}

.newsletter-inner .kicker {
  color: #ffffff;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.16em;
}

.newsletter-inner h2 { 
  font-family: var(--pmc-sans);
  font-size: clamp(26px, 2.6vw, 36px); 
  font-weight: 800;
  color: #ffffff;
  line-height: 1.15;
  margin: 8px 0 0; 
  letter-spacing: -0.025em; 
}

.newsletter-form { 
  height: 52px; 
  display: flex; 
  align-items: center; 
  background: rgba(255, 255, 255, 0.08);
  border: 1.5px solid rgba(255, 255, 255, 0.16);
  border-radius: 999px;
  padding: 4px 6px 4px 20px;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.newsletter-form:focus-within {
  border-color: var(--pmc-pink, #000000);
  box-shadow: 0 0 0 3px rgba(0, 0, 0, 0.35);
}

.newsletter-form input { 
  border: 0; 
  outline: 0; 
  color: #ffffff; 
  background: transparent; 
  font-family: var(--pmc-sans); 
  font-size: 14.5px; 
  font-weight: 500;
  width: 100%;
}

.newsletter-form input::placeholder { 
  color: #888888; 
}

.newsletter-form button { 
  border: 0; 
  background: linear-gradient(135deg, var(--pmc-pink, #000000), var(--pmc-pink-hover, #1f1f1f)); 
  color: #181116; 
  font-family: var(--pmc-sans); 
  font-weight: 800; 
  font-size: 13.5px; 
  cursor: pointer; 
  padding: 0 24px; 
  height: 42px;
  border-radius: 999px;
  white-space: nowrap;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.35);
  transition: all 0.2s ease;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.newsletter-form button:hover {
  background: linear-gradient(135deg, var(--pmc-pink-hover, #1f1f1f), var(--pmc-pink-dark, #000000));
  transform: scale(1.02);
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.45);
}

/* Site Footer V2 */
.site-footer.footer-v2 { 
  margin-top: 0 !important;
  padding: 64px 0 32px; 
  background: #000000; 
  color: #fceef3; 
  border: 0; 
  box-shadow: none; 
}

.footer-main { 
  display: grid; 
  grid-template-columns: 1.8fr repeat(4, 1fr); 
  gap: clamp(32px, 3.5vw, 54px); 
  max-width: 1180px;
  margin: 0 auto;
}

.footer-main > div { 
  display: flex; 
  flex-direction: column; 
  gap: 10px; 
}

.footer-brand { 
  padding-right: 24px; 
}

.footer-brand .brand-v2 { 
  display: inline-flex;
  align-items: center;
  gap: 14px;
  color: #ffffff; 
  margin-bottom: 6px; 
  text-decoration: none;
}

.footer-brand .brand-v2 img { 
  width: 52px; 
  height: 52px; 
  border-radius: 14px; 
  background: rgba(255, 255, 255, 0.08); 
  border: 1px solid rgba(255, 255, 255, 0.16); 
  padding: 6px; 
  object-fit: contain; 
  filter: brightness(1.25) drop-shadow(0 4px 10px rgba(0, 0, 0, 0.3)); 
  transition: transform 0.2s ease, background 0.2s ease; 
}
.footer-brand .brand-v2:hover img {
  transform: scale(1.06);
  background: rgba(255, 255, 255, 0.14);
}

.footer-brand .brand-v2 span {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.footer-brand .brand-v2 strong { 
  font-family: var(--pmc-sans);
  font-weight: 800;
  font-size: 20px;
  letter-spacing: 0.06em;
  color: #ffffff;
  line-height: 1;
}

.footer-brand .brand-v2 small { 
  color: #ffffff; 
  font-size: 11px; 
  font-weight: 800; 
  letter-spacing: 0.18em; 
  line-height: 1;
}

.footer-brand p { 
  color: #aaaaaa;
  font-size: 14px;
  line-height: 1.6; 
  max-width: 320px; 
  margin: 12px 0 16px;
}

.footer-brand .whatsapp-link { 
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.15);
  color: #ffffff; 
  padding: 8px 16px;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 700;
  text-decoration: none;
  width: fit-content;
  transition: all 0.2s ease;
}
.footer-brand .whatsapp-link:hover {
  background: #25D366;
  border-color: #25D366;
  color: #ffffff;
  transform: translateY(-1px);
  box-shadow: 0 4px 14px rgba(37, 211, 102, 0.3);
}

.footer-main h3 { 
  font-family: var(--pmc-sans); 
  font-size: 11.5px; 
  font-weight: 800; 
  letter-spacing: .14em; 
  text-transform: uppercase; 
  color: #ffffff; 
  margin: 0 0 14px 0; 
}

.footer-main a { 
  color: #cccccc; 
  font-size: 14px; 
  line-height: 1.5; 
  text-decoration: none;
  display: inline-block;
  padding: 2px 0;
  transition: color 0.2s ease, transform 0.2s ease;
}

.footer-main a:hover { 
  color: #ffffff; 
  transform: translateX(3px);
}

.footer-main p {
  color: #888888;
  font-size: 13.5px;
  line-height: 1.6;
  margin: 3px 0;
}

.footer-bottom { 
  border-top: 1px solid rgba(0, 0, 0, 0.15); 
  margin-top: 52px; 
  padding-top: 24px; 
  display: flex; 
  justify-content: space-between; 
  align-items: center;
  color: #777777; 
  font-size: 13px; 
  max-width: 1180px;
  margin-left: auto;
  margin-right: auto;
  flex-wrap: wrap;
  gap: 12px;
}

/* Collection and product templates */
.collection-hero, .page-hero { 
  padding: 48px 0 38px; 
  background: linear-gradient(135deg, #ffffff 0%, #f7f7f7 50%, #f0f0f0 100%); 
  border: 1.5px solid #e5e5e5; 
  border-radius: 28px;
  margin: 20px auto 0;
  width: calc(100% - 2 * var(--site-gutter));
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.04);
}
.collection-hero .breadcrumbs, .page-hero .breadcrumbs, .product-breadcrumbs { 
  display: flex; 
  align-items: center;
  gap: 8px; 
  color: var(--pmc-muted); 
  font-size: 11.5px; 
  font-weight: 600;
  margin-bottom: 16px; 
}
.collection-hero .breadcrumbs a, .page-hero .breadcrumbs a, .product-breadcrumbs a {
  color: var(--pmc-muted);
  text-decoration: none;
  transition: color 0.2s ease;
}
.collection-hero .breadcrumbs a:hover, .page-hero .breadcrumbs a:hover, .product-breadcrumbs a:hover {
  color: var(--pmc-pink);
}
.collection-hero .breadcrumbs span, .page-hero .breadcrumbs span, .product-breadcrumbs span {
  color: #cccccc;
}
.collection-hero .breadcrumbs span[aria-current], .page-hero .breadcrumbs span[aria-current], .product-breadcrumbs span[aria-current] {
  color: var(--pmc-ink);
  font-weight: 700;
}
.collection-hero h1, .page-hero h1 { 
  font-family: var(--pmc-sans);
  font-size: clamp(34px, 3.8vw, 52px); 
  font-weight: 800;
  letter-spacing: -0.035em;
  line-height: 1.08;
  margin: 10px 0 12px; 
  color: var(--pmc-ink); 
}
.collection-hero p, .page-hero p { 
  color: var(--pmc-muted); 
  max-width: 720px; 
  margin: 0; 
  font-size: 14.5px; 
  line-height: 1.6;
}
.collection-chips { 
  display: flex; 
  flex-wrap: wrap;
  align-items: center;
  gap: 10px; 
  margin-top: 20px; 
  padding-top: 0;
  border-top: none;
}
.collection-chips a { 
  display: inline-flex;
  align-items: center;
  padding: 9px 18px; 
  border: 1.5px solid #e5e5e5; 
  background: #ffffff; 
  font-size: 12.5px; 
  font-weight: 700; 
  border-radius: 999px; 
  white-space: nowrap; 
  color: var(--pmc-ink); 
  text-decoration: none;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
  transition: all 0.22s cubic-bezier(0.16, 1, 0.3, 1); 
}
.collection-chips a:hover { 
  background: #f5f5f5; 
  border-color: var(--pmc-pink); 
  color: var(--pmc-pink-dark); 
  transform: translateY(-1px);
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.15); 
}
.collection-chips a.active {
  background: #000000; 
  border-color: transparent; 
  color: #ffffff !important; 
  transform: translateY(-1px);
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.35); 
}

.shop-layout { 
  display: grid; 
  grid-template-columns: 270px 1fr; 
  gap: 36px; 
  align-items: start; 
  margin-top: 32px;
  margin-bottom: 60px;
}
.filter-sidebar { 
  position: sticky; 
  top: 140px; 
  background: #ffffff; 
  border-radius: 24px; 
  border: 1.5px solid #e5e5e5; 
  padding: 24px; 
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.05); 
}
.filter-group { 
  border-bottom: 1px solid #e5e5e5; 
  padding: 16px 0; 
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.filter-group:first-child { 
  padding-top: 0; 
}
.filter-group:last-of-type { 
  border-bottom: 0; 
  margin-bottom: 4px;
}
.filter-group label { 
  display: flex; 
  align-items: center; 
  gap: 10px; 
  font-size: 13px; 
  font-weight: 600; 
  cursor: pointer; 
  color: var(--pmc-ink); 
  padding: 5px 8px;
  border-radius: 8px;
  transition: background 0.15s ease, color 0.15s ease;
}
.filter-group label:hover {
  background: #f8f8f8;
  color: var(--pmc-pink-dark);
}
.filter-group h3 { 
  font-size: 11.5px; 
  font-weight: 800; 
  letter-spacing: .12em; 
  text-transform: uppercase; 
  margin: 0 0 10px; 
  color: var(--pmc-pink-dark); 
}

.filter-group input[type="search"] {
  width: 100%;
  height: 44px;
  border: 1.5px solid #e5e5e5;
  border-radius: 12px;
  padding: 0 14px;
  font: inherit;
  font-size: 13px;
  color: var(--pmc-ink);
  background: #f8f8f8;
  outline: none;
  transition: all 0.2s ease;
}
.filter-group input[type="search"]:focus {
  background: #ffffff;
  border-color: var(--pmc-pink);
  box-shadow: 0 0 0 3px rgba(0, 0, 0, 0.15);
}
.filter-group select {
  width: 100%;
  height: 44px;
  border: 1.5px solid #e5e5e5;
  border-radius: 12px;
  padding: 0 14px;
  font: inherit;
  font-size: 13px;
  font-weight: 600;
  color: var(--pmc-ink);
  background: #ffffff;
  cursor: pointer;
  outline: none;
  transition: all 0.2s ease;
}
.filter-group select:focus {
  border-color: var(--pmc-pink);
  box-shadow: 0 0 0 3px rgba(0, 0, 0, 0.15);
}
#clear-filters {
  width: 100%;
  min-height: 42px;
  border-radius: 999px;
  border: 1.5px solid #e5e5e5;
  background: #ffffff;
  color: var(--pmc-muted);
  font-size: 12.5px;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.2s ease;
  margin-top: 12px;
}
#clear-filters:hover {
  background: #f5f5f5;
  border-color: var(--pmc-pink);
  color: var(--pmc-pink-dark);
}

.catalog-toolbar { 
  display: flex; 
  justify-content: space-between; 
  align-items: center; 
  border-bottom: 1px solid #e5e5e5; 
  padding-bottom: 16px; 
  margin-bottom: 24px; 
  gap: 16px;
}
.catalog-toolbar p { 
  font-size: 13.5px; 
  font-weight: 700; 
  color: var(--pmc-muted); 
  margin: 0; 
}
.catalog-toolbar select { 
  height: 42px;
  border: 1.5px solid #e5e5e5; 
  border-radius: 999px; 
  padding: 0 20px; 
  font: inherit; 
  font-size: 13px; 
  font-weight: 700; 
  background: #ffffff; 
  color: var(--pmc-ink); 
  cursor: pointer;
  outline: none;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.catalog-toolbar select:focus {
  border-color: var(--pmc-pink);
  box-shadow: 0 0 0 3px rgba(0, 0, 0, 0.15);
}
.filter-toggle { display: none; }
.catalog-grid { 
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr)); 
  gap: 24px;
}
.catalog-grid:has(.catalog-empty-state),
.catalog-grid:has(.empty-state),
.product-grid:has(.catalog-empty-state),
.product-grid:has(.empty-state) {
  display: block !important;
}
.catalog-grid > .catalog-empty-state,
.catalog-grid > .empty-state,
.product-grid > .catalog-empty-state,
.product-grid > .empty-state {
  grid-column: 1 / -1 !important;
  width: 100% !important;
}

/* ==========================================================================
   ACTIVE FILTERS BAR & PILLS
   ========================================================================== */
.active-filters-bar {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  margin: 0 0 24px;
  padding: 12px 18px;
  background: linear-gradient(135deg, #fffcfb 0%, #fff7f6 100%);
  border: 1px solid #f2dedb;
  border-radius: 16px;
  animation: fadeInPills 0.25s ease-out;
}
.active-filters-bar[hidden] {
  display: none !important;
}
@keyframes fadeInPills {
  from { opacity: 0; transform: translateY(-4px); }
  to { opacity: 1; transform: translateY(0); }
}
.active-filters-label {
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--pmc-pink-dark);
}
.active-filters-list {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  flex: 1;
}
.active-filter-pill {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  background: #ffffff;
  border: 1px solid #e7d2ce;
  border-radius: 999px;
  padding: 4px 10px 4px 12px;
  font-size: 12px;
  font-weight: 700;
  color: var(--pmc-ink);
  box-shadow: 0 2px 8px rgba(186, 107, 101, 0.05);
  transition: all 0.15s ease;
}
.active-filter-pill:hover {
  border-color: var(--pmc-pink-dark);
}
.active-filter-pill button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: #f7ebe8;
  border: none;
  cursor: pointer;
  color: #7d4440;
  font-size: 13px;
  line-height: 1;
  padding: 0;
  transition: all 0.15s ease;
}
.active-filter-pill button:hover {
  background: var(--pmc-pink-dark);
  color: #ffffff;
}
.btn-clear-all {
  background: none;
  border: none;
  font-size: 12px;
  font-weight: 800;
  color: var(--pmc-pink-dark);
  text-decoration: underline;
  cursor: pointer;
  padding: 4px 8px;
  white-space: nowrap;
}
.btn-clear-all:hover {
  color: #4a211f;
}

/* Filter sidebar option item with count badge */
.filter-group label.filter-option {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 5px 8px;
  border-radius: 8px;
  transition: background 0.15s ease, opacity 0.15s ease;
}
.filter-option-name {
  flex: 1;
  margin-left: 8px;
}
.filter-option-count {
  font-size: 11px;
  font-weight: 750;
  color: #9c8085;
  background: #f7edea;
  padding: 1px 7px;
  border-radius: 999px;
  min-width: 20px;
  text-align: center;
  transition: all 0.15s ease;
}
.filter-option.is-empty {
  opacity: 0.45;
}
.filter-option.is-empty .filter-option-count {
  background: #f0ebea;
  color: #b0a0a3;
}

/* ==========================================================================
   LUXURY CATALOG EMPTY STATE
   ========================================================================== */
.catalog-empty-state,
.catalog-empty-state.empty-state,
.catalog-grid .empty-state,
.product-grid .empty-state {
  grid-column: 1 / -1 !important;
  width: 100% !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 32px !important;
  margin: 12px 0 40px !important;
  animation: fadeInEmpty 0.3s cubic-bezier(0.16, 1, 0.3, 1) !important;
}
@keyframes fadeInEmpty {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}
.empty-state-card {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  text-align: center !important;
  padding: clamp(40px, 5vw, 56px) clamp(24px, 4vw, 48px) !important;
  background: linear-gradient(180deg, #fffcfb 0%, #fff7f6 100%) !important;
  border: 1.5px dashed #e8d0cb !important;
  border-radius: 28px !important;
  box-shadow: 0 14px 36px rgba(186, 107, 101, 0.05) !important;
  max-width: 680px !important;
  width: 100% !important;
  margin: 0 auto !important;
  box-sizing: border-box !important;
}
.empty-state-icon-wrap {
  width: 72px !important;
  height: 72px !important;
  border-radius: 50% !important;
  background: linear-gradient(135deg, #fcebe8 0%, #f7dcd7 100%) !important;
  color: #ba6b65 !important;
  display: grid !important;
  place-items: center !important;
  margin-bottom: 16px !important;
  box-shadow: 0 8px 20px rgba(186, 107, 101, 0.16) !important;
}
.empty-state-kicker {
  font-family: var(--pmc-sans, 'Plus Jakarta Sans', sans-serif) !important;
  font-size: 11px !important;
  font-weight: 800 !important;
  letter-spacing: .16em !important;
  text-transform: uppercase !important;
  color: #ba6b65 !important;
  margin-bottom: 8px !important;
  display: inline-block !important;
}
.empty-state-card h3,
.empty-state h3,
.empty-state h2 {
  font-family: var(--pmc-sans, 'Plus Jakarta Sans', sans-serif) !important;
  font-size: clamp(22px, 2.4vw, 28px) !important;
  font-weight: 800 !important;
  color: #181116 !important;
  letter-spacing: -0.025em !important;
  margin: 0 0 10px !important;
  line-height: 1.25 !important;
}
.empty-state-lead,
.empty-state p {
  font-family: var(--pmc-sans, 'Plus Jakarta Sans', sans-serif) !important;
  max-width: 520px !important;
  font-size: 15px !important;
  line-height: 1.6 !important;
  color: #6d5b60 !important;
  margin: 0 auto 24px !important;
}
.empty-state-lead strong,
.empty-state p strong {
  color: #181116 !important;
  font-weight: 750 !important;
}

/* Cross-category discover banner */
.empty-state-discovery {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  background: #ffffff;
  border: 1px solid #ebd7d3;
  border-radius: 18px;
  padding: 16px 22px;
  max-width: 580px;
  width: 100%;
  margin-bottom: 24px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.02);
}
.discovery-lead {
  font-size: 13px;
  font-weight: 750;
  color: var(--pmc-ink);
  display: flex;
  align-items: center;
  gap: 6px;
}
.discovery-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: center;
}
.discovery-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 14px;
  background: #fff4f2;
  border: 1px solid #f2dedb;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 750;
  color: var(--pmc-pink-dark);
  text-decoration: none;
  transition: all 0.15s ease;
}
.discovery-chip:hover {
  background: var(--pmc-pink-dark);
  color: #ffffff;
  border-color: var(--pmc-pink-dark);
  transform: translateY(-1px);
}

/* Empty actions buttons */
.empty-state-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 12px;
}
.empty-state-actions .btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 12px 22px;
  font-size: 13px;
  font-weight: 750;
  border-radius: 12px;
  cursor: pointer;
  transition: all 0.2s ease;
}
.empty-whatsapp-btn {
  background: #fdf6f5;
  color: #1f4a31;
  border-color: #d1e5d8;
}
.empty-whatsapp-btn:hover {
  background: #25d366;
  border-color: #25d366;
  color: #ffffff;
}

/* Recommendations shelf inside empty state */
.empty-state-shelf {
  display: flex;
  flex-direction: column;
  gap: 18px;
  padding-top: 6px;
}
.shelf-header {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px;
  border-bottom: 1.5px solid #f2dedb;
  padding-bottom: 12px;
}
.shelf-header h4 {
  font-size: 18px;
  font-weight: 800;
  letter-spacing: -0.02em;
  margin: 0 0 3px;
  color: var(--pmc-ink);
}
.shelf-header p {
  font-size: 12.5px;
  color: #7d6b70;
  margin: 0;
}
.recommendations-grid {
  margin-top: 4px;
}


.product-detail { display: grid; grid-template-columns: minmax(0,1.1fr) minmax(380px,.9fr); gap: clamp(50px,7vw,100px); align-items: start; }
.product-gallery { display: grid; grid-template-columns: 78px 1fr; gap: 12px; position: sticky; top: 155px; }
.product-main-image { grid-column: 2; grid-row: 1; width: 100%; aspect-ratio: 1; object-fit: cover; background: #ffffff; border: 1.5px solid #e5e5e5; border-radius: 24px; }
.thumb-grid { grid-column: 1; grid-row: 1; display: flex; flex-direction: column; gap: 9px; }
.thumb-btn { border: 1.5px solid #e5e5e5; background: #ffffff; padding: 0; cursor: pointer; width: 78px; height: 78px; border-radius: 14px; overflow: hidden; transition: border-color 0.2s ease; }
.thumb-btn:first-child, .thumb-btn:hover { border-color: var(--pmc-pink); box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2); }
.thumb-btn img { width: 100%; height: 100%; object-fit: cover; }
.product-purchase { padding-top: 7px; }
.product-purchase .product-category { color: var(--pmc-pink); font-size: 10px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; }
.product-purchase h1 { font-family: var(--pmc-sans); font-size: clamp(34px,3.3vw,50px); font-weight: 800; line-height: 1.08; margin: 12px 0 18px; color: var(--pmc-ink); }
.product-purchase .price { font-family: var(--pmc-sans); font-weight: 800; font-size: 30px; margin: 0 0 5px; color: var(--pmc-ink); }
.unit-price { color: var(--pmc-muted); font-size: 11px; }
.stock-pill { display: inline-flex; align-items: center; gap: 7px; color: #047857; background: #ecfdf5; border: 1px solid #a7f3d0; padding: 6px 12px; font-size: 10px; font-weight: 800; border-radius: 999px; margin: 16px 0; }
.stock-pill::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.product-benefits { display: grid; gap: 10px; margin: 18px 0 24px; padding: 19px 0; border-top: 1px solid var(--pmc-line); border-bottom: 1px solid var(--pmc-line); font-size: 12px; font-weight: 600; color: var(--pmc-ink); }
.product-benefits span::before { content: '✓'; color: var(--pmc-pink); font-weight: 800; margin-right: 9px; }
.purchase-label { display: block; font-size: 11px; font-weight: 800; margin-bottom: 8px; text-transform: uppercase; letter-spacing: 0.04em; }
.product-actions { display: grid; grid-template-columns: 112px 1fr; gap: 10px; margin: 17px 0 10px; }
.qty-selector { border-radius: 999px; border: 1.5px solid #e5e5e5; height: 50px; background: #fff; }
.qty-btn { height: 48px; width: 34px; color: var(--pmc-pink); font-weight: 800; }
.product-actions .btn { height: 50px; }
.buy-now { width: 100%; background: #000000; border-color: transparent; color: #fff; margin-bottom: 20px; font-weight: 800; box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35); }
.bulk-callout { background: #f8f8f8; border: 1.5px solid #e5e5e5; border-radius: 18px; padding: 18px; display: flex; justify-content: space-between; align-items: center; gap: 15px; font-size: 12px; color: var(--pmc-ink); }
.bulk-callout a { font-weight: 800; color: var(--pmc-pink-dark); text-decoration: underline; }
.product-accordions { margin-top: 26px; border-top: 1px solid var(--pmc-line); }
.product-accordions details { border-bottom: 1px solid var(--pmc-line); }
.product-accordions summary { min-height: 55px; display: flex; justify-content: space-between; align-items: center; list-style: none; font-size: 12px; font-weight: 800; cursor: pointer; color: var(--pmc-ink); }
.product-accordions summary::-webkit-details-marker { display: none; }
.product-accordions p, .spec-table { font-size: 12px; color: var(--pmc-muted); margin: 0 0 18px; }
.spec-table { width: 100%; border-collapse: collapse; }
.spec-table td { padding: 8px 0; border-bottom: 1px solid #e5e5e5; }
.spec-table td:last-child { text-align: right; color: var(--pmc-ink); font-weight: 700; }
.related-section { margin-top: 100px; }
.related-section h2 { font-family: var(--pmc-sans); font-weight: 800; font-size: 40px; margin: 12px 0 32px; color: var(--pmc-ink); }

/* Content and enquiry pages */
.content-section { padding: 70px 0 95px; }
.simple-site-header { position: sticky; top: 0; z-index: 60; background: rgba(255,255,255,.98); border-bottom: 1px solid var(--pmc-line); backdrop-filter: blur(14px); }
.simple-header-inner { min-height: 78px; display: flex; align-items: center; justify-content: space-between; gap: 30px; }
.simple-nav { display: flex; align-items: center; gap: 24px; font-size: 12px; font-weight: 700; }
.simple-nav a:hover { color: var(--pmc-pink); }
.simple-nav .simple-cart { padding: 9px 16px; border: 1.5px solid #e5e5e5; border-radius: 999px; background: #f5f5f5; color: var(--pmc-pink-dark); font-weight: 800; }
.simple-footer { background: #000000; color: #fff; padding: 42px 0; }
.simple-footer-inner { display: flex; align-items: center; justify-content: space-between; gap: 30px; }
.simple-footer-links { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 18px; }
.simple-footer a, .simple-footer p { color: #aaaaaa; font-size: 12px; }
.simple-footer a:hover { color: #ffffff; }
.content-grid { display: grid; grid-template-columns: .7fr 1.3fr; gap: 85px; align-items: start; }
.content-sidebar { position: sticky; top: 155px; }
.content-sidebar h2 { font-family: var(--pmc-sans); font-weight: 800; font-size: 34px; color: var(--pmc-ink); }
.content-sidebar p { color: var(--pmc-muted); font-size: 13px; }
.content-body { display: grid; gap: 20px; }
.content-card { border: 1.5px solid var(--pmc-line); border-radius: 24px; padding: 32px; background: #fff; box-shadow: 0 6px 20px rgba(0, 0, 0, 0.04); }
.content-card h2, .content-card h3 { font-family: var(--pmc-sans); font-weight: 800; margin-top: 0; color: var(--pmc-ink); }
.content-card h2 { font-size: 30px; }
.content-card h3 { font-size: 23px; }
.content-card p, .content-card li { color: var(--pmc-muted); font-size: 13.5px; line-height: 1.6; }
.enquiry-grid { display: grid; grid-template-columns: .8fr 1.2fr; gap: 20px; }
.enquiry-intro { 
  background: linear-gradient(145deg, #fde4e1 0%, #f7b7b3 50%, #ee9b96 100%) !important; 
  color: #181116 !important; 
  padding: 44px; 
  border-radius: 28px; 
  border: 1.5px solid #e59a95 !important; 
  box-shadow: 0 20px 48px rgba(242, 183, 179, 0.45);
}
.enquiry-intro h2 { 
  font-family: var(--pmc-sans); 
  font-weight: 800; 
  font-size: 42px; 
  line-height: 1.08; 
  color: #181116 !important; 
  letter-spacing: -0.035em;
}
.enquiry-intro p, .enquiry-intro li { 
  color: #4a3237 !important; 
  font-size: 13.5px; 
  line-height: 1.6;
}
.enquiry-intro p strong {
  color: #181116 !important;
}
.enquiry-intro li::marker {
  color: #ba6b65;
}
.enquiry-intro .kicker,
.enquiry-intro .kicker-light { 
  color: #ba6b65 !important; 
  font-weight: 800;
  letter-spacing: 0.16em;
}
.enquiry-intro .kicker::before,
.enquiry-intro .kicker-light::before {
  background: #ba6b65 !important;
}
.enquiry-intro a {
  color: #181116 !important;
  font-weight: 700;
  text-decoration-color: #ba6b65 !important;
}
.enquiry-form { 
  background: #ffffff; 
  border: 1.5px solid #f2dedb; 
  border-radius: 28px; 
  padding: 40px; 
  box-shadow: 0 10px 30px rgba(242, 183, 179, 0.12);
}
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.field { display: grid; gap: 7px; }
.field-full { grid-column: 1 / -1; }
.field label { font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.04em; color: var(--pmc-ink); }
.field input:not([type="checkbox"]):not([type="radio"]), .field textarea, .field select, .filters input:not([type="checkbox"]):not([type="radio"]), .filters select { min-height: 48px; border: 1.5px solid #e5e5e5; border-radius: 14px; padding: 11px 16px; background: #fff; font: inherit; font-size: 13px; color: var(--pmc-ink); transition: border-color 0.2s ease, box-shadow 0.2s ease; }
.field input:focus, .field textarea:focus, .field select:focus { border-color: var(--pmc-pink); outline: none; box-shadow: 0 0 0 3px rgba(0, 0, 0, 0.16); }
.field textarea { min-height: 110px; resize: vertical; }
.form-note { font-size: 10px; color: var(--pmc-muted); }

/* ==========================================================================
   CUSTOM LUXURY CHECKBOX & RADIO COMPONENT — PACK MY CAKE
   ========================================================================== */
input[type="checkbox"] {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  width: 18px !important;
  height: 18px !important;
  min-width: 18px !important;
  min-height: 18px !important;
  max-width: 18px !important;
  max-height: 18px !important;
  border: 1.5px solid #d8c2bf !important;
  border-radius: 5px !important;
  background-color: #ffffff !important;
  cursor: pointer !important;
  margin: 0 !important;
  padding: 0 !important;
  display: inline-block !important;
  vertical-align: middle !important;
  position: relative !important;
  flex-shrink: 0 !important;
  outline: none !important;
  box-shadow: none !important;
  transition: all 0.18s cubic-bezier(0.16, 1, 0.3, 1) !important;
  box-sizing: border-box !important;
}

input[type="checkbox"]:hover {
  border-color: var(--pmc-pink-dark, #ba6b65) !important;
  background-color: #fff8f7 !important;
  transform: scale(1.04);
}

input[type="checkbox"]:checked {
  background-color: var(--pmc-pink-dark, #ba6b65) !important;
  border-color: var(--pmc-pink-dark, #ba6b65) !important;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 16 16' fill='none' stroke='white' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round' xmlns='http://www.w3.org/2000/svg'%3E%3Cpolyline points='3.5 8.5 6.5 11.5 12.5 5.5'/%3E%3C/svg%3E") !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
  background-size: 11px 11px !important;
  box-shadow: 0 2px 6px rgba(186, 107, 101, 0.28) !important;
}

input[type="checkbox"]:checked:hover {
  background-color: #a85852 !important;
  border-color: #a85852 !important;
}

input[type="checkbox"]:focus-visible {
  outline: none !important;
  border-color: var(--pmc-pink-dark, #ba6b65) !important;
  box-shadow: 0 0 0 3px rgba(242, 183, 179, 0.45) !important;
}

input[type="radio"] {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  width: 18px !important;
  height: 18px !important;
  min-width: 18px !important;
  min-height: 18px !important;
  max-width: 18px !important;
  max-height: 18px !important;
  border: 1.5px solid #d8c2bf !important;
  border-radius: 50% !important;
  background-color: #ffffff !important;
  cursor: pointer !important;
  margin: 0 !important;
  padding: 0 !important;
  display: inline-block !important;
  vertical-align: middle !important;
  position: relative !important;
  flex-shrink: 0 !important;
  outline: none !important;
  box-shadow: none !important;
  transition: all 0.18s cubic-bezier(0.16, 1, 0.3, 1) !important;
  box-sizing: border-box !important;
}

input[type="radio"]:hover {
  border-color: var(--pmc-pink-dark, #ba6b65) !important;
  background-color: #fff8f7 !important;
}

input[type="radio"]:checked {
  border-color: var(--pmc-pink-dark, #ba6b65) !important;
  background-color: #ffffff !important;
  background-image: radial-gradient(circle, var(--pmc-pink-dark, #ba6b65) 45%, transparent 52%) !important;
  box-shadow: 0 2px 6px rgba(186, 107, 101, 0.25) !important;
}

input[type="radio"]:focus-visible {
  outline: none !important;
  border-color: var(--pmc-pink-dark, #ba6b65) !important;
  box-shadow: 0 0 0 3px rgba(242, 183, 179, 0.45) !important;
}

/* Field Checkbox Row Component */
.field-checkbox-row {
  grid-column: 1 / -1 !important;
  margin: 14px 0 6px !important;
  display: flex !important;
  align-items: center !important;
}

.field-checkbox-row label,
.field-checkbox-label {
  display: inline-flex !important;
  align-items: center !important;
  gap: 12px !important;
  cursor: pointer !important;
  font-size: 13.5px !important;
  font-weight: 600 !important;
  text-transform: none !important;
  letter-spacing: normal !important;
  color: var(--pmc-ink, #181116) !important;
  user-select: none !important;
  line-height: 1.4 !important;
  margin: 0 !important;
  transition: color 0.18s ease !important;
}

.field-checkbox-row label:hover,
.field-checkbox-label:hover {
  color: var(--pmc-pink-dark, #ba6b65) !important;
}

.field-checkbox-row label span,
.field-checkbox-label span {
  display: inline !important;
  font-size: 13.5px !important;
  font-weight: 600 !important;
  text-transform: none !important;
  letter-spacing: normal !important;
  color: inherit !important;
  margin-left: 0 !important;
}

/* Filter Option Checkbox Alignment & State */
.filter-group label,
.filter-group label.filter-option,
.filter-option-name,
.filter-in-stock-label,
.filter-in-stock-label span {
  font-family: var(--pmc-sans, 'Plus Jakarta Sans', sans-serif) !important;
  font-size: 13.5px !important;
  font-weight: 600 !important;
  color: #181116 !important;
  text-transform: none !important;
  letter-spacing: normal !important;
  line-height: 1.4 !important;
}

.filter-group label.filter-option {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  padding: 6px 8px !important;
  border-radius: 8px !important;
  cursor: pointer !important;
  transition: background 0.15s ease, opacity 0.15s ease !important;
}

.filter-group label.filter-option:hover,
.filter-in-stock-label:hover {
  background: #fdf2f1 !important;
}

.filter-group label.filter-option:hover .filter-option-name,
.filter-in-stock-label:hover span {
  color: var(--pmc-pink-dark, #ba6b65) !important;
}

.filter-group label.filter-option:has(input:checked),
.filter-in-stock-label:has(input:checked) {
  background: #fdf2f1 !important;
}

.filter-group label.filter-option:has(input:checked) .filter-option-name,
.filter-in-stock-label:has(input:checked) span {
  color: var(--pmc-pink-dark, #ba6b65) !important;
  font-weight: 750 !important;
}

.filter-group label.filter-option:has(input:checked) .filter-option-count {
  background: #f2dedb !important;
  color: var(--pmc-pink-dark, #ba6b65) !important;
}

.filter-group label:has(#shop-in-stock),
.filter-in-stock-label {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  cursor: pointer !important;
  padding: 6px 8px !important;
  border-radius: 8px !important;
  font-size: 13.5px !important;
  font-weight: 600 !important;
  color: var(--pmc-ink, #181116) !important;
  text-transform: none !important;
}

.filter-group label:has(#shop-in-stock):hover,
.filter-in-stock-label:hover {
  background: #fdf2f1 !important;
  color: var(--pmc-pink-dark, #ba6b65) !important;
}

/* ==========================================================================
   DATE PICKER & CALENDAR — PACK MY CAKE SIGNATURE PALETTE
   ========================================================================== */
input[type="date"],
input[type="datetime-local"],
input[type="time"] {
  color-scheme: light !important;
  accent-color: var(--pmc-pink-dark, #ba6b65) !important;
  font-family: var(--pmc-sans, 'Plus Jakarta Sans', sans-serif);
  cursor: pointer;
  position: relative;
}

input[type="date"]:focus,
input[type="datetime-local"]:focus,
input[type="time"]:focus {
  border-color: var(--pmc-pink-dark, #ba6b65) !important;
  box-shadow: 0 0 0 3px rgba(242, 183, 179, 0.35) !important;
  outline: none !important;
}

input[type="date"]::-webkit-calendar-picker-indicator {
  cursor: pointer;
  pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%23ba6b65' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='18' rx='2' ry='2'%3E%3C/rect%3E%3Cline x1='16' y1='2' x2='16' y2='6'%3E%3C/line%3E%3Cline x1='8' y1='2' x2='8' y2='6'%3E%3C/line%3E%3Cline x1='3' y1='10' x2='21' y2='10'%3E%3C/line%3E%3C/svg%3E");
  background-position: center;
  background-repeat: no-repeat;
  background-size: 18px 18px;
  padding: 6px;
  border-radius: 8px;
  transition: transform 0.2s cubic-bezier(0.16, 1, 0.3, 1), background-color 0.2s ease;
}

input[type="date"]:hover::-webkit-calendar-picker-indicator,
input[type="date"]::-webkit-calendar-picker-indicator:hover {
  transform: scale(1.15);
  background-color: rgba(242, 183, 179, 0.25);
}

/* Custom Floating Calendar Popover */
.pmc-calendar-popover {
  position: absolute;
  z-index: 9999;
  background: #ffffff;
  border: 1.5px solid #f2dedb;
  border-radius: 22px;
  box-shadow: 0 22px 60px rgba(24, 17, 22, 0.18), 0 8px 24px rgba(242, 183, 179, 0.25);
  padding: 18px 20px;
  width: 310px;
  font-family: var(--pmc-sans, 'Plus Jakarta Sans', sans-serif);
  color: #181116;
  opacity: 0;
  transform: translateY(8px) scale(0.97);
  pointer-events: none;
  transition: opacity 0.2s cubic-bezier(0.16, 1, 0.3, 1), transform 0.2s cubic-bezier(0.16, 1, 0.3, 1);
  box-sizing: border-box;
}

.pmc-calendar-popover.is-open {
  opacity: 1;
  transform: translateY(0) scale(1);
  pointer-events: auto;
}

.pmc-cal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
}

.pmc-cal-title {
  font-size: 14.5px;
  font-weight: 800;
  color: #181116;
  letter-spacing: -0.01em;
}

.pmc-cal-nav-btn {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  border: 1px solid #f2dedb;
  background: #fdf6f5;
  color: #ba6b65;
  display: grid;
  place-items: center;
  cursor: pointer;
  font-size: 15px;
  font-weight: 800;
  transition: all 0.2s ease;
  line-height: 1;
  padding: 0;
}

.pmc-cal-nav-btn:hover {
  background: #f2b7b3;
  color: #181116;
  border-color: #e59a95;
  transform: scale(1.08);
}

.pmc-cal-weekdays {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 2px;
  text-align: center;
  margin-bottom: 6px;
}

.pmc-cal-weekdays span {
  font-size: 10.5px;
  font-weight: 800;
  color: #ba6b65;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  padding: 4px 0;
}

.pmc-cal-days {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 3px;
}

.pmc-cal-day {
  height: 34px;
  width: 34px;
  margin: 0 auto;
  border-radius: 50%;
  border: 0;
  background: transparent;
  color: #181116;
  font-size: 12.5px;
  font-weight: 600;
  font-family: inherit;
  display: grid;
  place-items: center;
  cursor: pointer;
  transition: all 0.16s cubic-bezier(0.16, 1, 0.3, 1);
  padding: 0;
}

.pmc-cal-day:hover:not(:disabled):not(.is-selected) {
  background: #fdf2f1;
  color: #ba6b65;
  transform: scale(1.1);
}

.pmc-cal-day.is-other-month {
  color: #c7bec2;
  opacity: 0.55;
}

.pmc-cal-day.is-today:not(.is-selected) {
  border: 1.5px solid #ba6b65;
  color: #ba6b65;
  font-weight: 800;
}

.pmc-cal-day.is-selected {
  background: linear-gradient(135deg, #f2b7b3 0%, #e8a5a0 100%) !important;
  color: #181116 !important;
  font-weight: 800 !important;
  box-shadow: 0 4px 12px rgba(242, 183, 179, 0.6) !important;
  transform: scale(1.05);
}

.pmc-cal-day:disabled {
  opacity: 0.25;
  cursor: not-allowed;
}

.pmc-cal-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-top: 1px solid #f2dedb;
  margin-top: 12px;
  padding-top: 10px;
}

.pmc-cal-action {
  background: none;
  border: 0;
  font-family: inherit;
  font-size: 11.5px;
  font-weight: 700;
  color: #ba6b65;
  cursor: pointer;
  padding: 4px 8px;
  border-radius: 6px;
  transition: all 0.2s ease;
}

.pmc-cal-action:hover {
  background: #fdf2f1;
  color: #181116;
}

.pmc-cal-action.pmc-cal-today-action {
  font-weight: 800;
}

/* ==========================================================================
   FILE PICKER — PACK MY CAKE LUXURY PALETTE
   ========================================================================== */

input[type="file"] {
  width: 100%;
  min-height: 52px !important;
  border: 1.5px dashed #e29f9a !important;
  background: #fdfaf9 !important;
  border-radius: 16px !important;
  padding: 8px 14px !important;
  font-family: var(--pmc-sans, 'Plus Jakarta Sans', sans-serif) !important;
  font-size: 12.5px !important;
  color: #181116 !important;
  cursor: pointer !important;
  display: flex !important;
  align-items: center !important;
  box-sizing: border-box !important;
  transition: border-color 0.25s ease, background-color 0.25s ease, box-shadow 0.25s ease !important;
}

input[type="file"]:hover {
  border-color: #ba6b65 !important;
  background: #fff8f7 !important;
  box-shadow: 0 6px 20px rgba(242, 183, 179, 0.25) !important;
}

input[type="file"]:focus {
  border-color: #ba6b65 !important;
  box-shadow: 0 0 0 3px rgba(242, 183, 179, 0.3) !important;
  outline: none !important;
}

/* File Selector Button */
input[type="file"]::file-selector-button,
input[type="file"]::-webkit-file-upload-button {
  background: linear-gradient(135deg, #f2b7b3 0%, #e8a5a0 100%) !important;
  color: #181116 !important;
  border: 1.5px solid #e59a95 !important;
  border-radius: 999px !important;
  padding: 8px 18px !important;
  margin-right: 14px !important;
  font-family: var(--pmc-sans, 'Plus Jakarta Sans', sans-serif) !important;
  font-size: 11.5px !important;
  font-weight: 750 !important;
  letter-spacing: 0.03em !important;
  cursor: pointer !important;
  box-shadow: 0 4px 14px rgba(242, 183, 179, 0.35) !important;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1) !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
}

input[type="file"]::file-selector-button:hover,
input[type="file"]::-webkit-file-upload-button:hover {
  background: linear-gradient(135deg, #e8a5a0 0%, #ba6b65 100%) !important;
  color: #ffffff !important;
  border-color: #ba6b65 !important;
  transform: translateY(-1px) scale(1.02) !important;
  box-shadow: 0 6px 18px rgba(186, 107, 101, 0.4) !important;
}

/* File Badge Preview */
.pmc-file-selected-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 8px;
  padding: 6px 14px;
  background: #fdf2f1;
  border: 1px solid #f2dedb;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 600;
  color: #ba6b65;
  box-shadow: 0 2px 8px rgba(242, 183, 179, 0.2);
}
.pmc-file-selected-badge button {
  background: transparent;
  border: 0;
  color: #ba6b65;
  font-size: 15px;
  line-height: 1;
  cursor: pointer;
  padding: 0;
  font-weight: 800;
  display: flex;
  align-items: center;
}

/* ==========================================================================
   AUTHENTICATION FOOTER & TRACKING CHIP
   ========================================================================== */
.auth-card-footer {
  margin-top: 30px;
  padding-top: 24px;
  border-top: 1px solid var(--pmc-line, #f0e6e4);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 15px;
  text-align: center;
}

.auth-footer-prompt {
  margin: 0;
  font-size: 14px;
  color: #6d5b60;
  font-weight: 500;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 6px;
  line-height: 1.5;
}

.auth-link {
  color: var(--pmc-pink-dark, #ba6b65);
  font-weight: 750;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding-bottom: 2px;
  border-bottom: 1.5px solid rgba(186, 107, 101, 0.35);
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}

.auth-link:hover {
  color: #8c3e38;
  border-bottom-color: #8c3e38;
}

.auth-link .arrow {
  display: inline-block;
  transition: transform 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}

.auth-link:hover .arrow {
  transform: translateX(3px);
}

.auth-footer-track {
  display: flex;
  justify-content: center;
  width: 100%;
}

.auth-track-chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 8px;
  padding: 10px 20px;
  background: linear-gradient(135deg, #fffcfb 0%, #fff7f6 100%);
  border: 1px solid #f2dedb;
  border-radius: 999px;
  font-size: 13px;
  color: #6d5b60;
  text-decoration: none;
  box-shadow: 0 2px 8px rgba(186, 107, 101, 0.04);
  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}

.auth-track-chip:hover {
  background: #ffffff;
  border-color: var(--pmc-pink-dark, #ba6b65);
  color: var(--pmc-ink);
  transform: translateY(-1.5px);
  box-shadow: 0 6px 18px rgba(186, 107, 101, 0.12);
}

.auth-track-chip .auth-track-icon {
  color: var(--pmc-pink-dark, #ba6b65);
  flex-shrink: 0;
  transition: transform 0.2s ease;
}

.auth-track-chip:hover .auth-track-icon {
  transform: scale(1.1);
}

.auth-track-chip strong {
  color: var(--pmc-pink-dark, #ba6b65);
  font-weight: 750;
  display: inline-flex;
  align-items: center;
  gap: 3px;
}

.auth-track-chip .arrow {
  display: inline-block;
  transition: transform 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}

.auth-track-chip:hover .arrow {
  transform: translateX(3px);
}

/* Keep the legacy transaction/account pages coherent */
body:not([data-experience="v2"]):not(.admin-body) .site-header { border: 0; border-bottom: 1px solid var(--pmc-line); box-shadow: 0 4px 24px rgba(0, 0, 0, .06); }
body:not([data-experience="v2"]):not(.admin-body) .header-inner { min-height: 78px; padding: 10px 0; }
body:not([data-experience="v2"]):not(.admin-body) .brand { display: flex; }
body:not([data-experience="v2"]):not(.admin-body) .brand strong { font-family: var(--pmc-sans); font-weight: 800; letter-spacing: .06em; }
body:not([data-experience="v2"]):not(.admin-body) .card,
body:not([data-experience="v2"]):not(.admin-body) .success-card { border-radius: 20px; border-color: var(--pmc-line); box-shadow: var(--pmc-shadow); }
body:not([data-experience="v2"]):not(.admin-body) .site-footer { background: #000000; color: #fff; border: 0; }

.mobile-dock { display: none; }

@media (max-width: 1100px) {
  .header-main { grid-template-columns: 240px minmax(260px,1fr) auto; gap: 22px; }
  .category-nav-inner { justify-content: flex-start; }
  .hero-v2-grid { grid-template-columns: 1fr 1fr; }
  .hero-copy { padding-right: 38px; }
  .hero-proof { gap: 16px; }
  .trust-strip-grid { grid-template-columns: 1fr 1fr; }
  .trust-strip-grid > div:nth-child(2) { border-right: 0; }
  .trust-strip-grid > div { padding-block: 11px; justify-content: flex-start; }
  .footer-main { grid-template-columns: 1.6fr repeat(2,1fr); }
  .shop-layout { grid-template-columns: 210px 1fr; gap: 28px; }
}

@media (max-width: 820px) {
  body:not(.admin-body) { padding-bottom: 63px; }
  body:not(.admin-body) { --site-gutter: 15px; }
  .announcement-inner { justify-content: center; }
  .announcement-inner > span { display: none; }
  .v2-header { top: 0; }
  .header-main { min-height: 67px; grid-template-columns: 40px 1fr auto; gap: 10px; }
  .brand-v2 { justify-self: center; }
  .brand-v2 img { width: 39px; height: 39px; }
  .brand-v2 strong { font-size: 15px; }
  .brand-v2 small { display: none; }
  .header-search { display: none; position: absolute; top: 59px; left: 15px; right: 15px; z-index: 70; box-shadow: var(--pmc-shadow); }
  .header-search.mobile-open { display: grid; }
  .v2-header .hamburger, .v2-header .mobile-search-trigger { display: flex; }
  .v2-header .account-link { display: none; }
  .category-nav { position: fixed; inset: 101px 0 63px; background: #fff; transform: translateX(-105%); transition: transform .24s ease; z-index: 80; border: 0; }
  .category-nav.open { transform: translateX(0); }
  .category-nav-inner { width: 100% !important; height: 100%; display: flex; flex-direction: column; align-items: stretch; justify-content: flex-start; padding: 22px 20px !important; gap: 0; overflow-y: auto; }
  .category-nav a { font-family: var(--pmc-serif); font-size: 23px; padding: 13px 0; border-bottom: 1px solid var(--pmc-line); }
  .hero-v2 { background: var(--pmc-blush); }
  .hero-v2-grid { width: 100% !important; display: flex; flex-direction: column; min-height: 0; }
  .hero-copy { padding: 48px 20px 35px; order: 1; }
  .hero-copy h1 { font-size: clamp(42px,12vw,60px); }
  .hero-product-stage { min-height: 410px; width: 100%; order: 2; }
  .hero-box-main { width: 86%; height: 72%; }
  .hero-box-small { width: 39%; height: 34%; left: -4%; }
  .stage-copy { left: 24px; top: 25px; }
  .stage-seal { right: 16px; top: 20px; width: 70px; height: 70px; font-size: 6px; }
  .hero-proof { margin-top: 31px; }
  .trust-strip-grid { grid-template-columns: 1fr 1fr; padding-block: 9px; }
  .trust-strip-grid > div { padding: 11px 6px; }
  .trust-strip small { display: none; }
  .section { padding-block: 65px; }
  .split-heading, .section-heading-row { align-items: flex-start; flex-direction: column; gap: 15px; }
  .category-showcase { grid-template-columns: 1fr 1fr; gap: 16px; }
  .category-tile { min-height: 300px; }
  .product-grid { grid-template-columns: 1fr 1fr; gap: 24px 10px; }
  .product-card h3 { font-size: 11px; }
  .product-meta { align-items: flex-end; }
  .custom-grid, .faq-grid, .newsletter-inner, .content-grid, .enquiry-grid { grid-template-columns: 1fr; gap: 42px; }
  .size-grid { grid-template-columns: 1fr 1fr; border-radius: 16px; }
  .size-grid a { min-height: 104px; padding: 20px 16px; border-bottom: 1px solid #ebdcd6; border-right: 1px solid #ebdcd6; }
  .size-grid a:nth-child(2n) { border-right: 0; }
  .size-grid a:last-child { grid-column: 1 / -1; border-bottom: 0; border-right: 0; }
  .audience-card { min-height: 430px; padding: 34px 28px; align-items: flex-start; }
  .custom-visual { min-height: 390px; }
  .guide-grid { grid-template-columns: 1fr; }
  .guide-card { min-height: 205px; }
  .footer-main { grid-template-columns: 1fr 1fr; gap: 38px 25px; }
  .footer-brand { grid-column: 1 / -1; }
  .footer-bottom { flex-direction: column; gap: 8px; }
  .mobile-dock { position: fixed; display: grid; grid-template-columns: repeat(4,1fr); left: 0; right: 0; bottom: 0; z-index: 100; height: 63px; background: #fff; border-top: 1px solid var(--pmc-line); box-shadow: 0 -8px 24px rgba(47,35,32,.07); }
  .dock-item { appearance: none; border: 0; background: transparent; color: var(--pmc-muted); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; font-family: var(--pmc-sans); }
  .dock-item > span { font-size: 20px; line-height: 1; }
  .dock-item small { font-size: 8px; font-weight: 600; }
  .dock-item.active { color: var(--pmc-pink-dark); }
  .dock-cart-icon { position: relative; }
  .dock-badge { position: absolute; right: -11px; top: -6px; width: 16px; height: 16px; border-radius: 50%; display: grid; place-items: center; background: var(--pmc-cocoa); color: #fff; font: 700 8px var(--pmc-sans); }
  .shop-layout { display: block; }
  .filter-sidebar { display: none; position: fixed; inset: auto 0 63px; z-index: 90; background: #fff; padding: 20px; max-height: 75vh; overflow: auto; box-shadow: 0 -20px 60px rgba(43,32,29,.2); }
  .filter-sidebar.open { display: block; }
  .filter-toggle { display: inline-flex; min-height: 40px; }
  .catalog-grid { grid-template-columns: 1fr 1fr; }
  .product-detail { grid-template-columns: 1fr; gap: 34px; }
  .product-gallery { position: relative; top: 0; display: block; }
  .product-main-image { display: block; }
  .thumb-grid { flex-direction: row; overflow-x: auto; margin-top: 9px; }
  .thumb-btn { flex: 0 0 68px; width: 68px; height: 68px; }
  .product-purchase h1 { font-size: 36px; }
  .related-section { margin-top: 70px; }
  .content-sidebar { position: static; }
  .simple-header-inner { min-height: 68px; }
  .simple-nav a:not(.simple-cart) { display: none; }
  .simple-footer-inner { align-items: flex-start; flex-direction: column; }
  .simple-footer-links { justify-content: flex-start; }
}

body:not(.admin-body) :focus-visible {
  outline: 3px solid #9b555a;
  outline-offset: 3px;
}

/* Themed storefront select menus */
.pmc-select {
  position: relative;
  width: 100%;
}

.pmc-select-native {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: 0 !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

.pmc-select-trigger {
  width: 100%;
  min-height: 46px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 10px 16px;
  border: 1.5px solid #f2dedb;
  border-radius: 14px;
  background: #ffffff;
  color: #181116;
  box-shadow: 0 4px 14px rgba(242, 183, 179, 0.08);
  font: inherit;
  font-size: 13px;
  font-weight: 700;
  text-align: left;
  cursor: pointer;
}

.finder-select-wrap .pmc-select-trigger,
.catalog-toolbar .pmc-select-trigger {
  min-height: 48px;
  border-radius: 999px;
  padding-inline: 20px;
}

.pmc-select-trigger:hover,
.pmc-select.is-open .pmc-select-trigger {
  border-color: #f2b7b3;
  background: #fffafa;
}

.pmc-select-trigger:focus-visible {
  outline: none;
  border-color: #e09b96;
  box-shadow: 0 0 0 4px rgba(242, 183, 179, 0.3);
}

.pmc-select-trigger:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}

.pmc-select-value {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.pmc-select-arrow {
  flex: 0 0 auto;
  width: 8px;
  height: 8px;
  margin-right: 2px;
  border-right: 2px solid #ba6b65;
  border-bottom: 2px solid #ba6b65;
  transform: translateY(-2px) rotate(45deg);
  transition: transform 0.2s ease;
}

.pmc-select.is-open .pmc-select-arrow {
  transform: translateY(2px) rotate(225deg);
}

.pmc-select-menu {
  position: fixed;
  z-index: 3000;
  overflow-x: hidden;
  overflow-y: scroll;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  padding: 7px;
  border: 1.5px solid #f2dedb;
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.98);
  box-shadow: 0 20px 50px rgba(24, 17, 22, 0.2);
  scrollbar-width: thin;
  scrollbar-color: #e09b96 #fdf2f1;
}

.pmc-select-menu[hidden] {
  display: none;
}

.pmc-select-menu::-webkit-scrollbar {
  width: 11px;
}

.pmc-select-menu::-webkit-scrollbar-track {
  margin-block: 8px;
  border-radius: 999px;
  background: #fdf2f1;
}

.pmc-select-menu::-webkit-scrollbar-thumb {
  border: 3px solid #fdf2f1;
  border-radius: 999px;
  background: #e09b96;
}

.pmc-select-option {
  width: 100%;
  min-height: 44px;
  display: flex;
  align-items: center;
  padding: 10px 13px;
  border: 0;
  border-radius: 11px;
  background: transparent;
  color: #181116;
  font: inherit;
  font-size: 13px;
  font-weight: 650;
  text-align: left;
  cursor: pointer;
}

.pmc-select-option:hover,
.pmc-select-option.is-active {
  background: #fdf2f1;
  color: #9b555a;
}

.pmc-select-option.is-selected {
  background: #f2b7b3;
  color: #181116;
  font-weight: 800;
}

.pmc-select-option.is-selected::after {
  content: '✓';
  margin-left: auto;
  padding-left: 14px;
}

.pmc-select-option:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

@media (max-width: 600px) {
  .pmc-select-menu {
    border-radius: 16px;
    padding: 6px;
  }

  .pmc-select-option {
    min-height: 48px;
    font-size: 14px;
  }
}


@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    scroll-behavior: auto !important;
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}

/* ================================================================
   PACK MY CAKE ADMIN 3.0 — COMMERCE WORKSPACE
   ================================================================ */
.admin-body {
  --admin-bg: #f4f6fa;
  --admin-surface: #ffffff;
  --admin-ink: #172033;
  --admin-muted: #667085;
  --admin-line: #e7eaf0;
  --admin-accent: #f2b7b3;
  --admin-accent-soft: rgba(242, 183, 179, 0.18);
  --admin-accent-dark: #ba6b65;
  --admin-sidebar: #101828;
  --admin-green: #12a06a;
  --admin-amber: #d88818;
  --admin-red: #d94c5b;
  background: var(--admin-bg) !important;
  color: var(--admin-ink) !important;
  font-family: "Plus Jakarta Sans", "DM Sans", sans-serif !important;
}

.admin-body * { box-sizing: border-box; }
.admin-layout { grid-template-columns: 264px minmax(0, 1fr); }
.admin-sidebar {
  width: auto;
  padding: 20px 14px 16px;
  background: var(--admin-sidebar) !important;
  border-right: 0;
  box-shadow: 14px 0 40px rgba(16, 24, 40, .06);
}
.admin-sidebar-header { margin-bottom: 12px; padding: 0 10px 19px; border-color: rgba(255,255,255,.08); }
.admin-sidebar .admin-brand img { width: 38px; height: 38px; padding: 3px; border-radius: 11px; background: #fff; }
.admin-sidebar .admin-brand strong { font-size: 12px; letter-spacing: .07em; }
.admin-sidebar .admin-badge { color: #98a2b3 !important; font-size: 7px; letter-spacing: .14em; }
.admin-nav-section-title { padding: 15px 11px 7px; color: #667085; font-size: 8px; font-weight: 800; letter-spacing: .14em; }
.admin-nav { gap: 3px; }
.admin-nav a {
  min-height: 41px;
  gap: 11px;
  padding: 8px 11px;
  color: #98a2b3;
  border: 1px solid transparent;
  border-radius: 9px;
  font-size: 11px;
  font-weight: 650;
}
.admin-nav a svg { width: 17px; height: 17px; opacity: .86; }
.admin-nav a:hover { background: rgba(255,255,255,.055); color: #f8fafc; }
.admin-nav a.active {
  background: linear-gradient(135deg, #f2b7b3, #e59f9a) !important;
  border-color: rgba(255,255,255,.12) !important;
  color: #101828 !important;
  font-weight: 750 !important;
  box-shadow: 0 8px 22px rgba(242, 183, 179, .28) !important;
}
.admin-nav a.active svg { stroke: #101828 !important; }
.nav-pill-badge.highlight,
.nav-pill-badge.warning { margin-left: auto; background: rgba(255,255,255,.18); color: inherit; }
.admin-nav a:not(.active) .nav-pill-badge { background: #f97066; color: #fff; }
.admin-sidebar-footer { padding-top: 12px; border-top: 1px solid rgba(255,255,255,.08); }
.sidebar-action-btn { color: #98a2b3; }
.sidebar-action-btn.store-link { background: rgba(255,255,255,.055); border-color: rgba(255,255,255,.06); }

.admin-main { background: var(--admin-bg) !important; }
.admin-topbar {
  min-height: 78px;
  padding: 13px clamp(20px, 2.7vw, 40px);
  background: rgba(255,255,255,.88) !important;
  border-color: var(--admin-line) !important;
  backdrop-filter: blur(18px);
}
.admin-breadcrumb { color: #98a2b3; font-size: 8px; }
.admin-page-heading { color: var(--admin-ink); font-size: 22px; font-weight: 750; }
.admin-topbar-right { gap: 8px; }
.admin-notification-btn {
  position: relative;
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  border: 1px solid var(--admin-line);
  border-radius: 10px;
  background: #fff;
  color: #475467;
  text-decoration: none;
}
.admin-notification-btn > span {
  position: absolute;
  top: -5px;
  right: -5px;
  min-width: 17px;
  height: 17px;
  display: grid;
  place-items: center;
  padding: 0 4px;
  border: 2px solid #fff;
  border-radius: 999px;
  background: #f04438;
  color: #fff;
  font-size: 7px;
  font-weight: 800;
}
.admin-user-profile { border-color: var(--admin-line); box-shadow: none; }
.admin-avatar { background: var(--admin-accent); color: #181116; font-weight: 800; }
.admin-content-wrap { max-width: 1680px; padding: 30px clamp(20px, 2.7vw, 40px) 80px; }

.admin-body .card,
.admin-card {
  border: 1px solid var(--admin-line) !important;
  border-radius: 17px;
  background: var(--admin-surface) !important;
  box-shadow: 0 1px 2px rgba(16,24,40,.02), 0 10px 32px rgba(16,24,40,.035) !important;
}
.admin-body .card h2,
.admin-body .card h3 { color: var(--admin-ink); }
.admin-card-eyebrow,
.admin-eyebrow { color: var(--admin-accent-dark, #ba6b65); }
.admin-page-intro,
.dashboard-welcome {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;
  margin-bottom: 24px;
}
.admin-page-intro > div,
.dashboard-welcome > div:first-child { max-width: 760px; }
.admin-eyebrow {
  display: block;
  margin-bottom: 7px;
  font-size: 9px;
  font-weight: 800;
  letter-spacing: .13em;
  text-transform: uppercase;
}
.admin-page-intro h2,
.dashboard-welcome h2 { margin: 0 0 7px; color: var(--admin-ink); font-size: clamp(24px, 3vw, 34px); line-height: 1.08; letter-spacing: -.045em; }
.admin-page-intro p,
.dashboard-welcome p { margin: 0; color: var(--admin-muted); font-size: 12px; line-height: 1.65; }
.dashboard-actions { display: flex; gap: 8px; }

.admin-body .btn { border-radius: 9px; font-size: 10px; }
.admin-body .btn-primary {
  background: linear-gradient(135deg, #f2b7b3 0%, #e8a5a0 100%) !important;
  border: 1.5px solid #f2b7b3 !important;
  color: #181116 !important;
  font-weight: 750 !important;
  box-shadow: 0 6px 18px rgba(242, 183, 179, 0.42) !important;
}
.admin-body .btn-primary:hover {
  background: linear-gradient(135deg, #e8a5a0 0%, #df9590 100%) !important;
  border-color: #e8a5a0 !important;
  color: #181116 !important;
  box-shadow: 0 8px 24px rgba(242, 183, 179, 0.55) !important;
  transform: translateY(-1px);
}
.admin-body .btn-secondary { border-color: #dfe3eb !important; color: #344054 !important; }
.admin-body .btn-danger { background: #fff5f5 !important; border-color: #ffd5d8 !important; color: #b42331 !important; }
.admin-body .field input:not([type="checkbox"]),
.admin-body .field select,
.admin-body .field textarea,
.admin-catalog-toolbar input,
.admin-catalog-toolbar select,
.admin-filterbar input,
.admin-filterbar select,
.admin-body .inline-form select,
.admin-body .inline-form input {
  border-color: #dfe3eb !important;
  border-radius: 9px;
  background: #fff !important;
  color: var(--admin-ink) !important;
}
.admin-body .field input:focus,
.admin-body .field select:focus,
.admin-body .field textarea:focus,
.admin-catalog-toolbar input:focus,
.admin-catalog-toolbar select:focus,
.admin-filterbar input:focus,
.admin-filterbar select:focus { border-color: #8b84ff !important; box-shadow: 0 0 0 3px rgba(99,91,255,.1) !important; }
.admin-body .field label { color: #475467; }
.admin-body input[type="file"] { border-color: #c9c6ff !important; background: #fafaff !important; }
.admin-body input[type="file"]::file-selector-button,
.admin-body input[type="file"]::-webkit-file-upload-button { border-color: #cbc8ff; background: var(--admin-accent-soft); color: #443ca9; }

.admin-metric-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 12px;
  margin-bottom: 22px;
}
.admin-metric-card {
  position: relative;
  min-width: 0;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 18px;
  border: 1px solid var(--admin-line);
  border-radius: 15px;
  background: #fff;
  box-shadow: 0 8px 28px rgba(16,24,40,.035);
}
.admin-metric-card::before { content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 3px; background: var(--metric-color, #f2b7b3); }
.admin-metric-card::after { content: ""; position: absolute; top: -25px; right: -25px; width: 75px; height: 75px; border-radius: 50%; background: var(--metric-soft, #fdf2f1); }
.admin-metric-card > * { position: relative; z-index: 1; }
.admin-metric-card > span { color: #667085; font-size: 9px; font-weight: 750; letter-spacing: .04em; text-transform: uppercase; }
.admin-metric-card > strong { overflow-wrap: anywhere; color: var(--admin-ink); font-size: clamp(21px, 2vw, 28px); letter-spacing: -.055em; }
.admin-metric-card > small { color: #98a2b3; font-size: 9px; line-height: 1.4; }
.metric-violet { --metric-color: #f2b7b3; --metric-soft: #fdf2f1; }
.metric-blue { --metric-color: #2e90fa; --metric-soft: #eaf4ff; }
.metric-green { --metric-color: #12a06a; --metric-soft: #e8f8f1; }
.metric-amber { --metric-color: #e99b28; --metric-soft: #fff4dd; }
.metric-red { --metric-color: #e85d68; --metric-soft: #ffedef; }
.metric-ink { --metric-color: #344054; --metric-soft: #eef1f5; }
.metric-featured { background: var(--admin-sidebar) !important; border-color: var(--admin-sidebar); }
.metric-featured > span, .metric-featured > small { color: #98a2b3; }
.metric-featured > strong { color: #fff; }
.metric-featured::after { background: rgba(255,255,255,.06); }
.metric-trend.is-up { color: #19a974; }
.metric-trend.is-down { color: #e45560; }

.admin-filterbar {
  display: flex;
  align-items: center;
  gap: 9px;
  margin-bottom: 16px;
  padding: 12px;
  border: 1px solid var(--admin-line);
  border-radius: 14px;
  background: #fff;
  box-shadow: 0 5px 20px rgba(16,24,40,.025);
}
.admin-filterbar .admin-search-field--wide { flex: 1 1 320px; }
.admin-filterbar input,
.admin-filterbar select { min-height: 40px; padding: 9px 11px; border: 1px solid #dfe3eb; font: inherit; font-size: 10px; }
.admin-filterbar select { min-width: 150px; }
.admin-filterbar .admin-search-field input { width: 100%; padding-left: 38px; }
.admin-filter-tabs { display: flex; flex-wrap: wrap; gap: 7px; margin-bottom: 17px; }

/* Dashboard */
.dashboard-metrics { grid-template-columns: 1.35fr repeat(4, minmax(0, 1fr)); }
.dashboard-analytics-grid { display: grid; grid-template-columns: minmax(0, 1.8fr) minmax(300px, .8fr); gap: 18px; }
.dashboard-detail-grid { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(360px, .9fr); gap: 18px; }
.dashboard-chart-card,
.fulfilment-card,
.dashboard-products-card,
.dashboard-activity-card { min-width: 0; }
.chart-summary { display: grid; gap: 4px; text-align: right; }
.chart-summary span { color: #98a2b3; font-size: 8px; font-weight: 750; letter-spacing: .07em; text-transform: uppercase; }
.chart-summary strong { color: var(--admin-ink); font-size: 19px; }
.revenue-chart { position: relative; height: 242px; display: grid; grid-template-columns: repeat(14, minmax(12px, 1fr)); align-items: end; gap: clamp(4px, .8vw, 10px); margin-top: 25px; padding: 8px 0 0; }
.chart-grid-lines { position: absolute; inset: 0 0 25px; display: flex; flex-direction: column; justify-content: space-between; pointer-events: none; }
.chart-grid-lines i { display: block; width: 100%; height: 1px; background: #eef0f4; }
.revenue-bar-column { position: relative; z-index: 1; height: 100%; display: grid; grid-template-rows: 17px minmax(0,1fr) 19px; align-items: end; gap: 3px; }
.revenue-bar-value { overflow: hidden; color: transparent; font-size: 7px; text-align: center; white-space: nowrap; transition: color .2s; }
.revenue-bar-column:hover .revenue-bar-value { color: #667085; overflow: visible; }
.revenue-bar-track { position: relative; width: 100%; height: 100%; display: flex; align-items: end; overflow: hidden; border-radius: 5px 5px 2px 2px; }
.revenue-bar-track span { width: 100%; min-height: 2px; border-radius: 5px 5px 2px 2px; background: linear-gradient(180deg, #f2b7b3, #e59f9a); transition: height .35s ease, filter .2s; }
.revenue-bar-column:hover .revenue-bar-track span { filter: brightness(1.12); }
.revenue-bar-column small { color: #98a2b3; font-size: 7px; text-align: center; }
.chart-footer { display: flex; justify-content: space-between; padding-top: 10px; border-top: 1px solid #eef0f4; color: #98a2b3; font-size: 8px; }
.fulfilment-visual { display: grid; grid-template-columns: 130px minmax(0, 1fr); gap: 23px; align-items: center; padding: 28px 0; }
.fulfilment-donut { width: 130px; aspect-ratio: 1; display: grid; place-items: center; border-radius: 50%; background: conic-gradient(#f2b7b3 calc(var(--delivered) * 1%), #eceef4 0); }
.fulfilment-donut::before { content: ""; width: 88px; aspect-ratio: 1; border-radius: 50%; background: #fff; }
.fulfilment-donut > div { position: absolute; display: grid; gap: 1px; text-align: center; }
.fulfilment-donut strong { color: var(--admin-ink); font-size: 22px; letter-spacing: -.05em; }
.fulfilment-donut span { color: #98a2b3; font-size: 8px; }
.fulfilment-legend { display: grid; gap: 8px; }
.fulfilment-legend a { display: flex; justify-content: space-between; color: #667085; font-size: 9px; text-decoration: none; }
.fulfilment-legend a > span { display: flex; align-items: center; gap: 7px; }
.fulfilment-legend strong { color: #344054; }
.legend-dot { width: 7px; height: 7px; border-radius: 50%; }
.legend-delivered { background: #f2b7b3; }.legend-shipped { background: #2e90fa; }.legend-processing { background: #e99b28; }.legend-pending { background: #98a2b3; }.legend-cancelled { background: #e85d68; }
.dashboard-card-link { display: flex; justify-content: space-between; margin: 2px -24px -24px; padding: 15px 24px; border-top: 1px solid var(--admin-line); color: #ba6b65; font-size: 9px; font-weight: 750; text-decoration: none; }
.dashboard-card-link:hover { background: #fdf6f5; }
.dashboard-product-list { display: grid; margin-top: 8px; }
.dashboard-product-row { display: grid; grid-template-columns: 24px 46px minmax(0,1fr) auto; gap: 11px; align-items: center; padding: 12px 0; border-bottom: 1px solid #eef0f4; }
.dashboard-product-row:last-child { border: 0; }
.product-rank { color: #98a2b3; font-size: 9px; font-weight: 800; text-align: center; }
.dashboard-product-row img { width: 46px; height: 46px; object-fit: contain; border: 1px solid #eceef2; border-radius: 9px; background: #fafafa; }
.dashboard-product-info { min-width: 0; display: grid; gap: 5px; }
.dashboard-product-info strong { overflow: hidden; color: #344054; font-size: 10px; text-overflow: ellipsis; white-space: nowrap; }
.dashboard-product-info > span { height: 3px; overflow: hidden; border-radius: 999px; background: #eef0f5; }
.dashboard-product-info > span i { display: block; height: 100%; border-radius: inherit; background: #f2b7b3; }
.dashboard-product-info small { color: #98a2b3; font-size: 8px; }
.stock-number { color: #667085; font-size: 8px; white-space: nowrap; }.stock-number.is-low { color: #d94c5b; font-weight: 750; }
.activity-timeline { display: grid; margin-top: 5px; }
.activity-item { position: relative; min-width: 0; display: grid; grid-template-columns: 34px minmax(0,1fr) auto; gap: 10px; align-items: center; padding: 11px 0; color: inherit; border-bottom: 1px solid #eef0f4; text-decoration: none; }
.activity-item:last-child { border: 0; }
.activity-icon { width: 31px; height: 31px; display: grid; place-items: center; border-radius: 9px; font-size: 9px; font-weight: 800; }
.activity-order { background: #eaf4ff; color: #1672c4; }.activity-enquiry { background: #fdf2f1; color: #ba6b65; }
.activity-item > span:nth-child(2) { min-width: 0; display: grid; gap: 3px; }
.activity-item strong { overflow: hidden; color: #344054; font-size: 9px; text-overflow: ellipsis; white-space: nowrap; }
.activity-item small, .activity-item time { color: #98a2b3; font-size: 7px; }
.dashboard-quick-strip { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 18px 20px; border: 1px solid #f2b7b3; border-radius: 15px; background: #fdf3f2; }
.dashboard-quick-strip > div:first-child { display: grid; gap: 2px; }.dashboard-quick-strip span { color: #ba6b65; font-size: 8px; font-weight: 800; text-transform: uppercase; }.dashboard-quick-strip strong { color: #312d69; font-size: 11px; }
.dashboard-quick-strip > div:last-child { display: flex; flex-wrap: wrap; gap: 7px; }.dashboard-quick-strip a { padding: 8px 10px; border: 1px solid #f2b7b3; border-radius: 8px; background: #fff; color: #ba6b65; font-size: 8px; font-weight: 700; text-decoration: none; }

/* Enquiry workspace */
.enquiry-workspace,
.customer-workspace { display: grid; grid-template-columns: minmax(0, 1fr); gap: 18px; align-items: start; }
.enquiry-workspace.has-detail,
.customer-workspace.has-detail { grid-template-columns: minmax(480px, 1fr) minmax(350px, 430px); }
.enquiry-list-card,
.customer-list-card { min-width: 0; padding-bottom: 8px !important; }
.enquiry-list { display: grid; margin: 7px -10px 0; }
.enquiry-row { min-width: 0; display: grid; grid-template-columns: 38px minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 13px 11px; border-bottom: 1px solid #eef0f4; border-radius: 10px; color: inherit; text-decoration: none; }
.enquiry-row:hover, .enquiry-row.is-selected { background: #fdf8f7; }.enquiry-row.is-selected { box-shadow: inset 3px 0 #f2b7b3; }
.enquiry-type-icon { width: 36px; height: 36px; display: grid; place-items: center; border-radius: 10px; background: #eef0f5; color: #475467; font-size: 10px; font-weight: 800; }
.type-wholesale { background: #fff1d9; color: #9e620b; }.type-custom_packaging { background: #efeeff; color: #5149bc; }.type-restock_alert { background: #e7f8f0; color: #147551; }.type-support { background: #eaf4ff; color: #1869ae; }
.enquiry-row-main { min-width: 0; display: grid; gap: 3px; }
.enquiry-row-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; }.enquiry-row-top strong { color: #344054; font-size: 10px; }.enquiry-row-top time { color: #98a2b3; font-size: 7px; white-space: nowrap; }
.enquiry-row-meta { color: #7a73c8; font-size: 7px; font-weight: 700; text-transform: uppercase; }.enquiry-row-message { overflow: hidden; color: #667085; font-size: 9px; text-overflow: ellipsis; white-space: nowrap; }
.enquiry-row-flags { display: flex; align-items: center; gap: 8px; }
.status-chip { display: inline-flex; align-items: center; width: fit-content; padding: 4px 7px; border: 1px solid transparent; border-radius: 999px; font-size: 7px; font-weight: 750; white-space: nowrap; }
.status-new { background: #eaf4ff; color: #1769aa; }.status-contacted { background: #f2f4f7; color: #475467; }.status-qualified { background: #efeeff; color: #554dcc; }.status-quoted { background: #fff2dc; color: #95600c; }.status-won { background: #e8f8f1; color: #147551; }.status-closed { background: #f2f4f7; color: #667085; }.status-spam, .status-cancelled { background: #ffedef; color: #b42331; }
.priority-dot { width: 7px; height: 7px; border-radius: 50%; background: #98a2b3; }.priority-low { background: #98a2b3; }.priority-normal { background: #2e90fa; }.priority-high { background: #e99b28; }.priority-urgent { background: #e85d68; box-shadow: 0 0 0 3px #ffedef; }
.enquiry-detail-card,
.customer-detail-card { position: sticky; top: 95px; min-width: 0; max-height: calc(100vh - 118px); overflow-y: auto; }
.enquiry-detail-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 18px; padding-bottom: 17px; border-bottom: 1px solid var(--admin-line); }.enquiry-detail-header h2 { margin: 4px 0 !important; font-size: 20px !important; }.enquiry-detail-header p { margin: 0; color: #98a2b3; font-size: 8px; }
.enquiry-close { width: 30px; height: 30px; display: grid; place-items: center; flex: 0 0 auto; border: 1px solid var(--admin-line); border-radius: 8px; color: #667085; font-size: 18px; text-decoration: none; }
.enquiry-contact-actions { display: flex; flex-wrap: wrap; gap: 7px; padding: 16px 0; }
.enquiry-contact-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; margin: 0 0 18px; }.enquiry-contact-grid > div { min-width: 0; padding: 10px; border: 1px solid #eceef2; border-radius: 9px; background: #fafbfc; }.enquiry-contact-grid dt { margin-bottom: 4px; color: #98a2b3; font-size: 7px; font-weight: 750; text-transform: uppercase; }.enquiry-contact-grid dd { overflow-wrap: anywhere; margin: 0; color: #344054; font-size: 9px; font-weight: 650; }
.enquiry-payload { margin-bottom: 18px; padding: 14px; border: 1px solid #e7e5ff; border-radius: 11px; background: #fafaff; }.enquiry-payload h3, .customer-history h3 { margin: 0 0 10px !important; font-size: 10px !important; }.enquiry-payload > div { display: grid; grid-template-columns: minmax(95px,.65fr) minmax(0,1.35fr); gap: 12px; padding: 7px 0; border-bottom: 1px solid #eeecff; }.enquiry-payload > div span { color: #7c75ac; font-size: 7px; text-transform: uppercase; }.enquiry-payload > div strong { overflow-wrap: anywhere; color: #344054; font-size: 8px; font-weight: 600; line-height: 1.5; }.enquiry-attachment { display: block; margin-top: 12px; color: #554dcc; font-size: 8px; font-weight: 750; }
.enquiry-update-form { padding-top: 17px; border-top: 1px solid var(--admin-line); }
.admin-empty-state { display: grid; place-items: center; padding: 46px 20px; color: #98a2b3; text-align: center; }.admin-empty-state h3 { margin: 8px 0 3px !important; }.admin-empty-state p { margin: 0; font-size: 9px; }

/* Customer intelligence */
.customer-table-wrap { width: 100%; overflow-x: auto; }.customer-table { width: 100%; border-collapse: collapse; }.customer-table th { padding: 10px 9px; color: #98a2b3; border-bottom: 1px solid var(--admin-line); font-size: 7px; letter-spacing: .08em; text-align: left; text-transform: uppercase; }.customer-table td { padding: 12px 9px; border-bottom: 1px solid #eef0f4; color: #667085; font-size: 9px; }.customer-table tbody tr:hover { background: #fbfbfe; }
.customer-cell { min-width: 190px; display: flex; align-items: center; gap: 10px; }.customer-avatar { width: 34px; height: 34px; display: grid; place-items: center; flex: 0 0 auto; border-radius: 10px; background: #efeeff; color: #554dcc; font-size: 9px; font-weight: 800; }.customer-cell > div { min-width: 0; display: grid; gap: 3px; }.customer-cell strong { overflow: hidden; color: #344054; font-size: 9px; text-overflow: ellipsis; white-space: nowrap; }.customer-cell span:not(.customer-avatar) { color: #98a2b3; font-size: 7px; }.customer-tags { display: flex; flex-wrap: wrap; gap: 4px; }.table-row-link { color: #554dcc; font-size: 8px; font-weight: 750; text-decoration: none; white-space: nowrap; }
.customer-profile-value { display: grid; gap: 4px; margin: 16px 0 0; padding: 17px; border-radius: 12px; background: var(--admin-sidebar); }.customer-profile-value span { color: #98a2b3; font-size: 7px; font-weight: 750; text-transform: uppercase; }.customer-profile-value strong { color: #fff; font-size: 25px; letter-spacing: -.05em; }.customer-profile-value small { color: #98a2b3; font-size: 8px; }
.customer-history { margin-top: 17px; padding-top: 17px; border-top: 1px solid var(--admin-line); }.customer-history > a { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 9px 0; border-bottom: 1px solid #eef0f4; color: inherit; text-decoration: none; }.customer-history > a > span { display: grid; gap: 3px; }.customer-history > a > span:last-child { text-align: right; }.customer-history strong { color: #344054; font-size: 8px; }.customer-history small, .admin-muted-copy { color: #98a2b3; font-size: 7px; }

/* Existing management pages, now aligned to the workspace */
.admin-body .table-responsive { border-color: var(--admin-line); border-radius: 12px; }.admin-body .data-table th { background: #f8f9fb; color: #7d8798; }.admin-body .data-table td { color: #475467; }.admin-body .product-table-thumb { border: 1px solid #eceef2; background: #fafbfc; }
.admin-categories-grid { grid-template-columns: minmax(300px,.72fr) minmax(520px,1.28fr); }.admin-homepage-grid { grid-template-columns: minmax(340px,.78fr) minmax(520px,1.22fr); }.admin-slide-edit-preview { width: 100%; max-height: 150px; object-fit: cover; display: block; margin-bottom: 10px; border: 1px solid var(--admin-line); border-radius: 10px; }
.admin-settings-form { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; align-items: start; }.admin-settings-form > .card { margin-bottom: 0; }.admin-settings-form > div:nth-last-child(1) { grid-column: 1 / -1; }.admin-orders-card { padding-top: 20px !important; }
.form-error, .form-success { position: relative; margin: 0 0 18px; padding: 12px 14px 12px 38px; }.form-error::before, .form-success::before { position: absolute; left: 14px; font-weight: 800; }.form-error::before { content: "!"; }.form-success::before { content: "✓"; }

/* Storefront enquiry submit feedback */
.enquiry-submit-status { margin: 10px 0 0; color: #5f5671; font-size: 12px; line-height: 1.5; }
.enquiry-submit-status.is-success { color: #166b49; }.enquiry-submit-status.is-error { color: #a42b39; }
[data-whatsapp-form] button[disabled] { opacity: .72; cursor: wait; }

@media (max-width: 1320px) {
  .admin-metric-grid { grid-template-columns: repeat(3, minmax(0,1fr)); }
  .dashboard-metrics { grid-template-columns: repeat(3, minmax(0,1fr)); }
  .enquiry-workspace.has-detail,
  .customer-workspace.has-detail { grid-template-columns: minmax(430px,1fr) minmax(320px,380px); }
}

@media (max-width: 1120px) {
  .admin-settings-form { grid-template-columns: 1fr; }.admin-settings-form > div:nth-last-child(1) { grid-column: 1; }
  .dashboard-analytics-grid,
  .dashboard-detail-grid { grid-template-columns: 1fr; }
  .enquiry-workspace.has-detail,
  .customer-workspace.has-detail { grid-template-columns: 1fr; }
  .enquiry-detail-card,
  .customer-detail-card { position: static; max-height: none; grid-row: 1; }
  .admin-categories-grid,
  .admin-homepage-grid { grid-template-columns: 1fr; }
}

@media (max-width: 1024px) {
  .admin-layout { grid-template-columns: 1fr; }
  .admin-sidebar { width: 264px; }
}

@media (max-width: 760px) {
  .admin-content-wrap { padding: 20px 12px 64px; }
  .admin-page-intro,
  .dashboard-welcome { align-items: stretch; flex-direction: column; gap: 14px; }
  .admin-page-intro h2,
  .dashboard-welcome h2 { font-size: 26px; }
  .dashboard-actions { display: grid; grid-template-columns: 1fr 1fr; }
  .admin-metric-grid,
  .dashboard-metrics { grid-template-columns: 1fr 1fr; gap: 8px; }
  .admin-metric-card { padding: 14px; }.admin-metric-card > strong { font-size: 21px; }
  .admin-filterbar { align-items: stretch; flex-direction: column; }.admin-filterbar .admin-search-field--wide { flex-basis: auto; }.admin-filterbar select { width: 100%; }
  .revenue-chart { height: 210px; gap: 3px; }.revenue-bar-column small { font-size: 6px; }.revenue-bar-value { display: none; }
  .fulfilment-visual { grid-template-columns: 112px minmax(0,1fr); gap: 16px; }.fulfilment-donut { width: 112px; }.fulfilment-donut::before { width: 75px; }
  .dashboard-product-row { grid-template-columns: 20px 42px minmax(0,1fr); }.dashboard-product-row img { width: 42px; height: 42px; }.stock-number { grid-column: 3; }
  .dashboard-quick-strip { align-items: stretch; flex-direction: column; }
  .enquiry-row { grid-template-columns: 36px minmax(0,1fr); }.enquiry-row-flags { grid-column: 2; }.enquiry-row-top time { display: none; }
  .enquiry-contact-grid { grid-template-columns: 1fr; }.enquiry-payload > div { grid-template-columns: 1fr; gap: 3px; }
  .customer-table { min-width: 760px; }
  .admin-body .data-table { min-width: 840px; }
}

@media (max-width: 460px) {
  .admin-metric-grid,
  .dashboard-metrics { grid-template-columns: 1fr; }
  .dashboard-actions { grid-template-columns: 1fr; }
  .fulfilment-visual { grid-template-columns: 1fr; justify-items: center; }.fulfilment-legend { width: 100%; }
  .activity-item { grid-template-columns: 32px minmax(0,1fr); }.activity-item time { grid-column: 2; }
  .enquiry-contact-actions .btn { flex: 1; }
}

/* Product quantity pricing and balanced sticky gallery */
.product-purchase h1 {
  max-width: 600px;
  font-size: clamp(32px, 2.7vw, 48px);
  line-height: 1.06;
  letter-spacing: -0.042em;
}

.volume-pricing {
  margin: 0 0 20px;
}

.volume-pricing__heading {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 18px;
  margin-bottom: 11px;
}

.volume-pricing__heading > div {
  display: grid;
  gap: 3px;
}

.volume-pricing__heading strong {
  color: #181116;
  font-size: 14px;
  font-weight: 800;
}

.volume-pricing__heading > div span {
  color: #8e7f83;
  font-size: 11px;
  font-weight: 600;
}

.volume-pricing .stock-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: #65735f;
  font-size: 11px;
  font-weight: 750;
}

.volume-pricing .stock-pill::before {
  content: '';
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #7e9c74;
  box-shadow: 0 0 0 4px rgba(126, 156, 116, 0.12);
}

.pricing-tier-list {
  display: grid;
  gap: 9px;
}

.pricing-tier {
  position: relative;
  display: grid;
  grid-template-columns: 22px minmax(0, 1fr) auto;
  gap: 12px;
  align-items: center;
  min-height: 72px;
  padding: 13px 15px;
  border: 1.5px solid #ead6d3;
  border-radius: 15px;
  background: #fffdfc;
  cursor: pointer;
  transition: border-color .2s ease, background .2s ease, box-shadow .2s ease, transform .2s ease;
}

.pricing-tier:hover {
  border-color: #dfa39e;
  transform: translateY(-1px);
}

.pricing-tier.is-selected {
  border-color: #ca7771;
  background: linear-gradient(135deg, #fff7f5, #fce9e6);
  box-shadow: 0 9px 22px rgba(147, 77, 82, 0.13);
}

.pricing-tier input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
}

.pricing-tier__radio {
  width: 20px;
  height: 20px;
  display: grid;
  place-items: center;
  border: 1.5px solid #baaaa9;
  border-radius: 50%;
  background: #fff;
}

.pricing-tier.is-selected .pricing-tier__radio {
  border: 6px solid #ba6b65;
}

.pricing-tier__copy {
  min-width: 0;
  display: grid;
  gap: 5px;
}

.pricing-tier__title {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 7px;
}

.pricing-tier__copy strong {
  color: #252024;
  font-size: 13px;
  font-weight: 760;
}

.pricing-tier__title b {
  padding: 4px 7px;
  border-radius: 999px;
  background: #6e666b;
  color: #fff;
  font-size: 9px;
  font-weight: 750;
  letter-spacing: .03em;
  text-transform: uppercase;
}

.pricing-tier.is-selected .pricing-tier__title b {
  background: #ba6b65;
}

.pricing-tier__copy small {
  color: #8a777b;
  font-size: 10px;
  font-weight: 650;
}

.pricing-tier__price {
  display: grid;
  justify-items: end;
  gap: 3px;
  white-space: nowrap;
}

.pricing-tier__price s {
  color: #a29497;
  font-size: 10px;
  font-weight: 600;
}

.pricing-tier__price strong {
  color: #181116;
  font-size: 14px;
  font-weight: 850;
}

.volume-pricing__bulk {
  display: inline-flex;
  margin-top: 11px;
  color: #a95f5a;
  font-size: 11px;
  font-weight: 750;
  text-decoration: underline;
  text-underline-offset: 4px;
}

[data-action-total]::before {
  content: ' · ';
}

@media (min-width: 901px) {
  .product-gallery {
    position: sticky;
    top: calc(var(--pmc-header-offset, 130px) + 22px);
    align-self: start;
  }

  .product-purchase {
    position: relative;
    top: auto;
  }
}

@media (max-width: 900px) {
  .product-gallery,
  .product-purchase {
    position: static;
  }

  .product-purchase h1 {
    font-size: clamp(30px, 8.8vw, 40px);
  }
}

/* Product card quick-add button: compact circle default, expands to pill on hover */
body:not(.admin-body) .product-meta .quick-add,
body:not(.admin-body) .product-meta .btn-small {
  --qa-w: 44px;
  --qa-op: 0;
  --qa-x: -8px;
  position: relative;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  width: var(--qa-w, 44px) !important;
  min-width: 44px !important;
  max-width: var(--qa-w, 44px) !important;
  height: 44px !important;
  min-height: 44px !important;
  flex: 0 0 auto !important;
  align-self: flex-end;
  padding: 0 !important;
  overflow: hidden !important;
  border-radius: 999px !important;
  border: 1px solid #eba9a4 !important;
  background: #f2b7b3 !important;
  color: #181116 !important;
  font-size: 11.5px !important;
  font-weight: 800 !important;
  letter-spacing: -0.01em !important;
  white-space: nowrap !important;
  box-shadow: 0 4px 12px rgba(186, 107, 101, 0.16) !important;
  cursor: pointer;
  transform: none !important;
  will-change: width;
  transition: width 0.55s cubic-bezier(0.22, 1, 0.36, 1),
              max-width 0.55s cubic-bezier(0.22, 1, 0.36, 1),
              background 0.35s ease,
              border-color 0.35s ease,
              box-shadow 0.35s ease !important;
}

body.gsap-active .product-meta .quick-add,
body.gsap-active .product-meta .btn-small {
  transition: background 0.35s ease,
              border-color 0.35s ease,
              box-shadow 0.35s ease !important;
}

body:not(.admin-body) .product-meta .quick-add::before,
body:not(.admin-body) .product-meta .btn-small::before {
  content: '' !important;
  position: static !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex: 0 0 38px !important;
  width: 38px !important;
  height: 42px !important;
  margin: 0 !important;
  box-sizing: border-box;
  border-radius: 0 !important;
  border: none !important;
  background-color: transparent !important; /* No small background behind plus */
  background-image:
    linear-gradient(#181116, #181116),
    linear-gradient(#181116, #181116) !important;
  background-position: center, center !important;
  background-repeat: no-repeat !important;
  background-size: 11px 2px, 2px 11px !important;
  transform: none !important;
  box-shadow: none !important;
}

body:not(.admin-body) .product-meta .quick-add .quick-add-text,
body:not(.admin-body) .product-meta .btn-small .quick-add-text {
  display: inline-block !important;
  opacity: var(--qa-op, 0) !important;
  transform: translateX(var(--qa-x, -8px)) !important;
  white-space: nowrap !important;
  pointer-events: none;
  color: #181116 !important;
  font-size: 11.5px !important;
  font-weight: 800 !important;
  letter-spacing: -0.01em !important;
  line-height: 1 !important;
  will-change: opacity, transform;
}

body:not(.gsap-active) .product-meta .quick-add .quick-add-text,
body:not(.gsap-active) .product-meta .btn-small .quick-add-text {
  transition: opacity 0.28s ease,
              transform 0.3s cubic-bezier(0.22, 1, 0.36, 1) !important;
}

/* Hover and focus state on desktop */
@media (hover: hover) and (min-width: 821px) {
  body:not(.admin-body) .product-meta .quick-add:hover,
  body:not(.admin-body) .product-meta .quick-add:focus-visible,
  body:not(.admin-body) .product-meta .btn-small:hover,
  body:not(.admin-body) .product-meta .btn-small:focus-visible {
    background: #eaa8a3 !important;
    border-color: #df9994 !important;
    box-shadow: 0 6px 18px rgba(186, 107, 101, 0.22) !important;
    transform: none !important; /* Smooth and grounded: NO translateY jump */
  }

  body:not(.gsap-active) .product-meta .quick-add:hover,
  body:not(.gsap-active) .product-meta .quick-add:focus-visible,
  body:not(.gsap-active) .product-meta .btn-small:hover,
  body:not(.gsap-active) .product-meta .btn-small:focus-visible {
    --qa-w: 126px !important;
    --qa-op: 1 !important;
    --qa-x: 0px !important;
    padding-right: 14px !important;
  }

  body:not(.gsap-active) .product-meta .quick-add:hover .quick-add-text,
  body:not(.gsap-active) .product-meta .quick-add:focus-visible .quick-add-text,
  body:not(.gsap-active) .product-meta .btn-small:hover .quick-add-text,
  body:not(.gsap-active) .product-meta .btn-small:focus-visible .quick-add-text {
    transition: opacity 0.45s ease 0.08s,
                transform 0.5s cubic-bezier(0.22, 1, 0.36, 1) 0.06s !important;
  }
}

body:not(.admin-body) .product-meta .quick-add:active,
body:not(.admin-body) .product-meta .btn-small:active {
  transform: scale(0.98) !important;
}

@media (max-width: 820px) {
  body:not(.admin-body) .product-meta {
    align-items: flex-start;
  }

  body:not(.admin-body) .product-meta .quick-add,
  body:not(.admin-body) .product-meta .btn-small {
    position: absolute;
    right: 13px;
    bottom: 12px;
    width: 44px !important;
    min-width: 44px !important;
    max-width: 44px !important;
    height: 44px !important;
    min-height: 44px !important;
    flex-basis: 44px !important;
  }

  body:not(.admin-body) .product-card-body {
    position: relative;
    padding-bottom: 14px;
  }

  body:not(.admin-body) .product-meta {
    min-height: 48px;
    padding-right: 55px;
  }
}

.faq-list summary .faq-icon,
.faq-list summary > span:last-child,
.search-close,
.side-cart-close,
#btn-cancel-address {
  box-sizing: border-box;
  overflow: visible !important;
}

.faq-list summary .faq-icon::before,
.faq-list summary .faq-icon::after,
.faq-list summary > span:last-child::before,
.faq-list summary > span:last-child::after,
.search-close::before,
.search-close::after,
.side-cart-close::before,
.side-cart-close::after,
#btn-cancel-address::before,
#btn-cancel-address::after {
  width: 12px;
  height: 2px;
  z-index: 1;
}

@media (max-width: 520px) {
  .pricing-tier {
    grid-template-columns: 20px minmax(0, 1fr);
    gap: 10px;
    padding: 12px;
  }

  .pricing-tier__price {
    grid-column: 2;
    grid-row: 2;
    display: flex;
    justify-content: flex-start;
    align-items: baseline;
    gap: 7px;
  }

  .pricing-tier__copy strong {
    font-size: 12px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .pricing-tier { transition: none; }
}

/* Guide cards unified styling */

/* Editorial guide cards and SEO FAQ */
.guide-section {
  position: relative;
  overflow: clip;
  padding-block: 84px 94px;
  background:
    radial-gradient(circle at 8% 18%, rgba(242, 183, 179, 0.18), transparent 24%),
    linear-gradient(180deg, #fff 0%, #fff9f7 100%) !important;
}

.guide-section::before {
  content: '';
  position: absolute;
  right: -90px;
  top: -120px;
  width: 320px;
  height: 320px;
  border: 1px solid rgba(186, 107, 101, 0.15);
  border-radius: 50%;
  pointer-events: none;
}

.guide-section .section-heading {
  align-items: end;
}

.guide-section .section-heading > div {
  max-width: 800px;
}

.guide-section .section-heading h2 {
  max-width: 740px;
  margin-bottom: 14px;
}

.guide-section .section-heading p {
  max-width: 680px;
  margin: 0;
  color: #74676a;
  font-size: 15px;
  line-height: 1.65;
}

.guide-section .text-link {
  margin-bottom: 5px;
  white-space: nowrap;
}

.guide-grid {
  grid-template-columns: 1.1fr 1fr 1fr;
  gap: 20px;
  margin-top: 42px;
}

.guide-card {
  min-height: 410px;
  overflow: hidden;
  padding: 27px;
  border: 1.5px solid #efd8d5 !important;
  border-radius: 25px;
  background: #ffffff !important;
  box-shadow: 0 10px 30px rgba(82, 48, 54, 0.06) !important;
  color: #181116 !important;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  text-decoration: none;
  position: relative;
  transform-origin: 50% 90%;
  transition:
    border-color 0.6s cubic-bezier(0.16, 1, 0.3, 1),
    box-shadow 0.6s cubic-bezier(0.16, 1, 0.3, 1),
    transform 0.6s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

/* Mouse-aware fluid liquid fill layer */
.guide-card-fluid {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(145deg, #fde4e1 0%, #f7b7b3 50%, #ee9b96 100%);
  pointer-events: none;
  z-index: 1;
  opacity: 0;
  will-change: mask-image, -webkit-mask-image, opacity;
}

.guide-card::before,
.guide-card::after {
  display: none !important;
  content: none !important;
}

.guide-card:hover {
  border-color: #e59a95 !important;
  transform: translateY(-5px) !important;
  box-shadow: 0 20px 48px rgba(242, 183, 179, 0.5), 0 8px 24px rgba(186, 107, 101, 0.14) !important;
}

.guide-card-top {
  position: relative;
  z-index: 2;
  margin-bottom: 16px;
}

.guide-no {
  display: grid;
  width: 34px;
  height: 34px;
  place-items: center;
  border: 1px solid #f0d3d0;
  border-radius: 50%;
  background: #fff;
  color: #ba6b65;
  box-shadow: 0 5px 14px rgba(121, 69, 76, 0.08);
  font-size: 11px;
  font-weight: 800;
  transition: background 0.6s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.6s cubic-bezier(0.16, 1, 0.3, 1), color 0.6s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}

.guide-card:hover .guide-no,
.guide-card-featured .guide-no {
  border-color: rgba(186, 107, 101, 0.28) !important;
  background: #ffffff !important;
  color: #ba6b65 !important;
  box-shadow: 0 4px 12px rgba(186, 107, 101, 0.16) !important;
}

.guide-card-top small {
  color: #8d777b;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.12em;
  transition: color 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}

.guide-card:hover .guide-card-top small,
.guide-card-featured .guide-card-top small {
  color: #7d444a !important;
}

.guide-arrow {
  display: grid;
  width: 34px;
  height: 34px;
  place-items: center;
  border: 1px solid #f0d3d0;
  border-radius: 50%;
  background: #fff;
  color: #ba6b65;
  font-size: 15px;
  transition: background 0.6s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.6s cubic-bezier(0.16, 1, 0.3, 1), color 0.6s cubic-bezier(0.16, 1, 0.3, 1), transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}

.guide-card:hover .guide-arrow,
.guide-card-featured .guide-arrow {
  border-color: rgba(186, 107, 101, 0.28) !important;
  background: #ffffff !important;
  color: #ba6b65 !important;
  box-shadow: 0 4px 12px rgba(186, 107, 101, 0.16) !important;
  transform: translate(2px, -2px) !important;
}

.guide-visual {
  position: relative;
  z-index: 2;
  height: 138px;
  display: flex;
  margin: 0 0 20px;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  border: 1px solid rgba(186, 107, 101, 0.16);
  border-radius: 18px;
  background: #f7e6e2;
  box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.04);
  transition: background 0.6s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.6s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}

.guide-card:hover .guide-visual,
.guide-card-featured .guide-visual {
  border-color: rgba(255, 255, 255, 0.7) !important;
  background: #ffffff !important;
  box-shadow: 0 8px 24px rgba(186, 107, 101, 0.14) !important;
}

.guide-visual-img,
.guide-visual img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
  border-radius: 17px;
  transition: transform 0.55s cubic-bezier(0.22, 1, 0.36, 1);
}

.guide-card:hover .guide-visual img,
.guide-card:hover .guide-visual-img {
  transform: scale(1.045);
}


.guide-shape {
  stroke: #b86b68;
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
  fill: rgba(242, 183, 179, 0.1);
}

.guide-card-featured .guide-shape {
  stroke: #f2b7b3;
  fill: rgba(242, 183, 179, 0.055);
}

.guide-measure-line,
.guide-window,
.guide-tape,
.guide-spark {
  stroke: #d67c78;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.guide-card-featured .guide-measure-line {
  stroke: #fff;
}

.guide-visual text {
  fill: #f2b7b3;
  font: 700 7px var(--pmc-sans);
  letter-spacing: 0.12em;
}

.guide-spark {
  fill: rgba(242, 183, 179, 0.2);
  transform-box: fill-box;
  transform-origin: center;
  animation: guide-sparkle 2.8s ease-in-out infinite;
}

.guide-tape {
  fill: rgba(242, 183, 179, 0.28);
}

.guide-card-content {
  position: relative;
  z-index: 2;
}

.guide-card-content h3 {
  margin-bottom: 10px;
  font-size: clamp(20px, 1.55vw, 24px);
  color: #181116;
  transition: color 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}

.guide-card:hover .guide-card-content h3,
.guide-card-featured .guide-card-content h3 {
  color: #181116 !important;
}

.guide-card-content p {
  min-height: 44px;
  color: #76666a;
  font-size: 13px;
  transition: color 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}

.guide-card:hover .guide-card-content p,
.guide-card-featured .guide-card-content p {
  color: #4a3237 !important;
}

.guide-read {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-top: 17px;
  padding-top: 14px;
  border-top: 1px solid rgba(186, 107, 101, 0.16);
  color: #a5545b;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.035em;
  text-transform: uppercase;
  transition: color 0.6s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}

.guide-card:hover .guide-read,
.guide-card-featured .guide-read {
  border-color: rgba(186, 107, 101, 0.25) !important;
  color: #181116 !important;
}

.guide-read b {
  font-size: 15px;
  transition: transform 0.4s ease;
}

.guide-card:hover .guide-read b {
  transform: translateX(4px);
}

[data-content-reveal].is-visible {
  animation: content-card-arrive 0.72s cubic-bezier(0.16, 1, 0.3, 1) both;
}

.guide-card:nth-child(2).is-visible { animation-delay: 0.1s; }
.guide-card:nth-child(3).is-visible { animation-delay: 0.2s; }

.faq-section {
  position: relative;
  padding-block: 92px 104px;
  overflow: clip;
  border-top: 1px solid #f1ddda;
  background:
    radial-gradient(circle at 84% 24%, rgba(242, 183, 179, 0.17), transparent 24%),
    #fff !important;
}

.faq-section::before {
  content: '?';
  position: absolute;
  right: 3vw;
  top: -90px;
  color: rgba(242, 183, 179, 0.11);
  font: 800 320px/1 var(--pmc-sans);
  pointer-events: none;
}

.faq-grid {
  grid-template-columns: minmax(310px, 0.72fr) minmax(0, 1.28fr);
  gap: clamp(52px, 7vw, 105px);
  max-width: 1320px;
}

.faq-intro {
  position: sticky;
  top: 150px;
}

.faq-grid h2 {
  max-width: 480px;
  font-size: clamp(42px, 4.3vw, 64px);
}

.faq-grid > div:first-child p {
  max-width: 445px;
  color: #706367;
  font-size: 15px;
}

.faq-topic-list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0 0 27px;
  padding: 0;
  list-style: none;
}

.faq-topic-list li {
  padding: 8px 11px;
  border: 1px solid #efd3d0;
  border-radius: 999px;
  background: #fff8f6;
  color: #9a5b60;
  font-size: 10px;
  font-weight: 750;
}

.faq-list {
  overflow: hidden;
  border: 1px solid #efd8d5;
  border-radius: 24px;
  background: rgba(255, 255, 255, 0.92);
  box-shadow: 0 20px 52px rgba(99, 57, 64, 0.09);
}

.faq-list details {
  position: relative;
  padding-inline: 24px;
  border-bottom: 1px solid #efe2e0;
  background: transparent;
  transition: background 0.24s ease;
}

.faq-list details:last-child {
  border-bottom: 0;
}

.faq-list details::before {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 4px;
  background: linear-gradient(#d67c78, #f2b7b3);
  opacity: 0;
  transform: scaleY(0.4);
  transition: 0.24s ease;
}

.faq-list details:hover {
  background: #fffaf9;
}

.faq-list details[open] {
  border-radius: 0;
  background: linear-gradient(100deg, #fff5f2, #fff) !important;
}

.faq-list details[open]::before {
  opacity: 1;
  transform: scaleY(1);
}

.faq-list summary {
  min-height: 88px;
  padding: 20px 0;
  font-size: clamp(16px, 1.4vw, 19px);
}

.faq-list summary > span:first-child {
  display: grid;
  gap: 5px;
}

.faq-list summary small {
  color: #b46c69;
  font-size: 8px;
  font-weight: 850;
  letter-spacing: 0.13em;
}

.faq-list summary .faq-icon {
  display: grid;
  width: 34px;
  height: 34px;
  place-items: center;
  border: 1px solid #f0d1ce;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 5px 13px rgba(112, 63, 70, 0.08);
  font-size: 20px;
}

.faq-list details[open] summary .faq-icon {
  background: #f2b7b3;
  color: #181116;
}

.faq-list details p {
  max-width: 760px;
  padding: 0 62px 25px 0;
  color: #65575b;
  font-size: 14px;
  line-height: 1.75;
}

.faq-list details[open] p {
  animation: faq-answer-in 0.28s ease both;
}

.faq-list details p a {
  color: #9b555a;
  font-weight: 750;
  text-decoration: underline;
  text-decoration-color: rgba(155, 85, 90, 0.35);
  text-underline-offset: 3px;
}

.faq-list details p a:hover {
  text-decoration-color: currentColor;
}

@keyframes guide-sparkle {
  0%, 100% { opacity: 0.45; transform: scale(0.82) rotate(0deg); }
  50% { opacity: 1; transform: scale(1.08) rotate(10deg); }
}

@keyframes content-card-arrive {
  from { opacity: 0; transform: translateY(26px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes faq-answer-in {
  from { opacity: 0; transform: translateY(-7px); }
  to { opacity: 1; transform: translateY(0); }
}

@media (max-width: 980px) {
  .guide-grid {
    grid-template-columns: 1fr;
  }

  .guide-card {
    min-height: 360px;
  }

  .faq-grid {
    grid-template-columns: 1fr;
    gap: 40px;
  }

  .faq-intro {
    position: static;
  }
}

@media (max-width: 620px) {
  .guide-section,
  .faq-section {
    padding-block: 66px 74px;
  }

  .guide-section .section-heading {
    align-items: flex-start;
  }

  .guide-section .text-link {
    white-space: normal;
  }

  .guide-card {
    min-height: 350px;
    padding: 22px;
  }

  .guide-visual {
    height: 118px;
  }

  .faq-grid h2 {
    font-size: clamp(38px, 12vw, 52px);
  }

  .faq-list {
    border-radius: 18px;
  }

  .faq-list details {
    padding-inline: 17px;
  }

  .faq-list summary {
    min-height: 80px;
    gap: 13px;
    font-size: 15px;
  }

  .faq-list details p {
    padding-right: 8px;
    font-size: 13px;
  }
}

@media (prefers-reduced-motion: reduce) {
  [data-content-reveal].is-visible,
  .guide-spark,
  .faq-list details[open] p {
    animation: none !important;
  }

  .guide-card,
  .guide-card::before,
  .guide-visual svg,
  .guide-read b,
  .faq-list details,
  .faq-list details::before {
    transition: none !important;
  }
}

@media (max-width: 430px) {
  body:not(.admin-body) { --site-gutter: 12px; }
  .announcement-bar { font-size: 9px; }
  .hero-copy { padding-inline: 15px; }
  .hero-copy h1 { font-size: 43px; }
  .hero-product-stage { min-height: 350px; }
  .hero-actions .btn { width: 100%; }
  .hero-proof { flex-direction: column; gap: 9px; }
  .trust-strip-grid { grid-template-columns: 1fr; }
  .trust-strip-grid > div { border-right: 0; border-bottom: 1px solid var(--pmc-line); }
  .category-showcase { grid-template-columns: 1fr; gap: 14px; }
  .category-tile { min-height: 260px; padding: 20px; }
  .category-tile h3 { font-size: 21px; }
  .product-grid, .catalog-grid { grid-template-columns: 1fr 1fr; }
  .product-card-body { padding-top: 11px; }
  .product-specs span { font-size: 7px; }
  .product-meta { display: grid; }
  .product-meta .quick-add, .product-meta .btn-small { width: 100%; }
  .find-box-copy h2 { font-size: 42px; }
  .choice-grid label { min-height: 68px; }
  .size-grid strong { font-size: 19px; }
  .audience-card h2 { font-size: 34px; }
  .custom-visual { min-height: 310px; }
  .custom-box-mock { width: 84%; }
  .footer-main { grid-template-columns: 1fr 1fr; }
  .footer-main > div:nth-child(n+2) { min-width: 0; }
  .catalog-toolbar { align-items: flex-end; }
  .product-detail { display: block; }
  .product-purchase { padding-top: 28px; }
  .product-actions { position: sticky; bottom: 73px; z-index: 30; background: #fff; padding: 9px 0; }
  .enquiry-form, .enquiry-intro { padding: 26px 20px; }
  .form-grid { grid-template-columns: 1fr; }
  .field-full { grid-column: auto; }
}

/* ==========================================================================
   PACK MY CAKE - LUXURY BAKERY PACKAGING DESIGN SYSTEM
   Matches pixel-accurate editorial aesthetic: warm blush, Plus Jakarta Sans,
   refined typography, pill CTA buttons, 3D packaging stage & dimension tags.
   ========================================================================== */

:root {
  --pmc-pink: #000000;
  --pmc-pink-hover: #1f1f1f;
  --pmc-pink-dark: #000000;
  --pmc-pink-deep: #000000;
  --pmc-pink-soft: #eeeeee;
  --pmc-pink-pastel: #f8f8f8;
  --pmc-blush: #f8f8f8;
  --pmc-cream: #ffffff;
  --pmc-cocoa: #000000;
  --pmc-ink: #181116;
  --pmc-muted: #6e5f66;
  --pmc-line: #e5e5e5;
  --pmc-card-bg: #ffffff;
  --pmc-sans: 'Plus Jakarta Sans', 'DM Sans', system-ui, -apple-system, sans-serif;
  --pmc-serif: 'Playfair Display', Georgia, serif;
}

body:not(.admin-body) {
  font-family: var(--pmc-sans);
  color: var(--pmc-ink);
  background: #ffffff;
  -webkit-font-smoothing: antialiased;
}

/* Typography Overrides */
.hero-copy h1, .section-heading h2, .find-box-copy h2, .audience-card h2, 
.custom-copy h2, .faq-grid h2, .newsletter-inner h2, .collection-hero h1, 
.page-hero h1, .product-purchase h1, .related-section h2, .content-card h2, 
.content-card h3, .content-sidebar h2, .enquiry-intro h2, .guide-card h3, 
.size-grid strong {
  font-family: var(--pmc-sans);
  font-weight: 800;
  letter-spacing: -0.035em;
}

.hero-copy h1 .hero-accent,
.hero-copy h1 em,
.custom-copy h2 em {
  font-style: normal;
  color: var(--pmc-pink);
  font-weight: 800;
}

.brand-v2 strong {
  font-family: var(--pmc-sans);
  font-weight: 800;
  letter-spacing: 0.04em;
}

/* Kicker / Tagline */
.kicker, .eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: var(--pmc-pink);
  font-weight: 800;
  font-size: 11px;
  line-height: 1.2;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.kicker::before {
  content: '';
  width: 26px;
  height: 2px;
  background: currentColor;
  border-radius: 999px;
}

.kicker-light {
  color: #888888;
}

/* ==========================================================================
   HERO SECTION (Matching Reference Mockup)
   ========================================================================== */
.hero-v2 {
  background: #ffffff;
  padding: 14px 0 16px;
}

.hero-v2-grid {
  min-height: 590px;
  background: linear-gradient(135deg, #ffffff 0%, #f7f7f7 50%, #f0f0f0 100%);
  border: 1.5px solid #e5e5e5;
  border-radius: 32px;
  overflow: hidden;
  box-shadow: 0 24px 65px rgba(0, 0, 0, 0.08);
  display: grid;
  grid-template-columns: 1fr 1.12fr;
  align-items: center;
  position: relative;
}

.hero-copy {
  padding: 64px clamp(32px, 5vw, 76px) 58px clamp(32px, 5vw, 68px);
  position: relative;
  z-index: 3;
}

.hero-copy h1 {
  font-size: clamp(44px, 4.8vw, 68px);
  line-height: 1.04;
  letter-spacing: -0.04em;
  color: var(--pmc-ink);
  margin: 20px 0 22px;
}

.hero-copy > p {
  color: var(--pmc-muted);
  font-size: 16px;
  line-height: 1.6;
  max-width: 480px;
  margin: 0 0 28px;
}

/* Hero Pill Buttons */
.hero-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px;
}

.btn-hero-pill-primary {
  min-height: 50px;
  padding: 0 32px;
  border-radius: 999px;
  background: #000000;
  color: #ffffff;
  border: 0;
  font-family: var(--pmc-sans);
  font-weight: 800;
  font-size: 13.5px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  cursor: pointer;
  text-decoration: none;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.35);
  transition: transform 0.2s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.2s ease, background 0.2s ease;
}

.btn-hero-pill-primary:hover {
  background: #1f1f1f;
  transform: translateY(-2px);
  box-shadow: 0 14px 32px rgba(0, 0, 0, 0.45);
  color: #ffffff;
}

.btn-hero-pill-secondary {
  min-height: 50px;
  padding: 0 30px;
  border-radius: 999px;
  background: #ffffff;
  color: var(--pmc-ink);
  border: 1.5px solid #e5e5e5;
  font-family: var(--pmc-sans);
  font-weight: 700;
  font-size: 13.5px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  text-decoration: none;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.04);
  transition: transform 0.2s ease, border-color 0.2s ease, background 0.2s ease, color 0.2s ease;
}

.btn-hero-pill-secondary:hover {
  background: #f5f5f5;
  border-color: var(--pmc-pink);
  transform: translateY(-2px);
  color: var(--pmc-pink-dark);
  box-shadow: 0 8px 22px rgba(0, 0, 0, 0.16);
}

/* Hero Proof / Stats */
.hero-proof {
  display: flex;
  align-items: center;
  gap: 24px;
  margin-top: 44px;
  padding-top: 24px;
  border-top: 1px solid #e5e5e5;
}

.hero-proof .proof-item {
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.hero-proof .proof-item b {
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--pmc-ink);
}

.hero-proof .proof-item span {
  font-size: 11.5px;
  color: var(--pmc-muted);
  line-height: 1.4;
}

.hero-proof .proof-divider {
  width: 1px;
  height: 32px;
  background: #e5e5e5;
}

/* Hero Product Stage (Right Card Showcase) */
.hero-product-stage {
  position: relative;
  min-height: 540px;
  background: linear-gradient(145deg, #0a0a0a 0%, #141414 50%, #1f1f1f 100%);
  border-radius: 26px;
  margin: 22px 22px 22px 0;
  overflow: hidden;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.6), 0 20px 50px rgba(0, 0, 0, 0.08);
  display: flex;
  align-items: center;
  justify-content: center;
}

.hero-product-stage::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: linear-gradient(rgba(255, 255, 255, 0.45) 1px, transparent 1px),
                    linear-gradient(90deg, rgba(255, 255, 255, 0.45) 1px, transparent 1px);
  background-size: 46px 46px;
  mask-image: radial-gradient(circle at 60% 50%, black 45%, transparent 85%);
  pointer-events: none;
}

.stage-copy {
  position: absolute;
  top: 38px;
  left: 42px;
  z-index: 5;
  color: #000000;
}

.stage-copy span {
  display: block;
  font-family: var(--pmc-sans);
  font-size: 16px;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: #000000;
  margin-bottom: 2px;
}

.stage-copy strong {
  display: block;
  font-family: var(--pmc-sans);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: #000000;
}

.stage-seal {
  position: absolute;
  top: 34px;
  right: 36px;
  z-index: 5;
  width: 86px;
  height: 86px;
  border: 1.5px solid rgba(0, 0, 0, 0.35);
  border-radius: 50%;
  display: grid;
  place-items: center;
  text-align: center;
  font-size: 7.5px;
  font-weight: 800;
  line-height: 1.45;
  letter-spacing: 0.14em;
  color: var(--pmc-pink-dark);
  transform: rotate(6deg);
  background: rgba(255, 255, 255, 0.7);
  backdrop-filter: blur(6px);
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.12);
}

.hero-stage-card {
  position: relative;
  width: 78%;
  height: 70%;
  background: #ffffff;
  border-radius: 18px;
  border: 1.5px solid #e5e5e5;
  box-shadow: 0 35px 65px rgba(0, 0, 0, 0.14), 0 12px 25px rgba(0, 0, 0, 0.06);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  transform: rotate(2deg) translateY(12px);
  z-index: 2;
  transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

.hero-stage-card:hover {
  transform: rotate(0deg) translateY(4px);
}

.hero-stage-card img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  filter: drop-shadow(0 18px 22px rgba(0, 0, 0, 0.12));
}

.hero-box-small {
  position: absolute;
  width: 36%;
  height: 36%;
  left: 18px;
  bottom: 22px;
  z-index: 3;
  margin: 0;
  filter: drop-shadow(0 22px 28px rgba(0, 0, 0, 0.16));
  transform: rotate(-4deg);
  transition: transform 0.3s ease;
}

.hero-box-small:hover {
  transform: rotate(0deg) scale(1.05);
}

.hero-box-small img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.stage-dimension-tag {
  position: absolute;
  font-size: 9.5px;
  font-weight: 800;
  color: var(--pmc-pink-dark);
  background: rgba(255, 255, 255, 0.95);
  padding: 4px 10px;
  border-radius: 999px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  border: 1px solid #e5e5e5;
  letter-spacing: 0.04em;
  z-index: 4;
}

.stage-dim-h { left: 14%; top: 48%; }
.stage-dim-w { left: 45%; bottom: 16%; }

/* ==========================================================================
   SITE-WIDE POLISH (Cards, Pills, Cart, Modals, Forms)
   ========================================================================== */
.btn, .quick-add, .product-meta .btn-small, 
.audience-card, .custom-visual, .custom-box-mock, 
.guide-card, .size-grid, .content-card, .enquiry-intro, .enquiry-form, 
.field input:not([type="checkbox"]):not([type="radio"]), .field textarea, .field select, .filters input:not([type="checkbox"]):not([type="radio"]), .filters select, 
.filter-toggle, .buy-now, .bulk-callout, .stock-pill {
  border-radius: 18px;
}

.btn { border-radius: 999px; }
.btn-primary { 
  background: #000000; 
  border-color: transparent; 
  color: #181116; 
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.35); 
  font-weight: 800;
}
.btn-primary:hover { 
  background: #1f1f1f; 
  border-color: transparent; 
  color: #181116; 
  box-shadow: 0 14px 32px rgba(0, 0, 0, 0.45);
}

.quick-add, .product-meta .btn-small { 
  border-radius: 999px; 
  background: #ffffff;
  border: 1.5px solid #e5e5e5;
  font-weight: 800;
  color: var(--pmc-ink);
  transition: all 0.2s ease;
}
.quick-add:hover, .product-meta .btn-small:hover {
  background: #000000;
  color: #ffffff;
  border-color: transparent;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.35);
}

.header-search { border-radius: 999px; background: #ffffff; border: 1.5px solid #e5e5e5; }
.search-suggestions { border-radius: 18px; border: 1.5px solid #e5e5e5; }
.search-suggestion { border-radius: 12px; }

.trust-marquee-section {
  background: #ffffff;
  padding: 24px 0 28px;
  overflow: hidden;
  position: relative;
  border-top: 1px solid #e5e5e5;
  border-bottom: 1px solid #e5e5e5;
  margin-top: 8px;
}

.trust-marquee-container {
  width: 100%;
  overflow: hidden;
  position: relative;
  mask-image: linear-gradient(to right, transparent 0%, black 5%, black 95%, transparent 100%);
  -webkit-mask-image: linear-gradient(to right, transparent 0%, black 5%, black 95%, transparent 100%);
}

.trust-marquee-track {
  display: flex;
  align-items: center;
  gap: 24px;
  width: max-content;
  animation: trustMarqueeScroll 36s linear infinite;
  will-change: transform;
}

@keyframes trustMarqueeScroll {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(-50%);
  }
}

.trust-pill {
  display: inline-flex;
  align-items: center;
  gap: 16px;
  padding: 16px 30px;
  background: #f8f8f8;
  border: 1.5px solid #e5e5e5;
  border-radius: 999px;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.04);
  white-space: nowrap;
  flex-shrink: 0;
}

.trust-pill-icon {
  width: 46px;
  height: 46px;
  border-radius: 50%;
  background: linear-gradient(145deg, #ffffff 0%, #fdf2f1 100%);
  border: 1.5px solid #e5e5e5;
  display: grid;
  place-items: center;
  color: var(--pmc-pink);
  flex-shrink: 0;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.9), 0 4px 12px rgba(186, 107, 101, 0.14);
}

.trust-icon-defs {
  position: absolute;
  width: 0;
  height: 0;
  overflow: hidden;
}

.trust-pill-icon svg {
  width: 23px;
  height: 23px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.trust-pill-icon--dimensions { color: #a5545b !important; }
.trust-pill-icon--repeat { color: #8e6254 !important; }
.trust-pill-icon--bulk { color: #9d5870 !important; }
.trust-pill-icon--quality { color: #557765 !important; }
.trust-pill-icon--delivery { color: #b16b3e !important; }
.trust-pill-icon--payment { color: #586f89 !important; }

.trust-pill-text {
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.trust-pill-text strong {
  font-size: 15px;
  font-weight: 800;
  color: var(--pmc-ink);
  letter-spacing: -0.01em;
}

.trust-pill-text small {
  font-size: 12.5px;
  color: var(--pmc-muted);
  font-weight: 500;
}

@media (max-width: 768px) {
  .trust-marquee-section {
    padding: 18px 0 22px;
  }
  .trust-pill {
    padding: 12px 22px;
    gap: 12px;
  }
  .trust-pill-icon {
    width: 40px;
    height: 40px;
    font-size: 16px;
  }
  .trust-pill-text strong {
    font-size: 14px;
  }
  .trust-pill-text small {
    font-size: 12px;
  }
  .trust-marquee-track {
    animation-duration: 26s;
    gap: 16px;
  }
}

.trust-strip { display: none; }
.trust-strip-grid { display: none; }

.category-tile { border-radius: 24px; box-shadow: 0 12px 34px rgba(0, 0, 0, 0.07); border: 1.5px solid #e5e5e5; }
.product-card > a:first-child, .product-card-image { 
  border-radius: 22px; 
  background: #ffffff; 
  border: 1.5px solid #e5e5e5;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  overflow: hidden;
}
.product-card > a:first-child img, .product-card-image img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.product-card > a:first-child::after, .product-card-image::after { border-radius: 999px; }

.size-grid { overflow: hidden; }
.audience-card { border-radius: 26px; }
.custom-visual { border-radius: 28px; background-color: rgba(255,255,255,.42); }
.custom-box-mock { border-radius: 22px; }
.guide-card { border-radius: 20px; box-shadow: 0 10px 32px rgba(0, 0, 0, 0.05); }
.collection-hero, .page-hero { margin: 24px auto 0; width: calc(100% - 2 * var(--site-gutter)); border: 0; border-radius: 28px; }
.filter-sidebar { background: #ffffff; padding: 20px; border-radius: 20px; border: 1.5px solid #e5e5e5; }
.product-main-image { border-radius: 24px; }
.thumb-btn { border-radius: 12px; overflow: hidden; }
.content-card, .enquiry-intro, .enquiry-form { border-radius: 24px; }
.simple-nav .simple-cart { border-radius: 12px; }
.cart-bulk-link { display: block; margin-top: 16px; text-align: center; font-size: 13px; color: var(--pmc-pink-dark); font-weight: 700; }
.track-order-fields { display: grid; grid-template-columns: 1fr 1fr auto; gap: 14px; align-items: end; }
.track-order-fields .field { margin: 0; }

@media (max-width: 900px) {
  .hero-v2 { padding-top: 0; }
  .hero-v2-grid { grid-template-columns: 1fr; border-radius: 0; min-height: auto; }
  .hero-copy { padding: 42px 20px 32px; }
  .hero-product-stage { margin: 0 16px 20px; min-height: 420px; border-radius: 22px; }
  .collection-hero, .page-hero { width: min(100% - 24px, 1360px); border-radius: 22px; padding-inline: 18px; }
  .filter-sidebar { border-radius: 22px 22px 0 0; }
  .track-order-fields { grid-template-columns: 1fr; }
}

.loading-spinner {
  width: 38px;
  height: 38px;
  margin: 0 auto;
  border: 3px solid #e5e5e5;
  border-top-color: var(--pmc-pink);
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
}

@keyframes spin {
  to { transform: rotate(360deg); }
}

.form-error {
  color: #dc2626;
  background: #fef2f2;
  padding: 10px 14px;
  border-radius: 10px;
  border: 1px solid #fee2e2;
  font-size: 14px;
  margin: 10px 0;
}

/* ==========================================================================
   PACK MY CAKE — SIGNATURE LUXURY BRAND PALETTE (#f2b7b3)
   Clean, modern, high-contrast base with #f2b7b3 brand identity
   ========================================================================== */

:root {
  --bg: #ffffff;
  --surface: #ffffff;
  --surface-soft: #fdf6f5;
  --line: #f2dedb;
  --text: #181116;
  --muted: #666666;
  --brand: #f2b7b3;
  --brand-rgb: 242, 183, 179;
  --brand-dark: #e09b96;
  --brand-deep: #ba6b65;
  --danger: #ef4444;
  --success: #10b981;
  --shadow: 0 16px 40px rgba(242, 183, 179, 0.2);

  --pmc-ink: #181116;
  --pmc-text: #241c21;
  --pmc-muted: #666666;
  --pmc-pink: #f2b7b3;
  --pmc-pink-primary: #f2b7b3;
  --pmc-pink-vibrant: #e8a5a0;
  --pmc-pink-hover: #e09b96;
  --pmc-pink-dark: #ba6b65;
  --pmc-pink-deep: #ba6b65;
  --pmc-pink-soft: #fdf2f1;
  --pmc-pink-pastel: #fff8f7;
  --pmc-blush: #fdf6f5;
  --pmc-cream: #ffffff;
  --pmc-cocoa: #181116;
  --pmc-plum: #0a0a0a;
  --pmc-blue: #f0f0f0;
  --pmc-line: #f2dedb;
  --pmc-white: #ffffff;
  --pmc-card-bg: #ffffff;
  --pmc-shadow: 0 16px 48px rgba(242, 183, 179, 0.22);
}

/* Site Background & Body */
body:not(.admin-body) {
  background: #ffffff !important;
  color: #181116 !important;
}

/* Header & Announcement Bar */
.announcement-bar {
  background: #181116 !important;
  color: #ffffff !important;
  border-bottom: 1px solid #281d24 !important;
}
.announcement-bar a {
  color: #f2b7b3 !important;
  text-decoration: underline;
  font-weight: 700;
}
.site-header, .v2-header, .simple-site-header {
  background: #ffffff !important;
  border-bottom: 1px solid #f2dedb !important;
  box-shadow: 0 4px 20px rgba(242, 183, 179, 0.08) !important;
}
.brand-v2 strong, .brand strong {
  color: #181116 !important;
}
.brand-v2 small, .brand small {
  color: #ba6b65 !important;
  font-weight: 800 !important;
}
.header-search {
  background: #ffffff !important;
  border: 1.5px solid #f2dedb !important;
  color: #181116 !important;
  position: relative !important;
  z-index: 100 !important;
  transition: border-color 0.2s ease, box-shadow 0.2s ease !important;
}
.header-search:focus-within {
  border-color: #f2b7b3 !important;
  box-shadow: 0 0 0 3px rgba(242, 183, 179, 0.3) !important;
}
.header-search input,
.header-search input:focus,
.header-search input:focus-visible,
.header-search input:active,
#global-search,
#global-search:focus,
#global-search:focus-visible,
#global-search:active {
  border: 0 !important;
  border-width: 0 !important;
  border-style: none !important;
  border-color: transparent !important;
  outline: 0 !important;
  outline: none !important;
  box-shadow: none !important;
  background: transparent !important;
  color: #181116 !important;
  -webkit-appearance: none !important;
  -moz-appearance: none !important;
  appearance: none !important;
}
.header-search input::-webkit-search-decoration,
.header-search input::-webkit-search-cancel-button,
.header-search input::-webkit-search-results-button,
.header-search input::-webkit-search-results-decoration {
  -webkit-appearance: none !important;
  display: none !important;
}
.header-search button {
  border-left: 1.5px solid #f2dedb !important;
  color: #ba6b65 !important;
  font-weight: 800 !important;
}
.search-suggestions {
  position: absolute !important;
  left: 0 !important;
  right: 0 !important;
  top: calc(100% + 10px) !important;
  padding: 10px !important;
  background: #ffffff !important;
  border: 1.5px solid #f2dedb !important;
  border-radius: 20px !important;
  box-shadow: 0 20px 50px rgba(24, 17, 22, 0.16), 0 6px 20px rgba(242, 183, 179, 0.25) !important;
  max-height: 420px !important;
  overflow-y: auto !important;
  z-index: 99999 !important;
}
.search-suggestions::-webkit-scrollbar {
  width: 6px;
}
.search-suggestions::-webkit-scrollbar-track {
  background: #fdfaf9;
  border-radius: 999px;
}
.search-suggestions::-webkit-scrollbar-thumb {
  background: #f2b7b3;
  border-radius: 999px;
}
.search-suggestions::-webkit-scrollbar-thumb:hover {
  background: #ba6b65;
}
.search-suggestion {
  display: grid !important;
  grid-template-columns: 52px 1fr auto !important;
  gap: 14px !important;
  align-items: center !important;
  padding: 10px 12px !important;
  border-radius: 14px !important;
  text-decoration: none !important;
  transition: all 0.18s cubic-bezier(0.16, 1, 0.3, 1) !important;
  background: transparent;
  border: 1px solid transparent;
}
.search-suggestion:hover,
.search-suggestion:focus {
  background: #fdf2f1 !important;
  border-color: #f8dedb !important;
  transform: translateX(3px);
}
.search-suggestion img {
  width: 52px !important;
  height: 52px !important;
  border-radius: 10px !important;
  object-fit: cover !important;
  background: #f9f6f6 !important;
  border: 1px solid #f2dedb !important;
  flex-shrink: 0 !important;
}
.search-suggestion strong {
  font-size: 13.5px !important;
  line-height: 1.35 !important;
  font-weight: 700 !important;
  color: #181116 !important;
  display: block !important;
  transition: color 0.18s ease;
}
.search-suggestion:hover strong,
.search-suggestion:focus strong {
  color: #ba6b65 !important;
}
.search-suggestion small {
  display: block !important;
  color: #8c8288 !important;
  font-size: 11.5px !important;
  margin-top: 3px !important;
  font-weight: 500 !important;
}
.search-suggestion b {
  font-size: 14px !important;
  color: #ba6b65 !important;
  font-weight: 800 !important;
  white-space: nowrap !important;
  padding-left: 8px !important;
}
.header-actions .icon-btn {
  color: #181116 !important;
}
.cart-link {
  color: #181116 !important;
}
.cart-badge, .dock-badge {
  background: #f2b7b3 !important;
  color: #181116 !important;
  border: 1px solid #e09b96 !important;
  font-weight: 800 !important;
}
.header-admin-pill {
  background: linear-gradient(135deg, #f2b7b3 0%, #e8a5a0 100%) !important;
  color: #181116 !important;
  border: 1px solid #e09b96 !important;
  box-shadow: 0 4px 14px rgba(242, 183, 179, 0.4) !important;
  font-weight: 800 !important;
}

/* Navigation */
.category-nav {
  background: #ffffff !important;
  border-top: 1px solid #f2dedb !important;
  border-bottom: 1px solid #f2dedb !important;
}
.category-nav a {
  color: #181116 !important;
}
.category-nav a:hover, .category-nav a.active {
  color: #ba6b65 !important;
}
.category-nav a::after {
  background: #f2b7b3 !important;
}

/* Kickers & Accents */
.kicker, .eyebrow {
  color: #ba6b65 !important;
  font-weight: 800 !important;
}
.kicker::before {
  background: #f2b7b3 !important;
}
.hero-accent, .hero-copy h1 em, .custom-copy h2 em {
  color: #ba6b65 !important;
  text-decoration: underline !important;
  text-decoration-color: #f2b7b3 !important;
  text-decoration-thickness: 3px !important;
  text-underline-offset: 6px !important;
}

/* Buttons — High Contrast with #f2b7b3 Brand Color */
.btn-primary, .btn-hero-pill-primary, .btn-finder-submit, .buy-now {
  background: linear-gradient(135deg, #f2b7b3 0%, #e8a5a0 100%) !important;
  color: #181116 !important;
  border: 1.5px solid #f2b7b3 !important;
  box-shadow: 0 8px 24px rgba(242, 183, 179, 0.45) !important;
  font-weight: 800 !important;
}
.btn-primary:hover, .btn-hero-pill-primary:hover, .btn-finder-submit:hover, .buy-now:hover {
  background: linear-gradient(135deg, #e09b96 0%, #d68b85 100%) !important;
  color: #181116 !important;
  border: 1.5px solid #e09b96 !important;
  box-shadow: 0 12px 30px rgba(242, 183, 179, 0.6) !important;
  transform: translateY(-2px);
}
.btn-secondary, .btn-hero-pill-secondary {
  background: #ffffff !important;
  color: #181116 !important;
  border: 1.5px solid #181116 !important;
  box-shadow: 0 4px 14px rgba(242, 183, 179, 0.1) !important;
}
.btn-secondary:hover, .btn-hero-pill-secondary:hover {
  background: #181116 !important;
  color: #ffffff !important;
  border: 1.5px solid #181116 !important;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.18) !important;
}
.btn-white {
  background: #ffffff !important;
  color: #ba6b65 !important;
  border: 1.5px solid #ffffff !important;
}
.btn-white:hover {
  background: #f2b7b3 !important;
  color: #181116 !important;
  border-color: #f2b7b3 !important;
}
.quick-add, .product-meta .btn-small {
  background: #ffffff !important;
  color: #181116 !important;
  border: 1.5px solid #f2b7b3 !important;
  box-shadow: 0 3px 10px rgba(242, 183, 179, 0.2) !important;
}
.quick-add:hover, .product-meta .btn-small:hover {
  background: #f2b7b3 !important;
  color: #181116 !important;
  border-color: #f2b7b3 !important;
  box-shadow: 0 6px 18px rgba(242, 183, 179, 0.4) !important;
}

/* Hero Section */
.hero-v2-grid {
  background: linear-gradient(135deg, #ffffff 0%, #fdf6f5 55%, #fae8e6 100%) !important;
  border: 1.5px solid #f2dedb !important;
  box-shadow: 0 24px 60px rgba(242, 183, 179, 0.16) !important;
}
.hero-proof {
  border-top: 1px solid #f2dedb !important;
}
.hero-proof .proof-divider {
  background: #f2dedb !important;
}
.hero-proof .proof-item b {
  color: #181116 !important;
}
.hero-product-stage {
  background: linear-gradient(145deg, #181116 0%, #241c21 50%, #2b1f28 100%) !important;
  box-shadow: inset 0 0 0 1px rgba(242, 183, 179, 0.2), 0 20px 50px rgba(24, 17, 22, 0.25) !important;
}
.hero-product-stage .stage-copy span {
  color: #ffffff !important;
}
.hero-product-stage .stage-copy strong {
  color: #f2b7b3 !important;
}
.stage-seal {
  border: 1.5px solid #f2b7b3 !important;
  color: #f2b7b3 !important;
  background: rgba(24, 17, 22, 0.85) !important;
  box-shadow: 0 4px 14px rgba(242, 183, 179, 0.3) !important;
}
.hero-stage-card {
  background: #ffffff !important;
  border: 1.5px solid #f2dedb !important;
  box-shadow: 0 35px 65px rgba(24, 17, 22, 0.18) !important;
}
.stage-dimension-tag {
  color: #181116 !important;
  background: #f2b7b3 !important;
  border: 1px solid #e09b96 !important;
  box-shadow: 0 4px 12px rgba(242, 183, 179, 0.3) !important;
  font-weight: 800 !important;
}

/* Trust Marquee & Pills */
.trust-marquee-section {
  background: #ffffff !important;
  border-top: 1px solid #f2dedb !important;
  border-bottom: 1px solid #f2dedb !important;
}
.trust-pill {
  background: #ffffff !important;
  border: 1.5px solid #f2dedb !important;
  box-shadow: 0 4px 14px rgba(242, 183, 179, 0.08) !important;
}
.trust-pill-icon {
  background: linear-gradient(145deg, #ffffff 0%, #fdf2f1 100%) !important;
  border: 1.5px solid #f2b7b3 !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.9), 0 4px 12px rgba(186, 107, 101, 0.14) !important;
}
.trust-pill-text strong {
  color: #181116 !important;
}
.trust-pill-text small {
  color: #666666 !important;
}
/* Category Cards / Showcase */
.category-tile {
  background: #ffffff !important;
  border: 1.5px solid #f2dedb !important;
  box-shadow: 0 8px 24px rgba(242, 183, 179, 0.1) !important;
}
.category-tile:hover {
  border-color: #f2b7b3 !important;
  box-shadow: 0 16px 40px rgba(242, 183, 179, 0.25) !important;
}
.category-count {
  background: #f2b7b3 !important;
  color: #181116 !important;
  font-weight: 800 !important;
}
.category-tile h3 {
  color: #ffffff !important;
  text-shadow: 0 2px 14px rgba(24, 17, 22, 0.45);
}

/* Product Cards */
.product-card {
  background: #ffffff !important;
  border: 1.5px solid #f2dedb !important;
}
.product-card:hover {
  border-color: #f2b7b3 !important;
  box-shadow: 0 16px 40px rgba(242, 183, 179, 0.22) !important;
}
.product-card > a:first-child, .product-card-image {
  background: #ffffff !important;
  border: 1px solid #f2dedb !important;
}
.product-card-body small {
  color: #ba6b65 !important;
  font-weight: 700 !important;
}
.product-card-body h3 a {
  color: #181116 !important;
}
.product-specs span {
  background: #fdf6f5 !important;
  color: #181116 !important;
  border: 1px solid #f2dedb !important;
}
.product-meta strong {
  color: #181116 !important;
}
.product-badge {
  background: #f2b7b3 !important;
  color: #181116 !important;
  box-shadow: 0 4px 12px rgba(242, 183, 179, 0.35) !important;
  font-weight: 800 !important;
}

/* Find Box Section */
.find-box-grid {
  background: #f2b7b3 !important;
  color: #181116 !important;
  border: 1.5px solid rgba(220, 150, 145, 0.35) !important;
  box-shadow: 0 30px 80px rgba(112, 53, 58, 0.12) !important;
}
.find-box-kicker {
  color: #732a2f !important;
}
.box-finder {
  background: #ffffff !important;
  color: #181116 !important;
  border-radius: 28px !important;
}
.choice-grid label {
  background: #fdf6f5 !important;
  border: 1.5px solid #f2dedb !important;
  color: #181116 !important;
}
.choice-grid label:has(input:checked) {
  background: #f2b7b3 !important;
  color: #181116 !important;
  border-color: #e09b96 !important;
}
.finder-select-wrap select {
  border: 1.5px solid #f2dedb !important;
  color: #181116 !important;
  background: #ffffff !important;
}
.finder-select-wrap select:focus {
  border-color: #f2b7b3 !important;
  box-shadow: 0 0 0 3px rgba(242, 183, 179, 0.3) !important;
}

/* Size Grid */
.size-grid a {
  background: #ffffff !important;
  border: 1.5px solid #f2dedb !important;
  color: #181116 !important;
  box-shadow: 0 4px 16px rgba(242, 183, 179, 0.1) !important;
}
.size-grid a:hover {
  background: #f2b7b3 !important;
  color: #181116 !important;
  border-color: #f2b7b3 !important;
  box-shadow: 0 8px 24px rgba(242, 183, 179, 0.35) !important;
}

/* Custom Packaging & Guides */
.custom-section {
  background: #fdf6f5 !important;
  border-top: 1px solid #f2dedb !important;
  border-bottom: 1px solid #f2dedb !important;
}
.custom-section .custom-visual {
  background: #f7e6e2 !important;
  border: 1px solid #ebd3cd !important;
  box-shadow: 0 16px 44px rgba(75, 44, 49, 0.1) !important;
}
.check-list li::before {
  background: #f2b7b3 !important;
  color: #181116 !important;
}

/* ==========================================================================
   Newsletter Section (Seamless Dark Zone & WhatsApp Opt-In)
   ========================================================================== */
/* ==========================================================================
   Newsletter Section (Luxury Editorial & WhatsApp Restock Drops)
   ========================================================================== */
.newsletter-section {
  background: radial-gradient(circle at 85% 30%, rgba(242, 183, 179, 0.16) 0%, transparent 50%),
              radial-gradient(circle at 15% 70%, rgba(242, 183, 179, 0.08) 0%, transparent 45%),
              linear-gradient(135deg, #22161e 0%, #160e14 100%) !important;
  color: #ffffff !important;
  padding: 76px 0 !important;
  border-top: 1px solid rgba(242, 183, 179, 0.22) !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
  position: relative !important;
  overflow: hidden !important;
}

.newsletter-inner {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 54px !important;
  max-width: 1220px !important;
  margin: 0 auto !important;
  padding: 0 24px !important;
}

.newsletter-content {
  max-width: 580px !important;
}

.newsletter-badge {
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  background: rgba(242, 183, 179, 0.12) !important;
  border: 1px solid rgba(242, 183, 179, 0.35) !important;
  color: #f2b7b3 !important;
  border-radius: 999px !important;
  padding: 5px 14px !important;
  font-size: 11px !important;
  font-weight: 800 !important;
  letter-spacing: 0.14em !important;
  margin-bottom: 14px !important;
}

.live-dot {
  width: 7px !important;
  height: 7px !important;
  border-radius: 50% !important;
  background: #f2b7b3 !important;
  box-shadow: 0 0 10px #f2b7b3 !important;
  animation: pulseDot 2s infinite !important;
}

@keyframes pulseDot {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.4; transform: scale(0.85); }
}

.newsletter-content h2 {
  font-family: var(--pmc-sans, 'Plus Jakarta Sans', sans-serif) !important;
  font-size: clamp(26px, 2.6vw, 36px) !important;
  font-weight: 800 !important;
  color: #ffffff !important;
  line-height: 1.2 !important;
  letter-spacing: -0.03em !important;
  margin: 0 0 12px 0 !important;
}

.accent-text {
  color: #f2b7b3 !important;
  font-style: normal !important;
}

.newsletter-sub {
  color: #cfbdc6 !important;
  font-size: 15px !important;
  line-height: 1.55 !important;
  margin: 0 !important;
  max-width: 500px !important;
}

.newsletter-action-wrap {
  width: 100% !important;
  max-width: 480px !important;
}

.newsletter-form {
  display: flex !important;
  align-items: center !important;
  background: rgba(255, 255, 255, 0.07) !important;
  border: 1.5px solid rgba(242, 183, 179, 0.32) !important;
  border-radius: 999px !important;
  padding: 6px 7px 6px 18px !important;
  height: 60px !important;
  width: 100% !important;
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.1) !important;
  backdrop-filter: blur(16px) !important;
  -webkit-backdrop-filter: blur(16px) !important;
  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1) !important;
  margin: 0 !important;
}

.newsletter-form:hover {
  border-color: rgba(242, 183, 179, 0.5) !important;
  background: rgba(255, 255, 255, 0.09) !important;
}

.newsletter-form:focus-within {
  border-color: #f2b7b3 !important;
  background: rgba(255, 255, 255, 0.11) !important;
  box-shadow: 0 0 0 4px rgba(242, 183, 179, 0.25), 0 20px 48px rgba(0, 0, 0, 0.5) !important;
}

.newsletter-field {
  display: flex !important;
  align-items: center !important;
  flex: 1 !important;
  min-width: 0 !important;
  height: 100% !important;
}

.whatsapp-badge-icon {
  color: #f2b7b3 !important;
  display: flex !important;
  align-items: center !important;
  margin-right: 10px !important;
  opacity: 0.9 !important;
}

.phone-prefix {
  color: #e5d5dc !important;
  font-weight: 700 !important;
  font-size: 14.5px !important;
  padding-right: 10px !important;
  border-right: 1px solid rgba(242, 183, 179, 0.25) !important;
  margin-right: 10px !important;
  line-height: 1 !important;
}

.newsletter-form input {
  flex: 1 !important;
  min-width: 0 !important;
  height: 100% !important;
  background: transparent !important;
  border: none !important;
  outline: none !important;
  box-shadow: none !important;
  color: #ffffff !important;
  font-family: var(--pmc-sans, 'Plus Jakarta Sans', sans-serif) !important;
  font-size: 15px !important;
  font-weight: 600 !important;
  padding: 0 8px 0 0 !important;
  margin: 0 !important;
  border-radius: 0 !important;
}

.newsletter-form input::placeholder {
  color: rgba(255, 255, 255, 0.45) !important;
  font-weight: 400 !important;
}

/* Chrome / Safari / Edge Autofill fix - prevents light blue box from rendering */
.newsletter-form input:-webkit-autofill,
.newsletter-form input:-webkit-autofill:hover, 
.newsletter-form input:-webkit-autofill:focus, 
.newsletter-form input:-webkit-autofill:active,
.newsletter-form input:autofill {
  -webkit-box-shadow: 0 0 0 1000px #24161f inset !important;
  -webkit-text-fill-color: #ffffff !important;
  caret-color: #ffffff !important;
  border-radius: 0 !important;
  transition: background-color 5000s ease-in-out 0s !important;
}

.newsletter-form button {
  background: linear-gradient(135deg, #f2b7b3 0%, #e8a09b 100%) !important;
  color: #181116 !important;
  border: none !important;
  border-radius: 999px !important;
  height: 48px !important;
  padding: 0 24px !important;
  font-family: var(--pmc-sans, 'Plus Jakarta Sans', sans-serif) !important;
  font-size: 14px !important;
  font-weight: 800 !important;
  letter-spacing: 0.01em !important;
  white-space: nowrap !important;
  cursor: pointer !important;
  box-shadow: 0 4px 16px rgba(242, 183, 179, 0.35) !important;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1) !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
}

.newsletter-form button:hover {
  background: #ffffff !important;
  color: #181116 !important;
  transform: translateY(-1px) scale(1.02) !important;
  box-shadow: 0 8px 24px rgba(255, 255, 255, 0.4) !important;
}

.newsletter-form button:active {
  transform: translateY(0) scale(0.99) !important;
}

.newsletter-perks {
  display: flex !important;
  align-items: center !important;
  gap: 18px !important;
  margin-top: 12px !important;
  padding-left: 14px !important;
  font-size: 12px !important;
  color: #ad9ba4 !important;
  font-weight: 500 !important;
}

@media (max-width: 992px) {
  .newsletter-section {
    padding: 60px 0 !important;
  }
  .newsletter-inner {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 36px !important;
  }
  .newsletter-action-wrap {
    max-width: 100% !important;
  }
  .newsletter-form {
    max-width: 100% !important;
    min-width: 0 !important;
  }
}

@media (max-width: 580px) {
  .newsletter-section {
    padding: 50px 0 88px !important;
  }
  .newsletter-inner {
    padding: 0 18px !important;
    gap: 26px !important;
  }
  .newsletter-content h2 {
    font-size: 23px !important;
  }
  .newsletter-sub {
    font-size: 13.5px !important;
  }
  .newsletter-form {
    height: 52px !important;
    padding: 4px 5px 4px 14px !important;
  }
  .phone-prefix {
    font-size: 13.5px !important;
    padding-right: 8px !important;
    margin-right: 8px !important;
  }
  .newsletter-form input {
    font-size: 14px !important;
  }
  .newsletter-form button {
    height: 44px !important;
    padding: 0 18px !important;
    font-size: 13px !important;
  }
  .newsletter-perks {
    font-size: 11.5px !important;
    gap: 14px !important;
    padding-left: 8px !important;
  }
}
.site-footer, .footer-v2, .simple-footer {
  background: #181116 !important;
  color: #ffffff !important;
  border-top: 1px solid rgba(242, 183, 179, 0.2) !important;
}
.footer-main h3 {
  color: #f2b7b3 !important;
}
.footer-main a {
  color: #d1bdc7 !important;
}
.footer-main a:hover {
  color: #f2b7b3 !important;
}
.footer-brand .brand-v2 small {
  color: #f2b7b3 !important;
}
.footer-bottom {
  border-top: 1px solid rgba(255, 255, 255, 0.1) !important;
  color: #9e8592 !important;
}
.footer-brand .whatsapp-link {
  background: rgba(242, 183, 179, 0.1) !important;
  border: 1px solid rgba(242, 183, 179, 0.3) !important;
  color: #ffffff !important;
}
.footer-brand .whatsapp-link:hover {
  background: #f2b7b3 !important;
  color: #181116 !important;
  border-color: #f2b7b3 !important;
}

/* Mobile Dock */
.mobile-dock {
  background: #181116 !important;
  border-top: 1px solid rgba(242, 183, 179, 0.2) !important;
}
.dock-item {
  color: #d1bdc7 !important;
}
.dock-item.active, .dock-item:hover {
  color: #f2b7b3 !important;
}

/* Shop, Filter, and Collection pages */
.collection-hero, .page-hero {
  position: relative;
  overflow: hidden;
  background: linear-gradient(135deg, #ffffff 0%, #fdf6f5 55%, #fae8e6 100%) !important;
  border: 1.5px solid #f2dedb !important;
}
.collection-hero-backdrop {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  overflow: hidden;
}
.collection-hero-img {
  position: absolute;
  top: 0;
  right: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: right center;
  display: block;
  transition: opacity 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}
.collection-hero-scrim {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(90deg, 
    rgba(254, 243, 240, 0.98) 0%, 
    rgba(254, 243, 240, 0.94) 340px, 
    rgba(254, 243, 240, 0.55) 540px, 
    rgba(254, 243, 240, 0) 780px);
}
.collection-hero-inner {
  position: relative;
  z-index: 1;
}
.collection-hero-copy {
  max-width: 580px;
}
.collection-chips,
.collection-hero .collection-chips,
.page-hero .collection-chips {
  position: relative;
  z-index: 1;
  border-top: none !important;
  padding-top: 0 !important;
}
@media (max-width: 860px) {
  .collection-hero, .page-hero {
    padding-top: 18px !important;
    padding-bottom: 22px !important;
    display: flex;
    flex-direction: column;
  }
  .collection-hero-backdrop {
    position: relative;
    inset: auto;
    width: 100%;
    height: 150px;
    margin: 0 0 16px;
    border-radius: 18px;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.05);
  }
  .collection-hero-scrim {
    display: none;
  }
  .collection-hero-img {
    position: relative;
    border-radius: 18px;
    object-position: right center;
  }
  .collection-hero-copy {
    max-width: 100%;
  }
}
.collection-chips a {
  border: 1.5px solid #f2dedb !important;
  background: #ffffff !important;
  color: #181116 !important;
}
.collection-chips a:hover, .collection-chips a.active {
  background: #f2b7b3 !important;
  border-color: #f2b7b3 !important;
  color: #181116 !important;
}
.filter-sidebar {
  border: 1.5px solid #f2dedb !important;
  background: #ffffff !important;
}
.filter-group {
  border-bottom: 1px solid #f2dedb !important;
}
.filter-group.filter-accordion {
  padding: 14px 0;
}
.filter-accordion-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  list-style: none;
  cursor: pointer;
  user-select: none;
  padding: 6px 8px;
  margin: -6px -8px 0;
  border-radius: 8px;
  transition: background 0.18s ease;
}
.filter-accordion-header::-webkit-details-marker,
.filter-accordion-header::marker {
  display: none;
}
.filter-accordion-header:hover {
  background: #fdf2f1;
}
.filter-accordion-title {
  font-size: 11.5px;
  font-weight: 800;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: #ba6b65;
  transition: color 0.18s ease;
}
.filter-accordion-header:hover .filter-accordion-title {
  color: #9c4d47;
}
.filter-accordion-meta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.filter-count-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  font-size: 10px;
  font-weight: 800;
  color: #ba6b65;
  background: #fdf2f1;
  border: 1px solid #f2dedb;
  border-radius: 999px;
  line-height: 1;
}
.filter-chevron {
  width: 15px;
  height: 15px;
  color: #ba6b65;
  transition: transform 0.28s cubic-bezier(0.16, 1, 0.3, 1), color 0.18s ease;
  transform: rotate(0deg);
  flex-shrink: 0;
}
details[open] .filter-chevron {
  transform: rotate(180deg);
}
.filter-accordion-body {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding-top: 10px;
}
.filter-accordion[open] .filter-accordion-body {
  animation: filterAccordionSlideDown 0.24s cubic-bezier(0.16, 1, 0.3, 1);
}
@keyframes filterAccordionSlideDown {
  from {
    opacity: 0;
    transform: translateY(-4px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
.filter-group label:hover {
  background: #fdf2f1 !important;
  color: #ba6b65 !important;
}
.filter-group h3 {
  font-family: var(--pmc-sans, 'Plus Jakarta Sans', sans-serif) !important;
  font-size: 11px !important;
  font-weight: 800 !important;
  letter-spacing: .12em !important;
  text-transform: uppercase !important;
  color: #ba6b65 !important;
  margin: 0 0 10px !important;
  line-height: 1.3 !important;
}

.filter-group input[type="search"] {
  font-family: var(--pmc-sans, 'Plus Jakarta Sans', sans-serif) !important;
  font-size: 13.5px !important;
  font-weight: 600 !important;
  color: #181116 !important;
  border: 1.5px solid #f2dedb !important;
  background: #ffffff !important;
  border-radius: 12px !important;
  padding: 0 14px !important;
  height: 44px !important;
  width: 100% !important;
  box-sizing: border-box !important;
  outline: none !important;
  transition: all 0.2s ease !important;
}

.filter-group select {
  font-family: var(--pmc-sans, 'Plus Jakarta Sans', sans-serif) !important;
  font-size: 13.5px !important;
  font-weight: 600 !important;
  color: #181116 !important;
  border: 1.5px solid #f2dedb !important;
  background: #ffffff !important;
  border-radius: 12px !important;
  padding: 0 14px !important;
  height: 44px !important;
  width: 100% !important;
  box-sizing: border-box !important;
  cursor: pointer !important;
  outline: none !important;
  transition: all 0.2s ease !important;
}

.filter-group input[type="search"]:focus,
.filter-group select:focus {
  border-color: #ba6b65 !important;
  box-shadow: 0 0 0 3px rgba(242, 183, 179, 0.3) !important;
}

#clear-filters {
  font-family: var(--pmc-sans, 'Plus Jakarta Sans', sans-serif) !important;
  font-size: 13px !important;
  font-weight: 750 !important;
  color: #ba6b65 !important;
  border: 1.5px solid #f2dedb !important;
  background: #ffffff !important;
  border-radius: 999px !important;
  min-height: 42px !important;
  width: 100% !important;
  cursor: pointer !important;
  transition: all 0.2s ease !important;
  margin-top: 14px !important;
}

#clear-filters:hover {
  background: #fdf2f1 !important;
  border-color: #ba6b65 !important;
  color: #9c4d47 !important;
}

.catalog-toolbar p,
#shop-status {
  font-family: var(--pmc-sans, 'Plus Jakarta Sans', sans-serif) !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  color: #6d5b60 !important;
  line-height: 1.4 !important;
  margin: 0 !important;
}

.catalog-toolbar select,
#shop-sort {
  font-family: var(--pmc-sans, 'Plus Jakarta Sans', sans-serif) !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  color: #181116 !important;
  border: 1.5px solid #f2dedb !important;
  background: #ffffff !important;
  border-radius: 999px !important;
  padding: 0 20px !important;
  height: 42px !important;
  cursor: pointer !important;
  outline: none !important;
  transition: border-color 0.2s ease, box-shadow 0.2s ease !important;
}

.catalog-toolbar select:focus,
#shop-sort:focus {
  border-color: #ba6b65 !important;
  box-shadow: 0 0 0 3px rgba(242, 183, 179, 0.3) !important;
}

/* Product Detail Page */
.product-main-image {
  border: 1.5px solid #f2dedb !important;
}
.thumb-btn {
  border: 1.5px solid #f2dedb !important;
}
.thumb-btn:first-child, .thumb-btn:hover {
  border-color: #f2b7b3 !important;
  box-shadow: 0 4px 12px rgba(242, 183, 179, 0.3) !important;
}
.product-purchase .product-category {
  color: #ba6b65 !important;
}
.product-purchase .price {
  color: #181116 !important;
}
.product-benefits span::before {
  color: #ba6b65 !important;
}
.qty-selector {
  border: 1.5px solid #f2dedb !important;
}
.qty-btn {
  color: #ba6b65 !important;
}
.bulk-callout {
  background: #fdf6f5 !important;
  border: 1.5px solid #f2dedb !important;
  color: #181116 !important;
}
.bulk-callout a {
  color: #ba6b65 !important;
}

/* Forms, Modals & Drawers */
.side-cart {
  border-left: 1.5px solid #f2dedb !important;
  background: #ffffff !important;
  color: #181116 !important;
}
.side-cart-header {
  border-bottom: 1.5px solid #f2dedb !important;
}
.side-cart-footer {
  border-top: 1.5px solid #f2dedb !important;
  background: #fdf6f5 !important;
}
.modal-content {
  border: 1.5px solid #f2dedb !important;
  box-shadow: 0 24px 70px rgba(24, 17, 22, 0.25) !important;
  background: #ffffff !important;
  color: #181116 !important;
}
.field input:not([type="checkbox"]):not([type="radio"]), .field textarea, .field select {
  border: 1.5px solid #f2dedb !important;
  color: #181116 !important;
}
.field input:not([type="checkbox"]):not([type="radio"]):focus, .field textarea:focus, .field select:focus {
  border-color: #f2b7b3 !important;
  box-shadow: 0 0 0 3px rgba(242, 183, 179, 0.25) !important;
}

/* Admin Panel */
.admin-body {
  background: #fdf6f5 !important;
  color: #181116 !important;
}
.admin-sidebar {
  background: #14050e !important;
  color: #ffffff !important;
  border-right: 1px solid rgba(242, 183, 179, 0.15) !important;
}
.admin-sidebar .admin-badge {
  background: linear-gradient(135deg, #f2b7b3 0%, #e09b96 100%) !important;
  color: #181116 !important;
  font-weight: 800 !important;
}
.admin-nav-item.active {
  background: rgba(242, 183, 179, 0.18) !important;
  color: #ffffff !important;
  border: 1px solid rgba(242, 183, 179, 0.35) !important;
}
.admin-nav-item.active svg {
  stroke: #f2b7b3 !important;
}
.admin-topbar {
  background: #ffffff !important;
  border-bottom: 1px solid #f2dedb !important;
}
.stat-card-v2 {
  background: #ffffff !important;
  border: 1.5px solid #f2dedb !important;
  box-shadow: 0 4px 16px rgba(242, 183, 179, 0.1) !important;
}
.stat-card-v2.primary {
  background: linear-gradient(135deg, #181116 0%, #241c21 100%) !important;
  color: #ffffff !important;
  border: 1.5px solid rgba(242, 183, 179, 0.3) !important;
}
.stat-card-v2.primary .stat-value {
  color: #f2b7b3 !important;
}
.stat-card-v2.primary .stat-label {
  color: #ffffff !important;
}
.admin-card {
  background: #ffffff !important;
  border: 1.5px solid #f2dedb !important;
  box-shadow: 0 4px 16px rgba(242, 183, 179, 0.08) !important;
}

/* Logos — Natural Original Color in Header */
.site-header .brand-v2 img, .site-header .brand img, .admin-mobile-header .admin-brand img {
  filter: none !important;
}
.footer-brand .brand-v2 img, .admin-sidebar .admin-brand img {
  filter: drop-shadow(0 2px 8px rgba(242, 183, 179, 0.3)) !important;
}

/* ==========================================================================
   FULL-SCREEN HERO BANNER CAROUSEL
   ========================================================================== */
:root {
  --pmc-header-offset: 167px;
}

@media (max-width: 992px) {
  :root {
    --pmc-header-offset: 102px;
  }
}

.hero-carousel-section {
  position: relative;
  width: 100vw;
  margin-left: calc(-50vw + 50%);
  margin-right: calc(-50vw + 50%);
  height: calc(100vh - var(--pmc-header-offset, 167px));
  height: calc(100svh - var(--pmc-header-offset, 167px));
  height: calc(100dvh - var(--pmc-header-offset, 167px));
  max-height: calc(100dvh - var(--pmc-header-offset, 167px));
  min-height: 440px;
  background: #181116;
  overflow: hidden;
  user-select: none;
  box-sizing: border-box;
}

@media (max-width: 992px) {
  .hero-carousel-section {
    height: calc(100vh - var(--pmc-header-offset, 102px));
    height: calc(100svh - var(--pmc-header-offset, 102px));
    height: calc(100dvh - var(--pmc-header-offset, 102px));
    max-height: calc(100dvh - var(--pmc-header-offset, 102px));
    min-height: 480px;
  }
}

@media (max-width: 600px) {
  .hero-carousel-section {
    height: calc(100vh - var(--pmc-header-offset, 102px));
    height: calc(100svh - var(--pmc-header-offset, 102px));
    height: calc(100dvh - var(--pmc-header-offset, 102px));
    max-height: calc(100dvh - var(--pmc-header-offset, 102px));
    min-height: 460px;
  }
}

.hero-carousel-container {
  position: relative;
  width: 100%;
  height: 100%;
  min-height: inherit;
}

.hero-carousel-slide {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.85s cubic-bezier(0.16, 1, 0.3, 1), visibility 0.85s;
  z-index: 1;
}

.hero-carousel-slide.active {
  opacity: 1;
  visibility: visible;
  z-index: 2;
}

.hero-slide-bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  background-size: cover;
  background-position: center right;
  background-repeat: no-repeat;
  transform: scale(1.05);
  transition: transform 7s cubic-bezier(0.1, 0.9, 0.2, 1);
}

.hero-carousel-slide.active .hero-slide-bg {
  transform: scale(1);
}

.hero-slide-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to right,
    rgba(255, 255, 255, 0.98) 0%,
    rgba(255, 255, 255, 0.94) 36%,
    rgba(255, 255, 255, 0.76) 55%,
    rgba(255, 255, 255, 0.2) 75%,
    transparent 100%
  );
  z-index: 2;
  pointer-events: none;
}

@media (max-width: 900px) {
  .hero-slide-overlay {
    background: linear-gradient(
      to bottom,
      rgba(255, 255, 255, 0.96) 0%,
      rgba(255, 255, 255, 0.92) 52%,
      rgba(255, 255, 255, 0.6) 78%,
      rgba(255, 255, 255, 0.25) 100%
    );
  }
}

body:not(.admin-body) .container.hero-slide-wrapper,
.hero-slide-wrapper {
  position: relative;
  z-index: 3;
  width: calc(100% - 2 * var(--site-gutter, clamp(24px, 5vw, 96px)));
  max-width: none;
  height: 100%;
  margin-inline: auto;
  padding: 0;
  display: flex;
  align-items: center;
  box-sizing: border-box;
}

@media (max-width: 768px) {
  body:not(.admin-body) .container.hero-slide-wrapper,
  .hero-slide-wrapper {
    padding: 0;
    align-items: center;
  }
}

.hero-slide-content {
  max-width: 680px;
  padding: clamp(14px, 2.5vh, 36px) 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  text-align: left;
}

@media (max-width: 768px) {
  .hero-slide-content {
    max-width: 100%;
    padding: 16px 0 clamp(44px, 8vh, 60px);
  }
}

.hero-carousel-slide.active .hero-slide-content .kicker {
  animation: heroFadeUp 0.6s ease forwards;
}

.hero-carousel-slide.active .hero-slide-content h1 {
  animation: heroFadeUp 0.7s ease 0.1s forwards;
}

.hero-carousel-slide.active .hero-slide-content p {
  animation: heroFadeUp 0.8s ease 0.2s forwards;
}

.hero-carousel-slide.active .hero-slide-content .hero-actions {
  animation: heroFadeUp 0.9s ease 0.3s forwards;
}

.hero-carousel-slide.active .hero-slide-content .hero-proof {
  animation: heroFadeUp 1s ease 0.4s forwards;
}

@keyframes heroFadeUp {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.hero-slide-content h1 {
  font-family: var(--pmc-sans);
  font-size: clamp(30px, min(4.2vw, 5.8vh), 58px);
  font-weight: 800;
  letter-spacing: -0.035em;
  line-height: 1.08;
  color: #181116;
  margin: clamp(10px, 1.8vh, 18px) 0 clamp(10px, 1.6vh, 16px);
}

@media (max-width: 768px) {
  .hero-slide-content h1 {
    font-size: clamp(26px, 7vw, 38px);
    margin: 10px 0 12px;
  }
}

.hero-slide-content p {
  font-size: clamp(13.5px, min(1.15vw, 2vh), 16.5px);
  line-height: 1.5;
  color: #42363d;
  margin: 0 0 clamp(14px, 2.2vh, 26px);
  max-width: 540px;
}

@media (max-width: 768px) {
  .hero-slide-content p {
    font-size: 14.5px;
    margin: 0 0 16px;
  }
}

.hero-slide-content .hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

.hero-slide-content .hero-actions .btn {
  min-height: clamp(42px, 5vh, 48px);
  padding: 0 clamp(20px, 2vw, 28px);
  font-size: clamp(12.5px, 0.95vw, 13.5px);
}

.hero-slide-content .hero-proof {
  display: flex;
  align-items: center;
  gap: clamp(12px, 1.6vw, 20px);
  margin-top: clamp(14px, 2.4vh, 28px);
  padding-top: clamp(12px, 1.8vh, 20px);
  border-top: 1.5px solid rgba(24, 17, 22, 0.1);
}

@media (max-width: 768px) {
  .hero-slide-content .hero-proof {
    margin-top: 16px;
    padding-top: 14px;
    gap: 12px;
  }
}

@media (max-width: 600px) {
  .hero-slide-content .hero-proof {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
    margin-top: 14px;
    padding-top: 12px;
  }
  .hero-slide-content .hero-proof .proof-divider {
    display: none;
  }
  .hero-slide-content .hero-proof .proof-item {
    text-align: left;
  }
  .hero-slide-content .hero-proof .proof-item b {
    font-size: 9.5px;
  }
  .hero-slide-content .hero-proof .proof-item span {
    font-size: 10.5px;
    line-height: 1.25;
  }
}

.hero-slide-content .hero-proof .proof-item b {
  font-size: clamp(10px, 0.9vw, 11px);
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #181116;
  display: block;
  margin-bottom: 2px;
}

.hero-slide-content .hero-proof .proof-item span {
  font-size: clamp(11px, 0.95vw, 12px);
  color: #666666;
}

.hero-slide-content .hero-proof .proof-divider {
  width: 1px;
  height: clamp(20px, 3vh, 28px);
  background: rgba(24, 17, 22, 0.15);
}

/* Shorter screens viewport adjustment */
@media (max-height: 720px) {
  .hero-slide-content h1 {
    font-size: clamp(26px, 3.8vw, 36px);
    margin: 6px 0 8px;
  }
  .hero-slide-content p {
    font-size: 13px;
    margin: 0 0 12px;
  }
  .hero-slide-content .hero-actions .btn {
    min-height: 38px;
    padding: 0 18px;
  }
  .hero-slide-content .hero-proof {
    margin-top: 10px;
    padding-top: 10px;
  }
  .hero-carousel-dots {
    bottom: 10px !important;
    padding: 4px 12px !important;
  }
}

/* Nav Arrows Hidden */
.hero-carousel-btn {
  display: none !important;
}

/* Pagination Dots */
.hero-carousel-dots {
  position: absolute;
  bottom: clamp(14px, 2.4vh, 24px);
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  gap: 10px;
  z-index: 10;
  padding: 6px 16px;
  background: rgba(255, 255, 255, 0.85);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-radius: 999px;
  border: 1px solid rgba(242, 222, 219, 0.8);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
}

.hero-carousel-dot {
  width: 10px;
  height: 10px;
  border-radius: 999px;
  background: rgba(24, 17, 22, 0.25);
  border: 0;
  padding: 0;
  cursor: pointer;
  transition: all 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}

.hero-carousel-dot:hover {
  background: rgba(24, 17, 22, 0.55);
}

.hero-carousel-dot.active {
  width: 34px;
  background: #f2b7b3;
  border: 1px solid #e09b96;
  box-shadow: 0 2px 8px rgba(242, 183, 179, 0.5);
}

/* Progress countdown line */
.hero-carousel-progress {
  position: absolute;
  bottom: 0;
  left: 0;
  height: 4px;
  background: #f2b7b3;
  width: 0%;
  z-index: 10;
  transition: width 0.05s linear;
}

/* Unified product cards */
body:not(.admin-body) .product-card {
  position: relative;
  min-width: 0;
  height: 100%;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  background: #ffffff !important;
  border: 1px solid #f2dedb !important;
  border-radius: 18px;
  box-shadow: 0 5px 18px rgba(67, 41, 45, 0.08) !important;
  transform: translateZ(0);
  transition: transform 0.28s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.25s ease, box-shadow 0.28s ease;
}

body:not(.admin-body) .product-card:hover,
body:not(.admin-body) .product-card:focus-within {
  border-color: #efc2be !important;
  box-shadow: 0 12px 30px rgba(90, 51, 57, 0.14) !important;
  transform: translateY(-5px);
}

body:not(.admin-body) .product-card > a:first-child,
body:not(.admin-body) .product-card-image {
  position: relative;
  isolation: isolate;
  width: auto;
  aspect-ratio: 1 / 1;
  margin: 0;
  padding: 0;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  background:
    radial-gradient(circle at 18% 14%, rgba(255, 255, 255, 0.96) 0 12%, transparent 42%),
    linear-gradient(145deg, #fffdfc 0%, #fdf6f3 58%, #faebe8 100%) !important;
  border: 0 !important;
  border-bottom: 1px solid #f2dedb !important;
  border-radius: 0;
  box-shadow: none !important;
}

body:not(.admin-body) .product-card > a:first-child img,
body:not(.admin-body) .product-card-image img,
body:not(.admin-body) .product-card > img {
  position: relative;
  z-index: 1;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
  filter: drop-shadow(0 12px 16px rgba(45, 30, 33, 0.12));
  transition: transform 0.45s cubic-bezier(0.16, 1, 0.3, 1), filter 0.3s ease;
}

body:not(.admin-body) .product-card:hover > a:first-child img,
body:not(.admin-body) .product-card:hover .product-card-image img {
  transform: scale(1.02);
  filter: drop-shadow(0 16px 20px rgba(45, 30, 33, 0.16));
}

body:not(.admin-body) .product-card > a:first-child::after,
body:not(.admin-body) .product-card-image::after {
  content: 'View product  ↗';
  left: auto;
  right: 12px;
  bottom: 12px;
  width: auto;
  padding: 8px 12px;
  border: 1px solid rgba(255, 255, 255, 0.82);
  border-radius: 999px;
  background: rgba(24, 17, 22, 0.86);
  color: #ffffff;
  box-shadow: 0 7px 18px rgba(24, 17, 22, 0.18);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 0.08em;
  line-height: 1;
  text-transform: uppercase;
  transform: translateY(8px);
  opacity: 0;
  transition: transform 0.25s ease, opacity 0.2s ease;
}

body:not(.admin-body) .product-card:hover > a:first-child::after,
body:not(.admin-body) .product-card:hover .product-card-image::after,
body:not(.admin-body) .product-card > a:first-child:focus-visible::after,
body:not(.admin-body) .product-card-image:focus-visible::after {
  transform: translateY(0);
  opacity: 1;
}

body:not(.admin-body) .product-badge {
  top: 12px;
  left: 12px;
  z-index: 3;
  padding: 6px 10px;
  background: rgba(242, 183, 179, 0.94) !important;
  border: 1px solid rgba(255, 255, 255, 0.75);
  color: #181116 !important;
  box-shadow: 0 6px 16px rgba(137, 76, 82, 0.16) !important;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

body:not(.admin-body) .product-card-body {
  flex: 1;
  display: flex;
  flex-direction: column;
  padding: 15px 16px 14px;
}

body:not(.admin-body) .product-card-body > small {
  display: flex;
  align-items: center;
  gap: 7px;
  margin: 0 0 7px;
  color: #a85e62 !important;
  font-size: 10px;
  font-weight: 800 !important;
  letter-spacing: 0.11em;
  line-height: 1.2;
  text-transform: uppercase;
}

body:not(.admin-body) .product-card-body > small::before {
  content: none;
}

body:not(.admin-body) .product-card h3 {
  min-height: 44px;
  margin: 0 0 12px;
  color: #181116;
  font-size: clamp(14px, 1.05vw, 16px);
  font-weight: 750;
  line-height: 1.4;
  letter-spacing: -0.015em;
}

body:not(.admin-body) .product-card h3 a {
  display: -webkit-box;
  overflow: hidden;
  color: #181116 !important;
  text-decoration: none;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
}

body:not(.admin-body) .product-card h3 a:hover {
  color: #9b555a !important;
}

body:not(.admin-body) .product-card-body > p {
  display: -webkit-box;
  overflow: hidden;
  margin: -3px 0 12px;
  color: #74666a;
  font-size: 12px;
  line-height: 1.5;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
}

body:not(.admin-body) .product-specs {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 0 0 14px;
}

body:not(.admin-body) .product-specs span {
  min-height: 26px;
  display: inline-flex;
  align-items: center;
  padding: 4px 9px;
  background: #fff8f7 !important;
  border: 1px solid #f1dcd9 !important;
  border-radius: 999px;
  color: #5c4c50 !important;
  font-size: 10px;
  font-weight: 750;
  letter-spacing: 0;
}

body:not(.admin-body) .product-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-top: auto;
  padding-top: 10px;
  border-top: 0;
}

body:not(.admin-body) .product-meta strong,
body:not(.admin-body) .price-wrap strong {
  color: #181116 !important;
  font-size: clamp(20px, 1.65vw, 25px);
  font-weight: 850;
  line-height: 1;
  letter-spacing: -0.035em;
}

body:not(.admin-body) .price-wrap {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 6px;
}

body:not(.admin-body) .compare-price {
  color: #9b8c90;
  font-size: 11px;
}


@media (max-width: 820px) {
  body:not(.admin-body) .product-grid,
  body:not(.admin-body) .catalog-grid {
    gap: 14px;
  }

  body:not(.admin-body) .product-card {
    border-radius: 16px;
  }

  body:not(.admin-body) .product-card > a:first-child,
  body:not(.admin-body) .product-card-image {
    aspect-ratio: 1 / 1;
    margin: 0;
    padding: 0;
    border-radius: 0;
  }

  body:not(.admin-body) .product-card-body {
    padding: 13px 13px 12px;
  }

  body:not(.admin-body) .product-card-body > small {
    margin-bottom: 6px;
    font-size: 8px;
    letter-spacing: 0.08em;
  }

  body:not(.admin-body) .product-card h3 {
    min-height: 39px;
    margin-bottom: 10px;
    font-size: 12.5px;
    line-height: 1.45;
  }

  body:not(.admin-body) .product-specs {
    gap: 4px;
    margin-bottom: 10px;
  }

  body:not(.admin-body) .product-specs span {
    min-height: 23px;
    padding: 3px 7px;
    font-size: 8px;
  }

  body:not(.admin-body) .product-meta {
    align-items: stretch;
    flex-direction: column;
    gap: 10px;
    padding-top: 11px;
  }

  body:not(.admin-body) .product-meta strong,
  body:not(.admin-body) .price-wrap strong {
    font-size: 19px;
  }

  body:not(.admin-body) .quick-add,
  body:not(.admin-body) .product-meta .btn-small {
    width: 44px;
    min-width: 44px;
    height: 44px;
  }
}


@media (hover: none) {
  body:not(.admin-body) .product-card:hover {
    transform: none;
  }

  body:not(.admin-body) .product-card > a:first-child::after,
  body:not(.admin-body) .product-card-image::after {
    display: none;
  }
}

/* SnapZero-inspired product detail layout */
.product-page-section {
  padding-block: 30px 90px;
}

body:not(.admin-body) .product-page-section > .container {
  width: min(100% - (var(--site-gutter) * 2), 1696px);
  max-width: 1696px;
}

.product-breadcrumbs {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  margin: 0 0 34px;
  color: #978b8e;
  font-size: 13px;
  font-weight: 600;
}

.product-breadcrumbs a {
  color: #75696c;
  text-decoration: none;
}

.product-breadcrumbs a:hover {
  color: #ba6b65;
}

.product-breadcrumbs > span:not([aria-current]) {
  color: #c9bdc0;
}

.product-breadcrumbs [aria-current] {
  color: #181116;
}

.product-detail {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(400px, 1fr);
  gap: clamp(42px, 4.5vw, 70px);
  align-items: start;
}

.product-gallery {
  position: relative;
  top: 0;
  display: grid;
  grid-template-columns: clamp(82px, 5.5vw, 110px) minmax(0, 1fr);
  gap: clamp(16px, 1.3vw, 26px);
  align-items: start;
}

.product-main-image {
  grid-column: 2;
  grid-row: 1;
  width: 100%;
  height: auto;
  min-height: 0;
  aspect-ratio: 1.22 / 1;
  align-self: start;
  display: block;
  object-fit: contain;
  object-position: center;
  padding: clamp(10px, 1.3vw, 18px);
  background: linear-gradient(145deg, #fffdfc 0%, #fdf4f2 100%);
  border: 1px solid #f2dedb !important;
  border-radius: 20px;
  box-shadow: 0 12px 34px rgba(76, 45, 50, 0.08);
}

.thumb-grid {
  grid-column: 1;
  grid-row: 1;
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-top: 0;
}

.thumb-btn {
  width: clamp(82px, 5.5vw, 110px);
  height: clamp(82px, 5.5vw, 110px);
  flex: 0 0 clamp(82px, 5.5vw, 110px);
  overflow: hidden;
  padding: 5px;
  border: 1px solid #f2dedb !important;
  border-radius: 13px;
  background: #fffaf9;
  box-shadow: none !important;
  cursor: pointer;
}

.thumb-btn:first-child,
.thumb-btn:hover,
.thumb-btn.is-active {
  border-color: #ba6b65 !important;
  box-shadow: 0 5px 14px rgba(186, 107, 101, 0.16) !important;
}

.thumb-btn img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.product-purchase {
  position: sticky;
  top: 154px;
  padding: 2px 0 0;
}

.product-purchase .product-category {
  display: block;
  margin-bottom: 14px;
  color: #8e7f83 !important;
  font-size: 12px;
  font-weight: 650;
  letter-spacing: 0;
  text-transform: none;
}

.product-purchase h1 {
  max-width: 620px;
  margin: 0 0 22px;
  color: #181116;
  font-family: var(--pmc-sans);
  font-size: clamp(38px, 3.6vw, 64px);
  font-weight: 800;
  line-height: 1.03;
  letter-spacing: -0.05em;
}

.product-price-line {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 10px;
  margin-bottom: 24px;
}

.product-purchase .price {
  margin: 0;
  color: #181116 !important;
  font-size: clamp(31px, 3vw, 48px);
  font-weight: 850;
  line-height: 1;
  letter-spacing: -0.045em;
}

.unit-price {
  color: #8e8185;
  font-size: 13px;
  font-weight: 600;
}

.product-intro {
  max-width: 570px;
  margin: 0 0 25px;
  color: #514649;
  font-size: 15px;
  line-height: 1.65;
}

.product-option-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 11px;
  color: #181116;
  font-size: 12px;
  font-weight: 800;
  text-transform: none;
  letter-spacing: 0;
}

.product-option-heading .stock-pill {
  display: none;
}

.product-option-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin-bottom: 22px;
}

.product-option-card {
  min-height: 88px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: 7px;
  padding: 16px 18px;
  border: 1.5px solid #f0ddda;
  border-radius: 16px;
  background: #fffaf8;
  color: #181116;
  text-decoration: none;
}

.product-option-card strong {
  font-size: 15px;
  font-weight: 800;
}

.product-option-card span {
  color: #866f74;
  font-size: 12px;
  font-weight: 700;
}

.product-option-card.is-selected {
  border-color: #e9aaa5;
  background: #f2b7b3;
  box-shadow: 0 7px 18px rgba(186, 107, 101, 0.16);
}

.product-option-card.is-selected span {
  color: #49363a;
}

.product-option-card--bulk:hover {
  border-color: #e9aaa5;
  background: #fdf2f1;
}

.purchase-label {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
}

.product-actions {
  position: static;
  display: grid;
  grid-template-columns: 132px minmax(0, 1fr);
  gap: 12px;
  margin: 0;
  padding: 0;
  background: transparent;
}

.product-actions .qty-selector {
  height: 54px;
  display: grid;
  grid-template-columns: 40px 1fr 40px;
  align-items: center;
  border: 1.5px solid #f0ddda !important;
  border-radius: 999px;
  background: #fffaf8;
}

.product-actions .qty-btn {
  width: 40px;
  height: 51px;
  border: 0;
  background: transparent;
  color: #ba6b65 !important;
  font-size: 18px;
  font-weight: 800;
}

.product-actions .qty-selector input {
  width: 100%;
  border: 0;
  outline: 0;
  background: transparent;
  color: #181116;
  font: 800 15px var(--pmc-sans);
  text-align: center;
}

.product-actions .btn-primary {
  height: 54px;
  border: 1px solid #e7a39e !important;
  border-radius: 999px;
  background: #f2b7b3 !important;
  color: #181116 !important;
  box-shadow: 0 8px 20px rgba(186, 107, 101, 0.2) !important;
  font-size: 14px;
  font-weight: 800;
}

.product-actions .btn-primary:hover {
  background: #eaa8a3 !important;
  transform: translateY(-2px);
}

.product-buy-now {
  display: none;
}

.product-buy-now:hover {
  color: #181116;
}

.product-detail-tabs {
  margin-top: clamp(54px, 5vw, 74px);
}

.product-tab-list {
  display: flex;
  gap: clamp(24px, 5vw, 72px);
  overflow-x: auto;
  border-bottom: 1px solid #eadfdd;
  scrollbar-width: none;
}

.product-tab-list::-webkit-scrollbar {
  display: none;
}

.product-tab {
  position: relative;
  flex: 0 0 auto;
  min-height: 54px;
  padding: 0 2px;
  border: 0;
  background: transparent;
  color: #8e8185;
  font: 700 13px var(--pmc-sans);
  cursor: pointer;
}

.product-tab::after {
  content: '';
  position: absolute;
  right: 0;
  bottom: -1px;
  left: 0;
  height: 3px;
  border-radius: 999px 999px 0 0;
  background: #f2b7b3;
  transform: scaleX(0);
  transition: transform 0.2s ease;
}

.product-tab.is-active {
  color: #181116;
}

.product-tab.is-active::after {
  transform: scaleX(1);
}

.product-tab-panel {
  max-width: 1040px;
  min-height: 92px;
  padding: 26px 0 16px;
  color: #5f5356;
  font-size: 14px;
  line-height: 1.7;
}

.product-tab-panel[hidden] {
  display: none;
}

.product-tab-panel p {
  margin: 0;
  white-space: pre-line;
}

.product-tab-panel .spec-table {
  max-width: 660px;
  margin: 0;
}

.product-note {
  margin-top: 24px;
  padding: 24px 26px;
  border: 1px solid #edd2cf;
  border-radius: 17px;
  background: #fff9ef;
}

.product-note strong {
  display: block;
  margin-bottom: 10px;
  color: #9b555a;
  font-size: 11px;
  font-weight: 850;
  letter-spacing: 0.08em;
}

.product-note p {
  margin: 0;
  color: #54484b;
  font-size: 13px;
  line-height: 1.6;
  white-space: pre-line;
}

@media (max-width: 900px) {
  .product-page-section {
    padding-top: 20px;
  }

  .product-breadcrumbs {
    margin-bottom: 22px;
    font-size: 11px;
  }

  .product-detail {
    grid-template-columns: 1fr;
    gap: 32px;
  }

  .product-gallery {
    display: flex;
    flex-direction: column;
  }

  .product-main-image {
    order: 1;
    width: 100%;
    height: auto;
    min-height: 0;
    aspect-ratio: 1 / 1;
    padding: 12px;
    border-radius: 17px;
  }

  .thumb-grid {
    order: 2;
    flex-direction: row;
    overflow-x: auto;
    padding-bottom: 4px;
  }

  .thumb-btn {
    width: 68px;
    height: 68px;
    flex-basis: 68px;
  }

  .product-purchase {
    position: static;
    padding: 0;
  }

  .product-purchase h1 {
    margin-bottom: 19px;
    font-size: clamp(34px, 10vw, 48px);
  }

  .product-intro {
    font-size: 14px;
  }

  .product-detail-tabs {
    margin-top: 58px;
  }
}

@media (max-width: 480px) {
  .product-option-grid {
    grid-template-columns: 1fr 1fr;
  }

  .product-option-card {
    min-height: 82px;
    padding: 13px;
  }

  .product-actions {
    grid-template-columns: 112px 1fr;
  }

  .product-tab-list {
    gap: 28px;
  }

  .product-note {
    padding: 20px;
  }
}

/* Animated, high-visibility box finder */
.find-box-section {
  position: relative;
  overflow: clip;
  background:
    radial-gradient(circle at 18% 40%, rgba(242, 183, 179, 0.16), transparent 28%),
    radial-gradient(circle at 82% 58%, rgba(255, 226, 216, 0.3), transparent 26%),
    #fff;
}

.find-box-section::before,
.find-box-section::after {
  content: '';
  position: absolute;
  width: 260px;
  height: 260px;
  border: 1px solid rgba(224, 155, 150, 0.2);
  border-radius: 50%;
  pointer-events: none;
}

.find-box-section::before {
  top: 3%;
  left: -150px;
}

.find-box-section::after {
  right: -170px;
  bottom: 0;
}

.find-box-grid {
  position: relative;
  isolation: isolate;
  box-shadow:
    0 38px 90px rgba(24, 17, 22, 0.22),
    0 0 0 8px rgba(242, 183, 179, 0.08) !important;
}

.find-box-grid::after {
  content: '';
  position: absolute;
  z-index: 5;
  top: 0;
  left: 7%;
  width: 30%;
  height: 2px;
  background: linear-gradient(90deg, transparent, #f2b7b3, transparent);
  animation: finder-shimmer 5s ease-in-out infinite;
  pointer-events: none;
}

.find-box-grid.is-visible {
  animation: finder-arrive 0.8s cubic-bezier(0.16, 1, 0.3, 1) both;
}

.find-box-copy {
  overflow: hidden;
  background:
    radial-gradient(circle at 12% 15%, rgba(255, 255, 255, 0.42), transparent 38%),
    radial-gradient(circle at 88% 86%, rgba(224, 137, 132, 0.28), transparent 32%),
    linear-gradient(145deg, #fce5e3 0%, #f2b7b3 50%, #e99e99 100%) !important;
}

.find-box-copy::before {
  content: '';
  position: absolute;
  z-index: 1;
  right: -120px;
  bottom: -140px;
  width: 340px;
  height: 340px;
  border: 1px solid rgba(255, 255, 255, 0.45) !important;
  border-radius: 50%;
  box-shadow: 0 0 70px rgba(255, 255, 255, 0.3) inset !important;
  animation: finder-orbit 10s ease-in-out infinite;
  pointer-events: none;
}

.find-box-kicker {
  color: #732a2f !important;
}

.find-box-kicker::before {
  background: #732a2f !important;
  box-shadow: 0 0 10px rgba(115, 42, 47, 0.35) !important;
}

.find-box-copy h2 {
  max-width: 450px;
  text-wrap: balance;
  color: #181116 !important;
}

.find-box-copy h2::after {
  content: '';
  display: block;
  width: 68px;
  height: 5px;
  margin-top: 22px;
  border-radius: 999px;
  background: linear-gradient(90deg, #181116 0 72%, rgba(24, 17, 22, 0.2) 72%) !important;
}

.find-box-copy p {
  color: #382124 !important;
  font-weight: 500;
}

.finder-proof-row {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 22px;
  padding: 0;
  list-style: none;
}

.finder-proof-row li {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 8px 11px;
  border: 1px solid rgba(160, 80, 85, 0.25) !important;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.82) !important;
  color: #181116 !important;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.04em;
  backdrop-filter: blur(8px);
  box-shadow: 0 4px 12px rgba(112, 53, 58, 0.06);
}

.finder-proof-row i,
.finder-progress em i {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #ba4e55 !important;
  box-shadow: 0 0 0 4px rgba(186, 78, 85, 0.16) !important;
}

.dimension-wireframe {
  max-width: 330px;
  padding: 18px 18px 12px;
  border: 1px solid rgba(160, 80, 85, 0.22) !important;
  border-radius: 20px;
  background: rgba(255, 255, 255, 0.75) !important;
  box-shadow: 0 16px 36px rgba(112, 53, 58, 0.08) !important;
  position: relative;
  z-index: 2;
}

.dimension-wireframe svg {
  overflow: visible;
  filter: drop-shadow(0 6px 10px rgba(112, 53, 58, 0.08));
  animation: wireframe-float 4.6s ease-in-out infinite;
}

.dimension-wireframe svg text {
  fill: #181116 !important;
  font-weight: 800 !important;
}

.dimension-wireframe .wireframe-line,
.dimension-wireframe line[stroke-dasharray] {
  stroke: rgba(24, 17, 22, 0.42) !important;
  stroke-dashoffset: 20;
  animation: wireframe-draw 4.5s linear infinite;
}

.dimension-wireframe line:not([stroke-dasharray]) {
  stroke: #9e3238 !important;
  stroke-width: 2 !important;
}

.dimension-wireframe .wireframe-fill--top {
  fill: rgba(242, 183, 179, 0.35) !important;
  animation: wireframe-glow 3.6s ease-in-out infinite;
}

.dimension-wireframe .wireframe-fill--side {
  fill: rgba(242, 183, 179, 0.2) !important;
}

.box-finder {
  overflow: hidden;
  background:
    radial-gradient(circle at 100% 0%, rgba(242, 183, 179, 0.16), transparent 30%),
    linear-gradient(155deg, #fff 0%, #fff 68%, #fff7f5 100%) !important;
}

.box-finder::before {
  content: '';
  position: absolute;
  top: -80px;
  right: -72px;
  width: 190px;
  height: 190px;
  border: 1px solid rgba(224, 155, 150, 0.2);
  border-radius: 50%;
  pointer-events: none;
}

.finder-progress {
  position: relative;
  z-index: 1;
  margin-bottom: 9px;
  padding-bottom: 11px;
  border-bottom: 0;
}

.finder-progress > div {
  display: flex;
  align-items: center;
  gap: 12px;
}

.finder-progress em {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: #8f707f;
  font-size: 9px;
  font-style: normal;
  font-weight: 750;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.finder-progress em i {
  width: 5px;
  height: 5px;
  animation: finder-live-pulse 1.8s ease-out infinite;
}

.finder-step {
  display: grid;
  min-width: 48px;
  min-height: 28px;
  place-items: center;
  border: 1px solid #f2dedb;
  border-radius: 999px;
  background: #fff;
  box-shadow: 0 5px 14px rgba(111, 75, 79, 0.08);
}

.finder-progress-track {
  position: relative;
  z-index: 1;
  height: 5px;
  margin-bottom: 25px;
  overflow: hidden;
  border-radius: 999px;
  background: #f6e9e7;
}

.finder-progress-track span {
  display: block;
  width: 50%;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, #d67c78, #f2b7b3);
  box-shadow: 0 0 16px rgba(214, 124, 120, 0.42);
  transition: width 0.45s cubic-bezier(0.16, 1, 0.3, 1);
}

.box-finder.is-ready .finder-progress-track span {
  width: 100%;
}

.choice-grid {
  gap: 13px;
}

.choice-grid label {
  min-height: 112px;
  padding: 13px 8px 12px;
  border-radius: 18px;
  background: rgba(255, 250, 249, 0.92) !important;
  box-shadow: 0 8px 22px rgba(85, 51, 56, 0.06);
  transition:
    transform 0.25s cubic-bezier(0.16, 1, 0.3, 1),
    box-shadow 0.25s ease,
    border-color 0.25s ease,
    background 0.25s ease;
}

.choice-grid label::after {
  content: '✓';
  position: absolute;
  top: 8px;
  right: 8px;
  display: grid;
  width: 19px;
  height: 19px;
  place-items: center;
  border-radius: 50%;
  background: #181116;
  color: #fff;
  font-size: 10px;
  font-weight: 900;
  opacity: 0;
  transform: scale(0.65);
  transition: 0.22s ease;
}

.choice-grid label:hover {
  border-color: #e9aaa5 !important;
  background: #fff !important;
  transform: translateY(-4px);
  box-shadow: 0 14px 26px rgba(151, 90, 95, 0.13);
}

.choice-grid label:has(input:checked) {
  border-color: #d67c78 !important;
  background: linear-gradient(145deg, #f6c6c2, #efaaa6) !important;
  box-shadow: 0 13px 28px rgba(186, 107, 101, 0.23) !important;
  transform: translateY(-3px);
}

.choice-grid label:has(input:checked)::after {
  opacity: 1;
  transform: scale(1);
}

.choice-grid label .choice-icon {
  display: grid;
  width: 42px;
  height: 42px;
  place-items: center;
  border: 1px solid rgba(186, 107, 101, 0.2);
  border-radius: 13px;
  background: #fff;
  box-shadow: 0 6px 14px rgba(94, 57, 62, 0.08);
  color: #a5545b;
}

.choice-grid .choice-icon svg {
  width: 27px;
  height: 27px;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.choice-grid label strong {
  font-size: 13px;
}

.choice-grid label small {
  color: #8b777b;
  font-size: 9px;
  font-weight: 650;
}

.finder-selection-status {
  min-height: 20px;
  margin: -9px 0 13px;
  color: #96656a;
  font-size: 10px;
  font-weight: 700;
}

.box-finder.finder-choice-changed .finder-selection-status {
  animation: finder-status-pop 0.35s ease both;
}

.finder-select-wrap .pmc-select-trigger,
.finder-select-wrap select {
  min-height: 52px;
  border-width: 1.5px !important;
  box-shadow: 0 8px 22px rgba(97, 58, 64, 0.07);
}

.btn-finder-submit {
  height: 54px;
  margin-top: 6px;
  border: 1px solid #c86e6a !important;
  background: linear-gradient(105deg, #f2b7b3 0%, #e99d99 100%) !important;
  color: #181116 !important;
  box-shadow: 0 14px 28px rgba(186, 107, 101, 0.28) !important;
}

.btn-finder-submit::before {
  content: '';
  position: absolute;
  inset: 3px;
  border: 1px solid rgba(255, 255, 255, 0.58);
  border-radius: inherit;
  pointer-events: none;
}

.btn-finder-submit {
  position: relative;
  overflow: hidden;
}

.btn-finder-submit:hover {
  background: linear-gradient(105deg, #eca6a2, #e58f8b) !important;
  box-shadow: 0 17px 34px rgba(186, 107, 101, 0.34) !important;
}

.finder-submit-arrow {
  display: inline-grid;
  width: 25px;
  height: 25px;
  place-items: center;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.48);
  transition: transform 0.25s ease;
}

.btn-finder-submit:hover .finder-submit-arrow {
  transform: translateX(4px);
}

.box-finder.is-ready .btn-finder-submit {
  animation: finder-ready 0.55s cubic-bezier(0.16, 1, 0.3, 1);
}

.finder-note {
  display: flex;
  gap: 8px;
  align-items: flex-start;
}

.finder-note::before {
  content: 'i';
  display: grid;
  width: 17px;
  height: 17px;
  flex: 0 0 17px;
  place-items: center;
  border: 1px solid #e7c1bd;
  border-radius: 50%;
  color: #a5545b;
  font-size: 9px;
  font-weight: 850;
}

@keyframes finder-arrive {
  from { opacity: 0; transform: translateY(34px) scale(0.985); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

@keyframes finder-shimmer {
  0%, 100% { transform: translateX(-20%); opacity: 0.35; }
  50% { transform: translateX(180%); opacity: 1; }
}

@keyframes finder-orbit {
  0%, 100% { transform: translate(0, 0) scale(1); }
  50% { transform: translate(-16px, -10px) scale(1.04); }
}

@keyframes wireframe-float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-5px); }
}

@keyframes wireframe-draw {
  to { stroke-dashoffset: 0; }
}

@keyframes wireframe-glow {
  0%, 100% { opacity: 0.55; }
  50% { opacity: 1; }
}

@keyframes finder-live-pulse {
  0% { box-shadow: 0 0 0 0 rgba(214, 124, 120, 0.42); }
  70% { box-shadow: 0 0 0 7px rgba(214, 124, 120, 0); }
  100% { box-shadow: 0 0 0 0 rgba(214, 124, 120, 0); }
}

@keyframes finder-status-pop {
  from { opacity: 0; transform: translateY(5px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes finder-ready {
  0% { transform: scale(1); }
  48% { transform: scale(1.018); }
  100% { transform: scale(1); }
}

@media (max-width: 960px) {
  .find-box-grid {
    width: 100%;
  }

  .dimension-wireframe {
    max-width: 380px;
  }
}

@media (max-width: 560px) {
  .find-box-copy h2 br {
    display: none;
  }

  .finder-proof-row {
    margin-top: 17px;
  }

  .choice-grid {
    gap: 8px;
  }

  .choice-grid label {
    min-height: 98px;
    padding-inline: 5px;
  }

  .choice-grid label small {
    display: none;
  }

  .choice-grid label .choice-icon {
    width: 36px;
    height: 36px;
  }

  .finder-progress > div {
    gap: 7px;
  }

  .finder-progress em {
    font-size: 8px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .find-box-grid,
  .find-box-grid::after,
  .find-box-copy::before,
  .dimension-wireframe svg,
  .dimension-wireframe .wireframe-line,
  .dimension-wireframe line[stroke-dasharray],
  .dimension-wireframe .wireframe-fill--top,
  .finder-progress em i,
  .box-finder.is-ready .btn-finder-submit,
  .box-finder.finder-choice-changed .finder-selection-status {
    animation: none !important;
  }

  .choice-grid label,
  .finder-progress-track span,
  .finder-submit-arrow {
    transition: none !important;
  }
}

/* Unified plus / close mark */
.faq-list summary .faq-icon,
.faq-list summary > span:last-child {
  position: relative;
  width: 36px !important;
  height: 36px !important;
  flex: 0 0 36px;
  display: grid !important;
  place-items: center;
  overflow: hidden;
  border: 1px solid #efcecb !important;
  border-radius: 50%;
  background: #fff !important;
  color: #a5545b !important;
  box-shadow: 0 6px 15px rgba(112, 63, 70, 0.09);
  font-size: 0 !important;
  line-height: 0;
  transform: none !important;
  transition: border-color 0.22s ease, background 0.22s ease, color 0.22s ease, box-shadow 0.22s ease !important;
}

.faq-list summary .faq-icon::before,
.faq-list summary .faq-icon::after,
.faq-list summary > span:last-child::before,
.faq-list summary > span:last-child::after,
.search-close::before,
.search-close::after,
.side-cart-close::before,
.side-cart-close::after,
#btn-cancel-address::before,
#btn-cancel-address::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 14px;
  height: 2px;
  border-radius: 999px;
  background: currentColor;
  transform: translate(-50%, -50%);
  transform-origin: center;
  transition: transform 0.28s cubic-bezier(0.16, 1, 0.3, 1), background 0.2s ease;
}

.faq-list summary .faq-icon::after,
.faq-list summary > span:last-child::after {
  transform: translate(-50%, -50%) rotate(90deg);
}

.faq-list details[open] summary .faq-icon,
.faq-list details[open] summary > span:last-child {
  border-color: #dda19c !important;
  background: #f2b7b3 !important;
  color: #181116 !important;
  box-shadow: 0 7px 17px rgba(186, 107, 101, 0.2);
  transform: none !important;
}

.faq-list details[open] summary .faq-icon::before,
.faq-list details[open] summary > span:last-child::before {
  transform: translate(-50%, -50%) rotate(45deg);
}

.faq-list details[open] summary .faq-icon::after,
.faq-list details[open] summary > span:last-child::after {
  transform: translate(-50%, -50%) rotate(-45deg);
}

.faq-list summary:hover .faq-icon,
.faq-list summary:hover > span:last-child {
  border-color: #dda19c !important;
  box-shadow: 0 8px 18px rgba(186, 107, 101, 0.17);
}

body:not(.admin-body) .quick-add::before,
body:not(.admin-body) .product-meta .btn-small::before {
  content: '' !important;
  background-color: transparent !important;
  background-image:
    linear-gradient(#181116, #181116),
    linear-gradient(#181116, #181116) !important;
  background-position: center, center !important;
  background-repeat: no-repeat !important;
  background-size: 11px 2px, 2px 11px !important;
}

.search-close,
.side-cart-close,
#btn-cancel-address {
  position: relative;
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  padding: 0;
  overflow: hidden;
  border: 1px solid #efcecb !important;
  border-radius: 50%;
  background: #fff !important;
  color: #181116 !important;
  box-shadow: 0 7px 18px rgba(75, 44, 49, 0.1);
  font-size: 0 !important;
  line-height: 0;
  opacity: 1;
  transform: none !important;
  transition: border-color 0.22s ease, background 0.22s ease, color 0.22s ease, box-shadow 0.22s ease !important;
}

.search-close::before,
.side-cart-close::before,
#btn-cancel-address::before {
  transform: translate(-50%, -50%) rotate(45deg);
}

.search-close::after,
.side-cart-close::after,
#btn-cancel-address::after {
  transform: translate(-50%, -50%) rotate(-45deg);
}

.search-close:hover,
.side-cart-close:hover,
#btn-cancel-address:hover {
  border-color: #d98d88 !important;
  background: #f2b7b3 !important;
  box-shadow: 0 9px 22px rgba(186, 107, 101, 0.22);
  transform: none !important;
}

.search-close:focus-visible,
.side-cart-close:focus-visible,
#btn-cancel-address:focus-visible,
.faq-list summary:focus-visible .faq-icon,
.faq-list summary:focus-visible > span:last-child {
  outline: 3px solid rgba(242, 183, 179, 0.42);
  outline-offset: 3px;
}

@media (prefers-reduced-motion: reduce) {
  .faq-list summary .faq-icon::before,
  .faq-list summary .faq-icon::after,
  .faq-list summary > span:last-child::before,
  .faq-list summary > span:last-child::after,
  .search-close::before,
  .search-close::after,
  .side-cart-close::before,
  .side-cart-close::after,
  #btn-cancel-address::before,
  #btn-cancel-address::after {
    transition: none !important;
  }
}

/* Final product-page layout overrides */
.product-purchase h1 {
  max-width: 600px;
  font-size: clamp(32px, 2.7vw, 48px);
  line-height: 1.06;
  letter-spacing: -0.042em;
}

@media (min-width: 901px) {
  .product-gallery {
    position: sticky;
    top: calc(var(--pmc-header-offset, 130px) + 22px);
    align-self: start;
  }

  .product-purchase {
    position: relative;
    top: auto;
  }
}

@media (max-width: 900px) {
  .product-gallery,
  .product-purchase {
    position: static;
  }

  .product-purchase h1 {
    font-size: clamp(30px, 8.8vw, 40px);
  }
}

/* Quick-add hover expand animation lock for CSS-only fallback */
@media (min-width: 821px) {
  body:not(.admin-body):not(.gsap-active) .product-meta .quick-add:hover,
  body:not(.admin-body):not(.gsap-active) .product-meta .quick-add:focus-visible,
  body:not(.admin-body):not(.gsap-active) .product-meta .btn-small:hover,
  body:not(.admin-body):not(.gsap-active) .product-meta .btn-small:focus-visible {
    width: 126px !important;
    min-width: 126px !important;
    max-width: 126px !important;
    padding-right: 14px !important;
  }
}

.faq-list summary .faq-icon,
.faq-list summary > span:last-child,
.search-close,
.side-cart-close,
#btn-cancel-address {
  overflow: visible !important;
}

.faq-list summary .faq-icon::before,
.faq-list summary .faq-icon::after,
.faq-list summary > span:last-child::before,
.faq-list summary > span:last-child::after,
.search-close::before,
.search-close::after,
.side-cart-close::before,
.side-cart-close::after,
#btn-cancel-address::before,
#btn-cancel-address::after {
  width: 12px !important;
  height: 2px !important;
}

@media (max-width: 820px) {
  body:not(.admin-body) .product-meta .quick-add,
  body:not(.admin-body) .product-meta .btn-small {
    width: 44px !important;
    min-width: 44px !important;
    max-width: 44px !important;
    height: 44px !important;
    min-height: 44px !important;
    flex-basis: 44px !important;
  }
}

/* Minimal professional admin workspace */
.admin-body {
  --admin-bg: #f6f6f4;
  --admin-surface: #ffffff;
  --admin-ink: #211d20;
  --admin-muted: #71696d;
  --admin-line: #e7e3e1;
  --admin-accent: #b86864;
  --admin-soft: #fbf2f0;
  background: var(--admin-bg) !important;
  color: var(--admin-ink) !important;
  font-family: "Plus Jakarta Sans", "DM Sans", sans-serif !important;
  font-size: 14px;
}

.admin-layout {
  grid-template-columns: 236px minmax(0, 1fr);
}

.admin-sidebar {
  width: auto;
  padding: 20px 14px 16px;
  background: #171316 !important;
  border-right: 0;
}

.admin-sidebar-header {
  margin-bottom: 18px;
  padding: 0 8px 18px;
  border-color: rgba(255,255,255,.09);
}

.admin-sidebar .admin-brand { gap: 10px; }
.admin-sidebar .admin-brand img { width: 36px; height: 36px; }
.admin-sidebar .admin-brand strong { font-size: 13px; letter-spacing: .055em; }
.admin-sidebar .admin-badge {
  margin-top: 2px;
  padding: 0;
  background: transparent !important;
  color: rgba(255,255,255,.46) !important;
  font-size: 8px;
  letter-spacing: .12em;
}

.admin-nav-section-title {
  padding: 5px 10px 8px;
  color: rgba(255,255,255,.38);
  font-size: 9px;
  letter-spacing: .14em;
}

.admin-nav { gap: 3px; }
.admin-nav a {
  min-height: 44px;
  gap: 11px;
  padding: 9px 11px;
  border: 1px solid transparent;
  border-radius: 10px;
  color: rgba(255,255,255,.64);
  font-size: 12px;
  font-weight: 600;
  transform: none !important;
}
.admin-nav a svg { width: 17px; height: 17px; opacity: .72; }
.admin-nav a:hover { background: rgba(255,255,255,.06); color: #fff; }
.admin-nav a.active {
  background: #fff !important;
  border-color: #fff !important;
  color: #211d20 !important;
  box-shadow: none !important;
}
.admin-nav a.active svg { stroke: #a95f5a !important; }
.nav-pill-badge { padding: 2px 6px; font-size: 8px; }
.nav-pill-badge.highlight, .nav-pill-badge.warning { background: #efb0ab; color: #241b1e; }

.admin-sidebar-footer { gap: 3px; }
.sidebar-action-btn { min-height: 39px; padding: 8px 10px; border-radius: 9px; font-size: 11px; }
.sidebar-action-btn.store-link { background: rgba(255,255,255,.06); }

.admin-main { background: var(--admin-bg) !important; }
.admin-topbar {
  min-height: 76px;
  padding: 14px clamp(20px, 2.7vw, 38px);
  background: rgba(255,255,255,.94) !important;
  border-color: var(--admin-line) !important;
  box-sizing: border-box;
}
.admin-breadcrumb { margin-bottom: 3px; color: #8d8588; font-size: 9px; letter-spacing: .1em; }
.admin-page-heading { color: var(--admin-ink); font-size: 22px; font-weight: 750; letter-spacing: -.035em; }
.admin-topbar-right { gap: 10px; }
.admin-store-preview-btn { min-height: 38px; padding: 8px 14px !important; }
.admin-user-profile {
  min-height: 38px;
  padding: 5px 11px 5px 5px;
  border-color: var(--admin-line);
  border-radius: 11px;
  box-shadow: none;
}
.admin-avatar { width: 29px; height: 29px; background: #211d20; font-size: 11px; }
.admin-user-meta strong { font-size: 11px; }
.admin-user-meta .role-chip { color: #8a777b; font-size: 8px; }

.admin-content-wrap {
  width: 100%;
  max-width: 1600px;
  margin-inline: auto;
  padding: 28px clamp(20px, 2.7vw, 38px) 72px;
}

.admin-body .card,
.admin-card {
  min-width: 0;
  max-width: 100%;
  box-sizing: border-box;
  margin-bottom: 20px;
  padding: 24px;
  background: var(--admin-surface) !important;
  border: 1px solid var(--admin-line) !important;
  border-radius: 15px;
  box-shadow: none !important;
}
.admin-body .card h2,
.admin-body .card h3 {
  color: var(--admin-ink);
  font-size: 17px;
  font-weight: 750;
  letter-spacing: -.025em;
}
.admin-body .card h2 > small,
.admin-body .card h2 span small { color: #948b8e; font-size: 11px; font-weight: 600; }

.admin-grid {
  min-width: 0;
  width: 100%;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 20px;
  align-items: start;
}

.admin-card-heading {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 24px;
  padding-bottom: 20px;
  border-bottom: 1px solid var(--admin-line);
}
.admin-card-heading h2 { margin: 3px 0 5px !important; font-size: 22px !important; }
.admin-card-heading p { max-width: 660px; margin: 0; color: var(--admin-muted); font-size: 12px; line-height: 1.55; }
.admin-card-eyebrow { color: var(--admin-accent); font-size: 9px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; }
.admin-card-actions { display: flex; gap: 8px; }
.admin-count { display: inline-grid; min-width: 24px; height: 24px; place-items: center; margin-left: 5px; border-radius: 999px; background: #f0eeed; color: #5e5659; font-size: 10px; vertical-align: 2px; }

.admin-section-nav {
  position: sticky;
  top: 76px;
  z-index: 12;
  display: flex;
  gap: 4px;
  margin: 0 -24px;
  padding: 10px 24px;
  background: rgba(255,255,255,.96);
  border-bottom: 1px solid var(--admin-line);
  backdrop-filter: blur(12px);
}
.admin-section-nav a { padding: 7px 10px; border-radius: 8px; color: #6e6569; font-size: 10px; font-weight: 700; text-decoration: none; }
.admin-section-nav a:hover { background: var(--admin-soft); color: #8f4f4b; }

.admin-products-page { display: flex; flex-direction: column; gap: 20px; }
.admin-catalog-card { order: -1; }
.admin-product-form { display: grid; gap: 0; }
.admin-form-section { padding: 27px 0; border-bottom: 1px solid var(--admin-line); scroll-margin-top: 140px; }
.admin-form-section:last-of-type { border-bottom: 0; }
.admin-form-section__heading { display: grid; grid-template-columns: 30px minmax(0,1fr); gap: 12px; margin-bottom: 20px; }
.admin-form-section__heading > span { width: 27px; height: 27px; display: grid; place-items: center; border-radius: 8px; background: #f2efed; color: #82777b; font-size: 9px; font-weight: 800; }
.admin-form-section__heading h3 { margin: 0 0 3px !important; font-size: 15px !important; }
.admin-form-section__heading p { margin: 0; color: var(--admin-muted); font-size: 11px; }

.admin-body .form-grid { grid-template-columns: repeat(2, minmax(0,1fr)); gap: 17px 18px; }
.admin-body .field { gap: 7px; }
.admin-body .field label { color: #4b4447; font-size: 10px; font-weight: 750; letter-spacing: .035em; text-transform: uppercase; }
.admin-body .field label small { margin-left: 5px; color: #9a9194; font-size: 9px; font-weight: 600; letter-spacing: 0; text-transform: none; }
.admin-body .field input:not([type="checkbox"]),
.admin-body .field select,
.admin-body .field textarea,
.admin-catalog-toolbar input,
.admin-catalog-toolbar select,
.admin-body .inline-form select,
.admin-body .inline-form input {
  width: 100%;
  min-height: 44px;
  padding: 10px 12px;
  background: #fff !important;
  border: 1px solid #dcd7d5 !important;
  border-radius: 10px;
  color: var(--admin-ink) !important;
  box-shadow: none !important;
  font: inherit;
  font-size: 12px;
  box-sizing: border-box;
}
.admin-body .field textarea { min-height: 112px; resize: vertical; line-height: 1.55; }
.admin-body .field input:focus,
.admin-body .field select:focus,
.admin-body .field textarea:focus,
.admin-catalog-toolbar input:focus,
.admin-catalog-toolbar select:focus {
  outline: 0;
  border-color: #b96d68 !important;
  box-shadow: 0 0 0 3px rgba(185,109,104,.11) !important;
}
.admin-body input[type="file"] {
  border: 1.5px dashed #e29f9a !important;
  background: #fdfaf9 !important;
  border-radius: 12px !important;
  padding: 8px 12px !important;
  font-size: 11.5px !important;
  transition: border-color 0.2s ease, background 0.2s ease !important;
}
.admin-body input[type="file"]:hover {
  border-color: #ba6b65 !important;
  background: #fff8f7 !important;
}
.admin-body input[type="file"]::file-selector-button,
.admin-body input[type="file"]::-webkit-file-upload-button {
  margin-right: 10px;
  padding: 6px 14px;
  border: 1px solid #e59a95;
  border-radius: 999px;
  background: linear-gradient(135deg, #f2b7b3 0%, #e8a5a0 100%);
  color: #181116;
  font-size: 10.5px;
  font-weight: 750;
  cursor: pointer;
  transition: all 0.2s ease;
}
.admin-body input[type="file"]::file-selector-button:hover,
.admin-body input[type="file"]::-webkit-file-upload-button:hover {
  background: #ba6b65;
  color: #ffffff;
  border-color: #ba6b65;
}

.admin-body .btn {
  min-height: 38px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 8px 14px;
  border-radius: 9px;
  box-shadow: none !important;
  font-size: 11px;
  font-weight: 750;
  text-decoration: none;
  transform: none !important;
}
.admin-body .btn-primary { background: #211d20 !important; border-color: #211d20 !important; color: #fff !important; }
.admin-body .btn-primary:hover { background: #3a3236 !important; }
.admin-body .btn-secondary { background: #fff !important; border-color: #d8d2d0 !important; color: #3e373a !important; }
.admin-body .btn-danger { background: #fff4f3 !important; border-color: #f0cfcc !important; color: #a54c48 !important; }
.admin-body .btn-sm { min-height: 34px; padding: 7px 10px !important; font-size: 10px !important; }

.pricing-tier-admin { margin: 2px 0 0; padding: 16px; border-color: var(--admin-line); border-radius: 11px; background: #faf9f8; }
.pricing-tier-admin__heading { display: flex; justify-content: space-between; align-items: center; gap: 16px; }
.pricing-tier-admin__heading label { font-size: 11px; }
.pricing-tier-admin__heading label span { color: #8d7a7d; font-size: 10px; font-weight: 600; }
.pricing-tier-admin__heading p { margin: 4px 0 0; color: var(--admin-muted); font-size: 10px; }
#pricing-tier-rows { display: grid; gap: 10px; margin-top: 14px; }
.pricing-tier-admin__row { display: grid; grid-template-columns: 130px 130px minmax(170px,1fr) 34px; gap: 10px; align-items: end; padding: 10px; border: 1px solid var(--admin-line); border-radius: 10px; background: #fff; }
.pricing-tier-admin__row label { display: grid; gap: 5px; }
.pricing-tier-admin__row label span { color: #6f6265; font-size: 9px; font-weight: 750; letter-spacing: .06em; text-transform: uppercase; }
.pricing-tier-remove { width: 34px; height: 34px; align-self: center; border: 1px solid #ead6d3; border-radius: 50%; background: #fff; color: #a5545b; cursor: pointer; font-size: 20px; }

.product-spec-admin { margin: 2px 0 0; padding: 16px; border-color: var(--admin-line); border-radius: 11px; background: #faf9f8; }
.product-spec-admin__heading { display: flex; justify-content: space-between; align-items: center; gap: 16px; }
.product-spec-admin__heading label { font-size: 11px; }
.product-spec-admin__heading p { margin: 4px 0 0; color: var(--admin-muted); font-size: 10px; }
#product-spec-rows { display: grid; gap: 10px; margin-top: 14px; }
.product-spec-admin__row { display: grid; grid-template-columns: minmax(150px,.7fr) minmax(240px,1.3fr) 34px; gap: 10px; align-items: end; padding: 10px; border: 1px solid var(--admin-line); border-radius: 10px; background: #fff; }
.product-spec-admin__row label { display: grid; gap: 5px; }
.product-spec-admin__row label span { color: #6f6265; font-size: 9px; font-weight: 750; letter-spacing: .06em; text-transform: uppercase; }
.product-spec-remove { width: 34px; height: 34px; align-self: center; border: 1px solid #ead6d3; border-radius: 50%; background: #fff; color: #a5545b; cursor: pointer; font-size: 20px; }
.product-spec-admin__empty { margin: 14px 0 0; padding: 12px; border: 1px dashed #d8d0ce; border-radius: 9px; color: var(--admin-muted); background: #fff; font-size: 10px; text-align: center; }
.field-help { display: block; margin-top: 6px; color: var(--admin-muted); font-size: 9px; }

.admin-feature-toggle { display: flex; align-items: flex-start; gap: 11px; padding: 14px; border: 1px solid var(--admin-line); border-radius: 11px; background: #faf9f8; cursor: pointer; }
.admin-feature-toggle input { width: 17px; height: 17px; margin-top: 2px; accent-color: #a95f5a; }
.admin-feature-toggle span { display: grid; gap: 3px; }
.admin-feature-toggle strong { font-size: 11px; }
.admin-feature-toggle small { color: var(--admin-muted); font-size: 10px; }

.admin-media-layout { display: grid; grid-template-columns: 180px minmax(0,1fr); gap: 20px; align-items: start; }
.admin-main-image-preview { width: 180px; aspect-ratio: 1; display: grid; place-items: center; overflow: hidden; border: 1px dashed #d7cfcd; border-radius: 12px; background: #faf8f7; color: #9b9194; font-size: 10px; }
.admin-main-image-preview img { width: 100%; height: 100%; object-fit: contain; }
.admin-media-fields { grid-template-columns: 1fr !important; }
.admin-gallery-field { margin-top: 18px; }
.admin-gallery-preview { min-height: 78px; align-items: center; }
.gallery-item { width: 74px; height: 74px; }
.admin-gallery-preview { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 10px; }
.gallery-item { position: relative; }
.gallery-item img { width: 100%; height: 100%; object-fit: cover; border: 1px solid var(--admin-line); border-radius: 10px; }
.remove-gallery-item { position: absolute; top: -6px; right: -6px; width: 22px; height: 22px; display: grid; place-items: center; border: 0; border-radius: 50%; background: #a84f4b; color: #fff; cursor: pointer; font-size: 14px; line-height: 1; box-shadow: 0 2px 6px rgba(0,0,0,.15); }
.admin-empty-inline { color: #999093; font-size: 10px; }

.admin-product-name { display: block; color: var(--admin-ink); font-size: 12px; }
.admin-product-slug { color: var(--admin-muted); font-size: 9px; }
.admin-product-badges { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 4px; }
.admin-featured-badge { border: 1px solid #211d20; background: #211d20; color: #fff; }
.admin-tier-badge { border: 1px solid #efcecb; background: #fff1ef; color: #9c514d; }
.admin-product-price { color: var(--admin-accent); font-size: 13px; }
.admin-product-discount { color: var(--admin-muted); font-size: 9px; }
.admin-product-discount s { opacity: .7; }
.admin-product-discount span { margin-left: 2px; color: #287854; font-weight: 700; }

.admin-form-actions {
  position: sticky;
  bottom: 14px;
  z-index: 15;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  margin: 20px -8px -8px;
  padding: 12px;
  border: 1px solid var(--admin-line);
  border-radius: 12px;
  background: rgba(255,255,255,.96);
  box-shadow: 0 10px 28px rgba(39,31,35,.09);
  backdrop-filter: blur(14px);
}
.admin-form-actions > span { color: var(--admin-muted); font-size: 10px; }
.admin-form-actions > div { display: flex; gap: 8px; }

.admin-catalog-heading { border-bottom: 0; padding-bottom: 16px; }
.admin-catalog-toolbar { display: grid; grid-template-columns: minmax(240px,1fr) 190px; gap: 10px; margin-bottom: 14px; }
.admin-search-field { position: relative; }
.admin-search-field input { padding-left: 38px; }
.admin-search-field svg { position: absolute; top: 50%; left: 12px; color: #92898c; transform: translateY(-50%); pointer-events: none; }
.admin-catalog-toolbar select { appearance: auto; }

.admin-body .table-responsive { border: 1px solid var(--admin-line); border-radius: 12px; background: #fff; }
.admin-body .table-responsive { width: 100%; max-width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; box-sizing: border-box; }
.admin-body .data-table { border-radius: 0; box-shadow: none; }
.admin-body .data-table th {
  padding: 11px 14px;
  background: #f5f4f2;
  border-color: var(--admin-line);
  color: #766d70;
  font-size: 9px;
  letter-spacing: .08em;
  text-align: left;
}
.admin-body .data-table td { padding: 13px 14px; border-color: #efedeb; color: #4b4447; font-size: 11px; }
.admin-body .data-table tr:hover { background: #fcfbfa; }
.admin-body .product-table-cell { gap: 11px; min-width: 260px; }
.admin-body .product-table-thumb { width: 50px; height: 50px; border-radius: 9px; object-fit: contain; background: #f7f5f4; }
.admin-body .badge { padding: 4px 7px; border-radius: 999px; font-size: 8px; font-weight: 750; box-shadow: none; }
.admin-row-actions { display: flex; align-items: center; justify-content: flex-end; gap: 6px; white-space: nowrap; }
.admin-row-actions form { margin: 0; }

.form-error, .form-success { padding: 11px 14px; border: 1px solid; border-radius: 10px; font-size: 11px; }
.form-success { background: #f1faf5; border-color: #cce8d7; color: #216942; }
.form-error { background: #fff4f3; border-color: #f0cfcc; color: #9e403c; }
.admin-thumb-placeholder,
.admin-empty-mark {
  display: inline-grid;
  place-items: center;
  border: 1px dashed #d9d3d1;
  background: #f8f7f6;
}
.admin-thumb-placeholder { width: 46px; height: 46px; flex: 0 0 46px; border-radius: 9px; }
.admin-thumb-placeholder::before,
.admin-empty-mark::before { content: ""; width: 13px; height: 13px; border: 1.5px solid #a49a9d; border-radius: 3px; transform: rotate(45deg); }
.admin-empty-mark { width: 42px; height: 42px; margin-bottom: 8px; border-radius: 12px; }

.stats-grid-v2 { grid-template-columns: repeat(4, minmax(0,1fr)); gap: 12px; margin-bottom: 20px; }
.stat-card-v2 { gap: 8px; padding: 18px; border: 1px solid var(--admin-line) !important; border-radius: 13px; box-shadow: none !important; transform: none !important; }
.stat-card-v2.primary { background: #211d20 !important; }
.stat-card-v2 .stat-title { font-size: 9px; }
.stat-card-v2 .stat-value { font-size: 24px; }
.stat-card-v2 .stat-icon { width: 32px; height: 32px; border-radius: 9px; font-size: 13px; }
.sales-action-bar { margin-bottom: 20px; padding: 16px 18px; border-color: var(--admin-line); border-radius: 13px; background: #fff; }
.sales-action-icon { width: 34px; height: 34px; border-radius: 9px; background: #211d20; font-size: 14px; }

.admin-mobile-header { background: #171316; }

@media (max-width: 1180px) {
  .admin-grid { grid-template-columns: 1fr; }
  .stats-grid-v2 { grid-template-columns: repeat(2, minmax(0,1fr)); }
}

@media (max-width: 1024px) {
  .admin-layout { grid-template-columns: 1fr; }
  .admin-sidebar { width: 236px; }
  .admin-topbar { position: static; }
  .admin-section-nav { top: 64px; }
  .admin-user-profile { display: none; }
}

@media (max-width: 700px) {
  .admin-content-wrap { padding: 18px 12px 60px; }
  .admin-topbar { padding: 12px 14px; }
  .admin-topbar-right { display: none; }
  .admin-body .card { padding: 17px; border-radius: 12px; }
  .admin-body .form-grid { grid-template-columns: 1fr; gap: 14px; }
  .admin-body .field-full { grid-column: 1; }
  .admin-card-heading { flex-direction: column; gap: 12px; }
  .admin-section-nav { margin-inline: -17px; padding-inline: 17px; overflow-x: auto; white-space: nowrap; }
  .admin-media-layout { grid-template-columns: 1fr; }
  .admin-main-image-preview { width: 100%; max-width: 220px; }
  .admin-catalog-toolbar { grid-template-columns: 1fr; }
  .admin-body .data-table { min-width: 760px; }
  .admin-catalog-card .table-responsive { overflow: visible; border: 0; background: transparent; }
  .admin-catalog-card .data-table { min-width: 0; display: block; }
  .admin-catalog-card .data-table thead { display: none; }
  .admin-catalog-card .data-table tbody { display: grid; gap: 10px; }
  .admin-catalog-card .data-table tr.product-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px 16px;
    padding: 14px;
    border: 1px solid var(--admin-line);
    border-radius: 11px;
    background: #fff;
  }
  .admin-catalog-card .data-table td {
    display: grid;
    gap: 5px;
    padding: 0;
    border: 0;
  }
  .admin-catalog-card .data-table td:first-child,
  .admin-catalog-card .data-table td:last-child { grid-column: 1 / -1; }
  .admin-catalog-card .data-table td:not(:first-child)::before {
    content: attr(data-label);
    color: #948b8e;
    font-size: 8px;
    font-weight: 800;
    letter-spacing: .08em;
    text-transform: uppercase;
  }
  .admin-catalog-card .product-table-cell { min-width: 0; }
  .admin-catalog-card .product-table-cell > div { min-width: 0; }
  .admin-catalog-card .product-table-cell strong,
  .admin-catalog-card .product-table-cell span { overflow-wrap: anywhere; }
  .admin-catalog-card .admin-row-actions { justify-content: stretch; }
  .admin-catalog-card .admin-row-actions > a,
  .admin-catalog-card .admin-row-actions > form { flex: 1; }
  .admin-catalog-card .admin-row-actions .btn { width: 100%; }
  .admin-form-actions { align-items: stretch; flex-direction: column; bottom: 8px; }
  .admin-form-actions > div { display: grid; grid-template-columns: 1fr 1fr; }
  .pricing-tier-admin__heading { align-items: stretch; flex-direction: column; }
  .pricing-tier-admin__row { grid-template-columns: 1fr 1fr 34px; }
  .pricing-tier-admin__label { grid-column: 1 / 3; }
  .pricing-tier-remove { grid-column: 3; grid-row: 1; }
  .product-spec-admin__heading { align-items: stretch; flex-direction: column; }
  .product-spec-admin__row { grid-template-columns: 1fr 34px; }
  .product-spec-admin__row label { grid-column: 1; }
  .product-spec-remove { grid-column: 2; grid-row: 1; }
  .stats-grid-v2 { grid-template-columns: 1fr 1fr; gap: 8px; }
  .stat-card-v2 { padding: 14px; }
  .stat-card-v2 .stat-value { font-size: 20px; }
}

/* Admin sign in */
.admin-login-body {
  min-height: 100vh;
  margin: 0;
  padding: 24px;
  display: grid;
  place-items: center;
  background: #f4f2f0;
  color: #211d20;
  font-family: "Plus Jakarta Sans", "DM Sans", sans-serif;
}
.admin-login-shell {
  width: min(940px, 100%);
  min-height: 570px;
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(360px, .95fr);
  overflow: hidden;
  border: 1px solid #ded9d7;
  border-radius: 22px;
  background: #fff;
  box-shadow: 0 24px 70px rgba(35, 27, 31, .1);
}
.admin-login-intro {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 42px;
  background: #171316;
  color: #fff;
}
.admin-login-brand { display: flex; align-items: center; gap: 12px; color: #fff; text-decoration: none; }
.admin-login-brand img { width: 42px; height: 42px; object-fit: contain; }
.admin-login-brand span { display: grid; gap: 2px; }
.admin-login-brand strong { font-size: 13px; letter-spacing: .06em; text-transform: uppercase; }
.admin-login-brand small { color: rgba(255,255,255,.48); font-size: 9px; letter-spacing: .1em; text-transform: uppercase; }
.admin-login-eyebrow { color: #eaa9a4; font-size: 9px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; }
.admin-login-intro h1 { max-width: 420px; margin: 15px 0 14px; font-size: clamp(38px, 5vw, 58px); line-height: .98; letter-spacing: -.06em; }
.admin-login-intro p { max-width: 390px; margin: 0; color: rgba(255,255,255,.62); font-size: 13px; line-height: 1.7; }
.admin-login-store-link { color: rgba(255,255,255,.72); font-size: 11px; font-weight: 700; text-decoration: none; }
.admin-login-store-link:hover { color: #fff; }
.admin-login-card {
  width: auto;
  align-self: center;
  margin: 0;
  padding: 54px 48px;
  border: 0;
  border-radius: 0;
  box-shadow: none;
}
.admin-login-heading { margin-bottom: 28px; }
.admin-login-heading > span { color: #a45e59; font-size: 9px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; }
.admin-login-heading h2 { margin: 8px 0 6px; font-size: 30px; letter-spacing: -.045em; }
.admin-login-heading p { margin: 0; color: #776f72; font-size: 12px; }
.admin-login-card .form-grid { grid-template-columns: 1fr; gap: 18px; }
.admin-login-card .field { display: grid; gap: 7px; }
.admin-login-card .field label { color: #4c4548; font-size: 10px; font-weight: 750; letter-spacing: .04em; text-transform: uppercase; }
.admin-login-card .field input {
  min-height: 48px;
  padding: 11px 13px;
  border: 1px solid #dcd7d5;
  border-radius: 10px;
  background: #fff;
  color: #211d20;
  font: inherit;
  font-size: 13px;
}
.admin-login-card .field input:focus { outline: 0; border-color: #ad625e; box-shadow: 0 0 0 3px rgba(173,98,94,.1); }
.admin-login-card .btn { min-height: 48px; border-radius: 10px; background: #211d20 !important; border-color: #211d20 !important; color: #fff !important; box-shadow: none; font-size: 12px; }
.admin-login-help { margin: 18px 0 0; color: #9a9295; font-size: 10px; text-align: center; }
@media (max-width: 720px) {
  .admin-login-body { padding: 12px; }
  .admin-login-shell { min-height: auto; grid-template-columns: 1fr; border-radius: 16px; }
  .admin-login-intro { min-height: 210px; padding: 26px; }
  .admin-login-intro h1 { margin: 24px 0 8px; font-size: 35px; }
  .admin-login-intro p { font-size: 11px; }
  .admin-login-store-link { display: none; }
  .admin-login-card { padding: 32px 24px; }
}

/* Favourites and recently viewed */
body:not(.admin-body) .product-card {
  position: relative;
}

.product-favourite-btn {
  position: absolute;
  top: 14px;
  right: 14px;
  z-index: 8;
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  padding: 0;
  border: 1px solid rgba(255,255,255,.75);
  border-radius: 50%;
  background: rgba(255,255,255,.9);
  color: #352b2f;
  box-shadow: 0 7px 22px rgba(42,31,35,.13);
  backdrop-filter: blur(10px);
  cursor: pointer;
  transition: color .2s ease, background .2s ease, border-color .2s ease, transform .2s ease;
}
.product-favourite-btn svg { width: 20px; height: 20px; pointer-events: none; }
.product-favourite-btn:hover,
.product-favourite-btn:focus-visible { color: #a64f4b; border-color: #f0aaa5; transform: translateY(-2px); outline: none; }
.product-favourite-btn.is-active { background: #eda9a5; border-color: #eda9a5; color: #21181c; }
.product-favourite-btn.is-active svg { fill: currentColor; }

.product-favourite-detail {
  width: fit-content;
  min-height: 42px;
  display: inline-flex;
  align-items: center;
  gap: 9px;
  margin: 2px 0 22px;
  padding: 9px 14px;
  border: 1px solid #e5d9d7;
  border-radius: 999px;
  background: #fffafa;
  color: #5c4e53;
  font: inherit;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  transition: background .2s ease, border-color .2s ease, color .2s ease;
}
.product-favourite-detail svg { width: 18px; height: 18px; }
.product-favourite-detail:hover,
.product-favourite-detail:focus-visible { border-color: #d78a85; color: #914a46; outline: none; }
.product-favourite-detail.is-active { border-color: #eaa09b; background: #f8c2be; color: #24191d; }
.product-favourite-detail.is-active svg { fill: currentColor; }

.favourite-header-link { position: relative; color: inherit; }
.favourite-header-link svg { width: 22px; height: 22px; }
.favourite-count {
  position: absolute;
  top: -5px;
  right: -7px;
  min-width: 18px;
  height: 18px;
  display: grid;
  place-items: center;
  padding: 0 4px;
  border: 2px solid #fff;
  border-radius: 999px;
  background: #eda9a5;
  color: #281d21;
  font-size: 9px;
  font-weight: 800;
  line-height: 1;
}
body[data-static-page="favourites"] .favourite-header-link { background: #f7d4d1; color: #8e4945; }

.saved-page-hero {
  position: relative;
  overflow: hidden;
  padding: clamp(42px, 6vw, 84px) 0;
  border-bottom: 1px solid #eadbd8;
  background: linear-gradient(120deg, #fff 0%, #fff8f6 52%, #f8d5d1 100%);
}
.saved-page-hero::after {
  content: "";
  position: absolute;
  right: -10vw;
  bottom: -24vw;
  width: 48vw;
  aspect-ratio: 1;
  border: 1px solid rgba(176,94,88,.14);
  border-radius: 50%;
  box-shadow: 0 0 0 70px rgba(255,255,255,.22), 0 0 0 140px rgba(255,255,255,.16);
  pointer-events: none;
}
.saved-page-hero .breadcrumbs { display: flex; align-items: center; gap: 10px; margin-bottom: clamp(30px, 4vw, 56px); }
.saved-page-hero__grid { position: relative; z-index: 1; display: grid; grid-template-columns: minmax(0,1fr) 240px; gap: 48px; align-items: end; }
.saved-page-hero h1 { max-width: 850px; margin: 13px 0 20px; font-size: clamp(44px, 6.5vw, 90px); line-height: .95; letter-spacing: -.065em; }
.saved-page-hero p { max-width: 700px; margin: 0; color: #706368; font-size: clamp(15px, 1.4vw, 19px); line-height: 1.65; }
.saved-page-hero__mark {
  aspect-ratio: 1;
  display: grid;
  place-items: center;
  align-content: center;
  gap: 15px;
  border: 1px solid rgba(173,91,85,.3);
  border-radius: 50%;
  background: rgba(255,255,255,.56);
  color: #aa5c57;
  backdrop-filter: blur(10px);
}
.saved-page-hero__mark > span { font-size: 58px; font-weight: 300; line-height: 1; }
.saved-page-hero__mark svg { width: 68px; height: 68px; }
.saved-page-hero__mark small { color: #76666b; font-size: 10px; font-weight: 750; letter-spacing: .1em; text-transform: uppercase; }

.saved-products-shell { min-height: 440px; }
.saved-products-toolbar { display: flex; align-items: end; justify-content: space-between; gap: 24px; margin-bottom: 30px; padding-bottom: 22px; border-bottom: 1px solid #eadfdd; }
.saved-products-toolbar h2 { margin: 6px 0 0; font-size: clamp(28px, 3vw, 42px); letter-spacing: -.045em; }
.saved-count { display: inline-grid; min-width: 31px; height: 31px; place-items: center; margin-left: 6px; border-radius: 999px; background: #f2c0bc; color: #5d3938; font-size: 12px; vertical-align: 6px; }
.saved-products-toolbar__actions { display: flex; gap: 10px; align-items: center; }
.saved-products-toolbar button:disabled,
.btn-clear-history:disabled {
  opacity: .45;
  cursor: not-allowed;
  pointer-events: none;
  background: #faf7f6 !important;
  border-color: #ebdcd9 !important;
  color: #a89895 !important;
  box-shadow: none !important;
  transform: none !important;
}

.btn-clear-history,
.saved-products-toolbar button[data-clear-recent],
.saved-products-toolbar button[data-clear-favourites],
.section-head .link-button {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 9px 20px;
  border-radius: 999px;
  border: 1.5px solid #dcc8c4;
  background: #ffffff;
  color: #3b2825;
  font-family: var(--font-body, "Plus Jakarta Sans", sans-serif);
  font-size: 13px;
  font-weight: 650;
  letter-spacing: -0.01em;
  text-decoration: none;
  cursor: pointer;
  transition: all 0.22s cubic-bezier(0.16, 1, 0.3, 1);
  box-shadow: 0 2px 6px rgba(0,0,0,0.02);
  white-space: nowrap;
}
.btn-clear-history svg,
.saved-products-toolbar button[data-clear-recent] svg,
.saved-products-toolbar button[data-clear-favourites] svg {
  flex-shrink: 0;
  transition: transform 0.2s ease;
}
.btn-clear-history:hover:not(:disabled),
.saved-products-toolbar button[data-clear-recent]:hover:not(:disabled),
.saved-products-toolbar button[data-clear-favourites]:hover:not(:disabled),
.section-head .link-button:hover:not(:disabled) {
  border-color: var(--pmc-pink-dark, #ba6b65);
  background: #fdf3f2;
  color: var(--pmc-pink-dark, #ba6b65);
  transform: translateY(-1px);
  box-shadow: 0 6px 16px rgba(186, 107, 101, 0.14);
}
.btn-clear-history:hover:not(:disabled) svg {
  transform: rotate(-8deg) scale(1.1);
}

.saved-products-grid:has(.saved-empty-state),
.saved-products-grid:has(.empty-state),
.product-grid:has(.saved-empty-state),
.product-grid:has(.empty-state) {
  display: block !important;
}
.saved-products-grid .saved-empty-state,
.saved-products-grid .empty-state,
.product-grid .saved-empty-state,
.product-grid .empty-state,
.catalog-grid .saved-empty-state,
.catalog-grid .empty-state {
  grid-column: 1 / -1 !important;
  width: 100% !important;
  box-sizing: border-box !important;
}

.saved-product-card .saved-card-note { display: block; margin-top: 12px; color: #9a7777; font-size: 9px; font-weight: 750; letter-spacing: .1em; text-transform: uppercase; }

.saved-empty-state {
  min-height: 380px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: 10px;
  padding: clamp(44px, 6vw, 68px) clamp(20px, 4vw, 40px);
  border: 1.5px dashed #dfccc8;
  border-radius: 26px;
  background: linear-gradient(155deg, #ffffff 0%, #fffbfb 50%, #fef3f2 100%);
  box-shadow: 0 16px 44px rgba(186, 107, 101, 0.08);
  box-sizing: border-box;
  width: 100%;
  margin: 10px 0 20px;
}
.saved-empty-state__icon {
  width: 76px;
  height: 76px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 6px;
  border-radius: 50%;
  background: #fae8e6;
  color: var(--pmc-pink-dark, #ba6b65);
  box-shadow: inset 0 0 0 1px rgba(186, 107, 101, 0.2), 0 8px 24px rgba(186, 107, 101, 0.12);
  transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}
.saved-empty-state:hover .saved-empty-state__icon {
  transform: scale(1.06) rotate(-4deg);
}
.saved-empty-state__icon svg { width: 34px; height: 34px; }
.saved-empty-state__kicker {
  display: inline-block;
  color: var(--pmc-pink-dark, #ba6b65);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  margin-bottom: 2px;
}
.saved-empty-state h2 {
  margin: 4px 0 8px;
  font-size: clamp(23px, 3vw, 34px);
  font-weight: 750;
  color: var(--pmc-cocoa, #231b19);
  letter-spacing: -0.035em;
  line-height: 1.25;
}
.saved-empty-state p {
  max-width: 520px;
  margin: 0 0 22px;
  color: #6d5e61;
  font-size: 15px;
  line-height: 1.6;
}
.saved-empty-state__actions {
  display: flex;
  gap: 12px;
  align-items: center;
  justify-content: center;
}
.saved-empty-state .btn-primary {
  border-radius: 999px;
  padding: 13px 30px;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: -0.01em;
  box-shadow: 0 8px 24px rgba(186, 107, 101, 0.28);
  transition: all 0.25s ease;
}
.saved-empty-state .btn-primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 30px rgba(186, 107, 101, 0.38);
}
.saved-empty-state__chips {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin-top: 26px;
  padding-top: 22px;
  border-top: 1px solid #f0e1de;
  width: 100%;
  max-width: 620px;
}
.saved-empty-state__chips-label {
  font-size: 11.5px;
  font-weight: 750;
  color: #8c797d;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  margin-right: 4px;
}
.saved-chip {
  display: inline-flex;
  align-items: center;
  background: #ffffff;
  border: 1px solid #e7d5d2;
  color: #443236;
  border-radius: 999px;
  padding: 6px 15px;
  font-size: 12.5px;
  font-weight: 600;
  text-decoration: none;
  transition: all 0.2s ease;
  box-shadow: 0 2px 5px rgba(0,0,0,0.02);
}
.saved-chip:hover {
  border-color: var(--pmc-pink-dark, #ba6b65);
  background: #fdf5f4;
  color: var(--pmc-pink-dark, #ba6b65);
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(186, 107, 101, 0.12);
}
.saved-page-prompt { display: flex; align-items: center; justify-content: space-between; gap: 40px; margin-top: clamp(55px, 8vw, 100px); padding: clamp(26px, 4vw, 48px); border-radius: 24px; background: #181316; color: #fff; }
.saved-page-prompt h2 { margin: 8px 0 8px; color: #fff; font-size: clamp(26px, 3vw, 42px); letter-spacing: -.045em; }
.saved-page-prompt p { max-width: 660px; margin: 0; color: rgba(255,255,255,.62); line-height: 1.6; }
.saved-page-prompt .kicker { color: #eca9a4; }
.saved-page-prompt .btn-primary { flex: 0 0 auto; background: #eda9a5; border-color: #eda9a5; color: #21181c; }

.saved-toast {
  position: fixed;
  left: 50%;
  bottom: 28px;
  z-index: 10000;
  padding: 12px 18px;
  border: 1px solid rgba(255,255,255,.14);
  border-radius: 999px;
  background: #21191d;
  color: #fff;
  box-shadow: 0 14px 42px rgba(29,20,24,.24);
  font-size: 12px;
  font-weight: 700;
  opacity: 0;
  pointer-events: none;
  transform: translate(-50%, 16px);
  transition: opacity .2s ease, transform .2s ease;
}
.saved-toast.is-visible { opacity: 1; transform: translate(-50%, 0); }

@media (max-width: 760px) {
  .product-favourite-btn { top: 10px; right: 10px; width: 38px; height: 38px; }
  .product-favourite-btn svg { width: 18px; height: 18px; }
  .saved-page-hero { padding: 28px 0 44px; }
  .saved-page-hero .breadcrumbs { margin-bottom: 30px; }
  .saved-page-hero__grid { grid-template-columns: 1fr; gap: 28px; }
  .saved-page-hero h1 { font-size: clamp(42px, 13vw, 62px); }
  .saved-page-hero__mark { width: 132px; justify-self: end; }
  .saved-page-hero__mark > span { font-size: 42px; }
  .saved-page-hero__mark svg { width: 42px; height: 42px; }
  .saved-page-hero__mark small { font-size: 7px; }
  .saved-products-toolbar { align-items: stretch; flex-direction: column; }
  .saved-products-toolbar__actions { display: grid; grid-template-columns: 1fr 1fr; }
  .saved-products-toolbar__actions .btn { padding-inline: 10px; font-size: 10px; }
  .saved-page-prompt { align-items: stretch; flex-direction: column; }
  .saved-page-prompt .btn { width: 100%; }
  .saved-empty-state { min-height: 310px; border-radius: 18px; }
  .product-favourite-detail { margin-bottom: 17px; }
  .saved-toast { bottom: 84px; }
}

/* Premium storefront polish on native browser scrolling */

body:not(.admin-body) {
  --pmc-ease-premium: cubic-bezier(.22, 1, .36, 1);
}

body:not(.admin-body) ::selection {
  background: rgba(242, 183, 179, .72);
  color: #181116;
}

.pmc-scroll-progress {
  position: fixed;
  inset: 0 0 auto;
  z-index: 10050;
  height: 3px;
  overflow: hidden;
  pointer-events: none;
}

.pmc-scroll-progress span {
  display: block;
  width: 100%;
  height: 100%;
  border-radius: 0 999px 999px 0;
  background: linear-gradient(90deg, #ba6b65 0%, #f2b7b3 72%, #f8d8d5 100%);
  box-shadow: 0 0 14px rgba(186, 107, 101, .48);
  transform: scaleX(var(--pmc-scroll-progress, 0));
  transform-origin: left center;
  will-change: transform;
}

body:not(.admin-body) .site-header,
body:not(.admin-body) .simple-site-header {
  transition: box-shadow .4s var(--pmc-ease-premium),
              border-color .4s var(--pmc-ease-premium),
              background-color .4s var(--pmc-ease-premium);
}

body:not(.admin-body) .site-header.is-scrolled,
body:not(.admin-body) .simple-site-header.is-scrolled {
  border-bottom-color: rgba(215, 157, 152, .42) !important;
  background: rgba(255, 255, 255, .94) !important;
  box-shadow: 0 14px 44px rgba(54, 35, 43, .095) !important;
  backdrop-filter: blur(20px) saturate(145%);
  -webkit-backdrop-filter: blur(20px) saturate(145%);
}

body:not(.admin-body) .header-main,
body:not(.admin-body) .brand-v2 img,
body:not(.admin-body) .category-nav-inner {
  transition: min-height .4s var(--pmc-ease-premium),
              width .4s var(--pmc-ease-premium),
              height .4s var(--pmc-ease-premium),
              opacity .4s ease;
}

@media (min-width: 901px) {
  body.is-premium-scrolled:not(.admin-body) .header-main { min-height: 74px; }
  body.is-premium-scrolled:not(.admin-body) .brand-v2 img { width: 46px; height: 46px; }
  body.is-premium-scrolled:not(.admin-body) .category-nav-inner { min-height: 44px; }
}

.pmc-premium-reveal {
  opacity: 0;
  transform: translate3d(0, 22px, 0);
  transition: opacity .72s var(--pmc-ease-premium) var(--pmc-reveal-delay, 0ms),
              transform .82s var(--pmc-ease-premium) var(--pmc-reveal-delay, 0ms);
  will-change: opacity, transform;
}

.pmc-premium-reveal.is-premium-visible {
  opacity: 1;
  transform: translate3d(0, 0, 0);
  will-change: auto;
}

@media (hover: hover) and (pointer: fine) {
  body:not(.admin-body) :is(.btn, .quick-add, .product-favourite-btn, .product-favourite-detail, .icon-btn, .cart-link) {
    transition-timing-function: var(--pmc-ease-premium) !important;
  }

  body:not(.admin-body) :is(.product-card, .category-tile, .guide-card, .content-card) {
    transition: transform .46s var(--pmc-ease-premium),
                box-shadow .46s var(--pmc-ease-premium),
                border-color .32s ease;
  }

  body:not(.admin-body) :is(.product-card, .category-tile, .guide-card, .content-card):hover {
    transform: translateY(-5px);
    box-shadow: 0 22px 56px rgba(51, 31, 39, .1);
  }
}

@media (prefers-reduced-motion: reduce) {
  .pmc-scroll-progress { display: none; }
  .pmc-premium-reveal,
  .pmc-premium-reveal.is-premium-visible {
    opacity: 1;
    transform: none;
  }
}

/* Admin 3.0 cascade lock — keep the workspace above legacy theme layers. */
.hero-slide-bg--one { background-image:url('../assets/bannerimgs/banner1.png'); }
.hero-slide-bg--two { background-image:url('../assets/bannerimgs/banner2.png'); }
.hero-slide-bg--three { background-image:url('../assets/bannerimgs/banner3.png'); }
.content-section--blush { background:var(--pmc-blush); }
.admin-body { --admin-bg:#f4f6fa; --admin-surface:#fff; --admin-ink:#172033; --admin-muted:#667085; --admin-line:#e7eaf0; --admin-accent:#f2b7b3; --admin-accent-dark:#ba6b65; --admin-soft:#fdf3f2; background:var(--admin-bg)!important; color:var(--admin-ink)!important; }
.admin-layout { grid-template-columns:264px minmax(0,1fr); }
.admin-sidebar { width:auto; padding:20px 14px 16px; background:#101828!important; border-right:0; }
.admin-sidebar-header { margin-bottom:12px; padding:0 10px 19px; border-color:rgba(255,255,255,.08); }
.admin-sidebar .admin-brand img { width:38px; height:38px; padding:3px; border-radius:11px; background:#fff; }
.admin-sidebar .admin-badge { color:#98a2b3!important; }
.admin-nav-section-title { padding:15px 11px 7px; color:#667085; }
.admin-nav a { min-height:41px; padding:8px 11px; color:#98a2b3; border-radius:9px; }
.admin-nav a.active { background:linear-gradient(135deg,#f2b7b3,#e59f9a)!important; border-color:rgba(255,255,255,.12)!important; color:#101828!important; font-weight:750!important; box-shadow:0 8px 22px rgba(242,183,179,.28)!important; }
.admin-nav a.active svg { stroke:#101828!important; }
.admin-main { background:var(--admin-bg)!important; }
.admin-topbar { min-height:78px; padding:13px clamp(20px,2.7vw,40px); background:rgba(255,255,255,.88)!important; border-color:var(--admin-line)!important; backdrop-filter:blur(18px); }
.admin-content-wrap { max-width:1680px; padding:30px clamp(20px,2.7vw,40px) 80px; }
.admin-body .card,.admin-card { border:1px solid var(--admin-line)!important; border-radius:17px; background:#fff!important; box-shadow:0 1px 2px rgba(16,24,40,.02),0 10px 32px rgba(16,24,40,.035)!important; }
.admin-body .btn-primary { background:linear-gradient(135deg,#f2b7b3 0%,#e8a5a0 100%)!important; border:1.5px solid #f2b7b3!important; color:#181116!important; font-weight:750!important; box-shadow:0 6px 18px rgba(242,183,179,.42)!important; }
.admin-body .btn-primary:hover { background:linear-gradient(135deg,#e8a5a0 0%,#df9590 100%)!important; border-color:#e8a5a0!important; color:#181116!important; box-shadow:0 8px 24px rgba(242,183,179,.55)!important; transform:translateY(-1px); }
.admin-body .btn-secondary { background:#fff!important; border-color:#dfe3eb!important; color:#344054!important; }
.admin-body .btn-danger { background:#fff5f5!important; border-color:#ffd5d8!important; color:#b42331!important; }
.admin-body .field input:not([type="checkbox"]),.admin-body .field select,.admin-body .field textarea,.admin-catalog-toolbar input,.admin-catalog-toolbar select,.admin-filterbar input,.admin-filterbar select,.admin-body .inline-form select,.admin-body .inline-form input { border-color:#dfe3eb!important; border-radius:9px; background:#fff!important; color:#172033!important; }
.admin-body .field input:focus,.admin-body .field select:focus,.admin-body .field textarea:focus,.admin-catalog-toolbar input:focus,.admin-catalog-toolbar select:focus,.admin-filterbar input:focus,.admin-filterbar select:focus { border-color:#f2b7b3!important; box-shadow:0 0 0 3px rgba(242,183,179,.28)!important; }
.admin-body input[type="file"] { border-color:#f2b7b3!important; background:#fafaff!important; }
.admin-body input[type="file"]::file-selector-button,.admin-body input[type="file"]::-webkit-file-upload-button { border-color:#f2b7b3; background:#fdf3f2; color:#ba6b65; }
.admin-categories-grid { grid-template-columns:minmax(300px,.72fr) minmax(520px,1.28fr); }
.admin-homepage-grid { grid-template-columns:minmax(340px,.78fr) minmax(520px,1.22fr); }
@media (max-width:1120px) { .admin-categories-grid,.admin-homepage-grid { grid-template-columns:1fr; } }
@media (max-width:1024px) { .admin-layout { grid-template-columns:1fr; } .admin-sidebar { width:264px; } }
@media (max-width:760px) { .admin-content-wrap { padding:20px 12px 64px; } }

/* Admin 3.1 legibility scale — comfortable reading and larger interaction targets. */
.admin-body {
  font-size: 15px;
  line-height: 1.5;
}

.admin-layout { grid-template-columns: 288px minmax(0,1fr); }
.admin-sidebar { padding: 24px 18px 18px; }
.admin-sidebar-header { margin-bottom: 16px; padding: 0 10px 22px; }
.admin-sidebar .admin-brand { gap: 12px; }
.admin-sidebar .admin-brand img { width: 46px; height: 46px; border-radius: 13px; }
.admin-sidebar .admin-brand strong { font-size: 15px; }
.admin-sidebar .admin-badge { margin-top: 3px; font-size: 10px; }
.admin-nav-section-title { padding: 20px 12px 9px; font-size: 11px; }
.admin-nav { gap: 5px; }
.admin-nav a { min-height: 50px; gap: 13px; padding: 11px 13px; border-radius: 11px; font-size: 14px; }
.admin-nav a svg { width: 20px; height: 20px; }
.nav-pill-badge { padding: 3px 7px; font-size: 10px; }
.admin-sidebar-footer { gap: 6px; }
.sidebar-action-btn { min-height: 46px; gap: 12px; padding: 10px 12px; border-radius: 10px; font-size: 13px; }

.admin-topbar { min-height: 90px; padding: 16px clamp(24px,3vw,48px); }
.admin-breadcrumb { margin-bottom: 4px; font-size: 11px; }
.admin-page-heading { font-size: 28px; }
.admin-topbar-right { gap: 12px; }
.admin-notification-btn { width: 44px; height: 44px; }
.admin-store-preview-btn { min-height: 44px; padding: 10px 16px !important; }
.admin-user-profile { min-height: 46px; padding: 6px 13px 6px 6px; border-radius: 12px; }
.admin-avatar { width: 34px; height: 34px; font-size: 13px; }
.admin-user-meta strong { font-size: 13px; }
.admin-user-meta .role-chip { font-size: 10px; }
.admin-content-wrap { max-width: 1540px; padding: 36px clamp(24px,3vw,48px) 90px; }

.admin-page-intro,
.dashboard-welcome { margin-bottom: 30px; }
.admin-eyebrow,
.admin-card-eyebrow { font-size: 11px; }
.admin-page-intro h2,
.dashboard-welcome h2 { margin-bottom: 9px; font-size: clamp(30px,3vw,42px); }
.admin-page-intro p,
.dashboard-welcome p { font-size: 14px; }

.admin-body .card,
.admin-card { margin-bottom: 24px; padding: 28px; border-radius: 18px; }
.admin-card-heading { gap: 28px; padding-bottom: 23px; }
.admin-card-heading h2 { margin: 4px 0 6px !important; font-size: 25px !important; }
.admin-card-heading p { font-size: 14px; }
.admin-count { min-width: 28px; height: 28px; font-size: 12px; }

.admin-body .btn { min-height: 44px; padding: 10px 17px; border-radius: 10px; font-size: 13px; }
.admin-body .btn-sm { min-height: 40px; padding: 9px 13px !important; font-size: 12px !important; }
.admin-body .form-grid { gap: 21px 22px; }
.admin-body .field { gap: 9px; }
.admin-body .field label { font-size: 12px; }
.admin-body .field label small { font-size: 11px; }
.admin-body .field input:not([type="checkbox"]),
.admin-body .field select,
.admin-body .field textarea,
.admin-catalog-toolbar input,
.admin-catalog-toolbar select,
.admin-filterbar input,
.admin-filterbar select,
.admin-body .inline-form select,
.admin-body .inline-form input {
  min-height: 48px;
  padding: 12px 14px;
  font-size: 14px;
}
.admin-body .field textarea { min-height: 132px; }
.admin-body input[type="file"] { font-size: 13px !important; }
.admin-body input[type="file"]::file-selector-button,
.admin-body input[type="file"]::-webkit-file-upload-button { padding: 8px 16px; font-size: 12px; }
.field-help { margin-top: 8px; font-size: 11px; }

.admin-section-nav { top: 90px; margin: 0 -28px; padding: 12px 28px; gap: 7px; }
.admin-section-nav a { padding: 9px 12px; font-size: 12px; }
.admin-form-section { padding: 34px 0; scroll-margin-top: 164px; }
.admin-form-section__heading { grid-template-columns: 38px minmax(0,1fr); gap: 14px; margin-bottom: 24px; }
.admin-form-section__heading > span { width: 34px; height: 34px; border-radius: 9px; font-size: 11px; }
.admin-form-section__heading h3 { font-size: 18px !important; }
.admin-form-section__heading p { font-size: 13px; }
.pricing-tier-admin,
.product-spec-admin { padding: 20px; border-radius: 13px; }
.pricing-tier-admin__heading label,
.product-spec-admin__heading label { font-size: 13px; }
.pricing-tier-admin__heading label span { font-size: 11px; }
.pricing-tier-admin__heading p,
.product-spec-admin__heading p { font-size: 12px; }
.pricing-tier-admin__row,
.product-spec-admin__row { gap: 12px; padding: 13px; }
.pricing-tier-admin__row label span,
.product-spec-admin__row label span { font-size: 11px; }
.pricing-tier-remove,
.product-spec-remove { width: 40px; height: 40px; font-size: 22px; }
.product-spec-admin__empty { padding: 15px; font-size: 12px; }
.admin-feature-toggle { gap: 13px; padding: 17px; }
.admin-feature-toggle input { width: 20px; height: 20px; }
.admin-feature-toggle strong { font-size: 13px; }
.admin-feature-toggle small { font-size: 12px; }
.admin-main-image-preview { width: 210px; font-size: 12px; }
.admin-media-layout { grid-template-columns: 210px minmax(0,1fr); gap: 25px; }
.gallery-item { width: 86px; height: 86px; }
.admin-empty-inline { font-size: 12px; }
.admin-form-actions { position: static; margin-top: 24px; padding: 15px; }
.admin-form-actions > span { font-size: 12px; }

.admin-catalog-toolbar { grid-template-columns: minmax(280px,1fr) 220px; gap: 12px; margin-bottom: 18px; }
.admin-body .data-table th { padding: 14px 16px; font-size: 11px; }
.admin-body .data-table td { padding: 16px; font-size: 13px; }
.admin-body .product-table-cell { gap: 13px; min-width: 300px; }
.admin-body .product-table-thumb { width: 58px; height: 58px; border-radius: 10px; }
.admin-body .badge,
.status-chip { padding: 5px 9px; font-size: 10px; }
.admin-product-name { font-size: 14px; }
.admin-product-slug { font-size: 11px; }
.admin-product-badges { gap: 6px; margin-top: 6px; }
.admin-product-price { font-size: 15px; }
.admin-product-discount { font-size: 11px; }
.form-error,
.form-success { padding-top: 14px; padding-bottom: 14px; font-size: 13px; }

.admin-metric-grid { gap: 16px; margin-bottom: 26px; }
.admin-metric-card { gap: 10px; padding: 22px; border-radius: 17px; }
.admin-metric-card > span { font-size: 11px; }
.admin-metric-card > strong { font-size: clamp(28px,2.15vw,34px); }
.admin-metric-card > small { font-size: 11px; }
.dashboard-analytics-grid,
.dashboard-detail-grid { gap: 22px; }
.chart-summary span { font-size: 10px; }
.chart-summary strong { font-size: 23px; }
.revenue-chart { height: 290px; margin-top: 30px; }
.revenue-bar-column { grid-template-rows: 24px minmax(0,1fr) 24px; gap: 5px; }
.revenue-bar-value { font-size: 10px; }
.revenue-bar-column small { font-size: 10px; }
.chart-footer { padding-top: 12px; font-size: 11px; }
.fulfilment-visual { grid-template-columns: 150px minmax(0,1fr); gap: 28px; padding: 34px 0; }
.fulfilment-donut { width: 150px; }
.fulfilment-donut::before { width: 100px; }
.fulfilment-donut strong { font-size: 27px; }
.fulfilment-donut span { font-size: 11px; }
.fulfilment-legend { gap: 11px; }
.fulfilment-legend a { font-size: 12px; }
.legend-dot { width: 9px; height: 9px; }
.dashboard-card-link { margin: 3px -28px -28px; padding: 18px 28px; font-size: 12px; }
.dashboard-product-list { margin-top: 10px; }
.dashboard-product-row { grid-template-columns: 28px 58px minmax(0,1fr) auto; gap: 14px; padding: 16px 0; }
.product-rank { font-size: 12px; }
.dashboard-product-row img { width: 58px; height: 58px; border-radius: 11px; }
.dashboard-product-info { gap: 7px; }
.dashboard-product-info strong { font-size: 13px; }
.dashboard-product-info > span { height: 5px; }
.dashboard-product-info small,
.stock-number { font-size: 11px; }
.activity-timeline { margin-top: 8px; }
.activity-item { grid-template-columns: 42px minmax(0,1fr) auto; gap: 13px; padding: 15px 0; }
.activity-icon { width: 40px; height: 40px; border-radius: 10px; font-size: 12px; }
.activity-item > span:nth-child(2) { gap: 4px; }
.activity-item strong { font-size: 13px; }
.activity-item small,
.activity-item time { font-size: 10px; }
.dashboard-quick-strip { padding: 22px 24px; border-radius: 17px; }
.dashboard-quick-strip > div:first-child { gap: 4px; }
.dashboard-quick-strip span { font-size: 10px; }
.dashboard-quick-strip strong { font-size: 14px; }
.dashboard-quick-strip a { padding: 10px 13px; font-size: 11px; }

.admin-filterbar { gap: 11px; padding: 15px; }
.admin-filterbar input,
.admin-filterbar select { min-height: 46px; padding: 11px 13px; font-size: 13px; }
.enquiry-list { margin-top: 10px; }
.enquiry-row { grid-template-columns: 46px minmax(0,1fr) auto; gap: 14px; padding: 16px 13px; }
.enquiry-type-icon { width: 44px; height: 44px; font-size: 12px; }
.enquiry-row-main { gap: 5px; }
.enquiry-row-top strong { font-size: 13px; }
.enquiry-row-top time { font-size: 10px; }
.enquiry-row-meta { font-size: 10px; }
.enquiry-row-message { font-size: 12px; }
.priority-dot { width: 9px; height: 9px; }
.enquiry-detail-header h2 { font-size: 24px !important; }
.enquiry-detail-header p { font-size: 11px; }
.enquiry-close { width: 38px; height: 38px; font-size: 21px; }
.enquiry-contact-grid { gap: 12px; }
.enquiry-contact-grid > div { padding: 13px; }
.enquiry-contact-grid dt { font-size: 10px; }
.enquiry-contact-grid dd { font-size: 12px; }
.enquiry-payload { padding: 18px; }
.enquiry-payload h3,
.customer-history h3 { font-size: 13px !important; }
.enquiry-payload > div { padding: 10px 0; }
.enquiry-payload > div span { font-size: 10px; }
.enquiry-payload > div strong,
.enquiry-attachment { font-size: 12px; }
.admin-empty-state p { font-size: 12px; }

.customer-table th { padding: 13px 11px; font-size: 10px; }
.customer-table td { padding: 15px 11px; font-size: 12px; }
.customer-cell { min-width: 230px; gap: 12px; }
.customer-avatar { width: 42px; height: 42px; font-size: 12px; }
.customer-cell strong { font-size: 13px; }
.customer-cell span:not(.customer-avatar) { font-size: 10px; }
.table-row-link { font-size: 11px; }
.customer-profile-value span { font-size: 10px; }
.customer-profile-value strong { font-size: 31px; }
.customer-profile-value small { font-size: 11px; }
.customer-history > a { padding: 12px 0; }
.customer-history strong { font-size: 12px; }
.customer-history small,
.admin-muted-copy { font-size: 10px; }

.stats-grid-v2 { gap: 16px; margin-bottom: 24px; }
.stat-card-v2 { gap: 10px; padding: 22px; }
.stat-card-v2 .stat-title { font-size: 11px; }
.stat-card-v2 .stat-value { font-size: 30px; }
.stat-card-v2 .stat-icon { width: 40px; height: 40px; font-size: 16px; }
.sales-action-bar { padding: 19px 21px; }
.sales-action-icon { width: 42px; height: 42px; font-size: 16px; }

@media (max-width: 1320px) {
  .admin-layout { grid-template-columns: 270px minmax(0,1fr); }
  .dashboard-metrics { grid-template-columns: repeat(3,minmax(0,1fr)); }
}

@media (max-width: 1024px) {
  .admin-layout { grid-template-columns: 1fr; }
  .admin-sidebar { width: 288px; }
  .admin-topbar { min-height: 80px; }
  .admin-section-nav { top: 64px; }
}

@media (max-width: 760px) {
  .admin-body { font-size: 14px; }
  .admin-content-wrap { padding: 22px 14px 70px; }
  .admin-body .card,
  .admin-card { padding: 20px; }
  .admin-page-heading { font-size: 24px; }
  .admin-page-intro h2,
  .dashboard-welcome h2 { font-size: 30px; }
  .admin-section-nav { margin-inline: -20px; padding-inline: 20px; }
  .dashboard-card-link { margin-inline: -20px; margin-bottom: -20px; padding-inline: 20px; }
  .admin-metric-card { padding: 18px; }
  .admin-metric-card > span { font-size: 10px; }
  .admin-metric-card > small { font-size: 10px; }
  .revenue-chart { height: 230px; }
  .revenue-bar-column small { font-size: 8px; }
  .dashboard-product-row { grid-template-columns: 24px 50px minmax(0,1fr); }
  .dashboard-product-row img { width: 50px; height: 50px; }
  .stock-number { grid-column: 3; }
  .activity-item time { grid-column: 2; }
  .admin-body .data-table { min-width: 900px; }
  .admin-catalog-card .data-table { min-width: 0; }
  .admin-catalog-card .data-table td:not(:first-child)::before { font-size: 10px; }
  .admin-media-layout { grid-template-columns: 1fr; }
  .admin-main-image-preview { width: 100%; max-width: 240px; }
}

/* Admin custom controls — replaces native browser chrome throughout the workspace. */
.admin-native-select,
.admin-native-date {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0 0 0 0) !important;
  clip-path: inset(50%) !important;
  border: 0 !important;
  white-space: nowrap !important;
}

.admin-select,
.admin-date-control,
.admin-number-control,
.admin-password-control { position: relative; width: 100%; min-width: 0; }

.admin-select__trigger,
.admin-date-trigger {
  width: 100%;
  min-height: 48px;
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 11px 14px;
  border: 1px solid #dfe3eb;
  border-radius: 10px;
  background: #fff;
  color: var(--admin-ink);
  font: 600 14px/1.3 "Plus Jakarta Sans", "DM Sans", sans-serif;
  text-align: left;
  cursor: pointer;
  transition: border-color .18s ease, box-shadow .18s ease, background .18s ease;
}
.admin-select__trigger > span,
.admin-date-trigger > span { min-width: 0; flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.admin-select__trigger > svg,
.admin-date-trigger__chevron { width: 19px; height: 19px; flex: 0 0 19px; color: #667085; transition: transform .18s ease; }
.admin-date-trigger > svg:first-child { width: 20px; height: 20px; flex: 0 0 20px; color: #ba6b65; }
.admin-select__trigger:hover,
.admin-date-trigger:hover { border-color: #f2b7b3; background: #fdfdfd; }
.admin-select__trigger:focus-visible,
.admin-date-trigger:focus-visible,
.admin-select.is-open .admin-select__trigger,
.admin-date-control.is-open .admin-date-trigger {
  outline: 0;
  border-color: #f2b7b3;
  box-shadow: 0 0 0 4px rgba(242,183,179,.28);
}
.admin-select.is-open .admin-select__trigger > svg,
.admin-date-control.is-open .admin-date-trigger__chevron { transform: rotate(180deg); }
.admin-select__trigger:disabled,
.admin-date-trigger:disabled { opacity: .55; cursor: not-allowed; background: #f5f6f8; }

.admin-control-popover {
  position: fixed;
  z-index: 3000;
  max-height: min(390px,calc(100vh - 24px));
  overflow: auto;
  border: 1px solid #dfe3eb;
  border-radius: 15px;
  background: rgba(255,255,255,.985);
  box-shadow: 0 18px 55px rgba(16,24,40,.2),0 3px 12px rgba(16,24,40,.08);
  color: #172033;
  overscroll-behavior: contain;
  animation: admin-control-enter .16s ease both;
  backdrop-filter: blur(18px);
}
.admin-control-popover[data-placement="top"] { transform-origin: bottom center; }
.admin-control-popover[data-placement="bottom"] { transform-origin: top center; }
@keyframes admin-control-enter {
  from { opacity: 0; transform: translateY(-5px) scale(.985); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}
.admin-select__menu-head { position: sticky; top: 0; z-index: 2; display: grid; gap: 10px; padding: 15px; border-bottom: 1px solid #eceef3; background: rgba(255,255,255,.97); }
.admin-select__menu-head strong { color: #667085; font-size: 11px; font-weight: 800; letter-spacing: .07em; text-transform: uppercase; }
.admin-select__search { width: 100%; min-height: 42px; padding: 9px 12px; border: 1px solid #dfe3eb; border-radius: 9px; background: #f8f9fc; color: #172033; font: 500 13px "Plus Jakarta Sans",sans-serif; box-sizing: border-box; }
.admin-select__search:focus { outline: 0; border-color: #f2b7b3; box-shadow: 0 0 0 3px rgba(242,183,179,.28); background: #fff; }
.admin-select__options { display: grid; gap: 3px; padding: 7px; }
.admin-select__option {
  width: 100%;
  min-height: 43px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 9px 11px;
  border: 0;
  border-radius: 9px;
  background: transparent;
  color: #344054;
  font: 600 13px "Plus Jakarta Sans",sans-serif;
  text-align: left;
  cursor: pointer;
}
.admin-select__option:hover,
.admin-select__option:focus-visible { outline: 0; background: #fdf3f2; color: #ba6b65; }
.admin-select__option.is-selected { background: #fdf2f1; color: #8c423e; font-weight: 750; }
.admin-select__option:disabled { opacity: .42; cursor: not-allowed; }
.admin-select__option[hidden] { display: none; }
.admin-select__check { width: 24px; height: 24px; display: grid; place-items: center; flex: 0 0 24px; border-radius: 7px; color: transparent; background: transparent; font-size: 13px; }
.admin-select__option.is-selected .admin-select__check { color: #181116; background: #f2b7b3; }
.admin-filterbar > .admin-select { flex: 0 1 230px; min-width: 190px; }
.admin-catalog-toolbar > .admin-select { min-width: 0; }
.admin-body .inline-form .admin-select { min-width: 150px; }

.admin-calendar { width: 350px; padding: 14px; overflow: visible; }
.admin-calendar__header { display: grid; grid-template-columns: 38px 1fr 38px; gap: 8px; align-items: center; margin-bottom: 12px; }
.admin-calendar__header strong { color: #172033; font-size: 15px; text-align: center; }
.admin-calendar__header button,
.admin-calendar__actions button {
  min-height: 36px;
  padding: 7px 10px;
  border: 1px solid #e2e5ec;
  border-radius: 9px;
  background: #fff;
  color: #475467;
  font: 700 12px "Plus Jakarta Sans",sans-serif;
  cursor: pointer;
}
.admin-calendar__header button:hover,
.admin-calendar__actions button:hover { border-color: #f2b7b3; background: #fdf3f2; color: #ba6b65; }
.admin-calendar__weekdays,
.admin-calendar__days { display: grid; grid-template-columns: repeat(7,1fr); gap: 4px; }
.admin-calendar__weekdays { margin-bottom: 5px; }
.admin-calendar__weekdays span { padding: 5px 0; color: #98a2b3; font-size: 10px; font-weight: 800; text-align: center; text-transform: uppercase; }
.admin-calendar__day,
.admin-calendar__blank { aspect-ratio: 1; }
.admin-calendar__day { display: grid; place-items: center; border: 0; border-radius: 10px; background: transparent; color: #344054; font: 650 12px "Plus Jakarta Sans",sans-serif; cursor: pointer; }
.admin-calendar__day:hover,
.admin-calendar__day:focus-visible { outline: 0; background: #fdf3f2; color: #ba6b65; }
.admin-calendar__day.is-today { box-shadow: inset 0 0 0 1px #f2b7b3; color: #ba6b65; }
.admin-calendar__day.is-selected { background: #f2b7b3; box-shadow: 0 5px 12px rgba(242,183,179,.4); color: #181116; }
.admin-calendar__day:disabled { opacity: .3; cursor: not-allowed; }
.admin-calendar__time { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 12px; padding: 11px 12px; border: 1px solid #eceef3; border-radius: 10px; background: #f8f9fb; }
.admin-calendar__time span { color: #667085; font-size: 11px; font-weight: 750; text-transform: uppercase; }
.admin-calendar__time input { width: 92px; min-height: 38px; padding: 8px 10px; border: 1px solid #dfe3eb; border-radius: 8px; background: #fff; color: #172033; font: 650 13px "Plus Jakarta Sans",sans-serif; text-align: center; }
.admin-calendar__actions { display: grid; grid-template-columns: auto 1fr auto auto; gap: 7px; margin-top: 13px; padding-top: 12px; border-top: 1px solid #eceef3; }
.admin-calendar__actions button.is-primary { border-color: #f2b7b3; background: #f2b7b3; color: #181116; font-weight: 750; }

.admin-file-control { position: relative; width: 100%; min-height: 78px; }
.admin-body .admin-file-control__input {
  position: absolute !important;
  inset: 0 !important;
  z-index: 2;
  width: 100% !important;
  height: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  opacity: 0;
  cursor: pointer;
}
.admin-file-control__surface { min-height: 78px; display: grid; grid-template-columns: 38px minmax(0,1fr) auto; gap: 12px; align-items: center; padding: 13px 14px; border: 1.5px dashed #f2b7b3; border-radius: 12px; background: #fffaf9; transition: border-color .18s ease,background .18s ease,box-shadow .18s ease; }
.admin-file-control__surface > svg { width: 36px; height: 36px; padding: 8px; border-radius: 10px; background: #fdf2f1; color: #ba6b65; box-sizing: border-box; }
.admin-file-control__surface > span { min-width: 0; display: grid; gap: 3px; }
.admin-file-control__surface strong { overflow: hidden; color: #344054; font-size: 13px; text-overflow: ellipsis; white-space: nowrap; }
.admin-file-control__surface small { overflow: hidden; color: #98a2b3; font-size: 11px; text-overflow: ellipsis; white-space: nowrap; }
.admin-file-control__surface b { padding: 8px 11px; border: 1px solid #f2b7b3; border-radius: 8px; background: #fff; color: #ba6b65; font-size: 11px; }
.admin-file-control:hover .admin-file-control__surface,
.admin-file-control__input:focus-visible + .admin-file-control__surface { border-color: #e8a5a0; background: #fdf3f2; box-shadow: 0 0 0 4px rgba(242,183,179,.28); }
.admin-file-control.has-files .admin-file-control__surface { border-style: solid; border-color: #8ed8ba; background: #f3fbf7; }
.admin-file-control.has-files .admin-file-control__surface > svg { background: #e5f8ef; color: #16815a; }

.admin-number-control > input { padding-right: 80px !important; }
.admin-number-control__actions { position: absolute; top: 50%; right: 7px; display: grid; grid-template-columns: 31px 31px; gap: 4px; transform: translateY(-50%); }
.admin-number-control__actions button { width: 31px; height: 32px; display: grid; place-items: center; padding: 0; border: 1px solid #e1e4eb; border-radius: 8px; background: #f8f9fb; color: #475467; font: 700 16px/1 "Plus Jakarta Sans",sans-serif; cursor: pointer; }
.admin-number-control__actions button:hover { border-color: #f2b7b3; background: #fdf3f2; color: #ba6b65; }
.admin-body input[type="number"] { appearance: textfield; -moz-appearance: textfield; }
.admin-body input[type="number"]::-webkit-inner-spin-button,
.admin-body input[type="number"]::-webkit-outer-spin-button { margin: 0; appearance: none; -webkit-appearance: none; }

.admin-password-control > input { padding-right: 48px !important; }
.admin-password-toggle { position: absolute; top: 50%; right: 7px; width: 36px; height: 36px; display: grid; place-items: center; padding: 0; border: 0; border-radius: 8px; background: transparent; color: #667085; cursor: pointer; transform: translateY(-50%); }
.admin-password-toggle:hover { background: #fdf3f2; color: #ba6b65; }
.admin-password-toggle svg { width: 19px; height: 19px; }
.admin-password-toggle.is-visible { color: #ba6b65; background: #fdf2f1; }

.admin-body input[type="search"] { padding-right: 46px !important; }
.admin-body input[type="search"]::-webkit-search-cancel-button { display: none; }
.admin-search-clear { position: absolute; top: 50%; right: 8px; z-index: 3; width: 32px; height: 32px; display: grid; place-items: center; padding: 0; border: 0; border-radius: 8px; background: #f1f3f6; color: #667085; font: 500 20px/1 sans-serif; cursor: pointer; transform: translateY(-50%); }
.admin-search-clear:hover { background: #fdf3f2; color: #ba6b65; }
.admin-search-clear[hidden] { display: none; }

.admin-body input[type="checkbox"],
.admin-body input[type="radio"] {
  width: 21px !important;
  height: 21px !important;
  flex: 0 0 21px;
  margin: 0;
  border: 1.5px solid #cbd0da;
  background: #fff;
  appearance: none;
  -webkit-appearance: none;
  cursor: pointer;
  transition: border-color .15s ease,background .15s ease,box-shadow .15s ease;
}
.admin-body input[type="checkbox"] { border-radius: 6px; }
.admin-body input[type="radio"] { border-radius: 50%; }
.admin-body input[type="checkbox"]:checked { border-color: #f2b7b3; background-color: #f2b7b3; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath fill='none' stroke='%23181116' stroke-linecap='round' stroke-linejoin='round' stroke-width='2.4' d='m5 10 3 3 7-7'/%3E%3C/svg%3E"); }
.admin-body input[type="radio"]:checked { border: 6px solid #f2b7b3; }
.admin-body input[type="checkbox"]:focus-visible,
.admin-body input[type="radio"]:focus-visible { outline: 0; box-shadow: 0 0 0 4px rgba(242,183,179,.28); }

.admin-body input[type="range"] {
  width: 100%;
  min-height: 24px !important;
  height: 24px !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  appearance: none;
  -webkit-appearance: none;
}
.admin-body input[type="range"]::-webkit-slider-runnable-track { height: 6px; border-radius: 999px; background: #e7e8f2; }
.admin-body input[type="range"]::-webkit-slider-thumb { width: 20px; height: 20px; margin-top: -7px; border: 4px solid #fff; border-radius: 50%; background: #f2b7b3; box-shadow: 0 2px 8px rgba(242,183,179,.4); appearance: none; -webkit-appearance: none; }
.admin-body input[type="range"]::-moz-range-track { height: 6px; border-radius: 999px; background: #e7e8f2; }
.admin-body input[type="range"]::-moz-range-thumb { width: 13px; height: 13px; border: 4px solid #fff; border-radius: 50%; background: #f2b7b3; box-shadow: 0 2px 8px rgba(242,183,179,.4); }
.admin-body input[type="color"] { width: 54px !important; height: 48px !important; padding: 5px !important; border: 1px solid #dfe3eb !important; border-radius: 10px; background: #fff; cursor: pointer; }
.admin-body input[type="color"]::-webkit-color-swatch-wrapper { padding: 0; }
.admin-body input[type="color"]::-webkit-color-swatch { border: 0; border-radius: 7px; }
.admin-body input[type="color"]::-moz-color-swatch { border: 0; border-radius: 7px; }
.admin-body,
.admin-control-popover { scrollbar-width: thin; scrollbar-color: #bbb8e9 transparent; }
.admin-body ::-webkit-scrollbar,
.admin-control-popover::-webkit-scrollbar { width: 10px; height: 10px; }
.admin-body ::-webkit-scrollbar-track,
.admin-control-popover::-webkit-scrollbar-track { background: transparent; }
.admin-body ::-webkit-scrollbar-thumb,
.admin-control-popover::-webkit-scrollbar-thumb { border: 3px solid transparent; border-radius: 999px; background: #bbb8e9; background-clip: padding-box; }

@media (max-width: 760px) {
  .admin-filterbar > .admin-select { width: 100%; flex-basis: auto; }
  .admin-control-popover { max-height: min(420px,calc(100vh - 20px)); }
  .admin-calendar { width: calc(100vw - 24px) !important; max-width: 380px; }
  .admin-file-control__surface { grid-template-columns: 38px minmax(0,1fr); }
  .admin-file-control__surface b { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .admin-control-popover { animation: none; }
}

/* Invoice Studio — settings-led invoice workflow and live document preview. */
.admin-settings-nav {
  position: sticky;
  top: 90px;
  z-index: 35;
  display: flex;
  gap: 8px;
  margin: -8px 0 24px;
  padding: 10px;
  border: 1px solid var(--admin-line);
  border-radius: 14px;
  background: rgba(255,255,255,.92);
  box-shadow: 0 8px 24px rgba(16,24,40,.05);
  backdrop-filter: blur(16px);
  overflow-x: auto;
}
.admin-settings-nav a {
  flex: 0 0 auto;
  padding: 9px 13px;
  border-radius: 9px;
  color: #667085;
  font-size: 12px;
  font-weight: 750;
  text-decoration: none;
}
.admin-settings-nav a:hover { background: #efeeff; color: #5149bc; }
.settings-section-card,
.invoice-studio-card { scroll-margin-top: 165px; }
.admin-settings-form > .invoice-studio-card { grid-column: 1 / -1; padding: 0; overflow: hidden; }
.invoice-studio-heading {
  display: flex;
  justify-content: space-between;
  gap: 28px;
  align-items: flex-start;
  padding: 30px 32px;
  border-bottom: 1px solid var(--admin-line);
  background: linear-gradient(135deg,#fff 0%,#f6f5ff 100%);
}
.invoice-studio-heading h2 { margin: 5px 0 8px !important; max-width: 760px; font-size: 27px !important; letter-spacing: -.035em; }
.invoice-studio-heading p { max-width: 780px; margin: 0; color: #667085; font-size: 13px; line-height: 1.65; }
.invoice-studio-status {
  min-width: 150px;
  display: grid;
  padding: 16px 18px;
  border: 1px solid #dcd9ff;
  border-radius: 14px;
  background: #fff;
  box-shadow: 0 10px 26px rgba(99,91,255,.08);
}
.invoice-studio-status span { color: #5149bc; font-size: 10px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.invoice-studio-status strong { margin: 3px 0 -2px; color: #172033; font-size: 28px; line-height: 1.2; }
.invoice-studio-status small { color: #98a2b3; font-size: 10px; }
.invoice-studio-layout { display: grid; grid-template-columns: minmax(0,1.35fr) minmax(380px,.65fr); align-items: start; }
.invoice-studio-controls { min-width: 0; padding: 6px 32px 32px; border-right: 1px solid var(--admin-line); }
.invoice-settings-group { padding: 27px 0; border-bottom: 1px solid #eceef3; }
.invoice-settings-group:last-child { border-bottom: 0; }
.invoice-settings-group__title { display: grid; grid-template-columns: 38px minmax(0,1fr); gap: 13px; align-items: start; margin-bottom: 20px; }
.invoice-settings-group__title > span { width: 34px; height: 34px; display: grid; place-items: center; border-radius: 10px; background: #efeeff; color: #5149bc; font-size: 10px; font-weight: 850; }
.invoice-settings-group__title h3 { margin: 0 0 3px !important; font-size: 16px !important; }
.invoice-settings-group__title p { margin: 0; color: #98a2b3; font-size: 11px; }
.invoice-paired-fields { display: grid; grid-template-columns: minmax(0,1.4fr) minmax(92px,.6fr); gap: 9px; }
.input-with-suffix { position: relative; }
.input-with-suffix > input { padding-right: 45px !important; }
.input-with-suffix > span {
  position: absolute;
  top: 50%;
  right: 14px;
  color: #667085;
  font-size: 13px;
  font-weight: 800;
  transform: translateY(-50%);
  pointer-events: none;
  z-index: 3;
}
.input-with-suffix .admin-number-control > input {
  padding-right: 110px !important;
}
.input-with-suffix.has-number-control > span,
.input-with-suffix .admin-number-control ~ span,
.input-with-suffix:has(.admin-number-control) > span {
  right: 82px;
}
.invoice-workflow-strip { display: flex; align-items: center; gap: 8px; margin-top: 18px; padding: 13px 14px; border: 1px solid #f2b7b3; border-radius: 12px; background: #fdfaf9; overflow-x: auto; }
.invoice-workflow-strip span { flex: 0 0 auto; display: flex; align-items: center; gap: 7px; color: #ba6b65; font-size: 10px; font-weight: 750; }
.invoice-workflow-strip b { width: 23px; height: 23px; display: grid; place-items: center; border-radius: 7px; background: #f2b7b3; color: #181116; font-size: 9px; font-weight: 800; }
.invoice-workflow-strip i { color: #f2b7b3; font-style: normal; }
.invoice-options-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 10px; margin-top: 18px; }
.invoice-option { min-width: 0; display: flex; gap: 11px; align-items: flex-start; padding: 13px; border: 1px solid #e5e7ee; border-radius: 11px; background: #fbfcfd; cursor: pointer; }
.invoice-option:hover { border-color: #c8c5ff; background: #faf9ff; }
.invoice-option input[type="checkbox"] { margin-top: 1px; }
.invoice-option > span { min-width: 0; display: grid; gap: 2px; }
.invoice-option strong { color: #344054; font-size: 11px; }
.invoice-option small { color: #98a2b3; font-size: 10px; line-height: 1.45; }
.invoice-colour-field { display: flex; align-items: center; gap: 11px; min-height: 48px; padding: 0 12px 0 5px; border: 1px solid #dfe3eb; border-radius: 10px; }
.invoice-colour-field input[type="color"] { border: 0 !important; }
.invoice-colour-field span { color: #475467; font-size: 12px; font-weight: 800; letter-spacing: .04em; }
.invoice-preview-panel { position: sticky; top: 165px; min-width: 0; padding: 30px; background: #f8f9fc; }
.invoice-preview-toolbar { display: flex; justify-content: space-between; gap: 16px; align-items: center; margin-bottom: 16px; }
.invoice-preview-toolbar > div { display: grid; gap: 2px; }
.invoice-preview-toolbar span { color: #667085; font-size: 10px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.invoice-preview-toolbar strong { color: #172033; font-size: 12px; }
.invoice-preview-live { display: flex !important; gap: 6px; align-items: center; padding: 6px 8px; border-radius: 999px; background: #eaf9f1; color: #16815a !important; letter-spacing: .03em !important; }
.invoice-preview-live i { width: 7px; height: 7px; border-radius: 50%; background: #22a06b; box-shadow: 0 0 0 4px rgba(34,160,107,.12); }
.invoice-preview-sheet { --invoice-preview-accent:#f2b7b3; position: relative; overflow: hidden; padding: 23px; border: 1px solid #dfe3eb; border-radius: 10px; background: #fff; box-shadow: 0 18px 50px rgba(16,24,40,.12); color: #172033; aspect-ratio: 1 / 1.414; }
.invoice-preview-topline { position: absolute; inset: 0 0 auto; height: 6px; background: var(--invoice-preview-accent); }
.invoice-preview-sheet header { display: flex; justify-content: space-between; gap: 14px; padding: 6px 0 17px; border-bottom: 1px solid #e5e7eb; }
.invoice-preview-brand { display: flex; gap: 9px; align-items: center; min-width: 0; }
.invoice-preview-brand img { width: 38px; height: 38px; object-fit: contain; }
.invoice-preview-brand > div { min-width: 0; display: grid; }
.invoice-preview-brand small { color: var(--invoice-preview-accent); font-size: 7px; font-weight: 850; letter-spacing: .1em; text-transform: uppercase; }
.invoice-preview-brand strong { overflow: hidden; margin-top: 2px; font-size: 13px; text-overflow: ellipsis; white-space: nowrap; }
.invoice-preview-meta { flex: 0 0 auto; display: grid; grid-template-columns: auto auto; gap: 3px 8px; text-align: right; }
.invoice-preview-meta span { color: #98a2b3; font-size: 6px; font-weight: 800; }
.invoice-preview-meta b { font-size: 7px; }
.invoice-preview-parties { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; padding: 15px 0; }
.invoice-preview-parties > div { display: grid; align-content: start; gap: 3px; padding: 10px; border: 1px solid #eceef3; border-radius: 7px; }
.invoice-preview-parties small { color: var(--invoice-preview-accent); font-size: 6px; font-weight: 850; letter-spacing: .08em; }
.invoice-preview-parties strong { overflow: hidden; font-size: 8px; text-overflow: ellipsis; white-space: nowrap; }
.invoice-preview-parties span { overflow: hidden; color: #667085; font-size: 6px; line-height: 1.35; text-overflow: ellipsis; white-space: nowrap; }
.invoice-preview-table { border: 1px solid #e5e7eb; border-radius: 7px; overflow: hidden; }
.invoice-preview-table > div { display: grid; grid-template-columns: var(--invoice-preview-cols, 1fr 34px 70px); gap: 6px; padding: 7px 9px; border-bottom: 1px solid #eceef3; font-size: 7px; align-items: center; }
.invoice-preview-table > div:last-child { border-bottom: 0; }
.invoice-preview-table .head { background: var(--invoice-preview-accent); color: #fff; font-size: 6px; font-weight: 850; letter-spacing: .06em; }
.invoice-preview-table [hidden] { display: none !important; }
.invoice-preview-table span:nth-child(n+2),.invoice-preview-table strong { text-align: right; }
.invoice-preview-totals-block { display: flex; justify-content: space-between; align-items: flex-end; gap: 8px; margin-top: 10px; }
.invoice-preview-tax-summary { display: flex; flex-direction: column; gap: 2px; font-size: 6px; color: #667085; }
.invoice-preview-tax-summary[hidden] { display: none !important; }
.invoice-preview-total strong { color: var(--invoice-preview-accent); font-size: 10px; }
.invoice-preview-notes-bank { margin-top: 10px; padding: 7px 9px; border: 1px solid #eceef3; border-radius: 7px; background: #fafbfc; font-size: 6px; line-height: 1.45; color: #475467; }
.invoice-preview-notes { margin-bottom: 6px; }
.invoice-preview-notes small, .invoice-preview-bank small { display: block; margin-bottom: 2px; color: var(--invoice-preview-accent); font-size: 6px; font-weight: 850; letter-spacing: .08em; text-transform: uppercase; }
.invoice-preview-notes p { margin: 0; color: #475467; }
.invoice-preview-bank div { display: flex; gap: 4px; }
.invoice-preview-bank span { color: #667085; }
.invoice-preview-bank strong, .invoice-preview-bank b { color: #172033; }
.invoice-preview-bank[hidden] { display: none !important; }
.invoice-preview-sign { display: grid; justify-items: end; margin-top: 26px; padding-top: 10px; border-top: 1px dashed #dfe3eb; }
.invoice-preview-sign span,.invoice-preview-sign small { color: #667085; font-size: 6px; }
.invoice-preview-sign strong { margin: 8px 0 1px; font-family: Georgia,serif; font-size: 10px; font-style: italic; }
.invoice-preview-sheet footer { position: absolute; right: 23px; bottom: 18px; left: 23px; padding-top: 8px; border-top: 1px solid #eceef3; color: #98a2b3; font-size: 6px; text-align: center; }
.invoice-preview-note { margin: 14px 0; color: #667085; font-size: 10px; line-height: 1.55; text-align: center; }
.invoice-awaiting-pill { display: inline-flex; min-height: 32px; align-items: center; padding: 6px 9px; border-radius: 8px; background: #fff7e8; color: #9a6700; font-size: 10px; font-weight: 750; }

@media (max-width: 1280px) {
  .invoice-studio-layout { grid-template-columns: minmax(0,1fr) 380px; }
  .invoice-studio-controls { padding-inline: 24px; }
  .invoice-preview-panel { padding: 24px; }
}
@media (max-width: 1080px) {
  .invoice-studio-layout { grid-template-columns: 1fr; }
  .invoice-studio-controls { border-right: 0; }
  .invoice-preview-panel { position: static; border-top: 1px solid var(--admin-line); }
  .invoice-preview-sheet { max-width: 520px; margin-inline: auto; }
}
@media (max-width: 760px) {
  .admin-settings-nav { top: 64px; margin-inline: -2px; }
  .invoice-studio-heading { padding: 23px 20px; flex-direction: column; }
  .invoice-studio-status { width: 100%; }
  .invoice-studio-controls,.invoice-preview-panel { padding: 20px; }
  .invoice-options-grid { grid-template-columns: 1fr; }
  .invoice-paired-fields { grid-template-columns: 1fr; }
  .invoice-workflow-strip { margin-inline: -2px; }
}

.code-editor-input {
  width: 100%;
  font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;
  font-size: 12.5px;
  line-height: 1.6;
  padding: 12px 14px;
  border: 1px solid #d0d5dd;
  border-radius: 10px;
  background: #fbfcfd;
  color: #1e293b;
  box-sizing: border-box;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
  resize: vertical;
}
.code-editor-input:focus {
  border-color: #f2b7b3;
  background: #ffffff;
  box-shadow: 0 0 0 3px rgba(242, 183, 179, 0.28);
  outline: none;
}
.badge-code {
  display: inline-block;
  padding: 2px 7px;
  font-family: ui-monospace, monospace;
  font-size: 11px;
  font-weight: 700;
  color: #ba6b65;
  background: #fdf2f1;
  border-radius: 6px;
  margin-left: 6px;
}
.field-hint {
  display: block;
  margin-top: 6px;
  color: #667085;
  font-size: 12px;
  line-height: 1.45;
}
.tracking-status-pills {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  align-items: center;
}
.tracking-pill {
  display: inline-flex;
  align-items: center;
  padding: 4px 11px;
  border-radius: 20px;
  font-size: 11px;
  font-weight: 700;
  background: #f2f4f7;
  color: #667085;
  border: 1px solid #e4e7ec;
}
.tracking-pill.is-active {
  background: #ecfdf3;
  color: #027a48;
  border-color: #a6f4c5;
}

/* Storefront mobile containment — keep animated and aspect-ratio content in the viewport. */
@media (max-width: 820px) {
  html,
  body:not(.admin-body) {
    max-width: 100%;
    overflow-x: clip;
  }

  body:not(.admin-body) .custom-grid,
  body:not(.admin-body) .custom-grid > * {
    min-width: 0;
  }

  body:not(.admin-body) .custom-visual {
    width: 100%;
    min-width: 0;
    min-height: 0;
  }

  body:not(.admin-body) .mobile-dock {
    left: 0;
    right: 0;
    width: 100%;
    max-width: none;
    transform: none;
    box-sizing: border-box;
  }

  .pmc-scroll-progress {
    width: 100vw;
    max-width: 100vw;
  }
}


/* ========================================================================== 
   MOBILE STOREFRONT LOCK — header, drawers, collection pages and bottom dock
   Kept at the end of the cascade so legacy responsive rules cannot win.
   ========================================================================== */
.mobile-nav-close,
.mobile-nav-backdrop,
.filter-drawer-close,
.filter-drawer-backdrop {
  display: none;
}

.mobile-nav-backdrop[hidden],
.filter-drawer-backdrop[hidden] {
  display: none !important;
}

@media (max-width: 820px) {
  :root {
    --pmc-mobile-dock-height: 64px;
    --pmc-mobile-gutter: 12px;
  }

  html {
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
  }

  body:not(.admin-body) {
    width: 100%;
    min-width: 0;
    padding-bottom: calc(var(--pmc-mobile-dock-height) + env(safe-area-inset-bottom) + 32px);
    overflow-x: clip;
  }

  body.mobile-nav-open:not(.admin-body),
  body.filter-drawer-open:not(.admin-body),
  body.search-overlay-open:not(.admin-body) {
    overflow: hidden;
    touch-action: none;
  }

  /* Compact mobile header. The search uses the modal overlay and never enters
     the header grid, preventing the wrapped logo and clipped icons. */
  body:not(.admin-body) .announcement-bar {
    min-height: 34px;
  }

  body:not(.admin-body) .announcement-inner {
    min-height: 34px;
    padding: 6px 12px;
    justify-content: center;
  }

  body:not(.admin-body) .announcement-inner > span:first-child {
    display: none;
  }

  body:not(.admin-body) .announcement-inner a {
    max-width: 100%;
    font-size: 10.5px;
    line-height: 1.25;
    letter-spacing: .08em;
    text-align: center;
    white-space: nowrap;
  }

  body:not(.admin-body) .site-header.v2-header {
    z-index: 300;
  }

  body.mobile-nav-open:not(.admin-body) .site-header.v2-header {
    z-index: 1300;
  }

  body:not(.admin-body) .container.header-main {
    width: calc(100% - (2 * var(--pmc-mobile-gutter)));
    max-width: none;
    min-height: 66px;
    padding: 0;
    grid-template-columns: 42px minmax(0, 1fr) auto;
    gap: 7px;
  }

  body:not(.admin-body) .v2-header .hamburger {
    width: 42px;
    height: 42px;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    gap: 5px;
    padding: 0;
    border-radius: 14px;
    background: #fff8f6;
    position: relative;
    z-index: 2;
  }

  body:not(.admin-body) .v2-header .hamburger span {
    width: 21px;
    height: 2px;
    margin: 0;
    border-radius: 2px;
    background: #181116;
    transition: transform .22s ease, opacity .18s ease;
  }

  body:not(.admin-body) .v2-header .hamburger.active span:nth-child(1) {
    transform: translateY(7px) rotate(45deg);
  }

  body:not(.admin-body) .v2-header .hamburger.active span:nth-child(2) {
    opacity: 0;
  }

  body:not(.admin-body) .v2-header .hamburger.active span:nth-child(3) {
    transform: translateY(-7px) rotate(-45deg);
  }

  body:not(.admin-body) .header-main > .brand-v2 {
    justify-self: start;
    min-width: 0;
    max-width: 100%;
    gap: 7px;
    overflow: hidden;
  }

  body:not(.admin-body) .header-main > .brand-v2 img {
    width: 39px;
    height: 39px;
    flex: 0 0 39px;
  }

  body:not(.admin-body) .header-main > .brand-v2 span {
    min-width: 0;
    display: block;
    overflow: hidden;
  }

  body:not(.admin-body) .header-main > .brand-v2 strong {
    display: block;
    max-width: 100%;
    overflow: hidden;
    color: #181116;
    font-size: clamp(13px, 4.2vw, 17px);
    line-height: 1.1;
    letter-spacing: -.02em;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  body:not(.admin-body) .header-main > .brand-v2 small,
  body:not(.admin-body) .header-actions [data-auth-links] {
    display: none !important;
  }

  body:not(.admin-body) .header-actions {
    min-width: 0;
    gap: 1px;
    justify-self: end;
  }

  body:not(.admin-body) .header-actions :is(.icon-btn, .cart-link) {
    width: 38px;
    min-width: 38px;
    height: 42px;
    padding: 0;
    display: inline-grid;
    place-items: center;
  }

  body:not(.admin-body) .v2-header .mobile-search-trigger {
    display: inline-grid;
  }

  body:not(.admin-body) .header-main > .header-search,
  body:not(.admin-body) .header-main > .header-search.mobile-open {
    display: none !important;
  }

  /* Full-screen mobile search, shared by the header icon and bottom dock. */
  body:not(.admin-body) .search-overlay {
    z-index: 1400;
    min-height: 100dvh;
    padding: max(86px, calc(66px + env(safe-area-inset-top))) 16px max(84px, calc(70px + env(safe-area-inset-bottom)));
    align-items: flex-start;
    background:
      radial-gradient(circle at 88% 5%, rgba(242,183,179,.34), transparent 32%),
      linear-gradient(155deg, #fffdfc 0%, #fff7f5 56%, #fbe5e2 100%);
    animation: none;
  }

  body:not(.admin-body) .search-close {
    position: absolute !important;
    top: max(14px, env(safe-area-inset-top));
    right: 16px !important;
    left: auto !important;
    z-index: 3;
    width: 44px;
    height: 44px;
    display: grid;
    place-items: center;
    opacity: 1;
  }

  body:not(.admin-body) .search-container {
    width: 100%;
    max-width: 520px;
    margin: min(9vh, 72px) auto 0;
    padding: clamp(22px, 6vw, 34px);
    border: 1px solid rgba(224,155,150,.42);
    border-radius: 24px;
    background: rgba(255,255,255,.9);
    box-shadow: 0 24px 64px rgba(91,50,56,.14);
    text-align: left;
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
  }

  body:not(.admin-body) .search-eyebrow {
    display: block;
    margin-bottom: 10px;
    color: #a45450;
    font-family: var(--pmc-sans);
    font-size: 9px;
    font-weight: 800;
    letter-spacing: .16em;
  }

  body:not(.admin-body) .search-container h2 {
    margin: 0;
    color: #181116;
    font-family: var(--pmc-sans);
    font-size: clamp(28px, 8vw, 40px);
    line-height: 1.02;
    letter-spacing: -.045em;
  }

  body:not(.admin-body) .search-intro {
    max-width: 390px;
    margin: 12px 0 22px;
    color: #675a60;
    font-size: 13px;
    line-height: 1.55;
  }

  body:not(.admin-body) .search-form {
    margin: 0;
  }

  body:not(.admin-body) .search-field {
    min-width: 0;
    min-height: 56px;
    display: grid;
    grid-template-columns: 20px minmax(0, 1fr) auto;
    align-items: center;
    gap: 10px;
    padding: 5px 5px 5px 16px;
    border: 1.5px solid #dfb2ae;
    border-radius: 16px;
    background: #fff;
    box-shadow: 0 8px 20px rgba(91,50,56,.07);
  }

  body:not(.admin-body) .search-field > svg {
    width: 20px;
    height: 20px;
    color: #8c717a;
  }

  body:not(.admin-body) .search-field input {
    width: 100%;
    min-width: 0;
    height: 44px;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    color: #181116;
    font-family: var(--pmc-sans);
    font-size: 15px;
    font-weight: 600;
    line-height: 1;
    text-align: left;
    box-shadow: none;
    outline: none;
  }

  body:not(.admin-body) .search-field input::placeholder {
    color: #9b8c92;
    opacity: 1;
  }

  body:not(.admin-body) .search-field input:focus {
    border: 0;
    box-shadow: none;
  }

  body:not(.admin-body) .search-field button {
    min-width: 72px;
    min-height: 44px;
    padding: 0 14px;
    border: 0;
    border-radius: 12px;
    background: #181116;
    color: #fff;
    font: 800 11px/1 var(--pmc-sans);
    cursor: pointer;
  }

  body:not(.admin-body) .search-hint {
    margin: 9px 3px 0;
    color: #94858b;
    font-family: var(--pmc-sans);
    font-size: 9px;
    font-weight: 700;
    letter-spacing: .03em;
    text-align: left;
    text-transform: none;
  }

  body:not(.admin-body) .search-quick-links {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    margin-top: 24px;
    padding-top: 18px;
    border-top: 1px solid #f0dcd9;
  }

  body:not(.admin-body) .search-quick-links span {
    width: 100%;
    color: #87757c;
    font-family: var(--pmc-sans);
    font-size: 9px;
    font-weight: 800;
    letter-spacing: .12em;
    text-transform: uppercase;
  }

  body:not(.admin-body) .search-quick-links a {
    min-height: 36px;
    display: inline-flex;
    align-items: center;
    padding: 8px 12px;
    border: 1px solid #ecd2cf;
    border-radius: 999px;
    background: #fff;
    color: #3c3035;
    font-family: var(--pmc-sans);
    font-size: 11px;
    font-weight: 700;
    text-decoration: none;
  }

  /* Off-canvas primary navigation with a real close control and backdrop. */
  body:not(.admin-body) .mobile-nav-backdrop {
    position: fixed;
    inset: 0;
    z-index: 1240;
    width: 100%;
    height: 100%;
    display: block;
    padding: 0;
    border: 0;
    background: rgba(24, 17, 22, .46);
    backdrop-filter: blur(3px);
    -webkit-backdrop-filter: blur(3px);
  }

  body:not(.admin-body) .category-nav {
    position: fixed;
    inset: 0 auto 0 0;
    z-index: 1250;
    width: min(92vw, 390px);
    height: 100dvh;
    display: block;
    padding: max(88px, calc(68px + env(safe-area-inset-top))) 18px calc(28px + env(safe-area-inset-bottom));
    overflow-y: auto;
    border: 0;
    border-right: 1px solid #f2dedb;
    background: #fffaf9 !important;
    box-shadow: 18px 0 48px rgba(24, 17, 22, .18);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: translate3d(-105%, 0, 0);
    transition: transform .28s cubic-bezier(.16,1,.3,1), opacity .2s ease, visibility .2s;
    isolation: isolate;
  }

  body:not(.admin-body) .category-nav::before {
    content: "Shop & explore";
    position: absolute;
    top: max(24px, calc(12px + env(safe-area-inset-top)));
    left: 20px;
    color: #181116;
    font-family: var(--pmc-sans);
    font-size: 20px;
    font-weight: 800;
    letter-spacing: -.035em;
  }

  body:not(.admin-body) .category-nav.open,
  body:not(.admin-body) .category-nav.active {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translate3d(0, 0, 0);
  }

  body:not(.admin-body) .category-nav .mobile-nav-close {
    position: absolute;
    top: max(14px, env(safe-area-inset-top));
    right: 14px;
    width: 44px;
    height: 44px;
    display: grid;
    place-items: center;
    padding: 0;
    border: 1px solid #efd8d5;
    border-radius: 50%;
    background: #fff;
    color: #181116;
    font: 400 32px/1 var(--pmc-sans);
    cursor: pointer;
  }

  body:not(.admin-body) .category-nav-inner {
    width: 100%;
    max-width: none;
    min-height: 0;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 7px;
    padding: 0;
  }

  body:not(.admin-body) .category-nav-inner a {
    min-height: 48px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 14px;
    border: 1px solid transparent;
    border-radius: 12px;
    color: #2a2025;
    font-family: var(--pmc-sans);
    font-size: 14px;
    font-weight: 750;
    line-height: 1.25;
    text-align: left;
    text-decoration: none;
  }

  body:not(.admin-body) .category-nav-inner a::after {
    content: "›";
    position: static !important;
    inset: auto !important;
    width: auto !important;
    height: auto !important;
    display: inline-block !important;
    margin-left: auto;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    color: #b66f6a;
    box-shadow: none !important;
    font-size: 21px;
    font-weight: 400;
    line-height: 1;
    transform: translateY(-1px) !important;
  }

  body:not(.admin-body) .category-nav-inner a:is(.active, :hover, :focus-visible) {
    background: #f8ddda;
    border-color: #f0c7c3;
    color: #7f403c;
    outline: none;
  }

  body.mobile-nav-open:not(.admin-body) .mobile-dock {
    visibility: hidden;
  }

  /* Collection pages: reduce nested gutters and turn category chips into a
     one-line swipe rail so the introduction remains useful, not oversized. */
  body:not(.admin-body) .collection-hero,
  body:not(.admin-body) .page-hero {
    width: calc(100% - (2 * var(--pmc-mobile-gutter)));
    max-width: none;
    margin: 12px auto 0;
    padding: 10px 10px 16px !important;
    gap: 0;
    border-radius: 20px;
  }

  body:not(.admin-body) .collection-hero-backdrop {
    width: 100%;
    height: clamp(132px, 39vw, 172px);
    margin: 0 0 12px;
    border-radius: 14px;
  }

  body:not(.admin-body) .collection-hero-img {
    width: 100%;
    height: 100%;
    border-radius: 14px;
    object-fit: cover;
    object-position: center;
  }

  body:not(.admin-body) .container.collection-hero-inner {
    width: 100%;
    max-width: none;
    padding: 0 8px;
    margin: 0;
  }

  body:not(.admin-body) .collection-hero .breadcrumbs,
  body:not(.admin-body) .page-hero .breadcrumbs {
    gap: 8px;
    margin: 0 0 14px;
    font-size: 12px;
  }

  body:not(.admin-body) .collection-hero .kicker,
  body:not(.admin-body) .page-hero .kicker {
    font-size: 10px;
    line-height: 1.35;
    letter-spacing: .13em;
  }

  body:not(.admin-body) .collection-hero h1,
  body:not(.admin-body) .page-hero h1 {
    margin: 9px 0 10px;
    font-size: clamp(30px, 8.7vw, 40px);
    line-height: 1.03;
    letter-spacing: -.05em;
    overflow-wrap: anywhere;
  }

  body:not(.admin-body) .collection-hero p,
  body:not(.admin-body) .page-hero p {
    margin: 0;
    font-size: 14px;
    line-height: 1.52;
  }

  body:not(.admin-body) .collection-hero .collection-chips,
  body:not(.admin-body) .page-hero .collection-chips {
    width: auto;
    margin: 14px -8px -2px;
    padding: 0 8px 5px !important;
    display: flex;
    flex-wrap: nowrap;
    gap: 8px;
    overflow-x: auto;
    overscroll-behavior-inline: contain;
    scroll-snap-type: inline proximity;
    scrollbar-width: none;
  }

  body:not(.admin-body) .collection-chips::-webkit-scrollbar {
    display: none;
  }

  body:not(.admin-body) .collection-chips a {
    min-height: 42px;
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    padding: 9px 15px;
    border-radius: 999px;
    font-size: 12px;
    line-height: 1;
    white-space: nowrap;
    scroll-snap-align: start;
  }

  body[data-static-page="shop"] .collection-hero + .section,
  body:not(.admin-body) .collection-hero + .section {
    padding-top: 28px;
  }

  body:not(.admin-body) .shop-layout {
    width: calc(100% - (2 * var(--pmc-mobile-gutter)));
    max-width: none;
    margin-inline: auto;
  }

  body:not(.admin-body) .catalog-main {
    min-width: 0;
  }

  body:not(.admin-body) .catalog-toolbar {
    width: 100%;
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(142px, .9fr);
    align-items: start;
    gap: 10px;
    margin-bottom: 18px;
    padding-bottom: 14px;
  }

  body:not(.admin-body) .catalog-toolbar > div,
  body:not(.admin-body) .catalog-toolbar > label {
    min-width: 0;
    width: 100%;
  }

  body:not(.admin-body) .catalog-toolbar .filter-toggle,
  body:not(.admin-body) .catalog-toolbar .pmc-select-trigger {
    width: 100%;
    min-width: 0;
    min-height: 46px;
    padding-inline: 12px;
    justify-content: center;
    font-size: 12px;
    white-space: nowrap;
  }

  body:not(.admin-body) .catalog-toolbar .pmc-select {
    width: 100%;
    min-width: 0;
  }

  body:not(.admin-body) .catalog-toolbar p {
    margin: 7px 2px 0;
    font-size: 12px;
    line-height: 1.25;
  }

  /* Product filters become a contained modal sheet with a visible close
     control; the old fixed drawer could be trapped behind the bottom dock. */
  body:not(.admin-body) .filter-drawer-backdrop {
    position: fixed;
    inset: 0;
    z-index: 1290;
    width: 100%;
    height: 100%;
    display: block;
    padding: 0;
    border: 0;
    background: rgba(24, 17, 22, .52);
    backdrop-filter: blur(3px);
    -webkit-backdrop-filter: blur(3px);
  }

  body:not(.admin-body) .filter-sidebar {
    position: fixed;
    inset: max(12px, env(safe-area-inset-top)) 12px calc(var(--pmc-mobile-dock-height) + env(safe-area-inset-bottom) + 12px);
    z-index: 1300;
    width: auto;
    max-width: none;
    max-height: none;
    display: block;
    padding: 64px 18px 24px;
    overflow: auto;
    border-radius: 22px !important;
    box-shadow: 0 24px 70px rgba(24, 17, 22, .28);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: translate3d(0, 105%, 0);
    transition: transform .3s cubic-bezier(.16,1,.3,1), opacity .2s ease, visibility .2s;
  }

  body:not(.admin-body) .filter-sidebar.open {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translate3d(0, 0, 0);
  }

  body:not(.admin-body) .filter-sidebar .filter-drawer-close {
    position: absolute;
    top: 12px;
    left: 14px;
    right: 14px;
    width: calc(100% - 28px);
    min-height: 42px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 4px;
    border: 0;
    border-bottom: 1px solid #f2dedb;
    background: transparent;
    color: #181116;
    font: 800 15px/1 var(--pmc-sans);
    cursor: pointer;
  }

  body:not(.admin-body) .filter-sidebar .filter-drawer-close span:last-child {
    font-size: 30px;
    font-weight: 400;
  }

  /* Bottom navigation is viewport-width and compact. Reset the old floating
     pill dimensions that caused clipping at 320–440 px. */
  body:not(.admin-body) .mobile-dock {
    position: fixed;
    inset: auto 10px max(8px, env(safe-area-inset-bottom));
    z-index: 1000;
    width: auto;
    max-width: none;
    height: var(--pmc-mobile-dock-height);
    min-height: var(--pmc-mobile-dock-height);
    display: grid !important;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    align-items: stretch;
    gap: 3px;
    margin: 0;
    padding: 5px;
    border: 1px solid rgba(242, 183, 179, .24) !important;
    border-radius: 21px;
    background: rgba(24, 17, 22, .965) !important;
    transform: none;
    overflow: visible;
    box-shadow: 0 14px 38px rgba(24, 17, 22, .28), 0 3px 12px rgba(24, 17, 22, .2);
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
  }

  body:not(.admin-body) .mobile-dock .dock-item {
    position: relative;
    width: 100%;
    min-width: 0;
    min-height: 52px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    padding: 5px 2px 4px;
    border: 0;
    border-radius: 15px;
    background: transparent !important;
    color: #9e8d95 !important;
    font: inherit;
    line-height: 1;
    transition: background .2s ease, color .2s ease, transform .2s ease;
  }

  body:not(.admin-body) .mobile-dock .dock-item:is(:hover, :focus-visible) {
    background: rgba(255,255,255,.07) !important;
    color: #f6d1ce !important;
    outline: none;
  }

  body:not(.admin-body) .mobile-dock .dock-item.active {
    background: linear-gradient(145deg, rgba(242,183,179,.24), rgba(242,183,179,.1)) !important;
    color: #f7c6c2 !important;
  }

  body:not(.admin-body) .mobile-dock .dock-item.active::after {
    content: "";
    position: absolute;
    bottom: 3px;
    left: 50%;
    width: 18px;
    height: 2px;
    border-radius: 999px;
    background: #f2b7b3;
    transform: translateX(-50%);
  }

  body:not(.admin-body) .mobile-dock .dock-icon {
    position: relative;
    width: 22px;
    height: 22px;
    min-height: 22px;
    display: grid;
    place-items: center;
    font-size: 0;
    line-height: 0;
  }

  body:not(.admin-body) .mobile-dock .dock-icon svg {
    width: 22px;
    height: 22px;
    display: block;
    overflow: visible;
    stroke: currentColor;
  }

  body:not(.admin-body) .mobile-dock .dock-item small {
    color: inherit !important;
    font-family: var(--pmc-sans);
    font-size: 9px;
    font-weight: 650;
    line-height: 1;
    letter-spacing: .01em;
  }

  body:not(.admin-body) .mobile-dock .dock-badge {
    top: -7px;
    right: -9px;
    min-width: 18px;
    height: 18px;
    padding: 0 4px;
    display: grid;
    place-items: center;
    border: 2px solid #181116;
    border-radius: 999px;
    background: #f2b7b3;
    color: #281d21;
    font-size: 9px;
    font-weight: 850;
    line-height: 1;
  }

  /* Homepage hero: reserve clearance for the fixed dock and prevent the full
     viewport slide from becoming excessively tall on modern phones. */
  body[data-static-page="home"] .hero-carousel-section {
    height: clamp(520px, 58svh, 560px);
    min-height: 520px;
    max-height: 560px;
  }

  body[data-static-page="home"] .hero-slide-bg {
    background-position: 64% center;
  }

  body[data-static-page="home"] .hero-slide-overlay {
    background: linear-gradient(to bottom, rgba(255,255,255,.35) 0%, rgba(255,255,255,.74) 38%, rgba(255,255,255,.97) 68%, #fffaf9 100%);
  }

  body[data-static-page="home"] .hero-slide-wrapper {
    align-items: flex-end;
  }

  body[data-static-page="home"] .hero-slide-content {
    padding: 28px 0 40px;
  }

  body[data-static-page="home"] .hero-carousel-dots {
    bottom: 12px;
  }

  body[data-static-page="home"] .hero-carousel-progress {
    bottom: 0;
  }

  body[data-static-page="home"] .trust-marquee-section {
    margin-top: 0;
    padding: 16px 0 18px;
  }

  body[data-static-page="home"] .trust-marquee-container {
    width: 100%;
    padding: 0 12px 5px;
    overflow-x: auto;
    mask-image: none;
    -webkit-mask-image: none;
    scrollbar-width: none;
  }

  body[data-static-page="home"] .trust-marquee-container::-webkit-scrollbar {
    display: none;
  }

  body[data-static-page="home"] .trust-marquee-track {
    gap: 10px;
    animation: none;
    transform: none !important;
  }

  body[data-static-page="home"] .trust-pill {
    width: min(78vw, 300px);
    min-height: 68px;
    flex: 0 0 auto;
    padding: 11px 15px;
    scroll-snap-align: start;
  }

  body:not(.admin-body) :is(input, select, textarea) {
    max-width: 100%;
  }
}

@media (max-width: 420px) {
  body:not(.admin-body) .container.header-main {
    grid-template-columns: 40px minmax(0, 1fr) auto;
    gap: 5px;
  }

  body:not(.admin-body) .v2-header .hamburger {
    width: 40px;
    height: 40px;
  }

  body:not(.admin-body) .header-main > .brand-v2 img {
    width: 36px;
    height: 36px;
    flex-basis: 36px;
  }

  body:not(.admin-body) .header-actions :is(.icon-btn, .cart-link) {
    width: 36px;
    min-width: 36px;
  }

  body:not(.admin-body) .header-main > .brand-v2 strong {
    font-size: clamp(12px, 4vw, 15px);
  }

  body:not(.admin-body) .product-grid.catalog-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
  }

  body:not(.admin-body) .product-card-body {
    padding-inline: 11px;
  }

  body[data-static-page="home"] .hero-slide-content h1 {
    font-size: clamp(27px, 8.4vw, 35px);
  }

  body[data-static-page="home"] .hero-slide-content .hero-actions {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
  }

  body[data-static-page="home"] .hero-slide-content .hero-actions .btn {
    min-width: 0;
    padding-inline: 10px;
    font-size: 11px;
    text-align: center;
  }
}

@media (max-width: 480px) {
  body:not(.admin-body) .category-nav {
    width: 100vw;
    max-width: none;
    border-right: 0;
    box-shadow: none;
  }

  body:not(.admin-body) .search-container {
    margin-top: 4vh;
    padding: 22px 18px;
    border-radius: 20px;
  }

  body:not(.admin-body) .search-field {
    grid-template-columns: 18px minmax(0, 1fr);
    padding-right: 12px;
  }

  body:not(.admin-body) .search-field button {
    grid-column: 1 / -1;
    width: 100%;
  }
}

@media (max-height: 720px) and (max-width: 820px) {
  body[data-static-page="home"] .hero-carousel-section {
    height: max(520px, calc(100svh - 96px));
  }

  body[data-static-page="home"] .hero-slide-content {
    padding-bottom: calc(var(--pmc-mobile-dock-height) + 24px);
  }

  body[data-static-page="home"] .hero-carousel-dots {
    bottom: calc(var(--pmc-mobile-dock-height) + 8px);
  }
}

@media (max-width: 360px) {
  body:not(.admin-body) .header-actions .favourite-header-link {
    display: none;
  }

  body:not(.admin-body) .collection-hero h1,
  body:not(.admin-body) .page-hero h1 {
    font-size: 29px;
  }

  body[data-static-page="home"] .hero-slide-content .hero-actions {
    grid-template-columns: 1fr;
  }

  body[data-static-page="home"] .hero-slide-content .hero-proof .proof-item span {
    display: none;
  }
}