/* ============================================================
   HOUSE OF WEAR 12 | FINAL CLEAN CSS
   Replace the ENTIRE previous custom CSS; do not append.
   Pairs with HOUSE12_FINAL.js. Zid native menus remain untouched.
   ============================================================ */

:root {
  --hw-black: #111111;
  --hw-white: #ffffff;
  --hw-bg: #f8f7f5;
  --hw-border: #e9e6e1;
  --hw-gold: #c2a574;
}

body {
  background-color: var(--hw-bg);
  color: var(--hw-black);
  -webkit-font-smoothing: antialiased;
}

body, button, input, select, textarea {
  font-family: "Tajawal", "Cairo", Tahoma, sans-serif;
}

/* -------------------- HEADER -------------------- */
.hw12-header,
header.site-header,
header.main-header,
header.store-header {
  background: #fff !important;
  border-bottom: 1px solid #ece8e3 !important;
  box-shadow: 0 3px 18px rgba(0, 0, 0, .035) !important;
}

.hw12-header {
  padding-top: 12px;
  padding-bottom: 12px;
  position: sticky !important;
  top: 0;
  z-index: 999;
}

.hw12-header a {
  color: var(--hw-black);
  text-decoration: none;
}

.hw12-header nav a { font-size: 13px; font-weight: 600; }

.hw12-header a.hw12-nav-link {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-height: 42px !important;
  padding: 10px 20px !important;
  margin: 0 3px !important;
  border: 1px solid transparent !important;
  border-radius: 12px !important;
  background: #f6f6f6 !important;
  color: #222 !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  line-height: 1.5 !important;
  text-decoration: none !important;
  white-space: nowrap;
  box-sizing: border-box;
  transition: background .2s ease, color .2s ease !important;
}

.hw12-header a.hw12-nav-link.hw12-nav-active,
.hw12-header a.hw12-nav-link:hover {
  background: var(--hw-black) !important;
  color: #fff !important;
  border-color: var(--hw-black) !important;
}

.hw12-header a.hw12-nav-link.hw12-nav-active {
  box-shadow: 0 4px 12px rgba(0,0,0,.10) !important;
}

.hw12-header a.hw12-nav-link:focus-visible {
  outline: 2px solid var(--hw-gold) !important;
  outline-offset: 3px;
}

.hw12-header .hw12-left-actions,
.hw12-header .header-actions,
.hw12-header [class*="header-actions"],
.hw12-header [class*="nav-actions"] {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
}

.hw12-header a.hw12-icon-btn,
.hw12-header button.hw12-icon-btn {
  box-sizing: border-box !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex: 0 0 42px !important;
  width: 42px !important;
  height: 42px !important;
  min-width: 42px !important;
  min-height: 42px !important;
  padding: 0 !important;
  border: 1px solid #ece8e3 !important;
  border-radius: 12px !important;
  background: #fff !important;
  color: var(--hw-black) !important;
  box-shadow: 0 6px 18px rgba(0,0,0,.04) !important;
  text-decoration: none !important;
  transition: background .25s ease, color .25s ease !important;
}

.hw12-header :is(a, button).hw12-icon-btn:hover {
  background: var(--hw-black) !important;
  color: #fff !important;
  border-color: var(--hw-black) !important;
}

.hw12-header .hw12-icon-btn :is(svg, i) {
  width: 20px !important;
  height: 20px !important;
}

/* Store logo: do not mistake its image link for a square icon action. */
.hw12-header a.hw12-brand-link {
  width: auto !important;
  height: auto !important;
  min-width: 0 !important;
  min-height: 0 !important;
  padding: 0 !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}
.hw12-header img.hw12-brand-image {
  display: block !important;
  width: auto !important;
  height: auto !important;
  max-height: 66px !important;
  max-width: 170px !important;
  object-fit: contain !important;
}

/* Preserve the original theme-agnostic card finishing on non-home pages. */
.hw12-product-card, .product-card, .product-item {
  background: #fff !important;
  border: 1px solid var(--hw-border) !important;
  border-radius: 14px !important;
  overflow: hidden;
  box-shadow: 0 4px 18px rgba(0,0,0,.025);
}

