/* ORAN Store Premium – TEST r9, reference-matched home composition.
   Does not set #header logo size or replace any checkout/account template.
   Static styling only. Existing Classic/ORAN Store and footer CSS remain active. */
#index .oran-r9-home{width:100%;padding:0 0 12px}
#index .oran-r9-home *,#header .oran-r9-nav *{box-sizing:border-box}
#index .oran-r9-home h1,#index .oran-r9-home h2,#index .oran-r9-home h3{margin:0;text-transform:none}
#index .oran-r9-home h1,#index .oran-r9-home h2{font-family:Arial,"Segoe UI",sans-serif}
#index .oran-r9-home a{text-decoration:none}
#index .oran-r9-home a:focus-visible,#header .oran-r9-nav a:focus-visible{outline:3px solid #8d12e9;outline-offset:3px}
#index .oran-r9-home img{max-width:100%}

/* New global navigation is additive: preserve existing logo hooks, search/cart and mobile IDs. */
#header .oran-header-top>.container,#header .header-nav.oran-utility>.container{max-width:1370px;width:calc(100% - 40px);padding-left:0;padding-right:0}
#header .oran-r9-nav{display:flex;align-items:center;justify-content:space-between;gap:10px;min-width:0;margin:0;padding:5px 4px 8px;min-height:48px;overflow-x:auto;white-space:nowrap;scrollbar-width:thin;border-top:1px solid #f0f2f7}
#header .oran-r9-nav a{display:inline-flex;align-items:center;gap:7px;flex:none;color:#132d63;font-family:Arial,"Segoe UI",sans-serif;font-size:12px;font-weight:600;line-height:1.25;padding:7px 8px;border-radius:9px;transition:background .2s,color .2s}
#header .oran-r9-nav a:hover{background:#f3f5fc;color:#9c19db}
#header .oran-r9-nav .oran-r9-nav-first{background:#f7f8fd}
#header .oran-r9-nav .oran-r9-nav-promos{background:#fff0f8;color:#df177e;font-weight:700}
#header .oran-r9-nav .oran-r9-nav-promos:hover{background:#ffe4f2}

/* Hero: original look approximated with separate left text and photographic center. */
#index .oran-r9-hero{display:grid;grid-template-columns:minmax(0,31%) minmax(0,49%) minmax(0,20%);height:296px;min-height:296px;overflow:hidden;position:relative;margin:0 0 16px;border-radius:17px;background:linear-gradient(120deg,#fff3fa 0%,#fbf6ff 55%,#f5efff 100%);border:1px solid #f3e9f2;box-shadow:0 3px 18px rgba(26,42,76,.035)}
#index .oran-r9-hero-copy{position:relative;z-index:2;min-width:0;display:flex;flex-direction:column;align-items:flex-start;justify-content:center;padding:24px 8px 25px clamp(22px,4vw,72px);background:radial-gradient(circle at -18% 110%,rgba(254,197,228,.25),transparent 48%)}
#index .oran-r9-hero-copy h1{font-family:Arial,"Segoe UI",sans-serif;font-size:clamp(35px,3vw,44px);letter-spacing:-1.9px;line-height:1.08;font-weight:900;color:#122b60;white-space:normal;margin:0 0 13px;max-width:100%}
#index .oran-r9-hero-copy h1 em{display:block;font-weight:900;color:#122b60;font-style:italic}
#index .oran-r9-hero-copy h1 span{display:block;white-space:nowrap;color:#fd328e;background:linear-gradient(95deg,#e42f9d 3%,#ff751e 37%,#1268ef 90%);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
#index .oran-r9-hero-copy p{font-size:14.5px;line-height:1.5;max-width:360px;color:#112a60;margin:0 0 16px}
#index .oran-r9-hero-copy p strong{color:#f16313;font-weight:800}
#index .oran-r9-hero-button{display:inline-flex;align-items:center;justify-content:space-between;gap:15px;min-width:207px;border-radius:28px;background:linear-gradient(96deg,#ff4294,#fa2387);padding:13px 24px;font-weight:800;font-family:Arial,sans-serif;font-size:14px;color:#fff!important;box-shadow:0 9px 18px rgba(233,36,123,.11)}
#index .oran-r9-hero-button:hover{filter:brightness(1.04)}
#index .oran-r9-hero-visual{position:relative;min-width:0;background-image:url('../img/oran-r9-hero.webp');background-repeat:no-repeat;background-size:cover;background-position:center center;isolation:isolate}
#index .oran-r9-hero-visual:before{content:"";pointer-events:none;position:absolute;inset:0;background:linear-gradient(90deg,rgba(255,244,250,.37),transparent 13%,transparent 100%)}
#index .oran-r9-dots{position:absolute;display:flex;align-items:center;justify-content:center;gap:9px;bottom:9px;left:50%;transform:translateX(-50%);pointer-events:none}
#index .oran-r9-dots i{display:block;width:9px;height:9px;border-radius:50%;background:#cdd4e4}
#index .oran-r9-dots i:first-child{background:#f57716}
#index .oran-r9-hero-benefits{display:flex;flex-direction:column;align-items:stretch;justify-content:space-evenly;min-width:0;padding:9px 10px 9px 15px;background:linear-gradient(90deg,#fcf9ff,#f9f6ff)}
#index .oran-r9-hero-benefit{display:flex;align-items:center;gap:12px;min-width:0;color:#122c61}
#index .oran-r9-hero-benefit strong{font-family:Arial,sans-serif;white-space:normal;font-size:12.5px;line-height:1.25;font-weight:700}
#index .oran-r9-circle{width:49px;height:49px;flex:0 0 49px;display:flex;align-items:center;justify-content:center;border-radius:50%;background:#e9f8ef;color:#139847}
#index .oran-r9-circle svg{width:27px;height:27px;display:block}
#index .oran-r9-hero-benefit.blue .oran-r9-circle{background:#e7f1ff;color:#1975dd}
#index .oran-r9-hero-benefit.purple .oran-r9-circle{background:#f1e9ff;color:#8928dc}
#index .oran-r9-hero-benefit.orange .oran-r9-circle{background:#ffedeb;color:#ff5235}

