/*
 * Oceaneros Signal + Tidewater visual layer.
 * Implements approved design Phases 3 through 7 on top of the Phase 2 shell.
 *
 * Scope rule: this layer is presentational only. It does not alter markup
 * contracts, WooCommerce ownership, routes, breadcrumbs, gallery behavior,
 * variation synchronization, media fallback logic, or the payment-disabled
 * checkout state. Those remain owned by RC4 in inc/final-storefront.php,
 * inc/product-page.php, and inc/commerce-experience.php.
 *
 * Contrast pairs are fixed by the approved package and must not be altered:
 *   white on brand blue    8.58:1
 *   navy on coral          6.11:1
 *   coral ink on paper     5.39:1
 *   light coral on navy    8.31:1
 *   navy on paper         14.96:1
 * White on coral measures 2.73:1 and is prohibited for control labels.
 */

/* ============================================================
   1. Type roles and reading baseline
   ============================================================ */

.ce-homepage,
.oe-collection,
.oe-content-page,
.oe-journal-archive,
.oe-cart,
.oe-checkout,
.oe-account-page {
  background: var(--oe-surface-paper);
  color: var(--oe-navy);
}

body {
  font-size: 16px;
  line-height: 1.6;
}

.ce-h2,
.ce-hero__h1,
.ce-collection-card__name,
.ce-journal-card h3,
.oe-journal-card h3,
.oe-journal-article h1,
.oe-content-page h1,
.oe-content-page h2 {
  font-family: var(--ce-font-display, Georgia, serif);
  font-weight: 600;
  letter-spacing: -0.01em;
}

.ce-hero__h1 {
  font-size: clamp(2.5rem, 5.2vw, 4.5rem);
  line-height: 1.02;
}

.ce-h2 {
  font-size: clamp(1.9rem, 3.4vw, 3rem);
  line-height: 1.08;
}

/* Eyebrows carry two accessible variants by surface. */
.ce-eyebrow,
.ce-section-eyebrow .ce-eyebrow {
  font-family: var(--ce-font-ui, system-ui, sans-serif);
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--oe-eyebrow-paper);
}

.ce-impact-teaser .ce-eyebrow,
.ce-brand-story--navy .ce-eyebrow,
.oe-story-interval .ce-eyebrow,
.ce-eyebrow--on-photo {
  color: var(--oe-eyebrow-navy);
}

/* ============================================================
   2. Buttons and links
   ============================================================ */

.ce-btn,
.oe-btn,
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce .button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  min-height: 44px;
  padding: 0.75rem 1.5rem;
  border-radius: var(--oe-radius);
  font-family: var(--ce-font-ui, system-ui, sans-serif);
  font-size: 0.9375rem;
  font-weight: 600;
  line-height: 1.2;
  text-decoration: none;
  border: 1px solid transparent;
  transition: background-color 160ms ease, color 160ms ease, border-color 160ms ease;
}

.ce-btn--primary,
.woocommerce button.button.alt,
.woocommerce a.button.alt,
.oe-btn--primary {
  min-height: 48px;
  background: var(--oe-brand-blue);
  color: var(--oe-white);
  border-color: var(--oe-brand-blue);
}

.ce-btn--primary:hover,
.woocommerce button.button.alt:hover,
.woocommerce a.button.alt:hover,
.oe-btn--primary:hover {
  background: var(--oe-navy);
  border-color: var(--oe-navy);
  color: var(--oe-white);
}

/* Coral is a selective editorial action. Its label is navy, never white. */
.ce-btn--coral,
.oe-btn--coral {
  min-height: 48px;
  background: var(--oe-brand-coral);
  color: var(--oe-coral-button-label);
  border-color: var(--oe-brand-coral);
}

.ce-btn--coral:hover,
.oe-btn--coral:hover {
  background: #e96a6a;
  border-color: #e96a6a;
  color: var(--oe-coral-button-label);
}

.ce-btn--secondary,
.oe-btn--secondary {
  background: transparent;
  color: var(--oe-navy);
  border-color: var(--oe-border-soft);
}

.ce-btn--secondary:hover,
.oe-btn--secondary:hover {
  background: var(--oe-surface-glass);
  border-color: var(--oe-navy);
}

