/*
 * Automania global styles
 * Design tokens and the handful of truly site-wide resets. Header and
 * footer live in their own header.css / footer.css; shared marketing
 * components live in automania-shared-sections.css.
 */

:root {
  --am-font-heading: "Fraunces";
  --am-font-body: "Instrument Sans";

  /* Design system colors — Figma "Design System > 01 Foundations: Colors, Typography" */
  --am-red: #CB242E;
  --am-black: #000000;
  --am-text: #1A1A1A;
  --am-body-text: #444444;
  --am-muted: #666666;
  --am-subtle: #707070;
  --am-navy-dark: #041541;
  --am-card: #FFFFFF;
  --am-off-white: #FAFAFA;
  --am-gray-light: #F8F8F8;
  --am-soft: #F3F3F0;
  --am-peach-tint: #FFE8DF;
  --am-peach-accent: #FFDCCE;
  --am-orange: #FF5500;
  --am-gold: #D4AF37;
  --am-green-stock: #00BC7D;
  --am-green-dark: #007A55;
  --am-line: #e8e8e8;

  /* Design system type scale — Figma "Design System > 01 Foundations: Colors, Typography".
     The display sizes are the values from Figma's 1920px desktop frame, which is the
     widest real-world size they should ever reach. Below that they scale down with a
     pure-vw clamp (font-size = same % of viewport width as it is of 1920px at the
     Figma frame) instead of a slope+intercept formula — a flat intercept keeps the
     value too close to the 1920px max all the way down through common laptop widths
     (confirmed live: the old formula rendered the hero at 87.8px on a 1536px screen,
     barely smaller than the 100px it is at 1920). Pure-vw scaling gives a 1536px
     screen exactly 80% of the 1920px size (1536/1920), which is what "too big on my
     1536 laptop" actually calls for. Floors keep mobile legible once vw scaling would
     otherwise go below them. */
  --am-display-xl-size: clamp(52px, 5.2083vw, 100px);
  --am-display-l-size: clamp(36px, 3.6458vw, 70px);
  --am-display-m-size: clamp(29px, 2.9167vw, 56px);
  --am-h1-size: 65px;
  --am-h2-size: 52px;
  --am-h2-line-height: 58px;
  --am-h3-size: 42px;
  --am-h3-line-height: 48px;
  --am-h4-size: 34px;
  --am-h4-line-height: 40px;
  --am-h5-size: 28px;
  --am-h5-line-height: 34px;
  --am-h6-size: 24px;
  --am-h6-line-height: 30px;
  --am-section-y: 80px;
  --am-section-head-y: 50px;
}

/* style_1.css's ".main { padding-top: 18px }" (the content wrapper used by
   page.php, single.php, search.php, archive.php, 404.php, and WooCommerce's
   own wrapper-start.php) had no matching padding-bottom at all — confirmed
   live on Terms and Conditions, the content ran completely flush into the
   footer with a 0px gap. 18px on its own also read as too tight once the
   bottom gap was added, so both are increased here instead of just adding
   a matching bottom value. Overridden here rather than editing style_1.css
   directly, same approach as the other old defaults overridden this
   session. */
.main {
  padding-bottom: 48px;
  padding-top: 48px;
}

@media (max-width: 767px) {
  .main {
    padding-bottom: 28px;
    padding-top: 28px;
  }
}

/* Site-wide safety net against horizontal scroll. .am-homepage already
   does this for its own subtree, but the header/nav sits outside it —
   confirmed live: a closed (visibility:hidden) mega-menu dropdown panel
   is absolutely positioned 700px wide and extends past the viewport at
   ~1130px, and nothing was clipping that contribution to the page's
   scrollable width, producing a real horizontal scrollbar even though
   the panel itself was invisible. */
html {
  overflow-x: hidden;
}

body,
button,
input,
select,
textarea {
  font-family: var(--am-font-body);
}

/* Sitewide link default — confirmed live, a lot of links across the
   site (Cart's product name, Checkout's "Click here to login"/coupon
   toggle/privacy-policy/terms links, this theme's own content-page
   links) were still showing BaseCss's Bootstrap-era "a { color:
   #337ab7 }" default, an off-brand blue, with no theme override at
   all. This is a bare "a" selector at the same specificity as that
   BaseCss rule, and global.css loads after it, so this wins on source
   order without needing !important — while still losing naturally to
   every more specific link rule already written (header/footer nav,
   breadcrumbs, buttons, etc.), so none of those need touching. */
