#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(--fashion-progress-line, #e5e7eb);
    z-index: 0;
}

.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 connector: each segment runs center-to-center between
   adjacent markers. It stays above the page surface and below the circles. */
.checkout-progress-list {
    isolation: isolate;
}

.checkout-progress-step:not(:last-child)::after {
    content: "";
    position: absolute;
    z-index: 0;
    top: 24px;
    left: 50%;
    width: 100%;
    height: 1px;
    background-color: var(--fashion-progress-line, #e5e7eb);
    pointer-events: none;
}

.checkout-progress-marker {
    position: relative;
    z-index: 1;
}

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

@media (max-width: 767px) {
    .checkout-progress-list--mobile .checkout-progress-step:not(:last-child)::after {
        top: 20px;
    }
}

.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: var(--fashion-text-muted);
}

.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 fashion01 utility, cart and modal screens. */
:root {
    --fashion-border-subtle: #cbbd9f;
    --fashion-border-default: #aa8b54;
    --fashion-border-strong: #85632f;
    --fashion-text-muted: rgb(39 39 42 / var(--tw-text-opacity, 1));
    --fashion-text-icon-muted: rgb(39 39 42 / var(--tw-text-opacity, 1));
    --fashion-progress-line: #e5e7eb;
    --fashion-checkout-background: #f8f5ef;
}

/* Checkout keeps Cart's white card surface for summary and section headings. */
body[id^="page_shopping"] {
    background-color: var(--fashion-checkout-background) !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: transparent;
}

body[id^="page_shopping"] .legacy-scope .ec-totalBox {
    background: #fff !important;
    border: 1px solid #e5e7eb !important;
    box-shadow: none !important;
}

body[id^="page_shopping"] .legacy-scope .ec-totalBox .ec-totalBox__pointBlock {
    background: #fff !important;
    border-color: #e5e7eb !important;
}

.dark body[id^="page_shopping"] .legacy-scope .ec-totalBox {
    background: #18181b !important;
    border-color: #3f3f46 !important;
}

.dark body[id^="page_shopping"] .legacy-scope .ec-totalBox .ec-totalBox__pointBlock {
    background: #27272a !important;
    border-color: #3f3f46 !important;
}

/* Checkout section headings stay flush with the page and use a single divider. */
body[id^="page_shopping"] .legacy-scope .ec-rectHeading h1,
body[id^="page_shopping"] .legacy-scope .ec-rectHeading .h1,
body[id^="page_shopping"] .legacy-scope .ec-rectHeading h2,
body[id^="page_shopping"] .legacy-scope .ec-rectHeading .h2,
body[id^="page_shopping"] .legacy-scope .ec-rectHeading h3,
body[id^="page_shopping"] .legacy-scope .ec-rectHeading .h3,
body[id^="page_shopping"] .legacy-scope .ec-rectHeading h4,
body[id^="page_shopping"] .legacy-scope .ec-rectHeading .h4,
body[id^="page_shopping"] .legacy-scope .ec-rectHeading h5,
body[id^="page_shopping"] .legacy-scope .ec-rectHeading .h5,
body[id^="page_shopping"] .legacy-scope .ec-rectHeading h6,
body[id^="page_shopping"] .legacy-scope .ec-rectHeading .h6 {
    background: none !important;
    border: none !important;
    padding-left: 0;
    border-bottom: 1px solid #d9d9d9 !important;
}

/* 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;
}

/* Checkout forms use the same clear Entry field surface with a subtle shared outline. */
body[id^="page_shopping"] .legacy-scope input:not([type]),
body[id^="page_shopping"] .legacy-scope input[type="email"],
body[id^="page_shopping"] .legacy-scope input[type="number"],
body[id^="page_shopping"] .legacy-scope input[type="password"],
body[id^="page_shopping"] .legacy-scope input[type="search"],
body[id^="page_shopping"] .legacy-scope input[type="tel"],
body[id^="page_shopping"] .legacy-scope input[type="text"],
body[id^="page_shopping"] .legacy-scope input[type="url"],
body[id^="page_shopping"] .legacy-scope select:not([disabled]),
body[id^="page_shopping"] .legacy-scope textarea {
    background-color: #fff !important;
    border: 1px solid #d9d9d9 !important;
    border-radius: 2px !important;
    color: #191915;
}

/* Coupon42 renders its code field outside the core input wrappers. Match the
   same Entry-inspired field surface, but leave the plugin's readonly state intact. */
#page_plugin_coupon_shopping .legacy-scope .ec-borderedDefs .form-control:not([readonly]):not([disabled]) {
    background-color: #fff !important;
    border: 1px solid #d9d9d9 !important;
    border-radius: 2px !important;
    color: #191915;
}

/* Keep legacy inline actions consistent with the shared form controls without
   retaining Bootstrap's browser focus ring. */
body.fashion01-theme .legacy-scope .ec-inlineBtn {
    border: 1px solid #d9d9d9 !important;
}

