/* ==========================================================================
   InstaHome - Elementor bridge
   Loaded only on WordPress, after instahome.css.

   WHY THIS FILE EXISTS
   Elementor's "CSS Classes" field puts the class on the widget WRAPPER, not on
   the <a> or <h2> inside it. So our .btn rules can never land on the button
   element directly. Instead of styling every widget by hand in the editor
   (which would duplicate the design system into Elementor's database), this
   maps Elementor's own markup onto our tokens once.

   Result: a native Elementor Button widget with the wrapper class
   `ih-btn-primary` looks exactly like our `.btn--primary`, and the client can
   still edit its text and link in the normal Elementor UI.
   ========================================================================== */

/* ---------- Buttons ------------------------------------------------------ */
.elementor-widget-button .elementor-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--ui);
  font-size: .875rem;
  font-weight: 500;
  letter-spacing: .06em;
  text-transform: uppercase;
  text-decoration: none;
  padding: 1rem 1.9rem;
  border: 1px solid transparent;
  border-radius: 0;
  white-space: nowrap;
  fill: currentColor;
  transition: background .25s var(--ease), color .25s var(--ease),
              border-color .25s var(--ease), transform .12s var(--ease);
}
.elementor-widget-button .elementor-button:active { transform: scale(0.97); }

.ih-btn-primary .elementor-button { background: var(--btn-bg); color: var(--btn-fg); }
/* Same fix as the stylesheet: the featured card's own background is --night, so
   the ink button vanishes into it. */
