/* ==========================================================================
   THEME COPY OF htmls/indatos-base.css
   --------------------------------------------------------------------------
   Loaded before main.css. Wrapped in @layer base, so any rule in main.css
   (not layered) wins over this file whatever its specificity.

   Changed from the original so it does not alter the drawn designs:
     - Headings no longer set a colour (dark bands rely on inheriting white).
     - .doc-body removed from the prose rules (main.css styles it).
     - blockquote, figure and details are scoped to editor content
       (.entry-content, .prose) and the matching wp-block classes.
     - .price is scoped to .woocommerce (homepage cards use .price).
     - .tblwrap has no margin (the page sets spacing).
     - .btn-outline-invert keeps a transparent fill.
     - Section 17 added: small fixes for drawn form fields.
   ========================================================================== */

@layer base {

/* ==========================================================================
   INDATOS EXTENSIONS, BASE STYLESHEET
   --------------------------------------------------------------------------
   What this file is for.

   Our page designs cover the screens we drew. WordPress and WooCommerce output
   a great deal more than that: a list inside a post, a WooCommerce notice, a
   quantity box, a comment form, a pagination row, a stock message, a Gutenberg
   button block. None of those appear in our designs, and without this file
   they render as whatever the theme or the plugin ships.

   This maps our tokens and component shapes onto the class names WordPress and
   WooCommerce actually emit, so anything we did not draw still looks like the
   brand rather than like a default.

   LOAD ORDER
     1. This file
     2. Page and template styles
   Everything here is deliberately low specificity so a page style wins.

   HOUSE RULES CARRIED OVER FROM THE BUILD
     - Use padding-block, never the padding shorthand, on anything that also
       carries .shell. The shorthand resets padding-inline and the section runs
       to the screen edge.
     - Scope container link colours to the list, .thing ul a rather than
       .thing a, or a class-plus-element selector outranks .btn-primary and
       buttons inside that container render with body text colour.
     - An icon inside a button needs a width, or it falls back to the default
       replaced element size. The guard below handles the ones that forget.
     - No em dashes in copy.
   ========================================================================== */


/* ==========================================================================
   1. TOKENS
   ========================================================================== */

:root {
  /* brand */
  --blue: #0071CE;
  --blue-deep: #00539B;
  --blue-ink: #04264A;
  --blue-wash: #EDF5FC;

  /* surfaces and rules */
  --paper: #FFFFFF;
  --paper-2: #F7F9FB;
  --rule: #DDE5EC;
  --rule-strong: #C3D0DC;

  /* text */
  --ink: #0B1D30;
  --muted: #5C7186;

  /* status. Used by notices, stock messages and order states. */
  --ok: #0B7A4B;
  --ok-bg: #F1FAF4;
  --ok-line: #A8D5BF;
  --warn: #B08200;
  --warn-bg: #FFF8E6;
  --warn-line: #E8CE8E;
  --bad: #B3261E;
  --bad-bg: #FDF6F5;
  --bad-line: #E3B7B2;

  /* type */
  --display: "Plus Jakarta Sans", -apple-system, BlinkMacSystemFont, sans-serif;
  --body: "Lato", -apple-system, BlinkMacSystemFont, sans-serif;

  /* layout */
  --pad: clamp(18px, 5.5vw, 140px);
  --read: 74ch;              /* reading measure for prose */
  --radius: 3px;             /* buttons and inputs */
  --radius-lg: 10px;         /* cards and panels */
  --ease: cubic-bezier(.22, .61, .36, 1);
}


/* ==========================================================================
   2. RESET AND ELEMENT DEFAULTS
   ========================================================================== */

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

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

body {
  margin: 0;
  font-family: var(--body);
  font-size: 16.5px;
  line-height: 1.68;
  color: var(--ink);
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
}

/* No colour here on purpose: headings inherit, so they stay white on the
   dark bands in the designs. body already sets --ink. */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--display);
  font-weight: 800;
  letter-spacing: -.028em;
  line-height: 1.18;
  margin: 0 0 .5em;
}
h1 { font-size: clamp(30px, 3.2vw, 52px); letter-spacing: -.034em; }
h2 { font-size: clamp(23px, 2.1vw, 34px); letter-spacing: -.03em; }
h3 { font-size: clamp(19px, 1.5vw, 24px); }
h4 { font-size: 18px; }
h5 { font-size: 16px; }
h6 { font-size: 14px; letter-spacing: .04em; text-transform: uppercase; color: var(--muted); }

p { margin: 0 0 1.1em; }
p:last-child { margin-bottom: 0; }

a { color: var(--blue); text-decoration: none; }
a:hover { text-decoration: underline; }

img, svg, video, canvas, iframe { max-width: 100%; }
img, video { height: auto; }