/* Reasons row – exactly four badges, aligned to reference. */
#index .oran-r9-why{display:grid;grid-template-columns:minmax(0,39%) minmax(0,61%);gap:0;min-height:196px;margin:0 0 13px;padding:19px 20px 17px 38px;align-items:center;border:1px solid #f0eaf4;border-radius:17px;background:linear-gradient(112deg,#fdf8fe,#f6fbff 57%,#fbf4fc);box-shadow:0 3px 16px rgba(25,43,74,.025)}
#index .oran-r9-why-intro{min-width:0}
#index .oran-r9-why-intro h2{font-family:Arial,"Segoe UI",sans-serif;font-size:clamp(30px,2.7vw,40px);letter-spacing:-1.6px;line-height:1.09;font-weight:900;color:#132e61;margin:0 0 15px;white-space:nowrap}
#index .oran-r9-why-intro h2 .orange{color:#f16311}
#index .oran-r9-why-intro h2 .blue{color:#1266e2}
#index .oran-r9-why-intro p{font-size:17px;line-height:1.43;color:#1d3767;max-width:470px;margin:0}
#index .oran-r9-why-items{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));height:100%;align-items:center}
#index .oran-r9-why-item{min-width:0;position:relative;padding:5px 9px;display:flex;flex-direction:column;align-items:center;text-align:center;justify-content:center;gap:6px}
#index .oran-r9-why-item+.oran-r9-why-item:before{content:"";position:absolute;left:0;top:12%;bottom:12%;width:1px;background:#e2e5ef}
#index .oran-r9-why-icon{display:flex;align-items:center;justify-content:center;width:70px;height:70px;border-radius:50%;background:#ffe7f3;color:#e82b8a;margin-bottom:4px}
#index .oran-r9-why-icon svg{width:34px;height:34px}
#index .oran-r9-why-item.blue .oran-r9-why-icon{background:#e6f2ff;color:#1576eb}
#index .oran-r9-why-item.purple .oran-r9-why-icon{background:#efe4fc;color:#8f20da}
#index .oran-r9-why-item.orange .oran-r9-why-icon{background:#ffecdf;color:#f66914}
#index .oran-r9-why-item strong{font-size:14.5px;line-height:1.12;font-family:Arial,sans-serif;font-weight:800;color:#0f2b63}
#index .oran-r9-why-item small{font-size:12px;line-height:1.24;color:#476184}

