:root {
  --ink: #1C2B33;
  --navy: #0E3A4D;
  --lake: #1F6F8B;
  --mist: #E7F1F4;
  --cream: #F4EFE6;
  --sand: #E4D5BC;
  --honey: #C9842A;
  --paper: #FFFCF8;
  --pine: #3E6B56;
  --clay: #8C6248;
  --berry: #BA1650;
  --header-h: 112px;
  --slide-h: 360px;
}
html, body, #root { background: var(--cream); color: var(--ink); overflow-x: hidden; }
html, body, #root, #root > div, .app { min-height: 100vh; }
#root, #root > div, .app {
  display: flex; flex-direction: column; width: 100%;
}
#root > div, .app { flex: 1 0 auto; }
.app > .bg-black {
  margin-top: auto !important;
  width: 100%;
  flex: 0 0 auto;
}
.page:empty { display: none; height: auto; }

.header-container {
  position: sticky; top: 0; z-index: 40;
  background: var(--paper); color: var(--ink);
  padding: 10px 20px 8px;
  border-bottom: 0;
}
.header-container .row {
  display: grid;
  grid-template-columns: auto auto minmax(0, 1fr) auto;
  align-items: center; gap: 16px; margin: 0;
  width: 100%; max-width: 100%;
}
.header-container .col-md-2,
.header-container .col-md-7,
.header-container .col-md-1,
.header-container .search-box,
.header-container .cart,
.header-container .profile {
  left: 0 !important; right: auto !important; top: auto !important; bottom: auto !important;
}
.header-container .col-md-2 { flex: 0 0 auto; width: auto !important; max-width: none; }
.header-container .search-box {
  flex: 1 1 0; min-width: 0; width: auto !important; max-width: none;
  transform: translateY(-8px);
}
.header-container .col-md-1,
.header-container .profile {
  flex: 0 0 auto; width: auto !important; max-width: none; position: relative; z-index: 2;
}
.header-container .col-md-2 > a {
  display: inline-flex; align-items: center; position: static !important;
  left: auto !important; width: auto !important; height: auto;
}
#logoImg, .header-image {
  position: static !important; left: auto !important; top: auto !important;
  height: 84px; width: auto; max-height: none; display: block; margin: 0;
}
.cp-intent-wrap {
  position: relative; width: 230px; flex: 0 0 230px; align-self: center; z-index: 50;
}
.cp-intent {
  display: flex; flex-direction: column; align-items: flex-start; justify-content: center;
  width: 100%; height: 44px; max-width: none; box-sizing: border-box;
  background: var(--mist); color: var(--navy); border: 1px solid #c5d0d6; border-radius: 999px;
  padding: 4px 14px 4px 34px; text-align: left; cursor: pointer;
  position: relative; line-height: 1.15;
}
.cp-intent-panel {
  display: none; position: absolute; top: 100%; left: 0; z-index: 60;
  width: 100%; margin-top: 0; box-sizing: border-box;
  background: #fff; border: 1px solid var(--sand);
  border-radius: 12px; box-shadow: 0 16px 40px rgba(14, 58, 77, 0.16); padding: 8px;
}
.cp-intent-panel.is-open { display: grid; }
.cp-intent-item {
  display: flex; flex-direction: column; align-items: flex-start; gap: 2px;
  background: transparent; border: 0; border-radius: 8px; padding: 10px 12px;
  text-align: left; cursor: pointer; color: var(--ink);
}
.cp-intent-item span { font-size: 12px; color: var(--lake); font-weight: 500; }
.cp-intent-item.is-selected, .cp-intent-item:hover { background: var(--mist); }
.cp-intent::before {
  content: ""; position: absolute; left: 14px; top: 50%; width: 12px; height: 12px;
  border-radius: 50%; background: var(--lake); transform: translateY(-50%);
}
.cp-intent-copy {
  display: flex; flex-direction: column; align-items: stretch;
  width: max-content; max-width: 100%;
}
.cp-intent-kicker { font-size: 11px; font-weight: 700; color: var(--navy); }
.cp-intent-place {
  font-size: 16px; line-height: 1.1; color: var(--ink);
  font-weight: 800; font-synthesis: none; text-align: center;
}
.search { position: relative; width: 100%; left: 0 !important; bottom: 0 !important; box-shadow: none !important; }
.search input, .search .form-control {
  height: 44px; border-radius: 999px; border: 1px solid #c5d0d6;
  background: #fff; color: var(--ink); padding: 0 44px 0 18px;
  font-size: 15px; width: 100%;
}
.search input:focus { outline: 2px solid var(--mist); border-color: var(--lake); }
.glass-icon, .clear-icon { position: absolute !important; top: 10px !important; color: var(--navy) !important; }
.glass-icon { right: 14px !important; left: auto !important; }
.clear-icon { right: 40px !important; left: auto !important; }
.cp-top-link {
  color: var(--navy); font-weight: 700; font-size: 13px;
  text-decoration: none; white-space: nowrap; padding: 0 2px;
  display: inline-flex; flex-direction: column; align-items: center; justify-content: flex-start;
  gap: 2px; height: auto; min-height: 48px; line-height: 1;
}
.cp-tool-icon { width: 28px; height: 28px; flex: 0 0 28px; }
.cp-top-link:hover { color: var(--lake); }
.cp-top-link,
.header-container .cart,
.header-container .profile,
.cp-intent,
.checkout,
.con-shopping,
#my-modal .cancel-box,
#my-modal .cp-stock-alert,
#my-modal .preview-thumbnail li {
  transition: transform 0.16s ease, color 0.16s ease, border-color 0.16s ease, box-shadow 0.16s ease;
}
.cp-top-link:hover,
.header-container .cart:hover,
.header-container .profile:hover {
  transform: translateY(-2px);
  color: var(--lake);
}
.cp-intent:hover {
  border-color: var(--lake);
  box-shadow: 0 6px 14px rgba(14, 58, 77, 0.12);
}
.checkout:hover,
.con-shopping:hover,
#my-modal .cancel-box:hover,
#my-modal .cp-stock-alert:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 14px rgba(14, 58, 77, 0.16) !important;
}
#my-modal .preview-thumbnail li:hover {
  transform: translateY(-2px);
  border-color: var(--lake);
}
@media (prefers-reduced-motion: reduce) {
  .cp-top-link,
  .header-container .cart,
  .header-container .profile,
  .cp-intent,
  .checkout,
  .con-shopping,
  #my-modal .cancel-box,
  #my-modal .cp-stock-alert,
  #my-modal .preview-thumbnail li {
    transition: none;
  }
  .cp-top-link:hover,
  .header-container .cart:hover,
  .header-container .profile:hover,
  .checkout:hover,
  .con-shopping:hover,
  #my-modal .cancel-box:hover,
  #my-modal .cp-stock-alert:hover,
  #my-modal .preview-thumbnail li:hover {
    transform: none;
  }
}
.cp-tools {
  display: flex; align-items: flex-start; justify-content: flex-end;
  gap: 16px; justify-self: end; margin-left: auto;
}
.header-container .cart,
.header-container .profile {
  color: var(--navy); cursor: pointer; font-weight: 700; font-size: 13px;
  display: inline-flex !important; flex-direction: column !important;
  align-items: center !important; justify-content: flex-start !important;
  gap: 2px; height: auto !important; min-height: 48px; min-width: 0;
  width: max-content !important; max-width: none !important;
  padding: 0 !important; margin: 0 !important; white-space: nowrap;
  line-height: 1 !important;
}
.header-container .profile > div:first-child {
  display: flex; align-items: center; justify-content: center;
  width: 28px; height: 28px; flex: 0 0 28px;
}
.header-container .cart .cart-icon {
  width: 28px !important; height: 28px !important; margin: 0 !important;
  display: block; color: var(--navy); flex: 0 0 28px;
}
.cp-cart-top {
  position: relative; display: flex; align-items: center; justify-content: center;
  align-self: center;
  width: 28px !important; min-width: 28px; max-width: 28px; height: 28px; overflow: visible;
  flex: 0 0 28px;
}
.cp-cart-mark {
  position: relative; width: 28px; height: 28px; overflow: visible;
  display: flex; align-items: center; justify-content: center;
}
.header-container .cart .cart-count {
  position: absolute !important; top: 5px !important; right: -8px !important;
  left: auto !important; z-index: 3; padding: 0 5px !important;
  opacity: 1; margin: 0 !important;
}
.cp-top-link > span,
.header-container .profile > span,
.cp-tool-label {
  display: block; font-size: 13px; font-weight: 700; line-height: 13px !important;
  height: 13px; margin: 0; padding: 0; color: var(--navy); text-align: center;
}
.profile { position: relative; }
.cp-account-menu {
  display: none; position: absolute; top: 100%; right: 0; z-index: 70;
  min-width: 190px; padding: 8px; margin-top: 6px;
  background: var(--paper); border: 1px solid var(--sand); border-radius: 12px;
  box-shadow: 0 16px 40px rgba(14, 58, 77, 0.16);
}
.profile:hover .cp-account-menu,
.profile:focus-within .cp-account-menu { display: grid; }
.cp-account-menu a {
  color: var(--ink); text-decoration: none; text-align: left;
  font-size: 15px; font-weight: 600; padding: 10px 14px; border-radius: 8px;
}
.cp-account-menu a:hover { background: var(--mist); color: var(--navy); }
.profile-pic { width: 28px !important; height: 28px !important; }
.cart-count {
  background: var(--honey); color: var(--navy);
  border-radius: 999px; min-width: 18px; height: 18px; padding: 0 5px;
  font-weight: 700; font-size: 12px;
  display: inline-flex; align-items: center; justify-content: center;
}
.cart-count[hidden] {
  display: none !important;
}
.flex-row.header,
.flex-row.header > .fill,
.flex-row.header nav,
.header-container,
.category,
.cp-nav {
  width: 100% !important;
  max-width: none !important;
  box-sizing: border-box;
}
.flex-row.header {
  align-self: stretch;
}
.flex-row.header > .fill,
.flex-row.header nav,
.header-container,
.category,
.cp-nav {
  margin-left: 0 !important;
  margin-right: 0 !important;
  left: auto !important;
  right: auto !important;
}
.category { top: 0 !important; }
.cp-nav {
  display: flex; align-items: center; gap: 8px;
  background: var(--mist); border-bottom: 0;
  padding: 8px 16px; position: sticky; top: 64px; z-index: 30;
}
div.flex-row.center[style*="overflow-x"] { display: none !important; }
.cp-shortcuts {
  display: flex; flex: 1 1 auto; min-width: 0; overflow-x: auto;
  align-items: center; gap: 4px;
}
.cp-shortcut {
  background: transparent; border: 0; color: var(--navy);
  font-weight: 600; white-space: nowrap; height: 40px; padding: 0 12px;
  border-radius: 8px; cursor: pointer; text-decoration: none;
  display: inline-flex; align-items: center;
}
.cp-shortcut:hover { background: var(--paper); color: var(--lake); }
.cat-button {
  background: transparent; border: 0; color: var(--navy);
  font-weight: 600; white-space: nowrap; height: 40px; padding: 0 10px;
  border-radius: 8px;
}
.cat-button:hover { background: var(--paper); color: var(--lake); }
.cp-depts {
  background: var(--paper); color: var(--ink); border: 0;
  border-radius: 999px; height: 32px; padding: 0 14px; font-weight: 700; font-size: 14px;
}
.cp-depts::after { content: "  \25BE"; font-size: 10px; }
.cp-dept-panel {
  display: none; position: absolute; top: 48px; left: 16px; z-index: 50;
  background: var(--paper); border: 1px solid var(--sand);
  box-shadow: 0 16px 40px rgba(14, 58, 77, 0.16);
  padding: 8px; min-width: 280px; border-radius: 12px;
}
.cp-dept-panel.is-open { display: grid; }
.cp-dept-item {
  background: transparent; border: 0; color: var(--ink);
  text-align: left; padding: 10px 14px; border-radius: 8px;
  font-size: 15px; font-weight: 600; cursor: pointer;
}
.cp-dept-item:hover { background: var(--mist); color: var(--navy); }

