/* Duck Mark Order Flow Control v2.0.0 */
/* Fully scoped preview design. 기존 cart/checkout 자동 변경 없음. */

.clof,
.clof * {
  box-sizing: border-box;
}

.clof {
  --clof-bg: #050604;
  --clof-card: #0d0f0a;
  --clof-card2: #11140d;
  --clof-line: rgba(143, 185, 43, 0.16);
  --clof-line-soft: rgba(255,255,255,0.07);
  --clof-green: #8fb92b;
  --clof-green2: #bde93a;
  --clof-text: #f4f7e9;
  --clof-muted: rgba(247,251,232,0.62);
  --clof-dim: rgba(247,251,232,0.44);

  width: min(100%, 1240px);
  margin: 0 auto 40px;
  padding: 16px 0 28px;
  color: var(--clof-text);
  font-family: inherit;
}

.clof a {
  text-decoration: none !important;
}

.clof-steps {
  margin: 0 0 18px;
  padding: 18px 18px 12px;
  border-radius: 12px;
  border: 1px solid var(--clof-line);
  background:
    radial-gradient(circle at 20% 0%, rgba(143, 185, 43, 0.08), transparent 38%),
    linear-gradient(180deg, #10120c 0%, #080906 100%);
  box-shadow: 0 18px 44px rgba(0,0,0,0.34);
}

.clof-steps__row {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
}

.clof-steps__item {
  position: relative;
  display: grid;
  justify-items: center;
  gap: 7px;
  color: rgba(247, 251, 232, 0.46);
  font-size: 12px;
  font-weight: 900;
}

.clof-steps__item::after {
  content: "";
  position: absolute;
  left: calc(50% + 22px);
  right: calc(-50% + 22px);
  top: 10px;
  height: 2px;
  background: rgba(255,255,255,0.10);
}

.clof-steps__item:last-child::after {
  display: none;
}

.clof-steps__item span {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 23px;
  height: 23px;
  border-radius: 999px;
  background: rgba(255,255,255,0.09);
  color: rgba(247, 251, 232, 0.64);
  font-size: 12px;
  font-weight: 950;
  line-height: 1;
  position: relative;
  z-index: 2;
}

.clof-steps__item strong {
  font-size: 12px;
  font-weight: 950;
}

.clof-steps__item.is-active {
  color: var(--clof-green);
}

.clof-steps__item.is-active span {
  background: var(--clof-green);
  color: #101707;
  box-shadow: 0 0 0 5px rgba(143, 185, 43, 0.10);
}

.clof-steps p {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 6px;
  margin: 12px 0 0 !important;
  color: var(--clof-green);
  font-size: 12px;
  font-weight: 950;
}

.clof-steps p::before {
  content: "◇";
}

.clof__crumb {
  margin: 0 0 14px;
  color: var(--clof-muted);
  font-size: 12px;
  font-weight: 850;
}

.clof__crumb span {
  color: var(--clof-green);
  padding: 0 6px;
}

.clof__layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 350px;
  gap: 20px;
  align-items: start;
}

.clof__main,
.clof__side {
  min-width: 0;
}

.clof__side {
  display: grid;
  gap: 14px;
}