hr {
  border: 0;
  border-top: 1px solid var(--rule);
  margin: clamp(28px, 3vw, 48px) 0;
}

small { font-size: 87.5%; }
mark { background: var(--warn-bg); color: var(--ink); padding: 1px 4px; border-radius: 2px; }
abbr[title] { text-decoration-style: dotted; cursor: help; }

code, kbd, samp, pre {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: .9em;
}
code {
  background: var(--paper-2);
  border: 1px solid var(--rule);
  border-radius: 3px;
  padding: 2px 6px;
  word-break: break-word;
}
pre {
  background: var(--blue-ink);
  color: #E6EDF5;
  border-radius: var(--radius-lg);
  padding: clamp(16px, 1.6vw, 24px);
  overflow-x: auto;
  line-height: 1.6;
  margin: 0 0 1.2em;
}
pre code { background: none; border: 0; padding: 0; color: inherit; }

kbd {
  background: #fff;
  border: 1px solid var(--rule-strong);
  border-bottom-width: 2px;
  border-radius: 4px;
  padding: 2px 6px;
  font-size: .85em;
}


/* ==========================================================================
   3. ACCESSIBILITY
   ========================================================================== */

:focus-visible {
  outline: 2px solid var(--blue);
  outline-offset: 3px;
  border-radius: 2px;
}

/* WordPress core class. Used by "Skip to content" and by screen reader text
   inside widgets, comment forms and pagination. */
.screen-reader-text,
.sr-only {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}
.screen-reader-text:focus,
.skip:focus {
  position: fixed !important;
  left: 12px; top: 12px;
  width: auto; height: auto;
  clip: auto;
  background: var(--blue);
  color: #fff;
  padding: 12px 18px;
  font-weight: 700;
  border-radius: var(--radius);
  z-index: 9999;
}


/* ==========================================================================
   4. LAYOUT
   ========================================================================== */

/* Fluid. No fixed container anywhere in this build. Reading width is
   protected per element with a ch cap, not by capping the page. */
.shell { width: 100%; padding-inline: var(--pad); }

/* WordPress alignment classes, emitted by the block editor. */
.alignleft  { float: left;  margin: .3em 1.6em 1.2em 0; }
.alignright { float: right; margin: .3em 0 1.2em 1.6em; }
.aligncenter { display: block; margin-inline: auto; }
.alignwide { width: 100%; }
.alignfull { width: 100vw; max-width: 100vw; margin-inline: calc(50% - 50vw); }
.alignfull img { width: 100%; }

@media (max-width: 640px) {
  .alignleft, .alignright { float: none; margin: 0 0 1.2em; }
}

.clearfix::after { content: ""; display: table; clear: both; }


/* ==========================================================================
   5. PROSE
   --------------------------------------------------------------------------
   Anything written in the editor lands in one of these wrappers. A list in a
   blog post, a table pasted into a doc, a blockquote. This is the single most
   useful block in the file, because it covers content that does not exist yet.
   .doc-body is styled by main.css, so it is not listed here.
   ========================================================================== */

.entry-content,
.prose,
.wp-block-post-content {
  max-width: var(--read);
}

.entry-content > * + *,
.prose > * + * { margin-top: 1.1em; }

.entry-content h2, .prose h2 { margin-top: 1.9em; }
.entry-content h3, .prose h3 { margin-top: 1.6em; }

.entry-content ul, .entry-content ol,
.prose ul, .prose ol,
.wp-block-list {
  margin: 0 0 1.1em;
  padding-left: 1.4em;
}
.entry-content li, .prose li, .wp-block-list li { margin-bottom: .55em; }
.entry-content li:last-child, .prose li:last-child { margin-bottom: 0; }
.entry-content ul, .prose ul { list-style: disc; }
.entry-content ol, .prose ol { list-style: decimal; }
.entry-content ul ul, .prose ul ul { list-style: circle; margin-top: .55em; }
.entry-content ol ol, .prose ol ol { list-style: lower-alpha; margin-top: .55em; }
.entry-content li::marker, .prose li::marker { color: var(--blue); }

.entry-content dl, .prose dl { margin: 0 0 1.1em; }
.entry-content dt, .prose dt { font-weight: 800; }
.entry-content dd, .prose dd { margin: 0 0 .8em; padding-left: 1.2em; color: var(--muted); }

.entry-content blockquote,
.prose blockquote,
.wp-block-quote {
  margin: 1.6em 0;
  padding: 4px 0 4px clamp(18px, 2vw, 28px);
  border-left: 3px solid var(--blue);
  font-size: 1.06em;
  color: var(--ink);
}
.entry-content blockquote p:last-child,
.prose blockquote p:last-child { margin-bottom: 0; }
.entry-content blockquote cite,
.prose blockquote cite,
.wp-block-quote cite {
  display: block;
  margin-top: .8em;
  font-style: normal;
  font-size: .82em;
  font-weight: 700;
  color: var(--muted);
}