#bootstrap-overrides:has(.carousel) {
  position: relative;
  z-index: 1;
  width: min(1080px, calc(100vw - 64px));
  max-width: 1080px;
  height: calc(var(--slide-h) + 36px);
  margin: 12px auto 0;
  flex: 0 0 auto;
  align-self: center;
  min-width: 0;
  overflow: visible;
  background: transparent;
}
#bootstrap-overrides:has(.carousel)::before {
  content: "";
  position: absolute;
  z-index: 0;
  pointer-events: none;
  top: 0;
  bottom: 0;
  left: 50%;
  width: 100vw;
  transform: translateX(-50%);
  background: #fff;
}
#bootstrap-overrides:not(:has(.carousel)) {
  position: relative;
  z-index: 1;
  width: min(1240px, calc(100% - 32px)) !important;
  max-width: none !important;
  height: auto !important;
  margin: 12px auto 32px !important;
  background: transparent;
}
#bootstrap-overrides:not(:has(.carousel))::before {
  content: none !important;
}
#bootstrap-overrides > h2,
#bootstrap-overrides > h3,
#bootstrap-overrides > h4 {
  position: relative;
  z-index: 2;
  color: var(--ink) !important;
}
#bootstrap-overrides > h3,
#bootstrap-overrides > h4 {
  position: relative !important;
  z-index: 10 !important;
}
.carousel, .carousel-inner, .carousel-item { background: transparent; }
.carousel, .carousel-inner, .carousel-item {
  width: 100% !important;
  height: var(--slide-h) !important;
  max-height: var(--slide-h);
  margin: 0;
}
.carousel { position: relative; z-index: 1; overflow: visible; }
.carousel-caption { display: none !important; }
#bootstrap-overrides .carousel-inner,
#bootstrap-overrides .carousel-item { overflow: visible; }
#bootstrap-overrides .carousel-inner { position: relative; }
#bootstrap-overrides .carousel-item {
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  float: none !important;
  margin: 0 !important;
  transition: transform 0.7s ease, opacity 0.7s ease !important;
}
#bootstrap-overrides .carousel-item-next:not(.carousel-item-start),
#bootstrap-overrides .active.carousel-item-end {
  transform: translateX(100%) !important;
  opacity: 0;
}
#bootstrap-overrides .carousel-item-prev:not(.carousel-item-end),
#bootstrap-overrides .active.carousel-item-start {
  transform: translateX(-100%) !important;
  opacity: 0;
}
#bootstrap-overrides .carousel-item.active,
#bootstrap-overrides .carousel-item-next.carousel-item-start,
#bootstrap-overrides .carousel-item-prev.carousel-item-end {
  opacity: 1;
}
#bootstrap-overrides .carousel-item.active.carousel-item-start,
#bootstrap-overrides .carousel-item.active.carousel-item-end {
  opacity: 0;
}
#bootstrap-overrides .carousel-item > .cp-slide-link {
  position: absolute !important;
  inset: 0;
  display: block;
  z-index: 1;
  cursor: pointer;
}
#bootstrap-overrides .carousel-item > img,
#bootstrap-overrides .carousel-item > .cp-slide-link > img {
  position: absolute !important;
  left: 0; top: 0;
  width: 100% !important;
  height: 100% !important;
  min-width: 0 !important;
  min-height: 0 !important;
  max-width: none !important;
  max-height: none !important;
  padding: 0 !important;
  float: none !important;
  object-fit: contain;
  object-position: center center !important;
  display: block;
  opacity: 1;
  transition: none !important;
}
#cp-most-popular { scroll-margin-top: 160px; }
.carousel-indicators {
  position: absolute;
  bottom: -28px;
  left: 0; right: 0;
  margin: 0;
  z-index: 2;
  justify-content: center;
}
.carousel-indicators [data-bs-target] {
  box-sizing: border-box !important;
  flex: 0 0 12px;
  width: 12px !important;
  height: 12px !important;
  margin: 0 5px !important;
  padding: 0 !important;
  border: 2px solid var(--berry) !important;
  border-radius: 50% !important;
  background-color: var(--cream) !important;
  background-image: none !important;
  background-clip: padding-box;
  opacity: 1 !important;
  text-indent: 0 !important;
}
.carousel-indicators .active {
  background-color: var(--berry) !important;
  border-color: var(--berry) !important;
  opacity: 1 !important;
  width: 12px !important;
}
.carousel-control-prev, .carousel-control-next {
  width: 48px; height: 48px; top: 50%; bottom: auto;
  transform: translateY(-50%); opacity: 1; z-index: 2;
}
.carousel-control-prev.cp-arrow-off,
.carousel-control-next.cp-arrow-off {
  opacity: 0.16 !important;
  pointer-events: none !important;
  cursor: default !important;
}
.carousel-control-prev-icon, .carousel-control-next-icon {
  width: 40px; height: 40px; border-radius: 50%;
  border: 2px solid var(--berry);
  background-color: var(--cream);
  background-size: 12px 12px; background-position: center; background-repeat: no-repeat;
}
.carousel-control-prev-icon {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='%23BA1650' d='M11.3 1.5 4.8 8l6.5 6.5-1.4 1.4L2 8l7.9-7.9z'/%3E%3C/svg%3E") !important;
}
.carousel-control-next-icon {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='%23BA1650' d='M4.7 1.5 11.2 8l-6.5 6.5 1.4 1.4L14 8 6.1.1z'/%3E%3C/svg%3E") !important;
}
h3 { color: var(--navy); font-size: 28px; letter-spacing: -0.02em; margin: 28px 24px 12px; }
body[data-cp-page="shop"] h3 {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  width: 100% !important;
  max-width: 100% !important;
  box-sizing: border-box;
  margin-left: 0 !important;
  margin-right: 0 !important;
  text-align: center !important;
}
h3::after {
  content: ""; display: block; width: 48px; height: 3px;
  background: var(--lake); margin: 8px 0 0 !important;
  align-self: center;
}
#featItemsSpan { background: transparent; padding: 0 16px 8px; align-items: stretch; }
.card-group-scroll { display: flex; align-items: stretch; gap: 16px; padding-bottom: 12px; }
#productContainer, #featItemsSpan, .card-group-scroll {
  max-width: 100%; min-width: 0; box-sizing: border-box;
}
#productContainer { padding-bottom: 48px; }
.card-group-scroll { overflow-x: auto; }
#productContainer .card {
  opacity: 0;
}
#productContainer .card.cp-sweep-in {
  animation: cp-sweep-in 0.7s ease forwards;
  animation-delay: calc(var(--cp-i, 0) * 110ms + 40ms);
}
@keyframes cp-sweep-in {
  from { opacity: 0; transform: translateX(-36px); }
  to { opacity: 1; transform: translateX(0); }
}
@media (prefers-reduced-motion: reduce) {
  #productContainer .card {
    opacity: 1;
    animation: none;
    transform: none;
  }
}
#slideLeft, #slideRight,
#productContainer .card-slide-button {
  position: static !important;
  z-index: 2;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  align-self: center !important;
  flex: 0 0 64px !important;
  width: 64px !important;
  height: 128px !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  color: var(--navy) !important;
  font-size: 84px !important;
  line-height: 1 !important;
  cursor: pointer;
  opacity: 1;
  transition: opacity 0.2s ease, color 0.16s ease;
}
#productContainer #featItemsSpan {
  align-items: center !important;
  min-width: 0;
}
#productContainer #featItemsSpan > div {
  flex: 1 1 auto;
  min-width: 0;
}
#productContainer .card-group-scroll {
  flex-wrap: nowrap !important;
}
#productContainer .card-slide-button:hover:not(.cp-arrow-off) {
  color: var(--lake);
}
#productContainer .card-slide-button.cp-arrow-off,
#productContainer .card-slide-button:disabled {
  opacity: 0.16 !important;
  pointer-events: none;
  cursor: default;
}
.card {
  background: var(--paper); border: 1px solid var(--sand);
  border-radius: 12px; box-shadow: none; flex: 0 0 14rem; width: 14rem;
  max-width: 100%; box-sizing: border-box; overflow: hidden;
  position: relative; z-index: 1; vertical-align: top;
  display: flex; flex-direction: column; align-self: stretch; height: auto;
}
.pic-con {
  flex: 0 0 148px; height: 148px; margin: 12px 12px 0; padding: 8px;
  box-sizing: border-box; display: flex; align-items: center; justify-content: center;
  background: #fff; border: 1px solid var(--sand); border-radius: 8px;
}
.card > hr.cp-card-rule {
  flex: 0 0 auto; width: 100%; height: 0; margin: 12px 0 0; border: 0;
  border-top: 1px solid var(--sand);
}
.card-body, .card:hover .card-body {
  height: auto !important; transform: none !important; overflow: hidden;
  display: flex !important; flex-direction: column; flex: 1 1 auto;
  align-items: center; text-align: center; gap: 4px;
  padding: 12px 12px 8px; box-sizing: border-box;
}
.card-body > br { display: none; }
.card-title, .card-subtitle, .card-text,
.card-description, .card-description-short {
  width: 100%; max-width: 100%; margin: 0;
  overflow-wrap: anywhere; word-break: break-word; text-align: center;
}
.card-description, .card-description-short {
  display: -webkit-box !important; -webkit-box-orient: vertical;
  -webkit-line-clamp: 3; line-clamp: 3;
  max-height: none !important; min-height: 0 !important; overflow: hidden !important;
}
.card-picture { max-height: 124px; max-width: 100%; object-fit: contain; }
.card-footer { margin-top: 0; text-align: center; }
.ReactModal__Overlay {
  z-index: 80 !important; background: rgba(28, 43, 51, 0.45) !important;
}
.ReactModal__Content,
.ReactModal__Content.ReactModal__Content--after-open {
  z-index: 81; overflow: auto !important; box-sizing: border-box;
  height: auto !important; bottom: auto !important;
  max-height: calc(100vh - 48px);
  background: #FFFCF8 !important;
  border: 1px solid #E4D5BC !important;
  border-radius: 12px !important;
  outline: none !important;
  box-shadow: 0 16px 40px rgba(14, 58, 77, 0.16) !important;
}
.cp-modal-x {
  position: absolute; top: 12px; right: 16px; z-index: 5;
  width: 36px; height: 36px; border: 0; border-radius: 999px;
  background: var(--paper); color: var(--navy); font-size: 28px; line-height: 1;
  cursor: pointer;
}
.cp-modal-x:hover { background: var(--mist); }
.ReactModal__Content h1, .ReactModal__Content h2, .ReactModal__Content h4,
.ReactModal__Content p, .ReactModal__Content span, .ReactModal__Content div {
  overflow-wrap: anywhere; max-width: 100%;
}
#my-modal .wrapper,
#my-modal .block.wrapper.row {
  min-height: 0 !important;
  height: auto !important;
  padding: 20px 28px 8px !important;
  display: grid !important;
  grid-template-columns: minmax(420px, 52%) minmax(0, 1fr);
  gap: 28px;
  align-items: stretch;
}
#my-modal .preview,
#my-modal .details {
  width: auto !important;
  max-width: none !important;
  min-width: 0;
  height: 100%;
  box-sizing: border-box;
  background: var(--paper);
  border: 1px solid var(--sand);
  border-radius: 12px;
}
#my-modal .preview {
  display: flex;
  flex-direction: column;
  padding: 12px;
}
#my-modal .details {
  padding: 16px 18px;
}
#my-modal .preview-pic {
  height: auto !important;
  flex: 1 1 auto;
  min-height: 180px;
  max-height: none;
  padding: 10px !important;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #fff;
  border: 1px solid var(--sand);
  border-radius: 8px;
  overflow: hidden;
  box-sizing: border-box;
}
#my-modal .preview-pic img {
  width: 100% !important;
  height: auto !important;
  max-width: 100% !important;
  max-height: 420px !important;
  object-fit: contain;
}
#my-modal .preview-thumbnail.nav-tabs {
  position: static !important;
  bottom: auto !important;
  height: auto !important;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 12px 0 0 !important;
  padding: 0;
  border: 0;
}
#my-modal .preview-thumbnail li {
  width: 72px;
  height: 72px;
  flex: 0 0 72px;
  margin: 0;
  padding: 4px;
  list-style: none;
  background: #fff;
  border: 1px solid var(--sand);
  border-radius: 8px;
  overflow: hidden;
  box-sizing: border-box;
}
#my-modal .preview-thumbnail li.active { border-color: var(--lake); }
#my-modal .preview-thumbnail img {
  width: 100% !important;
  height: 100% !important;
  max-width: none !important;
  max-height: none !important;
  object-fit: contain;
  display: block;
}
#my-modal .cp-price-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin: 8px 0 12px;
}
#my-modal .cp-price-row .price {
  margin: 0;
  flex: 1 1 auto;
}
#my-modal .rating {
  position: static !important;
  left: auto !important;
  bottom: auto !important;
  width: auto !important;
  margin: 0 0 0 auto !important;
  flex: 0 0 auto;
}
#my-modal .description {
  height: auto !important;
  margin: 8px 0 12px;
  line-height: 1.45;
  white-space: normal;
}
#my-modal .unflatten { margin: 0; }
#my-modal .metabox {
  display: block !important;
  height: auto !important;
  min-height: 0;
  width: 100%;
  box-sizing: border-box;
  margin: 12px 0 0;
  padding: 12px 16px;
  background: #f2eded;
  border: 0;
  border-left: 4px solid #c9842a;
  border-radius: 6px;
}
#my-modal .metabox p,
#my-modal .cp-item-facts p {
  display: flex;
  gap: 12px;
  align-items: baseline;
  margin: 0 0 6px;
}
#my-modal .metabox p:last-child,
#my-modal .cp-item-facts p:last-child { margin-bottom: 0; }
#my-modal .metabox .metadata:first-of-type,
#my-modal .cp-item-facts span:first-child {
  flex: 0 0 120px;
  font-weight: 700;
  color: var(--navy);
}
#my-modal .action {
  position: static !important;
  left: auto !important;
  bottom: auto !important;
  width: auto !important;
  height: auto !important;
  display: flex;
  align-items: flex-end;
  gap: 16px;
  margin: 16px 0 4px !important;
  padding: 0 !important;
}
#my-modal .amount-text,
#my-modal .mini-box-cover,
#my-modal .cart-box,
#my-modal .cancel-box,
#my-modal .quantity-input {
  position: static !important;
  left: auto !important;
  right: auto !important;
  top: auto !important;
  bottom: auto !important;
  margin-left: 0 !important;
}
#my-modal .mini-box-cover {
  display: flex !important;
  align-items: center;
  gap: 12px;
}
#my-modal .item-amount {
  display: flex !important;
  flex-direction: column !important;
  align-items: stretch;
  justify-content: flex-end;
  width: 7.5rem;
  height: auto;
  gap: 4px;
  box-sizing: border-box;
}
#my-modal .amount-text {
  width: 100%;
  margin: 0;
  font-size: 13px;
  line-height: 1.1;
}
#my-modal .quantity-input {
  width: 100% !important;
  max-width: none !important;
  max-height: none !important;
  margin: 0 !important;
  height: 45px;
  box-sizing: border-box;
  border: 1px solid #c5d0d6;
  border-radius: 8px;
  padding: 0 8px;
  background: #fff;
  color: var(--ink);
}
#my-modal.cp-oos .quantity-input {
  color: color-mix(in srgb, var(--ink) 62%, var(--sand));
  border-color: color-mix(in srgb, #c5d0d6 45%, var(--sand));
  background: color-mix(in srgb, #fff 50%, var(--sand));
}
#my-modal .cart-box,
#my-modal .cancel-box,
#my-modal .cp-stock-alert,
#my-modal .cart-box:hover,
#my-modal .cancel-box:hover,
#my-modal .cp-stock-alert:hover,
#my-modal.cp-oos .cart-box,
#my-modal.cp-oos .cart-box:hover,
#my-modal .cp-stock-alert.is-saved {
  background: var(--honey) !important;
  color: var(--navy) !important;
  border: 0 !important;
  border-radius: 8px !important;
  box-shadow: none !important;
  height: 45px !important;
  min-height: 45px !important;
  padding: 0 16px !important;
  font-weight: 700 !important;
  font-size: 15px !important;
  line-height: 1 !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
  cursor: pointer;
  white-space: nowrap;
}
#my-modal.cp-oos .cart-box,
#my-modal .cp-stock-alert.is-saved {
  cursor: default;
}
#my-modal .cancel-box:hover,
#my-modal .cp-stock-alert:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 14px rgba(14, 58, 77, 0.16) !important;
}
.cp-stock-alerts {
  margin: 0 0 16px;
  padding: 16px 18px;
  background: var(--paper);
  border: 1px solid var(--sand);
  border-radius: 12px;
  color: var(--ink);
}
.cp-stock-alerts h3 { margin: 0 0 6px; color: var(--navy); }
.cp-stock-alerts p, .cp-stock-alerts li { margin: 0 0 6px; }
.cp-stock-alerts ul { margin: 8px 0 0; padding-left: 18px; }
.cp-item-facts { margin: 0; }
.cp-price { color: var(--honey); font-size: 22px; font-weight: 700; text-align: center; opacity: 1; }
.cp-stock {
  margin-top: auto; width: 100%; min-height: 20px;
  font-size: 15px; font-weight: 700; text-align: center;
}
.cp-stock.cp-in { color: var(--pine); opacity: 1; }
.card:has(.cp-stock.cp-in) .cp-price { color: var(--honey); opacity: 1; }
.cp-stock.cp-out { color: color-mix(in srgb, var(--clay) 62%, var(--sand)); }
.card:has(.cp-stock.cp-out) .cp-price { color: color-mix(in srgb, var(--honey) 62%, var(--sand)); }

