/* Mama's modern interaction and component layer.
   Loaded after the family stylesheets so one component contract can govern
   motion, media, controls and conversion across the static site. */

:root{
  --m-ink:#1f1c19;
  --m-copy:#5f5852;
  --m-line:#e6ded6;
  --m-paper:#fffdfb;
  --m-soft:#f7f4f1;
  --m-coral:#c64838;
  --m-coral-text:#993d32;
  --m-pink:#d92675;
  --m-amber:#ffb93f;
  --m-green:#1f5b45;
  --m-ease:cubic-bezier(.22,1,.36,1);
  --m-spring:cubic-bezier(.2,.8,.2,1);
  --m-shadow:0 24px 70px rgba(41,31,24,.13);
  --m-shadow-soft:0 12px 34px rgba(41,31,24,.09);
}

html{scroll-padding-top:110px}
body{overflow-x:clip;text-rendering:optimizeLegibility}
[id]{scroll-margin-top:110px}
a,button{-webkit-tap-highlight-color:transparent}

/* Cross-document motion is progressive enhancement. Unsupported browsers
   keep normal navigation, while reduced-motion users get no animation. */
@view-transition{navigation:auto}
.topp{view-transition-name:mamas-header}
main>section:first-of-type{view-transition-name:mamas-page-lead}
::view-transition-old(root){animation:mamas-page-out .16s ease both}
::view-transition-new(root){animation:mamas-page-in .44s var(--m-ease) both}
::view-transition-old(mamas-header),::view-transition-new(mamas-header){animation-duration:.24s}
@keyframes mamas-page-out{to{opacity:0;transform:scale(.995)}}
@keyframes mamas-page-in{from{opacity:0;transform:translateY(10px) scale(.997)}to{opacity:1;transform:none}}

