/* Archive Product page */
.promo-card {
  min-width: 460px;
  width: 100%;
  background: #e6f4ef;
  border-radius: 20px;
  padding: 28px 24px 32px;
  box-shadow: 0 8px 18px rgba(0, 0, 0, 0.06);
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 5%;
}

.promo-card .promo-title {
  font-size: 32px;
  line-height: 1.25;
  font-weight: 700;
  color: #1f8462;
  margin: 0 0 18px 0;
}

.promo-card .promo-copy {
  font-size: 16px;
  line-height: 1.6;
  color: #1f8462;
  margin: 0 0 16px;
}

.promo-card .price-row {
  font-size: 16px;
  line-height: 1.5;
  color: #1f8462;
  margin: 0 0 26px;
}

.promo-card .price-row s {
  color: #999;
  text-decoration-thickness: 2px;
  margin-right: 6px;
}

.promo-card .price {
  font-weight: 800;
  color: #1f8462;
}

.w2w-card-inner.packbox {
  height: 186px !important;
}

.promo-card .btn {
  display: inline-block;
  font-size: 16px;
  font-weight: 600;
  padding: 12px 20px;
  background: #1f8462;
  color: #fff;
  border: 0;
  border-radius: 9999px;
  /* pill */
  cursor: pointer;
  text-decoration: none;
  transition:
    background 0.2s ease,
    transform 0.1s ease;
  width: 168px;
  text-align: center;
}

.promo-card .btn:hover {
  background: #30a67f;
}

@media (max-width: 480px) {
  .promo-card .promo-title {
    font-size: 24px;
  }

  .promo-card .promo-copy,
  .price-row {
    font-size: 14px;
  }

  .promo-card .promo-card {
    padding: 20px;
  }
}

/* ===== Price block styles (scoped-ish) ===== */
.w2w-klarna {
  display: flex;
  flex-direction: row;
  gap: 12px;
}

.w2w-price-wrap {
  display: flex;
  gap: 48px;
  align-items: flex-start;
  flex-wrap: wrap;
  margin: 60px 0px;
  font-family: "Lato";
  justify-content: space-between;
}

.w2w-price {
  min-width: 300px;
}

.w2w-price .label {
  margin-bottom: 6px;
  color: #b4b4b3;
  font-family: "Noto Sans";
  font-size: 24px;
  font-style: normal;
  font-weight: 600;
  line-height: 28px;
  /* 116.667% */
  letter-spacing: -0.12px;
  text-transform: capitalize;
}

.w2w-colours-left .label {
  margin-bottom: 20px;
  color: #b4b4b3;
  font-family: "Noto Sans";
  font-size: 24px;
  font-style: normal;
  font-weight: 600;
  line-height: 28px;
  /* 116.667% */
  letter-spacing: -0.12px;
  text-transform: capitalize;
}

.w2w-price-wrap .w2w-price .value {
  font-size: 32px;
  line-height: 1.2;
  font-weight: 700;
  color: #1c1d1c;
  letter-spacing: -0.14px;
  font-family: Noto Sans;
}

.w2w-price .value small {
  font-size: 0.65em;
  font-weight: 600;
  color: #8e9a96;
  margin-left: 6px;
}

/* ===== Colours ===== */
.w2w-colours {
  width: 100%;
  margin-top: 20px;
}

.w2w-colours .label {
  font-size: 14px;
  color: #8e9a96;
  font-weight: 600;
  margin-bottom: 10px;
  font-family: "Noto Sans";
}

.w2w-swatch-list {
  display: flex;
  gap: 18px;
  align-items: flex-start;
  flex-wrap: wrap;
  list-style: none;
  padding: 0;
  margin: 0;
}

.w2w-swatch {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  position: relative;
}

.w2w-swatch .thumb {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: #e6ecea;
  background-size: cover;
  background-position: center;
  box-shadow: inset 0 0 0 2px rgba(0, 0, 0, 0.04);
  position: relative;
  cursor: pointer;
  transition:
    box-shadow 0.15s ease,
    transform 0.05s ease;
}

.w2w-swatch .thumb:hover {
  box-shadow: inset 0 0 0 2px rgba(0, 0, 0, 0.12);
}

.w2w-swatch .thumb:active {
  transform: translateY(1px);
}

.w2w-swatch .name {
  font-size: 13px;
  color: #666e6b;
}

.w2w-swatch.is-selected .thumb {
  box-shadow: inset 0 0 0 3px #21a366;
  /* brand green ring */
}

.w2w-swatch.is-selected .chip {
  position: absolute;
  bottom: -22px;
  left: 50%;
  transform: translateX(-50%);
  font-size: 12px;
  color: #21a366;
  border: 1.5px solid #21a366;
  padding: 3px 8px;
  border-radius: 999px;
  background: #fff;
  white-space: nowrap;
}

/* “+ N colours” link */
.w2w-more {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-left: 6px;
  cursor: pointer;
  user-select: none;
  font-size: 14px;
  color: #6b7571;
  border-bottom: 1.5px dashed #cfd6d3;
  padding-bottom: 2px;
}

.w2w-hidden {
  display: none !important;
}

/* Responsive */
@media (max-width: 560px) {
  .w2w-price .value {
    font-size: 24px;
  }

  .w2w-swatch .thumb {
    width: 56px;
    height: 56px;
  }
}

.woocommerce-tabs {
  display: none !important;
}

/* ====== Scoped styles (only this block) ====== */
.w2w-calc-wrap {
  display: flex;
  align-items: center;
  gap: 40px;
  align-self: stretch;
  align-items: end;
  justify-content: space-between;
}

.w2w-calc-wrap .w2w-card-inner {
  display: flex;
  width: 584px;
  height: 152px;
  padding: 20px;
  flex-direction: column;
  align-items: flex-start;
  justify-content: space-between;
  gap: 8px;
  border-radius: 10px;
  border: 1px solid #b4b4b3;
  background: rgba(255, 255, 255, 0.5);
}

.cal-btn-wrap {
  display: flex;
  gap: 4px;
}

.calcy-wrapper {
  display: flex;
  flex-direction: row;
  gap: 5px;
  align-items: flex-end;
}

.calcy-wrapper input {
  width: 138px;
  display: inline-flex;
  height: 48px;
  padding: 16px 12px;
  justify-content: space-between;
  border-radius: 12px;
  border: 1px solid rgba(54, 54, 53, 0.5);
}

.mid-icon {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 48px;
}

@media (max-width: 980px) {
  .w2w-calc-wrap {
    flex-direction: column;
  }
}

.w2w-h2 {
  font-size: clamp(22px, 3.2vw, 28px);
  line-height: 1.2;
  font-weight: 640;
  color: #363635;
  margin: 0 0 16px;
  letter-spacing: -0.14px;
  font-family: Noto Sans;
}

.w2w-card {
  padding: 5px;
  position: relative;
  background: #fff;
}

.w2w-tabs {
  display: flex;
  gap: 18px;
  align-items: center;
  margin-bottom: 10px;
}

.w2w-tab {
  font-weight: 700;
  color: #1f8462;
  position: relative;
  padding-bottom: 6px;
}

.w2w-tab:after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 2px;
  background: #21a366;
  border-radius: 2px;
}

button.w2w-btn.wcsample-button {
  margin-bottom: 8px;
  border: 1px solid #21a366;
}

.w2w-guide a {
  color: #21a366;
  text-underline-offset: 2px;
  display: flex;
  align-items: center;
  gap: 10px;
}

.w2w-guide {
  margin-left: auto;
  font-weight: 600;
}

.w2w-grid {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 18px;
  align-items: center;
}

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

.w2w-fieldset {
  display: flex;
  flex-wrap: wrap;
  gap: 0px;
  flex-direction: column;
}

.calcy-wrapper .w2w-chip {
  display: flex;
  padding: 16px 12px;
  justify-content: center;
  align-items: center;
  gap: 10px;
  flex: 1 0 0;
  height: 48px;
  align-self: stretch;
  border-radius: 10px;
  border: 1px solid #363635;
  background: rgba(255, 255, 255, 0.5);
  color: #363635;
  font-family: Lato;
  font-size: 12px;
  font-style: normal;
  font-weight: 400;
  line-height: 20px;
  /* 166.667% */
  letter-spacing: 0.12px;
}

.w2w-chip.is-active {
  border-radius: 10px;
  border: 1px solid #30a67f;
  background: #e6f4ef;
  color: #30a67f;
}

.w2w-input {
  height: 44px;
  padding: 0 14px;
  border: 1.6px solid #cfd6d3;
  border-radius: 12px;
  outline: 0;
  width: 100%;
  font-size: 16px;
}

.w2w-select {
  display: inline-flex;
  padding: 13px 6px;
  width: 70px;
  height: 48px;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  border-radius: 10px;
  border: 1px solid #363635;
  background: rgba(255, 255, 255, 0.5);
}

.w2w-aside {
  text-align: right;
  color: #6e7774;
  font-size: 13px;
  line-height: 1.4;
  height: 100%;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  width: 100%;
}

.pack-text {
  color: #7c7c7a;
  text-align: right;
  font-family: Lato;
  font-size: 12px;
  font-style: normal;
  font-weight: 400;
  line-height: 20px;
  /* 166.667% */
  letter-spacing: 0.12px;
  width: 155px;
}

.pack-text-normal {
  color: #7c7c7a;
  text-align: left;
  font-family: Lato;
  font-size: 12px;
  font-style: normal;
  font-weight: 400;
  line-height: 20px;
  /* 166.667% */
  letter-spacing: 0.12px;
  width: 155px;
}

.w2w-calc-wrap .w2w-card-inner .w2w-price {
  color: #363635;
  font-family: "Noto Sans";
  font-size: 32px;
  font-style: normal;
  font-weight: 700;
  line-height: 44px;
  /* 137.5% */
  letter-spacing: -0.14px;
  text-transform: capitalize;
  min-width: 115px;
  margin-top: 0px;
}

@media (max-width: 640px) {
  .w2w-aside {
    text-align: left;
  }

  .pack-text {
    width: 100%;
  }
}

.w2w-qty {
  display: flex;
  align-items: self-start;
  gap: 0px;
  flex-direction: column;
}

.w2w-qty .value {
  display: flex;
  justify-content: center;
  align-items: center;
}

.w2w-qty .btn-icon {
  width: 28px;
  height: 28px;
  border-radius: 999px;
  border: 0;
  color: #21a366;
  font-size: 20px;
  line-height: 0;
  background: transparent;
  display: grid;
  place-items: center;
  cursor: pointer;
}

.w2w-qty .val {
  font-size: 32px;
  font-weight: 800;
  min-width: 24px;
  text-align: center;
}

.w2w-price {
  margin-top: 10px;
}

.w2w-calc-wrap .w2w-price .label,
.w2w-calc-wrap .w2w-qty .label,
.w2w-fieldset .label {
  color: #7c7c7a;
  font-family: Lato;
  font-size: 12px;
  font-style: normal;
  font-weight: 400;
  line-height: 20px;
  /* 166.667% */
  letter-spacing: 0.12px;
  margin-bottom: 0px;
}

.cal-left-box {
  display: flex;
  flex-direction: row;
  gap: 12px;
  width: 100%;
  justify-content: space-between;
}

.w2w-calc-wrap .w2w-price .value {
  font-size: 36px;
  font-weight: 700;
  color: #1c1d1c;
}

.w2w-calc-wrap .w2w-ctas {
  display: flex;
  flex-direction: column;
  gap: 2px;
  justify-content: center;
  height: 100%;
  width: 568px;
}

.w2w-btn {
  display: inline-grid;
  place-items: center;
  width: 100%;
  height: 56px;
  border-radius: 18px;
  font-weight: 800;
  font-size: 18px;
  border: 2px solid #21a366;
  background: #fff;
  color: #21a366;
  cursor: pointer;
  transition:
    transform 0.05s ease,
    background 0.15s ease,
    color 0.15s ease;
}

.w2w-btn:hover {
  background: #f2fbf6;
}

.w2w-btn.primary {
  background: #30a67f;
  color: #fff;
  border-color: #30a67f;
}

.w2w-btn.primary:hover {
  background: #1f8462;
}

.w2w-btn:active {
  transform: translateY(1px);
}

.w2w-btn[disabled] {
  cursor: not-allowed;
}

.w2w-key-features {
  margin: 28px 0;
  font-family:
    ui-sans-serif,
    system-ui,
    -apple-system,
    "Segoe UI",
    Roboto,
    Helvetica,
    Arial;
}

.w2w-key-features h3 {
  font-size: 20px;
  font-weight: 700;
  margin-bottom: 12px;
}

.w2w-features-list {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

.w2w-feature-pill {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 14px;
  border: 1.5px solid #cfd6d3;
  border-radius: 999px;
  font-size: 14px;
  font-weight: 600;
  color: #1c1d1c;
  background: #fff;
}

.w2w-feature-pill svg {
  width: 16px;
  height: 16px;
}

.w2w-product-details {
  margin: 40px 0;
  font-family:
    ui-sans-serif,
    system-ui,
    -apple-system,
    "Segoe UI",
    Roboto,
    Helvetica,
    Arial;
}

.w2w-product-details h3 {
  font-size: 22px;
  font-weight: 700;
  margin-bottom: 12px;
  color: #1c1d1c;
}

.w2w-product-details .content {
  line-height: 1.6;
  font-size: 16px;
  color: #000;
  font-family: "Noto Sans";
}

.w2w-product-details .content a {
  color: #21a366;
  font-weight: 600;
}

.w2w-card-inner .w2w-price {
  text-align: left;
}

.w2w-related h3 {
  font-size: 32px;
  margin-bottom: 6rem;
  font-family: "Noto Sans";
}

.w2w-related h3 span {
  display: block;
  font-size: 1.3rem;
  font-weight: normal;
  line-height: 2.2;
}

.w2w-related {
  margin-bottom: 60px;
}

.w2w-related article .inputs {
  display: none;
}

.w2w-related article .price-line {
  font-size: 18px !important;
  font-weight: 700;
  color: #222;
  margin-bottom: 10px;
}

.w2w-related article .price-line .price-decimal {
  font-size: 12px !important;
  vertical-align: super !important;
}

.w2w-related article .price-line::after {
  content: " per sqm";
  font-weight: bold;
  font-size: 13px !important;
  display: none;
}

/* ---------- container ---------- */
.custom-cart-list {
  display: flex;
  flex-direction: column;
  gap: 18px;
  margin-bottom: 22px;
}

.wrapper-title {
  color: #b4b4b3;
  font-family: "Noto Sans";
  font-size: 24px;
  font-style: normal;
  font-weight: 600;
  line-height: 28px;
  letter-spacing: -0.12px;
  text-transform: capitalize;
}

.wrapper-second-title {
  color: #b4b4b3;
  font-family: Lato;
  font-size: 22px;
  font-style: normal;
  font-weight: 400;
  line-height: 36px;
  /* 163.636% */
  letter-spacing: 0.52px;
}

/* each item */
.custom-cart-item {
  display: flex;
  border: 1px solid #b4b4b3;
  border-radius: 20px;
  background: #fff;
  height: 175px;
  padding: 20px;
  justify-content: center;
  align-items: center;
  position: relative;
  z-index: 999;
  gap: 50px;
}

.custom-cart-list-item .cci-row {
  justify-content: start !important;
}

.cci-small-value {
  color: #363635;
  font-family: "Noto Sans";
  font-size: 16px;
  font-style: normal;
  font-weight: 400;
  line-height: 24px;
  /* 150% */
  letter-spacing: 0.64px;
}

.addon-wrap {
  width: 100% !important;
}

.qty-wrap {
  display: flex;
  justify-content: center;
  align-items: center;
}

/* image */
.cci-image {
  flex: 0 0 210px;
}

.cci-image img {
  width: 210px;
  height: 125px;
  border-radius: 20px;
  display: block;
}

/* info */
.cci-info {
  flex: 1;
  min-width: 0;
}

.cci-title {
  display: flex;
  align-items: center;
  gap: 4px;
}

.cci-title a,
.cci-small {
  font-weight: 400;
  color: #7c7c7a;
  text-decoration: none;
  font-size: 12px;
  font-family: Lato;
  letter-spacing: 0.12px;
  opacity: 0.6;
  line-height: 20px;
}

.cci-title a {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  width: 200px;
  display: inline-block;
}

.cci-meta {
  color: #7d7d7d;
  font-size: 13px;
  margin-top: 8px;
}

/* small label row */
.cci-row {
  display: flex;
  gap: 40px;
  margin-top: 18px;
  align-items: center;
  justify-content: center;
}

/* qty */
.cci-qty-block {
}

.qty-wrap .qty {
  width: 40px;
  margin: 0px;
  text-align: center;
  border: 0px;
  padding-left: 16px;
  color: #363635;
  font-family: var(--Font--family);
  font-size: 16px;
  font-style: normal;
  font-weight: 400;
  line-height: 24px;
  letter-spacing: 0.64px;
}

.cart-calc .calc-summary .calc-qty {
  display: none;
}

.qty-wrap .qty-btn {
  background: transparent;
  border: 0px;
  padding: 0px;
}

/* price */
.cci-price-block {
  min-width: 120px;
}

.cci-price {
  color: #363635;
  font-family: var(--Font--family);
  font-size: 16px;
  font-style: normal;
  font-weight: 400;
  line-height: 24px;
  letter-spacing: 0.64px;
}

/* color pill */
.cci-color-block {
  min-width: 160px;
}

.cci-color-toggle .color-pill {
  display: flex;
  width: 124px;
  height: 40px;
  padding: 0;
  justify-content: flex-end;
  align-items: center;
  border-radius: 40px;
  overflow: hidden;
}

.cci-color-toggle .color-pill img {
  width: 100%;
}

.color-pill .pill-label {
  font-weight: 600;
}

.color-pill .pill-drop {
  opacity: 0.9;
  font-size: 12px;
}

.vhr {
  height: 30px;
  width: 1px;
  background: #b4b4b3;
  margin: auto;
}

.cci-edit {
  display: flex;
  height: 58px;
  padding: 17px 32px;
  justify-content: center;
  align-items: center;
  gap: 8px;
  align-self: stretch;
  background: transparent;
  border: 0px;
  color: #30a67f;
  text-align: center;
  font-family: "Noto Sans";
  font-size: 18px;
  font-style: normal;
  font-weight: 640;
  line-height: 24px;
  letter-spacing: 0.2px;
  position: relative;
}

button.cci-edit:after {
  content: "";
  position: absolute;
  width: 100%;
  height: 1px;
  background: #b4b4b3;
  bottom: -9px;
}

.productList h3 {
  color: #363635;
  font-family: "Noto Sans";
  font-size: 32px;
  font-style: normal;
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.14px;
  margin-bottom: 44px;
}

/* actions (right) */
.cci-actions {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}

.cci-actions-mobile {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}

.action-buttons {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 8px;
  margin-top: 17px;
}

.cci-fav {
  border-radius: 0px;
  border: 0px;
  background: #fff;
  color: #2bb673;
  font-size: 18px;
  cursor: pointer;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 8px;
  width: 88px;
  height: 58px;
}

.cci-fav:hover {
  border-radius: 32px;
  background: #e6f4ef;
}

.cci-remove:hover {
  border-radius: 32px;
  background: #e6f4ef;
}

button.cci-edit:hover {
  border-radius: var(--buttons-nav-radius-medium, 32px);
  background: var(--Background-Neutral-Primary, #e6f4ef);
  box-shadow: unset;
  border: 0;
}

.cci-remove {
  background: #fff;
  color: #ff3b30;
  font-size: 18px;
  cursor: pointer;
  display: flex;
  padding: 0px;
  justify-content: center;
  align-items: center;
  width: 88px;
  height: 58px;
  text-decoration: none;
}

/* cart actions */
.custom-cart-actions {
  display: flex;
  gap: 12px;
  align-items: center;
  margin-top: 20px;
}

.update-cart {
  background: #2bb673;
  color: #fff;
  padding: 10px 18px;
  border-radius: 10px;
  border: 0;
  font-weight: 600;
}

/* bottom coupon + subtotal area */
.cart-bottom-row {
  display: flex;
  gap: 24px;
  align-items: end;
  margin-top: 60px;
  margin-bottom: 26px;
}

.coupon-card {
  background: rgba(180, 180, 179, 0.4);
  display: flex;
  max-width: 584px;
  width: 100%;
  height: 171px;
  padding: 40px;
  justify-content: space-between;
  align-items: center;
  border-radius: 40px;
}

#step-3 .cc-subtotal {
  align-items: center;
}

.cc-subtotal {
  display: flex;
  width: 100%;
  align-items: flex-start;
  justify-content: space-between;
}

.coupon-card h4 {
  margin: 0 0 6px 0;
  font-size: 18px;
}

.coupon-card .muted {
  margin: 0;
  color: #6f6f6f;
  font-size: 13px;
  text-align: left;
  padding: 0;
}

.coupon-copy {
  background: #fff;
  border: 1px solid #d0d0d0;
  padding: 10px 14px;
  border-radius: 40px;
  cursor: pointer;
  font-weight: 600;
}

#step-3 .muted {
  color: #363635;
  font-family: "Noto Sans";
  font-size: 16px;
  font-style: normal;
  font-weight: 400;
  line-height: 24px;
  /* 150% */
  letter-spacing: 0.64px;
  padding: 0px;
  margin-top: 16px;
  text-transform: none;
}