.hw12-product-card :is(h3,h4),
.product-card :is(h3,h4),
.product-item :is(h3,h4) {
  color: #171717 !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  line-height: 1.8 !important;
}

.hw12-product-card a, .product-card a, .product-item a {
  text-decoration: none;
}

.hw12-product-card :is(.btn-primary, .product-card-add-to-cart, .btn-product-card-select-variant),
.product-card :is(.btn-primary, .product-card-add-to-cart, .btn-product-card-select-variant),
.product-item :is(.btn-primary, .product-card-add-to-cart, .btn-product-card-select-variant) {
  background: #111 !important;
  color: #fff !important;
  border: 1px solid #111 !important;
  border-radius: 9px !important;
  font-weight: 700 !important;
  min-height: 44px;
}

input[type="text"], input[type="search"], input[type="email"],
input[type="tel"], select { border-radius: 9px; }

input:focus-visible, select:focus-visible, textarea:focus-visible {
  outline: 2px solid #b5a083;
  outline-offset: 2px;
}

.products-section h2, .featured-products h2, .section-title {
  color: #171717;
  font-weight: 700;
  letter-spacing: -.2px;
}

/* -------------------- PRODUCT GRIDS -------------------- */
.products-grid, .products-list, .product-grid, .product-list {
  gap: 14px;
}

/* Classes found/assigned by the existing V6 JavaScript. */
.hw12-v6-grid {
  display: grid !important;
  grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
  align-items: stretch !important;
  gap: 14px !important;
  width: 100%;
}

.hw12-v6-grid > .hw12-v6-cell {
  float: none !important;
  flex: none !important;
  width: auto !important;
  min-width: 0 !important;
  max-width: none !important;
  margin: 0 !important;
  padding: 0 !important;
}

.hw12-shop-card {
  box-sizing: border-box !important;
  background: #fff !important;
  border: 1px solid var(--hw-border) !important;
  border-radius: 13px !important;
  overflow: hidden !important;
  padding: 0 0 10px !important;
  box-shadow: 0 3px 14px rgba(0,0,0,.035) !important;
  transition: transform .25s ease, box-shadow .25s ease !important;
}

.hw12-v6-grid .hw12-shop-card {
  display: flex !important;
  flex-direction: column !important;
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  height: 100% !important;
  margin: 0 !important;
}

.hw12-shop-card img.hw12-shop-image {
  box-sizing: border-box !important;
  display: block !important;

  width: 100% !important;
  max-width: 100% !important;

  height: auto !important;
  aspect-ratio: 3 / 4 !important;

  object-fit: contain !important;
  object-position: center center !important;

  padding: 6px !important;
  margin: 0 auto !important;

  background: #fff !important;
  border-radius: 0 !important;

  transition: transform .4s ease !important;
}

/* -------------------- PRODUCT DETAILS: IVORY + GOLD -------------------- */
/* The name and price stay inside their original Zid card and retain their text. */
.hw12-v6-grid .hw12-v6-info {
  box-sizing: border-box !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: stretch !important;
  justify-content: flex-start !important;
  gap: 7px !important;
  width: calc(100% - 24px) !important;
  height: auto !important;
  min-height: 83px !important;
  margin: 8px 12px 0 !important;
  padding: 11px 12px 10px !important;
  background: #faf8f4 !important;
  border: 1px solid #ede5d8 !important;
  border-inline-start: 3px solid var(--hw-gold) !important;
  border-radius: 10px !important;
}

