/* ==========================================================================
   Uptodate Store — storefront styles
   Tokens come from inc/dynamic-css.php (Theme Options) with fallbacks here.
   ========================================================================== */

:root {
  --utd-primary: #33A3BE;
  --utd-primary-dark: #2A8CA4;
  --utd-accent: #49B6D1;
  --utd-ink: #0E1C22;
  --utd-muted: #64757D;
  --utd-surface: #F5F8F9;
  --utd-border: #E4EAED;
  --utd-sale: #D94841;
  --utd-radius: 18px;
  --utd-base: 15px;
  --utd-font: "Plus Jakarta Sans", -apple-system, sans-serif;
  --utd-hero-h: 560px;
  --utd-card-img: 190px;   /* product-card image well height */
  --utd-hero-grad: linear-gradient(120deg, #0E1C22, #17414F 45%, #33A3BE);
  --utd-announce-bg: #0E1C22;
  --utd-announce-fg: #ffffff;
  --utd-footer-bg: #0E1C22;
  --utd-shell: 1320px;
}

/* Border-box everywhere in the theme. Without it `height: 100%` on a padded
   card sizes the CONTENT box, so padding and border push the border box past
   its grid row and the next row overlaps it. The same omission produced the
   oval add-to-cart button and the 80px newsletter pill. */
.utd, .utd *, .utd *::before, .utd *::after { box-sizing: border-box; }

body.utd {
  font-family: var(--utd-font);
  font-size: var(--utd-base);
  color: var(--utd-ink);
  -webkit-font-smoothing: antialiased;
}
.utd h1, .utd h2, .utd h3 { letter-spacing: var(--utd-tracking, -0.02em); font-weight: var(--utd-heading-weight, 700); }
.utd a { color: var(--utd-primary); text-decoration: none; }
.utd a:hover { color: var(--utd-primary-dark); }
.utd-shell { max-width: var(--utd-shell); margin-inline: auto; padding-inline: 24px; }

/* Label text that belongs to screen readers only. Used by the shop toolbar and
   the facet search; without it those labels printed next to their own fields. */
.utd-visually-hidden {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
  overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0;
}

/* Buttons ---------------------------------------------------------------- */
.utd .utd-btn,
.utd .wp-element-button {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  border-radius: 999px; border: 1px solid transparent; padding: 12px 24px;
  font-size: 13px; font-weight: 700; cursor: pointer; transition: background .2s, transform .2s, box-shadow .2s;
}
.utd-btn--primary { background: var(--utd-primary); color: #fff; }
.utd-btn--primary:hover { background: var(--utd-primary-dark); color: #fff; box-shadow: 0 10px 24px var(--utd-primary-24); }
.utd-ghost-btn {
  border: 1px solid var(--utd-border); background: #fff; color: var(--utd-ink);
  border-radius: 999px; padding: 10px 18px; font-size: 13px; font-weight: 600; cursor: pointer; font-family: inherit;
}
.utd-ghost-btn:hover { border-color: var(--utd-primary); color: var(--utd-primary); }

/* Announcement ----------------------------------------------------------- */
.utd-announce {
  position: relative; background: var(--utd-announce-bg); color: var(--utd-announce-fg);
  text-align: center; font-size: 12px;
}
.utd-announce p { margin: 0; }
.utd-announce a { color: inherit; text-decoration: underline; text-underline-offset: 3px; }
.utd-announce__close {
  position: absolute; right: 14px; top: 50%; translate: 0 -50%;
  background: none; border: 0; color: inherit; opacity: .6; font-size: 18px; cursor: pointer;
}
.utd-announce__close:hover { opacity: 1; }

.utd-announce__inner { max-width: var(--utd-shell); margin-inline: auto; padding: 9px 48px; }
.utd-announce__text { display: flex; justify-content: center; align-items: center; gap: 14px; flex-wrap: wrap; }
.utd-announce__timer { font-variant-numeric: tabular-nums; font-weight: 700; padding: 2px 10px; border-radius: 999px; background: rgba(255,255,255,.14); }
.utd-topbar__inner { max-width: var(--utd-shell); margin-inline: auto; padding: 8px 24px; display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap; font-size: 12px; }
.utd-topbar__note { margin: 0; display: flex; align-items: center; gap: 2px; flex-wrap: wrap; }
.utd-topbar__dot { margin: 0 6px; opacity: .6; }
.utd-topbar__call { display: inline-flex; align-items: center; gap: 7px; }
.utd-topbar__call:hover strong { color: var(--utd-primary); }
.utd-topbar__call-icon {
  width: 13px; height: 13px; flex: 0 0 13px; background: currentColor;
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 16.9v2.6a1.6 1.6 0 0 1-1.8 1.6 16 16 0 0 1-7-2.5 15.7 15.7 0 0 1-4.8-4.8 16 16 0 0 1-2.5-7A1.6 1.6 0 0 1 6.5 3h2.6a1.6 1.6 0 0 1 1.6 1.4c.1 1 .3 1.9.6 2.8a1.6 1.6 0 0 1-.4 1.7l-1 1a13 13 0 0 0 4.8 4.8l1-1a1.6 1.6 0 0 1 1.7-.4c.9.3 1.8.5 2.8.6a1.6 1.6 0 0 1 1.4 1.6z'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 16.9v2.6a1.6 1.6 0 0 1-1.8 1.6 16 16 0 0 1-7-2.5 15.7 15.7 0 0 1-4.8-4.8 16 16 0 0 1-2.5-7A1.6 1.6 0 0 1 6.5 3h2.6a1.6 1.6 0 0 1 1.6 1.4c.1 1 .3 1.9.6 2.8a1.6 1.6 0 0 1-.4 1.7l-1 1a13 13 0 0 0 4.8 4.8l1-1a1.6 1.6 0 0 1 1.7-.4c.9.3 1.8.5 2.8.6a1.6 1.6 0 0 1 1.4 1.6z'/%3E%3C/svg%3E");
  -webkit-mask-size: contain; mask-size: contain;
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
}
.utd-topbar__links { list-style: none; margin: 0; padding: 0; display: flex; gap: 20px; }
.utd-topbar__links a { color: inherit; }
.utd-topbar__links a:hover { color: #fff; }
.utd .utd-promo-pill { display: inline-block; padding: 6px 14px; border-radius: 999px; background: var(--utd-sale-soft, #FDECEB); color: var(--utd-sale); font-size: 12px; font-weight: 700; }

/* Header ----------------------------------------------------------------- */
.utd-header { background: #fff; border-bottom: 1px solid var(--utd-border); }
.utd-header-sticky .utd-header { position: sticky; top: 0; z-index: 60; }
.utd-header-glass .utd-header.is-stuck { background: rgba(255,255,255,.82); backdrop-filter: saturate(1.4) blur(14px); }
.utd-topbar { background: var(--utd-ink); color: rgba(255,255,255,.75); }
.utd-topbar p, .utd-topbar a { color: inherit; }
.utd-topbar strong { color: #fff; }
.utd-header__main { border-bottom: 1px solid var(--utd-border); }
.utd-logo img, .utd .wp-block-site-logo img { height: var(--utd-logo-h, 56px); width: auto; max-height: none; }
.utd-logo--text { font-weight: 800; font-size: 20px; color: var(--utd-ink); }

.utd-navbar { border-bottom: 1px solid var(--utd-border); }
.utd-navbar .wp-block-navigation__container { gap: 4px; }
.utd-navbar .wp-block-navigation-item__content {
  padding: 9px 14px; border-radius: 999px; font-size: 13px; font-weight: 600; color: var(--utd-ink);
}
.utd-navbar .wp-block-navigation-item__content:hover { background: var(--utd-surface); color: var(--utd-ink); }
.utd-catbtn {
  display: inline-flex; align-items: center; gap: 8px; height: 44px; padding: 0 20px;
  background: var(--utd-primary); color: #fff; border: 0; font-size: 13px; font-weight: 700; cursor: pointer;
}
.utd-catbtn:hover { background: var(--utd-primary-dark); }
.utd-promo-pill a {
  display: inline-block; padding: 6px 14px; border-radius: 999px;
  background: var(--utd-sale-soft, #FDECEB); color: var(--utd-sale); font-size: 12px; font-weight: 700;
}

/* WooCommerce auto-adds account + mini-cart blocks to navigation menus; the
   header-actions block already carries both, so suppress the duplicates. */
.utd-nav .wp-block-woocommerce-customer-account,
.utd-nav .wp-block-woocommerce-mini-cart,
.utd-topbar__nav .wp-block-woocommerce-customer-account,
.utd-topbar__nav .wp-block-woocommerce-mini-cart,
.utd-navbar .wc-block-customer-account,
.utd-navbar .wc-block-mini-cart,
.utd-header .wp-block-woocommerce-customer-account,
.utd-header .wp-block-woocommerce-mini-cart,
.utd-header .wc-block-customer-account,
.utd-header .wc-block-mini-cart { display: none !important; }

/* Header actions --------------------------------------------------------- */
.utd-actions { display: flex; align-items: center; gap: 10px; flex: 1; justify-content: flex-end; }
.utd-search {
  position: relative; display: flex; align-items: center; flex: 1; max-width: 620px;
  background: var(--utd-surface); border: 1px solid var(--utd-border); border-radius: 999px;
  height: 46px; padding: 0 6px 0 18px; margin-right: auto;
}
.utd-search__input { flex: 1; border: 0; background: transparent; font-size: 14px; outline: none; color: var(--utd-ink); font-family: inherit; }
.utd-search__btn {
  height: 36px; padding: 0 20px; border: 0; border-radius: 999px;
  background: var(--utd-primary); color: #fff; font-size: 13px; font-weight: 700; cursor: pointer;
}
.utd-search__results {
  position: absolute; top: calc(100% + 8px); left: 0; right: 0; z-index: 70;
  background: #fff; border: 1px solid var(--utd-border); border-radius: 14px;
  box-shadow: 0 20px 50px rgba(14,28,34,.14); overflow: hidden; max-height: 60vh; overflow-y: auto;
}
.utd-search__row { display: flex; gap: 12px; align-items: center; padding: 10px 14px; border-bottom: 1px solid var(--utd-border); }
.utd-search__row:last-child { border-bottom: 0; }
.utd-search__row:hover { background: var(--utd-surface); }
.utd-search__row img { width: 44px; height: 44px; flex: 0 0 44px; object-fit: contain; border-radius: 10px; background: var(--utd-surface); }
.utd-search__row-img { width: 44px; height: 44px; flex: 0 0 44px; border-radius: 10px; background: var(--utd-surface); }
/* Title and price were both inline inside one span, so they ran together —
   "…Sealing Frame AM5950,00 EGP". A row now: name on the left, truncated to a
   line, price held on the right where the eye can compare them down the list. */
.utd-search__row > span {
  flex: 1; min-width: 0; display: flex; align-items: baseline; gap: 14px;
}
.utd-search__row strong {
  flex: 1; min-width: 0; font-size: 13px; font-weight: 600; color: var(--utd-ink);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.utd-search__row:hover strong { color: var(--utd-primary); }
.utd-search__row em {
  flex: 0 0 auto; font-style: normal; font-size: 13px; font-weight: 700;
  color: var(--utd-ink); white-space: nowrap;
}

/* Account, wishlist and the cart pill share one row. The two link actions are
   icon-over-label columns of the same height, so the pill is sized to match
   rather than floating at its own height beside them. */
.utd-action {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px;
  min-height: 46px; padding: 4px 12px; border-radius: 12px; position: relative;
}
.utd-action:hover { background: var(--utd-surface); }
.utd-action__label { font-size: 11px; line-height: 1; color: var(--utd-muted); }
.utd-action__icon { width: 18px; height: 18px; border-radius: 5px; background: var(--utd-ink); opacity: .8; }
/* On the icon's corner, not the button's: the button is two rows tall, and a
   badge pinned to its top-right floated in the space beside the glyph. */
.utd-action__badge {
  position: absolute; top: 2px; left: 50%; margin-left: 4px;
  min-width: 15px; height: 15px; border-radius: 999px; padding: 0 4px;
  background: var(--utd-primary); color: #fff; font-size: 9px; font-weight: 700; line-height: 1;
  display: grid; place-items: center;
}
.utd-cart-trigger {
  display: flex; align-items: center; gap: 10px; min-height: 46px; padding: 0 18px 0 8px;
  border-radius: 999px; background: var(--utd-ink); color: #fff;
}
.utd-cart-trigger:hover { background: var(--utd-primary); color: #fff; }
/* The glyph tells you it is the cart; the count rides its corner and stays
   out of sight while the cart is empty. */
.utd-cart-trigger__icon {
  position: relative; flex: 0 0 auto;
  width: 32px; height: 32px; border-radius: 50%; background: var(--utd-primary);
  display: grid; place-items: center;
}
.utd-cart-trigger__icon::after {
  content: ""; width: 17px; height: 17px; background: #fff;
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 4h2.2l2.3 10.2h9.6L19 7.4H6.2'/%3E%3Ccircle cx='9.5' cy='19' r='1.5'/%3E%3Ccircle cx='16.5' cy='19' r='1.5'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 4h2.2l2.3 10.2h9.6L19 7.4H6.2'/%3E%3Ccircle cx='9.5' cy='19' r='1.5'/%3E%3Ccircle cx='16.5' cy='19' r='1.5'/%3E%3C/svg%3E");
  -webkit-mask-position: center; mask-position: center;
  -webkit-mask-size: contain; mask-size: contain;
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
}
.utd-cart-trigger:hover .utd-cart-trigger__icon { background: rgba(255,255,255,.22); }
.utd-cart-trigger__count {
  position: absolute; top: -3px; right: -3px;
  min-width: 17px; height: 17px; border-radius: 999px; padding: 0 4px;
  background: #fff; color: var(--utd-ink); font-size: 10px; font-weight: 700; line-height: 1;
  display: grid; place-items: center; box-shadow: 0 0 0 2px var(--utd-ink);
}
.utd-cart-trigger:hover .utd-cart-trigger__count { box-shadow: 0 0 0 2px var(--utd-primary); }
.utd-cart-trigger__total { font-size: 13px; font-weight: 600; white-space: nowrap; }
.utd-cart-trigger__total .woocommerce-Price-amount { color: inherit; }

/* Hero ------------------------------------------------------------------- */
/* One shell holds the slider and the two side promos, both rounded cards on
   the page background — the slider is no longer a full-bleed band. */
.utd-hero-block { padding: 24px; }
.utd-hero-layout {
  display: grid; gap: 20px; align-items: stretch;
  grid-template-columns: minmax(0, 2.05fr) minmax(0, 1fr);
  max-width: var(--utd-shell); margin-inline: auto;
}
.utd-hero-layout--solo { grid-template-columns: minmax(0, 1fr); }

.utd-hero {
  position: relative; overflow: hidden;
  border-radius: var(--utd-radius); outline: none;
}
.utd-hero__viewport { position: relative; height: var(--utd-hero-h); }
.utd-hero__slide {
  position: absolute; inset: 0; opacity: 0; transition: opacity .8s cubic-bezier(.16,1,.3,1);
  background-size: cover; background-position: center; display: flex; align-items: center;
  pointer-events: none;
}
.utd-hero__slide.is-active { opacity: 1; pointer-events: auto; }
.utd-hero__slide::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(90deg, rgba(6,16,20,.72) 0%, rgba(6,16,20,.34) 55%, rgba(6,16,20,.08) 100%);
}
.utd-hero__inner {
  position: relative; z-index: 2; width: 100%;
  padding: 48px 56px; display: grid; gap: 32px; align-items: center;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr);
}

/* Copy column ------------------------------------------------------------ */
.utd-hero__copy { color: #fff; min-width: 0; }
.utd-hero__eyebrow {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 7px 16px 7px 12px; margin-bottom: 20px; border-radius: 999px;
  background: rgba(255,255,255,.12); border: 1px solid rgba(255,255,255,.2);
  backdrop-filter: blur(10px);
  font-size: 11px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: #fff;
  animation: utdUp .7s cubic-bezier(.16,1,.3,1) both;
}
.utd-hero__eyebrow::before {
  content: ""; width: 6px; height: 6px; border-radius: 50%;
  background: var(--utd-accent); box-shadow: 0 0 0 4px rgba(73,182,209,.25);
}
.utd-hero__title {
  font-size: clamp(30px, 3.4vw, 46px); line-height: 1.06; margin: 0 0 14px; color: #fff;
  text-wrap: balance; animation: utdUp .7s .08s cubic-bezier(.16,1,.3,1) both;
}
.utd-hero__text {
  font-size: 15px; line-height: 1.6; color: rgba(255,255,255,.8); max-width: 46ch; margin: 0 0 26px;
  animation: utdUp .7s .16s cubic-bezier(.16,1,.3,1) both;
}
.utd-hero__ctas {
  display: flex; flex-wrap: wrap; gap: 12px; margin-bottom: 22px;
  animation: utdUp .7s .24s cubic-bezier(.16,1,.3,1) both;
}
.utd-hero__cta {
  display: inline-flex; align-items: center; gap: 10px; padding: 15px 30px; border-radius: 999px;
  background: var(--utd-primary); color: #fff; font-size: 14px; font-weight: 700;
  box-shadow: 0 14px 40px var(--utd-primary-24, rgba(51,163,190,.24));
}
.utd-hero__cta::after { content: "\2192"; font-size: 16px; transition: transform .3s; }
.utd-hero__cta:hover::after { transform: translateX(3px); }
/* The secondary CTA is an outline pill and carries no arrow. */
.utd-hero__cta--ghost {
  background: transparent; border: 1px solid rgba(255,255,255,.34); box-shadow: none;
}
.utd-hero__cta--ghost::after { content: none; }
.utd-hero__feats {
  list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px 20px;
  font-size: 12px; color: rgba(255,255,255,.72);
  animation: utdUp .7s .32s cubic-bezier(.16,1,.3,1) both;
}
.utd-hero__feats li { display: flex; align-items: center; gap: 6px; }
.utd-hero__feats li::before { content: "\2713"; color: var(--utd-accent); font-weight: 700; }

/* Visual column ---------------------------------------------------------- */
.utd-hero__side { position: relative; min-width: 0; }
.utd-hero__frame {
  position: relative; border-radius: 26px; overflow: hidden;
  aspect-ratio: 4 / 3; display: flex; align-items: center; justify-content: center; padding: 26px;
  background: #fff; box-shadow: 0 30px 70px rgba(0,0,0,.35);
}
.utd-hero__frame img { width: auto; height: auto; max-width: 100%; max-height: 100%; object-fit: contain; }
.utd-hero__frame--empty {
  background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.14); box-shadow: none;
}
.utd-hero__frame--empty::before {
  content: ""; width: 46%; aspect-ratio: 1; border-radius: 26%;
  background: radial-gradient(circle at 35% 30%, rgba(255,255,255,.28), rgba(255,255,255,.05) 65%, transparent 78%);
}
/* Chips overhang the frame's corners, as in the design. */
.utd-hero__chip {
  position: absolute; z-index: 3; display: flex; flex-direction: column; gap: 2px;
  padding: 11px 18px; border-radius: 16px; font-size: 13px; line-height: 1.25;
}
.utd-hero__chip em { font-style: normal; font-size: 10px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; opacity: .62; }
.utd-hero__chip b { font-weight: 700; }
.utd-hero__chip--spec {
  top: 8%; right: -18px; color: #fff;
  background: rgba(14,28,34,.86); border: 1px solid rgba(255,255,255,.14); backdrop-filter: blur(10px);
  animation: utdFloat 5s ease-in-out infinite;
}
.utd-hero__chip--price {
  bottom: 10%; left: -22px; color: var(--utd-ink);
  background: #fff; box-shadow: 0 16px 40px rgba(0,0,0,.28);
  animation: utdFloat2 6s ease-in-out infinite;
}

.utd-hero__orb { position: absolute; border-radius: 50%; filter: blur(60px); pointer-events: none; z-index: 1; }
.utd-hero__orb--a { width: 560px; height: 560px; background: var(--utd-glow, rgba(73,182,209,.55)); top: -160px; right: 4%; animation: utdGlow 9s ease-in-out infinite; }
.utd-hero__orb--b { width: 420px; height: 420px; background: rgba(51,163,190,.42); bottom: -160px; left: 30%; animation: utdGlow2 11s ease-in-out infinite; }

/* Controls: arrows on the edges, bar dots bottom-left, counter bottom-right */
.utd-hero__arrow {
  position: absolute; top: 50%; translate: 0 -50%; z-index: 4;
  width: 40px; height: 40px; border-radius: 50%; border: 1px solid rgba(255,255,255,.28);
  background: rgba(255,255,255,.14); color: #fff; font-size: 20px; line-height: 1; cursor: pointer;
  backdrop-filter: blur(8px); display: grid; place-items: center; padding: 0;
}
.utd-hero__arrow:hover { background: #fff; color: var(--utd-ink); }
.utd-hero__arrow--prev { left: 16px; }
.utd-hero__arrow--next { right: 16px; }
.utd-hero__dots { position: absolute; left: 56px; bottom: 30px; z-index: 4; display: flex; gap: 8px; }
.utd-hero__dot {
  width: 34px; height: 4px; border-radius: 999px; border: 0; padding: 0;
  background: rgba(255,255,255,.28); cursor: pointer; transition: background .3s;
}
.utd-hero__dot.is-active { background: var(--utd-accent); }
.utd-hero__count {
  position: absolute; right: 56px; bottom: 24px; z-index: 4; margin: 0;
  font-size: 13px; font-weight: 600; color: rgba(255,255,255,.55); font-variant-numeric: tabular-nums;
}
.utd-hero__count span { color: #fff; }

/* Side promo cards ------------------------------------------------------- */
.utd-hero-promos { display: grid; grid-template-rows: 1fr 1fr; gap: 20px; min-width: 0; }
.utd-heropromo {
  display: grid; grid-template-columns: minmax(0, 1fr) 44%; align-items: center; gap: 12px;
  padding: 24px; border-radius: var(--utd-radius); overflow: hidden;
  background: var(--utd-surface); color: var(--utd-ink);
  transition: transform .3s cubic-bezier(.16,1,.3,1), box-shadow .3s;
}
.utd-heropromo:nth-child(2) { background: #fff; border: 1px solid var(--utd-border); }
.utd-heropromo:hover { transform: translateY(-4px); box-shadow: 0 18px 44px rgba(14,28,34,.12); color: var(--utd-ink); }
.utd-heropromo__copy { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.utd-heropromo__eyebrow { font-size: 11px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--utd-primary); }
.utd-heropromo strong { font-size: clamp(16px, 1.3vw, 21px); line-height: 1.25; }
.utd-heropromo em { font-style: normal; font-size: 13px; font-weight: 600; color: var(--utd-muted); }
.utd-heropromo:hover em { color: var(--utd-primary); }
.utd-heropromo__img { display: flex; align-items: center; justify-content: center; }
.utd-heropromo__img img { width: 100%; height: auto; max-height: 150px; object-fit: contain; border-radius: 10px; }

@keyframes utdUp { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }
@keyframes utdGlow { 0%,100% { transform: translate(0,0) scale(1); opacity: .55; } 50% { transform: translate(40px,-30px) scale(1.15); opacity: .8; } }
@keyframes utdGlow2 { 0%,100% { transform: translate(0,0) scale(1); opacity: .35; } 50% { transform: translate(-30px,30px) scale(1.1); opacity: .55; } }
@keyframes utdFloat { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-8px); } }
@keyframes utdFloat2 { 0%,100% { transform: translateY(0); } 50% { transform: translateY(7px); } }

/* PC builder banner ------------------------------------------------------ */
.utd-buildercta { max-width: var(--utd-shell); margin-inline: auto; padding: 40px 24px; }
.utd-buildercta__panel {
  display: grid; gap: 32px; align-items: center;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr);
  padding: 48px 56px; border-radius: var(--utd-radius);
  background: var(--utd-primary-08, rgba(51,163,190,.08));
}
.utd-buildercta__copy { min-width: 0; }
.utd-buildercta__eyebrow {
  display: block; margin-bottom: 14px;
  font-size: 12px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
  color: var(--utd-primary);
}
.utd-buildercta__title {
  margin: 0 0 14px; font-size: clamp(26px, 2.8vw, 36px); line-height: 1.12;
  color: var(--utd-ink); text-wrap: balance;
}
.utd-buildercta__text {
  margin: 0 0 28px; max-width: 46ch;
  font-size: 15px; line-height: 1.6; color: var(--utd-muted);
}
.utd-buildercta__actions { display: flex; flex-wrap: wrap; gap: 12px; }
.utd-buildercta__btn {
  display: inline-flex; align-items: center; justify-content: center;
  padding: 15px 30px; border-radius: 999px; border: 1px solid transparent;
  font-size: 14px; font-weight: 700; line-height: 1.2;
  background: var(--utd-ink); color: #fff;
  transition: background .2s, color .2s, border-color .2s;
}
.utd-buildercta__btn:hover { background: var(--utd-primary); color: #fff; }
.utd-buildercta__btn--ghost {
  background: #fff; color: var(--utd-ink); border-color: var(--utd-border);
}
.utd-buildercta__btn--ghost:hover { background: #fff; color: var(--utd-primary); border-color: var(--utd-primary); }
.utd-buildercta__visual { display: flex; align-items: center; justify-content: center; min-width: 0; }
.utd-buildercta__visual img { width: 100%; height: auto; max-height: 320px; object-fit: contain; }
.utd-buildercta__visual--empty::before {
  content: ""; width: 70%; aspect-ratio: 4 / 3; border-radius: 18px;
  background: radial-gradient(circle at 40% 35%, rgba(255,255,255,.9), rgba(255,255,255,.35) 60%, transparent 78%);
  border: 1px solid var(--utd-border);
}

/* Trust bar -------------------------------------------------------------- */
.utd-trustbar {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 16px;
  max-width: var(--utd-shell); margin: 28px auto; padding: 0 24px;
}
.utd-trustbar__item {
  display: flex; gap: 14px; align-items: center; padding: 18px 20px;
  border: 1px solid var(--utd-border); border-radius: var(--utd-radius); background: #fff;
}
.utd-trustbar__icon { width: 34px; height: 34px; border-radius: 10px; background: var(--utd-primary-08, rgba(51,163,190,.08)); flex-shrink: 0; }
.utd-trustbar__item strong { display: block; font-size: 14px; }
.utd-trustbar__item em { font-style: normal; font-size: 12px; color: var(--utd-muted); }

/* Category grid ---------------------------------------------------------- */
.utd-catgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 16px; }
.utd-catgrid__tile {
  display: flex; flex-direction: column; gap: 12px; padding: 18px;
  border: 1px solid var(--utd-border); border-radius: var(--utd-radius); background: #fff;
  color: var(--utd-ink); transition: transform .3s cubic-bezier(.16,1,.3,1), box-shadow .3s, border-color .3s;
}
.utd-catgrid__tile:hover { transform: translateY(-6px); box-shadow: 0 18px 44px rgba(14,28,34,.12); border-color: transparent; color: var(--utd-ink); }
.utd-catgrid__img { aspect-ratio: 1; border-radius: 12px; background: var(--utd-surface); display: flex; align-items: center; justify-content: center; overflow: hidden; }
.utd-catgrid__img img { max-width: 80%; max-height: 80%; width: auto; height: auto; object-fit: contain; }
.utd-catgrid__img--empty::before { content: ""; width: 34%; aspect-ratio: 1; border-radius: 10px; background: var(--utd-primary-14, rgba(51,163,190,.14)); }
.utd-catgrid__tile strong { font-size: 14px; line-height: 1.35; }
.utd-catgrid__tile em { font-style: normal; font-size: 12px; color: var(--utd-muted); }

/* Brands ----------------------------------------------------------------- */
/* Tighter tiles than categories: a brand is a mark, not a scene, and most of
   these have no logo yet — the wordmark set in the tile has to carry it. */
.utd-brands__grid {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px;
}
.utd-brand {
  display: flex; flex-direction: column; align-items: center; gap: 8px;
  height: 100%; padding: 18px 14px; text-align: center;
  border: 1px solid var(--utd-border); border-radius: var(--utd-radius); background: #fff;
  color: var(--utd-ink); transition: transform .3s cubic-bezier(.16,1,.3,1), box-shadow .3s, border-color .3s;
}
.utd-brand:hover { transform: translateY(-4px); box-shadow: 0 14px 34px rgba(14,28,34,.1); border-color: transparent; color: var(--utd-ink); }
.utd-brand__logo {
  display: flex; align-items: center; justify-content: center;
  width: 100%; height: 56px;
}
.utd-brand__logo img { max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; }
/* No logo: the name becomes the mark, so it does not repeat underneath. It is
   ink, not link teal, so a wordmark tile reads the same weight as a logo one. */
.utd .utd-brand__logo--text { font-size: 16px; font-weight: 800; letter-spacing: -.01em; color: var(--utd-ink); }
.utd .utd-brand__name { font-size: 13px; font-weight: 600; color: var(--utd-ink); }
.utd-brand:hover .utd-brand__logo--text,
.utd-brand:hover .utd-brand__name { color: var(--utd-primary); }
/* Bottom-aligned so the counts line up across a row whose tiles carry
   different numbers of lines — logo plus name, or wordmark alone. */
.utd-brand__count { margin-top: auto; font-style: normal; font-size: 12px; color: var(--utd-muted); }

/* Floating brands button. Bottom-right, because the site's other floating
   widget sits bottom-left. */
.utd-brandfab {
  position: fixed; right: 18px; bottom: 18px; z-index: 95;
  display: inline-flex; align-items: center; gap: 9px;
  height: 44px; padding: 0 20px 0 16px;
  border: 0; border-radius: 999px; cursor: pointer;
  background: var(--utd-ink); color: #fff;
  font-family: inherit; font-size: 14px; font-weight: 600;
  box-shadow: 0 10px 28px rgba(14,28,34,.28);
  transition: background .2s, transform .2s cubic-bezier(.16,1,.3,1), box-shadow .2s;
}
.utd-brandfab:hover { background: var(--utd-primary); transform: translateY(-2px); box-shadow: 0 14px 32px var(--utd-primary-24, rgba(51,163,190,.24)); }
.utd-brandfab__icon {
  width: 19px; height: 19px; background: #fff;
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='9' r='5.5'/%3E%3Cpath d='M8.4 13.4 6.5 21l5.5-2.8L17.5 21l-1.9-7.6'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='9' r='5.5'/%3E%3Cpath d='M8.4 13.4 6.5 21l5.5-2.8L17.5 21l-1.9-7.6'/%3E%3C/svg%3E");
  -webkit-mask-position: center; mask-position: center;
  -webkit-mask-size: contain; mask-size: contain;
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
}
@media (prefers-reduced-motion: reduce) {
  .utd-brandfab { transition: background .2s; }
  .utd-brandfab:hover { transform: none; }
}
/* Clear of the mobile tab bar. */
@media (max-width: 782px) {
  .utd-brandfab { bottom: 78px; right: 14px; height: 40px; padding: 0 16px 0 13px; font-size: 13px; }
}

.utd-brandlist { list-style: none; margin: 0; padding: 0; }
.utd-brandlist__row {
  display: flex; align-items: center; gap: 14px; padding: 10px 2px;
  border-bottom: 1px solid var(--utd-border); color: var(--utd-ink);
}
.utd-brandlist li:last-child .utd-brandlist__row { border-bottom: 0; }
.utd-brandlist__row:hover { color: var(--utd-primary); }
.utd-brandlist__row img {
  width: 46px; height: 46px; flex: 0 0 46px; object-fit: contain;
  border-radius: 10px; background: var(--utd-surface); padding: 5px;
}
.utd-brandlist__row strong { flex: 1; min-width: 0; font-size: 14px; font-weight: 600; }
.utd-brandlist__row em {
  font-style: normal; font-size: 12px; color: var(--utd-muted);
  padding: 2px 9px; border-radius: 999px; background: var(--utd-surface);
}

/* Brand on the product page, above the title. */
.utd-pdp-brand { display: flex; align-items: center; gap: 10px; margin: 0 0 6px; }
.utd-pdp-brand a { display: inline-flex; align-items: center; gap: 10px; color: var(--utd-muted); }
.utd-pdp-brand a:hover { color: var(--utd-primary); }
.utd-pdp-brand__logo { max-height: 28px; width: auto; object-fit: contain; }
.utd-pdp-brand__name { font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }

/* Sections & grids ------------------------------------------------------- */
.utd-section-head { display: flex; align-items: baseline; justify-content: space-between; gap: 20px; margin-bottom: 22px; }
.utd-section-head h2 { margin: 0; font-size: clamp(22px, 2.4vw, 30px); }
.utd-section-head__link { font-size: 13px; font-weight: 600; }

.utd-products {
  list-style: none; margin: 0; padding: 0;
  display: grid; gap: 20px; grid-template-columns: repeat(var(--utd-cols, 4), minmax(0, 1fr));
}
.utd-card, li.product {
  position: relative; border: 1px solid var(--utd-border); border-radius: var(--utd-radius);
  background: #fff; padding: 16px; display: flex; flex-direction: column; gap: 8px;
  transition: transform .3s cubic-bezier(.16,1,.3,1), box-shadow .3s, border-color .3s;
}
.utd-hover-lift .utd-card:hover, .utd-hover-lift li.product:hover {
  transform: translateY(-6px); box-shadow: 0 18px 44px rgba(14,28,34,.12); border-color: transparent;
}
/* Geometry for card images lives in the corrections block below — a square
   aspect-ratio here only fought it. Keep the paint properties. */
.utd-card img, li.product img { object-fit: contain; width: 100%; }
.utd-card__img.is-empty { display: block; height: var(--utd-card-img, 190px); border-radius: 12px; background: var(--utd-surface); }
.utd-card__title, li.product .woocommerce-loop-product__title {
  font-size: 14px; font-weight: 600; line-height: 1.4; margin: 0; color: var(--utd-ink);
}
.utd-card__price, li.product .price { font-size: 16px; font-weight: 700; color: var(--utd-ink); }
li.product .price del { color: var(--utd-muted); font-weight: 500; font-size: 13px; margin-right: 6px; }
li.product .price ins { text-decoration: none; color: var(--utd-sale); }
.utd-badge {
  align-self: flex-start; padding: 4px 10px; border-radius: 999px; font-size: 11px; font-weight: 700;
}
.utd-badge--in { background: var(--utd-primary-08, rgba(51,163,190,.08)); color: var(--utd-primary-dark); }
.utd-badge--out { background: var(--utd-sale-soft, #FDECEB); color: var(--utd-sale); }


/* Bundle grid ------------------------------------------------------------ */
.utd-bundles__grid {
  list-style: none; margin: 0; padding: 0;
  display: grid; gap: 20px; grid-template-columns: repeat(var(--utd-cols, 3), minmax(0, 1fr));
}
.utd-bundle {
  display: flex; flex-direction: column; min-height: 0;
  border: 1px solid var(--utd-border); border-radius: var(--utd-radius);
  background: #fff; overflow: hidden;
  transition: transform .3s cubic-bezier(.16,1,.3,1), box-shadow .3s, border-color .3s;
}
.utd-hover-lift .utd-bundle:hover { transform: translateY(-6px); box-shadow: 0 18px 44px rgba(14,28,34,.12); border-color: transparent; }
.utd-bundle__media {
  display: flex; align-items: center; justify-content: center;
  height: 240px; padding: 22px; box-sizing: border-box;
  background: var(--utd-surface);
}
.utd-bundle__media img { width: auto; height: auto; max-width: 100%; max-height: 100%; object-fit: contain; display: block; }
.utd-bundle__media--empty::before {
  content: ""; width: 55%; aspect-ratio: 4 / 3; border-radius: 14px;
  background: var(--utd-primary-08, rgba(51,163,190,.08));
}
.utd-bundle__body { display: flex; flex-direction: column; gap: 8px; padding: 20px 20px 12px; min-height: 0; }
.utd-bundle__eyebrow { font-size: 11px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--utd-primary); }
.utd-bundle__title { margin: 0; font-size: 18px; line-height: 1.3; }
.utd-bundle__title a { color: var(--utd-ink); }
.utd-bundle__title a:hover { color: var(--utd-primary); }
.utd-bundle__text {
  margin: 0; font-size: 14px; line-height: 1.55; color: var(--utd-muted);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.utd-bundle__foot {
  margin-top: auto; padding: 12px 20px 20px;
  display: flex; align-items: baseline; justify-content: space-between; gap: 14px; flex-wrap: wrap;
}
.utd-bundle__price { font-size: 14px; color: var(--utd-muted); }
.utd-bundle__price b { font-size: 17px; font-weight: 700; color: var(--utd-ink); }
.utd-bundle__price .woocommerce-Price-amount { color: inherit; }
.utd-bundle__cta { font-size: 14px; font-weight: 700; color: var(--utd-ink); }
.utd-bundle__cta:hover { color: var(--utd-primary); }

/* Visit us --------------------------------------------------------------- */
.utd-visit__panel {
  border: 1px solid var(--utd-border); border-radius: var(--utd-radius);
  background: #fff; overflow: hidden; gap: 0;
}
.utd-visit__copy { padding: 44px 40px; }
.utd-visit__eyebrow {
  margin: 0 0 12px; font-size: 12px; font-weight: 700;
  letter-spacing: .12em; text-transform: uppercase; color: var(--utd-primary);
}
.utd-visit__title { margin: 0 0 24px; font-size: clamp(24px, 2.4vw, 32px); line-height: 1.15; }
.utd-visit__store {
  padding: 16px 20px; margin-bottom: 12px;
  border-radius: 14px; background: var(--utd-surface);
}
.utd-visit__store-name { margin: 0 0 4px; font-size: 15px; font-weight: 700; color: var(--utd-ink); }
.utd-visit__store-addr { margin: 0; font-size: 14px; line-height: 1.5; color: var(--utd-muted); }
.utd-visit__meta { margin: 24px 0 0; font-size: 14px; color: var(--utd-muted); }
.utd-visit__meta strong { color: var(--utd-ink); }
/* The map column is flush to the panel edge, so no padding and no gap. */
.utd-visit__map { padding: 0; min-height: 420px; display: flex; }
.utd-visit__map iframe {
  width: 100%; min-height: 420px; height: 100%; border: 0; display: block;
  background: var(--utd-primary-08, rgba(51,163,190,.08));
}

/* Newsletter band -------------------------------------------------------- */
.utd-nlband {
  display: grid; align-items: center; column-gap: 32px; row-gap: 6px;
  /* A definite second track. With `auto` there, the form's own width:100%
     was a percentage against a track the form was sizing — cyclic, so the
     track collapsed to the input's min-content and the pill came out short. */
  grid-template-columns: minmax(0, 1fr) clamp(280px, 34%, 420px);
  padding: 40px 48px; border-radius: var(--utd-radius);
  background: var(--utd-primary); color: #fff;
}
.utd-nlband__title { grid-column: 1; grid-row: 1; margin: 0; font-size: clamp(21px, 2.1vw, 28px); line-height: 1.2; color: #fff; }
.utd-nlband__text { grid-column: 1; grid-row: 2; margin: 0; font-size: 14px; color: rgba(255,255,255,.85); }

/* Shop head + toolbar --------------------------------------------------- */
.utd-shop-head { margin: 4px 0 22px; }
.utd-shop-title { margin: 0; font-size: clamp(26px, 3vw, 38px); line-height: 1.1; }
.utd-shop-desc { margin: 10px 0 0; max-width: 70ch; color: var(--utd-muted); }

.utd-toolbar {
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
  padding: 12px 14px; margin-bottom: 20px;
  border: 1px solid var(--utd-border); border-radius: 14px; background: #fff; font-size: 13px;
}
.utd-toolbar__count { margin: 0; color: var(--utd-muted); white-space: nowrap; }
.utd-toolbar__form { display: flex; align-items: center; gap: 10px; flex: 1 1 320px; min-width: 0; justify-content: flex-end; }

.utd-toolbar__search {
  position: relative; display: flex; align-items: center; flex: 1 1 200px; min-width: 0; max-width: 340px;
}
.utd-toolbar__search input {
  width: 100%; box-sizing: border-box; height: 40px; padding: 0 40px 0 16px;
  border: 1px solid var(--utd-border); border-radius: 999px; background: var(--utd-surface);
  font-family: inherit; font-size: 13px; color: var(--utd-ink); outline: none;
}
.utd-toolbar__search input:focus { border-color: var(--utd-primary); background: #fff; }
.utd-toolbar__search button {
  position: absolute; right: 4px; width: 32px; height: 32px; padding: 0;
  border: 0; border-radius: 50%; background: transparent; cursor: pointer;
}
.utd-toolbar__search button::after {
  content: ""; position: absolute; inset: 8px; background: var(--utd-muted);
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='M20 20l-3.6-3.6'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='M20 20l-3.6-3.6'/%3E%3C/svg%3E");
  -webkit-mask-position: center; mask-position: center;
  -webkit-mask-size: contain; mask-size: contain;
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
}
.utd-toolbar__search button:hover::after { background: var(--utd-primary); }

.utd-toolbar__sort select {
  height: 40px; padding: 0 34px 0 14px; box-sizing: border-box;
  border: 1px solid var(--utd-border); border-radius: 999px; background: #fff;
  font-family: inherit; font-size: 13px; color: var(--utd-ink); cursor: pointer;
}

.utd-toolbar__view { display: flex; gap: 4px; padding: 3px; border-radius: 999px; background: var(--utd-surface); }
.utd-viewbtn {
  position: relative; width: 34px; height: 34px; padding: 0;
  border: 0; border-radius: 50%; background: transparent; cursor: pointer;
}
.utd-viewbtn::after {
  content: ""; position: absolute; inset: 9px; background: var(--utd-muted);
  -webkit-mask-position: center; mask-position: center;
  -webkit-mask-size: contain; mask-size: contain;
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
}
.utd-viewbtn[data-utd-view="grid"]::after { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Crect x='3' y='3' width='8' height='8' rx='1.6'/%3E%3Crect x='13' y='3' width='8' height='8' rx='1.6'/%3E%3Crect x='3' y='13' width='8' height='8' rx='1.6'/%3E%3Crect x='13' y='13' width='8' height='8' rx='1.6'/%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%3Crect x='3' y='3' width='8' height='8' rx='1.6'/%3E%3Crect x='13' y='3' width='8' height='8' rx='1.6'/%3E%3Crect x='3' y='13' width='8' height='8' rx='1.6'/%3E%3Crect x='13' y='13' width='8' height='8' rx='1.6'/%3E%3C/svg%3E"); }
.utd-viewbtn[data-utd-view="list"]::after { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Crect x='3' y='4' width='18' height='4' rx='1.6'/%3E%3Crect x='3' y='10' width='18' height='4' rx='1.6'/%3E%3Crect x='3' y='16' width='18' height='4' rx='1.6'/%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%3Crect x='3' y='4' width='18' height='4' rx='1.6'/%3E%3Crect x='3' y='10' width='18' height='4' rx='1.6'/%3E%3Crect x='3' y='16' width='18' height='4' rx='1.6'/%3E%3C/svg%3E"); }
.utd-viewbtn:hover::after { background: var(--utd-ink); }
.utd-viewbtn.is-active { background: #fff; box-shadow: 0 2px 8px rgba(14,28,34,.1); }
.utd-viewbtn.is-active::after { background: var(--utd-ink); }

.utd-noresults { padding: 40px 0; text-align: center; color: var(--utd-muted); }

/* Facet search box ------------------------------------------------------- */
.utd-facet__search { display: block; position: relative; margin: 0 0 10px; }
.utd-facet__search input {
  width: 100%; box-sizing: border-box; height: 36px; padding: 0 12px 0 32px;
  border: 1px solid var(--utd-border); border-radius: 10px; background: var(--utd-surface);
  font-family: inherit; font-size: 13px; color: var(--utd-ink); outline: none;
}
.utd-facet__search input:focus { border-color: var(--utd-primary); background: #fff; }
.utd-facet__search::before {
  content: ""; position: absolute; left: 10px; top: 10px; width: 15px; height: 15px;
  background: var(--utd-muted); pointer-events: none;
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='M20 20l-3.6-3.6'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='M20 20l-3.6-3.6'/%3E%3C/svg%3E");
  -webkit-mask-position: center; mask-position: center;
  -webkit-mask-size: contain; mask-size: contain;
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
}
.utd-facet__nomatch { margin: 6px 0 0; font-size: 12px; color: var(--utd-muted); }

/* Price range slider ----------------------------------------------------- */
.utd-range { position: relative; padding: 6px 0 0; }
.utd-range__track {
  position: relative; height: 4px; margin: 12px 0 6px;
  border-radius: 999px; background: var(--utd-border);
}
.utd-range__fill { position: absolute; top: 0; bottom: 0; border-radius: 999px; background: var(--utd-primary); }
/* Both inputs sit on the same line as the track; only their thumbs paint. */
.utd-range__input {
  position: absolute; top: 6px; left: 0; width: 100%; height: 22px; margin: 0;
  -webkit-appearance: none; appearance: none; background: none; pointer-events: none;
}
.utd-range__input:focus-visible { outline: 2px solid var(--utd-primary); outline-offset: 4px; border-radius: 999px; }
.utd-range__input::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none; pointer-events: auto;
  width: 18px; height: 18px; border-radius: 50%;
  background: #fff; border: 2px solid var(--utd-primary); cursor: grab;
  box-shadow: 0 2px 6px rgba(14,28,34,.18);
}
.utd-range__input::-moz-range-thumb {
  pointer-events: auto;
  width: 18px; height: 18px; border-radius: 50%;
  background: #fff; border: 2px solid var(--utd-primary); cursor: grab;
  box-shadow: 0 2px 6px rgba(14,28,34,.18);
}
.utd-range__input::-webkit-slider-runnable-track { background: none; }
.utd-range__input::-moz-range-track { background: none; }
.utd-range__fields { display: flex; align-items: center; gap: 10px; margin-top: 14px; }
.utd-range__fields label { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; font-size: 11px; color: var(--utd-muted); }
.utd-range__fields input {
  width: 100%; box-sizing: border-box; height: 34px; padding: 0 10px;
  border: 1px solid var(--utd-border); border-radius: 10px; background: #fff;
  font-family: inherit; font-size: 13px; color: var(--utd-ink);
}
.utd-range__out { margin: 10px 0 0; font-size: 12px; font-weight: 600; color: var(--utd-ink); }

/* Shop layout & facets --------------------------------------------------- */
.utd-shop-layout { gap: 32px; }
.utd-sidebar-right .utd-shop-layout { flex-direction: row-reverse; }
.utd-sidebar-off .utd-shop-aside { display: none; }

.utd-facets { position: sticky; top: 96px; }
.utd-facets__toggle {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  width: 100%; padding: 14px 18px; font-family: inherit; font-size: 14px; font-weight: 700;
  border: 1px solid var(--utd-border); border-radius: var(--utd-radius);
  background: #fff; color: var(--utd-ink); cursor: pointer;
}
.utd-facets__toggle::after {
  content: ""; width: 9px; height: 9px;
  border-right: 2px solid var(--utd-muted); border-bottom: 2px solid var(--utd-muted);
  rotate: -135deg; transition: rotate .2s;
}
.utd-facets__toggle[aria-expanded="false"]::after { rotate: 45deg; }
.utd-facets.is-collapsed .utd-facets__form { display: none; }
.utd-facets__toggle:not([hidden]) + .utd-facets__form { margin-top: 10px; }
.utd-facets__form { border: 1px solid var(--utd-border); border-radius: var(--utd-radius); background: #fff; overflow: hidden; }
.utd-facets__head { display: flex; align-items: center; justify-content: space-between; padding: 16px 18px; border-bottom: 1px solid var(--utd-border); }
.utd-facets__head strong { font-size: 14px; }
.utd-facets__clear { font-size: 12px; color: var(--utd-muted); }
.utd-facet { border-bottom: 1px solid var(--utd-border); }
.utd-facet:last-of-type { border-bottom: 0; }
.utd-facet__title {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 14px 18px; font-size: 13px; font-weight: 700; cursor: pointer; list-style: none;
}
.utd-facet__title::-webkit-details-marker { display: none; }
.utd-facet__caret { width: 9px; height: 9px; border-right: 2px solid var(--utd-muted); border-bottom: 2px solid var(--utd-muted); rotate: 45deg; transition: rotate .2s; }
.utd-facet[open] .utd-facet__caret { rotate: -135deg; }
.utd-facet__body { padding: 0 18px 16px; }
.utd-facet__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; max-height: 240px; overflow-y: auto; }
.utd-facet__list label { display: flex; align-items: center; gap: 10px; font-size: 13px; cursor: pointer; }
.utd-facet__list input { accent-color: var(--utd-primary); }
.utd-facet__list em { margin-left: auto; font-style: normal; font-size: 11px; color: var(--utd-muted); }
.utd-facet__price { display: flex; gap: 10px; }
.utd-facet__price label { display: flex; flex-direction: column; gap: 5px; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--utd-muted); }
.utd-facet__price input { border: 1px solid var(--utd-border); border-radius: 10px; padding: 8px 10px; font-size: 13px; width: 100%; font-family: inherit; }
.utd-facets__apply { width: calc(100% - 36px); margin: 0 18px 18px; }
.utd-facet__empty { font-size: 12px; color: var(--utd-muted); margin: 0; }
.utd-facet__select { width: 100%; border: 1px solid var(--utd-border); border-radius: 10px; padding: 9px 11px; font-size: 13px; font-family: inherit; background: #fff; }
.utd-facet__more {
  margin-top: 10px; border: 0; background: none; padding: 0;
  font-size: 12px; font-weight: 700; color: var(--utd-primary); cursor: pointer; font-family: inherit;
}
.utd-facet__more:hover { color: var(--utd-primary-dark); text-decoration: underline; }
.utd-facet__list--swatch { flex-direction: row; flex-wrap: wrap; gap: 8px; }
.utd-facet__list--swatch label span { padding: 5px 11px; border: 1px solid var(--utd-border); border-radius: 999px; font-size: 12px; }
.utd-facet__list--swatch input { position: absolute; opacity: 0; }
.utd-facet__list--swatch input:checked + span { border-color: var(--utd-primary); background: var(--utd-primary-08, rgba(51,163,190,.08)); color: var(--utd-primary-dark); }
.utd-facet__skeleton { display: flex; flex-direction: column; gap: 9px; }
.utd-facet__skeleton span {
  height: 12px; border-radius: 6px; background: linear-gradient(90deg, #EDF2F4, #F7FAFB, #EDF2F4);
  background-size: 200% 100%; animation: utdShimmer 1.2s linear infinite;
}
.utd-facet__skeleton span:nth-child(2) { width: 78%; }
.utd-facet__skeleton span:nth-child(3) { width: 58%; }
@keyframes utdShimmer { from { background-position: 200% 0; } to { background-position: -200% 0; } }

/* Single product --------------------------------------------------------- */
.utd-single__buybox { display: flex; flex-direction: column; gap: 14px; }
.utd-single__price .woocommerce-Price-amount { font-size: 30px; font-weight: 700; }
.utd-single__actions { display: flex; gap: 10px; }
.utd-trust { font-size: 12px; color: var(--utd-muted); margin: 0; }

.utd-sellwith { border: 1px solid var(--utd-border); border-radius: var(--utd-radius); padding: 20px; background: var(--utd-surface); }
.utd-sellwith__title { margin: 0 0 14px; font-size: 14px; font-weight: 700; }
.utd-sellwith__title .required { color: var(--utd-sale); text-decoration: none; }
.utd-sellwith__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.utd-sellwith--list .utd-sellwith__grid { grid-template-columns: 1fr; }
.utd-sellwith__card {
  display: flex; align-items: flex-start; gap: 12px; padding: 14px; border-radius: 14px;
  border: 1px solid var(--utd-border); background: #fff; cursor: pointer; transition: border-color .2s, box-shadow .2s;
}
.utd-sellwith__card:hover { border-color: var(--utd-primary); }
.utd-sellwith__card:has(input:checked) { border-color: var(--utd-primary); box-shadow: 0 0 0 3px var(--utd-primary-14, rgba(51,163,190,.14)); }
.utd-sellwith__card input { accent-color: var(--utd-primary); margin-top: 3px; }
.utd-sellwith__body { display: flex; flex-direction: column; gap: 3px; }
.utd-sellwith__body strong { font-size: 13px; }
.utd-sellwith__body em { font-style: normal; font-size: 12px; color: var(--utd-muted); }
.utd-sellwith__price { margin-left: auto; font-size: 12px; font-weight: 700; color: var(--utd-primary-dark); white-space: nowrap; }
.utd-sellwith__select { width: 100%; border: 1px solid var(--utd-border); border-radius: 12px; padding: 12px 14px; font-family: inherit; font-size: 13px; background: #fff; }
.utd-sellwith__total {
  display: flex; align-items: baseline; justify-content: space-between;
  margin-top: 16px; padding-top: 14px; border-top: 1px dashed var(--utd-border); font-size: 13px;
}
.utd-sellwith__total strong { font-size: 22px; }

.utd-sticky-atc {
  position: fixed; bottom: 0; left: 0; right: 0; z-index: 80; background: rgba(255,255,255,.94);
  backdrop-filter: blur(14px); border-top: 1px solid var(--utd-border);
}
.utd-sticky-atc__inner {
  max-width: var(--utd-shell); margin-inline: auto; padding: 12px 24px;
  display: flex; align-items: center; gap: 16px;
}
.utd-sticky-atc img { width: 48px; height: 48px; flex: 0 0 48px; border-radius: 10px; object-fit: contain; background: var(--utd-surface); }
/* min-width:0 or the long product name refuses to shrink and pushes the
   button until its label wraps to two lines. */
.utd-sticky-atc__meta { display: flex; flex-direction: column; min-width: 0; }
/* One line, cut with an ellipsis. The full name is already the page's H1 a
   few centimetres up — this bar only has to say which product you are buying. */
.utd-sticky-atc__meta strong {
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.utd-sticky-atc .utd-btn { flex: 0 0 auto; white-space: nowrap; }
.utd-sticky-atc__meta strong { font-size: 14px; }
.utd-sticky-atc .utd-btn { margin-left: auto; }

/* Side cart & modals ----------------------------------------------------- */
.utd-drawer, .utd-modal { position: fixed; inset: 0; z-index: 100; }
.utd-drawer__scrim, .utd-modal__scrim { position: absolute; inset: 0; background: rgba(6,16,20,.5); backdrop-filter: blur(2px); }
.utd-drawer__panel {
  position: absolute; top: 0; right: 0; bottom: 0; width: min(420px, 92vw);
  background: #fff; display: flex; flex-direction: column;
  animation: utdSlide .35s cubic-bezier(.16,1,.3,1);
}
@keyframes utdSlide { from { transform: translateX(100%); } to { transform: none; } }
.utd-drawer__head { display: flex; align-items: center; justify-content: space-between; padding: 18px 22px; border-bottom: 1px solid var(--utd-border); }
.utd-drawer__close, .utd-modal__close {
  border: 0; background: none; font-size: 22px; line-height: 1; color: var(--utd-muted); cursor: pointer;
}
.utd-drawer__body { flex: 1; overflow-y: auto; padding: 8px 22px; }
.utd-drawer__row { display: flex; gap: 12px; padding: 14px 0; border-bottom: 1px solid var(--utd-border); }
.utd-drawer__row img { width: 62px; height: 62px; border-radius: 12px; object-fit: contain; background: var(--utd-surface); }
.utd-drawer__row strong { font-size: 13px; font-weight: 600; display: block; }
.utd-drawer__row em { font-style: normal; font-size: 12px; color: var(--utd-muted); }
.utd-drawer__foot { padding: 18px 22px; border-top: 1px solid var(--utd-border); display: flex; flex-direction: column; gap: 12px; }
.utd-drawer__total { display: flex; justify-content: space-between; align-items: baseline; font-size: 13px; }
.utd-drawer__total strong { font-size: 20px; }
.utd-drawer__cta { width: 100%; }
.utd-drawer__link { text-align: center; font-size: 12px; color: var(--utd-muted); }

.utd-freeship { padding: 14px 22px; background: var(--utd-surface); }
.utd-freeship__track { height: 6px; border-radius: 999px; background: #DCE5E8; overflow: hidden; }
.utd-freeship__track span { display: block; height: 100%; background: var(--utd-primary); border-radius: 999px; transition: width .4s; }
.utd-freeship__label { margin: 8px 0 0; font-size: 12px; color: var(--utd-muted); }

.utd-modal__panel {
  position: absolute; top: 50%; left: 50%; translate: -50% -50%;
  width: min(880px, 92vw); max-height: 88vh; overflow-y: auto;
  background: #fff; border-radius: var(--utd-radius); padding: 28px;
}
.utd-modal__close { position: absolute; top: 14px; right: 18px; }
.utd-quickview { display: grid; grid-template-columns: 1fr 1fr; gap: 28px; }
.utd-quickview img { width: 100%; border-radius: 14px; background: var(--utd-surface); object-fit: contain; aspect-ratio: 1; }
.utd-quickview h2 { margin: 0 0 8px; font-size: 22px; }
.utd-quickview__price { font-size: 24px; font-weight: 700; }

.utd-comparebar {
  position: fixed; bottom: 18px; left: 50%; translate: -50% 0; z-index: 90;
  display: flex; align-items: center; gap: 14px; padding: 12px 16px;
  background: #fff; border: 1px solid var(--utd-border); border-radius: 999px;
  box-shadow: 0 18px 44px rgba(14,28,34,.14);
}
.utd-comparebar__items { display: flex; gap: 8px; }
/* Each slot is a remove button: the thumbnail fills it, an × fades in over it. */
.utd-comparebar__slot {
  position: relative; width: 40px; height: 40px; padding: 0; overflow: hidden;
  border: 1px solid var(--utd-border); border-radius: 10px;
  background: var(--utd-surface); cursor: pointer;
}
.utd-comparebar__items img { width: 100%; height: 100%; border-radius: inherit; object-fit: contain; display: block; }
.utd-comparebar__slot::after {
  content: "×"; position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  font-size: 20px; line-height: 1; color: #fff;
  background: rgba(14,28,34,.62); opacity: 0; transition: opacity .15s;
}
.utd-comparebar__slot:hover::after,
.utd-comparebar__slot:focus-visible::after { opacity: 1; }
.utd-comparebar__clear {
  padding: 0; border: 0; background: none; cursor: pointer;
  font-family: inherit; font-size: 13px; color: var(--utd-muted); text-decoration: underline;
}
.utd-comparebar__clear:hover { color: var(--utd-ink); }

/* Mobile bar ------------------------------------------------------------- */
.utd-mobilebar { display: none; }
@media (max-width: 782px) {
  .utd-mobilebar {
    position: fixed; bottom: 0; left: 0; right: 0; z-index: 90;
    display: grid; grid-template-columns: repeat(4, 1fr);
    background: #fff; border-top: 1px solid var(--utd-border); padding: 8px 0 10px;
  }
  .utd-mobilebar a, .utd-mobilebar button {
    display: flex; flex-direction: column; align-items: center; gap: 4px;
    border: 0; background: none; font-size: 10px; font-weight: 600; color: var(--utd-ink); font-family: inherit; position: relative;
  }
  .utd-mobilebar span { width: 20px; height: 20px; }
  /* Everything that pins itself to the bottom of a phone screen measures from
     this, so the tab bar never lands on top of another control. */
  :root { --utd-mobilebar-h: 59px; }
  .utd-sticky-atc { bottom: var(--utd-mobilebar-h); }
  /* Tighter on a phone: the bar was 94px because the name and the button both
     wrapped. One line each brings it to ~64px, which is a strip rather than a
     third of the screen. */
  .utd-sticky-atc__inner { padding: 10px 16px; gap: 12px; }
  .utd-sticky-atc img { width: 42px; height: 42px; flex-basis: 42px; }
  .utd-sticky-atc__meta strong { font-size: 13px; }
  .utd-sticky-atc__meta span { font-size: 13px; font-weight: 700; color: var(--utd-ink); }
  .utd-sticky-atc .utd-btn { padding-inline: 20px; }
  /* The buy bar and the brands button want the same corner. On a product page
     the shopper is buying, so the buy bar wins and the button steps out. */
  body.single-product .utd-brandfab { display: none; }
  .utd-mobilebar em { position: absolute; top: -4px; right: 12px; font-style: normal; min-width: 15px; height: 15px; border-radius: 999px; background: var(--utd-primary); color: #fff; font-size: 9px; display: grid; place-items: center; }
  body.utd { padding-bottom: 64px; }
  /* A product page stacks the buy bar on top of the tab bar, so the footer
     needs to clear both or the last rows sit under them. */
  body.utd.single-product { padding-bottom: 150px; }
}

/* Compare table ---------------------------------------------------------- */
.utd-compare { overflow-x: auto; }
.utd-compare table { border-collapse: collapse; width: 100%; font-size: 13px; }
.utd-compare th, .utd-compare td { border: 1px solid var(--utd-border); padding: 12px 14px; text-align: left; vertical-align: top; }
.utd-compare thead th { background: var(--utd-surface); }
.utd-compare__price { display: block; margin-top: 4px; color: var(--utd-primary-dark); font-weight: 700; }

/* Footer ----------------------------------------------------------------- */
.utd-footer { background: var(--utd-footer-bg); color: rgba(255,255,255,.72); }
.utd-footer a { color: rgba(255,255,255,.72); }
.utd-footer a:hover { color: #fff; }
.utd-footer__title { color: #fff; font-size: 13px; letter-spacing: .06em; text-transform: uppercase; }
.utd-footer__about { max-width: 44ch; }
.utd-footer__rule { border: 0; border-top: 1px solid rgba(255,255,255,.14); margin: 40px 0 20px; }
.utd-footer__base { font-size: 12px; }
.utd-newsletter { display: flex; gap: 8px; margin-top: 18px; max-width: 340px; }
.utd-newsletter input {
  flex: 1; border: 1px solid rgba(255,255,255,.2); background: rgba(255,255,255,.06);
  color: #fff; border-radius: 999px; padding: 11px 16px; font-size: 13px; font-family: inherit;
}
.utd-newsletter button { border: 0; border-radius: 999px; padding: 0 20px; background: var(--utd-primary); color: #fff; font-weight: 700; font-size: 13px; cursor: pointer; }

/* Home-page band variant. It MUST stay directly below the three rules above:
   they share its specificity, and they are written for the dark footer —
   white text on a translucent fill, which is invisible on the band's white
   pill — so whichever comes last wins. Every override here is undoing one of
   them, including box-sizing: the base input adds 11px padding and a 1px
   border to a 44px height, which is what inflated the pill to 80px tall. */
.utd-newsletter--band {
  grid-column: 2; grid-row: 1 / 3; justify-self: end;
  box-sizing: border-box; align-items: center;
  margin: 0; max-width: none; width: 100%;
  gap: 6px; padding: 6px 6px 6px 22px;
  background: #fff; border-radius: 999px;
}
.utd-newsletter--band input {
  flex: 1 1 auto; min-width: 0; box-sizing: border-box;
  height: 44px; padding: 0;
  border: 0; background: none; color: var(--utd-ink);
  font-family: inherit; font-size: 14px; outline: none;
}
.utd-newsletter--band input::placeholder { color: var(--utd-muted); opacity: 1; }
.utd-newsletter--band input:focus-visible { outline: 2px solid var(--utd-primary); outline-offset: 2px; border-radius: 999px; }
.utd-newsletter--band button {
  flex: 0 0 auto; box-sizing: border-box;
  height: 44px; padding: 0 22px;
  background: var(--utd-ink); font-size: 13px;
}
.utd-newsletter--band button:hover { background: var(--utd-primary-dark); }
.utd-newsletter__done { margin: 0; font-size: 14px; }
.utd-nlband .utd-newsletter__done { color: #fff; }
.utd-payments { display: flex; flex-wrap: wrap; gap: 8px; }
.utd-payments span { padding: 5px 11px; border: 1px solid rgba(255,255,255,.18); border-radius: 8px; font-size: 11px; }

/* Distraction-free checkout --------------------------------------------- */
.utd-focus .utd-navbar, .utd-focus .utd-topbar, .utd-focus .utd-footer__cols, .utd-focus .utd-announce { display: none; }

.utd-empty { padding: 40px 0; color: var(--utd-muted); font-size: 14px; }

/* Category mega-menu ------------------------------------------------------ */
.utd-catmenu { position: relative; }
.utd-catbtn {
  display: inline-flex; align-items: center; gap: 10px; height: 44px; padding: 0 20px;
  background: var(--utd-primary); color: #fff; border: 0; font-size: 13px; font-weight: 700;
  cursor: pointer; font-family: inherit;
}
.utd-catbtn:hover, .utd-catmenu.is-open .utd-catbtn { background: var(--utd-primary-dark); }
.utd-catbtn__bars { width: 14px; height: 10px; border-top: 2px solid currentColor; border-bottom: 2px solid currentColor; position: relative; }
.utd-catbtn__bars::after { content: ""; position: absolute; top: 3px; left: 0; right: 0; height: 2px; background: currentColor; }

.utd-mega {
  position: absolute; top: calc(100% + 1px); left: 0; z-index: 80;
  width: min(1100px, calc(100vw - 48px));
  background: #fff; border: 1px solid var(--utd-border); border-radius: 0 0 var(--utd-radius) var(--utd-radius);
  box-shadow: 0 28px 70px rgba(14,28,34,.16); overflow: hidden;
  animation: utdMegaIn .22s cubic-bezier(.16,1,.3,1);
}
@keyframes utdMegaIn { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: none; } }
.utd-mega__inner { display: grid; grid-template-columns: 244px minmax(0,1fr) 240px; min-height: 340px; }
.utd-mega__rail { border-right: 1px solid var(--utd-border); background: var(--utd-surface); padding: 12px 0; overflow-y: auto; max-height: 460px; }
.utd-mega__tab {
  display: flex; align-items: center; justify-content: space-between; gap: 10px; width: 100%;
  padding: 11px 20px; border: 0; background: none; font-family: inherit;
  font-size: 13px; font-weight: 600; color: var(--utd-ink); text-align: left; cursor: pointer;
}
.utd-mega__tab em { font-style: normal; font-size: 11px; color: var(--utd-muted); }
.utd-mega__tab:hover, .utd-mega__tab.is-active { background: #fff; color: var(--utd-primary-dark); box-shadow: inset 3px 0 0 var(--utd-primary); }
.utd-mega__panes { padding: 24px 28px; }
.utd-mega__pane { display: none; }
.utd-mega__pane.is-active { display: block; animation: utdMegaIn .2s ease both; }
.utd-mega__head { display: flex; align-items: baseline; justify-content: space-between; gap: 20px; margin-bottom: 16px; }
.utd-mega__head h3 { margin: 0; font-size: 18px; }
.utd-mega__head a { font-size: 12px; font-weight: 700; }
.utd-mega__links { list-style: none; margin: 0; padding: 0; columns: 2; column-gap: 28px; }
.utd-mega__links li { break-inside: avoid; margin-bottom: 2px; }
.utd-mega__links a {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 7px 10px; border-radius: 9px; font-size: 13px; color: var(--utd-ink);
}
.utd-mega__links a:hover { background: var(--utd-surface); color: var(--utd-primary-dark); }
.utd-mega__links em { font-style: normal; font-size: 11px; color: var(--utd-muted); }
.utd-mega__empty { font-size: 13px; color: var(--utd-muted); }
.utd-mega__promo { border-left: 1px solid var(--utd-border); padding: 22px 20px; display: flex; flex-direction: column; gap: 12px; background: var(--utd-surface); }
.utd-mega__eyebrow { font-size: 10px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--utd-muted); }
.utd-mega__card { display: flex; gap: 12px; align-items: center; padding: 10px; border-radius: 12px; background: #fff; border: 1px solid var(--utd-border); }
.utd-mega__card:hover { border-color: var(--utd-primary); }
.utd-mega__card img { width: 48px; height: 48px; border-radius: 9px; object-fit: contain; background: var(--utd-surface); }
.utd-mega__card strong { display: block; font-size: 12px; font-weight: 600; color: var(--utd-ink); line-height: 1.35; }
.utd-mega__card em { font-style: normal; font-size: 12px; font-weight: 700; color: var(--utd-primary-dark); }
.utd-mega__builder { margin-top: auto; padding: 14px; border-radius: 12px; background: var(--utd-hero-grad); color: #fff; }
.utd-mega__builder strong { display: block; font-size: 13px; }
.utd-mega__builder span { font-size: 12px; color: rgba(255,255,255,.8); }

/* PC builder ------------------------------------------------------------- */
.utd-builder { max-width: var(--utd-shell); margin-inline: auto; padding: 0 24px; }
.utd-builder__head {
  display: grid; grid-template-columns: minmax(0,1fr) 260px; gap: 28px; align-items: center;
  padding: 30px 32px; border-radius: var(--utd-radius); color: #fff; background: var(--utd-hero-grad);
}
.utd-builder__eyebrow { font-size: 10px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: rgba(255,255,255,.72); }
.utd-builder__head h2 { margin: 8px 0 8px; font-size: clamp(22px, 3vw, 32px); color: #fff; }
.utd-builder__head p { margin: 0; font-size: 14px; line-height: 1.6; color: rgba(255,255,255,.8); max-width: 62ch; }
.utd-builder__summary { text-align: right; }
.utd-builder__summary span { font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: rgba(255,255,255,.7); }
.utd-builder__summary strong { display: block; font-size: 30px; letter-spacing: -.02em; }
/* Progress against the required parts, so "how far am I" is answered without
   counting rows. */
.utd-builder__bar {
  display: block; width: 150px; height: 4px; margin: 8px 0 0 auto;
  border-radius: 999px; background: rgba(255,255,255,.22); overflow: hidden;
}
.utd-builder__bar > span {
  display: block; width: 0; height: 100%; border-radius: inherit;
  background: #fff; transition: width .3s cubic-bezier(.16,1,.3,1);
}
.utd-builder__summary em { font-style: normal; font-size: 12px; color: rgba(255,255,255,.7); }

.utd-builder__alerts { display: flex; flex-direction: column; gap: 8px; margin: 16px 0 0; }
.utd-builder__alert { margin: 0; padding: 12px 16px; border-radius: 12px; font-size: 13px; }
.utd-builder__alert.is-info { background: var(--utd-surface); color: var(--utd-muted); }
.utd-builder__alert.is-warn { background: var(--utd-sale-soft, #FDECEB); color: var(--utd-sale); font-weight: 600; }

.utd-builder__slots { list-style: none; margin: 18px 0 0; padding: 0; display: flex; flex-direction: column; gap: 12px; counter-reset: slot; }
.utd-builder__slot {
  display: grid; grid-template-columns: 230px minmax(0,1fr) auto; gap: 20px; align-items: center;
  padding: 16px 20px; border: 1px solid var(--utd-border); border-radius: var(--utd-radius); background: #fff;
  transition: border-color .2s, box-shadow .2s, opacity .2s;
}
.utd-builder__slot.is-filled { border-color: var(--utd-primary); box-shadow: 0 0 0 3px var(--utd-primary-08, rgba(51,163,190,.08)); }
.utd-builder__slot.is-locked { opacity: .58; }
.utd-builder__slot-main { display: flex; align-items: center; gap: 14px; }
/* Each slot gets the glyph of the part it holds. These were flat coloured
   squares — eight identical placeholders down the page, telling a shopper
   nothing about which row is the graphics card. */
.utd-builder__slot-icon {
  position: relative; width: 38px; height: 38px; border-radius: 11px;
  background: var(--utd-surface); flex-shrink: 0;
}
.utd-builder__slot-icon::after {
  content: ""; position: absolute; inset: 0; margin: auto;
  width: 20px; height: 20px; background: var(--utd-muted);
  -webkit-mask-position: center; mask-position: center;
  -webkit-mask-size: contain; mask-size: contain;
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
}
.utd-builder__slot.is-filled .utd-builder__slot-icon { background: var(--utd-primary); }
.utd-builder__slot.is-filled .utd-builder__slot-icon::after { background: #fff; }
.utd-builder__slot-icon[data-slot="cpu"]::after { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linejoin='round'%3E%3Crect x='6' y='6' width='12' height='12' rx='1.5'/%3E%3Crect x='9.5' y='9.5' width='5' height='5' rx='1'/%3E%3Cpath d='M9 3v3M15 3v3M9 18v3M15 18v3M3 9h3M3 15h3M18 9h3M18 15h3'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linejoin='round'%3E%3Crect x='6' y='6' width='12' height='12' rx='1.5'/%3E%3Crect x='9.5' y='9.5' width='5' height='5' rx='1'/%3E%3Cpath d='M9 3v3M15 3v3M9 18v3M15 18v3M3 9h3M3 15h3M18 9h3M18 15h3'/%3E%3C/svg%3E"); }
.utd-builder__slot-icon[data-slot="motherboard"]::after { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linejoin='round'%3E%3Crect x='3' y='3' width='18' height='18' rx='2'/%3E%3Crect x='7' y='7' width='6' height='6' rx='1'/%3E%3Cpath d='M16 7h2M16 10h2M16 13h2M7 17h9'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linejoin='round'%3E%3Crect x='3' y='3' width='18' height='18' rx='2'/%3E%3Crect x='7' y='7' width='6' height='6' rx='1'/%3E%3Cpath d='M16 7h2M16 10h2M16 13h2M7 17h9'/%3E%3C/svg%3E"); }
.utd-builder__slot-icon[data-slot="memory"]::after { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linejoin='round'%3E%3Crect x='2.5' y='7' width='19' height='10' rx='1.5'/%3E%3Cpath d='M6 17v2M10 17v2M14 17v2M18 17v2M6 10.5h3M11 10.5h3M16 10.5h2'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linejoin='round'%3E%3Crect x='2.5' y='7' width='19' height='10' rx='1.5'/%3E%3Cpath d='M6 17v2M10 17v2M14 17v2M18 17v2M6 10.5h3M11 10.5h3M16 10.5h2'/%3E%3C/svg%3E"); }
.utd-builder__slot-icon[data-slot="gpu"]::after { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linejoin='round'%3E%3Crect x='2.5' y='6.5' width='19' height='11' rx='2'/%3E%3Ccircle cx='8' cy='12' r='2.6'/%3E%3Ccircle cx='15.5' cy='12' r='2.6'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linejoin='round'%3E%3Crect x='2.5' y='6.5' width='19' height='11' rx='2'/%3E%3Ccircle cx='8' cy='12' r='2.6'/%3E%3Ccircle cx='15.5' cy='12' r='2.6'/%3E%3C/svg%3E"); }
.utd-builder__slot-icon[data-slot="storage"]::after { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='7' rx='1.5'/%3E%3Crect x='3' y='13' width='18' height='7' rx='1.5'/%3E%3Cpath d='M6.5 7.5h.01M6.5 16.5h.01'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='7' rx='1.5'/%3E%3Crect x='3' y='13' width='18' height='7' rx='1.5'/%3E%3Cpath d='M6.5 7.5h.01M6.5 16.5h.01'/%3E%3C/svg%3E"); }
.utd-builder__slot-icon[data-slot="cooler"]::after { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Ccircle cx='12' cy='12' r='2'/%3E%3Cpath d='M12 10V4M12 14v6M10 12H4M14 12h6'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Ccircle cx='12' cy='12' r='2'/%3E%3Cpath d='M12 10V4M12 14v6M10 12H4M14 12h6'/%3E%3C/svg%3E"); }
.utd-builder__slot-icon[data-slot="psu"]::after { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linejoin='round'%3E%3Crect x='3' y='5' width='18' height='14' rx='2'/%3E%3Ccircle cx='9' cy='12' r='3.2'/%3E%3Cpath d='M16 9.5h3M16 14.5h3'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linejoin='round'%3E%3Crect x='3' y='5' width='18' height='14' rx='2'/%3E%3Ccircle cx='9' cy='12' r='3.2'/%3E%3Cpath d='M16 9.5h3M16 14.5h3'/%3E%3C/svg%3E"); }
.utd-builder__slot-icon[data-slot="case"]::after { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linejoin='round'%3E%3Crect x='5' y='2.5' width='14' height='19' rx='2'/%3E%3Cpath d='M8.5 6h4M8.5 9h4'/%3E%3Ccircle cx='10.5' cy='15' r='2.4'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linejoin='round'%3E%3Crect x='5' y='2.5' width='14' height='19' rx='2'/%3E%3Cpath d='M8.5 6h4M8.5 9h4'/%3E%3Ccircle cx='10.5' cy='15' r='2.4'/%3E%3C/svg%3E"); }
.utd-builder__slot-copy strong { display: block; font-size: 14px; }
.utd-builder__slot-copy abbr { color: var(--utd-sale); text-decoration: none; }
.utd-builder__slot-copy em { font-style: normal; font-size: 12px; color: var(--utd-muted); }
.utd-builder__slot-pick { display: flex; align-items: center; gap: 14px; }
.utd-builder__slot-pick img { width: 52px; height: 52px; border-radius: 10px; object-fit: contain; background: var(--utd-surface); }
.utd-builder__slot-pick strong { display: block; font-size: 13px; font-weight: 600; }
.utd-builder__slot-pick em { font-style: normal; font-size: 11px; color: var(--utd-muted); }
.utd-builder__price { margin-left: auto; font-size: 15px; font-weight: 700; white-space: nowrap; }
.utd-builder__slot-actions { display: flex; gap: 8px; align-items: center; }

.utd-builder__foot {
  display: flex; align-items: center; justify-content: space-between; gap: 20px; flex-wrap: wrap;
  margin-top: 18px; padding: 18px 22px; border: 1px solid var(--utd-border); border-radius: var(--utd-radius); background: var(--utd-surface);
}
.utd-builder__power span { font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--utd-muted); }
.utd-builder__power strong { display: block; font-size: 20px; }
.utd-builder__foot-actions { display: flex; gap: 10px; flex-wrap: wrap; }

.utd-builder__picker { position: fixed; inset: 0; z-index: 110; }
.utd-builder__picker-scrim { position: absolute; inset: 0; background: rgba(6,16,20,.5); }
.utd-builder__picker-panel {
  position: absolute; top: 50%; left: 50%; translate: -50% -50%;
  width: min(760px, 94vw); max-height: 86vh; display: flex; flex-direction: column;
  background: #fff; border-radius: var(--utd-radius); overflow: hidden;
}
.utd-builder__picker-panel header {
  display: flex; align-items: center; gap: 14px; padding: 18px 22px; border-bottom: 1px solid var(--utd-border);
}
.utd-builder__picker-panel header strong { font-size: 15px; }
.utd-builder__picker-panel header input {
  margin-left: auto; width: 240px; border: 1px solid var(--utd-border); border-radius: 999px;
  padding: 9px 15px; font-size: 13px; font-family: inherit;
}
.utd-builder__picker-note { margin: 0; padding: 12px 22px; background: var(--utd-surface); font-size: 12px; color: var(--utd-muted); }
.utd-builder__picker-list { overflow-y: auto; padding: 8px 12px; }
.utd-builder__option {
  display: flex; align-items: center; gap: 14px; width: 100%; text-align: left;
  padding: 12px; border: 1px solid transparent; border-radius: 14px; background: none; cursor: pointer; font-family: inherit;
}
.utd-builder__option:hover { border-color: var(--utd-primary); background: var(--utd-surface); }
.utd-builder__option img { width: 56px; height: 56px; border-radius: 10px; object-fit: contain; background: var(--utd-surface); }
.utd-builder__option-copy { display: flex; flex-direction: column; gap: 3px; }
.utd-builder__option-copy strong { font-size: 13px; font-weight: 600; }
.utd-builder__option-copy em { font-style: normal; font-size: 11px; color: var(--utd-muted); }
.utd-builder__option-copy em.is-out { color: var(--utd-sale); font-weight: 600; }
.utd-builder__option-price { margin-left: auto; font-size: 14px; font-weight: 700; white-space: nowrap; }
.utd-builder__picker-more { margin: 12px 22px 20px; }

/* Load more / infinite --------------------------------------------------- */
.utd-loadmore { display: block; margin: 28px auto 0; }
.utd-loadmore.is-hidden-until-fail { opacity: .55; }
.utd-loadmore__sentinel { height: 1px; }
.utd-fade-in { animation: utdFadeIn .4s cubic-bezier(.16,1,.3,1) both; }
@keyframes utdFadeIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }

@media (max-width: 1024px) {
  .utd-mega__inner { grid-template-columns: 200px minmax(0,1fr); }
  .utd-mega__promo { display: none; }
  .utd-mega__links { columns: 1; }
  .utd-builder__head { grid-template-columns: 1fr; }
  .utd-builder__summary { text-align: left; }
  .utd-builder__slot { grid-template-columns: 1fr; gap: 14px; }
  .utd-builder__price { margin-left: 0; }
}
@media (max-width: 782px) {
  .utd-mega { position: fixed; left: 0; right: 0; top: auto; width: 100vw; border-radius: 0; }
  .utd-mega__inner { grid-template-columns: 1fr; }
  .utd-mega__rail { display: flex; overflow-x: auto; border-right: 0; border-bottom: 1px solid var(--utd-border); max-height: none; }
  .utd-mega__tab { white-space: nowrap; }
  .utd-builder__picker-panel header { flex-wrap: wrap; }
  .utd-builder__picker-panel header input { margin-left: 0; width: 100%; }
}

/* ==========================================================================
   Live-site corrections. Kept last so they win the cascade against
   WooCommerce and core block styles without needing selector gymnastics.
   ========================================================================== */

/* 1. [hidden] must beat our own display rules.
      .utd-comparebar / .utd-mobilebar set display, which outranks the UA
      [hidden] rule — that is why the empty compare bar floated on screen. */
.utd [hidden],
.utd-comparebar[hidden],
.utd-drawer[hidden],
.utd-modal[hidden],
.utd-mega[hidden],
.utd-sticky-atc[hidden],
.utd-freeship[hidden],
.utd-builder__picker[hidden] { display: none !important; }

/* 2. Button labels. Woo's `.woocommerce a.button` and core's element styles
      both out-specify our single-class rules and can resolve the label to the
      same teal as the fill, making text invisible. Pin it. */
.utd .utd-btn--primary,
.utd a.utd-btn--primary,
.utd button.utd-btn--primary,
.utd .utd-hero__cta,
.utd .utd-card__btn,
.utd .utd-catbtn,
.utd .utd-search__btn,
.utd .utd-facets__apply,
.utd .utd-drawer__cta,
.utd li.product a.button,
.utd li.product .button,
.utd .utd-products .button,
.utd .wp-block-button__link,
.utd .wc-block-components-button {
  color: #fff !important;
  -webkit-text-fill-color: #fff !important;
  -webkit-background-clip: border-box;
  background-clip: border-box;
  text-indent: 0;
}
.utd .utd-btn--primary:hover,
.utd a.utd-btn--primary:hover,
.utd .utd-hero__cta:hover { color: #fff !important; -webkit-text-fill-color: #fff; }

/* The hero CTA inverts on hover — restore dark ink there. */
.utd .utd-hero__cta:hover { background: #fff; color: var(--utd-ink) !important; -webkit-text-fill-color: var(--utd-ink); }

/* Ghost / outline buttons keep dark labels. */
.utd .utd-ghost-btn,
.utd .utd-buildercta__btn--ghost,
.utd .utd-btn--ghost { color: var(--utd-ink) !important; -webkit-text-fill-color: var(--utd-ink); }
.utd .utd-buildercta__btn--ghost:hover { color: var(--utd-primary) !important; -webkit-text-fill-color: var(--utd-primary); }

/* 3. Icons. These were empty coloured squares waiting on an icon font;
      draw them as masked SVG so they inherit colour and need no assets. */
.utd-action__icon,
.utd-mobilebar [data-icon],
.utd-trustbar__icon,
.utd-builder__slot-icon {
  -webkit-mask-position: center; mask-position: center;
  -webkit-mask-size: contain; mask-size: contain;
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
}

.utd-action__icon,
.utd-mobilebar [data-icon] { border-radius: 0; background: var(--utd-ink); opacity: .75; }
.utd-action__icon[data-icon="user"],
.utd-mobilebar [data-icon="user"] {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round'%3E%3Ccircle cx='12' cy='8' r='4'/%3E%3Cpath d='M4 21c0-4 3.6-6.5 8-6.5s8 2.5 8 6.5'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round'%3E%3Ccircle cx='12' cy='8' r='4'/%3E%3Cpath d='M4 21c0-4 3.6-6.5 8-6.5s8 2.5 8 6.5'/%3E%3C/svg%3E");
}
.utd-action__icon[data-icon="heart"] {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round'%3E%3Cpath d='M12 20s-7-4.4-7-9.2A3.8 3.8 0 0 1 12 8a3.8 3.8 0 0 1 7 2.8C19 15.6 12 20 12 20z'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round'%3E%3Cpath d='M12 20s-7-4.4-7-9.2A3.8 3.8 0 0 1 12 8a3.8 3.8 0 0 1 7 2.8C19 15.6 12 20 12 20z'/%3E%3C/svg%3E");
}
/* The mobile bar's own four: home and grid are unique to it, user and cart
   share the masks above and in the card tools. */
.utd-mobilebar [data-icon="home"] {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 10.5 12 4l8 6.5V20a1 1 0 0 1-1 1h-4v-6H9v6H5a1 1 0 0 1-1-1z'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 10.5 12 4l8 6.5V20a1 1 0 0 1-1 1h-4v-6H9v6H5a1 1 0 0 1-1-1z'/%3E%3C/svg%3E");
}
.utd-mobilebar [data-icon="grid"] {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Crect x='3' y='3' width='8' height='8' rx='1.6'/%3E%3Crect x='13' y='3' width='8' height='8' rx='1.6'/%3E%3Crect x='3' y='13' width='8' height='8' rx='1.6'/%3E%3Crect x='13' y='13' width='8' height='8' rx='1.6'/%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%3Crect x='3' y='3' width='8' height='8' rx='1.6'/%3E%3Crect x='13' y='3' width='8' height='8' rx='1.6'/%3E%3Crect x='3' y='13' width='8' height='8' rx='1.6'/%3E%3Crect x='13' y='13' width='8' height='8' rx='1.6'/%3E%3C/svg%3E");
}
.utd-mobilebar [data-icon="cart"] {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 4h2.2l2.3 10.2h9.6L19 7.4H6.2'/%3E%3Ccircle cx='9.5' cy='19' r='1.5'/%3E%3Ccircle cx='16.5' cy='19' r='1.5'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 4h2.2l2.3 10.2h9.6L19 7.4H6.2'/%3E%3Ccircle cx='9.5' cy='19' r='1.5'/%3E%3Ccircle cx='16.5' cy='19' r='1.5'/%3E%3C/svg%3E");
}

/* Trust bar: keep the soft tile, put a glyph inside it. */
.utd-trustbar__icon {
  position: relative; background: var(--utd-primary-08, rgba(51,163,190,.08));
  -webkit-mask-image: none; mask-image: none;
}
.utd-trustbar__icon::after {
  content: ""; position: absolute; inset: 8px;
  background: var(--utd-primary);
  -webkit-mask-position: center; mask-position: center;
  -webkit-mask-size: contain; mask-size: contain;
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
}
.utd-trustbar__icon[data-icon="delivery"]::after {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2 7h11v9H2zM13 10h5l3 3v3h-8z'/%3E%3Ccircle cx='6' cy='18' r='1.6'/%3E%3Ccircle cx='17' cy='18' r='1.6'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2 7h11v9H2zM13 10h5l3 3v3h-8z'/%3E%3Ccircle cx='6' cy='18' r='1.6'/%3E%3Ccircle cx='17' cy='18' r='1.6'/%3E%3C/svg%3E");
}
.utd-trustbar__icon[data-icon="shield"]::after {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3l7 3v6c0 4-3 7.5-7 9-4-1.5-7-5-7-9V6z'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3l7 3v6c0 4-3 7.5-7 9-4-1.5-7-5-7-9V6z'/%3E%3C/svg%3E");
}
.utd-trustbar__icon[data-icon="check"]::after {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6L9 17l-5-5'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6L9 17l-5-5'/%3E%3C/svg%3E");
}
.utd-trustbar__icon[data-icon="return"]::after {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 12a8 8 0 1 0 3-6.2'/%3E%3Cpath d='M4 4v5h5'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 12a8 8 0 1 0 3-6.2'/%3E%3Cpath d='M4 4v5h5'/%3E%3C/svg%3E");
}

/* Builder slot tiles get the same treatment. */
.utd-builder__slot-icon { position: relative; }
.utd-builder__slot-icon::after {
  content: ""; position: absolute; inset: 9px; border-radius: 3px;
  background: var(--utd-primary); opacity: .55;
}
.utd-builder__slot.is-filled .utd-builder__slot-icon::after { background: #fff; opacity: 1; }

/* 4. Product cards. Fixed-ratio image well, absolute badge/tools, and a
      footer row that pins the price against a round add-to-cart button. */
.utd-products { align-items: stretch; }
/* The post-template carries core's is-layout-flow class, whose
   `> * + * { margin-block-start: 24px }` is harmless in a flow list but pushes
   every card except the first down inside our grid. Spacing here is gap. */
.utd .utd-products > *,
.utd .utd-products > * + * { margin-block-start: 0; margin-block-end: 0; }
.utd-products.is-hidden { display: none; }

.utd-card,
.utd .utd-products li.product {
  position: relative;
  display: flex; flex-direction: column; gap: 8px;
  height: 100%; min-height: 0; padding: 14px;
  overflow: hidden;
}
/* Flex children default to min-height:auto, which lets any one of them push
   the card taller than its own box. Nothing in a card may do that. */
.utd-card > *,
.utd .utd-products li.product > * { min-height: 0; min-width: 0; }

/* The image well is a FLAT height, not an aspect ratio: aspect-ratio only
   states a preference, and the automatic minimum content size still wins —
   which is what let a card grow to several hundred pixels. */
.utd-card__link {
  flex: 0 0 var(--utd-card-img, 190px);
  height: var(--utd-card-img, 190px);
  box-sizing: border-box;
  display: flex; align-items: center; justify-content: center;
  width: 100%;
  margin: 0 0 4px; padding: 10px;
  border-radius: 12px; background: #fff;
  overflow: hidden;
}

/* WooCommerce's own loop template wraps the image AND the title AND the price
   in a.woocommerce-LoopProduct-link. Styling that anchor as an image well
   centres the text inside it and clips it — the tall, blank card. It stays a
   plain block; only the image inside it becomes the well. */
.utd .utd-products li.product > a.woocommerce-LoopProduct-link {
  display: block; width: 100%; margin: 0; padding: 0;
  color: inherit; background: none;
}

/* Fit inside the well with max-*, never height:100%. A grid item whose
   align-self is center (place-items: center) resolves a percentage height
   against a row it is itself sizing — Chrome settled on 1500px for a 265px
   image, so object-fit centred the photo far below the visible box. */
.utd-card__link img,
.utd-card .utd-card__img,
.utd .utd-products li.product img {
  width: auto; height: auto;
  max-width: 100%; max-height: 100%;
  aspect-ratio: auto;
  object-fit: contain;
  background: none;
  border-radius: 0;
  display: block;
}
/* Woo's default markup has no well element — give the image one. The bare
   `> img` also catches any loop thumbnail a plugin hooks back in, so a stray
   image can never blow the card height open again. */
.utd .utd-products li.product > a.woocommerce-LoopProduct-link > img,
.utd .utd-products li.product > a.woocommerce-LoopProduct-link > .attachment-woocommerce_thumbnail,
.utd-card > img,
.utd .utd-products li.product > img {
  height: var(--utd-card-img, 190px);
  box-sizing: border-box;
  margin-bottom: 10px; padding: 10px;
  border-radius: 12px; background: #fff;
}

/* Text stack */
.utd-card__body { display: flex; flex-direction: column; gap: 5px; }
/* One line, ellipsis — a long "AMD Series · Motherboards" must not wrap and
   shove the title around. */
.utd-card__cat {
  font-size: 10.5px; font-weight: 700; letter-spacing: .09em; text-transform: uppercase;
  color: var(--utd-primary);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.utd-card__title a { color: inherit; }
.utd-card__title a:hover { color: var(--utd-primary); }
/* Always reserve two lines. Clamping alone left one-line titles with a ragged
   gap above the price, because the footer is pushed down by margin-top:auto. */
.utd-card__title,
.utd .utd-products li.product .woocommerce-loop-product__title {
  margin: 0; font-size: 14px; font-weight: 600; line-height: 1.45;
  min-height: 2.9em;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden;
}
.utd-card__rating { font-size: 12px; color: var(--utd-muted); }
.utd-card__rating em { font-style: normal; }

/* Badge top-left, tools top-right — both float over the image well. The
   wishlist heart stays visible; quick view and compare fade in on hover. */
.utd-card .utd-badge,
.utd .utd-products li.product .utd-badge {
  position: absolute; top: 12px; left: 12px; z-index: 2; align-self: auto;
}
.utd-card .onsale,
.utd .utd-products li.product .onsale {
  position: absolute; top: 46px; left: 12px; z-index: 2; margin: 0;
  padding: 4px 10px; border-radius: 999px;
  background: var(--utd-sale-soft, #FDECEB); color: var(--utd-sale);
  font-size: 11px; font-weight: 700; line-height: 1.4; min-height: 0; min-width: 0;
}

/* Footer row: price left, round button right, separated by a hairline so the
   price reads as a distinct tier rather than floating after the title. */
.utd-card__foot {
  margin-top: auto; padding-top: 12px;
  border-top: 1px solid var(--utd-border);
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
}
.utd-card__price,
.utd .utd-products li.product .price {
  margin: 0; font-size: 17px; font-weight: 700; line-height: 1.25;
  letter-spacing: -.01em; color: var(--utd-ink);
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 7px;
}
/* Sale pricing: the old price steps back, the new one takes the sale colour. */
.utd-card__price del,
.utd .utd-products li.product .price del {
  order: 2; font-size: 13px; font-weight: 500; color: var(--utd-muted); text-decoration: line-through;
}
.utd-card__price ins,
.utd .utd-products li.product .price ins { order: 1; text-decoration: none; color: var(--utd-sale); }
.utd-card__price .woocommerce-Price-currencySymbol { font-size: .78em; font-weight: 600; opacity: .7; margin-left: 1px; }

.utd-card__foot .utd-card__btn,
.utd .utd-products li.product .utd-card__foot a.button,
.utd .utd-products li.product .utd-card__foot button.button {
  flex: 0 0 auto;
  /* border-box, or the 1px button border makes it 46x44 and the 50% radius
     draws an ellipse instead of a circle. */
  box-sizing: border-box;
  width: 40px; height: 40px; min-width: 40px; min-height: 40px;
  aspect-ratio: 1 !important;  /* a circle even if something else sets one side */
  padding: 0 !important;
  border-radius: 50% !important; max-height: none !important;
  /* The label text still lives in the button. Whatever width it ends up with
     (inherited letter-spacing, whitespace, Woo markup) must not push the
     glyph, so the glyph is positioned off this box, not flowed next to it. */
  position: relative;
  display: inline-flex !important; align-items: center; justify-content: center;
  background: var(--utd-ink) !important; line-height: 0;
  font-size: 0; /* the label is announced by aria, the glyph is drawn below */
  overflow: hidden;
  border: 0;
  box-shadow: 0 6px 16px rgba(14,28,34,.18);
  transition: background .2s, transform .2s cubic-bezier(.16,1,.3,1), box-shadow .2s;
}
/* The glyph is a masked SVG, not a text character. A "+" or an arrow drawn as
   text is positioned by font metrics — baseline, line box, side bearings — so
   it never lands in the optical centre of a circle, and no amount of nudging
   fixes it across fonts. A fixed-size box centred by the parent's grid is
   geometrically exact. */
.utd-card__foot .utd-card__btn::after,
.utd .utd-products li.product .utd-card__foot a.button::after,
.utd .utd-products li.product .utd-card__foot button.button::after {
  content: "";
  position: absolute; inset: 0; margin: auto;  /* geometric centre, sibling-proof */
  width: 17px; height: 17px;
  background: #fff;
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round'%3E%3Cpath d='M12 5v14M5 12h14'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round'%3E%3Cpath d='M12 5v14M5 12h14'/%3E%3C/svg%3E");
  -webkit-mask-position: center; mask-position: center;
  -webkit-mask-size: contain; mask-size: contain;
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
}
/* A "+" on a sold-out card promises an add to cart that cannot happen — that
   button only links through to the product, so show it as a link. */
.utd-card.outofstock .utd-card__btn::after,
.utd .utd-products li.product.outofstock .utd-card__foot a.button::after {
  width: 18px; height: 18px;
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E");
}
.utd-card.outofstock .utd-card__btn,
.utd .utd-products li.product.outofstock .utd-card__foot a.button {
  background: var(--utd-muted) !important; box-shadow: none;
}
.utd .utd-products li.product .utd-card__foot a.button:hover,
.utd-card__foot .utd-card__btn:hover {
  background: var(--utd-primary) !important;
  transform: translateY(-2px);
  box-shadow: 0 10px 22px var(--utd-primary-24, rgba(51,163,190,.24));
}
.utd .utd-products li.product .utd-card__foot a.button:active,
.utd-card__foot .utd-card__btn:active { transform: translateY(0); }
@media (prefers-reduced-motion: reduce) {
  .utd-card__foot .utd-card__btn,
  .utd .utd-products li.product .utd-card__foot a.button { transition: background .2s; }
  .utd .utd-products li.product .utd-card__foot a.button:hover,
  .utd-card__foot .utd-card__btn:hover { transform: none; }
}
/* Woo's "added" tick link sits after the button — keep it out of the row. */
.utd .utd-products li.product a.added_to_cart { display: none; }

/* Section head + category tab pills ------------------------------------- */
.utd-section-head { align-items: center; flex-wrap: wrap; }
.utd-tabs {
  display: flex; flex-wrap: wrap; gap: 6px; padding: 4px;
  border-radius: 999px; background: var(--utd-surface);
}
.utd-tabs__btn {
  border: 0; background: transparent; cursor: pointer; font-family: inherit;
  padding: 9px 18px; border-radius: 999px;
  font-size: 13px; font-weight: 600; color: var(--utd-muted);
  transition: background .2s, color .2s;
}
.utd-tabs__btn:hover { color: var(--utd-ink); }
.utd-tabs__btn.is-active { background: var(--utd-ink); color: #fff; }

/* Product page tabs ------------------------------------------------------ */
/* Its own class: this block used to carry .utd-tabs, the category pill row,
   so the description and the spec table were laid out as pills on a rounded
   grey strip — and on a phone that strip scrolled sideways and clipped them. */
.utd-pdp-tabs { margin-top: 40px; }
.utd-pdp-tabs .wc-tabs,
.utd-pdp-tabs ul.tabs {
  display: flex; flex-wrap: wrap; gap: 4px; margin: 0 0 20px; padding: 0 0 2px;
  list-style: none; border-bottom: 1px solid var(--utd-border);
}
.utd-pdp-tabs .wc-tabs li a,
.utd-pdp-tabs ul.tabs li a {
  display: block; padding: 11px 18px; border-radius: 12px 12px 0 0;
  font-size: 14px; font-weight: 600; color: var(--utd-muted);
}
.utd-pdp-tabs .wc-tabs li.active a,
.utd-pdp-tabs ul.tabs li.active a {
  color: var(--utd-ink); background: var(--utd-surface);
  box-shadow: inset 0 -2px 0 var(--utd-primary);
}
.utd-pdp-tabs h2 { font-size: 20px; margin: 0 0 12px; }
.utd-pdp-tabs p { margin: 0 0 12px; }
/* The spec table is the widest thing on the page. It scrolls in its own box
   rather than stretching the panel past the screen. */
.utd-pdp-tabs table { width: 100%; border-collapse: collapse; font-size: 13px; }
.utd-pdp-tabs table th,
.utd-pdp-tabs table td {
  padding: 10px 12px; text-align: left; vertical-align: top;
  border-bottom: 1px solid var(--utd-border);
}
.utd-pdp-tabs table th { width: 42%; font-weight: 600; color: var(--utd-muted); }
.utd-pdp-tabs table tr:nth-child(odd) { background: var(--utd-surface); }
@media (max-width: 782px) {
  .utd-pdp-tabs .woocommerce-Tabs-panel { overflow-x: auto; }
  .utd-pdp-tabs table { min-width: 340px; }
  .utd-pdp-tabs table th { width: 45%; }
  .utd-pdp-tabs table th,
  .utd-pdp-tabs table td { padding: 9px 10px; }
}

/* Every theme button: fixed geometry regardless of inherited rules. The card
   button is excluded — it is a fixed 44px circle set just above, and this
   rule's height:auto is what flattened it into an ellipse. */
.utd .utd-btn:not(.utd-card__btn), .utd .utd-hero__cta, .utd .utd-ghost-btn {
  aspect-ratio: auto; height: auto; min-height: 0; line-height: 1.2;
  display: inline-flex; align-items: center; justify-content: center;
}
.utd .utd-hero__cta { padding: 15px 30px !important; }

/* 5. Hero. The fixed compare bar (z-index 90) was painting over the slider's
      controls, which is why the slider looked like it had none. */
.utd-hero { isolation: isolate; }
.utd-hero__arrow, .utd-hero__dots, .utd-hero__count { z-index: 95; }
.utd .utd-hero__cta { min-height: 52px; padding: 15px 30px; }
/* The primary CTA inverts on hover; the outline one only brightens. */
.utd .utd-hero__cta:hover { background: #fff; color: var(--utd-ink) !important; -webkit-text-fill-color: var(--utd-ink); }
.utd .utd-hero__cta--ghost:hover { background: rgba(255,255,255,.14); color: #fff !important; -webkit-text-fill-color: #fff; border-color: #fff; }

/* Keep the fixed bars clear of the hero controls. */
.utd-comparebar { bottom: 84px; }
.utd-comparebar.is-visible { display: flex; }

/* List view. These sit here, after the card rules above, and carry the same
   `.utd` prefix: `.utd .utd-products li.product` is (0,3,1) and would
   otherwise keep the card a column flex no matter what the list rules said. */
.utd .utd-products--list { grid-template-columns: 1fr; gap: 14px; }
.utd .utd-products--list > li.product,
.utd .utd-products--list > .utd-card {
  display: grid;
  grid-template-columns: var(--utd-card-img, 190px) minmax(0, 1fr);
  grid-template-rows: auto auto;
  align-content: center;
  column-gap: 22px; height: auto;
}
.utd .utd-products--list .utd-card__link { margin: 0; grid-column: 1; grid-row: 1 / span 2; align-self: center; }
.utd .utd-products--list .utd-card__body { grid-column: 2; grid-row: 1; align-self: end; }
.utd .utd-products--list .utd-card__title { min-height: 0; -webkit-line-clamp: 3; font-size: 15px; }
.utd .utd-products--list .utd-card__foot {
  grid-column: 2; grid-row: 2; align-self: start;
  margin-top: 12px; padding-top: 12px;
  justify-content: flex-start; gap: 24px;
}
.utd .utd-products--list .utd-card__tools { top: 12px; right: 12px; }

/* Card hover row --------------------------------------------------------- */
/* Four actions over the image: wishlist, add to cart, compare, quick view.
   Centred in the image well rather than stacked in a corner. */
.utd .utd-card__tools,
.utd .utd-products li.product .utd-card__tools {
  position: absolute; z-index: 3;
  left: 50%; translate: -50% 0;
  top: calc(14px + (var(--utd-card-img, 190px) / 2) - 21px);
  display: flex; flex-direction: row; gap: 8px;
  opacity: 0; transform: translateY(8px);
  transition: opacity .25s cubic-bezier(.16,1,.3,1), transform .25s cubic-bezier(.16,1,.3,1);
  pointer-events: none;
}
.utd .utd-card:hover .utd-card__tools,
.utd .utd-card:focus-within .utd-card__tools,
.utd .utd-products li.product:hover .utd-card__tools {
  opacity: 1; transform: translateY(0); pointer-events: auto;
}

.utd .utd-card__tool {
  position: relative;
  width: 42px; height: 42px; flex: 0 0 42px; box-sizing: border-box;
  display: grid; place-items: center; padding: 0;
  border: 1px solid var(--utd-border); border-radius: 50%;
  background: #fff; color: var(--utd-ink); cursor: pointer;
  opacity: 1; /* the row fades as a whole, not per button */
  box-shadow: 0 6px 18px rgba(14,28,34,.14);
  transition: background .18s, border-color .18s, transform .18s;
  font-size: 0;
}
.utd .utd-card__tool::after {
  content: ""; position: absolute; inset: 0; margin: auto;
  width: 19px; height: 19px; background: var(--utd-ink);
  -webkit-mask-position: center; mask-position: center;
  -webkit-mask-size: contain; mask-size: contain;
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
}
.utd .utd-card__tool[data-icon="heart"]::after { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 20.2S4.5 15.6 4.5 10.4A3.9 3.9 0 0 1 12 8a3.9 3.9 0 0 1 7.5 2.4c0 5.2-7.5 9.8-7.5 9.8z'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 20.2S4.5 15.6 4.5 10.4A3.9 3.9 0 0 1 12 8a3.9 3.9 0 0 1 7.5 2.4c0 5.2-7.5 9.8-7.5 9.8z'/%3E%3C/svg%3E"); }
.utd .utd-card__tool[data-icon="cart"]::after { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 4h2.2l2.3 10.2h9.6L19 7.4H6.2'/%3E%3Ccircle cx='9.5' cy='19' r='1.5'/%3E%3Ccircle cx='16.5' cy='19' r='1.5'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 4h2.2l2.3 10.2h9.6L19 7.4H6.2'/%3E%3Ccircle cx='9.5' cy='19' r='1.5'/%3E%3Ccircle cx='16.5' cy='19' r='1.5'/%3E%3C/svg%3E"); }
.utd .utd-card__tool[data-icon="compare"]::after { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 12a8 8 0 1 1-2.4-5.7'/%3E%3Cpath d='M20 4.5V10h-5.5'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 12a8 8 0 1 1-2.4-5.7'/%3E%3Cpath d='M20 4.5V10h-5.5'/%3E%3C/svg%3E"); }
.utd .utd-card__tool[data-icon="eye"]::after { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2.5 12S6.3 5.8 12 5.8 21.5 12 21.5 12 17.7 18.2 12 18.2 2.5 12 2.5 12z'/%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2.5 12S6.3 5.8 12 5.8 21.5 12 21.5 12 17.7 18.2 12 18.2 2.5 12 2.5 12z'/%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3C/svg%3E"); }
.utd .utd-card__tool:hover { background: var(--utd-primary); border-color: var(--utd-primary); transform: translateY(-2px); }
.utd .utd-card__tool:hover::after { background: #fff; }
.utd .utd-card__tool.is-on { background: var(--utd-primary); border-color: var(--utd-primary); }
.utd .utd-card__tool.is-on::after { background: #fff; }
.utd .utd-card__tool:focus-visible { outline: 2px solid var(--utd-primary); outline-offset: 3px; }

/* Tooltip. data-tip carries the label; aria-label carries the same text for
   assistive tech, so this is decoration only. */
.utd .utd-card__tool[data-tip]::before {
  content: attr(data-tip);
  position: absolute; bottom: calc(100% + 9px); left: 50%; translate: -50% 0;
  padding: 5px 10px; border-radius: 7px;
  background: var(--utd-ink); color: #fff;
  font-size: 11px; font-weight: 600; line-height: 1.3; white-space: nowrap;
  opacity: 0; transition: opacity .16s; pointer-events: none;
}
.utd .utd-card__tool[data-tip]:hover::before,
.utd .utd-card__tool[data-tip]:focus-visible::before { opacity: 1; }
/* The cart button is a real add-to-cart link, so Woo's own button styling has
   to be undone here. */
.utd .utd-products li.product a.utd-card__tool--cart,
.utd .utd-card__tool--cart {
  width: 42px; height: 42px; min-height: 0; padding: 0 !important;
  background: #fff !important; color: var(--utd-ink) !important;
  border-radius: 50% !important; aspect-ratio: 1 !important;
  display: grid !important; place-items: center;
}
.utd .utd-card__tool--cart::after { content: ""; }
.utd .utd-products li.product a.utd-card__tool--cart:hover,
.utd .utd-card__tool--cart:hover { background: var(--utd-primary) !important; }
.utd .utd-card__tool--cart.loading { opacity: .6; }
.utd .utd-card__tool--cart.added::after { background: var(--utd-primary); }

/* Pagination ------------------------------------------------------------- */
.utd-pagination { margin-top: 32px; gap: 6px; flex-wrap: wrap; }
.utd-pagination .page-numbers,
.utd-pagination .wp-block-query-pagination-previous,
.utd-pagination .wp-block-query-pagination-next {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 40px; height: 40px; padding: 0 13px; box-sizing: border-box;
  border: 1px solid var(--utd-border); border-radius: 999px;
  background: #fff; color: var(--utd-ink);
  font-size: 13px; font-weight: 600; text-decoration: none;
  transition: background .18s, border-color .18s, color .18s;
}
.utd-pagination .wp-block-query-pagination-numbers { display: flex; gap: 6px; flex-wrap: wrap; }
.utd-pagination a:hover { border-color: var(--utd-primary); color: var(--utd-primary); }
.utd-pagination .page-numbers.current {
  background: var(--utd-ink); border-color: var(--utd-ink); color: #fff;
}
.utd-pagination .page-numbers.dots { border-color: transparent; background: none; min-width: 24px; padding: 0; }

/* Responsive ------------------------------------------------------------- */
@media (max-width: 1024px) {
  .utd-hero-layout { grid-template-columns: minmax(0, 1fr); }
  .utd-hero-promos { grid-template-rows: none; grid-template-columns: 1fr 1fr; }
  .utd-hero__inner { padding: 36px 40px; }
  .utd-hero__dots { left: 40px; }
  .utd-hero__count { right: 40px; }
  .utd-products { grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); }
  .utd-bundles__grid { grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); }
  .utd-shop-layout { flex-wrap: wrap; }
  .utd-shop-aside { flex-basis: 100% !important; }
  .utd-facets { position: static; }
  .utd-quickview { grid-template-columns: 1fr; }
}
@media (max-width: 782px) {
  .utd-hero-block { padding: 14px; }
  .utd-hero__viewport { height: auto; min-height: 470px; }
  .utd-hero__inner { grid-template-columns: 1fr; padding: 34px 22px 76px; gap: 24px; }
  .utd-hero__side { display: none; }
  .utd-hero__arrow { display: none; }
  .utd-hero__dots { left: 22px; bottom: 26px; }
  .utd-hero__count { right: 22px; bottom: 20px; }
  .utd-hero-promos { grid-template-columns: 1fr; }
  .utd-buildercta { padding: 24px 14px; }
  .utd-buildercta__panel { grid-template-columns: 1fr; padding: 32px 24px; gap: 24px; }
  .utd-buildercta__visual { order: -1; }
  .utd-bundles__grid { grid-template-columns: 1fr; }
  .utd-visit__copy { padding: 32px 24px; }
  .utd-visit__map, .utd-visit__map iframe { min-height: 280px; }
  .utd-nlband { grid-template-columns: 1fr; padding: 28px 24px; row-gap: 8px; }
  .utd-nlband__title, .utd-nlband__text { grid-column: 1; }
  .utd-newsletter--band { grid-column: 1; grid-row: auto; justify-self: stretch; width: 100%; margin-top: 14px; }
  /* The bar wrapped to three lines — two for the note, one for the links —
     roughly 90px of dark before anything a shopper wants. One line now: the
     number they can tap, and the links. The delivery promise is marketing and
     the trust bar already carries it. */
  .utd-topbar__inner { flex-wrap: nowrap; gap: 12px; padding: 7px 16px; font-size: 12px; }
  .utd-topbar__msg { display: none; }
  .utd-topbar__note { flex: 0 1 auto; min-width: 0; }
  .utd-topbar__call { min-height: 26px; white-space: nowrap; }
  .utd-topbar__call-label { display: none; }
  .utd-topbar__links { flex: 0 0 auto; gap: 14px; white-space: nowrap; }

  .utd-facets { position: static; }
  .utd-tabs { width: 100%; overflow-x: auto; flex-wrap: nowrap; }
  .utd-toolbar { gap: 10px; }
  .utd-toolbar__form { flex-basis: 100%; order: 3; justify-content: flex-start; }
  .utd-toolbar__search { max-width: none; }
  .utd .utd-products--list > li.product,
  .utd .utd-products--list > .utd-card { grid-template-columns: 120px minmax(0, 1fr); column-gap: 14px; }
  .utd .utd-products--list .utd-card__link { --utd-card-img: 120px; }
  /* The search was told to take its own row (order 3, basis 100%) but the row
     it sits in never wrapped, so it ran 180px off the right edge and the whole
     page scrolled sideways. The actions box dissolves into the header row so
     the field spans the full header width instead of the actions column. */
  .utd-header__main .is-nowrap:has(.utd-actions) { flex-wrap: wrap; gap: 10px; }
  .utd-actions { display: contents; }
  .utd-search { order: 3; flex-basis: 100%; max-width: none; min-width: 0; margin: 0; }
  .utd-sellwith__grid { grid-template-columns: 1fr; }
  .utd-action__label { display: none; }
}