body.fashion01-theme .legacy-scope .ec-inlineBtn:focus,
body.fashion01-theme .legacy-scope .ec-inlineBtn:focus-visible,
body.fashion01-theme .legacy-scope .ec-inlineBtn.focus,
body.fashion01-theme .legacy-scope .ec-inlineBtn:active:focus,
body.fashion01-theme .legacy-scope .ec-inlineBtn.active:focus {
    outline: 0 !important;
    box-shadow: none !important;
}

/* Form pages share one subtle resting outline across Tailwind and legacy forms.
   TOP, LIST, and DETAIL retain their route-specific field styling. */
body.fashion01-theme.fashion01-form-surface input[type="text"],
body.fashion01-theme.fashion01-form-surface input:not([type]),
body.fashion01-theme.fashion01-form-surface input[type="date"],
body.fashion01-theme.fashion01-form-surface input[type="datetime-local"],
body.fashion01-theme.fashion01-form-surface input[type="email"],
body.fashion01-theme.fashion01-form-surface input[type="month"],
body.fashion01-theme.fashion01-form-surface input[type="number"],
body.fashion01-theme.fashion01-form-surface input[type="password"],
body.fashion01-theme.fashion01-form-surface input[type="search"],
body.fashion01-theme.fashion01-form-surface input[type="tel"],
body.fashion01-theme.fashion01-form-surface input[type="time"],
body.fashion01-theme.fashion01-form-surface input[type="url"],
body.fashion01-theme.fashion01-form-surface input[type="week"],
body.fashion01-theme.fashion01-form-surface select:not([data-fashion-keep-border]),
body.fashion01-theme.fashion01-form-surface textarea {
    border: 1px solid #d9d9d9 !important;
    box-shadow: none !important;
}

body.fashion01-theme.fashion01-form-surface input[type="checkbox"],
body.fashion01-theme.fashion01-form-surface input[type="radio"] {
    border: 1px solid #d9d9d9 !important;
    box-shadow: none !important;
    margin-top: 0 !important;
    vertical-align: middle;
}

/* Keep unchecked controls distinct from the parchment page surface. */
body.fashion01-theme.fashion01-form-surface input[type="checkbox"]:not(:checked),
body.fashion01-theme.fashion01-form-surface input[type="radio"]:not(:checked) {
    background-color: #fff !important;
}

/* The legacy checkout adds a bottom margin to each radio, shifting its visual
   center above the adjacent label. Give each payment option a centered row. */
body[id^="page_shopping"] .legacy-scope .ec-radio > div {
    display: flex !important;
    align-items: center;
}

body[id^="page_shopping"] .legacy-scope .ec-radio > div > input[type="radio"] {
    margin: 0 10px 0 0 !important;
}

/* Legacy postal-search help uses offsets and a zero line-height, which makes the
   question icon sit above its label. Keep the two pieces on one centered row. */
body.fashion01-theme.fashion01-form-surface .legacy-scope .ec-zipInputHelp {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    line-height: normal;
    vertical-align: middle;
}

body.fashion01-theme.fashion01-form-surface .legacy-scope .ec-zipInputHelp .ec-zipInputHelp__icon {
    display: flex;
    flex: 0 0 20px;
    align-items: center;
    justify-content: center;
    margin-top: 0;
    top: auto;
}

body.fashion01-theme.fashion01-form-surface .legacy-scope .ec-zipInputHelp .ec-zipInputHelp__icon .ec-icon img {
    position: static;
}

body.fashion01-theme.fashion01-form-surface .legacy-scope .ec-zipInputHelp span {
    margin-left: 0;
    vertical-align: middle;
}

/* Cart quantity is a read-only display within the +/- control, not a form field. */
body.fashion01-theme.cart_page .fashion01-cart-quantity[type="text"],
body.fashion01-theme.cart_page .fashion01-cart-quantity[type="text"]:focus {
    border-width: 0 !important;
    border-style: none !important;
    border-color: transparent !important;
    background-color: transparent !important;
    box-shadow: none !important;
    outline: 0;
}

body.fashion01-theme.fashion01-form-surface input[type="text"]:focus,
body.fashion01-theme.fashion01-form-surface input:not([type]):focus,
body.fashion01-theme.fashion01-form-surface input[type="date"]:focus,
body.fashion01-theme.fashion01-form-surface input[type="datetime-local"]:focus,
body.fashion01-theme.fashion01-form-surface input[type="email"]:focus,
body.fashion01-theme.fashion01-form-surface input[type="month"]:focus,
body.fashion01-theme.fashion01-form-surface input[type="number"]:focus,
body.fashion01-theme.fashion01-form-surface input[type="password"]:focus,
body.fashion01-theme.fashion01-form-surface input[type="search"]:focus,
body.fashion01-theme.fashion01-form-surface input[type="tel"]:focus,
body.fashion01-theme.fashion01-form-surface input[type="time"]:focus,
body.fashion01-theme.fashion01-form-surface input[type="url"]:focus,
body.fashion01-theme.fashion01-form-surface input[type="week"]:focus,
body.fashion01-theme.fashion01-form-surface select:not([data-fashion-keep-border]):focus,
body.fashion01-theme.fashion01-form-surface textarea:focus {
    border-color: var(--fashion-border-default) !important;
    outline: 0;
}