a {
  color: var(--am-red);
  text-decoration: none;
}

a:hover {
  color: #a91e26;
}

html *:focus,
html *:focus-visible {
  box-shadow: none !important;
  outline: none !important;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: var(--am-font-heading);
}

.wpcf7 form.invalid .wpcf7-response-output, .wpcf7 form.unaccepted .wpcf7-response-output, .wpcf7 form.payment-required .wpcf7-response-output {
  border-color: transparent;
  padding: 10px 0 0;
  color: red;
}

/* Sitewide WooCommerce button color — confirmed live, every WooCommerce
   button OUTSIDE the shop archive/single product page's own hand-styled
   add-to-cart (which already uses the brand red) was still showing
   WooCommerce's own unstyled defaults: a light lavender-gray ".button"
   ("Apply coupon", "Update cart" on Cart; "Login", "Register" on My
   Account) and a purple ".button.alt" ("Proceed to Checkout" on Cart,
   "Place order" on Checkout). global.css loads on every page, so this
   is the one place a fix here reaches all of them at once instead of
   duplicating it per page's own stylesheet. !important is needed
   because WooCommerce's own selectors for these same elements are
   already effectively 2-3 classes + 1 element even with their :where()
   wrapper contributing zero specificity, tying or beating a plain
   override here.

   Only background/color are forced — border-radius/font-weight are left
   alone deliberately, since the shop card's own add-to-cart button
   already matches this same red/white without !important on those two,
   and forcing them here would silently change its existing 8px corner
   radius to whatever's picked here (a change nobody asked for) instead
   of just fixing the actual complaint (wrong colors elsewhere). */
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce #respond input#submit,
.woocommerce a.button.alt,
.woocommerce button.button.alt,
.woocommerce input.button.alt {
  background: var(--am-red) !important;
  color: #fff !important;
}

.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce input.button:hover,
.woocommerce #respond input#submit:hover,
.woocommerce a.button.alt:hover,
.woocommerce button.button.alt:hover,
.woocommerce input.button.alt:hover {
  background: #a91e26 !important;
  color: #fff !important;
}

.woocommerce a.button:disabled,
.woocommerce button.button:disabled,
.woocommerce input.button:disabled,
.woocommerce a.button.disabled,
.woocommerce button.button.disabled,
.woocommerce input.button.disabled {
  opacity: .5 !important;
}

/* Cart page coupon box. WooCommerce's own CSS pins the input to 80px
   (woocommerce-layout.css: ".woocommerce table.cart td.actions .input-text")
   and to 48% of the row below 768px (woocommerce-smallscreen.css), which
   left room for only ~8 characters of a coupon code — confirmed live. The
   input and the Apply button now share a flex row: the input grows to
   fill it up to 360px (280px basis on desktop), the button keeps its own
   width, and on narrow widths the input basis drops so both stay on one
   line instead of the button wrapping underneath. align-items: stretch
   also evens out the input/button heights (34px vs 31px before). The
   selector chains six classes + three elements on purpose: the
   smallscreen rule is five classes + two elements, so this outranks it
   at every width without !important. Cart page only — checkout's own
   coupon form is separate markup and untouched. */
.woocommerce-cart .woocommerce table.cart td.actions .coupon {
  align-items: stretch;
  display: flex;
  flex-wrap: wrap;
  gap: 8px 0;
  max-width: 440px;
  width: 100%;
}

/* Spacing between input and button is a margin, not column-gap: the
   hidden "Coupon:" <label class="screen-reader-text"> is the first child
   of .coupon, and a column-gap was being applied after it as if it were a
   real item (confirmed live: everything sat 12px in from the left and the
   input stopped short of the row's right side). */
.woocommerce-cart .woocommerce table.cart td.actions .coupon input.input-text {
  box-sizing: border-box;
  flex: 1 1 280px;
  float: none;
  margin: 0 12px 0 0;
  max-width: 360px;
  min-width: 0;
  padding-left: 12px;
  padding-right: 12px;
  width: auto;
}

.woocommerce-cart .woocommerce table.cart td.actions .coupon .button {
  flex: 0 0 auto;
  float: none;
  width: auto;
}

@media (max-width: 575px) {
  .woocommerce-cart .woocommerce table.cart td.actions .coupon input.input-text {
    flex-basis: 150px;
  }
}

