/* owebia.com: a dark header (its grid, the large logo, a monospace font) whatever the theme, then compact rows,
   light or dark as the device. The colors of the logo come from the store; the rest is the site's own. Phone first.
   Contrasts (WCAG 2.2): texts at least AA (4.5:1) in both themes, outlines of the pills at least 3:1; the colors of the
   modules only mark their rows (decorative). */
:root {
  color-scheme: light dark;
  --bg: light-dark(#fbfaf6, #0f1217); --surface: light-dark(#ffffff, #161a21); --hover: light-dark(#f3f1ea, #1d222b);
  --line: light-dark(#e7e3d8, #262c36); --ink: light-dark(#16181d, #eceef2); --muted: light-dark(#5b616e, #9aa1ad);
  --accent: light-dark(#165b8d, #ffd23f); --link: light-dark(#165b8d, #8cc4ff);
  --hero: #0b0e13; --hero-ink: #eceef2; --hero-muted: #9aa1ad; --yellow: #ffd23f;
  --mono: ui-monospace, "SF Mono", "Cascadia Code", "JetBrains Mono", Menlo, Consolas, monospace;
  --r: .5rem; --wrap: 72rem;
}
*, ::before, ::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--bg); color: var(--ink);
  font: 1rem/1.45 system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; }
a { color: var(--link); text-underline-offset: .15em; }
a:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: .2rem; }
.wrap { max-width: var(--wrap); margin: 0 auto; padding: 0 1rem; }
.icon { flex: none; vertical-align: -.125em; }

/* Header: dark, a dotted grid fading out */
.hero { position: relative; overflow: hidden; background: var(--hero); color: var(--hero-ink); padding-block: .5rem 1.5rem; }
.hero::before { content: ""; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(circle, rgb(255 255 255 / .09) 1px, transparent 1.2px) 0 0 / 1.25rem 1.25rem;
  mask-image: linear-gradient(to bottom, #000 30%, transparent); }
.hero .wrap { position: relative; }
.top { display: flex; justify-content: flex-end; gap: .25rem; }
.top a { display: inline-flex; align-items: center; gap: .4rem; min-height: 2.5rem; padding: 0 .6rem; border-radius: var(--r);
  color: var(--hero-ink); font: 600 .875rem var(--mono); text-decoration: none; }
.top a:hover { background: rgb(255 255 255 / .08); }
.brand { margin: .5rem 0 0; font-weight: 400; }
.logo { display: block; width: min(100%, 22rem); height: auto; }
.logo-w { stroke: var(--yellow); }
.logo-t { fill: var(--hero-ink); }
.tag { display: block; margin-top: .5rem; font: 700 clamp(1.25rem, 5.5vw, 1.75rem)/1.2 var(--mono); letter-spacing: -.01em; }
.prompt { color: var(--yellow); }
.stack { display: flex; flex-wrap: wrap; gap: .375rem; margin: .875rem 0 0; padding: 0; list-style: none; }
.stack li { padding: .125rem .5rem; border: 1px solid rgb(255 255 255 / .16); border-radius: .25rem;
  color: var(--hero-muted); font: .8125rem/1.5 var(--mono); }
.lead { margin: .875rem 0 0; color: var(--hero-muted); }

/* Ranges: side by side when wide, one compact row a module */
.ranges { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 21rem), 1fr)); gap: 1.25rem 1.5rem;
  align-items: start; padding-block: 1.5rem 1.25rem; }
.title { display: flex; align-items: center; gap: .5rem; margin: 1.25rem 0 0; font: 800 1.375rem/1.2 var(--mono); letter-spacing: -.01em; }
.title .icon { color: var(--accent); }
.range h3 { display: flex; align-items: center; gap: .5rem; margin: 0; font: 700 1.0625rem/1.3 var(--mono); }
.range h3 .icon { color: var(--accent); }
.intro { margin: .125rem 0 .625rem; color: var(--muted); font-size: .875rem; }
.rows { margin: 0; padding: 0; list-style: none; border: 1px solid var(--line); border-radius: var(--r); background: var(--surface);
  overflow: hidden; }
.row { --c: var(--accent); display: flex; align-items: center; border-left: .25rem solid var(--c); }
.row + .row { border-top: 1px solid var(--line); }
.row-main { display: flex; flex: 1; min-width: 0; flex-direction: column; padding: .4rem .625rem; color: var(--ink); text-decoration: none; }
.row-main:hover { background: var(--hover); }
.row strong { font-size: .9375rem; line-height: 1.3; }
.sub { overflow: hidden; color: var(--muted); font-size: .8125rem; line-height: 1.35; white-space: nowrap; text-overflow: ellipsis; }
.ico { display: inline-flex; align-items: center; justify-content: center; width: 2.5rem; align-self: stretch; color: var(--muted); }
.ico:hover { background: var(--hover); color: var(--ink); }
.range-links { display: flex; flex-wrap: wrap; gap: .375rem; margin: 0 0 .625rem; }
.pill { display: inline-flex; align-items: center; gap: .4rem; min-height: 2.25rem; padding: 0 .75rem; border-radius: 999px;
  border: 1px solid color-mix(in srgb, var(--accent) 60%, var(--line)); background: var(--surface); color: var(--ink);
  font: 600 .8125rem/1 var(--mono); text-decoration: none; transition: border-color .15s, background-color .15s, transform .15s; }
.pill .icon { color: var(--accent); }
.pill:hover { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 10%, var(--surface)); transform: translateY(-1px); }
.pill.primary { border-color: var(--accent); background: var(--accent); color: light-dark(#fff, #1a1400); }
.pill.primary .icon { color: inherit; }
.pill.primary:hover { background: color-mix(in srgb, var(--accent) 85%, var(--ink)); }
@media (prefers-reduced-motion: reduce) { .pill { transition: none; } .pill:hover { transform: none; } }

/* Footer: one line */
.bottom { border-top: 1px solid var(--line); color: var(--muted); font-size: .8125rem; }
.bottom nav { display: flex; flex-wrap: wrap; align-items: center; gap: 0 1rem; padding-block: .5rem 1.25rem; }
.bottom a { display: inline-flex; align-items: center; min-height: 2.25rem; color: var(--muted); }
.bottom a:hover { color: var(--ink); }

@media (min-width: 48rem) {
  .hero { padding-block: .75rem 2.5rem; }
  .logo { width: 28rem; }
}
@media print {
  .hero { background: none; color: #000; }
  .hero::before, .top, .ico, .range-links { display: none; }
  .logo-t { fill: #000; }
}

.m-magento2-module-opickup-pass{--c:#165b8d}
.m-magento2-module-opickup-mondial-relay{--c:#96144a}
.m-magento2-module-opickup-colissimo{--c:#f08a00}
.m-magento2-module-opickup-chronopost{--c:#0095da}
.m-magento2-module-opickup-dpd{--c:#dc0032}
.m-magento2-module-opickup-hyva-checkout{--c:#4f46e5}
.m-magento2-module-oclickandcollect{--c:#12976f}
.m-magento2-module-checkout-mobile-phone{--c:#7a6a8f}
.m-magento2-module-advanced-shipping-pro{--c:#0e7490}
.m-magento2-module-advanced-shipping{--c:#0e7490}
.m-magento2-module-adv-ship-unlimited-carriers-addon{--c:#1b6fa3}
.m-magento2-module-adv-ship-universal-setting-addon{--c:#1b6fa3}
.m-magento2-module-adv-ship-functions-addon{--c:#1b6fa3}
.m-magento1-module-advanced-shipping{--c:#5f7380}