/* Tamm UI refresh: visual layer only. Store behavior, product data and routes stay in the original files. */
:root {
  --tamm-ink: #111a34;
  --tamm-navy: #111a34;
  --tamm-blue: #2454e8;
  --tamm-cyan: #d8f23a;
  --tamm-cyan-pale: #edf4c8;
  --tamm-sand: #f4f1e8;
  --tamm-paper: #fffdf7;
  --tamm-line: #252c42;
  --tamm-muted: #646b7d;
  --tamm-green: #177355;
  --tamm-gold: #f0a936;
  --tamm-shadow: 7px 7px 0 rgba(17, 26, 52, .12);
  --tamm-shadow-soft: 4px 4px 0 rgba(17, 26, 52, .1);
  --tamm-radius: 9px;
  --primary: #2454e8;
  --primary-dark: #111a34;
  --primary-light: #d8f23a;
  --secondary: #d8f23a;
  --secondary-light: #edf4c8;
  --bg: #f4f1e8;
  --bg-light: #ebe7dc;
  --card: #fffdf7;
  --card-hover: #f9f7ef;
  --text: #111a34;
  --text-muted: #646b7d;
  --border: #d3d0c6;
  --success: #177355;
  --success-light: #2a9a73;
  --danger: #c63e37;
  --warning: #b96f13;
  --info: #2454e8;
  --glass: rgba(255, 253, 247, .94);
  --radius-card: 9px;
  --radius-btn: 6px;
  --shadow-soft: 4px 4px 0 rgba(17, 26, 52, .1);
  --shadow-strong: 8px 8px 0 rgba(17, 26, 52, .13);
  --shadow-btn: 4px 4px 0 rgba(17, 26, 52, .16);
}

html { scroll-behavior: smooth; scroll-padding-top: 88px; }
body {
  color: var(--tamm-ink) !important;
  background-color: var(--tamm-sand) !important;
  background-image: radial-gradient(rgba(17, 26, 52, .08) .7px, transparent .7px) !important;
  background-size: 13px 13px !important;
  font-family: 'IBM Plex Sans Arabic', 'Cairo', sans-serif !important;
}
button, input, textarea, select { font-family: inherit; }
button, a, input, textarea, select { -webkit-tap-highlight-color: transparent; }
:where(a, button, input, textarea, select, [tabindex]):focus-visible {
  outline: 3px solid #2454e8 !important;
  outline-offset: 3px !important;
}
.page-width { width: min(1220px, calc(100% - 48px)) !important; }
.tamm-app { background: transparent !important; }

/* Brand bar and everyday navigation */
.announcement {
  min-height: 34px !important;
  padding: 6px 18px !important;
  border-bottom: 2px solid var(--tamm-ink) !important;
  color: var(--tamm-ink) !important;
  background: var(--tamm-cyan) !important;
  font-weight: 800 !important;
}
.announcement-divider { background: var(--tamm-ink) !important; opacity: .35; }
.site-header {
  border-bottom: 2px solid var(--tamm-ink) !important;
  color: var(--tamm-ink) !important;
  background: rgba(244, 241, 232, .96) !important;
  -webkit-backdrop-filter: blur(16px) saturate(140%) !important;
  backdrop-filter: blur(16px) saturate(140%) !important;
  box-shadow: none !important;
}
.site-header.is-scrolled { background: rgba(244, 241, 232, .97) !important; box-shadow: 0 4px 0 rgba(17, 26, 52, .08) !important; }
.header-inner { width: min(1220px, calc(100% - 48px)) !important; min-height: 76px !important; }
.site-header .brand { gap: 9px !important; }
.brand-mark { display: grid; width: 42px; height: 42px; place-items: center; border: 1.5px solid var(--tamm-ink); border-radius: 8px !important; background: var(--tamm-cyan) !important; box-shadow: 3px 3px 0 var(--tamm-ink); }
.brand-mark img { width: 29px !important; height: 29px !important; object-fit: contain; }
.brand-copy strong { color: var(--tamm-ink) !important; font-weight: 900 !important; letter-spacing: -.04em; }
.brand-copy small { color: var(--tamm-muted) !important; font-weight: 600 !important; }
.desktop-nav { gap: 5px !important; }
.nav-link {
  min-height: 42px !important;
  padding: 8px 13px !important;
  border: 1px solid transparent !important;
  border-radius: 6px !important;
  color: var(--tamm-ink) !important;
  font-weight: 700 !important;
  transition: color .2s, background .2s, transform .2s !important;
}
.nav-link:hover { border-color: var(--tamm-ink) !important; background: var(--tamm-paper) !important; transform: translateY(-2px); }
.nav-link.active { border-color: var(--tamm-ink) !important; color: var(--tamm-paper) !important; background: var(--tamm-ink) !important; box-shadow: 3px 3px 0 var(--tamm-blue); }
.header-actions { gap: 8px !important; }
.account-button, .cart-button, .wishlist-button, .mobile-menu-button {
  min-width: 44px !important;
  min-height: 44px !important;
  border: 1.5px solid var(--tamm-ink) !important;
  border-radius: 7px !important;
  color: var(--tamm-ink) !important;
  background: var(--tamm-paper) !important;
  box-shadow: 3px 3px 0 rgba(17, 26, 52, .13) !important;
}
.account-button:hover, .cart-button:hover, .wishlist-button:hover, .mobile-menu-button:hover { border-color: var(--tamm-ink) !important; background: var(--tamm-cyan) !important; transform: translate(-1px, -1px); }
.cart-button { color: var(--tamm-ink) !important; background: var(--tamm-cyan) !important; }
.cart-button b.cart-badge, .wishlist-badge { border: 1.5px solid var(--tamm-ink) !important; color: var(--tamm-ink) !important; background: var(--tamm-cyan) !important; }
.mobile-drawer { border-inline-start: 2px solid var(--tamm-ink) !important; background: var(--tamm-paper) !important; box-shadow: -8px 0 0 rgba(17, 26, 52, .12) !important; }
.drawer-item { border-bottom: 1px solid rgba(17, 26, 52, .15) !important; border-radius: 0 !important; color: var(--tamm-ink) !important; }
.drawer-item.active, .drawer-item:hover { color: var(--tamm-ink) !important; background: var(--tamm-cyan) !important; }

