/* BASIC css start */
/*
 * SUCCUBUS / Makeshop mobile order page redesign
 *
 * Paste this file after the original order CSS.  It is intentionally an
 * override layer: the original HTML, Makeshop virtual tags, form fields,
 * conditionals and payment hooks stay untouched.
 */

/* -------------------------------------------------------------------------
   01. Page tokens and global order canvas
   ------------------------------------------------------------------------- */

#contents:has(> #order),
#container:has(#order) {
    background: #f7f4f2 !important;
}

#order {
    --order-page-bg: #f7f4f2;
    --order-card: #ffffff;
    --order-card-soft: #fbf8f6;
    --order-ink: #251a20;
    --order-muted: #8c7e83;
    --order-faint: #b7a9ae;
    --order-line: rgba(37, 26, 32, .12);
    --order-line-strong: rgba(37, 26, 32, .24);
    --order-accent: #d84d73;
    --order-accent-soft: #fae8ee;
    --order-success: #328b62;
    --order-primary: #251a20;
    --order-primary-ink: #ffffff;
    --order-control: #ffffff;
    --order-shadow: 0 14px 32px rgba(54, 35, 43, .07);

    width: 100%;
    max-width: 920px;
    margin: 0 auto;
    padding: 28px 16px 164px;
    box-sizing: border-box;
    background: var(--order-page-bg) !important;
    color: var(--order-ink);
    font-family: "Pretendard", "Noto Sans KR", Arial, sans-serif;
    font-size: 14px;
    line-height: 1.55;
    letter-spacing: -.02em;
}

#order,
#order *,
#order *::before,
#order *::after {
    box-sizing: border-box;
}

#order a {
    color: inherit;
    text-decoration: none;
}

#order img {
    max-width: 100%;
    vertical-align: middle;
}

#order button,
#order input,
#order select,
#order textarea {
    font: inherit;
}

#order button,
#order input[type="button"],
#order input[type="submit"] {
    cursor: pointer;
}

#order .clearfix::after,
#order .clear::after {
    display: block;
    clear: both;
    content: "";
}

/* The shared day/night script uses these classes on html and body. */
html.succubus-preload-night #contents:has(> #order),
html.succubus-preload-night #container:has(#order),
html.succubus-night #contents:has(> #order),
html.succubus-night #container:has(#order),
body.succubus-night #contents:has(> #order),
body.succubus-night #container:has(#order) {
    background: #000 !important;
}

html.succubus-preload-night #order,
html.succubus-night #order,
body.succubus-night #order {
    --order-page-bg: #000000;
    --order-card: #111111;
    --order-card-soft: #171317;
    --order-ink: #fff7f3;
    --order-muted: #c0adb5;
    --order-faint: #8f7c84;
    --order-line: rgba(255, 247, 243, .17);
    --order-line-strong: rgba(255, 247, 243, .34);
    --order-accent: #ff7094;
    --order-accent-soft: #311520;
    --order-success: #78d49e;
    --order-primary: #fff7f3;
    --order-primary-ink: #000000;
    --order-control: #171317;
    --order-shadow: 0 16px 34px rgba(0, 0, 0, .45);

    background: #000 !important;
    color: var(--order-ink);
}

html.succubus-preload-night #order a,
html.succubus-night #order a,
body.succubus-night #order a {
    color: inherit;
}

/* -------------------------------------------------------------------------
   02. Checkout title and section headings
   ------------------------------------------------------------------------- */

#order > .h_title {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    gap: 5px 14px;
    margin: 0 3px 18px;
    padding: 0 0 20px;
    border: 0 !important;
}

#order > .h_title::before {
    display: block;
    flex: 0 0 100%;
    color: var(--order-accent);
    content: "CHECKOUT";
    font-size: 10px;
    font-weight: 800;
    letter-spacing: .24em;
    line-height: 1;
}

#order > .h_title h3 {
    margin: 0;
    color: var(--order-ink);
    font-size: clamp(24px, 5vw, 34px);
    font-weight: 700;
    letter-spacing: -.07em;
    line-height: 1.12;
}

#order > .h_title h3::after {
    display: block;
    width: 44px;
    height: 3px;
    margin-top: 14px;
    border-radius: 99px;
    background: var(--order-accent);
    content: "";
}

#order > .h_title2 {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: 58px;
    margin: 0;
    padding: 16px 18px;
    border: 1px solid var(--order-line) !important;
    border-bottom: 0 !important;
    border-radius: 24px 24px 0 0;
    background: var(--order-card) !important;
    box-shadow: var(--order-shadow);
}

#order > .h_title2 h3,
#order .prd-wrap > .h_title2 h3 {
    margin: 0;
    color: var(--order-ink);
    font-size: 15px;
    font-weight: 800;
    letter-spacing: -.035em;
}

#order > .h_title2 h3::before {
    display: inline-block;
    width: 7px;
    height: 7px;
    margin: 0 8px 2px 0;
    border-radius: 50%;
    background: var(--order-accent);
    content: "";
}

#order > .h_title2 > .fa,
#order .prd-wrap > .h_title2 > .fa {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    padding: 0 !important;
    border: 1px solid var(--order-line-strong);
    border-radius: 50%;
    color: var(--order-ink);
    cursor: pointer;
    font-size: 15px !important;
    line-height: 1;
}

#order > .h_title2 + .prd-wrap {
    margin-top: 0;
    border-top-left-radius: 0;
    border-top-right-radius: 0;
}

/* -------------------------------------------------------------------------
   03. Product summary cards
   ------------------------------------------------------------------------- */

#order .prd-wrap {
    overflow: hidden;
    margin: 0 0 18px;
    border: 1px solid var(--order-line);
    border-radius: 24px;
    background: var(--order-card);
    box-shadow: var(--order-shadow);
}

#order .prd-wrap > .h_title2 {
    min-height: 48px;
    padding: 14px 18px;
    border: 0 !important;
    border-bottom: 1px solid var(--order-line) !important;
    border-radius: 0;
    background: var(--order-card-soft) !important;
    box-shadow: none;
}

#order .prd-wrap > .h_title2 h3 {
    font-size: 12px;
    letter-spacing: .02em;
    text-transform: uppercase;
}

#order .prd-wrap > .h_title2 h3 .fa-home {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    margin-right: 7px;
    border: 1px solid var(--order-line-strong);
    border-radius: 50%;
    color: var(--order-accent);
    font-size: 11px;
}

#order .prd_order {
    margin: 0;
    padding: 0;
    list-style: none;
}

#order .prd_order li {
    margin: 0;
    padding: 18px;
    border: 0 !important;
    border-bottom: 1px solid var(--order-line) !important;
    background: var(--order-card);
}

#order .prd_order li:last-child {
    border-bottom: 0 !important;
}

#order figure {
    display: grid;
    grid-template-columns: 94px minmax(0, 1fr);
    gap: 14px;
    width: 100%;
    min-width: 0;
    margin: 0;
    padding: 0 !important;
}

#order .basketLeft {
    position: relative;
    float: none !important;
    width: 94px !important;
    height: 94px !important;
    overflow: hidden;
    border-radius: 18px;
    background: var(--order-card-soft);
}

#order .basketLeft a,
#order .basketLeft img {
    display: block;
    width: 100%;
    height: 100%;
}

#order .basketLeft img {
    object-fit: cover;
}

#order .basketRight {
    min-width: 0;
    padding: 0 !important;
    color: var(--order-muted);
    font-size: 12px;
}

#order .basketRight div {
    color: var(--order-muted);
}

#order .basketRight div.pname {
    display: -webkit-box;
    overflow: hidden;
    margin: 1px 0 7px;
    color: var(--order-ink);
    font-size: 14px;
    font-weight: 750;
    letter-spacing: -.04em;
    line-height: 1.4;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
}

#order .basketRight div.reserve-point {
    min-height: 18px;
    padding-top: 0;
    color: var(--order-success);
    font-size: 11px;
}

#order .basketRight .reserve-point img {
    width: 14px;
    height: 14px;
    margin-right: 2px;
    object-fit: contain;
}

#order .basketRight div.price-coupon {
    display: grid;
    gap: 3px;
    margin-top: 10px;
    padding-top: 10px;
    border-top: 1px solid var(--order-line);
}

#order .basketRight div.price-coupon dl,
#order .basketRight div.price-coupon dl::after {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    width: auto;
    margin: 0;
}

#order .basketRight div.price-coupon dl::after {
    display: none;
    content: none;
}

#order .basketRight div.price-coupon dl dt,
#order .basketRight div.price-coupon dl dd {
    float: none !important;
    width: auto !important;
    margin: 0;
    padding: 0;
}

#order .basketRight div.price-coupon dl dd {
    color: var(--order-ink);
    font-weight: 700;
    text-align: right;
}

#order .basketRight div.price-coupon dl dd .fc-red,
#order .basketRight #downpricevalue {
    color: var(--order-accent) !important;
}

#order .basketRight .btn-coupon {
    display: inline-flex;
    align-items: center;
    min-height: 20px;
    margin-left: 4px;
    padding: 2px 6px;
    border: 1px solid var(--order-line-strong);
    border-radius: 99px;
    background: transparent !important;
    color: var(--order-muted) !important;
    font-size: 10px;
    line-height: 1.1;
    white-space: nowrap;
}

#order .basketRight .MS_select,
#order .basketRight select {
    width: 100%;
    max-width: 100%;
}

