:root {
  --ys-ink: #161f35;
  --ys-muted: #4f6077;
  --ys-line: #e4e8ef;
  --ys-panel: #ffffff;
  --ys-soft: #f5f2ef;
  --ys-blush: #fbf6f1;
  --ys-brand: #9a5f45;
  --ys-brand-dark: #714a36;
  --ys-green: #12724f;
  --ys-shadow: 0 24px 50px rgba(22, 31, 53, 0.10);
  --ys-shadow-strong: 0 18px 44px rgba(22, 31, 53, 0.22);
}

html {
  background:
    radial-gradient(1200px 420px at 8% -12%, #ffffff 0%, rgba(255, 255, 255, 0));
  scroll-behavior: smooth;
}

body {
  min-width: 320px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(245, 240, 234, 0.94) 52%, #eff2f6);
  color: var(--ys-ink);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  overflow-x: hidden;
}

body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(130deg, rgba(255, 255, 255, 0.6), rgba(250, 246, 243, 0.22));
  z-index: -1;
}

button,
a,
input,
select {
  transition: border-color 180ms ease, box-shadow 180ms ease, transform 180ms ease, background-color 180ms ease;
}

button:focus-visible,
a:focus-visible,
input:focus-visible,
select:focus-visible {
  outline: 3px solid rgba(159, 102, 79, 0.24);
  outline-offset: 2px;
}

#root {
  min-height: 100vh;
}

#nav {
  width: min(1180px, calc(100% - 32px));
  margin: 16px auto 0;
  border: 1px solid rgba(228, 232, 239, 0.9);
  border-radius: 8px;
  overflow: visible;
  box-shadow: 0 18px 42px rgba(22, 31, 53, 0.12);
  color: var(--ys-muted) !important;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.96), rgba(250, 246, 241, 0.92)) !important;
  backdrop-filter: blur(14px);
}

#nav {
  border-radius: 12px;
}

#nav nav {
  min-height: 72px;
  padding: 10px 18px !important;
  border-radius: 8px;
  background: transparent !important;
  color: var(--ys-muted) !important;
  position: relative;
}

#nav img {
  width: 104px !important;
  height: auto !important;
  max-height: 64px;
  object-fit: contain;
}

#nav .navs {
  flex: 1;
  justify-content: flex-end;
  gap: 24px !important;
  padding: 0 !important;
  color: var(--ys-muted) !important;
  font-size: 0.92rem;
}

#nav .step-item {
  width: auto;
  min-width: 86px;
  gap: 8px;
  font-weight: 700;
  letter-spacing: 0;
  color: var(--ys-muted);
}

#nav .step-item::before {
  display: none;
}

#nav .step {
  width: 30px !important;
  height: 30px !important;
  background: linear-gradient(160deg, #f7f0e8, #ead9ca) !important;
  color: var(--ys-brand-dark);
  box-shadow: inset 0 0 0 1px rgba(154, 95, 69, 0.22), 0 4px 11px rgba(154, 95, 69, 0.18);
}

#nav .active .step,
#nav .complete .step {
  background: var(--ys-brand) !important;
  color: #fff;
}

#nav .step {
  width: 26px !important;
  height: 26px !important;
  border-radius: 999px !important;
}

#nav .active .step,
#nav .complete .step {
  background: linear-gradient(145deg, #9a5f45, #7a452f) !important;
}

#nav .cart-button svg path {
  fill: var(--ys-brand);
}

#nav button,
.proBtn,
.cart-btn1,
#check button:not(.hidden) {
  border-radius: 6px !important;
  background: linear-gradient(145deg, var(--ys-brand), var(--ys-brand-dark)) !important;
  color: #fff !important;
  border: 1px solid rgba(255, 255, 255, 0.24) !important;
  box-shadow: 0 10px 20px rgba(122, 73, 51, 0.24);
}

#nav button:hover,
.proBtn:hover,
.cart-btn1:hover,
#check button:not(.hidden):hover {
  background: linear-gradient(145deg, var(--ys-brand-dark), #633e2d) !important;
  transform: translateY(-1px);
  box-shadow: var(--ys-shadow-strong);
}

.dots,
.dots1,
.dots2 {
  display: none !important;
}

#product,
#cart,
#check {
  width: min(1180px, calc(100% - 32px));
  margin: 18px auto 48px;
  overflow: visible !important;
}

#product > .title,
#check > .title1 {
  margin: 0 0 22px;
  padding: 34px 28px !important;
  border: 1px solid rgba(228, 232, 239, 0.92);
  border-radius: 8px !important;
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.96), rgba(247, 242, 237, 0.86)),
    url("/assets/Yeotaskin-png-251527b7.png") no-repeat right 28px center / 136px;
  color: var(--ys-ink) !important;
  box-shadow: var(--ys-shadow);
  font-family: inherit !important;
  font-size: clamp(1.75rem, 2vw, 2rem) !important;
  font-weight: 800;
  text-align: left !important;
  white-space: nowrap !important;
  word-spacing: 0 !important;
}

#product > .title::after {
  content: "Partner ordering portal";
  display: block;
  margin-top: 6px;
  color: var(--ys-muted);
  font-size: 0.94rem;
  font-weight: 600;
}

#products {
  width: 100% !important;
  margin: 0 !important;
  min-height: 260px;
  padding-bottom: 24px !important;
}

#lists {
  width: 100%;
  grid-template-columns: repeat(auto-fit, minmax(218px, 1fr)) !important;
  gap: 18px !important;
  margin: 0 !important;
  place-content: stretch !important;
  text-align: left !important;
}

#lists > div {
  min-height: 100%;
  padding: 14px !important;
  border: 1px solid rgba(228, 232, 239, 0.95);
  border-radius: 8px !important;
  background: rgba(255, 255, 255, 0.96);
  box-shadow: 0 12px 35px rgba(22, 31, 53, 0.08) !important;
  transition: transform 220ms ease, border-color 220ms ease, box-shadow 220ms ease;
}

#lists > div:hover {
  border-color: rgba(159, 102, 79, 0.38);
  box-shadow: 0 16px 36px rgba(23, 32, 51, 0.12) !important;
  transform: translateY(-2px);
}

#lists > div > div:first-child {
  height: 205px !important;
  width: 100% !important;
  overflow: hidden;
  border-radius: 10px;
  background: var(--ys-blush);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.6);
}

#lists img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover;
}

.protext,
#desc,
.view,
#check,
#cart {
  font-family: inherit !important;
}

.protext p {
  min-height: 48px;
  color: var(--ys-ink);
  font-size: 0.97rem;
  font-weight: 700;
  line-height: 1.25;
}

#lists .protext + div,
#desc {
  color: var(--ys-muted) !important;
  font-size: 0.92rem;
  line-height: 1.45;
}

#lists .protext + div {
  margin-top: 6px;
  color: var(--ys-brand-dark) !important;
  font-size: 1.08rem;
  font-weight: 800;
}

#desc {
  min-height: 42px;
}

.proBtn {
  width: 100% !important;
  height: auto !important;
  min-height: 44px;
  padding: 12px 14px !important;
  font-family: inherit !important;
  font-size: 0.9rem !important;
  font-weight: 800;
  letter-spacing: 0.01em;
}

.view {
  display: inline-flex;
  width: 100%;
  justify-content: center;
  padding: 8px 0 2px !important;
  color: var(--ys-brand-dark) !important;
  font-weight: 800;
  text-decoration-thickness: 1px;
}

#cart > div.hidden,
#cart > div.sm\:hidden,
#check .checkMain {
  width: 100% !important;
  left: auto !important;
  margin: 0 auto;
  border: 1px solid rgba(228, 232, 239, 0.95) !important;
  border-radius: 8px !important;
  background: rgba(255, 255, 255, 0.97) !important;
  box-shadow: var(--ys-shadow) !important;
}

#cart {
  color: var(--ys-ink) !important;
}

#cart h1.title {
  margin: 0 0 18px;
  padding: 28px !important;
  border: 1px solid rgba(228, 232, 239, 0.92);
  border-radius: 8px !important;
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.97), rgba(247, 242, 237, 0.88)),
    url("/assets/Yeotaskin-png-251527b7.png") no-repeat right 28px center / 116px;
  color: var(--ys-ink) !important;
  box-shadow: var(--ys-shadow);
  font-family: inherit !important;
  font-size: clamp(1.8rem, 3vw, 2.55rem) !important;
  font-weight: 800;
  text-align: left !important;
}

#cart h1.title::after {
  content: "Review selected products before checkout";
  display: block;
  margin-top: 6px;
  color: var(--ys-muted);
  font-size: 0.94rem;
  font-weight: 600;
}

#cart table {
  width: 100%;
  margin: 0 !important;
  overflow: hidden;
  border: 1px solid var(--ys-line);
  border-radius: 8px;
  background: #fff;
  border-collapse: separate !important;
  border-spacing: 0 !important;
}

#cart thead {
  background: linear-gradient(180deg, #f9fbfe, #f5f5f2) !important;
}

#cart th,
#cart td {
  padding: 14px 16px !important;
  border-color: var(--ys-line) !important;
  color: var(--ys-ink) !important;
  vertical-align: middle !important;
}

