/* Smartweb's Must Have - Shop: Extras. Colours can be set by the theme: --sw-extras-accent, --sw-extras-accent-text. */

/* ---------- icons (external SVG through mask, one line weight) ---------- */
.sw-extras-ico { display: inline-block; width: 1.25rem; height: 1.25rem; flex: none; background: currentColor; -webkit-mask: var(--sw-extras-i) center / contain no-repeat; mask: var(--sw-extras-i) center / contain no-repeat; vertical-align: middle; }
.sw-extras-ico--heart { --sw-extras-i: url(../img/icons/heart.svg); }
.sw-extras-ico--scale { --sw-extras-i: url(../img/icons/scale.svg); }
.sw-extras-ico--close { --sw-extras-i: url(../img/icons/close.svg); }
[aria-pressed="true"] > .sw-extras-ico--heart { --sw-extras-i: url(../img/icons/heart-fill.svg); }

/* inline SVG icons from the theme (filter sw_extras_icon): same size, the heart is filled when pressed */
.sw-extras-svg { display: block; width: 1.25rem; height: 1.25rem; flex: none; }
[aria-pressed="true"] > .sw-extras-svg--heart path { fill: currentColor; }
.sw-extras-remove .sw-extras-svg { width: 1rem; height: 1rem; }

/* ---------- buttons ---------- */
.sw-extras-actions { display: inline-flex; align-items: center; gap: .25rem; }
.sw-extras-btn { display: inline-flex; align-items: center; justify-content: center; gap: .4rem; min-width: 2.25rem; height: 2.25rem; padding: 0 .5rem; border: 0; border-radius: 999px; background: transparent; color: inherit; font: inherit; line-height: 1; cursor: pointer; transition: color .15s, background-color .15s; }
.sw-extras-btn:hover { background: rgba(0, 0, 0, .06); }
.sw-extras-btn:focus-visible, .sw-extras-link:focus-visible, .sw-extras-remove:focus-visible { outline: 2px solid var(--sw-extras-accent, #c0262d); outline-offset: 2px; }
.sw-extras-btn[aria-pressed="true"] { color: var(--sw-extras-accent, #c0262d); }
.sw-extras-label { white-space: nowrap; }

/* ---------- header links with a counter ---------- */
.sw-extras-sr { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
.sw-extras-link { position: relative; display: inline-flex; align-items: center; justify-content: center; width: 2.25rem; height: 2.25rem; border-radius: 999px; color: inherit; text-decoration: none; }
.sw-extras-count { position: absolute; top: -.1rem; right: -.1rem; min-width: 1.1rem; height: 1.1rem; padding: 0 .25rem; border-radius: 999px; background: var(--sw-extras-accent, #c0262d); color: var(--sw-extras-accent-text, #fff); font-size: .7rem; font-weight: 600; line-height: 1.1rem; text-align: center; box-sizing: border-box; }
.sw-extras-count[hidden] { display: none; }

/* ---------- toast ---------- */
.sw-extras-toast { position: fixed; left: 50%; bottom: 1.25rem; z-index: 99999; display: flex; align-items: center; gap: .9rem; max-width: calc(100vw - 2rem); padding: .7rem 1rem; border-radius: .6rem; background: #1f2328; color: #fff; font-size: .9rem; line-height: 1.3; box-shadow: 0 6px 24px rgba(0, 0, 0, .25); opacity: 0; visibility: hidden; transform: translate(-50%, .5rem); transition: opacity .2s, transform .2s, visibility .2s; }
.sw-extras-toast.is-visible { opacity: 1; visibility: visible; transform: translate(-50%, 0); }
.sw-extras-toast__action { flex: none; padding: .3rem .7rem; border: 0; border-radius: .4rem; background: #fff; color: #1f2328; font: inherit; font-weight: 600; text-decoration: none; cursor: pointer; }
@media (prefers-reduced-motion: reduce) { .sw-extras-toast { transition: none; } }

/* ---------- pages ---------- */
/* Page box: centred with side gutters. Themes can change --sw-extras-max and --sw-extras-gutter. */
.sw-extras-page { box-sizing: border-box; width: 100%; max-width: var(--sw-extras-max, 1320px); min-height: 12rem; margin-inline: auto; padding-inline: var(--sw-extras-gutter, 1rem); padding-block: 1rem 2rem; }
/* Wishlist grid for the default WooCommerce loop markup (ul.products). A theme that supplies its own wrapper through the
   sw_extras_wishlist_wrap filter (e.g. a Bootstrap row) lays the cards out itself, nothing is applied to it. */
.sw-extras-grid > ul.products { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(14rem, 100%), 1fr)); gap: 1rem; margin: 0; padding: 0; list-style: none; }
.sw-extras-grid > ul.products > * { float: none !important; width: auto !important; max-width: none; margin: 0 !important; min-width: 0; }
.sw-extras-empty, .sw-extras-hint { margin: 1rem 0; opacity: .75; }
.sw-extras-bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .75rem; margin: 0 0 1rem; }
.sw-extras-diff, .sw-extras-clear { padding: .45rem .9rem; border: 1px solid rgba(0, 0, 0, .2); border-radius: 999px; background: transparent; color: inherit; font: inherit; font-size: .9rem; cursor: pointer; }
.sw-extras-diff[aria-pressed="true"] { background: var(--sw-extras-accent, #c0262d); border-color: var(--sw-extras-accent, #c0262d); color: var(--sw-extras-accent-text, #fff); }
.sw-extras-clear { border-color: transparent; text-decoration: underline; padding-left: 0; padding-right: 0; }

/* comparison table */
.sw-extras-scroll { overflow-x: auto; }
.sw-extras-table { width: 100%; min-width: 36rem; border-collapse: collapse; table-layout: fixed; }
.sw-extras-table th, .sw-extras-table td { padding: .7rem .8rem; border-bottom: 1px solid rgba(0, 0, 0, .1); text-align: left; vertical-align: top; overflow-wrap: anywhere; }
.sw-extras-table tbody th { width: 11rem; font-weight: 600; position: sticky; left: 0; z-index: 1; background: var(--sw-extras-bg, #fff); }
.sw-extras-corner { width: 11rem; position: sticky; left: 0; z-index: 1; background: var(--sw-extras-bg, #fff); }
.sw-extras-product { position: relative; font-weight: 400; padding-top: 2.2rem; }
.sw-extras-thumb { display: block; margin-bottom: .6rem; }
.sw-extras-thumb img { display: block; width: 100%; max-width: 10rem; height: auto; }
.sw-extras-name { display: block; font-weight: 600; color: inherit; text-decoration: none; }
.sw-extras-name:hover { text-decoration: underline; }
.sw-extras-price { display: block; margin-top: .35rem; }
.sw-extras-remove { position: absolute; top: .4rem; right: .4rem; display: inline-flex; align-items: center; justify-content: center; width: 1.9rem; height: 1.9rem; padding: 0; border: 0; border-radius: 999px; background: transparent; color: inherit; cursor: pointer; }
.sw-extras-remove:hover { background: rgba(0, 0, 0, .08); }
.sw-extras-remove .sw-extras-ico { width: 1rem; height: 1rem; }
.sw-extras-table tr.is-diff td, .sw-extras-table tr.is-diff th { background-color: rgba(192, 38, 45, .05); background-color: color-mix(in srgb, var(--sw-extras-accent, #c0262d) 7%, transparent); }
.sw-extras-table tr.is-diff th { background-image: linear-gradient(var(--sw-extras-bg, #fff), var(--sw-extras-bg, #fff)); }
.sw-extras-compare.is-diff-only tbody tr:not(.is-diff) { display: none; }