@charset "UTF-8";
/*! Theme Name: Ousia */
/*! Author: Lasse Jellum */
/*! Author URI: https://jellum.net */
/*! Version: 0.4.4 */
/*! Text Domain: ousia */
/*! Requires PHP: 8.0 */
:root {
  /* Fluid typography settings */
  --min-fluid-width: 360;
  --max-fluid-width: 1920;
  --min-font: 16;
  --max-font: 40;
  --font-calc: 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)) ));
  --font-size: min(max(var(--min-font) * 1px, var(--font-calc)), var(--max-font) * 1px);
  --font-size-2: 0.9em; /* Added for button styles */
  /* Typography */
  --font-family-1: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  /* 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 */
p {
  margin-top: 0;
  margin-bottom: 1.5rem;
}

/* Heading Styles */
h1, h2, h3, h4 {
  line-height: 1.2;
  margin-top: 2rem;
  margin-bottom: 1rem;
  font-weight: 500;
}

h1 {
  font-size: calc(1.802em + 1.355 * (100vw - var(--min-fluid-width) * 1px) / (var(--max-fluid-width) - var(--min-fluid-width)));
}

h2 {
  font-size: calc(1.602em + 0.767 * (100vw - var(--min-fluid-width) * 1px) / (var(--max-fluid-width) - var(--min-fluid-width)));
}

h3 {
  font-size: calc(1.424em + 0.353 * (100vw - var(--min-fluid-width) * 1px) / (var(--max-fluid-width) - var(--min-fluid-width)));
}

h4 {
  font-size: calc(1.266em + 0.067 * (100vw - var(--min-fluid-width) * 1px) / (var(--max-fluid-width) - var(--min-fluid-width)));
}

/* ───────────────────────────────────────────────────────────────
   Submenu Component
   - Desktop: hover dropdowns (position configurable)
   - Mobile: accordion with height animation
   - Accessible toggle button (plus or chevron icon)

   Icon styles (set via ousia_submenu_icon filter):
   - 'plus' (default): + rotates 45° to ×
   - 'chevron': ∨ flips 180° to ∧
   ─────────────────────────────────────────────────────────────── */
/* ───── Submenu Toggle Button ───── */
.submenu-toggle {
  appearance: none;
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: var(--submenu-toggle-size, 2.75em);
  min-height: var(--submenu-toggle-size, 2.75em);
}
.submenu-toggle:focus {
  outline: none;
}
.submenu-toggle:focus-visible {
  outline: 0.125em solid var(--accent-color);
  outline-offset: 0.125em;
}

/* ───── Icon Base ───── */
.submenu-icon {
  display: block;
  position: relative;
  width: 1em;
  height: 1em;
  transition: transform var(--time) var(--timing-menu);
}

/* ───── Plus Icon (+/×) ───── */
.submenu-icon--plus::before, .submenu-icon--plus::after {
  content: "";
  position: absolute;
  background-color: var(--text-color);
  transition: transform var(--time) var(--timing-menu);
}
.submenu-icon--plus {
  /* Horizontal bar */
}
.submenu-icon--plus::before {
  top: 50%;
  left: 0;
  width: 100%;
  height: 0.125em;
  transform: translateY(-50%);
}
.submenu-icon--plus {
  /* Vertical bar */
}
.submenu-icon--plus::after {
  top: 0;
  left: 50%;
  width: 0.125em;
  height: 100%;
  transform: translateX(-50%);
}

/* Plus expanded: rotate 45° to × */
.show-sub-menu > .submenu-toggle .submenu-icon--plus {
  transform: rotate(45deg);
}

/* ───── Chevron Icon (∨/∧) ───── */
.submenu-icon--chevron::before, .submenu-icon--chevron::after {
  content: "";
  position: absolute;
  top: 35%;
  width: 0.5em;
  height: 0.125em;
  background-color: var(--text-color);
  transition: transform var(--time) var(--timing-menu);
}
.submenu-icon--chevron {
  /* Left arm of chevron */
}
.submenu-icon--chevron::before {
  left: 15%;
  transform: rotate(45deg);
  transform-origin: center;
}
.submenu-icon--chevron {
  /* Right arm of chevron */
}
.submenu-icon--chevron::after {
  right: 15%;
  transform: rotate(-45deg);
  transform-origin: center;
}

/* Chevron expanded: flip 180° */
.show-sub-menu > .submenu-toggle .submenu-icon--chevron {
  transform: rotate(180deg);
}

