@charset "UTF-8";
:root {
  /* Fluid body font — single source for the whole system.
     Linear interp between (--min-fluid-width, --min-font) and
     (--max-fluid-width, --max-font), clamped at both ends.
     16 → 20 px is the comfortable reading band; the fluid sweep stops at
     1440 px because real reading viewports rarely exceed that. Children
     override the four knobs; the expression itself doesn't change. */
  --min-fluid-width: 390;
  --max-fluid-width: 1440;
  --min-font: 16;
  --max-font: 20;
  --font-size: clamp(
      calc(var(--min-font) * 1px),
      calc(var(--min-font) * 1px + (var(--max-font) - var(--min-font)) * (100vw - var(--min-fluid-width) * 1px) / (var(--max-fluid-width) - var(--min-fluid-width))),
      calc(var(--max-font) * 1px)
  );
  --font-size-2: 0.9em; /* Added for button styles */
  /* Typography.
     Slots: `system` is the raw fallback chain; `body` and `heading` are the
     semantic slots children override (myrvann sets --font-family-body via
     --font-family-sans). --font-family-1 is kept as a legacy alias because
     existing child themes reference it as the system-stack fallback. */
  --font-family-system: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
  --font-family-1: var(--font-family-system);
  --font-family-body: var(--font-family-system);
  --font-family-heading: var(--font-family-system);
  /* Layout variables */
  --inline-width: 33;
  --inline-wide: 46;
  --grid-col: 15; /* default grid column floor, in characters (× --font-size) */
  --min-width: calc(99vw - (var(--font-size) * 3));
  --x-width: calc(var(--font-size) * var(--inline-width));
  --max-width: min(var(--min-width), var(--x-width));
  --wide-width: min(100vw, var(--font-size) * var(--inline-wide));
  --half-width: 1440px;
  --margin: 1.2rem;
  --margin-px: var(--font-size);
  --header-height: 4em;
  --admin: 0px;
  --magic: 360px; /* Default value for responsive layouts */
  /* Colors */
  --bg-color: hsl(36, 24%, 96%);
  --text-color: hsl(65, 17%, 15%);
  --accent-color: hsl(36, 71%, 53%);
  --accent-contrast: hsl(0, 0%, 100%);
  --dark-accent-color: hsl(36, 18%, 38%);
  --light-accent-color: hsla(127, 46%, 33%, 0.25);
  --lightest-color: hsl(0, 0%, 100%);
  --darkest-color: hsl(40, 4%, 14%);
  --shadow-color: hsla(0, 0%, 0%, 0.2);
  --link-color: var(--accent-color);
  /* Spacing */
  --spacing-1: 0.5em;
  --spacing-2: 1em;
  --spacing-3: 2em;
  --spacing-4: 4em;
  /* Form fields — consumed by scss/_forms.scss. Defaults so ousia ships
     working inputs standalone; child themes override these on :root to
     brand the chrome without rewriting selectors (myrvann sets
     --border-radius to 3px, keeps the neutral identical). */
  --border-radius: 0.25rem;
  --border-input-neutral: hsl(0, 0%, 75%);
  /* Muted label colour (infield checkout labels, field hints). Neutral
     grey default; child themes tint it (myrvann → --color-brown-400). */
  --text-color-muted: hsl(0, 0%, 45%);
  /* Validation / error chrome — consumed by the classic-checkout infield
     pattern (scss/woocommerce/checkout/_classic-fields.scss). Plain red
     default; children override (myrvann → terracotta). */
  --border-input-danger: hsl(0, 65%, 45%);
  --text-danger: hsl(0, 65%, 45%);
  /* Animations */
  --time: 320ms;
  --time-slow: 700ms;
  --timing-fly: cubic-bezier(0.19, 1, 0.22, 1);
  --timing-menu: cubic-bezier(0.65, 0.08, 0.07, 1.1);
  --timing-swing: cubic-bezier(0.55, 0, 0.1, 1);
  --timing-swift: cubic-bezier(0.4, 0, 0.2, 1);
  /* Header behavior (controlled by JS) */
  --header-hide-step: 5; /* Percentage per scroll frame */
  /* Mobile menu */
  --menu-width: 14em; /* Slide-out panel width */
  --submenu-toggle-size: 2.75em; /* Touch target for submenu buttons (44px at 16px base) */
}

