/* ============================================================ KIMIPACK — WARM layer Softens the blueprint into a warm, premium, "proudly Iraqi" system: jewel turquoise + gold, rounded forms, glow & motion. Loaded AFTER kimipack.css — later rules win. ============================================================ */ /* ============================================================ 1 · PALETTES (data-palette on ) Default = Mesopotamia (turquoise + gold, warm deep teal) ============================================================ */ :root{ /* warm dark base */ --ink: #0E1A1C; --panel: #15252A; --panel-2: #102025; --line: rgba(108,214,200,0.16); --line-soft: rgba(108,214,200,0.085); --line-strong:rgba(108,214,200,0.30); /* brand hues */ --primary: #2FD4C4; /* jewel turquoise */ --primary-2: #3BE0B0; /* aqua-mint for gradients */ --primary-deep:#13A99A; --gold: #ECBB5A; /* warm gold */ --gold-2: #F4D07E; --warm: #F0714F; /* clay / coral — energy accent */ /* map onto legacy token names the base CSS uses */ --cyan: var(--primary); --cyan-deep: var(--primary-deep); --amber: var(--gold); --accent: var(--primary); --text: #EAF5F2; --muted: #8EA9A6; --tile: #FBFCFC; --tile-ink: #0C2A2C; --glow: rgba(47,212,196,0.55); --glow-gold: rgba(236,187,90,0.50); /* softening */ --r: 14px; --r-sm: 10px; --r-lg: 22px; --shadow: 0 24px 60px -32px rgba(0,0,0,0.65); --shadow-sm: 0 12px 30px -18px rgba(0,0,0,0.6); --ease: cubic-bezier(.2,.7,.2,1); --grid: 30px; } /* —— Emerald (Iraq green + gold) —— */ html[data-palette="emerald"]{ --ink:#0D1813; --panel:#13231B; --panel-2:#0F1D16; --line:rgba(110,210,150,0.16); --line-soft:rgba(110,210,150,0.085); --line-strong:rgba(110,210,150,0.30); --primary:#37C97E; --primary-2:#5BE08C; --primary-deep:#1E9D5C; --gold:#E7C45F; --gold-2:#F2D585; --warm:#E8794A; --text:#E9F5ED; --muted:#90AA9C; --tile-ink:#0C2A1C; --glow:rgba(55,201,126,0.52); --glow-gold:rgba(231,196,95,0.5); } /* —— Saffron (espresso + saffron + terracotta) —— */ html[data-palette="saffron"]{ --ink:#1A1410; --panel:#241B13; --panel-2:#1C150E; --line:rgba(232,176,110,0.17); --line-soft:rgba(232,176,110,0.09); --line-strong:rgba(232,176,110,0.32); --primary:#F0A93A; --primary-2:#F6C45E; --primary-deep:#C9801F; --gold:#F2C24E; --gold-2:#F8D27A; --warm:#E2553A; --text:#F5ECDF; --muted:#B3A188; --tile-ink:#2A1C0C; --glow:rgba(240,169,58,0.5); --glow-gold:rgba(242,194,78,0.5); } /* —— Daylight (warm paper, light) —— */ html[data-theme="light"]{ --ink:#F5F0E6; --panel:#FFFDF8; --panel-2:#EFE8D9; --line:rgba(28,70,66,0.18); --line-soft:rgba(28,70,66,0.09); --line-strong:rgba(28,70,66,0.34); --primary:#0FA092; --primary-2:#16B79C; --primary-deep:#0B7568; --gold:#C98A2E; --gold-2:#E0A845; --warm:#D8593A; --text:#16302C; --muted:#5C6E6A; --tile:#FFFFFF; --tile-ink:#0C2A2C; --glow:rgba(15,160,146,0.32); --glow-gold:rgba(201,138,46,0.32); --shadow:0 24px 60px -34px rgba(40,60,55,0.4); --shadow-sm:0 12px 30px -20px rgba(40,60,55,0.35); } /* ============================================================ 2 · AMBIENT BACKDROP (warm aura behind the whole page) ============================================================ */ body.blueprint{ background-image: linear-gradient(var(--line-soft) 0.5px, transparent 0.5px), linear-gradient(90deg, var(--line-soft) 0.5px, transparent 0.5px); background-size: var(--grid) var(--grid); position: relative; } body.blueprint::before{ content:""; position:fixed; inset:0; z-index:-2; pointer-events:none; background: radial-gradient(58vw 50vh at 78% -8%, color-mix(in srgb, var(--primary) 18%, transparent), transparent 62%), radial-gradient(46vw 42vh at 8% 8%, color-mix(in srgb, var(--gold) 12%, transparent), transparent 60%), radial-gradient(60vw 55vh at 50% 112%, color-mix(in srgb, var(--primary) 12%, transparent), transparent 65%); } [data-theme="light"] body.blueprint::before{ opacity:.7; } /* floating ambient orbs (decorative, very soft) */ .kp-orbs{ position:fixed; inset:0; z-index:-1; pointer-events:none; overflow:hidden; } .kp-orb{ position:absolute; border-radius:50%; filter: blur(46px); opacity:.5; } .kp-orb.o1{ width:380px; height:380px; left:-90px; top:12%; background: radial-gradient(circle, color-mix(in srgb,var(--primary) 50%,transparent), transparent 70%); animation: orbDrift 26s var(--ease) infinite; } .kp-orb.o2{ width:300px; height:300px; right:-60px; top:40%; background: radial-gradient(circle, color-mix(in srgb,var(--gold) 46%,transparent), transparent 70%); animation: orbDrift 32s var(--ease) infinite reverse; } .kp-orb.o3{ width:260px; height:260px; left:30%; bottom:-60px; background: radial-gradient(circle, color-mix(in srgb,var(--warm) 38%,transparent), transparent 70%); animation: orbDrift 38s var(--ease) infinite; } @keyframes orbDrift{ 0%,100%{ transform: translate(0,0) scale(1); } 33%{ transform: translate(40px,-30px) scale(1.12); } 66%{ transform: translate(-30px,24px) scale(.94); } } .no-scan .kp-orb{ animation:none !important; } @media (prefers-reduced-motion: reduce){ .kp-orb{ animation:none !important; } } /* scroll progress bar */ .kp-progress{ position:fixed; top:0; left:0; height:3px; width:0; z-index:200; background: linear-gradient(90deg, var(--primary), var(--gold)); box-shadow:0 0 12px var(--glow); transition: width .08s linear; } [dir="rtl"] .kp-progress{ left:auto; right:0; } /* ============================================================ 3 · TYPE — warmer, a touch more humane ============================================================ */ .hero h1, .story-copy h2, .ctaband h2, .page-hero h1{ letter-spacing:-0.02em; } ::selection{ background: var(--primary); color: var(--ink); } /* eyebrow gets a warm gradient tick */ .sec-head .ey-row::before{ background: linear-gradient(90deg, var(--primary), var(--gold)); height:2px; border-radius:2px; } /* ============================================================ 4 · HEADER — softer, glassy, rounded controls ============================================================ */ .site-header{ background: color-mix(in srgb, var(--ink) 78%, transparent); backdrop-filter: blur(16px) saturate(1.2); border-bottom: 1px solid var(--line); } .wordmark .reticle{ filter: drop-shadow(0 0 6px var(--glow)); } .wordmark b{ font-weight:600; } .nav-links a{ border-radius:0; transition: color .2s; } .nav-links a::after{ content:""; display:block; height:2px; border-radius:2px; width:0; background:linear-gradient(90deg,var(--primary),var(--gold)); transition: width .25s var(--ease); } .nav-links a{ border-bottom:0 !important; } .nav-links a:hover::after, .nav-links a.active::after{ width:100%; } .h-search input{ border-radius: var(--r-sm); } .h-search input:focus{ box-shadow: 0 0 0 3px color-mix(in srgb,var(--primary) 22%, transparent); } .lang-toggle{ border-radius: 999px; overflow:hidden; } .cod-badge{ border-radius: 999px; } .cod-badge .dot{ box-shadow:0 0 8px var(--gold); animation: pulseDot 2.2s ease-in-out infinite; } @keyframes pulseDot{ 0%,100%{ opacity:1; } 50%{ opacity:.4; } } .theme-toggle{ border-radius: 999px; } .quote-btn{ border-radius: 999px; } /* ============================================================ 5 · BUTTONS — rounded, glowing, alive ============================================================ */ .btn{ border-radius: 999px; letter-spacing:0.05em; padding:13px 22px; border-width:1px; transition: transform .2s var(--ease), box-shadow .25s var(--ease), background .25s, color .25s, border-color .25s; position:relative; overflow:hidden; } .btn:hover{ transform: translateY(-2px); } .btn-amber{ background: linear-gradient(135deg, var(--gold-2), var(--gold)); color:#241606; border-color: transparent; font-weight:600; box-shadow: 0 10px 30px -10px var(--glow-gold); } .btn-amber:hover{ background: linear-gradient(135deg, var(--gold-2), var(--gold)); color:#241606; box-shadow: 0 16px 40px -12px var(--glow-gold), 0 0 0 1px color-mix(in srgb,var(--gold) 60%,transparent); } .btn-cyan{ border-color: color-mix(in srgb,var(--primary) 60%,transparent); color: var(--primary); } .btn-cyan:hover{ background: var(--primary); color: var(--ink); box-shadow: 0 14px 36px -12px var(--glow); } /* sheen sweep */ .btn::after{ content:""; position:absolute; top:0; left:-120%; width:60%; height:100%; background: linear-gradient(100deg, transparent, rgba(255,255,255,.28), transparent); transform: skewX(-18deg); transition: left .6s var(--ease); pointer-events:none; } .btn:hover::after{ left:140%; } @media (prefers-reduced-motion: reduce){ .btn:hover{ transform:none; } .btn::after{ display:none; } } /* ============================================================ 6 · CARDS / TILES — rounded, lift on hover, warm glow ============================================================ */ .grid-cards{ gap:18px; border:0 !important; } .card{ border:1px solid var(--line) !important; border-radius: var(--r); background: color-mix(in srgb, var(--panel) 92%, transparent); box-shadow: var(--shadow-sm); transition: transform .3s var(--ease), box-shadow .3s var(--ease), border-color .3s; } .card{ cursor: pointer; } .card:hover{ transform: translateY(-6px); border-color: color-mix(in srgb,var(--primary) 45%,transparent); box-shadow: 0 30px 60px -28px rgba(0,0,0,.7), 0 0 0 1px color-mix(in srgb,var(--primary) 22%,transparent); } .card .tile{ border-radius: calc(var(--r) - 4px); margin:8px 8px 0; aspect-ratio:4/3; background: radial-gradient(120% 120% at 50% 0%, #fff, #eef4f3); } .card .tile-img{ mix-blend-mode: multiply; } .card .order{ border-radius: 999px; background: linear-gradient(135deg, var(--gold-2), var(--gold)); color:#241606; border-color:transparent; } .card .order:hover{ background: transparent; color: var(--gold); box-shadow: inset 0 0 0 1px var(--gold); } .qadd{ border-radius: 999px 0 0 999px; } [dir="rtl"] .qadd{ border-radius: 0 999px 999px 0; } .card-actions{ gap:8px; } .qadd{ border-radius:999px; } .card .specpop{ border-radius: 0 0 var(--r) var(--r); } /* ============================================================ 7 · CATEGORY CARDS — gradient sweep, glow icon ============================================================ */ .catgrid{ gap:16px; border:0 !important; } .catcard{ border:1px solid var(--line) !important; border-radius: var(--r-lg); background: color-mix(in srgb, var(--panel) 90%, transparent); box-shadow: var(--shadow-sm); overflow:hidden; transition: transform .35s var(--ease), box-shadow .35s var(--ease), border-color .35s; } .catcard::before{ content:""; position:absolute; inset:0; opacity:0; transition:opacity .35s; background: radial-gradient(80% 70% at 80% 0%, color-mix(in srgb,var(--primary) 16%,transparent), transparent 60%); } .catcard:hover{ transform: translateY(-6px); border-color: color-mix(in srgb,var(--primary) 45%,transparent); box-shadow: 0 30px 60px -28px rgba(0,0,0,.65); background: var(--panel); } .catcard:hover::before{ opacity:1; } .catcard .cc-fig{ width:60px; height:60px; transition: transform .4s var(--ease); } .catcard .cc-fig svg.schematic{ filter: drop-shadow(0 0 10px var(--glow)); color: var(--primary); } .catcard:hover .cc-fig{ transform: scale(1.08) rotate(-3deg); } .catcard::after{ border-color: color-mix(in srgb,var(--gold) 50%,transparent) !important; } /* ============================================================ 8 · STATS — gradient numerals, gradient bar ============================================================ */ .stats{ border:0 !important; gap:16px; } .stat{ border:1px solid var(--line) !important; border-radius: var(--r); background: color-mix(in srgb, var(--panel) 88%, transparent); box-shadow: var(--shadow-sm); } .stat .sv{ background: linear-gradient(120deg, var(--primary), var(--gold)); -webkit-background-clip:text; background-clip:text; color:transparent; } .stat .sv .suf{ -webkit-text-fill-color: var(--gold); } .stat .sbar{ height:3px; background: linear-gradient(90deg, var(--primary), var(--gold)); box-shadow:0 0 10px var(--glow); } /* ============================================================ 9 · STORY / INDUSTRIES / WHY / STEPS — rounded panels ============================================================ */ .story{ border:1px solid var(--line) !important; border-radius: var(--r-lg); overflow:hidden; box-shadow: var(--shadow-sm); } .story-fig{ background: radial-gradient(120% 120% at 30% 0%, color-mix(in srgb,var(--panel) 90%, var(--primary) 8%), var(--panel-2)); } .story-li .sli-n{ color: var(--gold); } .indgrid{ border:0 !important; gap:16px; } .indcard{ border:1px solid var(--line) !important; border-radius: var(--r); background: color-mix(in srgb, var(--panel) 88%, transparent); box-shadow: var(--shadow-sm); transition: transform .3s var(--ease), box-shadow .3s, border-color .3s; } .indcard:hover{ transform: translateY(-5px); border-color: color-mix(in srgb,var(--primary) 40%,transparent); box-shadow: var(--shadow); } .indcard .ic-fig{ color: var(--primary); filter: drop-shadow(0 0 8px var(--glow)); } .whyrow{ border:0 !important; gap:16px; display:grid; } .whycell{ border:1px solid var(--line) !important; border-radius: var(--r); background: color-mix(in srgb, var(--panel) 88%, transparent); box-shadow: var(--shadow-sm); transition: transform .3s var(--ease), box-shadow .3s; } .whycell:hover{ transform: translateY(-4px); box-shadow: var(--shadow); } .whycell .wc-ic{ color: var(--primary); filter: drop-shadow(0 0 8px var(--glow)); } .steps{ border:0 !important; gap:16px; display:grid; } .step{ border:1px solid var(--line) !important; border-radius: var(--r); background: color-mix(in srgb, var(--panel) 88%, transparent); box-shadow: var(--shadow-sm); transition: transform .3s var(--ease), box-shadow .3s, border-color .3s; } .step::before{ content:""; position:absolute; inset-inline-start:0; top:18px; bottom:18px; width:3px; border-radius:3px; background: linear-gradient(180deg, var(--primary), var(--gold)); opacity:0; transition:opacity .3s; } .step:hover{ transform: translateY(-4px); border-color: color-mix(in srgb,var(--primary) 35%,transparent); box-shadow: var(--shadow); } .step:hover::before{ opacity:1; } .step .sn{ color: var(--gold); } /* ============================================================ 10 · MARQUEE + CTA band + footer ============================================================ */ .marquee{ border-block:1px solid var(--line); background: color-mix(in srgb,var(--panel-2) 80%, transparent); } .mq-item .star{ background: linear-gradient(135deg,var(--primary),var(--gold)); box-shadow:0 0 8px var(--glow); } .ctaband{ border:1px solid color-mix(in srgb,var(--primary) 30%, var(--line-strong)) !important; border-radius: var(--r-lg); box-shadow: var(--shadow); background: radial-gradient(80% 140% at 100% 0%, color-mix(in srgb,var(--primary) 16%,transparent), transparent 55%), radial-gradient(70% 130% at 0% 100%, color-mix(in srgb,var(--gold) 14%,transparent), transparent 55%), var(--panel); overflow:hidden; } .title-block{ border:1px solid var(--line-strong); border-radius: var(--r); overflow:hidden; } /* inputs (contact) */ .field input, .field select, .field textarea{ border-radius: var(--r-sm); } .field input:focus, .field select:focus, .field textarea:focus{ box-shadow:0 0 0 3px color-mix(in srgb,var(--primary) 20%,transparent); } .contact-grid, .prose-grid, .timeline, .valuegrid, .spec-table, .pp-grid{ border-radius: var(--r); overflow:hidden; } .chip{ border-radius:999px; } .chip.on{ box-shadow:0 0 0 1px color-mix(in srgb,var(--primary) 40%,transparent), 0 0 16px -4px var(--glow); } /* ============================================================ 11 · HERO — warm stage, gradient headline, alive backdrop ============================================================ */ .hero{ border-bottom:1px solid var(--line); } .hero-stage::before{ content:""; position:absolute; inset:-6% -4%; z-index:0; pointer-events:none; border-radius:50%; background: radial-gradient(closest-side, color-mix(in srgb,var(--primary) 26%,transparent), transparent 72%); filter: blur(18px); animation: heroAura 7s ease-in-out infinite; } .hero-stage::after{ content:""; position:absolute; right:8%; top:18%; width:42%; height:42%; z-index:0; pointer-events:none; border-radius:50%; background: radial-gradient(closest-side, color-mix(in srgb,var(--gold) 22%,transparent), transparent 72%); filter: blur(22px); animation: heroAura 9s ease-in-out infinite reverse; } [dir="rtl"] .hero-stage::after{ right:auto; left:8%; } @keyframes heroAura{ 0%,100%{ transform: translate(0,0) scale(1); opacity:.8; } 50%{ transform: translate(2%, -3%) scale(1.08); opacity:1; } } .no-scan .hero-stage::before, .no-scan .hero-stage::after{ animation:none; } @media (prefers-reduced-motion: reduce){ .hero-stage::before, .hero-stage::after{ animation:none; } } .hero-canvas, .callout, .reticle-cursor, .hero-meta{ position:relative; z-index:2; } .hero-canvas{ position:absolute !important; } /* gradient highlight word in headline (wrap target in ) */ .kp-grad{ background: linear-gradient(108deg, var(--primary) 8%, var(--gold-2) 60%, var(--gold) 96%); -webkit-background-clip:text; background-clip:text; color:transparent; background-size:200% 100%; animation: gradShift 8s ease infinite; } @keyframes gradShift{ 0%,100%{ background-position:0% 50%; } 50%{ background-position:100% 50%; } } @media (prefers-reduced-motion: reduce){ .kp-grad{ animation:none; } } .eyebrow.hero-chip{ display:inline-flex; align-items:center; gap:9px; padding:7px 14px; border-radius:999px; background: color-mix(in srgb,var(--primary) 12%, transparent); border:1px solid color-mix(in srgb,var(--primary) 30%, transparent); color: var(--primary); width:max-content; letter-spacing:0.18em; } .eyebrow.hero-chip .hc-dot{ width:7px; height:7px; border-radius:50%; background: var(--gold); box-shadow:0 0 8px var(--gold); animation: pulseDot 2s ease-in-out infinite; } .trust{ border-top:1px solid var(--line); } .trust .ti{ transition: transform .25s var(--ease); } .trust .ti:hover{ transform: translateY(-3px); } .trust .ti .n{ color: var(--gold); } /* ============================================================ 12 · RICH REVEAL (blur + rise, premium feel) ============================================================ */ html.kp-motion [data-reveal]{ filter: blur(6px); transform: translateY(26px); transition: opacity .7s var(--ease), transform .7s var(--ease), filter .7s var(--ease); } html.kp-motion [data-reveal].in{ filter: blur(0); } html.kp-motion [data-reveal-s]{ filter: blur(6px); } html.kp-motion [data-reveal-s].in{ filter: blur(0); } @media (prefers-reduced-motion: reduce){ html.kp-motion [data-reveal], html.kp-motion [data-reveal-s]{ filter:none !important; } } /* section dividers get a soft warm glow line */ .section + .section{ border-top:1px solid var(--line); } /* ============================================================ 13 · RESPONSIVE niceties ============================================================ */ @media (max-width: 720px){ .kp-orb{ opacity:.32; } .grid-cards, .catgrid, .stats, .indgrid, .whyrow, .steps{ gap:12px; } } /* directional arrows point with reading flow in RTL */ [dir="rtl"] .btn .ico{ transform: scaleX(-1); } /* phone numbers always render left-to-right, even in RTL */ .tel, .ci-v a[href^="tel"], .ci-v a[href*="wa.me"]{ direction:ltr; unicode-bidi:embed; } /* ── animated brand logo (replaces the crosshair reticle) ── */ .wordmark{ gap:10px; } .wordmark .wm-mark{ position:relative; width:32px; height:32px; border-radius:10px; display:grid; place-items:center; flex:0 0 auto; isolation:isolate; } .wordmark .wm-mark::before{ content:""; position:absolute; inset:0; border-radius:10px; padding:1.6px; background: conic-gradient(from 0deg, var(--primary), var(--gold), var(--warm), var(--primary)); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; animation: wmSpin 5s linear infinite; } .wordmark .wm-mark::after{ content:""; position:absolute; inset:1.6px; border-radius:8px; z-index:-1; background: color-mix(in srgb, var(--panel) 86%, var(--primary) 6%); } .wordmark .wm-mark svg{ width:16px; height:16px; color: var(--primary); filter: drop-shadow(0 0 5px var(--glow)); animation: wmFloat 3.4s var(--ease) infinite; } @keyframes wmSpin{ to{ transform: rotate(360deg); } } @keyframes wmFloat{ 0%,100%{ transform: translateY(0); } 50%{ transform: translateY(-1.5px); } } .wordmark .wm-text{ font-weight:600; letter-spacing:0.03em; background: linear-gradient(100deg, var(--text) 28%, var(--primary) 52%, var(--gold) 72%, var(--text) 94%); background-size: 240% 100%; -webkit-background-clip:text; background-clip:text; color:transparent; animation: wmShine 6.5s linear infinite; } @keyframes wmShine{ to{ background-position: -240% 0; } } .no-scan .wordmark .wm-mark::before, .no-scan .wordmark .wm-mark svg, .no-scan .wordmark .wm-text{ animation:none; } @media (prefers-reduced-motion: reduce){ .wordmark .wm-mark::before, .wordmark .wm-mark svg, .wordmark .wm-text{ animation:none; } } /* ============================================================ 14 · MOBILE AUDIT FIXES Keep the header control cluster inside the viewport on small phones (was clipping off the right edge in EN / left in RTL, masked by body{overflow-x:hidden}), un-collide the catalog sort control, and give card CTAs comfortable tap targets. ============================================================ */ /* Header — compress wordmark + EN/ع + theme + quote so they always fit (verified down to 320px). */ @media (max-width: 480px){ .site-header .bar{ gap: 10px; } .wordmark{ gap: 8px; } .wordmark .wm-mark{ width: 30px; height: 30px; } .wordmark .wm-text, .wordmark b{ font-size: 16px; } .wordmark .tm{ display: none; } /* drop ™ superscript on phones */ .lang-toggle button{ padding: 11px 11px; } /* taller tap target */ .theme-toggle{ width: 42px; height: 42px; } .quote-btn{ padding: 10px 11px; } } @media (max-width: 380px){ .site-header .wrap.bar{ padding-inline: 14px; } /* reclaim edge space */ .site-header .bar{ gap: 7px; } .wordmark .wm-mark{ width: 28px; height: 28px; } .wordmark .wm-text, .wordmark b{ font-size: 15px; } .lang-toggle button{ padding: 11px 8px; } .theme-toggle{ width: 40px; height: 40px; } .quote-btn{ padding: 10px 8px; gap: 6px; } } /* Catalog toolbar — sort drops to its own full-width row below the chip rail instead of overlapping the last chip. */ @media (max-width: 640px){ .toolbar .row{ row-gap: 12px; } .toolbar .sortbox{ width: 100%; justify-content: space-between; } .toolbar .sortbox select{ flex: 1 1 auto; } } /* Primary card actions — ≥44px tap height on phones. */ @media (max-width: 720px){ .card .order{ padding: 13px 10px; } .card-actions .qadd{ min-height: 44px; } } /* Long unbreakable product titles/SKUs never force a card wider than its column (guards horizontal overflow in either language). */ .card h3, .pp-info h1, .qd-name{ overflow-wrap: anywhere; } /* Hero eyebrow pill — was width:max-content, so the long "Laboratory & scientific instruments · Iraq / MENA" line (EN & AR) forced the hero wider than the phone and got clipped. Let it wrap. */ @media (max-width: 560px){ .eyebrow.hero-chip{ width: auto; max-width: 100%; white-space: normal; flex-wrap: wrap; line-height: 1.5; } .hero h1{ overflow-wrap: anywhere; } } /* Product order row — stack to full-width buttons on phones so "Order on WhatsApp" / "اطلب عبر واتساب" never clips inside the sheen-clipping .btn (overflow:hidden). */ @media (max-width: 480px){ .pp-order{ flex-direction: column; align-items: stretch; } .pp-order .btn{ width: 100%; } }