/* Home page of Owebia (views/home/index.phtml), based on the mockup dev.owebia.com/store-mockup/ */

/* ——— Layout: full width, the page's .wrap elements do the rest ——— */
[data-page="home"] .page-main { max-width: none; padding: 0; }
[data-page="home"] .messages { max-width: var(--wrap); margin: 0 auto; padding-inline: 1.6rem; }
/* Margin only when a message is shown: otherwise, an empty gap between the header and the banner */
[data-page="home"] .messages:has(.message) { margin-top: 1.6rem; }
.store-home a, .store-home a:visited, .store-home a:hover, .promo a, .promo a:visited { color: inherit; }
.store-home ul > li { margin: 0; }
.store-home p { margin: 0; }

/* ——— Top of page: title and filters on the left, banner as a card on the right (above the fold, with the
   start of the first product line) ——— */
.hero { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 52rem); align-items: center; gap: 2.4rem 4rem; padding-block: 2rem .8rem; }
.head { min-width: 0; }
.head h1 { margin: 0; font-size: clamp(2.56rem, 4.2vw, 3.84rem); line-height: 1.15; letter-spacing: -.025em; font-weight: 800; }
.store-home .head > p:not(.eyebrow) { margin: .8rem 0 0; max-width: 76rem; color: var(--muted); }

/* ——— Banner: a random maintained extension, as a card in its color with its illustration ——— */
.promo { position: relative; isolation: isolate; display: flex; align-items: center; min-height: 18.4rem; overflow: hidden; border-radius: calc(var(--r) * 1.4); color: #fff;
  background: linear-gradient(115deg, var(--pd) 0%, var(--pd) 40%, var(--pc) 100%); box-shadow: 0 24px 48px -28px color-mix(in srgb, var(--pc) 70%, transparent); transition: transform .25s, box-shadow .25s; }