/* Bridge for WP block-editor layout vars (Gutenberg #60413) is injected
   conditionally from inc/gutenberg.php — only when no theme.json is present.
   With theme.json, WordPress emits the same vars on `body` natively. */
.admin-bar {
  --admin: 32px;
}

/* Vertical rhythm — body text */
p {
  margin-top: 0;
  margin-bottom: 1.5rem;
}

/* Heading hierarchy.
   Sizes are em-multiples of body, so they ride the fluid --font-size sweep
   instead of layering a second fluid curve on top (which used to push h1
   past 100px on wide viewports). Modular scale ratio ≈ 1.25 (major third):
   restrained but legible, with h5 carrying weight rather than size and h6
   functioning as a small label tier. */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-family-heading);
  line-height: 1.2;
  margin-top: 1.5em;
  margin-bottom: 0.5em;
  font-weight: 500;
}

h1 {
  font-size: 2.25em;
} /* 36 → 45 px */
h2 {
  font-size: 1.75em;
} /* 28 → 35 px */
h3 {
  font-size: 1.375em;
} /* 22 → 27.5 px */
h4 {
  font-size: 1.125em;
} /* 18 → 22.5 px */
h5 {
  font-size: 1em;
  font-weight: 600;
}

h6 {
  font-size: 0.875em; /* 14 → 17.5 px */
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

:root {
  --wp--style--global--content-size: var(--max-width);
  --wp--style--global--wide-size: var(--wide-width);
  --wp--style--block-gap: 1.5rem;
}

:where(.is-layout-flow) > *,
:where(.is-layout-constrained) > * {
  margin-block-start: var(--wp--style--block-gap);
  margin-block-end: 0;
}
:where(.is-layout-flow) > :first-child,
:where(.is-layout-constrained) > :first-child {
  margin-block-start: 0;
}
:where(.is-layout-flow) > :last-child,
:where(.is-layout-constrained) > :last-child {
  margin-block-end: 0;
}

body .is-layout-flex {
  display: flex;
}

.is-layout-flex {
  flex-wrap: wrap;
  align-items: center;
  gap: var(--wp--style--block-gap);
}
.is-layout-flex > :is(*, div) {
  margin: 0;
}

body .is-layout-grid {
  display: grid;
}

.is-layout-grid {
  gap: var(--wp--style--block-gap);
}
.is-layout-grid > :is(*, div) {
  margin: 0;
}

:where(.is-layout-grid) {
  grid-template-columns: repeat(auto-fit, minmax(min(var(--font-size) * var(--grid-col), 100%), 1fr));
}

.grid-matrix {
  container-type: inline-size;
}
.grid-matrix > * {
  grid-column: span var(--base-span, 1);
}
@container (min-width: 34em) {
  .grid-matrix > * {
    grid-column: span var(--mid-span, 1);
  }
}
@container (min-width: 62em) {
  .grid-matrix > * {
    grid-column: auto;
  }
}

.wp-block-group.grid-matrix {
  gap: var(--matrix-gap, var(--wp--style--block-gap));
}

:where(input[type=text],
input[type=email],
input[type=tel],
input[type=url],
input[type=password],
input[type=search],
input[type=number],
input[type=date],
input[type=time],
input[type=datetime-local],
input[type=month],
input[type=week],
select,
textarea) {
  box-sizing: border-box;
  max-width: 100%;
  font: inherit;
  font-size: max(1rem, 16px);
  line-height: 1.4;
  min-height: 2.75rem;
  padding: 0.6em 0.85em;
  color: inherit;
  background-color: var(--bg-color);
  border: 1px solid var(--border-input-neutral);
  border-radius: var(--border-radius);
  transition: border-color 120ms ease, box-shadow 120ms ease;
  appearance: none;
}

:where(textarea) {
  min-height: 6rem;
  resize: vertical;
}

:where(select) {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none'%3E%3Cpath d='M1 1L6 6L11 1' stroke='currentColor' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.85rem center;
  padding-right: 2.25rem;
}

:where(input[type=text],
input[type=email],
input[type=tel],
input[type=url],
input[type=password],
input[type=search],
input[type=number],
input[type=date],
input[type=time],
input[type=datetime-local],
input[type=month],
input[type=week],
select,
textarea):focus-visible {
  outline: none;
  border-color: var(--accent-color);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent-color) 25%, transparent);
}

