/* Bixoto theme — global utilities + base overrides */

html { scroll-behavior: smooth }

body {
  background: var(--cc-bx-bg);
  color: var(--cc-bx-ink-secondary);
  font-family: var(--cc-font-sans);
  font-size: 14px;
  -webkit-font-smoothing: antialiased;
}

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

.content .inside {
  max-width: var(--cc-bx-max-wide);
  min-width: 0 !important;
  width: 100%;
  padding-left: var(--cc-inside-pad-mobile);
  padding-right: var(--cc-inside-pad-mobile);
  box-sizing: border-box;
}

@media screen and (max-width: 55em) {
  /* Beat legacy 95% inset so pages use the full width + small pad */
  .content .inside {
    max-width: 100% !important;
    width: 100% !important;
  }
}

@media (min-width: 768px) {
  .content .inside {
    padding-left: var(--cc-inside-pad);
    padding-right: var(--cc-inside-pad);
  }
}

/* Typography */
.bx-h1 {
  margin: 0 0 16px 0;
  font-family: var(--cc-font-display);
  font-size: clamp(1.5rem, 2.5vw, 2rem);
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.2;
  color: var(--cc-bx-ink);
}

.bx-h2 {
  margin: 0 0 12px 0;
  font-family: var(--cc-font-display);
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--cc-bx-ink);
}

.bx-sectionTitle {
  margin: 0 0 20px 0;
  font-size: 1.125rem;
  font-weight: 700;
  color: var(--cc-bx-ink);
}

.bx-muted { color: var(--cc-bx-muted) }
.bx-link { color: var(--cc-bx-ink); text-decoration: underline; text-underline-offset: 2px }
.bx-link:hover { color: var(--cc-bx-accent) }

/* Buttons */
.bx-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 12px 20px;
  border: 1px solid transparent;
  border-radius: var(--cc-bx-radius-sm);
  font-family: var(--cc-font-sans);
  font-size: 14px;
  font-weight: 600;
  line-height: 1.2;
  text-decoration: none;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s, color 0.15s, opacity 0.15s;
}

.bx-btn--primary {
  background: var(--cc-bx-accent);
  color: #fff;
}

.bx-btn--primary:hover:not(:disabled) {
  background: var(--cc-bx-accent-hover);
  color: #fff;
}

.bx-btn--outline {
  background: #fff;
  border-color: var(--cc-bx-border-strong);
  color: var(--cc-bx-ink);
}

.bx-btn--outline:hover:not(:disabled) {
  border-color: var(--cc-bx-ink);
  background: var(--cc-bx-surface);
}

.bx-btn--full { width: 100% }
.bx-btn:disabled { opacity: 0.6; cursor: wait }

/* Cards */
.bx-card {
  background: var(--cc-bx-bg);
  border: 1px solid var(--cc-bx-border);
  border-radius: var(--cc-bx-radius);
  box-shadow: var(--cc-bx-shadow);
}

.bx-card:hover {
  border-color: var(--cc-bx-border-strong);
  box-shadow: var(--cc-bx-shadow-md);
}

/* Badges */
.bx-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border-radius: var(--cc-bx-radius-sm);
  font-size: 12px;
  font-weight: 600;
  line-height: 1.3;
}

.bx-btn--secondary {
  background: var(--cc-bx-secondary);
  color: #fff;
  border-color: var(--cc-bx-secondary);
}

.bx-btn--secondary:hover:not(:disabled) {
  background: var(--cc-bx-secondary-hover);
  border-color: var(--cc-bx-secondary-hover);
  color: #fff;
}

.bx-badge--success {
  background: var(--cc-bx-success-bg);
  color: var(--cc-bx-success);
}

.bx-badge--info {
  background: var(--cc-bx-accent-soft);
  color: var(--cc-bx-accent);
}

.bx-badge--sale {
  background: var(--cc-bx-sale-bg);
  color: var(--cc-bx-sale);
}

.bx-badge--muted {
  background: var(--cc-bx-surface-2);
  color: var(--cc-bx-muted);
}

/* Trust strip (header top) */
.bx-trustStrip {
  background: var(--cc-bx-trust-bg);
  border-bottom: 1px solid var(--cc-bx-border);
  color: var(--cc-bx-trust-ink);
}

.bx-trustStrip__inner {
  max-width: var(--cc-bx-max-wide);
  margin: 0 auto;
  padding: 10px 16px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 8px 24px;
  font-size: 12px;
  line-height: 1.4;
}

.bx-trustStrip__item {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--cc-bx-trust-ink);
}

.bx-trustStrip__item i { opacity: 0.7; font-size: 13px }