.wp-block-pullquote {
  border-block: 1px solid var(--rule);
  padding-block: clamp(24px, 2.4vw, 40px);
  text-align: center;
}
.wp-block-pullquote blockquote { border: 0; padding: 0; }
.wp-block-pullquote p { font-family: var(--display); font-size: clamp(20px, 1.9vw, 28px); font-weight: 700; letter-spacing: -.025em; }

.wp-block-separator {
  border: 0;
  border-top: 1px solid var(--rule);
  margin-block: clamp(28px, 3vw, 48px);
}
.wp-block-separator.is-style-dots { border: 0; text-align: center; }

/* Tables. Wrap in .tblwrap for horizontal scroll on narrow screens. */
.tblwrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }

table,
.wp-block-table table {
  width: 100%;
  border-collapse: collapse;
  font-size: 15px;
  background: #fff;
  border: 1px solid var(--rule);
  border-radius: var(--radius-lg);
  overflow: hidden;
}
th, td {
  padding: 13px 16px;
  text-align: left;
  vertical-align: top;
  border-bottom: 1px solid var(--rule);
}
thead th {
  background: var(--paper-2);
  font-family: var(--body);
  font-size: 11px;
  font-weight: 900;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--muted);
}
tbody tr:last-child td { border-bottom: 0; }
.wp-block-table figcaption { font-size: 13.5px; color: var(--muted); margin-top: 9px; }

/* Figures, captions and galleries. */
.entry-content figure, .prose figure { margin: 1.6em 0; }
.wp-block-image img { border-radius: var(--radius-lg); }
figcaption,
.wp-caption-text,
.wp-element-caption {
  font-size: 13.5px;
  color: var(--muted);
  margin-top: 10px;
  line-height: 1.55;
}
.wp-caption { max-width: 100%; }

.wp-block-gallery,
.gallery {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 12px;
  margin: 1.6em 0;
}
.gallery-item { margin: 0; }
.gallery img { width: 100%; border-radius: var(--radius-lg); display: block; }

.wp-block-embed { margin: 1.6em 0; }
.wp-block-embed__wrapper { position: relative; }
.wp-block-embed iframe { width: 100%; border: 0; border-radius: var(--radius-lg); }

/* Native disclosure inside editor content. Our drawn FAQs (.faq) style their
   own. Content stays in the DOM when closed, which is why we use it. */
:is(.entry-content details, .prose details, details.wp-block-details) {
  border-bottom: 1px solid var(--rule);
}
:is(.entry-content details, .prose details, details.wp-block-details) > summary {
  cursor: pointer;
  list-style: none;
  padding: 18px 44px 18px 0;
  position: relative;
  font-family: var(--display);
  font-size: 17.5px;
  font-weight: 700;
  letter-spacing: -.022em;
  transition: color .16s;
}
:is(.entry-content details, .prose details, details.wp-block-details) > summary::-webkit-details-marker { display: none; }
:is(.entry-content details, .prose details, details.wp-block-details) > summary:hover { color: var(--blue); }
:is(.entry-content details, .prose details, details.wp-block-details) > summary::after {
  content: "";
  position: absolute;
  right: 6px; top: 50%;
  width: 9px; height: 9px;
  border-right: 2px solid var(--blue);
  border-bottom: 2px solid var(--blue);
  transform: translateY(-70%) rotate(45deg);
  transition: transform .2s var(--ease);
}
:is(.entry-content details[open], .prose details[open], details[open].wp-block-details) > summary::after { transform: translateY(-30%) rotate(225deg); }


/* ==========================================================================
   6. BUTTONS
   --------------------------------------------------------------------------
   Our .btn classes, plus every class WordPress and WooCommerce use for the
   same thing, so a Gutenberg button block or a WooCommerce add-to-cart button
   comes out looking like ours without being told to.
   ========================================================================== */

.btn,
button.btn,
input[type="submit"],
input[type="button"],
.wp-block-button__link,
.wp-element-button,
.woocommerce .button,
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce #respond input#submit,
.wc-block-components-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  font-family: var(--body);
  font-size: 15.5px;
  font-weight: 700;
  line-height: 1.2;
  padding: 14px 25px;
  border-radius: var(--radius);
  border: 1px solid transparent;
  text-decoration: none;
  cursor: pointer;
  background: var(--blue);
  color: #fff;
  transition: background .18s var(--ease), border-color .18s var(--ease), transform .18s var(--ease);
}