body[data-cp-page="login"] { background: var(--cream); min-height: 100vh; }
body[data-cp-page="login"] .login.wrapper {
  min-height: 100vh; height: auto; padding: 32px 16px;
  justify-content: center; align-items: center; box-sizing: border-box;
}
body[data-cp-page="login"] .login.formContent {
  background: var(--paper); border: 1px solid var(--sand); border-radius: 16px;
  box-shadow: 0 16px 40px rgba(14, 58, 77, 0.16);
  padding: 32px 28px 24px; width: min(420px, 100%); max-width: 420px; margin: 0 auto;
}
body[data-cp-page="login"] .cp-login-brand {
  display: block; text-align: center; font-size: 12px; font-weight: 700;
  letter-spacing: 0.12em; text-transform: uppercase; color: var(--lake); margin: 0 0 8px;
}
body[data-cp-page="login"] .login.formContent h1 {
  color: var(--navy); font-size: 28px; font-weight: 700; letter-spacing: -0.02em;
  margin: 0 0 22px; justify-content: center;
}
body[data-cp-page="login"] .login.formContent h1::after { content: none; }
body[data-cp-page="login"] .login.formContent .centered { display: block; width: 100%; }
body[data-cp-page="login"] .login input[type=text],
body[data-cp-page="login"] .login input[type=password] {
  width: 100%; max-width: none; box-sizing: border-box; text-align: left;
  height: 48px; margin: 0 0 12px; padding: 0 16px; border-radius: 10px;
  border: 1px solid var(--sand); background: var(--paper); color: var(--ink); font-size: 16px;
}
body[data-cp-page="login"] .login input[type=text]::placeholder,
body[data-cp-page="login"] .login input[type=password]::placeholder {
  color: var(--clay); text-align: left;
}
body[data-cp-page="login"] .login input[type=text]:focus,
body[data-cp-page="login"] .login input[type=password]:focus {
  background: var(--paper); border: 1px solid var(--lake); outline: 2px solid var(--mist);
}
body[data-cp-page="login"] .login input[type=submit] {
  width: 100%; box-sizing: border-box; height: 48px; margin: 8px 0 0; padding: 0 16px;
  background: var(--navy); color: var(--paper); border-radius: 10px;
  font-size: 16px; font-weight: 700; letter-spacing: 0.01em; text-transform: none;
  box-shadow: none; cursor: pointer;
}
body[data-cp-page="login"] .login input[type=submit]:hover { background: var(--lake); }
body[data-cp-page="login"] .cp-login-note {
  color: var(--clay); font-size: 14px; font-weight: 600; margin: 14px 0 0; text-align: center;
}

