:root {
  --ink: #071a35;
  --blue: #1769e8;
  --red: #f0443e;
  --yellow: #ffc928;
  --mint: #67d8b1;
  --cream: #fffdf5;
  --paper: #ffffff;
  --line: #dbe5ef;
  --muted: #5d6d82;
  --shadow: 0 18px 44px rgba(7, 26, 53, .13);
  --display: "Nunito Sans", Cairo, sans-serif;
  --body: Cairo, "Nunito Sans", sans-serif;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; min-width: 320px; background: #eef5f2; color: var(--ink); font-family: var(--body); }
button, input, select { font: inherit; }
button { cursor: pointer; }
button:disabled { cursor: not-allowed; opacity: .48; }
button, a { -webkit-tap-highlight-color: transparent; }

.app-shell { min-height: 100vh; overflow: clip; }
.main { width: min(1440px, calc(100% - 40px)); margin: 0 auto 100px; }
.site-header { position: sticky; top: 0; z-index: 30; background: rgba(238,245,242,.91); backdrop-filter: blur(18px); border-bottom: 1px solid rgba(7,26,53,.07); }
.header-inner { width: min(1440px, calc(100% - 40px)); height: 82px; margin: auto; display: flex; align-items: center; justify-content: space-between; gap: 28px; }
.brand { display: inline-flex; align-items: center; gap: 9px; color: var(--ink); font-family: var(--display); font-size: 34px; font-weight: 900; letter-spacing: 0; text-decoration: none; }
.brand-dot { width: 12px; height: 12px; border-radius: 2px; background: var(--yellow); box-shadow: 5px 5px 0 var(--red); transform: rotate(15deg); }
.desktop-nav { display: flex; align-items: center; gap: 5px; margin-inline: auto; }
.nav-link { border: 0; color: var(--muted); background: transparent; padding: 10px 14px; font-weight: 800; transition: color .2s ease, transform .2s ease; }
.nav-link:hover, .nav-link.active { color: var(--ink); transform: translateY(-2px); }
.nav-link.active::after { content: ""; display: block; width: 20px; height: 4px; margin: 5px auto -9px; border-radius: 10px; background: var(--red); }
.header-actions { display: flex; align-items: center; gap: 9px; }
.icon-button, .circle-button { min-height: 43px; border: 1px solid var(--line); background: var(--paper); color: var(--ink); display: inline-flex; align-items: center; justify-content: center; gap: 8px; font-weight: 800; transition: transform .2s ease, box-shadow .2s ease; }
.icon-button { padding: 0 13px; border-radius: 9px; }
.circle-button { width: 45px; border-radius: 50%; position: relative; }
.icon-button:hover, .circle-button:hover { transform: translateY(-3px) rotate(-2deg); box-shadow: 0 8px 18px rgba(7,26,53,.13); }
.cart-count { width: 19px; height: 19px; display: grid; place-items: center; position: absolute; top: -5px; inset-inline-end: -5px; border-radius: 50%; background: var(--red); color: #fff; font-size: 10px; }

.shipping-bar { margin: 17px 0; height: 42px; overflow: hidden; display: flex; align-items: center; justify-content: center; gap: 10px; background: var(--yellow); color: var(--ink); border: 2px solid var(--ink); border-radius: 8px; font-family: var(--display); font-size: 14px; font-weight: 900; box-shadow: 5px 5px 0 var(--ink); animation: arrival .6s cubic-bezier(.2,1.4,.3,1) both; }
.shipping-bar svg { animation: truck-drive 2.5s ease-in-out infinite; }

.hero { min-height: 580px; position: relative; display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(440px, .95fr); border: 3px solid var(--ink); border-radius: 18px; overflow: hidden; background: var(--ink); box-shadow: 14px 16px 0 var(--red), 0 25px 55px rgba(7,26,53,.18); }
.hero::before { content: ""; position: absolute; width: 220px; height: 220px; top: -90px; inset-inline-start: 44%; border: 28px solid var(--yellow); border-radius: 50%; opacity: .98; animation: float 7s ease-in-out infinite; }
.hero-copy { padding: 88px clamp(40px,6vw,90px); position: relative; z-index: 2; color: #fff; align-self: center; }
.eyebrow { margin: 0 0 14px; color: var(--yellow); font-family: var(--display); font-size: 13px; font-weight: 900; letter-spacing: .08em; text-transform: uppercase; }
.hero h1 { max-width: 670px; margin: 0; font-family: var(--display); font-size: clamp(56px,6.2vw,94px); line-height: .88; letter-spacing: 0; font-weight: 900; }
.hero h1 span { color: var(--yellow); display: block; transform: rotate(-2deg); transform-origin: left; }
.hero p:not(.eyebrow) { max-width: 530px; margin: 25px 0 33px; color: #d5e1ee; font-size: 18px; line-height: 1.75; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 13px; }
.button { border: 2px solid var(--ink); min-height: 51px; padding: 0 20px; display: inline-flex; align-items: center; justify-content: center; gap: 9px; border-radius: 8px; font-family: var(--display); font-weight: 900; transition: transform .18s ease, box-shadow .18s ease, background .18s ease; }
.button:hover { transform: translate(-3px, -4px); box-shadow: 6px 7px 0 var(--ink); }
.button:active { transform: translate(0,0); box-shadow: 0 0 0 var(--ink); }
.button.primary { color: var(--ink); background: var(--yellow); }
.button.secondary { color: #fff; background: transparent; border-color: #fff; }
.button.secondary:hover { box-shadow: 6px 7px 0 var(--mint); }
.button.small { min-height: 43px; padding: 0 13px; }

.hero-stage { position: relative; overflow: hidden; background: var(--blue); border-inline-start: 3px solid var(--ink); isolation: isolate; }
.hero-stage::before { content: ""; position: absolute; inset: 0; opacity: .32; background-color: #5b99f4; background-image: none; }
.hero-stage::after { content: "PLAY\A BIG"; white-space: pre; position: absolute; font-family: var(--display); font-size: clamp(78px,11vw,156px); line-height: .76; bottom: 22px; inset-inline-start: 23px; font-weight: 900; letter-spacing: -.04em; color: rgba(255,255,255,.19); z-index: -1; }
.shape { position: absolute; z-index: 1; border: 3px solid var(--ink); box-shadow: 8px 9px 0 rgba(7,26,53,.2); }
.shape.ring { width: 156px; height: 156px; top: 56px; inset-inline-end: 40px; border: 25px solid var(--yellow); border-radius: 50%; animation: float 5.2s ease-in-out infinite; }
.shape.cube { width: 134px; height: 134px; top: 212px; inset-inline-start: 12%; background: var(--red); transform: rotate(12deg); animation: spin-float 9s ease-in-out infinite; }
.shape.zigzag { width: 190px; height: 62px; bottom: 100px; inset-inline-end: 8%; border: 0; box-shadow: none; background: var(--mint); clip-path: polygon(0 58%,15% 0,31% 58%,46% 0,62% 58%,77% 0,100% 58%,82% 100%,62% 53%,47% 100%,31% 53%,15% 100%); animation: bounce-x 4.3s ease-in-out infinite; }
.hero-card { position: absolute; z-index: 3; width: min(240px, 48%); bottom: 59px; inset-inline-start: 23%; padding: 23px 20px; color: var(--ink); background: var(--paper); border: 3px solid var(--ink); border-radius: 12px; box-shadow: 11px 11px 0 var(--ink); transform: rotate(-7deg); animation: card-bob 4.8s ease-in-out infinite; }
.hero-card::before { content: "★"; position: absolute; color: var(--red); font-size: 30px; top: -19px; inset-inline-end: 18px; transform: rotate(19deg); }
.hero-card strong { display: block; font: 900 24px/1.05 var(--display); }
.hero-card span { display: block; margin-top: 8px; color: var(--muted); font-size: 13px; font-weight: 800; }

.section { padding: 95px 0 0; }
.section-heading { display: flex; justify-content: space-between; align-items: end; gap: 25px; margin-bottom: 27px; }
.section-heading h2 { max-width: 700px; margin: 0; font-family: var(--display); font-size: clamp(34px,4vw,57px); line-height: .96; letter-spacing: 0; font-weight: 900; }
.section-heading p { margin: 9px 0 0; color: var(--muted); font-size: 16px; }
.text-link { color: var(--ink); border: 0; border-bottom: 2px solid var(--red); padding: 7px 0; background: transparent; display: inline-flex; align-items: center; gap: 7px; font-weight: 900; white-space: nowrap; }
.text-link:hover svg { transform: translateX(5px); }

.category-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.category { min-height: 210px; position: relative; overflow: hidden; padding: 23px; border: 2px solid var(--ink); border-radius: 12px; color: var(--ink); text-align: start; box-shadow: 5px 6px 0 var(--ink); transition: transform .23s cubic-bezier(.2,1.3,.3,1), box-shadow .23s ease; }
.category:nth-child(4n+1) { background: var(--yellow); }
.category:nth-child(4n+2) { background: var(--mint); }
.category:nth-child(4n+3) { background: #ffaaa0; }
.category:nth-child(4n) { background: #8dbdff; }
.category>img { position:absolute; z-index:0; inset:0; width:100%; height:100%; object-fit:cover; transition:transform .45s cubic-bezier(.2,.8,.2,1); }
.category::before { content:""; position:absolute; z-index:1; inset:0; background:rgba(7,26,53,.23); }
.category::after { content:""; position:absolute; z-index:2; width: 150px; height:150px; bottom:-72px; inset-inline-end:-65px; border: 18px solid rgba(255,255,255,.5); border-radius:50%; }
.category:hover { transform: translate(-5px,-8px) rotate(-1.4deg); box-shadow: 12px 14px 0 var(--ink); }
.category:hover>img { transform:scale(1.12) rotate(-1.5deg); }
.category svg { position:relative; z-index:3; width: 39px; height: 39px; padding: 8px; background: #fff; border: 2px solid var(--ink); border-radius: 9px; }
.category strong { position: relative; z-index: 3; display: block; margin-top: 42px; color:#fff; text-shadow:2px 2px 0 var(--ink); font: 900 24px/1 var(--display); }
.category small { position: relative; z-index: 3; display: block; margin-top: 8px; color:#fff; font-weight: 900; text-shadow:1px 1px 0 var(--ink); }

.product-layout { display: grid; grid-template-columns: 235px minmax(0,1fr); align-items: start; gap: 28px; }
.filter-panel { position: sticky; top: 102px; padding: 22px; border: 2px solid var(--ink); background: var(--paper); border-radius: 12px; box-shadow: 7px 8px 0 var(--blue); }
.filter-panel h3 { margin: 0 0 20px; font: 900 22px var(--display); }
.filter-group { padding-top: 17px; margin-top: 17px; border-top: 1px solid var(--line); }
.filter-label { display:block; margin-bottom: 11px; font-weight:900; }
.filter-option { display:flex; align-items:center; gap:9px; margin:10px 0; color:var(--muted); font-size:14px; font-weight:700; }
.filter-option input { accent-color: var(--red); }
.product-toolbar { display:flex; justify-content:space-between; align-items:center; gap:12px; margin-bottom:19px; }
.search-field { min-height:50px; flex:1; max-width:510px; padding:0 14px; display:flex; align-items:center; gap:8px; border:2px solid var(--ink); border-radius:8px; background:#fff; }
.search-field input { width:100%; border:0; outline:0; color:var(--ink); background:transparent; }
.sort { min-height:50px; padding:0 12px; border:2px solid var(--ink); border-radius:8px; background:#fff; font-weight:800; }
.products { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:20px; }
.product-card { min-width:0; overflow:hidden; position:relative; border:2px solid var(--ink); border-radius:12px; background:var(--paper); box-shadow:0 7px 0 var(--ink); transition:transform .24s cubic-bezier(.2,1.35,.35,1), box-shadow .24s ease; animation: arrival .55s both; }
.product-card:hover { transform:translateY(-10px) rotate(-.5deg); box-shadow:0 15px 0 var(--ink); }
.product-card:nth-child(2n) { animation-delay:.05s; }
.product-card:nth-child(3n) { animation-delay:.1s; }
.product-image { height:260px; position:relative; overflow:hidden; border-bottom:2px solid var(--ink); background:#cce4ff; }
.product-image::after { content:""; position:absolute; inset:0; z-index:1; box-shadow:inset 0 -48px 32px -36px rgba(7,26,53,.42); pointer-events:none; }
.product-image.stem { background:#a9dcce; }.product-image.logic { background:#ffe06b; }.product-image.science { background:#c7b4ff; }.product-image.vehicle { background:#ffa8a1; }.product-image.outdoor { background:#9bc6ff; }.product-image.art { background:#ffc0db; }
.product-image img { width:100%; height:100%; display:block; position:relative; z-index:0; object-fit:contain; mix-blend-mode:multiply; padding:10px; transform:scale(1.03); transition:transform .45s cubic-bezier(.2,.8,.2,1); }
.product-card:hover .product-image img { transform:scale(1.13) rotate(-1.2deg); }
.badge { position:absolute; z-index:5; top:13px; inset-inline-start:13px; padding:6px 9px; color:var(--ink); background:var(--yellow); border:2px solid var(--ink); border-radius:5px; font:900 10px var(--display); text-transform:uppercase; }
.wish { position:absolute; z-index:5; top:12px; inset-inline-end:12px; width:38px; height:38px; display:grid; place-items:center; border:2px solid var(--ink); border-radius:50%; color:var(--ink); background:#fff; transition:transform .18s ease, background .18s ease; }
.wish:hover,.wish.active { background:var(--red); color:#fff; transform:rotate(-10deg) scale(1.1); }
.product-info { padding:17px; }
.product-meta { display:flex; justify-content:space-between; gap:7px; color:var(--muted); font-size:11px; font-weight:800; }.product-meta span:last-child { display:flex; align-items:center; gap:3px; }.product-meta svg { width:13px; color:#f3aa12; fill:#f3aa12; }
.product-name { min-height:43px; margin:9px 0 2px; font:900 19px/1.12 var(--display); }.product-name-ar { min-height:23px; margin:0; color:var(--muted); font-size:12px; }
.price-row { display:flex; align-items:center; flex-wrap:wrap; gap:8px; margin-top:11px; }.price { font:900 21px var(--display); }.old-price { color:var(--muted); text-decoration:line-through; font-size:13px; }
.product-actions { display:grid; grid-template-columns:1fr 43px; gap:8px; margin-top:15px; }.add-product { min-width:0; }.view-product { border:2px solid var(--ink); border-radius:8px; background:var(--mint); color:var(--ink); display:grid; place-items:center; transition:transform .18s ease; }.view-product:hover { transform:rotate(9deg); }

.bundle { min-height:390px; margin-top:95px; padding:67px clamp(32px,6vw,95px); position:relative; overflow:hidden; display:grid; grid-template-columns:minmax(0,.9fr) 1.1fr; align-items:center; color:#fff; background:var(--red); border:3px solid var(--ink); border-radius:16px; box-shadow:12px 13px 0 var(--ink); }
.bundle-copy { position:relative; z-index:2; }.bundle h2 { max-width:600px; margin:0; font:900 clamp(40px,5vw,74px)/.93 var(--display); }.bundle p:not(.eyebrow) { max-width:510px; margin:19px 0 28px; line-height:1.75; font-size:17px; }
.bundle-shapes::before,.bundle-shapes::after { content:""; position:absolute; border:3px solid var(--ink); box-shadow:9px 10px 0 rgba(7,26,53,.25); }.bundle-shapes::before { width:260px; height:260px; inset-inline-end:15%; top:59px; background:var(--yellow); border-radius:50%; animation: spin-float 10s ease-in-out infinite; }.bundle-shapes::after { width:190px; height:190px; inset-inline-end:3%; bottom:-25px; background:var(--blue); transform:rotate(21deg); animation: float 5s ease-in-out infinite; }

.mascot { width:74px; height:74px; position:fixed; z-index:20; bottom:28px; inset-inline-end:28px; border:3px solid var(--ink); border-radius:50% 50% 46% 46%; background:var(--yellow); box-shadow:6px 7px 0 var(--ink); animation: mascot-bounce 3.5s ease-in-out infinite; }.mascot::before { content:"K"; color:var(--ink); font:900 37px var(--display); }.mascot:hover { animation-play-state:paused; transform:rotate(-11deg) scale(1.11); }
.mobile-nav { display:none; }

.drawer { position:fixed; z-index:60; inset:0; pointer-events:none; }.drawer.open { pointer-events:auto; }.drawer-backdrop { position:absolute; inset:0; background:rgba(7,26,53,.48); opacity:0; transition:opacity .25s ease; }.drawer.open .drawer-backdrop { opacity:1; }.cart-panel { width:min(440px,100%); height:100%; position:absolute; inset-block:0; inset-inline-end:0; display:flex; flex-direction:column; background:#fffdf5; border-inline-start:3px solid var(--ink); transform:translateX(110%); transition:transform .35s cubic-bezier(.2,.9,.2,1); }.drawer.open .cart-panel { transform:translateX(0); }.panel-header { padding:25px; display:flex; justify-content:space-between; align-items:center; border-bottom:2px solid var(--ink); }.panel-header h2 { margin:0; font:900 32px var(--display); }.close { width:39px; height:39px; display:grid; place-items:center; border:2px solid var(--ink); border-radius:8px; background:#fff; }.cart-items { flex:1; padding:18px; overflow:auto; }.cart-row { display:grid; grid-template-columns:65px 1fr 36px; align-items:center; gap:12px; padding:12px 0; border-bottom:1px solid var(--line); }.cart-thumb { width:65px; height:65px; border:2px solid var(--ink); background:var(--mint); border-radius:8px; }.cart-row strong,.cart-row span { display:block; }.cart-row span { margin-top:4px; color:var(--muted); font-weight:800; }.remove { width:35px; height:35px; border:0; color:var(--red); background:transparent; }.cart-footer { padding:21px; border-top:2px solid var(--ink); }.subtotal { display:flex; justify-content:space-between; margin-bottom:15px; font:900 20px var(--display); }.cart-footer .button { width:100%; }
.modal { position:fixed; z-index:70; inset:0; display:none; }.modal.open { display:block; }.modal-backdrop { position:absolute; inset:0; background:rgba(7,26,53,.6); backdrop-filter:blur(4px); }.modal-card { width:min(830px,calc(100% - 28px)); max-height:calc(100vh - 40px); overflow:auto; position:relative; margin:20px auto; padding:32px; background:#fffdf5; border:3px solid var(--ink); border-radius:14px; box-shadow:13px 15px 0 var(--ink); animation: modal-in .32s cubic-bezier(.2,1.3,.2,1) both; }.modal-card>.close { position:absolute; top:14px; inset-inline-end:14px; z-index:4; }.modal-product { display:grid; grid-template-columns:1fr 1fr; gap:27px; }.modal-product .product-image { min-height:320px; height:auto; border:2px solid var(--ink); border-radius:10px; }.modal-product h2 { margin:5px 0; font:900 35px/1 var(--display); }.modal-product p { line-height:1.65; color:var(--muted); }.feature-list { padding-inline-start:20px; color:var(--muted); line-height:2; }.checkout-form { display:grid; gap:13px; }.checkout-form label { display:grid; gap:6px; font-weight:800; }.checkout-form input,.checkout-form select { min-height:46px; padding:0 12px; border:2px solid var(--ink); border-radius:7px; background:#fff; }.success { max-width:500px; text-align:center; padding:65px 35px; }.success-mark { width:70px; height:70px; display:grid; place-items:center; margin:0 auto 18px; border:3px solid var(--ink); border-radius:50%; background:var(--mint); box-shadow:6px 7px 0 var(--ink); }.success h2 { margin:0; font:900 39px var(--display); }.success .button { margin-top:13px; }
.toast { position:fixed; z-index:90; bottom:30px; left:50%; padding:13px 18px; border:2px solid var(--ink); border-radius:8px; color:#fff; background:var(--ink); box-shadow:5px 6px 0 var(--yellow); opacity:0; pointer-events:none; transform:translate(-50%,22px); transition:.25s ease; font-weight:800; }.toast.show { opacity:1; transform:translate(-50%,0); }.empty { color:var(--muted); font-weight:700; }
.confetti { position:fixed; z-index:100; width:11px; height:18px; pointer-events:none; animation:confetti-fall 1.9s ease-in forwards; }

html[dir="rtl"] .hero-copy { text-align:right; }.hero-copy { text-align:left; } html[dir="rtl"] .hero h1 span { transform-origin:right; } html[dir="rtl"] .hero-stage { border-inline-start:0; border-inline-end:3px solid var(--ink); } html[dir="rtl"] .hero-card { transform:rotate(7deg); } html[dir="rtl"] .category { text-align:right; } html[dir="rtl"] .drawer .cart-panel { transform:translateX(-110%); inset-inline-start:0; inset-inline-end:auto; border-inline-start:0; border-inline-end:3px solid var(--ink); } html[dir="rtl"] .drawer.open .cart-panel { transform:translateX(0); }

@keyframes arrival { from { opacity:0; transform:translateY(18px) scale(.97); } to { opacity:1; transform:translateY(0) scale(1); } }
@keyframes float { 0%,100% { transform:translateY(0) rotate(0); } 50% { transform:translateY(-16px) rotate(9deg); } }
@keyframes spin-float { 0%,100% { transform:translateY(0) rotate(12deg); } 50% { transform:translateY(-20px) rotate(39deg); } }
@keyframes bounce-x { 0%,100% { transform:translateX(0) rotate(-4deg); } 50% { transform:translateX(-24px) rotate(5deg); } }
@keyframes card-bob { 0%,100% { transform:rotate(-7deg) translateY(0); } 50% { transform:rotate(-7deg) translateY(-16px); } }
@keyframes truck-drive { 0%,100% { transform:translateX(-3px); } 50% { transform:translateX(6px); } }
@keyframes mascot-bounce { 0%,100% { transform:translateY(0) rotate(-7deg); } 45% { transform:translateY(-12px) rotate(8deg); } 55% { transform:translateY(-12px) rotate(8deg); } }
@keyframes modal-in { from { opacity:0; transform:translateY(18px) scale(.95); } to { opacity:1; transform:translateY(0) scale(1); } }
@keyframes confetti-fall { to { transform:translateY(110vh) rotate(600deg); opacity:0; } }

@media (max-width:1050px) { .hero { grid-template-columns:1fr; }.hero-stage { min-height:350px; border-inline-start:0; border-top:3px solid var(--ink); }.category-grid { grid-template-columns:repeat(2,1fr); }.products { grid-template-columns:repeat(2,1fr); }.product-layout { grid-template-columns:1fr; }.filter-panel { position:relative; top:auto; display:flex; gap:20px; }.filter-group { flex:1; margin:0; padding-top:0; border:0; }.filter-panel h3 { display:none; }.bundle { grid-template-columns:1fr; }.bundle-shapes { position:absolute; inset:0; opacity:.65; }.bundle-copy { max-width:630px; } }
@media (max-width:700px) { .main,.header-inner { width:min(100% - 24px,1440px); }.header-inner { height:68px; }.brand { font-size:28px; }.desktop-nav,.language-label { display:none; }.site-header { position:relative; }.hero { min-height:0; border-radius:13px; box-shadow:7px 9px 0 var(--red); }.hero-copy { padding:54px 25px 47px; }.hero h1 { font-size:55px; }.hero p:not(.eyebrow) { font-size:15px; }.hero-stage { min-height:270px; }.shape.ring { width:115px; height:115px; top:28px; inset-inline-end:20px; border-width:19px; }.shape.cube { width:103px; height:103px; top:110px; }.shape.zigzag { width:145px; bottom:39px; }.hero-card { width:195px; bottom:34px; inset-inline-start:24%; padding:16px; }.hero-card strong { font-size:19px; }.shipping-bar { margin:12px 0; font-size:11px; }.section { padding-top:66px; }.section-heading { align-items:start; flex-direction:column; gap:11px; margin-bottom:19px; }.section-heading h2 { font-size:38px; }.section-heading p { font-size:14px; }.category-grid { gap:12px; }.category { min-height:170px; padding:16px; }.category strong { margin-top:24px; font-size:19px; }.category small { font-size:11px; }.category svg { width:34px; height:34px; }.filter-panel { padding:16px; display:block; }.filter-group { margin-top:13px; padding-top:13px; border-top:1px solid var(--line); }.filter-group:first-of-type { margin-top:0; padding-top:0; border:0; }.product-toolbar { flex-direction:column; align-items:stretch; }.search-field { max-width:none; }.sort { width:100%; }.products { grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; }.product-image { height:157px; }.product-image img { padding:5px; }.product-info { padding:12px; }.product-meta { font-size:9px; }.product-name { min-height:35px; font-size:15px; }.product-name-ar { min-height:17px; font-size:10px; }.price { font-size:16px; }.old-price { display:none; }.product-actions { grid-template-columns:1fr; margin-top:10px; }.view-product { display:none; }.add-product { min-height:39px; font-size:12px; }.bundle { min-height:390px; margin-top:65px; padding:42px 25px; box-shadow:8px 9px 0 var(--ink); }.bundle h2 { font-size:46px; }.bundle p:not(.eyebrow) { font-size:14px; }.bundle-shapes::before { width:170px; height:170px; inset-inline-end:-10px; top:40px; }.bundle-shapes::after { width:130px; height:130px; inset-inline-end:9%; }.mascot { width:58px; height:58px; bottom:73px; inset-inline-end:16px; }.mascot::before { font-size:29px; }.mobile-nav { height:66px; position:fixed; z-index:35; bottom:0; inset-inline:0; display:grid; grid-template-columns:repeat(4,1fr); background:#fffdf5; border-top:2px solid var(--ink); }.mobile-nav button { border:0; background:transparent; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:3px; color:var(--ink); font-size:10px; font-weight:900; }.mobile-nav svg { width:20px; }.modal-card { padding:21px; }.modal-product { grid-template-columns:1fr; }.modal-product .product-image { min-height:215px; }.modal-product h2 { font-size:28px; }.toast { bottom:85px; width:max-content; max-width:calc(100% - 30px); }.cart-panel { width:100%; } }