/*
Theme Name: DisneyDress
Description: Premium WooCommerce theme — hero slider, dropdown nav, fixed PayPal checkout, styled reviews.
Version: 2.2.0
Text Domain: disneydress
*/

/*====================================================
  1. CORE SETTINGS, VARIABLES & RESET
=====================================================*/
@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,300;0,400;0,600;1,300;1,400&family=DM+Sans:opsz,wght@9..40,300;9..40,400;9..40,500;9..40,600&family=Italiana&display=swap');

:root {
  --cream: #FAF7F2;
  --warm: #FFFDF9;
  --powder: #E8EEF7;
  --sky: #B8CEE8;
  --dusk: #7A9FC2;
  --navy: #1E3A5F;
  --navy2: #132640;
  --coal: #2C2C2C;
  --mid: #6B6B6B;
  --lite: #A0A0A0;
  --border: rgba(0,0,0,.07);
  --borderS: rgba(0,0,0,.14);
  --gold: #C9A84C;
  --goldPale: #F5EDD4;
  --green: #2D7A35;
  --greenBg: #EBF5EC;
  --red: #C0392B;
  --warnBg: #FFFBF0;
  --warnB: #E8D88A;
  --warnT: #7A6E3A;
  --fDisplay: 'Cormorant Garamond', Georgia, serif;
  --fHero: 'Italiana', Georgia, serif;
  --fBody: 'DM Sans', system-ui, sans-serif;
  --maxW: 1260px;
  --pad: clamp(16px, 3vw, 40px);
  --r: 6px;
  --rLg: 16px;
  --rXl: 24px;
  --ease: .22s cubic-bezier(.4,0,.2,1);
  --spring: .5s cubic-bezier(.34,1.56,.64,1);
  --sh1: 0 2px 8px rgba(30,58,95,.08);
  --sh2: 0 6px 24px rgba(30,58,95,.13);
  --sh3: 0 16px 48px rgba(30,58,95,.18);
  --sh4: 0 32px 80px rgba(30,58,95,.24);
}

*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  scroll-behavior: smooth;
}

body {
  font-family: var(--fBody);
  background: var(--cream);
  color: var(--coal);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img, video {
  max-width: 100%;
  height: auto;
  display: block;
}

a {
  color: inherit;
  text-decoration: none;
  transition: color var(--ease);
}

button, input, select, textarea {
  font-family: var(--fBody);
  font-size: 15px;
}
button:not(:disabled), [type="submit"]:not(:disabled), [type="button"]:not(:disabled) { cursor: pointer; }

::-webkit-scrollbar {
  width: 5px;
  height: 5px;
}
::-webkit-scrollbar-track {
  background: var(--powder);
}
::-webkit-scrollbar-thumb {
  background: var(--sky);
  border-radius: 99px;
}

/* Structural Utilities */
.dd-wrap {
  max-width: var(--maxW);
  margin-inline: auto;
  padding-inline: var(--pad);
}

.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;
}

/*====================================================
  2. GLOBAL COMPONENTS & ANIMATIONS
=====================================================*/
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes float { 0%, 100% { transform: translateY(0) rotate(0); } 40% { transform: translateY(-14px) rotate(8deg); } 70% { transform: translateY(8px) rotate(-5deg); } }

.dd-spin { animation: spin .75s linear infinite; }