.clof-card,
.clof-help,
.clof-ship {
  border-radius: 14px;
  border: 1px solid var(--clof-line);
  background:
    radial-gradient(circle at 18% 0%, rgba(143, 185, 43, 0.045), transparent 42%),
    linear-gradient(180deg, #10120c 0%, #080906 100%);
  box-shadow: 0 18px 40px rgba(0,0,0,0.28);
}

.clof-card {
  padding: 18px;
}

.clof-card__title {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  margin: 0 0 16px;
}

.clof-card__title > span {
  color: var(--clof-green);
  font-size: 21px;
  line-height: 1.1;
}

.clof-card__title h1 {
  margin: 0 0 4px !important;
  color: #fff7dc !important;
  font-size: 20px !important;
  font-weight: 950 !important;
  line-height: 1.2 !important;
}

.clof-card__title p {
  margin: 0 !important;
  color: var(--clof-muted);
  font-size: 12px;
  font-weight: 800;
}

/* cart */
.clof-cart {
  margin: 0 0 14px;
}

.clof-cart__header,
.clof-cart-item {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 108px 96px 108px;
  gap: 14px;
  align-items: center;
}

.clof-cart__header {
  padding: 0 0 10px;
  border-bottom: 1px solid var(--clof-line-soft);
  color: rgba(247,251,232,0.58);
  font-size: 11px;
  font-weight: 950;
}

.clof-cart__header span:nth-child(n+2) {
  text-align: right;
}

.clof-cart-item {
  padding: 16px 0;
  border-bottom: 1px solid var(--clof-line-soft);
}

.clof-cart-item__product {
  display: grid;
  grid-template-columns: 78px minmax(0, 1fr);
  gap: 13px;
  align-items: center;
  min-width: 0;
}

.clof-cart-item__img {
  display: block;
  overflow: hidden;
  width: 78px;
  height: 78px;
  border-radius: 10px;
  border: 1px solid rgba(143, 185, 43, 0.16);
  background: #050604;
}

.clof-cart-item__img img {
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover;
}

.clof-cart-item__body {
  min-width: 0;
}

.clof-cart-item__name {
  display: block;
  color: var(--clof-text) !important;
  font-size: 13px;
  font-weight: 950;
  line-height: 1.45;
}

.clof-cart-item__meta {
  margin-top: 5px;
  color: rgba(247,251,232,0.54);
  font-size: 10px;
  font-weight: 850;
  line-height: 1.5;
}

.clof-cart-item__meta dl,
.clof-cart-item__meta dt,
.clof-cart-item__meta dd,
.clof-cart-item__meta p {
  display: inline;
  margin: 0 !important;
  padding: 0 !important;
}

.clof-cart-item__remove {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 28px;
  margin-top: 9px;
  padding: 0 13px;
  border-radius: 7px;
  border: 1px solid rgba(255,255,255,0.10);
  background: rgba(255,255,255,0.035);
  color: rgba(247,251,232,0.70) !important;
  font-size: 11px;
  font-weight: 900;
}

.clof-cart-item__price,
.clof-cart-item__subtotal {
  color: #fff7dc;
  font-size: 13px;
  font-weight: 950;
  text-align: right;
}

.clof-cart-item__qty {
  display: flex;
  justify-content: flex-end;
}

.clof-cart-item__qty .quantity {
  display: inline-flex !important;
}

.clof-cart-item__qty input.qty,
.clof-qty-static {
  width: 62px !important;
  min-height: 36px;
  border-radius: 8px !important;
  border: 1px solid rgba(143, 185, 43, 0.18) !important;
  background: rgba(0,0,0,0.30) !important;
  color: var(--clof-text) !important;
  text-align: center;
  font-size: 13px;
  font-weight: 950;
}

.clof-qty-static {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.clof-cart__bottom {
  display: grid;
  gap: 15px;
  padding-top: 16px;
}

.clof-clear {
  justify-self: start;
  min-height: 34px;
  padding: 0 14px !important;
  border-radius: 8px !important;
  border: 1px solid rgba(255,255,255,0.10) !important;
  background: rgba(255,255,255,0.035) !important;
  color: rgba(247,251,232,0.74) !important;
  font-size: 11px !important;
  font-weight: 900 !important;
}

.clof-coupon {
  padding-top: 12px;
  border-top: 1px solid var(--clof-line-soft);
}

.clof-coupon label {
  display: block;
  margin: 0 0 9px;
  color: var(--clof-text);
  font-size: 13px;
  font-weight: 950;
}

.clof-coupon label::before {
  content: "◇";
  color: var(--clof-green);
  margin-right: 8px;
}

.clof-coupon div {
  display: flex;
  width: min(100%, 360px);
}

.clof-coupon input {
  flex: 1 1 auto;
  min-width: 0;
  min-height: 38px;
  padding: 0 12px !important;
  border-radius: 8px 0 0 8px !important;
  border: 1px solid rgba(143, 185, 43, 0.16) !important;
  background: rgba(0,0,0,0.30) !important;
  color: var(--clof-text) !important;
  font-size: 12px;
  font-weight: 850;
}

.clof-coupon button {
  flex: 0 0 78px;
  min-height: 38px;
  border: 0 !important;
  border-radius: 0 8px 8px 0 !important;
  background: var(--clof-green) !important;
  color: #101707 !important;
  font-size: 12px !important;
  font-weight: 950 !important;
}

/* summary */
.clof-summary {
  position: sticky;
  top: 16px;
}

.clof-small-title {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 14px;
}

.clof-small-title span {
  color: var(--clof-green);
  font-size: 18px;
  line-height: 1;
}

.clof-small-title strong {
  color: #fff7dc;
  font-size: 14px;
  font-weight: 950;
}

.clof-summary__rows > div {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 11px 0;
  border-bottom: 1px solid var(--clof-line-soft);
}

.clof-summary__rows span {
  color: rgba(247,251,232,0.68);
  font-size: 12px;
  font-weight: 900;
}

.clof-summary__rows strong {
  color: var(--clof-text);
  font-size: 12px;
  font-weight: 950;
  text-align: right;
}

.clof-summary__rows .is-total {
  align-items: baseline;
  border-bottom: 0;
  padding: 18px 0 14px;
}

.clof-summary__rows .is-total strong {
  color: var(--clof-green);
  font-size: 28px;
  line-height: 1;
}

.clof-summary__btn {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  margin-top: 8px;
  border-radius: 8px;
  background: linear-gradient(180deg, #b7eb35 0%, #93c70f 100%);
  color: #101707 !important;
  font-size: 14px;
  font-weight: 950;
  box-shadow: 0 12px 24px rgba(143, 185, 43, 0.18);
}

.clof-summary__btn::after {
  content: "›";
  margin-left: 12px;
  font-size: 24px;
  line-height: 1;
}

.clof-summary__secure {
  margin: 10px 0 0 !important;
  color: rgba(247,251,232,0.48);
  font-size: 11px;
  font-weight: 850;
  text-align: center;
}

.clof-summary__secure::before {
  content: "▵";
  margin-right: 5px;
  color: var(--clof-green);
}

/* trust/help */
.clof-trust {
  display: grid;
  gap: 0;
}

.clof-trust__item {
  display: grid;
  grid-template-columns: 38px minmax(0,1fr);
  gap: 10px;
  align-items: center;
  padding: 12px 0;
  border-bottom: 1px solid var(--clof-line-soft);
}

.clof-trust__item:last-child {
  border-bottom: 0;
  padding-bottom: 0;
}

.clof-trust__item:first-child {
  padding-top: 0;
}

.clof-trust__item > span {
  color: var(--clof-green);
  font-size: 30px;
  line-height: 1;
  text-align: center;
}

.clof-trust__item strong {
  display: block;
  color: var(--clof-green);
  font-size: 13px;
  font-weight: 950;
  line-height: 1.3;
}

.clof-trust__item em {
  display: block;
  margin-top: 3px;
  color: rgba(247,251,232,0.58);
  font-size: 11px;
  font-style: normal;
  font-weight: 800;
  line-height: 1.45;
}

.clof-help {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: end;
  min-height: 138px;
  overflow: hidden;
  padding: 18px 16px;
  background:
    linear-gradient(90deg, rgba(8, 9, 6, 0.92), rgba(8, 9, 6, 0.46)),
    var(--clof-help-bg, none),
    radial-gradient(circle at 84% 30%, rgba(143, 185, 43, 0.16), transparent 30%),
    radial-gradient(circle at 16% 88%, rgba(255, 130, 29, 0.10), transparent 34%),
    linear-gradient(180deg, #10120c 0%, #080906 100%);
  background-size: cover;
  background-position: center;
}

.clof-help__body {
  position: relative;
  z-index: 1;
}

.clof-help strong {
  display: block;
  color: var(--clof-text);
  font-size: 15px;
  font-weight: 950;
  margin: 0 0 6px;
}

.clof-help p {
  margin: 0 0 12px !important;
  color: rgba(247,251,232,0.62);
  font-size: 12px;
  font-weight: 850;
  line-height: 1.55;
}

.clof-help a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 34px;
  padding: 0 14px;
  border-radius: 8px;
  background: var(--clof-green);
  color: #101707 !important;
  font-size: 12px;
  font-weight: 950;
}

.clof-help img {
  position: relative;
  z-index: 1;
  width: 94px;
  max-width: 36vw;
  height: auto;
  margin: 0 -6px -8px 8px;
  filter: drop-shadow(0 14px 18px rgba(0,0,0,0.42));
}

/* recommendations */
.clof-reco {
  margin: 0 0 14px;
}

.clof-reco__list {
  display: grid;
  grid-template-columns: repeat(4, minmax(0,1fr));
  gap: 12px;
}

.clof-reco-card {
  min-width: 0;
  padding: 8px;
  border-radius: 12px;
  border: 1px solid rgba(143, 185, 43, 0.14);
  background: rgba(255,255,255,0.028);
}

.clof-reco-card__img {
  display: block;
  overflow: hidden;
  aspect-ratio: 1 / 1;
  margin: 0 0 8px;
  border-radius: 9px;
  background: #050604;
}

.clof-reco-card__img img {
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover;
}

.clof-reco-card__name {
  display: -webkit-box;
  min-height: 32px;
  overflow: hidden;
  color: var(--clof-text) !important;
  font-size: 11px;
  font-weight: 950;
  line-height: 1.45;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

.clof-reco-card__meta {
  display: inline-flex;
  margin: 5px 0 0;
  padding: 2px 6px;
  border-radius: 999px;
  border: 1px solid rgba(143, 185, 43, 0.22);
  color: var(--clof-green);
  font-size: 9px;
  font-weight: 950;
}

.clof-reco-card__price {
  margin: 6px 0 8px;
  color: #fff7dc;
  font-size: 12px;
  font-weight: 950;
}

.clof-reco-card__price ins {
  text-decoration: none;
}

.clof-reco-card__price del {
  opacity: .45;
}

.clof-reco__btn {
  display: flex !important;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 32px;
  padding: 0 8px !important;
  border-radius: 7px !important;
  border: 0 !important;
  background: linear-gradient(180deg, #b7eb35 0%, #93c70f 100%) !important;
  color: #101707 !important;
  font-size: 11px !important;
  font-weight: 950 !important;
  line-height: 1 !important;
}

/* shipping */
.clof-ship {
  position: relative;
  display: flex;
  align-items: center;
  gap: 14px;
  min-height: 84px;
  padding: 16px 18px;
  overflow: hidden;
  border-color: rgba(143, 185, 43, 0.25);
  background:
    linear-gradient(90deg, rgba(5, 6, 4, 0.88), rgba(5, 6, 4, 0.42)),
    var(--clof-shipping-bg, none),
    radial-gradient(circle at 82% 45%, rgba(143, 185, 43, 0.18), transparent 28%),
    radial-gradient(circle at 18% 40%, rgba(255, 130, 29, 0.11), transparent 34%),
    linear-gradient(135deg, #12160c 0%, #060704 100%);
  background-size: cover;
  background-position: center;
}

.clof-ship__icon {
  flex: 0 0 42px;
  color: var(--clof-green);
  font-size: 36px;
  line-height: 1;
}

.clof-ship strong {
  display: block;
  color: var(--clof-green2);
  font-size: 20px;
  font-weight: 950;
  line-height: 1.25;
}

.clof-ship em {
  display: block;
  margin-top: 4px;
  color: rgba(247,251,232,0.62);
  font-size: 12px;
  font-style: normal;
  font-weight: 850;
}

.clof-empty {
  padding: 34px 10px;
  text-align: center;
}

.clof-empty p {
  margin: 0 0 14px !important;
  color: var(--clof-muted);
  font-size: 14px;
  font-weight: 850;
}

.clof-empty a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 40px;
  padding: 0 18px;
  border-radius: 8px;
  background: var(--clof-green);
  color: #101707 !important;
  font-size: 13px;
  font-weight: 950;
}

/* Force page space when theme is too narrow */
.entry-content > .clof {
  max-width: 1240px !important;
}

@media (max-width: 1040px) {
  .clof__layout {
    grid-template-columns: 1fr;
  }

  .clof-summary {
    position: static;
  }

  .clof-reco__list {
    grid-template-columns: repeat(4, 160px);
    overflow-x: auto;
    padding-bottom: 4px;
    scrollbar-width: none;
  }

  .clof-reco__list::-webkit-scrollbar {
    display: none;
  }
}

/* v1.2.1 add-to-cart notices */
.clof__notices {
  margin: 0 0 14px;
}

.clof__notices .woocommerce-message,
.clof__notices .woocommerce-info,
.clof__notices .woocommerce-error {
  margin: 0 0 10px !important;
  border-radius: 12px;
  border-top: 0 !important;
  border-left: 3px solid var(--clof-green) !important;
  background: #10120c !important;
  color: var(--clof-text) !important;
  font-size: 13px;
  font-weight: 850;
}

.clof__notices .woocommerce-message::before,
.clof__notices .woocommerce-info::before {
  color: var(--clof-green) !important;
}

.clof-reco__btn--view {
  background: rgba(143, 185, 43, 0.08) !important;
  color: var(--clof-green) !important;
  border: 1px solid rgba(143, 185, 43, 0.28) !important;
}


/* v1.2.2 variable product option picker */
.clof-reco-var {
  display: grid;
  gap: 7px;
}

.clof-reco-var__select {
  width: 100%;
  min-height: 32px;
  padding: 0 8px !important;
  border-radius: 7px !important;
  border: 1px solid rgba(143, 185, 43, 0.18) !important;
  background: rgba(0,0,0,0.30) !important;
  color: var(--clof-text) !important;
  font-size: 10px;
  font-weight: 850;
}

.clof-reco-var__select option {
  background: #10120c;
  color: #f4f7e9;
}

.clof-reco__btn--variation:disabled {
  opacity: .45;
  cursor: not-allowed;
  filter: grayscale(.35);
}


/* v1.2.3 mobile visibility hardening */
.clof {
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
}

.clof__layout,
.clof__main,
.clof__side,
.clof-card,
.clof-help,
.clof-ship,
.clof-steps {
  visibility: visible !important;
  opacity: 1 !important;
}

/* v1.2.4 fixes: darker tone, mobile alignment, coupon stays here */
.clof {
  --clof-bg: #040503;
  --clof-card: #090b07;
  --clof-card2: #0d1009;
}

.clof-card,
.clof-help,
.clof-ship,
.clof-steps {
  background:
    radial-gradient(circle at 18% 0%, rgba(143, 185, 43, 0.028), transparent 42%),
    linear-gradient(180deg, #0b0d08 0%, #050604 100%);
}

.clof-ship {
  background:
    linear-gradient(90deg, rgba(5, 6, 4, 0.94), rgba(5, 6, 4, 0.70)),
    var(--clof-shipping-bg, none),
    radial-gradient(circle at 82% 45%, rgba(143, 185, 43, 0.10), transparent 28%),
    linear-gradient(135deg, #0d1009 0%, #050604 100%);
}

.clof-ship strong {
  text-shadow: 0 2px 12px rgba(0,0,0,.55);
}

.clof-cart__header span:nth-child(3),
.clof-cart-item__qty {
  text-align: center;
  justify-content: center;
}

.clof-cart__header span:nth-child(2),
.clof-cart__header span:nth-child(4),
.clof-cart-item__price,
.clof-cart-item__subtotal {
  text-align: right;
}

.clof-reco-var__select {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.clof-reco-var__select,
.clof-reco-var__select option {
  font-family: inherit;
}

/* Native select opened list can ignore CSS, but closed value stays readable */
.clof-reco-var__select option {
  font-size: 12px;
}

/* Coupon form should not look like Woo default */
.clof-cart__form button[name="clof_apply_coupon"],
.clof-cart__form button[name="clof_update_cart"] {
  cursor: pointer;
}

/* v1.2.5 recommendation add-to-cart via local POST */
.clof-reco-add {
  margin: 0;
  padding: 0;
}

.clof-reco-add button.clof-reco__btn {
  cursor: pointer;
}

.clof-reco-var {
  margin: 0;
}


/* v1.2.6 custom option panel + hard mobile cart visibility */
.clof-reco-var {
  position: relative;
  display: grid;
  gap: 7px;
  margin: 0;
  z-index: 3;
}

.clof-var-open {
  width: 100%;
  min-height: 32px;
  padding: 0 28px 0 9px !important;
  border-radius: 7px !important;
  border: 1px solid rgba(143, 185, 43, 0.22) !important;
  background: rgba(0,0,0,0.36) !important;
  color: var(--clof-text) !important;
  font-size: 10px !important;
  font-weight: 900 !important;
  text-align: left;
  cursor: pointer;
  position: relative;
}

.clof-var-open::after {
  content: "⌄";
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-54%);
  color: var(--clof-green);
  font-size: 12px;
}

.clof-var-selected {
  min-height: 18px;
  overflow: hidden;
  color: rgba(247,251,232,.60);
  font-size: 10px;
  font-weight: 850;
  line-height: 1.45;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.clof-var-panel {
  position: absolute;
  left: 0;
  right: 0;
  bottom: calc(100% + 8px);
  z-index: 9999;
  overflow: hidden;
  border-radius: 12px;
  border: 1px solid rgba(143, 185, 43, 0.28);
  background: #080a06;
  box-shadow: 0 18px 34px rgba(0,0,0,.55);
}

.clof-var-panel__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 10px 10px;
  border-bottom: 1px solid rgba(255,255,255,.08);
}

.clof-var-panel__head strong {
  color: #f4f7e9;
  font-size: 12px;
  font-weight: 950;
}

.clof-var-close {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  flex: 0 0 28px;
  width: 28px;
  height: 28px;
  padding: 0 !important;
  border-radius: 999px !important;
  border: 1px solid rgba(255,255,255,.12) !important;
  background: rgba(255,255,255,.06) !important;
  color: rgba(247,251,232,.82) !important;
  font-size: 18px !important;
  font-weight: 900 !important;
  line-height: 1 !important;
  cursor: pointer;
}

.clof-var-list {
  display: grid;
  gap: 0;
  max-height: 220px;
  overflow-y: auto;
}

.clof-var-choice {
  width: 100%;
  min-height: 38px;
  padding: 8px 10px !important;
  border: 0 !important;
  border-bottom: 1px solid rgba(255,255,255,.065) !important;
  background: transparent !important;
  color: rgba(247,251,232,.84) !important;
  font-size: 11px !important;
  font-weight: 850 !important;
  line-height: 1.35 !important;
  text-align: left;
  cursor: pointer;
}

.clof-var-choice.is-selected,
.clof-var-choice:hover {
  background: rgba(143,185,43,.13) !important;
  color: #f4f7e9 !important;
}

.clof .clof-reco__btn--variation:disabled {
  opacity: .45 !important;
  cursor: not-allowed !important;
}

/* old select fallback hidden if cached markup remains */
.clof .clof-reco-var__select {
  display: none !important;
}

/* v1.2.7 remove visible update button + force modal close X */
.clof-clear {
  display: none !important;
}

.clof-var-panel {
  overflow: visible !important;
}

.clof-var-panel__head {
  min-height: 46px !important;
  position: relative !important;
  z-index: 1000000 !important;
}

.clof-var-close {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  position: relative !important;
  z-index: 1000001 !important;
  flex: 0 0 32px !important;
  width: 32px !important;
  height: 32px !important;
  min-width: 32px !important;
  min-height: 32px !important;
  margin: 0 !important;
  padding: 0 !important;
  border-radius: 999px !important;
  border: 1px solid rgba(247,251,232,.28) !important;
  background: rgba(255,255,255,.10) !important;
  color: #f4f7e9 !important;
  font-family: Arial, Helvetica, sans-serif !important;
  font-size: 0 !important;
  font-weight: 900 !important;
  line-height: 1 !important;
  text-indent: 0 !important;
  opacity: 1 !important;
  visibility: visible !important;
  cursor: pointer !important;
  appearance: none !important;
  -webkit-appearance: none !important;
}

.clof-var-close span {
  display: block !important;
  color: #f4f7e9 !important;
  font-family: Arial, Helvetica, sans-serif !important;
  font-size: 22px !important;
  font-weight: 900 !important;
  line-height: 1 !important;
  opacity: 1 !important;
  visibility: visible !important;
  transform: translateY(-1px);
}

.clof-var-close::before {
  content: "" !important;
  display: none !important;
}

.clof-var-close::after {
  content: "" !important;
  display: none !important;
}

/* v1.2.8 quantity auto update + explicit mobile value rows */
.clof-mob-label {
  display: none !important;
}

.clof-mob-value {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: flex-end !important;
  min-width: 0 !important;
  color: inherit !important;
  visibility: visible !important;
  opacity: 1 !important;
}

.clof-cart__form[data-submitting="1"] {
  opacity: .72;
  pointer-events: none;
}

.clof-cart__form[data-submitting="1"]::after {
  content: "更新中...";
  display: inline-flex;
  margin-top: 10px;
  color: var(--clof-green);
  font-size: 12px;
  font-weight: 950;
}

.clof-cart__bottom > input[name="clof_update_cart"] {
  display: none !important;
}

/* v1.2.9 live cart totals + mobile cart/recommendation hardening */
.clof-cart-item.is-updating {
  opacity: .76;
}

.clof-reco__slider {
  position: relative;
  min-width: 0;
}

.clof-reco__viewport {
  min-width: 0;
  overflow: visible;
}

.clof-reco__nav {
  display: none;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border: 1px solid rgba(143,185,43,.34) !important;
  border-radius: 999px !important;
  background: rgba(8,10,6,.94) !important;
  color: var(--clof-green) !important;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 22px !important;
  font-weight: 900 !important;
  line-height: 1 !important;
  cursor: pointer;
  box-shadow: 0 10px 24px rgba(0,0,0,.32);
}

/* v1.3.3 mobile cart table redesign: single source of truth
   - Old mobile blocks stay removed.
   - Cart item uses product header + 3-column receipt/table strip.
   - Quantity update JS/PHP was not changed. */
@media (max-width: 760px) {
  html,
  body {
    overflow-x: hidden;
  }

  @supports (overflow-x: clip) {
    html,
    body {
      overflow-x: clip;
    }
  }

  .clof,
  .entry-content > .clof {
    position: static;
    left: auto;
    transform: none;
    width: 100%;
    max-width: 100%;
    margin: 0 auto 28px;
    padding: 0 10px 26px;
    overflow: visible;
  }

  .clof__crumb {
    padding: 0 2px;
    font-size: 11px;
  }

  .clof-steps {
    margin: 0 -10px 14px;
    padding: 15px 10px 11px;
    border-left: 0;
    border-right: 0;
    border-radius: 0;
  }

  .clof-steps__row {
    gap: 3px;
  }

  .clof-steps__item {
    gap: 6px;
    font-size: 10px;
  }

  .clof-steps__item::after {
    left: calc(50% + 16px);
    right: calc(-50% + 16px);
  }

  .clof-steps__item span {
    width: 20px;
    height: 20px;
    font-size: 11px;
  }

  .clof-steps__item strong {
    font-size: 10px;
  }

  .clof-steps p {
    margin-top: 10px !important;
    font-size: 11px;
  }

  .clof__layout {
    display: flex;
    flex-direction: column;
    gap: 14px;
    width: 100%;
    min-width: 0;
  }

  .clof__main,
  .clof__side {
    display: flex;
    flex-direction: column;
    gap: 14px;
    width: 100%;
    min-width: 0;
  }

  .clof-summary {
    position: static;
  }

  .clof-card,
  .clof-help,
  .clof-ship {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    border-radius: 14px;
  }

  .clof-card {
    padding: 14px 10px;
  }

  .clof-card__title {
    margin-bottom: 13px;
  }

  .clof-card__title h1 {
    font-size: 18px !important;
  }

  .clof-card__title p {
    font-size: 11px;
  }

  .clof-card.clof-cart {
    overflow: hidden;
  }

  .clof-cart,
  .clof-cart__form,
  .clof-cart__items {
    width: 100%;
    max-width: 100%;
    min-width: 0;
  }

  .clof-cart__header {
    display: none;
  }

  .clof-cart__items {
    display: grid;
    gap: 11px;
  }

  /* 상품 1개 = 위 상품정보 + 아래 3칸 미니 표 */
  .clof-cart-item {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0;
    width: 100%;
    max-width: 100%;
    min-width: 0;
    margin: 0;
    padding: 0;
    overflow: hidden;
    border: 1px solid rgba(143, 185, 43, 0.16);
    border-radius: 14px;
    background:
      radial-gradient(circle at 10% 0%, rgba(143,185,43,.055), transparent 44%),
      linear-gradient(180deg, rgba(255,255,255,.035), rgba(255,255,255,.018));
    box-shadow: 0 10px 22px rgba(0,0,0,.20);
  }

  .clof-cart-item__product {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: 74px minmax(0, 1fr);
    gap: 12px;
    align-items: start;
    width: 100%;
    min-width: 0;
    padding: 12px;
    border-bottom: 1px solid rgba(255,255,255,.075);
  }

  .clof-cart-item__img {
    width: 74px;
    height: 74px;
    border-radius: 11px;
  }

  .clof-cart-item__body {
    display: block;
    min-width: 0;
  }

  .clof-cart-item__name {
    display: block;
    overflow-wrap: anywhere;
    white-space: normal;
    color: #f4f7e9 !important;
    font-size: 12.5px;
    line-height: 1.4;
    letter-spacing: .01em;
  }

  .clof-cart-item__meta {
    display: block;
    margin-top: 4px;
    overflow-wrap: anywhere;
    color: rgba(247,251,232,.50);
    font-size: 10px;
    line-height: 1.45;
  }

  .clof-cart-item__remove {
    min-height: 25px;
    margin-top: 8px;
    padding: 0 10px;
    border-radius: 999px;
    background: rgba(255,255,255,.045);
    color: rgba(247,251,232,.64) !important;
    font-size: 10px;
  }

  .clof-cart-item__price,
  .clof-cart-item__qty,
  .clof-cart-item__subtotal {
    display: grid;
    grid-template-rows: auto minmax(30px, auto);
    align-items: center;
    justify-items: center;
    gap: 4px;
    min-width: 0;
    min-height: 66px;
    padding: 9px 5px 10px;
    margin: 0;
    border: 0;
    border-right: 1px solid rgba(255,255,255,.07);
    background: rgba(0,0,0,.12);
    text-align: center;
  }

  .clof-cart-item__subtotal {
    border-right: 0;
    background:
      radial-gradient(circle at 50% 0%, rgba(189,233,58,.13), transparent 58%),
      rgba(143,185,43,.055);
  }

  .clof-cart-item__price::before,
  .clof-cart-item__qty::before,
  .clof-cart-item__subtotal::before {
    content: none;
    display: none;
  }

  .clof-mob-label {
    display: block !important;
    width: 100%;
    color: rgba(247,251,232,.45) !important;
    font-size: 9.5px !important;
    font-weight: 950 !important;
    line-height: 1.1 !important;
    text-align: center !important;
    letter-spacing: .04em;
  }

  .clof-mob-value {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    overflow: hidden !important;
    color: #fff7dc !important;
    font-size: 11.5px !important;
    font-weight: 950 !important;
    line-height: 1.15 !important;
    text-align: center !important;
    white-space: nowrap !important;
    text-overflow: ellipsis !important;
  }

  .clof-cart-item__subtotal .clof-mob-label {
    color: rgba(189,233,58,.72) !important;
  }

  .clof-cart-item__subtotal .clof-mob-value {
    color: var(--clof-green2) !important;
    font-size: 12.5px !important;
    text-shadow: 0 0 14px rgba(143,185,43,.16);
  }

  .clof-cart-item__qty .clof-mob-value {
    overflow: visible !important;
  }

  .clof-cart-item__qty .quantity,
  .clof-cart-item__qty input.qty,
  .clof-cart-item__qty .clof-qty-static {
    justify-self: center;
    margin: 0 !important;
  }

  .clof-cart-item__qty input.qty,
  .clof-qty-static {
    width: 54px !important;
    min-height: 32px;
    border-radius: 999px !important;
    font-size: 13px;
  }

  .clof-cart-item__price .amount,
  .clof-cart-item__subtotal .amount {
    color: inherit !important;
  }

  .clof-cart__bottom {
    display: grid;
    gap: 12px;
    padding-top: 13px;
  }

  .clof-coupon {
    padding-top: 11px;
  }

  .clof-coupon div {
    width: 100%;
  }

  .clof-coupon input {
    min-height: 40px;
    font-size: 12px;
  }

  .clof-coupon button {
    flex-basis: 72px;
    min-height: 40px;
  }

  .clof-summary__rows > div {
    padding: 10px 0;
  }

  .clof-summary__rows .is-total strong {
    font-size: 24px;
  }

  .clof-summary__btn {
    min-height: 48px;
    font-size: 13px;
  }

  .clof-reco__slider {
    position: relative;
    min-width: 0;
    padding: 0 30px;
  }

  .clof-reco__viewport {
    min-width: 0;
    overflow: hidden;
  }

  .clof-reco__list {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: clamp(146px, 43vw, 172px);
    grid-template-columns: none;
    gap: 12px;
    overflow-x: auto;
    overflow-y: visible;
    padding: 2px 0 9px;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
  }

  .clof-reco__list::-webkit-scrollbar {
    display: none;
  }

  .clof-reco-card {
    scroll-snap-align: start;
    padding: 7px;
  }

  .clof-reco__nav {
    position: absolute;
    top: 42%;
    z-index: 5;
    display: flex;
    transform: translateY(-50%);
  }

  .clof-reco__nav--prev {
    left: 0;
  }

  .clof-reco__nav--next {
    right: 0;
  }

  .clof-ship {
    min-height: 74px;
    padding: 14px 13px;
  }

  .clof-ship__icon {
    flex-basis: 34px;
    font-size: 29px;
  }

  .clof-ship strong {
    font-size: 16px;
    line-height: 1.25;
  }

  .clof-ship em {
    font-size: 11px;
  }

  .clof-help {
    min-height: 118px;
    padding: 16px 13px;
  }

  .clof-help img {
    width: 76px;
  }

  .clof-var-panel {
    position: fixed !important;
    left: max(12px, env(safe-area-inset-left)) !important;
    right: max(12px, env(safe-area-inset-right)) !important;
    top: auto !important;
    bottom: max(12px, env(safe-area-inset-bottom)) !important;
    max-height: 68vh !important;
    overflow: hidden !important;
    border-radius: 16px !important;
    z-index: 999999 !important;
  }

  .clof-var-list {
    max-height: calc(68vh - 54px) !important;
  }

  .clof-var-choice {
    min-height: 44px !important;
    padding: 10px 12px !important;
    font-size: 12px !important;
  }
}

@media (max-width: 380px) {
  .clof,
  .entry-content > .clof {
    padding-left: 8px;
    padding-right: 8px;
  }

  .clof-steps {
    margin-left: -8px;
    margin-right: -8px;
  }

  .clof-card {
    padding-left: 8px;
    padding-right: 8px;
  }

  .clof-cart-item__product {
    grid-template-columns: 66px minmax(0, 1fr);
    gap: 10px;
    padding: 10px;
  }

  .clof-cart-item__img {
    width: 66px;
    height: 66px;
  }

  .clof-cart-item__name {
    font-size: 12px;
  }

  .clof-cart-item__price,
  .clof-cart-item__qty,
  .clof-cart-item__subtotal {
    min-height: 62px;
    padding: 8px 4px 9px;
  }

  .clof-mob-label {
    font-size: 9px !important;
  }

  .clof-mob-value {
    font-size: 10.5px !important;
  }

  .clof-cart-item__subtotal .clof-mob-value {
    font-size: 11.5px !important;
  }

  .clof-cart-item__qty input.qty,
  .clof-qty-static {
    width: 50px !important;
    min-height: 31px;
  }

  .clof-reco__slider {
    padding-left: 28px;
    padding-right: 28px;
  }

  .clof-reco__list {
    grid-auto-columns: 146px;
  }
}



/* v1.4.0 info step shortcode layout */
.clof--info .clof__layout {
  grid-template-columns: minmax(0, 1fr) 370px;
}

.clof-info-card {
  overflow: hidden;
}

.clof-info-form {
  display: grid;
  gap: 15px;
  margin: 0;
}

.clof-info-section {
  padding: 15px;
  border: 1px solid rgba(143,185,43,.12);
  border-radius: 13px;
  background:
    radial-gradient(circle at 12% 0%, rgba(143,185,43,.045), transparent 38%),
    rgba(255,255,255,.022);
}

.clof-info-section__head {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin: 0 0 13px;
}

.clof-info-section__head > span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 32px;
  width: 32px;
  height: 32px;
  border-radius: 999px;
  background: rgba(143,185,43,.12);
  color: var(--clof-green2);
  font-size: 11px;
  font-weight: 950;
  line-height: 1;
}

.clof-info-section__head strong {
  display: block;
  color: #fff7dc;
  font-size: 14px;
  font-weight: 950;
  line-height: 1.25;
}

.clof-info-section__head em {
  display: block;
  margin-top: 3px;
  color: rgba(247,251,232,.54);
  font-size: 11px;
  font-style: normal;
  font-weight: 800;
  line-height: 1.4;
}

.clof-form-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 11px;
}

.clof-form-grid--2 {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.clof-field--wide {
  grid-column: 1 / -1;
}

.clof-field {
  display: grid;
  gap: 7px;
  min-width: 0;
}

.clof-field > span {
  color: rgba(247,251,232,.70);
  font-size: 11px;
  font-weight: 950;
  line-height: 1.2;
}

.clof-field > span b {
  display: inline-flex;
  margin-left: 5px;
  padding: 2px 5px;
  border-radius: 999px;
  background: rgba(143,185,43,.13);
  color: var(--clof-green2);
  font-size: 9px;
  font-weight: 950;
  line-height: 1;
}

.clof-field input,
.clof-field select {
  width: 100% !important;
  min-height: 42px !important;
  padding: 0 12px !important;
  border-radius: 9px !important;
  border: 1px solid rgba(143,185,43,.16) !important;
  background: rgba(0,0,0,.28) !important;
  color: var(--clof-text) !important;
  font-family: inherit !important;
  font-size: 13px !important;
  font-weight: 850 !important;
  outline: none !important;
  box-shadow: none !important;
}

.clof-field select {
  appearance: auto !important;
}

.clof-field input::placeholder {
  color: rgba(247,251,232,.30) !important;
}

.clof-field input:focus,
.clof-field select:focus {
  border-color: rgba(189,233,58,.48) !important;
  box-shadow: 0 0 0 3px rgba(143,185,43,.10) !important;
}

.clof-choice-list {
  display: grid;
  gap: 9px;
}

.clof-choice-card {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
  min-height: 58px;
  padding: 11px 12px;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,.08);
  background: rgba(0,0,0,.18);
  cursor: pointer;
}

.clof-choice-card.is-selected,
.clof-choice-card:has(input:checked) {
  border-color: rgba(143,185,43,.34);
  background: rgba(143,185,43,.075);
}

.clof-choice-card input,
.clof-checkline input {
  accent-color: var(--clof-green);
}

.clof-choice-card span {
  display: block;
  min-width: 0;
}

.clof-choice-card strong {
  display: block;
  color: var(--clof-text);
  font-size: 13px;
  font-weight: 950;
  line-height: 1.25;
}

.clof-choice-card em {
  display: block;
  margin-top: 3px;
  color: rgba(247,251,232,.50);
  font-size: 11px;
  font-style: normal;
  font-weight: 800;
  line-height: 1.35;
}

.clof-choice-card b {
  color: var(--clof-green2);
  font-size: 12px;
  font-weight: 950;
  white-space: nowrap;
}

.clof-checkline {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  color: rgba(247,251,232,.64);
  font-size: 12px;
  font-weight: 850;
  line-height: 1.45;
}

.clof-info-agree {
  display: grid;
  gap: 12px;
  padding: 14px 15px 0;
  border-top: 1px solid var(--clof-line-soft);
}

.clof-info-next {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  border-radius: 9px;
  background: linear-gradient(180deg, #b7eb35 0%, #93c70f 100%);
  color: #101707 !important;
  font-size: 14px;
  font-weight: 950;
  box-shadow: 0 12px 24px rgba(143,185,43,.18);
}

.clof-info-next::after {
  content: "›";
  margin-left: 12px;
  font-size: 24px;
  line-height: 1;
}

@media (max-width: 760px) {
  .clof--info .clof__side {
    order: 1;
  }

  .clof--info .clof__main {
    order: 2;
  }

  .clof--info .clof-summary {
    border-color: rgba(143,185,43,.26);
  }

  .clof-info-section {
    padding: 13px 11px;
    border-radius: 12px;
  }

  .clof-info-section__head {
    margin-bottom: 12px;
  }

  .clof-info-section__head > span {
    flex-basis: 30px;
    width: 30px;
    height: 30px;
    font-size: 10px;
  }

  .clof-info-section__head strong {
    font-size: 13px;
  }

  .clof-info-section__head em {
    font-size: 10.5px;
  }

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

  .clof-field input,
  .clof-field select {
    min-height: 44px !important;
    font-size: 13px !important;
  }

  .clof-choice-card {
    min-height: 60px;
    padding: 11px 10px;
    grid-template-columns: auto minmax(0, 1fr) auto;
  }

  .clof-choice-card strong {
    font-size: 12.5px;
  }

  .clof-choice-card em {
    font-size: 10.5px;
  }

  .clof-info-agree {
    padding-left: 0;
    padding-right: 0;
  }

  .clof-info-next {
    min-height: 50px;
    font-size: 13px;
  }
}

@media (max-width: 380px) {
  .clof-info-section {
    padding-left: 10px;
    padding-right: 10px;
  }

  .clof-choice-card {
    gap: 8px;
  }

  .clof-choice-card b {
    font-size: 11px;
  }
}


/* v1.4.2 Japanese postcode autofill */
.clof-field--postcode {
  align-content: start;
}

.clof-zip-row {
  display: flex;
  gap: 8px;
  width: 100%;
  min-width: 0;
}

.clof-zip-row input {
  flex: 1 1 auto;
  min-width: 0;
}

.clof-zip-btn {
  flex: 0 0 116px;
  min-height: 42px;
  padding: 0 10px !important;
  border: 0 !important;
  border-radius: 9px !important;
  background: linear-gradient(180deg, #b7eb35 0%, #93c70f 100%) !important;
  color: #101707 !important;
  font-family: inherit !important;
  font-size: 11px !important;
  font-weight: 950 !important;
  line-height: 1 !important;
  cursor: pointer;
  white-space: nowrap;
}

.clof-zip-status {
  display: block;
  min-height: 15px;
  color: rgba(247,251,232,.48);
  font-size: 10px;
  font-style: normal;
  font-weight: 850;
  line-height: 1.4;
}

.clof-zip-status[data-state="loading"] {
  color: rgba(189,233,58,.72);
}

.clof-zip-status[data-state="ok"] {
  color: var(--clof-green2);
}

.clof-zip-status[data-state="error"] {
  color: #ffb15f;
}

@media (max-width: 760px) {
  .clof-zip-row {
    gap: 7px;
  }

  .clof-zip-btn {
    flex-basis: 108px;
    min-height: 44px;
    font-size: 10.5px !important;
  }
}

@media (max-width: 380px) {
  .clof-zip-row {
    display: grid;
    grid-template-columns: 1fr;
  }

  .clof-zip-btn {
    width: 100%;
    min-height: 40px;
  }
}


/* v1.4.3 native WooCommerce payment gateway styling */
.clof-info-section--payment {
  overflow: hidden;
}

.clof-payment-native {
  min-width: 0;
}

.clof-payment-native ul.wc_payment_methods,
.clof-payment-native ul.payment_methods,
.clof-payment-native .wc_payment_methods {
  display: grid !important;
  gap: 9px !important;
  margin: 0 !important;
  padding: 0 !important;
  list-style: none !important;
  border: 0 !important;
  background: transparent !important;
}

.clof-payment-native li.wc_payment_method,
.clof-payment-native .wc_payment_method {
  position: relative;
  display: grid !important;
  gap: 8px;
  min-width: 0;
  margin: 0 !important;
  padding: 12px !important;
  border-radius: 12px !important;
  border: 1px solid rgba(255,255,255,.08) !important;
  background: rgba(0,0,0,.18) !important;
  color: var(--clof-text) !important;
  list-style: none !important;
  transition: border-color .16s ease, background .16s ease, box-shadow .16s ease;
}

.clof-payment-native li.wc_payment_method.is-selected,
.clof-payment-native .wc_payment_method.is-selected,
.clof-payment-native li.wc_payment_method:has(input.input-radio:checked),
.clof-payment-native .wc_payment_method:has(input.input-radio:checked) {
  border-color: rgba(143,185,43,.38) !important;
  background:
    radial-gradient(circle at 8% 0%, rgba(143,185,43,.10), transparent 48%),
    rgba(143,185,43,.065) !important;
  box-shadow: 0 12px 26px rgba(0,0,0,.18);
}

.clof-payment-native .wc_payment_method > input.input-radio {
  position: absolute !important;
  left: 12px;
  top: 15px;
  width: 16px !important;
  height: 16px !important;
  margin: 0 !important;
  accent-color: var(--clof-green);
}

.clof-payment-native .wc_payment_method > label {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 10px !important;
  min-width: 0;
  min-height: 24px;
  margin: 0 !important;
  padding: 0 0 0 26px !important;
  color: var(--clof-text) !important;
  font-size: 13px !important;
  font-weight: 950 !important;
  line-height: 1.35 !important;
  cursor: pointer;
}

.clof-payment-native .wc_payment_method > label img {
  display: inline-block !important;
  width: auto !important;
  max-width: 96px !important;
  max-height: 24px !important;
  margin: 0 0 0 auto !important;
  vertical-align: middle !important;
  border: 0 !important;
  box-shadow: none !important;
}

.clof-payment-native .payment_box {
  display: none;
  width: 100% !important;
  min-width: 0;
  margin: 2px 0 0 !important;
  padding: 10px 11px !important;
  border-radius: 10px !important;
  border: 1px solid rgba(255,255,255,.07) !important;
  background: rgba(0,0,0,.20) !important;
  color: rgba(247,251,232,.64) !important;
  font-size: 11px !important;
  font-weight: 800 !important;
  line-height: 1.55 !important;
}

.clof-payment-native .wc_payment_method.is-selected .payment_box,
.clof-payment-native .wc_payment_method:has(input.input-radio:checked) .payment_box {
  display: block;
}

.clof-payment-native .payment_box::before,
.clof-payment-native .payment_box::after {
  display: none !important;
  content: none !important;
}

.clof-payment-native .payment_box p {
  margin: 0 0 7px !important;
  color: rgba(247,251,232,.64) !important;
  font-size: 11px !important;
  font-weight: 800 !important;
  line-height: 1.55 !important;
}

.clof-payment-native .payment_box p:last-child {
  margin-bottom: 0 !important;
}

.clof-payment-native fieldset {
  min-width: 0 !important;
  margin: 8px 0 0 !important;
  padding: 0 !important;
  border: 0 !important;
}

.clof-payment-native input,
.clof-payment-native select {
  max-width: 100%;
}

.clof-payment-note,
.clof-payment-empty {
  margin: 10px 0 0 !important;
  color: rgba(247,251,232,.48);
  font-size: 11px;
  font-weight: 850;
  line-height: 1.45;
}

.clof-payment-empty {
  margin: 0 !important;
  padding: 12px;
  border-radius: 10px;
  border: 1px solid rgba(255,255,255,.08);
  background: rgba(0,0,0,.18);
  color: rgba(247,251,232,.62);
}

@media (max-width: 760px) {
  .clof-payment-native li.wc_payment_method,
  .clof-payment-native .wc_payment_method {
    padding: 12px 10px !important;
  }

  .clof-payment-native .wc_payment_method > label {
    font-size: 12.5px !important;
  }

  .clof-payment-native .wc_payment_method > label img {
    max-width: 82px !important;
    max-height: 22px !important;
  }

  .clof-payment-native .payment_box {
    padding: 10px !important;
    font-size: 10.5px !important;
  }
}


/* v1.4.4 defaults: cash payment first + disabled express shipping card */
.clof-choice-card.is-disabled,
.clof-choice-card--disabled {
  opacity: .42;
  cursor: not-allowed;
  pointer-events: none;
  filter: grayscale(.35);
}

.clof-choice-card.is-disabled,
.clof-choice-card--disabled,
.clof-choice-card.is-disabled:has(input:checked),
.clof-choice-card--disabled:has(input:checked) {
  border-color: rgba(255,255,255,.075) !important;
  background: rgba(0,0,0,.16) !important;
  box-shadow: none !important;
}

.clof-choice-card.is-disabled input,
.clof-choice-card--disabled input {
  accent-color: rgba(247,251,232,.28);
}

.clof-choice-card.is-disabled strong,
.clof-choice-card--disabled strong,
.clof-choice-card.is-disabled b,
.clof-choice-card--disabled b {
  color: rgba(247,251,232,.50) !important;
}

.clof-choice-card.is-disabled em,
.clof-choice-card--disabled em {
  color: rgba(247,251,232,.36) !important;
}


/* v1.5.0 confirm step layout */
.clof--confirm .clof__layout {
  grid-template-columns: minmax(0, 1fr) 370px;
}

.clof-confirm-card {
  overflow: hidden;
}

.clof-confirm-list {
  display: grid;
  gap: 0;
}

.clof-confirm-section {
  padding: 16px 0;
  border-bottom: 1px solid var(--clof-line-soft);
}

.clof-confirm-section:first-child {
  padding-top: 0;
}

.clof-confirm-section:last-child {
  border-bottom: 0;
  padding-bottom: 0;
}

.clof-confirm-section__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin: 0 0 12px;
}

.clof-confirm-section__head > div {
  display: flex;
  align-items: center;
  gap: 9px;
  min-width: 0;
}

.clof-confirm-section__head span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 24px;
  width: 24px;
  height: 24px;
  border-radius: 999px;
  color: var(--clof-green2);
  background: rgba(143,185,43,.10);
  font-size: 12px;
  font-weight: 950;
  line-height: 1;
}

.clof-confirm-section__head strong {
  color: #fff7dc;
  font-size: 14px;
  font-weight: 950;
  line-height: 1.25;
}

.clof-confirm-section__head a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 28px;
  padding: 0 10px;
  border-radius: 7px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.035);
  color: rgba(247,251,232,.72) !important;
  font-size: 10px;
  font-weight: 950;
  white-space: nowrap;
}

.clof-confirm-section__head a::before {
  content: "✎";
  margin-right: 5px;
  color: var(--clof-green);
  font-size: 10px;
}

.clof-confirm-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
  padding-left: 34px;
}

.clof-confirm-grid--2 {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.clof-confirm-grid div,
.clof-confirm-address,
.clof-confirm-line {
  min-width: 0;
}

.clof-confirm-grid span,
.clof-confirm-address span,
.clof-confirm-line span {
  display: block;
  margin: 0 0 4px;
  color: rgba(247,251,232,.47);
  font-size: 10px;
  font-weight: 900;
  line-height: 1.35;
}

.clof-confirm-grid strong,
.clof-confirm-address strong,
.clof-confirm-address b,
.clof-confirm-line strong {
  display: block;
  color: rgba(247,251,232,.86);
  font-size: 12px;
  font-weight: 900;
  line-height: 1.55;
  overflow-wrap: anywhere;
}

.clof-confirm-address {
  display: grid;
  gap: 2px;
  padding-left: 34px;
}

.clof-confirm-address em {
  display: block;
  color: rgba(247,251,232,.70);
  font-size: 12px;
  font-style: normal;
  font-weight: 850;
  line-height: 1.5;
}

.clof-confirm-line {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding-left: 34px;
}

.clof-confirm-line b {
  color: var(--clof-green2);
  font-size: 12px;
  font-weight: 950;
  white-space: nowrap;
}

.clof-confirm-products {
  display: grid;
  gap: 0;
  padding-left: 34px;
}

.clof-confirm-products__head,
.clof-confirm-product {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 70px 100px;
  gap: 12px;
  align-items: center;
}

.clof-confirm-products__head {
  padding: 0 0 8px;
  color: rgba(247,251,232,.46);
  font-size: 10px;
  font-weight: 950;
}

.clof-confirm-products__head span:nth-child(n+2) {
  text-align: right;
}

.clof-confirm-product {
  padding: 11px 0;
  border-top: 1px solid rgba(255,255,255,.065);
}

.clof-confirm-product__main {
  display: grid;
  grid-template-columns: 56px minmax(0, 1fr);
  gap: 10px;
  align-items: center;
  min-width: 0;
}

.clof-confirm-product__img {
  display: block;
  overflow: hidden;
  width: 56px;
  height: 56px;
  border-radius: 9px;
  border: 1px solid rgba(143,185,43,.14);
  background: #050604;
}

.clof-confirm-product__img img {
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover;
}

.clof-confirm-product__main strong {
  display: block;
  color: var(--clof-text);
  font-size: 12px;
  font-weight: 950;
  line-height: 1.4;
}

.clof-confirm-product__main em {
  display: block;
  margin-top: 4px;
  color: rgba(247,251,232,.48);
  font-size: 10px;
  font-style: normal;
  font-weight: 800;
  line-height: 1.4;
}

.clof-confirm-product > b,
.clof-confirm-product > strong {
  color: #fff7dc;
  font-size: 12px;
  font-weight: 950;
  text-align: right;
}

.clof-confirm-product > strong {
  color: var(--clof-green2);
}

.clof-confirm-section--notice p {
  margin: 0 !important;
  padding-left: 34px;
  color: rgba(247,251,232,.58);
  font-size: 11px;
  font-weight: 850;
  line-height: 1.7;
}

.clof-field textarea {
  width: 100% !important;
  min-height: 96px !important;
  padding: 11px 12px !important;
  border-radius: 9px !important;
  border: 1px solid rgba(143,185,43,.16) !important;
  background: rgba(0,0,0,.28) !important;
  color: var(--clof-text) !important;
  font-family: inherit !important;
  font-size: 13px !important;
  font-weight: 850 !important;
  line-height: 1.55 !important;
  outline: none !important;
  box-shadow: none !important;
  resize: vertical;
}

.clof-field textarea::placeholder {
  color: rgba(247,251,232,.30) !important;
}

.clof-field textarea:focus {
  border-color: rgba(189,233,58,.48) !important;
  box-shadow: 0 0 0 3px rgba(143,185,43,.10) !important;
}

button.clof-info-next {
  width: 100%;
  border: 0 !important;
  cursor: pointer;
  font-family: inherit !important;
}

@media (max-width: 760px) {
  .clof--confirm .clof__side {
    order: 2;
  }

  .clof--confirm .clof__main {
    order: 1;
  }

  .clof-confirm-section {
    padding: 14px 0;
  }

  .clof-confirm-grid,
  .clof-confirm-address,
  .clof-confirm-line,
  .clof-confirm-products,
  .clof-confirm-section--notice p {
    padding-left: 0;
  }

  .clof-confirm-grid--2 {
    grid-template-columns: 1fr;
    gap: 9px;
  }

  .clof-confirm-line {
    align-items: flex-start;
  }

  .clof-confirm-products__head {
    display: none;
  }

  .clof-confirm-product {
    grid-template-columns: 1fr;
    gap: 9px;
    padding: 12px 0;
  }

  .clof-confirm-product__main {
    grid-template-columns: 58px minmax(0, 1fr);
  }

  .clof-confirm-product > b,
  .clof-confirm-product > strong {
    display: flex;
    justify-content: space-between;
    text-align: right;
  }

  .clof-confirm-product > b::before {
    content: "数量";
    color: rgba(247,251,232,.48);
    font-size: 10px;
  }

  .clof-confirm-product > strong::before {
    content: "小計";
    color: rgba(247,251,232,.48);
    font-size: 10px;
  }
}


/* v1.5.4 safe SVG icons: remove dependency on font-specific Unicode symbols */
.clof-icon {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex: 0 0 auto;
  width: 1em;
  height: 1em;
  color: currentColor;
  line-height: 1 !important;
  vertical-align: middle;
}

.clof-icon svg {
  display: block !important;
  width: 1em !important;
  height: 1em !important;
  overflow: visible;
  fill: none !important;
  stroke: currentColor !important;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
}

.clof-card__title > .clof-icon {
  width: 21px;
  height: 21px;
  font-size: 21px;
  margin-top: 1px;
}

.clof-small-title > .clof-icon {
  width: 18px;
  height: 18px;
  font-size: 18px;
}

.clof-trust__item > .clof-icon {
  width: 30px;
  height: 30px;
  font-size: 30px;
}

.clof-ship__icon.clof-icon {
  width: 36px;
  height: 36px;
  font-size: 36px;
}

.clof-icon--star svg {
  stroke-width: 1.55;
}

@media (max-width: 760px) {
  .clof-card__title > .clof-icon {
    width: 20px;
    height: 20px;
    font-size: 20px;
  }

  .clof-small-title > .clof-icon {
    width: 17px;
    height: 17px;
    font-size: 17px;
  }

  .clof-trust__item > .clof-icon {
    width: 28px;
    height: 28px;
    font-size: 28px;
  }

  .clof-ship__icon.clof-icon {
    width: 29px;
    height: 29px;
    font-size: 29px;
  }
}


/* v1.5.4 unicode pseudo-icon cleanup */
.clof-steps p::before,
.clof-coupon label::before,
.clof-summary__secure::before {
  content: "" !important;
  display: inline-block !important;
  flex: 0 0 auto;
  width: 7px;
  height: 7px;
  margin-right: 6px;
  border: 1.5px solid currentColor;
  border-radius: 999px;
  transform: translateY(-1px);
}

.clof-summary__btn::after,
.clof-info-next::after {
  content: "" !important;
  display: inline-block !important;
  width: 8px;
  height: 8px;
  margin-left: 12px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(-45deg);
}

.clof-var-open::after {
  content: "" !important;
  width: 7px;
  height: 7px;
  right: 11px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: translateY(-62%) rotate(45deg) !important;
}

.clof-confirm-section__head a::before {
  content: "" !important;
  display: inline-block;
  width: 9px;
  height: 9px;
  margin-right: 6px;
  border: 1.5px solid currentColor;
  border-radius: 2px;
  transform: rotate(-8deg);
}

.clof-reco__nav .clof-icon {
  width: 18px;
  height: 18px;
  font-size: 18px;
}

.clof-reco__nav .clof-icon svg {
  stroke-width: 2.3;
}


/* v1.6.0 WooCommerce checkout bridge + real order complete screen */
.clof--complete .clof__layout {
  grid-template-columns: minmax(0, 1fr) 370px;
}

.clof-complete-card {
  overflow: hidden;
}

.clof-complete-hero {
  display: grid;
  grid-template-columns: 54px minmax(0, 1fr);
  gap: 14px;
  align-items: center;
  padding: 0 0 18px;
  border-bottom: 1px solid var(--clof-line-soft);
}

.clof-complete-hero__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 54px;
  height: 54px;
  border-radius: 999px;
  border: 2px solid var(--clof-green);
  color: var(--clof-green2);
  font-size: 30px;
  box-shadow: 0 0 0 6px rgba(143,185,43,.08);
}

.clof-complete-hero h1 {
  margin: 0 0 6px !important;
  color: #fff7dc !important;
  font-size: 22px !important;
  font-weight: 950 !important;
  line-height: 1.25 !important;
}

.clof-complete-hero p {
  margin: 0 !important;
  color: rgba(247,251,232,.62);
  font-size: 12px;
  font-weight: 850;
  line-height: 1.6;
}

.clof-complete-flow {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 22px minmax(0, 1fr) 22px minmax(0, 1fr) 22px minmax(0, 1fr);
  gap: 8px;
  align-items: center;
  padding: 18px 0;
  border-bottom: 1px solid var(--clof-line-soft);
}

.clof-complete-flow div {
  display: grid;
  justify-items: center;
  gap: 5px;
  min-width: 0;
  text-align: center;
}

.clof-complete-flow div > span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: 999px;
  border: 1px solid rgba(143,185,43,.28);
  color: var(--clof-green2);
  font-size: 20px;
  background: rgba(143,185,43,.055);
}

.clof-complete-flow div > span .clof-icon {
  width: 20px;
  height: 20px;
  font-size: 20px;
}

.clof-complete-flow strong {
  color: var(--clof-text);
  font-size: 11px;
  font-weight: 950;
  line-height: 1.25;
}

.clof-complete-flow em {
  color: rgba(247,251,232,.46);
  font-size: 9.5px;
  font-style: normal;
  font-weight: 800;
  line-height: 1.35;
}

.clof-complete-flow b {
  display: block;
  width: 100%;
  height: 1px;
  background: rgba(143,185,43,.28);
}

.clof-complete-actions {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 10px;
  padding-top: 16px;
}

.clof-complete-outline {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 46px;
  border-radius: 8px;
  border: 1px solid rgba(143,185,43,.42);
  background: rgba(143,185,43,.035);
  color: var(--clof-green2) !important;
  font-size: 13px;
  font-weight: 950;
}

.clof-summary .clof-complete-outline {
  margin-top: 9px;
  min-height: 42px;
}

.clof-history-card {
  margin-top: 14px;
}

.clof-history-list {
  display: grid;
  gap: 0;
}

.clof-history-item {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  gap: 10px;
  align-items: center;
  padding: 11px 0;
  border-bottom: 1px solid var(--clof-line-soft);
}

.clof-history-item:last-child {
  border-bottom: 0;
  padding-bottom: 0;
}

.clof-history-item span {
  color: rgba(247,251,232,.70);
  font-size: 12px;
  font-weight: 900;
}

.clof-history-item strong {
  color: #fff7dc;
  font-size: 12px;
  font-weight: 950;
  white-space: nowrap;
}

.clof-history-item em {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 22px;
  padding: 0 8px;
  border-radius: 999px;
  background: rgba(143,185,43,.10);
  color: var(--clof-green2);
  font-size: 10px;
  font-style: normal;
  font-weight: 950;
  white-space: nowrap;
}

.clof-confirm-section__head span .clof-icon {
  width: 14px;
  height: 14px;
  font-size: 14px;
}

@media (max-width: 760px) {
  .clof--complete .clof__side {
    order: 2;
  }

  .clof--complete .clof__main {
    order: 1;
  }

  .clof-complete-hero {
    grid-template-columns: 48px minmax(0, 1fr);
    gap: 12px;
  }

  .clof-complete-hero__icon {
    width: 48px;
    height: 48px;
    font-size: 26px;
  }

  .clof-complete-hero h1 {
    font-size: 19px !important;
  }

  .clof-complete-flow {
    grid-template-columns: 1fr;
    gap: 9px;
  }

  .clof-complete-flow b {
    width: 1px;
    height: 13px;
    margin: 0 auto;
  }

  .clof-complete-actions {
    grid-template-columns: 1fr;
  }

  .clof-history-item {
    grid-template-columns: 1fr;
    gap: 5px;
  }

  .clof-history-item strong,
  .clof-history-item em {
    justify-self: start;
  }
}


/* v1.6.2 direct WooCommerce checkout POST bridge */
.clof-summary__checkout-form {
  margin: 8px 0 0;
  padding: 0;
}

.clof-summary__checkout-form .clof-summary__btn,
.clof-summary__btn--submit {
  width: 100%;
  border: 0 !important;
  cursor: pointer;
  font-family: inherit;
  appearance: none;
  -webkit-appearance: none;
}


/* v1.6.3 mobile recommendation option safety
   Mobile uses a native select instead of the fixed bottom custom panel.
   This prevents the recommendation carousel/card layout from jumping or breaking. */
.clof-var-native {
  display: none !important;
}

@media (max-width: 760px) {
  .clof-reco-var {
    position: relative !important;
    z-index: auto !important;
  }

  .clof-var-native {
    display: block !important;
    width: 100% !important;
    min-height: 34px !important;
    padding: 0 28px 0 9px !important;
    border-radius: 7px !important;
    border: 1px solid rgba(143, 185, 43, 0.22) !important;
    background: rgba(0,0,0,0.36) !important;
    color: var(--clof-text) !important;
    font-family: inherit !important;
    font-size: 10px !important;
    font-weight: 900 !important;
    line-height: 1.2 !important;
    outline: none !important;
    box-shadow: none !important;
    appearance: auto !important;
    -webkit-appearance: auto !important;
  }

  .clof-var-native:focus {
    border-color: rgba(189,233,58,.48) !important;
    box-shadow: 0 0 0 3px rgba(143,185,43,.10) !important;
  }

  .clof-var-native option {
    background: #10120c;
    color: #f4f7e9;
  }

  .clof-var-open,
  .clof-var-selected,
  .clof-var-panel,
  .clof-reco-var.is-open .clof-var-panel {
    display: none !important;
    visibility: hidden !important;
    pointer-events: none !important;
  }

  .clof-reco__viewport {
    overflow: hidden !important;
  }
}


/* v1.6.4 cart notice/modal safety
   - Hide WooCommerce "view cart" forward buttons when already on the custom cart step.
   - Add dismissible notices so add-to-cart result boxes can be closed. */
.clof--cart .clof__notices a.wc-forward,
.clof--cart .clof__notices a.button.wc-forward,
.clof--cart .clof__notices .wc-forward {
  display: none !important;
}

.clof__notices .woocommerce-message,
.clof__notices .woocommerce-info,
.clof__notices .woocommerce-error {
  position: relative !important;
  padding-right: 44px !important;
}

.clof-notice-close {
  position: absolute !important;
  top: 50% !important;
  right: 10px !important;
  transform: translateY(-50%) !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 28px !important;
  height: 28px !important;
  min-width: 28px !important;
  min-height: 28px !important;
  margin: 0 !important;
  padding: 0 !important;
  border-radius: 999px !important;
  border: 1px solid rgba(247,251,232,.18) !important;
  background: rgba(255,255,255,.07) !important;
  color: rgba(247,251,232,.78) !important;
  font-family: Arial, Helvetica, sans-serif !important;
  font-size: 0 !important;
  font-weight: 900 !important;
  line-height: 1 !important;
  cursor: pointer !important;
  appearance: none !important;
  -webkit-appearance: none !important;
  box-shadow: none !important;
}

.clof-notice-close span {
  display: block !important;
  color: inherit !important;
  font-family: Arial, Helvetica, sans-serif !important;
  font-size: 20px !important;
  font-weight: 900 !important;
  line-height: 1 !important;
  transform: translateY(-1px);
}

.clof-notice-close:hover,
.clof-notice-close:focus {
  border-color: rgba(189,233,58,.36) !important;
  background: rgba(143,185,43,.12) !important;
  color: var(--clof-text) !important;
}

.clof-var-close,
.clof-var-close span {
  opacity: 1 !important;
  visibility: visible !important;
}

/* v1.6.7 notice/modal dismiss hardening */
.clof__notices.is-empty {
  display: none !important;
}

.clof__notices .woocommerce-message[data-clof-dismissible="1"],
.clof__notices .woocommerce-info[data-clof-dismissible="1"],
.clof__notices .woocommerce-error[data-clof-dismissible="1"] {
  position: relative !important;
  min-height: 42px;
  padding-right: 48px !important;
}

.clof-notice-close,
.clof__notices .clof-notice-close {
  pointer-events: auto !important;
  z-index: 50 !important;
  touch-action: manipulation;
}

.clof-var-panel[hidden],
.clof-reco-var:not(.is-open) .clof-var-panel {
  display: none !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

.clof-reco-var.is-open .clof-var-panel:not([hidden]) {
  display: block;
  visibility: visible;
  pointer-events: auto;
}

/* v1.6.5 stock validation guard */
.clof-stock-alert {
  margin: 0 0 14px;
  padding: 12px 13px;
  border-radius: 12px;
  border: 1px solid rgba(255, 177, 95, 0.36);
  background: rgba(255, 177, 95, 0.08);
  color: rgba(247,251,232,.82);
}

.clof-stock-alert strong {
  display: block;
  margin: 0 0 7px;
  color: #ffcf8a;
  font-size: 12px;
  font-weight: 950;
}

.clof-stock-alert ul {
  display: grid;
  gap: 5px;
  margin: 0 !important;
  padding: 0 0 0 17px !important;
}

.clof-stock-alert li {
  margin: 0 !important;
  color: rgba(247,251,232,.70);
  font-size: 11px;
  font-weight: 800;
  line-height: 1.45;
}

.clof-stock-alert li b {
  color: #fff7dc;
  font-weight: 950;
}

.clof-stock-alert--summary {
  margin: 10px 0 12px;
  padding: 10px 11px;
}

.clof-cart-item__stock {
  display: inline-flex;
  align-items: center;
  width: fit-content;
  max-width: 100%;
  margin-top: 6px;
  padding: 3px 7px;
  border-radius: 999px;
  border: 1px solid rgba(255, 177, 95, 0.28);
  background: rgba(255, 177, 95, 0.08);
  color: #ffcf8a;
  font-size: 10px;
  font-weight: 950;
  line-height: 1.25;
}

.clof-summary__btn--disabled,
.clof-summary__btn--disabled:hover,
.clof-summary__btn--disabled:focus,
.clof-reco__btn--disabled,
.clof-reco__btn--disabled:hover,
.clof-reco__btn--disabled:focus {
  opacity: .48 !important;
  cursor: not-allowed !important;
  pointer-events: none !important;
  filter: grayscale(.35);
}

button.clof-summary__btn--disabled {
  width: 100%;
  border: 0 !important;
}

@media (max-width: 760px) {
  .clof-stock-alert {
    margin-bottom: 11px;
    padding: 11px 10px;
  }

  .clof-stock-alert strong {
    font-size: 11.5px;
  }

  .clof-stock-alert li {
    font-size: 10.5px;
  }

  .clof-cart-item__stock {
    font-size: 9.5px;
  }
}


/* v1.6.7 checkout POST audit + required input validation */
.clof-validation-alert {
  margin: 0 0 14px;
  padding: 13px 14px;
  border-radius: 12px;
  border: 1px solid rgba(255, 177, 95, .30);
  background: rgba(255, 177, 95, .085);
  color: var(--clof-text);
}

.clof-validation-alert strong {
  display: block;
  margin: 0 0 7px;
  color: #ffcc8a;
  font-size: 13px;
  font-weight: 950;
}

.clof-validation-alert ul {
  display: grid;
  gap: 5px;
  margin: 0 !important;
  padding-left: 18px !important;
}

.clof-validation-alert li {
  color: rgba(247,251,232,.76);
  font-size: 11px;
  font-weight: 850;
  line-height: 1.45;
}

.clof-field.is-invalid input,
.clof-field.is-invalid select,
.clof-field.is-invalid textarea,
.clof-checkline.is-invalid,
.clof-info-section--payment.is-invalid,
.clof-payment-native .wc_payment_method.is-invalid {
  border-color: rgba(255, 120, 82, .62) !important;
  box-shadow: 0 0 0 3px rgba(255, 120, 82, .10) !important;
}

.clof-checkout-debug {
  display: grid;
  gap: 8px;
  margin: 12px 0;
  padding: 12px;
  border-radius: 12px;
  border: 1px dashed rgba(189,233,58,.36);
  background: rgba(0,0,0,.24);
}

.clof-checkout-debug > strong {
  color: var(--clof-green2);
  font-size: 12px;
  font-weight: 950;
}

.clof-checkout-debug p,
.clof-checkout-debug__warn {
  margin: 0 !important;
  color: rgba(247,251,232,.58);
  font-size: 10.5px;
  font-weight: 850;
  line-height: 1.45;
}

.clof-checkout-debug__warn {
  color: #ffcc8a;
}

.clof-checkout-debug__table {
  display: grid;
  gap: 4px;
  max-height: 280px;
  overflow: auto;
  padding-right: 2px;
}

.clof-checkout-debug__table > div {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr);
  gap: 8px;
  align-items: start;
  padding: 6px 0;
  border-bottom: 1px solid rgba(255,255,255,.06);
}

.clof-checkout-debug__table span {
  color: rgba(247,251,232,.66);
  font-size: 10px;
  font-weight: 900;
  overflow-wrap: anywhere;
}

.clof-checkout-debug__table code {
  display: block;
  overflow-wrap: anywhere;
  color: rgba(247,251,232,.82);
  font-size: 10px;
  line-height: 1.35;
  white-space: normal;
}

@media (max-width: 760px) {
  .clof-checkout-debug__table > div {
    grid-template-columns: 1fr;
    gap: 3px;
  }
}

/* v1.6.9 safe tiny postcode fix
   이전 v1.6.8의 모바일 전체 input 확대는 제거.
   우편번호 row만 초소형 화면에서 안전하게 세로 배치한다. */
@media (max-width: 480px) {
  .clof--info .clof-field--postcode {
    grid-column: 1 / -1 !important;
    width: 100% !important;
    min-width: 0 !important;
  }

  .clof--info .clof-zip-row {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 7px !important;
    width: 100% !important;
    min-width: 0 !important;
  }

  .clof--info .clof-zip-row input[data-clof-zip] {
    display: block !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    font-size: 16px !important;
    pointer-events: auto !important;
    -webkit-user-select: text;
    user-select: text;
  }

  .clof--info .clof-zip-btn {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    flex: none !important;
  }
}

@media (max-width: 340px) {
  .clof--info .clof-info-section {
    padding-left: 8px !important;
    padding-right: 8px !important;
  }
}


/* v1.7.0 info form vertical input layout
   - 사용자 입력 영역은 전부 세로 1열로 통일.
   - 작은 화면에서 2열 그리드/우편번호 가로 row 때문에 터치가 죽는 문제 차단.
   - 결제 direct POST / 재고 / 필수입력 로직은 변경 없음. */
.clof--info .clof-info-form,
.clof--info .clof-info-section,
.clof--info .clof-form-grid,
.clof--info .clof-field {
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
}

.clof--info .clof-form-grid,
.clof--info .clof-form-grid--2 {
  display: grid !important;
  grid-template-columns: 1fr !important;
  gap: 11px !important;
}

.clof--info .clof-field,
.clof--info .clof-field--wide {
  grid-column: auto !important;
}

.clof--info .clof-field input,
.clof--info .clof-field select,
.clof--info .clof-field textarea {
  display: block !important;
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  box-sizing: border-box !important;
  position: relative;
  z-index: 1;
  pointer-events: auto !important;
}

.clof--info .clof-zip-row {
  display: grid !important;
  grid-template-columns: 1fr !important;
  gap: 8px !important;
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
}

.clof--info .clof-zip-row input,
.clof--info .clof-zip-btn {
  width: 100% !important;
  min-width: 0 !important;
}

.clof--info .clof-zip-btn {
  flex: none !important;
  justify-self: stretch !important;
}

@media (max-width: 480px) {
  .clof--info .clof-info-section {
    padding-left: 10px;
    padding-right: 10px;
  }

  .clof--info .clof-field input,
  .clof--info .clof-field select,
  .clof--info .clof-field textarea,
  .clof--info .clof-zip-btn {
    min-height: 46px !important;
    font-size: 16px !important;
  }
}

@media (max-width: 340px) {
  .clof--info .clof-card {
    padding-left: 7px;
    padding-right: 7px;
  }

  .clof--info .clof-info-section {
    padding-left: 8px;
    padding-right: 8px;
  }
}


/* v1.7.1 postcode inline autofill button
   - 주소 자동입력 버튼을 우편번호 input 안쪽 오른쪽에 넣어 한 줄로 고정.
   - 이전 v1.7.0의 세로 버튼 배치보다 초소형 화면에서 레이아웃 흔들림이 적다.
   - 기능/POST/결제 로직 변경 없음. */
.clof--info .clof-zip-row.clof-zip-row--inline,
.clof--info .clof-zip-row--inline {
  display: block !important;
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
}

.clof--info .clof-zip-inline {
  position: relative !important;
  display: block !important;
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
}

.clof--info .clof-zip-inline input[data-clof-zip] {
  display: block !important;
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  min-height: 46px !important;
  padding-right: 112px !important;
  font-size: 16px !important;
  box-sizing: border-box !important;
  pointer-events: auto !important;
  -webkit-user-select: text !important;
  user-select: text !important;
}

.clof--info .clof-zip-inline .clof-zip-btn {
  position: absolute !important;
  top: 50% !important;
  right: 6px !important;
  transform: translateY(-50%) !important;
  z-index: 3 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: auto !important;
  min-width: 88px !important;
  max-width: calc(100% - 12px) !important;
  height: 34px !important;
  min-height: 34px !important;
  padding: 0 12px !important;
  border-radius: 7px !important;
  font-size: 11px !important;
  line-height: 1 !important;
  white-space: nowrap !important;
  flex: none !important;
  justify-self: auto !important;
}

.clof--info .clof-zip-inline .clof-zip-btn:focus {
  outline: 2px solid rgba(189,233,58,.48) !important;
  outline-offset: 1px !important;
}

@media (max-width: 380px) {
  .clof--info .clof-zip-inline input[data-clof-zip] {
    padding-right: 98px !important;
  }

  .clof--info .clof-zip-inline .clof-zip-btn {
    right: 5px !important;
    min-width: 78px !important;
    height: 32px !important;
    min-height: 32px !important;
    padding: 0 9px !important;
    font-size: 10.5px !important;
  }
}

@media (max-width: 320px) {
  .clof--info .clof-zip-inline input[data-clof-zip] {
    padding-right: 90px !important;
  }

  .clof--info .clof-zip-inline .clof-zip-btn {
    min-width: 72px !important;
    padding-left: 7px !important;
    padding-right: 7px !important;
    font-size: 10px !important;
  }
}


/* v1.7.5 info-page local required validation */
button.clof-summary__btn,
.clof-summary__btn--form-submit {
  width: 100%;
  border: 0 !important;
  cursor: pointer;
  font-family: inherit !important;
  appearance: none;
  -webkit-appearance: none;
}

.clof-info-form [aria-invalid="true"] {
  scroll-margin-top: 90px;
}


/* v1.7.5 info-page local required validation */
.clof-validation-alert--client {
  scroll-margin-top: 90px;
}
.clof-info-form .clof-info-section.is-invalid {
  border-color: rgba(255, 120, 82, .45) !important;
}


/* v1.7.9 complete page native order-data layout
   Only complete main card inner blocks are restyled. Sidebar/help/history/recommendations/header/footer are untouched. */
.clof-complete-native-info .clof-confirm-section__head,
.clof-complete-native-payment .clof-confirm-section__head,
.clof-complete-native-products .clof-confirm-section__head,
.clof-complete-native-address .clof-confirm-section__head {
  margin-bottom: 13px;
}

.clof-complete-info-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0 22px;
  padding-left: 34px;
}