.ce-btn--on-photo {
  background: var(--oe-surface-paper);
  color: var(--oe-navy);
  border-color: var(--oe-surface-paper);
}

/* Active state is perceptible without moving layout. */
.ce-btn:active,
.woocommerce .button:active {
  filter: brightness(0.94);
}

/* Native disabled semantics are preserved; presentation is calm and factual. */
.ce-btn[disabled],
.ce-btn[aria-disabled="true"],
.woocommerce .button[disabled],
.woocommerce button.button:disabled,
.woocommerce button.button:disabled[disabled] {
  background: var(--oe-sand);
  color: #5b6672;
  border-color: var(--oe-sand);
  cursor: not-allowed;
  opacity: 1;
}

/* Loading preserves label width and prevents duplicate submission. */
.ce-btn.is-loading,
.woocommerce .button.loading {
  pointer-events: none;
  opacity: 0.85;
}

.ce-hero__textlink {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  font-family: var(--ce-font-ui, system-ui, sans-serif);
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--oe-navy);
  text-decoration: underline;
  text-underline-offset: 4px;
}

.ce-hero__textlink:hover { color: var(--oe-brand-blue); }

.ce-hero__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1.25rem;
}

/* ============================================================
   3. Focus system
   ============================================================ */

a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
summary:focus-visible,
[tabindex]:focus-visible {
  outline: 3px solid var(--oe-focus);
  outline-offset: 4px;
  border-radius: 1px;
}

/* Focus indicators must never be clipped by a containing surface. */
.ce-product-card,
.ce-collection-card,
.oe-journal-card,
.oe-filter-panel {
  overflow: visible;
}

/* ============================================================
   4. Shared media fallback
   Honest, calm, and never a broken icon or dead link.
   ============================================================ */

.oe-media-fallback,
.oe-product-media--failed,
.oe-product-media--unavailable {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--oe-surface-glass);
  border: 1px solid var(--oe-border-soft);
  color: var(--oe-navy);
}

.oe-media-fallback::after {
  content: "Image unavailable";
  font-family: var(--ce-font-ui, system-ui, sans-serif);
  font-size: 0.8125rem;
  font-weight: 500;
  letter-spacing: 0.02em;
  color: #3d4c5a;
}

.oe-product-media__fallback svg {
  width: 56px;
  height: auto;
  fill: none;
  stroke: rgba(11, 31, 51, 0.35);
  stroke-width: 3;
}

/* A failed image is visually suppressed rather than left broken. */
.oe-product-media--failed img,
img[data-oe-failed] {
  display: none;
}

/* ============================================================
   5. Product cards
   Square media is a protected RC4 rule. The 4:5 ratio is reserved
   for the primary product gallery and must not be applied here.
   ============================================================ */

.ce-product-card,
.oe-product-card {
  display: flex;
  flex-direction: column;
  background: var(--oe-surface-foam);
  border: 1px solid var(--oe-border-soft);
  border-radius: var(--oe-radius);
}

.ce-product-card__image,
.oe-product-card__image {
  position: relative;
  aspect-ratio: 1 / 1;
  background: var(--oe-surface-glass);
  overflow: hidden;
}

.ce-product-card__image img,
.oe-product-card__image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.ce-product-card__body,
.oe-product-card__body {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  padding: 1.15rem 1.15rem 1.35rem;
}

.ce-product-card__name,
.oe-product-card__name {
  font-family: var(--ce-font-display, Georgia, serif);
  font-size: 1.15rem;
  font-weight: 600;
  line-height: 1.2;
  min-width: 0;
  overflow-wrap: anywhere;
}

.ce-product-card__name a { color: var(--oe-navy); text-decoration: none; }
.ce-product-card__name a:hover { text-decoration: underline; }

.ce-product-card__price,
.oe-product-card__price {
  font-family: var(--ce-font-ui, system-ui, sans-serif);
  font-weight: 600;
  color: var(--oe-navy);
}

/* Title, price, availability, and action are visible without hover. */
.ce-product-card__quick-add,
.oe-product-card__cta {
  position: static;
  opacity: 1;
  transform: none;
  align-self: flex-start;
  margin-top: 0.5rem;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  font-family: var(--ce-font-ui, system-ui, sans-serif);
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--oe-brand-blue);
  text-decoration: none;
}