#cart th {
  color: var(--ys-muted) !important;
  font-size: 0.78rem !important;
  font-weight: 900 !important;
  letter-spacing: 0.04em;
  text-align: left !important;
  text-transform: uppercase;
}

#cart tbody:empty::after {
  content: "Your cart is empty. Add products from the product list to continue.";
  display: block;
  min-height: 104px;
  padding: 34px 18px;
  color: var(--ys-muted);
  font-size: 0.98rem;
  font-weight: 700;
  text-align: center;
}

#cart table img {
  width: 64px !important;
  height: 64px !important;
  border-radius: 7px !important;
  object-fit: cover;
  background: var(--ys-blush);
}

#cart > div.hidden,
#cart > div.sm\:hidden {
  padding: clamp(18px, 3vw, 34px) !important;
}

#cart > div.hidden > h1:first-child,
#cart > div.sm\:hidden > h1:first-child {
  margin-bottom: 18px;
  color: var(--ys-ink) !important;
  font-size: 1.28rem !important;
  text-align: left !important;
}

#cart > div.hidden > div:nth-of-type(1),
#cart > div.sm\:hidden > div:nth-of-type(1) {
  display: grid !important;
  grid-template-columns: 1.6fr 0.8fr 1fr 0.8fr 0.9fr 0.56fr;
  gap: 12px;
  align-items: center;
  padding: 12px 14px !important;
  border: 1px solid var(--ys-line) !important;
  border-radius: 7px 7px 0 0;
  background: #f7f9fb;
  color: var(--ys-muted) !important;
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

#cart > div.hidden > div:nth-of-type(1) span,
#cart > div.sm\:hidden > div:nth-of-type(1) span {
  color: var(--ys-muted) !important;
  text-align: left !important;
}

#cart > div.hidden > div:nth-of-type(2),
#cart > div.sm\:hidden > div:nth-of-type(2) {
  min-height: 118px;
  border: 1px solid var(--ys-line);
  border-top: 0;
  border-radius: 0 0 7px 7px;
  background: #fff;
}

#cart > div.hidden > div:nth-of-type(2):empty::before,
#cart > div.sm\:hidden > div:nth-of-type(2):empty::before {
  content: "Your cart is empty. Add products from the product list to continue.";
  display: flex;
  min-height: 118px;
  align-items: center;
  justify-content: center;
  padding: 22px;
  color: var(--ys-muted);
  font-size: 0.98rem;
  font-weight: 700;
  text-align: center;
}

#cart .mainCartItem > div,
#cart .mainCartItem {
  width: 100%;
}

#cart .mainCartItem > div {
  display: grid !important;
  grid-template-columns: 1.6fr 0.8fr 1fr 0.8fr 0.9fr 0.56fr;
  gap: 12px;
  align-items: center;
  padding: 14px !important;
  border-bottom: 1px solid var(--ys-line) !important;
}

#cart .mainCartItem:last-child > div {
  border-bottom: 0 !important;
}

#cart .mainCartItem img {
  width: 58px !important;
  height: 58px !important;
  border-radius: 7px !important;
  object-fit: cover;
  background: var(--ys-blush);
}

#cart .mainCartItem button:not(.cart-btn1) {
  border: 1px solid #d8dee8 !important;
  border-radius: 8px !important;
  background: #fff !important;
  color: var(--ys-brand-dark) !important;
  font-weight: 800;
  transition: transform 160ms ease, box-shadow 160ms ease;
}

#cart .mainCartItem button:not(.cart-btn1):hover {
  border-color: rgba(159, 102, 79, 0.42) !important;
  background: #fff4ed !important;
  box-shadow: 0 4px 14px rgba(159, 102, 79, 0.2);
  transform: translateY(-1px);
}

#cart .mainCartItem input {
  width: 42px !important;
  min-height: 38px;
  font-weight: 800;
}

#cart > div.hidden > div.text-2xl,
#cart > div.hidden > div.text-xl,
#cart > div.sm\:hidden > div.text-2xl,
#cart > div.sm\:hidden > div.text-xl {
  margin-top: 20px !important;
  padding: 16px 18px;
  border: 1px solid var(--ys-line);
  border-radius: 8px;
  background: #fbfcfd;
  color: var(--ys-ink) !important;
  font-family: inherit !important;
  font-size: 1.35rem !important;
  font-weight: 900 !important;
  text-align: right !important;
}

#cart > div.hidden > div:last-child,
#cart > div.sm\:hidden > div:last-child {
  justify-content: flex-end !important;
  gap: 12px !important;
  margin-top: 14px !important;
}

#cart .cart-btn1 {
  min-width: 160px;
  min-height: 44px;
  padding: 12px 16px !important;
  font-weight: 800;
  letter-spacing: 0.01em;
}

#cart h1,
#check h1,
.title2 {
  color: var(--ys-ink) !important;
  font-family: inherit !important;
  font-weight: 800;
  letter-spacing: 0.01em;
}

#cart table,
#check table {
  border-collapse: separate;
  border-spacing: 0;
}

#cart thead,
#check thead {
  background: #f7f9fb;
  color: var(--ys-muted);
  font-size: 0.8rem;
  font-weight: 800;
  text-transform: uppercase;
}

#cart tr,
#check tr {
  border-bottom: 1px solid var(--ys-line);
  transition: background-color 160ms ease;
}

#cart tr:hover {
  background: rgba(255, 255, 255, 0.82);
}

#cart td,
#check td {
  color: var(--ys-ink);
  vertical-align: middle;
}

#cart input,
#check input,
#check select {
  min-height: 44px;
  border: 1px solid #d8dee8 !important;
  border-radius: 10px !important;
  background: #fff;
  color: var(--ys-ink);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.4);
  transition: transform 170ms ease, box-shadow 170ms ease;
}

#check textarea {
  min-height: 96px;
  border-radius: 10px !important;
  border-color: #e2e8f0 !important;
}

#cart input:focus,
#check input:focus,
#check select:focus {
  border-color: rgba(159, 102, 79, 0.62) !important;
  box-shadow: 0 0 0 4px rgba(159, 102, 79, 0.12), 0 4px 14px rgba(159, 102, 79, 0.16);
}

#check input:focus,
#check select:focus,
#check textarea:focus {
  border-color: #9a5f45 !important;
  box-shadow: 0 0 0 4px rgba(154, 95, 69, 0.14), 0 6px 18px rgba(154, 95, 69, 0.16);
}

#check label {
  font-size: 0.84rem;
  font-weight: 700;
  letter-spacing: 0.01em;
}

#check form input::file-selector-button {
  margin-right: 12px;
  border: 1px solid #e2e8f0 !important;
  background: #fff !important;
  color: var(--ys-ink);
  padding: 8px 12px;
  border-radius: 8px;
  transition: background-color 160ms ease, border-color 160ms ease, transform 160ms ease;
}

#check form input::file-selector-button:hover {
  background: #f8fafc !important;
  border-color: #9a5f45 !important;
  transform: translateY(-1px);
}

#check .checkMain {
  padding: clamp(20px, 4vw, 42px) !important;
  border: 1px solid var(--ys-line);
  border-radius: 16px;
  background:
    radial-gradient(circle at 100% 0%, rgba(159, 102, 79, 0.08), transparent 38%),
    linear-gradient(175deg, rgba(255, 255, 255, 0.98), #ffffff);
  box-shadow: var(--ys-shadow);
}

#check form h1,
#check .Bag h1 {
  margin: 0 0 12px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--ys-line);
  font-size: 1rem;
  color: var(--ys-ink) !important;
  letter-spacing: 0.01em;
}

#check .Bag {
  margin-top: 6px;
  padding: 18px;
  border: 1px solid var(--ys-line);
  border-radius: 14px;
  background: linear-gradient(180deg, #ffffff, var(--ys-soft));
  box-shadow: 0 12px 34px rgba(23, 32, 51, 0.08);
  position: relative;
}

#check .Bag::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 14px;
  pointer-events: none;
  border: 1px solid rgba(255, 255, 255, 0.75);
  opacity: 0.8;
}

#check .Bag h1 {
  margin-top: 0;
  font-size: 1.02rem;
}

#check .Bag li {
  margin-top: 10px;
  border-top: 1px solid rgba(22, 48, 82, 0.1);
  padding-top: 10px;
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 12px;
  align-items: center;
  justify-content: space-between;
}

#check .Bag li:first-child {
  border-top: 0;
  padding-top: 0;
}

#check #promo {
  border-color: rgba(159, 102, 79, 0.28);
  border-radius: 999px;
  min-height: 38px;
}

#check .Bag table {
  border: 1px solid var(--ys-line);
  border-radius: 10px;
  overflow: hidden;
  background: #fff;
}

#check .Bag td {
  padding: 10px 12px;
}

#check {
  width: min(1180px, calc(100% - 32px));
  margin-top: 8px;
  margin-bottom: 32px;
}

#check > .title1 {
  margin: 0 0 12px !important;
  padding: 24px 26px !important;
  border-radius: 12px !important;
  font-size: clamp(1.9rem, 3vw, 2.25rem) !important;
  text-align: left !important;
  font-weight: 800;
  letter-spacing: 0.01em;
}