#order .basketRight .btn_Black,
#order .basketRight .btn_Red {
    min-height: 36px;
    margin-top: 8px;
    border: 0;
    border-radius: 10px;
    background: var(--order-primary) !important;
    color: var(--order-primary-ink) !important;
    line-height: 36px;
}

#order .basketRight .fa-plus,
#order .basketRight .fa-minus {
    width: 32px;
    height: 32px;
    border: 1px solid var(--order-line-strong);
    border-radius: 9px;
    background: var(--order-card) !important;
    color: var(--order-ink) !important;
    line-height: 30px;
}

#order .basketRight span.box-round,
#order .basketRight span.red-delivery,
#order .basketRight span.blue-delivery,
#order .basketRight span.gray-delivery {
    display: inline-block;
    margin: 2px 3px 0 0;
    padding: 2px 6px;
    border: 1px solid var(--order-line-strong);
    border-radius: 99px;
    background: transparent;
    color: var(--order-muted);
    font-size: 10px;
}

#order .amount-input {
    min-width: 42px;
    width: 42px;
    text-align: center;
}

#order .couponBody {
    margin: 0;
    padding: 0 18px 18px;
    border: 0 !important;
    background: var(--order-card) !important;
}

#order .couponBody > div {
    padding-top: 2px;
}

#order .couponBody dl {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 12px;
    width: auto;
    margin: 0;
    padding: 6px 0;
    color: var(--order-muted);
}

#order .couponBody dl::after {
    display: none;
    content: none;
}

#order .couponBody dl dt,
#order .couponBody dl dd {
    float: none !important;
    width: auto !important;
    margin: 0;
    padding: 0;
}

#order .couponBody dl dd {
    color: var(--order-ink);
    font-weight: 700;
    text-align: right;
}

#order .couponBody dl.fc-red,
#order .couponBody dl.fc-red dd,
#order .couponBody dl dd .fc-red {
    color: var(--order-accent) !important;
}

#order .couponBody dl.total {
    align-items: end;
    margin-bottom: 7px;
    padding: 16px 0;
    border-bottom: 1px solid var(--order-line);
    color: var(--order-ink);
    font-size: 13px;
    font-weight: 750;
}

#order .couponBody dl.total dd {
    display: flex;
    align-items: baseline;
    gap: 3px;
    color: var(--order-ink);
    font-size: 12px;
    white-space: nowrap;
}

#order .couponBody dl.total dd strong.fc-red {
    color: var(--order-accent) !important;
    font-size: 20px;
    line-height: 1;
}

#order .couponBody dl.total .t-reserve {
    color: var(--order-muted);
    font-size: 10px;
    font-weight: 500;
}

#order .couponBody dl.total dd > .fa {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    margin-left: 6px;
    padding: 0;
    border: 1px solid var(--order-line-strong);
    border-radius: 50%;
    color: var(--order-ink);
    cursor: pointer;
    font-size: 12px;
    vertical-align: middle;
}

#order .couponBody dl.line {
    padding-top: 10px;
    border-top: 0;
}

#order .couponBody .btn-coupon-cart {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 42px;
    margin: 12px 0 4px;
    border: 1px solid var(--order-line-strong);
    border-radius: 12px;
    background: var(--order-card-soft) !important;
    color: var(--order-ink) !important;
    font-size: 12px;
    font-weight: 750;
}

/* -------------------------------------------------------------------------
   04. Delivery and membership notices
   ------------------------------------------------------------------------- */

#order .discountInfo {
    margin: 0 0 18px;
    padding: 18px;
    border: 1px solid var(--order-line);
    border-radius: 20px;
    background: var(--order-card);
    box-shadow: var(--order-shadow);
}

#order .discountInfo::before {
    display: block;
    margin-bottom: 10px;
    color: var(--order-accent);
    content: "DELIVERY & BENEFITS";
    font-size: 10px;
    font-weight: 800;
    letter-spacing: .19em;
}

#order .discountInfo .desc {
    color: var(--order-muted);
    font-size: 12px;
}

#order .discountInfo p {
    margin: 4px 0;
}

#order .discountInfo p:first-child {
    color: var(--order-ink);
    font-weight: 750;
}

#order .discountInfo a {
    color: var(--order-accent) !important;
    text-decoration: underline;
    text-underline-offset: 2px;
}

#order .discountInfo .delivery-button {
    font-size: 13px;
    vertical-align: middle;
}

#order .delivery-type,
#order .discountInfo .reserve-discount,
#order .discountInfo .delivery-select {
    margin-bottom: 12px;
    padding: 0;
}

#order .discountInfo select {
    width: 100%;
}

/* -------------------------------------------------------------------------
   05. Buyer / delivery / gift forms
   ------------------------------------------------------------------------- */

#order .orderBody {
    overflow: hidden;
    margin: 0 0 18px;
    border: 1px solid var(--order-line);
    border-radius: 22px;
    background: var(--order-card);
    box-shadow: var(--order-shadow);
}

#order .orderBody > div > table,
#order .orderBody > table,
#order .orderBody table {
    display: block;
    width: 100%;
    margin: 0 !important;
    border: 0;
    border-spacing: 0;
    border-collapse: collapse;
}

#order .orderBody table > thead,
#order .orderBody table > tbody {
    display: block;
    width: 100%;
}

#order .orderBody table > thead {
    padding: 18px 18px 12px;
    border-bottom: 1px solid var(--order-line);
    background: var(--order-card-soft);
    text-align: left;
}

#order .orderBody table > thead tr,
#order .orderBody table > thead th {
    display: block;
    width: 100%;
    margin: 0;
    padding: 0 !important;
    border: 0;
}

#order .orderBody table > thead th {
    color: var(--order-ink);
    font-size: 14px;
    font-weight: 800;
    letter-spacing: -.035em;
}

#order .orderBody table > thead th::before {
    display: inline-block;
    width: 7px;
    height: 7px;
    margin: 0 8px 2px 0;
    border-radius: 50%;
    background: var(--order-accent);
    content: "";
}

#order .orderBody table > tbody {
    border: 0 !important;
    background: var(--order-card) !important;
}

#order .orderBody table > tbody > tr {
    display: grid;
    grid-template-columns: minmax(92px, 30%) minmax(0, 1fr);
    width: 100%;
    border: 0;
    border-bottom: 1px solid var(--order-line);
}

#order .orderBody table > tbody > tr:last-child {
    border-bottom: 0;
}

#order .orderBody table > tbody > tr > th,
#order .orderBody table > tbody > tr > td {
    min-width: 0;
    margin: 0;
    border: 0;
    background: transparent !important;
    color: var(--order-ink);
    font-size: 13px;
    vertical-align: middle;
}

#order .orderBody table > tbody > tr > th {
    padding: 15px 10px 15px 18px;
    color: var(--order-muted);
    font-size: 12px;
    font-weight: 650;
    line-height: 1.4;
}

#order .orderBody table > tbody > tr > td {
    overflow-wrap: anywhere;
    padding: 13px 18px 13px 6px;
    line-height: 1.5;
}

#order .orderBody table > tbody > tr > td[colspan="2"],
#order .orderBody table > tbody > tr > th[colspan="2"] {
    grid-column: 1 / -1;
    padding-left: 18px;
}

#order .orderBody table > tbody > tr > td:only-child {
    grid-column: 1 / -1;
    padding-left: 18px;
}

#order .orderBody table > tbody > tr.order-info-simple {
    display: block;
    border-bottom: 1px solid var(--order-line);
}

#order .orderBody table > tbody > tr.order-info-simple td {
    position: relative;
    display: block;
    min-height: 50px;
    padding: 15px 78px 15px 18px;
    background: var(--order-card) !important;
    color: var(--order-muted);
    font-size: 12px;
}

#order .Write-order .order-info-simple .btn_White,
#order .Write-deli .order-info-simple .btn_White,
#order .order-info-simple .btn_White {
    position: absolute;
    top: 50%;
    right: 14px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: auto;
    min-width: 54px;
    height: 28px;
    margin: 0;
    padding: 0 9px;
    border: 1px solid var(--order-line-strong);
    border-radius: 99px;
    background: transparent !important;
    color: var(--order-ink) !important;
    font-size: 11px;
    line-height: 1;
    transform: translateY(-50%);
}

#order .orderBody .order-info {
    margin: 0;
    padding: 0;
    border: 0;
    background: var(--order-card-soft) !important;
    color: var(--order-muted);
}

#order .orderBody .order-info .btn_White {
    min-width: 54px;
    height: 28px;
    border: 1px solid var(--order-line-strong);
    border-radius: 99px;
    background: transparent !important;
    color: var(--order-ink) !important;
    line-height: 26px;
}

#order .orderBody .total th,
#order .orderBody .total td {
    border-top: 1px solid var(--order-line);
}

#order .orderBody .total td strong,
#order #sale_price_box {
    color: var(--order-accent) !important;
}

#order .orderBody h5 {
    margin: 0;
    padding: 18px;
    border-bottom: 1px solid var(--order-line);
    color: var(--order-ink);
    font-size: 14px;
    font-weight: 800;
}

#order .orderBody h5 + .order-info,
#order .orderBody > .pd10 {
    padding: 16px 18px;
}

#order .orderBody .messageArea .msgSelBox {
    width: 100%;
}

#order .orderBody .MS_label_delivery_date {
    display: block;
    margin-bottom: 8px;
}

#order .orderBody .hope-delivery {
    position: relative;
    margin-bottom: 8px;
    padding-right: 72px;
}

#order .orderBody .hope-delivery .btn_Grey {
    position: absolute;
    top: 0;
    right: 0;
    width: 66px;
    min-height: 42px;
}

