/* ANDALUS_PAGE_FRAME_V1 (أ. محمد 4 Nov 04:25 «الحاسبة والباقات والمراتب والكنبة السرير دي كلها صفحات مش ماشية على النمط بتاع
   الباقيين فلما بننقل بينهم وبين غيرهم اثناء فتح القايمة الجانبية يبان الشكل مش مظبوط»):
   one frame for the pages that are not built by includes/catalog-page.php — /24/ (the calculator), /packages/ (+ every package),
   /mattresses/ and /sofa_bed/ — so a tap from the rail never changes the canvas, the hero's place or the title size:
   - the canvas = the sections' canvas (.an-cat in andalus-neutral-v14.css), not a beige/peach/white one of the page's own;
   - the hero sits in the sections' white card (.an-cat-hero__box: white, 1px #ded9d4, 30px corners, the v14 shadow, 34px inside,
     the thin top line), 34px under the bank strip, as wide as the sections' content column;
   - the title at the sections' size (clamp(2rem,4vw,3.8rem), 2.15rem on phones).
   Linked last in the <head> of those pages only (same values as ANDALUS_STAINLESS_SAME_FRAME_V1 / _HERO_BOX_V1). No @import. */

/* 1) the canvas */
html body.ofr-page{background:transparent!important}
html body main#main-content:is(.mt,.sbx),
html body.ofr-page main#main-content,
html body main#main-content:has(> #top.hero){background:linear-gradient(180deg,#faf9f7,#fff 42%,#f7f5f2)!important}
html body main#main-content > #top.hero{background:transparent!important}

/* 2) the hero section: the sections' spacing */
html body main#main-content > :is(.mt-hero,.sbx-hero,#top.hero),
html body.ofr-page .ofr-hero{padding:34px 0 22px!important;border-bottom:0!important}

/* 3) the white card */
html body :is(.mt-hero > .mt-wrap,.sbx-hero > .sbx-wrap,#main-content > #top.hero > .wrap.heroGrid),
html body.ofr-page .ofr-hero > .ofr-wrap > .ofr-hero__box:not(:has(> .ofr-hero__top)),
html body.ofr-page .ofr-hero__top{
  position:relative!important;overflow:hidden;box-sizing:border-box!important;
  background:#fff!important;border:1px solid var(--an-v14-line,#ded9d4)!important;border-radius:30px!important;
  box-shadow:var(--an-v14-shadow,0 16px 36px rgba(23,21,28,.1))!important;padding:34px!important}
html body :is(.mt-hero > .mt-wrap,.sbx-hero > .sbx-wrap,#main-content > #top.hero > .wrap.heroGrid)::before,
html body.ofr-page .ofr-hero > .ofr-wrap > .ofr-hero__box:not(:has(> .ofr-hero__top))::before,
html body.ofr-page .ofr-hero__top::before{
  content:"";position:absolute;inset:0 0 auto;height:3px;z-index:1;pointer-events:none;
  background:var(--an-accent-gradient,linear-gradient(90deg,#b8afa6,#81786f))}
/* the card's width = the sections' content column (the offers page has its own 1180px frame) */
html body :is(.mt-hero > .mt-wrap,.sbx-hero > .sbx-wrap,#main-content > #top.hero > .wrap.heroGrid),
html body.ofr-page .ofr-hero > .ofr-wrap{width:min(1500px,calc(100% - 32px))!important;max-width:none!important;margin-inline:auto!important}
@media (min-width:1025px){
  html body :is(.mt-hero > .mt-wrap,.sbx-hero > .sbx-wrap,#main-content > #top.hero > .wrap.heroGrid),
  html body.ofr-page .ofr-hero > .ofr-wrap{width:min(var(--an-fullwidth,94%),var(--an-content-max,1480px))!important}
  html body.ofr-page .ofr-hero > .ofr-wrap > .ofr-hero__box:not(:has(> .ofr-hero__top)),
html body.ofr-page .ofr-hero__top{width:100%!important}
}

/* 4) the title */
html body main#main-content > :is(.mt-hero,.sbx-hero,#top.hero) h1,
html body.ofr-page .ofr-hero h1{font-size:clamp(2rem,4vw,3.8rem)!important;line-height:1.15!important}

@media (max-width:850px){
  html body :is(.mt-hero > .mt-wrap,.sbx-hero > .sbx-wrap,#main-content > #top.hero > .wrap.heroGrid),
  html body.ofr-page .ofr-hero > .ofr-wrap{width:calc(100% - 20px)!important}
  html body :is(.mt-hero > .mt-wrap,.sbx-hero > .sbx-wrap,#main-content > #top.hero > .wrap.heroGrid),
  html body.ofr-page .ofr-hero > .ofr-wrap > .ofr-hero__box:not(:has(> .ofr-hero__top)),
html body.ofr-page .ofr-hero__top{padding:23px!important}
}
@media (max-width:570px){
  html body main#main-content > :is(.mt-hero,.sbx-hero,#top.hero),
  html body.ofr-page .ofr-hero{padding-top:16px!important}
  html body :is(.mt-hero > .mt-wrap,.sbx-hero > .sbx-wrap,#main-content > #top.hero > .wrap.heroGrid),
  html body.ofr-page .ofr-hero > .ofr-wrap > .ofr-hero__box:not(:has(> .ofr-hero__top)),
html body.ofr-page .ofr-hero__top{border-radius:22px!important;padding:20px 16px!important}
  html body main#main-content > :is(.mt-hero,.sbx-hero,#top.hero) h1,
  html body.ofr-page .ofr-hero h1{font-size:2.15rem!important}
}

/* ANDALUS_PACKAGES_HERO_V1 (4 Nov 04:42 «صفحة الباقة الرئيسية لسا فيها مشكلة في اول واجهة ليها»): /packages/ first screen = the
   section pages' hero — the white card holds the title, the line and the three facts beside the showroom photos (an_hero_photos
   'offers'); the package list sits under the card on the canvas, not inside one long card. */
html body.ofr-page .ofr-hero > .ofr-wrap > .ofr-hero__box:has(> .ofr-hero__top){background:transparent!important;border:0!important;
  border-radius:0!important;box-shadow:none!important;padding:0!important;overflow:visible!important}
html body.ofr-page .ofr-hero > .ofr-wrap > .ofr-hero__box:has(> .ofr-hero__top)::before{content:none!important}
html body.ofr-page .ofr-hero__top{display:grid;gap:clamp(22px,3vw,44px);align-items:center;margin:0 0 28px}
html body.ofr-page .ofr-hero__text,html body.ofr-page .ofr-hero__photos{min-width:0}
html body.ofr-page .ofr-hero__top .ofr-trust{margin-bottom:0!important}
@media (min-width:900px){
  html body.ofr-page .ofr-hero__top.has-photos{grid-template-columns:minmax(0,1.04fr) minmax(0,.96fr)}
  html body.ofr-page .ofr-hero__top.has-photos .ofr-trust{grid-template-columns:1fr!important}
}