/* Siamese Edge design system: clean, flat, minimalist (DESIGN-SYSTEM.md).
   Solid fills and 1px hairlines; no shadows, glows, gradients or lifting hovers; corners are square or circular and nothing between; one accent, crimson; two typefaces,
   Oswald for headings, labels, navigation and buttons, Inter for text. tools/system.py has already snapped the site's own stylesheets to these tokens (sizes, weights,
   spacing, colours, corners, shadows); this file holds the tokens and the components that must look the same everywhere. */

:root {
  /* colour: warm ink, warm greys, paper, white, one crimson */
  --se-ink: #15120f;
  --se-n800: #3a342e;
  --se-n500: #766e63;
  --se-n300: #c9c1b3;
  --se-n150: #e4ddd0;
  --se-paper: #f6f2eb;
  --se-white: #ffffff;
  --se-red: #ad2a1e;
  --se-red-hover: #8f2118;
  --se-red-press: #761b13;
  --se-red-light: #e0614f;      /* crimson for small text on ink */
  --se-red-wash: #f6e7e4;
  --se-on-dark: #f6f2eb;
  --se-on-dark-2: #bdb4a6;
  --se-line: var(--se-n150);
  --se-line-dark: rgba(246, 242, 235, .18);
  /* type */
  --se-display: Oswald, "Arial Narrow", "Helvetica Neue", sans-serif;
  --se-text: Inter, system-ui, -apple-system, "Segoe UI", sans-serif;
  --se-fs-12: 12px; --se-fs-14: 14px; --se-fs-16: 16px; --se-fs-18: 18px; --se-fs-20: 20px; --se-fs-24: 24px;
  --se-fs-32: 32px; --se-fs-40: 40px; --se-fs-48: 48px; --se-fs-56: 56px; --se-fs-72: 72px;
  --se-ls-label: .08em;
  --se-ls-button: .1em;
  /* space: a 4-point scale */
  --se-s1: 4px; --se-s2: 8px; --se-s3: 12px; --se-s4: 16px; --se-s5: 24px; --se-s6: 32px; --se-s7: 48px; --se-s8: 64px; --se-s9: 96px; --se-s10: 128px;
  /* shape */
  --se-radius: 0;
  --se-rule: 1px solid var(--se-line);
  --se-ease: .15s ease;
}