#order .orderBody .hope-delivery-time select,
#order .orderBody .hope-delivery input[type="text"] {
    width: 100%;
}

#order .orderBody .reserve-possible td {
    padding-bottom: 13px;
}

#order .orderBody .pd10 .btn_Red {
    min-height: 44px;
    margin-bottom: 8px;
    border: 0;
    border-radius: 12px;
    background: var(--order-primary) !important;
    color: var(--order-primary-ink) !important;
    font-size: 14px;
    line-height: 44px;
}

/* The old stylesheet hides these details after login.  Preserve that
   conditional state; this only makes the revealed rows readable. */
#order .order-info-detail td > input,
#order .order-info-detail td > select,
#order .order-info-detail td > textarea {
    max-width: 100%;
}

#order .gift-card {
    margin: 0;
    padding: 0;
}

#order .gift-card .card-img-slider,
#order .gift-card .card-txts,
#order .gift-card .card-tab {
    overflow: hidden;
    border-radius: 16px;
}

#order .gift-card .card-img-slider > div img,
#order .gift-card .card-img-slider img {
    display: block;
    width: 100%;
    height: auto;
    border-radius: 16px;
}

#order .gift-card .card-txts {
    margin-top: 10px;
}

#order .gift-card .card-txts textarea {
    width: 100%;
    min-height: 82px;
    margin: 0;
    padding: 12px;
    border: 1px solid var(--order-line);
    border-radius: 12px;
    background: var(--order-control) !important;
    color: var(--order-ink) !important;
    resize: vertical;
}

#order .gift-card .card-tab {
    margin-top: 10px;
}

#order .gift-card .card-tab .card-thumb a {
    display: block;
    overflow: hidden;
    border: 2px solid var(--order-line) !important;
    border-radius: 10px;
}

#order .gift-card .card-tab .card-thumb a.active {
    border-color: var(--order-accent) !important;
}

#order .gift-card .card-tab .card-thumb a span,
#order .gift-card .card-tab .card-thumb a span img {
    display: block;
    width: 100%;
    height: auto;
}

#order .gift-info {
    margin: 0;
    padding: 4px 18px 18px;
    color: var(--order-muted);
    font-size: 11px;
}

#order .gift-info li {
    margin-top: 5px;
    padding-left: 0;
    text-indent: 0;
    list-style: none;
}

#order .gift-info li:first-child strong {
    color: var(--order-accent);
}

/* -------------------------------------------------------------------------
   06. Inputs and compact utility controls
   ------------------------------------------------------------------------- */

#order input[type="text"],
#order input[type="password"],
#order input[type="email"],
#order input[type="tel"],
#order input[type="number"],
#order input[type="url"],
#order select,
#order textarea {
    min-height: 42px;
    max-width: 100%;
    padding: 9px 11px;
    border: 1px solid var(--order-line-strong) !important;
    border-radius: 10px;
    outline: 0;
    background: var(--order-control) !important;
    color: var(--order-ink) !important;
    line-height: 1.3;
}

#order textarea {
    min-height: 86px;
    resize: vertical;
}

#order input[type="text"]:focus,
#order input[type="password"]:focus,
#order input[type="email"]:focus,
#order input[type="tel"]:focus,
#order input[type="number"]:focus,
#order select:focus,
#order textarea:focus {
    border-color: var(--order-accent) !important;
    box-shadow: 0 0 0 3px var(--order-accent-soft);
}

#order input[type="checkbox"],
#order input[type="radio"] {
    accent-color: var(--order-accent);
}

#order .orderBody table input[name="post1"],
#order .orderBody table input[name="post2"] {
    width: auto !important;
    min-width: 52px;
    min-height: 42px;
}

#order .orderBody table select[name="order_add_info[0]"],
#order .orderBody table textarea[name="order_add_info[0]"],
#order .add-info input[type="text"],
#order .add-info textarea {
    width: 100% !important;
}

#order .orderBody table select[name="time"],
#order .orderBody table select[name="choice_reserve"] {
    width: 100%;
}

#order .btn_Black,
#order .btn_Red,
#order .btn_White,
#order .btn_Grey,
#order .btn_coupon,
#order .btn-type-03,
#order .btn_search_post,
#order .btn-gray,
#order .btn-adr-layer {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 38px;
    padding: 0 12px;
    border: 1px solid var(--order-line-strong);
    border-radius: 10px;
    background: transparent !important;
    color: var(--order-ink) !important;
    font-size: 12px;
    font-weight: 700;
    line-height: 1.2;
    text-align: center;
    box-shadow: none !important;
}

#order .btn_Black,
#order .btn_Red,
#order .btn-type-03.btn-black,
#order .btn_search_post {
    border-color: var(--order-primary);
    background: var(--order-primary) !important;
    color: var(--order-primary-ink) !important;
}

#order .btn_White:hover,
#order .btn_Grey:hover,
#order .btn_coupon:hover,
#order .btn-gray:hover {
    border-color: var(--order-accent);
    color: var(--order-accent) !important;
}

#order .w100,
#order .w120,
#order .w240,
#order .w280 {
    max-width: 100%;
}

#order .reserve-msg,
#order .orderBody td .txt,
#order .orderBody td .opt,
#order .orderBody td .fade {
    color: var(--order-muted);
}

#order .orderBody td .txt em,
#order .orderBody td .fc-red,
#order .fc-red {
    color: var(--order-accent) !important;
}

/* -------------------------------------------------------------------------
   07. Payment method accordion
   ------------------------------------------------------------------------- */

#order .pay-title {
    margin: 24px 3px 10px;
    padding: 0 0 4px;
    border: 0 !important;
    color: var(--order-ink);
    font-size: 17px;
    font-weight: 800;
    letter-spacing: -.04em;
}

#order .pay-title::before {
    display: block;
    margin-bottom: 6px;
    color: var(--order-accent);
    content: "PAYMENT";
    font-size: 10px;
    font-weight: 800;
    letter-spacing: .2em;
}

#order .pay-wrap {
    overflow: hidden;
    border: 1px solid var(--order-line);
    border-radius: 22px;
    background: var(--order-card);
    box-shadow: var(--order-shadow);
}

#order .pay-wrap .pay-box {
    margin: 0;
    padding: 0;
    border: 0 !important;
    border-bottom: 1px solid var(--order-line) !important;
    background: var(--order-card) !important;
    color: var(--order-ink);
    font-family: inherit;
    font-size: 13px;
    letter-spacing: -.02em;
}

#order .pay-wrap .pay-box:last-child {
    border-bottom: 0 !important;
}

#order .pay-wrap .pay-box .pay-tit {
    position: relative;
    display: flex;
    align-items: center;
    min-height: 58px;
    padding: 15px 48px 15px 18px;
    color: var(--order-ink) !important;
    cursor: pointer;
    font-size: 13px;
    font-weight: 750;
}

#order .pay-wrap .pay-box .pay-tit::after {
    position: absolute;
    top: 50%;
    right: 18px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    border: 1px solid var(--order-line-strong);
    border-radius: 50%;
    color: var(--order-muted);
    content: "+";
    font-size: 15px;
    font-weight: 400;
    line-height: 1;
    transform: translateY(-50%);
}

#order .pay-wrap .pay-box.is-open {
    background: var(--order-card) !important;
}

#order .pay-wrap .pay-box.is-open .pay-tit {
    color: var(--order-accent) !important;
}

#order .pay-wrap .pay-box.is-open .pay-tit::after {
    border-color: var(--order-accent);
    color: var(--order-accent);
    content: "−";
}

#order .pay-wrap .pay-box .pay-tit input[type="radio"] {
    flex: 0 0 auto;
    margin: 0 9px 0 0;
}

#order .pay-wrap .pay-box .pay-tit img {
    max-width: 120px;
    max-height: 24px;
    margin-left: 5px;
}

#order .pay-wrap .pay-box .pay-cnts {
    display: none;
    margin: 0 18px 16px;
    padding: 15px;
    border: 1px solid var(--order-line);
    border-radius: 14px;
    background: var(--order-card-soft) !important;
    color: var(--order-muted);
}

#order .pay-wrap .pay-box:first-child .pay-cnts,
#order .pay-wrap .pay-box.is-open .pay-cnts {
    display: block;
}

#order .pay-wrap .pay-box .pay-cnts dl {
    display: grid;
    grid-template-columns: 76px minmax(0, 1fr);
    gap: 10px;
    margin: 0 0 8px;
}

#order .pay-wrap .pay-box .pay-cnts dl dt,
#order .pay-wrap .pay-box .pay-cnts dl dd {
    width: auto;
    margin: 0;
    padding: 0;
}

#order .pay-wrap .pay-box .pay-cnts dl dt {
    color: var(--order-muted);
    font-weight: 650;
}

#order .pay-wrap .pay-box .pay-cnts dl dd {
    min-width: 0;
}

#order .pay-wrap .pay-box .pay-cnts p,
#order .pay-wrap .pay-box .pay-cnts li {
    margin: 5px 0 0;
    color: var(--order-muted);
    line-height: 1.55;
}

#order .pay-wrap .pay-box .pay-cnts p.squ,
#order .pay-wrap .pay-box .pay-cnts li.squ {
    position: relative;
    padding-left: 15px;
}

#order .pay-wrap .pay-box .pay-cnts p.squ::before,
#order .pay-wrap .pay-box .pay-cnts li.squ::before {
    position: absolute;
    top: .68em;
    left: 2px;
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: var(--order-accent);
    content: "";
}