#step-3 .w2w-main {
  padding: 0px;
}

/* subtotal card */

.subtotal-card {
  width: 584px;
  background: transparent;
  display: flex;
  flex-direction: column;
  gap: 0px;
  align-items: flex-start;
}

.subtotal-line {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 6px 10px;
  width: 100%;
}

.subtotal-label {
  color: #7c7c7a;
  font-family: "Noto Sans";
  font-size: 16px;
  font-style: normal;
  font-weight: 400;
  line-height: 24px;
  letter-spacing: 0.64px;
  opacity: 0.6;
}

.subtotal-amount {
  color: #363635;
  font-family: "Noto Sans";
  font-size: 32px;
  font-style: normal;
  font-weight: 700;
  line-height: 44px;
  /* 137.5% */
  letter-spacing: -0.14px;
  text-transform: capitalize;
}

/* subtotal buttons */
.subtotal-actions {
  display: flex;
  flex-direction: column;
  gap: 10px;
  width: 100%;
}

#step-3 .cc-btn {
  float: right;
}

.subtotal-actions button.cc-btn {
  margin: 0;
}

#payment-details-step.cc-btn.disabled,
#payment-details-step.cc-btn[disabled] {
  background-color: #b4b4b3;
  color: #7c7c7a;
  pointer-events: none;
  cursor: not-allowed;
  opacity: 1;
}

#payment-details-step.cc-btn.disabled svg,
#payment-details-step.cc-btn[disabled] svg {
  fill: #7c7c7a !important;
  color: #7c7c7a !important;
}

#payment-details-step.cc-btn.enabled:not([disabled]) svg {
  fill: #fff !important;
  color: #fff !important;
}

#payment-details-step .cc-btn-spinner {
  display: none;
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  border: 2px solid rgba(124, 124, 122, 0.35);
  border-top-color: #7c7c7a;
  border-radius: 50%;
  animation: w2w-pay-btn-spin 0.7s linear infinite;
}

#payment-details-step.is-loading .cc-btn-spinner {
  display: inline-block;
}

#payment-details-step.is-loading .cc-arrow {
  display: none;
}

#payment-details-step:not(.is-loading) .cc-btn-spinner {
  display: none;
}

@keyframes w2w-pay-btn-spin {
  to {
    transform: rotate(360deg);
  }
}

.cc-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 17px 32px;
  border-radius: 20px;
  border: 0;
  background: #30a67f;
  cursor: pointer;
  color: #e6f4ef;
  text-align: center;
  font-family: "Noto Sans";
  font-size: 18px;
  font-style: normal;
  font-weight: 640;
  line-height: 24px;
  letter-spacing: 0.2px;
  align-items: center;
  justify-content: center;
}

.cc-btn.enabled {
  background: #30a67f;
  cursor: pointer;
}

.cc-btn.enabled:hover {
  background: #1f8462;
}

.cc-btn-secondary {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 17px 32px;
  border-radius: 20px;
  border: 0;
  background: #30a67f;
  color: #fff;
  font-weight: 700;
  font-family: "Noto Sans";
  font-size: 18px;
  line-height: 24px;
  letter-spacing: 0.2px;
}

.cc-btn-secondary.enabled {
  background: #30a67f;
  cursor: pointer;
}

.cc-right button#cc-proceed {
  margin: 8px 0 0;
}

.continue-shop {
  display: flex;
  padding: 17px 32px;
  justify-content: center;
  align-items: center;
  gap: 8px;
  align-self: stretch;
  border-radius: 20px;
  border: 1px solid #30a67f;
  color: #30a67f;
  text-align: center;
  font-family: "Noto Sans";
  font-size: 18px;
  font-style: normal;
  font-weight: 640;
  line-height: 24px;
  letter-spacing: 0.2px;
  text-decoration: none;
}

.continue-shop:hover {
  background: #e0f9f0;
}

/* responsive */
@media (max-width: 980px) {
  .custom-cart-item {
    display: flex;
    width: 340px;
    padding: 20px;
    flex-direction: column;
    align-items: center;
    gap: 24px;
    margin: auto;
    height: auto;
  }

  .cci-info {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    flex-direction: row;
    width: 100%;
  }

  .cci-image {
    width: 100%;
  }

  .cci-image img {
    width: 100%;
    max-width: 420px;
    height: 165px;
  }

  .cci-row {
    flex-direction: column;
    gap: 12px;
  }

  .cci-actions {
    width: 100%;
    display: flex;
    justify-content: flex-end;
    flex-direction: column;
  }

  .cci-actions-mobile {
    width: 100%;
    display: flex;
    justify-content: flex-end;
    flex-direction: column;
  }

  .cart-bottom-row {
    flex-direction: column-reverse;
    gap: 16px;
  }

  .subtotal-card {
    width: 100%;
  }
}

@media (max-width: 520px) {
  .cci-info {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    flex-direction: row;
    width: 100%;
  }

  .calcy-wrapper input[name="calwidth"] {
    margin-bottom: 5px !important;
  }

  .cci-row {
    margin-top: 0px !important;
  }

  .cci-edit {
    display: flex;
    height: 40px;
    padding: 13px 0;
    justify-content: center;
    align-items: center;
    gap: 8px;
    border-bottom: 0px;
  }

  .lg-hidden .qty-wrap input {
    color: #363635;
    leading-trim: both;
    text-edge: cap;
    font-family: "Noto Sans";
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: 24px;
    letter-spacing: 0.64px;
    padding: 0;
    text-align: left;
  }

  .qty-wrap {
    justify-content: start;
  }

  .cci-qty-block {
    display: flex;
    flex-direction: column;
    gap: 8px;
  }

  .cci-price-block {
    min-width: unset;
  }

  .cci-price-block {
    min-width: 92px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    width: 100%;
  }

  .cci-price {
    color: #363635;
    font-family: "Noto Sans";
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: 24px;
    /* 150% */
    letter-spacing: 0.64px;
  }

  .coupon-card {
    padding: 14px;
    border-radius: 14px;
    min-height: unset;
  }

  .coupon-copy {
    padding: 8px 10px;
  }

  .cci-image img {
    border-radius: 6px;
  }

  .action-buttons {
    flex-direction: row !important;
    gap: 0px;
  }

  .vhr {
    display: none;
  }

  .cci-fav,
  .cci-remove {
    display: flex;
    width: 144px;
    height: 40px;
    padding: 13px 32px;
    justify-content: center;
    align-items: center;
    gap: 8px;
  }

  .cci-fav {
    border-radius: 20px;
    border: 1px solid #30a67f;
  }

  .cci-remove {
    border-radius: 20px;
    border: 1px solid #ff3b30;
  }

  .qty-wrap .qty {
    width: 92px;
  }
}

.grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
}

.grid .full {
  grid-column: 1 / -1;
}

input[type="text"],
input[type="email"] {
  width: 100%;
  padding: 10px 12px;
  border-radius: 8px;
  border: 1px solid rgba(54, 54, 53, 0.5);
  outline: none;
  font-size: 14px;
}

.btn {
  background: #00995c;
  color: #fff;
  padding: 10px 14px;
  border-radius: 10px;
  border: 0;
  cursor: pointer;
  font-weight: 600;
}

.cards {
  display: flex;
  gap: 20px;
  flex-wrap: wrap;
  align-items: flex-start;
}

/* .card{ width:320px; min-height:170px; background:#fff; border-radius:18px; padding:18px; position:relative; box-shadow: 0 6px 20px rgba(0,0,0,.04); border:1px solid var(--card-border); } */

.card.preset {
  display: flex;
  max-width: 382px;
  width: 100%;
  padding: 40px;
  flex-direction: column;
  align-items: flex-start;
  gap: 24px;
  border-radius: 40px;
  border: 2px solid rgba(180, 180, 179, 0.4);
  background: #e6f4ef;
  box-shadow: 0 2px 24px -4px rgba(180, 180, 179, 0.4);
  backdrop-filter: blur(20px);
}

.card {
  display: flex;
  width: 382px;
  min-height: 335px;
  padding: 40px;
  flex-direction: column;
  align-items: flex-start;
  gap: 24px;
  border-radius: 40px;
  border: 2px solid rgba(180, 180, 179, 0.4);
  background:
    linear-gradient(
      0deg,
      rgba(255, 255, 255, 0.5) 0%,
      rgba(255, 255, 255, 0.5) 100%
    ),
    #e6f4ef;
  box-shadow: 0 2px 24px -4px rgba(180, 180, 179, 0.4);
  backdrop-filter: blur(20px);
}

.card p {
  margin: 0;
  color: #6b6f6f;
  font-size: 13px;
  line-height: 1.45;
}

.card .controls {
  position: realtive;
  display: flex;
  gap: 8px;
}

.card .footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.switch {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: #7a7f7f;
}

.switch input {
  width: 36px;
  height: 18px;
  appearance: none;
  background: #e6f4ef;
  border: 1px solid #30a67f;
  border-radius: 12px;
  position: relative;
  outline: none;
  cursor: pointer;
}

.switch input:checked {
  background: #30a67f;
}

.switch input::after {
  content: "";
  width: 14px;
  height: 14px;
  background: #fff;
  position: relative;
  left: 2px;
  top: 2px;
  display: block;
  border-radius: 50%;
  transition: all 0.18s;
}

.switch input:checked::after {
  transform: translateX(18px);
}

.muted {
  color: #a9b0af;
  font-size: 13px;
  text-align: center;
  padding: 0 8px;
}

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

  .cards {
    justify-content: center;
  }

  .card,
  .add-card {
    width: 100%;
    max-width: 420px;
  }

  .slide-form {
    padding: 12px;
  }
}

.add-card {
  display: flex;
  width: 382px;
  height: 277px;
  padding: 40px;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 24px;
  border-radius: 40px;
  border: 2px dashed rgba(180, 180, 179, 0.4);
  background: rgba(255, 255, 255, 0.5);
  backdrop-filter: blur(20px);
  cursor: pointer;
}

.add-card .title {
  color: rgba(48, 166, 127, 0.8);
  font-family: "Noto Sans";
  font-size: 22px;
  font-style: normal;
  font-weight: 700;
  line-height: 32px;
  letter-spacing: 0.22px;
  position: relative;
}

.add-card .title::before {
  content: "+";
  position: absolute;
  left: -19px;
  font-size: 22px;
  font-weight: bold;
  width: 24px;
  height: 24px;
}

.add-card .muted {
  color: #b4b4b3;
  text-align: center;
  font-family: "Noto Sans";
  font-size: 16px;
  font-style: normal;
  font-weight: 400;
  line-height: 24px;
  letter-spacing: 0.64px;
}

.icon-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  width: 55px;
  padding: 13px 10px;
  justify-content: center;
  align-items: center;
  gap: 8px;
  border-radius: 20px;
  background: transparent;
}

.icon-btn img {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  aspect-ratio: 1/1;
}

.del-btn {
  border-radius: 20px;
  border: 1px solid #ff3b30;
}

.edit-btn {
  border-radius: 20px;
  border: 1px solid #30a67f;
  width: 246px;
  padding: 13px 32px;
  color: #30a67f;
  text-align: center;
  leading-trim: both;
  text-edge: cap;
  font-family: "Noto Sans";
  font-size: 18px;
  font-style: normal;
  font-weight: 640;
  line-height: 24px;
  letter-spacing: 0.2px;
}

.card-box-header {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  min-height: 54px;
}

#delivery-address-root .card-box-header {
  color: #b4b4b3;
  font-family: "Noto Sans";
  font-size: 16px;
  font-style: normal;
  font-weight: 400;
  line-height: 24px;
  /* 150% */
  letter-spacing: 0.64px;
}

.card-box-header h4 {
  overflow: hidden;
  color: #30a67f;
  text-overflow: ellipsis;
  font-family: "Noto Sans";
  font-size: 22px;
  font-style: normal;
  font-weight: 700;
  line-height: 32px;
  letter-spacing: 0.22px;
  white-space: nowrap;
}

.card-address-box {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
  align-self: stretch;
  min-height: 85px;
}

.card-address-box p {
  color: #363635;
  font-family: "Noto Sans";
  font-size: 16px;
  font-style: normal;
  font-weight: 400;
  line-height: 24px;
  letter-spacing: 0.64px;
}

.slide-form {
  display: none;
  width: 1192px;
  padding: 40px;
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
  border-radius: 40px;
  border: 2px solid rgba(180, 180, 179, 0.4);
  background:
    linear-gradient(
      0deg,
      rgba(255, 255, 255, 0.5) 0%,
      rgba(255, 255, 255, 0.5) 100%
    ),
    #f5fbf9;
  box-shadow: 0 2px 24px -4px rgba(180, 180, 179, 0.4);
  backdrop-filter: blur(20px);
}

.savecard-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  align-self: stretch;
  width: 100%;
}

.savecard-header .leftbox {
  display: flex;
  gap: 8px;
}

.savecard-header .rightbox {
  display: flex;
  align-items: center;
  gap: 12px;
}

.savecard-header input[type="text"] {
  display: flex;
  height: 48px;
  padding: 16px 12px;
  justify-content: space-between;
  align-items: center;
  align-self: stretch;
  width: 266px;
  border-radius: 12px;
  border: 1px solid rgba(54, 54, 53, 0.5);
}

.savecard-header .switch {
  display: flex;
  width: 77px;
  height: 41px;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
  flex-shrink: 0;
}

.savecard-header .switch span {
  color: rgba(54, 54, 53, 0.5);
  font-family: Lato;
  font-size: 12px;
  font-style: normal;
  font-weight: 400;
  line-height: 20px;
  letter-spacing: 0.12px;
}

.savecard-header .switch input::after {
  top: 0px;
}

.discard-btn {
  display: flex;
  padding: 13px 32px;
  justify-content: center;
  align-items: center;
  gap: 8px;
  border-radius: 20px;
  border: 1px solid #ff3b30;
  color: #ff3b30;
  text-align: center;
  font-family: "Noto Sans";
  font-size: 18px;
  font-style: normal;
  font-weight: 640;
  line-height: 24px;
  letter-spacing: 0.2px;
  background: #fff;
  text-decoration: none;
}

.discard-btn:hover {
  background: #ff3b3017;
}

.save-btn {
  display: flex;
  padding: 13px 32px;
  justify-content: center;
  align-items: center;
  gap: 8px;
  border-radius: 20px;
  border: 1px solid #34c759;
  color: #34c759;
  text-align: center;
  font-family: "Noto Sans";
  font-size: 18px;
  font-style: normal;
  font-weight: 640;
  line-height: 24px;
  letter-spacing: 0.2px;
  background: #fff;
  text-decoration: none;
}

.save-btn:hover {
  background: #e0f9f0;
}

.strokline {
  display: block;
  margin: 32px 0px;
}

.slide-form.open {
  transform: translateY(0);
  opacity: 1;
  display: flex;
  margin-top: 20px;
}

.addressdetails .form-row .form-col input {
  display: flex;
  height: 48px;
  padding: 16px 12px;
  justify-content: space-between;
  align-items: center;
  align-self: stretch;
  border-radius: 12px;
  border: 1px solid rgba(54, 54, 53, 0.5);
}

.addressdetails .form-row {
  display: flex;
  flex-direction: row;
  gap: 24px;
}

.form-col {
  width: 40%;
}

.addressdetails .form-row .form-col label {
  color: #363635;
  font-family: "Noto Sans";
  font-size: 16px;
  font-style: normal;
  font-weight: 400;
  line-height: 24px;
  /* 150% */
  letter-spacing: 0.64px;
}

.addressdetails {
  display: flex;
  flex-direction: column;
  gap: 33px;
}

.slide-form .grid {
  width: 100%;
}

.w2w-related .sample-btn {
  display: none;
}

select {
  width: 100%;
  height: 40px;
  border-radius: 8px;
  border: 1px solid #e6ece9;
  outline: none;
  font-size: 14px;
  color: #666;
  padding: 10px 12px;
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  width: 56px !important;
}

div#shipping-methods-wrap {
  display: inline-flex;
  gap: 25px;
  width: 100%;
  align-items: flex-start;
  border: 0px !important;
  margin: 20px 0px 50px 0px !important;
  padding-top: 20px !important;
}

.cci-update,
.cci-discard {
  display: none;
}

.cci-update {
  height: 58px;
  padding: 17px 32px;
  justify-content: center;
  align-items: center;
  gap: 8px;
  align-self: stretch;
  background: transparent;
  border: 0px;
  color: #30a67f;
  text-align: center;
  font-family: "Noto Sans";
  font-size: 18px;
  font-style: normal;
  font-weight: 640;
  line-height: 24px;
  letter-spacing: 0.2px;
  border-bottom: 1px solid #b4b4b3;
  border-radius: 0;
  position: relative;
  border: 0;
}

.cci-update::before {
  content: "";
  position: absolute;
  width: 100%;
  height: 1px;
  background: #b4b4b3;
  bottom: -8px;
  left: 0;
}