body[data-cp-page="account"] { background: var(--cream); }
body[data-cp-page="account"] #root,
body[data-cp-page="account"] #root > div,
body[data-cp-page="account"] .app {
  display: block !important;
  height: auto !important;
  min-height: 100vh;
}
body[data-cp-page="account"] .app > .bg-black { margin-top: 0 !important; }
body[data-cp-page="account"] h1,
body[data-cp-page="account"] h2,
body[data-cp-page="account"] h3,
body[data-cp-page="account"] h4,
body[data-cp-page="account"] h5 { color: var(--navy); }
body[data-cp-page="account"] h3 { margin: 8px 0 12px; }
body[data-cp-page="account"] h3::after { content: none; }
body[data-cp-page="account"] #bootstrap-overrides > h2,
body[data-cp-page="account"] #bootstrap-overrides > h3,
body[data-cp-page="account"] #bootstrap-overrides > h4 {
  display: flex;
  align-items: center;
  margin: 0 !important;
  line-height: 1.2 !important;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
body[data-cp-page="account"] #bootstrap-overrides > h2 {
  height: 32px !important;
  min-height: 32px !important;
  max-height: 32px !important;
  font-size: 22px !important;
  font-weight: 700;
}
body[data-cp-page="account"] #bootstrap-overrides > h3 {
  height: 48px !important;
  min-height: 48px !important;
  max-height: 48px !important;
  margin-top: 0 !important;
  font-size: 36px !important;
  font-weight: 700;
}
body[data-cp-page="account"] #bootstrap-overrides > hr.cp-account-rule {
  border: 0;
  border-top: 1px solid var(--sand);
  height: 1px;
  margin: 4px 0 10px !important;
  width: 100%;
}
body[data-cp-page="account"] #bootstrap-overrides > h4 {
  height: 32px !important;
  min-height: 32px !important;
  max-height: 32px !important;
  margin-top: 8px !important;
  margin-bottom: 8px !important;
}
body[data-cp-page="account"] .fill,
body[data-cp-page="account"] .flex-row.fill,
body[data-cp-page="account"] .quarter-width,
body[data-cp-page="account"] .three-quarter-width,
body[data-cp-page="account"] .shadow-box {
  height: auto !important;
  max-height: none !important;
  box-sizing: border-box;
}
body[data-cp-page="account"] .app > .fill {
  width: min(1240px, calc(100% - 32px)) !important;
  margin: 12px auto 32px !important;
}
body[data-cp-page="account"] .app > .fill > h2,
body[data-cp-page="account"] .app > .fill > h3,
body[data-cp-page="account"] .app > .fill > h4 {
  width: 100%;
  margin-left: 0 !important;
  margin-right: 0 !important;
}
body[data-cp-page="account"] .flex-row.fill {
  display: flex !important;
  align-items: flex-start !important;
  gap: 20px;
  width: 100% !important;
  margin: 0 !important;
}
body[data-cp-page="account"] #bootstrap-overrides {
  position: relative !important;
  z-index: 1 !important;
  width: min(1240px, calc(100% - 32px)) !important;
  max-width: none !important;
  height: auto !important;
  margin: 12px auto 32px !important;
}
body[data-cp-page="account"] #bootstrap-overrides::before {
  content: none;
}
body[data-cp-page="account"] .quarter-width {
  flex: 0 0 230px !important;
  width: 230px !important;
  min-width: 230px !important;
  max-width: 230px !important;
  margin-top: 0 !important;
  align-self: flex-start;
  position: relative;
  z-index: 10 !important;
  color: var(--ink);
  background: var(--paper);
  border: 1px solid var(--sand);
  border-radius: 12px;
  padding: 8px 0 20px;
  box-sizing: border-box;
}
body[data-cp-page="account"] .quarter-width h5 {
  display: flex; align-items: center; gap: 8px;
  margin: 14px 16px 6px; color: var(--navy); font-size: 16px;
}
body[data-cp-page="account"] .quarter-width h5 svg { width: 16px; height: 16px; }
body[data-cp-page="account"] .quarter-width hr {
  border: 0; border-top: 1px solid var(--sand); margin: 4px 16px;
}
body[data-cp-page="account"] .quarter-width p { margin: 0; height: 38px; }
body[data-cp-page="account"] .quarter-width a,
body[data-cp-page="account"] .quarter-width [role="menuitem"] {
  display: flex;
  align-items: center;
  box-sizing: border-box;
  height: 38px;
  min-height: 38px;
  max-height: 38px;
  padding: 0 16px;
  color: var(--ink);
  font-size: 14px;
  line-height: 38px;
  white-space: nowrap;
  text-decoration: none;
  cursor: pointer;
}
body[data-cp-page="account"] .quarter-width a.cp-menu-on,
body[data-cp-page="account"] .quarter-width [role="menuitem"].cp-menu-on {
  background: var(--mist);
  color: var(--navy);
}
body[data-cp-page="account"] .cp-soon {
  width: 100%;
  min-height: 420px;
  box-sizing: border-box;
  padding: 48px 32px;
  background: var(--paper);
  border: 1px solid var(--sand);
  border-radius: 12px;
}
body[data-cp-page="account"] .cp-soon h3 {
  margin: 0 0 8px;
  font-size: 28px;
  color: var(--navy);
}
body[data-cp-page="account"] .cp-soon p {
  margin: 0;
  font-size: 16px;
  color: var(--ink);
}
body[data-cp-page="account"] .three-quarter-width {
  flex: 1 1 auto !important; width: auto !important; min-width: 0;
}
body[data-cp-page="account"] .dash-container {
  width: 100% !important;
  max-width: 100%;
  margin: -22px 0 48px;
  overflow: visible;
  height: auto !important;
  max-height: none !important;
  background: var(--paper) !important;
  border: 1px solid var(--sand);
  border-radius: 12px;
  box-shadow: 0 8px 24px rgba(14, 58, 77, 0.08);
}
body[data-cp-page="account"] .shadow-box { width: 100% !important; max-width: 100%; }
body[data-cp-page="account"] .d-customer,
body[data-cp-page="account"] .d-logo,
body[data-cp-page="account"] .d-balance-cover,
body[data-cp-page="account"] .d-left-list,
body[data-cp-page="account"] .d-left-pr,
body[data-cp-page="account"] .d-left-li,
body[data-cp-page="account"] .d-right-li,
body[data-cp-page="account"] .d-l-tx,
body[data-cp-page="account"] .d-r-tx,
body[data-cp-page="account"] .d-p1,
body[data-cp-page="account"] .d-p2,
body[data-cp-page="account"] .d-p3,
body[data-cp-page="account"] .d-p4,
body[data-cp-page="account"] .d-p5,
body[data-cp-page="account"] .d-p6,
body[data-cp-page="account"] .d-s1,
body[data-cp-page="account"] .d-s2,
body[data-cp-page="account"] .d-s3,
body[data-cp-page="account"] .d-row3,
body[data-cp-page="account"] .d-row4,
body[data-cp-page="account"] .transaction,
body[data-cp-page="account"] .d-trx,
body[data-cp-page="account"] .trx-date,
body[data-cp-page="account"] .trx-total,
body[data-cp-page="account"] .buy-again,
body[data-cp-page="account"] .recorder-btn,
body[data-cp-page="account"] .d-include2,
body[data-cp-page="account"] #d-drop1,
body[data-cp-page="account"] #d-drop2 {
  position: static !important;
  left: auto !important; right: auto !important; top: auto !important; bottom: auto !important;
}
body[data-cp-page="account"] .d-row1 {
  display: flex !important; align-items: flex-start; justify-content: space-between;
  gap: 16px; height: auto !important; padding: 20px 24px 8px; box-sizing: border-box;
}
body[data-cp-page="account"] .d-balance-cover { width: auto !important; text-align: right; }
body[data-cp-page="account"] .d-ba,
body[data-cp-page="account"] .d-owe { justify-content: flex-end; }
body[data-cp-page="account"] .d-name h5 { margin: 0; font-size: 20px; }
body[data-cp-page="account"] .d-logo img { width: 72px; height: auto; }
body[data-cp-page="account"] .d-row2 {
  display: grid !important; grid-template-columns: 1fr 1fr;
  gap: 8px 32px; padding: 36px 28px 12px; box-sizing: border-box; position: relative;
}
body[data-cp-page="account"] .d-left-pr {
  position: absolute !important; left: 0 !important; right: 0 !important; top: 8px !important;
  margin: 0; text-align: center; font-size: 22px; color: var(--navy);
}
body[data-cp-page="account"] .d-left-list,
body[data-cp-page="account"] .d-right-list {
  display: flex; flex-direction: column; gap: 6px; width: auto !important; height: auto !important;
}
body[data-cp-page="account"] .d-left-li,
body[data-cp-page="account"] .d-right-li {
  display: grid !important; grid-template-columns: 148px minmax(0, 1fr);
  gap: 8px; width: auto !important; margin: 0;
}
body[data-cp-page="account"] .d-l-tx,
body[data-cp-page="account"] .d-r-tx { font-weight: 700; color: var(--navy); margin: 0; }
body[data-cp-page="account"] .d-p1,
body[data-cp-page="account"] .d-s1,
body[data-cp-page="account"] .d-p2,
body[data-cp-page="account"] .d-s2,
body[data-cp-page="account"] .d-p3,
body[data-cp-page="account"] .d-s3 { margin: 0; color: var(--ink); }
body[data-cp-page="account"] .d-row3 {
  display: flex !important; flex-wrap: wrap; align-items: center; gap: 10px 16px;
  width: auto !important; margin: 8px 24px; padding: 12px 14px; box-sizing: border-box;
  background: #f2eded; border-left: 4px solid var(--honey); border-radius: 8px;
}
body[data-cp-page="account"] .d-row3 > div:first-child {
  display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; width: 100%;
}
body[data-cp-page="account"] .transaction { font-weight: 700; color: var(--navy); }
body[data-cp-page="account"] .recorder-btn { margin-left: auto; width: auto !important; cursor: pointer; }
body[data-cp-page="account"] .d-row4 {
  display: flex !important; flex-direction: column; align-items: stretch; gap: 8px;
  width: auto !important; margin: 0; padding: 16px 24px 24px; box-sizing: border-box;
}
body[data-cp-page="account"] .d-row4 > div { width: 100% !important; height: auto !important; }
body[data-cp-page="account"] .d-row4 > div:first-child {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px;
}
body[data-cp-page="account"] .buy-again {
  flex: 1 0 100%; display: block; font-size: 18px; font-weight: 700; color: var(--navy); margin: 0;
}
body[data-cp-page="account"] .d-row4 > div:first-child > span {
  display: inline-flex; align-items: center; gap: 8px;
}
body[data-cp-page="account"] .d-row4 .card-group {
  display: flex !important;
  flex-wrap: nowrap;
  gap: 12px;
  width: 100%;
  height: auto !important;
  overflow-x: auto;
  overflow-y: hidden;
  padding: 0 0 18px;
  box-sizing: border-box;
}
body[data-cp-page="account"] .d-row4 .card-group > .card {
  flex: 0 0 14rem !important;
  width: 14rem !important;
  min-width: 14rem !important;
  height: auto !important;
  align-self: stretch;
}
body[data-cp-page="account"] .three-quarter-width:not(:has(.dash-container)) {
  background: var(--paper);
  border: 1px solid var(--sand);
  border-radius: 12px;
  padding: 8px;
  box-sizing: border-box;
}
body[data-cp-page="account"] .quarter-width,
body[data-cp-page="account"] .quarter-width h5,
body[data-cp-page="account"] .quarter-width a,
body[data-cp-page="account"] .quarter-width p,
body[data-cp-page="account"] .quarter-width div,
body[data-cp-page="account"] .quarter-width span,
body[data-cp-page="account"] .fill > h2,
body[data-cp-page="account"] .fill > h3,
body[data-cp-page="account"] .fill > h4,
body[data-cp-page="account"] table,
body[data-cp-page="account"] table th,
body[data-cp-page="account"] table td,
body[data-cp-page="account"] table th *,
body[data-cp-page="account"] table td *,
body[data-cp-page="account"] table a,
body[data-cp-page="account"] table button,
body[data-cp-page="account"] table span,
body[data-cp-page="account"] table div,
body[data-cp-page="account"] .MuiTypography-root,
body[data-cp-page="account"] .MuiTypography-h6 {
  color: #1C2B33 !important;
  -webkit-text-fill-color: #1C2B33 !important;
}
body[data-cp-page="account"] table th {
  background: #E7F1F4 !important;
}
.cp-img-missing {
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  width: 100%;
  min-width: 96px;
  min-height: 72px;
  margin: 0;
  padding: 8px;
  border: 1px dashed #8C6248;
  border-radius: 8px;
  color: #1C2B33;
  font-size: 12px;
  font-weight: 700;
  line-height: 1.3;
  text-align: center;
}
.pic-con > .cp-img-missing { height: 100%; }
body[data-cp-page="account"] .app > .flex-col.fill {
  width: 100% !important;
  max-width: none !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
}
body[data-cp-page="account"] .flex-row.header,
body[data-cp-page="account"] .flex-row.header > .fill,
body[data-cp-page="account"] .flex-row.header nav,
body[data-cp-page="account"] .header-container,
body[data-cp-page="account"] .category,
body[data-cp-page="account"] .cp-nav {
  width: 100% !important;
  max-width: none !important;
  height: auto !important;
  max-height: none !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
}
body[data-cp-page="account"] .app > .flex-col.fill > .flex-row.fill {
  width: min(1240px, calc(100% - 32px)) !important;
  margin-left: auto !important;
  margin-right: auto !important;
}
body[data-cp-page="account"] .header-container .row {
  display: grid !important;
  grid-template-columns: auto 230px minmax(160px, 1fr) auto !important;
  align-items: center !important;
  height: auto !important;
  width: 100% !important;
}
body[data-cp-page="account"] .header-container .search-box,
body[data-cp-page="account"] .header-container .cp-top-link,
body[data-cp-page="account"] .header-container .col-md-2,
body[data-cp-page="account"] .header-container .col-md-7,
body[data-cp-page="account"] .header-container .col-md-1,
body[data-cp-page="account"] .header-container .profile,
body[data-cp-page="account"] .header-container .cart {
  width: auto !important;
  max-width: 100% !important;
}
.header-container .search-box,
.header-container .search { align-self: center; }
.header-container .cp-intent-wrap {
  width: 230px !important;
  max-width: 230px !important;
  align-self: center;
}
.header-container .cp-intent {
  width: 100% !important;
  height: 44px !important;
}
@media (max-width: 1100px) {
  body[data-cp-page="account"] .d-row2 { grid-template-columns: 1fr !important; }
}
@media (max-width: 900px) {
  body[data-cp-page="account"] .header-container .row {
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    gap: 8px !important;
  }
  body[data-cp-page="account"] .header-container .search-box { flex: 1 1 180px !important; }
}
.bg-black, .MuiGrid-root.bg-black {
  background: var(--navy) !important; color: #fff !important;
}
.MuiTypography-h6 { color: var(--paper) !important; }
button.MuiButton-contained, .btn-primary, .recorder-btn {
  background: var(--honey); color: var(--navy); border: 0; font-weight: 700;
  border-radius: 8px; padding: 6px 12px;
}