#order .pay-wrap .pay-box .pay-cnts li {
    list-style: none;
}

#order .pay-wrap .pay-box .pay-cnts table {
    width: 100%;
    border: 1px solid var(--order-line);
    border-spacing: 0;
    border-collapse: collapse;
}

#order .pay-wrap .pay-box .pay-cnts table th,
#order .pay-wrap .pay-box .pay-cnts table td {
    padding: 8px;
    border: 1px solid var(--order-line);
    background: transparent !important;
    color: var(--order-muted);
    font-size: 11px;
    text-align: left;
}

#order .pay-wrap .pay-box .pay-cnts table th {
    color: var(--order-ink);
    font-weight: 700;
}

#order .pay-wrap .pay-box input[type="text"],
#order .pay-wrap .pay-box input[type="password"],
#order .pay-wrap .pay-box select {
    min-height: 42px;
    height: 42px;
    border: 1px solid var(--order-line-strong) !important;
    border-radius: 10px;
    background: var(--order-control) !important;
    color: var(--order-ink) !important;
}

#order .pay-wrap .pay-box .pay-cnts .shoppay-msg,
#order .pay-wrap .pay-box .pay-cnts .agree-box {
    border-color: var(--order-line) !important;
    background: transparent !important;
    color: var(--order-muted);
}

#order .pay-wrap .pay-box .pay-cnts .toggle-agree {
    color: var(--order-accent) !important;
}

#order .pay-wrap .fc-red,
#order .pay-wrap .pay-cnts .fc-red {
    color: var(--order-accent) !important;
}

#order .pay-wrap .fc-blue {
    color: #6fa4ff !important;
}

/* Payment logos generated by the platform remain intact; give their cells a
   neutral surface that is readable in both modes. */
#order .pay-info dl dt,
#order .pay-info .settlebank dt,
#order .pay-info .smilepay dt,
#order .pay-info .toss dt,
#order .pay-info .npay dt,
#order .pay-info .chaipay dt,
#order .pay-info .shoppayc dt,
#order .pay-info .shoppayb dt,
#order .pay-info .ssgpay dt,
#order .pay-info .samsungpay dt,
#order .pay-info .da_samsungpay dt,
#order .pay-info .applepay dt,
#order .pay-info .kakao dt,
#order .pay-info .kakaopay dt,
#order .pay-info .payco dt,
#order .pay-info .bank dt,
#order .pay-info .phone dt,
#order .pay-info .card dt,
#order .pay-info .escrow dt,
#order .pay-info .quicktoss dt {
    background-color: var(--order-card-soft) !important;
}

/* -------------------------------------------------------------------------
   08. Evidence, privacy and order agreement
   ------------------------------------------------------------------------- */

#order .pay-info.orderBody {
    margin-top: 18px;
}

#order .pay-info.orderBody table > tbody > tr > td {
    grid-column: 1 / -1;
    padding: 0 !important;
}

#order .pay-info.orderBody table > tbody > tr > td > ul,
#order .pay-info.orderBody table > tbody > tr > td > dl {
    margin: 0;
    padding: 0 18px 18px;
}

#order .pay-info.orderBody table > tbody > tr > td > ul > li {
    margin: 0;
    padding: 12px 0;
    border-bottom: 1px solid var(--order-line);
    list-style: none;
}

#order .pay-info.orderBody table > tbody > tr > td > ul > li + li {
    padding-top: 4px;
    border-bottom: 0;
}

#order .pay-info.orderBody dl {
    display: grid;
    grid-template-columns: minmax(86px, 30%) minmax(0, 1fr);
    min-height: 0;
    margin: 0;
    padding: 10px 0;
    border-bottom: 1px solid var(--order-line);
}

#order .pay-info.orderBody dl dt,
#order .pay-info.orderBody dl dd {
    position: static;
    width: auto;
    height: auto;
    min-width: 0;
    margin: 0;
    padding: 0;
    background: transparent !important;
    color: var(--order-muted);
    text-align: left;
}

#order .pay-info.orderBody dl dt {
    font-weight: 650;
}

#order .pay-info.orderBody dl dd {
    color: var(--order-ink);
    overflow-wrap: anywhere;
}

#order .pay-info.orderBody li,
#order .pay-info.orderBody dd {
    color: var(--order-muted);
}

#order .pay-info.orderBody li[style] {
    border-bottom: 1px solid var(--order-line) !important;
    background: var(--order-card) !important;
}

#order #join.wrapper {
    overflow: hidden;
    margin: 0 0 18px;
    border: 1px solid var(--order-line);
    border-radius: 22px;
    background: var(--order-card);
    box-shadow: var(--order-shadow);
}

#order #join .new-tit {
    margin: 0;
    padding: 18px;
    border: 0;
    border-bottom: 1px solid var(--order-line);
    background: var(--order-card-soft);
    color: var(--order-ink);
    font-size: 14px;
    font-weight: 800;
}

#order #join .hd {
    position: relative;
    min-height: 52px;
    border-bottom: 1px solid var(--order-line);
}

#order #join .hd h5 {
    min-height: 52px;
    margin: 0;
    padding: 15px 84px 15px 18px;
    border: 0;
    background: transparent;
    color: var(--order-ink);
    font-size: 13px;
    font-weight: 750;
    line-height: 1.4;
    text-indent: 0;
}

#order #join .hd h5::before {
    position: static;
    display: inline-block;
    width: 6px;
    height: 6px;
    margin: 0 8px 2px 0;
    border-radius: 50%;
    background: var(--order-accent);
    content: "";
}

#order #join .hd a.open-pop {
    position: absolute;
    top: 50%;
    right: 16px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 27px;
    margin: 0;
    padding: 0 9px;
    border: 1px solid var(--order-line-strong);
    border-radius: 99px;
    background: transparent;
    color: var(--order-ink);
    font-size: 10px;
    transform: translateY(-50%);
}

#order #join .cont {
    margin: 0;
    padding: 14px 18px 18px;
}

#order #join .cont .terms,
#order #join .tab-content.terms {
    max-height: 165px;
    overflow: auto;
    margin: 0;
    padding: 14px;
    border: 1px solid var(--order-line);
    border-radius: 12px;
    background: var(--order-card-soft) !important;
    color: var(--order-muted);
    font-size: 11px;
    line-height: 1.7;
}

#order #join .cont .terms::-webkit-scrollbar {
    width: 4px;
}

#order #join .cont .terms::-webkit-scrollbar-thumb {
    border-radius: 99px;
    background: var(--order-line-strong);
}

#order #join .privercy-contract-tap {
    overflow: hidden;
    border: 1px solid var(--order-line);
    border-bottom: 0;
    border-radius: 12px 12px 0 0;
}

#order #join .privercy-contract-tap ul {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    margin: 0;
    padding: 0;
}

#order #join .privercy-contract-tap li,
#order #join .privercy-contract-tap li:last-child {
    width: auto;
    height: auto;
    margin: 0;
    border: 0;
    border-right: 1px solid var(--order-line);
    background: var(--order-card-soft);
    line-height: 1.25;
}

#order #join .privercy-contract-tap li:last-child {
    border-right: 0;
}

#order #join .privercy-contract-tap li.sel {
    background: var(--order-card);
}

#order #join .privercy-contract-tap li a {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 42px;
    padding: 6px;
    color: var(--order-muted);
    font-size: 10px;
    text-align: center;
}

#order #join .privercy-contract-tap li.sel a {
    color: var(--order-ink);
    font-weight: 750;
}

#order #join .tab-content {
    height: auto;
    border: 1px solid var(--order-line);
    border-radius: 0 0 12px 12px;
}

#order #join .tab-content .privercy-contract {
    margin: 0;
    padding: 0;
}

#order #join .tab-content .privercy-contract p {
    width: auto;
    height: auto;
    margin: 0;
    padding: 0;
    color: var(--order-muted);
    font-size: 11px;
    line-height: 1.7;
}

#order .before_pay,
#order .order-agree__all,
#order .order-agree__each {
    color: var(--order-muted);
    font-size: 12px;
}

#order .before_pay {
    padding: 0 0 12px;
    border-bottom: 1px solid var(--order-line);
}

#order .order-agree__all {
    padding: 14px 0 10px;
    color: var(--order-ink);
    font-weight: 750;
}

#order .order-agree__each {
    padding: 0;
    line-height: 2;
}

#order .order-agree__each a,
#order #join .bold {
    color: var(--order-accent) !important;
    text-underline-offset: 2px;
}

/* -------------------------------------------------------------------------
   09. Final amount and safe payment action
   ------------------------------------------------------------------------- */

#order .price-total-info-bottom {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 5px 12px;
    align-items: end;
    margin: 22px 0 12px;
    padding: 20px 18px;
    border: 1px solid var(--order-line);
    border-radius: 20px;
    background: var(--order-card);
    color: var(--order-muted);
    box-shadow: var(--order-shadow);
    font-size: 12px;
    font-weight: 650;
}

#order .price-total-info-bottom::before {
    display: block;
    grid-column: 1 / -1;
    margin-bottom: 2px;
    color: var(--order-accent);
    content: "TOTAL";
    font-size: 10px;
    font-weight: 800;
    letter-spacing: .2em;
}

#order .price-total-info-bottom .txt-price {
    color: var(--order-accent) !important;
    font-size: clamp(25px, 6vw, 34px);
    font-weight: 800;
    letter-spacing: -.06em;
    line-height: 1;
    text-align: right;
}

