/*
Theme Name: My Research Supply
Theme URI: https://myresearchsupply.com/
Author: My Research Supply
Description: A lightweight block theme for a documentation-led research supply storefront.
Version: 0.5.0
Requires at least: 6.6
Requires PHP: 8.1
Text Domain: mrs
*/

@font-face { font-family: "Manrope"; font-style: normal; font-weight: 500; font-display: swap; src: url("assets/fonts/manrope-500.ttf") format("truetype"); }
@font-face { font-family: "Manrope"; font-style: normal; font-weight: 600; font-display: swap; src: url("assets/fonts/manrope-600.ttf") format("truetype"); }

:root {
  --color-canvas: #faf9f7;
  --color-surface: #f2f1ee;
  --color-surface-strong: #e8e6e1;
  --color-text: #171918;
  --color-text-muted: #646965;
  --color-border: #d8d9d5;
  --color-accent: #174d3a;
  --color-accent-hover: #10392b;
  --color-on-accent: #fff;
  --color-focus: #236a50;
  --color-error: #a13b32;
  --color-success: #2f684d;
  --font-sans: Manrope, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Consolas, monospace;
  --text-xs: .75rem;
  --text-sm: .875rem;
  --text-base: 1rem;
  --text-lg: 1.25rem;
  --text-xl: clamp(1.6rem, 2.5vw, 2.25rem);
  --text-display: clamp(2.6rem, 6vw, 5.75rem);
  --leading-body: 1.6;
  --leading-display: .98;
  --space-1: .25rem;
  --space-2: .5rem;
  --space-3: .75rem;
  --space-4: 1rem;
  --space-6: 1.5rem;
  --space-8: 2rem;
  --space-12: 3rem;
  --space-16: 4rem;
  --space-24: 6rem;
  --content-max: 1280px;
  --reading-max: 720px;
  --gutter: clamp(1rem, 4vw, 3rem);
  --section-space: clamp(4rem, 9vw, 8rem);
  --radius-control: 2px;
  --radius-media: 4px;
  --border-width: 1px;
  --focus-ring: 0 0 0 3px color-mix(in srgb, var(--color-focus) 30%, transparent);
  --transition-fast: 140ms ease;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { background: var(--color-canvas); color: var(--color-text); font-family: var(--font-sans); font-size: var(--text-base); line-height: var(--leading-body); margin: 0; }
img { display: block; height: auto; max-width: 100%; }
a { color: var(--color-accent); text-decoration-thickness: 1px; text-underline-offset: .18em; transition: color var(--transition-fast), text-decoration-color var(--transition-fast); }
a:hover { color: var(--color-accent-hover); }
:where(a, button, input, select, textarea, summary):focus-visible { outline: 2px solid var(--color-focus); outline-offset: 3px; box-shadow: var(--focus-ring); }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { scroll-behavior: auto !important; transition-duration: .01ms !important; animation-duration: .01ms !important; } }
h1, h2, h3, h4 { letter-spacing: -.035em; line-height: 1.12; text-wrap: balance; }
h1 { font-size: clamp(2.4rem, 5vw, 4.5rem); }
h2 { font-size: var(--text-xl); }
p { text-wrap: pretty; }
.mrs-eyebrow, .mrs-data-label { color: var(--color-text-muted); font-size: var(--text-xs); font-weight: 600; letter-spacing: .1em; margin: 0 0 var(--space-3); text-transform: uppercase; }
.mrs-mono { font-family: var(--font-mono); font-size: var(--text-sm); }
.wp-site-blocks > main { min-height: 55vh; }
.wp-block-post-content > :where(*:not(.alignfull):not(.alignwide)), .mrs-reading { max-width: var(--reading-max); margin-left: auto; margin-right: auto; }
.wp-block-post-content > :where(.alignwide), .alignwide { max-width: var(--content-max); margin-left: auto; margin-right: auto; padding-left: var(--gutter); padding-right: var(--gutter); }
.wp-block-post-content > .alignfull { width: 100%; }

