/* Keyboard shortcut to the main content; visible only when focused. */
body.tdsd-ui-design .tdsd-skip-link {
  position: fixed; inset-block-start: 12px; inset-inline-start: 12px;
  z-index: 1000; transform: translateY(calc(-100% - 24px));
  display: inline-flex; align-items: center; min-height: 48px;
  max-width: calc(100vw - 24px); box-sizing: border-box;
  padding: 10px 18px; border: 2px solid #fff; border-radius: 8px;
  background: #10104a; color: #fff; font: 700 16px/1.4 Heebo, Arial, sans-serif;
  text-decoration: underline; text-underline-offset: 3px;
}
body.tdsd-ui-design .tdsd-skip-link:focus {
  transform: none; outline: 3px solid #000098; outline-offset: 3px;
}
body.tdsd-ui-design .tdsd-skip-link:focus-visible {
  outline: 3px solid #000098; outline-offset: 3px;
}
@media print { .tdsd-skip-link { display: none !important; } }

/* Header layout, labeled actions and contact disclosure. */
body.tdsd-ui-design header.site { padding: 22px 0; }
/* Legacy Woo styles pad the body by 15px; let header chrome keep the viewport budget. */
body.tdsd-ui-design:is(.woocommerce, .woocommerce-page) > :is(.top-util, header.site, .navbar, .ticker, footer.site-foot) {
  margin-inline: -15px;
}
body.tdsd-ui-design header.site .header-in {
  grid-template-columns: auto minmax(180px, 1fr) auto;
  gap: 26px;
}
body.tdsd-ui-design header.site .logo { min-width: 0; }
body.tdsd-ui-design header.site .search-row {
  width: 100%; min-width: 0; height: 50px;
  border-radius: 12px; overflow: visible;
}
body.tdsd-ui-design header.site .search-row input {
  min-width: 0; width: 100%; font-size: 16px; padding-inline: 14px;
  border-radius: 0 10px 10px 0;
}
body.tdsd-ui-design header.site .search-row .search-cat { border-radius: 0 10px 10px 0; }
body.tdsd-ui-design header.site .search-row .submit {
  width: 50px; min-width: 50px; min-height: 46px;
  border-radius: 10px 0 0 10px; padding: 0;
}
body.tdsd-ui-design header.site .search-row:focus-within { border-radius: 12px; }
body.tdsd-ui-design header.site .head-actions { gap: 6px; align-items: stretch; }
body.tdsd-ui-design header.site .head-actions > .tdsd-header-action {
  display: flex; flex-direction: column; justify-content: flex-start;
  align-items: center; gap: 5px; width: 66px; min-width: 66px;
  min-height: 86px; height: auto; flex: 0 0 66px;
  padding: 4px 0; border: 0; border-radius: 10px;
  background: transparent; color: var(--tdsd-navy);
  text-decoration: none; line-height: 1.25; box-sizing: border-box;
}
body.tdsd-ui-design header.site .head-actions .tdsd-action-icon {
  position: relative; display: flex; align-items: center; justify-content: center;
  width: 48px; height: 48px; min-width: 48px; flex: 0 0 48px;
  border: 1px solid #bdcbd2; border-radius: 14px;
  background: #fff; color: var(--tdsd-navy); box-shadow: none;
  box-sizing: border-box; transition: background .15s, color .15s, border-color .15s;
}
body.tdsd-ui-design header.site .head-actions .tdsd-action-icon svg {
  display: block; width: 24px; height: 24px; flex: 0 0 24px;
}
body.tdsd-ui-design header.site .head-actions .tdsd-header-wa .tdsd-action-icon {
  background: #107c43; color: #fff; border-color: #107c43;
}
body.tdsd-ui-design header.site .head-actions .cart .tdsd-action-icon {
  background: var(--tdsd-navy); color: #fff; border-color: var(--tdsd-navy);
}
body.tdsd-ui-design header.site .head-actions > .tdsd-header-action:hover .tdsd-action-icon {
  background: var(--tdsd-teal-dark); border-color: var(--tdsd-teal-dark); color: #fff;
}
body.tdsd-ui-design header.site .head-actions .tdsd-action-label {
  display: block; font-size: 12px; font-weight: 600;
  line-height: 1.3; color: var(--tdsd-navy); white-space: normal; max-width: 100%; text-align: center;
}
body.tdsd-ui-design header.site .head-actions .cart .total {
  display: flex; flex-direction: column; align-items: center; gap: 2px;
  line-height: 1.25;
}
body.tdsd-ui-design header.site .head-actions .cart .total .amt {
  font-size: 11px; font-weight: 500; white-space: nowrap;
  color: var(--tdsd-slate);
}
body.tdsd-ui-design header.site .head-actions .cart .circle .cb {
  left: -5px; top: -6px; min-width: 21px; height: 21px;
  border: 2px solid #fff; font-size: 11px; line-height: 1;
}