.promo:hover { transform: translateY(-2px); box-shadow: 0 28px 56px -26px color-mix(in srgb, var(--pc) 85%, transparent); }
.promo::before { content: ""; position: absolute; inset: 0; z-index: -1; background: radial-gradient(circle at 80% 40%, rgb(255 255 255 / .22), transparent 50%), repeating-linear-gradient(-35deg, transparent 0 22px, rgb(255 255 255 / .04) 22px 23px); pointer-events: none; }
.promo-txt { position: relative; z-index: 1; flex: 1; min-width: 0; padding: 2.4rem 0 2.4rem 2.4rem; }
.promo-k { display: inline-flex; align-items: center; gap: .56rem; margin: 0; padding: .16rem .88rem; border-radius: 99px; background: #ffd23f; color: #1a1400; font-size: 1.12rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.promo-k .i { width: 1.44rem; height: 1.44rem; }
.promo-t { margin: .8rem 0 .32rem; font-size: clamp(1.92rem, 2.2vw, 2.4rem); font-weight: 800; letter-spacing: -.02em; line-height: 1.15; }
.promo-t a { text-decoration: none; }
.promo-t a:hover { color: #fff; text-decoration: none; }
.promo-t a::after { content: ""; position: absolute; inset: 0; z-index: 1; }
.promo-d { margin: 0; font-size: 1.36rem; line-height: 1.4; color: rgb(255 255 255 / .9); display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.promo-cta { display: inline-flex; align-items: center; gap: .56rem; margin-top: 1.04rem; font-size: 1.36rem; font-weight: 700; }
.promo-cta .i { width: 1.6rem; height: 1.6rem; transition: transform .2s; }
.promo:hover .promo-cta .i { transform: translateX(4px); }
.promo-art { position: relative; flex: 0 0 40%; align-self: stretch; margin: -.8rem -1.6rem -.8rem 0; transform: rotate(-6deg); filter: drop-shadow(0 10px 18px rgb(0 0 0 / .3));
  /* Illustration palette of the light theme, whatever the theme, on a transparent background (the 10 % white of the old
     illustrations erased doors and shop windows of the new ones, in --art-block) */
  --art-bg: transparent; --art-line: rgb(255 255 255 / .16); --art-block: #e4e6ea; --art-card: #fff; --art-text: #1c1d21; --art-home: #404040;
  --art-frame: #1c1d21; --art-edge: #7b818c; --art-locker: #c4c9d0; --art-device: #50565f; --art-screen: #fff; --art-hole: #3b4049;
  --map-land: #ebe7dd; --map-block: #dcd5c5; --map-street: #fff; --map-park: #cfe3c3; --map-edge: #cbc3b0; }
.promo-art svg { width: 100%; height: 100%; overflow: visible; }
@media (max-width: 63.99rem) {
  .hero { grid-template-columns: minmax(0, 1fr); }
  .promo { min-height: 15.2rem; }
}
/* Upgrades (mobile only): a banner in the colors of the brand, the upgrade icon as illustration */
.promo.is-upg { display: none; --pc: #2a83c4; --pd: #134a72; min-height: 0; }
.promo.is-upg .promo-art { display: grid; place-items: center; transform: rotate(-12deg); color: rgb(255 255 255 / .9); }
.promo.is-upg .promo-art svg { width: 9.6rem; height: 9.6rem; stroke-width: 1.5; }
/* On mobile, home.js places the banner after the first product line (class is-inline) */
@media (max-width: 47.99rem) {
  .hero { padding-top: 1.6rem; }
  .promo.is-inline { margin: 2.4rem 1.6rem .8rem; }
  .promo-art { position: absolute; right: -1.6rem; bottom: 0; width: 14.4rem; height: 12rem; margin: 0; opacity: .55; }
  .promo-txt { padding: 2rem 8rem 2rem 2rem; }
  /* Compact: smaller than the featured banner */
  .promo.is-upg { display: flex; margin: 2.4rem 0 0; border-radius: var(--r); }
  .promo.is-upg .promo-txt { padding: 1.6rem 6.4rem 1.6rem 1.6rem; }
  .promo.is-upg .promo-t { margin: .64rem 0 .24rem; font-size: 1.76rem; }
  .promo.is-upg .promo-d { font-size: 1.28rem; -webkit-line-clamp: 4; }
  .promo.is-upg .promo-cta { margin-top: .8rem; font-size: 1.28rem; }
  .promo.is-upg .promo-art { right: -1.6rem; bottom: -1.6rem; width: 9.6rem; height: 9.6rem; opacity: .35; }
  .promo.is-upg .promo-art svg { width: 8rem; height: 8rem; }
}

/* ——— Reassurance, below the product lines ——— */
.trust { padding-block: 4rem .8rem; }
.trust .reassure { margin-block: 0; }

/* ——— Filters (JS only, no URL): chips of Zeste, edge to edge on mobile, fading at the edges ——— */
.filters { margin: 2rem -1.6rem 0; padding: .32rem 1.6rem; }
.filters[hidden] { display: none; }

/* ——— Product lines: one row each (grid and tiles: tiles.css) ——— */
.range { padding-block: 2.4rem .8rem; }
.range[hidden] { display: none; }
.range-h { display: flex; align-items: center; flex-wrap: wrap; gap: .32rem 1.44rem; margin-bottom: 1.44rem; }
.range-h h2 { margin: 0; font-size: 2rem; font-weight: 700; letter-spacing: -.01em; display: flex; align-items: center; gap: 1.04rem; }
.art-range { width: 4.64rem; height: 4.64rem; flex: none; color: var(--ink); overflow: visible; }
.art-range .art-acc { fill: var(--accent); }
.art-range .art-accs { stroke: var(--accent); }
.range:hover .art-range .art-pin { animation: drop .7s cubic-bezier(.3, 1.5, .5, 1); }
.art-range .art-sway { transform-box: fill-box; transform-origin: 50% 0; }
@keyframes sway { 50% { transform: rotate(8deg); } }
.store-home .range-h p { margin: 0; color: var(--muted); font-size: 1.44rem; }
/* Retired products under the last range: mini tiles on one line (the module asleep, its designation) */
.store-home .retired { display: flex; flex-wrap: wrap; align-items: center; gap: .8rem 1.2rem; margin: 1.6rem 0 0; }
.store-home .retired-h { margin: 0; color: var(--muted); font-size: 1.312rem; }
.store-home .retired-list { display: flex; flex-wrap: wrap; gap: .8rem; margin: 0; padding: 0; list-style: none; }
.store-home .retired-list li { margin: 0; min-width: 0; }
.mini-tile { display: flex; align-items: center; gap: .8rem; max-width: 100%; padding: .4rem 1.12rem .4rem .4rem; border: 1px solid var(--line); border-radius: 99px; background: color-mix(in srgb, var(--c) 6%, var(--surface)); color: var(--ink); font-size: 1.312rem; font-weight: 600; text-decoration: none; transition: border-color .2s, transform .2s; }
.mini-tile:is(:hover, :focus-visible) { border-color: color-mix(in srgb, var(--c) 55%, var(--line)); color: var(--ink); text-decoration: none; transform: translateY(-1px); }
.mini-art { flex: none; display: grid; place-items: center; width: 3.2rem; height: 3.2rem; border-radius: 99px; background: color-mix(in srgb, var(--c) 14%, var(--surface)); overflow: hidden; }
.mini-art .art-retired { width: 2.8rem; height: auto; }
.mini-art .art-retired-z { display: none; }
.mini-t { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mini-tile .i { flex: none; width: 1.44rem; height: 1.44rem; color: var(--muted); transition: translate .2s; }
.mini-tile:is(:hover, :focus-visible) .i { translate: .24rem 0; color: var(--ink); }
/* Animations played by the tiles.js scheduler */
.art-range .art-sway.play { animation: sway 3s ease-in-out; }
.promo-art.play { animation: float 2.5s ease-in-out 2; }

/* Plugins (a module that complements another): a full-row subheading (the group starts a row of its own), then compact cards in two columns,
   image on the left, smaller than the modules they complement. On mobile, all cards are already in a list. */
.plug-h { display: flex; grid-column: 1 / -1; align-items: center; flex-wrap: wrap; gap: .48rem .96rem; margin: .96rem 0 0; color: var(--muted); font-size: 1.44rem; }
.plug-h[hidden] { display: none; }
/* Product line with 2 modules (Advanced Shipping): the plugins below, then, on large screens, in a grid aligned right, at their
   size (2 columns each, two per row), on the last 4 columns of the shared grid (cards of the same width
   as the other product lines); 6 columns are needed, hence 85 rem */
.split .plugs { margin-top: 1.44rem; }
@media (min-width: 85rem) {
  .split { display: grid; grid-template-columns: repeat(auto-fill, minmax(20rem, 1fr)); gap: 1.44rem; align-items: start; }
  .split .main { display: contents; }
  .split .main > li { align-self: stretch; }
  .split .plugs { grid-column: -5 / -1; grid-row: 1; margin-top: 0; grid-template-columns: repeat(4, 1fr); }
  .split .plugs .plug-h { margin-top: 0; }
}
.plug-h .i { width: 1.84rem; height: 1.84rem; color: var(--accent-ink); }
.plug-h b { color: var(--ink); font-size: 1.52rem; }
.plug-h::after { content: ""; flex: 1; min-width: 3.2rem; height: 1px; background: var(--line); }
@media (min-width: 48rem) {
  .is-plugin { grid-column: span 2; }
  .is-plugin .tile { flex-direction: row; }
  .is-plugin .tile .media { flex: 0 0 15.2rem; aspect-ratio: auto; }
}

/* ——— Print ——— */
@media print {
  .promo, .filters { display: none !important; }
  .reassure a { box-shadow: none; background: #fff !important; }
}

/* « Missing a network? » below the O'Pickup product line: link to the contact page, message prefilled */
.ask-net { display: flex; align-items: center; gap: 1.2rem 1.6rem; margin-top: 1.6rem; padding: 1.28rem 1.6rem; border: 1px dashed color-mix(in srgb, var(--accent) 55%, var(--line)); border-radius: var(--r); background: color-mix(in srgb, var(--accent) 4%, transparent); }
.ask-net-ico { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 4rem; height: 4rem; border-radius: 1.12rem; background: color-mix(in srgb, var(--accent) 16%, var(--surface)); color: var(--accent-ink); transform: rotate(-6deg); }
.ask-net-ico svg { width: 2.08rem; height: 2.08rem; }
.ask-net p { flex: 1; min-width: 0; margin: 0; color: var(--muted); font-size: 1.44rem; }
.ask-net p strong { color: var(--ink); }
.store-home .ask-net-cta, .store-home .ask-net-cta:visited { flex: none; display: inline-flex; align-items: center; gap: .56rem; padding: .72rem 1.44rem; border: 1.5px solid var(--accent); border-radius: 99px; color: var(--accent-ink); font-size: 1.36rem; font-weight: 700; text-decoration: none; }
.store-home .ask-net-cta:hover, .store-home .ask-net-cta:focus-visible { background: var(--accent); color: var(--on-accent); text-decoration: none; }
.ask-net-cta .i { display: inline-flex; width: 1.6rem; height: 1.6rem; }
.ask-net-cta svg { width: 100%; height: 100%; }
@media (max-width: 47.99rem) { .ask-net { flex-wrap: wrap; } .ask-net p { flex-basis: calc(100% - 5.6rem); } .ask-net-cta { margin-left: 5.6rem; } }
@media print { .ask-net { display: none; } }

/* Hint of the best upgrade, at the top of the home, for a signed-in customer with a range to complete */
.upg-hint { display: flex; align-items: center; gap: 1.6rem 2rem; margin: 1.6rem 0 0; padding: 1.44rem 1.92rem; border: 1px solid var(--accent); border-radius: var(--r);
  background: color-mix(in srgb, var(--accent) 8%, var(--surface)); box-shadow: 0 0 0 1.5px var(--accent); }
.upg-hint-ico { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 4.8rem; height: 4.8rem; border-radius: 1.28rem; background: var(--accent); color: var(--on-accent); transform: rotate(-6deg); }
.upg-hint-ico svg { width: 2.56rem; height: 2.56rem; }
.upg-hint-txt { flex: 1; min-width: 0; }
.upg-hint-txt p { margin: 0; }
.upg-hint-t { font-size: 1.76rem; font-weight: 700; letter-spacing: -.01em; overflow-wrap: anywhere; }
.upg-hint-d { margin-top: .24rem !important; color: var(--muted); font-size: 1.44rem; }
.upg-hint-d strong { color: var(--accent-ink); }
.store-home .upg-hint-cta, .store-home .upg-hint-cta:visited { flex: none; display: inline-flex; align-items: center; gap: .64rem; min-height: 4.16rem; padding: .64rem 1.92rem; box-sizing: border-box; border-radius: 99px;
  background: var(--accent); color: var(--on-accent); font-size: 1.44rem; font-weight: 700; text-decoration: none; }
.store-home .upg-hint-cta:hover, .store-home .upg-hint-cta:focus-visible { background: color-mix(in srgb, var(--accent) 85%, var(--ink)); color: var(--on-accent); text-decoration: none; }
.upg-hint-cta svg { width: 1.76rem; height: 1.76rem; }
@media (max-width: 47.99rem) {
  .upg-hint { flex-wrap: wrap; padding: 1.28rem 1.44rem; }
  .upg-hint-ico { width: 4rem; height: 4rem; }
  .upg-hint-txt { flex-basis: calc(100% - 6rem); }
  .upg-hint-cta { width: 100%; justify-content: center; }
}
@media print { .upg-hint { display: none; } }