/*
 * Shop design for shop.hostfully.com: the www.hostfully.com look (tokens from
 * hf-theme-symphony: Google Sans Flex, indigo #2D2AA5, green #31B48D, warm
 * page background, big radii) applied to the header, footer and WooCommerce
 * pages. Loaded after WooCommerce, Hello Elementor and the legacy BLANK
 * styles. See shop/shop.php.
 *
 * WooCommerce selectors are scoped with
 *   :is(.hf-shop.woocommerce, .hf-shop .woocommerce):not(#hf-boost)
 * "woocommerce" is a body class on archives/products and a wrapper div on
 * cart/checkout/account, hence both. :not(#hf-boost) matches every element
 * (no such id) but adds ID weight, so these rules beat WooCommerce's
 * ".woocommerce #content ..." rules without !important.
 */

:root {
  --hf-font: "Google Sans Flex", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

  --hf-bg: #F6F4F2;
  --hf-surface: #FFFFFF;
  --hf-tile: #EFECE8;
  --hf-ink: #19172A;
  --hf-text: #212529;
  --hf-muted: #5E5C6B;
  --hf-line: #E4DFD8;
  --hf-line-strong: #CFC9C1;

  --hf-primary: #2D2AA5;
  --hf-primary-hover: #1F1C79;
  --hf-primary-soft: rgba(45, 42, 165, 0.08);
  --hf-green: #31B48D;
  --hf-green-hover: #26946F;
  --hf-green-bright: #40CAA1;
  --hf-green-text: #1B7A5D; /* brand green darkened to 4.5:1 on the page background, for text links */
  --hf-purple: #8A5BDA;

  --hf-blue-100: #E7F1FF;
  --hf-teal-100: #D2F4EA;
  --hf-indigo-100: #E0CFFC;
  --hf-orange-100: #FFE5D0;
  --hf-yellow-100: #FFF3CD;
  --hf-footer: #D2E4FC;
  --hf-danger: #C2410C;

  --hf-r-xl: 40px;
  --hf-r-lg: 28px;
  --hf-r-md: 20px;
  --hf-r-sm: 12px;
  --hf-r-pill: 999px;

  --hf-shadow-sm: 0 1px 2px rgba(25, 23, 42, 0.05);
  --hf-shadow: 0 1px 2px rgba(25, 23, 42, 0.04), 0 16px 40px -18px rgba(25, 23, 42, 0.18);
  --hf-ring: 0 0 0 4px rgba(45, 42, 165, 0.16);

  --hf-wrap: 1280px;
  --hf-gutter: 32px;
  --hf-header-h: 80px;
  --hf-ease: cubic-bezier(0.2, 0.7, 0.2, 1);
}

@media (max-width: 600px) {
  :root {
    --hf-gutter: 16px;
    --hf-header-h: 64px;
    --hf-r-xl: 28px;
    --hf-r-lg: 22px;
  }
}

/* ===========================================================================
 * Base
 * ======================================================================== */

html {
  scroll-padding-top: calc(var(--hf-header-h) + 16px);
}

body.hf-shop {
  margin: 0;
  background: var(--hf-bg);
  color: var(--hf-text);
  font-family: var(--hf-font);
  font-size: 16px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

.hf-shop :is(h1, h2, h3, h4, h5, h6) {
  font-family: var(--hf-font);
  color: var(--hf-ink);
  font-weight: 600;
  letter-spacing: -0.01em;
}

.hf-shop :is(button, input, select, textarea) {
  font-family: var(--hf-font);
}

.hf-shop .hf-wrap {
  width: 100%;
  max-width: calc(var(--hf-wrap) + var(--hf-gutter) * 2);
  margin-inline: auto;
  padding-inline: var(--hf-gutter);
  box-sizing: border-box;
}

.hf-shop .hf-visually-hidden {
  position: absolute !important;
  width: 1px !important;
  min-width: 0 !important; /* legacy CSS gives selects a min-width: kept them 960px wide, off-screen */
  max-width: 1px !important;
  height: 1px !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  overflow: hidden !important;
  clip: rect(0 0 0 0) !important;
  clip-path: inset(50%) !important;
  white-space: nowrap !important;
}

.hf-shop .hf-icon {
  width: 1.25em;
  height: 1.25em;
  flex: none;
}

.hf-shop :focus-visible {
  outline: 2px solid var(--hf-primary);
  outline-offset: 3px;
}

.hf-shop .hf-eyebrow {
  display: inline-block;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--hf-purple);
  text-decoration: none;
}

a.hf-eyebrow:hover {
  color: var(--hf-primary);
}

/* ===========================================================================
 * Buttons (own + WooCommerce)
 * ======================================================================== */

.hf-shop .hf-btn,
:is(.hf-shop.woocommerce, .hf-shop .woocommerce):not(#hf-boost) :is(a.button, button.button, input.button),
.hf-shop #respond input#submit,
.hf-shop :is(a.button, button.button).wc-forward,
:is(.hf-shop.woocommerce, .hf-shop .woocommerce):not(#hf-boost) #payment #place_order {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 48px;
  padding: 12px 28px;
  border: 1.5px solid transparent;
  border-radius: var(--hf-r-pill);
  background: var(--hf-primary);
  color: #fff;
  font-family: var(--hf-font);
  font-size: 16px;
  font-weight: 500;
  line-height: 1.2;
  letter-spacing: 0;
  text-transform: none;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  box-shadow: none;
  transition: background-color 0.2s var(--hf-ease), border-color 0.2s var(--hf-ease), color 0.2s var(--hf-ease), transform 0.2s var(--hf-ease), box-shadow 0.2s var(--hf-ease);
}

.hf-shop .hf-btn:hover,
:is(.hf-shop.woocommerce, .hf-shop .woocommerce):not(#hf-boost) :is(a.button, button.button, input.button):hover,
.hf-shop #respond input#submit:hover,
.hf-shop :is(a.button, button.button).wc-forward:hover,
:is(.hf-shop.woocommerce, .hf-shop .woocommerce):not(#hf-boost) #payment #place_order:hover {
  background: var(--hf-primary-hover);
  border-color: transparent;
  color: #fff;
  transform: translateY(-1px);
  box-shadow: 0 10px 24px -12px rgba(45, 42, 165, 0.55);
}

.hf-shop .hf-btn:active,
:is(.hf-shop.woocommerce, .hf-shop .woocommerce):not(#hf-boost) :is(a.button, button.button):active {
  transform: translateY(0);
}

.hf-shop .hf-btn .hf-icon {
  width: 18px;
  height: 18px;
  transition: transform 0.2s var(--hf-ease);
}

.hf-shop .hf-btn:hover .hf-icon {
  transform: translateX(2px);
}

/* Secondary WooCommerce buttons: coupon, update cart. */
:is(.hf-shop.woocommerce, .hf-shop .woocommerce):not(#hf-boost) :is(button[name="apply_coupon"], button[name="update_cart"], button[name="calc_shipping"]) {
  background: transparent;
  color: var(--hf-primary);
  border-color: var(--hf-line-strong);
}

:is(.hf-shop.woocommerce, .hf-shop .woocommerce):not(#hf-boost) :is(button[name="apply_coupon"], button[name="update_cart"], button[name="calc_shipping"]):hover {
  background: var(--hf-surface);
  border-color: var(--hf-primary);
  color: var(--hf-primary);
  box-shadow: none;
}

:is(.hf-shop.woocommerce, .hf-shop .woocommerce):not(#hf-boost) :is(button.button, a.button):disabled,
:is(.hf-shop.woocommerce, .hf-shop .woocommerce):not(#hf-boost) :is(button.button, a.button).disabled,
:is(.hf-shop.woocommerce, .hf-shop .woocommerce):not(#hf-boost) :is(button.button, a.button)[disabled] {
  opacity: 0.45;
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
  padding: 12px 28px;
}

:is(.hf-shop.woocommerce, .hf-shop .woocommerce):not(#hf-boost) :is(a.button, button.button).loading {
  opacity: 0.7;
  padding-right: 48px;
}

:is(.hf-shop.woocommerce, .hf-shop .woocommerce):not(#hf-boost) :is(a.button, button.button).loading::after {
  top: auto;
  right: 18px;
}

.hf-shop .hf-link-arrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--hf-green-text);
  font-weight: 500;
  text-decoration: none;
}

.hf-shop .hf-link-arrow:hover {
  color: var(--hf-primary);
  text-decoration: underline;
  text-underline-offset: 4px;
}

.hf-shop .hf-link-arrow .hf-icon {
  width: 18px;
  height: 18px;
}

/* ===========================================================================
 * Header
 * ======================================================================== */

.hf-shop .hf-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(246, 244, 242, 0.88);
  -webkit-backdrop-filter: saturate(180%) blur(14px);
  backdrop-filter: saturate(180%) blur(14px);
  border-bottom: 1px solid transparent;
  transition: border-color 0.2s, box-shadow 0.2s;
}

.admin-bar .hf-header {
  top: 32px;
}

@media (max-width: 782px) {
  .admin-bar .hf-header {
    top: 46px;
  }
}

@media (max-width: 600px) {
  .admin-bar .hf-header {
    top: 0;
  }
}

.hf-shop .hf-header.is-scrolled {
  border-bottom-color: var(--hf-line);
  box-shadow: 0 8px 24px -20px rgba(25, 23, 42, 0.35);
}

.hf-shop .hf-header__bar {
  display: flex;
  align-items: center;
  gap: 24px;
  height: var(--hf-header-h);
}

.hf-shop .hf-header__brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  flex: none;
  text-decoration: none;
}

.hf-shop .hf-header__brand img {
  display: block;
  width: 135px;
  height: auto;
}

.hf-shop .hf-header__tag {
  display: inline-block;
  padding: 4px 10px;
  border-radius: var(--hf-r-pill);
  background: var(--hf-primary-soft);
  color: var(--hf-primary);
  font-size: 13px;
  font-weight: 600;
  line-height: 1.2;
  transform: translateY(2px);
}

.hf-shop .hf-header__nav {
  flex: 1;
  display: flex;
  justify-content: center;
}

.hf-shop .hf-header__nav ul {
  display: flex;
  align-items: center;
  gap: 4px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.hf-shop .hf-header__nav a {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 10px 16px;
  border-radius: var(--hf-r-pill);
  color: var(--hf-primary);
  font-size: 16px;
  font-weight: 500;
  text-decoration: none;
  transition: background-color 0.2s, color 0.2s;
}

.hf-shop .hf-header__nav a:hover {
  background: var(--hf-surface);
  color: var(--hf-primary);
}

.hf-shop .hf-header__nav a.is-active {
  background: var(--hf-surface);
  box-shadow: var(--hf-shadow-sm);
}

/* "Categories" trigger: looks like the nav links. */
.hf-shop .hf-nav__trigger {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 10px 14px 10px 16px;
  border: 0;
  border-radius: var(--hf-r-pill);
  background: transparent;
  color: var(--hf-primary);
  font-family: var(--hf-font);
  font-size: 16px;
  font-weight: 500;
  line-height: 1.5;
  letter-spacing: 0;
  text-transform: none;
  cursor: pointer;
  transition: background-color 0.2s;
}

.hf-shop .hf-nav__trigger:hover,
.hf-shop .hf-nav__trigger:focus,
.hf-shop .hf-nav__trigger[aria-expanded="true"],
.hf-shop .hf-nav__trigger.is-active {
  background: var(--hf-surface);
  color: var(--hf-primary);
}

.hf-shop .hf-nav__trigger.is-active {
  box-shadow: var(--hf-shadow-sm);
}

.hf-shop .hf-header__nav .hf-nav__trigger .hf-icon {
  width: 16px;
  height: 16px;
  opacity: 0.8;
  transition: transform 0.2s var(--hf-ease);
}

.hf-shop .hf-nav__trigger[aria-expanded="true"] .hf-icon {
  transform: rotate(180deg);
}

/* Categories panel under the header. */
.hf-shop .hf-mega {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  border-top: 1px solid var(--hf-line);
  background: var(--hf-surface);
  box-shadow: 0 28px 48px -28px rgba(25, 23, 42, 0.28);
  opacity: 0;
  transform: translateY(-8px);
  transition: opacity 0.18s ease, transform 0.18s var(--hf-ease);
}

.hf-shop .hf-mega.is-open {
  opacity: 1;
  transform: none;
}

.hf-shop .hf-mega[hidden] {
  display: none;
}

.hf-shop .hf-mega__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) repeat(6, minmax(0, 1fr));
  gap: 16px;
  margin-block: 0;
  padding-top: 28px;
  padding-bottom: 32px;
  list-style: none;
}

/* Cards come in one after another when the panel opens. */
.hf-shop .hf-mega.is-open .hf-mega__grid > li {
  animation: hf-mega-in 0.32s var(--hf-ease) both;
  animation-delay: calc(var(--i, 0) * 30ms);
}

@keyframes hf-mega-in {
  from {
    opacity: 0;
    transform: translateY(8px);
  }
}

/* "All products": the indigo feature tile. */
.hf-shop .hf-mega__all {
  position: relative;
  display: flex;
  flex-direction: column;
  height: 100%;
  min-height: 200px;
  padding: 22px;
  overflow: hidden;
  border-radius: var(--hf-r-md);
  background:
    radial-gradient(90% 70% at 100% 0%, rgba(64, 202, 161, 0.45) 0%, rgba(64, 202, 161, 0) 60%),
    radial-gradient(80% 80% at 0% 100%, rgba(138, 91, 218, 0.55) 0%, rgba(138, 91, 218, 0) 65%),
    var(--hf-primary);
  color: #fff;
  text-decoration: none;
  box-sizing: border-box;
  transition: transform 0.25s var(--hf-ease), box-shadow 0.25s var(--hf-ease);
}

.hf-shop .hf-mega__all:hover {
  color: #fff;
  transform: translateY(-2px);
  box-shadow: 0 16px 30px -18px rgba(45, 42, 165, 0.8);
}

.hf-shop .hf-mega__all-eyebrow {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  opacity: 0.75;
}

.hf-shop .hf-mega__all-title {
  margin-top: 10px;
  font-size: 26px;
  font-weight: 600;
  line-height: 1.1;
  letter-spacing: -0.02em;
}

.hf-shop .hf-mega__all-count {
  margin-top: 6px;
  font-size: 14px;
  opacity: 0.8;
}

.hf-shop .hf-mega__all-cta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: auto;
  padding-top: 18px;
  font-size: 15px;
  font-weight: 600;
}

.hf-shop .hf-mega__all-cta .hf-icon {
  width: 18px;
  height: 18px;
  transition: transform 0.2s var(--hf-ease);
}

.hf-shop .hf-mega__all:hover .hf-mega__all-cta .hf-icon {
  transform: translateX(4px);
}

/* Category cards. */
.hf-shop .hf-mega__card {
  display: flex;
  flex-direction: column;
  gap: 2px;
  color: var(--hf-ink);
  text-decoration: none;
}

.hf-shop .hf-mega__media {
  display: block;
  aspect-ratio: 1;
  margin-bottom: 10px;
  overflow: hidden;
  border-radius: var(--hf-r-md);
  background: var(--hf-tile);
  isolation: isolate;
}