.btn:hover,
input[type="submit"]:hover,
.wp-block-button__link:hover,
.wp-element-button:hover,
.woocommerce .button:hover,
.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce input.button:hover,
.woocommerce #respond input#submit:hover,
.wc-block-components-button:hover {
  background: var(--blue-deep);
  color: #fff;
  transform: translateY(-1px);
  text-decoration: none;
}

.btn:active, .woocommerce .button:active, .wp-element-button:active { transform: none; }

.btn-primary { background: var(--blue); color: #fff; }
.btn-primary:hover { background: var(--blue-deep); }

.btn-ghost,
.woocommerce .button.alt--secondary,
.wp-block-button.is-style-outline .wp-block-button__link {
  background: transparent;
  border-color: var(--rule-strong);
  color: var(--ink);
}
.btn-ghost:hover,
.wp-block-button.is-style-outline .wp-block-button__link:hover {
  background: var(--blue-wash);
  border-color: var(--blue);
  color: var(--blue);
}

.btn-invert { background: #fff; color: var(--blue-ink); }
.btn-invert:hover { background: var(--blue-wash); color: var(--blue-ink); }

/* The design's outline button on dark bands sets no fill of its own. */
.btn-outline-invert { background: transparent; }

/* Disabled and loading, both of which WooCommerce sets during checkout. */
.btn[disabled], .btn.disabled,
.woocommerce .button.disabled,
.woocommerce .button:disabled,
.wc-block-components-button:disabled {
  opacity: .5;
  cursor: not-allowed;
  transform: none;
}
.woocommerce .button.loading { opacity: .7; pointer-events: none; }
.woocommerce .button.loading::after {
  content: "";
  width: 14px; height: 14px;
  border: 2px solid rgba(255,255,255,.4);
  border-top-color: #fff;
  border-radius: 50%;
  animation: ie-spin .7s linear infinite;
}
@keyframes ie-spin { to { transform: rotate(360deg); } }

/* Icon guard. An SVG with no width attribute falls back to the default
   replaced element size, which is enormous. :not([width]) means this never
   resizes an icon that declares its own. */
.btn svg:not([width]),
.woocommerce .button svg:not([width]),
.wp-element-button svg:not([width]) {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
}

/* A link that reads as a button but is not one. */
.linklike {
  background: none;
  border: 0;
  padding: 0;
  font: inherit;
  color: var(--blue);
  font-weight: 700;
  cursor: pointer;
  text-decoration: none;
}
.linklike:hover { text-decoration: underline; }


/* ==========================================================================
   7. FORMS
   ========================================================================== */

label { display: inline-block; font-weight: 700; font-size: 14.5px; margin-bottom: 6px; }

input[type="text"], input[type="email"], input[type="url"], input[type="password"],
input[type="search"], input[type="number"], input[type="tel"], input[type="date"],
input[type="datetime-local"], input[type="month"], input[type="week"], input[type="time"],
select, textarea,
.woocommerce form .form-row input.input-text,
.woocommerce form .form-row textarea,
.woocommerce form .form-row select,
.wc-block-components-text-input input {
  width: 100%;
  font-family: var(--body);
  font-size: 16px;
  line-height: 1.4;
  color: var(--ink);
  background: #fff;
  border: 1px solid var(--rule-strong);
  border-radius: 6px;
  padding: 12px 14px;
}

input:focus, select:focus, textarea:focus,
.woocommerce form .form-row input.input-text:focus {
  outline: none;
  border-color: var(--blue);
  box-shadow: 0 0 0 3px rgba(0, 113, 206, .14);
}

input::placeholder, textarea::placeholder { color: var(--rule-strong); }
input[readonly], input[disabled], select[disabled], textarea[disabled] {
  background: var(--paper-2);
  color: var(--muted);
  cursor: not-allowed;
}

textarea { min-height: 140px; resize: vertical; }

select {
  appearance: none;
  background-image: linear-gradient(45deg, transparent 50%, var(--muted) 50%),
                    linear-gradient(135deg, var(--muted) 50%, transparent 50%);
  background-position: calc(100% - 19px) calc(50% + 2px), calc(100% - 13px) calc(50% + 2px);
  background-size: 6px 6px, 6px 6px;
  background-repeat: no-repeat;
  padding-right: 38px;
}

input[type="checkbox"], input[type="radio"] {
  width: 17px; height: 17px;
  accent-color: var(--blue);
  cursor: pointer;
  vertical-align: -2px;
}

fieldset { border: 1px solid var(--rule); border-radius: var(--radius-lg); padding: clamp(16px, 1.6vw, 24px); margin: 0 0 1.2em; }
legend { font-family: var(--display); font-weight: 800; font-size: 16px; padding-inline: 8px; }

/* Field level validation and help text. */
.field-error, .woocommerce-error li, .wc-block-components-validation-error {
  color: var(--bad);
  font-size: 13.5px;
  font-weight: 700;
}
.field-help, .description, .woocommerce form .form-row .description {
  font-size: 13px;
  color: var(--muted);
  line-height: 1.55;
}
.required, .woocommerce .required { color: var(--bad); border: 0; text-decoration: none; }

/* WooCommerce form row grid. */
.woocommerce form .form-row { margin: 0 0 18px; padding: 0; }
.woocommerce form .form-row label { display: block; }
.woocommerce form .form-row-first,
.woocommerce form .form-row-last { width: calc(50% - 9px); float: left; }
.woocommerce form .form-row-last { float: right; }
.woocommerce form .form-row-wide { clear: both; width: 100%; }
@media (max-width: 560px) {
  .woocommerce form .form-row-first,
  .woocommerce form .form-row-last { width: 100%; float: none; }
}


/* ==========================================================================
   8. NOTICES
   --------------------------------------------------------------------------
   WooCommerce shows these constantly: added to cart, coupon applied, login
   failed, out of stock. Untouched they are the single most obviously
   unstyled thing on a WooCommerce site.
   ========================================================================== */

.notice-box,
.woocommerce-message,
.woocommerce-info,
.woocommerce-error,
.woocommerce-noreviews,
.wc-block-components-notice-banner {
  display: flex;
  align-items: flex-start;
  gap: 13px;
  border: 1px solid var(--rule-strong);
  border-left: 3px solid var(--blue);
  background: var(--paper-2);
  border-radius: 8px;
  padding: 15px 18px;
  margin: 0 0 20px;
  font-size: 15px;
  line-height: 1.6;
  list-style: none;
}
.woocommerce-message a, .woocommerce-info a, .woocommerce-error a { font-weight: 700; }

.woocommerce-message,
.wc-block-components-notice-banner.is-success {
  border-color: var(--ok-line);
  border-left-color: var(--ok);
  background: var(--ok-bg);
  color: #0A5C39;
}
.woocommerce-info,
.wc-block-components-notice-banner.is-info {
  border-color: #B7D8F2;
  border-left-color: var(--blue);
  background: var(--blue-wash);
  color: var(--blue-ink);
}
.woocommerce-error,
.wc-block-components-notice-banner.is-error {
  border-color: var(--bad-line);
  border-left-color: var(--bad);
  background: var(--bad-bg);
  color: #7A2C26;
}
.notice-warn,
.wc-block-components-notice-banner.is-warning {
  border-color: var(--warn-line);
  border-left-color: var(--warn);
  background: var(--warn-bg);
  color: #7A5500;
}

/* WooCommerce puts a "View cart" button inside the message. Keep it on the
   right rather than wrapping under the text. */
.woocommerce-message .button { margin-left: auto; flex-shrink: 0; padding: 9px 16px; font-size: 14px; }


/* ==========================================================================
   9. WOOCOMMERCE, SHOP AND PRODUCT
   ========================================================================== */

.woocommerce-breadcrumb,
.crumbs {
  display: flex;
  align-items: center;
  gap: 9px;
  flex-wrap: wrap;
  font-size: 13.5px;
  color: var(--muted);
  padding-block: 18px 0;
}
.woocommerce-breadcrumb a { color: var(--muted); }
.woocommerce-breadcrumb a:hover { color: var(--blue); }

.woocommerce-result-count { font-size: 14px; color: var(--muted); }
.woocommerce-ordering select { width: auto; min-width: 200px; font-size: 14px; padding: 9px 38px 9px 12px; }

/* Product grid. */
.woocommerce ul.products {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: clamp(14px, 1.4vw, 22px);
  margin: 0;
  padding: 0;
  list-style: none;
}
.woocommerce ul.products li.product {
  border: 1px solid var(--rule);
  border-radius: var(--radius-lg);
  background: #fff;
  padding: clamp(16px, 1.5vw, 22px);
  margin: 0;
  transition: border-color .2s var(--ease), transform .2s var(--ease), box-shadow .2s var(--ease);
}
.woocommerce ul.products li.product:hover {
  border-color: var(--blue);
  transform: translateY(-3px);
  box-shadow: 0 18px 44px -30px rgba(0, 113, 206, .5);
}
.woocommerce ul.products li.product img { border-radius: 8px; margin-bottom: 14px; }
.woocommerce ul.products li.product .woocommerce-loop-product__title {
  font-family: var(--display);
  font-size: 18px;
  font-weight: 800;
  letter-spacing: -.024em;
  margin: 0 0 8px;
  padding: 0;
}

/* Price. Note del and ins: WooCommerce uses them for sale prices, and the
   default ins underline looks like a mistake. Scoped to .woocommerce because
   the homepage cards use a .price class of their own. */
.woocommerce .price,
.woocommerce-Price-amount {
  font-family: var(--display);
  font-weight: 800;
  letter-spacing: -.02em;
  color: var(--ink);
}
.woocommerce .price del { color: var(--muted); font-weight: 400; margin-right: 8px; opacity: .8; }
.woocommerce .price ins { text-decoration: none; }
.woocommerce-Price-currencySymbol { font-weight: 700; }

.onsale {
  display: inline-block;
  background: var(--blue);
  color: #fff;
  font-size: 10.5px;
  font-weight: 900;
  letter-spacing: .1em;
  text-transform: uppercase;
  padding: 4px 10px;
  border-radius: 3px;
}

.stock.in-stock { color: var(--ok); font-weight: 700; }
.stock.out-of-stock { color: var(--bad); font-weight: 700; }
.stock.available-on-backorder { color: var(--warn); font-weight: 700; }

/* Quantity box. */
.quantity { display: inline-flex; align-items: center; }
.quantity .qty {
  width: 78px;
  text-align: center;
  padding: 12px 8px;
}

/* Star rating. We only mark up aggregateRating on product pages that carry
   real reviews, so do not add this to a listing template. */
.star-rating { color: var(--blue); }
.woocommerce-review-link { color: var(--muted); font-size: 13.5px; }

/* Product tabs. */
.woocommerce-tabs ul.tabs {
  display: flex;
  gap: 4px;
  flex-wrap: wrap;
  list-style: none;
  margin: 0 0 22px;
  padding: 0 0 0;
  border-bottom: 1px solid var(--rule);
}
.woocommerce-tabs ul.tabs li { margin: 0; }
.woocommerce-tabs ul.tabs li a {
  display: block;
  padding: 12px 18px;
  font-weight: 700;
  font-size: 15px;
  color: var(--muted);
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
}
.woocommerce-tabs ul.tabs li.active a { color: var(--blue); border-bottom-color: var(--blue); }
.woocommerce-tabs ul.tabs li a:hover { color: var(--blue); text-decoration: none; }


/* ==========================================================================
   10. WOOCOMMERCE, CART, CHECKOUT AND ORDERS
   ========================================================================== */

.woocommerce table.shop_table {
  border: 1px solid var(--rule);
  border-radius: var(--radius-lg);
  border-collapse: separate;
  border-spacing: 0;
  overflow: hidden;
  width: 100%;
}
.woocommerce table.shop_table th,
.woocommerce table.shop_table td {
  padding: 14px 16px;
  border-bottom: 1px solid var(--rule);
  vertical-align: middle;
}
.woocommerce table.shop_table tfoot th,
.woocommerce table.shop_table tfoot td { font-weight: 800; }
.woocommerce table.shop_table .product-remove a.remove {
  display: inline-grid;
  place-items: center;
  width: 26px; height: 26px;
  border-radius: 50%;
  color: var(--muted);
  font-size: 18px;
  line-height: 1;
  text-decoration: none;
}
.woocommerce table.shop_table .product-remove a.remove:hover { background: var(--bad-bg); color: var(--bad); }

.cart-collaterals, .cart_totals { font-size: 15.5px; }
.order-total .amount { font-family: var(--display); font-size: clamp(20px, 1.8vw, 26px); font-weight: 800; letter-spacing: -.03em; }

.woocommerce-checkout #payment {
  border: 1px solid var(--rule);
  border-radius: var(--radius-lg);
  background: #fff;
}
.woocommerce-checkout #payment ul.payment_methods {
  list-style: none;
  margin: 0;
  padding: clamp(16px, 1.5vw, 22px);
  border-bottom: 1px solid var(--rule);
}
.woocommerce-checkout #payment ul.payment_methods li { margin-bottom: 12px; }
.woocommerce-checkout #payment ul.payment_methods li:last-child { margin-bottom: 0; }
.woocommerce-checkout #payment div.payment_box {
  background: var(--paper-2);
  border: 1px solid var(--rule);
  border-radius: 8px;
  padding: 14px 16px;
  margin-top: 10px;
  font-size: 14.5px;
  color: var(--muted);
}
.woocommerce-checkout #payment div.form-row.place-order { padding: clamp(16px, 1.5vw, 22px); }
.woocommerce-checkout #payment #place_order { width: 100%; }

