/* PORISH — TargetSite-aligned styles (original slate / teal brand) */
:root {
  --dn-brand: #0f766e;
  --dn-brand-dark: #0b4f4a;
  --dn-brand-soft: #e6f3f1;
  --dn-ink: #0f172a;
  --dn-muted: #64748b;
  --dn-line: #e2e8f0;
  --dn-surface: #f8fafc;
  --dn-gold: #d4af37;
}
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html {
  margin: 0;
  padding: 0;
  overflow-x: clip;
  max-width: 100%;
  width: 100%;
}

body {
  margin: 0;
  padding: 0;
  font-family: 'Plus Jakarta Sans', 'Hind Siliguri', system-ui, sans-serif;
  color: var(--dn-ink);
  background: #fff;
  -webkit-font-smoothing: antialiased;
  width: 100%;
  max-width: 100%;
}

/* hostfix: match Tailwind preflight so cards don't blow out if CDN fails */
img, video { max-width: 100%; height: auto; }
/* UI icons: never force height:auto — it overrides Tailwind h-* after CDN and collapses phone nav icons */
svg {
  max-width: none;
  flex-shrink: 0;
  display: inline-block;
  vertical-align: middle;
}
.dn-card-media img,
.dn-cat-circle img,
.dn-hero-banner img,
#heroSlider [data-slide] img,
.hero-slide img {
  max-width: none;
  width: 100%;
  height: 100%;
}

.no-scrollbar::-webkit-scrollbar { display: none; }
.no-scrollbar { -ms-overflow-style: none; scrollbar-width: none; }

body.no-scroll {
  overflow: hidden;
  touch-action: none;
}
body.cart-drawer-open .floating-chat,
body.cart-drawer-open .floating-chat * {
  visibility: hidden !important;
  opacity: 0 !important;
  pointer-events: none !important;
}
body.cart-drawer-open #backToTop {
  opacity: 0 !important;
  pointer-events: none !important;
}

.dn-card {
  position: relative;
  display: flex;
  flex-direction: column;
  min-width: 0;
  width: 100%;
  height: 100%;
  background: #fff;
  border: 1px solid var(--dn-line);
  border-radius: 14px;
  overflow: hidden;
  transition: box-shadow 0.2s ease, border-color 0.2s ease;
}
.dn-card:hover {
  border-color: #99f6e4;
  box-shadow: 0 10px 28px rgba(15, 118, 110, 0.12);
}

.dn-badge {
  position: absolute;
  top: 10px;
  left: 10px;
  z-index: 2;
  background: var(--dn-brand);
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  padding: 4px 9px;
  border-radius: 999px;
}
.dn-badge-sale {
  background: #059669;
}

.dn-card-media {
  display: block;
  position: relative;
  width: 100%;
  aspect-ratio: 1;
  overflow: hidden;
  flex-shrink: 0;
  background: linear-gradient(145deg, #ecfeff, #f1f5f9);
  padding: 12px;
}
.dn-card-media img {
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: cover;
  object-position: center;
  border-radius: 10px;
  background: #0f172a;
  display: block;
}

.dn-card-body {
  padding: 12px 14px 14px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  text-align: center;
  flex: 1;
}

.dn-card-title {
  font-size: 14px;
  font-weight: 700;
  color: var(--dn-ink);
  line-height: 1.35;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  min-height: 2.7em;
}
.dn-card-title:hover { color: var(--dn-brand); }

.dn-card-price {
  display: flex;
  justify-content: center;
  align-items: baseline;
  gap: 6px;
  flex-wrap: wrap;
  min-height: 1.5rem;
}
.dn-price {
  font-size: 15px;
  font-weight: 800;
  color: var(--dn-brand);
}
.dn-price-was {
  font-size: 13px;
  color: #94a3b8;
  text-decoration: line-through;
}

.dn-view-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 700;
  color: var(--dn-brand-dark);
  background: var(--dn-brand-soft);
  padding: 8px 10px;
  border-radius: 8px;
}
.dn-view-btn:hover { background: #ccfbf1; }

.dn-add-btn {
  margin-top: auto;
  width: 100%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--dn-ink);
  color: #fff;
  font-size: 13px;
  font-weight: 700;
  padding: 10px 12px;
  border: none;
  border-radius: 8px;
  cursor: pointer;
}
.dn-add-btn:hover { background: var(--dn-brand); }

.dn-cat {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  text-align: center;
  flex: 1 1 0;
  min-width: 88px;
  max-width: 120px;
}
.dn-cat-circle {
  width: 92px;
  height: 92px;
  border-radius: 999px;
  border: 2px solid var(--dn-brand);
  background: #fff;
  overflow: hidden;
  padding: 0;
  display: block;
  box-shadow: 0 2px 8px rgba(15, 118, 110, 0.08);
  transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}
.dn-cat-circle img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.dn-cat:hover .dn-cat-circle {
  transform: translateY(-4px);
  border-color: #0b4f4a;
  box-shadow: 0 8px 18px rgba(15, 118, 110, 0.18);
}
.dn-cat span {
  font-size: 13px;
  font-weight: 700;
  color: var(--dn-brand-dark);
  line-height: 1.25;
}
.dn-cats-row {
  display: flex;
  flex-wrap: nowrap;
  justify-content: flex-start;
  gap: 12px 16px;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  padding-bottom: 4px;
}