.clof-complete-info-grid div {
  display: grid;
  gap: 4px;
  min-width: 0;
  padding: 9px 0;
  border-bottom: 1px solid rgba(255,255,255,.055);
}

.clof-complete-info-grid span,
.clof-complete-pay span,
.clof-complete-product-totals span {
  display: block;
  color: rgba(247,251,232,.48);
  font-size: 10px;
  font-weight: 900;
  line-height: 1.35;
}

.clof-complete-info-grid strong,
.clof-complete-pay strong,
.clof-complete-product-totals strong {
  display: block;
  color: rgba(247,251,232,.88);
  font-size: 12px;
  font-weight: 950;
  line-height: 1.5;
  overflow-wrap: anywhere;
}

.clof-complete-info-grid strong em {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 22px;
  padding: 0 8px;
  border-radius: 999px;
  background: rgba(143,185,43,.14);
  color: var(--clof-green2);
  font-size: 10px;
  font-style: normal;
  font-weight: 950;
}

.clof-complete-pay {
  display: grid;
  gap: 12px;
  padding-left: 34px;
}

.clof-complete-pay__lead {
  margin: 0 !important;
  color: rgba(247,251,232,.72);
  font-size: 12px;
  font-weight: 850;
  line-height: 1.65;
}

.clof-complete-pay__deadline {
  display: grid;
  grid-template-columns: minmax(120px, .42fr) minmax(0, 1fr);
  gap: 12px;
  align-items: center;
  min-height: 44px;
  padding: 10px 12px;
  border-radius: 9px;
  border: 1px solid rgba(143,185,43,.28);
  background: rgba(143,185,43,.045);
}