button.cci-update:hover {
  border-radius: var(--buttons-nav-radius-medium, 32px);
  background: var(--Background-Neutral-Primary, #e6f4ef);
  box-shadow: unset;
  border: 0;
}

button.cci-discard:hover {
  border-radius: var(--buttons-nav-radius-medium, 32px);
  background: var(--Background-Neutral-Primary, #e6f4ef);
}

.cci-discard {
  height: 58px;
  padding: 17px 32px;
  justify-content: center;
  align-items: center;
  gap: 8px;
  align-self: stretch;
  background: transparent;
  border: 0px;
  color: #ff3b30;
  text-align: center;
  font-family: "Noto Sans";
  font-size: 18px;
  font-style: normal;
  font-weight: 640;
  line-height: 24px;
  letter-spacing: 0.2px;
}

.cart-calc {
  background: #147a56;
  /* green */
  color: #fff;
  margin-top: -22px;
  border-radius: 0px 0px 20px 20px;
  padding: 50px 24px 24px 24px;
  display: none;
  /* hidden by default; will slideDown */
}

/* inner calc layout */
.cart-calc .calc-controls {
  display: flex;
  align-items: center;
  gap: 18px;
}

.cart-calc .sizes {
  display: flex;
  gap: 8px;
}

.cart-calc .size-btn {
  display: flex;
  padding: 16px 12px;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 10px;
  align-self: stretch;
  border-radius: 10px;
  border: 1px solid #e6f4ef;
  background: rgba(255, 255, 255, 0.5);
  color: #000;
  font-family: Lato;
  font-size: 12px;
  font-style: normal;
  font-weight: 400;
  line-height: 20px;
  /* 166.667% */
  letter-spacing: 0.12px;
  height: 48px;
  width: 31px;
}

.calc-controls .calbox {
  display: flex;
  flex-direction: row;
  gap: 6px;
  height: 48px;
  justify-content: center;
  align-items: center;
}

.cart-calc .size-btn.active {
  border: 1px solid #fff;
  background: #e6f4ef;
}

.cart-calc .inputs {
  display: flex;
  gap: 8px;
  align-items: center;
  position: relative;
  margin-bottom: 0px;
}

.cart-calc .inputs label {
  font-size: 13px;
  color: #000;
  position: absolute;
  padding: 10px;
}

.cart-calc .input {
  padding: 10px 10px 10px 23px !important;
}

.cart-calc .input-width,
.cart-calc .input-length {
  padding: 8px 10px 8px 30px;
  border-radius: 6px;
  border: none;
  min-width: 160px;
}

.cart-calc .unit {
  padding: 8px;
  border-radius: 6px;
  border: none;
  width: 80px;
}

.cart-calc .calc-summary {
  margin-left: auto;
  display: flex;
  gap: 18px;
  align-items: center;
}

.cart-calc .qty-control {
  display: flex;
  gap: 10px;
  align-items: center;
}

.cart-calc .qty-control button {
  background: none;
  border: none;
  color: #fff;
  font-size: 22px;
  cursor: pointer;
}

.cart-calc .calc-qty {
  min-width: 30px;
  text-align: center;
  font-weight: 700;
  font-size: 18px;
}

.cart-calc .calc-price {
  color: #fff;
  font-family: var(--Font--family2);
  font-size: 22px;
  font-style: normal;
  font-weight: 400;
  line-height: 36px;
  letter-spacing: 0.52px;
  position: relative;
  padding-top: 15px;
}

.cart-calc .calc-price::before {
  content: "Price";
  position: absolute;
  top: -6px;
  left: 0;
  color: #e6f4ef;
  font-family: var(--Font--family2);
  font-size: 12px;
  font-style: normal;
  font-weight: 400;
  line-height: 20px;
  letter-spacing: 0.12px;
  opacity: 0.6;
}

/* ---------- Container / basic reset ---------- */
.wc_payment_methods {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  align-items: center;
  justify-content: flex-start;
  margin: 24px 0 18px 0;
  padding: 0;
  list-style: none;
  position: relative;
}

/* Make each li minimal width (label shown as chip). We keep li as inline block */
.wc_payment_method {
  margin: 0;
  padding: 0;
  min-width: 0;
}

/* Hide native radio but keep it accessible */
.wc_payment_method .input-radio {
  position: absolute;
  left: -9999px;
  opacity: 0;
  width: 1px;
  height: 1px;
  pointer-events: none;
}

/* STYLE THE LABELS AS CHIPS (top row) */
.wc_payment_method > label {
  display: flex;
  padding: 10px;
  justify-content: center;
  align-items: center;
  gap: 10px;
  border-radius: 20px;
  border: 1px solid #363635;
  color: #000;
  font-family: "Noto Sans";
  font-size: 16px;
  font-style: normal;
  font-weight: 400;
  line-height: 24px;
  /* 150% */
  letter-spacing: 0.64px;
}

/* smaller logos inside label: keep them small so chip text remains primary */
.payment-methods--logos {
  display: inline-flex;
  gap: 8px;
  align-items: center;
  margin-left: 6px;
}

.payment-methods--logos img {
  display: block;
  height: 22px;
  width: auto;
}

/* ACTIVE chip look (radio checked) */
.wc_payment_method .input-radio:checked + label {
  border-radius: 20px;
  border: 1px solid #363635;
  background: #30a67f;
  color: #e6f4ef;
}

/* make the chips wrap on small screens and keep spacing */
@media (max-width: 740px) {
  .wc_payment_methods {
    gap: 8px;
    align-items: start;
  }

  .wc_payment_method > label {
    font-size: 13px;
    padding: 7px 12px;
  }

  .cart-calc .calc-controls {
    flex-direction: column;
  }

  .cart-calc .size-btn {
    padding: 16px 8px;
  }

  .cart-calc .sizes {
    gap: 4px;
  }

  .cart-calc .calbox {
    flex-direction: row;
  }

  .cart-calc .inputs input {
    display: flex;
    padding: 12px 24px;
    align-items: center;
    gap: 160px;
    align-self: stretch;
    border-radius: 12px;
    border: 1px solid #363635;
    background: #f5fbf9;
    color: #363635;
    font-family: Lato;
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    line-height: 24px;
    /* 171.429% */
    letter-spacing: 0.2px;
    min-width: 80px;
    width: 95px;
  }

  .cart-calc .calc-summary {
    margin-left: 0;
    display: flex;
    gap: 18px;
    align-items: center;
  }
}

/* ---------- Ensure payment_box shows below and is full width ---------- */
/* Hide all boxes by default */
.wc_payment_method .payment_box {
  display: none;
  width: 100%;
  flex-direction: column;
  align-items: flex-start;
  gap: 36px;
  background: #fff;
  position: absolute;
  left: 0px;
  top: 113%;
  margin-top: 30px;
}

.pay-header-lft {
  display: flex;
  flex-direction: column;
  color: #000;
  font-family: "Noto Sans";
  font-size: 22px;
  font-style: normal;
  font-weight: 700;
  line-height: 32px;
  /* 145.455% */
  letter-spacing: 0.22px;
}

.pay-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  align-self: stretch;
}

.pay-header-lft label {
  color: #7c7c7a;
  font-family: Lato;
  font-size: 14px;
  font-style: normal;
  font-weight: 400;
  line-height: 24px;
  /* 171.429% */
  letter-spacing: 0.2px;
}

.woocommerce-terms-and-conditions-wrapper {
  display: none;
}

/* Show the payment_box for the checked radio */
.wc_payment_method .input-radio:checked ~ .payment_box {
  display: flex;
}

/* ---------- Inside payment box: header + logos area ---------- */
.wc_payment_method .payment_box .wcpay-upe-form,
.wc_payment_method .payment_box .wc-payment-form {
  width: 100%;
}

/* Make a header area: show the label text as bigger heading by re-using the label */
.wc_payment_method .input-radio:checked + label {
  /* move label visually above the box (it already sits above), so style label to be a small chip.
     We'll add a faux header inside the box for clarity */
}

/* ---------- Saved payment methods list ---------- */
.woocommerce-SavedPaymentMethods {
  margin: 0 0 12px 0;
  padding: 0;
  list-style: none;
  display: block;
}

.woocommerce-SavedPaymentMethods li {
  margin: 6px 0;
  display: flex;
  align-items: center;
  gap: 10px;
  position: relative;
}

.woocommerce-SavedPaymentMethods li input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.woocommerce-SavedPaymentMethods label {
  display: block !important;
  padding: 20px 24px 34px 24px;
  justify-content: space-between;
  align-items: center;
  align-self: stretch;
  border-radius: 20px;
  border: 1px solid rgba(180, 180, 179, 0.4);
  background: #fff;
  box-shadow: 0 4px 12px -2px rgba(54, 54, 53, 0.2);
}

.woocommerce-SavedPaymentMethods label:hover {
  background: #f5fbf9;
  border: 1px solid #1f8462;
}

label:has(input[type="radio"]:checked) {
  /*   background:#F5FBF9;
  border: 1px solid #1F8462;	 */
}

.pay-header-ryt img {
  width: 100px;
}

/* Checkbox / save new payment method row */
.form-row.woocommerce-SavedPaymentMethods-saveNew {
  margin-top: 12px;
  font-size: 14px;
}

/* ---------- Field styling (Stripe iframe wrapper + inputs) ---------- */
.wc-payment-form {
  padding: 10px 0 0 0;
}

/* Stripe element iframe wrapper — make it look like a rounded input */
.wcpay-upe-element,
.wcpay-upe-element .__PrivateStripeElement,
.wcpay-upe-element iframe {
  width: 100% !important;
  display: block !important;
  border-radius: 10px !important;
  border: 1px solid #d3d3d3 !important;
  background: #fff !important;
  box-sizing: border-box;
  padding: 8px !important;
  min-height: 44px !important;
  margin-bottom: 12px;
}

/* If there are other text inputs inside .wc-payment-form, style them too */
.wc-payment-form input[type="text"],
.wc-payment-form input[type="tel"],
.wc-payment-form input[type="email"],
.wc-payment-form select {
  width: 100%;
  padding: 12px 14px;
  border-radius: 10px;
  border: 1px solid #dcdcdc;
  box-sizing: border-box;
  font-size: 14px;
  margin-bottom: 12px;
  background: #fff;
}

/* Two-column row for expiration date and CVC */
.wc-payment-form .two-col {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  align-items: start;
}

.addressform {
  width: 100%;
}

.addressform .form-col {
  width: 50%;
}

#address-form select {
  display: flex;
  height: 48px;
  padding: 12px 12px;
  justify-content: space-between;
  align-items: center;
  align-self: stretch;
  border-radius: 12px;
  border: 1px solid rgba(54, 54, 53, 0.5);
  width: 100% !important;
}

#address-form .contnr {
  display: block !important;
}

#address-form .rightbox {
  align-items: center;
  justify-content: flex-end;
  width: 100%;
  gap: 12px;
  display: flex;
  margin-top: 28px;
}

#delivery-address-root .footer .switch {
  display: none;
}

#delivery-address-root .cards .footer {
  display: flex;
}

@media (max-width: 640px) {
  .wc-payment-form .two-col {
    grid-template-columns: 1fr;
  }

  .w2w-calc-wrap .w2w-card-inner {
    width: 100%;
    height: 100% !important;
    flex-direction: column;
    padding: 10px;
  }

  .mid-icon {
    display: none;
  }

  .calcy-wrapper {
    display: flex;
    gap: 0;
    order: 1;
  }

  .calcy-wrapper input {
    float: left;
    width: 110px;
    margin: 5px 5px 5px 0;
  }

  .calcy-wrapper select {
    margin: 5px 0px;
  }

  .cal-left-box {
    flex-direction: column;
  }

  .pack-text br {
    display: none;
  }

  .pack-text {
    text-align: left;
    position: relative;
  }

  .pack-text:before {
    content: "Note:";
    color: #000;
    font-family: var(--Font--family2);
    font-size: 12px;
    font-style: normal;
    font-weight: 400;
    line-height: 20px;
    letter-spacing: 0.12px;
    padding-right: 4px;
  }

  .w2w-qty {
    gap: 0px;
  }

  .w2w-qty .btn-icon {
    width: 20px;
    height: 20px;
  }

  .w2w-qty .val {
    font-size: 24px;
    font-weight: 600;
    color: #363635;
  }

  .w2w-calc-wrap .w2w-price .value {
    font-size: 22px;
    font-weight: 700;
    color: #1c1d1c;
  }

  .w2w-calc-wrap .w2w-card-inner .w2w-price {
    text-align: left;
    margin-top: 0;
  }

  .w2w-calc-wrap .w2w-price .labelbackup {
    float: left;
    margin-left: 54px;
    line-height: 4;
  }

  .w2w-calc-wrap .w2w-ctas {
    width: 100%;
  }

  .w2w-product-colours-row {
    margin-bottom: 20px !important;
  }

  .w2w-colours-right {
    flex: 0 0 200px;
  }

  .slide-form {
    width: 100%;
    padding: 20px;
  }

  .addressform {
    width: 100%;
    display: flex;
    flex-direction: column;
  }

  .savecard-header .leftbox,
  .addressdetails .form-row {
    flex-direction: column;
  }

  .addressdetails .form-row .form-col,
  .savecard-header input[type="text"] {
    width: 100%;
  }

  #address-form .rightbox {
    flex-direction: row;
    gap: 12px;
    width: 100%;
    justify-content: center;
    align-items: center;
  }

  #address-form .strokline {
    display: block;
    margin: 32px 0px;
    width: 100%;
    overflow: hidden;
  }

  .savecard-header {
    display: block;
  }

  input[name="callength"] {
    width: calc(100% - 80px);
  }
}

/* smaller helper text (e.g., "Your payment is encrypted & secured") */
.wc_payment_method .payment_box .help {
  color: #6b6b6b;
  font-size: 13px;
  margin-bottom: 10px;
}

/* Save-as-default toggle area - position bottom-left like screenshot */
.wc-payment_method
  .payment_box
  .form-row.woocommerce-SavedPaymentMethods-saveNew {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 10px;
}

/* small visual tweaks for checkboxes inside payment box */
.wc-payment_method .payment_box input[type="checkbox"] {
  margin-right: 8px;
  transform: scale(1.05);
}

/* ---------- Accessibility: focus styles ---------- */
.wc_payment_method > label:focus,
.wc_payment_method > label:hover,
.wc-payment_method .input-radio:focus + label {
  outline: 3px solid rgba(47, 167, 122, 0.16);
  outline-offset: 3px;
}

/* ---------- Final polishing ---------- */
/* Make sure each payment_box keeps comfortable spacing from the chips */
.wc_payment_methods + .woocommerce-notices-wrapper {
  margin-top: 12px;
}

/* slide-in tray (left) */
.w2w-tray {
  position: absolute;
  inset: 0 auto 0 0;
  width: 43.5%;
  background: rgba(28, 28, 28, 0.8);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  transform: translateX(-100%);
  transition:
    transform 0.35s ease,
    box-shadow 0.35s ease;
  box-shadow: none;
}

.pd-hero.tray-open .w2w-tray {
  transform: translateX(0);
  box-shadow: 8px 0 24px rgba(0, 0, 0, 0.35);
}

/* tray scroller */
.w2w-tray-scroll {
  display: flex;
  width: 519.898px;
  height: 664px;
  padding: 36.732px 22.604px 0 22.604px;
  flex-direction: column;
  align-items: flex-start;
  gap: 22.604px;
  flex-shrink: 0;
  background: rgba(54, 54, 53, 0.5);
  backdrop-filter: blur(5.651063919067383px);
}

.w2w-tray-scroll img {
  width: 474.689px;
  height: 90.417px;
  flex-shrink: 0;
  border-radius: 22.604px;
  cursor: pointer;
  transition:
    transform 0.15s ease,
    background 0.15s ease;
}

.w2w-thumb {
  display: grid;
  grid-template-columns: 64px 1fr;
  align-items: center;
  gap: 10px;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 14px;
  padding: 8px;
  cursor: pointer;
  transition:
    transform 0.15s ease,
    background 0.15s ease;
}

.w2w-tray-scroll img:hover {
  transform: translateY(-2px);
  background: rgba(255, 255, 255, 0.12);
}

.w2w-tray-scroll img.active {
  outline: 2px solid #1aa56a;
  background: rgba(26, 165, 106, 0.15);
}

.w2w-thumb span {
  font:
    600 13px/1.2 system-ui,
    -apple-system,
    Segoe UI,
    Roboto,
    sans-serif;
  color: #eaeaea;
}

/* toggle button */
.w2w-toggle {
  position: absolute;
  bottom: 15%;
  right: -68px;
  transform: translateY(-50%);
  z-index: 3;
  display: flex;
  width: 67.813px;
  height: 67.813px;
  padding: 5.651px;
  justify-content: center;
  align-items: center;
  border-radius: 0 22.604px 22.604px 0;
  background: #1f8462;
}

.pd-hero.tray-open .w2w-toggle {
  right: -13%;
}

/* container */
.pd-hero {
  --tray-w: 260px;
  position: relative;
  overflow: hidden;
}

/* main image fills */
.pd-main {
  object-fit: cover;
  display: block;
  filter: contrast(1.02);
}

/* responsive */
@media (min-width: 768px) and (max-width: 1024px) {
  .promo-card {
    min-width: 100%;
  }

  .product-row.even-row.sm-hidden {
    display: grid;
  }

  .product-row.mobile-row.lg-hidden {
    display: grid !important;
    grid-template-columns: 1fr 1fr;
    gap: 5px;
  }

  .product-row.mobile-row.lg-hidden .product-card {
    width: 100%;
  }

  .product-row.mobile-row .product-thumb img {
    width: 100%;
  }

  .archive-top-bar {
    flex-direction: column;
    justify-content: center;
    align-items: self-start;
  }
}

@media (max-width: 700px) {
  .promo-card {
    min-width: 100%;
  }

  .product-row.even-row.sm-hidden {
    display: grid;
  }

  .product-row.mobile-row.lg-hidden {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 5px;
  }

  .product-row.mobile-row.lg-hidden .product-card {
    width: 100%;
  }

  .pd-hero {
    --tray-w: 220px;
  }

  .w2w-thumb {
    grid-template-columns: 56px 1fr;
  }

  .w2w-toggle {
    width: 20px;
    height: 20px;
    padding: 0px;
    right: -20px;
  }

  .cart-calc {
    width: 345px;
    margin: auto;
  }
}

.wc_payment_method .payment_box .wcpay-upe-form,
.wc_payment_method .payment_box .wc-payment-form {
  border: 0px;
}

#card-panel .Label {
  color: #363635;
  font-family: "Noto Sans";
  font-size: 16px;
  font-style: normal;
  font-weight: 400;
  line-height: 24px;
  /* 150% */
  letter-spacing: 0.64px;
}

#wcpay-upe-element,
.wcpay-upe-element {
  padding: 7px 7px;
  margin-bottom: 0.5em;
  border: 0px !important;
}

#payment
  .payment_methods
  li[class*="payment_method_woocommerce_payments"]
  label {
  display: block;
  margin-bottom: 12px;
}

.pm-card {
  padding: 25px 24px 34px 24px;
}

.pm-card input[type="radio"] {
  visibility: hidden;
}

.pm-card__last4 {
  color: #000;
  font-family: Lato;
  font-size: 16px;
  font-style: normal;
  font-weight: 700;
  line-height: 24px;
  /* 150% */
  letter-spacing: 0.2px;
}

label.pm-card.pm-card--new {
  border-radius: 20px;
  border: 1px dashed rgba(180, 180, 179, 0.4);
}

.newcrd {
  color: rgba(48, 166, 127, 0.8);
  font-family: Lato;
  font-size: 16px;
  font-style: normal;
  font-weight: 700;
  line-height: 24px;
  /* 150% */
  letter-spacing: 0.2px;
  display: flex;
}

label.pm-card.pm-card--new {
  padding: 24px 24px 34px 24px;
}

/* .site-footer {
  margin-top: 10em;
} */

.pm-card-holder {
  color: #7c7c7a;
  font-family: Lato;
  font-size: 14px;
  font-style: normal;
  font-weight: 400;
  line-height: 24px;
  /* 171.429% */
  letter-spacing: 0.2px;
}

.pm-card__head {
  display: flex;
  flex-direction: column;
}

.pm-card-brand-logo img {
  width: 64px !important;
  height: 40px !important;
}

.pm-card__wrap {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
}

.wc_payment_method > label:focus,
.wc_payment_method > label:hover,
.wc-payment_method .input-radio:focus + label {
  outline: 0px;
  outline-offset: 0px;
}

button#w2w-confirm-and-pay2 {
  width: 100%;
}

.w2w-card-inner.fixed-cal-box {
  height: 185px;
}

.w2w-card-inner.fixed-cal-box .cal-left-box {
  align-items: center;
  margin-bottom: 9px;
}

.addressform h6 {
  margin-bottom: 32px;
}

.w2w-type-wrap {
  display: flex;
  flex-direction: column;
  gap: 24px;
  width: 100%;
}