.bx-trustStrip__link {
  text-decoration: none;
  transition: color var(--cc-ds-duration-fast);
}

.bx-trustStrip__link:hover {
  color: var(--cc-bx-accent);
  text-decoration: none;
}

@media (max-width: 768px) {
  .bx-trustStrip__inner {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 6px 16px;
    padding: 8px 12px;
    justify-items: start;
  }
}

@media (max-width: 480px) {
  .bx-trustStrip__inner { grid-template-columns: 1fr }
}

/* Price display */
.bx-priceCurrent {
  font-size: 1rem;
  font-weight: 900;
  letter-spacing: -0.01em;
  color: var(--cc-bx-ink);
  line-height: 1.1;
}

.bx-productCard .bx-priceCurrent {
  font-size: 16px;
}

.bx-buyBox .bx-priceCurrent {
  font-size: clamp(1.5rem, 2.5vw, 1.75rem);
}

.bx-priceOld {
  font-size: 14px;
  color: var(--cc-bx-muted);
  text-decoration: line-through;
}

.bx-priceSave {
  font-size: 13px;
  font-weight: 600;
  color: var(--cc-bx-sale);
}

.bx-deliveryHint {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 8px;
  font-size: 13px;
  color: var(--cc-bx-muted);
}

.bx-deliveryHint i { font-size: 12px; opacity: 0.75 }

/* Accordion (PDP) */
.bx-accordion { border-top: 1px solid var(--cc-bx-border) }

.bx-accordion__item { border-bottom: 1px solid var(--cc-bx-border) }

.bx-accordion__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 16px 0;
  border: 0;
  background: none;
  font-family: var(--cc-font-display);
  font-size: 15px;
  font-weight: 600;
  color: var(--cc-bx-ink);
  text-align: left;
  cursor: pointer;
}

.bx-accordion__chevron {
  font-size: 12px;
  color: var(--cc-bx-muted);
  transition: transform 0.2s;
}

.bx-accordion__item.isOpen .bx-accordion__chevron { transform: rotate(180deg) }

.bx-accordion__body {
  display: none;
  padding: 0 0 20px 0;
  font-size: 14px;
  line-height: 1.6;
  color: var(--cc-bx-ink-secondary);
}

.bx-accordion__item.isOpen .bx-accordion__body { display: block }

/* Category listing toolbar */
.bx-listToolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px 16px;
  margin: 0 0 20px 0;
  padding: 12px 16px;
  background: var(--cc-bx-surface);
  border: 1px solid var(--cc-bx-border);
  border-radius: 0;
}

.bx-listToolbar__count {
  font-size: 14px;
  color: var(--cc-bx-muted);
}

.bx-listToolbar__count b { color: var(--cc-bx-ink); font-weight: 600 }

.bx-listToolbar select {
  border: 1px solid var(--cc-bx-border-strong);
  border-radius: 0;
  padding: 8px 12px;
  font-size: 13px;
  background: #fff;
  color: var(--cc-bx-ink);
}

/* Subcategory grid */
.bx-subcatGrid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: 12px;
  margin: 0 0 24px 0;
}

.bx-subcatCard {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  padding: 12px 14px;
  border: 1px solid var(--cc-bx-border);
  border-radius: var(--cc-bx-radius-sm);
  background: #fff;
  font-size: 13px;
  font-weight: 500;
  color: var(--cc-bx-ink);
  text-decoration: none;
  text-align: center;
  transition: border-color 0.15s, box-shadow 0.15s;
}

.bx-subcatCard.isActive,
.bx-subcatCard[aria-current="page"] {
  border-color: var(--cc-bx-accent);
  background: var(--cc-bx-accent-soft);
  color: var(--cc-bx-accent);
  font-weight: 600;
}

.bx-subcatCard:hover {
  border-color: var(--cc-bx-accent);
  box-shadow: var(--cc-bx-shadow);
  text-decoration: none;
  color: var(--cc-bx-ink);
}

@media (max-width: 767px) {
  .bx-subcatGrid {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-bottom: 16px;
  }

  .bx-subcatCard {
    display: inline-flex;
    flex: 0 0 auto;
    min-height: 0;
    max-width: 100%;
    padding: 6px 11px;
    border-radius: 8px;
    font-size: 12px;
    font-weight: 600;
    line-height: 1.2;
    white-space: nowrap;
    box-shadow: none;
  }

  .bx-subcatCard:hover {
    box-shadow: none;
  }
}

/* Home universe */
.bx-homeHero {
  margin: 0 0 32px 0;
  padding: 32px 24px;
  border-radius: var(--cc-bx-radius-lg);
  background: var(--cc-bx-surface);
  border: 1px solid var(--cc-bx-border);
}