#order .price-total-info-bottom .txt-reserve {
    grid-column: 1 / -1;
    color: var(--order-muted) !important;
    font-size: 11px;
    font-weight: 500;
    text-align: right;
}

#order .price-total-info-bottom .reserve-msg {
    grid-column: 1 / -1;
    padding-top: 5px;
    border-top: 1px solid var(--order-line);
    font-size: 10px;
    text-align: right;
}

#order .btn_next {
    display: grid;
    grid-template-columns: minmax(0, 1.7fr) minmax(86px, .7fr);
    gap: 9px;
    margin: 0;
    padding: 0;
}

#order .btn_next a {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 52px;
    margin: 0;
    border: 1px solid var(--order-line-strong);
    border-radius: 14px;
    font-size: 14px;
    font-weight: 800;
}

#order .btn_next .btn_Red,
#order .btn_next .btn_Black {
    border-color: var(--order-primary) !important;
    background: var(--order-primary) !important;
    color: var(--order-primary-ink) !important;
}

#order .btn_next .btn_White {
    background: var(--order-card) !important;
    color: var(--order-ink) !important;
}

/* -------------------------------------------------------------------------
   10. Order popups and address layers
   ------------------------------------------------------------------------- */

#contents:has(#order) .layer,
#contents:has(#order) #block_mobile_area {
    position: fixed;
    z-index: 1000;
    inset: 0;
    width: 100%;
    min-height: 100vh;
    padding: 20px 14px;
    background: rgba(18, 12, 15, .66);
}

#contents:has(#order) .layer .layer-pop,
#contents:has(#order) #block_mobile_area #block_mobile_area_list {
    position: relative;
    width: min(100%, 520px);
    max-height: calc(100vh - 40px);
    margin: 20px auto;
    overflow: auto;
    border: 1px solid rgba(255, 255, 255, .42);
    border-radius: 24px;
    background: var(--order-card, #fff) !important;
    color: var(--order-ink, #251a20);
    box-shadow: 0 24px 70px rgba(0, 0, 0, .24);
}

#contents:has(#order) .layer .layer-pop h3 {
    margin: 0;
    padding: 20px 48px 16px 20px;
    border-bottom: 1px solid var(--order-line, rgba(37, 26, 32, .12));
    color: var(--order-ink, #251a20);
    font-size: 17px;
    font-weight: 800;
}

#contents:has(#order) .layer .layer-pop .close,
#contents:has(#order) #block_mobile_area_list .btn-close {
    position: absolute;
    z-index: 2;
    top: 16px;
    right: 16px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    margin: 0;
    border: 1px solid var(--order-line-strong, rgba(37, 26, 32, .24));
    border-radius: 50%;
    background: transparent !important;
    color: var(--order-ink, #251a20) !important;
    font-size: 0;
    text-indent: 0;
}

#contents:has(#order) .layer .layer-pop .close::before,
#contents:has(#order) #block_mobile_area_list .btn-close::before {
    content: "×";
    font-size: 20px;
    line-height: 1;
}

#contents:has(#order) .layer .layer-pop .txt,
#contents:has(#order) .layer .layer-pop > div:not(.close) {
    color: var(--order-muted, #8c7e83);
}

#contents:has(#order) #coupon table,
#contents:has(#order) #addrSearch table,
#contents:has(#order) #delivery-area table {
    width: calc(100% - 36px);
    margin: 18px;
    border: 1px solid var(--order-line, rgba(37, 26, 32, .12));
    border-spacing: 0;
    border-collapse: collapse;
    color: var(--order-ink, #251a20);
}

#contents:has(#order) #coupon thead,
#contents:has(#order) #addrSearch thead,
#contents:has(#order) #delivery-area thead {
    background: var(--order-card-soft, #fbf8f6) !important;
    color: var(--order-ink, #251a20);
}

#contents:has(#order) #coupon th,
#contents:has(#order) #coupon td,
#contents:has(#order) #addrSearch th,
#contents:has(#order) #addrSearch td,
#contents:has(#order) #delivery-area th,
#contents:has(#order) #delivery-area td {
    padding: 10px;
    border: 1px solid var(--order-line, rgba(37, 26, 32, .12));
    background: transparent !important;
    color: var(--order-ink, #251a20);
}

#contents:has(#order) #coupon .item,
#contents:has(#order) #coupon .paysum,
#contents:has(#order) #coupon .selection,
#contents:has(#order) #addrSearch .msg-wrap,
#contents:has(#order) #delivery-area .msg-wrap {
    margin: 14px 18px;
    border-color: var(--order-line, rgba(37, 26, 32, .12));
    border-radius: 12px;
    background: var(--order-card-soft, #fbf8f6) !important;
    color: var(--order-muted, #8c7e83);
}

#contents:has(#order) #coupon .btn_Black,
#contents:has(#order) #coupon .btn_White,
#contents:has(#order) #addrSearch .btn_Black,
#contents:has(#order) #addrSearch .btn_Grey,
#contents:has(#order) #delivery-area .btn_Black,
#contents:has(#order) #delivery-area .btn_Grey {
    min-height: 42px;
    margin: 10px 18px;
    border-radius: 12px;
}

#contents:has(#order) #block_mobile_area_list .tab_ul {
    padding: 18px 18px 0;
}

#contents:has(#order) #block_mobile_area_list .block_list {
    padding: 0 18px;
}

#contents:has(#order) #block_mobile_area_list .block_list li {
    margin: 10px 0;
    padding: 14px;
    border: 1px solid var(--order-line, rgba(37, 26, 32, .12));
    border-radius: 14px;
    background: var(--order-card-soft, #fbf8f6);
}

html.succubus-preload-night #contents:has(#order) .layer .layer-pop,
html.succubus-night #contents:has(#order) .layer .layer-pop,
body.succubus-night #contents:has(#order) .layer .layer-pop,
html.succubus-preload-night #contents:has(#order) #block_mobile_area_list,
html.succubus-night #contents:has(#order) #block_mobile_area_list,
body.succubus-night #contents:has(#order) #block_mobile_area_list {
    background: #111111 !important;
    color: #fff7f3;
}

/* -------------------------------------------------------------------------
   11. Responsive refinements
   ------------------------------------------------------------------------- */

@media screen and (max-width: 359px) {
    #order {
        padding-right: 12px;
        padding-left: 12px;
    }

    #order .prd_order li,
    #order .couponBody {
        padding-right: 14px;
        padding-left: 14px;
    }

    #order figure {
        grid-template-columns: 78px minmax(0, 1fr);
        gap: 10px;
    }

    #order .basketLeft {
        width: 78px !important;
        height: 78px !important;
        border-radius: 14px;
    }

    #order .orderBody table > tbody > tr {
        grid-template-columns: minmax(78px, 31%) minmax(0, 1fr);
    }

    #order .orderBody table > tbody > tr > th {
        padding-left: 14px;
    }

    #order .orderBody table > tbody > tr > td,
    #order .orderBody table > tbody > tr > td[colspan="2"] {
        padding-right: 14px;
    }

    #order .pay-wrap .pay-box .pay-tit {
        padding-left: 14px;
    }

    #order .pay-wrap .pay-box .pay-cnts {
        margin-right: 14px;
        margin-left: 14px;
    }
}

@media screen and (min-width: 640px) {
    #order {
        padding: 42px 24px 180px;
    }

    #order .prd_order li {
        padding: 20px 22px;
    }

    #order figure {
        grid-template-columns: 118px minmax(0, 1fr);
        gap: 18px;
    }

    #order .basketLeft {
        width: 118px !important;
        height: 118px !important;
        border-radius: 20px;
    }

    #order .basketRight div.pname {
        font-size: 16px;
    }

    #order .orderBody table > tbody > tr {
        grid-template-columns: 180px minmax(0, 1fr);
    }

    #order .orderBody table > tbody > tr > th {
        padding-left: 22px;
        font-size: 13px;
    }

    #order .orderBody table > tbody > tr > td,
    #order .orderBody table > tbody > tr > td[colspan="2"] {
        padding-right: 22px;
    }

    #order .orderBody table > thead {
        padding-right: 22px;
        padding-left: 22px;
    }

    #order .gift-info {
        padding-right: 22px;
        padding-left: 22px;
    }
}

/* -------------------------------------------------------------------------
   12. SUCCUBUS cart page
   The basket page uses the same visual system as Account and Saved. The
   Makeshop data/form hooks remain in the HTML; this layer owns the canvas.
   ------------------------------------------------------------------------- */

#contents:has(> #basket),
#container:has(#basket) {
    background: #fff !important;
}

#basket {
    --basket-bg: #fff;
    --basket-surface: #f7f4f4;
    --basket-card: #fff;
    --basket-ink: #171317;
    --basket-muted: #8d858a;
    --basket-line: rgba(23, 19, 23, .14);
    --basket-pink: #f24770;
    width: 100%;
    max-width: 720px;
    min-height: calc(100vh - var(--store-header-height, 70px));
    margin: 0 auto;
    padding: 24px 16px calc(132px + env(safe-area-inset-bottom, 0px));
    background: var(--basket-bg);
    color: var(--basket-ink);
    font-family: 'Noto Sans KR', 'Apple SD Gothic Neo', Arial, sans-serif;
    -webkit-font-smoothing: antialiased;
}

#basket,
#basket *,
#basket *::before,
#basket *::after { box-sizing: border-box; }
#basket a { color: inherit; text-decoration: none; }
#basket ul,
#basket p,
#basket h1 { margin: 0; padding: 0; }
#basket ul { list-style: none; }
#basket img { max-width: 100%; }