.w2w-other-option-box {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.w2w-type-wrap .calcy-wrapper .w2w-chip {
  flex: unset;
}

.w2w-other-option-box .pack-text {
  text-align: left;
}

.w2w-other-option-box .opt .w2w-chip {
  display: flex;
  padding: 14px 10px;
  justify-content: center;
  align-items: center;
  gap: 10px;
  height: 43px;
  align-self: stretch;
  border-radius: 10px;
  border: 1px solid #363635;
  background: #fff;
  color: #363635;
  font-family: "Noto Sans";
  font-size: 16px;
  font-style: normal;
  font-weight: 400;
  line-height: 24px;
  /* 150% */
  letter-spacing: 0.64px;
}

.w2w-other-option-box .opt .w2w-chip.active {
  border-radius: 10px;
  border: 1px solid #30a67f;
  background: #e6f4ef;
  color: #1f8462;
}

.w2w-other-option-box .opt {
  display: flex;
  gap: 4px;
}

.w2w-other-option-box .opt .w2w-chip:hover,
.w2w-type-wrap .calcy-wrapper .w2w-chip:hover {
  background: rgba(24, 167, 122, 0.06);
}

.extra-qty-wrap {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
}

.extra-qty-wrap .w2w-price {
  display: flex;
  flex-direction: column;
  min-width: 100px;
  align-items: start;
}

.extra-qty-wrap .w2w-price .value {
  color: #363635;
  leading-trim: both;
  text-edge: cap;
  font-family: "Noto Sans";
  font-size: 32px;
  font-style: normal;
  font-weight: 700;
  line-height: 44px;
  /* 137.5% */
  letter-spacing: -0.14px;
  text-transform: capitalize;
}

.product-attribute-select {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.w2w-type-wrap .calcy-wrapper .w2w-chip {
  display: flex;
  padding: 16px 12px;
  justify-content: center;
  align-items: center;
  gap: 10px;
  flex: unset;
  border-radius: 10px;
  border: 1px solid #363635;
  background: rgba(255, 255, 255, 0.5);
  color: #363635;
  font-family: Lato;
  font-size: 12px;
  font-style: normal;
  font-weight: 400;
  line-height: 20px;
  /* 166.667% */
  letter-spacing: 0.12px;
}

.w2w-type-wrap .calcy-wrapper .w2w-chip.active {
  border-radius: 10px;
  border: 1px solid #30a67f;
  background: #e6f4ef;
  color: #30a67f;
}

@media (max-width: 767px) {
  .w2w-guide a svg {
    width: 20px;
    height: 20px;
  }

  #w2w-cart-root .cart-item-product .simple-product-qty-col .acc-qty-display {
    display: block !important;
  }
  #w2w-cart-root
    .cart-item-product
    .simple-product-qty-col
    .simple-qty-desktop {
    display: none !important;
  }
  #w2w-cart-root .cart-item-product .item-actions-col .qty-on-action {
    display: inline-flex !important;
    align-items: center !important;
    order: 3 !important;
    margin-left: 8px !important;
    margin-right: 0 !important;
    padding-right: 8px !important;
  }
  /* Stack qty above edit inside right action wrapper */
  #w2w-cart-root .cart-item-product .item-actions-col .action-right {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-end !important;
    gap: 6px !important;
  }
  #w2w-cart-root
    .cart-item-product
    .item-actions-col
    .action-right
    .edit-btn-new {
    order: 2 !important;
  }
  #w2w-cart-root
    .cart-item-product
    .item-actions-col
    .action-right
    .qty-on-action {
    order: 1 !important;
    font-size: 12px !important;
    color: #222 !important;
  }
  /* Ensure remove button stays on left */
  #w2w-cart-root .cart-item-product .item-actions-col > a.remove-btn-new {
    order: 0 !important;
  }

  .w2w-card-inner.fixed-cal-box {
    height: auto;
  }

  div#colourSwipersss {
    width: 100%;
    overflow: scroll;
  }

  .wrapper-title {
    color: #b4b4b3;
    font-family: var(--Font--family);
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: 24px;
    letter-spacing: 0.64px;
    background-image: url(../img/basket_Icons.svg);
    background-repeat: no-repeat;
    padding-left: 21px;
    background-position: left center;
    background-size: 16px;
  }

  .qty-wrap {
    color: #363635;
    font-family: var(--Font--family);
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: 24px;
    letter-spacing: 0.64px;
  }

  .coupon-card {
    height: 115px;
    flex-direction: column;
    width: 100%;
    justify-content: flex-start;
    align-items: flex-start;
    gap: 10px;
  }

  .coupon-copy {
    background: transparent;
    border-radius: 20px;
    border: 1px solid #363635;
  }

  .wc_payment_method .payment_box {
    /*position:static;*/
  }
}

.product-attribute-select .pack-text:before {
  display: none;
}

span.price-range-label {
  color: #7c7c7a;
  text-align: left;
  font-family: Lato;
  font-size: 12px;
  font-style: normal;
  font-weight: 400;
  line-height: 11px;
  letter-spacing: 0.12px;
  width: 155px;
  display: block;
}

/* Header & Progress Bar */
.cart-header-nav {
  margin-bottom: 20px;
}

.back-link {
  display: flex;
  align-items: center;
  gap: 8px;
  color: #363635;
  text-decoration: none;
  font-size: 16px;
  font-weight: 600;
}

.cart-progress-bar {
  display: flex;
  justify-content: space-between;
  background: #ffffff;
  border: 1px solid #b4b4b3;
  border-radius: 40px;
  padding: 5px;
  margin-bottom: 40px;
  overflow: hidden;
}

.progress-step {
  flex: 1;
  text-align: center;
  padding: 12px 0;
  font-size: 16px;
  font-weight: 500;
  color: #b4b4b3;
  position: relative;
}

.progress-step.active {
  background: #30a67f;
  color: #ffffff;
  border-radius: 35px;
}

.basket-info-title {
  font-family: "Noto Sans", sans-serif;
  font-size: 22px;
  font-weight: 600;
  color: #363635;
  margin-bottom: 30px;
}

.basket-info-title span {
  color: #30a67f;
}

/* Calculator Drawer Styling */
.cart-calc-drawer {
  background: #f2fbf6;
  padding: 20px;
  border-top: 1px solid #e6f4ef;
}

.calc-inputs {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  margin-bottom: 20px;
}

.input-group {
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.input-group label {
  font-size: 12px;
  color: #7c7c7a;
  font-weight: 600;
}

.input-group input {
  height: 40px;
  border: 1px solid #cfd6d3;
  border-radius: 8px;
  padding: 0 10px;
  width: 100px;
}

.sizes-row {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

.size-pill {
  background: #ffffff;
  border: 1px solid #cfd6d3;
  border-radius: 20px;
  padding: 8px 15px;
  font-size: 14px;
  cursor: pointer;
  transition: all 0.2s ease;
}

.size-pill.active {
  background: #30a67f;
  color: #ffffff;
  border-color: #30a67f;
}

.calc-footer {
  display: flex;
  gap: 15px;
}

.btn-save-calc {
  background: #30a67f;
  color: #ffffff;
  border: none;
  border-radius: 20px;
  padding: 10px 20px;
  font-weight: 600;
  cursor: pointer;
}

.btn-cancel-calc {
  background: none;
  border: 1px solid #b4b4b3;
  border-radius: 20px;
  padding: 10px 20px;
  font-weight: 600;
  color: #7c7c7a;
}

/* ============================================================
   CART PAGE OVERHAUL - FIGMA EXACT MATCH (STRICT)
   ============================================================ */

#w2w-cart-root.cart-page-new {
  max-width: 100% !important;
  margin: 0 auto !important;
  padding: 0px 0px !important;
  font-family: "Noto Sans", sans-serif !important;
  display: block !important;
}

#w2w-cart-root .cart-header-row {
  margin-bottom: 25px !important;
}

#w2w-cart-root .back-link {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  color: #363635 !important;
  text-decoration: none !important;
  font-weight: 600 !important;
  font-size: 16px !important;
}

/* Progress Pill */
#w2w-cart-root .cart-progress-bar-wrap {
  margin-bottom: 50px !important;
  display: flex !important;
  justify-content: center !important;
}

#w2w-cart-root .cart-progress-pill {
  display: flex !important;
  width: 100% !important;
  max-width: 1100px !important;
  background: #ffffff !important;
  border: 1px solid #b4b4b3 !important;
  border-radius: 40px !important;
  padding: 6px !important;
  list-style: none !important;
}

#w2w-cart-root .progress-step {
  flex: 1 !important;
  text-align: center !important;
  padding: 14px 0 !important;
  font-size: 16px !important;
  font-weight: 500 !important;
  color: #b4b4b3 !important;
  background: none !important;
}

#w2w-cart-root .progress-step.active {
  background: #30a67f !important;
  color: #ffffff !important;
  border-radius: 35px !important;
}

/* Basket Title */

#w2w-cart-root .basket-title {
  color: var(--Text-On-Surface-Grey_Medium, #7c7c7a);
  text-box: trim-both cap alphabetic;
  font-family: var(--Font--family);
  font-size: var(--Placement-Body-Large, 24px);
  font-style: normal;
  font-weight: var(--Placement-Heading-Medium, 600);
  line-height: 28px;
  letter-spacing: -0.12px;
  margin-bottom: 40px;
  margin-top: 0px;
}

#w2w-cart-root .basket-title span {
  color: #116247 !important;
}

/* Main Container */
#w2w-cart-root .basket-wrapper {
  display: flex !important;
  gap: clamp(16px, 1.5vw, 24px) !important;
  align-items: flex-start !important;
  width: 100% !important;
}

#w2w-cart-root .basket-left-col {
  flex: 1 1 auto !important;
  min-width: 0 !important;
  width: auto;
}

#w2w-cart-root .basket-right-col {
  width: min(491px, 34%) !important;
  max-width: 491px !important;
  flex: 0 1 491px !important;
  min-width: 300px !important;
}

/* Tabs */
#w2w-cart-root .basket-tabs {
  display: flex !important;
  gap: 40px !important;
  margin-bottom: 20px !important;
}

#w2w-cart-root .tabs-group {
  display: flex !important;
  gap: 0 !important;
  width: 100%;
  flex: 1;
}

#w2w-cart-root .tab-btn {
  color: var(--Text-On-Surface-Grey_Low, #b4b4b3);
  text-box: trim-both cap alphabetic;
  font-family: var(--Placement-Body-Font-I, Lato);
  font-size: var(--Placement-Body-Large, 22px);
  font-style: normal;
  font-weight: var(--Placement-Body-Regular, 400);
  line-height: 36px; /* 163.636% */
  letter-spacing: 0.52px;
  position: relative !important;
  transition: all 0.3s ease !important;
  padding: 2px 20px 24px;
  cursor: pointer;
}

#w2w-cart-root .tab-btn.active {
  color: var(--Text-On-Surface-Black, #000);
  font-family: var(--Placement-Body-Font-II, "Noto Sans");
  font-size: var(--Placement-Body-Large, 24px);
  font-style: normal;
  font-weight: var(--Placement-Body-Black, 600);
  line-height: 28px; /* 145.455% */
  letter-spacing: -0.12px;
}

#w2w-cart-root .tab-btn::after {
  content: "" !important;
  position: absolute !important;
  bottom: 0 !important;
  left: 0 !important;
  width: 100% !important;
  height: 2px !important;
  background: #e0f9f0 !important;
}
#w2w-cart-root .tab-btn.active::after {
  background: #30a67f !important;
}

#w2w-cart-root .tab-btn span {
  font-size: 14px !important;
  margin-left: 5px !important;
}

#w2w-cart-root .tab-pane {
  display: none !important;
}

#w2w-cart-root .tab-pane.active {
  display: block !important;
}

/* Cart Item Row */
#w2w-cart-root .cart-item-row-new {
  display: flex;
  padding: 12px !important;
  align-items: center;
  gap: clamp(12px, 1.2vw, 24px) !important;
  align-self: stretch;
  border-radius: 20px !important;
  border: 1px solid rgba(180, 180, 179, 0.4) !important;
  background: #fff;
  margin-bottom: 0px !important;
  justify-content: space-between;
  min-width: 0;
  box-sizing: border-box;
  overflow: hidden;
}

#w2w-cart-root .item-main-content {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  padding: 25px !important;
  gap: 30px !important;
}

#w2w-cart-root .item-img {
  flex-shrink: 0 !important;
  background: #f9f9f9 !important;
  border-radius: 12px !important;
  padding: 0px !important;
}

#w2w-cart-root .item-img img {
  width: 118px !important;
  height: 118px !important;
  object-fit: contain !important;
  border-radius: 8px !important;
  display: block !important;
}

#w2w-cart-root .item-title-col {
  width: auto !important;
  max-width: 160px !important;
  flex: 1 1 auto !important;
  min-width: 0 !important;
}

#w2w-cart-root .product-name {
  color: #000;
  font-family: "Noto Sans";
  font-size: 16px;
  font-style: normal;
  font-weight: 400;
  line-height: 24px;
  letter-spacing: 0.64px;
  text-box: trim-both cap alphabetic;
  white-space: normal;
  word-wrap: break-word;
  overflow-wrap: anywhere;
  width: 100%;
  max-width: 160px;
  display: flex;
  flex-direction: column;
}
#w2w-cart-root .npd-brand {
  color: #30a67f;
  text-overflow: ellipsis;
  font-family: Lato;
  font-size: 14px;
  font-style: normal;
  font-weight: 400;
  line-height: 24px;
  letter-spacing: 0.2px;
  text-box: trim-both cap alphabetic;
  margin-bottom: 4px;
}
#w2w-cart-root .product-name a {
  color: #000;
  text-decoration: none;
}

#w2w-cart-root .product-category {
  font-size: 12px !important;
  color: #b4b4b3 !important;
  margin-top: 6px !important;
  text-transform: uppercase !important;
  letter-spacing: 0.5px !important;
}

#w2w-cart-root .item-specs-col {
  padding-left: 0px !important;
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-width: 0;
}

#w2w-cart-root .spec-values {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

#w2w-cart-root .spec-label,
#w2w-cart-root .price-label {
  color: #7c7c7a;
  font-family: Lato;
  font-size: 12px;
  font-style: normal;
  font-weight: 400;
  line-height: 20px;
  letter-spacing: 0.12px;
  text-box: trim-both cap alphabetic;
}

#w2w-cart-root .spec-line {
  color: #363635;
  text-box: trim-both cap alphabetic;
  font-family: "Noto Sans";
  font-size: 16px;
  font-style: normal;
  font-weight: 400;
  line-height: 24px;
  letter-spacing: 0.64px;
}

#w2w-cart-root .spec-line span {
  color: #363635 !important;
  font-weight: 600 !important;
}

#w2w-cart-root .price-value {
  color: #363635;
  text-box: trim-both cap alphabetic;
  font-family: "Noto Sans";
  font-size: 16px;
  font-style: normal;
  font-weight: 400;
  line-height: 24px;
  letter-spacing: 0.64px;
}

#w2w-cart-root .item-price-col {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

#w2w-cart-root .item-actions-col {
  display: flex !important;
  align-items: center !important;
  justify-content: center;
  gap: 10px !important;
  flex-shrink: 0 !important;
  border-left: none !important;
  padding-left: 30px !important;
  flex-direction: column;
}

#w2w-cart-root .remove-btn-new {
  display: flex;
  padding: 10px 32px;
  justify-content: center;
  align-items: center;
  gap: 8px;
  border-radius: 32px;
  color: #ff3b30;
  text-align: center;
  text-box: trim-both cap alphabetic;
  font-family: "Noto Sans";
  font-size: 18px;
  font-style: normal;
  font-weight: 640;
  line-height: 14px;
  letter-spacing: 0.2px;
  text-decoration: none;
}

#w2w-cart-root .edit-btn-new {
  display: flex;
  padding: 17px 32px;
  justify-content: center;
  align-items: center;
  gap: 8px;
  border-radius: var(--buttons-nav-radius-medium, 32px);
  border: 0px;
  background: transparent;
}

#w2w-cart-root .edit-btn-new:hover {
  background: var(--Background-Neutral-Primary, #e6f4ef);
}

#w2w-cart-root .edit-btn-new svg {
  width: 24px;
  height: 24px;
  aspect-ratio: 1/1;
}

#w2w-cart-root .cart-item-product .remove-btn-new {
  display: flex;
  padding: 17px 32px;
  justify-content: center;
  align-items: center;
  gap: 8px;
  border-radius: var(--buttons-nav-radius-medium, 32px);
  border: 0px;
  background: transparent;
  text-decoration: none !important;
}

#w2w-cart-root .cart-item-product .remove-btn-new:hover {
  background: var(--Background-Neutral-Primary, #e6f4ef);
  text-decoration: none !important;
}

#w2w-cart-root .remove-x {
  display: inline-flex !important;
  align-items: center !important;
  gap: 4px !important;
}

#w2w-cart-root .remove-text {
  display: inline !important;
  line-height: 1 !important;
}

#w2w-cart-root .remove-x svg {
  width: 24px !important;
  height: 24px !important;
  display: block !important;
  flex-shrink: 0 !important;
}

#w2w-cart-root .items-list {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

#w2w-cart-root .inline-input {
  width: 50px !important;
  height: 32px !important;
  padding: 4px !important;
  border: 1px solid #b4b4b3 !important;
  border-radius: 6px !important;
  text-align: center !important;
  font-size: 14px !important;
  display: inline-block !important;
  margin: 0 4px !important;
}

#w2w-cart-root .measurement-edit input:focus {
  border-color: #30a67f !important;
  outline: none !important;
}

#w2w-cart-root .save-inline-btn,
#w2w-cart-root .cancel-inline-btn {
  display: flex;
  padding: 17px 32px;
  justify-content: center;
  align-items: center;
  gap: 8px;
  border-radius: 32px;
  transition: transform 0.2s ease !important;
  background: none;
  border: 0px;
}

#w2w-cart-root .save-inline-btn:hover,
#w2w-cart-root .cancel-inline-btn:hover {
  background: #e6f4ef;
}

#w2w-cart-root .cart-item-row-new.is-editing {
  border-color: #30a67f !important;
  background-color: #f9fdfb !important;
  overflow: hidden;
}
.reviewWidgetMobile {
  display: none;
}
#w2w-cart-root .cart-item-row-new.is-editing .measurement-display {
  display: none !important;
}

#w2w-cart-root .cart-item-row-new.is-editing .measurement-edit {
  display: flex !important;
  align-items: center;
  white-space: nowrap;
}

#w2w-cart-root .cart-item-row-new .item-actions-col.edit-actions {
  display: none !important;
}

#w2w-cart-root .cart-item-row-new.is-editing .item-actions-col.edit-actions {
  display: flex !important;
}

#w2w-cart-root .cart-item-row-new.is-editing .item-actions-col.default-actions {
  display: none !important;
}

/* Right Sidebar Box */
#w2w-cart-root .delivery-promo-bar.mobile-promo {
  display: none !important;
}

#w2w-cart-root .delivery-promo-bar {
  text-align: right !important;
  margin-bottom: 20px !important;
  display: flex;
  flex-direction: column;
  gap: 10px;
  justify-content: space-between;
  align-items: end;
  padding-top: 17px;
}

#w2w-cart-root .promo-text {
  color: #7c7c7a;
  text-box: trim-both cap alphabetic;
  font-family: Lato;
  font-size: 16px;
  font-style: normal;
  font-weight: 700;
  line-height: 24px;
  letter-spacing: 0.2px;
}

#w2w-cart-root .promo-text strong {
  color: #1f8462;
}

#w2w-cart-root .promo-progress {
  height: 5px !important;
  background: #eeeeee !important;
  border-radius: 10px !important;
  overflow: hidden !important;
  width: 55.5%;
}

#w2w-cart-root .promo-progress .fill {
  height: 100% !important;
  background: #30a67f !important;
  border-radius: 10px;
}

