.deceti-product-page-layout {
  width: 100%;
  min-width: 0;
}

.deceti-product-page-region {
  display: flex;
  flex-direction: column;
  gap: var(--theme-space-5, 20px);
  min-width: 0;
  padding-top: 0;
  padding-bottom: 0;
}

.deceti-product-page-layout--stacked {
  display: block;
}

.deceti-product-page-layout--two_columns,
.deceti-product-page-layout--two_columns_then_full {
  display: grid;
  grid-template-columns: var(--deceti-product-layout-columns, minmax(0, 1fr) minmax(360px, 460px));
  gap: var(--theme-space-5, 20px);
  align-items: start;
}

.deceti-product-page-layout--two_columns .deceti-product-page-region--left,
.deceti-product-page-layout--two_columns_then_full .deceti-product-page-region--left {
  grid-column: 1;
}

.deceti-product-page-layout--two_columns .deceti-product-page-region--right,
.deceti-product-page-layout--two_columns_then_full .deceti-product-page-region--right {
  grid-column: 2;
}

.deceti-product-page-layout--two_columns_then_full .deceti-product-page-region--full {
  grid-column: 1 / -1;
}

.deceti-product-page-region > .deceti-dynamic-block {
  width: 100%;
  min-width: 0;
  margin: 0;
}

/*
 * Calculator shells normally have a 40px page-level top margin. Inside a
 * product layout region the grid gap controls spacing, so that margin would
 * push a vertical calculator below the neighboring regional blocks.
 */
.deceti-product-page-region--right
  > .deceti-dynamic-block
  .calculator.calculator-vertical.deceti-page-pricingcalculator-v {
  margin-top: 0 !important;
}

@media (max-width: 991.98px) {
  .deceti-product-page-layout--two_columns,
  .deceti-product-page-layout--two_columns_then_full {
    grid-template-columns: minmax(0, 1fr);
  }

  .deceti-product-page-layout--two_columns .deceti-product-page-region,
  .deceti-product-page-layout--two_columns_then_full .deceti-product-page-region {
    grid-column: 1;
  }
}
/*
 * Compact legacy calculators: when the shipping row becomes narrow, keep the
 * fields readable and move their icon action to a full-width second line.
 * Calculator v1 owns its explicit in-row text action and is excluded.
 */
@media (max-width: 767px) {
  .calculator:not([data-deceti-calculator-variant="calculator-1"])
  #shipping_calc_wrap .deceti-ui-shipping-row {
    flex-wrap: wrap !important;
  }

  .calculator:not([data-deceti-calculator-variant="calculator-1"])
  #shipping_calc_wrap .deceti-ui-shipping-row > .deceti-ui-flex-40 {
    flex: 0 0 100% !important;
    width: 100% !important;
    margin-top: 8px !important;
  }

  .calculator:not([data-deceti-calculator-variant="calculator-1"])
  #shipping_calc_wrap #btn_calc_shipping {
    width: 100% !important;
    min-width: 0 !important;
  }
}

/* Ordinary v0, free-size pricing: expand the main controls inside the existing
 * left column. Height and Width intentionally remain a two-column pair. */
.calculator[data-deceti-calculator-variant="calculator-0"][data-deceti-pricing-type="0"]
  #form_upload > .container > .row > .calc:first-child .vertical-group {
  width: 100%;
  max-width: none;
}

.calculator[data-deceti-calculator-variant="calculator-0"][data-deceti-pricing-type="0"]
  #form_upload > .container > .row > .calc:first-child .blocksize > label {
  display: block;
  width: 100%;
  max-width: none;
}

.calculator[data-deceti-calculator-variant="calculator-0"][data-deceti-pricing-type="0"]
  #form_upload > .container > .row > .calc:first-child .blocksize > label > select,
.calculator[data-deceti-calculator-variant="calculator-0"][data-deceti-pricing-type="0"]
  #form_upload > .container > .row > .calc:first-child .blocksize > label > input {
  width: 100% !important;
  max-width: none !important;
  box-sizing: border-box;
}

/* Labeled shipping action shared by the ordinary v0 calculator. */
.calculator #shipping_calc_wrap .deceti-shipping-button--labeled {
  display: inline-flex !important;
  width: auto !important;
  min-width: 180px !important;
  padding-right: 18px !important;
  padding-left: 18px !important;
  gap: 8px !important;
  align-items: center !important;
  justify-content: center !important;
  white-space: nowrap !important;
}

@media (max-width: 767px) {
  .calculator #shipping_calc_wrap .deceti-shipping-button--labeled {
    width: 100% !important;
    min-width: 0 !important;
  }
}

/* Repeat-order layout uses the published theme roles, not injected colors. */
.deceti-repeat-mode .deceti-buttons-scope,
.deceti-repeat-mode [data-deceti-block*=upload],
.deceti-repeat-mode .deceti-block-uploadartwork { display: none !important; }
.deceti-repeat-approval {
  display: grid;
  gap: 16px;
  margin: 18px 0;
  padding: 18px;
  border: 1px solid var(--color-success);
  border-radius: 14px;
  color: var(--color-text);
  background: color-mix(in srgb, var(--color-success) 9%, var(--color-surface));
  font-weight: 800;
  line-height: 1.4;
}
.deceti-repeat-shipping {
  display: grid;
  gap: 12px;
  padding: 18px;
  border: 1px solid var(--color-border);
  border-radius: 14px;
  background: var(--color-surface);
}
.deceti-repeat-shipping h3,
.deceti-repeat-shipping p { margin: 0; }
.deceti-repeat-shipping p { color: var(--color-text-muted); font-weight: 400; }
.deceti-repeat-shipping__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.deceti-repeat-shipping label { display: grid; gap: 6px; color: var(--color-heading); font-size: 13px; }
.deceti-repeat-shipping input {
  width: 100%;
  min-height: 46px;
  padding: 9px 12px;
  border: 1px solid var(--color-control-border);
  border-radius: 10px;
  background: var(--color-surface);
}
.deceti-repeat-approval__button {
  width: 100%;
  min-height: 52px;
  border: 0;
  border-radius: 999px;
  color: var(--color-text-inverse);
  background: var(--color-success);
  font-size: 17px;
  font-weight: 900;
  cursor: pointer;
}
.deceti-repeat-approval__button.is-approved { background: var(--color-primary-dark); }
@media (max-width: 700px) {
  .deceti-repeat-shipping__grid { grid-template-columns: 1fr; }
}