/*
Irozon shop styling — structural rebuild.
Scope: header/nav, footer, WooCommerce shop archive, WooCommerce single product.
*/

/* Phase 1 — reconciled with the canonical Irozon design system
   (D:\Code\irozon-website\docs\design\irozon-branding.html). --irozon-ink
   and --irozon-dark previously held two different near-black values
   (#2c3033 / #1a1a1a); both are now the one canonical Irozon Ink. See
   docs/design/irozon-design-system-reference.md. */
:root {
  --irozon-primary-gradient: linear-gradient(135deg, #9be15d 0%, #02c685 100%);
  --irozon-green: #02c685;
  --irozon-green-hover: #02b578;
  --irozon-lime: #9be15d;
  --irozon-dark: #082a38;
  --irozon-ink: #082a38;
  --irozon-muted: #6f777d;
  --irozon-border: #e5e8e7;
  --irozon-surface: #ffffff;
  --irozon-shop-bg: #f7f8f7;
  --irozon-error: #ff6b4a;
}

/* Sticky footer: .wp-site-blocks is the core block-theme wrapper around
   header/main/footer template parts on every route (verified via markup —
   there's no per-template override of it). Making it a min-height:100vh
   column flex container with the main template part set to flex:1 0 auto
   pushes the footer to the bottom on short pages (404, thin content) while
   leaving long pages to scroll normally, without touching any individual
   template or hard-coding a page-specific min-height. */
.wp-site-blocks {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

.wp-site-blocks > main {
  flex: 1 0 auto;
}

/* Phase 1: Manrope is the canonical Irozon digital typeface (self-hosted
   via theme.json, same as irozon.se) — replaces Inter, which was never
   the canonical typeface, just an interim Google Fonts default. */
body,
.irozon-header,
.irozon-footer,
.irozon-shop-archive,
.irozon-single-product {
  font-family:
    "Manrope",
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    sans-serif;
}

/* Shop-wide background, matching irozon.se's body tone */
body.woocommerce,
body.woocommerce-page,
body.single-product,
.irozon-shop-archive,
.irozon-single-product {
  background-color: var(--irozon-shop-bg);
}

.irozon-shop-archive .irozon-product-info,
.irozon-single-product .irozon-product-details table.woocommerce-product-attributes,
.irozon-single-product #review_form_wrapper {
  background-color: var(--irozon-surface);
}

/* WooCommerce notices — normalized to canonical tokens (Phase 1). Left
   unstyled, these fall back to WooCommerce's own default palette, which
   includes an unrelated blue for "info" notices — a stray, un-tokenized
   color the audit flagged. All three states now share one restrained
   surface (white, bordered, left accent stripe) with only the accent
   color and icon changing per state, rather than a different flat
   background per notice type. */
.woocommerce-message,
.woocommerce-error,
.woocommerce-info,
.wc-block-components-notice-banner {
  background-color: var(--irozon-surface);
  border: 1px solid var(--irozon-border);
  border-left-width: 4px;
  border-radius: 0.5rem;
  color: var(--irozon-ink);
  box-shadow: none;
}

.woocommerce-message,
.wc-block-components-notice-banner.is-success {
  border-left-color: var(--irozon-green);
}

.woocommerce-error,
.wc-block-components-notice-banner.is-error {
  border-left-color: var(--irozon-error);
}

.woocommerce-info,
.wc-block-components-notice-banner.is-info,
.wc-block-components-notice-banner.is-warning {
  border-left-color: var(--irozon-ink);
}

.woocommerce-message::before,
.woocommerce-error::before,
.woocommerce-info::before {
  color: inherit;
}

.woocommerce-message .button,
.wc-block-components-notice-banner .wc-forward,
.woocommerce-message a.button.wc-forward {
  background: var(--irozon-ink) !important;
  color: #fff !important;
  border-radius: 0.6rem !important;
  border: none !important;
  font-weight: 500;
}

.woocommerce-message .button:hover,
.woocommerce-message a.button.wc-forward:hover {
  background: var(--irozon-green) !important;
  color: var(--irozon-ink) !important;
}

/* =========================================================
   HEADER / NAVBAR — matches D:\Code\irozon-website Navigation.tsx
   ========================================================= */

.irozon-header {
  background-color: rgba(255, 255, 255, 0.97) !important;
  box-shadow: 0 1px 0 var(--irozon-border);
  position: sticky;
  top: 0;
  z-index: 500;
}

.irozon-header-inner {
  min-height: 4rem;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}

.irozon-header-logo img {
  height: auto;
  max-height: 2.5rem;
  width: auto;
  object-fit: contain;
}

/* The nav's own "flexWrap":"wrap" (fixed in parts/header.html) previously let
   items reflow onto a second row instead of ever registering as overflow, so
   the block's built-in resize-driven overlay-menu switch never triggered
   between the point content stops fitting and the point the browser viewport
   itself gets narrow. Keeping every layer nowrap lets the real overflow show
   up so that built-in switch fires at the right (content-driven) width
   instead of wrapping "Shop" onto its own line. */
.irozon-header-inner,
.hostinger-ai-site-navigation-wrapper,
.irozon-nav .wp-block-navigation__responsive-container,
.irozon-nav ul.wp-block-navigation__container {
  flex-wrap: nowrap !important;
}

.irozon-nav .wp-block-navigation-item {
  flex-shrink: 0;
}

/* Theme's global ".hostinger-ai-site-navigation a:hover" rule (in style.min.css,
   part of the deactivated Hostinger AI plugin's base styling) adds a solid black
   border-bottom on hover/current-menu-item. Kill it in every state, on every
   selector shape the block can render (WP core Navigation block adds
   "current-menu-item"/"current-menu-ancestor" to the <li>, "aria-current" to the
   link itself, and nothing guarantees the link is a direct child), and on every
   property that could draw a line under the text. This must stay independent of
   the Hostinger plugin, which is why it lives here in irozon-shop.css. */
.hostinger-ai-site-navigation a,
.hostinger-ai-site-navigation a:hover,
.hostinger-ai-site-navigation a:focus,
.hostinger-ai-site-navigation a:focus-visible,
.hostinger-ai-site-navigation a:active,
.hostinger-ai-site-navigation .current-menu-item a,
.hostinger-ai-site-navigation .current-menu-item a:hover,
.hostinger-ai-site-navigation .current-menu-ancestor a,
.hostinger-ai-site-navigation .current-page-item a,
.hostinger-ai-site-navigation a[aria-current="page"],
.hostinger-ai-site-navigation a[aria-current="page"]:hover,
.hostinger-ai-site-title a,
.hostinger-ai-site-title a:hover,
.irozon-nav .wp-block-navigation-item,
.irozon-nav .wp-block-navigation-item > a,
.irozon-nav .wp-block-navigation-item__content,
.irozon-nav .wp-block-navigation-item__content:hover,
.irozon-nav .wp-block-navigation-item__content:focus,
.irozon-nav .wp-block-navigation-item__content:focus-visible,
.irozon-nav .wp-block-navigation-item__content:active,
.irozon-nav .current-menu-item .wp-block-navigation-item__content,
.irozon-nav .current-menu-ancestor .wp-block-navigation-item__content {
  border: 0 !important;
  border-bottom: 0 !important;
  text-decoration: none !important;
  box-shadow: none !important;
  background-image: none !important;
}

.hostinger-ai-site-navigation a::before,
.hostinger-ai-site-navigation a::after,
.irozon-nav .wp-block-navigation-item__content::before {
  content: none !important;
  border: 0 !important;
  background: none !important;
}

/* Accessible keyboard-focus indicator that isn't the black border-bottom */
.irozon-nav .wp-block-navigation-item__content:focus-visible {
  outline: 2px solid var(--irozon-green) !important;
  outline-offset: 2px;
  border-radius: 0.25rem;
}

.irozon-nav .wp-block-navigation-item > .wp-block-navigation-item__content {
  font-weight: 500;
  font-size: 0.9rem;
  color: var(--irozon-ink);
  padding: 0.5rem 0.75rem;
  border-bottom: none !important;
  transition: color 0.2s ease;
}

.irozon-nav .wp-block-navigation-item > .wp-block-navigation-item__content:hover {
  color: var(--irozon-green) !important;
  border-bottom: none !important;
}

.irozon-nav .wp-block-navigation-item.irozon-nav-company {
  margin-left: 0.2rem;
}

.irozon-nav .wp-block-navigation-item.irozon-nav-active > .wp-block-navigation-item__content {
  color: var(--irozon-green) !important;
  position: relative;
  font-weight: 700;
}

.irozon-nav
  .wp-block-navigation-item.irozon-nav-active
  > .wp-block-navigation-item__content::after {
  content: "";
  position: absolute;
  left: 0.75rem;
  right: 0.75rem;
  bottom: 0.15rem;
  height: 2px;
  border-radius: 2px;
  background: var(--irozon-primary-gradient);
}

@media (max-width: 860px) {
  .irozon-nav .wp-block-navigation__responsive-container:not(.is-menu-open) {
    display: none !important;
  }

  .irozon-nav .wp-block-navigation__responsive-container-open {
    display: flex !important;
    align-items: center;
    justify-content: center;
  }

  .irozon-nav .wp-block-navigation-item.irozon-nav-company {
    display: none;
  }
}

.wc-block-customer-account__link,
.hostinger-ai-site-navigation-wrapper .wc-block-mini-cart__button {
  border-radius: 999px;
  transition: background-color 0.2s ease;
}

.hostinger-ai-site-navigation-wrapper .wc-block-mini-cart__button:hover,
.wc-block-customer-account__link:hover {
  background-color: rgba(0, 0, 0, 0.05);
}

.wc-block-mini-cart__badge {
  background: var(--irozon-primary-gradient) !important;
  border-color: transparent !important;
}

/* ---- MINI-CART DRAWER (Phase 4) ----
   Previously entirely unstyled — default WooCommerce Blocks spacing/type
   next to an otherwise fully themed site. This is CSS-only polish of the
   drawer WooCommerce Blocks already renders; it does not introduce a
   custom Mini Cart template, since guessing at that block markup without
   the ability to test it live against the real block-template resolution
   order risks breaking the drawer entirely (see
   docs/design/irozon-shop-design-audit.md §9 and the roadmap's Phase 4
   note on this same caution for checkout). The heading text itself
   ("Your cart (items: N)") is a WooCommerce Blocks default string set on
   the block's own template, not reachable from CSS — documented as a
   follow-up, not forced. */
.wc-block-mini-cart__drawer .wc-block-components-drawer__screen-overlay,
.wc-block-components-drawer__screen-overlay {
  background: rgba(8, 42, 56, 0.45) !important;
}

.wc-block-mini-cart__drawer .wc-block-components-drawer__content,
.wc-block-mini-cart-items,
.wc-block-mini-cart__footer {
  font-family:
    "Manrope",
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    sans-serif;
}

.wc-block-mini-cart-items__title,
.wc-block-mini-cart__title {
  font-size: 1.05rem !important;
  font-weight: 700 !important;
  color: var(--irozon-ink) !important;
}

.wc-block-mini-cart-items .wc-block-cart-item__wrap {
  padding-top: 1rem !important;
  padding-bottom: 1rem !important;
}

.wc-block-mini-cart__footer {
  border-top: 1px solid var(--irozon-border) !important;
  padding-top: 1.25rem !important;
}

.wc-block-mini-cart__footer-subtotal .wc-block-components-totals-item__value {
  font-weight: 700;
  color: var(--irozon-ink);
}

.wc-block-mini-cart__footer .wc-block-components-button.wp-element-button {
  border-radius: 0.75rem !important;
}

/* Mobile nav drawer — reproduces src/components/Navigation.tsx's shadcn <Sheet>:
   dim overlay behind a right-side panel, 300-360px wide, generous inset padding,
   open/close slide transition, reduced-motion respected (WP core's Interactivity
   API already wires up Escape-to-close, overlay-click-to-close, focus trap, and
   body-scroll locking for the Navigation block's modal — this only restyles it). */
.irozon-nav .wp-block-navigation__responsive-container.is-menu-open {
  background: rgba(0, 0, 0, 0.5) !important;
}

.irozon-nav
  .wp-block-navigation__responsive-container.is-menu-open
  .wp-block-navigation__responsive-container-content {
  background: #fff;
  width: 85vw;
  max-width: 360px;
  min-width: 280px;
  margin-left: auto;
  height: 100dvh;
  padding: 5rem 1.75rem 2rem !important;
  box-shadow: -10px 0 30px rgba(0, 0, 0, 0.15);
  box-sizing: border-box;
}

.irozon-nav
  .wp-block-navigation__responsive-container.is-menu-open
  .wp-block-navigation__responsive-container-close {
  position: absolute;
  top: 1.25rem;
  right: 1.25rem;
}

.irozon-nav
  .wp-block-navigation__responsive-container.is-menu-open
  ul.wp-block-navigation__container {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.irozon-nav
  .wp-block-navigation__responsive-container.is-menu-open
  .wp-block-navigation-item__content {
  display: block;
  font-size: 1.05rem;
  font-weight: 500;
  color: var(--irozon-ink);
  padding: 0.85rem 0.5rem !important;
  border-radius: 0.5rem;
  transition:
    background-color 0.2s ease,
    color 0.2s ease;
}

.irozon-nav
  .wp-block-navigation__responsive-container.is-menu-open
  .wp-block-navigation-item__content:hover,
.irozon-nav
  .wp-block-navigation__responsive-container.is-menu-open
  .wp-block-navigation-item__content:focus-visible {
  background-color: rgba(0, 0, 0, 0.05);
}

.irozon-nav
  .wp-block-navigation__responsive-container.is-menu-open
  .irozon-nav-active
  .wp-block-navigation-item__content {
  color: var(--irozon-green) !important;
  font-weight: 700;
}

.irozon-nav
  .wp-block-navigation__responsive-container.is-menu-open
  .irozon-nav-active
  .wp-block-navigation-item__content::after {
  content: none !important;
}

.irozon-nav
  .wp-block-navigation__responsive-container.is-menu-open
  .irozon-nav-company {
  display: flex;
  width: 100%;
  margin: 0.85rem 0 0;
  padding-top: 1rem;
  border-top: 1px solid var(--irozon-border) !important;
}

@media (prefers-reduced-motion: reduce) {
  .irozon-nav .wp-block-navigation__responsive-container,
  .irozon-nav .wp-block-navigation__responsive-container-content {
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
  }
}

/* =========================================================
   FOOTER — rebuilt from D:\Code\irozon-website src/components/Footer.tsx
   ========================================================= */

/* Rebuilt for commerce (Phase 0): the agency footer's "LET'S MAKE IT
   HAPPEN." headline and scrolling services marquee
   (Mobile apps · iOS & Android apps · ... · Shopify & WooCommerce · ...)
   advertised Irozon's freelance/agency services on every page of the
   store, including Cart and Checkout — a category mismatch at the exact
   moment a shopper's confidence should be increasing, and continuous
   ambient motion with no commerce payoff. Replaced with a quiet,
   store-native footer: shop links, support/policy links, real contact
   info, and one text link back to irozon.se for people who want the
   agency site. See docs/design/irozon-shop-design-audit.md §12 and
   docs/design/irozon-shop-design-roadmap.md Phase 0. */
.irozon-footer-v2 {
  background-color: var(--irozon-shop-bg);
  color: var(--irozon-ink);
  overflow: hidden;
  max-width: 100%;
}

.irozon-footer-top {
  max-width: 82.5rem;
  margin: 0 auto;
  padding: 4rem 1.5rem 2.5rem;
  overflow: hidden;
}

.irozon-footer-grid {
  display: grid;
  grid-template-columns: 1.6fr 1fr 1fr 1fr;
  gap: 2.5rem;
  align-items: start;
}

.irozon-footer-brand {
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
  max-width: 26rem;
}

.irozon-footer-logo {
  font-family: inherit;
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--irozon-ink);
  text-decoration: none;
}

.irozon-footer-brand p {
  margin: 0;
  color: var(--irozon-muted);
  font-size: 0.9rem;
  line-height: 1.55;
}

.irozon-footer-irozon-link {
  font-size: 0.85rem;
  font-weight: 500;
  color: var(--irozon-ink);
  text-decoration: none;
  border-bottom: 1px solid var(--irozon-border);
  width: fit-content;
  padding-bottom: 0.1rem;
  transition:
    color 0.2s ease,
    border-color 0.2s ease;
}

.irozon-footer-irozon-link:hover {
  color: var(--irozon-green);
  border-color: var(--irozon-green);
}

.irozon-footer-nav {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.irozon-footer-nav h3,
.irozon-footer-social h3 {
  font-size: 0.78rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin: 0 0 0.35rem;
  color: var(--irozon-muted);
}

.irozon-footer-nav a {
  font-size: 0.9rem;
  color: var(--irozon-ink);
  text-decoration: none;
  width: fit-content;
}

.irozon-footer-nav a:hover {
  color: var(--irozon-green);
  text-decoration: underline;
}

.irozon-footer-social {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.irozon-footer-social-icons {
  display: flex;
  gap: 0.75rem;
}

.irozon-footer-social-icons a {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 999px;
  background: rgba(8, 42, 56, 0.06);
  color: var(--irozon-ink);
  transition:
    background-color 0.2s ease,
    color 0.2s ease;
}

.irozon-footer-social-icons a:hover,
.irozon-footer-social-icons a:focus-visible {
  background: var(--irozon-green);
  color: #fff;
}

.irozon-footer-email {
  font-size: 0.9rem;
  font-weight: 500;
  color: var(--irozon-ink);
  text-decoration: none;
  transition: color 0.2s ease;
}

.irozon-footer-email:hover {
  color: var(--irozon-green);
}

/* Restrained shop-support links — a column inside the 25/50/25 bottom
   row grid rather than its own full-width row. */
.irozon-footer-support {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 0.5rem 1.25rem;
  font-size: 0.8rem;
  margin: 0;
}

.irozon-footer-support .irozon-cookie-settings-link {
  font-size: 0.8rem;
}

.irozon-footer-support a {
  color: var(--irozon-muted);
  text-decoration: none;
}

.irozon-footer-support a:hover {
  color: var(--irozon-ink);
  text-decoration: underline;
}

.irozon-footer-bottom {
  max-width: 82.5rem;
  margin: 0 auto;
  padding: 1.5rem;
  display: grid;
  grid-template-columns: 1fr 2fr 1fr;
  align-items: center;
  gap: 1rem;
  font-size: 0.85rem;
  color: var(--irozon-muted);
}

.irozon-footer-bottom-copyright,
.irozon-footer-bottom-org {
  margin: 0;
}

.irozon-footer-bottom-org {
  text-align: right;
}

@media (max-width: 782px) {
  .irozon-footer-grid {
    grid-template-columns: 1fr;
    gap: 2rem;
  }

  .irozon-footer-bottom {
    grid-template-columns: 1fr;
    justify-items: center;
    text-align: center;
  }

  .irozon-footer-bottom-org {
    text-align: center;
  }
}

/* =========================================================
   MOBILE GUTTER — consistent side padding everywhere on small screens.
   theme.json has no root-padding-aware alignment, so unaligned/wide blocks
   have zero side inset by default; pad the top-level wrappers once instead
   of every child (header heading, breadcrumbs, toolbar, grid, product
   details, additional info and reviews all live inside these wrappers).
   ========================================================= */

.irozon-shop-archive,
.irozon-single-product,
.hostinger-ai-menu-wrapper,
.irozon-footer-top,
.irozon-footer-bottom {
  padding-left: 2rem !important;
  padding-right: 2rem !important;
  box-sizing: border-box;
}

@media (max-width: 782px) {
  .irozon-shop-archive,
  .irozon-single-product,
  .hostinger-ai-menu-wrapper,
  .irozon-footer-top,
  .irozon-footer-bottom {
    padding-left: 1.5rem !important;
    padding-right: 1.5rem !important;
  }
}

@media (max-width: 480px) {
  .irozon-shop-archive,
  .irozon-single-product,
  .hostinger-ai-menu-wrapper,
  .irozon-footer-top,
  .irozon-footer-bottom {
    padding-left: 1.25rem !important;
    padding-right: 1.25rem !important;
  }
}

/* =========================================================
   SHOP ARCHIVE — modeled on theme.madsparrow.me/osty/shop
   ========================================================= */

.irozon-shop-title.wp-block-query-title {
  font-size: clamp(2.25rem, 4.5vw, 3.75rem);
  font-weight: 800;
  letter-spacing: 0;
  color: var(--irozon-ink);
  margin: 2.5rem 0 1rem;
  text-transform: none;
}

.irozon-shop-description {
  color: var(--irozon-muted);
  font-size: 1rem;
  margin: 0 0 1.25rem;
  max-width: 40em;
}

.irozon-shop-description:empty {
  display: none;
}

/* Full-width bar wrapping the breadcrumb block on every page that has
   one — gives it a proper visual container instead of plain text floating
   under the header, and ties its horizontal position to whatever content
   width the page below it actually uses (the "align:full" outer group
   spans edge-to-edge for the background/border; the constrained inner
   layout — matched per-template to that page's own content width, e.g.
   720px on policy pages — is what makes the breadcrumb's left edge line
   up with the content underneath it). */
.irozon-breadcrumb-bar {
  background: var(--irozon-shop-bg);
  border-bottom: 1px solid var(--irozon-border);
  padding-top: 0.85rem;
  padding-bottom: 0.85rem;
}

.irozon-breadcrumbs {
  color: var(--irozon-ink);
  font-size: 0.8rem;
  margin: 0;
  line-height: 1.6;
  flex-wrap: wrap;
}

.irozon-breadcrumbs,
.irozon-breadcrumbs nav,
.irozon-breadcrumbs .woocommerce-breadcrumb {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.35rem;
}

.irozon-breadcrumbs a {
  color: var(--irozon-muted);
  text-decoration: none !important;
  border-bottom: 0 !important;
  transition: color 0.2s ease;
}

.irozon-breadcrumbs a:hover,
.irozon-breadcrumbs a:focus-visible {
  color: var(--irozon-green);
}

.irozon-breadcrumbs a:focus-visible {
  outline: 2px solid var(--irozon-green);
  outline-offset: 2px;
  border-radius: 0.2rem;
}

.irozon-shop-toolbar {
  margin: 0 0 1.5rem;
  font-size: 0.9rem;
  color: var(--irozon-muted);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
}

.irozon-shop-toolbar > * {
  margin-block-start: 0 !important;
  margin-block-end: 0 !important;
}

.irozon-shop-toolbar .wc-block-components-product-results-count {
  margin-bottom: 0;
}

.irozon-shop-toolbar .wp-block-woocommerce-catalog-sorting {
  margin-left: auto;
}

.irozon-shop-toolbar .woocommerce-ordering {
  margin: 0;
}

/* Real native <select> — no fake dropdown, just a styled control with a
   custom chevron drawn via background-image so the native picker still opens */
.irozon-shop-toolbar select {
  appearance: none;
  -webkit-appearance: none;
  border: 1px solid var(--irozon-border);
  border-radius: 0.5rem;
  background-color: var(--irozon-surface);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6' fill='none'%3E%3Cpath d='M1 1L5 5L9 1' stroke='%236d7278' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.9rem center;
  color: var(--irozon-ink);
  font-size: 0.85rem;
  font-family: inherit;
  padding: 0.6rem 2.25rem 0.6rem 1rem;
  min-width: 12rem;
  max-width: 100%;
  cursor: pointer;
  transition:
    border-color 0.2s ease,
    box-shadow 0.2s ease;
}

.irozon-shop-toolbar select:hover {
  border-color: #cfcfcf;
}

.irozon-shop-toolbar select:focus-visible {
  outline: none;
  border-color: var(--irozon-green);
  box-shadow: 0 0 0 3px rgba(2, 198, 133, 0.2);
}

.irozon-shop-toolbar select:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  background-color: var(--irozon-shop-bg);
}

@media (max-width: 480px) {
  .irozon-shop-toolbar {
    align-items: center;
  }

  .irozon-shop-toolbar select {
    width: min(100%, 14rem);
  }
}

.irozon-shop-categories {
  margin-top: 0;
  margin-bottom: 2rem;
  overflow: hidden;
}

.irozon-shop-categories ul.products {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem;
  list-style: none;
  margin: 0;
  padding: 0;
  width: 100%;
  box-sizing: border-box;
}

.irozon-shop-categories ul.products li.product-category {
  display: block;
  flex: 0 0 auto;
  width: auto !important;
  max-width: none !important;
  float: none !important;
  margin: 0 !important;
  padding: 0;
}

/* Defensive: WooCommerce's product_categories shortcode can occasionally
   be padded out with a category placeholder (no term) or hooked output
   that resolves to an empty tag — never show it as a blank pill. */
.irozon-shop-categories ul.products li.product-category:empty,
.irozon-shop-categories ul.products li.product-category a:empty {
  display: none;
}

.irozon-shop-categories ul.products li.product-category a {
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
  color: var(--irozon-ink);
  font-size: 0.9rem;
  font-weight: 500;
  line-height: 1;
  text-decoration: none;
  min-height: 3.5rem;
  padding: 0.375rem 1rem 0.375rem 0.375rem;
  border-radius: 999px;
  border: 1px solid var(--irozon-border);
  background: var(--irozon-surface);
  white-space: nowrap;
  transition:
    background-color 0.2s ease,
    border-color 0.2s ease;
}

.irozon-shop-categories ul.products li.product-category a > p:empty {
  display: none;
}

.irozon-shop-categories ul.products li.product-category a:hover,
.irozon-shop-categories ul.products li.product-category a:focus-visible {
  background: #fff;
  border-color: #fff;
}

.irozon-shop-categories ul.products li.product-category a:focus-visible {
  outline: 2px solid var(--irozon-green);
  outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
  .irozon-shop-categories ul.products li.product-category a {
    transition: none;
  }
}

.irozon-shop-categories ul.products li.product-category img {
  width: 44px !important;
  height: 44px !important;
  border-radius: 999px !important;
  object-fit: cover;
  flex-shrink: 0;
  margin: 0 !important;
}

.irozon-shop-categories ul.products li.product-category h2 {
  font-size: 0.9rem;
  font-weight: 500;
  line-height: 1;
  white-space: nowrap;
  flex-shrink: 0;
  margin: 0;
}

.irozon-shop-categories ul.products li.product-category mark {
  background: none;
  color: inherit;
  font-weight: inherit;
}

.irozon-shop-categories ul.products li.product-category .count {
  display: none;
}

@media (max-width: 782px) {
  .irozon-shop-categories {
    margin-top: 0;
    margin-bottom: 1.75rem;
    overflow-x: auto;
    overflow-y: hidden;
    scrollbar-width: none;
  }

  .irozon-shop-categories::-webkit-scrollbar {
    display: none;
  }

  .irozon-shop-categories ul.products {
    flex-wrap: nowrap;
    overflow: visible;
    gap: 0.75rem;
    padding: 0.25rem 0.75rem 0.5rem 0;
    width: max-content;
    max-width: none;
    -webkit-overflow-scrolling: touch;
  }

  .irozon-shop-categories ul.products::-webkit-scrollbar {
    display: none;
  }

  .irozon-shop-categories ul.products li.product-category a {
    min-height: 3rem;
    padding: 0.375rem 0.875rem 0.375rem 0.375rem;
    gap: 0.625rem;
  }

  .irozon-shop-categories ul.products li.product-category img {
    width: 30px !important;
    height: 30px !important;
  }
}

.irozon-product-grid {
  margin-top: 0 !important;
  row-gap: 2rem !important;
  column-gap: 2rem !important;
  align-items: stretch !important;
}

.irozon-product-grid .wc-block-product-template__responsive {
  grid-template-columns: 1fr !important;
  gap: 2rem !important;
}

@media (min-width: 640px) {
  .irozon-product-grid .wc-block-product-template__responsive {
    grid-template-columns: repeat(2, 1fr) !important;
  }
}

@media (min-width: 1024px) {
  .irozon-product-grid .wc-block-product-template__responsive {
    grid-template-columns: repeat(3, 1fr) !important;
  }
}

.irozon-product-grid .wp-block-woocommerce-product-template > * {
  background: none;
  border: none;
  border-radius: 0;
  padding: 0;
  box-shadow: none;
  transition: transform 0.25s ease;
  transform: translateY(0);
  display: flex;
  flex-direction: column;
  height: 100%;
}

.irozon-product-grid .wp-block-woocommerce-product-template > *:hover,
.irozon-product-grid .wp-block-woocommerce-product-template > *:focus-within {
  transform: translateY(-4px);
}

@media (prefers-reduced-motion: reduce) {
  .irozon-product-grid .wp-block-woocommerce-product-template > * {
    transition: none;
  }

  .irozon-product-grid .wp-block-woocommerce-product-template > *:hover,
  .irozon-product-grid .wp-block-woocommerce-product-template > *:focus-within {
    transform: none;
  }
}

.irozon-product-grid .wc-block-components-product-image {
  position: relative;
  display: block;
  overflow: hidden;
  background: var(--irozon-shop-bg);
  aspect-ratio: 1 / 1;
  border-radius: 1rem;
  box-sizing: border-box;
}

.irozon-product-grid .wc-block-components-product-image img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  border-radius: inherit;
  transition: transform 0.5s ease;
}

.irozon-product-grid .wc-block-components-product-image:hover img {
  transform: scale(1.05);
}

@media (prefers-reduced-motion: reduce) {
  .irozon-product-grid .wc-block-components-product-image img {
    transition: none;
  }

  .irozon-product-grid .wc-block-components-product-image:hover img {
    transform: none;
  }
}

.irozon-product-grid .wc-block-components-sale-badge {
  position: absolute;
  top: 0.75rem;
  left: 0.75rem;
  z-index: 2;
  background: var(--irozon-primary-gradient) !important;
  border-radius: 999px;
  border: none;
  color: #fff;
  font-size: 0.7rem;
  font-weight: 700;
  padding: 0.25rem 0.75rem;
}

.irozon-product-grid .irozon-product-info {
  background: var(--irozon-surface);
  border-radius: 1rem;
  margin-top: 1rem;
  padding: 1rem 1.125rem 1.125rem;
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 7rem;
}

.irozon-product-grid .irozon-product-meta-row {
  margin-top: auto;
  padding-top: 0.875rem;
  align-items: center;
  justify-content: space-between;
  flex-wrap: nowrap;
  gap: 0.875rem;
}

.irozon-product-grid .irozon-product-meta-row .irozon-product-price {
  min-width: 0;
  flex-shrink: 0;
}

.irozon-product-grid .irozon-product-title.irozon-product-title {
  font-size: clamp(1.05rem, 1.4vw, 1.2rem);
  font-weight: 700;
  line-height: 1.18;
  text-align: left;
  margin: 0;
}

.irozon-product-title a {
  color: var(--irozon-ink);
  transition: color 0.2s ease;
}

.irozon-product-title a:hover,
.irozon-product-title a:focus-visible {
  color: var(--irozon-green);
}

.irozon-product-cat {
  display: block;
  margin-top: 0.35rem;
  font-size: 0.8rem;
  color: var(--irozon-muted);
  line-height: 1.25;
}

.irozon-product-cat a {
  color: inherit;
  text-decoration: none;
}

.irozon-product-grid .irozon-product-price {
  color: var(--irozon-ink);
  font-weight: 800;
  font-size: 1.08rem;
  line-height: 1.1;
}

.irozon-product-grid .irozon-product-price del {
  color: var(--irozon-muted);
  opacity: 1;
  font-weight: 400;
  font-size: 0.8rem;
  margin-right: 0.35rem;
}

.irozon-product-grid .irozon-product-price ins {
  color: var(--irozon-green);
  text-decoration: none;
  font-weight: 800;
}

.irozon-product-grid .irozon-select-btn .wp-block-button__link {
  width: auto;
  font-size: 0.9rem;
  line-height: 1;
  padding: 0.65rem 1rem !important;
  min-height: 2.5rem;
  white-space: nowrap;
  flex-shrink: 0;
}

@media (max-width: 639px) {
  .irozon-product-grid {
    row-gap: 2.25rem !important;
  }

  .irozon-product-grid .irozon-product-info {
    min-height: 0;
  }
}

.wp-block-query-pagination .page-numbers {
  border-radius: 999px;
  min-width: 2.25rem;
  text-align: center;
  color: var(--irozon-ink);
}

.wp-block-query-pagination .page-numbers.current {
  background: var(--irozon-primary-gradient);
  color: #fff;
}

/* =========================================================
   SINGLE PRODUCT — modeled on theme.madsparrow.me/osty/product/bold-layer
   ========================================================= */

.irozon-product-columns {
  align-items: flex-start;
}

.wp-block-woocommerce-product-image-gallery,
.woocommerce div.product .woocommerce-product-gallery {
  border-radius: 0;
}

.wp-block-woocommerce-product-image-gallery img {
  border-radius: 0;
}

.irozon-product-title.wp-block-post-title {
  font-size: 1.5rem;
  font-weight: 800;
  color: var(--irozon-ink);
  margin: 0 0 0.5rem;
}

.wp-block-woocommerce-product-price.irozon-product-price {
  color: var(--irozon-ink);
  font-weight: 700;
  margin-bottom: 0.75rem;
}

.irozon-single-product p.stock {
  display: inline-block;
  font-size: 0.85rem;
  font-weight: 600;
  margin-bottom: 1.25rem;
}

.irozon-single-product p.stock.in-stock {
  color: var(--irozon-green);
}

.irozon-single-product p.stock.out-of-stock {
  color: var(--irozon-error);
}

/* add-to-cart-form's classic template also prints its own stock line;
   we already show one via the explicit product-stock-indicator block above. */
.irozon-add-to-cart p.stock {
  display: none;
}

.irozon-product-excerpt {
  color: var(--irozon-ink);
  line-height: 1.7;
  max-width: 46em;
  margin-bottom: 1.5rem;
}

.irozon-product-meta-top {
  color: var(--irozon-muted);
  font-size: 0.85rem;
  border-top: 1px solid var(--irozon-border);
  border-bottom: 1px solid var(--irozon-border);
  margin: 1.5rem 0;
  padding: 0.9rem 0;
}

.irozon-product-meta-top strong {
  color: var(--irozon-ink);
}

.irozon-product-meta-top a {
  color: var(--irozon-muted);
  text-decoration: underline;
}

.irozon-product-meta-top a:hover {
  color: var(--irozon-green);
}

/* ---------- Irozon commerce Primary Button ----------
   Phase 0/1: retired. This used to be a hardcoded Amber (#fbbf24) button
   that turned near-black on hover — a third, undocumented action color
   competing with Cart/Checkout's Green and the homepage's plain Black
   buttons (see docs/design/irozon-shop-design-audit.md §8, Critical).
   Rebuilt on the canonical Irozon system's own two action colors only —
   Ink at rest, Green on hover, white/ink text — with NO Signature CTA
   choreography (no slide, no reveal panel): commerce buttons must be
   immediately understandable and stable, not a memorable interaction.
   See docs/design/irozon-design-system-reference.md "Commerce
   adaptations". */

/* .irozon-select-btn .wp-block-button__link is the real WooCommerce archive
   card button (Add to cart / Select options / Read more / View products).
   .wp-block-button.irozon-cta-btn .wp-block-button__link is a plain
   Gutenberg core/button block with "irozon-cta-btn" set as its className —
   the className lands on the wrapping .wp-block-button div, not the <a>
   itself, so it needs its own descendant selector here. Sharing every rule
   below across all three means it's the exact same CTA everywhere, not a
   re-approximation. */

/* Previously this slid in a black ::before overlay on hover. Absolutely-
   positioned pseudo-elements always paint after static in-flow content in
   the same stacking context (CSS2.1 painting order, stack level 0 comes
   after in-flow inline content) — so that black panel painted ON TOP of the
   button's own text every time, hiding it instead of revealing white text
   beneath it. A plain background-color/color transition on the element
   itself avoids the whole class of bug (the label always paints above its
   own element's background) and needs no wrapping span, so it also fixes
   every reuse of this class (WooCommerce's Add to cart/Select options
   buttons included) without touching their markup. */
.irozon-cta-btn,
.irozon-select-btn .wp-block-button__link,
.wp-block-button.irozon-cta-btn .wp-block-button__link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  border: none !important;
  border-radius: 0.75rem !important;
  background: var(--irozon-ink) !important;
  color: #fff !important;
  font-weight: 500;
  font-size: 0.95rem;
  /* padding: 0.7rem 1.5rem !important; */
  cursor: pointer;
  transition:
    background-color 0.2s ease,
    color 0.2s ease,
    transform 0.15s ease;
}