.clof-complete-pay__deadline span {
  display: flex;
  align-items: center;
  gap: 7px;
  margin: 0;
}

.clof-complete-pay__deadline .clof-icon {
  width: 15px;
  height: 15px;
  color: var(--clof-green2);
}

.clof-complete-bank {
  display: grid;
  gap: 10px;
}

.clof-complete-bank h3 {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 2px 0 0 !important;
  color: #fff7dc !important;
  font-size: 13px !important;
  font-weight: 950 !important;
  line-height: 1.35 !important;
}

.clof-complete-bank h3 .clof-icon {
  width: 16px;
  height: 16px;
  color: var(--clof-green2);
}

.clof-complete-bank__box,
.clof-complete-pay__method {
  display: grid;
  gap: 0;
  overflow: hidden;
  border-radius: 12px;
  border: 1px solid rgba(143,185,43,.18);
  background:
    radial-gradient(circle at 92% 18%, rgba(143,185,43,.060), transparent 34%),
    rgba(0,0,0,.16);
}

.clof-complete-bank__box div,
.clof-complete-pay__method div {
  display: grid;
  grid-template-columns: minmax(120px, .42fr) minmax(0, 1fr);
  gap: 12px;
  align-items: center;
  min-width: 0;
  padding: 10px 12px;
  border-bottom: 1px solid rgba(255,255,255,.065);
}