body.tdsd-ui-design .navbar .navbar-in {
  display: flex; align-items: center; gap: 12px; height: auto; min-height: 56px;
  overflow: visible; padding-block: 4px;
}
body.tdsd-ui-design .navbar .cats-btn { width: 195px; height: 46px; min-height: 46px; border-color: var(--tdsd-navy); }
body.tdsd-ui-design .navbar .nav-links {
  min-width: 0; padding-inline-start: 0; height: auto; min-height: 48px;
}
body.tdsd-ui-design .navbar .nav-links > li > a { font-size: 13px; padding-inline: 6px; min-height: 44px; }
body.tdsd-ui-design .navbar .cats-panel { max-width: calc(100vw - 24px); }
body.tdsd-ui-design .navbar .cats-panel a { min-height: 46px; }
.tdsd-contact-menu { position: relative; align-self: stretch; flex: 0 0 auto; display: flex; align-items: center; }
body.tdsd-ui-design .tdsd-contact-toggle {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  min-width: 110px; min-height: 46px; padding: 9px 14px;
  border: 2px solid var(--tdsd-teal); border-radius: 9px;
  background: var(--tdsd-teal); color: #fff;
  font: 700 15px/1.4 var(--tdsd-font); cursor: pointer;
}
body.tdsd-ui-design .tdsd-contact-toggle:hover,
body.tdsd-ui-design .tdsd-contact-toggle[aria-expanded="true"] {
  background: var(--tdsd-teal-dark); border-color: var(--tdsd-teal-dark);
}
.tdsd-contact-toggle svg { width: 16px; height: 16px; transition: transform .15s; }
.tdsd-contact-toggle[aria-expanded="true"] svg { transform: rotate(180deg); }
.tdsd-header-contact-panel {
  position: absolute; top: 100%; inset-inline-end: 0;
  width: 320px; max-width: calc(100vw - 48px); padding-top: 6px;
  z-index: 90; box-sizing: border-box;
}
.tdsd-header-contact-panel[hidden] { display: none !important; }
.tdsd-header-contact-card {
  background: #fff; border: 3px solid #000; border-radius: 12px;
  padding: 12px; box-shadow: 0 14px 32px rgb(20 45 66 / 16%);
  max-height: calc(100vh - 180px); max-height: calc(100dvh - 180px);
  overflow-y: auto; overscroll-behavior: contain;
}
body.tdsd-ui-design .tdsd-header-contact-heading {
  margin: 0 0 6px; padding: 2px 8px 8px; font-size: 17px;
  font-weight: 700; color: var(--tdsd-navy); border-bottom: 1px solid #dce5e9;
}
body.tdsd-ui-design .tdsd-header-contact-card > a {
  display: flex; align-items: center; gap: 12px; min-height: 60px;
  padding: 9px 8px; border-radius: 7px; color: var(--tdsd-navy);
  text-decoration: none; box-sizing: border-box;
}
body.tdsd-ui-design .tdsd-header-contact-card > a:hover,
body.tdsd-ui-design .tdsd-header-contact-card > a:focus-visible { background: var(--tdsd-teal-soft); }
.tdsd-header-contact-card > a > svg { width: 23px; height: 23px; flex: 0 0 23px; color: #000098; }
.tdsd-header-contact-card > a > span { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.tdsd-header-contact-card strong { font-size: 15px; line-height: 1.4; font-weight: 600; }
.tdsd-header-contact-card small { font-size: 13px; line-height: 1.4; color: #526575; text-align: start; overflow-wrap: anywhere; }
body.tdsd-ui-design :is(.tdsd-header-action, .tdsd-contact-toggle, .tdsd-header-contact-card a, #catsBtn):focus-visible {
  outline: 3px solid #00006b; outline-offset: 3px;
}

@media (max-width: 1100px) {
  body.tdsd-ui-design header.site .header-in { gap: 18px; }
  body.tdsd-ui-design header.site .search-cat { display: none; }
  body.tdsd-ui-design .navbar .cats-btn { width: 190px; }
}
@media (max-width: 900px) {
  body.tdsd-ui-design header.site { padding: 12px 0 16px; }
  body.tdsd-ui-design header.site .header-in { grid-template-columns: minmax(0, 1fr) auto; gap: 12px 18px; }
  body.tdsd-ui-design header.site .search-row { grid-column: 1 / -1; grid-row: 2; max-width: none; }
  body.tdsd-ui-design header.site .head-actions { justify-content: flex-end; }
  body.tdsd-ui-design .navbar .cats-btn { width: 160px; }
}
@media (max-width: 600px) {
  /* The product content wrapper must not duplicate the outer main gutters. */
  body.tdsd-ui-design.single-product main.site-main #main.site-main,
  body.tdsd-ui-design.single-product main.site-main div.product.type-product { padding-inline: 0; }
  body.tdsd-ui-design .top-util-in { height: 34px; padding-inline: 12px; justify-content: center; }
  body.tdsd-ui-design .top-util-l { gap: 8px; font-size: 12px; }
  body.tdsd-ui-design .top-util-l > a[href^="mailto:"], body.tdsd-ui-design .top-util-r { display: none; }
  body.tdsd-ui-design header.site .header-in { padding-inline: 12px; gap: 10px; }
  body.tdsd-ui-design header.site .logo { gap: 5px; }
  body.tdsd-ui-design header.site .logo .tdsd-brand-symbol { width: 34px; height: 30px; }
  body.tdsd-ui-design header.site .logo .text .top { font-size: 21px; letter-spacing: .015em; }
  body.tdsd-ui-design header.site .logo .text .sub { display: none; }
  body.tdsd-ui-design header.site .head-actions { gap: 2px; }
  body.tdsd-ui-design header.site .head-actions > .tdsd-header-action {
    width: 52px; min-width: 52px; flex-basis: 52px; min-height: 68px; gap: 5px; padding-block: 3px;
  }
  body.tdsd-ui-design header.site .head-actions .tdsd-action-icon {
    width: 42px; min-width: 42px; height: 42px; flex-basis: 42px; border-radius: 12px;
  }
  body.tdsd-ui-design header.site .head-actions .tdsd-action-label { font-size: 11px; }
  body.tdsd-ui-design header.site .head-actions .cart .total .amt { display: none; }
  body.tdsd-ui-design .navbar .navbar-in { padding-inline: 12px; gap: 6px; }
  body.tdsd-ui-design .navbar .cats-btn { width: 116px; padding-inline: 9px; gap: 6px; font-size: 12px; }
  body.tdsd-ui-design .navbar .cats-btn .chev { display: none; }
  body.tdsd-ui-design .tdsd-contact-toggle { min-width: 98px; padding-inline: 10px; gap: 6px; font-size: 14px; }
  body.tdsd-ui-design .navbar .nav-links > li > a { font-size: 13px; padding-inline: 10px; }
}
@media (max-width: 380px) {
  body.tdsd-ui-design header.site .header-in { padding-inline: 10px; column-gap: 8px; }
  body.tdsd-ui-design header.site .logo .tdsd-brand-symbol { width: 30px; height: 27px; }
  body.tdsd-ui-design header.site .logo .text .top { font-size: 20px; }
  body.tdsd-ui-design header.site .head-actions > .tdsd-header-action { width: 48px; min-width: 48px; flex-basis: 48px; }
}
@media (prefers-reduced-motion: reduce) {
  .tdsd-contact-toggle svg, body.tdsd-ui-design header.site .head-actions .tdsd-action-icon { transition: none; }
}