#basket .basket-head {
    padding: 4px 0 20px;
    border-bottom: 1px solid var(--basket-line);
}

#basket .basket-head__eyebrow,
#basket .basket-tool,
#basket .basket-select-all,
#basket .basket-summary__line,
#basket .basket-summary__reserve,
#basket .order-btn,
#basket .cart-tabs {
    font-family: 'Jost', 'Noto Sans KR', Arial, sans-serif;
    letter-spacing: .12em;
}

#basket .basket-head__eyebrow {
    color: var(--basket-muted);
    font-size: 10px;
    font-weight: 600;
    letter-spacing: .18em;
}

#basket .basket-head h1 {
    margin-top: 9px;
    font-family: Georgia, 'Times New Roman', serif;
    font-size: clamp(28px, 7vw, 40px);
    font-weight: 400;
    letter-spacing: .03em;
    line-height: 1;
}

#basket .basket-head h1 span { color: var(--basket-pink); font-family: 'Jost', sans-serif; font-size: .5em; vertical-align: middle; }
#basket .basket-head > p:last-child { margin-top: 12px; color: var(--basket-muted); font-family: Georgia, serif; font-size: 14px; font-style: italic; }

#basket .cart-tabs { display: flex; gap: 8px; margin-bottom: 22px; }
#basket .cart-tabs a { display: flex; min-height: 42px; flex: 1; align-items: center; justify-content: center; border: 1px solid var(--basket-line); border-radius: 999px; color: var(--basket-muted); font-size: 10px; font-weight: 600; }
#basket .cart-tabs a span { margin-left: 5px; color: var(--basket-pink); }
#basket .cart-tabs a.is-active { border-color: var(--basket-ink); background: var(--basket-ink); color: var(--basket-bg); }

#basket .basket-tools { display: flex; justify-content: flex-end; gap: 8px; margin: 18px 0 10px; }
#basket .basket-tool { display: inline-flex; min-height: 30px; align-items: center; padding: 0 12px; border: 1px solid var(--basket-line); border-radius: 999px; color: var(--basket-muted); font-size: 9px; letter-spacing: .04em; }
#basket .basket-tool:hover { border-color: var(--basket-pink); color: var(--basket-pink); }
#basket .basket-select-all { display: flex; min-height: 44px; align-items: center; gap: 8px; padding: 0 4px; color: var(--basket-ink); font-size: 11px; font-weight: 600; letter-spacing: .02em; }
#basket .basket-select-all input { accent-color: var(--basket-pink); }

#basket .basket-products { display: grid; gap: 10px; margin: 0; padding: 0; }
#basket .basket-product { overflow: hidden; border: 1px solid var(--basket-line); border-radius: 22px; background: var(--basket-card); }
#basket .basket-product > form { display: block; }
#basket .basket-product figure { display: grid; grid-template-columns: 94px minmax(0, 1fr); gap: 14px; margin: 0; padding: 16px; }
#basket .basket-product__image { position: relative; width: 94px; height: 94px; overflow: hidden; border-radius: 16px; background: var(--basket-surface); }
#basket .basket-product__image > a { display: block; width: 100%; height: 100%; }
#basket .basket-product__image img { display: block; width: 100%; height: 100%; object-fit: cover; }
#basket .basket-product__image input { position: absolute; z-index: 2; top: 8px; left: 8px; accent-color: var(--basket-pink); }
#basket .basket-product__details { min-width: 0; padding: 0 !important; color: var(--basket-muted); font-size: 11px; }
#basket .basket-product__title { display: flex; min-width: 0; align-items: flex-start; justify-content: space-between; gap: 8px; padding-bottom: 8px; border-bottom: 1px solid var(--basket-line); }
#basket .basket-product__title > a:first-child { min-width: 0; flex: 1 1 auto; overflow: visible; color: var(--basket-ink); font-size: 13px; font-weight: 600; line-height: 1.45; overflow-wrap: anywhere; white-space: normal; word-break: break-word; }
#basket .basket-product__remove { display: grid; width: 26px; height: 26px; flex: 0 0 26px; place-items: center; border: 1px solid var(--basket-line); border-radius: 50%; color: var(--basket-ink); font-family: Arial, sans-serif; font-size: 21px; line-height: 1; }
#basket .basket-product__facts { display: grid; gap: 3px; margin-top: 9px; }
#basket .basket-product__facts p { color: var(--basket-muted); line-height: 1.35; }
#basket .basket-product__facts strong { color: var(--basket-ink); font-weight: 600; }
#basket .basket-product__reserve { color: var(--basket-pink) !important; }
#basket .basket-product__quantity { display: flex; min-height: 32px; align-items: center; gap: 5px; margin-top: 10px; }
#basket .basket-product__quantity > span { margin-right: 2px; color: var(--basket-muted); font-size: 10px; }
#basket .basket-product__quantity .amount-input { width: 42px; min-width: 42px; height: 32px; padding: 0; border: 1px solid var(--basket-line); border-radius: 9px; background: var(--basket-bg); color: var(--basket-ink); text-align: center; }
#basket .quantity-button { display: grid; width: 32px; height: 32px; place-items: center; border: 1px solid var(--basket-line); border-radius: 9px; background: var(--basket-surface); font-size: 19px; line-height: 1; }
#basket .basket-product__option { margin-top: 9px !important; color: var(--basket-muted); font-size: 10px; line-height: 1.45; }
#basket .basket-product__details .btn_Black { display: none !important; }

#basket .basket-empty { display: flex; min-height: 250px; flex-direction: column; align-items: center; justify-content: center; border: 1px dashed var(--basket-line); border-radius: 24px; text-align: center; }
#basket .basket-empty > span { color: var(--basket-pink); font-family: Arial, sans-serif; font-size: 52px; line-height: 1; }
#basket .basket-empty strong { margin-top: 16px; font-size: 14px; font-weight: 500; }
#basket .basket-empty p { margin-top: 8px; color: var(--basket-muted); font-family: Georgia, serif; font-size: 13px; font-style: italic; }

#basket .basket-summary { margin-top: 18px; padding: 18px; border: 1px solid var(--basket-line); border-radius: 22px; background: var(--basket-surface); }
#basket .basket-summary__line { display: flex; justify-content: space-between; gap: 14px; min-height: 24px; color: var(--basket-muted); font-size: 10px; letter-spacing: .03em; }
#basket .basket-summary__line strong { color: var(--basket-ink); font-weight: 500; }
#basket .basket-summary__line--discount strong { color: var(--basket-pink); }
#basket .basket-summary__total { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-top: 12px; padding-top: 15px; border-top: 1px solid var(--basket-line); font-size: 12px; font-weight: 600; }
#basket .basket-summary__total .txt-price { color: var(--basket-pink); font-size: clamp(24px, 7vw, 34px); font-weight: 700; letter-spacing: -.06em; }
#basket .basket-summary__reserve { margin-top: 6px; color: var(--basket-muted); font-size: 10px; text-align: right; letter-spacing: .02em; }

#basket .delivery-note { margin: 18px 0; padding: 15px 4px 0; color: var(--basket-muted); font-size: 11px; line-height: 1.7; }
#basket .delivery-note strong { color: var(--basket-ink); font-weight: 600; }
#basket .cart-free-wrap { margin: 18px 0; padding: 16px; border: 1px solid var(--basket-line); border-radius: 20px; background: var(--basket-surface); text-align: center; }
#basket .cart-free-wrap p { color: var(--basket-muted); font-size: 11px; }
#basket .cart-free-wrap p span { color: var(--basket-pink); font-weight: 600; }
#basket .cart-free-wrap .btn-list-open { display: inline-flex; min-height: 32px; align-items: center; margin-top: 10px; padding: 0 13px; border: 1px solid var(--basket-line); border-radius: 999px; font-size: 9px; }
#basket .cart-free-wrap .list-wrap { display: none; margin-top: 14px; }
#basket .cart-free-wrap .list-wrap ul { display: flex; gap: 8px; overflow-x: auto; }
#basket .cart-free-wrap .list-wrap li { min-width: 74px; }
#basket .cart-free-wrap .list-wrap img { display: block; width: 74px; height: 74px; border-radius: 12px; object-fit: cover; }
#basket .cart-free-wrap .list-wrap span,
#basket .cart-free-wrap .list-wrap strong { display: block; overflow: hidden; margin-top: 4px; font-size: 9px; text-overflow: ellipsis; white-space: nowrap; }

#basket .order-btn { display: grid; grid-template-columns: minmax(0, 1fr); gap: 8px; margin: 20px 0 0; padding: 0; }
#basket .order-btn.use-gift.qorder-none { grid-template-columns: 48px minmax(0, 1fr); }
#basket .order-btn.use-gift.use-qorder { grid-template-columns: 48px minmax(0, 1fr) minmax(0, 1fr); }
#basket .order-btn.gift-none.use-qorder { grid-template-columns: repeat(2, minmax(0, 1fr)); }
#basket .order-btn > a { display: flex; min-height: 52px; align-items: center; justify-content: center; border: 1px solid var(--basket-line); border-radius: 18px; }
#basket .order-btn > a.btn_Present { color: var(--basket-pink); font-family: Arial, sans-serif; font-size: 25px; }
#basket .order-btn > a.order-submit-image { overflow: hidden; border: 0; background: transparent; }
#basket .order-btn > a.order-submit-image img { display: block; width: 100%; height: auto; max-height: 130px; object-fit: contain; }
#basket .cart-ft2 { margin-top: 18px; text-align: center; }