.mrs-notice-bar { align-items: center; background: var(--color-text); color: #fff; display: flex; font-size: var(--text-xs); justify-content: space-between; letter-spacing: .025em; min-height: 34px; padding: .35rem var(--gutter); }
.mrs-notice-bar p { margin: 0; }
.mrs-site-header { align-items: center; background: rgba(250,249,247,.98); border-bottom: 1px solid var(--color-border); display: grid; grid-template-columns: minmax(220px,1fr) auto minmax(220px,1fr); min-height: 82px; padding: 0 var(--gutter); position: relative; z-index: 10; }
.mrs-brand { color: var(--color-text); font-size: 1.05rem; font-weight: 600; letter-spacing: -.02em; text-decoration: none; }
.mrs-wordmark { align-items: center; display: inline-flex; justify-self: start; }
.mrs-wordmark__name { font-size: 1rem; font-weight: 600; letter-spacing: -.035em; line-height: 1; }
.mrs-site-header .wp-block-navigation { justify-self: center; }
.mrs-site-header .wp-block-navigation-item__content { color: var(--color-text); font-size: var(--text-sm); padding: .5rem; text-decoration: none; }
.wp-block-navigation__responsive-container-open, .wp-block-navigation__responsive-container-close { align-items: center; justify-content: center; min-height: 44px; min-width: 44px; }
.mrs-header-tools { align-items: center; display: flex; gap: var(--space-4); justify-self: end; }
.mrs-header-tools a { color: var(--color-text); font-size: var(--text-sm); }

.wp-element-button, button, input[type=submit], .button, .woocommerce a.button, .woocommerce button.button, .woocommerce input.button { appearance: none; background: var(--color-accent); border: 1px solid var(--color-accent); border-radius: var(--radius-control); color: var(--color-on-accent); cursor: pointer; display: inline-flex; font-family: inherit; font-size: var(--text-sm); font-weight: 600; justify-content: center; line-height: 1.2; min-height: 44px; padding: .85rem 1.15rem; text-decoration: none; transition: background var(--transition-fast), border-color var(--transition-fast), color var(--transition-fast); }
.wp-element-button:hover, button:hover, input[type=submit]:hover, .button:hover, .woocommerce a.button:hover, .woocommerce button.button:hover { background: var(--color-accent-hover); border-color: var(--color-accent-hover); color: #fff; }
.is-style-outline > .wp-element-button, .wp-element-button.is-style-outline, a.button.alt { background: transparent; color: var(--color-text); }
.is-style-outline > .wp-element-button:hover, .wp-element-button.is-style-outline:hover { background: var(--color-surface-strong); border-color: var(--color-text); color: var(--color-text); }
button:disabled, input:disabled, .button.disabled { cursor: not-allowed; opacity: .45; }
input:not([type=checkbox]):not([type=radio]), select, textarea { background: #fff; border: 1px solid var(--color-border); border-radius: var(--radius-control); color: var(--color-text); font: inherit; min-height: 44px; padding: .7rem .8rem; width: 100%; }
label { display: block; font-size: var(--text-sm); font-weight: 500; margin-bottom: var(--space-2); }

.mrs-hero { background: var(--color-surface); display: grid; isolation: isolate; min-height: min(660px, calc(100vh - 116px)); overflow: hidden; position: relative; }
.mrs-hero__copy, .mrs-hero__media { grid-area: 1 / 1; }
.mrs-hero__copy { align-self: center; background: rgba(250,249,247,.94); justify-self: start; margin-left: var(--gutter); max-width: 540px; padding: clamp(2rem, 4vw, 3.5rem); width: calc(100% - (2 * var(--gutter))); z-index: 1; }
.mrs-hero h1 { font-size: clamp(2.8rem, 5.4vw, 5rem); font-weight: 500; line-height: var(--leading-display); margin: 0 0 var(--space-6); max-width: 9ch; }
.mrs-hero h1 em { color: var(--color-accent); font-style: normal; }
.mrs-hero__lead { color: var(--color-text-muted); font-size: clamp(1rem, 1.5vw, 1.2rem); margin: 0; max-width: 410px; }
.mrs-hero__actions { display: flex; flex-wrap: wrap; gap: var(--space-3); margin-top: var(--space-8); }
.mrs-hero__facts { border-top: 1px solid var(--color-border); display: grid; font-size: var(--text-xs); gap: var(--space-3); grid-template-columns: 1fr 1fr; margin-top: var(--space-12); padding-top: var(--space-4); text-transform: uppercase; }
.mrs-hero__facts span { color: var(--color-text-muted); }
.mrs-hero__facts strong { color: var(--color-text); display: block; font-weight: 600; }
.mrs-hero__media { background: var(--color-surface); min-height: inherit; overflow: hidden; position: relative; }
.mrs-hero__image { height: 100%; inset: 0; object-fit: cover; position: absolute; width: 100%; }
.mrs-media-placeholder { align-items: flex-start; aspect-ratio: 1 / 1; background: var(--color-surface-strong); border: 1px solid var(--color-border); border-radius: var(--radius-media); color: var(--color-text-muted); display: flex; flex-direction: column; justify-content: flex-end; padding: var(--space-6); width: 100%; }
.mrs-media-placeholder span { font-size: var(--text-xs); letter-spacing: .08em; text-transform: uppercase; }
.mrs-media-placeholder strong { color: var(--color-text); font-size: var(--text-sm); font-weight: 500; }

.mrs-section { padding: var(--section-space) var(--gutter); }
.mrs-section--surface { background: var(--color-surface); }
.mrs-section__head { display: flex; gap: var(--space-8); justify-content: space-between; margin: 0 auto var(--space-12); max-width: var(--content-max); }
.mrs-section__head h2 { margin: 0; }
.mrs-section__head p { color: var(--color-text-muted); margin: 0; max-width: 560px; }
.mrs-section__action { align-items: center; display: flex; gap: var(--space-6); }
.mrs-section__action .wp-element-button { flex: 0 0 auto; }
.mrs-section--featured { border-bottom: 1px solid var(--color-border); padding-top: clamp(3rem, 6vw, 5rem); }
.mrs-category-grid { display: grid; gap: 1px; grid-template-columns: repeat(3, 1fr); margin: 0 auto; max-width: var(--content-max); background: var(--color-border); border: 1px solid var(--color-border); }
.mrs-category-tile { background: var(--color-canvas); color: var(--color-text); min-height: 280px; padding: clamp(1.5rem, 3vw, 2.5rem); text-decoration: none; }
.mrs-category-tile:hover { background: var(--color-surface); color: var(--color-text); }
.mrs-category-tile h3 { font-size: var(--text-lg); margin: var(--space-12) 0 var(--space-3); }
.mrs-category-tile p { color: var(--color-text-muted); max-width: 34ch; }
.mrs-category-tile__index { color: var(--color-text-muted); font-family: var(--font-mono); font-size: var(--text-xs); }
.mrs-text-link { border-bottom: 1px solid currentColor; display: inline-block; font-size: var(--text-sm); margin-top: var(--space-6); }

.mrs-values { display: grid; grid-template-columns: repeat(3, 1fr); margin: 0 auto; max-width: var(--content-max); }
.mrs-value { border-left: 1px solid var(--color-border); padding: var(--space-6) var(--space-8); }
.mrs-value:first-child { border-left: 0; }
.mrs-value h3 { font-size: var(--text-lg); }
.mrs-value p { color: var(--color-text-muted); }

.mrs-product-grid, .woocommerce ul.products { display: grid !important; gap: var(--space-6) !important; grid-template-columns: repeat(4, minmax(0, 1fr)) !important; list-style: none; margin: 0 auto !important; max-width: var(--content-max); padding: 0 !important; }
.mrs-product-card, .woocommerce ul.products li.product { background: var(--color-canvas); border: 1px solid var(--color-border); float: none !important; margin: 0 !important; padding: 0 !important; width: auto !important; }
.mrs-product-card__media { display: block; text-decoration: none; }
.mrs-product-card__media img { aspect-ratio: 1; object-fit: cover; width: 100%; }
.mrs-product-card__body { padding: var(--space-6); }
.mrs-product-card h3 { font-size: 1.05rem; margin: 0 0 var(--space-4); }
.mrs-product-card h3 a { color: var(--color-text); text-decoration: none; }
.mrs-product-card__meta { align-items: center; border-top: 1px solid var(--color-border); display: flex; justify-content: space-between; margin: var(--space-6) 0 var(--space-4); padding-top: var(--space-4); }
.mrs-product-card .price { color: var(--color-text) !important; font-weight: 600; }
.mrs-stock { color: var(--color-success); font-size: var(--text-xs); font-weight: 600; }
.mrs-product-card .wp-element-button { width: 100%; }
.mrs-product-carousel { margin: 0 auto; max-width: var(--content-max); }
.mrs-product-carousel__viewport { overflow: hidden; }
.mrs-product-carousel__track { display: flex; transition: transform 520ms cubic-bezier(.22,.61,.36,1); }
.mrs-product-carousel__track.is-jumping { transition: none; }
.mrs-product-carousel__page { flex: 0 0 100%; min-width: 0; }
.mrs-product-carousel__controls { align-items: center; border-top: 1px solid var(--color-border); display: grid; gap: var(--space-4); grid-template-columns: 44px auto 1fr 44px; margin-top: var(--space-8); padding-top: var(--space-4); }
.mrs-carousel-arrow, .mrs-carousel-pages button { align-items: center; background: transparent; border-color: var(--color-border); color: var(--color-text); display: inline-flex; min-height: 44px; min-width: 44px; padding: 0; }
.mrs-carousel-arrow:hover, .mrs-carousel-pages button:hover { background: var(--color-surface-strong); border-color: var(--color-text); color: var(--color-text); }
.mrs-carousel-pages { display: flex; gap: var(--space-2); }
.mrs-carousel-pages button[aria-current="true"] { background: var(--color-accent); border-color: var(--color-accent); color: #fff; }
.mrs-carousel-status { color: var(--color-text-muted); font-family: var(--font-mono); font-size: var(--text-xs); justify-self: end; margin: 0; text-transform: uppercase; }

.mrs-data-section { display: grid; gap: var(--space-16); grid-template-columns: minmax(250px,.7fr) minmax(0,1.3fr); margin: 0 auto; max-width: var(--content-max); }
.mrs-data-panel { border-top: 1px solid var(--color-text); }
.mrs-data-row { border-bottom: 1px solid var(--color-border); display: grid; gap: var(--space-4); grid-template-columns: 1fr auto; padding: var(--space-4) 0; }
.mrs-data-row span:last-child { color: var(--color-text-muted); font-family: var(--font-mono); font-size: var(--text-xs); }
.mrs-founder-note { border: 1px solid var(--color-border); display: grid; gap: var(--space-12); grid-template-columns: .7fr 1.3fr; margin: 0 auto; max-width: var(--content-max); padding: clamp(2rem, 5vw, 5rem); }
.mrs-founder-note h2 { margin: 0; }

.mrs-page-hero, .woocommerce-shop main, .single-product main { margin: 0 auto; max-width: var(--content-max); padding: var(--section-space) var(--gutter) var(--space-12); width: 100vw; }
.mrs-page-hero p { color: var(--color-text-muted); max-width: var(--reading-max); }
.woocommerce .woocommerce-breadcrumb { color: var(--color-text-muted); font-size: var(--text-xs); margin-bottom: var(--space-8); }
.woocommerce div.product { display: grid; gap: clamp(2rem,6vw,6rem); grid-template-columns: minmax(0,1.1fr) minmax(320px,.9fr); }
.woocommerce div.product div.images, .woocommerce div.product div.summary { float: none; width: auto; }
.woocommerce div.product div.images img { background: var(--color-surface); border-radius: var(--radius-media); }
.woocommerce div.product .product_title { font-size: clamp(2rem,4vw,3.75rem); }
.woocommerce div.product p.price { color: var(--color-text); font-size: var(--text-lg); }
.woocommerce div.product form.cart { align-items: end; display: flex; gap: var(--space-3); }
.woocommerce div.product form.cart .variations { margin: 0; }
.quantity .qty { max-width: 88px; }
.mrs-purchase-notice { border-left: 3px solid var(--color-accent); font-size: var(--text-sm); margin-top: var(--space-6); padding: var(--space-3) var(--space-4); }
.mrs-shipping-line { color: var(--color-text-muted); font-size: var(--text-sm); }
.mrs-product-record, .mrs-product-documents { border-top: 1px solid var(--color-border); display: grid; gap: var(--space-12); grid-column: 1 / -1; grid-template-columns: minmax(240px,.7fr) minmax(0,1.3fr); margin-top: var(--space-16); padding: var(--space-16) 0; }
.mrs-spec-list { margin: 0; }
.mrs-spec-list > div { border-top: 1px solid var(--color-border); display: grid; gap: var(--space-6); grid-template-columns: minmax(150px,.65fr) 1fr; padding: var(--space-4) 0; }
.mrs-spec-list dt { color: var(--color-text-muted); font-size: var(--text-sm); }
.mrs-spec-list dd { margin: 0; }

.woocommerce-info, .woocommerce-message, .woocommerce-error { background: var(--color-surface); border: 1px solid var(--color-border); border-top: 3px solid var(--color-accent); color: var(--color-text); margin: 0 0 var(--space-6); padding: var(--space-4); }
.woocommerce-error { border-top-color: var(--color-error); }
.woocommerce table.shop_table { border: 1px solid var(--color-border); border-collapse: collapse; border-radius: 0; }
.woocommerce table.shop_table th { background: var(--color-surface); }
.woocommerce table.shop_table th, .woocommerce table.shop_table td { border: 1px solid var(--color-border); padding: var(--space-4); }
.woocommerce-cart-form, .cart-collaterals, .woocommerce-checkout, .woocommerce-account .woocommerce { margin: 0 auto; max-width: var(--content-max); padding: 0 var(--gutter) var(--section-space); }
.woocommerce-checkout { display: grid; gap: var(--space-8); grid-template-columns: minmax(0,1fr) minmax(320px,.7fr); }
.mrs-checkout-heading { margin: var(--space-12) auto var(--space-8); max-width: 1180px; padding: 0 var(--gutter); width: 100%; }
.mrs-checkout-heading h1 { margin: 0 0 var(--space-3); }
.mrs-checkout-heading > p:last-child { border-left: 3px solid var(--color-accent); color: var(--color-text-muted); font-size: var(--text-sm); padding-left: var(--space-4); }
.woocommerce-checkout #customer_details, .woocommerce-checkout #order_review_heading, .woocommerce-checkout #order_review { float: none; width: auto; }
.woocommerce-checkout #order_review_heading, .woocommerce-checkout #order_review { grid-column: 2; }
.woocommerce-checkout #customer_details { grid-row: 1 / span 2; }
.woocommerce form .form-row label { line-height: 1.4; }
.woocommerce form.checkout_coupon, .woocommerce form.login, .woocommerce form.register { border: 1px solid var(--color-border); border-radius: 0; }

.mrs-document-search { margin: 0 auto var(--space-12); max-width: var(--content-max); }
.mrs-document-search > div { display: grid; gap: var(--space-3); grid-template-columns: 1fr auto; }
.mrs-document-list { border-top: 1px solid var(--color-border); margin: 0 auto; max-width: var(--content-max); }
.mrs-document-row { align-items: center; border-bottom: 1px solid var(--color-border); display: grid; gap: var(--space-6); grid-template-columns: 1.4fr .7fr .7fr; padding: var(--space-6) 0; }
.mrs-document-row h2 { font-size: var(--text-lg); margin: 0; }
.mrs-empty-state { background: var(--color-surface); border: 1px solid var(--color-border); padding: var(--space-8); }
.mrs-empty-state h2, .mrs-empty-state h3 { margin-top: 0; }

.mrs-footer { background: var(--color-text); color: #f7f7f5; padding: var(--space-16) var(--gutter) var(--space-8); }
.mrs-footer__grid { display: grid; gap: var(--space-12); grid-template-columns: 1.3fr repeat(2,.7fr); margin: 0 auto var(--space-16); max-width: var(--content-max); }
.mrs-footer a { color: #fff; }
.mrs-wordmark--footer { color: #fff !important; }
.mrs-footer .wp-block-navigation { align-items: flex-start; }
.mrs-footer__base { border-top: 1px solid #4b4e4c; color: #bfc3c0; display: flex; font-size: var(--text-xs); justify-content: space-between; margin: auto; max-width: var(--content-max); padding-top: var(--space-6); }

details { border-top: 1px solid var(--color-border); padding: var(--space-4) 0; }
summary { cursor: pointer; font-weight: 600; min-height: 44px; padding: .5rem 0; }

@media (max-width: 900px) {
  .mrs-site-header { grid-template-columns: 1fr auto; }
  .mrs-site-header .wp-block-navigation { grid-column: 1 / -1; justify-self: start; }
  .mrs-hero { min-height: 580px; }
  .mrs-hero__copy { margin: auto var(--gutter) var(--gutter); max-width: 520px; }
  .mrs-hero__image { object-position: 62% center; }
  .mrs-category-grid, .mrs-product-grid, .woocommerce ul.products { grid-template-columns: repeat(2, minmax(0,1fr)) !important; }
  .woocommerce div.product, .woocommerce-checkout, .mrs-data-section, .mrs-founder-note { grid-template-columns: 1fr; }
  .woocommerce-checkout #customer_details, .woocommerce-checkout #order_review_heading, .woocommerce-checkout #order_review { grid-column: 1; grid-row: auto; }
}

@media (max-width: 600px) {
  .mrs-notice-bar { align-items: flex-start; flex-direction: column; padding-bottom: var(--space-2); padding-top: var(--space-2); }
  .mrs-notice-bar p:last-child { color: #bfc3c0; }
  .mrs-site-header { min-height: 68px; }
  .mrs-header-tools { gap: var(--space-3); }
  .mrs-category-grid, .mrs-product-grid, .woocommerce ul.products, .mrs-values, .mrs-footer__grid { grid-template-columns: 1fr !important; }
  .mrs-value { border-left: 0; border-top: 1px solid var(--color-border); padding-left: 0; }
  .mrs-section__head, .mrs-footer__base { align-items: flex-start; flex-direction: column; }
  .mrs-section__action { align-items: flex-start; flex-direction: column; }
  .mrs-hero__facts { grid-template-columns: 1fr; }
  .mrs-carousel-status { display: none; }
  .mrs-product-carousel__controls { grid-template-columns: 44px 1fr 44px; }
  .mrs-carousel-pages { justify-self: center; }
  .mrs-product-record, .mrs-product-documents { grid-template-columns: 1fr; }
  .mrs-spec-list > div { gap: var(--space-2); grid-template-columns: 1fr; }
  .mrs-document-row { align-items: start; grid-template-columns: 1fr; }
  .woocommerce table.shop_table_responsive tr td { text-align: left !important; }
  .woocommerce div.product form.cart { align-items: stretch; flex-direction: column; }
  .single_variation_wrap, .woocommerce-variation-add-to-cart { max-width: 100%; width: 100%; }
  .woocommerce-variation-add-to-cart { display: flex; flex-wrap: wrap; gap: var(--space-3); }
}