/* Hero banner — phone: show full artwork (no crop); desktop: wide frame */
.dn-hero-banner {
  display: block;
  position: relative;
  width: 100%;
  overflow: hidden;
  background: #0f172a;
}
.dn-hero-banner img {
  width: 100%;
  height: auto;
  display: block;
  object-fit: contain;
  object-position: center;
}
.dn-hero-banner--copy {
  min-height: 240px;
}
.dn-hero-copy {
  padding: 1.25rem 1.25rem 1.5rem;
  box-sizing: border-box;
}
.dn-hero-title {
  font-size: clamp(1.25rem, 6vw, 2.25rem);
  word-break: break-word;
  overflow-wrap: anywhere;
  max-width: 100%;
}
.dn-hero-sub {
  font-size: 0.875rem;
  line-height: 1.45;
}

@media (min-width: 640px) {
  .dn-hero-banner {
    aspect-ratio: 1200 / 440;
    min-height: 260px;
  }
  .dn-hero-banner img {
    height: 100%;
    object-fit: cover;
  }
  .dn-hero-banner--copy {
    aspect-ratio: 1200 / 440;
    min-height: 260px;
  }
  .dn-hero-copy {
    padding: 2rem 2.5rem;
  }
  .dn-hero-title {
    font-size: 2.25rem;
  }
  .dn-hero-sub {
    font-size: 1rem;
  }
  .dn-cats-row {
    justify-content: space-between;
  }
}

@media (max-width: 640px) {
  .dn-cat {
    min-width: 76px;
    max-width: 88px;
  }
  .dn-cat-circle {
    width: 72px;
    height: 72px;
  }
  .dn-cat span {
    font-size: 12px;
  }
  .dn-card-body {
    padding: 10px;
    gap: 6px;
  }
  .dn-card-title {
    font-size: 13px;
    min-height: 2.5em;
  }
  .dn-price {
    font-size: 14px;
  }
  .dn-add-btn {
    font-size: 12px;
    padding: 9px 10px;
  }
  /* PORISH cards stay center-aligned even with global price stack rules */
  .dn-card .dn-card-price.product-card-price {
    flex-direction: row;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: center;
  }
  .dn-page-title {
    padding: 1.5rem 1rem;
  }
  .dn-page-title h1 {
    font-size: 1.5rem;
  }
  .site-header .max-w-7xl {
    min-width: 0;
  }
}

.dn-page-title {
  background: linear-gradient(180deg, #e6f3f1, #fff);
  text-align: center;
  padding: 2.25rem 1rem;
}
.dn-page-title h1 {
  font-size: 2rem;
  font-weight: 800;
  color: var(--dn-ink);
}

.variant-chip {
  border: 1px solid var(--dn-line);
  background: #fff;
  color: var(--dn-ink);
  font-weight: 600;
  font-size: 13px;
  padding: 0.55rem 0.9rem;
  border-radius: 8px;
  cursor: pointer;
}
.variant-chip.is-active,
.variant-chip.active {
  background: var(--dn-brand);
  border-color: var(--dn-brand);
  color: #fff;
}

[data-cart-drawer] { will-change: transform; }
[data-cart-drawer].is-open { transform: translateX(0) !important; }
[data-drawer-overlay].is-open { display: block !important; }

.toast {
  position: fixed;
  bottom: 24px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--dn-ink);
  color: #fff;
  padding: 10px 18px;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 600;
  z-index: 100;
  box-shadow: 0 8px 24px rgba(0,0,0,.2);
}

/* Fail-open: storefront content must remain visible even if the JS asset cannot load. */
[data-reveal] { opacity: 1; transform: none; }
[data-reveal].is-in { opacity: 1; transform: none; }

/* Price: never split currency from digits; keep card rows aligned on phone */
.product-card-price,
.product-card .pc-price,
.product-card .pc-price-was,
.product-card .dn-price,
.product-card .dn-price-was,
.product-card .sh-price,
.product-card .sh-price-was,
.product-card .dm-price,
.product-card .dm-price-was,
.product-card .fk-price,
.product-card .fk-price-was,
.product-card .rw-price,
.product-card .rw-price-was,
.product-card .hl-price,
.product-card .hl-price-was,
.product-card .nr-price,
.product-card .nr-price-was,
.product-card .tz-price {
  white-space: nowrap !important;
  word-break: keep-all;
  overflow-wrap: normal;
}
.product-card-price {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  column-gap: 0.375rem;
  row-gap: 0.125rem;
  min-height: 1.5rem;
}
@media (max-width: 640px) {
  .product-card-price,
  .sh-card-price,
  .dm-card-price,
  .fk-card-price,
  .nr-card-price,
  .rw-card-price,
  .hl-card-price,
  .tz-price {
    flex-direction: column;
    align-items: flex-start;
    flex-wrap: nowrap;
    gap: 0.125rem;
  }
  /* PORISH cards: keep prices in row */
  .dn-card-price,
  .product-card .dn-card-price {
    flex-direction: row !important;
    flex-wrap: nowrap;
    justify-content: center !important;
    align-items: baseline;
  }
  .product-card-price > span,
  .sh-card-price > span,
  .dm-card-price > span,
  .fk-card-price > span,
  .dn-card-price > span,
  .nr-card-price > span,
  .hl-card-price > span,
  .tz-price > span {
    white-space: nowrap !important;
    display: inline-block;
    max-width: 100%;
  }
  .product-card-price > span:first-child {
    font-size: 0.9rem;
  }
  /* 16px inputs on phone */
  input[type="text"],
  input[type="email"],
  input[type="password"],
  input[type="tel"],
  input[type="search"],
  input[type="number"],
  textarea,
  select {
    font-size: 16px !important;
  }
}