/* Quick-pay layer follows the cart/account language too; native payment
   fields stay untouched, only the presentation is rounded and themed. */
#basket #quick-swipepay .layer { position: fixed; z-index: 2000; inset: 0; background: rgba(20, 13, 18, .36); }
#basket #quick-swipepay .layer-wrap { position: absolute; right: 0; bottom: 0; left: 0; max-width: 520px; margin: 0 auto; padding: 14px 16px 20px; border: 1px solid var(--basket-line); border-bottom: 0; border-radius: 28px 28px 0 0; background: var(--basket-card); color: var(--basket-ink); box-shadow: 0 -18px 44px rgba(0, 0, 0, .18); }
#basket #quick-swipepay .swipepay-close { position: absolute; top: -42px; left: 50%; width: 38px; height: 38px; transform: translateX(-50%); border: 1px solid rgba(255,255,255,.65); border-radius: 50%; background: var(--basket-card); color: var(--basket-ink); font-size: 17px; }
#basket #quick-swipepay .swipepay-addr { padding: 0 14px; border: 1px solid var(--basket-line); border-radius: 20px; background: var(--basket-surface); }
#basket #quick-swipepay .addr-lst { padding: 13px 0; border-top: 1px solid var(--basket-line); }
#basket #quick-swipepay .addr-lst:first-child { border-top: 0; }
#basket #quick-swipepay .addr-prd { display: flex; align-items: center; gap: 7px; position: relative; min-width: 0; white-space: nowrap; }
#basket #quick-swipepay .prd-tit { flex: 0 0 auto; color: var(--basket-ink); font-size: 12px; font-weight: 600; }
#basket #quick-swipepay .prd-name { overflow: hidden; color: var(--basket-muted); font-size: 10px; text-overflow: ellipsis; white-space: nowrap; }
#basket #quick-swipepay .addr-edit { display: inline-flex; min-width: 40px; min-height: 24px; align-items: center; justify-content: center; margin-left: auto; border: 1px solid var(--basket-line); border-radius: 999px; color: var(--basket-muted); font-size: 9px; }
#basket #quick-swipepay .addr-opt { margin: 6px 0 0; color: var(--basket-muted); font-size: 10px; line-height: 1.5; }
#basket #quick-swipepay .swipepay-agree { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin: 12px 2px 0; color: var(--basket-muted); font-size: 10px; }
#basket #quick-swipepay .swipepay-agree input { accent-color: var(--basket-pink); }
#basket #quick-swipepay .view-terms { padding: 0; border: 0; background: transparent; color: var(--basket-muted); font-size: 10px; text-decoration: underline; }
#basket #quick-swipepay .layer-terms { position: absolute; right: 16px; bottom: 94px; left: 16px; padding: 18px; border: 1px solid var(--basket-line); border-radius: 20px; background: var(--basket-card); box-shadow: 0 12px 30px rgba(0,0,0,.22); }
#basket #quick-swipepay .terms-close { position: absolute; top: 10px; right: 10px; border: 0; background: transparent; color: var(--basket-ink); }
#basket #quick-swipepay .terms-tit { margin-bottom: 10px; font-size: 12px; font-weight: 600; }
#basket #quick-swipepay .layer-terms table { width: 100%; border-collapse: collapse; font-size: 9px; }
#basket #quick-swipepay .layer-terms th,
#basket #quick-swipepay .layer-terms td { padding: 6px; border: 1px solid var(--basket-line); color: var(--basket-muted); }
#basket #quick-swipepay .swipepay-total { display: flex; align-items: baseline; justify-content: space-between; padding: 15px 2px 12px; font-size: 11px; }
#basket #quick-swipepay .total-price strong { color: var(--basket-pink); font-size: 21px; }
#basket #quick-swipepay .swipepay-wide { position: relative; height: 54px; overflow: hidden; border-radius: 999px; background: linear-gradient(100deg, var(--basket-pink), #d94a78); color: #fff; font-size: 12px; font-weight: 600; }
#basket #quick-swipepay .swipepay-text { position: absolute; inset: 0; display: grid; place-items: center; pointer-events: none; }
#basket #quick-swipepay .swipepay-completed { position: absolute; inset: 0; opacity: 0; border-radius: inherit; background: #8d3159; pointer-events: none; }
#basket #quick-swipepay .swipepay-slider { display: grid; width: 54px; height: 54px; place-items: center; border-radius: 50%; background: rgba(255,255,255,.24); color: #fff; font-size: 20px; }
#basket #quick-swipepay .swipepay-order { padding-top: 9px; text-align: center; }
#basket #quick-swipepay .swipepay-order a { color: var(--basket-muted); font-size: 10px; }

html.succubus-preload-night #contents:has(> #basket),
html.succubus-night #contents:has(> #basket),
body.succubus-night #contents:has(> #basket),
html.succubus-preload-night #container:has(#basket),
html.succubus-night #container:has(#basket),
body.succubus-night #container:has(#basket) { background: #000 !important; }

html.succubus-preload-night #basket,
html.succubus-night #basket,
body.succubus-night #basket {
    --basket-bg: #000;
    --basket-surface: #111;
    --basket-card: #0b0b0b;
    --basket-ink: #fff;
    --basket-muted: #aaa;
    --basket-line: rgba(255, 255, 255, .2);
    --basket-pink: #ff7094;
}

@media screen and (max-width: 359px) {
    #basket { padding-right: 12px; padding-left: 12px; }
    #basket .basket-product figure { grid-template-columns: 78px minmax(0, 1fr); gap: 10px; padding: 14px; }
    #basket .basket-product__image { width: 78px; height: 78px; border-radius: 14px; }
}

@media screen and (min-width: 540px) {
    #basket { padding-right: 24px; padding-left: 24px; }
}

/* 2026-09-15 image-only NIGHT contract for checkout and cart, including
 * cart quick-pay sheets. Keep Makeshop form/payment hooks unchanged. */
html.succubus-preload-night #contents:has(> #order),
html.succubus-night #contents:has(> #order),
body.succubus-night #contents:has(> #order),
html.succubus-preload-night #container:has(#order),
html.succubus-night #container:has(#order),
body.succubus-night #container:has(#order),
html.succubus-preload-night #order,
html.succubus-night #order,
body.succubus-night #order {
    --order-page-bg: #f7f4f2 !important;
    --order-card: #fff !important;
    --order-card-soft: #fbf8f6 !important;
    --order-ink: #251a20 !important;
    --order-muted: #8c7e83 !important;
    --order-faint: #b7a9ae !important;
    --order-line: rgba(37, 26, 32, .12) !important;
    --order-line-strong: rgba(37, 26, 32, .24) !important;
    --order-accent: #d84d73 !important;
    --order-accent-soft: #fae8ee !important;
    --order-success: #328b62 !important;
    --order-primary: #251a20 !important;
    --order-primary-ink: #fff !important;
    --order-control: #fff !important;
    --order-shadow: 0 14px 32px rgba(54, 35, 43, .07) !important;
    background: #f7f4f2 !important;
    color: #251a20 !important;
}

html.succubus-preload-night #contents:has(> #basket),
html.succubus-night #contents:has(> #basket),
body.succubus-night #contents:has(> #basket),
html.succubus-preload-night #container:has(#basket),
html.succubus-night #container:has(#basket),
body.succubus-night #container:has(#basket),
html.succubus-preload-night #basket,
html.succubus-night #basket,
body.succubus-night #basket {
    --basket-bg: #fff !important;
    --basket-surface: #f6f6f6 !important;
    --basket-card: #fff !important;
    --basket-ink: #111 !important;
    --basket-muted: #777 !important;
    --basket-faint: #b7b7b7 !important;
    --basket-line: rgba(17, 17, 17, .14) !important;
    --basket-line-strong: rgba(17, 17, 17, .25) !important;
    --basket-pink: #f24770 !important;
    background: #fff !important;
    background-color: #fff !important;
    color: #111 !important;
}

html.succubus-preload-night #contents:has(#order) .layer .layer-pop,
html.succubus-night #contents:has(#order) .layer .layer-pop,
body.succubus-night #contents:has(#order) .layer .layer-pop,
html.succubus-preload-night #contents:has(#order) #block_mobile_area_list,
html.succubus-night #contents:has(#order) #block_mobile_area_list,
body.succubus-night #contents:has(#order) #block_mobile_area_list {
    background: #fff !important;
    color: #251a20 !important;
}

/* -------------------------------------------------------------------------
   04. Basket skin alignment

   Keep the Makeshop basket markup and form/AJAX hooks above intact.  This
   final layer brings the cart onto the same white canvas, type rhythm,
   spacing and rounded-card language used by Saved and Account.
   ------------------------------------------------------------------------- */

#contents:has(> #basket),
#container:has(> #contents > #basket),
#container:has(#basket) {
    background: #fff !important;
}

#basket {
    --basket-bg: #fff;
    --basket-surface: #f6f6f6;
    --basket-card: #fff;
    --basket-ink: #111;
    --basket-muted: #777;
    --basket-faint: #b7b7b7;
    --basket-line: rgba(17, 17, 17, .14);
    --basket-line-strong: rgba(17, 17, 17, .25);
    --basket-pink: #f24770;
    width: 100%;
    max-width: 720px;
    min-height: calc(100vh - var(--store-header-height, 70px));
    margin: 0 auto;
    padding: 24px 16px calc(126px + env(safe-area-inset-bottom, 0px));
    background: var(--basket-bg) !important;
    color: var(--basket-ink);
    font-family: 'Noto Sans KR', 'Apple SD Gothic Neo', Arial, sans-serif;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