.cc-homeUniverseHero {
  position: relative;
  overflow: hidden;
}

.cc-homeUniverseHero::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 4px;
  height: 100%;
  background: var(--cc-bx-accent);
  border-radius: var(--cc-bx-radius-lg) 0 0 var(--cc-bx-radius-lg);
}

.bx-homeHero__eyebrow {
  margin: 0 0 8px 0;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--cc-bx-accent);
}

.bx-homeHero__title {
  margin: 0 0 10px 0;
  font-size: clamp(1.75rem, 3vw, 2.25rem);
  font-weight: 700;
  letter-spacing: -0.03em;
  color: var(--cc-bx-ink);
}

.bx-homeHero__sub {
  margin: 0;
  max-width: 640px;
  font-size: 15px;
  line-height: 1.55;
  color: var(--cc-bx-muted);
}

.bx-homeTrust {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px;
  margin: 0 0 32px 0;
}

@media (max-width: 960px) {
  .bx-homeTrust { grid-template-columns: repeat(2, minmax(0, 1fr)) }
}

@media (max-width: 480px) {
  .bx-homeTrust { grid-template-columns: 1fr }
}

.bx-homeTrust__item {
  padding: 16px;
  border: 1px solid var(--cc-bx-border);
  border-radius: var(--cc-bx-radius);
  background: #fff;
}

.bx-homeTrust__item strong {
  display: block;
  margin-bottom: 4px;
  font-size: 13px;
  color: var(--cc-bx-ink);
}

.bx-homeTrust__item span {
  font-size: 12px;
  color: var(--cc-bx-muted);
  line-height: 1.4;
}

.bx-whySection {
  margin: 40px 0;
  padding: 28px 24px;
  border-radius: var(--cc-bx-radius-lg);
  background: var(--cc-bx-surface);
  border: 1px solid var(--cc-bx-border);
}

.bx-whyGrid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 20px;
  margin-top: 20px;
}

.bx-whyItem {
  padding: 16px;
  background: #fff;
  border: 1px solid var(--cc-bx-border);
  border-radius: var(--cc-bx-radius);
}

.bx-whyItem h3 {
  margin: 0 0 6px 0;
  font-size: 14px;
  font-weight: 600;
  color: var(--cc-bx-ink);
}

.bx-whyItem p {
  margin: 0;
  font-size: 13px;
  line-height: 1.45;
  color: var(--cc-bx-muted);
}

/* Sticky mobile PDP bar — inset card aligned with content column */
.bx-pdpStickyBar {
  display: none;
  position: fixed;
  left: var(--cc-inside-pad-mobile, 10px);
  right: var(--cc-inside-pad-mobile, 10px);
  bottom: calc(10px + env(safe-area-inset-bottom, 0px));
  z-index: 900;
  padding: 10px 12px;
  background: #fff;
  border: 1px solid var(--cc-bx-border);
  border-radius: 14px;
  box-shadow: 0 8px 28px rgba(0, 0, 0, 0.12);
  box-sizing: border-box;
}

@media (max-width: 768px) {
  .bx-pdpStickyBar.isVisible { display: flex; align-items: center; gap: 12px }
  body.pdp-stickyVisible { padding-bottom: calc(84px + env(safe-area-inset-bottom, 0px)) }
}

.bx-pdpStickyBar__price { flex: 1; min-width: 0 }
.bx-pdpStickyBar__price .bx-priceCurrent { font-size: 1.25rem }

/* Override legacy mainTitle for Bixoto listings */
.content .mainTitle.wLine {
  border: 0;
  margin: 0 0 20px 0;
  padding: 0;
}

.content .mainTitle.wLine::after { display: none }

.content .mainTitle.wLine span {
  position: static;
  background: none;
  padding: 0;
  font-size: clamp(1.5rem, 2.5vw, 2rem);
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--cc-bx-ink);
  text-transform: none;
}

.content .mainTitle.wLine a {
  float: none;
  display: inline-block;
  margin-top: 8px;
  font-size: 13px;
  font-weight: 500;
  color: var(--cc-bx-muted);
}

/* Home product rows */
.bx-homeProducts {
  margin: 0 0 36px 0;
}

.bx-homeProducts__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 16px;
}

/* Product cards — Bixoto tweaks */
.bx-productCard .cc-productCard__media {
  background: #fff;
}

.bx-productCard__price {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 6px 10px;
  margin-top: 6px;
}

.bx-productCard__delivery {
  margin: 8px 0 0 0;
}