/* WaveSeller developer credit — high visibility strip */
.ws-dev-credit {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 0.95rem 1rem;
  background: #020617;
  color: #f8fafc;
  font-size: 0.95rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-align: center;
  border-top: 3px solid #38bdf8;
}
.ws-dev-credit strong {
  color: #38bdf8;
  font-weight: 800;
  font-size: 1.05rem;
  margin-left: 0.25rem;
  letter-spacing: 0.02em;
}
@media (max-width: 640px) {
  .ws-dev-credit {
    font-size: 0.9rem;
    padding: 1rem 0.75rem;
  }
  .ws-dev-credit strong {
    font-size: 1rem;
  }
}

/* Product grid — 2-col phone, 3 md, 4 lg */
.product-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: 0.5rem;
  row-gap: 0.625rem;
  align-items: stretch;
  width: 100%;
  max-width: 100%;
  min-width: 0;
}
.product-grid > * {
  min-width: 0;
  max-width: 100%;
}
@media (min-width: 640px) {
  .product-grid { gap: 0.75rem; }
}
@media (min-width: 768px) {
  .product-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (min-width: 1024px) {
  .product-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* Flash row — horizontal scroll phone, 5-col grid ≥640px */
.flash-row {
  display: flex;
  gap: 0.5rem;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  padding-bottom: 4px;
  align-items: stretch;
}
.flash-row__item {
  flex: 0 0 calc((100% - 0.5rem) / 2.15);
  min-width: 0;
  max-width: 11.5rem;
  scroll-snap-align: start;
  display: flex;
}
.flash-row__item > .dn-card,
.flash-row__item > .product-card {
  height: 100%;
  width: 100%;
}
@media (min-width: 640px) {
  .flash-row {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 0.75rem;
    overflow-x: visible;
    scroll-snap-type: none;
  }
  .flash-row__item {
    flex: none;
    width: auto;
    max-width: none;
  }
}

/* Account dropdown — fixed inset ≤1023px */
.account-dropdown {
  position: absolute;
  right: 0;
  top: 100%;
  margin-top: 0.5rem;
  width: min(18rem, calc(100vw - 1.5rem));
}
@media (max-width: 1023px) {
  .account-dropdown,
  [data-account-dropdown] {
    position: fixed !important;
    left: 0.75rem !important;
    right: 0.75rem !important;
    top: calc(4.75rem + env(safe-area-inset-top, 0px)) !important;
    width: auto !important;
    max-width: none !important;
  }
}

/* Hero slider — swipe track CSS for #heroSlider */
#heroSlider {
  touch-action: pan-y pinch-zoom;
  cursor: grab;
  position: relative;
  width: 100%;
  min-width: 100%;
  overflow: hidden;
  background: #0f172a;
  border-radius: 0.875rem;
  user-select: none;
  -webkit-user-select: none;
}
#heroSlider.is-grabbing { cursor: grabbing; }
.hero-track {
  display: flex;
  width: 100%;
  height: 100%;
  min-height: inherit;
  transition: transform .5s cubic-bezier(.25, .46, .45, .94);
  will-change: transform;
  touch-action: pan-y;
}
.hero-track.is-dragging { transition: none; }
.hero-slide,
#heroSlider [data-slide] {
  position: relative;
  flex: 0 0 100%;
  width: 100%;
  min-width: 100%;
  max-width: 100%;
  min-height: inherit;
  height: 100%;
  overflow: hidden;
  background-size: cover;
  background-position: center;
}
.hero-slide img,
#heroSlider [data-slide] img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  pointer-events: none;
  -webkit-user-drag: none;
  user-select: none;
}
.hero-slide a,
#heroSlider [data-slide] a {
  -webkit-user-drag: none;
}
#heroSlider [data-slide].is-hidden { opacity: 0; pointer-events: none; }
#heroSlider [data-slide].is-active { opacity: 1; }

/* Phone: 16/9 aspect; desktop ~1200/440 or 21/9 */
@media (max-width: 767px) {
  #heroSlider {
    aspect-ratio: 16 / 9;
    max-height: none;
    min-height: 0;
  }
  #heroSlider .hero-slide > div {
    min-height: 0 !important;
    height: 100%;
    padding: 0.75rem 1rem 1.75rem !important;
    justify-content: center;
  }
  #heroSlider h1 {
    font-size: 1.15rem !important;
    line-height: 1.25 !important;
  }
  #heroSlider p {
    font-size: 0.75rem !important;
    margin-top: 0.35rem !important;
  }
  #heroSlider a.inline-flex,
  #heroSlider span.inline-flex {
    margin-top: 0.5rem !important;
    padding: 0.4rem 0.9rem !important;
    font-size: 0.75rem !important;
  }
  /* Hide hero arrows on phone */
  [data-hero-next],
  [data-hero-prev] {
    display: none !important;
  }
}
@media (min-width: 768px) {
  #heroSlider {
    aspect-ratio: 21 / 9;
    min-height: 280px;
    max-height: 480px;
  }
}

/* Hero dots */
.hero-dots,
#heroSlider .hero-dots {
  position: absolute;
  bottom: 14px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 3;
  display: flex;
  gap: 6px;
  pointer-events: none;
}
.hero-dot {
  width: 28px;
  height: 4px;
  border: 0;
  border-radius: 2px;
  background: rgba(255,255,255,.45);
  cursor: pointer;
  padding: 0;
  pointer-events: auto;
  transition: background .2s ease, width .2s ease;
}
.hero-dot.is-on,
.hero-dot.is-active {
  background: var(--dn-gold);
  width: 36px;
}