:where(.form-row, .woocommerce-form-row) {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  margin: 0 0 1rem;
}
:where(.form-row, .woocommerce-form-row) > label {
  margin: 0;
  line-height: 1.4;
}
:where(.form-row, .woocommerce-form-row) :where(input:not([type=checkbox]):not([type=radio]), select, textarea) {
  width: 100%;
}

:where(.form-row, .woocommerce-form-row) .required {
  color: var(--accent-color);
  text-decoration: none;
}

.password-input {
  display: block;
  width: 100%;
}
.password-input .show-password-input {
  display: none;
}

.alignright {
  float: right;
}

.alignleft {
  float: left;
}

.alignfull:not(.wp-block-columns, p, h1) {
  width: 100%;
  margin-right: 0;
  margin-left: 0;
  max-width: 100%;
}
.alignfull:not(.wp-block-columns, p, h1) img {
  height: auto;
  max-height: 100vh;
  object-fit: cover;
}

.alignwide img {
  height: auto;
  max-height: 100vh;
  object-fit: cover;
}

.wc-block-grid__products .wc-block-grid__product-image img {
  height: auto;
}

.wp-block-image img {
  height: auto;
}

.wp-block-cover {
  overflow: hidden;
}

@media (max-width: 768px) {
  .wp-block-image {
    margin: 1em auto;
    width: 100%;
  }
  .wp-block-cover {
    margin: 0;
    max-width: 100%;
  }
}
.wp-block-image figure.aligncenter {
  margin: 0;
  display: grid;
  place-content: center;
}

.wp-block-media-text__content * {
  max-width: 27em;
}

.has-media-on-the-right .wp-block-media-text__content {
  display: flex;
  flex-direction: column;
  align-content: flex-end;
  flex-wrap: wrap;
}

/* Moved to central layout pattern in style.scss */
@media (max-width: 767px) {
  figcaption {
    margin-left: var(--font-size);
    margin-right: var(--font-size);
  }
}

/* Moved to central layout pattern in style.scss */
section > table {
  /* Additional styles can be added here if needed */
}

.nav-links {
  display: flex;
  line-height: 1.1;
  margin: 4em 0;
}

.nav-next {
  text-align: right;
}

.nav-links a:hover {
  text-decoration: none;
}
.nav-links a:hover .post-title {
  text-decoration: underline;
}

a.more-link {
  display: block;
  text-align: right;
}

/*
 * All quickfixes have been moved to their appropriate files:
 * - figcaption and section > table styles moved to _blocks.scss
 * - .products .product img and span.onsale styles moved to woocommerce/_archive.scss
 */
/**
 * Responsive Image System - Final Implementation
 * WooCommerce Optimization for Norwegian Market
 *
 * 6 Image Sizes: 1080, 1179, 1206, 1320, 1440, 1728
 * 45 device variants covered
 *
 * @version 4.1.0
 * @since 2026-01-28
 */
:root {
  --magic: 393px;
}