#w2w-cart-root .order-summary-box {
  background: #ffffff !important;
  padding: 0px !important;
  display: block !important;
}

#w2w-cart-root .subtotal-row {
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  margin-bottom: 20px !important;
}

#w2w-cart-root .subtotal-row .label {
  color: #363635;
  text-box: trim-both cap alphabetic;
  font-family: "Noto Sans";
  font-size: 16px;
  font-style: normal;
  font-weight: 400;
  line-height: 24px;
  letter-spacing: 0.64px;
  opacity: 0.6;
}

#w2w-cart-root .subtotal-row .value {
  color: #363635;
  text-box: trim-both cap alphabetic;
  font-family: "Noto Sans";
  font-size: 32px;
  font-style: normal;
  font-weight: 700;
  line-height: 44px;
  letter-spacing: -0.14px;
}

#w2w-cart-root .summary-btns {
  display: flex !important;
  flex-direction: column !important;
  gap: 8px !important;
  margin-bottom: 40px !important;
}

#w2w-cart-root .btn-primary {
  display: flex;
  padding: 17px 32px;
  justify-content: center;
  align-items: center;
  gap: 8px;
  align-self: stretch;
  border-radius: var(--buttons-nav-radius-small, 20px);
  background: var(--Fill-On-Surface-Primary, #30a67f);
  color: var(--Text-On-Brand-Primary, #e6f4ef);
  text-align: center;
  text-box: trim-both cap alphabetic;
  font-family: var(--placement-buttons-nav-font, "Noto Sans");
  font-size: var(--placement-buttons-nav-small, 18px);
  font-style: normal;
  font-weight: var(--placement-buttons-nav-semibold, 640);
  line-height: 24px;
  letter-spacing: 0.2px;
  width: 100%;
  text-decoration: none;
  margin-top: 0;
  transition: all 0.25s ease-in-out;
}

#w2w-cart-root .btn-primary:hover {
  background: #1f8462 !important;
}

#w2w-cart-root .btn-secondary {
  display: flex;
  padding: 17px 32px;
  justify-content: center;
  align-items: center;
  gap: 8px;
  align-self: stretch;
  border-radius: var(--buttons-nav-radius-small, 20px);
  border: 1px solid var(--Stroke-On-Surface-Primary, #30a67f);
  color: var(--Text-On-Neutral-Primary, #30a67f);
  text-align: center;
  text-box: trim-both cap alphabetic;
  font-family: var(--placement-buttons-nav-font, "Noto Sans");
  font-size: var(--placement-buttons-nav-small, 18px);
  font-style: normal;
  font-weight: var(--placement-buttons-nav-semibold, 640);
  line-height: 24px;
  transition: all 0.25s ease-in-out;
  letter-spacing: 0.2px;
  width: 100%;
  text-decoration: none;
}
#w2w-cart-root .btn-secondary:hover {
  color: var(--Text-On-Neutral-Primary, #30a67f);
  background: #30a67f12;
}

#w2w-cart-root .totalbox-inline {
  display: none !important;
}

#w2w-cart-root .accepted-cards {
  text-align: center !important;
  margin-bottom: 24px !important;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

#w2w-cart-root .accepted-cards p {
  color: var(--Text-On-Surface-Black, #000);
  text-align: center;
  text-box: trim-both cap alphabetic;
  font-family: var(--Placement-Body-Font-II, "Noto Sans");
  font-size: var(--Placement-Body-Base, 16px);
  font-style: normal;
  font-weight: var(--Placement-Body-Regular, 400);
  line-height: 24px;
  letter-spacing: 0.64px;
  margin-bottom: 0;
}

#w2w-cart-root .card-icons {
  display: flex !important;
  justify-content: center !important;
  gap: 8px !important;
}

#w2w-cart-root .card-icons svg {
  max-width: 100% !important;
  max-height: 100% !important;
  width: auto !important;
  height: auto !important;
  flex-shrink: 0;
}

#w2w-cart-root .card-icons .box {
  display: flex;
  width: 42px !important;
  height: 26px !important;
  padding: 0 !important;
  background: #fff !important;
  border-radius: 4px !important;
  justify-content: center;
  align-items: center;
  overflow: visible !important;
}

#w2w-cart-root .card-icons .box svg.apay {
  width: 38px !important;
  height: auto !important;
  max-width: 100% !important;
  display: block !important;
}

/* WooPayments + Square wallets — hidden unless Payment step is active */
/*#wc-square-google-pay,
#wc-square-apple-pay,
#wc-square-wallet-divider,
.wc-square-wallet-buttons,
.sv-wc-apply-pay-checkout,
.wcpay-express-checkout-wrapper,
#wcpay-express-checkout-element,
#wcpay-express-checkout-button-separator,
#wcpay-woopay-button,
.woocommerce-pay-buttons {
  display: none !important;
  visibility: hidden !important;
  pointer-events: none !important;
}*/

#step-3.active #wc-square-google-pay,
#step-3.active #wc-square-apple-pay,
#step-3.active #wc-square-wallet-divider,
#step-3.active .wc-square-wallet-buttons,
#step-3.active .sv-wc-apply-pay-checkout,
#step-3.active .wcpay-express-checkout-wrapper,
#step-3.active #wcpay-express-checkout-element,
#step-3.active #wcpay-woopay-button,
#step-3.active .woocommerce-pay-buttons {
  display: block;
  visibility: visible;
  pointer-events: auto !important;
}

#step-3.active .w2w-express-checkout-slot .wcpay-express-checkout-wrapper,
#step-3.active .wc-square-wallet-buttons {
  display: flex;
  visibility: visible;
  pointer-events: auto !important;
}

.w2w-express-checkout-slot .wcpay-express-checkout-wrapper ~ .wcpay-express-checkout-wrapper,
.w2w-express-checkout-slot #wcpay-express-checkout-element ~ #wcpay-express-checkout-element,
.w2w-express-checkout-slot ~ .w2w-express-checkout-slot {
  display: none !important;
}

.w2w-express-checkout-slot .blockUI,
.w2w-express-checkout-slot .blockOverlay {
  display: none !important;
}

#step-3.active #wc-square-wallet-divider,
#step-3.active .w2w-express-checkout-slot #wcpay-express-checkout-button-separator {
  display: block !important;
  visibility: visible !important;
  margin: 32px 0 !important;
  text-align: center !important;
  pointer-events: auto !important;
}

@media (max-width: 767px) {
  #step-3.active .w2w-express-checkout-slot {
    margin: 0;
    padding: 0;
  }
}

#w2w-cart-root .klarna-text {
  text-align: center !important;
  color: var(--Text-On-Neutral-Tertiary, #363635);
  text-align: center;
  text-box: trim-both cap alphabetic;
  font-family: var(--Placement-Body-Font-II, "Noto Sans");
  font-size: var(--Placement-Body-Base, 16px);
  font-style: normal;
  font-weight: var(--Placement-Body-Regular, 400);
  line-height: 24px;
  letter-spacing: 0.64px;
}

#w2w-cart-root .klarna-text p {
  color: var(--Text-On-Neutral-Tertiary, #363635);
  text-align: center;
  text-box: trim-both cap alphabetic;
  font-family: var(--Placement-Body-Font-II, "Noto Sans");
  font-size: var(--Placement-Body-Base, 16px);
  font-style: normal;
  font-weight: var(--Placement-Body-Regular, 400);
  line-height: 24px;
  letter-spacing: 0.64px;
  margin-bottom: 0;
}

#w2w-cart-root .klarna-text span {
  color: var(--Text-On-Neutral-Secondary, #1f8462);
  font-family: var(--Placement-Body-Font-II, "Noto Sans");
  font-size: var(--Placement-Body-Base, 16px);
  font-style: normal;
  font-weight: var(--Placement-Body-Regular, 400);
  line-height: 24px;
  letter-spacing: 0.64px;
  text-decoration-line: underline;
  text-decoration-style: solid;
  text-underline-position: from-font;
  cursor: pointer;
}

/* Edit Drawer */
#w2w-cart-root .edit-drawer-new {
  background: #f9fdfb !important;
  padding: 20px 25px !important;
  border-top: 1px solid #e6f4ef !important;
}

#w2w-cart-root .drawer-inner {
  display: flex !important;
  justify-content: space-between !important;
  align-items: flex-end !important;
}

#w2w-cart-root .calc-fields {
  display: flex !important;
  gap: 30px !important;
}

#w2w-cart-root .field-row label {
  display: block !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  margin-bottom: 8px !important;
}

#w2w-cart-root .field-row input {
  height: 42px !important;
  border: 1px solid #cfd6d3 !important;
  border-radius: 8px !important;
  padding: 0 12px !important;
  width: 120px !important;
  background: #ffffff !important;
}

#w2w-cart-root .width-pills {
  display: flex !important;
  gap: 10px !important;
}

#w2w-cart-root .w-pill {
  background: #fff !important;
  border: 1px solid #cfd6d3 !important;
  border-radius: 20px !important;
  padding: 8px 18px !important;
  cursor: pointer !important;
  font-size: 14px !important;
  color: #363635 !important;
}

#w2w-cart-root .w-pill.active {
  background: #30a67f !important;
  color: #fff !important;
  border-color: #30a67f !important;
}

#w2w-cart-root .drawer-actions {
  display: flex !important;
  gap: 10px !important;
}

#w2w-cart-root .save-calc-btn {
  background: #30a67f !important;
  color: #fff !important;
  border: none !important;
  border-radius: 20px !important;
  padding: 10px 25px !important;
  font-weight: 700 !important;
  cursor: pointer !important;
}

#w2w-cart-root .cancel-calc-btn {
  background: none !important;
  border: 1px solid #b4b4b3 !important;
  border-radius: 20px !important;
  padding: 10px 25px !important;
  font-weight: 700 !important;
  color: #7c7c7a !important;
  cursor: pointer !important;
}

#w2w-cart-root .cart-item-sample .item-col-name {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex: 1 0 0;
}
.spec-line.measurement-display {
  white-space: normal;
  overflow-wrap: anywhere;
}
#w2w-cart-root .cart-item-product .item-col-name {
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 12px;
  flex-direction: column;
  width: clamp(140px, 12vw, 200px) !important;
  flex: 0 1 auto !important;
  min-width: 0 !important;
}

#w2w-cart-root .item-col-details {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 1.35fr) minmax(0, 0.85fr) minmax(0, 0.95fr) minmax(0, 0.95fr);
  flex: 1 1 0;
  min-width: 0;
  align-items: flex-start;
  gap: clamp(8px, 1vw, 20px);
}

#w2w-cart-root .item-col-details .colour-specs-col,
#w2w-cart-root .item-col-details .item-specs-col:not(.measurement-specs-col):not(.area-specs-col):not(.packs-specs-col):not(.accessory-qty-col):not(.simple-product-qty-col) {
  grid-column: 1;
}

#w2w-cart-root .item-col-details .measurement-specs-col {
  grid-column: 2;
}

#w2w-cart-root .item-col-details .area-specs-col {
  grid-column: 3;
}

#w2w-cart-root .item-col-details .packs-specs-col,
#w2w-cart-root .item-col-details .accessory-qty-col,
#w2w-cart-root .item-col-details .simple-product-qty-col {
  grid-column: 4;
}

#w2w-cart-root .item-col-details .item-price-col {
  grid-column: 5;
  margin-left: 0;
  min-width: 0;
}

#w2w-cart-root .item-col-action {
  display: flex;
  padding: 0px;
  justify-content: center;
  align-items: center;
  gap: 8px;
  width: clamp(96px, 8vw, 140px) !important;
  flex: 0 0 auto !important;
  min-width: 0;
}
.explore-tabs-nav::after {
  display: none;
}
.explore-tab-btn::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 2px;
  background: #e0f9f0;
  z-index: 10;
  border-radius: 10px;
}
.explore-more-section .explore-tabs-nav {
  gap: 0;
}
.explore-more-section .explore-tab-btn {
  padding: 0px 16px 26px;
}
.explore-more-section .explore-tab-btn.active::after {
  bottom: 0;
}
.explore-more-section .productList {
  padding-inline: 0;
}
.explore-more-section .mySpecialSwiper .product-card {
  max-width: 250px;
}
.explore-more-section .productList .swiper-button-prev {
  left: -40px;
}
.explore-more-section .productList .swiper-button-next {
  right: -40px;
}
.explore-more-section .loop-action-box {
  margin-top: auto;
}
.explore-more-section .explore-pane-header {
  margin-bottom: 18px;
}
.custom-checkout-wrapper {
  padding-bottom: 150px;
}

/* Mid desktop / 1920@100% & 125% OS scale — keep basket columns from colliding. */
@media (min-width: 1025px) and (max-width: 1599px) {
  .custom-checkout-wrapper {
    padding-left: clamp(24px, 4vw, 80px);
    padding-right: clamp(24px, 4vw, 80px);
  }

  #w2w-cart-root .basket-right-col {
    width: min(420px, 36%) !important;
    flex-basis: 420px !important;
    min-width: 280px !important;
  }

  #w2w-cart-root .cart-item-product .item-col-name {
    width: clamp(120px, 11vw, 170px) !important;
  }

  #w2w-cart-root .item-title-col,
  #w2w-cart-root .product-name {
    max-width: 140px !important;
  }

  #w2w-cart-root .item-col-details {
    gap: 10px;
  }

  #w2w-cart-root .item-col-details .item-specs-col,
  #w2w-cart-root .item-col-details .item-price-col {
    min-width: 0 !important;
  }

  #w2w-cart-root .spec-line,
  #w2w-cart-root .price-value {
    font-size: 14px;
    line-height: 20px;
    letter-spacing: 0.2px;
  }

  #w2w-cart-root .item-col-action {
    width: 110px !important;
  }

  #w2w-cart-root .cart-item-product .remove-btn-new,
  #w2w-cart-root .edit-btn-new {
    padding: 12px 16px;
  }
}

@media (min-width: 1600px) {
  #w2w-cart-root .basket-right-col {
    width: 491px !important;
    flex: 0 0 491px !important;
    min-width: 491px !important;
  }

  #w2w-cart-root .item-col-details {
    gap: 20px;
  }
}