.woocommerce-order-overview,
.woocommerce-thankyou-order-details {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 30px;
  list-style: none;
  margin: 0 0 24px;
  padding: 18px 0 0;
  border-top: 1px solid var(--rule);
  font-size: 15px;
  color: var(--muted);
}
.woocommerce-order-overview li strong { display: block; color: var(--ink); font-weight: 800; }


/* ==========================================================================
   11. WOOCOMMERCE, MY ACCOUNT
   --------------------------------------------------------------------------
   The sidebar plus content shell. Note the link colour is scoped to the list.
   Writing .woocommerce-MyAccount-navigation a would outrank .btn-primary and
   any button inside the sidebar would render with body text colour.
   ========================================================================== */

.woocommerce-account .woocommerce {
  display: grid;
  grid-template-columns: clamp(210px, 17vw, 270px) minmax(0, 1fr);
  gap: clamp(24px, 3vw, 56px);
  align-items: start;
  padding-block: clamp(24px, 2.4vw, 42px) clamp(48px, 5vw, 90px);
}

.woocommerce-MyAccount-navigation ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  border: 1px solid var(--rule);
  border-radius: var(--radius-lg);
  background: #fff;
  overflow: hidden;
}
.woocommerce-MyAccount-navigation ul li { border-bottom: 1px solid var(--rule); }
.woocommerce-MyAccount-navigation ul li:last-child { border-bottom: 0; }
.woocommerce-MyAccount-navigation ul li a {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 13px 16px;
  font-size: 14.5px;
  font-weight: 700;
  color: var(--muted);
  text-decoration: none;
  transition: background .15s, color .15s;
}
.woocommerce-MyAccount-navigation ul li a:hover { background: var(--blue-wash); color: var(--blue); }
.woocommerce-MyAccount-navigation ul li.is-active a {
  background: var(--blue-wash);
  color: var(--blue);
  box-shadow: inset 3px 0 0 var(--blue);
}