/* .breadcrumb (page.php's generic page banner — used by Cart, Checkout,
   and any plain WordPress Page without a custom template) still had its
   pre-redesign styling from style_1.css — confirmed live on Cart: 110px
   of top padding, an 18px title, and a 10px breadcrumb trail, all from
   well before this site's current Fraunces/Instrument Sans branding and
   spacing scale. Restyled to match; overridden here rather than editing
   style_1.css directly, same approach already used for the other old
   defaults found this session (breadcrumb/stock display:none, etc.). */
/* padding: 30px 0 (equal top/bottom, zero left/right, same at every
   width) — the container inside already provides the site's left/right
   spacing (60/40/20px at this component's own breakpoints); this div
   only needs to control the vertical gap. */
.breadcrumb {
  background-color: #f4f4f4;
  border-bottom: 1px solid var(--am-line);
  padding: 30px 0;
}

/* Title on the left, breadcrumb trail on the right, vertically centered
   — row + space-between, as asked for.

   padding: 0 — Bootstrap's own ".col-sm-12" (loaded in BaseCss) sets
   "padding: 0 15px" by default. Confirmed live: that 15px, plus another
   15px from the un-reset default ".breadcrumb" padding above, stacked on
   top of the .container's own 60px padding — the title rendered 30px
   further right (x=90) than the body content directly below it (x=60),
   even though both are meant to share the same left edge. */
.breadcrumb .col-sm-12 {
  align-items: center;
  display: flex;
  justify-content: space-between;
  padding: 0;
}

/* !important on color/font-size specifically — style_1.css's own rule
   for this exact element is "span.breadcrumb-single-title" (element +
   class), one component more specific than a plain class selector here,
   so it silently won those two properties while font-family/font-weight
   (which style_1.css's version never sets) applied fine. Confirmed live:
   computed color/size were still style_1.css's #333/18px despite this
   rule's values being right there in the cascade. Same class of bug as
   several others found this session, just in a rule I'd written myself. */
.breadcrumb-single-title {
  color: #111110 !important;
  display: block;
  font-family: var(--am-font-heading);
  font-size: var(--am-h4-size) !important;
  font-weight: 600;
}

/* padding: 0 — this is a bare <ul>, so the browser's own default
   "padding-inline-start: 40px" was never reset (only margin was),
   confirmed live: the breadcrumb trail sat 40px further right than the
   title above it, most visible at mobile widths once they're stacked. */
.breadcrumb ul.breadcrumbs {
  color: rgba(0, 0, 0, .75);
  float: none;
  font-family: var(--am-font-body);
  font-size: 16px;
  list-style: none;
  margin: 0;
  padding: 0;
}

/* Ported from style_1.css's ".breadcrumb li" (display/margin-right only
   — its own color: #363839 was dropped, since style_1.css's rule is
   removed now and the li correctly inherits ul.breadcrumbs' color
   instead) before removing that rule as dead/duplicated there — this
   part wasn't dead, it's what lays "Home", the arrow, and the current
   page out horizontally instead of stacking as list items. */
.breadcrumb ul.breadcrumbs li {
  display: inline-block;
  margin-right: 7px;
}

/* color: inherit (the previous value here) inherited from the <li>, not
   from this rule — and style_1.css used to have its own ".breadcrumb li"
   color rule that won on the <li> itself for the same specificity reason
   as above, so the "Home" link rendered dark gray instead of the
   intended muted color. Set directly instead of relying on inheritance
   (that style_1.css rule is gone now, but this stays explicit rather
   than depending on inheritance again). */
.breadcrumb ul.breadcrumbs li a {
  color: rgba(0, 0, 0, .75);
  text-decoration: none;
}

.breadcrumb ul.breadcrumbs li a:hover {
  color: var(--am-red);
}

.breadcrumb ul.breadcrumbs .bread-current {
  color: var(--am-navy-dark);
  font-weight: 600;
}

@media (max-width: 767px) {
  /* Title left + trail right doesn't have room to breathe at mobile
     widths — stacked instead, same as before. */
  .breadcrumb .col-sm-12 {
    align-items: flex-start;
    flex-direction: column;
    gap: 8px;
  }
}

/* Checkout's billing/shipping columns (#customer_details .col-1/.col-2)
   were stuck side-by-side at 45% width on every screen size, including
   mobile — confirmed live at 767px, both columns squeezed to ~332px.
   WooCommerce's own woocommerce-smallscreen.css already stacks these
   correctly (float: none; width: 100%) and is correctly loaded only at
   <=768px via its <link media> attribute, but style_1.css's version of
   this same rule adds an ID selector (#customer_details) that WC's
   class-only selector can't out-specificity, and style_1.css's rule has
   no media query of its own, so it wins and applies unconditionally at
   every width. Matches its exact selector (so this reliably outranks
   it) at the same <=768px breakpoint WooCommerce itself already uses
   for this exact component, rather than editing style_1.css directly. */