body.fashion01-theme.fashion01-form-surface input[type="checkbox"]:focus,
body.fashion01-theme.fashion01-form-surface input[type="radio"]:focus {
    border-color: var(--fashion-border-default) !important;
    outline: 0;
}

/* Catalog fields keep their resting border when focused. This only removes the
   browser/Tailwind focus ring; links and buttons retain keyboard focus styling. */
body.fashion01-theme.fashion01-home-page .search-form input:focus {
    border-color: #bcb8ad !important;
    outline: 0 !important;
    box-shadow: none !important;
}

body.fashion01-theme.fashion01-home-page .drawer-search input:focus {
    border-color: var(--line) !important;
    outline: 0 !important;
    box-shadow: none !important;
}

body.fashion01-theme.fashion01-list-page .listing-controls select:focus {
    border-color: var(--line) !important;
    outline: 0 !important;
    box-shadow: none !important;
}

body.fashion01-theme.fashion01-detail-page .option-row select:focus {
    border-color: var(--line) !important;
    outline: 0 !important;
    box-shadow: none !important;
}

/* Form action buttons rely on their surface and text contrast, not an outline.
   The anchor selector covers address-search actions styled with Tailwind's border utility. */
body.fashion01-theme.fashion01-form-surface button,
body.fashion01-theme.fashion01-form-surface input[type="button"],
body.fashion01-theme.fashion01-form-surface input[type="reset"],
body.fashion01-theme.fashion01-form-surface input[type="submit"],
body.fashion01-theme.fashion01-form-surface a.border {
    border: 0 !important;
}

/* The member-registration CTAs on login pages are secondary cards, not form
   actions, so they retain Cart's neutral border over the action reset above. */
body.fashion01-theme.fashion01-form-surface a.fashion01-entry-registration-link {
    border: 1px solid #e5e7eb !important;
}

.fashion01-theme .border-stone-100,
.fashion01-theme .border-stone-200,
.fashion01-theme .border-stone-300 {
    border-color: #e5e7eb !important;
}

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

.fashion01-theme .border-zinc-100 {
    border-color: var(--fashion-border-subtle) !important;
}

.fashion01-theme .border-zinc-300 {
    border-color: var(--fashion-border-strong) !important;
}

/* The default zinc-400 is too light for small uppercase labels on parchment. */
body.fashion01-theme.fashion01-form-surface .text-zinc-400 {
    color: var(--fashion-text-muted) !important;
}

/* Inactive checkout/account icons use zinc-300, which disappears on white. */
body.fashion01-theme.fashion01-form-surface .text-zinc-300 {
    color: var(--fashion-text-icon-muted) !important;
}

body.fashion01-theme.fashion01-form-surface .group:hover [class~="group-hover:text-zinc-400"] {
    color: var(--fashion-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. */
.fashion01-theme .divide-stone-100 > :not([hidden]) ~ :not([hidden]) {
    border-color: #e5e7eb !important;
}

.fashion01-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;
}

/* MyPage uses the same content track as LIST and DETAIL. The navigation stays
   independently readable as a softly raised panel at every breakpoint. */
body.fashion01-theme .fashion01-mypage-main {
    width: min(1320px, calc(100% - 64px));
    margin-inline: auto;
}

body.fashion01-theme .fashion01-mypage-nav {
    min-width: 0;
}

body.fashion01-theme .fashion01-mypage-nav-toggle,
body.fashion01-theme #fashion01-mypage-nav-panel {
    border: 1px solid var(--fashion-border-subtle);
    background: linear-gradient(145deg, rgba(255, 254, 250, 0.98), rgba(244, 239, 230, 0.94));
    box-shadow: 0 12px 28px rgba(71, 56, 31, 0.08);
}

body.fashion01-theme #fashion01-mypage-nav-panel {
    border-color: #e5e7eb;
    padding: 20px;
}

.dark body.fashion01-theme .fashion01-mypage-nav-toggle,
.dark body.fashion01-theme #fashion01-mypage-nav-panel {
    border-color: #4b5563;
    background: linear-gradient(145deg, rgba(39, 39, 42, 0.98), rgba(24, 24, 27, 0.96));
    box-shadow: 0 12px 28px rgba(0, 0, 0, 0.24);
}

@media (max-width: 620px) {
    body.fashion01-theme .fashion01-mypage-main {
        width: calc(100% - 36px);
    }

    body.fashion01-theme #fashion01-mypage-nav-panel {
        padding: 12px;
    }
}

/* The legacy checkout shell has a 20px outer margin while retaining width: 100%,
   which makes /shopping overflow on mobile. Reset that shell while preserving
   the standard, equal checkout gutters inside the order content. */
@media (max-width: 767px) {
    #page_shopping .legacy-scope,
    #page_shopping .legacy-scope.page-wrapper .ec-layoutRole__contents {
        box-sizing: border-box;
        width: 100%;
        max-width: none;
        min-width: 0;
        margin: 0;
    }

    #page_shopping .legacy-scope .ec-orderRole {
        padding-left: 24px;
        padding-right: 24px;
    }
}