/* Four original bags, kept upright and fully inside the card in every language. */
.bundle-pack-scene.bundle-pack--4 { container-type:size; direction:ltr; }
.bundle-pack--4 .bundle-pack,
html[dir="rtl"] .bundle-pack--4 .bundle-pack {
 width:min(106px,calc((100cqh - 36px) * .686),calc((100cqw - 24px) / 2.45));
 height:auto; aspect-ratio:345 / 503; bottom:18px; background-size:contain;
}
.bundle-pack--4 .bundle-pack:nth-child(1){transform:translateX(-122%);z-index:1;}
.bundle-pack--4 .bundle-pack:nth-child(2){transform:translateX(-74%);z-index:2;}
.bundle-pack--4 .bundle-pack:nth-child(3){transform:translateX(-26%);z-index:3;}
.bundle-pack--4 .bundle-pack:nth-child(4){transform:translateX(22%);z-index:4;}

/* A shared visual rhythm for all three offers. */
#bundles .bundle-card {
 padding:22px; border:1px solid rgba(194,164,108,.25); border-radius:24px;
 background:linear-gradient(160deg,#201e19,#181713);
 box-shadow:0 12px 28px rgba(0,0,0,.12);
}
#bundles .bundle-media { background:transparent; margin-bottom:20px; }
#bundles .bundle-info { gap:8px; }
#bundles .bundle-info {
 display:grid; grid-template-rows:minmax(80px,auto) 24px 66px; gap:6px;
 font-family:"Avenir Next","Helvetica Neue","PingFang SC","Microsoft YaHei",sans-serif;
}
#bundles .bundle-info .bundle-packline {
 grid-row:1; order:initial; align-self:center; margin:0;
 font-family:inherit; font-size:30px; line-height:1.32; font-weight:600;
 letter-spacing:1px; color:#ead9b5; text-wrap:balance;
}
#bundles .bundle-info .bundle-name {
 grid-row:2; margin:0; font-family:inherit; font-size:13px;
 line-height:24px; font-weight:400; letter-spacing:2px; color:#b7ae9d;
}
#bundles .bundle-prices {
 margin-top:12px; padding-top:18px; gap:8px;
 border-top:1px solid rgba(194,164,108,.18); align-items:baseline;
}
#bundles .bundle-prices { grid-row:3; }
#bundles .bundle-current {
 font-family:"Avenir Next","Helvetica Neue",Arial,sans-serif;
 font-size:30px; font-weight:600; letter-spacing:-.5px;
 font-variant-numeric:tabular-nums;
}
#bundles .bundle-current small { font-size:11px; font-weight:500; letter-spacing:.6px; }
#bundles .bundle-original { font-size:12px; color:#a39b8d; }
#bundles .bundle-discount { font-size:11px; font-weight:500; color:#cfb780; }
#bundles .bundle-cta {
 min-height:48px; margin-top:22px; border-radius:14px;
 background:#c7ac76; color:#201c14; font-size:14px; font-weight:600;
 letter-spacing:.8px; box-shadow:none;
}
#bundles .bundle-cta:hover { background:#d5bc89; }
@media(max-width:360px) {
 #bundles .bundle-card {padding:18px;}
 #bundles .bundle-info .bundle-packline {font-size:27px;}
}

/* Language-specific typography, with identical hierarchy and spacing. */
html[lang="en"] #bundles .bundle-packline {font-size:28px;letter-spacing:-.4px;}
html[lang="ar"] #bundles .bundle-info {font-family:inherit;}
html[lang="ar"] #bundles .bundle-packline {font-size:28px;line-height:1.4;letter-spacing:0;}
html[lang="ar"] #bundles .bundle-name,
html[lang="ar"] #bundles .bundle-cta {letter-spacing:0;}
@media(max-width:360px) {
 html[lang="en"] #bundles .bundle-info .bundle-packline,
 html[lang="ar"] #bundles .bundle-info .bundle-packline {font-size:25px;}
}

/* Override legacy desktop sizing so every breakpoint keeps the same hierarchy. */
@media(min-width:769px) {
 #bundles .bundle-info {padding:0!important;}
 #bundles .bundle-info .bundle-packline {font-size:30px!important;line-height:1.32!important;}
 html[lang="en"] #bundles .bundle-info .bundle-packline,
 html[lang="ar"] #bundles .bundle-info .bundle-packline {font-size:28px!important;line-height:1.4!important;}
 #bundles .bundle-info .bundle-name {font-size:13px!important;line-height:24px!important;margin:0!important;}
 #bundles .bundle-prices {margin:12px 0 0!important;align-items:baseline!important;gap:8px!important;}
 #bundles .bundle-current {font-size:30px!important;line-height:1!important;}
 #bundles .bundle-current small {font-size:11px!important;}
 #bundles .bundle-original {font-size:12px!important;}
 #bundles .bundle-discount {padding:0!important;}
 #bundles .bundle-cta {margin-top:22px!important;min-height:48px!important;}
}

@media(min-width:769px) and (max-width:1099px) {
 #bundles .bundle-info {grid-template-rows:minmax(96px,auto) 24px 80px;}
 #bundles .bundle-info .bundle-packline,
 html[lang="en"] #bundles .bundle-info .bundle-packline,
 html[lang="ar"] #bundles .bundle-info .bundle-packline {font-size:22px!important;}
}