.clof-complete-bank__box div:last-child,
.clof-complete-pay__method div:last-child {
  border-bottom: 0;
}

.clof-complete-bank__box .is-emphasis {
  color: var(--clof-green2);
  font-size: 16px;
  letter-spacing: .02em;
}

.clof-complete-pay__notes {
  display: grid;
  gap: 4px;
  padding: 11px 12px;
  border-radius: 10px;
  border: 1px solid rgba(255,255,255,.07);
  background: rgba(0,0,0,.13);
}

.clof-complete-pay__notes p {
  margin: 0 !important;
  color: rgba(247,251,232,.58);
  font-size: 11px;
  font-weight: 850;
  line-height: 1.55;
}

.clof-complete-products {
  display: grid;
  gap: 0;
  padding-left: 34px;
}

.clof-complete-products__head,
.clof-complete-product {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 92px 64px 100px;
  gap: 12px;
  align-items: center;
}

.clof-complete-products__head {
  padding: 9px 11px;
  border-radius: 8px 8px 0 0;
  background: rgba(255,255,255,.04);
  color: rgba(247,251,232,.50);
  font-size: 10px;
  font-weight: 950;
}

.clof-complete-products__head span:nth-child(n+2) {
  text-align: right;
}

.clof-complete-product {
  padding: 12px 11px;
  border-bottom: 1px solid rgba(255,255,255,.065);
  background: rgba(0,0,0,.10);
}

