#page_product_detail .ec-productRole__btn .ec-blockBtn--cancel {
    border-radius: 9999px !important;
}

.progress-step {
    position: relative;
    flex: 1;
    text-align: center;
}

.progress-step:not(:last-child)::after {
    content: "";
    position: absolute;
    top: 20px;
    left: 50%;
    width: 100%;
    height: 1px;
    background-color: var(--venture-progress-line, #d0c2a5);
    z-index: -1;
}

.dark .progress-step:not(:last-child)::after {
    background-color: #333333;
}

.progress-step.active:not(:last-child)::after,
.progress-step.completed:not(:last-child)::after {
    background-color: #383838;
}

.dark .progress-step.active:not(:last-child)::after,
.dark .progress-step.completed:not(:last-child)::after {
    background-color: #EAEAEA;
}

/* Checkout progress uses a background utility for the connector line rather
   than a border utility. Keep it understated, but visible on parchment. */
ol > [aria-hidden="true"].bg-stone-200 {
    background-color: var(--venture-progress-line, #d0c2a5) !important;
}

/* The checkout surface is painted behind the progress component. The
   original -z-10 utility therefore put the connector behind that surface;
   keep it below the icons, but above the section background. */
body[id^="page_shopping"] #custom-progress-bar ol > [aria-hidden="true"].bg-stone-200 {
    z-index: 0 !important;
    pointer-events: none;
}

body[id^="page_shopping"] #custom-progress-bar .bg-background-light {
    background-color: var(--venture-checkout-surface) !important;
}

.ec-blockBtn--action {
    background-color: black !important;
    color: white !important;
    border: none !important;
}

.ec-blockBtn--cancel {
    background-color: #d9d9d9 !important;
    color: #333333 !important;
    border: none !important;
}

.ec-blockBtn--cancel:hover,
.ec-blockBtn--action:hover {
    opacity: 0.8;
}

.ec-orderAccount .ec-rectHeading h2 {
    margin-top: 0 !important
}

.ec-totalBox__paymentTotal .ec-totalBox__taxLabel,
.ec-totalBox__paymentTotal .ec-totalBox__price {
    color: #004285 !important;
}

.legacy-scope .ec-rectHeading h1,
.legacy-scope .ec-rectHeading .h1,
.legacy-scope .ec-rectHeading h2,
.legacy-scope .ec-rectHeading .h2,
.legacy-scope .ec-rectHeading h3,
.legacy-scope .ec-rectHeading .h3,
.legacy-scope .ec-rectHeading h4,
.legacy-scope .ec-rectHeading .h4,
.legacy-scope .ec-rectHeading h5,
.legacy-scope .ec-rectHeading .h5,
.legacy-scope .ec-rectHeading h6,
.legacy-scope .ec-rectHeading .h6 {
    background: #f2ece4;
    border: 1px solid #e2d8ca;
    color: #47403a;
}

.legacy-scope .ec-totalBox {
    background: #f7f2eb;
    border: 1px solid #e6dccc;
}

.legacy-scope .ec-totalBox .ec-totalBox__pointBlock {
    background: #ffffff;
    border: 1px solid #eee4d7;
}

.dark .legacy-scope .ec-rectHeading h1,
.dark .legacy-scope .ec-rectHeading .h1,
.dark .legacy-scope .ec-rectHeading h2,
.dark .legacy-scope .ec-rectHeading .h2,
.dark .legacy-scope .ec-rectHeading h3,
.dark .legacy-scope .ec-rectHeading .h3,
.dark .legacy-scope .ec-rectHeading h4,
.dark .legacy-scope .ec-rectHeading .h4,
.dark .legacy-scope .ec-rectHeading h5,
.dark .legacy-scope .ec-rectHeading .h5,
.dark .legacy-scope .ec-rectHeading h6,
.dark .legacy-scope .ec-rectHeading .h6 {
    background: #1f1f1f;
    border-color: #3f3f46;
    color: #f4f4f5;
}

.dark .legacy-scope .ec-totalBox {
    background: #18181b;
    border-color: #3f3f46;
}

.dark .legacy-scope .ec-totalBox .ec-totalBox__pointBlock {
    background: #27272a;
    border-color: #3f3f46;
}

/* Shared Tailwind border contrast: stone-100/200 are too close to the
   parchment surfaces used by venture01 utility, cart and modal screens. */