/* Mobile */
@media (max-width: 1024px) {
  #w2w-cart-root .basket-wrapper {
    flex-direction: column !important;
    gap: 20px !important;
  }
  #w2w-cart-root .accepted-cards {
    margin-bottom: 22px !important;
  }
  .explore-more-section {
    padding: 60px 0 0;
  }
  .explore-more-section .explore-title {
    font-size: 18px;
    margin-bottom: 24px;
  }
  .explore-more-section .explore-tab-btn {
    padding: 0px 16px 16px;
  }

  .explore-more-section .explore-pane-desc {
    font-size: var(--Placement-Body-Large, 16px);
    line-height: 24px;
    letter-spacing: 0.64px;
  }

  #w2w-cart-root .basket-right-col {
    width: 100% !important;
    max-width: none !important;
    flex: 1 1 auto !important;
    min-width: 0 !important;
  }

  #w2w-cart-root .item-main-content {
    flex-direction: column !important;
    align-items: flex-start !important;
  }

  #w2w-cart-root .item-title-col,
  #w2w-cart-root .item-price-col {
    width: 100% !important;
  }

  .custom-checkout-wrapper {
    max-width: 100%;
    margin: 0 auto;
    padding: 0px 20px 80px;
  }

  #w2w-cart-root .product-name {
    color: var(--Text-On-Surface-Black, #000);
    font-family: var(--Placement-Body-Font-II, "Noto Sans");
    font-size: 12px;
    font-style: normal;
    font-weight: var(--Placement-Body-Regular, 400);
    line-height: 20px; /* 166.667% */
    letter-spacing: 0.64px;
  }
  #w2w-cart-root .spec-line {
    color: var(--Text-On-Surface-Black, #000);
    font-family: var(--Placement-Body-Font-II, "Noto Sans");
    font-size: 12px;
    font-style: normal;
    font-weight: var(--Placement-Body-Regular, 400);
    line-height: 20px; /* 166.667% */
    letter-spacing: 0.64px;
  }
  #w2w-cart-root .item-img img {
    width: 92px !important;
    height: 92px !important;
  }
  #w2w-cart-root .items-list {
    gap: 10px;
  }
  #w2w-cart-root .cart-item-product .item-col-name {
    width: 100px;
  }
  #w2w-cart-root .item-col-details {
    gap: 5.86vw;
  }
  #w2w-cart-root .promo-progress {
    width: 100%;
  }
  #w2w-cart-root .basket-tabs {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    width: 100% !important;
    margin-bottom: 20px !important;
  }

  #w2w-cart-root .delivery-promo-bar.mobile-promo {
    display: flex !important;
    height: 27px;
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
    margin-bottom: 0px !important;
    padding-top: 0;
  }

  #w2w-cart-root .delivery-promo-bar.desktop-promo {
    display: none !important;
  }

  #w2w-cart-root .mobile-promo .promo-text {
    color: var(--Text-On-Surface-Grey_Medium, #7c7c7a);
    text-box: trim-both cap alphabetic;
    font-family: var(--Placement-Body-Font-I, Lato);
    font-size: var(--Placement-Body-Base, 16px);
    font-style: normal;
    font-weight: var(--Placement-Body-Black, 700);
    line-height: 24px; /* 150% */
    letter-spacing: 0.2px;
  }

  #w2w-cart-root .tab-btn.active {
    color: var(--Text-On-Surface-Grey_Low, #000);
    font-size: 22px;
    letter-spacing: 0.22px;
    font-weight: 700;
  }
  #w2w-cart-root .basket-title {
    color: var(--Text-On-Surface-Grey_Medium, #7c7c7a);
    text-box: trim-both cap alphabetic;
    font-family: var(--Placement-Body-Font-I, Lato);
    font-size: var(--Placement-Body-Large, 22px);
    font-style: normal;
    font-weight: var(--Placement-Heading-Medium, 600);
    line-height: 36px; /* 163.636% */
    letter-spacing: 0.52px;
    margin-bottom: 36px;
    margin-top: 0px;
  }
  .explore-more-section .productList .swiper-button-prev,
  .explore-more-section .productList .swiper-button-next {
    display: none;
  }
  .explore-tabs-content .view-all-link {
    width: 100%;
    justify-content: center;
  }
  #w2w-cart-root .btn-secondary,
  #w2w-cart-root .btn-primary {
    width: 100%;
    max-width: 100%;
  }
  #w2w-cart-root .order-summary-box.totalbox {
    width: 100%;
    position: fixed;
    bottom: 0;
    z-index: 9999;
    left: 0;
    padding: 12px 16px !important;
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
    background: rgba(245, 251, 249, 0.6) !important;
    backdrop-filter: blur(20px) !important;
  }
}
@media (max-width: 992px) {
}
/* Mobile */
@media (max-width: 767px) {
  .reviewWidgetMobile {
    display: block;
  }
  #w2w-cart-root .order-summary-box.totalbox {
    width: 100% !important;
    position: fixed !important;
    bottom: 0 !important;
    z-index: 9999 !important;
    left: 0 !important;
    padding: 12px 16px !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 12px !important;
    background: rgba(245, 251, 249, 0.6) !important;
    backdrop-filter: blur(20px) !important;
    -webkit-backdrop-filter: blur(20px) !important;
    box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.05) !important;
    margin-bottom: 0px !important;
  }
  #w2w-cart-root .order-summary-box.totalbox-inline {
    width: calc(100% + 32px) !important;
    position: relative !important;
    bottom: auto !important;
    z-index: auto !important;
    left: auto !important;
    padding: 12px 16px !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 12px !important;
    background: rgba(245, 251, 249, 0.6) !important;
    backdrop-filter: blur(20px) !important;
    -webkit-backdrop-filter: blur(20px) !important;
    box-shadow: none !important;
    margin-bottom: 24px !important;
    border-radius: 0 !important;
    margin-inline: -16px;
  }

  #w2w-cart-root .subtotal-row {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    width: 100% !important;
    margin-bottom: 0 !important;
  }
  #w2w-cart-root .subtotal-row .label {
    font-family: "Noto Sans", sans-serif !important;
    font-size: 16px !important;
    font-weight: 400 !important;
    color: #7c7c7a !important;
    opacity: 0.6 !important;
    letter-spacing: 0.64px !important;
  }
  #w2w-cart-root .subtotal-row .value {
    font-family: "Noto Sans", sans-serif !important;
    font-size: 24px !important;
    font-weight: 600 !important;
    color: #363635 !important;
    letter-spacing: -0.12px !important;
  }
  #w2w-cart-root .summary-btns {
    width: 100% !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 8px !important;
    align-items: center !important;
  }
  #w2w-cart-root .btn-primary.next-step {
    width: 100% !important;
    background: #30a67f !important;
    color: #e6f4ef !important;
    border-radius: 20px !important;
    padding: 16px 40px !important;
    font-family: "Noto Sans", sans-serif !important;
    font-size: 20px !important;
    font-weight: 640 !important;
    line-height: 20px !important;
    border: none !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    box-shadow: none !important;
    margin-bottom: 0;
  }
  #w2w-cart-root .btn-primary.next-step svg {
    width: 24px !important;
    height: 24px !important;
    fill: currentColor !important;
  }
  #w2w-cart-root .order-summary-box.totalbox a.btn-secondary {
    display: none !important;
  }
  .page-template-page-checkout footer.site-footer.footerpaddingB {
    padding-bottom: 140px !important;
  }
  #w2w-cart-root .btn-secondary {
    width: 100% !important;
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    color: #7c7c7a !important;
    font-family: "Lato", sans-serif !important;
    font-size: 14px !important;
    font-weight: 400 !important;
    line-height: 24px !important;
    text-decoration: underline !important;
    text-align: center !important;
    padding: 8px 32px 0 32px !important;
    display: inline-block !important;
  }
  #w2w-cart-root .btn-secondary svg {
    display: none !important;
  }
  #w2w-cart-root .item-specs-col {
    gap: 8px;
  }
  .custom-checkout-wrapper {
    padding: 0px 16px 60px;
  }
  .explore-more-section .explore-tab-btn {
    padding: 0px 11px 14px;
  }
  #w2w-cart-root .accepted-cards {
    margin-bottom: 18px !important;
    gap: 10px !important;
    align-items: center !important;
  }
  #w2w-cart-root .accepted-cards p {
    font-family: "Lato", sans-serif !important;
    font-size: 14px !important;
    font-weight: 700 !important;
    line-height: 24px !important;
    letter-spacing: 0.2px !important;
    color: #000 !important;
  }
  #w2w-cart-root .card-icons {
    gap: 8px !important;
    align-items: center !important;
  }
  #w2w-cart-root .card-icons .box {
    width: 42px !important;
    height: 26px !important;
    padding: 0 !important;
    background: #fff !important;
    border-radius: 4px !important;
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
  }
  #w2w-cart-root .card-icons svg {
    max-width: 100% !important;
    max-height: 100% !important;
    width: auto !important;
    height: auto !important;
  }
  #w2w-cart-root .klarna-text {
    margin-top: 8px !important;
  }
  #w2w-cart-root .klarna-text p {
    font-family: "Lato", sans-serif !important;
    font-size: 14px !important;
    font-weight: 400 !important;
    line-height: 24px !important;
    letter-spacing: 0.2px !important;
    color: #363635 !important;
  }
  #w2w-cart-root .klarna-text span {
    font-family: "Lato", sans-serif !important;
    font-size: 14px !important;
    font-weight: 400 !important;
    line-height: 24px !important;
    letter-spacing: 0.2px !important;
    color: #1f8462 !important;
    text-decoration: underline !important;
  }
  #w2w-cart-root .tab-btn.active {
    font-size: 16px;
    letter-spacing: 0.2px;
  }
  #w2w-cart-root .subtotal-row .value {
    font-size: 24px !important;
    font-weight: 600 !important;
  }
  #w2w-cart-root .basket-title {
    font-family: var(--Placement-Body-Font-II, "Noto Sans");
    font-size: 18px;
    font-weight: var(--Placement-Body-Black, 700);
    line-height: 24px; /* 133.333% */
    margin-bottom: 23px;
  }
  #w2w-cart-root .basket-tabs {
    display: flex !important;
    justify-content: space-between !important;
    align-items: flex-start !important;
    flex-direction: column-reverse;
    gap: 28px !important;
  }

  #w2w-cart-root .cart-item-row-new {
    flex-direction: column !important;
    gap: 12px !important;
  }
  #w2w-cart-root .cart-item-product {
    display: flex !important;
    flex-direction: column !important;
    border: none !important;
    box-shadow: none !important;
    background: transparent !important;
    border-radius: 0px !important;
    padding: 0 0px 12px !important;
    border-bottom: 1px solid rgba(180, 180, 179, 0.4) !important;
  }
  #w2w-cart-root .cart-item-product:first-child {
    padding-top: 12px !important;
  }
  #w2w-cart-root .cart-item-sample {
    display: flex !important;
    flex-direction: column !important;
    border: none !important;
    box-shadow: none !important;
    background: transparent !important;
    border-radius: 0px !important;
    padding: 12px 0px 16px 0px !important;
    border-bottom: 1px solid rgba(180, 180, 179, 0.4) !important;
  }
  #w2w-cart-root .cart-item-product .item-col-name {
    width: 100% !important;
    display: flex !important;
    flex-direction: row !important;
    justify-content: flex-start !important;
    align-items: center !important;
    gap: 8px !important;
  }
  #w2w-cart-root .cart-item-sample .item-col-name {
    display: flex !important;
    align-items: flex-start !important;
    justify-content: flex-start !important;
    gap: 6px !important;
    width: 100% !important;
  }
  #w2w-cart-root .cart-item-product .item-img {
    width: 44px !important;
    height: 44px !important;
    border-radius: 2px !important;
    overflow: hidden !important;
    flex-shrink: 0 !important;
  }
  #w2w-cart-root .cart-item-product .item-img img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    border-radius: 2px !important;
  }
  #w2w-cart-root .cart-item-product .item-title-col {
    width: auto !important;
    flex: 1 !important;
    min-width: 0 !important;
    padding-right: 8px !important;
  }
  #w2w-cart-root .cart-item-product .product-name,
  #w2w-cart-root .cart-item-sample .product-name {
    font-family: "Noto Sans", sans-serif !important;
    font-size: 12px !important;
    font-weight: 400 !important;
    line-height: 17px !important;
    letter-spacing: 0.4px !important;
    color: #000000 !important;
    margin: 0 !important;
    display: block !important;
  }
  #w2w-cart-root .cart-item-product .product-name a,
  #w2w-cart-root .cart-item-sample .product-name a {
    color: inherit !important;
    text-decoration: none !important;
    display: inline !important;
  }
  #w2w-cart-root .cart-item-product .npd-brand,
  #w2w-cart-root .cart-item-sample .npd-brand {
    color: #30a67f !important;
    font-weight: 400 !important;
    margin-right: 4px !important;
    display: inline !important;
  }
  #w2w-cart-root .cart-item-product .item-price-col.mobile-only,
  #w2w-cart-root .cart-item-sample .item-price-col.mobile-only {
    width: auto !important;
    flex-shrink: 0 !important;
    text-align: right !important;
    display: block !important;
  }
  #w2w-cart-root .cart-item-product .item-price-col.mobile-only .price-value,
  #w2w-cart-root .cart-item-sample .item-price-col.mobile-only .price-value {
    font-family: "Noto Sans", sans-serif !important;
    font-size: 16px !important;
    font-weight: 600 !important;
    line-height: 24px !important;
    letter-spacing: 0.64px !important;
    color: #363635 !important;
  }
  #w2w-cart-root .cart-item-sample .item-img,
  #w2w-cart-root .cart-item-sample .item-img a,
  #w2w-cart-root .cart-item-sample .item-img img {
    width: 44px !important;
    height: 44px !important;
    border-radius: 2px !important;
    object-fit: cover !important;
    overflow: hidden !important;
  }
  #w2w-cart-root .cart-item-sample .item-title-col {
    width: auto !important;
    flex: 1 !important;
    margin-right: auto !important;
  }

  /* Specifications Row */
  #w2w-cart-root .cart-item-product .item-col-details {
    display: grid !important;
    grid-template-columns: 28% 34% 22% 16% !important;
    align-items: flex-start !important;
    width: 100% !important;
    gap: 8px !important;
    margin: 0 !important;
    padding-top: 4px !important;
    padding-bottom: 4px !important;
  }
  #w2w-cart-root .cart-item-sample .item-col-details {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    width: 100%;
    gap: 30px;
  }
  #w2w-cart-root .cart-item-product .item-specs-col {
    display: flex !important;
    flex-direction: column !important;
    gap: 6px !important;
    margin: 0 !important;
    min-width: 0 !important;
  }
  
  #w2w-cart-root .cart-item-product .item-specs-col.colour-specs-col,
  #w2w-cart-root .cart-item-product .item-specs-col:not(.measurement-specs-col):not(.area-specs-col):not(.packs-specs-col):not(.accessory-qty-col):not(.simple-product-qty-col) {
    grid-column: 1 !important;
    grid-row: 1 !important;
    align-items: flex-start !important;
  }
  #w2w-cart-root .cart-item-product .item-specs-col.measurement-specs-col {
    grid-column: 2 !important;
    grid-row: 1 !important;
    align-items: flex-start !important;
  }
  #w2w-cart-root .cart-item-product .item-specs-col.packs-specs-col,
  #w2w-cart-root .cart-item-product .item-specs-col.accessory-qty-col,
  #w2w-cart-root .cart-item-product .item-specs-col.simple-product-qty-col {
    grid-column: 3 !important;
    grid-row: 1 !important;
    align-items: flex-start !important;
    margin-left: 0 !important;
  }
  #w2w-cart-root .cart-item-product .item-specs-col.area-specs-col {
    grid-column: 4 !important;
    grid-row: 1 !important;
    align-items: flex-start !important;
  }
  #w2w-cart-root .cart-item-product .item-specs-col .spec-label {
    font-family: "Lato", sans-serif !important;
    font-size: 8px !important;
    font-weight: 400 !important;
    line-height: 20px !important;
    letter-spacing: 0.12px !important;
    color: #7c7c7a !important;
    opacity: 0.6 !important;
    text-transform: uppercase !important;
    display: block !important;
    margin: 0 !important;
  }
  #w2w-cart-root .cart-item-product .item-specs-col .spec-values,
  #w2w-cart-root .cart-item-product .item-specs-col .spec-line {
    font-family: "Noto Sans", sans-serif !important;
    font-size: 12px !important;
    font-weight: 400 !important;
    line-height: 16px !important;
    letter-spacing: 0.64px !important;
    color: #363635 !important;
    margin: 0 !important;
  }
  #w2w-cart-root .spec-line {
    color: var(--Text-On-Surface-Black, #000);
    font-family: var(--Placement-Body-Font-II, "Noto Sans");
    font-size: 12px;
    font-style: normal;
    font-weight: var(--Placement-Body-Regular, 400);
    line-height: 20px;
    letter-spacing: 0.64px;
  }

  /* Inline Editing layout on mobile */
  #w2w-cart-root .cart-item-product .measurement-edit {
    display: none !important;
    align-items: center !important;
    justify-content: center !important;
    font-family: "Noto Sans", sans-serif !important;
    font-size: 12px !important;
    color: #363635 !important;
  }
  #w2w-cart-root .cart-item-product.is-editing .measurement-display {
    display: none !important;
  }
  #w2w-cart-root .cart-item-product.is-editing .measurement-edit {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 0px !important;
    margin-top: 0px !important;
  }
  #w2w-cart-root .cart-item-product.is-editing .measurement-edit .edit-label {
    font-family: "Noto Sans", sans-serif !important;
    font-size: 12px !important;
    font-weight: 400 !important;
    color: #000000 !important;
    text-transform: none !important;
    margin: 0 !important;
  }
  #w2w-cart-root
    .cart-item-product.is-editing
    .measurement-edit
    .edit-separator {
    font-family: "Noto Sans", sans-serif !important;
    font-size: 16px !important;
    font-weight: 400 !important;
    color: #363635 !important;
    margin: 0 4px !important;
  }
  #w2w-cart-root .cart-item-product .inline-input {
    width: 44px !important;
    height: 24px !important;
    padding: 2px !important;
    border: 1px solid #b4b4b3 !important;
    border-radius: 4px !important;
    text-align: center !important;
    font-family: "Noto Sans", sans-serif !important;
    font-size: 12px !important;
    color: #363635 !important;
    background-color: #ffffff !important;
    display: inline-block !important;
    margin: 0 2px !important;
    box-sizing: border-box !important;
  }
  #w2w-cart-root .cart-item-product.is-editing .inline-input {
    width: 30px !important;
    height: 35px !important;
    padding: 12px 4px !important;
    border: 1px solid #000000 !important;
    border-radius: 6px !important;
    text-align: center !important;
    font-family: "Lato", sans-serif !important;
    font-size: 14px !important;
    color: #000000 !important;
    background-color: #ffffff !important;
    display: inline-block !important;
    margin: 0 2px !important;
    box-sizing: border-box !important;
    transition:
      border-color 0.2s ease,
      color 0.2s ease,
      box-shadow 0.2s ease !important;
  }
  #w2w-cart-root .cart-item-product.is-editing .inline-input:focus {
    border-color: #1f8462 !important;
    color: #1f8462 !important;
    box-shadow: 0px 0px 2px 1px #e0f9f0 !important;
    outline: none !important;
  }
  #w2w-cart-root .cart-item-product.is-editing,
  #w2w-cart-root .cart-item-product.is-acc-editing {
    border: 1px solid rgba(48, 166, 127, 0.3) !important;
    box-shadow: 0 0 10px 2px rgba(48, 166, 127, 0.16) !important;
    border-radius: 10px !important;
    padding: 0 !important;
    overflow: hidden !important;
    background-color: #ffffff !important;
    /* border-bottom: none !important; */
  }
  #w2w-cart-root .cart-item-product.is-editing:first-child,
  #w2w-cart-root .cart-item-product.is-acc-editing:first-child {
    margin-top: 8px !important;
  }
  #w2w-cart-root .cart-item-product.is-editing,
  #w2w-cart-root .cart-item-product.is-acc-editing {
    margin-bottom: 12px !important;
    overflow: visible !important;
    position: relative;
  }
  #w2w-cart-root .cart-item-product.is-editing::after,
  #w2w-cart-root .cart-item-product.is-acc-editing::after {
    content: "";
    position: absolute;
    border-bottom: 1px solid rgba(180, 180, 179, 0.4) !important;
    left: 0;
    bottom: -12px;
    width: 100%;
    height: 1px;
  }
  #w2w-cart-root .cart-item-product.is-editing .item-col-name,
  #w2w-cart-root .cart-item-product.is-acc-editing .item-col-name {
    padding: 8px 8px 0px 8px !important;
    box-sizing: border-box !important;
  }
  #w2w-cart-root .cart-item-product.is-editing .item-col-details,
  #w2w-cart-root .cart-item-product.is-acc-editing .item-col-details {
    padding: 8px 8px 8px 8px !important;
    box-sizing: border-box !important;
  }

  /* Actions Row */
  #w2w-cart-root .cart-item-product .item-col-action {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    width: 100% !important;
    justify-content: space-between !important;
    padding: 0 !important;
    margin: 0 !important;
    box-sizing: border-box !important;
  }
  #w2w-cart-root .cart-item-product.is-editing .item-col-action,
  #w2w-cart-root .cart-item-product.is-acc-editing .item-col-action {
    width: 100% !important;
    padding: 0 !important;
    margin: 0 !important;
  }
  #w2w-cart-root .cart-item-product .item-actions-col {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    flex-direction: row-reverse !important;
    width: 100% !important;
    padding-top: 0px !important;
    padding-bottom: 0px !important;
    padding-left: 0px !important;
    border-top: none !important;
    background: transparent !important;
  }
  /* Mobile qty on action column - push to right */
  #w2w-cart-root .cart-item-product .qty-on-action {
    display: inline-flex !important;
    align-items: center !important;
    margin-left: auto !important;
    padding-right: 8px !important;
    font-weight: 700 !important;
    color: inherit !important;
  }
  #w2w-cart-root .cart-item-product.is-editing .item-actions-col.edit-actions {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    flex-direction: row-reverse !important;
    width: 100% !important;
    padding: 12px 16px !important;
    background-color: #e0f9f0 !important;
    border-bottom-left-radius: 9px !important;
    border-bottom-right-radius: 9px !important;
    box-sizing: border-box !important;
  }
  #w2w-cart-root .cart-item-sample .item-actions-col {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding-left: 0px !important;
    width: 100% !important;
    border-top: none !important;
    padding-top: 0 !important;
    margin-top: 6px !important;
  }

  /* Remove / Edit Buttons */
  #w2w-cart-root .remove-mobile-wrap {
    display: inline-flex !important;
    align-items: baseline !important;
    gap: 6px !important;
    line-height: 16px !important;
  }
  #w2w-cart-root .edit-mobile-wrap,
  #w2w-cart-root .save-mobile-wrap,
  #w2w-cart-root .cancel-mobile-wrap {
    display: inline-flex !important;
    align-items: center !important;
    gap: 4px !important;
    line-height: 16px !important;
  }

  #w2w-cart-root .cart-item-product .remove-btn-new,
  #w2w-cart-root .cart-item-sample .remove-btn-new {
    display: inline-flex !important;
    align-items: center !important;
    gap: 4px !important;
    padding: 0 !important;
    background: transparent !important;
    color: #ff3b30 !important;
    font-family: "Lato", sans-serif !important;
    font-size: 12px !important;
    font-weight: 700 !important;
    line-height: 16px !important;
    text-decoration: none !important;
    border: none !important;
    box-shadow: none !important;
    flex: none !important;
  }
  #w2w-cart-root .cart-item-product .edit-btn-new {
    display: inline-flex !important;
    align-items: center !important;
    gap: 4px !important;
    padding: 0 !important;
    background: transparent !important;
    color: #30a67f !important;
    font-family: "Lato", sans-serif !important;
    font-size: 12px !important;
    font-weight: 700 !important;
    line-height: 16px !important;
    border: none !important;
    box-shadow: none !important;
    flex: none !important;
  }
  #w2w-cart-root .cart-item-product .save-inline-btn {
    display: inline-flex !important;
    align-items: center !important;
    gap: 4px !important;
    padding: 0 !important;
    background: transparent !important;
    color: #30a67f !important;
    font-family: "Lato", sans-serif !important;
    font-size: 12px !important;
    font-weight: 700 !important;
    line-height: 16px !important;
    border: none !important;
    box-shadow: none !important;
    flex: none !important;
  }
  #w2w-cart-root .cart-item-product.is-editing .save-inline-btn,
  #w2w-cart-root .cart-item-product.is-acc-editing .save-inline-btn {
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    color: #30a67f !important;
    font-family: "Lato", sans-serif !important;
    font-size: 12px !important;
    font-weight: 700 !important;
    line-height: 16px !important;
  }
  #w2w-cart-root .cart-item-product .cancel-inline-btn {
    display: inline-flex !important;
    align-items: center !important;
    gap: 4px !important;
    padding: 0 !important;
    background: transparent !important;
    color: #ff3b30 !important;
    font-family: "Lato", sans-serif !important;
    font-size: 12px !important;
    font-weight: 700 !important;
    line-height: 16px !important;
    border: none !important;
    box-shadow: none !important;
    flex: none !important;
  }
  #w2w-cart-root .cart-item-product.is-editing .cancel-inline-btn,
  #w2w-cart-root .cart-item-product.is-acc-editing .cancel-inline-btn {
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    color: #ff3b30 !important;
    font-family: "Lato", sans-serif !important;
    font-size: 12px !important;
    font-weight: 400 !important;
    line-height: 16px !important;
  }
  #w2w-cart-root .cart-item-product .remove-btn-new svg,
  #w2w-cart-root .cart-item-sample .remove-btn-new svg,
  #w2w-cart-root .cart-item-product .edit-btn-new svg,
  #w2w-cart-root .cart-item-product .save-inline-btn svg,
  #w2w-cart-root .cart-item-product .cancel-inline-btn svg {
    width: 16px !important;
    height: 16px !important;
    flex-shrink: 0 !important;
    margin-bottom: -1px !important;
  }
  #w2w-cart-root .cart-item-product.is-editing .save-inline-btn svg,
  #w2w-cart-root .cart-item-product.is-acc-editing .save-inline-btn svg,
  #w2w-cart-root .cart-item-product.is-editing .cancel-inline-btn svg,
  #w2w-cart-root .cart-item-product.is-acc-editing .cancel-inline-btn svg {
    width: 14px !important;
    height: 14px !important;
    flex-shrink: 0 !important;
    margin-bottom: 0px !important;
  }
  #w2w-cart-root .cart-item-product svg.save-check-icon {
    transform: translateY(1.5px) !important;
  }
  #w2w-cart-root .cart-item-product svg.cancel-discard-icon {
    transform: translateY(1px) !important;
  }
  #w2w-cart-root .remove-btn-new svg.trash-icon {
    margin: 0 !important;
    transform: translateY(2.5px) !important;
  }

  /* General elements */
  #w2w-cart-root .basket-left-col {
    flex: 1 !important;
    min-width: 0 !important;
    width: 100%;
  }
  #w2w-cart-root .btn-primary,
  #w2w-cart-root .btn-secondary {
    max-width: 100%;
  }
  #w2w-cart-root .tab-btn {
    flex: 1;
    text-align: center;
    padding-bottom: 14px;
    font-size: 16px;
    font-weight: 700;
    letter-spacing: 0.2px;
  }
}