.bx-productCard .cc-productCard__quickAdd {
  background: var(--cc-bx-accent);
  border-color: var(--cc-bx-accent);
}

.bx-productCard .cc-productCard__quickAdd:hover {
  background: var(--cc-bx-accent-hover);
}

.bx-productCard .cc-productCard__addBtn {
  margin-top: 10px;
}

/* Logo — dark-on-light variant with PNG fallback via onError in JSX */
.cc-header__logoLink img,
.cc-footer__logo,
.cc-auth-logo img {
  filter: none;
}

/* Minimal page heroes — cart pattern (site-wide) */
.cc-cart__hero,
.cc-contact__hero,
.cc-faq__hero,
.cc-cms__hero,
.cc-brands__hero,
.cc-newHub__hero,
.cc-wishlist__hero {
  position: static !important;
  margin: 0 0 32px 0 !important;
  padding: 0 0 18px 0 !important;
  border: 0 !important;
  border-bottom: 1px solid var(--cc-bx-border) !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  color: var(--cc-bx-ink) !important;
  overflow: visible !important;
  isolation: auto !important;
}

.cc-cms__hero::before {
  display: none !important;
}

.cc-cart__heroInner,
.cc-contact__heroInner,
.cc-faq__heroInner,
.cc-brands__heroInner,
.cc-newHub__heroInner,
.cc-wishlist__heroInner {
  position: static !important;
  z-index: auto !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  flex-wrap: wrap !important;
  gap: 16px 20px !important;
  padding-bottom: 0 !important;
  max-width: none !important;
  grid-template-columns: unset !important;
}

.cc-contact__heroMesh,
.cc-contact__heroOrb,
.cc-faq__heroMesh,
.cc-faq__heroOrb,
.cc-brands__heroMesh,
.cc-brands__heroOrb,
.cc-newHub__heroMesh,
.cc-newHub__heroOrb,
.cc-brands__marquee,
.cc-newHub__marquee,
.cc-newHub__heroBadge {
  display: none !important;
}

.cc-cart__title,
.cc-contact__title,
.cc-faq__title,
.cc-cms__title,
.cc-brands__title,
.cc-newHub__title,
.cc-wishlist__title {
  margin: 0 !important;
  font-family: var(--cc-font-display) !important;
  font-size: clamp(1.5rem, 2.5vw, 2rem) !important;
  font-weight: 700 !important;
  letter-spacing: -0.02em !important;
  line-height: 1.15 !important;
  color: var(--cc-bx-ink) !important;
  text-transform: none !important;
}

.cc-cart__count,
.cc-faq__subtitle,
.cc-brands__lead,
.cc-newHub__lead,
.cc-wishlist__count {
  margin: 6px 0 0 0 !important;
  font-size: 13px !important;
  font-weight: 400 !important;
  color: var(--cc-bx-muted) !important;
  letter-spacing: 0.01em !important;
}

.cc-account__back {
  margin: 0 0 6px 0 !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
  color: var(--cc-bx-muted) !important;
}

.cc-brands__eyebrow,
.cc-brands__stats,
.cc-newHub__eyebrow,
.cc-newHub__stats,
.cc-cms__eyebrow {
  display: none !important;
}

.cc-brands__heroSearch {
  flex: 0 1 320px;
  min-width: min(100%, 240px);
}

.cc-brands__searchInput {
  height: 44px !important;
  border: 1px solid var(--cc-bx-border) !important;
  border-radius: 8px !important;
  box-shadow: none !important;
}

.cc-brands__searchInput:hover,
.cc-brands__searchInput:focus {
  box-shadow: none !important;
  transform: none !important;
  border-color: var(--cc-bx-accent) !important;
}