#check > .title1 {
  background-position: right 20px center !important;
  background-size: 112px;
}

#check .checkMain {
  width: min(1180px, calc(100% - 24px)) !important;
  margin: 0 auto !important;
  left: 0 !important;
  padding: clamp(12px, 2vw, 22px) !important;
}

#check .checkMain > h1 {
  display: none;
}

#check .checkMain > div:last-child {
  display: grid !important;
  grid-template-columns: 65fr 35fr;
  gap: 20px;
  align-items: start;
}

#check .checkMain > div:last-child > div:nth-child(1) {
  grid-column: 1;
  width: 100%;
}

#check .checkMain > div:last-child > div:nth-child(1),
#check .checkMain > div:last-child > div:nth-child(2),
#check .checkMain > div:last-child > div:nth-child(3) {
  margin: 0;
}

#check .checkMain > div:last-child > div:nth-child(2) {
  grid-column: 2;
  width: 100%;
  grid-row: 1;
}

#check .checkMain > div:last-child > div:nth-child(3) {
  grid-column: 2;
  width: 100%;
  grid-row: 2;
}

#check .checkMain > div:last-child > div:nth-child(1) {
  border-radius: 12px;
  border: 1px solid #e2e8f0;
  background: #fff;
  padding: 16px;
  box-shadow: 0 14px 28px rgba(18, 30, 53, 0.08);
}

#check form > div > h1,
#check form .contact-heading,
#check form .shipping-heading,
#check form .checkout-file-heading {
  margin-bottom: 10px;
  font-size: 1rem;
  font-weight: 700;
  color: var(--ys-ink);
  letter-spacing: 0.01em;
}

#check .checkout-promo {
  margin-bottom: 12px !important;
  padding: 10px 0 !important;
  border-top: 0 !important;
  border-bottom: 1px solid var(--ys-line);
}

#check .checkout-promo input,
#check .checkout-promo button {
  min-height: 44px;
}

#check .checkout-promo,
#check .Bag {
  border-radius: 12px;
  background: #fff;
}

#check .Bag {
  position: static;
  align-self: start;
  border: 1px solid #e2e8f0;
  box-shadow: 0 14px 30px rgba(18, 30, 53, 0.08);
  padding: 16px;
  height: fit-content;
}

#check .Bag::before {
  display: none;
}

#check .Bag h1 {
  margin-top: 0;
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--ys-ink);
}

#check .Bag .display.grid.p-4 {
  padding: 0 !important;
  gap: 12px;
}

#check .Bag li {
  font-size: 0.95rem;
}

#check .Bag li.text-right.text-xl {
  margin-top: 12px;
  font-size: 1.3rem !important;
  font-weight: 800;
  color: var(--ys-ink);
}

#check .Bag table {
  width: 100%;
  border-collapse: separate !important;
}

#check .Bag table thead tr {
  background: linear-gradient(180deg, #f8fafc, #f1f5f9);
}

#check .Bag table td {
  vertical-align: middle;
  font-size: 0.95rem;
}

#check .title2 {
  font-size: 1.05rem;
  font-weight: 700;
}

#check .Bag .continue {
  border-radius: 10px !important;
  min-height: 46px !important;
}

#check .Bag .continue,
#check .Bag .text-sm {
  border-radius: 10px !important;
}

#check .Bag .continue.text-sm {
  margin-top: 8px !important;
}

#check .Bag li:last-child {
  margin-top: 8px;
}

#check .Bag li.flex.gap-2 {
  gap: 10px;
}

#check .Bag li.flex.gap-2 > div {
  flex: 1;
}

#check .Bag li.flex.gap-2 button {
  width: 100%;
  min-height: 46px;
  border-radius: 10px !important;
}

#check .Bag li.flex.gap-2 > div:first-child button {
  background: #fff !important;
  color: var(--ys-brand-dark) !important;
  border: 1px solid var(--ys-brand-dark) !important;
  box-shadow: 0 5px 14px rgba(18, 34, 56, 0.12);
}

#check .Bag .checkout-continue-button {
  background: #fff !important;
  color: var(--ys-brand-dark) !important;
  border: 1px solid var(--ys-brand-dark) !important;
}

#check .Bag li.flex.gap-2 > div:last-child button {
  background: linear-gradient(145deg, var(--ys-brand), var(--ys-brand-dark)) !important;
  border: 1px solid rgba(255, 255, 255, 0.28) !important;
  box-shadow: 0 8px 16px rgba(115, 67, 46, 0.22);
}

#check .Bag .checkout-checkout-button {
  background: linear-gradient(145deg, var(--ys-brand), var(--ys-brand-dark)) !important;
  border: 1px solid rgba(255, 255, 255, 0.28) !important;
}

#check .checkout-promo {
  display: flex !important;
  align-items: stretch !important;
  gap: 10px;
  margin-bottom: 14px;
  padding-top: 4px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--ys-line);
}

#check .checkout-promo .checkout-promo-input,
#check .checkout-promo input,
#check .checkout-promo .checkout-promo-btn,
#check .checkout-promo button {
  min-height: 44px;
}

#check .checkout-promo .checkout-promo-input,
#check .checkout-promo input {
  flex: 1;
  margin: 0 !important;
  min-width: 0 !important;
}

#check .checkout-promo .checkout-promo-btn,
#check .checkout-promo button {
  border-radius: 10px !important;
  width: 100px;
  font-size: 0.9rem;
  letter-spacing: 0.01em;
}

#check .checkout-summary-card {
  position: static !important;
  top: auto !important;
}

#check .Bag li:not(.flex) {
  margin-top: 4px;
}

#check form {
  border: 1px solid rgba(220, 228, 239, 0.95);
  border-radius: 12px;
  background: #fff;
  box-shadow: var(--ys-shadow);
  padding: 16px;
  margin: 10px 0 0;
  transition: box-shadow 180ms ease, transform 180ms ease, border-color 180ms ease;
}

#check .checkMain > div:first-child,
#check .checkMain > div:nth-child(2) {
  background: #fff;
  border: 1px solid var(--ys-line);
  border-radius: 14px;
  padding: 10px;
  box-shadow: 0 8px 24px rgba(22, 31, 53, 0.08);
}

#check form h1 {
  margin-top: 0;
  font-size: 1.06rem;
}

#check form > div,
#check form .field,
#check form .field-group {
  display: grid;
  gap: 6px;
}

#check form .display.flex.gap-4 {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

#check form > div:not(:first-child),
#check form .field,
#check form .field-group {
  margin-top: 14px;
}

#check form label {
  color: var(--ys-muted);
  font-size: 0.9rem;
  font-weight: 700;
}

#check form input,
#check form textarea,
#check form select {
  width: 100%;
  min-height: 44px;
  padding: 0 12px;
  border-radius: 10px;
  background: #fff;
  border-color: #dfe5ee;
  font-size: 0.95rem;
  box-sizing: border-box;
}

#check form input:hover,
#check form select:hover,
#check form textarea:hover {
  border-color: rgba(159, 102, 79, 0.34) !important;
  transform: translateY(-1px);
}

#check form textarea {
  min-height: 96px;
  padding-top: 10px;
  padding-bottom: 10px;
  resize: vertical;
}

#check form input::placeholder,
#check form textarea::placeholder {
  color: #96a0b0;
}

#check form button,
#check form .continue,
#check .Bag .continue,
#check .checkMain > div > button {
  width: 100% !important;
  max-width: 100% !important;
  min-height: 44px;
  border-radius: 10px;
  box-shadow: 0 12px 24px rgba(159, 102, 79, 0.2);
  border: 1px solid rgba(255, 255, 255, 0.28) !important;
  background: linear-gradient(145deg, var(--ys-brand), var(--ys-brand-dark)) !important;
  font-weight: 800;
  letter-spacing: 0.01em;
  border-radius: 10px !important;
}

#check form button,
#check form .continue,
#check .Bag .continue,
#check .checkMain > div > button {
  background: var(--ys-brand) !important;
  box-shadow: 0 8px 16px rgba(154, 95, 69, 0.24);
}

#check form button:hover,
#check form .continue:hover,
#check .Bag .continue:hover,
#check .checkMain > div > button:hover {
  background: var(--ys-brand-dark) !important;
}

#check form button,
#check form .continue,
#check .Bag .continue {
  margin: 8px 0 0 auto;
}

#check form button:not(:hover),
#check .Bag .continue:not(:hover) {
  justify-self: end;
}

#check #shipping,
#check #remark {
  width: 100%;
}

/* Checkout layout hard reset (desktop two-column + compact form density) */
#check .checkout-layout-shell,
#check .checkMain > .display.flex {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) 360px !important;
  gap: 24px !important;
  align-items: start !important;
}

#check .checkMain > div:last-child {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) 360px !important;
  gap: 24px !important;
  align-items: start !important;
}

#check .checkout-form-panel,
#check .checkout-summary-panel,
#check .checkout-layout-shell > * {
  min-width: 0 !important;
  width: 100% !important;
}

#check .checkout-layout-shell > .checkout-form-panel {
  grid-column: 1 !important;
  grid-row: 1 !important;
}