/* Feature cards – self-contained photographic images; no cover zoom or title overlays. */
#index .oran-r9-cards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;margin:0 0 15px}
#index .oran-r9-card{height:290px;position:relative;isolation:isolate;overflow:hidden;border-radius:15px;min-width:0;border:1px solid #eeeaf1;box-shadow:0 4px 15px rgba(25,43,74,.045);background:linear-gradient(120deg,#fff3f8,#ffebf5)}
#index .oran-r9-card.oran-r9-delivery{background:linear-gradient(120deg,#eff7ff,#e8f5ff)}
#index .oran-r9-card.oran-r9-shopping{background:linear-gradient(120deg,#f8f0ff,#f9f0ff)}
#index .oran-r9-card-photo{position:absolute;top:auto;right:0;bottom:0;width:49%;height:100%;max-width:none;object-fit:contain;object-position:right bottom;z-index:1;pointer-events:none}
#index .oran-r9-card-copy{position:relative;z-index:2;display:flex;align-items:flex-start;flex-direction:column;min-height:100%;width:58%;padding:22px 8px 19px 27px}
#index .oran-r9-tag{display:inline-flex;align-items:center;padding:6px 10px;white-space:nowrap;border-radius:20px;background:#ffe3f0;font-size:11px;letter-spacing:.12px;font-weight:700;color:#ee207e;margin:0 0 15px}
#index .oran-r9-delivery .oran-r9-tag{background:#deebff;color:#166cda}
#index .oran-r9-shopping .oran-r9-tag{background:#eee0ff;color:#9021de}
#index .oran-r9-card h3{font-family:Georgia,"Times New Roman",serif;font-weight:700;font-size:clamp(25px,2vw,28px);line-height:1.02;color:#122b60;margin:0 0 11px;letter-spacing:-.4px}
#index .oran-r9-card p{font-family:Arial,"Segoe UI",sans-serif;font-size:14.5px;line-height:1.3;color:#173668;margin:0 0 12px}
#index .oran-r9-card-button{margin-top:auto;min-width:166px;display:inline-flex;align-items:center;justify-content:space-between;gap:14px;border-radius:27px;padding:12px 19px;color:#fff!important;font-size:13px;font-family:Arial,sans-serif;line-height:1.2;font-weight:800;white-space:nowrap;background:#ee2c8d;box-shadow:0 8px 17px rgba(225,26,137,.13)}
#index .oran-r9-card-button.pink{background:linear-gradient(97deg,#ff4293,#fa2782)}
#index .oran-r9-card-button.blue{background:linear-gradient(97deg,#1d76ec,#086bf5)}
#index .oran-r9-card-button.purple{background:linear-gradient(97deg,#983bff,#b62bec)}
#index .oran-r9-card-button:hover{filter:brightness(1.09)}

/* Five-point factual reassurance row: no unverified 1000 TL shipping claim. */
#index .oran-r9-info-strip{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));align-items:stretch;min-height:69px;margin:0 0 18px;background:#fff;border:1px solid #f0f1f5;border-radius:13px;overflow:hidden}
#index .oran-r9-info-strip>span{position:relative;display:flex;align-items:center;justify-content:center;gap:10px;min-width:0;padding:9px 10px;font-family:Arial,sans-serif;color:#143162}
#index .oran-r9-info-strip>span+span:before{content:"";position:absolute;left:0;top:20%;bottom:20%;width:1px;background:#e9ecf2}
#index .oran-r9-info-strip svg{width:27px;height:27px;flex:0 0 27px;color:#274b99}
#index .oran-r9-info-copy{min-width:0;display:flex;flex-direction:column;gap:3px}
#index .oran-r9-info-copy b{font-size:12px;font-weight:700;line-height:1.2}
#index .oran-r9-info-copy small{font-size:10px;line-height:1.2;color:#617391}

/* Maintain original catalog grids and their .webp assets, never modify products or prices. */
#index #oran-category-grid{scroll-margin-top:14px}
#index .oran-r9-home>.oran-category-grid{margin-top:0}

/* Make newsletter use the available container width without changing its forms or consent hooks. */
#footer .block_newsletter{flex:0 0 100%;max-width:100%;width:100%}