/* ───── Desktop Dropdowns ───── */
@media (min-width: 769px) {
  .menu-item-has-children {
    position: relative;
  }
  /* Hide toggle on desktop (hover reveals submenu) */
  .submenu-toggle {
    display: none;
  }
  .sub-menu {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    display: flex;
    justify-content: center;
    opacity: 0;
    visibility: hidden;
    transition: opacity var(--time), visibility var(--time);
    background-color: var(--bg-color);
    padding: var(--spacing-1) 0;
    list-style: none;
    margin: 0;
  }
  .menu-item-has-children:hover > .sub-menu,
  .menu-item-has-children:focus-within > .sub-menu {
    opacity: 1;
    visibility: visible;
  }
  /* ───── Dropdown Position Variants ───── */
  /* Left-aligned variant */
  .dropdown-left .sub-menu,
  [data-dropdown=left] .sub-menu {
    left: 0;
    right: auto;
    min-width: 12em;
  }
  /* Right-aligned variant */
  .dropdown-right .sub-menu,
  [data-dropdown=right] .sub-menu {
    left: auto;
    right: 0;
    min-width: 12em;
  }
  /* Auto-width (match parent) */
  .dropdown-auto .sub-menu,
  [data-dropdown=auto] .sub-menu {
    left: 0;
    right: auto;
    min-width: 100%;
  }
  /* Scope the horizontal flex layout to the header menu only. A bare `nav`
     selector here leaks into every other <nav> on the page — notably
     .woocommerce-MyAccount-navigation (an account sidebar that wants a
     vertical column) and the numenu panels. */
  #menu,
  #menu ul,
  #menu li {
    display: flex;
    height: 100%;
    align-items: center;
  }
}
/* ───── Mobile Accordion ───── */
@media (max-width: 768px) {
  .menu-item-has-children {
    position: relative;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
  }
  .menu-item-has-children > a {
    flex: 1;
    min-width: 0;
  }
  .submenu-toggle {
    position: relative;
    flex-shrink: 0;
  }
  .sub-menu {
    width: 100%;
    height: 0;
    overflow: hidden;
    padding-left: 0.8em;
    transition: height var(--time) ease;
    list-style: none;
    margin: 0;
  }
  .show-sub-menu > .sub-menu {
    height: auto;
    padding-bottom: 0.5em;
  }
  .sub-menu > li > a {
    font-weight: 200;
  }
  #menu-container {
    overflow-y: auto;
  }
}
/* ───── Reduced Motion ───── */
@media (prefers-reduced-motion: reduce) {
  .submenu-icon,
  .submenu-icon::before,
  .submenu-icon::after,
  .sub-menu {
    transition: none !important;
  }
}
: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
     ========================================================================= */
}
@media (max-width: 360px) {
  body {
    --magic: 360px;
  }
}
body {
  /* =========================================================================
     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)
     ========================================================================= */
}
@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 */
  }
}
body {
  /* =========================================================================
     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)
     ========================================================================= */
}
@media (min-width: 402px) and (max-width: 411px) {
  body {
    --magic: 402px;
  }
}
body {
  /* =========================================================================
     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
     ========================================================================= */
}
@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 */
  }
}
body {
  /* =========================================================================
     428-429px - iPhone 12/13/14 Pro Max, iPhone 14 Plus
     All 3.0 DPR → 1320px (428 × 3 = 1284, served 1320 = 2.7% crop)
     ========================================================================= */
}
@media (min-width: 428px) and (max-width: 429px) {
  body {
    --magic: 440px;
  }
}
body {
  /* =========================================================================
     430-439px - iPhone 15/16 Plus, iPhone 15/16 Pro Max
     All 3.0 DPR → 1320px (430 × 3 = 1290, served 1320 = 2.3% crop)
     ========================================================================= */
}
@media (min-width: 430px) and (max-width: 439px) {
  body {
    --magic: 440px;
  }
}
body {
  /* =========================================================================
     440-549px - iPhone 16 Pro Max + larger phones/small tablets
     3.0 DPR → 1320px (440 × 3 = 1320, exact match)
     ========================================================================= */
}
@media (min-width: 440px) and (max-width: 549px) {
  body {
    --magic: 440px;
  }
}
body {
  /* =========================================================================
     550-767px - Tablets, foldables (Samsung Z Fold at 673px)
     Serve 1320px as reasonable tablet size
     ========================================================================= */
}
@media (min-width: 550px) and (max-width: 767px) {
  body {
    --magic: 440px;
  }
}
body {
  /* =========================================================================
     768px+ - Desktop (all MacBooks)
     All 2.0 DPR → 1728px (864 × 2 = 1728)
     ========================================================================= */
}
@media (min-width: 768px) {
  body {
    --magic: 864px;
  }
}
body {
  /* =========================================================================
     DESKTOP 1 DPR (non-Retina monitors)
     Image at ~50% viewport, DPR 1 → --magic = physical pixels directly
     ========================================================================= */
}
@media (min-width: 600px) and (max-width: 768px) {
  body {
    --magic: 640px;
  }
}
body {
  /* 768-1023: half = 384-512 → 360px (below half) */
}
@media (min-width: 768px) and (max-width: 1023px) {
  body {
    --magic: 360px;
  }
}
body {
  /* 1024-1279: half = 512-640 → 640px (at half) */
}
@media (min-width: 1024px) and (max-width: 1919px) {
  body {
    --magic: 50vw;
  }
}
body {
  /* 1280-2159: half = 640-1080 → 1080px (above half) */
}
@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 {
  background: var(--bg-color);
  margin-top: 4em;
  min-height: 20vh;
  padding: 2em 0 0 0;
  /* Layout moved to central pattern in style.scss */
}
#footer .footer-columns {
  display: grid;
  gap: 2em;
  justify-content: space-around;
}
#footer .footer-col {
  display: grid;
  justify-items: center;
}
#footer ul {
  list-style: none;
  padding: 0;
  margin: 0;
}
#footer li {
  display: flex;
  justify-content: center;
}
#footer a {
  text-decoration: none;
  color: var(--link-color);
}
#footer h2 {
  font-size: 1.4em;
  margin: 0;
}
#footer #copyright {
  text-align: center;
  padding: 5em 0;
}
@media (min-width: 768px) {
  #footer .footer-columns {
    grid-template-columns: 1fr 1fr 1fr;
  }
}

body {
  color: var(--text-color);
  font-size: var(--font-size);
  background-color: var(--bg-color);
  margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
  line-height: 1.35;
}

/* 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);
}

main a,
.product a {
  color: var(--link-color);
  font-weight: 400;
  font-variant: normal;
  text-decoration: none;
}
main a:hover,
.product a:hover {
  text-decoration: underline;
}

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