.irozon-cta-btn:hover,
.irozon-cta-btn:focus-visible,
.irozon-select-btn .wp-block-button__link:hover,
.irozon-select-btn .wp-block-button__link:focus-visible,
.wp-block-button.irozon-cta-btn .wp-block-button__link:hover,
.wp-block-button.irozon-cta-btn .wp-block-button__link:focus-visible {
  background: var(--irozon-green) !important;
  color: var(--irozon-ink) !important;
}

.irozon-cta-btn:active,
.irozon-select-btn .wp-block-button__link:active,
.wp-block-button.irozon-cta-btn .wp-block-button__link:active {
  transform: scale(0.97);
}

.irozon-cta-btn:focus-visible,
.irozon-select-btn .wp-block-button__link:focus-visible,
.wp-block-button.irozon-cta-btn .wp-block-button__link:focus-visible {
  outline: none;
  box-shadow:
    0 0 0 2px #fff,
    0 0 0 4px var(--irozon-ink);
}

.irozon-cta-btn:disabled,
.irozon-cta-btn.disabled,
.irozon-select-btn .wp-block-button__link:disabled,
.irozon-select-btn .wp-block-button__link.disabled,
.wp-block-button.irozon-cta-btn .wp-block-button__link:disabled,
.wp-block-button.irozon-cta-btn .wp-block-button__link.disabled {
  opacity: 0.5;
  cursor: not-allowed;
  pointer-events: none;
}