.woocommerce-MyAccount-content { min-width: 0; }

@media (max-width: 860px) {
  .woocommerce-account .woocommerce { grid-template-columns: 1fr; }
}


/* ==========================================================================
   12. PAGINATION AND POST NAVIGATION
   ========================================================================== */

.nav-links,
.page-numbers,
.woocommerce-pagination ul,
.wp-block-query-pagination {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  align-items: center;
  list-style: none;
  margin: clamp(28px, 3vw, 44px) 0 0;
  padding: 0;
  border: 0;
}
.page-numbers li { margin: 0; border: 0; }

a.page-numbers,
span.page-numbers,
.wp-block-query-pagination-numbers a,
.wp-block-query-pagination-next,
.wp-block-query-pagination-previous {
  display: grid;
  place-items: center;
  min-width: 38px;
  height: 38px;
  padding-inline: 12px;
  border: 1px solid var(--rule-strong);
  border-radius: 6px;
  background: #fff;
  font-weight: 700;
  font-size: 14.5px;
  color: var(--muted);
  text-decoration: none;
}
a.page-numbers:hover,
.wp-block-query-pagination-numbers a:hover { border-color: var(--blue); color: var(--blue); text-decoration: none; }
.page-numbers.current,
.wp-block-query-pagination-numbers .current {
  background: var(--blue);
  border-color: var(--blue);
  color: #fff;
}
.page-numbers.dots { border: 0; background: none; }