.hf-shop .hf-mega__grid li:nth-child(7n + 2) .hf-mega__media { background: #E3F7EF; }
.hf-shop .hf-mega__grid li:nth-child(7n + 3) .hf-mega__media { background: #FFEEDF; }
.hf-shop .hf-mega__grid li:nth-child(7n + 4) .hf-mega__media { background: #ECE3FD; }
.hf-shop .hf-mega__grid li:nth-child(7n + 5) .hf-mega__media { background: #EAF2FF; }
.hf-shop .hf-mega__grid li:nth-child(7n + 6) .hf-mega__media { background: #FFF6DB; }
.hf-shop .hf-mega__grid li:nth-child(7n + 7) .hf-mega__media { background: var(--hf-tile); }

.hf-shop .hf-mega__media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  mix-blend-mode: multiply;
  will-change: transform;
  transition: transform 0.5s var(--hf-ease);
}

.hf-shop .hf-mega__card:hover .hf-mega__media img,
.hf-shop .hf-mega__card:focus-visible .hf-mega__media img {
  transform: scale(1.06);
}

.hf-shop .hf-mega__name {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 16px;
  font-weight: 600;
  line-height: 1.3;
}

.hf-shop .hf-mega__name .hf-icon {
  width: 16px;
  height: 16px;
  opacity: 0;
  transform: translateX(-4px);
  transition: opacity 0.2s, transform 0.2s var(--hf-ease);
}

.hf-shop .hf-mega__card:hover .hf-mega__name,
.hf-shop .hf-mega__card:focus-visible .hf-mega__name,
.hf-shop .hf-mega__card.is-active .hf-mega__name {
  color: var(--hf-primary);
}

.hf-shop .hf-mega__card:hover .hf-mega__name .hf-icon,
.hf-shop .hf-mega__card:focus-visible .hf-mega__name .hf-icon {
  opacity: 1;
  transform: none;
}

.hf-shop .hf-mega__count {
  color: var(--hf-muted);
  font-size: 13px;
}

/* Laptop/tablet: "All products" becomes a strip above the cards. */
@media (max-width: 1180px) {
  .hf-shop .hf-mega__grid {
    grid-template-columns: repeat(6, minmax(0, 1fr));
  }

  .hf-shop .hf-mega__all-item {
    grid-column: 1 / -1;
  }

  .hf-shop .hf-mega__all {
    flex-direction: row;
    align-items: center;
    gap: 14px;
    min-height: 0;
    padding: 16px 22px;
  }

  .hf-shop .hf-mega__all-title {
    margin: 0;
    font-size: 20px;
  }

  .hf-shop .hf-mega__all-count {
    margin: 2px 0 0;
  }

  .hf-shop .hf-mega__all-cta {
    margin: 0 0 0 auto;
    padding: 0;
  }
}

@media (max-width: 900px) {
  .hf-shop .hf-mega {
    display: none;
  }
}

.hf-shop .hf-header__nav .hf-icon,
.hf-shop .hf-mobile-nav a .hf-icon {
  width: 15px;
  height: 15px;
  opacity: 0.7;
}

.hf-shop .hf-header__actions {
  display: flex;
  align-items: center;
  gap: 6px;
  flex: none;
  margin-left: auto;
}

.hf-shop .hf-icon-btn {
  text-transform: none;
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 0;
  border-radius: var(--hf-r-pill);
  background: transparent;
  color: var(--hf-primary);
  cursor: pointer;
  transition: background-color 0.2s;
}

.hf-shop .hf-icon-btn:hover,
.hf-shop .hf-icon-btn:focus {
  background: var(--hf-surface);
  color: var(--hf-primary);
}

.hf-shop .hf-icon-btn .hf-icon {
  width: 24px;
  height: 24px;
}

.hf-shop .hf-cart__count {
  position: absolute;
  top: 2px;
  right: 0;
  min-width: 20px;
  height: 20px;
  padding: 0 6px;
  border-radius: var(--hf-r-pill);
  border: 2px solid var(--hf-bg);
  background: var(--hf-green);
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  line-height: 16px;
  text-align: center;
  box-sizing: border-box;
  transition: transform 0.25s var(--hf-ease);
}

.hf-shop .hf-cart__count.is-empty {
  transform: scale(0);
}

.hf-shop .hf-cart.is-bumped {
  animation: hf-bump 0.5s var(--hf-ease);
}

@keyframes hf-bump {
  0%, 100% { transform: scale(1); }
  35% { transform: scale(1.18); }
  65% { transform: scale(0.95); }
}

.hf-shop .hf-header__burger {
  display: none;
}

.hf-shop .hf-header__burger .hf-icon:last-child,
.hf-shop .hf-header__burger[aria-expanded="true"] .hf-icon:first-child {
  display: none;
}

.hf-shop .hf-header__burger[aria-expanded="true"] .hf-icon:last-child {
  display: block;
}

/* Mobile menu: a panel over the page (scrolls on its own), not in the flow. */
.hf-shop .hf-mobile-nav {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  height: calc(100vh - var(--hf-header-h));
  height: calc(100dvh - var(--hf-header-h)); /* full screen under the header: nothing tappable behind it */
  box-sizing: border-box;
  overflow-y: auto;
  overscroll-behavior: contain;
  border-top: 1px solid var(--hf-line);
  background: var(--hf-bg);
  box-shadow: 0 24px 40px -24px rgba(25, 23, 42, 0.35);
  padding: 12px 0 24px;
}

/* Lock on <body>: the legacy CSS makes it the scroller; locking <html> threw
   the page's scroll position (and the sticky header) off. */
html.hf-nav-open body {
  overflow: hidden;
}

@media (min-width: 901px) {
  /* Menu left open while resizing up to desktop. */
  .hf-shop .hf-mobile-nav {
    display: none;
  }
}

.hf-shop .hf-mobile-nav[hidden] {
  display: none;
}

.hf-shop .hf-mobile-nav ul {
  margin: 0 0 16px;
  padding: 0;
  list-style: none;
}

.hf-shop .hf-mobile-nav a:not(.hf-btn) {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 14px 4px;
  border-bottom: 1px solid var(--hf-line);
  color: var(--hf-ink);
  font-size: 18px;
  font-weight: 500;
  text-decoration: none;
}

.hf-shop .hf-mobile-nav a.is-active {
  color: var(--hf-primary);
}

/* Mobile menu categories: small photo tile + name + count. */
.hf-shop .hf-mobile-nav .hf-mobile-nav__cats {
  display: grid;
  gap: 4px;
  margin-bottom: 12px;
}

.hf-shop .hf-mobile-nav .hf-mobile-nav__cats a {
  gap: 14px;
  padding: 8px 4px;
  border-bottom: 0;
  border-radius: var(--hf-r-sm);
}

.hf-shop .hf-mobile-nav .hf-mobile-nav__cats a.is-active {
  background: var(--hf-surface);
}

.hf-shop .hf-mobile-nav__thumb {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: 48px;
  height: 48px;
  overflow: hidden;
  border-radius: 14px;
  background: var(--hf-tile);
  isolation: isolate;
}

.hf-shop .hf-mobile-nav__cats li:nth-child(7n + 2) .hf-mobile-nav__thumb { background: #E3F7EF; }
.hf-shop .hf-mobile-nav__cats li:nth-child(7n + 3) .hf-mobile-nav__thumb { background: #FFEEDF; }
.hf-shop .hf-mobile-nav__cats li:nth-child(7n + 4) .hf-mobile-nav__thumb { background: #ECE3FD; }
.hf-shop .hf-mobile-nav__cats li:nth-child(7n + 5) .hf-mobile-nav__thumb { background: #EAF2FF; }
.hf-shop .hf-mobile-nav__cats li:nth-child(7n + 6) .hf-mobile-nav__thumb { background: #FFF6DB; }

.hf-shop .hf-mobile-nav__thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  mix-blend-mode: multiply;
}

.hf-shop .hf-mobile-nav__all .hf-mobile-nav__thumb {
  background: var(--hf-primary);
  color: #fff;
}

.hf-shop .hf-mobile-nav .hf-mobile-nav__all .hf-icon {
  width: 22px;
  height: 22px;
  opacity: 1;
}

.hf-shop .hf-mobile-nav__count {
  margin-left: auto;
  padding: 2px 10px;
  border-radius: var(--hf-r-pill);
  background: var(--hf-surface);
  color: var(--hf-muted);
  font-size: 13px;
  font-weight: 500;
}

@media (max-width: 900px) {
  .hf-shop .hf-header__nav {
    display: none;
  }

  .hf-shop .hf-header__burger {
    display: inline-flex;
  }
}

@media (max-width: 600px) {
  .hf-shop .hf-header__brand img {
    width: 112px;
  }

  .hf-shop .hf-header__tag {
    font-size: 12px;
    padding: 3px 8px;
  }

  .hf-shop .hf-header__account {
    display: none;
  }
}

/* ===========================================================================
 * Main / page layout
 * ======================================================================== */

.hf-shop .hf-main {
  display: block;
  padding: 24px 0 96px;
}

/* Hello Elementor's page template (cart, checkout, account, legal pages). */
.hf-shop .site-main:not(.hf-main) {
  width: 100%;
  max-width: calc(var(--hf-wrap) + var(--hf-gutter) * 2);
  margin-inline: auto;
  padding: 40px var(--hf-gutter) 96px;
  box-sizing: border-box;
}

.hf-shop .site-main .page-header {
  margin: 0 0 32px;
}

.hf-shop .site-main .page-header .entry-title,
.hf-shop .woocommerce-products-header__title.page-title {
  max-width: none;
  margin: 0;
  padding-inline: 0; /* Hello adds 10px on phones, misaligning titles with content */
  font-size: clamp(36px, 25.6px + 2.2vw, 52px);
  line-height: 1.08;
  letter-spacing: -0.02em;
}

.hf-shop .woocommerce-products-header {
  padding: 32px 0 28px;
}

.hf-shop .term-description {
  max-width: 640px;
  margin-top: 12px;
  color: var(--hf-muted);
  font-size: 18px;
}

/* ===========================================================================
 * Shop hero
 * ======================================================================== */

.hf-shop .hf-hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
  align-items: center;
  gap: clamp(32px, 5vw, 80px);
  padding: clamp(16px, 3vw, 40px) 0 clamp(40px, 6vw, 72px);
}

.hf-shop .hf-hero__copy {
  max-width: 540px;
}

.hf-shop .hf-hero__title {
  margin: 14px 0 20px;
  font-size: clamp(40px, 25.6px + 3.2vw, 64px);
  line-height: 1.04;
  letter-spacing: -0.03em;
}

.hf-shop .hf-hero__lead {
  margin: 0 0 32px;
  color: var(--hf-text);
  font-size: clamp(17px, 16px + 0.35vw, 20px);
  line-height: 1.45;
}

.hf-shop .hf-hero__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 20px 28px;
}

.hf-shop .hf-hero__collage {
  display: grid;
  grid-template-columns: 1.25fr 1fr 1fr;
  grid-template-rows: 1fr 1fr;
  gap: 16px;
  aspect-ratio: 1.3;
}

.hf-shop .hf-hero__tile {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  border-radius: var(--hf-r-lg);
  background: var(--hf-tile);
  text-decoration: none;
  isolation: isolate;
}

.hf-shop .hf-hero__tile img {
  will-change: transform;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  mix-blend-mode: multiply;
  transition: transform 0.6s var(--hf-ease);
}

.hf-shop .hf-hero__tile:hover img {
  transform: scale(1.05);
}

.hf-shop .hf-hero__tile--1 {
  grid-row: 1 / 3;
  background: #E3F7EF;
  border-radius: var(--hf-r-xl);
}

.hf-shop .hf-hero__tile--1 img {
  object-fit: cover;
}

.hf-shop .hf-hero__tile--2 {
  background: #FFEEDF;
}

.hf-shop .hf-hero__tile--3 {
  background: #ECE3FD;
}

.hf-shop .hf-hero__tile--4 {
  grid-column: 2 / 4;
  background: #EAF2FF;
}

.hf-shop .hf-hero__tile--2 img,
.hf-shop .hf-hero__tile--3 img {
  object-fit: cover;
}

.hf-shop .hf-hero__tile--4 img {
  width: auto;
  max-width: 70%;
  height: 100%;
}

.hf-shop .hf-hero__tile-label {
  position: absolute;
  left: 12px;
  bottom: 12px;
  z-index: 1;
  max-width: calc(100% - 24px);
  padding: 6px 12px;
  border-radius: var(--hf-r-pill);
  background: rgba(255, 255, 255, 0.92);
  color: var(--hf-ink);
  font-size: 13px;
  font-weight: 500;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  box-shadow: var(--hf-shadow-sm);
  transform: translateY(4px);
  opacity: 0;
  transition: opacity 0.25s, transform 0.25s var(--hf-ease);
}

.hf-shop .hf-hero__tile:hover .hf-hero__tile-label,
.hf-shop .hf-hero__tile:focus-visible .hf-hero__tile-label,
.hf-shop .hf-hero__tile--1 .hf-hero__tile-label {
  opacity: 1;
  transform: none;
}

@media (hover: none) {
  .hf-shop .hf-hero__tile-label {
    opacity: 1;
    transform: none;
  }
}

@media (max-width: 900px) {
  .hf-shop .hf-hero {
    grid-template-columns: 1fr;
  }

  .hf-shop .hf-hero__copy {
    max-width: 640px;
  }
}

@media (max-width: 600px) {
  .hf-shop .hf-hero__collage {
    gap: 10px;
    aspect-ratio: 1.15;
  }

  .hf-shop .hf-hero__tile-label {
    left: 8px;
    bottom: 8px;
    font-size: 12px;
    padding: 4px 10px;
  }

  .hf-shop .hf-hero__tile:not(.hf-hero__tile--1) .hf-hero__tile-label {
    display: none;
  }
}

/* ===========================================================================
 * Category pills + toolbar
 * ======================================================================== */

.hf-shop .hf-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 0 0 24px;
}

.hf-shop .hf-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 18px;
  border: 1.5px solid var(--hf-line-strong);
  border-radius: var(--hf-r-pill);
  background: transparent;
  color: var(--hf-ink);
  font-size: 15px;
  font-weight: 500;
  text-decoration: none;
  transition: background-color 0.2s, border-color 0.2s, color 0.2s;
}

.hf-shop .hf-pill span {
  color: var(--hf-muted);
  font-size: 13px;
  font-weight: 500;
}

.hf-shop .hf-pill:hover {
  border-color: var(--hf-primary);
  color: var(--hf-primary);
  background: var(--hf-surface);
}

.hf-shop .hf-pill.is-active {
  border-color: var(--hf-primary);
  background: var(--hf-primary);
  color: #fff;
}

.hf-shop .hf-pill.is-active span {
  color: rgba(255, 255, 255, 0.72);
}

.hf-shop .hf-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin: 0 0 24px;
  padding-bottom: 20px;
  border-bottom: 1px solid var(--hf-line);
}

:is(.hf-shop.woocommerce, .hf-shop .woocommerce):not(#hf-boost) .hf-toolbar .woocommerce-result-count,
:is(.hf-shop.woocommerce, .hf-shop .woocommerce):not(#hf-boost) .hf-toolbar .woocommerce-ordering {
  float: none;
  margin: 0;
}

:is(.hf-shop.woocommerce, .hf-shop .woocommerce):not(#hf-boost) .hf-toolbar .woocommerce-result-count {
  color: var(--hf-muted);
  font-size: 15px;
}

:is(.hf-shop.woocommerce, .hf-shop .woocommerce):not(#hf-boost) .hf-toolbar .woocommerce-ordering select {
  min-height: 44px;
  min-width: 220px;
  padding-block: 8px;
  font-size: 15px;
}

@media (max-width: 600px) {
  .hf-shop .hf-pills {
    flex-wrap: nowrap;
    overflow-x: auto;
    margin-inline: calc(var(--hf-gutter) * -1);
    padding-inline: var(--hf-gutter);
    scrollbar-width: none;
  }

  .hf-shop .hf-pills::-webkit-scrollbar {
    display: none;
  }

  .hf-shop .hf-pill {
    flex: none;
  }

  :is(.hf-shop.woocommerce, .hf-shop .woocommerce):not(#hf-boost) .hf-toolbar .woocommerce-result-count {
    font-size: 14px;
  }

  :is(.hf-shop.woocommerce, .hf-shop .woocommerce):not(#hf-boost) .hf-toolbar .woocommerce-ordering select {
    min-width: 0;
    max-width: 180px;
  }
}

/* ===========================================================================
 * Product grid + cards
 * ======================================================================== */

:is(.hf-shop.woocommerce, .hf-shop .woocommerce):not(#hf-boost) ul.products,
.hf-shop.woocommerce ul.products {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 48px 24px;
  margin: 0;
  padding: 0;
}

:is(.hf-shop.woocommerce, .hf-shop .woocommerce):not(#hf-boost) ul.products::before,
:is(.hf-shop.woocommerce, .hf-shop .woocommerce):not(#hf-boost) ul.products::after {
  display: none;
}

:is(.hf-shop.woocommerce, .hf-shop .woocommerce):not(#hf-boost) ul.products li.product {
  display: flex;
  flex-direction: column;
  float: none;
  width: auto !important;
  margin: 0 !important;
  padding: 0;
  text-align: left;
}

:is(.hf-shop.woocommerce, .hf-shop .woocommerce):not(#hf-boost) ul.products li.product a.woocommerce-LoopProduct-link {
  display: flex;
  flex-direction: column;
  flex: 1;
  color: inherit;
  text-decoration: none;
}

.hf-shop .hf-card__media {
  position: relative;
  aspect-ratio: 1;
  overflow: hidden;
  border-radius: var(--hf-r-lg);
  background: var(--hf-tile);
  isolation: isolate;
  transition: background-color 0.3s var(--hf-ease);
}

:is(.hf-shop.woocommerce, .hf-shop .woocommerce):not(#hf-boost) ul.products li.product .hf-card__media img {
  will-change: transform;
  display: block;
  width: 100%;
  height: 100%;
  margin: 0;
  object-fit: cover;
  mix-blend-mode: multiply;
  transition: transform 0.6s var(--hf-ease);
}

:is(.hf-shop.woocommerce, .hf-shop .woocommerce):not(#hf-boost) ul.products li.product:hover .hf-card__media {
  background: #E8E4DF;
}

:is(.hf-shop.woocommerce, .hf-shop .woocommerce):not(#hf-boost) ul.products li.product:hover .hf-card__media img {
  transform: scale(1.05);
}

:is(.hf-shop.woocommerce, .hf-shop .woocommerce):not(#hf-boost) ul.products li.product .onsale,
:is(.hf-shop.woocommerce, .hf-shop .woocommerce):not(#hf-boost) span.onsale {
  top: 14px;
  left: 14px;
  right: auto;
  min-width: 0;
  min-height: 0;
  margin: 0;
  padding: 6px 12px;
  border-radius: var(--hf-r-pill);
  background: var(--hf-green);
  color: #fff;
  font-size: 13px;
  font-weight: 600;
  line-height: 1.2;
  z-index: 2;
}

.hf-shop .hf-card__body {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 18px 4px 0;
}

.hf-shop .hf-card__cat {
  color: var(--hf-muted);
  font-size: 13px;
  font-weight: 500;
}

:is(.hf-shop.woocommerce, .hf-shop .woocommerce):not(#hf-boost) ul.products li.product .woocommerce-loop-product__title {
  margin: 0;
  padding: 0;
  color: var(--hf-ink);
  font-size: 18px;
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: -0.005em;
}

:is(.hf-shop.woocommerce, .hf-shop .woocommerce):not(#hf-boost) ul.products li.product a:hover .woocommerce-loop-product__title {
  color: var(--hf-primary);
}

.hf-shop .hf-card__variants {
  color: var(--hf-muted);
  font-size: 14px;
}

:is(.hf-shop.woocommerce, .hf-shop .woocommerce):not(#hf-boost) ul.products li.product .price {
  display: block;
  margin: 4px 0 0;
  color: var(--hf-ink);
  font-size: 17px;
  font-weight: 600;
}

:is(.hf-shop.woocommerce, .hf-shop .woocommerce):not(#hf-boost) ul.products li.product .price del {
  color: var(--hf-muted);
  font-weight: 400;
  opacity: 1;
}

:is(.hf-shop.woocommerce, .hf-shop .woocommerce):not(#hf-boost) ul.products li.product .price ins {
  text-decoration: none;
}

:is(.hf-shop.woocommerce, .hf-shop .woocommerce):not(#hf-boost) ul.products li.product .star-rating {
  margin: 2px 0;
  font-size: 13px;
}

:is(.hf-shop.woocommerce, .hf-shop .woocommerce):not(#hf-boost) ul.products li.product .button {
  align-self: flex-start;
  min-height: 42px;
  margin: 16px 4px 0;
  padding: 8px 20px;
  background: transparent;
  border-color: var(--hf-primary);
  color: var(--hf-primary);
  font-size: 15px;
}

:is(.hf-shop.woocommerce, .hf-shop .woocommerce):not(#hf-boost) ul.products li.product .button:hover {
  background: var(--hf-primary);
  color: #fff;
}

:is(.hf-shop.woocommerce, .hf-shop .woocommerce):not(#hf-boost) ul.products li.product .button.added {
  background: var(--hf-teal-100);
  border-color: var(--hf-green);
  color: var(--hf-ink);
}

:is(.hf-shop.woocommerce, .hf-shop .woocommerce):not(#hf-boost) ul.products li.product .button.added::after {
  margin-left: 0;
}

:is(.hf-shop.woocommerce, .hf-shop .woocommerce):not(#hf-boost) ul.products li.product a.added_to_cart {
  display: inline-block;
  margin: 10px 4px 0;
  padding: 0;
  color: var(--hf-green);
  font-size: 15px;
  font-weight: 500;
}

@media (max-width: 1100px) {
  :is(.hf-shop.woocommerce, .hf-shop .woocommerce):not(#hf-boost) ul.products {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 760px) {
  :is(.hf-shop.woocommerce, .hf-shop .woocommerce):not(#hf-boost) ul.products {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 32px 14px;
  }

  .hf-shop .hf-card__body {
    padding-top: 12px;
    gap: 4px;
  }

  :is(.hf-shop.woocommerce, .hf-shop .woocommerce):not(#hf-boost) ul.products li.product .woocommerce-loop-product__title {
    font-size: 15px;
  }

  .hf-shop .hf-card__cat,
  .hf-shop .hf-card__variants {
    font-size: 12px;
  }

  :is(.hf-shop.woocommerce, .hf-shop .woocommerce):not(#hf-boost) ul.products li.product .price {
    font-size: 15px;
  }

  :is(.hf-shop.woocommerce, .hf-shop .woocommerce):not(#hf-boost) ul.products li.product .button {
    min-height: 38px;
    margin-top: 12px;
    padding: 6px 14px;
    font-size: 14px;
  }
}

/* Pagination */
:is(.hf-shop.woocommerce, .hf-shop .woocommerce):not(#hf-boost) nav.woocommerce-pagination {
  margin-top: 56px;
}

:is(.hf-shop.woocommerce, .hf-shop .woocommerce):not(#hf-boost) nav.woocommerce-pagination ul {
  display: inline-flex;
  gap: 8px;
  border: 0;
}

:is(.hf-shop.woocommerce, .hf-shop .woocommerce):not(#hf-boost) nav.woocommerce-pagination ul li {
  border: 0;
}

:is(.hf-shop.woocommerce, .hf-shop .woocommerce):not(#hf-boost) nav.woocommerce-pagination ul li :is(a, span) {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  height: 44px;
  padding: 0 12px;
  border-radius: var(--hf-r-pill);
  border: 1.5px solid var(--hf-line-strong);
  color: var(--hf-ink);
  font-size: 15px;
  box-sizing: border-box;
}

:is(.hf-shop.woocommerce, .hf-shop .woocommerce):not(#hf-boost) nav.woocommerce-pagination ul li a:hover,
:is(.hf-shop.woocommerce, .hf-shop .woocommerce):not(#hf-boost) nav.woocommerce-pagination ul li span.current {
  background: var(--hf-primary);
  border-color: var(--hf-primary);
  color: #fff;
}

/* ===========================================================================
 * Breadcrumbs
 * ======================================================================== */

:is(.hf-shop.woocommerce, .hf-shop .woocommerce):not(#hf-boost) .hf-crumbs {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin: 8px 0 28px;
  color: var(--hf-muted);
  font-size: 14px;
}

:is(.hf-shop.woocommerce, .hf-shop .woocommerce):not(#hf-boost) .hf-crumbs a {
  color: var(--hf-muted);
  text-decoration: none;
}

:is(.hf-shop.woocommerce, .hf-shop .woocommerce):not(#hf-boost) .hf-crumbs a:hover {
  color: var(--hf-primary);
}

.hf-shop .hf-crumbs__sep {
  color: var(--hf-line-strong);
}

/* ===========================================================================
 * Single product
 * ======================================================================== */

.hf-shop.woocommerce div.product,
:is(.hf-shop.woocommerce, .hf-shop .woocommerce):not(#hf-boost) div.product {
  display: grid;
  grid-template-columns: minmax(0, 1.08fr) minmax(0, 1fr);
  column-gap: clamp(32px, 5vw, 80px);
  align-items: start;
}

:is(.hf-shop.woocommerce, .hf-shop .woocommerce):not(#hf-boost) div.product > :is(.woocommerce-tabs, .related, .upsells, .up-sells) {
  grid-column: 1 / -1;
}

:is(.hf-shop.woocommerce, .hf-shop .woocommerce):not(#hf-boost) div.product > .onsale {
  position: absolute;
}

/* Gallery */
:is(.hf-shop.woocommerce, .hf-shop .woocommerce):not(#hf-boost) div.product div.images {
  float: none;
  width: auto;
  margin: 0;
  grid-column: 1;
}

:is(.hf-shop.woocommerce, .hf-shop .woocommerce):not(#hf-boost) div.product div.images .woocommerce-product-gallery__wrapper {
  margin: 0;
}

:is(.hf-shop.woocommerce, .hf-shop .woocommerce):not(#hf-boost) div.product div.images .flex-viewport,
:is(.hf-shop.woocommerce, .hf-shop .woocommerce):not(#hf-boost) div.product div.images:not(:has(.flex-viewport)) .woocommerce-product-gallery__wrapper {
  border-radius: var(--hf-r-xl);
  overflow: hidden;
}

:is(.hf-shop.woocommerce, .hf-shop .woocommerce):not(#hf-boost) div.product div.images .woocommerce-product-gallery__image {
  background: var(--hf-tile);
}

:is(.hf-shop.woocommerce, .hf-shop .woocommerce):not(#hf-boost) div.product div.images .woocommerce-product-gallery__image img {
  mix-blend-mode: multiply;
}

/* Hover zoom (shop.js): the photo hides while the zoomed copy shows, so the
   two multiplied images never stack into a ghost. Instant, like the zoom. */
:is(.hf-shop.woocommerce, .hf-shop .woocommerce):not(#hf-boost) div.product div.images .woocommerce-product-gallery__image.hf-zooming > a > img {
  opacity: 0;
}

:is(.hf-shop.woocommerce, .hf-shop .woocommerce):not(#hf-boost) div.product div.images .woocommerce-product-gallery__trigger {
  top: 20px;
  right: 20px;
  width: 44px;
  height: 44px;
  border-radius: var(--hf-r-pill);
  background: var(--hf-surface);
  box-shadow: var(--hf-shadow);
  font-size: 0;
  text-indent: 0;
}

:is(.hf-shop.woocommerce, .hf-shop .woocommerce):not(#hf-boost) div.product div.images .woocommerce-product-gallery__trigger::before {
  top: 13px;
  left: 13px;
  width: 11px;
  height: 11px;
  border-color: var(--hf-ink);
}

:is(.hf-shop.woocommerce, .hf-shop .woocommerce):not(#hf-boost) div.product div.images .woocommerce-product-gallery__trigger::after {
  top: 26px;
  left: 25px;
  background: var(--hf-ink);
}

/* One scrollable row of thumbnails: Printful products can have dozens of
   near-identical variant mockups (the iPhone case has 38). */
:is(.hf-shop.woocommerce, .hf-shop .woocommerce):not(#hf-boost) div.product div.images .flex-control-thumbs {
  display: flex;
  gap: 12px;
  margin: 16px 0 0;
  padding: 0 0 8px;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x proximity;
  scrollbar-width: thin;
  scrollbar-color: var(--hf-line-strong) transparent;
}

:is(.hf-shop.woocommerce, .hf-shop .woocommerce):not(#hf-boost) div.product div.images .flex-control-thumbs::before,
:is(.hf-shop.woocommerce, .hf-shop .woocommerce):not(#hf-boost) div.product div.images .flex-control-thumbs::after {
  display: none;
}

:is(.hf-shop.woocommerce, .hf-shop .woocommerce):not(#hf-boost) div.product div.images .flex-control-thumbs li {
  flex: 0 0 calc((100% - 4 * 12px) / 5);
  scroll-snap-align: start;
  float: none;
  width: auto;
  margin: 0;
  overflow: hidden;
  border-radius: var(--hf-r-sm);
  background: var(--hf-tile);
}

:is(.hf-shop.woocommerce, .hf-shop .woocommerce):not(#hf-boost) div.product div.images .flex-control-thumbs li img {
  display: block;
  aspect-ratio: 1;
  object-fit: cover;
  mix-blend-mode: multiply;
  opacity: 0.55;
  transition: opacity 0.2s;
}

:is(.hf-shop.woocommerce, .hf-shop .woocommerce):not(#hf-boost) div.product div.images .flex-control-thumbs li img.flex-active,
:is(.hf-shop.woocommerce, .hf-shop .woocommerce):not(#hf-boost) div.product div.images .flex-control-thumbs li img:hover {
  opacity: 1;
}

:is(.hf-shop.woocommerce, .hf-shop .woocommerce):not(#hf-boost) div.product div.images .flex-control-thumbs li:has(img.flex-active) {
  box-shadow: inset 0 0 0 2px var(--hf-primary);
}

/* Summary */
:is(.hf-shop.woocommerce, .hf-shop .woocommerce):not(#hf-boost) div.product div.summary {
  float: none;
  width: auto;
  margin: 0;
  grid-column: 2;
  padding-top: 8px;
}

:is(.hf-shop.woocommerce, .hf-shop .woocommerce):not(#hf-boost) div.product .product_title {
  margin: 10px 0 12px;
  font-size: clamp(32px, 24px + 1.6vw, 44px);
  line-height: 1.08;
  letter-spacing: -0.02em;
}

:is(.hf-shop.woocommerce, .hf-shop .woocommerce):not(#hf-boost) div.product p.price,
:is(.hf-shop.woocommerce, .hf-shop .woocommerce):not(#hf-boost) div.product span.price {
  margin: 0 0 20px;
  color: var(--hf-primary);
  font-size: 24px;
  font-weight: 600;
}

:is(.hf-shop.woocommerce, .hf-shop .woocommerce):not(#hf-boost) div.product .woocommerce-product-details__short-description {
  margin: 0 0 24px;
  color: var(--hf-text);
  font-size: 17px;
  line-height: 1.55;
}

:is(.hf-shop.woocommerce, .hf-shop .woocommerce):not(#hf-boost) div.product .woocommerce-product-details__short-description p:last-child {
  margin-bottom: 0;
}

:is(.hf-shop.woocommerce, .hf-shop .woocommerce):not(#hf-boost) div.product form.cart {
  margin: 0 0 28px;
  padding: 24px 0 0;
  border-top: 1px solid var(--hf-line);
}

/* Variations */
:is(.hf-shop.woocommerce, .hf-shop .woocommerce):not(#hf-boost) div.product form.cart .variations {
  width: 100%;
  margin: 0 0 8px;
  border: 0;
  border-collapse: collapse;
}

:is(.hf-shop.woocommerce, .hf-shop .woocommerce):not(#hf-boost) div.product form.cart .variations tr {
  display: block;
  margin-bottom: 20px;
}

:is(.hf-shop.woocommerce, .hf-shop .woocommerce):not(#hf-boost) div.product form.cart .variations :is(th, td) {
  display: block;
  padding: 0;
  border: 0;
  background: none;
  text-align: left;
  line-height: 1.4;
}

:is(.hf-shop.woocommerce, .hf-shop .woocommerce):not(#hf-boost) div.product form.cart .variations th.label {
  margin-bottom: 10px;
}

:is(.hf-shop.woocommerce, .hf-shop .woocommerce):not(#hf-boost) div.product form.cart .variations label {
  color: var(--hf-ink);
  font-size: 15px;
  font-weight: 600;
}

:is(.hf-shop.woocommerce, .hf-shop .woocommerce):not(#hf-boost) div.product form.cart .variations label .hf-chosen {
  color: var(--hf-muted);
  font-weight: 400;
}

:is(.hf-shop.woocommerce, .hf-shop .woocommerce):not(#hf-boost) div.product form.cart .variations select {
  width: 100%;
  max-width: 420px;
}

:is(.hf-shop.woocommerce, .hf-shop .woocommerce):not(#hf-boost) div.product form.cart .variations td.hf-missing select.hf-select {
  border-color: var(--hf-danger);
}

:is(.hf-shop.woocommerce, .hf-shop .woocommerce):not(#hf-boost) div.product form.cart .reset_variations[style*="hidden"] {
  display: none;
}

:is(.hf-shop.woocommerce, .hf-shop .woocommerce):not(#hf-boost) div.product form.cart .single_variation_wrap > a[onclick*="Size_Guide"] {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin: 0 0 16px;
  color: var(--hf-primary) !important;
  font-size: 15px;
  font-weight: 500;
  text-decoration: underline;
  text-underline-offset: 4px;
}

:is(.hf-shop.woocommerce, .hf-shop .woocommerce):not(#hf-boost) div.product form.cart .reset_variations {
  display: inline-block;
  margin-top: 12px;
  color: var(--hf-muted);
  font-size: 14px;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.hf-shop .hf-options {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.hf-shop .hf-option {
  text-transform: none;
  letter-spacing: 0;
  min-width: 52px;
  min-height: 44px;
  padding: 8px 16px;
  border: 1.5px solid var(--hf-line-strong);
  border-radius: var(--hf-r-pill);
  background: var(--hf-surface);
  color: var(--hf-ink);
  font-size: 15px;
  font-weight: 500;
  line-height: 1.2;
  cursor: pointer;
  transition: border-color 0.15s, background-color 0.15s, color 0.15s;
}

.hf-shop .hf-option:hover:not(:disabled),
.hf-shop .hf-option:focus:not(:disabled) {
  border-color: var(--hf-primary);
  background: var(--hf-surface);
  color: var(--hf-primary);
}

.hf-shop .hf-option[aria-pressed="true"],
.hf-shop .hf-option[aria-pressed="true"]:hover,
.hf-shop .hf-option[aria-pressed="true"]:focus {
  border-color: var(--hf-primary);
  background: var(--hf-primary);
  color: #fff;
}

:is(.hf-shop.woocommerce, .hf-shop .woocommerce):not(#hf-boost) div.product form.cart .variations td.hf-missing .hf-option:not(:disabled):not([aria-pressed="true"]) {
  border-color: var(--hf-danger);
}

:is(.hf-shop.woocommerce, .hf-shop .woocommerce):not(#hf-boost) div.product form.cart .variations td.hf-missing::after {
  content: attr(data-hf-hint);
  display: block;
  margin-top: 10px;
  color: var(--hf-danger);
  font-size: 14px;
  font-weight: 500;
}

:is(.hf-shop.woocommerce, .hf-shop .woocommerce):not(#hf-boost) div.product form.cart .single_add_to_cart_button.wc-variation-selection-needed {
  cursor: pointer;
}

.hf-shop .hf-option:disabled {
  opacity: 0.4;
  text-decoration: line-through;
  cursor: not-allowed;
}

:is(.hf-shop.woocommerce, .hf-shop .woocommerce):not(#hf-boost) div.product .woocommerce-variation-price .price {
  margin: 4px 0 8px;
  font-size: 20px;
}

:is(.hf-shop.woocommerce, .hf-shop .woocommerce):not(#hf-boost) div.product .woocommerce-variation-availability p.stock {
  margin: 0 0 12px;
  font-size: 14px;
}

/* Quantity + add to cart */
:is(.hf-shop.woocommerce, .hf-shop .woocommerce):not(#hf-boost) div.product form.cart:not(.variations_form),
:is(.hf-shop.woocommerce, .hf-shop .woocommerce):not(#hf-boost) div.product form.cart .woocommerce-variation-add-to-cart {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
}

:is(.hf-shop.woocommerce, .hf-shop .woocommerce):not(#hf-boost) div.product form.cart::before,
:is(.hf-shop.woocommerce, .hf-shop .woocommerce):not(#hf-boost) div.product form.cart::after,
:is(.hf-shop.woocommerce, .hf-shop .woocommerce):not(#hf-boost) div.product form.cart .woocommerce-variation-add-to-cart::before,
:is(.hf-shop.woocommerce, .hf-shop .woocommerce):not(#hf-boost) div.product form.cart .woocommerce-variation-add-to-cart::after {
  display: none;
}

:is(.hf-shop.woocommerce, .hf-shop .woocommerce):not(#hf-boost) div.product form.cart div.quantity {
  float: none;
  margin: 0;
}

:is(.hf-shop.woocommerce, .hf-shop .woocommerce):not(#hf-boost) div.product form.cart .single_add_to_cart_button {
  float: none;
  flex: 1;
  min-width: 200px;
  min-height: 56px;
  font-size: 17px;
}

:is(.hf-shop.woocommerce, .hf-shop .woocommerce):not(#hf-boost) .quantity.hf-qty {
  display: inline-flex;
  align-items: center;
  height: 56px;
  padding: 0 6px;
  border: 1.5px solid var(--hf-line-strong);
  border-radius: var(--hf-r-pill);
  background: var(--hf-surface);
  box-sizing: border-box;
}

:is(.hf-shop.woocommerce, .hf-shop .woocommerce):not(#hf-boost) .quantity.hf-qty input.qty {
  width: 44px;
  height: 100%;
  min-height: 0;
  padding: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
  color: var(--hf-ink);
  font-size: 17px;
  font-weight: 600;
  text-align: center;
  -moz-appearance: textfield;
}

:is(.hf-shop.woocommerce, .hf-shop .woocommerce):not(#hf-boost) .quantity.hf-qty input.qty::-webkit-inner-spin-button,
:is(.hf-shop.woocommerce, .hf-shop .woocommerce):not(#hf-boost) .quantity.hf-qty input.qty::-webkit-outer-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

:is(.hf-shop.woocommerce, .hf-shop .woocommerce):not(#hf-boost) .quantity.hf-qty input.qty:focus {
  box-shadow: none;
  outline: none;
}

.hf-shop .hf-qty__btn {
  text-transform: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  padding: 0;
  border: 0;
  border-radius: var(--hf-r-pill);
  background: transparent;
  color: var(--hf-ink);
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
  transition: background-color 0.15s;
}

.hf-shop .hf-qty__btn:hover,
.hf-shop .hf-qty__btn:focus {
  background: var(--hf-tile);
  color: var(--hf-ink);
}

/* Perks under the add-to-cart button */
.hf-shop .hf-perks {
  display: grid;
  gap: 14px;
  margin: 0;
  padding: 24px 0 0;
  border-top: 1px solid var(--hf-line);
  list-style: none;
}

.hf-shop .hf-perks li {
  display: flex;
  align-items: center;
  gap: 14px;
  color: var(--hf-text);
  font-size: 15px;
}

.hf-shop .hf-perks .hf-icon {
  width: 40px;
  height: 40px;
  padding: 9px;
  border-radius: var(--hf-r-pill);
  background: var(--hf-teal-100);
  color: var(--hf-green-text);
  box-sizing: border-box;
}

.hf-shop .hf-perks a {
  color: var(--hf-primary);
  font-weight: 500;
}

/* Tabs */
:is(.hf-shop.woocommerce, .hf-shop .woocommerce):not(#hf-boost) div.product .woocommerce-tabs {
  margin-top: clamp(56px, 7vw, 96px);
  padding: clamp(24px, 4vw, 48px);
  border-radius: var(--hf-r-xl);
  background: var(--hf-surface);
}

:is(.hf-shop.woocommerce, .hf-shop .woocommerce):not(#hf-boost) div.product .woocommerce-tabs ul.tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0 0 32px;
  padding: 0;
  overflow: visible;
}

:is(.hf-shop.woocommerce, .hf-shop .woocommerce):not(#hf-boost) div.product .woocommerce-tabs ul.tabs::before,
:is(.hf-shop.woocommerce, .hf-shop .woocommerce):not(#hf-boost) div.product .woocommerce-tabs ul.tabs::after,
:is(.hf-shop.woocommerce, .hf-shop .woocommerce):not(#hf-boost) div.product .woocommerce-tabs ul.tabs li::before,
:is(.hf-shop.woocommerce, .hf-shop .woocommerce):not(#hf-boost) div.product .woocommerce-tabs ul.tabs li::after {
  display: none;
}

:is(.hf-shop.woocommerce, .hf-shop .woocommerce):not(#hf-boost) div.product .woocommerce-tabs ul.tabs li {
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: var(--hf-r-pill);
  background: transparent;
}

:is(.hf-shop.woocommerce, .hf-shop .woocommerce):not(#hf-boost) div.product .woocommerce-tabs ul.tabs li a {
  display: block;
  padding: 10px 20px;
  border: 1.5px solid var(--hf-line-strong);
  border-radius: var(--hf-r-pill);
  color: var(--hf-ink);
  font-size: 15px;
  font-weight: 500;
}

:is(.hf-shop.woocommerce, .hf-shop .woocommerce):not(#hf-boost) div.product .woocommerce-tabs ul.tabs li a:hover {
  border-color: var(--hf-primary);
  color: var(--hf-primary);
}

:is(.hf-shop.woocommerce, .hf-shop .woocommerce):not(#hf-boost) div.product .woocommerce-tabs ul.tabs li.active a {
  border-color: var(--hf-primary);
  background: var(--hf-primary);
  color: #fff;
}

:is(.hf-shop.woocommerce, .hf-shop .woocommerce):not(#hf-boost) :is(.woocommerce-tabs .panel, #reviews, .woocommerce-MyAccount-content, .woocommerce-form-login, .woocommerce-privacy-policy-text, .woocommerce-info, .woocommerce-message, .woocommerce-error) a:not(.button) {
  color: var(--hf-primary);
}

:is(.hf-shop.woocommerce, .hf-shop .woocommerce):not(#hf-boost) div.product .woocommerce-tabs .panel {
  max-width: 820px;
  margin: 0;
  color: var(--hf-text);
  font-size: 16px;
  line-height: 1.65;
}

:is(.hf-shop.woocommerce, .hf-shop .woocommerce):not(#hf-boost) div.product .woocommerce-tabs .panel > h2:first-child {
  margin: 0 0 16px;
  font-size: 24px;
}

:is(.hf-shop.woocommerce, .hf-shop .woocommerce):not(#hf-boost) div.product .woocommerce-tabs .panel ul {
  padding-left: 20px;
}

:is(.hf-shop.woocommerce, .hf-shop .woocommerce):not(#hf-boost) div.product .woocommerce-tabs .panel :is(table, .shop_attributes) {
  border-collapse: collapse;
  width: 100%;
  border: 0;
}

:is(.hf-shop.woocommerce, .hf-shop .woocommerce):not(#hf-boost) div.product .woocommerce-tabs .panel :is(table, .shop_attributes) :is(th, td) {
  padding: 12px 16px;
  border: 0;
  border-bottom: 1px solid var(--hf-line);
  background: none;
  text-align: left;
  font-style: normal;
}

:is(.hf-shop.woocommerce, .hf-shop .woocommerce):not(#hf-boost) div.product .woocommerce-tabs .panel .shop_attributes th {
  width: 180px;
  color: var(--hf-ink);
  font-weight: 600;
}

:is(.hf-shop.woocommerce, .hf-shop .woocommerce):not(#hf-boost) div.product .woocommerce-tabs .panel .shop_attributes td p {
  margin: 0;
  padding: 0;
}

/* Size chart (Printful content, see hf_shop_size_chart_tab) */
:is(.hf-shop.woocommerce, .hf-shop .woocommerce):not(#hf-boost) .hf-size-chart p:has(> .size-guide-title) {
  display: none; /* "Size guide" repeats the tab heading */
}

:is(.hf-shop.woocommerce, .hf-shop .woocommerce):not(#hf-boost) .hf-size-chart .table-responsive {
  max-width: 560px;
  overflow-x: auto;
  border: 1px solid var(--hf-line);
  border-radius: var(--hf-r-md);
}

:is(.hf-shop.woocommerce, .hf-shop .woocommerce):not(#hf-boost) div.product .woocommerce-tabs .panel .hf-size-chart table {
  margin: 0;
}

@media (max-width: 600px) {
  :is(.hf-shop.woocommerce, .hf-shop .woocommerce):not(#hf-boost) div.product .woocommerce-tabs .panel .hf-size-chart table td {
    padding: 12px 10px;
    font-size: 15px;
  }
}

:is(.hf-shop.woocommerce, .hf-shop .woocommerce):not(#hf-boost) div.product .woocommerce-tabs .panel .hf-size-chart table td {
  padding: 14px 20px;
  text-align: center;
  font-variant-numeric: tabular-nums;
}

:is(.hf-shop.woocommerce, .hf-shop .woocommerce):not(#hf-boost) div.product .woocommerce-tabs .panel .hf-size-chart table tr:first-child td {
  background: var(--hf-bg);
  color: var(--hf-ink);
}

:is(.hf-shop.woocommerce, .hf-shop .woocommerce):not(#hf-boost) div.product .woocommerce-tabs .panel .hf-size-chart table tr:last-child td {
  border-bottom: 0;
}

:is(.hf-shop.woocommerce, .hf-shop .woocommerce):not(#hf-boost) div.product .woocommerce-tabs .panel .hf-size-chart table td:first-child {
  text-align: left;
  color: var(--hf-ink);
}

:is(.hf-shop.woocommerce, .hf-shop .woocommerce):not(#hf-boost) .hf-size-chart strong {
  font-weight: 600;
}

/* Printful "Size Guide" modal (opened from the link above Add to cart) */
.hf-shop .pf-size-guide-modal-wrapper {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background: rgba(25, 23, 42, 0.55);
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
}

.hf-shop .pf-size-guide-modal {
  height: auto;
  max-height: calc(100vh - 48px);
  max-width: 860px;
  border-radius: var(--hf-r-lg);
  box-shadow: 0 30px 80px -20px rgba(25, 23, 42, 0.45);
  color: var(--hf-text);
  font-family: var(--hf-font);
}

.hf-shop .pf-size-guide-modal__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 28px 32px 8px;
}

.hf-shop .pf-size-guide-modal__title {
  float: none;
  color: var(--hf-ink);
  font-size: 26px;
  font-weight: 600;
  letter-spacing: -0.01em;
}

.hf-shop .pf-size-guide-modal__header .pf-size-guide-modal-clear {
  display: none; /* float clearer: as a flex item it pushed the close button inward */
}

.hf-shop .pf-size-guide-modal__close {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  float: none;
  border-radius: var(--hf-r-pill);
  transition: background-color 0.15s;
}

.hf-shop .pf-size-guide-modal__close:hover {
  background: var(--hf-bg) !important; /* Printful forces background: none !important */
}

.hf-shop .pf-size-guide-modal__close img {
  width: 20px;
  height: 20px;
}

.hf-shop .pf-size-guide-modal__content {
  padding: 12px 32px 32px;
  font-size: 15px;
  line-height: 1.55;
}

.hf-shop .pf-size-guide-modal__content h4 {
  color: var(--hf-ink);
  font-size: 20px;
  font-weight: 600;
}

.hf-shop .pf-product-size-guide__tabs {
  display: flex;
  gap: 8px;
  margin-bottom: 8px;
  box-shadow: none;
}

/* Printful sets each tab's background inline, hence !important. */
.hf-shop .pf-product-size-guide__tab,
.hf-shop .pf-product-size-guide__tab.pf-product-size-guide__tab--active {
  margin: 0;
  padding: 10px 18px;
  border: 1.5px solid var(--hf-line-strong);
  border-radius: var(--hf-r-pill);
  background-color: var(--hf-surface) !important;
  color: var(--hf-ink);
  font-weight: 500;
  transition: border-color 0.15s, color 0.15s;
}

.hf-shop .pf-product-size-guide__tab:hover {
  border-color: var(--hf-primary);
  color: var(--hf-primary);
}

.hf-shop .pf-product-size-guide__tab.pf-product-size-guide__tab--active,
.hf-shop .pf-product-size-guide__tab.pf-product-size-guide__tab--active:hover {
  border-color: var(--hf-primary);
  background-color: var(--hf-primary) !important;
  color: #fff;
  cursor: default;
}

/* Page behind the size guide doesn't scroll (shop.js toggles the class). */
html.hf-modal-open body {
  overflow: hidden;
}

.hf-shop .pf-size-guide-modal-measurements__image img {
  border-radius: var(--hf-r-md);
}

.hf-shop .pf-size-guide-modal-size-chart__tabs {
  display: inline-flex;
  gap: 4px;
  margin: 8px 0 16px;
  padding: 4px;
  border-radius: var(--hf-r-pill);
  background: var(--hf-bg);
  box-shadow: none;
}

.hf-shop .pf-size-guide-modal-size-chart__tab {
  margin: 0;
  padding: 8px 18px;
  border: 0;
  border-radius: var(--hf-r-pill);
  color: var(--hf-muted);
  font-size: 14px;
  font-weight: 600;
}

.hf-shop .pf-size-guide-modal-size-chart__tab.pf-size-guide-modal-size-chart__tab--active {
  background: var(--hf-surface);
  box-shadow: var(--hf-shadow-sm), 0 2px 6px rgba(25, 23, 42, 0.08);
  color: var(--hf-ink);
}

.hf-shop .pf-size-guide-modal-size-chart__table {
  border: 1px solid var(--hf-line);
  border-radius: var(--hf-r-md);
  border-collapse: separate;
  border-spacing: 0;
  overflow: hidden;
}

/* Printful's script writes inline background/color on every cell, hence the
   !important on those two; Hello's reset borders every side of a cell. */
.hf-shop .pf-size-guide-modal-size-chart__table td {
  padding: 12px 16px;
  border: 0;
  border-bottom: 1px solid var(--hf-line);
  background-color: var(--hf-surface) !important;
  color: var(--hf-text) !important;
  font-size: 15px;
  text-transform: none;
  font-variant-numeric: tabular-nums;
}

.hf-shop .pf-size-guide-modal-size-chart__table thead tr:first-child td {
  border-top: 0; /* Hello's "thead:first-child tr:first-child td" top border */
  background-color: var(--hf-bg) !important;
  color: var(--hf-muted) !important;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.hf-shop .pf-size-guide-modal-size-chart__table tbody td:first-child {
  color: var(--hf-ink) !important;
  font-weight: 600;
}

.hf-shop .pf-size-guide-modal-size-chart__table tr:last-child td {
  border-bottom: 0;
}

@media (max-width: 600px) {
  .hf-shop .pf-size-guide-modal-wrapper {
    padding: 12px;
  }

  .hf-shop .pf-product-size-guide__tabs {
    flex-wrap: wrap;
    overflow: visible;
  }

  .hf-shop .pf-product-size-guide__tab,
  .hf-shop .pf-product-size-guide__tab.pf-product-size-guide__tab--active {
    padding: 8px 16px;
    font-size: 15px;
  }

  .hf-shop .pf-size-guide-modal__header {
    padding: 20px 20px 4px;
  }

  .hf-shop .pf-size-guide-modal__title {
    font-size: 22px;
  }

  .hf-shop .pf-size-guide-modal__content {
    padding: 8px 20px 24px;
  }
}

/* Reviews */
:is(.hf-shop.woocommerce, .hf-shop .woocommerce):not(#hf-boost) #reviews #comments h2,
:is(.hf-shop.woocommerce, .hf-shop .woocommerce):not(#hf-boost) #reviews #reply-title {
  font-size: 22px;
}

:is(.hf-shop.woocommerce, .hf-shop .woocommerce):not(#hf-boost) #reviews .woocommerce-noreviews {
  color: var(--hf-muted);
}

:is(.hf-shop.woocommerce, .hf-shop .woocommerce):not(#hf-boost) #review_form #respond {
  margin-top: 24px;
  padding: 24px;
  border-radius: var(--hf-r-md);
  background: var(--hf-bg);
}

:is(.hf-shop.woocommerce, .hf-shop .woocommerce):not(#hf-boost) p.stars a {
  color: var(--hf-accent, #F5A623);
}

/* Related / upsells */
:is(.hf-shop.woocommerce, .hf-shop .woocommerce):not(#hf-boost) div.product :is(.related, .upsells) {
  margin-top: clamp(56px, 7vw, 96px);
}

:is(.hf-shop.woocommerce, .hf-shop .woocommerce):not(#hf-boost) div.product :is(.related, .upsells) > h2 {
  margin: 0 0 28px;
  font-size: clamp(28px, 20.8px + 1.4vw, 40px);
  letter-spacing: -0.02em;
}

@media (max-width: 900px) {
  :is(.hf-shop.woocommerce, .hf-shop .woocommerce):not(#hf-boost) div.product {
    grid-template-columns: minmax(0, 1fr);
  }

  :is(.hf-shop.woocommerce, .hf-shop .woocommerce):not(#hf-boost) div.product div.summary {
    grid-column: 1;
    padding-top: 32px;
  }

  :is(.hf-shop.woocommerce, .hf-shop .woocommerce):not(#hf-boost) div.product div.images .flex-control-thumbs {
    gap: 8px;
  }

  :is(.hf-shop.woocommerce, .hf-shop .woocommerce):not(#hf-boost) div.product div.images .flex-control-thumbs li {
    flex-basis: calc((100% - 4 * 8px) / 4.5);
  }
}

@media (max-width: 600px) {
  /* Quantity and Add to cart share one row on phones. */
  :is(.hf-shop.woocommerce, .hf-shop .woocommerce):not(#hf-boost) div.product form.cart .single_add_to_cart_button {
    min-width: 0;
    min-height: 52px;
    padding-inline: 16px;
  }

  :is(.hf-shop.woocommerce, .hf-shop .woocommerce):not(#hf-boost) div.product form.cart .quantity.hf-qty {
    height: 52px;
    padding: 0 4px;
  }

  :is(.hf-shop.woocommerce, .hf-shop .woocommerce):not(#hf-boost) div.product form.cart .quantity.hf-qty .hf-qty__btn {
    width: 34px;
    height: 34px;
  }

  :is(.hf-shop.woocommerce, .hf-shop .woocommerce):not(#hf-boost) div.product form.cart .quantity.hf-qty input.qty {
    width: 32px;
  }

  :is(.hf-shop.woocommerce, .hf-shop .woocommerce):not(#hf-boost) div.product .woocommerce-tabs ul.tabs {
    flex-wrap: nowrap;
    overflow-x: auto;
    margin-inline: calc(var(--hf-gutter) * -1 - 4px);
    padding-inline: calc(var(--hf-gutter) + 4px);
    scrollbar-width: none;
  }

  :is(.hf-shop.woocommerce, .hf-shop .woocommerce):not(#hf-boost) div.product .woocommerce-tabs ul.tabs li {
    flex: none;
  }

  :is(.hf-shop.woocommerce, .hf-shop .woocommerce):not(#hf-boost) div.product .woocommerce-tabs {
    margin-inline: calc(var(--hf-gutter) * -1 + 4px);
  }
}

/* ===========================================================================
 * Forms
 * ======================================================================== */

:is(.hf-shop.woocommerce, .hf-shop .woocommerce):not(#hf-boost) :is(input.input-text, input[type="text"], input[type="email"], input[type="tel"], input[type="password"], input[type="number"], input[type="search"], textarea, select),
:is(.hf-shop.woocommerce, .hf-shop .woocommerce):not(#hf-boost) form .form-row :is(.input-text, select) {
  width: 100%;
  min-height: 50px;
  padding: 12px 16px;
  border: 1.5px solid var(--hf-line-strong);
  border-radius: var(--hf-r-sm);
  background-color: var(--hf-surface);
  color: var(--hf-ink);
  font-family: var(--hf-font);
  font-size: 16px;
  line-height: 1.4;
  box-shadow: none;
  box-sizing: border-box;
  transition: border-color 0.15s, box-shadow 0.15s;
}

:is(.hf-shop.woocommerce, .hf-shop .woocommerce):not(#hf-boost) textarea,
:is(.hf-shop.woocommerce, .hf-shop .woocommerce):not(#hf-boost) form .form-row textarea.input-text {
  min-height: 110px;
  resize: vertical;
}

:is(.hf-shop.woocommerce, .hf-shop .woocommerce):not(#hf-boost) select,
:is(.hf-shop.woocommerce, .hf-shop .woocommerce):not(#hf-boost) form .form-row select {
  -webkit-appearance: none;
  appearance: none;
  padding-right: 44px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%2319172A' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
  background-size: 18px;
  cursor: pointer;
}

:is(.hf-shop.woocommerce, .hf-shop .woocommerce):not(#hf-boost) :is(input.input-text, input[type="text"], input[type="email"], input[type="tel"], input[type="password"], input[type="number"], textarea, select):hover {
  border-color: #B7B0A6;
}

:is(.hf-shop.woocommerce, .hf-shop .woocommerce):not(#hf-boost) :is(input.input-text, input[type="text"], input[type="email"], input[type="tel"], input[type="password"], input[type="number"], textarea, select):focus {
  border-color: var(--hf-primary);
  box-shadow: var(--hf-ring);
  outline: none;
}

:is(.hf-shop.woocommerce, .hf-shop .woocommerce):not(#hf-boost) ::placeholder {
  color: #8E8A97;
  opacity: 1;
}

:is(.hf-shop.woocommerce, .hf-shop .woocommerce):not(#hf-boost) form .form-row {
  margin: 0 0 18px;
  padding: 0;
}

:is(.hf-shop.woocommerce, .hf-shop .woocommerce):not(#hf-boost) form .form-row label {
  display: block;
  margin-bottom: 8px;
  color: var(--hf-ink);
  font-size: 15px;
  font-weight: 500;
  line-height: 1.3;
}

:is(.hf-shop.woocommerce, .hf-shop .woocommerce):not(#hf-boost) form .form-row label.checkbox,
:is(.hf-shop.woocommerce, .hf-shop .woocommerce):not(#hf-boost) form .form-row label.woocommerce-form__label-for-checkbox,
:is(.hf-shop.woocommerce, .hf-shop .woocommerce):not(#hf-boost) form label.woocommerce-form__label-for-checkbox {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-weight: 400;
  cursor: pointer;
}

:is(.hf-shop.woocommerce, .hf-shop .woocommerce):not(#hf-boost) input[type="checkbox"],
:is(.hf-shop.woocommerce, .hf-shop .woocommerce):not(#hf-boost) input[type="radio"] {
  width: 20px;
  height: 20px;
  margin: 0;
  accent-color: var(--hf-primary);
  flex: none;
}

:is(.hf-shop.woocommerce, .hf-shop .woocommerce):not(#hf-boost) form .form-row .required {
  color: var(--hf-danger);
  text-decoration: none;
}

:is(.hf-shop.woocommerce, .hf-shop .woocommerce):not(#hf-boost) form .form-row.woocommerce-invalid :is(.input-text, select, .select2-selection) {
  border-color: var(--hf-danger);
}

:is(.hf-shop.woocommerce, .hf-shop .woocommerce):not(#hf-boost) form .form-row.woocommerce-validated :is(.input-text, select),
:is(.hf-shop.woocommerce, .hf-shop .woocommerce):not(#hf-boost) form .form-row.woocommerce-validated .select2-container:not(.select2-container--open) .select2-selection {
  border-color: var(--hf-line-strong);
}

:is(.hf-shop.woocommerce, .hf-shop .woocommerce):not(#hf-boost) form .form-row .checkout-inline-error-message,
:is(.hf-shop.woocommerce, .hf-shop .woocommerce):not(#hf-boost) form .form-row [id$="-description"].woocommerce-input-error {
  margin: 6px 0 0;
  color: var(--hf-danger);
  font-size: 13px;
}

:is(.hf-shop.woocommerce, .hf-shop .woocommerce):not(#hf-boost) form .form-row .input-text + .input-text,
:is(.hf-shop.woocommerce, .hf-shop .woocommerce):not(#hf-boost) form .form-row input + input {
  margin-top: 10px;
}

/* selectWoo (country / state on checkout) */
.hf-shop .select2-container .select2-selection--single {
  height: 50px;
  border: 1.5px solid var(--hf-line-strong);
  border-radius: var(--hf-r-sm);
  background: var(--hf-surface);
}

.hf-shop .select2-container .select2-selection--single .select2-selection__rendered {
  padding: 0 44px 0 16px;
  color: var(--hf-ink);
  font-size: 16px;
  line-height: 47px;
}

.hf-shop .select2-container .select2-selection--single .select2-selection__arrow {
  top: 0;
  right: 10px;
  height: 47px;
}

.hf-shop .select2-container--focus .select2-selection--single,
.hf-shop .select2-container--open .select2-selection--single {
  border-color: var(--hf-primary);
  box-shadow: var(--hf-ring);
}

.hf-shop .select2-dropdown {
  border: 1.5px solid var(--hf-line-strong);
  border-radius: var(--hf-r-sm);
  overflow: hidden;
  box-shadow: var(--hf-shadow);
  font-family: var(--hf-font);
}

.hf-shop .select2-search--dropdown .select2-search__field {
  min-height: 40px;
  padding: 6px 12px;
  border: 1.5px solid var(--hf-line-strong);
  border-radius: 8px;
}

.hf-shop .select2-results__option {
  padding: 10px 14px;
}

.hf-shop .select2-container--default .select2-results__option--highlighted[aria-selected],
.hf-shop .select2-container--default .select2-results__option--highlighted[data-selected] {
  background: var(--hf-primary);
}

/* ===========================================================================
 * Notices
 * ======================================================================== */

:is(.hf-shop.woocommerce, .hf-shop .woocommerce):not(#hf-boost) :is(.woocommerce-message, .woocommerce-info, .woocommerce-error),
.hf-shop .woocommerce-notices-wrapper :is(.woocommerce-message, .woocommerce-info, .woocommerce-error),
.hf-shop :is(.woocommerce-message, .woocommerce-info, .woocommerce-error) {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 16px;
  margin: 0 0 24px;
  padding: 16px 20px 16px 56px;
  border: 0;
  border-radius: var(--hf-r-md);
  background: var(--hf-blue-100);
  color: var(--hf-ink);
  font-size: 15px;
  line-height: 1.5;
  list-style: none;
}

.hf-shop :is(.woocommerce-message, .woocommerce-info, .woocommerce-error)::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 20px;
  width: 20px;
  height: 20px;
  transform: translateY(-50%);
  background: var(--hf-primary);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2a10 10 0 1 0 0 20 10 10 0 0 0 0-20Zm1 15h-2v-6h2v6Zm0-8h-2V7h2v2Z'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2a10 10 0 1 0 0 20 10 10 0 0 0 0-20Zm1 15h-2v-6h2v6Zm0-8h-2V7h2v2Z'/%3E%3C/svg%3E") center / contain no-repeat;
}

.hf-shop :is(.woocommerce-message, .woocommerce-info, .woocommerce-error)::after {
  display: none;
}

/* WooCommerce focuses notices for screen readers; they aren't controls. */
.hf-shop :is(.woocommerce-message, .woocommerce-info, .woocommerce-error):focus {
  outline: none;
}

.hf-shop .woocommerce-message,
:is(.hf-shop.woocommerce, .hf-shop .woocommerce):not(#hf-boost) .woocommerce-message {
  background: var(--hf-teal-100);
}

.hf-shop .woocommerce-message::before {
  background: var(--hf-green-hover);
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2a10 10 0 1 0 0 20 10 10 0 0 0 0-20Zm-1.4 14.2-4.3-4.3 1.4-1.4 2.9 2.9 6.1-6.1 1.4 1.4-7.5 7.5Z'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2a10 10 0 1 0 0 20 10 10 0 0 0 0-20Zm-1.4 14.2-4.3-4.3 1.4-1.4 2.9 2.9 6.1-6.1 1.4 1.4-7.5 7.5Z'/%3E%3C/svg%3E");
}

.hf-shop .woocommerce-error,
:is(.hf-shop.woocommerce, .hf-shop .woocommerce):not(#hf-boost) .woocommerce-error {
  background: var(--hf-orange-100);
}

.hf-shop .woocommerce-error::before {
  background: var(--hf-danger);
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2a10 10 0 1 0 0 20 10 10 0 0 0 0-20Zm1 15h-2v-2h2v2Zm0-4h-2V7h2v6Z'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2a10 10 0 1 0 0 20 10 10 0 0 0 0-20Zm1 15h-2v-2h2v2Zm0-4h-2V7h2v6Z'/%3E%3C/svg%3E");
}

.hf-shop .woocommerce-error li {
  margin: 0;
}

.hf-shop :is(.woocommerce-message, .woocommerce-info, .woocommerce-error) a:not(.button) {
  color: var(--hf-primary);
  font-weight: 500;
}

.hf-shop :is(.woocommerce-message, .woocommerce-info, .woocommerce-error) .button {
  order: 2;
  min-height: 40px;
  margin-left: auto;
  padding: 8px 20px;
  float: none;
  font-size: 15px;
}

/* ===========================================================================
 * Tables (cart, checkout review, orders)
 * ======================================================================== */

:is(.hf-shop.woocommerce, .hf-shop .woocommerce):not(#hf-boost) table.shop_table {
  width: 100%;
  margin: 0;
  border: 0;
  border-radius: var(--hf-r-lg);
  border-collapse: separate;
  border-spacing: 0;
  background: var(--hf-surface);
  overflow: hidden;
}

:is(.hf-shop.woocommerce, .hf-shop .woocommerce):not(#hf-boost) table.shop_table :is(th, td) {
  padding: 16px 20px;
  border: 0;
  border-top: 1px solid var(--hf-line);
  color: var(--hf-text);
  font-size: 15px;
  line-height: 1.4;
  vertical-align: middle;
}

:is(.hf-shop.woocommerce, .hf-shop .woocommerce):not(#hf-boost) table.shop_table :is(th, td),
:is(.hf-shop.woocommerce, .hf-shop .woocommerce):not(#hf-boost) table.shop_table tbody tr:hover > :is(th, td) {
  background-color: transparent;
}

:is(.hf-shop.woocommerce, .hf-shop .woocommerce):not(#hf-boost) table.shop_table thead th {
  border-top: 0;
  color: var(--hf-muted);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

:is(.hf-shop.woocommerce, .hf-shop .woocommerce):not(#hf-boost) table.shop_table tbody tr:first-child :is(th, td) {
  border-top: 0;
}

:is(.hf-shop.woocommerce, .hf-shop .woocommerce):not(#hf-boost) table.shop_table thead + tbody tr:first-child :is(th, td) {
  border-top: 1px solid var(--hf-line);
}

:is(.hf-shop.woocommerce, .hf-shop .woocommerce):not(#hf-boost) table.shop_table tfoot :is(th, td) {
  font-weight: 500;
}

:is(.hf-shop.woocommerce, .hf-shop .woocommerce):not(#hf-boost) table.shop_table :is(th, td) strong {
  font-weight: 600;
}

:is(.hf-shop.woocommerce, .hf-shop .woocommerce):not(#hf-boost) table.shop_table .order-total :is(th, td) {
  color: var(--hf-ink);
  font-size: 18px;
  font-weight: 600;
}

:is(.hf-shop.woocommerce, .hf-shop .woocommerce):not(#hf-boost) table.shop_table .order-total .amount {
  color: var(--hf-primary);
}

:is(.hf-shop.woocommerce, .hf-shop .woocommerce):not(#hf-boost) table.shop_table a:not(.button):not(.remove) {
  color: var(--hf-ink);
  font-weight: 500;
  text-decoration: none;
}

:is(.hf-shop.woocommerce, .hf-shop .woocommerce):not(#hf-boost) table.shop_table a:not(.button):not(.remove):hover {
  color: var(--hf-primary);
}

:is(.hf-shop.woocommerce, .hf-shop .woocommerce):not(#hf-boost) table.shop_table .variation,
:is(.hf-shop.woocommerce, .hf-shop .woocommerce):not(#hf-boost) table.shop_table .wc-item-meta {
  margin: 4px 0 0;
  color: var(--hf-muted);
  font-size: 14px;
}

:is(.hf-shop.woocommerce, .hf-shop .woocommerce):not(#hf-boost) table.shop_table :is(.variation, .wc-item-meta) :is(dt, dd, p, li) {
  display: inline;
  margin: 0;
  font-weight: 400;
}

:is(.hf-shop.woocommerce, .hf-shop .woocommerce):not(#hf-boost) table.shop_table .wc-item-meta {
  padding: 0;
  list-style: none;
}

/* ===========================================================================
 * Cart
 * ======================================================================== */

.hf-shop.woocommerce-cart .page-content > .woocommerce:has(> form.woocommerce-cart-form) {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(320px, 400px);
  gap: 32px;
  align-items: start;
}

.hf-shop.woocommerce-cart .page-content > .woocommerce > .woocommerce-notices-wrapper {
  grid-column: 1 / -1;
}

.hf-shop.woocommerce-cart .page-content > .woocommerce > .woocommerce-notices-wrapper:empty {
  display: none;
}

.hf-shop .woocommerce-cart-form {
  margin: 0;
}

:is(.hf-shop.woocommerce, .hf-shop .woocommerce):not(#hf-boost) table.cart td.product-thumbnail {
  width: 96px;
  padding-right: 4px;
}

:is(.hf-shop.woocommerce, .hf-shop .woocommerce):not(#hf-boost) table.cart td.product-thumbnail a {
  display: block;
  width: 88px;
  border-radius: var(--hf-r-sm);
  background: var(--hf-tile);
  overflow: hidden;
}

:is(.hf-shop.woocommerce, .hf-shop .woocommerce):not(#hf-boost) table.cart img {
  display: block;
  width: 88px;
  height: 88px;
  object-fit: cover;
  mix-blend-mode: multiply;
}

:is(.hf-shop.woocommerce, .hf-shop .woocommerce):not(#hf-boost) table.cart td.product-name {
  font-size: 16px;
}

:is(.hf-shop.woocommerce, .hf-shop .woocommerce):not(#hf-boost) table.cart td.product-name > a {
  font-size: 16px;
  font-weight: 600;
}

:is(.hf-shop.woocommerce, .hf-shop .woocommerce):not(#hf-boost) table.cart :is(td.product-price, td.product-subtotal) {
  font-weight: 500;
  white-space: nowrap;
}

:is(.hf-shop.woocommerce, .hf-shop .woocommerce):not(#hf-boost) table.cart td.product-subtotal {
  color: var(--hf-ink);
  font-weight: 600;
}

:is(.hf-shop.woocommerce, .hf-shop .woocommerce):not(#hf-boost) table.cart td.product-remove {
  width: 40px;
  padding-right: 0;
}

:is(.hf-shop.woocommerce, .hf-shop .woocommerce):not(#hf-boost) table.cart a.remove {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: var(--hf-r-pill);
  background: transparent;
  color: var(--hf-muted) !important;
  font-size: 22px;
  font-weight: 400;
  line-height: 1;
  transition: background-color 0.15s, color 0.15s;
}

:is(.hf-shop.woocommerce, .hf-shop .woocommerce):not(#hf-boost) table.cart a.remove:hover {
  background: var(--hf-orange-100);
  color: var(--hf-danger) !important;
}

:is(.hf-shop.woocommerce, .hf-shop .woocommerce):not(#hf-boost) table.cart .quantity.hf-qty {
  height: 46px;
}

:is(.hf-shop.woocommerce, .hf-shop .woocommerce):not(#hf-boost) table.cart .quantity.hf-qty .hf-qty__btn {
  width: 34px;
  height: 34px;
  font-size: 18px;
}

:is(.hf-shop.woocommerce, .hf-shop .woocommerce):not(#hf-boost) table.cart .quantity.hf-qty input.qty {
  width: 36px;
  font-size: 16px;
}

:is(.hf-shop.woocommerce, .hf-shop .woocommerce):not(#hf-boost) table.cart td.actions {
  padding: 16px 20px;
  background: #FBFAF8;
}

:is(.hf-shop.woocommerce, .hf-shop .woocommerce):not(#hf-boost) table.cart td.actions .coupon {
  display: flex;
  align-items: center;
  gap: 10px;
}

:is(.hf-shop.woocommerce, .hf-shop .woocommerce):not(#hf-boost) table.cart td.actions .coupon .input-text {
  width: 200px;
  min-height: 48px;
  margin: 0;
  float: none;
}

:is(.hf-shop.woocommerce, .hf-shop .woocommerce):not(#hf-boost) table.cart td.actions .coupon .button,
:is(.hf-shop.woocommerce, .hf-shop .woocommerce):not(#hf-boost) table.cart td.actions > .button {
  float: none;
  min-height: 48px;
  padding: 10px 20px;
  font-size: 15px;
}

/* Quantities save on their own (shop.js clicks this button), so it's kept
   in the form but not shown. */
:is(.hf-shop.woocommerce, .hf-shop .woocommerce):not(#hf-boost) table.cart td.actions > button[name="update_cart"] {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  min-height: 0 !important;
  padding: 0 !important;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

:is(.hf-shop.woocommerce, .hf-shop .woocommerce):not(#hf-boost) table.cart td.actions .coupon .input-text {
  min-width: 0;
}

/* Totals */
:is(.hf-shop.woocommerce, .hf-shop .woocommerce):not(#hf-boost) .cart-collaterals {
  position: sticky;
  top: calc(var(--hf-header-h) + 24px);
  width: 100%;
}

:is(.hf-shop.woocommerce, .hf-shop .woocommerce):not(#hf-boost) .cart-collaterals::before,
:is(.hf-shop.woocommerce, .hf-shop .woocommerce):not(#hf-boost) .cart-collaterals::after {
  display: none;
}

:is(.hf-shop.woocommerce, .hf-shop .woocommerce):not(#hf-boost) .cart-collaterals .cart_totals {
  float: none;
  width: 100%;
  padding: 28px;
  border-radius: var(--hf-r-lg);
  background: var(--hf-surface);
  box-sizing: border-box;
}

:is(.hf-shop.woocommerce, .hf-shop .woocommerce):not(#hf-boost) .cart-collaterals .cart_totals > h2 {
  margin: 0 0 12px;
  font-size: 22px;
}

:is(.hf-shop.woocommerce, .hf-shop .woocommerce):not(#hf-boost) .cart_totals table.shop_table {
  border-radius: 0;
}

/* Cart totals and the checkout summary are label → value lists: shown as
   flex rows (not table columns) so the shipping row can use the full width. */
:is(.hf-shop.woocommerce, .hf-shop .woocommerce):not(#hf-boost) :is(.cart_totals table.shop_table, table.woocommerce-checkout-review-order-table),
:is(.hf-shop.woocommerce, .hf-shop .woocommerce):not(#hf-boost) :is(.cart_totals table.shop_table, table.woocommerce-checkout-review-order-table) :is(thead, tbody, tfoot) {
  display: block;
  width: 100%;
}

:is(.hf-shop.woocommerce, .hf-shop .woocommerce):not(#hf-boost) :is(.cart_totals table.shop_table, table.woocommerce-checkout-review-order-table) tr {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 16px;
  padding: 14px 0;
  border-top: 1px solid var(--hf-line);
}

:is(.hf-shop.woocommerce, .hf-shop .woocommerce):not(#hf-boost) :is(.cart_totals table.shop_table tbody, table.woocommerce-checkout-review-order-table thead) tr:first-child {
  border-top: 0;
}

:is(.hf-shop.woocommerce, .hf-shop .woocommerce):not(#hf-boost) :is(.cart_totals table.shop_table, table.woocommerce-checkout-review-order-table) tr :is(th, td) {
  display: block;
  width: auto;
  padding: 0;
  border: 0;
  background: none;
}

/* The generic "first row after the header" cell border would draw a short
   line under the first product here; the row itself has the border. */
:is(.hf-shop.woocommerce, .hf-shop .woocommerce):not(#hf-boost) table.woocommerce-checkout-review-order-table thead + tbody tr:first-child :is(th, td) {
  border-top: 0;
}

:is(.hf-shop.woocommerce, .hf-shop .woocommerce):not(#hf-boost) :is(.cart_totals table.shop_table, table.woocommerce-checkout-review-order-table) tr td::before {
  display: none;
}

:is(.hf-shop.woocommerce, .hf-shop .woocommerce):not(#hf-boost) :is(.cart_totals table.shop_table, table.woocommerce-checkout-review-order-table) tr th {
  flex: none;
  color: var(--hf-muted);
  font-weight: 500;
}

:is(.hf-shop.woocommerce, .hf-shop .woocommerce):not(#hf-boost) :is(.cart_totals table.shop_table, table.woocommerce-checkout-review-order-table) tr td {
  flex: 1;
  text-align: right !important;
}

:is(.hf-shop.woocommerce, .hf-shop .woocommerce):not(#hf-boost) table.woocommerce-checkout-review-order-table thead th {
  font-size: 13px;
}

:is(.hf-shop.woocommerce, .hf-shop .woocommerce):not(#hf-boost) table.woocommerce-checkout-review-order-table tbody td.product-name {
  flex: 1;
  text-align: left !important;
}

:is(.hf-shop.woocommerce, .hf-shop .woocommerce):not(#hf-boost) table.woocommerce-checkout-review-order-table tbody td.product-total {
  flex: none;
}

/* Shipping row: label on top, the options as cards underneath. */
:is(.hf-shop.woocommerce, .hf-shop .woocommerce):not(#hf-boost) :is(.cart_totals table.shop_table, table.woocommerce-checkout-review-order-table) tr.woocommerce-shipping-totals {
  flex-direction: column;
  align-items: stretch;
  gap: 12px;
}

:is(.hf-shop.woocommerce, .hf-shop .woocommerce):not(#hf-boost) :is(.cart_totals table.shop_table, table.woocommerce-checkout-review-order-table) tr.woocommerce-shipping-totals td {
  text-align: left !important;
}

:is(.hf-shop.woocommerce, .hf-shop .woocommerce):not(#hf-boost) ul.woocommerce-shipping-methods {
  display: grid;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
  text-align: left;
}

:is(.hf-shop.woocommerce, .hf-shop .woocommerce):not(#hf-boost) ul.woocommerce-shipping-methods li {
  position: relative;
  margin: 0;
  padding: 0;
  list-style: none;
  text-indent: 0;
}

:is(.hf-shop.woocommerce, .hf-shop .woocommerce):not(#hf-boost) ul.woocommerce-shipping-methods li input[type="radio"] {
  position: absolute;
  top: 50%;
  left: 16px;
  width: 18px;
  height: 18px;
  margin: 0;
  transform: translateY(-50%);
  accent-color: var(--hf-primary);
  cursor: pointer;
}

:is(.hf-shop.woocommerce, .hf-shop .woocommerce):not(#hf-boost) ul.woocommerce-shipping-methods li label {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: baseline;
  column-gap: 14px;
  row-gap: 2px;
  margin: 0;
  padding: 12px 16px 12px 46px;
  border: 1.5px solid var(--hf-line-strong);
  border-radius: 14px;
  background: var(--hf-surface);
  color: var(--hf-ink);
  font-size: 15px;
  font-weight: 400;
  line-height: 1.35;
  cursor: pointer;
  transition: border-color 0.15s, background-color 0.15s, box-shadow 0.15s;
}

/* Only one option: WooCommerce prints a hidden input, no radio. */
:is(.hf-shop.woocommerce, .hf-shop .woocommerce):not(#hf-boost) ul.woocommerce-shipping-methods li:has(input[type="hidden"]) label {
  padding-left: 16px;
  cursor: default;
}

:is(.hf-shop.woocommerce, .hf-shop .woocommerce):not(#hf-boost) ul.woocommerce-shipping-methods li label:hover {
  border-color: #B7B0A6;
}

:is(.hf-shop.woocommerce, .hf-shop .woocommerce):not(#hf-boost) ul.woocommerce-shipping-methods li:has(input:checked) label {
  border-color: var(--hf-primary);
  background: #F4F4FD;
  box-shadow: inset 0 0 0 1px var(--hf-primary);
}

:is(.hf-shop.woocommerce, .hf-shop .woocommerce):not(#hf-boost) ul.woocommerce-shipping-methods li:has(input:focus-visible) label {
  box-shadow: var(--hf-ring);
}

:is(.hf-shop.woocommerce, .hf-shop .woocommerce):not(#hf-boost) ul.woocommerce-shipping-methods .hf-ship__name {
  grid-column: 1;
  font-weight: 600;
}

:is(.hf-shop.woocommerce, .hf-shop .woocommerce):not(#hf-boost) ul.woocommerce-shipping-methods .hf-ship__eta {
  grid-column: 1 / -1;
  color: var(--hf-muted);
  font-size: 13px;
}

:is(.hf-shop.woocommerce, .hf-shop .woocommerce):not(#hf-boost) ul.woocommerce-shipping-methods .hf-ship__price {
  grid-column: 2;
  grid-row: 1;
  font-weight: 600;
  white-space: nowrap;
}

:is(.hf-shop.woocommerce, .hf-shop .woocommerce):not(#hf-boost) ul.woocommerce-shipping-methods .hf-ship__price .amount {
  font-weight: 600;
}

/* "Shipping to CA. Change address" on one line under the options. */
:is(.hf-shop.woocommerce, .hf-shop .woocommerce):not(#hf-boost) .woocommerce-shipping-totals .woocommerce-shipping-destination {
  display: inline;
  margin: 0;
  color: var(--hf-muted);
  font-size: 14px;
}

:is(.hf-shop.woocommerce, .hf-shop .woocommerce):not(#hf-boost) .woocommerce-shipping-totals ul.woocommerce-shipping-methods + .woocommerce-shipping-destination {
  display: inline-block;
  margin-top: 10px;
}

:is(.hf-shop.woocommerce, .hf-shop .woocommerce):not(#hf-boost) .woocommerce-shipping-totals .woocommerce-shipping-destination strong {
  color: var(--hf-ink);
  font-weight: 600;
}

:is(.hf-shop.woocommerce, .hf-shop .woocommerce):not(#hf-boost) .cart_totals .woocommerce-shipping-calculator {
  display: inline;
  margin: 0 0 0 6px;
  font-size: 14px;
}

:is(.hf-shop.woocommerce, .hf-shop .woocommerce):not(#hf-boost) .cart_totals table.shop_table a.shipping-calculator-button {
  color: var(--hf-primary);
  font-weight: 500;
}

:is(.hf-shop.woocommerce, .hf-shop .woocommerce):not(#hf-boost) .cart_totals .shipping-calculator-button::after {
  display: none;
}

:is(.hf-shop.woocommerce, .hf-shop .woocommerce):not(#hf-boost) .cart_totals .shipping-calculator-form {
  margin-top: 12px;
  text-align: left;
}

:is(.hf-shop.woocommerce, .hf-shop .woocommerce):not(#hf-boost) .wc-proceed-to-checkout {
  padding: 20px 0 0;
}

:is(.hf-shop.woocommerce, .hf-shop .woocommerce):not(#hf-boost) .wc-proceed-to-checkout a.checkout-button {
  display: flex;
  width: 100%;
  min-height: 56px;
  margin: 0;
  font-size: 17px;
}

:is(.hf-shop.woocommerce, .hf-shop .woocommerce):not(#hf-boost) .wc-proceed-to-checkout a.hf-continue {
  display: block;
  margin-top: 14px;
  color: var(--hf-primary);
  font-size: 15px;
  font-weight: 500;
  text-align: center;
  text-decoration: none;
}

:is(.hf-shop.woocommerce, .hf-shop .woocommerce):not(#hf-boost) .wc-proceed-to-checkout a.hf-continue:hover {
  text-decoration: underline;
  text-underline-offset: 4px;
}

/* Empty cart */
:is(.hf-shop.woocommerce, .hf-shop .woocommerce):not(#hf-boost) .cart-empty.woocommerce-info {
  justify-content: center;
  padding: 48px 24px;
  background: var(--hf-surface);
  font-size: 18px;
  text-align: center;
}

:is(.hf-shop.woocommerce, .hf-shop .woocommerce):not(#hf-boost) .cart-empty.woocommerce-info::before {
  display: none;
}

:is(.hf-shop.woocommerce, .hf-shop .woocommerce):not(#hf-boost) .return-to-shop {
  margin: 0;
  text-align: center;
}

@media (max-width: 960px) {
  .hf-shop.woocommerce-cart .page-content > .woocommerce:has(> form.woocommerce-cart-form) {
    grid-template-columns: minmax(0, 1fr);
  }

  :is(.hf-shop.woocommerce, .hf-shop .woocommerce):not(#hf-boost) .cart-collaterals {
    position: static;
  }
}

/* WooCommerce's responsive cart table (<= 768px) */
@media (max-width: 768px) {
  :is(.hf-shop.woocommerce, .hf-shop .woocommerce):not(#hf-boost) table.shop_table_responsive tr,
  .hf-shop .woocommerce-page table.shop_table_responsive tr {
    display: grid;
    grid-template-columns: 88px minmax(0, 1fr);
    column-gap: 16px;
    padding: 16px;
    border-top: 1px solid var(--hf-line);
  }

  :is(.hf-shop.woocommerce, .hf-shop .woocommerce):not(#hf-boost) table.shop_table_responsive tr:first-child {
    border-top: 0;
  }

  :is(.hf-shop.woocommerce, .hf-shop .woocommerce):not(#hf-boost) table.shop_table_responsive tr td,
  .hf-shop .woocommerce-page table.shop_table_responsive tr td {
    display: flex;
    justify-content: space-between;
    align-items: center;
    grid-column: 2;
    padding: 4px 0;
    border: 0 !important;
    background: none !important;
    text-align: right !important;
  }

  :is(.hf-shop.woocommerce, .hf-shop .woocommerce):not(#hf-boost) table.cart tr.cart_item td.product-thumbnail {
    display: block;
    grid-column: 1;
    grid-row: 1 / span 5;
    width: auto;
    padding: 0;
  }

  :is(.hf-shop.woocommerce, .hf-shop .woocommerce):not(#hf-boost) table.cart tr.cart_item td.product-remove {
    grid-column: 2;
    justify-content: flex-end;
    width: auto;
    order: 0;
  }

  :is(.hf-shop.woocommerce, .hf-shop .woocommerce):not(#hf-boost) table.shop_table_responsive tr td::before {
    color: var(--hf-muted);
    font-size: 14px;
    font-weight: 500;
  }

  :is(.hf-shop.woocommerce, .hf-shop .woocommerce):not(#hf-boost) table.cart tr.cart_item td.product-name {
    display: block;
    text-align: left !important;
  }

  :is(.hf-shop.woocommerce, .hf-shop .woocommerce):not(#hf-boost) table.cart tr.cart_item td.product-name::before,
  :is(.hf-shop.woocommerce, .hf-shop .woocommerce):not(#hf-boost) table.cart tr.cart_item td.product-remove::before,
  :is(.hf-shop.woocommerce, .hf-shop .woocommerce):not(#hf-boost) table.cart tr.cart_item td.product-thumbnail::before {
    display: none;
  }

  :is(.hf-shop.woocommerce, .hf-shop .woocommerce):not(#hf-boost) table.cart tr:has(td.actions) {
    display: block;
    background: #FBFAF8;
  }

  :is(.hf-shop.woocommerce, .hf-shop .woocommerce):not(#hf-boost) table.cart td.actions {
    display: block !important;
    padding: 0 !important;
  }

  :is(.hf-shop.woocommerce, .hf-shop .woocommerce):not(#hf-boost) table.cart td.actions::before {
    display: none;
  }

  :is(.hf-shop.woocommerce, .hf-shop .woocommerce):not(#hf-boost) table.cart td.actions .coupon {
    padding-bottom: 12px;
  }

  :is(.hf-shop.woocommerce, .hf-shop .woocommerce):not(#hf-boost) table.shop_table_responsive.cart,
  :is(.hf-shop.woocommerce, .hf-shop .woocommerce):not(#hf-boost) table.shop_table_responsive.cart tbody {
    display: block;
    width: 100%;
  }

  :is(.hf-shop.woocommerce, .hf-shop .woocommerce):not(#hf-boost) table.cart td.actions .coupon .input-text {
    flex: 1;
    width: auto;
    min-width: 0;
  }

  :is(.hf-shop.woocommerce, .hf-shop .woocommerce):not(#hf-boost) table.cart td.actions .coupon {
    padding-bottom: 0;
  }

  :is(.hf-shop.woocommerce, .hf-shop .woocommerce):not(#hf-boost) table.cart td.actions .coupon .button {
    padding-inline: 16px;
  }

  :is(.hf-shop.woocommerce, .hf-shop .woocommerce):not(#hf-boost) table.cart td.actions .coupon .input-text {
    padding-inline: 12px;
    font-size: 15px;
  }

}

/* ===========================================================================
 * Checkout
 * ======================================================================== */

:is(.hf-shop.woocommerce, .hf-shop .woocommerce):not(#hf-boost) form.checkout.woocommerce-checkout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(340px, 440px);
  grid-template-areas:
    "details heading"
    "details review";
  grid-template-rows: auto 1fr;
  column-gap: 32px;
  align-items: start;
}

:is(.hf-shop.woocommerce, .hf-shop .woocommerce):not(#hf-boost) form.checkout > .woocommerce-NoticeGroup {
  grid-column: 1 / -1;
}

:is(.hf-shop.woocommerce, .hf-shop .woocommerce):not(#hf-boost) form.checkout::before,
:is(.hf-shop.woocommerce, .hf-shop .woocommerce):not(#hf-boost) form.checkout::after {
  display: none;
}

:is(.hf-shop.woocommerce, .hf-shop .woocommerce):not(#hf-boost) form.checkout #customer_details {
  grid-area: details;
  display: grid;
  gap: 24px;
}

:is(.hf-shop.woocommerce, .hf-shop .woocommerce):not(#hf-boost) form.checkout #customer_details::before,
:is(.hf-shop.woocommerce, .hf-shop .woocommerce):not(#hf-boost) form.checkout #customer_details::after {
  display: none;
}

:is(.hf-shop.woocommerce, .hf-shop .woocommerce):not(#hf-boost) form.checkout #customer_details :is(.col-1, .col-2) {
  float: none;
  width: auto;
}

:is(.hf-shop.woocommerce, .hf-shop .woocommerce):not(#hf-boost) form.checkout #customer_details .col-2 > .woocommerce-shipping-fields:not(:empty) {
  margin-bottom: 24px;
}

:is(.hf-shop.woocommerce, .hf-shop .woocommerce):not(#hf-boost) form.checkout :is(.woocommerce-billing-fields, .woocommerce-shipping-fields, .woocommerce-additional-fields) {
  padding: 28px;
  border-radius: var(--hf-r-lg);
  background: var(--hf-surface);
}

:is(.hf-shop.woocommerce, .hf-shop .woocommerce):not(#hf-boost) form.checkout .woocommerce-shipping-fields:not(:has(#ship-to-different-address input:checked)) {
  padding-block: 20px;
}

:is(.hf-shop.woocommerce, .hf-shop .woocommerce):not(#hf-boost) form.checkout .woocommerce-shipping-fields:empty {
  display: none;
}

:is(.hf-shop.woocommerce, .hf-shop .woocommerce):not(#hf-boost) form.checkout h3 {
  margin: 0 0 20px;
  font-size: 22px;
  line-height: 1.25;
}

:is(.hf-shop.woocommerce, .hf-shop .woocommerce):not(#hf-boost) form.checkout #ship-to-different-address {
  margin: 0;
  font-size: 18px;
}

:is(.hf-shop.woocommerce, .hf-shop .woocommerce):not(#hf-boost) form.checkout #ship-to-different-address label {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  cursor: pointer;
}

:is(.hf-shop.woocommerce, .hf-shop .woocommerce):not(#hf-boost) form.checkout .shipping_address {
  margin-top: 24px;
}

:is(.hf-shop.woocommerce, .hf-shop .woocommerce):not(#hf-boost) form.checkout :is(.woocommerce-billing-fields__field-wrapper, .woocommerce-shipping-fields__field-wrapper) {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: 16px;
}

:is(.hf-shop.woocommerce, .hf-shop .woocommerce):not(#hf-boost) form.checkout :is(.woocommerce-billing-fields__field-wrapper, .woocommerce-shipping-fields__field-wrapper) .form-row {
  grid-column: 1 / -1;
  float: none;
  width: auto;
}

:is(.hf-shop.woocommerce, .hf-shop .woocommerce):not(#hf-boost) form.checkout :is(.woocommerce-billing-fields__field-wrapper, .woocommerce-shipping-fields__field-wrapper) .form-row-first {
  grid-column: 1;
}

:is(.hf-shop.woocommerce, .hf-shop .woocommerce):not(#hf-boost) form.checkout :is(.woocommerce-billing-fields__field-wrapper, .woocommerce-shipping-fields__field-wrapper) .form-row-last {
  grid-column: 2;
}

:is(.hf-shop.woocommerce, .hf-shop .woocommerce):not(#hf-boost) form.checkout .woocommerce-additional-fields .form-row {
  margin-bottom: 0;
}

:is(.hf-shop.woocommerce, .hf-shop .woocommerce):not(#hf-boost) form.checkout #order_review_heading {
  grid-area: heading;
  margin: 0;
  padding: 28px 28px 8px;
  border-radius: var(--hf-r-lg) var(--hf-r-lg) 0 0;
  background: var(--hf-surface);
}

:is(.hf-shop.woocommerce, .hf-shop .woocommerce):not(#hf-boost) form.checkout #order_review {
  grid-area: review;
  float: none;
  width: auto;
  padding: 0 28px 28px;
  border-radius: 0 0 var(--hf-r-lg) var(--hf-r-lg);
  background: var(--hf-surface);
}

:is(.hf-shop.woocommerce, .hf-shop .woocommerce):not(#hf-boost) table.woocommerce-checkout-review-order-table {
  border-radius: 0;
}


:is(.hf-shop.woocommerce, .hf-shop .woocommerce):not(#hf-boost) table.woocommerce-checkout-review-order-table tbody td.product-name {
  color: var(--hf-ink);
  font-weight: 500;
}

:is(.hf-shop.woocommerce, .hf-shop .woocommerce):not(#hf-boost) table.woocommerce-checkout-review-order-table .product-quantity {
  color: var(--hf-muted);
  font-weight: 500;
}

:is(.hf-shop.woocommerce, .hf-shop .woocommerce):not(#hf-boost) table.woocommerce-checkout-review-order-table tfoot th {
  color: var(--hf-muted);
  font-weight: 500;
}

:is(.hf-shop.woocommerce, .hf-shop .woocommerce):not(#hf-boost) #payment {
  margin-top: 8px;
  border-radius: 0;
  background: none;
}

:is(.hf-shop.woocommerce, .hf-shop .woocommerce):not(#hf-boost) #payment ul.payment_methods {
  padding: 16px 0;
  border-bottom: 1px solid var(--hf-line);
  border-top: 1px solid var(--hf-line);
}

:is(.hf-shop.woocommerce, .hf-shop .woocommerce):not(#hf-boost) #payment ul.payment_methods li {
  list-style: none;
  font-size: 15px;
}

:is(.hf-shop.woocommerce, .hf-shop .woocommerce):not(#hf-boost) #payment ul.payment_methods li:not(.woocommerce-notice) {
  padding: 8px 0;
}

:is(.hf-shop.woocommerce, .hf-shop .woocommerce):not(#hf-boost) #payment ul.payment_methods li .woocommerce-info,
:is(.hf-shop.woocommerce, .hf-shop .woocommerce):not(#hf-boost) #payment ul.payment_methods li.woocommerce-notice {
  margin: 0;
  padding: 14px 16px 14px 48px;
  font-size: 14px;
}

:is(.hf-shop.woocommerce, .hf-shop .woocommerce):not(#hf-boost) #payment ul.payment_methods li.woocommerce-notice::before,
:is(.hf-shop.woocommerce, .hf-shop .woocommerce):not(#hf-boost) #payment ul.payment_methods li .woocommerce-info::before {
  left: 16px;
}

:is(.hf-shop.woocommerce, .hf-shop .woocommerce):not(#hf-boost) #payment div.payment_box {
  margin: 12px 0 4px;
  padding: 16px;
  border-radius: var(--hf-r-sm);
  background: var(--hf-bg);
  color: var(--hf-text);
  font-size: 14px;
}

:is(.hf-shop.woocommerce, .hf-shop .woocommerce):not(#hf-boost) #payment div.payment_box::before {
  display: none;
}

:is(.hf-shop.woocommerce, .hf-shop .woocommerce):not(#hf-boost) #payment div.form-row.place-order {
  margin: 0;
  padding: 20px 0 0;
}

:is(.hf-shop.woocommerce, .hf-shop .woocommerce):not(#hf-boost) .woocommerce-privacy-policy-text {
  margin-bottom: 16px;
  color: var(--hf-muted);
  font-size: 13px;
  line-height: 1.5;
}

:is(.hf-shop.woocommerce, .hf-shop .woocommerce):not(#hf-boost) .woocommerce-privacy-policy-text p {
  margin: 0;
}

:is(.hf-shop.woocommerce, .hf-shop .woocommerce):not(#hf-boost) .woocommerce-privacy-policy-text a,
:is(.hf-shop.woocommerce, .hf-shop .woocommerce):not(#hf-boost) .woocommerce-terms-and-conditions-link {
  color: var(--hf-primary);
}

:is(.hf-shop.woocommerce, .hf-shop .woocommerce):not(#hf-boost) .woocommerce-terms-and-conditions-wrapper .form-row {
  margin-bottom: 16px;
}

:is(.hf-shop.woocommerce, .hf-shop .woocommerce):not(#hf-boost) .woocommerce-terms-and-conditions-wrapper label.woocommerce-form__label-for-checkbox {
  display: block;
  position: relative;
  padding-left: 30px;
  font-size: 15px;
  line-height: 1.45;
}

:is(.hf-shop.woocommerce, .hf-shop .woocommerce):not(#hf-boost) .woocommerce-terms-and-conditions-wrapper label.woocommerce-form__label-for-checkbox .required {
  position: static;
  float: none;
  display: inline;
  margin-left: 2px;
}

:is(.hf-shop.woocommerce, .hf-shop .woocommerce):not(#hf-boost) .woocommerce-terms-and-conditions-wrapper label.woocommerce-form__label-for-checkbox input[type="checkbox"] {
  position: absolute;
  top: 1px;
  left: 0;
}

:is(.hf-shop.woocommerce, .hf-shop .woocommerce):not(#hf-boost) #payment #place_order {
  float: none;
  width: 100%;
  min-height: 56px;
  font-size: 17px;
}

/* Coupon toggle / form on checkout */
:is(.hf-shop.woocommerce, .hf-shop .woocommerce):not(#hf-boost) .woocommerce-form-coupon-toggle .woocommerce-info {
  background: var(--hf-surface);
}

:is(.hf-shop.woocommerce, .hf-shop .woocommerce):not(#hf-boost) form.checkout_coupon {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  margin: -8px 0 24px;
  padding: 20px;
  border: 0;
  border-radius: var(--hf-r-md);
  background: var(--hf-surface);
}

:is(.hf-shop.woocommerce, .hf-shop .woocommerce):not(#hf-boost) form.checkout_coupon > p:first-child {
  flex-basis: 100%;
  margin: 0;
  color: var(--hf-muted);
  font-size: 14px;
}

:is(.hf-shop.woocommerce, .hf-shop .woocommerce):not(#hf-boost) form.checkout_coupon .form-row {
  float: none;
  width: auto;
  margin: 0;
}

:is(.hf-shop.woocommerce, .hf-shop .woocommerce):not(#hf-boost) form.checkout_coupon .form-row-first {
  flex: 1;
  max-width: 320px;
}

:is(.hf-shop.woocommerce, .hf-shop .woocommerce):not(#hf-boost) form.checkout_coupon .clear {
  display: none;
}

@media (max-width: 960px) {
  :is(.hf-shop.woocommerce, .hf-shop .woocommerce):not(#hf-boost) form.checkout.woocommerce-checkout {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas:
      "details"
      "heading"
      "review";
  }

  :is(.hf-shop.woocommerce, .hf-shop .woocommerce):not(#hf-boost) form.checkout #order_review_heading {
    margin-top: 24px;
  }
}

@media (max-width: 600px) {
  :is(.hf-shop.woocommerce, .hf-shop .woocommerce):not(#hf-boost) form.checkout :is(.woocommerce-billing-fields, .woocommerce-shipping-fields, .woocommerce-additional-fields) {
    padding: 20px;
  }

  :is(.hf-shop.woocommerce, .hf-shop .woocommerce):not(#hf-boost) form.checkout #order_review_heading {
    padding: 20px 20px 4px;
  }

  :is(.hf-shop.woocommerce, .hf-shop .woocommerce):not(#hf-boost) form.checkout #order_review {
    padding: 0 20px 20px;
  }

  :is(.hf-shop.woocommerce, .hf-shop .woocommerce):not(#hf-boost) form.checkout :is(.woocommerce-billing-fields__field-wrapper, .woocommerce-shipping-fields__field-wrapper) .form-row:is(.form-row-first, .form-row-last) {
    grid-column: 1 / -1;
  }
}

/* ===========================================================================
 * Order received / order details
 * ======================================================================== */

:is(.hf-shop.woocommerce, .hf-shop .woocommerce):not(#hf-boost) .woocommerce-order {
  display: grid;
  gap: 24px;
}

:is(.hf-shop.woocommerce, .hf-shop .woocommerce):not(#hf-boost) ul.woocommerce-order-overview {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 16px;
  margin: 0;
  padding: 24px;
  border-radius: var(--hf-r-lg);
  background: var(--hf-surface);
  list-style: none;
}

:is(.hf-shop.woocommerce, .hf-shop .woocommerce):not(#hf-boost) ul.woocommerce-order-overview::before,
:is(.hf-shop.woocommerce, .hf-shop .woocommerce):not(#hf-boost) ul.woocommerce-order-overview::after {
  display: none;
}

:is(.hf-shop.woocommerce, .hf-shop .woocommerce):not(#hf-boost) ul.woocommerce-order-overview li {
  float: none;
  margin: 0;
  padding: 0;
  border: 0;
  color: var(--hf-muted);
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

:is(.hf-shop.woocommerce, .hf-shop .woocommerce):not(#hf-boost) ul.woocommerce-order-overview li strong {
  display: block;
  margin-top: 6px;
  color: var(--hf-ink);
  font-size: 17px;
  letter-spacing: 0;
  text-transform: none;
}

:is(.hf-shop.woocommerce, .hf-shop .woocommerce):not(#hf-boost) .woocommerce-thankyou-order-received {
  margin: 0;
  padding: 20px 24px;
  border-radius: var(--hf-r-md);
  background: var(--hf-teal-100);
  color: var(--hf-ink);
  font-size: 18px;
  font-weight: 500;
}

:is(.hf-shop.woocommerce, .hf-shop .woocommerce):not(#hf-boost) :is(.woocommerce-order-details, .woocommerce-customer-details) {
  margin: 0;
}

:is(.hf-shop.woocommerce, .hf-shop .woocommerce):not(#hf-boost) :is(.woocommerce-order-details__title, .woocommerce-column__title) {
  margin: 0 0 16px;
  font-size: 22px;
}

:is(.hf-shop.woocommerce, .hf-shop .woocommerce):not(#hf-boost) .woocommerce-customer-details address {
  padding: 24px;
  border: 0;
  border-radius: var(--hf-r-lg);
  background: var(--hf-surface);
  font-style: normal;
  line-height: 1.6;
}

/* ===========================================================================
 * My account
 * ======================================================================== */

.hf-shop.woocommerce-account:not(.logged-in) .page-content > .woocommerce {
  max-width: 480px;
  margin-inline: auto;
}

.hf-shop.woocommerce-account:not(.logged-in) .site-main .page-header {
  max-width: 480px;
  margin-inline: auto;
}

.hf-shop.woocommerce-account .page-content > .woocommerce > h2 {
  margin: 0 0 16px;
  font-size: 24px;
}

:is(.hf-shop.woocommerce, .hf-shop .woocommerce):not(#hf-boost) form.woocommerce-form-login,
:is(.hf-shop.woocommerce, .hf-shop .woocommerce):not(#hf-boost) form.woocommerce-form-register,
:is(.hf-shop.woocommerce, .hf-shop .woocommerce):not(#hf-boost) form.woocommerce-ResetPassword,
:is(.hf-shop.woocommerce, .hf-shop .woocommerce):not(#hf-boost) form.lost_reset_password {
  margin: 0 0 24px;
  padding: 32px;
  border: 0;
  border-radius: var(--hf-r-lg);
  background: var(--hf-surface);
}

:is(.hf-shop.woocommerce, .hf-shop .woocommerce):not(#hf-boost) form.woocommerce-form-login .form-row:has(.woocommerce-form-login__submit) {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-top: 8px;
}

:is(.hf-shop.woocommerce, .hf-shop .woocommerce):not(#hf-boost) form.woocommerce-form-login .form-row:has(.woocommerce-form-login__submit)::before,
:is(.hf-shop.woocommerce, .hf-shop .woocommerce):not(#hf-boost) form.woocommerce-form-login .form-row:has(.woocommerce-form-login__submit)::after {
  display: none;
}

:is(.hf-shop.woocommerce, .hf-shop .woocommerce):not(#hf-boost) form.woocommerce-form-login .woocommerce-form-login__submit {
  float: none;
  order: 2;
  margin: 0;
}

:is(.hf-shop.woocommerce, .hf-shop .woocommerce):not(#hf-boost) form.woocommerce-form-login .lost_password {
  margin: 16px 0 0;
  font-size: 15px;
}

:is(.hf-shop.woocommerce, .hf-shop .woocommerce):not(#hf-boost) form.woocommerce-form-login .lost_password a,
:is(.hf-shop.woocommerce, .hf-shop .woocommerce):not(#hf-boost) form.lost_reset_password a {
  color: var(--hf-primary);
}

:is(.hf-shop.woocommerce, .hf-shop .woocommerce):not(#hf-boost) .password-input {
  display: block;
  position: relative;
}

:is(.hf-shop.woocommerce, .hf-shop .woocommerce):not(#hf-boost) .password-input .show-password-input {
  top: 50%;
  right: 12px;
  transform: translateY(-50%);
}

.hf-shop.woocommerce-account.logged-in .page-content > .woocommerce {
  display: grid;
  grid-template-columns: 240px minmax(0, 1fr);
  grid-template-areas:
    "notices notices"
    "nav content";
  column-gap: 40px;
  align-items: start;
}

/* WooCommerce's clearfix pseudo-elements became grid items and pushed the
   menu into the content column. */
.hf-shop.woocommerce-account.logged-in .page-content > .woocommerce::before,
.hf-shop.woocommerce-account.logged-in .page-content > .woocommerce::after {
  display: none;
}

.hf-shop.woocommerce-account.logged-in .page-content > .woocommerce > .woocommerce-notices-wrapper {
  grid-area: notices;
}

.hf-shop.woocommerce-account .woocommerce-MyAccount-navigation,
.hf-shop.woocommerce-account .woocommerce-MyAccount-content {
  float: none;
  width: auto;
}

.hf-shop.woocommerce-account .woocommerce-MyAccount-navigation {
  grid-area: nav;
  position: sticky;
  top: calc(var(--hf-header-h) + 24px);
}

.hf-shop.woocommerce-account .woocommerce-MyAccount-content {
  grid-area: content;
  min-width: 0;
  padding: 32px;
  border-radius: var(--hf-r-lg);
  background: var(--hf-surface);
  font-size: 16px;
  line-height: 1.6;
}

.hf-shop.woocommerce-account .woocommerce-MyAccount-navigation ul {
  display: grid;
  gap: 4px;
  margin: 0;
  padding: 12px;
  border-radius: var(--hf-r-lg);
  background: var(--hf-surface);
  list-style: none;
}

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

.hf-shop.woocommerce-account .woocommerce-MyAccount-navigation a {
  display: block;
  padding: 11px 16px;
  border-radius: var(--hf-r-sm);
  color: var(--hf-ink);
  font-weight: 500;
  text-decoration: none;
  white-space: nowrap;
  transition: background-color 0.15s, color 0.15s;
}

.hf-shop.woocommerce-account .woocommerce-MyAccount-navigation a:hover {
  background: var(--hf-bg);
  color: var(--hf-ink);
}

.hf-shop.woocommerce-account .woocommerce-MyAccount-navigation .is-active a {
  background: var(--hf-primary);
  color: #fff;
}

/* "Log out" set apart at the bottom of the menu. */
.hf-shop.woocommerce-account .woocommerce-MyAccount-navigation-link--customer-logout {
  margin-top: 6px !important;
  padding-top: 6px;
  border-top: 1px solid var(--hf-line);
}

.hf-shop.woocommerce-account .woocommerce-MyAccount-navigation-link--customer-logout a {
  color: var(--hf-muted);
}

.hf-shop.woocommerce-account .woocommerce-MyAccount-content > p:first-child {
  margin-top: 0;
}

.hf-shop.woocommerce-account .woocommerce-MyAccount-content a:not(.button) {
  color: var(--hf-primary);
}

.hf-shop.woocommerce-account .woocommerce-MyAccount-content :is(h2, h3) {
  margin: 0 0 16px;
  font-size: 22px;
}

/* Addresses: two cards side by side. */
:is(.hf-shop.woocommerce, .hf-shop .woocommerce):not(#hf-boost) .woocommerce-Addresses {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 20px;
  margin-top: 20px;
}

:is(.hf-shop.woocommerce, .hf-shop .woocommerce):not(#hf-boost) .woocommerce-Addresses::before,
:is(.hf-shop.woocommerce, .hf-shop .woocommerce):not(#hf-boost) .woocommerce-Addresses::after {
  display: none;
}

:is(.hf-shop.woocommerce, .hf-shop .woocommerce):not(#hf-boost) .woocommerce-Addresses .woocommerce-Address {
  float: none;
  width: auto;
  max-width: none;
  padding: 20px;
  border: 1px solid var(--hf-line);
  border-radius: var(--hf-r-md);
}

:is(.hf-shop.woocommerce, .hf-shop .woocommerce):not(#hf-boost) .woocommerce-Addresses .woocommerce-Address-title {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
}

:is(.hf-shop.woocommerce, .hf-shop .woocommerce):not(#hf-boost) .woocommerce-Addresses .woocommerce-Address-title::before,
:is(.hf-shop.woocommerce, .hf-shop .woocommerce):not(#hf-boost) .woocommerce-Addresses .woocommerce-Address-title::after {
  display: none;
}

:is(.hf-shop.woocommerce, .hf-shop .woocommerce):not(#hf-boost) .woocommerce-Addresses .woocommerce-Address-title :is(h2, h3) {
  margin: 0 0 10px;
  font-size: 18px;
}

:is(.hf-shop.woocommerce, .hf-shop .woocommerce):not(#hf-boost) .woocommerce-Addresses .woocommerce-Address-title .edit {
  float: none;
  font-size: 14px;
  font-weight: 500;
}

:is(.hf-shop.woocommerce, .hf-shop .woocommerce):not(#hf-boost) .woocommerce-Addresses address {
  font-style: normal;
  line-height: 1.6;
  color: var(--hf-text);
}

/* Account details / address forms inside the content card. */
.hf-shop.woocommerce-account .woocommerce-MyAccount-content form :is(fieldset) {
  margin: 24px 0 0;
  padding: 20px;
  border: 1px solid var(--hf-line);
  border-radius: var(--hf-r-md);
}

.hf-shop.woocommerce-account .woocommerce-MyAccount-content form legend {
  padding: 0 8px;
  font-weight: 600;
  color: var(--hf-ink);
}

.hf-shop.woocommerce-account .woocommerce-MyAccount-content form em {
  display: block;
  margin-top: 6px;
  color: var(--hf-muted);
  font-size: 13px;
}

@media (max-width: 820px) {
  .hf-shop.woocommerce-account.logged-in .page-content > .woocommerce {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas:
      "notices"
      "nav"
      "content";
    row-gap: 20px;
  }

  /* Phones: the menu is a row of pills that scrolls sideways. */
  .hf-shop.woocommerce-account .woocommerce-MyAccount-navigation {
    position: static;
    margin-inline: calc(var(--hf-gutter) * -1);
  }

  .hf-shop.woocommerce-account .woocommerce-MyAccount-navigation ul {
    display: flex;
    gap: 8px;
    padding: 0 var(--hf-gutter) 4px;
    overflow-x: auto;
    border-radius: 0;
    background: none;
    scrollbar-width: none;
  }

  .hf-shop.woocommerce-account .woocommerce-MyAccount-navigation ul::-webkit-scrollbar {
    display: none;
  }

  .hf-shop.woocommerce-account .woocommerce-MyAccount-navigation li {
    flex: none;
  }

  .hf-shop.woocommerce-account .woocommerce-MyAccount-navigation a {
    padding: 9px 16px;
    border: 1.5px solid var(--hf-line-strong);
    border-radius: var(--hf-r-pill);
    background: var(--hf-surface);
    font-size: 15px;
  }

  .hf-shop.woocommerce-account .woocommerce-MyAccount-navigation .is-active a {
    border-color: var(--hf-primary);
  }

  .hf-shop.woocommerce-account .woocommerce-MyAccount-navigation-link--customer-logout {
    margin-top: 0 !important;
    padding-top: 0;
    border-top: 0;
  }

  .hf-shop.woocommerce-account .woocommerce-MyAccount-content {
    padding: 22px;
  }
}

/* ===========================================================================
 * Content pages (Terms, Privacy...) built with the block / classic editor
 * ======================================================================== */

.hf-shop .site-main:not(.hf-main) .page-content {
  color: var(--hf-text);
  font-size: 17px;
  line-height: 1.65;
}

.hf-shop .site-main:not(.hf-main) .page-content > :is(p, ul, ol, h2, h3, h4) {
  max-width: 820px;
}

/* ===========================================================================
 * Footer
 * ======================================================================== */

.hf-shop .hf-footer {
  padding: clamp(56px, 7vw, 80px) 0 32px;
  background: var(--hf-footer);
  color: var(--hf-ink);
}

.hf-shop .hf-footer__top {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.5fr);
  gap: 48px 64px;
  padding-bottom: 48px;
}

.hf-shop .hf-footer__logo img {
  display: block;
  width: 150px;
  height: auto;
}

.hf-shop .hf-footer__brand p {
  max-width: 380px;
  margin: 20px 0 24px;
  color: var(--hf-text);
  font-size: 15px;
  line-height: 1.6;
}

.hf-shop .hf-footer__socials {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.hf-shop .hf-footer__socials a {
  display: block;
  border-radius: var(--hf-r-pill);
  transition: transform 0.2s var(--hf-ease);
}

.hf-shop .hf-footer__socials a:hover {
  transform: translateY(-2px);
}

.hf-shop .hf-footer__socials img {
  display: block;
  width: 40px;
  height: 40px;
}

.hf-shop .hf-footer__cols {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 32px;
}

.hf-shop .hf-footer__title {
  margin: 4px 0 16px;
  color: var(--hf-ink) !important;
  font-size: 16px !important;
  font-weight: 600;
  letter-spacing: 0;
}

.hf-shop .hf-footer__col ul {
  display: grid;
  gap: 10px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.hf-shop .hf-footer__col a {
  color: var(--hf-primary);
  font-size: 15px;
  text-decoration: none;
}

.hf-shop .hf-footer__col a:hover {
  color: var(--hf-primary-hover);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.hf-shop .hf-footer__bottom {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px 24px;
  padding-top: 24px;
  border-top: 1px solid rgba(45, 42, 165, 0.14);
  font-size: 14px;
}

.hf-shop .hf-footer__bottom p {
  margin: 0;
  color: var(--hf-text);
}

.hf-shop .hf-footer__bottom ul {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 24px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.hf-shop .hf-footer__bottom a {
  color: var(--hf-primary);
  text-decoration: none;
}

.hf-shop .hf-footer__bottom a:hover {
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* Metricool tracking pixel printed after the footer (BLANK/assets.php): as an
   inline image it added a 24px strip under the footer. Out of the flow, still loaded. */
.hf-shop > img[src*="tracker.metricool.com"] {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}

/* Logged-in deployment hash from functions.php */
.hf-shop .deployment-version {
  background: var(--hf-footer);
}

@media (max-width: 900px) {
  .hf-shop .hf-footer__top {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (max-width: 600px) {
  .hf-shop .hf-footer__cols {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 32px 16px;
  }

  .hf-shop .hf-footer__bottom {
    flex-direction: column;
    align-items: flex-start;
  }
}

/* ===========================================================================
 * Motion preferences
 * ======================================================================== */

@media (prefers-reduced-motion: reduce) {
  .hf-shop *,
  .hf-shop *::before,
  .hf-shop *::after {
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
  }
}