/* Utility Classes for Desktop/Mobile Display Toggle */
#w2w-cart-root .mobile-only {
  display: none !important;
}

@media (max-width: 767px) {
  #w2w-cart-root .mobile-only {
    display: flex !important;
  }
  #w2w-cart-root .tabs-group.mobile-only {
    display: flex !important;
  }
  #w2w-cart-root .desktop-only,
  #w2w-cart-root .cart-item-product .desktop-only,
  #w2w-cart-root .cart-item-product .item-specs-col.desktop-only,
  #w2w-cart-root .cart-item-product .item-specs-col .spec-label.desktop-only,
  #w2w-cart-root .cart-item-product .item-price-col.desktop-only {
    display: none !important;
  }
  #w2w-cart-root .tabs-group.desktop-only {
    display: none !important;
  }
  #w2w-cart-root .empty-msg.desktop-only {
    display: none !important;
  }

  /* Empty state container styles */
  #w2w-cart-root .mobile-empty-state-container {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
    padding: 13px 0 0px !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }

  #w2w-cart-root .empty-text-wrap {
    margin-bottom: 24px !important;
    width: 100% !important;
    text-align: left;
  }

  #w2w-cart-root .empty-title {
    font-family:
      var(--Placement-Body-Font-II, "Noto Sans"), sans-serif !important;
    font-size: 14px !important;
    font-weight: 400 !important;
    line-height: 24px !important;
    letter-spacing: 0.64px !important;
    color: #000000 !important;
    margin: 0 !important;
  }

  #w2w-cart-root .empty-desc {
    font-family:
      var(--Placement-Body-Font-II, "Noto Sans"), sans-serif !important;
    font-size: 14px !important;
    font-weight: 400 !important;
    line-height: 22px !important;
    letter-spacing: 0.64px !important;
    color: #000000 !important;
    margin: 0 !important;
  }

  #w2w-cart-root .empty-illustration {
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    width: 100% !important;
    max-width: 328px !important;
    height: auto !important;
    margin: 0 auto 24px auto !important;
  }

  #w2w-cart-root .empty-illustration img {
    width: 100% !important;
    height: auto !important;
    max-height: 329px !important;
    object-fit: contain !important;
    display: block !important;
  }

  #w2w-cart-root .empty-payments-section {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    width: 100% !important;
    margin-bottom: 0px !important;
  }

  #w2w-cart-root .empty-payments-section .payment-title {
    color: #000 !important;
    text-align: center !important;
    font-family: "Lato" !important;
    font-size: 14px !important;
    font-style: normal !important;
    font-weight: 700 !important;
    line-height: 20px !important;
    letter-spacing: 0.5px !important;
    margin-bottom: 12px !important;
    text-transform: unset !important;
  }

  #w2w-cart-root .empty-payments-section .payment-icons {
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    gap: 8px !important;
    width: 100% !important;
  }

  #w2w-cart-root .empty-payments-section .payment-icons .box {
    display: flex !important;
    width: 60px !important;
    height: 36px !important;
    padding: 0 !important;
    justify-content: center !important;
    align-items: center !important;
    background: #ffffff !important;
    border: 1px solid rgba(180, 180, 179, 0.25) !important;
    border-radius: 6px !important;
    box-sizing: border-box !important;
  }

  #w2w-cart-root .empty-payments-section .payment-icons svg {
    max-width: 44px !important;
    height: auto !important;
    display: block !important;
  }

  #w2w-cart-root .empty-klarna-text {
    width: 100% !important;
    text-align: center !important;
    margin-top: 18px !important;
  }

  #w2w-cart-root .empty-klarna-text p {
    color: var(--Text-On-Neutral-Tertiary, #363635) !important;
    font-family:
      var(--Placement-Body-Font-II, "Noto Sans"), sans-serif !important;
    font-size: 14px !important;
    font-style: normal !important;
    font-weight: 400 !important;
    line-height: 22px !important;
    letter-spacing: 0.64px !important;
    margin: 0 !important;
  }

  #w2w-cart-root .empty-klarna-text .klarna-bold {
    color: var(--Text-On-Neutral-Secondary, #1f8462) !important;
    font-weight: 400 !important;
    text-decoration: underline !important;
    cursor: pointer !important;
  }

  /* Hide duplicate payment icons and Klarna text in the right column when the active tab is empty */
  #w2w-cart-root:has(.tab-pane.active .mobile-empty-state-container)
    .basket-right-col
    .accepted-cards,
  #w2w-cart-root:has(.tab-pane.active .mobile-empty-state-container)
    .basket-right-col
    .klarna-text {
    display: none !important;
  }

  /* Mobile Continue Shopping Style Override */
  #w2w-cart-root .btn-secondary {
    background: transparent !important;
    border: none !important;
    color: #7c7c7a !important;
    text-decoration: underline !important;
    font-size: 16px !important;
    font-weight: 500 !important;
    padding: 0 !important;
    width: auto !important;
    margin: 0 auto !important;
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    box-shadow: none !important;
    text-transform: none !important;
    height: auto;
  }
  #w2w-cart-root .btn-secondary svg {
    display: none !important;
  }

  /* Mobile Remove Confirmation Popup Styles */
  .w2w-remove-confirm-overlay {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    width: 100vw !important;
    height: 100vh !important;
    background: rgba(0, 0, 0, 0.6) !important;
    z-index: 999999 !important;
    display: none !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 24px !important;
    box-sizing: border-box !important;
    backdrop-filter: blur(11.5px);
  }

  .w2w-remove-confirm-overlay.is-active {
    display: flex !important;
    animation: fadeInConfirmOverlay 0.2s ease-out forwards !important;
  }

  .w2w-remove-confirm-overlay .remove-confirm-card {
    background: #ffffff !important;
    border: 1px solid rgba(180, 180, 179, 0.4) !important;
    border-radius: 20px !important;
    padding: 24px !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 24px !important;
    width: 100% !important;
    max-width: 342px !important;
    /* box-shadow: 0px 8px 24px rgba(0, 0, 0, 0.08) !important; */
    box-sizing: border-box !important;
    opacity: 0;
    transform: scale(0.95);
  }

  .w2w-remove-confirm-overlay.is-active .remove-confirm-card {
    animation: scaleUpConfirmCard 0.25s cubic-bezier(0.34, 1.56, 0.64, 1)
      forwards !important;
    opacity: 1 !important;
    transform: scale(1) !important;
  }

  .w2w-remove-confirm-overlay .remove-confirm-header {
    display: flex !important;
    flex-direction: column !important;
    gap: 16px !important;
    align-items: flex-start !important;
    text-align: left !important;
    width: 100% !important;
  }

  .w2w-remove-confirm-overlay .remove-confirm-title {
    font-family: "Lato", sans-serif !important;
    font-weight: 700 !important;
    font-size: 16px !important;
    line-height: 24px !important;
    letter-spacing: 0.2px !important;
    color: #363635 !important;
    margin: 0 !important;
    padding: 0 !important;
    text-box-edge: cap alphabetic;
    text-box-trim: trim-both;
  }

  .w2w-remove-confirm-overlay .remove-confirm-desc {
    font-family: "Noto Sans", sans-serif !important;
    font-weight: 400 !important;
    font-size: 14px !important;
    line-height: 22px !important;
    letter-spacing: 0.64px !important;
    color: #363635 !important;
    margin: 0 !important;
    padding: 0 !important;
    text-box-edge: cap alphabetic;
    text-box-trim: trim-both;
  }

  .w2w-remove-confirm-overlay .remove-confirm-actions {
    display: flex !important;
    gap: 8px !important;
    width: 100% !important;
    flex-direction: row !important;
  }

  .w2w-remove-confirm-overlay .btn-cancel {
    flex: 1 !important;
    border: 1px solid #ff3b30 !important;
    background: #ffffff !important;
    color: #ff3b30 !important;
    border-radius: 20px !important;
    padding: 12px 32px !important;
    font-family: "Noto Sans", sans-serif !important;
    font-size: 18px !important;
    font-weight: 600 !important;
    line-height: 24px !important;
    letter-spacing: 0.2px !important;
    text-align: center !important;
    cursor: pointer !important;
    outline: none !important;
    box-shadow: none !important;
    box-sizing: border-box !important;
    transition:
      background-color 0.2s,
      opacity 0.2s !important;
    text-box-edge: cap alphabetic;
    text-box-trim: trim-both;
    height: 47px;
  }

  .w2w-remove-confirm-overlay .btn-cancel:hover {
    background: #fff5f5 !important;
  }

  .w2w-remove-confirm-overlay .btn-confirm {
    flex: 1 !important;
    background: #30a67f !important;
    border: 1px solid #30a67f !important;
    color: #e6f4ef !important;
    border-radius: 20px !important;
    padding: 12px 32px !important;
    font-family: "Noto Sans", sans-serif !important;
    font-size: 18px !important;
    font-weight: 600 !important;
    line-height: 24px !important;
    letter-spacing: 0.2px !important;
    text-align: center !important;
    cursor: pointer !important;
    outline: none !important;
    box-shadow: none !important;
    box-sizing: border-box !important;
    transition:
      background-color 0.2s,
      opacity 0.2s !important;
    text-box-edge: cap alphabetic;
    text-box-trim: trim-both;
    height: 47px;
  }

  .w2w-remove-confirm-overlay .btn-confirm:hover {
    background: #258c6a !important;
    border-color: #258c6a !important;
  }

  @keyframes fadeInConfirmOverlay {
    from {
      background: rgba(0, 0, 0, 0);
    }
    to {
      background: rgba(0, 0, 0, 0.4);
    }
  }

  @keyframes scaleUpConfirmCard {
    from {
      opacity: 0;
      transform: scale(0.9) translateY(10px);
    }
    to {
      opacity: 1;
      transform: scale(1) translateY(0);
    }
  }
  /* ---- Accessory items: mobile quantity edit mode ---- */

  /* Default: hide the mobile +/- controls, show only qty text */
  #w2w-cart-root .cart-item-product .acc-qty-edit-controls {
    display: none !important;
  }
  #w2w-cart-root .cart-item-product .acc-qty-display {
    font-family: "Noto Sans", sans-serif !important;
    font-size: 12px !important;
    font-weight: 400 !important;
    color: #363635 !important;
    line-height: 24px !important;
    text-align: right !important;
  }

  /* Default: hide the accessory done action bar */
  #w2w-cart-root .cart-item-product .acc-edit-actions {
    display: none !important;
  }

  /* When in acc-editing mode: show +/- controls and done bar, hide qty text and edit button */
  #w2w-cart-root .cart-item-product.is-acc-editing .acc-qty-edit-controls {
    display: flex !important;
    align-items: center !important;
    gap: 6px !important;
  }
  #w2w-cart-root .cart-item-product.is-acc-editing .acc-qty-display {
    display: none !important;
  }
  #w2w-cart-root .cart-item-product.is-acc-editing .acc-edit-trigger {
    display: none !important;
  }
  #w2w-cart-root .cart-item-product.is-acc-editing .acc-edit-actions {
    display: inline-flex !important;
    align-items: center !important;
    padding: 0 !important;
    background: transparent !important;
    border-top: none !important;
    width: auto !important;
    flex: none !important;
  }

  /* In acc-editing mode: fix the action row so Remove (left) and Done (right) are side-by-side */
  #w2w-cart-root .cart-item-product.is-acc-editing .item-col-action {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: space-between !important;
    width: 100% !important;
    padding: 12px 16px !important;
    background-color: #e0f9f0 !important;
    border-bottom-left-radius: 9px !important;
    border-bottom-right-radius: 9px !important;
    box-sizing: border-box !important;
  }
  #w2w-cart-root
    .cart-item-product.is-acc-editing
    .item-actions-col.default-actions {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    width: auto !important;
    flex: none !important;
    padding: 0 !important;
    background: transparent !important;
    justify-content: flex-start !important;
  }

  /* Done button styling */
  #w2w-cart-root .cart-item-product .acc-done-btn {
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    padding: 0 !important;
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    color: #30a67f !important;
    font-family: "Lato", sans-serif !important;
    font-size: 12px !important;
    font-weight: 700 !important;
    line-height: 16px !important;
    cursor: pointer !important;
  }
  #w2w-cart-root .cart-item-product .acc-done-btn svg {
    width: 14px !important;
    height: 14px !important;
    flex-shrink: 0 !important;
  }

  /* Accessory qty button circles on mobile */
  #w2w-cart-root .cart-item-product .acc-qty-edit-controls .qty-btn {
    width: 28px !important;
    height: 28px !important;
    min-width: 28px !important;
    border-radius: 50% !important;
    border: 1.5px solid #30a67f !important;
    background: transparent !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 0 !important;
    cursor: pointer !important;
    box-sizing: border-box !important;
    flex-shrink: 0 !important;
  }
  /* Scale the SVG icons down to fit neatly inside the circle */
  #w2w-cart-root .cart-item-product .acc-qty-edit-controls .qty-btn svg {
    width: 12px !important;
    height: 12px !important;
    flex-shrink: 0 !important;
    display: block !important;
  }

  /* Qty number field: borderless, clean number between the two circles */
  #w2w-cart-root .cart-item-product .acc-qty-edit-controls .qty-input-field {
    width: 30px !important;
    height: 28px !important;
    text-align: center !important;
    border: none !important;
    border-radius: 0 !important;
    font-family: "Noto Sans", sans-serif !important;
    font-size: 14px !important;
    font-weight: 400 !important;
    color: #363635 !important;
    background: transparent !important;
    padding: 0 !important;
    box-shadow: none !important;
    outline: none !important;
    box-sizing: border-box !important;
    -moz-appearance: textfield !important;
  }
  #w2w-cart-root
    .cart-item-product
    .acc-qty-edit-controls
    .qty-input-field::-webkit-outer-spin-button,
  #w2w-cart-root
    .cart-item-product
    .acc-qty-edit-controls
    .qty-input-field::-webkit-inner-spin-button {
    -webkit-appearance: none !important;
    margin: 0 !important;
  }

  /* Hide trailing dot when mobile promo progress bar is reached */
  #w2w-cart-root .delivery-promo-bar.mobile-promo.reached .promo-text::after {
    content: "" !important;
  }
  .delivery-promo-bar.mobile-promo .promo-text::after {
    margin-left: -4px;
  }
  #w2w-cart-root
    .cart-item-product.is-acc-editing
    .item-col-action
    .action-right {
    display: none !important;
  }
  #w2w-cart-root .order-summary-box.totalbox-inline.mobile-only {
    display: none !important;
  }
}

/* Styling for inactive spend progress bar when cart is empty */
#w2w-cart-root .delivery-promo-bar.inactive {
  opacity: 0.18 !important;
  pointer-events: none !important;
}

#w2w-cart-root .delivery-promo-bar.inactive .promo-progress .gift-badge {
  animation: none !important;
  box-shadow: none !important;
}
/* ==========================================================================
   Payment step — mobile Figma (node 9641:15976)
   Visual-only; keep checkout / place-order / coupon JS hooks intact.
   ========================================================================== */