/* Loading skeleton placeholder (before hydration) shouldn't get the Ink treatment */
.irozon-select-btn .wc-block-components-product-button__button--placeholder {
  background: currentColor !important;
}

/* ---------- Secondary button (.is-style-outline): quiet by design —
   transparent/outline at rest, a faint Green-tinted fill on hover. This is
   deliberately a lower-weight treatment than the Primary button above, so
   "View plugins" / "Explore 3D-printed products" / "View all products"
   never compete visually with the page's one primary commerce action. ---------- */
.wp-block-button.is-style-outline .wp-block-button__link {
  border: 1.5px solid var(--irozon-ink) !important;
  border-radius: 0.75rem !important;
  background: transparent !important;
  color: var(--irozon-ink) !important;
  font-weight: 500;
  font-size: 0.95rem;
  padding: 0.7rem 1.5rem !important;
  cursor: pointer;
  transition:
    background-color 0.2s ease,
    border-color 0.2s ease,
    color 0.2s ease,
    transform 0.15s ease;
}

.wp-block-button.is-style-outline .wp-block-button__link:hover,
.wp-block-button.is-style-outline .wp-block-button__link:focus-visible {
  background: rgba(2, 198, 133, 0.08) !important;
  border-color: var(--irozon-green) !important;
  color: var(--irozon-ink) !important;
}