.ce-product-card__quick-add:hover { text-decoration: underline; }

/* Badges state fact only. Never scarcity, popularity, or ranking. */
.ce-product-card__badge {
  position: absolute;
  top: 0.75rem;
  left: 0.75rem;
  z-index: 2;
  padding: 0.3rem 0.6rem;
  border-radius: var(--oe-radius);
  background: var(--oe-brand-coral);
  color: var(--oe-coral-button-label);
  font-family: var(--ce-font-ui, system-ui, sans-serif);
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.ce-product-card__badge--unavailable {
  background: var(--oe-navy);
  color: var(--oe-surface-paper);
}

/* ============================================================
   6. Collection entries and story interval
   ============================================================ */

.ce-collection-card__image {
  aspect-ratio: 4 / 3;
  background: var(--oe-surface-glass);
  overflow: hidden;
}

.ce-collection-card__num {
  font-family: var(--ce-font-ui, system-ui, sans-serif);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  color: var(--oe-eyebrow-paper);
}

.ce-collection-card__name { font-size: 1.5rem; }

.ce-collection-card__count {
  font-family: var(--ce-font-ui, system-ui, sans-serif);
  font-size: 0.8125rem;
  color: #4a5a68;
}

.ce-impact-teaser,
.oe-story-interval {
  background: var(--oe-surface-abyss);
  color: var(--oe-surface-paper);
}

.ce-impact-teaser .ce-h2,
.oe-story-interval .ce-h2 { color: var(--oe-surface-paper); }

.ce-impact-teaser p,
.oe-story-interval p { color: rgba(247, 242, 232, 0.82); }

.ce-impact-teaser a:not(.ce-btn) { color: var(--oe-eyebrow-navy); }

/* ============================================================
   7. Catalog, filters, sorting, pagination
   ============================================================ */

.oe-filter-toggle,
.oe-collection-sort select {
  min-height: 44px;
  font-size: 16px;
  border: 1px solid var(--oe-border-soft);
  background: var(--oe-surface-foam);
  color: var(--oe-navy);
  border-radius: var(--oe-radius);
}

.oe-filter-panel {
  background: var(--oe-surface-paper);
  border: 1px solid var(--oe-border-soft);
}

.oe-filter-overlay { background: rgba(11, 31, 51, 0.5); }

.oe-filter-chip,
.oe-filter-clear {
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  padding: 0 0.85rem;
  border: 1px solid var(--oe-border-soft);
  border-radius: var(--oe-radius);
  color: var(--oe-navy);
  text-decoration: none;
}

.woocommerce-pagination a,
.woocommerce-pagination span.current,
.oe-pagination a {
  min-width: 44px;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--oe-border-soft);
  border-radius: var(--oe-radius);
  color: var(--oe-navy);
  text-decoration: none;
}

.woocommerce-pagination span.current {
  background: var(--oe-brand-blue);
  border-color: var(--oe-brand-blue);
  color: var(--oe-white);
}

.oe-collection-description { background: var(--oe-surface-glass); }

/* ============================================================
   8. Product page composition
   The primary gallery keeps the approved 4:5 ratio.
   ============================================================ */

.woocommerce-product-gallery__wrapper .woocommerce-product-gallery__image:first-child,
.oe-product-gallery__main {
  aspect-ratio: 4 / 5;
  background: var(--oe-surface-glass);
  overflow: hidden;
}

.woocommerce-product-gallery__wrapper .woocommerce-product-gallery__image:first-child img,
.oe-product-gallery__main img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.woocommerce div.product .product_title {
  font-family: var(--ce-font-display, Georgia, serif);
  font-weight: 600;
  font-size: clamp(1.75rem, 3vw, 2.5rem);
  line-height: 1.12;
  color: var(--oe-navy);
}

.woocommerce div.product p.price,
.woocommerce div.product span.price {
  font-family: var(--ce-font-ui, system-ui, sans-serif);
  font-weight: 600;
  font-size: 1.375rem;
  color: var(--oe-navy);
}

