/* Mobile experience refinements, October 2026.
   Scoped by page template to preserve desktop layouts and interactive artwork. */
@media (max-width: 767px) {
  html { scroll-padding-top: 88px; }
  body { min-width: 0; overflow-x: clip; }
  main, section, article, .container { min-width: 0; }
  img, video, iframe { max-width: 100%; }
  a, button, input, select, textarea { -webkit-tap-highlight-color: transparent; }
  input:not([type="checkbox"]):not([type="radio"]), textarea, select { font-size: 16px; }
  button, a { touch-action: manipulation; }
  :is(a, button, input, select, textarea, summary):focus-visible {
    outline: 3px solid #8b6ad8;
    outline-offset: 3px;
  }

  /* Homepage: retain the interactive room, give content breathing room. */
  body.homepage #navbar .nav-inner { gap: .6rem; }
  body.homepage #navbar .logo { font-size: clamp(.93rem, 4.35vw, 1.12rem); white-space: nowrap; }
  body.homepage #navbar .lang-switcher { margin-left: .35rem; gap: .1rem; }
  body.homepage #navbar .lang-btn { min-width: 38px; min-height: 44px; padding: .4rem .25rem; }
  body.homepage #navbar .mobile-menu-btn {
    display: inline-flex; align-items: center; justify-content: center;
    width: 46px; height: 46px; flex: 0 0 46px; margin-left: .45rem;
  }
  body.homepage .mobile-nav {
    max-height: calc(100dvh - var(--nav-height, 80px));
    overflow-y: auto; overscroll-behavior: contain;
    padding: 1rem max(20px, var(--container-pad, 20px)) 1.35rem;
    gap: .2rem;
  }
  body.homepage .mobile-nav a {
    display: flex; align-items: center;
    min-height: 48px; padding: .65rem .35rem; font-size: 1.05rem;
  }
  body.homepage .section-title { font-size: clamp(1.95rem, 8vw, 2.65rem); line-height: 1.16; text-wrap: balance; }
  body.homepage #shopify-specialudvikling {
    padding-block: 3.35rem !important;
  }
  body.homepage #shopify-specialudvikling .section-header { margin-bottom: 1.45rem !important; }
  body.homepage #shopify-specialudvikling .shopify-offer-panel {
    border-radius: 21px; padding: 1.45rem !important;
  }
  body.homepage #shopify-specialudvikling .shopify-offer-actions { gap: .7rem; }
  body.homepage #shopify-specialudvikling .shopify-offer-actions .btn { min-height: 48px; padding: .87rem 1rem; }
  body.homepage #analysis-tool { padding-block: 3.7rem !important; }
  body.homepage #analysis-tool .section-header { margin-bottom: 1.5rem !important; }
  body.homepage #analysis-tool #analysisForm #analyzeBtn { width: 100%; min-height: 48px; }
  body.homepage #about, body.homepage #latest-blog, body.homepage #faq {
    padding-top: 3.5rem !important; padding-bottom: 3.5rem !important;
  }
  body.homepage #contact .contact-choice { min-height: 44px; display: inline-flex; align-items: center; }
  body.homepage #contact .contact-submit { min-height: 50px; }
  body.homepage #contact .contact-form { min-width: 0; }

  /* Shopify: keep demo categories scrollable and controls thumb-sized. */
  body.shopify-page .nav-toggle { min-height: 44px; min-width: 88px; }
  body.shopify-page .site-nav .nav-links {
    max-height: calc(100dvh - var(--nav-h, 76px) - 30px); overflow-y: auto;
  }
  body.shopify-page .hero { padding-top: 108px; padding-bottom: 65px; }
  body.shopify-page .hero h1 { font-size: clamp(2.38rem, 10vw, 3.5rem); line-height: 1.08; text-wrap: balance; }
  body.shopify-page .hero-copy > p { line-height: 1.65; }
  body.shopify-page .hero-cta .btn { min-height: 50px; white-space: normal; text-align: center; }
  body.shopify-page .builder { min-width: 0; }
  body.shopify-page .builder-tabs { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  body.shopify-page .builder-tab { min-height: 44px; }
  body.shopify-page .contact .form-submit { min-height: 50px; }
  body.shopify-page .contact :is(input, textarea, select) { max-width: 100%; }
  body.shopify-page #playground .pg-topline { min-width: 0; }
  body.shopify-page #playground .pg-shop-nav { max-width: 100%; scrollbar-width: thin; }
  body.shopify-page #playground .pg-shop-nav button { min-height: 44px; flex-shrink: 0; }
  body.shopify-page #playground .pg-products { min-width: 0; }
  body.shopify-page #playground .pg-product { min-width: 0; }
  body.shopify-page #playground .pg-tab { min-width: 0; }
  body.shopify-page #playground .pg-product :is(button, input) { min-height: 38px; }
  body.shopify-page #playground .pg-jump-cart { min-height: 44px; }

  /* Downloads: shallower hero and easier-to-scan resource cards. */
  body.resources-page .site-nav .menu-toggle { min-height: 44px; }
  body.resources-page .site-nav .nav-links {
    max-height: calc(100dvh - 90px); overflow-y: auto;
  }
  body.resources-page .resource-hero { padding-top: 110px; padding-bottom: 72px; }
  body.resources-page .resource-hero h1 { font-size: clamp(2.4rem, 10vw, 3.55rem); line-height: 1.12; }
  body.resources-page .resource-hero p { font-size: 1rem; line-height: 1.65; }
  body.resources-page .hero-link { min-height: 48px; }
  body.resources-page .resource-card { min-height: 0; padding: 1.4rem; }
  body.resources-page .topic-card { min-width: 0; }
  body.resources-page .contact-panel .pill-link { min-height: 48px; }

  /* Blog pages are generated by build-blog.mjs. */
  body.blog-index .blog-site-nav .blog-menu-toggle,
  body.blog-article .blog-site-nav .blog-menu-toggle { min-height: 44px; }
  body.blog-index .blog-site-nav .nav-links,
  body.blog-article .blog-site-nav .nav-links {
    max-height: calc(100dvh - 90px); overflow-y: auto;
  }
  body.blog-index .blog-header { padding-top: 111px !important; padding-bottom: 68px !important; }
  body.blog-index .blog-header h1 { font-size: clamp(2.4rem, 9.7vw, 3.65rem) !important; line-height: 1.11; }
  body.blog-index .blog-header p { font-size: 1rem; line-height: 1.65; }
  body.blog-index .filter-bar { max-width: 100%; overflow-x: auto; overscroll-behavior-inline: contain; }
  body.blog-index .filter-btn { flex: 0 0 auto; min-height: 44px; }
  body.blog-index .blog-search-wrap { min-width: 0; }
  body.blog-index .blog-card { min-width: 0; }
  body.blog-index .blog-card h2, body.blog-index .blog-card h3 { overflow-wrap: anywhere; }
  body.blog-article .post-layout {
    display: block; min-width: 0;
    padding: 112px 20px 52px;
  }
  body.blog-article .post-container { width: 100%; max-width: 100%; }
  body.blog-article .post-header { margin-bottom: 2rem; }
  body.blog-article .post-title {
    font-size: clamp(1.95rem, 8vw, 2.6rem); line-height: 1.17;
    text-wrap: balance; overflow-wrap: anywhere;
  }
  body.blog-article .post-meta { flex-wrap: wrap; gap: .45rem .7rem; font-size: .78rem; }
  body.blog-article .post-content { font-size: 1rem; line-height: 1.78; }
  body.blog-article .post-content h2 { font-size: clamp(1.45rem, 6.3vw, 1.85rem); line-height: 1.27; }
  body.blog-article .post-content h3 { font-size: clamp(1.2rem, 5.1vw, 1.48rem); line-height: 1.35; }
  body.blog-article .post-content :is(blockquote, .kort-svar) { padding: 1.1rem; }
  body.blog-article .post-content :is(pre, .blog-table-wrapper) {
    max-width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch;
  }
  body.blog-article .post-content table { max-width: 100%; }
  body.blog-article .post-content img { height: auto; }
  body.blog-article .post-cta { padding: 1.5rem; }
  body.blog-article .post-cta .btn-primary { min-height: 48px; display: inline-flex; align-items: center; justify-content: center; text-align: center; }

  /* Older long-form service pages: shorter hero and reading measure. */
  body.legacy-service-page .mobile-menu-btn {
    display: inline-flex; align-items: center; justify-content: center;
    width: 46px; height: 46px; margin: 0 0 0 .5rem;
    border: 0; background: transparent; color: inherit; cursor: pointer;
  }
  body.legacy-service-page .mobile-nav {
    max-height: calc(100dvh - var(--nav-height, 80px));
    overflow-y: auto; overscroll-behavior: contain;
    padding: 1rem 22px 1.35rem; gap: .2rem;
  }
  body.legacy-service-page .mobile-nav a {
    display: flex; align-items: center; min-height: 48px; font-size: 1.05rem;
  }
  body.legacy-service-page .page-header { padding: 118px 22px 45px; }
  body.legacy-service-page .page-header h1 { font-size: clamp(2rem, 8vw, 2.65rem); line-height: 1.18; }
  body.legacy-service-page .page-content { padding: 44px 22px 65px; font-size: 1rem; line-height: 1.78; }
  body.legacy-service-page .page-content h2 { margin: 2.4rem 0 1rem; font-size: clamp(1.55rem, 6.8vw, 2rem); line-height: 1.27; }
  body.legacy-service-page .page-content h3 { margin: 1.85rem 0 .85rem; font-size: 1.3rem; }
  body.legacy-service-page .page-content :is(.framework-step, .case-box, .short-answer) { padding: 1.2rem; }
  body.legacy-service-page .hero-buttons { display: flex; flex-wrap: wrap; gap: .8rem; }
  body.legacy-service-page .hero-buttons .btn { min-height: 48px; white-space: normal; text-align: center; }

  /* Webshop audit: add actual mobile nav instead of squeezing 3 links. */
  body.webshop-audit-page nav .nav-inner { position: relative; padding-inline: 20px; gap: .6rem; }
  body.webshop-audit-page .audit-menu-toggle {
    display: inline-flex; align-items: center; justify-content: center;
    min-height: 44px; min-width: 76px;
    padding: .55rem .85rem; border: 1px solid #d6deea;
    border-radius: 11px; color: #17233a; background: #fff; font-weight: 700;
  }
  body.webshop-audit-page nav .audit-nav-links {
    display: none; position: absolute; right: 20px;
    top: calc(100% + 14px); width: min(300px, calc(100vw - 40px));
    flex-direction: column; gap: 0;
    padding: .55rem; background: #fff; border: 1px solid #dce3ef;
    border-radius: 16px; box-shadow: 0 18px 40px rgba(15,23,42,.16);
    max-height: calc(100dvh - 95px); overflow-y: auto;
  }
  body.webshop-audit-page nav .audit-nav-links.is-open { display: flex; }
  body.webshop-audit-page nav .audit-nav-links a {
    width: 100%; min-height: 48px; display: flex; align-items: center;
    padding: .6rem .85rem; border-radius: 9px;
  }
  body.webshop-audit-page nav .audit-nav-links a:active { background: #f4f1fb; }
  body.webshop-audit-page .hero { padding-top: 108px; }
  body.webshop-audit-page .hero h1 { font-size: clamp(2.1rem, 8.5vw, 2.8rem); line-height: 1.16; }
  body.webshop-audit-page .hero-grid { min-width: 0; gap: 2rem; }
  body.webshop-audit-page .hero-buttons .btn { width: 100%; min-height: 48px; white-space: normal; }
  body.webshop-audit-page .scorecard-mock { max-width: 100%; padding: 1.15rem; }
  body.webshop-audit-page .container { min-width: 0; }
  body.webshop-audit-page :is(.card, .faq-item) { min-width: 0; overflow-wrap: anywhere; }
}
@media (min-width: 768px) {
  body.webshop-audit-page .audit-menu-toggle { display: none; }
}
@media (max-width: 380px) {
  body.homepage #navbar .logo { font-size: .91rem; }
  body.homepage #navbar .lang-switcher { gap: 0; }
  body.homepage #navbar .lang-btn { min-width: 35px; }
  body.homepage #navbar .mobile-menu-btn { margin-left: .15rem; width: 42px; flex-basis: 42px; }
  body.shopify-page #playground .pg-tabs { gap: .3rem; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  body.homepage .mobile-nav, body.legacy-service-page .mobile-nav { transition: none; }
}


/* ================================================================
   Site-wide responsive quality pass · October 2026 (revision 2)
   Every visual rule is mobile/tablet-scoped and page-specific.
   Never resize the homepage's illustrated room or its monitor overlay.
   ================================================================ */
@media (max-width:1024px) {
  :is(body.homepage,body.shopify-page,body.resources-page,body.blog-index,body.blog-article,body.legacy-service-page,body.webshop-audit-page) {
    overflow-wrap:break-word;
  }
  :is(body.homepage,body.shopify-page,body.resources-page,body.blog-index,body.blog-article,body.legacy-service-page,body.webshop-audit-page)
    :is(.container,.hero-grid,.nav-inner,.contact-inner,.contact-section,.post-container,.resource-grid,.services-grid) {
    min-width:0;
  }
  body.shopify-page :is(.builder,.builder-shell,.builder-body,.cost-layout,.contact-inner,.contact-form) {min-width:0}
  body.shopify-page .form-row > * {min-width:0}
  body.resources-page .resource-grid > *,
  body.resources-page .topic-grid > *,
  body.homepage .services-grid > *,
  body.homepage #latest-blog .blog-grid > * {min-width:0}
  body.blog-index .blog-toolbar,
  body.blog-index #blogGrid,
  body.blog-index .guide-shelf {min-width:0}
  :is(body.homepage,body.shopify-page,body.resources-page,body.blog-index,body.blog-article,body.legacy-service-page,body.webshop-audit-page)
    :is(.mobile-nav,.nav-links.is-open,.audit-nav-links.is-open) {
    overscroll-behavior:contain;
  }
}
@media (max-width:767px) {
  /* Consistent, reachable controls and safe viewport widths. */
  :is(body.homepage,body.shopify-page,body.resources-page,body.blog-index,body.blog-article,body.legacy-service-page,body.webshop-audit-page)
    :is(input:not([type="checkbox"]):not([type="radio"]),textarea,select) {
    font-size:16px;
    max-width:100%;
  }
  :is(body.homepage,body.shopify-page,body.resources-page,body.blog-index,body.blog-article,body.legacy-service-page,body.webshop-audit-page)
    :is(img,video,iframe,svg) {max-width:100%}
  :is(body.homepage,body.shopify-page,body.resources-page,body.blog-index,body.blog-article,body.legacy-service-page,body.webshop-audit-page)
    :is(.btn,.btn-primary,.hero-link,.pill-link) {white-space:normal;text-align:center}
  :is(body.homepage,body.shopify-page,body.resources-page,body.blog-index,body.blog-article,body.legacy-service-page,body.webshop-audit-page)
    :is(.mobile-menu-btn,.menu-toggle,.nav-toggle,.blog-menu-toggle,.audit-menu-toggle) {
    flex-shrink:0;touch-action:manipulation
  }
  /* The hero artwork and its overlay deliberately keep their own 1706:922 crop. */
  body.homepage #navbar .container {min-width:0}
  body.homepage #navbar .nav-inner {min-width:0;column-gap:.4rem}
  body.homepage #navbar .nav-inner > div {min-width:0;gap:.1rem}
  body.homepage .mobile-nav {z-index:110}
  body.homepage .mobile-nav a {min-height:46px}
  body.homepage .workspace-copy {min-width:0}
  body.homepage .workspace-copy .workspace-cta {min-height:48px;max-width:100%;white-space:normal}
  body.homepage #services .service-card {overflow-wrap:break-word}
  body.homepage #services .section-header,
  body.homepage #analysis-tool .section-header,
  body.homepage #about .section-header {margin-bottom:clamp(1.5rem,6vw,2rem)}
  body.homepage #analysis-tool #analysisForm {width:100%;min-width:0}
  body.homepage #analysis-tool #analysisForm #businessUrl {
    min-width:0;width:100%;min-height:50px;
  }
  body.homepage #analysis-tool #analysisForm #analyzeBtn {min-height:50px}
  body.homepage #analysis-tool #analysisResult {
    min-width:0;max-width:100%;overflow-wrap:anywhere;
  }
  body.homepage #shopify-specialudvikling .shopify-offer-actions {
    display:flex;flex-direction:column;align-items:stretch;
  }
  body.homepage #shopify-specialudvikling .shopify-offer-actions .btn {
    min-height:48px;width:100%;
  }
  body.homepage #latest-blog .blog-grid {grid-template-columns:minmax(0,1fr);gap:1rem}
  body.homepage #latest-blog .blog-card {min-width:0;padding:clamp(1.2rem,4.5vw,1.75rem)!important}
  body.homepage #latest-blog .blog-card-title {overflow-wrap:anywhere}
  body.homepage #contact .contact-section {min-width:0;grid-template-columns:minmax(0,1fr)}
  body.homepage #contact .contact-form {min-width:0;width:100%}
  body.homepage #contact .contact-input-grid {grid-template-columns:minmax(0,1fr)}
  body.homepage #contact .form-control {width:100%;min-width:0;min-height:48px}
  body.homepage #contact .contact-submit {min-height:50px}
  body.homepage #contact .contact-choice {min-height:44px}
  body.homepage #contact .contact-actions {align-items:stretch}

  /* Shopify: the demo must behave like a usable store, not a miniature screenshot. */
  body.shopify-page .hero-grid {grid-template-columns:minmax(0,1fr)}
  body.shopify-page .hero h1 {overflow-wrap:break-word}
  body.shopify-page .hero-cta .btn {width:100%;justify-content:center}
  body.shopify-page .builder,
  body.shopify-page .builder-shell {width:100%;min-width:0;max-width:100%}
  body.shopify-page .builder-body {min-width:0}
  body.shopify-page .builder-tabs {max-width:100%;overscroll-behavior-inline:contain}
  body.shopify-page .builder-tab {min-height:44px;flex:0 0 auto}
  body.shopify-page .feature-grid {grid-template-columns:minmax(0,1fr)}
  body.shopify-page .cost-layout {grid-template-columns:minmax(0,1fr)}
  body.shopify-page .contact .form-row {grid-template-columns:minmax(0,1fr)}
  body.shopify-page .contact .field :is(input,select,textarea) {min-height:48px;width:100%}
  body.shopify-page .contact .field textarea {min-height:132px}
  body.shopify-page .contact .form-submit {min-height:50px;width:100%}
  body.shopify-page #playground .pg-shell {min-width:0}
  body.shopify-page #playground .pg-topline {gap:.5rem}
  body.shopify-page #playground .pg-store-name {min-width:0}
  body.shopify-page #playground .pg-brand-block {min-width:0}
  body.shopify-page #playground .pg-brand-block strong {overflow-wrap:anywhere}
  body.shopify-page #playground .pg-shop-nav {
    min-width:0;max-width:100%;
    overflow-x:auto;-webkit-overflow-scrolling:touch;
    overscroll-behavior-inline:contain;
    justify-content:flex-start;scrollbar-width:thin;
  }
  body.shopify-page #playground .pg-shop-nav button {min-height:44px;flex:0 0 auto}
  body.shopify-page #playground .pg-tabs {min-width:0}
  body.shopify-page #playground .pg-tab {min-width:0;min-height:88px}
  body.shopify-page #playground .pg-main {grid-template-columns:minmax(0,1fr)}
  body.shopify-page #playground .pg-product {min-width:0}
  body.shopify-page #playground .pg-product-bottom .pg-add {
    min-height:42px;font-size:.75rem;line-height:1.3;
  }
  body.shopify-page #playground .pg-product-qty button {
    flex:0 0 40px;width:40px;height:40px;min-height:40px;
  }
  body.shopify-page #playground .pg-cart {position:static}
  body.shopify-page #playground .pg-jump-cart {min-height:44px}
  body.shopify-page #playground .pg-campaign {min-width:0}
  body.shopify-page #playground .pg-campaign-body,
  body.shopify-page #playground .pg-campaign-gift {min-width:0}
  body.shopify-page #playground .pg-cart-shared {min-width:0}

  /* Downloads and resources: prevent narrow action/footer overlap. */
  body.resources-page .resource-hero .container,
  body.resources-page .available .container,
  body.resources-page .coming .container {min-width:0}
  body.resources-page .resource-hero h1 {overflow-wrap:break-word}
  body.resources-page .resource-grid,
  body.resources-page .topic-grid {grid-template-columns:minmax(0,1fr)}
  body.resources-page .resource-card,
  body.resources-page .topic-card {min-width:0}
  body.resources-page .resource-card {padding:clamp(1.25rem,5vw,1.6rem)}
  body.resources-page .card-action {display:inline-flex;align-items:center;max-width:100%}
  body.resources-page .contact-panel {gap:1.5rem;padding:clamp(1.3rem,5vw,2rem)}
  body.resources-page .contact-panel .pill-link {
    min-height:48px;max-width:100%;width:100%;justify-content:center;
  }

  /* Blog index: filters remain discoverable and touch-friendly. */
  body.blog-index .blog-main {min-width:0}
  body.blog-index .blog-header .container {min-width:0}
  body.blog-index .blog-header h1 {overflow-wrap:break-word}
  body.blog-index .blog-toolbar {padding:clamp(1rem,4.6vw,1.4rem)}
  body.blog-index .blog-search-wrap {width:100%;min-width:0}
  body.blog-index .blog-search-wrap input {min-width:0;width:100%;font-size:16px}
  body.blog-index .filter-bar {
    overflow-x:auto;scrollbar-width:thin;
    -webkit-overflow-scrolling:touch;
    overscroll-behavior-inline:contain;
  }
  body.blog-index #blogGrid {grid-template-columns:minmax(0,1fr)}
  body.blog-index .blog-card {padding:clamp(1.3rem,5vw,1.7rem)}
  body.blog-index .guide-links {grid-template-columns:minmax(0,1fr)}
  body.blog-index .guide-shelf {min-width:0}

  /* Article sections: no global stylesheet can force wide code/table overflow. */
  body.blog-article .post-content :is(pre,.blog-table-wrapper) {max-width:100%;overflow-x:auto}
  body.blog-article .post-cta .btn-primary {max-width:100%;white-space:normal}
  body.blog-article .post-author,
  body.blog-article .post-related-card {min-width:0}

  /* Older service/audit pages keep their original visual identity. */
  body.legacy-service-page .page-header .container {min-width:0}
  body.legacy-service-page .page-header h1 {overflow-wrap:anywhere}
  body.legacy-service-page .page-content {min-width:0;overflow-wrap:break-word}
  body.legacy-service-page .page-content :is(img,iframe,table,pre) {max-width:100%}
  body.legacy-service-page .page-content :is(pre,table) {overflow-x:auto}
  body.legacy-service-page .page-content .btn {min-height:48px;max-width:100%}
  body.webshop-audit-page .hero-grid {grid-template-columns:minmax(0,1fr)}
  body.webshop-audit-page .hero-buttons {
    display:flex;flex-direction:column;align-items:stretch;gap:.75rem;
  }
  body.webshop-audit-page .hero-buttons .btn {min-height:50px;width:100%;justify-content:center}
  body.webshop-audit-page .section-pd {padding-block:clamp(2.8rem,10vw,3.8rem)}
  body.webshop-audit-page :is(.grid-2,.grid-3) {grid-template-columns:minmax(0,1fr)}
  body.webshop-audit-page .scorecard-mock {width:100%;max-width:100%}
  body.webshop-audit-page .score-row {gap:.7rem;min-width:0}
  body.webshop-audit-page .score-row span:first-child {min-width:0;overflow-wrap:break-word}
  body.webshop-audit-page .card {padding:clamp(1.2rem,5vw,1.7rem)}
  body.webshop-audit-page .hero-answer {max-width:100%}
  body.webshop-audit-page footer .container > div {
    display:flex;flex-wrap:wrap;align-items:center;gap:.8rem;justify-content:center;
  }
}
@media (max-width:380px) {
  body.homepage #navbar .container {padding-inline:14px}
  body.homepage #navbar .logo {font-size:.88rem}
  body.homepage #navbar .lang-btn {min-width:32px}
  body.homepage #navbar .mobile-menu-btn {width:40px;flex-basis:40px;margin-left:0}
  body.homepage .workspace-copy {padding-inline:20px}
  body.homepage #contact .contact-form {padding:1.05rem}
  body.homepage #contact .contact-choice {font-size:.77rem}
  body.shopify-page .hero h1 {font-size:clamp(2.15rem,10vw,2.6rem)}
  body.shopify-page .builder-body {padding:1rem}
  body.shopify-page #playground .pg-workspace {padding:.62rem}
  body.shopify-page #playground .pg-campaign {grid-template-columns:minmax(0,1fr) 88px}
  body.shopify-page #playground .pg-campaign-body {padding:.85rem .55rem}
  body.shopify-page #playground .pg-campaign-gift {padding:.55rem .2rem}
  body.shopify-page #playground .pg-bowl-art {width:58px;height:52px}
  body.shopify-page #playground .pg-products {gap:.43rem}
  body.shopify-page #playground .pg-product {padding:.5rem}
  body.shopify-page #playground .pg-product-qty {gap:.1rem}
  body.shopify-page #playground .pg-product-qty button {flex-basis:36px;width:36px;height:40px}
  body.resources-page .resource-hero h1 {font-size:clamp(2.15rem,10vw,2.9rem)}
  body.blog-index .blog-header h1 {font-size:clamp(2.2rem,10vw,2.9rem)!important}
  body.webshop-audit-page .nav-inner {padding-inline:16px}
  body.webshop-audit-page .logo {font-size:1.04rem}
}
@media (max-width:767px) and (orientation:landscape) and (max-height:480px) {
  :is(body.homepage,body.shopify-page,body.resources-page,body.blog-index,body.blog-article,body.legacy-service-page,body.webshop-audit-page)
    :is(.mobile-nav,.nav-links.is-open,.audit-nav-links.is-open) {
    max-height:calc(100dvh - 72px);overflow-y:auto;
  }
}