#check .checkout-layout-shell > .Bag,
#check .checkout-layout-shell > .checkout-summary-card {
  grid-column: 2 !important;
  grid-row: 1 !important;
  align-self: start !important;
}

#check .checkout-layout-shell > div:empty {
  display: none !important;
}

#check .checkout-form-panel,
#check .checkMain > div:last-child > div:nth-child(1) {
  margin: 0 !important;
  padding: 0 !important;
}

#check #checkoutForm {
  margin: 0 !important;
}

#check .Bag {
  margin: 0 !important;
  position: static !important;
  top: auto !important;
}

#check .checkout-summary-card {
  position: static !important;
  top: auto !important;
}

#check .checkMain {
  padding-top: clamp(12px, 1.6vw, 18px) !important;
  padding-bottom: clamp(12px, 1.6vw, 18px) !important;
}

#check .checkout-promo {
  margin: 0 0 12px !important;
}

#check .Bag .display.grid.p-4 .checkout-promo {
  order: -1;
}

#check .checkout-promo .checkout-promo-input,
#check .checkout-promo input,
#check .checkout-promo .checkout-promo-btn,
#check .checkout-promo button {
  min-height: 46px !important;
}

#check .checkout-promo .checkout-promo-btn,
#check .checkout-promo button {
  width: 108px !important;
  border-radius: 12px !important;
}

/* Checkout final layout lock: promo and cart must be one right-column card */
#check .checkMain {
  max-width: 1100px !important;
  width: min(1100px, calc(100vw - 32px)) !important;
  min-height: 0 !important;
}

#check .checkout-layout-shell,
#check .checkMain > .display.flex {
  grid-template-columns: minmax(0, 1fr) 360px !important;
  gap: 24px !important;
}

#check .checkout-layout-shell > .checkout-form-panel {
  grid-column: 1 !important;
  grid-row: 1 !important;
}

#check .checkout-layout-shell > .checkout-summary-panel,
#check .checkout-layout-shell > .Bag,
#check .checkout-layout-shell > .checkout-summary-card {
  grid-column: 2 !important;
  grid-row: 1 !important;
  align-self: start !important;
}

#check .checkout-layout-shell > div:not(.checkout-form-panel):not(.Bag):not(.checkout-summary-card):not(.checkout-summary-panel) {
  display: none !important;
}

#check .checkout-layout-shell > div:empty {
  display: none !important;
}

#check .checkout-summary-card,
#check .Bag {
  width: 360px !important;
  max-width: 100% !important;
  margin: 0 !important;
  position: sticky !important;
  top: 92px !important;
}

#check .Bag .display.grid.p-4 {
  display: flex !important;
  flex-direction: column !important;
}

#check .Bag .checkout-promo-holder {
  order: -1 !important;
  width: 100% !important;
  display: flex !important;
  flex-direction: row !important;
  align-items: stretch !important;
  gap: 8px !important;
  margin: 0 0 12px !important;
  padding: 0 0 12px !important;
  border-bottom: 1px solid var(--ys-line) !important;
}

#check .Bag .checkout-promo-row {
  display: flex !important;
  align-items: stretch !important;
  justify-content: stretch !important;
  gap: 8px !important;
  width: 100% !important;
}

#check .Bag .checkout-promo-holder input {
  flex: 1 1 auto !important;
  min-width: 0 !important;
  width: auto !important;
}

#check .Bag .checkout-promo-holder button {
  flex: 0 0 78px !important;
  width: 78px !important;
  min-width: 78px !important;
}

#check .checkout-layout-shell > .checkout-form-panel,
#check .checkout-form-panel {
  max-width: none !important;
}

#check .checkout-form-panel > h1,
#check .checkout-form-panel > form {
  width: 100% !important;
}

@media (max-width: 1100px) {
  #check .checkout-summary-card,
  #check .Bag {
    width: 100% !important;
    position: static !important;
    top: auto !important;
  }
}

#check form > div,
#check form .field,
#check form .field-group {
  gap: 10px !important;
}

#check form > div:not(:first-child),
#check form .field,
#check form .field-group {
  margin-top: 16px !important;
}

#check form input,
#check form textarea,
#check form select {
  min-height: 46px !important;
  border-radius: 14px !important;
  padding-left: 14px !important;
  padding-right: 14px !important;
}

#check form button,
#check form .continue,
#check .Bag .continue,
#check .checkMain > div > button {
  min-height: 46px !important;
  border-radius: 14px !important;
  margin-top: 8px !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
}

#check form button:not(:hover),
#check .Bag .continue:not(:hover) {
  justify-self: stretch !important;
}

#check form .display.grid.gap-4 > [name="city"][data-group="address-csp"],
#check form .display.grid.gap-4 > select[name="state"][data-group="address-csp"],
#check form .display.grid.gap-4 > [name="postcode"][data-group="address-csp"],
#check form .display.grid.gap-4 > [name="province"][data-group="address-csp"] {
  margin: 0 !important;
}

@media (max-width: 1100px) {
  #check .checkMain > div:last-child,
  #check .checkout-layout-shell,
  #check .checkMain > .display.flex {
    display: block !important;
  }

  #check .checkMain > div:last-child > div,
  #check .checkMain > div:last-child > div:nth-child(2),
  #check .checkMain > div:last-child > div:nth-child(3),
  #check .checkout-layout-shell > .checkout-form-panel,
  #check .checkout-layout-shell > .checkout-summary-panel {
    grid-column: auto !important;
    grid-row: auto !important;
    width: 100%;
    min-width: 0 !important;
  }

  #check .Bag {
    position: static;
    top: auto;
    margin-top: 14px;
  }

  #check .checkout-summary-card {
    position: static !important;
  }

  #check .checkout-promo {
    flex-direction: column;
  }

  #check .checkout-layout-shell {
    grid-template-columns: 1fr !important;
  }

  #check .checkout-promo .checkout-promo-btn,
  #check .checkout-promo button {
    width: 100%;
  }
}

@media (max-width: 767px) {
  #check form .display.flex.gap-4 {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  #check form .display.grid.gap-4 {
    grid-template-columns: minmax(0, 1fr) !important;
  }
}

@media (min-width: 768px) {
  #check form .display.grid.gap-4 {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  #check form .display.grid.gap-4 > [name="city"][data-group="address-csp"] {
    grid-column: 1 / 2;
  }

  #check form .display.grid.gap-4 > select[name="state"][data-group="address-csp"] {
    grid-column: 2 / 3;
  }

  #check form .display.grid.gap-4 > [name="postcode"][data-group="address-csp"],
  #check form .display.grid.gap-4 > [name="streetAddress"],
  #check form .display.grid.gap-4 > [name="phone"],
  #check form .display.grid.gap-4 > input[type="file"] {
    grid-column: 1 / -1;
  }
}

@media (max-width: 860px) {
  body {
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(245, 240, 234, 0.94) 55%, #eff2f6);
  }

  #nav {
    width: calc(100vw - 20px) !important;
    max-width: 1180px;
    margin-top: 10px;
    margin-left: auto;
    margin-right: auto;
    overflow: hidden;
  }

  #nav nav {
    min-height: 74px;
    flex-wrap: wrap;
    flex-direction: column;
    align-items: stretch !important;
    justify-content: space-between !important;
  }

  #nav img {
    width: 88px !important;
    align-self: center;
  }

  #nav .navs {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto;
    width: 100%;
    min-width: 0;
    max-width: 100%;
    justify-items: center;
    align-items: center;
    gap: 10px !important;
    margin-top: 10px;
    padding-top: 10px !important;
    border-top: 1px solid var(--ys-line);
    font-size: 0.82rem;
    overflow: hidden;
  }

  #nav .navs > div {
    width: 100%;
  }

  #nav .navs > div:not(.cart-button) {
    display: none;
  }

  #nav .step-item {
    min-width: 0;
    width: 100%;
    overflow: hidden;
    font-size: 0.74rem;
    line-height: 1.15;
  }

  #nav .navs > button {
    width: 100%;
    min-height: 40px;
    padding: 8px 12px !important;
  }

  #nav .cart-button {
    width: 100%;
    display: flex;
    justify-content: center;
  }

  #nav .toggler {
    display: none !important;
  }

  #nav .menu-items {
    position: absolute;
    left: 12px !important;
    right: 12px;
    top: calc(100% + 8px);
    flex-direction: column;
    gap: 8px;
    padding: 12px;
    border: 1px solid var(--ys-line);
    border-radius: 8px;
    background: #fff;
    box-shadow: var(--ys-shadow);
  }

  #nav .menu-items .step-item {
    flex-direction: row;
    justify-content: flex-start;
  }

  #product,
  #cart,
  #check {
    width: min(1180px, calc(100% - 20px));
    margin-bottom: 28px;
    overflow-x: clip !important;
  }

  #product > .title,
  #check > .title1,
  #cart h1.title {
    padding: 26px 20px !important;
    background-size: 96px;
    background-position: right 16px center;
  }

  #cart > div.hidden > div:nth-of-type(1),
  #cart > div.sm\:hidden > div:nth-of-type(1),
  #cart .mainCartItem > div {
    grid-template-columns: 1.2fr 0.7fr 1fr 0.7fr 0.8fr 0.48fr;
    gap: 8px;
    font-size: 0.72rem;
  }

  #cart > div.hidden,
  #cart > div.sm\:hidden {
    overflow-x: auto;
  }

  #cart > div.hidden > div:nth-of-type(1),
  #cart > div.hidden > div:nth-of-type(2),
  #cart > div.sm\:hidden > div:nth-of-type(1),
  #cart > div.sm\:hidden > div:nth-of-type(2),
  #cart .mainCartItem > div {
    min-width: 680px;
  }

  #lists {
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)) !important;
    gap: 12px !important;
  }

  #lists > div {
    padding: 10px !important;
  }

  #lists > div > div:first-child {
    height: 160px !important;
  }
}

