:root {
    --cb-ink: #18243a;
    --cb-muted: #667085;
    --cb-navy: #102a56;
    --cb-gold: #f5be32;
    --cb-paper: #f7f6f2;
    --cb-line: #e8e9ec;
    --cb-radius: 12px;
}

.cb-product-kind { min-height: 0; }
.cb-product-kind__badge { display: inline-flex; align-items: center; gap: 6px; width: fit-content; border: 1px solid transparent; border-radius: 999px; padding: 5px 10px; font-size: 10px; font-weight: 750; letter-spacing: .035em; line-height: 1.25; text-transform: uppercase; }
.cb-product-kind__badge::before { width: 7px; height: 7px; flex: 0 0 7px; border-radius: 50%; background: currentColor; content: ""; }
.cb-product-kind__badge--used { border-color: #e8bc63; background: #fff3d8; color: #704000; }
.cb-product-kind__badge--new { border-color: #b9cce9; background: #eaf2ff; color: #173b70; }
.cb-product-detail-kind { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin: 0 0 10px; }
.cb-product-detail-kind__note { color: var(--cb-muted); font-size: 13px; }

html { scroll-behavior: smooth; }
body { color: var(--cb-ink); }

header.shadow-gray {
    border-bottom: 1px solid var(--cb-line);
    box-shadow: 0 3px 16px rgb(16 42 86 / 4%);
}

header img[src*="storefront/"] {
    width: auto;
    max-width: 200px;
    max-height: 46px;
    object-fit: contain;
}

header:has(.cb-store-header-brand[data-storefront-logo="fallback"]) img[src*="/themes/shop/"] { display: none; }
header:has(.cb-store-header-brand[data-storefront-logo="fallback"]) a:has(img[src*="/themes/shop/"]) { display: none !important; }
header:has(.cb-store-header-brand[data-storefront-logo="fallback"]) a[aria-label="Bagisto"] { display: none !important; }

.cb-store-header-brand {
    display: inline-grid;
    gap: 2px;
    min-width: 0;
    padding-inline-start: 14px;
    border-inline-start: 1px solid var(--cb-line);
    line-height: 1.2;
    text-decoration: none;
}
.cb-store-header-brand:focus-visible { border-radius: 3px; outline: 3px solid var(--cb-gold); outline-offset: 4px; }
.cb-store-identity__logo-wrap--fallback { background: var(--cb-navy); color: var(--cb-gold); font-size: clamp(24px, 4vw, 38px); font-weight: 750; letter-spacing: -.04em; }

.cb-store-header-brand__name {
    overflow: hidden;
    max-width: 210px;
    color: var(--cb-ink);
    font-size: 14px;
    font-weight: 650;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.cb-store-header-brand__platform {
    color: var(--cb-muted);
    font-size: 10px;
    letter-spacing: .04em;
}

.cb-checkout-brand { display: flex; justify-content: center; border-bottom: 1px solid var(--cb-line); background: var(--cb-paper); padding: 10px 20px; }
.cb-checkout-brand__store { display: inline-flex; align-items: center; gap: 10px; color: var(--cb-ink); text-decoration: none; }
.cb-checkout-brand__store:focus-visible { border-radius: 5px; outline: 3px solid var(--cb-gold); outline-offset: 4px; }
.cb-checkout-brand__logo, .cb-checkout-brand__monogram { display: grid; width: 38px; height: 38px; place-items: center; border: 1px solid var(--cb-line); border-radius: 9px; background: #fff; object-fit: contain; }
.cb-checkout-brand__monogram { border-color: var(--cb-navy); background: var(--cb-navy); color: var(--cb-gold); font-size: 13px; font-weight: 750; }
.cb-checkout-brand__copy { display: grid; gap: 2px; }
.cb-checkout-brand__name { font-size: 13px; font-weight: 700; line-height: 1.2; }
.cb-checkout-brand__platform { color: var(--cb-muted); font-size: 10px; }
/* When the merchant has no logo, use its CasaBol monogram instead of the generic theme mark. */
#app:has(.cb-checkout-brand[data-storefront-logo="fallback"]) a:has(> img[src*="/themes/shop/"]) { display: none !important; }

.cb-store-identity {
    background: var(--cb-paper);
    padding: clamp(24px, 4vw, 52px) clamp(20px, 6vw, 88px) clamp(12px, 2vw, 24px);
}

.cb-store-identity__inner {
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 28px;
    max-width: 1440px;
    margin: 0 auto;
    padding: clamp(22px, 3.5vw, 40px);
    border: 1px solid var(--cb-line);
    border-radius: 18px;
    background: #fff;
    box-shadow: 0 12px 34px rgb(24 35 31 / 4%);
}

.cb-store-identity__brand { display: flex; align-items: center; gap: clamp(18px, 3vw, 34px); min-width: 0; }
.cb-store-identity__logo-wrap { display: grid; flex: 0 0 clamp(96px, 13vw, 156px); width: clamp(96px, 13vw, 156px); height: clamp(82px, 10vw, 124px); place-items: center; overflow: hidden; border: 1px solid var(--cb-line); border-radius: 14px; background: #fff; }
.cb-store-identity__logo { display: block; width: 100%; height: 100%; padding: 8px; object-fit: contain; }
.cb-store-identity__copy { min-width: 0; }
.cb-store-identity__eyebrow { display: flex; align-items: center; gap: 8px; margin: 0 0 8px; color: var(--cb-navy); font-size: 11px; font-weight: 700; letter-spacing: .12em; line-height: 1.4; text-transform: uppercase; }
.cb-store-identity__dot { width: 7px; height: 7px; border-radius: 50%; background: var(--cb-gold); }
.cb-store-identity__name { margin: 0; color: var(--cb-ink); font-size: clamp(26px, 3.5vw, 42px); font-weight: 600; letter-spacing: -.045em; line-height: 1.1; overflow-wrap: anywhere; }
.cb-store-identity__description { max-width: 620px; margin: 10px 0 0; color: var(--cb-muted); font-size: 15px; line-height: 1.65; }
.cb-store-identity__action { display: inline-flex; flex: 0 0 auto; align-items: center; justify-content: center; gap: 12px; min-height: 48px; padding: 0 19px; border-radius: 8px; background: var(--cb-navy); color: #fff; font-size: 14px; font-weight: 600; text-decoration: none; transition: background-color .18s ease, transform .18s ease; }
.cb-store-identity__action:hover { transform: translateY(-1px); background: #0b2145; color: #fff; }
.cb-store-identity__action:focus-visible { outline: 3px solid var(--cb-gold); outline-offset: 3px; }

button.primary-button, a.primary-button, .primary-button,
button.secondary-button, a.secondary-button, .secondary-button {
    min-height: 42px;
    border-radius: 9px;
    font-weight: 600;
}

#main form button.secondary-button[type="submit"] {
    border: 1px solid var(--cb-navy) !important;
    background: var(--cb-navy) !important;
    color: #fff !important;
    font-weight: 650;
}
#main form button.secondary-button[type="submit"]:hover:not(:disabled) { background: #0b2145 !important; }
#main form button.secondary-button[type="submit"]:focus-visible { outline: 3px solid var(--cb-gold); outline-offset: 3px; }
#main form button.secondary-button[type="submit"]:disabled { border-color: #e7e9ed !important; background: #e7e9ed !important; color: #667085 !important; }

input:not([type="checkbox"]):not([type="radio"]), select, textarea {
    border-radius: 9px;
}

.group:has(> div > .cb-product-kind) {
    box-sizing: border-box;
    display: flex !important;
    flex: 0 0 291px !important;
    width: 291px;
    min-width: 291px;
    align-self: stretch;
    height: auto;
    flex-direction: column;
    overflow: hidden;
    border: 1px solid var(--cb-line);
    border-radius: var(--cb-radius);
    background: #fff;
}

.group:has(> div > .cb-product-kind) > div:first-child { display: flex; width: 100%; height: auto; flex: 0 0 auto; flex-direction: column; overflow: hidden; }
.group:has(> div > .cb-product-kind) > div:first-child:hover { box-shadow: 0 12px 30px rgb(16 42 86 / 9%); transform: translateY(-2px); }
.group:has(> div > .cb-product-kind) > div:first-child > a:first-of-type { display: grid; width: 100%; height: auto; flex: 0 0 auto; aspect-ratio: 1 / 1; place-items: center; overflow: hidden; background: #f7f7f5; }
.group:has(> div > .cb-product-kind) > div:first-child > a:first-of-type img { width: 100%; height: 100%; object-fit: contain; }
.group:has(> div > .cb-product-kind) > div:nth-child(2) { display: flex; position: static; min-height: 172px; max-width: none; flex: 1 0 auto; flex-direction: column; margin: 0 !important; padding: 16px !important; transform: none !important; transition: none; }
.group:has(> div > .cb-product-kind) > div:nth-child(2) > p { display: -webkit-box; max-width: none; height: 2.7em; min-height: 2.7em; overflow: hidden; color: var(--cb-ink); font-size: 15px; line-height: 1.35; white-space: normal; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
.group:has(> div > .cb-product-kind) .action-items:has(button) { display: flex !important; width: 100%; margin-top: auto; opacity: 1; visibility: visible; }
.group:has(> div > .cb-product-kind) .action-items:has(button) button { width: 100%; min-height: 44px; white-space: normal; text-align: center; }
.group:has(> div > .cb-product-kind) .action-items:has(.cb-product-card-action-marker) { display: flex !important; width: 100%; margin-top: auto; opacity: 1; visibility: visible; }
.group:has(> div > .cb-product-kind) .action-items:has(.cb-product-card-action-marker) > button { display: none !important; }
.cb-product-card-action-marker ~ button { display: none !important; }
.cb-product-card-action { display: inline-flex; width: 100%; min-height: 44px; align-items: center; justify-content: center; border-radius: 9px; background: var(--cb-navy); color: #fff; padding: 8px 12px; font-size: 13px; font-weight: 650; line-height: 1.25; text-align: center; text-decoration: none; }
.cb-product-card-action:focus-visible { outline: 3px solid var(--cb-gold); outline-offset: 3px; }
.group:has(> div > .cb-product-kind) [v-html="product.price_html"] { color: var(--cb-navy); font-size: 17px; }

v-category .container, v-search .container { max-width: 1440px; margin-inline: auto; }
v-category .container .grid.grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px; }

footer { margin-top: clamp(40px, 6vw, 80px) !important; border-top: 1px solid var(--cb-line); background: #fff !important; }
footer > div:first-child > div:has(form[action*="subscription"]) { max-width: 520px; }
footer > div:first-child > div:has(form[action*="subscription"]) [role="heading"] { color: var(--cb-ink) !important; font-size: 22px !important; font-style: normal !important; font-weight: 600; line-height: 1.25 !important; }
footer > div:first-child > div:has(form[action*="subscription"]) input { min-height: 48px; border-color: var(--cb-line) !important; background: #fff !important; padding-inline-end: 140px !important; }
footer > div:first-child > div:has(form[action*="subscription"]) button { min-height: 38px; background: var(--cb-navy) !important; color: #fff; }
footer > div:last-child { align-items: center; gap: 12px; min-height: 68px; border-top: 1px solid var(--cb-line); background: var(--cb-paper) !important; padding: 18px clamp(16px, 5vw, 60px) !important; }
footer > div:last-child > p { display: none; }
.cb-store-footer-brand { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 22px; color: var(--cb-muted); font-size: 12px; }
.cb-store-footer-brand a { color: var(--cb-navy); text-decoration: underline; text-underline-offset: 3px; }


.cb-marketplace { min-height: 100vh; background: var(--cb-paper); }
.cb-marketplace__header { padding: 28px clamp(18px, 6vw, 88px) 34px; background: var(--cb-navy); color: #fff; }
.cb-marketplace__header-inner, .cb-marketplace__main { width: min(100%, 1440px); margin: 0 auto; }
.cb-marketplace__wordmark { color: #fff; font-size: 25px; font-weight: 800; letter-spacing: -.05em; }
.cb-marketplace__wordmark span { color: var(--cb-gold); }
.cb-marketplace__title { max-width: 850px; margin: 28px 0 8px; font-size: clamp(28px, 4vw, 46px); font-weight: 650; letter-spacing: -.04em; line-height: 1.08; }
.cb-marketplace__intro { max-width: 760px; margin: 0; color: #d9e3f5; font-size: 15px; line-height: 1.65; }
.cb-marketplace__filters { display: flex; flex-wrap: wrap; gap: 10px; max-width: 980px; margin-top: 20px; }
.cb-marketplace__filters input, .cb-marketplace__filters select { min-height: 46px; border: 1px solid #d8deea; border-radius: 9px; background: #fff; padding: 0 14px; font: inherit; }
.cb-marketplace__filters input { flex: 1 1 290px; }
.cb-marketplace__filters button { min-height: 46px; border: 0; border-radius: 9px; background: var(--cb-gold); color: var(--cb-ink); padding: 0 20px; font: inherit; font-weight: 700; cursor: pointer; }
.cb-marketplace__main { padding: 30px clamp(18px, 5vw, 72px) 58px; }
.cb-marketplace__summary { margin: 0 0 22px; color: var(--cb-muted); font-size: 14px; }
.cb-marketplace__pagination { display: flex; justify-content: center; margin-top: 28px; }
.cb-marketplace__pagination nav { width: 100%; }
.cb-marketplace__grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 245px), 1fr)); gap: 20px; }
.cb-marketplace__card { display: flex; min-width: 0; flex-direction: column; overflow: hidden; border: 1px solid var(--cb-line); border-radius: 14px; background: #fff; transition: box-shadow .2s ease, transform .2s ease; }
.cb-marketplace__card:hover { transform: translateY(-2px); box-shadow: 0 12px 28px rgb(16 42 86 / 9%); }
.cb-marketplace__image { display: grid; aspect-ratio: 1 / 1; place-items: center; overflow: hidden; background: #f1f2f0; color: var(--cb-muted); }
.cb-marketplace__image img { width: 100%; height: 100%; object-fit: contain; }
.cb-marketplace__info { display: flex; flex: 1; flex-direction: column; padding: 16px; }
.cb-marketplace__kind { color: var(--cb-navy); font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.cb-marketplace__product-name { margin: 8px 0; color: var(--cb-ink); font-size: 17px; font-weight: 600; line-height: 1.35; }
.cb-marketplace__seller { color: var(--cb-muted); font-size: 13px; }
.cb-marketplace__seller a { color: var(--cb-navy); font-weight: 600; text-decoration: underline; text-underline-offset: 2px; }
.cb-marketplace__price { margin: 18px 0; color: var(--cb-ink); font-size: 20px; font-weight: 750; }
.cb-marketplace__button { display: inline-flex; min-height: 44px; align-items: center; justify-content: center; gap: 8px; margin-top: auto; border-radius: 8px; background: var(--cb-navy); color: #fff; font-size: 14px; font-weight: 600; text-decoration: none; }
.cb-marketplace__empty { border: 1px dashed #c8cfda; border-radius: 12px; background: #fff; padding: 36px; color: var(--cb-muted); text-align: center; }
.cb-marketplace__footer { border-top: 1px solid var(--cb-line); background: #fff; padding: 20px; color: var(--cb-muted); font-size: 12px; text-align: center; }
.cb-marketplace__store-head { display: flex; align-items: center; gap: 22px; margin-top: 24px; }
.cb-marketplace__store-logo { display: grid; flex: 0 0 100px; width: 100px; height: 100px; place-items: center; overflow: hidden; border: 1px solid rgb(255 255 255 / 24%); border-radius: 14px; background: #fff; }
.cb-marketplace__store-logo img { width: 100%; height: 100%; padding: 8px; object-fit: contain; }
.cb-marketplace__store-logo > span { color: var(--cb-navy); font-size: 24px; font-weight: 700; }
.cb-marketplace__store-name { margin: 0; color: #fff; font-size: clamp(26px, 3vw, 38px); font-weight: 650; letter-spacing: -.035em; }
.cb-marketplace__back { color: #f9d76f; text-decoration: underline; text-underline-offset: 3px; }
.cb-marketplace a:focus-visible, .cb-marketplace button:focus-visible, .cb-marketplace select:focus-visible, .cb-marketplace input:focus-visible { outline: 3px solid var(--cb-gold); outline-offset: 3px; }
.cb-marketplace__pagination a, .cb-marketplace__pagination span[aria-current="page"] { display: inline-flex; min-width: 40px; min-height: 40px; align-items: center; justify-content: center; border: 1px solid var(--cb-line); border-radius: 8px; background: #fff; color: var(--cb-ink); padding: 0 10px; text-decoration: none; }
.cb-marketplace__pagination span[aria-current="page"] { border-color: var(--cb-navy); background: var(--cb-navy); color: #fff; }

/* Keep native Bagisto cart and checkout behavior while aligning their surfaces. */
#main .container > .grid.grid-cols-\[1fr_auto\] > * ,
#main .container .rounded-xl.border,
#main .container .rounded-lg.border { border-color: var(--cb-line); border-radius: var(--cb-radius); }
#main .container button, #main .container a.primary-button { border-radius: 9px; }
#steps-container > div, #steps-container section { border-radius: var(--cb-radius); }
#main [role="alert"], #main .text-red-600, #main .text-red-700 { line-height: 1.5; }
#recommerce-preparation-branch-details { border-radius: 10px; }
.cb-cart-empty-action { display: inline-flex; min-width: min(100%, 240px); min-height: 48px; align-items: center; justify-content: center; margin-top: 20px; border: 1px solid var(--cb-navy); border-radius: 9px; background: var(--cb-navy); color: #fff; padding: 0 22px; font-size: 15px; font-weight: 650; text-decoration: none; }
.cb-cart-empty-action:hover { background: #0b2145; color: #fff; }
.cb-cart-empty-action:focus-visible { outline: 3px solid var(--cb-gold); outline-offset: 3px; }

@media (max-width: 640px) {
    #main .container { padding-inline: 16px; }
    #steps-container { gap: 14px; }
    #steps-container input, #steps-container select, #steps-container textarea { min-height: 44px; }
    #main .container > .grid.grid-cols-\[1fr_auto\] > .sticky.top-8 { margin-top: 8px; }
}

@media (max-width: 680px) {
    .cb-marketplace__header { padding-top: 22px; }
    .cb-marketplace__title { margin-top: 22px; }
    .cb-marketplace__filters > * { flex: 1 1 100%; }
    .cb-marketplace__filters button { width: 100%; }
    .cb-marketplace__main { padding-top: 22px; }
    .cb-marketplace__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
    .cb-marketplace__info { padding: 12px; }
    .cb-marketplace__product-name { font-size: 14px; }
    .cb-marketplace__price { margin: 12px 0; font-size: 16px; }
    .cb-marketplace__store-head { align-items: flex-start; gap: 14px; }
    .cb-marketplace__store-logo { flex-basis: 72px; width: 72px; height: 72px; }
}

@media (max-width: 1023px) {
    .cb-store-header-brand { padding-inline-start: 9px; }
    .cb-store-header-brand__name { max-width: 150px; font-size: 12px; }
    .cb-store-header-brand__platform { font-size: 9px; }
    v-category .container .grid.grid-cols-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 767px) {
    header img[src*="storefront/"] { max-width: 150px; max-height: 34px; }
    .cb-store-header-brand[data-storefront-logo="custom"] { display: none; }
    .cb-store-header-brand[data-storefront-logo="fallback"] { display: inline-grid; max-width: 112px; padding-inline-start: 8px; }
    .cb-store-identity { padding: 18px 16px 8px; }
    .cb-store-identity__inner { align-items: stretch; flex-direction: column; gap: 20px; padding: 22px 18px; border-radius: 14px; }
    .cb-store-identity__brand { align-items: flex-start; gap: 15px; }
    .cb-store-identity__logo-wrap { flex-basis: 76px; width: 76px; height: 76px; border-radius: 11px; }
    .cb-store-identity__logo { padding: 5px; }
    .cb-store-identity__eyebrow { margin-bottom: 5px; font-size: 9px; }
    .cb-store-identity__name { font-size: clamp(22px, 7vw, 30px); }
    .cb-store-identity__description { margin-top: 7px; font-size: 13px; line-height: 1.5; }
    .cb-store-identity__action { align-self: flex-start; min-height: 44px; }
    v-category .container .grid.grid-cols-3 { gap: 12px; }
    .group:has(> div > .cb-product-kind) { flex-basis: 192px !important; width: 192px; min-width: 192px; }
    .group:has(> div > .cb-product-kind) > div:nth-child(2) { min-height: 154px; padding: 12px !important; }
    .group:has(> div > .cb-product-kind) > div:nth-child(2) > p { height: 2.8em; min-height: 2.8em; font-size: 13px; }
    .group:has(> div > .cb-product-kind) [v-html="product.price_html"] { font-size: 15px; }
    footer > div:first-child { padding: 22px 16px !important; }
    footer > div:last-child { justify-content: flex-start !important; }
    .cb-store-footer-brand { gap: 7px 14px; font-size: 11px; }
}

.cb-product-reservation-action { display: grid; width: 100%; max-width: 470px; gap: 8px; }
.cb-product-reservation-action__button { display: inline-flex; min-height: 48px; align-items: center; justify-content: center; border: 1px solid var(--cb-navy); border-radius: 9px; background: var(--cb-navy); color: #fff; padding: 10px 18px; font-size: 15px; font-weight: 650; text-align: center; text-decoration: none; }
.cb-product-reservation-action__button:hover { background: #0b2145; color: #fff; }
.cb-product-reservation-action__button:focus-visible { outline: 3px solid var(--cb-gold); outline-offset: 3px; }
.cb-product-reservation-action__button:disabled { border-color: #d0d5dd; background: #f2f4f7; color: #667085; cursor: not-allowed; }
.cb-product-reservation-action__note { margin: 0; color: var(--cb-muted); font-size: 13px; line-height: 1.5; }
.cb-product-reservation-action ~ button[type="submit"] { display: none !important; }
body:has(.cb-product-reservation-action) button.primary-button.mt-5 { display: none !important; }

.cb-storefront-delivery-cost-note { margin-top: 10px; border-radius: 8px; background: var(--cb-paper); padding: 10px 12px; color: var(--cb-muted); font-size: 12px; line-height: 1.5; }
.cb-mini-cart-guidance { color: var(--cb-muted); font-size: 13px; line-height: 1.5; }
.cb-mini-cart-empty-action { display: grid; justify-items: center; gap: 14px; padding: 12px 0 28px; text-align: center; }
.cb-mini-cart-empty-action p { margin: 0; color: var(--cb-muted); font-size: 14px; }
.cb-mini-cart-empty-action a { display: inline-flex; min-height: 44px; align-items: center; justify-content: center; border: 1px solid var(--cb-navy); border-radius: 9px; color: var(--cb-navy); padding: 0 18px; font-size: 14px; font-weight: 650; text-decoration: none; }
.cb-mini-cart-empty-action a:focus-visible { outline: 3px solid var(--cb-gold); outline-offset: 3px; }
body:has(.cb-storefront-cart-context) div:has(> .cb-mini-cart-guidance) > p.text-base { display: none !important; }

#app:has(.cb-store-header-brand) > #main + .container.mt-20 { display: none !important; }

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { scroll-behavior: auto !important; transition-duration: .01ms !important; }
}