.wp-block-button.is-style-outline .wp-block-button__link:active {
  transform: scale(0.97);
}

.wp-block-button.is-style-outline .wp-block-button__link:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px rgba(2, 198, 133, 0.25);
}

/* Dark sections (e.g. the homepage's closing "Visit irozon.se" panel on an
   Ink background) need both buttons' rest states to read against an Ink
   background, not blend into it. Scoped to the one pattern that sets a
   dark section background (patterns/irozon-cta.php). */
.irozon-cta-section .wp-block-button.is-style-outline .wp-block-button__link {
  border-color: #fff !important;
  color: #fff !important;
}

.irozon-cta-section .wp-block-button.is-style-outline .wp-block-button__link:hover,
.irozon-cta-section .wp-block-button.is-style-outline .wp-block-button__link:focus-visible {
  background: rgba(255, 255, 255, 0.12) !important;
  border-color: var(--irozon-green) !important;
  color: #fff !important;
}

/* Left in place though patterns/irozon-cta.php no longer uses
   .irozon-cta-btn (replaced by .irozon-signature-cta below) — harmless if
   .irozon-cta-btn is ever reused on a dark section again in future. */
.irozon-cta-section .irozon-cta-btn .wp-block-button__link {
  background: #fff !important;
  color: var(--irozon-ink) !important;
}

.irozon-cta-section .irozon-cta-btn .wp-block-button__link:hover,
.irozon-cta-section .irozon-cta-btn .wp-block-button__link:focus-visible {
  background: var(--irozon-green) !important;
  color: var(--irozon-ink) !important;
}

/* ---------- Irozon Signature CTA ----------
   Used ONCE, here only: the non-transactional "Visit irozon.se" agency
   bridge link in patterns/irozon-cta.php. LOCKED per project decision —
   never for Add to cart / Buy / Cart / Checkout / Place order / payment
   actions (those use the plain, static .irozon-cta-btn / .is-style-outline
   buttons defined above).

   Faithfully adapted (not reinterpreted) from the actual current source,
   D:\Code\irozon-website\src\components\PrimaryButton.tsx: two absolutely
   positioned layers over a relatively positioned, overflow-hidden pill —
   a full-width text layer that slides right 3.5rem and recolors
   Ink -> Lime on hover/focus (the component's own `GREEN` constant is
   literally the Lime hex, #9be15d — verified in source, not assumed), and
   a separate 48px left panel (hidden at rest, x:-100%/opacity:0) that
   reveals the three-dot mark. No DOM reordering, no merging pieces.

   The original renders this with a Framer Motion spring
   (stiffness 420, damping 18, mass 0.6). This is plain CSS/HTML (no
   Framer Motion dependency here), so the spring is approximated with the
   canonical system's own pre-existing CSS proxy for that exact spring —
   docs/design/irozon-branding.html's `--ease-signature:
   cubic-bezier(0.34, 1.56, 0.64, 1)` — at ~220ms, matching that file's
   own --dur-standard token. This easing constant was not invented for
   this task; it already exists in the canonical system specifically to
   stand in for this component's spring in non-Framer-Motion contexts. */
.irozon-signature-cta {
  position: relative;
  display: inline-flex;
  height: 48px;
  align-items: center;
  overflow: hidden;
  border-radius: 12px;
  text-decoration: none;
  cursor: pointer;
  outline: none;
}

.irozon-signature-cta:focus-visible {
  outline: 2px solid var(--irozon-green);
  outline-offset: 2px;
}

.irozon-signature-cta:active {
  transform: scale(0.97);
}

/* Invisible sizer: establishes the pill's natural width (text + dots +
   the 3.5rem slide gap) since the animated layers are all absolutely
   positioned and contribute nothing to layout on their own. */
.irozon-signature-cta__sizer {
  visibility: hidden;
  display: flex;
  align-items: center;
  gap: 0.75rem;
  white-space: nowrap;
  padding: 0 1.5rem;
}

.irozon-signature-cta__spacer {
  display: inline-block;
  width: 3.5rem;
  flex-shrink: 0;
}

.irozon-signature-cta__dots {
  width: 14px;
  height: 14px;
  flex-shrink: 0;
}

.irozon-signature-cta__base {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
  border-radius: 12px;
  padding: 0 1.5rem;
  font-weight: 500;
  background: var(--irozon-ink);
  color: #fff;
  transform: translateX(0);
  transition:
    transform 220ms cubic-bezier(0.34, 1.56, 0.64, 1),
    background-color 220ms cubic-bezier(0.34, 1.56, 0.64, 1),
    color 220ms cubic-bezier(0.34, 1.56, 0.64, 1);
}

.irozon-signature-cta__text {
  display: inline-block;
  transform: translateX(0);
  transition: transform 220ms cubic-bezier(0.34, 1.56, 0.64, 1);
}

.irozon-signature-cta__dots--right {
  opacity: 1;
  transform: scale(1);
  transition:
    opacity 220ms cubic-bezier(0.34, 1.56, 0.64, 1),
    transform 220ms cubic-bezier(0.34, 1.56, 0.64, 1);
}

.irozon-signature-cta__panel {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 12px;
  background: var(--irozon-ink);
  color: #fff;
  transform: translateX(-100%);
  opacity: 0;
  transition:
    transform 220ms cubic-bezier(0.34, 1.56, 0.64, 1),
    opacity 220ms cubic-bezier(0.34, 1.56, 0.64, 1);
}

.irozon-signature-cta:hover .irozon-signature-cta__base,
.irozon-signature-cta:focus-visible .irozon-signature-cta__base {
  transform: translateX(3.5rem);
  background: #9be15d;
  color: var(--irozon-ink);
}

.irozon-signature-cta:hover .irozon-signature-cta__text,
.irozon-signature-cta:focus-visible .irozon-signature-cta__text {
  transform: translateX(-1rem);
}

.irozon-signature-cta:hover .irozon-signature-cta__dots--right,
.irozon-signature-cta:focus-visible .irozon-signature-cta__dots--right {
  opacity: 0;
  transform: scale(0.8);
}

.irozon-signature-cta:hover .irozon-signature-cta__panel,
.irozon-signature-cta:focus-visible .irozon-signature-cta__panel {
  transform: translateX(0);
  opacity: 1;
}

@media (prefers-reduced-motion: reduce) {
  .irozon-signature-cta,
  .irozon-signature-cta__base,
  .irozon-signature-cta__text,
  .irozon-signature-cta__dots--right,
  .irozon-signature-cta__panel {
    transition: none !important;
  }

  .irozon-signature-cta:active {
    transform: none !important;
  }
}

/* Small light surface behind the Signature CTA on the dark Ink
   agency-bridge section (irozon-cta.php) — the CTA's own rest-state
   background is Ink (see .irozon-signature-cta__base above), identical
   to the section background, so it reads as invisible until hover.
   Reuses the same white/bordered surface treatment already established
   elsewhere in this theme (e.g. .irozon-trust-item) rather than
   inventing a new one; sized to hug the button, not read as a card. */