@media (max-width: 560px) {
  #nav {
    overflow: hidden;
  }

  #nav .step-item {
    font-size: 0.7rem;
  }

  #nav .step {
    width: 26px !important;
    height: 26px !important;
  }

  #product > .title,
  #check > .title1,
  #cart h1.title {
    background-image: linear-gradient(135deg, rgba(255, 255, 255, 0.98), rgba(247, 242, 237, 0.9));
  }

  #lists {
    grid-template-columns: 1fr !important;
  }

  #products {
    min-height: 120px;
  }

  #lists > div > div:first-child {
    height: 220px !important;
  }

  #cart > div.hidden,
  #cart > div.sm\:hidden,
  #check .checkMain {
    padding: 16px !important;
  }

  #cart > div.hidden,
  #cart > div.sm\:hidden {
    overflow-x: visible;
  }

  #cart > div.hidden > div:nth-of-type(1),
  #cart > div.sm\:hidden > div:nth-of-type(1) {
    display: none !important;
  }

  #cart table {
    display: block;
    width: 100%;
    table-layout: fixed;
    overflow: hidden;
  }

  #cart thead,
  #cart tbody,
  #cart tr {
    display: block;
    width: 100%;
  }

  #cart thead {
    display: none;
  }

  #cart tbody:empty::after {
    width: 100%;
    min-height: 92px;
    box-sizing: border-box;
    padding: 26px 18px;
    white-space: normal;
  }

  #cart > div.hidden > div:nth-of-type(2),
  #cart > div.sm\:hidden > div:nth-of-type(2) {
    min-width: 0;
    border-top: 1px solid var(--ys-line);
    border-radius: 7px;
    overflow: hidden;
  }

  #cart > div.hidden > div:nth-of-type(2):empty::before,
  #cart > div.sm\:hidden > div:nth-of-type(2):empty::before {
    width: 100%;
    box-sizing: border-box;
    padding: 26px 18px;
    overflow-wrap: anywhere;
    line-height: 1.45;
  }

  #cart .mainCartItem > div {
    min-width: 0;
    grid-template-columns: 70px 1fr;
    gap: 10px 14px;
  }

  #cart .mainCartItem > div > div:nth-child(1) {
    grid-row: span 5;
  }

  #cart .mainCartItem > div > div:not(:first-child) {
    text-align: left !important;
  }

  #cart .mainCartItem > div > div:nth-child(2)::before {
    content: "Price";
  }

  #cart .mainCartItem > div > div:nth-child(3)::before {
    content: "Quantity";
  }

  #cart .mainCartItem > div > div:nth-child(4)::before {
    content: "Weight";
  }

  #cart .mainCartItem > div > div:nth-child(5)::before {
    content: "Total";
  }

  #cart .mainCartItem > div > div:nth-child(6)::before {
    content: "Action";
  }

  #cart .mainCartItem > div > div:not(:first-child)::before {
    display: block;
    margin-bottom: 3px;
    color: var(--ys-muted);
    font-size: 0.72rem;
    font-weight: 800;
    text-transform: uppercase;
  }

  #cart > div.hidden > div.text-2xl,
  #cart > div.hidden > div.text-xl,
  #cart > div.sm\:hidden > div.text-2xl,
  #cart > div.sm\:hidden > div.text-xl {
    font-size: 1.12rem !important;
    text-align: left !important;
  }

  #cart > div.hidden > div:last-child,
  #cart > div.sm\:hidden > div:last-child {
    flex-direction: column;
    align-items: stretch !important;
  }

  #cart .cart-btn1 {
    width: 100% !important;
  }

  #check .display.flex,
  #cart .display.flex {
    flex-wrap: wrap;
  }

  #check form {
    padding: 14px;
  }

  #check form button,
  #check form .continue,
  #check .Bag .continue,
  #check .checkMain > div > button {
    width: 100% !important;
    max-width: none !important;
  }
}

main#cart h1[class~="title"] {
  margin: 0 0 18px !important;
  padding: 28px !important;
  border: 1px solid rgba(228, 232, 239, 0.92) !important;
  border-radius: 8px !important;
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.97), rgba(247, 242, 237, 0.88)),
    url("/assets/Yeotaskin-png-251527b7.png") no-repeat right 28px center / 116px !important;
  color: var(--ys-ink) !important;
  box-shadow: var(--ys-shadow) !important;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif !important;
  font-size: clamp(1.8rem, 3vw, 2.55rem) !important;
  font-weight: 800 !important;
  line-height: 1.15 !important;
  text-align: left !important;
}

main#cart h1[class~="title"]::after {
  content: "Review selected products before checkout";
  display: block;
  margin-top: 6px;
  color: var(--ys-muted);
  font-size: 0.94rem;
  font-weight: 600;
}

h1.title {
  margin: 0 0 18px !important;
  padding: 28px !important;
  border: 1px solid rgba(228, 232, 239, 0.92) !important;
  border-radius: 8px !important;
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.97), rgba(247, 242, 237, 0.88)),
    url("/assets/Yeotaskin-png-251527b7.png") no-repeat right 28px center / 116px !important;
  color: var(--ys-ink) !important;
  box-shadow: var(--ys-shadow) !important;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif !important;
  font-size: clamp(1.8rem, 3vw, 2.55rem) !important;
  font-weight: 800 !important;
  line-height: 1.15 !important;
  text-align: left !important;
}

@media (max-width: 860px) {
  main#cart h1[class~="title"] {
    padding: 26px 20px !important;
    background-size: 96px !important;
    background-position: right 16px center !important;
  }
}

@media (max-width: 560px) {
  main#cart h1[class~="title"] {
    background-image: linear-gradient(135deg, rgba(255, 255, 255, 0.98), rgba(247, 242, 237, 0.9)) !important;
  }
}

/* Whole-site premium refinement: compact, solid partner ordering flow */
:root {
  --ys-page: #f7f5f2;
  --ys-card: #ffffff;
  --ys-card-soft: #fbfaf8;
  --ys-gold: #c8a46c;
  --ys-navy: #141d31;
  --ys-brown: #986047;
  --ys-brown-dark: #724632;
  --ys-border: #dde5ee;
  --ys-soft-shadow: 0 18px 42px rgba(20, 29, 49, 0.09);
  --ys-tight-shadow: 0 10px 28px rgba(20, 29, 49, 0.08);
}

html,
body {
  min-height: 100%;
  background:
    linear-gradient(180deg, #ffffff 0%, var(--ys-page) 52%, #eef2f6 100%) !important;
}

body {
  color: var(--ys-navy) !important;
  letter-spacing: 0 !important;
}

#root {
  padding-bottom: 36px;
}

#nav,
#product,
#cart,
#check {
  width: min(1120px, calc(100% - 28px)) !important;
}

#nav {
  position: sticky;
  top: 10px;
  z-index: 20;
  margin-top: 10px !important;
  border: 1px solid rgba(221, 229, 238, 0.94) !important;
  border-radius: 14px !important;
  background: rgba(255, 255, 255, 0.94) !important;
  box-shadow: 0 12px 34px rgba(20, 29, 49, 0.10) !important;
}

#nav nav {
  min-height: 66px !important;
  padding: 8px 16px !important;
}

#nav img {
  width: 96px !important;
  max-height: 54px !important;
}

#nav .navs {
  gap: clamp(14px, 3vw, 30px) !important;
}

#nav .step-item {
  min-width: 76px !important;
  color: #526278 !important;
  font-size: 0.86rem !important;
}

#nav .step {
  width: 28px !important;
  height: 28px !important;
  border: 1px solid rgba(152, 96, 71, 0.22) !important;
  box-shadow: 0 5px 12px rgba(152, 96, 71, 0.16) !important;
}

#nav button {
  min-width: 96px !important;
  min-height: 42px !important;
  border-radius: 10px !important;
}

#product,
#cart,
#check {
  margin-top: 16px !important;
  margin-bottom: 30px !important;
}

#product > .title,
#check > .title1,
main#cart h1[class~="title"],
h1.title {
  min-height: 116px !important;
  margin-bottom: 14px !important;
  padding: 26px 28px !important;
  border: 1px solid rgba(221, 229, 238, 0.92) !important;
  border-radius: 16px !important;
  background:
    linear-gradient(135deg, rgba(255,255,255,0.98) 0%, rgba(249,246,241,0.92) 64%, rgba(236,228,219,0.82) 100%),
    url("/assets/Yeotaskin-png-251527b7.png") no-repeat right 26px center / 118px !important;
  color: var(--ys-navy) !important;
  box-shadow: var(--ys-tight-shadow) !important;
  font-size: clamp(1.9rem, 3vw, 2.55rem) !important;
  line-height: 1.08 !important;
}

