/* PharmaWeb site system (Oct 2026) — one calm, flat layer loaded last.
 * Six colours: brand, ink, muted text, line, surface, page.
 * Functional colours (error / warning / star) are kept only where they carry meaning. */
html:root {
  --ss-brand: #047857;
  --ss-brand-ink: #03573F;
  --ss-ink: #14231E;
  --ss-muted: #4F5F59;
  --ss-line: #DCE4E0;
  --ss-surface: #FFFFFF;
  --ss-page: #F6F8F7;
  --ss-tint: #EAF4EF; /* brand at ~8%: selected/hover states only */

  --c-bg: var(--ss-page);
  --c-surface: var(--ss-surface);
  --c-surface-2: var(--ss-page);
  --c-surface-3: var(--ss-tint);
  --c-raised: var(--ss-surface);
  --c-border: var(--ss-line);
  --c-border-strong: #C5D1CB;
  --c-text-strong: var(--ss-ink);
  --c-text: var(--ss-ink);
  --c-text-2: var(--ss-muted);
  --c-text-3: var(--ss-muted);
  --c-brand: var(--ss-brand);
  --c-brand-hover: var(--ss-brand-ink);
  --c-brand-subtle: var(--ss-tint);
  --c-brand-text: var(--ss-brand-ink);
  --c-on-brand-subtle: var(--ss-brand-ink);
  /* the purple accent is retired: everything interactive is brand green */
  --c-accent: var(--ss-brand);
  --c-accent-hover: var(--ss-brand-ink);
  --c-accent-subtle: var(--ss-tint);
  --c-on-accent-subtle: var(--ss-brand-ink);
  --c-accent-text: var(--ss-brand-ink);
  --c-hero-from: var(--ss-page);
  --c-hero-to: var(--ss-page);
  --c-orb: transparent;
  --c-hero-glow: none;
  --c-cta-gradient: var(--ss-brand);
  --c-cta-shadow: none;
  --c-search-shadow: none;
  --c-shadow-1: none;
  --c-shadow-2: 0 1px 2px rgba(20, 35, 30, .06);
  --c-card-shadow: none;
  --c-hdr-bg: var(--ss-surface);
  --c-hdr-solid: var(--ss-surface);
  --c-hdr-border: var(--ss-line);

}
:root { --ss-r: 10px; --ss-r-card: 12px; --ss-space: 16px; }
@media (prefers-color-scheme: dark) {
  html:root:not([data-theme]) {
    --ss-ink: #E6EEEA; --ss-muted: #A7B6B0; --ss-line: #2A3833;
    --ss-surface: #141C19; --ss-page: #0E1412; --ss-tint: #16322A;
    --ss-brand: #34B98A; --ss-brand-ink: #5FD0A5; --c-border-strong: #3A4A44;
  }
}
html:root[data-theme="dark"] {
  --ss-ink: #E6EEEA; --ss-muted: #A7B6B0; --ss-line: #2A3833;
  --ss-surface: #141C19; --ss-page: #0E1412; --ss-tint: #16322A;
  --ss-brand: #34B98A; --ss-brand-ink: #5FD0A5; --c-border-strong: #3A4A44;
}

/* ---------- Typography scale (1.25 ratio) ---------- */
body { color: var(--ss-ink); background: var(--ss-page); font-size: 1rem; line-height: 1.65; }
main h1, .h1, main .display-4, main .display-5 { font-size: clamp(1.625rem, 1.25rem + 1.5vw, 2.25rem); line-height: 1.25; font-weight: 700; letter-spacing: 0; }
main h2, .h2 { font-size: clamp(1.3rem, 1.15rem + .6vw, 1.6rem); line-height: 1.3; font-weight: 700; letter-spacing: 0; }
main h3, .h3 { font-size: 1.15rem; line-height: 1.4; font-weight: 600; }
main h4, main h5, .h4, .h5 { font-size: 1rem; line-height: 1.45; font-weight: 600; }
main .lead, main .da-lead { font-size: 1.0625rem; color: var(--ss-muted); font-weight: 400; }
.text-muted, small, .small { color: var(--ss-muted) !important; }
main h1, main h2, main h3 { color: var(--ss-ink); -webkit-text-fill-color: currentColor; background: none; }

/* ---------- No decoration that reads as a template ---------- */
main *, .site-header *, footer * { text-shadow: none !important; }
main [class*="hero"], main [class*="cta"], main [class*="gradient"], main [class*="banner"],
.support-hero, .chat-cta-card, .success-card, .da-hero, .hero-section {
  background-image: none !important;
}
main *, header, .site-header, .navbar, nav { backdrop-filter: none !important; -webkit-backdrop-filter: none !important; }
.da-orb, [class*="orb"], [class*="glow"], .floating-animation, .pulse-animation,
.chat-cta-card::before, .support-hero::before, .support-card::before { animation: none !important; }
.da-orb { display: none !important; }

/* scroll-reveal content must be visible without scrolling or JS */
.animate-on-scroll, .fade-in-up, .fade-in, .reveal, .reveal-on-scroll, .reveal-stagger > *, .pdp-reveal,
[data-aos], [data-reveal], .animated, .animate__animated {
  opacity: 1 !important; transform: none !important; animation: none !important; transition: none !important; visibility: visible !important;
}
@media (prefers-reduced-motion: no-preference) {
  a, button, .btn, .form-control, .form-select { transition: background-color .15s, border-color .15s, color .15s; }
}

/* ---------- Flat cards ---------- */
.card, .support-card, .da-card, .pdp-buy-card, .pdp-key-facts, .pdp-about-panel, .pdp-datasheet-section,
.success-card, .info-box, .notice-box, .next-steps-box, .marketplace-info, .ticket-item, .accordion-item,
.da-product-card, .da-hero-vis .hv-card, .blog-card, .article-card, .category-card, .checkout-card, .order-card, .cart-card, .contact-item, .chat-feature {
  background: var(--ss-surface) !important;
  border: 1px solid var(--ss-line) !important;
  border-radius: var(--ss-r-card) !important;
  box-shadow: none !important;
}
.card:hover, .support-card:hover, .da-card:hover, .da-product-card:hover, .contact-item:hover, .chat-feature:hover, .ticket-item:hover,
.blog-card:hover, .article-card:hover, .category-card:hover {
  transform: none !important; box-shadow: none !important; border-color: var(--c-border-strong) !important;
}
.card-header { background: transparent !important; border-bottom: 1px solid var(--ss-line) !important; }

/* ---------- Buttons: one primary, one secondary ---------- */
.btn, .da-btn, .pdp-btn-add-to-cart, .btn-checkout, .chat-open-btn, button.btn-primary {
  border-radius: var(--ss-r) !important;
  min-height: 44px; padding: .55rem 1.1rem; font-weight: 600; font-size: .975rem;
  box-shadow: none !important; background-image: none !important; transform: none !important;
  letter-spacing: 0; text-transform: none;
}
.btn::before, .btn::after, .btn-primary::before { display: none !important; }
.btn-primary, .btn-success, .da-btn-primary, .pdp-btn-add-to-cart, .btn-checkout, .chat-open-btn {
  background-color: var(--ss-brand) !important; border: 1px solid var(--ss-brand) !important; color: #fff !important;
}
.btn-primary:hover, .btn-success:hover, .da-btn-primary:hover, .pdp-btn-add-to-cart:hover, .btn-checkout:hover, .chat-open-btn:hover {
  background-color: var(--ss-brand-ink) !important; border-color: var(--ss-brand-ink) !important; color: #fff !important;
}
.btn-outline-primary, .btn-outline-success, .btn-outline-secondary, .btn-outline-info, .btn-outline, .btn-light, .btn-outline-light, .btn-secondary, .da-btn-secondary {
  background-color: var(--ss-surface) !important; border: 1px solid var(--c-border-strong) !important; color: var(--ss-ink) !important;
}
.btn-outline-primary:hover, .btn-outline-success:hover, .btn-outline-secondary:hover, .btn-outline-info:hover, .btn-outline:hover, .btn-light:hover, .btn-outline-light:hover, .btn-secondary:hover, .da-btn-secondary:hover {
  background-color: var(--ss-tint) !important; border-color: var(--ss-brand) !important; color: var(--ss-brand-ink) !important;
}
.btn:focus-visible, a:focus-visible, button:focus-visible, .form-control:focus, .form-select:focus {
  outline: 2px solid var(--ss-brand) !important; outline-offset: 2px; box-shadow: none !important;
}

/* ---------- Forms ---------- */
main .form-control, main .form-select, main input[type="text"], main input[type="email"], main input[type="tel"],
main input[type="number"], main input[type="password"], main textarea, main select {
  border: 1px solid var(--c-border-strong) !important; border-radius: var(--ss-r) !important;
  background: var(--ss-surface) !important; color: var(--ss-ink); box-shadow: none !important;
  min-height: 44px; font-size: 1rem;
}
main textarea { min-height: 120px; }
/* The PDP quantity field sits inside its own bordered stepper; the generic field box above
   drew a second 28px box around the digit. */