/* Storefront hero, search and trust cues */
.home-banner { padding-top: 28px !important; padding-bottom: 27px !important; }
.banner-frame {
  overflow: hidden !important;
  border: 2px solid var(--tamm-ink) !important;
  border-radius: 10px !important;
  background: var(--tamm-paper) !important;
  box-shadow: 7px 7px 0 var(--tamm-ink) !important;
}
.banner-track img, .banner-track picture { border-radius: 0 !important; }
.banner-arrow {
  width: 42px !important;
  height: 42px !important;
  border: 1.5px solid var(--tamm-ink) !important;
  border-radius: 50% !important;
  color: var(--tamm-ink) !important;
  background: var(--tamm-cyan) !important;
  box-shadow: 3px 3px 0 var(--tamm-ink) !important;
}
.banner-arrow:hover { color: var(--tamm-paper) !important; background: var(--tamm-ink) !important; transform: scale(1.06); }
.banner-dots button { border: 1px solid var(--tamm-ink) !important; background: var(--tamm-paper) !important; }
.banner-dots button.active { width: 25px !important; background: var(--tamm-blue) !important; }
.home-search {
  border: 2px solid var(--tamm-ink) !important;
  border-radius: 7px !important;
  background: var(--tamm-paper) !important;
  box-shadow: 5px 5px 0 var(--tamm-ink) !important;
}
.home-search:focus-within { border-color: var(--tamm-blue) !important; box-shadow: 5px 5px 0 var(--tamm-blue) !important; }
.home-search input { color: var(--tamm-ink) !important; }
.home-search button { border-radius: 4px !important; color: var(--tamm-ink) !important; background: var(--tamm-cyan) !important; font-weight: 800 !important; }
.home-search button:hover { color: var(--tamm-paper) !important; background: var(--tamm-blue) !important; }
.trust-strip {
  display: grid !important;
  padding: 18px 16px !important;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  border: 1.5px solid var(--tamm-ink) !important;
  border-radius: 8px !important;
  color: var(--tamm-paper) !important;
  background: var(--tamm-ink) !important;
  box-shadow: 5px 5px 0 var(--tamm-blue) !important;
}
.trust-item { min-width: 0; padding: 6px 13px !important; border-inline-start: 1px solid rgba(255,255,255,.18); }
.trust-item:first-child { border-inline-start: 0; }
.trust-icon { color: var(--tamm-cyan) !important; background: transparent !important; font-size: 19px !important; }
.trust-item strong { color: var(--tamm-paper) !important; font-weight: 800 !important; }
.trust-item small { color: #c4c7d1 !important; line-height: 1.5 !important; }

/* Section hierarchy and product discovery */
.section-heading h2, .catalog-heading h2, .faq-intro h2, .special-copy h2, .footer-cta h2 {
  color: var(--tamm-ink) !important;
  font-weight: 900 !important;
  letter-spacing: -.045em !important;
}
.section-heading h2 em, .catalog-heading h2 em, .faq-intro h2 em, .special-copy h2 em, .footer-cta h2 em { color: var(--tamm-blue) !important; }
.eyebrow { color: var(--tamm-blue) !important; font-weight: 800 !important; letter-spacing: .04em; }
.catalog-section, .bundles-section, .how-section, .reviews-section, .faq-section { margin-top: 72px !important; }
.catalog-section { padding: 38px 0 50px !important; border-top: 2px solid var(--tamm-ink); }
.catalog-heading { align-items: end !important; }
.catalog-heading p { color: var(--tamm-muted) !important; }
.catalog-count {
  min-width: 126px !important;
  padding: 13px 16px !important;
  border: 1.5px solid var(--tamm-ink) !important;
  border-radius: 7px !important;
  color: var(--tamm-cyan) !important;
  background: var(--tamm-ink) !important;
  box-shadow: 4px 4px 0 var(--tamm-cyan) !important;
}
.catalog-count strong { color: var(--tamm-paper) !important; }
.catalog-toolbar {
  display: flex !important;
  padding: 10px !important;
  align-items: center !important;
  gap: 12px !important;
  border: 1.5px solid var(--tamm-ink) !important;
  border-radius: 8px !important;
  background: var(--tamm-paper) !important;
  box-shadow: 4px 4px 0 rgba(17, 26, 52, .12) !important;
}
.search-field { min-height: 45px !important; border: 1px solid #c8c7c0 !important; border-radius: 5px !important; background: var(--tamm-sand) !important; }
.search-field:focus-within { border-color: var(--tamm-blue) !important; box-shadow: 0 0 0 3px rgba(36,84,232,.12) !important; }
.search-field input { color: var(--tamm-ink) !important; background: transparent !important; }
.search-field > i { color: var(--tamm-blue) !important; }
.category-tabs { gap: 7px !important; }
.filter-tab {
  min-height: 40px !important;
  padding: 8px 14px !important;
  border: 1px solid var(--tamm-line) !important;
  border-radius: 5px !important;
  color: var(--tamm-ink) !important;
  background: transparent !important;
  font-weight: 700 !important;
}
.filter-tab:hover { background: var(--tamm-cyan-pale) !important; }
.filter-tab.active { border-color: var(--tamm-ink) !important; color: var(--tamm-cyan) !important; background: var(--tamm-ink) !important; box-shadow: 2px 2px 0 var(--tamm-blue) !important; }
#productsGrid { margin-top: 25px; }
.product-grid { gap: 18px !important; }
.product-card {
  border: 1.5px solid var(--tamm-ink) !important;
  border-radius: 8px !important;
  aspect-ratio: auto !important;
  background: var(--tamm-paper) !important;
  box-shadow: 5px 5px 0 rgba(17, 26, 52, .12) !important;
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease !important;
  will-change: transform;
}
.product-card:hover { transform: translate(-2px, -3px) !important; border-color: var(--tamm-ink) !important; box-shadow: 8px 8px 0 var(--tamm-blue) !important; }
.product-art {
  overflow: hidden;
  border-bottom: 1.5px solid var(--tamm-ink) !important;
  border-radius: 0 !important;
  background-color: var(--tamm-cyan-pale) !important;
  background-image: radial-gradient(rgba(17,26,52,.15) .8px, transparent .8px) !important;
  background-size: 13px 13px !important;
}
.product-art .art-mark--img { border: 1.5px solid var(--tamm-ink) !important; border-radius: 10px !important; background: var(--tamm-paper) !important; box-shadow: 4px 4px 0 rgba(17,26,52,.18) !important; }
.product-art .art-mark { color: var(--tamm-ink) !important; }
.product-art .art-orbit { border-color: rgba(17,26,52,.26) !important; }
.product-art .art-caption { color: var(--tamm-ink) !important; font-weight: 800 !important; }
.product-badge { border: 1px solid var(--tamm-ink) !important; border-radius: 4px !important; color: var(--tamm-ink) !important; background: var(--tamm-cyan) !important; font-weight: 900 !important; box-shadow: 2px 2px 0 var(--tamm-ink); }
.wishlist-card-btn { border: 1px solid var(--tamm-ink) !important; border-radius: 50% !important; color: var(--tamm-ink) !important; background: var(--tamm-paper) !important; box-shadow: 2px 2px 0 rgba(17,26,52,.18) !important; }
.wishlist-card-btn.active, .wishlist-card-btn:hover { color: #fff !important; background: #c63e37 !important; }
.product-open-hint { border: 1px solid var(--tamm-ink) !important; border-radius: 4px !important; color: var(--tamm-ink) !important; background: var(--tamm-cyan) !important; font-weight: 800 !important; }
.product-copy { padding: 15px !important; }
.product-copy h3 { color: var(--tamm-ink) !important; font-weight: 900 !important; letter-spacing: -.03em; }
.product-copy > p { min-height: 2.7em; color: var(--tamm-muted) !important; line-height: 1.55 !important; }
.product-meta { color: var(--tamm-muted) !important; }
.product-dot { background: var(--tamm-blue) !important; }
.product-price-row { padding-top: 12px !important; border-top: 1px solid rgba(17,26,52,.15) !important; }
.product-price-row small { color: var(--tamm-muted) !important; }
.product-price-row strong { color: var(--tamm-ink) !important; font-weight: 900 !important; }
.old-price { color: #858998 !important; }
.add-button, .btn-primary, .hero-primary, .checkout-button, .package-order-btn, .order-btn {
  border: 1.5px solid var(--tamm-ink) !important;
  border-radius: 5px !important;
  color: var(--tamm-paper) !important;
  background: var(--tamm-blue) !important;
  box-shadow: 3px 3px 0 var(--tamm-ink) !important;
  font-weight: 800 !important;
}
.add-button:hover, .btn-primary:hover, .hero-primary:hover, .checkout-button:hover, .package-order-btn:hover, .order-btn:hover { color: var(--tamm-ink) !important; background: var(--tamm-cyan) !important; transform: translate(-1px, -1px) !important; box-shadow: 4px 4px 0 var(--tamm-ink) !important; }
.btn-secondary, .secondary-button, .hero-secondary { border: 1.5px solid var(--tamm-ink) !important; border-radius: 5px !important; color: var(--tamm-ink) !important; background: var(--tamm-paper) !important; font-weight: 700 !important; }

/* Bundles, account area, delivery steps and reassurance sections */
.bundle-card, .package-card, .active-subscription-card, .step-card, .faq-item, .review-card, .testimonial-card, .card {
  border: 1.5px solid var(--tamm-ink) !important;
  border-radius: 8px !important;
  background: var(--tamm-paper) !important;
  box-shadow: 4px 4px 0 rgba(17,26,52,.11) !important;
}
.bundle-card:hover, .package-card:hover, .step-card:hover, .active-subscription-card:hover { transform: translateY(-3px) !important; box-shadow: 6px 6px 0 var(--tamm-blue) !important; }
.package-card { border-color: var(--tamm-ink) !important; border-radius: 8px !important; background: var(--tamm-ink) !important; box-shadow: 5px 5px 0 var(--tamm-cyan) !important; }
.package-card .package-order-btn { border: 1px solid var(--tamm-ink) !important; border-radius: 5px !important; color: var(--tamm-ink) !important; background: var(--tamm-cyan) !important; }
.pk-arrow, .carousel-btn { border: 1.5px solid var(--tamm-ink) !important; border-radius: 50% !important; color: var(--tamm-ink) !important; background: var(--tamm-cyan) !important; }
.pk-dots button { border-color: var(--tamm-ink) !important; background: var(--tamm-paper) !important; }
.pk-dots button.active { background: var(--tamm-blue) !important; }
.how-section { padding: 40px 0; }
.step-card { position: relative; }
.step-index { border: 1px solid var(--tamm-ink) !important; border-radius: 4px !important; color: var(--tamm-ink) !important; background: var(--tamm-cyan) !important; font-weight: 900 !important; }
.step-icon { color: var(--tamm-blue) !important; background: var(--tamm-cyan-pale) !important; }
.step-connector { color: var(--tamm-blue) !important; }
.special-section {
  overflow: hidden;
  border: 2px solid var(--tamm-ink) !important;
  border-radius: 9px !important;
  color: var(--tamm-paper) !important;
  background: var(--tamm-ink) !important;
  box-shadow: 7px 7px 0 var(--tamm-cyan) !important;
}
.special-section .eyebrow, .special-section h2, .special-section h2 em, .special-section p { color: var(--tamm-paper) !important; }
.special-section h2 em { text-decoration: underline; text-decoration-color: var(--tamm-cyan); text-decoration-thickness: 4px; text-underline-offset: 5px; }
.special-card { border: 1.5px solid var(--tamm-cyan) !important; border-radius: 7px !important; color: var(--tamm-ink) !important; background: var(--tamm-cyan) !important; box-shadow: 5px 5px 0 rgba(255,255,255,.14) !important; }
.special-lines i { border-bottom-color: rgba(17,26,52,.28) !important; }
.whatsapp-button { border: 1.5px solid var(--tamm-ink) !important; border-radius: 5px !important; color: var(--tamm-ink) !important; background: var(--tamm-cyan) !important; box-shadow: 3px 3px 0 var(--tamm-paper) !important; font-weight: 800 !important; }
.review-score { padding: 10px 14px !important; border: 1.5px solid var(--tamm-ink) !important; border-radius: 7px !important; background: var(--tamm-cyan) !important; box-shadow: 3px 3px 0 var(--tamm-ink) !important; }
.review-score strong, .stars { color: var(--tamm-ink) !important; }
.carousel-btn:hover { color: var(--tamm-paper) !important; background: var(--tamm-ink) !important; }
.faq-item { overflow: hidden; }
.faq-item > button { color: var(--tamm-ink) !important; font-weight: 800 !important; }
.faq-item.open { border-color: var(--tamm-blue) !important; box-shadow: 4px 4px 0 var(--tamm-blue) !important; }
.faq-toggle { border: 1px solid var(--tamm-ink) !important; border-radius: 50% !important; color: var(--tamm-ink) !important; background: var(--tamm-cyan) !important; }
.footer-cta { border: 1.5px solid var(--tamm-ink) !important; border-radius: 8px !important; color: var(--tamm-paper) !important; background: var(--tamm-blue) !important; box-shadow: 7px 7px 0 var(--tamm-ink) !important; }
.footer-cta h2, .footer-cta h2 em, .footer-cta .eyebrow { color: var(--tamm-paper) !important; }
.footer-cta .hero-primary { color: var(--tamm-ink) !important; background: var(--tamm-cyan) !important; }
.site-footer { margin-top: 65px !important; border-top: 2px solid var(--tamm-ink) !important; color: var(--tamm-paper) !important; background: var(--tamm-ink) !important; }
.site-footer .brand-copy strong, .site-footer .footer-links strong, .site-footer .footer-brand p { color: var(--tamm-paper) !important; }
.site-footer .brand-copy small, .site-footer .footer-links button, .site-footer .footer-bottom { color: #c8ccda !important; }
.site-footer .footer-links button:hover { color: var(--tamm-cyan) !important; }

/* Product detail, cart, payment and account screens use the same visual language. */
.back-btn { border: 1px solid var(--tamm-ink) !important; border-radius: 5px !important; color: var(--tamm-ink) !important; background: var(--tamm-paper) !important; }
.detail-layout { gap: 25px !important; }
.detail-art, .detail-content { border: 1.5px solid var(--tamm-ink) !important; border-radius: 8px !important; background: var(--tamm-paper) !important; box-shadow: 5px 5px 0 rgba(17,26,52,.12) !important; }
.detail-content { padding: clamp(18px, 3vw, 34px) !important; }
.detail-content h1 { color: var(--tamm-ink) !important; font-weight: 900 !important; letter-spacing: -.04em; }
.detail-note { border: 1px solid var(--tamm-ink) !important; border-radius: 5px !important; color: var(--tamm-ink) !important; background: var(--tamm-cyan-pale) !important; }
.duration-pill, .type-btn, .option-chip, .quantity-control button { border: 1px solid var(--tamm-ink) !important; border-radius: 5px !important; color: var(--tamm-ink) !important; background: var(--tamm-paper) !important; }
.duration-pill.active, .type-btn.active, .option-chip.active { color: var(--tamm-cyan) !important; background: var(--tamm-ink) !important; }
.duration-pill.unavailable { opacity: .45 !important; }
.price-display, .product-price-display, .price-card { border: 1.5px solid var(--tamm-ink) !important; border-radius: 7px !important; background: var(--tamm-cyan-pale) !important; }
.modal-overlay { background: rgba(17,26,52,.72) !important; backdrop-filter: blur(5px); }
.modal-box, .product-dialog, .dialog-box {
  border: 1.5px solid var(--tamm-ink) !important;
  border-radius: 9px !important;
  color: var(--tamm-ink) !important;
  background: var(--tamm-paper) !important;
  box-shadow: 8px 8px 0 var(--tamm-blue) !important;
}
.modal-box h2, .modal-box h3, .modal-box .card-title { color: var(--tamm-ink) !important; font-weight: 900 !important; }
.modal-close, .icon-button { border: 1px solid var(--tamm-ink) !important; border-radius: 50% !important; color: var(--tamm-ink) !important; background: var(--tamm-cyan) !important; }
.modal-close:hover, .icon-button:hover { color: var(--tamm-paper) !important; background: var(--tamm-ink) !important; }
.cart-price-breakdown, .cart-total-row, .wallet-balance-box { border-color: var(--tamm-line) !important; }
.cart-total-row { background: var(--tamm-cyan-pale) !important; }
.form-group input, .form-group textarea, .form-group select, .auth-form input, .contact-input, .adm-card input, .adm-card textarea, .adm-card select {
  border: 1px solid #bfc2c9 !important;
  border-radius: 5px !important;
  color: var(--tamm-ink) !important;
  background: var(--tamm-paper) !important;
}
.form-group input:focus, .form-group textarea:focus, .form-group select:focus, .auth-form input:focus { border-color: var(--tamm-blue) !important; box-shadow: 0 0 0 3px rgba(36,84,232,.13) !important; }
.auth-page { background: var(--tamm-sand) !important; }
.auth-aside { color: var(--tamm-paper) !important; background: var(--tamm-ink) !important; }
.auth-aside h1, .auth-aside .brand-copy strong, .auth-aside .brand-copy small, .auth-aside .eyebrow { color: var(--tamm-paper) !important; }
.auth-card { border: 1.5px solid var(--tamm-ink) !important; border-radius: 9px !important; background: var(--tamm-paper) !important; box-shadow: 7px 7px 0 var(--tamm-blue) !important; }
.auth-tabs button.is-active { border-color: var(--tamm-ink) !important; color: var(--tamm-cyan) !important; background: var(--tamm-ink) !important; }
.support-widget { border: 1.5px solid var(--tamm-ink) !important; border-radius: 8px !important; box-shadow: 5px 5px 0 var(--tamm-cyan) !important; }
.support-launcher, .support-widget .support-header { color: var(--tamm-paper) !important; background: var(--tamm-ink) !important; }
.support-launcher { border: 1.5px solid var(--tamm-ink) !important; box-shadow: 3px 3px 0 var(--tamm-cyan) !important; }
.adm-card, .adm-page, .adm-top { border-radius: 7px !important; }
.adm-card { border: 1px solid var(--tamm-line) !important; box-shadow: 3px 3px 0 rgba(17,26,52,.1) !important; }
.adm-nav .active, .adm-bottom .active { color: var(--tamm-ink) !important; background: var(--tamm-cyan) !important; }

@media (hover: hover) {
  .banner-frame img { transition: transform .6s cubic-bezier(.2,.7,.2,1); }
  .banner-frame:hover img { transform: scale(1.012); }
  .product-card .art-mark--img img { transition: transform .55s cubic-bezier(.2,.7,.2,1); }
  .product-card:hover .art-mark--img img { transform: scale(1.07) rotate(-2deg); }
}

@media (max-width: 920px) {
  .page-width, .header-inner { width: calc(100% - 32px) !important; }
  .trust-strip { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .trust-item:nth-child(3) { border-inline-start: 0; }
  .trust-item:nth-child(n+3) { border-top: 1px solid rgba(255,255,255,.18); }
  .catalog-toolbar { align-items: stretch !important; flex-direction: column !important; }
  .search-field { width: 100% !important; }
}

@media (max-width: 600px) {
  html { scroll-padding-top: 72px; }
  .page-width, .header-inner { width: calc(100% - 24px) !important; }
  .announcement { min-height: 30px !important; font-size: 10px !important; }
  .header-inner { min-height: 66px !important; }
  .brand-mark { width: 38px; height: 38px; }
  .header-actions { gap: 6px !important; }
  .account-button, .cart-button, .wishlist-button, .mobile-menu-button { min-width: 40px !important; min-height: 40px !important; box-shadow: 2px 2px 0 rgba(17,26,52,.13) !important; }
  .home-banner { padding-top: 17px !important; padding-bottom: 20px !important; }
  .banner-frame { border-width: 1.5px !important; border-radius: 6px !important; box-shadow: 4px 4px 0 var(--tamm-ink) !important; }
  .home-search { width: calc(100% - 20px) !important; box-shadow: 3px 3px 0 var(--tamm-ink) !important; }
  .trust-strip { padding: 10px 7px !important; box-shadow: 3px 3px 0 var(--tamm-blue) !important; }
  .trust-item { padding: 8px !important; gap: 8px !important; }
  .trust-item strong { font-size: 11px !important; }
  .trust-item small { font-size: 9px !important; }
  .trust-icon { font-size: 16px !important; }
  .catalog-section, .bundles-section, .how-section, .reviews-section, .faq-section { margin-top: 48px !important; }
  .catalog-section { padding-top: 27px !important; }
  .catalog-heading { gap: 10px !important; }
  .catalog-count { min-width: 102px !important; padding: 9px 11px !important; }
  .catalog-toolbar { padding: 8px !important; gap: 8px !important; }
  .category-tabs { padding-bottom: 4px !important; scrollbar-width: thin; }
  .filter-tab { min-height: 37px !important; padding: 7px 11px !important; font-size: 11px !important; }
  .product-grid { gap: 12px !important; }
  .product-card { border-radius: 6px !important; box-shadow: 3px 3px 0 rgba(17,26,52,.12) !important; }
  .product-card:hover { box-shadow: 4px 4px 0 var(--tamm-blue) !important; }
  .product-copy { padding: 10px !important; }
  .product-copy h3 { font-size: 14px !important; }
  .product-copy > p { font-size: 10px !important; }
  .product-price-row strong { font-size: 13px !important; }
  .add-button { min-height: 39px !important; padding-inline: 8px !important; font-size: 10px !important; }
  .special-section { padding: 22px !important; box-shadow: 4px 4px 0 var(--tamm-cyan) !important; }
  .footer-cta { padding: 20px !important; box-shadow: 4px 4px 0 var(--tamm-ink) !important; }
  .site-footer { margin-top: 43px !important; }
  .detail-layout { grid-template-columns: 1fr !important; }
  .detail-content { padding: 18px !important; }
  .modal-overlay { align-items: end !important; padding: 0 !important; }
  .modal-box, .modal-box-lg { width: 100% !important; max-height: 91dvh !important; border-radius: 12px 12px 0 0 !important; box-shadow: 0 -5px 0 var(--tamm-blue) !important; }
  .auth-page { grid-template-columns: 1fr !important; }
  .auth-aside { min-height: 0 !important; padding: 20px !important; }
  .auth-card { box-shadow: 0 -4px 0 var(--tamm-blue) !important; }
}

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

/* Screenshot refinements: clearer special-order card, tighter product cards,
   a single Tamm palette for bundles and notifications, and theme switching. */
:root {
  --tamm-header-surface: rgba(244, 241, 232, .96);
  --tamm-dark-surface: #111a34;
  --tamm-inverse-text: #fffdf7;
  --tamm-accent-text: #111a34;
  --tamm-popup-shadow: 8px 8px 0 var(--tamm-blue);
}
:root[data-theme="dark"] {
  --tamm-ink: #f1f3fa;
  --tamm-navy: #080e1c;
  --tamm-blue: #7191ff;
  --tamm-cyan: #d8f23a;
  --tamm-cyan-pale: #263247;
  --tamm-sand: #0d1424;
  --tamm-paper: #19233a;
  --tamm-line: #46516b;
  --tamm-muted: #adb6ca;
  --tamm-header-surface: rgba(13, 20, 36, .96);
  --tamm-dark-surface: #080e1c;
  --tamm-inverse-text: #f4f1e8;
  --tamm-accent-text: #111a34;
  --tamm-popup-shadow: 7px 7px 0 rgba(113,145,255,.62);
  --primary: #7191ff;
  --primary-dark: #080e1c;
  --primary-light: #d8f23a;
  --secondary: #d8f23a;
  --secondary-light: #263247;
  --bg: #0d1424;
  --bg-light: #141e33;
  --card: #19233a;
  --card-hover: #202d46;
  --text: #f1f3fa;
  --text-muted: #adb6ca;
  --border: #46516b;
  --success: #59c99b;
  --success-light: #6ed6a9;
  --danger: #ff7770;
  --warning: #ffc565;
  --info: #7191ff;
  --glass: rgba(13,20,36,.95);
  --shadow-soft: 4px 4px 0 rgba(0,0,0,.25);
  --shadow-strong: 8px 8px 0 rgba(0,0,0,.28);
  --shadow-btn: 4px 4px 0 rgba(0,0,0,.3);
}
:root[data-theme="dark"] body { background-image: radial-gradient(rgba(241,243,250,.075) .7px, transparent .7px) !important; }
.announcement { color: var(--tamm-accent-text) !important; }
.site-header, .site-header.is-scrolled { background: var(--tamm-header-surface) !important; }
.trust-strip, .special-section, .site-footer, .package-card, .package-card:nth-child(even), .bundle-card, .bundle-card--blue, .bundle-card--gold {
  border-color: var(--tamm-ink) !important;
  color: var(--tamm-inverse-text) !important;
  background: var(--tamm-dark-surface) !important;
}
.special-section .special-card, .special-section .special-card * { color: var(--tamm-accent-text) !important; }
.special-section .special-card { border: 1.5px solid var(--tamm-ink) !important; background: var(--tamm-cyan) !important; box-shadow: 5px 5px 0 rgba(255,255,255,.16) !important; }
.special-section .special-card-top, .special-section .special-card-bottom { font-weight: 800 !important; }
.special-section .special-card-top i, .special-section .special-card-bottom i { color: var(--tamm-blue) !important; }
.special-section .special-lines i { border-bottom: 1px solid rgba(17,26,52,.35) !important; }
.bundle-card .bundle-number, .package-card .package-number { color: var(--tamm-cyan) !important; }
.bundle-card .bundle-label, .bundle-card--gold .bundle-label { color: var(--tamm-cyan) !important; }
.bundle-card .bundle-content h3, .bundle-card--gold .bundle-content h3,
.bundle-card .bundle-content p, .bundle-card--gold .bundle-content p,
.bundle-card .bundle-bottom strong, .bundle-card--gold .bundle-bottom strong { color: var(--tamm-inverse-text) !important; }
.bundle-card .bundle-bottom button, .bundle-card--gold .bundle-bottom button { color: var(--tamm-cyan) !important; }
.bundle-card .bundle-symbol, .bundle-card--gold .bundle-symbol { color: rgba(216,242,58,.18) !important; }
.package-card:nth-child(even) { color: var(--tamm-inverse-text) !important; }
.package-card .package-tagline, .package-card:nth-child(even) .package-tagline,
.package-card .package-includes, .package-card:nth-child(even) .package-includes,
.package-card .package-price-original, .package-card:nth-child(even) .package-price-original { color: rgba(255,253,247,.72) !important; }
.package-card .package-name, .package-card .package-price { color: var(--tamm-inverse-text) !important; }
.package-card .package-badge { border: 1px solid var(--tamm-ink) !important; border-radius: 4px !important; color: var(--tamm-accent-text) !important; background: var(--tamm-cyan) !important; }

/* Keep descriptions on the product detail screen, not on the catalogue cards. */
.product-card .product-copy > p { display: none !important; }
.product-card .product-copy h3 { min-height: 2.7em; margin-bottom: 12px !important; line-height: 1.35 !important; }

/* Notification dropdown injected by notifications.js */
.notification-button {
  min-width: 44px !important;
  min-height: 44px !important;
  border: 1.5px solid var(--tamm-ink) !important;
  border-radius: 7px !important;
  color: var(--tamm-ink) !important;
  background: var(--tamm-paper) !important;
  box-shadow: 3px 3px 0 rgba(17,26,52,.13) !important;
}
.notification-button:hover, .notification-button.has-unread { background: var(--tamm-cyan) !important; }
.notification-badge { border: 2px solid var(--tamm-paper) !important; color: #fff !important; background: #d7443e !important; }
.notification-panel {
  border: 1.5px solid var(--tamm-ink) !important;
  border-radius: 8px !important;
  color: var(--tamm-ink) !important;
  background: var(--tamm-paper) !important;
  box-shadow: var(--tamm-popup-shadow) !important;
}
.notification-panel-head { border-bottom: 1px solid var(--tamm-line) !important; background: var(--tamm-paper) !important; }
.notification-panel-head strong { color: var(--tamm-ink) !important; font-weight: 900 !important; }
.notification-panel-head small, .notification-item small, .notification-item time, .notification-empty { color: var(--tamm-muted) !important; }
.notification-panel-head button { color: var(--tamm-blue) !important; font-weight: 700 !important; }
.notification-item { border-bottom: 1px solid rgba(100,107,125,.2) !important; color: var(--tamm-ink) !important; }
.notification-item.unread { background: rgba(36,84,232,.08) !important; }
.notification-item:hover { background: var(--tamm-cyan-pale) !important; }
.notification-icon { border: 1px solid var(--tamm-ink) !important; border-radius: 7px !important; color: var(--tamm-accent-text) !important; background: var(--tamm-cyan) !important; }
.nav-link.active { color: var(--tamm-cyan) !important; background: var(--tamm-dark-surface) !important; }
.cart-button, .cart-button:hover, .notification-button.has-unread { color: var(--tamm-accent-text) !important; }
.catalog-count { color: var(--tamm-cyan) !important; background: var(--tamm-dark-surface) !important; }
.catalog-count strong { color: var(--tamm-inverse-text) !important; }
.review-score strong, .review-score .stars { color: var(--tamm-accent-text) !important; }
.modal-close, .modal-close:hover { color: var(--tamm-accent-text) !important; }
.auth-tabs button.is-active { color: var(--tamm-cyan) !important; background: var(--tamm-dark-surface) !important; }
.auth-aside { background: var(--tamm-dark-surface) !important; }
.support-widget { color: var(--tamm-ink) !important; background: var(--tamm-paper) !important; }
.wallet-card, .account-card, .order-row, .tamm-orders-list .order-card, .orders-card, .profile-card {
  border: 1px solid var(--tamm-line) !important;
  border-radius: 8px !important;
  color: var(--tamm-ink) !important;
  background: var(--tamm-paper) !important;
}
:root[data-theme="dark"] .site-header .admin-badge { color: var(--tamm-accent-text) !important; background: var(--tamm-cyan) !important; }
:root[data-theme="dark"] .add-button,
:root[data-theme="dark"] .btn-primary,
:root[data-theme="dark"] .hero-primary,
:root[data-theme="dark"] .checkout-button,
:root[data-theme="dark"] .package-order-btn,
:root[data-theme="dark"] .order-btn,
:root[data-theme="dark"] .whatsapp-button,
:root[data-theme="dark"] .modal-close,
:root[data-theme="dark"] .cart-button,
:root[data-theme="dark"] .notification-button.has-unread {
  color: var(--tamm-accent-text) !important;
  background: var(--tamm-cyan) !important;
}
:root[data-theme="dark"] .footer-cta { background: #2454e8 !important; }
:root[data-theme="dark"] .footer-cta h2,
:root[data-theme="dark"] .footer-cta h2 em,
:root[data-theme="dark"] .footer-cta .eyebrow { color: #fffdf7 !important; }

/* Persistent light / dark mode switch */
.theme-mode-toggle {
  display: inline-flex;
  min-width: 44px;
  min-height: 44px;
  padding: 7px 10px;
  align-items: center;
  justify-content: center;
  gap: 7px;
  border: 1.5px solid var(--tamm-ink);
  border-radius: 7px;
  color: var(--tamm-ink);
  background: var(--tamm-paper);
  box-shadow: 3px 3px 0 rgba(17,26,52,.13);
  cursor: pointer;
  font-size: 11px;
  font-weight: 800;
  transition: color .2s, background .2s, transform .2s;
}
.theme-mode-toggle:hover { color: var(--tamm-accent-text); background: var(--tamm-cyan); transform: translate(-1px,-1px); }
.theme-mode-toggle i { font-size: 15px; }
:root[data-theme="dark"] .theme-mode-toggle { color: var(--tamm-accent-text); background: var(--tamm-cyan); }
:root[data-theme="dark"] .theme-mode-toggle:hover { color: var(--tamm-cyan); background: var(--tamm-dark-surface); }
:root[data-theme="dark"] .search-field, :root[data-theme="dark"] .search-field input,
:root[data-theme="dark"] .form-group input, :root[data-theme="dark"] .form-group textarea,
:root[data-theme="dark"] .form-group select, :root[data-theme="dark"] .auth-form input,
:root[data-theme="dark"] .adm-card input, :root[data-theme="dark"] .adm-card textarea,
:root[data-theme="dark"] .adm-card select { color: var(--tamm-ink) !important; background: var(--tamm-paper) !important; }
:root[data-theme="dark"] .search-field input::placeholder,
:root[data-theme="dark"] .form-group input::placeholder,
:root[data-theme="dark"] .form-group textarea::placeholder { color: var(--tamm-muted) !important; }

@media (max-width: 600px) {
  .theme-mode-toggle { min-width: 40px; min-height: 40px; padding: 6px; box-shadow: 2px 2px 0 rgba(17,26,52,.13); }
  .theme-mode-toggle span { display: none; }
}

/* Brand alignment: use the exact Tamm blue sampled from the supplied logo. */
:root {
  --tamm-blue: #0168fd;
  --tamm-cyan: #0168fd;
  --tamm-cyan-pale: #e8f1ff;
  --primary: #0168fd;
  --primary-light: #0168fd;
  --secondary: #0168fd;
  --secondary-light: #e8f1ff;
  --info: #0168fd;
  --tamm-header-surface: rgba(244,241,232,.97);
}
:root[data-theme="dark"] {
  --tamm-blue: #4b8cff;
  --tamm-cyan: #4b8cff;
  --tamm-cyan-pale: #1b2c48;
  --primary: #4b8cff;
  --primary-light: #4b8cff;
  --secondary: #4b8cff;
  --secondary-light: #1b2c48;
  --info: #4b8cff;
  --tamm-header-surface: rgba(13,20,36,.97);
}

.announcement { color: #fff !important; background: #0168fd !important; }
.brand-mark { border-color: #0168fd !important; background: #fff !important; box-shadow: 3px 3px 0 #0168fd !important; }
.nav-link.active { border-color: #0168fd !important; color: #fff !important; background: #0168fd !important; box-shadow: 3px 3px 0 var(--tamm-ink) !important; }
.cart-button, .cart-button:hover, .notification-button.has-unread { color: #fff !important; background: #0168fd !important; }
.banner-arrow { color: #fff !important; background: #0168fd !important; }
.banner-arrow:hover { color: #fff !important; background: var(--tamm-dark-surface) !important; }
.home-search button { color: #fff !important; background: #0168fd !important; }
.trust-icon { color: #8db8ff !important; }
.filter-tab.active { border-color: #0168fd !important; color: #fff !important; background: #0168fd !important; box-shadow: 3px 3px 0 var(--tamm-ink) !important; }
.product-badge, .product-open-hint { border-color: #0168fd !important; color: #fff !important; background: #0168fd !important; }
.step-index { border-color: #0168fd !important; color: #fff !important; background: #0168fd !important; }
.review-score { border-color: #0168fd !important; color: #fff !important; background: #0168fd !important; }
.review-score strong, .review-score .stars { color: #fff !important; }
.faq-toggle { border-color: #0168fd !important; color: #fff !important; background: #0168fd !important; }
.notification-icon { border-color: #0168fd !important; color: #fff !important; background: #0168fd !important; }
.theme-mode-toggle:hover { color: #fff !important; background: #0168fd !important; }
:root[data-theme="dark"] .theme-mode-toggle:hover { color: #fff !important; background: #0168fd !important; }

/* Rebuilt special-order feature panel */
.special-section {
  position: relative;
  grid-template-columns: minmax(0, 1.08fr) minmax(280px, .92fr) !important;
  gap: clamp(28px, 5vw, 68px) !important;
  padding: clamp(24px, 4vw, 48px) !important;
  border: 1.5px solid #111a34 !important;
  border-radius: 10px !important;
  background: #111a34 !important;
  box-shadow: 8px 8px 0 #0168fd !important;
}
.special-section .special-copy { position: relative; z-index: 1; max-width: 550px; }
.special-section .special-copy .eyebrow { display: inline-flex; padding: 6px 11px; border: 1px solid rgba(255,255,255,.38); border-radius: 4px; color: #fff !important; background: rgba(1,104,253,.28); }
.special-section .special-copy h2 { margin: 16px 0 14px !important; color: #fff !important; font-size: clamp(34px, 4.2vw, 54px) !important; line-height: 1.22 !important; }
.special-section .special-copy h2 em { color: #77aaff !important; text-decoration: underline; text-decoration-color: #0168fd; text-decoration-thickness: 4px; text-underline-offset: 7px; }
.special-section .special-copy p { max-width: 500px; color: #d7e0f4 !important; font-size: 14px !important; line-height: 1.95 !important; }
.special-section .whatsapp-button { min-height: 48px; padding: 10px 18px; border: 1px solid #fff !important; border-radius: 5px !important; color: #fff !important; background: #0168fd !important; box-shadow: 4px 4px 0 #fff !important; font-weight: 800 !important; }
.special-section .whatsapp-button:hover { color: #111a34 !important; background: #fff !important; box-shadow: 4px 4px 0 #0168fd !important; }
.special-section .special-card {
  display: flex;
  min-height: 310px !important;
  padding: 25px !important;
  flex-direction: column;
  justify-content: space-between;
  border: 1.5px solid rgba(255,255,255,.8) !important;
  border-radius: 8px !important;
  color: #fff !important;
  background: linear-gradient(145deg, #0168fd 0%, #2783ff 100%) !important;
  box-shadow: 6px 6px 0 rgba(255,255,255,.14) !important;
}
.special-section .special-card::before, .special-section .special-card::after { border-color: rgba(255,255,255,.23) !important; }
.special-section .special-card-top, .special-section .special-card-bottom { color: #fff !important; font-weight: 800 !important; }
.special-section .special-card-top span { padding: 7px 11px !important; border: 1px solid rgba(255,255,255,.7) !important; border-radius: 4px !important; color: #fff !important; background: rgba(255,255,255,.14) !important; font-size: 12px !important; }
.special-section .special-card-top i, .special-section .special-card-bottom i { color: #fff !important; }
.special-section .special-lines { display: grid; gap: 10px !important; margin-top: 32px !important; }
.special-section .special-lines span {
  display: flex;
  min-height: 38px;
  padding: 8px 12px;
  align-items: center;
  border: 1px solid rgba(255,255,255,.35);
  border-radius: 5px;
  color: #fff;
  background: rgba(255,255,255,.12);
  font-size: 12px;
  font-weight: 700;
}
.special-section .special-lines span::before { width: 7px; height: 7px; margin-inline-end: 9px; border-radius: 50%; background: #fff; content: ''; }
.special-section .special-card-bottom { margin-top: 21px !important; color: #fff !important; font-size: 11px !important; }

/* One coherent branded treatment for every generated bundle card. */
.pk-card {
  --a: #0168fd !important;
  --b: #4b91ff !important;
  min-height: 250px !important;
  padding: 20px !important;
  border: 1.5px solid #123d8a !important;
  border-radius: 9px !important;
  color: #fff !important;
  background: linear-gradient(140deg, #0168fd 0%, #3286ff 100%) !important;
  box-shadow: 6px 6px 0 #111a34 !important;
}
.pk-card:hover { transform: translate(-2px,-3px) !important; box-shadow: 9px 9px 0 #111a34 !important; }
.pk-card::before { background: radial-gradient(circle, rgba(255,255,255,.3), rgba(255,255,255,0) 68%) !important; }
.pk-card::after { border-color: rgba(255,255,255,.22) !important; }
.pk-av { border: 2px solid #fff !important; box-shadow: 2px 2px 0 rgba(17,26,52,.35) !important; }
.pk-count { color: #fff !important; }
.pk-off { border: 1px solid #123d8a !important; border-radius: 5px !important; color: #0168fd !important; background: #fff !important; box-shadow: 3px 3px 0 #111a34 !important; }
.pk-badge { border: 1px solid rgba(255,255,255,.65) !important; border-radius: 4px !important; color: #fff !important; background: rgba(255,255,255,.15) !important; }
.pk-name { color: #fff !important; text-shadow: none !important; }
.pk-tag { color: rgba(255,255,255,.9) !important; }
.pk-chips li { border: 1px solid rgba(255,255,255,.5) !important; border-radius: 5px !important; color: #fff !important; background: rgba(255,255,255,.14) !important; }
.pk-chips li.pk-more { color: #fff !important; background: rgba(17,26,52,.28) !important; }
.pk-foot { border-top: 1px solid rgba(255,255,255,.42) !important; }
.pk-price small, .pk-price strong, .pk-save s { color: #fff !important; }
.pk-save b { border: 1px solid #fff !important; border-radius: 4px !important; color: #0056d6 !important; background: #e8f1ff !important; }
.pk-cta { min-height: 43px; border: 1px solid #123d8a !important; border-radius: 5px !important; color: #0168fd !important; background: #fff !important; box-shadow: 3px 3px 0 #111a34 !important; }
.pk-cta:hover { color: #fff !important; background: #111a34 !important; }
.pk-arrow { border: 1.5px solid #111a34 !important; color: #fff !important; background: #0168fd !important; box-shadow: 3px 3px 0 #111a34 !important; }
.pk-dots button.on { background: #0168fd !important; }

:root[data-theme="dark"] .special-section { background: #080e1c !important; box-shadow: 8px 8px 0 #4b8cff !important; }
:root[data-theme="dark"] .special-section .special-card { background: linear-gradient(145deg,#0168fd,#3c83eb) !important; }
:root[data-theme="dark"] .special-section .special-copy h2 em { color: #9fc1ff !important; }
:root[data-theme="dark"] .pk-card { box-shadow: 6px 6px 0 #080e1c !important; }

@media (max-width: 720px) {
  .special-section { grid-template-columns: 1fr !important; gap: 25px !important; padding: 22px !important; }
  .special-section .special-card { min-height: 245px !important; padding: 19px !important; }
  .special-section .special-lines { margin-top: 23px !important; }
  .pk-card { flex-basis: min(88%, 380px) !important; min-height: 235px !important; padding: 17px !important; border-radius: 8px !important; }
}

/* Softer contrast pass: reserve the logo's electric blue for small actions. */
:root {
  --tamm-ink: #1b2a42;
  --tamm-navy: #17243b;
  --tamm-blue: #315f9f;
  --tamm-cyan: #789dcc;
  --tamm-cyan-pale: #edf3fb;
  --tamm-sand: #f5f6f8;
  --tamm-paper: #fffefa;
  --tamm-line: #cbd4e1;
  --tamm-muted: #66758a;
  --tamm-header-surface: rgba(245,246,248,.97);
  --tamm-dark-surface: #192842;
  --tamm-inverse-text: #f8faff;
  --tamm-accent-text: #17243b;
  --tamm-popup-shadow: 0 14px 34px rgba(18,37,65,.16);
  --primary: #0168fd;
  --primary-dark: #17243b;
  --primary-light: #0168fd;
  --secondary: #789dcc;
  --secondary-light: #edf3fb;
  --bg: #f5f6f8;
  --bg-light: #edf1f6;
  --card: #fffefa;
  --card-hover: #f8faff;
  --text: #1b2a42;
  --text-muted: #66758a;
  --border: #cbd4e1;
  --info: #0168fd;
  --glass: rgba(255,254,250,.96);
  --shadow-soft: 0 8px 24px rgba(18,37,65,.1);
  --shadow-strong: 0 16px 38px rgba(18,37,65,.13);
  --shadow-btn: 0 4px 12px rgba(1,104,253,.18);
}
:root[data-theme="dark"] {
  --tamm-ink: #edf2fa;
  --tamm-navy: #0c1422;
  --tamm-blue: #76a2df;
  --tamm-cyan: #7da9e4;
  --tamm-cyan-pale: #24344c;
  --tamm-sand: #101827;
  --tamm-paper: #1a2638;
  --tamm-line: #3a4960;
  --tamm-muted: #aab7ca;
  --tamm-header-surface: rgba(16,24,39,.97);
  --tamm-dark-surface: #0c1422;
  --tamm-inverse-text: #edf2fa;
  --tamm-accent-text: #16243a;
  --tamm-popup-shadow: 0 14px 34px rgba(0,0,0,.34);
  --primary: #77a6e8;
  --primary-dark: #0c1422;
  --primary-light: #77a6e8;
  --secondary: #7da9e4;
  --secondary-light: #24344c;
  --bg: #101827;
  --bg-light: #172338;
  --card: #1a2638;
  --card-hover: #202e43;
  --text: #edf2fa;
  --text-muted: #aab7ca;
  --border: #3a4960;
  --info: #77a6e8;
  --glass: rgba(16,24,39,.96);
  --shadow-soft: 0 8px 24px rgba(0,0,0,.28);
  --shadow-strong: 0 16px 38px rgba(0,0,0,.32);
  --shadow-btn: 0 4px 12px rgba(0,0,0,.28);
}
:root body { background-image: radial-gradient(rgba(27,42,66,.045) .7px, transparent .7px) !important; }
:root[data-theme="dark"] body { background-image: radial-gradient(rgba(237,242,250,.045) .7px, transparent .7px) !important; }

.announcement { background: #315f9f !important; }
.trust-strip { background: var(--tamm-dark-surface) !important; box-shadow: 0 8px 20px rgba(18,37,65,.12) !important; }
.trust-icon { color: #a8c5ec !important; }
.banner-frame { box-shadow: 0 10px 24px rgba(18,37,65,.14) !important; }
.product-card { box-shadow: 0 5px 16px rgba(18,37,65,.1) !important; }
.product-card:hover { box-shadow: 0 12px 26px rgba(18,37,65,.16) !important; }
.product-badge { color: #fff !important; background: #315f9f !important; border-color: #315f9f !important; box-shadow: none !important; }
.footer-cta { background: #315f9f !important; box-shadow: 0 10px 25px rgba(18,37,65,.16) !important; }
.footer-cta .hero-primary { color: #fff !important; background: #0168fd !important; }
:root[data-theme="dark"] .footer-cta { background: #243750 !important; }

.special-section {
  border-color: #263b5b !important;
  background: #1c2c45 !important;
  box-shadow: 0 14px 30px rgba(18,37,65,.16) !important;
}
.special-section .special-card {
  border-color: rgba(255,255,255,.28) !important;
  background: linear-gradient(145deg, #315f9f 0%, #426fae 100%) !important;
  box-shadow: 0 10px 26px rgba(12,35,68,.22) !important;
}
.special-section .special-card::before, .special-section .special-card::after { border-color: rgba(255,255,255,.18) !important; }
.special-section .whatsapp-button { box-shadow: 0 5px 14px rgba(1,104,253,.22) !important; }
.special-section .whatsapp-button:hover { box-shadow: 0 7px 17px rgba(1,104,253,.25) !important; }
.special-section .special-lines span { border-color: rgba(255,255,255,.25) !important; background: rgba(255,255,255,.1) !important; }
:root[data-theme="dark"] .special-section { background: #0c1422 !important; }
:root[data-theme="dark"] .special-section .special-card { background: linear-gradient(145deg,#284a75,#355984) !important; }

.pk-card {
  --a: #315f9f !important;
  --b: #527cae !important;
  border-color: rgba(27,53,86,.45) !important;
  background: linear-gradient(140deg, #315f9f 0%, #527cae 100%) !important;
  box-shadow: 0 9px 22px rgba(18,37,65,.14) !important;
}
.pk-card:hover { box-shadow: 0 15px 30px rgba(18,37,65,.2) !important; }
.pk-card::before { background: radial-gradient(circle, rgba(255,255,255,.18), rgba(255,255,255,0) 68%) !important; }
.pk-card::after { border-color: rgba(255,255,255,.14) !important; }
.pk-off { color: #315f9f !important; box-shadow: 0 3px 9px rgba(18,37,65,.14) !important; }
.pk-cta { box-shadow: 0 3px 9px rgba(18,37,65,.15) !important; }
.pk-arrow { background: #315f9f !important; box-shadow: 0 4px 12px rgba(18,37,65,.16) !important; }
:root[data-theme="dark"] .pk-card { background: linear-gradient(140deg,#28466d 0%,#35577f 100%) !important; box-shadow: 0 9px 22px rgba(0,0,0,.28) !important; }

@media (prefers-reduced-motion: reduce) {
  .special-section .special-card, .pk-card, .product-card, .banner-frame img { transition: none !important; }
}

/* Mobile catalogue: keep two products per row without wrapping prices/actions. */
@media (max-width: 600px) {
  #productsGrid .product-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 12px 9px !important; }
  #productsGrid .product-card { display: flex !important; min-width: 0 !important; height: auto !important; flex-direction: column !important; align-self: start; }
  #productsGrid .product-visual-button { display: block; width: 100%; min-width: 0; }
  #productsGrid .product-art { width: 100%; aspect-ratio: 1.1 / 1 !important; }
  #productsGrid .product-art .art-caption { top: 8px !important; inset-inline-end: 8px !important; font-size: 7px !important; letter-spacing: .05em; }
  #productsGrid .product-copy { display: flex !important; min-width: 0; padding: 10px !important; flex: 1 1 auto; flex-direction: column; gap: 8px !important; }
  #productsGrid .product-copy h3 {
    display: -webkit-box !important;
    min-width: 0;
    min-height: 2.55em !important;
    margin: 0 !important;
    overflow: hidden;
    color: var(--tamm-ink) !important;
    font-size: clamp(12px, 3.2vw, 14px) !important;
    line-height: 1.35 !important;
    text-align: start;
    unicode-bidi: plaintext;
    overflow-wrap: anywhere;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
  }
  #productsGrid .product-copy > p { display: none !important; }
  #productsGrid .product-price-row {
    display: flex !important;
    min-width: 0;
    margin: 0 !important;
    padding-top: 8px !important;
    align-items: center !important;
    justify-content: flex-start !important;
    border-top: 1px solid rgba(100,117,138,.22) !important;
  }
  #productsGrid .product-price-row > div { display: flex !important; min-width: 0; width: 100%; align-items: baseline !important; justify-content: space-between !important; gap: 5px; }
  #productsGrid .product-price-row small { flex: 0 0 auto; color: var(--tamm-muted) !important; font-size: 10px !important; white-space: nowrap; }
  #productsGrid .product-price-row strong { min-width: 0; color: var(--tamm-ink) !important; font-size: 12px !important; font-weight: 900 !important; white-space: nowrap; }
  #productsGrid .product-price-row .old-price { display: none !important; }
  #productsGrid .add-button {
    display: flex !important;
    width: 100%;
    min-width: 0;
    min-height: 40px !important;
    margin-top: 1px;
    padding: 0 8px !important;
    align-items: center;
    justify-content: center !important;
    gap: 7px;
    border-radius: 5px !important;
    font-size: 11px !important;
    line-height: 1.2 !important;
    white-space: nowrap;
  }
  #productsGrid .add-button > span { min-width: 0; white-space: nowrap; }
  #productsGrid .add-button .button-arrow { display: none !important; }
  .ap-tabbar { padding-bottom: env(safe-area-inset-bottom) !important; }
  .tamm-app { padding-bottom: calc(74px + env(safe-area-inset-bottom)) !important; }
}

@media (max-width: 350px) {
  #productsGrid .product-grid { grid-template-columns: 1fr !important; gap: 14px !important; }
  #productsGrid .product-art { aspect-ratio: 1.45 / 1 !important; }
  #productsGrid .product-copy h3 { min-height: 1.4em !important; }
}