@media (max-width: 767px) {
  #step-3.active {
    display: flex !important;
    flex-direction: column;
    align-items: stretch;
    gap: 25px;
    padding: 0 0 80px;
    box-sizing: border-box;
  }

  .page-template-page-checkout .custom-checkout-wrapper:has(#step-3.active) {
    padding-left: 16px;
    padding-right: 16px;
  }

  #step-3.active .wrapper-title {
    order: 1;
    color: transparent;
    font-size: 0;
    line-height: 0;
    margin: 0;
    background: none;
    padding: 0;
  }

  #step-3.active .wrapper-title-text {
    display: none !important;
  }

  #step-3.active .wrapper-title .muted,
  #step-3.active .muted {
    display: block !important;
    margin: 0 !important;
    padding: 0 !important;
    color: #363635 !important;
    font-family: Lato, sans-serif !important;
    font-size: 14px !important;
    font-weight: 400 !important;
    line-height: 22px !important;
    letter-spacing: 0.44px !important;
    text-align: left !important;
    text-transform: none !important;
  }

  /* Flatten only layout shells — never payment / wallet mount nodes. */
  #step-3.active .w2w-checkout-wrap,
  #step-3.active .w2w-checkout-inner,
  #step-3.active .w2w-grid,
  #step-3.active .w2w-main,
  #step-3.active .w2w-sidebar {
    display: contents !important;
  }

  #step-3.active #w2w-step-payment {
    order: 4;
    width: 100%;
    display: block !important;
  }

  #step-3.active #w2w-payment-methods-wrap,
  #step-3.active .payment-section,
  #step-3.active .woocommerce-checkout-payment {
    display: block !important;
    width: 100%;
    visibility: visible !important;
  }

  #step-3.active .wrapper-second-title {
    display: none !important;
  }

  /* Express wallets — layout only. Never force display/hide on mount nodes:
     Square sets inline display after attach; :empty{display:none} blocks mounting. */
  #step-3.active .w2w-express-checkout-slot {
    order: 2;
    display: block !important;
    visibility: visible !important;
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 0 !important;
    background: transparent !important;
    pointer-events: auto !important;
  }

  #step-3.active .w2w-express-checkout-slot #wc-square-digital-wallet {
    width: 100%;
    max-width: none;
    margin: 0;
    padding: 0;
    background: transparent;
  }

  #step-3.active .w2w-express-checkout-slot .wc-square-wallet-buttons,
  #step-3.active .w2w-express-checkout-slot .wcpay-express-checkout-wrapper {
    width: 100%;
    gap: 11px;
    background: transparent;
    pointer-events: auto !important;
  }

  #step-3.active #wc-square-google-pay,
  #step-3.active #wc-square-apple-pay,
  #step-3.active .w2w-express-checkout-slot #wcpay-express-checkout-element {
    width: 100%;
    background: transparent;
    border: 0;
    box-shadow: none;
    overflow: visible;
    pointer-events: auto !important;
  }

  /* Equal space above/below so “– OR –” sits vertically centered (Figma gap 32px) */
  #step-3.active #wc-square-wallet-divider,
  #step-3.active .w2w-express-checkout-slot #wcpay-express-checkout-button-separator {
    margin: 32px 0 !important;
    padding: 0;
    color: #000;
    font-family: Lato, sans-serif;
    font-size: 18px;
    font-weight: 700;
    line-height: 22px;
    letter-spacing: 0.44px;
    text-align: center;
    background: transparent;
    border: 0;
  }

  /* Card / gateway fields — keep radios usable; don’t break Square mount. */
  #step-3.active .wc_payment_methods {
    display: flex !important;
    flex-wrap: wrap !important;
    flex-direction: row !important;
    gap: 8px !important;
    margin: 0 0 12px !important;
    padding: 0 !important;
    width: 100%;
    position: relative !important;
  }

  #step-3.active .wc_payment_method {
    width: auto;
    min-width: 0;
    position: relative !important;
  }

  #step-3.active .wc_payment_method:has(.input-radio:checked) {
    flex: 1 1 100%;
    width: 100% !important;
    max-width: 100% !important;
  }

  #step-3.active .wc_payment_method > label {
    display: flex !important;
    width: 100% !important;
    box-sizing: border-box !important;
    font-size: 13px !important;
    padding: 7px 12px !important;
  }

  #step-3.active .wc_payment_method .payment_box {
    display: none !important;
  }

  #step-3.active .wc_payment_method .input-radio:checked ~ .payment_box {
    display: flex !important;
    position: static !important;
    left: auto !important;
    top: auto !important;
    width: 100% !important;
    max-width: 100% !important;
    flex: 1 1 100% !important;
    margin: 12px 0 0 !important;
    padding: 0 !important;
    gap: 8px !important;
    background: transparent !important;
    flex-direction: column !important;
    align-items: stretch !important;
    align-self: stretch !important;
    box-sizing: border-box !important;
  }

  #step-3.active .pay-secure-title {
    display: block !important;
    margin: 0 0 4px !important;
    color: #000;
    font-family: Lato, sans-serif;
    font-size: 14px;
    font-weight: 700;
    line-height: 22px;
    letter-spacing: 0.44px;
  }

  /* Hide gateway description — same copy as .pay-secure-title */
  #step-3.active .payment_box > p:not(.pay-secure-title) {
    display: none !important;
  }

  #step-3.active .pay-header {
    order: 2;
    display: flex !important;
    justify-content: flex-start !important;
    align-items: center !important;
    margin: 0 !important;
  }

  #step-3.active .pay-header-ryt {
    display: none !important;
  }

  #step-3.active .pay-header-lft label,
  #step-3.active .wc_payment_method .payment_box .pay-header-lft label {
    display: flex !important;
    align-items: center !important;
    gap: 4px !important;
    margin: 0 !important;
    color: #116247 !important;
    font-family: Lato, sans-serif !important;
    font-size: 12px !important;
    font-weight: 400 !important;
    line-height: 20px !important;
    letter-spacing: 0.12px !important;
  }

  #step-3.active .pay-header-lft label svg {
    width: 16px !important;
    height: 16px !important;
    flex-shrink: 0;
  }

  #step-3.active .wc-payment-form,
  #step-3.active #wc-square-credit-card-container,
  #step-3.active .sq-card-wrapper {
    order: 1;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    box-sizing: border-box !important;
  }

  /* Stretch Square wrappers to match Credit Card / Proceed — leave iframe
     sizing to Square after remount (forced 100% on iframe hides stale widths). */
  #step-3.active #wc-square-credit-card-container,
  #step-3.active #wc-square-credit-card-container .sq-card-wrapper,
  #step-3.active #wc-square-credit-card-container .sq-card-iframe-container,
  #step-3.active #wc-square-credit-card-container .sq-card-component {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    box-sizing: border-box !important;
  }

  #step-3.active #wc-square-credit-card-container iframe {
    display: block !important;
    max-width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
  }

  /* Square card iframe already draws its own rounded border — don’t add a second frame. */
  #step-3.active #wc-square-credit-card-container .sq-card-iframe-container:has(iframe),
  #step-3.active #wc-square-credit-card-container .sq-card-iframe-container:has(.sq-card-component) {
    border: 0 !important;
    border-radius: 0 !important;
    overflow: visible;
    background: transparent !important;
    box-shadow: none !important;
    outline: none !important;
  }

  #step-3.active #wc-square-credit-card-container,
  #step-3.active .sq-card-wrapper,
  #step-3.active .sq-card-iframe-container {
    border: 0 !important;
    box-shadow: none !important;
    outline: none !important;
    background: transparent !important;
  }

  /* Square SDK draws an extra ::before frame around the card — remove it */
  #step-3.active .sq-card-iframe-container::before,
  #step-3.active #wc-square-credit-card-container .sq-card-iframe-container::before {
    content: none !important;
    display: none !important;
    border: 0 !important;
    box-shadow: none !important;
  }

  /* Proceed button after card form */
  #step-3.active .cc-strip {
    order: 5;
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    background: transparent !important;
    border: 0 !important;
    height: auto !important;
    max-width: none !important;
    display: block !important;
  }

  #step-3.active .cc-right {
    width: 100% !important;
    align-items: stretch !important;
    gap: 0 !important;
  }

  #step-3.active .cc-subtotal {
    display: none !important;
  }

  #step-3.active .cc-btn-text--desktop,
  #step-3.active #w2w-confirm-and-pay2 .cc-arrow {
    display: none !important;
  }

  #step-3.active .cc-btn-text--mobile {
    display: inline !important;
  }

  #step-3.active #w2w-confirm-and-pay2,
  #step-3.active button#w2w-confirm-and-pay2 {
    width: 100% !important;
    height: 52px !important;
    margin: 0 !important;
    padding: 17px 32px !important;
    border: 0 !important;
    border-radius: 20px !important;
    background: #b4b4b3 !important;
    color: #7c7c7a !important;
    font-family: "Noto Sans", sans-serif !important;
    font-size: 18px !important;
    font-weight: 640 !important;
    line-height: 24px !important;
    letter-spacing: 0.2px !important;
    justify-content: center !important;
  }

  #step-3.active #w2w-confirm-and-pay2:not(:disabled):not(.disabled) {
    background: #30a67f !important;
    color: #e6f4ef !important;
  }

  /* Accepted methods */
  #step-3.active .w2w-accepted-payments {
    order: 6;
    display: flex !important;
    flex-direction: column;
    gap: 8px;
    width: 100%;
    align-items: center;
  }

  #step-3.active .w2w-accepted-payments__title {
    margin: 0;
    width: 100%;
    text-align: center;
    color: #000;
    font-family: Lato, sans-serif;
    font-size: 14px;
    font-weight: 700;
    line-height: 24px;
    letter-spacing: 0.2px;
  }

  #step-3.active .w2w-accepted-payments__icons {
    display: flex;
    gap: 8px;
    align-items: center;
    justify-content: center;
    width: 100%;
  }

  #step-3.active .w2w-accepted-payments__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 26px;
    border-radius: 4px;
    background: #fff;
  }

  #step-3.active .w2w-accepted-payments__icon svg {
    max-width: 31px;
    max-height: 20px;
  }

  /* Coupons */
  #step-3.active .w2w-discount {
    order: 7;
    display: flex !important;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: 0;
    border: 0;
    border-radius: 0;
    width: 100%;
    background: transparent;
  }

  #step-3.active .w2w-discount-title {
    display: block !important;
    margin: 0 0 16px;
    padding: 0;
  }

  #step-3.active .w2w-discount > .w2w-discount-title,
  #step-3.active .w2w-discount > .w2w-discount-row,
  #step-3.active .w2w-discount > #discount_error_message {
    padding-left: 16px;
    padding-right: 16px;
  }

  #step-3.active .w2w-discount {
    border: 1px solid #b4b4b3;
    border-radius: 20px;
    overflow: hidden;
    background: #fff;
  }

  #step-3.active .w2w-discount-title {
    padding: 16px 16px 0 !important;
    margin-bottom: 16px !important;
  }

  #step-3.active .w2w-discount-row {
    display: flex !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    gap: 16px !important;
    padding: 0 16px 16px !important;
    margin: 0 !important;
  }

  #step-3.active .w2w-discount-row label {
    display: none !important;
  }

  #step-3.active .w2w-discount-row input#w2w-discount-code {
    flex: 1 1 auto !important;
    width: auto !important;
    min-width: 0 !important;
    height: 48px !important;
    padding: 16px 12px !important;
    border-radius: 12px !important;
    border: 1px solid rgba(54, 54, 53, 0.5) !important;
    font-family: Lato, sans-serif !important;
    font-size: 14px !important;
    line-height: 24px !important;
    letter-spacing: 0.2px !important;
    color: rgba(54, 54, 53, 0.5) !important;
  }

  #step-3.active .w2w-discount #apply_coupon_btn {
    flex: 0 0 96px !important;
    width: 96px !important;
    height: 48px !important;
    padding: 17px 16px !important;
    border-radius: 10px !important;
    border: 1px solid #30a67f !important;
    background: #fff !important;
    color: #30a67f !important;
    font-family: "Noto Sans", sans-serif !important;
    font-size: 18px !important;
    font-weight: 640 !important;
    line-height: 24px !important;
    letter-spacing: 0.2px !important;
    align-self: center !important;
  }

  #step-3.active .apply-label--full {
    display: none !important;
  }

  #step-3.active .apply-label--short {
    display: inline !important;
  }

  #step-3.active .w2w-coupon-promo {
    display: flex !important;
    flex-direction: row !important;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    width: 100%;
    box-sizing: border-box;
    padding: 20px;
    margin: 0;
    background: #f5fbf9;
    border: 0;
    border-top: 1px solid #b4b4b3;
    border-radius: 0 0 20px 20px;
  }

  #step-3.active .w2w-coupon-promo__text {
    flex: 1 1 auto !important;
    min-width: 0;
    width: auto !important;
    max-width: none !important;
    margin: 0 !important;
    color: #363635;
    font-family: Lato, sans-serif;
    font-size: 14px;
    font-weight: 400;
    line-height: 20px;
    letter-spacing: 0.2px;
    display: block !important;
    white-space: normal;
    overflow-wrap: break-word;
    word-break: normal;
  }

  #step-3.active .w2w-coupon-promo__code,
  #step-3.active .w2w-coupon-promo__text strong {
    display: inline !important;
    font-weight: 700;
    white-space: nowrap;
  }

  #step-3.active .w2w-coupon-promo__code {
    color: #1f8462;
  }

  /* Must override `.w2w-discount button { width:100% }` or Copy steals the row. */
  #step-3.active .w2w-coupon-promo__copy {
    flex: 0 0 auto !important;
    width: auto !important;
    min-width: auto !important;
    max-width: none !important;
    height: auto !important;
    align-self: center !important;
    border: 0 !important;
    background: transparent !important;
    padding: 0 !important;
    margin: 0 !important;
    color: #1f8462 !important;
    font-family: "Noto Sans", sans-serif !important;
    font-size: 18px !important;
    font-weight: 640 !important;
    line-height: 24px !important;
    letter-spacing: 0.2px !important;
    cursor: pointer;
    white-space: nowrap !important;
  }

  /* Price breakdown */
  #step-3.active .w2w-order-card {
    order: 8;
    width: 100%;
    box-sizing: border-box;
    padding: 20px;
    gap: 20px;
    border-radius: 20px;
    border: 1px solid #b4b4b3;
    background: #fff;
  }

  #step-3.active .w2w-order-card h3 {
    margin: 0;
    color: #000;
    font-family: Lato, sans-serif;
    font-size: 16px;
    font-weight: 700;
    line-height: 24px;
    letter-spacing: 0.2px;
  }

  #step-3.active .w2w-order-items {
    height: auto !important;
    overflow: visible !important;
    width: 100%;
  }

  #step-3.active .w2w-order-row {
    padding: 0;
    border: 0;
    margin: 0 0 10px;
  }

  #step-3.active .w2w-order-row-left {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 10px;
    width: 100%;
  }

  #step-3.active .w2w-order-row-left .name {
    width: auto !important;
    flex: 1 1 auto;
    opacity: 0.6;
    color: #000;
    font-family: Lato, sans-serif;
    font-size: 14px;
    font-weight: 400;
    line-height: 24px;
    letter-spacing: 0.2px;
  }

  #step-3.active .w2w-order-row-left .name::before {
    content: attr(data-qty) "x ";
  }

  #step-3.active .w2w-order-row-left .qty {
    display: none !important;
  }

  #step-3.active .w2w-order-row-left .total {
    width: auto !important;
    flex: 0 0 auto;
    text-align: right;
    opacity: 0.6;
    color: #000;
    font-family: Lato, sans-serif;
    font-size: 14px;
    font-weight: 400;
    line-height: 24px;
    letter-spacing: 0.2px;
  }

  #step-3.active #discount_div .total,
  #step-3.active #discount_div #discount_html,
  #step-3.active #discount_html {
    color: #1f8462 !important;
    opacity: 1 !important;
  }

  #step-3.active .w2w-order-totals {
    width: 100%;
    margin-top: 10px;
    padding-top: 20px;
    border-top: 1px dashed rgba(180, 180, 179, 0.8);
    display: flex;
    flex-direction: column;
  }

  #step-3.active .w2w-order-totals .row {
    display: flex;
    justify-content: space-between;
    gap: 10px;
    padding: 0;
    margin: 0 0 10px;
    color: #000;
    font-family: Lato, sans-serif;
    font-size: 14px;
    font-weight: 700;
    line-height: 24px;
    letter-spacing: 0.2px;
  }

  #step-3.active .w2w-order-totals .row > div:first-child,
  #step-3.active .w2w-order-totals .row > div:last-child {
    opacity: 0.6;
  }

  #step-3.active .w2w-order-card .row.total {
    width: 100%;
    margin-top: 10px;
    padding-top: 20px;
    border-top: 1px dashed rgba(180, 180, 179, 0.8);
    align-items: center;
  }

  #step-3.active .w2w-order-card .row.total .label {
    opacity: 0.6;
    color: #000 !important;
    font-family: Lato, sans-serif !important;
    font-size: 14px !important;
    font-weight: 700 !important;
    line-height: 24px !important;
    letter-spacing: 0.2px !important;
  }

  #step-3.active .w2w-order-card .row.total div#main_total {
    color: #000 !important;
    font-family: "Noto Sans", sans-serif !important;
    font-size: 22px !important;
    font-weight: 700 !important;
    line-height: 32px !important;
    letter-spacing: 0.22px !important;
    text-transform: none !important;
  }

  #step-3.active .form-row.place-order {
    display: none !important;
  }

  #step-3.active #discount_div,
  #step-3.active .w2w-order-coupon-row {
    display: flex !important;
    justify-content: space-between;
    align-items: flex-start;
    gap: 10px;
    width: 100%;
    margin: 0 0 10px;
    padding: 0;
    border: 0;
    order: 0;
  }

  #step-3.active #discount_div[style*="display: none"],
  #step-3.active #discount_div[style*="display:none"] {
    display: none !important;
  }

  /* Discount row label → Coupon on mobile when shown */
  #step-3.active #discount_div > div:first-child {
    font-weight: 400;
    font-size: 0;
    flex: 1 1 auto;
  }

  #step-3.active #discount_div > div:first-child::before {
    content: "Coupon";
    font-size: 14px;
    font-family: Lato, sans-serif;
    font-weight: 400;
    line-height: 24px;
    letter-spacing: 0.2px;
    opacity: 0.6;
    color: #000;
  }

  #step-3.active #w2w-order-items-list {
    display: flex;
    flex-direction: column;
  }
}
/* Coupons */
  #step-3.active .w2w-discount {
    display: flex !important;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: 0;
    border: 0;
    border-radius: 0;
    width: 100%;
    background: transparent;
  }

  #step-3.active .w2w-discount-title {
    display: block !important;
    margin: 0 0 16px;
    padding: 0;
  }

  #step-3.active .w2w-discount > .w2w-discount-title,
  #step-3.active .w2w-discount > .w2w-discount-row,
  #step-3.active .w2w-discount > #discount_error_message {
    padding-left: 16px;
    padding-right: 16px;
  }

  #step-3.active .w2w-discount {
    border: 1px solid #b4b4b3;
    border-radius: 20px;
    overflow: hidden;
    background: #fff;
  }

  #step-3.active .w2w-discount-title {
    padding: 16px 16px 0 !important;
    margin-bottom: 16px !important;
  }

  #step-3.active .w2w-discount-row {
    display: flex !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    gap: 16px !important;
    padding: 0 16px 16px !important;
    margin: 0 !important;
  }

  #step-3.active .w2w-discount-row label {
    display: none !important;
  }

  #step-3.active .w2w-discount-row input#w2w-discount-code {
    flex: 1 1 auto !important;
    width: auto !important;
    min-width: 0 !important;
    height: 48px !important;
    padding: 16px 12px !important;
    border-radius: 12px !important;
    border: 1px solid rgba(54, 54, 53, 0.5) !important;
    font-family: Lato, sans-serif !important;
    font-size: 14px !important;
    line-height: 24px !important;
    letter-spacing: 0.2px !important;
    color: rgba(54, 54, 53, 0.5) !important;
  }

  #step-3.active .w2w-discount #apply_coupon_btn {
    flex: 0 0 96px !important;
    width: 96px !important;
    height: 48px !important;
    padding: 17px 16px !important;
    border-radius: 10px !important;
    border: 1px solid #30a67f !important;
    background: #fff !important;
    color: #30a67f !important;
    font-family: "Noto Sans", sans-serif !important;
    font-size: 18px !important;
    font-weight: 640 !important;
    line-height: 24px !important;
    letter-spacing: 0.2px !important;
    align-self: center !important;
  }

  #step-3.active .apply-label--full {
    display: none !important;
  }

  #step-3.active .apply-label--short {
    display: inline !important;
  }

  #step-3.active .w2w-coupon-promo {
    display: flex !important;
    flex-direction: row !important;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    width: 100%;
    box-sizing: border-box;
    padding: 20px;
    margin: 0;
    background: #f5fbf9;
    border: 0;
    border-top: 1px solid #b4b4b3;
    border-radius: 0 0 20px 20px;
  }

  #step-3.active .w2w-coupon-promo__text {
    flex: 1 1 auto !important;
    min-width: 0;
    width: auto !important;
    max-width: none !important;
    margin: 0 !important;
    color: #363635;
    font-family: Lato, sans-serif;
    font-size: 14px;
    font-weight: 400;
    line-height: 20px;
    letter-spacing: 0.2px;
    display: block !important;
    white-space: normal;
    overflow-wrap: break-word;
    word-break: normal;
  }

  #step-3.active .w2w-coupon-promo__code,
  #step-3.active .w2w-coupon-promo__text strong {
    display: inline !important;
    font-weight: 700;
    white-space: nowrap;
  }

  #step-3.active .w2w-coupon-promo__code {
    color: #1f8462;
  }


  #step-3.active .w2w-coupon-promo__copy {
    flex: 0 0 auto !important;
    width: auto !important;
    min-width: auto !important;
    max-width: none !important;
    height: auto !important;
    align-self: center !important;
    border: 0 !important;
    background: transparent !important;
    padding: 0 !important;
    margin: 0 !important;
    color: #1f8462 !important;
    font-family: "Noto Sans", sans-serif !important;
    font-size: 18px !important;
    font-weight: 640 !important;
    line-height: 24px !important;
    letter-spacing: 0.2px !important;
    cursor: pointer;
    white-space: nowrap !important;
  }