#product > .title::after,
main#cart h1[class~="title"]::after,
#cart h1.title::after {
  margin-top: 8px !important;
  color: #5b6b82 !important;
  font-size: 0.92rem !important;
}

#products {
  min-height: 150px !important;
}

#lists {
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)) !important;
  gap: 16px !important;
}

#lists:empty::before {
  content: "Products are loading. Please wait a moment.";
  display: flex;
  min-height: 132px;
  align-items: center;
  justify-content: center;
  grid-column: 1 / -1;
  border: 1px solid var(--ys-border);
  border-radius: 16px;
  background: rgba(255,255,255,0.92);
  color: #5b6b82;
  font-weight: 800;
  box-shadow: var(--ys-tight-shadow);
}

#lists > div {
  display: flex !important;
  flex-direction: column !important;
  padding: 12px !important;
  border-radius: 16px !important;
  border: 1px solid rgba(221, 229, 238, 0.96) !important;
  background: linear-gradient(180deg, #ffffff 0%, #fbfaf8 100%) !important;
  box-shadow: 0 12px 28px rgba(20, 29, 49, 0.08) !important;
}

#lists > div:hover {
  border-color: rgba(200, 164, 108, 0.78) !important;
  box-shadow: 0 18px 38px rgba(20, 29, 49, 0.13) !important;
}

#lists > div > div:first-child {
  height: 190px !important;
  border-radius: 14px !important;
  background: #f7f2ed !important;
}

.protext p {
  min-height: 42px !important;
  margin-top: 10px !important;
  color: var(--ys-navy) !important;
  font-size: 0.96rem !important;
}

#desc {
  min-height: 38px !important;
  color: #5b6b82 !important;
}

.proBtn,
.cart-btn1,
#nav button,
#check button:not(.hidden) {
  border-radius: 11px !important;
  background: var(--ys-brown) !important;
  box-shadow: 0 9px 18px rgba(152, 96, 71, 0.24) !important;
}

.proBtn:hover,
.cart-btn1:hover,
#nav button:hover,
#check button:not(.hidden):hover {
  background: var(--ys-brown-dark) !important;
  box-shadow: 0 12px 24px rgba(114, 70, 50, 0.28) !important;
}

#cart > div.hidden,
#cart > div.sm\:hidden,
#check .checkMain {
  border-radius: 16px !important;
  border: 1px solid rgba(221, 229, 238, 0.94) !important;
  background: rgba(255,255,255,0.96) !important;
  box-shadow: var(--ys-soft-shadow) !important;
}

#cart > div.hidden,
#cart > div.sm\:hidden {
  padding: clamp(18px, 2.7vw, 30px) !important;
}

#cart > div.hidden > div:nth-of-type(1),
#cart > div.sm\:hidden > div:nth-of-type(1),
#cart table thead {
  background: #f5f7fa !important;
}

#cart > div.hidden > div:nth-of-type(2):empty::before,
#cart > div.sm\:hidden > div:nth-of-type(2):empty::before,
#cart tbody:empty::after {
  min-height: 96px !important;
  color: #5d6c83 !important;
  font-size: 0.96rem !important;
  line-height: 1.5 !important;
}

#cart > div.hidden > div.text-2xl,
#cart > div.hidden > div.text-xl,
#cart > div.sm\:hidden > div.text-2xl,
#cart > div.sm\:hidden > div.text-xl {
  border-radius: 14px !important;
  background: var(--ys-card-soft) !important;
  font-size: clamp(1.2rem, 2.2vw, 1.55rem) !important;
}

#cart > div.hidden > div:last-child,
#cart > div.sm\:hidden > div:last-child {
  min-height: 96px !important;
  padding-top: 16px !important;
  border-top: 1px solid var(--ys-border);
}

#check .checkMain {
  max-width: 1120px !important;
  width: min(1120px, calc(100vw - 28px)) !important;
  padding: 16px !important;
}

#check .checkout-layout-shell,
#check .checkMain > .display.flex,
#check .checkMain > div:last-child {
  grid-template-columns: minmax(0, 1fr) 352px !important;
  gap: 22px !important;
}

#check form,
#check .Bag {
  border-radius: 16px !important;
  border: 1px solid rgba(221, 229, 238, 0.96) !important;
  box-shadow: 0 12px 28px rgba(20, 29, 49, 0.08) !important;
}

#check form {
  padding: 18px !important;
}

#check form input,
#check form textarea,
#check form select,
#check .checkout-promo input {
  border-radius: 12px !important;
  border-color: #dbe3ee !important;
  color: var(--ys-navy) !important;
}

#check .Bag {
  width: 352px !important;
  top: 92px !important;
  background: #ffffff !important;
}

#check .Bag h1 {
  font-size: 1.08rem !important;
}

#check .Bag li.text-right.text-xl {
  padding: 14px 0 0 !important;
  color: var(--ys-navy) !important;
}

#check .Bag li.flex.gap-2 {
  display: grid !important;
  grid-template-columns: 1fr !important;
}

#check .Bag li.flex.gap-2 > div,
#check .Bag li.flex.gap-2 button {
  width: 100% !important;
}

#check .Bag .checkout-promo-holder button {
  flex-basis: 82px !important;
  min-width: 82px !important;
}

@media (max-width: 1100px) {
  #check .checkout-layout-shell,
  #check .checkMain > .display.flex,
  #check .checkMain > div:last-child {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
  }

  #check .checkout-layout-shell > .checkout-summary-panel,
  #check .checkout-layout-shell > .Bag,
  #check .checkout-layout-shell > .checkout-summary-card,
  #check .Bag {
    width: 100% !important;
    grid-column: 1 !important;
    grid-row: auto !important;
    position: static !important;
  }
}

@media (max-width: 860px) {
  #root {
    padding-bottom: 20px;
  }

  #nav,
  #product,
  #cart,
  #check {
    width: calc(100vw - 18px) !important;
  }

  #nav {
    position: static;
    margin-top: 8px !important;
  }

  #nav nav {
    min-height: 0 !important;
    padding: 12px !important;
  }

  #nav .navs {
    grid-template-columns: 1fr !important;
  }

  #product > .title,
  #check > .title1,
  main#cart h1[class~="title"],
  h1.title {
    min-height: 88px !important;
    padding: 22px 18px !important;
    background-image: linear-gradient(135deg, rgba(255,255,255,0.98), rgba(248,244,239,0.94)) !important;
  }

  #lists {
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)) !important;
  }
}

@media (max-width: 560px) {
  #nav img {
    width: 88px !important;
  }

  #product,
  #cart,
  #check {
    margin-top: 12px !important;
  }

  #product > .title,
  #check > .title1,
  main#cart h1[class~="title"],
  h1.title {
    font-size: 1.82rem !important;
  }

  #lists {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  #lists > div > div:first-child {
    height: 205px !important;
  }

  #cart > div.hidden,
  #cart > div.sm\:hidden,
  #check .checkMain {
    padding: 14px !important;
  }

  #cart > div.hidden > div:nth-of-type(2):empty::before,
  #cart > div.sm\:hidden > div:nth-of-type(2):empty::before {
    padding: 24px 18px !important;
    overflow-wrap: anywhere !important;
  }

  #cart > div.hidden > div:last-child,
  #cart > div.sm\:hidden > div:last-child {
    min-height: 0 !important;
    padding-top: 14px !important;
  }

  #check form {
    padding: 14px !important;
  }
}

/* Checkout page refinement: cleaner premium form + stronger order summary */
#check {
  width: min(1160px, calc(100% - 28px)) !important;
}

#check > .title1 {
  min-height: 92px !important;
  margin-bottom: 10px !important;
  padding: 22px 26px !important;
}

#check .checkMain {
  max-width: 1160px !important;
  width: min(1160px, calc(100vw - 28px)) !important;
  padding: 18px !important;
  border-radius: 18px !important;
  background:
    linear-gradient(90deg, rgba(255,255,255,0.98) 0%, rgba(255,255,255,0.98) 66%, rgba(249,246,242,0.9) 66%, rgba(249,246,242,0.9) 100%) !important;
}

#check .checkout-layout-shell,
#check .checkMain > .display.flex,
#check .checkMain > div:last-child {
  grid-template-columns: minmax(0, 1fr) 370px !important;
  gap: 24px !important;
}

#check .checkout-form-panel,
#check .checkMain > div:last-child > div:nth-child(1) {
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

#check #checkoutForm,
#check form {
  margin: 0 !important;
  padding: 18px !important;
  border-radius: 16px !important;
  border: 1px solid rgba(211, 221, 233, 0.95) !important;
  background: #ffffff !important;
  box-shadow: 0 16px 34px rgba(20, 29, 49, 0.09) !important;
}

#check form h1,
#check form .contact-heading,
#check form .shipping-heading,
#check form .checkout-file-heading {
  margin: 0 0 12px !important;
  padding-bottom: 9px !important;
  border-bottom: 1px solid rgba(221, 229, 238, 0.95) !important;
  color: var(--ys-navy) !important;
  font-size: 0.98rem !important;
  font-weight: 850 !important;
}