.irozon-cta-surface {
  display: inline-block;
  background: var(--irozon-surface);
  border: 1px solid var(--irozon-border);
  border-radius: 1rem;
  padding: 0.2rem;
  line-height: 0;
}

.irozon-add-to-cart form.cart {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 1rem;
}

.irozon-add-to-cart .quantity {
  display: flex;
  align-items: center;
  height: 3rem;
}

.irozon-add-to-cart .irozon-qty-label {
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--irozon-muted);
  margin-right: 0.75rem;
}

.irozon-add-to-cart .quantity {
  border: 1px solid var(--irozon-border);
  border-radius: 0.75rem;
  overflow: hidden;
}

.irozon-add-to-cart .quantity .irozon-qty-btn {
  width: 2.75rem;
  height: 3rem;
  border: none;
  background: none;
  font-size: 1.1rem;
  cursor: pointer;
  color: var(--irozon-ink);
  transition:
    background-color 0.2s ease,
    color 0.2s ease;
}

.irozon-add-to-cart .quantity .irozon-qty-btn:hover {
  background: var(--irozon-shop-bg);
  color: var(--irozon-green);
}

.irozon-add-to-cart .quantity .irozon-qty-btn:focus-visible {
  outline: 2px solid var(--irozon-green);
  outline-offset: -2px;
}

.irozon-add-to-cart .quantity input.qty {
  border: none;
  width: 3rem;
  height: 3rem;
  text-align: center;
  font-weight: 600;
  -moz-appearance: textfield;
}

.irozon-add-to-cart .quantity input.qty::-webkit-inner-spin-button,
.irozon-add-to-cart .quantity input.qty::-webkit-outer-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

.irozon-add-to-cart .single_add_to_cart_button {
  height: 3rem;
  flex: 1 1 auto;
}

.irozon-add-to-cart .single_add_to_cart_button.disabled {
  opacity: 0.5;
  pointer-events: none;
}

/* Instant click feedback while the normal (unmodified) form submission is
   in flight — see assets/js/irozon-shop.js irozonInitAddToCartFeedback().
   A quiet pulse, not a spinner graphic, and it respects reduced motion. */
.irozon-add-to-cart .single_add_to_cart_button.is-adding {
  opacity: 0.75;
  cursor: progress;
  animation: irozon-adding-pulse 1s ease-in-out infinite;
}

@keyframes irozon-adding-pulse {
  0%,
  100% {
    opacity: 0.75;
  }
  50% {
    opacity: 0.55;
  }
}

@media (prefers-reduced-motion: reduce) {
  .irozon-add-to-cart .single_add_to_cart_button.is-adding {
    animation: none;
  }
}

@media (max-width: 480px) {
  .irozon-add-to-cart form.cart {
    flex-direction: column;
    align-items: stretch;
  }

  .irozon-add-to-cart .single_add_to_cart_button {
    width: 100%;
  }
}

/* ---------- Tabs (Additional information / Reviews) ---------- */

.irozon-product-details .woocommerce-tabs.wc-tabs-wrapper {
  margin-top: 4.5rem;
  margin-bottom: 3.5rem;
}

.irozon-product-details ul.tabs.wc-tabs {
  display: flex;
  gap: 2.5rem;
  border-bottom: 1px solid var(--irozon-border);
  padding: 0;
  margin: 0 0 2.5rem;
  list-style: none;
}

.irozon-product-details ul.tabs.wc-tabs li {
  margin: 0;
}

.irozon-product-details ul.tabs.wc-tabs li a {
  display: inline-block;
  font-weight: 600;
  font-size: 0.95rem;
  color: var(--irozon-muted);
  text-decoration: none;
  padding-bottom: 1rem;
  border-bottom: 2px solid transparent;
}

.irozon-product-details ul.tabs.wc-tabs li.active a {
  color: var(--irozon-ink);
  border-bottom-color: var(--irozon-green);
}

.irozon-product-details .woocommerce-Tabs-panel {
  max-width: 46em;
}

/* ---------- Additional information — clean spec table ---------- */

.irozon-product-details table.woocommerce-product-attributes {
  width: 100%;
  border-collapse: collapse;
  margin: 0;
}

.irozon-product-details table.woocommerce-product-attributes tr {
  border-top: 1px solid var(--irozon-border);
}

.irozon-product-details table.woocommerce-product-attributes tr:last-child {
  border-bottom: 1px solid var(--irozon-border);
}

.irozon-product-details .woocommerce-product-attributes-item__label {
  width: 35%;
  padding: 1.5rem 2rem 1.5rem 0;
  font-weight: 600;
  font-size: 0.9rem;
  line-height: 1.6;
  color: var(--irozon-ink);
  text-align: left;
  vertical-align: top;
}

.irozon-product-details .woocommerce-product-attributes-item__value {
  padding: 1.5rem 0;
  font-size: 0.9rem;
  line-height: 1.6;
  color: var(--irozon-muted);
}

.irozon-product-details .woocommerce-product-attributes-item__value p {
  margin: 0;
}

@media (max-width: 600px) {
  .irozon-product-details table.woocommerce-product-attributes,
  .irozon-product-details table.woocommerce-product-attributes tbody,
  .irozon-product-details table.woocommerce-product-attributes tr,
  .irozon-product-details .woocommerce-product-attributes-item__label,
  .irozon-product-details .woocommerce-product-attributes-item__value {
    display: block;
    width: 100%;
  }

  .irozon-product-details .woocommerce-product-attributes-item__label {
    padding: 1rem 0 0.35rem;
  }

  .irozon-product-details .woocommerce-product-attributes-item__value {
    padding: 0 0 1rem;
  }
}

/* ---------- Reviews ---------- */

.irozon-product-details #reviews {
  max-width: 46em;
}

.irozon-product-details #reviews h2 {
  font-weight: 800;
  font-size: 1.5rem;
  color: var(--irozon-ink);
  margin-bottom: 1rem;
}

.irozon-product-details .woocommerce-noreviews {
  color: var(--irozon-muted);
  margin-bottom: 2rem;
}

.irozon-product-details #review_form_wrapper {
  margin-top: 2rem;
  border-radius: 1rem;
  padding: 2rem;
}

.irozon-product-details .comment-reply-title {
  font-weight: 700;
  font-size: 1.15rem;
  color: var(--irozon-ink);
  display: block;
  margin-bottom: 1.5rem;
}

.irozon-product-details .comment-notes {
  color: var(--irozon-muted);
  font-size: 0.85rem;
  margin-bottom: 1.5rem;
}

.irozon-product-details .comment-form-rating {
  margin-bottom: 1.5rem;
}

.irozon-product-details .comment-form-rating label {
  display: block;
  font-weight: 600;
  font-size: 0.9rem;
  margin-bottom: 0.5rem;
  color: var(--irozon-ink);
}

.irozon-product-details p.comment-form-comment,
.irozon-product-details p.comment-form-author,
.irozon-product-details p.comment-form-email {
  margin-bottom: 1.5rem;
}

.irozon-product-details p.comment-form-comment label,
.irozon-product-details p.comment-form-author label,
.irozon-product-details p.comment-form-email label {
  display: block;
  font-weight: 600;
  font-size: 0.9rem;
  margin-bottom: 0.5rem;
  color: var(--irozon-ink);
}

.irozon-product-details #comment,
.irozon-product-details #author,
.irozon-product-details #email {
  width: 100%;
  border: 1px solid var(--irozon-border);
  border-radius: 0.5rem;
  padding: 0.75rem 1rem;
  font-family: inherit;
  font-size: 0.9rem;
  box-sizing: border-box;
  transition: border-color 0.2s ease;
}

.irozon-product-details #comment:focus,
.irozon-product-details #author:focus,
.irozon-product-details #email:focus {
  outline: none;
  border-color: var(--irozon-green);
}

.irozon-product-details #comment {
  resize: vertical;
  min-height: 8rem;
}

@media (min-width: 601px) {
  .irozon-product-details .comment-form-author,
  .irozon-product-details .comment-form-email {
    display: inline-block;
    width: calc(50% - 0.75rem);
    vertical-align: top;
  }

  .irozon-product-details .comment-form-author {
    margin-right: 1.5rem;
  }
}

.irozon-product-details p.form-submit {
  margin-top: 0.5rem;
}

.related.products > h2,
.wp-block-pattern .related h2 {
  font-weight: 800;
  font-size: 1.5rem;
  color: var(--irozon-ink);
  margin: 3rem 0 1.5rem;
}

/*
Migrated from Global Styles (wp_global_styles post ID 27, "Additional CSS"
added via the Site Editor, theme irozon-theme) during the 2026-08-04
independent-theme fork. This is now the file-owned, version-controlled copy;
see README.md migration map.
*/
/* Vertical (YouTube Shorts) product-description videos: the raw oEmbed
   markup here is just <div class="product-video-short"><iframe width="422"
   height="750" ...></iframe></div> — no Gutenberg embed wrapper, so the
   iframe's own 422x750 intrinsic ratio is what a generic responsive-iframe
   rule (width:100%; height:auto) scales up. On mobile that's fine, but on
   a full-width desktop content column it blows the video up to ~1300x2300px.
   Fix: give the wrapper an explicit aspect-ratio and a real desktop cap,
   then make the iframe fill that wrapper instead of driving its own size.
   Scoped to the description tab so it can't touch a landscape embed used
   elsewhere on the site. */
.woocommerce-Tabs-panel--description .product-video-short {
  width: min(100%, 400px);
  aspect-ratio: 9 / 16;
  margin: 2rem auto;
  overflow: hidden;
}

.woocommerce-Tabs-panel--description .product-video-short iframe,
.woocommerce-Tabs-panel--description .product-video-short video {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
}

/* Stop minor horizontal page overflow */
html,
body {
  width: 100%;
  max-width: 100%;
  overflow-x: clip !important;
}

/* Keep all product media inside the mobile screen. .product-video-short
   itself is deliberately not repeated here — its own width:min(100%,400px)
   above already guarantees it never exceeds its container, and giving it a
   second, !important, max-width:100% here previously clobbered the 400px
   desktop cap (both rules targeted the same element; !important won
   regardless of source order), which was the actual cause of the
   oversized-on-desktop bug. */
.woocommerce-product-details__short-description,
.woocommerce-Tabs-panel {
  max-width: 100% !important;
  box-sizing: border-box;
}

/* Prevent animated/footer text from widening the page */
.elementor-widget-container,
.elementor-element,
.marquee,
.ticker,
.scrolling-text {
  max-width: 100%;
}

.marquee,
.ticker,
.scrolling-text {
  overflow: hidden !important;
}

/* =========================================================
   HOMEPAGE (redesign) — hero, editorial category showcase, brand
   statement, featured products, trust strip, closing CTA.
   Section-level spacing/color is set inline via block attributes
   in patterns/irozon-*.php; this covers what block attributes
   can't reach and cross-browser/responsive fixes.
   ========================================================= */

.irozon-hero-title {
  max-width: 16ch;
  margin-left: auto;
  margin-right: auto;
  letter-spacing: -0.02em;
}

/* Editorial category showcase — two alternating image/text split rows,
   not small icon cards. */
.irozon-showcase-row {
  gap: 3rem !important;
  padding: 4rem 0;
}

.irozon-showcase-media {
  aspect-ratio: 4 / 3;
  border-radius: 16px;
  overflow: hidden;
}

.irozon-showcase-media.irozon-showcase-image,
.irozon-showcase-media .irozon-showcase-image {
  height: 100%;
}

.irozon-showcase-image {
  height: 100%;
  margin: 0;
}