.clof-complete-product__main {
  display: grid;
  grid-template-columns: 56px minmax(0, 1fr);
  gap: 10px;
  align-items: center;
  min-width: 0;
}

.clof-complete-product__main strong {
  display: block;
  color: var(--clof-text);
  font-size: 12px;
  font-weight: 950;
  line-height: 1.4;
  overflow-wrap: anywhere;
}

.clof-complete-product > b,
.clof-complete-product > strong {
  color: #fff7dc;
  font-size: 12px;
  font-weight: 950;
  text-align: right;
}

.clof-complete-product > strong:last-child {
  color: var(--clof-green2);
}

.clof-complete-product-totals {
  display: grid;
  justify-self: end;
  width: min(100%, 330px);
  margin-top: 8px;
  border-top: 1px solid rgba(255,255,255,.065);
}

.clof-complete-product-totals div {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  padding: 8px 0;
  border-bottom: 1px solid rgba(255,255,255,.055);
}

.clof-complete-product-totals div:last-child {
  border-bottom: 0;
}

.clof-complete-product-totals .is-total strong {
  color: var(--clof-green2);
  font-size: 18px;
}

.clof-complete-address-card {
  display: grid;
  gap: 3px;
  min-width: 0;
  margin-left: 34px;
  padding: 13px 14px;
  border-radius: 11px;
  border: 1px solid rgba(143,185,43,.16);
  background: rgba(0,0,0,.14);
}