body {
  /* =========================================================================
     360px - Samsung S21-S25 standard, iPhone 12 mini
     All 3.0 DPR → 1080px
     ========================================================================= */
  /* =========================================================================
     361-383px - Rare range, includes iPhone 13 mini (375px, 3.0 DPR)
     Default 393px serves 1179px → 4.6% crop on 375px (acceptable)
     ========================================================================= */
  /* No rule needed - default handles this */
  /* =========================================================================
     384px - Samsung Ultra vs Samsung Plus (ONLY viewport needing DPR split)
     Ultra: 3.75 DPR → 1440px
     Plus: 2.8 DPR → 1080px (384 × 2.8 = 1075, serve 1080)
     ========================================================================= */
  /* =========================================================================
     385-389px - Bridge range
     Default 393px → 1179px works fine
     ========================================================================= */
  /* No rule needed - default handles this */
  /* =========================================================================
     390-392px - iPhone 12, 12 Pro, 13, 13 Pro, 14, 14 Pro
     All 3.0 DPR → 1179px (390 × 3 = 1170, served 1179 = 0.8% crop)
     ========================================================================= */
  /* No rule needed - default 393px serves 1179px */
  /* =========================================================================
     393-401px - iPhone 15, 15 Pro, 16
     All 3.0 DPR → 1179px (exact match)
     ========================================================================= */
  /* No rule needed - default 393px is exact match */
  /* =========================================================================
     402-411px - iPhone 16 Pro
     3.0 DPR → 1206px (exact match)
     ========================================================================= */
  /* =========================================================================
     412-427px - Pixel 8/9, Samsung A54/A55, Pixel 9 Pro
     Mixed DPR range - needs splitting:
     - Pixel 9, Samsung A (2.625 DPR): 412 × 2.625 = 1082 → serve 1080px
     - Pixel 9 Pro (3.1 DPR): 412 × 3.1 = 1277 → serve 1320px
     ========================================================================= */
  /* =========================================================================
     428-429px - iPhone 12/13/14 Pro Max, iPhone 14 Plus
     All 3.0 DPR → 1320px (428 × 3 = 1284, served 1320 = 2.7% crop)
     ========================================================================= */
  /* =========================================================================
     430-439px - iPhone 15/16 Plus, iPhone 15/16 Pro Max
     All 3.0 DPR → 1320px (430 × 3 = 1290, served 1320 = 2.3% crop)
     ========================================================================= */
  /* =========================================================================
     440-549px - iPhone 16 Pro Max + larger phones/small tablets
     3.0 DPR → 1320px (440 × 3 = 1320, exact match)
     ========================================================================= */
  /* =========================================================================
     550-767px - Tablets, foldables (Samsung Z Fold at 673px)
     Serve 1320px as reasonable tablet size
     ========================================================================= */
  /* =========================================================================
     768px+ - Desktop (all MacBooks)
     All 2.0 DPR → 1728px (864 × 2 = 1728)
     ========================================================================= */
  /* =========================================================================
     DESKTOP 1 DPR (non-Retina monitors)
     Image at ~50% viewport, DPR 1 → --magic = physical pixels directly
     ========================================================================= */
  /* 768-1023: half = 384-512 → 360px (below half) */
  /* 1024-1279: half = 512-640 → 640px (at half) */
  /* 1280-2159: half = 640-1080 → 1080px (above half) */
}
@media (max-width: 360px) {
  body {
    --magic: 360px;
  }
}
@media (min-width: 384px) and (max-width: 384px) and (-webkit-min-device-pixel-ratio: 3.5) {
  body {
    --magic: 384px; /* → 1440px */
  }
}
@media (min-width: 384px) and (max-width: 384px) and (-webkit-max-device-pixel-ratio: 3.4) {
  body {
    --magic: 360px; /* → 1080px */
  }
}
@media (min-width: 402px) and (max-width: 411px) {
  body {
    --magic: 402px;
  }
}
@media (min-width: 412px) and (max-width: 427px) and (-webkit-max-device-pixel-ratio: 2.9) {
  body {
    --magic: 360px; /* → 1080px */
  }
}
@media (min-width: 412px) and (max-width: 427px) and (-webkit-min-device-pixel-ratio: 2.9) {
  body {
    --magic: 440px; /* → 1320px */
  }
}
@media (min-width: 428px) and (max-width: 429px) {
  body {
    --magic: 440px;
  }
}
@media (min-width: 430px) and (max-width: 439px) {
  body {
    --magic: 440px;
  }
}
@media (min-width: 440px) and (max-width: 549px) {
  body {
    --magic: 440px;
  }
}
@media (min-width: 550px) and (max-width: 767px) {
  body {
    --magic: 440px;
  }
}
@media (min-width: 768px) {
  body {
    --magic: 864px;
  }
}
@media (min-width: 600px) and (max-width: 768px) {
  body {
    --magic: 640px;
  }
}
@media (min-width: 768px) and (max-width: 1023px) {
  body {
    --magic: 360px;
  }
}
@media (min-width: 1024px) and (max-width: 1919px) {
  body {
    --magic: 50vw;
  }
}
@media (min-width: 1920px) {
  body {
    --magic: 1080px;
  }
}

