:root,
html[data-shop-theme="light"] {
    --shop-bg: #f5f7f9;
    --shop-shell: #f5f7f9;
    --shop-surface: #ffffff;
    --shop-surface-2: #f8fafc;
    --shop-panel: #ffffff;
    --shop-text: #111827;
    --shop-muted: #6b7280;
    --shop-border: #e5e7eb;
    --shop-border-strong: #d1d5db;
    --shop-header-bg: rgba(255, 255, 255, .92);
    --shop-footer-bg: #111827;
    --shop-footer-text: #d1d5db;
    --shop-shadow-sm: 0 1px 2px rgba(15, 23, 42, .04), 0 8px 24px rgba(15, 23, 42, .05);
    --shop-shadow: 0 2px 8px rgba(15, 23, 42, .06), 0 18px 42px rgba(15, 23, 42, .08);
    --shop-success-soft: rgba(23, 201, 100, .10);
    --shop-danger-soft: rgba(239, 68, 68, .10);
    --shop-primary-soft: color-mix(in srgb, var(--shop-primary) 12%, transparent);
}

html[data-shop-theme="dark"] {
    --shop-bg: #0f172a;
    --shop-shell: radial-gradient(circle at 14% 0%, rgba(23, 201, 100, .13), transparent 28%), radial-gradient(circle at 92% 8%, rgba(59, 130, 246, .11), transparent 30%), linear-gradient(135deg, #111827 0%, #172033 52%, #1f2b3d 100%);
    --shop-surface: #1d293b;
    --shop-surface-2: #263449;
    --shop-panel: rgba(29, 41, 59, .94);
    --shop-text: #f8fafc;
    --shop-muted: #aeb8c7;
    --shop-border: rgba(148, 163, 184, .20);
    --shop-border-strong: rgba(203, 213, 225, .30);
    --shop-header-bg: rgba(29, 41, 59, .78);
    --shop-footer-bg: rgba(10, 16, 26, .96);
    --shop-footer-text: #cbd5e1;
    --shop-shadow-sm: 0 12px 30px rgba(0, 0, 0, .22);
    --shop-shadow: 0 24px 56px rgba(0, 0, 0, .30);
    --shop-success-soft: rgba(23, 201, 100, .14);
    --shop-danger-soft: rgba(239, 68, 68, .13);
    --shop-primary-soft: color-mix(in srgb, var(--shop-primary) 20%, transparent);
}

html, body {
    min-height: 100%;
    background: var(--shop-bg);
    color: var(--shop-text);
    font-family: Inter, "Segoe UI", system-ui, sans-serif;
    -webkit-font-smoothing: antialiased;
}

body { margin: 0; }
a { color: inherit; }
.shop-shell { min-height: 100vh; display: flex; flex-direction: column; background: var(--shop-shell); }
.shop-header { position: sticky; top: 0; z-index: 1030; border-bottom: 1px solid var(--shop-border); background: var(--shop-header-bg); backdrop-filter: blur(22px); }
.shop-header-inner { min-height: 68px; max-width: 1480px; margin: 0 auto; padding: 9px 20px; display: flex; align-items: center; gap: 22px; }
.shop-brand { display: flex; align-items: center; gap: 11px; min-width: 220px; text-decoration: none; }
.shop-logo { width: 44px; height: 44px; display: grid; place-items: center; overflow: hidden; border: 1px solid var(--shop-border); border-radius: 5px; background: #fff; box-shadow: var(--shop-shadow-sm); }
.shop-logo img { width: 100%; height: 100%; object-fit: contain; padding: 4px; }
.shop-logo .material-icons { color: var(--shop-primary); }
.shop-brand-copy { min-width: 0; display: flex; flex-direction: column; }
.shop-brand-name { max-width: 240px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: .94rem; font-weight: 600; }
.shop-brand-subtitle { color: var(--shop-muted); font-size: .66rem; letter-spacing: .08em; text-transform: uppercase; }
.shop-desktop-nav { flex: 1; display: flex; justify-content: center; align-items: center; gap: 5px; }
.shop-desktop-nav a { padding: 9px 12px; border-radius: 5px; color: var(--shop-muted); text-decoration: none; font-size: .82rem; font-weight: 500; }
.shop-desktop-nav a:hover { color: var(--shop-text); background: var(--shop-primary-soft); }
.shop-header-actions { display: flex; align-items: center; gap: 8px; }
.shop-icon-button, .shop-icon-link, .shop-cart-link { min-height: 40px; display: inline-flex; align-items: center; justify-content: center; gap: 7px; border: 1px solid var(--shop-border); border-radius: 5px; background: var(--shop-surface); color: var(--shop-text); text-decoration: none; padding: 0 11px; font-size: .78rem; box-shadow: var(--shop-shadow-sm); }
.shop-icon-button { width: 40px; padding: 0; cursor: pointer; }
.shop-icon-button:hover, .shop-icon-link:hover { border-color: var(--shop-border-strong); background: var(--shop-surface-2); }
.shop-cart-link { border-color: transparent; background: var(--shop-primary); color: #fff; }
.shop-cart-count { min-width: 19px; height: 19px; padding: 0 5px; display: grid; place-items: center; border-radius: 5px; background: rgba(0,0,0,.18); font-size: .68rem; }
.shop-main { flex: 1; padding: 24px 20px 36px; }
.shop-content { max-width: 1480px; margin: 0 auto; }
.shop-notice { display: flex; align-items: flex-start; gap: 10px; margin-bottom: 14px; padding: 11px 13px; border: 1px solid var(--shop-border); border-radius: 5px; background: var(--shop-surface); box-shadow: var(--shop-shadow-sm); }
.shop-notice.is-success { background: var(--shop-success-soft); border-color: color-mix(in srgb, var(--shop-primary) 26%, var(--shop-border)); }
.shop-notice.is-danger { background: var(--shop-danger-soft); border-color: rgba(239,68,68,.24); }
.shop-card, .shop-account-card, .shop-summary-card, .shop-checkout-card, .shop-status-card { border: 1px solid var(--shop-border); border-radius: 5px; background: var(--shop-panel); color: var(--shop-text); box-shadow: var(--shop-shadow-sm); }
.shop-card, .shop-account-card, .shop-summary-card, .shop-checkout-card, .shop-status-card { padding: 18px; }
.shop-toolbar { display: grid; grid-template-columns: minmax(280px, 1fr) 190px 190px auto; gap: 9px; margin-bottom: 16px; padding: 11px; border: 1px solid var(--shop-border); border-radius: 5px; background: var(--shop-panel); box-shadow: var(--shop-shadow-sm); }
.shop-toolbar .input-group-text, .shop-toolbar .form-control, .shop-toolbar .form-select, .shop-form .form-control, .shop-form .form-select, .shop-form textarea, .shop-variant-row .form-control { border-color: var(--shop-border); background: var(--shop-surface); color: var(--shop-text); }
.form-control:focus, .form-select:focus { border-color: var(--shop-primary); box-shadow: 0 0 0 3px var(--shop-primary-soft); }
.shop-primary-button, .shop-secondary-button { min-height: 38px; display: inline-flex; align-items: center; justify-content: center; gap: 7px; border-radius: 5px; padding: 0 14px; text-decoration: none; font-size: .8rem; font-weight: 600; transition: transform .14s ease, box-shadow .14s ease, border-color .14s ease; }
.shop-primary-button { border: 1px solid transparent; background: var(--shop-primary); color: #fff; }
.shop-secondary-button { border: 1px solid var(--shop-border); background: var(--shop-surface); color: var(--shop-text); }
.shop-primary-button:hover, .shop-secondary-button:hover { transform: translateY(-1px); box-shadow: var(--shop-shadow-sm); }
.shop-product-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 13px; }
.shop-product-card { min-width: 0; overflow: hidden; border: 1px solid var(--shop-border); border-radius: 5px; background: var(--shop-panel); box-shadow: var(--shop-shadow-sm); transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease; }
.shop-product-card:hover { transform: translateY(-3px); border-color: color-mix(in srgb, var(--shop-primary) 36%, var(--shop-border)); box-shadow: var(--shop-shadow); }
.shop-product-image { position: relative; aspect-ratio: 4 / 3; overflow: hidden; background: linear-gradient(135deg, var(--shop-surface-2), var(--shop-surface)); }
.shop-product-image img { width: 100%; height: 100%; object-fit: cover; transition: transform .22s ease; }
.shop-product-card:hover .shop-product-image img { transform: scale(1.025); }
.shop-product-placeholder { width: 100%; height: 100%; display: grid; place-items: center; color: var(--shop-primary); }
.shop-product-placeholder .material-icons { font-size: 52px; opacity: .6; }
.shop-product-badges { position: absolute; top: 9px; left: 9px; display: flex; flex-wrap: wrap; gap: 5px; }
.shop-product-badge { padding: 4px 7px; border-radius: 5px; background: rgba(17,24,39,.82); color: #fff; font-size: .62rem; letter-spacing: .04em; text-transform: uppercase; backdrop-filter: blur(8px); }
.shop-product-body { padding: 13px; }
.shop-product-meta { color: var(--shop-muted); font-size: .68rem; letter-spacing: .05em; text-transform: uppercase; }
.shop-product-title { margin: 5px 0 14px; font-size: .98rem; font-weight: 600; line-height: 1.3; }
.shop-product-title a { text-decoration: none; }
.shop-product-footer { display: flex; justify-content: space-between; gap: 10px; align-items: end; }
.shop-price { font-weight: 600; }
.shop-stock { color: var(--shop-muted); font-size: .72rem; }
.shop-product-detail { display: grid; grid-template-columns: minmax(0, .9fr) minmax(420px, 1.1fr); gap: 16px; }
.shop-product-detail-image { min-height: 460px; display: grid; place-items: center; overflow: hidden; border-radius: 5px; background: var(--shop-surface-2); }
.shop-product-detail-image img { width: 100%; height: 100%; object-fit: contain; }
.shop-variant-list { display: flex; flex-direction: column; gap: 8px; }
.shop-variant-row { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: 12px; align-items: center; padding: 11px 12px; border: 1px solid var(--shop-border); border-radius: 5px; background: var(--shop-surface-2); }
.shop-variant-row.is-out { opacity: .58; }
.shop-variant-name { font-weight: 600; }
.shop-cart-layout, .shop-checkout-layout, .shop-payment-grid { display: grid; grid-template-columns: minmax(0, 1.45fr) minmax(320px, .55fr); gap: 16px; align-items: start; }
.shop-cart-list, .shop-order-list { display: flex; flex-direction: column; gap: 9px; }
.shop-cart-item, .shop-order-row { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: 12px; align-items: center; padding: 12px; border: 1px solid var(--shop-border); border-radius: 5px; background: var(--shop-surface-2); }
.shop-cart-name { font-weight: 600; }
.shop-cart-variant { color: var(--shop-muted); font-size: .74rem; }
.shop-summary-card { position: sticky; top: 88px; }
.shop-summary-line { display: flex; justify-content: space-between; gap: 12px; padding: 8px 0; border-bottom: 1px solid var(--shop-border); }
.shop-summary-line.total { padding-top: 12px; border-bottom: 0; font-size: 1.02rem; font-weight: 600; }
.shop-form { display: flex; flex-direction: column; gap: 13px; }
.shop-form-group { display: flex; flex-direction: column; gap: 5px; }
.shop-form-label { color: var(--shop-muted); font-size: .75rem; font-weight: 500; }
.shop-fulfillment-options { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 9px; }
.shop-fulfillment-option { border: 1px solid var(--shop-border); border-radius: 5px; background: var(--shop-surface-2); padding: 12px; }
.shop-status-timeline { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 9px; margin: 16px 0; }
.shop-status-step { padding: 13px; border: 1px solid var(--shop-border); border-radius: 5px; background: var(--shop-panel); color: var(--shop-muted); }
.shop-status-step.current, .shop-status-step.complete { color: var(--shop-text); border-color: color-mix(in srgb, var(--shop-primary) 34%, var(--shop-border)); background: var(--shop-primary-soft); }
.shop-status-step .material-icons { display: block; margin-bottom: 6px; color: var(--shop-primary); }
.shop-status-pill { display: inline-flex; align-items: center; gap: 5px; padding: 5px 8px; border-radius: 5px; background: var(--shop-primary-soft); color: var(--shop-text); font-size: .7rem; }
.shop-empty { padding: 42px 20px; border: 1px dashed var(--shop-border-strong); border-radius: 5px; text-align: center; background: var(--shop-panel); }
.shop-empty > .material-icons { font-size: 46px; color: var(--shop-primary); }
.shop-pagination { display: flex; align-items: center; justify-content: center; gap: 12px; margin-top: 18px; }
.shop-store-page-sections { color: var(--shop-text); }
.shop-store-page-sections img { max-width: 100%; height: auto; border-radius: 5px; }
.shop-store-page-sections .ql-align-center { text-align: center; }
.shop-store-page-sections .ql-align-right { text-align: right; }
.shop-store-page-sections .ql-align-justify { text-align: justify; }
.shop-store-page-sections .ql-font-serif { font-family: Georgia, "Times New Roman", serif; }
.shop-store-page-sections .ql-font-monospace { font-family: "Courier New", monospace; }
.shop-footer { margin-top: auto; border-top: 1px solid rgba(255,255,255,.08); background: var(--shop-footer-bg); color: var(--shop-footer-text); }
.shop-footer-grid { max-width: 1480px; margin: 0 auto; padding: 24px 20px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; font-size: .75rem; }
.shop-footer-title { margin-bottom: 5px; color: #fff; font-weight: 600; }
.shop-mobile-nav { display: none; }

.shop-content .breadcrumb { margin-bottom: 10px; font-size: .74rem; }
.shop-content .breadcrumb a { color: var(--shop-muted); text-decoration: none; }
.shop-content h1 { margin-bottom: 4px; font-size: clamp(1.55rem, 2.4vw, 2.35rem); font-weight: 600; letter-spacing: -.03em; }
.shop-content .text-muted { color: var(--shop-muted) !important; }
.shop-content .alert { border-radius: 5px; }

@media (max-width: 1100px) {
    .shop-product-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .shop-toolbar { grid-template-columns: minmax(220px, 1fr) 170px 170px auto; }
}

@media (max-width: 820px) {
    .shop-header-inner { padding: 8px 12px; }
    .shop-brand { min-width: 0; flex: 1; }
    .shop-brand-subtitle, .shop-desktop-nav, .shop-icon-link { display: none; }
    .shop-main { padding: 16px 12px 90px; }
    .shop-toolbar { grid-template-columns: 1fr 1fr; }
    .shop-toolbar .input-group { grid-column: 1 / -1; }
    .shop-product-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .shop-product-detail, .shop-cart-layout, .shop-checkout-layout, .shop-payment-grid { grid-template-columns: 1fr; }
    .shop-summary-card { position: static; }
    .shop-footer-grid { grid-template-columns: 1fr; }
    .shop-mobile-nav { position: fixed; left: 0; right: 0; bottom: 0; z-index: 1040; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border-top: 1px solid var(--shop-border); background: var(--shop-header-bg); backdrop-filter: blur(22px); }
    .shop-mobile-nav a { min-height: 62px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; color: var(--shop-muted); text-decoration: none; font-size: .66rem; }
    .shop-mobile-nav .material-icons { font-size: 20px; }
}

@media (max-width: 560px) {
    .shop-brand-name { max-width: 150px; }
    .shop-cart-link > span:not(.material-icons):not(.shop-cart-count) { display: none; }
    .shop-toolbar { grid-template-columns: 1fr; }
    .shop-toolbar .input-group { grid-column: auto; }
    .shop-product-grid { grid-template-columns: 1fr; }
    .shop-product-image { aspect-ratio: 16 / 10; }
    .shop-product-detail-image { min-height: 300px; }
    .shop-variant-row, .shop-cart-item, .shop-order-row { grid-template-columns: 1fr auto; }
    .shop-variant-row form { grid-column: 1 / -1; }
    .shop-fulfillment-options, .shop-status-timeline { grid-template-columns: 1fr; }
}

/* Checkout and cart refinement */
.shop-breadcrumbs {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 5px;
    margin: 0 0 10px;
    color: var(--shop-muted);
    font-size: .72rem;
}
.shop-breadcrumb-link,
.shop-breadcrumb-current {
    display: inline-flex;
    align-items: center;
    color: var(--shop-muted);
    text-decoration: none;
    line-height: 1.4;
}
.shop-breadcrumb-link:hover { color: var(--shop-text); text-decoration: underline; text-underline-offset: 3px; }
.shop-breadcrumb-current { color: var(--shop-text); }
.shop-breadcrumb-separator { font-size: 14px; color: var(--shop-muted); opacity: .65; }
.shop-page-header { display: flex; justify-content: space-between; gap: 16px; margin-bottom: 16px; }
.shop-page-header h1 { margin: 0; font-size: clamp(1.7rem, 2.4vw, 2.35rem); font-weight: 600; letter-spacing: -.035em; }
.shop-page-header p { max-width: 680px; margin: 5px 0 0; color: var(--shop-muted); font-size: .86rem; }
.shop-checkout-progress { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); max-width: 720px; margin: 0 0 18px; border: 1px solid var(--shop-border); border-radius: 5px; background: var(--shop-panel); box-shadow: var(--shop-shadow-sm); overflow: hidden; }
.shop-checkout-progress > * { position: relative; display: flex; align-items: center; gap: 8px; min-height: 48px; padding: 0 13px; color: var(--shop-muted); text-decoration: none; border-right: 1px solid var(--shop-border); }
.shop-checkout-progress > *:last-child { border-right: 0; }
.shop-checkout-progress span { width: 24px; height: 24px; display: grid; place-items: center; border: 1px solid var(--shop-border-strong); border-radius: 5px; font-size: .72rem; }
.shop-checkout-progress strong { font-size: .76rem; font-weight: 600; }
.shop-checkout-progress .is-current { color: var(--shop-text); background: var(--shop-primary-soft); }
.shop-checkout-progress .is-current span { border-color: var(--shop-primary); background: var(--shop-primary); color: #fff; }
.shop-checkout-layout { grid-template-columns: minmax(0, 820px) minmax(300px, 380px); justify-content: center; gap: 18px; }
.shop-checkout-stack { display: flex; flex-direction: column; gap: 12px; }
.shop-checkout-card { padding: 18px; }
.shop-card-heading, .shop-summary-heading { display: flex; align-items: center; gap: 11px; margin-bottom: 16px; }
.shop-card-heading h2, .shop-summary-heading h2 { margin: 0; font-size: 1rem; font-weight: 600; }
.shop-card-heading p, .shop-summary-heading p { margin: 2px 0 0; color: var(--shop-muted); font-size: .72rem; }
.shop-card-icon { width: 36px; height: 36px; display: grid; place-items: center; border-radius: 5px; background: var(--shop-primary-soft); color: var(--shop-primary); font-size: 20px; }
.shop-field-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 11px 12px; align-items: end; }
.shop-field-wide { grid-column: span 2; }
.shop-field-date { max-width: 260px; }
.shop-field-state { max-width: 100px; }
.shop-field-postal { max-width: 160px; }
.shop-field-grid-notes { margin-top: 13px; grid-template-columns: minmax(220px, 280px) minmax(0, 1fr); }
.shop-form-label { color: var(--shop-text); font-size: .7rem; }
.shop-form .form-control, .shop-form .form-select { min-height: 40px; border-radius: 5px; padding: 8px 10px; font-size: .82rem; }
.shop-form textarea.form-control { min-height: 72px; resize: vertical; }
.shop-fulfillment-options { grid-template-columns: repeat(2, minmax(0, 280px)); }
.shop-fulfillment-option { position: relative; display: grid; grid-template-columns: auto 1fr; align-items: center; gap: 10px; min-height: 74px; padding: 12px 13px; cursor: pointer; }
.shop-fulfillment-option input { position: absolute; opacity: 0; pointer-events: none; }
.shop-fulfillment-option:has(input:checked) { border-color: var(--shop-primary); background: var(--shop-primary-soft); box-shadow: 0 0 0 1px color-mix(in srgb, var(--shop-primary) 24%, transparent); }
.shop-fulfillment-icon { width: 36px; height: 36px; display: grid; place-items: center; border-radius: 5px; background: var(--shop-surface); color: var(--shop-primary); }
.shop-fulfillment-check { position: absolute; top: 7px; right: 7px; color: var(--shop-primary); font-size: 17px; opacity: 0; }
.shop-fulfillment-option:has(input:checked) .shop-fulfillment-check { opacity: 1; }
.shop-fulfillment-option strong, .shop-fulfillment-option small { display: block; }
.shop-fulfillment-option strong { font-size: .82rem; font-weight: 600; }
.shop-fulfillment-option small { margin-top: 2px; color: var(--shop-muted); font-size: .68rem; }
.shop-delivery-fields { margin-top: 14px; padding: 14px; border: 1px solid var(--shop-border); border-radius: 5px; background: var(--shop-surface-2); }
.shop-address-grid { grid-template-columns: minmax(0, 1fr) minmax(150px, .45fr) 100px 150px; }
.shop-address-grid .shop-field-wide { grid-column: span 2; }
.shop-age-card { border-left: 3px solid var(--shop-primary); }
.shop-confirmation-check { display: flex; align-items: flex-start; gap: 10px; padding: 12px; border: 1px solid var(--shop-border); border-radius: 5px; background: var(--shop-surface-2); font-size: .8rem; cursor: pointer; }
.shop-checkout-summary { top: 88px; }
.shop-summary-products { margin-bottom: 8px; }
.shop-summary-product { display: flex; justify-content: space-between; gap: 12px; padding: 9px 0; border-bottom: 1px solid var(--shop-border); font-size: .78rem; }
.shop-summary-product-copy strong, .shop-summary-product-copy span { display: block; }
.shop-summary-product-copy strong { font-weight: 600; }
.shop-summary-product-copy span { margin-top: 2px; color: var(--shop-muted); font-size: .68rem; }
.shop-payment-button { width: 100%; min-height: 44px; margin-top: 12px; }
.shop-secure-note { display: flex; align-items: flex-start; gap: 7px; margin-top: 12px; color: var(--shop-muted); font-size: .68rem; line-height: 1.45; }
.shop-secure-note .material-icons { margin-top: 1px; font-size: 16px; color: var(--shop-primary); }
.shop-checkout-message, .shop-minimum-note { margin-top: 12px; padding: 10px; border: 1px solid var(--shop-border); border-radius: 5px; background: var(--shop-surface-2); color: var(--shop-muted); font-size: .7rem; }
.shop-cart-item { grid-template-columns: 112px minmax(0, 1fr) auto; padding: 12px; }
.shop-cart-media { width: 112px; height: 92px; overflow: hidden; border: 1px solid var(--shop-border); border-radius: 5px; background: var(--shop-surface); }
.shop-cart-media img { width: 100%; height: 100%; object-fit: contain; display: block; }
.shop-cart-item-placeholder { width: 100%; height: 100%; display: grid; place-items: center; color: var(--shop-primary); background: var(--shop-primary-soft); }
.shop-cart-copy { min-width: 0; }
.shop-cart-category { color: var(--shop-muted); font-size: .62rem; letter-spacing: .06em; text-transform: uppercase; }
.shop-cart-name { margin: 3px 0; font-size: .94rem; }
.shop-cart-name a { color: var(--shop-text); text-decoration: none; }
.shop-cart-unit { margin-top: 4px; color: var(--shop-muted); font-size: .7rem; }
.shop-cart-actions { display: flex; align-items: center; gap: 8px; margin-top: 10px; }
.shop-quantity-form { display: flex; align-items: center; gap: 6px; }
.shop-quantity-form input { width: 66px; min-height: 36px; border: 1px solid var(--shop-border); border-radius: 5px; background: var(--shop-surface); color: var(--shop-text); padding: 6px 8px; }
.shop-quantity-form .shop-secondary-button { min-height: 36px; }
.shop-remove-button { display: inline-flex; align-items: center; gap: 4px; min-height: 36px; border: 0; background: transparent; color: #dc3545; font-size: .72rem; }
.shop-remove-button .material-icons { font-size: 17px; }
.shop-cart-line-total { align-self: start; font-size: .95rem; font-weight: 600; }

@media (max-width: 900px) {
    .shop-checkout-layout { grid-template-columns: 1fr; }
    .shop-checkout-summary { position: static; }
    .shop-address-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .shop-address-grid .shop-field-wide { grid-column: span 2; }
}
@media (max-width: 620px) {
    .shop-checkout-progress { grid-template-columns: repeat(4, 1fr); }
    .shop-checkout-progress > * { justify-content: center; padding: 0 5px; }
    .shop-checkout-progress strong { display: none; }
    .shop-field-grid, .shop-field-grid-notes, .shop-address-grid, .shop-fulfillment-options { grid-template-columns: 1fr; }
    .shop-field-wide, .shop-address-grid .shop-field-wide { grid-column: auto; }
    .shop-field-date, .shop-field-state, .shop-field-postal { max-width: none; }
    .shop-cart-item { grid-template-columns: 84px minmax(0, 1fr); }
    .shop-cart-media { width: 84px; height: 76px; }
    .shop-cart-line-total { grid-column: 2; }
    .shop-cart-actions { align-items: flex-start; flex-direction: column; }
}


/* Ecommerce catalog and product detail */
.shop-product-placeholder[hidden], [hidden] { display: none !important; }
.shop-catalog-toolbar { display:grid; grid-template-columns:minmax(320px,1fr) 190px 170px 120px auto; gap:8px; align-items:center; margin-bottom:10px; padding:10px; border:1px solid var(--shop-border); border-radius:5px; background:var(--shop-panel); box-shadow:var(--shop-shadow-sm); }
.shop-search-field { min-height:38px; display:flex; align-items:center; gap:8px; padding:0 10px; border:1px solid var(--shop-border); border-radius:5px; background:var(--shop-surface); }
.shop-search-field:focus-within { border-color:var(--shop-primary); box-shadow:0 0 0 3px var(--shop-primary-soft); }
.shop-search-field > .material-icons { color:var(--shop-muted); font-size:19px; }
.shop-search-field input { min-width:0; flex:1; border:0; outline:0; background:transparent; color:var(--shop-text); font-size:.82rem; }
.shop-search-clear { display:grid; place-items:center; color:var(--shop-muted); text-decoration:none; }
.shop-search-clear .material-icons { font-size:17px; }
.shop-catalog-toolbar .form-select { min-height:38px; border-color:var(--shop-border); border-radius:5px; background-color:var(--shop-surface); color:var(--shop-text); font-size:.76rem; }
.shop-filter-button { min-height:38px; white-space:nowrap; }
.shop-catalog-bar { display:flex; align-items:center; justify-content:space-between; gap:14px; margin-bottom:12px; }
.shop-catalog-bar > div:first-child { display:flex; align-items:baseline; gap:8px; }
.shop-catalog-bar strong { font-size:.8rem; font-weight:600; }
.shop-catalog-bar span { color:var(--shop-muted); font-size:.7rem; }
.shop-view-controls { display:flex; gap:7px; }
.shop-segmented-control { display:flex; overflow:hidden; border:1px solid var(--shop-border); border-radius:5px; background:var(--shop-surface); }
.shop-segmented-control button { width:36px; height:34px; display:grid; place-items:center; border:0; border-right:1px solid var(--shop-border); background:transparent; color:var(--shop-muted); cursor:pointer; }
.shop-segmented-control button:last-child { border-right:0; }
.shop-segmented-control button.is-active { background:var(--shop-primary-soft); color:var(--shop-primary); }
.shop-segmented-control .material-icons { font-size:18px; }
.shop-product-results.is-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:12px; }
.shop-product-results.is-grid.images-small { grid-template-columns:repeat(5,minmax(0,1fr)); }
.shop-product-card { display:flex; min-width:0; overflow:hidden; border:1px solid var(--shop-border); border-radius:5px; background:var(--shop-panel); box-shadow:var(--shop-shadow-sm); transition:transform .16s ease, box-shadow .16s ease, border-color .16s ease; }
.shop-product-results.is-grid .shop-product-card { flex-direction:column; }
.shop-product-card:hover { transform:translateY(-2px); border-color:color-mix(in srgb,var(--shop-primary) 34%,var(--shop-border)); box-shadow:var(--shop-shadow); }
.shop-product-image { position:relative; display:block; overflow:hidden; background:linear-gradient(135deg,var(--shop-surface-2),var(--shop-surface)); text-decoration:none; }
.shop-product-results.is-grid.images-large .shop-product-image { aspect-ratio:4/3; }
.shop-product-results.is-grid.images-small .shop-product-image { aspect-ratio:16/9; }
.shop-product-image img { width:100%; height:100%; display:block; object-fit:contain; padding:8px; transition:transform .2s ease; }
.shop-product-card:hover .shop-product-image img { transform:scale(1.025); }
.shop-product-placeholder { width:100%; height:100%; min-height:130px; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:5px; color:var(--shop-primary); background:var(--shop-primary-soft); }
.shop-product-placeholder .material-icons { font-size:40px; opacity:.62; }
.shop-product-body { display:flex; flex:1; flex-direction:column; padding:12px; }
.shop-product-meta { color:var(--shop-muted); font-size:.63rem; letter-spacing:.055em; text-transform:uppercase; }
.shop-product-title { margin:4px 0 7px; font-size:.95rem; font-weight:600; line-height:1.3; }
.shop-product-title a { color:var(--shop-text); text-decoration:none; }
.shop-product-facts { display:flex; flex-wrap:wrap; gap:5px 10px; min-height:19px; margin-bottom:7px; }
.shop-product-facts span { display:inline-flex; align-items:center; gap:3px; color:var(--shop-muted); font-size:.66rem; }
.shop-product-facts .material-icons { font-size:14px; color:var(--shop-primary); }
.shop-product-description { display:-webkit-box; overflow:hidden; margin:0 0 10px; color:var(--shop-muted); font-size:.72rem; line-height:1.45; -webkit-line-clamp:2; -webkit-box-orient:vertical; }
.shop-product-footer { display:flex; justify-content:space-between; gap:10px; align-items:flex-end; margin-top:auto; }
.shop-price { display:block; font-size:.95rem; font-weight:600; }
.shop-price-caption { display:block; margin-top:1px; color:var(--shop-muted); font-size:.61rem; }
.shop-product-stock { display:flex; align-items:center; gap:3px; max-width:145px; text-align:right; color:var(--shop-muted); }
.shop-product-stock .material-icons { font-size:15px; }
.shop-product-stock.is-available .material-icons { color:var(--shop-primary); }
.shop-product-stock.is-out .material-icons { color:#dc3545; }
.shop-product-action { display:flex; align-items:center; justify-content:space-between; margin-top:10px; padding-top:9px; border-top:1px solid var(--shop-border); color:var(--shop-text); text-decoration:none; font-size:.72rem; }
.shop-product-action .material-icons { font-size:17px; color:var(--shop-primary); }
.shop-product-results.is-list { display:flex; flex-direction:column; gap:8px; }
.shop-product-results.is-list .shop-product-card { flex-direction:row; min-height:156px; }
.shop-product-results.is-list .shop-product-image { flex:0 0 210px; }
.shop-product-results.is-list.images-small .shop-product-image { flex-basis:130px; }
.shop-product-results.is-list .shop-product-body { padding:13px 15px; }
.shop-product-results.is-list .shop-product-description { max-width:760px; -webkit-line-clamp:2; }
.shop-product-results.is-list .shop-product-action { width:160px; }
.shop-pagination { display:flex; align-items:center; justify-content:center; gap:5px; margin-top:18px; }
.shop-page-link,.shop-page-number { min-width:34px; height:34px; display:inline-flex; align-items:center; justify-content:center; gap:3px; padding:0 9px; border:1px solid var(--shop-border); border-radius:5px; background:var(--shop-surface); color:var(--shop-text); text-decoration:none; font-size:.72rem; }
.shop-page-link .material-icons { font-size:17px; }
.shop-page-number.is-current { border-color:var(--shop-primary); background:var(--shop-primary); color:#fff; }
.shop-page-link.is-disabled { pointer-events:none; opacity:.45; }
.shop-page-ellipsis { padding:0 3px; color:var(--shop-muted); }
.shop-product-detail-page { display:grid; grid-template-columns:minmax(360px,.9fr) minmax(520px,1.1fr); gap:16px; align-items:start; max-width:1320px; margin:0 auto; }
.shop-product-gallery-card,.shop-product-purchase-card { border:1px solid var(--shop-border); border-radius:5px; background:var(--shop-panel); box-shadow:var(--shop-shadow-sm); }
.shop-product-gallery-card { position:sticky; top:88px; padding:12px; }
.shop-product-main-image { height:min(58vh,620px); min-height:420px; display:grid; place-items:center; overflow:hidden; border-radius:5px; background:var(--shop-surface-2); }
.shop-product-main-image img { width:100%; height:100%; display:block; object-fit:contain; padding:12px; }
.shop-product-thumbnails { display:flex; gap:7px; overflow-x:auto; padding-top:9px; }
.shop-product-thumbnail { flex:0 0 72px; width:72px; height:60px; overflow:hidden; border:1px solid var(--shop-border); border-radius:5px; background:var(--shop-surface); padding:3px; cursor:pointer; }
.shop-product-thumbnail.is-active { border-color:var(--shop-primary); box-shadow:0 0 0 1px var(--shop-primary); }
.shop-product-thumbnail img { width:100%; height:100%; object-fit:contain; }
.shop-product-purchase-card { padding:20px; }
.shop-product-heading-row { display:flex; justify-content:space-between; gap:16px; }
.shop-product-heading-row h1 { margin:5px 0 8px; font-size:clamp(1.75rem,3vw,2.75rem); font-weight:600; line-height:1.02; letter-spacing:-.045em; }

.shop-detail-badges { display:flex; flex-wrap:wrap; justify-content:flex-end; gap:5px; align-content:flex-start; }
.shop-detail-badges span { padding:5px 7px; border-radius:5px; background:var(--shop-primary-soft); color:var(--shop-primary); font-size:.62rem; text-transform:uppercase; letter-spacing:.04em; }
.shop-product-key-facts { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:7px; margin:16px 0; }
.shop-product-key-facts div { padding:10px; border:1px solid var(--shop-border); border-radius:5px; background:var(--shop-surface-2); }
.shop-product-key-facts span,.shop-product-key-facts strong { display:block; }
.shop-product-key-facts span { color:var(--shop-muted); font-size:.62rem; text-transform:uppercase; letter-spacing:.05em; }
.shop-product-key-facts strong { margin-top:3px; font-size:.78rem; font-weight:600; }
.shop-product-description-block { padding:14px 0; border-top:1px solid var(--shop-border); border-bottom:1px solid var(--shop-border); }
.shop-product-description-block h2,.shop-option-heading h2 { margin:0 0 5px; font-size:.92rem; font-weight:600; }
.shop-product-description-block p,.shop-option-heading p { margin:0; color:var(--shop-muted); font-size:.76rem; line-height:1.55; }
.shop-product-attribute-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:7px; margin:14px 0; }
.shop-product-attribute-grid > div { position:relative; min-height:92px; padding:11px; border:1px solid var(--shop-border); border-radius:5px; background:var(--shop-surface-2); }
.shop-product-attribute-grid .material-icons { color:var(--shop-primary); font-size:19px; }
.shop-product-attribute-grid small,.shop-product-attribute-grid strong { display:block; }
.shop-product-attribute-grid small { margin:5px 0 3px; color:var(--shop-muted); font-size:.62rem; }
.shop-product-attribute-grid strong { font-size:.74rem; font-weight:500; line-height:1.4; }
.shop-option-heading { display:flex; align-items:end; justify-content:space-between; gap:12px; margin:16px 0 8px; }
.shop-option-heading > span { color:var(--shop-muted); font-size:.68rem; }
.shop-variant-row { grid-template-columns:minmax(0,1fr) auto minmax(180px,auto); }
.shop-variant-copy small,.shop-variant-availability { display:block; }
.shop-variant-copy small { color:var(--shop-muted); font-size:.65rem; }
.shop-variant-availability { margin-top:3px; color:var(--shop-primary); font-size:.65rem; }
.shop-add-form { display:flex; align-items:center; justify-content:flex-end; gap:6px; }
.shop-add-form input { width:58px; min-height:36px; border-color:var(--shop-border); border-radius:5px; background:var(--shop-surface); color:var(--shop-text); }
.shop-add-form .shop-primary-button { min-height:36px; }
.shop-status-pill.is-muted { color:var(--shop-muted); background:var(--shop-surface-2); }
.shop-product-compliance-note { display:flex; align-items:flex-start; gap:9px; margin-top:14px; padding:11px; border:1px solid var(--shop-border); border-radius:5px; background:var(--shop-surface-2); }
.shop-product-compliance-note > .material-icons { color:var(--shop-primary); font-size:19px; }
.shop-product-compliance-note strong,.shop-product-compliance-note span { display:block; }
.shop-product-compliance-note strong { font-size:.72rem; font-weight:600; }
.shop-product-compliance-note span { margin-top:2px; color:var(--shop-muted); font-size:.66rem; line-height:1.45; }
@media (max-width:1180px) { .shop-product-results.is-grid,.shop-product-results.is-grid.images-small { grid-template-columns:repeat(3,minmax(0,1fr)); } .shop-catalog-toolbar { grid-template-columns:minmax(260px,1fr) 170px 160px auto; } .shop-page-size { display:none; } }
@media (max-width:900px) { .shop-product-results.is-grid,.shop-product-results.is-grid.images-small { grid-template-columns:repeat(2,minmax(0,1fr)); } .shop-product-detail-page { grid-template-columns:1fr; } .shop-product-gallery-card { position:static; } .shop-product-main-image { height:460px; min-height:0; } .shop-catalog-toolbar { grid-template-columns:1fr 1fr auto; } .shop-search-field { grid-column:1/-1; } }
@media (max-width:640px) { .shop-catalog-toolbar { grid-template-columns:1fr 1fr; } .shop-filter-button { grid-column:1/-1; } .shop-image-size-control { display:none; } .shop-product-results.is-grid,.shop-product-results.is-grid.images-small { grid-template-columns:1fr; } .shop-product-results.is-list .shop-product-card { min-height:126px; } .shop-product-results.is-list .shop-product-image,.shop-product-results.is-list.images-small .shop-product-image { flex-basis:112px; } .shop-product-results.is-list .shop-product-description,.shop-product-results.is-list .shop-product-facts,.shop-product-results.is-list .shop-product-action { display:none; } .shop-product-results.is-list .shop-product-footer { flex-direction:column; align-items:flex-start; } .shop-product-main-image { height:330px; } .shop-product-purchase-card { padding:14px; } .shop-product-key-facts { grid-template-columns:repeat(2,minmax(0,1fr)); } .shop-product-attribute-grid { grid-template-columns:1fr; } .shop-variant-row { grid-template-columns:1fr auto; } .shop-add-form { grid-column:1/-1; justify-content:stretch; } .shop-add-form .shop-primary-button { flex:1; } }
/* Compact pickup-aware checkout */
.shop-checkout-layout {
    grid-template-columns: minmax(0, 720px) minmax(300px, 350px);
    max-width: 1090px;
    margin: 0 auto;
    gap: 14px;
}
.shop-checkout-progress { max-width: 680px; }
.shop-checkout-card { padding: 15px; }
.shop-card-heading, .shop-summary-heading { margin-bottom: 12px; }
.shop-field-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px 10px; }
.shop-field-first, .shop-field-last { max-width: 220px; }
.shop-field-email { max-width: 340px; }
.shop-field-phone { max-width: 210px; }
.shop-field-date { max-width: 190px; }
.shop-field-grid-customer .shop-field-email { grid-column: span 2; }
.shop-form .form-control, .shop-form .form-select {
    min-height: 34px;
    height: 34px;
    padding: 5px 8px;
    font-size: .78rem;
}
.shop-form textarea.form-control {
    height: auto;
    min-height: 58px;
    max-width: 520px;
}
.shop-field-grid-notes {
    grid-template-columns: 220px minmax(280px, 1fr);
    gap: 10px;
    max-width: 680px;
}
.shop-field-order-notes { max-width: 440px; }
.shop-fulfillment-options { grid-template-columns: repeat(2, minmax(0, 250px)); }
.shop-fulfillment-option { min-height: 66px; padding: 10px 11px; }
.shop-delivery-fields { padding: 12px; }
.shop-address-grid {
    grid-template-columns: minmax(260px, 1fr) 150px 190px 80px 120px;
    gap: 8px 10px;
}
.shop-address-line { grid-column: span 3; max-width: 470px; }
.shop-address-unit { max-width: 150px; }
.shop-address-city { max-width: 190px; }
.shop-field-state { max-width: 80px; }
.shop-field-postal { max-width: 120px; }
.shop-field-delivery-notes { margin-top: 10px; max-width: 520px; }
.shop-pickup-only-notice {
    display: flex;
    align-items: center;
    gap: 11px;
    max-width: 520px;
    padding: 12px 13px;
    border: 1px solid color-mix(in srgb, var(--shop-primary) 32%, var(--shop-border));
    border-left: 3px solid var(--shop-primary);
    border-radius: 5px;
    background: var(--shop-primary-soft);
}
.shop-pickup-only-icon {
    width: 38px;
    height: 38px;
    flex: 0 0 38px;
    display: grid;
    place-items: center;
    border-radius: 5px;
    background: var(--shop-surface);
    color: var(--shop-primary);
}
.shop-pickup-only-notice strong,
.shop-pickup-only-notice span { display: block; }
.shop-pickup-only-notice strong { margin-bottom: 2px; font-size: .86rem; font-weight: 600; }
.shop-pickup-only-notice span { color: var(--shop-muted); font-size: .72rem; line-height: 1.4; }

@media (max-width: 900px) {
    .shop-checkout-layout { grid-template-columns: 1fr; max-width: 720px; }
    .shop-address-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .shop-address-line { grid-column: span 2; max-width: none; }
}

@media (max-width: 620px) {
    .shop-field-grid-customer .shop-field-email { grid-column: auto; }
    .shop-field-first, .shop-field-last, .shop-field-email, .shop-field-phone,
    .shop-field-date, .shop-field-order-notes, .shop-address-line, .shop-address-unit,
    .shop-address-city, .shop-field-state, .shop-field-postal, .shop-field-delivery-notes {
        max-width: none;
    }
    .shop-field-grid-notes { max-width: none; }
    .shop-address-line { grid-column: auto; }
    .shop-form .form-control, .shop-form .form-select { width: 100%; }
}

/* Clickable product surfaces */
.shop-product-body[data-product-url],
.kiosk-main .shop-product-card[data-product-url] {
    cursor: pointer;
}