#basket .basket-head {
    padding: 4px 0 22px;
    border-bottom: 1px solid var(--basket-line);
}

#basket .basket-head__eyebrow {
    color: var(--basket-muted);
    font-family: 'Jost', 'Noto Sans KR', Arial, sans-serif;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .18em;
    line-height: 1.2;
}

#basket .basket-head h1 {
    margin-top: 9px;
    color: var(--basket-ink);
    font-family: Georgia, 'Times New Roman', serif;
    font-size: clamp(28px, 7vw, 40px);
    font-weight: 400;
    letter-spacing: .04em;
    line-height: 1;
}

#basket .basket-head h1 span {
    color: var(--basket-pink);
    font-family: 'Jost', 'Noto Sans KR', Arial, sans-serif;
    font-size: .5em;
    font-weight: 500;
    letter-spacing: .08em;
    vertical-align: middle;
}

#basket .basket-head > p:last-child {
    margin-top: 12px;
    color: var(--basket-muted);
    font-family: Georgia, 'Times New Roman', serif;
    font-size: 14px;
    font-style: italic;
    line-height: 1.5;
}

#basket .basket-tools {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    margin: 18px 0 10px;
}

#basket .basket-tool {
    min-height: 30px;
    padding: 0 12px;
    border: 1px solid var(--basket-line);
    border-radius: 999px;
    color: var(--basket-muted);
    font-family: 'Jost', 'Noto Sans KR', Arial, sans-serif;
    font-size: 9px;
    letter-spacing: .04em;
}

#basket .basket-select-all {
    min-height: 44px;
    padding: 0 4px;
    color: var(--basket-ink);
    font-family: 'Jost', 'Noto Sans KR', Arial, sans-serif;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .02em;
}

#basket .basket-select-all input,
#basket .basket-product__image input {
    accent-color: var(--basket-pink);
}

#basket .basket-products {
    display: grid;
    gap: 12px;
    margin: 0;
    padding: 0;
}

#basket .basket-product {
    overflow: hidden;
    border: 1px solid var(--basket-line);
    border-radius: 16px;
    background: var(--basket-card);
    box-shadow: none;
}

#basket .basket-product figure {
    display: grid;
    grid-template-columns: 92px minmax(0, 1fr);
    gap: 14px;
    margin: 0;
    padding: 14px;
}

#basket .basket-product__image {
    width: 92px;
    height: 92px;
    border-radius: 12px;
    background: var(--basket-surface);
}

#basket .basket-product__details {
    min-width: 0;
    color: var(--basket-muted);
}

#basket .basket-product__title {
    gap: 8px;
    padding-bottom: 8px;
    border-bottom: 1px solid var(--basket-line);
}

#basket .basket-product__title > a:first-child {
    min-width: 0;
    color: var(--basket-ink);
    font-size: 13px;
    font-weight: 600;
    line-height: 1.45;
    overflow-wrap: anywhere;
}

#basket .basket-product__remove {
    width: 26px;
    height: 26px;
    flex-basis: 26px;
    border: 1px solid var(--basket-line);
    color: var(--basket-ink);
    font-size: 20px;
}

#basket .basket-product__facts {
    gap: 3px;
    margin-top: 9px;
}

#basket .basket-product__facts p {
    color: var(--basket-muted);
    line-height: 1.35;
}

#basket .basket-product__facts strong {
    color: var(--basket-ink);
    font-weight: 600;
}

#basket .basket-product__reserve {
    color: var(--basket-pink) !important;
}

#basket .basket-product__quantity {
    gap: 5px;
    margin-top: 10px;
}

#basket .basket-product__quantity > span {
    color: var(--basket-muted);
    font-size: 10px;
}

#basket .basket-product__quantity .amount-input {
    width: 42px;
    min-width: 42px;
    height: 32px;
    border: 1px solid var(--basket-line);
    border-radius: 9px;
    background: var(--basket-bg);
    color: var(--basket-ink);
}

#basket .quantity-button {
    width: 32px;
    height: 32px;
    border: 1px solid var(--basket-line);
    border-radius: 9px;
    background: var(--basket-surface);
    color: var(--basket-ink);
}

#basket .basket-product__option {
    margin-top: 9px !important;
    color: var(--basket-muted);
    font-size: 10px;
    line-height: 1.45;
}

#basket .basket-summary {
    margin-top: 18px;
    padding: 16px;
    border: 1px solid var(--basket-line);
    border-radius: 16px;
    background: var(--basket-surface);
}

#basket .basket-summary__line {
    min-height: 24px;
    color: var(--basket-muted);
    font-family: 'Jost', 'Noto Sans KR', Arial, sans-serif;
    font-size: 10px;
    letter-spacing: .03em;
}

#basket .basket-summary__line strong {
    color: var(--basket-ink);
    font-weight: 500;
}

#basket .basket-summary__line--discount strong,
#basket .basket-summary__total .txt-price {
    color: var(--basket-pink);
}

#basket .basket-summary__total {
    margin-top: 12px;
    padding-top: 15px;
    border-top: 1px solid var(--basket-line);
    color: var(--basket-ink);
    font-size: 12px;
    font-weight: 600;
}

#basket .basket-summary__total .txt-price {
    font-size: clamp(24px, 7vw, 34px);
    font-weight: 700;
}

#basket .basket-summary__reserve {
    margin-top: 6px;
    color: var(--basket-muted);
    font-size: 10px;
    text-align: right;
}

#basket .delivery-note {
    margin: 18px 0;
    padding: 15px 4px 0;
    color: var(--basket-muted);
    font-size: 11px;
    line-height: 1.7;
}

#basket .delivery-note strong {
    color: var(--basket-ink);
    font-weight: 600;
}

#basket .order-btn {
    margin-top: 20px;
    font-family: 'Jost', 'Noto Sans KR', Arial, sans-serif;
    letter-spacing: .12em;
}

#basket .order-btn > a {
    min-height: 52px;
    border-radius: 16px;
}

#basket .order-btn > a.order-submit-image {
    overflow: hidden;
}

/* The supplied purchase artwork is a wide image (1600x575).  Keep its
   intrinsic ratio and place the action immediately after the shared footer's
   copyright line; the old 52px/130px box was visibly cropping it. */
#basket .basket-footer-order {
    margin: 0;
}

#footer.store-footer .basket-footer-order {
    box-sizing: border-box;
    width: 100%;
    margin: 10px auto 0;
    padding: 0 20px calc(126px + env(safe-area-inset-bottom, 0px));
}

#footer.store-footer .basket-footer-order .order-btn {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 8px;
    width: min(100%, 672px);
    margin: 0 auto;
    padding: 0;
}

#footer.store-footer .basket-footer-order .order-btn.use-gift.qorder-none {
    grid-template-columns: 48px minmax(0, 1fr);
}

#footer.store-footer .basket-footer-order .order-btn.use-gift.use-qorder,
#footer.store-footer .basket-footer-order .order-btn.gift-none.use-qorder {
    grid-template-columns: 48px minmax(0, 1fr) minmax(0, 1fr);
}

#footer.store-footer .basket-footer-order .order-btn > a.order-submit-image {
    display: block;
    min-height: 0 !important;
    height: auto !important;
    overflow: visible !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    line-height: 0;
}

#footer.store-footer .basket-footer-order .order-btn > a.order-submit-image img {
    display: block;
    width: 100%;
    height: auto !important;
    max-height: none !important;
    object-fit: contain;
}

#footer.store-footer .basket-footer-order .cart-ft2 {
    width: min(100%, 672px);
    margin: 12px auto 0;
    text-align: center;
}

#footer.store-footer .copy + .basket-footer-order {
    border-top: 0;
}

/* 2026-09-16: Preserve the complete product photograph in the basket.
   Makeshop's mobile image is portrait (for example 380x500), so the old
   cover crop hid the top and bottom inside the square 92px card. */
#basket .basket-product__image > a {
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--basket-surface, #f6f6f6);
}

#basket .basket-product__image img.response100 {
    width: 100%;
    height: 100%;
    object-fit: contain !important;
    object-position: center;
}

/* NIGHT is image-only on this storefront: retain the white page, cards and
   content cloth while the shared script swaps supplied artwork. */
html.succubus-preload-night #contents:has(> #basket),
html.succubus-night #contents:has(> #basket),
body.succubus-night #contents:has(> #basket),
html.succubus-preload-night #container:has(#basket),
html.succubus-night #container:has(#basket),
body.succubus-night #container:has(#basket),
html.succubus-preload-night #basket,
html.succubus-night #basket,
body.succubus-night #basket {
    --basket-bg: #fff;
    --basket-surface: #f6f6f6;
    --basket-card: #fff;
    --basket-ink: #111;
    --basket-muted: #777;
    --basket-line: rgba(17, 17, 17, .14);
    --basket-line-strong: rgba(17, 17, 17, .25);
    --basket-pink: #f24770;
    background: #fff !important;
    color: #111;
}

@media screen and (max-width: 359px) {
    #basket { padding-right: 12px; padding-left: 12px; }
    #basket .basket-product figure {
        grid-template-columns: 78px minmax(0, 1fr);
        gap: 10px;
        padding: 12px;
    }
    #basket .basket-product__image {
        width: 78px;
        height: 78px;
    }
}

@media screen and (min-width: 540px) {
    #basket { padding-right: 24px; padding-left: 24px; }
}

/* BASIC css end */