#check form .display.grid.gap-4 {
  gap: 10px !important;
}

#check form input,
#check form select {
  min-height: 46px !important;
  border-radius: 13px !important;
  border: 1px solid #d7e0ec !important;
  background: #fff !important;
  font-size: 0.94rem !important;
}

#check form input::placeholder {
  color: #8b98aa !important;
}

#check form input[type="file"] {
  padding: 6px 10px !important;
}

#check form input::file-selector-button {
  min-height: 32px !important;
  border-radius: 10px !important;
  border-color: rgba(152, 96, 71, 0.28) !important;
  color: var(--ys-brown-dark) !important;
  font-weight: 800 !important;
}

#check .checkout-summary-panel,
#check .checkout-summary-card,
#check .Bag {
  width: 370px !important;
  margin: 0 !important;
  border-radius: 18px !important;
  border: 1px solid rgba(211, 221, 233, 0.98) !important;
  background: #ffffff !important;
  box-shadow: 0 18px 38px rgba(20, 29, 49, 0.12) !important;
}

#check .Bag {
  padding: 18px !important;
}

#check .Bag h1 {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  margin-bottom: 14px !important;
  padding-bottom: 12px !important;
  border-bottom: 1px solid var(--ys-border) !important;
  font-size: 1.02rem !important;
}

#check .Bag h1 a {
  color: var(--ys-brown-dark) !important;
  font-size: 0.78rem !important;
  font-weight: 850 !important;
}

#check .Bag .display.grid.p-4 {
  gap: 14px !important;
}

#check .Bag .checkout-promo-holder {
  padding: 0 0 14px !important;
  margin-bottom: 2px !important;
}

#check .Bag .checkout-promo-row {
  gap: 10px !important;
}

#check .Bag .checkout-promo-holder input {
  min-height: 44px !important;
  border-radius: 12px !important;
}

#check .Bag .checkout-promo-holder button {
  flex-basis: 86px !important;
  min-width: 86px !important;
  border-radius: 12px !important;
}

#check .Bag table {
  border-radius: 12px !important;
  border-color: #dce4ef !important;
}

#check .Bag table thead tr,
#check .Bag table thead {
  background: #f5f7fa !important;
}

#check .Bag table td,
#check .Bag table th {
  padding: 12px 10px !important;
  font-size: 0.84rem !important;
}

#check .Bag li {
  grid-template-columns: 1fr auto !important;
  gap: 10px !important;
  color: #5b6b82 !important;
  font-size: 0.92rem !important;
}

#check .Bag li.text-right.text-xl {
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  margin-top: 4px !important;
  padding-top: 14px !important;
  border-top: 1px solid var(--ys-border) !important;
  color: var(--ys-navy) !important;
  font-size: 1.2rem !important;
}

#check .Bag li.flex.gap-2 {
  margin-top: 14px !important;
  padding-top: 14px !important;
  display: grid !important;
  grid-template-columns: 1fr 1.12fr !important;
  gap: 10px !important;
}

#check .Bag li.flex.gap-2 button {
  min-height: 46px !important;
  white-space: nowrap !important;
}

#check .checkout-continue-button,
#check .Bag li.flex.gap-2 > div:first-child button {
  background: #fff !important;
  color: var(--ys-brown-dark) !important;
  border: 1px solid var(--ys-brown) !important;
  box-shadow: none !important;
}

#check .checkout-checkout-button,
#check .Bag li.flex.gap-2 > div:last-child button {
  background: var(--ys-brown) !important;
  color: #fff !important;
  border-color: var(--ys-brown) !important;
}

@media (max-width: 1100px) {
  #check .checkMain {
    background: rgba(255,255,255,0.96) !important;
  }

  #check .checkout-summary-panel,
  #check .checkout-summary-card,
  #check .Bag {
    width: 100% !important;
  }
}

@media (max-width: 680px) {
  #check {
    width: calc(100vw - 18px) !important;
  }

  #check > .title1 {
    min-height: 78px !important;
    padding: 20px 18px !important;
  }

  #check .checkMain {
    width: calc(100vw - 18px) !important;
    padding: 12px !important;
  }

  #check #checkoutForm,
  #check form,
  #check .Bag {
    padding: 14px !important;
    border-radius: 16px !important;
  }

  #check .Bag li.flex.gap-2 {
    grid-template-columns: 1fr !important;
  }

  #check .Bag .checkout-promo-row {
    flex-direction: column !important;
  }

  #check .Bag .checkout-promo-holder button {
    width: 100% !important;
    min-width: 0 !important;
    flex-basis: auto !important;
  }
}

/* Mobile checkout rescue: prevent squeezed form and floating promo */
@media (max-width: 760px) {
  #check,
  #check * {
    max-width: 100% !important;
    box-sizing: border-box !important;
  }

  #check .checkMain {
    width: calc(100vw - 18px) !important;
    max-width: calc(100vw - 18px) !important;
    overflow: hidden !important;
    background: #ffffff !important;
  }

  #check .checkMain > .display.flex,
  #check .checkout-layout-shell,
  #check .checkMain > div:last-child {
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 14px !important;
    width: 100% !important;
    min-width: 0 !important;
  }

  #check .checkMain > .display.flex > *,
  #check .checkout-layout-shell > *,
  #check .checkMain > div:last-child > * {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    flex: 0 0 auto !important;
    grid-column: auto !important;
    grid-row: auto !important;
    margin: 0 !important;
  }

  #check .checkout-form-panel,
  #check .checkMain > div:last-child > div:nth-child(1),
  #check #checkoutForm,
  #check form {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
  }

  #check #checkoutForm,
  #check form {
    display: block !important;
  }

  #check form .display.grid.gap-4,
  #check form .display.flex.gap-4,
  #check form > div {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    width: 100% !important;
  }

  #check form input,
  #check form select,
  #check form textarea {
    width: 100% !important;
    min-width: 0 !important;
  }

  #check .flex.justify-end:has(#promo),
  #check .checkout-promo-holder,
  #check .checkout-promo-row {
    position: static !important;
    display: flex !important;
    flex-direction: column !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    margin: 0 0 12px !important;
    padding: 0 0 12px !important;
    border-bottom: 1px solid var(--ys-border) !important;
  }

  #check #promo,
  #check .checkout-promo-input {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
  }

  #check .flex.justify-end:has(#promo) button,
  #check .checkout-promo-holder button,
  #check .checkout-promo-row button {
    width: 100% !important;
    min-width: 0 !important;
  }

  #check .checkout-summary-panel,
  #check .checkout-summary-card,
  #check .Bag {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    position: static !important;
    top: auto !important;
  }
}

@media (max-width: 560px) {
  #nav {
    min-height: 0 !important;
  }

  #nav nav {
    gap: 10px !important;
  }

  #nav img {
    display: block !important;
    width: 82px !important;
    max-height: 46px !important;
    margin: 0 auto !important;
  }

  #nav .navs {
    margin-top: 6px !important;
    padding-top: 8px !important;
  }

  #nav button {
    width: 100% !important;
    min-height: 44px !important;
  }

  #check .checkout-promo-holder {
    order: -2 !important;
  }

  #check .Bag .checkout-promo-holder {
    margin: 0 0 14px !important;
    padding: 0 0 14px !important;
  }

  #check .Bag table {
    table-layout: fixed !important;
  }

  #check .Bag table td,
  #check .Bag table th {
    padding-left: 8px !important;
    padding-right: 8px !important;
    overflow-wrap: anywhere !important;
  }

  #check .Bag li {
    display: flex !important;
    justify-content: space-between !important;
    width: 100% !important;
  }

  #check .Bag li span,
  #check .Bag li div {
    min-width: 0 !important;
  }
}

/* Product list polish: override the old fixed-card offsets from the generated bundle. */
#product {
  width: min(1180px, calc(100% - 32px)) !important;
  margin: 18px auto 56px !important;
}

#products {
  display: block !important;
  width: 100% !important;
  max-width: none !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: 0 0 28px !important;
  position: static !important;
  left: auto !important;
  text-align: left !important;
  place-content: stretch !important;
  justify-content: stretch !important;
  align-content: stretch !important;
}

#product #lists,
#product .master {
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  grid-auto-rows: 1fr !important;
  gap: 22px !important;
  width: 100% !important;
  max-width: none !important;
  margin: 0 !important;
  padding: 0 !important;
  position: static !important;
  left: auto !important;
  place-content: stretch !important;
  align-items: stretch !important;
  justify-items: stretch !important;
}

#product #lists > div,
#product .divProduct {
  width: 100% !important;
  min-width: 0 !important;
  max-width: none !important;
  min-height: 100% !important;
  margin: 0 !important;
  padding: 14px !important;
  position: relative !important;
  left: auto !important;
  top: auto !important;
  display: flex !important;
  flex-direction: column !important;
  border: 1px solid rgba(226, 232, 240, 0.96) !important;
  border-radius: 16px !important;
  background: #fff !important;
  box-shadow: 0 14px 34px rgba(20, 29, 49, 0.08) !important;
  transition: transform 180ms ease, border-color 180ms ease, box-shadow 180ms ease !important;
}

