@import url('https://fonts.googleapis.com/css2?family=Cairo:wght@400;500;600;700;800;900&family=IBM+Plex+Sans+Arabic:wght@400;500;600;700&display=swap');

:root {
  --tamm-ink: #0f2040;
  --tamm-navy: #122b54;
  --tamm-blue: #1957a6;
  --tamm-cyan: #35c6d8;
  --tamm-cyan-pale: #e3f8fa;
  --tamm-sand: #f6f8fb;
  --tamm-paper: #ffffff;
  --tamm-line: #dfe7f0;
  --tamm-muted: #70819b;
  --tamm-green: #19896f;
  --tamm-gold: #bc8426;
  --tamm-shadow: 0 22px 60px rgba(20, 52, 93, 0.11);
  --tamm-shadow-soft: 0 10px 30px rgba(20, 52, 93, 0.08);
  --tamm-radius: 22px;
}

html { scroll-behavior: smooth; }
body {
  margin: 0;
  padding: 0 !important;
  background: var(--tamm-sand);
  color: var(--tamm-ink);
  font-family: 'Cairo', sans-serif;
  overflow-x: hidden;
}
button, input { font: inherit; }
button { -webkit-tap-highlight-color: transparent; }
button:focus-visible, input:focus-visible { outline: 3px solid rgba(53, 198, 216, .45); outline-offset: 3px; }

.tamm-app { position: relative; min-height: 100dvh; overflow: clip; background: var(--tamm-sand); }
.tamm-app::before {
  position: fixed; inset: 0; content: ''; pointer-events: none; z-index: 0;
  opacity: .3; background-image: radial-gradient(rgba(18,43,84,.07) .7px, transparent .7px);
  background-size: 20px 20px;
}
.tamm-app > * { position: relative; z-index: 1; }
.ambient { position: absolute; border-radius: 999px; filter: blur(2px); pointer-events: none; opacity: .7; }
.ambient-one { width: 430px; height: 430px; top: 280px; right: -300px; background: rgba(53,198,216,.18); }
.ambient-two { width: 360px; height: 360px; top: 900px; left: -250px; background: rgba(25,87,166,.08); }
.page-width { width: min(1200px, calc(100% - 48px)); margin-inline: auto; }