/* Native selects stay available to assistive technology. */
.woocommerce div.product form.cart .variations select {
  min-height: 44px;
  font-size: 16px;
  border: 1px solid var(--oe-border-soft);
  border-radius: var(--oe-radius);
  background: var(--oe-surface-foam);
  color: var(--oe-navy);
}

.woocommerce div.product form.cart .quantity input.qty {
  min-height: 44px;
  font-size: 16px;
  border: 1px solid var(--oe-border-soft);
  border-radius: var(--oe-radius);
  text-align: center;
}

.woocommerce-breadcrumb,
.oe-breadcrumb {
  font-family: var(--ce-font-ui, system-ui, sans-serif);
  font-size: 0.8125rem;
  color: #4a5a68;
}

.woocommerce-breadcrumb a,
.oe-breadcrumb a { color: var(--oe-navy); }

/* ============================================================
   9. Cart, checkout, account
   Transaction clarity outranks storytelling on these surfaces.
   ============================================================ */

.oe-cart table.shop_table,
.oe-checkout .woocommerce-checkout-review-order-table,
.oe-account-page table {
  border: 1px solid var(--oe-border-soft);
  background: var(--oe-surface-foam);
  width: 100%;
}

.oe-cart th,
.oe-checkout th,
.oe-account-page th {
  font-family: var(--ce-font-ui, system-ui, sans-serif);
  font-size: 0.8125rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #3d4c5a;
}

.oe-checkout .form-row label,
.oe-account-page label {
  font-family: var(--ce-font-ui, system-ui, sans-serif);
  font-weight: 500;
  color: var(--oe-navy);
}

.oe-checkout .form-row input,
.oe-checkout .form-row select,
.oe-checkout .form-row textarea,
.oe-account-page input,
.oe-account-page select {
  min-height: 44px;
  font-size: 16px;
  border: 1px solid var(--oe-border-soft);
  border-radius: var(--oe-radius);
  background: var(--oe-white);
  color: var(--oe-navy);
  width: 100%;
}

.woocommerce-invalid input,
.woocommerce-invalid select { border-color: var(--oe-error); }

.woocommerce-error,
.woocommerce-message,
.woocommerce-info {
  border-left: 3px solid var(--oe-brand-blue);
  background: var(--oe-surface-foam);
  color: var(--oe-navy);
  border-radius: var(--oe-radius);
}

.woocommerce-error { border-left-color: var(--oe-error); }

/* The prelaunch panel replaces Place order while gateways are disabled. */
.oe-prelaunch-panel,
.oe-checkout-disabled {
  border: 1px solid var(--oe-border-soft);
  background: var(--oe-surface-glass);
  color: var(--oe-navy);
  border-radius: var(--oe-radius);
  padding: 1.25rem;
}

/* ============================================================
   10. Editorial, mission, journal, contact, policy
   ============================================================ */

.oe-content-page,
.oe-journal-article {
  --oe-measure: 68ch;
}

.oe-content-page > *,
.oe-journal-article > * {
  max-width: var(--oe-measure);
  margin-inline: auto;
}

.oe-journal-card__image,
.oe-archive-journal__grid .oe-journal-card__image {
  aspect-ratio: 16 / 9;
  background: var(--oe-surface-glass);
  overflow: hidden;
}

.oe-journal-card__meta {
  font-family: var(--ce-font-ui, system-ui, sans-serif);
  font-size: 0.75rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--oe-eyebrow-paper);
}

.oe-policy-list a,
.ce-policy-links a { color: var(--oe-navy); }

/* ============================================================
   11. Responsive containment
   ============================================================ */

.ce-container,
.oe-container {
  width: 100%;
  max-width: var(--oe-content);
  margin-inline: auto;
  padding-inline: var(--oe-gutter);
}

.ce-grid,
.oe-product-grid { min-width: 0; }
.ce-grid > *,
.oe-product-grid > * { min-width: 0; }

/* Wide content scrolls inside its own container, never the page. */
.oe-cart .shop_table_responsive,
.oe-account-page .woocommerce-orders-table__wrapper,
.oe-content-page table {
  display: block;
  overflow-x: auto;
  max-width: 100%;
}