/* Mobile: Full-width with centered crop */
@media (max-width: 767px) {
  .woocommerce-product-gallery {
    width: 100%;
    overflow: hidden;
  }
  .woocommerce-product-gallery__image {
    overflow: hidden;
  }
  .woocommerce-product-gallery__image img.wp-post-image {
    width: var(--magic);
    transform: translateX(calc((var(--magic) - 100vw) / -2));
  }
}
/* Desktop: 50/50 layout */
@media (min-width: 768px) {
  .woocommerce-product-gallery {
    width: var(--magic);
  }
  .summary {
    width: calc(100% - var(--magic));
  }
}
/* Defult Covers:
 * iPad Pro 11": 834 × 1194
 * iPad Air (all recent): 820 × 1180
 * iPad 10th gen: 820 × 1180
 */
@media only screen and (min-width: 1024px) and (max-width: 1024px) and (orientation: portrait) and (-webkit-device-pixel-ratio: 2) {
  /* Covers:
   * iPad Pro 12.9": 1024 × 1366
   */
  body {
    --magic: 1080px;
  }
  main .product .summary {
    width: calc(100% - var(--magic));
    margin: 0;
  }
}
@media only screen and (min-width: 1180px) and (max-width: 1366px) and (orientation: landscape) and (-webkit-device-pixel-ratio: 2) {
  /* Covers:
   * iPad Pro 12.9": 1366 × 1024
   * iPad Pro 11": 1194 × 834
   * iPad Air (all recent): 1180 × 820
   * iPad 10th gen: 1180 × 820
   */
  body {
    --magic: 720px;
  }
}
@media only screen and (min-width: 1180px) and (max-width: 1366px) and (-webkit-device-pixel-ratio: 2) {
  /* Covers:
   * iPad Pro 12.9": 1366 × 1024
   */
  main .product .summary {
    width: calc(100% - var(--magic)) !important;
    margin: 0 !important;
  }
}
@media only screen and (min-width: 1180px) and (max-width: 1194px) and (orientation: landscape) and (-webkit-device-pixel-ratio: 2) {
  /* Covers:
   * iPad Pro 11": 1194 × 834
   * iPad Air (all recent): 1180 × 820
   * iPad 10th gen: 1180 × 820
   */
  body {
    --magic: 640px;
  }
}
/* Footer — structural foundation.
 *
 * The wrapper styles via the .site-footer class; the #footer id is reserved for
 * the child's JS var-host and is never a styling hook. The component selectors
 * (.footer-columns / .footer-col / .copyright) are flat single-class — not
 * nested under .site-footer — so a child theme restyles them by source order,
 * not by out-specifying a deeper parent selector. Only the element selectors
 * (ul/li/a/h2) are scoped under .site-footer, since bare element rules leak.
 */
