/* =========================================================================
   Shuvino — responsive fixes (loaded LAST on every page, storefront + panels)
   ========================================================================= */

/* 1. Layout columns may shrink narrower than their content.
      Without this a grid/flex column grows to fit its widest unbreakable child
      (a scrolling chip row, a wide table…) and pushes the page past the screen. */
.sh-shop > *, .sh-shop__main, .sh-pdp > *, .sh-gbp > *, .sh-gbp__main, .sh-cart > *, .sh-checkout > *,
.sh-contact > *, .sh-oc-grid > *, .sh-about-hero > *, .sh-feature > *, .sh-hero__grid > *, .sh-reviews > *,
.sh-authbox > *, .sh-cta2 > *, .sh-how > *, .sh-footer__top > *, .sh-dcols > *, .sh-dcols > * > *,
.sh-dform__grid > *, .sh-form__grid > *, .sh-kpis > *, .vp-approval__grid > *, .kyr > *,
.db-grid > *, .sh-addr > *, .sh-footer__contact li, .sh-footer__contact li > * {
    min-width: 0;
}

/* 2. Tables scroll sideways inside their card instead of widening the page. */
.sh-table-wrap { max-width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }

/* 3. Long words / emails / codes wrap instead of overflowing. */
h1, h2, h3, h4, h5, p, dd, .sh-card__title, .sh-tprod strong, .sh-summary__rows .row span { overflow-wrap: break-word; }

/* 4. Header icons: honour "hide on small screens" (some panels re-set display). */
@media (max-width: 575.98px) { .sh-action.d-none.d-sm-flex { display: none !important; } }
@media (max-width: 991.98px) { .sh-action.d-none.d-lg-flex { display: none !important; } }

/* 5. Card headers, toolbars and button rows wrap on narrow screens. */
@media (max-width: 767.98px) {
    .sh-dcard__head { flex-wrap: wrap; gap: 10px; }
    .sh-dcard__head > * { min-width: 0; }
    .sh-toolbar { flex-wrap: wrap; }
    .sh-toolbar__search { flex: 1 1 100%; min-width: 0; }
    .sh-walletrow { flex-wrap: wrap; gap: 8px; }
    .sh-walletrow > * { min-width: 0; }
    .ct-head { flex-wrap: wrap; }
    .ct-head__meta { margin-left: 0; width: 100%; }
    .sh-exportmenu__pop { position: fixed; left: 16px; right: 16px; width: auto; max-width: none; }
    .sh-status { max-width: 100%; white-space: normal; }
    .sh-walletrow > span { flex-wrap: wrap; min-width: 0; }
    .sh-summary__rows .row { flex-wrap: wrap; gap: 2px 10px; }
    .sh-summary__rows .row > span:last-child { margin-left: auto; text-align: right; min-width: 0; }
    .sh-btn { max-width: 100%; white-space: normal; }
}

/* 6. Shop on phones: sort bar fits the screen; product rows keep a right margin. */
@media (max-width: 767.98px) {
    .sh-sortbar { width: 100%; }
    .sh-shop__main .sh-card { width: 100%; }
}

/* 7. Very small phones (≤ 360 px). */
@media (max-width: 360px) {
    .sh-container { padding-left: 12px; padding-right: 12px; }
    .sh-shop__main .sh-card__media { width: 112px; flex: none; }
    .sh-card__price .now { font-size: 1rem; }
}

/* 8. Forms: one column on phones (beats inline 2–3 column grids). */
@media (max-width: 480px) {
    .sh-dform__grid, .sh-form__grid, .sh-dform__grid--3 { grid-template-columns: 1fr !important; }
}

/* 9. Footer contact: long emails/addresses wrap. */
.sh-footer__contact span, .sh-footer__contact a { overflow-wrap: anywhere; }

/* 10. Shop sort bar: chips scroll inside it, the sort box fills the rest. */
@media (max-width: 767.98px) {
    .sh-sortbar > * { min-width: 0; max-width: 100%; }
    .sh-sort { width: 100%; }
    .sh-sort .sh-select { flex: 1 1 0; width: auto; min-width: 0; max-width: none; }
}

/* 11. Checkout: the "edit address" form sits under the address on phones. */
@media (max-width: 575.98px) {
    .sh-addr details { display: block !important; width: 100%; }
    .sh-addr details > form { min-width: 0 !important; }
    .sh-addr > label { flex-wrap: wrap; }
}

/* 12. Header menu: a little tighter on laptop widths so "Deals" never spills. */
@media (max-width: 1520px) and (min-width: 992px) {
    .sh-nav__link { padding-left: 9px; padding-right: 9px; }
}

/* 13. Header category menu never wider than the screen (extra categories hide; see header script). */
.sh-nav__inner { min-width: 0; }
.sh-nav__item[hidden] { display: none !important; }
.sh-nav__inner > li:not(.sh-nav__item) { flex: none; }

/* 14. Product cards: badges never run under the heart button; tidy on phones. */
.sh-card__badges { max-width: calc(100% - 56px); }
.sh-card__badges .sh-badge { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@media (max-width: 767.98px) {
    .sh-card__badges .sh-badge { font-size: .62rem; padding: 3px 7px; }
    .sh-shop__main .sh-card__badges { max-width: calc(100% - 44px); }
    /* The animated "Price dropping" tag covers the title on narrow cards. */
    .sh-drop-flag { display: none !important; }
}

/* 15. Order status: returned to seller (RTO). */
.sh-status--returned { background: #FFF7ED; color: #C2410C; }
.sh-status--returned::before { background: #EA580C; }

/* Summary rows (fee boxes, order totals): a long label wraps inside the card
   and the amount stays on the right instead of being pushed out of it. */
.sh-summary__rows .row { gap: 4px 12px; align-items: flex-start; flex-wrap: nowrap; }
.sh-summary__rows .row > span:first-child { flex: 1 1 auto; min-width: 0; overflow-wrap: anywhere; }
.sh-summary__rows .row > span:last-child { flex: 0 0 auto; white-space: nowrap; margin-left: auto; }
.sh-summary__rows .row a { white-space: normal !important; }

/* Search bars: the whole rounded bar lights up on focus (:focus-within), so the
   field inside must not draw its own focus outline as well. */
.sh-search__box input:focus, .sh-search__box input:focus-visible,
.sh-msearch input:focus, .sh-msearch input:focus-visible,
.sh-drawer__search input:focus, .sh-drawer__search input:focus-visible,
.sh-toolbar__search input:focus, .sh-toolbar__search input:focus-visible {
    outline: none !important; box-shadow: none !important; border-color: transparent;
}
.sh-msearch:focus-within, .sh-drawer__search:focus-within { box-shadow: 0 0 0 3px var(--sh-blue-50, #E8EEFB); border-color: var(--sh-blue, #123B93); }

/* Colour swatches on product cards (search / category / home listings). */
.sh-card__swatches { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin: 4px 0 6px; }
.sh-swatch { width: 18px; height: 18px; border-radius: 50%; background: var(--c, #ccc); border: 1px solid rgba(0,0,0,.18); box-shadow: inset 0 0 0 2px #fff; display: inline-block; transition: transform .15s ease, box-shadow .15s ease; }
.sh-swatch:hover, .sh-swatch:focus-visible { transform: scale(1.15); box-shadow: inset 0 0 0 2px #fff, 0 0 0 2px var(--sh-blue, #123B93); outline: none; }
.sh-swatch__more { font-size: .78rem; font-weight: 600; color: var(--sh-blue, #123B93); text-decoration: none; }