.clof-complete-address-card span {
  display: block;
  color: rgba(247,251,232,.56);
  font-size: 11px;
  font-weight: 900;
  line-height: 1.45;
}

.clof-complete-address-card strong,
.clof-complete-address-card b,
.clof-complete-address-card em {
  display: block;
  color: rgba(247,251,232,.84);
  font-size: 12px;
  font-style: normal;
  font-weight: 900;
  line-height: 1.55;
  overflow-wrap: anywhere;
}

.clof-complete-address-card em {
  color: var(--clof-text);
}

@media (max-width: 760px) {
  .clof-complete-info-grid,
  .clof-complete-pay,
  .clof-complete-products {
    padding-left: 0;
  }

  .clof-complete-info-grid {
    grid-template-columns: 1fr;
  }

  .clof-complete-pay__deadline,
  .clof-complete-bank__box div,
  .clof-complete-pay__method div {
    grid-template-columns: 1fr;
    gap: 4px;
  }

  .clof-complete-products__head {
    display: none;
  }

  .clof-complete-product {
    grid-template-columns: 1fr;
    gap: 8px;
    padding: 12px 0;
  }

  .clof-complete-product > b,
  .clof-complete-product > strong {
    text-align: left;
  }

  .clof-complete-product > b::before {
    content: "数量：";
    color: rgba(247,251,232,.48);
    margin-right: 4px;
  }

  .clof-complete-product > strong:nth-of-type(1)::before {
    content: "単価：";
    color: rgba(247,251,232,.48);
    margin-right: 4px;
  }

  .clof-complete-product > strong:last-child::before {
    content: "小計：";
    color: rgba(247,251,232,.48);
    margin-right: 4px;
  }

  .clof-complete-product-totals {
    justify-self: stretch;
    width: 100%;
  }

  .clof-complete-address-card {
    margin-left: 0;
  }
}

@media (max-width: 380px) {
  .clof-complete-bank__box .is-emphasis {
    font-size: 15px;
  }

  .clof-complete-pay__deadline,
  .clof-complete-bank__box div,
  .clof-complete-pay__method div,
  .clof-complete-address-card {
    padding-left: 10px;
    padding-right: 10px;
  }
}


/* v1.8.0 bank account detection note */
.clof-complete-pay__method div strong {
  overflow-wrap: anywhere;
}


/* v1.8.1 mobile complete page: compact progress flow
   PC layout unchanged. On mobile, the complete-step flow is compressed so payment/order details appear sooner. */
@media (max-width: 760px) {
  .clof--complete .clof-complete-hero {
    grid-template-columns: 42px minmax(0, 1fr);
    gap: 10px;
    padding-bottom: 13px;
  }

  .clof--complete .clof-complete-hero__icon {
    width: 42px;
    height: 42px;
    font-size: 22px;
    box-shadow: 0 0 0 4px rgba(143,185,43,.07);
  }

  .clof--complete .clof-complete-hero h1 {
    margin-bottom: 4px !important;
    font-size: 18px !important;
    line-height: 1.25 !important;
  }

  .clof--complete .clof-complete-hero p {
    font-size: 11px;
    line-height: 1.45;
  }

  .clof--complete .clof-complete-flow {
    display: grid !important;
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    gap: 6px !important;
    align-items: stretch !important;
    padding: 11px 0 13px !important;
    border-bottom: 1px solid var(--clof-line-soft) !important;
  }

  .clof--complete .clof-complete-flow b {
    display: none !important;
  }

  .clof--complete .clof-complete-flow div {
    display: grid !important;
    justify-items: center !important;
    align-content: start !important;
    gap: 5px !important;
    min-width: 0 !important;
    min-height: 54px !important;
    padding: 7px 3px 6px !important;
    border-radius: 10px !important;
    border: 1px solid rgba(143,185,43,.14) !important;
    background: rgba(143,185,43,.025) !important;
    text-align: center !important;
  }

  .clof--complete .clof-complete-flow div > span {
    width: 24px !important;
    height: 24px !important;
    border-radius: 999px !important;
    font-size: 14px !important;
    background: rgba(143,185,43,.08) !important;
  }

  .clof--complete .clof-complete-flow div > span .clof-icon {
    width: 14px !important;
    height: 14px !important;
    font-size: 14px !important;
  }

  .clof--complete .clof-complete-flow strong {
    max-width: 100%;
    overflow: hidden;
    color: rgba(247,251,232,.86);
    font-size: 10px !important;
    font-weight: 950 !important;
    line-height: 1.15 !important;
    white-space: nowrap;
    text-overflow: ellipsis;
  }

  .clof--complete .clof-complete-flow em {
    display: none !important;
  }

  .clof--complete .clof-confirm-list {
    margin-top: 0;
  }

  .clof--complete .clof-confirm-section {
    padding-top: 14px;
    padding-bottom: 14px;
  }
}