.irozon-showcase-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 16px;
}

.irozon-showcase-media-dark {
  background-color: var(--irozon-ink);
  display: flex;
  align-items: center;
  justify-content: center;
}

.irozon-showcase-icon {
  color: var(--irozon-surface);
  opacity: 0.9;
}

.irozon-built-section {
  padding: clamp(4.75rem, 8vw, 7.5rem) 0 clamp(4.25rem, 7vw, 6.5rem);
  padding-inline: clamp(1rem, 4vw, 2rem);
  box-sizing: border-box;
}

.irozon-built-shell {
  width: min(100%, 1180px);
  margin: 0 auto;
}

.irozon-built-header {
  width: min(100%, 760px);
  margin: 0 auto clamp(2.25rem, 5vw, 4.25rem);
  text-align: center;
}

.irozon-built-eyebrow {
  margin: 0 0 0.85rem;
  color: var(--irozon-green);
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  line-height: 1.2;
  text-transform: uppercase;
}

.irozon-built-header h2 {
  margin: 0;
  color: var(--irozon-ink);
  font-size: clamp(2.3rem, 5.2vw, 4.7rem);
  font-weight: 800;
  letter-spacing: -0.025em;
  line-height: 0.98;
}

.irozon-built-header > p:last-child {
  width: min(100%, 520px);
  margin: 1.1rem auto 0;
  color: var(--irozon-muted);
  font-size: clamp(1.02rem, 1.8vw, 1.28rem);
  line-height: 1.55;
}

.irozon-built-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(1rem, 2.2vw, 1.5rem);
  align-items: stretch;
}

.irozon-built-path {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  gap: clamp(1.1rem, 2.2vw, 1.6rem);
  min-width: 0;
  padding: clamp(1rem, 2.2vw, 1.4rem);
  border: 1px solid var(--irozon-border);
  border-radius: 16px;
  background: var(--irozon-surface);
  color: var(--irozon-ink);
  text-decoration: none;
  transition:
    border-color 0.18s ease,
    transform 0.18s ease;
}

.irozon-built-path:hover,
.irozon-built-path:focus-visible {
  border-color: var(--irozon-green);
  transform: translateY(-2px);
}

.irozon-built-path:focus-visible {
  outline: 3px solid rgb(2 198 133 / 0.28);
  outline-offset: 4px;
}

.irozon-built-path:active {
  transform: translateY(0);
}

.irozon-built-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  color: var(--irozon-muted);
  font-size: 0.76rem;
  font-weight: 800;
  letter-spacing: 0.1em;
  line-height: 1;
  text-transform: uppercase;
}

.irozon-built-number {
  color: rgb(2 198 133 / 0.32);
  font-size: clamp(2.4rem, 6vw, 4.6rem);
  font-weight: 800;
  letter-spacing: 0;
}

.irozon-built-media {
  aspect-ratio: 16 / 11;
  margin: 0;
  overflow: hidden;
  border-radius: 14px;
  background: var(--irozon-shop-bg);
}

.irozon-built-media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.irozon-built-media--contain {
  background: linear-gradient(135deg, rgb(2 198 133 / 0.09), transparent 56%), var(--irozon-ink);
}

.irozon-built-media--contain img {
  object-fit: contain;
  padding: clamp(0.75rem, 2vw, 1.25rem);
}

.irozon-built-copy {
  display: grid;
  gap: 0.65rem;
  align-content: start;
}

.irozon-built-copy h3 {
  margin: 0;
  color: var(--irozon-ink);
  font-size: clamp(1.35rem, 2.4vw, 1.85rem);
  font-weight: 800;
  letter-spacing: -0.01em;
  line-height: 1.08;
}

.irozon-built-copy p {
  margin: 0;
  max-width: 31ch;
  color: var(--irozon-muted);
  font-size: 0.98rem;
  line-height: 1.55;
}

.irozon-built-link {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  width: fit-content;
  margin-top: 0.35rem;
  color: var(--irozon-ink);
  font-size: 0.95rem;
  font-weight: 800;
  line-height: 1.2;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.28em;
}

.irozon-built-path:hover .irozon-built-link,
.irozon-built-path:focus-visible .irozon-built-link {
  color: var(--irozon-green);
}

.irozon-built-services {
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;

  /* Space between text and button */
  gap: 0.5rem;

  /* Increased top margin (3.5rem top, auto left/right, 2rem bottom) */
  margin: 3.5rem auto 2rem;

  padding-block: 0.5rem;
  color: var(--irozon-muted);
  font-size: 0.98rem;
  line-height: 1.45;
  text-align: center;
}

.irozon-built-services__text {
  margin: 0;
}

.irozon-built-services .irozon-signature-cta {
  flex-shrink: 0;
}

@media (max-width: 760px) {
  .irozon-built-section {
    padding: clamp(3.25rem, 13vw, 4.75rem) clamp(1rem, 4vw, 2rem) clamp(3.1rem, 12vw, 4.25rem);
  }

  .irozon-built-header {
    margin-bottom: 2rem;
    text-align: left;
  }

  .irozon-built-header h2 {
    font-size: clamp(2.2rem, 11vw, 3.35rem);
  }

  .irozon-built-header > p:last-child {
    margin-left: 0;
  }

  .irozon-built-grid {
    grid-template-columns: 1fr;
  }

  .irozon-built-path {
    gap: 1rem;
    padding: 1rem;
  }

  .irozon-built-number {
    font-size: clamp(2.15rem, 15vw, 3.4rem);
  }

  .irozon-built-media {
    aspect-ratio: 4 / 3;
  }

  .irozon-built-copy p {
    max-width: 36ch;
  }

  .irozon-built-services {
    align-items: center;
    justify-content: center;
    text-align: center;
  }
}

@media (max-width: 430px) {
  .irozon-built-grid {
    gap: 0.85rem;
  }

  .irozon-built-meta {
    font-size: 0.7rem;
  }

  .irozon-built-copy h3 {
    font-size: 1.3rem;
  }
}

@media (max-width: 782px) {
  .irozon-showcase-row.is-reversed {
    flex-direction: column-reverse;
  }

  /* Below this width core's Columns block stacks the media/text columns
     using this same "gap" property (it becomes the vertical gap between
     the stacked image and text instead of the horizontal gap between
     side-by-side columns), so the unconditional 3rem above — sized for
     the desktop side-by-side layout — was also the space left between
     the image and its heading on mobile. Tighten it there only. */
  .irozon-showcase-row {
    gap: 2rem !important;
  }
}

/* =========================================================
   PHASE 3 — product-category pages (taxonomy-product_cat.html)
   ========================================================= */

.irozon-category-header {
  padding: 2.5rem 0 3rem;
  text-align: center;
  margin-bottom: 2.5rem;
}

.irozon-category-title {
  font-size: 2rem;
  font-weight: 800;
  color: var(--irozon-ink);
  margin: 0 0 0.5rem;
}

.irozon-category-description {
  color: var(--irozon-muted);
  max-width: 46em;
  margin: 0 auto;
}

.irozon-category-count {
  display: block;
  margin-top: 1rem;
  font-size: 0.85rem;
  color: var(--irozon-muted);
}

.irozon-category-empty {
  padding: 3rem 1.5rem;
  text-align: center;
  max-width: 32em;
  margin: 0 auto;
}

/* =========================================================
   PHASE 3 — single product refinements
   ========================================================= */

/* Product image gallery — soften the sharp-corner default to match the
   12px radius used across cards/buttons elsewhere in the design system. */
.wp-block-woocommerce-product-image-gallery,
.woocommerce div.product .woocommerce-product-gallery,
.wp-block-woocommerce-product-image-gallery img,
.woocommerce div.product .woocommerce-product-gallery img {
  border-radius: 12px;
}

.wp-block-woocommerce-product-image-gallery .flex-control-thumbs img {
  border-radius: 8px;
}

/* Categories/Tags on the single-product page, as pill badges instead of
   plain "Categories: X, Y" text. */
.irozon-product-meta-top .wp-block-post-terms {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  align-items: center;
}

.irozon-product-meta-top .wp-block-post-terms a {
  display: inline-block;
  padding: 0.2rem 0.7rem;
  border-radius: 999px;
  background: var(--irozon-shop-bg);
  color: var(--irozon-ink) !important;
  text-decoration: none !important;
  font-size: 0.78rem;
}

.irozon-product-meta-top .wp-block-post-terms a:hover {
  background: var(--irozon-border);
}

/* Trust/benefit micro-row under Add to Cart — deliberately generic wording
   (no shipping-carrier claims) so it reads correctly for both physical
   3D-printed products and virtual/downloadable WordPress plugins. */
.irozon-product-trust {
  gap: 0.4rem 1.25rem;
  margin-top: 1.25rem;
  padding-top: 1.25rem;
  border-top: 1px solid var(--irozon-border);
}

.irozon-product-trust p {
  margin: 0;
  white-space: nowrap;
}

.irozon-trust-inline-item {
  align-items: center !important;
  gap: 0.4rem !important;
}

.irozon-trust-inline-item .irozon-trust-icon {
  flex-shrink: 0;
}

/* =========================================================
   HOMEPAGE (redesign) — featured products, homepage trust strip
   ========================================================= */

/* Featured-products teaser grid — larger images, minimal card chrome
   (no distinct info-panel background/border, unlike the shop-archive
   grid), lighter-weight Add to Cart so the product itself stays the
   visual focus. */
.irozon-featured-grid {
  row-gap: 2.5rem !important;
  column-gap: 2rem !important;
}

.irozon-featured-grid .wc-block-components-product-image {
  border-radius: 12px;
  overflow: hidden;
  background: var(--irozon-shop-bg);
  aspect-ratio: 1 / 1;
}

.irozon-featured-grid .wc-block-components-product-image img {
  border-radius: 12px;
}

.irozon-featured-info {
  padding-top: 1rem;
  text-align: left;
}

.irozon-featured-title {
  font-size: 1.05rem;
  font-weight: 600;
  line-height: 1.3;
  margin: 0 0 0.35rem;
}

.irozon-featured-title a {
  color: var(--irozon-ink);
}

.irozon-featured-price {
  color: var(--irozon-muted);
  font-weight: 500;
  font-size: 0.9rem;
  margin-bottom: 0.75rem;
}

/* Reduced-weight Add to Cart: plain text link with an underline, not a
   solid amber pill button — the shop-archive/category grids keep the
   full-weight CTA, this is specific to the homepage teaser. */
.irozon-featured-btn .wp-block-button__link {
  background: none !important;
  color: var(--irozon-ink) !important;
  border: none !important;
  border-radius: 0 !important;
  padding: 0 !important;
  font-size: 0.85rem;
  font-weight: 500;
  text-decoration: underline;
  text-underline-offset: 3px;
  min-height: 0;
  width: auto;
}

.irozon-featured-btn .wp-block-button__link:hover {
  color: var(--irozon-green) !important;
}

/* Homepage trust strip — compact commerce-confidence row (rebuilt: the
   previous stacked-icon/centered-text card was oversized relative to its
   content and read as a placeholder). Icon/mark sits beside the heading,
   not above it, so each card's height is driven by its two lines of
   content, not a fixed tall box — natural height lands around 120–140px
   with the padding below. Real brand marks (Klarna/Swish/Card, PostNord)
   are used only where the shop genuinely integrates that service — see
   patterns/irozon-trust-strip.php for asset provenance. */
.irozon-trust-strip .wp-block-columns {
  display: grid !important;
  grid-template-columns: repeat(4, 1fr);
  gap: 1rem;
}

