/* Storequode storefront: brand layer over the Cartzilla theme. */
:root, [data-bs-theme=light] {
  --cz-primary: #f58a07; --cz-primary-rgb: 245, 138, 7;
  --cz-primary-text-emphasis: #8a4c04; --cz-primary-bg-subtle: #fdeed9; --cz-primary-border-subtle: #fbd7a6;
  --cz-link-color: #c46c05; --cz-link-hover-color: #8a4c04;
}
[data-bs-theme=dark] {
  --cz-primary: #f58a07; --cz-primary-rgb: 245, 138, 7;
  --cz-primary-text-emphasis: #fbc47c; --cz-primary-bg-subtle: #3b2306; --cz-primary-border-subtle: #6b3f0b;
  --cz-link-color: #f9a940; --cz-link-hover-color: #fbc47c;
}
.btn-primary { --cz-btn-bg: #f58a07; --cz-btn-border-color: #f58a07; --cz-btn-hover-bg: #d97805; --cz-btn-hover-border-color: #d97805;
  --cz-btn-active-bg: #c46c05; --cz-btn-active-border-color: #c46c05; --cz-btn-color: #fff; --cz-btn-hover-color: #fff; --cz-btn-active-color: #fff; }
.btn-outline-primary { --cz-btn-color: #c46c05; --cz-btn-border-color: #f58a07; --cz-btn-hover-bg: #f58a07; --cz-btn-hover-border-color: #f58a07; --cz-btn-hover-color: #fff; --cz-btn-active-bg: #d97805; --cz-btn-active-color: #fff; }
.form-check-input:checked { background-color: #f58a07; border-color: #f58a07; }
.navbar-brand { flex-shrink: 0; }
.navbar-brand img { height: 30px; width: auto; max-width: none; flex-shrink: 0; object-fit: contain; }
@media (max-width: 575.98px) { .navbar-brand img { height: 24px; } }
[data-bs-theme=dark] .navbar-brand img.brand-logo { filter: brightness(0) invert(1); }
.store-toast-wrap { position: fixed; right: 1rem; top: 5rem; z-index: 2000; display: flex; flex-direction: column; gap: .5rem; }
.vendor-chip { display: inline-flex; align-items: center; gap: .35rem; font-size: .75rem; color: var(--cz-secondary-color); }
.pager-wrap .pagination { justify-content: center; }
.hero-fallback { min-height: 380px; }
.discovery-card__visual { isolation: isolate; }
.discovery-card__image { object-fit: contain; object-position: center; padding: .5rem; opacity: 0; transition: opacity 900ms ease-in-out; pointer-events: none; }
.discovery-card__image.is-active { opacity: 1; }
.discovery-card__toggle { position: absolute; inset-inline-end: .75rem; bottom: .75rem; z-index: 3; width: 1.875rem; height: 1.875rem; border-radius: 50%; background: rgba(255, 255, 255, .88); color: #253333; }
.discovery-card__toggle[hidden] { display: none !important; }
@media (prefers-reduced-motion: reduce) { .discovery-card__image { transition: none; } }
.store-hero__image { object-position: center var(--hero-focus-y, center); }
.store-hero__image[src$="/women-fashion.webp"], .store-hero__image[src$="/men-fashion.webp"] {
  --hero-focus-y: top;
  padding-top: var(--hero-top-occlusion, 0px);
}
.store-hero__shade { position: absolute; inset: 0; z-index: 1; pointer-events: none; background: linear-gradient(90deg, rgba(0, 0, 0, .14), transparent 65%); }
.store-hero .display-4 { max-width: 14ch; text-wrap: balance; }
@media (max-width: 767.98px) {
  .store-hero__image { object-position: 76% var(--hero-focus-y, center); }
  .store-hero__shade { background: linear-gradient(90deg, rgba(0, 0, 0, .72), rgba(0, 0, 0, .3) 65%, rgba(0, 0, 0, .04)); }
}
.product-image-frame { background: var(--cz-tertiary-bg, #f3f4f6); border-radius: .75rem; overflow: hidden; }
.product-image-frame img { width: 100%; height: 100%; object-fit: cover; object-position: center; transition: transform .35s ease; }
.product-card:hover .product-image-frame img { transform: scale(1.04); }
.product-card-title { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; min-height: calc(2 * 1.5em); }
.rating-input { direction: rtl; display: inline-flex; gap: .15rem; }
.rating-input input { display: none; }
.rating-input label { cursor: pointer; font-size: 1.6rem; color: var(--cz-tertiary-color); }
.rating-input input:checked ~ label, .rating-input label:hover, .rating-input label:hover ~ label { color: #ffb800; }
.prose p { margin-bottom: 1rem; } .prose h2, .prose h3 { margin: 1.5rem 0 .75rem; }

/* Product banner that slides in under the sticky header: offset by the real header height (set in store.js). */
.sticky-product-banner .sticky-product-banner-inner.pt-5 { padding-top: calc(var(--store-header-h, 72px) - 1px) !important; }
.sticky-product-banner .navbar { padding-top: .75rem !important; padding-bottom: .75rem !important; }

.sticky-product-banner { top: -1px !important; }

.bundle-card { transition: box-shadow .2s ease, border-color .2s ease; }
.bundle-card:hover { box-shadow: 0 .5rem 1.25rem rgba(0, 0, 0, .08); }
.bundle-check { width: 1.35rem; height: 1.35rem; background-color: #fff; }
.bundle-plus { position: absolute; top: 38%; left: 0; transform: translate(-50%, -50%); z-index: 3; width: 2rem; height: 2rem; align-items: center; justify-content: center; border-radius: 50%; background: var(--cz-body-bg, #fff); border: 1px solid var(--cz-border-color, #dee2e6); font-size: .9rem; }

/* Often bought together: on phones the items sit in one swipeable row of small cards instead of stacking. */
@media (max-width: 575.98px) {
    .bundle-track { --bs-gutter-x: .75rem; flex-wrap: nowrap; overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x proximity; padding-bottom: .5rem; scrollbar-width: thin; -webkit-overflow-scrolling: touch; }
    .bundle-track { height: auto !important; align-items: stretch; }
    .bundle-track > .col { flex: 0 0 auto; width: 8.5rem; scroll-snap-align: start; display: flex; }
    .bundle-track .bundle-card { height: auto !important; flex: 1 1 auto; min-width: 0; }
    .bundle-track .bundle-card > .position-relative { padding: .3rem !important; }
    .bundle-track .bundle-card .card-body { padding: .15rem .5rem .5rem !important; }
    .bundle-track .bundle-card .product-card-title { font-size: .75rem; line-height: 1.25; margin-bottom: .25rem !important; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
    .bundle-track .bundle-card .h6 { font-size: .8rem; }
    .bundle-track .bundle-card .badge { font-size: .6rem; padding: .25em .5em; margin: .5rem !important; }
    .bundle-track .bundle-card .form-check { margin: .5rem !important; }
    .bundle-track .bundle-check { width: 1.1rem; height: 1.1rem; }
    .bundle-track .bundle-plus { width: 1.5rem; height: 1.5rem; font-size: .7rem; top: 34%; }
}

/* ---- shopping assistant chat ---- */
.sq-chat { position: fixed; right: 1rem; bottom: 1rem; z-index: 1045; font-size: .9rem; }
.sq-chat__fab { display: inline-flex; align-items: center; gap: .5rem; height: 3.5rem; padding: 0 1.15rem; border: 0; border-radius: 3.5rem; color: #fff; background: var(--cz-primary, #f55266); box-shadow: 0 .5rem 1.5rem rgba(0, 0, 0, .25); font-weight: 600; transition: transform .15s ease, box-shadow .15s ease; }
.sq-chat__fab:hover { transform: translateY(-2px); box-shadow: 0 .75rem 1.75rem rgba(0, 0, 0, .3); }
.sq-chat.is-open .sq-chat__fab { display: none; }
.sq-chat__panel { position: fixed; right: 1rem; bottom: 1rem; width: 380px; max-width: calc(100vw - 2rem); height: min(640px, calc(100vh - 2rem)); display: flex; flex-direction: column; overflow: hidden; border-radius: 1.25rem; background: var(--cz-body-bg, #fff); border: 1px solid var(--cz-border-color, #dee2e6); box-shadow: 0 1.25rem 3rem rgba(0, 0, 0, .28); }
.sq-chat__panel[hidden] { display: none; }
.sq-chat__head { display: flex; align-items: center; gap: .65rem; padding: .85rem 1rem; color: #fff; background: var(--cz-dark, #181d25); }
.sq-chat__avatar { display: grid; place-items: center; flex: none; width: 2.25rem; height: 2.25rem; border-radius: 50%; background: var(--cz-primary, #f55266); font-size: .75rem; font-weight: 700; }
.sq-chat__icon { display: grid; place-items: center; width: 2rem; height: 2rem; border: 0; border-radius: 50%; color: #fff; background: transparent; opacity: .8; }
.sq-chat__icon:hover { opacity: 1; background: rgba(255, 255, 255, .12); }
.sq-chat__log { flex: 1; overflow-y: auto; padding: 1rem; display: flex; flex-direction: column; gap: .65rem; background: var(--cz-tertiary-bg, #f6f9fc); overscroll-behavior: contain; }
.sq-chat__log > * { flex-shrink: 0; }
.sq-msg { display: flex; }
.sq-msg--user { justify-content: flex-end; }
.sq-msg__bubble { max-width: 86%; padding: .55rem .85rem; border-radius: 1rem; line-height: 1.45; overflow-wrap: anywhere; }
.sq-msg--assistant .sq-msg__bubble { background: var(--cz-body-bg, #fff); border: 1px solid var(--cz-border-color, #e4e9ee); border-bottom-left-radius: .3rem; }
.sq-msg--user .sq-msg__bubble { color: #fff; background: var(--cz-primary, #f55266); border-bottom-right-radius: .3rem; }
.sq-typing .sq-msg__bubble { display: inline-flex; gap: .25rem; padding: .7rem .9rem; }
.sq-typing span { width: .4rem; height: .4rem; border-radius: 50%; background: var(--cz-secondary-color, #6c757d); animation: sq-bounce 1s infinite ease-in-out; }
.sq-typing span:nth-child(2) { animation-delay: .15s; } .sq-typing span:nth-child(3) { animation-delay: .3s; }
@keyframes sq-bounce { 0%, 80%, 100% { opacity: .3; transform: translateY(0); } 40% { opacity: 1; transform: translateY(-3px); } }
.sq-suggest { display: flex; flex-wrap: wrap; gap: .4rem; }
.sq-chip { padding: .35rem .75rem; border: 1px solid var(--cz-border-color, #dee2e6); border-radius: 2rem; background: var(--cz-body-bg, #fff); color: inherit; font-size: .8rem; }
.sq-chip:hover { border-color: var(--cz-primary, #f55266); color: var(--cz-primary, #f55266); }
.sq-products { display: flex; gap: .45rem; overflow-x: auto; padding: .1rem .1rem .5rem; scroll-snap-type: x proximity; }
.sq-product { flex: 0 0 7.75rem; display: flex; flex-direction: column; overflow: hidden; border-radius: .7rem; background: var(--cz-body-bg, #fff); border: 1px solid var(--cz-border-color, #e4e9ee); scroll-snap-align: start; }
.sq-product__img { display: block; aspect-ratio: 5 / 4; background: var(--cz-tertiary-bg, #f3f4f6); }
.sq-product__img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.sq-product__body { display: flex; flex-direction: column; gap: .1rem; flex: 1; padding: .4rem .5rem .5rem; }
.sq-product__name { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; min-height: 2.4em; color: inherit; font-size: .73rem; line-height: 1.2; text-decoration: none; }
.sq-product__seller { color: var(--cz-secondary-color, #6c757d); font-size: .66rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sq-product__price { font-size: .78rem; font-weight: 700; } .sq-product__price del { margin-left: .35rem; color: var(--cz-tertiary-color, #9ca3af); font-size: .75rem; font-weight: 400; }
.sq-product__actions { margin-top: auto; padding-top: .2rem; } .sq-product__actions .btn { width: 100%; padding: .15rem .3rem; font-size: .7rem; }
.sq-chat__cartbar { display: flex; align-items: center; justify-content: space-between; gap: .75rem; padding: .5rem 1rem; border-top: 1px solid var(--cz-border-color, #dee2e6); background: var(--cz-body-bg, #fff); font-size: .85rem; font-weight: 600; }
.sq-chat__cartbar[hidden] { display: none; }
.sq-chat__fab { position: relative; }
.sq-chat__fab-badge { position: absolute; top: -.35rem; right: -.2rem; min-width: 1.35rem; height: 1.35rem; padding: 0 .35rem; border-radius: 999px; background: #dc3545; color: #fff; font-size: .72rem; font-weight: 700; line-height: 1.35rem; text-align: center; box-shadow: 0 0 0 2px var(--cz-body-bg, #fff); }
.sq-chat__fab-badge[hidden] { display: none; }
.sq-chat__form { display: flex; align-items: flex-end; gap: .5rem; padding: .65rem .75rem; border-top: 1px solid var(--cz-border-color, #dee2e6); background: var(--cz-body-bg, #fff); }
.sq-chat__form textarea { flex: 1; resize: none; max-height: 110px; padding: .55rem .85rem; border: 1px solid var(--cz-border-color, #dee2e6); border-radius: 1.2rem; background: var(--cz-tertiary-bg, #f6f9fc); color: inherit; font: inherit; line-height: 1.35; }
.sq-chat__form textarea:focus { outline: 2px solid var(--cz-primary, #f55266); outline-offset: -1px; background: var(--cz-body-bg, #fff); }
.sq-chat__send { display: grid; place-items: center; flex: none; width: 2.5rem; height: 2.5rem; border: 0; border-radius: 50%; color: #fff; background: var(--cz-primary, #f55266); }
.sq-chat__form.is-busy .sq-chat__send { opacity: .5; }
.sq-confirm { padding: .9rem; border-radius: 1rem; background: var(--cz-body-bg, #fff); border: 1px solid var(--cz-border-color, #e4e9ee); display: flex; flex-direction: column; gap: .5rem; }
.sq-confirm__title { font-weight: 700; font-size: 1rem; }
.sq-confirm { align-items: flex-start; } .sq-confirm__icon { display: grid; place-items: center; width: 2rem; height: 2rem; border-radius: 50%; color: #fff; background: #198754; font-weight: 700; }
.sq-confirm__code { font-family: ui-monospace, monospace; font-weight: 700; letter-spacing: .03em; } .sq-confirm__text { font-size: .82rem; }
@media (max-width: 575.98px) {
    .sq-chat { right: .75rem; bottom: .75rem; }
    .sq-chat__panel { right: 0; bottom: 0; width: 100vw; max-width: 100vw; height: 100dvh; border-radius: 0; border: 0; }
}
@media (prefers-reduced-motion: reduce) { .sq-typing span, .sq-chat__fab { animation: none; transition: none; } }

/* Pagination: wrap instead of overflowing on narrow screens. */
.pagination { flex-wrap: wrap; row-gap: .25rem; }
@media (max-width: 575.98px) { .pagination-lg .page-link { padding: .45rem .6rem; font-size: 1rem; } }

/* Home: below lg the category list becomes one swipeable row of round icons, so "Popular products" is not pushed a full screen down. */
@media (max-width: 991.98px) {
    .home-cats { flex-wrap: nowrap; --bs-gutter-x: 0; --bs-gutter-y: 0; margin-inline: -.75rem; padding: .25rem .75rem .75rem; overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x proximity; scroll-padding-inline: .75rem; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
    .home-cats::-webkit-scrollbar { display: none; }
    .home-cats > .home-cat { flex: 0 0 auto; width: 4.9rem; max-width: none; padding: 0 .3rem; scroll-snap-align: start; }
    .home-cat-body { flex-direction: column; width: 100%; text-align: center; }
    .home-cat-ico { width: 3.75rem !important; height: 3.75rem !important; transition: transform .15s ease; }
    .home-cat-ico img { width: 2.15rem; height: 2.15rem; object-fit: contain; }
    .home-cat:active .home-cat-ico { transform: scale(.94); }
    .home-cat-text { width: 100%; padding: 0 !important; margin-top: .4rem; }
    .home-cat-text > a { font-size: .72rem !important; font-weight: 600 !important; line-height: 1.2; margin: 0 !important; justify-content: center; }
    .home-cat-text > a .text-truncate { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; white-space: normal; text-overflow: clip; }
    .home-cat-count { display: none; }
}

/* Sell-with-us and feedback cards: below lg they are one swipeable row (the second peeks out) instead of two tall stacked cards. */
@media (max-width: 991.98px) {
    .cta-rail { flex-wrap: nowrap; --bs-gutter-x: 0; --bs-gutter-y: 0; gap: .75rem; margin-inline: -.75rem; padding: 0 .75rem .5rem; overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x proximity; scroll-padding-inline: .75rem; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
    .cta-rail::-webkit-scrollbar { display: none; }
    .cta-rail > .cta-card { flex: 0 0 auto; width: min(84vw, 22rem); max-width: none; padding: 0; margin-bottom: 0 !important; scroll-snap-align: start; }
    .cta-rail .cta-sell h2, .cta-rail .cta-feedback h2 { font-size: 1.1rem; margin-bottom: 1rem !important; }
    .cta-rail .cta-sell .btn-lg { --cz-btn-padding-y: .55rem; --cz-btn-padding-x: 1rem; --cz-btn-font-size: .9rem; }
    .cta-rail .ratio { max-width: 10.5rem !important; }
}
@media (min-width: 576px) and (max-width: 991.98px) {
    .cta-rail > .cta-sell { width: 34rem; }
    .cta-rail > .cta-feedback { width: 24rem; }
    .cta-rail .ratio { max-width: 13rem !important; }
}

/* Shop by store: 150px circles on larger screens; on phones about two and a half stores fit in view, so the circles and names shrink. */
.shop-store-ico { width: 150px; height: 150px; }
@media (max-width: 575.98px) {
    .shop-store-ico { width: clamp(72px, 24vw, 100px); height: clamp(72px, 24vw, 100px); margin-bottom: .75rem !important; }
    .shop-store-name { font-size: .85rem; line-height: 1.25; margin-bottom: .25rem !important; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
    .shop-store-tag { font-size: .72rem; line-height: 1.25; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
}


/* Paid ads: pop-up, top bar and banner (admin: Marketing > Ads & pop-ups). */
.sq-ad-tag { font-size: .68rem; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--cz-secondary-color, #6c757d); }
.sq-ad-bar { position: relative; background: var(--cz-primary, #f55266); color: #fff; }
.sq-ad-bar[hidden], [data-ad][hidden], .sq-ad-popup[hidden] { display: none !important; }
.sq-ad-bar-link { display: flex; align-items: center; justify-content: center; gap: .75rem; padding: .55rem 3rem .55rem 1rem; color: inherit; text-decoration: none; font-size: .9rem; }
.sq-ad-bar-link:hover { color: inherit; }
.sq-ad-bar .sq-ad-tag { color: inherit; opacity: .8; border: 1px solid currentColor; border-radius: .25rem; padding: 0 .3rem; }
.sq-ad-bar-text { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sq-ad-bar-cta { white-space: nowrap; font-weight: 600; text-decoration: underline; }
.sq-ad-bar .sq-ad-close { color: #fff; }
.sq-ad-close { position: absolute; top: .4rem; right: .5rem; z-index: 2; width: 2rem; height: 2rem; border: 0; border-radius: 50%; background: rgba(0, 0, 0, .45); color: #fff; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; }
.sq-ad-bar .sq-ad-close { background: transparent; top: 50%; transform: translateY(-50%); }
.sq-ad-banner-img { width: 100%; max-height: 14rem; object-fit: cover; }
@media (min-width: 576px) { .sq-ad-banner-img { width: 40%; max-height: none; align-self: stretch; } }
.sq-ad-popup { position: fixed; inset: 0; z-index: 1090; display: flex; align-items: center; justify-content: center; padding: 1rem; background: rgba(15, 23, 42, .6); animation: sqAdFade .25s ease-out; }
.sq-ad-popup-card { position: relative; width: 100%; max-width: 26rem; max-height: 92vh; overflow-y: auto; background: var(--cz-body-bg, #fff); border-radius: 1.25rem; box-shadow: 0 1.5rem 4rem rgba(0, 0, 0, .35); animation: sqAdRise .3s ease-out; }
.sq-ad-popup-img { display: block; width: 100%; max-height: 16rem; object-fit: cover; border-radius: 1.25rem 1.25rem 0 0; }
html.sq-ad-open { overflow: hidden; }
@keyframes sqAdFade { from { opacity: 0; } }
@keyframes sqAdRise { from { transform: translateY(1rem) scale(.98); opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .sq-ad-popup, .sq-ad-popup-card { animation: none; } }