@media (max-width: 768px) {
  .woocommerce .checkout #customer_details .col-1,
  .woocommerce .checkout #customer_details .col-2 {
    float: none !important;
    margin-right: 0 !important;
    width: 100% !important;
  }
}

/* My Account > Wishlist (the custom quote-request wishlist,
   woocommerce/myaccount/wishlist.php) - design only: every rule is scoped to
   the My Account content that contains #jsCustomWishlist, so the other
   account screens (Orders, Addresses, Dashboard, wishlist details) are not
   touched, and nothing here sets "display" on .jsAddItemToWishlist or
   .jsWishlistContents, which the page script shows/hides itself.
   Markup, ids, classes, names and the form behaviour are unchanged. */
.woocommerce-MyAccount-content:has(#jsCustomWishlist) h4.margin_top0 {
  color: #111;
  font-family: var(--am-font-heading);
  font-size: 32px;
  font-weight: 600;
  line-height: 1.2;
  margin: 0 0 14px;
}

.woocommerce-MyAccount-content:has(#jsCustomWishlist) .wishlist_desc {
  background: #f4f4f4;
  border-radius: 10px;
  color: rgba(0, 0, 0, .75);
  font-size: 15px;
  line-height: 26px;
  margin: 0 0 20px;
  padding: 18px 22px;
}

/* Add to Wishlist */
.woocommerce-MyAccount-content:has(#jsCustomWishlist) .jsAddWishlist {
  align-items: center;
  background: var(--am-red);
  border: 0;
  border-radius: 8px;
  color: #fff;
  cursor: pointer;
  display: inline-flex;
  font-size: 15px;
  font-weight: 600;
  gap: 8px;
  line-height: 20px;
  margin-bottom: 18px;
  min-height: 44px;
  padding: 0 22px;
  transition: background-color .18s ease;
}

.woocommerce-MyAccount-content:has(#jsCustomWishlist) .jsAddWishlist::before {
  content: "\f067";
  font-family: "Font Awesome 6 Free", "FontAwesome";
  font-size: 13px;
  font-weight: 900;
}