.post-navigation .nav-links { justify-content: space-between; }
.post-navigation a { font-weight: 700; }


/* ==========================================================================
   13. COMMENTS
   --------------------------------------------------------------------------
   Only relevant if comments are enabled on the blog. Styled anyway, because
   an unstyled comment list is what shows up the day somebody turns them on.
   ========================================================================== */

.comments-area { margin-top: clamp(36px, 4vw, 64px); max-width: var(--read); }
.comments-title, .comment-reply-title { font-size: clamp(20px, 1.8vw, 26px); }

.comment-list { list-style: none; margin: 0 0 clamp(28px, 3vw, 44px); padding: 0; }
.comment-list li { margin-bottom: 20px; }
.comment-list .children { list-style: none; margin: 20px 0 0; padding-left: clamp(18px, 2vw, 34px); border-left: 2px solid var(--rule); }

.comment-body {
  border: 1px solid var(--rule);
  border-radius: var(--radius-lg);
  background: #fff;
  padding: clamp(16px, 1.5vw, 22px);
}
.comment-author { display: flex; align-items: center; gap: 11px; font-weight: 800; }
.comment-author img { border-radius: 50%; }
.comment-metadata { font-size: 13px; color: var(--muted); margin: 4px 0 12px; }
.comment-metadata a { color: var(--muted); }
.comment-content { font-size: 15.5px; }
.reply a { font-size: 13.5px; font-weight: 700; }
.bypostauthor > .comment-body { border-color: var(--blue); background: var(--blue-wash); }

.comment-form label { display: block; }
.comment-form p { margin-bottom: 16px; }
.comment-notes, .comment-form-cookies-consent label { font-size: 13.5px; color: var(--muted); font-weight: 400; }


/* ==========================================================================
   14. WIDGETS AND COMMON BLOCKS
   ========================================================================== */