.announcement { height: 32px; display: flex; justify-content: center; align-items: center; gap: 13px; color: #dffbfe; background: var(--tamm-navy); font-size: 11px; font-weight: 600; letter-spacing: .01em; }
.announcement span { display: inline-flex; align-items: center; gap: 5px; }
.announcement-divider { width: 3px; height: 3px; border-radius: 50%; background: var(--tamm-cyan); }

.site-header { position: sticky; top: 0; z-index: 30; border-bottom: 1px solid rgba(223,231,240,.88); background: rgba(246,248,251,.9); backdrop-filter: blur(20px); }
.header-inner { width: min(1280px, calc(100% - 48px)); min-height: 78px; display: flex; align-items: center; gap: 42px; margin-inline: auto; }
.brand { display: inline-flex; align-items: center; gap: 10px; padding: 0; border: 0; background: none; color: var(--tamm-ink); cursor: pointer; text-align: start; }
.brand-mark { width: 39px; height: 39px; display: grid; place-items: center; color: var(--tamm-paper); background: var(--tamm-blue); border-radius: 13px 13px 13px 4px; box-shadow: 4px 4px 0 var(--tamm-cyan); transform: rotate(-3deg); }
.brand-mark span { font-family: 'IBM Plex Sans Arabic', sans-serif; font-size: 23px; font-weight: 700; transform: rotate(3deg); }
.brand-copy { display: grid; line-height: 1.1; }
.brand-copy strong { font-family: 'IBM Plex Sans Arabic', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -.03em; }
.brand-copy small { color: var(--tamm-muted); font-size: 9px; font-weight: 600; margin-top: 4px; }
.desktop-nav { display: flex; align-items: center; gap: 6px; margin-inline: auto; }
.nav-link { min-height: 40px; padding: 6px 15px; border: 0; border-radius: 12px; background: transparent; color: #5e708b; cursor: pointer; font-size: 13px; font-weight: 700; transition: background .2s, color .2s, transform .2s; }
.nav-link:hover, .nav-link.is-active { color: var(--tamm-blue); background: #e9f2fb; }
.nav-link:hover { transform: translateY(-1px); }
.header-actions { display: flex; align-items: center; gap: 9px; }
.account-button, .cart-button { min-height: 42px; display: inline-flex; align-items: center; justify-content: center; gap: 7px; padding: 7px 13px; border: 1px solid var(--tamm-line); border-radius: 13px; color: var(--tamm-ink); background: var(--tamm-paper); cursor: pointer; font-size: 12px; font-weight: 700; box-shadow: 0 3px 9px rgba(20,52,93,.03); transition: border .2s, transform .2s, box-shadow .2s; }
.account-button:hover, .cart-button:hover { border-color: var(--tamm-cyan); transform: translateY(-1px); box-shadow: var(--tamm-shadow-soft); }
.cart-button { position: relative; color: var(--tamm-blue); }
.cart-button b { position: absolute; top: -6px; left: -5px; min-width: 19px; height: 19px; display: grid; place-items: center; padding-inline: 4px; border: 2px solid var(--tamm-sand); border-radius: 50%; color: var(--tamm-paper); background: var(--tamm-cyan); font-size: 10px; line-height: 1; }
.mobile-menu-button { display: none; width: 42px; height: 42px; place-items: center; border: 1px solid var(--tamm-line); border-radius: 13px; color: var(--tamm-ink); background: var(--tamm-paper); cursor: pointer; }
.mobile-nav { display: none; }

.hero-section { min-height: 575px; display: grid; grid-template-columns: minmax(0, .92fr) minmax(420px, 1.08fr); align-items: center; gap: 45px; padding-top: 65px; padding-bottom: 60px; }
.hero-copy { position: relative; z-index: 2; padding-inline-start: clamp(0px, 3vw, 35px); }
.hero-kicker, .eyebrow { display: inline-flex; align-items: center; gap: 7px; color: var(--tamm-blue); font-size: 11px; font-weight: 800; letter-spacing: .01em; }
.pulse-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--tamm-cyan); box-shadow: 0 0 0 5px rgba(53,198,216,.15); }
.hero-copy h1 { margin: 17px 0 20px; color: var(--tamm-ink); font-family: 'IBM Plex Sans Arabic', sans-serif; font-size: clamp(42px, 5.4vw, 77px); font-weight: 700; letter-spacing: -.065em; line-height: 1.18; }
.hero-copy h1 em, .section-heading h2 em, .special-copy h2 em, .faq-intro h2 em, .tamm-delivery-card h2 em, .footer-cta h2 em { color: var(--tamm-blue); font-style: normal; }
.hero-copy > p { max-width: 460px; margin: 0; color: var(--tamm-muted); font-size: 16px; line-height: 2; }
.hero-actions { display: flex; align-items: center; gap: 12px; margin-top: 31px; }
.hero-primary, .hero-secondary, .secondary-button, .whatsapp-button { display: inline-flex; align-items: center; justify-content: center; gap: 9px; min-height: 49px; padding: 11px 19px; border-radius: 14px; cursor: pointer; font-size: 13px; font-weight: 800; transition: transform .22s, box-shadow .22s, background .22s; }
.hero-primary { border: 1px solid var(--tamm-blue); color: var(--tamm-paper); background: var(--tamm-blue); box-shadow: 0 11px 22px rgba(25,87,166,.2); }
.hero-primary:hover, .dialog-add-button:hover, .checkout-button:hover { transform: translateY(-2px); box-shadow: 0 14px 28px rgba(25,87,166,.26); }
.hero-secondary { border: 1px solid transparent; color: var(--tamm-blue); background: transparent; }
.hero-secondary:hover { background: #e8f3f9; }
.hero-proof { display: flex; align-items: center; gap: 10px; margin-top: 33px; color: var(--tamm-ink); }
.hero-proof > div:nth-child(2) { display: grid; line-height: 1.2; }
.hero-proof strong { font-size: 12px; }
.hero-proof small { margin-top: 4px; color: var(--tamm-muted); font-size: 10px; }
.proof-avatars { display: flex; direction: ltr; padding-inline-start: 4px; }
.proof-avatars span { width: 28px; height: 28px; display: grid; place-items: center; margin-inline-start: -5px; border: 2px solid var(--tamm-sand); border-radius: 50%; color: var(--tamm-paper); background: var(--tamm-blue); font-size: 10px; font-weight: 800; }
.proof-avatars span:nth-child(2) { background: #248f86; }
.proof-avatars span:nth-child(3) { background: #bd7a35; }
.proof-rating { display: inline-flex; align-items: center; gap: 3px; margin-inline-start: 8px; color: var(--tamm-gold); font-size: 12px; font-weight: 800; }

.hero-visual { min-height: 435px; position: relative; display: grid; place-items: center; }
.hero-visual::before { position: absolute; width: 82%; height: 78%; content: ''; border: 1px solid rgba(53,198,216,.24); border-radius: 48% 52% 45% 55%; transform: rotate(-12deg); }
.hero-orb { position: absolute; border-radius: 50%; filter: blur(1px); }
.hero-orb-one { width: 180px; height: 180px; top: 11%; right: 12%; background: rgba(53,198,216,.18); }
.hero-orb-two { width: 95px; height: 95px; bottom: 10%; left: 4%; background: rgba(25,87,166,.12); }
.hero-dashboard { position: relative; width: min(100%, 475px); padding: 20px; overflow: hidden; border: 1px solid rgba(255,255,255,.16); border-radius: 24px; color: #edf8fc; background: linear-gradient(145deg, #173a6d, #0d254b 65%, #13284c); box-shadow: 0 28px 60px rgba(18,43,84,.25), 0 0 0 7px rgba(255,255,255,.45); transform: rotate(-2deg); }
.hero-dashboard::after { position: absolute; width: 290px; height: 290px; top: -145px; left: -65px; content: ''; border-radius: 50%; background: rgba(53,198,216,.12); }
.dashboard-top, .dashboard-main, .dashboard-item, .dashboard-footer { position: relative; z-index: 1; display: flex; align-items: center; }
.dashboard-top { justify-content: space-between; color: #c7dae8; font-size: 10px; }
.window-dots { display: inline-flex; gap: 4px; direction: ltr; }
.window-dots i { width: 5px; height: 5px; border-radius: 50%; background: #6091c6; }
.window-dots i:nth-child(2) { background: #59c7d3; }.window-dots i:nth-child(3) { background: #e5b45c; }
.live-status { display: inline-flex; align-items: center; gap: 4px; color: #8ce2d2; font-size: 9px; }.live-status i { width: 5px; height: 5px; border-radius: 50%; background: #7ce0bc; }
.dashboard-main { justify-content: space-between; margin: 33px 0 22px; }.dashboard-greeting { display: grid; gap: 4px; }.dashboard-greeting small { color: #8ca7c6; font-size: 10px; }.dashboard-greeting strong { font-size: 20px; }
.dashboard-score { display: grid; gap: 2px; text-align: left; }.dashboard-score span { color: #8ca7c6; font-size: 9px; }.dashboard-score strong { color: #63d7e1; font-size: 32px; line-height: 1; }.dashboard-score b { display: inline-flex; align-items: center; gap: 3px; color: #a2e7d5; font-size: 9px; font-weight: 600; }
.dashboard-list { display: grid; gap: 7px; }.dashboard-item { gap: 10px; min-height: 57px; padding: 0 11px; border: 1px solid rgba(164,211,231,.14); border-radius: 13px; background: rgba(10,31,64,.36); }.dashboard-item > span:nth-child(2) { display: grid; flex: 1; gap: 3px; }.dashboard-item b { color: #eaf6fa; font-size: 11px; }.dashboard-item small { color: #7d9ab8; font-size: 9px; }.dashboard-item > svg, .dashboard-item > i{ color: #69dbc2; }.dashboard-item.faded { opacity: .65; }
.mini-logo { width: 28px; height: 28px; display: grid; place-items: center; border-radius: 9px; color: #fff; font-family: 'IBM Plex Sans Arabic', sans-serif; font-size: 13px; font-weight: 700; }.mini-logo-cyan { background: #308da6; }.mini-logo-coral { background: #bc5251; }.mini-logo-violet { background: #756ab3; }
.dashboard-footer { gap: 7px; margin-top: 18px; padding-top: 13px; border-top: 1px solid rgba(164,211,231,.14); color: #8aa8c2; font-size: 9px; }.dashboard-footer svg, .dashboard-footer i{ color: #63d7e1; }
.hero-float-card { position: absolute; z-index: 2; display: flex; align-items: center; gap: 9px; padding: 11px 13px; border: 1px solid rgba(225,241,245,.8); border-radius: 14px; background: rgba(255,255,255,.95); box-shadow: 0 15px 34px rgba(18,43,84,.17); transform: rotate(4deg); }.hero-float-card--top { top: 23px; left: -8px; }.hero-float-card--bottom { right: -8px; bottom: 20px; transform: rotate(-4deg); }.hero-float-card span:last-child { display: grid; gap: 1px; }.hero-float-card b { color: var(--tamm-ink); font-size: 10px; }.hero-float-card small { color: var(--tamm-muted); font-size: 9px; }.float-icon { width: 29px; height: 29px; display: grid; place-items: center; border-radius: 9px; color: var(--tamm-blue); background: var(--tamm-cyan-pale); }.float-icon--gold { color: var(--tamm-gold); background: #fff3dc; }

.trust-strip { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; padding: 20px 0; border-top: 1px solid var(--tamm-line); border-bottom: 1px solid var(--tamm-line); }
.trust-item { display: flex; align-items: center; gap: 12px; padding: 8px 22px; border-inline-start: 1px solid var(--tamm-line); }.trust-item:first-child { border-inline-start: 0; padding-inline-start: 0; }.trust-item:last-child { padding-inline-end: 0; }.trust-icon { width: 37px; height: 37px; flex: 0 0 37px; display: grid; place-items: center; border-radius: 11px; color: var(--tamm-blue); background: var(--tamm-cyan-pale); }.trust-item > span:last-child { display: grid; gap: 3px; }.trust-item strong { font-size: 11px; }.trust-item small { color: var(--tamm-muted); font-size: 9px; line-height: 1.5; }

.bundles-section, .catalog-section, .how-section, .special-section, .reviews-section, .faq-section, .delivery-section { padding-top: 105px; }
.section-heading { margin-bottom: 27px; }.section-heading-inline { display: flex; align-items: end; justify-content: space-between; gap: 20px; }.section-heading h2, .special-copy h2, .faq-intro h2, .tamm-delivery-card h2, .footer-cta h2 { margin: 9px 0 0; color: var(--tamm-ink); font-family: 'IBM Plex Sans Arabic', sans-serif; font-size: clamp(28px, 3.4vw, 43px); font-weight: 700; letter-spacing: -.05em; line-height: 1.35; }.text-link { display: inline-flex; align-items: center; gap: 6px; padding: 8px 0; border: 0; color: var(--tamm-blue); background: none; cursor: pointer; font-size: 12px; font-weight: 800; }.text-link:hover { color: var(--tamm-cyan); }
.bundle-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }.bundle-card { position: relative; min-height: 224px; display: flex; align-items: stretch; overflow: hidden; border-radius: var(--tamm-radius); color: #fff; box-shadow: var(--tamm-shadow-soft); }.bundle-card--blue { background: #173d75; }.bundle-card--gold { color: #3d2c14; background: #f2d7a3; }.bundle-number { position: absolute; top: 21px; left: 22px; color: rgba(255,255,255,.34); font-family: 'IBM Plex Sans Arabic', sans-serif; font-size: 13px; font-weight: 700; }.bundle-card--gold .bundle-number { color: rgba(61,44,20,.35); }.bundle-content { position: relative; z-index: 1; display: flex; flex: 1; flex-direction: column; align-items: flex-start; padding: 27px 29px; }.bundle-label { display: inline-flex; align-items: center; gap: 6px; color: #83e1e5; font-size: 11px; font-weight: 800; }.bundle-card--gold .bundle-label { color: #9c6713; }.bundle-content h3 { margin: 19px 0 4px; font-family: 'IBM Plex Sans Arabic', sans-serif; font-size: 22px; line-height: 1.4; }.bundle-content p { margin: 0; color: rgba(255,255,255,.65); font-size: 11px; }.bundle-card--gold .bundle-content p { color: rgba(61,44,20,.65); }.bundle-bottom { display: flex; align-items: center; justify-content: space-between; gap: 20px; width: 100%; margin-top: auto; }.bundle-bottom strong { color: #fff; font-size: 15px; }.bundle-card--gold .bundle-bottom strong { color: #3d2c14; }.bundle-bottom button { display: inline-flex; align-items: center; gap: 5px; padding: 7px 0; border: 0; color: #9debf0; background: transparent; cursor: pointer; font-size: 10px; font-weight: 800; }.bundle-card--gold .bundle-bottom button { color: #87550d; }.bundle-symbol { position: absolute; left: 30px; bottom: 2px; color: rgba(113,205,218,.17); direction: ltr; font-family: 'IBM Plex Sans Arabic', sans-serif; font-size: 105px; font-weight: 700; letter-spacing: -.13em; line-height: .8; transform: rotate(-10deg); }.bundle-card--gold .bundle-symbol { color: rgba(125,81,15,.13); }.bundle-symbol span { color: rgba(255,255,255,.3); font-size: 52px; }.bundle-card--gold .bundle-symbol span { color: rgba(125,81,15,.25); }

.catalog-heading { display: flex; align-items: end; justify-content: space-between; gap: 30px; }.catalog-heading p { margin: 12px 0 0; color: var(--tamm-muted); font-size: 12px; }.catalog-count { display: flex; align-items: center; gap: 7px; color: var(--tamm-muted); font-size: 11px; }.catalog-count svg, .catalog-count i{ color: var(--tamm-cyan); }.catalog-count strong { color: var(--tamm-blue); font-size: 23px; }.catalog-count span { margin-inline-start: 2px; }
.catalog-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 18px; margin-bottom: 28px; padding: 11px; border: 1px solid var(--tamm-line); border-radius: 17px; background: rgba(255,255,255,.58); }.search-field { position: relative; display: flex; align-items: center; width: min(300px, 100%); color: var(--tamm-muted); }.search-field > svg, .search-field > i{ position: absolute; right: 13px; pointer-events: none; }.search-field input { width: 100%; min-height: 40px; padding: 0 41px 0 34px; border: 1px solid transparent; border-radius: 11px; outline: none; color: var(--tamm-ink); background: #fff; font-size: 12px; transition: border .2s, box-shadow .2s; }.search-field input:focus { border-color: var(--tamm-cyan); box-shadow: 0 0 0 3px rgba(53,198,216,.13); }.search-field input::placeholder { color: #9aa9ba; }.search-field button { position: absolute; left: 10px; display: grid; place-items: center; padding: 0; border: 0; color: var(--tamm-muted); background: none; cursor: pointer; }.category-tabs { display: flex; flex-wrap: wrap; gap: 5px; }.category-tab { min-height: 38px; padding: 7px 12px; border: 0; border-radius: 10px; color: var(--tamm-muted); background: transparent; cursor: pointer; font-size: 11px; font-weight: 700; transition: color .2s, background .2s; }.category-tab:hover { color: var(--tamm-blue); background: #e9f3f8; }.category-tab.is-selected { color: var(--tamm-paper); background: var(--tamm-blue); box-shadow: 0 5px 13px rgba(25,87,166,.18); }
.product-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; }.product-card { min-width: 0; overflow: hidden; border: 1px solid var(--tamm-line); border-radius: 19px; background: var(--tamm-paper); box-shadow: 0 5px 14px rgba(20,52,93,.03); transition: transform .25s, box-shadow .25s, border .25s; }.product-card:hover { border-color: #b5dce5; box-shadow: var(--tamm-shadow-soft); transform: translateY(-5px); }.product-visual-button { position: relative; display: block; width: 100%; padding: 0; border: 0; background: none; cursor: pointer; }.product-art { position: relative; aspect-ratio: 1.24 / 1; display: grid; place-items: center; overflow: hidden; color: #fff; isolation: isolate; }.product-art--compact { width: 52px; height: 52px; flex: 0 0 52px; border-radius: 13px; aspect-ratio: auto; }.product-art--ocean { background: linear-gradient(135deg, #10365f, #3bbac5); }.product-art--violet { background: linear-gradient(135deg, #342b69, #a396e2); }.product-art--coral { background: linear-gradient(135deg, #71384b, #e27665); }.product-art--sunset { background: linear-gradient(135deg, #853e38, #efa66d); }.product-art--mint { background: linear-gradient(135deg, #156268, #6cd4ae); }.product-art--sky { background: linear-gradient(135deg, #1c4f78, #8ad4db); }.product-art--ink { background: linear-gradient(135deg, #202b49, #6f88ad); }.product-art--lavender { background: linear-gradient(135deg, #403b69, #b4aee1); }.art-grid { position: absolute; inset: 0; opacity: .3; background-image: linear-gradient(rgba(255,255,255,.2) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.2) 1px, transparent 1px); background-size: 22px 22px; transform: rotate(12deg) scale(1.5); }.art-mark { position: relative; z-index: 1; display: grid; place-items: center; width: 90px; height: 90px; border: 1px solid rgba(255,255,255,.35); border-radius: 26px; color: #fff; background: rgba(255,255,255,.13); font-family: 'IBM Plex Sans Arabic', sans-serif; font-size: 34px; font-weight: 700; letter-spacing: -.08em; box-shadow: inset 0 0 25px rgba(255,255,255,.08), 0 15px 30px rgba(0,0,0,.15); transform: rotate(-8deg); }.product-art--compact .art-mark { width: 30px; height: 30px; border-radius: 9px; font-size: 12px; }.art-orbit { position: absolute; z-index: 0; width: 145px; height: 45px; border: 1px solid rgba(255,255,255,.28); border-radius: 50%; transform: rotate(38deg); }.art-orbit--one { right: -28px; top: 13px; }.art-orbit--two { left: -24px; bottom: 17px; transform: rotate(-28deg); }.art-caption { position: absolute; top: 12px; left: 15px; z-index: 1; color: rgba(255,255,255,.63); font-family: monospace; font-size: 7px; letter-spacing: .13em; }.product-art--compact .art-grid, .product-art--compact .art-orbit, .product-art--compact .art-caption { display: none; }.product-badge { position: absolute; top: 12px; right: 12px; padding: 5px 8px; border: 1px solid rgba(255,255,255,.25); border-radius: 7px; color: #fff; background: rgba(10,31,64,.28); font-size: 9px; font-weight: 800; backdrop-filter: blur(6px); }.product-open-hint { position: absolute; bottom: 11px; left: 12px; display: inline-flex; align-items: center; gap: 3px; color: rgba(255,255,255,.85); font-size: 9px; opacity: 0; transform: translateY(4px); transition: opacity .2s, transform .2s; }.product-card:hover .product-open-hint, .product-visual-button:focus-visible .product-open-hint { opacity: 1; transform: translateY(0); }.product-copy { padding: 15px 15px 16px; }.product-meta { display: flex; align-items: center; gap: 6px; color: var(--tamm-muted); font-size: 9px; font-weight: 700; }.product-dot { width: 3px; height: 3px; border-radius: 50%; background: #a6b5c7; }.product-copy h3 { margin: 8px 0 5px; color: var(--tamm-ink); font-size: 16px; font-weight: 800; letter-spacing: -.025em; }.product-copy p { min-height: 39px; margin: 0; color: var(--tamm-muted); font-size: 10px; line-height: 1.75; }.product-price-row { display: flex; align-items: end; justify-content: space-between; gap: 7px; margin: 16px 0 12px; }.product-price-row > div { display: grid; gap: 1px; }.product-price-row small { color: var(--tamm-muted); font-size: 9px; }.product-price-row strong { color: var(--tamm-blue); font-size: 15px; }.old-price { color: #a2afbd; text-decoration: line-through; font-size: 9px; }.add-button, .dialog-add-button { width: 100%; min-height: 43px; display: flex; align-items: center; justify-content: center; gap: 8px; border: 0; border-radius: 12px; color: #fff; background: var(--tamm-blue); cursor: pointer; font-size: 12px; font-weight: 800; transition: transform .2s, box-shadow .2s, background .2s; }.add-button:hover { background: #124784; transform: translateY(-1px); box-shadow: 0 8px 16px rgba(25,87,166,.18); }.button-arrow { margin-inline-start: auto; margin-inline-end: 10px; color: #9eeaf0; }.empty-results { display: grid; justify-items: center; padding: 62px 20px; border: 1px dashed #cbd8e4; border-radius: 20px; text-align: center; }.empty-results > div { width: 45px; height: 45px; display: grid; place-items: center; border-radius: 14px; color: var(--tamm-blue); background: var(--tamm-cyan-pale); }.empty-results h3 { margin: 14px 0 3px; font-size: 16px; }.empty-results p { margin: 0 0 17px; color: var(--tamm-muted); font-size: 11px; }.secondary-button { min-height: 40px; padding: 8px 14px; border: 1px solid var(--tamm-line); color: var(--tamm-blue); background: #fff; }.secondary-button:hover { border-color: var(--tamm-cyan); background: #f0fbfc; }

.steps-row { display: grid; grid-template-columns: 1fr auto 1fr auto 1fr; align-items: center; gap: 13px; }.step-card { position: relative; min-height: 168px; padding: 23px; border: 1px solid var(--tamm-line); border-radius: 18px; background: rgba(255,255,255,.66); }.step-index { position: absolute; top: 17px; left: 18px; color: #ccd8e4; font-size: 12px; font-weight: 800; }.step-icon { width: 39px; height: 39px; display: grid; place-items: center; margin-bottom: 20px; border-radius: 11px; color: var(--tamm-blue); background: var(--tamm-cyan-pale); }.step-card h3 { margin: 0 0 6px; font-size: 14px; }.step-card p { margin: 0; color: var(--tamm-muted); font-size: 10px; line-height: 1.8; }.step-connector { color: #afc1d3; }.special-section { display: grid; grid-template-columns: 1fr .78fr; align-items: center; gap: 80px; }.eyebrow-green { color: var(--tamm-green); }.special-copy h2 { margin-top: 14px; }.special-copy p { max-width: 430px; margin: 15px 0 22px; color: var(--tamm-muted); font-size: 13px; line-height: 1.9; }.whatsapp-button { border: 1px solid #1b9276; color: #fff; background: #19896f; }.whatsapp-button:hover { transform: translateY(-2px); box-shadow: 0 12px 23px rgba(25,137,111,.2); }.special-card { position: relative; min-height: 270px; overflow: hidden; padding: 29px; border-radius: 24px; color: #dffcf8; background: #133f49; box-shadow: var(--tamm-shadow); }.special-card::before, .special-card::after { position: absolute; content: ''; border: 1px solid rgba(112,225,208,.18); border-radius: 50%; }.special-card::before { width: 290px; height: 290px; top: -170px; left: -60px; }.special-card::after { width: 240px; height: 240px; right: -120px; bottom: -130px; }.special-card-top, .special-card-bottom { position: relative; z-index: 1; display: flex; align-items: center; justify-content: space-between; }.special-card-top span { display: inline-flex; align-items: center; padding: 6px 10px; border: 1px solid rgba(125,229,210,.25); border-radius: 8px; color: #8de2d4; font-size: 10px; font-weight: 800; }.special-card-top svg, .special-card-top i{ color: #7edecf; }.special-lines { position: relative; z-index: 1; display: grid; gap: 13px; margin-top: 65px; }.special-lines i { display: block; width: 85%; height: 9px; border-radius: 5px; background: rgba(183,239,230,.15); }.special-lines i:nth-child(2) { width: 67%; background: rgba(183,239,230,.1); }.special-lines i:nth-child(3) { width: 49%; background: rgba(183,239,230,.08); }.special-card-bottom { margin-top: 29px; color: #83c6c0; font-size: 10px; }.special-card-bottom svg, .special-card-bottom i{ color: #79dfbe; }

.reviews-section { padding-bottom: 20px; }.review-score { display: flex; align-items: center; gap: 11px; }.review-score > strong { color: var(--tamm-blue); font-family: 'IBM Plex Sans Arabic', sans-serif; font-size: 34px; line-height: 1; }.review-score > span { display: grid; gap: 3px; }.review-score small { color: var(--tamm-muted); font-size: 9px; }.stars { display: flex; align-items: center; gap: 2px; color: var(--tamm-gold); }.reviews-track { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 17px; }.review-card { padding: 21px; border: 1px solid var(--tamm-line); border-radius: 18px; background: rgba(255,255,255,.75); transition: transform .2s, box-shadow .2s; }.review-card:hover { transform: translateY(-3px); box-shadow: var(--tamm-shadow-soft); }.review-top { display: flex; align-items: center; gap: 9px; }.review-top > span:nth-child(2) { display: grid; flex: 1; gap: 2px; }.review-top strong { font-size: 11px; }.review-top small { color: var(--tamm-muted); font-size: 9px; }.review-top > svg, .review-top > i{ color: var(--tamm-cyan); }.review-avatar { width: 34px; height: 34px; display: grid; place-items: center; border-radius: 11px; color: var(--tamm-blue); background: #e0f1f7; font-size: 13px; font-weight: 800; }.review-card p { min-height: 55px; margin: 20px 0 17px; color: #51657f; font-size: 12px; line-height: 1.9; }
.faq-section { display: grid; grid-template-columns: .72fr 1.28fr; gap: clamp(50px, 10vw, 150px); padding-bottom: 105px; }.faq-intro p { margin: 14px 0 0; color: var(--tamm-muted); font-size: 12px; }.faq-list { border-top: 1px solid var(--tamm-line); }.faq-item { border-bottom: 1px solid var(--tamm-line); }.faq-item > button { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 20px; min-height: 66px; padding: 10px 0; border: 0; color: var(--tamm-ink); background: none; cursor: pointer; text-align: start; font-size: 13px; font-weight: 800; }.faq-toggle { width: 26px; height: 26px; flex: 0 0 26px; display: grid; place-items: center; border: 1px solid var(--tamm-line); border-radius: 50%; color: var(--tamm-blue); transition: transform .2s, background .2s; }.faq-item.is-open .faq-toggle { color: #fff; background: var(--tamm-blue); }.faq-item p { max-width: 610px; margin: -4px 0 20px; color: var(--tamm-muted); font-size: 11px; line-height: 1.9; }
.delivery-section { padding-top: 0; }.tamm-delivery-card { display: grid; grid-template-columns: 1fr .9fr; align-items: center; gap: 60px; padding: 50px; overflow: hidden; border-radius: 25px; color: #e9f4fd; background: var(--tamm-navy); }.tamm-delivery-card h2 { color: #fff; }.tamm-delivery-card h2 em { color: #68d4db; }.tamm-delivery-card p { max-width: 430px; margin: 13px 0 21px; color: #9bb0c7; font-size: 12px; line-height: 1.9; }.tamm-delivery-card .secondary-button { color: #b9f0f1; border-color: #35567e; background: transparent; }.tamm-delivery-card .secondary-button:hover { background: #1a3a65; }.delivery-timeline { position: relative; display: grid; gap: 25px; padding: 8px 0; }.timeline-line { position: absolute; top: 23px; right: 17px; bottom: 23px; width: 1px; background: #365575; }.timeline-item { position: relative; display: flex; align-items: center; gap: 13px; }.timeline-item > span { position: relative; z-index: 1; width: 34px; height: 34px; display: grid; place-items: center; border: 1px solid #3e648d; border-radius: 11px; color: #7594b4; background: #1b385f; }.timeline-item.is-done > span { color: #75e1d1; border-color: #3c867f; background: #1a515c; }.timeline-item > div { display: grid; gap: 3px; }.timeline-item strong { color: #dcebf5; font-size: 11px; }.timeline-item small { color: #7e9bb8; font-size: 9px; }
.footer-cta { display: flex; align-items: end; justify-content: space-between; gap: 30px; padding-top: 125px; padding-bottom: 95px; }.footer-cta h2 { font-size: clamp(30px, 4vw, 48px); }.site-footer { color: #b1c1d2; background: #102646; }.footer-inner { width: min(1200px, calc(100% - 48px)); display: grid; grid-template-columns: 1.45fr .75fr 1fr; gap: 70px; padding: 54px 0 45px; margin-inline: auto; }.footer-brand .brand { color: #fff; }.footer-brand .brand-copy small { color: #7f99b7; }.footer-brand p { max-width: 240px; margin: 18px 0 0; color: #8099b5; font-size: 11px; line-height: 1.8; }.footer-links, .footer-contact { display: grid; align-content: start; gap: 11px; }.footer-links strong, .footer-contact strong { margin-bottom: 5px; color: #f1f7fb; font-size: 12px; }.footer-links button { width: fit-content; padding: 0; border: 0; color: #8fa8bf; background: none; cursor: pointer; font-size: 11px; }.footer-links button:hover { color: #7be0e2; }.footer-contact span { display: inline-flex; align-items: center; gap: 7px; color: #8fa8bf; font-size: 11px; }.footer-contact svg, .footer-contact i{ color: #65cbd2; }.footer-bottom { width: min(1200px, calc(100% - 48px)); display: flex; justify-content: space-between; gap: 20px; padding: 17px 0; margin-inline: auto; border-top: 1px solid rgba(158,191,215,.14); color: #718ba7; font-size: 10px; }

.drawer-backdrop, .dialog-layer, .order-success-layer { position: fixed; inset: 0; z-index: 80; }.drawer-backdrop { border: 0; background: rgba(9,26,50,.34); cursor: pointer; }.cart-drawer { position: fixed; z-index: 81; top: 0; bottom: 0; left: 0; width: min(430px, 100%); display: flex; flex-direction: column; padding: 28px; border-inline-end: 1px solid var(--tamm-line); background: #f9fbfd; box-shadow: 25px 0 70px rgba(9,26,50,.16); transform: translateX(-105%); transition: transform .35s cubic-bezier(.22,.75,.22,1); direction: rtl; }.cart-drawer.is-open { transform: translateX(0); }.drawer-topline { display: flex; align-items: flex-start; justify-content: space-between; padding-bottom: 24px; border-bottom: 1px solid var(--tamm-line); }.eyebrow { letter-spacing: .01em; }.drawer-topline h2 { margin: 5px 0 0; font-family: 'IBM Plex Sans Arabic', sans-serif; font-size: 22px; }.drawer-topline h2 span { display: inline-grid; width: 22px; height: 22px; place-items: center; vertical-align: 3px; border-radius: 50%; color: var(--tamm-blue); background: var(--tamm-cyan-pale); font-family: 'Cairo', sans-serif; font-size: 10px; }.icon-button { width: 38px; height: 38px; display: grid; place-items: center; padding: 0; border: 1px solid var(--tamm-line); border-radius: 12px; color: var(--tamm-ink); background: #fff; cursor: pointer; transition: border .2s, background .2s; }.icon-button:hover { border-color: var(--tamm-cyan); background: #effbfc; }.cart-items { display: grid; gap: 12px; flex: 1; overflow-y: auto; padding: 22px 2px; }.cart-item { position: relative; display: flex; align-items: flex-start; gap: 10px; padding: 11px; border: 1px solid var(--tamm-line); border-radius: 15px; background: #fff; }.cart-item-copy { display: grid; flex: 1; gap: 3px; min-width: 0; }.cart-item-copy strong { overflow: hidden; color: var(--tamm-ink); font-size: 11px; text-overflow: ellipsis; white-space: nowrap; }.cart-item-copy > span { color: var(--tamm-muted); font-size: 9px; }.cart-item-copy b { margin-top: 2px; color: var(--tamm-blue); font-size: 11px; }.remove-item { padding: 3px; border: 0; color: #a5b3c1; background: none; cursor: pointer; }.remove-item:hover { color: #d25c61; }.quantity-control { display: inline-flex; align-items: center; gap: 8px; width: fit-content; margin-top: 5px; padding: 3px; border: 1px solid var(--tamm-line); border-radius: 8px; }.quantity-control button { width: 20px; height: 20px; display: grid; place-items: center; border: 0; border-radius: 5px; color: var(--tamm-blue); background: #edf7f9; cursor: pointer; }.quantity-control span { min-width: 12px; text-align: center; font-size: 10px; font-weight: 800; }.cart-summary { padding-top: 19px; border-top: 1px solid var(--tamm-line); }.summary-line { display: flex; align-items: center; justify-content: space-between; color: var(--tamm-muted); font-size: 12px; }.summary-line strong { color: var(--tamm-blue); font-size: 21px; }.cart-summary p { display: flex; align-items: center; gap: 5px; margin: 12px 0 17px; color: var(--tamm-muted); font-size: 9px; }.cart-summary p svg, .cart-summary p i{ color: var(--tamm-green); }.checkout-button { width: 100%; min-height: 49px; display: flex; align-items: center; justify-content: space-between; padding: 10px 17px; border: 0; border-radius: 13px; color: #fff; background: var(--tamm-blue); cursor: pointer; font-size: 13px; font-weight: 800; transition: transform .2s, box-shadow .2s; }.clear-cart { display: block; margin: 14px auto 0; padding: 2px; border: 0; color: #9baabd; background: none; cursor: pointer; font-size: 10px; }.clear-cart:hover { color: #c74d5b; }.empty-cart { display: grid; justify-items: center; padding: 78px 25px; text-align: center; }.empty-cart-icon { width: 58px; height: 58px; display: grid; place-items: center; border-radius: 18px; color: var(--tamm-blue); background: var(--tamm-cyan-pale); }.empty-cart h3 { margin: 16px 0 4px; font-size: 16px; }.empty-cart p { margin: 0 0 20px; color: var(--tamm-muted); font-size: 11px; line-height: 1.8; }
.dialog-layer, .order-success-layer { display: grid; place-items: center; padding: 24px; background: rgba(11,31,59,.48); backdrop-filter: blur(7px); }.product-dialog { position: relative; width: min(760px, 100%); display: grid; grid-template-columns: .9fr 1.1fr; overflow: hidden; border-radius: 24px; background: #f9fbfd; box-shadow: 0 25px 80px rgba(9,26,50,.28); }.dialog-close { position: absolute; z-index: 2; top: 14px; left: 14px; }.dialog-art { min-height: 500px; display: grid; place-items: center; padding: 24px; background: #eaf5f7; }.dialog-art .product-art { width: 100%; height: 100%; aspect-ratio: auto; border-radius: 20px; }.dialog-content { display: flex; flex-direction: column; padding: 42px 31px 28px; }.dialog-content h2 { margin: 11px 0 8px; font-family: 'IBM Plex Sans Arabic', sans-serif; font-size: 28px; letter-spacing: -.04em; }.dialog-description { margin: 0; color: var(--tamm-muted); font-size: 12px; line-height: 1.9; }.choice-group { margin-top: 25px; }.choice-heading { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 9px; }.choice-heading > span { font-size: 12px; font-weight: 800; }.choice-heading small { color: var(--tamm-muted); font-size: 9px; }.choice-pills, .duration-pills { display: flex; flex-wrap: wrap; gap: 7px; }.choice-pill, .duration-pill { min-height: 39px; display: inline-flex; align-items: center; justify-content: center; gap: 5px; padding: 7px 11px; border: 1px solid var(--tamm-line); border-radius: 10px; color: var(--tamm-muted); background: #fff; cursor: pointer; font-size: 10px; font-weight: 700; transition: border .2s, background .2s, color .2s; }.choice-pill:hover, .duration-pill:hover { border-color: var(--tamm-cyan); }.choice-pill.is-selected, .duration-pill.is-selected { border-color: var(--tamm-blue); color: var(--tamm-blue); background: #eaf3fa; }.duration-pill { min-width: 75px; display: grid; gap: 1px; line-height: 1.2; }.duration-pill small { color: var(--tamm-green); font-size: 8px; }.dialog-total { display: flex; align-items: center; justify-content: space-between; margin-top: 30px; padding-top: 18px; border-top: 1px solid var(--tamm-line); color: var(--tamm-muted); font-size: 11px; }.dialog-total strong { color: var(--tamm-blue); font-size: 25px; }.dialog-add-button { min-height: 50px; margin-top: 15px; }.dialog-reassurance { display: flex; align-items: center; justify-content: center; gap: 5px; margin-top: 11px; color: var(--tamm-green); font-size: 9px; }.order-success { width: min(440px, 100%); padding: 37px; border-radius: 24px; background: #f9fbfd; text-align: center; box-shadow: var(--tamm-shadow); }.success-icon { width: 62px; height: 62px; display: grid; place-items: center; margin: 0 auto 19px; border-radius: 20px; color: #19896f; background: #ddf5ed; }.order-success h2 { margin: 10px 0 9px; font-family: 'IBM Plex Sans Arabic', sans-serif; font-size: 25px; }.order-success p { margin: 0 auto 24px; color: var(--tamm-muted); font-size: 12px; line-height: 1.9; }.toast-message { position: fixed; z-index: 100; right: 24px; bottom: 24px; display: flex; align-items: center; gap: 8px; max-width: calc(100% - 48px); padding: 13px 17px; border: 1px solid #bce9dd; border-radius: 13px; color: #166854; background: #edfbf7; box-shadow: var(--tamm-shadow-soft); font-size: 11px; font-weight: 700; animation: toast-in .28s ease both; }.toast-message svg, .toast-message i{ color: #1b9c7d; }
@keyframes toast-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }

@media (max-width: 1040px) {
  .header-inner { gap: 20px; }.desktop-nav { gap: 0; }.nav-link { padding-inline: 10px; }.hero-section { grid-template-columns: minmax(0, .9fr) minmax(350px, 1.1fr); gap: 20px; }.hero-copy h1 { font-size: clamp(40px, 6vw, 65px); }.product-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }.product-copy h3 { font-size: 15px; }.special-section { gap: 45px; }
}

@media (max-width: 760px) {
  .page-width { width: min(100% - 32px, 600px); }.announcement { padding-inline: 12px; font-size: 9px; }.announcement span:last-child { display: none; }.announcement-divider { display: none; }
  .header-inner { width: calc(100% - 32px); min-height: 67px; justify-content: space-between; }.desktop-nav, .account-button { display: none; }.mobile-menu-button { display: grid; }.header-actions { margin-inline-start: auto; }.cart-button span { display: none; }.cart-button { width: 42px; padding: 0; }.mobile-nav { display: grid; width: calc(100% - 32px); gap: 5px; padding: 12px 16px 17px; margin: 0 auto 12px; border: 1px solid var(--tamm-line); border-radius: 16px; background: rgba(255,255,255,.86); box-shadow: var(--tamm-shadow-soft); }.mobile-nav button { min-height: 43px; display: flex; align-items: center; gap: 9px; padding: 8px 7px; border: 0; border-radius: 10px; color: var(--tamm-ink); background: transparent; cursor: pointer; text-align: start; font-size: 12px; font-weight: 700; }.mobile-nav button svg:last-child, .mobile-nav button i:last-child{ margin-inline-start: auto; color: var(--tamm-muted); }.mobile-nav button:hover { background: #eff8fa; }.brand-copy strong { font-size: 18px; }
  .hero-section { min-height: auto; grid-template-columns: 1fr; gap: 24px; padding-top: 48px; padding-bottom: 38px; }.hero-copy { padding-inline: 0; }.hero-copy h1 { margin-top: 14px; font-size: clamp(39px, 12vw, 60px); line-height: 1.17; }.hero-copy > p { max-width: 540px; font-size: 13px; line-height: 1.95; }.hero-actions { margin-top: 24px; }.hero-primary, .hero-secondary { min-height: 47px; padding-inline: 15px; font-size: 11px; }.hero-proof { margin-top: 25px; }.hero-visual { min-height: 354px; margin-top: 5px; }.hero-dashboard { width: min(100% - 14px, 460px); padding: 16px; border-radius: 19px; }.dashboard-main { margin: 27px 0 17px; }.dashboard-greeting strong { font-size: 17px; }.dashboard-score strong { font-size: 27px; }.hero-float-card { padding: 9px; }.hero-float-card--top { top: 0; left: -2px; }.hero-float-card--bottom { right: -2px; bottom: 4px; }
  .trust-strip { grid-template-columns: repeat(2, 1fr); gap: 8px 0; padding: 16px 0; }.trust-item, .trust-item:first-child, .trust-item:last-child { padding: 8px 9px; border-inline-start: 1px solid var(--tamm-line); }.trust-item:nth-child(odd) { border-inline-start: 0; }.trust-icon { width: 32px; height: 32px; flex-basis: 32px; }.trust-item strong { font-size: 10px; }.trust-item small { font-size: 8px; }
  .bundles-section, .catalog-section, .how-section, .special-section, .reviews-section, .faq-section { padding-top: 70px; }.section-heading-inline, .catalog-heading { align-items: flex-start; flex-direction: column; gap: 15px; }.section-heading h2, .special-copy h2, .faq-intro h2, .tamm-delivery-card h2 { font-size: 31px; }.text-link { padding: 0; }.bundle-grid { grid-template-columns: 1fr; gap: 12px; }.bundle-card { min-height: 190px; }.bundle-content { padding: 22px; }.bundle-content h3 { margin-top: 13px; font-size: 19px; }.bundle-symbol { font-size: 87px; }
  .catalog-heading p { font-size: 11px; }.catalog-count { margin-top: 2px; }.catalog-toolbar { align-items: stretch; flex-direction: column; padding: 9px; margin-bottom: 19px; }.search-field { width: 100%; }.category-tabs { overflow-x: auto; flex-wrap: nowrap; padding-bottom: 2px; scrollbar-width: none; }.category-tabs::-webkit-scrollbar { display: none; }.category-tab { flex: 0 0 auto; padding-inline: 11px; }.product-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 11px; }.product-card { border-radius: 15px; }.product-art { aspect-ratio: 1 / .96; }.art-mark { width: 62px; height: 62px; border-radius: 18px; font-size: 25px; }.art-caption { left: 9px; top: 8px; font-size: 6px; }.art-orbit { width: 100px; }.product-badge { top: 8px; right: 8px; padding: 4px 6px; font-size: 7px; }.product-open-hint { display: none; }.product-copy { padding: 11px 10px 11px; }.product-meta { gap: 4px; overflow: hidden; font-size: 7px; white-space: nowrap; }.product-meta span:last-child { overflow: hidden; text-overflow: ellipsis; }.product-copy h3 { overflow: hidden; margin: 6px 0 4px; font-size: 13px; text-overflow: ellipsis; white-space: nowrap; }.product-copy p { min-height: 49px; font-size: 9px; line-height: 1.7; }.product-price-row { margin: 10px 0 9px; align-items: center; }.product-price-row small { font-size: 8px; }.product-price-row strong { font-size: 12px; }.old-price { font-size: 8px; }.add-button { min-height: 42px; gap: 5px; border-radius: 10px; font-size: 10px; }.button-arrow { margin-inline-end: 6px; }.steps-row { grid-template-columns: 1fr; gap: 10px; }.step-card { min-height: auto; padding: 19px; }.step-icon { margin-bottom: 13px; }.step-connector { display: none; }.special-section { grid-template-columns: 1fr; gap: 27px; }.special-copy p { font-size: 11px; }.special-card { min-height: 220px; padding: 23px; }.reviews-track { display: flex; gap: 11px; overflow-x: auto; margin-inline: -8px; padding: 0 8px 6px; scroll-snap-type: x mandatory; scrollbar-width: none; }.reviews-track::-webkit-scrollbar { display: none; }.review-card { min-width: calc(100% - 35px); scroll-snap-align: start; }.review-card p { min-height: auto; }.faq-section { grid-template-columns: 1fr; gap: 27px; padding-bottom: 70px; }.faq-intro p { margin-top: 8px; }.tamm-delivery-card { grid-template-columns: 1fr; gap: 35px; padding: 28px 22px; }.delivery-timeline { padding-inline: 8px; }.footer-cta { align-items: flex-start; flex-direction: column; padding-top: 75px; padding-bottom: 65px; }.footer-cta h2 { font-size: 34px; }.footer-inner { grid-template-columns: 1fr 1fr; gap: 35px 18px; width: calc(100% - 32px); padding: 40px 0 34px; }.footer-brand { grid-column: 1 / -1; }.footer-bottom { align-items: flex-start; flex-direction: column; gap: 8px; width: calc(100% - 32px); }
  .cart-drawer { width: min(100%, 430px); padding: 22px 17px; }.dialog-layer { align-items: end; padding: 0; }.product-dialog { width: 100%; max-height: 92dvh; grid-template-columns: 1fr; border-radius: 22px 22px 0 0; overflow-y: auto; }.dialog-art { min-height: 190px; padding: 17px; }.dialog-art .product-art { max-width: 260px; aspect-ratio: 1.6 / 1; }.dialog-content { padding: 23px 19px 24px; }.dialog-close { top: 11px; left: 11px; }.dialog-content h2 { font-size: 23px; }.choice-group { margin-top: 19px; }.dialog-total { margin-top: 21px; }.dialog-total strong { font-size: 22px; }.order-success-layer { padding: 17px; }.order-success { padding: 30px 22px; }.toast-message { right: 16px; bottom: max(16px, env(safe-area-inset-bottom)); max-width: calc(100% - 32px); }
}

/* App routes and API-driven states */
.art-image { position: absolute; inset: 0; z-index: 1; width: 100%; height: 100%; object-fit: cover; opacity: .9; }
.art-image + .art-grid { opacity: .18; }
.skeleton-card { pointer-events: none; }
.skeleton-block, .skeleton-line { position: relative; overflow: hidden; background: #e5edf1; }
.skeleton-block::after, .skeleton-line::after { position: absolute; inset: 0; content: ''; background: linear-gradient(90deg, transparent, rgba(255,255,255,.72), transparent); transform: translateX(-100%); animation: tamm-shimmer 1.3s infinite; }
.skeleton-art { aspect-ratio: 1.24 / 1; }
.skeleton-line { width: 100%; height: 11px; margin: 10px 0; border-radius: 9px; }
.skeleton-line.short { width: 33%; }.skeleton-line.medium { width: 68%; }
.state-card, .page-state, .empty-orders { display: grid; justify-items: center; gap: 8px; padding: 68px 25px; border: 1px dashed #bfd0dc; border-radius: 20px; color: var(--tamm-blue); background: rgba(255,255,255,.62); text-align: center; }
.state-card h2, .state-card h3, .page-state h2, .empty-orders h2 { margin: 5px 0 0; color: var(--tamm-ink); font-family: 'IBM Plex Sans Arabic', sans-serif; }
.state-card p, .page-state p, .empty-orders p { max-width: 400px; margin: 0 0 14px; color: var(--tamm-muted); font-size: 12px; line-height: 1.9; }
.page-state { min-height: 66vh; margin-top: 45px; }
.product-detail-skeleton { width: 100%; min-height: 460px; border-radius: 25px; }
.detail-page { min-height: 70vh; padding: 40px 0 110px; }
.back-link, .auth-back { display: inline-flex; align-items: center; gap: 7px; color: var(--tamm-blue); font-size: 12px; font-weight: 800; }
.detail-layout { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1fr); gap: clamp(35px, 8vw, 110px); align-items: center; max-width: 1080px; margin: 48px auto 0; }
.detail-art { overflow: hidden; border-radius: 27px; box-shadow: var(--tamm-shadow); }
.detail-art .product-art { aspect-ratio: 1 / .92; }
.detail-content h1 { margin: 10px 0 12px; color: var(--tamm-ink); font-family: 'IBM Plex Sans Arabic', sans-serif; font-size: clamp(31px, 4.2vw, 52px); letter-spacing: -.05em; }
.detail-description { max-width: 520px; margin: 0; color: var(--tamm-muted); font-size: 14px; line-height: 2; }
.detail-note, .stock-line { display: flex; align-items: center; gap: 7px; color: var(--tamm-green); font-size: 11px; font-weight: 700; }
.detail-note { margin: 17px 0 31px; }.stock-line { justify-content: center; margin-top: 14px; color: var(--tamm-muted); }.stock-line svg, .stock-line i{ color: var(--tamm-green); }
.detail-content .choice-group { margin-top: 21px; }
.activation-field { display: grid; gap: 7px; margin-top: 21px; color: var(--tamm-muted); font-size: 11px; font-weight: 700; }
.activation-field input { min-height: 45px; padding: 0 13px; border: 1px solid var(--tamm-line); border-radius: 11px; outline: none; color: var(--tamm-ink); background: #fff; font-size: 12px; }
.activation-field input:focus { border-color: var(--tamm-cyan); box-shadow: 0 0 0 3px rgba(53,198,216,.13); }
.activation-field small { color: var(--tamm-muted); font-size: 10px; font-weight: 500; }
.activation-error { margin-top: 8px; }
.detail-total { display: flex; align-items: center; justify-content: space-between; margin: 31px 0 13px; padding-top: 18px; border-top: 1px solid var(--tamm-line); color: var(--tamm-muted); font-size: 12px; }.detail-total strong { color: var(--tamm-blue); font-size: 23px; }
.account-page, .orders-page { min-height: 70vh; padding-top: 67px; padding-bottom: 110px; }
.account-heading { display: flex; align-items: end; justify-content: space-between; gap: 20px; margin-bottom: 30px; }.account-heading h1 { margin: 10px 0 4px; color: var(--tamm-ink); font-family: 'IBM Plex Sans Arabic', sans-serif; font-size: clamp(30px, 4vw, 46px); letter-spacing: -.055em; }.account-heading p { margin: 0; color: var(--tamm-muted); font-size: 12px; }
.account-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }.wallet-card, .account-card { min-height: 205px; padding: 27px; border: 1px solid var(--tamm-line); border-radius: 22px; background: rgba(255,255,255,.76); box-shadow: 0 7px 20px rgba(20,52,93,.035); }.wallet-card { color: #e8fbf9; background: #143f50; }.wallet-top, .card-heading { display: flex; align-items: start; justify-content: space-between; gap: 20px; }.wallet-top span { display: inline-flex; align-items: center; gap: 8px; color: #93dedb; font-size: 12px; font-weight: 800; }.wallet-top > svg, .wallet-top > i{ color: #8be1d0; }.wallet-card > strong { display: block; margin: 27px 0 5px; color: #fff; font-family: 'IBM Plex Sans Arabic', sans-serif; font-size: 34px; letter-spacing: -.04em; }.wallet-card > small { color: #9dbdc4; font-size: 10px; }.wallet-topup { display: inline-flex; align-items: center; gap: 6px; margin-top: 24px; color: #a4eeeb; font-size: 11px; font-weight: 800; }.card-heading h2 { margin: 8px 0 22px; color: var(--tamm-ink); font-family: 'IBM Plex Sans Arabic', sans-serif; font-size: 21px; }.card-heading > svg, .card-heading > i{ color: var(--tamm-cyan); }.profile-row { display: flex; justify-content: space-between; gap: 20px; padding: 13px 0; border-top: 1px solid var(--tamm-line); color: var(--tamm-muted); font-size: 11px; }.profile-row strong { color: var(--tamm-ink); direction: ltr; text-align: end; }.status-success { color: var(--tamm-green) !important; }.status-pending { color: var(--tamm-gold) !important; }.password-card { grid-column: 1 / -1; min-height: auto; }.inline-form { display: grid; grid-template-columns: 1fr 1.2fr auto; align-items: end; gap: 13px; }.inline-form label, .auth-form label { display: grid; gap: 7px; color: var(--tamm-muted); font-size: 11px; font-weight: 700; }.inline-form input, .auth-form input { min-height: 45px; padding: 0 13px; border: 1px solid var(--tamm-line); border-radius: 11px; outline: none; color: var(--tamm-ink); background: #fff; font-size: 12px; transition: border .2s, box-shadow .2s; }.inline-form input:focus, .auth-form input:focus { border-color: var(--tamm-cyan); box-shadow: 0 0 0 3px rgba(53,198,216,.13); }.inline-form .hero-primary { min-height: 45px; border: 0; }.form-success, .form-error { display: flex; align-items: center; gap: 6px; margin: 14px 0 0; font-size: 11px; }.form-success { color: var(--tamm-green); }.form-error { color: #b34c4c; }
.orders-loading { display: grid; gap: 13px; padding: 20px 0; }.orders-loading .skeleton-line { height: 80px; border-radius: 17px; }.tamm-orders-list { display: grid; gap: 11px; }.order-row { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 15px; padding: 18px 21px; border: 1px solid var(--tamm-line); border-radius: 17px; background: rgba(255,255,255,.72); transition: transform .2s, box-shadow .2s; }.order-row:hover { transform: translateY(-2px); box-shadow: var(--tamm-shadow-soft); }.order-icon { width: 41px; height: 41px; display: grid; place-items: center; border-radius: 13px; color: var(--tamm-blue); background: var(--tamm-cyan-pale); }.order-main { display: flex; align-items: center; justify-content: space-between; gap: 20px; }.order-main > div { display: grid; gap: 5px; }.order-main strong { color: var(--tamm-ink); font-size: 13px; }.order-main small, .order-amount span { color: var(--tamm-muted); font-size: 10px; }.order-status { display: inline-flex; align-items: center; gap: 5px; color: var(--tamm-gold); font-size: 10px; font-weight: 800; }.order-status i { width: 6px; height: 6px; border-radius: 50%; background: currentColor; }.order-status.complete, .order-status.delivered { color: var(--tamm-green); }.order-status.fail { color: #b34c4c; }.order-amount { display: grid; gap: 4px; text-align: end; }.order-amount strong { color: var(--tamm-blue); font-size: 14px; }.signed-out-card { max-width: 600px; margin: 60px auto 0; }.state-icon { width: 52px; height: 52px; display: grid; place-items: center; border-radius: 16px; color: var(--tamm-blue); background: var(--tamm-cyan-pale); }
.auth-page { min-height: 100dvh; display: grid; grid-template-columns: .92fr 1.08fr; background: var(--tamm-sand); }.auth-aside { display: flex; flex-direction: column; justify-content: space-between; min-height: 100dvh; padding: 43px clamp(30px, 6vw, 100px); color: #e9f8fa; background: var(--tamm-navy); }.auth-aside .brand { color: #fff; align-self: start; }.auth-aside .brand-copy small { color: #8cadc0; }.auth-aside > div:nth-child(2) { max-width: 470px; }.auth-aside h1 { margin: 15px 0 15px; color: #fff; font-family: 'IBM Plex Sans Arabic', sans-serif; font-size: clamp(35px, 4.3vw, 59px); line-height: 1.3; letter-spacing: -.065em; }.auth-aside h1 em { color: var(--tamm-cyan); font-style: normal; }.auth-aside p { max-width: 370px; color: #a5bdc8; font-size: 14px; line-height: 2; }.auth-aside-proof { display: flex; align-items: center; gap: 8px; color: #91d9d5; font-size: 11px; }.auth-card { width: min(500px, calc(100% - 48px)); align-self: center; justify-self: center; padding: 25px 0; }.auth-back { margin-bottom: 65px; }.auth-heading h2 { margin: 10px 0 7px; color: var(--tamm-ink); font-family: 'IBM Plex Sans Arabic', sans-serif; font-size: 32px; letter-spacing: -.055em; }.auth-heading p { margin: 0; color: var(--tamm-muted); font-size: 12px; }.auth-tabs { display: grid; grid-template-columns: 1fr 1fr; gap: 5px; margin: 27px 0 22px; padding: 5px; border-radius: 13px; background: #e9f1f3; }.auth-tabs button { min-height: 39px; border: 0; border-radius: 9px; color: var(--tamm-muted); background: transparent; cursor: pointer; font-size: 11px; font-weight: 800; }.auth-tabs button.is-active { color: var(--tamm-blue); background: #fff; box-shadow: 0 3px 9px rgba(20,52,93,.08); }.auth-form { display: grid; gap: 17px; }.forgot-button { width: fit-content; padding: 0; margin-top: -8px; border: 0; color: var(--tamm-blue); background: transparent; cursor: pointer; font-size: 10px; font-weight: 800; }.auth-submit { width: 100%; min-height: 49px; border: 0; }.auth-divider { display: flex; align-items: center; gap: 14px; margin: 23px 0 17px; color: #a4b3bd; font-size: 10px; }.auth-divider::before, .auth-divider::after { flex: 1; height: 1px; content: ''; background: var(--tamm-line); }.google-button { width: 100%; min-height: 48px; display: flex; align-items: center; justify-content: center; gap: 9px; border: 1px solid var(--tamm-line); border-radius: 12px; color: var(--tamm-ink); background: #fff; cursor: pointer; font-size: 12px; font-weight: 800; transition: border .2s, transform .2s; }.google-button:hover { border-color: var(--tamm-cyan); transform: translateY(-1px); }.google-g { font-family: Arial, sans-serif; font-weight: 800; font-size: 17px; color: #4285f4; }.auth-message { margin-top: 17px; padding: 12px; border-radius: 10px; background: rgba(255,255,255,.7); line-height: 1.6; }.auth-switch { margin-top: 19px; }
.toast-error { display: flex; align-items: center; gap: 8px; }.toast-error button { display: grid; place-items: center; padding: 2px; border: 0; color: inherit; background: transparent; cursor: pointer; }.success-actions { display: flex; align-items: center; gap: 9px; margin-top: 22px; }.success-actions .hero-primary { min-height: 44px; }.success-actions .secondary-button { min-height: 44px; }
@keyframes tamm-shimmer { to { transform: translateX(100%); } }

@media (max-width: 760px) {
  .detail-layout, .auth-page { grid-template-columns: 1fr; }
  .detail-layout { gap: 29px; margin-top: 31px; }.detail-art { order: 0; }.detail-content { order: 1; }.detail-page { padding-top: 27px; }
  .account-page, .orders-page { padding-top: 40px; }.account-heading { align-items: start; flex-direction: column; }.account-heading .secondary-button { align-self: stretch; }.account-grid { grid-template-columns: 1fr; }.password-card { grid-column: auto; }.inline-form { grid-template-columns: 1fr; }.inline-form .hero-primary { width: 100%; }
  .order-row { grid-template-columns: auto 1fr; }.order-main { display: grid; gap: 9px; }.order-amount { grid-column: 2; grid-row: 1; text-align: start; }.order-status { justify-self: start; }
  .auth-aside { min-height: auto; gap: 80px; padding: 29px 24px 35px; }.auth-aside > div:nth-child(2) { max-width: none; }.auth-aside h1 { font-size: 37px; }.auth-aside-proof { display: none; }.auth-card { width: min(100% - 38px, 500px); padding: 36px 0 55px; }.auth-back { margin-bottom: 44px; }
  .success-actions { align-items: stretch; flex-direction: column; }.success-actions > * { width: 100%; }
}

@media (max-width: 360px) {
  .page-width { width: calc(100% - 24px); }.header-inner { width: calc(100% - 24px); }.hero-actions { align-items: stretch; flex-direction: column; }.hero-primary, .hero-secondary { width: 100%; }.hero-proof { transform: scale(.9); transform-origin: right center; }.product-grid { gap: 8px; }.product-copy { padding-inline: 8px; }.product-copy h3 { font-size: 12px; }.product-copy p { font-size: 8px; }.add-button { font-size: 9px; }.footer-inner, .footer-bottom { width: calc(100% - 24px); }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}
/* =====================================================================
   TAMM BRIDGE LAYER
   بيوصّل تصميم Tamm-Store الجديد بالماركب القديم بتاع TammWeb.
   بيتحمّل بعد style.css فبيكسب في أي تعارض.
   ===================================================================== */

/* ---- أساسيات ---- */
.bg-anim, .header-nav-wrapper { display: none !important; }
body { background: var(--tamm-sand) !important; color: var(--tamm-ink) !important; font-family: 'Cairo', sans-serif !important; }
#products.section { max-width: none; padding: 0; margin: 0; }
#products.section.active { display: block; }
.tamm-app main { display: block; }

/* ---- الهيدر ---- */
.site-header .brand { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; }
.brand-mark { width: 38px; height: 38px; display: grid; place-items: center; border-radius: 12px; color: #fff; background: linear-gradient(140deg, var(--tamm-blue), var(--tamm-cyan)); font-family: 'IBM Plex Sans Arabic', sans-serif; font-size: 18px; font-weight: 700; }
.brand-copy { display: grid; line-height: 1.15; }
.brand-copy strong { color: var(--tamm-ink); font-family: 'IBM Plex Sans Arabic', sans-serif; font-size: 20px; letter-spacing: -.04em; }
.brand-copy small { color: var(--tamm-muted); font-size: 10px; }
.desktop-nav { display: flex; align-items: center; gap: 4px; margin-inline-end: auto; }
.nav-link { padding: 9px 13px; border: 0; border-radius: 11px; color: var(--tamm-muted); background: none; cursor: pointer; font-size: 12px; font-weight: 700; transition: color .2s, background .2s, transform .2s; }
.nav-link:hover { color: var(--tamm-blue); background: #eaf4f9; }
.nav-link.active { color: var(--tamm-blue); background: #e4f2f8; }
.site-header .admin-badge { display: none; align-items: center; gap: 6px; padding: 7px 11px; border-radius: 11px; color: #7a5410; background: #fdf0d5; font-size: 11px; font-weight: 800; }
.site-header .admin-badge.show, .site-header .admin-badge[style*="flex"] { display: inline-flex; }
.cart-button b.cart-badge { display: grid !important; }
.cart-button b.cart-badge[style*="none"] { display: none !important; }


/* ---- إصلاح سلايدر الباقات على الشاشات الصغيرة ---- */
@media (max-width: 760px) {
  .packages-track-wrap { overflow: hidden; }
  .packages-track.bundle-grid {
    display: flex !important;
    flex-wrap: nowrap !important;
    grid-template-columns: none !important;
    gap: 12px;
    overflow-x: auto !important;
    overflow-y: hidden;
    justify-content: flex-start !important;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    padding: 2px 2px 12px;
    direction: rtl;
  }
  .packages-track.bundle-grid::-webkit-scrollbar { display: none; }
  .packages-track.bundle-grid .package-card {
    flex: 0 0 min(78vw, 300px);
    width: min(78vw, 300px);
    max-width: none;
    min-width: min(78vw, 300px);
    scroll-snap-align: start;
  }
  .packages-drag-hint { display: flex !important; }
}

/* ---- الدروار الموبايل (القديم) بلون التصميم الجديد ---- */
.mobile-drawer { background: #f9fbfd; }
.drawer-item { border-radius: 11px; font-weight: 700; }

/* ---- الباقات: كروت بشكل bundle الجديد ---- */
.packages-track-wrap { overflow: visible; }
.packages-track.bundle-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; overflow: visible; }
.package-card { position: relative; min-height: 224px; display: flex; flex-direction: column; overflow: hidden; padding: 27px 29px; border: 0; border-radius: var(--tamm-radius); color: #fff; background: #173d75; box-shadow: var(--tamm-shadow-soft); }
.package-card:nth-child(even) { color: #3d2c14; background: #f2d7a3; }
.package-card .package-icon { font-size: 26px; }
.package-card .package-name { margin-top: 14px; font-family: 'IBM Plex Sans Arabic', sans-serif; font-size: 22px; font-weight: 700; }
.package-card .package-tagline { margin-top: 4px; color: rgba(255,255,255,.7); font-size: 11px; }
.package-card:nth-child(even) .package-tagline { color: rgba(61,44,20,.7); }
.package-card .package-includes { display: grid; gap: 5px; padding: 0; margin: 14px 0 0; list-style: none; color: rgba(255,255,255,.8); font-size: 11px; }
.package-card:nth-child(even) .package-includes { color: rgba(61,44,20,.8); }
.package-card .package-badge { position: absolute; top: 18px; left: 18px; padding: 4px 9px; border-radius: 8px; color: #0f2040; background: #9debf0; font-size: 10px; font-weight: 800; }
.package-card .package-price { display: flex; align-items: center; gap: 9px; margin-top: auto; padding-top: 18px; font-size: 18px; font-weight: 800; }
.package-card .package-price-original { color: rgba(255,255,255,.55); text-decoration: line-through; font-size: 12px; font-weight: 600; }
.package-card:nth-child(even) .package-price-original { color: rgba(61,44,20,.55); }
.package-card .package-order-btn { min-height: 43px; margin-top: 14px; border: 0; border-radius: 12px; color: #0f2040; background: #9debf0; font-size: 12px; font-weight: 800; }
.package-card:nth-child(even) .package-order-btn { color: #fff; background: #8a5a12; }
.packages-drag-hint { display: none; }

/* ---- التصنيفات (الفلاتر القديمة) ---- */
.filter-tabs.category-tabs { display: flex; flex-wrap: wrap; gap: 5px; }
.filter-tab { min-height: 38px; padding: 7px 12px; border: 0; border-radius: 10px; color: var(--tamm-muted); background: transparent; cursor: pointer; font-size: 11px; font-weight: 700; transition: color .2s, background .2s; }
.filter-tab:hover { color: var(--tamm-blue); background: #e9f3f8; }
.filter-tab.active, .filter-tab.is-selected { color: var(--tamm-paper); background: var(--tamm-blue); box-shadow: 0 5px 13px rgba(25,87,166,.18); }
.search-field .search-icon { position: absolute; right: 13px; pointer-events: none; color: var(--tamm-muted); }
.search-field > i { position: absolute; right: 13px; pointer-events: none; }
.search-field input { width: 100%; min-height: 40px; padding: 0 41px 0 34px; border: 1px solid transparent; border-radius: 11px; background: #fff; }

/* ---- كارت المنتج (الشكل الجديد) ---- */
.product-visual-button { text-align: start; }
.art-image { position: absolute; inset: 0; z-index: 1; width: 100%; height: 100%; object-fit: cover; }
.product-art--compact .art-image { border-radius: 13px; }
.product-card .add-button i { font-size: 13px; }
.card-discount-badge { position: absolute; top: 12px; right: 12px; z-index: 2; padding: 5px 8px; border-radius: 7px; color: #fff; background: rgba(10,31,64,.42); font-size: 9px; font-weight: 800; backdrop-filter: blur(6px); }

/* ---- حالات فاضية / تحميل ---- */
.empty-state { display: grid; justify-items: center; padding: 55px 20px; border: 1px dashed #cbd8e4; border-radius: 20px; text-align: center; color: var(--tamm-muted); }
.empty-state .icon { width: 45px; height: 45px; display: grid; place-items: center; border-radius: 14px; color: var(--tamm-blue); background: var(--tamm-cyan-pale); font-size: 18px; }
.empty-state h3 { margin: 14px 0 3px; color: var(--tamm-ink); font-size: 16px; }
.empty-state p { margin: 0; font-size: 11px; }
.skeleton-block { border-radius: 14px; background: linear-gradient(90deg,#eef3f8,#e3ebf3,#eef3f8); background-size: 200% 100%; animation: tammShimmer 1.3s linear infinite; }
.skeleton-art { aspect-ratio: 1.24 / 1; border-radius: 0; }
.skeleton-line { height: 11px; margin-bottom: 8px; border-radius: 6px; background: linear-gradient(90deg,#eef3f8,#e3ebf3,#eef3f8); background-size: 200% 100%; animation: tammShimmer 1.3s linear infinite; }
.skeleton-line.short { width: 40%; } .skeleton-line.medium { width: 65%; }
@keyframes tammShimmer { from { background-position: 200% 0; } to { background-position: -200% 0; } }

/* ---- الآراء ---- */
.reviews-track .review-card, #reviewsList .review-card, .testimonials-carousel .review-card { padding: 21px; border: 1px solid var(--tamm-line); border-radius: 18px; background: rgba(255,255,255,.75); }
.review-header { display: flex; align-items: center; justify-content: space-between; gap: 9px; }
.reviewer-name { font-size: 11px; font-weight: 800; }
.review-date { color: var(--tamm-muted); font-size: 9px; }
.review-rating { margin-top: 8px; color: var(--tamm-gold); font-size: 11px; }
.review-text { margin-top: 14px; color: #51657f; font-size: 12px; line-height: 1.9; }
.reviews-grid { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 17px; margin-top: 22px; }
.carousel-nav { display: flex; justify-content: flex-end; gap: 8px; margin-top: 14px; }
.carousel-btn { width: 38px; height: 38px; border: 1px solid var(--tamm-line); border-radius: 12px; color: var(--tamm-ink); background: #fff; cursor: pointer; font-size: 18px; }
.carousel-btn:hover { border-color: var(--tamm-cyan); background: #effbfc; }
.testimonials-carousel { display: flex; gap: 17px; overflow-x: auto; padding-bottom: 6px; scrollbar-width: none; }
.testimonials-carousel::-webkit-scrollbar { display: none; }

/* ---- FAQ (الماركب الجديد + toggleFaq القديم) ---- */
.faq-answer { display: none; }
.faq-item.is-open .faq-answer, .faq-item.active .faq-answer { display: block; }
.faq-item.active .faq-toggle { color: #fff; background: var(--tamm-blue); }

/* ---- سجل التسليمات جوه الصفحة الرئيسية ---- */
.deliveries-log { margin-top: 38px; }
.deliveries-log .card, .card { padding: 22px; border: 1px solid var(--tamm-line); border-radius: 18px; background: #fff; box-shadow: var(--tamm-shadow-soft); }
.card-title { display: flex; align-items: center; gap: 8px; margin-bottom: 16px; color: var(--tamm-ink); font-size: 14px; font-weight: 800; }
.form-group label { display: block; margin-bottom: 7px; color: var(--tamm-ink); font-size: 12px; font-weight: 700; }
.form-group input, .form-group textarea, .form-group select { width: 100%; min-height: 42px; padding: 10px 13px; border: 1px solid var(--tamm-line); border-radius: 11px; outline: none; background: #fff; color: var(--tamm-ink); font: inherit; font-size: 12px; }
.form-group input:focus, .form-group textarea:focus, .form-group select:focus { border-color: var(--tamm-cyan); box-shadow: 0 0 0 3px rgba(53,198,216,.13); }

/* ---- أزرار عامة ---- */
.btn { display: inline-flex; align-items: center; gap: 8px; min-height: 45px; padding: 10px 17px; border: 0; border-radius: 12px; cursor: pointer; font-size: 12px; font-weight: 800; transition: transform .2s, box-shadow .2s, background .2s; }
.btn-primary { color: #fff; background: var(--tamm-blue); box-shadow: 0 10px 20px rgba(25,87,166,.18); }
.btn-primary:hover { background: #124784; transform: translateY(-1px); }
.btn-secondary { border: 1px solid var(--tamm-line); color: var(--tamm-blue); background: #fff; }
.btn-success { color: #fff; background: var(--tamm-green); }
.btn-google { border: 1px solid var(--tamm-line); color: var(--tamm-ink); background: #fff; }
.back-btn { display: inline-flex; align-items: center; gap: 7px; min-height: 40px; padding: 8px 14px; border: 1px solid var(--tamm-line); border-radius: 12px; color: var(--tamm-blue); background: #fff; cursor: pointer; font-size: 12px; font-weight: 800; }

/* ---- المودالات ---- */
.modal-overlay { position: fixed; inset: 0; z-index: 2200; display: none; place-items: center; padding: 24px; background: rgba(11,31,59,.48); backdrop-filter: blur(7px); }
.modal-overlay.active { display: grid; }
.modal-box { position: relative; width: min(520px, 100%); max-height: 88vh; overflow-y: auto; padding: 32px 28px; border-radius: 24px; background: #f9fbfd; box-shadow: 0 25px 80px rgba(9,26,50,.28); }
.modal-box-lg { width: min(760px, 100%); }
.modal-box h2 { margin: 0 0 16px; font-family: 'IBM Plex Sans Arabic', sans-serif; font-size: 24px; letter-spacing: -.04em; }
.modal-close { position: absolute; top: 14px; left: 14px; width: 38px; height: 38px; display: grid; place-items: center; border: 1px solid var(--tamm-line); border-radius: 12px; color: var(--tamm-ink); background: #fff; cursor: pointer; }

/* ---- صفحة تسجيل الدخول ---- */
.auth-page { display: none; position: fixed; inset: 0; z-index: 2300; overflow-y: auto; }
.auth-page.active { display: grid; }
.auth-page .auth-form label { display: grid; gap: 7px; color: var(--tamm-ink); font-size: 12px; font-weight: 700; }
.auth-page .auth-form input { min-height: 46px; padding: 10px 14px; border: 1px solid var(--tamm-line); border-radius: 12px; outline: none; background: #fff; font: inherit; font-size: 13px; }
.auth-page .auth-form input:focus { border-color: var(--tamm-cyan); box-shadow: 0 0 0 3px rgba(53,198,216,.13); }
.auth-page .auth-forgot-row { margin: 0; text-align: start; }
.auth-page .auth-submit { width: 100%; justify-content: center; }
.auth-page .form-error { display: flex; align-items: center; gap: 6px; padding: 11px 13px; border: 1px solid #f0c4c4; border-radius: 12px; color: #a33a3f; background: #fdf0f0; font-size: 11px; font-weight: 700; }
.auth-back { display: inline-flex; align-items: center; gap: 6px; padding: 0; border: 0; color: var(--tamm-blue); background: none; cursor: pointer; font-size: 12px; font-weight: 800; }

/* ---- واتساب عائم ---- */
.floating-whatsapp { z-index: 70; }

@media (max-width: 760px) {
  .packages-track.bundle-grid { grid-template-columns: 1fr; gap: 12px; }
  .reviews-grid { grid-template-columns: 1fr; }
  .site-header .admin-badge { display: none !important; }
}

/* ---- شعار المنتج الحقيقي جوه بلاطة الـ art-mark ---- */
.art-mark--img { padding: 14px; background: rgba(255,255,255,.16); }
.art-mark--img img { width: 100%; height: 100%; object-fit: contain; filter: drop-shadow(0 6px 14px rgba(0,0,0,.25)); }
.product-art--compact .art-mark--img { padding: 5px; }

/* =====================================================================
   BRIDGE — صفحات التفاصيل / الباقة / السلة / الأدمن
   ===================================================================== */

/* ---- إطار الصفحات الداخلية ---- */
#productDetail.section, #packageDetail.section,
#terms.section, #admin.section { width: min(1200px, calc(100% - 48px)); max-width: none; padding: 34px 0 90px; margin-inline: auto; }
#productDetail .back-btn, #packageDetail .back-btn,
#admin .back-btn { margin-bottom: 26px; }

/* ---- تخطيط صفحة المنتج بشكل التصميم ---- */
.detail-layout .detail-art { align-self: start; position: sticky; top: 104px; overflow: hidden; border: 1px solid var(--tamm-line); border-radius: var(--tamm-radius); background: #fff; }
.detail-layout .detail-art .product-art { aspect-ratio: 1.05 / 1; }
.detail-content > h1 { margin: 10px 0 10px; color: var(--tamm-ink); font-family: 'IBM Plex Sans Arabic', sans-serif; font-size: clamp(27px, 3.2vw, 40px); font-weight: 700; letter-spacing: -.05em; line-height: 1.3; }
.detail-content .status-badge { padding: 0; border: 0; background: none; color: inherit; font: inherit; }
.detail-content .choice-heading { margin: 28px 0 10px; }

/* ---- اختيار النوع (type-toggle) ---- */
.type-toggle { display: flex; flex-wrap: wrap; gap: 7px; margin-bottom: 16px; }
.type-btn { min-height: 44px; display: inline-flex; align-items: center; gap: 6px; padding: 8px 13px; border: 1px solid var(--tamm-line); border-radius: 11px; color: var(--tamm-muted); background: #fff; cursor: pointer; font-size: 11px; font-weight: 700; transition: border .2s, background .2s, color .2s; }
.type-btn:hover { border-color: var(--tamm-cyan); }
.type-btn.active { border-color: var(--tamm-blue); color: var(--tamm-blue); background: #eaf3fa; }

/* ---- بيلز المدد ---- */
.duration-pills { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 14px; }
.duration-pill { min-width: 78px; min-height: 40px; display: inline-flex; align-items: center; justify-content: center; padding: 7px 12px; border: 1px solid var(--tamm-line); border-radius: 10px; color: var(--tamm-muted); background: #fff; cursor: pointer; font-size: 11px; font-weight: 700; }
.duration-pill:hover { border-color: var(--tamm-cyan); }
.duration-pill.active, .duration-pill.is-selected { border-color: var(--tamm-blue); color: var(--tamm-blue); background: #eaf3fa; }
.duration-pill.unavailable { opacity: .38; cursor: not-allowed; }
.option-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 12px; }
.option-chip { min-height: 34px; padding: 6px 11px; border: 1px solid var(--tamm-line); border-radius: 9px; color: var(--tamm-muted); background: #fff; cursor: pointer; font-size: 10px; font-weight: 700; }
.option-chip.active { border-color: var(--tamm-blue); color: var(--tamm-blue); background: #eaf3fa; }

/* ---- كارت السعر ---- */
.price-display-card { position: relative; margin-top: 20px; padding: 22px; border: 1px solid var(--tamm-line); border-radius: 18px; background: rgba(255,255,255,.8); }
.price-discount-badge { position: absolute; top: 16px; left: 16px; padding: 5px 9px; border-radius: 8px; color: #fff; background: var(--tamm-green); font-size: 10px; font-weight: 800; }
.price-type-label { display: inline-flex; align-items: center; gap: 6px; color: var(--tamm-muted); font-size: 11px; font-weight: 700; }
.price-value-row { display: flex; align-items: baseline; gap: 5px; margin-top: 8px; color: var(--tamm-blue); }
.price-current { font-family: 'IBM Plex Sans Arabic', sans-serif; font-size: 36px; font-weight: 700; letter-spacing: -.05em; }
.price-currency { font-size: 14px; font-weight: 800; }
.price-original-line { color: #a2afbd; text-decoration: line-through; font-size: 11px; }
.price-duration-label { margin-top: 6px; color: var(--tamm-muted); font-size: 11px; }
.quantity-stepper-row { display: flex; align-items: center; justify-content: space-between; gap: 14px; margin-top: 18px; padding-top: 15px; border-top: 1px solid var(--tamm-line); }
.quantity-stepper-label { display: inline-flex; align-items: center; gap: 6px; color: var(--tamm-muted); font-size: 11px; font-weight: 700; }
.quantity-stepper { display: inline-flex; align-items: center; gap: 8px; padding: 4px; border: 1px solid var(--tamm-line); border-radius: 10px; background: #fff; }
.qty-btn { width: 26px; height: 26px; display: grid; place-items: center; border: 0; border-radius: 7px; color: var(--tamm-blue); background: #edf7f9; cursor: pointer; font-size: 11px; }
.qty-input { width: 44px; min-height: auto; padding: 0; border: 0; outline: none; background: none; text-align: center; font: inherit; font-size: 12px; font-weight: 800; }
.price-total-row { margin-top: 12px; color: var(--tamm-blue); font-size: 12px; font-weight: 800; }
.canboso-stock-badge:not(:empty) { display: inline-flex; align-items: center; gap: 6px; margin-top: 14px; padding: 7px 11px; border-radius: 9px; color: var(--tamm-green); background: #e7f7f1; font-size: 10px; font-weight: 800; }

/* ---- أزرار الطلب/الشراء ---- */
.order-btn, .buy-now-btn, .vodafone-cash-btn, .add-to-cart-btn {
  width: 100%; min-height: 50px; display: flex; align-items: center; justify-content: center; gap: 9px;
  margin-top: 12px; border: 0; border-radius: 13px; cursor: pointer; font-size: 13px; font-weight: 800;
  transition: transform .2s, box-shadow .2s, background .2s;
}
.order-btn { color: #fff; background: var(--tamm-green); }
.order-btn:hover:not([disabled]) { transform: translateY(-1px); box-shadow: 0 10px 20px rgba(25,137,111,.2); }
.buy-now-btn { color: #fff; background: var(--tamm-blue); }
.buy-now-btn:hover:not([disabled]) { transform: translateY(-1px); box-shadow: 0 12px 22px rgba(25,87,166,.24); }
.vodafone-cash-btn { color: #fff; background: #c4262e; }
.add-to-cart-btn { border: 1px solid var(--tamm-line); color: var(--tamm-blue); background: #fff; }
.add-to-cart-btn:hover { border-color: var(--tamm-cyan); background: #f0fbfc; }

/* ---- آراء المنتج جوه صفحة التفاصيل ---- */
#productReviewsList .review-card { margin-bottom: 12px; }

/* ---- صفحة الباقة ---- */
.package-detail-header-card .package-detail-header { display: flex; align-items: center; gap: 18px; }
.package-detail-icon { width: 64px; height: 64px; display: grid; place-items: center; border-radius: 18px; background: var(--tamm-cyan-pale); font-size: 30px; }
.package-detail-info h2 { margin: 6px 0 4px; font-family: 'IBM Plex Sans Arabic', sans-serif; font-size: 26px; letter-spacing: -.04em; }
.package-items-list { display: grid; gap: 12px; margin: 18px 0; }
.package-item-card { display: flex; align-items: center; gap: 14px; padding: 14px; border: 1px solid var(--tamm-line); border-radius: 16px; background: #fff; }
.package-item-image { width: 56px; height: 56px; flex: 0 0 56px; display: grid; place-items: center; overflow: hidden; border-radius: 14px; background: #eef5f9; }
.package-item-image img { width: 100%; height: 100%; object-fit: contain; padding: 8px; }
.package-item-name { font-size: 13px; font-weight: 800; }
.package-item-price { margin-top: 8px; color: var(--tamm-blue); font-size: 13px; font-weight: 800; }
.package-item-duration { color: var(--tamm-muted); font-size: 10px; font-weight: 600; }
.package-total-row { display: flex; align-items: center; justify-content: space-between; color: var(--tamm-muted); font-size: 12px; }
.package-total-row + .package-total-row { margin-top: 7px; }
.package-discount-row { color: var(--tamm-green); font-weight: 800; }
.package-final-row { display: flex; align-items: center; justify-content: space-between; margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--tamm-line); }

/* ---- عربة التسوق: مودال بشكل الـ drawer بتاع التصميم ---- */
#cartModal.active { display: flex; align-items: stretch; padding: 0; }
#cartModal .modal-box, #cartModal .modal-box-lg {
  width: min(430px, 100%); max-height: none; height: 100%; margin-right: auto; margin-left: 0;
  display: flex; flex-direction: column; padding: 28px; border-radius: 0;
  border-inline-end: 1px solid var(--tamm-line); background: #f9fbfd;
  box-shadow: 25px 0 70px rgba(9,26,50,.16);
  animation: tammDrawerIn .32s cubic-bezier(.22,.75,.22,1) both;
}
@keyframes tammDrawerIn { from { transform: translateX(-104%); } to { transform: translateX(0); } }
#cartModal .modal-box h2 { padding-bottom: 20px; border-bottom: 1px solid var(--tamm-line); font-size: 22px; }
#cartItemsContainer { flex: 1; overflow-y: auto; display: grid; align-content: start; gap: 12px; padding: 20px 2px; }
.cart-item-row { display: flex; align-items: center; gap: 10px; padding: 12px; border: 1px solid var(--tamm-line); border-radius: 15px; background: #fff; }
.cart-item-info { flex: 1; min-width: 0; }
.cart-item-name { overflow: hidden; font-size: 12px; font-weight: 800; text-overflow: ellipsis; white-space: nowrap; }
.cart-item-meta { margin-top: 3px; color: var(--tamm-muted); font-size: 9px; }
.cart-item-qty { display: inline-flex; align-items: center; gap: 8px; padding: 3px; border: 1px solid var(--tamm-line); border-radius: 8px; }
.cart-item-qty span { min-width: 12px; text-align: center; font-size: 10px; font-weight: 800; }
.cart-item-price { color: var(--tamm-blue); font-size: 12px; font-weight: 800; white-space: nowrap; }
.cart-item-remove { padding: 4px; border: 0; color: #a5b3c1; background: none; cursor: pointer; }
.cart-item-remove:hover { color: #d25c61; }
.cart-total-row { display: flex; align-items: center; justify-content: space-between; padding-top: 18px; border-top: 1px solid var(--tamm-line); color: var(--tamm-muted); font-size: 12px; }
.cart-total-row span:last-child { color: var(--tamm-blue); font-size: 21px; font-weight: 800; }
#btnCartCheckout { margin-top: 14px; }

/* ---- المحفظة ---- */
.wallet-balance-box { padding: 22px; border-radius: 18px; color: #edf8fc; background: linear-gradient(145deg, #173a6d, #0d254b 65%, #13284c); text-align: center; }
.wallet-balance-label { color: #8ca7c6; font-size: 11px; }
.wallet-balance-value { margin-top: 6px; color: #63d7e1; font-family: 'IBM Plex Sans Arabic', sans-serif; font-size: 34px; font-weight: 700; }
.wallet-balance-hint { margin-top: 4px; color: #8ca7c6; font-size: 10px; }
.wallet-actions-row { display: flex; gap: 10px; margin-top: 16px; }

/* ---- الشروط والأحكام ---- */
.terms-header h2 { font-family: 'IBM Plex Sans Arabic', sans-serif; font-size: clamp(28px, 3.4vw, 42px); letter-spacing: -.05em; }
.terms-header p { color: var(--tamm-muted); font-size: 13px; }
.terms-list { display: grid; gap: 12px; margin-top: 26px; }
.terms-item { padding: 22px; border: 1px solid var(--tamm-line); border-radius: 18px; background: rgba(255,255,255,.75); }
.terms-item h3 { display: flex; align-items: center; gap: 10px; margin: 0 0 10px; font-size: 15px; }
.terms-item .num { width: 28px; height: 28px; display: grid; place-items: center; border-radius: 9px; color: var(--tamm-blue); background: var(--tamm-cyan-pale); font-size: 12px; font-weight: 800; }
.terms-item p { margin: 0; color: var(--tamm-muted); font-size: 12px; line-height: 1.95; white-space: pre-line; }

/* ---- لوحة الأدمن (تلوين خفيف) ---- */
.stats-grid { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 14px; margin-bottom: 22px; }
.stat-card { padding: 20px; border: 1px solid var(--tamm-line); border-radius: 18px; background: #fff; text-align: center; }
.stat-number { color: var(--tamm-blue); font-family: 'IBM Plex Sans Arabic', sans-serif; font-size: 28px; font-weight: 700; }
.admin-panel { display: grid; gap: 16px; }

@media (max-width: 1040px) {
  .detail-layout { grid-template-columns: 1fr; }
  .detail-layout .detail-art { position: static; }
}
@media (max-width: 760px) {
  #productDetail.section, #packageDetail.section,
  #terms.section, #admin.section { width: calc(100% - 32px); padding: 22px 0 70px; }
  .stats-grid { grid-template-columns: repeat(2, minmax(0,1fr)); }
  #cartModal .modal-box, #cartModal .modal-box-lg { width: 100%; padding: 20px; }
  .price-current { font-size: 30px; }
}
/* ============================================================
   تحسينات إضافية (Phase 2.1)
   1) صورة صفحة المنتج تفضل ثابتة في مكانها الأصلي فوق (مش بتتحرك مع
      السكرول زي قبل كده).
   2) كروت الباقات بقت أكبر وأوضح — خط أكبر، مساحة أوسع، تباين أعلى،
      وشبكة بتتوسّع لوحدها حسب عرض الشاشة.
   الملف ده آخر ستايل شيت بيتحمّل، والقواعد دي في آخره عشان تكسب أي
   قاعدة قديمة فوق.
   ============================================================ */

/* ---- 1) صورة المنتج ثابتة في مكانها فوق ---- */
.detail-layout { align-items: start; }
.detail-layout .detail-art {
  position: static;
  top: auto;
  align-self: start;
}

/* ---- 2) الباقات: مقاس مستطيل صغير ومريح للعين ---- */
.packages-track.bundle-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(230px, 100%), 1fr));
  gap: 16px;
  align-items: stretch;
  padding: 4px 2px;
  overflow: visible;
  /* القناع القديم كان بيعمل تلاشي على طرف الشريط لما كان سكرول أفقي —
     مع الشبكة ده كان بيخلي حرف الكارت باهت، فاتشال. */
  -webkit-mask-image: none;
  mask-image: none;
}

.package-card .package-price-tbd { color: #fff; }
.package-card:nth-child(even) .package-price-tbd { color: #3d2c14; }

.package-card {
  min-height: 0;
  padding: 20px 20px 18px;
  border-radius: 18px;
  box-shadow: 0 10px 26px rgba(15, 32, 64, .13);
  transition: transform .2s ease, box-shadow .2s ease;
}

.package-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 16px 34px rgba(15, 32, 64, .18);
}

.package-card .package-icon { font-size: 24px; line-height: 1; }

.package-card .package-name {
  margin-top: 10px;
  font-size: 17px;
  line-height: 1.3;
}

.package-card .package-tagline {
  margin-top: 4px;
  color: rgba(255, 255, 255, .85);
  font-size: 12px;
  line-height: 1.5;
}
.package-card:nth-child(even) .package-tagline { color: rgba(61, 44, 20, .85); }

.package-card .package-includes {
  gap: 6px;
  margin-top: 12px;
  color: #fff;
  font-size: 12px;
  font-weight: 600;
  line-height: 1.4;
}
.package-card:nth-child(even) .package-includes { color: #3d2c14; }

.package-card .package-includes li {
  display: flex;
  align-items: center;
  gap: 7px;
}

.package-card .package-includes li i {
  flex: 0 0 auto;
  width: 17px;
  height: 17px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  color: #0f2040;
  background: #9debf0;
  font-size: 8px;
}
.package-card:nth-child(even) .package-includes li i {
  color: #fff;
  background: #8a5a12;
}

.package-card .package-badge {
  top: 14px;
  left: 14px;
  padding: 4px 10px;
  border-radius: 999px;
  font-size: 10px;
}

.package-card .package-price {
  padding-top: 14px;
  font-size: 16px;
}
.package-card .package-price-original { font-size: 12px; }
.package-card .package-price-tbd { font-size: 13px; opacity: .95; }

.package-card .package-order-btn {
  min-height: 38px;
  margin-top: 10px;
  border-radius: 10px;
  font-size: 12px;
}

@media (max-width: 720px) {
  .packages-track.bundle-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
  .package-card { min-height: 0; padding: 16px 14px 14px; }
  .package-card .package-icon { font-size: 20px; }
  .package-card .package-name { margin-top: 8px; font-size: 14px; }
  .package-card .package-tagline,
  .package-card .package-includes { font-size: 10.5px; }
  .package-card .package-price { font-size: 13px; }
  .package-card .package-order-btn { min-height: 34px; font-size: 10.5px; }
}

@media (max-width: 380px) {
  .packages-track.bundle-grid { grid-template-columns: 1fr; }
}

/* ============================================================
   أيقونات البرامج + صورة صفحة المنتج (Phase 2.2)
   - كارت المنتج: أيقونة البرنامج الحقيقية (images/icons) جوه المربع
     المدور في النص، أكبر وبحواف أنعم.
   - صفحة تفاصيل المنتج: صورة المنتج (images/products) بتملى الإطار
     كله بحواف مدورة من غير أي حواف حادة.
   ============================================================ */

/* ---- 1) أيقونة البرنامج جوه كارت المنتج ---- */
.art-mark {
  border-radius: 30px;
}

.art-mark--img {
  width: 112px;
  height: 112px;
  padding: 16px;
  border-radius: 32px;
  background: rgba(255, 255, 255, .18);
  backdrop-filter: blur(2px);
}

.art-mark--img img {
  width: 100%;
  height: 100%;
  border-radius: 18px;
  object-fit: contain;
  filter: drop-shadow(0 8px 18px rgba(0, 0, 0, .28));
}

.product-art--compact .art-mark--img {
  width: 30px;
  height: 30px;
  padding: 4px;
  border-radius: 10px;
}
.product-art--compact .art-mark--img img { border-radius: 7px; }

/* ---- 2) صورة المنتج كاملة في صفحة التفاصيل ---- */
.product-art--cover {
  display: block;
  padding: 0;
  overflow: hidden;
  border-radius: inherit;
  background: #fff;
}

.product-art--cover .art-cover-img {
  display: block;
  width: 100%;
  height: 100%;
  border-radius: inherit;
  object-fit: contain;
  object-position: center;
}

/* الإطار نفسه: حواف مدورة وناعمة، والصورة بتاخده بالكامل */
.detail-layout .detail-art {
  overflow: hidden;
  border: 0;
  border-radius: 28px;
  background: #fff;
  box-shadow: 0 18px 44px rgba(15, 32, 64, .14);
}
.detail-layout .detail-art .product-art--cover {
  border-radius: 28px;
  /* مربعة عشان صور المنتجات (مربعة أصلًا) تبان كاملة من غير أي قص */
  aspect-ratio: 1 / 1;
}

/* نسخة الديالوج (الكارت المنبثق) لو اتفتحت بنفس الشكل */
.dialog-art .product-art--cover { border-radius: 20px; }

@media (max-width: 768px) {
  .art-mark--img { width: 76px; height: 76px; padding: 11px; border-radius: 24px; }
  .art-mark--img img { border-radius: 14px; }
  .detail-layout .detail-art,
  .detail-layout .detail-art .product-art--cover { border-radius: 22px; }
}

/* ==========================================================================
   FINAL RESPONSIVE PASS
   - يمنع خروج أي جزء من الصفحة خارج عرض الشاشة.
   - يجعل كروت الباقات متوازنة وقريبة من المربع بدل الشريط الأفقي الطويل.
   - يضبط المسافات والمقاسات حسب الهاتف، التابلت، والشاشات المتوسطة.
   ========================================================================== */

html,
body {
  max-width: 100%;
  overflow-x: hidden;
}

.tamm-app,
.page-width,
.section,
.catalog-toolbar,
.packages-track-wrap {
  min-width: 0;
}

/* الباقات على الشاشات الكبيرة: عدد أعمدة مرن، لكن بعرض أقصى للكارت
   حتى لا تتمدد باقة واحدة أو باقتان بشكل أفقي مبالغ فيه. */
.packages-track.bundle-grid {
  grid-template-columns: repeat(auto-fit, minmax(220px, 300px));
  justify-content: center;
  align-items: stretch;
  gap: 18px;
}

.package-card {
  min-height: 270px;
  padding: 20px 20px 18px;
  aspect-ratio: 1.08 / 1;
}

.package-card .package-name {
  font-size: 18px;
}

.package-card .package-tagline {
  line-height: 1.45;
}

.package-card .package-order-btn {
  min-height: 40px;
  padding: 7px 9px;
  line-height: 1.35;
  white-space: normal;
}

@media (max-width: 1040px) {
  .page-width {
    width: min(100% - 32px, 760px);
  }

  .header-inner {
    width: calc(100% - 32px);
  }

  .packages-track.bundle-grid {
    grid-template-columns: repeat(auto-fit, minmax(220px, 300px));
  }
}

@media (max-width: 760px) {
  .page-width {
    width: calc(100% - 32px);
  }

  /* كارتان في الصف على الهاتف: أوضح وأسهل للمس من كارت عريض ممتد. */
  .packages-track.bundle-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
    justify-content: stretch;
  }

  .package-card {
    min-height: 196px;
    padding: 14px 12px 12px;
    aspect-ratio: 1 / 1.12;
    border-radius: 16px;
  }

  .package-card .package-badge {
    top: 10px;
    left: 10px;
    max-width: calc(100% - 20px);
    padding: 3px 7px;
    font-size: 8px;
    line-height: 1.25;
    white-space: normal;
    text-align: center;
  }

  .package-card .package-icon {
    margin-top: 12px;
    font-size: 21px;
  }

  .package-card .package-name {
    margin-top: 7px;
    font-size: 14px;
    line-height: 1.3;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
  }

  .package-card .package-tagline {
    font-size: 10px;
    line-height: 1.35;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
  }

  .package-card .package-includes {
    gap: 3px;
    margin-top: 8px;
    font-size: 9.5px;
    line-height: 1.35;
  }

  .package-card .package-includes li {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .package-card .package-price {
    gap: 5px;
    padding-top: 8px;
    font-size: 13px;
  }

  .package-card .package-price-original {
    font-size: 9px;
  }

  .package-card .package-price-tbd {
    font-size: 11px;
  }

  .package-card .package-order-btn {
    min-height: 34px;
    margin-top: 8px;
    padding: 5px 6px;
    border-radius: 9px;
    font-size: 9.5px;
  }

  .product-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .catalog-toolbar {
    width: 100%;
  }
}

@media (max-width: 480px) {
  .page-width {
    width: calc(100% - 24px);
  }

  .header-inner {
    width: calc(100% - 24px);
    gap: 8px;
  }

  .brand-copy strong {
    font-size: 17px;
  }

  .brand-copy small {
    font-size: 8px;
  }

  .packages-track.bundle-grid {
    gap: 8px;
  }

  .package-card {
    min-height: 190px;
    padding: 12px 10px 10px;
    border-radius: 14px;
  }

  .package-card .package-icon {
    font-size: 19px;
  }

  .package-card .package-name {
    font-size: 13px;
  }

  .package-card .package-tagline,
  .package-card .package-includes {
    font-size: 9px;
  }

  .package-card .package-price {
    font-size: 12px;
  }

  .package-card .package-order-btn {
    font-size: 9px;
  }

  .section-heading h2,
  .special-copy h2,
  .faq-intro h2,
  .tamm-delivery-card h2 {
    font-size: 27px;
  }
}
/* ============================================================
   FINAL RESPONSIVE HEADER + PRODUCT TITLE FIX
   ------------------------------------------------------------
   - الهيدر يفضل ظاهر أثناء السكرول على كل الشاشات.
   - على التابلت والموبايل يتحول لشريط مختصر: حساب + سلة + هامبرجر.
   - القائمة الجانبية هي مصدر كل روابط التنقل على الشاشات الضيقة.
   - أسماء المنتجات تظل ظاهرة ولا تختفي مع ضيق عرض الشاشة.
   ============================================================ */

/* Header follows the visitor while scrolling.
   يتم تحويله إلى fixed فقط بعد تجاوز شريط الإعلان، حتى يظل في تدفق الصفحة
   عند البداية ثم يثبت أعلى الشاشة مع دخول ناعم بدل القفزة. */
.site-header {
  position: relative !important;
  top: auto !important;
  z-index: 100 !important;
  isolation: isolate;
  transition: box-shadow .22s ease, background-color .22s ease, border-color .22s ease, transform .28s cubic-bezier(.22,.61,.36,1);
  will-change: transform;
}

.site-header.is-fixed {
  position: fixed !important;
  top: 0 !important;
  left: 0;
  right: 0;
  width: 100%;
  box-shadow: 0 7px 24px rgba(15,32,64,.09);
  background: rgba(246,248,251,.96);
  transform: translateY(-6px);
  animation: tammHeaderSettle .28s cubic-bezier(.22,.61,.36,1) forwards;
}

@keyframes tammHeaderSettle {
  from { transform: translateY(-7px); }
  to { transform: translateY(0); }
}

/* مساحة بديلة تمنع المحتوى من القفز عند تحويل الهيدر إلى fixed. */
#siteHeaderSpacer {
  display: none;
  height: 0;
}
#siteHeaderSpacer.is-active {
  display: block;
}

/* أي طبقة تفتح فوق الصفحة لازم تغطي الهيدر بالكامل. */
.modal-overlay { z-index: 2200 !important; }
.auth-page { z-index: 2300 !important; }
.mobile-drawer { z-index: 3201 !important; }
.drawer-overlay { z-index: 3200 !important; }

/* Never let the header itself create horizontal overflow */
.site-header,
.site-header .header-inner,
.site-header .header-actions {
  min-width: 0;
  max-width: 100%;
}

.site-header .header-inner {
  box-sizing: border-box;
}

/* Product title/info must remain part of the card flow */
.products-grid > .product-card-wrapper, .product-grid > .product-card-wrapper {
  min-width: 0 !important;
  width: 100% !important;
  height: auto !important;
  align-self: start !important;
  overflow: visible !important;
}

.products-grid > .product-card-wrapper .product-info-below,
.product-grid > .product-card-wrapper .product-info-below {
  display: flex !important;
  visibility: visible !important;
  opacity: 1 !important;
  width: 100%;
  height: auto !important;
  min-width: 0;
  position: relative;
  z-index: 2;
}

.products-grid > .product-card-wrapper .card-title-bottom,
.product-grid > .product-card-wrapper .card-title-bottom {
  display: -webkit-box !important;
  visibility: visible !important;
  opacity: 1 !important;
  min-width: 0;
  min-height: 1.45em;
  width: 100%;
  overflow: hidden !important;
  color: var(--tamm-ink) !important;
  font-family: 'Cairo', sans-serif !important;
  font-weight: 800 !important;
  line-height: 1.55;
  text-align: center;
  white-space: normal !important;
  text-overflow: clip !important;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow-wrap: anywhere;
  word-break: normal;
}

/* Product cards: keep the name in the normal flow on mobile instead of
   letting the square image determine the whole grid row height. */
.products-grid,
.product-grid {
  align-items: start !important;
  grid-auto-rows: max-content;
}
.products-grid > .product-card-wrapper,
.product-grid > .product-card-wrapper {
  height: auto !important;
}

@media (max-width: 1024px) {
  .header-inner {
    width: calc(100% - 32px);
    min-height: 68px;
    gap: 12px;
  }

  .desktop-nav {
    display: none !important;
  }

  .header-actions {
    margin-inline-start: auto;
    gap: 7px;
    flex: 0 0 auto;
  }

  .mobile-menu-button {
    display: grid !important;
    width: 42px;
    height: 42px;
    flex: 0 0 42px;
    place-items: center;
    border: 1px solid var(--tamm-line);
    border-radius: 13px;
    color: var(--tamm-ink);
    background: var(--tamm-paper);
  }

  .account-button,
  .cart-button {
    display: inline-flex !important;
    width: 42px;
    min-width: 42px;
    height: 42px;
    min-height: 42px;
    padding: 0 !important;
    flex: 0 0 42px;
    border-radius: 13px;
  }

  .account-button .account-chip-text,
  .cart-button > span {
    display: none !important;
  }

  .account-button i,
  .cart-button i,
  .mobile-menu-button i {
    font-size: 15px;
  }

  .cart-button .cart-badge {
    display: grid;
    top: -5px;
    left: -4px;
  }

  .brand-copy strong {
    font-size: 18px;
  }

  .brand-copy small {
    font-size: 8px;
  }

  .mobile-drawer {
    width: min(86vw, 360px);
    max-width: 360px;
    height: 100dvh;
    z-index: 3201;
  }

  .drawer-overlay {
    z-index: 3200;
  }

  .drawer-nav {
    padding: 14px;
    gap: 7px;
  }

  .drawer-item {
    min-height: 52px;
    box-sizing: border-box;
    padding: 13px 15px;
    font-size: 14px;
  }

  .products-grid {
    min-width: 0;
  }
}

@media (max-width: 760px) {
  .header-inner {
    width: calc(100% - 24px);
    min-height: 64px;
    gap: 8px;
  }

  .site-header .brand {
    min-width: 0;
    flex: 1 1 auto;
  }

  .brand-mark {
    width: 36px;
    height: 36px;
    flex: 0 0 36px;
  }

  .brand-copy {
    min-width: 0;
  }

  .brand-copy strong {
    font-size: 17px;
  }

  .brand-copy small {
    font-size: 7px;
  }

  .header-actions {
    gap: 6px;
  }

  .account-button,
  .cart-button,
  .mobile-menu-button {
    width: 40px;
    min-width: 40px;
    height: 40px;
    min-height: 40px;
    flex-basis: 40px;
    border-radius: 12px;
  }

  .account-button i,
  .cart-button i,
  .mobile-menu-button i {
    font-size: 14px;
  }

  .mobile-drawer {
    width: min(88vw, 350px);
  }

  .drawer-header {
    padding: 16px;
  }

  .drawer-item {
    min-height: 50px;
    padding: 12px 14px;
    font-size: 13px;
  }

  .products-grid > .product-card-wrapper .product-info-below,
.product-grid > .product-card-wrapper .product-info-below {
    margin-top: 7px !important;
    gap: 5px !important;
  }

  .products-grid > .product-card-wrapper .card-title-bottom,
.product-grid > .product-card-wrapper .card-title-bottom {
    font-size: clamp(11px, 3.2vw, 13px) !important;
    line-height: 1.5;
  }
}

@media (max-width: 380px) {
  .header-inner {
    width: calc(100% - 18px);
  }

  .brand-copy small {
    display: none;
  }

  .header-actions {
    gap: 4px;
  }

  .account-button,
  .cart-button,
  .mobile-menu-button {
    width: 38px;
    min-width: 38px;
    height: 38px;
    min-height: 38px;
    flex-basis: 38px;
  }

  .products-grid {
    gap: 8px !important;
  }

  .products-grid > .product-card-wrapper .card-title-bottom,
.product-grid > .product-card-wrapper .card-title-bottom {
    font-size: 11px !important;
  }
}


/* =====================================================================
   FINAL FIX — PRODUCT TITLES + RESPONSIVE PACKAGE CARDS
   ===================================================================== */

/* المنتج: العنوان جزء واضح من كل كارت، مباشرة أسفل الصورة */
.products-grid,
.product-grid {
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  align-items: start !important;
}

.products-grid > .product-card-wrapper,
.product-grid > .product-card-wrapper {
  display: flex !important;
  flex-direction: column !important;
  width: 100% !important;
  min-width: 0 !important;
  max-width: 100% !important;
  height: auto !important;
  align-self: start !important;
  overflow: visible !important;
  box-sizing: border-box !important;
}

.products-grid > .product-card-wrapper > .product-card,
.product-grid > .product-card-wrapper > .product-card {
  width: 100% !important;
  min-width: 0 !important;
  max-width: 100% !important;
  height: auto !important;
  flex: 0 0 auto !important;
  box-sizing: border-box !important;
}

.products-grid > .product-card-wrapper .product-info-below,
.product-grid > .product-card-wrapper .product-info-below {
  display: flex !important;
  flex-direction: column !important;
  align-items: stretch !important;
  width: 100% !important;
  min-width: 0 !important;
  height: auto !important;
  margin: 0 !important;
  padding: 0 !important;
  position: relative !important;
  visibility: visible !important;
  opacity: 1 !important;
  overflow: visible !important;
  box-sizing: border-box !important;
}

/* العنوان نفسه: مستطيل أبيض صغير وثابت على جميع المقاسات */
.products-grid > .product-card-wrapper .card-title-bottom,
.product-grid > .product-card-wrapper .card-title-bottom {
  display: block !important;
  width: 100% !important;
  min-width: 0 !important;
  min-height: 42px !important;
  margin: 7px 0 0 !important;
  padding: 9px 10px !important;
  box-sizing: border-box !important;
  border: 1px solid var(--tamm-line) !important;
  border-radius: 10px !important;
  color: var(--tamm-ink) !important;
  background: #fff !important;
  font-family: 'IBM Plex Sans Arabic', 'Cairo', sans-serif !important;
  font-size: clamp(12px, 1.15vw, 15px) !important;
  font-weight: 800 !important;
  line-height: 1.45 !important;
  text-align: center !important;
  white-space: normal !important;
  overflow: hidden !important;
  overflow-wrap: anywhere !important;
  word-break: normal !important;
  text-overflow: clip !important;
  -webkit-line-clamp: 2 !important;
  -webkit-box-orient: vertical !important;
  box-shadow: 0 3px 10px rgba(20,52,93,.035) !important;
}

.products-grid > .product-card-wrapper .card-action-btn,
.product-grid > .product-card-wrapper .card-action-btn {
  width: 100% !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
}

/* الباقات: استخدم عرض الحاوية بالكامل بدل أعمدة ضيقة أو كروت منكمشة */
.packages-track-wrap {
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  box-sizing: border-box !important;
}

.packages-track.bundle-grid {
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: clamp(14px, 2vw, 22px) !important;
  justify-content: stretch !important;
  align-items: stretch !important;
  box-sizing: border-box !important;
}

.package-card {
  width: 100% !important;
  min-width: 0 !important;
  max-width: none !important;
  min-height: 260px !important;
  height: auto !important;
  aspect-ratio: auto !important;
  box-sizing: border-box !important;
}

.package-card .package-name,
.package-card .package-tagline,
.package-card .package-includes,
.package-card .package-price,
.package-card .package-order-btn {
  max-width: 100% !important;
}

@media (max-width: 760px) {
  /* الموبايل: باقة واحدة بعرض مريح بدل كروت رفيعة جدًا */
  .packages-track.bundle-grid {
    grid-template-columns: 1fr !important;
    gap: 14px !important;
  }

  .package-card {
    min-height: 220px !important;
    padding: 18px 16px 16px !important;
    aspect-ratio: auto !important;
  }

  .package-card .package-name {
    font-size: clamp(15px, 4.5vw, 19px) !important;
  }

  .package-card .package-tagline,
  .package-card .package-includes {
    font-size: clamp(10px, 3vw, 12px) !important;
  }

  .package-card .package-order-btn {
    min-height: 40px !important;
    font-size: 11px !important;
  }

  .products-grid,
  .product-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 11px !important;
  }

  .products-grid > .product-card-wrapper .card-title-bottom,
  .product-grid > .product-card-wrapper .card-title-bottom {
    min-height: 40px !important;
    margin-top: 6px !important;
    padding: 8px 7px !important;
    font-size: clamp(11px, 3.2vw, 13px) !important;
    border-radius: 9px !important;
  }
}

@media (max-width: 380px) {
  .products-grid,
  .product-grid {
    gap: 8px !important;
  }

  .products-grid > .product-card-wrapper .card-title-bottom,
  .product-grid > .product-card-wrapper .card-title-bottom {
    font-size: 11px !important;
    padding-inline: 5px !important;
  }
}

/* ============================================================
   Tamm Package Cards — Premium responsive slider
   ============================================================ */

.packages-track-wrap {
  position: relative !important;
  overflow: hidden !important;
  width: 100% !important;
}

.packages-track.bundle-grid {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 18px !important;
  align-items: stretch !important;
  padding: 10px 4px 18px !important;
  overflow: visible !important;
}

.package-card {
  position: relative !important;
  isolation: isolate !important;
  min-width: 0 !important;
  min-height: 225px !important;
  padding: 22px 19px 17px !important;
  border: 1px solid rgba(255,255,255,.48) !important;
  border-radius: 24px !important;
  box-shadow: 0 14px 32px rgba(15,32,64,.13), inset 0 1px 0 rgba(255,255,255,.28) !important;
  overflow: hidden !important;
  transform: translateZ(0);
  transition: transform .28s cubic-bezier(.22,.61,.36,1), box-shadow .28s ease, border-color .28s ease !important;
}

/* لمعة ناعمة تعطي الكارت إحساس Premium */
.package-card::before {
  content: "";
  position: absolute;
  inset: -45% auto auto -30%;
  width: 70%;
  height: 120%;
  border-radius: 50%;
  background: linear-gradient(135deg, rgba(255,255,255,.22), rgba(255,255,255,0));
  transform: rotate(18deg);
  pointer-events: none;
  z-index: -1;
  transition: transform .45s ease, opacity .3s ease;
}

.package-card::after {
  content: "";
  position: absolute;
  right: -35px;
  bottom: -42px;
  width: 105px;
  height: 105px;
  border-radius: 50%;
  background: rgba(157,235,240,.13);
  filter: blur(2px);
  pointer-events: none;
  z-index: -1;
}

.package-card:hover {
  transform: translateY(-6px) scale(1.012) !important;
  box-shadow: 0 20px 40px rgba(15,32,64,.18), inset 0 1px 0 rgba(255,255,255,.32) !important;
  border-color: rgba(255,255,255,.75) !important;
}

.package-card:hover::before {
  transform: translateX(24px) rotate(18deg);
}

.package-card .package-icon {
  position: relative;
  z-index: 1;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  margin-bottom: 4px;
  border-radius: 15px;
  background: rgba(255,255,255,.18);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.25), 0 8px 18px rgba(15,32,64,.10);
  backdrop-filter: blur(5px);
  -webkit-backdrop-filter: blur(5px);
}

.package-card .package-name {
  position: relative;
  z-index: 1;
  font-size: clamp(16px, 1.45vw, 20px) !important;
  font-weight: 900 !important;
  line-height: 1.3 !important;
}

.package-card .package-tagline {
  position: relative;
  z-index: 1;
  font-size: clamp(10px, .9vw, 12px) !important;
}

.package-card .package-includes {
  position: relative;
  z-index: 1;
  font-size: clamp(10px, .9vw, 12px) !important;
}

.package-card .package-badge {
  z-index: 2 !important;
  box-shadow: 0 5px 14px rgba(15,32,64,.12);
}

.package-card .package-price,
.package-card .package-order-btn {
  position: relative;
  z-index: 1;
}

.package-card .package-order-btn {
  transition: transform .2s ease, filter .2s ease, box-shadow .2s ease !important;
  box-shadow: 0 7px 16px rgba(15,32,64,.12);
}

.package-card .package-order-btn:hover {
  transform: translateY(-2px);
  filter: brightness(1.04);
}

/* الكمبيوتر: 3 باقات متساوية وأصغر من التصميم الحالي */
@media (min-width: 1041px) {
  .packages-track.bundle-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 16px !important;
  }

  .package-card {
    min-height: 215px !important;
    padding: 18px 17px 15px !important;
    border-radius: 21px !important;
  }

  .package-card .package-icon {
    width: 43px;
    height: 43px;
    border-radius: 13px;
  }
}

/* الشاشات المتوسطة: الباقات تفضل 3 أعمدة طالما المساحة تسمح */
@media (min-width: 721px) and (max-width: 1040px) {
  .packages-track.bundle-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 12px !important;
  }

  .package-card {
    min-height: 205px !important;
    padding: 16px 13px 14px !important;
    border-radius: 19px !important;
  }

  .package-card .package-icon {
    width: 40px;
    height: 40px;
    border-radius: 12px;
    font-size: 19px !important;
  }
}

/* الموبايل والأجهزة الرفيعة: سلايدر أفقي باللمس */
@media (max-width: 720px) {
  .packages-track-wrap {
    overflow: hidden !important;
    padding-inline: 0 !important;
  }

  .packages-track.bundle-grid {
    display: grid !important;
    grid-auto-flow: column !important;
    grid-auto-columns: minmax(245px, 78vw) !important;
    grid-template-columns: none !important;
    gap: 12px !important;
    width: max-content !important;
    max-width: none !important;
    padding: 8px 4px 20px !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    scroll-snap-type: x mandatory !important;
    scroll-behavior: smooth !important;
    -webkit-overflow-scrolling: touch !important;
    scrollbar-width: none !important;
  }

  .packages-track.bundle-grid::-webkit-scrollbar {
    display: none !important;
  }

  .package-card {
    width: 100% !important;
    min-width: 0 !important;
    min-height: 205px !important;
    height: auto !important;
    padding: 17px 15px 14px !important;
    border-radius: 20px !important;
    scroll-snap-align: start !important;
  }

  .package-card:hover {
    transform: none !important;
  }

  .package-card .package-icon {
    width: 42px;
    height: 42px;
    border-radius: 13px;
    font-size: 20px !important;
  }

  .package-card .package-name {
    font-size: 15px !important;
  }

  .package-card .package-tagline,
  .package-card .package-includes {
    font-size: 10px !important;
  }

  .package-card .package-includes {
    gap: 5px !important;
    margin-top: 9px !important;
  }

  .package-card .package-price {
    padding-top: 10px !important;
    font-size: 14px !important;
  }

  .package-card .package-order-btn {
    min-height: 36px !important;
    margin-top: 8px !important;
    font-size: 10.5px !important;
    border-radius: 10px !important;
  }
}

@media (max-width: 360px) {
  .packages-track.bundle-grid {
    grid-auto-columns: minmax(225px, 82vw) !important;
    gap: 10px !important;
  }

  .package-card {
    min-height: 198px !important;
    padding: 15px 13px 13px !important;
  }
}


/* ============================================================
   FINAL MOBILE PRODUCT CARD TUNING
   - Keep product names visible on narrow screens.
   - Scale the white title box with the viewport instead of using
     the same fixed height/size everywhere.
   - Scale TAMM / ORIGINAL caption independently per device width.
   ============================================================ */
.product-card .product-art {
  min-width: 0;
}
.product-card .product-art .art-caption {
  font-size: clamp(7px, 0.72vw, 11px);
  left: clamp(8px, 1.1vw, 15px);
  top: clamp(8px, 0.9vw, 12px);
  letter-spacing: .11em;
}

.products-grid > .product-card-wrapper .card-title-bottom,
.product-grid > .product-card-wrapper .card-title-bottom {
  min-height: clamp(30px, 3.1vw, 42px) !important;
  margin-top: clamp(5px, .6vw, 7px) !important;
  padding: clamp(5px, .65vw, 9px) clamp(6px, .8vw, 10px) !important;
  font-size: clamp(10px, 1.05vw, 15px) !important;
  line-height: 1.35 !important;
}

@media (max-width: 768px) {
  .product-card .product-art .art-caption {
    font-size: clamp(5.5px, 1.55vw, 8px) !important;
    left: 8px;
    top: 7px;
    letter-spacing: .08em;
  }

  .products-grid > .product-card-wrapper .card-title-bottom,
  .product-grid > .product-card-wrapper .card-title-bottom {
    min-height: 32px !important;
    margin-top: 5px !important;
    padding: 5px 6px !important;
    font-size: clamp(10px, 2.8vw, 12px) !important;
    line-height: 1.3 !important;
    border-radius: 8px !important;
  }
}

@media (max-width: 480px) {
  .product-card .product-art .art-caption {
    font-size: clamp(5px, 1.9vw, 6.5px) !important;
    left: 6px;
    top: 6px;
    letter-spacing: .06em;
  }

  .products-grid > .product-card-wrapper .card-title-bottom,
  .product-grid > .product-card-wrapper .card-title-bottom {
    min-height: 29px !important;
    margin-top: 4px !important;
    padding: 4px 5px !important;
    font-size: clamp(9px, 2.7vw, 11px) !important;
    line-height: 1.25 !important;
    border-radius: 7px !important;
  }
}

@media (max-width: 380px) {
  .product-card .product-art .art-caption {
    font-size: 5px !important;
  }

  .products-grid > .product-card-wrapper .card-title-bottom,
  .product-grid > .product-card-wrapper .card-title-bottom {
    min-height: 27px !important;
    padding: 3px 4px !important;
    font-size: 9px !important;
  }
}

/* Text-only testimonial cards */
.testimonial-text-card {
  min-height: 150px;
  width: 300px;
  padding: 20px;
  box-sizing: border-box;
  cursor: default;
}
.testimonial-text-top {
  display: flex;
  align-items: center;
  gap: 10px;
}
.testimonial-text-top > div {
  display: grid;
  gap: 3px;
  min-width: 0;
}
.testimonial-text-top strong {
  color: var(--tamm-ink);
  font-size: 13px;
}
.testimonial-text-top .stars {
  display: inline-flex;
  gap: 2px;
  color: var(--tamm-gold);
  font-size: 10px;
}
.testimonial-check {
  margin-inline-start: auto;
  color: var(--tamm-cyan);
  font-size: 14px;
}
.testimonial-text-card > p {
  margin: 16px 0 0;
  color: var(--tamm-muted);
  font-size: 11px;
  line-height: 1.9;
}
@media (max-width: 768px) {
  .testimonial-text-card {
    width: min(300px, calc(100vw - 70px));
    min-height: 138px;
    padding: 16px;
  }
  .testimonial-text-card > p {
    font-size: 10px;
    line-height: 1.8;
  }
}


/* ============================================================
   GUEST PAYMENT LOCK + MOBILE PRODUCT TITLES
   ============================================================ */
.locked-payment-btn {
  position: relative !important;
  cursor: pointer !important;
  opacity: 1 !important;
  filter: saturate(.72) !important;
  background: linear-gradient(135deg, #6f7d90, #4f5d70) !important;
  border-color: rgba(255,255,255,.18) !important;
  box-shadow: 0 8px 18px rgba(25,39,60,.12) !important;
}
.locked-payment-btn:hover { transform: none !important; filter: saturate(.82) !important; }
.locked-payment-btn .buy-now-badge { background: rgba(255,255,255,.16) !important; color:#fff !important; }
.locked-payment-btn .buy-now-icon { background: rgba(255,255,255,.14) !important; }
.locked-payment-btn .buy-now-label { font-weight:900 !important; }

@media (max-width:768px) {
  .products-grid > .product-card-wrapper > .product-card,
  .product-grid > .product-card-wrapper > .product-card { position:relative !important; }
  .products-grid > .product-card-wrapper > .product-card::after,
  .product-grid > .product-card-wrapper > .product-card::after {
    content: attr(data-product-name);
    position:absolute;
    inset-inline:6px;
    bottom:6px;
    z-index:4;
    display:block;
    box-sizing:border-box;
    padding:7px 8px;
    border-radius:9px;
    background:rgba(255,255,255,.94);
    color:var(--tamm-ink,#13233f);
    border:1px solid rgba(19,35,63,.10);
    box-shadow:0 5px 14px rgba(15,23,42,.12);
    font-family:'IBM Plex Sans Arabic','Cairo',sans-serif;
    font-size:clamp(10px,2.8vw,13px);
    font-weight:900;
    line-height:1.35;
    text-align:center;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
    pointer-events:none;
  }
}
@media (max-width:380px) {
  .products-grid > .product-card-wrapper > .product-card::after,
  .product-grid > .product-card-wrapper > .product-card::after {
    inset-inline:5px; bottom:5px; padding:6px 7px; font-size:10px; border-radius:8px;
  }
}


/* Product detail descriptions: preserve the line breaks and blank lines from
   products.json, while keeping very long descriptions compact until the user
   asks to expand them. */
.detail-description-wrap {
  max-width: 520px;
}
.detail-description-wrap .detail-description {
  white-space: pre-line;
  overflow: hidden;
  margin: 0;
  transition: max-height .25s ease;
}
.detail-description-wrap .detail-description.detail-description-collapsed {
  max-height: 125px;
}
.detail-description-wrap .detail-description.detail-description-expanded {
  max-height: none;
}
.detail-description-toggle {
  display: inline-flex;
  margin-top: 10px;
  padding: 5px 0;
  border: 0;
  background: transparent;
  color: var(--tamm-blue);
  font-family: inherit;
  font-size: 12px;
  font-weight: 800;
  cursor: pointer;
  align-items: center;
  gap: 5px;
}
.detail-description-toggle:hover {
  text-decoration: underline;
}

/* ---- خدمة العملاء العائمة ---- */
.support-launcher {
  position: fixed; right: 22px; bottom: 22px; z-index: 2100;
  width: 58px; height: 58px; border: 0; border-radius: 20px; cursor: pointer;
  color: #fff; background: linear-gradient(145deg, #008dff, #006fe6);
  box-shadow: 0 14px 34px rgba(0,102,214,.28), 0 3px 10px rgba(0,0,0,.08);
  display: grid; place-items: center; transition: transform .22s, box-shadow .22s;
}
.support-launcher:hover { transform: translateY(-3px); box-shadow: 0 18px 38px rgba(0,102,214,.34); }
.support-launcher-icon { font-size: 21px; }
.support-launcher-badge { position: absolute; top: -5px; left: -5px; min-width: 19px; height: 19px; padding: 0 5px; display: grid; place-items: center; border-radius: 999px; border: 2px solid #fff; background: #19b77a; color: #fff; font: 800 9px/1 Arial,sans-serif; }
.support-widget {
  position: fixed; right: 22px; bottom: 92px; z-index: 2099; width: min(390px, calc(100vw - 28px));
  max-height: min(680px, calc(100vh - 112px)); display: none; flex-direction: column; overflow: hidden;
  border: 1px solid rgba(18,52,86,.10); border-radius: 24px; background: #fff;
  box-shadow: 0 28px 70px rgba(18,52,86,.20), 0 8px 22px rgba(18,52,86,.08);
  animation: supportIn .22s ease-out;
}
.support-widget.open { display: flex; }
@keyframes supportIn { from { opacity:0; transform: translateY(12px) scale(.98); } to { opacity:1; transform:none; } }
.support-header { padding: 16px 17px; display:flex; align-items:center; justify-content:space-between; color:#fff; background: linear-gradient(135deg,#087fe2,#005fc8); }
.support-header-main { display:flex; align-items:center; gap:11px; }
.support-avatar { width:39px; height:39px; display:grid; place-items:center; border-radius:13px; background:rgba(255,255,255,.17); font-size:17px; }
.support-header strong { display:block; font-size:13px; letter-spacing:-.01em; }
.support-header span { display:block; margin-top:3px; color:rgba(255,255,255,.78); font-size:10px; }
.support-header span i { display:inline-block; width:6px; height:6px; margin-left:3px; border-radius:50%; background:#5df0ae; }
.support-close { width:32px; height:32px; border:0; border-radius:10px; cursor:pointer; color:#fff; background:rgba(255,255,255,.12); }
.support-welcome { padding:15px 17px 8px; }
.support-welcome-chip { display:inline-flex; align-items:center; gap:6px; padding:6px 9px; border-radius:999px; color:#0879d8; background:#eef7ff; font-size:9px; font-weight:800; }
.support-welcome h3 { margin:10px 0 3px; font-size:18px; }
.support-welcome p { margin:0; color:#718096; font-size:10px; line-height:1.8; }
.support-quick { display:flex; flex-wrap:wrap; gap:7px; padding:8px 17px 11px; }
.support-quick button { border:1px solid #e6edf5; border-radius:11px; padding:8px 10px; color:#31506c; background:#f8fbfe; cursor:pointer; font:700 9px/1.3 inherit; transition:.18s; }
.support-quick button:hover { border-color:#b9dcfa; color:#0879d8; background:#eef7ff; }
.support-quick-hidden { display:none !important; }
.support-quick i { margin-left:4px; color:#1788e8; }
.support-messages { flex:1; min-height:180px; max-height:300px; overflow:auto; padding:10px 17px 12px; background:#f8fbfe; border-top:1px solid #eef3f8; border-bottom:1px solid #eef3f8; scroll-behavior:smooth; }
.support-message { width:fit-content; max-width:88%; margin:7px 0; padding:10px 12px; border-radius:14px; font-size:10px; line-height:1.8; white-space:pre-wrap; }
.support-message-bot { margin-left:auto; border-top-right-radius:5px; color:#2b4157; background:#fff; border:1px solid #e8eef5; box-shadow:0 3px 9px rgba(20,50,80,.04); }
.support-message-user { margin-right:auto; border-top-left-radius:5px; color:#fff; background:#087fe2; }
.support-message-loading { color:#7b8a99; font-style:italic; }
.support-human { padding:10px 17px 8px; display:flex; align-items:center; justify-content:space-between; gap:8px; }
.support-human span { color:#8492a2; font-size:9px; }
.support-human a { white-space:nowrap; color:#15896f; font-size:8px; font-weight:800; text-decoration:none; display:inline-flex; align-items:center; gap:4px; padding:5px 8px; border:1px solid #cceee3; border-radius:8px; background:#f4fffb; }
.support-human a i { margin-left:3px; }
.support-input-row { display:flex; gap:7px; padding:10px 13px 5px; }
.support-input-row input { flex:1; min-width:0; height:42px; border:1px solid #dfe8f1; border-radius:13px; padding:0 13px; outline:none; background:#fbfdff; color:#20354b; font:500 11px inherit; }
.support-input-row input:focus { border-color:#70b8ef; box-shadow:0 0 0 3px rgba(0,141,255,.08); }
.support-input-row button { width:42px; height:42px; border:0; border-radius:13px; cursor:pointer; color:#fff; background:#008dff; }
.support-input-row button:disabled { opacity:.55; cursor:wait; }
.support-powered { padding:0 15px 9px; text-align:center; color:#a5b1bd; font-size:8px; }
/* Compact mode after the first customer message/question. */
.support-compact .support-welcome { display:none; }
.support-message strong { font-weight:800; color:inherit; }

@media (max-width:760px) {
  .support-launcher {
    right:10px; bottom:10px; width:48px; height:48px; border-radius:15px;
  }
  .support-launcher-icon { font-size:18px; }
  .support-launcher-badge { min-width:16px; height:16px; padding:0 4px; top:-4px; left:-4px; font-size:8px; }
  .support-widget {
    right:4px; bottom:66px; width:calc(100vw - 8px);
    max-height:calc(100vh - 78px); border-radius:18px;
  }
  .support-header { padding:clamp(10px,3vw,14px) clamp(11px,3.5vw,16px); }
  .support-header-main { gap:8px; min-width:0; }
  .support-avatar { width:34px; height:34px; border-radius:11px; font-size:15px; flex:0 0 auto; }
  .support-header strong { font-size:clamp(11px,3.3vw,13px); white-space:nowrap; }
  .support-header span { font-size:clamp(8px,2.6vw,10px); }
  .support-close { width:30px; height:30px; flex:0 0 auto; }
  .support-welcome { padding:11px 13px 7px; }
  .support-welcome-chip { font-size:clamp(8px,2.5vw,9px); padding:5px 8px; }
  .support-welcome h3 { margin:7px 0 2px; font-size:clamp(15px,5vw,18px); }
  .support-welcome p { font-size:clamp(9px,2.8vw,10px); line-height:1.65; }
  .support-quick { gap:5px; padding:6px 11px 8px; }
  .support-quick button { padding:6px 8px; font-size:clamp(8px,2.5vw,9px); }
  .support-messages {
    min-height:150px; max-height:none; padding:8px 11px 10px;
  }
  .support-message {
    max-width:94%; padding:8px 10px; margin:5px 0;
    font-size:clamp(9px,2.75vw,11px); line-height:1.65;
    overflow-wrap:anywhere; word-break:normal;
  }
  .support-human {
    padding:7px 10px 5px; gap:5px; align-items:center;
  }
  .support-human span {
    min-width:0; flex:1 1 auto; font-size:clamp(7px,2.25vw,9px);
    line-height:1.35;
  }
  .support-human a {
    flex:0 1 auto; min-width:0; max-width:58%;
    white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
    font-size:clamp(7px,2.2vw,8.5px); padding:5px 7px;
  }
  .support-input-row { padding:7px 8px 4px; gap:5px; }
  .support-input-row input { height:38px; padding:0 10px; border-radius:11px; font-size:clamp(9px,2.8vw,11px); }
  .support-input-row button { width:38px; height:38px; border-radius:11px; flex:0 0 auto; }
  .support-powered { padding:0 9px 7px; font-size:clamp(7px,2vw,8px); }
}

@media (max-width:380px) {
  .support-human a { max-width:54%; }
  .support-human span { font-size:7px; }
  .support-message { font-size:clamp(8.5px,2.7vw,10px); }
}


/* ============================================================
   SUPPORT CHAT — FINAL RESPONSIVE SIZING / POSITIONING
   Keeps the existing design, but makes the widget predictable on
   desktop, tablets and phones. The close button is always visible.
   ============================================================ */
.support-launcher {
  transition: opacity .18s ease, transform .22s ease, box-shadow .22s ease;
}
.support-launcher.support-launcher-hidden {
  opacity: 0;
  pointer-events: none;
  transform: scale(.88);
}
.support-widget {
  right: 24px;
  bottom: 96px;
  width: min(420px, calc(100vw - 48px));
  height: min(640px, calc(100vh - 128px));
  max-height: none;
  min-height: 0;
  border-radius: 22px;
}
.support-header {
  position: relative;
  min-height: 72px;
  padding: 14px 62px 14px 17px;
}
.support-header-main { min-width: 0; }
.support-close {
  position: absolute;
  left: 14px;
  top: 50%;
  transform: translateY(-50%);
  z-index: 3;
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  flex: 0 0 38px;
  padding: 0;
  font-size: 22px;
  line-height: 1;
  font-family: Arial, sans-serif;
  color: #fff;
  background: rgba(255,255,255,.16);
  border: 1px solid rgba(255,255,255,.18);
  box-shadow: 0 4px 12px rgba(0,0,0,.10);
}
.support-close:hover { background: rgba(255,255,255,.25); }
.support-close span { display:block; transform:translateY(-1px); }
.support-welcome { flex: 0 0 auto; }
.support-quick { flex: 0 0 auto; }
.support-messages {
  min-height: 0;
  max-height: none;
  flex: 1 1 auto;
}
.support-human { flex: 0 0 auto; }
.support-input-row { flex: 0 0 auto; }
.support-powered { flex: 0 0 auto; }

@media (max-width: 900px) {
  .support-widget {
    right: 16px;
    bottom: 82px;
    width: min(410px, calc(100vw - 32px));
    height: min(630px, calc(100vh - 104px));
  }
}

@media (max-width: 760px) {
  .support-launcher {
    right: 12px;
    bottom: 12px;
    width: 50px;
    height: 50px;
    border-radius: 16px;
  }
  .support-widget {
    right: 10px;
    bottom: 72px;
    width: calc(100vw - 20px);
    height: min(640px, calc(100vh - 88px));
    max-height: none;
    border-radius: 20px;
  }
  .support-header {
    min-height: 64px;
    padding: 11px 54px 11px 13px;
  }
  .support-close {
    left: 11px;
    width: 36px;
    height: 36px;
    font-size: 21px;
  }
  .support-welcome { padding: 10px 13px 6px; }
  .support-quick { padding: 6px 11px 8px; }
  .support-messages { min-height: 0; }
}

@media (max-width: 480px) {
  .support-widget {
    right: 8px;
    bottom: 68px;
    width: calc(100vw - 16px);
    height: min(620px, calc(100vh - 82px));
    border-radius: 18px;
  }
  .support-header { min-height: 60px; }
  .support-close { left: 9px; width: 34px; height: 34px; }
}

@media (max-width: 360px) {
  .support-widget {
    right: 6px;
    width: calc(100vw - 12px);
    height: min(600px, calc(100vh - 78px));
  }
}

@media (prefers-reduced-motion: reduce) {
  .support-widget { animation: none; }
  .support-launcher { transition: none; }
}

/* ============================================================
   FINAL RESPONSIVE PRODUCT TITLE FIX
   Keep the product name in normal flow directly under the image.
   Reserve a small responsive title area so it never falls outside
   the card or gets pushed into the next row on narrow screens.
   ============================================================ */
.products-grid > .product-card-wrapper,
.product-grid > .product-card-wrapper {
  display: flex !important;
  flex-direction: column !important;
  align-items: stretch !important;
  align-self: start !important;
  min-width: 0 !important;
  width: 100% !important;
  height: auto !important;
  overflow: visible !important;
  box-sizing: border-box !important;
}

.products-grid > .product-card-wrapper > .product-card,
.product-grid > .product-card-wrapper > .product-card {
  flex: 0 0 auto !important;
  width: 100% !important;
  min-width: 0 !important;
  height: auto !important;
  box-sizing: border-box !important;
}

.products-grid > .product-card-wrapper .product-info-below,
.product-grid > .product-card-wrapper .product-info-below {
  display: flex !important;
  flex-direction: column !important;
  align-items: stretch !important;
  width: 100% !important;
  min-width: 0 !important;
  height: auto !important;
  margin: 0 !important;
  padding: 0 !important;
  position: relative !important;
  box-sizing: border-box !important;
}

.products-grid > .product-card-wrapper .card-title-bottom,
.product-grid > .product-card-wrapper .card-title-bottom {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 100% !important;
  min-width: 0 !important;
  min-height: clamp(30px, 3vw, 42px) !important;
  margin: 5px 0 0 !important;
  padding: 4px 6px !important;
  box-sizing: border-box !important;
  border: 1px solid var(--tamm-line, #dce5ee) !important;
  border-radius: clamp(7px, 1vw, 10px) !important;
  background: #fff !important;
  color: var(--tamm-ink, #13233f) !important;
  font-family: 'Cairo', sans-serif !important;
  font-size: clamp(9px, 1.05vw, 15px) !important;
  font-weight: 800 !important;
  line-height: 1.25 !important;
  text-align: center !important;
  white-space: normal !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  overflow-wrap: anywhere !important;
  word-break: normal !important;
  -webkit-line-clamp: 2 !important;
}

/* Remove the old mobile overlay title. The real title above is now
   part of the normal card flow and therefore reserves its own space. */
.products-grid > .product-card-wrapper > .product-card::after,
.product-grid > .product-card-wrapper > .product-card::after {
  content: none !important;
  display: none !important;
}

@media (max-width: 768px) {
  .products-grid > .product-card-wrapper .card-title-bottom,
  .product-grid > .product-card-wrapper .card-title-bottom {
    min-height: clamp(28px, 8.2vw, 34px) !important;
    margin-top: 4px !important;
    padding: 3px 5px !important;
    font-size: clamp(8.5px, 2.65vw, 12px) !important;
    line-height: 1.22 !important;
    border-radius: 7px !important;
  }

  .products-grid > .product-card-wrapper .product-info-below,
  .product-grid > .product-card-wrapper .product-info-below {
    gap: 4px !important;
  }
}

@media (max-width: 480px) {
  .products-grid > .product-card-wrapper .card-title-bottom,
  .product-grid > .product-card-wrapper .card-title-bottom {
    min-height: clamp(26px, 7.2vw, 30px) !important;
    margin-top: 3px !important;
    padding: 2px 4px !important;
    font-size: clamp(8px, 2.55vw, 10.5px) !important;
    line-height: 1.18 !important;
    border-radius: 6px !important;
  }
}

@media (max-width: 380px) {
  .products-grid > .product-card-wrapper .card-title-bottom,
  .product-grid > .product-card-wrapper .card-title-bottom {
    min-height: 25px !important;
    margin-top: 3px !important;
    padding: 2px 3px !important;
    font-size: 8px !important;
    line-height: 1.15 !important;
  }
}


/* ---- اشتراكات العميل الشغالة ---- */
.active-subscriptions-section { margin-top: 28px; margin-bottom: 34px; }
.active-subscriptions-heading { display:flex; align-items:end; justify-content:space-between; gap:20px; margin-bottom:18px; }
.active-subscriptions-heading h2 { margin:8px 0 4px; color:var(--tamm-ink); font-family:'IBM Plex Sans Arabic',sans-serif; font-size:clamp(28px,4vw,42px); letter-spacing:-.05em; }
.active-subscriptions-heading h2 em { color:var(--tamm-blue); font-style:normal; }
.active-subscriptions-heading p { margin:0; color:var(--tamm-muted); font-size:11px; }
.active-subscriptions-count { flex:0 0 auto; padding:8px 13px; border:1px solid var(--tamm-line); border-radius:999px; color:var(--tamm-ink); background:#fff; font-size:11px; font-weight:800; }
.active-subscriptions-list {
  display:flex;
  flex-direction:row;
  direction:rtl;
  gap:14px;
  overflow-x:auto;
  overflow-y:hidden;
  padding:4px 2px 14px;
  scroll-snap-type:x proximity;
  overscroll-behavior-inline:contain;
  -webkit-overflow-scrolling:touch;
  scrollbar-width:thin;
  scrollbar-color:rgba(34,91,155,.28) transparent;
}
.active-subscriptions-list::-webkit-scrollbar { height:7px; }
.active-subscriptions-list::-webkit-scrollbar-track { background:transparent; }
.active-subscriptions-list::-webkit-scrollbar-thumb { background:rgba(34,91,155,.28); border-radius:999px; }
.active-subscription-card { flex:0 0 min(390px, 78vw); scroll-snap-align:start; }
.active-subscription-card { display:grid; grid-template-columns:64px minmax(0,1fr) auto; align-items:center; gap:15px; padding:12px 15px; border:1px solid var(--tamm-line); border-radius:20px; background:rgba(255,255,255,.86); box-shadow:0 9px 25px rgba(20,52,93,.06); }
.active-subscription-image { width:64px; height:64px; overflow:hidden; border-radius:16px; background:#eef5f8; }
.active-subscription-image img { width:100%; height:100%; display:block; object-fit:cover; }
.active-subscription-fallback { width:100%; height:100%; display:grid; place-items:center; color:var(--tamm-blue); font-size:22px; }
.active-subscription-main { min-width:0; }
.active-subscription-status { display:flex; align-items:center; gap:5px; color:#17845d; font-size:10px; font-weight:800; }
.active-subscription-status span { width:7px; height:7px; border-radius:50%; background:#22a873; box-shadow:0 0 0 4px rgba(34,168,115,.11); }
.active-subscription-main h3 { margin:4px 0 7px; color:var(--tamm-ink); font-size:16px; }
.active-subscription-meta { display:flex; flex-wrap:wrap; gap:12px; color:var(--tamm-muted); font-size:10px; }
.active-subscription-meta i { margin-inline-end:3px; }
.active-subscription-end { min-width:120px; display:grid; gap:4px; text-align:end; }
.active-subscription-end strong { color:var(--tamm-blue); font-size:14px; }
.active-subscription-end small { color:var(--tamm-muted); font-size:9px; }
.active-subscriptions-loading { padding:22px; border:1px dashed var(--tamm-line); border-radius:18px; color:var(--tamm-muted); text-align:center; font-size:11px; }
@media (max-width:720px) {
  .active-subscriptions-section { margin-top:22px; margin-bottom:26px; }
  .active-subscriptions-heading { align-items:start; flex-direction:column; gap:10px; }
  .active-subscriptions-list { gap:10px; padding-bottom:12px; }
  .active-subscription-card { flex-basis: min(330px, 86vw); }
  .active-subscriptions-heading h2 { font-size:31px; }
  .active-subscriptions-heading p { font-size:10px; }
  .active-subscriptions-count { align-self:flex-start; }
  .active-subscription-card { grid-template-columns:62px minmax(0,1fr); gap:11px; padding:11px; border-radius:18px; }
  .active-subscription-image { width:62px; height:62px; }
  .active-subscription-end { grid-column:2; min-width:0; display:flex; align-items:center; justify-content:space-between; gap:8px; padding-top:2px; text-align:start; }
  .active-subscription-end small { text-align:end; }
  .active-subscription-main h3 { font-size:15px; }
}

/* ================================================================
   PREMIUM PACKAGE VISUAL — صندوق فاخر والمنتجات طالعة منه
   ================================================================ */
#packagesSection .packages-track.bundle-grid {
  display: flex !important;
  flex-wrap: nowrap !important;
  gap: 22px !important;
  overflow-x: auto !important;
  overflow-y: visible !important;
  justify-content: flex-start !important;
  align-items: stretch !important;
  padding: 18px 8px 28px !important;
  scroll-snap-type: x mandatory !important;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  direction: rtl;
}
#packagesSection .packages-track.bundle-grid::-webkit-scrollbar { display:none; }

#packagesSection .package-card {
  flex: 0 0 min(340px, 86vw) !important;
  width: min(340px, 86vw) !important;
  min-width: min(340px, 86vw) !important;
  min-height: 465px !important;
  padding: 0 !important;
  border-radius: 28px !important;
  overflow: hidden !important;
  position: relative !important;
  isolation: isolate !important;
  background:
    radial-gradient(circle at 50% 0%, rgba(255,255,255,.15), transparent 35%),
    linear-gradient(145deg, #0e3263 0%, #0a2348 48%, #06162f 100%) !important;
  border: 1px solid rgba(255,255,255,.16) !important;
  box-shadow: 0 24px 55px rgba(5,20,45,.22), inset 0 1px 0 rgba(255,255,255,.18) !important;
  transform: translateZ(0);
  transition: transform .35s cubic-bezier(.22,.61,.36,1), box-shadow .35s ease, border-color .35s ease !important;
  scroll-snap-align: start !important;
}
#packagesSection .package-card:hover {
  transform: translateY(-8px) !important;
  box-shadow: 0 32px 70px rgba(5,20,45,.3), inset 0 1px 0 rgba(255,255,255,.24) !important;
  border-color: rgba(255,255,255,.32) !important;
}
#packagesSection .package-card::before {
  content:"" !important;
  position:absolute !important;
  inset:-30% -20% auto !important;
  width:140% !important;
  height:55% !important;
  background: radial-gradient(circle, rgba(92,174,255,.20), transparent 64%) !important;
  filter: blur(12px) !important;
  z-index:-1 !important;
  pointer-events:none !important;
}
#packagesSection .package-card::after { display:none !important; }

#packagesSection .package-visual {
  position: relative;
  height: 205px;
  margin: 0;
  overflow: hidden;
  perspective: 900px;
  background: linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,0));
}
#packagesSection .package-glow {
  position:absolute;
  width:170px;
  height:170px;
  left:50%;
  top:28px;
  transform:translateX(-50%);
  border-radius:50%;
  background:rgba(45,137,255,.25);
  filter:blur(25px);
  animation: packageGlowPulse 4s ease-in-out infinite;
}
#packagesSection .package-box-shadow {
  position:absolute;
  width:170px;
  height:32px;
  left:50%;
  bottom:15px;
  transform:translateX(-50%);
  border-radius:50%;
  background:rgba(0,0,0,.42);
  filter:blur(11px);
}
#packagesSection .package-box {
  position:absolute;
  width:128px;
  height:91px;
  left:50%;
  bottom:26px;
  transform:translateX(-50%) rotateX(4deg);
  transform-style:preserve-3d;
  z-index:3;
  filter:drop-shadow(0 15px 18px rgba(0,0,0,.24));
}
#packagesSection .package-box-front {
  position:absolute;
  left:0;
  bottom:0;
  width:128px;
  height:76px;
  border-radius:4px 4px 13px 13px;
  background:linear-gradient(145deg,#1773d4,#0c4b98 55%,#083873);
  border:1px solid rgba(255,255,255,.22);
  box-shadow:inset 12px 0 20px rgba(255,255,255,.08), inset -12px 0 18px rgba(0,0,0,.18);
  display:flex;
  align-items:center;
  justify-content:center;
  color:#fff;
  font-size:30px;
  font-weight:900;
  letter-spacing:.04em;
}
#packagesSection .package-box-front::after {
  content:"TAMM";
  position:absolute;
  bottom:9px;
  font-size:8px;
  letter-spacing:.22em;
  opacity:.68;
}
#packagesSection .package-box-lid {
  position:absolute;
  left:-5px;
  top:8px;
  width:138px;
  height:28px;
  border-radius:8px;
  background:linear-gradient(135deg,#4ea7ff,#1264bd 60%,#0a3e7e);
  transform:skewX(-13deg) rotateX(58deg);
  transform-origin:center bottom;
  border:1px solid rgba(255,255,255,.25);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.25);
}
#packagesSection .package-box-side {
  position:absolute;
  right:-10px;
  bottom:0;
  width:20px;
  height:76px;
  border-radius:0 5px 12px 0;
  background:linear-gradient(90deg,#0b468e,#062c61);
  transform:skewY(-18deg);
  transform-origin:left bottom;
}
#packagesSection .package-product-float {
  position:absolute;
  width:57px;
  height:57px;
  padding:5px;
  border-radius:17px;
  background:rgba(255,255,255,.96);
  border:1px solid rgba(255,255,255,.7);
  box-shadow:0 14px 26px rgba(0,0,0,.22), 0 0 0 5px rgba(255,255,255,.045);
  z-index:4;
  animation: packageProductFloat 3.8s ease-in-out infinite;
  animation-delay:var(--float-delay,0s);
  transition:transform .35s ease;
}
#packagesSection .package-product-float img {
  width:100%;
  height:100%;
  object-fit:cover;
  border-radius:13px;
  display:block;
}
#packagesSection .package-product-float-0 { left:calc(50% - 104px); top:63px; transform:rotate(-13deg); }
#packagesSection .package-product-float-1 { left:calc(50% - 28px); top:42px; transform:rotate(4deg); }
#packagesSection .package-product-float-2 { left:calc(50% + 46px); top:67px; transform:rotate(13deg); }
#packagesSection .package-product-float-3 { left:calc(50% + 70px); top:101px; width:45px; height:45px; transform:rotate(18deg); }
#packagesSection .package-card:hover .package-product-float-0 { transform:translateY(-6px) rotate(-18deg) scale(1.04); }
#packagesSection .package-card:hover .package-product-float-1 { transform:translateY(-10px) rotate(0) scale(1.06); }
#packagesSection .package-card:hover .package-product-float-2 { transform:translateY(-6px) rotate(18deg) scale(1.04); }

#packagesSection .package-card-copy {
  position:relative;
  z-index:6;
  padding:16px 19px 18px;
  background:linear-gradient(180deg, rgba(5,20,45,.05), rgba(5,20,45,.18));
}
#packagesSection .package-card .package-icon {
  position:absolute !important;
  top:174px;
  right:18px;
  width:35px;
  height:35px;
  margin:0 !important;
  border-radius:11px;
  background:rgba(255,255,255,.10) !important;
  box-shadow:none !important;
  font-size:17px !important;
  z-index:7;
}
#packagesSection .package-card .package-badge {
  top:14px !important;
  left:14px !important;
  z-index:10 !important;
  padding:7px 11px !important;
  border-radius:999px !important;
  color:#08244b !important;
  background:rgba(255,255,255,.92) !important;
  box-shadow:0 8px 18px rgba(0,0,0,.13) !important;
  font-size:10px !important;
  backdrop-filter:blur(8px);
}
#packagesSection .package-card .package-name {
  color:#fff !important;
  font-size:22px !important;
  font-weight:900 !important;
  margin:0 42px 3px 0 !important;
}
#packagesSection .package-card .package-tagline {
  color:rgba(235,245,255,.70) !important;
  font-size:11px !important;
  line-height:1.65 !important;
  min-height:36px;
}
#packagesSection .package-card .package-includes {
  color:rgba(238,247,255,.86) !important;
  font-size:11px !important;
  gap:4px !important;
  margin-top:9px !important;
}
#packagesSection .package-card .package-includes li i { color:#66b7ff !important; }
#packagesSection .package-card .package-price {
  color:#fff !important;
  padding-top:12px !important;
}
#packagesSection .package-card .package-price-value { color:#8fd0ff !important; }
#packagesSection .package-card .package-price-original { color:rgba(255,255,255,.45) !important; }
#packagesSection .package-card .package-order-btn {
  min-height:42px !important;
  margin-top:11px !important;
  border-radius:14px !important;
  color:#07254b !important;
  background:linear-gradient(135deg,#e9f7ff,#83c9ff) !important;
  box-shadow:0 10px 22px rgba(43,145,239,.22) !important;
}
#packagesSection .package-card .package-order-btn:hover { filter:brightness(1.04); }

@keyframes packageProductFloat {
  0%,100% { margin-top:0; }
  50% { margin-top:-7px; }
}
@keyframes packageGlowPulse {
  0%,100% { opacity:.65; transform:translateX(-50%) scale(.94); }
  50% { opacity:1; transform:translateX(-50%) scale(1.08); }
}

@media (max-width: 700px) {
  #packagesSection .packages-track.bundle-grid {
    gap:14px !important;
    padding:14px 6px 24px !important;
  }
  #packagesSection .package-card {
    flex-basis: min(292px, 82vw) !important;
    width:min(292px,82vw) !important;
    min-width:min(292px,82vw) !important;
    min-height:435px !important;
    border-radius:24px !important;
  }
  #packagesSection .package-visual { height:185px; }
  #packagesSection .package-product-float { width:49px; height:49px; border-radius:15px; padding:4px; }
  #packagesSection .package-product-float-0 { left:calc(50% - 88px); top:58px; }
  #packagesSection .package-product-float-1 { left:calc(50% - 25px); top:39px; }
  #packagesSection .package-product-float-2 { left:calc(50% + 38px); top:59px; }
  #packagesSection .package-product-float-3 { left:calc(50% + 55px); top:91px; width:40px; height:40px; }
  #packagesSection .package-box { transform:translateX(-50%) scale(.9) rotateX(4deg); bottom:20px; }
  #packagesSection .package-card .package-icon { top:157px; }
  #packagesSection .package-card-copy { padding:14px 16px 16px; }
}
@media (prefers-reduced-motion: reduce) {
  #packagesSection .package-product-float,
  #packagesSection .package-glow { animation:none !important; }
}
/* ============================================================
   AI SUPPORT CHAT — USER RESIZE + CONSISTENT RESPONSIVE SCALE
   The small handle under the header controls the widget width. The
   internal scale follows the selected width so text, buttons and spacing
   remain visually balanced instead of only stretching the outer box.
   ============================================================ */
.support-widget {
  --support-width: 420px;
  --support-scale: 1;
  width: min(var(--support-width), calc(100vw - 40px));
}
.support-resize {
  position: relative;
  flex: 0 0 auto;
  height: 18px;
  margin: 0 18px;
  cursor: ew-resize;
  touch-action: none;
  user-select: none;
}
.support-resize-track {
  position: absolute;
  left: 0; right: 0; top: 8px;
  height: 2px;
  border-radius: 999px;
  background: #e8eef5;
}
.support-resize-dot {
  position: absolute;
  top: 3px;
  left: var(--support-resize-position, 50%);
  width: 11px;
  height: 11px;
  margin-left: -5.5px;
  border-radius: 50%;
  background: #087fe2;
  border: 2px solid #fff;
  box-shadow: 0 2px 7px rgba(8,127,226,.25);
  transition: transform .12s ease;
}
.support-resize:hover .support-resize-dot,
.support-resize.is-dragging .support-resize-dot { transform: scale(1.18); }
.support-widget .support-header { padding-top: calc(14px * var(--support-scale)); padding-bottom: calc(14px * var(--support-scale)); }
.support-widget .support-header-main { gap: calc(11px * var(--support-scale)); }
.support-widget .support-avatar { width:calc(39px * var(--support-scale)); height:calc(39px * var(--support-scale)); border-radius:calc(13px * var(--support-scale)); font-size:calc(17px * var(--support-scale)); }
.support-widget .support-header strong { font-size:calc(13px * var(--support-scale)); }
.support-widget .support-header span { font-size:calc(10px * var(--support-scale)); }
.support-widget .support-close { width:calc(38px * var(--support-scale)); height:calc(38px * var(--support-scale)); font-size:calc(22px * var(--support-scale)); }
.support-widget .support-welcome { padding:calc(15px * var(--support-scale)) calc(17px * var(--support-scale)) calc(8px * var(--support-scale)); }
.support-widget .support-welcome-chip { font-size:calc(9px * var(--support-scale)); padding:calc(6px * var(--support-scale)) calc(9px * var(--support-scale)); }
.support-widget .support-welcome h3 { font-size:calc(18px * var(--support-scale)); margin:calc(10px * var(--support-scale)) 0 calc(3px * var(--support-scale)); }
.support-widget .support-welcome p { font-size:calc(10px * var(--support-scale)); }
.support-widget .support-quick { gap:calc(7px * var(--support-scale)); padding:calc(8px * var(--support-scale)) calc(17px * var(--support-scale)) calc(11px * var(--support-scale)); }
.support-widget .support-quick button { padding:calc(8px * var(--support-scale)) calc(10px * var(--support-scale)); font-size:calc(9px * var(--support-scale)); }
.support-widget .support-messages { padding:calc(10px * var(--support-scale)) calc(17px * var(--support-scale)) calc(12px * var(--support-scale)); }
.support-widget .support-message { margin:calc(7px * var(--support-scale)) 0; padding:calc(10px * var(--support-scale)) calc(12px * var(--support-scale)); border-radius:calc(14px * var(--support-scale)); font-size:calc(10px * var(--support-scale)); }
.support-widget .support-human { padding:calc(10px * var(--support-scale)) calc(17px * var(--support-scale)) calc(8px * var(--support-scale)); }
.support-widget .support-human span { font-size:calc(9px * var(--support-scale)); }
.support-widget .support-human a { font-size:calc(8px * var(--support-scale)); padding:calc(5px * var(--support-scale)) calc(8px * var(--support-scale)); }
.support-widget .support-input-row { gap:calc(7px * var(--support-scale)); padding:calc(10px * var(--support-scale)) calc(13px * var(--support-scale)) calc(5px * var(--support-scale)); }
.support-widget .support-input-row input { height:calc(42px * var(--support-scale)); padding:0 calc(13px * var(--support-scale)); border-radius:calc(13px * var(--support-scale)); font-size:calc(11px * var(--support-scale)); }
.support-widget .support-input-row button { width:calc(42px * var(--support-scale)); height:calc(42px * var(--support-scale)); border-radius:calc(13px * var(--support-scale)); }
.support-widget .support-powered { padding:0 calc(15px * var(--support-scale)) calc(9px * var(--support-scale)); font-size:calc(8px * var(--support-scale)); }
@media (max-width:760px) {
  .support-widget { width:min(var(--support-width), calc(100vw - 16px)); }
  .support-resize { margin:0 13px; height:15px; }
  .support-resize-track { top:7px; }
  .support-resize-dot { top:2px; }
}

/* ===== Feature expansion: notifications / wishlist / coupons / renewal ===== */
.notification-wrap{position:relative;display:flex;align-items:center}
.notification-button{position:relative;width:42px;height:42px;border:1px solid var(--border-color,#e7eaf0);background:var(--surface,#fff);border-radius:13px;color:var(--text-main,#1f2937);cursor:pointer}
.notification-button:hover{transform:translateY(-1px)}
.notification-badge{position:absolute;top:-4px;right:-4px;min-width:18px;height:18px;padding:0 4px;border-radius:10px;background:#ef4444;color:#fff;font-size:10px;line-height:18px;text-align:center;border:2px solid var(--surface,#fff)}
.notification-panel{position:absolute;top:calc(100% + 10px);right:0;width:min(390px,calc(100vw - 24px));max-height:min(560px,70vh);background:var(--surface,#fff);border:1px solid var(--border-color,#e5e7eb);border-radius:18px;box-shadow:0 18px 50px rgba(15,23,42,.16);display:none;overflow:hidden;z-index:10050}
.notification-panel.open{display:block}
.notification-panel-head{display:flex;align-items:center;justify-content:space-between;padding:14px 16px;border-bottom:1px solid var(--border-color,#eee)}
.notification-panel-head div{display:flex;flex-direction:column;gap:3px}.notification-panel-head small{color:var(--text-muted,#6b7280)}
.notification-panel-head button{border:0;background:none;color:var(--primary,#0ea5e9);cursor:pointer;font-size:12px}
.notification-list{overflow:auto;max-height:490px}.notification-item{width:100%;display:flex;gap:11px;text-align:right;padding:13px 15px;border:0;border-bottom:1px solid var(--border-color,#f0f1f3);background:transparent;cursor:pointer;color:inherit}.notification-item.unread{background:rgba(14,165,233,.055)}.notification-item:hover{background:rgba(14,165,233,.09)}
.notification-icon{width:36px;height:36px;flex:0 0 36px;border-radius:11px;display:grid;place-items:center;background:rgba(14,165,233,.1);color:#0ea5e9}.notification-item>span:last-child{display:flex;flex-direction:column;gap:3px}.notification-item strong{font-size:13px}.notification-item small{font-size:12px;line-height:1.55;color:var(--text-muted,#64748b)}.notification-item time{font-size:10px;color:#94a3b8}.notification-empty{padding:35px 20px;text-align:center;color:var(--text-muted,#64748b)}
.wishlist-card{position:relative}.wishlist-card-btn{position:absolute;z-index:3;top:12px;left:12px;width:36px;height:36px;border-radius:50%;border:1px solid rgba(0,0,0,.08);background:rgba(255,255,255,.92);color:#64748b;cursor:pointer;box-shadow:0 4px 12px rgba(0,0,0,.08)}.wishlist-card-btn.active{color:#ef4444}.wishlist-remove{position:absolute;z-index:3;top:12px;left:12px;border:0;background:rgba(255,255,255,.9);color:#ef4444;width:34px;height:34px;border-radius:50%;cursor:pointer}
.coupon-box{margin:15px 0;padding:13px;border:1px dashed var(--border-color,#dbe1e8);border-radius:14px;background:rgba(148,163,184,.05)}.coupon-box-title{font-weight:700;font-size:13px;margin-bottom:9px}.coupon-box-row{display:flex;gap:8px}.coupon-box-row input{flex:1;min-width:0}.coupon-message{font-size:12px;margin-top:7px;min-height:17px}.coupon-message.success{color:#16a34a}.coupon-message.error{color:#dc2626}.cart-price-breakdown{display:grid;gap:7px;margin:10px 0;font-size:13px}.cart-price-breakdown>div{display:flex;justify-content:space-between}.cart-discount-line{color:#16a34a}
.renewal-summary{padding:12px 4px 18px;display:grid;gap:8px}.renewal-summary strong{font-size:20px}.renewal-summary span,.renewal-summary p{color:var(--text-muted,#64748b);font-size:13px}.renewal-summary div{display:flex;justify-content:space-between;align-items:end;margin-top:8px}.renewal-summary b{font-size:24px}
.renewal-btn{margin-top:10px}
@media(max-width:760px){.notification-panel{position:fixed;top:70px;right:12px;left:12px;width:auto;max-height:calc(100vh - 90px)}.notification-list{max-height:calc(100vh - 160px)}.notification-button{width:40px;height:40px}.coupon-box-row{flex-direction:row}.coupon-box-row .btn{white-space:nowrap}}

/* ---- صورة المنتج في المفضلة: نفس إطار المنتجات الرئيسي ---- */
.wishlist-card .product-visual-button { position: relative; overflow: hidden; }
.wishlist-card .product-visual-button .product-art { width: 100%; height: 100%; }
.wishlist-card .product-visual-button .art-image { object-fit: cover; }
.wishlist-card .wishlist-remove { z-index: 5; }


/* ---- نوافذ الأدمن (تعديل المنتج الكامل / IDs الموردين): كانت بدون تنسيق فلا تظهر ---- */
.modal { position: fixed; inset: 0; z-index: 10020; display: none; align-items: center; justify-content: center; padding: 16px; background: rgba(11,31,59,.55); backdrop-filter: blur(6px); }
.modal.active { display: flex; }
.modal > .modal-content { position: relative; background: var(--card-bg, #f9fbfd); color: var(--text-color, #0b1f3b); border-radius: 20px; padding: 22px; box-shadow: 0 25px 80px rgba(9,26,50,.35); max-width: 100%; }
.modal .modal-header { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 12px; }
.modal .modal-header h2 { margin: 0; font-size: 1.15rem; }
.modal .modal-header .modal-close { position: static; flex: 0 0 auto; }

/* ---- واجهة تعديل المنتج (نموذج سهل) ---- */
.pe-modal .pe-content { width: min(96vw, 940px); max-height: 92vh; overflow: auto; padding: 0 22px 0; }
.pe-modal .modal-header { position: sticky; top: 0; z-index: 3; background: #f9fbfd; padding: 18px 0 10px; margin: 0; }
.pe-tabs { display: flex; gap: 8px; margin: 4px 0 14px; }
.pe-tabs button { border: 1px solid var(--tamm-line, #dfe7f0); background: #fff; color: var(--tamm-ink, #0f2040); padding: 8px 14px; border-radius: 12px; font: inherit; font-weight: 700; cursor: pointer; }
.pe-tabs button.active { background: var(--tamm-blue, #1957a6); color: #fff; border-color: var(--tamm-blue, #1957a6); }
.pe-section { background: #fff; border: 1px solid var(--tamm-line, #dfe7f0); border-radius: 16px; padding: 14px; margin-bottom: 14px; }
.pe-section > h3 { margin: 0 0 10px; font-size: 1rem; display: flex; align-items: center; gap: 8px; }
.pe-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 10px; }
.pe-field { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.pe-field > label { font-size: .8rem; font-weight: 700; color: var(--tamm-muted, #70819b); }
.pe-form input[type=text], .pe-form input[type=number], .pe-form select, .pe-form textarea { width: 100%; box-sizing: border-box; padding: 9px 11px; border: 1px solid var(--tamm-line, #dfe7f0); border-radius: 10px; background: #fbfcfe; color: var(--tamm-ink, #0f2040); font: inherit; font-size: .92rem; }
.pe-form textarea { min-height: 70px; resize: vertical; }
.pe-form input:focus, .pe-form select:focus, .pe-form textarea:focus { outline: 2px solid rgba(25,87,166,.35); border-color: var(--tamm-blue, #1957a6); }
.pe-dur { border: 1px solid var(--tamm-line, #dfe7f0); border-radius: 14px; padding: 12px; margin-bottom: 12px; background: #f9fbfd; }
.pe-dur-head { display: flex; gap: 10px; align-items: flex-end; flex-wrap: wrap; margin-bottom: 10px; }
.pe-dur-head .pe-field { flex: 1 1 200px; }
.pe-check { display: inline-flex; align-items: center; gap: 6px; font-size: .85rem; font-weight: 700; cursor: pointer; }
.pe-type { border-top: 1px dashed var(--tamm-line, #dfe7f0); padding-top: 10px; margin-top: 10px; }
.pe-type-title { display: flex; justify-content: space-between; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 8px; font-weight: 800; }
.pe-type-title small { font-weight: 600; color: var(--tamm-muted, #70819b); }
.pe-row { display: grid; grid-template-columns: 110px 150px minmax(0,1fr); gap: 8px; align-items: start; }
.pe-opt { display: grid; grid-template-columns: minmax(0,1fr) 90px 140px minmax(0,1.2fr) auto; gap: 8px; align-items: start; background: #fff; border: 1px solid var(--tamm-line, #dfe7f0); border-radius: 12px; padding: 8px; margin-bottom: 8px; }
.pe-opt textarea { grid-column: 1 / -1; min-height: 46px; }
.pe-stock { display: block; margin-top: 4px; font-size: .78rem; font-weight: 700; color: var(--tamm-muted, #70819b); min-height: 1em; }
.pe-stock.ok { color: var(--tamm-green, #19896f); }
.pe-stock.zero { color: #d14343; }
.pe-mini { border: 1px solid var(--tamm-line, #dfe7f0); background: #fff; border-radius: 10px; padding: 6px 10px; font: inherit; font-size: .8rem; font-weight: 700; cursor: pointer; color: var(--tamm-ink, #0f2040); }
.pe-mini.danger { color: #d14343; border-color: #f2c4c4; }
.pe-mini.primary { background: var(--tamm-blue, #1957a6); color: #fff; border-color: var(--tamm-blue, #1957a6); }
.pe-hint { font-size: .78rem; color: var(--tamm-muted, #70819b); margin: 4px 0 0; }
.pe-footer { position: sticky; bottom: 0; z-index: 3; display: flex; gap: 8px; justify-content: flex-end; flex-wrap: wrap; padding: 12px 0 16px; background: linear-gradient(180deg, rgba(249,251,253,0), #f9fbfd 28%); }
@media (max-width: 700px) {
  .pe-row { grid-template-columns: 1fr 1fr; }
  .pe-row > .pe-field:last-child { grid-column: 1 / -1; }
  .pe-opt { grid-template-columns: 1fr 1fr; }
}

/* ---- تبويبات الأنواع (خاص / مشترك / تفعيل شخصي) ---- */
.pe-types { display: flex; gap: 8px; margin: 0 0 12px; }
.pe-types button { flex: 1; border: 1px solid var(--tamm-line, #dfe7f0); background: #fff; color: var(--tamm-ink, #0f2040); padding: 11px 8px; border-radius: 14px; font: inherit; font-weight: 800; cursor: pointer; display: flex; align-items: center; justify-content: center; gap: 6px; }
.pe-types button.active { background: var(--tamm-blue, #1957a6); color: #fff; border-color: var(--tamm-blue, #1957a6); box-shadow: 0 8px 18px rgba(25,87,166,.22); }
.pe-count { background: rgba(0,0,0,.08); border-radius: 999px; padding: 0 8px; font-size: .75rem; }
.pe-types button.active .pe-count { background: rgba(255,255,255,.25); }
.pe-more { margin-top: 8px; }
.pe-more > summary { cursor: pointer; font-size: .85rem; font-weight: 700; color: var(--tamm-muted, #70819b); padding: 4px 0; }
.pe-link { border: 0; background: none; color: var(--tamm-blue, #1957a6); font: inherit; font-size: .8rem; font-weight: 700; cursor: pointer; padding: 6px 0 0; }
.pe-dur { padding: 10px 12px; }
.pe-dur-head { margin-bottom: 6px; }
.pe-type { border-top: 0; padding-top: 0; margin-top: 0; }

/* ---- زر "واتساب فقط" جنب السعر ---- */
.pe-price-line { display: flex; gap: 6px; align-items: center; }
.pe-price-line input { flex: 1 1 auto; min-width: 0; }
.pe-wa { flex: 0 0 auto; border: 1px solid var(--tamm-line, #dfe7f0); background: #fff; color: var(--tamm-muted, #70819b); border-radius: 10px; padding: 8px 10px; font: inherit; font-size: .78rem; font-weight: 800; cursor: pointer; white-space: nowrap; }
.pe-wa.on { background: #25d366; border-color: #25d366; color: #fff; }
.pe-row { grid-template-columns: 220px 150px minmax(0,1fr); }
.pe-opt { grid-template-columns: minmax(0,1fr) 90px 140px minmax(0,1.2fr) auto; }

.pe-mini.armed { background: #d14343; border-color: #d14343; color: #fff; }
/* نافذة التأكيد العامة لازم تظهر فوق أي نافذة أدمن */
#appModalOverlay { z-index: 10100 !important; }

/* المدة اللي مالهاش سعر في النوع المختار متظهرش في صفحة المنتج */
.duration-pill.unavailable { display: none !important; }

/* مسافة بين آخر زر في صفحة المنتج (واتساب / الدفع) وكارت آراء العملاء */
#productDetailContent { margin-bottom: 28px; }
.product-reviews-card { margin-top: 28px !important; }
@media (max-width: 700px) {
  #productDetailContent { margin-bottom: 20px; }
  .product-reviews-card { margin-top: 20px !important; }
}
/* ===== Wishlist heart button (next to cart) ===== */
.wishlist-button { position: relative; flex: 0 0 auto; width: 42px; height: 42px; display: inline-grid; place-items: center; padding: 0; border: 1px solid var(--tamm-line); border-radius: 13px; color: #e5447a; background: var(--tamm-paper); cursor: pointer; font-size: 16px; box-shadow: 0 3px 9px rgba(20,52,93,.03); transition: border .2s, transform .2s, box-shadow .2s, background .2s, color .2s; }
.wishlist-button:hover { border-color: #f4a9c3; background: #fff5f9; transform: translateY(-1px); box-shadow: 0 10px 24px rgba(229,68,122,.16); }
.wishlist-button:active { transform: scale(.94); }
.wishlist-button:focus-visible { outline: 2px solid var(--tamm-cyan); outline-offset: 2px; }
.wishlist-button.has-items { border-color: #f4a9c3; background: #fff5f9; }
.wishlist-button .wishlist-icon { display: block; transition: fill .2s; }
.wishlist-button:hover .wishlist-icon path, .wishlist-button.has-items .wishlist-icon path { fill: currentColor; }
.wishlist-button.pop .wishlist-icon { animation: wishlistPop .45s ease; }
.wishlist-button .wishlist-badge { position: absolute; top: -6px; left: -5px; min-width: 19px; height: 19px; place-items: center; padding-inline: 4px; border: 2px solid var(--tamm-sand); border-radius: 50%; color: #fff; background: #e5447a; font-size: 10px; font-weight: 800; line-height: 1; }
@keyframes wishlistPop { 0% { transform: scale(1); } 40% { transform: scale(1.35); } 100% { transform: scale(1); } }
@media (max-width: 900px) {
  .wishlist-button { width: 40px; height: 40px; border-radius: 12px; }
}
@media (max-width: 420px) {
  .wishlist-button { width: 38px; height: 38px; }
  .wishlist-button .wishlist-icon { width: 17px; height: 17px; }
}
@media (prefers-reduced-motion: reduce) { .wishlist-button.pop .wishlist-icon { animation: none; } }

/* ===== مقبض السحب لإعادة الترتيب ===== */
.ds-handle { display: inline-flex; align-items: center; justify-content: center; width: 38px; height: 38px; border-radius: 10px; border: 1px solid var(--tamm-line, #dfe7f0); background: #fff; color: var(--tamm-muted, #6b7a90); cursor: grab; touch-action: none; user-select: none; -webkit-user-select: none; flex: 0 0 auto; transition: background .15s, color .15s; }
.ds-handle:hover { background: #eef4ff; color: var(--tamm-blue, #1957a6); }
.ds-handle:active { cursor: grabbing; }
.ds-cell { width: 52px; text-align: center; }
.pe-dur-head .ds-handle { align-self: flex-end; }
.ds-dragging { filter: drop-shadow(0 8px 18px rgba(15, 32, 64, .28)); opacity: .97; }
.ds-dragging.pe-dur { background: #fff; border-color: var(--tamm-blue, #1957a6); }
.ds-dragging td { background: #eef4ff !important; }
body.ds-no-select, body.ds-no-select * { user-select: none !important; -webkit-user-select: none !important; cursor: grabbing !important; }