/* Buttons & Badges */
.dd-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 13px 26px;
  font-family: var(--fBody);
  font-size: 14px;
  font-weight: 500;
  letter-spacing: .03em;
  border-radius: var(--r);
  cursor: pointer;
  border: 2px solid transparent;
  transition: all var(--ease);
  text-decoration: none;
  white-space: nowrap;
  line-height: 1;
}
.dd-btn:active { transform: scale(.975); }
.dd-btn-primary { background: var(--navy); color: #fff; border-color: var(--navy); }
.dd-btn-primary:hover { background: var(--navy2); border-color: var(--navy2); box-shadow: var(--sh2); color: #fff; }
.dd-btn-outline { background: transparent; color: var(--navy); border-color: var(--navy); }
.dd-btn-outline:hover { background: var(--powder); }
.dd-btn-ghost { background: transparent; color: var(--mid); border-color: var(--borderS); }
.dd-btn-ghost:hover { background: var(--powder); color: var(--navy); }
.dd-btn-gold { background: var(--gold); color: #fff; border-color: var(--gold); }
.dd-btn-gold:hover { background: #b8932e; border-color: #b8932e; }
.dd-btn-white { background: #fff; color: var(--navy); border-color: #fff; }
.dd-btn-white:hover { background: var(--powder); }
.dd-btn-lg { padding: 17px 36px; font-size: 15px; }
.dd-btn-sm { padding: 9px 18px; font-size: 13px; }
.dd-btn-full { width: 100%; justify-content: center; }

.dd-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 10px;
  border-radius: 99px;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .07em;
  text-transform: uppercase;
}
.dd-badge-navy { background: var(--navy); color: #fff; }
.dd-badge-sale { background: var(--red); color: #fff; }
.dd-badge-gold { background: var(--goldPale); color: var(--gold); border: 1px solid rgba(201,168,76,.3); }

/* Section Typographics */
.dd-section-eye {
  font-size: 11px;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--dusk);
  font-weight: 500;
  margin-bottom: 10px;
  display: flex;
  align-items: center;
  gap: 10px;
}
.dd-section-eye::before { content: '✦'; color: var(--gold); }
.dd-section-title {
  font-family: var(--fDisplay);
  font-size: clamp(26px, 3.5vw, 42px);
  font-weight: 300;
  color: var(--navy);
  line-height: 1.15;
  margin-bottom: 6px;
}
.dd-section-title em { font-style: italic; font-weight: 400; }

/* Dynamic Toasts Alert */
#dd-toasts {
  position: fixed;
  bottom: 24px;
  right: 24px;
  z-index: 99980;
  display: flex;
  flex-direction: column;
  gap: 8px;
  pointer-events: none;
}
.dd-toast {
  background: var(--navy);
  color: #fff;
  padding: 13px 18px;
  border-radius: var(--rLg);
  font-size: 14px;
  max-width: 300px;
  box-shadow: var(--sh4);
  display: flex;
  align-items: center;
  gap: 9px;
  pointer-events: all;
  animation: toastIn .38s var(--spring) both;
}
.dd-toast.out { animation: toastOut .28s ease both; }
.dd-toast.success { background: var(--green); }
.dd-toast.error { background: var(--red); }

@keyframes toastIn { from { opacity: 0; transform: translateX(36px) scale(.9); } to { opacity: 1; transform: none; } }
@keyframes toastOut { to { opacity: 0; transform: translateX(36px); } }

/*====================================================
  3. NAVIGATION HEADER & DRAWERS
=====================================================*/
/* Update .dd-header to clip overflowing elements */
.dd-header {
  position: sticky;
  top: 0;
  z-index: 900;
  background: rgba(255, 253, 249, .92);
  backdrop-filter: blur(20px) saturate(1.5);
  -webkit-backdrop-filter: blur(20px) saturate(1.5);
  border-bottom: 1px solid var(--border);
  transition: box-shadow var(--ease);
  /* Do not add overflow: hidden to .dd-header if you use dropdown menus hover */
}
.dd-header.scrolled { box-shadow: var(--sh2); }
.admin-bar .dd-header { top: 32px; }
@media (max-width: 782px) { .admin-bar .dd-header { top: 46px; } }
.dd-header-inner {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  height: 68px;
  gap: 20px;
}

.dd-logo {
  font-family: var(--fHero);
  font-size: 26px;
  color: var(--navy);
  letter-spacing: .02em;
  justify-self: start;
  white-space: nowrap;
}
.dd-logo em { color: var(--dusk); font-style: italic; }

.dd-nav {
  display: flex;
  gap: 2px;
  align-items: center;
}
.dd-nav-item { position: relative; }
.dd-nav-link {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 12px;
  font-weight: 400;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--mid);
  padding: 7px 12px;
  border-radius: var(--r);
  transition: color var(--ease), background var(--ease);
  white-space: nowrap;
  cursor: pointer;
  position: relative;
}
.dd-nav-link::after {
  content: '';
  position: absolute;
  left: 12px;
  right: 12px;
  bottom: 2px;
  height: 2px;
  background: var(--gold);
  border-radius: 2px;
  transform: scaleX(0);
  transform-origin: center;
  transition: transform .25s ease;
}
.dd-nav-link:hover, .dd-nav-link.active {
  color: var(--navy);
  background: var(--powder);
}
.dd-nav-link.active::after { transform: scaleX(1); }

.dd-chevron { transition: transform var(--ease); flex-shrink: 0; }
.dd-has-dropdown:hover .dd-chevron { transform: rotate(180deg); }

.dd-dropdown {
  position: absolute;
  top: calc(100% + 10px);
  left: 0;
  min-width: 220px;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--rLg);
  box-shadow: var(--sh3);
  padding: 7px;
  list-style: none;
  z-index: 500;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-6px) scale(.98);
  transform-origin: top left;
  transition: opacity .22s ease, visibility .22s ease, transform .22s cubic-bezier(.2,.7,.3,1);
  pointer-events: none;
}
.dd-has-dropdown:hover .dd-dropdown,
.dd-has-dropdown:focus-within .dd-dropdown {
  opacity: 1;
  visibility: visible;
  transform: translateY(0) scale(1);
  pointer-events: all;
}
.dd-dropdown::before {
  content: '';
  position: absolute;
  top: -6px;
  left: 20px;
  width: 10px;
  height: 10px;
  background: #fff;
  border-left: 1px solid var(--border);
  border-top: 1px solid var(--border);
  transform: rotate(45deg);
}

.dd-dropdown-item {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 9px 14px;
  font-size: 13px;
  color: var(--coal);
  border-radius: 8px;
  transition: background var(--ease), color var(--ease);
  white-space: nowrap;
  letter-spacing: normal;
  text-transform: none;
}
.dd-dropdown-item::before {
  content: '✦';
  font-size: 8px;
  color: var(--gold);
  opacity: 0;
  flex-shrink: 0;
  transition: opacity var(--ease);
}
.dd-dropdown-item:hover { background: var(--powder); color: var(--navy); }
.dd-dropdown-item:hover::before { opacity: 1; }
.dd-dropdown-item.active { background: var(--powder); color: var(--navy); font-weight: 500; }

.dd-header-actions {
  display: flex;
  align-items: center;
  gap: 4px;
  justify-self: end;
  flex-shrink: 0;
}
.dd-icon-btn {
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  background: none;
  cursor: pointer;
  border-radius: 50%;
  transition: background var(--ease);
  position: relative;
  flex-shrink: 0;
}
.dd-icon-btn svg { display: block; flex-shrink: 0; transition: stroke var(--ease); }
.dd-icon-btn:hover { background: var(--powder); }
.dd-icon-btn:hover svg { stroke: var(--navy)!important; }

.dd-cart-bubble {
  position: absolute;
  top: 2px;
  right: 2px;
  min-width: 17px;
  height: 17px;
  background: var(--navy);
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  border-radius: 99px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 4px;
  line-height: 1;
  pointer-events: none;
  transition: transform var(--spring);
}
.dd-cart-bubble.bump { transform: scale(1.5); }

.dd-hamburger { display: none; }
.dd-sidebar-close-btn { display: none; }

/* Search Drawer — nested inside .dd-header, so top:100% always sits exactly
   below it with no JS calculation and no dependency on a CSS custom property
   surviving minification/caching plugins. */
/* Fix .dd-search-drawer */
.dd-search-drawer {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  z-index: 30;
  background: var(--warm);
  border-bottom: 1px solid var(--border);
  box-shadow: var(--sh3);
  padding: 16px var(--pad);
  
  /* --- HIDE WHEN CLOSED --- */
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateY(-10px);
  transition: opacity .25s ease, transform .25s ease, visibility .25s ease;
}
.dd-search-drawer.open {
  opacity: 1;
  visibility: visible;
  pointer-events: all;
  transform: translateY(0);
}
.dd-search-row {
  max-width: 600px;
  margin-inline: auto;
  display: flex;
  gap: 10px;
}
.dd-search-field {
  flex: 1;
  min-width: 0;
  padding: 11px 16px;
  border: 1.5px solid var(--borderS);
  border-radius: var(--rXl);
  font-size: 14px;
  background: var(--cream);
  color: var(--coal);
  outline: none;
  transition: border-color var(--ease), box-shadow var(--ease);
}
.dd-search-field:focus { border-color: var(--dusk); box-shadow: 0 0 0 3px rgba(122,159,194,.15); }

/* Mobile Navigation Backdrop Drawer */
.dd-mobile-nav {
  position: fixed;
  inset: 0;
  z-index: 1200;
  background: var(--navy);
  transform: translateX(-100%);
  transition: transform .42s cubic-bezier(.4,0,.2,1);
  display: flex;
  flex-direction: column;
  padding: 80px 0 40px;
  overflow-y: auto;
}
.dd-mobile-nav.open { transform: translateX(0); }

.dd-mobile-close {
  position: absolute;
  top: 14px; 
  right: 20px;
  z-index: 1210; 
  background: rgba(255,255,255,.08);
  border: none;
  color: rgba(255,255,255,.9);
  font-size: 28px;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background var(--ease);
}
.dd-mobile-close:hover { background: rgba(255,255,255,.18); }

.dd-mob-link {
  display: block;
  font-family: var(--fDisplay);
  font-size: 26px;
  font-weight: 300;
  color: rgba(255,255,255,.8);
  padding: 12px 32px;
  border-bottom: 1px solid rgba(255,255,255,.06);
  transition: color var(--ease), padding-left var(--ease);
}
.dd-mob-link:hover { color: #fff; padding-left: 40px; }

.dd-mob-group { border-bottom: 1px solid rgba(255,255,255,.06); }
.dd-mob-group-btn {
  width: 100%;
  background: none;
  border: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 32px;
  font-family: var(--fDisplay);
  font-size: 26px;
  font-weight: 300;
  color: rgba(255,255,255,.8);
  cursor: pointer;
  text-align: left;
  gap: 12px;
}
.dd-mob-group-btn span { flex: 1; }
.dd-mob-group-btn svg { flex-shrink: 0; color: rgba(255,255,255,.35); transition: transform var(--ease); }
.dd-mob-group.open .dd-mob-group-btn svg { transform: rotate(180deg); }
.dd-mob-group.open .dd-mob-group-btn { color: #fff; }

.dd-mob-sub { display: none; background: rgba(0,0,0,.2); padding: 6px 0 10px; }
.dd-mob-group.open .dd-mob-sub { display: block; }
.dd-mob-sub-link {
  display: block;
  font-size: 14px;
  color: rgba(255,255,255,.55);
  padding: 9px 32px 9px 50px;
  transition: color var(--ease), padding-left var(--ease);
}
.dd-mob-sub-link:hover { color: #fff; padding-left: 56px; }

/*====================================================
  4. HERO BANNER SYSTEM
=====================================================*/
.dd-hero {
  position: relative;
  overflow: hidden;
  height: clamp(480px, 70vh, 780px);
  background: var(--navy);
}
.dd-hero-slide {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: stretch;
  opacity: 0;
  transition: opacity .9s ease;
  z-index: 1;
}
.dd-hero-slide.active { opacity: 1; z-index: 2; }

.dd-hero-slide-bg {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  transform: scale(1.06);
  transition: transform 7s ease;
}
.dd-hero-slide.active .dd-hero-slide-bg { transform: scale(1); }

.dd-hero-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(105deg, rgba(19,38,64,.88) 0%, rgba(19,38,64,.45) 55%, transparent 100%);
}
.dd-hero-inner {
  width: 100%;
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  position: relative;
  z-index: 2;
  height: 100%;
}
.dd-hero-content { padding: 40px 40px 40px 0; }

.dd-hero-eyebrow {
  font-size: 11px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--sky);
  font-weight: 500;
  margin-bottom: 14px;
  display: flex;
  align-items: center;
  gap: 10px;
  opacity: 0;
  transform: translateY(20px);
  transition: all .7s ease .2s;
}
.dd-hero-slide.active .dd-hero-eyebrow { opacity: 1; transform: translateY(0); }
.dd-hero-eyebrow::before { content: ''; width: 28px; height: 1px; background: var(--sky); }

.dd-hero-title {
  font-family: var(--fHero);
  font-size: clamp(42px, 7vw, 88px);
  color: #fff;
  line-height: 1.02;
  margin-bottom: 18px;
  opacity: 0;
  transform: translateY(30px);
  transition: all .75s ease .35s;
}
.dd-hero-slide.active .dd-hero-title { opacity: 1; transform: translateY(0); }
.dd-hero-title em { color: var(--sky); font-style: italic; }

.dd-hero-desc {
  font-size: 16px;
  color: rgba(255,255,255,.7);
  line-height: 1.7;
  margin-bottom: 32px;
  max-width: 460px;
  opacity: 0;
  transform: translateY(24px);
  transition: all .75s ease .5s;
}
.dd-hero-slide.active .dd-hero-desc { opacity: 1; transform: translateY(0); }

.dd-hero-cta {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
  opacity: 0;
  transform: translateY(20px);
  transition: all .7s ease .65s;
}
.dd-hero-slide.active .dd-hero-cta { opacity: 1; transform: translateY(0); }

.dd-hero-img-panel {
  position: relative;
  height: 100%;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  overflow: hidden;
}
.dd-hero-img-panel::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 70% 70% at 50% 70%, rgba(255,255,255,.08), transparent 70%);
  pointer-events: none;
}
.dd-hero-img-panel img {
  max-height: 95%;
  width: auto;
  object-fit: contain;
  object-position: bottom;
  filter: drop-shadow(0 20px 40px rgba(0,0,0,.4));
  opacity: 0;
  transition: opacity .9s ease .4s;
  position: relative;
  z-index: 1;
}
.dd-hero-slide.active .dd-hero-img-panel img { opacity: 1; }

.dd-hero-dots {
  position: absolute;
  bottom: 28px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 10;
  display: flex;
  gap: 8px;
}
.dd-hero-dot {
  width: 8px;
  height: 8px;
  border-radius: 99px;
  background: rgba(255,255,255,.35);
  border: none;
  cursor: pointer;
  transition: all var(--ease);
  padding: 0;
}
.dd-hero-dot.active { background: #fff; width: 24px; }

.dd-hero-arrows {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 100%;
  z-index: 10;
  display: flex;
  justify-content: space-between;
  padding: 0 20px;
  pointer-events: none;
}
.dd-hero-arrow {
  width: 46px;
  height: 46px;
  border-radius: 50%;
  background: rgba(255,255,255,.12);
  border: 1px solid rgba(255,255,255,.2);
  color: #fff;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: all;
  transition: background var(--ease);
  backdrop-filter: blur(4px);
}
.dd-hero-arrow:hover { background: rgba(255,255,255,.25); }
.dd-hero-wave { position: absolute; bottom: -2px; left: 0; right: 0; z-index: 5; }

/*====================================================
  5. TRUST MARKS & FEATURE STRIPS
=====================================================*/
.dd-trust-strip { background: var(--warm); border-bottom: 1px solid var(--border); }
.dd-trust-grid { display: grid; grid-template-columns: repeat(4, 1fr); }
.dd-trust-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 18px var(--pad);
  border-right: 1px solid var(--border);
}
.dd-trust-item:last-child { border-right: none; }
.dd-trust-icon { font-size: 24px; flex-shrink: 0; }
.dd-trust-label { font-size: 13px; font-weight: 500; color: var(--navy); display: block; margin-bottom: 1px; }
.dd-trust-sub { font-size: 11px; color: var(--lite); }

/* Promo Shipping Module */
.dd-promo-shipping-section {
  background: var(--navy);
  padding: 72px 0;
  position: relative;
  overflow: hidden;
}
.dd-promo-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 60px;
  align-items: center;
}
.dd-promo-features {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}
.dd-promo-card {
  background: rgba(255, 255, 255, .05);
  border: 1px solid rgba(255, 255, 255, .08);
  border-radius: 12px;
  padding: 20px;
}