/* Remove inherited empty spacing from Zid's title/price wrappers. */
.hw12-v6-grid :is(.hw12-v6-title-host, .hw12-v6-price-host) {
  box-sizing: border-box !important;
  height: auto !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* Fallback in any card not grouped under .hw12-v6-info yet. */
.hw12-shop-card .hw12-shop-title {
  box-sizing: border-box !important;
  display: -webkit-box !important;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
  width: calc(100% - 28px) !important;
  min-height: 0 !important;
  margin: 9px 14px 6px !important;
  padding: 9px 10px !important;
  border-inline-start: 3px solid var(--hw-gold) !important;
  border-radius: 8px !important;
  background: #faf8f4 !important;
  font-size: 13px !important;
  line-height: 1.65 !important;
  font-weight: 800 !important;
  color: #25211b !important;
  text-align: right !important;
  direction: rtl;
}

.hw12-shop-card .hw12-shop-price {
  box-sizing: border-box !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  align-self: flex-start !important;
  width: max-content !important;
  max-width: calc(100% - 28px) !important;
  min-height: 0 !important;
  margin: 0 14px 7px auto !important;
  padding: 5px 10px !important;
  background: #f1e5d2 !important;
  border: 1px solid #e6d5ba !important;
  border-radius: 7px !important;
  font-size: 14px !important;
  font-weight: 800 !important;
  line-height: 1.6 !important;
  color: #3c2d1c !important;
  text-align: right !important;
  direction: rtl;
}

/* Grouped cards use ONE shared ivory panel (not nested boxes). */
.hw12-v6-grid .hw12-v6-info .hw12-shop-title {
  width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
}
.hw12-v6-grid .hw12-v6-info .hw12-shop-price {
  width: max-content !important;
  max-width: 100% !important;
  margin: 2px 0 0 auto !important;
}

.hw12-shop-card .hw12-shop-action {
  box-sizing: border-box !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: calc(100% - 18px) !important;
  max-width: none !important;
  min-height: 38px !important;
  margin: 9px 9px 0 !important;
  padding: 8px 9px !important;
  border: 1px solid var(--hw-black) !important;
  border-radius: 9px !important;
  background: var(--hw-black) !important;
  color: #fff !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  text-align: center !important;
  text-decoration: none !important;
  cursor: pointer;
}

.hw12-shop-card .hw12-shop-action:hover {
  background: #333 !important;
  color: #fff !important;
}

.hw12-shop-card .hw12-shop-action:focus-visible {
  outline: 2px solid var(--hw-gold) !important;
  outline-offset: 2px;
}

.hw12-shop-card [class*="wishlist"],
.hw12-shop-card [class*="favorite"] { z-index: 2; }

@media (hover: hover) {
  .hw12-shop-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 14px 34px rgba(0,0,0,.09) !important;
  }
  .hw12-shop-card:hover img.hw12-shop-image { transform: scale(1.025); }
}

/* -------------------- FOOTER -------------------- */
.hw12-footer,
footer.site-footer,
footer.main-footer,
footer.store-footer {
  background: #101010 !important;
  color: #eaeaea !important;
}

.hw12-footer {
  border-top: 2px solid var(--hw-gold) !important;
  padding-top: 38px !important;
  padding-bottom: 24px !important;
}

.hw12-footer :is(h2, h3, h4, h5) {
  color: #fff !important;
  font-weight: 800 !important;
  line-height: 1.6 !important;
  margin-bottom: 17px !important;
}

.hw12-footer :is(p, li, address, small) {
  color: #d4d4d4 !important;
  line-height: 1.9 !important;
}

