@font-face {
  font-family: "Akkurat Mono";
  src: url("assets/Akkurat-Mono.woff2") format("woff2"), url("assets/Akkurat-Mono.otf") format("opentype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

/* Base and shared controls */
:root { --grey: #D5D5D5; --navbar-height: 60px; --menu-spacing: clamp(16px, calc(5vw - 15px), 45px); }

* { box-sizing: border-box; font-family: inherit; }
img { max-width: 100%; height: auto; object-fit: contain; }
body { margin: 0; padding-top: var(--navbar-height); min-height: 100vh; min-height: 100dvh; display: flex; flex-direction: column; color: #000; background: #fff; font: 10px/1.5 "Akkurat Mono", monospace; }
button, input, textarea, select { font: inherit; color: inherit; border-radius: 0; }
button, a { -webkit-tap-highlight-color: transparent; }
a { color: inherit; text-decoration: none; }
button { cursor: pointer; border: 0; padding: 0; background: none; }
a:hover, .text-button:hover { text-decoration: underline; text-underline-offset: 3px; }
button:not(.text-button):not(.icon-button):not(.product-image-control):hover { outline: 1px solid #000; outline-offset: -1px; border-color: #000; }
button:not(.text-button):not(.icon-button):not(.product-image-control):active { background: #000; color: #fff; border-color: #000; }
:focus-visible { outline: 1px solid #000; outline-offset: 5px; }
:where(input:not([type="checkbox"]):not([type="radio"]):not([type="button"]):not([type="submit"]):not([type="reset"]):not([type="range"]):not([type="color"]):not([type="file"]), textarea) {
  border: 0;
  border-bottom: 1px solid var(--grey);
  background: transparent;
  outline: none;
  box-shadow: none;
}
input:focus, textarea:focus { border-bottom-color: #000; outline: none; box-shadow: none; }
input::placeholder, textarea::placeholder { font-family: inherit; color: var(--grey); opacity: 1; }

/* Keep typing fields large enough to avoid mobile focus zoom. */
@media (any-pointer: coarse), (max-width: 944px) {
  input:not([type="checkbox"]):not([type="radio"]):not([type="button"]):not([type="submit"]):not([type="reset"]):not([type="range"]):not([type="color"]):not([type="file"]):not([type="hidden"]),
  textarea,
  select,
  [contenteditable]:not([contenteditable="false"]) {
    font-size: max(16px, 1em);
  }
}
[hidden] { display: none !important; }
.visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
.skip-link { position: fixed; top: -100px; left: 16px; padding: 10px; background: #fff; z-index: 40; }
.skip-link:focus { top: 8px; }
/* Navigation */
.site-header { position: fixed; inset: 0 0 auto; z-index: 20; background: #fff; height: var(--navbar-height); padding: 0 var(--menu-spacing); display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; }
.desktop-nav { display: flex; align-items: center; gap: var(--menu-spacing); }
.desktop-nav a, .desktop-nav button { display: inline-flex; align-items: center; min-height: 44px; }
.nav-right { justify-content: flex-end; }
.brand { display: flex; align-items: center; justify-content: center; min-height: 44px; }
.brand img { display: block; width: 118px; }
.icon-button { width: 44px; height: 44px; display: inline-flex; align-items: center; justify-content: center; }
.icon-button img { display: block; }
.mobile-menu-button, .mobile-bag-button, .mobile-menu { display: none; }
/* Page layouts and images */
main { width: min(450px, calc(100% - 28px)); margin: 0 auto; flex: 1; display: flex; flex-direction: column; }
.image-placeholder { width: 100%; height: auto; aspect-ratio: 3 / 4; flex-shrink: 0; border: 1px solid var(--grey); }
.homepage-image { display: block; width: 100%; height: auto; flex-shrink: 0; }
.homepage-picture { display: block; width: 100%; flex-shrink: 0; }
.gallery-item > img, .shop-item > img, .shop-product-link > img, .product-images img, .bag-item > img { display: block; width: 100%; }

/* Gallery and shop */
.gallery-grid { width: min(916px, calc(100% - 32px)); display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 16px; row-gap: 60px; align-content: start; padding-bottom: 60px; }
.gallery-item > img { aspect-ratio: 3 / 4; object-fit: cover; object-position: center; }
.gallery-item { margin: 0; min-width: 0; grid-column: auto; }
.gallery-caption { display: flex; flex-direction: column; gap: 12px; margin-top: 16px; }
.gallery-caption p { margin: 0; min-height: 15px; }
.shop-grid { width: min(915px, calc(100% - 32px)); display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 60px 16px; align-content: start; padding-bottom: 60px; }
.shop-item { min-width: 0; grid-column: auto; }
.gallery-grid, .shop-grid { grid-auto-flow: row; }
.shop-caption { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; margin-top: 12px; padding: 0 10px; }
.shop-caption h2, .shop-caption p { margin: 0; font: inherit; }
.shop-caption p { flex-shrink: 0; }
.shop-stock-status { margin: 5px 10px 0; font: inherit; }
.shop-product-link { display: block; }
/* Product */
.product-page { width: min(915px, calc(100% - 32px)); display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; align-content: start; padding-bottom: 60px; }
.product-media { position: relative; min-width: 0; }
.product-images { display: flex; flex-direction: column; gap: 16px; }
.product-back { position: fixed; top: calc(var(--navbar-height) - 7px); left: max(0px, calc((100% - 915px) / 2 - 44px)); z-index: 1; width: 44px; height: 44px; display: flex; align-items: center; justify-content: center; }
.product-back img, .product-image-control img { opacity: .2; }
.product-back:hover, .product-back:active { text-decoration: none; }
:is(.product-back, .product-image-control):is(:hover, :active) img { opacity: 1; filter: brightness(0); }
.product-back-mobile, .product-image-control { display: none; }
.product-details { position: sticky; top: var(--navbar-height); display: grid; grid-template-rows: repeat(6, 60px); align-items: center; align-self: start; padding-top: 60px; min-width: 0; }
.product-heading { display: flex; flex-direction: column; gap: 5px; grid-row: 1; }
.product-heading h1, .product-heading p, .product-price, .product-description { margin: 0; font: inherit; }
.product-colour:empty { display: none; }
.product-price { grid-row: 2; text-align: left; }
.product-sizes { grid-row: 3; display: flex; gap: 16px; margin: 0; padding: 0; border: 0; min-width: 0; }
.product-sizes label { position: relative; cursor: pointer; }
.product-sizes input { position: absolute; opacity: 0; width: 1px; height: 1px; margin: 0; }
.product-sizes input:disabled + span { opacity: .4; text-decoration: line-through; cursor: not-allowed; }
.product-sizes input:checked + span { text-decoration: underline; text-underline-offset: 3px; }
.product-sizes input:focus-visible + span { outline: 1px solid #000; outline-offset: 5px; }
.product-action { grid-row: 4; display: flex; align-items: center; gap: 16px; min-width: 0; }
#product-purchase { border: 1px solid var(--grey); height: 24px; padding: 0 10px; flex-shrink: 0; }
#product-purchase:hover, #product-purchase:active { border-color: #000; }
#product-purchase[data-unavailable="sold out"] { border: 0; padding: 0; outline: none; background: transparent; color: inherit; cursor: default; }
.product-purchase-status { margin: 0; }
.product-description { grid-row: 6; }
@media (min-width: 945px) {
  .product-details.is-one-size { grid-template-rows: repeat(5, 60px); }
  .product-details.is-one-size .product-action { grid-row: 3; }
  .product-details.is-one-size .product-description { grid-row: 5; }
}
/* Bag drawer */
body.bag-open { overflow: hidden; }
.bag-backdrop { position: fixed; inset: var(--navbar-height) 0 0; z-index: 11; background: rgb(255 255 255 / .35); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
.bag-drawer { position: fixed; top: var(--navbar-height); right: 0; bottom: 0; width: min(450px, 100%); z-index: 12; display: flex; flex-direction: column; background: #fff; }
.bag-drawer-header { display: none; }
.bag-contents { position: relative; flex: 1; min-height: 0; overflow-y: auto; padding: 16px; }
.bag-empty { position: absolute; top: calc(var(--navbar-height) * 2); left: 16px; right: 16px; margin: 0; text-align: center; transform: translateY(-50%); }
.bag-items, .bag-page-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 16px; }
.bag-item { display: grid; grid-template-columns: minmax(0, 40%) minmax(0, 1fr); gap: 16px; align-items: start; }
.bag-item-details { min-width: 0; overflow-wrap: anywhere; }
.bag-item-details h2, .bag-item-details p { margin: 0; font: inherit; }
.bag-item-details h2 + p { margin-top: 5px; }
.bag-item-options { display: flex; flex-direction: column; gap: 5px; margin-top: 16px; }
.bag-remove { margin-top: 16px; }
.bag-status { margin: 16px 0 0; }
.bag-drawer-footer { padding: 16px; flex-shrink: 0; background: #fff; }
.bag-shop { display: flex; width: 100%; height: 60px; align-items: center; justify-content: center; border: 1px solid #000; }
.bag-checkout { border-color: var(--grey); }
.bag-shop:hover { text-decoration: none; }
.bag-shop:active { background: #000; color: #fff; }
.bag-summary { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-top: 16px; padding: 0 30px; }
.bag-summary p { margin: 0; }
.bag-subtotal { margin-left: 16px; }
/* Bag page */
.bag-page { width: min(915px, calc(100% - 32px)); padding: 30px 0 60px; }
.bag-page-headings, .bag-page-row { display: grid; grid-template-columns: minmax(0, 1fr) 90px 217.5px; gap: 16px; }
.bag-page-headings { margin-bottom: 30px; }
.bag-page-headings span:not(:first-child) { text-align: right; }
.bag-page-row { align-items: center; }
.bag-page-product { display: flex; align-items: center; gap: 16px; min-width: 0; }
.bag-page-image { display: block; width: 160px; height: auto; flex-shrink: 0; }
.bag-page-details { min-width: 0; }
.bag-page-description { display: flex; flex-direction: column; gap: 16px; overflow-wrap: anywhere; }
.bag-page-details h2, .bag-page-details p, .bag-page-line-total { margin: 0; font: inherit; }
.bag-page-remove { margin-top: 16px; }
.bag-page-quantity { display: flex; align-items: center; justify-content: flex-end; gap: 16px; }
.bag-page-quantity button { color: var(--grey); }
.bag-page-quantity button:hover, .bag-page-quantity button:active { text-decoration: none; }
.bag-page-quantity button:active { color: #000; }
.bag-page-quantity-label { display: none; }
.bag-page-line-total { text-align: right; }
.bag-page-footer { border-top: 1px solid #000; margin-top: 16px; padding-top: 16px; text-align: right; }
.bag-page-total { margin: 0; }
.bag-page-shipping { margin: 16px 0; font-size: 8px; }
.bag-page-checkout, .bag-page-shop { display: inline-flex; width: 217.5px; height: 24px; justify-content: center; align-items: center; border: 1px solid var(--grey); }
.bag-page-empty { text-align: center; margin: 60px 0; }
.bag-page-status { margin: 16px 0 0; }
.bag-page-view .text-button[data-panel="bag"], .text-button[data-panel="bag"][aria-expanded="true"], a[aria-current="page"] { text-decoration: underline; text-underline-offset: 3px; }

/* Not found */
.not-found { position: relative; text-align: center; }
.not-found-message { position: absolute; top: calc(var(--navbar-height) * 1.5); width: 100%; transform: translateY(-50%); }
.not-found h1, .not-found p { margin: 0; font: inherit; }
/* Newsletter */
.newsletter { flex: 1 0 auto; display: flex; flex-direction: column; justify-content: center; padding: 13px 16px; overflow: clip; }
.newsletter-pending { visibility: hidden; }
.newsletter-trap { position: absolute; left: -5000px; }
/* The heading and input's internal leading provide the remaining visible gap. */
.newsletter h2 { margin: 0 0 3px; font-size: 10px; font-weight: 400; }
.newsletter input { display: block; width: 100%; height: 28px; padding: 0 10px; }
#newsletter-consent { margin: 13px 0 14px; font-size: 8px; }
.email-field { position: relative; height: 27px; border-bottom: 1px solid var(--grey); }
.email-field:focus-within { border-bottom-color: #000; }
/* 16px logical text scaled to 10px visually retains the mobile focus size. */
.newsletter #email { position: absolute; top: 0; left: 0; width: 160%; height: 43.2px; padding: 0 16px; font-size: 16px; line-height: 1.5; border: 0; transform: scale(.625); transform-origin: top left; }
.newsletter #email[aria-invalid="true"] { padding-right: 136px; }
#email-error { position: absolute; right: 0; top: 14px; transform: translateY(-50%); font-size: 8px; pointer-events: none; }
.submit-button { display: block; border: 1px solid var(--grey); width: 150px; height: 24px; }
#newsletter-status { margin: 14px 0 0; line-height: 1.7; }
/* About and policy sections */
.about-page { width: min(915px, calc(100% - 32px)); padding-top: calc((var(--navbar-height) - 15px) / 2); }
.about-tabs { display: flex; justify-content: center; gap: 40px; line-height: 15px; }
.about-tabs a { white-space: nowrap; }
.about-tabs a[aria-current="location"] { text-decoration: underline; text-underline-offset: 3px; }
.about-copy { width: min(450px, 100%); margin: calc(var(--navbar-height) - 15px) auto 60px; text-align: center; }
.about-copy p { margin: 0; }

/* Contact page */
.contact-page { padding: 76px 0 60px; }
/* Internal font spacing completes the visible 16px and 32px gaps. */
.contact-fields { display: flex; flex-direction: column; gap: 29px; }
.contact-field label { display: block; line-height: 15px; margin-bottom: 2px; }
.contact-input { position: relative; height: 23px; border-bottom: 1px solid var(--grey); }
.contact-input:focus-within { border-color: #000; }
.contact-message { position: relative; height: 106px; border: 1px solid var(--grey); }
.contact-field label[for="contact-message"] { margin-bottom: 5px; }
.contact-message:focus-within { border-color: #000; }
/* Retain a 16px logical font for focus, with 10px visible text. */
.contact-field input, .contact-field textarea { display: block; position: absolute; top: 0; left: 0; width: 160%; font-size: 16px; line-height: 24px; border: 0; transform: scale(.625); transform-origin: top left; }
.contact-field input { height: 38.4px; padding: 0 4.8px; }
.contact-field input[aria-invalid="true"], .contact-field textarea[aria-invalid="true"] { padding-right: 192px; }
.contact-field-error { position: absolute; right: 0; top: 12.5px; transform: translateY(-50%); font-size: 8px; pointer-events: none; }
.contact-message .contact-field-error { top: 6px; right: 3px; transform: none; }
.contact-field textarea { height: 166.4px; padding: 4.8px; resize: none; }
.contact-submit { display: block; width: 150px; height: 24px; margin-top: 32px; border: 1px solid var(--grey); }
.contact-status { margin: 16px 0 0; }
.contact-links { display: flex; justify-content: center; gap: 100px; margin-top: 80px; }


/* Responsive layouts */
@media (max-width: 944px) {
  .bag-page { width: min(450px, calc(100% - 32px)); padding-top: 0; }
  .bag-page-headings { display: none; }
  .bag-page-row { grid-template-columns: minmax(0, 30%) minmax(0, 1fr); grid-template-rows: auto auto auto; column-gap: 16px; row-gap: 16px; align-items: start; }
  .bag-page-product, .bag-page-details { display: contents; }
  .bag-page-image { grid-column: 1; grid-row: 1 / 4; width: 100%; }
  .bag-page-description { grid-column: 2; grid-row: 1; gap: 0; }
  .bag-page-unit-price { display: none; }
  .bag-page-quantity { grid-column: 2; grid-row: 2; justify-content: flex-start; gap: 8px; padding-right: 40px; }
  .bag-page-quantity-label { display: inline; }
  .bag-page-line-total { grid-column: 2; grid-row: 2; justify-self: end; }
  .bag-page-remove { grid-column: 2; grid-row: 3; margin: 0; justify-self: start; align-self: end; }
  .bag-page-checkout, .bag-page-shop { width: 100%; }
  .shop-grid { width: min(705px, calc(100% - 32px)); grid-template-columns: repeat(3, minmax(0, 1fr)); }

  .gallery-grid { width: min(450px, calc(100% - 32px)); grid-template-columns: minmax(0, 1fr); }
  .product-page { width: min(450px, calc(100% - 32px)); grid-template-columns: minmax(0, 1fr); }
  .product-back { top: var(--navbar-height); left: max(16px, calc((100% - 450px) / 2)); }
  .product-back-desktop { display: none; }
  .product-back-mobile { display: block; }
  .product-image-control { display: flex; position: absolute; top: 50%; transform: translateY(-50%); width: 44px; height: 44px; align-items: center; justify-content: center; }
  .product-image-previous { left: 0; }
  .product-image-next { right: 0; }
  .product-details { position: static; padding: 0; grid-template-columns: minmax(0, 1fr) auto; grid-template-rows: auto auto auto auto; gap: 16px; align-items: start; }
  .product-heading { grid-column: 1; grid-row: 1; }
  .product-price { grid-column: 2; grid-row: 1; padding-right: 11px; text-align: right; }
  .product-currency { display: none; }
  .product-sizes { grid-column: 1; grid-row: 2; align-self: center; }
  .product-action { grid-column: 2; grid-row: 2; }
  .product-details.is-one-size .product-action { grid-column: 1 / -1; }
  .product-description { grid-column: 1 / -1; grid-row: 3; }
  .product-purchase-status { order: -1; }
}

@media (max-width: 734px) {
  .shop-grid { width: min(465px, calc(100% - 32px)); grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 600px) {
  .bag-drawer { inset: 0; width: 100%; z-index: 21; }
  .bag-drawer-header { height: var(--navbar-height); flex-shrink: 0; display: flex; align-items: center; justify-content: space-between; padding: 0 16px; }
  .bag-drawer-title { text-decoration: underline; text-underline-offset: 3px; }
  .bag-drawer-close { margin-right: -17px; }
  .bag-drawer .bag-drawer-close img { width: 10px; height: 10px; }
  .bag-drawer-footer { padding: 0 0 max(16px, env(safe-area-inset-bottom)); }
  .bag-shop { border-left: 0; border-right: 0; }
  .bag-summary { display: none; }
  .bag-item { grid-template-columns: minmax(0, 30%) minmax(0, 1fr); }
  .bag-populated .bag-drawer-footer { padding: 0; }
  .bag-populated .bag-summary { display: flex; margin: 0; min-height: calc(47px + max(16px, env(safe-area-inset-bottom))); }
  main { width: min(450px, calc(100% - 32px)); }
  .gallery-caption { padding: 0 16px; }
  .site-header { padding: 0 16px; }
  .icon-button img { width: 20px; height: auto; }
  .desktop-nav { display: none; }
  .mobile-menu-button, .mobile-bag-button { display: inline-flex; }
  .mobile-menu-button { justify-self: start; margin-left: -12px; }
  .mobile-bag-button { justify-self: end; margin-right: -12px; }
  body.menu-open { overflow: hidden; }
  .mobile-menu { display: block; position: fixed; inset: 0; z-index: 30; background: #fff; padding: calc((var(--navbar-height) - 15px) / 2) 16px; overflow-y: auto; }
  .mobile-menu-header { position: relative; height: 15px; display: flex; align-items: center; }
  .mobile-menu-title { text-decoration: underline; text-underline-offset: 3px; }
  .mobile-menu-close { position: absolute; right: -17px; top: 50%; transform: translateY(-50%); }
  .mobile-menu-close img { width: 10px; height: 10px; }
  .mobile-menu-links { display: flex; flex-direction: column; align-items: flex-start; gap: 30px; margin-top: 60px; }
  .mobile-menu-links a, .mobile-menu-links button { text-align: left; padding: 0; line-height: 15px; }
  .newsletter { flex: 0 0 auto; justify-content: flex-start; padding-bottom: 24px; }
  .contact-page { padding-top: 60px; }
  .contact-submit { width: 100%; height: 22px; }
  .contact-links { gap: 100px; margin-top: 44px; }
  .about-tabs { flex-direction: column; align-items: flex-start; gap: 12px; }
  .submit-button { width: 82px; height: 22px; font-size: 8px; }
}

/* Backend content preserves uploaded image proportions. */
.homepage-image-link { display: block; width: 100%; flex-shrink: 0; }
.bag-checkout-status { padding: 8px 16px; font-size: 10px; }