.widget, .wp-block-group.is-style-card {
  border: 1px solid var(--rule);
  border-radius: var(--radius-lg);
  background: #fff;
  padding: clamp(18px, 1.7vw, 26px);
  margin-bottom: 18px;
}
.widget-title, .wp-block-heading.is-style-eyebrow {
  font-size: 11.5px;
  font-weight: 900;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 14px;
}

.wp-block-latest-posts,
.wp-block-categories,
.wp-block-archives,
.wp-block-page-list,
.widget ul {
  list-style: none;
  margin: 0;
  padding: 0;
}
.wp-block-latest-posts li,
.wp-block-categories li,
.wp-block-archives li,
.widget ul li { border-bottom: 1px solid var(--rule); }
.wp-block-latest-posts li:last-child,
.wp-block-categories li:last-child,
.widget ul li:last-child { border-bottom: 0; }

/* Scoped to the list, deliberately. See the note at the top of this file. */
.wp-block-latest-posts li a,
.wp-block-categories li a,
.wp-block-archives li a,
.widget ul li a {
  display: block;
  padding: 10px 0;
  font-size: 14.5px;
  font-weight: 700;
  color: var(--muted);
  text-decoration: none;
}
.wp-block-latest-posts li a:hover,
.wp-block-categories li a:hover,
.widget ul li a:hover { color: var(--blue); }

.wp-block-latest-posts__post-date { font-size: 12.5px; color: var(--rule-strong); font-weight: 400; }

.wp-block-search__inside-wrapper { gap: 8px; }
.wp-block-search__input { border-radius: 6px; }

.wp-block-tag-cloud a,
.tagcloud a {
  display: inline-block;
  font-size: 13px !important;
  font-weight: 700;
  border: 1px solid var(--rule-strong);
  border-radius: 100px;
  padding: 6px 13px;
  margin: 0 5px 5px 0;
  color: var(--muted);
  text-decoration: none;
}
.wp-block-tag-cloud a:hover { border-color: var(--blue); color: var(--blue); }


/* ==========================================================================
   15. SMALL UTILITIES USED ACROSS THE DESIGNS
   ========================================================================== */

.label {
  font-family: var(--body);
  font-weight: 700;
  font-size: 11.5px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--muted);
}

.tg, .chip {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 12.5px;
  font-weight: 700;
  border: 1px solid var(--rule-strong);
  background: #fff;
  border-radius: 100px;
  padding: 5px 12px;
  color: var(--muted);
}
.tg.new, .chip.accent { border-color: var(--blue); color: var(--blue); background: var(--blue-wash); }
.tg.soon { border-color: var(--warn-line); color: var(--warn); background: var(--warn-bg); }

.pill2 {
  font-size: 10.5px;
  font-weight: 900;
  letter-spacing: .1em;
  text-transform: uppercase;
  border-radius: 3px;
  padding: 3px 8px;
  border: 1px solid;
  white-space: nowrap;
}
.p-ok   { color: var(--ok);    border-color: var(--ok-line);    background: var(--ok-bg); }
.p-warn { color: var(--warn);  border-color: var(--warn-line);  background: var(--warn-bg); }
.p-bad  { color: var(--bad);   border-color: var(--bad-line);   background: var(--bad-bg); }
.p-info { color: var(--blue);  border-color: #9CC9EC;           background: var(--blue-wash); }
.p-mute { color: var(--muted); border-color: var(--rule-strong); background: var(--paper-2); }

.card {
  border: 1px solid var(--rule);
  border-radius: var(--radius-lg);
  background: #fff;
  overflow: hidden;
}

.muted { color: var(--muted); }
.nowrap { white-space: nowrap; }
.mono { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; }


/* ==========================================================================
   16. PRINT
   --------------------------------------------------------------------------
   Customers print invoices and order confirmations. Worth twenty lines.
   ========================================================================== */

@media print {
  .site-header, .site-footer, .topbar, .skip,
  .woocommerce-MyAccount-navigation, .btn, .button,
  nav, .crumbs, .woocommerce-breadcrumb { display: none !important; }

  body { font-size: 12pt; color: #000; background: #fff; }
  a { color: #000; text-decoration: none; }
  a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 9pt; color: #555; }
  table { border-color: #999; }
  .card, .woocommerce table.shop_table { box-shadow: none; }
  @page { margin: 18mm; }
}


/* ==========================================================================
   17. THEME ADDITION: DRAWN FORM FIELDS
   --------------------------------------------------------------------------
   The designs size these fields themselves and rely on browser defaults for
   the rest. Without this, section 7 stretches the footer newsletter field
   (the form wraps onto two lines) and makes the header search taller.
   ========================================================================== */

.nl-form input { width: auto; }
.search input, .nl-form input, .e4-search input { line-height: normal; }
.tier2 label { margin-bottom: 0; font-size: inherit; font-weight: inherit; }

} /* end @layer base */