@import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800;900&family=Space+Grotesk:wght@500;600;700&display=swap");

:root {
  --bg: #f4faf5;
  --surface: #ffffff;
  --surface-soft: #f8fcf9;
  --surface-muted: #edf7ef;
  --line: #d8e7db;
  --ink: #07110b;
  --muted: #43564f;
  --green: #3ba263;
  --green-dark: #13311d;
  --green-soft: #e2f3e7;
  --hero-soft: #afcdb5;
  --shadow: 0 24px 70px rgba(42, 91, 59, .16);
  --header-h: 122px;
}

*,
*::before,
*::after { box-sizing: border-box; }

html { scroll-behavior: smooth; }

section[id] { scroll-margin-top: calc(var(--header-h) + 18px); }

body {
  margin: 0;
  color: var(--ink);
  background: var(--bg);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: 16px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

img { display: block; max-width: 100%; }
a { color: inherit; }
button, input, textarea, select { font: inherit; }

.page-width {
  width: min(1176px, calc(100% - 136px));
  margin-inline: auto;
}

.skip-link {
  position: absolute;
  left: -999px;
  top: 8px;
  padding: 10px 14px;
  background: var(--ink);
  color: #fff;
  z-index: 200;
}

.skip-link:focus { left: 8px; }

.site-header {
  height: var(--header-h);
  position: sticky;
  top: 0;
  z-index: 50;
  border-bottom: 1px solid var(--line);
  background: rgba(247, 254, 247, .9);
  backdrop-filter: blur(20px);
}

.header-inner {
  height: 100%;
  display: grid;
  grid-template-columns: 220px 1fr auto;
  align-items: center;
  padding-top: 0;
}

.brand-side {
  display: flex;
  align-items: center;
  gap: 0;
}

.brand {
  display: inline-flex;
  align-items: center;
  justify-content: flex-start;
  color: var(--ink);
  text-decoration: none;
  line-height: 1;
}

.brand-mark {
  width: 130px;
  height: auto;
  object-fit: contain;
  opacity: 1;
}

.main-nav {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 9px;
}

.main-nav a {
  padding: 9px 17px;
  border-radius: 999px;
  color: #2b312c;
  text-decoration: none;
  font-size: 15px;
  font-weight: 500;
}

.main-nav a:hover,
.main-nav a.is-active {
  background: #eff6ef;
  color: var(--ink);
}

.header-actions {
  display: flex;
  align-items: center;
  gap: 18px;
  padding-left: 10px;
}

.admin-pill {
  min-height: 38px;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 0 14px;
  border-radius: 999px;
  background: var(--green-dark);
  color: #fff;
  text-decoration: none;
  font-size: 13px;
  font-weight: 800;
}

.admin-pill svg {
  width: 16px;
  height: 16px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.icon-link {
  position: relative;
  width: 24px;
  height: 24px;
  display: inline-grid;
  place-items: center;
  color: var(--ink);
  text-decoration: none;
}

.icon-link svg,
.menu-toggle svg {
  width: 20px;
  height: 20px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.cart-icon strong {
  position: absolute;
  right: -9px;
  top: -12px;
  width: 19px;
  height: 19px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: var(--green);
  color: #fff;
  font-size: 11px;
  line-height: 1;
}

.menu-toggle {
  display: none;
  justify-self: end;
  width: 42px;
  height: 42px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--surface);
}

h1, h2, h3 {
  margin: 0;
  letter-spacing: 0;
  line-height: 1.04;
  color: var(--ink);
}

h1 { font-size: clamp(48px, 5.4vw, 72px); font-weight: 900; }
h2 { font-size: clamp(38px, 4.2vw, 50px); font-weight: 900; }
h3 { font-size: 18px; font-weight: 800; }
p { margin: 0; color: var(--muted); }

.button {
  min-height: 53px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 0 25px;
  border: 1px solid var(--green);
  border-radius: 999px;
  background: var(--green);
  color: #fff;
  text-decoration: none;
  font-size: 16px;
  font-weight: 800;
  cursor: pointer;
  box-shadow: 0 16px 28px rgba(59, 162, 97, .24);
}

.button:hover { background: #3d9c5e; }

.button-outline,
.button.secondary {
  border-color: var(--ink);
  background: transparent;
  color: var(--ink);
  box-shadow: none;
}

.button-dark-outline { box-shadow: none; }

.button.small {
  min-height: 40px;
  padding: 0 20px;
  font-size: 14px;
}

.button-full { width: 100%; }

.pill {
  width: fit-content;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 29px;
  padding: 5px 13px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: rgba(255,255,255,.72);
  color: #2b312c;
  font-size: 14px;
}

.pill i {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--green);
}

.home-hero {
  min-height: 773px;
  padding: 126px 0 94px;
}

.hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 550px;
  gap: 76px;
  align-items: center;
}

.hero-copy {
  display: grid;
  justify-items: start;
  gap: 26px;
}

.hero-copy h1 {
  font-size: clamp(58px, 6vw, 72px);
  line-height: 1.02;
}

.hero-copy h1 span { color: #3d9c5e; }

.hero-copy > p {
  max-width: 560px;
  font-size: 21px;
  line-height: 1.42;
}

.hero-actions {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}

.trust-row {
  list-style: none;
  padding: 12px 0 0;
  margin: 0;
  display: flex;
  gap: 22px 26px;
  flex-wrap: wrap;
  color: #2b312c;
}

.trust-row li {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 15px;
}

.trust-row span {
  width: 28px;
  height: 28px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--green-soft);
  color: var(--green);
}

.hero-visual {
  position: relative;
  height: 550px;
  border-radius: 32px;
  overflow: hidden;
  background: linear-gradient(140deg, #b3c9b4, #e7f2e8 52%, #b7d1ba);
  box-shadow: 0 26px 58px rgba(30, 73, 46, .13);
}

.hero-visual img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.personal-badge {
  position: absolute;
  top: 16px;
  right: 22px;
  transform: rotate(6deg);
  min-width: 168px;
  padding: 14px 18px;
  border: 1px solid rgba(0,0,0,.06);
  border-radius: 16px;
  background: rgba(255,255,255,.96);
  color: var(--muted);
  font-size: 13px;
  line-height: 1.35;
  box-shadow: 0 14px 30px rgba(0,0,0,.10);
  z-index: 3;
}

.personal-badge strong {
  display: block;
  margin-bottom: 2px;
  color: var(--green);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.hero-product-bar {
  position: absolute;
  left: 20px;
  right: 20px;
  bottom: 20px;
  min-height: 58px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 12px 18px;
  border-radius: 14px;
  background: rgba(255,255,255,.78);
  color: #2b312c;
}

.hero-product-bar span { color: var(--muted); }
.hero-product-bar > strong { color: var(--green); }

.section {
  padding: 72px 0;
}

.section-lined {
  border-top: 1px solid var(--line);
}

.split-heading {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(300px, .75fr);
  gap: 80px;
  align-items: end;
  margin-bottom: 50px;
}

.split-heading > div {
  display: grid;
  gap: 18px;
}

.split-heading > p {
  max-width: 450px;
  font-size: 18px;
}

.benefit-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}

.benefit-card {
  min-height: 212px;
  position: relative;
  display: grid;
  align-content: start;
  gap: 14px;
  padding: 28px;
  border: 1px solid var(--line);
  border-radius: 22px;
  background: #ffffff;
}

.benefit-card small {
  position: absolute;
  top: 28px;
  right: 28px;
  color: var(--muted);
  font-weight: 800;
}

.benefit-icon {
  width: 48px;
  height: 48px;
  display: grid;
  place-items: center;
  border-radius: 14px;
  background: var(--green-soft);
  color: var(--green);
  font-weight: 900;
}

.benefit-card h3 { margin-top: 14px; }
.benefit-card p { font-size: 16px; }

.section-title-row {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 30px;
  margin-bottom: 42px;
}

.section-title-row > div {
  display: grid;
  gap: 18px;
}

.text-link {
  color: var(--ink);
  text-decoration: none;
  font-weight: 800;
}

.product-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}

.product-card {
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 20px;
  background: var(--surface);
}

.product-media {
  position: relative;
  display: block;
  height: 374px;
  overflow: hidden;
  background: #f0f8f0;
  text-decoration: none;
}

.product-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.product-media__badge {
  position: absolute;
  z-index: 2;
  left: 16px;
  top: 16px;
  padding: 4px 10px;
  border-radius: 999px;
  background: var(--green-dark);
  color: #fff;
  font-size: 11px;
  font-weight: 900;
  letter-spacing: .04em;
}

.product-body {
  padding: 26px 24px 22px;
}

.product-body p {
  margin-top: 8px;
  font-size: 14px;
}

.product-custom {
  display: block;
  margin-top: 4px;
  color: var(--green);
  font-size: 14px;
}

.product-card__footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-top: 24px;
}

.price {
  color: var(--ink);
  font-size: 22px;
  font-weight: 900;
}

.steps-title {
  margin: 18px 0 56px;
}

.steps {
  position: relative;
  list-style: none;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  padding: 0;
  margin: 0;
}

.steps::before {
  content: "";
  position: absolute;
  left: 6%;
  right: 6%;
  top: 27px;
  height: 1px;
  background: var(--line);
}

.steps li {
  position: relative;
  min-height: 206px;
  padding: 24px;
  border: 1px solid var(--line);
  border-radius: 20px;
  background: #ffffff;
}

.steps li > span {
  width: 56px;
  height: 56px;
  display: grid;
  place-items: center;
  margin-bottom: 24px;
  border-radius: 14px;
  background: #3d9c5e;
  color: #fff;
  font-size: 26px;
  font-weight: 900;
}

.steps p { margin-top: 12px; }

.cta-band {
  padding: 48px 0 96px;
  border-top: 1px solid var(--line);
}

.cta-panel {
  min-height: 552px;
  display: grid;
  grid-template-columns: 1fr 430px;
  gap: 70px;
  align-items: center;
  padding: 64px;
  border-radius: 38px;
  border: 1px solid var(--line);
  background: linear-gradient(135deg, #d9ebdd 0%, #f0f8f0 52%, #c8ddca 100%);
  color: var(--ink);
}

.cta-panel h2 {
  margin: 42px 0 24px;
  color: var(--ink);
  font-size: clamp(48px, 5vw, 60px);
}

.cta-panel p {
  max-width: 550px;
  margin-bottom: 32px;
  color: var(--muted);
  font-size: 18px;
}

.cta-mark {
  width: 34px;
  height: 26px;
  object-fit: contain;
  opacity: .55;
}

.cta-image {
  padding: 24px;
  border: 1px solid var(--line);
  border-radius: 24px;
  background: rgba(255,255,255,.44);
}

.cta-image img {
  width: 100%;
  border-radius: 14px;
}

.site-footer {
  padding: 70px 0 36px;
  border-top: 1px solid var(--line);
  background: #f7fef7;
}

.footer-grid {
  display: grid;
  grid-template-columns: 1.7fr 1fr 1fr 1fr;
  gap: 64px;
}

.footer-brand p {
  max-width: 320px;
  margin-top: 26px;
}

.footer-col {
  display: grid;
  align-content: start;
  gap: 14px;
}

.footer-col h3 {
  margin-bottom: 8px;
  font-size: 14px;
  text-transform: uppercase;
}

.footer-col a,
.footer-bottom a {
  color: var(--muted);
  text-decoration: none;
}

.footer-bottom {
  display: flex;
  justify-content: space-between;
  gap: 20px;
  margin-top: 52px;
  padding-top: 24px;
  border-top: 1px solid var(--line);
  color: var(--muted);
  font-size: 14px;
}

.shop-page {
  padding-top: 18px;
}

.shop-page h1 {
  font-size: 40px;
  margin-bottom: 8px;
}

.shop-grid {
  margin-top: 34px;
}

.designer-page {
  min-height: calc(100svh - var(--header-h));
  padding-top: 52px;
}

.designer-layout {
  display: grid;
  grid-template-columns: minmax(0, 430px) minmax(420px, 472px);
  justify-content: space-between;
  gap: 68px;
  align-items: start;
}

.designer-intro {
  padding-top: 52px;
  display: grid;
  gap: 24px;
}

.designer-intro h1 {
  font-size: clamp(48px, 5vw, 58px);
}

.designer-intro > p {
  font-size: 17px;
}

.notice {
  display: grid;
  grid-template-columns: 24px 1fr;
  gap: 14px;
  padding: 20px;
  border: 1px solid var(--line);
  border-radius: 18px;
  background: #ffffff;
  font-size: 13px;
}

.notice span {
  color: var(--green);
  font-weight: 900;
}

.notice p {
  font-size: 13px;
}

.designer-card,
.account-card,
.order-card,
.product-panel,
.filters,
.summary,
.admin-login {
  border: 1px solid var(--line);
  border-radius: 20px;
  background: #ffffff;
}

.designer-card {
  padding: 28px 26px;
}

fieldset {
  min-width: 0;
  margin: 0 0 18px;
  padding: 0;
  border: 0;
}

legend,
label {
  display: block;
  margin: 0 0 10px;
  color: var(--ink);
  font-size: 13px;
  font-weight: 800;
}

.choice-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.choice input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.choice span {
  min-height: 34px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 15px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--surface);
  font-size: 13px;
}

.choice input:checked + span {
  border-color: var(--green);
  background: var(--green-soft);
}

.size-row .choice span {
  width: 36px;
  padding: 0;
}

input,
textarea,
select {
  width: 100%;
  min-height: 42px;
  padding: 10px 14px;
  border: 1px solid var(--line);
  border-radius: 13px;
  background: var(--surface-soft);
  color: var(--ink);
  outline: 0;
}

textarea {
  min-height: 86px;
  resize: vertical;
}

input:focus,
textarea:focus {
  border-color: var(--green);
  box-shadow: 0 0 0 3px rgba(61, 161, 98, .12);
}

.input-icon {
  position: relative;
  margin-bottom: 18px;
}

.input-icon span {
  position: absolute;
  left: 14px;
  top: 10px;
  color: var(--muted);
}

.input-icon input {
  padding-left: 40px;
}

.upload-box {
  min-height: 112px;
  display: grid;
  place-items: center;
  gap: 4px;
  padding: 20px;
  border: 1px dashed var(--line);
  border-radius: 15px;
  background: var(--surface-soft);
  text-align: center;
  cursor: pointer;
}

.upload-box input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.upload-box span {
  color: var(--green);
  font-size: 22px;
}

.upload-box strong,
.upload-box small,
.upload-box em {
  font-size: 13px;
  font-style: normal;
}

.upload-box small,
.upload-box em { color: var(--muted); }

.checkbox {
  display: grid;
  grid-template-columns: 18px 1fr;
  gap: 10px;
  align-items: start;
  margin: 18px 0 22px;
  font-size: 13px;
  font-weight: 400;
}

.checkbox input {
  width: 14px;
  min-height: 14px;
  margin-top: 3px;
  padding: 0;
  accent-color: var(--green);
}

.alert {
  margin-bottom: 18px;
  padding: 12px 14px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: #ffffff;
  color: #030904;
  font-size: 14px;
}

.account-page {
  padding-top: 0;
}

.account-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  margin-bottom: 34px;
}

.account-head h1 {
  font-size: 44px;
}

.account-grid {
  display: grid;
  grid-template-columns: .9fr 1.08fr;
  gap: 28px;
}

.account-card {
  min-height: 674px;
  padding: 30px;
}

.account-card h2 {
  font-size: 20px;
  margin-bottom: 24px;
}

.account-card h2 span {
  color: var(--green);
}

.empty-state {
  min-height: 130px;
  display: grid;
  place-items: center;
  align-content: center;
  gap: 16px;
  border: 1px dashed var(--line);
  border-radius: 14px;
  color: var(--muted);
}

.profile-card form {
  display: grid;
  gap: 10px;
}

.profile-card h3 {
  margin-top: 12px;
  color: var(--muted);
  font-size: 13px;
  text-transform: uppercase;
}

.two-cols {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}

.cart-list,
.orders {
  display: grid;
  gap: 16px;
}

.cart-item {
  display: grid;
  grid-template-columns: 96px 1fr auto;
  gap: 18px;
  padding: 18px;
  border: 1px solid var(--line);
  border-radius: 18px;
  background: var(--surface);
}

.cart-thumb {
  width: 96px;
  aspect-ratio: 1;
  display: grid;
  place-items: center;
  border-radius: 14px;
  background: var(--green-soft);
  color: var(--green);
  font-weight: 900;
}

.properties {
  display: grid;
  grid-template-columns: 150px 1fr;
  gap: 4px 12px;
  font-size: 14px;
}

.properties dt { font-weight: 800; }

.summary {
  max-width: 460px;
  margin: 26px 0 0 auto;
  padding: 22px;
}

.summary div {
  display: flex;
  justify-content: space-between;
  font-size: 20px;
  font-weight: 800;
}

.link-button {
  border: 0;
  background: none;
  color: #030904;
  text-decoration: underline;
  cursor: pointer;
}

.section .page-width > .eyebrow,
.eyebrow {
  color: var(--green);
  font-weight: 800;
}

.rte {
  max-width: 760px;
  color: var(--muted);
}

.auth-body {
  background: var(--bg);
}

.auth-page {
  min-height: 100svh;
  display: grid;
  place-items: start center;
  padding: 43px 24px 58px;
}

.auth-shell {
  width: min(404px, 100%);
  display: grid;
  justify-items: center;
  text-align: center;
  transform: translateX(-44px);
}

.auth-shell h1 {
  margin-top: 10px;
  font-size: 34px;
  line-height: 1;
}

.auth-shell > p {
  margin-top: 10px;
  font-size: 14px;
}

.auth-card {
  width: 100%;
  margin-top: 29px;
  padding: 29px 29px 30px;
  border: 1px solid var(--line);
  border-radius: 20px;
  background: #ffffff;
}

.social-stack {
  display: grid;
  gap: 12px;
}

.social-button {
  min-height: 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  border-radius: 999px;
  font-size: 14px;
  font-weight: 800;
  cursor: pointer;
}

.social-google {
  border: 1px solid var(--line);
  background: var(--surface-soft);
  color: var(--ink);
}

.social-google span {
  color: #4285f4;
  font-weight: 900;
}

.social-apple {
  border: 1px solid var(--green-dark);
  background: var(--green-dark);
  color: #fff;
}

.auth-divider {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 12px;
  margin: 20px 0 26px;
  color: var(--muted);
  font-size: 11px;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.auth-divider::before,
.auth-divider::after {
  content: "";
  height: 1px;
  background: var(--line);
}

.auth-form {
  display: grid;
  text-align: left;
}

.auth-form label {
  margin-bottom: 8px;
  font-size: 14px;
}

.auth-input {
  position: relative;
  margin-bottom: 17px;
}

.auth-input svg {
  position: absolute;
  left: 16px;
  top: 50%;
  width: 16px;
  height: 16px;
  transform: translateY(-50%);
  fill: none;
  stroke: #607068;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.auth-input input {
  min-height: 42px;
  padding-left: 44px;
  border-radius: 16px;
}

.auth-form .button {
  min-height: 47px;
  margin-top: 5px;
}

.auth-switch {
  margin-top: 20px;
  color: var(--muted);
  font-size: 14px;
}

.auth-switch a {
  color: var(--green);
  font-weight: 800;
  text-decoration: none;
}

.auth-back {
  margin-top: 18px;
  color: var(--muted);
  text-decoration: none;
  font-size: 13px;
}

.admin-body .site-footer {
  margin-top: 92px;
}

.admin-shell {
  min-height: 445px;
  padding: 40px 0 18px;
}

.admin-shell .page-width {
  width: min(1060px, calc(100% - 72px));
}

.admin-shell h1 {
  margin: 10px 0 28px;
  font-size: 32px;
  line-height: 1.05;
}

.admin-layout {
  display: grid;
  grid-template-columns: 198px 1fr;
  gap: 28px;
  align-items: start;
}

.admin-sidebar {
  display: grid;
  gap: 8px;
}

.admin-sidebar a {
  min-height: 39px;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0 16px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: #ffffff;
  color: #2b312c;
  text-decoration: none;
  font-size: 14px;
}

.admin-sidebar a.is-active {
  border-color: #a8dfba;
  background: #e0f3e5;
  color: var(--green);
}

.admin-sidebar svg,
.metric-card svg,
.admin-shirt-info button svg {
  width: 16px;
  height: 16px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
  flex: 0 0 auto;
}

.admin-content {
  min-width: 0;
}

.admin-content-head {
  min-height: 39px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  margin-bottom: 30px;
}

.admin-content-head h2 {
  font-size: 24px;
}

.admin-content-head p {
  margin-top: 4px;
  font-size: 14px;
}

.admin-content-head select {
  width: 132px;
  min-height: 34px;
  border-radius: 999px;
  background: #ffffff;
  font-size: 13px;
}

.admin-tabs {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: #ffffff;
}

.admin-tabs button {
  min-height: 36px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 0 14px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--ink);
  font-weight: 700;
  cursor: pointer;
}

.admin-tabs button.is-active {
  background: var(--green-dark);
  color: #fff;
}

.admin-tabs svg,
.code-generate button svg {
  width: 16px;
  height: 16px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.metric-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
}

.metric-card {
  min-height: 119px;
  display: grid;
  align-content: start;
  gap: 8px;
  padding: 20px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: #ffffff;
}

.metric-card.is-highlight {
  border-color: #a8dfba;
  background: #e0f3e5;
}

.metric-card svg {
  color: #607068;
}

.metric-card.is-highlight svg {
  color: var(--green);
}

.metric-card span {
  color: var(--muted);
  font-size: 12px;
  letter-spacing: .07em;
  text-transform: uppercase;
}

.metric-card strong {
  color: var(--ink);
  font-size: 30px;
  line-height: 1;
}

.admin-empty {
  min-height: 78px;
  display: grid;
  place-items: center;
  border: 1px dashed var(--line);
  border-radius: 14px;
  color: var(--muted);
  font-size: 14px;
}

.admin-orders {
  display: grid;
  gap: 12px;
}

.admin-order-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: 18px 20px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: #ffffff;
}

.admin-order-card h3 {
  font-size: 16px;
}

.admin-order-card p {
  margin-top: 4px;
  font-size: 13px;
}

.admin-add-button {
  min-height: 37px;
  padding: 0 24px;
  font-size: 14px;
}

.admin-shirt-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}

.admin-shirt-card {
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 13px;
  background: #ffffff;
}

.admin-shirt-image {
  height: 267px;
  display: grid;
  place-items: center;
  background: #f0f8f0;
  color: var(--muted);
  font-size: 12px;
}

.admin-shirt-info {
  position: relative;
  min-height: 104px;
  padding: 14px 16px;
  background: #ffffff;
}

.admin-shirt-info button {
  position: absolute;
  top: 14px;
  right: 22px;
  width: 22px;
  height: 22px;
  display: grid;
  place-items: center;
  border: 0;
  background: transparent;
  color: var(--muted);
  cursor: pointer;
}

.admin-shirt-info h3 {
  padding-right: 28px;
  font-size: 16px;
}

.admin-shirt-info > strong {
  display: block;
  margin-top: 8px;
  color: var(--green);
  font-size: 18px;
}

.admin-checks {
  display: flex;
  gap: 12px;
  margin-top: 10px;
}

.admin-checks label {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin: 0;
  font-size: 12px;
  font-weight: 400;
}

.admin-checks input {
  width: 12px;
  min-height: 12px;
  padding: 0;
  accent-color: var(--green);
}

.admin-codes-layout {
  display: grid;
  grid-template-columns: minmax(280px, 338px) minmax(360px, 1fr);
  gap: 22px;
}

.admin-form-card {
  min-height: 518px;
  padding: 22px 18px;
  border: 1px solid var(--line);
  border-radius: 20px;
  background: #ffffff;
}

.admin-form-card h3 {
  margin-bottom: 22px;
  font-size: 17px;
}

.admin-form-card p {
  font-size: 14px;
}

.admin-form-card form {
  display: grid;
  gap: 14px;
}

.admin-form-card label {
  margin: 0;
  color: var(--muted);
  font-size: 12px;
  font-weight: 500;
}

.admin-form-card label input,
.admin-form-card label select {
  margin-top: 6px;
}

.code-generate {
  display: grid;
  grid-template-columns: 1fr 40px;
  gap: 8px;
  align-items: center;
}

.code-generate button {
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: #ffffff;
  color: var(--ink);
  cursor: pointer;
}

.admin-form-card .two-cols {
  gap: 10px;
}

.admin-form-card input,
.admin-form-card select,
.admin-form-card textarea {
  min-height: 40px;
  border-radius: 999px;
  background: var(--surface-soft);
}

.admin-form-card textarea {
  min-height: 54px;
}

.admin-form-card .admin-add-button {
  width: fit-content;
  min-height: 36px;
  margin-top: 4px;
}

@media (max-width: 1050px) {
  .hero-grid,
  .split-heading,
  .designer-layout,
  .account-grid,
  .cta-panel,
  .footer-grid {
    grid-template-columns: 1fr;
  }

  .hero-visual { height: 500px; }
  .benefit-grid,
  .product-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 780px) {
  :root { --header-h: 88px; }
  .page-width { width: min(100% - 32px, 1176px); }
  .site-header { height: auto; min-height: var(--header-h); }
  .header-inner {
  height: 100%;
  display: grid;
  grid-template-columns: 220px 1fr auto;
  align-items: center;
  padding-top: 0;
}
  .brand-side { gap: 10px; }
  .header-actions { gap: 16px; padding-left: 0; }
  .main-nav {
    display: none;
    grid-column: 1 / -1;
    flex-direction: column;
    align-items: stretch;
    padding-top: 18px;
  }
  .main-nav.is-open { display: flex; }
  .menu-toggle { display: grid; place-items: center; }
  .home-hero { padding-top: 56px; }
  .hero-grid { gap: 34px; }
  .hero-visual { height: 430px; border-radius: 24px; }
  .hero-copy h1 { font-size: 48px; }
  .hero-copy > p { font-size: 18px; }
  .benefit-grid,
  .product-grid,
  .steps,
  .two-cols {
    grid-template-columns: 1fr;
  }
  .steps::before { display: none; }
  .product-media { height: 330px; }
  .cta-panel { padding: 32px; border-radius: 24px; }
  .account-card { min-height: auto; }
  .cart-item,
  .properties {
    grid-template-columns: 1fr;
  }
  .admin-layout,
  .metric-grid,
  .admin-shirt-grid,
  .admin-codes-layout {
    grid-template-columns: 1fr;
  }
  .auth-shell {
    transform: none;
  }
}

/* Final light-theme guard: no black marketing sections on the storefront. */
.cta-panel {
  border: 1px solid var(--line) !important;
  background: linear-gradient(135deg, #d9ebdd 0%, #f7fef7 48%, #afcdb5 100%) !important;
  color: var(--ink) !important;
  box-shadow: 0 24px 60px rgba(32, 80, 48, .11);
}

.cta-panel h2 {
  color: var(--ink) !important;
}

.cta-panel p {
  color: var(--muted) !important;
}

.cta-panel .button-outline {
  border-color: var(--ink);
  color: var(--ink);
}

.cta-image {
  border-color: var(--line) !important;
  background: rgba(255,255,255,.48) !important;
}

/* Lovable typography alignment */
body {
  font-family: "Inter", ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

h1,
h2,
h3,
h4,
.hero-copy h1,
.cta-panel h2 {
  font-family: "Space Grotesk", "Inter", ui-sans-serif, system-ui, sans-serif;
  letter-spacing: -0.035em;
}

.hero-copy h1 {
  font-weight: 700;
  line-height: 1.02;
}

h2 {
  font-weight: 700;
  letter-spacing: -0.03em;
}

h3 {
  font-weight: 700;
  letter-spacing: -0.015em;
}

.main-nav a,
.button,
.admin-pill,
.product-body,
.hero-copy > p,
.trust-row li {
  font-family: "Inter", ui-sans-serif, system-ui, sans-serif;
}

.main-nav a {
  font-weight: 600;
}

.button {
  font-weight: 700;
}

/* Softer headline tracking */
h1,
h2,
h3,
h4,
.hero-copy h1,
.cta-panel h2 {
  letter-spacing: -0.025em;
}

/* Lovable dark green CTA */
.cta-panel {
  background: linear-gradient(135deg, #07110b 0%, #13311d 52%, #1f4b2d 100%) !important;
  color: #f7fff8 !important;
  border-color: rgba(255,255,255,.12) !important;
  box-shadow: 0 28px 80px rgba(7, 17, 11, .22) !important;
}

.cta-panel h2,
.cta-panel h3 {
  color: #f7fff8 !important;
}

.cta-panel p {
  color: rgba(247,255,248,.74) !important;
}

.cta-panel .eyebrow {
  color: #8fd6a8 !important;
}

.cta-panel .button-outline,
.cta-panel .button.secondary {
  border-color: rgba(255,255,255,.72) !important;
  color: #f7fff8 !important;
}

.cta-panel .button-outline:hover,
.cta-panel .button.secondary:hover {
  background: #f7fff8 !important;
  color: #07110b !important;
}

.cta-image {
  border-color: rgba(255,255,255,.14) !important;
  background: rgba(255,255,255,.08) !important;
}

/* Lovable-like icon polish */
.icon-link {
  width: 36px;
  height: 36px;
  display: inline-grid;
  place-items: center;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: rgba(255,255,255,.82);
  box-shadow: 0 8px 18px rgba(16, 21, 16, .04);
  transition: all .18s ease;
}

.icon-link:hover {
  background: #eef7ef;
  border-color: #cfe2d3;
  transform: translateY(-1px);
}

.icon-link svg,
.menu-toggle svg,
.admin-pill svg,
.benefit-icon svg,
.trust-row li svg,
.trust-row span svg {
  width: 18px;
  height: 18px;
  stroke-width: 1.75;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.trust-row span,
.benefit-icon {
  border: 1px solid #d8e7db;
  background: #e8f4eb;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.75);
}

.trust-row span {
  width: 30px;
  height: 30px;
}

.benefit-icon {
  width: 50px;
  height: 50px;
  border-radius: 16px;
}

.admin-pill {
  box-shadow: 0 10px 22px rgba(7, 17, 11, .10);
}

.personal-badge {
  box-shadow: 0 18px 34px rgba(16, 21, 16, .08);
}


/* Lucide icon alignment */
.lucide {
  display: block;
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.icon-link {
  width: 36px;
  height: 36px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: rgba(255,255,255,.84);
  box-shadow: 0 8px 18px rgba(16, 21, 16, .04);
  transition: transform .18s ease, background .18s ease, border-color .18s ease;
}

.icon-link:hover {
  background: #eef7ef;
  border-color: #cfe2d3;
  transform: translateY(-1px);
}

.icon-link .lucide,
.menu-toggle .lucide {
  width: 19px;
  height: 19px;
}

.admin-pill .lucide {
  width: 16px;
  height: 16px;
  stroke-width: 1.9;
}

.trust-row span {
  border: 1px solid #d8e7db;
  background: #e8f4eb;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.78);
}

.trust-row span .lucide {
  width: 15px;
  height: 15px;
  stroke-width: 2;
}

.benefit-icon {
  border: 1px solid #d8e7db;
  background: #e8f4eb;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.78);
}

.benefit-icon .lucide {
  width: 22px;
  height: 22px;
  stroke-width: 1.9;
}


/* Exact Lovable-like SVG icon fix */
.lucide {
  display: block;
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.85;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.trust-row {
  display: flex;
  flex-wrap: wrap;
  gap: 22px 26px;
}

.trust-row li {
  display: flex;
  align-items: center;
  gap: 10px;
}

.trust-row span {
  width: 28px;
  height: 28px;
  display: grid;
  place-items: center;
  border: 1px solid #d8e7db;
  border-radius: 50%;
  background: #e8f4eb;
  color: var(--green);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.75);
  flex: 0 0 auto;
}

.trust-row span .lucide {
  width: 15px;
  height: 15px;
  stroke-width: 2;
}

.benefit-icon {
  width: 50px;
  height: 50px;
  display: grid;
  place-items: center;
  border: 1px solid #d8e7db;
  border-radius: 16px;
  background: #e8f4eb;
  color: var(--green);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.78);
  font-size: 0;
}

.benefit-icon .lucide {
  width: 22px;
  height: 22px;
  stroke-width: 1.9;
}

.icon-link {
  width: 36px;
  height: 36px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: rgba(255,255,255,.84);
  box-shadow: 0 8px 18px rgba(16, 21, 16, .04);
}


/* Lovable-like benefit card hover */
.benefit-card {
  transition:
    transform .22s ease,
    border-color .22s ease,
    box-shadow .22s ease,
    background .22s ease;
}

.benefit-card:hover {
  transform: translateY(-4px);
  border-color: rgba(59, 162, 97, .48);
  box-shadow: 0 18px 42px rgba(42, 91, 59, .12);
  background: #ffffff;
}

.benefit-card .benefit-icon {
  transition:
    background .22s ease,
    color .22s ease,
    border-color .22s ease,
    transform .22s ease;
}

.benefit-card:hover .benefit-icon {
  background: var(--green);
  color: #ffffff;
  border-color: var(--green);
  transform: scale(1.03);
}

.benefit-card:hover small {
  color: var(--ink);
}

.benefit-card:hover h3 {
  color: var(--ink);
}

/* Lovable-like hero button hover */
.hero-actions .button {
  transition:
    transform .22s ease,
    background .22s ease,
    color .22s ease,
    border-color .22s ease,
    box-shadow .22s ease;
}

.hero-actions .button:hover {
  transform: translateY(-2px);
}

.hero-actions .button:not(.button-outline):not(.secondary):hover {
  background: var(--green-dark);
  border-color: var(--green-dark);
  color: #ffffff;
  box-shadow: 0 18px 34px rgba(19, 49, 29, .24);
}

.hero-actions .button-outline:hover,
.hero-actions .button.secondary:hover {
  background: var(--ink);
  border-color: var(--ink);
  color: #ffffff;
  box-shadow: 0 16px 30px rgba(7, 17, 11, .16);
}

.hero-actions .button-outline:hover svg,
.hero-actions .button.secondary:hover svg,
.hero-actions .button:hover svg {
  color: currentColor;
}

.hero-actions .button.button-outline:hover,
.hero-actions .button.secondary:hover {
  background: #07110b !important;
  border-color: #07110b !important;
  color: #ffffff !important;
}


/* Clean Lovable-like header icons */
.header-actions {
  display: flex;
  align-items: center;
  gap: 18px;
}

.header-actions .icon-link {
  position: relative;
  width: 28px !important;
  height: 28px !important;
  display: inline-grid !important;
  place-items: center !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  color: #07110b !important;
  transform: none !important;
  transition: color .18s ease, transform .18s ease;
}

.header-actions .icon-link:hover {
  background: transparent !important;
  border-color: transparent !important;
  box-shadow: none !important;
  color: var(--green) !important;
  transform: translateY(-1px) !important;
}

.header-lucide {
  width: 21px;
  height: 21px;
  display: block;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.9;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.header-actions .cart-icon strong {
  position: absolute;
  right: -8px;
  top: -10px;
  width: 20px;
  height: 20px;
  display: grid;
  place-items: center;
  border-radius: 999px;
  background: var(--green);
  color: #ffffff;
  font-size: 11px;
  font-weight: 800;
  line-height: 1;
  box-shadow: 0 4px 10px rgba(59, 162, 97, .22);
}


/* Exact Lucide header icon shapes */
.header-actions .icon-link {
  width: 28px !important;
  height: 28px !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  border-radius: 0 !important;
  color: #07110b !important;
}

.header-actions .icon-link:hover {
  color: var(--green) !important;
  background: transparent !important;
  box-shadow: none !important;
  transform: translateY(-1px) !important;
}

.header-lucide {
  width: 20px;
  height: 20px;
  display: block;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.header-actions .cart-icon strong {
  right: -8px;
  top: -10px;
  width: 20px;
  height: 20px;
  border-radius: 999px;
  background: var(--green);
  color: #ffffff;
  font-size: 11px;
  font-weight: 800;
  line-height: 1;
}


/* Slimmer Lovable-like hero product card */
.hero-visual {
  height: 530px;
  border-radius: 30px;
  box-shadow: 0 24px 56px rgba(30, 73, 46, .12);
}

.hero-visual img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

.personal-badge {
  top: 18px !important;
  right: 18px !important;
  min-width: 148px !important;
  padding: 10px 14px !important;
  border-radius: 14px !important;
  font-size: 12px !important;
  line-height: 1.35 !important;
  box-shadow: 0 12px 26px rgba(7, 17, 11, .10) !important;
  transform: rotate(6deg) !important;
}

.personal-badge strong {
  font-size: 11px !important;
  letter-spacing: .075em !important;
}

.hero-product-bar {
  left: 20px;
  right: 20px;
  bottom: 20px;
  min-height: 54px;
  padding: 10px 16px;
  border-radius: 14px;
  background: rgba(255, 255, 255, .84);
  box-shadow: 0 10px 26px rgba(7, 17, 11, .08);
}

.hero-product-bar strong {
  font-size: 14px;
  line-height: 1.2;
}

.hero-product-bar span {
  font-size: 13px;
  line-height: 1.2;
}

.hero-product-bar > strong {
  font-size: 16px;
  font-weight: 900;
}

@media (max-width: 1050px) {
  .hero-visual {
    height: 500px;
  }
}

@media (max-width: 780px) {
  .hero-visual {
    height: 430px;
    border-radius: 24px;
  }

  .personal-badge {
    right: 14px !important;
    min-width: 138px !important;
    padding: 9px 12px !important;
  }

  .hero-product-bar {
    left: 16px;
    right: 16px;
    bottom: 16px;
  }
}

.hero-visual {
  height: 505px !important;
}


/* Final Lovable-like personal badge */
.personal-badge {
  position: absolute !important;
  top: 22px !important;
  right: 22px !important;
  width: 178px !important;
  min-width: 0 !important;
  padding: 14px 17px 15px !important;
  border: 1px solid rgba(216, 231, 219, .95) !important;
  border-radius: 18px !important;
  background: rgba(255, 255, 255, .97) !important;
  color: #07110b !important;
  font-family: "Inter", ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif !important;
  font-size: 13px !important;
  line-height: 1.25 !important;
  text-align: left !important;
  box-shadow: 0 18px 36px rgba(7, 17, 11, .12) !important;
  transform: rotate(6deg) translateZ(0) !important;
  rotate: none !important;
  z-index: 5 !important;
}

.personal-badge strong {
  display: block !important;
  margin: 0 0 5px !important;
  color: var(--green) !important;
  font-size: 12px !important;
  font-weight: 900 !important;
  line-height: 1 !important;
  letter-spacing: .075em !important;
  text-transform: uppercase !important;
  white-space: nowrap !important;
}

.personal-badge span {
  display: block !important;
  color: #25352c !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  line-height: 1.2 !important;
  white-space: nowrap !important;
}

@media (max-width: 780px) {
  .personal-badge {
    top: 16px !important;
    right: 16px !important;
    width: 160px !important;
    padding: 12px 14px !important;
    border-radius: 16px !important;
  }

  .personal-badge strong {
    font-size: 11px !important;
  }

  .personal-badge span {
    font-size: 12px !important;
  }
}


/* Let personal badge float slightly outside the hero card */
.hero-visual {
  overflow: visible !important;
}

.hero-visual img {
  border-radius: inherit;
}

.personal-badge {
  top: 20px !important;
  right: -10px !important;
  width: 178px !important;
  transform: rotate(6deg) translateZ(0) !important;
  z-index: 10 !important;
}

@media (max-width: 780px) {
  .personal-badge {
    right: -6px !important;
  }
}

/* Lovable-like product card hover and image zoom */
.product-card {
  transition:
    transform .24s ease,
    border-color .24s ease,
    box-shadow .24s ease;
}

.product-card:hover {
  transform: translateY(-5px);
  border-color: rgba(59, 162, 97, .42);
  box-shadow: 0 22px 52px rgba(42, 91, 59, .14);
}

.product-media {
  overflow: hidden;
}

.product-media img {
  transition:
    transform .34s ease,
    filter .34s ease;
  will-change: transform;
}

.product-card:hover .product-media img {
  transform: scale(1.045);
  filter: saturate(1.03) contrast(1.02);
}

.product-card .button {
  transition:
    transform .22s ease,
    background .22s ease,
    border-color .22s ease,
    box-shadow .22s ease;
}

.product-card:hover .button {
  background: var(--green-dark);
  border-color: var(--green-dark);
  box-shadow: 0 16px 30px rgba(19, 49, 29, .20);
}

.product-media__badge {
  transition:
    transform .24s ease,
    background .24s ease,
    color .24s ease;
}

.product-card:hover .product-media__badge {
  transform: translateY(-1px);
  background: #07110b;
  color: #ffffff;
}


/* Fixed versus custom product labels */
.product-custom--fixed {
  color: var(--muted);
}

.product-card:not(:has(.product-media__badge)) .product-media {
  border-top-left-radius: 20px;
  border-top-right-radius: 20px;
}


/* Cleaner Lovable-like shirt designer page */
.designer-page {
  min-height: calc(100svh - var(--header-h));
  padding-top: 46px;
  padding-bottom: 26px;
}

.designer-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 430px;
  justify-content: space-between;
  gap: 72px;
  align-items: start;
}

.designer-intro {
  padding-top: 46px;
  display: grid;
  gap: 24px;
  max-width: 560px;
}

.designer-intro h1 {
  font-family: "Space Grotesk", "Inter", ui-sans-serif, system-ui, sans-serif;
  font-size: clamp(52px, 5vw, 72px);
  line-height: .98;
  letter-spacing: -0.04em;
  font-weight: 700;
}

.designer-intro > p {
  max-width: 470px;
  font-size: 17px;
  line-height: 1.5;
  color: #43564f;
}

.designer-card {
  padding: 26px 24px;
  border: 1px solid var(--line);
  border-radius: 24px;
  background: #f9fbf9;
  box-shadow: 0 10px 30px rgba(42, 91, 59, .05);
}

.product-form {
  display: grid;
  gap: 16px;
}

fieldset {
  margin: 0 0 6px;
}

legend,
label {
  margin: 0 0 10px;
  color: var(--ink);
  font-size: 13px;
  font-weight: 800;
}

.choice-row {
  display: flex;
  flex-wrap: wrap;
  gap: 9px;
}

.choice span {
  min-height: 30px;
  padding: 0 14px;
  border: 1px solid #cad8cd;
  border-radius: 999px;
  background: #f8fbf8;
  color: var(--ink);
  font-size: 13px;
  font-weight: 700;
  transition: all .18s ease;
}

.choice input:checked + span {
  border-color: var(--green);
  background: #eaf6ee;
  color: var(--ink);
  box-shadow: inset 0 0 0 1px rgba(59, 162, 97, .08);
}

.size-row .choice span {
  width: 34px;
  min-height: 34px;
  padding: 0;
}

.input-icon {
  position: relative;
  margin-bottom: 2px;
}

.input-icon span {
  position: absolute;
  left: 14px;
  top: 50%;
  transform: translateY(-50%);
  color: #6e7f76;
  font-weight: 700;
}

.input-icon input {
  min-height: 40px;
  padding-left: 36px;
  border-radius: 14px;
  background: #f4f8f5;
}

textarea {
  min-height: 110px;
  border-radius: 16px;
  background: #f4f8f5;
}

input,
textarea,
select {
  border: 1px solid #cad8cd;
  color: var(--ink);
}

input:focus,
textarea:focus {
  border-color: var(--green);
  box-shadow: 0 0 0 3px rgba(61, 161, 98, .10);
}

.upload-box {
  min-height: 116px;
  gap: 6px;
  padding: 18px;
  border: 1px dashed #cad8cd;
  border-radius: 18px;
  background: #f7fbf8;
}

.upload-box span {
  color: var(--green);
  font-size: 26px;
  line-height: 1;
}

.upload-box strong {
  font-size: 13px;
  font-weight: 800;
  color: var(--ink);
}

.upload-box small,
.upload-box em {
  font-size: 12px;
  color: #5e6f66;
}

.checkbox {
  display: grid;
  grid-template-columns: 18px 1fr;
  gap: 10px;
  align-items: start;
  margin: 2px 0 2px;
  font-size: 13px;
  color: #43564f;
}

.checkbox input {
  width: 14px;
  min-height: 14px;
  margin-top: 2px;
  accent-color: var(--green);
}

.notice {
  display: grid;
  grid-template-columns: 26px 1fr;
  gap: 14px;
  align-items: start;
  padding: 18px 20px;
  border: 1px solid var(--line);
  border-radius: 18px;
  background: #fbfdfb;
  max-width: 395px;
}

.notice-icon {
  width: 20px;
  height: 20px;
  display: grid;
  place-items: center;
  color: var(--green);
  margin-top: 2px;
}

.notice-icon svg {
  width: 16px;
  height: 16px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.9;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.notice p {
  font-size: 13px;
  line-height: 1.5;
  color: #43564f;
}

.product-form .button.button-full {
  min-height: 56px;
  margin-top: 4px;
  border-radius: 999px;
  font-size: 16px;
  font-weight: 800;
  box-shadow: 0 16px 30px rgba(59, 162, 97, .24);
}

.product-form .button.button-full:hover {
  background: var(--green-dark);
  border-color: var(--green-dark);
}

@media (max-width: 1050px) {
  .designer-layout {
    grid-template-columns: 1fr;
    gap: 34px;
  }

  .designer-intro {
    max-width: 100%;
    padding-top: 0;
  }

  .designer-card {
    max-width: 560px;
  }
}

@media (max-width: 780px) {
  .designer-page {
    padding-top: 34px;
  }

  .designer-intro h1 {
    font-size: 48px;
  }

  .designer-card {
    padding: 22px 18px;
    border-radius: 20px;
  }

  .notice {
    max-width: 100%;
  }
}


/* Designer hover states and XXXL sizing polish */
.choice span {
  transition:
    background .18s ease,
    border-color .18s ease,
    color .18s ease,
    transform .18s ease,
    box-shadow .18s ease;
}

.choice:hover span {
  border-color: rgba(59, 162, 97, .55);
  background: #eef8f1;
  color: var(--green-dark);
  transform: translateY(-1px);
  box-shadow: 0 8px 18px rgba(42, 91, 59, .08);
}

.choice input:checked + span {
  border-color: var(--green);
  background: #e6f5eb;
  color: var(--ink);
  box-shadow:
    inset 0 0 0 1px rgba(59, 162, 97, .16),
    0 8px 18px rgba(42, 91, 59, .08);
}

.choice input:checked + span:hover {
  background: #dff2e6;
}

.size-row .choice span {
  width: auto;
  min-width: 34px;
  padding: 0 10px;
}

.size-row .choice span:has(+ *) {
  width: auto;
}

.upload-box {
  transition:
    background .2s ease,
    border-color .2s ease,
    transform .2s ease,
    box-shadow .2s ease;
}

.upload-box:hover {
  border-color: rgba(59, 162, 97, .6);
  background: #eef8f1;
  transform: translateY(-2px);
  box-shadow: 0 14px 30px rgba(42, 91, 59, .09);
}

.upload-box:hover span {
  transform: translateY(-2px);
}

.upload-box span {
  transition: transform .2s ease, color .2s ease;
}

.checkbox {
  cursor: pointer;
}

.checkbox input {
  transition: transform .16s ease;
}

.checkbox:hover input {
  transform: scale(1.08);
}

.checkbox:hover span {
  color: var(--ink);
}

.product-form .button.button-full {
  transition:
    background .22s ease,
    border-color .22s ease,
    transform .22s ease,
    box-shadow .22s ease;
}

.product-form .button.button-full:hover {
  background: var(--green-dark);
  border-color: var(--green-dark);
  transform: translateY(-2px);
  box-shadow: 0 20px 38px rgba(19, 49, 29, .24);
}

/* Final header logo sizing */
.brand {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  text-decoration: none !important;
  line-height: 1 !important;
}

.brand-mark {
  width: 118px !important;
  height: auto !important;
  max-height: 58px !important;
  object-fit: contain !important;
  opacity: 1 !important;
}

.header-inner {
  align-items: center !important;
  padding-top: 0 !important;
}

.brand-side {
  display: flex !important;
  align-items: center !important;
  gap: 18px !important;
}

@media (max-width: 780px) {
  .brand-mark {
    width: 104px !important;
    max-height: 54px !important;
  }
}

/* FINAL HEADER LOGO OVERRIDE */
.site-header .brand-side {
  display: flex !important;
  align-items: center !important;
  gap: 18px !important;
}

.site-header .brand {
  display: inline-flex !important;
  align-items: center !important;
  text-decoration: none !important;
  line-height: 1 !important;
}

.site-header .brand-mark {
  width: 165px !important;
  height: auto !important;
  max-width: none !important;
  max-height: none !important;
  object-fit: contain !important;
  opacity: 1 !important;
  display: block !important;
}

.site-header .header-inner {
  align-items: center !important;
  padding-top: 0 !important;
}

@media (max-width: 780px) {
  .site-header .brand-mark {
    width: 140px !important;
  }
}

/* Admin pill, whole pill clickable */
.admin-pill {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 7px !important;
  min-height: 38px !important;
  padding: 0 14px !important;
  border-radius: 999px !important;
  background: #07110b !important;
  color: #ffffff !important;
  text-decoration: none !important;
  font-size: 13px !important;
  font-weight: 800 !important;
  line-height: 1 !important;
  cursor: pointer !important;
}

.admin-pill svg,
.admin-pill span {
  pointer-events: none;
}

.admin-pill svg {
  width: 16px !important;
  height: 16px !important;
  fill: none !important;
  stroke: currentColor !important;
  stroke-width: 1.9 !important;
  stroke-linecap: round !important;
  stroke-linejoin: round !important;
}

/* Final admin pill clickable area fix */
.header-actions .admin-pill {
  position: relative !important;
  z-index: 20 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 7px !important;
  min-width: 88px !important;
  width: auto !important;
  min-height: 38px !important;
  padding: 0 15px !important;
  pointer-events: auto !important;
}

.header-actions .admin-pill::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
}

.header-actions .admin-pill svg,
.header-actions .admin-pill span {
  position: relative;
  z-index: 1;
  pointer-events: none !important;
}

/* Admin product CRUD */
.alert-success {
  border-color: rgba(59, 162, 97, .35);
  background: #e8f7ed;
  color: #14351f;
}

.admin-form-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}

.admin-form-grid label,
.admin-product-form label {
  display: grid;
  gap: 8px;
  font-size: 13px;
  font-weight: 800;
  color: var(--ink);
}

.admin-form-grid input,
.admin-form-grid textarea {
  width: 100%;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: #fff;
  padding: 12px 14px;
  font: inherit;
}

.admin-wide {
  grid-column: 1 / -1;
}

.admin-product-checks {
  margin: 18px 0;
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
}

.admin-product-preview {
  margin: 16px 0;
  display: grid;
  gap: 8px;
  max-width: 220px;
}

.admin-product-preview img {
  width: 100%;
  border-radius: 16px;
  border: 1px solid var(--line);
}

.admin-form-actions,
.admin-card-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
}

.admin-product-status {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.admin-product-status span {
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 5px 9px;
  font-size: 12px;
  font-weight: 800;
  background: #f7fbf8;
}

.link-button.danger {
  color: #a12222;
  font-weight: 800;
}

.admin-shirt-grid-editable .admin-shirt-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

@media (max-width: 850px) {
  .admin-form-grid {
    grid-template-columns: 1fr;
  }
}

/* Admin shirt cards clean layout */
.admin-shirt-grid-editable {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 18px !important;
  align-items: stretch !important;
}

.admin-shirt-grid-editable .admin-shirt-card {
  position: relative !important;
  display: grid !important;
  grid-template-rows: 242px 1fr !important;
  overflow: hidden !important;
  border: 1px solid var(--line) !important;
  border-radius: 16px !important;
  background: #ffffff !important;
  box-shadow: none !important;
  transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease !important;
}

.admin-shirt-grid-editable .admin-shirt-card:hover {
  transform: translateY(-3px) !important;
  border-color: rgba(59, 162, 97, .34) !important;
  box-shadow: 0 18px 42px rgba(42, 91, 59, .10) !important;
}

.admin-shirt-grid-editable .admin-shirt-image {
  width: 100% !important;
  height: 242px !important;
  display: grid !important;
  place-items: center !important;
  overflow: hidden !important;
  background: #eef1ed !important;
  border: 0 !important;
  border-radius: 0 !important;
}

.admin-shirt-grid-editable .admin-shirt-image img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  display: block !important;
}

.admin-shirt-grid-editable .admin-shirt-info {
  position: relative !important;
  display: grid !important;
  gap: 8px !important;
  align-content: start !important;
  padding: 16px !important;
}

.admin-shirt-grid-editable .admin-shirt-info h3 {
  margin: 0 !important;
  padding-right: 0 !important;
  color: var(--ink) !important;
  font-size: 16px !important;
  line-height: 1.15 !important;
  font-weight: 800 !important;
  letter-spacing: -0.01em !important;
}

.admin-shirt-grid-editable .admin-shirt-info p {
  margin: -3px 0 0 !important;
  min-height: 40px !important;
  color: #32423a !important;
  font-size: 15px !important;
  line-height: 1.35 !important;
}

.admin-shirt-grid-editable .admin-shirt-info strong {
  margin-top: 4px !important;
  color: var(--green) !important;
  font-size: 18px !important;
  font-weight: 900 !important;
}

.admin-shirt-grid-editable .admin-product-status {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 8px !important;
  margin: 0 !important;
}

.admin-shirt-grid-editable .admin-product-status span {
  display: inline-flex !important;
  align-items: center !important;
  min-height: 25px !important;
  padding: 0 10px !important;
  border: 1px solid #cde1d2 !important;
  border-radius: 999px !important;
  background: #f5fbf7 !important;
  color: #06110a !important;
  font-size: 12px !important;
  font-weight: 800 !important;
  line-height: 1 !important;
}

.admin-shirt-grid-editable .admin-card-actions {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 10px !important;
  align-items: center !important;
  margin-top: 6px !important;
}

.admin-shirt-grid-editable .admin-card-actions .button {
  width: 100% !important;
  min-height: 38px !important;
  padding: 0 14px !important;
  border-radius: 999px !important;
  font-size: 14px !important;
  font-weight: 800 !important;
}

.admin-shirt-grid-editable .admin-card-actions form {
  grid-column: 1 / -1 !important;
  margin: 0 !important;
  padding: 0 !important;
  width: 100% !important;
}

.admin-shirt-grid-editable .admin-card-actions .link-button.danger {
  position: static !important;
  inset: auto !important;
  width: 100% !important;
  min-height: 34px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 0 12px !important;
  border: 1px solid rgba(161, 34, 34, .22) !important;
  border-radius: 999px !important;
  background: #fff7f7 !important;
  color: #a12222 !important;
  font-size: 13px !important;
  font-weight: 900 !important;
  line-height: 1 !important;
  text-decoration: none !important;
  white-space: nowrap !important;
  overflow: visible !important;
  cursor: pointer !important;
}

.admin-shirt-grid-editable .admin-card-actions .link-button.danger:hover {
  background: #ffecec !important;
  border-color: rgba(161, 34, 34, .36) !important;
}

/* Stop old admin button rule from pulling delete button into the title area */
.admin-shirt-grid-editable .admin-shirt-info > button,
.admin-shirt-grid-editable .admin-shirt-info form button {
  position: static !important;
  top: auto !important;
  right: auto !important;
}

@media (max-width: 1100px) {
  .admin-shirt-grid-editable {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}

@media (max-width: 720px) {
  .admin-shirt-grid-editable {
    grid-template-columns: 1fr !important;
  }

  .admin-shirt-grid-editable .admin-shirt-card {
    grid-template-rows: 230px 1fr !important;
  }

  .admin-shirt-grid-editable .admin-shirt-image {
    height: 230px !important;
  }
}

/* Product detail image block */
.designer-product-preview {
  margin-top: 22px;
  max-width: 420px;
}

.designer-product-preview__image {
  width: 100%;
  min-height: 420px;
  display: grid;
  place-items: center;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 28px;
  background: #eef2ee;
  box-shadow: 0 18px 40px rgba(42, 91, 59, .08);
}

.designer-product-preview__image img {
  width: 100%;
  height: 100%;
  min-height: 420px;
  object-fit: cover;
  display: block;
}

@media (max-width: 1050px) {
  .designer-product-preview {
    max-width: 560px;
  }

  .designer-product-preview__image,
  .designer-product-preview__image img {
    min-height: 360px;
  }
}

@media (max-width: 780px) {
  .designer-product-preview {
    margin-top: 18px;
  }

  .designer-product-preview__image,
  .designer-product-preview__image img {
    min-height: 300px;
    border-radius: 22px;
  }
}

/* Admin orders status management */
.admin-orders-head {
  align-items: center !important;
}

.admin-status-filter select,
.admin-order-status-form select {
  min-height: 38px;
  padding: 0 14px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: #ffffff;
  color: var(--ink);
  font: inherit;
  font-size: 13px;
  font-weight: 700;
  outline: none;
}

.admin-status-filter select:focus,
.admin-order-status-form select:focus {
  border-color: var(--green);
  box-shadow: 0 0 0 4px rgba(59, 162, 97, .10);
}

.admin-orders-list {
  display: grid;
  gap: 12px;
}

.admin-order-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 18px;
  align-items: center;
  padding: 18px;
  border: 1px solid var(--line);
  border-radius: 18px;
  background: #ffffff;
  box-shadow: 0 12px 28px rgba(42, 91, 59, .05);
}

.admin-order-main {
  display: flex;
  align-items: center;
  gap: 14px;
  min-width: 0;
}

.admin-order-main h3 {
  margin: 0;
  color: var(--ink);
  font-size: 16px;
  font-weight: 900;
}

.admin-order-main p {
  margin: 4px 0 0;
  color: var(--muted);
  font-size: 13px;
}

.admin-order-meta {
  display: flex;
  align-items: center;
  gap: 14px;
}

.admin-order-meta strong {
  color: var(--ink);
  font-size: 17px;
  font-weight: 900;
  white-space: nowrap;
}

.order-status-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 28px;
  padding: 0 11px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: #f7fbf8;
  color: var(--ink);
  font-size: 12px;
  font-weight: 900;
  white-space: nowrap;
}

.order-status-neu,
.order-status-zu_pruefen {
  border-color: #a8dfba;
  background: #e8f7ed;
  color: #1d7a3b;
}

.order-status-bezahlt {
  border-color: #b8e0ff;
  background: #eef8ff;
  color: #155b8a;
}

.order-status-in_produktion {
  border-color: #ffe1a8;
  background: #fff8e8;
  color: #8a5b00;
}

.order-status-versendet {
  border-color: #d5d9e2;
  background: #f4f6fa;
  color: #313946;
}

.order-status-storniert {
  border-color: #f1b8b8;
  background: #fff0f0;
  color: #a12222;
}

.admin-order-status-form {
  display: flex;
  align-items: center;
  gap: 8px;
}

.admin-order-status-form .button.small {
  min-height: 38px;
  padding: 0 14px;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 900;
}

@media (max-width: 850px) {
  .admin-order-row {
    grid-template-columns: 1fr;
  }

  .admin-order-main,
  .admin-order-meta,
  .admin-order-status-form {
    align-items: flex-start;
    flex-direction: column;
  }
}

/* Admin codes and vouchers */
.admin-codes-head {
  display: flex !important;
  align-items: start !important;
  justify-content: space-between !important;
  gap: 24px !important;
}

.admin-code-tabs {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px;
  border: 1px solid var(--line);
  border-radius: 18px;
  background: #ffffff;
}

.admin-code-tabs a {
  min-height: 38px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 0 16px;
  border-radius: 999px;
  color: var(--ink);
  text-decoration: none;
  font-size: 14px;
  font-weight: 800;
}

.admin-code-tabs a.is-active {
  background: #07110b;
  color: #ffffff;
}

.admin-codes-layout-clean {
  display: grid !important;
  grid-template-columns: 375px minmax(0, 1fr) !important;
  gap: 24px !important;
  align-items: stretch !important;
}

.admin-code-form-card,
.admin-code-list-card {
  min-height: 470px !important;
  padding: 24px !important;
  border-radius: 24px !important;
  background: #ffffff !important;
  border: 1px solid var(--line) !important;
  box-shadow: none !important;
}

.admin-code-form-card h3,
.admin-code-list-card h3 {
  margin: 0 0 24px !important;
  font-family: "Space Grotesk", "Inter", sans-serif !important;
  font-size: 20px !important;
  line-height: 1.1 !important;
  font-weight: 800 !important;
  letter-spacing: -0.025em !important;
}

.admin-code-form {
  display: grid;
  gap: 18px;
}

.admin-code-form label {
  display: grid;
  gap: 8px;
  color: #32423a;
  font-size: 13px;
  font-weight: 700;
}

.admin-code-form input,
.admin-code-form select,
.admin-code-form textarea {
  width: 100%;
  min-height: 44px;
  padding: 0 16px;
  border: 1px solid #cddfd2;
  border-radius: 999px;
  background: #f7fbf8;
  color: var(--ink);
  font: inherit;
  outline: none;
}

.admin-code-form textarea {
  min-height: 58px;
  padding-top: 14px;
  border-radius: 22px;
  resize: vertical;
}

.admin-code-form input:focus,
.admin-code-form select:focus,
.admin-code-form textarea:focus {
  border-color: var(--green);
  background: #ffffff;
  box-shadow: 0 0 0 4px rgba(59, 162, 97, .10);
}

.code-generate {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 44px;
  gap: 10px;
  align-items: center;
}

.code-generate button {
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: #ffffff;
  color: var(--ink);
  font-size: 20px;
  cursor: pointer;
}

.code-generate button:hover {
  border-color: rgba(59, 162, 97, .45);
  background: #eef8f1;
}

.two-cols {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.admin-code-form .button {
  width: fit-content;
  min-height: 44px;
  padding: 0 22px;
  border-radius: 999px;
  font-size: 14px;
  font-weight: 900;
}

.admin-code-list {
  display: grid;
  gap: 12px;
}

.admin-code-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 16px;
  align-items: start;
  padding: 16px;
  border: 1px solid var(--line);
  border-radius: 18px;
  background: #f8fbf8;
}

.admin-code-row strong {
  color: var(--ink);
  font-size: 16px;
  font-weight: 900;
}

.admin-code-row p {
  margin: 5px 0 0;
  color: #32423a;
  font-size: 14px;
}

.admin-code-row small {
  display: block;
  margin-top: 5px;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.35;
}

.admin-code-actions {
  display: grid;
  justify-items: end;
  gap: 8px;
}

.code-state {
  display: inline-flex;
  align-items: center;
  min-height: 26px;
  padding: 0 10px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 900;
}

.code-state.is-active {
  border: 1px solid #a8dfba;
  background: #e8f7ed;
  color: #1d7a3b;
}

.code-state.is-inactive {
  border: 1px solid #d5d9e2;
  background: #f4f6fa;
  color: #5a6270;
}

.admin-code-actions form {
  margin: 0;
}

.admin-code-actions .link-button {
  color: var(--green);
  font-size: 12px;
  font-weight: 900;
}

.admin-code-actions .link-button.danger {
  color: #a12222;
}

.alert-success span {
  display: block;
  margin-top: 4px;
  font-size: 13px;
  font-weight: 600;
}

@media (max-width: 1050px) {
  .admin-codes-layout-clean {
    grid-template-columns: 1fr !important;
  }

  .admin-codes-head {
    display: grid !important;
  }
}

@media (max-width: 720px) {
  .two-cols {
    grid-template-columns: 1fr;
  }

  .admin-code-row {
    grid-template-columns: 1fr;
  }

  .admin-code-actions {
    justify-items: start;
  }
}

/* Admin sidebar icons, CSS only */
.admin-sidebar a {
  position: relative !important;
  display: flex !important;
  align-items: center !important;
  gap: 11px !important;
}

.admin-sidebar a::before {
  content: "" !important;
  width: 16px !important;
  height: 16px !important;
  flex: 0 0 16px !important;
  background: currentColor !important;
  opacity: .9 !important;
  -webkit-mask-repeat: no-repeat !important;
  mask-repeat: no-repeat !important;
  -webkit-mask-position: center !important;
  mask-position: center !important;
  -webkit-mask-size: 16px 16px !important;
  mask-size: 16px 16px !important;
}

.admin-sidebar a[href*="overview"]::before {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='black' d='M4 4h7v7H4V4Zm2 2v3h3V6H6Zm7-2h7v7h-7V4Zm2 2v3h3V6h-3ZM4 13h7v7H4v-7Zm2 2v3h3v-3H6Zm7-2h7v7h-7v-7Zm2 2v3h3v-3h-3Z'/%3E%3C/svg%3E") !important;
  mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='black' d='M4 4h7v7H4V4Zm2 2v3h3V6H6Zm7-2h7v7h-7V4Zm2 2v3h3V6h-3ZM4 13h7v7H4v-7Zm2 2v3h3v-3H6Zm7-2h7v7h-7v-7Zm2 2v3h3v-3h-3Z'/%3E%3C/svg%3E") !important;
}

.admin-sidebar a[href*="orders"]::before {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='black' d='M7 3h10v3h3v15H4V6h3V3Zm2 3h6V5H9v1ZM6 8v11h12V8H6Zm3 3h6v2H9v-2Zm0 4h6v2H9v-2Z'/%3E%3C/svg%3E") !important;
  mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='black' d='M7 3h10v3h3v15H4V6h3V3Zm2 3h6V5H9v1ZM6 8v11h12V8H6Zm3 3h6v2H9v-2Zm0 4h6v2H9v-2Z'/%3E%3C/svg%3E") !important;
}

.admin-sidebar a[href*="shirts"]::before {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='black' d='M8 4 5 6 2 7l2 6 3-1v8h10v-8l3 1 2-6-3-1-3-2h-2a2 2 0 0 1-4 0H8Zm1.2 2a4 4 0 0 0 5.6 0l2 1.3 2.6.9-.8 2.4-3.6-1.2V18H9V9.4l-3.6 1.2-.8-2.4 2.6-.9L9.2 6Z'/%3E%3C/svg%3E") !important;
  mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='black' d='M8 4 5 6 2 7l2 6 3-1v8h10v-8l3 1 2-6-3-1-3-2h-2a2 2 0 0 1-4 0H8Zm1.2 2a4 4 0 0 0 5.6 0l2 1.3 2.6.9-.8 2.4-3.6-1.2V18H9V9.4l-3.6 1.2-.8-2.4 2.6-.9L9.2 6Z'/%3E%3C/svg%3E") !important;
}

.admin-sidebar a[href*="codes"],
.admin-sidebar a[href*="admin-codes"] {
  color: inherit;
}

.admin-sidebar a[href*="codes"]::before,
.admin-sidebar a[href*="admin-codes"]::before {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='black' d='M4 7h4a4 4 0 0 1 8 0h4v4h-3.5a4.5 4.5 0 0 1 0 2H20v4h-4a4 4 0 0 1-8 0H4v-4h3.5a4.5 4.5 0 0 1 0-2H4V7Zm6 0h4a2 2 0 0 0-4 0Zm0 10a2 2 0 0 0 4 0h-4Zm1.5-6a2.5 2.5 0 0 0 0 2h1a2.5 2.5 0 0 0 0-2h-1Z'/%3E%3C/svg%3E") !important;
  mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='black' d='M4 7h4a4 4 0 0 1 8 0h4v4h-3.5a4.5 4.5 0 0 1 0 2H20v4h-4a4 4 0 0 1-8 0H4v-4h3.5a4.5 4.5 0 0 1 0-2H4V7Zm6 0h4a2 2 0 0 0-4 0Zm0 10a2 2 0 0 0 4 0h-4Zm1.5-6a2.5 2.5 0 0 0 0 2h1a2.5 2.5 0 0 0 0-2h-1Z'/%3E%3C/svg%3E") !important;
}

/* Code tabs, replace text symbols with clean icons */
.admin-code-tabs a span {
  display: inline-grid !important;
  place-items: center !important;
  width: 16px !important;
  height: 16px !important;
  font-size: 0 !important;
}

.admin-code-tabs a span::before {
  content: "" !important;
  width: 16px !important;
  height: 16px !important;
  background: currentColor !important;
  -webkit-mask-repeat: no-repeat !important;
  mask-repeat: no-repeat !important;
  -webkit-mask-position: center !important;
  mask-position: center !important;
  -webkit-mask-size: 16px 16px !important;
  mask-size: 16px 16px !important;
}

.admin-code-tabs a[href*="discounts"] span::before {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='black' d='M4 7h4a4 4 0 0 1 8 0h4v4h-3.5a4.5 4.5 0 0 1 0 2H20v4h-4a4 4 0 0 1-8 0H4v-4h3.5a4.5 4.5 0 0 1 0-2H4V7Z'/%3E%3C/svg%3E") !important;
  mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='black' d='M4 7h4a4 4 0 0 1 8 0h4v4h-3.5a4.5 4.5 0 0 1 0 2H20v4h-4a4 4 0 0 1-8 0H4v-4h3.5a4.5 4.5 0 0 1 0-2H4V7Z'/%3E%3C/svg%3E") !important;
}

.admin-code-tabs a[href*="vouchers"] span::before {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='black' d='M20 7h-2.2A3 3 0 0 0 12 5.8 3 3 0 0 0 6.2 7H4v13h16V7ZM9 5a1 1 0 0 1 1 1v1H8a1 1 0 0 1 1-2Zm6 0a1 1 0 0 1 1 2h-2V6a1 1 0 0 1 1-1ZM6 9h5v9H6V9Zm7 9V9h5v9h-5Z'/%3E%3C/svg%3E") !important;
  mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='black' d='M20 7h-2.2A3 3 0 0 0 12 5.8 3 3 0 0 0 6.2 7H4v13h16V7ZM9 5a1 1 0 0 1 1 1v1H8a1 1 0 0 1 1-2Zm6 0a1 1 0 0 1 1 2h-2V6a1 1 0 0 1 1-1ZM6 9h5v9H6V9Zm7 9V9h5v9h-5Z'/%3E%3C/svg%3E") !important;
}

/* Prettier admin sidebar icons, closer to Lovable */
.admin-sidebar a::before {
  content: "" !important;
  width: 17px !important;
  height: 17px !important;
  flex: 0 0 17px !important;
  background: currentColor !important;
  opacity: 1 !important;
  -webkit-mask-repeat: no-repeat !important;
  mask-repeat: no-repeat !important;
  -webkit-mask-position: center !important;
  mask-position: center !important;
  -webkit-mask-size: 17px 17px !important;
  mask-size: 17px 17px !important;
}

/* Übersicht, cleaner 2x2 grid */
.admin-sidebar a[href*="overview"]::before {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='none' stroke='black' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='4' y='4' width='6' height='6' rx='1.2'/%3E%3Crect x='14' y='4' width='6' height='6' rx='1.2'/%3E%3Crect x='4' y='14' width='6' height='6' rx='1.2'/%3E%3Crect x='14' y='14' width='6' height='6' rx='1.2'/%3E%3C/g%3E%3C/svg%3E") !important;
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='none' stroke='black' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='4' y='4' width='6' height='6' rx='1.2'/%3E%3Crect x='14' y='4' width='6' height='6' rx='1.2'/%3E%3Crect x='4' y='14' width='6' height='6' rx='1.2'/%3E%3Crect x='14' y='14' width='6' height='6' rx='1.2'/%3E%3C/g%3E%3C/svg%3E") !important;
}

/* Bestellungen, cleaner clipboard */
.admin-sidebar a[href*="orders"]::before {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='none' stroke='black' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 4h6'/%3E%3Cpath d='M9 3h6a1 1 0 0 1 1 1v1h1.5A2.5 2.5 0 0 1 20 7.5v10A2.5 2.5 0 0 1 17.5 20h-11A2.5 2.5 0 0 1 4 17.5v-10A2.5 2.5 0 0 1 6.5 5H8V4a1 1 0 0 1 1-1Z'/%3E%3Cpath d='M8.5 10.5h7'/%3E%3Cpath d='M8.5 14h5'/%3E%3C/g%3E%3C/svg%3E") !important;
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='none' stroke='black' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 4h6'/%3E%3Cpath d='M9 3h6a1 1 0 0 1 1 1v1h1.5A2.5 2.5 0 0 1 20 7.5v10A2.5 2.5 0 0 1 17.5 20h-11A2.5 2.5 0 0 1 4 17.5v-10A2.5 2.5 0 0 1 6.5 5H8V4a1 1 0 0 1 1-1Z'/%3E%3Cpath d='M8.5 10.5h7'/%3E%3Cpath d='M8.5 14h5'/%3E%3C/g%3E%3C/svg%3E") !important;
}

/* Shirts, cleaner tee outline */
.admin-sidebar a[href*="shirts"]::before {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='none' stroke='black' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m16 4 2.5 2 2.5 1-1.5 4-3-1V20H7.5V10l-3 1L3 7l2.5-1L8 4'/%3E%3Cpath d='M9 4a3 3 0 0 0 6 0'/%3E%3C/g%3E%3C/svg%3E") !important;
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='none' stroke='black' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m16 4 2.5 2 2.5 1-1.5 4-3-1V20H7.5V10l-3 1L3 7l2.5-1L8 4'/%3E%3Cpath d='M9 4a3 3 0 0 0 6 0'/%3E%3C/g%3E%3C/svg%3E") !important;
}

/* Codes, cleaner ticket */
.admin-sidebar a[href*="codes"]::before,
.admin-sidebar a[href*="admin-codes"]::before {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='none' stroke='black' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 9a2 2 0 0 0 0 4v4a1.5 1.5 0 0 0 1.5 1.5H10v-13H5.5A1.5 1.5 0 0 0 4 7v2Z'/%3E%3Cpath d='M20 9a2 2 0 0 1 0 4v4a1.5 1.5 0 0 1-1.5 1.5H14v-13h4.5A1.5 1.5 0 0 1 20 7v2Z'/%3E%3Cpath d='M12 7v1'/%3E%3Cpath d='M12 11v2'/%3E%3Cpath d='M12 17v0.01'/%3E%3C/g%3E%3C/svg%3E") !important;
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='none' stroke='black' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 9a2 2 0 0 0 0 4v4a1.5 1.5 0 0 0 1.5 1.5H10v-13H5.5A1.5 1.5 0 0 0 4 7v2Z'/%3E%3Cpath d='M20 9a2 2 0 0 1 0 4v4a1.5 1.5 0 0 1-1.5 1.5H14v-13h4.5A1.5 1.5 0 0 1 20 7v2Z'/%3E%3Cpath d='M12 7v1'/%3E%3Cpath d='M12 11v2'/%3E%3Cpath d='M12 17v0.01'/%3E%3C/g%3E%3C/svg%3E") !important;
}

/* Backoffice pill for Admin and Shop Manager */
.header-actions > .admin-pill:not(.backoffice-pill) {
  display: none !important;
}

.backoffice-pill {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 7px !important;
  min-height: 38px !important;
  padding: 0 14px !important;
  border-radius: 999px !important;
  background: #07110b !important;
  color: #ffffff !important;
  text-decoration: none !important;
  font-size: 13px !important;
  font-weight: 800 !important;
  line-height: 1 !important;
  cursor: pointer !important;
  box-shadow: 0 10px 22px rgba(7, 17, 11, .12) !important;
}

.backoffice-pill:hover {
  background: #000000 !important;
  color: #ffffff !important;
  transform: translateY(-1px) !important;
}

.backoffice-pill svg {
  width: 16px !important;
  height: 16px !important;
  fill: none !important;
  stroke: currentColor !important;
  stroke-width: 1.9 !important;
  stroke-linecap: round !important;
  stroke-linejoin: round !important;
}

.backoffice-pill svg,
.backoffice-pill span {
  pointer-events: none !important;
}

/* Benutzer sidebar icon fix */
.admin-sidebar a[href*="admin-users"]::before {
  content: "" !important;
  width: 17px !important;
  height: 17px !important;
  flex: 0 0 17px !important;
  background: currentColor !important;
  opacity: 1 !important;
  -webkit-mask-repeat: no-repeat !important;
  mask-repeat: no-repeat !important;
  -webkit-mask-position: center !important;
  mask-position: center !important;
  -webkit-mask-size: 17px 17px !important;
  mask-size: 17px 17px !important;
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='none' stroke='black' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='9' cy='8' r='3'/%3E%3Cpath d='M3.5 19a5.5 5.5 0 0 1 11 0'/%3E%3Cpath d='M17 8.5v4'/%3E%3Cpath d='M19 10.5h-4'/%3E%3C/g%3E%3C/svg%3E") !important;
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='none' stroke='black' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='9' cy='8' r='3'/%3E%3Cpath d='M3.5 19a5.5 5.5 0 0 1 11 0'/%3E%3Cpath d='M17 8.5v4'/%3E%3Cpath d='M19 10.5h-4'/%3E%3C/g%3E%3C/svg%3E") !important;
}

.admin-users-list {
  margin-top: 22px;
  display: grid;
  gap: 12px;
}

.admin-user-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  gap: 16px;
  align-items: center;
  padding: 16px;
  border: 1px solid var(--line);
  border-radius: 18px;
  background: #ffffff;
}

.admin-user-row h3 {
  margin: 0;
  color: var(--ink);
  font-size: 16px;
  font-weight: 900;
}

.admin-user-row p {
  margin: 4px 0 0;
  color: var(--muted);
  font-size: 13px;
}

.user-role-badge {
  display: inline-flex;
  align-items: center;
  min-height: 28px;
  padding: 0 11px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: #f7fbf8;
  color: var(--ink);
  font-size: 12px;
  font-weight: 900;
  white-space: nowrap;
}

.user-role-admin {
  border-color: #a8dfba;
  background: #e8f7ed;
  color: #1d7a3b;
}

.user-role-shop_manager {
  border-color: #b8e0ff;
  background: #eef8ff;
  color: #155b8a;
}

.admin-user-actions {
  display: flex;
  align-items: center;
  gap: 10px;
}

.admin-user-actions form {
  margin: 0;
}

@media (max-width: 850px) {
  .admin-user-row {
    grid-template-columns: 1fr;
  }

  .admin-user-actions {
    align-items: flex-start;
    flex-direction: column;
  }
}

/* Backoffice sidebar logout */
.admin-sidebar .admin-sidebar-logout {
  margin-top: 14px !important;
  border-top: 1px solid rgba(7, 17, 11, .08) !important;
  padding-top: 14px !important;
  color: #8a1f1f !important;
}

.admin-sidebar .admin-sidebar-logout:hover,
.admin-sidebar .admin-sidebar-logout.is-active {
  background: #fff1f1 !important;
  color: #8a1f1f !important;
}

.admin-sidebar a[href*="logout"]::before {
  content: "" !important;
  width: 17px !important;
  height: 17px !important;
  flex: 0 0 17px !important;
  background: currentColor !important;
  opacity: 1 !important;
  -webkit-mask-repeat: no-repeat !important;
  mask-repeat: no-repeat !important;
  -webkit-mask-position: center !important;
  mask-position: center !important;
  -webkit-mask-size: 17px 17px !important;
  mask-size: 17px 17px !important;
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='none' stroke='black' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M10 6H6.5A2.5 2.5 0 0 0 4 8.5v7A2.5 2.5 0 0 0 6.5 18H10'/%3E%3Cpath d='M14 8l4 4-4 4'/%3E%3Cpath d='M18 12H9'/%3E%3C/g%3E%3C/svg%3E") !important;
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='none' stroke='black' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M10 6H6.5A2.5 2.5 0 0 0 4 8.5v7A2.5 2.5 0 0 0 6.5 18H10'/%3E%3Cpath d='M14 8l4 4-4 4'/%3E%3Cpath d='M18 12H9'/%3E%3C/g%3E%3C/svg%3E") !important;
}

/* Logout sauber ausrichten */
.admin-sidebar .admin-sidebar-logout {
  display: inline-flex !important;
  align-items: center !important;
  gap: 10px !important;
  line-height: 1 !important;
}

.admin-sidebar .admin-sidebar-logout::before,
.admin-sidebar a[href*="logout"]::before {
  position: relative !important;
  top: -1px !important;
  margin-right: 0 !important;
  vertical-align: middle !important;
}

/* Gutschein: Empfänger E-Mail breiter */
.admin-codes-form input[name="recipient_email"],
.admin-code-form input[name="recipient_email"],
.admin-product-form input[name="recipient_email"],
input[name="recipient_email"] {
  min-width: 320px !important;
  width: 100% !important;
}

.admin-codes-form label:has(input[name="recipient_email"]),
.admin-code-form label:has(input[name="recipient_email"]),
.admin-product-form label:has(input[name="recipient_email"]) {
  grid-column: span 2 !important;
}

@media (max-width: 760px) {
  .admin-codes-form label:has(input[name="recipient_email"]),
  .admin-code-form label:has(input[name="recipient_email"]),
  .admin-product-form label:has(input[name="recipient_email"]) {
    grid-column: span 1 !important;
  }

  input[name="recipient_email"] {
    min-width: 0 !important;
  }
}

/* Logout final sauber zentrieren */
.admin-sidebar a.admin-sidebar-logout,
.admin-sidebar .admin-sidebar-logout {
  display: flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  gap: 11px !important;
  width: 100% !important;
  min-height: 42px !important;
  height: 42px !important;
  padding: 0 18px !important;
  margin-top: 14px !important;
  border-top: 0 !important;
  line-height: 1 !important;
  box-sizing: border-box !important;
}

.admin-sidebar a.admin-sidebar-logout::before,
.admin-sidebar a[href*="logout"]::before {
  position: static !important;
  top: auto !important;
  transform: none !important;
  margin: 0 !important;
  width: 17px !important;
  height: 17px !important;
  flex: 0 0 17px !important;
  align-self: center !important;
}

.admin-sidebar a.admin-sidebar-logout span {
  display: flex !important;
  align-items: center !important;
  height: 17px !important;
  line-height: 17px !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* Registration */
.register-card {
  max-width: 720px !important;
}

.auth-form-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}

.auth-switch {
  margin-top: 18px;
  color: var(--muted);
}

.auth-switch a {
  color: var(--green-700);
  font-weight: 900;
}

/* Customers admin */
.admin-searchbar {
  display: flex;
  gap: 10px;
  align-items: center;
  margin-bottom: 18px;
}

.admin-searchbar input {
  flex: 1;
  min-width: 260px;
}

.admin-customer-layout {
  display: grid;
  grid-template-columns: minmax(260px, 340px) minmax(0, 1fr);
  gap: 18px;
  align-items: start;
}

.admin-customer-list {
  display: grid;
  gap: 10px;
}

.admin-customer-card {
  display: grid;
  gap: 4px;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 18px;
  background: #ffffff;
  color: var(--ink);
  text-decoration: none;
}

.admin-customer-card:hover,
.admin-customer-card.is-active {
  border-color: #98dfad;
  background: #eaf8ee;
}

.admin-customer-card strong {
  font-size: 14px;
  font-weight: 900;
}

.admin-customer-card span,
.admin-customer-card small {
  color: var(--muted);
  font-size: 12px;
}

.admin-customer-detail {
  display: grid;
  gap: 18px;
}

.admin-detail-card {
  padding: 18px;
  border: 1px solid var(--line);
  border-radius: 22px;
  background: #ffffff;
}

.admin-detail-head {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  align-items: flex-start;
  margin-bottom: 18px;
}

.admin-detail-head h3 {
  margin: 0;
  font-size: 20px;
  font-weight: 950;
}

.admin-detail-head p {
  margin: 5px 0 0;
  color: var(--muted);
}

.admin-form-span {
  grid-column: 1 / -1;
}

.admin-orders-mini-list {
  display: grid;
  gap: 10px;
}

.admin-order-mini {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  gap: 16px;
  align-items: center;
  padding: 13px;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: #f9fbfa;
}

.admin-order-mini div {
  display: grid;
  gap: 3px;
}

.admin-order-mini strong {
  font-size: 14px;
  color: var(--ink);
}

.admin-order-mini span,
.admin-order-mini small {
  color: var(--muted);
  font-size: 12px;
}

/* Kunden sidebar icon */
.admin-sidebar a[href*="admin-customers"]::before {
  content: "" !important;
  width: 17px !important;
  height: 17px !important;
  flex: 0 0 17px !important;
  background: currentColor !important;
  opacity: 1 !important;
  -webkit-mask-repeat: no-repeat !important;
  mask-repeat: no-repeat !important;
  -webkit-mask-position: center !important;
  mask-position: center !important;
  -webkit-mask-size: 17px 17px !important;
  mask-size: 17px 17px !important;
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='none' stroke='black' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='9' cy='8' r='3'/%3E%3Cpath d='M3.5 19a5.5 5.5 0 0 1 11 0'/%3E%3Ccircle cx='17' cy='9' r='2.3'/%3E%3Cpath d='M14.5 19a4.2 4.2 0 0 1 6 0'/%3E%3C/g%3E%3C/svg%3E") !important;
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='none' stroke='black' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='9' cy='8' r='3'/%3E%3Cpath d='M3.5 19a5.5 5.5 0 0 1 11 0'/%3E%3Ccircle cx='17' cy='9' r='2.3'/%3E%3Cpath d='M14.5 19a4.2 4.2 0 0 1 6 0'/%3E%3C/g%3E%3C/svg%3E") !important;
}

@media (max-width: 900px) {
  .admin-customer-layout {
    grid-template-columns: 1fr;
  }

  .admin-order-mini {
    grid-template-columns: 1fr;
  }

  .auth-form-grid {
    grid-template-columns: 1fr;
  }
}

/* Clean login and register modal */
.login-modern {
  width: min(1120px, calc(100% - 32px));
  margin: 48px auto 72px;
  display: grid;
  grid-template-columns: minmax(320px, 480px) minmax(0, 1fr);
  gap: 22px;
  align-items: stretch;
}

.login-modern__card,
.login-modern__side-card,
.register-modal__panel {
  border: 1px solid var(--line);
  background: rgba(255, 255, 255, .92);
  box-shadow: 0 24px 70px rgba(7, 17, 11, .08);
}

.login-modern__card {
  border-radius: 30px;
  padding: 28px;
}

.login-modern__brand h1 {
  margin: 12px 0 8px;
  font-size: clamp(34px, 5vw, 56px);
  line-height: .95;
  letter-spacing: -.05em;
}

.login-modern__brand p {
  margin: 0 0 24px;
  color: var(--muted);
  font-size: 15px;
  line-height: 1.6;
}

.login-modern__form {
  display: grid;
  gap: 14px;
}

.login-modern__form label,
.register-modal__form label {
  display: grid;
  gap: 7px;
  color: var(--ink);
  font-size: 13px;
  font-weight: 850;
}

.login-modern__form input,
.register-modal__form input {
  min-height: 46px;
  border-radius: 15px;
  border: 1px solid var(--line);
  background: #ffffff;
  padding: 0 14px;
  color: var(--ink);
  font: inherit;
  outline: none;
}

.login-modern__form input:focus,
.register-modal__form input:focus {
  border-color: #8fd9a5;
  box-shadow: 0 0 0 4px rgba(46, 171, 91, .12);
}

.login-modern__submit,
.register-modal__submit {
  width: 100%;
  min-height: 48px;
  margin-top: 4px;
}

.login-modern__register {
  margin-top: 18px;
  padding-top: 18px;
  border-top: 1px solid var(--line);
  display: flex;
  justify-content: center;
  gap: 8px;
  align-items: center;
  color: var(--muted);
  font-size: 14px;
}

.login-register-open {
  color: var(--green-700) !important;
  font-weight: 950 !important;
  text-decoration: none !important;
}

.login-modern__side {
  min-height: 100%;
  display: flex;
}

.login-modern__side-card {
  width: 100%;
  min-height: 100%;
  border-radius: 34px;
  padding: 34px;
  background:
    radial-gradient(circle at 18% 20%, rgba(126, 255, 163, .25), transparent 34%),
    linear-gradient(135deg, #072016, #0f3b25 58%, #d7fbe2);
  color: #ffffff;
  overflow: hidden;
  position: relative;
}

.login-modern__side-card h2 {
  max-width: 560px;
  margin: 0 0 14px;
  font-size: clamp(32px, 5vw, 64px);
  line-height: .94;
  letter-spacing: -.06em;
}

.login-modern__side-card p {
  max-width: 520px;
  color: rgba(255, 255, 255, .78);
  line-height: 1.6;
}

.login-modern__side-card ul {
  margin: 28px 0 0;
  padding: 0;
  display: grid;
  gap: 10px;
  list-style: none;
}

.login-modern__side-card li {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-weight: 850;
}

.login-modern__side-card li::before {
  content: "";
  width: 9px;
  height: 9px;
  border-radius: 99px;
  background: #a7ffbd;
  box-shadow: 0 0 0 5px rgba(167, 255, 189, .16);
}

.register-modal {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: none;
  place-items: center;
  padding: 18px;
}

.register-modal.is-open {
  display: grid;
}

.register-modal__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(7, 17, 11, .46);
  backdrop-filter: blur(8px);
}

.register-modal__panel {
  position: relative;
  z-index: 1;
  width: min(760px, 100%);
  max-height: calc(100vh - 36px);
  overflow: auto;
  border-radius: 30px;
  padding: 26px;
}

.register-modal__close {
  position: absolute;
  top: 16px;
  right: 16px;
  width: 38px;
  height: 38px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: #ffffff;
  color: var(--ink);
  font-size: 28px;
  line-height: 1;
  cursor: pointer;
}

.register-modal__head h2 {
  margin: 12px 0 6px;
  font-size: clamp(30px, 5vw, 46px);
  line-height: 1;
  letter-spacing: -.045em;
}

.register-modal__head p {
  margin: 0 0 20px;
  color: var(--muted);
}

.register-modal__form {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}

.register-modal__span {
  grid-column: 1 / -1;
}

.modal-lock {
  overflow: hidden;
}

@media (max-width: 860px) {
  .login-modern {
    grid-template-columns: 1fr;
    margin-top: 28px;
  }

  .login-modern__side-card {
    min-height: 360px;
  }
}

@media (max-width: 640px) {
  .login-modern {
    width: min(100% - 20px, 1120px);
  }

  .login-modern__card,
  .login-modern__side-card,
  .register-modal__panel {
    border-radius: 24px;
    padding: 20px;
  }

  .register-modal__form {
    grid-template-columns: 1fr;
  }

  .register-modal__span {
    grid-column: auto;
  }

  .login-modern__register {
    flex-direction: column;
  }
}

/* Login clean single card */
.login-modern {
  width: min(620px, calc(100% - 32px)) !important;
  margin: 56px auto 90px !important;
  display: block !important;
}

.login-modern__side {
  display: none !important;
}

.login-modern__card {
  width: 100% !important;
  border-radius: 30px !important;
  padding: 34px !important;
  background: rgba(255, 255, 255, .96) !important;
  border: 1px solid rgba(16, 66, 38, .12) !important;
  box-shadow: 0 28px 80px rgba(7, 17, 11, .10) !important;
}

.login-modern__brand {
  text-align: left !important;
}

.login-modern__brand h1 {
  margin: 14px 0 10px !important;
  font-size: clamp(40px, 6vw, 58px) !important;
  line-height: .96 !important;
  letter-spacing: -.055em !important;
  color: #07110b !important;
}

.login-modern__brand p {
  max-width: 460px !important;
  margin: 0 0 26px !important;
  color: #395144 !important;
  font-size: 16px !important;
  line-height: 1.55 !important;
}

.login-modern__form {
  gap: 16px !important;
}

.login-modern__form label {
  font-size: 13px !important;
  font-weight: 900 !important;
  color: #07110b !important;
}

.login-modern__form input {
  min-height: 52px !important;
  border-radius: 17px !important;
  border-color: rgba(16, 66, 38, .16) !important;
  background: #f8fbf8 !important;
  font-weight: 750 !important;
}

.login-modern__form input:focus {
  background: #ffffff !important;
  border-color: #3da967 !important;
  box-shadow: 0 0 0 4px rgba(61, 169, 103, .14) !important;
}

.login-modern__submit {
  min-height: 52px !important;
  margin-top: 8px !important;
  border-radius: 999px !important;
  font-weight: 950 !important;
}

.login-modern__register {
  margin-top: 20px !important;
  padding-top: 20px !important;
  justify-content: center !important;
  border-top: 1px solid rgba(16, 66, 38, .12) !important;
}

.login-register-open {
  padding: 0 !important;
  color: #123f25 !important;
  font-weight: 950 !important;
}

/* Register modal cleaner */
.register-modal__panel {
  width: min(660px, 100%) !important;
  border-radius: 30px !important;
  background: rgba(255, 255, 255, .98) !important;
}

.register-modal__head h2 {
  color: #07110b !important;
}

.register-modal__head p {
  color: #395144 !important;
}

.register-modal__form input {
  background: #f8fbf8 !important;
  border-color: rgba(16, 66, 38, .16) !important;
}

@media (max-width: 640px) {
  .login-modern {
    width: min(100% - 20px, 620px) !important;
    margin-top: 28px !important;
  }

  .login-modern__card {
    padding: 22px !important;
    border-radius: 24px !important;
  }
}

/* Cloudflare Turnstile in registration modal */
.turnstile-wrap {
  grid-column: 1 / -1;
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 74px;
  padding: 8px 0 2px;
}

.turnstile-wrap iframe {
  max-width: 100%;
}

.register-modal__submit {
  grid-column: 1 / -1;
}

/* Turnstile im Login */
.login-turnstile-wrap {
  margin: 2px 0 0 !important;
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  min-height: 74px !important;
}

.login-turnstile-wrap iframe,
.turnstile-wrap iframe {
  max-width: 100% !important;
}

/* Cart cleanup */
.cart-page .page-width > h1 {
  margin: 0 0 24px;
  font-size: clamp(42px, 5.2vw, 68px);
  line-height: 0.96;
  letter-spacing: -0.05em;
}

.cart-page .page-width {
  max-width: 1180px;
}

.cart-list {
  gap: 18px;
}

.cart-item {
  grid-template-columns: 110px 1fr 140px !important;
  gap: 16px !important;
  align-items: start;
  padding: 18px !important;
  border-radius: 22px !important;
}

.cart-thumb {
  width: 110px !important;
  height: 110px !important;
  aspect-ratio: auto !important;
  overflow: hidden;
  border-radius: 18px !important;
  background: #edf6ee !important;
}

.cart-thumb img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}

.cart-thumb span {
  font-size: 14px;
  font-weight: 800;
}

.cart-content {
  min-width: 0;
}

.cart-item-title {
  margin: 2px 0 8px !important;
  font-size: clamp(24px, 3vw, 34px) !important;
  line-height: 1.02;
  letter-spacing: -0.04em;
}

.cart-item-meta {
  margin: 0 0 6px !important;
  color: var(--muted);
  font-size: 15px;
  font-weight: 600;
}

.cart-item-desc {
  margin: 0 0 12px !important;
  color: #365244;
  font-size: 14px;
}

.properties {
  grid-template-columns: 120px 1fr !important;
  gap: 5px 12px !important;
  font-size: 14px !important;
}

.properties dt {
  font-weight: 800;
}

.properties dd {
  margin: 0;
}

.cart-side {
  display: grid;
  justify-items: end;
  align-content: start;
  gap: 10px;
}

.cart-side strong {
  font-size: 18px;
  line-height: 1;
}

.cart-side form {
  margin: 0;
}

.summary {
  max-width: 460px;
  width: 100%;
  margin: 26px 0 0 auto;
  padding: 20px 22px !important;
  border-radius: 24px !important;
}

.summary p {
  margin: 0 0 12px;
  color: #415a4d;
  font-size: 15px;
}

.summary div {
  margin: 8px 0 16px;
  font-size: 18px !important;
}

.summary .button {
  min-width: 0;
}

@media (max-width: 900px) {
  .cart-item {
    grid-template-columns: 86px 1fr !important;
  }

  .cart-side {
    grid-column: 2;
    justify-items: start;
  }

  .cart-thumb {
    width: 86px !important;
    height: 86px !important;
    border-radius: 14px !important;
  }

  .cart-item-title {
    font-size: 24px !important;
  }
}

@media (max-width: 640px) {
  .cart-page .page-width > h1 {
    font-size: 52px;
  }

  .cart-item {
    grid-template-columns: 1fr !important;
  }

  .cart-thumb {
    width: 100% !important;
    height: 220px !important;
  }

  .cart-side {
    grid-column: auto;
    justify-items: start;
  }

  .properties {
    grid-template-columns: 1fr !important;
  }

  .summary {
    max-width: none;
  }
}

/* Cart width compact final */
.cart-page .page-width {
  max-width: 980px !important;
  width: min(980px, calc(100% - 32px)) !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

.cart-page .page-width > h1 {
  font-size: clamp(42px, 4.8vw, 58px) !important;
  margin-bottom: 22px !important;
}

.cart-item {
  grid-template-columns: 96px minmax(0, 1fr) 115px !important;
  gap: 14px !important;
  padding: 16px !important;
  border-radius: 20px !important;
}

.cart-thumb {
  width: 96px !important;
  height: 96px !important;
  border-radius: 16px !important;
}

.cart-item-title {
  font-size: clamp(24px, 2.4vw, 31px) !important;
  margin-top: 0 !important;
  margin-bottom: 7px !important;
}

.cart-item-meta {
  font-size: 14px !important;
  margin-bottom: 6px !important;
}

.cart-item-desc {
  font-size: 13px !important;
  margin-bottom: 12px !important;
}

.properties {
  grid-template-columns: 118px 1fr !important;
  font-size: 13px !important;
}

.cart-side strong {
  font-size: 16px !important;
}

.summary {
  max-width: 380px !important;
  padding: 18px 20px !important;
  border-radius: 22px !important;
}

.summary p {
  font-size: 14px !important;
}

.summary div {
  font-size: 17px !important;
}

.summary .button {
  min-height: 44px !important;
  padding-inline: 22px !important;
}

@media (max-width: 760px) {
  .cart-page .page-width {
    width: min(100% - 20px, 980px) !important;
  }

  .cart-item {
    grid-template-columns: 82px minmax(0, 1fr) !important;
  }

  .cart-thumb {
    width: 82px !important;
    height: 82px !important;
  }

  .cart-side {
    grid-column: 2 !important;
    justify-items: start !important;
  }

  .summary {
    max-width: none !important;
  }
}

/* Produktseite: Shirtbild korrekt darstellen */
.designer-intro .designer-product-preview,
.designer-product-preview {
  margin-top: 22px !important;
  width: 100% !important;
  max-width: 360px !important;
}

.designer-intro .designer-product-preview__image,
.designer-product-preview__image {
  width: 100% !important;
  height: 360px !important;
  min-height: 360px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  overflow: hidden !important;
  border: 1px solid rgba(16, 66, 38, .14) !important;
  border-radius: 22px !important;
  background: #ffffff !important;
  padding: 18px !important;
  box-sizing: border-box !important;
}

.designer-intro .designer-product-preview__image img,
.designer-product-preview__image img {
  display: block !important;
  width: auto !important;
  height: auto !important;
  max-width: 100% !important;
  max-height: 100% !important;
  min-width: 0 !important;
  min-height: 0 !important;
  object-fit: contain !important;
  object-position: center center !important;
}

/* Falls alte globale Regeln das Bild kaputt skalieren */
.designer-page img {
  object-fit: contain !important;
}

/* Produktseite kompakter und harmonischer */
.designer-layout {
  align-items: start !important;
  gap: 54px !important;
}

.designer-intro {
  max-width: 460px !important;
}

.designer-card {
  max-width: 420px !important;
  margin-left: auto !important;
}

/* Product detail image layout final */
.designer-page .designer-layout {
  grid-template-columns: minmax(0, 520px) minmax(340px, 430px) !important;
  gap: 64px !important;
  align-items: start !important;
}

.designer-page .designer-intro {
  max-width: 520px !important;
}

.product-detail-image {
  width: 100% !important;
  max-width: 420px !important;
  height: 420px !important;
  margin: 28px 0 18px !important;
  padding: 22px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  border: 1px solid rgba(16, 66, 38, .14) !important;
  border-radius: 28px !important;
  background: #ffffff !important;
  box-shadow: 0 24px 70px rgba(7, 17, 11, .08) !important;
  box-sizing: border-box !important;
  overflow: hidden !important;
}

.product-detail-image img {
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  max-width: 100% !important;
  max-height: 100% !important;
  object-fit: contain !important;
  object-position: center center !important;
  border-radius: 0 !important;
  background: transparent !important;
}

.product-detail-notice {
  max-width: 420px !important;
  margin-top: 0 !important;
}

.product-detail-notice img {
  display: none !important;
}

.designer-card {
  max-width: 430px !important;
  width: 100% !important;
}

@media (max-width: 900px) {
  .designer-page .designer-layout {
    grid-template-columns: 1fr !important;
    gap: 28px !important;
  }

  .product-detail-image {
    max-width: 100% !important;
    height: 360px !important;
  }

  .designer-card {
    max-width: 100% !important;
  }
}

/* Product detail page clean layout */
.product-detail-page {
  padding-top: 54px !important;
}

.product-detail-page .page-width {
  max-width: 1120px !important;
  width: min(1120px, calc(100% - 40px)) !important;
  margin-inline: auto !important;
}

.product-detail-layout {
  display: grid !important;
  grid-template-columns: minmax(0, 560px) minmax(360px, 440px) !important;
  gap: 64px !important;
  align-items: start !important;
}

.product-detail-media {
  min-width: 0 !important;
}

.product-back-link {
  display: inline-flex !important;
  align-items: center !important;
  height: 34px !important;
  padding: 0 16px !important;
  margin-bottom: 22px !important;
  border: 1px solid rgba(16, 66, 38, .16) !important;
  border-radius: 999px !important;
  background: rgba(255, 255, 255, .75) !important;
  color: #07110b !important;
  font-size: 14px !important;
  font-weight: 750 !important;
  text-decoration: none !important;
}

.product-main-image {
  width: 100% !important;
  height: 620px !important;
  margin: 0 !important;
  padding: 30px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  border: 1px solid rgba(16, 66, 38, .14) !important;
  border-radius: 34px !important;
  background: #ffffff !important;
  box-shadow: 0 28px 90px rgba(7, 17, 11, .09) !important;
  overflow: hidden !important;
  box-sizing: border-box !important;
}

.product-main-image img {
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  max-width: 100% !important;
  max-height: 100% !important;
  object-fit: contain !important;
  object-position: center center !important;
}

.product-main-image span {
  font-size: 18px !important;
  font-weight: 900 !important;
  color: #3aa464 !important;
}

.product-buy-panel {
  width: 100% !important;
  padding: 28px !important;
  border: 1px solid rgba(16, 66, 38, .14) !important;
  border-radius: 30px !important;
  background: rgba(255, 255, 255, .92) !important;
  box-shadow: 0 28px 90px rgba(7, 17, 11, .08) !important;
  box-sizing: border-box !important;
}

.product-buy-panel .pill {
  margin-bottom: 18px !important;
}

.product-buy-panel h1 {
  margin: 0 0 12px !important;
  font-size: clamp(38px, 4vw, 56px) !important;
  line-height: .98 !important;
  letter-spacing: -.055em !important;
  color: #07110b !important;
}

.product-subtitle {
  margin: 0 0 22px !important;
  color: #365244 !important;
  font-size: 16px !important;
  line-height: 1.5 !important;
  font-weight: 650 !important;
}

.product-price-row {
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  gap: 18px !important;
  margin: 0 0 18px !important;
  padding: 16px 0 !important;
  border-top: 1px solid rgba(16, 66, 38, .12) !important;
  border-bottom: 1px solid rgba(16, 66, 38, .12) !important;
}

.product-price-row span {
  color: #365244 !important;
  font-weight: 750 !important;
}

.product-price-row strong {
  font-size: 24px !important;
  color: #07110b !important;
}

.product-info-box {
  margin: 0 0 22px !important;
  padding: 14px 16px !important;
  border: 1px solid rgba(58, 164, 100, .20) !important;
  border-radius: 18px !important;
  background: #f2faf4 !important;
  color: #264838 !important;
  font-size: 14px !important;
  line-height: 1.5 !important;
}

.product-detail-form {
  display: grid !important;
  gap: 20px !important;
}

.product-detail-form fieldset {
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
}

.product-detail-form legend {
  margin: 0 0 6px !important;
  font-size: 13px !important;
  font-weight: 900 !important;
  color: #07110b !important;
}

.product-detail-form .choice-row {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 10px !important;
}

.product-detail-form .choice span {
  min-height: 34px !important;
  padding: 0 15px !important;
  display: inline-flex !important;
  align-items: center !important;
  border-radius: 999px !important;
  font-size: 13px !important;
  font-weight: 850 !important;
}

.product-detail-form .button-full {
  min-height: 56px !important;
  border-radius: 999px !important;
  font-size: 16px !important;
  font-weight: 950 !important;
}

@media (max-width: 980px) {
  .product-detail-layout {
    grid-template-columns: 1fr !important;
    gap: 28px !important;
  }

  .product-main-image {
    height: 520px !important;
  }

  .product-buy-panel {
    max-width: none !important;
  }
}

@media (max-width: 640px) {
  .product-detail-page .page-width {
    width: min(100% - 24px, 1120px) !important;
  }

  .product-main-image {
    height: 420px !important;
    padding: 18px !important;
    border-radius: 26px !important;
  }

  .product-buy-panel {
    padding: 22px !important;
    border-radius: 26px !important;
  }

  .product-buy-panel h1 {
    font-size: 40px !important;
  }
}

/* Product title smaller */
.product-buy-panel h1 {
  font-size: clamp(30px, 3vw, 42px) !important;
  line-height: 1.04 !important;
  letter-spacing: -0.045em !important;
  margin-bottom: 10px !important;
}

@media (max-width: 640px) {
  .product-buy-panel h1 {
    font-size: 34px !important;
  }
}

/* Cart quantity and standard item cleanup */
.cart-item {
  grid-template-columns: 96px minmax(0, 1fr) 150px !important;
}

.cart-thumb {
  text-decoration: none !important;
}

.cart-side {
  gap: 12px !important;
}

.cart-qty-form {
  display: grid !important;
  gap: 7px !important;
  justify-items: end !important;
  margin: 0 !important;
}

.cart-qty-form label {
  display: grid !important;
  gap: 5px !important;
  justify-items: end !important;
  font-size: 12px !important;
  font-weight: 850 !important;
  color: #365244 !important;
}

.cart-qty-input {
  width: 72px !important;
  height: 38px !important;
  padding: 0 10px !important;
  border: 1px solid rgba(16, 66, 38, .18) !important;
  border-radius: 12px !important;
  background: #ffffff !important;
  color: #07110b !important;
  font-size: 15px !important;
  font-weight: 850 !important;
  text-align: center !important;
}

.cart-qty-input:focus {
  outline: none !important;
  border-color: #3aa464 !important;
  box-shadow: 0 0 0 4px rgba(58, 164, 100, .14) !important;
}

.cart-qty-button {
  height: 32px !important;
  padding: 0 12px !important;
  border: 0 !important;
  border-radius: 999px !important;
  background: #e9f6ec !important;
  color: #123f25 !important;
  font-size: 12px !important;
  font-weight: 900 !important;
  cursor: pointer !important;
}

.cart-qty-button:hover {
  background: #d7efde !important;
}

.cart-content .properties {
  margin-top: 12px !important;
}

@media (max-width: 760px) {
  .cart-item {
    grid-template-columns: 82px minmax(0, 1fr) !important;
  }

  .cart-side {
    grid-column: 2 !important;
    justify-items: start !important;
  }

  .cart-qty-form,
  .cart-qty-form label {
    justify-items: start !important;
  }
}

/* Shirt designer v1 */
.product-detail-page--custom {
  padding-top: 54px !important;
}

.product-detail-layout--custom {
  display: grid !important;
  grid-template-columns: minmax(0, 650px) minmax(360px, 440px) !important;
  gap: 64px !important;
  align-items: start !important;
}

.shirt-designer {
  display: grid !important;
  gap: 16px !important;
}

.designer-view-tabs {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 10px !important;
}

.designer-view-tabs button {
  height: 36px !important;
  padding: 0 16px !important;
  border: 1px solid rgba(16, 66, 38, .16) !important;
  border-radius: 999px !important;
  background: rgba(255, 255, 255, .82) !important;
  color: #07110b !important;
  font-weight: 850 !important;
  cursor: pointer !important;
}

.designer-view-tabs button.is-active {
  border-color: #3aa464 !important;
  background: #e8f7ec !important;
  color: #123f25 !important;
  box-shadow: 0 10px 26px rgba(58, 164, 100, .16) !important;
}

.designer-canvas-card {
  width: 100% !important;
  padding: 22px !important;
  border: 1px solid rgba(16, 66, 38, .14) !important;
  border-radius: 34px !important;
  background: #ffffff !important;
  box-shadow: 0 28px 90px rgba(7, 17, 11, .09) !important;
  box-sizing: border-box !important;
  overflow: hidden !important;
}

.designer-canvas-card .canvas-container,
.designer-canvas-card canvas {
  max-width: 100% !important;
}

.designer-tools {
  display: grid !important;
  gap: 14px !important;
  padding: 18px !important;
  border: 1px solid rgba(16, 66, 38, .14) !important;
  border-radius: 26px !important;
  background: rgba(255, 255, 255, .86) !important;
}

.designer-upload-button {
  min-height: 46px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  border-radius: 999px !important;
  background: #3aa464 !important;
  color: #ffffff !important;
  font-size: 14px !important;
  font-weight: 950 !important;
  cursor: pointer !important;
}

.designer-upload-button input {
  display: none !important;
}

.designer-text-row,
.designer-action-row {
  display: grid !important;
  grid-template-columns: 1fr auto !important;
  gap: 10px !important;
}

.designer-action-row {
  grid-template-columns: 1fr 1fr !important;
}

.designer-text-row input,
.designer-notes textarea {
  width: 100% !important;
  border: 1px solid rgba(16, 66, 38, .16) !important;
  border-radius: 16px !important;
  background: #ffffff !important;
  color: #07110b !important;
  font-weight: 750 !important;
  box-sizing: border-box !important;
}

.designer-text-row input {
  height: 44px !important;
  padding: 0 14px !important;
}

.designer-notes textarea {
  padding: 12px 14px !important;
  resize: vertical !important;
}

.designer-text-row button,
.designer-action-row button {
  min-height: 44px !important;
  padding: 0 14px !important;
  border: 0 !important;
  border-radius: 999px !important;
  background: #e9f6ec !important;
  color: #123f25 !important;
  font-size: 13px !important;
  font-weight: 900 !important;
  cursor: pointer !important;
}

.designer-range {
  display: grid !important;
  gap: 8px !important;
  color: #07110b !important;
  font-size: 13px !important;
  font-weight: 900 !important;
}

.designer-notes {
  display: grid !important;
  gap: 8px !important;
  color: #07110b !important;
  font-size: 13px !important;
  font-weight: 900 !important;
}

.designer-status {
  min-height: 18px !important;
  margin: 0 !important;
  color: #365244 !important;
  font-size: 13px !important;
  font-weight: 750 !important;
}

.designer-rights {
  margin-top: 0 !important;
}

.product-buy-panel h1 {
  font-size: clamp(30px, 3vw, 42px) !important;
  line-height: 1.04 !important;
  letter-spacing: -0.045em !important;
}

@media (max-width: 1080px) {
  .product-detail-layout--custom {
    grid-template-columns: 1fr !important;
    gap: 28px !important;
  }

  .product-buy-panel {
    max-width: none !important;
  }
}

@media (max-width: 640px) {
  .designer-canvas-card {
    padding: 12px !important;
    border-radius: 24px !important;
  }

  .designer-text-row,
  .designer-action-row {
    grid-template-columns: 1fr !important;
  }
}

/* Admin design preview */
.admin-design-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 22px;
  margin-top: 24px;
}

.admin-design-view {
  padding: 18px;
  border: 1px solid rgba(16, 66, 38, .14);
  border-radius: 24px;
  background: #ffffff;
  box-shadow: 0 18px 50px rgba(7, 17, 11, .06);
}

.admin-design-view h2 {
  margin: 0 0 14px;
  font-size: 20px;
}

.admin-design-view canvas {
  width: 100% !important;
  height: auto !important;
  border-radius: 18px;
  background: #f4f4f2;
}

.admin-design-assets,
.admin-design-json {
  margin-top: 28px;
}

.admin-design-json pre {
  max-height: 420px;
  overflow: auto;
  padding: 18px;
  border-radius: 18px;
  background: #07110b;
  color: #dff8e5;
  font-size: 12px;
}

@media (max-width: 900px) {
  .admin-design-grid {
    grid-template-columns: 1fr;
  }
}

/* Checkout redesign */
.checkout-page {
  padding-top: 56px !important;
  padding-bottom: 90px !important;
  background:
    radial-gradient(circle at 12% 6%, rgba(58, 164, 100, .12), transparent 28%),
    radial-gradient(circle at 88% 12%, rgba(176, 255, 205, .22), transparent 30%),
    linear-gradient(180deg, #f6fbf6 0%, #eef7f0 100%) !important;
}

.checkout-page .page-width {
  max-width: 1180px !important;
  width: min(1180px, calc(100% - 32px)) !important;
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) 390px !important;
  gap: 22px 34px !important;
  align-items: start !important;
}

.checkout-page .eyebrow {
  grid-column: 1 !important;
  margin: 0 !important;
  font-size: 13px !important;
  letter-spacing: .08em !important;
  text-transform: uppercase !important;
  color: #2fa45e !important;
  font-weight: 900 !important;
}

.checkout-page h1 {
  grid-column: 1 !important;
  max-width: 760px !important;
  margin: 0 !important;
  font-size: clamp(44px, 5.6vw, 74px) !important;
  line-height: .9 !important;
  letter-spacing: -.065em !important;
  color: #06110a !important;
}

.checkout-page .page-width > p:not(.eyebrow) {
  grid-column: 1 !important;
  max-width: 720px !important;
  margin: -6px 0 4px !important;
  color: rgba(6, 17, 10, .68) !important;
  font-size: 15px !important;
  line-height: 1.55 !important;
}

.checkout-page .page-width > p strong {
  color: #06110a !important;
}

.checkout-page .page-width > p a {
  color: #159447 !important;
  font-weight: 800 !important;
  text-decoration-thickness: 2px !important;
  text-underline-offset: 3px !important;
}

.checkout-page .alert {
  grid-column: 1 !important;
  border-radius: 20px !important;
  border: 1px solid rgba(220, 38, 38, .2) !important;
  background: rgba(254, 242, 242, .92) !important;
  color: #7f1d1d !important;
  padding: 14px 18px !important;
}

.checkout-form {
  grid-column: 1 !important;
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 16px !important;
  margin-top: 8px !important;
  padding: 24px !important;
  border-radius: 30px !important;
  border: 1px solid rgba(16, 66, 38, .12) !important;
  background: rgba(255, 255, 255, .78) !important;
  box-shadow: 0 22px 70px rgba(7, 17, 11, .08) !important;
  backdrop-filter: blur(18px) !important;
}

.checkout-form > label {
  display: grid !important;
  gap: 8px !important;
  margin: 0 !important;
  color: #06110a !important;
  font-size: 13px !important;
  font-weight: 900 !important;
}

.checkout-form > label:nth-child(1),
.checkout-form > label:nth-child(2),
.checkout-form > label:nth-child(3),
.checkout-form > label:nth-child(4),
.checkout-form > label:last-of-type {
  grid-column: 1 / -1 !important;
}

.checkout-grid {
  grid-column: 1 / -1 !important;
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 16px !important;
}

.checkout-grid label {
  display: grid !important;
  gap: 8px !important;
  margin: 0 !important;
  color: #06110a !important;
  font-size: 13px !important;
  font-weight: 900 !important;
}

.checkout-form input {
  width: 100% !important;
  min-height: 54px !important;
  border-radius: 17px !important;
  border: 1px solid rgba(16, 66, 38, .18) !important;
  background: rgba(255, 255, 255, .86) !important;
  padding: 0 17px !important;
  font-size: 15px !important;
  font-weight: 750 !important;
  color: #06110a !important;
  outline: none !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .75) !important;
  transition: border-color .18s ease, box-shadow .18s ease, background .18s ease !important;
}

.checkout-form input:focus {
  border-color: rgba(47, 164, 94, .72) !important;
  background: #ffffff !important;
  box-shadow: 0 0 0 4px rgba(47, 164, 94, .12) !important;
}

.checkout-form .button {
  grid-column: 1 / -1 !important;
  justify-self: start !important;
  min-height: 56px !important;
  margin-top: 6px !important;
  padding: 0 30px !important;
  border-radius: 999px !important;
  font-size: 15px !important;
  font-weight: 950 !important;
  background: linear-gradient(135deg, #38b66c, #229b51) !important;
  box-shadow: 0 20px 38px rgba(34, 155, 81, .28) !important;
}

.checkout-page .checkout-summary {
  grid-column: 2 !important;
  grid-row: 1 / span 7 !important;
  position: sticky !important;
  top: 104px !important;
  width: 100% !important;
  max-width: none !important;
  margin: 0 !important;
  padding: 26px !important;
  border-radius: 30px !important;
  border: 1px solid rgba(16, 66, 38, .12) !important;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, .92), rgba(250, 255, 251, .88)) !important;
  box-shadow: 0 24px 80px rgba(7, 17, 11, .1) !important;
  backdrop-filter: blur(18px) !important;
}

.checkout-page .checkout-summary h2 {
  margin: 0 0 18px !important;
  font-size: 36px !important;
  line-height: .95 !important;
  letter-spacing: -.055em !important;
  color: #06110a !important;
}

.checkout-summary-row,
.checkout-summary-total {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto !important;
  gap: 14px !important;
  align-items: start !important;
  padding: 14px 0 !important;
  border-bottom: 1px solid rgba(16, 66, 38, .1) !important;
  color: #06110a !important;
}

.checkout-summary-row span,
.checkout-summary-total span {
  font-size: 14px !important;
  font-weight: 850 !important;
  line-height: 1.35 !important;
}

.checkout-summary-row strong,
.checkout-summary-total strong {
  font-size: 14px !important;
  font-weight: 950 !important;
  white-space: nowrap !important;
}

.checkout-summary-total {
  border-bottom: 0 !important;
  margin-top: 4px !important;
  padding-top: 18px !important;
}

.checkout-summary-total span,
.checkout-summary-total strong {
  font-size: 17px !important;
}

@media (max-width: 980px) {
  .checkout-page .page-width {
    grid-template-columns: 1fr !important;
  }

  .checkout-page .checkout-summary {
    grid-column: 1 !important;
    grid-row: auto !important;
    position: static !important;
  }
}

@media (max-width: 640px) {
  .checkout-page {
    padding-top: 34px !important;
  }

  .checkout-page .page-width {
    width: min(100% - 24px, 1180px) !important;
  }

  .checkout-page h1 {
    font-size: clamp(40px, 14vw, 58px) !important;
  }

  .checkout-form {
    grid-template-columns: 1fr !important;
    padding: 18px !important;
    border-radius: 24px !important;
  }

  .checkout-grid {
    grid-template-columns: 1fr !important;
  }

  .checkout-form .button {
    width: 100% !important;
    justify-self: stretch !important;
  }

  .checkout-page .checkout-summary {
    padding: 20px !important;
    border-radius: 24px !important;
  }

  .checkout-page .checkout-summary h2 {
    font-size: 30px !important;
  }
}

/* Order success redesign */
.order-success-page {
  min-height: 68vh !important;
  padding-top: 72px !important;
  padding-bottom: 96px !important;
  background:
    radial-gradient(circle at 12% 8%, rgba(58, 164, 100, .13), transparent 30%),
    radial-gradient(circle at 88% 14%, rgba(176, 255, 205, .24), transparent 34%),
    linear-gradient(180deg, #f6fbf6 0%, #eef7f0 100%) !important;
}

.order-success-page .page-width {
  max-width: 1180px !important;
  width: min(1180px, calc(100% - 32px)) !important;
}

.order-success-card {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) 390px !important;
  gap: 34px !important;
  align-items: stretch !important;
}

.order-success-main,
.order-success-panel {
  border: 1px solid rgba(16, 66, 38, .12) !important;
  background: rgba(255, 255, 255, .78) !important;
  box-shadow: 0 24px 80px rgba(7, 17, 11, .09) !important;
  backdrop-filter: blur(18px) !important;
}

.order-success-main {
  min-height: 430px !important;
  padding: clamp(30px, 5vw, 58px) !important;
  border-radius: 34px !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
}

.order-success-main .eyebrow {
  margin: 0 0 14px !important;
  font-size: 13px !important;
  letter-spacing: .08em !important;
  text-transform: uppercase !important;
  color: #2fa45e !important;
  font-weight: 950 !important;
}

.order-success-main h1 {
  max-width: 820px !important;
  margin: 0 !important;
  font-size: clamp(48px, 6vw, 86px) !important;
  line-height: .9 !important;
  letter-spacing: -.07em !important;
  color: #06110a !important;
}

.order-success-number {
  margin: 22px 0 0 !important;
  font-size: 16px !important;
  color: rgba(6, 17, 10, .72) !important;
}

.order-success-number strong {
  color: #06110a !important;
  font-weight: 950 !important;
}

.order-success-text {
  max-width: 680px !important;
  margin: 12px 0 0 !important;
  font-size: 16px !important;
  line-height: 1.65 !important;
  color: rgba(6, 17, 10, .68) !important;
}

.order-success-actions {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 12px !important;
  margin-top: 30px !important;
}

.order-success-actions .button {
  min-height: 54px !important;
  padding: 0 28px !important;
  border-radius: 999px !important;
  font-size: 15px !important;
  font-weight: 950 !important;
  background: linear-gradient(135deg, #38b66c, #229b51) !important;
  box-shadow: 0 20px 38px rgba(34, 155, 81, .28) !important;
}

.order-success-actions .button-secondary {
  background: rgba(255, 255, 255, .82) !important;
  color: #06110a !important;
  border: 1px solid rgba(16, 66, 38, .16) !important;
  box-shadow: none !important;
}

.order-success-panel {
  padding: 28px !important;
  border-radius: 34px !important;
}

.order-success-panel h2 {
  margin: 0 0 22px !important;
  font-size: 36px !important;
  line-height: .95 !important;
  letter-spacing: -.055em !important;
  color: #06110a !important;
}

.order-success-step {
  display: grid !important;
  grid-template-columns: 38px minmax(0, 1fr) !important;
  gap: 14px !important;
  padding: 16px 0 !important;
  border-bottom: 1px solid rgba(16, 66, 38, .1) !important;
}

.order-success-step span {
  width: 38px !important;
  height: 38px !important;
  display: grid !important;
  place-items: center !important;
  border-radius: 999px !important;
  background: rgba(47, 164, 94, .12) !important;
  color: #168c43 !important;
  font-weight: 950 !important;
}

.order-success-step strong {
  display: block !important;
  margin-bottom: 4px !important;
  color: #06110a !important;
  font-size: 15px !important;
  font-weight: 950 !important;
}

.order-success-step p {
  margin: 0 !important;
  color: rgba(6, 17, 10, .62) !important;
  font-size: 14px !important;
  line-height: 1.45 !important;
}

.order-success-meta {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 16px !important;
  margin-top: 22px !important;
  padding: 16px 18px !important;
  border-radius: 20px !important;
  background: rgba(47, 164, 94, .08) !important;
  color: #06110a !important;
}

.order-success-meta span {
  font-size: 13px !important;
  font-weight: 850 !important;
  color: rgba(6, 17, 10, .62) !important;
}

.order-success-meta strong {
  font-size: 14px !important;
  font-weight: 950 !important;
  text-transform: uppercase !important;
}

@media (max-width: 980px) {
  .order-success-card {
    grid-template-columns: 1fr !important;
  }

  .order-success-main {
    min-height: auto !important;
  }
}

@media (max-width: 640px) {
  .order-success-page {
    padding-top: 36px !important;
    padding-bottom: 64px !important;
  }

  .order-success-page .page-width {
    width: min(100% - 24px, 1180px) !important;
  }

  .order-success-main,
  .order-success-panel {
    border-radius: 26px !important;
    padding: 22px !important;
  }

  .order-success-main h1 {
    font-size: clamp(42px, 14vw, 60px) !important;
  }

  .order-success-actions .button {
    width: 100% !important;
  }

  .order-success-panel h2 {
    font-size: 30px !important;
  }
}

/* Password reset pages */
.password-reset-page {
  min-height: 68vh !important;
  padding-top: 72px !important;
  padding-bottom: 92px !important;
  background:
    radial-gradient(circle at 12% 8%, rgba(58, 164, 100, .13), transparent 30%),
    radial-gradient(circle at 88% 14%, rgba(176, 255, 205, .24), transparent 34%),
    linear-gradient(180deg, #f6fbf6 0%, #eef7f0 100%) !important;
}

.password-reset-page .page-width {
  max-width: 720px !important;
  width: min(720px, calc(100% - 32px)) !important;
}

.password-reset-card {
  padding: clamp(26px, 5vw, 48px) !important;
  border-radius: 34px !important;
  border: 1px solid rgba(16, 66, 38, .12) !important;
  background: rgba(255, 255, 255, .82) !important;
  box-shadow: 0 24px 80px rgba(7, 17, 11, .09) !important;
  backdrop-filter: blur(18px) !important;
}

.password-reset-card .eyebrow {
  margin: 0 0 12px !important;
  font-size: 13px !important;
  letter-spacing: .08em !important;
  text-transform: uppercase !important;
  color: #2fa45e !important;
  font-weight: 950 !important;
}

.password-reset-card h1 {
  margin: 0 0 16px !important;
  font-size: clamp(44px, 7vw, 68px) !important;
  line-height: .92 !important;
  letter-spacing: -.065em !important;
  color: #06110a !important;
}

.password-reset-card .auth-copy {
  margin: 0 0 22px !important;
  max-width: 560px !important;
  color: rgba(6, 17, 10, .68) !important;
  font-size: 15px !important;
  line-height: 1.6 !important;
}

.password-reset-card .auth-form {
  display: grid !important;
  gap: 16px !important;
}

.password-reset-card .auth-form label {
  display: grid !important;
  gap: 8px !important;
  color: #06110a !important;
  font-size: 13px !important;
  font-weight: 900 !important;
}

.password-reset-card input {
  width: 100% !important;
  min-height: 54px !important;
  border-radius: 17px !important;
  border: 1px solid rgba(16, 66, 38, .18) !important;
  background: rgba(255, 255, 255, .9) !important;
  padding: 0 17px !important;
  font-size: 15px !important;
  font-weight: 750 !important;
  color: #06110a !important;
  outline: none !important;
}

.password-reset-card input:focus {
  border-color: rgba(47, 164, 94, .72) !important;
  box-shadow: 0 0 0 4px rgba(47, 164, 94, .12) !important;
}

.password-reset-card .button {
  justify-self: start !important;
  min-height: 54px !important;
  padding: 0 28px !important;
  border-radius: 999px !important;
  font-size: 15px !important;
  font-weight: 950 !important;
  background: linear-gradient(135deg, #38b66c, #229b51) !important;
  box-shadow: 0 20px 38px rgba(34, 155, 81, .28) !important;
}

.password-reset-card .auth-actions {
  margin-top: 22px !important;
}

.password-reset-card .auth-actions a,
.login-help-link a {
  color: #168c43 !important;
  font-size: 14px !important;
  font-weight: 900 !important;
  text-decoration-thickness: 2px !important;
  text-underline-offset: 3px !important;
}

.login-help-link {
  margin-top: 14px !important;
  text-align: center !important;
}

@media (max-width: 640px) {
  .password-reset-page {
    padding-top: 38px !important;
    padding-bottom: 66px !important;
  }

  .password-reset-card {
    border-radius: 26px !important;
    padding: 22px !important;
  }

  .password-reset-card h1 {
    font-size: clamp(40px, 13vw, 56px) !important;
  }

  .password-reset-card .button {
    width: 100% !important;
    justify-self: stretch !important;
  }
}

/* Password reset compact override */
.password-reset-page {
  min-height: auto !important;
  padding-top: 44px !important;
  padding-bottom: 64px !important;
}

.password-reset-page .page-width {
  max-width: 560px !important;
  width: min(560px, calc(100% - 32px)) !important;
}

.password-reset-card {
  padding: 30px 34px !important;
  border-radius: 26px !important;
  max-width: 560px !important;
  margin: 0 auto !important;
}

.password-reset-card .eyebrow {
  margin-bottom: 8px !important;
  font-size: 12px !important;
}

.password-reset-card h1 {
  margin-bottom: 18px !important;
  font-size: clamp(38px, 5vw, 54px) !important;
  line-height: .95 !important;
  letter-spacing: -.055em !important;
}

.password-reset-card .auth-copy {
  margin-bottom: 18px !important;
  font-size: 14px !important;
  line-height: 1.5 !important;
}

.password-reset-card .alert {
  padding: 13px 16px !important;
  border-radius: 14px !important;
  font-size: 14px !important;
}

.password-reset-card input {
  min-height: 48px !important;
  border-radius: 14px !important;
  font-size: 14px !important;
}

.password-reset-card .button {
  min-height: 48px !important;
  padding: 0 24px !important;
  font-size: 14px !important;
}

.password-reset-card .auth-actions {
  margin-top: 18px !important;
}

@media (max-width: 640px) {
  .password-reset-page {
    padding-top: 28px !important;
    padding-bottom: 46px !important;
  }

  .password-reset-card {
    padding: 22px !important;
    border-radius: 22px !important;
  }

  .password-reset-card h1 {
    font-size: clamp(34px, 11vw, 44px) !important;
  }
}

/* Admin order item preview */
.admin-order-row {
  align-items: stretch !important;
}

.admin-order-main {
  align-items: flex-start !important;
}

.admin-order-main > div {
  min-width: 0 !important;
  flex: 1 1 auto !important;
}

.admin-order-items-preview {
  display: grid !important;
  gap: 8px !important;
  margin-top: 12px !important;
  max-width: 680px !important;
}

.admin-order-preview-item {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto !important;
  gap: 14px !important;
  align-items: start !important;
  padding: 10px 12px !important;
  border-radius: 14px !important;
  border: 1px solid rgba(16, 66, 38, .1) !important;
  background: rgba(246, 251, 246, .9) !important;
}

.admin-order-preview-item strong {
  display: block !important;
  color: #06110a !important;
  font-size: 14px !important;
  font-weight: 950 !important;
  line-height: 1.25 !important;
}

.admin-order-preview-item span {
  display: block !important;
  margin-top: 3px !important;
  color: rgba(6, 17, 10, .64) !important;
  font-size: 13px !important;
  font-weight: 750 !important;
}

.admin-order-preview-item em {
  display: block !important;
  margin-top: 4px !important;
  color: rgba(6, 17, 10, .58) !important;
  font-size: 12px !important;
  font-style: normal !important;
  font-weight: 750 !important;
}

.admin-order-preview-side {
  display: grid !important;
  justify-items: end !important;
  gap: 6px !important;
  white-space: nowrap !important;
}

.admin-order-preview-side strong {
  font-size: 13px !important;
}

.admin-design-mini-badge {
  display: inline-flex !important;
  align-items: center !important;
  min-height: 24px !important;
  padding: 0 9px !important;
  border-radius: 999px !important;
  background: rgba(47, 164, 94, .12) !important;
  color: #168c43 !important;
  font-size: 11px !important;
  font-weight: 950 !important;
  text-transform: uppercase !important;
  letter-spacing: .04em !important;
}

.admin-order-items-preview-empty {
  padding: 10px 12px !important;
  border-radius: 14px !important;
  background: rgba(255, 255, 255, .72) !important;
  color: rgba(6, 17, 10, .55) !important;
  font-size: 13px !important;
  font-weight: 800 !important;
}

.admin-order-detail-link {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-height: 34px !important;
  margin-top: 10px !important;
  padding: 0 14px !important;
  border-radius: 999px !important;
  border: 1px solid rgba(16, 66, 38, .14) !important;
  background: rgba(47, 164, 94, .1) !important;
  color: #168c43 !important;
  font-size: 13px !important;
  font-weight: 900 !important;
  text-decoration: none !important;
}

@media (max-width: 760px) {
  .admin-order-preview-item {
    grid-template-columns: 1fr !important;
  }

  .admin-order-preview-side {
    justify-items: start !important;
  }
}

/* Expandable admin order rows */
.admin-order-row-expandable {
  display: block !important;
  padding: 0 !important;
  overflow: hidden !important;
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease, background .18s ease !important;
}

.admin-order-row-expandable:hover {
  transform: translateY(-2px) !important;
  border-color: rgba(47, 164, 94, .28) !important;
  box-shadow: 0 24px 70px rgba(7, 17, 11, .12) !important;
  background: rgba(255, 255, 255, .94) !important;
}

.admin-order-row-expandable[open] {
  border-color: rgba(47, 164, 94, .34) !important;
  box-shadow: 0 28px 78px rgba(7, 17, 11, .13) !important;
}

.admin-order-summary {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto !important;
  gap: 20px !important;
  align-items: center !important;
  padding: 18px !important;
  cursor: pointer !important;
  list-style: none !important;
}

.admin-order-summary::-webkit-details-marker {
  display: none !important;
}

.admin-order-summary::before {
  content: "›" !important;
  width: 28px !important;
  height: 28px !important;
  display: inline-grid !important;
  place-items: center !important;
  border-radius: 999px !important;
  background: rgba(47, 164, 94, .1) !important;
  color: #168c43 !important;
  font-size: 22px !important;
  font-weight: 900 !important;
  transform: rotate(0deg) !important;
  transition: transform .18s ease !important;
  position: absolute !important;
  margin-left: -42px !important;
}

.admin-order-row-expandable[open] > .admin-order-summary::before {
  transform: rotate(90deg) !important;
}

.admin-order-expanded {
  border-top: 1px solid rgba(16, 66, 38, .1) !important;
  padding: 20px !important;
  background: rgba(246, 251, 246, .72) !important;
}

.admin-order-expanded-grid {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 16px !important;
  margin-bottom: 20px !important;
}

.admin-order-expanded-grid section,
.admin-order-expanded-items {
  border: 1px solid rgba(16, 66, 38, .1) !important;
  border-radius: 20px !important;
  background: rgba(255, 255, 255, .82) !important;
  padding: 16px !important;
}

.admin-order-expanded h4 {
  margin: 0 0 6px !important;
  color: #06110a !important;
  font-size: 14px !important;
  font-weight: 950 !important;
  text-transform: uppercase !important;
  letter-spacing: .04em !important;
}

.admin-order-expanded p {
  margin: 0 !important;
  color: rgba(6, 17, 10, .72) !important;
  font-size: 14px !important;
  line-height: 1.55 !important;
}

.admin-order-expanded a {
  color: #168c43 !important;
  font-weight: 850 !important;
}

.admin-order-expanded-item {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto !important;
  gap: 18px !important;
  align-items: center !important;
  padding: 14px 0 !important;
  border-top: 1px solid rgba(16, 66, 38, .1) !important;
}

.admin-order-expanded-item:first-of-type {
  border-top: 0 !important;
}

.admin-order-expanded-item strong {
  display: block !important;
  color: #06110a !important;
  font-size: 15px !important;
  font-weight: 950 !important;
}

.admin-order-expanded-item span,
.admin-order-expanded-item em {
  display: block !important;
  margin-top: 4px !important;
  color: rgba(6, 17, 10, .64) !important;
  font-size: 13px !important;
  font-style: normal !important;
  font-weight: 750 !important;
}

.admin-order-expanded-side {
  display: grid !important;
  gap: 8px !important;
  justify-items: end !important;
  white-space: nowrap !important;
}

@media (max-width: 980px) {
  .admin-order-summary,
  .admin-order-expanded-item {
    grid-template-columns: 1fr !important;
  }

  .admin-order-expanded-grid {
    grid-template-columns: 1fr !important;
  }

  .admin-order-expanded-side {
    justify-items: start !important;
  }
}

/* Account order details */
.account-page {
  padding-top: 54px !important;
  padding-bottom: 90px !important;
  background:
    radial-gradient(circle at 12% 8%, rgba(58, 164, 100, .1), transparent 28%),
    linear-gradient(180deg, #f6fbf6 0%, #eef7f0 100%) !important;
}

.account-page .page-width {
  max-width: 1120px !important;
  width: min(1120px, calc(100% - 32px)) !important;
}

.account-header {
  display: flex !important;
  justify-content: space-between !important;
  gap: 22px !important;
  align-items: flex-end !important;
  margin-bottom: 28px !important;
}

.account-header h1 {
  margin: 0 !important;
  font-size: clamp(44px, 5.4vw, 72px) !important;
  line-height: .9 !important;
  letter-spacing: -.065em !important;
}

.account-header p {
  margin: 10px 0 0 !important;
  color: rgba(6, 17, 10, .65) !important;
}

.account-grid {
  display: grid !important;
  grid-template-columns: 330px minmax(0, 1fr) !important;
  gap: 22px !important;
  align-items: start !important;
}

.account-card {
  padding: 24px !important;
  border-radius: 28px !important;
  border: 1px solid rgba(16, 66, 38, .12) !important;
  background: rgba(255, 255, 255, .82) !important;
  box-shadow: 0 22px 70px rgba(7, 17, 11, .08) !important;
}

.account-card h2 {
  margin: 0 0 18px !important;
  font-size: 28px !important;
  letter-spacing: -.04em !important;
}

.account-card dl {
  display: grid !important;
  gap: 10px !important;
  margin: 0 !important;
}

.account-card dt {
  color: rgba(6, 17, 10, .55) !important;
  font-size: 12px !important;
  font-weight: 900 !important;
  text-transform: uppercase !important;
  letter-spacing: .04em !important;
}

.account-card dd {
  margin: 0 !important;
  color: #06110a !important;
  font-size: 14px !important;
  font-weight: 850 !important;
}

.account-orders-list {
  display: grid !important;
  gap: 12px !important;
}

.account-order {
  border: 1px solid rgba(16, 66, 38, .12) !important;
  border-radius: 22px !important;
  background: rgba(246, 251, 246, .82) !important;
  overflow: hidden !important;
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease !important;
}

.account-order:hover {
  transform: translateY(-2px) !important;
  border-color: rgba(47, 164, 94, .3) !important;
  box-shadow: 0 18px 48px rgba(7, 17, 11, .1) !important;
}

.account-order summary {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto !important;
  gap: 18px !important;
  align-items: center !important;
  padding: 16px !important;
  cursor: pointer !important;
  list-style: none !important;
}

.account-order summary::-webkit-details-marker {
  display: none !important;
}

.account-order summary strong {
  display: block !important;
  color: #06110a !important;
  font-size: 15px !important;
  font-weight: 950 !important;
}

.account-order summary span {
  display: block !important;
  margin-top: 4px !important;
  color: rgba(6, 17, 10, .62) !important;
  font-size: 13px !important;
  font-weight: 750 !important;
}

.account-order-summary-side {
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
}

.account-status {
  display: inline-flex !important;
  align-items: center !important;
  min-height: 28px !important;
  padding: 0 11px !important;
  border-radius: 999px !important;
  background: rgba(47, 164, 94, .12) !important;
  color: #168c43 !important;
  font-size: 12px !important;
  font-weight: 950 !important;
}

.account-order-body {
  border-top: 1px solid rgba(16, 66, 38, .1) !important;
  padding: 18px !important;
  background: rgba(255, 255, 255, .72) !important;
}

.account-order-body h3 {
  margin: 0 0 6px !important;
  font-size: 14px !important;
  text-transform: uppercase !important;
  letter-spacing: .04em !important;
}

.account-order-address {
  margin-bottom: 18px !important;
}

.account-order-address p {
  margin: 0 !important;
  color: rgba(6, 17, 10, .72) !important;
  line-height: 1.55 !important;
}

.account-order-items {
  display: grid !important;
  gap: 10px !important;
}

.account-order-item {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto !important;
  gap: 16px !important;
  padding: 12px !important;
  border-radius: 16px !important;
  background: rgba(246, 251, 246, .9) !important;
  border: 1px solid rgba(16, 66, 38, .1) !important;
}

.account-order-item span,
.account-order-item em {
  display: block !important;
  margin-top: 4px !important;
  color: rgba(6, 17, 10, .62) !important;
  font-size: 13px !important;
  font-style: normal !important;
  font-weight: 750 !important;
}

@media (max-width: 900px) {
  .account-grid {
    grid-template-columns: 1fr !important;
  }

  .account-header,
  .account-order summary,
  .account-order-item {
    grid-template-columns: 1fr !important;
  }

  .account-header {
    display: grid !important;
  }

  .account-order-summary-side {
    justify-content: space-between !important;
  }
}

/* Final expandable admin orders */
.admin-orders-list {
  display: grid !important;
  gap: 14px !important;
}

.admin-order-row-expandable {
  display: block !important;
  padding: 0 !important;
  overflow: hidden !important;
  border-radius: 22px !important;
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease, background .18s ease !important;
}

.admin-order-row-expandable:hover {
  transform: translateY(-2px) !important;
  border-color: rgba(47, 164, 94, .28) !important;
  box-shadow: 0 24px 70px rgba(7, 17, 11, .12) !important;
  background: rgba(255, 255, 255, .95) !important;
}

.admin-order-row-expandable[open] {
  border-color: rgba(47, 164, 94, .34) !important;
  box-shadow: 0 28px 78px rgba(7, 17, 11, .13) !important;
}

.admin-order-summary {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto !important;
  gap: 20px !important;
  align-items: center !important;
  padding: 18px !important;
  cursor: pointer !important;
  list-style: none !important;
}

.admin-order-summary::-webkit-details-marker {
  display: none !important;
}

.admin-order-summary::before {
  content: "›" !important;
  display: inline-grid !important;
  place-items: center !important;
  width: 24px !important;
  height: 24px !important;
  border-radius: 999px !important;
  background: rgba(47, 164, 94, .11) !important;
  color: #168c43 !important;
  font-size: 20px !important;
  font-weight: 950 !important;
  position: absolute !important;
  margin-left: -34px !important;
  transition: transform .18s ease !important;
}

.admin-order-row-expandable[open] > .admin-order-summary::before {
  transform: rotate(90deg) !important;
}

.admin-order-expanded {
  border-top: 1px solid rgba(16, 66, 38, .1) !important;
  padding: 20px !important;
  background: rgba(246, 251, 246, .78) !important;
}

.admin-order-expanded-grid {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 16px !important;
  margin-bottom: 18px !important;
}

.admin-order-expanded-grid section,
.admin-order-expanded-items {
  padding: 16px !important;
  border-radius: 20px !important;
  border: 1px solid rgba(16, 66, 38, .1) !important;
  background: rgba(255, 255, 255, .86) !important;
}

.admin-order-expanded h4 {
  margin: 0 0 6px !important;
  color: #06110a !important;
  font-size: 13px !important;
  font-weight: 950 !important;
  text-transform: uppercase !important;
  letter-spacing: .04em !important;
}

.admin-order-expanded p {
  margin: 0 !important;
  color: rgba(6, 17, 10, .72) !important;
  font-size: 14px !important;
  line-height: 1.55 !important;
}

.admin-order-expanded a {
  color: #168c43 !important;
  font-weight: 850 !important;
}

.admin-order-expanded-item {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto !important;
  gap: 18px !important;
  align-items: center !important;
  padding: 14px 0 !important;
  border-top: 1px solid rgba(16, 66, 38, .1) !important;
}

.admin-order-expanded-item:first-of-type {
  border-top: 0 !important;
}

.admin-order-expanded-item strong {
  display: block !important;
  color: #06110a !important;
  font-size: 15px !important;
  font-weight: 950 !important;
}

.admin-order-expanded-item span,
.admin-order-expanded-item em {
  display: block !important;
  margin-top: 4px !important;
  color: rgba(6, 17, 10, .64) !important;
  font-size: 13px !important;
  font-style: normal !important;
  font-weight: 750 !important;
}

.admin-order-expanded-side {
  display: grid !important;
  gap: 8px !important;
  justify-items: end !important;
  white-space: nowrap !important;
}

.admin-order-status-form select option:checked {
  font-weight: 900 !important;
}

@media (max-width: 980px) {
  .admin-order-summary,
  .admin-order-expanded-item {
    grid-template-columns: 1fr !important;
  }

  .admin-order-expanded-grid {
    grid-template-columns: 1fr !important;
  }

  .admin-order-expanded-side {
    justify-items: start !important;
  }
}

/* Admin order UI final cleanup */
.admin-order-summary::before {
  display: none !important;
  content: none !important;
}

.admin-order-row-expandable {
  cursor: pointer !important;
}

.admin-order-summary {
  position: relative !important;
  padding-left: 20px !important;
}

.admin-order-row-expandable:hover {
  transform: translateY(-3px) !important;
  border-color: rgba(47, 164, 94, .42) !important;
  box-shadow: 0 26px 74px rgba(7, 17, 11, .14) !important;
  background: #ffffff !important;
}

.admin-order-row-expandable:hover .admin-order-summary h3 {
  color: #168c43 !important;
}

.admin-order-row-expandable[open] {
  border-color: rgba(47, 164, 94, .38) !important;
  background: rgba(255, 255, 255, .96) !important;
}

.admin-order-status-form .button,
.admin-order-status-form button,
.admin-order-expanded-side .button,
.admin-order-expanded-items .button,
.admin-order-expanded .button,
a.button[href*="admin-design.php"] {
  color: #ffffff !important;
  background: linear-gradient(135deg, #38b66c, #229b51) !important;
  border-color: transparent !important;
  text-shadow: none !important;
}

.admin-order-status-form .button:hover,
.admin-order-status-form button:hover,
.admin-order-expanded-side .button:hover,
.admin-order-expanded-items .button:hover,
.admin-order-expanded .button:hover,
a.button[href*="admin-design.php"]:hover {
  color: #ffffff !important;
  background: linear-gradient(135deg, #229b51, #168c43) !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 18px 36px rgba(34, 155, 81, .28) !important;
}

.admin-order-status-form select {
  cursor: pointer !important;
}

.admin-order-status-form select:hover {
  border-color: rgba(47, 164, 94, .42) !important;
  box-shadow: 0 0 0 4px rgba(47, 164, 94, .09) !important;
}

.admin-order-expanded-item:hover {
  background: rgba(246, 251, 246, .95) !important;
}

.admin-order-expanded-side .button {
  min-width: 154px !important;
  justify-content: center !important;
}

/* Admin design pages hard layout fix */
.admin-design-shell {
  max-width: 1440px !important;
  width: min(1440px, calc(100% - 40px)) !important;
  margin: 0 auto !important;
  padding: 32px 0 70px !important;
  display: grid !important;
  grid-template-columns: 230px minmax(0, 1fr) !important;
  gap: 28px !important;
  align-items: start !important;
}

.admin-design-shell .admin-sidebar {
  position: sticky !important;
  top: 24px !important;
  width: 230px !important;
  min-width: 230px !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 9px !important;
  padding: 0 !important;
  margin: 0 !important;
}

.admin-design-shell .admin-sidebar strong {
  display: block !important;
  margin: 0 0 18px !important;
  font-size: 30px !important;
  line-height: 1 !important;
  letter-spacing: -.045em !important;
  color: #06110a !important;
}

.admin-design-shell .admin-sidebar a {
  width: 100% !important;
  min-height: 39px !important;
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  padding: 0 15px !important;
  border-radius: 14px !important;
  border: 1px solid rgba(16, 66, 38, .14) !important;
  background: rgba(255, 255, 255, .82) !important;
  color: #06110a !important;
  font-size: 14px !important;
  font-weight: 760 !important;
  text-decoration: none !important;
  box-sizing: border-box !important;
  transition: background .18s ease, color .18s ease, border-color .18s ease, transform .18s ease !important;
}

.admin-design-shell .admin-sidebar a:hover {
  transform: translateY(-1px) !important;
  border-color: rgba(47, 164, 94, .34) !important;
  background: rgba(246, 251, 246, .96) !important;
  color: #168c43 !important;
}

.admin-design-shell .admin-sidebar a.is-active {
  border-color: rgba(47, 164, 94, .34) !important;
  background: rgba(47, 164, 94, .14) !important;
  color: #168c43 !important;
}

.admin-design-shell .admin-main {
  min-width: 0 !important;
  width: 100% !important;
}

.admin-design-shell .admin-page-header {
  display: flex !important;
  justify-content: space-between !important;
  align-items: flex-end !important;
  gap: 20px !important;
  margin-bottom: 24px !important;
}

.admin-design-shell .admin-page-header .eyebrow {
  margin: 0 0 8px !important;
  color: #2fa45e !important;
  font-size: 13px !important;
  font-weight: 950 !important;
  text-transform: uppercase !important;
  letter-spacing: .08em !important;
}

.admin-design-shell .admin-page-header h1 {
  margin: 0 !important;
  font-size: clamp(42px, 4.8vw, 68px) !important;
  line-height: .9 !important;
  letter-spacing: -.065em !important;
  color: #06110a !important;
}

.admin-design-shell .admin-page-header p {
  margin: 12px 0 0 !important;
  color: rgba(6, 17, 10, .68) !important;
  font-size: 15px !important;
  line-height: 1.5 !important;
}

.admin-design-shell .button,
.admin-design-shell a.button {
  color: #ffffff !important;
  background: linear-gradient(135deg, #38b66c, #229b51) !important;
  border-color: transparent !important;
  box-shadow: 0 16px 34px rgba(34, 155, 81, .24) !important;
}

.admin-design-shell .button:hover,
.admin-design-shell a.button:hover {
  color: #ffffff !important;
  background: linear-gradient(135deg, #229b51, #168c43) !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 20px 42px rgba(34, 155, 81, .3) !important;
}

.admin-design-shell .admin-design-grid {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 22px !important;
  margin-top: 24px !important;
}

.admin-design-shell .admin-design-view {
  min-width: 0 !important;
  padding: 18px !important;
  border-radius: 26px !important;
  border: 1px solid rgba(16, 66, 38, .12) !important;
  background: rgba(255, 255, 255, .88) !important;
  box-shadow: 0 20px 60px rgba(7, 17, 11, .08) !important;
  overflow: hidden !important;
}

.admin-design-shell .admin-design-view h2 {
  margin: 0 0 14px !important;
  font-size: 20px !important;
  line-height: 1 !important;
  letter-spacing: -.03em !important;
  color: #06110a !important;
}

.admin-design-shell .admin-design-view canvas {
  display: block !important;
  width: 100% !important;
  max-width: 100% !important;
  height: auto !important;
  aspect-ratio: 6 / 7 !important;
  border-radius: 18px !important;
  background: #f4f4f2 !important;
}

.admin-design-shell .admin-design-assets,
.admin-design-shell .admin-design-json {
  margin-top: 28px !important;
  padding: 22px !important;
  border-radius: 26px !important;
  border: 1px solid rgba(16, 66, 38, .12) !important;
  background: rgba(255, 255, 255, .86) !important;
  box-shadow: 0 18px 50px rgba(7, 17, 11, .07) !important;
}

.admin-design-shell .admin-design-assets h2,
.admin-design-shell .admin-design-json summary {
  margin: 0 0 16px !important;
  font-size: 24px !important;
  font-weight: 950 !important;
  color: #06110a !important;
}

.admin-design-shell .admin-design-json pre {
  max-height: 420px !important;
  overflow: auto !important;
  padding: 16px !important;
  border-radius: 18px !important;
  background: #07110b !important;
  color: #dff8e5 !important;
  font-size: 12px !important;
}

/* Designs sidebar icon fix */
.admin-sidebar a[href*="admin-designs.php"]::before,
.admin-sidebar a[href*="admin-design.php"]::before {
  content: "" !important;
  width: 17px !important;
  height: 17px !important;
  flex: 0 0 17px !important;
  background: currentColor !important;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='4' y='4' width='7' height='7' rx='1.5'/%3E%3Crect x='13' y='4' width='7' height='7' rx='1.5'/%3E%3Crect x='4' y='13' width='7' height='7' rx='1.5'/%3E%3Cpath d='M15 15h5M15 19h5'/%3E%3C/svg%3E") center / contain no-repeat !important;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='4' y='4' width='7' height='7' rx='1.5'/%3E%3Crect x='13' y='4' width='7' height='7' rx='1.5'/%3E%3Crect x='4' y='13' width='7' height='7' rx='1.5'/%3E%3Cpath d='M15 15h5M15 19h5'/%3E%3C/svg%3E") center / contain no-repeat !important;
}

@media (max-width: 980px) {
  .admin-design-shell {
    width: min(100% - 24px, 1440px) !important;
    grid-template-columns: 1fr !important;
    padding-top: 22px !important;
  }

  .admin-design-shell .admin-sidebar {
    position: static !important;
    width: 100% !important;
    min-width: 0 !important;
  }

  .admin-design-shell .admin-design-grid {
    grid-template-columns: 1fr !important;
  }

  .admin-design-shell .admin-page-header {
    display: grid !important;
    align-items: start !important;
  }
}

/* Admin design assets compact */
.admin-design-shell .admin-design-assets {
  padding: 22px !important;
}

.admin-design-shell .admin-design-assets h2 {
  margin: 0 0 18px !important;
  font-size: 24px !important;
}

.admin-design-shell .admin-design-assets .admin-card-grid {
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)) !important;
  gap: 14px !important;
}

.admin-design-shell .admin-design-assets .admin-product-card {
  display: grid !important;
  grid-template-columns: 74px minmax(0, 1fr) !important;
  gap: 14px !important;
  align-items: center !important;
  min-height: 104px !important;
  padding: 14px !important;
  border-radius: 18px !important;
  border: 1px solid rgba(16, 66, 38, .1) !important;
  background: rgba(246, 251, 246, .82) !important;
  box-shadow: none !important;
}

.admin-design-shell .admin-design-assets .admin-product-card:hover {
  border-color: rgba(47, 164, 94, .28) !important;
  background: rgba(255, 255, 255, .95) !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 16px 34px rgba(7, 17, 11, .08) !important;
}

.admin-design-shell .admin-design-assets .admin-product-card img {
  width: 74px !important;
  height: 74px !important;
  max-width: 74px !important;
  max-height: 74px !important;
  object-fit: contain !important;
  border-radius: 12px !important;
  background: #ffffff !important;
  padding: 6px !important;
  border: 1px solid rgba(16, 66, 38, .08) !important;
}

.admin-design-shell .admin-design-assets .admin-product-card div {
  min-width: 0 !important;
}

.admin-design-shell .admin-design-assets .admin-product-card strong {
  display: block !important;
  margin: 0 0 4px !important;
  color: #06110a !important;
  font-size: 14px !important;
  font-weight: 950 !important;
}

.admin-design-shell .admin-design-assets .admin-product-card p {
  margin: 0 0 6px !important;
  max-width: 100% !important;
  color: rgba(6, 17, 10, .58) !important;
  font-size: 12px !important;
  line-height: 1.35 !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

.admin-design-shell .admin-design-assets .admin-product-card .button {
  min-height: 34px !important;
  padding: 0 13px !important;
  border-radius: 999px !important;
  font-size: 12px !important;
  font-weight: 950 !important;
  box-shadow: 0 10px 22px rgba(34, 155, 81, .18) !important;
}

@media (max-width: 640px) {
  .admin-design-shell .admin-design-assets .admin-card-grid {
    grid-template-columns: 1fr !important;
  }

  .admin-design-shell .admin-design-assets .admin-product-card {
    grid-template-columns: 64px minmax(0, 1fr) !important;
  }

  .admin-design-shell .admin-design-assets .admin-product-card img {
    width: 64px !important;
    height: 64px !important;
    max-width: 64px !important;
    max-height: 64px !important;
  }
}

/* Compact admin design pages, final override */
.admin-design-shell-compact {
  max-width: 1180px !important;
  width: min(1180px, calc(100% - 40px)) !important;
  margin: 0 auto !important;
  padding: 28px 0 56px !important;
  display: grid !important;
  grid-template-columns: 220px minmax(0, 1fr) !important;
  gap: 26px !important;
  align-items: start !important;
}

.admin-design-shell-compact .admin-sidebar {
  width: 220px !important;
  min-width: 220px !important;
  position: sticky !important;
  top: 22px !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 8px !important;
  margin: 0 !important;
  padding: 0 !important;
}

.admin-design-shell-compact .admin-sidebar strong {
  margin: 0 0 18px !important;
  font-size: 27px !important;
  line-height: 1 !important;
  letter-spacing: -.045em !important;
}

.admin-design-shell-compact .admin-sidebar a {
  min-height: 38px !important;
  padding: 0 14px !important;
  border-radius: 13px !important;
  font-size: 14px !important;
  font-weight: 760 !important;
}

.admin-design-shell-compact .admin-main {
  min-width: 0 !important;
  width: 100% !important;
}

.admin-design-shell-compact .admin-page-header {
  display: flex !important;
  align-items: flex-end !important;
  justify-content: space-between !important;
  gap: 20px !important;
  margin: 0 0 20px !important;
}

.admin-design-shell-compact .admin-page-header .eyebrow {
  margin: 0 0 6px !important;
  font-size: 12px !important;
  font-weight: 950 !important;
  letter-spacing: .08em !important;
  text-transform: uppercase !important;
  color: #2fa45e !important;
}

.admin-design-shell-compact .admin-page-header h1 {
  margin: 0 !important;
  font-size: clamp(34px, 3.8vw, 48px) !important;
  line-height: .95 !important;
  letter-spacing: -.055em !important;
  color: #06110a !important;
}

.admin-design-shell-compact .admin-page-header p {
  margin: 8px 0 0 !important;
  font-size: 14px !important;
  line-height: 1.45 !important;
  color: rgba(6, 17, 10, .66) !important;
}

.admin-design-shell-compact .button,
.admin-design-shell-compact a.button {
  min-height: 42px !important;
  padding: 0 18px !important;
  border-radius: 999px !important;
  font-size: 13px !important;
  font-weight: 950 !important;
  color: #ffffff !important;
  background: linear-gradient(135deg, #38b66c, #229b51) !important;
  border-color: transparent !important;
  box-shadow: 0 12px 26px rgba(34, 155, 81, .22) !important;
}

.admin-design-shell-compact .button:hover,
.admin-design-shell-compact a.button:hover {
  color: #ffffff !important;
  background: linear-gradient(135deg, #229b51, #168c43) !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 18px 34px rgba(34, 155, 81, .28) !important;
}

/* Kunden-Designs list */
.admin-design-shell-compact .admin-card-grid {
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(270px, 1fr)) !important;
  gap: 14px !important;
  margin-top: 18px !important;
}

.admin-design-shell-compact .admin-product-card {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto !important;
  gap: 14px !important;
  align-items: center !important;
  min-height: 112px !important;
  padding: 16px !important;
  border-radius: 20px !important;
  border: 1px solid rgba(16, 66, 38, .12) !important;
  background: rgba(255, 255, 255, .86) !important;
  box-shadow: 0 16px 42px rgba(7, 17, 11, .06) !important;
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease !important;
}

.admin-design-shell-compact .admin-product-card:hover {
  transform: translateY(-2px) !important;
  border-color: rgba(47, 164, 94, .28) !important;
  box-shadow: 0 20px 52px rgba(7, 17, 11, .09) !important;
}

.admin-design-shell-compact .admin-product-card h3 {
  margin: 0 0 6px !important;
  font-size: 17px !important;
  line-height: 1.15 !important;
  letter-spacing: -.025em !important;
}

.admin-design-shell-compact .admin-product-card p {
  margin: 3px 0 !important;
  font-size: 13px !important;
  line-height: 1.35 !important;
  color: rgba(6, 17, 10, .68) !important;
}

.admin-design-shell-compact .admin-product-card .button {
  min-width: 128px !important;
  min-height: 38px !important;
  padding: 0 14px !important;
  font-size: 12px !important;
}

/* Design detail canvas area */
.admin-design-shell-compact .admin-design-grid {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 16px !important;
  margin-top: 18px !important;
}

.admin-design-shell-compact .admin-design-view {
  min-width: 0 !important;
  padding: 14px !important;
  border-radius: 22px !important;
  border: 1px solid rgba(16, 66, 38, .12) !important;
  background: rgba(255, 255, 255, .88) !important;
  box-shadow: 0 16px 42px rgba(7, 17, 11, .06) !important;
  overflow: hidden !important;
}

.admin-design-shell-compact .admin-design-view h2 {
  margin: 0 0 6px !important;
  font-size: 17px !important;
  line-height: 1.1 !important;
  letter-spacing: -.025em !important;
}

.admin-design-shell-compact .admin-design-view canvas {
  display: block !important;
  width: 100% !important;
  max-width: 100% !important;
  height: auto !important;
  aspect-ratio: 6 / 7 !important;
  max-height: 540px !important;
  object-fit: contain !important;
  border-radius: 16px !important;
  background: #f4f4f2 !important;
}

/* Uploaded assets compact */
.admin-design-shell-compact .admin-design-assets,
.admin-design-shell-compact .admin-design-json {
  margin-top: 18px !important;
  padding: 18px !important;
  border-radius: 22px !important;
  border: 1px solid rgba(16, 66, 38, .12) !important;
  background: rgba(255, 255, 255, .86) !important;
  box-shadow: 0 16px 42px rgba(7, 17, 11, .06) !important;
}

.admin-design-shell-compact .admin-design-assets h2,
.admin-design-shell-compact .admin-design-json summary {
  margin: 0 0 14px !important;
  font-size: 20px !important;
  line-height: 1.1 !important;
  font-weight: 950 !important;
}

.admin-design-shell-compact .admin-design-assets .admin-card-grid {
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)) !important;
  gap: 12px !important;
}

.admin-design-shell-compact .admin-design-assets .admin-product-card {
  grid-template-columns: 64px minmax(0, 1fr) !important;
  min-height: 92px !important;
  padding: 12px !important;
  box-shadow: none !important;
}

.admin-design-shell-compact .admin-design-assets .admin-product-card img {
  width: 64px !important;
  height: 64px !important;
  max-width: 64px !important;
  max-height: 64px !important;
  object-fit: contain !important;
  border-radius: 11px !important;
  background: #ffffff !important;
  padding: 5px !important;
  border: 1px solid rgba(16, 66, 38, .08) !important;
}

.admin-design-shell-compact .admin-design-assets .admin-product-card strong {
  margin: 0 0 3px !important;
  font-size: 13px !important;
}

.admin-design-shell-compact .admin-design-assets .admin-product-card p {
  margin: 0 0 8px !important;
  max-width: 100% !important;
  font-size: 11px !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

.admin-design-shell-compact .admin-design-assets .admin-product-card .button {
  min-height: 32px !important;
  min-width: auto !important;
  padding: 0 12px !important;
  font-size: 11px !important;
}

.admin-design-shell-compact .admin-design-json pre {
  max-height: 320px !important;
  overflow: auto !important;
  padding: 14px !important;
  border-radius: 16px !important;
  background: #07110b !important;
  color: #dff8e5 !important;
  font-size: 11px !important;
}

/* Hide accidental public header brand space on admin design pages if present */
.admin-design-shell-compact ~ .site-footer {
  margin-top: 0 !important;
}

@media (max-width: 980px) {
  .admin-design-shell-compact {
    width: min(100% - 24px, 1180px) !important;
    grid-template-columns: 1fr !important;
    padding-top: 22px !important;
  }

  .admin-design-shell-compact .admin-sidebar {
    width: 100% !important;
    min-width: 0 !important;
    position: static !important;
  }

  .admin-design-shell-compact .admin-page-header {
    display: grid !important;
    align-items: start !important;
  }

  .admin-design-shell-compact .admin-design-grid {
    grid-template-columns: 1fr !important;
  }

  .admin-design-shell-compact .admin-product-card {
    grid-template-columns: 1fr !important;
  }
}

/* Shared backoffice layout for all admin subpages */
body:has(.admin-shell) .site-header,
body:has(.admin-shell) .site-footer {
  display: none !important;
}

body:has(.admin-shell) {
  background:
    radial-gradient(circle at 12% 8%, rgba(58, 164, 100, .08), transparent 28%),
    linear-gradient(180deg, #f6fbf6 0%, #eef7f0 100%) !important;
}

.admin-shell:has(.backoffice-sidebar) {
  max-width: 1180px !important;
  width: min(1180px, calc(100% - 40px)) !important;
  margin: 0 auto !important;
  padding: 34px 0 70px !important;
  display: grid !important;
  grid-template-columns: 220px minmax(0, 1fr) !important;
  gap: 28px !important;
  align-items: start !important;
}

.admin-shell:has(.backoffice-sidebar) .admin-main {
  min-width: 0 !important;
  width: 100% !important;
}

.backoffice-sidebar {
  position: sticky !important;
  top: 28px !important;
  width: 220px !important;
  min-width: 220px !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 8px !important;
  margin: 0 !important;
  padding: 0 !important;
}

.backoffice-sidebar .admin-role-pill {
  align-self: flex-start !important;
  display: inline-flex !important;
  align-items: center !important;
  min-height: 34px !important;
  padding: 0 15px !important;
  margin-bottom: 8px !important;
  border-radius: 999px !important;
  border: 1px solid rgba(16, 66, 38, .14) !important;
  background: rgba(255, 255, 255, .75) !important;
  color: #06110a !important;
  font-size: 14px !important;
  font-weight: 760 !important;
}

.backoffice-sidebar .admin-sidebar-title {
  display: block !important;
  margin: 0 0 24px !important;
  color: #06110a !important;
  font-size: 30px !important;
  line-height: 1 !important;
  letter-spacing: -.045em !important;
  font-weight: 950 !important;
}

.backoffice-sidebar a {
  width: 100% !important;
  min-height: 39px !important;
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  padding: 0 15px !important;
  border-radius: 14px !important;
  border: 1px solid rgba(16, 66, 38, .14) !important;
  background: rgba(255, 255, 255, .82) !important;
  color: #06110a !important;
  font-size: 14px !important;
  font-weight: 760 !important;
  text-decoration: none !important;
  box-sizing: border-box !important;
  transition: background .18s ease, color .18s ease, border-color .18s ease, transform .18s ease !important;
}

.backoffice-sidebar a:hover {
  transform: translateY(-1px) !important;
  border-color: rgba(47, 164, 94, .34) !important;
  background: rgba(246, 251, 246, .96) !important;
  color: #168c43 !important;
}

.backoffice-sidebar a.is-active {
  border-color: rgba(47, 164, 94, .34) !important;
  background: rgba(47, 164, 94, .14) !important;
  color: #168c43 !important;
}

.backoffice-sidebar .admin-sidebar-logout {
  margin-top: 14px !important;
  color: #9b1c1c !important;
}

/* Admin content header density */
.admin-shell:has(.backoffice-sidebar) .admin-page-header {
  display: flex !important;
  justify-content: space-between !important;
  align-items: flex-end !important;
  gap: 20px !important;
  margin: 0 0 20px !important;
}

.admin-shell:has(.backoffice-sidebar) .admin-page-header .eyebrow {
  margin: 0 0 7px !important;
  font-size: 12px !important;
  font-weight: 950 !important;
  letter-spacing: .08em !important;
  text-transform: uppercase !important;
  color: #2fa45e !important;
}

.admin-shell:has(.backoffice-sidebar) .admin-page-header h1 {
  margin: 0 !important;
  color: #06110a !important;
  font-size: clamp(34px, 3.8vw, 48px) !important;
  line-height: .95 !important;
  letter-spacing: -.055em !important;
}

.admin-shell:has(.backoffice-sidebar) .admin-page-header p {
  margin: 8px 0 0 !important;
  color: rgba(6, 17, 10, .66) !important;
  font-size: 14px !important;
  line-height: 1.45 !important;
}

/* Designs list uses normal admin card density */
.admin-shell:has(.backoffice-sidebar) .admin-card-grid {
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(310px, 1fr)) !important;
  gap: 14px !important;
  margin-top: 18px !important;
}

.admin-shell:has(.backoffice-sidebar) .admin-product-card {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto !important;
  gap: 16px !important;
  align-items: center !important;
  min-height: 104px !important;
  padding: 16px !important;
  border-radius: 20px !important;
  border: 1px solid rgba(16, 66, 38, .12) !important;
  background: rgba(255, 255, 255, .86) !important;
  box-shadow: 0 16px 42px rgba(7, 17, 11, .06) !important;
}

.admin-shell:has(.backoffice-sidebar) .admin-product-card:hover {
  transform: translateY(-2px) !important;
  border-color: rgba(47, 164, 94, .28) !important;
  box-shadow: 0 20px 52px rgba(7, 17, 11, .09) !important;
}

.admin-shell:has(.backoffice-sidebar) .admin-product-card h3 {
  margin: 0 0 6px !important;
  font-size: 17px !important;
  line-height: 1.15 !important;
  letter-spacing: -.025em !important;
}

.admin-shell:has(.backoffice-sidebar) .admin-product-card p {
  margin: 3px 0 !important;
  color: rgba(6, 17, 10, .68) !important;
  font-size: 13px !important;
  line-height: 1.35 !important;
}

.admin-shell:has(.backoffice-sidebar) .button,
.admin-shell:has(.backoffice-sidebar) a.button {
  min-height: 42px !important;
  padding: 0 18px !important;
  border-radius: 999px !important;
  color: #ffffff !important;
  background: linear-gradient(135deg, #38b66c, #229b51) !important;
  border-color: transparent !important;
  font-size: 13px !important;
  font-weight: 950 !important;
  box-shadow: 0 12px 26px rgba(34, 155, 81, .22) !important;
}

.admin-shell:has(.backoffice-sidebar) .button:hover,
.admin-shell:has(.backoffice-sidebar) a.button:hover {
  color: #ffffff !important;
  background: linear-gradient(135deg, #229b51, #168c43) !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 18px 34px rgba(34, 155, 81, .28) !important;
}

/* Design detail, only the right content differs */
.admin-shell:has(.backoffice-sidebar) .admin-design-grid {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 16px !important;
  margin-top: 18px !important;
}

.admin-shell:has(.backoffice-sidebar) .admin-design-view {
  min-width: 0 !important;
  padding: 14px !important;
  border-radius: 20px !important;
  border: 1px solid rgba(16, 66, 38, .12) !important;
  background: rgba(255, 255, 255, .88) !important;
  box-shadow: 0 16px 42px rgba(7, 17, 11, .06) !important;
  overflow: hidden !important;
}

.admin-shell:has(.backoffice-sidebar) .admin-design-view h2 {
  margin: 0 0 6px !important;
  color: #06110a !important;
  font-size: 17px !important;
  line-height: 1.1 !important;
  letter-spacing: -.025em !important;
}

.admin-shell:has(.backoffice-sidebar) .admin-design-view canvas {
  display: block !important;
  width: 100% !important;
  max-width: 100% !important;
  height: auto !important;
  aspect-ratio: 6 / 7 !important;
  border-radius: 16px !important;
  background: #f4f4f2 !important;
}

/* Uploaded motifs compact */
.admin-shell:has(.backoffice-sidebar) .admin-design-assets,
.admin-shell:has(.backoffice-sidebar) .admin-design-json {
  margin-top: 18px !important;
  padding: 18px !important;
  border-radius: 20px !important;
  border: 1px solid rgba(16, 66, 38, .12) !important;
  background: rgba(255, 255, 255, .86) !important;
  box-shadow: 0 16px 42px rgba(7, 17, 11, .06) !important;
}

.admin-shell:has(.backoffice-sidebar) .admin-design-assets h2,
.admin-shell:has(.backoffice-sidebar) .admin-design-json summary {
  margin: 0 0 14px !important;
  color: #06110a !important;
  font-size: 20px !important;
  line-height: 1.1 !important;
  font-weight: 950 !important;
}

.admin-shell:has(.backoffice-sidebar) .admin-design-assets .admin-card-grid {
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)) !important;
  gap: 12px !important;
}

.admin-shell:has(.backoffice-sidebar) .admin-design-assets .admin-product-card {
  grid-template-columns: 64px minmax(0, 1fr) !important;
  min-height: 92px !important;
  padding: 12px !important;
  box-shadow: none !important;
}

.admin-shell:has(.backoffice-sidebar) .admin-design-assets .admin-product-card img {
  width: 64px !important;
  height: 64px !important;
  max-width: 64px !important;
  max-height: 64px !important;
  object-fit: contain !important;
  border-radius: 11px !important;
  background: #ffffff !important;
  padding: 5px !important;
  border: 1px solid rgba(16, 66, 38, .08) !important;
}

.admin-shell:has(.backoffice-sidebar) .admin-design-assets .admin-product-card p {
  margin: 0 0 8px !important;
  max-width: 100% !important;
  font-size: 11px !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

.admin-shell:has(.backoffice-sidebar) .admin-design-json pre {
  max-height: 320px !important;
  overflow: auto !important;
  padding: 14px !important;
  border-radius: 16px !important;
  background: #07110b !important;
  color: #dff8e5 !important;
  font-size: 11px !important;
}

@media (max-width: 980px) {
  .admin-shell:has(.backoffice-sidebar) {
    width: min(100% - 24px, 1180px) !important;
    grid-template-columns: 1fr !important;
    padding-top: 22px !important;
  }

  .backoffice-sidebar {
    position: static !important;
    width: 100% !important;
    min-width: 0 !important;
  }

  .admin-shell:has(.backoffice-sidebar) .admin-page-header {
    display: grid !important;
    align-items: start !important;
  }

  .admin-shell:has(.backoffice-sidebar) .admin-design-grid {
    grid-template-columns: 1fr !important;
  }

  .admin-shell:has(.backoffice-sidebar) .admin-product-card {
    grid-template-columns: 1fr !important;
  }
}

/* Restore global header/footer after admin shell override */
body:has(.admin-shell) .site-header {
  display: block !important;
}

body:has(.admin-shell) .site-footer {
  display: block !important;
}

/* Keep admin pages visually aligned below normal header */
.admin-shell:has(.backoffice-sidebar),
.admin-shell {
  margin-top: 0 !important;
}

/* Designs integrated into admin.php, right content only */
.admin-designs-inline-grid {
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(330px, 1fr)) !important;
  gap: 14px !important;
  margin-top: 18px !important;
}

.admin-design-inline-card {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto !important;
  gap: 16px !important;
  align-items: center !important;
  padding: 16px !important;
  border-radius: 20px !important;
  border: 1px solid rgba(16, 66, 38, .12) !important;
  background: rgba(255, 255, 255, .86) !important;
  box-shadow: 0 16px 42px rgba(7, 17, 11, .06) !important;
  transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease !important;
}

.admin-design-inline-card:hover {
  transform: translateY(-2px) !important;
  border-color: rgba(47, 164, 94, .28) !important;
  box-shadow: 0 20px 52px rgba(7, 17, 11, .09) !important;
}

.admin-design-inline-card h3 {
  margin: 0 0 6px !important;
  color: #06110a !important;
  font-size: 17px !important;
  line-height: 1.15 !important;
  letter-spacing: -.025em !important;
}

.admin-design-inline-card p {
  margin: 3px 0 !important;
  color: rgba(6, 17, 10, .68) !important;
  font-size: 13px !important;
  line-height: 1.35 !important;
}

.admin-design-status {
  display: inline-flex !important;
  align-items: center !important;
  min-height: 24px !important;
  margin-top: 7px !important;
  padding: 0 9px !important;
  border-radius: 999px !important;
  background: rgba(47, 164, 94, .12) !important;
  color: #168c43 !important;
  font-size: 11px !important;
  font-weight: 950 !important;
  text-transform: uppercase !important;
  letter-spacing: .04em !important;
}

.admin-design-detail-head .eyebrow {
  margin: 0 0 6px !important;
}

.admin-design-preview-grid {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 16px !important;
  margin-top: 18px !important;
}

.admin-design-preview-card {
  min-width: 0 !important;
  padding: 14px !important;
  border-radius: 20px !important;
  border: 1px solid rgba(16, 66, 38, .12) !important;
  background: rgba(255, 255, 255, .88) !important;
  box-shadow: 0 16px 42px rgba(7, 17, 11, .06) !important;
  overflow: hidden !important;
}

.admin-design-preview-card h3 {
  margin: 0 0 6px !important;
  color: #06110a !important;
  font-size: 17px !important;
  line-height: 1.1 !important;
  letter-spacing: -.025em !important;
}

.admin-design-preview-card canvas {
  display: block !important;
  width: 100% !important;
  max-width: 100% !important;
  height: auto !important;
  aspect-ratio: 6 / 7 !important;
  border-radius: 16px !important;
  background: #f4f4f2 !important;
}

.admin-design-assets-compact,
.admin-design-json-compact {
  margin-top: 18px !important;
  padding: 18px !important;
  border-radius: 20px !important;
  border: 1px solid rgba(16, 66, 38, .12) !important;
  background: rgba(255, 255, 255, .86) !important;
  box-shadow: 0 16px 42px rgba(7, 17, 11, .06) !important;
}

.admin-design-assets-compact h3,
.admin-design-json-compact summary {
  margin: 0 0 14px !important;
  color: #06110a !important;
  font-size: 20px !important;
  line-height: 1.1 !important;
  font-weight: 950 !important;
}

.admin-design-assets-list {
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)) !important;
  gap: 12px !important;
}

.admin-design-asset-item {
  display: grid !important;
  grid-template-columns: 64px minmax(0, 1fr) !important;
  gap: 12px !important;
  align-items: center !important;
  min-height: 92px !important;
  padding: 12px !important;
  border-radius: 16px !important;
  border: 1px solid rgba(16, 66, 38, .1) !important;
  background: rgba(246, 251, 246, .85) !important;
}

.admin-design-asset-item img {
  width: 64px !important;
  height: 64px !important;
  max-width: 64px !important;
  max-height: 64px !important;
  object-fit: contain !important;
  border-radius: 11px !important;
  background: #ffffff !important;
  padding: 5px !important;
  border: 1px solid rgba(16, 66, 38, .08) !important;
}

.admin-design-asset-item strong {
  display: block !important;
  margin: 0 0 3px !important;
  color: #06110a !important;
  font-size: 13px !important;
  font-weight: 950 !important;
}

.admin-design-asset-item p {
  margin: 0 0 8px !important;
  max-width: 100% !important;
  color: rgba(6, 17, 10, .58) !important;
  font-size: 11px !important;
  line-height: 1.35 !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

.admin-design-json-compact pre {
  max-height: 320px !important;
  overflow: auto !important;
  padding: 14px !important;
  border-radius: 16px !important;
  background: #07110b !important;
  color: #dff8e5 !important;
  font-size: 11px !important;
}

.admin-sidebar a[href*="view=designs"]::before,
.admin-sidebar a[href*="view=design"]::before {
  content: "" !important;
  width: 17px !important;
  height: 17px !important;
  flex: 0 0 17px !important;
  background: currentColor !important;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='4' y='4' width='7' height='7' rx='1.5'/%3E%3Crect x='13' y='4' width='7' height='7' rx='1.5'/%3E%3Crect x='4' y='13' width='7' height='7' rx='1.5'/%3E%3Cpath d='M15 15h5M15 19h5'/%3E%3C/svg%3E") center / contain no-repeat !important;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='4' y='4' width='7' height='7' rx='1.5'/%3E%3Crect x='13' y='4' width='7' height='7' rx='1.5'/%3E%3Crect x='4' y='13' width='7' height='7' rx='1.5'/%3E%3Cpath d='M15 15h5M15 19h5'/%3E%3C/svg%3E") center / contain no-repeat !important;
}

@media (max-width: 980px) {
  .admin-design-preview-grid,
  .admin-designs-inline-grid {
    grid-template-columns: 1fr !important;
  }

  .admin-design-inline-card {
    grid-template-columns: 1fr !important;
  }
}

/* Admin sidebar Designs menu item */
.admin-sidebar a[href*="view=designs"]::before,
.admin-sidebar a[href*="view=design&id"]::before {
  content: "" !important;
  width: 17px !important;
  height: 17px !important;
  flex: 0 0 17px !important;
  background: currentColor !important;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='4' y='4' width='7' height='7' rx='1.5'/%3E%3Crect x='13' y='4' width='7' height='7' rx='1.5'/%3E%3Crect x='4' y='13' width='7' height='7' rx='1.5'/%3E%3Cpath d='M15 15h5M15 19h5'/%3E%3C/svg%3E") center / contain no-repeat !important;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='4' y='4' width='7' height='7' rx='1.5'/%3E%3Crect x='13' y='4' width='7' height='7' rx='1.5'/%3E%3Crect x='4' y='13' width='7' height='7' rx='1.5'/%3E%3Cpath d='M15 15h5M15 19h5'/%3E%3C/svg%3E") center / contain no-repeat !important;
}

/* Admin sidebar Designs menu item */
.admin-sidebar a[href*="view=designs"]::before,
.admin-sidebar a[href*="view=design&id"]::before {
  content: "" !important;
  width: 17px !important;
  height: 17px !important;
  flex: 0 0 17px !important;
  background: currentColor !important;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='4' y='4' width='7' height='7' rx='1.5'/%3E%3Crect x='13' y='4' width='7' height='7' rx='1.5'/%3E%3Crect x='4' y='13' width='7' height='7' rx='1.5'/%3E%3Cpath d='M15 15h5M15 19h5'/%3E%3C/svg%3E") center / contain no-repeat !important;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='4' y='4' width='7' height='7' rx='1.5'/%3E%3Crect x='13' y='4' width='7' height='7' rx='1.5'/%3E%3Crect x='4' y='13' width='7' height='7' rx='1.5'/%3E%3Cpath d='M15 15h5M15 19h5'/%3E%3C/svg%3E") center / contain no-repeat !important;
}

/* Final compact design previews inside normal admin.php */
.admin-design-preview-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 14px !important;
  margin-top: 16px !important;
  max-width: 760px !important;
}

.admin-design-preview-card {
  padding: 12px !important;
  border-radius: 18px !important;
  max-width: 370px !important;
  box-shadow: 0 12px 34px rgba(7, 17, 11, .055) !important;
}

.admin-design-preview-card h3 {
  margin: 0 0 8px !important;
  font-size: 15px !important;
}

.admin-design-preview-card canvas {
  max-height: 405px !important;
  border-radius: 14px !important;
}

.admin-design-detail-head {
  max-width: 880px !important;
}

.admin-design-detail-head h2 {
  font-size: 30px !important;
  line-height: 1 !important;
  letter-spacing: -.045em !important;
}

.admin-design-assets-compact,
.admin-design-json-compact {
  max-width: 760px !important;
  padding: 14px !important;
  border-radius: 18px !important;
}

.admin-design-assets-list {
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)) !important;
  gap: 10px !important;
}

.admin-design-asset-item {
  grid-template-columns: 54px minmax(0, 1fr) !important;
  min-height: 78px !important;
  padding: 10px !important;
  border-radius: 14px !important;
}

.admin-design-asset-item img {
  width: 54px !important;
  height: 54px !important;
  max-width: 54px !important;
  max-height: 54px !important;
}

.admin-design-asset-item .button {
  min-height: 30px !important;
  padding: 0 11px !important;
  font-size: 11px !important;
}

/* Sidebar Designs icon and visibility */
.admin-sidebar a[href*="view=designs"] {
  display: flex !important;
}

.admin-sidebar a[href*="view=designs"]::before,
.admin-sidebar a[href*="view=design&id"]::before {
  content: "" !important;
  width: 17px !important;
  height: 17px !important;
  flex: 0 0 17px !important;
  background: currentColor !important;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='4' y='4' width='7' height='7' rx='1.5'/%3E%3Crect x='13' y='4' width='7' height='7' rx='1.5'/%3E%3Crect x='4' y='13' width='7' height='7' rx='1.5'/%3E%3Cpath d='M15 15h5M15 19h5'/%3E%3C/svg%3E") center / contain no-repeat !important;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='4' y='4' width='7' height='7' rx='1.5'/%3E%3Crect x='13' y='4' width='7' height='7' rx='1.5'/%3E%3Crect x='4' y='13' width='7' height='7' rx='1.5'/%3E%3Cpath d='M15 15h5M15 19h5'/%3E%3C/svg%3E") center / contain no-repeat !important;
}

@media (max-width: 980px) {
  .admin-design-preview-grid {
    grid-template-columns: 1fr !important;
    max-width: none !important;
  }

  .admin-design-preview-card {
    max-width: none !important;
  }
}

/* Final Designs nav icon */
.admin-sidebar a.admin-nav-designs {
  display: flex !important;
  align-items: center !important;
}

.admin-sidebar a.admin-nav-designs::before {
  content: "" !important;
  display: block !important;
  width: 17px !important;
  height: 17px !important;
  min-width: 17px !important;
  flex: 0 0 17px !important;
  background-color: currentColor !important;
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='4' y='4' width='7' height='7' rx='1.5'/%3E%3Crect x='13' y='4' width='7' height='7' rx='1.5'/%3E%3Crect x='4' y='13' width='7' height='7' rx='1.5'/%3E%3Cpath d='M15 15h5M15 19h5'/%3E%3C/svg%3E") !important;
  -webkit-mask-repeat: no-repeat !important;
  -webkit-mask-position: center !important;
  -webkit-mask-size: contain !important;
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='4' y='4' width='7' height='7' rx='1.5'/%3E%3Crect x='13' y='4' width='7' height='7' rx='1.5'/%3E%3Crect x='4' y='13' width='7' height='7' rx='1.5'/%3E%3Cpath d='M15 15h5M15 19h5'/%3E%3C/svg%3E") !important;
  mask-repeat: no-repeat !important;
  mask-position: center !important;
  mask-size: contain !important;
}

/* Modern compact production preview cards */
.admin-design-preview-grid {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 14px !important;
  max-width: 720px !important;
  margin-top: 16px !important;
}

.admin-design-preview-card {
  position: relative !important;
  padding: 10px !important;
  border-radius: 18px !important;
  border: 1px solid rgba(16, 66, 38, .12) !important;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, .94), rgba(249, 253, 250, .9)) !important;
  box-shadow: 0 14px 38px rgba(7, 17, 11, .065) !important;
  overflow: hidden !important;
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease !important;
}

.admin-design-preview-card:hover {
  transform: translateY(-2px) !important;
  border-color: rgba(47, 164, 94, .3) !important;
  box-shadow: 0 20px 50px rgba(7, 17, 11, .105) !important;
}

.admin-design-preview-card h3 {
  position: absolute !important;
  z-index: 3 !important;
  top: 14px !important;
  left: 14px !important;
  margin: 0 !important;
  min-height: 28px !important;
  display: inline-flex !important;
  align-items: center !important;
  padding: 0 11px !important;
  border-radius: 999px !important;
  background: rgba(255, 255, 255, .86) !important;
  border: 1px solid rgba(16, 66, 38, .12) !important;
  color: #06110a !important;
  font-size: 12px !important;
  font-weight: 950 !important;
  letter-spacing: -.01em !important;
  backdrop-filter: blur(10px) !important;
}

.admin-design-preview-card canvas {
  display: block !important;
  width: 100% !important;
  height: auto !important;
  max-height: 325px !important;
  border-radius: 14px !important;
  background: #f3f3f1 !important;
  transform: scale(1.08) !important;
  transform-origin: center center !important;
  margin: -12px 0 !important;
}

.admin-design-detail-head {
  max-width: 760px !important;
}

.admin-design-detail-head h2 {
  font-size: 30px !important;
  line-height: 1 !important;
  letter-spacing: -.045em !important;
}

.admin-design-detail-head p {
  max-width: 680px !important;
}

/* Compact asset section below previews */
.admin-design-assets-compact,
.admin-design-json-compact {
  max-width: 720px !important;
  margin-top: 16px !important;
  padding: 14px !important;
  border-radius: 18px !important;
  border: 1px solid rgba(16, 66, 38, .12) !important;
  background: rgba(255, 255, 255, .88) !important;
  box-shadow: 0 14px 38px rgba(7, 17, 11, .06) !important;
}

.admin-design-assets-compact h3,
.admin-design-json-compact summary {
  margin: 0 0 12px !important;
  color: #06110a !important;
  font-size: 18px !important;
  line-height: 1.1 !important;
  font-weight: 950 !important;
}

.admin-design-assets-list {
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)) !important;
  gap: 10px !important;
}

.admin-design-asset-item {
  display: grid !important;
  grid-template-columns: 52px minmax(0, 1fr) !important;
  gap: 10px !important;
  align-items: center !important;
  min-height: 74px !important;
  padding: 10px !important;
  border-radius: 14px !important;
  border: 1px solid rgba(16, 66, 38, .1) !important;
  background: rgba(246, 251, 246, .86) !important;
}

.admin-design-asset-item img {
  width: 52px !important;
  height: 52px !important;
  max-width: 52px !important;
  max-height: 52px !important;
  object-fit: contain !important;
  border-radius: 10px !important;
  background: #ffffff !important;
  padding: 5px !important;
  border: 1px solid rgba(16, 66, 38, .08) !important;
}

.admin-design-asset-item strong {
  display: block !important;
  margin: 0 0 2px !important;
  color: #06110a !important;
  font-size: 12px !important;
  font-weight: 950 !important;
}

.admin-design-asset-item p {
  margin: 0 0 7px !important;
  max-width: 100% !important;
  color: rgba(6, 17, 10, .58) !important;
  font-size: 11px !important;
  line-height: 1.3 !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

.admin-design-asset-item .button {
  min-height: 28px !important;
  padding: 0 10px !important;
  font-size: 11px !important;
}

/* Designs list cards */
.admin-designs-inline-grid {
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)) !important;
  gap: 12px !important;
  max-width: 780px !important;
  margin-top: 16px !important;
}

.admin-design-inline-card {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto !important;
  gap: 14px !important;
  align-items: center !important;
  padding: 14px !important;
  border-radius: 18px !important;
  border: 1px solid rgba(16, 66, 38, .12) !important;
  background: rgba(255, 255, 255, .88) !important;
  box-shadow: 0 14px 38px rgba(7, 17, 11, .06) !important;
  transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease !important;
}

.admin-design-inline-card:hover {
  transform: translateY(-2px) !important;
  border-color: rgba(47, 164, 94, .3) !important;
  box-shadow: 0 20px 50px rgba(7, 17, 11, .1) !important;
}

.admin-design-inline-card h3 {
  margin: 0 0 5px !important;
  font-size: 16px !important;
  line-height: 1.15 !important;
}

.admin-design-inline-card p {
  margin: 2px 0 !important;
  font-size: 12px !important;
  line-height: 1.35 !important;
  color: rgba(6, 17, 10, .66) !important;
}

.admin-design-inline-card .button {
  min-height: 36px !important;
  padding: 0 13px !important;
  font-size: 12px !important;
  white-space: nowrap !important;
}

@media (max-width: 980px) {
  .admin-design-preview-grid,
  .admin-designs-inline-grid {
    grid-template-columns: 1fr !important;
    max-width: none !important;
  }

  .admin-design-preview-card canvas {
    max-height: none !important;
  }
}

/* Final polish for admin design preview cards */
.admin-design-preview-grid {
  max-width: 760px !important;
  gap: 14px !important;
}

.admin-design-preview-card {
  height: 330px !important;
  padding: 10px !important;
  border-radius: 18px !important;
  overflow: hidden !important;
}

.admin-design-preview-card canvas {
  width: 100% !important;
  height: 310px !important;
  max-height: 310px !important;
  object-fit: contain !important;
  transform: scale(1.02) !important;
  transform-origin: center center !important;
  margin: 0 !important;
  border-radius: 14px !important;
}

.admin-design-preview-card h3 {
  top: 14px !important;
  left: 14px !important;
  min-height: 26px !important;
  padding: 0 10px !important;
  font-size: 12px !important;
  z-index: 5 !important;
}

@media (max-width: 980px) {
  .admin-design-preview-card {
    height: auto !important;
  }

  .admin-design-preview-card canvas {
    height: auto !important;
    max-height: none !important;
  }
}

/* Clean admin design preview, replace bad fixed-height version */
.admin-design-preview-grid {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(280px, 340px)) !important;
  gap: 16px !important;
  max-width: 720px !important;
  align-items: start !important;
}

.admin-design-preview-card {
  position: relative !important;
  width: 100% !important;
  max-width: 340px !important;
  height: auto !important;
  padding: 8px !important;
  border-radius: 18px !important;
  border: 1px solid rgba(16, 66, 38, .13) !important;
  background: rgba(255, 255, 255, .92) !important;
  box-shadow: 0 14px 34px rgba(7, 17, 11, .065) !important;
  overflow: hidden !important;
}

.admin-design-preview-card:hover {
  transform: translateY(-2px) !important;
  border-color: rgba(47, 164, 94, .30) !important;
  box-shadow: 0 20px 48px rgba(7, 17, 11, .10) !important;
}

.admin-design-preview-card h3 {
  position: absolute !important;
  z-index: 5 !important;
  top: 14px !important;
  left: 14px !important;
  min-height: 26px !important;
  display: inline-flex !important;
  align-items: center !important;
  padding: 0 10px !important;
  margin: 0 !important;
  border-radius: 999px !important;
  border: 1px solid rgba(16, 66, 38, .12) !important;
  background: rgba(255, 255, 255, .88) !important;
  color: #06110a !important;
  font-size: 12px !important;
  font-weight: 950 !important;
  backdrop-filter: blur(10px) !important;
}

.admin-design-preview-card canvas {
  display: block !important;
  width: 100% !important;
  height: auto !important;
  max-height: none !important;
  aspect-ratio: 6 / 7 !important;
  margin: 0 !important;
  border-radius: 14px !important;
  background: #f4f4f2 !important;
  transform: none !important;
  object-fit: contain !important;
}

/* Give the preview image more visual weight without squeezing it */
.admin-design-preview-card .canvas-container {
  width: 100% !important;
  height: auto !important;
}

@media (max-width: 980px) {
  .admin-design-preview-grid {
    grid-template-columns: 1fr !important;
    max-width: none !important;
  }

  .admin-design-preview-card {
    max-width: 420px !important;
  }
}

/* Sleeve preview, reduce empty space top and bottom */
.admin-design-preview-grid .admin-design-preview-card:nth-child(3),
.admin-design-preview-grid .admin-design-preview-card:nth-child(4) {
  padding: 8px !important;
}

.admin-design-preview-grid .admin-design-preview-card:nth-child(3) canvas,
.admin-design-preview-grid .admin-design-preview-card:nth-child(4) canvas {
  aspect-ratio: 1 / 1 !important;
  width: 100% !important;
  height: auto !important;
  transform: scale(1.18) translateY(-16px) !important;
  transform-origin: center center !important;
  border-radius: 14px !important;
}

.admin-design-preview-grid .admin-design-preview-card:nth-child(3),
.admin-design-preview-grid .admin-design-preview-card:nth-child(4) {
  overflow: hidden !important;
}

.admin-design-preview-grid .admin-design-preview-card:nth-child(3) h3,
.admin-design-preview-grid .admin-design-preview-card:nth-child(4) h3 {
  z-index: 8 !important;
}

/* FINAL RESET: consistent admin design preview cards */
.admin-main .admin-design-preview-grid {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(260px, 330px)) !important;
  gap: 16px !important;
  max-width: 700px !important;
  margin-top: 16px !important;
  align-items: start !important;
}

.admin-main .admin-design-preview-card,
.admin-main .admin-design-preview-grid .admin-design-preview-card:nth-child(3),
.admin-main .admin-design-preview-grid .admin-design-preview-card:nth-child(4) {
  position: relative !important;
  width: 100% !important;
  max-width: 330px !important;
  height: auto !important;
  padding: 10px !important;
  border-radius: 18px !important;
  border: 1px solid rgba(16, 66, 38, .13) !important;
  background: rgba(255, 255, 255, .92) !important;
  box-shadow: 0 14px 34px rgba(7, 17, 11, .065) !important;
  overflow: hidden !important;
  transform: none !important;
}

.admin-main .admin-design-preview-card:hover {
  transform: translateY(-2px) !important;
  border-color: rgba(47, 164, 94, .3) !important;
  box-shadow: 0 20px 48px rgba(7, 17, 11, .1) !important;
}

.admin-main .admin-design-preview-card h3,
.admin-main .admin-design-preview-grid .admin-design-preview-card:nth-child(3) h3,
.admin-main .admin-design-preview-grid .admin-design-preview-card:nth-child(4) h3 {
  position: static !important;
  z-index: auto !important;
  display: flex !important;
  align-items: center !important;
  min-height: 28px !important;
  margin: 0 0 8px !important;
  padding: 0 10px !important;
  border-radius: 999px !important;
  width: fit-content !important;
  border: 1px solid rgba(16, 66, 38, .12) !important;
  background: rgba(246, 251, 246, .95) !important;
  color: #06110a !important;
  font-size: 12px !important;
  font-weight: 950 !important;
  line-height: 1 !important;
  backdrop-filter: none !important;
}

.admin-main .admin-design-preview-card canvas,
.admin-main .admin-design-preview-grid .admin-design-preview-card:nth-child(3) canvas,
.admin-main .admin-design-preview-grid .admin-design-preview-card:nth-child(4) canvas {
  display: block !important;
  width: 100% !important;
  height: auto !important;
  max-height: none !important;
  aspect-ratio: 6 / 7 !important;
  margin: 0 !important;
  border-radius: 14px !important;
  background: #f4f4f2 !important;
  transform: none !important;
  object-fit: contain !important;
}

.admin-main .admin-design-preview-card .canvas-container,
.admin-main .admin-design-preview-grid .admin-design-preview-card:nth-child(3) .canvas-container,
.admin-main .admin-design-preview-grid .admin-design-preview-card:nth-child(4) .canvas-container {
  width: 100% !important;
  height: auto !important;
  transform: none !important;
}

/* Guaranteed Designs icon in admin sidebar */
.admin-sidebar a.admin-nav-designs::before,
.admin-sidebar a[href*="view=designs"]::before {
  content: "▦" !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 17px !important;
  min-width: 17px !important;
  height: 17px !important;
  flex: 0 0 17px !important;
  margin-right: 0 !important;
  background: transparent !important;
  color: currentColor !important;
  font-size: 17px !important;
  font-weight: 900 !important;
  line-height: 1 !important;
  -webkit-mask: none !important;
  mask: none !important;
}

@media (max-width: 980px) {
  .admin-main .admin-design-preview-grid {
    grid-template-columns: 1fr !important;
    max-width: none !important;
  }

  .admin-main .admin-design-preview-card {
    max-width: 360px !important;
  }
}

/* TAVAWEAR FOOTER COMPACT FIX START */
.site-footer {
    padding: 34px 0 24px !important;
}

.site-footer .footer-grid {
    display: grid !important;
    grid-template-columns: minmax(260px, 1.25fr) repeat(3, minmax(130px, .75fr)) !important;
    gap: 42px !important;
    align-items: start !important;
}

.site-footer .footer-brand .brand {
    display: inline-flex !important;
    width: auto !important;
    height: auto !important;
    line-height: 1 !important;
    margin: 0 0 12px 0 !important;
}

.site-footer .footer-logo {
    display: block !important;
    width: 128px !important;
    height: auto !important;
    max-width: none !important;
    max-height: none !important;
    object-fit: contain !important;
}

.site-footer .footer-brand .brand-mark {
    width: 190px !important;
    max-width: none !important;
    max-height: none !important;
    height: auto !important;
    margin: -46px 0 -44px -34px !important;
    object-fit: contain !important;
}

.site-footer .footer-brand p {
    max-width: 300px !important;
    margin: 0 !important;
    line-height: 1.45 !important;
}

.site-footer .footer-col {
    gap: 9px !important;
}

.site-footer .footer-col h3 {
    margin: 0 0 7px 0 !important;
    font-size: 12px !important;
    line-height: 1.2 !important;
}

.site-footer .footer-col a,
.site-footer .footer-bottom a {
    line-height: 1.35 !important;
}

.site-footer .footer-bottom {
    margin-top: 28px !important;
    padding-top: 18px !important;
}

@media (max-width: 1050px) {
    .site-footer {
        padding: 30px 0 22px !important;
    }

    .site-footer .footer-grid {
        grid-template-columns: 1fr 1fr !important;
        gap: 28px !important;
    }
}

@media (max-width: 680px) {
    .site-footer .footer-grid {
        grid-template-columns: 1fr !important;
        gap: 22px !important;
    }

    .site-footer .footer-logo {
        width: 118px !important;
    }

    .site-footer .footer-bottom {
        flex-direction: column !important;
        gap: 8px !important;
    }
}
/* TAVAWEAR FOOTER COMPACT FIX END */

/* TAVAWEAR ADMIN DESIGN PREVIEW COMPACT START */
.admin-design-preview-grid {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 300px)) !important;
    gap: 12px !important;
    max-width: 612px !important;
    margin-top: 14px !important;
    align-items: start !important;
}

.admin-design-preview-card {
    position: relative !important;
    width: 100% !important;
    max-width: 300px !important;
    padding: 7px !important;
    border-radius: 17px !important;
    border: 1px solid rgba(16, 66, 38, .12) !important;
    background: rgba(255, 255, 255, .92) !important;
    box-shadow: 0 10px 26px rgba(7, 17, 11, .055) !important;
    overflow: hidden !important;
}

.admin-design-preview-card:hover {
    transform: translateY(-1px) !important;
    border-color: rgba(47, 164, 94, .26) !important;
    box-shadow: 0 14px 34px rgba(7, 17, 11, .08) !important;
}

.admin-design-preview-card h3 {
    position: absolute !important;
    z-index: 5 !important;
    top: 12px !important;
    left: 12px !important;
    min-height: 23px !important;
    display: inline-flex !important;
    align-items: center !important;
    padding: 0 9px !important;
    margin: 0 !important;
    border-radius: 999px !important;
    border: 1px solid rgba(16, 66, 38, .12) !important;
    background: rgba(255, 255, 255, .9) !important;
    color: #06110a !important;
    font-size: 11px !important;
    font-weight: 900 !important;
    line-height: 1 !important;
    backdrop-filter: blur(8px) !important;
}

.admin-design-preview-card canvas,
.admin-design-preview-card .canvas-container {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
}

.admin-design-preview-card canvas {
    height: auto !important;
    aspect-ratio: 6 / 7 !important;
    margin: 0 !important;
    border-radius: 13px !important;
    background: #f3f3f1 !important;
    transform: none !important;
}

.admin-design-detail-head {
    max-width: 760px !important;
    margin-bottom: 8px !important;
}

.admin-design-assets-compact,
.admin-design-json-compact {
    max-width: 612px !important;
    margin-top: 14px !important;
    padding: 14px !important;
}

@media (max-width: 760px) {
    .admin-design-preview-grid {
        grid-template-columns: 1fr !important;
        max-width: none !important;
    }

    .admin-design-preview-card {
        max-width: 100% !important;
    }

    .admin-design-assets-compact,
    .admin-design-json-compact {
        max-width: none !important;
    }
}
/* TAVAWEAR ADMIN DESIGN PREVIEW COMPACT END */

/* TAVAWEAR FOOTER TIGHT FIX START */
.site-footer {
    padding: 26px 0 18px !important;
}

.site-footer .container,
.site-footer > .container {
    max-width: 1110px !important;
}

.site-footer .footer-grid {
    display: grid !important;
    grid-template-columns: 310px 155px 185px 155px !important;
    gap: 52px !important;
    align-items: start !important;
    justify-content: start !important;
}

.site-footer .footer-brand .brand {
    margin: 0 0 8px 0 !important;
}

.site-footer .footer-logo {
    width: 112px !important;
    height: auto !important;
}

.site-footer .footer-brand .brand-mark {
    width: 128px !important;
    height: auto !important;
    max-width: none !important;
    max-height: none !important;
    margin: 0 0 8px 0 !important;
    object-fit: contain !important;
}

.site-footer .footer-brand p {
    max-width: 285px !important;
    margin: 0 !important;
    font-size: 13px !important;
    line-height: 1.38 !important;
    letter-spacing: 0 !important;
}

.site-footer .footer-col {
    gap: 6px !important;
}

.site-footer .footer-col h3 {
    margin: 0 0 6px 0 !important;
    font-size: 9px !important;
    line-height: 1.1 !important;
    letter-spacing: .01em !important;
}

.site-footer .footer-col a {
    font-size: 14px !important;
    line-height: 1.28 !important;
    margin: 0 !important;
    padding: 0 !important;
}

.site-footer .footer-bottom {
    margin-top: 22px !important;
    padding-top: 14px !important;
    font-size: 12px !important;
    line-height: 1.25 !important;
}

.site-footer .footer-bottom a {
    font-size: 12px !important;
    line-height: 1.25 !important;
}

@media (max-width: 1050px) {
    .site-footer .footer-grid {
        grid-template-columns: 1.2fr 1fr 1fr 1fr !important;
        gap: 30px !important;
    }
}

@media (max-width: 760px) {
    .site-footer {
        padding: 24px 0 18px !important;
    }

    .site-footer .footer-grid {
        grid-template-columns: 1fr 1fr !important;
        gap: 22px !important;
    }

    .site-footer .footer-brand {
        grid-column: 1 / -1 !important;
    }
}

@media (max-width: 520px) {
    .site-footer .footer-grid {
        grid-template-columns: 1fr !important;
        gap: 18px !important;
    }

    .site-footer .footer-bottom {
        margin-top: 18px !important;
        padding-top: 12px !important;
    }
}
/* TAVAWEAR FOOTER TIGHT FIX END */

/* TAVAWEAR FOOTER LOGO SMALLER START */
.site-footer .footer-logo {
    width: 98px !important;
    height: auto !important;
}

.site-footer .footer-brand .brand-mark {
    width: 108px !important;
    height: auto !important;
    max-width: none !important;
    max-height: none !important;
    margin: 0 0 7px 0 !important;
}
/* TAVAWEAR FOOTER LOGO SMALLER END */

/* FINAL production board, replaces old design preview UI */
.admin-production-board {
  width: 100% !important;
  max-width: 100% !important;
}

.admin-production-head {
  display: flex !important;
  align-items: flex-end !important;
  justify-content: space-between !important;
  gap: 22px !important;
  margin: 0 0 14px !important;
}

.admin-production-kicker {
  margin: 0 0 5px !important;
  color: #229b51 !important;
  font-size: 12px !important;
  font-weight: 950 !important;
  letter-spacing: .08em !important;
  text-transform: uppercase !important;
}

.admin-production-head h2 {
  margin: 0 !important;
  color: #06110a !important;
  font-size: 32px !important;
  line-height: 1 !important;
  letter-spacing: -.045em !important;
}

.admin-production-head p {
  margin: 7px 0 0 !important;
  color: rgba(6, 17, 10, .68) !important;
  font-size: 13px !important;
  line-height: 1.35 !important;
}

.admin-production-strip {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 8px !important;
  margin: 0 0 16px !important;
}

.admin-production-strip span {
  display: inline-flex !important;
  align-items: center !important;
  min-height: 28px !important;
  padding: 0 10px !important;
  border-radius: 999px !important;
  border: 1px solid rgba(16, 66, 38, .11) !important;
  background: rgba(255, 255, 255, .78) !important;
  color: rgba(6, 17, 10, .68) !important;
  font-size: 12px !important;
  font-weight: 850 !important;
}

.admin-production-grid {
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  gap: 14px !important;
  width: 100% !important;
  max-width: 100% !important;
  align-items: start !important;
}

.admin-production-card {
  min-width: 0 !important;
  padding: 10px !important;
  border-radius: 20px !important;
  border: 1px solid rgba(16, 66, 38, .12) !important;
  background: rgba(255, 255, 255, .94) !important;
  box-shadow: 0 14px 34px rgba(7, 17, 11, .065) !important;
  overflow: hidden !important;
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease !important;
}

.admin-production-card:hover {
  transform: translateY(-2px) !important;
  border-color: rgba(47, 164, 94, .28) !important;
  box-shadow: 0 20px 48px rgba(7, 17, 11, .105) !important;
}

.admin-production-card-head {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 8px !important;
  margin: 0 0 9px !important;
}

.admin-production-card-head strong {
  display: inline-flex !important;
  align-items: center !important;
  min-height: 26px !important;
  padding: 0 10px !important;
  border-radius: 999px !important;
  border: 1px solid rgba(16, 66, 38, .12) !important;
  background: rgba(246, 251, 246, .96) !important;
  color: #06110a !important;
  font-size: 12px !important;
  font-weight: 950 !important;
  white-space: nowrap !important;
}

.admin-production-card-head span {
  color: rgba(6, 17, 10, .48) !important;
  font-size: 11px !important;
  font-weight: 850 !important;
  white-space: nowrap !important;
}

.admin-production-stage {
  position: relative !important;
  width: 100% !important;
  aspect-ratio: 6 / 7 !important;
  border-radius: 16px !important;
  background:
    radial-gradient(circle at 50% 34%, rgba(255, 255, 255, .96), rgba(231, 232, 229, .94)) !important;
  overflow: hidden !important;
}

.admin-production-stage .canvas-container,
.admin-production-stage canvas {
  width: 100% !important;
  height: 100% !important;
  max-width: 100% !important;
  max-height: 100% !important;
  margin: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  transform: scale(1.045) !important;
  transform-origin: center center !important;
}

.admin-production-assets,
.admin-production-json {
  margin-top: 16px !important;
  padding: 14px !important;
  border-radius: 20px !important;
  border: 1px solid rgba(16, 66, 38, .12) !important;
  background: rgba(255, 255, 255, .88) !important;
  box-shadow: 0 14px 34px rgba(7, 17, 11, .055) !important;
}

.admin-production-section-head {
  display: flex !important;
  justify-content: space-between !important;
  gap: 14px !important;
  align-items: center !important;
  margin: 0 0 12px !important;
}

.admin-production-section-head h3 {
  margin: 0 !important;
  color: #06110a !important;
  font-size: 18px !important;
  line-height: 1.1 !important;
  font-weight: 950 !important;
}

.admin-production-section-head span,
.admin-production-muted {
  color: rgba(6, 17, 10, .58) !important;
  font-size: 12px !important;
  font-weight: 800 !important;
}

.admin-production-assets-grid {
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)) !important;
  gap: 10px !important;
}

.admin-production-asset {
  display: grid !important;
  grid-template-columns: 54px minmax(0, 1fr) !important;
  gap: 10px !important;
  align-items: center !important;
  padding: 10px !important;
  border-radius: 14px !important;
  border: 1px solid rgba(16, 66, 38, .1) !important;
  background: rgba(246, 251, 246, .86) !important;
}

.admin-production-asset img {
  width: 54px !important;
  height: 54px !important;
  object-fit: contain !important;
  border-radius: 10px !important;
  background: #fff !important;
  padding: 5px !important;
  border: 1px solid rgba(16, 66, 38, .08) !important;
}

.admin-production-asset strong {
  display: block !important;
  margin: 0 0 2px !important;
  font-size: 12px !important;
  font-weight: 950 !important;
  color: #06110a !important;
}

.admin-production-asset p {
  margin: 0 0 7px !important;
  max-width: 100% !important;
  color: rgba(6, 17, 10, .58) !important;
  font-size: 11px !important;
  line-height: 1.3 !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

.admin-production-asset .button {
  min-height: 28px !important;
  padding: 0 10px !important;
  font-size: 11px !important;
}

.admin-production-json summary {
  cursor: pointer !important;
  font-size: 14px !important;
  font-weight: 950 !important;
  color: #06110a !important;
}

.admin-production-json pre {
  max-height: 320px !important;
  overflow: auto !important;
  margin: 12px 0 0 !important;
  padding: 14px !important;
  border-radius: 16px !important;
  background: #07110b !important;
  color: #dff8e5 !important;
  font-size: 11px !important;
}

/* Designs menu, exactly one icon */
.admin-sidebar a.admin-nav-designs::before,
.admin-sidebar a[href*="view=designs"]::before {
  content: none !important;
  display: none !important;
}

.admin-sidebar a.admin-nav-designs {
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
}

.admin-sidebar a.admin-nav-designs .admin-nav-icon {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 17px !important;
  height: 17px !important;
  min-width: 17px !important;
  color: currentColor !important;
  font-size: 17px !important;
  font-weight: 950 !important;
  line-height: 1 !important;
}

@media (max-width: 1280px) {
  .admin-production-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}

@media (max-width: 760px) {
  .admin-production-head {
    display: grid !important;
    align-items: start !important;
  }

  .admin-production-grid {
    grid-template-columns: 1fr !important;
  }
}

/* TAVAWEAR FOOTER LOGO TITLE TUNE START */
.site-footer .footer-logo {
    width: 76px !important;
    height: auto !important;
    max-width: 76px !important;
}

.site-footer .footer-brand .brand-mark {
    width: 82px !important;
    height: auto !important;
    max-width: 82px !important;
    max-height: none !important;
    margin: 0 0 7px 0 !important;
    object-fit: contain !important;
}

.site-footer .footer-col h3 {
    font-size: 11px !important;
    font-weight: 900 !important;
    line-height: 1.15 !important;
    letter-spacing: .015em !important;
    margin: 0 0 8px 0 !important;
}

.site-footer .footer-col a {
    font-size: 14px !important;
    line-height: 1.35 !important;
}

.site-footer .footer-brand p {
    font-size: 13px !important;
    line-height: 1.4 !important;
}
/* TAVAWEAR FOOTER LOGO TITLE TUNE END */

/* v0-style production design board */
.v0-design-board {
  width: 100% !important;
  max-width: 1040px !important;
}

.v0-design-head {
  display: flex !important;
  align-items: flex-start !important;
  justify-content: space-between !important;
  gap: 24px !important;
  margin: 0 0 12px !important;
}

.v0-design-head p {
  margin: 0 0 4px !important;
  color: #007a3d !important;
  font-size: 12px !important;
  font-weight: 950 !important;
  letter-spacing: .12em !important;
  text-transform: uppercase !important;
}

.v0-design-head h2 {
  margin: 0 !important;
  color: #06110a !important;
  font-size: 30px !important;
  line-height: 1 !important;
  letter-spacing: -.045em !important;
}

.v0-design-head span {
  display: block !important;
  margin-top: 7px !important;
  color: rgba(6, 17, 10, .68) !important;
  font-size: 13px !important;
  line-height: 1.35 !important;
}

.v0-back-button {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-height: 40px !important;
  padding: 0 18px !important;
  border-radius: 999px !important;
  background: #007a3d !important;
  color: #ffffff !important;
  text-decoration: none !important;
  font-size: 14px !important;
  font-weight: 950 !important;
  box-shadow: 0 16px 34px rgba(0, 122, 61, .24) !important;
}

.v0-design-meta {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 8px !important;
  margin: 0 0 22px !important;
}

.v0-design-meta span {
  display: inline-flex !important;
  align-items: center !important;
  min-height: 26px !important;
  padding: 0 12px !important;
  border-radius: 999px !important;
  border: 1px solid rgba(16, 66, 38, .12) !important;
  background: rgba(47, 164, 94, .10) !important;
  color: #163b24 !important;
  font-size: 12px !important;
  font-weight: 850 !important;
}

.v0-preview-panel {
  padding: 14px !important;
  border-radius: 22px !important;
  border: 1px solid rgba(16, 66, 38, .12) !important;
  background: rgba(47, 164, 94, .06) !important;
}

.v0-preview-grid {
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  gap: 14px !important;
}

.v0-preview-card {
  min-width: 0 !important;
  padding: 12px !important;
  border-radius: 20px !important;
  border: 1px solid rgba(16, 66, 38, .12) !important;
  background: rgba(255, 255, 255, .92) !important;
  box-shadow: 0 12px 28px rgba(7, 17, 11, .06) !important;
  overflow: hidden !important;
}

.v0-preview-card.is-active {
  border: 2px solid #007a3d !important;
  box-shadow: 0 18px 38px rgba(0, 122, 61, .16) !important;
}

.v0-preview-card header {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 8px !important;
  margin: 0 0 6px !important;
}

.v0-preview-card header strong {
  color: #06110a !important;
  font-size: 14px !important;
  font-weight: 950 !important;
  line-height: 1.1 !important;
}

.v0-preview-card header span {
  display: inline-flex !important;
  align-items: center !important;
  min-height: 22px !important;
  padding: 0 8px !important;
  border-radius: 999px !important;
  background: rgba(47, 164, 94, .14) !important;
  color: rgba(6, 17, 10, .58) !important;
  font-size: 11px !important;
  font-weight: 850 !important;
  white-space: nowrap !important;
}

.v0-preview-stage {
  position: relative !important;
  width: 100% !important;
  aspect-ratio: 1 / 1 !important;
  border-radius: 14px !important;
  background:
    radial-gradient(circle at 50% 40%, rgba(255, 255, 255, .98), rgba(231, 232, 229, .96)) !important;
  overflow: hidden !important;
}

.v0-preview-stage .canvas-container {
  position: absolute !important;
  left: 50% !important;
  top: 50% !important;
  width: 112% !important;
  height: auto !important;
  aspect-ratio: 6 / 7 !important;
  transform: translate(-50%, -50%) !important;
  transform-origin: center center !important;
}

.v0-preview-stage canvas {
  width: 100% !important;
  height: 100% !important;
  background: transparent !important;
}

.v0-assets-panel,
.v0-json-panel {
  margin-top: 24px !important;
  padding: 18px !important;
  border-radius: 22px !important;
  border: 1px solid rgba(16, 66, 38, .12) !important;
  background: rgba(255, 255, 255, .92) !important;
  box-shadow: 0 14px 34px rgba(7, 17, 11, .06) !important;
}

.v0-assets-panel > header {
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  gap: 14px !important;
  margin: 0 0 16px !important;
}

.v0-assets-panel h3 {
  margin: 0 !important;
  color: #06110a !important;
  font-size: 18px !important;
  font-weight: 950 !important;
}

.v0-assets-panel > header span {
  display: inline-flex !important;
  align-items: center !important;
  min-height: 26px !important;
  padding: 0 10px !important;
  border-radius: 999px !important;
  background: rgba(47, 164, 94, .12) !important;
  color: rgba(6, 17, 10, .62) !important;
  font-size: 12px !important;
  font-weight: 850 !important;
}

.v0-assets-grid {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 12px !important;
}

.v0-asset-card {
  display: grid !important;
  grid-template-columns: 58px minmax(0, 1fr) auto !important;
  gap: 12px !important;
  align-items: center !important;
  padding: 12px !important;
  border-radius: 16px !important;
  border: 1px solid rgba(16, 66, 38, .12) !important;
  background: rgba(246, 251, 246, .82) !important;
}

.v0-asset-card img {
  width: 58px !important;
  height: 58px !important;
  object-fit: contain !important;
  border-radius: 12px !important;
  background: #ffffff !important;
  padding: 6px !important;
  border: 1px solid rgba(16, 66, 38, .08) !important;
}

.v0-asset-card strong {
  display: block !important;
  margin: 0 0 3px !important;
  color: #06110a !important;
  font-size: 13px !important;
  font-weight: 950 !important;
}

.v0-asset-card p {
  margin: 0 !important;
  max-width: 100% !important;
  color: rgba(6, 17, 10, .58) !important;
  font-size: 11px !important;
  line-height: 1.3 !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

.v0-asset-card a {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-height: 32px !important;
  padding: 0 12px !important;
  border-radius: 999px !important;
  background: #007a3d !important;
  color: #ffffff !important;
  text-decoration: none !important;
  font-size: 12px !important;
  font-weight: 950 !important;
  white-space: nowrap !important;
}

.v0-json-panel summary {
  cursor: pointer !important;
  color: #06110a !important;
  font-size: 14px !important;
  font-weight: 950 !important;
}

.v0-json-panel pre {
  max-height: 320px !important;
  overflow: auto !important;
  margin: 14px 0 0 !important;
  padding: 14px !important;
  border-radius: 16px !important;
  background: #07110b !important;
  color: #dff8e5 !important;
  font-size: 11px !important;
}

/* Sidebar Designs icon */
.admin-sidebar a.admin-nav-designs::before,
.admin-sidebar a[href*="view=designs"]::before {
  content: none !important;
  display: none !important;
}

.admin-sidebar a.admin-nav-designs {
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
}

.admin-sidebar a.admin-nav-designs .admin-nav-icon {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 17px !important;
  height: 17px !important;
  min-width: 17px !important;
  color: currentColor !important;
  font-size: 17px !important;
  font-weight: 950 !important;
  line-height: 1 !important;
}

@media (max-width: 1200px) {
  .v0-preview-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  .v0-assets-grid {
    grid-template-columns: 1fr !important;
  }
}

@media (max-width: 760px) {
  .v0-design-head {
    display: grid !important;
  }

  .v0-preview-grid {
    grid-template-columns: 1fr !important;
  }

  .v0-asset-card {
    grid-template-columns: 54px minmax(0, 1fr) !important;
  }

  .v0-asset-card a {
    grid-column: 2 !important;
    justify-self: start !important;
  }
}

/* v0 design-review port, image-card based */
.v0dr-page {
  width: 100% !important;
  max-width: 1040px !important;
  margin: 0 !important;
}

.v0dr-header {
  display: flex !important;
  align-items: flex-start !important;
  justify-content: space-between !important;
  gap: 24px !important;
  margin: 0 0 12px !important;
}

.v0dr-kicker {
  margin: 0 0 6px !important;
  color: #18864b !important;
  font-size: 12px !important;
  font-weight: 800 !important;
  letter-spacing: .16em !important;
  text-transform: uppercase !important;
}

.v0dr-header h2 {
  margin: 0 !important;
  color: #07110b !important;
  font-size: 30px !important;
  line-height: 1.05 !important;
  letter-spacing: -.045em !important;
  font-weight: 800 !important;
}

.v0dr-subline {
  margin: 8px 0 0 !important;
  color: #4f6258 !important;
  font-size: 14px !important;
  line-height: 1.35 !important;
}

.v0dr-back {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  min-height: 42px !important;
  padding: 0 17px !important;
  border-radius: 14px !important;
  border: 0 !important;
  background: #16864a !important;
  color: #ffffff !important;
  text-decoration: none !important;
  font-size: 14px !important;
  font-weight: 800 !important;
  box-shadow: 0 12px 28px rgba(22, 134, 74, .24) !important;
}

.v0dr-tags {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 8px !important;
  margin: 0 0 24px !important;
}

.v0dr-tags span {
  display: inline-flex !important;
  align-items: center !important;
  min-height: 28px !important;
  padding: 0 12px !important;
  border-radius: 10px !important;
  border: 1px solid rgba(16, 66, 38, .12) !important;
  background: #e7f3e9 !important;
  color: #28543a !important;
  font-size: 12px !important;
  font-weight: 700 !important;
}

.v0dr-preview-wrap {
  padding: 16px !important;
  border-radius: 22px !important;
  border: 1px solid rgba(16, 66, 38, .13) !important;
  background: rgba(47, 164, 94, .07) !important;
}

.v0dr-preview-grid {
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  gap: 12px !important;
}

.v0dr-card {
  position: relative !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 12px !important;
  min-width: 0 !important;
  padding: 12px !important;
  border-radius: 18px !important;
  border: 1px solid rgba(16, 66, 38, .14) !important;
  background: #ffffff !important;
  box-shadow: 0 8px 20px rgba(7, 17, 11, .06) !important;
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease !important;
}

.v0dr-card:hover {
  transform: translateY(-2px) !important;
  box-shadow: 0 16px 32px rgba(7, 17, 11, .10) !important;
}

.v0dr-card.is-active {
  border-color: #16864a !important;
  box-shadow: 0 14px 30px rgba(7, 17, 11, .10) !important;
  outline: 1px solid #16864a !important;
}

.v0dr-card.is-active::after {
  content: "" !important;
  position: absolute !important;
  top: 14px !important;
  right: 14px !important;
  width: 8px !important;
  height: 8px !important;
  border-radius: 999px !important;
  background: #16864a !important;
  box-shadow: 0 2px 5px rgba(22, 134, 74, .24) !important;
}

.v0dr-card header {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 8px !important;
  min-height: 24px !important;
  margin: 0 !important;
  padding: 0 2px !important;
}

.v0dr-card header strong {
  color: #07110b !important;
  font-size: 14px !important;
  font-weight: 800 !important;
  line-height: 1.1 !important;
}

.v0dr-card header span {
  display: inline-flex !important;
  align-items: center !important;
  min-height: 22px !important;
  padding: 0 8px !important;
  border-radius: 7px !important;
  background: #e7f0e8 !important;
  color: #68776d !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  white-space: nowrap !important;
}

.v0dr-image-box {
  position: relative !important;
  height: 208px !important;
  width: 100% !important;
  overflow: hidden !important;
  border-radius: 14px !important;
  background: #eaf2ec !important;
}

.v0dr-image-box img {
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: contain !important;
  padding: 8px !important;
}

.v0dr-image-box::after {
  content: "" !important;
  pointer-events: none !important;
  position: absolute !important;
  inset: 0 !important;
  border-radius: 14px !important;
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .05) !important;
}

.v0dr-card canvas,
.v0dr-card .canvas-container {
  position: absolute !important;
  left: -99999px !important;
  top: -99999px !important;
  width: 600px !important;
  height: 700px !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

.v0dr-assets,
.v0dr-json {
  margin-top: 24px !important;
  padding: 20px !important;
  border-radius: 22px !important;
  border: 1px solid rgba(16, 66, 38, .13) !important;
  background: #ffffff !important;
  box-shadow: 0 8px 20px rgba(7, 17, 11, .06) !important;
}

.v0dr-assets > header {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 14px !important;
  margin: 0 0 16px !important;
}

.v0dr-assets h3 {
  margin: 0 !important;
  color: #07110b !important;
  font-size: 18px !important;
  font-weight: 800 !important;
  line-height: 1.1 !important;
}

.v0dr-assets > header span {
  display: inline-flex !important;
  align-items: center !important;
  min-height: 26px !important;
  padding: 0 10px !important;
  border-radius: 10px !important;
  background: #e7f0e8 !important;
  color: #68776d !important;
  font-size: 12px !important;
  font-weight: 700 !important;
}

.v0dr-assets-grid {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 12px !important;
}

.v0dr-asset {
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  min-width: 0 !important;
  padding: 12px !important;
  border-radius: 14px !important;
  border: 1px solid rgba(16, 66, 38, .13) !important;
  background: #ffffff !important;
  box-shadow: 0 5px 14px rgba(7, 17, 11, .05) !important;
}

.v0dr-asset img {
  width: 56px !important;
  height: 56px !important;
  flex: 0 0 56px !important;
  object-fit: contain !important;
  padding: 4px !important;
  border-radius: 10px !important;
  background: #eaf2ec !important;
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .05) !important;
}

.v0dr-asset div {
  min-width: 0 !important;
  flex: 1 1 auto !important;
}

.v0dr-asset strong {
  display: block !important;
  color: #07110b !important;
  font-size: 14px !important;
  line-height: 1.1 !important;
  font-weight: 800 !important;
}

.v0dr-asset p {
  margin: 4px 0 0 !important;
  max-width: 100% !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
  color: #68776d !important;
  font-size: 12px !important;
}

.v0dr-asset a {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex: 0 0 auto !important;
  min-height: 32px !important;
  padding: 0 12px !important;
  border-radius: 10px !important;
  background: #16864a !important;
  color: #ffffff !important;
  text-decoration: none !important;
  font-size: 12px !important;
  font-weight: 800 !important;
  box-shadow: 0 8px 18px rgba(22, 134, 74, .18) !important;
}

.v0dr-json {
  padding: 0 !important;
  overflow: hidden !important;
}

.v0dr-json summary {
  display: flex !important;
  align-items: center !important;
  min-height: 52px !important;
  padding: 0 20px !important;
  cursor: pointer !important;
  color: #07110b !important;
  font-size: 14px !important;
  font-weight: 800 !important;
}

.v0dr-json pre {
  max-height: 320px !important;
  overflow: auto !important;
  margin: 0 !important;
  padding: 16px !important;
  border-top: 1px solid rgba(16, 66, 38, .13) !important;
  background: #07110b !important;
  color: #dff8e5 !important;
  font-size: 11px !important;
}

.admin-sidebar a.admin-nav-designs::before,
.admin-sidebar a[href*="view=designs"]::before {
  content: none !important;
  display: none !important;
}

.admin-sidebar a.admin-nav-designs {
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
}

.admin-sidebar a.admin-nav-designs .admin-nav-icon {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 17px !important;
  height: 17px !important;
  min-width: 17px !important;
  color: currentColor !important;
  font-size: 17px !important;
  font-weight: 950 !important;
  line-height: 1 !important;
}

@media (max-width: 1200px) {
  .v0dr-preview-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  .v0dr-assets-grid {
    grid-template-columns: 1fr !important;
  }
}

@media (max-width: 760px) {
  .v0dr-header {
    display: grid !important;
  }

  .v0dr-preview-grid {
    grid-template-columns: 1fr !important;
  }

  .v0dr-image-box {
    height: 240px !important;
  }

  .v0dr-asset {
    align-items: flex-start !important;
  }
}

/* v0dr final tuning, smaller green image background and clickable active cards */
.v0dr-card {
  cursor: pointer !important;
}

.v0dr-card header {
  gap: 6px !important;
}

.v0dr-card header strong {
  white-space: nowrap !important;
  font-size: 13px !important;
}

.v0dr-card header span {
  font-size: 11px !important;
  padding: 0 7px !important;
}

.v0dr-image-box {
  display: grid !important;
  place-items: center !important;
  background: transparent !important;
  box-shadow: none !important;
}

.v0dr-image-box::after {
  display: none !important;
}

.v0dr-image-box img {
  width: calc(100% - 22px) !important;
  height: calc(100% - 22px) !important;
  object-fit: contain !important;
  padding: 7px !important;
  border-radius: 13px !important;
  background: #eaf2ec !important;
  box-shadow: inset 0 0 0 1px rgba(16, 66, 38, .08) !important;
}

.v0dr-card.is-active {
  border-color: #16864a !important;
  outline: 1px solid #16864a !important;
}

.v0dr-card:not(.is-active) {
  outline: none !important;
}

.v0dr-card:not(.is-active)::after {
  display: none !important;
}

/* tighter spacing for design preview cards */
.v0dr-card {
  padding: 12px !important;
}

.v0dr-card header {
  margin-bottom: 8px !important;
}

.v0dr-image-box {
  padding: 8px !important;
  border-radius: 16px !important;
}

.v0dr-image-box img {
  width: calc(100% - 12px) !important;
  height: calc(100% - 12px) !important;
  padding: 4px !important;
}

/* v0dr correct tight spacing, no image enlargement */
.v0dr-card {
  padding: 10px !important;
  gap: 6px !important;
}

.v0dr-card header {
  min-height: 24px !important;
  margin: 0 0 4px !important;
  padding: 0 !important;
}

.v0dr-card header strong {
  font-size: 13px !important;
  line-height: 1 !important;
}

.v0dr-card header span {
  min-height: 21px !important;
  padding: 0 7px !important;
  font-size: 11px !important;
  line-height: 1 !important;
}

.v0dr-image-box {
  height: 178px !important;
  margin: 0 !important;
  padding: 0 !important;
  border-radius: 13px !important;
  background: #eaf2ec !important;
}

.v0dr-image-box img {
  width: 100% !important;
  height: 100% !important;
  padding: 8px !important;
  object-fit: contain !important;
  border-radius: 13px !important;
  background: transparent !important;
  box-shadow: none !important;
  box-sizing: border-box !important;
}

.v0dr-preview-grid {
  gap: 12px !important;
}

.v0dr-preview-wrap {
  padding: 14px !important;
}

/* Customer admin page redesign */
.cadmin-shell {
  align-items: start !important;
}

.cadmin-main {
  width: 100% !important;
  min-width: 0 !important;
}

.cadmin-head {
  margin: 0 0 24px !important;
}

.cadmin-head p {
  margin: 0 0 6px !important;
  color: #007a3d !important;
  font-size: 12px !important;
  font-weight: 950 !important;
  letter-spacing: .14em !important;
  text-transform: uppercase !important;
}

.cadmin-head h1 {
  margin: 0 !important;
  color: #06110a !important;
  font-size: 34px !important;
  line-height: 1 !important;
  letter-spacing: -.045em !important;
}

.cadmin-head span {
  display: block !important;
  margin-top: 10px !important;
  color: rgba(6, 17, 10, .68) !important;
  font-size: 14px !important;
}

.cadmin-success {
  margin: 0 0 16px !important;
  padding: 12px 14px !important;
  border-radius: 16px !important;
  border: 1px solid rgba(47, 164, 94, .28) !important;
  background: rgba(47, 164, 94, .12) !important;
  color: #0d6f3a !important;
  font-size: 13px !important;
  font-weight: 850 !important;
}

.cadmin-search {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) 104px !important;
  gap: 12px !important;
  margin: 0 0 26px !important;
}

.cadmin-search label {
  position: relative !important;
  margin: 0 !important;
}

.cadmin-search label > span {
  position: absolute !important;
  left: 13px !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  color: rgba(6, 17, 10, .56) !important;
  font-size: 18px !important;
  line-height: 1 !important;
}

.cadmin-search input {
  width: 100% !important;
  min-height: 36px !important;
  padding: 0 14px 0 38px !important;
  border-radius: 15px !important;
  border: 1px solid rgba(16, 66, 38, .16) !important;
  background: rgba(255, 255, 255, .72) !important;
  color: #06110a !important;
  font-size: 14px !important;
  outline: none !important;
}

.cadmin-search input:focus {
  border-color: rgba(0, 122, 61, .42) !important;
  box-shadow: 0 0 0 4px rgba(0, 122, 61, .08) !important;
}

.cadmin-search button {
  min-height: 36px !important;
  border: 0 !important;
  border-radius: 15px !important;
  background: #007a3d !important;
  color: #ffffff !important;
  font-size: 14px !important;
  font-weight: 950 !important;
  cursor: pointer !important;
}

.cadmin-layout {
  display: grid !important;
  grid-template-columns: 260px minmax(0, 1fr) !important;
  gap: 18px !important;
  align-items: start !important;
}

.cadmin-list {
  display: grid !important;
  gap: 10px !important;
}

.cadmin-list-card {
  display: flex !important;
  align-items: flex-start !important;
  justify-content: space-between !important;
  gap: 12px !important;
  min-height: 78px !important;
  padding: 14px !important;
  border-radius: 16px !important;
  border: 1px solid rgba(16, 66, 38, .13) !important;
  background: rgba(255, 255, 255, .9) !important;
  color: #06110a !important;
  text-decoration: none !important;
  box-shadow: 0 8px 22px rgba(7, 17, 11, .05) !important;
}

.cadmin-list-card.is-active {
  border-color: #16864a !important;
  background: rgba(47, 164, 94, .12) !important;
  box-shadow: 0 14px 34px rgba(7, 17, 11, .08) !important;
}

.cadmin-list-card strong {
  display: block !important;
  margin-bottom: 5px !important;
  font-size: 14px !important;
  line-height: 1.1 !important;
  font-weight: 950 !important;
}

.cadmin-list-card span {
  display: block !important;
  color: rgba(6, 17, 10, .66) !important;
  font-size: 12px !important;
  line-height: 1.25 !important;
  word-break: break-word !important;
}

.cadmin-list-card small {
  display: block !important;
  margin-top: 5px !important;
  color: rgba(6, 17, 10, .62) !important;
  font-size: 12px !important;
  line-height: 1.25 !important;
}

.cadmin-list-card em {
  flex: 0 0 auto !important;
  display: inline-flex !important;
  align-items: center !important;
  min-height: 24px !important;
  padding: 0 9px !important;
  border-radius: 999px !important;
  border: 1px solid rgba(16, 66, 38, .12) !important;
  background: rgba(255, 175, 0, .1) !important;
  color: #9b6500 !important;
  font-style: normal !important;
  font-size: 11px !important;
  font-weight: 850 !important;
}

.cadmin-list-card em.status-aktiv,
.cadmin-list-card em.status-bezahlt,
.cadmin-list-card em.status-freigegeben {
  background: rgba(47, 164, 94, .12) !important;
  border-color: rgba(47, 164, 94, .26) !important;
  color: #0d6f3a !important;
}

.cadmin-detail {
  padding: 24px !important;
  border-radius: 22px !important;
  border: 1px solid rgba(16, 66, 38, .13) !important;
  background: rgba(255, 255, 255, .94) !important;
  box-shadow: 0 16px 42px rgba(7, 17, 11, .075) !important;
}

.cadmin-detail-head {
  display: flex !important;
  align-items: flex-start !important;
  justify-content: space-between !important;
  gap: 20px !important;
  padding-bottom: 24px !important;
  margin-bottom: 24px !important;
  border-bottom: 1px solid rgba(16, 66, 38, .14) !important;
}

.cadmin-detail-head h2 {
  margin: 0 !important;
  color: #06110a !important;
  font-size: 24px !important;
  line-height: 1.1 !important;
  letter-spacing: -.035em !important;
}

.cadmin-detail-head p {
  margin: 7px 0 0 !important;
  color: rgba(6, 17, 10, .62) !important;
  font-size: 14px !important;
}

.cadmin-detail-head > span {
  display: inline-flex !important;
  align-items: center !important;
  min-height: 28px !important;
  padding: 0 12px !important;
  border-radius: 999px !important;
  border: 1px solid rgba(16, 66, 38, .16) !important;
  background: rgba(47, 164, 94, .12) !important;
  color: #163b24 !important;
  font-size: 13px !important;
  font-weight: 850 !important;
}

.cadmin-form-grid {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 16px !important;
}

.cadmin-form-grid label,
.cadmin-notes {
  display: grid !important;
  gap: 7px !important;
  margin: 0 !important;
}

.cadmin-form-grid label > span,
.cadmin-notes > span {
  color: rgba(6, 17, 10, .72) !important;
  font-size: 12px !important;
  font-weight: 950 !important;
  letter-spacing: .04em !important;
  text-transform: uppercase !important;
}

.cadmin-form-grid input,
.cadmin-form-grid select,
.cadmin-notes textarea {
  width: 100% !important;
  min-height: 34px !important;
  padding: 0 11px !important;
  border-radius: 13px !important;
  border: 1px solid rgba(16, 66, 38, .16) !important;
  background: rgba(255, 255, 255, .92) !important;
  color: #06110a !important;
  font-size: 14px !important;
  outline: none !important;
  box-sizing: border-box !important;
}

.cadmin-form-grid select {
  width: fit-content !important;
  padding-right: 28px !important;
}

.cadmin-notes {
  margin-top: 18px !important;
}

.cadmin-notes textarea {
  min-height: 98px !important;
  padding: 12px !important;
  resize: vertical !important;
}

.cadmin-form-grid input:focus,
.cadmin-form-grid select:focus,
.cadmin-notes textarea:focus {
  border-color: rgba(0, 122, 61, .42) !important;
  box-shadow: 0 0 0 4px rgba(0, 122, 61, .08) !important;
}

.cadmin-save {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-height: 42px !important;
  margin-top: 22px !important;
  padding: 0 20px !important;
  border: 0 !important;
  border-radius: 15px !important;
  background: #007a3d !important;
  color: #ffffff !important;
  font-size: 14px !important;
  font-weight: 950 !important;
  cursor: pointer !important;
}

.cadmin-orders {
  margin-top: 24px !important;
  padding-top: 24px !important;
  border-top: 1px solid rgba(16, 66, 38, .14) !important;
}

.cadmin-orders > header {
  display: flex !important;
  align-items: flex-start !important;
  justify-content: space-between !important;
  gap: 18px !important;
  margin-bottom: 16px !important;
}

.cadmin-orders h3 {
  margin: 0 !important;
  color: #06110a !important;
  font-size: 18px !important;
  font-weight: 950 !important;
}

.cadmin-orders p {
  margin: 8px 0 0 !important;
  color: rgba(6, 17, 10, .62) !important;
  font-size: 14px !important;
}

.cadmin-orders > header > span {
  color: rgba(6, 17, 10, .62) !important;
  font-size: 13px !important;
  white-space: nowrap !important;
}

.cadmin-order-list {
  display: grid !important;
  gap: 10px !important;
}

.cadmin-order {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) 140px 86px 24px !important;
  gap: 14px !important;
  align-items: center !important;
  min-height: 68px !important;
  padding: 12px 16px !important;
  border-radius: 16px !important;
  border: 1px solid rgba(16, 66, 38, .14) !important;
  background: rgba(255, 255, 255, .88) !important;
}

.cadmin-order strong {
  display: block !important;
  color: #06110a !important;
  font-size: 14px !important;
  line-height: 1.1 !important;
  font-weight: 950 !important;
}

.cadmin-badge {
  display: inline-flex !important;
  align-items: center !important;
  min-height: 22px !important;
  margin-top: 6px !important;
  padding: 0 8px !important;
  border-radius: 999px !important;
  border: 1px solid rgba(47, 164, 94, .26) !important;
  background: rgba(47, 164, 94, .1) !important;
  color: #0d6f3a !important;
  font-size: 11px !important;
  font-weight: 850 !important;
}

.cadmin-badge.payment {
  border-color: rgba(0, 122, 61, .22) !important;
  background: rgba(0, 122, 61, .08) !important;
  color: #007a3d !important;
}

.cadmin-order-date span,
.cadmin-order-date small {
  display: block !important;
  text-align: right !important;
  color: rgba(6, 17, 10, .62) !important;
  font-size: 12px !important;
  line-height: 1.35 !important;
}

.cadmin-order a {
  color: rgba(6, 17, 10, .58) !important;
  text-decoration: none !important;
  font-size: 18px !important;
  line-height: 1 !important;
}

.cadmin-empty,
.cadmin-order-empty {
  padding: 18px !important;
  border-radius: 18px !important;
  border: 1px solid rgba(16, 66, 38, .13) !important;
  background: rgba(255, 255, 255, .84) !important;
  color: rgba(6, 17, 10, .64) !important;
  font-size: 14px !important;
}

@media (max-width: 1080px) {
  .cadmin-layout {
    grid-template-columns: 1fr !important;
  }

  .cadmin-list {
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)) !important;
  }
}

@media (max-width: 760px) {
  .cadmin-search {
    grid-template-columns: 1fr !important;
  }

  .cadmin-form-grid {
    grid-template-columns: 1fr !important;
  }

  .cadmin-order {
    grid-template-columns: 1fr !important;
  }

  .cadmin-order-date span,
  .cadmin-order-date small {
    text-align: left !important;
  }
}

/* Account customer profile redesign */
.acct-page {
  width: min(960px, calc(100% - 40px)) !important;
  margin: 0 auto !important;
  padding: 34px 0 72px !important;
}

.acct-head {
  display: flex !important;
  align-items: flex-start !important;
  justify-content: space-between !important;
  gap: 24px !important;
  margin: 0 0 34px !important;
}

.acct-head p {
  margin: 0 0 6px !important;
  color: #007a3d !important;
  font-size: 12px !important;
  font-weight: 950 !important;
  letter-spacing: .14em !important;
  text-transform: uppercase !important;
}

.acct-head h1 {
  margin: 0 !important;
  color: #06110a !important;
  font-size: 38px !important;
  line-height: 1 !important;
  letter-spacing: -.055em !important;
}

.acct-head span {
  display: block !important;
  margin-top: 10px !important;
  color: rgba(6, 17, 10, .62) !important;
  font-size: 14px !important;
}

.acct-logout {
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  min-height: 42px !important;
  padding: 0 18px !important;
  border-radius: 16px !important;
  background: #007a3d !important;
  color: #ffffff !important;
  text-decoration: none !important;
  font-size: 14px !important;
  font-weight: 950 !important;
  box-shadow: 0 14px 34px rgba(0, 122, 61, .22) !important;
}

.acct-success {
  margin: -14px 0 22px !important;
  padding: 12px 14px !important;
  border-radius: 16px !important;
  border: 1px solid rgba(47, 164, 94, .28) !important;
  background: rgba(47, 164, 94, .12) !important;
  color: #0d6f3a !important;
  font-size: 13px !important;
  font-weight: 850 !important;
}

.acct-layout {
  display: grid !important;
  grid-template-columns: 256px minmax(0, 1fr) !important;
  gap: 22px !important;
  align-items: start !important;
}

.acct-profile-col {
  display: grid !important;
  gap: 16px !important;
}

.acct-card {
  border-radius: 22px !important;
  border: 1px solid rgba(16, 66, 38, .14) !important;
  background: rgba(255, 255, 255, .94) !important;
  box-shadow: 0 14px 34px rgba(7, 17, 11, .075) !important;
}

.acct-profile-card {
  padding: 24px !important;
}

.acct-person {
  display: grid !important;
  grid-template-columns: 56px minmax(0, 1fr) !important;
  gap: 16px !important;
  align-items: center !important;
  padding-bottom: 20px !important;
  margin-bottom: 20px !important;
  border-bottom: 1px solid rgba(16, 66, 38, .14) !important;
}

.acct-avatar {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 56px !important;
  height: 56px !important;
  border-radius: 20px !important;
  background: rgba(47, 164, 94, .12) !important;
  color: #007a3d !important;
  font-size: 18px !important;
  font-weight: 950 !important;
}

.acct-person strong {
  display: block !important;
  color: #06110a !important;
  font-size: 16px !important;
  line-height: 1.2 !important;
}

.acct-person span {
  display: block !important;
  margin-top: 5px !important;
  max-width: 150px !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
  color: rgba(6, 17, 10, .58) !important;
  font-size: 14px !important;
}

.acct-profile-card dl {
  display: grid !important;
  gap: 16px !important;
  margin: 0 !important;
}

.acct-profile-card dt {
  margin: 0 0 7px !important;
  color: rgba(6, 17, 10, .6) !important;
  font-size: 10px !important;
  font-weight: 950 !important;
  letter-spacing: .12em !important;
  text-transform: uppercase !important;
}

.acct-profile-card dd {
  margin: 0 !important;
  color: #06110a !important;
  font-size: 14px !important;
  font-weight: 850 !important;
  word-break: break-word !important;
}

.acct-role {
  display: inline-flex !important;
  align-items: center !important;
  min-height: 24px !important;
  padding: 0 10px !important;
  border-radius: 999px !important;
  border: 1px solid rgba(16, 66, 38, .14) !important;
  background: rgba(47, 164, 94, .12) !important;
  color: #06110a !important;
  font-size: 12px !important;
  font-weight: 950 !important;
}

.acct-edit-card {
  padding: 20px !important;
}

.acct-edit-card h2,
.acct-orders-card h2 {
  margin: 0 0 16px !important;
  color: #06110a !important;
  font-size: 18px !important;
  font-weight: 950 !important;
  line-height: 1.1 !important;
}

.acct-edit-card p {
  margin: -8px 0 16px !important;
  color: rgba(6, 17, 10, .58) !important;
  font-size: 13px !important;
  line-height: 1.4 !important;
}

.acct-edit-card form {
  display: grid !important;
  gap: 12px !important;
}

.acct-form-two {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 10px !important;
}

.acct-edit-card label {
  display: grid !important;
  gap: 6px !important;
  margin: 0 !important;
}

.acct-edit-card label span {
  color: rgba(6, 17, 10, .64) !important;
  font-size: 10px !important;
  font-weight: 950 !important;
  letter-spacing: .1em !important;
  text-transform: uppercase !important;
}

.acct-edit-card input,
.acct-edit-card textarea {
  width: 100% !important;
  min-height: 34px !important;
  padding: 0 11px !important;
  border-radius: 13px !important;
  border: 1px solid rgba(16, 66, 38, .16) !important;
  background: rgba(255, 255, 255, .92) !important;
  color: #06110a !important;
  font-size: 14px !important;
  outline: none !important;
  box-sizing: border-box !important;
}

.acct-edit-card textarea {
  min-height: 74px !important;
  padding: 10px 11px !important;
  resize: vertical !important;
}

.acct-edit-card input:focus,
.acct-edit-card textarea:focus {
  border-color: rgba(0, 122, 61, .42) !important;
  box-shadow: 0 0 0 4px rgba(0, 122, 61, .08) !important;
}

.acct-edit-card button {
  min-height: 40px !important;
  margin-top: 6px !important;
  border: 0 !important;
  border-radius: 15px !important;
  background: #007a3d !important;
  color: #ffffff !important;
  font-size: 14px !important;
  font-weight: 950 !important;
  cursor: pointer !important;
}

.acct-orders-card {
  padding: 20px !important;
}

.acct-order-list {
  display: grid !important;
  gap: 10px !important;
}

.acct-order {
  border-radius: 18px !important;
  border: 1px solid rgba(16, 66, 38, .14) !important;
  background: rgba(255, 255, 255, .88) !important;
  overflow: hidden !important;
}

.acct-order summary {
  min-height: 66px !important;
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto !important;
  gap: 16px !important;
  align-items: center !important;
  padding: 12px 16px !important;
  cursor: pointer !important;
  list-style: none !important;
}

.acct-order summary::-webkit-details-marker {
  display: none !important;
}

.acct-order summary strong {
  display: block !important;
  color: #06110a !important;
  font-size: 15px !important;
  font-weight: 950 !important;
  line-height: 1.1 !important;
}

.acct-order summary span {
  display: block !important;
  margin-top: 5px !important;
  color: rgba(6, 17, 10, .58) !important;
  font-size: 12px !important;
}

.acct-order-summary-right {
  display: flex !important;
  align-items: center !important;
  gap: 14px !important;
}

.acct-order-summary-right em {
  display: inline-flex !important;
  align-items: center !important;
  min-height: 24px !important;
  padding: 0 10px !important;
  border-radius: 999px !important;
  border: 1px solid rgba(255, 176, 0, .24) !important;
  background: rgba(255, 176, 0, .12) !important;
  color: #9b6500 !important;
  font-style: normal !important;
  font-size: 12px !important;
  font-weight: 850 !important;
  white-space: nowrap !important;
}

.acct-order-summary-right strong {
  white-space: nowrap !important;
}

.acct-order-summary-right > span {
  margin: 0 !important;
  color: rgba(6, 17, 10, .58) !important;
  font-size: 16px !important;
}

.acct-order[open] .acct-order-summary-right > span {
  transform: rotate(180deg) !important;
}

.acct-order-body {
  padding: 0 16px 16px !important;
  border-top: 1px solid rgba(16, 66, 38, .12) !important;
  background: rgba(246, 251, 246, .62) !important;
}

.acct-order-section {
  padding-top: 14px !important;
}

.acct-order-section h3 {
  margin: 0 0 6px !important;
  color: rgba(6, 17, 10, .62) !important;
  font-size: 11px !important;
  font-weight: 950 !important;
  letter-spacing: .1em !important;
  text-transform: uppercase !important;
}

.acct-order-section p {
  margin: 0 !important;
  color: #06110a !important;
  font-size: 14px !important;
  line-height: 1.55 !important;
}

.acct-items {
  border-radius: 16px !important;
  border: 1px solid rgba(16, 66, 38, .14) !important;
  background: rgba(255, 255, 255, .86) !important;
  overflow: hidden !important;
}

.acct-item,
.acct-total {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto !important;
  gap: 16px !important;
  align-items: center !important;
  padding: 14px !important;
}

.acct-item + .acct-item,
.acct-total {
  border-top: 1px solid rgba(16, 66, 38, .12) !important;
}

.acct-item strong,
.acct-total strong {
  color: #06110a !important;
  font-size: 14px !important;
  font-weight: 950 !important;
}

.acct-item span {
  display: block !important;
  margin-top: 5px !important;
  color: rgba(6, 17, 10, .58) !important;
  font-size: 12px !important;
}

.acct-item small {
  display: block !important;
  margin-top: 4px !important;
  color: #007a3d !important;
  font-size: 12px !important;
  font-weight: 850 !important;
}

.acct-total {
  background: rgba(47, 164, 94, .10) !important;
}

.acct-total span {
  color: rgba(6, 17, 10, .62) !important;
  font-size: 12px !important;
  font-weight: 950 !important;
  letter-spacing: .08em !important;
  text-transform: uppercase !important;
}

.acct-empty {
  padding: 18px !important;
  border-radius: 16px !important;
  border: 1px solid rgba(16, 66, 38, .13) !important;
  background: rgba(246, 251, 246, .82) !important;
  color: rgba(6, 17, 10, .62) !important;
  font-size: 14px !important;
}

@media (max-width: 980px) {
  .acct-layout {
    grid-template-columns: 1fr !important;
  }

  .acct-profile-col {
    grid-template-columns: 1fr !important;
  }
}

@media (max-width: 680px) {
  .acct-page {
    width: min(100% - 24px, 960px) !important;
  }

  .acct-head {
    display: grid !important;
  }

  .acct-form-two {
    grid-template-columns: 1fr !important;
  }

  .acct-order summary,
  .acct-item,
  .acct-total {
    grid-template-columns: 1fr !important;
  }

  .acct-order-summary-right {
    justify-content: space-between !important;
  }
}

/* =========================================================
   USERS / SONDERROLLEN, Backoffice UI Rework
   ========================================================= */

body.tw-users-view .admin-content,
body.tw-users-view .admin-panel-content,
body.tw-users-view .admin-main,
body.tw-users-view .admin-view-panel {
  max-width: 100%;
}

body.tw-users-view .tw-users-root {
  display: block;
}

body.tw-users-view .tw-users-heading-kicker {
  margin: 0 0 8px;
  color: #0a8a43;
  font-size: 12px;
  font-weight: 900;
  letter-spacing: .14em;
  text-transform: uppercase;
}

body.tw-users-view .tw-users-main-title {
  margin: 0;
  color: #07110b;
  font-size: clamp(34px, 4vw, 56px);
  line-height: .98;
  letter-spacing: -.045em;
  font-weight: 950;
}

body.tw-users-view .tw-users-subtitle {
  margin: 10px 0 28px;
  color: rgba(7, 17, 11, .62);
  font-size: 16px;
  line-height: 1.55;
  max-width: 900px;
}

/* Create user card */
body.tw-users-view .tw-users-create-card {
  padding: 24px;
  border-radius: 28px;
  border: 1px solid rgba(16, 66, 38, .12);
  background: rgba(255, 255, 255, .72);
  box-shadow: 0 18px 38px rgba(14, 42, 24, .08);
  margin: 0 0 28px;
}

body.tw-users-view .tw-users-create-card .tw-create-title {
  margin: 0 0 18px;
  color: #07110b;
  font-size: 34px;
  line-height: 1.02;
  font-weight: 950;
  letter-spacing: -.04em;
}

body.tw-users-view .tw-users-create-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 20px 18px;
}

body.tw-users-view .tw-users-field {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

body.tw-users-view .tw-users-field-label {
  color: rgba(7, 17, 11, .65);
  font-size: 11px;
  font-weight: 900;
  letter-spacing: .12em;
  text-transform: uppercase;
}

body.tw-users-view .tw-users-field input,
body.tw-users-view .tw-users-field select,
body.tw-users-view .tw-users-field textarea,
body.tw-users-view .tw-users-create-card input,
body.tw-users-view .tw-users-create-card select,
body.tw-users-view .tw-users-create-card textarea {
  width: 100%;
  min-height: 42px;
  padding: 0 16px;
  border-radius: 18px;
  border: 1px solid rgba(16, 66, 38, .14);
  background: #edf5eb;
  color: #07110b;
  font-size: 15px;
  font-weight: 650;
  outline: none;
  box-sizing: border-box;
  transition: border-color .18s ease, box-shadow .18s ease, background .18s ease;
}

body.tw-users-view .tw-users-create-card textarea {
  min-height: 110px;
  padding: 14px 16px;
  resize: vertical;
}

body.tw-users-view .tw-users-field input:focus,
body.tw-users-view .tw-users-field select:focus,
body.tw-users-view .tw-users-field textarea:focus,
body.tw-users-view .tw-users-create-card input:focus,
body.tw-users-view .tw-users-create-card select:focus,
body.tw-users-view .tw-users-create-card textarea:focus {
  border-color: rgba(8, 122, 61, .35);
  box-shadow: 0 0 0 4px rgba(8, 122, 61, .10);
  background: #f5fbf4;
}

body.tw-users-view .tw-users-role-wrap {
  position: relative;
}

body.tw-users-view .tw-users-role-wrap::before {
  content: "";
  position: absolute;
  left: 15px;
  top: 50%;
  width: 16px;
  height: 16px;
  transform: translateY(-50%);
  opacity: .7;
  pointer-events: none;
  background-repeat: no-repeat;
  background-position: center;
  background-size: 16px 16px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='none' stroke='%2307110b' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 13v-1a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v1'/%3E%3Ccircle cx='6.5' cy='4' r='3'/%3E%3Cpath d='M15 8v6'/%3E%3Cpath d='M12 11h6'/%3E%3C/svg%3E");
}

body.tw-users-view .tw-users-role-wrap select {
  padding-left: 40px !important;
}

body.tw-users-view .tw-users-create-actions {
  grid-column: 1 / -1;
  display: flex;
  justify-content: flex-start;
  padding-top: 4px;
}

body.tw-users-view .tw-users-primary-btn,
body.tw-users-view .tw-user-card .tw-user-edit,
body.tw-users-view .tw-user-card .tw-user-delete {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 0 20px;
  border-radius: 999px;
  font-size: 15px;
  font-weight: 850;
  text-decoration: none;
  transition: transform .18s ease, box-shadow .18s ease, background .18s ease, color .18s ease, border-color .18s ease;
  cursor: pointer;
  white-space: nowrap;
}

body.tw-users-view .tw-users-primary-btn {
  border: 0;
  background: #008537;
  color: #fff;
  box-shadow: 0 14px 28px rgba(0, 133, 55, .22);
}

body.tw-users-view .tw-users-primary-btn:hover,
body.tw-users-view .tw-user-card .tw-user-edit:hover,
body.tw-users-view .tw-user-card .tw-user-delete:hover {
  transform: translateY(-1px);
}

body.tw-users-view .tw-users-primary-btn:hover,
body.tw-users-view .tw-user-card .tw-user-edit:hover {
  background: #00702f;
  color: #fff;
  box-shadow: 0 16px 30px rgba(0, 112, 47, .25);
}

body.tw-users-view .tw-user-card .tw-user-delete {
  border: 1px solid rgba(255, 74, 74, .25);
  background: rgba(255, 255, 255, .86);
  color: #ff4545;
}

body.tw-users-view .tw-user-card .tw-user-delete:hover {
  border-color: rgba(255, 74, 74, .38);
  background: rgba(255, 74, 74, .08);
  color: #ec2a2a;
}

/* List meta */
body.tw-users-view .tw-users-count {
  margin: 6px 0 14px;
  color: rgba(7, 17, 11, .62);
  font-size: 13px;
  font-weight: 800;
  letter-spacing: .02em;
  text-transform: uppercase;
}

/* User cards */
body.tw-users-view .tw-users-list {
  display: grid;
  gap: 16px;
}

body.tw-users-view .tw-user-card {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 18px;
  padding: 18px 22px;
  border-radius: 26px;
  border: 1px solid rgba(16, 66, 38, .12);
  background: rgba(255, 255, 255, .82);
  box-shadow: 0 12px 30px rgba(14, 42, 24, .06);
}

body.tw-users-view .tw-user-avatar {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background: #dce7dd;
  color: #008537;
  font-size: 22px;
  font-weight: 900;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 50px;
}

body.tw-users-view .tw-user-main {
  min-width: 0;
}

body.tw-users-view .tw-user-name {
  margin: 0;
  color: #07110b;
  font-size: 18px;
  line-height: 1.1;
  font-weight: 900;
}

body.tw-users-view .tw-user-email {
  margin: 6px 0 0;
  color: rgba(7, 17, 11, .62);
  font-size: 15px;
  line-height: 1.35;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

body.tw-users-view .tw-user-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
  flex-wrap: wrap;
}

body.tw-users-view .tw-user-role-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 32px;
  padding: 0 14px;
  border-radius: 999px;
  border: 1px solid rgba(16, 66, 38, .14);
  background: #eef5ed;
  color: #0a6d38;
  font-size: 14px;
  font-weight: 850;
  line-height: 1;
}

body.tw-users-view .tw-user-role-pill.role-admin {
  color: #0a6d38;
  background: #eaf5eb;
  border-color: rgba(10, 109, 56, .18);
}

body.tw-users-view .tw-user-role-pill.role-shop_manager {
  color: #d57a00;
  background: #fff6e9;
  border-color: rgba(213, 122, 0, .22);
}

body.tw-users-view .tw-user-role-pill.role-support {
  color: #0c7f3d;
  background: #edf7ef;
  border-color: rgba(12, 127, 61, .16);
}

body.tw-users-view .tw-user-card .tw-user-edit {
  border: 0;
  background: #008537;
  color: #fff;
  box-shadow: 0 12px 24px rgba(0, 133, 55, .18);
}

body.tw-users-view .tw-user-card .tw-user-delete {
  min-width: 116px;
}

/* remove old awkward spacing in users page */
body.tw-users-view .tw-users-root hr,
body.tw-users-view .tw-users-root .admin-divider {
  display: none !important;
}

body.tw-users-view .tw-users-root > .button,
body.tw-users-view .tw-users-root > .admin-button {
  margin-bottom: 18px;
}

@media (max-width: 920px) {
  body.tw-users-view .tw-users-create-grid {
    grid-template-columns: 1fr;
  }

  body.tw-users-view .tw-user-card {
    grid-template-columns: 1fr;
    align-items: stretch;
  }

  body.tw-users-view .tw-user-main {
    order: 1;
  }

  body.tw-users-view .tw-user-actions {
    justify-content: flex-start;
    order: 2;
  }
}

/* TAVAWEAR ORDER ACCORDION MATCH START */
.admin-orders-list {
  gap: 18px !important;
}

.admin-order-row-expandable {
  position: relative !important;
  overflow: hidden !important;
  border: 1px solid rgba(16, 66, 38, .12) !important;
  border-radius: 26px !important;
  background: rgba(255, 255, 255, .74) !important;
  box-shadow: 0 10px 24px rgba(42, 91, 59, .08) !important;
  backdrop-filter: blur(4px) !important;
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease, background-color .18s ease !important;
}

.admin-order-row-expandable:hover {
  transform: translateY(-2px) !important;
  border-color: rgba(47, 164, 94, .28) !important;
  box-shadow: 0 18px 34px rgba(42, 91, 59, .12) !important;
  background: rgba(255, 255, 255, .88) !important;
}

.admin-order-row-expandable[open] {
  background: rgba(255, 255, 255, .94) !important;
  border-color: rgba(47, 164, 94, .22) !important;
  box-shadow: 0 20px 36px rgba(42, 91, 59, .12) !important;
}

.admin-order-summary {
  position: relative !important;
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto !important;
  gap: 18px !important;
  align-items: center !important;
  padding: 20px 20px 20px 48px !important;
  list-style: none !important;
}

.admin-order-summary::-webkit-details-marker {
  display: none !important;
}

.admin-order-summary::before {
  content: "›" !important;
  display: inline-grid !important;
  place-items: center !important;
  position: absolute !important;
  left: 18px !important;
  top: 50% !important;
  width: 18px !important;
  height: 18px !important;
  margin: 0 !important;
  border-radius: 999px !important;
  background: transparent !important;
  color: rgba(6, 17, 10, .72) !important;
  font-size: 24px !important;
  font-weight: 400 !important;
  line-height: 1 !important;
  transform: translateY(-54%) rotate(0deg) !important;
  transition: transform .18s ease, color .18s ease !important;
}

.admin-order-row-expandable:hover > .admin-order-summary::before {
  color: #168c43 !important;
}

.admin-order-row-expandable[open] > .admin-order-summary::before {
  transform: translateY(-54%) rotate(90deg) !important;
  color: #168c43 !important;
}

.admin-order-main {
  display: flex !important;
  align-items: center !important;
  gap: 14px !important;
  min-width: 0 !important;
}

.admin-order-main-top {
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  min-width: 0 !important;
  flex-wrap: wrap !important;
}

.admin-order-main h3 {
  margin: 0 !important;
  color: #06110a !important;
  font-size: 16px !important;
  font-weight: 950 !important;
  line-height: 1.15 !important;
}

.admin-order-row-expandable:hover .admin-order-main h3 {
  color: #168c43 !important;
}

.admin-order-meta {
  display: flex !important;
  align-items: center !important;
  gap: 22px !important;
}

.admin-order-meta p {
  margin: 0 !important;
  color: rgba(6, 17, 10, .62) !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  white-space: nowrap !important;
}

.admin-order-meta strong {
  color: #06110a !important;
  font-size: 18px !important;
  font-weight: 950 !important;
  white-space: nowrap !important;
}

.order-status-badge {
  min-height: 28px !important;
  padding: 0 12px !important;
  border: none !important;
  box-shadow: none !important;
  font-size: 12px !important;
  font-weight: 900 !important;
}

.order-status-neu,
.order-status-zu_pruefen {
  background: #f5e3ac !important;
  color: #a86a00 !important;
}

.order-status-bezahlt {
  background: #cfeee0 !important;
  color: #0e7c55 !important;
}

.order-status-in_produktion,
.order-status-versendet {
  background: #d7e1ff !important;
  color: #3450c5 !important;
}

.order-status-storniert {
  background: #f5d1d1 !important;
  color: #a33a3a !important;
}

.admin-order-expanded {
  padding: 0 0 18px !important;
  border-top: 1px solid rgba(16, 66, 38, .10) !important;
  background: rgba(245, 248, 244, .72) !important;
}

.admin-order-toolbar {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 16px !important;
  padding: 12px 18px !important;
  background: rgba(239, 243, 238, .88) !important;
  border-bottom: 1px solid rgba(16, 66, 38, .08) !important;
}

.admin-order-toolbar-label {
  color: rgba(6, 17, 10, .72) !important;
  font-size: 14px !important;
  font-weight: 600 !important;
}

.admin-order-status-form {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
}

.admin-order-status-form select {
  min-width: 122px !important;
  min-height: 38px !important;
}

.admin-order-status-form .button.small {
  min-height: 38px !important;
  padding: 0 16px !important;
}

.admin-order-expanded-grid {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 14px !important;
  padding: 20px 18px 0 !important;
  margin: 0 !important;
}

.admin-order-expanded-grid section {
  padding: 16px 18px !important;
  border-radius: 18px !important;
  border: 1px solid rgba(16, 66, 38, .12) !important;
  background: #ffffff !important;
}

.admin-order-expanded-items {
  margin: 18px 18px 0 !important;
  padding: 0 !important;
  border-radius: 18px !important;
  border: 1px solid rgba(16, 66, 38, .12) !important;
  background: #ffffff !important;
  overflow: hidden !important;
}

.admin-order-expanded-items > h4 {
  margin: 0 !important;
  padding: 14px 18px !important;
  border-bottom: 1px solid rgba(16, 66, 38, .10) !important;
}

.admin-order-expanded h4 {
  margin: 0 0 6px !important;
  font-size: 12px !important;
  font-weight: 900 !important;
  letter-spacing: .08em !important;
  text-transform: uppercase !important;
  color: rgba(6, 17, 10, .70) !important;
}

.admin-order-expanded p {
  margin: 0 !important;
  color: rgba(6, 17, 10, .78) !important;
  font-size: 14px !important;
  line-height: 1.5 !important;
}

.admin-order-expanded-item {
  padding: 18px !important;
}

.admin-order-expanded-item + .admin-order-expanded-item {
  border-top: 1px solid rgba(16, 66, 38, .10) !important;
}

.admin-order-expanded-item:hover {
  background: rgba(245, 248, 244, .9) !important;
}

.admin-order-expanded-item strong {
  font-size: 15px !important;
}

.admin-order-expanded-item span,
.admin-order-expanded-item em {
  font-size: 13px !important;
  color: rgba(6, 17, 10, .64) !important;
}

.admin-order-expanded-side {
  gap: 10px !important;
}

.admin-order-expanded-side .button {
  min-width: 150px !important;
  justify-content: center !important;
}

.admin-payment-lines {
  display: grid !important;
  gap: 10px !important;
}

.admin-payment-line {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  flex-wrap: wrap !important;
}

.admin-payment-badge {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-height: 28px !important;
  padding: 0 10px !important;
  border-radius: 999px !important;
  background: #f5e3ac !important;
  color: #a86a00 !important;
  font-size: 12px !important;
  font-weight: 900 !important;
}

.admin-payment-total {
  display: block !important;
  font-size: 15px !important;
  color: #06110a !important;
}

.admin-payment-total strong {
  font-size: 17px !important;
}

@media (max-width: 980px) {
  .admin-order-summary {
    grid-template-columns: 1fr !important;
    gap: 12px !important;
    padding: 18px 18px 18px 44px !important;
  }

  .admin-order-meta {
    justify-content: space-between !important;
    flex-wrap: wrap !important;
    gap: 10px !important;
  }

  .admin-order-meta p {
    white-space: normal !important;
  }

  .admin-order-toolbar {
    flex-direction: column !important;
    align-items: flex-start !important;
  }

  .admin-order-status-form {
    width: 100% !important;
    flex-wrap: wrap !important;
  }

  .admin-order-expanded-grid {
    grid-template-columns: 1fr !important;
  }

  .admin-order-expanded-item {
    grid-template-columns: 1fr !important;
    gap: 12px !important;
  }

  .admin-order-expanded-side {
    justify-items: start !important;
    white-space: normal !important;
  }
}
/* TAVAWEAR ORDER ACCORDION MATCH END */

/* Account inline edit card, no modal */
.acct-info-card {
  padding: 20px !important;
}

.acct-info-card header {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 12px !important;
  margin: 0 0 18px !important;
}

.acct-info-card h2 {
  margin: 0 !important;
  color: #06110a !important;
  font-size: 16px !important;
  font-weight: 950 !important;
  line-height: 1.1 !important;
}

.acct-inline-edit-btn {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-height: 32px !important;
  padding: 0 12px !important;
  border-radius: 999px !important;
  border: 1px solid rgba(16, 66, 38, .16) !important;
  background: rgba(255, 255, 255, .92) !important;
  color: rgba(6, 17, 10, .72) !important;
  font-size: 13px !important;
  font-weight: 750 !important;
  cursor: pointer !important;
}

.acct-inline-edit-btn:hover {
  border-color: rgba(47, 164, 94, .32) !important;
  background: rgba(47, 164, 94, .08) !important;
  color: #007a3d !important;
}

.acct-cancel-label {
  display: none !important;
}

.acct-info-card.is-editing .acct-edit-label {
  display: none !important;
}

.acct-info-card.is-editing .acct-cancel-label {
  display: inline !important;
}

.acct-info-view {
  display: grid !important;
  gap: 18px !important;
}

.acct-info-row {
  display: grid !important;
  grid-template-columns: 28px minmax(0, 1fr) !important;
  gap: 12px !important;
  align-items: start !important;
}

.acct-info-icon {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 28px !important;
  height: 28px !important;
  border-radius: 999px !important;
  background: rgba(47, 164, 94, .12) !important;
  color: #007a3d !important;
  font-size: 14px !important;
  font-weight: 950 !important;
}

.acct-info-row strong {
  display: block !important;
  margin: 0 0 7px !important;
  color: rgba(6, 17, 10, .62) !important;
  font-size: 10px !important;
  font-weight: 950 !important;
  letter-spacing: .12em !important;
  text-transform: uppercase !important;
}

.acct-info-row p {
  margin: 0 !important;
  color: #06110a !important;
  font-size: 14px !important;
  line-height: 1.55 !important;
}

.acct-info-edit {
  display: none !important;
  gap: 12px !important;
}

.acct-info-card.is-editing .acct-info-view {
  display: none !important;
}

.acct-info-card.is-editing .acct-info-edit {
  display: grid !important;
}

.acct-info-edit label {
  display: grid !important;
  gap: 6px !important;
  margin: 0 !important;
}

.acct-info-edit label span {
  color: rgba(6, 17, 10, .64) !important;
  font-size: 10px !important;
  font-weight: 950 !important;
  letter-spacing: .1em !important;
  text-transform: uppercase !important;
}

.acct-info-edit input {
  width: 100% !important;
  min-height: 34px !important;
  padding: 0 11px !important;
  border-radius: 13px !important;
  border: 1px solid rgba(16, 66, 38, .16) !important;
  background: rgba(255, 255, 255, .92) !important;
  color: #06110a !important;
  font-size: 14px !important;
  outline: none !important;
  box-sizing: border-box !important;
}

.acct-info-edit input:focus {
  border-color: rgba(0, 122, 61, .42) !important;
  box-shadow: 0 0 0 4px rgba(0, 122, 61, .08) !important;
}

.acct-info-two {
  display: grid !important;
  grid-template-columns: 104px minmax(0, 1fr) !important;
  gap: 10px !important;
}

.acct-info-edit button[type="submit"] {
  min-height: 40px !important;
  margin-top: 4px !important;
  border: 0 !important;
  border-radius: 15px !important;
  background: #007a3d !important;
  color: #ffffff !important;
  font-size: 14px !important;
  font-weight: 950 !important;
  cursor: pointer !important;
}

/* Disable old modal remnants if cached CSS still exists */
.acct-modal,
.acct-modal-card,
.acct-modal-form {
  display: none !important;
}

@media (max-width: 680px) {
  .acct-info-two {
    grid-template-columns: 1fr !important;
  }
}

/* Vercel/v0 users page exact port */
body.twv-users-view .twv-users-root {
  max-width: 832px !important;
  margin: 0 auto !important;
}

body.twv-users-view .twv-users-head {
  margin: 0 0 26px !important;
}

body.twv-users-view .twv-users-head p {
  margin: 0 0 6px !important;
  color: #007a3d !important;
  font-size: 12px !important;
  font-weight: 800 !important;
  letter-spacing: .14em !important;
  text-transform: uppercase !important;
}

body.twv-users-view .twv-users-head h1 {
  margin: 0 !important;
  color: #07110b !important;
  font-size: 32px !important;
  line-height: 1.05 !important;
  letter-spacing: -.04em !important;
  font-weight: 800 !important;
}

body.twv-users-view .twv-users-head span {
  display: block !important;
  margin-top: 8px !important;
  color: #4f6258 !important;
  font-size: 14px !important;
  line-height: 1.45 !important;
}

body.twv-users-view .twv-create-card {
  padding: 24px !important;
  border-radius: 20px !important;
  border: 1px solid #cfdccd !important;
  background: rgba(255, 255, 255, .78) !important;
  box-shadow: 0 8px 20px rgba(7, 17, 11, .06) !important;
  margin: 0 0 26px !important;
}

body.twv-users-view .twv-create-card h2 {
  margin: 0 0 24px !important;
  color: #07110b !important;
  font-size: 17px !important;
  line-height: 1.1 !important;
  font-weight: 800 !important;
  letter-spacing: 0 !important;
}

body.twv-users-view .twv-create-grid {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 20px 16px !important;
}

body.twv-users-view .twv-field {
  display: grid !important;
  gap: 8px !important;
  margin: 0 !important;
}

body.twv-users-view .twv-field > span {
  color: #5f6f64 !important;
  font-size: 10px !important;
  font-weight: 800 !important;
  letter-spacing: .14em !important;
  text-transform: uppercase !important;
}

body.twv-users-view .twv-field input,
body.twv-users-view .twv-field select {
  width: 100% !important;
  height: 42px !important;
  min-height: 42px !important;
  padding: 0 14px !important;
  border-radius: 16px !important;
  border: 1px solid #cfdccd !important;
  background: #edf5eb !important;
  color: #07110b !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  outline: none !important;
  box-sizing: border-box !important;
}

body.twv-users-view .twv-field input::placeholder {
  color: #95a599 !important;
}

body.twv-users-view .twv-field input:focus,
body.twv-users-view .twv-role-trigger:focus {
  border-color: rgba(0, 122, 61, .42) !important;
  box-shadow: 0 0 0 3px rgba(0, 122, 61, .12) !important;
}

body.twv-users-view .twv-native-select {
  position: absolute !important;
  opacity: 0 !important;
  pointer-events: none !important;
  width: 1px !important;
  height: 1px !important;
}

body.twv-users-view .twv-role-select {
  position: relative !important;
}

body.twv-users-view .twv-role-trigger {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 10px !important;
  width: 100% !important;
  height: 42px !important;
  padding: 0 14px !important;
  border-radius: 16px !important;
  border: 1px solid #cfdccd !important;
  background: #ffffff !important;
  color: #07110b !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  cursor: pointer !important;
}

body.twv-users-view .twv-role-trigger span,
body.twv-users-view .twv-role-option span {
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
}

body.twv-users-view .twv-role-trigger svg,
body.twv-users-view .twv-role-option svg {
  color: #5f6f64 !important;
}

body.twv-users-view .twv-role-select.is-open .twv-role-trigger > svg {
  transform: rotate(180deg) !important;
}

body.twv-users-view .twv-role-menu {
  display: none !important;
  position: absolute !important;
  left: 0 !important;
  top: calc(100% + 6px) !important;
  z-index: 50 !important;
  width: 100% !important;
  padding: 6px !important;
  border-radius: 16px !important;
  border: 1px solid #cfdccd !important;
  background: #ffffff !important;
  box-shadow: 0 14px 30px rgba(7, 17, 11, .12) !important;
}

body.twv-users-view .twv-role-select.is-open .twv-role-menu {
  display: grid !important;
}

body.twv-users-view .twv-role-option {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  width: 100% !important;
  min-height: 40px !important;
  padding: 0 10px !important;
  border: 0 !important;
  border-radius: 12px !important;
  background: transparent !important;
  color: #07110b !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  cursor: pointer !important;
  text-align: left !important;
}

body.twv-users-view .twv-role-option:hover {
  background: #edf5eb !important;
}

body.twv-users-view .twv-role-option > svg {
  color: #007a3d !important;
}

body.twv-users-view .twv-create-actions {
  grid-column: 1 / -1 !important;
  display: flex !important;
  justify-content: flex-start !important;
  margin-top: -2px !important;
}

body.twv-users-view .twv-primary-btn {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  min-height: 40px !important;
  padding: 0 20px !important;
  border: 0 !important;
  border-radius: 14px !important;
  background: #008539 !important;
  color: #ffffff !important;
  font-size: 14px !important;
  font-weight: 800 !important;
  cursor: pointer !important;
  box-shadow: 0 10px 22px rgba(0, 133, 57, .18) !important;
}

body.twv-users-view .twv-primary-btn:hover {
  filter: brightness(1.05) !important;
}

body.twv-users-view .twv-users-count {
  display: grid !important;
  grid-template-columns: auto 1fr !important;
  align-items: center !important;
  gap: 14px !important;
  margin: 0 0 20px !important;
}

body.twv-users-view .twv-users-count strong {
  color: #5f6f64 !important;
  font-size: 12px !important;
  font-weight: 800 !important;
  letter-spacing: .12em !important;
  text-transform: uppercase !important;
}

body.twv-users-view .twv-users-count span {
  height: 1px !important;
  background: #cfdccd !important;
}

body.twv-users-view .twv-users-list {
  display: grid !important;
  gap: 12px !important;
}

body.twv-users-view .twv-user-row {
  display: grid !important;
  grid-template-columns: 36px minmax(0, 1fr) auto !important;
  align-items: center !important;
  gap: 16px !important;
  min-height: 78px !important;
  padding: 16px 20px !important;
  border-radius: 20px !important;
  border: 1px solid #cfdccd !important;
  background: rgba(255, 255, 255, .82) !important;
  box-shadow: 0 8px 20px rgba(7, 17, 11, .06) !important;
}

body.twv-users-view .twv-avatar {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 36px !important;
  height: 36px !important;
  border-radius: 999px !important;
  background: rgba(0, 133, 57, .13) !important;
  color: #008539 !important;
  font-size: 14px !important;
  font-weight: 800 !important;
}

body.twv-users-view .twv-user-main {
  min-width: 0 !important;
}

body.twv-users-view .twv-user-main strong {
  display: block !important;
  color: #07110b !important;
  font-size: 16px !important;
  line-height: 1.2 !important;
  font-weight: 800 !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

body.twv-users-view .twv-user-main span {
  display: block !important;
  margin-top: 4px !important;
  color: #4f6258 !important;
  font-size: 14px !important;
  line-height: 1.25 !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

body.twv-users-view .twv-user-actions {
  display: flex !important;
  align-items: center !important;
  justify-content: flex-end !important;
  gap: 10px !important;
}

body.twv-users-view .twv-role-badge {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  min-height: 28px !important;
  padding: 0 10px !important;
  border-radius: 999px !important;
  font-size: 12px !important;
  font-weight: 800 !important;
  white-space: nowrap !important;
  border: 1px solid transparent !important;
}

body.twv-users-view .twv-role-badge.role-admin {
  background: rgba(0, 133, 57, .10) !important;
  border-color: rgba(0, 133, 57, .18) !important;
  color: #008539 !important;
}

body.twv-users-view .twv-role-badge.role-shop_manager {
  background: #fff6e8 !important;
  border-color: #f4c877 !important;
  color: #c66a00 !important;
}

body.twv-users-view .twv-role-badge.role-support {
  background: #edf7ff !important;
  border-color: #b9def6 !important;
  color: #1276a8 !important;
}

body.twv-users-view .twv-edit-btn,
body.twv-users-view .twv-delete-btn {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 7px !important;
  min-height: 40px !important;
  padding: 0 15px !important;
  border-radius: 14px !important;
  font-size: 14px !important;
  font-weight: 800 !important;
  text-decoration: none !important;
  cursor: pointer !important;
  white-space: nowrap !important;
}

body.twv-users-view .twv-edit-btn {
  border: 0 !important;
  background: #008539 !important;
  color: #ffffff !important;
  box-shadow: 0 10px 22px rgba(0, 133, 57, .18) !important;
}

body.twv-users-view .twv-edit-btn:hover {
  filter: brightness(1.05) !important;
}

body.twv-users-view .twv-delete-form {
  margin: 0 !important;
}

body.twv-users-view .twv-delete-btn {
  border: 1px solid #ffb8b8 !important;
  background: rgba(255, 255, 255, .76) !important;
  color: #ff3333 !important;
  box-shadow: none !important;
}

body.twv-users-view .twv-delete-btn:hover {
  background: #fff0f0 !important;
}

@media (max-width: 900px) {
  body.twv-users-view .twv-users-root {
    max-width: 100% !important;
  }

  body.twv-users-view .twv-create-grid {
    grid-template-columns: 1fr !important;
  }

  body.twv-users-view .twv-user-row {
    grid-template-columns: 36px minmax(0, 1fr) !important;
  }

  body.twv-users-view .twv-user-actions {
    grid-column: 1 / -1 !important;
    justify-content: flex-start !important;
  }
}

@media (max-width: 560px) {
  body.twv-users-view .twv-user-actions {
    display: grid !important;
    grid-template-columns: 1fr !important;
  }

  body.twv-users-view .twv-edit-btn,
  body.twv-users-view .twv-delete-btn {
    width: 100% !important;
  }
}

/* hard fix: customers must use the same backoffice sidebar layout */
.cadmin-shell {
  width: min(1180px, calc(100% - 48px)) !important;
  margin: 0 auto !important;
  padding: 32px 0 72px !important;
  display: grid !important;
  grid-template-columns: 220px minmax(0, 1fr) !important;
  gap: 28px !important;
  align-items: start !important;
}

.cadmin-shell > .admin-sidebar {
  width: 220px !important;
  min-width: 220px !important;
  max-width: 220px !important;
  align-self: start !important;
}

.cadmin-shell > .admin-sidebar a {
  width: 100% !important;
  box-sizing: border-box !important;
}

.cadmin-shell > .cadmin-main,
.cadmin-shell > .admin-main {
  min-width: 0 !important;
  width: 100% !important;
}

body:has(.cadmin-shell) .site-footer,
body:has(.cadmin-shell) footer.site-footer,
body:has(.cadmin-shell) .footer {
  display: none !important;
}

@media (max-width: 900px) {
  .cadmin-shell {
    width: min(100% - 24px, 1180px) !important;
    grid-template-columns: 1fr !important;
  }

  .cadmin-shell > .admin-sidebar {
    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;
  }
}

/* Clean canonical backoffice shell */
.admin-shell.cadmin-shell {
  width: min(1180px, calc(100% - 48px)) !important;
  margin: 0 auto !important;
  padding: 32px 0 72px !important;
  display: grid !important;
  grid-template-columns: 220px minmax(0, 1fr) !important;
  gap: 28px !important;
  align-items: start !important;
}

.admin-shell.cadmin-shell > .admin-sidebar {
  width: 220px !important;
  min-width: 220px !important;
  max-width: 220px !important;
  position: sticky !important;
  top: 24px !important;
}

.admin-shell.cadmin-shell > .admin-main {
  min-width: 0 !important;
  width: 100% !important;
}

.admin-sidebar {
  display: block !important;
}

.admin-sidebar h2 {
  margin: 10px 0 28px !important;
  color: #07110b !important;
  font-size: 31px !important;
  line-height: 1 !important;
  font-weight: 950 !important;
  letter-spacing: -.04em !important;
}

.admin-nav {
  display: grid !important;
  gap: 10px !important;
}

.admin-nav a {
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  min-height: 40px !important;
  padding: 0 16px !important;
  border-radius: 14px !important;
  border: 1px solid rgba(16, 66, 38, .14) !important;
  background: rgba(255, 255, 255, .78) !important;
  color: #07110b !important;
  text-decoration: none !important;
  font-size: 14px !important;
  font-weight: 650 !important;
  box-sizing: border-box !important;
}

.admin-nav a.is-active {
  border-color: rgba(47, 164, 94, .36) !important;
  background: rgba(47, 164, 94, .16) !important;
  color: #008539 !important;
  font-weight: 850 !important;
}

.admin-nav-icon {
  width: 16px !important;
  min-width: 16px !important;
  text-align: center !important;
  color: currentColor !important;
  font-size: 15px !important;
  line-height: 1 !important;
}

.admin-nav-logout {
  margin-top: 16px !important;
  color: #9d1b1b !important;
}

.admin-role-pill {
  display: inline-flex !important;
  align-items: center !important;
  min-height: 32px !important;
  padding: 0 14px !important;
  border-radius: 999px !important;
  border: 1px solid rgba(16, 66, 38, .14) !important;
  background: rgba(255, 255, 255, .82) !important;
  color: #07110b !important;
  font-size: 14px !important;
  font-weight: 850 !important;
}

body:has(.cadmin-shell) .site-footer,
body:has(.cadmin-shell) footer.site-footer,
body:has(.cadmin-shell) .footer {
  display: none !important;
}

@media (max-width: 900px) {
  .admin-shell.cadmin-shell {
    width: min(100% - 24px, 1180px) !important;
    grid-template-columns: 1fr !important;
  }

  .admin-shell.cadmin-shell > .admin-sidebar {
    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;
    position: static !important;
  }
}

/* Sidebar icon cleanup, only one icon system */
.admin-sidebar .admin-nav-icon {
  display: none !important;
}

.admin-sidebar a > .admin-nav-icon + span {
  margin-left: 0 !important;
}

.admin-sidebar a {
  gap: 12px !important;
}

.admin-sidebar a::before {
  flex: 0 0 auto !important;
}

/* Sidebar missing icons for Kunden and Benutzer */
.admin-sidebar a[href*="view=customers"]::before,
.admin-nav a[href*="view=customers"]::before {
  content: "" !important;
  display: inline-block !important;
  width: 16px !important;
  height: 16px !important;
  min-width: 16px !important;
  border-radius: 2px !important;
  background: currentColor !important;
  opacity: 1 !important;
}

.admin-sidebar a[href*="view=users"]::before,
.admin-nav a[href*="view=users"]::before {
  content: "" !important;
  display: inline-block !important;
  width: 16px !important;
  height: 16px !important;
  min-width: 16px !important;
  border-radius: 2px !important;
  background: currentColor !important;
  opacity: 1 !important;
}

/* Keep one-icon layout clean */
.admin-sidebar a,
.admin-nav a {
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
}

.admin-sidebar a > span,
.admin-nav a > span {
  display: inline-flex !important;
  align-items: center !important;
}

.admin-sidebar .admin-nav-icon,
.admin-nav .admin-nav-icon {
  display: none !important;
}

/* Sidebar real icons, replace black fallback squares */
.admin-sidebar a[href*="view=customers"]::before,
.admin-nav a[href*="view=customers"]::before {
  content: "" !important;
  display: inline-block !important;
  width: 16px !important;
  height: 16px !important;
  min-width: 16px !important;
  background: currentColor !important;
  border-radius: 0 !important;
  opacity: 1 !important;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2'/%3E%3Ccircle cx='9' cy='7' r='4'/%3E%3Cpath d='M22 21v-2a4 4 0 0 0-3-3.87'/%3E%3Cpath d='M16 3.13a4 4 0 0 1 0 7.75'/%3E%3C/svg%3E") center / contain no-repeat !important;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2'/%3E%3Ccircle cx='9' cy='7' r='4'/%3E%3Cpath d='M22 21v-2a4 4 0 0 0-3-3.87'/%3E%3Cpath d='M16 3.13a4 4 0 0 1 0 7.75'/%3E%3C/svg%3E") center / contain no-repeat !important;
}

.admin-sidebar a[href*="view=users"]::before,
.admin-nav a[href*="view=users"]::before {
  content: "" !important;
  display: inline-block !important;
  width: 16px !important;
  height: 16px !important;
  min-width: 16px !important;
  background: currentColor !important;
  border-radius: 0 !important;
  opacity: 1 !important;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 13c0 5-3.5 7.5-7.66 8.95a1 1 0 0 1-.67-.01C7.5 20.5 4 18 4 13V6a1 1 0 0 1 1-1c2 0 4.5-1.2 6.24-2.72a1.17 1.17 0 0 1 1.52 0C14.5 3.8 17 5 19 5a1 1 0 0 1 1 1z'/%3E%3C/svg%3E") center / contain no-repeat !important;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 13c0 5-3.5 7.5-7.66 8.95a1 1 0 0 1-.67-.01C7.5 20.5 4 18 4 13V6a1 1 0 0 1 1-1c2 0 4.5-1.2 6.24-2.72a1.17 1.17 0 0 1 1.52 0C14.5 3.8 17 5 19 5a1 1 0 0 1 1 1z'/%3E%3C/svg%3E") center / contain no-repeat !important;
}

/* active state green, inactive normal dark */
.admin-sidebar a[href*="view=customers"].is-active,
.admin-nav a[href*="view=customers"].is-active,
.admin-sidebar a[href*="view=users"].is-active,
.admin-nav a[href*="view=users"].is-active {
  color: #008539 !important;
}

.admin-sidebar a[href*="view=customers"].is-active::before,
.admin-nav a[href*="view=customers"].is-active::before,
.admin-sidebar a[href*="view=users"].is-active::before,
.admin-nav a[href*="view=users"].is-active::before {
  background: #008539 !important;
}

/* Sidebar real icon for Designs */
.admin-sidebar a[href*="view=designs"]::before,
.admin-nav a[href*="view=designs"]::before {
  content: "" !important;
  display: inline-block !important;
  width: 16px !important;
  height: 16px !important;
  min-width: 16px !important;
  background: currentColor !important;
  border-radius: 0 !important;
  opacity: 1 !important;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect width='7' height='7' x='3' y='3' rx='1'/%3E%3Crect width='7' height='7' x='14' y='3' rx='1'/%3E%3Crect width='7' height='7' x='14' y='14' rx='1'/%3E%3Crect width='7' height='7' x='3' y='14' rx='1'/%3E%3C/svg%3E") center / contain no-repeat !important;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect width='7' height='7' x='3' y='3' rx='1'/%3E%3Crect width='7' height='7' x='14' y='3' rx='1'/%3E%3Crect width='7' height='7' x='14' y='14' rx='1'/%3E%3Crect width='7' height='7' x='3' y='14' rx='1'/%3E%3C/svg%3E") center / contain no-repeat !important;
}

.admin-sidebar a[href*="view=designs"].is-active,
.admin-nav a[href*="view=designs"].is-active {
  color: #008539 !important;
}

.admin-sidebar a[href*="view=designs"].is-active::before,
.admin-nav a[href*="view=designs"].is-active::before {
  background: #008539 !important;
}

/* Vercel/v0 customer view port */
.vcustomers-page {
  width: 100% !important;
  max-width: 100% !important;
}

.vcustomers-head {
  margin: 0 0 24px !important;
}

.vcustomers-head p {
  margin: 0 0 6px !important;
  color: #007a3d !important;
  font-size: 12px !important;
  font-weight: 800 !important;
  letter-spacing: .14em !important;
  text-transform: uppercase !important;
}

.vcustomers-head h1 {
  margin: 0 !important;
  color: #07110b !important;
  font-size: 32px !important;
  line-height: 1.05 !important;
  letter-spacing: -.04em !important;
  font-weight: 800 !important;
}

.vcustomers-head span {
  display: block !important;
  margin-top: 8px !important;
  color: #4f6258 !important;
  font-size: 14px !important;
  line-height: 1.45 !important;
}

.vcustomers-success {
  margin: 0 0 16px !important;
  padding: 12px 14px !important;
  border-radius: 14px !important;
  border: 1px solid rgba(0, 133, 57, .22) !important;
  background: rgba(0, 133, 57, .10) !important;
  color: #008539 !important;
  font-size: 13px !important;
  font-weight: 800 !important;
}

.vcustomers-search {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) 104px !important;
  gap: 12px !important;
  margin: 0 0 24px !important;
}

.vcustomers-search label {
  position: relative !important;
  margin: 0 !important;
}

.vcustomers-search label > span {
  position: absolute !important;
  left: 13px !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  color: #5f6f64 !important;
  font-size: 16px !important;
  line-height: 1 !important;
}

.vcustomers-search input {
  width: 100% !important;
  height: 36px !important;
  padding: 0 14px 0 38px !important;
  border-radius: 14px !important;
  border: 1px solid #cfdccd !important;
  background: rgba(255, 255, 255, .72) !important;
  color: #07110b !important;
  font-size: 14px !important;
  outline: none !important;
  box-sizing: border-box !important;
}

.vcustomers-search input:focus {
  border-color: rgba(0, 122, 61, .42) !important;
  box-shadow: 0 0 0 3px rgba(0, 122, 61, .10) !important;
}

.vcustomers-search button {
  height: 36px !important;
  border: 0 !important;
  border-radius: 14px !important;
  background: #008539 !important;
  color: #ffffff !important;
  font-size: 14px !important;
  font-weight: 800 !important;
  cursor: pointer !important;
}

.vcustomers-layout {
  display: grid !important;
  grid-template-columns: 248px minmax(0, 1fr) !important;
  gap: 18px !important;
  align-items: start !important;
}

.vcustomers-list {
  display: grid !important;
  gap: 10px !important;
}

.vcustomer-card {
  display: flex !important;
  align-items: flex-start !important;
  justify-content: space-between !important;
  gap: 10px !important;
  width: 100% !important;
  min-height: 84px !important;
  padding: 14px !important;
  border-radius: 14px !important;
  border: 1px solid #cfdccd !important;
  background: rgba(255, 255, 255, .86) !important;
  color: #07110b !important;
  text-decoration: none !important;
  box-shadow: 0 8px 18px rgba(7, 17, 11, .05) !important;
  box-sizing: border-box !important;
  transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease, background .15s ease !important;
}

.vcustomer-card:hover {
  transform: translateY(-1px) !important;
  border-color: rgba(0, 133, 57, .36) !important;
  box-shadow: 0 12px 24px rgba(7, 17, 11, .08) !important;
}

.vcustomer-card.is-selected {
  border-color: #008539 !important;
  background: rgba(0, 133, 57, .06) !important;
  box-shadow: 0 8px 18px rgba(7, 17, 11, .06) !important;
  outline: 2px solid rgba(0, 133, 57, .16) !important;
}

.vcustomer-card strong {
  display: block !important;
  color: #07110b !important;
  font-size: 14px !important;
  line-height: 1.15 !important;
  font-weight: 800 !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

.vcustomer-card span,
.vcustomer-card small {
  display: block !important;
  margin-top: 4px !important;
  color: #4f6258 !important;
  font-size: 12px !important;
  line-height: 1.25 !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

.vcustomer-card em,
.vcustomer-order-row em {
  display: inline-flex !important;
  align-items: center !important;
  min-height: 22px !important;
  padding: 0 8px !important;
  border-radius: 999px !important;
  font-size: 12px !important;
  line-height: 1 !important;
  font-style: normal !important;
  font-weight: 700 !important;
  white-space: nowrap !important;
}

.vcustomer-card em.is-green,
.vcustomer-order-row em.is-green {
  background: #ecfdf3 !important;
  color: #087a3a !important;
  box-shadow: inset 0 0 0 1px #bbf7d0 !important;
}

.vcustomer-card em.is-amber,
.vcustomer-order-row em.is-amber {
  background: #fffbeb !important;
  color: #a16207 !important;
  box-shadow: inset 0 0 0 1px #fde68a !important;
}

.vcustomer-card em.is-blue,
.vcustomer-order-row em.is-blue {
  background: #eff6ff !important;
  color: #1d4ed8 !important;
  box-shadow: inset 0 0 0 1px #bfdbfe !important;
}

.vcustomer-card em.is-red,
.vcustomer-order-row em.is-red {
  background: #fef2f2 !important;
  color: #b91c1c !important;
  box-shadow: inset 0 0 0 1px #fecaca !important;
}

.vcustomer-card em.is-neutral,
.vcustomer-order-row em.is-neutral {
  background: #f5f5f5 !important;
  color: #737373 !important;
  box-shadow: inset 0 0 0 1px #e5e5e5 !important;
}

.vcustomer-detail {
  padding: 24px !important;
  border-radius: 20px !important;
  border: 1px solid #cfdccd !important;
  background: rgba(255, 255, 255, .88) !important;
  box-shadow: 0 10px 28px rgba(7, 17, 11, .07) !important;
}

.vcustomer-detail-head {
  display: flex !important;
  align-items: flex-start !important;
  justify-content: space-between !important;
  gap: 16px !important;
  margin: 0 0 22px !important;
  padding: 0 0 22px !important;
  border-bottom: 1px solid #cfdccd !important;
}

.vcustomer-detail-head h2 {
  margin: 0 !important;
  color: #07110b !important;
  font-size: 20px !important;
  line-height: 1.15 !important;
  font-weight: 800 !important;
}

.vcustomer-detail-head p {
  margin: 5px 0 0 !important;
  color: #4f6258 !important;
  font-size: 14px !important;
}

.vcustomer-detail-head > span {
  display: inline-flex !important;
  align-items: center !important;
  min-height: 30px !important;
  padding: 0 12px !important;
  border-radius: 999px !important;
  border: 1px solid #cfdccd !important;
  background: #edf5eb !important;
  color: #07110b !important;
  font-size: 12px !important;
  font-weight: 800 !important;
}

.vcustomer-form-grid {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 14px !important;
}

.vcustomer-form label,
.vcustomer-notes {
  display: grid !important;
  gap: 6px !important;
  margin: 0 !important;
}

.vcustomer-form label > span,
.vcustomer-notes > span {
  color: #5f6f64 !important;
  font-size: 11px !important;
  font-weight: 800 !important;
  letter-spacing: .08em !important;
  text-transform: uppercase !important;
}

.vcustomer-form input,
.vcustomer-form select,
.vcustomer-form textarea {
  width: 100% !important;
  min-height: 34px !important;
  padding: 0 11px !important;
  border-radius: 11px !important;
  border: 1px solid #cfdccd !important;
  background: rgba(255, 255, 255, .84) !important;
  color: #07110b !important;
  font-size: 14px !important;
  outline: none !important;
  box-sizing: border-box !important;
}

.vcustomer-form select {
  width: fit-content !important;
  min-width: 96px !important;
  padding-right: 28px !important;
}

.vcustomer-notes {
  margin-top: 14px !important;
}

.vcustomer-form textarea {
  min-height: 100px !important;
  padding: 10px 11px !important;
  resize: vertical !important;
}

.vcustomer-form input:focus,
.vcustomer-form select:focus,
.vcustomer-form textarea:focus {
  border-color: rgba(0, 122, 61, .42) !important;
  box-shadow: 0 0 0 3px rgba(0, 122, 61, .10) !important;
}

.vcustomer-save {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-height: 40px !important;
  margin-top: 18px !important;
  padding: 0 18px !important;
  border: 0 !important;
  border-radius: 12px !important;
  background: #008539 !important;
  color: #ffffff !important;
  font-size: 14px !important;
  font-weight: 800 !important;
  cursor: pointer !important;
}

.vcustomer-orders {
  margin-top: 24px !important;
  padding-top: 22px !important;
  border-top: 1px solid #cfdccd !important;
}

.vcustomer-orders > header {
  display: flex !important;
  align-items: flex-start !important;
  justify-content: space-between !important;
  gap: 14px !important;
  margin-bottom: 14px !important;
}

.vcustomer-orders h3 {
  margin: 0 !important;
  color: #07110b !important;
  font-size: 16px !important;
  font-weight: 800 !important;
}

.vcustomer-orders p {
  margin: 6px 0 0 !important;
  color: #4f6258 !important;
  font-size: 14px !important;
}

.vcustomer-orders > header > span {
  color: #4f6258 !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  white-space: nowrap !important;
}

.vcustomer-order-list {
  display: grid !important;
  gap: 8px !important;
}

.vcustomer-order-row {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) 130px 82px 28px !important;
  gap: 12px !important;
  align-items: center !important;
  min-height: 66px !important;
  padding: 12px 14px !important;
  border-radius: 14px !important;
  border: 1px solid #cfdccd !important;
  background: rgba(255, 255, 255, .72) !important;
}

.vcustomer-order-row strong {
  display: block !important;
  color: #07110b !important;
  font-size: 14px !important;
  line-height: 1.15 !important;
  font-weight: 800 !important;
}

.vcustomer-order-row em {
  margin-top: 6px !important;
}

.vcustomer-order-money {
  text-align: right !important;
}

.vcustomer-order-date {
  text-align: right !important;
}

.vcustomer-order-date span,
.vcustomer-order-date small {
  display: block !important;
  color: #4f6258 !important;
  font-size: 12px !important;
  line-height: 1.35 !important;
}

.vcustomer-order-row a {
  color: #4f6258 !important;
  text-decoration: none !important;
  font-size: 17px !important;
  text-align: right !important;
}

.vcustomers-empty,
.vcustomer-no-orders {
  padding: 16px !important;
  border-radius: 14px !important;
  border: 1px solid #cfdccd !important;
  background: rgba(255, 255, 255, .72) !important;
  color: #4f6258 !important;
  font-size: 14px !important;
}

@media (max-width: 1080px) {
  .vcustomers-layout {
    grid-template-columns: 1fr !important;
  }

  .vcustomers-list {
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)) !important;
  }
}

@media (max-width: 760px) {
  .vcustomers-search {
    grid-template-columns: 1fr !important;
  }

  .vcustomer-form-grid,
  .vcustomer-order-row {
    grid-template-columns: 1fr !important;
  }

  .vcustomer-order-money,
  .vcustomer-order-date {
    text-align: left !important;
  }
}

/* Vercel/v0 customer view port */
.vcustomers-page {
  width: 100% !important;
  max-width: 100% !important;
}

.vcustomers-head {
  margin: 0 0 24px !important;
}

.vcustomers-head p {
  margin: 0 0 6px !important;
  color: #007a3d !important;
  font-size: 12px !important;
  font-weight: 800 !important;
  letter-spacing: .14em !important;
  text-transform: uppercase !important;
}

.vcustomers-head h1 {
  margin: 0 !important;
  color: #07110b !important;
  font-size: 32px !important;
  line-height: 1.05 !important;
  letter-spacing: -.04em !important;
  font-weight: 800 !important;
}

.vcustomers-head span {
  display: block !important;
  margin-top: 8px !important;
  color: #4f6258 !important;
  font-size: 14px !important;
  line-height: 1.45 !important;
}

.vcustomers-success {
  margin: 0 0 16px !important;
  padding: 12px 14px !important;
  border-radius: 14px !important;
  border: 1px solid rgba(0, 133, 57, .22) !important;
  background: rgba(0, 133, 57, .10) !important;
  color: #008539 !important;
  font-size: 13px !important;
  font-weight: 800 !important;
}

.vcustomers-search {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) 104px !important;
  gap: 12px !important;
  margin: 0 0 24px !important;
}

.vcustomers-search label {
  position: relative !important;
  margin: 0 !important;
}

.vcustomers-search label > span {
  position: absolute !important;
  left: 13px !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  color: #5f6f64 !important;
  font-size: 16px !important;
  line-height: 1 !important;
}

.vcustomers-search input {
  width: 100% !important;
  height: 36px !important;
  padding: 0 14px 0 38px !important;
  border-radius: 14px !important;
  border: 1px solid #cfdccd !important;
  background: rgba(255, 255, 255, .72) !important;
  color: #07110b !important;
  font-size: 14px !important;
  outline: none !important;
  box-sizing: border-box !important;
}

.vcustomers-search input:focus {
  border-color: rgba(0, 122, 61, .42) !important;
  box-shadow: 0 0 0 3px rgba(0, 122, 61, .10) !important;
}

.vcustomers-search button {
  height: 36px !important;
  border: 0 !important;
  border-radius: 14px !important;
  background: #008539 !important;
  color: #ffffff !important;
  font-size: 14px !important;
  font-weight: 800 !important;
  cursor: pointer !important;
}

.vcustomers-layout {
  display: grid !important;
  grid-template-columns: 248px minmax(0, 1fr) !important;
  gap: 18px !important;
  align-items: start !important;
}

.vcustomers-list {
  display: grid !important;
  gap: 10px !important;
}

.vcustomer-card {
  display: flex !important;
  align-items: flex-start !important;
  justify-content: space-between !important;
  gap: 10px !important;
  width: 100% !important;
  min-height: 84px !important;
  padding: 14px !important;
  border-radius: 14px !important;
  border: 1px solid #cfdccd !important;
  background: rgba(255, 255, 255, .86) !important;
  color: #07110b !important;
  text-decoration: none !important;
  box-shadow: 0 8px 18px rgba(7, 17, 11, .05) !important;
  box-sizing: border-box !important;
  transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease, background .15s ease !important;
}

.vcustomer-card:hover {
  transform: translateY(-1px) !important;
  border-color: rgba(0, 133, 57, .36) !important;
  box-shadow: 0 12px 24px rgba(7, 17, 11, .08) !important;
}

.vcustomer-card.is-selected {
  border-color: #008539 !important;
  background: rgba(0, 133, 57, .06) !important;
  box-shadow: 0 8px 18px rgba(7, 17, 11, .06) !important;
  outline: 2px solid rgba(0, 133, 57, .16) !important;
}

.vcustomer-card strong {
  display: block !important;
  color: #07110b !important;
  font-size: 14px !important;
  line-height: 1.15 !important;
  font-weight: 800 !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

.vcustomer-card span,
.vcustomer-card small {
  display: block !important;
  margin-top: 4px !important;
  color: #4f6258 !important;
  font-size: 12px !important;
  line-height: 1.25 !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

.vcustomer-card em,
.vcustomer-order-row em {
  display: inline-flex !important;
  align-items: center !important;
  min-height: 22px !important;
  padding: 0 8px !important;
  border-radius: 999px !important;
  font-size: 12px !important;
  line-height: 1 !important;
  font-style: normal !important;
  font-weight: 700 !important;
  white-space: nowrap !important;
}

.vcustomer-card em.is-green,
.vcustomer-order-row em.is-green {
  background: #ecfdf3 !important;
  color: #087a3a !important;
  box-shadow: inset 0 0 0 1px #bbf7d0 !important;
}

.vcustomer-card em.is-amber,
.vcustomer-order-row em.is-amber {
  background: #fffbeb !important;
  color: #a16207 !important;
  box-shadow: inset 0 0 0 1px #fde68a !important;
}

.vcustomer-card em.is-blue,
.vcustomer-order-row em.is-blue {
  background: #eff6ff !important;
  color: #1d4ed8 !important;
  box-shadow: inset 0 0 0 1px #bfdbfe !important;
}

.vcustomer-card em.is-red,
.vcustomer-order-row em.is-red {
  background: #fef2f2 !important;
  color: #b91c1c !important;
  box-shadow: inset 0 0 0 1px #fecaca !important;
}

.vcustomer-card em.is-neutral,
.vcustomer-order-row em.is-neutral {
  background: #f5f5f5 !important;
  color: #737373 !important;
  box-shadow: inset 0 0 0 1px #e5e5e5 !important;
}

.vcustomer-detail {
  padding: 24px !important;
  border-radius: 20px !important;
  border: 1px solid #cfdccd !important;
  background: rgba(255, 255, 255, .88) !important;
  box-shadow: 0 10px 28px rgba(7, 17, 11, .07) !important;
}

.vcustomer-detail-head {
  display: flex !important;
  align-items: flex-start !important;
  justify-content: space-between !important;
  gap: 16px !important;
  margin: 0 0 22px !important;
  padding: 0 0 22px !important;
  border-bottom: 1px solid #cfdccd !important;
}

.vcustomer-detail-head h2 {
  margin: 0 !important;
  color: #07110b !important;
  font-size: 20px !important;
  line-height: 1.15 !important;
  font-weight: 800 !important;
}

.vcustomer-detail-head p {
  margin: 5px 0 0 !important;
  color: #4f6258 !important;
  font-size: 14px !important;
}

.vcustomer-detail-head > span {
  display: inline-flex !important;
  align-items: center !important;
  min-height: 30px !important;
  padding: 0 12px !important;
  border-radius: 999px !important;
  border: 1px solid #cfdccd !important;
  background: #edf5eb !important;
  color: #07110b !important;
  font-size: 12px !important;
  font-weight: 800 !important;
}

.vcustomer-form-grid {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 14px !important;
}

.vcustomer-form label,
.vcustomer-notes {
  display: grid !important;
  gap: 6px !important;
  margin: 0 !important;
}

.vcustomer-form label > span,
.vcustomer-notes > span {
  color: #5f6f64 !important;
  font-size: 11px !important;
  font-weight: 800 !important;
  letter-spacing: .08em !important;
  text-transform: uppercase !important;
}

.vcustomer-form input,
.vcustomer-form select,
.vcustomer-form textarea {
  width: 100% !important;
  min-height: 34px !important;
  padding: 0 11px !important;
  border-radius: 11px !important;
  border: 1px solid #cfdccd !important;
  background: rgba(255, 255, 255, .84) !important;
  color: #07110b !important;
  font-size: 14px !important;
  outline: none !important;
  box-sizing: border-box !important;
}

.vcustomer-form select {
  width: fit-content !important;
  min-width: 96px !important;
  padding-right: 28px !important;
}

.vcustomer-notes {
  margin-top: 14px !important;
}

.vcustomer-form textarea {
  min-height: 100px !important;
  padding: 10px 11px !important;
  resize: vertical !important;
}

.vcustomer-form input:focus,
.vcustomer-form select:focus,
.vcustomer-form textarea:focus {
  border-color: rgba(0, 122, 61, .42) !important;
  box-shadow: 0 0 0 3px rgba(0, 122, 61, .10) !important;
}

.vcustomer-save {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-height: 40px !important;
  margin-top: 18px !important;
  padding: 0 18px !important;
  border: 0 !important;
  border-radius: 12px !important;
  background: #008539 !important;
  color: #ffffff !important;
  font-size: 14px !important;
  font-weight: 800 !important;
  cursor: pointer !important;
}

.vcustomer-orders {
  margin-top: 24px !important;
  padding-top: 22px !important;
  border-top: 1px solid #cfdccd !important;
}

.vcustomer-orders > header {
  display: flex !important;
  align-items: flex-start !important;
  justify-content: space-between !important;
  gap: 14px !important;
  margin-bottom: 14px !important;
}

.vcustomer-orders h3 {
  margin: 0 !important;
  color: #07110b !important;
  font-size: 16px !important;
  font-weight: 800 !important;
}

.vcustomer-orders p {
  margin: 6px 0 0 !important;
  color: #4f6258 !important;
  font-size: 14px !important;
}

.vcustomer-orders > header > span {
  color: #4f6258 !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  white-space: nowrap !important;
}

.vcustomer-order-list {
  display: grid !important;
  gap: 8px !important;
}

.vcustomer-order-row {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) 130px 82px 28px !important;
  gap: 12px !important;
  align-items: center !important;
  min-height: 66px !important;
  padding: 12px 14px !important;
  border-radius: 14px !important;
  border: 1px solid #cfdccd !important;
  background: rgba(255, 255, 255, .72) !important;
}

.vcustomer-order-row strong {
  display: block !important;
  color: #07110b !important;
  font-size: 14px !important;
  line-height: 1.15 !important;
  font-weight: 800 !important;
}

.vcustomer-order-row em {
  margin-top: 6px !important;
}

.vcustomer-order-money {
  text-align: right !important;
}

.vcustomer-order-date {
  text-align: right !important;
}

.vcustomer-order-date span,
.vcustomer-order-date small {
  display: block !important;
  color: #4f6258 !important;
  font-size: 12px !important;
  line-height: 1.35 !important;
}

.vcustomer-order-row a {
  color: #4f6258 !important;
  text-decoration: none !important;
  font-size: 17px !important;
  text-align: right !important;
}

.vcustomers-empty,
.vcustomer-no-orders {
  padding: 16px !important;
  border-radius: 14px !important;
  border: 1px solid #cfdccd !important;
  background: rgba(255, 255, 255, .72) !important;
  color: #4f6258 !important;
  font-size: 14px !important;
}

@media (max-width: 1080px) {
  .vcustomers-layout {
    grid-template-columns: 1fr !important;
  }

  .vcustomers-list {
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)) !important;
  }
}

@media (max-width: 760px) {
  .vcustomers-search {
    grid-template-columns: 1fr !important;
  }

  .vcustomer-form-grid,
  .vcustomer-order-row {
    grid-template-columns: 1fr !important;
  }

  .vcustomer-order-money,
  .vcustomer-order-date {
    text-align: left !important;
  }
}

/* Vercel/v0 account page port */
.vaccount-page {
  min-height: 100vh !important;
  background: #f5f8f2 !important;
  padding: 32px 0 72px !important;
}

.vaccount-container {
  width: min(1024px, calc(100% - 32px)) !important;
  margin: 0 auto !important;
}

.vaccount-icon {
  width: 1em !important;
  height: 1em !important;
  fill: none !important;
  stroke: currentColor !important;
  stroke-width: 2 !important;
  stroke-linecap: round !important;
  stroke-linejoin: round !important;
  display: block !important;
}

.vaccount-head {
  display: flex !important;
  align-items: flex-start !important;
  justify-content: space-between !important;
  gap: 16px !important;
  margin: 0 0 32px !important;
}

.vaccount-head p {
  margin: 0 0 4px !important;
  color: #008539 !important;
  font-size: 12px !important;
  font-weight: 800 !important;
  letter-spacing: .14em !important;
  text-transform: uppercase !important;
}

.vaccount-head h1 {
  margin: 0 !important;
  color: #07110b !important;
  font-size: 40px !important;
  line-height: 1.05 !important;
  font-weight: 900 !important;
  letter-spacing: -.045em !important;
}

.vaccount-head span {
  display: block !important;
  margin-top: 6px !important;
  color: #5d6f63 !important;
  font-size: 14px !important;
}

.vaccount-logout {
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  min-height: 42px !important;
  padding: 0 16px !important;
  border-radius: 12px !important;
  border: 0 !important;
  background: #008539 !important;
  color: #ffffff !important;
  font-size: 14px !important;
  font-weight: 800 !important;
  text-decoration: none !important;
  box-shadow: 0 8px 18px rgba(0, 133, 57, .18) !important;
}

.vaccount-logout .vaccount-icon {
  width: 16px !important;
  height: 16px !important;
}

.vaccount-saved {
  margin: 0 0 16px !important;
  padding: 12px 14px !important;
  border-radius: 14px !important;
  border: 1px solid rgba(0, 133, 57, .22) !important;
  background: rgba(0, 133, 57, .10) !important;
  color: #008539 !important;
  font-size: 13px !important;
  font-weight: 800 !important;
}

.vaccount-layout {
  display: flex !important;
  align-items: flex-start !important;
  gap: 20px !important;
}

.vaccount-side {
  width: 256px !important;
  min-width: 256px !important;
  display: grid !important;
  gap: 16px !important;
}

.vaccount-card,
.vaccount-orders-card {
  border-radius: 20px !important;
  border: 1px solid #d2decf !important;
  background: rgba(255, 255, 255, .88) !important;
  box-shadow: 0 10px 28px rgba(7, 17, 11, .06) !important;
}

.vaccount-card {
  padding: 20px !important;
}

.vaccount-avatar-row {
  display: flex !important;
  align-items: center !important;
  gap: 16px !important;
}

.vaccount-avatar {
  width: 56px !important;
  height: 56px !important;
  min-width: 56px !important;
  border-radius: 18px !important;
  background: rgba(0, 133, 57, .10) !important;
  color: #008539 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 18px !important;
  font-weight: 900 !important;
}

.vaccount-avatar-row strong {
  display: block !important;
  color: #07110b !important;
  font-size: 15px !important;
  line-height: 1.2 !important;
  font-weight: 800 !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
  max-width: 150px !important;
}

.vaccount-avatar-row span {
  display: block !important;
  margin-top: 3px !important;
  color: #5d6f63 !important;
  font-size: 13px !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
  max-width: 150px !important;
}

.vaccount-separator {
  height: 1px !important;
  background: #d2decf !important;
  margin: 20px 0 !important;
}

.vaccount-fields {
  display: grid !important;
  gap: 16px !important;
  margin: 0 !important;
}

.vaccount-fields div {
  margin: 0 !important;
}

.vaccount-fields dt,
.vaccount-contact dt {
  margin: 0 0 3px !important;
  color: #6b7b70 !important;
  font-size: 10px !important;
  line-height: 1.1 !important;
  font-weight: 900 !important;
  letter-spacing: .12em !important;
  text-transform: uppercase !important;
}

.vaccount-fields dd,
.vaccount-contact dd {
  margin: 0 !important;
  color: #07110b !important;
  font-size: 14px !important;
  line-height: 1.4 !important;
  font-weight: 650 !important;
  word-break: break-word !important;
}

.vaccount-role {
  display: inline-flex !important;
  align-items: center !important;
  gap: 5px !important;
  min-height: 26px !important;
  padding: 0 10px !important;
  border-radius: 9px !important;
  border: 1px solid #d2decf !important;
  background: #edf5eb !important;
  color: #07110b !important;
  font-size: 12px !important;
  font-weight: 800 !important;
}

.vaccount-role .vaccount-icon {
  width: 12px !important;
  height: 12px !important;
}

.vaccount-contact header {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 12px !important;
  margin: 0 0 16px !important;
}

.vaccount-contact h2,
.vaccount-orders-card h2 {
  margin: 0 !important;
  color: #07110b !important;
  font-size: 16px !important;
  line-height: 1.2 !important;
  font-weight: 800 !important;
}

.vaccount-edit-toggle {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  min-height: 30px !important;
  padding: 0 10px !important;
  border-radius: 9px !important;
  border: 1px solid #d2decf !important;
  background: rgba(255, 255, 255, .72) !important;
  color: #5d6f63 !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  cursor: pointer !important;
}

.vaccount-edit-toggle:hover {
  background: #edf5eb !important;
  color: #07110b !important;
}

.vaccount-edit-toggle .vaccount-icon {
  width: 12px !important;
  height: 12px !important;
}

.vaccount-contact-view dl {
  display: grid !important;
  gap: 14px !important;
  margin: 0 !important;
}

.vaccount-info-row {
  display: flex !important;
  align-items: flex-start !important;
  gap: 12px !important;
}

.vaccount-info-icon {
  width: 28px !important;
  height: 28px !important;
  min-width: 28px !important;
  margin-top: 2px !important;
  border-radius: 9px !important;
  background: #edf5eb !important;
  color: #5d6f63 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

.vaccount-info-icon .vaccount-icon {
  width: 14px !important;
  height: 14px !important;
}

.vaccount-contact dd span {
  display: block !important;
}

.vaccount-contact dd em {
  color: #7b8c80 !important;
  font-style: italic !important;
  font-weight: 500 !important;
}

.vaccount-contact dd .is-muted {
  color: #5d6f63 !important;
}

.vaccount-contact-edit {
  display: none !important;
  gap: 12px !important;
}

.vaccount-contact.is-editing .vaccount-contact-view {
  display: none !important;
}

.vaccount-contact.is-editing .vaccount-contact-edit {
  display: grid !important;
}

.vaccount-contact-edit label {
  display: grid !important;
  gap: 5px !important;
  margin: 0 !important;
}

.vaccount-contact-edit label > span {
  color: #6b7b70 !important;
  font-size: 10px !important;
  font-weight: 900 !important;
  letter-spacing: .12em !important;
  text-transform: uppercase !important;
}

.vaccount-contact-edit input {
  width: 100% !important;
  height: 36px !important;
  padding: 0 11px !important;
  border-radius: 10px !important;
  border: 1px solid #d2decf !important;
  background: rgba(255, 255, 255, .84) !important;
  color: #07110b !important;
  font-size: 14px !important;
  outline: none !important;
  box-sizing: border-box !important;
}

.vaccount-contact-edit input:focus {
  border-color: rgba(0, 133, 57, .42) !important;
  box-shadow: 0 0 0 3px rgba(0, 133, 57, .10) !important;
}

.vaccount-two {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 8px !important;
}

.vaccount-contact-edit button {
  width: 100% !important;
  height: 38px !important;
  margin-top: 4px !important;
  border: 0 !important;
  border-radius: 12px !important;
  background: #008539 !important;
  color: #ffffff !important;
  font-size: 14px !important;
  font-weight: 800 !important;
  cursor: pointer !important;
}

.vaccount-orders-card {
  flex: 1 !important;
  min-width: 0 !important;
  padding: 20px !important;
}

.vaccount-orders-card > h2 {
  margin-bottom: 16px !important;
}

.vaccount-empty {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 12px !important;
  min-height: 240px !important;
  text-align: center !important;
}

.vaccount-empty > div {
  width: 64px !important;
  height: 64px !important;
  border-radius: 20px !important;
  background: #edf5eb !important;
  color: #5d6f63 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

.vaccount-empty .vaccount-icon {
  width: 32px !important;
  height: 32px !important;
}

.vaccount-empty strong {
  color: #07110b !important;
  font-size: 15px !important;
  font-weight: 800 !important;
}

.vaccount-empty p {
  margin: 0 !important;
  color: #5d6f63 !important;
  font-size: 14px !important;
  max-width: 280px !important;
}

.vaccount-orders {
  display: grid !important;
  gap: 8px !important;
}

.vaccount-order {
  border-radius: 14px !important;
  border: 1px solid #d2decf !important;
  background: rgba(255, 255, 255, .82) !important;
  overflow: hidden !important;
}

.vaccount-order-summary {
  width: 100% !important;
  min-height: 62px !important;
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  padding: 14px 16px !important;
  border: 0 !important;
  background: transparent !important;
  color: #07110b !important;
  text-align: left !important;
  cursor: pointer !important;
}

.vaccount-order-summary:hover {
  background: rgba(237, 245, 235, .72) !important;
}

.vaccount-order-summary > div {
  flex: 1 !important;
  min-width: 0 !important;
}

.vaccount-order-summary > div strong {
  display: block !important;
  color: #07110b !important;
  font-size: 14px !important;
  line-height: 1.2 !important;
  font-weight: 800 !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

.vaccount-order-summary > div span {
  display: block !important;
  margin-top: 3px !important;
  color: #5d6f63 !important;
  font-size: 12px !important;
}

.vaccount-order-summary > strong {
  min-width: 92px !important;
  color: #07110b !important;
  font-size: 14px !important;
  font-weight: 900 !important;
  text-align: right !important;
  font-variant-numeric: tabular-nums !important;
}

.vaccount-order-summary em {
  display: inline-flex !important;
  align-items: center !important;
  min-height: 24px !important;
  padding: 0 10px !important;
  border-radius: 999px !important;
  font-size: 12px !important;
  line-height: 1 !important;
  font-style: normal !important;
  font-weight: 800 !important;
  white-space: nowrap !important;
}

.vaccount-order-summary em.is-green {
  background: #dcfce7 !important;
  color: #166534 !important;
  box-shadow: inset 0 0 0 1px #bbf7d0 !important;
}

.vaccount-order-summary em.is-amber {
  background: #fef3c7 !important;
  color: #92400e !important;
  box-shadow: inset 0 0 0 1px #fde68a !important;
}

.vaccount-order-summary em.is-blue {
  background: #dbeafe !important;
  color: #1e40af !important;
  box-shadow: inset 0 0 0 1px #bfdbfe !important;
}

.vaccount-order-summary em.is-purple {
  background: #f3e8ff !important;
  color: #6b21a8 !important;
  box-shadow: inset 0 0 0 1px #e9d5ff !important;
}

.vaccount-order-summary em.is-red {
  background: #fee2e2 !important;
  color: #991b1b !important;
  box-shadow: inset 0 0 0 1px #fecaca !important;
}

.vaccount-order-summary em.is-neutral {
  background: #f5f5f5 !important;
  color: #525252 !important;
  box-shadow: inset 0 0 0 1px #e5e5e5 !important;
}

.vaccount-chevron {
  width: 18px !important;
  height: 18px !important;
  color: #5d6f63 !important;
}

.vaccount-chevron .vaccount-icon {
  width: 16px !important;
  height: 16px !important;
}

.vaccount-chevron .is-up {
  display: none !important;
}

.vaccount-order.is-open .vaccount-chevron .is-down {
  display: none !important;
}

.vaccount-order.is-open .vaccount-chevron .is-up {
  display: block !important;
}

.vaccount-order-detail {
  display: none !important;
  border-top: 1px solid #d2decf !important;
  padding: 14px 16px 16px !important;
  background: rgba(237, 245, 235, .48) !important;
}

.vaccount-order.is-open .vaccount-order-detail {
  display: grid !important;
  gap: 16px !important;
}

.vaccount-order-detail h3 {
  display: flex !important;
  align-items: center !important;
  gap: 6px !important;
  margin: 0 0 8px !important;
  color: #6b7b70 !important;
  font-size: 10px !important;
  line-height: 1.1 !important;
  font-weight: 900 !important;
  letter-spacing: .12em !important;
  text-transform: uppercase !important;
}

.vaccount-order-detail h3 .vaccount-icon {
  width: 12px !important;
  height: 12px !important;
}

.vaccount-order-detail address {
  color: #07110b !important;
  font-size: 14px !important;
  line-height: 1.45 !important;
  font-style: normal !important;
}

.vaccount-items {
  border-radius: 14px !important;
  border: 1px solid #d2decf !important;
  overflow: hidden !important;
}

.vaccount-item {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 12px !important;
  padding: 12px !important;
  background: rgba(255, 255, 255, .88) !important;
  border-bottom: 1px solid #d2decf !important;
}

.vaccount-item > div {
  min-width: 0 !important;
}

.vaccount-item strong {
  display: block !important;
  color: #07110b !important;
  font-size: 14px !important;
  font-weight: 800 !important;
}

.vaccount-item span,
.vaccount-item small {
  display: block !important;
  margin-top: 3px !important;
  color: #5d6f63 !important;
  font-size: 12px !important;
}

.vaccount-item small {
  color: #008539 !important;
  font-weight: 700 !important;
}

.vaccount-item > strong {
  white-space: nowrap !important;
  font-variant-numeric: tabular-nums !important;
}

.vaccount-total {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 12px !important;
  padding: 10px 12px !important;
  background: rgba(237, 245, 235, .95) !important;
}

.vaccount-total span {
  color: #5d6f63 !important;
  font-size: 12px !important;
  font-weight: 900 !important;
  letter-spacing: .08em !important;
  text-transform: uppercase !important;
}

.vaccount-total strong {
  color: #07110b !important;
  font-size: 14px !important;
  font-weight: 900 !important;
}

.vaccount-no-items {
  margin: 0 !important;
  color: #5d6f63 !important;
  font-size: 14px !important;
}

@media (max-width: 760px) {
  .vaccount-head {
    flex-direction: column !important;
  }

  .vaccount-head h1 {
    font-size: 34px !important;
  }

  .vaccount-layout {
    flex-direction: column !important;
  }

  .vaccount-side {
    width: 100% !important;
    min-width: 0 !important;
  }

  .vaccount-order-summary {
    display: grid !important;
    grid-template-columns: 1fr auto !important;
  }

  .vaccount-order-summary > strong {
    text-align: left !important;
  }
}

/* Account logout button, Vercel-style secondary button */
.vaccount-logout {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  min-height: 40px !important;
  padding: 0 14px !important;
  border-radius: 12px !important;
  border: 1px solid #d2decf !important;
  background: rgba(255, 255, 255, .82) !important;
  color: #07110b !important;
  font-size: 14px !important;
  font-weight: 800 !important;
  text-decoration: none !important;
  box-shadow: 0 8px 18px rgba(7, 17, 11, .05) !important;
}

.vaccount-logout:hover {
  border-color: rgba(0, 133, 57, .32) !important;
  background: #edf5eb !important;
  color: #008539 !important;
  transform: translateY(-1px) !important;
  box-shadow: 0 12px 24px rgba(7, 17, 11, .08) !important;
}

.vaccount-logout .vaccount-icon {
  width: 16px !important;
  height: 16px !important;
}

/* Vercel/v0 users admin view */
.vusers-page {
  width: min(832px, 100%) !important;
  margin: 0 !important;
}

.vusers-icon {
  width: 1em !important;
  height: 1em !important;
  fill: none !important;
  stroke: currentColor !important;
  stroke-width: 2 !important;
  stroke-linecap: round !important;
  stroke-linejoin: round !important;
  display: block !important;
}

.vusers-head {
  margin: 0 0 26px !important;
}

.vusers-head p {
  margin: 0 0 4px !important;
  color: #008539 !important;
  font-size: 12px !important;
  font-weight: 900 !important;
  letter-spacing: .14em !important;
  text-transform: uppercase !important;
}

.vusers-head h1 {
  margin: 0 !important;
  color: #07110b !important;
  font-size: 32px !important;
  line-height: 1.05 !important;
  letter-spacing: -.045em !important;
  font-weight: 900 !important;
}

.vusers-head span {
  display: block !important;
  margin-top: 8px !important;
  color: #4f6258 !important;
  font-size: 14px !important;
  line-height: 1.45 !important;
}

.vusers-success,
.vusers-error {
  margin: 0 0 16px !important;
  padding: 12px 14px !important;
  border-radius: 14px !important;
  font-size: 13px !important;
  font-weight: 800 !important;
}

.vusers-success {
  border: 1px solid rgba(0, 133, 57, .22) !important;
  background: rgba(0, 133, 57, .10) !important;
  color: #008539 !important;
}

.vusers-error {
  border: 1px solid rgba(220, 38, 38, .22) !important;
  background: rgba(220, 38, 38, .08) !important;
  color: #b91c1c !important;
}

.vusers-error p {
  margin: 0 !important;
}

.vusers-error p + p {
  margin-top: 4px !important;
}

.vusers-create-card {
  margin: 0 0 24px !important;
  padding: 24px !important;
  border-radius: 20px !important;
  border: 1px solid #cfdccd !important;
  background: rgba(255, 255, 255, .90) !important;
  box-shadow: 0 10px 28px rgba(7, 17, 11, .07) !important;
}

.vusers-create-card h2 {
  margin: 0 0 24px !important;
  color: #07110b !important;
  font-size: 16px !important;
  line-height: 1.2 !important;
  font-weight: 850 !important;
}

.vusers-form-grid {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 22px 16px !important;
}

.vusers-form-grid label {
  display: grid !important;
  gap: 8px !important;
  margin: 0 !important;
}

.vusers-form-grid label > span {
  color: #5c6e62 !important;
  font-size: 10px !important;
  line-height: 1 !important;
  font-weight: 900 !important;
  letter-spacing: .16em !important;
  text-transform: uppercase !important;
}

.vusers-form-grid input,
.vusers-form-grid select {
  width: 100% !important;
  height: 42px !important;
  border-radius: 16px !important;
  border: 1px solid #c9d8c7 !important;
  background: rgba(237, 245, 235, .82) !important;
  color: #07110b !important;
  font-size: 14px !important;
  outline: none !important;
  box-sizing: border-box !important;
}

.vusers-form-grid input {
  padding: 0 14px !important;
}

.vusers-form-grid input::placeholder {
  color: rgba(79, 98, 88, .54) !important;
}

.vusers-form-grid input:focus,
.vusers-form-grid select:focus {
  border-color: rgba(0, 133, 57, .44) !important;
  box-shadow: 0 0 0 3px rgba(0, 133, 57, .10) !important;
}

.vusers-select-wrap {
  position: relative !important;
}

.vusers-select-wrap select {
  appearance: none !important;
  -webkit-appearance: none !important;
  padding: 0 42px 0 40px !important;
  background: rgba(255, 255, 255, .72) !important;
  font-weight: 750 !important;
}

.vusers-select-icon {
  position: absolute !important;
  left: 14px !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  color: #5c6e62 !important;
  pointer-events: none !important;
}

.vusers-select-icon .vusers-icon {
  width: 15px !important;
  height: 15px !important;
}

.vusers-select-chevron {
  position: absolute !important;
  right: 14px !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  color: #5c6e62 !important;
  pointer-events: none !important;
}

.vusers-select-chevron .vusers-icon {
  width: 15px !important;
  height: 15px !important;
}

.vusers-form-actions {
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  margin-top: 16px !important;
}

.vusers-form-actions button,
.vusers-form-actions a {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  min-height: 40px !important;
  padding: 0 18px !important;
  border-radius: 14px !important;
  font-size: 14px !important;
  font-weight: 850 !important;
  text-decoration: none !important;
  box-sizing: border-box !important;
}

.vusers-form-actions button {
  border: 0 !important;
  background: #008539 !important;
  color: #ffffff !important;
  cursor: pointer !important;
  box-shadow: 0 8px 18px rgba(0, 133, 57, .18) !important;
}

.vusers-form-actions button .vusers-icon {
  width: 16px !important;
  height: 16px !important;
}

.vusers-form-actions a {
  border: 1px solid #cfdccd !important;
  background: rgba(255, 255, 255, .74) !important;
  color: #07110b !important;
}

.vusers-count-row {
  display: flex !important;
  align-items: center !important;
  gap: 14px !important;
  margin: 22px 0 16px !important;
}

.vusers-count-row span {
  color: #5c6e62 !important;
  font-size: 12px !important;
  font-weight: 900 !important;
  letter-spacing: .14em !important;
  text-transform: uppercase !important;
  white-space: nowrap !important;
}

.vusers-count-row i {
  display: block !important;
  height: 1px !important;
  flex: 1 !important;
  background: #cfdccd !important;
}

.vusers-list {
  display: grid !important;
  gap: 12px !important;
}

.vusers-row {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto auto !important;
  align-items: center !important;
  gap: 16px !important;
  min-height: 78px !important;
  padding: 18px 20px !important;
  border-radius: 20px !important;
  border: 1px solid #cfdccd !important;
  background: rgba(255, 255, 255, .90) !important;
  box-shadow: 0 8px 20px rgba(7, 17, 11, .06) !important;
  box-sizing: border-box !important;
}

.vusers-person {
  display: flex !important;
  align-items: center !important;
  gap: 16px !important;
  min-width: 0 !important;
}

.vusers-avatar {
  width: 36px !important;
  height: 36px !important;
  min-width: 36px !important;
  border-radius: 50% !important;
  background: rgba(0, 133, 57, .12) !important;
  color: #008539 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 12px !important;
  line-height: 1 !important;
  font-weight: 900 !important;
}

.vusers-person strong {
  display: block !important;
  color: #07110b !important;
  font-size: 16px !important;
  line-height: 1.2 !important;
  font-weight: 850 !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

.vusers-person span {
  display: block !important;
  margin-top: 4px !important;
  color: #4f6258 !important;
  font-size: 14px !important;
  line-height: 1.25 !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

.vusers-role {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  min-height: 26px !important;
  padding: 0 10px !important;
  border-radius: 999px !important;
  font-size: 12px !important;
  line-height: 1 !important;
  font-weight: 850 !important;
  white-space: nowrap !important;
}

.vusers-role .vusers-icon {
  width: 13px !important;
  height: 13px !important;
}

.vusers-role.is-admin {
  background: #ecfdf3 !important;
  color: #087a3a !important;
  box-shadow: inset 0 0 0 1px #bbf7d0 !important;
}

.vusers-role.is-shop {
  background: #fff7ed !important;
  color: #c2410c !important;
  box-shadow: inset 0 0 0 1px #fed7aa !important;
}

.vusers-role.is-support {
  background: #eff6ff !important;
  color: #1d4ed8 !important;
  box-shadow: inset 0 0 0 1px #bfdbfe !important;
}

.vusers-actions {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
}

.vusers-actions form {
  margin: 0 !important;
}

.vusers-edit,
.vusers-delete {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  min-height: 36px !important;
  padding: 0 16px !important;
  border-radius: 999px !important;
  font-size: 14px !important;
  font-weight: 850 !important;
  text-decoration: none !important;
  box-sizing: border-box !important;
}

.vusers-edit {
  border: 0 !important;
  background: #008539 !important;
  color: #ffffff !important;
}

.vusers-delete {
  border: 1px solid #fecaca !important;
  background: rgba(255, 255, 255, .88) !important;
  color: #dc2626 !important;
  cursor: pointer !important;
}

.vusers-edit .vusers-icon,
.vusers-delete .vusers-icon {
  width: 15px !important;
  height: 15px !important;
}

@media (max-width: 980px) {
  .vusers-page {
    width: 100% !important;
  }

  .vusers-row {
    grid-template-columns: 1fr !important;
    align-items: start !important;
  }

  .vusers-actions {
    justify-content: flex-start !important;
  }
}

@media (max-width: 680px) {
  .vusers-form-grid {
    grid-template-columns: 1fr !important;
  }

  .vusers-actions {
    flex-wrap: wrap !important;
  }
}

/* Users role custom dropdown with visible Lucide icons */
.vusers-role-dropdown {
  position: relative !important;
  width: 100% !important;
}

.vusers-role-trigger {
  width: 100% !important;
  height: 42px !important;
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  padding: 0 40px 0 14px !important;
  border-radius: 16px !important;
  border: 1px solid #c9d8c7 !important;
  background: rgba(255, 255, 255, .72) !important;
  color: #07110b !important;
  font-size: 14px !important;
  font-weight: 750 !important;
  text-align: left !important;
  cursor: pointer !important;
  box-sizing: border-box !important;
}

.vusers-role-trigger:hover,
.vusers-role-dropdown.is-open .vusers-role-trigger {
  border-color: rgba(0, 133, 57, .44) !important;
  box-shadow: 0 0 0 3px rgba(0, 133, 57, .10) !important;
}

.vusers-role-trigger-icon,
.vusers-role-option-icon {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 16px !important;
  height: 16px !important;
  min-width: 16px !important;
  color: #5c6e62 !important;
}

.vusers-role-trigger-icon .vusers-icon,
.vusers-role-option-icon .vusers-icon {
  width: 16px !important;
  height: 16px !important;
}

.vusers-role-trigger-chevron {
  position: absolute !important;
  right: 14px !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  color: #5c6e62 !important;
  pointer-events: none !important;
}

.vusers-role-trigger-chevron .vusers-icon {
  width: 15px !important;
  height: 15px !important;
}

.vusers-role-dropdown.is-open .vusers-role-trigger-chevron {
  transform: translateY(-50%) rotate(180deg) !important;
}

.vusers-role-menu {
  display: none !important;
  position: absolute !important;
  z-index: 40 !important;
  left: 0 !important;
  right: 0 !important;
  top: calc(100% + 8px) !important;
  padding: 6px !important;
  border-radius: 16px !important;
  border: 1px solid #c9d8c7 !important;
  background: rgba(255, 255, 255, .96) !important;
  box-shadow: 0 18px 40px rgba(7, 17, 11, .16) !important;
  backdrop-filter: blur(12px) !important;
}

.vusers-role-dropdown.is-open .vusers-role-menu {
  display: grid !important;
  gap: 4px !important;
}

.vusers-role-option {
  width: 100% !important;
  min-height: 38px !important;
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  padding: 0 10px !important;
  border: 0 !important;
  border-radius: 12px !important;
  background: transparent !important;
  color: #07110b !important;
  font-size: 14px !important;
  font-weight: 750 !important;
  text-align: left !important;
  cursor: pointer !important;
}

.vusers-role-option:hover {
  background: rgba(237, 245, 235, .96) !important;
}

.vusers-role-option.is-selected {
  background: rgba(0, 133, 57, .10) !important;
  color: #008539 !important;
}

.vusers-role-option.is-selected .vusers-role-option-icon {
  color: #008539 !important;
}

.vusers-role-option-check {
  display: none !important;
  margin-left: auto !important;
  color: #008539 !important;
}

.vusers-role-option.is-selected .vusers-role-option-check {
  display: inline-flex !important;
}

.vusers-role-option-check .vusers-icon {
  width: 15px !important;
  height: 15px !important;
}

/* Vercel-like compact admin sidebar */
.admin-shell,
.admin-shell.cadmin-shell {
  grid-template-columns: 196px minmax(0, 1fr) !important;
  gap: 28px !important;
}

.tw-admin-sidebar {
  width: 196px !important;
  min-width: 196px !important;
  max-width: 196px !important;
  align-self: start !important;
}

.tw-admin-sidebar-inner {
  position: sticky !important;
  top: 18px !important;
  display: flex !important;
  flex-direction: column !important;
  min-height: calc(100vh - 36px) !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

.tw-admin-sidebar-head {
  padding: 0 4px 14px !important;
}

.tw-admin-sidebar-head p {
  margin: 0 0 4px !important;
  color: #647568 !important;
  font-size: 10px !important;
  line-height: 1 !important;
  font-weight: 750 !important;
  letter-spacing: .12em !important;
  text-transform: uppercase !important;
}

.tw-admin-sidebar-head h2 {
  margin: 0 !important;
  color: #07110b !important;
  font-size: 21px !important;
  line-height: 1.05 !important;
  font-weight: 900 !important;
  letter-spacing: -.04em !important;
}

.tw-admin-sidebar-divider {
  height: 1px !important;
  margin: 0 4px 12px !important;
  background: rgba(16, 66, 38, .12) !important;
}

.tw-admin-nav {
  display: flex !important;
  flex-direction: column !important;
  gap: 2px !important;
  padding: 0 !important;
}

.tw-admin-nav a,
.tw-admin-logout {
  position: relative !important;
  display: flex !important;
  align-items: center !important;
  gap: 11px !important;
  min-height: 38px !important;
  padding: 0 10px !important;
  border: 0 !important;
  border-radius: 13px !important;
  background: transparent !important;
  color: #5c6e62 !important;
  text-decoration: none !important;
  font-size: 14px !important;
  line-height: 1.1 !important;
  font-weight: 650 !important;
  box-shadow: none !important;
  box-sizing: border-box !important;
  transition: background .15s ease, color .15s ease, transform .15s ease !important;
}

.tw-admin-nav a::before,
.tw-admin-logout::before {
  content: none !important;
  display: none !important;
}

.tw-admin-nav a:hover,
.tw-admin-logout:hover {
  background: rgba(237, 245, 235, .88) !important;
  color: #07110b !important;
}

.tw-admin-nav a.is-active {
  background: rgba(0, 133, 57, .10) !important;
  color: #008539 !important;
  font-weight: 850 !important;
}

.tw-admin-nav a span,
.tw-admin-logout span {
  min-width: 0 !important;
  flex: 1 !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

.tw-admin-nav-svg {
  width: 16px !important;
  height: 16px !important;
  min-width: 16px !important;
  fill: none !important;
  stroke: currentColor !important;
  stroke-width: 2 !important;
  stroke-linecap: round !important;
  stroke-linejoin: round !important;
  color: currentColor !important;
}

.tw-admin-nav-chevron {
  width: 14px !important;
  height: 14px !important;
  min-width: 14px !important;
  fill: none !important;
  stroke: currentColor !important;
  stroke-width: 2.4 !important;
  stroke-linecap: round !important;
  stroke-linejoin: round !important;
  margin-left: auto !important;
}

.tw-admin-logout {
  margin-top: auto !important;
  color: #9d1b1b !important;
}

.tw-admin-logout:hover {
  background: rgba(220, 38, 38, .08) !important;
  color: #b91c1c !important;
}

/* kill older sidebar systems and pseudo icon leftovers */
.admin-sidebar,
.admin-nav,
.admin-nav-icon {
  all: unset;
}

.admin-sidebar a::before,
.admin-nav a::before,
.admin-sidebar a[href*="view=customers"]::before,
.admin-sidebar a[href*="view=users"]::before,
.admin-sidebar a[href*="view=designs"]::before,
.admin-nav a[href*="view=customers"]::before,
.admin-nav a[href*="view=users"]::before,
.admin-nav a[href*="view=designs"]::before {
  content: none !important;
  display: none !important;
}

@media (max-width: 900px) {
  .admin-shell,
  .admin-shell.cadmin-shell {
    grid-template-columns: 1fr !important;
  }

  .tw-admin-sidebar {
    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;
  }

  .tw-admin-sidebar-inner {
    position: static !important;
    min-height: 0 !important;
  }

  .tw-admin-nav {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 6px !important;
  }

  .tw-admin-logout {
    margin-top: 12px !important;
  }
}

/* Sidebar cleanup: remove duplicated inner title and keep logout closer */
.tw-admin-sidebar-head {
  display: none !important;
}

.tw-admin-sidebar-inner > .tw-admin-sidebar-divider:first-of-type {
  display: none !important;
}

.tw-admin-sidebar-inner {
  min-height: 0 !important;
  height: auto !important;
}

.tw-admin-logout {
  margin-top: 10px !important;
}

.tw-admin-sidebar-inner > .tw-admin-sidebar-divider:last-of-type {
  margin-top: 12px !important;
  margin-bottom: 8px !important;
}

/* Sidebar cleanup: remove duplicated inner title and keep logout closer */
.tw-admin-sidebar-head {
  display: none !important;
}

.tw-admin-sidebar-inner > .tw-admin-sidebar-divider:first-of-type {
  display: none !important;
}

.tw-admin-sidebar-inner {
  min-height: 0 !important;
  height: auto !important;
}

.tw-admin-logout {
  margin-top: 10px !important;
}

.tw-admin-sidebar-inner > .tw-admin-sidebar-divider:last-of-type {
  margin-top: 12px !important;
  margin-bottom: 8px !important;
}

/* Codes view polish, compact Vercel style */
.vcodes-page {
  width: min(860px, 100%) !important;
  max-width: 860px !important;
}

.vcodes-page > header,
.vcodes-page .admin-header,
.vcodes-page .codes-header {
  margin: 0 0 22px !important;
}

.vcodes-page h1 {
  margin: 0 !important;
  color: #07110b !important;
  font-size: 32px !important;
  line-height: 1.05 !important;
  font-weight: 900 !important;
  letter-spacing: -.04em !important;
}

.vcodes-page p {
  color: #4f6258 !important;
}

/* Tabs oben sauberer und weniger breit */
.vcodes-page .tabs,
.vcodes-page .admin-tabs,
.vcodes-page .codes-tabs,
.vcodes-page [role="tablist"] {
  display: inline-flex !important;
  align-items: center !important;
  gap: 0 !important;
  height: 38px !important;
  margin: 0 0 24px !important;
  padding: 3px !important;
  border-radius: 15px !important;
  border: 1px solid #cfdccd !important;
  background: rgba(255, 255, 255, .78) !important;
  box-shadow: none !important;
}

.vcodes-page .tabs a,
.vcodes-page .admin-tabs a,
.vcodes-page .codes-tabs a,
.vcodes-page [role="tab"],
.vcodes-page button[role="tab"] {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  min-height: 30px !important;
  padding: 0 16px !important;
  border: 0 !important;
  border-radius: 12px !important;
  background: transparent !important;
  color: #07110b !important;
  font-size: 13px !important;
  font-weight: 850 !important;
  text-decoration: none !important;
  white-space: nowrap !important;
}

.vcodes-page .tabs a.is-active,
.vcodes-page .admin-tabs a.is-active,
.vcodes-page .codes-tabs a.is-active,
.vcodes-page [role="tab"][aria-selected="true"],
.vcodes-page button[role="tab"][aria-selected="true"] {
  background: #07110b !important;
  color: #ffffff !important;
}

/* Hauptlayout breiter, rechte Liste nicht mehr gequetscht */
.vcodes-page .admin-grid,
.vcodes-page .codes-grid,
.vcodes-page .codes-layout,
.vcodes-page .discount-layout,
.vcodes-page .coupon-layout,
.vcodes-page .giftcard-layout {
  display: grid !important;
  grid-template-columns: 420px minmax(300px, 1fr) !important;
  gap: 20px !important;
  align-items: start !important;
}

/* Fallback, falls kein Layout-Wrapper existiert */
.vcodes-page > section:not(.vcodes-page),
.vcodes-page > div {
  max-width: 100% !important;
}

/* Cards */
.vcodes-page .card,
.vcodes-page .admin-card,
.vcodes-page .codes-card,
.vcodes-page form,
.vcodes-page aside {
  border-radius: 20px !important;
  border: 1px solid #cfdccd !important;
  background: rgba(255, 255, 255, .88) !important;
  box-shadow: 0 10px 28px rgba(7, 17, 11, .06) !important;
}

.vcodes-page .card,
.vcodes-page .admin-card,
.vcodes-page .codes-card {
  padding: 20px !important;
}

.vcodes-page form {
  padding: 20px !important;
}

/* Titel nicht mehr schmal umbrechen */
.vcodes-page h2,
.vcodes-page h3 {
  margin-top: 0 !important;
  color: #07110b !important;
  font-weight: 900 !important;
  letter-spacing: -.025em !important;
  line-height: 1.15 !important;
}

.vcodes-page h2 {
  font-size: 18px !important;
}

.vcodes-page h3 {
  font-size: 16px !important;
}

/* Rechte Code-Liste breiter und stabiler */
.vcodes-page aside,
.vcodes-page .codes-list,
.vcodes-page .discount-list,
.vcodes-page .coupon-list {
  min-width: 300px !important;
  padding: 20px !important;
  box-sizing: border-box !important;
}

.vcodes-page aside h2,
.vcodes-page aside h3,
.vcodes-page .codes-list h2,
.vcodes-page .codes-list h3,
.vcodes-page .discount-list h2,
.vcodes-page .discount-list h3 {
  max-width: none !important;
  white-space: normal !important;
}

/* Formfelder Vercel-näher */
.vcodes-page label {
  display: grid !important;
  gap: 7px !important;
  margin: 0 0 14px !important;
  color: #07110b !important;
  font-size: 11px !important;
  font-weight: 900 !important;
}

.vcodes-page input,
.vcodes-page select,
.vcodes-page textarea {
  width: 100% !important;
  min-height: 36px !important;
  padding: 0 14px !important;
  border-radius: 16px !important;
  border: 1px solid #c9d8c7 !important;
  background: rgba(255, 255, 255, .72) !important;
  color: #07110b !important;
  font-size: 14px !important;
  outline: none !important;
  box-sizing: border-box !important;
}

.vcodes-page textarea {
  min-height: 70px !important;
  padding: 10px 14px !important;
}

.vcodes-page input:focus,
.vcodes-page select:focus,
.vcodes-page textarea:focus {
  border-color: rgba(0, 133, 57, .44) !important;
  box-shadow: 0 0 0 3px rgba(0, 133, 57, .10) !important;
}

.vcodes-page button,
.vcodes-page .button,
.vcodes-page input[type="submit"] {
  min-height: 36px !important;
  padding: 0 16px !important;
  border-radius: 14px !important;
  border: 0 !important;
  background: #008539 !important;
  color: #ffffff !important;
  font-size: 13px !important;
  font-weight: 900 !important;
  cursor: pointer !important;
}

/* Alte schmale Nebenkarte neutralisieren */
.vcodes-page aside[style],
.vcodes-page div[style] {
  max-width: none !important;
}

@media (max-width: 1080px) {
  .vcodes-page {
    width: 100% !important;
    max-width: 100% !important;
  }

  .vcodes-page .admin-grid,
  .vcodes-page .codes-grid,
  .vcodes-page .codes-layout,
  .vcodes-page .discount-layout,
  .vcodes-page .coupon-layout,
  .vcodes-page .giftcard-layout {
    grid-template-columns: 1fr !important;
  }

  .vcodes-page aside,
  .vcodes-page .codes-list,
  .vcodes-page .discount-list,
  .vcodes-page .coupon-list {
    min-width: 0 !important;
  }
}

/* Codes view, fixed after unwrapping old admin shell */
.vcodes-page {
  width: min(920px, 100%) !important;
  max-width: 920px !important;
}

.vcodes-page .admin-content-head.admin-codes-head {
  display: flex !important;
  align-items: flex-start !important;
  justify-content: space-between !important;
  gap: 24px !important;
  margin: 0 0 24px !important;
}

.vcodes-page .admin-content-head h2 {
  margin: 0 !important;
  color: #07110b !important;
  font-size: 30px !important;
  line-height: 1.05 !important;
  font-weight: 900 !important;
  letter-spacing: -.04em !important;
}

.vcodes-page .admin-content-head p {
  margin: 8px 0 0 !important;
  max-width: 260px !important;
  color: #4f6258 !important;
  font-size: 14px !important;
  line-height: 1.4 !important;
}

.vcodes-page .admin-code-tabs {
  display: inline-flex !important;
  align-items: center !important;
  height: 38px !important;
  padding: 3px !important;
  border-radius: 15px !important;
  border: 1px solid #cfdccd !important;
  background: rgba(255, 255, 255, .82) !important;
  box-shadow: none !important;
  white-space: nowrap !important;
}

.vcodes-page .admin-code-tabs a {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  min-height: 30px !important;
  padding: 0 16px !important;
  border-radius: 12px !important;
  color: #07110b !important;
  font-size: 13px !important;
  font-weight: 850 !important;
  text-decoration: none !important;
}

.vcodes-page .admin-code-tabs a.is-active {
  background: #07110b !important;
  color: #ffffff !important;
}

.vcodes-page .admin-codes-layout-clean {
  display: grid !important;
  grid-template-columns: minmax(390px, 430px) minmax(300px, 1fr) !important;
  gap: 20px !important;
  align-items: start !important;
}

.vcodes-page .admin-form-card,
.vcodes-page .admin-code-list-card {
  border-radius: 20px !important;
  border: 1px solid #cfdccd !important;
  background: rgba(255, 255, 255, .90) !important;
  box-shadow: 0 10px 28px rgba(7, 17, 11, .06) !important;
  padding: 20px !important;
  box-sizing: border-box !important;
}

.vcodes-page .admin-code-list-card {
  min-width: 300px !important;
}

.vcodes-page .admin-form-card h3,
.vcodes-page .admin-code-list-card h3 {
  margin: 0 0 18px !important;
  color: #07110b !important;
  font-size: 18px !important;
  line-height: 1.15 !important;
  font-weight: 900 !important;
  letter-spacing: -.025em !important;
}

.vcodes-page .admin-code-list-card h3 {
  max-width: none !important;
}

.vcodes-page .admin-code-form {
  display: grid !important;
  gap: 14px !important;
}

.vcodes-page .admin-code-form label {
  display: grid !important;
  gap: 8px !important;
  margin: 0 !important;
  color: #07110b !important;
  font-size: 11px !important;
  line-height: 1.25 !important;
  font-weight: 900 !important;
}

.vcodes-page .two-cols {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 10px !important;
}

.vcodes-page input,
.vcodes-page select,
.vcodes-page textarea {
  width: 100% !important;
  min-height: 36px !important;
  padding: 0 14px !important;
  border-radius: 16px !important;
  border: 1px solid #c9d8c7 !important;
  background: rgba(255, 255, 255, .74) !important;
  color: #07110b !important;
  font-size: 14px !important;
  outline: none !important;
  box-sizing: border-box !important;
}

.vcodes-page textarea {
  min-height: 68px !important;
  padding: 10px 14px !important;
}

.vcodes-page input:focus,
.vcodes-page select:focus,
.vcodes-page textarea:focus {
  border-color: rgba(0, 133, 57, .44) !important;
  box-shadow: 0 0 0 3px rgba(0, 133, 57, .10) !important;
}

.vcodes-page .code-generate {
  display: grid !important;
  grid-template-columns: 1fr 42px !important;
  gap: 8px !important;
}

.vcodes-page .code-generate button {
  min-width: 42px !important;
  padding: 0 !important;
  border-radius: 999px !important;
  background: rgba(255, 255, 255, .78) !important;
  color: #07110b !important;
  border: 1px solid #c9d8c7 !important;
}

.vcodes-page .admin-code-form > button,
.vcodes-page button[type="submit"] {
  justify-self: start !important;
  min-height: 36px !important;
  padding: 0 18px !important;
  border: 0 !important;
  border-radius: 999px !important;
  background: #33b46d !important;
  color: #ffffff !important;
  font-size: 13px !important;
  font-weight: 900 !important;
  cursor: pointer !important;
}

@media (max-width: 1100px) {
  .vcodes-page {
    width: 100% !important;
    max-width: 100% !important;
  }

  .vcodes-page .admin-content-head.admin-codes-head {
    flex-direction: column !important;
  }

  .vcodes-page .admin-codes-layout-clean {
    grid-template-columns: 1fr !important;
  }

  .vcodes-page .admin-code-list-card {
    min-width: 0 !important;
  }
}

/* Codes view, Vercel content only, no shell/sidebar/header/footer changes */
.vcodes-page {
  width: 100% !important;
  max-width: 100% !important;
}

/* Header like latest Vercel codes page */
.vcodes-page .admin-content-head.admin-codes-head {
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: flex-start !important;
  justify-content: space-between !important;
  gap: 16px 24px !important;
  margin: 0 0 24px !important;
}

.vcodes-page .admin-content-head.admin-codes-head h2 {
  margin: 0 !important;
  color: #07110b !important;
  font-size: 30px !important;
  line-height: 1.08 !important;
  font-weight: 900 !important;
  letter-spacing: -.04em !important;
}

.vcodes-page .admin-content-head.admin-codes-head p {
  margin: 6px 0 0 !important;
  max-width: none !important;
  color: #52645a !important;
  font-size: 14px !important;
  line-height: 1.45 !important;
}

/* Vercel tab switcher */
.vcodes-page .admin-code-tabs {
  display: flex !important;
  align-items: center !important;
  gap: 0 !important;
  height: 44px !important;
  padding: 4px !important;
  border-radius: 14px !important;
  border: 1px solid #cfdccd !important;
  background: rgba(255, 255, 255, .92) !important;
  box-shadow: 0 8px 18px rgba(7, 17, 11, .06) !important;
  white-space: nowrap !important;
}

.vcodes-page .admin-code-tabs a {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  min-height: 34px !important;
  padding: 0 16px !important;
  border-radius: 10px !important;
  border: 0 !important;
  background: transparent !important;
  color: #52645a !important;
  font-size: 14px !important;
  line-height: 1 !important;
  font-weight: 800 !important;
  text-decoration: none !important;
  box-shadow: none !important;
}

.vcodes-page .admin-code-tabs a.is-active {
  background: #07110b !important;
  color: #ffffff !important;
  box-shadow: 0 4px 10px rgba(7, 17, 11, .12) !important;
}

.vcodes-tab-icon,
.vcodes-refresh-icon {
  width: 16px !important;
  height: 16px !important;
  fill: none !important;
  stroke: currentColor !important;
  stroke-width: 2 !important;
  stroke-linecap: round !important;
  stroke-linejoin: round !important;
  display: block !important;
}

/* Vercel two-column card grid */
.vcodes-page .admin-codes-layout-clean {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 20px !important;
  align-items: start !important;
}

/* Cards, reset older oversized rules */
.vcodes-page .admin-form-card,
.vcodes-page .admin-code-list-card {
  min-height: 0 !important;
  height: auto !important;
  padding: 20px !important;
  border-radius: 18px !important;
  border: 1px solid #cfdccd !important;
  background: rgba(255, 255, 255, .94) !important;
  box-shadow: 0 8px 18px rgba(7, 17, 11, .06) !important;
  box-sizing: border-box !important;
}

.vcodes-page .admin-form-card h3,
.vcodes-page .admin-code-list-card h3 {
  margin: 0 0 16px !important;
  color: #07110b !important;
  font-size: 16px !important;
  line-height: 1.2 !important;
  font-weight: 900 !important;
  letter-spacing: -.02em !important;
}

/* Form spacing */
.vcodes-page .admin-code-form {
  display: flex !important;
  flex-direction: column !important;
  gap: 16px !important;
}

.vcodes-page .two-cols {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 12px !important;
}

.vcodes-page .admin-code-form label {
  display: flex !important;
  flex-direction: column !important;
  gap: 6px !important;
  margin: 0 !important;
  color: #07110b !important;
  font-size: 14px !important;
  line-height: 1.25 !important;
  font-weight: 750 !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
}

/* Inputs exactly closer to Vercel: rounded-xl, card bg, subtle focus */
.vcodes-page input,
.vcodes-page select,
.vcodes-page textarea {
  width: 100% !important;
  min-height: 42px !important;
  padding: 0 14px !important;
  border-radius: 12px !important;
  border: 1px solid #cfdccd !important;
  background: rgba(255, 255, 255, .88) !important;
  color: #07110b !important;
  font-size: 14px !important;
  line-height: 1.2 !important;
  outline: none !important;
  box-sizing: border-box !important;
  box-shadow: none !important;
}

.vcodes-page textarea {
  min-height: 80px !important;
  padding: 10px 14px !important;
  resize: vertical !important;
}

.vcodes-page input:focus,
.vcodes-page select:focus,
.vcodes-page textarea:focus {
  border-color: rgba(0, 133, 57, .42) !important;
  box-shadow: 0 0 0 2px rgba(0, 133, 57, .14) !important;
}

/* Code input + refresh button */
.vcodes-page .code-generate {
  display: flex !important;
  gap: 8px !important;
  align-items: center !important;
}

.vcodes-page .code-generate input {
  flex: 1 1 auto !important;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace !important;
}

.vcodes-page .code-generate button {
  width: 42px !important;
  min-width: 42px !important;
  height: 42px !important;
  min-height: 42px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 0 !important;
  border-radius: 12px !important;
  border: 1px solid #cfdccd !important;
  background: rgba(255, 255, 255, .88) !important;
  color: #52645a !important;
  box-shadow: none !important;
}

.vcodes-page .code-generate button:hover {
  background: #edf5eb !important;
  color: #07110b !important;
}

/* Submit button */
.vcodes-page .admin-code-form > button,
.vcodes-page .admin-code-form button[type="submit"] {
  width: 100% !important;
  min-height: 42px !important;
  padding: 0 16px !important;
  border: 0 !important;
  border-radius: 12px !important;
  background: #008539 !important;
  color: #ffffff !important;
  font-size: 14px !important;
  line-height: 1 !important;
  font-weight: 850 !important;
  box-shadow: 0 6px 14px rgba(0, 133, 57, .18) !important;
  cursor: pointer !important;
}

/* List rows if codes exist */
.vcodes-page .admin-code-list-card .code-row,
.vcodes-page .admin-code-list-card article,
.vcodes-page .admin-code-list-card li {
  border-radius: 12px !important;
  border: 1px solid #cfdccd !important;
  background: rgba(255, 255, 255, .72) !important;
  padding: 12px !important;
}

.vcodes-page .admin-code-list-card p {
  color: #52645a !important;
  font-size: 14px !important;
  line-height: 1.45 !important;
}

/* Responsive */
@media (max-width: 980px) {
  .vcodes-page .admin-codes-layout-clean {
    grid-template-columns: 1fr !important;
  }

  .vcodes-page .admin-content-head.admin-codes-head {
    flex-direction: column !important;
  }
}

@media (max-width: 640px) {
  .vcodes-page .two-cols {
    grid-template-columns: 1fr !important;
  }

  .vcodes-page .admin-code-tabs {
    width: 100% !important;
  }

  .vcodes-page .admin-code-tabs a {
    flex: 1 !important;
  }
}

/* Vercel-style legal pages */
.vlegal-page {
  min-height: 70vh !important;
  width: min(1120px, calc(100% - 32px)) !important;
  margin: 0 auto !important;
  padding: 48px 0 72px !important;
}

.vlegal-hero {
  margin: 0 0 28px !important;
}

.vlegal-hero p {
  margin: 0 0 6px !important;
  color: #008539 !important;
  font-size: 12px !important;
  font-weight: 900 !important;
  letter-spacing: .14em !important;
  text-transform: uppercase !important;
}

.vlegal-hero h1 {
  margin: 0 !important;
  color: #07110b !important;
  font-size: clamp(36px, 6vw, 64px) !important;
  line-height: .96 !important;
  font-weight: 950 !important;
  letter-spacing: -.06em !important;
}

.vlegal-hero span {
  display: block !important;
  margin-top: 12px !important;
  max-width: 560px !important;
  color: #52645a !important;
  font-size: 16px !important;
  line-height: 1.55 !important;
}

.vlegal-grid {
  display: grid !important;
  grid-template-columns: minmax(0, 1.2fr) minmax(280px, .8fr) !important;
  gap: 20px !important;
  align-items: start !important;
}

.vlegal-card {
  border-radius: 22px !important;
  border: 1px solid #cfdccd !important;
  background: rgba(255, 255, 255, .92) !important;
  box-shadow: 0 10px 28px rgba(7, 17, 11, .07) !important;
  padding: 24px !important;
  box-sizing: border-box !important;
}

.vlegal-main-card,
.vlegal-side-card {
  min-height: 100% !important;
}

.vlegal-wide-card {
  grid-column: 1 / -1 !important;
}

.vlegal-card header {
  display: flex !important;
  align-items: flex-start !important;
  gap: 14px !important;
  margin: 0 0 22px !important;
}

.vlegal-icon {
  width: 40px !important;
  height: 40px !important;
  min-width: 40px !important;
  border-radius: 14px !important;
  background: rgba(0, 133, 57, .10) !important;
  color: #008539 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
}

.vlegal-icon svg {
  width: 20px !important;
  height: 20px !important;
  fill: none !important;
  stroke: currentColor !important;
  stroke-width: 2 !important;
  stroke-linecap: round !important;
  stroke-linejoin: round !important;
}

.vlegal-card h2 {
  margin: 0 !important;
  color: #07110b !important;
  font-size: 18px !important;
  line-height: 1.2 !important;
  font-weight: 900 !important;
  letter-spacing: -.025em !important;
}

.vlegal-card header p,
.vlegal-card > p {
  margin: 6px 0 0 !important;
  color: #52645a !important;
  font-size: 14px !important;
  line-height: 1.55 !important;
}

.vlegal-wide-card h2 {
  margin-top: 22px !important;
}

.vlegal-wide-card h2:first-child {
  margin-top: 0 !important;
}

.vlegal-data {
  display: grid !important;
  gap: 16px !important;
  margin: 0 !important;
}

.vlegal-data div {
  padding: 14px 0 !important;
  border-top: 1px solid #d8e2d5 !important;
}

.vlegal-data div:first-child {
  border-top: 0 !important;
  padding-top: 0 !important;
}

.vlegal-data dt {
  margin: 0 0 6px !important;
  color: #637468 !important;
  font-size: 11px !important;
  line-height: 1 !important;
  font-weight: 900 !important;
  letter-spacing: .12em !important;
  text-transform: uppercase !important;
}

.vlegal-data dd {
  margin: 0 !important;
  color: #07110b !important;
  font-size: 15px !important;
  line-height: 1.55 !important;
  font-weight: 650 !important;
}

.vlegal-data a {
  color: #008539 !important;
  font-weight: 850 !important;
  text-decoration: none !important;
}

.vlegal-data a:hover {
  text-decoration: underline !important;
}

.vlegal-note {
  display: grid !important;
  gap: 8px !important;
  padding: 16px !important;
  border-radius: 16px !important;
  border: 1px solid rgba(0, 133, 57, .18) !important;
  background: rgba(0, 133, 57, .07) !important;
}

.vlegal-note strong {
  color: #07110b !important;
  font-size: 14px !important;
  font-weight: 900 !important;
}

.vlegal-note span {
  color: #52645a !important;
  font-size: 14px !important;
  line-height: 1.5 !important;
}

@media (max-width: 860px) {
  .vlegal-grid {
    grid-template-columns: 1fr !important;
  }
}

/* Footer credit */
.footer-credit-link {
  color: inherit !important;
  font-weight: 750 !important;
  text-decoration: none !important;
}

.footer-credit-link:hover {
  color: #008539 !important;
  text-decoration: underline !important;
}

/* Privacy page additions */
.vprivacy-list {
  display: grid !important;
  gap: 10px !important;
  margin: 14px 0 22px !important;
  padding: 0 !important;
  list-style: none !important;
}

.vprivacy-list li {
  position: relative !important;
  padding-left: 22px !important;
  color: #52645a !important;
  font-size: 14px !important;
  line-height: 1.55 !important;
}

.vprivacy-list li::before {
  content: "" !important;
  position: absolute !important;
  left: 0 !important;
  top: .7em !important;
  width: 7px !important;
  height: 7px !important;
  border-radius: 999px !important;
  background: #008539 !important;
}

.vprivacy-updated {
  margin-top: 28px !important;
  padding-top: 18px !important;
  border-top: 1px solid #d8e2d5 !important;
  color: #637468 !important;
  font-size: 13px !important;
  font-weight: 750 !important;
}

.vprivacy-page .vlegal-note a {
  color: #008539 !important;
  font-weight: 850 !important;
  text-decoration: none !important;
}

.vprivacy-page .vlegal-note a:hover {
  text-decoration: underline !important;
}

/* AGB page additions */
.vagb-page .vlegal-note a {
  color: #008539 !important;
  font-weight: 850 !important;
  text-decoration: none !important;
}

.vagb-page .vlegal-note a:hover {
  text-decoration: underline !important;
}

.vagb-updated {
  margin-top: 28px !important;
  padding-top: 18px !important;
  border-top: 1px solid #d8e2d5 !important;
  color: #637468 !important;
  font-size: 13px !important;
  font-weight: 750 !important;
}

/* Product designer UI refresh */
.product-detail-layout--custom {
  grid-template-columns: minmax(480px, 1.05fr) minmax(380px, .95fr) !important;
  gap: 28px !important;
  align-items: start !important;
}

.product-detail-page--custom .product-detail-media,
.product-detail-page--custom .product-buy-panel {
  min-width: 0 !important;
}

.shirt-designer {
  display: grid !important;
  gap: 14px !important;
}

.designer-stage-head {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 16px !important;
  margin-bottom: 2px !important;
}

.designer-stage-head > span {
  color: #52645a !important;
  font-size: 13px !important;
  font-weight: 750 !important;
}

.designer-view-tabs {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
}

.designer-view-tabs button {
  min-height: 30px !important;
  padding: 0 13px !important;
  border: 1px solid #cfdccd !important;
  border-radius: 999px !important;
  background: rgba(255, 255, 255, .86) !important;
  color: #52645a !important;
  font-size: 12px !important;
  font-weight: 850 !important;
  cursor: pointer !important;
}

.designer-view-tabs button.is-active {
  border-color: #008539 !important;
  color: #008539 !important;
  background: rgba(0, 133, 57, .08) !important;
}

.designer-canvas-card {
  overflow: hidden !important;
  border: 1px solid #cfdccd !important;
  border-radius: 20px !important;
  background: rgba(255, 255, 255, .92) !important;
  box-shadow: 0 8px 18px rgba(7, 17, 11, .06) !important;
}

.designer-canvas-card canvas {
  width: 100% !important;
  height: auto !important;
  display: block !important;
}

.designer-tools--clean {
  display: grid !important;
  gap: 14px !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
}

.designer-upload-card,
.designer-text-card,
.designer-object-panel {
  border: 1px solid #cfdccd !important;
  border-radius: 18px !important;
  background: rgba(255, 255, 255, .92) !important;
  box-shadow: 0 8px 18px rgba(7, 17, 11, .05) !important;
}

.designer-upload-card {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 14px !important;
  padding: 16px !important;
}

.designer-upload-card strong,
.designer-object-panel h2 {
  display: block !important;
  margin: 0 !important;
  color: #07110b !important;
  font-size: 15px !important;
  line-height: 1.2 !important;
  font-weight: 900 !important;
}

.designer-upload-card small,
.designer-object-panel p {
  display: block !important;
  margin: 5px 0 0 !important;
  color: #52645a !important;
  font-size: 12px !important;
  line-height: 1.4 !important;
}

.designer-upload-button--wide {
  position: relative !important;
  min-height: 38px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 0 16px !important;
  border: 1px solid rgba(0, 133, 57, .18) !important;
  border-radius: 999px !important;
  background: rgba(0, 133, 57, .09) !important;
  color: #008539 !important;
  font-size: 13px !important;
  font-weight: 900 !important;
  cursor: pointer !important;
  white-space: nowrap !important;
}

.designer-upload-button--wide input {
  position: absolute !important;
  inset: 0 !important;
  opacity: 0 !important;
  cursor: pointer !important;
}

.designer-text-card {
  padding: 14px !important;
}

.designer-text-row {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto !important;
  gap: 10px !important;
}

.designer-text-row input {
  min-height: 40px !important;
  border-radius: 14px !important;
}

.designer-text-row button,
.designer-action-row button {
  min-height: 40px !important;
  padding: 0 14px !important;
  border: 1px solid #cfdccd !important;
  border-radius: 14px !important;
  background: rgba(255, 255, 255, .88) !important;
  color: #07110b !important;
  font-size: 13px !important;
  font-weight: 850 !important;
  cursor: pointer !important;
}

.designer-object-panel {
  padding: 16px !important;
}

.designer-object-panel-head {
  display: flex !important;
  align-items: flex-start !important;
  justify-content: space-between !important;
  gap: 14px !important;
  margin-bottom: 12px !important;
}

.designer-object-panel-head > strong {
  min-width: 30px !important;
  height: 30px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  border-radius: 999px !important;
  background: rgba(0, 133, 57, .10) !important;
  color: #008539 !important;
  font-size: 13px !important;
  font-weight: 900 !important;
}

.designer-object-list {
  display: grid !important;
  gap: 8px !important;
}

.designer-object-empty {
  margin: 0 !important;
  padding: 14px !important;
  border: 1px dashed #cfdccd !important;
  border-radius: 14px !important;
  background: rgba(246, 251, 245, .74) !important;
  color: #52645a !important;
  font-size: 13px !important;
}

.designer-object-empty[hidden] {
  display: none !important;
}

.designer-object-item {
  display: grid !important;
  grid-template-columns: 44px minmax(0, 1fr) 34px !important;
  gap: 10px !important;
  align-items: center !important;
  padding: 8px !important;
  border: 1px solid #cfdccd !important;
  border-radius: 14px !important;
  background: rgba(255, 255, 255, .76) !important;
}

.designer-object-item.is-active {
  border-color: rgba(0, 133, 57, .62) !important;
  box-shadow: 0 0 0 2px rgba(0, 133, 57, .10) !important;
}

.designer-object-preview,
.designer-object-content,
.designer-object-remove {
  border: 0 !important;
  background: transparent !important;
  cursor: pointer !important;
}

.designer-object-preview {
  width: 44px !important;
  height: 44px !important;
  display: grid !important;
  place-items: center !important;
  overflow: hidden !important;
  border-radius: 12px !important;
  background: #f2f7f0 !important;
  color: #008539 !important;
  font-size: 18px !important;
  font-weight: 900 !important;
}

.designer-object-preview img {
  width: 100% !important;
  height: 100% !important;
  object-fit: contain !important;
}

.designer-object-content {
  min-width: 0 !important;
  display: grid !important;
  gap: 3px !important;
  padding: 0 !important;
  text-align: left !important;
}

.designer-object-content strong {
  overflow: hidden !important;
  color: #07110b !important;
  font-size: 13px !important;
  font-weight: 900 !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

.designer-object-content span {
  color: #52645a !important;
  font-size: 12px !important;
}

.designer-object-remove {
  width: 34px !important;
  height: 34px !important;
  display: grid !important;
  place-items: center !important;
  border-radius: 999px !important;
  color: #e11d48 !important;
  font-size: 20px !important;
  line-height: 1 !important;
}

.designer-object-remove:hover {
  background: rgba(225, 29, 72, .08) !important;
}

.designer-action-row {
  display: flex !important;
  gap: 10px !important;
}

.designer-range {
  display: grid !important;
  gap: 8px !important;
  margin: 0 !important;
  color: #07110b !important;
  font-size: 13px !important;
  font-weight: 850 !important;
}

.designer-range input {
  width: 100% !important;
  min-height: 24px !important;
  padding: 0 !important;
  accent-color: #008539 !important;
}

.designer-status {
  min-height: 18px !important;
  color: #52645a !important;
  font-size: 12px !important;
}

.product-detail-page--custom .product-buy-panel {
  border-radius: 20px !important;
  border: 1px solid #cfdccd !important;
  background: rgba(255, 255, 255, .92) !important;
  box-shadow: 0 8px 18px rgba(7, 17, 11, .06) !important;
}

.product-detail-page--custom .product-buy-panel .pill {
  color: #008539 !important;
  background: rgba(0, 133, 57, .08) !important;
}

.designer-option-card,
.designer-summary-box {
  margin: 0 0 16px !important;
  padding: 0 !important;
  border: 0 !important;
}

.designer-option-card legend {
  margin: 0 0 12px !important;
  color: #07110b !important;
  font-size: 15px !important;
  font-weight: 900 !important;
}

.designer-color-row,
.designer-size-row {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 10px !important;
}

.designer-color-choice,
.designer-size-choice {
  position: relative !important;
  margin: 0 !important;
  cursor: pointer !important;
}

.designer-color-choice input,
.designer-size-choice input {
  position: absolute !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

.designer-color-choice > span {
  width: 36px !important;
  height: 36px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  border: 1px solid #cfdccd !important;
  border-radius: 999px !important;
  background: var(--swatch) !important;
  box-shadow: inset 0 0 0 1px rgba(7, 17, 11, .04) !important;
}

.designer-color-choice input:checked + span {
  border-color: #008539 !important;
  box-shadow: 0 0 0 3px rgba(0, 133, 57, .14), inset 0 0 0 2px #ffffff !important;
}

.designer-color-choice input:checked + span::after {
  content: "✓" !important;
  color: #ffffff !important;
  font-size: 15px !important;
  font-weight: 900 !important;
  text-shadow: 0 1px 3px rgba(0, 0, 0, .44) !important;
}

.designer-color-choice em {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  overflow: hidden !important;
  clip: rect(0 0 0 0) !important;
  white-space: nowrap !important;
}

.designer-size-choice span {
  min-width: 38px !important;
  height: 38px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 0 10px !important;
  border: 1px solid #cfdccd !important;
  border-radius: 999px !important;
  background: rgba(255, 255, 255, .78) !important;
  color: #07110b !important;
  font-size: 13px !important;
  font-weight: 850 !important;
}

.designer-size-choice input:checked + span {
  border-color: #008539 !important;
  background: rgba(0, 133, 57, .10) !important;
  color: #008539 !important;
  box-shadow: 0 0 0 3px rgba(0, 133, 57, .10) !important;
}

.designer-summary-box {
  margin-top: 18px !important;
  padding: 18px !important;
  border: 1px solid #cfdccd !important;
  border-radius: 18px !important;
  background: rgba(246, 251, 245, .72) !important;
}

.designer-summary-box h2 {
  margin: 0 0 16px !important;
  color: #07110b !important;
  font-size: 17px !important;
  font-weight: 900 !important;
}

.designer-summary-box dl {
  display: grid !important;
  gap: 10px !important;
  margin: 0 0 14px !important;
}

.designer-summary-box dl div {
  display: flex !important;
  align-items: baseline !important;
  justify-content: space-between !important;
  gap: 16px !important;
}

.designer-summary-box dt {
  color: #52645a !important;
  font-size: 13px !important;
}

.designer-summary-box dd {
  margin: 0 !important;
  color: #07110b !important;
  font-size: 13px !important;
  font-weight: 850 !important;
}

.designer-summary-note {
  display: grid !important;
  gap: 8px !important;
  margin: 0 !important;
}

.designer-summary-note span {
  color: #52645a !important;
  font-size: 12px !important;
  font-weight: 750 !important;
}

.designer-summary-note textarea {
  min-height: 76px !important;
  border-radius: 14px !important;
  background: rgba(255, 255, 255, .86) !important;
}

.designer-cart-button {
  min-height: 44px !important;
  border-radius: 999px !important;
}

@media (max-width: 980px) {
  .product-detail-layout--custom {
    grid-template-columns: 1fr !important;
  }

  .designer-upload-card {
    align-items: flex-start !important;
    flex-direction: column !important;
  }

  .designer-text-row {
    grid-template-columns: 1fr !important;
  }
}

/* Header action layout like reference: user icon, bag icon, badge */
.site-header .brand-side {
  display: grid !important;
  align-content: start !important;
  justify-items: start !important;
  gap: 24px !important;
}

.site-header .header-actions {
  display: flex !important;
  align-items: center !important;
  gap: 20px !important;
  padding-left: 0 !important;
}

/* Admin button raus aus dem sichtbaren Storefront-Header */
.site-header .header-actions > .admin-pill {
  display: none !important;
}

/* Clean order: user first, cart second */
.site-header .header-actions > .icon-link:not(.cart-icon) {
  order: 1;
}

.site-header .header-actions > .cart-icon {
  order: 2;
}

/* Clean Lovable-like icons */
.site-header .header-actions .icon-link {
  position: relative !important;
  width: 24px !important;
  height: 24px !important;
  display: inline-grid !important;
  place-items: center !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  color: #07110b !important;
  transform: none !important;
}

.site-header .header-actions .icon-link:hover {
  color: var(--green) !important;
  background: transparent !important;
  box-shadow: none !important;
  transform: translateY(-1px) !important;
}

.site-header .header-actions .icon-link svg,
.site-header .header-actions .header-lucide {
  width: 20px !important;
  height: 20px !important;
  display: block !important;
  fill: none !important;
  stroke: currentColor !important;
  stroke-width: 2 !important;
  stroke-linecap: round !important;
  stroke-linejoin: round !important;
}

/* Badge bleibt am Taschen-Icon */
.site-header .header-actions .cart-icon strong {
  position: absolute !important;
  right: -10px !important;
  top: -11px !important;
  width: 20px !important;
  height: 20px !important;
  display: grid !important;
  place-items: center !important;
  border-radius: 999px !important;
  background: var(--green) !important;
  color: #ffffff !important;
  font-size: 11px !important;
  font-weight: 800 !important;
  line-height: 1 !important;
  box-shadow: none !important;
}

@media (max-width: 780px) {
  .site-header .brand-side {
    gap: 14px !important;
  }

  .site-header .header-actions {
    gap: 18px !important;
  }
}

/* Final compact header layout: logo, admin badge, user, cart */
.site-header {
  height: 114px !important;
  min-height: 114px !important;
}

.site-header .header-inner {
  height: 100% !important;
  display: grid !important;
  grid-template-columns: minmax(390px, auto) 1fr auto !important;
  align-items: center !important;
  padding-top: 0 !important;
}

.site-header .brand-side {
  display: flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  gap: 28px !important;
  align-content: center !important;
  justify-items: start !important;
}

.site-header .brand {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  line-height: 1 !important;
  text-decoration: none !important;
  flex: 0 0 auto !important;
}

.site-header .brand-mark {
  width: 128px !important;
  height: auto !important;
  display: block !important;
  object-fit: contain !important;
  opacity: 1 !important;
}

.site-header .header-actions {
  display: flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  gap: 20px !important;
  padding-left: 0 !important;
  flex: 0 0 auto !important;
}

/* Admin badge wieder sichtbar neben dem Logo */
.site-header .header-actions > .admin-pill {
  display: inline-flex !important;
  order: 1 !important;
  align-items: center !important;
  justify-content: center !important;
  min-height: 38px !important;
  padding: 0 15px !important;
  border-radius: 999px !important;
  background: var(--green-dark) !important;
  color: #ffffff !important;
  font-size: 13px !important;
  font-weight: 800 !important;
  text-decoration: none !important;
  box-shadow: 0 10px 22px rgba(7, 17, 11, .10) !important;
}

.site-header .header-actions > .icon-link:not(.cart-icon) {
  order: 2 !important;
}

.site-header .header-actions > .cart-icon {
  order: 3 !important;
}

.site-header .header-actions .icon-link {
  position: relative !important;
  width: 24px !important;
  height: 24px !important;
  display: inline-grid !important;
  place-items: center !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  color: #07110b !important;
  transform: none !important;
}

.site-header .header-actions .icon-link:hover {
  color: var(--green) !important;
  background: transparent !important;
  box-shadow: none !important;
  transform: translateY(-1px) !important;
}

.site-header .header-actions .icon-link svg,
.site-header .header-actions .header-lucide {
  width: 20px !important;
  height: 20px !important;
  display: block !important;
  fill: none !important;
  stroke: currentColor !important;
  stroke-width: 2 !important;
  stroke-linecap: round !important;
  stroke-linejoin: round !important;
}

.site-header .header-actions .cart-icon strong {
  position: absolute !important;
  right: -10px !important;
  top: -11px !important;
  width: 20px !important;
  height: 20px !important;
  display: grid !important;
  place-items: center !important;
  border-radius: 999px !important;
  background: var(--green) !important;
  color: #ffffff !important;
  font-size: 11px !important;
  font-weight: 800 !important;
  line-height: 1 !important;
  box-shadow: none !important;
}

.site-header .main-nav {
  display: flex !important;
  justify-content: flex-end !important;
  align-items: center !important;
  gap: 9px !important;
}

@media (max-width: 780px) {
  .site-header {
    height: auto !important;
    min-height: 88px !important;
  }

  .site-header .header-inner {
    grid-template-columns: 1fr 44px !important;
    padding: 14px 0 !important;
  }

  .site-header .brand-side {
    gap: 16px !important;
    flex-wrap: wrap !important;
  }

  .site-header .brand-mark {
    width: 110px !important;
  }

  .site-header .header-actions {
    gap: 16px !important;
  }

  .site-header .header-actions > .admin-pill {
    min-height: 34px !important;
    padding: 0 12px !important;
    font-size: 12px !important;
  }
}


/* Prevent duplicate admin pills in header */
.site-header .header-actions > .admin-pill ~ .admin-pill {
  display: none !important;
}

/* TAVAWEAR MOBILE MENU FIX START */
@media (max-width: 780px) {
  .site-header .header-inner {
    position: relative !important;
  }

  .site-header .main-nav[data-menu] {
    display: none !important;
    position: absolute !important;
    left: 14px !important;
    right: 14px !important;
    top: calc(100% + 10px) !important;
    z-index: 999 !important;
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 8px !important;
    padding: 14px !important;
    border: 1px solid rgba(16, 66, 38, .14) !important;
    border-radius: 22px !important;
    background: rgba(255, 255, 255, .96) !important;
    box-shadow: 0 22px 50px rgba(7, 17, 11, .14) !important;
    backdrop-filter: blur(12px) !important;
  }

  .site-header .main-nav[data-menu].is-open {
    display: flex !important;
  }

  .site-header .main-nav[data-menu] a {
    width: 100% !important;
    justify-content: flex-start !important;
    padding: 12px 14px !important;
    border-radius: 14px !important;
  }

  .site-header .menu-toggle[data-menu-toggle] {
    display: grid !important;
    place-items: center !important;
  }
}

@media (min-width: 781px) {
  .site-header .main-nav[data-menu] {
    display: flex !important;
    position: static !important;
  }

  .site-header .menu-toggle[data-menu-toggle] {
    display: none !important;
  }
}
/* TAVAWEAR MOBILE MENU FIX END */


/* TAVAWEAR HEADER INLINE ROLLBACK START */

/* Desktop */
@media (min-width: 781px) {
  .site-header {
    height: 96px !important;
    min-height: 96px !important;
  }

  .site-header .header-inner {
    display: grid !important;
    grid-template-columns: auto minmax(0, 1fr) !important;
    align-items: center !important;
    height: 96px !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    column-gap: 34px !important;
  }

  .site-header .brand-side {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 16px !important;
    min-width: 0 !important;
  }

  .site-header .brand {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    width: auto !important;
    line-height: 1 !important;
  }

  .site-header .brand-mark {
    width: 86px !important;
    height: auto !important;
    max-width: none !important;
    max-height: none !important;
    object-fit: contain !important;
  }

  .site-header .brand-word {
    display: none !important;
  }

  .site-header .header-actions {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 14px !important;
    padding-left: 0 !important;
  }

  .site-header .header-actions > .admin-pill:not(.backoffice-pill) {
    display: none !important;
  }

  .site-header .header-actions > .backoffice-pill,
  .site-header .header-actions > a.icon-link,
  .site-header .header-actions > a.cart-icon {
    grid-area: auto !important;
    justify-self: auto !important;
    align-self: center !important;
    margin: 0 !important;
  }

  .site-header .header-actions > .backoffice-pill {
    min-height: 38px !important;
    padding: 0 15px !important;
    font-size: 13px !important;
  }

  .site-header .header-actions > a.icon-link {
    width: 34px !important;
    height: 34px !important;
    min-width: 34px !important;
    padding: 0 !important;
  }

  .site-header .header-actions > a.icon-link svg,
  .site-header .header-actions > a.icon-link .header-lucide {
    width: 20px !important;
    height: 20px !important;
  }

  .site-header .header-actions .cart-icon strong {
    top: -6px !important;
    right: -7px !important;
    min-width: 18px !important;
    height: 18px !important;
    font-size: 10px !important;
  }

  .site-header .main-nav {
    display: flex !important;
    position: static !important;
    justify-content: flex-end !important;
    align-items: center !important;
    gap: 10px !important;
    padding-top: 0 !important;
  }

  .site-header .main-nav a {
    font-size: 14px !important;
    font-weight: 650 !important;
    padding: 10px 16px !important;
  }

  .site-header .menu-toggle[data-menu-toggle] {
    display: none !important;
  }
}

/* Handy */
@media (max-width: 780px) {
  .site-header {
    height: auto !important;
    min-height: 88px !important;
  }

  .site-header .header-inner {
    position: relative !important;
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto !important;
    align-items: center !important;
    min-height: 88px !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    column-gap: 10px !important;
  }

  .site-header .brand-side {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 8px !important;
    min-width: 0 !important;
  }

  .site-header .brand-mark {
    width: 78px !important;
    height: auto !important;
    max-width: none !important;
    max-height: none !important;
  }

  .site-header .brand-word {
    display: none !important;
  }

  .site-header .header-actions {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 7px !important;
    padding-left: 0 !important;
  }

  .site-header .header-actions > .backoffice-pill,
  .site-header .header-actions > .admin-pill,
  .site-header .header-actions > a.icon-link,
  .site-header .header-actions > a.cart-icon {
    grid-area: auto !important;
    justify-self: auto !important;
    align-self: center !important;
    margin: 0 !important;
  }

  .site-header .header-actions > .admin-pill:not(.backoffice-pill) {
    display: none !important;
  }

  .site-header .header-actions > .backoffice-pill {
    min-height: 34px !important;
    padding: 0 12px !important;
    font-size: 12px !important;
  }

  .site-header .header-actions > a.icon-link {
    width: 31px !important;
    height: 31px !important;
    min-width: 31px !important;
    padding: 0 !important;
  }

  .site-header .menu-toggle[data-menu-toggle] {
    display: grid !important;
    place-items: center !important;
    align-self: center !important;
    margin-top: 0 !important;
    width: 40px !important;
    height: 40px !important;
  }

  .site-header .main-nav[data-menu] {
    display: none !important;
    position: absolute !important;
    left: 14px !important;
    right: 14px !important;
    top: calc(100% + 10px) !important;
    z-index: 999 !important;
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 8px !important;
    padding: 14px !important;
    border: 1px solid rgba(16, 66, 38, .14) !important;
    border-radius: 22px !important;
    background: rgba(255, 255, 255, .97) !important;
    box-shadow: 0 22px 50px rgba(7, 17, 11, .14) !important;
    backdrop-filter: blur(12px) !important;
  }

  .site-header .main-nav[data-menu].is-open {
    display: flex !important;
  }
}

/* TAVAWEAR HEADER INLINE ROLLBACK END */


/* TAVAWEAR DESIGN TABS MINIMAL BLACK START */
.admin-designs-head {
  margin-bottom: 12px !important;
}

.admin-design-tabs {
  display: flex !important;
  align-items: center !important;
  gap: 4px !important;
  width: fit-content !important;
  margin: 0 0 22px !important;
  padding: 3px !important;
  border: 1px solid rgba(6, 17, 10, .10) !important;
  border-radius: 14px !important;
  background: rgba(255, 255, 255, .52) !important;
  box-shadow: none !important;
}

.admin-design-tabs a {
  display: inline-flex !important;
  align-items: center !important;
  gap: 7px !important;
  min-height: 32px !important;
  padding: 0 11px !important;
  border-radius: 10px !important;
  background: transparent !important;
  color: rgba(6, 17, 10, .58) !important;
  text-decoration: none !important;
  font-size: 13px !important;
  font-weight: 800 !important;
  line-height: 1 !important;
  box-shadow: none !important;
  transition: background .14s ease, color .14s ease !important;
}

.admin-design-tabs a span {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-width: 19px !important;
  height: 19px !important;
  padding: 0 6px !important;
  border-radius: 999px !important;
  background: rgba(6, 17, 10, .07) !important;
  color: rgba(6, 17, 10, .56) !important;
  font-size: 11px !important;
  font-weight: 900 !important;
  line-height: 1 !important;
}

.admin-design-tabs a:hover {
  color: #06110a !important;
  background: rgba(6, 17, 10, .055) !important;
  transform: none !important;
}

.admin-design-tabs a:hover span {
  color: #06110a !important;
  background: rgba(6, 17, 10, .10) !important;
}

.admin-design-tabs a.is-active {
  color: #ffffff !important;
  background: #07110b !important;
  box-shadow: none !important;
}

.admin-design-tabs a.is-active span {
  color: #ffffff !important;
  background: rgba(255, 255, 255, .16) !important;
}

/* Status Badges ruhiger */
.admin-design-status {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: fit-content !important;
  min-height: 23px !important;
  padding: 0 9px !important;
  border-radius: 999px !important;
  font-size: 10px !important;
  font-weight: 900 !important;
  text-transform: uppercase !important;
  letter-spacing: .025em !important;
}

.admin-design-status-active {
  background: rgba(35, 159, 92, .12) !important;
  color: #08743d !important;
}

.admin-design-status-archive {
  background: rgba(6, 17, 10, .08) !important;
  color: rgba(6, 17, 10, .64) !important;
}

.admin-design-status-cancelled {
  background: rgba(161, 34, 34, .10) !important;
  color: #9a2424 !important;
}

/* Cards weniger laut */
.admin-design-inline-card {
  box-shadow: 0 10px 24px rgba(7, 17, 11, .055) !important;
  border-color: rgba(6, 17, 10, .08) !important;
}

.admin-design-inline-card:hover {
  box-shadow: 0 14px 30px rgba(7, 17, 11, .075) !important;
  transform: translateY(-1px) !important;
}

/* Design ansehen, clean und schwarz */
.admin-design-inline-card .button.small {
  min-height: 34px !important;
  padding: 0 13px !important;
  border-radius: 999px !important;
  border: 1px solid #07110b !important;
  background: #07110b !important;
  color: #ffffff !important;
  font-size: 12px !important;
  font-weight: 850 !important;
  box-shadow: none !important;
  text-shadow: none !important;
  transition: background .14s ease, border-color .14s ease, color .14s ease !important;
}

.admin-design-inline-card .button.small:hover {
  background: #173b2b !important;
  border-color: #173b2b !important;
  color: #ffffff !important;
  transform: none !important;
  box-shadow: none !important;
}

.admin-design-inline-card-archive {
  opacity: .88 !important;
}

.admin-design-inline-card-cancelled {
  opacity: .82 !important;
}

@media (max-width: 680px) {
  .admin-design-tabs {
    display: grid !important;
    grid-template-columns: 1fr !important;
    width: 100% !important;
    border-radius: 14px !important;
  }

  .admin-design-tabs a {
    justify-content: space-between !important;
  }
}
/* TAVAWEAR DESIGN TABS MINIMAL BLACK END */


/* TAVAWEAR PRODUCT BACK LINK CLEAN START */
.product-back-link {
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  min-height: 38px !important;
  padding: 0 14px !important;
  margin-bottom: 26px !important;
  border: 1px solid rgba(6, 17, 10, .10) !important;
  border-radius: 14px !important;
  background: rgba(255, 255, 255, .58) !important;
  color: #07110b !important;
  font-size: 13px !important;
  font-weight: 800 !important;
  line-height: 1 !important;
  text-decoration: none !important;
  box-shadow: none !important;
  transition: background .14s ease, border-color .14s ease, color .14s ease !important;
}

.product-back-link::before {
  content: "←" !important;
  display: inline-block !important;
  font-size: 14px !important;
  line-height: 1 !important;
  opacity: .72 !important;
}

.product-back-link:hover {
  background: rgba(255, 255, 255, .82) !important;
  border-color: rgba(6, 17, 10, .16) !important;
  color: #07110b !important;
  transform: none !important;
}

@media (max-width: 780px) {
  .product-back-link {
    min-height: 36px !important;
    padding: 0 12px !important;
    margin-bottom: 18px !important;
    font-size: 12px !important;
  }
}
/* TAVAWEAR PRODUCT BACK LINK CLEAN END */


/* Admin Produktfarben */
.admin-variant-block {
    display: grid;
    gap: 14px;
    padding: 18px;
    border: 1px solid rgba(20, 61, 44, .16);
    border-radius: 20px;
    background: rgba(255, 255, 255, .56);
}

.admin-variant-head {
    display: grid;
    gap: 4px;
}

.admin-variant-head strong {
    font-size: 15px;
}

.admin-variant-head span {
    color: rgba(20, 61, 44, .68);
    font-size: 13px;
}

.admin-color-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(155px, 1fr));
    gap: 10px;
}

.admin-color-option {
    display: flex;
    align-items: center;
    gap: 10px;
    min-height: 46px;
    padding: 9px 11px;
    border: 1px solid rgba(20, 61, 44, .14);
    border-radius: 999px;
    background: rgba(255, 255, 255, .74);
    cursor: pointer;
    font-weight: 700;
    transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease;
}

.admin-color-option:hover {
    transform: translateY(-1px);
    border-color: rgba(20, 61, 44, .28);
    box-shadow: 0 12px 26px rgba(20, 61, 44, .08);
}

.admin-color-option input {
    width: 16px;
    height: 16px;
    accent-color: #2f9f63;
}

.admin-color-swatch {
    width: 24px;
    height: 24px;
    flex: 0 0 24px;
    border-radius: 999px;
    background: var(--swatch);
    border: 1px solid rgba(20, 61, 44, .22);
    box-shadow: inset 0 0 0 2px rgba(255, 255, 255, .42);
}


/* TAVAWEAR DESIGNER TOAST START */
.tavawear-designer-toast {
  position: fixed !important;
  right: 22px !important;
  bottom: 22px !important;
  z-index: 999999 !important;
  display: flex !important;
  align-items: flex-start !important;
  gap: 12px !important;
  width: min(420px, calc(100vw - 32px)) !important;
  padding: 16px 18px !important;
  border-radius: 18px !important;
  background: #b42323 !important;
  color: #ffffff !important;
  box-shadow: 0 22px 60px rgba(80, 0, 0, .28) !important;
  opacity: 0 !important;
  pointer-events: none !important;
  transform: translateY(18px) scale(.98) !important;
  transition: opacity .18s ease, transform .18s ease !important;
}

.tavawear-designer-toast.is-visible {
  opacity: 1 !important;
  pointer-events: auto !important;
  transform: translateY(0) scale(1) !important;
}

.tavawear-designer-toast__icon {
  flex: 0 0 auto !important;
  display: grid !important;
  place-items: center !important;
  width: 28px !important;
  height: 28px !important;
  border-radius: 999px !important;
  background: rgba(255, 255, 255, .18) !important;
  color: #ffffff !important;
  font-size: 17px !important;
  font-weight: 950 !important;
  line-height: 1 !important;
}

.tavawear-designer-toast__content {
  flex: 1 1 auto !important;
  min-width: 0 !important;
}

.tavawear-designer-toast__content strong {
  display: block !important;
  margin: 0 0 4px !important;
  color: #ffffff !important;
  font-size: 14px !important;
  font-weight: 950 !important;
  line-height: 1.25 !important;
}

.tavawear-designer-toast__content span {
  display: block !important;
  color: rgba(255, 255, 255, .92) !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  line-height: 1.45 !important;
}

.tavawear-designer-toast__close {
  flex: 0 0 auto !important;
  width: 28px !important;
  height: 28px !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 999px !important;
  background: rgba(255, 255, 255, .14) !important;
  color: #ffffff !important;
  cursor: pointer !important;
  font-size: 20px !important;
  font-weight: 800 !important;
  line-height: 1 !important;
}

.tavawear-designer-toast__close:hover {
  background: rgba(255, 255, 255, .22) !important;
}

@media (max-width: 680px) {
  .tavawear-designer-toast {
    right: 14px !important;
    bottom: 14px !important;
    width: calc(100vw - 28px) !important;
    border-radius: 16px !important;
  }
}
/* TAVAWEAR DESIGNER TOAST END */

/* Admin Farbvarianten */
.admin-variant-block {
    display: grid;
    gap: 16px;
    padding: 18px;
    border: 1px solid rgba(20, 61, 44, .16);
    border-radius: 20px;
    background: rgba(255, 255, 255, .58);
}

.admin-variant-head {
    display: grid;
    gap: 4px;
}

.admin-variant-head strong {
    font-size: 15px;
}

.admin-variant-head span {
    color: rgba(20, 61, 44, .68);
    font-size: 13px;
}

.admin-color-variant-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(235px, 1fr));
    gap: 14px;
}

.admin-color-variant {
    display: grid;
    gap: 10px;
    padding: 14px;
    border: 1px solid rgba(20, 61, 44, .14);
    border-radius: 18px;
    background: rgba(255, 255, 255, .75);
}

.admin-color-variant-main {
    display: flex;
    align-items: center;
    gap: 10px;
    font-weight: 800;
}

.admin-color-variant-main input {
    width: 16px;
    height: 16px;
    accent-color: #2f9f63;
}

.admin-color-swatch {
    width: 25px;
    height: 25px;
    flex: 0 0 25px;
    border-radius: 999px;
    background: var(--swatch);
    border: 1px solid rgba(20, 61, 44, .24);
    box-shadow: inset 0 0 0 2px rgba(255, 255, 255, .45);
}

.admin-variant-upload {
    display: grid;
    gap: 6px;
    font-size: 13px;
    font-weight: 700;
}

.admin-variant-upload input {
    width: 100%;
}

.admin-variant-preview {
    display: grid;
    gap: 7px;
}

.admin-variant-preview img {
    width: 100%;
    max-height: 150px;
    object-fit: contain;
    border-radius: 14px;
    background: #f6f6f2;
    border: 1px solid rgba(20, 61, 44, .12);
}

.admin-variant-preview small,
.admin-muted {
    color: rgba(20, 61, 44, .62);
    font-size: 12px;
    overflow-wrap: anywhere;
}

/* Farbvarianten Manager */
.admin-variant-page-head,
.admin-variant-link-card {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    padding: 18px;
    border: 1px solid rgba(20, 61, 44, .14);
    border-radius: 22px;
    background: rgba(255, 255, 255, .62);
    margin: 18px 0;
}

.admin-variant-page-head h2 {
    margin: 0 0 4px;
}

.admin-variant-page-head p,
.admin-variant-link-card span,
.admin-muted {
    color: rgba(20, 61, 44, .64);
}

.admin-variant-manager {
    display: grid;
    gap: 22px;
}

.admin-variant-manager-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(245px, 1fr));
    gap: 16px;
}

.admin-variant-card {
    display: grid;
    gap: 12px;
    padding: 16px;
    border: 1px solid rgba(20, 61, 44, .14);
    border-radius: 22px;
    background: rgba(255, 255, 255, .72);
}

.admin-variant-card.is-active {
    border-color: rgba(47, 159, 99, .48);
    box-shadow: 0 16px 34px rgba(47, 159, 99, .1);
}

.admin-variant-card-top {
    display: flex;
    align-items: center;
    gap: 10px;
    font-weight: 800;
}

.admin-variant-card-top input {
    width: 16px;
    height: 16px;
    accent-color: #2f9f63;
}

.admin-color-swatch {
    width: 26px;
    height: 26px;
    flex: 0 0 26px;
    border-radius: 999px;
    background: var(--swatch);
    border: 1px solid rgba(20, 61, 44, .25);
    box-shadow: inset 0 0 0 2px rgba(255, 255, 255, .45);
}

.admin-variant-upload {
    display: grid;
    gap: 6px;
    font-size: 13px;
    font-weight: 700;
}

.admin-variant-image {
    display: grid;
    gap: 8px;
}

.admin-variant-image img {
    width: 100%;
    max-height: 170px;
    object-fit: contain;
    border-radius: 16px;
    background: #f6f6f2;
    border: 1px solid rgba(20, 61, 44, .12);
}

.admin-variant-image small {
    font-size: 12px;
    color: rgba(20, 61, 44, .58);
    overflow-wrap: anywhere;
}

@media (max-width: 720px) {
    .admin-variant-page-head,
    .admin-variant-link-card {
        align-items: stretch;
        flex-direction: column;
    }
}

/* Admin Picker für Grössen und Farben */
.admin-picker-block,
.admin-variant-link-card,
.admin-variant-page-head {
    display: grid;
    gap: 14px;
    padding: 18px;
    border: 1px solid rgba(20, 61, 44, .14);
    border-radius: 22px;
    background: rgba(255, 255, 255, .64);
}

.admin-variant-link-card,
.admin-variant-page-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.admin-picker-head {
    display: grid;
    gap: 4px;
}

.admin-picker-head strong,
.admin-variant-link-card strong {
    font-size: 15px;
}

.admin-picker-head span,
.admin-variant-link-card span,
.admin-variant-page-head p,
.admin-muted {
    color: rgba(20, 61, 44, .64);
}

.admin-size-chip-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.admin-size-chip {
    position: relative;
    cursor: pointer;
}

.admin-size-chip input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.admin-size-chip span {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 54px;
    height: 42px;
    padding: 0 16px;
    border-radius: 999px;
    border: 1px solid rgba(20, 61, 44, .18);
    background: rgba(255, 255, 255, .9);
    font-weight: 900;
}

.admin-size-chip input:checked + span {
    border-color: rgba(47, 159, 99, .55);
    background: rgba(47, 159, 99, .12);
    color: #143d2c;
}

.admin-size-chip input:not(:checked) + span {
    color: rgba(20, 61, 44, .42);
    background: rgba(255, 255, 255, .5);
}

.admin-size-chip input:not(:checked) + span::after {
    content: "×";
    position: absolute;
    right: -6px;
    top: -7px;
    width: 20px;
    height: 20px;
    display: grid;
    place-items: center;
    border-radius: 999px;
    background: #d83b36;
    color: #fff;
    font-size: 15px;
    line-height: 1;
    font-weight: 900;
}

.admin-color-check-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
    gap: 10px;
}

.admin-color-check {
    display: flex;
    align-items: center;
    gap: 10px;
    min-height: 44px;
    padding: 9px 11px;
    border-radius: 999px;
    border: 1px solid rgba(20, 61, 44, .14);
    background: rgba(255, 255, 255, .78);
    font-weight: 800;
    cursor: pointer;
}

.admin-color-check input {
    width: 16px;
    height: 16px;
    accent-color: #2f9f63;
}

.admin-color-swatch {
    width: 24px;
    height: 24px;
    flex: 0 0 24px;
    border-radius: 999px;
    background: var(--swatch);
    border: 1px solid rgba(20, 61, 44, .25);
    box-shadow: inset 0 0 0 2px rgba(255, 255, 255, .45);
}

.admin-custom-color-field {
    display: grid;
    gap: 8px;
    font-weight: 800;
}

.admin-custom-color-field small {
    color: rgba(20, 61, 44, .58);
    font-weight: 600;
}

.admin-variant-manager {
    display: grid;
    gap: 22px;
}

.admin-variant-manager-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(245px, 1fr));
    gap: 16px;
}

.admin-variant-card {
    display: grid;
    gap: 12px;
    padding: 16px;
    border: 1px solid rgba(20, 61, 44, .14);
    border-radius: 22px;
    background: rgba(255, 255, 255, .72);
}

.admin-variant-card-top {
    display: flex;
    align-items: center;
    gap: 10px;
}

.admin-variant-upload {
    display: grid;
    gap: 6px;
    font-size: 13px;
    font-weight: 800;
}

.admin-variant-image {
    display: grid;
    gap: 8px;
}

.admin-variant-image img {
    width: 100%;
    max-height: 170px;
    object-fit: contain;
    border-radius: 16px;
    background: #f6f6f2;
    border: 1px solid rgba(20, 61, 44, .12);
}

.admin-variant-image small {
    font-size: 12px;
    color: rgba(20, 61, 44, .58);
    overflow-wrap: anywhere;
}

@media (max-width: 720px) {
    .admin-variant-link-card,
    .admin-variant-page-head {
        align-items: stretch;
        flex-direction: column;
    }
}

/* Clean admin size and color picker */
.admin-product-form .admin-picker-block {
    display: grid !important;
    gap: 16px !important;
    padding: 18px !important;
    border: 1px solid rgba(20, 61, 44, .14) !important;
    border-radius: 22px !important;
    background: rgba(255, 255, 255, .68) !important;
}

.admin-product-form .admin-picker-head {
    display: grid !important;
    gap: 4px !important;
}

.admin-product-form .admin-picker-head strong {
    font-size: 15px !important;
}

.admin-product-form .admin-picker-head span {
    color: rgba(20, 61, 44, .66) !important;
    font-size: 13px !important;
}

.admin-size-chip-grid {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 10px !important;
}

.admin-size-chip {
    position: relative !important;
    display: inline-flex !important;
    width: auto !important;
    min-width: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
    cursor: pointer !important;
}

.admin-size-chip input {
    position: absolute !important;
    opacity: 0 !important;
    pointer-events: none !important;
}

.admin-size-chip span {
    position: relative !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-width: 54px !important;
    height: 42px !important;
    padding: 0 16px !important;
    border-radius: 999px !important;
    border: 1px solid rgba(20, 61, 44, .18) !important;
    background: rgba(255, 255, 255, .92) !important;
    font-weight: 900 !important;
    color: #143d2c !important;
}

.admin-size-chip input:checked + span {
    border-color: rgba(47, 159, 99, .58) !important;
    background: rgba(47, 159, 99, .13) !important;
}

.admin-size-chip input:not(:checked) + span {
    color: rgba(20, 61, 44, .42) !important;
    background: rgba(255, 255, 255, .52) !important;
}

.admin-size-chip input:not(:checked) + span::after {
    content: "×" !important;
    position: absolute !important;
    right: -6px !important;
    top: -7px !important;
    width: 20px !important;
    height: 20px !important;
    display: grid !important;
    place-items: center !important;
    border-radius: 999px !important;
    background: #d83b36 !important;
    color: #fff !important;
    font-size: 15px !important;
    line-height: 1 !important;
    font-weight: 900 !important;
}

.admin-color-chip-grid {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 10px !important;
}

.admin-color-chip {
    position: relative !important;
    display: inline-flex !important;
    width: auto !important;
    min-width: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
    cursor: pointer !important;
}

.admin-color-chip input {
    position: absolute !important;
    opacity: 0 !important;
    pointer-events: none !important;
}

.admin-color-chip span {
    display: inline-flex !important;
    align-items: center !important;
    gap: 9px !important;
    height: 42px !important;
    padding: 0 14px !important;
    border-radius: 999px !important;
    border: 1px solid rgba(20, 61, 44, .15) !important;
    background: rgba(255, 255, 255, .9) !important;
    font-weight: 850 !important;
    color: #143d2c !important;
}

.admin-color-chip input:checked + span {
    border-color: rgba(47, 159, 99, .65) !important;
    background: rgba(47, 159, 99, .13) !important;
    box-shadow: 0 10px 24px rgba(47, 159, 99, .08) !important;
}

.admin-color-chip span i,
.admin-custom-color-pill i,
.admin-variant-card-top .admin-color-swatch {
    width: 23px !important;
    height: 23px !important;
    flex: 0 0 23px !important;
    border-radius: 999px !important;
    background: var(--swatch) !important;
    border: 1px solid rgba(20, 61, 44, .24) !important;
    box-shadow: inset 0 0 0 2px rgba(255, 255, 255, .45) !important;
}

.admin-color-chip span b {
    font-size: 13px !important;
}

.admin-custom-color-builder {
    display: grid !important;
    gap: 14px !important;
    padding: 16px !important;
    border-radius: 20px !important;
    border: 1px dashed rgba(20, 61, 44, .22) !important;
    background: rgba(246, 250, 245, .72) !important;
}

.admin-custom-color-builder-head {
    display: grid !important;
    gap: 4px !important;
}

.admin-custom-color-builder-head strong {
    font-size: 15px !important;
}

.admin-custom-color-builder-head span,
.admin-color-suggestion {
    color: rgba(20, 61, 44, .64) !important;
    font-size: 13px !important;
}

.admin-custom-color-controls {
    display: grid !important;
    grid-template-columns: 120px 150px minmax(170px, 1fr) auto !important;
    gap: 12px !important;
    align-items: end !important;
}

.admin-custom-color-controls label {
    display: grid !important;
    gap: 6px !important;
    font-size: 12px !important;
    font-weight: 800 !important;
}

.admin-custom-color-controls input[type="color"] {
    width: 100% !important;
    height: 44px !important;
    padding: 4px !important;
    border-radius: 14px !important;
    border: 1px solid rgba(20, 61, 44, .18) !important;
    background: #fff !important;
}

.admin-custom-color-controls input[type="text"] {
    height: 44px !important;
    border-radius: 14px !important;
}

.admin-custom-color-list {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 10px !important;
}

.admin-custom-color-pill {
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
    min-height: 42px !important;
    padding: 7px 8px 7px 12px !important;
    border-radius: 999px !important;
    border: 1px solid rgba(20, 61, 44, .16) !important;
    background: rgba(255, 255, 255, .92) !important;
}

.admin-custom-color-pill strong {
    font-size: 13px !important;
}

.admin-custom-color-pill small {
    color: rgba(20, 61, 44, .56) !important;
    font-size: 11px !important;
}

.admin-custom-color-pill button {
    width: 24px !important;
    height: 24px !important;
    border: 0 !important;
    border-radius: 999px !important;
    background: #d83b36 !important;
    color: #fff !important;
    font-weight: 900 !important;
    cursor: pointer !important;
}

@media (max-width: 840px) {
    .admin-custom-color-controls {
        grid-template-columns: 1fr !important;
    }
}

/* TavaWear compact color editor override */
.tw-color-editor {
    display: grid !important;
    gap: 18px !important;
    padding: 18px !important;
    border: 1px solid rgba(20, 61, 44, .14) !important;
    border-radius: 20px !important;
    background: rgba(255, 255, 255, .68) !important;
}

.tw-editor-head {
    display: grid !important;
    gap: 4px !important;
}

.tw-editor-head strong {
    font-size: 15px !important;
}

.tw-editor-head span {
    font-size: 13px !important;
    color: rgba(20, 61, 44, .65) !important;
}

.tw-color-list {
    display: grid !important;
    grid-template-columns: repeat(auto-fill, minmax(145px, 1fr)) !important;
    gap: 10px 12px !important;
}

.tw-color-line {
    display: flex !important;
    align-items: center !important;
    gap: 9px !important;
    min-height: 34px !important;
    padding: 7px 10px !important;
    border-radius: 999px !important;
    border: 1px solid rgba(20, 61, 44, .14) !important;
    background: rgba(255, 255, 255, .9) !important;
    cursor: pointer !important;
    font-weight: 800 !important;
}

.tw-color-line input {
    width: 15px !important;
    height: 15px !important;
    accent-color: #2f9f63 !important;
    margin: 0 !important;
}

.tw-color-line:has(input:checked) {
    border-color: rgba(47, 159, 99, .55) !important;
    background: rgba(47, 159, 99, .11) !important;
}

.tw-color-dot {
    width: 22px !important;
    height: 22px !important;
    flex: 0 0 22px !important;
    border-radius: 999px !important;
    background: var(--swatch) !important;
    border: 1px solid rgba(20, 61, 44, .25) !important;
    box-shadow: inset 0 0 0 2px rgba(255, 255, 255, .45) !important;
}

.tw-color-name {
    font-size: 13px !important;
    color: #0f2f23 !important;
    white-space: nowrap !important;
}

.tw-custom-color-builder {
    display: grid !important;
    gap: 14px !important;
    padding: 16px !important;
    border-radius: 18px !important;
    border: 1px dashed rgba(20, 61, 44, .22) !important;
    background: rgba(246, 250, 245, .72) !important;
}

.tw-custom-color-title {
    display: grid !important;
    gap: 4px !important;
}

.tw-custom-color-title strong {
    font-size: 15px !important;
}

.tw-custom-color-title span,
.tw-color-suggestion {
    font-size: 13px !important;
    color: rgba(20, 61, 44, .64) !important;
}

.tw-custom-color-controls {
    display: grid !important;
    grid-template-columns: 110px 140px minmax(180px, 1fr) auto !important;
    gap: 12px !important;
    align-items: end !important;
}

.tw-custom-color-controls label {
    display: grid !important;
    gap: 6px !important;
    font-size: 12px !important;
    font-weight: 800 !important;
}

.tw-custom-color-controls input[type="color"] {
    width: 100% !important;
    height: 42px !important;
    padding: 3px !important;
    border-radius: 12px !important;
    border: 1px solid rgba(20, 61, 44, .18) !important;
    background: #fff !important;
}

.tw-custom-color-controls input[type="text"] {
    height: 42px !important;
    border-radius: 12px !important;
}

.tw-custom-color-list {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 10px !important;
}

.tw-custom-color-pill {
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
    min-height: 38px !important;
    padding: 6px 8px 6px 10px !important;
    border-radius: 999px !important;
    border: 1px solid rgba(20, 61, 44, .16) !important;
    background: rgba(255, 255, 255, .92) !important;
}

.tw-custom-color-pill i {
    width: 22px !important;
    height: 22px !important;
    border-radius: 999px !important;
    background: var(--swatch) !important;
    border: 1px solid rgba(20, 61, 44, .25) !important;
}

.tw-custom-color-pill strong {
    font-size: 13px !important;
}

.tw-custom-color-pill small {
    font-size: 11px !important;
    color: rgba(20, 61, 44, .56) !important;
}

.tw-custom-color-pill button {
    width: 22px !important;
    height: 22px !important;
    border: 0 !important;
    border-radius: 999px !important;
    background: #d83b36 !important;
    color: #fff !important;
    font-weight: 900 !important;
    cursor: pointer !important;
}

@media (max-width: 840px) {
    .tw-custom-color-controls {
        grid-template-columns: 1fr !important;
    }
}

/* TavaWear compact color editor, final size override */
.tw-color-editor {
    gap: 14px !important;
    padding: 14px !important;
    border-radius: 18px !important;
}

.tw-editor-head {
    gap: 2px !important;
}

.tw-editor-head strong {
    font-size: 14px !important;
}

.tw-editor-head span {
    font-size: 12px !important;
}

.tw-color-list {
    grid-template-columns: repeat(auto-fill, minmax(118px, 1fr)) !important;
    gap: 7px 8px !important;
}

.tw-color-line {
    min-height: 30px !important;
    padding: 5px 8px !important;
    gap: 7px !important;
    border-radius: 999px !important;
}

.tw-color-line input {
    width: 13px !important;
    height: 13px !important;
}

.tw-color-dot {
    width: 17px !important;
    height: 17px !important;
    flex-basis: 17px !important;
}

.tw-color-name {
    font-size: 12px !important;
}

.tw-custom-color-builder {
    gap: 10px !important;
    padding: 12px !important;
    border-radius: 16px !important;
}

.tw-custom-color-title {
    gap: 2px !important;
}

.tw-custom-color-title strong {
    font-size: 14px !important;
}

.tw-custom-color-title span,
.tw-color-suggestion {
    font-size: 12px !important;
}

.tw-custom-color-controls {
    grid-template-columns: 90px 120px minmax(150px, 1fr) auto !important;
    gap: 9px !important;
}

.tw-custom-color-controls label {
    gap: 4px !important;
    font-size: 11px !important;
}

.tw-custom-color-controls input[type="color"] {
    height: 36px !important;
    border-radius: 10px !important;
}

.tw-custom-color-controls input[type="text"] {
    height: 36px !important;
    border-radius: 10px !important;
    font-size: 12px !important;
}

.tw-custom-color-controls .button,
.tw-custom-color-controls button {
    min-height: 36px !important;
    padding: 0 14px !important;
    font-size: 12px !important;
}

.tw-custom-color-list {
    gap: 7px !important;
}

.tw-custom-color-pill {
    min-height: 32px !important;
    padding: 5px 7px 5px 9px !important;
    gap: 6px !important;
}

.tw-custom-color-pill i {
    width: 17px !important;
    height: 17px !important;
}

.tw-custom-color-pill strong {
    font-size: 12px !important;
}

.tw-custom-color-pill small {
    font-size: 10px !important;
}

.tw-custom-color-pill button {
    width: 19px !important;
    height: 19px !important;
}

/* Admin edit layout width fix */
.admin-body .admin-shell .page-width {
    width: min(1440px, calc(100% - 40px)) !important;
    max-width: 1440px !important;
}

.admin-body .admin-layout {
    display: grid !important;
    grid-template-columns: 230px minmax(0, 1fr) !important;
    gap: 26px !important;
    align-items: start !important;
}

.admin-body .admin-content {
    width: 100% !important;
    max-width: none !important;
}

.admin-product-form-clean {
    width: 100% !important;
    max-width: 980px !important;
}

.admin-product-main-grid,
.admin-form-grid {
    width: 100% !important;
}

/* Final compact color block */
.tw-color-editor {
    gap: 12px !important;
    padding: 12px !important;
    border-radius: 16px !important;
}

.tw-color-list {
    grid-template-columns: repeat(auto-fill, minmax(118px, 1fr)) !important;
    gap: 6px 8px !important;
}

.tw-color-line {
    min-height: 28px !important;
    padding: 4px 8px !important;
    gap: 7px !important;
}

.tw-color-line input {
    width: 13px !important;
    height: 13px !important;
}

.tw-color-dot {
    width: 16px !important;
    height: 16px !important;
    flex: 0 0 16px !important;
}

.tw-color-name {
    font-size: 12px !important;
}

.tw-custom-color-builder {
    padding: 11px !important;
    gap: 9px !important;
}

.tw-custom-color-controls {
    grid-template-columns: 84px 115px minmax(150px, 1fr) auto !important;
    gap: 8px !important;
}

.tw-custom-color-controls input[type="color"],
.tw-custom-color-controls input[type="text"] {
    height: 34px !important;
}

.tw-custom-color-controls .button,
.tw-custom-color-controls button {
    min-height: 34px !important;
    padding: 0 13px !important;
    font-size: 12px !important;
}

@media (max-width: 900px) {
    .admin-body .admin-layout {
        grid-template-columns: 1fr !important;
    }

    .admin-product-form-clean {
        max-width: none !important;
    }

    .tw-custom-color-controls {
        grid-template-columns: 1fr !important;
    }
}


/* TavaWear admin editor, clean final overrides */
.admin-body .admin-shell .page-width {
    width: min(1440px, calc(100% - 40px)) !important;
    max-width: 1440px !important;
}

.admin-body .admin-layout {
    display: grid !important;
    grid-template-columns: 230px minmax(0, 1fr) !important;
    gap: 26px !important;
    align-items: start !important;
}

.admin-body .admin-content {
    width: 100% !important;
    max-width: none !important;
}

.admin-product-form-clean {
    width: 100% !important;
    max-width: 980px !important;
}

.admin-product-main-grid,
.admin-form-grid {
    width: 100% !important;
}

.tw-admin-card-row,
.tw-size-editor,
.tw-color-editor,
.admin-variant-page-head {
    display: grid !important;
    gap: 12px !important;
    padding: 14px !important;
    border: 1px solid rgba(20, 61, 44, .14) !important;
    border-radius: 18px !important;
    background: rgba(255, 255, 255, .68) !important;
}

.tw-admin-card-row,
.admin-variant-page-head {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
}

.tw-editor-head,
.tw-custom-color-title {
    display: grid !important;
    gap: 2px !important;
}

.tw-editor-head strong,
.tw-custom-color-title strong {
    font-size: 14px !important;
}

.tw-editor-head span,
.tw-custom-color-title span,
.tw-color-suggestion,
.admin-muted {
    font-size: 12px !important;
    color: rgba(20, 61, 44, .64) !important;
}

.tw-size-list,
.tw-color-list {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 8px !important;
}

.tw-size-chip,
.tw-color-line {
    position: relative !important;
    display: inline-flex !important;
    align-items: center !important;
    cursor: pointer !important;
    width: auto !important;
    margin: 0 !important;
}

.tw-size-chip input,
.tw-color-line input {
    position: absolute !important;
    opacity: 0 !important;
    pointer-events: none !important;
}

.tw-size-chip span,
.tw-color-line {
    min-height: 30px !important;
    border-radius: 999px !important;
    border: 1px solid rgba(20, 61, 44, .15) !important;
    background: rgba(255, 255, 255, .9) !important;
    font-weight: 850 !important;
    color: #103326 !important;
}

.tw-size-chip span {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-width: 46px !important;
    padding: 0 13px !important;
}

.tw-color-line {
    gap: 7px !important;
    padding: 4px 9px !important;
}

.tw-size-chip input:checked + span,
.tw-color-line:has(input:checked) {
    border-color: rgba(47, 159, 99, .6) !important;
    background: rgba(47, 159, 99, .12) !important;
}

.tw-size-chip input:not(:checked) + span {
    color: rgba(20, 61, 44, .42) !important;
    background: rgba(255, 255, 255, .55) !important;
}

.tw-size-chip input:not(:checked) + span::after {
    content: "×" !important;
    position: absolute !important;
    right: -6px !important;
    top: -7px !important;
    width: 19px !important;
    height: 19px !important;
    display: grid !important;
    place-items: center !important;
    border-radius: 999px !important;
    background: #d83b36 !important;
    color: #fff !important;
    font-size: 14px !important;
    line-height: 1 !important;
    font-weight: 900 !important;
}

.tw-color-dot,
.tw-custom-color-pill i,
.admin-variant-card-top .admin-color-swatch {
    width: 17px !important;
    height: 17px !important;
    flex: 0 0 17px !important;
    border-radius: 999px !important;
    background: var(--swatch) !important;
    border: 1px solid rgba(20, 61, 44, .25) !important;
    box-shadow: inset 0 0 0 2px rgba(255, 255, 255, .45) !important;
}

.tw-color-name {
    font-size: 12px !important;
    white-space: nowrap !important;
}

.tw-custom-color-builder {
    display: grid !important;
    gap: 10px !important;
    padding: 12px !important;
    border-radius: 16px !important;
    border: 1px dashed rgba(20, 61, 44, .22) !important;
    background: rgba(246, 250, 245, .72) !important;
}

.tw-custom-color-controls {
    display: grid !important;
    grid-template-columns: 90px 120px minmax(150px, 1fr) auto !important;
    gap: 9px !important;
    align-items: end !important;
}

.tw-custom-color-controls label {
    display: grid !important;
    gap: 4px !important;
    font-size: 11px !important;
    font-weight: 800 !important;
}

.tw-custom-color-controls input[type="color"] {
    width: 100% !important;
    height: 36px !important;
    padding: 3px !important;
    border-radius: 10px !important;
    border: 1px solid rgba(20, 61, 44, .18) !important;
    background: #fff !important;
}

.tw-custom-color-controls input[type="text"] {
    height: 36px !important;
    border-radius: 10px !important;
    font-size: 12px !important;
}

.tw-custom-color-controls .button,
.tw-custom-color-controls button {
    min-height: 36px !important;
    padding: 0 14px !important;
    font-size: 12px !important;
}

.tw-custom-color-list {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 7px !important;
}

.tw-custom-color-pill {
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    min-height: 32px !important;
    padding: 5px 7px 5px 9px !important;
    border-radius: 999px !important;
    border: 1px solid rgba(20, 61, 44, .16) !important;
    background: rgba(255, 255, 255, .92) !important;
}

.tw-custom-color-pill strong {
    font-size: 12px !important;
}

.tw-custom-color-pill small {
    font-size: 10px !important;
    color: rgba(20, 61, 44, .56) !important;
}

.tw-custom-color-pill button {
    width: 19px !important;
    height: 19px !important;
    border: 0 !important;
    border-radius: 999px !important;
    background: #d83b36 !important;
    color: #fff !important;
    font-weight: 900 !important;
    cursor: pointer !important;
}

.admin-variant-manager {
    display: grid !important;
    gap: 22px !important;
}

.admin-variant-manager-grid {
    display: grid !important;
    grid-template-columns: repeat(auto-fill, minmax(245px, 1fr)) !important;
    gap: 16px !important;
}

.admin-variant-card {
    display: grid !important;
    gap: 12px !important;
    padding: 16px !important;
    border: 1px solid rgba(20, 61, 44, .14) !important;
    border-radius: 22px !important;
    background: rgba(255, 255, 255, .72) !important;
}

.admin-variant-card-top {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
}

.admin-variant-upload {
    display: grid !important;
    gap: 6px !important;
    font-size: 13px !important;
    font-weight: 800 !important;
}

.admin-variant-image {
    display: grid !important;
    gap: 8px !important;
}

.admin-variant-image img {
    width: 100% !important;
    max-height: 170px !important;
    object-fit: contain !important;
    border-radius: 16px !important;
    background: #f6f6f2 !important;
    border: 1px solid rgba(20, 61, 44, .12) !important;
}

.admin-variant-image small {
    font-size: 12px !important;
    color: rgba(20, 61, 44, .58) !important;
    overflow-wrap: anywhere !important;
}

@media (max-width: 900px) {
    .admin-body .admin-layout {
        grid-template-columns: 1fr !important;
    }

    .admin-product-form-clean {
        max-width: none !important;
    }

    .tw-admin-card-row,
    .admin-variant-page-head {
        align-items: stretch !important;
        flex-direction: column !important;
    }

    .tw-custom-color-controls {
        grid-template-columns: 1fr !important;
    }
}

/* TavaWear designer saved drafts and multi-size quantities */
.designer-size-quantity-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(92px, 1fr));
    gap: 10px;
}

.designer-size-quantity-row {
    display: grid;
    grid-template-columns: auto 54px;
    align-items: center;
    gap: 8px;
    padding: 9px 10px;
    border: 1px solid rgba(20, 61, 44, .14);
    border-radius: 16px;
    background: rgba(255, 255, 255, .78);
    font-weight: 850;
    color: #143d2c;
}

.designer-size-quantity-row input {
    width: 54px;
    height: 34px;
    border-radius: 12px;
    border: 1px solid rgba(20, 61, 44, .18);
    text-align: center;
    font-weight: 900;
    color: #143d2c;
}

.designer-save-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    margin-top: 14px;
}

.button.ghost {
    background: rgba(255, 255, 255, .75);
    color: #143d2c;
    border: 1px solid rgba(20, 61, 44, .16);
}

.designer-cart-success {
    display: grid;
    gap: 8px;
    margin: 14px 0;
    padding: 14px;
    border-radius: 18px;
    border: 1px solid rgba(47, 159, 99, .26);
    background: rgba(47, 159, 99, .1);
    color: #143d2c;
}

.designer-cart-success[hidden] {
    display: none !important;
}

.designer-cart-success strong {
    font-size: 15px;
}

.designer-cart-success span {
    color: rgba(20, 61, 44, .72);
    font-size: 13px;
}

.designer-cart-success > div {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.saved-designs-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 16px;
    margin-top: 24px;
}

.saved-design-card,
.saved-designs-empty {
    display: grid;
    gap: 14px;
    padding: 18px;
    border-radius: 22px;
    border: 1px solid rgba(20, 61, 44, .13);
    background: rgba(255, 255, 255, .76);
    box-shadow: 0 16px 36px rgba(20, 61, 44, .08);
}

.saved-design-card strong {
    display: block;
    font-size: 17px;
    color: #143d2c;
}

.saved-design-card span,
.saved-design-card small {
    display: block;
    margin-top: 4px;
    color: rgba(20, 61, 44, .68);
}

.saved-design-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.saved-design-actions form {
    margin: 0;
}

.alert-success {
    border-color: rgba(47, 159, 99, .28);
    background: rgba(47, 159, 99, .1);
    color: #143d2c;
}

@media (max-width: 720px) {
    .designer-save-row {
        grid-template-columns: 1fr;
    }

    .designer-size-quantity-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}


/* TavaWear compact customer drafts v20260613 */
:root {
  --tw-compact-border: rgba(17, 24, 39, .09);
  --tw-compact-soft: #f7faf7;
  --tw-compact-ink: #111827;
  --tw-compact-muted: #6b7280;
  --tw-compact-green: #3d9c5e;
}

.page-width,
.vaccount-container {
  max-width: 1160px;
}

.section {
  padding-top: 64px;
  padding-bottom: 64px;
}

.home-hero {
  padding-top: 46px;
  padding-bottom: 48px;
}

.hero-grid {
  min-height: auto;
  gap: 38px;
  align-items: center;
}

.hero-copy {
  gap: 20px;
}

.hero-copy h1 {
  font-size: clamp(42px, 6vw, 76px);
  line-height: .92;
  letter-spacing: -.06em;
}

.hero-copy > p {
  max-width: 590px;
  font-size: 18px;
  line-height: 1.65;
}

.hero-actions {
  gap: 10px;
}

.hero-visual {
  min-height: 0;
  height: clamp(360px, 44vw, 520px);
  border-radius: 28px;
  box-shadow: 0 24px 70px rgba(15, 23, 42, .10);
}

.hero-product-bar {
  left: 18px;
  right: 18px;
  bottom: 18px;
  padding: 14px 16px;
  border-radius: 18px;
  box-shadow: 0 18px 50px rgba(15, 23, 42, .12);
}

.benefit-card,
.product-card,
.cta-panel,
.vaccount-card,
.vaccount-orders-card,
.vaccount-designs-card {
  border: 1px solid var(--tw-compact-border);
  border-radius: 22px;
  box-shadow: 0 18px 55px rgba(15, 23, 42, .055);
}

.benefit-card {
  padding: 22px;
}

.benefit-card h3 {
  margin-top: 10px;
  font-size: 19px;
}

.benefit-card p {
  font-size: 15px;
  line-height: 1.62;
}

.product-grid {
  gap: 22px;
}

.product-card {
  overflow: hidden;
}

.product-media {
  height: 300px;
}

.product-body {
  padding: 20px;
}

.product-body h3 {
  font-size: 21px;
}

.product-body p {
  font-size: 14px;
  line-height: 1.55;
}

.button,
button.button,
a.button,
.product-form .button.button-full {
  min-height: 44px;
  padding: 0 18px;
  border-radius: 999px;
  font-weight: 800;
  letter-spacing: -.01em;
  box-shadow: none;
}

.button.small,
button.button.small,
a.button.small {
  min-height: 38px;
  padding: 0 14px;
  font-size: 13px;
}

.vaccount-page {
  background:
    radial-gradient(circle at 8% 0%, rgba(61, 156, 94, .10), transparent 28%),
    linear-gradient(180deg, #fbfdfb 0%, #f4f7f4 100%);
  min-height: calc(100vh - var(--header-h, 80px));
  padding: 48px 18px 70px;
}

.vaccount-container {
  margin: 0 auto;
}

.vaccount-head {
  margin-bottom: 22px;
  padding: 0;
}

.vaccount-head p {
  margin: 0 0 6px;
  color: var(--tw-compact-green);
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: .11em;
  font-size: 12px;
}

.vaccount-head h1 {
  margin: 0;
  font-size: clamp(34px, 5vw, 56px);
  letter-spacing: -.055em;
  line-height: .95;
}

.vaccount-head span {
  color: var(--tw-compact-muted);
}

.vaccount-layout {
  display: grid;
  grid-template-columns: minmax(260px, 310px) minmax(0, 1fr);
  gap: 22px;
  align-items: start;
}

.vaccount-side {
  display: grid;
  gap: 16px;
  position: sticky;
  top: calc(var(--header-h, 80px) + 18px);
}

.vaccount-main-stack {
  display: grid;
  gap: 18px;
  min-width: 0;
}

.vaccount-card,
.vaccount-orders-card,
.vaccount-designs-card {
  background: rgba(255, 255, 255, .86);
  backdrop-filter: blur(14px);
  padding: 22px;
}

.vaccount-profile {
  padding: 20px;
}

.vaccount-avatar {
  width: 54px;
  height: 54px;
  border-radius: 18px;
  background: #132015;
  color: #fff;
  display: grid;
  place-items: center;
  font-weight: 900;
  letter-spacing: -.04em;
}

.vaccount-nav {
  display: grid;
  gap: 8px;
  padding: 10px;
  border: 1px solid var(--tw-compact-border);
  border-radius: 20px;
  background: rgba(255, 255, 255, .72);
}

.vaccount-nav a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 40px;
  padding: 0 12px;
  border-radius: 14px;
  color: var(--tw-compact-ink);
  text-decoration: none;
  font-weight: 850;
  font-size: 14px;
}

.vaccount-nav a:hover {
  background: var(--tw-compact-soft);
  color: var(--tw-compact-green);
}

.vaccount-section-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 18px;
  margin-bottom: 18px;
}

.vaccount-section-head span {
  display: block;
  color: var(--tw-compact-green);
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: .11em;
  font-size: 12px;
  margin-bottom: 6px;
}

.vaccount-section-head h2,
.vaccount-orders-card > h2 {
  margin: 0;
  font-size: clamp(24px, 3.2vw, 34px);
  line-height: 1;
  letter-spacing: -.04em;
}

.vaccount-section-head p {
  margin: 8px 0 0;
  color: var(--tw-compact-muted);
  line-height: 1.55;
}

.vaccount-design-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}

.vaccount-design-card {
  display: grid;
  grid-template-columns: 132px minmax(0, 1fr);
  gap: 14px;
  padding: 12px;
  border: 1px solid var(--tw-compact-border);
  border-radius: 18px;
  background: #fff;
}

.vaccount-design-preview {
  display: grid;
  place-items: center;
  min-height: 150px;
  border-radius: 16px;
  background: linear-gradient(145deg, #eef5ee, #ffffff);
  overflow: hidden;
  color: var(--tw-compact-green);
  font-weight: 950;
  text-decoration: none;
}

.vaccount-design-preview img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.vaccount-design-body {
  display: grid;
  gap: 12px;
  min-width: 0;
}

.vaccount-design-body strong {
  display: block;
  color: var(--tw-compact-ink);
  font-size: 17px;
  letter-spacing: -.025em;
}

.vaccount-design-body span {
  display: block;
  color: var(--tw-compact-muted);
  font-size: 13px;
  margin-top: 2px;
}

.vaccount-design-body dl {
  display: grid;
  gap: 7px;
  margin: 0;
}

.vaccount-design-body dl div {
  display: grid;
  grid-template-columns: 92px minmax(0, 1fr);
  gap: 8px;
}

.vaccount-design-body dt {
  color: var(--tw-compact-muted);
  font-size: 12px;
  font-weight: 800;
}

.vaccount-design-body dd {
  margin: 0;
  color: var(--tw-compact-ink);
  font-size: 12px;
  font-weight: 750;
}

.vaccount-design-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}

.vaccount-design-actions form {
  margin: 0;
}

.vaccount-design-actions button {
  border: 0;
  cursor: pointer;
}

.vaccount-design-all {
  display: inline-flex;
  margin-top: 16px;
  color: var(--tw-compact-green);
  font-weight: 900;
  text-decoration: none;
}

.vaccount-empty--compact {
  padding: 24px;
  border-radius: 18px;
  background: #fff;
}

.vaccount-order {
  border-radius: 18px;
}

.vaccount-order-summary {
  min-height: 64px;
  padding: 14px 16px;
}

.product-detail-page {
  padding-top: 44px;
}

.product-detail-layout {
  gap: 28px;
}

.product-buy-panel,
.designer-canvas-card,
.designer-tools,
.designer-option-card,
.designer-summary-box {
  border-radius: 22px;
  box-shadow: 0 18px 55px rgba(15, 23, 42, .055);
}

.designer-save-row {
  gap: 10px;
}

.designer-save-row .button.ghost {
  background: #f4f8f4;
  color: #1f3a25;
  border: 1px solid rgba(61, 156, 94, .18);
}

.tavawear-designer-toast {
  position: fixed;
  right: 22px;
  bottom: 22px;
  z-index: 99999;
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr) 28px;
  align-items: center;
  gap: 12px;
  width: min(420px, calc(100vw - 32px));
  padding: 14px 14px;
  border-radius: 18px;
  background: #c62828;
  color: #fff;
  box-shadow: 0 24px 70px rgba(120, 20, 20, .34);
  transform: translateY(18px);
  opacity: 0;
  pointer-events: none;
  transition: opacity .18s ease, transform .18s ease;
}

.tavawear-designer-toast.is-visible {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

.tavawear-designer-toast__icon {
  width: 34px;
  height: 34px;
  border-radius: 999px;
  display: grid;
  place-items: center;
  background: rgba(255, 255, 255, .18);
  font-weight: 950;
}

.tavawear-designer-toast__content strong {
  display: block;
  margin-bottom: 2px;
  font-size: 14px;
}

.tavawear-designer-toast__content span {
  display: block;
  font-size: 13px;
  line-height: 1.35;
  color: rgba(255, 255, 255, .92);
}

.tavawear-designer-toast__close {
  width: 28px;
  height: 28px;
  border: 0;
  border-radius: 999px;
  color: #fff;
  background: rgba(255, 255, 255, .14);
  cursor: pointer;
}

@media (max-width: 980px) {
  .section {
    padding-top: 46px;
    padding-bottom: 46px;
  }

  .hero-grid,
  .vaccount-layout {
    grid-template-columns: 1fr;
  }

  .vaccount-side {
    position: static;
  }

  .vaccount-design-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 640px) {
  .home-hero {
    padding-top: 28px;
  }

  .hero-visual {
    height: 360px;
    border-radius: 22px;
  }

  .hero-product-bar {
    left: 12px;
    right: 12px;
    bottom: 12px;
  }

  .vaccount-page {
    padding: 30px 12px 52px;
  }

  .vaccount-card,
  .vaccount-orders-card,
  .vaccount-designs-card {
    padding: 16px;
    border-radius: 18px;
  }

  .vaccount-section-head {
    display: grid;
  }

  .vaccount-design-card {
    grid-template-columns: 1fr;
  }

  .vaccount-design-preview {
    min-height: 190px;
  }

  .vaccount-design-body dl div {
    grid-template-columns: 1fr;
    gap: 2px;
  }

  .tavawear-designer-toast {
    right: 12px;
    bottom: 12px;
  }
}


/* TavaWear account drafts visual cleanup v20260613 */
.vaccount-designs-card {
  padding: 28px;
  overflow: hidden;
}

.vaccount-designs-card .vaccount-section-head {
  align-items: center;
  margin-bottom: 22px;
  padding-bottom: 20px;
  border-bottom: 1px solid rgba(17, 24, 39, .08);
}

.vaccount-designs-card .vaccount-section-head h2 {
  font-size: clamp(30px, 4vw, 44px);
  letter-spacing: -.055em;
}

.vaccount-designs-card .vaccount-section-head p {
  max-width: 620px;
  font-size: 16px;
  line-height: 1.55;
}

.vaccount-designs-card .vaccount-section-head .button {
  min-width: 0;
  min-height: 40px;
  padding: 0 16px;
  border-radius: 999px;
  background: #111827;
  color: #fff;
  border: 1px solid #111827;
  font-size: 13px;
  white-space: nowrap;
}

.vaccount-designs-card .vaccount-section-head .button:hover {
  background: #3d9c5e;
  border-color: #3d9c5e;
}

.vaccount-design-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 14px;
}

.vaccount-design-card {
  display: grid;
  grid-template-columns: 190px minmax(0, 1fr);
  gap: 20px;
  align-items: stretch;
  width: 100%;
  padding: 14px;
  border-radius: 22px;
  background:
    linear-gradient(135deg, rgba(61, 156, 94, .055), rgba(255, 255, 255, .96) 42%),
    #fff;
  border: 1px solid rgba(17, 24, 39, .08);
  box-shadow: 0 14px 38px rgba(15, 23, 42, .055);
}

.vaccount-design-card:hover {
  border-color: rgba(61, 156, 94, .24);
  box-shadow: 0 18px 48px rgba(15, 23, 42, .075);
}

.vaccount-design-preview {
  min-height: 190px;
  border-radius: 18px;
  background:
    radial-gradient(circle at 50% 28%, rgba(61, 156, 94, .12), transparent 34%),
    linear-gradient(180deg, #f2f8f2 0%, #ffffff 100%);
  border: 1px solid rgba(61, 156, 94, .10);
}

.vaccount-design-preview span {
  width: 78px;
  height: 78px;
  display: grid;
  place-items: center;
  border-radius: 999px;
  background: #3d9c5e;
  color: #fff;
  font-size: 18px;
  font-weight: 950;
  letter-spacing: -.04em;
  box-shadow: 0 16px 34px rgba(61, 156, 94, .22);
}

.vaccount-design-body {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas:
    "title actions"
    "meta actions";
  gap: 14px 22px;
  align-items: center;
  padding: 8px 4px 8px 0;
}

.vaccount-design-body > div:first-child {
  grid-area: title;
}

.vaccount-design-body > div:first-child strong {
  font-size: 22px;
  line-height: 1.1;
  letter-spacing: -.04em;
}

.vaccount-design-body > div:first-child span {
  margin-top: 6px;
  font-size: 14px;
  color: #6b7280;
}

.vaccount-design-body dl {
  grid-area: meta;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}

.vaccount-design-body dl div {
  display: grid;
  grid-template-columns: 1fr;
  gap: 4px;
  min-height: 70px;
  padding: 12px;
  border-radius: 16px;
  background: rgba(247, 250, 247, .88);
  border: 1px solid rgba(17, 24, 39, .06);
}

.vaccount-design-body dt {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: #6b7280;
}

.vaccount-design-body dd {
  font-size: 14px;
  line-height: 1.35;
  color: #111827;
}

.vaccount-design-actions {
  grid-area: actions;
  display: grid;
  gap: 10px;
  min-width: 170px;
  align-self: center;
}

.vaccount-design-actions .button,
.vaccount-design-actions button.button {
  width: 100%;
  min-height: 40px;
  justify-content: center;
  border-radius: 999px;
  font-size: 13px;
}

.vaccount-design-actions .button.secondary {
  background: #fff;
  color: #111827;
  border: 1px solid rgba(17, 24, 39, .16);
}

.vaccount-design-actions .button.secondary:hover {
  border-color: #3d9c5e;
  color: #3d9c5e;
}

.vaccount-design-actions button.button {
  background: #3d9c5e;
  color: #fff;
}

.vaccount-design-all {
  margin-top: 18px;
  padding-top: 16px;
  border-top: 1px solid rgba(17, 24, 39, .08);
  font-size: 14px;
}

@media (max-width: 820px) {
  .vaccount-designs-card {
    padding: 20px;
  }

  .vaccount-designs-card .vaccount-section-head {
    align-items: flex-start;
  }

  .vaccount-design-card {
    grid-template-columns: 1fr;
  }

  .vaccount-design-preview {
    min-height: 220px;
  }

  .vaccount-design-body {
    grid-template-columns: 1fr;
    grid-template-areas:
      "title"
      "meta"
      "actions";
    padding: 0;
  }

  .vaccount-design-body dl {
    grid-template-columns: 1fr;
  }

  .vaccount-design-actions {
    min-width: 0;
    grid-template-columns: 1fr;
  }
}

@media (max-width: 560px) {
  .vaccount-designs-card .vaccount-section-head {
    display: grid;
    gap: 16px;
  }

  .vaccount-designs-card .vaccount-section-head .button {
    width: 100%;
  }
}

/* TavaWear account drafts refined line UI v20260613 */
.vaccount-designs-card {
  padding: 30px;
}

.vaccount-designs-card .vaccount-section-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 24px;
}

.vaccount-designs-card .vaccount-section-head h2 {
  font-size: clamp(34px, 4.5vw, 48px);
  line-height: .92;
}

.vaccount-design-grid {
  display: grid;
  gap: 12px;
}

.vaccount-design-card {
  grid-template-columns: 126px minmax(0, 1fr) 168px;
  gap: 18px;
  align-items: center;
  min-height: 154px;
  padding: 14px;
  border-radius: 20px;
  border: 1px solid rgba(17, 24, 39, .075);
  background: #fff;
  box-shadow: 0 14px 36px rgba(15, 23, 42, .045);
}

.vaccount-design-card:hover {
  border-color: rgba(61, 156, 94, .28);
  box-shadow: 0 18px 42px rgba(15, 23, 42, .065);
}

.vaccount-design-preview {
  position: relative;
  min-height: 126px;
  height: 126px;
  border-radius: 18px;
  background:
    radial-gradient(circle at 50% 36%, rgba(61, 156, 94, .12), transparent 42%),
    linear-gradient(180deg, #f6fbf6 0%, #ffffff 100%);
  border: 1px solid rgba(17, 24, 39, .06);
}

.vaccount-design-preview::before {
  content: "";
  width: 58px;
  height: 68px;
  border-radius: 18px 18px 14px 14px;
  background: rgba(61, 156, 94, .14);
  border: 1px solid rgba(61, 156, 94, .22);
  box-shadow:
    -22px -10px 0 -12px rgba(61, 156, 94, .14),
    22px -10px 0 -12px rgba(61, 156, 94, .14);
}

.vaccount-design-preview span {
  position: absolute;
  right: 10px;
  bottom: 10px;
  width: auto;
  height: auto;
  min-width: 42px;
  padding: 6px 9px;
  border-radius: 999px;
  background: #3d9c5e;
  color: #fff;
  font-size: 12px;
  font-weight: 950;
  box-shadow: 0 10px 22px rgba(61, 156, 94, .20);
}

.vaccount-design-body {
  display: contents;
}

.vaccount-design-body > div:first-child {
  min-width: 0;
}

.vaccount-design-body > div:first-child strong {
  font-size: 24px;
  line-height: 1.05;
  letter-spacing: -.045em;
}

.vaccount-design-body > div:first-child span {
  margin-top: 8px;
  color: #6b7280;
  font-size: 14px;
}

.vaccount-design-body dl {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  grid-column: 2;
  gap: 8px 14px;
  margin-top: 16px;
}

.vaccount-design-body dl div {
  display: grid;
  grid-template-columns: 1fr;
  gap: 5px;
  min-height: auto;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
}

.vaccount-design-body dt {
  white-space: nowrap;
  font-size: 10px;
  line-height: 1;
  color: #7b8494;
  text-transform: uppercase;
  letter-spacing: .10em;
  font-weight: 950;
}

.vaccount-design-body dd {
  margin: 0;
  color: #111827;
  font-size: 14px;
  line-height: 1.35;
  font-weight: 850;
}

.vaccount-design-actions {
  grid-column: 3;
  grid-row: 1 / span 2;
  display: grid;
  gap: 9px;
  min-width: 0;
  align-self: center;
}

.vaccount-design-actions .button,
.vaccount-design-actions button.button {
  min-height: 38px;
  padding: 0 14px;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 900;
}

.vaccount-design-actions .button.secondary {
  background: #fff;
  color: #111827;
  border: 1px solid rgba(17, 24, 39, .18);
}

.vaccount-design-actions .button.secondary:hover {
  background: #111827;
  border-color: #111827;
  color: #fff;
}

.vaccount-design-actions button.button {
  border: 1px solid #3d9c5e;
  background: #3d9c5e;
  color: #fff;
}

.vaccount-design-actions button.button:hover {
  background: #328650;
  border-color: #328650;
}

.vaccount-design-all {
  display: inline-flex;
  width: auto;
  margin-top: 16px;
  padding-top: 0;
  border-top: 0;
  color: #3d9c5e;
  font-size: 14px;
  font-weight: 900;
}

@media (max-width: 900px) {
  .vaccount-design-card {
    grid-template-columns: 110px minmax(0, 1fr);
  }

  .vaccount-design-preview {
    min-height: 110px;
    height: 110px;
  }

  .vaccount-design-body {
    display: grid;
    grid-column: 2;
    gap: 14px;
  }

  .vaccount-design-body dl {
    grid-column: auto;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    margin-top: 0;
  }

  .vaccount-design-actions {
    grid-column: 1 / -1;
    grid-row: auto;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 620px) {
  .vaccount-designs-card {
    padding: 18px;
  }

  .vaccount-designs-card .vaccount-section-head {
    grid-template-columns: 1fr;
  }

  .vaccount-design-card {
    grid-template-columns: 1fr;
    gap: 14px;
  }

  .vaccount-design-preview {
    height: 160px;
  }

  .vaccount-design-body {
    grid-column: auto;
  }

  .vaccount-design-body dl {
    grid-template-columns: 1fr;
  }

  .vaccount-design-actions {
    grid-template-columns: 1fr;
  }
}

/* TavaWear account drafts layout repair v20260613 */
.vaccount-design-card {
  display: grid !important;
  grid-template-columns: 128px minmax(0, 1fr) !important;
  gap: 18px !important;
  align-items: center !important;
  min-height: 156px !important;
  padding: 16px !important;
  border-radius: 22px !important;
  background: #fff !important;
  border: 1px solid rgba(61, 156, 94, .22) !important;
  box-shadow: 0 16px 42px rgba(15, 23, 42, .05) !important;
}

.vaccount-design-preview {
  grid-column: 1 !important;
  grid-row: 1 !important;
  width: 128px !important;
  height: 128px !important;
  min-height: 128px !important;
  border-radius: 18px !important;
}

.vaccount-design-body {
  grid-column: 2 !important;
  grid-row: 1 !important;
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) 188px !important;
  grid-template-areas:
    "title actions"
    "meta actions" !important;
  gap: 14px 22px !important;
  align-items: center !important;
  min-width: 0 !important;
  padding: 0 !important;
}

.vaccount-design-body > div:first-child {
  grid-area: title !important;
  min-width: 0 !important;
}

.vaccount-design-body > div:first-child strong {
  display: block !important;
  font-size: 24px !important;
  line-height: 1.08 !important;
  letter-spacing: -.045em !important;
  color: #111827 !important;
}

.vaccount-design-body > div:first-child span {
  display: block !important;
  margin-top: 7px !important;
  font-size: 14px !important;
  color: #6b7280 !important;
}

.vaccount-design-body dl {
  grid-area: meta !important;
  display: grid !important;
  grid-template-columns: repeat(3, minmax(96px, 1fr)) !important;
  gap: 10px !important;
  margin: 0 !important;
  min-width: 0 !important;
}

.vaccount-design-body dl div {
  display: grid !important;
  grid-template-columns: 1fr !important;
  gap: 6px !important;
  min-height: 64px !important;
  padding: 11px 12px !important;
  border-radius: 15px !important;
  background: #f7faf7 !important;
  border: 1px solid rgba(17, 24, 39, .06) !important;
}

.vaccount-design-body dt {
  display: block !important;
  white-space: normal !important;
  overflow-wrap: normal !important;
  font-size: 9px !important;
  line-height: 1.15 !important;
  color: #7b8494 !important;
  text-transform: uppercase !important;
  letter-spacing: .07em !important;
  font-weight: 950 !important;
}

.vaccount-design-body dd {
  display: block !important;
  margin: 0 !important;
  color: #111827 !important;
  font-size: 14px !important;
  line-height: 1.28 !important;
  font-weight: 900 !important;
}

.vaccount-design-actions {
  grid-area: actions !important;
  display: grid !important;
  grid-template-columns: 1fr !important;
  gap: 10px !important;
  min-width: 0 !important;
  align-self: center !important;
}

.vaccount-design-actions form {
  margin: 0 !important;
}

.vaccount-design-actions .button,
.vaccount-design-actions button.button {
  width: 100% !important;
  min-height: 40px !important;
  padding: 0 14px !important;
  border-radius: 999px !important;
  justify-content: center !important;
  font-size: 13px !important;
  font-weight: 900 !important;
  white-space: nowrap !important;
}

.vaccount-design-actions .button.secondary {
  background: #fff !important;
  color: #111827 !important;
  border: 1px solid rgba(17, 24, 39, .18) !important;
}

.vaccount-design-actions button.button {
  background: #3d9c5e !important;
  color: #fff !important;
  border: 1px solid #3d9c5e !important;
}

.vaccount-design-all {
  margin-top: 14px !important;
  padding-top: 0 !important;
  border-top: 0 !important;
  font-size: 14px !important;
}

@media (max-width: 900px) {
  .vaccount-design-card {
    grid-template-columns: 112px minmax(0, 1fr) !important;
  }

  .vaccount-design-preview {
    width: 112px !important;
    height: 112px !important;
    min-height: 112px !important;
  }

  .vaccount-design-body {
    grid-template-columns: 1fr !important;
    grid-template-areas:
      "title"
      "meta"
      "actions" !important;
  }

  .vaccount-design-body dl {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  }

  .vaccount-design-actions {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}

@media (max-width: 640px) {
  .vaccount-design-card {
    grid-template-columns: 1fr !important;
  }

  .vaccount-design-preview {
    width: 100% !important;
    height: 160px !important;
    min-height: 160px !important;
  }

  .vaccount-design-body {
    grid-column: 1 !important;
  }

  .vaccount-design-body dl {
    grid-template-columns: 1fr !important;
  }

  .vaccount-design-actions {
    grid-template-columns: 1fr !important;
  }
}

/* TavaWear remove obsolete draft detail link v20260613 */
.vaccount-design-all {
  display: none !important;
}

/* TavaWear account draft meta compact v20260613 */
.vaccount-design-body dl {
  grid-template-columns: repeat(3, minmax(74px, 1fr)) !important;
  gap: 8px !important;
  max-width: 420px !important;
}

.vaccount-design-body dl div {
  min-height: 48px !important;
  padding: 8px 10px !important;
  border-radius: 12px !important;
  background: rgba(247, 250, 247, .72) !important;
}

.vaccount-design-body dt {
  font-size: 8px !important;
  line-height: 1.05 !important;
  letter-spacing: .055em !important;
  margin: 0 !important;
}

.vaccount-design-body dd {
  font-size: 12px !important;
  line-height: 1.22 !important;
  font-weight: 850 !important;
}

.vaccount-design-body > div:first-child strong {
  font-size: 23px !important;
}

.vaccount-design-body > div:first-child span {
  font-size: 13px !important;
}

.vaccount-design-card {
  min-height: 140px !important;
  padding: 14px !important;
}

.vaccount-design-preview {
  width: 118px !important;
  height: 118px !important;
  min-height: 118px !important;
}

.vaccount-design-actions .button,
.vaccount-design-actions button.button {
  min-height: 38px !important;
  font-size: 13px !important;
}

@media (max-width: 900px) {
  .vaccount-design-body dl {
    max-width: none !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  }
}

@media (max-width: 640px) {
  .vaccount-design-body dl {
    grid-template-columns: 1fr !important;
  }

  .vaccount-design-body dl div {
    min-height: auto !important;
  }
}

/* TavaWear account drafts final compact polish v20260613 */
.vaccount-designs-card {
  padding: 26px 28px !important;
}

.vaccount-designs-card .vaccount-section-head {
  margin-bottom: 18px !important;
  padding-bottom: 18px !important;
}

.vaccount-designs-card .vaccount-section-head h2 {
  font-size: clamp(32px, 4vw, 46px) !important;
}

.vaccount-designs-card .vaccount-section-head p {
  font-size: 15px !important;
  line-height: 1.5 !important;
  max-width: 560px !important;
}

.vaccount-designs-card .vaccount-section-head .button {
  min-height: 38px !important;
  padding: 0 17px !important;
  font-size: 13px !important;
}

.vaccount-design-card {
  min-height: 124px !important;
  padding: 12px 14px !important;
  grid-template-columns: 108px minmax(0, 1fr) !important;
  gap: 18px !important;
  border-radius: 20px !important;
  box-shadow: 0 12px 32px rgba(15, 23, 42, .045) !important;
}

.vaccount-design-preview {
  width: 108px !important;
  height: 108px !important;
  min-height: 108px !important;
  border-radius: 16px !important;
}

.vaccount-design-preview::before {
  width: 48px !important;
  height: 58px !important;
  border-radius: 15px 15px 12px 12px !important;
}

.vaccount-design-preview span {
  right: 8px !important;
  bottom: 8px !important;
  min-width: 36px !important;
  padding: 5px 8px !important;
  font-size: 11px !important;
}

.vaccount-design-body {
  grid-template-columns: minmax(0, 1fr) 172px !important;
  gap: 10px 18px !important;
}

.vaccount-design-body > div:first-child strong {
  font-size: 22px !important;
  line-height: 1.08 !important;
}

.vaccount-design-body > div:first-child span {
  margin-top: 5px !important;
  font-size: 13px !important;
}

.vaccount-design-body dl {
  max-width: 390px !important;
  grid-template-columns: repeat(3, minmax(68px, 1fr)) !important;
  gap: 7px !important;
}

.vaccount-design-body dl div {
  min-height: 44px !important;
  padding: 7px 9px !important;
  border-radius: 11px !important;
}

.vaccount-design-body dt {
  font-size: 7.5px !important;
  letter-spacing: .045em !important;
}

.vaccount-design-body dd {
  font-size: 11.5px !important;
  line-height: 1.2 !important;
}

.vaccount-design-actions {
  gap: 8px !important;
}

.vaccount-design-actions .button,
.vaccount-design-actions button.button {
  min-height: 36px !important;
  font-size: 12.5px !important;
  padding: 0 12px !important;
}

@media (max-width: 900px) {
  .vaccount-design-card {
    grid-template-columns: 98px minmax(0, 1fr) !important;
  }

  .vaccount-design-preview {
    width: 98px !important;
    height: 98px !important;
    min-height: 98px !important;
  }

  .vaccount-design-body {
    grid-template-columns: 1fr !important;
  }

  .vaccount-design-body dl {
    max-width: none !important;
  }
}

@media (max-width: 640px) {
  .vaccount-designs-card {
    padding: 18px !important;
  }

  .vaccount-design-card {
    grid-template-columns: 1fr !important;
  }

  .vaccount-design-preview {
    width: 100% !important;
    height: 150px !important;
  }
}


/* TavaWear real designer preview images v20260613 */
.vaccount-design-preview:has(img)::before {
  display: none !important;
}

.vaccount-design-preview img {
  position: relative !important;
  z-index: 2 !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: contain !important;
  padding: 6px !important;
  border-radius: 16px !important;
}

.vaccount-design-preview:has(img) {
  background: linear-gradient(180deg, #f7faf7 0%, #ffffff 100%) !important;
}

/* TavaWear designer success toast v20260613 */
.tavawear-designer-success-toast {
  position: fixed;
  right: 22px;
  bottom: 22px;
  z-index: 100000;
  display: grid;
  grid-template-columns: 36px minmax(0, 1fr) 28px;
  align-items: center;
  gap: 12px;
  width: min(430px, calc(100vw - 32px));
  padding: 14px 14px;
  border-radius: 18px;
  background: #2f9e57;
  color: #fff;
  box-shadow: 0 24px 70px rgba(47, 158, 87, .34);
  transform: translateY(18px);
  opacity: 0;
  pointer-events: none;
  transition: opacity .18s ease, transform .18s ease;
}

.tavawear-designer-success-toast.is-visible {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

.tavawear-designer-success-toast__icon {
  width: 36px;
  height: 36px;
  display: grid;
  place-items: center;
  border-radius: 999px;
  background: rgba(255, 255, 255, .18);
  font-size: 18px;
  font-weight: 950;
}

.tavawear-designer-success-toast__content strong {
  display: block;
  margin-bottom: 2px;
  font-size: 14px;
  font-weight: 950;
}

.tavawear-designer-success-toast__content span {
  display: block;
  color: rgba(255, 255, 255, .92);
  font-size: 13px;
  line-height: 1.35;
}

.tavawear-designer-success-toast__close {
  width: 28px;
  height: 28px;
  border: 0;
  border-radius: 999px;
  color: #fff;
  background: rgba(255, 255, 255, .14);
  cursor: pointer;
}

@media (max-width: 640px) {
  .tavawear-designer-success-toast {
    right: 12px;
    bottom: 12px;
  }
}

/* TavaWear account limited lists v20260613 */
.vaccount-nav {
  display: none !important;
}

.vaccount-design-grid.vaccount-limited-list:not(.is-expanded) > .vaccount-design-card:nth-child(n+3),
.vaccount-orders.vaccount-limited-list:not(.is-expanded) > .vaccount-order:nth-child(n+3) {
  display: none !important;
}

.vaccount-list-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: fit-content;
  min-height: 38px;
  margin-top: 14px;
  padding: 0 16px;
  border: 1px solid rgba(17, 24, 39, .14);
  border-radius: 999px;
  background: #fff;
  color: #111827;
  font-size: 13px;
  font-weight: 900;
  cursor: pointer;
}

.vaccount-list-toggle:hover {
  border-color: #3d9c5e;
  color: #3d9c5e;
}

.vaccount-orders-card .vaccount-list-toggle {
  margin-top: 16px;
}

.vaccount-side {
  gap: 16px !important;
}

@media (max-width: 640px) {
  .vaccount-list-toggle {
    width: 100%;
  }
}

/* TavaWear designer tools spacing v20260614 */
.designer-tools.designer-tools--clean {
  display: grid !important;
  gap: 18px !important;
  padding: 22px !important;
  border-radius: 24px !important;
  background: rgba(255, 255, 255, .78) !important;
  border: 1px solid rgba(17, 24, 39, .07) !important;
  box-shadow: 0 18px 50px rgba(15, 23, 42, .045) !important;
}

.designer-upload-card,
.designer-text-card,
.designer-object-panel {
  border-radius: 18px !important;
  padding: 18px !important;
  background: #fff !important;
  border: 1px solid rgba(17, 24, 39, .08) !important;
  box-shadow: 0 10px 28px rgba(15, 23, 42, .035) !important;
}

.designer-upload-card {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto !important;
  align-items: center !important;
  gap: 18px !important;
}

.designer-upload-card strong {
  display: block !important;
  margin-bottom: 5px !important;
  font-size: 16px !important;
  line-height: 1.2 !important;
}

.designer-upload-card small {
  display: block !important;
  color: #53615a !important;
  font-size: 13px !important;
  line-height: 1.45 !important;
}

.designer-upload-button.designer-upload-button--wide {
  min-width: 136px !important;
  min-height: 42px !important;
  padding: 0 18px !important;
  border-radius: 999px !important;
  white-space: nowrap !important;
}

.designer-text-card {
  padding: 14px !important;
}

.designer-text-row {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto !important;
  gap: 12px !important;
  align-items: center !important;
}

.designer-text-row input {
  min-height: 46px !important;
  border-radius: 14px !important;
  padding: 0 15px !important;
  font-size: 15px !important;
}

.designer-text-row button {
  min-height: 46px !important;
  padding: 0 18px !important;
  border-radius: 14px !important;
  white-space: nowrap !important;
}

.designer-object-panel {
  display: grid !important;
  gap: 14px !important;
}

.designer-object-panel-head {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) 38px !important;
  gap: 14px !important;
  align-items: start !important;
}

.designer-object-panel-head h2 {
  margin: 0 0 5px !important;
  font-size: 17px !important;
  line-height: 1.2 !important;
}

.designer-object-panel-head p {
  margin: 0 !important;
  max-width: 420px !important;
  color: #53615a !important;
  font-size: 13px !important;
  line-height: 1.45 !important;
}

.designer-object-panel-head strong {
  width: 34px !important;
  height: 34px !important;
  display: grid !important;
  place-items: center !important;
  border-radius: 999px !important;
  background: rgba(61, 156, 94, .12) !important;
  color: #07863f !important;
  font-size: 14px !important;
  font-weight: 950 !important;
}

.designer-object-list {
  display: grid !important;
  gap: 10px !important;
}

.designer-object-list > * {
  border-radius: 16px !important;
}

.designer-action-row {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 10px !important;
  margin-top: 0 !important;
}

.designer-action-row button {
  min-height: 40px !important;
  padding: 0 16px !important;
  border-radius: 14px !important;
}

.designer-range {
  display: grid !important;
  gap: 10px !important;
  margin-top: 2px !important;
  padding: 4px 2px 0 !important;
  font-size: 14px !important;
  font-weight: 900 !important;
}

.designer-range input[type="range"] {
  width: 100% !important;
}

.designer-status {
  min-height: 0 !important;
  margin: 0 !important;
  font-size: 13px !important;
  line-height: 1.35 !important;
}

.designer-status:empty {
  display: none !important;
}

@media (max-width: 760px) {
  .designer-tools.designer-tools--clean {
    padding: 16px !important;
    gap: 14px !important;
  }

  .designer-upload-card,
  .designer-text-row {
    grid-template-columns: 1fr !important;
  }

  .designer-upload-button.designer-upload-button--wide,
  .designer-text-row button {
    width: 100% !important;
  }
}

/* TavaWear collapsible designer summary v20260614 */
.designer-summary-box--collapsible {
  padding: 0 !important;
  overflow: hidden !important;
}

.designer-summary-toggle {
  width: 100% !important;
  min-height: 54px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 16px !important;
  padding: 0 18px !important;
  border: 0 !important;
  border-radius: 20px !important;
  background: transparent !important;
  color: #111827 !important;
  cursor: pointer !important;
  font: inherit !important;
  text-align: left !important;
}

.designer-summary-toggle span {
  font-size: 17px !important;
  font-weight: 950 !important;
  letter-spacing: -.02em !important;
}

.designer-summary-toggle em {
  display: inline-flex !important;
  align-items: center !important;
  min-height: 30px !important;
  padding: 0 12px !important;
  border-radius: 999px !important;
  background: rgba(61, 156, 94, .10) !important;
  color: #07863f !important;
  font-size: 12px !important;
  font-style: normal !important;
  font-weight: 950 !important;
}

.designer-summary-box--collapsible dl,
.designer-summary-box--collapsible .designer-summary-note {
  margin-left: 18px !important;
  margin-right: 18px !important;
}

.designer-summary-box--collapsible .designer-summary-note {
  margin-bottom: 18px !important;
}

.designer-summary-box--collapsible.is-collapsed dl,
.designer-summary-box--collapsible.is-collapsed .designer-summary-note {
  display: none !important;
}

.designer-summary-box--collapsible:not(.is-collapsed) .designer-summary-toggle {
  border-bottom: 1px solid rgba(17, 24, 39, .08) !important;
  border-radius: 20px 20px 0 0 !important;
  margin-bottom: 14px !important;
}

.designer-summary-box--collapsible:not(.is-collapsed) .designer-summary-toggle em {
  background: #111827 !important;
  color: #fff !important;
}

@media (max-width: 760px) {
  .designer-summary-toggle {
    min-height: 50px !important;
    padding: 0 14px !important;
  }
}

/* TavaWear robust collapsible designer summary repair v20260614 */
.designer-summary-box.designer-summary-box--collapsible {
  padding: 0 !important;
  overflow: hidden !important;
}

.designer-summary-box.designer-summary-box--collapsible > h2 {
  display: none !important;
}

.designer-summary-toggle {
  width: 100% !important;
  min-height: 54px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 16px !important;
  padding: 0 18px !important;
  border: 0 !important;
  border-radius: 20px !important;
  background: transparent !important;
  color: #111827 !important;
  cursor: pointer !important;
  font: inherit !important;
  text-align: left !important;
}

.designer-summary-toggle span {
  font-size: 17px !important;
  font-weight: 950 !important;
  letter-spacing: -.02em !important;
}

.designer-summary-toggle em {
  display: inline-flex !important;
  align-items: center !important;
  min-height: 30px !important;
  padding: 0 12px !important;
  border-radius: 999px !important;
  background: rgba(61, 156, 94, .10) !important;
  color: #07863f !important;
  font-size: 12px !important;
  font-style: normal !important;
  font-weight: 950 !important;
}

.designer-summary-box.designer-summary-box--collapsible.is-collapsed > :not(.designer-summary-toggle) {
  display: none !important;
}

.designer-summary-box.designer-summary-box--collapsible:not(.is-collapsed) > :not(.designer-summary-toggle) {
  margin-left: 18px !important;
  margin-right: 18px !important;
}

.designer-summary-box.designer-summary-box--collapsible:not(.is-collapsed) > .designer-summary-toggle {
  border-bottom: 1px solid rgba(17, 24, 39, .08) !important;
  border-radius: 20px 20px 0 0 !important;
  margin-bottom: 14px !important;
}

.designer-summary-box.designer-summary-box--collapsible:not(.is-collapsed) .designer-summary-toggle em {
  background: #111827 !important;
  color: #fff !important;
}

.designer-summary-box.designer-summary-box--collapsible:not(.is-collapsed) .designer-summary-note {
  margin-bottom: 18px !important;
}

@media (max-width: 760px) {
  .designer-summary-toggle {
    min-height: 50px !important;
    padding: 0 14px !important;
  }
}


/* TavaWear global compact color picker repair v20260614 */
.fixed-variant-card--compact {
  gap: 14px !important;
}

.fixed-variant-card--compact .fixed-variant-color-picker {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 10px !important;
  padding: 16px !important;
  border-radius: 22px !important;
  background: rgba(255, 255, 255, .72) !important;
  box-shadow: 0 14px 40px rgba(17, 24, 39, .04) !important;
}

.fixed-variant-card--compact .fixed-variant-color-choice {
  appearance: none !important;
  -webkit-appearance: none !important;
  position: relative !important;
  width: 36px !important;
  height: 36px !important;
  padding: 0 !important;
  margin: 0 !important;
  border: 1px solid rgba(17, 24, 39, .14) !important;
  border-radius: 999px !important;
  background: #fff !important;
  cursor: pointer !important;
  display: inline-grid !important;
  place-items: center !important;
  font: inherit !important;
  color: transparent !important;
}

.fixed-variant-card--compact .fixed-variant-color-choice span {
  display: block !important;
  width: 28px !important;
  height: 28px !important;
  border-radius: 999px !important;
  background: var(--swatch, #ddd) !important;
  box-shadow: inset 0 0 0 2px rgba(255, 255, 255, .55) !important;
}

.fixed-variant-card--compact .fixed-variant-color-choice em {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  overflow: hidden !important;
  clip: rect(0 0 0 0) !important;
  white-space: nowrap !important;
}

.fixed-variant-card--compact .fixed-variant-color-choice.is-active {
  border-color: #16a34a !important;
  box-shadow: 0 0 0 3px rgba(22, 163, 74, .18) !important;
}

.fixed-variant-card--compact .fixed-variant-color-choice.is-active::after {
  content: "✓" !important;
  position: absolute !important;
  inset: 0 !important;
  display: grid !important;
  place-items: center !important;
  color: #fff !important;
  font-size: 18px !important;
  font-weight: 950 !important;
  line-height: 1 !important;
  text-shadow: 0 1px 4px rgba(0, 0, 0, .55) !important;
}

.fixed-variant-card--compact .fixed-variant-active-label {
  margin: -4px 0 0 !important;
  color: #53615a !important;
  font-size: 13px !important;
}

.fixed-variant-card--compact .fixed-variant-active-label strong {
  color: #0d2a1d !important;
  font-weight: 950 !important;
}

.fixed-variant-card--compact .fixed-variant-panel[hidden] {
  display: none !important;
}

.fixed-variant-card--compact .fixed-variant-size-grid {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 10px !important;
  padding: 16px !important;
  border-radius: 22px !important;
  background: rgba(255, 255, 255, .72) !important;
  box-shadow: 0 14px 40px rgba(17, 24, 39, .04) !important;
}

.fixed-variant-card--compact .fixed-variant-size-row {
  display: grid !important;
  grid-template-columns: auto minmax(44px, 1fr) !important;
  align-items: center !important;
  gap: 8px !important;
  min-width: 0 !important;
  min-height: 62px !important;
  padding: 9px 8px !important;
  border-radius: 14px !important;
  border: 1px solid rgba(17, 24, 39, .08) !important;
  background: #f8fbf8 !important;
}

.fixed-variant-card--compact .fixed-variant-size-row span {
  color: #062015 !important;
  font-size: 13px !important;
  font-weight: 950 !important;
}

.fixed-variant-card--compact .fixed-variant-size-row input {
  width: 100% !important;
  min-width: 44px !important;
  max-width: 56px !important;
  height: 36px !important;
  padding: 0 4px !important;
  justify-self: end !important;
  border-radius: 12px !important;
  border: 1px solid rgba(17, 24, 39, .12) !important;
  background: #fff !important;
  color: #062015 !important;
  text-align: center !important;
  font-weight: 950 !important;
}

@media (max-width: 520px) {
  .fixed-variant-card--compact .fixed-variant-size-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}

/* TavaWear product added box v20260614 */
.product-added-box {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 16px;
  align-items: center;
  margin: 0 0 20px;
  padding: 16px;
  border: 1px solid rgba(22, 163, 74, .24);
  border-radius: 20px;
  background: rgba(236, 253, 245, .82);
  box-shadow: 0 16px 42px rgba(17, 24, 39, .05);
}

.product-added-box strong {
  display: block;
  color: #062015;
  font-size: 16px;
  font-weight: 950;
  margin-bottom: 4px;
}

.product-added-box span {
  display: block;
  color: #53615a;
  font-size: 14px;
  line-height: 1.45;
}

.product-added-actions {
  display: flex;
  gap: 10px;
  align-items: center;
  white-space: nowrap;
}

.product-added-actions .button {
  min-height: 42px;
  padding: 0 18px;
}

@media (max-width: 720px) {
  .product-added-box {
    grid-template-columns: 1fr;
  }

  .product-added-actions {
    display: grid;
    grid-template-columns: 1fr;
    white-space: normal;
  }
}

/* TavaWear standard product success box v20260614 */
.product-added-box {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto !important;
  gap: 16px !important;
  align-items: center !important;
  margin: 0 0 20px !important;
  padding: 16px !important;
  border: 1px solid rgba(22, 163, 74, .24) !important;
  border-radius: 20px !important;
  background: rgba(236, 253, 245, .86) !important;
  box-shadow: 0 16px 42px rgba(17, 24, 39, .05) !important;
}

.product-added-box strong {
  display: block !important;
  color: #062015 !important;
  font-size: 16px !important;
  font-weight: 950 !important;
  margin-bottom: 4px !important;
}

.product-added-box span {
  display: block !important;
  color: #53615a !important;
  font-size: 14px !important;
  line-height: 1.45 !important;
}

.product-added-actions {
  display: flex !important;
  gap: 10px !important;
  align-items: center !important;
  white-space: nowrap !important;
}

.product-added-actions .button {
  min-height: 42px !important;
  padding: 0 18px !important;
}

@media (max-width: 720px) {
  .product-added-box {
    grid-template-columns: 1fr !important;
  }

  .product-added-actions {
    display: grid !important;
    grid-template-columns: 1fr !important;
    white-space: normal !important;
  }
}

/* TavaWear success box compact layout v20260614 */
.product-detail-form .product-added-box,
.product-added-box {
  display: grid !important;
  grid-template-columns: 1fr !important;
  gap: 14px !important;
  align-items: stretch !important;
  margin: 0 0 22px !important;
  padding: 16px !important;
  border-radius: 20px !important;
  overflow: hidden !important;
}

.product-added-box > div:first-child {
  min-width: 0 !important;
}

.product-added-box strong {
  display: block !important;
  margin: 0 0 4px !important;
  color: #062015 !important;
  font-size: 16px !important;
  font-weight: 950 !important;
  line-height: 1.2 !important;
}

.product-added-box span {
  display: block !important;
  color: #53615a !important;
  font-size: 14px !important;
  line-height: 1.45 !important;
}

.product-added-actions {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 10px !important;
  width: 100% !important;
  white-space: normal !important;
}

.product-added-actions .button {
  width: 100% !important;
  min-height: 44px !important;
  padding: 0 14px !important;
  border-radius: 999px !important;
  justify-content: center !important;
  text-align: center !important;
}

@media (max-width: 430px) {
  .product-added-actions {
    grid-template-columns: 1fr !important;
  }
}

/* TavaWear cart redesign v20260614 */
.cart-page .page-width {
  max-width: 1040px;
}

.cart-page h1 {
  margin: 0 0 24px;
  color: #07140f;
  font-size: clamp(40px, 6vw, 64px);
  letter-spacing: -0.06em;
  line-height: .92;
}

.cart-list {
  display: grid;
  gap: 14px;
}

.cart-item {
  display: grid !important;
  grid-template-columns: 92px minmax(0, 1fr) 150px !important;
  gap: 18px !important;
  align-items: center !important;
  min-height: 0 !important;
  padding: 16px !important;
  border-radius: 20px !important;
  border: 1px solid rgba(17, 24, 39, .08) !important;
  background: rgba(255, 255, 255, .82) !important;
  box-shadow: 0 14px 38px rgba(17, 24, 39, .045) !important;
}

.cart-thumb {
  width: 92px !important;
  height: 92px !important;
  border-radius: 16px !important;
  overflow: hidden !important;
  background: #f3f7f3 !important;
  display: grid !important;
  place-items: center !important;
}

.cart-thumb img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
}

.cart-content {
  min-width: 0 !important;
}

.cart-item-title {
  margin: 0 0 6px !important;
  color: #07140f !important;
  font-size: clamp(22px, 2.6vw, 31px) !important;
  letter-spacing: -0.045em !important;
  line-height: 1 !important;
}

.cart-item-meta {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  margin: 0 0 8px !important;
  padding: 6px 10px !important;
  border-radius: 999px !important;
  background: rgba(236, 253, 245, .9) !important;
  color: #0d2a1d !important;
  font-size: 13px !important;
  font-weight: 850 !important;
}

.cart-item-desc {
  margin: 0 !important;
  color: #53615a !important;
  font-size: 14px !important;
  line-height: 1.35 !important;
}

.cart-side {
  display: grid !important;
  justify-items: end !important;
  gap: 10px !important;
  align-self: stretch !important;
}

.cart-side > strong {
  color: #07140f !important;
  font-size: 17px !important;
  line-height: 1 !important;
}

.cart-qty-form {
  display: grid !important;
  justify-items: end !important;
  gap: 8px !important;
}

.cart-qty-form label {
  display: grid !important;
  justify-items: end !important;
  gap: 5px !important;
  margin: 0 !important;
}

.cart-qty-form label span {
  color: #0d2a1d !important;
  font-size: 12px !important;
  font-weight: 900 !important;
}

.cart-qty-input {
  width: 72px !important;
  height: 42px !important;
  border-radius: 14px !important;
  border: 1px solid rgba(17, 24, 39, .12) !important;
  background: #fff !important;
  color: #07140f !important;
  text-align: center !important;
  font-weight: 950 !important;
}

.cart-qty-button {
  min-height: 36px !important;
  padding: 0 14px !important;
  border: 0 !important;
  border-radius: 999px !important;
  background: rgba(236, 253, 245, .9) !important;
  color: #0d2a1d !important;
  font-size: 13px !important;
  font-weight: 950 !important;
  cursor: pointer !important;
}

.cart-side .link-button {
  color: #526058 !important;
  font-size: 13px !important;
  font-weight: 800 !important;
  text-decoration: none !important;
}

.cart-side .link-button:hover {
  color: #b42318 !important;
  text-decoration: underline !important;
}

.summary {
  margin-top: 18px !important;
  padding: 18px !important;
  border-radius: 22px !important;
  border: 1px solid rgba(17, 24, 39, .08) !important;
  background: rgba(255, 255, 255, .86) !important;
  box-shadow: 0 16px 42px rgba(17, 24, 39, .05) !important;
}

.summary p {
  margin: 0 0 14px !important;
  color: #53615a !important;
}

.summary div {
  display: flex !important;
  justify-content: space-between !important;
  gap: 16px !important;
  margin-bottom: 16px !important;
  font-size: 18px !important;
}

.summary .button {
  width: 100% !important;
  justify-content: center !important;
}

.cart-empty-card {
  max-width: 720px;
  padding: clamp(24px, 5vw, 46px);
  border: 1px solid rgba(17, 24, 39, .08);
  border-radius: 30px;
  background:
    radial-gradient(circle at 88% 12%, rgba(61, 156, 94, .16), transparent 34%),
    linear-gradient(135deg, rgba(255, 255, 255, .94), rgba(241, 248, 243, .9));
  box-shadow: 0 24px 70px rgba(17, 24, 39, .07);
}

.cart-empty-kicker {
  display: inline-flex;
  align-items: center;
  min-height: 30px;
  padding: 0 12px;
  margin-bottom: 18px;
  border-radius: 999px;
  background: rgba(236, 253, 245, .96);
  color: #16834a;
  font-size: 12px;
  font-weight: 950;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.cart-empty-card h2 {
  max-width: 620px;
  margin: 0 0 14px;
  color: #07140f;
  font-size: clamp(34px, 6vw, 58px);
  letter-spacing: -0.06em;
  line-height: .94;
}

.cart-empty-card p {
  max-width: 600px;
  margin: 0;
  color: #53615a;
  font-size: 17px;
  line-height: 1.55;
}

.cart-empty-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 24px;
}

.cart-empty-actions .button {
  min-height: 48px;
  padding: 0 22px;
}

.cart-empty-note {
  margin-top: 22px;
  padding: 14px 16px;
  border-radius: 18px;
  background: rgba(255, 255, 255, .72);
  color: #53615a;
  font-size: 14px;
  line-height: 1.45;
}

@media (max-width: 760px) {
  .cart-item {
    grid-template-columns: 78px minmax(0, 1fr) !important;
  }

  .cart-thumb {
    width: 78px !important;
    height: 78px !important;
  }

  .cart-side {
    grid-column: 1 / -1 !important;
    grid-template-columns: 1fr auto auto !important;
    align-items: center !important;
    justify-items: stretch !important;
  }

  .cart-qty-form {
    grid-template-columns: auto auto !important;
    align-items: end !important;
  }

  .cart-empty-actions {
    display: grid;
    grid-template-columns: 1fr;
  }
}

/* TavaWear cart CTA compact final v20260614 */
.cart-page {
  padding-top: clamp(34px, 5vw, 64px) !important;
}

.cart-page .page-width {
  max-width: 1120px !important;
}

.cart-page h1 {
  margin: 0 0 22px !important;
  color: #07140f !important;
  font-size: clamp(42px, 6vw, 68px) !important;
  line-height: .9 !important;
  letter-spacing: -.065em !important;
}

.cart-list {
  display: grid !important;
  gap: 10px !important;
}

.cart-item {
  display: grid !important;
  grid-template-columns: 76px minmax(0, 1fr) 118px !important;
  gap: 14px !important;
  align-items: center !important;
  min-height: 104px !important;
  padding: 12px 14px !important;
  border-radius: 18px !important;
  border: 1px solid rgba(17, 24, 39, .08) !important;
  background: rgba(255, 255, 255, .84) !important;
  box-shadow: 0 10px 28px rgba(17, 24, 39, .04) !important;
}

.cart-thumb {
  width: 76px !important;
  height: 76px !important;
  border-radius: 14px !important;
  overflow: hidden !important;
  background: #eef5ef !important;
  display: grid !important;
  place-items: center !important;
}

.cart-thumb img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
}

.cart-content {
  min-width: 0 !important;
}

.cart-item-title {
  margin: 0 0 5px !important;
  color: #07140f !important;
  font-size: clamp(20px, 2.3vw, 28px) !important;
  line-height: 1 !important;
  letter-spacing: -.045em !important;
}

.cart-item-meta {
  margin: 0 0 6px !important;
  color: #0d2a1d !important;
  font-size: 13px !important;
  font-weight: 850 !important;
}

.cart-item-desc {
  margin: 0 !important;
  color: #53615a !important;
  font-size: 13px !important;
  line-height: 1.3 !important;
}

.cart-side {
  display: grid !important;
  justify-items: end !important;
  align-content: center !important;
  gap: 7px !important;
}

.cart-side > strong {
  color: #07140f !important;
  font-size: 15px !important;
  line-height: 1 !important;
  font-weight: 950 !important;
}

.cart-qty-form {
  display: grid !important;
  grid-template-columns: 52px auto !important;
  gap: 6px !important;
  align-items: end !important;
  justify-items: end !important;
}

.cart-qty-form label {
  display: grid !important;
  gap: 3px !important;
  margin: 0 !important;
}

.cart-qty-form label span {
  color: #0d2a1d !important;
  font-size: 10px !important;
  font-weight: 950 !important;
  text-transform: uppercase !important;
  letter-spacing: .04em !important;
}

.cart-qty-input {
  width: 52px !important;
  height: 36px !important;
  padding: 0 4px !important;
  border-radius: 12px !important;
  border: 1px solid rgba(17, 24, 39, .12) !important;
  background: #fff !important;
  color: #07140f !important;
  text-align: center !important;
  font-size: 14px !important;
  font-weight: 950 !important;
}

.cart-qty-button {
  min-height: 34px !important;
  padding: 0 10px !important;
  border: 0 !important;
  border-radius: 999px !important;
  background: rgba(236, 253, 245, .95) !important;
  color: #0d2a1d !important;
  font-size: 12px !important;
  font-weight: 950 !important;
  cursor: pointer !important;
}

.cart-side .link-button {
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  color: #657168 !important;
  font-size: 12px !important;
  font-weight: 850 !important;
  text-decoration: none !important;
}

.cart-side .link-button:hover {
  color: #b42318 !important;
  text-decoration: underline !important;
}

.summary {
  max-width: 420px !important;
  margin: 14px 0 0 auto !important;
  padding: 16px !important;
  border-radius: 20px !important;
  border: 1px solid rgba(17, 24, 39, .08) !important;
  background: rgba(255, 255, 255, .88) !important;
  box-shadow: 0 14px 36px rgba(17, 24, 39, .045) !important;
}

.summary p {
  margin: 0 0 12px !important;
  color: #53615a !important;
  font-size: 13px !important;
  line-height: 1.4 !important;
}

.summary div {
  display: flex !important;
  justify-content: space-between !important;
  gap: 12px !important;
  margin-bottom: 14px !important;
  color: #07140f !important;
  font-size: 17px !important;
}

.summary .button {
  width: 100% !important;
  justify-content: center !important;
  min-height: 46px !important;
}

.cart-empty-hero {
  display: grid !important;
  grid-template-columns: minmax(0, 1.15fr) minmax(250px, .85fr) !important;
  gap: clamp(22px, 4vw, 42px) !important;
  align-items: center !important;
  min-height: 430px !important;
  padding: clamp(24px, 5vw, 50px) !important;
  border-radius: 34px !important;
  border: 1px solid rgba(17, 24, 39, .08) !important;
  background:
    radial-gradient(circle at 82% 18%, rgba(61, 156, 94, .18), transparent 36%),
    linear-gradient(135deg, rgba(255,255,255,.95), rgba(239, 248, 242, .94)) !important;
  box-shadow: 0 24px 80px rgba(17, 24, 39, .075) !important;
  overflow: hidden !important;
}

.cart-empty-copy {
  max-width: 620px !important;
}

.cart-empty-kicker {
  display: inline-flex !important;
  align-items: center !important;
  min-height: 32px !important;
  padding: 0 13px !important;
  margin-bottom: 18px !important;
  border-radius: 999px !important;
  background: rgba(236, 253, 245, .96) !important;
  color: #16834a !important;
  font-size: 12px !important;
  font-weight: 950 !important;
  letter-spacing: .08em !important;
  text-transform: uppercase !important;
}

.cart-empty-copy h2 {
  max-width: 650px !important;
  margin: 0 0 16px !important;
  color: #07140f !important;
  font-size: clamp(36px, 5.8vw, 66px) !important;
  line-height: .9 !important;
  letter-spacing: -.07em !important;
}

.cart-empty-copy p {
  max-width: 580px !important;
  margin: 0 !important;
  color: #53615a !important;
  font-size: 17px !important;
  line-height: 1.55 !important;
}

.cart-empty-actions {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 12px !important;
  margin-top: 26px !important;
}

.cart-empty-actions .button {
  min-height: 50px !important;
  padding: 0 22px !important;
}

.cart-empty-trust {
  display: inline-flex !important;
  margin-top: 20px !important;
  padding: 12px 14px !important;
  border-radius: 16px !important;
  background: rgba(255, 255, 255, .78) !important;
  color: #53615a !important;
  font-size: 13px !important;
  line-height: 1.35 !important;
}

.cart-empty-visual {
  position: relative !important;
  display: grid !important;
  place-items: center !important;
  min-height: 330px !important;
  border-radius: 30px !important;
  background:
    radial-gradient(circle at 50% 20%, rgba(255,255,255,.96), rgba(236, 253, 245, .62)) !important;
  text-decoration: none !important;
  box-shadow: inset 0 0 0 1px rgba(17, 24, 39, .06), 0 18px 50px rgba(17, 24, 39, .08) !important;
  overflow: hidden !important;
}

.cart-empty-visual img {
  width: min(82%, 280px) !important;
  height: auto !important;
  max-height: 270px !important;
  object-fit: contain !important;
  filter: drop-shadow(0 22px 30px rgba(17,24,39,.18)) !important;
  transform: rotate(-2deg) !important;
}

.cart-empty-visual span {
  position: absolute !important;
  left: 18px !important;
  right: 18px !important;
  bottom: 18px !important;
  min-height: 44px !important;
  display: grid !important;
  place-items: center !important;
  border-radius: 999px !important;
  background: #0f1f18 !important;
  color: #fff !important;
  font-size: 14px !important;
  font-weight: 950 !important;
}

@media (max-width: 820px) {
  .cart-empty-hero {
    grid-template-columns: 1fr !important;
  }

  .cart-empty-visual {
    min-height: 280px !important;
  }

  .cart-item {
    grid-template-columns: 66px minmax(0, 1fr) !important;
    gap: 12px !important;
  }

  .cart-thumb {
    width: 66px !important;
    height: 66px !important;
  }

  .cart-side {
    grid-column: 1 / -1 !important;
    grid-template-columns: 1fr auto !important;
    align-items: center !important;
  }

  .cart-side > strong {
    justify-self: start !important;
  }

  .cart-qty-form {
    grid-template-columns: 52px auto !important;
  }

  .summary {
    max-width: none !important;
  }
}

@media (max-width: 540px) {
  .cart-empty-actions {
    display: grid !important;
    grid-template-columns: 1fr !important;
  }

  .cart-side {
    grid-template-columns: 1fr !important;
    justify-items: stretch !important;
  }

  .cart-qty-form {
    grid-template-columns: 1fr auto !important;
    justify-items: stretch !important;
  }
}

/* TavaWear cart slim final v20260614 */
.cart-page {
  padding-top: 36px !important;
}

.cart-page .page-width {
  max-width: 980px !important;
}

.cart-page h1 {
  margin: 0 0 18px !important;
  font-size: clamp(36px, 5vw, 52px) !important;
  line-height: .95 !important;
  letter-spacing: -.06em !important;
}

.cart-list {
  display: grid !important;
  gap: 8px !important;
}

.cart-item {
  display: grid !important;
  grid-template-columns: 58px minmax(0, 1fr) 190px !important;
  gap: 12px !important;
  align-items: center !important;
  min-height: 0 !important;
  padding: 10px 12px !important;
  border-radius: 16px !important;
  border: 1px solid rgba(17, 24, 39, .075) !important;
  background: rgba(255, 255, 255, .88) !important;
  box-shadow: 0 8px 22px rgba(17, 24, 39, .035) !important;
}

.cart-thumb {
  width: 58px !important;
  height: 58px !important;
  border-radius: 12px !important;
  overflow: hidden !important;
  background: #eef5ef !important;
}

.cart-thumb img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
}

.cart-item-title {
  margin: 0 0 5px !important;
  font-size: clamp(19px, 2.2vw, 25px) !important;
  line-height: 1 !important;
  letter-spacing: -.045em !important;
}

.cart-item-meta {
  display: inline-flex !important;
  width: fit-content !important;
  margin: 0 0 6px !important;
  padding: 4px 9px !important;
  border-radius: 999px !important;
  background: rgba(236, 253, 245, .95) !important;
  color: #0d2a1d !important;
  font-size: 12px !important;
  font-weight: 900 !important;
  line-height: 1.1 !important;
}

.cart-item-desc {
  margin: 0 !important;
  color: #53615a !important;
  font-size: 12px !important;
  line-height: 1.25 !important;
}

.cart-content .properties {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 6px 14px !important;
  margin: 7px 0 0 !important;
  padding: 0 !important;
}

.cart-content .properties dt,
.cart-content .properties dd {
  margin: 0 !important;
  padding: 0 !important;
  font-size: 12px !important;
  line-height: 1.2 !important;
}

.cart-content .properties dt {
  color: #526058 !important;
  font-weight: 950 !important;
}

.cart-content .properties dd {
  color: #07140f !important;
  font-weight: 750 !important;
}

.cart-content .properties dd a {
  color: #0d2a1d !important;
  font-weight: 900 !important;
}

.cart-side {
  display: grid !important;
  grid-template-columns: auto auto auto !important;
  gap: 8px !important;
  align-items: center !important;
  justify-content: end !important;
}

.cart-side > strong {
  min-width: 78px !important;
  color: #07140f !important;
  font-size: 14px !important;
  font-weight: 950 !important;
  text-align: right !important;
  line-height: 1 !important;
}

.cart-qty-form {
  display: grid !important;
  grid-template-columns: 46px auto !important;
  gap: 6px !important;
  align-items: center !important;
}

.cart-qty-form label {
  display: block !important;
  margin: 0 !important;
}

.cart-qty-form label span {
  display: none !important;
}

.cart-qty-input {
  width: 46px !important;
  height: 34px !important;
  padding: 0 3px !important;
  border-radius: 11px !important;
  border: 1px solid rgba(17, 24, 39, .12) !important;
  background: #fff !important;
  color: #07140f !important;
  text-align: center !important;
  font-size: 13px !important;
  font-weight: 950 !important;
}

.cart-qty-button {
  height: 34px !important;
  min-height: 34px !important;
  padding: 0 10px !important;
  border: 0 !important;
  border-radius: 999px !important;
  background: rgba(236, 253, 245, .95) !important;
  color: #0d2a1d !important;
  font-size: 12px !important;
  font-weight: 950 !important;
  cursor: pointer !important;
}

.cart-side form:last-child {
  margin: 0 !important;
}

.cart-side .link-button {
  height: 34px !important;
  padding: 0 6px !important;
  border: 0 !important;
  background: transparent !important;
  color: #68736b !important;
  font-size: 12px !important;
  font-weight: 850 !important;
  text-decoration: none !important;
  cursor: pointer !important;
}

.cart-side .link-button:hover {
  color: #b42318 !important;
  text-decoration: underline !important;
}

.summary {
  max-width: 360px !important;
  margin: 12px 0 0 auto !important;
  padding: 14px !important;
  border-radius: 18px !important;
  border: 1px solid rgba(17, 24, 39, .075) !important;
  background: rgba(255, 255, 255, .9) !important;
  box-shadow: 0 10px 26px rgba(17, 24, 39, .04) !important;
}

.summary p {
  margin: 0 0 6px !important;
  color: #53615a !important;
  font-size: 12px !important;
  line-height: 1.35 !important;
}

.summary div {
  display: flex !important;
  justify-content: space-between !important;
  gap: 12px !important;
  margin-bottom: 12px !important;
  color: #07140f !important;
  font-size: 16px !important;
}

.summary .button {
  width: 100% !important;
  min-height: 42px !important;
  justify-content: center !important;
}

/* Empty cart CTA, forced final */
.cart-empty-hero {
  display: grid !important;
  grid-template-columns: minmax(0, 1.08fr) minmax(240px, .92fr) !important;
  gap: 32px !important;
  align-items: center !important;
  min-height: 420px !important;
  padding: 42px !important;
  border-radius: 34px !important;
  border: 1px solid rgba(17, 24, 39, .08) !important;
  background:
    radial-gradient(circle at 80% 18%, rgba(61,156,94,.18), transparent 34%),
    linear-gradient(135deg, rgba(255,255,255,.96), rgba(239,248,242,.94)) !important;
  box-shadow: 0 24px 80px rgba(17, 24, 39, .075) !important;
}

.cart-empty-kicker {
  display: inline-flex !important;
  min-height: 31px !important;
  align-items: center !important;
  padding: 0 13px !important;
  margin-bottom: 16px !important;
  border-radius: 999px !important;
  background: rgba(236,253,245,.96) !important;
  color: #16834a !important;
  font-size: 12px !important;
  font-weight: 950 !important;
  letter-spacing: .08em !important;
  text-transform: uppercase !important;
}

.cart-empty-copy h2 {
  margin: 0 0 14px !important;
  color: #07140f !important;
  font-size: clamp(36px, 5.5vw, 62px) !important;
  line-height: .9 !important;
  letter-spacing: -.07em !important;
}

.cart-empty-copy p {
  margin: 0 !important;
  max-width: 560px !important;
  color: #53615a !important;
  font-size: 16px !important;
  line-height: 1.55 !important;
}

.cart-empty-actions {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 12px !important;
  margin-top: 24px !important;
}

.cart-empty-actions .button {
  min-height: 48px !important;
  padding: 0 22px !important;
}

.cart-empty-trust {
  margin-top: 18px !important;
  padding: 12px 14px !important;
  border-radius: 16px !important;
  background: rgba(255,255,255,.78) !important;
  color: #53615a !important;
  font-size: 13px !important;
}

.cart-empty-visual {
  position: relative !important;
  display: grid !important;
  place-items: center !important;
  min-height: 310px !important;
  border-radius: 30px !important;
  background: radial-gradient(circle at 50% 20%, rgba(255,255,255,.96), rgba(236,253,245,.62)) !important;
  text-decoration: none !important;
  box-shadow: inset 0 0 0 1px rgba(17,24,39,.06), 0 18px 50px rgba(17,24,39,.08) !important;
  overflow: hidden !important;
}

.cart-empty-visual img {
  width: min(82%, 270px) !important;
  max-height: 260px !important;
  object-fit: contain !important;
  filter: drop-shadow(0 22px 30px rgba(17,24,39,.18)) !important;
  transform: rotate(-2deg) !important;
}

.cart-empty-visual span {
  position: absolute !important;
  left: 18px !important;
  right: 18px !important;
  bottom: 18px !important;
  min-height: 44px !important;
  display: grid !important;
  place-items: center !important;
  border-radius: 999px !important;
  background: #0f1f18 !important;
  color: #fff !important;
  font-size: 14px !important;
  font-weight: 950 !important;
}

@media (max-width: 900px) {
  .cart-item {
    grid-template-columns: 58px minmax(0, 1fr) !important;
  }

  .cart-side {
    grid-column: 1 / -1 !important;
    grid-template-columns: 1fr auto auto !important;
    justify-content: stretch !important;
  }

  .cart-side > strong {
    justify-self: start !important;
    text-align: left !important;
  }

  .cart-empty-hero {
    grid-template-columns: 1fr !important;
    padding: 28px !important;
  }
}

/* TavaWear account design cart feedback v20260614 */
.vaccount-design-feedback {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 14px;
  align-items: center;
  margin: 0 0 18px;
  padding: 14px 16px;
  border-radius: 18px;
  border: 1px solid rgba(17, 24, 39, .08);
  background: rgba(255, 255, 255, .86);
  box-shadow: 0 14px 36px rgba(17, 24, 39, .045);
}

.vaccount-design-feedback strong {
  display: block;
  margin: 0 0 3px;
  color: #07140f;
  font-size: 15px;
  font-weight: 950;
}

.vaccount-design-feedback span {
  display: block;
  color: #53615a;
  font-size: 13px;
  line-height: 1.4;
}

.vaccount-design-feedback--success {
  border-color: rgba(22, 163, 74, .24);
  background: rgba(236, 253, 245, .86);
}

.vaccount-design-feedback--error {
  border-color: rgba(180, 35, 24, .22);
  background: rgba(254, 242, 242, .9);
}

@media (max-width: 620px) {
  .vaccount-design-feedback {
    grid-template-columns: 1fr;
  }

  .vaccount-design-feedback .button {
    width: 100%;
    justify-content: center;
  }
}

/* TavaWear block guest draft saving v20260614 */
.designer-save-row .designer-login-save {
  justify-content: center;
}

.designer-save-login-note {
  display: inline-flex;
  align-items: center;
  color: #53615a;
  font-size: 13px;
  font-weight: 750;
  line-height: 1.35;
}

/* TavaWear guest save button UI v20260614 */
.designer-save-row {
  align-items: center;
}

.designer-save-row .designer-login-save {
  justify-content: center;
}

.designer-save-login-note {
  display: inline-flex;
  align-items: center;
  color: #53615a;
  font-size: 13px;
  font-weight: 750;
  line-height: 1.35;
}

/* TavaWear guest DIY cart without draft save v20260614 */
.designer-save-row {
  align-items: center;
}

.designer-save-row .designer-login-save {
  justify-content: center;
}

.designer-save-login-note {
  display: inline-flex;
  align-items: center;
  color: #53615a;
  font-size: 13px;
  font-weight: 750;
  line-height: 1.35;
}

/* TavaWear checkout login required v20260614 */
.checkout-login-required-card {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 24px;
  align-items: center;
  margin: 0 0 24px;
  padding: clamp(22px, 4vw, 34px);
  border-radius: 28px;
  border: 1px solid rgba(17, 24, 39, .08);
  background:
    radial-gradient(circle at 92% 18%, rgba(61, 156, 94, .16), transparent 34%),
    linear-gradient(135deg, rgba(255,255,255,.95), rgba(239,248,242,.94));
  box-shadow: 0 20px 60px rgba(17, 24, 39, .065);
}

.checkout-login-required-card span {
  display: inline-flex;
  align-items: center;
  min-height: 30px;
  padding: 0 12px;
  margin-bottom: 14px;
  border-radius: 999px;
  background: rgba(236, 253, 245, .96);
  color: #16834a;
  font-size: 12px;
  font-weight: 950;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.checkout-login-required-card h2 {
  max-width: 620px;
  margin: 0 0 10px;
  color: #07140f;
  font-size: clamp(30px, 4.6vw, 50px);
  line-height: .96;
  letter-spacing: -.06em;
}

.checkout-login-required-card p {
  max-width: 560px;
  margin: 0;
  color: #53615a;
  font-size: 15px;
  line-height: 1.5;
}

.checkout-login-required-actions {
  display: grid;
  gap: 10px;
  min-width: 210px;
}

.checkout-login-required-actions .button {
  width: 100%;
  justify-content: center;
}

@media (max-width: 760px) {
  .checkout-login-required-card {
    grid-template-columns: 1fr;
  }

  .checkout-login-required-actions {
    min-width: 0;
  }
}

/* TavaWear draft limits and delete v20260614 */
.vaccount-design-quota {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  margin: 0 0 18px;
  padding: 13px 15px;
  border-radius: 18px;
  border: 1px solid rgba(17, 24, 39, .08);
  background: rgba(236, 253, 245, .72);
}

.vaccount-design-quota strong {
  display: block;
  margin: 0 0 3px;
  color: #07140f;
  font-size: 14px;
  font-weight: 950;
}

.vaccount-design-quota span {
  display: block;
  color: #53615a;
  font-size: 12px;
  font-weight: 800;
}

.vaccount-design-quota em {
  display: inline-flex;
  align-items: center;
  min-height: 30px;
  padding: 0 12px;
  border-radius: 999px;
  background: #0f1f18;
  color: #fff;
  font-size: 12px;
  font-style: normal;
  font-weight: 950;
  white-space: nowrap;
}

.button.danger-soft,
button.danger-soft {
  background: rgba(254, 242, 242, .95) !important;
  color: #b42318 !important;
  border: 1px solid rgba(180, 35, 24, .18) !important;
}

.button.danger-soft:hover,
button.danger-soft:hover {
  background: #b42318 !important;
  color: #fff !important;
}

@media (max-width: 620px) {
  .vaccount-design-quota {
    align-items: flex-start;
    flex-direction: column;
  }
}

/* TavaWear premium customer status v20260614 */
.vcustomer-card em.is-premium,
.vcustomer-detail-head em.is-premium,
.vcustomer-order-main em.is-premium,
.vcustomer-order-money em.is-premium {
  background: rgba(236, 253, 245, .96) !important;
  color: #16834a !important;
  border: 1px solid rgba(22, 163, 74, .22) !important;
}

.vcustomer-field-note {
  display: block;
  margin-top: 7px;
  color: #53615a;
  font-size: 12px;
  font-weight: 750;
  line-height: 1.35;
}

/* Admin order delete button */
.admin-order-delete-form {
    display: inline-flex !important;
    margin-left: 10px !important;
}

.admin-delete-order-button {
    background: #b42318 !important;
    color: #ffffff !important;
    border-color: #b42318 !important;
}

.admin-delete-order-button:hover {
    background: #8f1d15 !important;
    border-color: #8f1d15 !important;
}

/* Final override: red delete order button */
.admin-order-delete-form .admin-delete-order-button,
.admin-order-toolbar .admin-order-delete-form .admin-delete-order-button,
button.admin-delete-order-button {
    background: #b42318 !important;
    border: 1px solid #b42318 !important;
    color: #ffffff !important;
    box-shadow: 0 10px 20px rgba(180, 35, 24, .18) !important;
}

.admin-order-delete-form .admin-delete-order-button:hover,
.admin-order-toolbar .admin-order-delete-form .admin-delete-order-button:hover,
button.admin-delete-order-button:hover {
    background: #8f1d15 !important;
    border-color: #8f1d15 !important;
    color: #ffffff !important;
}

/* TavaWear delete order modal */
.tw-modal-open {
    overflow: hidden;
}

.tw-delete-modal {
    position: fixed;
    inset: 0;
    z-index: 999999;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 24px;
}

.tw-delete-modal.is-open {
    display: flex;
}

.tw-delete-modal-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(7, 17, 11, .42);
    backdrop-filter: blur(10px);
}

.tw-delete-modal-card {
    position: relative;
    width: min(440px, 100%);
    display: grid;
    gap: 18px;
    padding: 24px;
    border-radius: 28px;
    background: #fffdf8;
    border: 1px solid rgba(180, 35, 24, .16);
    box-shadow: 0 30px 80px rgba(7, 17, 11, .24);
}

.tw-delete-modal-icon {
    width: 44px;
    height: 44px;
    display: grid;
    place-items: center;
    border-radius: 999px;
    background: rgba(180, 35, 24, .10);
    color: #b42318;
    font-size: 24px;
    font-weight: 950;
}

.tw-delete-modal-content {
    display: grid;
    gap: 8px;
}

.tw-delete-modal-kicker {
    margin: 0;
    color: #b42318;
    font-size: 12px;
    font-weight: 950;
    letter-spacing: .10em;
    text-transform: uppercase;
}

.tw-delete-modal-content h2 {
    margin: 0;
    color: #07110b;
    font-size: 24px;
    line-height: 1.12;
}

.tw-delete-modal-content p {
    margin: 0;
    color: rgba(7, 17, 11, .68);
    font-size: 14px;
    line-height: 1.55;
}

.tw-delete-modal-actions {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    padding-top: 4px;
}

.tw-delete-modal-confirm {
    background: #b42318 !important;
    border-color: #b42318 !important;
    color: #ffffff !important;
    box-shadow: 0 14px 28px rgba(180, 35, 24, .20) !important;
}

.tw-delete-modal-confirm:hover {
    background: #8f1d15 !important;
    border-color: #8f1d15 !important;
    color: #ffffff !important;
}

/* TavaWear compact separated order/payment status v20260614 */
.admin-order-row-expandable {
  border-radius: 24px !important;
  overflow: hidden;
}

.admin-order-summary {
  min-height: 58px !important;
  padding: 16px 20px !important;
}

.admin-order-expanded {
  padding: 14px 18px 18px !important;
}

.admin-order-toolbar {
  min-height: 48px !important;
  padding: 10px 0 14px !important;
  gap: 12px !important;
}

.admin-order-expanded-grid {
  grid-template-columns: 1fr 1fr 1fr !important;
  gap: 14px !important;
}

.admin-order-expanded-grid > section {
  padding: 18px !important;
  border-radius: 20px !important;
}

.admin-payment-panel-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
}

.admin-payment-panel-head h4 {
  margin: 0;
}

.admin-payment-status-form {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 9px;
  margin: 0 0 12px;
}

.admin-payment-status-form select,
.admin-order-status-form select {
  min-height: 42px !important;
  border-radius: 16px !important;
}

.admin-payment-badge {
  display: inline-flex;
  align-items: center;
  min-height: 28px;
  padding: 0 10px;
  border-radius: 999px;
  background: rgba(234, 179, 8, .18);
  color: #8a5a00;
  font-size: 12px;
  font-weight: 900;
  text-transform: none;
}

.admin-payment-badge.payment-status-paid {
  background: rgba(34, 197, 94, .16);
  color: #15803d;
}

.admin-payment-badge.payment-status-partly_paid {
  background: rgba(59, 130, 246, .14);
  color: #1d4ed8;
}

.admin-payment-badge.payment-status-refunded {
  background: rgba(100, 116, 139, .14);
  color: #475569;
}

.admin-payment-badge.payment-status-failed {
  background: rgba(239, 68, 68, .14);
  color: #b91c1c;
}

@media (max-width: 980px) {
  .admin-order-expanded-grid {
    grid-template-columns: 1fr !important;
  }
}

/* TavaWear admin orders slim layout repair v20260614 */
.admin-order-row-expandable {
  border-radius: 18px !important;
  margin-bottom: 12px !important;
}

.admin-order-summary {
  position: relative !important;
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto !important;
  align-items: center !important;
  gap: 16px !important;
  min-height: 48px !important;
  padding: 12px 18px 12px 54px !important;
}

.admin-order-summary::before {
  left: 20px !important;
  top: 50% !important;
  margin: 0 !important;
  transform: translateY(-50%) !important;
}

.admin-order-row-expandable[open] > .admin-order-summary::before {
  transform: translateY(-50%) rotate(90deg) !important;
}

.admin-order-main,
.admin-order-main-top {
  min-width: 0 !important;
}

.admin-order-main-top {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  flex-wrap: nowrap !important;
}

.admin-order-main h3 {
  margin: 0 !important;
  max-width: none !important;
  overflow: visible !important;
  white-space: nowrap !important;
  font-size: 15px !important;
  line-height: 1.2 !important;
  letter-spacing: -.02em !important;
}

.admin-order-meta {
  display: flex !important;
  align-items: center !important;
  justify-content: flex-end !important;
  gap: 14px !important;
  min-width: 320px !important;
}

.admin-order-meta p {
  margin: 0 !important;
  white-space: nowrap !important;
  font-size: 13px !important;
}

.admin-order-meta strong {
  font-size: 17px !important;
  white-space: nowrap !important;
}

.order-status-badge {
  min-height: 24px !important;
  padding: 0 10px !important;
  border-radius: 999px !important;
  font-size: 11px !important;
  line-height: 1 !important;
}

.admin-order-expanded {
  padding: 10px 18px 16px !important;
}

.admin-order-toolbar {
  display: flex !important;
  align-items: center !important;
  min-height: 0 !important;
  padding: 8px 0 12px !important;
  gap: 10px !important;
}

.admin-order-toolbar-label {
  min-width: 155px !important;
  font-size: 13px !important;
}

.admin-order-status-form {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
}

.admin-order-status-form select {
  width: 170px !important;
  min-height: 36px !important;
  height: 36px !important;
  border-radius: 14px !important;
  font-size: 13px !important;
}

.admin-order-status-form .button,
.admin-order-delete-form .button {
  min-height: 36px !important;
  height: 36px !important;
  padding: 0 14px !important;
  border-radius: 14px !important;
  font-size: 13px !important;
}

.admin-order-expanded-grid {
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(280px, .85fr) !important;
  gap: 12px !important;
}

.admin-order-expanded-grid > section {
  min-height: 0 !important;
  padding: 14px 16px !important;
  border-radius: 18px !important;
}

.admin-order-expanded-grid h4 {
  margin: 0 0 6px !important;
  font-size: 12px !important;
}

.admin-order-expanded-grid p {
  margin: 0 !important;
  line-height: 1.45 !important;
}

.admin-payment-panel-head {
  margin-bottom: 8px !important;
}

.admin-payment-badge {
  min-height: 22px !important;
  padding: 0 8px !important;
  font-size: 11px !important;
}

.admin-payment-status-form {
  display: flex !important;
  grid-template-columns: none !important;
  align-items: center !important;
  gap: 8px !important;
  margin: 0 0 8px !important;
}

.admin-payment-status-form select {
  flex: 1 1 auto !important;
  width: auto !important;
  min-height: 34px !important;
  height: 34px !important;
  border-radius: 13px !important;
  padding: 0 32px 0 12px !important;
  font-size: 13px !important;
}

.admin-payment-status-form .button {
  flex: 0 0 auto !important;
  width: auto !important;
  min-width: 128px !important;
  min-height: 34px !important;
  height: 34px !important;
  padding: 0 12px !important;
  border-radius: 13px !important;
  font-size: 12px !important;
  white-space: nowrap !important;
}

.admin-payment-lines {
  display: grid !important;
  gap: 6px !important;
  margin: 0 !important;
  font-size: 13px !important;
}

.admin-payment-total {
  margin-top: 2px !important;
}

.admin-order-expanded-items {
  margin-top: 12px !important;
}

.admin-order-expanded-item {
  padding: 14px 16px !important;
}

@media (max-width: 980px) {
  .admin-order-summary {
    grid-template-columns: 1fr !important;
    gap: 8px !important;
    padding-left: 54px !important;
  }

  .admin-order-meta {
    justify-content: flex-start !important;
    min-width: 0 !important;
  }

  .admin-order-expanded-grid {
    grid-template-columns: 1fr !important;
  }

  .admin-payment-status-form,
  .admin-order-status-form {
    flex-wrap: wrap !important;
  }
}

/* TavaWear admin order toolbar delete separation v20260614 */
.admin-order-toolbar {
  display: grid !important;
  grid-template-columns: auto minmax(260px, 420px) minmax(80px, 1fr) auto !important;
  align-items: center !important;
  column-gap: 14px !important;
  row-gap: 10px !important;
  padding: 10px 0 14px !important;
}

.admin-order-toolbar-label {
  grid-column: 1 !important;
  min-width: 145px !important;
  white-space: nowrap !important;
}

.admin-order-status-form {
  grid-column: 2 !important;
  justify-self: start !important;
}

.admin-order-delete-form {
  grid-column: 4 !important;
  justify-self: end !important;
  margin-left: 28px !important;
  padding-left: 28px !important;
  border-left: 1px solid rgba(185, 28, 28, .14) !important;
}

.admin-order-delete-form .admin-delete-order-button {
  min-width: 160px !important;
}

@media (max-width: 900px) {
  .admin-order-toolbar {
    grid-template-columns: 1fr !important;
  }

  .admin-order-toolbar-label,
  .admin-order-status-form,
  .admin-order-delete-form {
    grid-column: 1 !important;
    justify-self: stretch !important;
  }

  .admin-order-delete-form {
    margin-left: 0 !important;
    padding-left: 0 !important;
    padding-top: 10px !important;
    border-left: 0 !important;
    border-top: 1px solid rgba(185, 28, 28, .14) !important;
  }

  .admin-order-delete-form .admin-delete-order-button {
    width: 100% !important;
  }
}

/* TavaWear cancel individual order items and payment slim v20260614 */
.admin-payment-status-form {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto !important;
  align-items: center !important;
  gap: 8px !important;
}

.admin-payment-status-form .button {
  min-width: 86px !important;
  height: 34px !important;
  min-height: 34px !important;
  padding: 0 11px !important;
  border-radius: 12px !important;
  font-size: 12px !important;
  background: rgba(236, 253, 245, .92) !important;
  color: #16834a !important;
  border: 1px solid rgba(22, 163, 74, .18) !important;
  box-shadow: none !important;
}

.admin-payment-status-form .button:hover {
  background: #16834a !important;
  color: #fff !important;
}

.admin-order-expanded-item.is-cancelled {
  opacity: .68;
  background: rgba(248, 250, 252, .86) !important;
}

.admin-order-expanded-item.is-cancelled strong,
.admin-order-expanded-item.is-cancelled span {
  color: #64748b !important;
}

.admin-order-expanded-side .is-cancelled-price {
  text-decoration: line-through;
  color: #94a3b8 !important;
}

.admin-order-item-cancelled-note {
  display: block;
  margin-top: 5px;
  color: #b42318 !important;
  font-size: 12px;
  font-style: normal;
  font-weight: 850;
}

.admin-order-item-status {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  padding: 0 9px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 950;
}

.admin-order-item-status.is-cancelled {
  background: rgba(254, 242, 242, .95);
  color: #b42318;
  border: 1px solid rgba(180, 35, 24, .18);
}

.admin-order-item-action-form {
  margin: 0;
}

.admin-order-item-action-form .button {
  min-height: 32px !important;
  height: 32px !important;
  padding: 0 11px !important;
  border-radius: 12px !important;
  font-size: 12px !important;
  box-shadow: none !important;
}

.button.danger-soft,
button.danger-soft {
  background: rgba(254, 242, 242, .95) !important;
  color: #b42318 !important;
  border: 1px solid rgba(180, 35, 24, .18) !important;
}

.button.danger-soft:hover,
button.danger-soft:hover {
  background: #b42318 !important;
  color: #fff !important;
}

/* TavaWear admin orders dashboard overview v20260614 */
.admin-orders-dashboard {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
  margin: 0 0 18px;
}

.admin-orders-kpi {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  min-height: 86px;
  padding: 13px 14px;
  border-radius: 18px;
  border: 1px solid rgba(17, 24, 39, .08);
  background: rgba(255, 255, 255, .84);
  color: #0f1f18;
  text-decoration: none;
  box-shadow: 0 14px 34px rgba(15, 31, 24, .045);
}

.admin-orders-kpi:hover,
.admin-orders-kpi.is-active {
  border-color: rgba(22, 163, 74, .32);
  background: rgba(236, 253, 245, .95);
  transform: translateY(-1px);
}

.admin-orders-kpi span {
  color: #53615a;
  font-size: 11px;
  font-weight: 950;
  letter-spacing: .075em;
  text-transform: uppercase;
}

.admin-orders-kpi strong {
  margin-top: 6px;
  color: #07140f;
  font-size: 24px;
  font-weight: 950;
  line-height: 1;
  letter-spacing: -.04em;
}

.admin-orders-kpi em {
  margin-top: 8px;
  color: #66746d;
  font-size: 12px;
  font-style: normal;
  font-weight: 800;
}

.admin-orders-kpi.is-primary {
  background: linear-gradient(135deg, rgba(236, 253, 245, .98), rgba(255, 255, 255, .9));
}

.admin-orders-kpi.is-payment strong {
  color: #8a5a00;
}

.admin-orders-kpi.is-money strong {
  color: #16834a;
  font-size: 21px;
}

@media (max-width: 1100px) {
  .admin-orders-dashboard {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 620px) {
  .admin-orders-dashboard {
    grid-template-columns: 1fr;
  }
}

/* TavaWear tighten admin order list spacing v20260614 */
.admin-order-row,
.admin-order-row-expandable {
  margin: 0 0 6px !important;
}

.admin-order-row:last-child,
.admin-order-row-expandable:last-child {
  margin-bottom: 0 !important;
}

.admin-order-summary {
  min-height: auto;
  padding-top: 14px !important;
  padding-bottom: 14px !important;
}

.admin-order-expanded {
  margin-top: 8px !important;
}

/* TavaWear customer payment/order overview v20260614 */
.vcustomer-payment-overview {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
  margin: 0 0 18px;
}

.vcustomer-payment-overview article {
  min-height: 78px;
  padding: 13px 14px;
  border-radius: 18px;
  border: 1px solid rgba(17, 24, 39, .08);
  background: rgba(255, 255, 255, .86);
  box-shadow: 0 12px 28px rgba(15, 31, 24, .045);
}

.vcustomer-payment-overview span {
  display: block;
  color: #53615a;
  font-size: 11px;
  font-weight: 950;
  letter-spacing: .075em;
  text-transform: uppercase;
}

.vcustomer-payment-overview strong {
  display: block;
  margin-top: 7px;
  color: #07140f;
  font-size: 24px;
  font-weight: 950;
  line-height: 1;
  letter-spacing: -.04em;
}

.vcustomer-payment-overview em {
  display: block;
  margin-top: 8px;
  color: #66746d;
  font-size: 12px;
  font-style: normal;
  font-weight: 850;
}

.vcustomer-payment-overview .is-paid strong {
  color: #16834a;
}

.vcustomer-payment-overview .is-open strong {
  color: #8a5a00;
}

.vcustomer-payment-overview .is-cancelled strong {
  color: #b42318;
}

.vcustomer-order-badge-line {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin-top: 4px;
}

.vcustomer-order-badge-line small {
  color: #66746d;
  font-size: 11px;
  font-weight: 850;
}

.vcustomer-order-main,
.vcustomer-order-money {
  display: grid;
  gap: 4px;
}

@media (max-width: 900px) {
  .vcustomer-payment-overview {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 560px) {
  .vcustomer-payment-overview {
    grid-template-columns: 1fr;
  }

  .vcustomer-order-badge-line {
    align-items: flex-start;
    flex-direction: column;
    gap: 4px;
  }
}

/* TavaWear clean customer account overview v20260614 */
.vaccount-main-stack {
  gap: 16px !important;
}

.vaccount-designs-card,
.vaccount-orders-card {
  padding: 22px !important;
  border-radius: 22px !important;
}

.vaccount-section-head {
  margin-bottom: 14px !important;
  padding-bottom: 14px !important;
}

.vaccount-section-head h2,
.vaccount-orders-card > h2 {
  font-size: 28px !important;
  line-height: 1 !important;
  letter-spacing: -.05em !important;
}

.vaccount-section-head p {
  max-width: 420px !important;
  font-size: 13px !important;
  line-height: 1.35 !important;
}

.vaccount-design-quota {
  margin-bottom: 12px !important;
  padding: 10px 12px !important;
  border-radius: 15px !important;
}

.vaccount-design-quota strong {
  font-size: 13px !important;
}

.vaccount-design-quota span,
.vaccount-design-quota em {
  font-size: 11px !important;
}

.vaccount-design-grid {
  gap: 10px !important;
}

.vaccount-design-card {
  display: grid !important;
  grid-template-columns: 62px minmax(0, 1fr) !important;
  gap: 12px !important;
  min-height: 0 !important;
  padding: 10px !important;
  border-radius: 16px !important;
}

.vaccount-design-preview {
  width: 62px !important;
  min-width: 62px !important;
  height: 62px !important;
  border-radius: 13px !important;
}

.vaccount-design-body {
  gap: 8px !important;
  min-width: 0 !important;
}

.vaccount-design-body > div:first-child strong {
  font-size: 15px !important;
  line-height: 1.15 !important;
}

.vaccount-design-body > div:first-child span {
  font-size: 12px !important;
}

.vaccount-design-body dl {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 6px !important;
  margin: 0 !important;
}

.vaccount-design-body dl div {
  min-width: 92px !important;
  padding: 6px 8px !important;
  border-radius: 10px !important;
}

.vaccount-design-body dt {
  font-size: 9px !important;
}

.vaccount-design-body dd {
  font-size: 11px !important;
}

.vaccount-design-actions {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 6px !important;
  justify-content: flex-end !important;
}

.vaccount-design-actions .button,
.vaccount-design-actions button.button {
  min-height: 30px !important;
  padding: 0 11px !important;
  border-radius: 999px !important;
  font-size: 11px !important;
}

.vaccount-orders-card {
  display: grid !important;
  gap: 12px !important;
}

.vaccount-orders-card > h2 {
  margin-bottom: 0 !important;
}

.vaccount-orders {
  display: grid !important;
  gap: 8px !important;
}

.vaccount-order {
  border-radius: 16px !important;
  overflow: hidden !important;
  background: rgba(255,255,255,.88) !important;
  border: 1px solid rgba(17,24,39,.08) !important;
  box-shadow: none !important;
}

.vaccount-order-summary--clean {
  display: grid !important;
  grid-template-columns: minmax(0, 1.35fr) minmax(230px, .9fr) auto 24px !important;
  gap: 12px !important;
  align-items: center !important;
  width: 100% !important;
  min-height: 54px !important;
  padding: 11px 13px !important;
  text-align: left !important;
  background: transparent !important;
}

.vaccount-order-title {
  display: grid !important;
  gap: 3px !important;
  min-width: 0 !important;
}

.vaccount-order-title strong {
  overflow: hidden !important;
  color: #07140f !important;
  font-size: 14px !important;
  font-weight: 950 !important;
  line-height: 1.15 !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

.vaccount-order-title span {
  color: #66746d !important;
  font-size: 11px !important;
  font-weight: 750 !important;
}

.vaccount-order-statuses {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 6px !important;
  justify-content: flex-start !important;
}

.vaccount-order-statuses > span {
  display: inline-flex !important;
  align-items: center !important;
  gap: 5px !important;
  min-width: 0 !important;
}

.vaccount-order-statuses small {
  color: #66746d !important;
  font-size: 10px !important;
  font-weight: 850 !important;
}

.vaccount-order-statuses em {
  display: inline-flex !important;
  align-items: center !important;
  min-height: 22px !important;
  padding: 0 8px !important;
  border-radius: 999px !important;
  font-size: 10px !important;
  font-style: normal !important;
  font-weight: 950 !important;
  white-space: nowrap !important;
}

.vaccount-order-total {
  color: #07140f !important;
  font-size: 14px !important;
  font-weight: 950 !important;
  white-space: nowrap !important;
}

.vaccount-order-detail {
  display: none !important;
  grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr) !important;
  gap: 10px !important;
  padding: 10px 12px 12px !important;
  border-top: 1px solid rgba(17,24,39,.08) !important;
  background: rgba(247,250,248,.72) !important;
}

.vaccount-order.is-open .vaccount-order-detail {
  display: grid !important;
}

.vaccount-order-detail section {
  padding: 10px !important;
  border-radius: 13px !important;
  background: rgba(255,255,255,.72) !important;
  border: 1px solid rgba(17,24,39,.06) !important;
}

.vaccount-order-detail h3 {
  margin: 0 0 8px !important;
  font-size: 10px !important;
  letter-spacing: .08em !important;
}

.vaccount-order-detail address,
.vaccount-order-detail p {
  font-size: 12px !important;
  line-height: 1.35 !important;
}

.vaccount-items {
  gap: 6px !important;
}

.vaccount-item {
  padding: 8px 9px !important;
  border-radius: 10px !important;
}

.vaccount-item strong {
  font-size: 12px !important;
}

.vaccount-item span,
.vaccount-item small {
  font-size: 11px !important;
}

.vaccount-total {
  padding: 8px 9px !important;
  border-radius: 10px !important;
}

@media (max-width: 760px) {
  .vaccount-order-summary--clean {
    grid-template-columns: 1fr 24px !important;
  }

  .vaccount-order-statuses,
  .vaccount-order-total {
    grid-column: 1 / -1 !important;
  }

  .vaccount-order-detail,
  .vaccount-order.is-open .vaccount-order-detail {
    grid-template-columns: 1fr !important;
  }

  .vaccount-design-card {
    grid-template-columns: 56px minmax(0, 1fr) !important;
  }

  .vaccount-design-preview {
    width: 56px !important;
    min-width: 56px !important;
    height: 56px !important;
  }
}

/* TavaWear split account orders/designs views v20260614 */
.vaccount-head {
  margin-bottom: 18px !important;
  padding-top: 8px !important;
}

.vaccount-head h1 {
  font-size: 34px !important;
  line-height: 1 !important;
  letter-spacing: -.055em !important;
}

.vaccount-head p {
  margin-top: 4px !important;
  font-size: 13px !important;
}

.vaccount-main-stack {
  gap: 14px !important;
}

.vaccount-switch-card {
  padding: 14px !important;
}

.vaccount-switch-card h2 {
  margin: 0 0 10px !important;
  color: #07140f !important;
  font-size: 13px !important;
  font-weight: 950 !important;
  letter-spacing: -.015em !important;
}

.vaccount-section-switch {
  display: grid;
  gap: 7px;
}

.vaccount-section-switch a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 38px;
  padding: 0 11px;
  border: 1px solid rgba(17, 24, 39, .08);
  border-radius: 13px;
  background: rgba(255, 255, 255, .74);
  color: #07140f;
  font-size: 12px;
  font-weight: 900;
  text-decoration: none;
}

.vaccount-section-switch a:hover {
  border-color: rgba(18, 77, 48, .24);
  background: rgba(236, 249, 240, .82);
}

.vaccount-section-switch a.is-active {
  border-color: rgba(18, 77, 48, .28);
  background: #ecf9f0;
  color: #0b3b25;
}

.vaccount-section-switch strong {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 24px;
  height: 24px;
  padding: 0 7px;
  border-radius: 999px;
  background: #07140f;
  color: #fff;
  font-size: 11px;
  font-weight: 950;
}

.vaccount-section-switch a.is-active strong {
  background: #124d30;
}

.vaccount-orders-card,
.vaccount-designs-card {
  padding: 18px !important;
  border-radius: 20px !important;
}

.vaccount-orders-card > h2,
.vaccount-section-head h2 {
  font-size: 24px !important;
  line-height: 1 !important;
  letter-spacing: -.04em !important;
}

.vaccount-orders-card > h2 {
  margin: 0 0 12px !important;
}

.vaccount-order-summary--clean {
  min-height: 48px !important;
  padding: 9px 11px !important;
}

.vaccount-order-title strong {
  font-size: 13px !important;
}

.vaccount-order-title span {
  font-size: 10px !important;
}

.vaccount-order-statuses small {
  font-size: 9px !important;
}

.vaccount-order-statuses em {
  min-height: 20px !important;
  padding: 0 7px !important;
  font-size: 9px !important;
}

.vaccount-order-total {
  font-size: 13px !important;
}

.vaccount-designs-card .vaccount-section-head {
  margin-bottom: 12px !important;
}

.vaccount-designs-card .vaccount-section-head p {
  max-width: 390px !important;
  font-size: 12px !important;
}

.vaccount-contact {
  margin-top: 0 !important;
}

@media (max-width: 860px) {
  .vaccount-head h1 {
    font-size: 30px !important;
  }

  .vaccount-switch-card {
    order: -1;
  }
}

/* TavaWear admin customers, important order/payment summary at top */
.vcustomer-detail > .vcustomer-payment-overview {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 22px;
    margin: 0 0 34px 0;
    padding-bottom: 6px;
}

.vcustomer-detail > .vcustomer-payment-overview article {
    min-height: 108px;
    padding: 18px 20px;
}

.vcustomer-detail > .vcustomer-form {
    margin-top: 0;
}

.vcustomer-detail > .vcustomer-form + .vcustomer-orders,
.vcustomer-detail > .vcustomer-payment-overview + .vcustomer-form {
    margin-top: 0;
}

.vcustomer-orders {
    margin-top: 34px;
}

@media (max-width: 1200px) {
    .vcustomer-detail > .vcustomer-payment-overview {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 18px;
    }
}

@media (max-width: 680px) {
    .vcustomer-detail > .vcustomer-payment-overview {
        grid-template-columns: 1fr;
        gap: 14px;
        margin-bottom: 28px;
    }
}

/* Stronger spacing for customer admin detail */
.vcustomer-detail-head {
    margin-bottom: 26px;
}

.vcustomer-detail > .vcustomer-payment-overview {
    gap: 26px !important;
    margin-bottom: 42px !important;
}

.vcustomer-detail > .vcustomer-payment-overview article {
    padding: 22px 24px !important;
    min-height: 124px !important;
}

.vcustomer-form {
    padding-top: 4px;
}

.vcustomer-save {
    margin-top: 22px;
}

/* Final customer admin spacing override */
.vcustomer-detail-head {
    margin-bottom: 30px !important;
}

.vcustomer-detail > .vcustomer-payment-overview {
    gap: 30px !important;
    margin-bottom: 46px !important;
}

.vcustomer-detail > .vcustomer-payment-overview article {
    padding: 24px 26px !important;
    min-height: 130px !important;
}

.vcustomer-detail > .vcustomer-form {
    margin-top: 0 !important;
}

.vcustomer-orders {
    margin-top: 40px !important;
}

/* Coupon shop-flow v2 clean inline */
.tw-coupon-box {
    margin: 14px 0 16px;
    padding: 14px 0 0;
    border-top: 1px solid rgba(8, 32, 20, .10);
    background: transparent;
    color: inherit;
    box-shadow: none;
}

.tw-coupon-box label,
.tw-coupon-box span {
    display: block;
}

.tw-coupon-box label span {
    margin-bottom: 8px;
    font-size: 13px;
    font-weight: 900;
    color: #102418;
}

.tw-coupon-input-row {
    display: flex;
    gap: 10px;
    align-items: center;
}

.tw-coupon-input-row input {
    flex: 1;
    min-width: 0;
    height: 46px;
    border: 1px solid rgba(8, 32, 20, .14);
    border-radius: 14px;
    padding: 0 14px;
    background: #ffffff;
    color: #07110b;
    font-weight: 800;
    text-transform: uppercase;
    outline: none;
}

.tw-coupon-input-row input:focus {
    border-color: rgba(64, 166, 100, .70);
    box-shadow: 0 0 0 4px rgba(64, 166, 100, .12);
}

.tw-coupon-input-row button {
    height: 46px;
    border: 0;
    border-radius: 14px;
    padding: 0 16px;
    background: #40a664;
    color: #ffffff;
    font-weight: 900;
    cursor: pointer;
    white-space: nowrap;
}

.tw-coupon-input-row button:hover {
    filter: brightness(.96);
}

.tw-coupon-remove-form {
    margin-top: 10px;
}

.tw-coupon-remove-form button {
    width: 100%;
    min-height: 40px;
    border: 1px solid rgba(8, 32, 20, .12);
    border-radius: 14px;
    padding: 10px 12px;
    background: #ffffff;
    color: #425044;
    font-weight: 900;
    cursor: pointer;
}

.tw-coupon-message,
.tw-coupon-error {
    margin: 10px 0 0;
    padding: 10px 12px;
    border-radius: 14px;
    font-size: 13px;
    font-weight: 800;
}

.tw-coupon-message {
    background: rgba(64, 166, 100, .10);
    color: #247142;
}

.tw-coupon-error {
    background: rgba(190, 45, 45, .10);
    color: #9b1f1f;
}

.tw-coupon-summary {
    margin: 12px 0 0;
    display: grid;
    gap: 8px;
}

.tw-coupon-summary div,
.summary-total-row {
    display: flex;
    justify-content: space-between;
    gap: 16px;
    align-items: center;
}

.tw-coupon-summary dt,
.tw-coupon-summary dd {
    margin: 0;
    font-size: 15px;
}

.tw-coupon-summary dt {
    color: #247142;
    font-weight: 900;
}

.tw-coupon-summary dd {
    color: #247142;
    font-weight: 900;
}

.summary-total-row {
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px solid rgba(8, 32, 20, .10);
    font-size: 17px;
    font-weight: 900;
}

@media (max-width: 720px) {
    .tw-coupon-input-row {
        flex-direction: column;
        align-items: stretch;
    }

    .tw-coupon-input-row button {
        width: 100%;
    }
}


/* Checkout address logic v1, compact layout */
.checkout-page .page-width {
    max-width: 1280px !important;
}

.checkout-page h1 {
    font-size: clamp(42px, 5vw, 76px) !important;
    line-height: .95 !important;
    margin-bottom: 18px !important;
}

.checkout-page > .page-width > p:not(.eyebrow) {
    max-width: 760px !important;
    font-size: 18px !important;
    line-height: 1.45 !important;
}

.checkout-form--compact {
    padding: 28px !important;
    border-radius: 26px !important;
    gap: 18px !important;
}

.checkout-form--compact label {
    gap: 7px !important;
    font-size: 14px !important;
}

.checkout-form--compact input[type="text"],
.checkout-form--compact input[type="email"],
.checkout-form--compact input:not([type]) {
    min-height: 50px !important;
    height: 50px !important;
    border-radius: 16px !important;
    padding: 0 16px !important;
    font-size: 16px !important;
}

.checkout-form--compact .checkout-grid {
    gap: 16px !important;
}

.checkout-address-card {
    padding: 18px !important;
    border: 1px solid rgba(8, 32, 20, .10) !important;
    border-radius: 20px !important;
    background: rgba(255, 255, 255, .72) !important;
}

.checkout-address-card--locked {
    background: rgba(64, 166, 100, .07) !important;
}

.checkout-address-head {
    display: flex !important;
    justify-content: space-between !important;
    align-items: flex-start !important;
    gap: 16px !important;
    margin-bottom: 12px !important;
}

.checkout-address-head span {
    display: block !important;
    font-size: 12px !important;
    font-weight: 900 !important;
    letter-spacing: .08em !important;
    text-transform: uppercase !important;
    color: #40a664 !important;
}

.checkout-address-head h2 {
    margin: 3px 0 0 !important;
    font-size: 20px !important;
    line-height: 1.1 !important;
}

.checkout-address-link {
    font-size: 13px !important;
    font-weight: 900 !important;
    color: #247142 !important;
    text-decoration: underline !important;
    white-space: nowrap !important;
}

.checkout-address-lines {
    display: grid !important;
    gap: 3px !important;
    font-size: 15px !important;
    line-height: 1.35 !important;
    color: #102418 !important;
}

.checkout-shipping-toggle {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    margin: 0 !important;
    cursor: pointer !important;
}

.checkout-shipping-toggle input {
    width: 18px !important;
    height: 18px !important;
    min-height: 18px !important;
    margin: 0 !important;
}

.checkout-shipping-toggle span {
    font-size: 15px !important;
    font-weight: 900 !important;
    color: #102418 !important;
}

.checkout-shipping-default {
    margin-top: 8px !important;
    font-size: 14px !important;
    color: #657064 !important;
}

.checkout-shipping-fields {
    display: none !important;
    margin-top: 16px !important;
    gap: 14px !important;
}

#shipping_different:checked ~ .checkout-shipping-default {
    display: none !important;
}

#shipping_different:checked ~ .checkout-shipping-fields {
    display: grid !important;
}

.checkout-submit-button {
    width: 100% !important;
    min-height: 52px !important;
}

.checkout-submit-button[disabled] {
    opacity: .45 !important;
    cursor: not-allowed !important;
}

.checkout-summary {
    padding: 26px !important;
    border-radius: 26px !important;
}

.checkout-summary h2 {
    font-size: 30px !important;
    margin-bottom: 22px !important;
}

.checkout-summary-row,
.checkout-summary-total {
    padding: 14px 0 !important;
}

.checkout-summary-total {
    margin-top: 18px !important;
    font-size: 20px !important;
}

.checkout-summary .tw-coupon-box {
    margin: 18px 0 !important;
    padding-top: 16px !important;
}

@media (max-width: 900px) {
    .checkout-address-head {
        display: grid !important;
    }

    .checkout-address-link {
        white-space: normal !important;
    }
}

/* Checkout shipping UI refine */
.checkout-form--compact {
    padding: 24px !important;
    gap: 16px !important;
}

.checkout-address-card {
    padding: 16px !important;
    border-radius: 18px !important;
}

.checkout-address-card--locked,
.checkout-address-card--shipping {
    min-height: 0 !important;
}

.checkout-address-head--shipping {
    margin-bottom: 10px !important;
}

.checkout-address-head--shipping h2 {
    font-size: 18px !important;
    margin-top: 2px !important;
}

.checkout-address-lines {
    gap: 2px !important;
    font-size: 14px !important;
    line-height: 1.32 !important;
}

.checkout-shipping-toggle {
    gap: 8px !important;
}

.checkout-shipping-toggle span {
    font-size: 14px !important;
    line-height: 1.25 !important;
}

.checkout-shipping-default {
    margin-top: 6px !important;
    font-size: 13px !important;
    line-height: 1.35 !important;
}

.checkout-shipping-fields {
    display: none;
    margin-top: 14px !important;
    gap: 12px !important;
}

.checkout-address-card--shipping.is-active .checkout-shipping-fields {
    display: grid !important;
}

.checkout-address-card--shipping.is-active .checkout-shipping-default {
    display: none !important;
}

.checkout-submit-button {
    min-height: 50px !important;
    border-radius: 18px !important;
}

.checkout-summary {
    padding: 20px 22px !important;
    border-radius: 22px !important;
    max-width: 390px !important;
}

.checkout-summary h2 {
    font-size: 24px !important;
    line-height: 1.05 !important;
    margin-bottom: 14px !important;
}

.checkout-summary-row {
    padding: 10px 0 !important;
    font-size: 14px !important;
}

.checkout-summary-row strong,
.checkout-summary-row span:last-child {
    font-size: 14px !important;
}

.checkout-summary .tw-coupon-box {
    margin: 12px 0 !important;
    padding-top: 12px !important;
}

.checkout-summary .tw-coupon-box label span {
    font-size: 12px !important;
    margin-bottom: 6px !important;
}

.checkout-summary .tw-coupon-input-row {
    gap: 8px !important;
}

.checkout-summary .tw-coupon-input-row input {
    height: 44px !important;
    border-radius: 12px !important;
    padding: 0 12px !important;
    font-size: 13px !important;
}

.checkout-summary .tw-coupon-input-row button {
    height: 44px !important;
    border-radius: 12px !important;
    padding: 0 14px !important;
    font-size: 13px !important;
}

.checkout-summary .tw-coupon-remove-form {
    margin-top: 8px !important;
}

.checkout-summary .tw-coupon-remove-form button {
    min-height: 38px !important;
    border-radius: 12px !important;
    padding: 8px 10px !important;
    font-size: 13px !important;
}

.checkout-summary .tw-coupon-summary {
    margin-top: 10px !important;
}

.checkout-summary .tw-coupon-summary dt,
.checkout-summary .tw-coupon-summary dd {
    font-size: 13px !important;
}

.checkout-summary-total {
    margin-top: 12px !important;
    padding: 12px 0 0 !important;
    font-size: 15px !important;
}

.checkout-summary-total strong {
    font-size: 15px !important;
}

@media (max-width: 1100px) {
    .checkout-summary {
        max-width: none !important;
    }
}


/* Checkout visual clean v2 */
.checkout-page {
    padding-top: 42px !important;
}

.checkout-page .page-width {
    max-width: 1180px !important;
}

.checkout-page h1 {
    font-size: clamp(38px, 4.2vw, 62px) !important;
    letter-spacing: -0.055em !important;
    margin-bottom: 14px !important;
}

.checkout-page > .page-width > p:not(.eyebrow) {
    max-width: 640px !important;
    font-size: 16px !important;
    line-height: 1.45 !important;
    margin-bottom: 28px !important;
}

.checkout-page .eyebrow {
    margin-bottom: 14px !important;
}

.checkout-page .checkout-grid,
.checkout-page > .page-width > .checkout-grid {
    align-items: start !important;
    gap: 30px !important;
}

.checkout-form--compact {
    display: grid !important;
    grid-template-columns: minmax(0, .92fr) minmax(0, 1.08fr) !important;
    align-items: start !important;
    gap: 14px !important;
    padding: 18px !important;
    border-radius: 24px !important;
    box-shadow: 0 18px 44px rgba(8, 32, 20, .08) !important;
}

.checkout-address-card {
    align-self: start !important;
    min-height: 0 !important;
    padding: 14px !important;
    border-radius: 18px !important;
    box-shadow: none !important;
}

.checkout-address-card--locked {
    background: rgba(64, 166, 100, .055) !important;
}

.checkout-address-card--shipping {
    background: rgba(255, 255, 255, .82) !important;
}

.checkout-address-head {
    margin-bottom: 10px !important;
}

.checkout-address-head span {
    font-size: 11px !important;
    letter-spacing: .07em !important;
}

.checkout-address-head h2 {
    font-size: 18px !important;
    line-height: 1.08 !important;
}

.checkout-address-link {
    font-size: 12px !important;
}

.checkout-address-lines {
    font-size: 14px !important;
    line-height: 1.32 !important;
}

.checkout-form--compact label {
    font-size: 13px !important;
    gap: 5px !important;
}

.checkout-form--compact input[type="text"],
.checkout-form--compact input[type="email"],
.checkout-form--compact input:not([type]) {
    min-height: 42px !important;
    height: 42px !important;
    border-radius: 13px !important;
    padding: 0 13px !important;
    font-size: 14px !important;
}

.checkout-shipping-toggle {
    margin-top: 4px !important;
}

.checkout-shipping-toggle input {
    width: 16px !important;
    height: 16px !important;
    min-height: 16px !important;
}

.checkout-shipping-toggle span {
    font-size: 14px !important;
}

.checkout-shipping-default {
    font-size: 13px !important;
}

.checkout-shipping-fields {
    margin-top: 12px !important;
    gap: 10px !important;
}

.checkout-form--compact .checkout-grid {
    gap: 10px !important;
}

.checkout-submit-button {
    grid-column: 1 / -1 !important;
    justify-self: end !important;
    width: auto !important;
    min-width: 260px !important;
    min-height: 46px !important;
    border-radius: 999px !important;
    padding: 0 28px !important;
    font-size: 15px !important;
}

.checkout-summary {
    width: 100% !important;
    max-width: 340px !important;
    padding: 18px 20px !important;
    border-radius: 22px !important;
    box-shadow: 0 18px 48px rgba(8, 32, 20, .08) !important;
}

.checkout-summary h2 {
    font-size: 24px !important;
    letter-spacing: -0.035em !important;
    margin-bottom: 12px !important;
}

.checkout-summary-row {
    padding: 9px 0 !important;
    font-size: 13px !important;
}

.checkout-summary-row span,
.checkout-summary-row strong {
    font-size: 13px !important;
}

.checkout-summary .tw-coupon-box {
    margin: 10px 0 12px !important;
    padding-top: 10px !important;
}

.checkout-summary .tw-coupon-box label span {
    font-size: 11px !important;
}

.checkout-summary .tw-coupon-input-row input {
    height: 40px !important;
    font-size: 13px !important;
    border-radius: 12px !important;
}

.checkout-summary .tw-coupon-input-row button {
    height: 40px !important;
    font-size: 13px !important;
    border-radius: 12px !important;
    padding: 0 12px !important;
}

.checkout-summary .tw-coupon-remove-form button {
    min-height: 34px !important;
    font-size: 12px !important;
}

.checkout-summary .tw-coupon-summary dt,
.checkout-summary .tw-coupon-summary dd {
    font-size: 13px !important;
}

.checkout-summary-total {
    margin-top: 10px !important;
    padding-top: 10px !important;
    font-size: 15px !important;
}

.checkout-summary-total span,
.checkout-summary-total strong {
    font-size: 15px !important;
}

@media (max-width: 1050px) {
    .checkout-form--compact {
        grid-template-columns: 1fr !important;
    }

    .checkout-submit-button {
        justify-self: stretch !important;
        width: 100% !important;
        min-width: 0 !important;
    }

    .checkout-summary {
        max-width: none !important;
    }
}

/* Checkout no-scroll v3 */
@media (min-width: 1051px) {
    .checkout-page {
        padding-top: 26px !important;
        padding-bottom: 28px !important;
    }

    .checkout-page .page-width {
        max-width: 1140px !important;
    }

    .checkout-page .eyebrow {
        margin-bottom: 10px !important;
        font-size: 12px !important;
    }

    .checkout-page h1 {
        font-size: clamp(34px, 3.6vw, 54px) !important;
        line-height: .95 !important;
        margin-bottom: 10px !important;
    }

    .checkout-page > .page-width > p:not(.eyebrow) {
        max-width: 620px !important;
        font-size: 15px !important;
        line-height: 1.38 !important;
        margin-bottom: 22px !important;
    }

    .checkout-page > .page-width > div,
    .checkout-page > .page-width > .checkout-layout {
        align-items: start !important;
    }

    .checkout-form--compact {
        grid-template-columns: minmax(0, .86fr) minmax(0, 1.14fr) !important;
        gap: 12px !important;
        padding: 14px !important;
        border-radius: 22px !important;
        box-shadow: 0 14px 36px rgba(8, 32, 20, .07) !important;
    }

    .checkout-address-card {
        padding: 12px !important;
        border-radius: 16px !important;
    }

    .checkout-address-head {
        margin-bottom: 8px !important;
    }

    .checkout-address-head span {
        font-size: 10px !important;
    }

    .checkout-address-head h2 {
        font-size: 16px !important;
        line-height: 1.05 !important;
    }

    .checkout-address-link {
        font-size: 11px !important;
    }

    .checkout-address-lines {
        font-size: 13px !important;
        line-height: 1.28 !important;
    }

    .checkout-form--compact label {
        font-size: 12px !important;
        gap: 4px !important;
    }

    .checkout-form--compact input[type="text"],
    .checkout-form--compact input[type="email"],
    .checkout-form--compact input:not([type]) {
        min-height: 36px !important;
        height: 36px !important;
        border-radius: 11px !important;
        padding: 0 11px !important;
        font-size: 13px !important;
    }

    .checkout-shipping-toggle {
        margin-top: 2px !important;
        gap: 7px !important;
    }

    .checkout-shipping-toggle input {
        width: 15px !important;
        height: 15px !important;
        min-height: 15px !important;
    }

    .checkout-shipping-toggle span {
        font-size: 13px !important;
    }

    .checkout-shipping-default {
        margin-top: 5px !important;
        font-size: 12px !important;
        line-height: 1.3 !important;
    }

    .checkout-shipping-fields {
        grid-template-columns: 1fr 1fr !important;
        gap: 8px 10px !important;
        margin-top: 10px !important;
    }

    .checkout-shipping-fields > label:nth-of-type(3),
    .checkout-shipping-fields > label:nth-of-type(4) {
        grid-column: 1 / -1 !important;
    }

    .checkout-shipping-fields .checkout-grid {
        grid-column: 1 / -1 !important;
        grid-template-columns: .8fr 1.2fr !important;
        gap: 10px !important;
    }

    .checkout-submit-button {
        display: none !important;
    }

    .checkout-summary {
        max-width: 320px !important;
        padding: 18px !important;
        border-radius: 20px !important;
        box-shadow: 0 14px 38px rgba(8, 32, 20, .07) !important;
    }

    .checkout-summary h2 {
        font-size: 22px !important;
        margin-bottom: 10px !important;
    }

    .checkout-summary-row {
        padding: 8px 0 !important;
        font-size: 12px !important;
    }

    .checkout-summary-row span,
    .checkout-summary-row strong {
        font-size: 12px !important;
    }

    .checkout-summary .tw-coupon-box {
        margin: 9px 0 10px !important;
        padding-top: 9px !important;
    }

    .checkout-summary .tw-coupon-box label span {
        font-size: 10px !important;
        margin-bottom: 5px !important;
    }

    .checkout-summary .tw-coupon-input-row {
        gap: 7px !important;
    }

    .checkout-summary .tw-coupon-input-row input {
        height: 36px !important;
        border-radius: 10px !important;
        font-size: 12px !important;
        padding: 0 10px !important;
    }

    .checkout-summary .tw-coupon-input-row button {
        height: 36px !important;
        border-radius: 10px !important;
        font-size: 12px !important;
        padding: 0 11px !important;
    }

    .checkout-summary .tw-coupon-remove-form button {
        min-height: 32px !important;
        border-radius: 10px !important;
        font-size: 11px !important;
    }

    .checkout-summary .tw-coupon-summary dt,
    .checkout-summary .tw-coupon-summary dd {
        font-size: 12px !important;
    }

    .checkout-summary-total {
        margin-top: 8px !important;
        padding-top: 9px !important;
        font-size: 14px !important;
    }

    .checkout-summary-total span,
    .checkout-summary-total strong {
        font-size: 14px !important;
    }

    .checkout-summary-submit {
        width: 100% !important;
        min-height: 42px !important;
        margin-top: 14px !important;
        border-radius: 999px !important;
        font-size: 14px !important;
    }

    .checkout-summary-submit[disabled] {
        opacity: .45 !important;
        cursor: not-allowed !important;
    }
}

@media (max-width: 1050px) {
    .checkout-summary-submit {
        width: 100% !important;
        min-height: 48px !important;
        margin-top: 16px !important;
        border-radius: 999px !important;
    }
}

/* Checkout footer spacing fix */
@media (min-width: 1051px) and (min-height: 760px) {
    .checkout-page {
        min-height: calc(100vh - 300px) !important;
        padding-bottom: 96px !important;
    }
}

@media (min-width: 1400px) and (min-height: 850px) {
    .checkout-page {
        min-height: calc(100vh - 280px) !important;
        padding-bottom: 130px !important;
    }
}

/* Checkout shipping active spacing fix */
@media (min-width: 1051px) and (min-height: 760px) {
    html.tw-shipping-different-active .checkout-page,
    body.tw-shipping-different-active .checkout-page {
        min-height: auto !important;
        padding-bottom: 42px !important;
    }
}

@media (min-width: 1400px) and (min-height: 850px) {
    html.tw-shipping-different-active .checkout-page,
    body.tw-shipping-different-active .checkout-page {
        min-height: auto !important;
        padding-bottom: 56px !important;
    }
}

/* Checkout title size fix */
.checkout-page h1 {
    font-size: clamp(30px, 3vw, 44px) !important;
    line-height: 1.02 !important;
    letter-spacing: -0.045em !important;
    margin-bottom: 12px !important;
}

.checkout-summary h2 {
    font-size: clamp(22px, 2vw, 30px) !important;
    line-height: 1.08 !important;
    letter-spacing: -0.035em !important;
}

.checkout-page .eyebrow {
    font-size: 11px !important;
    margin-bottom: 10px !important;
}

.checkout-page > .page-width > p:not(.eyebrow) {
    font-size: 15px !important;
    line-height: 1.38 !important;
    margin-bottom: 22px !important;
}

/* Cart summary compact v1 */
.cart-page .page-width,
.cart-page .cart-layout,
.cart-page .cart-grid {
    align-items: start !important;
}

.summary {
    width: 100% !important;
    max-width: 356px !important;
    padding: 16px 16px 14px !important;
    border-radius: 22px !important;
    box-shadow: 0 14px 34px rgba(8, 32, 20, .07) !important;
}

.summary > p,
.summary .summary-note,
.summary .cart-summary-note {
    margin-bottom: 10px !important;
    font-size: 12px !important;
    line-height: 1.35 !important;
    color: #667265 !important;
}

.summary > div,
.summary-total-row {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 12px !important;
}

.summary > div {
    padding-bottom: 10px !important;
    margin-bottom: 10px !important;
    border-bottom: 1px solid rgba(8, 32, 20, .08) !important;
}

.summary > div span,
.summary > div strong {
    font-size: 14px !important;
}

.summary .tw-coupon-box {
    margin: 10px 0 12px !important;
    padding: 10px 0 0 !important;
    border-top: 0 !important;
}

.summary .tw-coupon-box label span {
    margin-bottom: 6px !important;
    font-size: 12px !important;
    font-weight: 900 !important;
}

.summary .tw-coupon-input-row {
    gap: 8px !important;
}

.summary .tw-coupon-input-row input {
    height: 44px !important;
    border-radius: 12px !important;
    padding: 0 12px !important;
    font-size: 13px !important;
}

.summary .tw-coupon-input-row button {
    height: 44px !important;
    border-radius: 12px !important;
    padding: 0 14px !important;
    font-size: 13px !important;
    font-weight: 900 !important;
}

.summary .tw-coupon-remove-form {
    margin-top: 8px !important;
}

.summary .tw-coupon-remove-form button {
    min-height: 36px !important;
    border-radius: 12px !important;
    padding: 8px 10px !important;
    font-size: 13px !important;
    font-weight: 900 !important;
}

.summary .tw-coupon-message,
.summary .tw-coupon-error {
    margin-top: 8px !important;
    padding: 8px 10px !important;
    border-radius: 12px !important;
    font-size: 12px !important;
}

.summary .tw-coupon-summary {
    margin-top: 10px !important;
    gap: 6px !important;
}

.summary .tw-coupon-summary div {
    display: flex !important;
    justify-content: space-between !important;
    gap: 10px !important;
}

.summary .tw-coupon-summary dt,
.summary .tw-coupon-summary dd {
    font-size: 13px !important;
    line-height: 1.25 !important;
}

.summary-total-row {
    margin-top: 10px !important;
    padding-top: 10px !important;
    border-top: 1px solid rgba(8, 32, 20, .08) !important;
}

.summary-total-row span,
.summary-total-row strong {
    font-size: 15px !important;
    font-weight: 900 !important;
}

.summary .button,
.summary a.button,
.summary button.button {
    width: 100% !important;
    min-height: 42px !important;
    border-radius: 999px !important;
    padding: 0 16px !important;
    font-size: 14px !important;
    margin-top: 10px !important;
}

@media (min-width: 1200px) {
    .summary {
        max-width: 340px !important;
    }
}

@media (max-width: 900px) {
    .summary {
        max-width: none !important;
    }
}

/* Cart summary inline subtotal */
@media (min-width: 1000px) {
    .summary {
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) auto !important;
        column-gap: 18px !important;
        row-gap: 10px !important;
        align-items: start !important;
        max-width: 360px !important;
        padding: 16px 16px 14px !important;
    }

    .summary > p:first-child,
    .summary > .summary-note:first-child,
    .summary > .cart-summary-note:first-child {
        grid-column: 1 !important;
        margin: 0 !important;
        padding: 0 !important;
        font-size: 12px !important;
        line-height: 1.35 !important;
        color: #667265 !important;
        align-self: center !important;
    }

    .summary > div:first-of-type {
        grid-column: 2 !important;
        align-self: center !important;
        min-width: 168px !important;
        margin: 0 !important;
        padding: 0 !important 0 0 14px !important;
        border-bottom: 0 !important;
        border-left: 1px solid rgba(8, 32, 20, .08) !important;
    }

    .summary > div:first-of-type span,
    .summary > div:first-of-type strong {
        font-size: 13px !important;
        white-space: nowrap !important;
    }

    .summary .tw-coupon-box,
    .summary .tw-coupon-message,
    .summary .tw-coupon-error,
    .summary .tw-coupon-summary,
    .summary-total-row,
    .summary .button,
    .summary a.button,
    .summary button.button {
        grid-column: 1 / -1 !important;
    }

    .summary .tw-coupon-box {
        margin-top: 2px !important;
        padding-top: 10px !important;
        border-top: 1px solid rgba(8, 32, 20, .08) !important;
    }

    .summary .tw-coupon-box label span {
        font-size: 12px !important;
        margin-bottom: 5px !important;
    }

    .summary .tw-coupon-input-row {
        gap: 8px !important;
    }

    .summary .tw-coupon-input-row input {
        height: 42px !important;
        border-radius: 12px !important;
        padding: 0 12px !important;
        font-size: 13px !important;
    }

    .summary .tw-coupon-input-row button {
        height: 42px !important;
        border-radius: 12px !important;
        padding: 0 14px !important;
        font-size: 13px !important;
    }

    .summary .tw-coupon-remove-form button {
        min-height: 34px !important;
        border-radius: 12px !important;
        font-size: 13px !important;
    }

    .summary-total-row {
        margin-top: 4px !important;
        padding-top: 10px !important;
        border-top: 1px solid rgba(8, 32, 20, .08) !important;
    }

    .summary-total-row span,
    .summary-total-row strong {
        font-size: 15px !important;
    }

    .summary .button,
    .summary a.button,
    .summary button.button {
        min-height: 42px !important;
        margin-top: 6px !important;
        border-radius: 999px !important;
        font-size: 14px !important;
    }
}

@media (max-width: 999px) {
    .summary {
        display: block !important;
    }

    .summary > div:first-of-type {
        border-left: 0 !important;
        padding-left: 0 !important;
    }
}

/* Cart redesign v1 */
.tw-cart-page {
    padding-top: 44px !important;
}

.tw-cart-shell {
    max-width: 1240px !important;
}

.tw-cart-head {
    display: flex !important;
    align-items: flex-end !important;
    justify-content: space-between !important;
    gap: 32px !important;
    margin-bottom: 28px !important;
}

.tw-cart-head h1 {
    margin: 0 !important;
    font-size: clamp(38px, 4vw, 58px) !important;
    line-height: .95 !important;
    letter-spacing: -0.055em !important;
}

.tw-cart-intro {
    margin: 14px 0 0 !important;
    max-width: 560px !important;
    color: #56645a !important;
    font-size: 15px !important;
    line-height: 1.45 !important;
}

.tw-checkout-steps {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    margin: 0 !important;
    padding: 0 !important;
    list-style: none !important;
}

.tw-checkout-steps li {
    position: relative !important;
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    color: #7a867d !important;
    font-size: 12px !important;
    font-weight: 900 !important;
    white-space: nowrap !important;
}

.tw-checkout-steps li + li::before {
    content: "" !important;
    width: 22px !important;
    height: 1px !important;
    background: rgba(8, 32, 20, .18) !important;
    display: block !important;
    margin-right: 2px !important;
}

.tw-checkout-steps span {
    display: grid !important;
    place-items: center !important;
    width: 26px !important;
    height: 26px !important;
    border-radius: 999px !important;
    border: 1px solid rgba(8, 32, 20, .16) !important;
    background: #ffffff !important;
    color: #516056 !important;
    font-size: 12px !important;
}

.tw-checkout-steps .is-active span {
    background: #103d24 !important;
    color: #ffffff !important;
    border-color: #103d24 !important;
}

.tw-checkout-steps .is-active strong {
    color: #103d24 !important;
}

.tw-cart-layout {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) 340px !important;
    gap: 28px !important;
    align-items: start !important;
}

.tw-cart-items {
    display: grid !important;
    gap: 12px !important;
}

.tw-cart-item {
    display: grid !important;
    grid-template-columns: 76px minmax(0, 1fr) auto !important;
    gap: 16px !important;
    align-items: center !important;
    padding: 14px !important;
    border: 1px solid rgba(8, 32, 20, .08) !important;
    border-radius: 22px !important;
    background: rgba(255, 255, 255, .86) !important;
    box-shadow: 0 10px 28px rgba(8, 32, 20, .045) !important;
}

.tw-cart-thumb {
    display: grid !important;
    place-items: center !important;
    width: 76px !important;
    height: 76px !important;
    border-radius: 16px !important;
    background: rgba(8, 32, 20, .04) !important;
    overflow: hidden !important;
    text-decoration: none !important;
    color: #657064 !important;
    font-weight: 900 !important;
}

.tw-cart-thumb img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
}

.tw-cart-info {
    min-width: 0 !important;
}

.tw-cart-title-row {
    display: flex !important;
    align-items: baseline !important;
    justify-content: space-between !important;
    gap: 14px !important;
}

.tw-cart-title-row h2 {
    margin: 0 !important;
    font-size: 22px !important;
    line-height: 1.05 !important;
    letter-spacing: -0.035em !important;
}

.tw-cart-title-row strong {
    font-size: 15px !important;
    white-space: nowrap !important;
}

.tw-cart-meta {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 7px !important;
    margin-top: 7px !important;
    align-items: center !important;
}

.tw-cart-meta span {
    display: inline-flex !important;
    align-items: center !important;
    min-height: 24px !important;
    padding: 0 9px !important;
    border-radius: 999px !important;
    background: rgba(64, 166, 100, .10) !important;
    color: #0f3a23 !important;
    font-size: 12px !important;
    font-weight: 900 !important;
}

.tw-cart-meta em {
    color: #657064 !important;
    font-size: 13px !important;
    font-style: normal !important;
}

.tw-cart-custom {
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    gap: 8px 12px !important;
    margin-top: 9px !important;
    font-size: 12px !important;
}

.tw-cart-custom span {
    color: #657064 !important;
    font-weight: 900 !important;
}

.tw-cart-custom strong {
    color: #102418 !important;
    font-weight: 900 !important;
}

.tw-cart-custom a,
.tw-cart-custom small {
    color: #102418 !important;
    font-size: 12px !important;
    font-weight: 900 !important;
}

.tw-cart-actions {
    display: grid !important;
    gap: 8px !important;
    justify-items: end !important;
    min-width: 210px !important;
}

.tw-cart-qty {
    display: flex !important;
    align-items: end !important;
    gap: 8px !important;
}

.tw-cart-qty label {
    display: grid !important;
    gap: 4px !important;
}

.tw-cart-qty label span {
    font-size: 10px !important;
    text-transform: uppercase !important;
    letter-spacing: .08em !important;
    font-weight: 900 !important;
    color: #657064 !important;
}

.tw-cart-qty input {
    width: 58px !important;
    height: 38px !important;
    border-radius: 12px !important;
    border: 1px solid rgba(8, 32, 20, .13) !important;
    background: #ffffff !important;
    text-align: center !important;
    font-size: 14px !important;
    font-weight: 900 !important;
}

.tw-cart-qty button {
    height: 38px !important;
    border: 0 !important;
    border-radius: 999px !important;
    padding: 0 13px !important;
    background: rgba(64, 166, 100, .10) !important;
    color: #0f3a23 !important;
    font-size: 12px !important;
    font-weight: 900 !important;
    cursor: pointer !important;
}

.tw-cart-remove button {
    border: 0 !important;
    background: transparent !important;
    color: #68736a !important;
    font-size: 12px !important;
    font-weight: 900 !important;
    cursor: pointer !important;
}

.tw-cart-summary {
    position: sticky !important;
    top: 106px !important;
    padding: 18px !important;
    border: 1px solid rgba(8, 32, 20, .08) !important;
    border-radius: 24px !important;
    background: rgba(255, 255, 255, .92) !important;
    box-shadow: 0 18px 46px rgba(8, 32, 20, .08) !important;
}

.tw-cart-summary-top {
    display: flex !important;
    justify-content: space-between !important;
    gap: 12px !important;
    align-items: flex-start !important;
    margin-bottom: 14px !important;
}

.tw-cart-summary-top span {
    display: block !important;
    margin-bottom: 4px !important;
    color: #40a664 !important;
    font-size: 11px !important;
    letter-spacing: .08em !important;
    text-transform: uppercase !important;
    font-weight: 900 !important;
}

.tw-cart-summary-top h2 {
    margin: 0 !important;
    font-size: 24px !important;
    letter-spacing: -0.035em !important;
    line-height: 1.05 !important;
}

.tw-cart-summary-top > strong {
    font-size: 12px !important;
    color: #657064 !important;
    white-space: nowrap !important;
}

.tw-cart-summary-row,
.tw-cart-summary-total {
    display: flex !important;
    justify-content: space-between !important;
    gap: 14px !important;
    align-items: center !important;
}

.tw-cart-summary-row {
    padding: 11px 0 !important;
    border-top: 1px solid rgba(8, 32, 20, .08) !important;
    border-bottom: 1px solid rgba(8, 32, 20, .08) !important;
}

.tw-cart-summary-row span,
.tw-cart-summary-row strong {
    font-size: 14px !important;
    font-weight: 900 !important;
}

.tw-cart-summary-coupon .tw-coupon-box {
    margin: 12px 0 !important;
    padding: 0 !important;
    border-top: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
}

.tw-cart-summary-coupon .tw-coupon-box label span {
    font-size: 11px !important;
    margin-bottom: 6px !important;
}

.tw-cart-summary-coupon .tw-coupon-input-row {
    gap: 8px !important;
}

.tw-cart-summary-coupon .tw-coupon-input-row input {
    height: 40px !important;
    border-radius: 12px !important;
    font-size: 13px !important;
}

.tw-cart-summary-coupon .tw-coupon-input-row button {
    height: 40px !important;
    border-radius: 12px !important;
    padding: 0 13px !important;
    font-size: 13px !important;
}

.tw-cart-summary-coupon .tw-coupon-remove-form button {
    min-height: 34px !important;
    border-radius: 12px !important;
    font-size: 12px !important;
}

.tw-cart-summary-coupon .tw-coupon-summary {
    margin-top: 9px !important;
}

.tw-cart-summary-coupon .tw-coupon-summary dt,
.tw-cart-summary-coupon .tw-coupon-summary dd {
    font-size: 13px !important;
}

.tw-cart-summary-total {
    padding-top: 12px !important;
    margin-top: 10px !important;
    border-top: 1px solid rgba(8, 32, 20, .08) !important;
}

.tw-cart-summary-total span,
.tw-cart-summary-total strong {
    font-size: 17px !important;
    font-weight: 950 !important;
}

.tw-cart-payment-preview {
    margin-top: 12px !important;
    padding: 12px !important;
    border-radius: 16px !important;
    background: rgba(64, 166, 100, .07) !important;
}

.tw-cart-payment-preview span {
    display: block !important;
    color: #247142 !important;
    font-size: 12px !important;
    font-weight: 900 !important;
    margin-bottom: 4px !important;
}

.tw-cart-payment-preview p {
    margin: 0 !important;
    color: #5d6b60 !important;
    font-size: 12px !important;
    line-height: 1.35 !important;
}

.tw-cart-next {
    width: 100% !important;
    min-height: 44px !important;
    margin-top: 14px !important;
    border-radius: 999px !important;
    font-size: 14px !important;
}

@media (max-width: 1050px) {
    .tw-cart-head {
        display: grid !important;
        align-items: start !important;
    }

    .tw-checkout-steps {
        overflow-x: auto !important;
        padding-bottom: 4px !important;
    }

    .tw-cart-layout {
        grid-template-columns: 1fr !important;
    }

    .tw-cart-summary {
        position: static !important;
    }
}

@media (max-width: 760px) {
    .tw-cart-page {
        padding-top: 28px !important;
    }

    .tw-cart-item {
        grid-template-columns: 64px minmax(0, 1fr) !important;
    }

    .tw-cart-thumb {
        width: 64px !important;
        height: 64px !important;
    }

    .tw-cart-actions {
        grid-column: 1 / -1 !important;
        justify-items: stretch !important;
        min-width: 0 !important;
    }

    .tw-cart-qty {
        justify-content: space-between !important;
    }

    .tw-cart-title-row {
        display: grid !important;
        gap: 4px !important;
    }
}

/* Checkout redesign v1 */
.tw-checkout-page {
    padding-top: 44px !important;
}

.tw-checkout-page .page-width {
    max-width: 1240px !important;
}

.tw-checkout-page .eyebrow {
    margin-bottom: 10px !important;
    font-size: 12px !important;
}

.tw-checkout-page h1 {
    margin: 0 !important;
    font-size: clamp(36px, 3.6vw, 54px) !important;
    line-height: .95 !important;
    letter-spacing: -0.055em !important;
}

.tw-checkout-intro,
.tw-checkout-page > .page-width > p:not(.eyebrow) {
    max-width: 620px !important;
    margin: 14px 0 18px !important;
    color: #56645a !important;
    font-size: 15px !important;
    line-height: 1.45 !important;
}

.tw-checkout-steps--checkout {
    margin: 0 0 26px !important;
    justify-content: flex-start !important;
}

.tw-checkout-page .checkout-grid,
.tw-checkout-page .checkout-layout,
.tw-checkout-page > .page-width > .checkout-grid,
.tw-checkout-page > .page-width > .checkout-layout {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) 340px !important;
    gap: 28px !important;
    align-items: start !important;
}

.tw-checkout-page .checkout-form--compact {
    display: grid !important;
    grid-template-columns: minmax(0, .92fr) minmax(0, 1.08fr) !important;
    gap: 12px !important;
    padding: 14px !important;
    border-radius: 24px !important;
    background: rgba(255, 255, 255, .88) !important;
    box-shadow: 0 14px 36px rgba(8, 32, 20, .07) !important;
}

.tw-checkout-page .checkout-address-card {
    padding: 12px !important;
    border-radius: 18px !important;
    box-shadow: none !important;
}

.tw-checkout-page .checkout-address-head {
    margin-bottom: 8px !important;
}

.tw-checkout-page .checkout-address-head span {
    font-size: 10px !important;
    letter-spacing: .08em !important;
}

.tw-checkout-page .checkout-address-head h2 {
    font-size: 16px !important;
    line-height: 1.08 !important;
}

.tw-checkout-page .checkout-address-link {
    font-size: 11px !important;
}

.tw-checkout-page .checkout-address-lines {
    font-size: 13px !important;
    line-height: 1.28 !important;
}

.tw-checkout-page .checkout-form--compact label {
    font-size: 12px !important;
    gap: 4px !important;
}

.tw-checkout-page .checkout-form--compact input[type="text"],
.tw-checkout-page .checkout-form--compact input[type="email"],
.tw-checkout-page .checkout-form--compact input:not([type]) {
    min-height: 36px !important;
    height: 36px !important;
    border-radius: 11px !important;
    padding: 0 11px !important;
    font-size: 13px !important;
}

.tw-checkout-page .checkout-shipping-fields {
    grid-template-columns: 1fr 1fr !important;
    gap: 8px 10px !important;
    margin-top: 10px !important;
}

.tw-checkout-page .checkout-shipping-fields > label:nth-of-type(3),
.tw-checkout-page .checkout-shipping-fields > label:nth-of-type(4) {
    grid-column: 1 / -1 !important;
}

.tw-checkout-page .checkout-shipping-fields .checkout-grid {
    grid-column: 1 / -1 !important;
    grid-template-columns: .8fr 1.2fr !important;
    gap: 10px !important;
}

.tw-checkout-summary {
    position: sticky !important;
    top: 106px !important;
    width: 100% !important;
    max-width: 340px !important;
    padding: 18px !important;
    border: 1px solid rgba(8, 32, 20, .08) !important;
    border-radius: 24px !important;
    background: rgba(255, 255, 255, .92) !important;
    box-shadow: 0 18px 46px rgba(8, 32, 20, .08) !important;
}

.tw-checkout-summary-head {
    margin-bottom: 14px !important;
}

.tw-checkout-summary-head span {
    display: block !important;
    margin-bottom: 4px !important;
    color: #40a664 !important;
    font-size: 11px !important;
    letter-spacing: .08em !important;
    text-transform: uppercase !important;
    font-weight: 900 !important;
}

.tw-checkout-summary-head h2 {
    margin: 0 !important;
    font-size: 24px !important;
    line-height: 1.05 !important;
    letter-spacing: -0.035em !important;
}

.tw-checkout-summary .checkout-summary-row {
    padding: 9px 0 !important;
    font-size: 13px !important;
}

.tw-checkout-summary .checkout-summary-row span,
.tw-checkout-summary .checkout-summary-row strong {
    font-size: 13px !important;
}

.tw-checkout-summary .tw-coupon-box {
    margin: 12px 0 !important;
    padding: 0 !important;
    border-top: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
}

.tw-checkout-summary .tw-coupon-box label span {
    font-size: 11px !important;
    margin-bottom: 6px !important;
}

.tw-checkout-summary .tw-coupon-input-row {
    gap: 8px !important;
}

.tw-checkout-summary .tw-coupon-input-row input {
    height: 40px !important;
    border-radius: 12px !important;
    font-size: 13px !important;
}

.tw-checkout-summary .tw-coupon-input-row button {
    height: 40px !important;
    border-radius: 12px !important;
    padding: 0 13px !important;
    font-size: 13px !important;
}

.tw-checkout-summary .tw-coupon-remove-form button {
    min-height: 34px !important;
    border-radius: 12px !important;
    font-size: 12px !important;
}

.tw-checkout-summary .tw-coupon-summary dt,
.tw-checkout-summary .tw-coupon-summary dd {
    font-size: 13px !important;
}

.tw-checkout-summary .checkout-summary-total {
    margin-top: 10px !important;
    padding-top: 12px !important;
    border-top: 1px solid rgba(8, 32, 20, .08) !important;
}

.tw-checkout-summary .checkout-summary-total span,
.tw-checkout-summary .checkout-summary-total strong {
    font-size: 17px !important;
    font-weight: 950 !important;
}

.tw-checkout-payment-preview {
    margin-top: 12px !important;
    padding: 12px !important;
    border-radius: 16px !important;
    background: rgba(64, 166, 100, .07) !important;
}

.tw-checkout-payment-preview span {
    display: block !important;
    margin-bottom: 4px !important;
    color: #247142 !important;
    font-size: 12px !important;
    font-weight: 900 !important;
}

.tw-checkout-payment-preview p {
    margin: 0 !important;
    color: #5d6b60 !important;
    font-size: 12px !important;
    line-height: 1.35 !important;
}

.tw-checkout-summary .checkout-summary-submit {
    width: 100% !important;
    min-height: 44px !important;
    margin-top: 14px !important;
    border-radius: 999px !important;
    font-size: 14px !important;
}

@media (max-width: 1050px) {
    .tw-checkout-page .checkout-grid,
    .tw-checkout-page .checkout-layout,
    .tw-checkout-page > .page-width > .checkout-grid,
    .tw-checkout-page > .page-width > .checkout-layout {
        grid-template-columns: 1fr !important;
    }

    .tw-checkout-summary {
        position: static !important;
        max-width: none !important;
    }

    .tw-checkout-page .checkout-form--compact {
        grid-template-columns: 1fr !important;
    }

    .tw-checkout-steps--checkout {
        overflow-x: auto !important;
        padding-bottom: 4px !important;
    }
}

/* Checkout and cart visual unify v3 */
.tw-checkout-shell {
    max-width: 1240px !important;
}

.tw-checkout-page .tw-flow-back {
    display: inline-flex !important;
    align-items: center !important;
    gap: 7px !important;
    margin-bottom: 12px !important;
    color: #247142 !important;
    font-size: 13px !important;
    font-weight: 900 !important;
    text-decoration: none !important;
}

.tw-checkout-page .tw-flow-back::before {
    content: "←" !important;
    font-size: 15px !important;
    line-height: 1 !important;
}

.tw-checkout-page .tw-flow-back:hover {
    text-decoration: underline !important;
}

.tw-checkout-summary.tw-cart-summary {
    max-width: 340px !important;
    padding: 18px !important;
    border-radius: 24px !important;
    background: rgba(255, 255, 255, .92) !important;
    box-shadow: 0 18px 46px rgba(8, 32, 20, .08) !important;
}

.tw-checkout-summary .tw-cart-summary-top {
    display: flex !important;
    justify-content: space-between !important;
    gap: 12px !important;
    align-items: flex-start !important;
    margin-bottom: 14px !important;
}

.tw-checkout-summary .tw-cart-summary-top > strong {
    font-size: 12px !important;
    color: #657064 !important;
    white-space: nowrap !important;
}

.tw-checkout-summary .tw-cart-payment-preview {
    margin-top: 12px !important;
}

.tw-checkout-summary .tw-cart-next {
    width: 100% !important;
    min-height: 44px !important;
    margin-top: 14px !important;
    border-radius: 999px !important;
    font-size: 14px !important;
}

.tw-checkout-summary .tw-cart-next[disabled] {
    opacity: .45 !important;
    cursor: not-allowed !important;
}

.tw-checkout-page .checkout-form--compact {
    border: 1px solid rgba(8, 32, 20, .08) !important;
    background: rgba(255, 255, 255, .86) !important;
    box-shadow: 0 10px 28px rgba(8, 32, 20, .045) !important;
}

@media (max-width: 1050px) {
    .tw-checkout-summary.tw-cart-summary {
        max-width: none !important;
    }
}

/* Checkout redesign cleanup v1 */
.tw-checkout-page {
    padding-top: 44px !important;
}

.tw-checkout-shell {
    max-width: 1240px !important;
}

.tw-checkout-head {
    display: flex !important;
    align-items: flex-end !important;
    justify-content: space-between !important;
    gap: 32px !important;
    margin-bottom: 28px !important;
}

.tw-checkout-head > div {
    min-width: 0 !important;
}

.tw-checkout-page .tw-flow-back {
    display: inline-flex !important;
    align-items: center !important;
    gap: 7px !important;
    margin-bottom: 12px !important;
    color: #247142 !important;
    font-size: 13px !important;
    font-weight: 900 !important;
    text-decoration: none !important;
}

.tw-checkout-page .tw-flow-back::before {
    content: "←" !important;
    font-size: 15px !important;
    line-height: 1 !important;
}

.tw-checkout-page .tw-flow-back:hover {
    text-decoration: underline !important;
}

.tw-checkout-head h1 {
    margin: 0 !important;
    font-size: clamp(38px, 4vw, 58px) !important;
    line-height: .95 !important;
    letter-spacing: -0.055em !important;
}

.tw-checkout-head .tw-checkout-intro {
    margin: 14px 0 0 !important;
    max-width: 620px !important;
    color: #56645a !important;
    font-size: 15px !important;
    line-height: 1.45 !important;
}

.tw-checkout-head .tw-checkout-steps--checkout {
    margin: 0 !important;
    flex-shrink: 0 !important;
}

.tw-checkout-page .checkout-grid {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) 340px !important;
    gap: 28px !important;
    align-items: start !important;
}

.tw-checkout-page .checkout-form--compact {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important;
    gap: 12px !important;
    padding: 14px !important;
    border: 1px solid rgba(8, 32, 20, .08) !important;
    border-radius: 22px !important;
    background: rgba(255, 255, 255, .86) !important;
    box-shadow: 0 10px 28px rgba(8, 32, 20, .045) !important;
}

.tw-checkout-page .checkout-address-card {
    padding: 14px !important;
    border: 1px solid rgba(8, 32, 20, .08) !important;
    border-radius: 18px !important;
    background: rgba(255, 255, 255, .72) !important;
    box-shadow: none !important;
}

.tw-checkout-page .checkout-address-card:first-child {
    background: rgba(64, 166, 100, .06) !important;
}

.tw-checkout-page .checkout-address-head {
    display: flex !important;
    align-items: flex-start !important;
    justify-content: space-between !important;
    gap: 12px !important;
    margin-bottom: 10px !important;
}

.tw-checkout-page .checkout-address-head span {
    display: block !important;
    margin-bottom: 5px !important;
    color: #40a664 !important;
    font-size: 10px !important;
    letter-spacing: .08em !important;
    text-transform: uppercase !important;
    font-weight: 900 !important;
}

.tw-checkout-page .checkout-address-head h2 {
    margin: 0 !important;
    font-size: 17px !important;
    line-height: 1.08 !important;
    letter-spacing: -0.025em !important;
}

.tw-checkout-page .checkout-address-link {
    color: #247142 !important;
    font-size: 11px !important;
    font-weight: 900 !important;
}

.tw-checkout-page .checkout-address-lines {
    color: #314036 !important;
    font-size: 13px !important;
    line-height: 1.35 !important;
}

.tw-checkout-page .checkout-shipping-default {
    color: #657064 !important;
    font-size: 13px !important;
    line-height: 1.35 !important;
}

.tw-checkout-page .checkout-checkbox {
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
    margin-top: 4px !important;
    font-size: 13px !important;
    font-weight: 900 !important;
}

.tw-checkout-page .checkout-shipping-fields {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 8px 10px !important;
    margin-top: 12px !important;
}

.tw-checkout-page .checkout-shipping-fields label {
    display: grid !important;
    gap: 4px !important;
    color: #314036 !important;
    font-size: 12px !important;
    font-weight: 900 !important;
}

.tw-checkout-page .checkout-shipping-fields input {
    min-height: 38px !important;
    height: 38px !important;
    border: 1px solid rgba(8, 32, 20, .13) !important;
    border-radius: 12px !important;
    background: #ffffff !important;
    padding: 0 11px !important;
    font-size: 13px !important;
}

.tw-checkout-page .checkout-shipping-fields > label:nth-of-type(1),
.tw-checkout-page .checkout-shipping-fields > label:nth-of-type(2),
.tw-checkout-page .checkout-shipping-fields > label:nth-of-type(5) {
    grid-column: 1 / -1 !important;
}

.tw-checkout-page .checkout-shipping-fields .checkout-grid {
    grid-column: 1 / -1 !important;
    display: grid !important;
    grid-template-columns: .8fr 1.2fr !important;
    gap: 10px !important;
}

.tw-checkout-summary.tw-cart-summary {
    position: sticky !important;
    top: 106px !important;
    display: block !important;
    width: 100% !important;
    max-width: 340px !important;
    padding: 18px !important;
    border: 1px solid rgba(8, 32, 20, .08) !important;
    border-radius: 24px !important;
    background: rgba(255, 255, 255, .92) !important;
    box-shadow: 0 18px 46px rgba(8, 32, 20, .08) !important;
}

.tw-checkout-summary.tw-cart-summary > * {
    box-sizing: border-box !important;
}

.tw-checkout-summary .tw-cart-summary-top {
    display: flex !important;
    justify-content: space-between !important;
    gap: 12px !important;
    align-items: flex-start !important;
    margin: 0 0 14px !important;
    padding: 0 !important;
    border: 0 !important;
}

.tw-checkout-summary .tw-cart-summary-top span {
    display: block !important;
    margin-bottom: 4px !important;
    color: #40a664 !important;
    font-size: 11px !important;
    letter-spacing: .08em !important;
    text-transform: uppercase !important;
    font-weight: 900 !important;
}

.tw-checkout-summary .tw-cart-summary-top h2 {
    margin: 0 !important;
    font-size: 24px !important;
    line-height: 1.05 !important;
    letter-spacing: -0.035em !important;
}

.tw-checkout-summary .tw-cart-summary-top > strong {
    color: #657064 !important;
    font-size: 12px !important;
    font-weight: 900 !important;
    white-space: nowrap !important;
}

.tw-checkout-summary .checkout-summary-row {
    display: flex !important;
    align-items: flex-start !important;
    justify-content: space-between !important;
    gap: 12px !important;
    margin: 0 !important;
    padding: 9px 0 !important;
    border-top: 1px solid rgba(8, 32, 20, .08) !important;
    color: #102418 !important;
}

.tw-checkout-summary .checkout-summary-row span {
    min-width: 0 !important;
    color: #102418 !important;
    font-size: 13px !important;
    font-weight: 900 !important;
    line-height: 1.2 !important;
}

.tw-checkout-summary .checkout-summary-row strong {
    color: #102418 !important;
    font-size: 13px !important;
    font-weight: 900 !important;
    white-space: nowrap !important;
}

.tw-checkout-summary .tw-coupon-box {
    display: block !important;
    margin: 12px 0 !important;
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
}

.tw-checkout-summary .tw-coupon-input-row {
    display: flex !important;
    gap: 8px !important;
}

.tw-checkout-summary .tw-coupon-input-row input {
    height: 40px !important;
    border-radius: 12px !important;
    font-size: 13px !important;
}

.tw-checkout-summary .tw-coupon-input-row button {
    height: 40px !important;
    border-radius: 12px !important;
    padding: 0 13px !important;
    font-size: 13px !important;
}

.tw-checkout-summary .tw-coupon-remove-form button {
    min-height: 34px !important;
    border-radius: 12px !important;
    font-size: 12px !important;
}

.tw-checkout-summary .tw-coupon-summary {
    margin: 10px 0 0 !important;
}

.tw-checkout-summary .tw-coupon-summary div {
    display: flex !important;
    justify-content: space-between !important;
    gap: 12px !important;
}

.tw-checkout-summary .tw-coupon-summary dt,
.tw-checkout-summary .tw-coupon-summary dd {
    font-size: 13px !important;
    line-height: 1.25 !important;
}

.tw-checkout-summary .checkout-summary-total {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 12px !important;
    margin: 10px 0 0 !important;
    padding: 12px 0 0 !important;
    border-top: 1px solid rgba(8, 32, 20, .08) !important;
}

.tw-checkout-summary .checkout-summary-total span,
.tw-checkout-summary .checkout-summary-total strong {
    font-size: 17px !important;
    font-weight: 950 !important;
    line-height: 1.1 !important;
}

.tw-checkout-summary .tw-cart-payment-preview {
    display: block !important;
    margin: 12px 0 0 !important;
    padding: 12px !important;
    border-radius: 16px !important;
    background: rgba(64, 166, 100, .07) !important;
}

.tw-checkout-summary .tw-cart-payment-preview span {
    display: block !important;
    margin-bottom: 4px !important;
    color: #247142 !important;
    font-size: 12px !important;
    font-weight: 900 !important;
}

.tw-checkout-summary .tw-cart-payment-preview p {
    margin: 0 !important;
    color: #5d6b60 !important;
    font-size: 12px !important;
    line-height: 1.35 !important;
}

.tw-checkout-summary .tw-cart-next {
    width: 100% !important;
    min-height: 44px !important;
    margin-top: 14px !important;
    border-radius: 999px !important;
    font-size: 14px !important;
}

.tw-checkout-summary .tw-cart-next[disabled] {
    opacity: .45 !important;
    cursor: not-allowed !important;
}

@media (max-width: 1050px) {
    .tw-checkout-head {
        display: grid !important;
        align-items: start !important;
    }

    .tw-checkout-head .tw-checkout-steps--checkout {
        overflow-x: auto !important;
        padding-bottom: 4px !important;
    }

    .tw-checkout-page .checkout-grid {
        grid-template-columns: 1fr !important;
    }

    .tw-checkout-page .checkout-form--compact {
        grid-template-columns: 1fr !important;
    }

    .tw-checkout-summary.tw-cart-summary {
        position: static !important;
        max-width: none !important;
    }
}

/* Checkout address UI fix v1 */
.tw-checkout-page {
    padding-top: 36px !important;
}

.tw-checkout-head {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto !important;
    align-items: end !important;
    gap: 32px !important;
    margin-bottom: 26px !important;
}

.tw-checkout-head .tw-checkout-intro {
    display: none !important;
}

.tw-checkout-head h1 {
    white-space: nowrap !important;
    font-size: clamp(48px, 5vw, 72px) !important;
    line-height: .92 !important;
    letter-spacing: -0.06em !important;
}

.tw-checkout-head .eyebrow {
    margin-bottom: 10px !important;
}

.tw-checkout-head .tw-checkout-steps--checkout {
    margin: 0 0 6px !important;
}

.tw-checkout-page .checkout-grid {
    margin-top: 0 !important;
}

/* Restore shipping-address accordion behavior */
.tw-checkout-page [data-shipping-fields],
.tw-checkout-page .checkout-shipping-fields {
    display: none !important;
}

.tw-checkout-page [data-shipping-card].is-active [data-shipping-fields],
.tw-checkout-page .checkout-address-card.is-active .checkout-shipping-fields {
    display: grid !important;
}

.tw-checkout-page [data-shipping-default] {
    display: block !important;
}

.tw-checkout-page [data-shipping-card].is-active [data-shipping-default],
.tw-checkout-page .checkout-address-card.is-active .checkout-shipping-default {
    display: none !important;
}

.tw-checkout-page .checkout-form--compact {
    align-items: start !important;
}

.tw-checkout-page .checkout-address-card {
    min-height: 0 !important;
}

.tw-checkout-page .checkout-address-card:not(.is-active) .checkout-shipping-fields {
    display: none !important;
}

@media (max-width: 1050px) {
    .tw-checkout-head {
        grid-template-columns: 1fr !important;
        align-items: start !important;
    }

    .tw-checkout-head h1 {
        white-space: normal !important;
        font-size: clamp(42px, 11vw, 64px) !important;
    }
}

/* Checkout header alignment v1 */
.tw-checkout-head {
    display: grid !important;
    grid-template-columns: 1fr !important;
    align-items: start !important;
    justify-content: start !important;
    gap: 18px !important;
    margin-bottom: 28px !important;
}

.tw-checkout-head > div {
    max-width: 620px !important;
}

.tw-checkout-head h1 {
    white-space: normal !important;
    font-size: clamp(48px, 5vw, 66px) !important;
    line-height: .94 !important;
    letter-spacing: -0.055em !important;
}

.tw-checkout-head .tw-checkout-steps--checkout {
    width: 100% !important;
    max-width: 560px !important;
    margin: 0 !important;
    justify-content: flex-start !important;
    overflow: visible !important;
}

.tw-checkout-head .tw-checkout-steps--checkout li {
    flex-shrink: 0 !important;
}

.tw-checkout-page .checkout-grid {
    margin-top: 0 !important;
    grid-template-columns: minmax(0, 760px) 340px !important;
    justify-content: start !important;
}

.tw-checkout-page .checkout-form--compact {
    margin-top: 0 !important;
}

@media (max-width: 1050px) {
    .tw-checkout-head .tw-checkout-steps--checkout {
        max-width: 100% !important;
        overflow-x: auto !important;
        padding-bottom: 4px !important;
    }

    .tw-checkout-page .checkout-grid {
        grid-template-columns: 1fr !important;
    }
}

/* Checkout cart-like compact */
.tw-checkout-page {
    padding-top: 44px !important;
    min-height: calc(100vh - 120px) !important;
}

.tw-checkout-shell {
    max-width: 1240px !important;
}

.tw-checkout-head {
    display: flex !important;
    align-items: flex-end !important;
    justify-content: space-between !important;
    gap: 32px !important;
    margin-bottom: 26px !important;
}

.tw-checkout-head > div {
    max-width: 460px !important;
}

.tw-checkout-head .tw-flow-back {
    margin-bottom: 10px !important;
}

.tw-checkout-head .eyebrow {
    margin-bottom: 8px !important;
}

.tw-checkout-head h1 {
    white-space: nowrap !important;
    font-size: clamp(42px, 4.2vw, 58px) !important;
    line-height: .95 !important;
    letter-spacing: -0.055em !important;
}

.tw-checkout-head .tw-checkout-steps--checkout {
    width: auto !important;
    max-width: none !important;
    margin: 0 0 8px !important;
    justify-content: flex-end !important;
    overflow: visible !important;
    flex-shrink: 0 !important;
}

.tw-checkout-page .checkout-grid {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) 340px !important;
    gap: 28px !important;
    align-items: start !important;
    justify-content: stretch !important;
    margin-top: 0 !important;
}

.tw-checkout-page .checkout-form--compact {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important;
    gap: 12px !important;
    padding: 14px !important;
    border-radius: 22px !important;
    min-height: 0 !important;
}

.tw-checkout-page .checkout-address-card {
    padding: 14px !important;
    border-radius: 18px !important;
    min-height: 0 !important;
}

.tw-checkout-page .checkout-address-head {
    margin-bottom: 8px !important;
}

.tw-checkout-page .checkout-address-head h2 {
    font-size: 16px !important;
    line-height: 1.08 !important;
}

.tw-checkout-page .checkout-address-lines {
    font-size: 13px !important;
    line-height: 1.32 !important;
}

.tw-checkout-page .checkout-shipping-default {
    margin-top: 4px !important;
    font-size: 13px !important;
}

.tw-checkout-page .checkout-checkbox {
    margin-top: 2px !important;
}

.tw-checkout-summary.tw-cart-summary {
    top: 96px !important;
}

@media (max-width: 1050px) {
    .tw-checkout-head {
        display: grid !important;
        align-items: start !important;
    }

    .tw-checkout-head h1 {
        white-space: normal !important;
    }

    .tw-checkout-head .tw-checkout-steps--checkout {
        justify-content: flex-start !important;
        overflow-x: auto !important;
        max-width: 100% !important;
        padding-bottom: 4px !important;
    }

    .tw-checkout-page .checkout-grid {
        grid-template-columns: 1fr !important;
    }

    .tw-checkout-page .checkout-form--compact {
        grid-template-columns: 1fr !important;
    }
}

/* Admin mail history and resend */
.admin-order-mail-history {
    border: 1px solid rgba(22, 70, 36, .12);
    border-radius: 18px;
    padding: 18px;
    background: rgba(247, 251, 244, .86);
    margin: 18px 0 22px;
}

.admin-order-mail-history-head {
    display: flex;
    justify-content: space-between;
    gap: 14px;
    align-items: center;
    margin-bottom: 12px;
}

.admin-order-mail-history-head h4 {
    margin: 0;
}

.admin-order-mail-history-head span,
.admin-order-mail-empty {
    color: rgba(26, 44, 31, .68);
    font-size: .92rem;
}

.admin-order-mail-events {
    display: grid;
    gap: 10px;
}

.admin-order-mail-event {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 14px;
    align-items: start;
    padding: 13px 14px;
    border-radius: 15px;
    background: #fff;
    border: 1px solid rgba(22, 70, 36, .1);
}

.admin-order-mail-event strong,
.admin-order-mail-event span,
.admin-order-mail-event em,
.admin-order-mail-event small {
    display: block;
}

.admin-order-mail-event strong {
    color: #18351f;
}

.admin-order-mail-event em,
.admin-order-mail-event small {
    color: rgba(26, 44, 31, .62);
    font-size: .86rem;
    font-style: normal;
}

.admin-order-mail-event-meta {
    display: grid;
    gap: 7px;
    justify-items: end;
    text-align: right;
}

.admin-order-mail-status {
    display: inline-flex;
    align-items: center;
    border-radius: 999px;
    padding: 5px 10px;
    font-size: .78rem;
    font-weight: 800;
}

.admin-order-mail-status-sent {
    background: rgba(34, 126, 62, .12);
    color: #1e743c;
}

.admin-order-mail-status-failed {
    background: rgba(176, 38, 38, .12);
    color: #a52727;
}

.admin-order-mail-status-prepared {
    background: rgba(194, 135, 30, .14);
    color: #8a5f12;
}

.admin-order-mail-status-skipped,
.admin-order-mail-status-unknown {
    background: rgba(48, 59, 51, .1);
    color: #4a554d;
}

.admin-order-mail-error {
    color: #a52727 !important;
}

.admin-order-mail-resend-form {
    margin: 0;
}

@media (max-width: 760px) {
    .admin-order-mail-event {
        grid-template-columns: 1fr;
    }

    .admin-order-mail-event-meta {
        justify-items: start;
        text-align: left;
    }
}

/* Unified flow clean final */
.tw-unified-flow {
    padding-top: 44px !important;
    padding-bottom: 8px !important;
    margin-bottom: 0 !important;
    min-height: 0 !important;
}

.tw-unified-flow .tw-checkout-shell {
    max-width: 1240px !important;
}

.tw-unified-flow .tw-checkout-head {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    grid-template-rows: auto auto !important;
    row-gap: 12px !important;
    column-gap: 0 !important;
    align-items: start !important;
    justify-content: stretch !important;
    width: 100% !important;
    min-height: 0 !important;
    height: auto !important;
    margin: 0 0 24px !important;
    padding: 0 !important;
    position: static !important;
}

.tw-unified-flow .tw-checkout-head > div {
    grid-row: 1 !important;
    grid-column: 1 !important;
    max-width: 420px !important;
    min-width: 0 !important;
}

.tw-unified-flow .tw-checkout-head .tw-flow-back {
    margin-bottom: 10px !important;
}

.tw-unified-flow .tw-checkout-head .eyebrow {
    margin-bottom: 8px !important;
}

.tw-unified-flow .tw-checkout-head h1 {
    display: block !important;
    width: auto !important;
    max-width: 420px !important;
    margin: 0 !important;
    white-space: nowrap !important;
    font-size: clamp(42px, 4.2vw, 58px) !important;
    line-height: .95 !important;
    letter-spacing: -0.055em !important;
}

html body .tw-unified-flow .tw-checkout-head > .tw-checkout-steps.tw-checkout-steps--checkout {
    grid-row: 2 !important;
    grid-column: 1 !important;
    justify-self: end !important;
    align-self: start !important;
    display: flex !important;
    width: max-content !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    justify-content: flex-end !important;
    position: static !important;
    right: auto !important;
    bottom: auto !important;
    left: auto !important;
    top: auto !important;
    transform: none !important;
    overflow: visible !important;
}

html body .tw-unified-flow .tw-checkout-head > .tw-checkout-steps.tw-checkout-steps--checkout li {
    flex-shrink: 0 !important;
}

.tw-unified-flow .tw-unified-grid {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) 340px !important;
    gap: 28px !important;
    align-items: start !important;
    justify-content: stretch !important;
    margin-top: 0 !important;
}

.tw-unified-flow .tw-unified-main {
    display: block !important;
    min-width: 0 !important;
    min-height: 0 !important;
    height: auto !important;
}

.tw-unified-flow .checkout-form--compact,
body.tw-shipping-different-active .tw-unified-flow .checkout-form--compact,
html.tw-shipping-different-active .tw-unified-flow .checkout-form--compact {
    height: auto !important;
    min-height: 0 !important;
    align-items: start !important;
    padding: 14px !important;
    padding-bottom: 14px !important;
}

.tw-unified-flow .checkout-address-card,
body.tw-shipping-different-active .tw-unified-flow .checkout-address-card,
html.tw-shipping-different-active .tw-unified-flow .checkout-address-card {
    height: auto !important;
    min-height: 0 !important;
}

.tw-unified-flow .tw-cart-summary,
.tw-unified-flow .tw-checkout-summary,
.tw-unified-flow .tw-checkout-summary.tw-cart-summary,
body.tw-shipping-different-active .tw-unified-flow .tw-cart-summary,
body.tw-shipping-different-active .tw-unified-flow .tw-checkout-summary,
body.tw-shipping-different-active .tw-unified-flow .tw-checkout-summary.tw-cart-summary,
html.tw-shipping-different-active .tw-unified-flow .tw-cart-summary,
html.tw-shipping-different-active .tw-unified-flow .tw-checkout-summary,
html.tw-shipping-different-active .tw-unified-flow .tw-checkout-summary.tw-cart-summary {
    position: sticky !important;
    top: 96px !important;
    align-self: start !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
}

.tw-unified-flow .tw-cart-summary-row,
.tw-unified-flow .tw-cart-summary-total {
    display: flex !important;
    justify-content: space-between !important;
    gap: 14px !important;
    align-items: center !important;
}

.tw-unified-flow .tw-cart-summary-row {
    padding: 11px 0 !important;
    border-top: 1px solid rgba(8, 32, 20, .08) !important;
    border-bottom: 1px solid rgba(8, 32, 20, .08) !important;
}

.tw-unified-flow .tw-cart-summary-total {
    padding-top: 12px !important;
    margin-top: 10px !important;
    border-top: 1px solid rgba(8, 32, 20, .08) !important;
}

.tw-unified-flow .tw-cart-summary-coupon .tw-coupon-box {
    margin: 12px 0 !important;
    padding: 0 !important;
    border-top: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
}

.tw-unified-flow .checkout-submit-button {
    display: none !important;
}

.tw-unified-flow [data-shipping-fields],
.tw-unified-flow .checkout-shipping-fields {
    display: none !important;
}

.tw-unified-flow [data-shipping-card].is-active [data-shipping-fields],
.tw-unified-flow .checkout-address-card.is-active .checkout-shipping-fields {
    display: grid !important;
}

.tw-unified-flow [data-shipping-default] {
    display: block !important;
}

.tw-unified-flow [data-shipping-card].is-active [data-shipping-default],
.tw-unified-flow .checkout-address-card.is-active .checkout-shipping-default {
    display: none !important;
}

@media (max-width: 1150px) {
    .tw-unified-flow {
        padding-bottom: 8px !important;
    }

    .tw-unified-flow .tw-checkout-head {
        row-gap: 14px !important;
        margin-bottom: 24px !important;
    }

    .tw-unified-flow .tw-checkout-head > div {
        max-width: none !important;
    }

    .tw-unified-flow .tw-checkout-head h1 {
        max-width: none !important;
        white-space: normal !important;
    }

    html body .tw-unified-flow .tw-checkout-head > .tw-checkout-steps.tw-checkout-steps--checkout {
        justify-self: start !important;
        width: 100% !important;
        max-width: 100% !important;
        justify-content: flex-start !important;
        overflow-x: auto !important;
        padding-bottom: 4px !important;
    }

    .tw-unified-flow .tw-unified-grid {
        grid-template-columns: 1fr !important;
    }

    .tw-unified-flow .checkout-form--compact {
        grid-template-columns: 1fr !important;
    }

    .tw-unified-flow .tw-cart-summary,
    .tw-unified-flow .tw-checkout-summary,
    .tw-unified-flow .tw-checkout-summary.tw-cart-summary {
        position: static !important;
    }
}

/* Admin collapsible mail history */
.admin-order-mail-history {
    overflow: hidden;
}

.admin-order-mail-history > summary.admin-order-mail-history-head {
    cursor: pointer;
    list-style: none;
    user-select: none;
}

.admin-order-mail-history > summary.admin-order-mail-history-head::-webkit-details-marker {
    display: none;
}

.admin-order-mail-history > summary.admin-order-mail-history-head::after {
    content: "Aufklappen";
    display: inline-flex;
    align-items: center;
    border-radius: 999px;
    padding: 5px 10px;
    background: rgba(7, 17, 11, .08);
    color: #07110b;
    font-size: .78rem;
    font-weight: 800;
}

.admin-order-mail-history[open] > summary.admin-order-mail-history-head::after {
    content: "Zuklappen";
}

.admin-order-mail-history-body {
    margin-top: 12px;
}

/* Unified flow timeline aligned to summary */
.tw-unified-flow .tw-checkout-head {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) 340px !important;
    grid-template-rows: auto !important;
    column-gap: 28px !important;
    row-gap: 0 !important;
    align-items: end !important;
    justify-content: stretch !important;
    width: 100% !important;
    min-height: 128px !important;
    height: auto !important;
    margin: 0 0 24px !important;
    padding: 0 !important;
    position: static !important;
}

.tw-unified-flow .tw-checkout-head > div {
    grid-column: 1 !important;
    grid-row: 1 !important;
    max-width: 420px !important;
    min-width: 0 !important;
}

html body .tw-unified-flow .tw-checkout-head > .tw-checkout-steps.tw-checkout-steps--checkout {
    grid-column: 2 !important;
    grid-row: 1 !important;
    justify-self: end !important;
    align-self: end !important;
    display: flex !important;
    width: max-content !important;
    max-width: none !important;
    margin: 0 0 10px !important;
    padding: 0 !important;
    justify-content: flex-end !important;
    position: static !important;
    right: auto !important;
    bottom: auto !important;
    left: auto !important;
    top: auto !important;
    transform: none !important;
    overflow: visible !important;
}

html body .tw-unified-flow .tw-checkout-head > .tw-checkout-steps.tw-checkout-steps--checkout li {
    flex-shrink: 0 !important;
}

@media (max-width: 1150px) {
    .tw-unified-flow .tw-checkout-head {
        grid-template-columns: 1fr !important;
        grid-template-rows: auto auto !important;
        row-gap: 14px !important;
        min-height: 0 !important;
        margin-bottom: 24px !important;
    }

    .tw-unified-flow .tw-checkout-head > div {
        grid-column: 1 !important;
        grid-row: 1 !important;
        max-width: none !important;
    }

    html body .tw-unified-flow .tw-checkout-head > .tw-checkout-steps.tw-checkout-steps--checkout {
        grid-column: 1 !important;
        grid-row: 2 !important;
        justify-self: start !important;
        width: 100% !important;
        max-width: 100% !important;
        justify-content: flex-start !important;
        overflow-x: auto !important;
        padding-bottom: 4px !important;
        margin-bottom: 0 !important;
    }
}

/* Unified flow steps row final v2 */
.tw-unified-flow .tw-checkout-head {
    display: block !important;
    min-height: 0 !important;
    height: auto !important;
    margin: 0 0 12px !important;
    padding: 0 !important;
    position: static !important;
}

.tw-unified-flow .tw-checkout-head > div {
    max-width: 420px !important;
}

.tw-unified-flow .tw-checkout-head > .tw-checkout-steps,
.tw-unified-flow .tw-checkout-head > .tw-checkout-steps--checkout {
    display: none !important;
}

.tw-unified-flow .tw-flow-steps-row {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) 340px !important;
    column-gap: 28px !important;
    align-items: start !important;
    width: 100% !important;
    margin: 0 0 24px !important;
    padding: 0 !important;
}

html body .tw-unified-flow .tw-flow-steps-row > .tw-checkout-steps.tw-checkout-steps--checkout {
    grid-column: 2 !important;
    justify-self: end !important;
    align-self: start !important;
    display: flex !important;
    width: max-content !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 0 !important;
    justify-content: flex-end !important;
    position: static !important;
    right: auto !important;
    bottom: auto !important;
    left: auto !important;
    top: auto !important;
    transform: none !important;
    overflow: visible !important;
}

html body .tw-unified-flow .tw-flow-steps-row > .tw-checkout-steps.tw-checkout-steps--checkout li {
    flex-shrink: 0 !important;
}

.tw-unified-flow .tw-unified-grid {
    margin-top: 0 !important;
}

@media (max-width: 1150px) {
    .tw-unified-flow .tw-flow-steps-row {
        grid-template-columns: 1fr !important;
        margin-bottom: 24px !important;
    }

    html body .tw-unified-flow .tw-flow-steps-row > .tw-checkout-steps.tw-checkout-steps--checkout {
        grid-column: 1 !important;
        justify-self: start !important;
        width: 100% !important;
        max-width: 100% !important;
        justify-content: flex-start !important;
        overflow-x: auto !important;
        padding-bottom: 4px !important;
    }
}

/* Unified flow address declutter */
.tw-unified-flow .checkout-form--compact,
body.tw-shipping-different-active .tw-unified-flow .checkout-form--compact,
html.tw-shipping-different-active .tw-unified-flow .checkout-form--compact {
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    height: auto !important;
    min-height: 0 !important;
    align-items: start !important;
}

.tw-unified-flow .checkout-address-card,
body.tw-shipping-different-active .tw-unified-flow .checkout-address-card,
html.tw-shipping-different-active .tw-unified-flow .checkout-address-card {
    padding: 18px !important;
    border: 1px solid rgba(8, 32, 20, .08) !important;
    border-radius: 22px !important;
    background: rgba(255, 255, 255, .88) !important;
    box-shadow: 0 10px 28px rgba(8, 32, 20, .045) !important;
    height: auto !important;
    min-height: 0 !important;
    align-self: start !important;
}

.tw-unified-flow .checkout-address-card--locked {
    background: rgba(255, 255, 255, .78) !important;
}

.tw-unified-flow .checkout-address-card--shipping.is-active {
    background: rgba(255, 255, 255, .92) !important;
}

.tw-unified-flow .checkout-address-card--locked .checkout-address-lines {
    margin-top: 8px !important;
}

.tw-unified-flow .checkout-shipping-fields {
    margin-top: 14px !important;
}

.tw-unified-flow .checkout-shipping-fields input {
    background: #ffffff !important;
}

@media (max-width: 1150px) {
    .tw-unified-flow .checkout-form--compact {
        gap: 12px !important;
    }
}