/* Secondary Quad Trust Grid */
.dd-trust4 {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
  margin-bottom: 16px;
}
.dd-trust4-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
  padding: 12px 6px;
  background: var(--warm);
  border: 1px solid var(--border);
  border-radius: var(--r);
  text-align: center;
  font-size: 11px;
  color: var(--mid);
  line-height: 1.3;
}

/*====================================================
  6. ARCHITECTURAL SHOP PLATFORM
=====================================================*/
.dd-cat-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }
.dd-cat-tile {
  position: relative;
  border-radius: var(--rLg);
  overflow: hidden;
  aspect-ratio: 3/4;
  background: var(--powder);
  display: block;
}
.dd-cat-tile img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s cubic-bezier(.4,0,.2,1); }
.dd-cat-tile:hover img { transform: scale(1.07); }

.dd-cat-tile-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(19,38,64,.75) 0%, transparent 55%);
  display: flex;
  align-items: flex-end;
  padding: 22px;
}
.dd-cat-tile-name { font-family: var(--fDisplay); font-size: 20px; font-weight: 400; color: #fff; line-height: 1.2; }
.dd-cat-tile-count { font-size: 12px; color: rgba(255,255,255,.65); margin-top: 3px; }

/* Grid Structures */
.dd-products-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
  gap: 22px;
}
.dd-products-grid.dd-related,
.related.products ul.products,
.upsells.products ul.products {
  grid-template-columns: repeat(4, 1fr) !important;
  gap: 22px !important;
  list-style: none !important;
  padding: 0 !important;
  margin: 0 !important;
}

.related.products h2, .upsells.products h2 {
  font-family: var(--fDisplay)!important;
  font-size: clamp(22px,3vw,36px)!important;
  font-weight: 300!important;
  color: var(--navy)!important;
  margin-bottom: 24px!important;
}

/* Product Cards Display */
.dd-card {
  background: var(--warm);
  border: 1px solid var(--border);
  border-radius: var(--rLg);
  overflow: hidden;
  position: relative;
  display: flex;
  flex-direction: column;
  transition: transform var(--ease), box-shadow var(--ease), border-color var(--ease);
  opacity: 0;
  transform: translateY(22px);
  animation: cardIn .45s ease forwards;
}
@keyframes cardIn { to { opacity: 1; transform: translateY(0); } }
.dd-card:nth-child(1) { animation-delay: .04s; }
.dd-card:nth-child(2) { animation-delay: .08s; }
.dd-card:nth-child(3) { animation-delay: .12s; }
.dd-card:nth-child(4) { animation-delay: .16s; }
.dd-card:nth-child(5) { animation-delay: .20s; }
.dd-card:nth-child(6) { animation-delay: .24s; }
.dd-card:nth-child(n+7) { animation-delay: .28s; }

.dd-card:hover { transform: translateY(-5px); box-shadow: var(--sh3); border-color: rgba(122,159,194,.28); }

.dd-card-img { position: relative; overflow: hidden; aspect-ratio: 3/4; background: var(--powder); flex-shrink: 0; }
.dd-card-img img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s cubic-bezier(.4,0,.2,1); }
.dd-card:hover .dd-card-img img { transform: scale(1.06); }

.dd-card-img-hover { position: absolute; inset: 0; object-fit: cover; opacity: 0; transition: opacity .4s ease; width: 100%; height: 100%; }
.dd-card:hover .dd-card-img-hover { opacity: 1; }