@media(max-width:1350px){
  #index .oran-r9-hero-copy{padding-left:28px}
  #index .oran-r9-hero-copy h1{font-size:clamp(33px,3vw,42px)}
  #index .oran-r9-why-intro h2{font-size:clamp(29px,2.7vw,36px)}
  #index .oran-r9-why-intro p{font-size:15px}
  #index .oran-r9-card-copy{width:62%;padding-left:19px}
  #index .oran-r9-card h3{font-size:25px}
  #index .oran-r9-card p{font-size:13px}
  #index .oran-r9-card-button{min-width:145px;font-size:12px;padding:12px 14px}
  #header .oran-r9-nav a{font-size:11px;padding:7px 5px}
}
@media(max-width:1100px){
  #index .oran-r9-hero{grid-template-columns:minmax(0,32%) minmax(0,44%) minmax(0,24%)}
  #index .oran-r9-hero-copy h1{font-size:clamp(30px,3.5vw,36px)}
  #index .oran-r9-hero-copy p{font-size:12.5px}
  #index .oran-r9-hero-button{min-width:155px;padding:11px 16px;font-size:12px}
  #index .oran-r9-why{grid-template-columns:1fr;gap:12px}
  #index .oran-r9-why-intro h2{font-size:36px}
  #index .oran-r9-why-items{min-height:145px}
  #index .oran-r9-cards{grid-template-columns:repeat(2,minmax(0,1fr))}
  #index .oran-r9-card.oran-r9-shopping{grid-column:1/-1;max-width:none}
  #index .oran-r9-card.oran-r9-shopping .oran-r9-card-copy{width:48%}
  #index .oran-r9-card.oran-r9-shopping .oran-r9-card-photo{width:36%}
  #index .oran-r9-info-strip{grid-template-columns:repeat(3,minmax(0,1fr))}
}
@media(max-width:767px){
  #header .oran-header-top>.container,#header .header-nav.oran-utility>.container{width:calc(100% - 24px)}
  #header .oran-r9-nav{display:none!important}
  #index .oran-r9-hero{height:auto;min-height:0;grid-template-columns:1fr}
  #index .oran-r9-hero-copy{padding:25px 23px 17px}
  #index .oran-r9-hero-copy h1{font-size:clamp(33px,8vw,42px)}
  #index .oran-r9-hero-copy p{font-size:13.5px}
  #index .oran-r9-hero-visual{min-height:205px;order:2;background-position:center 39%}
  #index .oran-r9-hero-benefits{order:3;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:7px;padding:12px 16px}
  #index .oran-r9-hero-benefit strong{font-size:11px}
  #index .oran-r9-circle{width:42px;height:42px;flex:0 0 42px}
  #index .oran-r9-circle svg{width:24px;height:24px}
  #index .oran-r9-why{padding:22px 14px;grid-template-columns:1fr}
  #index .oran-r9-why-intro{padding:0 7px}
  #index .oran-r9-why-intro h2{font-size:clamp(29px,7vw,36px);white-space:normal}
  #index .oran-r9-why-intro p{font-size:14px}
  #index .oran-r9-why-items{grid-template-columns:repeat(2,minmax(0,1fr));gap:15px 0}
  #index .oran-r9-why-item:nth-child(3):before{display:none}
  #index .oran-r9-why-icon{width:58px;height:58px}
  #index .oran-r9-why-icon svg{width:27px;height:27px}
  #index .oran-r9-cards{grid-template-columns:1fr;gap:12px}
  #index .oran-r9-card.oran-r9-shopping{grid-column:auto}
  #index .oran-r9-card{height:258px;min-height:258px}
  #index .oran-r9-card-copy,#index .oran-r9-card.oran-r9-shopping .oran-r9-card-copy{width:64%;padding:19px 9px 18px 18px}
  #index .oran-r9-card-photo,#index .oran-r9-card.oran-r9-shopping .oran-r9-card-photo{width:42%}
  #index .oran-r9-card h3{font-size:25px}
  #index .oran-r9-card p{font-size:13px}
  #index .oran-r9-info-strip{grid-template-columns:1fr;gap:0}
  #index .oran-r9-info-strip>span{justify-content:flex-start;gap:16px;padding:10px 20px}
  #index .oran-r9-info-strip>span+span:before{top:0;bottom:auto;left:8%;right:8%;height:1px;width:auto}
  #index .oran-r9-info-copy b{font-size:12px}
  #index .oran-r9-info-copy small{font-size:10px}
  #footer .block_newsletter{width:100%;max-width:100%}
}
@media(max-width:380px){
  #index .oran-r9-hero-copy h1{font-size:31px;letter-spacing:-1.8px}
  #index .oran-r9-card h3{font-size:22px}
  #index .oran-r9-card-button{padding:11px 12px;min-width:135px;font-size:11px}
  #index .oran-r9-card-copy{width:67%}
}
@media(prefers-reduced-motion:reduce){#header .oran-r9-nav a{transition:none}}

/* R9 safety: avoid duplicating an installed ps_mainmenu in displayTop;
   only the new visual category row is displayed on desktop.
   On mobile the original Classic menu hook remains in use. */
@media(min-width:768px){
  #header .oran-header-top #_desktop_top_menu{display:none!important}
  #header .oran-header-top .oran-header-grid{grid-template-rows:150px 0!important;row-gap:0!important}
}
@media(max-width:767px){
  #header .oran-header-top #_desktop_top_menu{display:none!important}
}

@media(min-width:768px) and (max-width:1100px){
  #header .oran-header-top .oran-header-grid{grid-template-rows:126px 0!important}
}