@media (max-width: 1023px) {
  .ce-grid-4 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 767px) {
  .ce-grid-4,
  .ce-grid-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ce-hero__h1 { font-size: clamp(2rem, 9vw, 2.75rem); }
}

@media (max-width: 390px) {
  .ce-grid-4,
  .ce-grid-3 { grid-template-columns: 1fr; }
}

@media (max-width: 320px) {
  .ce-container,
  .oe-container { padding-inline: 16px; }
}

/* ============================================================
   12. Reduced motion
   ============================================================ */

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}

/* ============================================================
   13. Verified responsive and accessibility corrections
   Dated 2026-08-21. Each block corrects a defect confirmed by
   rendered measurement on the live prelaunch site. Behavior,
   markup contracts, and WooCommerce ownership are unchanged.
   ============================================================ */

/* 13.1 Mobile menu: the Close control must never overlap or intercept the
   search submit control. The Phase 2 shell reduced the drawer's top padding
   from --ce-space-20 to 1.25rem while the Close button remained absolutely
   positioned, so it landed on top of the in-flow search row and covered 67
   percent of the submit button at both 390px and 320px.

   Returning Close to normal flow removes the dependency on a reserved padding
   value entirely. DOM order already places Close before the search form, so it
   now occupies its own row above it. Focus trap, Escape handling, inert
   background, scroll lock, focus restoration, search submission, and
   purchase-bar suppression are all driven by JavaScript and IDs, none of which
   this touches. */
.ce-mobile-menu__close {
  position: static;
  margin-left: auto;
  margin-bottom: var(--ce-space-3, 0.75rem);
  min-width: 44px;
  min-height: 44px;
}

/* 13.2 Gallery unavailable state: show the factual label to sighted users.
   The decorative glyph previously expanded to fill the whole grid cell, which
   pushed the text out of view. Constrain the glyph and stack the label under
   it. The label is aria-hidden so it does not double-announce alongside the
   existing .screen-reader-text description, which remains the accessible name. */
.oe-product-media--unavailable {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
  padding: 1rem;
  text-align: center;
}

/* oceaneros-commerce.css absolutely positions this glyph with inset: 0, which
   stretches it over the whole slide and hides the label beneath it. Returning
   it to flow on the main slide only lets the glyph and label stack. Thumbnail
   fallbacks keep their absolute positioning because they are matched by
   .oe-gallery-thumbnail--failed, not by the gallery-image class below. */
.woocommerce-product-gallery__image.oe-product-media--unavailable .oe-product-media__fallback {
  position: static;
  inset: auto;
  flex: 0 0 auto;
  display: block;
  width: 72px;
  max-width: 40%;
  height: auto;
  background: none;
}

.woocommerce-product-gallery__image.oe-product-media--unavailable .oe-product-media__fallback svg {
  display: block;
  width: 100%;
  height: auto;
}

.oe-product-media__label {
  flex: 0 0 auto;
  font-family: var(--ce-font-ui, system-ui, sans-serif);
  font-size: 0.8125rem;
  font-weight: 500;
  letter-spacing: 0.02em;
  line-height: 1.3;
  color: #3d4c5a;
}

/* 13.3 Suppress the zoom and full-screen triggers when no usable image exists.
   A trigger over an empty gallery is a misleading control. Galleries that hold
   a valid image keep the trigger, since the class is only added by
   oceaneros_gallery_media_state_classes() when media is genuinely absent. */
.oe-gallery--no-usable-media .woocommerce-product-gallery__trigger {
  display: none;
}

/* 13.4 Cart text inputs at 16px. Below 16px iOS zooms the viewport on focus.
   Font size only: quantity stepping, coupon submission, and cart update
   behavior are unchanged. */
.woocommerce-cart .quantity input.qty,
.woocommerce-cart input.qty,
.woocommerce .cart_item input.qty,
.oe-cart input.qty,
.woocommerce-cart #coupon_code,
.oe-cart #coupon_code,
#coupon_code {
  font-size: 16px;
}

/* 13.5 Effective touch area for homepage section and journal links.
   These carried 15px to 24px hit heights. Wording and order are unchanged;
   only the interactive box grows to the 44px minimum. */
.ce-link-arrow,
.ce-journal-card__link {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
}