/* Shipitall design-system components (from the Shipitall design system, v1). Values come from tokens.css. Prefix: sia- */
*,*::before,*::after{box-sizing:border-box}
.sia{font-family:var(--font-sans);color:var(--ink);background:var(--surface);-webkit-font-smoothing:antialiased;font-size:15px;line-height:22px}
.sia :focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.sia-num{font-variant-numeric:tabular-nums}

/* Logo: swap with the colour scheme */
.sia-logo{display:inline-flex;align-items:center}
.sia-logo img{display:block;height:100%}

/* Button */
.sia-btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--space-2);height:var(--size-tap);padding:0 var(--space-4);border-radius:var(--radius-md);border:1px solid transparent;font:600 15px/1 var(--font-sans);cursor:pointer;transition:background-color .15s cubic-bezier(.16,1,.3,1),transform .1s;white-space:nowrap;text-decoration:none}
.sia-btn:active{transform:translateY(1px)}
.sia-btn svg{width:18px;height:18px;flex:none}
.sia-btn--primary{background:var(--accent);color:var(--on-accent)}
.sia-btn--primary:hover{background:var(--accent-hover)}
.sia-btn--secondary{background:var(--surface-raised);color:var(--ink);border-color:var(--line-strong)}
.sia-btn--secondary:hover{background:var(--surface-sunken)}
.sia-btn--dark{background:var(--surface-inverse);color:var(--ink-inverse)}
.sia-btn--ghost{background:transparent;color:var(--accent);padding:0 var(--space-2)}
.sia-btn--sm{height:36px;padding:0 var(--space-3);font-size:13px;border-radius:var(--radius-sm)}
.sia-btn--block{width:100%}
.sia-btn[disabled]{background:var(--surface-sunken);color:var(--ink-subtle);border-color:var(--line);cursor:not-allowed}
.sia-iconbtn{display:inline-grid;place-items:center;width:var(--size-tap);height:var(--size-tap);border-radius:var(--radius-md);background:transparent;border:0;color:var(--ink);cursor:pointer;position:relative}
.sia-iconbtn:hover{background:var(--surface-sunken)}
.sia-iconbtn svg{width:22px;height:22px}
.sia-iconbtn .sia-count{position:absolute;top:4px;right:2px;min-width:18px;height:18px;padding:0 5px;border-radius:var(--radius-pill);background:var(--brand-orange);color:#fff;font:700 11px/18px var(--font-sans);text-align:center}

/* Badges and chips */
.sia-badge{display:inline-flex;align-items:center;gap:4px;height:22px;padding:0 var(--space-2);border-radius:var(--radius-sm);font:500 12px/16px var(--font-sans);letter-spacing:.01em;white-space:nowrap}
.sia-badge svg{width:13px;height:13px}
.sia-badge--sponsored{padding:0;height:auto;color:var(--ink-muted)}
.sia-badge--verified{background:var(--verified);color:var(--on-verified);--seal-tick:var(--verified)}
.sia-badge--new{background:var(--surface-sunken);color:var(--ink)}
.sia-badge--used{background:var(--warning-soft);color:var(--warning)}
.sia-badge--deal{background:var(--accent);color:var(--on-accent);font-weight:700}
.sia-badge--coupon{background:var(--accent-soft);color:var(--accent);box-shadow:inset 0 0 0 1px var(--accent-line);font-weight:600}
.sia-badge--success{background:var(--success-soft);color:var(--success)}
.sia-badge--warning{background:var(--warning-soft);color:var(--warning)}
.sia-badge--danger{background:var(--danger-soft);color:var(--danger)}
.sia-badge--neutral{background:var(--surface-sunken);color:var(--ink-muted)}

/* Condition grade meter: 4 steps, filled up to the grade */
.sia-grade{display:inline-flex;align-items:center;gap:var(--space-2);font:600 13px/16px var(--font-sans)}
.sia-grade__bars{display:inline-flex;gap:3px}
.sia-grade__bars i{width:14px;height:6px;border-radius:var(--radius-pill);background:var(--line)}
.sia-grade__bars i.on{background:var(--ink)}

/* Rating */
.sia-rating{display:inline-flex;align-items:center;gap:6px;font:500 13px/16px var(--font-sans);color:var(--ink-muted)}
.sia-rating__stars{display:inline-flex;gap:1px;color:var(--rating)}
.sia-rating__stars svg{width:14px;height:14px}
.sia-rating b{color:var(--ink);font-weight:600}

/* Price */
.sia-price{font-weight:700;font-variant-numeric:tabular-nums;letter-spacing:-.01em;color:var(--ink)}
.sia-price--sale{color:var(--accent)}
.sia-price__was{color:var(--ink-muted);text-decoration:line-through;font-weight:400;font-size:13px;margin-left:6px}
.sia-price__cents{font-size:.62em;vertical-align:.5em;margin-left:1px}

/* Search */
.sia-search{display:flex;align-items:center;height:var(--size-tap);border-radius:var(--radius-md);background:var(--surface-sunken);border:1px solid var(--line);padding:0 4px 0 var(--space-3);gap:var(--space-2);width:100%}
.sia-search:focus-within{border-color:var(--accent);background:var(--surface-raised)}
.sia-search svg{width:20px;height:20px;color:var(--ink-muted);flex:none}
.sia-search input{flex:1;min-width:0;border:0;background:transparent;font:400 15px/22px var(--font-sans);color:var(--ink);outline:none}
.sia-search input::placeholder{color:var(--ink-subtle)}
.sia-search__go{height:36px;padding:0 var(--space-4);border:0;border-radius:var(--radius-sm);background:var(--accent);color:var(--on-accent);font:600 14px/1 var(--font-sans)}
.sia-suggest{background:var(--surface-raised);border:1px solid var(--line);border-radius:var(--radius-lg);box-shadow:var(--shadow-pop);padding:var(--space-2);margin-top:6px}
.sia-suggest__row{display:flex;align-items:center;gap:var(--space-3);padding:var(--space-2);border-radius:var(--radius-md)}
.sia-suggest__row:hover,.sia-suggest__row.is-active{background:var(--surface-sunken)}
.sia-suggest__img{width:40px;height:40px;border-radius:var(--radius-sm);background:var(--media);flex:none;overflow:hidden;isolation:isolate}
.sia-suggest__img img{width:100%;height:100%;object-fit:contain;padding:2px;mix-blend-mode:multiply}
.sia-suggest mark{background:none;color:var(--ink);font-weight:700}

/* Product card */
.sia-card{display:flex;flex-direction:column;background:var(--surface-raised);border:1px solid var(--line);border-radius:var(--radius-lg);overflow:hidden;transition:box-shadow .2s cubic-bezier(.16,1,.3,1),transform .2s cubic-bezier(.16,1,.3,1);position:relative;color:var(--ink);text-decoration:none}
.sia-card:hover{box-shadow:var(--shadow-card-hover);transform:translateY(-2px)}
/* Whole product, never cropped: contain inside a light square; multiply melts white photo backgrounds into it. */
.sia-card__media{aspect-ratio:1/1;background:var(--media);position:relative;overflow:hidden;isolation:isolate}
.sia-card__media img{width:100%;height:100%;object-fit:contain;padding:8%;box-sizing:border-box;display:block;mix-blend-mode:multiply}
.sia-card__tags{position:absolute;top:var(--space-2);left:var(--space-2);display:flex;gap:4px;flex-wrap:wrap}
.sia-card__wish{position:absolute;top:6px;right:6px;width:36px;height:36px;border-radius:var(--radius-pill);background:var(--surface-raised);display:grid;place-items:center;color:var(--ink);border:0}
.sia-card__wish svg{width:18px;height:18px}
.sia-card__body{padding:var(--space-3);display:flex;flex-direction:column;gap:6px;flex:1}
.sia-card__title{font:500 14px/20px var(--font-sans);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;min-height:40px}
.sia-card__vendor{font:400 12px/16px var(--font-sans);color:var(--ink-muted);display:flex;align-items:center;gap:4px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sia-card__vendor svg{width:13px;height:13px;color:var(--ink);flex:none}
.sia-card__price{font:700 17px/22px var(--font-sans);font-variant-numeric:tabular-nums;margin-top:auto}
.sia-card__ship{font:500 12px/16px var(--font-sans);color:var(--success);display:flex;align-items:center;gap:4px}
.sia-card__ship svg{width:14px;height:14px}
.sia-card__sponsored{font:500 11px/14px var(--font-sans);color:var(--ink-muted);letter-spacing:.02em}

/* Free-shipping progress */
.sia-freeship{display:flex;flex-direction:column;gap:6px}
.sia-freeship__text{font:400 13px/18px var(--font-sans);color:var(--ink-muted)}
.sia-freeship__text b{color:var(--ink);font-weight:600}
.sia-freeship__track{height:6px;border-radius:var(--radius-pill);background:var(--surface-sunken);overflow:hidden}
.sia-freeship__fill{height:100%;border-radius:var(--radius-pill);background:var(--brand-orange)}
.sia-freeship.is-done .sia-freeship__fill{background:var(--success)}
.sia-freeship.is-done .sia-freeship__text{color:var(--success);font-weight:600}

/* Courier option (radio row) */
.sia-courier{display:flex;align-items:center;gap:var(--space-3);min-height:56px;padding:var(--space-3);border:1px solid var(--line-strong);border-radius:var(--radius-md);background:var(--surface-raised);cursor:pointer}
.sia-courier + .sia-courier{margin-top:var(--space-2)}
.sia-courier__radio{width:20px;height:20px;border-radius:50%;border:2px solid var(--line-strong);flex:none;display:grid;place-items:center}
.sia-courier.is-selected{border-color:var(--accent);background:var(--accent-soft)}
.sia-courier.is-selected .sia-courier__radio{border-color:var(--accent)}
.sia-courier.is-selected .sia-courier__radio::after{content:"";width:10px;height:10px;border-radius:50%;background:var(--accent)}
.sia-courier__main{flex:1;min-width:0}
.sia-courier__name{font:600 14px/20px var(--font-sans)}
.sia-courier__meta{font:400 12px/16px var(--font-sans);color:var(--ink-muted)}
.sia-courier__price{font:700 15px/20px var(--font-sans);font-variant-numeric:tabular-nums}
.sia-courier__point{margin-top:var(--space-2);display:flex;align-items:center;gap:6px;font:500 13px/18px var(--font-sans);color:var(--accent)}

/* Form field */
.sia-field{display:flex;flex-direction:column;gap:6px}
.sia-field label{font:600 13px/16px var(--font-sans)}
.sia-input{height:var(--size-tap);border-radius:var(--radius-md);border:1px solid var(--line-strong);background:var(--surface-raised);padding:0 var(--space-3);font:400 15px/22px var(--font-sans);color:var(--ink);width:100%}
.sia-input:focus{outline:2px solid var(--accent);outline-offset:0;border-color:var(--accent)}
.sia-field__help{font:400 12px/16px var(--font-sans);color:var(--ink-muted)}
.sia-field.is-error .sia-input{border-color:var(--danger)}
.sia-field.is-error .sia-field__help{color:var(--danger);display:flex;gap:4px;align-items:center}

/* Vendor line */
.sia-vendor{display:flex;align-items:center;gap:var(--space-3)}
.sia-vendor__mark{width:40px;height:40px;border-radius:var(--radius-pill);background:var(--surface-sunken);color:var(--ink);display:grid;place-items:center;font:700 14px/1 var(--font-sans);flex:none;border:1px solid var(--line)}
.sia-vendor__name{font:600 15px/20px var(--font-sans);display:flex;align-items:center;gap:var(--space-2)}
.sia-vendor__meta{font:400 13px/18px var(--font-sans);color:var(--ink-muted)}

/* Header */
.sia-header{background:var(--surface-raised);border-bottom:1px solid var(--line)}
.sia-header__row{display:flex;align-items:center;gap:var(--space-4);height:var(--size-header);padding:0 var(--space-6);max-width:var(--size-content);margin:0 auto}
.sia-header--mobile .sia-header__row{height:56px;padding:0 var(--space-2) 0 var(--space-1);gap:var(--space-1)}

/* Filter pill */
.sia-pill{display:inline-flex;align-items:center;gap:6px;height:36px;padding:0 var(--space-3);border-radius:var(--radius-pill);border:1px solid var(--line-strong);background:var(--surface-raised);font:500 13px/1 var(--font-sans);color:var(--ink);white-space:nowrap}
.sia-pill.is-on{background:var(--surface-inverse);color:var(--ink-inverse);border-color:var(--surface-inverse)}
.sia-pill svg{width:14px;height:14px}

/* Checkbox row */
.sia-check{display:flex;align-items:center;gap:var(--space-2);min-height:32px;font:400 14px/20px var(--font-sans);color:var(--ink)}
.sia-check__box{width:18px;height:18px;border-radius:5px;border:1.5px solid var(--line-strong);flex:none;display:grid;place-items:center;background:var(--surface-raised)}
.sia-check.is-on .sia-check__box{background:var(--accent);border-color:var(--accent);color:var(--on-accent)}
.sia-check__box svg{width:12px;height:12px}
.sia-check__count{margin-left:auto;color:var(--ink-muted);font-size:12px}

@media (prefers-reduced-motion:reduce){.sia-card,.sia-btn{transition:none}.sia-card:hover{transform:none}}