.hw12-footer a {
  color: #eee !important;
  text-decoration: none !important;
  overflow-wrap: anywhere;
}
.hw12-footer a:hover { color: var(--hw-gold) !important; }
.hw12-footer li { margin-bottom: 8px; }
.hw12-footer hr { border-color: #343434 !important; }
.hw12-footer img { max-width: 100%; object-fit: contain; }
.hw12-footer hr { border-top: 1px solid #343434 !important; }
.hw12-footer :is(input[type="email"], input[type="text"]) {
  background: #fff !important;
  color: #111 !important;
  border: 1px solid #444 !important;
  border-radius: 9px !important;
  padding: 11px 14px !important;
}
.hw12-footer button:not([class*="close"]) { border-radius: 9px !important; }
.hw12-footer :is(a, button):focus-visible {
  outline: 2px solid var(--hw-gold) !important;
  outline-offset: 3px;
}

/* -------------------- SINGLE HOME HERO SLIDER -------------------- */
.hw12-hero-slider {
  position: relative !important;
  display: block !important;
  width: min(94%, 1320px) !important;
  height: 165px !important;
  min-height: 0 !important;
  max-height: 165px !important;
  margin: 14px auto 20px !important;
  padding: 0 !important;
  box-sizing: border-box !important;
  overflow: hidden !important;
  border: 1px solid #ece7e1 !important;
  border-radius: 14px !important;
  background: #fff !important;
  box-shadow: 0 8px 24px rgba(0,0,0,.04) !important;
}

.hw12-hero-slider .hw12-hero-track {
  position: relative;
  display: flex !important;
  flex-flow: row nowrap !important;
  direction: ltr !important;
  width: 100% !important;
  height: 100% !important;
  min-height: 0 !important;
  padding: 0 !important;
  box-sizing: border-box !important;
  transition: transform .65s ease;
  will-change: transform;
}

.hw12-hero-slider .hw12-hero-slide {
  display: block !important;
  position: relative !important;
  direction: rtl !important;
  flex: 0 0 100% !important;
  width: 100% !important;
  min-width: 100% !important;
  height: 100% !important;
  min-height: 0 !important;
  max-height: none !important;
  padding: 0 !important;
  margin: 0 !important;
  overflow: hidden !important;
  box-sizing: border-box !important;
  background: #fff !important;
}

/* Preserve the COMPLETE image, including original white background.
   Position image to the right; remaining space stays white.
   Existing 3:1 images cannot fill a 7:1 desktop banner without
   cropping or distortion. That requires new ~7:1 artwork. */
.hw12-hero-slider .hw12-hero-image {
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  max-width: none !important;
  max-height: none !important;
  margin: 0 !important;
  padding: 0 !important;
  object-fit: contain !important;
  object-position: right center !important;
  background: #fff !important;
  border: 0 !important;
  border-radius: 0 !important;
  transform: none !important;
}

.hw12-hero-slider .hw12-hero-arrow {
  position: absolute;
  top: 50% !important;
  z-index: 20 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 30px !important;
  height: 30px !important;
  margin: 0 !important;
  padding: 6px !important;
  box-sizing: border-box !important;
  transform: translateY(-50%);
  border: 1px solid rgba(0,0,0,.06) !important;
  border-radius: 50% !important;
  background: rgba(255,255,255,.95) !important;
  color: #111 !important;
  box-shadow: 0 5px 14px rgba(0,0,0,.05) !important;
  cursor: pointer;
}
.hw12-hero-slider .hw12-hero-arrow.prev { right: 12px !important; }
.hw12-hero-slider .hw12-hero-arrow.next { left: 12px !important; }
.hw12-hero-slider .hw12-hero-arrow svg { width: 17px; height: 17px; }
.hw12-hero-slider .hw12-hero-arrow:hover {
  background: #111 !important;
  color: #fff !important;
}
.hw12-hero-slider .hw12-hero-arrow:focus-visible,
.hw12-hero-slider .hw12-hero-dot:focus-visible {
  outline: 2px solid var(--hw-gold) !important;
  outline-offset: 3px;
}

.hw12-hero-slider .hw12-hero-dots {
  position: absolute;
  right: 0;
  left: 0;
  bottom: 6px !important;
  z-index: 20 !important;
  display: flex;
  justify-content: center;
  gap: 8px;
}
.hw12-hero-slider .hw12-hero-dot {
  width: 9px;
  height: 9px;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: rgba(17,17,17,.22);
  cursor: pointer;
}
.hw12-hero-slider .hw12-hero-dot.active {
  width: 28px;
  background: #111;
}

/* Legacy sections are no longer generated by the replacement JS. */
.hw12-v6-intro,
.hw12-v9-categories {
  display: none !important;
}

/* -------------------- RESPONSIVE -------------------- */
@media (max-width: 1199px) {
  .hw12-v6-grid {
    grid-template-columns: repeat(4, minmax(0,1fr)) !important;
    gap: 12px !important;
  }
  
}

@media (max-width: 767px) {
  .hw12-header { padding-top: 8px; padding-bottom: 8px; }
  .hw12-header a.hw12-nav-link {
    min-height: 36px !important;
    margin: 2px !important;
    padding: 8px 11px !important;
    border-radius: 9px !important;
    font-size: 12px !important;
  }
  .hw12-header a.hw12-icon-btn,
  .hw12-header button.hw12-icon-btn {
    flex-basis: 38px !important;
    width: 38px !important;
    height: 38px !important;
    min-width: 38px !important;
    min-height: 38px !important;
    border-radius: 10px !important;
  }
  .hw12-header img.hw12-brand-image {
    max-height: 46px !important;
    max-width: 120px !important;
  }
  .hw12-v6-grid {
    grid-template-columns: repeat(2, minmax(0,1fr)) !important;
    gap: 10px !important;
  }
  .hw12-shop-card { padding-bottom: 8px !important; border-radius: 11px !important; }
  
  /* Compact but still clearly inset on two-column mobile cards. */
  .hw12-v6-grid .hw12-v6-info {
    width: calc(100% - 16px) !important;
    min-height: 81px !important;
    margin: 7px 8px 0 !important;
    padding: 9px 10px !important;
    border-radius: 8px !important;
    gap: 5px !important;
  }
  .hw12-shop-card .hw12-shop-title {
    width: calc(100% - 20px) !important;
    margin: 7px 10px 5px !important;
    padding: 7px 8px !important;
    font-size: 12px !important;
  }
  .hw12-shop-card .hw12-shop-price {
    max-width: calc(100% - 20px) !important;
    margin: 0 10px 6px auto !important;
    padding: 4px 8px !important;
    font-size: 12px !important;
  }
  .hw12-v6-grid .hw12-v6-info .hw12-shop-title {
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
  }
  .hw12-v6-grid .hw12-v6-info .hw12-shop-price {
    max-width: 100% !important;
    margin: 2px 0 0 auto !important;
  }
  .hw12-shop-card .hw12-shop-action { min-height: 36px !important; font-size: 11px !important; }

  .hw12-hero-slider {
    width: 94% !important;
    height: 120px !important;
    min-height: 0 !important;
    max-height: 120px !important;
    margin: 12px auto 16px !important;
    border-radius: 10px !important;
  }
  .hw12-hero-slider .hw12-hero-arrow {
    width: 26px !important;
    height: 26px !important;
  }
  .hw12-hero-slider .hw12-hero-dots { bottom: 4px !important; }

  .hw12-footer { padding-top: 25px !important; padding-bottom: 20px !important; }
  .hw12-footer :is(h2,h3,h4) { font-size: 15px !important; margin-bottom: 10px !important; }
  .hw12-footer :is(p, li, a) { font-size: 13px; }
}

@media (prefers-reduced-motion: reduce) {
  .hw12-shop-card,
  .hw12-shop-card img,
  .hw12-header a.hw12-nav-link,
  .hw12-hero-track { transition: none !important; }
  .hw12-shop-card:hover,
  .hw12-shop-card:hover img { transform: none !important; }
}

/* ============================================================
   HOUSE OF WEAR 12 | FOOTER SOCIAL LINKS ONLY
   Scoped to .hw12-footer-connect. Zid footer content stays intact.
   ============================================================ */
.hw12-footer .hw12-footer-connect {
  box-sizing: border-box;
  width: min(94%, 1250px);
  margin: 0 auto 30px;
  padding: 24px 26px;
  border: 1px solid rgba(194,165,116,.38);
  border-radius: 18px;
  background: linear-gradient(115deg, #1d1b18 0%, #151515 55%, #0d0d0d 100%);
  box-shadow: 0 15px 36px rgba(0,0,0,.15);
  direction: rtl;
}
.hw12-footer .hw12-footer-connect-inner {
  display: grid;
  grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr);
  align-items: center;
  gap: 24px;
  max-width: 1120px;
  margin-inline: auto;
}
.hw12-footer .hw12-footer-connect-brand {
  min-width: 0;
  text-align: right;
}
.hw12-footer .hw12-footer-connect-brand-name {
  display: block;
  color: #c2a574;
  direction: ltr;
  text-align: right;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 2.3px;
  margin-bottom: 8px;
}
.hw12-footer h2.hw12-footer-connect-title {
  margin: 0 0 6px !important;
  color: #fff !important;
  font-size: clamp(19px, 2.3vw, 27px) !important;
  font-weight: 800 !important;
  line-height: 1.5 !important;
}
.hw12-footer p.hw12-footer-connect-description {
  margin: 0 !important;
  max-width: 420px;
  color: #c9c6c0 !important;
  font-size: 13px !important;
  line-height: 1.9 !important;
}
.hw12-footer .hw12-footer-connect-social { min-width: 0; }
.hw12-footer p.hw12-footer-connect-caption {
  margin: 0 0 11px !important;
  color: #f3ede6 !important;
  font-size: 13px !important;
  font-weight: 700 !important;
}
.hw12-footer .hw12-footer-social-links {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
}
.hw12-footer a.hw12-footer-social-link {
  box-sizing: border-box;
  display: inline-flex !important;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 8px;
  min-width: 0;
  min-height: 78px;
  padding: 10px 4px;
  border: 1px solid rgba(255,255,255,.13);
  border-radius: 12px;
  background: rgba(255,255,255,.055);
  color: #fafafa !important;
  text-align: center;
  text-decoration: none !important;
  transition: border-color .2s ease, background-color .2s ease, transform .2s ease;
}
.hw12-footer a.hw12-footer-social-link:hover {
  border-color: #c2a574;
  background: rgba(194,165,116,.14);
  color: #fff !important;
  transform: translateY(-2px);
}
.hw12-footer .hw12-footer-social-icon {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  width: 26px;
  height: 26px;
  color: #dec296;
}
.hw12-footer .hw12-footer-social-icon svg {
  display: block;
  width: 24px;
  height: 24px;
  fill: none;
  stroke: currentColor;
}
.hw12-footer .hw12-footer-social-label {
  display: block;
  color: inherit;
  white-space: nowrap;
  font-size: 12px;
  font-weight: 700;
  line-height: 1.2;
}
.hw12-footer a.hw12-footer-linktree {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 12px;
  color: #d9bd8d !important;
  font-size: 12px !important;
  font-weight: 700;
  text-decoration: none !important;
}
.hw12-footer a.hw12-footer-linktree::after {
  content: "↗";
  font-size: 14px;
  line-height: 1;
}
.hw12-footer a.hw12-footer-linktree:hover { color: #fff !important; }
.hw12-footer .hw12-footer-connect :is(a):focus-visible {
  outline: 2px solid #d9bd8d !important;
  outline-offset: 3px !important;
}
@media (max-width: 900px) {
  .hw12-footer .hw12-footer-connect-inner { grid-template-columns: 1fr; gap: 18px; }
  .hw12-footer .hw12-footer-connect { padding: 22px 20px; }
}
@media (max-width: 480px) {
  .hw12-footer .hw12-footer-connect { padding: 18px 14px; margin-bottom: 24px; border-radius: 14px; }
  .hw12-footer .hw12-footer-connect-brand-name { font-size: 10px; }
  .hw12-footer h2.hw12-footer-connect-title { font-size: 19px !important; }
  .hw12-footer p.hw12-footer-connect-description { font-size: 12px !important; }
  .hw12-footer .hw12-footer-social-links { grid-template-columns: repeat(2, minmax(0,1fr)); gap: 8px; }
  .hw12-footer a.hw12-footer-social-link {
    flex-direction: row;
    gap: 9px;
    justify-content: center;
    min-height: 51px;
    padding: 8px;
  }
  .hw12-footer .hw12-footer-social-icon,
  .hw12-footer .hw12-footer-social-icon svg { width: 21px; height: 21px; }
}
@media (prefers-reduced-motion: reduce) {
  .hw12-footer a.hw12-footer-social-link { transition: none !important; transform: none !important; }
}

/* ============================================================
   HOUSE OF WEAR 12 | LEGAL AND INFORMATION PAGES
   Applied ONLY to the content container tagged by JS above.
   Keeps all Zid markup, legal text, breadcrumbs, links unchanged.
   ============================================================ */
.hw12-legal-content {
  box-sizing: border-box !important;
  direction: rtl;
  text-align: right;
  width: min(calc(100% - 30px), 1040px) !important;
  max-width: 1040px !important;
  margin: 26px auto 46px !important;
  padding: clamp(24px, 4vw, 52px) !important;
  background: #fff !important;
  border: 1px solid #eae5dd !important;
  border-radius: 20px !important;
  box-shadow: 0 12px 40px rgba(26, 20, 12, .055) !important;
  color: #242424 !important;
  overflow-wrap: anywhere;
}
.hw12-legal-content :is(h1, h2, h3, h4) {
  text-align: right !important;
  color: #171717 !important;
  letter-spacing: 0 !important;
  line-height: 1.55 !important;
  height: auto !important;
}
.hw12-legal-content .hw12-legal-title {
  display: block !important;
  position: relative;
  width: 100%;
  margin: 0 0 25px !important;
  padding: 0 0 21px !important;
  font-size: clamp(25px, 3vw, 35px) !important;
  font-weight: 800 !important;
  border-bottom: 1px solid #e9e1d5;
}
.hw12-legal-content .hw12-legal-title::after {
  content: "";
  position: absolute;
  right: 0;
  bottom: -2px;
  width: 72px;
  height: 3px;
  border-radius: 9px;
  background: #c2a574;
}
.hw12-legal-content :is(h2, h3, h4):not(.hw12-legal-title) {
  margin: 26px 0 12px !important;
  font-size: clamp(18px, 2vw, 21px) !important;
  font-weight: 800 !important;
}
.hw12-legal-content p,
.hw12-legal-content li {
  color: #4a4a4a !important;
  font-size: 15px !important;
  font-weight: 400;
  line-height: 2.05 !important;
}
.hw12-legal-content p { margin: 0 0 15px !important; }
.hw12-legal-content :is(ul, ol) {
  box-sizing: border-box;
  margin: 10px 0 23px !important;
  padding: 13px 28px 12px 18px !important;
  border-radius: 12px;
  background: #faf9f7;
  list-style-position: outside;
}
.hw12-legal-content li {
  padding: 0 3px 0 0 !important;
  margin: 0 0 8px !important;
}
.hw12-legal-content li:last-child { margin-bottom: 0 !important; }
.hw12-legal-content li::marker { color: #a98756; }
.hw12-legal-content strong,
.hw12-legal-content b { color: #1f1f1f; font-weight: 800; }
.hw12-legal-content a {
  color: #806030 !important;
  text-underline-offset: 3px;
}
.hw12-legal-content a:hover { color: #111 !important; }
.hw12-legal-content a:focus-visible {
  outline: 2px solid #c2a574;
  outline-offset: 3px;
}
.hw12-legal-content :is(hr) {
  border: 0;
  border-top: 1px solid #eee8dd;
  margin: 22px 0;
}
@media (max-width: 767px) {
  .hw12-legal-content {
    width: calc(100% - 22px) !important;
    margin: 16px auto 28px !important;
    padding: 23px 17px !important;
    border-radius: 14px !important;
  }
  .hw12-legal-content .hw12-legal-title {
    font-size: 24px !important;
    margin-bottom: 20px !important;
    padding-bottom: 16px !important;
  }
  .hw12-legal-content :is(h2, h3, h4):not(.hw12-legal-title) {
    font-size: 17px !important;
    margin: 22px 0 10px !important;
  }
  .hw12-legal-content p,
  .hw12-legal-content li { font-size: 14px !important; line-height: 1.95 !important; }
  .hw12-legal-content :is(ul, ol) {
    padding: 12px 26px 12px 11px !important;
    margin-bottom: 16px !important;
  }
}

/* ============================================================
   HOUSE OF WEAR 12 | MOBILE GRID FIRST-LOAD SAFETY PATCH
   Scoped to the JS-confirmed product grid. All other pages keep
   their original component styles, checkout and purchase logic.
   ============================================================ */
@media (max-width: 767px) {
  body .hw12-v6-grid.hw12-v6-grid {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 10px !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    align-items: stretch !important;
  }
  body .hw12-v6-grid.hw12-v6-grid > .hw12-v6-cell {
    box-sizing: border-box !important;
    display: block !important;
    float: none !important;
    flex: none !important;
    width: auto !important;
    min-width: 0 !important;
    max-width: none !important;
    margin: 0 !important;
  }
  body .hw12-v6-grid.hw12-v6-grid .hw12-shop-card {
    min-width: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
  }
}
/* The banner remains in the normal document flow when scrolling. */
body .hw12-hero-slider.hw12-hero-slider {
  position: relative !important;
  top: auto !important;
  bottom: auto !important;
  left: auto !important;
  right: auto !important;
  inset-block-start: auto !important;
  transform: none !important;
}
/* HOUSE OF WEAR 12 | PRICE ONLY
   Append at the END of the current Zid custom CSS.
   Do not replace current CSS or JavaScript.
   Matches the existing ivory/gold product-title design. */
body .hw12-shop-card :is(
  .hw12-shop-price,
  .product-price,
  .product-card-price,
  .product-card__price,
  .product-price-wrapper
) {
  box-sizing: border-box !important;
  display: flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  flex-wrap: wrap !important;
  direction: rtl !important;
  text-align: right !important;
  width: calc(100% - 28px) !important;
  max-width: calc(100% - 28px) !important;
  min-width: 0 !important;
  min-height: 38px !important;
  margin: 6px 14px 8px !important;
  padding: 9px 10px !important;
  background: #faf8f4 !important;
  border: 0 !important;
  border-inline-start: 3px solid #c2a574 !important;
  border-radius: 8px !important;
  color: #25211b !important;
  font-size: 13px !important;
  font-weight: 800 !important;
  line-height: 1.65 !important;
}

/* When Zid groups name and price in the same padded information panel. */
body .hw12-v6-grid .hw12-shop-card .hw12-v6-info .hw12-shop-price {
  width: 100% !important;
  max-width: 100% !important;
  margin: 6px 0 0 !important;
}

@media (max-width: 767px) {
  body .hw12-shop-card :is(
    .hw12-shop-price,
    .product-price,
    .product-card-price,
    .product-card__price,
    .product-price-wrapper
  ) {
    width: calc(100% - 20px) !important;
    max-width: calc(100% - 20px) !important;
    min-height: 34px !important;
    margin: 5px 10px 7px !important;
    padding: 7px 8px !important;
    font-size: 12px !important;
  }
  body .hw12-v6-grid .hw12-shop-card .hw12-v6-info .hw12-shop-price {
    width: 100% !important;
    max-width: 100% !important;
    margin: 5px 0 0 !important;
  }
}
/* HOUSE OF WEAR 12 | Style the COMPLETE PRICE ROW, not the product image.
   Add at the END of the existing working CSS. */
body .hw12-shop-card .hw12-price-row-enhanced {
  box-sizing: border-box !important;
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  justify-content: flex-start !important;
  flex-wrap: wrap !important;
  gap: 3px !important;
  direction: rtl !important;
  text-align: right !important;
  width: calc(100% - 28px) !important;
  max-width: calc(100% - 28px) !important;
  min-width: 0 !important;
  min-height: 38px !important;
  margin: 5px 14px 8px !important;
  padding: 9px 10px !important;
  background: #faf8f4 !important;
  border: 0 !important;
  border-inline-start: 3px solid #c2a574 !important;
  border-radius: 8px !important;
  color: #25211b !important;
  font-size: 13px !important;
  font-weight: 800 !important;
  line-height: 1.65 !important;
}
@media (max-width: 767px) {
  body .hw12-shop-card .hw12-price-row-enhanced {
    width: calc(100% - 20px) !important;
    max-width: calc(100% - 20px) !important;
    min-height: 34px !important;
    margin: 5px 10px 7px !important;
    padding: 7px 8px !important;
    font-size: 12px !important;
  }
}