/* One accessible interaction rhythm. */
:is(.button,.btn-pill,.seller-button,.sg-button,.type-button,.buyer-next-link,.sg-text-link,.seller-text-link,.type-text-link){
  transition:transform .22s var(--m-ease),box-shadow .22s var(--m-ease),background-color .18s ease,color .18s ease,border-color .18s ease;
}
:is(.seller-button,.sg-button,.type-button,.buyer-next-link,.btn-pill) :is(.disc,span[aria-hidden="true"]){transition:transform .22s var(--m-ease),background-color .18s ease}
@media(hover:hover){
  :is(.button,.btn-pill,.seller-button,.sg-button,.type-button,.buyer-next-link):hover{transform:translateY(-2px);box-shadow:0 16px 38px rgba(35,27,21,.16)}
  :is(.seller-button,.sg-button,.type-button,.buyer-next-link,.btn-pill):hover :is(.disc,span[aria-hidden="true"]){transform:translateX(3px)}
  :is(.kat,.category-card,.card-link,.sg-related-grid a,.seller-ruled-list article,.type-common-list article){transition:transform .3s var(--m-ease),box-shadow .3s var(--m-ease),background-color .24s ease}
  :is(.kat,.category-card):hover{transform:translateY(-5px);box-shadow:var(--m-shadow)}
  .kat:hover img{transform:scale(1.025)}
  .kat img{transition:transform .6s var(--m-ease)}
  .sg-related-grid a:hover{background:#faf7f4}
}
:is(a,button,input,summary):focus-visible{outline:3px solid #b84636;outline-offset:4px}

/* Navigation: compact product-level hierarchy with a real launch action. */
.topp.universal-fixed{
  background:color-mix(in srgb,#fff 90%,transparent);
  -webkit-backdrop-filter:blur(20px) saturate(150%);
  backdrop-filter:blur(20px) saturate(150%);
  border-bottom-color:rgba(47,37,30,.08);
}
.topp.universal-fixed .navlinks>a{font-weight:600;color:#554f4a}
.topp.universal-fixed .navlinks>a:hover,.topp.universal-fixed .navlinks>a[aria-expanded=true]{background:#f3efeb;color:var(--m-ink)}
.topp.universal-fixed .btn-pill{min-height:48px;text-decoration:none;cursor:pointer;background:linear-gradient(135deg,#24201d,#12100f)}
.topp.universal-fixed .btn-pill .disc{background:linear-gradient(135deg,var(--m-coral),var(--m-pink))}
.universal-menu-button{width:48px;height:48px;min-width:48px;background:#f3efeb}
.universal-menu-button[aria-expanded=true] span:first-child{transform:translateY(4.5px) rotate(45deg)}
.universal-menu-button[aria-expanded=true] span:last-child{transform:translateY(-4.5px) rotate(-45deg)}
.mobile-interest-link{display:none!important;background:linear-gradient(135deg,var(--m-coral),var(--m-pink))!important;color:#fff!important;text-align:center;justify-content:center}

/* Shared seller media contract. Text length can no longer stretch a photo.
   The service ticket lives in its own row, never over a face. */
:is(.seller-hero,.sg-hero,.type-hero){min-height:650px}
:is(.seller-hero-media,.sg-hero-media,.type-hero-media){
  --hero-focus-wide:center 50%;
  --hero-focus-mobile:center 50%;
  align-self:center;
  display:grid;
  grid-template-rows:minmax(0,1fr) auto;
  width:100%;
  height:530px;
  min-height:0;
  margin:0;
  overflow:visible;
  isolation:isolate;
}
:is(.seller-hero-media,.sg-hero-media,.type-hero-media)>picture{
  display:block;grid-row:1;grid-column:1;width:100%;height:100%;min-height:0;
}
:is(.seller-hero-media,.sg-hero-media,.type-hero-media)>img,
:is(.seller-hero-media,.sg-hero-media,.type-hero-media)>picture>img{
  grid-row:1;grid-column:1;display:block;width:100%;height:100%;min-height:0;
  object-fit:cover;object-position:var(--hero-focus-wide);border-radius:30px;
  box-shadow:0 28px 62px rgba(49,35,25,.16);
}
:is(.seller-hero-media,.sg-hero-media,.type-hero-media)>figcaption{
  left:16px;right:auto;top:16px;bottom:auto;z-index:3;max-width:calc(100% - 32px);
  border:1px solid rgba(255,255,255,.56);background:rgba(27,23,20,.68);color:#fff;
  -webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);
}
.seller-hero-media .seller-media-note,
.sg-hero-media .sg-float,
.type-hero-media .type-app-answer{
  position:relative!important;inset:auto!important;z-index:4;grid-row:2;grid-column:1;
  width:calc(100% - 32px);max-width:none;margin:-25px 16px 0;padding:18px 20px 17px 25px;
  border:1px solid rgba(61,47,38,.1);border-radius:19px;background:rgba(255,253,251,.96);color:var(--m-ink);
  -webkit-backdrop-filter:blur(18px) saturate(140%);backdrop-filter:blur(18px) saturate(140%);
  box-shadow:var(--m-shadow-soft);
}
.seller-hero-media .seller-media-note{background:rgba(31,28,25,.96);color:#fff;border-color:rgba(255,255,255,.1)}
:is(.seller-media-note,.sg-float,.type-app-answer)::before{
  content:"";position:absolute;left:0;top:16px;bottom:16px;width:4px;border-radius:0 4px 4px 0;
  background:linear-gradient(var(--m-coral),var(--m-pink) 58%,var(--m-amber));
}
.seller-hero-media .seller-media-note strong{font-size:28px}
.seller-hero-media .seller-media-note small{color:#d8cec6}
.seller-hero-media .seller-media-note span{color:#eee6e0}
.sg-hero-media .sg-float strong,.type-hero-media .type-app-answer strong{font-size:21px;line-height:1.08}

/* Route selectors behave like current product segmented controls. */
:is(.seller-route,.sg-axis,.type-pair-nav) a{transition:background-color .2s ease,color .2s ease,transform .2s var(--m-ease),box-shadow .2s ease}
:is(.seller-route,.sg-axis,.type-pair-nav) a[aria-current=page]{box-shadow:0 8px 24px rgba(53,39,30,.1)}
.sg-mode-hero .sg-axis a{color:#c7bfb9;background:rgba(255,255,255,.1)}
.sg-mode-hero .sg-axis a[aria-current=page]{color:var(--m-ink);background:#fff}

/* Product proof: a shared shell with five truthful interaction models. */
.sg-mode-visual.sg-proof{
  --proof-accent:var(--m-coral);
  container-type:inline-size;
  position:relative;align-self:center;min-height:470px;padding:0;overflow:hidden;
  border:1px solid rgba(255,255,255,.14);border-radius:31px;
  background:linear-gradient(145deg,#fffdfb,#f2eeea);color:var(--m-ink);
  box-shadow:0 34px 80px rgba(0,0,0,.3);
}
.sg-proof[data-proof=preorder]{--proof-accent:#7354c8;background:linear-gradient(145deg,#fff,#f1eefb)}
.sg-proof[data-proof=schedule]{--proof-accent:#1f7b5d;background:linear-gradient(145deg,#fff,#edf7f1)}
.sg-proof[data-proof=conversation]{--proof-accent:#d92675;background:linear-gradient(145deg,#fff,#fbecf3)}
.sg-proof[data-proof=event]{--proof-accent:#b85d12;background:linear-gradient(145deg,#fff,#fff2e4)}
.sg-proof::after{content:"";position:absolute;right:-100px;top:-110px;width:300px;height:300px;border-radius:50%;background:color-mix(in srgb,var(--proof-accent) 17%,transparent);filter:blur(2px);pointer-events:none}
.sg-proof-head{position:relative;z-index:2;display:flex;align-items:center;justify-content:space-between;gap:16px;padding:21px 23px;border-bottom:1px solid rgba(42,34,29,.09)}
.sg-proof-head>span:first-child{font:750 12px/1 'Schibsted Grotesk',sans-serif;letter-spacing:.02em}
.sg-proof-state{display:inline-flex;align-items:center;gap:7px;padding:8px 11px;border-radius:999px;background:#fff;color:#4e4843;font:700 10px/1 'Schibsted Grotesk',sans-serif;box-shadow:0 5px 18px rgba(42,34,29,.08)}
.sg-proof-state::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--proof-accent);box-shadow:0 0 0 4px color-mix(in srgb,var(--proof-accent) 14%,transparent)}
.sg-proof-body{position:relative;z-index:2;padding:24px}
.sg-proof-title{display:grid;grid-template-columns:48px 1fr;align-items:center;gap:15px}
.sg-proof-icon{display:grid;place-items:center;width:48px;height:48px;border-radius:16px;background:var(--proof-accent);color:#fff;font:800 14px/1 'Schibsted Grotesk',sans-serif;box-shadow:0 12px 24px color-mix(in srgb,var(--proof-accent) 25%,transparent)}
.sg-proof-title small{display:block;color:#625b56;font:700 10px/1.2 'Schibsted Grotesk',sans-serif;text-transform:uppercase;letter-spacing:.06em}
.sg-proof-title h2{margin:5px 0 0;font:750 27px/1 'Schibsted Grotesk',sans-serif;letter-spacing:-.045em}
.sg-proof-title p{margin:7px 0 0;color:#716861;font-size:12px;line-height:1.45}
.sg-proof-panel{margin-top:23px;padding:19px;border:1px solid rgba(42,34,29,.08);border-radius:21px;background:rgba(255,255,255,.82);box-shadow:0 12px 30px rgba(49,37,29,.07)}
.sg-proof-row{display:flex;align-items:center;justify-content:space-between;gap:18px}
.sg-proof-row+.sg-proof-row{margin-top:15px;padding-top:15px;border-top:1px solid rgba(42,34,29,.09)}
.sg-proof-row small{display:block;color:#625b56;font-size:10px}.sg-proof-row strong{display:block;margin-top:3px;font:750 14px/1.2 'Schibsted Grotesk',sans-serif}
.sg-proof-pill{padding:8px 10px;border-radius:999px;background:color-mix(in srgb,var(--proof-accent) 12%,#fff);color:color-mix(in srgb,var(--proof-accent) 76%,#211e1b);font:750 10px/1 'Schibsted Grotesk',sans-serif}
.sg-proof-progress{height:8px;margin-top:13px;border-radius:99px;background:#ece7e2;overflow:hidden}.sg-proof-progress>i{display:block;width:72%;height:100%;border-radius:inherit;background:linear-gradient(90deg,var(--proof-accent),color-mix(in srgb,var(--proof-accent) 65%,var(--m-amber)))}
.sg-proof-days{display:grid;grid-template-columns:repeat(7,1fr);gap:6px;margin-top:17px}.sg-proof-days span{display:grid;place-items:center;min-height:42px;border-radius:12px;background:#f4f1ee;color:#655e59;font:700 10px/1 'Schibsted Grotesk',sans-serif}.sg-proof-days .is-on{background:var(--proof-accent);color:#fff;box-shadow:0 9px 20px color-mix(in srgb,var(--proof-accent) 24%,transparent)}
.sg-proof-week{display:grid;gap:8px}.sg-proof-week>div{display:grid;grid-template-columns:58px 1fr auto;align-items:center;gap:11px;padding:11px 12px;border-radius:13px;background:#f5f2ef}.sg-proof-week strong{font-size:12px}.sg-proof-week span{font-size:11px;color:#625b56}.sg-proof-week b{width:9px;height:9px;border-radius:50%;background:#c8c1bb}.sg-proof-week .is-on b{background:var(--proof-accent);box-shadow:0 0 0 4px color-mix(in srgb,var(--proof-accent) 13%,transparent)}
.sg-proof-chat{display:grid;gap:10px}.sg-proof-bubble{max-width:84%;padding:11px 13px;border-radius:16px 16px 16px 5px;background:#f0ece8;color:#5f5751;font-size:11px;line-height:1.45}.sg-proof-bubble.is-seller{justify-self:end;border-radius:16px 16px 5px 16px;background:var(--proof-accent);color:#fff}.sg-proof-quote{display:flex;justify-content:space-between;gap:16px;margin-top:13px;padding-top:13px;border-top:1px solid rgba(42,34,29,.09);font-size:11px}.sg-proof-quote strong{font-size:14px}
.sg-proof-map{position:relative;height:132px;overflow:hidden;border-radius:17px;background:linear-gradient(35deg,#e9e3dc 25%,transparent 25%) 0 0/42px 42px,linear-gradient(145deg,#f7f4f0,#eee8e2)}.sg-proof-map::before,.sg-proof-map::after{content:"";position:absolute;width:130%;height:13px;left:-15%;top:52%;border-radius:99px;background:#fff;transform:rotate(-13deg);box-shadow:0 0 0 1px #e3dcd5}.sg-proof-map::after{top:20%;transform:rotate(28deg)}.sg-proof-pin{position:absolute;z-index:2;left:56%;top:42%;display:grid;place-items:center;width:40px;height:40px;border:6px solid #fff;border-radius:50% 50% 50% 12px;transform:translate(-50%,-50%) rotate(-45deg);background:var(--proof-accent);box-shadow:0 10px 26px rgba(62,41,26,.24)}.sg-proof-pin::after{content:"";width:8px;height:8px;border-radius:50%;background:#fff}

/* Consistent conversion actions on seller endings. */
.seller-conversion-actions{display:flex;align-items:center;flex-wrap:wrap;gap:18px 24px;margin-top:29px}
.seller-conversion-actions :is(.sg-button,.type-button,.seller-button){margin-top:0}
.seller-conversion-secondary{color:inherit;font:700 14px/1.25 'Schibsted Grotesk',sans-serif;text-underline-offset:5px;text-decoration-thickness:1px}

.paameld-personvern{max-width:650px;margin:12px auto 0;color:#6c645e;font-size:12px;line-height:1.5;text-align:left}
.paameld-personvern a{font-weight:700;text-decoration:underline;text-underline-offset:3px}

/* Homepage polish: readable trust copy and a tighter transition into sellers. */
#godkjenning .sect-lede{color:rgba(255,250,246,.9)}
#godkjenning .godkjentpunkter p{color:rgba(255,250,246,.82)}
#godkjenning .eyebrow-lbl{color:rgba(255,250,246,.78)}
#maten{padding-bottom:clamp(68px,8vw,110px)}
.hero .rise{animation-duration:.46s}
.hero .d3{animation-delay:.1s}
.hero .toner{animation-duration:.6s;animation-delay:.16s}

/* Small but important accessibility details. */
.article-nav a,.seller-rules-index a{min-height:44px;display:flex;align-items:center}
.footer-col h4{color:#a49d97}
.seller-kicker,.sg-kicker,.type-kicker,.category-kicker{color:var(--m-coral-text)}
:is(.crumbs,.seller-crumbs,.sg-crumbs,.type-crumbs){color:#625b56}
:is(.seller-route,.sg-axis,.type-pair-nav) a{color:#5f5751}
:is(.seller-route,.sg-axis,.type-pair-nav) a span{color:#655e59}
:is(.seller-route,.sg-axis,.type-pair-nav) a[aria-current=page] span{color:var(--m-coral-text)}
:is(.sg-lines,.seller-ruled-list,.type-definition-list) article>span,
.choice-number{color:#655e59}
.seller-economy-strip dt,.seller-economy-note,.sg-timeline-top,.sg-timeline-copy small{color:#655e59}

/* Dark surfaces use a light label; light surfaces use the darker brand coral. */
:is(.fulfilment-kicker,.allergen-kicker,.meaning-label,.find-kicker,.reviews-kicker),
.payment-steps .payment-kicker{color:var(--m-coral-text)}
:is(.seller-hero-application,.seller-review-statement) .seller-kicker,
:is(.sg-dark,.sg-mode-hero) .sg-kicker,
:is(.type-hero-business,.type-axis) .type-kicker,
.how-journey .eyebrow,.seal-meaning .eyebrow,.seal-column-label,
.allergen-reference .allergen-kicker,.payment-hero .payment-kicker{color:#ffb4a6}
.seller-hero-application .seller-route a,
.sg-mode-hero .sg-axis a{color:#c7bfb9}
.seller-hero-application .seller-route a span,
.sg-mode-hero .sg-axis a span{color:#d1c8c0}
.seller-hero-application .seller-route a[aria-current=page]{color:#fff}
.type-hero-business .type-pair-nav a{color:#d7e5df}
.type-hero-business .type-pair-nav a span{color:#c2d7ce}
.type-hero-business .type-pair-nav a[aria-current=page] span{color:var(--m-coral-text)}
.type-axis .axis-label,.type-axis .axis-options em{color:#c7bfb9}
.type-axis .axis-options .is-current em{color:var(--m-coral-text)}

/* Accessible brand gradients retain the energy without sacrificing body copy. */
:is(.sg-next,.seller-next:not(.seller-next-light),.type-next:not(.type-next-business),.positive-reviews){
  background:linear-gradient(125deg,#c64838 0%,#c52d60 55%,#bd185f 100%);
}
:is(.sg-next,.seller-next:not(.seller-next-light),.type-next:not(.type-next-business),.positive-reviews) :is(p,.sg-kicker,.seller-kicker,.type-kicker,.reviews-kicker){color:#fff}

.reviews-facts small,.reviews-screen figcaption{color:#625b56}
.review-avatar{background:#b84636}
.review-avatar-green{background:#28795e}
.review-avatar-gold{background:#9a6518}

/* Native scroll-driven entrances keep content visible by default and only
   activate where the browser supports the timeline. */
@media(prefers-reduced-motion:no-preference){
  @supports(animation-timeline:view()){
    :is(.seller-section,.seller-band,.seller-review-statement,.sg-section,.sg-dark,.sg-control,.sg-window,.sg-related,.type-intro,.type-definition,.type-axis,.type-common,.type-app-view,.category-overview,.category-buyer,.category-trust,.category-directory,.buyer-next){
      animation:mamas-section-in both var(--m-ease);animation-timeline:view();animation-range:entry 0 entry 22%;
    }
    @keyframes mamas-section-in{from{opacity:.35;transform:translateY(24px)}to{opacity:1;transform:none}}
  }
}

@container(max-width:380px){.sg-proof-body{padding:18px}.sg-proof-panel{padding:15px}.sg-proof-title h2{font-size:23px}.sg-proof-days{gap:4px}.sg-proof-days span{min-height:36px}}

@media(max-width:920px){
  :is(.seller-hero,.sg-hero,.type-hero){min-height:0}
  :is(.seller-hero-media,.sg-hero-media,.type-hero-media){height:auto;grid-template-rows:auto auto}
  :is(.seller-hero-media,.sg-hero-media,.type-hero-media)>img,
  :is(.seller-hero-media,.sg-hero-media,.type-hero-media)>picture,
  :is(.seller-hero-media,.sg-hero-media,.type-hero-media)>picture>img{height:auto;aspect-ratio:4/3}
}

@media(max-width:720px){
  html{scroll-padding-top:86px}[id]{scroll-margin-top:86px}
  .topp.universal-fixed .btn-pill{display:none}
  .topp.universal-fixed.mobile-open .mobile-interest-link{display:flex!important;margin-top:5px;min-height:50px}
  :is(.seller-hero,.sg-hero,.type-hero){padding-bottom:24px!important}
  :is(.seller-route,.sg-axis,.type-pair-nav),.sg-axis.sg-axis-five,.sg-axis.sg-axis-six{
    position:relative;left:auto;right:auto;bottom:auto;display:flex;gap:8px;width:100%;margin-top:2px;padding:4px 1px 8px;
    overflow-x:auto;overscroll-behavior-inline:contain;scroll-snap-type:x mandatory;scrollbar-width:none;
  }
  :is(.seller-route,.sg-axis,.type-pair-nav)::-webkit-scrollbar{display:none}
  :is(.seller-route,.sg-axis,.type-pair-nav)>i{display:none}
  :is(.seller-route,.sg-axis,.type-pair-nav)>a{
    flex:0 0 min(76vw,265px);min-height:54px;padding:0 15px;border-radius:15px;scroll-snap-align:start;
    background:rgba(255,255,255,.72);border:1px solid rgba(45,34,27,.08);justify-content:space-between!important;
  }
  :is(.seller-route,.sg-axis,.type-pair-nav)>a[aria-current=page]{background:#fff}
  :is(.seller-hero-media,.sg-hero-media,.type-hero-media)>img,
  :is(.seller-hero-media,.sg-hero-media,.type-hero-media)>picture,
  :is(.seller-hero-media,.sg-hero-media,.type-hero-media)>picture>img{aspect-ratio:4/5;object-position:var(--hero-focus-mobile);border-radius:22px}
  .seller-hero-media .seller-media-note,.sg-hero-media .sg-float,.type-hero-media .type-app-answer{width:calc(100% - 18px);margin:-20px 9px 0;padding:17px 17px 16px 22px}
  :is(.seller-hero-media,.sg-hero-media,.type-hero-media)>figcaption{top:12px;left:12px;max-width:calc(100% - 24px)}
  .sg-mode-visual.sg-proof{min-height:450px}
  .seller-conversion-actions{align-items:flex-start;flex-direction:column}
}

@media(max-width:390px){
  :is(.seller-route,.sg-axis,.type-pair-nav)>a{flex-basis:82vw}
  .sg-proof-head{padding:18px}.sg-proof-body{padding:18px}
}

@media(prefers-reduced-motion:reduce){
  @view-transition{navigation:auto}
  ::view-transition-group(*),::view-transition-old(*),::view-transition-new(*){animation:none!important}
  html{scroll-behavior:auto}
  :is(.kat,.kat img,.button,.btn-pill,.seller-button,.sg-button,.type-button,.buyer-next-link){transition:none!important}
}