#product #lists > div:hover,
#product .divProduct:hover {
  border-color: rgba(166, 103, 75, 0.42) !important;
  box-shadow: 0 18px 42px rgba(20, 29, 49, 0.13) !important;
  transform: translateY(-2px);
}

#product #lists > div > div:first-child,
#product .divProduct > div:first-child {
  width: 100% !important;
  height: auto !important;
  aspect-ratio: 4 / 3 !important;
  margin: 0 0 14px !important;
  overflow: hidden !important;
  border-radius: 14px !important;
  background: #f6efe8 !important;
}

#product #lists img,
#product .divProduct img {
  width: 100% !important;
  height: 100% !important;
  min-height: 0 !important;
  object-fit: cover !important;
  object-position: center !important;
}

#product .protext {
  display: block !important;
  min-height: 48px !important;
  margin: 0 !important;
}

#product .protext p {
  min-height: 0 !important;
  color: var(--ys-ink) !important;
  font-size: 0.94rem !important;
  line-height: 1.35 !important;
  font-weight: 850 !important;
  letter-spacing: 0 !important;
  text-align: left !important;
  overflow-wrap: anywhere !important;
}

#product #lists .protext + div,
#product .divProduct .protext + div {
  margin: 12px 0 18px !important;
  color: var(--ys-brand-dark) !important;
  font-size: 1.08rem !important;
  font-weight: 900 !important;
  line-height: 1.2 !important;
}

#product .proBtn {
  width: 100% !important;
  min-height: 46px !important;
  margin-top: auto !important;
  border-radius: 10px !important;
  background: var(--ys-brown) !important;
  color: #fff !important;
  font-size: 0.86rem !important;
  font-weight: 900 !important;
  text-align: center !important;
  box-shadow: 0 10px 20px rgba(112, 66, 47, 0.22) !important;
}

#product .view {
  width: 100% !important;
  min-height: 34px !important;
  margin-top: 10px !important;
  padding: 8px 0 0 !important;
  color: var(--ys-brand-dark) !important;
  font-size: 0.84rem !important;
  font-weight: 850 !important;
  text-align: center !important;
}

@media (max-width: 1100px) {
  #product #lists,
  #product .master {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 18px !important;
  }
}

@media (max-width: 760px) {
  #product {
    width: calc(100vw - 24px) !important;
    margin-top: 14px !important;
  }

  #product #lists,
  #product .master {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 14px !important;
  }

  #product #lists > div,
  #product .divProduct {
    padding: 12px !important;
  }

  #product .protext p {
    font-size: 0.82rem !important;
  }
}

@media (max-width: 520px) {
  #product {
    width: calc(100vw - 18px) !important;
  }

  #product #lists,
  #product .master {
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 14px !important;
  }

  #product #lists > div > div:first-child,
  #product .divProduct > div:first-child {
    aspect-ratio: 16 / 11 !important;
  }
}

/* Cart page polish: keep totals and actions aligned inside the cart card. */
#cart .cartMain {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) !important;
  gap: 16px !important;
  width: 100% !important;
  max-width: none !important;
  left: auto !important;
  margin: 0 auto !important;
  padding: clamp(18px, 2.4vw, 30px) !important;
  border-radius: 16px !important;
}

#cart .cartMain > h1:first-child {
  margin: 0 !important;
  padding: 0 0 4px !important;
  color: var(--ys-ink) !important;
  font-size: 1.08rem !important;
  font-weight: 900 !important;
  text-align: left !important;
}

#cart .cartMain table {
  margin: 0 !important;
  table-layout: fixed !important;
}

#cart .cartMain thead td {
  padding: 12px 16px !important;
  color: var(--ys-ink) !important;
  font-size: 0.78rem !important;
  font-weight: 900 !important;
  text-transform: uppercase !important;
}

#cart .cartMain tbody td {
  padding: 12px 16px !important;
  color: var(--ys-ink) !important;
}

#cart .cartMain tbody td:nth-child(1) {
  width: 18% !important;
}

#cart .cartMain tbody td:nth-child(2),
#cart .cartMain tbody td:nth-child(4),
#cart .cartMain tbody td:nth-child(5) {
  text-align: left !important;
}

#cart .cartMain tbody td:nth-child(3) > div {
  align-items: center !important;
  gap: 8px !important;
}

#cart .cartMain tbody td:last-child {
  width: 48px !important;
  text-align: right !important;
}

#cart .cartMain tbody td:last-child button {
  position: static !important;
  width: 34px !important;
  height: 34px !important;
  padding: 0 !important;
  border-radius: 9px !important;
  color: var(--ys-brand-dark) !important;
}

#cart .cartMain img {
  width: 54px !important;
  height: 54px !important;
  border-radius: 10px !important;
}

#cart .cartMain input.quantity,
#cart .cartMain input[type="text"] {
  width: 40px !important;
  min-height: 36px !important;
  border-radius: 9px !important;
}

#cart .cartMain > div.text-2xl,
#cart .cartMain > div.text-xl {
  display: flex !important;
  width: 100% !important;
  min-height: 64px !important;
  align-items: center !important;
  justify-content: flex-end !important;
  margin: 2px 0 0 !important;
  padding: 14px 20px !important;
  border: 1px solid var(--ys-line) !important;
  border-radius: 14px !important;
  background: #fbfcfd !important;
  color: var(--ys-ink) !important;
  font-size: 1.22rem !important;
  font-weight: 900 !important;
  line-height: 1.25 !important;
  text-align: right !important;
  text-transform: uppercase !important;
  box-sizing: border-box !important;
}

#cart > div.hidden.cartMain > div.text-2xl.my-2.font-bold:nth-of-type(1),
#cart > div.sm\:hidden.cartMain > div.text-xl.my-1.font-bold:nth-of-type(1),
#cart .cartMain > div.text-2xl.my-2.font-bold:nth-of-type(1),
#cart .cartMain > div.text-xl.my-1.font-bold:nth-of-type(1) {
  display: flex !important;
  grid-template-columns: none !important;
  align-items: center !important;
  justify-content: flex-end !important;
  gap: 8px !important;
}

#cart .cartMain > div:last-child {
  display: flex !important;
  width: 100% !important;
  min-height: 0 !important;
  align-items: center !important;
  justify-content: flex-end !important;
  gap: 12px !important;
  margin: 0 !important;
  padding: 2px 0 0 !important;
}

#cart .cartMain > div:last-child a {
  display: block !important;
}

#cart .cartMain .cart-btn1 {
  min-width: 172px !important;
  min-height: 46px !important;
  margin: 0 !important;
  padding: 12px 18px !important;
  border-radius: 10px !important;
  font-size: 0.88rem !important;
  font-weight: 900 !important;
}

@media (max-width: 760px) {
  #cart .cartMain {
    padding: 14px !important;
  }

  #cart .cartMain table,
  #cart .cartMain tbody,
  #cart .cartMain tr {
    display: block !important;
    width: 100% !important;
  }

  #cart .cartMain thead {
    display: none !important;
  }

  #cart .cartMain .mainCartItem {
    display: block !important;
    width: 100% !important;
    padding: 12px !important;
    border-bottom: 1px solid var(--ys-line) !important;
  }

  #cart .cartMain .mainCartItem > div,
  #cart .cartMain .mainCartItem {
    grid-template-columns: 64px minmax(0, 1fr) !important;
  }

  #cart .cartMain > div.text-2xl,
  #cart .cartMain > div.text-xl {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    justify-content: center !important;
    font-size: 1.08rem !important;
    text-align: center !important;
  }

  #cart > div.hidden.cartMain > div.text-2xl.my-2.font-bold:nth-of-type(1),
  #cart > div.sm\:hidden.cartMain > div.text-xl.my-1.font-bold:nth-of-type(1),
  #cart .cartMain > div.text-2xl.my-2.font-bold:nth-of-type(1),
  #cart .cartMain > div.text-xl.my-1.font-bold:nth-of-type(1) {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    justify-content: center !important;
  }

  #cart .cartMain > div:last-child {
    flex-direction: column !important;
    align-items: stretch !important;
  }

  #cart .cartMain > div:last-child a,
  #cart .cartMain .cart-btn1 {
    width: 100% !important;
    min-width: 0 !important;
  }
}

.checkout-submit-notice {
  width: 100%;
  margin: 0 0 14px !important;
  padding: 12px 14px !important;
  border-radius: 12px !important;
  font-size: 0.88rem !important;
  font-weight: 850 !important;
  line-height: 1.35 !important;
  text-align: left !important;
  box-shadow: 0 8px 18px rgba(20, 29, 49, 0.08) !important;
}

.checkout-submit-notice-success {
  border: 1px solid #a7f3d0 !important;
  background: #ecfdf5 !important;
  color: #065f46 !important;
}

.checkout-submit-notice-warning {
  border: 1px solid #fde68a !important;
  background: #fffbeb !important;
  color: #92400e !important;
}

.checkout-submit-notice-error {
  border: 1px solid #fecaca !important;
  background: #fef2f2 !important;
  color: #991b1b !important;
}