.cart-con { height: auto; min-height: 0; width: 100%; }
.cart-container {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(240px, 320px);
  gap: 20px; height: auto; align-items: start;
  padding: 24px 16px 48px; box-sizing: border-box;
  width: min(1080px, calc(100% - 32px));
  margin: 0 auto;
}
.box-co {
  position: static; left: auto; top: auto; width: auto; max-width: 100%;
  height: auto; margin: 0 0 12px; box-sizing: border-box;
  grid-template-columns: 96px minmax(0, 1fr);
  background: var(--paper); border: 1px solid var(--sand); border-radius: 12px;
  box-shadow: none; overflow: hidden;
}
.cart-item-pic { width: 96px; height: 96px; object-fit: contain; padding: 8px; box-sizing: border-box; }
.box-co .left-box {
  display: flex !important;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding-bottom: 12px;
}
.box-co .bottom-left {
  display: flex !important;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  width: 96px !important;
  height: 36px !important;
  margin: 0 !important;
  padding: 0 !important;
  position: static !important;
  border: 1px solid var(--sand);
  border-radius: 8px;
  overflow: hidden;
  background: #fff;
  box-sizing: border-box;
}
.box-co .bottom-left .decrease,
.box-co .bottom-left .increase,
.box-co .bottom-left .qty-num {
  position: static !important;
  display: flex !important;
  align-items: center;
  justify-content: center;
  float: none !important;
  margin: 0 !important;
  height: 34px !important;
  min-height: 0 !important;
}
.box-co .bottom-left .decrease,
.box-co .bottom-left .increase { flex: 0 0 32px; width: 32px !important; }
.box-co .bottom-left .qty-num {
  flex: 1 1 auto;
  width: auto !important;
  border-left: 1px solid var(--sand);
  border-right: 1px solid var(--sand);
  font-size: 14px;
  font-weight: 700;
  line-height: 1;
  color: var(--ink);
}
.box-co .bottom-left .MuiIconButton-root {
  width: 32px !important;
  height: 34px !important;
  padding: 0 !important;
  border-radius: 0 !important;
  color: var(--navy) !important;
}
.box-co .bottom-left svg { width: 20px !important; height: 20px !important; }
.cp-cart-facts { display: flex; flex-direction: column; gap: 4px; margin: 6px 0 8px; }
.cp-cart-facts p { display: flex; gap: 8px; margin: 0; font-size: 14px; line-height: 1.3; }
.cp-cart-facts span:first-child { flex: 0 0 96px; font-weight: 700; color: var(--navy); }
.cp-cart-facts .cp-in { color: var(--pine); font-weight: 700; }
.cp-cart-facts .cp-out { color: color-mix(in srgb, var(--clay) 70%, var(--sand)); font-weight: 700; }
.right-box, .left-box { min-width: 0; }
.cartItem-desc, .cartItem-itemNum, .item-price, .total-amount {
  overflow-wrap: anywhere; max-width: 100%;
}
.cartItem-price, .top-span4 { color: var(--honey); font-weight: 700; }
.checkout-cover {
  position: static; left: auto; top: auto; width: auto; height: auto !important;
  background: var(--paper); border: 1px solid var(--sand); border-radius: 12px;
  box-shadow: none; padding: 16px 16px 20px !important; box-sizing: border-box;
}
.item-discount { display: none; }
.but-box {
  display: flex; flex-direction: column; gap: 12px; margin-top: 12px;
  height: auto !important; max-height: none !important; overflow: visible;
}
.checkout, .con-shopping,
.checkout:hover, .con-shopping:hover {
  display: flex; align-items: center; justify-content: center;
  width: 100%; box-sizing: border-box;
  height: 45px !important; min-height: 45px !important; padding: 0 16px;
  margin: 0 !important; align-self: stretch;
  background: var(--honey) !important; color: var(--navy) !important;
  border: 0 !important; border-radius: 8px; cursor: pointer;
  font-size: 15px; font-weight: 700; line-height: 1; white-space: nowrap;
}
.ch-span, .co-span { cursor: pointer; }