.dd-card-badges { position: absolute; top: 10px; left: 10px; display: flex; flex-direction: column; gap: 5px; z-index: 2; }
.dd-card-wish {
  position: absolute;
  top: 8px; right: 8px;
  z-index: 3; width: 34px; height: 34px;
  background: rgba(255,255,255,.9);
  backdrop-filter: blur(6px);
  border: none; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  color: var(--lite); opacity: 0; transition: all var(--ease);
}
.dd-card:hover .dd-card-wish { opacity: 1; }
.dd-card-wish:hover { color: #e74c3c; transform: scale(1.15); }
.dd-card-wish.active { opacity: 1; color: #e74c3c; }

.dd-card-quick {
  position: absolute;
  bottom: 0; left: 0; right: 0;
  background: var(--navy); color: #fff; border: none;
  padding: 11px; font-size: 12px; font-weight: 500; letter-spacing: .06em; text-transform: uppercase;
  display: flex; align-items: center; justify-content: center; gap: 6px;
  transform: translateY(100%); transition: transform .28s cubic-bezier(.4,0,.2,1);
}
.dd-card:hover .dd-card-quick { transform: translateY(0); }
.dd-card-quick:hover { background: var(--navy2); }

.dd-card-body { padding: 14px 16px 18px; flex: 1; display: flex; flex-direction: column; }
.dd-card-cat { font-size: 10px; letter-spacing: .1em; text-transform: uppercase; color: var(--dusk); font-weight: 500; margin-bottom: 4px; }
.dd-card-name { font-family: var(--fDisplay); font-size: 17px; font-weight: 400; color: var(--navy); line-height: 1.25; margin-bottom: 8px; flex: 1; }
.dd-card-name a:hover { color: var(--dusk); }
.dd-card-stars { color: var(--gold); font-size: 12px; letter-spacing: 1px; margin-bottom: 8px; }
.dd-card-price-row { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.dd-card-price { font-family: var(--fDisplay); font-size: 19px; font-weight: 600; color: var(--coal); }
.dd-card-price-sale { color: var(--red); }
.dd-card-price-old { font-size: 13px; color: var(--lite); text-decoration: line-through; font-weight: 300; }

/* Product Filters Sidebar */
.dd-shop-layout { display: grid; grid-template-columns: 268px 1fr; gap: 36px; align-items: start; padding: 28px 0 80px; }
.dd-sidebar { position: sticky; top: 82px; background: var(--warm); border: 1px solid var(--border); border-radius: var(--rLg); overflow: hidden; }
.dd-sidebar-head { display: flex; align-items: center; justify-content: space-between; padding: 18px 20px; border-bottom: 1px solid var(--border); }
.dd-sidebar-head h2 { font-family: var(--fDisplay); font-size: 18px; font-weight: 400; color: var(--navy); }
.dd-sidebar-clear { font-size: 12px; color: var(--dusk); background: none; border: none; cursor: pointer; text-decoration: underline; }

.dd-filter { border-bottom: 1px solid var(--border); }
.dd-filter-head { display: flex; align-items: center; justify-content: space-between; padding: 13px 20px; cursor: pointer; user-select: none; }
.dd-filter-head span { font-size: 11px; letter-spacing: .09em; text-transform: uppercase; color: var(--mid); font-weight: 500; }
.dd-filter-arrow { font-size: 13px; color: var(--lite); transition: transform var(--ease); }
.dd-filter.collapsed .dd-filter-arrow { transform: rotate(-90deg); }

.dd-filter-body { padding: 4px 20px 16px; overflow: hidden; max-height: 600px; opacity: 1; transition: max-height .35s ease, opacity .25s ease; }
.dd-filter.collapsed .dd-filter-body { max-height: 0; opacity: 0; padding-bottom: 0; pointer-events: none; }

.dd-fcheck { display: flex; align-items: center; gap: 9px; padding: 6px 4px; cursor: pointer; border-radius: var(--r); transition: background var(--ease); font-size: 13px; color: var(--coal); }
.dd-fcheck:hover { background: var(--powder); }
.dd-fcheck input[type=checkbox] { width: 15px; height: 15px; accent-color: var(--navy); cursor: pointer; flex-shrink: 0; }
.dd-fcheck-count { margin-left: auto; font-size: 11px; color: var(--lite); }

.dd-size-pills { display: flex; flex-wrap: wrap; gap: 6px; }
.dd-fpill {
  min-width: 42px; height: 34px; border: 1.5px solid var(--borderS); border-radius: var(--r);
  background: var(--warm); font-size: 12px; color: var(--coal); display: flex; align-items: center; justify-content: center;
  padding: 0 9px; transition: all var(--ease);
}
.dd-fpill:hover { border-color: var(--dusk); color: var(--navy); }
.dd-fpill.on { background: var(--navy); color: #fff; border-color: var(--navy); }
.dd-fpill input { display: none; }

.dd-color-dots { display: flex; flex-wrap: wrap; gap: 8px; }
.dd-cdot { width: 26px; height: 26px; border-radius: 50%; border: 2px solid transparent; transition: all var(--spring); position: relative; }
.dd-cdot:hover, .dd-cdot.on { box-shadow: 0 0 0 2px var(--cream), 0 0 0 4px var(--dusk); transform: scale(1.12); }
.dd-cdot input { position: absolute; inset: 0; opacity: 0; margin: 0; }

.dd-price-range { padding: 4px 0 8px; }
.dd-range-wrap { position: relative; height: 4px; background: var(--powder); border-radius: 99px; margin: 14px 4px; }
.dd-range-track { position: absolute; height: 100%; background: var(--navy); border-radius: 99px; }
.dd-range-input { position: absolute; top: 50%; transform: translateY(-50%); width: 100%; margin: 0; padding: 0; -webkit-appearance: none; appearance: none; background: transparent; pointer-events: none; }
.dd-range-input::-webkit-slider-thumb { -webkit-appearance: none; pointer-events: all; width: 18px; height: 18px; background: var(--navy); border-radius: 50%; border: 2px solid #fff; box-shadow: var(--sh1); }

.dd-price-inputs { display: flex; gap: 8px; align-items: center; font-size: 12px; color: var(--mid); }
.dd-price-inputs input { flex: 1; padding: 7px 10px; border: 1.5px solid var(--borderS); border-radius: var(--r); font-size: 13px; background: var(--cream); outline: none; transition: border-color var(--ease); }
.dd-price-inputs input:focus { border-color: var(--dusk); }

/* Grid Toolbars */
.dd-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap; padding-bottom: 18px; border-bottom: 1px solid var(--border); margin-bottom: 24px; }
.dd-toolbar-count { font-size: 13px; color: var(--mid); }
.dd-toolbar-count strong { color: var(--coal); font-weight: 500; }
.dd-toolbar-right { display: flex; align-items: center; gap: 10px; }

.dd-sort {
  padding: 8px 32px 8px 12px; border: 1.5px solid var(--borderS); border-radius: var(--r);
  background: var(--warm); font-size: 13px; color: var(--coal); outline: none; appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%236B6B6B' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 10px center; transition: border-color var(--ease);
}
.dd-sort:focus { border-color: var(--dusk); }

.dd-view-btns { display: flex; gap: 4px; }
.dd-view-btn { width: 34px; height: 34px; display: flex; align-items: center; justify-content: center; border: 1.5px solid var(--borderS); border-radius: var(--r); background: var(--warm); color: var(--lite); transition: all var(--ease); }
.dd-view-btn.on { background: var(--navy); color: #fff; border-color: var(--navy); }
.dd-view-btn:hover:not(.on) { background: var(--powder); color: var(--coal); }

.dd-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 18px; }
.dd-chip { display: inline-flex; align-items: center; gap: 5px; background: var(--powder); border: 1px solid var(--sky); color: var(--navy); font-size: 12px; padding: 5px 11px; border-radius: 99px; animation: chipIn .22s var(--spring) both; }
@keyframes chipIn { from { opacity: 0; transform: scale(.8); } to { opacity: 1; transform: scale(1); } }
.dd-chip-rm { background: none; border: none; cursor: pointer; color: var(--dusk); font-size: 15px; line-height: 1; padding: 0; transition: color var(--ease); }
.dd-chip-rm:hover { color: var(--red); }

.dd-pagination { display: flex; align-items: center; justify-content: center; gap: 5px; padding: 48px 0 20px; }
.dd-pagination .page-numbers { width: 40px; height: 40px; display: flex; align-items: center; justify-content: center; border: 1.5px solid var(--borderS); border-radius: var(--r); font-size: 14px; color: var(--mid); transition: all var(--ease); }
.dd-pagination .page-numbers:hover { border-color: var(--navy); color: var(--navy); }
.dd-pagination .page-numbers.current { background: var(--navy); color: #fff; border-color: var(--navy); }
.dd-pagination .page-numbers.dots { border: none; }

/*====================================================
  7. SINGLE PRODUCT DISPLAY LAYOUTS
=====================================================*/
.dd-sp-layout { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap: 56px; align-items: start; padding: 24px 0 80px; }
.dd-sp-gal { position: sticky; top: 82px; }
.dd-sp-main { background: var(--powder); border-radius: var(--rXl); aspect-ratio: 3/4; position: relative; overflow: hidden; cursor: zoom-in; }
.dd-sp-main img { width: 100%; height: 100%; object-fit: cover; transition: transform .55s cubic-bezier(.4,0,.2,1), opacity .22s ease; }
.dd-sp-main:hover img { transform: scale(1.04); }

.dd-sp-badges { position: absolute; top: 14px; left: 14px; z-index: 2; display: flex; flex-direction: column; gap: 6px; }
.dd-sp-zoom {
  position: absolute; bottom: 12px; right: 12px; z-index: 2; width: 36px; height: 36px;
  background: rgba(255,255,255,.9); backdrop-filter: blur(6px); border: 1px solid var(--border);
  border-radius: 50%; display: flex; align-items: center; justify-content: center; color: var(--navy); transition: background var(--ease);
}
.dd-sp-zoom:hover { background: #fff; }

.dd-sp-thumbs { display: grid; grid-template-columns: repeat(5,1fr); gap: 8px; margin-top: 12px; }
.dd-sp-thumb { background: var(--powder); border-radius: 9px; aspect-ratio: 3/4; border: 2px solid transparent; overflow: hidden; padding: 0; transition: border-color var(--ease), transform var(--ease); }
.dd-sp-thumb img { width: 100%; height: 100%; object-fit: cover; }
.dd-sp-thumb:hover { transform: scale(1.04); }
.dd-sp-thumb.on { border-color: var(--navy); }

/* Zoom Lightbox UI */
.dd-lb { display: none; position: fixed; inset: 0; z-index: 99990; background: rgba(0,0,0,.9); backdrop-filter: blur(8px); align-items: center; justify-content: center; }
.dd-lb.open { display: flex; }
.dd-lb img { max-width: 90vw; max-height: 90vh; object-fit: contain; border-radius: var(--rLg); animation: lbIn .3s ease; }
@keyframes lbIn { from { opacity: 0; transform: scale(.88); } to { opacity: 1; transform: scale(1); } }

.dd-lb-close {
  position: fixed; top: 18px; right: 22px; background: rgba(255,255,255,.12);
  color: #fff; font-size: 26px; width: 42px; height: 42px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center; transition: background var(--ease);
}
.dd-lb-close:hover { background: rgba(255,255,255,.25); }

/* Product Details Info Block */
.dd-sp-info { padding-top: 4px; }
.dd-sp-info > * { animation: spIn .5s ease both; }
.dd-sp-info > *:nth-child(1) { animation-delay: .04s; }
.dd-sp-info > *:nth-child(2) { animation-delay: .08s; }
.dd-sp-info > *:nth-child(3) { animation-delay: .12s; }
.dd-sp-info > *:nth-child(4) { animation-delay: .16s; }
.dd-sp-info > *:nth-child(n+5) { animation-delay: .20s; }
@keyframes spIn { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: translateY(0); } }

.dd-sp-cat { font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--dusk); font-weight: 500; margin-bottom: 8px; }
.dd-sp-title { font-family: var(--fDisplay); font-size: clamp(28px, 3.5vw, 42px); font-weight: 300; line-height: 1.12; color: var(--navy); margin-bottom: 10px; }
.dd-sp-title em { font-style: italic; font-weight: 400; }

.dd-sp-rating-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 16px; }
.dd-sp-stars { color: var(--gold); font-size: 14px; letter-spacing: 1.5px; }
.dd-sp-rating-score { font-weight: 500; font-size: 14px; color: var(--coal); }
.dd-sp-rating-link { color: var(--dusk); font-size: 13px; text-decoration: underline; text-underline-offset: 2px; }
.dd-sp-rating-link:hover { color: var(--navy); }

.dd-sp-price-row { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; margin-bottom: 6px; }
.dd-sp-price { font-family: var(--fDisplay); font-size: 36px; font-weight: 600; color: var(--coal); line-height: 1; }
.dd-sp-price-old { font-size: 18px; color: var(--lite); text-decoration: line-through; font-weight: 300; }
.dd-sp-ship-pill { display: inline-flex; align-items: center; gap: 6px; background: var(--greenBg); color: var(--green); font-size: 12px; font-weight: 500; padding: 4px 12px; border-radius: 99px; margin-bottom: 20px; }
.dd-sp-hr { border: none; border-top: 1px solid var(--border); margin: 18px 0; }
.dd-sp-short-desc { font-size: 14px; color: var(--mid); line-height: 1.75; margin-bottom: 16px; }

/* Variations Rules */
.variations_form .variations { border: none; border-collapse: collapse; width: 100%; margin-bottom: 0; }
.variations_form .variations th, .variations_form .variations td { padding: 0; border: none; vertical-align: top; }
.variations_form .variations .label { padding-bottom: 8px; padding-right: 0; }
.variations_form .variations .label label { font-size: 11px; font-weight: 500; color: var(--mid); letter-spacing: .07em; text-transform: uppercase; margin-bottom: 9px; display: block; }
.variations_form .variations .value { padding-bottom: 18px; }
.variations_form .variations select {
  padding: 11px 36px 11px 14px!important; border: 1.5px solid var(--borderS)!important; border-radius: var(--r)!important;
  background-color: var(--warm)!important; font-size: 14px!important; color: var(--coal)!important; outline: none!important; appearance: none; -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%236B6B6B' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E")!important;
  background-repeat: no-repeat!important; background-position: right 12px center!important; width: 100%; max-width: 260px; transition: border-color var(--ease)!important; font-family: var(--fBody)!important;
}
.variations_form .reset_variations { display: inline-block; font-size: 12px; color: var(--dusk)!important; text-decoration: underline; margin-top: 4px; }

.woocommerce-variation.single_variation { padding: 12px 0; font-size: 14px; color: var(--mid); }
.woocommerce-variation-price .price { font-family: var(--fDisplay)!important; font-size: 26px!important; font-weight: 600!important; color: var(--coal)!important; }
.woocommerce-variation-availability .in-stock { color: var(--green)!important; }
.woocommerce-variation-availability .out-of-stock { color: var(--red)!important; }

/* Add to Cart Blocks Setup */
.single-product .quantity { display: flex; align-items: center; margin-right: 12px; }
.single-product form.cart .qty,
.single-product .quantity .qty {
  width: 60px!important; height: 50px!important; padding: 0 8px!important; border: 1.5px solid var(--borderS)!important;
  border-radius: var(--r)!important; font-size: 16px!important; font-weight: 500!important; text-align: center; background: var(--warm)!important;
  color: var(--coal)!important; outline: none!important; font-family: var(--fBody)!important; -moz-appearance: textfield!important; transition: border-color var(--ease)!important;
}
.single-product .quantity .qty:focus { border-color: var(--dusk)!important; }
.single-product .quantity .qty::-webkit-inner-spin-button { -webkit-appearance: none; }

.single-product .single_add_to_cart_button,
.single-product button.single_add_to_cart_button {
  display: inline-flex!important; align-items: center!important; justify-content: center!important; gap: 8px!important;
  padding: 14px 32px!important; background: var(--navy)!important; color: #fff!important; border: 2px solid var(--navy)!important;
  border-radius: var(--r)!important; font-family: var(--fBody)!important; font-size: 15px!important; font-weight: 500!important;
  transition: background var(--ease), transform .12s!important; min-height: 50px!important; line-height: 1!important; text-transform: none!important; margin-left: 10px!important;
  cursor: pointer!important;
}
.single-product .single_add_to_cart_button:disabled { cursor: not-allowed!important; opacity: .6; }
.single-product .single_add_to_cart_button:hover { background: var(--navy2)!important; border-color: var(--navy2)!important; }
.single-product .single_add_to_cart_button:active { transform: scale(.975)!important; }
.single-product form.cart { display: flex; align-items: center; flex-wrap: wrap; gap: 0; margin-bottom: 20px; }
.single-product form.cart .variations + .single_variation_wrap { width: 100%; }
.single-product .single_variation_wrap .woocommerce-variation-add-to-cart { display: flex; align-items: center; flex-wrap: wrap; gap: 0; margin-top: 12px; }

.dd-delivery { display: flex; gap: 12px; align-items: flex-start; background: var(--warm); border: 1px solid var(--border); border-radius: var(--r); padding: 14px 16px; margin-bottom: 12px; font-size: 13px; color: var(--mid); }
.dd-delivery strong { display: block; color: var(--coal); font-weight: 500; margin-bottom: 2px; font-size: 14px; }
.dd-delivery p { margin: 0; }
.dd-disclaimer { background: var(--warnBg); border: 1px solid var(--warnB); border-radius: var(--r); padding: 11px 14px; font-size: 12px; color: var(--warnT); line-height: 1.6; }

/* Sticky Product Bar Module */
.dd-sticky-atc {
  position: fixed; bottom: 0; left: 0; right: 0; z-index: 800;
  background: rgba(255,253,249,.96); backdrop-filter: blur(14px); border-top: 1px solid var(--border);
  padding: 12px var(--pad); display: flex; align-items: center; gap: 16px; flex-wrap: wrap;
  transform: translateY(100%); transition: transform .32s cubic-bezier(.4,0,.2,1); box-shadow: 0 -4px 20px rgba(30,58,95,.1);
}
.dd-sticky-atc.show { transform: translateY(0); }

/* Tabs Architecture */
.dd-tabs { margin-top: 56px; border-top: 1px solid var(--border); }
.dd-tabs-nav { display: flex; overflow-x: auto; scrollbar-width: none; border-bottom: 1px solid var(--border); }
.dd-tabs-nav::-webkit-scrollbar { display: none; }
.dd-tab-btn {
  flex-shrink: 0; background: none; border: none; border-bottom: 2px solid transparent; margin-bottom: -1px;
  padding: 13px 22px; font-size: 12px; font-weight: 400; letter-spacing: .06em; text-transform: uppercase;
  color: var(--lite); cursor: pointer; white-space: nowrap; transition: all var(--ease);
}
.dd-tab-btn:hover { color: var(--coal); }
.dd-tab-btn.on { color: var(--navy); border-bottom-color: var(--navy); font-weight: 500; }

.dd-tab-pane { display: none; padding: 32px 0; max-width: 800px; }
.dd-tab-pane.on { display: block; }
.dd-tab-pane p, .dd-tab-content p { font-size: 14px; color: var(--mid); line-height: 1.78; margin-bottom: 12px; }
.dd-tab-intro { font-size: 14px; color: var(--mid); margin-bottom: 16px; line-height: 1.7; }
.dd-tab-content { font-size: 14px; color: var(--mid); line-height: 1.78; }
.dd-tab-content h2, .dd-tab-content h3 { font-family: var(--fDisplay); font-weight: 300; color: var(--navy); margin: 20px 0 10px; }
.dd-tab-content h2 { font-size: 24px; }
.dd-tab-content h3 { font-size: 20px; }

.dd-size-table { width: 100%; border-collapse: collapse; font-size: 13px; min-width: 460px; }
.dd-size-table th { background: var(--navy); color: #fff; font-size: 11px; letter-spacing: .05em; font-weight: 500; padding: 10px 14px; text-align: left; }
.dd-size-table td { padding: 10px 14px; border-bottom: 1px solid var(--border); color: var(--mid); }
.dd-size-table tr:nth-child(even) td { background: rgba(0,0,0,.018); }

.dd-care-list { display: flex; flex-wrap: wrap; gap: 8px; list-style: none; padding: 0; }
.dd-care-list li { background: var(--warm); border: 1px solid var(--border); border-radius: 99px; padding: 6px 14px; font-size: 12px; color: var(--mid); display: flex; align-items: center; gap: 6px; }
.dd-care-list li::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: var(--dusk); flex-shrink: 0; }

.dd-del-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 28px; max-width: 620px; }
.dd-del-grid h3 { font-size: 15px; font-weight: 500; color: var(--coal); margin-bottom: 12px; }
.dd-del-grid ul { list-style: none; padding: 0; display: flex; flex-direction: column; gap: 9px; }
.dd-del-grid ul li { font-size: 13px; color: var(--mid); padding-left: 18px; position: relative; }
.dd-del-grid ul li::before { content: '✔'; position: absolute; left: 0; color: var(--green); font-size: 11px; top: 1px; }

/*====================================================
  8. CLIENT REVIEW ENGINE COMPONENTS
=====================================================*/
.dd-reviews-section { padding: clamp(48px, 8vw, 80px) 0; background: var(--powder); overflow: hidden; }
.dd-reviews-head { text-align: center; margin-bottom: 40px; }
.dd-reviews-head .dd-section-eye { justify-content: center; }

.dd-reviews-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; width: 100%; }
.dd-review-card { background: var(--warm); border: 1px solid var(--border); border-radius: var(--rLg); padding: 28px; display: flex; flex-direction: column; justify-content: space-between; text-decoration: none; transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease; }
.dd-review-card:hover { transform: translateY(-4px); box-shadow: 0 16px 32px rgba(20,30,60,.08); border-color: var(--sky); }
.dd-review-stars { color: var(--gold); font-size: 15px; letter-spacing: 2px; margin-bottom: 14px; }
.dd-review-text { font-size: 14px; color: var(--mid); line-height: 1.72; margin-bottom: 20px; font-style: italic; flex-grow: 1; }
.dd-review-user { display: flex; align-items: center; gap: 12px; }
.dd-review-avatar { width: 38px; height: 38px; border-radius: 50%; object-fit: cover; background: var(--navy); flex-shrink: 0; }
.dd-review-meta { display: flex; flex-direction: column; line-height: 1.3; }
.dd-review-name { font-size: 13px; color: var(--coal); }
.dd-review-location { font-size: 11px; color: var(--lite); }

/* Checkout fields — was inline jQuery .css(), now real CSS applied via .dd-fc classes */
.dd-fc-text, .dd-fc-select { padding: 11px 14px; border: 1.5px solid rgba(0,0,0,.14); border-radius: 6px; font-size: 14px; background: var(--warm); width: 100%; outline: none; font-family: inherit; box-sizing: border-box; color: var(--coal); display: block; transition: border-color .2s, box-shadow .2s; margin-bottom: 0; }
.dd-fc-select { padding-right: 36px; appearance: none; -webkit-appearance: none; cursor: pointer; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%236B6B6B' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 12px center; }
.dd-fc-text:focus, .dd-fc-select:focus { border-color: var(--sky); box-shadow: 0 0 0 3px rgba(122,159,194,.14); }
.woocommerce-checkout p.form-row { margin-bottom: 14px; }
.woocommerce-checkout p.form-row label { font-size: 11px; font-weight: 500; color: var(--mid); letter-spacing: .06em; text-transform: uppercase; margin-bottom: 6px; display: block; }
.woocommerce-checkout .woocommerce-error { background: #fff5f5; border: 1px solid #C0392B; border-left: 4px solid #C0392B; border-radius: 10px; padding: 14px 18px; margin-bottom: 18px; font-family: inherit; font-size: 14px; }
.woocommerce-checkout .woocommerce-error li { color: #C0392B; font-size: 13px; }
.woocommerce-checkout .woocommerce-invalid .input-text, .woocommerce-checkout .woocommerce-invalid select { border-color: #C0392B; background: #fff8f8; }

/* Image skeleton — lightweight per-image placeholder replacing the old full-page loader */
img[loading="lazy"] { background: linear-gradient(100deg, var(--border) 30%, rgba(255,255,255,.6) 50%, var(--border) 70%); background-size: 200% 100%; animation: dd-shimmer 1.4s ease infinite; }
img[loading="lazy"].dd-loaded { animation: none; background: none; }
@keyframes dd-shimmer { to { background-position: -200% 0; } }

/* Respect reduced-motion preference across all decorative animation */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; scroll-behavior: auto !important; }
}

/* Native browser view-transitions for smoother page navigation (progressive enhancement, Chromium today) */
@view-transition { navigation: auto; }

.dd-reviews-wrap { max-width: 720px; }
.dd-reviews-wrap #comments h2, 
.dd-reviews-wrap .woocommerce-Reviews-title { font-family: var(--fDisplay)!important; font-size: 28px!important; font-weight: 300!important; color: var(--navy)!important; margin-bottom: 6px!important; }
.dd-reviews-wrap .commentlist { list-style: none; padding: 0; margin: 0 0 32px; }
.dd-reviews-wrap .commentlist .comment_container { display: flex; gap: 14px; padding: 20px 0; border-bottom: 1px solid var(--border); }
.dd-reviews-wrap .commentlist .avatar { width: 44px!important; height: 44px!important; border-radius: 50%!important; flex-shrink: 0; }
.dd-reviews-wrap .commentlist .woocommerce-review__author { font-weight: 600; color: var(--coal); font-size: 14px; }
.dd-reviews-wrap .commentlist .woocommerce-review__dash { color: var(--lite); margin: 0 6px; }
.dd-reviews-wrap .commentlist .woocommerce-review__published-date { font-size: 12px; color: var(--lite); }
.dd-reviews-wrap .commentlist .description p { font-size: 14px; color: var(--mid); line-height: 1.72; margin: 0!important; }
.dd-reviews-wrap .woocommerce-noreviews { font-size: 14px; color: var(--mid); padding: 20px; background: var(--warm); border: 1px solid var(--border); border-radius: var(--r); margin-bottom: 24px; }

.dd-reviews-wrap #review_form_wrapper { background: var(--warm); border: 1px solid var(--border); border-radius: var(--rLg); padding: 28px; margin-top: 8px; }
.dd-reviews-wrap #review_form_wrapper h3, 
.dd-reviews-wrap #reply-title { font-family: var(--fDisplay)!important; font-size: 22px!important; font-weight: 400!important; color: var(--navy)!important; margin-bottom: 16px!important; }
.dd-reviews-wrap .stars { display: flex; gap: 4px; margin-bottom: 16px!important; }
.dd-reviews-wrap .stars a { font-size: 28px!important; color: var(--lite)!important; transition: color var(--ease)!important; line-height: 1!important; cursor: pointer; }
.dd-reviews-wrap .stars a:hover, 
.dd-reviews-wrap .stars a.active { color: var(--gold)!important; }
.dd-reviews-wrap p.stars { display: flex; align-items: center; gap: 8px; }
.dd-reviews-wrap p.stars > span { display: flex; gap: 2px; }

.dd-reviews-wrap .comment-form p { margin-bottom: 14px!important; }
.dd-reviews-wrap .comment-form label { display: block!important; font-size: 11px!important; font-weight: 500!important; color: var(--mid)!important; letter-spacing: .06em!important; text-transform: uppercase!important; margin-bottom: 6px!important; }
.dd-reviews-wrap .comment-form input[type=text], 
.dd-reviews-wrap .comment-form input[type=email], 
.dd-reviews-wrap .comment-form textarea, 
.dd-reviews-wrap #comment {
  width: 100%!important; padding: 11px 14px!important; border: 1.5px solid var(--borderS)!important; border-radius: var(--r)!important;
  font-size: 14px!important; background: var(--cream)!important; color: var(--coal)!important; outline: none!important; font-family: var(--fBody)!important;
  transition: border-color var(--ease), box-shadow var(--ease)!important;
}
.dd-reviews-wrap .comment-form input:focus, 
.dd-reviews-wrap .comment-form textarea:focus { border-color: var(--dusk)!important; box-shadow: 0 0 0 3px rgba(122,159,194,.14)!important; }
.dd-reviews-wrap .comment-form textarea { min-height: 110px!important; resize: vertical!important; }
.dd-reviews-wrap .comment-form-author, 
.dd-reviews-wrap .comment-form-email { display: inline-block!important; width: calc(50% - 7px)!important; }
.dd-reviews-wrap .comment-form-author { margin-right: 14px!important; }

.dd-reviews-wrap .form-submit input[type=submit], 
.dd-reviews-wrap #submit { display: inline-flex!important; align-items: center!important; padding: 13px 28px!important; background: var(--navy)!important; color: #fff!important; border: 2px solid var(--navy)!important; border-radius: var(--r)!important; font-family: var(--fBody)!important; font-size: 14px!important; font-weight: 500!important; cursor: pointer!important; transition: background var(--ease)!important; }
.dd-reviews-wrap .form-submit input:hover { background: var(--navy2)!important; }
.dd-reviews-wrap .comment-form-cookies-consent { display: flex!important; align-items: center!important; gap: 8px!important; font-size: 12px!important; color: var(--mid)!important; }

/*====================================================
  9. WOOCOMMERCE CART LAYOUT
=====================================================*/
.dd-cart-layout { display: grid; grid-template-columns: 1fr 360px; gap: 40px; align-items: start; padding: 32px 0 80px; }
.dd-cart-item { display: grid; grid-template-columns: 88px 1fr auto; gap: 18px; align-items: start; padding: 22px 0; border-bottom: 1px solid var(--border); }
.dd-cart-img { width: 88px; height: 110px; object-fit: cover; border-radius: 10px; background: var(--powder); }
.dd-cart-name { font-family: var(--fDisplay); font-size: 17px; font-weight: 400; color: var(--navy); margin-bottom: 4px; }
.dd-cart-name a:hover { color: var(--dusk); }
.dd-cart-meta { font-size: 12px; color: var(--lite); margin-bottom: 8px; }
.dd-cart-rm { font-size: 12px; color: var(--lite); border: none; background: none; cursor: pointer; text-decoration: underline; padding: 0; transition: color var(--ease); }
.dd-cart-rm:hover { color: var(--red); }

.dd-iqty { display: flex; align-items: center; height: 38px; border: 1.5px solid var(--borderS); border-radius: var(--r); overflow: hidden; width: fit-content; margin-top: 8px; }
.dd-iqty-btn { width: 34px; height: 100%; background: none; border: none; font-size: 16px; color: var(--mid); display: flex; align-items: center; justify-content: center; transition: all var(--ease); }
.dd-iqty-btn:hover { background: var(--powder); color: var(--navy); }
.dd-iqty input { width: 46px; height: 100%; border: none; border-left: 1px solid var(--border); border-right: 1px solid var(--border); text-align: center; font-size: 14px; font-weight: 500; background: transparent; color: var(--coal); outline: none; -moz-appearance: textfield; }
.dd-cart-price { font-family: var(--fDisplay); font-size: 20px; font-weight: 500; color: var(--coal); text-align: right; white-space: nowrap; }

/* Totals Summary Card */
.dd-summary { background: var(--warm); border: 1px solid var(--border); border-radius: var(--rLg); padding: 26px; position: sticky; top: 82px; }
.dd-express-checkout { margin-top: 10px; }
.dd-express-checkout:empty { margin-top: 0; }
.dd-express-checkout > * { margin-top: 10px; }
.dd-summary-title { font-family: var(--fDisplay); font-size: 20px; font-weight: 400; color: var(--navy); margin-bottom: 18px; padding-bottom: 14px; border-bottom: 1px solid var(--border); }
.dd-sum-row { display: flex; justify-content: space-between; align-items: center; padding: 9px 0; font-size: 14px; color: var(--mid); }
.dd-sum-row-total { border-top: 1px solid var(--border); margin-top: 10px; padding-top: 16px; font-size: 16px; font-weight: 500; color: var(--coal); }
.dd-sum-total-val { font-family: var(--fDisplay); font-size: 24px; font-weight: 600; color: var(--navy); }
.dd-sum-green { color: var(--green); font-weight: 500; }

.dd-coupon-row { display: flex; gap: 8px; margin: 16px 0; }
.dd-coupon-input { flex: 1; padding: 10px 13px; border: 1.5px solid var(--borderS); border-radius: var(--r); font-size: 13px; background: var(--cream); color: var(--coal); outline: none; transition: border-color var(--ease); }
.dd-ship-progress { background: var(--powder); border-radius: var(--r); padding: 13px; margin-top: 16px; font-size: 13px; }
.dd-ship-bar { height: 5px; background: rgba(0,0,0,.08); border-radius: 99px; margin-top: 8px; overflow: hidden; }
.dd-ship-fill { height: 100%; border-radius: 99px; background: var(--green); transition: width .6s ease; }

/*====================================================
  10. CHECKOUT CONTEXT LAYOUT METRICS
=====================================================*/
.dd-checkout-layout { display: grid; grid-template-columns: 1fr 400px; gap: 48px; align-items: start; padding: 32px 0 80px; }
.dd-co-section { background: var(--warm); border: 1px solid var(--border); border-radius: var(--rLg); padding: 26px; margin-bottom: 18px; }
.dd-co-section-title { font-family: var(--fDisplay); font-size: 20px; font-weight: 400; color: var(--navy); margin-bottom: 18px; padding-bottom: 13px; border-bottom: 1px solid var(--border); display: flex; align-items: center; gap: 10px; }
.dd-co-num { width: 26px; height: 26px; background: var(--navy); color: #fff; border-radius: 50%; font-size: 12px; font-weight: 500; display: flex; align-items: center; justify-content: center; flex-shrink: 0; font-family: var(--fBody); }
.dd-form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }

.woocommerce-checkout .input-text,
.woocommerce-checkout .woocommerce-select,
.woocommerce-checkout select,
.woocommerce-checkout textarea {
  padding: 11px 14px!important; border: 1.5px solid rgba(0,0,0,.14)!important; border-radius: 6px!important;
  font-size: 14px!important; color: #2C2C2C!important; background: #FAF7F2!important; width: 100%!important;
  transition: border-color .22s, box-shadow .22s!important; outline: none!important; font-family: inherit!important; display: block!important;
}
.woocommerce-checkout .input-text:focus, 
.woocommerce-checkout select:focus, 
.woocommerce-checkout textarea:focus { border-color: #7A9FC2!important; box-shadow: 0 0 0 3px rgba(122,159,194,.14)!important; }
.woocommerce-checkout select {
  appearance: none!important; -webkit-appearance: none!important; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%236B6B6B' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E")!important;
  background-repeat: no-repeat!important; background-position: right 12px center!important; padding-right: 36px!important; background-color: #FAF7F2!important;
}
.woocommerce-checkout p.form-row { margin-bottom: 14px!important; }
.woocommerce-checkout p.form-row label { font-size: 11px!important; font-weight: 500!important; color: #6B6B6B!important; letter-spacing: .06em!important; text-transform: uppercase!important; margin-bottom: 6px!important; display: block!important; }
.woocommerce-checkout p.form-row label .required { color: var(--red)!important; }
.woocommerce-checkout .woocommerce-invalid .input-text,
.woocommerce-checkout .woocommerce-invalid select { border-color: var(--red)!important; background: #fff8f8!important; }

/* Review Panel Right Sidebar */
.dd-or { background: var(--warm); border: 1px solid var(--border); border-radius: var(--rLg); padding: 26px; position: sticky; top: 82px; }
.dd-or-title { font-family: var(--fDisplay); font-size: 20px; font-weight: 400; color: var(--navy); margin-bottom: 18px; padding-bottom: 13px; border-bottom: 1px solid var(--border); }
.dd-or-item { display: flex; align-items: center; gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--border); }
.dd-or-item:last-child { border: none; }
.dd-or-img { width: 54px; height: 68px; object-fit: cover; border-radius: 8px; background: var(--powder); flex-shrink: 0; }
.dd-or-qty { width: 19px; height: 19px; background: var(--navy); color: #fff; border-radius: 50%; font-size: 10px; font-weight: 700; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.dd-or-name { font-size: 13px; font-weight: 500; color: var(--coal); flex: 1; }
.dd-or-meta { font-size: 11px; color: var(--lite); margin-top: 2px; }
.dd-or-price { font-size: 14px; font-weight: 500; color: var(--coal); white-space: nowrap; }

/* Progress Flow Tracker Indicator */
.dd-progress { display: flex; align-items: center; justify-content: center; padding: 22px 0 30px; }
.dd-prog-step { display: flex; align-items: center; gap: 8px; font-size: 12px; color: var(--lite); }
.dd-prog-step.done { color: var(--green); }
.dd-prog-step.active { color: var(--navy); }
.dd-prog-num { width: 28px; height: 28px; border-radius: 50%; border: 2px solid var(--borderS); display: flex; align-items: center; justify-content: center; font-size: 11px; font-weight: 600; }
.dd-prog-step.done .dd-prog-num { border-color: var(--green); background: var(--green); color: #fff; }
.dd-prog-step.active .dd-prog-num { border-color: var(--navy); background: var(--navy); color: #fff; }
.dd-prog-line { flex: 1; height: 1px; background: var(--border); margin: 0 8px; min-width: 24px; }
.dd-prog-line.done { background: var(--green); }

/* Payment Options Engine Gateway Scripts */
#payment { background: transparent!important; border: none!important; border-radius: 0!important; }
.woocommerce-checkout-payment ul.payment_methods,
#payment ul.payment_methods { list-style: none !important; padding: 0 !important; margin: 0 0 20px 0 !important; display: flex; flex-direction: column; gap: 10px; }
.woocommerce-checkout-payment ul.payment_methods li,
#payment ul.payment_methods li.payment_method { background: var(--warm); border: 1.5px solid var(--borderS); border-radius: var(--rLg); transition: border-color var(--ease); margin-bottom: 15px !important; line-height: 2 !important; }
#payment ul.payment_methods li input[type=radio] { width: 16px; height: 16px; accent-color: var(--navy); flex-shrink: 0; cursor: pointer; vertical-align: middle; margin-right: 10px; }
#payment ul.payment_methods li label { display: flex!important; align-items: center!important; padding: 14px 18px!important; cursor: pointer; font-size: 14px!important; font-weight: 500!important; color: var(--coal)!important; margin: 0!important; user-select: none; }
#payment ul.payment_methods li label img { max-height: 24px!important; width: auto!important; margin-left: 8px!important; vertical-align: middle!important; }

#payment .payment_box { padding: 14px 18px 18px!important; background: var(--cream)!important; border-top: 1px solid var(--border)!important; font-size: 13px!important; color: var(--mid)!important; }
/* Only let PayPal's smart-button box overflow its box when that gateway is
   actually selected — applying this unconditionally was overriding the
   plugin's own mechanism for hiding non-selected payment methods, which is
   what caused a PayPal button/box to stay visible while another gateway
   (e.g. Debit/Credit Card) was selected. */
#payment .payment_method_ppcp-gateway:has(input:checked) .payment_box,
#payment .payment_method_paypal:has(input:checked) .payment_box,
#payment .payment_method_woocommerce_paypal_payments:has(input:checked) .payment_box { overflow: visible!important; }

.paypal-button-container, #ppc-button, #ppc-button-checkout, [id^="paypal-button"], .wcppcp-button-wrapper, .ppc-button-wrapper, [id^="ppc-button-"] { min-height: 44px!important; width: 100%!important; max-width: 100%!important; margin-top: 8px!important; overflow: visible!important; }
.paypal-buttons > iframe.component-frame, .zoid-outlet > iframe.component-frame { display: block!important; min-height: 44px!important; width: 100%!important; max-width: 100%!important; visibility: visible!important; opacity: 1!important; position: relative!important; z-index: 1!important; }
.card-fields-container, .ppcp-card-fields-container, .paypal-hosted-fields-container { display: block!important; width: 100%!important; }

.woocommerce-checkout-payment .place-order,
#payment .place-order { padding: 10px 0 0 0 !important; margin: 0 !important; background: transparent!important; border-top: none!important; }
#payment #place_order, 
#payment button#place_order, 
#payment .button.alt#place_order { align-items: center!important; justify-content: center!important; gap: 8px!important; width: 100%!important; padding: 17px 24px!important; background: var(--navy)!important; color: #fff!important; border: 2px solid var(--navy)!important; border-radius: var(--r)!important; font-family: var(--fBody)!important; font-size: 16px!important; font-weight: 500!important; cursor: pointer!important; transition: background var(--ease)!important; min-height: 54px!important; text-transform: none!important; }
#payment #place_order:not([style*="display: none"]):not([style*="display:none"]):not(.hidden),
#payment button#place_order:not([style*="display: none"]):not([style*="display:none"]):not(.hidden),
#payment .button.alt#place_order:not([style*="display: none"]):not([style*="display:none"]):not(.hidden) { display: flex!important; }
#payment #place_order:hover { background: var(--navy2)!important; border-color: var(--navy2)!important; }
#payment .terms { display: flex!important; align-items: flex-start!important; gap: 9px!important; font-size: 12px!important; color: var(--mid)!important; margin-bottom: 14px!important; }

/*====================================================
  11. ACCOUNT PROFILE ARCHITECTURE (LOGIN/LOST PASS)
=====================================================*/
.woocommerce-account #customer_login, 
.woocommerce-lost-password .woocommerce { max-width: 1100px; margin: 0 auto; }
.woocommerce-account #customer_login form, 
.woocommerce-lost-password form { background: #fff; border: 1px solid #e8e8e8; border-radius: 8px; padding: 35px; }
.woocommerce-account #customer_login h2, 
.woocommerce-lost-password h2 { font-size: 34px; margin-bottom: 30px; color: #222; font-weight: 600; }
.woocommerce-account #customer_login p, 
.woocommerce-lost-password p { margin-bottom: 20px; }
.woocommerce-account #customer_login label, 
.woocommerce-lost-password label { display: block; font-size: 15px; font-weight: 600; color: #333; margin-bottom: 8px; }
.woocommerce-account #customer_login .required, 
.woocommerce-lost-password .required { color: #e53935; }

.woocommerce-account #customer_login input[type=text], 
.woocommerce-account #customer_login input[type=email], 
.woocommerce-account #customer_login input[type=password], 
.woocommerce-account #customer_login input[type=tel], 
.woocommerce-account #customer_login input[type=number], 
.woocommerce-account #customer_login textarea, 
.woocommerce-account #customer_login select, 
.woocommerce-lost-password input[type=text], 
.woocommerce-lost-password input[type=email], 
.woocommerce-lost-password input[type=password], 
.woocommerce-lost-password textarea, 
.woocommerce-lost-password select { width: 100%; height: 52px; border: 1px solid #d9d9d9; border-radius: 6px; padding: 0 15px; font-size: 15px; transition: .3s; background: #fff; }
.woocommerce-account #customer_login textarea, 
.woocommerce-lost-password textarea { height: 140px; padding: 15px; }

.woocommerce-account #customer_login input:focus, 
.woocommerce-account #customer_login textarea:focus, 
.woocommerce-account #customer_login select:focus, 
.woocommerce-lost-password input:focus, 
.woocommerce-lost-password textarea:focus, 
.woocommerce-lost-password select:focus { outline: none; border-color: #23426b; box-shadow: 0 0 0 3px rgba(35,66,107,.12); }

.woocommerce-account #customer_login button.button, 
.woocommerce-account #customer_login input.button, 
.woocommerce-lost-password button.button, 
.woocommerce-lost-password input.button { background: #23426b; color: #fff; border: none; border-radius: 5px; padding: 14px 30px; font-size: 15px; font-weight: 600; cursor: pointer; transition: .3s; }
.woocommerce-account #customer_login button.button:hover, 
.woocommerce-account #customer_login input.button:hover, 
.woocommerce-lost-password button.button:hover, 
.woocommerce-lost-password input.button:hover { background: #1a3150; color: #fff; }

#customer_login { display: flex; gap: 50px; }
#customer_login .col-1, #customer_login .col-2 { width: 50%; }
.woocommerce-ResetPassword { max-width: 650px; margin: auto; }

.woocommerce-form__label-for-checkbox { display: flex; align-items: center; gap: 8px; }
.woocommerce-form__label-for-checkbox input { width: auto; margin: 0; }

.password-input { position: relative; display: block; }
.password-input input { padding-right: 45px; }
.show-password-input { position: absolute; top: 50%; right: 15px; transform: translateY(-50%); background: none; border: none; cursor: pointer; }

.woocommerce-account #customer_login a, 
.woocommerce-lost-password a { color: #23426b; }
.woocommerce-account #customer_login a:hover, 
.woocommerce-lost-password a:hover { color: #0e2d57; }

.woocommerce-privacy-policy-text { font-size: 14px; color: #666; line-height: 1.7; text-align: center; margin-top: 10px; }

/*====================================================
  12. CORE SYSTEM ALERT MESSAGES
=====================================================*/
.woocommerce-message, 
.woocommerce-info, 
.woocommerce-error,
.woocommerce-account .woocommerce-error,
.woocommerce-account .woocommerce-message,
.woocommerce-account .woocommerce-info,
.woocommerce-lost-password .woocommerce-error,
.woocommerce-lost-password .woocommerce-message,
.woocommerce-lost-password .woocommerce-info {
  display: flex !important; flex-direction: row !important; align-items: center !important; justify-content: space-between !important;
  flex-wrap: wrap !important; gap: 14px !important; padding: 16px 20px !important; margin: 20px auto !important; max-width: var(--maxW) !important;
  border-radius: var(--rLg) !important; font-family: var(--fBody) !important; font-size: 14px !important; line-height: 1.5 !important; box-shadow: var(--sh1) !important;
}

.woocommerce-message {
  background-color: var(--greenBg) !important; border: 1px solid rgba(45, 122, 53, 0.15) !important;
  border-left: 4px solid var(--green) !important; color: var(--coal) !important;
}
.woocommerce-message .button.wc-forward {
  display: inline-flex !important; align-items: center !important; justify-content: center !important; padding: 8px 16px !important;
  background: var(--navy) !important; color: #fff !important; border-radius: var(--r) !important; font-size: 13px !important;
  font-weight: 500 !important; text-transform: none !important; transition: background var(--ease) !important;
}
.woocommerce-message .button.wc-forward:hover { background: var(--navy2) !important; }

/*====================================================
  13. FOOTER MARKUP MATRIX
=====================================================*/
.dd-footer { background: var(--navy); color: rgba(255,255,255,.6); padding: 64px 0 0; position: relative; overflow: hidden; }
.dd-footer::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 1px; background: linear-gradient(90deg, transparent, rgba(255,255,255,.12) 40%, rgba(201,168,76,.5) 60%, transparent); }
.dd-footer-grid { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 48px; padding-bottom: 48px; }
.dd-footer-brand { font-family: var(--fHero); font-size: 30px; color: #fff; margin-bottom: 12px; }
.dd-footer-brand em { color: var(--sky); font-style: italic; }
.dd-footer-tagline { font-size: 13px; line-height: 1.7; max-width: 270px; margin-bottom: 20px; }
.dd-footer-col-title { font-size: 11px; text-transform: uppercase; letter-spacing: .1em; font-weight: 500; color: #fff; margin-bottom: 14px; }
.dd-footer-links { list-style: none; display: flex; flex-direction: column; gap: 9px; }
.dd-footer-links a { font-size: 13px; color: rgba(255,255,255,.55); }
.dd-footer-links a:hover { color: #fff; }
.dd-footer-socials { display: flex; gap: 8px; margin-top: 18px; }

.dd-social {
  width: 36px; height: 36px; background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.1);
  border-radius: 50%; display: flex; align-items: center; justify-content: center; color: rgba(255,255,255,.55); transition: all var(--ease);
}
.dd-social:hover { background: rgba(255,255,255,.15); color: #fff; }
.dd-footer-bottom { border-top: 1px solid rgba(255,255,255,.07); padding: 20px 0; display: flex; justify-content: space-between; align-items: center; font-size: 12px; color: rgba(255,255,255,.32); flex-wrap: wrap; gap: 8px; }

.dd-newsletter-bar { background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.08); border-radius: var(--rLg); padding: 32px 36px; display: flex; align-items: center; justify-content: space-between; gap: 28px; margin-bottom: 52px; flex-wrap: wrap; }
.dd-newsletter-form { display: flex; gap: 9px; flex-wrap: wrap; }
.dd-newsletter-input { padding: 11px 16px; border: 1.5px solid rgba(255,255,255,.15); border-radius: var(--r); background: rgba(255,255,255,.06); color: #fff; font-size: 14px; outline: none; min-width: 200px; transition: border-color var(--ease); }
.dd-newsletter-input::placeholder { color: rgba(255,255,255,.4); }

.dd-reveal { opacity: 0; transform: translateY(22px); transition: opacity .6s ease, transform .6s ease; }
.dd-reveal.in { opacity: 1; transform: none; }


/*========================================================================================================
  14. CONSOLIDATED MEDIA QUERY SYSTEM
========================================================================================================*/

/* --- Tablet / Desktop Compression Breakpoint --- */
@media(max-width: 1080px) {
  .dd-shop-layout { grid-template-columns: 240px 1fr; gap: 24px; }
  .dd-cart-layout { grid-template-columns: 1fr 320px; }
  .dd-checkout-layout { grid-template-columns: 1fr 360px; }
  .dd-footer-grid { grid-template-columns: 1fr 1fr; gap: 32px; }
  .dd-trust4 { grid-template-columns: repeat(2, 1fr); }
  .dd-products-grid.dd-related,
  .related.products ul.products,
  .upsells.products ul.products { grid-template-columns: repeat(3, 1fr) !important; }
}

/* --- Small Tablet Responsive Stack Breakpoint --- */
@media(max-width: 900px) {
  .dd-nav { display: none !important; }
  .dd-hamburger { display: flex !important; }
  .dd-header-inner { grid-template-columns: 1fr auto !important; }
  
  .dd-hero-inner { grid-template-columns: 1fr; }
  .dd-hero-img-panel { display: none; }
  
  .dd-cat-grid, .dd-trust-grid { grid-template-columns: repeat(2, 1fr); }
  .dd-trust-item:nth-child(2) { border-right: none; }
  
  .dd-shop-layout, .dd-sp-layout, .dd-cart-layout, .dd-checkout-layout, .dd-footer-grid, .dd-promo-grid { grid-template-columns: 1fr; gap: 40px; }
  .dd-sp-gal, .dd-summary, .dd-or { position: static; }
  
  /* Sidebar Mobile Drawer */
  .dd-sidebar { display: none; position: static; }
  .dd-sidebar.mobile-open {
    display: block !important; position: fixed !important; inset: 0 !important;
    z-index: 2000 !important; background: var(--warm) !important; max-height: 100vh !important;
    overflow-y: auto !important; border-radius: 0; padding-bottom: 60px;
  }
  .dd-sidebar-head { display: flex; align-items: center; justify-content: space-between; padding: 16px 20px; border-bottom: 1px solid var(--border); background: #fff; position: sticky; top: 0; z-index: 10; }
  .dd-sidebar-close-btn { display: flex; align-items: center; justify-content: center; background: var(--powder); border: none; color: var(--navy); font-size: 24px; line-height: 1; width: 36px; height: 36px; border-radius: 50%; order: 3; }
  .dd-sidebar-clear { order: 2; margin-left: auto; margin-right: 14px; }
  .dd-filter-mobile-btn { display: inline-flex !important; }

  /* Related Grids Mobile Shift */
  .dd-products-grid.dd-related,
  .related.products ul.products,
  .upsells.products ul.products { grid-template-columns: repeat(2, 1fr) !important; }

  /* Slider Swipe Review Module Overlay */
  .dd-reviews-section .dd-wrap { padding-inline: 0; }
  .dd-reviews-head { padding-inline: var(--pad); }
  .dd-reviews-grid { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; -webkit-overflow-scrolling: touch; padding: 4px var(--pad) 24px var(--pad); gap: 16px; }
  .dd-reviews-grid::-webkit-scrollbar { display: none; }
  .dd-review-card { flex: 0 0 290px; scroll-snap-align: center; box-shadow: var(--sh1); }
}

/* --- Mobile Account Split Panel Column Breakpoint --- */
@media (max-width: 767px) {
  #customer_login { flex-direction: column; gap: 30px; }
  #customer_login .col-1, #customer_login .col-2 { width: 100%; }
  .woocommerce-account #customer_login form, .woocommerce-lost-password form { padding: 25px; }
  .woocommerce-account #customer_login h2, .woocommerce-lost-password h2 { font-size: 28px; }
}

/* --- Standard Smartphone Scale Breakpoint --- */
@media(max-width: 600px) {
  .dd-hero-title { font-size: 36px; }
  .dd-products-grid { grid-template-columns: repeat(2, 1fr); gap: 12px; }
  .dd-cat-grid { grid-template-columns: repeat(2, 1fr); }
  .dd-cart-item { grid-template-columns: 72px 1fr auto; }
  .dd-form-grid, .dd-del-grid, .dd-footer-grid { grid-template-columns: 1fr; }
  .dd-sp-thumbs { grid-template-columns: repeat(4, 1fr); }
  
  /* Horizontal Swiping Snap Row for Trust Module */
  .dd-trust-grid { display: flex !important; overflow-x: auto !important; scroll-snap-type: x mandatory; scrollbar-width: none; padding: 4px 0; gap: 8px; }
  .dd-trust-grid::-webkit-scrollbar { display: none; }
  .dd-trust-item { flex: 0 0 calc(50% - 4px); scroll-snap-align: start; border-right: 1px solid var(--border) !important; border-bottom: none !important; padding: 12px 8px; justify-content: center; }
  .dd-trust-item:last-child { border-right: none !important; }

  /* Interactive Step Progress Circles adjustments */
  .dd-progress { padding: 16px 4px 24px !important; width: 100% !important; justify-content: space-between !important; }
  .dd-prog-step { flex-direction: column !important; align-items: center !important; flex: 0 0 auto !important; }
  .dd-prog-line { min-width: 15px !important; flex-grow: 1 !important; margin: 0 4px !important; align-self: center !important; transform: translateY(-1px) !important; }
  .dd-prog-num { width: 26px !important; height: 26px !important; font-size: 11px !important; }

  /* Review Comment Input Block Columns */
  .dd-reviews-wrap .comment-form-author, 
  .dd-reviews-wrap .comment-form-email { width: 100%!important; display: block!important; }
  .dd-reviews-wrap .comment-form-author { margin-right: 0!important; }

  /* Single Product Buy Grid alignment fix */
  .single-product col.cart,
  .single-product form.cart { display: flex !important; flex-direction: row !important; align-items: center !important; justify-content: space-between !important; width: 100% !important; gap: 12px !important; margin-bottom: 24px !important; }
  .single-product .quantity { margin-right: 0 !important; flex-shrink: 0 !important; }
  .single-product .single_add_to_cart_button,
  .single-product button.single_add_to_cart_button { margin-left: 0 !important; flex: 1 !important; width: auto !important; }

  /* Size Swatches TD Grid adjustments */
  .variations_form .variations td.value { padding-inline: 4px !important; }
  .variations_form .variations { width: 100% !important; display: block !important; }
}

/* --- Tiny Screens / Legacy Display Breakpoint --- */
@media(max-width: 480px) {
  .woocommerce-message { flex-direction: column !important; align-items: flex-start !important; padding: 16px !important; }
  .woocommerce-message .button.wc-forward { width: 100% !important; align-self: fill !important; }
  .dd-promo-features { grid-template-columns: 1fr; gap: 12px; }
}