.irozon-trust-item {
  flex: 1; /* Replaced flex-basis: auto to make all boxes equal width */
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.3rem;
  text-align: left;
  border: 1px solid var(--irozon-border);
  border-radius: 0.75rem;
  background: var(--irozon-surface);
  padding: 1rem 1.1rem;
  transition: border-color 0.2s ease;
  cursor: pointer; /* Adds the pointer finger on hover */
}

.irozon-trust-item:hover {
  border-color: var(--irozon-green);
}

/* Icon + heading share one row, vertically centered against each other —
   previously the icon sat top-aligned against the whole two-line copy
   block (heading + sub/badges), which visually hung it below the
   heading instead of centered on it. Sub-text/badges sit on their own
   row below, indented to align under the heading text rather than the
   icon, so all four cards read with the same left edge for body copy. */
.irozon-trust-row {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  width: 100%;
}

.irozon-trust-icon-wrap {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 30px; /* fixed icon/logo column, consistent across all four cards */
}

.irozon-trust-icon {
  width: 20px;
  height: 20px;
  color: var(--irozon-ink);
}

.irozon-trust-icon-img {
  width: 20px;
  height: 20px;
  object-fit: contain;
}

.irozon-trust-heading {
  font-size: 0.92rem;
  font-weight: 600;
  color: var(--irozon-ink);
  line-height: 1.2;
}

.irozon-trust-sub {
  font-size: 0.78rem;
  color: var(--irozon-muted);
  line-height: 1.3;
  padding-left: calc(30px + 0.6rem);
}

.irozon-trust-badges {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  padding-left: calc(30px + 0.6rem);
}

.irozon-trust-badges img {
  display: block;
  height: 16px;
  width: auto;
  border-radius: 3px;
  border: 1px solid var(--irozon-border);
}

@media (max-width: 900px) {
  .irozon-trust-strip .wp-block-columns {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 480px) {
  .irozon-trust-strip .wp-block-columns {
    grid-template-columns: 1fr;
    gap: 0.65rem;
  }

  .irozon-trust-item {
    padding: 0.85rem 1rem;
  }
}

/* =========================================================
   PHASE 4 — Cart, Checkout, My Account
   The Cart and My Account pages were found to still carry dormant
   Elementor builder data (_elementor_edit_mode=builder) from the original
   Hostinger AI page builder, which silently overrode their real
   post_content and rendered completely unstyled classic markup. That meta
   was removed and both pages now carry WooCommerce's own canonical content
   (the woocommerce/cart block, and the [woocommerce_my_account] shortcode
   respectively) — Checkout already had neither problem. Everything below
   targets that native markup.
   ========================================================= */

/* ---- shared form-field language (reused from .irozon-shop-toolbar select) ---- */

/* The WooCommerce Checkout Block's text/combobox fields use a "floating
   label" pattern: the <label> sits absolutely positioned over the input and
   animates on focus/value via a JS-toggled ".is-active" class, relying on
   WooCommerce's own asymmetric top/bottom input padding to leave room for it.
   Forcing a flat, always-on input padding here (as this rule previously did)
   fights that mechanism in every state instead of just one, so the label
   ends up sitting on top of the value regardless of focus/fill/autofill.
   Fix at the source: turn the label into a normal static block-level label
   above the field instead of trying to reproduce WooCommerce's exact float
   transform. That removes the overlap in every state (empty, filled,
   focused, disabled, error, autofilled) without needing !important stacking
   on the input's own padding. */
.wc-block-components-text-input,
.wc-block-components-combobox {
  position: relative;
  display: flex;
  flex-direction: column;
  margin-top: 0.3rem;
}

/* WooCommerce's floating-label markup places <label> after <input> in the
   DOM (it relies on a CSS transform to visually lift it above, which is
   exactly the mechanism we're overriding) — force it first with `order`
   rather than depending on source order. */
.wc-block-components-text-input > label,
.wc-block-components-combobox label {
  position: static !important;
  order: -1;
  display: block;
  transform: none !important;
  max-width: none !important;
  white-space: normal !important;
  font-size: 0.8rem !important;
  font-weight: 500;
  color: var(--irozon-muted);
  margin: 0 0 0.35rem !important;
  padding: 0 !important;
  pointer-events: none;
}

.wc-block-components-text-input input[type="text"],
.wc-block-components-text-input input[type="email"],
.wc-block-components-text-input input[type="tel"],
.wc-block-components-address-form input,
.woocommerce-form-login input[type="text"],
.woocommerce-form-login input[type="password"],
.woocommerce-form-login input[type="email"],
.woocommerce-form-register input[type="text"],
.woocommerce-form-register input[type="password"],
.woocommerce-form-register input[type="email"],
.woocommerce-EditAccountForm input[type="text"],
.woocommerce-EditAccountForm input[type="password"],
.woocommerce-EditAccountForm input[type="email"],
.woocommerce-address-fields input[type="text"],
.woocommerce-address-fields select,
.wc-block-components-combobox input,
.wc-block-components-combobox select,
select#calc_shipping_country,
select#calc_shipping_state {
  box-sizing: border-box;
  border: 1px solid var(--irozon-border) !important;
  border-radius: 0.5rem !important;
  background-color: var(--irozon-surface);
  color: var(--irozon-ink);
  font-family: inherit;
  font-size: 0.95rem;
  min-height: 2.75rem;
  padding: 0.6rem 0.9rem !important;
  transition:
    border-color 0.2s ease,
    box-shadow 0.2s ease;
}

/* Native/combobox selects need extra right padding so the field's own
   dropdown arrow never sits under the value text. */
.woocommerce-address-fields select,
.wc-block-components-combobox select,
select#calc_shipping_country,
select#calc_shipping_state {
  padding-right: 2.25rem !important;
  appearance: auto;
}

.wc-block-components-text-input input:focus,
.wc-block-components-address-form input:focus,
.woocommerce-form-login input:focus,
.woocommerce-form-register input:focus,
.woocommerce-EditAccountForm input:focus,
.woocommerce-address-fields input:focus,
.wc-block-components-combobox input:focus,
select:focus-visible {
  outline: none !important;
  border-color: var(--irozon-green) !important;
  box-shadow: 0 0 0 3px rgba(2, 198, 133, 0.2) !important;
}

/* Autofill: browsers paint their own background over ours; keep our text
   color and border so an autofilled value doesn't collide visually with a
   still-floated label from a stale ".is-active" state. */
.wc-block-components-text-input input:-webkit-autofill,
.wc-block-components-combobox input:-webkit-autofill {
  -webkit-text-fill-color: var(--irozon-ink);
  box-shadow: 0 0 0 1000px var(--irozon-surface) inset !important;
  border-color: var(--irozon-border) !important;
}

.wc-block-components-checkbox input[type="checkbox"],
.wc-block-components-radio-control input[type="radio"] {
  accent-color: var(--irozon-green);
}

/* ---- CART ---- */
.wp-block-woocommerce-cart {
  font-size: 0.95rem;
}

.wc-block-cart-item__wrap {
  padding-top: 1.5rem !important;
  padding-bottom: 1.5rem !important;
  border-color: var(--irozon-border) !important;
}

.wc-block-components-product-image img,
.wc-block-cart-item__image img {
  border-radius: 10px;
}

.wc-block-cart-item__product-name,
.wc-block-components-product-name {
  font-weight: 600 !important;
  color: var(--irozon-ink) !important;
}

.wc-block-components-quantity-selector {
  border-color: var(--irozon-border) !important;
  border-radius: 999px !important;
  overflow: hidden;
}

.wc-block-components-quantity-selector__button {
  color: var(--irozon-ink) !important;
}

.wc-block-components-quantity-selector__input {
  font-weight: 600;
}

.wc-block-cart-item__remove-link {
  color: var(--irozon-muted) !important;
  font-size: 0.8rem;
}

.wc-block-cart-item__remove-link:hover {
  color: var(--irozon-error) !important;
}

/* Totals sidebar — clear break from the cart-items list, stronger heading. */
.wc-block-cart__totals-title {
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--irozon-ink);
}

.wc-block-components-totals-wrapper {
  border-color: var(--irozon-border) !important;
}

.wc-block-components-totals-item__label,
.wc-block-components-totals-item__value {
  color: var(--irozon-ink);
}

.wc-block-components-totals-item.wc-block-components-totals-footer-item
  .wc-block-components-totals-item__value {
  font-size: 1.15rem;
  font-weight: 700;
}

/* Coupon — collapsed panel toggle, cleaner input row */
.wc-block-components-panel__button {
  color: var(--irozon-ink) !important;
  font-weight: 500;
  font-size: 0.9rem;
}

.wc-block-components-totals-coupon__input .wc-block-components-text-input input {
  padding: 0.6rem 0.8rem !important;
}

.wc-block-components-totals-coupon__button {
  border-radius: 0.5rem !important;
}

/* Proceed to checkout — the one strong CTA on the page; everything else on
   this page (quantity steppers, remove links, coupon toggle) stays light. */
.wc-block-cart__submit-button,
.wp-block-woocommerce-cart .wc-block-components-checkout-place-order-button,
.wp-block-woocommerce-cart .wc-proceed-to-checkout .checkout-button {
  background: var(--irozon-green) !important;
  color: #fff !important;
  border: none !important;
  border-radius: 0.75rem !important;
  font-weight: 600 !important;
  padding: 0.9rem 1.5rem !important;
}

.wc-block-cart__submit-button:hover {
  background: var(--irozon-green-hover) !important;
}

/* Empty cart */
.wc-block-cart__empty-cart__title {
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--irozon-ink);
}

.wc-empty-cart-message,
.wp-block-woocommerce-empty-cart-block {
  text-align: center;
  padding: 3rem 1.5rem;
}

.wc-empty-cart-message .return-to-shop .button,
.wp-block-woocommerce-empty-cart-block .wc-block-cart__empty-cart__button {
  background: var(--irozon-green) !important;
  color: #fff !important;
  border-radius: 0.75rem !important;
  border: none !important;
  font-weight: 600;
}

@media (max-width: 600px) {
  .wc-block-cart-items__header {
    display: none;
  }
}

/* ---- CHECKOUT ---- */
.wp-block-woocommerce-checkout {
  font-size: 0.95rem;
}

/* Section (contact / address / delivery / payment) hierarchy */
.wc-block-components-checkout-step {
  border-top: 1px solid var(--irozon-border);
  padding-top: 2rem !important;
  margin-top: 2rem !important;
}

.wc-block-components-checkout-step:first-child {
  border-top: none;
  padding-top: 0 !important;
  margin-top: 0 !important;
}

.wc-block-components-checkout-step__title {
  font-size: 1.15rem !important;
  font-weight: 700 !important;
  color: var(--irozon-ink) !important;
}

.wc-block-components-checkout-step__heading {
  margin-bottom: 1rem !important;
}

.wc-block-components-checkout-step__description {
  color: var(--irozon-muted);
  font-size: 0.85rem;
}

/* Step number badge, lighter than default */
.wc-block-components-checkout-step__title .wc-block-components-checkout-step__title-icon {
  background: var(--irozon-shop-bg);
  color: var(--irozon-ink);
}

/* Radios (shipping method, payment method) as clean bordered rows.
   WooCommerce positions the actual <input type="radio"> with
   position:absolute (left:16px / width:20px in the markup we ship against),
   floating it over the option's own padding box, and relies on the
   option's left padding to reserve room for it so the label/price content
   next to it starts clear of the circle. The previous flat, symmetric
   `padding: 0.85rem 1rem !important` here clobbered that reserved space,
   so the label text started at the exact same x position as the radio and
   rendered underneath it ("PostNord" as "tNord", "Card" as "d", etc.) —
   same class of bug as the checkout field-label overlap. Fix: keep the
   radio's own absolute position untouched, just give it enough left
   padding again, then let the label row itself be a proper flex row so
   text/icon/price never collide regardless of content length. */