/* ---------- Floating chat + back-to-top (DP-Site method) ---------- */
:root {
  --floating-action-right: max(1.25rem, env(safe-area-inset-right, 0px));
  --floating-action-bottom: max(1.125rem, env(safe-area-inset-bottom, 0px));
  --floating-action-size: 3.25rem;
  --floating-action-gap: 0.75rem;
  --floating-action-shadow: 0 18px 40px -14px rgba(20, 20, 20, 0.4);
  --floating-chat-brand: var(--brand, #0f766e);
}

/* FAB positioning — no bottom-nav offset, use safe-area-inset on phone */
@media (max-width: 767px) {
  :root {
    --floating-action-bottom: max(1.125rem, env(safe-area-inset-bottom, 0px));
  }
}
#backToTop {
  transition: opacity .2s ease, background .15s ease, bottom .2s ease, right .2s ease, width .2s ease, height .2s ease !important;
}
.floating-chat {
  position: fixed;
  right: var(--floating-action-right);
  bottom: var(--floating-action-bottom);
  z-index: 35;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 0.625rem;
  pointer-events: none;
  transform: translateZ(0);
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}
.floating-chat__actions {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.75rem;
  opacity: 0;
  visibility: hidden;
  transform: scale(0.85) translateY(0.5rem);
  pointer-events: none;
  transition: opacity .22s ease, transform .22s ease, visibility .22s ease;
}
.floating-chat__actions.is-open {
  opacity: 1;
  visibility: visible;
  transform: scale(1) translateY(0);
  pointer-events: auto;
}
.floating-chat__btn,
.floating-chat__trigger {
  display: grid;
  place-items: center;
  border: none;
  border-radius: 9999px;
  cursor: pointer;
  pointer-events: auto;
  color: #fff;
  box-shadow: var(--floating-action-shadow);
  transition: transform .15s ease, filter .15s ease, background .15s ease;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}
.floating-chat__btn {
  width: 3rem;
  height: 3rem;
  min-width: 44px;
  min-height: 44px;
}
.floating-chat__trigger {
  width: var(--floating-action-size);
  height: var(--floating-action-size);
  min-width: 48px;
  min-height: 48px;
  background: var(--floating-chat-brand);
}
.floating-chat__btn--whatsapp { background: #16a34a; }
.floating-chat__btn--messenger { background: #2563eb; }
@media (hover: hover) {
  .floating-chat__btn:hover,
  .floating-chat__trigger:hover {
    transform: translateY(-2px);
    filter: brightness(1.06);
  }
}
.floating-chat__icon { grid-area: 1 / 1; }
.floating-chat__icon--close { display: none; }
.floating-chat__trigger[aria-expanded="true"] .floating-chat__icon--open { display: none; }
.floating-chat__trigger[aria-expanded="true"] .floating-chat__icon--close { display: block; }

body.has-floating-chat #backToTop {
  right: var(--floating-action-right) !important;
  bottom: calc(var(--floating-action-bottom) + var(--floating-action-size) + var(--floating-action-gap)) !important;
  width: var(--floating-action-size) !important;
  height: var(--floating-action-size) !important;
  z-index: 36 !important;
}
body.floating-chat-open #backToTop {
  opacity: 0 !important;
  pointer-events: none !important;
}
@media (max-width: 480px) {
  :root {
    --floating-action-right: max(1rem, env(safe-area-inset-right, 0px));
    --floating-action-size: 3.125rem;
  }
  .floating-chat__btn { width: 2.75rem; height: 2.75rem; }
  .floating-chat__btn svg { width: 1.25rem; height: 1.25rem; }
}