main input.pdp-qty-input[type], main .pdp-qty-input { border: 0 !important; border-radius: 0 !important; background: transparent !important; min-height: 0; width: 40px; }
main .form-label, main label { font-weight: 600; font-size: .9375rem; color: var(--ss-ink); }
main .invalid-feedback { color: #B42318; }

/* ---------- Icon tiles become plain inline icons ---------- */
.contact-icon, .chat-feature-icon, .support-icon-pill, [class*="icon-tile"], [class*="feature-icon"] {
  background: none !important; box-shadow: none !important; color: var(--ss-brand) !important;
}
.chat-feature-icon .fa-3x, main .fa-3x { font-size: 1.5rem !important; }

/* ---------- Header & footer ---------- */
.site-header, header.da-header, .da-header, .navbar {
  background: var(--ss-surface) !important; border-bottom: 1px solid var(--ss-line) !important; box-shadow: none !important;
}
footer, .site-footer, .da-footer { background: var(--ss-surface) !important; border-top: 1px solid var(--ss-line); color: var(--ss-muted); }
footer a, .site-footer a, .da-footer a { color: var(--ss-ink); }
footer a:hover, .site-footer a:hover, .da-footer a:hover { color: var(--ss-brand-ink); text-decoration: underline; }
footer h2, footer h3, footer h4, footer h5, footer h6 { font-size: .9375rem !important; font-weight: 700; color: var(--ss-ink) !important; }

/* ---------- Chips: quiet, one style ---------- */
.da-filter-chip, .pdp-chip, .badge, .chip, [class*="-chip"] {
  background: var(--ss-page) !important; color: var(--ss-ink) !important; border: 1px solid var(--ss-line) !important;
  box-shadow: none !important; background-image: none !important; font-weight: 500; border-radius: 999px;
}
/* chip *lists* (…-chips containers) are layout only, not pills */
[class*="-chips"]:not(.da-filter-chip):not(.pdp-chip):not(.chip) { background: transparent !important; border: 0 !important; border-radius: 0 !important; }
.badge.bg-danger, .badge.text-bg-danger { background: #FDECEA !important; color: #B42318 !important; }

/* ---------- Sections & spacing rhythm ---------- */
.da-section, .pdp-how-section, .pdp-faq-section { padding-block: clamp(16px, 3vw, 32px); }

/* ---------- Mobile ---------- */
@media (max-width: 576px) {
  main .container, main .container-fluid { padding-inline: var(--ss-space); }
  main h1, main .display-4 { font-size: 1.5rem; }
  .btn, .da-btn { width: auto; }
  .support-hero, .hero-section { padding-block: 24px !important; }
  footer .row > * { margin-bottom: 16px; }
}

/* ---------- /drugs/: category card grid ---------- */
.da-landing-groups { display: grid !important; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 16px; columns: auto !important; }
.da-group-card { display: flex; flex-direction: column; gap: 6px; padding: 16px !important; margin: 0 !important; break-inside: avoid;
  background: var(--ss-surface) !important; border: 1px solid var(--ss-line) !important; border-radius: var(--ss-r-card) !important; box-shadow: none !important; }
.da-group-card h2 { font-size: 1.1rem !important; margin: 0; }
.da-group-card h2 a { color: var(--ss-ink); text-decoration: none; }
.da-group-card h2 a:hover { color: var(--ss-brand-ink); }
.da-group-en { margin: 0; color: var(--ss-muted); font-size: .85rem; }
.da-group-desc { margin: 0; color: var(--ss-muted); font-size: .9rem; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.da-group-count { margin: 0; font-weight: 600; font-size: .9rem; color: var(--ss-ink); }
.da-group-more summary { cursor: pointer; color: var(--ss-brand-ink); font-size: .9rem; }
.da-group-more .da-group-samples { margin-top: 8px; max-height: 260px; overflow: auto; }
.da-group-card .da-group-cta { margin-top: auto; align-self: flex-start; }

/* ---------- Footer seals: original artwork, fully visible ---------- */
.trust-badges-wrapper { display: flex !important; flex-wrap: wrap; justify-content: center; align-items: flex-start; gap: 16px 20px !important; }
.trust-badges-wrapper .trust-seal { display: inline-flex !important; flex-direction: column; align-items: center; gap: 6px; width: auto !important; min-width: 0 !important; padding: 0 !important; background: none !important; border: 0 !important; box-shadow: none !important; transform: none !important; animation: none !important; opacity: 1 !important; text-decoration: none; }
.trust-badges-wrapper .trust-seal::before { display: none !important; }
.trust-badges-wrapper .seal-frame { display: flex !important; align-items: center; justify-content: center; width: auto !important; height: 72px !important; min-width: 72px; padding: 8px 10px !important; background: #fff !important; border: 1px solid var(--ss-line) !important; border-radius: 10px !important; box-shadow: none !important; overflow: visible !important; }
.trust-badges-wrapper .seal-frame img { display: block !important; height: 56px !important; width: auto !important; max-width: 200px !important; object-fit: contain; opacity: 1 !important; filter: none !important; transform: none !important; }
.trust-badges-wrapper .trust-seal .badge-label { font-size: .75rem; color: var(--ss-muted) !important; }
.trust-badges-section h6 { color: var(--ss-ink) !important; font-size: .875rem !important; }
@media (max-width: 576px) {
  .trust-badges-wrapper { gap: 12px !important; }
  .trust-badges-wrapper .seal-frame { height: 60px !important; min-width: 60px; padding: 6px 8px !important; }
  .trust-badges-wrapper .seal-frame img { height: 46px !important; max-width: 150px !important; }
}

/* ---------- Home: calmer hero, clear hierarchy, even product cards ---------- */
.da-home .da-hero h1 { font-size: 17px; font-weight: 700; color: var(--ss-brand); line-height: 1.5; margin-block: 8px 0; letter-spacing: 0; }
.da-home .da-hero h1 br { display: none; }
.da-home .da-hero h1 > span { display: block; margin-block-start: 4px; font-size: 30px; font-weight: 800; line-height: 1.3; color: var(--ss-ink); }
.da-home .da-hero .da-lead { max-width: 46ch; margin-block: 12px 0; font-size: 16px; line-height: 1.75; color: var(--ss-muted); }
.da-home .da-hero-search { margin-block-start: 20px; border: 1px solid var(--ss-line); box-shadow: 0 1px 2px rgba(15, 23, 42, .05); background: var(--ss-surface); }
.da-home .da-hero-search button { box-shadow: none; border-radius: 10px; }
.da-home .da-hero-trust { gap: 8px; border-block-start: 0; padding-block-start: 0; margin-block-start: 16px; }
.da-home .da-hero-trust li { padding: 6px 10px; border: 1px solid var(--ss-line); border-radius: 999px; background: var(--ss-surface); color: var(--ss-ink); font-weight: 600; }
.da-home .da-hero-trust .da-icon { color: var(--ss-brand); }
/* mobile: the featured product becomes one compact row instead of a tall tile */
@media (max-width: 1023px) {
  .da-home .da-hero-vis { max-width: none; margin-block-start: 16px; }
  .da-home .da-hv-main { display: flex !important; align-items: center; gap: 12px; padding: 10px !important; border-radius: 12px !important; box-shadow: none !important; border: 1px solid var(--ss-line); }
  .da-home .da-hv-main .da-hv-well { width: 84px; height: 84px !important; flex: none; border-radius: 8px !important; background: #fff !important; }
  .da-home .da-hv-main .da-hv-well img { padding: 6% !important; }
  .da-home .da-hv-main .da-hv-cap { flex: 1; min-width: 0; padding: 0 !important; background: transparent !important; }
}
@media (min-width: 1024px) {
  .da-home .da-hero { padding-block: 24px 8px; }
  .da-home .da-hero-grid { min-height: 0; grid-template-columns: minmax(0, 1.25fr) minmax(0, .75fr); gap: 48px; padding: 48px 56px; border-radius: 20px; background: var(--ss-tint) !important; border: 1px solid var(--ss-line); box-shadow: none; }
  .da-home .da-hero h1 { font-size: 20px; }
  .da-home .da-hero h1 > span { font-size: 44px; line-height: 1.25; }
  .da-home .da-hero .da-lead { font-size: 18px; }
  .da-home .da-hero-trust { justify-content: flex-start; }
  .da-home .da-hero-vis { height: auto; display: flex; justify-content: center; }
  .da-home .da-hero-vis .hv-card { position: relative; inset: auto; margin: 0; width: 300px; border-radius: 16px; box-shadow: none; border: 1px solid var(--ss-line); }
  .da-home .da-hero-vis .da-hv-mini { display: none; }
  .da-home .da-hv-well { height: 240px; border-radius: 10px; background: #fff; }
}
/* sections: consistent rhythm and headings */
.da-home .da-section { padding-block: 32px; }
.da-home .da-section-head { padding-block-end: 12px; margin-block-end: 20px; border-block-end: 1px solid var(--ss-line); }
.da-home .da-section-head h2 { font-size: 20px; color: var(--ss-ink); }
@media (min-width: 1024px) { .da-home .da-section { padding-block: 44px; } .da-home .da-section-head h2 { font-size: 24px; } }
/* product cards: white photo well, aligned titles and price row */
.da-product-card { display: flex; flex-direction: column; }
.da-product-card .da-card-body { display: flex; flex-direction: column; flex: 1; }
.da-product-card .da-card-media { background: #fff; border: 1px solid var(--ss-line); border-radius: 10px; }
.da-product-card .da-card-media img { padding: 8%; }
.da-product-card .da-card-title { min-height: 3.1em; font-size: 15px; }
.da-product-card .da-card-foot { margin-block-start: auto; padding-block-start: 10px; }
.da-product-card .da-card-foot .da-price { font-size: 18px; font-weight: 800; color: var(--ss-ink); }
html[data-theme="dark"] .da-product-card .da-card-media, html[data-theme="dark"] .da-home .da-hv-well { background: #fff; }

/* ---------- Footer seals: alignment + mobile wrap; footer columns never overflow ---------- */
.trust-badges-wrapper { flex-wrap: wrap !important; justify-content: center !important; overflow: visible !important; padding: 8px 0 !important; }
.trust-badges-wrapper .trust-seal { flex-direction: column !important; align-items: center !important; flex-shrink: 0 !important; }
@media (max-width: 767px) {
  .trust-badges-wrapper { display: grid !important; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px 10px !important; padding: 8px 4px !important; }
  .trust-badges-wrapper .trust-seal { width: 100% !important; min-width: 0 !important; }
  .trust-badges-wrapper .seal-frame { width: 100% !important; min-width: 0 !important; height: 60px !important; padding: 6px !important; }
  .trust-badges-wrapper .seal-frame picture { display: flex; justify-content: center; width: 100%; }
  .trust-badges-wrapper .seal-frame img { height: auto !important; max-height: 46px !important; max-width: 100% !important; }
  .trust-badges-wrapper .trust-seal .badge-label { white-space: normal !important; font-size: .7rem; }
}
.trust-badges-wrapper .trust-seal .badge-label { align-self: center !important; text-align: center !important; margin: 0 !important; position: static !important; width: auto !important; }
.trust-badges-wrapper .seal-frame { box-shadow: none !important; transform: none !important; }
footer [class*="col"], .site-footer [class*="col"] { min-width: 0; }
footer a, footer p, footer li, footer span { overflow-wrap: anywhere; }

/* ---------- Product page: one calm card language, stronger title/price hierarchy ---------- */
.pdp-product-gallery, .pdp-gallery-main { background: #fff !important; border: 1px solid var(--ss-line) !important; border-radius: 14px !important; box-shadow: none !important; }
.pdp-product-image-main { mix-blend-mode: normal; }
.pdp-product-title { font-size: 24px !important; font-weight: 800 !important; line-height: 1.4 !important; color: var(--ss-ink) !important; letter-spacing: 0 !important; }
.pdp-product-subtitle { color: var(--ss-muted) !important; font-size: 14px !important; }
.pdp-buy-card, .pdp-datasheet-section, .pdp-how-step, .pdp-faq-item, .pdp-tab-panel { background: var(--ss-surface) !important; border: 1px solid var(--ss-line) !important; border-radius: 14px !important; box-shadow: none !important; }
.pdp-buy-card .da-price { color: var(--ss-ink); }
.pdp-datasheet-row { border-color: var(--ss-line) !important; }
.pdp-datasheet-row-label { color: var(--ss-muted) !important; }
.pdp-datasheet-row-value { color: var(--ss-ink) !important; font-weight: 600; }
.pdp-datasheet-icon, .pdp-fact-icon, .pdp-how-step-icon { background: var(--ss-tint) !important; color: var(--ss-brand) !important; box-shadow: none !important; }
.pdp-h-section-heading, .pdp-datasheet-title { color: var(--ss-ink) !important; font-weight: 800 !important; }
.pdp-reveal { opacity: 1 !important; transform: none !important; }
@media (min-width: 992px) { .pdp-product-title { font-size: 30px !important; } }

/* ---------- Header: quiet, single hairline ---------- */
.da-header, header.site-header, .navbar { box-shadow: none !important; }
.da-header { border-block-end: 1px solid var(--ss-line) !important; }

/* ---------- Blog: editorial cards, restrained placeholders ---------- */
.blog-wrapper .blog-card, .blog-wrapper .card { border: 1px solid var(--ss-line) !important; border-radius: 14px !important; box-shadow: none !important; transform: none !important; overflow: hidden; }
.blog-wrapper .blog-placeholder { height: 132px !important; min-height: 0 !important; background: var(--ss-tint) !important; border-block-end: 1px solid var(--ss-line); }
.blog-wrapper .blog-placeholder::after { display: none !important; }
.blog-wrapper .blog-placeholder i { font-size: 28px !important; opacity: .55 !important; }
.blog-wrapper .blog-placeholder-featured { height: 200px !important; }
.blog-wrapper .card-title, .blog-wrapper .blog-card-title-link { color: var(--ss-ink) !important; font-weight: 800 !important; line-height: 1.55 !important; }
.blog-wrapper .blog-excerpt, .blog-wrapper .card-text { color: var(--ss-muted) !important; }
.blog-wrapper .badge { font-weight: 600 !important; border-radius: 999px !important; }
.blog-wrapper .blog-film-card { border-radius: 12px !important; box-shadow: none !important; border: 1px solid var(--ss-line); }

/* ---------- Support: calm header, compact feature tiles, form first-class ---------- */
.support-hero { background: var(--ss-tint) !important; color: var(--ss-ink) !important; padding: 40px 0 32px !important; margin-bottom: 24px !important; border-block-end: 1px solid var(--ss-line); }
.support-hero::before { display: none !important; }
.support-hero h1, .support-hero .display-4 { font-size: clamp(24px, 4vw, 34px) !important; font-weight: 800 !important; color: var(--ss-ink) !important; }
.support-hero .lead, .support-hero p { color: var(--ss-muted) !important; font-size: 16px !important; }
.support-hero i { color: var(--ss-brand) !important; }
.support-card { background: var(--ss-surface) !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; border: 1px solid var(--ss-line) !important; border-radius: 14px !important; box-shadow: none !important; transform: none !important; }
.support-card::before { display: none !important; }
.chat-feature { padding: 16px !important; border-radius: 12px !important; }
.chat-feature-icon { width: 40px !important; height: 40px !important; margin-inline: auto; display: flex !important; align-items: center; justify-content: center; border-radius: 10px !important; background: var(--ss-tint) !important; color: var(--ss-brand) !important; font-size: 18px !important; box-shadow: none !important; }
.chat-feature-icon i { font-size: 18px !important; color: var(--ss-brand) !important; }
.chat-feature-title { font-size: 15px !important; font-weight: 700 !important; color: var(--ss-ink) !important; }
.chat-feature-desc { font-size: 13px !important; color: var(--ss-muted) !important; }
.floating-animation, .animate-on-scroll, .fade-in-up { animation: none !important; opacity: 1 !important; transform: none !important; }
.support-card .fa-3x, .support-card .fa-2x { font-size: 28px !important; }

/* ---------- Cart / checkout: styling only ---------- */
.da-cart-page .da-cart-empty, .da-cart-page .cart-item, .da-cart-page .da-cart-summary, .checkout-card, .checkout-section { border: 1px solid var(--ss-line) !important; border-radius: 14px !important; box-shadow: none !important; background: var(--ss-surface) !important; }
.da-cart-empty-icon { background: var(--ss-tint) !important; color: var(--ss-brand) !important; box-shadow: none !important; }
.da-purchase-steps .active .da-purchase-step-num, .da-purchase-steps .active .da-purchase-step-index { background: var(--ss-brand) !important; color: #fff !important; }

/* =====================  Pass 3  ===================== */
/* ---------- Header: solid bar, underline nav, framed cart ---------- */
.da-header { background: var(--ss-surface) !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; }
.da-logo-word b { color: var(--ss-ink); letter-spacing: 0; }
.da-logo-word small { color: var(--ss-muted); }
@media (min-width: 1024px) {
  .da-header-inner { height: 64px !important; }
  .da-header-nav { gap: 4px; align-self: stretch; display: flex; align-items: stretch; }
  .da-header-nav a { height: auto !important; border-radius: 0 !important; background: none !important; padding-inline: 10px !important; font-size: 14px !important; font-weight: 600; color: var(--ss-muted) !important; box-shadow: inset 0 -2px 0 transparent; transition: color .15s, box-shadow .15s; }
  .da-header-nav a:hover { color: var(--ss-ink) !important; }
  .da-header-nav a.active { color: var(--ss-ink) !important; box-shadow: inset 0 -2px 0 var(--ss-brand); }
  .da-header .da-cart { background: var(--ss-surface) !important; border: 1px solid var(--ss-line); border-radius: 10px !important; height: 40px !important; }
}
.da-header .da-ib { border-radius: 10px !important; color: var(--ss-ink); }
.da-header .da-ib:hover { background: var(--ss-tint) !important; }
.da-header .da-search-trigger, .da-header form[role="search"], .da-header .da-header-search { border: 1px solid var(--ss-line) !important; border-radius: 10px !important; background: var(--ss-page) !important; box-shadow: none !important; }

/* ---------- Listing + category pages ---------- */
.da-catalog-heading { padding-block: 8px 4px; }
.da-catalog-title { font-size: clamp(22px, 3vw, 30px) !important; font-weight: 800 !important; color: var(--ss-ink) !important; letter-spacing: 0 !important; }
.da-catalog-subtitle { color: var(--ss-muted) !important; font-size: 15px !important; }
.da-catalog-search { border: 1px solid var(--ss-line) !important; border-radius: 12px !important; box-shadow: none !important; background: var(--ss-surface) !important; height: 50px !important; }
.da-catalog-search:focus-within { border-color: var(--ss-brand) !important; }
.da-catalog-filters { gap: 8px !important; padding-block: 4px 12px; border-block-end: 1px solid var(--ss-line); margin-block-end: 16px; }
.da-filter-button, .da-filter-chip { height: 36px !important; padding-inline: 12px !important; border-radius: 8px !important; border: 1px solid var(--ss-line) !important; background: var(--ss-surface) !important; color: var(--ss-ink) !important; font-size: 13.5px !important; font-weight: 600 !important; box-shadow: none !important; }
.da-filter-chip:hover, .da-filter-button:hover { border-color: var(--ss-brand) !important; color: var(--ss-brand) !important; }
.da-filter-chip.on, .da-filter-chip[aria-current="page"] { background: var(--ss-ink) !important; border-color: var(--ss-ink) !important; color: #fff !important; }
.da-filter-row { -webkit-mask-image: linear-gradient(to right, #000 90%, transparent); mask-image: linear-gradient(to right, #000 90%, transparent); }
html[dir="rtl"] .da-filter-row { -webkit-mask-image: linear-gradient(to left, #000 90%, transparent); mask-image: linear-gradient(to left, #000 90%, transparent); }
.da-filter-panel { border: 1px solid var(--ss-line) !important; border-radius: 12px !important; box-shadow: 0 8px 24px rgba(15,23,42,.08) !important; }
.da-landing-hero { background: var(--ss-tint) !important; border: 1px solid var(--ss-line) !important; border-radius: 16px !important; box-shadow: none !important; }
.da-landing-hero h1 { font-size: clamp(22px, 3vw, 30px) !important; color: var(--ss-ink) !important; }
.da-landing-intro { background: transparent !important; border: 0 !important; padding: 0 !important; color: var(--ss-muted); }
.da-group-card { border: 1px solid var(--ss-line) !important; border-radius: 12px !important; box-shadow: none !important; padding: 18px !important; transition: border-color .15s; }
.da-group-card:hover { border-color: var(--ss-brand) !important; transform: none !important; }
.da-group-card h2 { font-size: 17px !important; }
.da-group-card h2 a { color: var(--ss-ink) !important; }
.da-group-en { color: var(--ss-muted) !important; font-size: 12px !important; margin: 0 !important; }
.da-group-desc { color: var(--ss-muted) !important; font-size: 13.5px !important; }
.da-group-count { display: inline-block; align-self: flex-start; padding: 2px 8px; border-radius: 6px; background: var(--ss-tint); color: var(--ss-brand) !important; font-size: 12.5px !important; font-weight: 700; }
.da-group-more summary { color: var(--ss-ink) !important; font-size: 13px; font-weight: 600; }

/* ---------- Product grid polish (listing, category, home) ---------- */
.da-catalog .da-products, .da-catalog .da-grid { gap: 16px !important; }
.da-quick-add { border-radius: 8px !important; box-shadow: none !important; }
.da-favorite { background: rgba(255,255,255,.92) !important; border: 1px solid var(--ss-line) !important; box-shadow: none !important; }
.da-product-card .product-rating { margin-block-start: 4px; }
.da-product-card .product-rating .stars { color: #d4a017; }
@media (max-width: 767px) {
  .da-catalog .da-products, .da-catalog .da-grid { gap: 10px !important; }
  .da-product-card .da-card-body { padding: 10px !important; }
  .da-product-card .da-card-title { font-size: 14px !important; }
  .da-product-card .da-card-foot .da-price { font-size: 16px; }
}

/* ---------- Home categories: text chips, small line icons, no blobs ---------- */
.da-cat { height: 44px !important; padding-inline: 10px 14px !important; border-radius: 10px !important; border: 1px solid var(--ss-line) !important; box-shadow: none !important; background: var(--ss-surface) !important; color: var(--ss-ink) !important; font-weight: 600; }
.da-cat:hover { border-color: var(--ss-brand) !important; }
.da-cat .cat-ill { width: 24px !important; height: 24px !important; background: none !important; border-radius: 0 !important; }
.da-cat .cat-ill .ill { width: 22px !important; height: 22px !important; }
.da-cat-count { color: var(--ss-muted) !important; }

/* ---------- Support: compact tiles on mobile, fewer decorative icons ---------- */
.support-hero h1 i, .chat-cta-icon { display: none !important; }
.chat-cta-card { padding: 28px 24px !important; }
.chat-cta-title { font-size: 22px !important; color: var(--ss-ink) !important; }
@media (max-width: 767px) {
  .chat-features { display: grid !important; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px !important; }
  .chat-feature { padding: 10px 6px !important; margin: 0 !important; }
  .chat-feature-icon { width: 32px !important; height: 32px !important; margin-bottom: 6px !important; }
  .chat-feature-title { font-size: 12.5px !important; line-height: 1.5 !important; }
  .chat-feature-desc { display: none !important; }
  .chat-cta-card { padding: 20px 16px !important; }
  .support-hero { padding: 28px 0 24px !important; }
  .support-hero .btn-lg { font-size: 15px !important; padding: 10px 16px !important; }
}
.support-hero .btn i, .chat-open-btn .fa-arrow-left { display: none !important; }

/* ---------- Support: Telegram admin card, flat like the other contact rows ---------- */
.support-telegram { margin-top: 16px; padding: 14px 16px !important; background: var(--ss-surface) !important; border: 1px solid var(--ss-line) !important; border-radius: 12px !important; box-shadow: none !important; transform: none !important; text-align: start; }
.support-telegram h6 { font-size: 15px !important; color: var(--ss-ink) !important; margin-bottom: 4px !important; }
.support-telegram .btn { border-radius: 8px !important; border-color: var(--ss-line) !important; color: var(--ss-brand) !important; background: var(--ss-surface) !important; font-weight: 600; }
.support-telegram .btn:hover { border-color: var(--ss-brand) !important; }

/* =====================  Pass 4: detail pass  ===================== */
/* ---------- Contrast fix: heroes that kept white text on a light background ---------- */
html body .hero-faq, html body .coverage-hero, html body .app-dl-hero { background: var(--ss-tint) !important; color: var(--ss-ink) !important; border-block-end: 1px solid var(--ss-line); padding-block: 36px 28px !important; }
html body .hero-faq::before, html body .hero-faq::after, html body .coverage-hero::before, html body .coverage-hero::after, html body .app-dl-hero::before, html body .app-dl-hero::after { display: none !important; }
html body .hero-faq h1, html body .coverage-hero h1, html body .app-dl-hero h1 { color: var(--ss-ink) !important; font-size: clamp(24px, 3.4vw, 34px) !important; font-weight: 800 !important; text-shadow: none !important; }
html body .hero-faq p, html body .hero-faq .lead, html body .coverage-hero p, html body .coverage-lead, html body .app-dl-hero p { color: var(--ss-muted) !important; opacity: 1 !important; text-shadow: none !important; }
html body .coverage-kicker, html body .app-dl-kicker, html body .app-dl-brand { color: var(--ss-brand) !important; opacity: 1 !important; text-shadow: none !important; }
html body .hero-faq .breadcrumb-nav, html body .hero-faq .breadcrumb-nav span { color: var(--ss-muted) !important; }
html body .coverage-hero .coverage-lead { color: var(--ss-muted) !important; }
html body .coverage-hero .coverage-kicker { color: var(--ss-brand) !important; }
html body .hero-faq .breadcrumb-nav a, html body .coverage-hero a { color: var(--ss-brand) !important; }
html body .hero-faq h1 i { display: none; }
html body .app-dl-brand-mark { box-shadow: none !important; }

/* ---------- Breadcrumbs: one style everywhere ---------- */
.da-crumbs, .pdp-breadcrumb-list, .breadcrumb, .breadcrumb-nav { font-size: 13px !important; line-height: 1.6; }
.da-crumbs a, .pdp-breadcrumb-list a, .breadcrumb a { color: var(--ss-muted) !important; text-decoration: none; }
.da-crumbs a:hover, .pdp-breadcrumb-list a:hover, .breadcrumb a:hover { color: var(--ss-brand) !important; }
.da-crumbs [aria-current="page"], .breadcrumb-item.active { color: var(--ss-ink) !important; font-weight: 600; }

/* ---------- Focus states (keyboard) ---------- */
a:focus-visible, button:focus-visible, summary:focus-visible, [role="button"]:focus-visible, .da-filter-chip:focus-visible { outline: 2px solid var(--ss-brand) !important; outline-offset: 2px !important; border-radius: 6px; }
input:focus-visible, select:focus-visible, textarea:focus-visible { outline: 0 !important; border-color: var(--ss-brand) !important; box-shadow: 0 0 0 3px rgba(4,120,87,.15) !important; }

/* ---------- Article (blog) ---------- */
.article-content .mag-h, .mag-h { border-inline-start: 0 !important; padding-inline-start: 0 !important; color: var(--ss-ink) !important; font-size: 1.35rem !important; font-weight: 800 !important; line-height: 1.5 !important; }
.article-content h3.mag-h { font-size: 1.12rem !important; font-weight: 700 !important; }
.article-content .mag-takeaways, .mag-takeaways { background: var(--ss-tint) !important; border: 1px solid var(--ss-line) !important; border-radius: 12px !important; box-shadow: none !important; }
.mag-takeaways-title { font-size: 1.05rem !important; color: var(--ss-ink) !important; }
.mag-takeaways-title i { display: none !important; }
.article-content .mag-lead, .mag-lead { border-inline-start: 0 !important; padding-inline-start: 0 !important; }
.article-title { color: var(--ss-ink) !important; font-size: clamp(1.45rem, 3vw, 2rem) !important; line-height: 1.45 !important; }
.article-content { color: #1f2937; line-height: 2 !important; }

/* ---------- FAQ sidebar ---------- */
html body .sidebar-group { border: 1px solid var(--ss-line) !important; border-radius: 12px !important; box-shadow: none !important; }
html body .sidebar-group h3 { font-size: 15px !important; color: var(--ss-ink) !important; }
.sidebar-group h3 i { display: none !important; }
html body .sidebar-group .badge { background: var(--ss-tint) !important; color: var(--ss-muted) !important; font-weight: 600 !important; border-radius: 6px !important; min-width: 28px; }
.faq-card, .accordion-item { border-color: var(--ss-line) !important; box-shadow: none !important; }

/* ---------- Cart: aligned trust list, solid coupon field, item row ---------- */
.da-cart-trust { display: grid; gap: 8px; padding-top: 12px; margin-top: 12px; border-top: 1px solid var(--ss-line); }
.da-cart-trust li, .da-cart-trust li a { display: flex !important; align-items: center; gap: 8px; color: var(--ss-muted) !important; font-size: 13px !important; line-height: 1.6; }
.da-cart-trust li svg, .da-cart-trust .da-cart-trust__fa { display: none !important; }
.da-cart-trust li::before { content: ""; flex: none; width: 6px; height: 6px; border-radius: 50%; background: var(--ss-brand); }
.da-cart-trust li:has(> a)::before { display: none; }
.da-cart-trust li a::before { content: ""; flex: none; width: 6px; height: 6px; border-radius: 50%; background: var(--ss-brand); }
.da-cart-trust li a span { text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--ss-line); }
.coupon-form input, .coupon-wrapper input { border: 1px solid var(--ss-line) !important; border-style: solid !important; border-radius: 8px !important; }
.da-cart-summary-row { font-size: 14px; }
.da-cart-total { border-top: 1px solid var(--ss-line); padding-top: 12px; font-weight: 800; color: var(--ss-ink); }
.da-cart-primary { border-radius: 10px !important; box-shadow: none !important; min-height: 48px; }
.da-cart-page .cart-item img, .da-cart-page .da-cart-item img { background: #fff; border: 1px solid var(--ss-line); border-radius: 8px; object-fit: contain; }
.da-purchase-steps { border-bottom: 1px solid var(--ss-line); }

/* ---------- Product page details ---------- */
.pdp-product-chips .da-filter-chip, .pdp-product-chips span { border-radius: 6px !important; }
.pdp-tab-btn { font-weight: 600 !important; color: var(--ss-muted) !important; border-radius: 0 !important; }
.pdp-tab-btn.pdp-active, .pdp-tab-btn[aria-selected="true"] { color: var(--ss-ink) !important; box-shadow: inset 0 -2px 0 var(--ss-brand) !important; }
.pdp-faq-question { color: var(--ss-ink) !important; font-weight: 700 !important; }
.pdp-share-btn { border-radius: 8px !important; }
.pdp-qty-btn { border-radius: 8px !important; }
.pdp-action-btn { border-radius: 10px !important; box-shadow: none !important; }

/* ---------- Prices: one treatment ---------- */
.da-price { font-variant-numeric: tabular-nums; letter-spacing: 0; }
.da-price .da-dec { font-size: .72em; font-weight: 700; }
.da-price .da-cur { font-weight: 700; margin-inline-end: 1px; }

/* ---------- Footer columns ---------- */
.site-footer h5, .site-footer h6, .footer-nav-section h6, .footer-nav-section h5 { font-size: 14px !important; font-weight: 700 !important; color: var(--ss-ink) !important; margin-bottom: 12px !important; letter-spacing: 0; }
.site-footer .footer-nav-link { display: inline-flex; align-items: center; gap: 6px; font-size: 13.5px !important; line-height: 1.9; color: var(--ss-muted) !important; }
.site-footer .footer-nav-link:hover { color: var(--ss-brand) !important; }
.site-footer .footer-nav-link i { width: 16px; text-align: center; font-size: 12px; opacity: .7; }

/* ---------- Mobile 360-414 ---------- */
@media (max-width: 767px) {
  .da-home .da-hero-trust { flex-wrap: wrap !important; overflow: visible !important; margin-inline: 0 !important; padding-inline: 0 !important; }
  .da-home .da-hero-trust li { font-size: 12px; padding: 5px 9px; }
  .da-crumbs { white-space: nowrap; overflow-x: auto; scrollbar-width: none; }
}
@media (max-width: 380px) {
  .da-header-inner { padding-inline: 12px !important; gap: 8px !important; }
  .da-home .da-hero h1 > span { font-size: 26px; }
  .da-home .da-hero-search button { padding-inline: 16px !important; }
  .da-product-card .da-card-title { font-size: 13.5px !important; }
  .da-product-card .da-card-foot .da-price { font-size: 15px; }
  .pdp-product-title { font-size: 21px !important; }
  .article-title { font-size: 1.35rem !important; }
}

/* ---------- Header fit: search shrinks first so actions/cart never clip (long LTR labels) ---------- */
@media (min-width: 1024px) {
  .da-header-inner { min-width: 0; }
  .da-header-search { flex: 1 1 200px !important; min-width: 140px !important; max-width: 340px !important; width: auto !important; }
  .da-header-actions { flex: none !important; }
  .da-header-nav { flex: none; }
  .da-logo { flex: none; }
}
@media (min-width: 1024px) and (max-width: 1279px) {
  .da-header-nav a { padding-inline: 8px !important; font-size: 13.5px !important; }
}

/* ---------- Fonts: one stack per script (p9) ----------
 * home.css hard-codes "Inter, Vazirmatn" on .da-home, so fa/ar headings and body text on the
 * home page rendered Latin-first and mixed with other pages. Vazirmatn ships Latin glyphs too. */
html[dir="rtl"] body, html[dir="rtl"] .da-home, html[dir="rtl"] main,
html[dir="rtl"] .site-header, html[dir="rtl"] .site-footer,
html[dir="rtl"] button, html[dir="rtl"] input, html[dir="rtl"] select, html[dir="rtl"] textarea {
  font-family: "Vazirmatn", "Inter", system-ui, -apple-system, sans-serif;
}
html[dir="ltr"] body, html[dir="ltr"] .da-home, html[dir="ltr"] main,
html[dir="ltr"] button, html[dir="ltr"] input, html[dir="ltr"] select, html[dir="ltr"] textarea {
  font-family: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
}
main h2, .da-home h2 { font-weight: 700; }

/* ---------- Footer on phones: two readable columns instead of three cramped ones ---------- */
@media (max-width: 575.98px) {
  .site-footer .footer-nav-section { display: grid !important; grid-template-columns: 1fr 1fr !important; gap: 20px 16px !important; }
  .site-footer .footer-nav-section > div:last-child { grid-column: 1 / -1; }
  .site-footer .footer-nav-section * { white-space: normal !important; max-width: 100%; overflow-wrap: anywhere; }
}

/* ---------- PDP description/specs tabs (p9) ----------
 * The tab panel and the article inside it both got a card border, with no padding,
 * so text ran into the border. One card, with padding; the wider column goes to the description. */
.pdp-tab-panel { border: 0 !important; background: transparent !important; padding: 0 !important; }
.pdp-about-panel, .pdp-datasheet-section { padding: 20px 22px !important; overflow-wrap: anywhere; }
.pdp-about-header { margin-bottom: 12px; }
.pdp-about-panel p { line-height: 1.85; }
@media (min-width: 992px) {
  .pdp-detail-grid { grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr) !important; gap: 32px !important; }
}

/* ---------- Dark mode + PDP/mobile clean-up (p9) ---------- */
/* the colour mapping above now applies in both themes; these few kept light-only values */
html[data-theme="dark"] .da-favorite, html[data-theme="dark"] .pdp-gallery-heart { background: var(--ss-surface) !important; color: var(--ss-ink) !important; border: 1px solid var(--ss-line) !important; }
html[data-theme="dark"] input[type="checkbox"]:not(:checked) { background-color: var(--ss-surface); border-color: var(--ss-line); }
.pdp-safety-card { background: var(--ss-tint) !important; color: var(--ss-ink) !important; border: 1px solid var(--ss-line); }
.pdp-safety-card-title { color: var(--ss-brand-ink) !important; }
/* gallery: a plain white photo well, image fills it */
.da-pdp .pdp-gallery-main { background: #fff !important; border: 1px solid var(--ss-line) !important; }
.da-pdp .pdp-gallery-main img { width: 100%; height: 100%; max-height: 420px; object-fit: contain; }
/* the generic name already shows under the title and in the specs; the stray repeat below the buy box is noise */
.da-pdp .pdp-product-info > .pdp-aka { display: none !important; }
/* phones: the bottom nav + chat bubble are enough; drop the extra back-to-top circle */
@media (max-width: 767.98px) {
  .scroll-to-top, #scrollToTop { display: none !important; }
}

/* ---------- Checkout + order success (styling only, p9) ---------- */
.checkout-container .container { max-width: 1200px !important; margin-inline: auto !important; padding-inline: 16px !important; }
.checkout-container .summary-value--pending { color: var(--ss-muted); font-weight: 600; font-size: .875rem; }
.checkout-container .checkout-hero { padding-block: 20px 8px !important; }
.order-success-container .next-steps-box { padding: 16px 20px !important; }
.order-success-container .next-steps-box ol { padding-inline-start: 1.25rem; margin: 8px 0 12px; line-height: 1.9; }
.order-success-container .next-steps-box ol li { padding-inline-start: 4px; }
.order-success-container .next-steps-box > a { color: var(--ss-brand-ink); font-weight: 600; display: inline-block; }
.order-success-container .action-buttons { flex-wrap: wrap; gap: 10px; }
@media (max-width: 575.98px) { .order-success-container .action-buttons > * { flex: 1 1 100%; justify-content: center; } }

/* ---------- Home: "how your order works" block on phones (p9) ----------
 * The section card touched the screen edges and held a stack of boxed items: box-in-box clutter. */
.da-home .marketplace-info { margin-inline: 16px !important; padding: 0 !important; border-radius: var(--ss-r-card) !important; }
.da-home .marketplace-info-points li { border: 0 !important; border-bottom: 1px solid var(--ss-line) !important; border-radius: 0 !important; background: transparent !important; padding: 12px 0 !important; box-shadow: none !important; }
.da-home .marketplace-info-points li:last-child { border-bottom: 0 !important; }
@media (min-width: 992px) { .da-home .marketplace-info { margin-inline: auto !important; max-width: 1200px; } }

/* ---------- Full-width page heads on phones (p9) ----------
 * Shipping/support/FAQ heads are full-bleed; side borders and rounded corners read as a clipped card. */
@media (max-width: 575.98px) {
  .legal-hero, .support-hero, .hero-faq { border-inline: 0 !important; border-radius: 0 !important; box-shadow: none !important; }
  .legal-hero { padding-block: 28px !important; }
}
/* tablets: product grids keep comfortable gutters */
@media (min-width: 576px) and (max-width: 991.98px) {
  main .container, .da-pdp .pdp-wrap { padding-inline: 20px !important; }
}

/* ---------- Listings: no card-in-card, readable intro, tablet grid (p9) ---------- */
.da-product-card .da-card-media { border: 0 !important; border-radius: calc(var(--ss-r-card) - 4px) !important; }
.da-catalog-subtitle { white-space: normal !important; text-overflow: clip !important; overflow: visible !important; }
main select { max-width: 100%; text-overflow: ellipsis; }
@media (max-width: 400px) { main select { font-size: 14px !important; min-width: 150px; } }
@media (min-width: 640px) and (max-width: 991.98px) {
  .da-catalog-grid { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; gap: 14px !important; }
}
.support-telegram-btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; }

/* ---------- Home product cards: even title block (p9) ----------
 * Titles are clamped to two lines so a row's prices line up; cards without ratings keep a small, even gap. */
.da-home .da-product-card .da-card-title { min-height: 2.9em; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }

/* ---------- Header search: page styles (cart/checkout) must not restyle its input (p9) ---------- */
.site-header .da-header-search input, .da-header-search input {
  border: 0 !important; background: transparent !important; box-shadow: none !important;
  height: auto !important; min-height: 0 !important; padding-block: 0 !important; border-radius: 0 !important;
}
/* RTL: forward arrows on CTAs point left */
html[dir="rtl"] .da-cart-empty a svg { transform: scaleX(-1); }

/* ---------- Magazine: quieter image-less placeholders (p9) ---------- */
html[data-theme="dark"] .blog-wrapper .blog-placeholder { background: var(--ss-page) !important; }
html[data-theme="dark"] .blog-wrapper .blog-placeholder i { color: var(--ss-muted) !important; opacity: .45 !important; }
@media (max-width: 575.98px) { .blog-wrapper .blog-placeholder { height: 96px !important; } }

/* ---------- Article callouts in dark mode (p9): light boxes kept light text = unreadable ---------- */
html[data-theme="dark"] .mag-callout { background: var(--ss-surface) !important; color: var(--ss-ink) !important; border: 1px solid var(--ss-line) !important; }
html[data-theme="dark"] .mag-callout--tip { border-inline-start: 3px solid var(--ss-brand) !important; }
html[data-theme="dark"] .mag-callout--warning { border-inline-start: 3px solid #D9A441 !important; }
html[data-theme="dark"] .mag-callout * { color: inherit; }
html[data-theme="dark"] .mag-callout a { color: var(--ss-brand-ink) !important; }

/* ---------- Product imagery: one frame everywhere (p9) ----------
 * Square white well, even padding, image contained: photos with backgrounds and clean pack shots sit alike. */
.da-product-card .da-card-media { aspect-ratio: 1 / 1; background: #fff !important; padding: 10px; display: flex !important; align-items: center; justify-content: center; overflow: hidden; }
.da-product-card .da-card-media img { width: 100% !important; height: 100% !important; object-fit: contain !important; aspect-ratio: auto; }
.da-pdp .pdp-gallery-main { aspect-ratio: 1 / 1; padding: 16px; display: flex; align-items: center; justify-content: center; }
.da-pdp .pdp-gallery-main img { max-height: 100%; }

/* ---------- Buy box hierarchy (p9): price → availability → CTA → reassurance → shipping note ---------- */
.da-pdp .pdp-buy-card { padding: 20px !important; }
.da-pdp .pdp-buy-card .da-price, .da-pdp .pdp-price-main { font-size: 2rem !important; line-height: 1.1; }
.da-pdp .pdp-buy-card .btn-primary, .da-pdp .pdp-buy-card button[type="submit"] { min-height: 52px; font-size: 1rem !important; font-weight: 700 !important; border-radius: var(--ss-r) !important; }
.da-pdp .pdp-buy-card ul, .da-pdp .pdp-buy-card .pdp-trust { color: var(--ss-muted); font-size: .875rem; }

/* ---------- Auth pages below desktop (p9): the side panel is hidden, so the outer layout frame
 * drew a second card around the form (double border, offset tops). Keep one card. ---------- */
@media (max-width: 991.98px) {
  .auth-layout { border: 0 !important; background: transparent !important; box-shadow: none !important; padding: 0 !important; }
  .auth-wrapper, .auth-stage { padding-top: 16px !important; }
}
@media (max-width: 575.98px) {
  .auth-card { padding: 24px 18px !important; }
}

/* v2.9 order history: help box as a quiet card (the bare ? icon read as a stray glyph) */
.help-box { margin-top: 16px; padding: 16px; border: 1px solid var(--ss-line); border-radius: 12px; background: var(--ss-surface); }
.help-box .btn { min-height: 40px; }
/* v2.9 tablets/desktop: back-to-top sits directly above the chat bubble instead of under it */
@media (min-width: 768px) {
  .scroll-to-top, #scrollToTop { right: auto !important; left: auto !important; inset-inline-end: max(22px, calc(env(safe-area-inset-right, 0px) + 22px)) !important; bottom: calc(var(--pw-chat-bottom, 72px) + 72px) !important; }
}
@media (min-width: 1024px) {
  .scroll-to-top, #scrollToTop { inset-inline-end: 26px !important; bottom: calc(var(--pw-chat-bottom, 72px) + 80px) !important; }
}
/* v2.9 flash toast: lifted card so it never blends into the header; visible close in dark */
.toast-container .toast, #cart-toast { border: 1px solid var(--ss-line) !important; border-radius: 12px !important; box-shadow: 0 8px 28px rgba(0,0,0,.14) !important; }
.toast-container .toast .toast-body { flex: 1 1 auto; padding: 12px 14px; line-height: 1.6; }
html[data-theme="dark"] .toast-container .toast, html[data-theme="dark"] #cart-toast { box-shadow: 0 8px 28px rgba(0,0,0,.5) !important; }
html[data-theme="dark"] .toast .btn-close { filter: invert(1) grayscale(1) brightness(1.6); }

/* v3.0 phones: keep links clear of the floating chat bubble without hiding it */
@media (max-width: 767.98px) {
  /* 404 suggestion chips stay out of the bubble's corner */
  .pw-404__chips { padding-inline-end: 48px; }
  /* the end of every page can scroll above the bubble */
  body > footer, body footer.site-footer { padding-bottom: calc(64px + env(safe-area-inset-bottom, 0px)) !important; }
}
/* v3.0 checkout "address required" dialog (styling only): centred in RTL and LTR at every width */
#addressMissingModal[style*="display: block"] { display: flex !important; align-items: center; justify-content: center; inset: 0 !important; left: 0 !important; top: 0 !important; transform: none !important; width: 100% !important; max-width: none !important; padding: 16px; }
#addressMissingModal .modal-dialog { width: 100%; max-width: 480px; margin: 0 auto !important; }
#addressMissingModal .modal-content { border: 1px solid var(--ss-line); border-radius: 16px; box-shadow: 0 16px 48px rgba(0,0,0,.2); overflow: hidden; }
#addressMissingModal .modal-header, #addressMissingModal .modal-body, #addressMissingModal .modal-footer { padding: 16px 20px; }
#addressMissingModal .modal-title { font-size: 1.05rem; font-weight: 700; }
#addressMissingModal .modal-body { line-height: 1.8; }
@media (max-width: 480px) { #addressMissingModal .modal-footer .btn { width: 100%; min-height: 48px; } }
#addressMissingModal .modal-header, #addressMissingModal .modal-footer { border-color: var(--ss-line) !important; }

/* v3.1 form pages vs the always-visible chat bubble */
/* tablets/small desktops: the sign-in card stops before the bubble column instead of running edge to edge */
@media (min-width: 769px) and (max-width: 1199.98px) {
  body.auth-experience .auth-layout { width: min(100%, calc(100vw - 184px)) !important; }
}
/* phones: drop the decorative icon tile so the first controls sit above the bubble at rest */
@media (max-width: 767.98px) {
  body.auth-experience .auth-header .logo-circle { display: none !important; }
  body.auth-experience .auth-header { margin-bottom: 12px !important; }
  /* the small 'forgot password' link sits on the bubble's side: keep it out of that corner */
  body.auth-experience .forgot-link { margin-inline-end: 44px; }
}
/* v3.1 purchase sticky bar on narrow phones: the total never gets cut by the button (styling only) */
@media (max-width: 400px) {
  .da-bottom-summary { column-gap: 8px !important; padding-inline: 12px !important; }
  .da-bottom-summary__total .da-price { font-size: 18px !important; white-space: nowrap; }
  .da-bottom-summary__actions .da-primary { padding-inline: 14px !important; font-size: 14px !important; white-space: nowrap; }
}

/* Internal-links block (middleware-injected) on non-home pages: on phones each link was a
   29px-tall inline text run, too small to tap reliably. Same links and order; each becomes
   its own 40px row. Home keeps its SEO block untouched. */
@media (max-width: 767.98px) {
  body:not(.home-page) .seo-internal-links a { display: flex; align-items: center; min-height: 40px; }
  body:not(.home-page) .seo-internal-links br { display: none; }
  body:not(.home-page) .seo-internal-links strong { display: block; margin-block-end: 2px; }
}

/* Classic footer (non-storefront pages): the tagline (0.78rem inline) and contact links
   rendered at 10.9-11.5px, below comfortable reading size on phones. */
.site-footer p.text-white-50,
.site-footer a.text-white-50[href^="tel:"],
.site-footer a.text-white-50[href^="mailto:"],
.site-footer a.text-white-50[href*="wa.me"],
.site-footer a.text-white-50[href*="t.me"] { font-size: 13px !important; line-height: 1.6; }

/* Blog sidebar "products" CTA: the generic card surface (!important) wiped its inline
   brand gradient, leaving the white heading invisible (contrast 1:1). */
.blog-wrapper .card.blog-cta-card { background: linear-gradient(135deg, #008c69, #006e53) !important; border-color: transparent !important; }
.blog-wrapper .card.blog-cta-card :is(.card-body, h3, i) { color: #fff !important; }
.blog-wrapper .card.blog-cta-card p { color: rgba(255,255,255,.9) !important; }
.blog-wrapper .card.blog-cta-card .btn-light { background: #fff !important; color: #0b5d47 !important; border-color: #fff !important; min-height: 40px; display: inline-flex; align-items: center; gap: 6px; }

/* FAQ hero: the lead sat centred under a start-aligned title (generic .lead centring). */
.hero-faq .lead { margin-inline: 0 !important; text-align: start !important; max-width: 62ch; }

/* ======================= Round 12 polish ======================= */
/* Middleware-injected related links: comfortable rows on desktop too (were 29px). Links unchanged; home excluded. */
body:not(.home-page) .seo-internal-links a { display: inline-flex; align-items: center; min-height: 32px; }

/* Header search: the whole pill is the target — input fills its height, submit is a full-height button. */
.da-header-search { cursor: text; }
.site-header .da-header-search input[type="search"], .da-header-search input[type="search"],
.site-header .da-header-search input[name="q"], .da-header-search input[name="q"] { align-self: stretch; }
.da-header-search button[type="submit"] { align-self: center; min-width: 40px; min-height: 40px; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; }

/* Small text floors (no copy changes) */
.sidebar-group a > .badge.float-end { font-size: 12px !important; padding: .3em .6em; }
.auth-brand-text small { font-size: 12px !important; }
@media (max-width: 767.98px) {
  .auth-layout .da-helper, .auth-experience .da-helper { font-size: 12.5px !important; line-height: 1.5; }
  .auth-layout .picker-code, .auth-experience .picker-code { font-size: 13px !important; }
  .pdp-mobile-availability { font-size: 12px !important; }
}

/* Product cards: tighter photo → title rhythm */
.da-product-card .da-card-body { padding-block-start: 6px; }
.da-product-card .da-card-title { margin-block-start: 2px; }

/* Listing sort: room for "Alphabetical"/"Price: high to low" on phones */
@media (max-width: 400px) { .da-catalog-sort select { min-width: 168px; } }

/* Cart quantity: one stepper box, not a box inside a box (cart page, like PDP) */
main .da-cart-stepper input.cart-quantity[type] { border: 0 !important; border-radius: 0 !important; background: transparent !important; box-shadow: none !important; }
/* Cart drawer: LTR reads − 1 + like the cart page (DOM is +,qty,−; RTL already correct) */
html[dir="ltr"] .pw-cart-drawer__qty, html:not([dir="rtl"]) .pw-cart-drawer__qty { flex-direction: row-reverse; }

/* Micro-interactions: tactile press feedback on small commerce buttons */
@media (prefers-reduced-motion: no-preference) {
  .da-quick-add, .da-favorite, .pdp-qty-btn, .pw-cart-drawer__qty button, .da-cart-stepper button { transition: transform .12s ease, background-color .15s ease, box-shadow .15s ease; }
  .da-quick-add:active, .da-favorite:active, .pdp-qty-btn:active, .pw-cart-drawer__qty button:active, .da-cart-stepper button:active { transform: scale(.92); }
  .da-product-card { transition: box-shadow .18s ease, transform .18s ease; }
  @media (hover: hover) { .da-catalog-grid .da-product-card:hover { transform: translateY(-2px); } }
}

/* Listing filter panel: current category is marked; counts read as quiet pills */
.da-filter-panel a { border-radius: 10px; transition: background-color .15s ease; }
.da-filter-panel a span { min-width: 28px; padding: 2px 8px; border-radius: 999px; background: var(--ss-page, #f4f7f6); font-size: 12px; text-align: center; font-variant-numeric: tabular-nums; }
.da-filter-panel a.on, .da-filter-panel a[aria-current="page"] { background: #e8f4ef; color: #0b5d47 !important; font-weight: 700; }
.da-filter-panel a.on span { background: #fff; }
@media (hover: hover) { .da-filter-panel a:not(.on):hover { background: var(--ss-page, #f4f7f6); } }
html[data-theme="dark"] .da-filter-panel a.on { background: rgba(0,140,105,.18); color: #7fe0bf !important; }
html[data-theme="dark"] .da-filter-panel a span { background: rgba(255,255,255,.06); }

/* Cart summary: compact shipping block (approved 4-hour copy) between the CTA and trust cues. */
.da-cart-summary .shipping-summary { margin: 14px 0 4px !important; padding: 12px 14px !important; border-radius: 14px !important; font-size: 13px; line-height: 1.75; }
.da-cart-summary .shipping-summary h3 { font-size: 14px; display: flex; align-items: center; gap: 6px; margin-bottom: 6px !important; }
/* nested approved note sits flat inside its shipping card everywhere (PDP, cart, guide): no box-in-box */
.shipping-summary .ship-fast-note { border: 0 !important; padding: 0 !important; margin: 0 0 6px !important; background: none !important; border-radius: 0 !important; }
.da-cart-summary .shipping-summary .ship-fast-note p.fw-semibold { font-weight: 600; font-size: 13px; }
.da-cart-summary .shipping-summary .small, .da-cart-summary .shipping-summary .ship-fast-note .small { font-size: 12.5px !important; }
.da-cart-summary .shipping-summary > a { display: inline-flex; align-items: center; min-height: 32px; }
.da-cart-summary .shipping-summary .ship-fast-note a { padding-block: 3px; }
.da-cart-summary .shipping-summary svg { width: 20px; height: 20px; flex: none; }

/* Support page contact card: icon-only platform buttons (brand marks, 56px tiles). */
.contact-block--icons .contact-icons { display: flex; flex-wrap: wrap; justify-content: center; gap: 14px; padding: 4px 0; margin: 0; }
.contact-block--icons .contact-icons li { margin: 0; }
.contact-icon-btn { --tile: #00775a; display: inline-flex; align-items: center; justify-content: center; width: 56px; height: 56px; border-radius: 16px; color: #fff !important; background: var(--tile); box-shadow: 0 6px 16px -8px var(--tile), inset 0 1px 0 rgba(255,255,255,.18); text-decoration: none !important; transition: transform .18s ease, box-shadow .18s ease, filter .18s ease; }
.contact-icon-btn svg { display: block; }
.contact-icon-btn--phone { --tile: #0f766e; background: linear-gradient(160deg, #14a38e, #0f766e); }
.contact-icon-btn--whatsapp { --tile: #25D366; background: linear-gradient(160deg, #3ee07a, #1fb855); }
.contact-icon-btn--telegram { --tile: #229ED9; background: linear-gradient(160deg, #2AABEE, #229ED9); }
.contact-icon-btn--email { --tile: #0078D4; background: linear-gradient(160deg, #2b8ce6, #0063b1); }
.contact-icon-btn:hover { transform: translateY(-2px); filter: saturate(1.08) brightness(1.04); box-shadow: 0 10px 22px -10px var(--tile), inset 0 1px 0 rgba(255,255,255,.22); }
.contact-icon-btn:active { transform: translateY(0) scale(.96); }
.contact-icon-btn:focus-visible { outline: 3px solid var(--tile); outline-offset: 3px; }
.contact-block--icons .contact-block__response { text-align: center; line-height: 1.7; }
@media (prefers-reduced-motion: reduce) { .contact-icon-btn, .contact-icon-btn:hover, .contact-icon-btn:active { transition: none; transform: none; } }

/* ==========================================================================
   Component system (round 12): one look for chips, selects, inputs, badges
   and secondary buttons, tuned for light AND dark (dark values come from the
   --ss-* tokens above, so both themes share the same rules).
   ========================================================================== */
html:root {
  --ss-chip-h: 40px;
  --ss-chip-r: 999px;
  --ss-chip-on-line: var(--ss-brand);
  /* selected = brand tint + brand border/text (was an inverted ink/white pill) */
  --c-chip-on-bg: var(--ss-tint);
  --c-chip-on-c: var(--ss-brand-ink);
  --ss-field-bg: var(--ss-surface);
  --ss-field-line: #CFD9D4;
  --ss-hover-line: #A9C4B8;
}
html:root[data-theme="dark"] { --ss-field-bg: #17211D; --ss-field-line: #33443D; --ss-hover-line: #3F6655; --ss-chip-on-line: #2E9A73; }
@media (prefers-color-scheme: dark) {
  html:root:not([data-theme]) { --ss-field-bg: #17211D; --ss-field-line: #33443D; --ss-hover-line: #3F6655; --ss-chip-on-line: #2E9A73; }
}

/* ---- Chips (catalog filter row, landing chips, legacy scroll chips) ---- */
.da-filter-button, .da-filter-chip, body.catalog-page .scroll-chip {
  height: var(--ss-chip-h); min-height: var(--ss-chip-h); padding-inline: 16px; border-radius: var(--ss-chip-r) !important;
  border: 1px solid var(--ss-line) !important; background: var(--ss-surface) !important; color: var(--ss-ink) !important;
  font-size: 13.5px; font-weight: 600; line-height: 1; box-shadow: none !important;
  transition: background-color .15s ease, border-color .15s ease, color .15s ease;
}
.da-filter-button:hover, .da-filter-chip:hover, body.catalog-page .scroll-chip:hover {
  border-color: var(--ss-hover-line) !important; background: var(--ss-tint) !important; color: var(--ss-brand-ink) !important;
}
.da-filter-chip.on, .da-filter-chip[aria-current="page"], .da-landing .da-filter-chip[aria-current="page"],
body.catalog-page .scroll-chip.active, .da-filter-menu[open] > .da-filter-button {
  background: var(--c-chip-on-bg) !important; color: var(--c-chip-on-c) !important;
  border-color: var(--ss-chip-on-line) !important; font-weight: 700;
}
.da-filter-button:focus-visible, .da-filter-chip:focus-visible, body.catalog-page .scroll-chip:focus-visible {
  outline: 2px solid var(--ss-brand); outline-offset: 2px;
}
.da-filter-button .da-icon { color: var(--ss-brand-ink); }
.da-filter-count { background: var(--ss-brand) !important; color: #fff !important; border-radius: 999px !important; }
/* Overflowing chip row: soft fade on the inline-end edge, last chip can scroll clear of it. */
.da-catalog-filters { gap: 10px; }
.da-filter-row { gap: 8px; padding-inline-end: 28px; scroll-padding-inline: 8px;
  -webkit-mask-image: linear-gradient(to left, #000 calc(100% - 36px), transparent);
          mask-image: linear-gradient(to left, #000 calc(100% - 36px), transparent); }
html[dir="ltr"] .da-filter-row {
  -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 36px), transparent);
          mask-image: linear-gradient(to right, #000 calc(100% - 36px), transparent); }
@media (hover: hover) { .da-filter-row { scroll-behavior: smooth; } }
.da-pagination .on { background: var(--c-chip-on-bg) !important; color: var(--c-chip-on-c) !important; box-shadow: inset 0 0 0 1px var(--ss-chip-on-line); font-weight: 700; }

/* ---- Catalog toolbar: count line + sort control as one tidy row ---- */
.da-catalog-toolbar { margin-block: 14px 18px; }
.da-result-count { color: var(--ss-muted) !important; font-size: 13.5px !important; }
.da-result-count b { color: var(--ss-ink); font-weight: 700; }
.da-catalog-sort { height: var(--ss-chip-h); padding-inline: 12px 6px; border: 1px solid var(--ss-field-line); border-radius: var(--ss-chip-r);
  background: var(--ss-field-bg); transition: border-color .15s ease; }
.da-catalog-sort:hover { border-color: var(--ss-hover-line); }
.da-catalog-sort:focus-within { border-color: var(--ss-brand); box-shadow: 0 0 0 3px var(--c-focus-ring); }
.da-catalog-sort label { color: var(--ss-muted) !important; font-size: 13px; }
.da-catalog-sort label .da-icon { color: var(--ss-brand-ink); }
.da-catalog-sort select { height: calc(var(--ss-chip-h) - 2px) !important; border: 0 !important; background-color: transparent !important;
  color: var(--ss-ink) !important; font-weight: 700; outline: 0; box-shadow: none !important; }
.da-catalog-sort select option { background: var(--ss-surface); color: var(--ss-ink); }

/* ---- Fields site-wide: same height, radius, border and focus in both themes ---- */
main :is(.form-control, .form-select, select.form-control):not([type="checkbox"]):not([type="radio"]) {
  background-color: var(--ss-field-bg); border-color: var(--ss-field-line); color: var(--ss-ink); border-radius: var(--ss-r);
}
main :is(.form-control, .form-select)::placeholder { color: var(--ss-muted); opacity: .85; }
main :is(.form-control, .form-select):hover { border-color: var(--ss-hover-line); }
main :is(.form-control, .form-select):focus { border-color: var(--ss-brand); box-shadow: 0 0 0 3px var(--c-focus-ring); background-color: var(--ss-field-bg); color: var(--ss-ink); }
main :is(.form-control, .form-select):disabled, main .form-control[readonly] { opacity: .7; cursor: not-allowed; }
html[data-theme="dark"] select, html[data-theme="dark"] input, html[data-theme="dark"] textarea { color-scheme: dark; }

/* ---- Dark theme: Bootstrap "light/white" utilities must not render as white slabs ---- */
html[data-theme="dark"] main :is(.bg-light, .bg-white, .card.bg-light) { background-color: var(--ss-surface) !important; color: var(--ss-ink); }
html[data-theme="dark"] main .badge:is(.bg-light, .text-bg-light, .bg-white) { background-color: var(--ss-tint) !important; color: var(--ss-brand-ink) !important; }
html[data-theme="dark"] main :is(.btn-light, .btn-outline-light) { background: var(--ss-surface); color: var(--ss-ink); border-color: var(--ss-field-line); }
html[data-theme="dark"] main :is(.btn-outline-secondary, .btn-outline-dark) { color: var(--ss-ink); border-color: var(--ss-field-line); }
html[data-theme="dark"] main :is(.btn-outline-secondary, .btn-outline-dark):hover { background: var(--ss-tint); color: var(--ss-brand-ink); border-color: var(--ss-hover-line); }
html[data-theme="dark"] main .table { --bs-table-bg: transparent; --bs-table-color: var(--ss-ink); --bs-table-border-color: var(--ss-line); color: var(--ss-ink); }
html[data-theme="dark"] main .text-dark { color: var(--ss-ink) !important; }
html[data-theme="dark"] main .border, html[data-theme="dark"] main .border-light { border-color: var(--ss-line) !important; }

/* ---- Secondary / outline buttons: one radius and height family ---- */
main :is(.btn-outline-primary, .btn-outline-success, .btn-outline-secondary) { border-radius: var(--ss-r); font-weight: 600; }
main .btn-outline-primary, main .btn-outline-success { color: var(--ss-brand-ink); border-color: var(--ss-brand); }
main .btn-outline-primary:hover, main .btn-outline-success:hover { background: var(--ss-tint); color: var(--ss-brand-ink); border-color: var(--ss-brand); }

/* Summary rows: labels never wrap ("Kargo ücreti"); long values wrap on their own side. */
.da-cart-summary-row { gap: 12px; }
.da-cart-summary-row > span:first-child { white-space: nowrap; flex: none; }
.da-cart-summary-row > span:last-child { min-width: 0; text-align: end; }

/* Account sidebar: "Shop" is a link, not the current page — no filled pill that reads as active. */
.profile-sidebar .action-link { border-radius: var(--ss-r) !important; }
.profile-sidebar .action-link.primary { background: transparent !important; color: var(--ss-brand-ink) !important; border: 1px solid var(--ss-line) !important; font-weight: 700; box-shadow: none !important; }
.profile-sidebar .action-link.primary i { color: var(--ss-brand-ink) !important; }
.profile-sidebar .action-link.primary:hover { background: var(--ss-tint) !important; border-color: var(--ss-hover-line) !important; }
/* Locked-field badge sits beside its label instead of floating at the far edge. */
.info-label:has(.locked-badge) { justify-content: flex-start !important; gap: 6px; }
.info-label .locked-badge { margin-inline-start: 2px !important; opacity: .75; }
/* Blog film play badge: dark glass in dark theme instead of a white disc. */
html[data-theme="dark"] .blog-film-go { background: rgba(14, 20, 18, .82) !important; box-shadow: 0 0 0 1px rgba(95, 208, 165, .35) !important; }

/* ===== Round 14 ===== */
/* Content-page heroes (about, shipping, legal, coverage, FAQ): one style — tinted, borderless,
   rounded only at the bottom, start-aligned with a readable lead (was: edge-to-edge bordered box, centred). */
main .legal-hero, main .coverage-hero, main .hero-faq {
  background: var(--ss-tint) !important; border: 0 !important; border-radius: 0 0 24px 24px !important; box-shadow: none !important;
}
main .legal-hero .container { text-align: start !important; }
main .legal-hero .legal-title { text-align: start; }
main .legal-hero .container > p, main .legal-hero .lead, main .legal-hero .legal-subtitle {
  margin-inline: 0 !important; max-width: 62ch; text-align: start !important; color: var(--ss-muted);
}
/* Magazine tables: caption bar follows the theme (was white in dark). */
.article-wrapper .article-content .mag-table-cap { background: var(--ss-surface) !important; color: var(--ss-muted) !important; border-bottom: 1px solid var(--ss-line); }
/* Home hero trust chips on phones: tidy 2×2 grid instead of 3 + 1 orphan. */
@media (max-width: 599px) {
  .da-hero-trust { display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px !important; padding: 0 !important; margin-inline: 0 !important; width: 100%; box-sizing: border-box; }
  .da-hero-trust > li { width: 100%; min-width: 0; box-sizing: border-box; justify-content: center; text-align: center; min-height: 36px; padding-inline: 8px !important; }
  .da-hero-trust > li > * { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
  /* the grid no longer scrolls, so the scroll-row edge fade (shell.css) must not apply */
  html[dir] .da-hero-trust { -webkit-mask-image: none !important; mask-image: none !important; }
}
/* Cart drawer close: quiet focus ring (it receives focus on open). */
.pw-cart-drawer__header [data-drawer-close] { border-radius: 10px; }
.pw-cart-drawer__header [data-drawer-close]:focus { outline: 0; box-shadow: none; }
.pw-cart-drawer__header [data-drawer-close]:focus-visible { outline: 2px solid var(--ss-brand); outline-offset: 2px; box-shadow: none; }

/* ======================= Round 15: footer internal links ======================= */
/* The middleware-injected link block now sits inside the footer, above the copyright bar.
   Its inline light-grey band is replaced by the footer surface in both themes; links,
   order and text are untouched. Fallback copies (pages without the footer slot) unchanged. */
.site-footer .seo-internal-links { background: transparent !important; border-top: 1px solid var(--ss-line) !important; margin: 8px 0 0 !important; padding: 24px 0 20px !important; font-size: 13px !important; }
.site-footer .seo-internal-links > div { max-width: none !important; padding: 0 !important; }
.site-footer .seo-internal-links > div > div { grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)) !important; gap: 20px 24px !important; }
.site-footer .seo-internal-links strong { display: block; font-size: 14px; font-weight: 700; color: var(--ss-ink) !important; margin-block-end: 8px; }
.site-footer .seo-internal-links a { color: var(--ss-muted) !important; line-height: 1.5; border-radius: 6px; transition: color .15s ease; }
.site-footer .seo-internal-links a:hover { color: var(--ss-brand) !important; text-decoration: underline !important; text-underline-offset: 3px; }
.site-footer .seo-internal-links a:focus-visible { outline: 2px solid var(--ss-brand); outline-offset: 2px; }
@media (max-width: 991.98px) { .site-footer .seo-internal-links > div > div { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; } }
@media (max-width: 767.98px) { .site-footer .seo-internal-links a { min-height: 36px !important; } .site-footer .seo-internal-links { padding: 20px 0 12px !important; } }
@media (prefers-reduced-motion: reduce) { .site-footer .seo-internal-links a { transition: none; } }
.site-footer .seo-internal-links strong + br { display: none; }

/* PDP image viewer: the lightbox <img> is lazy and src-swapped by script, so it never got
   .loaded and stayed at the skeleton state (opacity .7 + light shimmer, a pale slab in dark).
   Show it fully; photo-viewer scrim in both themes; less inner padding so the photo is larger. */
.pdp-image-lightbox #lightboxImage { opacity: 1 !important; animation: none !important; background: none !important; padding: 3%; }
.pdp-image-lightbox.pdp-active { background: rgba(8, 14, 12, .84) !important; }
.pdp-image-lightbox .pdp-lightbox-image-wrap { max-width: min(960px, 100%); max-height: calc(100dvh - 128px); box-shadow: 0 24px 60px rgba(0,0,0,.35); }
.pdp-image-lightbox #lightboxImage { max-height: calc(100dvh - 128px); }
.pdp-lightbox-close, .pdp-lightbox-nav { transition: background-color .15s ease, transform .15s ease; }
.pdp-lightbox-close:hover, .pdp-lightbox-nav:hover { transform: scale(1.06); }
.pdp-lightbox-close:focus-visible, .pdp-lightbox-nav:focus-visible { outline: 2px solid var(--ss-brand); outline-offset: 3px; }
@media (prefers-reduced-motion: reduce) { .pdp-lightbox-close, .pdp-lightbox-nav { transition: none; } .pdp-lightbox-close:hover, .pdp-lightbox-nav:hover { transform: none; } }

/* Orphaned lazy-image placeholder: storefront-base dims img[loading=lazy]:not(.loaded) to .7,
   but no script ever adds .loaded, so every catalogue photo on /buy-medicine/ stayed dimmed
   (both themes). Images render at full opacity once painted. */
img[loading="lazy"]:not(.loaded) { opacity: 1; }

/* Type scale & vertical rhythm (round 15): headings had line-height 1.8 on content pages
   (titles fell apart when wrapping); page-hero H1s ranged 19-24px on phones; several body
   texts fell to 11.8-12.9px on the 15px mobile root. Sizes/leading only; no copy changes. */
main :is(h1, .h1) { line-height: 1.4; }
main :is(h2, .h2, h3, .h3):not(.da-card-title) { line-height: 1.45; }
html[dir="rtl"] main :is(h1, .h1) { line-height: 1.5; }
@media (max-width: 767.98px) {
  main .legal-title, main .guide-hero-content h1, .blog-wrapper > .container h1, .blog-wrapper h1.fw-bold.mb-3 { font-size: 24px !important; }
  main .guide-hero-content p, main .step-card p, main .safety-content p,
  main .coverage-countries li, main .auth-subtitle { font-size: 14px !important; line-height: 1.75; }
  main .shipping-summary p.small, main .ship-fast-note p, main .da-helper,
  .blog-wrapper .blog-film-copy p, .blog-wrapper .blog-films-head p { font-size: 13px !important; line-height: 1.7; }
}

/* ======================= Round 16 polish ======================= */
/* Links: one theme-aware link colour. FAQ answers fell back to Bootstrap blue (#0d6efd) and the
   shipping notes carried a fixed dark green that sank into the dark theme. In-paragraph links
   are underlined so they read as links without relying on colour alone. */
.faq-answer a, .shipping-summary a, .ship-fast-note a { color: var(--ss-brand-ink) !important; }
main :is(p, .faq-answer) a:not([class]), .faq-answer a { text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }
main :is(p, .faq-answer) a:not([class]):hover, .faq-answer a:hover { text-decoration-thickness: 2px; }

/* Buttons: one corner radius for rectangular buttons (was a mix of 10/12/14px). */
main .btn:not(.rounded-pill):not(.rounded-circle):not(.btn-close):not(.btn-link),
main :is(.pdp-btn-add-to-cart, .chat-open-btn, .submit-btn, .browse-btn, .picker-btn) { border-radius: 12px !important; }

/* Checkout order summary: flatten box-in-box. Trust points become the same quiet dot list as the
   cart (were six bordered pills in a 2-col grid), the shipping note uses the brand tint instead of
   Bootstrap info-blue, and the compact process notes lose their extra frames. Display only. */
.checkout-page .da-summary-card .da-cart-trust { display: grid !important; grid-template-columns: minmax(0, 1fr) !important; gap: 8px !important; }
.checkout-page .da-summary-card .da-cart-trust > li { padding: 0 !important; border: 0 !important; background: transparent !important; border-radius: 0 !important; }
.checkout-page .checkout-shipping-notice.alert-info { background: var(--ss-tint) !important; border: 0 !important; border-inline-start: 3px solid var(--ss-brand) !important; color: var(--ss-ink) !important; }
.checkout-page .checkout-shipping-notice.alert-info i { color: var(--ss-brand-ink); }
.checkout-page .da-summary-card .marketplace-info--compact,
.checkout-page .da-summary-card .marketplace-info--compact .marketplace-info-inner { background: transparent !important; border: 0 !important; box-shadow: none !important; padding: 0 !important; }
.checkout-page .da-summary-card .marketplace-info--compact .marketplace-info-points { display: grid; gap: 0; margin: 0; }
.checkout-page .da-summary-card .marketplace-info--compact .marketplace-info-points li { background: transparent !important; border: 0 !important; border-top: 1px solid var(--ss-line) !important; border-radius: 0 !important; box-shadow: none !important; padding: 10px 0 !important; color: var(--ss-muted) !important; transform: none !important; }

/* Magazine article: header, breadcrumb and body share one centred reading column (the header was
   736px wide while the body was capped at 618px and pinned to the start edge). */
@media (min-width: 992px) {
  .article-wrapper .col-lg-8 > :is(nav, article) { max-width: 680px; margin-inline: auto; }
  .article-wrapper .article-content, html[dir="rtl"] .article-wrapper .article-content { max-width: none !important; }
}

/* Category landing info: comfortable measure for the long paragraphs (ran ~130 chars per line). */
.da-catalog-info p { max-width: 75ch; }

/* Home rhythm (non-protected storefront sections): equal section spacing; gaps were 88/92/48px
   on desktop and 64/60/28px on phones. SEO content sections untouched. */
body.home-page .da-home > .da-section { padding-block: 36px !important; }
body.home-page .da-home > .marketplace-info { margin-block: 12px 40px !important; }
@media (max-width: 767.98px) {
  body.home-page .da-home > .da-section { padding-block: 24px !important; }
  body.home-page .da-home > .marketplace-info { margin-block: 8px 28px !important; }
}

/* Lazy-image shimmer removed: nothing ever marks an image as loaded, so the gradient stayed on
   forever and showed through object-fit:contain letterboxing (grey box on white wells; a dark box
   in dark theme after r16). Photo wells/cards already provide the placeholder surface. */
img[loading="lazy"], img[data-src] { background-image: none !important; animation: none !important; }
.checkout-page .checkout-shipping-notice a, main .alert a:not(.btn) { color: var(--ss-brand-ink) !important; text-decoration: underline; text-underline-offset: 3px; }
@media (max-width: 767.98px) { body.home-page .da-home > .da-bestsellers .da-products { padding-bottom: 6px !important; } }

/* ======================= Round 17 polish ======================= */
/* Form validation: error text was a fixed #B42318 (about 3:1 on the dark surface). Theme-aware
   error colour, invalid fields get a matching border + soft ring; only after user interaction. */
:root { --ss-danger: #B42318; }
html[data-theme="dark"] { --ss-danger: #F97066; }
main .invalid-feedback, main .field-error, main .da-field-error, main .errorlist, main .errorlist li { color: var(--ss-danger) !important; }
main :is(.form-control, .form-select, input, textarea, select).is-invalid,
main :is(input, textarea, select):user-invalid { border-color: var(--ss-danger) !important; box-shadow: 0 0 0 3px color-mix(in srgb, var(--ss-danger) 18%, transparent) !important; }

/* Product cards: one hover language in both themes (lift + brand edge); the catalogue relied on a
   shadow that is invisible in dark. Hover devices only; reduced motion keeps the edge, drops the lift. */
@media (hover: hover) {
  .da-product-card { transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease; }
  .da-product-card:hover { transform: translateY(-3px); border-color: color-mix(in srgb, var(--ss-brand) 45%, var(--ss-line)) !important; }
  .da-product-card:hover .da-card-title a { color: var(--ss-brand-ink); }
}
/* Press feedback on primary actions. */
:is(.da-quick-add, .da-primary, .pdp-btn-add-to-cart, .pdp-mobile-add-btn, .btn-primary, .da-filter-chip, .pdp-qty-btn):active { transform: scale(.97); }
:is(.da-quick-add, .da-primary, .pdp-btn-add-to-cart, .pdp-mobile-add-btn, .btn-primary, .da-filter-chip, .pdp-qty-btn) { transition: transform .12s ease, background-color .15s ease, border-color .15s ease; }
@media (prefers-reduced-motion: reduce) {
  .da-product-card, .da-product-card:hover { transform: none !important; transition: none; }
  :is(.da-quick-add, .da-primary, .pdp-btn-add-to-cart, .pdp-mobile-add-btn, .btn-primary, .da-filter-chip, .pdp-qty-btn):active { transform: none; }
}
/* Search suggestions: in dark the thumb well was dark and the photo's multiply blend turned it
   near-black. Same white photo well as the product cards in both themes. */
html[data-theme="dark"] .product-search-thumb { background: #fff !important; border-color: transparent !important; }

/* v3.19 toasts: one calm card language for every notice (flash, cart, PWA, PDP, cart page).
   Theme surface + ink text, a tone edge and dot carry the meaning; parked just under the header. */
:root { --ss-toast-top: 76px; --ss-warn: #DC6803; }
html[data-theme="dark"] { --ss-warn: #FDB022; }
@media (max-width: 991.98px) { :root { --ss-toast-top: 66px; } }
.toast-container, div:has(> #cart-toast), #pwa-toast-container { position: fixed !important; top: var(--ss-toast-top) !important; bottom: auto !important; inset-inline: 0 !important; left: 0 !important; right: 0 !important; margin-inline: auto !important; width: min(440px, calc(100vw - 24px)) !important; transform: none !important; padding: 0 !important; z-index: 1085 !important; }
.toast-container .toast, #cart-toast, #pwa-toast-container .pwa-toast, .cart-toast .cart-toast-inner { width: 100% !important; max-width: none !important; background: var(--ss-surface) !important; color: var(--ss-ink) !important; border: 1px solid var(--ss-line) !important; border-inline-start: 4px solid var(--ss-toast-tone, var(--ss-brand)) !important; border-radius: 12px !important; box-shadow: 0 12px 32px -8px rgba(16, 32, 26, .22) !important; font-size: 14px !important; font-weight: 600 !important; line-height: 1.6 !important; }
html[data-theme="dark"] :is(.toast-container .toast, #cart-toast, #pwa-toast-container .pwa-toast, .cart-toast .cart-toast-inner) { box-shadow: 0 12px 32px -6px rgba(0, 0, 0, .6) !important; }
.toast-container .toast .toast-body { display: flex; align-items: center; gap: 10px; color: var(--ss-ink) !important; }
.toast-container .toast .toast-body::before, #pwa-toast-container .pwa-toast::before { content: ""; flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--ss-toast-tone, var(--ss-brand)); box-shadow: 0 0 0 4px color-mix(in srgb, var(--ss-toast-tone, var(--ss-brand)) 18%, transparent); }
.toast.text-bg-success, .pwa-toast-success { --ss-toast-tone: var(--ss-brand); }
.toast.text-bg-danger, .pwa-toast-error { --ss-toast-tone: var(--ss-danger); }
.toast.text-bg-warning, .pwa-toast-warning { --ss-toast-tone: var(--ss-warn); }
.toast.text-bg-info, .pwa-toast-info { --ss-toast-tone: var(--ss-muted); }
html:not([data-theme="dark"]) :is(.toast-container, #cart-toast) .btn-close { filter: none !important; }
html[data-theme="dark"] :is(.toast-container, #cart-toast) .btn-close { filter: invert(1) grayscale(1) brightness(1.6) !important; }
#cart-toast .toast-header { background: transparent !important; color: var(--ss-ink) !important; border: 0 !important; padding: 10px 14px 0 !important; }
#cart-toast .toast-header .da-sprite, #cart-toast .toast-header svg { color: var(--ss-brand-ink); }
#cart-toast .toast-header small { color: var(--ss-muted) !important; }
#cart-toast .toast-body { padding: 4px 14px 12px !important; color: var(--ss-muted) !important; font-weight: 500; }
#pwa-toast-container .pwa-toast { display: flex; align-items: center; gap: 10px; padding: 12px 16px !important; direction: inherit !important; text-align: start; }
.cart-toast { top: var(--ss-toast-top) !important; width: min(440px, calc(100vw - 24px)); }
.cart-toast .cart-toast-inner { white-space: normal !important; padding: 12px 16px !important; }
.pdp-toast-notification { align-items: center; padding: 12px 16px !important; background: var(--ss-surface) !important; color: var(--ss-ink) !important; border: 1px solid var(--ss-line) !important; border-inline-start: 4px solid var(--ss-toast-tone, var(--ss-brand)) !important; border-radius: 12px !important; box-shadow: 0 12px 32px -8px rgba(16, 32, 26, .22) !important; font-size: 14px; font-weight: 600; }
html[data-theme="dark"] .pdp-toast-notification { box-shadow: 0 12px 32px -6px rgba(0, 0, 0, .6) !important; }
.pdp-toast-notification.pdp-success { --ss-toast-tone: var(--ss-brand); }
.pdp-toast-notification.pdp-error { --ss-toast-tone: var(--ss-danger); }
.pdp-toast-notification > :first-child { color: var(--ss-toast-tone, var(--ss-brand)); flex: none; }
@media (min-width: 768px) { .pdp-toast-stack { inset-inline: 0 !important; margin-inline: auto; width: min(440px, calc(100vw - 32px)); } }

/* v3.19 PWA install sheet: theme surface instead of a bright green slab; reads LTR in en/tr;
   never sits under the chat bubble. */
#pwa-install-banner { background: var(--ss-surface) !important; color: var(--ss-ink); border-top: 1px solid var(--ss-line); border-radius: 16px 16px 0 0; padding: 14px 16px 14px !important; box-shadow: 0 -12px 32px -14px rgba(16, 32, 26, .28) !important; direction: inherit !important; }
html[data-theme="dark"] #pwa-install-banner { box-shadow: 0 -12px 32px -10px rgba(0, 0, 0, .7) !important; }
#pwa-install-banner .pwa-banner-inner { gap: 12px; }
#pwa-install-banner .pwa-banner-icon { width: 48px; height: 48px; border-radius: 12px; border: 1px solid var(--ss-line); box-shadow: none; background: #fff; }
#pwa-install-banner .pwa-banner-icon img { width: 40px; height: 40px; border-radius: 8px; }
#pwa-install-banner .pwa-banner-text { color: var(--ss-ink); text-align: start; }
#pwa-install-banner .pwa-banner-text h4 { font-size: 16px; color: var(--ss-ink); }
#pwa-install-banner .pwa-banner-text p { font-size: 13.5px; color: var(--ss-muted); opacity: 1; }
#pwa-install-banner .pwa-btn { min-height: 44px; padding: 10px 18px; border-radius: 12px; font-size: 15px; }
#pwa-install-banner .pwa-btn-install { background: var(--ss-brand); color: var(--c-on-brand, #fff); }
#pwa-install-banner .pwa-btn-install:hover { transform: none; box-shadow: none; filter: brightness(1.06); }
#pwa-install-banner .pwa-btn-later { background: transparent; color: var(--ss-ink); border: 1px solid var(--ss-line); backdrop-filter: none; -webkit-backdrop-filter: none; }
#pwa-install-banner .pwa-btn-later:hover { background: var(--ss-tint); }
@media (max-width: 500px) { #pwa-install-banner .pwa-banner-buttons { margin-top: 10px; } }
@media (max-width: 1023.98px) {
  body:has(#pwa-install-banner.show) :is(.pw-chat-launcher, .woot-widget-bubble) { inset-block-end: calc(var(--pw-mobile-nav-height, 0px) + var(--pw-pwa-banner-height, 140px) + 12px) !important; }
}

/* v3.19 header: flat at rest, a soft edge appears once content scrolls beneath it */
@supports (animation-timeline: scroll()) {
  .da-header::after { content: ""; position: absolute; inset-inline: 0; top: 100%; height: 14px; pointer-events: none; background: linear-gradient(to bottom, rgba(16, 32, 26, .10), rgba(16, 32, 26, 0)); opacity: 0; animation: ss-hdr-edge linear both; animation-timeline: scroll(root block); animation-range: 0 96px; }
  html[data-theme="dark"] .da-header::after { background: linear-gradient(to bottom, rgba(0, 0, 0, .45), rgba(0, 0, 0, 0)); }
  @keyframes ss-hdr-edge { to { opacity: 1; } }
}

/* v3.19 account: order status reads by meaning (profile recent orders + order history) */
.da-profile-page .order-badge[data-status] { background: var(--ss-tint); color: var(--ss-brand-ink); }
.da-profile-page .order-badge:is([data-status="PENDING"], [data-status="AWAITING_SHIPPING_PAYMENT"]) { background: color-mix(in srgb, var(--ss-warn) 14%, transparent); color: var(--ss-ink); }
.da-profile-page .order-badge[data-status="CANCELLED"] { background: color-mix(in srgb, var(--ss-danger) 12%, transparent); color: var(--ss-danger); }
.da-profile-page .order-badge:is([data-status="PROCESSING"], [data-status="SHIPPING_PAID"]) { background: var(--ss-page); color: var(--ss-muted); border: 1px solid var(--ss-line); }
.da-profile-page .order-total { font-weight: 700; font-variant-numeric: tabular-nums; }
.order-history-page .main-container { max-width: 1180px; }
.order-history-page .order-search-container { padding: 16px 20px; margin-block-end: 24px; border: 1px solid var(--c-border); border-radius: var(--r-card); background: var(--c-surface); }
.order-history-page .order-search-container label { font-size: 13px; font-weight: 600; color: var(--ss-muted); margin-block-end: 6px; }
.order-history-page .status-badge { font-weight: 600; padding: 5px 10px; }
.order-history-page .status-shipped { background: var(--ss-tint); color: var(--ss-brand-ink); }
.order-history-page .status-processing { background: var(--ss-page); color: var(--ss-muted); border: 1px solid var(--ss-line); }
.order-history-page .shipping-info .text-primary { color: var(--ss-brand-ink) !important; }
.order-history-page .stats-card .stat-box { margin-block: 0; padding: 14px 16px; }
.order-history-page .stats-card .stat-number { font-size: 22px; font-weight: 800; line-height: 1.2; color: var(--ss-ink); font-variant-numeric: tabular-nums; }
.order-history-page .stats-card .stat-label { margin-block-start: 2px; font-size: 12.5px; color: var(--ss-muted); }
.order-history-page .stats-card .row > .col-6:last-child:nth-child(odd) { flex: 0 0 100%; max-width: 100%; }

/* v3.19 support form: neutral labels like every other form, no perpetual motion */
#supportForm .form-label.text-primary { color: var(--ss-ink) !important; font-size: 14px; }
#supportForm .form-label.text-primary i { color: var(--ss-brand-ink); }
#supportForm :is(.pulse-animation, .floating-animation) { animation: none !important; }
.alert-custom::before { content: none !important; animation: none !important; }

/* ui-journey: empty cart — next step + trust info */
.da-cart-empty .da-cart-primary { width: auto; min-width: 220px; }
.da-cart-empty a.da-cart-empty-secondary { color: var(--c-brand-text) !important; font-weight: 600; font-size: 14px; text-decoration: none !important; min-height: 44px; display: inline-flex; align-items: center; }
.da-cart-empty a.da-cart-empty-secondary:hover { text-decoration: underline; }
.da-cart-empty .da-cart-trust { max-width: 520px; border-top: 1px solid var(--ss-line, var(--c-border)); padding-top: 16px; }

/* ===== p11 site-wide polish (typography, rhythm, cards, header/footer, motion) ===== */
html { -webkit-text-size-adjust: 100%; }
body { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; -webkit-tap-highlight-color: transparent; }
::selection { background: color-mix(in srgb, var(--c-brand, #0b6b4f) 18%, transparent); }
html[dir="ltr"] :is(h1, h2, .h1, .h2) { letter-spacing: -0.012em; }
:is(h1, h2, h3) { text-wrap: balance; }
main p { text-wrap: pretty; }
html[dir="rtl"] main :is(article, section) p { line-height: 1.85; }
:is(a, button, [role="button"], summary):focus-visible { outline: 2px solid var(--c-brand, #0b6b4f); outline-offset: 2px; border-radius: 6px; }

/* Header */
.da-header-nav a { transition: color .18s ease, background-color .18s ease; }

/* Product cards: gentle lift, aligned rows, calm image well */
.da-product-card { transition: transform .22s cubic-bezier(.2,.7,.2,1), box-shadow .22s ease, border-color .22s ease; }
.da-product-card .da-card-media { border-radius: calc(var(--r-well, 12px)); }
.da-product-card .da-card-media img { transition: transform .35s cubic-bezier(.2,.7,.2,1); }
.da-product-card .da-card-title { min-height: calc(2 * 1.6em); }
.da-product-card .da-card-foot { margin-top: auto; padding-top: 10px; }
.da-product-card .da-price { font-variant-numeric: tabular-nums; letter-spacing: -0.01em; }
.da-quick-add { transition: transform .15s ease, filter .15s ease; }
.da-quick-add:active { transform: scale(.96); }
@media (hover: hover) and (pointer: fine) {
  .da-product-card:hover { transform: translateY(-2px); box-shadow: 0 10px 28px -14px rgba(15, 40, 32, .28); border-color: color-mix(in srgb, var(--c-border, #e5e7eb) 90%, transparent); }
  .da-product-card:hover .da-card-media img { transform: scale(1.035); }
  .da-quick-add:hover { filter: brightness(1.06); }
}

/* Footer links: smooth colour change, comfortable rhythm */
body .site-footer .footer-nav-link { transition: color .18s ease; }
body .site-footer { padding-top: max(8px, env(safe-area-inset-top, 0)); }

/* Mobile rhythm */
@media (max-width: 575.98px) {
  .da-product-card { padding: 10px; }
  .da-product-card .da-card-title { font-size: 14.5px; }
}
@media (prefers-reduced-motion: reduce) {
  .da-product-card, .da-product-card .da-card-media img, .da-quick-add { transition: none !important; transform: none !important; }
}