.site-footer {
  background: var(--bg-color);
  margin-top: 4em;
  min-height: 20vh;
  padding: 2em 0 0 0;
}
.site-footer ul {
  list-style: none;
  padding: 0;
  margin: 0;
}
.site-footer li {
  display: flex;
  justify-content: center;
}
.site-footer a {
  text-decoration: none;
  color: var(--link-color);
}
.site-footer h2 {
  font-size: 1.4em;
  margin: 0;
}

/* Component hooks — flat (0,1,0). Max-width comes from the central pattern in
   style.scss; the child overrides the grid/gap by source order. */
.footer-columns {
  display: grid;
  gap: 2em;
  justify-content: space-around;
}
@media (min-width: 768px) {
  .footer-columns {
    grid-template-columns: 1fr 1fr 1fr;
  }
}

.footer-col {
  display: grid;
  justify-items: center;
}

.copyright {
  text-align: center;
  padding: 5em 0;
}

/*! Theme Name: Ousia */
/*! Author: Lasse Jellum */
/*! Author URI: https://jellum.net */
/*! Version: 0.4.4 */
/*! Text Domain: ousia */
/*! Requires PHP: 8.0 */
body {
  color: var(--text-color);
  font-size: var(--font-size);
  background-color: var(--bg-color);
  margin: 0;
  font-family: var(--font-family-body);
  line-height: 1.5;
}

/* Central responsive layout pattern - elements that should be constrained to max-width and centered.
   The principle: anywhere rendered text/content lives, apply max-width + margin-inline: auto.
   --max-width itself bakes in the side gutter (via the --min-width clamp), so content never
   touches the viewport edge — even inside deeply nested layout blocks.
   Target known content hosts; never target .alignfull > *, since blocks like wp:cover and
   wp:media-text have structural children (background image, dim layer, media slot) that
   must stay full-width. The hosts:
     - .wp-block-cover__inner-container — always emitted by wp:cover
     - .wp-block-group__inner-container — emitted by plain wp:group without theme.json (backcompat)
     - .is-layout-constrained — emitted by wp:group with layout:constrained AND by wp:cover's
       modern inner-container
     - .wp-block-column — every column hosts content; same constraint applies
   The :not() exclusions mirror WP's own auto-generated rule (alignleft/right/full escape). */
header > *,
article > *,
section > *,
footer > *,
.wp-block-cover__inner-container > :not(.alignleft):not(.alignright):not(.alignfull),
.wp-block-group__inner-container > :not(.alignleft):not(.alignright):not(.alignfull),
.is-layout-constrained > :not(.alignleft):not(.alignright):not(.alignfull),
.wp-block-column > :not(.alignleft):not(.alignright):not(.alignfull),
.wp-block-embed,
.wp-block-image,
.wp-block-pullquote,
figcaption,
section > table,
.woocommerce-order > *,
.footer-columns {
  max-width: var(--max-width);
  margin-inline: auto;
}

.alignwide {
  --max-width: var(--wide-width);
}

/* Default link treatment in content regions.
   Brand color, no underline at rest, underline on hover. Reaches main content,
   single-product pages, and prose-shaped link surfaces inside the numenu (cart
   line-item titles). The numenu's menu rows and button-shaped pills carry
   their own colour treatment lower in the cascade. */
main a,
.product a,
.lean-cart a {
  color: var(--link-color);
  font-weight: 400;
  font-variant: normal;
  text-decoration: none;
}
main a:hover, main a:focus-visible,
.product a:hover,
.product a:focus-visible,
.lean-cart a:hover,
.lean-cart a:focus-visible {
  text-decoration: underline;
}

/*# sourceMappingURL=style.css.map */