/* ---------------------------------------------------------------- base */
body { color: var(--se-ink); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
::selection { background: var(--se-red); color: #fff; }
h1, h2, h3, h4, h5, h6, .elementor-heading-title { font-family: var(--se-display) !important; }
strong, b { font-weight: 600; }
hr { border: 0; border-top: var(--se-rule); }

/* keyboard focus: one ring everywhere (a white gap and a crimson line, so it shows on photos, paper and ink alike) */
:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
  outline: 2px solid var(--se-red);
  outline-offset: 2px;
  box-shadow: 0 0 0 2px #fff;
}
:where(a, button, input, select, textarea, summary, [tabindex]):focus:not(:focus-visible) { outline: 0; }

/* ---------------------------------------------------------------- buttons
   One button. Primary is crimson; .se-btn--ink is the dark one (the messenger buttons), .se-btn--light the one on photos, .se-btn--outline and .se-btn--ghost the quiet ones,
   .se-btn--inverse the outline on dark. Sizes: 48 px high, .se-btn--sm 40, .se-btn--lg 56. States: hover, active (pressed), focus-visible, disabled, loading, selected.
   Colour is the only thing that changes (no lift, no glow, no scale). */
:where(.elementor-button, .ast-button, .wp-element-button, a.button, button.button, input.button, input[type="submit"], input[type="button"], input[type="reset"], button[type="submit"], .ue-btn, .ue_button, .uc_more_btn, .plus-hero__btn, .se-btn) {
  --b-bg: var(--se-red); --b-fg: #fff; --b-bd: var(--se-red);
  --b-bg-h: var(--se-red-hover); --b-fg-h: #fff; --b-bd-h: var(--se-red-hover);
  --b-bg-a: var(--se-red-press); --b-fg-a: #fff; --b-bd-a: var(--se-red-press);
  box-sizing: border-box;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 48px;
  padding: 0 28px !important;
  margin: 0;
  border: 1px solid var(--b-bd) !important;
  border-radius: 0 !important;
  background: var(--b-bg) !important;
  color: var(--b-fg) !important;
  fill: var(--b-fg) !important;
  font: 500 14px/1.2 var(--se-display) !important;
  letter-spacing: var(--se-ls-button) !important;
  text-transform: uppercase !important;
  text-decoration: none !important;
  text-align: center;
  white-space: nowrap;
  box-shadow: none !important;
  text-shadow: none !important;
  transform: none !important;
  -webkit-appearance: none;
  appearance: none;
  cursor: pointer;
  transition: background-color var(--se-ease), border-color var(--se-ease), color var(--se-ease), fill var(--se-ease) !important;
}
:is(.elementor-button, .ast-button, .wp-element-button, a.button, button.button, input.button, input[type="submit"], input[type="button"], input[type="reset"], button[type="submit"], .ue-btn, .ue_button, .uc_more_btn, .plus-hero__btn, .se-btn) :is(.elementor-button-text, .elementor-button-content-wrapper, .elementor-button-icon) {
  color: inherit !important; font: inherit !important; letter-spacing: inherit !important; text-transform: inherit !important; fill: inherit !important;
}
:is(.elementor-button, .ast-button, .wp-element-button, a.button, button.button, input.button, input[type="submit"], input[type="button"], input[type="reset"], button[type="submit"], .ue-btn, .ue_button, .uc_more_btn, .plus-hero__btn, .se-btn) :is(svg, i) { width: 18px; height: 18px; font-size: 18px; fill: currentColor !important; }

/* variants */
.se-btn--ink { --b-bg: var(--se-ink); --b-fg: var(--se-paper); --b-bd: var(--se-ink); --b-bg-h: var(--se-n800); --b-fg-h: var(--se-paper); --b-bd-h: var(--se-n800); --b-bg-a: #000; --b-fg-a: var(--se-paper); --b-bd-a: #000; }
.se-btn--light { --b-bg: var(--se-paper); --b-fg: var(--se-ink); --b-bd: var(--se-paper); --b-bg-h: #fff; --b-fg-h: var(--se-ink); --b-bd-h: #fff; --b-bg-a: var(--se-n150); --b-fg-a: var(--se-ink); --b-bd-a: var(--se-n150); }
.se-btn--outline { --b-bg: transparent; --b-fg: var(--se-ink); --b-bd: var(--se-ink); --b-bg-h: var(--se-ink); --b-fg-h: var(--se-paper); --b-bd-h: var(--se-ink); --b-bg-a: var(--se-n800); --b-fg-a: var(--se-paper); --b-bd-a: var(--se-n800); }
.se-btn--inverse { --b-bg: transparent; --b-fg: var(--se-paper); --b-bd: var(--se-paper); --b-bg-h: var(--se-paper); --b-fg-h: var(--se-ink); --b-bd-h: var(--se-paper); --b-bg-a: var(--se-n150); --b-fg-a: var(--se-ink); --b-bd-a: var(--se-n150); }
.se-btn--ghost { --b-bg: transparent; --b-fg: var(--se-ink); --b-bd: transparent; --b-bg-h: transparent; --b-fg-h: var(--se-red); --b-bd-h: transparent; --b-bg-a: transparent; --b-fg-a: var(--se-red-press); --b-bd-a: transparent; padding: 0 4px !important; min-height: 40px; text-decoration: underline !important; text-underline-offset: 6px; text-decoration-thickness: 1px !important; }
.se-btn--sm { min-height: 40px; padding: 0 20px !important; font-size: 13px !important; }
.se-btn--lg { min-height: 56px; padding: 0 36px !important; font-size: 15px !important; }
.elementor-size-xs.elementor-button { min-height: 40px; padding: 0 20px !important; font-size: 13px !important; }
.elementor-size-xl.elementor-button { min-height: 56px; padding: 0 36px !important; font-size: 15px !important; }

/* states */
:is(.elementor-button, .ast-button, .wp-element-button, a.button, button.button, input.button, input[type="submit"], input[type="button"], input[type="reset"], button[type="submit"], .ue-btn, .ue_button, .uc_more_btn, .plus-hero__btn, .se-btn):is(:hover, .is-hover) {
  background: var(--b-bg-h) !important; color: var(--b-fg-h) !important; border-color: var(--b-bd-h) !important; fill: var(--b-fg-h) !important;
}
:is(.elementor-button, .ast-button, .wp-element-button, a.button, button.button, input.button, input[type="submit"], input[type="button"], input[type="reset"], button[type="submit"], .ue-btn, .ue_button, .uc_more_btn, .plus-hero__btn, .se-btn):is(:active, .is-active) {
  background: var(--b-bg-a) !important; color: var(--b-fg-a) !important; border-color: var(--b-bd-a) !important; fill: var(--b-fg-a) !important;
}
:is(.elementor-button, .ast-button, .wp-element-button, a.button, button.button, input.button, input[type="submit"], input[type="button"], input[type="reset"], button[type="submit"], .ue-btn, .ue_button, .uc_more_btn, .plus-hero__btn, .se-btn):is(:focus-visible, .is-focus) {
  outline: 2px solid var(--se-red) !important; outline-offset: 3px !important; box-shadow: 0 0 0 2px #fff !important;
}
:is(.elementor-button, .ast-button, .wp-element-button, a.button, button.button, input.button, input[type="submit"], input[type="button"], input[type="reset"], button[type="submit"], .ue-btn, .ue_button, .uc_more_btn, .plus-hero__btn, .se-btn)[aria-pressed="true"],
:is(.elementor-button, .ast-button, .wp-element-button, a.button, button.button, input.button, input[type="submit"], input[type="button"], input[type="reset"], button[type="submit"], .ue-btn, .ue_button, .uc_more_btn, .plus-hero__btn, .se-btn):is(.is-selected, .is-active, .current) {
  --b-bg: var(--se-ink); --b-fg: var(--se-paper); --b-bd: var(--se-ink); --b-bg-h: var(--se-n800); --b-bd-h: var(--se-n800); --b-fg-h: var(--se-paper);
}
:is(.elementor-button, .ast-button, .wp-element-button, a.button, button.button, input.button, input[type="submit"], input[type="button"], input[type="reset"], button[type="submit"], .ue-btn, .ue_button, .uc_more_btn, .plus-hero__btn, .se-btn):is(:disabled, [disabled], [aria-disabled="true"], .disabled, .is-disabled) {
  --b-bg: var(--se-n150); --b-fg: var(--se-n500); --b-bd: var(--se-n150);
  --b-bg-h: var(--se-n150); --b-fg-h: var(--se-n500); --b-bd-h: var(--se-n150); --b-bg-a: var(--se-n150); --b-fg-a: var(--se-n500); --b-bd-a: var(--se-n150);
  cursor: not-allowed; pointer-events: none;
}
.se-btn.se-btn--ghost:is(:disabled, [disabled], [aria-disabled="true"], .disabled, .is-disabled) { --b-bg: transparent; --b-bg-h: transparent; --b-bg-a: transparent; --b-fg: var(--se-n300); --b-fg-h: var(--se-n300); --b-fg-a: var(--se-n300); text-decoration-color: var(--se-n300) !important; }
:is(.elementor-button, .ast-button, .wp-element-button, a.button, button.button, input.button, input[type="submit"], input[type="button"], input[type="reset"], button[type="submit"], .ue-btn, .ue_button, .uc_more_btn, .plus-hero__btn, .se-btn):is(.is-loading, .loading, [aria-busy="true"]) {
  position: relative; color: transparent !important; pointer-events: none;
}
:is(.elementor-button, .ast-button, .wp-element-button, a.button, button.button, input.button, input[type="submit"], input[type="button"], input[type="reset"], button[type="submit"], .ue-btn, .ue_button, .uc_more_btn, .plus-hero__btn, .se-btn):is(.is-loading, .loading, [aria-busy="true"])::after {
  content: ""; position: absolute; top: 50%; left: 50%; width: 16px; height: 16px; margin: -8px 0 0 -8px;
  border: 2px solid var(--b-fg); border-right-color: transparent; border-radius: 50%;
  animation: se-spin .7s linear infinite;
}
@keyframes se-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { * { transition-duration: 0s !important; animation-duration: 0s !important; } }

/* the messenger buttons, by their address or their text (plus.py also gives them .se-btn--ink); a button with no address is still a button. The company's own contact
   channels (.se-btn--email, --facebook, --whatsapp, --line, below) are not these: they have their platform's outline */
.elementor-button:not(.se-btn--email, .se-btn--facebook, .se-btn--whatsapp, .se-btn--line):is([href*="facebook.com"], [href*="line.me"], [href*="wa.me"], [href*="whatsapp"]) {
  --b-bg: var(--se-ink); --b-fg: var(--se-paper); --b-bd: var(--se-ink); --b-bg-h: var(--se-n800); --b-fg-h: var(--se-paper); --b-bd-h: var(--se-n800); --b-bg-a: #000; --b-fg-a: var(--se-paper); --b-bd-a: #000;
}
.elementor-widget-button .elementor-button-wrapper { line-height: 0; }

/* ---------------------------------------------------------------- links in running text: ink, a hairline underline, crimson on hover */
:is(.elementor-widget-text-editor, .elementor-widget-theme-post-content, .entry-content, .woocommerce-product-details__short-description) a:not([class*="button"]):not(.se-btn) {
  color: inherit; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; text-decoration-color: var(--se-n300);
  transition: color var(--se-ease), text-decoration-color var(--se-ease);
}
:is(.elementor-widget-text-editor, .elementor-widget-theme-post-content, .entry-content, .woocommerce-product-details__short-description) a:not([class*="button"]):not(.se-btn):hover {
  color: var(--se-red); text-decoration-color: currentColor;
}

/* a link in text anywhere (the same as the links in the page builder's text widgets above) */
.se-link { color: inherit; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; text-decoration-color: var(--se-n300); transition: color var(--se-ease), text-decoration-color var(--se-ease); }
.se-link:is(:hover, .is-hover) { color: var(--se-red); text-decoration-color: currentColor; }

/* ---------------------------------------------------------------- form fields */
:is(input[type="text"], input[type="email"], input[type="tel"], input[type="number"], input[type="url"], input[type="search"], input[type="password"], input[type="date"], select, textarea, .elementor-field-textual) {
  box-sizing: border-box;
  min-height: 48px;
  padding: 12px 16px;
  border: 1px solid var(--se-n300) !important;
  border-radius: 0 !important;
  background: #fff !important;
  color: var(--se-ink) !important;
  font: 400 16px/1.4 var(--se-text) !important;
  box-shadow: none !important;
  transition: border-color var(--se-ease);
}
textarea { min-height: 128px; }
:is(input[type="text"], input[type="email"], input[type="tel"], input[type="number"], input[type="url"], input[type="search"], input[type="password"], input[type="date"], select, textarea, .elementor-field-textual):is(:hover, .is-hover) { border-color: var(--se-ink) !important; }
:is(input[type="text"], input[type="email"], input[type="tel"], input[type="number"], input[type="url"], input[type="search"], input[type="password"], input[type="date"], select, textarea, .elementor-field-textual):is(:focus, .is-focus) { border-color: var(--se-red) !important; outline: 1px solid var(--se-red); outline-offset: 0; box-shadow: none !important; }
:is(input, select, textarea, .elementor-field-textual):disabled { background: var(--se-n150) !important; color: var(--se-n500) !important; border-color: var(--se-n150) !important; cursor: not-allowed; }
:is(input, select, textarea):is([aria-invalid="true"], .is-error), .elementor-field-group.elementor-error :is(input, select, textarea) { border-color: var(--se-red) !important; }
::placeholder { color: var(--se-n500); opacity: 1; }
:is(input[type="checkbox"], input[type="radio"]) { accent-color: var(--se-red); }
label, .elementor-field-label { font: 500 12px/1.4 var(--se-display); letter-spacing: var(--se-ls-label); text-transform: uppercase; color: var(--se-n500); }

/* ---------------------------------------------------------------- header, navigation, footer */
.elementor-location-header { background: var(--se-ink); }
.elementor-nav-menu--main .elementor-item {
  font-family: var(--se-display) !important;
  font-weight: 500 !important;
  letter-spacing: .03em !important;
  text-transform: uppercase;
  transition: color var(--se-ease);
}
/* states of a navigation item: hover, keyboard focus and the page you are on show a crimson rule under the word; nothing moves */
.elementor-nav-menu--main a.elementor-item:is(:hover, :focus-visible, .elementor-item-active) {
  color: #fff !important;
  text-decoration: underline;
  text-decoration-color: var(--se-red);
  text-decoration-thickness: 2px;
  text-underline-offset: 10px;
}
.elementor-nav-menu--main .sub-menu,
.elementor-nav-menu--dropdown {
  border: 1px solid var(--se-line-dark) !important;
  border-radius: 0 !important;
  background: var(--se-ink) !important;
  box-shadow: none !important;
}
.elementor-nav-menu--main .sub-menu a, .elementor-nav-menu--dropdown a {
  background: transparent !important;
  color: var(--se-on-dark) !important;
  font: 500 14px/1.3 var(--se-display) !important;
  letter-spacing: .06em !important;
  text-transform: uppercase;
  transition: background-color var(--se-ease), color var(--se-ease);
}
.elementor-nav-menu--main .sub-menu a:is(:hover, :focus-visible, .elementor-item-active), .elementor-nav-menu--dropdown a:is(:hover, :focus-visible, .elementor-item-active) {
  background: var(--se-n800) !important;
  color: #fff !important;
  text-decoration: none;
}
.elementor-menu-toggle { border-radius: 0 !important; box-shadow: none !important; }

.elementor-location-footer { background-color: var(--se-ink); color: var(--se-on-dark); }
.elementor-location-footer a:not([class*="button"]) { color: var(--se-on-dark); text-decoration: none; transition: color var(--se-ease); }
.elementor-location-footer a:not([class*="button"]):hover {
  color: #fff; text-decoration: underline; text-decoration-color: var(--se-red); text-decoration-thickness: 2px; text-underline-offset: 5px;
}
.elementor-location-footer :is(a, .elementor-icon-list-text, p) { font-size: 16px !important; font-weight: 400 !important; letter-spacing: 0 !important; }
.elementor-location-footer .elementor-widget-heading .elementor-heading-title { font-size: 14px !important; letter-spacing: var(--se-ls-label) !important; text-transform: uppercase; }
.elementor-social-icon { border-radius: 50% !important; transition: background-color var(--se-ease), color var(--se-ease) !important; }
.elementor-social-icon:hover { background-color: var(--se-red) !important; color: #fff !important; }

/* ---------------------------------------------------------------- the sword family heroes (plus/hero/hero.css is generated from the new site; the design system sets its tokens) */
:root .plus-hero {
  --night: var(--se-ink); --ikat: var(--se-ink); --slate: var(--se-n800); --bone: var(--se-paper); --ash: var(--se-on-dark-2); --steel-grey: var(--se-n300);
  --ctl: var(--se-paper); --lacquer: var(--se-red-press); --wine-soft: var(--se-red-light); --radius: 0;
}
:root .plus-hero :is(.hg__bar, .hg__thumb, .media__frame) { border-radius: 0; box-shadow: none; }
:root .plus-hero :is(.plus-hero__caret, .hg__nav, .hg__fs, .hg__fsx) { box-shadow: none; }
:root .plus-hero .plus-hero__caret { background: var(--se-paper); border-color: var(--se-paper); color: var(--se-ink); }
:root .plus-hero .plus-hero__caret:is(:hover, :focus-visible) { background: #fff; border-color: #fff; color: var(--se-red); }

:root .plus-hero { --fs-h1: clamp(2rem, 4.2vw, 3rem); }
:root .plus-hero :is(.eyebrow, .place, .place .num, .crumbs, .crumbs a, .opening__desc) { letter-spacing: var(--se-ls-label); }
:root .plus-hero .hg__cap { font-size: 12px; }

/* a word of Thai set in Tahoma by an inline style: the system's own faces (the browser falls back for the Thai letters) */
[style*="Tahoma"] { font-family: inherit !important; }

/* ---------------------------------------------------------------- reading rhythm
   In a text widget a paragraph is 16 px from the next (a list the same), a heading 48 px above its text and 12 below, and the first block starts at the top: the old editor separated
   paragraphs with empty ones (tools/plus.py removes those), which made gaps of 80 px and more. */
.elementor-widget-text-editor :is(p, ul, ol, blockquote, dl) { margin: 0 0 var(--se-s4); }
.elementor-widget-text-editor :is(h2, h3, h4, h5, h6) { margin: var(--se-s7) 0 var(--se-s3); }
.elementor-widget-text-editor > .elementor-widget-container > :first-child { margin-top: 0; }
.elementor-widget-text-editor > .elementor-widget-container > :last-child { margin-bottom: 0; }
/* A line the editor could only make bold ("Basic Model — ฿18,000", "Custom Price: ฿26,000", "Features") is a heading (tools/plus.py promote_subheads): Oswald 24 px against the 16 px text,
   32 px above and 8 below so a price tier belongs to the paragraph under it. */
.elementor-widget-text-editor h3.plus-subhead { font: 500 24px/1.25 var(--se-display) !important; letter-spacing: 0; text-transform: none; margin: var(--se-s6) 0 var(--se-s2); }
.elementor-widget-text-editor > .elementor-widget-container > h3.plus-subhead:first-child { margin-top: 0; }

/* ---------------------------------------------------------------- product pages: one column and one rhythm
   The description under a sword (the page builder's "product-post") was put together section by section, each with its own width and padding: on the Tai Lue page its content began at
   12, 25, 32, 60, 150 and 174 px, the pictures were 768, 1024 and 1325 px wide and the video 1142, and the gaps between sections ran from 24 to 136 px. Now every section is the same
   1140 px column (never nearer the window's edge than the gutter), sections are 64 px apart (48 on a phone), a picture or a video fills the column, and a container no longer adds the
   page builder's default 12 px of padding at every level of nesting. A section's background still runs the full width: only its content is held to the column. */
[data-elementor-type="product-post"] {
  --se-measure: 1140px;
  --se-gutter: clamp(16px, 4vw, 48px);
  --se-section: 64px;
  --container-default-padding-top: 0px;
  --container-default-padding-right: 0px;
  --container-default-padding-bottom: 0px;
  --container-default-padding-left: 0px;
  --widgets-spacing: 24px 24px;
  --widgets-spacing-row: 24px;
  --widgets-spacing-column: 24px;
  padding-top: var(--se-s4);
  padding-bottom: var(--se-s9);
}
[data-elementor-type="product-post"] > .e-con {
  box-sizing: border-box;
  width: 100%;
  max-width: 100%;
  margin: 0;
  padding: 0 max(var(--se-gutter), calc((100% - var(--se-measure)) / 2)) !important;
}
[data-elementor-type="product-post"] > .e-con > .e-con-inner { width: 100%; max-width: none !important; margin: 0; padding: 0 !important; }
[data-elementor-type="product-post"] > .e-con:has(.elementor-widget) ~ .e-con:has(.elementor-widget) { margin-top: var(--se-section); }
[data-elementor-type="product-post"] > .e-con:not(:has(.elementor-widget)) { display: none; }
@media (max-width: 767px) { [data-elementor-type="product-post"] { --se-section: 48px; } }

/* ---------------------------------------------------------------- the hero on the description's column
   The hero (the gallery and the "General specification" column) kept the page builder's own margins: 48 px from the window's edge on the left and 80 on the right at 1440, the gutter twice
   over under the description at every narrower width (82 px against the hero's 41 at 1024), and on a phone 16 px for the gallery, 48 for the text and 32 for the description. Now the hero,
   the description's sections and any plain description take one side margin, the column's (150 px at 1440, never under the gutter), the gallery is the left half and the text the right half
   of the column (the Tai Lue page's proportions, the 72 px between them unchanged), the text column adds no padding at its outer edge, below 1025 px the text runs the gallery's full width
   instead of sitting in a centred strip, and the hero is the same distance from the first section as the sections are from each other (64 px, 48 on a phone). */
[data-elementor-type="product"] { --se-measure: 1140px; --se-gutter: clamp(16px, 4vw, 48px); --se-section: 64px; }
@media (max-width: 767px) { [data-elementor-type="product"] { --se-section: 48px; } }
[data-elementor-type="product"] > .e-con:not(:has([data-elementor-type="product-post"])) { padding-inline: max(var(--se-gutter), calc((100% - var(--se-measure)) / 2)) !important; }
[data-elementor-type="product"] > .e-con:first-child > .e-con-inner,
[data-elementor-type="product"] > .e-con:first-child:not(:has(> .e-con-inner)) { padding-bottom: calc(var(--se-section) - var(--se-s4)) !important; }
[data-elementor-type="product"] > .e-con:has([data-elementor-type="product-post"]) { padding-inline: 0 !important; }
/* the template's two columns: the gallery (c47f247's 07c2019 > b0c6d18; the Sword Stand's own template 09d3868 > 2153b35) and the text (83d987b; aed9846) */
@media (min-width: 1025px) {
  [data-elementor-type="product"] :is(.elementor-element-07c2019, .elementor-element-09d3868) > :is(.elementor-element-b0c6d18, .elementor-element-2153b35) { --width: 50%; width: 50% !important; max-width: 50% !important; flex: 0 0 50% !important; }
  [data-elementor-type="product"] :is(.elementor-element-07c2019, .elementor-element-09d3868) > :is(.elementor-element-83d987b, .elementor-element-aed9846) { padding-right: 0 !important; }
}
@media (max-width: 1024px) {
  [data-elementor-type="product"] :is(.elementor-element-07c2019, .elementor-element-09d3868) > :is(.elementor-element-83d987b, .elementor-element-aed9846) { padding-inline: 0 !important; padding-bottom: 0 !important; align-items: stretch !important; }
}

/* Text under text. The page builder tucked a text block under the one before it with a negative margin (-10, -20 px on the widget), which relied on the empty paragraph and the
   24 px bottom margin the old editor left after the last paragraph; both are gone (the reading rhythm above), so the two collided ("And handle up to 15\u2033" ran into "Weight Parameter",
   "...in our custom and signature model" into "Blade Option": tools/audit_overlap.mjs). A text block that follows another is a paragraph's distance (16 px) from it, whatever gap its
   container has. */
[data-elementor-type="product-post"] .elementor-widget-text-editor + .elementor-widget-text-editor > .elementor-widget-container { margin-top: 0 !important; }
[data-elementor-type="product-post"] .e-con:has(> .elementor-widget-text-editor + .elementor-widget-text-editor) { row-gap: var(--se-s4) !important; }

/* The option cards (Ayuthaya Noble, Laos-Viet, Thai-Laos, Standard Custom, Premium Custom: a rule above and below, no fill) pushed their content in 128 px on the left and none on the right
   (32 px each side on a phone): 17 containers, none with a background to hold the padding in. Their content starts on the column's edge like everything else (the same is done to the
   desktop padding of any such container when tools/system.py snaps the page builder's CSS). */
[data-elementor-type="product-post"] :is(.elementor-element-a4ec5a0, .elementor-element-131ff31, .elementor-element-05de2c4, .elementor-element-6eb1764, .elementor-element-2ceaca0, .elementor-element-c9420ea, .elementor-element-d75c813, .elementor-element-13ace2d, .elementor-element-0fa1f86, .elementor-element-bad7c9e, .elementor-element-b816cce, .elementor-element-0160eed, .elementor-element-35a1938, .elementor-element-c076c61, .elementor-element-f5f4efc, .elementor-element-e77d1af, .elementor-element-bb7b17c) { padding-inline: 0 !important; }

/* The two finish pictures ("Satin Finish with Stamp and Fuller", "Acid Etch Finish with Double Fuller": Ayuthaya Noble, Thai-Laos, Standard Custom) were small: 80% of their column on two
   pages, and on the Standard Custom page the second was cropped into a taller box than the first. They fill their column at their own proportions (the column itself is wider now that the
   cards no longer start 128 px in, tools/system.py). */
[data-elementor-type="product-post"] :is(.elementor-element-a7cf579, .elementor-element-c41d4d3, .elementor-element-c68619f, .elementor-element-413c5de) img { width: 100% !important; max-width: 100% !important; height: auto !important; object-fit: contain !important; }

/* A section that holds nothing but a video kept the page builder's minimum height (275 px on a phone) with the video centred in it, 37 px of paper above and below it on top of the
   section gap: no minimum height for it. */
[data-elementor-type="product-post"] > .e-con:has(.elementor-widget-video):not(:has(.elementor-widget:not(.elementor-widget-video))) { min-height: 0 !important; }

/* pictures and videos fill the column; a small picture is enlarged to it (tools/plus.py makes a sharper, larger copy of those under 1140 px) */
[data-elementor-type="product-post"] :is(.elementor-widget-image, .elementor-widget-video) { width: 100%; max-width: 100%; }
[data-elementor-type="product-post"] .elementor-widget-image img { display: block; width: 100%; max-width: none; height: auto; }
[data-elementor-type="product-post"] .elementor-widget-video .elementor-wrapper { width: 100%; aspect-ratio: 16 / 9; }
[data-elementor-type="product-post"] .elementor-widget-video :is(iframe, video, .elementor-video) { display: block; width: 100%; height: 100%; }

/* ---------------------------------------------------------------- the contact rows as a table (tools/plus.py: tidy_contact), centred under their heading */
.plus-table-wrap.plus-contact { align-self: stretch; width: 100%; max-width: 640px; margin: var(--se-s5) auto 0; }
.plus-contact .plus-table :is(th, td) { vertical-align: middle; }
.plus-contact .plus-table td { padding-block: var(--se-s2); overflow-wrap: anywhere; }
/* the labels of the contact rows (Email, Facebook, WhatsApp, LINE): black and larger than the other tables' labels, so the channel reads first */
.plus-contact .plus-table th[scope="row"] { width: 28%; min-width: 7rem; color: var(--se-ink); font-size: var(--se-fs-18); letter-spacing: .06em; }

/* channel buttons (Email, Facebook, WhatsApp, LINE) wherever the contact buttons appear: the contact rows (tools/plus.py: tidy_contact) and the loose buttons of the contact page,
   Gallery, Signature Model and Order, Payment and Shipping (tidy_buttons). The one place the system lets a third party's identity in: white, a 2px stroke in the platform's
   colour, the letters and the logo in the same colour, and only as wide as the letters need. The colours: Email the site's crimson, Facebook #1877f2, WhatsApp and LINE a step
   deeper than #25d366 and #06c755 (those are 2:1 on white, these 4:1, so the letters stay readable). Hover washes the button with 8% of its colour, pressed with 16%; the stroke,
   the letters and the logo do not change. */
.se-btn--email, .se-btn--facebook, .se-btn--whatsapp, .se-btn--line {
  --ch: var(--se-red);
  --b-bg: #fff; --b-fg: var(--ch); --b-bd: var(--ch);
  --b-bg-h: color-mix(in srgb, var(--ch) 8%, #fff); --b-fg-h: var(--ch); --b-bd-h: var(--ch);
  --b-bg-a: color-mix(in srgb, var(--ch) 16%, #fff); --b-fg-a: var(--ch); --b-bd-a: var(--ch);
  width: auto; max-width: 100%; min-height: 40px; gap: var(--se-s2);
  padding: 0 var(--se-s4) !important;
  border-width: 2px !important;
  font-size: 15px !important; text-transform: none !important; letter-spacing: .02em !important;
}
.se-btn--email svg, .se-btn--facebook svg, .se-btn--whatsapp svg, .se-btn--line svg { flex: none; }
.se-btn--facebook { --ch: #1877f2; }
.se-btn--whatsapp { --ch: #1a9247; }
.se-btn--line { --ch: #04933f; }

/* ---------------------------------------------------------------- "Customize your sword" under the gallery of Standard Custom and Premium Custom, centred in the gallery's container */
.plus-customize.elementor-widget { width: 100%; align-self: stretch; margin-top: var(--se-s5); }
.plus-customize .elementor-button-wrapper { text-align: center; }
/* the same button at the top of those two pages, above the gallery (tools/plus.py: add_customize) */
.plus-customize--top.elementor-widget { margin-top: 0; margin-bottom: var(--se-s5); }
/* (the container above it has 24 px of padding down to a tablet and none on a phone: the button keeps its distance from the header there too) */
@media (max-width: 767px) { .plus-customize--top.elementor-widget { margin-top: var(--se-s5); } }

/* (the war map's width and gap at the top of the Signature Model page are in the page: tools/plus.py: add_signature_map) */

/* ---------------------------------------------------------------- product descriptions, continued */
/* a video fills the column whatever width the page builder gave it (it was 85% on some pages, so a video and the pictures under it did not match) */
[data-elementor-type="product-post"] .elementor-widget-video { width: 100% !important; max-width: 100% !important; }
/* a nested wrapper adds no padding of its own (the 64 px between sections is the only section spacing, the column's edges the only side margin, and the gap between columns the only
   space between them); a container with its own background or border keeps its padding. This is what gives every two-column section (text beside a picture) the same margins on every page:
   on the Premium Custom page the text column had 96 px of its own on the left and the same section on the Ayuthaya Noble page none. */
[data-elementor-type="product-post"] > .e-con .e-con:not([data-settings*="background_background"]):not([data-settings*="border_border"]) { padding: 0 !important; }

/* ---------------------------------------------------------------- legibility exceptions (tools/audit_contrast.mjs finds them; each is a place where a colour that is right on paper sits on a dark section)
   the caption panel that hangs half over a photo and half over the paper was a 34% ink: over the paper it turned a pale grey under white letters (2.2:1); now a nearly solid ink panel */
.uc_image_grid_border_holder .uc_image_grid_border_box .uc_box_content { background-color: rgba(21, 18, 15, .88) !important; }
/* the category label of a product card is a small crimson tag (on some pages its tag styling was missing and white letters sat on the paper) */
.jet-woo-products .jet-woo-product-categories { width: fit-content; max-width: 100%; margin: var(--se-s3) auto !important; padding: 2px var(--se-s3) !important; background: var(--se-red) !important; color: #fff !important; font: 500 12px/1.6 var(--se-display) !important; letter-spacing: var(--se-ls-label); text-transform: uppercase; text-align: center; }
.jet-woo-products .jet-woo-product-categories :is(ul, li) { margin: 0; padding: 0; list-style: none; }
.jet-woo-products .jet-woo-product-categories a { color: #fff !important; text-decoration: none; }
/* crimson letters on a dark section: the light crimson (the card titles of the custom swords, and five price lines of the scabbard and Standard Custom pages) */
.ue-title-one, .ue-title-two,
.elementor-element-36f54b9 span[style*="#ad2a1e"], .elementor-element-4b6800a span[style*="#ad2a1e"], .elementor-element-b79ac6c span[style*="#ad2a1e"], .elementor-element-afefc5d p, .elementor-element-4484068 p { color: var(--se-red-light) !important; }

/* ---------------------------------------------------------------- the intro paragraph of a sword page
   The short description under the hero (Ayuthaya Noble, Standard Custom, Premium Custom, Economy Line) was centred Oswald 24 px in a 941 px box. It is an ordinary paragraph now: Inter 16,
   left-aligned, in the same 1140 px column as everything under it. The product template's top container takes the same side gutter as the description's sections, so the hero and the text
   below it share their margin at every window width (see "the hero on the description's column" above). */
:root { --se-gutter: clamp(16px, 4vw, 48px); }
.elementor-widget-woocommerce-product-short-description { width: min(100%, 1140px) !important; max-width: none !important; margin-inline: auto !important; align-self: center !important; --container-widget-width: 100%; }
.elementor-widget-woocommerce-product-short-description :is(.elementor-widget-container, p, div, span, li) { font: 400 16px/1.65 var(--se-text) !important; text-align: left !important; color: var(--se-ink) !important; letter-spacing: 0 !important; text-transform: none !important; }
.elementor-widget-woocommerce-product-short-description p { margin: 0 0 var(--se-s4); }
.elementor-widget-woocommerce-product-short-description p:last-child { margin-bottom: 0; }
.elementor-widget-woocommerce-product-short-description strong { font-weight: 600 !important; }