.cc-brands__hero--skeleton,
.cc-newHub__hero--skeleton,
.cc-cms__hero--sk {
  min-height: 52px !important;
  padding-bottom: 18px !important;
  border-bottom: 1px solid var(--cc-bx-border) !important;
  border-radius: 0 !important;
  background: linear-gradient(90deg, var(--cc-bx-surface) 25%, #fff 50%, var(--cc-bx-surface) 75%) !important;
  background-size: 200% 100% !important;
}

.cc-cart__eyebrow,
.cc-checkout__eyebrow {
  color: var(--cc-bx-muted) !important;
}

.cc-cart__sub,
.cc-checkout__sub,
.cc-account__sub {
  color: var(--cc-bx-muted) !important;
}

.cc-account__nav,
.cc-account__card,
.cc-cart__card,
.cc-checkout__card {
  border-color: var(--cc-bx-border) !important;
  background: #fff !important;
}

.cc-account__navLink.isActive {
  background: var(--cc-bx-surface) !important;
  color: var(--cc-bx-ink) !important;
}

.pvBxLayout .tabsProduct.pvTabs { display: none }

.pvDeliveryAccordion p {
  margin: 0 0 10px 0;
  font-size: 14px;
  line-height: 1.55;
}

.pvDeliveryAccordion a {
  color: var(--cc-bx-accent);
  text-decoration: underline;
}

/* Bixoto product card shell */
.bx-productCard.cc-productCard {
  border: 0;
  border-radius: 0;
  box-shadow: 0 2px 14px rgba(15, 15, 18, 0.08);
  background: #fff;
}

.bx-productCard.cc-productCard:hover {
  transform: none;
  box-shadow: 0 4px 22px rgba(15, 15, 18, 0.12);
}

.bx-productCard .cc-productCard__body {
  padding: 15px;
  box-shadow: none;
}

.bx-productCard .cc-productCard__badge {
  background: var(--cc-bx-accent);
  border-radius: var(--cc-bx-radius);
}

.bx-productCard .cc-productCard__priceMain {
  font-weight: 900;
}

/* Legacy style.css isolation inside modern shell */
.content .bx-btn.bx-btn--primary,
.content .bx-btn.bx-btn--primary.buton,
.content button.bx-btn--primary {
  background: var(--cc-bx-accent) !important;
  border-color: var(--cc-bx-accent) !important;
  color: #fff !important;
  text-transform: none;
  letter-spacing: normal;
  box-shadow: none;
}

.content .inside .buton.round:not(.bx-btn):not(.cc-header *) {
  background: var(--cc-bx-accent);
  border: 2px solid var(--cc-bx-accent);
  color: #fff;
  border-radius: var(--cc-bx-radius-sm);
}

.content .inside .buton.round:not(.bx-btn):hover {
  background: var(--cc-bx-accent-hover);
  border-color: var(--cc-bx-accent-hover);
}

.content .inside input.text.round,
.content .inside textarea.text.round,
.content .inside select.text.round {
  border: 1px solid var(--cc-bx-border);
  border-radius: var(--cc-bx-radius-sm);
}

.content .inside input.text.round:focus,
.content .inside textarea.text.round:focus {
  border-color: var(--cc-bx-accent);
  box-shadow: 0 0 0 2px rgba(255, 66, 0, 0.12);
}

.cc-account__navLink.isActive {
  background: var(--cc-bx-accent-soft) !important;
  color: var(--cc-bx-accent) !important;
  border-left: 3px solid var(--cc-bx-accent);
}

.cc-account__actionBtn--pay {
  background: var(--cc-bx-accent) !important;
  color: #fff !important;
}

.cc-account__orderName:hover {
  color: var(--cc-bx-accent) !important;
}

.bx-productCard .bx-priceCurrent--sale,
.bx-productCard .cc-productCard__priceMain.bx-priceCurrent--sale {
  color: var(--cc-bx-sale);
}

.bx-buyBox .bx-priceCurrent--sale {
  color: var(--cc-bx-sale);
}

.bx-productCard .cc-productCard__price {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 6px 8px;
}

.bx-productCard .bx-priceOld {
  order: -1;
  width: 100%;
}

/* Legacy style.css isolation */
body:has(#cc-header) #header,
body:has(#cc-header) #headerTop {
  display: none !important;
}

.content .inside .mainTitle {
  font-family: var(--cc-font-display) !important;
  font-weight: 700 !important;
  letter-spacing: -0.02em !important;
  text-transform: none !important;
  color: var(--cc-bx-ink) !important;
}

.content .inside .mainTitle span {
  color: var(--cc-bx-accent) !important;
}

.content .inside .buton:not(.bx-btn):not(.cc-header *):not(.cc-productCard *) {
  background: var(--cc-bx-accent) !important;
  border-color: var(--cc-bx-accent) !important;
  color: #fff !important;
}

.content .inside .buton:not(.bx-btn):not(.cc-header *):hover {
  background: var(--cc-bx-accent-hover) !important;
  border-color: var(--cc-bx-accent-hover) !important;
}

#cartAddedModal .cm-btn-primary {
  background: var(--cc-bx-accent) !important;
  color: #fff !important;
}

#cartAddedModal .cm-btn-primary:hover {
  background: var(--cc-bx-accent-hover) !important;
}

#cartAddedModal .cm-total-bar {
  background: var(--cc-bx-accent) !important;
  color: #fff !important;
}

/* Mobile: keep page titles clear of sticky header.
   Legacy style.css zeroes .content padding-top under 55em — we restore 20px there.
   Flush heroes (PDP / category / info) still override via content--pdp or :has(...). */