:root {
    --venture-border-subtle: #cbbd9f;
    --venture-border-default: #aa8b54;
    --venture-border-strong: #85632f;
    --venture-text-muted: #6f604d;
    --venture-text-icon-muted: #806b4c;
    --venture-progress-line: #d0c2a5;
    --venture-checkout-surface: #f7f2eb;
}

/* Checkout title/progress and the order summary should read as one surface.
   The old light body (#f3eee4) beside the summary (#f7f2eb) made the right
   column look like it belonged to a different page. Keep the parchment tone,
   but use the same surface token throughout shopping pages and retain a
   visible edge around the summary. */
body[id^="page_shopping"] {
    background-color: var(--venture-checkout-surface) !important;
}

body[id^="page_shopping"] #custom-page-header,
body[id^="page_shopping"] #custom-progress-bar,
body[id^="page_shopping"] .ec-layoutRole__legacy-wrapper {
    background-color: var(--venture-checkout-surface);
}

body[id^="page_shopping"] .legacy-scope .ec-totalBox {
    background: var(--venture-checkout-surface) !important;
    border: 1px solid var(--venture-border-subtle) !important;
    box-shadow: 0 8px 24px rgba(71, 56, 31, 0.06);
}

/* EC-CUBE's legacy multiple-shipping row ships with a hardcoded gray surface.
   Let the row use the same parchment surface as the surrounding checkout. */
#page_shopping_shipping_multiple .legacy-scope .ec-AddAddress__item {
    background: transparent !important;
}

.venture01-theme .border-stone-100,
.venture01-theme .border-stone-200,
.venture01-theme .border-stone-300,
body:not(.venture01-theme) .border-stone-100,
body:not(.venture01-theme) .border-stone-200,
body:not(.venture01-theme) .border-stone-300 {
    border-color: var(--venture-border-default) !important;
}

.venture01-theme .border-stone-100,
body:not(.venture01-theme) .border-stone-100 {
    border-color: var(--venture-border-subtle) !important;
}

.venture01-theme .border-stone-300,
body:not(.venture01-theme) .border-stone-300 {
    border-color: var(--venture-border-strong) !important;
}

/* Zinc borders are also used by login/account CTAs and related-product
   controls; the light-mode defaults are similarly too faint on parchment. */
.venture01-theme .border-zinc-100,
.venture01-theme .border-zinc-200,
.venture01-theme .border-zinc-300,
body:not(.venture01-theme) .border-zinc-100,
body:not(.venture01-theme) .border-zinc-200,
body:not(.venture01-theme) .border-zinc-300 {
    border-color: var(--venture-border-default) !important;
}

.venture01-theme .border-zinc-100,
body:not(.venture01-theme) .border-zinc-100 {
    border-color: var(--venture-border-subtle) !important;
}

.venture01-theme .border-zinc-300,
body:not(.venture01-theme) .border-zinc-300 {
    border-color: var(--venture-border-strong) !important;
}

/* The default zinc-400 is too light for small uppercase labels on parchment. */
body:not(.venture01-theme) .text-zinc-400,
.venture01-theme.venture-detail-page .text-zinc-400 {
    color: var(--venture-text-muted) !important;
}

/* Inactive checkout/account icons use zinc-300, which disappears on white. */
body:not(.venture01-theme) .text-zinc-300,
.venture01-theme.venture-detail-page .text-zinc-300 {
    color: var(--venture-text-icon-muted) !important;
}

body:not(.venture01-theme) .group:hover [class~="group-hover:text-zinc-400"],
.venture01-theme.venture-detail-page .group:hover [class~="group-hover:text-zinc-400"] {
    color: var(--venture-text-muted) !important;
}

/* Tailwind divide utilities set the border color on adjacent children, so
   overriding only .border-* does not improve these separators. Keep the
   line subtle, but make it readable on the parchment and dark surfaces. */
.venture01-theme .divide-stone-100 > :not([hidden]) ~ :not([hidden]),
body:not(.venture01-theme) .divide-stone-100 > :not([hidden]) ~ :not([hidden]) {
    border-color: var(--venture-border-subtle) !important;
}

.venture01-theme .divide-zinc-800 > :not([hidden]) ~ :not([hidden]),
body:not(.venture01-theme) .divide-zinc-800 > :not([hidden]) ~ :not([hidden]),
.dark [class~="dark:divide-zinc-800"] > :not([hidden]) ~ :not([hidden]),
.dark [class~="dark:divide-zinc-800/50"] > :not([hidden]) ~ :not([hidden]) {
    border-color: #4b5563 !important;
}