/* Mobile nav drawer — category / UI glyphs stay visible on phone */
#mobileMenu .nav-drawer-icon,
.mobile-menu .nav-drawer-icon {
  width: 1.25rem;
  height: 1.25rem;
  min-width: 1.25rem;
  min-height: 1.25rem;
  flex-shrink: 0;
  display: inline-grid;
  place-items: center;
  line-height: 1;
  font-size: 1rem;
  font-family: "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", "Android Emoji", emoji, sans-serif;
}
#mobileMenu .nav-drawer-icon img,
.mobile-menu .nav-drawer-icon img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  max-width: none;
}
#mobileMenu .nav-drawer-icon svg,
.mobile-menu .nav-drawer-icon svg {
  width: 1rem;
  height: 1rem;
  max-width: none;
}
#mobileMenu a.nav-drawer-link,
.mobile-menu a.nav-drawer-link {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.dn-card { border-radius: 10px; }
.dn-card-media { border-radius: 0; }
.dn-card-title { white-space: nowrap; text-overflow: ellipsis; display: block; min-height: 1.35em; overflow: hidden; }
.dn-add-btn { border-radius: 8px; border: 1px solid var(--porish-primary); background: var(--porish-primary); min-height: 42px; }
.dn-add-btn:hover { background: var(--porish-primary-dark); }
.dz-wishlist-btn { width: 36px; height: 36px; border-radius: 50%; border: 1px solid rgba(255,97,21,.28); background: rgba(255,252,244,.96); color: var(--porish-primary); display:inline-flex; align-items:center; justify-content:center; box-shadow:0 4px 12px rgba(15,23,42,.08); cursor:pointer; }
.dz-wishlist-btn svg { width: 19px; height: 19px; }
.dz-wishlist-btn--large { width: 44px; height: 44px; }
.dz-wishlist-btn.is-active { background: var(--porish-primary); color: #fff; border-color: var(--porish-primary); }
.dz-primary-btn, .dz-outline-btn { display:inline-flex; align-items:center; justify-content:center; min-height:42px; padding:.65rem 1rem; border-radius:8px; font-size:.875rem; font-weight:600; text-decoration:none; }
.dz-primary-btn { background:var(--porish-primary); color:#fff; border:1px solid var(--porish-primary); }
.dz-primary-btn:hover { background:var(--porish-primary-dark); }
.dz-outline-btn { background:transparent; color:var(--porish-primary-dark); border:1px solid rgba(255,97,21,.35); }
.dz-alert-success { border:1px solid rgba(255,97,21,.28); background:var(--porish-primary-soft); color:var(--porish-primary-dark); border-radius:8px; padding:.75rem 1rem; font-size:.875rem; }
.dz-empty-state { border:1px solid #eadfd6; background:#fff; border-radius:10px; padding:3rem 1.5rem; text-align:center; }
.dz-empty-state__icon { width:56px;height:56px;border-radius:50%;margin:0 auto .75rem;display:flex;align-items:center;justify-content:center;background:var(--porish-primary-soft);color:var(--porish-primary);font-size:30px; }

.dz-mobile-global-header{position:sticky;top:0;z-index:80;height:68px;background:var(--theme-primary);color:#fff;display:flex;align-items:center;justify-content:space-between;padding:0 12px;box-shadow:0 2px 10px rgba(15,23,42,.12)}
.dz-mobile-menu-btn{width:40px;height:40px;border:0;background:transparent;color:#fff;display:grid;place-items:center}.dz-mobile-menu-btn svg{width:28px;height:28px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round}
.dz-mobile-logo{position:absolute;left:50%;transform:translateX(-50%);display:flex;align-items:center;max-width:150px}.dz-mobile-logo .brand-mark{max-height:50px}.dz-mobile-header-actions{display:flex;align-items:center;gap:6px;margin-left:auto}.dz-mobile-header-box{width:38px;height:38px;border-radius:11px;background:#fff;color:var(--theme-primary);display:grid;place-items:center;border:1px solid rgba(255,255,255,.55);box-shadow:0 2px 6px rgba(15,23,42,.08)}.dz-mobile-header-box svg{width:21px;height:21px;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
@media(max-width:380px){.dz-mobile-header-box{width:34px;height:34px}.dz-mobile-header-actions{gap:4px}.dz-mobile-logo{max-width:128px}}
/* clean white backgrounds; secondary remains an accent only */
body,.dn-page-title,.dn-card-media{background:#fff!important}
.dn-order-card-btn{display:inline-flex;align-items:center;justify-content:center;width:100%;min-height:42px;padding:10px 12px;border-radius:8px;border:1px solid var(--theme-primary);background:var(--theme-primary);color:#fff;font-size:13px;font-weight:800;cursor:pointer}
.dn-order-card-btn:hover{background:var(--theme-primary-dark)}
.dz-qty-box{width:132px;height:40px;border:1px solid #dbe2ea;border-radius:10px;background:#fff;display:grid!important;grid-template-columns:1fr 1fr 1fr}.dz-qty-btn{width:auto!important;height:38px!important;border:0!important;background:#fff;color:#334155;font-weight:800}.dz-qty-input{width:auto!important;height:38px!important;background:#fff!important}
.dz-wishlist-btn--large{width:40px!important;height:40px!important}.dz-wishlist-btn--large svg{width:18px!important;height:18px!important}
.variant-chip{padding:.42rem .7rem!important;font-size:12px!important;border-radius:8px!important}.dz-duration-box{padding:.7rem!important}.dz-duration-box .variant-chip{min-height:34px!important}
.dz-stock-state{margin-left:auto;white-space:nowrap;display:inline-flex;align-items:center}


/* PORISH storefront polish: align homepage cards with Related Products without changing content. */
.dn-card.product-card{border:1px solid #dfe4ea;border-radius:16px;overflow:hidden;background:#fff;display:flex;flex-direction:column;min-width:0;height:100%;box-shadow:none}
.dn-card.product-card .dn-card-media{padding:10px;aspect-ratio:1;background:#fff;border-radius:0;flex:none}
.dn-card.product-card .dn-card-media img{border-radius:14px;object-fit:cover;background:#fff}
.dn-card.product-card .dn-card-body{padding:10px 12px 12px;gap:8px;flex:1;display:flex;flex-direction:column}
.dn-card.product-card .dn-card-title{font-size:clamp(13px,1.1vw,16px);line-height:1.35;min-height:1.35em;max-height:1.4em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;display:block}
.dn-card.product-card .product-card-price{min-height:24px;justify-content:center;align-items:baseline;gap:5px;flex-wrap:nowrap}
.dn-card-actions{display:grid;grid-template-columns:1fr;gap:8px;margin-top:auto;width:100%}
.dn-card-actions button{position:static!important;display:flex;align-items:center;justify-content:center;width:100%;min-width:0;min-height:44px;height:auto;margin:0!important;padding:10px 8px;line-height:1.2;white-space:normal;border-radius:10px;font-size:13px;font-weight:800;text-decoration:none}
.dn-card-actions .dn-add-btn{background:var(--theme-accent,var(--porish-primary));border:1px solid var(--theme-accent,var(--porish-primary));color:#fff}
.dn-card-actions .dn-order-card-btn{background:var(--theme-primary);border:1px solid var(--theme-primary);color:#fff}
@media(min-width:641px){.dn-card-actions{gap:8px}.dn-card-actions button{min-height:42px}}
@media(max-width:640px){.product-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:10px!important}.flash-row{gap:10px}.flash-row__item{flex:0 0 calc((100% - 10px)/2);max-width:none}.dn-card.product-card .dn-card-media{padding:8px}.dn-card.product-card .dn-card-body{padding:9px;gap:7px}.dn-card-actions button{font-size:12px;min-height:40px;padding:8px 5px}.dn-card.product-card .dn-card-title{font-size:13px}}
/* Header is one shared mobile header on every storefront route. */
.dz-mobile-global-header{position:sticky;top:0;z-index:120;height:68px;min-height:68px;background:var(--theme-primary);color:#fff;display:flex;align-items:center;justify-content:space-between;padding:0 12px;box-shadow:0 2px 10px rgba(15,23,42,.12)}
.dz-mobile-menu-btn{flex:0 0 40px;width:40px;height:40px;border-radius:10px;background:rgba(255,255,255,.10);border:1px solid rgba(255,255,255,.16)}
.dz-mobile-logo{max-width:42%;pointer-events:auto}.dz-mobile-logo .brand-mark{max-height:44px}
.dz-mobile-header-actions{gap:7px}.dz-mobile-header-box{width:38px;height:38px;flex:0 0 38px;border-radius:10px;background:rgba(255,255,255,.10);color:#fff;border:1px solid rgba(255,255,255,.35);box-shadow:none;padding:0;cursor:pointer}
.dz-mobile-header-box:focus-visible,.dz-mobile-menu-btn:focus-visible{outline:2px solid #fff;outline-offset:2px}
/* Compact glossy category tiles and square-rounded flash timer. */
.dz-category-track{gap:10px!important}.dz-category-viewport .dz-category-card{width:clamp(92px,26vw,142px)!important;height:auto!important;min-height:92px!important;padding:10px 8px!important;border-radius:15px!important;border:1px solid rgba(148,163,184,.32)!important;background:linear-gradient(145deg,rgba(255,255,255,.82),rgba(241,245,249,.38))!important;backdrop-filter:blur(12px);box-shadow:0 6px 18px rgba(15,23,42,.06),inset 0 1px 0 rgba(255,255,255,.9)!important}
.dz-category-viewport .dz-category-icon{width:38px!important;height:38px!important;margin-bottom:6px!important}.dz-category-viewport .dz-category-icon img{width:100%;height:100%;object-fit:contain}.dz-category-viewport .dz-category-name{font-size:11px!important;line-height:1.2;font-weight:700;padding:0 4px!important}
[data-countdown-end]{border-radius:10px!important;background:var(--theme-primary)!important;color:#fff!important;padding:7px 10px!important;letter-spacing:.04em;box-shadow:0 4px 12px rgba(15,23,42,.12)}
/* Product details and compact variant/quantity controls. */
.dz-product-meta-row{display:flex;align-items:center;gap:8px;flex-wrap:wrap}.dz-stock-state{margin-left:auto!important;justify-self:end}
.dz-duration-box{padding:10px!important;margin-top:14px!important}.dz-duration-box .variant-chip{min-height:32px!important;padding:7px 12px!important;font-size:12px!important}
.variant-chip.is-active,.variant-chip.active,.variant-chip.is-selected{background:var(--theme-primary)!important;border-color:var(--theme-primary)!important;color:#fff!important;box-shadow:0 4px 12px color-mix(in srgb,var(--theme-primary) 20%,transparent)}
.dz-qty-box{width:132px;height:40px;grid-template-columns:1fr 1fr 1fr!important;border-radius:9px;overflow:hidden}.dz-qty-btn,.dz-qty-input{height:38px!important;min-width:0;border-radius:0!important}.dz-qty-btn+input,.dz-qty-input{border-left:1px solid #e2e8f0!important;border-right:1px solid #e2e8f0!important}
/* Checkout delivery zone: slim, consistent radio / name / price row. */
.checkout-radio-card{display:flex!important;align-items:center!important;gap:10px!important;min-height:48px!important;height:48px;padding:0 12px!important;border-radius:12px!important;position:relative!important}
.checkout-radio-card .checkout-radio-dot{position:static!important;transform:none!important;flex:0 0 16px;width:16px;height:16px}
.checkout-radio-card .checkout-radio-dot>span{width:8px;height:8px}
.checkout-radio-card.is-selected{border-color:var(--theme-primary)!important;background:color-mix(in srgb,var(--theme-primary) 5%,white)!important}
/* Footer only contains identity, five social links, editable address and credits. */
.dz-footer-brand{display:inline-flex;justify-content:center;align-items:center;max-width:220px}.dz-footer-brand .brand-mark{max-height:52px}.dz-footer-socials{display:flex;justify-content:center;gap:10px;flex-wrap:wrap}.dz-footer-social{width:42px;height:42px;border-radius:12px;display:grid;place-items:center;background:rgba(255,255,255,.10);color:#fff;border:1px solid rgba(255,255,255,.1);transition:background .15s,transform .15s}.dz-footer-social:hover{background:var(--theme-primary);transform:translateY(-1px)}.dz-footer-social svg{width:21px;height:21px}.dz-footer-location{display:flex;align-items:center;justify-content:center;gap:8px;color:rgba(255,255,255,.72);font-size:13px;line-height:1.5}.dz-footer-location svg{width:20px;height:20px;flex:0 0 20px;color:#fff}.dz-footer-bottom{width:100%}
[data-countdown-end]{display:inline-flex!important;align-items:center;gap:5px!important;border-radius:10px!important;background:var(--theme-primary)!important;color:#fff!important}
[data-countdown-end] > span{display:inline-flex;align-items:center;justify-content:center;min-width:25px;min-height:26px;padding:3px 5px;border-radius:7px;background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.2);font-variant-numeric:tabular-nums}
.dz-mobile-logo{max-width:112px!important}.dz-mobile-logo>a{gap:6px!important}.dz-mobile-logo>a>span{min-width:0}.dz-mobile-logo>a>span>span:first-child{font-size:14px!important;line-height:1.1!important}.dz-mobile-logo>a>img{width:38px!important;height:38px!important}
@media(max-width:380px){.dz-mobile-logo{max-width:88px!important}.dz-mobile-logo>a>img{width:32px!important;height:32px!important}.dz-mobile-logo>a>span>span:first-child{font-size:12px!important}.dz-mobile-header-box{width:32px;height:34px;flex-basis:32px}.dz-mobile-header-actions{gap:4px}}


/* Targeted mobile bottom navigation and footer layout */
.dz-bottom-nav{display:none}
@media(max-width:767px){
 body{padding-bottom:calc(72px + env(safe-area-inset-bottom,0px))}
 .dz-bottom-nav{position:fixed;left:10px;right:10px;bottom:calc(8px + env(safe-area-inset-bottom,0px));z-index:70;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:2px;padding:7px 6px;border:1px solid rgba(255,255,255,.48);border-radius:20px;background:rgba(255,255,255,.78);backdrop-filter:blur(18px) saturate(160%);-webkit-backdrop-filter:blur(18px) saturate(160%);box-shadow:0 8px 28px rgba(15,23,42,.16)}
 .dz-bottom-nav-item{min-width:0;min-height:48px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;border-radius:13px;color:#64748b;text-decoration:none;font-size:10px;font-weight:700;line-height:1.1;transition:background .18s,color .18s,transform .18s}
 .dz-bottom-nav-item svg{width:21px;height:21px;stroke:currentColor;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
 .dz-bottom-nav-item.is-active{background:var(--theme-primary,#173f5f);color:#fff;box-shadow:0 3px 10px rgba(23,63,95,.22)}
 .dz-bottom-nav-item:active{transform:scale(.96)}
 .floating-chat{bottom:calc(82px + env(safe-area-inset-bottom,0px))!important}
 #backToTop{bottom:calc(84px + env(safe-area-inset-bottom,0px))!important}
}
.dz-footer-main{display:flex;flex-direction:column;align-items:flex-start;text-align:left;gap:18px}
.dz-footer-brand-row{display:flex;flex-direction:column;align-items:flex-start;gap:10px;width:100%}
.dz-footer-brand{justify-content:flex-start!important;max-width:100%}
.dz-footer-description{max-width:680px;margin:0;color:rgba(255,255,255,.72);font-size:14px;line-height:1.7;text-align:left}
.dz-footer-socials{display:flex;justify-content:flex-start!important;align-items:center;gap:10px;flex-wrap:wrap}
.dz-footer-location{justify-content:flex-start!important;align-items:flex-start!important;gap:9px;width:100%;font-size:14px}
.dz-footer-location svg{width:21px!important;height:21px!important;flex:0 0 21px!important}
.dz-footer-links{display:flex;flex-direction:column;align-items:flex-start;gap:11px;width:100%;padding-top:3px}
.dz-footer-links a{color:rgba(255,255,255,.82);font-size:14px;text-decoration:none}
.dz-footer-links a:hover{color:#fff;text-decoration:underline}
.dz-footer-payments{width:100%;padding:16px;border:1px solid rgba(255,255,255,.13);border-radius:16px;background:rgba(255,255,255,.045)}
.dz-footer-payment-heading{display:flex;align-items:center;gap:12px;margin-bottom:14px}
.dz-footer-payment-heading>svg{width:34px;height:34px;flex:0 0 34px;padding:6px;border-radius:9px;background:rgba(255,255,255,.10)}
.dz-footer-payment-heading span{display:flex;flex-direction:column;gap:3px}
.dz-footer-payment-heading strong{font-size:16px;color:#fff}
.dz-footer-payment-heading small{font-size:11px;color:rgba(255,255,255,.65)}
.dz-footer-payment-methods{display:flex;align-items:stretch;gap:8px;flex-wrap:nowrap;overflow-x:auto;padding-bottom:3px;-webkit-overflow-scrolling:touch}
.dz-payment-method{display:flex;align-items:center;gap:6px;min-height:34px;padding:5px 8px;border:1px solid rgba(255,255,255,.13);border-radius:9px;background:rgba(255,255,255,.07);font-size:11px;color:#fff;white-space:nowrap}
.dz-payment-logo{display:inline-grid;place-items:center;width:23px;height:23px;border-radius:6px;background:#fff;color:#173f5f;font-size:10px;font-weight:900}
.dz-payment-bkash .dz-payment-logo{color:#e2136e}.dz-payment-nagad .dz-payment-logo{color:#f26522}.dz-payment-rocket .dz-payment-logo{color:#8b2a8d}.dz-payment-bank .dz-payment-logo{color:#16804a}.dz-payment-banglaqr .dz-payment-logo{color:#1264a3}
.dz-footer-bottom{width:100%;margin:0 auto}
.checkout-remove-item{width:27px;height:27px;display:grid;place-items:center;border:1px solid #fee2e2;border-radius:8px;background:#fff7f7;color:#dc2626;padding:5px;cursor:pointer}
.checkout-remove-item svg{width:15px;height:15px;stroke:currentColor;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.checkout-remove-item:hover{background:#fee2e2}
@media(min-width:768px){.dz-footer-main{display:grid;grid-template-columns:minmax(0,1fr) minmax(220px,.65fr);align-items:start;column-gap:44px;row-gap:20px}.dz-footer-brand-row{grid-column:1}.dz-footer-socials{grid-column:1}.dz-footer-location{grid-column:1}.dz-footer-links{grid-column:2;grid-row:1 / span 2}.dz-footer-payments{grid-column:1 / -1}}

@media(max-width:767px){.dz-mobile-logo{left:47%!important}}


/* Exact targeted fixes: prevent mobile header on desktop; keep Flash Sale title and View More aligned. */
@media(min-width:768px){.dz-mobile-global-header{display:none!important}}
@media(max-width:767px){
  .dz-mobile-global-header{display:flex}
  .dz-mobile-logo{left:50%;transform:translateX(-50%)}
  .dz-checkout-wrap,.dz-site-footer,.site-header,.dz-mobile-global-header{max-width:100%;overflow-x:clip}
}
@media(max-width:640px){
  .home-view-more{white-space:nowrap;flex:0 0 auto}
  section:has(>.flash-row) > div:first-child{align-items:center!important}
  section:has(>.flash-row) > div:first-child h2{display:flex;align-items:center;gap:6px;flex:1;min-width:0;white-space:nowrap;font-size:clamp(17px,4.5vw,24px)}
  section:has(>.flash-row) > div:first-child [data-countdown-end]{margin-left:4px!important;padding:4px 5px!important;font-size:10px!important;gap:3px!important}
  section:has(>.flash-row) > div:first-child [data-countdown-end] [data-h],
  section:has(>.flash-row) > div:first-child [data-countdown-end] [data-m],
  section:has(>.flash-row) > div:first-child [data-countdown-end] [data-s]{min-width:18px;min-height:21px}
}
.dz-success-check{background:color-mix(in srgb,var(--theme-primary,#173f5f) 12%,white)!important}
.dz-success-check:before{border-color:color-mix(in srgb,var(--theme-primary,#173f5f) 32%,transparent)!important}
.dz-success-check span{background:var(--theme-primary,#173f5f)!important}


/* PORISH desktop header — reference-inspired two-row layout */
.porish-desktop-header{background:#fff;color:#172033;box-shadow:0 2px 12px rgba(15,23,42,.045)}
.porish-desktop-top .max-w-7xl{min-height:88px}
.porish-desktop-brand{min-width:175px;max-width:220px}
.porish-desktop-brand img{width:46px;height:46px;border-radius:0!important}
.porish-desktop-search{height:48px;display:flex;align-items:center;border:1px solid #e5e7eb;border-radius:999px;background:#fff;box-shadow:0 1px 5px rgba(15,23,42,.06);overflow:hidden;max-width:760px}
.porish-desktop-search input{flex:1;min-width:0;height:100%;padding:0 20px;border:0;outline:0;background:transparent;color:#172033;font-size:14px}
.porish-desktop-search input::placeholder{color:#7b8492}
.porish-desktop-search button{height:100%;width:56px;display:grid;place-items:center;background:#fff;color:#172033;flex:0 0 56px}
.porish-desktop-search button:hover{background:#f8fafc}
.porish-desktop-search button svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.8}
.porish-desktop-actions{display:flex;align-items:center;justify-content:flex-end;gap:17px}
.porish-desktop-action{position:relative;display:flex;min-width:52px;flex-direction:column;align-items:center;justify-content:center;gap:4px;color:#172033;font-size:11px;font-weight:600;white-space:nowrap;background:transparent;border:0;padding:0}
.porish-desktop-action svg{width:24px;height:24px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.porish-desktop-action:hover{color:var(--theme-primary,#173f5f)}
.porish-header-count{position:absolute;top:-5px;right:5px;min-width:17px;height:17px;border-radius:999px;padding:0 4px;background:var(--theme-primary,#173f5f);color:white;font-size:10px;font-style:normal;font-weight:700;display:flex;align-items:center;justify-content:center}
.porish-desktop-nav .max-w-7xl{min-height:52px}
.porish-category-trigger{display:flex;align-items:center;gap:10px;align-self:stretch;padding:0 18px;background:#f3f4f6;color:#273244;font-size:13px;font-weight:800;text-transform:uppercase;white-space:nowrap}
.porish-category-trigger svg{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.porish-category-trigger .porish-chevron{width:14px;height:14px;margin-left:5px}
.porish-nav-link{height:52px;display:flex;align-items:center;padding:0 17px;color:#374151;font-size:13px;font-weight:700;text-transform:uppercase;white-space:nowrap;border-right:1px solid #f1f5f9}
.porish-nav-link:hover,.porish-nav-link.is-current{color:var(--theme-primary,#173f5f)}
.porish-hot-offer{gap:8px}
.porish-hot-offer span{width:22px;height:22px;display:grid;place-items:center;border-radius:50%;background:#e11d48;color:white;font-size:11px}
@media(max-width:1100px){.porish-desktop-top .max-w-7xl{gap:18px}.porish-desktop-brand{min-width:145px;max-width:165px}.porish-desktop-actions{gap:10px}.porish-nav-link{padding-inline:12px;font-size:12px}}
@media(min-width:768px) and (max-width:900px){.porish-desktop-brand{min-width:125px;max-width:130px}.porish-desktop-brand img{width:38px;height:38px}.porish-desktop-brand span span{font-size:17px}.porish-desktop-actions{gap:7px}.porish-desktop-action{min-width:43px;font-size:10px}.porish-desktop-action svg{width:21px;height:21px}.porish-nav-link{padding-inline:9px;font-size:11px}.porish-category-trigger{padding-inline:10px}}