@media (max-width: 380px) {
  .clof--complete .clof-complete-flow {
    gap: 4px !important;
  }

  .clof--complete .clof-complete-flow div {
    min-height: 50px !important;
    padding-left: 2px !important;
    padding-right: 2px !important;
  }

  .clof--complete .clof-complete-flow strong {
    font-size: 9px !important;
  }

  .clof--complete .clof-complete-flow div > span {
    width: 22px !important;
    height: 22px !important;
  }

  .clof--complete .clof-complete-flow div > span .clof-icon {
    width: 13px !important;
    height: 13px !important;
  }
}


/* v1.8.2 PayPay ID display */
.clof-complete-info-grid strong,
.clof-complete-pay__method strong {
  overflow-wrap: anywhere;
  word-break: break-word;
}


/* v1.8.4 PayPay ID missing status */
.clof-complete-info-grid strong,
.clof-complete-pay__method strong {
  overflow-wrap: anywhere;
}


/* v1.8.5 PayPay configured display ID */
.clof-complete-info-grid strong,
.clof-complete-pay__method strong {
  overflow-wrap: anywhere;
}


/* Point redemption slot in custom order flow summary */
.clof-point-slot {
  margin: 0 0 14px;
}

.clof-point-slot--missing {
  padding: 13px 14px;
  border: 1px solid rgba(255, 177, 95, .26);
  border-radius: 12px;
  background: rgba(255, 177, 95, .055);
}

.clof-point-slot--missing strong {
  display: block;
  color: #ffb15f;
  font-size: 12px;
  font-weight: 950;
}

.clof-point-slot--missing p {
  margin: 5px 0 0 !important;
  color: rgba(247,251,232,.60);
  font-size: 11px;
  font-weight: 850;
  line-height: 1.5;
}

.clof .clpr {
  margin: 0 0 14px !important;
  padding: 14px !important;
  border-color: rgba(143, 185, 43, .22) !important;
  border-radius: 13px !important;
  background:
    radial-gradient(circle at 100% 0%, rgba(143,185,43,.10), transparent 32%),
    linear-gradient(180deg, rgba(255,255,255,.032), rgba(255,255,255,.012)),
    rgba(0,0,0,.24) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.045), 0 10px 24px rgba(0,0,0,.18) !important;
}

.clof .clpr__head {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 10px !important;
  align-items: start !important;
  margin-bottom: 12px !important;
}

.clof .clpr__head strong {
  color: var(--clof-green2) !important;
  font-size: 14px !important;
  font-weight: 950 !important;
  line-height: 1.25 !important;
}

.clof .clpr__head span,
.clof .clpr__message {
  color: rgba(247,251,232,.56) !important;
  font-size: 10.5px !important;
  font-weight: 850 !important;
  line-height: 1.5 !important;
}

.clof .clpr__balance {
  min-width: 76px !important;
  padding: 8px 9px !important;
  border-color: rgba(143,185,43,.24) !important;
  border-radius: 10px !important;
  background: rgba(0,0,0,.28) !important;
}

.clof .clpr__balance span {
  color: rgba(247,251,232,.52) !important;
  font-size: 9.5px !important;
  font-weight: 900 !important;
}

.clof .clpr__balance b {
  color: var(--clof-green2) !important;
  font-size: 16px !important;
  font-weight: 950 !important;
  line-height: 1.1 !important;
}

.clof .clpr__body {
  gap: 10px !important;
}

.clof .clpr__field {
  gap: 6px !important;
}

.clof .clpr__field > span {
  color: rgba(247,251,232,.68) !important;
  font-size: 10.5px !important;
  font-weight: 950 !important;
}

.clof .clpr__field input {
  min-height: 40px !important;
  padding: 0 34px 0 11px !important;
  border-color: rgba(143,185,43,.22) !important;
  border-radius: 9px !important;
  background: rgba(0,0,0,.30) !important;
  color: var(--clof-text) !important;
  font-size: 13px !important;
  font-weight: 950 !important;
}

.clof .clpr__field em {
  right: 11px !important;
  bottom: 10px !important;
  color: var(--clof-green2) !important;
  font-size: 12px !important;
}

.clof .clpr__quick,
.clof .clpr__actions {
  gap: 7px !important;
}

.clof .clpr__quick button,
.clof .clpr__remove {
  min-height: 32px !important;
  padding: 0 9px !important;
  border-color: rgba(143,185,43,.22) !important;
  border-radius: 8px !important;
  background: rgba(255,255,255,.035) !important;
  color: rgba(247,251,232,.78) !important;
  font-size: 10.5px !important;
  font-weight: 950 !important;
}

.clof .clpr__apply {
  min-height: 40px !important;
  padding: 0 16px !important;
  border-radius: 9px !important;
  background: linear-gradient(180deg, #b7eb35 0%, #93c70f 100%) !important;
  color: #101707 !important;
  font-size: 12px !important;
  font-weight: 950 !important;
}

.clof-summary__point-discount {
  display: none !important;
}

.clof-summary__point-discount.is-visible {
  display: flex !important;
}

.clof-summary__point-discount span,
.clof-summary__point-discount strong {
  color: var(--clof-green2) !important;
}

@media (max-width: 760px) {
  .clof .clpr {
    padding: 13px 11px !important;
  }

  .clof .clpr__head {
    grid-template-columns: 1fr;
  }

  .clof .clpr__balance {
    width: 100% !important;
    text-align: left !important;
  }

  .clof .clpr__quick button,
  .clof .clpr__remove,
  .clof .clpr__apply {
    flex: 1 1 auto !important;
  }
}

/* ------------------------------------------------------------------
 * Duck Mark design profile bridge (v2.1.2)
 *
 * The 4,000 lines above are untouched. This section only re-points the existing
 * --clof-* custom properties, so every rule already written keeps working while
 * the colours follow the site tokens or the chosen preset. Markup, wrappers and
 * class names are unchanged.
 * ----------------------------------------------------------------- */


/* Presets. Each one changes background, surface, text, accent, border and button. */
body.dm-order-flow-preset-clean-light .clof {
  --clof-bg: #ffffff;
  --clof-card: #f6f7f8;
  --clof-card2: #ffffff;
  --clof-line: rgba(17, 17, 17, 0.12);
  --clof-green: #111111;
  --clof-green2: #333333;
  --clof-text: #1d1d1f;
  --clof-muted: rgba(29, 29, 31, 0.62);
}

body.dm-order-flow-preset-modern-mono .clof {
  --clof-bg: #1a1a1a;
  --clof-card: #242424;
  --clof-card2: #2e2e2e;
  --clof-line: rgba(255, 255, 255, 0.14);
  --clof-green: #ffffff;
  --clof-green2: #d5d5d5;
  --clof-text: #f5f5f5;
  --clof-muted: rgba(245, 245, 245, 0.62);
}

body.dm-order-flow-preset-luxury-beige .clof {
  --clof-bg: #f5efe6;
  --clof-card: #ffffff;
  --clof-card2: #faf6f0;
  --clof-line: rgba(58, 51, 43, 0.14);
  --clof-green: #8a7355;
  --clof-green2: #a68b68;
  --clof-text: #3a332b;
  --clof-muted: rgba(58, 51, 43, 0.62);
}

body.dm-order-flow-preset-playful-pop .clof {
  --clof-bg: #fff7fb;
  --clof-card: #ffffff;
  --clof-card2: #fff1f7;
  --clof-line: rgba(43, 32, 25, 0.12);
  --clof-green: #ff5aa7;
  --clof-green2: #ff8fc3;
  --clof-text: #2b2019;
  --clof-muted: rgba(43, 32, 25, 0.62);
}

/* The original production look stays available by name. */
body.dm-order-flow-preset-original-dark-neon .clof {
  --clof-bg: #050604;
  --clof-card: #0d0f0a;
  --clof-card2: #11140d;
  --clof-line: rgba(143, 185, 43, 0.16);
  --clof-green: #8fb92b;
  --clof-green2: #bde93a;
  --clof-text: #f4f7e9;
  --clof-muted: rgba(247, 251, 232, 0.62);
}

/* Button radius follows the site token when one is present. */
body.dm-order-flow-global-tokens .clof .clof-btn,
body.dm-order-flow-global-tokens .clof button {
  border-radius: var(--dm-btn-radius, 10px);
}

/* Global token mode is declared after every preset so that, at equal specificity,
   the site tokens are the final source. Turning tokens off leaves the preset
   literals above as the winner. The original values remain the CSS fallback. */
body.dm-order-flow-global-tokens .clof {
  --clof-bg: var(--dm-bg, #050604);
  --clof-card: var(--dm-surface, #0d0f0a);
  --clof-card2: var(--dm-surface-2, #11140d);
  --clof-line: var(--dm-border, rgba(143, 185, 43, 0.16));
  --clof-green: var(--dm-primary, #8fb92b);
  --clof-green2: var(--dm-accent, #bde93a);
  --clof-text: var(--dm-text, #f4f7e9);
  --clof-muted: var(--dm-muted, rgba(247, 251, 232, 0.62));
}


/* =====================================================================
 * v2.1.3 — Pack token bridge, completed.
 *
 * The bridge above already hands eight colours from the site tokens to the
 * flow. It stopped there, so everything it did not name kept the values this
 * plugin shipped with when it was a dark standalone product: the type came out
 * as the browser's system stack while the header ran the Pack font, the radius
 * scale was whatever each rule had hardcoded, and two variables still held
 * light-on-dark values on a light page.
 *
 * Same mechanism, same scope, same "tokens off leaves the presets alone"
 * contract as the block above — only the list is longer.
 * ===================================================================== */

body.dm-order-flow-global-tokens .clof {
  /* Typography is part of a Pack's language, not this plugin's. */
  --clof-font: var(--dm-font-body, inherit);
  --clof-font-display: var(--dm-font-display, var(--dm-font-body, inherit));

  /* One radius scale instead of a dozen literals. */
  --clof-radius: var(--dm-radius-lg, 14px);
  --clof-btn-radius: var(--dm-btn-radius, 10px);

  /* These two were the last dark-theme literals reaching a light surface. */
  --clof-dim: var(--dm-muted, rgba(247, 251, 232, 0.44));
  --clof-line-soft: var(--dm-border, rgba(255, 255, 255, 0.07));

  font-family: var(--clof-font, inherit);
}

body.dm-order-flow-global-tokens .clof .clof-card__title h1,
body.dm-order-flow-global-tokens .clof .clof-small-title strong,
body.dm-order-flow-global-tokens .clof .clof-summary-benefits h3 {
  font-family: var(--clof-font-display, inherit);
}

/*
 * Control baseline.
 *
 * The blue "適用" button was not styled blue by anything here — it carried no
 * class at all, so Astra's default button rule was the only one that matched
 * it. Naming every control inside the flow closes that door for good: a control
 * that someone forgets to class still lands on Pack tokens rather than on the
 * theme. This is why it is written against the element, not against a class.
 */
body.dm-order-flow-global-tokens .clof button,
body.dm-order-flow-global-tokens .clof input[type="submit"],
body.dm-order-flow-global-tokens .clof a.clof-btn {
  background: var(--clof-card2, transparent);
  color: var(--clof-text, inherit);
  border: 1px solid var(--clof-line, currentColor);
  border-radius: var(--clof-btn-radius, 10px);
  font-family: var(--clof-font, inherit);
  font-weight: 700;
  cursor: pointer;
}

/* The one control that carries the order forward keeps the Pack's primary. */
body.dm-order-flow-global-tokens .clof .clof-summary__btn,
body.dm-order-flow-global-tokens .clof .clof-btn--primary {
  background: var(--clof-green, #111);
  color: var(--dm-on-primary, #fff);
  border-color: var(--clof-green, #111);
}

/* Secondary actions read as the Pack's accent, not as a browser default. */
body.dm-order-flow-global-tokens .clof .clof-btn--ghost {
  background: var(--clof-bg, transparent);
  color: var(--clof-text, inherit);
  border-color: var(--clof-green2, var(--clof-line, currentColor));
}
body.dm-order-flow-global-tokens .clof .clof-btn--ghost:hover {
  background: var(--clof-card2, transparent);
  border-color: var(--clof-green2, currentColor);
}

body.dm-order-flow-global-tokens .clof input[type="text"],
body.dm-order-flow-global-tokens .clof input[type="email"],
body.dm-order-flow-global-tokens .clof input[type="tel"],
body.dm-order-flow-global-tokens .clof input[type="number"],
body.dm-order-flow-global-tokens .clof input[type="search"],
body.dm-order-flow-global-tokens .clof select,
body.dm-order-flow-global-tokens .clof textarea {
  background: var(--clof-bg, #fff);
  color: var(--clof-text, inherit);
  border: 1px solid var(--clof-line, currentColor);
  border-radius: var(--clof-btn-radius, 10px);
  font-family: var(--clof-font, inherit);
}

/* The close glyphs above deliberately keep Arial so the × renders the same
   everywhere; only their colour is a Pack decision, and it is left alone here
   because those rules carry !important literals that predate the bridge. */