.woocommerce-MyAccount-content:has(#jsCustomWishlist) .jsAddWishlist:hover,
.woocommerce-MyAccount-content:has(#jsCustomWishlist) .jsAddWishlist:focus {
  background: #a81d25;
  color: #fff;
}

/* Existing wishlist requests */
.woocommerce-MyAccount-content:has(#jsCustomWishlist) .jsWishlistContents {
  overflow-x: auto;
}

.woocommerce-MyAccount-content:has(#jsCustomWishlist) .wishlist-table {
  background: #fff;
  border: 1px solid var(--am-line);
  border-collapse: separate;
  border-radius: 10px;
  border-spacing: 0;
  font-size: 15px;
  margin: 0 0 32px;
  overflow: hidden;
  width: 100%;
}

.woocommerce-MyAccount-content:has(#jsCustomWishlist) .wishlist-table th,
.woocommerce-MyAccount-content:has(#jsCustomWishlist) .wishlist-table td {
  border: 0;
  border-bottom: 1px solid var(--am-line);
  padding: 14px 16px;
  vertical-align: middle;
}

.woocommerce-MyAccount-content:has(#jsCustomWishlist) .wishlist-table thead th {
  background: #f4f4f4;
  color: #111;
  font-size: 14px;
  font-weight: 600;
}

.woocommerce-MyAccount-content:has(#jsCustomWishlist) .wishlist-table tbody tr:last-child td {
  border-bottom: 0;
}

.woocommerce-MyAccount-content:has(#jsCustomWishlist) .wishlist-table tbody tr:hover td {
  background: #fafafa;
}

.woocommerce-MyAccount-content:has(#jsCustomWishlist) .wishlist-table td .btn {
  background: #fff;
  border: 1px solid #d6d6d6;
  border-radius: 6px;
  color: #111;
  display: block;
  font-size: 13px;
  font-weight: 600;
  line-height: 18px;
  margin: 0 auto 8px;
  max-width: 170px;
  padding: 7px 12px;
  text-decoration: none;
  transition: border-color .18s ease, color .18s ease, background-color .18s ease;
  width: 100%;
}

.woocommerce-MyAccount-content:has(#jsCustomWishlist) .wishlist-table td .btn:last-child {
  margin-bottom: 0;
}

.woocommerce-MyAccount-content:has(#jsCustomWishlist) .wishlist-table td .btn:hover,
.woocommerce-MyAccount-content:has(#jsCustomWishlist) .wishlist-table td .btn:focus {
  border-color: var(--am-red);
  color: var(--am-red);
}

.woocommerce-MyAccount-content:has(#jsCustomWishlist) .wishlist-table td .jsDeleteWishlist {
  border-color: var(--am-red);
  color: var(--am-red);
}

.woocommerce-MyAccount-content:has(#jsCustomWishlist) .wishlist-table td .jsDeleteWishlist:hover,
.woocommerce-MyAccount-content:has(#jsCustomWishlist) .wishlist-table td .jsDeleteWishlist:focus {
  background: var(--am-red);
  color: #fff;
}

/* The add-a-model form */
.woocommerce-MyAccount-content:has(#jsCustomWishlist) #jsCustomWishlist {
  background: #fff;
  border: 1px solid var(--am-line);
  border-radius: 12px;
  box-shadow: 0 8px 24px -8px rgba(0, 0, 0, .06);
  padding: 32px;
}

.woocommerce-MyAccount-content:has(#jsCustomWishlist) #jsCustomWishlist .row {
  display: grid;
  gap: 20px 24px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin: 0 0 20px;
}

/* Bootstrap's clearfix pseudo-elements would otherwise become grid items. */
.woocommerce-MyAccount-content:has(#jsCustomWishlist) #jsCustomWishlist .row::before,
.woocommerce-MyAccount-content:has(#jsCustomWishlist) #jsCustomWishlist .row::after {
  display: none;
}

/* The leftover empty row in the template. */
.woocommerce-MyAccount-content:has(#jsCustomWishlist) #jsCustomWishlist .row:not(:has(*)) {
  display: none;
}

.woocommerce-MyAccount-content:has(#jsCustomWishlist) #jsCustomWishlist [class*="col-sm-"] {
  float: none;
  margin: 0;
  min-width: 0;
  padding: 0;
  width: auto;
}

/* Remark and Submit span the full width. */
.woocommerce-MyAccount-content:has(#jsCustomWishlist) #jsCustomWishlist .col-sm-10,
.woocommerce-MyAccount-content:has(#jsCustomWishlist) #jsCustomWishlist .text-center {
  grid-column: 1 / -1;
}

/* Sample Product Link  OR  Upload Image (the 4th row). */
.woocommerce-MyAccount-content:has(#jsCustomWishlist) #jsCustomWishlist .row:nth-of-type(4) {
  align-items: end;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
}

.woocommerce-MyAccount-content:has(#jsCustomWishlist) #jsCustomWishlist .form-group {
  margin: 0;
}

.woocommerce-MyAccount-content:has(#jsCustomWishlist) #jsCustomWishlist label {
  color: #111;
  display: inline-block;
  font-size: 14px;
  font-weight: 600;
  line-height: 20px;
  margin: 0 0 8px;
}

.woocommerce-MyAccount-content:has(#jsCustomWishlist) #jsCustomWishlist .form-control {
  background: #fff;
  border: 1px solid #d6d6d6;
  border-radius: 8px;
  box-shadow: none;
  color: #111;
  display: block;
  font-size: 15px;
  height: 48px;
  line-height: 24px;
  padding: 10px 14px;
  transition: border-color .18s ease, box-shadow .18s ease;
  width: 100%;
}

.woocommerce-MyAccount-content:has(#jsCustomWishlist) #jsCustomWishlist .form-control::placeholder {
  color: rgba(0, 0, 0, .4);
}

.woocommerce-MyAccount-content:has(#jsCustomWishlist) #jsCustomWishlist .form-control:focus {
  border-color: var(--am-red);
  box-shadow: 0 0 0 3px rgba(203, 36, 46, .12);
  outline: 0;
}

.woocommerce-MyAccount-content:has(#jsCustomWishlist) #jsCustomWishlist textarea.form-control {
  height: auto;
  min-height: 120px;
  resize: vertical;
}

.woocommerce-MyAccount-content:has(#jsCustomWishlist) #jsCustomWishlist input[type="file"].form-control {
  padding: 8px 10px;
}

.woocommerce-MyAccount-content:has(#jsCustomWishlist) #jsCustomWishlist input[type="file"]::file-selector-button {
  background: #f4f4f4;
  border: 1px solid #d6d6d6;
  border-radius: 6px;
  color: #111;
  cursor: pointer;
  font-weight: 600;
  margin-right: 12px;
  padding: 6px 14px;
}

.woocommerce-MyAccount-content:has(#jsCustomWishlist) #jsCustomWishlist h4.w_seperator {
  color: rgba(0, 0, 0, .5);
  font-family: var(--am-font-body);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: .12em;
  line-height: 48px;
  margin: 0;
  text-align: center;
}

/* Validation messages from the form's own script. */
.woocommerce-MyAccount-content:has(#jsCustomWishlist) #jsCustomWishlist label.error {
  color: var(--am-red);
  display: block;
  font-size: 13px;
  font-weight: 500;
  line-height: 18px;
  margin: 6px 0 0;
}

.woocommerce-MyAccount-content:has(#jsCustomWishlist) #jsCustomWishlist .jsSubmitBtn {
  background: var(--am-red);
  border: 0;
  border-radius: 8px;
  color: #fff;
  cursor: pointer;
  font-size: 16px;
  font-weight: 600;
  line-height: 24px;
  min-height: 50px;
  min-width: 200px;
  padding: 0 40px;
  transition: background-color .18s ease;
}

.woocommerce-MyAccount-content:has(#jsCustomWishlist) #jsCustomWishlist .jsSubmitBtn:hover,
.woocommerce-MyAccount-content:has(#jsCustomWishlist) #jsCustomWishlist .jsSubmitBtn:focus {
  background: #a81d25;
  color: #fff;
}

@media (max-width: 767px) {
  .woocommerce-MyAccount-content:has(#jsCustomWishlist) h4.margin_top0 {
    font-size: 26px;
  }

  .woocommerce-MyAccount-content:has(#jsCustomWishlist) #jsCustomWishlist {
    padding: 20px;
  }

  .woocommerce-MyAccount-content:has(#jsCustomWishlist) #jsCustomWishlist .row,
  .woocommerce-MyAccount-content:has(#jsCustomWishlist) #jsCustomWishlist .row:nth-of-type(4) {
    gap: 16px;
    grid-template-columns: minmax(0, 1fr);
    margin-bottom: 16px;
  }

  .woocommerce-MyAccount-content:has(#jsCustomWishlist) #jsCustomWishlist h4.w_seperator {
    line-height: 24px;
  }

  .woocommerce-MyAccount-content:has(#jsCustomWishlist) #jsCustomWishlist .jsSubmitBtn {
    width: 100%;
  }
}

/* My Account (logged in) - every rule starts with body.woocommerce-account, so
   nothing outside the account pages changes. Everything here used the 14px/20px
   page default (the site's body copy elsewhere is 18px/28px) and the menu list
   showed the browser's default bullets.
   - Menu (shared by all My Account screens): no bullets, 18px links, the current
     screen in bold.
   - Dashboard text only (the content that contains .account-details): 18px/28px;
     the label column is widened so "No. Of Wishlist Orders Placed" stays on one
     line. Other My Account screens keep their existing text sizes. */
body.woocommerce-account .woocommerce-MyAccount-navigation {
  margin-bottom: 24px;
}

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

body.woocommerce-account .woocommerce-MyAccount-navigation li {
  list-style: none;
  margin: 0 0 4px;
  padding: 0;
}

body.woocommerce-account .woocommerce-MyAccount-navigation li a {
  display: block;
  font-size: 18px;
  line-height: 28px;
  padding: 6px 0;
  text-decoration: none;
}

body.woocommerce-account .woocommerce-MyAccount-navigation li.is-active a {
  color: #111;
  font-weight: 600;
}

body.woocommerce-account .woocommerce-MyAccount-content:has(.account-details) > p {
  font-size: 18px;
  line-height: 28px;
  margin: 0 0 16px;
}

body.woocommerce-account .woocommerce-MyAccount-content:has(.account-details) .account-details {
  font-size: 18px;
  line-height: 28px;
}

body.woocommerce-account .woocommerce-MyAccount-content:has(.account-details) .account-details .row {
  margin-bottom: 6px;
}

body.woocommerce-account .woocommerce-MyAccount-content:has(.account-details) .account-details .col-sm-4 {
  width: 58.33%;
}

body.woocommerce-account .woocommerce-MyAccount-content:has(.account-details) .account-details .col-sm-8 {
  width: 41.67%;
}