.modal { padding: 0 !important; }
.modal-dialog, .modal-xl {
  width: calc(100vw - 16px) !important;
  max-width: min(920px, calc(100vw - 16px)) !important;
  margin: 8px auto !important;
}
.modal-content {
  max-height: calc(100vh - 16px);
  overflow: auto;
  background: var(--paper) !important;
  border: 1px solid var(--sand) !important;
  border-radius: 12px !important;
  box-shadow: 0 16px 40px rgba(14, 58, 77, 0.16);
}
#checkout .header,
#checkout .modal-header {
  display: flex !important;
  align-items: center;
  background: #FFFCF8 !important;
  color: #1C2B33 !important;
  border-bottom: 1px solid #E4D5BC !important;
  border-top-left-radius: 12px !important;
  border-top-right-radius: 12px !important;
  font-weight: 700;
  padding: 0 56px 0 20px !important;
  min-height: 64px;
}
#checkout > .modal-content > button {
  position: absolute !important;
  top: 14px !important;
  right: 16px !important;
  z-index: 5;
  width: 36px !important;
  height: 36px !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 999px;
  background: transparent !important;
  color: #1C2B33 !important;
  font-size: 28px;
  line-height: 1;
  cursor: pointer;
}
#checkout > .modal-content > button:hover {
  background: #E7F1F4 !important;
}
#checkout .modal-body { background: var(--paper); }
#checkout .row { flex-wrap: wrap; gap: 12px; }
#checkout .col-1, #checkout .col-2, #checkout .block {
  max-width: 100% !important; flex: 1 1 260px; box-sizing: border-box;
}
#checkout.block > h3 {
  display: block !important;
  width: auto !important;
  max-width: 100% !important;
  margin: 0 0 12px !important;
  padding: 0 !important;
  font-size: 20px !important;
  line-height: 1.2 !important;
  font-weight: 700;
  color: var(--navy) !important;
  text-align: left !important;
  height: auto !important;
  align-items: flex-start !important;
}
#checkout.block > h3::after { content: none !important; }
#checkout .block {
  background: var(--paper);
  border: 1px solid var(--sand);
  border-radius: 12px;
  padding: 12px;
}
#checkout #purchaseButton.cat-button,
#checkout .MuiButton-root {
  display: flex !important;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  background: var(--honey) !important;
  color: var(--navy) !important;
  border: 0 !important;
  border-radius: 8px;
  height: 45px !important;
  min-height: 45px !important;
  width: 100% !important;
  max-width: none !important;
  margin: 0 !important;
  padding: 0 16px !important;
  font-weight: 700;
  text-transform: none;
  cursor: pointer !important;
  pointer-events: auto !important;
  position: relative;
  z-index: 2;
}
#checkout #purchaseButton.cat-button:hover,
#checkout .MuiButton-root:hover {
  background: var(--honey) !important;
  color: var(--navy) !important;
}
#checkout #purchaseButton.cat-button,
#checkout #purchaseButton.cat-button:hover {
  color: #fff !important;
  max-width: 100% !important;
}
#checkout .fill,
#checkout .block {
  min-width: 0;
  box-sizing: border-box;
}
#checkout .flex-row.margin-top10 {
  display: flex !important;
  flex-direction: column !important;
  align-items: stretch !important;
  width: 100% !important;
  max-width: 100% !important;
  box-sizing: border-box;
}
#checkout .cp-card {
  display: block;
  width: 100% !important;
  max-width: 100% !important;
  margin: 8px 0 12px !important;
  box-sizing: border-box;
}
#checkout .cp-card p,
#checkout .cp-card input {
  width: 100% !important;
  max-width: 100% !important;
  box-sizing: border-box;
}
#checkout table { width: 100%; table-layout: fixed; }
#checkout td, #checkout th { overflow-wrap: anywhere; }
#cp-order-confirm {
  position: fixed; inset: 0; z-index: 2000;
  display: flex; align-items: center; justify-content: center;
  background: rgba(28, 43, 51, 0.45); padding: 16px;
}
#cp-order-confirm[hidden] { display: none; }
.cp-order-card {
  width: min(440px, 100%); background: #FFFCF8; color: #1C2B33;
  border: 1px solid #E4D5BC; border-radius: 12px; padding: 24px;
  box-shadow: 0 16px 40px rgba(14, 58, 77, 0.16);
}
.cp-order-card h2 { margin: 0 0 8px; color: #0E3A4D; }
.cp-order-card p { margin: 0 0 12px; line-height: 1.4; }
.cp-order-actions { display: flex; flex-direction: column; gap: 8px; margin: 8px 0 12px; }
.cp-order-actions button {
  height: 45px; border: 0; border-radius: 8px; font-weight: 700; cursor: pointer;
  background: #C9842A; color: #fff;
}
#cp-order-email { background: #0E3A4D; }
.MuiGrid-root.bg-black, .bg-black,
.app > .bg-black,
.app > .bg-black a,
.app > .bg-black p,
.app > .bg-black span,
.app > .bg-black li,
.app > .bg-black h1,
.app > .bg-black h2,
.app > .bg-black h3,
.app > .bg-black h4,
.app > .bg-black h5,
.app > .bg-black h6,
.app > .bg-black .MuiTypography-root {
  color: #fff !important;
}
.category-box,
.category-box > .fill,
.category-box .flex-row.full-width,
.category-box .three-quarter-width,
.category-box .quarter-width,
.category-box .sub-category,
.category-box #featItemsSpan {
  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;
}
.category-box,
.category-box .flex-row.full-width {
  align-items: flex-start !important;
}
.category-box .three-quarter-width,
.category-box .scroll {
  overflow: visible !important;
}
.category-box .sub-category {
  align-self: flex-start;
}
.MuiGrid-root.bg-black .MuiTypography-root { color: #fff !important; }

@media (max-width: 800px) {
  :root { --slide-h: 220px; }
  .header-container { padding: 8px 12px; }
  .header-container .row { display: flex; flex-wrap: wrap; gap: 8px; }
  .cp-intent-wrap { flex: 1 1 100%; width: auto; max-width: none; order: 3; }
  .header-container .search-box { flex: 1 1 100%; width: 100% !important; order: 2; }
  .cp-tools { order: 1; margin-left: auto; }
  .cart, .profile { min-width: 48px; }
  h3 { font-size: 22px; margin: 20px 12px 8px; }
  .card { flex: 0 0 min(220px, 72vw); max-width: 72vw; }
  .card-group-scroll, #featItemsSpan { max-width: 100%; }
  .cart-container { grid-template-columns: 1fr; padding: 16px 12px 32px; }
  .cp-nav { top: 0; }
  #checkout .row { flex-direction: column; }
}