.wc-block-components-radio-control__option {
  border: 1px solid var(--irozon-border) !important;
  border-radius: 0.5rem !important;
  padding: 0.85rem 1rem 0.85rem 3rem !important;
  margin-bottom: 0.5rem !important;
}

.wc-block-components-radio-control__option--checked {
  border-color: var(--irozon-green) !important;
  background: rgba(2, 198, 133, 0.05);
}

.wc-block-components-radio-control__option-layout {
  display: flex;
  flex-direction: row !important;
  align-items: center;
  width: 100%;
  gap: 0.5rem;
}

.wc-block-components-radio-control__label-group {
  display: flex;
  align-items: center;
  flex: 1 1 auto;
  min-width: 0;
  gap: 0.5rem;
  flex-wrap: wrap;
}

.wc-block-components-radio-control__label {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  min-width: 0;
  flex: 1 1 auto;
  overflow-wrap: break-word;
}

.wc-block-components-payment-method-label {
  flex: 1 1 auto;
  min-width: 0;
  overflow-wrap: break-word;
}

.wc-block-components-payment-method-icons {
  flex-shrink: 0;
  display: flex;
  align-items: center;
}

.wc-block-components-radio-control__secondary-label {
  margin-left: auto;
  flex-shrink: 0;
  white-space: nowrap;
  padding-left: 0.5rem;
}

/* Validation / error states */
.wc-block-components-validation-error {
  color: var(--irozon-error);
  font-size: 0.82rem;
  margin-top: 0.4rem !important;
  line-height: 1.4;
}

.wc-block-components-text-input.has-error input,
.has-error .wc-block-components-text-input input {
  border-color: var(--irozon-error) !important;
}

/* Order summary sidebar */
.wc-block-checkout__sidebar .wc-block-components-panel,
.wc-block-checkout-order-summary {
  background: var(--irozon-shop-bg);
  border-radius: 0.75rem;
  padding: 1.5rem;
}

.wc-block-components-order-summary__title-text {
  font-weight: 700;
  color: var(--irozon-ink);
}

/* Place order — strong but restrained: solid, no motion gimmicks. */
.wc-block-components-checkout-place-order-button {
  background: var(--irozon-green) !important;
  color: #fff !important;
  border: none !important;
  border-radius: 0.75rem !important;
  font-weight: 600 !important;
  font-size: 1rem !important;
  padding: 1rem 1.5rem !important;
  width: 100%;
}

.wc-block-components-checkout-place-order-button:hover {
  background: var(--irozon-green-hover) !important;
}

@media (max-width: 782px) {
  .wc-block-checkout__main,
  .wc-block-checkout__sidebar {
    width: 100% !important;
  }
}

/* ---- MY ACCOUNT ---- */
.woocommerce-account .entry-content,
.woocommerce-account main {
  max-width: 1000px;
  margin: 0 auto;
}

.woocommerce-MyAccount-navigation {
  border: 1px solid var(--irozon-border);
  border-radius: 0.75rem;
  padding: 0.5rem;
  background: var(--irozon-surface);
}

.woocommerce-MyAccount-navigation ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

.woocommerce-MyAccount-navigation li {
  margin: 0;
}

.woocommerce-MyAccount-navigation li a {
  display: block;
  padding: 0.7rem 1rem;
  border-radius: 0.5rem;
  color: var(--irozon-ink);
  font-weight: 500;
  font-size: 0.9rem;
  text-decoration: none;
}

.woocommerce-MyAccount-navigation li a:hover {
  background: var(--irozon-shop-bg);
}

.woocommerce-MyAccount-navigation li.is-active a {
  background: var(--irozon-ink);
  color: #fff;
}

.woocommerce-MyAccount-content {
  padding-top: 1rem;
}

.woocommerce-MyAccount-content .button,
.woocommerce-form-login .button,
.woocommerce-form-register .button,
.woocommerce-EditAccountForm .button {
  background: var(--irozon-green) !important;
  color: #fff !important;
  border-radius: 0.75rem !important;
  border: none !important;
  font-weight: 600;
  padding: 0.7rem 1.5rem !important;
}

.woocommerce-orders-table th,
.woocommerce-orders-table td {
  padding: 0.85rem 0.75rem;
  border-color: var(--irozon-border) !important;
}

.woocommerce-orders-table__cell-order-status mark {
  background: none;
  color: var(--irozon-ink);
  font-weight: 600;
}

.woocommerce-Address {
  border: 1px solid var(--irozon-border);
  border-radius: 0.75rem;
  padding: 1.5rem;
}

.woocommerce-Address-title h3,
.woocommerce-Addresses h2 {
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--irozon-ink);
}

.woocommerce-Address-title .edit {
  color: var(--irozon-green);
  font-weight: 500;
  font-size: 0.85rem;
}

@media (max-width: 782px) {
  .woocommerce-MyAccount-navigation ul {
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem;
  }

  .woocommerce-MyAccount-navigation li a {
    padding: 0.5rem 0.85rem;
    font-size: 0.85rem;
  }

  .woocommerce-orders-table thead {
    display: none;
  }

  .woocommerce-orders-table tr {
    display: block;
    margin-bottom: 1rem;
    border: 1px solid var(--irozon-border);
    border-radius: 0.75rem;
    padding: 0.75rem;
  }

  .woocommerce-orders-table td {
    display: flex;
    justify-content: space-between;
    border: none !important;
    padding: 0.4rem 0.25rem;
  }

  .woocommerce-orders-table td::before {
    content: attr(data-title);
    font-weight: 600;
    color: var(--irozon-muted);
  }
}

/* =========================================================
   PHASE 4 — policy/support pages
   ========================================================= */

.irozon-policy-title {
  margin: 0.5rem 0 0.75rem;
}

.irozon-policy-status {
  display: inline-block;
  padding: 0.35rem 0.85rem;
  border-radius: 999px;
  background: rgba(251, 191, 36, 0.15);
  border: 1px solid rgba(251, 191, 36, 0.4);
}

.irozon-policy-body {
  padding: 2rem 1.5rem 3rem;
  max-width: 720px;
  margin: 0 auto;
}

.irozon-policy-body h2 {
  margin-top: 2rem;
}

.irozon-policy-body > *:first-child {
  margin-top: 0;
}

.irozon-policy-placeholder {
  background: var(--irozon-shop-bg);
  border: 1px dashed var(--irozon-border);
  border-radius: 0.5rem;
  padding: 1rem 1.25rem;
  color: var(--irozon-muted);
  font-size: 0.9rem;
}

/* Cookie consent banner */
.irozon-cookie-banner {
  position: fixed;
  left: 1rem;
  right: 1rem;
  bottom: 1rem;
  z-index: 9999;
  max-width: 640px;
  margin: 0 auto;
  background: var(--irozon-surface);
  border: 1px solid var(--irozon-border);
  border-radius: 0.75rem;
  box-shadow: 0 0.5rem 1.5rem rgba(0, 0, 0, 0.15);
  padding: 1.25rem 1.5rem;
  color: var(--irozon-ink);
  font-size: 0.9rem;
  line-height: 1.5;
}

.irozon-cookie-banner[hidden] {
  display: none;
}

/* Back to top — fixed control, shown past a scroll threshold by
   irozonInitBackToTop() in irozon-shop.js (adds/removes .is-visible).
   44-48px on every viewport (satisfies the touch-target minimum without
   needing a separate mobile size). Lime/Ink, restrained rounded-square
   radius — not the pill shape used by .irozon-signature-cta/.irozon-cta-btn,
   deliberately: this is a utility control, not a call to action. */
.irozon-back-to-top {
  position: fixed;
  right: calc(1.25rem + env(safe-area-inset-right, 0px));
  bottom: calc(5.25rem + env(safe-area-inset-bottom, 0px));
  z-index: 400; /* below .irozon-header (500) and .irozon-cookie-banner (9999) */
  width: 46px;
  height: 46px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  border-radius: 0.75rem;
  background: var(--irozon-lime);
  color: var(--irozon-ink);
  cursor: pointer;
  box-shadow: 0 2px 10px rgba(8, 42, 56, 0.15);
  opacity: 0;
  transform: scale(0.85);
  pointer-events: none;
  transition:
    opacity 0.2s ease,
    transform 0.2s ease,
    background-color 0.2s ease;
}

.irozon-back-to-top.is-visible {
  opacity: 1;
  transform: scale(1);
  pointer-events: auto;
}

/* Cookie banner spans edge-to-edge at narrow widths (max-width:640px with
   left/right:1rem insets) — lift the button clear of it while the banner
   is on screen so neither control gets obscured or fat-fingered. */
.irozon-back-to-top.irozon-back-to-top--lifted {
  bottom: calc(6.5rem + env(safe-area-inset-bottom, 0px));
}

@media (max-width: 480px) {
  .irozon-back-to-top {
    right: calc(0.75rem + env(safe-area-inset-right, 0px));
    bottom: calc(4.75rem + env(safe-area-inset-bottom, 0px));
  }

  .irozon-back-to-top.irozon-back-to-top--lifted {
    bottom: calc(6.5rem + env(safe-area-inset-bottom, 0px));
  }
}

.irozon-back-to-top:hover,
.irozon-back-to-top:focus-visible {
  background: #82ce49;
}

.irozon-back-to-top:focus-visible {
  outline: 2px solid var(--irozon-ink);
  outline-offset: 2px;
}

.irozon-back-to-top:active {
  transform: scale(0.94);
}

@media (prefers-reduced-motion: reduce) {
  .irozon-back-to-top {
    transition: opacity 0.15s ease !important;
    transform: none !important;
  }

  .irozon-back-to-top.is-visible {
    transform: none !important;
  }
}

.irozon-cookie-banner p {
  margin: 0 0 1rem;
}

.irozon-cookie-banner__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  justify-content: flex-end;
}

.irozon-cookie-banner__actions button {
  border-radius: 999px;
  padding: 0.7rem 1.3rem;
  min-width: 11.5rem;
  min-height: 2.75rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 0.85rem;
  font-weight: 600;
  cursor: pointer;
  border: 1px solid currentColor;
  line-height: 1.2;
  text-align: center;
  transition:
    background-color 0.2s ease,
    border-color 0.2s ease,
    box-shadow 0.2s ease,
    color 0.2s ease;
}

.irozon-cookie-banner__actions button:focus-visible {
  outline: 3px solid var(--irozon-dark);
  outline-offset: 3px;
  box-shadow: 0 0 0 6px rgba(2, 198, 133, 0.22);
}

.irozon-cookie-banner__actions .irozon-cookie-banner__reject {
  background: var(--irozon-surface);
  border-color: var(--irozon-ink);
  color: var(--irozon-ink);
}

.irozon-cookie-banner__actions .irozon-cookie-banner__reject:hover {
  background: var(--irozon-shop-bg);
  border-color: var(--irozon-dark);
  color: var(--irozon-dark);
}

.irozon-cookie-banner__actions .irozon-cookie-banner__accept {
  background: var(--irozon-green);
  border-color: var(--irozon-green);
  color: #fff;
}

.irozon-cookie-banner__actions .irozon-cookie-banner__accept:hover {
  background: var(--irozon-green-hover);
  border-color: var(--irozon-green-hover);
}

@media (max-width: 520px) {
  .irozon-cookie-banner__actions {
    flex-direction: column;
  }

  .irozon-cookie-banner__actions button {
    width: 100%;
  }
}

.irozon-cookie-settings-link {
  background: none;
  border: none;
  padding: 0;
  font: inherit;
  color: inherit;
  cursor: pointer;
  text-decoration: underline;
}