.price-card--feature .ih-btn-primary .elementor-button { background: var(--gold); color: #17181A; }
.ih-btn-ghost .elementor-button {
  background: transparent;
  color: var(--ink);
  border-color: var(--ink);
}
.section--dark .ih-btn-ghost .elementor-button {
  color: var(--on-night);
  border-color: var(--line-night);
}

@media (hover: hover) and (pointer: fine) {
  .ih-btn-primary .elementor-button:hover { background: var(--btn-bg-hover); color: var(--btn-fg); }
  .price-card--feature .ih-btn-primary .elementor-button:hover { background: #D9B978; color: #17181A; }
  .ih-btn-ghost .elementor-button:hover { background: var(--ink); color: var(--paper); }
  .section--dark .ih-btn-ghost .elementor-button:hover { background: var(--on-night); color: var(--night); }
}

/* ---------- Headings and text -------------------------------------------- */
.elementor-widget-heading .elementor-heading-title {
  font-family: var(--ih-display);
  color: var(--ink);
  font-weight: 500;
  letter-spacing: -0.008em;
}
.elementor-widget-heading .elementor-heading-title a { text-decoration: none; }
.section--dark .elementor-widget-heading .elementor-heading-title,
.price-card--feature .elementor-widget-heading .elementor-heading-title {
  color: var(--on-night);
}
/* Body copy inside the dark featured card, same reason. */
.price-card--feature .elementor-widget-text-editor { color: var(--on-night-2); }
.price-card--feature .price-fig { color: var(--gold); }

h1.elementor-heading-title { font-size: clamp(2.25rem, 4.4vw, 3.5rem); line-height: 1.08; }
h2.elementor-heading-title { font-size: clamp(1.95rem, 3.8vw, 2.9rem); line-height: 1.12; }
h3.elementor-heading-title { font-size: clamp(1.25rem, 1.9vw, 1.5rem); line-height: 1.3; }

.elementor-widget-text-editor { color: var(--ink-2); }
.section--dark .elementor-widget-text-editor { color: var(--on-night-2); }

/* ---------- Vertical rhythm ----------------------------------------------
   Elementor strips widget margins and expects the container `gap` to space
   things out. Our spacing lives in CSS, so the rhythm the design assumes is
   restored here rather than being re-entered widget by widget in the editor.
   -------------------------------------------------------------------------- */
.elementor-widget-heading .elementor-heading-title { margin: 0 0 .5em; }
.elementor-widget-text-editor > .elementor-widget-container { margin: 0 0 1.1em; }
.elementor-widget-text-editor:last-child > .elementor-widget-container { margin-bottom: 0; }
.elementor-widget-html .rule--gold { margin-bottom: 1.5rem; }
.elementor-widget-accordion { margin-top: 2rem; }
.e-con.btn-row { margin-top: 1rem; }
.price-card .elementor-widget-heading .elementor-heading-title { margin-bottom: .75rem; }
.price-card .elementor-widget-button { margin-top: auto; padding-top: 1rem; }
.price-card .price-fig { margin-bottom: 1rem; }

/* ---------- Accordion (Elementor free) ----------------------------------- */
.elementor-accordion { border-top: 1px solid var(--line); }
.elementor-accordion .elementor-accordion-item {
  border: 0;
  border-bottom: 1px solid var(--line);
}
.elementor-accordion .elementor-tab-title {
  font-family: var(--ui);
  font-weight: 500;
  font-size: 1.0625rem;
  color: var(--ink);
  padding: 1.35rem 2.5rem 1.35rem 0;
  border: 0;
  background: transparent;
}
.elementor-accordion .elementor-tab-title.elementor-active { color: var(--ink); }
.elementor-accordion .elementor-tab-content {
  border: 0;
  padding: 0 2.5rem 1.6rem 0;
  color: var(--ink-2);
  font-size: .9688rem;
}
.elementor-accordion .elementor-accordion-icon { color: var(--gold-deep); width: auto; }
/* The question text lives in an <a> inside .elementor-tab-title, and something
   upstream paints it with the brand gold: #C5A059 on --paper-alt is 2.22:1,
   which fails AA at 17px. Inheriting from the tab title restores --ink (14.9:1)
   and matches what the rule above always intended. */
.elementor-accordion .elementor-tab-title .elementor-accordion-title { color: inherit; }

/* Font Awesome is dequeued in the mu-plugin: it cost 29 KB across four
   render-blocking stylesheets and the whole site used it for exactly two
   glyphs, the accordion's plus and minus. Both are drawn here instead, with
   the same bars the static build uses. Elementor still prints the <i>, and
   with its font gone the element is an empty box we can paint. */
.elementor-accordion .elementor-accordion-icon i {
  position: relative;
  display: inline-block;
  width: 13px;
  height: 13px;
  vertical-align: middle;
}
.elementor-accordion .elementor-accordion-icon i::before,
.elementor-accordion .elementor-accordion-icon i::after {
  content: "";
  position: absolute;
  background: currentColor;
}
/* the bar both symbols share */
.elementor-accordion .elementor-accordion-icon i::before {
  top: 50%;
  left: 0;
  width: 13px;
  height: 1.5px;
  transform: translateY(-50%);
}
/* the upright, on the plus only */
.elementor-accordion .elementor-accordion-icon i::after { display: none; }
.elementor-accordion .elementor-accordion-icon .fa-plus::after {
  display: block;
  top: 0;
  left: 50%;
  width: 1.5px;
  height: 13px;
  transform: translateX(-50%);
}

/* ---------- Images -------------------------------------------------------- */
.elementor-widget-image img { display: block; width: 100%; height: auto; }

/* ---------- Containers ----------------------------------------------------
   Elementor sets `width: var(--width)` (100%) on every child container, which
   overrides the flex-basis in our column classes and makes every column wrap
   onto its own line. These rules hand the layout back to our system. The
   `.e-con` prefix is what wins the specificity contest.
   -------------------------------------------------------------------------- */
.e-con.section { width: 100%; }
.e-con.shell {
  width: 100%;
  max-width: var(--shell);
  margin-inline: auto;
  padding-inline: var(--pad);
}
.e-con.shell--narrow { max-width: 820px; }

.e-con.row {
  width: 100%;
  flex-direction: row;
  flex-wrap: wrap;
  gap: var(--ih-gap);
  align-items: flex-start;
}
.e-con.row--wide    { gap: clamp(2rem, 4vw, 4rem); }
.e-con.row--mid     { align-items: center; }
.e-con.row--stretch { align-items: stretch; }

.e-con.hero-copy  { flex: 1 1 460px; width: auto; }
.e-con.hero-media { flex: 1 1 500px; width: auto; }
.e-con.col        { flex: 1 1 280px; width: auto; }
.e-con.col--sm    { flex: 1 1 200px; width: auto; }
.e-con.col--md    { flex: 1 1 340px; width: auto; }
.e-con.col--lg    { flex: 1 1 440px; width: auto; }
.e-con.price-card, .e-con.service { width: 100%; }
.e-con.btn-row {
  width: 100%;
  flex-direction: row;
  flex-wrap: wrap;
  gap: .75rem;
  align-items: center;
}

@media (max-width: 768px) {
  .e-con.row { flex-direction: column; }
  .e-con.hero-copy, .e-con.hero-media,
  .e-con.col, .e-con.col--sm, .e-con.col--md, .e-con.col--lg {
    flex: 1 1 auto;
    width: 100%;
  }
}

/* WooCommerce surfaces we did not redesign: keep our type, drop our layout. */
.woocommerce-cart .section, .woocommerce-checkout .section { padding: 0; }

/* WooCommerce surfaces we did not redesign: keep our type, drop our layout. */
.woocommerce-cart .section, .woocommerce-checkout .section { padding: 0; }

/* ---------- Before/after comparison, Elementor build ---------------------
   The two photos stay native Image widgets so they can be swapped in the
   editor. Only the rail, the labels and the range input come from an HTML
   widget, and none of those contain content. Elementor wraps every image in
   two divs, so the height has to be passed down explicitly.
   -------------------------------------------------------------------------- */
.e-con.compare {
  position: relative;
  overflow: hidden;
  aspect-ratio: 3 / 2;
  display: block;
  padding: 0;
  touch-action: pan-y;
  user-select: none;
}
.e-con.compare > .elementor-widget-image,
.e-con.compare > .elementor-widget-image > .elementor-widget-container { height: 100%; }
.e-con.compare > .elementor-widget-image img { width: 100%; height: 100%; object-fit: cover; }

.e-con.compare-after {
  position: absolute;
  inset: 0;
  width: 100%;
  padding: 0;
  clip-path: inset(0 50% 0 0);
  transition: clip-path 180ms var(--ease);
}
.e-con.compare-after > .elementor-widget-image,
.e-con.compare-after > .elementor-widget-image > .elementor-widget-container { height: 100%; }
.e-con.compare-after img { width: 100%; height: 100%; object-fit: cover; }

/* The chrome widget must not create its own box. */
.e-con.compare > .elementor-widget-html,
.e-con.compare > .elementor-widget-html > .elementor-widget-container { position: static; }

/* ---------- Remaining components in Elementor ----------------------------
   Same story as the columns: Elementor forces width:100% on child containers
   and wraps every image in two divs, so fixed-size thumbnails collapse.
   -------------------------------------------------------------------------- */
.e-con.mini {
  flex-direction: row;
  align-items: flex-start;
  gap: 1.1rem;
  width: 100%;
  padding: 1.1rem;
  background: var(--paper);
  border: 1px solid var(--line);
}
.e-con.mini-media { flex: 0 0 116px; width: 116px; }
.e-con.mini-media .elementor-widget-image,
.e-con.mini-media .elementor-widget-image > .elementor-widget-container { height: 100%; }
.e-con.mini-media img { width: 116px; height: 88px; object-fit: cover; }
.e-con.mini-body { flex: 1 1 auto; width: auto; min-width: 0; }
.e-con.mini-body .elementor-heading-title { font-family: var(--ui); font-size: 1rem; font-weight: 600; letter-spacing: 0; margin-bottom: .2rem; }

.e-con.service { width: 100%; height: 100%; background: var(--paper); border: 1px solid var(--line); }
.e-con.service-body { width: 100%; padding: 1.75rem; }
.e-con.service--feature > .elementor-widget-image { flex: 1 1 auto; }
.e-con.service--feature > .elementor-widget-image > .elementor-widget-container,
.e-con.service--feature > .elementor-widget-image img { height: 100%; object-fit: cover; }

.e-con.facts { flex-direction: row; flex-wrap: wrap; gap: 0; width: 100%; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.e-con.fact { flex: 1 1 200px; width: auto; padding: 2rem 1.5rem; border-left: 1px solid var(--line); }
.e-con.fact:first-child { border-left: 0; }

.e-con.steps { flex-direction: row; flex-wrap: wrap; gap: clamp(1.5rem, 3vw, 2.5rem); width: 100%; margin-top: 2.5rem; }
.e-con.step { flex: 1 1 200px; width: auto; border-top: 2px solid var(--gold); padding-top: 1.1rem; }
.e-con.step .elementor-heading-title { font-family: var(--ui); font-size: 1.0625rem; font-weight: 600; letter-spacing: 0; margin-bottom: .4rem; }

.e-con.snap { flex-direction: row; flex-wrap: nowrap; overflow-x: auto; gap: 1rem; width: 100%; margin-top: 2.5rem; scroll-snap-type: x mandatory; }
.e-con.snap > .e-con { flex: 0 0 min(78vw, 380px); width: auto; scroll-snap-align: start; }
@media (min-width: 769px) {
  .e-con.snap { overflow: visible; flex-wrap: wrap; scroll-snap-type: none; }
  .e-con.snap > .e-con { flex: 1 1 220px; }
}
.e-con.figure { width: 100%; }
.e-con.center { text-align: center; }
.e-con.center .e-con.btn-row { justify-content: center; }

@media (max-width: 768px) {
  .e-con.fact { flex: 1 1 50%; border-left: 0; border-top: 1px solid var(--line); padding: 1.5rem .25rem; }
  .e-con.mini { flex-direction: column; }
  .e-con.mini-media, .e-con.mini-media img { width: 100%; flex: 1 1 auto; height: auto; }
}

/* ---------- Fluent Forms Lite ---------------------------------------------
   Maps the plugin's own markup onto the .field styles in the design system, so
   the contact form matches the rest of the site without touching the plugin.
   -------------------------------------------------------------------------- */
.fluentform .ff-el-group { margin-bottom: 1.35rem; }
.fluentform .frm-fluent-form .ff-el-input--label label {
  font-family: var(--ui);
  font-size: .8125rem;
  font-weight: 500;
  color: var(--ink);
  letter-spacing: .02em;
  margin-bottom: .45rem;
}
.fluentform .ff-el-is-error .text-danger,
.fluentform .error-text { font-size: .8125rem; color: #9C2B1E; }
.fluentform .ff-el-input--label.ff-el-is-required label:after { color: var(--gold-deep); }

.fluentform .frm-fluent-form .ff-el-form-control,
.fluentform .ff-default .ff-el-form-control {
  font-family: var(--ui);
  font-size: 1rem;
  line-height: 1.5;
  color: var(--ink);
  background: #FFFFFF;
  border: 1px solid #B9B5AD;
  border-radius: 0;
  padding: .85rem 1rem;
  width: 100%;
  box-shadow: none;
  transition: border-color .2s var(--ease);
}
.fluentform .frm-fluent-form .ff-el-form-control::placeholder { color: #6E727A; }
.fluentform .frm-fluent-form .ff-el-form-control:focus {
  outline: 2px solid var(--gold-deep);
  outline-offset: 0;
  border-color: var(--gold-deep);
  box-shadow: none;
}
.fluentform .frm-fluent-form textarea.ff-el-form-control { min-height: 150px; resize: vertical; }

.fluentform .frm-fluent-form .ff-btn-submit,
.fluentform .ff-default .ff-btn-submit,
.fluentform .frm-fluent-form .ff_btn_style {
  font-family: var(--ui);
  font-size: .875rem;
  font-weight: 500;
  letter-spacing: .06em;
  text-transform: uppercase;
  background: var(--btn-bg);
  color: var(--btn-fg);
  border: 1px solid transparent;
  border-radius: 0;
  padding: 1rem 1.9rem;
  box-shadow: none;
  transition: background .25s var(--ease), transform .12s var(--ease);
}
.fluentform .frm-fluent-form .ff-btn-submit:active { transform: scale(0.97); }
@media (hover: hover) and (pointer: fine) {
  .fluentform .frm-fluent-form .ff-btn-submit:hover { background: var(--btn-bg-hover); color: var(--btn-fg); }
}
.fluentform .ff-message-success {
  border: 0;
  border-left: 2px solid var(--gold);
  background: var(--gold-wash);
  color: var(--ink);
  border-radius: 0;
  padding: 1.35rem 1.5rem;
}
/* WP Armour injects a honeypot field; it must stay in the DOM but out of sight. */
.fluentform .ff-el-group:has(input[name^="dzq"]),
.fluentform label[for*="alt_s"] { position: absolute; left: -9999px; }

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .fluentform .frm-fluent-form .ff-el-form-control,
.fluentform .ff-default .ff-el-form-control {
    background: #202328; border-color: #4A4E55; color: var(--ink);
  }
}

/* ---------- Blog listing rows ---------------------------------------------- */
.e-con.post {
  flex-direction: row;
  flex-wrap: wrap;
  gap: var(--ih-gap);
  width: 100%;
  padding: 2rem 0;
  border-bottom: 1px solid var(--line);
  align-items: flex-start;
}
.e-con.post:last-of-type { border-bottom: 0; }
.e-con.post-media { flex: 0 1 300px; width: auto; }
.e-con.post-media img { width: 100%; height: auto; }
.e-con.post-body { flex: 1 1 380px; width: auto; min-width: 0; }
.e-con.post-body .elementor-heading-title {
  font-family: var(--ih-display);
  font-size: 1.5rem;
  line-height: 1.3;
  margin-bottom: .5rem;
}
.e-con.post-body .elementor-heading-title a { text-decoration: none; color: var(--ink); }
@media (hover: hover) and (pointer: fine) {
  .e-con.post-body .elementor-heading-title a:hover { color: var(--gold-deep); }
}
/* Article body: the prose container carries the reading measure. */
.e-con.prose { width: 100%; }
.e-con.prose .elementor-widget-text-editor h2 { margin-top: 2.5rem; }
.e-con.prose figcaption { margin-top: -.5rem; }

@media (max-width: 768px) {
  .e-con.post { flex-direction: column; }
  .e-con.post-media, .e-con.post-body { flex: 1 1 auto; width: 100%; }
}

/* ---------- GeneratePress header and footer --------------------------------
   Elementor's Theme Builder is a Pro feature, so the header and footer stay
   native GeneratePress. These rules dress its markup in the design system.
   -------------------------------------------------------------------------- */
.site-header {
  background: color-mix(in srgb, var(--paper) 92%, transparent);
  border-bottom: 1px solid var(--line);
}
@supports not (backdrop-filter: blur(1px)) { .site-header { background: var(--paper); } }
.site-header .inside-header { padding-top: 0; padding-bottom: 0; }
.site-logo img, .site-header img { max-height: 44px; width: auto; }

.main-navigation { background: transparent; }
.main-navigation .main-nav ul li a {
  font-family: var(--ui);
  font-size: .875rem;
  font-weight: 400;
  color: var(--ink-2);
  padding-left: .8rem;
  padding-right: .8rem;
  line-height: 72px;
  border-bottom: 1px solid transparent;
  transition: color .2s var(--ease), border-color .2s var(--ease);
}
.main-navigation .main-nav ul li.current-menu-item > a { color: var(--ink); }
@media (hover: hover) and (pointer: fine) {
  /* Gold on hover, matching the footer. On white the brand gold #C5A059 is only
     2.46:1, so links use --gold-deep (5.03:1) which reads as the same gold but
     stays legible. The footer can use the bright gold because it sits on
     --night, where it measures 6.79:1.

     The .site-header prefix is load-bearing: GeneratePress prints its own nav
     hover colour inline, and its selector
     `.main-navigation .main-nav ul li:not([class*="current-menu-"]):hover > a`
     scores 0-4-3, so a plain `li a:hover` (0-3-3) loses to it. Prefixing with
     the wrapping .site-header outranks it without !important. The CTA item is
     excluded so its own button rule below still applies. */
  .site-header .main-navigation .main-nav ul li:not(.menu-cta):hover > a,
  .site-header .main-navigation .main-nav ul li:not(.menu-cta).sfHover > a,
  .site-header .main-navigation .main-nav ul li:not(.menu-cta) a:focus-visible {
    color: var(--gold-deep);
    background: transparent;
    border-bottom-color: var(--gold);
  }
}
.main-navigation .main-nav ul li.current-menu-item > a { border-bottom-color: var(--gold); }

/* The last menu item is the CTA. Add the class `menu-cta` to it in Appearance
   > Menus (Screen Options > CSS Classes) and it renders as our primary button. */
.main-navigation .main-nav ul li.menu-cta { margin-left: .75rem; display: flex; align-items: center; }
.main-navigation .main-nav ul li.menu-cta > a {
  background: var(--btn-bg);
  color: var(--btn-fg);
  font-size: .8125rem;
  font-weight: 500;
  letter-spacing: .06em;
  text-transform: uppercase;
  padding: .85rem 1.35rem;
  line-height: 1;
  border-radius: 0;
  border: 0;
  transition: background .25s var(--ease), transform .12s var(--ease);
}
.main-navigation .main-nav ul li.menu-cta > a:active { transform: scale(0.97); }
@media (hover: hover) and (pointer: fine) {
  .main-navigation .main-nav ul li.menu-cta > a:hover { background: var(--btn-bg-hover); color: var(--btn-fg); }
}

/* Header lockup: same markup as the footer, injected via generate_logo_output. */
.site-header .site-logo { display: flex; align-items: center; }
.site-header .brand { display: flex; align-items: center; gap: .7rem; text-decoration: none; }
.site-header .brand .brand-mark { width: 38px; height: 38px; flex: 0 0 38px; }
.site-header .brand-name { display: flex; flex-direction: column; line-height: 1; }
.site-header .brand-name b {
  font-family: var(--ui);
  font-size: .9375rem;
  font-weight: 600;
  letter-spacing: .13em;
  color: var(--ink);
}
.site-header .brand-name span {
  font-family: var(--ui);
  font-size: .6875rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin-top: 4px;
}

/* ---- Footer ---- */
.site-footer, .site-footer .footer-widgets, .site-footer .site-info {
  background: var(--night);
  color: var(--on-night-2);
}
.site-footer .footer-widgets-container { padding-top: clamp(3.5rem, 6vw, 5rem); padding-bottom: 2rem; }
.site-footer h2, .site-footer .widget-title {
  font-family: var(--ui);
  font-size: .6875rem;
  font-weight: 500;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 1.1rem;
}
.site-footer ul { list-style: none; margin: 0; padding: 0; }
.site-footer li { margin-bottom: .6rem; }
.site-footer a:not(.btn) { color: var(--on-night-2); text-decoration: none; font-size: .9375rem; }
@media (hover: hover) and (pointer: fine) {
  .site-footer a:not(.btn):hover { color: var(--gold); }
}
.site-footer p { color: var(--on-night-2); }
.site-footer .brand-name b { color: var(--on-night); }
.site-footer .brand-name span { color: var(--on-night-2); }
.site-footer .footer-base {
  display: flex; flex-wrap: wrap; gap: 1rem;
  justify-content: space-between; align-items: center;
  border-top: 1px solid var(--line-night);
  padding-top: 1.75rem; font-size: .8125rem;
}
.site-info { border-top: 0; }

@media (max-width: 768px) {
  .site-footer li a { display: inline-block; padding: .5rem 0; }
}

/* ---------- Two overrides that need !important -----------------------------
   Both fight markup or per-page CSS emitted by a plugin, where specificity
   alone cannot win. Kept together and explained rather than scattered.
   -------------------------------------------------------------------------- */

/* 1. Elementor writes a per-page rule (.elementor-N .elementor-element-XXX,
   three classes) that resolves the container's overflow from its own variable.
   The comparison rail is a full-width element translated by a percentage of
   itself, so without clipping it inflates the document scroll width by half
   the frame. No visible artifact, but it is a latent horizontal-scroll bug. */
.e-con.compare { overflow: hidden !important; }

/* 2. GeneratePress prints its own copyright bar underneath the footer-bar
   widget, so the year and company name appeared twice. The widget is the one
   we keep: it also carries the Refund policy and Contact links. display:none
   removes the duplicate from the accessibility tree as well as the page. */
.site-info .copyright-bar { display: none; }

/* ---------- Checkout (Flux) ----------------------------------------------- */
/* Flux prints an "Look up address" button even with autocomplete disabled and
   no Google API key, so it does nothing. The behaviour changes live in
   mu-plugins/instahome-checkout.php; this only hides the dead control. */
.flux-address-button--lookup,
.flux-address-button-wrapper--lookup,
.flux-address-button-wrapper--shipping-lookup { display: none; }

/* The privacy policy is a link and was the only one in this block not looking
   like one. The element+class prefix is needed: Flux styles `.flux-checkout a`
   (0-1-1), which outranks a bare class selector (0-1-0). */
.flux-checkout a.woocommerce-privacy-policy-link,
.flux-checkout a.woocommerce-terms-and-conditions-link,
a.woocommerce-privacy-policy-link,
a.woocommerce-terms-and-conditions-link {
  text-decoration: underline;
  text-underline-offset: 2px;
}