/* Storefront composition over the canonical Tolik UI tokens and components. */
html[data-storefront-refresh] { scroll-padding-top: 16px; }
body.storefront-refresh {
    --bg: var(--ts-bg-canvas); --bg-soft: var(--ts-bg-canvas-alt); --text: var(--ts-text);
    --muted: var(--ts-text-muted); --line: var(--ts-border); --glass: var(--ts-surface);
    --glass-strong: var(--ts-surface-strong); --shadow: var(--ts-shadow-sm);
    /* Optical scrim keeps white action labels at >= 4.5:1 over both brand modes. */
    --ts-storefront-action-scrim: rgba(0, 0, 0, .24);
    font-family: var(--ts-font-sans); color: var(--ts-text); min-width: 320px;
    background: radial-gradient(ellipse 42rem 28rem at 90% 12%, var(--ts-ambient-b), transparent 80%), var(--ts-bg-canvas);
}
.storefront-refresh .ambient,.storefront-refresh::before { display: none; }
.storefront-refresh :where(button,input,textarea,select) { font-family: var(--ts-font-sans); }
.storefront-refresh :where(h1,h2,h3,p) { margin-top: 0; }
.storefront-refresh :where(a,button,input,textarea,select,summary):focus-visible { outline: 2px solid var(--ts-border-focus); outline-offset: 4px; box-shadow: var(--ts-shadow-focus); }
.storefront-refresh :where(main section,.sf-anchor) { scroll-margin-top: 16px; }
.storefront-refresh.storefront-service-page main { width: min(1160px, calc(100% - 48px)); margin-inline: auto; }
.storefront-refresh .site-header {
    position: relative; top: auto; width: min(1160px, calc(100% - 48px)); height: auto; min-height: 92px;
    margin: 0 auto; padding: 12px 0; gap: 24px; border: 0; border-bottom: 1px solid var(--ts-border);
    border-radius: 0; background: transparent; box-shadow: none; backdrop-filter: none; flex-wrap: nowrap;
}
.storefront-refresh .brand { width: 160px; height: auto; min-height: 56px; padding: 0; overflow: visible; flex: 0 0 160px; }
.storefront-refresh .brand img { width: 160px; height: auto; aspect-ratio: 726/255; }
.storefront-refresh .nav { margin-left: auto; gap: 20px; flex-wrap: nowrap; }
.storefront-refresh .nav a { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; height: auto; padding: 0 2px; border: 0; border-radius: 0; font-size: 14px; font-weight: 700; white-space: nowrap; color: var(--ts-text); background: none; box-shadow: none; backdrop-filter: none; }
.storefront-refresh .nav a:hover { transform: none; color: var(--ts-brand-text); box-shadow: none; background: none; }
.storefront-refresh .header-trust { display: none; }
.storefront-refresh .storefront-header-actions { display: flex; align-items: center; gap: 8px; flex: none; }
.storefront-refresh .ts-theme-toggle { padding-inline: 12px; font-size: 12px; min-height: 44px; box-shadow: none; border-radius: 14px; background: var(--ts-surface-soft); }
.storefront-refresh .site-search { min-width: 155px; max-width: 205px; flex-basis: 180px; height: 46px; margin: 0; border-radius: 14px; border-color: var(--ts-border); background: var(--ts-surface); box-shadow: none; backdrop-filter: none; }
.storefront-refresh .site-search input { color: var(--ts-text); font-size: 14px; }
.storefront-refresh .site-search svg { stroke: var(--ts-text-muted); }
.storefront-refresh .menu-button,.storefront-refresh .mobile-search-button { color: var(--ts-text); background: var(--ts-surface-soft); border: 1px solid var(--ts-border); border-radius: 14px; min-width: 44px; height: 44px; box-shadow: none; }
.storefront-refresh .mobile-search-panel { background: var(--ts-bg-canvas); }
.storefront-refresh .mobile-search-bar { color: var(--ts-text); border-color: var(--ts-border); background: var(--ts-surface); }
.storefront-refresh .mobile-search-bar input { color: var(--ts-text); }
.storefront-refresh .mobile-search-bar button { color: var(--ts-text); min-width: 44px; height: 44px; }
.storefront-refresh .button,.storefront-refresh .buy-button { min-height: 46px; border-radius: 14px; color: var(--ts-text); background: var(--ts-surface); border: 1px solid var(--ts-border); box-shadow: none; font-weight: 700; }
.storefront-refresh .button:hover,.storefront-refresh .buy-button:hover { color: var(--ts-text); background: var(--ts-surface-strong); border-color: var(--ts-border-focus); box-shadow: var(--ts-shadow-sm); transform: translateY(-2px); }
.storefront-refresh .button-primary { color: white; background: var(--ts-brand-gradient); padding-inline: 24px; box-shadow: var(--ts-shadow-receipt-action); border-color: transparent; }
.storefront-refresh .button-primary:hover { color: white; background: var(--ts-brand-gradient); }
.storefront-refresh .button-primary::before { display: none; }
.storefront-refresh :is(.button-primary,.ts-button--primary),
.storefront-refresh :is(.button-primary,.ts-button--primary):hover {
    color: white;
    background: linear-gradient(var(--ts-storefront-action-scrim), var(--ts-storefront-action-scrim)), var(--ts-brand-gradient);
}
.storefront-refresh .button-secondary { color: var(--ts-text-muted); background: var(--ts-surface-soft); }
.storefront-refresh .lead,.storefront-refresh .product-tag,.storefront-refresh .product-desc { color: var(--ts-text-muted); }
.storefront-refresh .product-card,.storefront-refresh .category-card { background: var(--ts-surface); border-color: var(--ts-border); box-shadow: none; }
.storefront-refresh .product-card:hover,.storefront-refresh .category-card:hover { background: var(--ts-surface-strong); border-color: var(--ts-border-focus); box-shadow: var(--ts-shadow-sm); }
.storefront-refresh .toast { color: var(--ts-text); background: var(--ts-surface-strong); border-color: var(--ts-border); }
.storefront-refresh .site-footer { width: min(1160px, calc(100% - 48px)); margin: 56px auto 0; padding: 28px 0 32px; border-top: 1px solid var(--ts-border); background: transparent; box-shadow: none; color: var(--ts-text-muted); gap: 32px; }
.storefront-refresh .site-footer b { color: var(--ts-text); font-size: 13px; }
.storefront-refresh .site-footer p,.storefront-refresh .site-footer small { color: var(--ts-text-muted); line-height: 1.65; }
.storefront-refresh .site-footer nav { display: flex; flex-wrap: wrap; gap: 6px 18px; }
.storefront-refresh .site-footer nav a { display: inline-flex; min-height: 44px; align-items: center; padding: 0; color: var(--ts-text-muted); font-size: 12px; background: none; border: 0; box-shadow: none; }
.storefront-refresh .sf-main { width: min(1160px, calc(100% - 48px)); margin: 0 auto; }
.storefront-refresh .sf-main :where(h1,h2,h3,p) { margin: 0; }
.storefront-refresh .sf-hero { display: grid; grid-template-columns: minmax(0,1fr) 260px; align-items: center; gap: 36px; padding: 52px 0 36px; }
.storefront-refresh .sf-eyebrow { color: var(--ts-brand-text); font-size: 12px; font-weight: 800; letter-spacing: .025em; }
.storefront-refresh .sf-hero h1 { font-size: clamp(38px,4.7vw,64px); font-weight: 800; letter-spacing: -.055em; line-height: 1.12; margin-top: 16px; }
.storefront-refresh .sf-hero h1 span { color: var(--ts-brand-text); }
.storefront-refresh .sf-lead { color: var(--ts-text-muted); max-width: 480px; font-size: 17px; line-height: 1.7; margin-top: 22px; }
.storefront-refresh .sf-hero-actions { display: flex; align-items: center; gap: 28px; flex-wrap: wrap; margin-top: 28px; }
.storefront-refresh .sf-hero-actions .ts-button { gap: 24px; }
.storefront-refresh .sf-text-link { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 44px; padding: 0; border: 0; background: transparent; color: var(--ts-text); font-size: 14px; font-weight: 700; cursor: pointer; }
.storefront-refresh .sf-text-link:hover { color: var(--ts-brand-text); }
.storefront-refresh .sf-hero-art { display: flex; align-items: center; justify-content: center; position: relative; min-height: 270px; padding-bottom: 26px; }
.storefront-refresh .sf-hero-art img { display: block; width: 240px; height: 240px; object-fit: contain; }
.storefront-refresh .sf-hero-art>span { position: absolute; bottom: 8px; padding: 12px 18px; background: var(--ts-surface-strong); border: 1px solid var(--ts-border); border-radius: 16px; color: var(--ts-text); font-size: 12px; font-weight: 700; white-space: nowrap; }
.storefront-refresh .sf-hero-art b { color: var(--ts-brand-text); margin-right: 8px; }
.storefront-refresh .sf-trust { display: flex; flex-wrap: wrap; gap: 12px 30px; padding: 16px 0 24px; border-bottom: 1px solid var(--ts-border); font-size: 13px; color: var(--ts-text-muted); }
.storefront-refresh .sf-trust span { display: inline-flex; align-items: center; gap: 8px; }
.storefront-refresh .sf-trust span::before { content: '✓'; color: var(--ts-brand-text); font-weight: 800; }
.storefront-refresh .sf-anchor { display: block; }
.storefront-refresh .sf-catalog { padding-top: 36px; }
.storefront-refresh .sf-main h2 { font-size: clamp(26px,2.6vw,34px); font-weight: 800; letter-spacing: -.035em; line-height: 1.25; }
.storefront-refresh .sf-section-heading { display: flex; align-items: center; justify-content: space-between; gap: 24px; }
.storefront-refresh .sf-section-heading p { color: var(--ts-text-muted); font-size: 14px; margin-top: 8px; }
.storefront-refresh .sf-search { min-width: 220px; max-width: 280px; width: 28%; height: 48px; display: flex; align-items: center; gap: 12px; padding: 0 16px; background: var(--ts-surface); border: 1px solid var(--ts-border); border-radius: 14px; }
.storefront-refresh .sf-search>span[aria-hidden] { font-size: 24px; color: var(--ts-text-muted); }
.storefront-refresh .sf-search input { background: transparent; color: var(--ts-text); border: 0; min-width: 0; width: 100%; height: 44px; font-size: 14px; }
.storefront-refresh .sf-search input::placeholder { color: var(--ts-text-muted); opacity: 1; }
.storefront-refresh .sf-catalog-tools { margin: 24px 0 16px; }
.storefront-refresh .sf-filters { display: flex; flex-wrap: wrap; gap: 8px; }
.storefront-refresh .sf-filters button { min-height: 44px; padding: 0 15px; background: transparent; border: 0; border-radius: 12px; color: var(--ts-text-muted); font-size: 13px; font-weight: 700; cursor: pointer; }
.storefront-refresh .sf-filters button[aria-pressed="true"] { background: var(--ts-brand-soft); color: var(--ts-brand-text); }
.storefront-refresh .sf-filters button:hover { background: var(--ts-surface-soft); }
.storefront-refresh .sf-mobile-filter { display: none; }
.storefront-refresh .sf-catalog-status { color: var(--ts-text-muted); font-size: 14px; padding-bottom: 16px; }
.storefront-refresh .sf-service-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 16px; }
.storefront-refresh .sf-service-card { display: flex; flex-direction: column; gap: 20px; padding: 24px; border-radius: 24px; box-shadow: none; text-decoration: none; color: var(--ts-text); min-width: 0; background: var(--ts-surface); transition: transform 180ms,border-color 180ms; }
.storefront-refresh .sf-service-card:hover { transform: translateY(-2px); border-color: var(--ts-border-focus); }
.storefront-refresh .sf-service-top { display: flex; align-items: center; gap: 14px; }
.storefront-refresh .sf-service-top h3 { font-size: 19px; font-weight: 800; letter-spacing: -.025em; line-height: 1.3; }
.storefront-refresh .sf-service-icon { display: flex; align-items: center; justify-content: center; width: 48px; height: 48px; flex: none; }
.storefront-refresh .sf-service-icon img { width: 48px; height: 48px; object-fit: contain; }
.storefront-refresh .sf-service-icon>span { color: var(--ts-brand-text); font-size: 30px; }
.storefront-refresh .sf-service-card>p { color: var(--ts-text-muted); font-size: 14px; line-height: 1.6; flex: 1; }
.storefront-refresh .sf-service-bottom { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding-top: 16px; border-top: 1px solid var(--ts-border); }
.storefront-refresh .sf-service-price strong { display: block; font-size: 22px; letter-spacing: -.035em; white-space: nowrap; line-height: 1.3; }
.storefront-refresh .sf-service-price small { display: block; margin-top: 5px; font-size: 12px; line-height: 1.5; color: var(--ts-text-muted); }
.storefront-refresh .sf-service-action { color: var(--ts-brand-text); font-size: 12px; font-weight: 800; display: flex; align-items: center; gap: 6px; text-align: right; }
.storefront-refresh .sf-catalog-footer { display: flex; justify-content: center; padding-top: 18px; }
.storefront-refresh .sf-catalog-empty { padding: 28px 0; }
.storefront-refresh .sf-catalog-empty h3 { font-size: 22px; }
.storefront-refresh .sf-catalog-empty p { font-size: 15px; margin: 10px 0; color: var(--ts-text-muted); }
.storefront-refresh .sf-empty-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px; margin-top: 16px; }
.storefront-refresh .storefront-plan-help { display: inline-flex; align-items: center; min-height: var(--ts-touch-target); color: var(--ts-brand-text); font-size: 13px; text-decoration: underline; text-underline-offset: 3px; }
.storefront-refresh .storefront-plan-help:hover { color: var(--ts-text); }
.storefront-refresh .sf-how { padding-top: 52px; }
.storefront-refresh .sf-steps { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 32px; list-style: none; padding: 0; margin: 28px 0 0; counter-reset: purchase; }
.storefront-refresh .sf-steps li { counter-increment: purchase; }
.storefront-refresh .sf-steps li::before { content: '0' counter(purchase); display: block; margin-bottom: 12px; color: var(--ts-brand-text); font-weight: 800; font-size: 12px; letter-spacing: .08em; }
.storefront-refresh .sf-steps h3 { font-size: 17px; letter-spacing: -.02em; }
.storefront-refresh .sf-steps p { color: var(--ts-text-muted); font-size: 14px; line-height: 1.7; margin-top: 8px; max-width: 270px; }
.storefront-refresh .sf-help { display: flex; align-items: center; gap: 28px; margin-top: 52px; padding: 32px; border-radius: 28px; background: var(--ts-brand-soft); }
.storefront-refresh .sf-help>img { display: block; object-fit: contain; width: 110px; height: 130px; align-self: flex-end; margin-bottom: -16px; flex: none; }
.storefront-refresh .sf-help>div { flex: 1; }
.storefront-refresh .sf-help h2 { font-size: 29px; margin-top: 8px; }
.storefront-refresh .sf-help>div>p:last-child { margin-top: 12px; font-size: 14px; color: var(--ts-text-muted); max-width: 440px; line-height: 1.7; }
.storefront-refresh .sf-help>.ts-button { flex: none; font-size: 14px; }
.storefront-refresh .sf-faq { display: grid; grid-template-columns: 1fr 1.7fr; gap: 48px; margin-top: 52px; }
.storefront-refresh .sf-faq>div>.sf-text-link { margin-top: 16px; font-size: 13px; color: var(--ts-text-muted); }
.storefront-refresh .sf-faq-list { border-top: 1px solid var(--ts-border); }
.storefront-refresh .sf-faq details { border-bottom: 1px solid var(--ts-border); }
.storefront-refresh .sf-faq summary { display: flex; align-items: center; justify-content: space-between; gap: 20px; min-height: 64px; padding: 12px 0; list-style: none; font-size: 15px; font-weight: 700; cursor: pointer; }
.storefront-refresh .sf-faq summary::-webkit-details-marker { display: none; }
.storefront-refresh .sf-faq summary::after { content: '+'; font-size: 24px; font-weight: 400; color: var(--ts-brand-text); }
.storefront-refresh .sf-faq details[open] summary::after { content: '−'; }
.storefront-refresh .sf-faq details p { padding: 0 28px 20px 0; color: var(--ts-text-muted); font-size: 14px; line-height: 1.7; }
.storefront-refresh .sf-faq details a { text-decoration: underline; text-underline-offset: 3px; }
@media (max-width: 1100px) {
    .storefront-refresh .site-header { gap: 18px; }
    .storefront-refresh .nav { gap: 16px; }
    .storefront-refresh .site-search { max-width: 180px; min-width: 140px; }
    .storefront-refresh .nav a { font-size: 13px; }
    .storefront-refresh .sf-hero { grid-template-columns: minmax(0,1fr) 220px; gap: 20px; }
    .storefront-refresh .sf-hero-art img { width: 210px; height: 210px; }
    .storefront-refresh .sf-service-card { padding: 20px; }
    .storefront-refresh .sf-service-action { max-width: 68px; }
    .storefront-refresh .sf-help { gap: 20px; padding: 28px; }
    .storefront-refresh .sf-help>img { width: 90px; height: 110px; }
    .storefront-refresh .sf-help h2 { font-size: 26px; }
    .storefront-refresh .sf-help>.ts-button { max-width: 190px; }
}
@media (max-width: 900px) {
    .storefront-refresh .nav { display: none; position: absolute; top: calc(100% + 4px); right: 0; left: auto; width: min(320px,100%); margin: 0; padding: 12px; background: var(--ts-bg-canvas-alt); border: 1px solid var(--ts-border); border-radius: 20px; box-shadow: var(--ts-shadow-md); z-index: 50; }
    .storefront-refresh .nav.is-open { display: flex; flex-direction: column; align-items: stretch; gap: 0; }
    .storefront-refresh .nav a { justify-content: flex-start; padding: 12px; min-height: 48px; }
    .storefront-refresh .menu-button { display: grid; place-items: center; }
    .storefront-refresh .storefront-header-actions { margin-left: auto; }
    .storefront-refresh .site-search { margin-left: auto; max-width: 250px; }
    .storefront-refresh .sf-service-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
    .storefront-refresh .sf-service-action { max-width: none; }
}
@media (max-width: 740px) {
    .storefront-refresh .sf-hero { grid-template-columns: 1fr; padding: 32px 0 24px; }
    .storefront-refresh .sf-hero-art { display: none; }
    .storefront-refresh .sf-hero h1 { font-size: clamp(36px,6.7vw,46px); }
    .storefront-refresh .sf-lead { max-width: 560px; font-size: 16px; }
}
@media (max-width: 620px) {
    .storefront-service-page .section-head { flex-wrap: wrap; gap: 8px 20px; }
    .storefront-refresh .site-header { width: calc(100% - 32px); min-height: 80px; gap: 8px; padding-block: 12px; }
    .storefront-refresh .storefront-header-actions { gap: 4px; }
    .storefront-refresh .ts-theme-toggle { padding: 0; min-width: 44px; }
    .storefront-refresh [data-ts-theme-label] { display: none; }
    .storefront-refresh .site-search { display: none; }
    .storefront-refresh .mobile-search-button { display: grid; place-items: center; }
    .storefront-home .mobile-search-button { display: none; }
    .storefront-refresh .sf-main { width: calc(100% - 36px); }
    .storefront-refresh.storefront-service-page main { width: calc(100% - 36px); }
    .storefront-refresh .sf-hero { grid-template-columns: 1fr; padding: 28px 0 22px; }
    .storefront-refresh .sf-eyebrow { font-size: 11px; letter-spacing: 0; }
    .storefront-refresh .sf-hero h1 { font-size: clamp(31px,8.5vw,45px); line-height: 1.15; margin-top: 12px; }
    .storefront-refresh .sf-lead { font-size: 15px; margin-top: 16px; line-height: 1.65; }
    .storefront-refresh .sf-hero-actions { margin-top: 22px; gap: 12px 18px; }
    .storefront-refresh .sf-hero-actions .ts-button { font-size: 13px; padding-inline: 16px; gap: 14px; }
    .storefront-refresh .sf-hero-actions .sf-text-link { font-size: 12px; gap: 5px; }
    .storefront-refresh .sf-hero-art { display: none; }
    .storefront-refresh .sf-trust { padding: 0 0 20px; gap: 8px 20px; font-size: 12px; }
    .storefront-refresh .sf-trust span:last-child { display: none; }
    .storefront-refresh .sf-catalog { padding-top: 28px; }
    .storefront-refresh .sf-main h2 { font-size: 25px; }
    .storefront-refresh .sf-section-heading { display: block; }
    .storefront-refresh .sf-section-heading p { font-size: 13px; line-height: 1.6; }
    .storefront-refresh .sf-search { width: 100%; max-width: none; min-width: 0; margin-top: 18px; }
    .storefront-refresh .sf-search input { font-size: 16px; }
    .storefront-refresh .sf-catalog-tools { margin-top: 10px; }
    .storefront-refresh .sf-filters { display: none; }
    .storefront-refresh .sf-mobile-filter { display: block; }
    .storefront-refresh .sf-mobile-filter select { width: 100%; min-height: 46px; border: 1px solid var(--ts-border); border-radius: 14px; padding: 10px 12px; background: var(--ts-bg-canvas); color: var(--ts-text-muted); font-size: 14px; }
    .storefront-refresh .sf-service-grid { grid-template-columns: 1fr; gap: 12px; }
    .storefront-refresh .sf-service-card { gap: 14px; padding: 18px 20px; border-radius: 22px; }
    .storefront-refresh .sf-service-top h3 { font-size: 18px; }
    .storefront-refresh .sf-service-card>p { font-size: 14px; }
    .storefront-refresh .sf-service-bottom { padding-top: 12px; }
    .storefront-refresh .sf-service-price strong { font-size: 21px; }
    .storefront-refresh .sf-service-price small { font-size: 12px; }
    .storefront-refresh .sf-service-action { font-size: 13px; max-width: 110px; }
    .storefront-refresh .sf-how { padding-top: 36px; }
    .storefront-refresh .sf-steps { grid-template-columns: 1fr; gap: 22px; margin-top: 24px; }
    .storefront-refresh .sf-steps li { position: relative; padding-left: 34px; }
    .storefront-refresh .sf-steps li::before { position: absolute; left: 0; top: 1px; }
    .storefront-refresh .sf-steps h3 { font-size: 15px; }
    .storefront-refresh .sf-steps p { max-width: none; margin-top: 5px; }
    .storefront-refresh .sf-help { display: block; padding: 24px; margin-top: 36px; border-radius: 24px; overflow: hidden; }
    .storefront-refresh .sf-help>img { float: right; width: 80px; height: 100px; margin: 0 -12px 4px 8px; }
    .storefront-refresh .sf-help h2 { max-width: 220px; font-size: 24px; }
    .storefront-refresh .sf-help>div>p:last-child { clear: both; padding-top: 12px; margin-top: 0; font-size: 14px; }
    .storefront-refresh .sf-help>.ts-button { margin-top: 20px; width: 100%; max-width: none; }
    .storefront-refresh .sf-faq { grid-template-columns: 1fr; gap: 18px; margin-top: 36px; }
    .storefront-refresh .sf-faq>div>.sf-text-link { margin-top: 8px; }
    .storefront-refresh .sf-faq summary { font-size: 14px; min-height: 60px; }
    .storefront-refresh .site-footer { width: calc(100% - 36px); margin-top: 36px; padding-top: 24px; gap: 16px; }
    .storefront-refresh .site-footer nav { gap: 0 14px; }
}
@media (max-width: 360px) { .storefront-refresh .site-header { width: calc(100% - 24px); gap: 4px; } .storefront-refresh .storefront-header-actions { gap: 0; } }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto !important; } .storefront-refresh * { scroll-behavior: auto !important; animation: none !important; transition: none !important; } }