/* Size control critical overrides: kept inline so a stale /css/card.css
           deployment cannot move the control back to the viewport edge. */
        .card-container { overflow: visible; }
        .card-container.is-wide { overflow: visible; }
        .card-size-control {
            position: fixed !important;
            top: 50% !important;
            right: 10px !important;
            z-index: 1200;
            transform: translateY(-50%) !important;
            pointer-events: none;
        }
        .card-size-toggle {
            position: relative;
            display: flex;
            align-items: center;
            justify-content: center;
            width: 36px;
            height: 36px;
            padding: 0;
            border: 1px solid var(--border-color);
            border-radius: 999px;
            background: rgba(255,255,255,.92);
            color: #94A3B8;
            box-shadow: 0 6px 18px rgba(15,23,42,.14), inset 0 1px 0 rgba(255,255,255,.95);
            font-family: var(--font-family);
            cursor: pointer;
            pointer-events: auto;
        }
        .card-size-toggle svg { width: 18px; height: 18px; flex-shrink: 0; }
        .card-size-toggle .card-size-icon-collapse,
        .card-size-toggle[aria-pressed="true"] .card-size-icon-expand { display: none; }
        .card-size-toggle[aria-pressed="true"] .card-size-icon-collapse { display: block; }
        .card-container.is-wide .card-size-toggle {
            color: var(--primary-color);
            border-color: rgba(var(--primary-rgb), 0.35);
            background: #fff;
        }
        @media (min-width: 761px) {
            .card-container { max-width: 720px; font-size: 16px; }
            .card-container:not(.is-wide) .hero-cover { height: 230px; }
            .card-container:not(.is-wide) .hero-content { padding: 0 36px; }
            .card-container:not(.is-wide) .avatar-wrapper { width: 108px; height: 108px; }
            .card-container:not(.is-wide) .merchant-name { font-size: 34px; }
            .card-container:not(.is-wide) .merchant-subtitle { font-size: 16px; max-width: 520px; }
            .card-container:not(.is-wide) .card-section { padding: 28px 36px; }
            .card-container:not(.is-wide) .section-title { font-size: 19px; }
            .card-container:not(.is-wide) .about-content .description { font-size: 16.5px; line-height: 1.85; }
            .card-container:not(.is-wide) .cta-section { padding: 0 36px 28px; }
            .card-container:not(.is-wide) .cta-buttons { flex-direction: row; flex-wrap: wrap; }
            .card-container:not(.is-wide) .cta-btn { flex: 1 1 220px; font-size: 16px; padding: 15px 22px; }
            .card-container.is-wide .services-grid {
                display: grid !important;
                grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
                gap: 16px !important;
            }
            .card-container:not(.is-wide) .services-grid { display: grid !important; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)) !important; gap: 14px !important; }
            .card-container:not(.is-wide) .service-img,
            .card-container:not(.is-wide) .service-img-placeholder { width: 96px; height: 96px; }
            .card-container:not(.is-wide) .service-name { font-size: 16px; }
            .card-container:not(.is-wide) .service-desc { font-size: 14px; }
            .card-container:not(.is-wide) .products-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
            .card-container:not(.is-wide) .product-name { font-size: 16px; }
            .card-container:not(.is-wide) .product-desc { font-size: 13px; }
            .card-container:not(.is-wide) .business-hours { padding: 0; margin-bottom: 8px; }
            .card-container:not(.is-wide) .business-hours-toggle { min-height: 52px; padding: 15px 18px; font-size: 15.5px; }
            .card-container:not(.is-wide) .business-hours-panel .hours-grid { padding: 0 18px 18px; }
            .card-container:not(.is-wide) .hours-grid { grid-template-columns: 60px 1fr; gap: 8px 18px; font-size: 15px; }
            .card-container:not(.is-wide) .card-section-before-booking { padding-bottom: 0; }
            .card-container:not(.is-wide) .card-section-before-booking .business-hours { margin-bottom: 8px; }
        }
        body.card-desktop-mode .card-articles-modal { max-width: min(720px, calc(100vw - 40px)); }
        body.card-desktop-mode .card-articles-title { font-size: 26px; }
        body.card-desktop-mode .card-articles-text { font-size: 16px; line-height: 1.45; }
        body.card-desktop-mode .card-inline-video-box { max-width: min(650px, calc(85vw - 40px)) !important; }
        body.card-desktop-mode .services-modal { width: min(100%, 720px); }
        body.card-desktop-mode .booking-modal { width: min(100%, 780px); }
        body.card-wide-mode .announcement-modal { max-width: min(920px, calc(100vw - 48px)); max-height: 88vh; }
        body.card-wide-mode .card-articles-modal { max-width: min(920px, calc(100vw - 48px)); }
        body.card-wide-mode .card-articles-content { padding: 30px 40px 36px; }
        body.card-wide-mode .card-articles-title { font-size: 30px; }
        body.card-wide-mode .card-articles-text { font-size: 17px; line-height: 1.45; }
        body.card-wide-mode .card-articles-media img { max-height: 420px; }
        body.card-wide-mode .card-inline-video-box { max-width: min(840px, calc(85vw - 48px)) !important; }
        body.card-wide-mode .services-modal { width: min(100%, 920px); }
        body.card-wide-mode .services-modal-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
        body.card-wide-mode .cart-panel,
        body.card-wide-mode .checkout-panel { max-width: 560px; }
        body.card-wide-mode .booking-modal { width: min(100%, 980px); height: min(92vh, 920px); height: min(92dvh, 920px); }
        body.card-wide-mode .email-subscription-modal { width: min(100%, 720px); }
        body.card-wide-mode .lightbox-img { max-height: 88vh; max-width: min(94vw, 1200px); }
        body.card-wide-mode .lightbox-prev { left: max(24px, calc(50% - 620px)); }
        body.card-wide-mode .lightbox-next { right: max(24px, calc(50% - 620px)); }
        @media (max-width: 760px) {
            .card-section-before-booking { padding-bottom: 0; }
            .card-section-before-booking .business-hours { margin-bottom: 8px; }
            .business-hours-toggle { min-height: 50px; padding: 14px 16px; }
            .booking-cta-btn { width: calc(100% - 56px); margin: 2px 28px 6px; }
            .cta-section .cta-btn { width: calc(100% - 48px); margin-left: 24px; margin-right: 24px; }
            .card-size-control { display: none !important; }
        }

        /* Server-rendered content visible to crawlers; client JS replaces with interactive UI */
        .ssr-only { position: absolute; left: -10000px; top: auto; width: 1px; height: 1px; overflow: hidden; }

        /* ─── Shop banner (in-card CTA into the storefront) ─────────────── */
        .shop-banner {
            display: flex; align-items: center; gap: 14px;
            margin: 16px 16px 4px;
            padding: 16px 18px;
            border-radius: 16px;
            text-decoration: none;
            color: #fff;
            background: var(--primary-color, #4F46E5); /* solid fallback */
            background: linear-gradient(135deg, var(--primary-color, #4F46E5), var(--secondary-color, #7C3AED));
            box-shadow: 0 8px 22px rgba(0,0,0,.16);
            position: relative; overflow: hidden;
            transition: transform .18s ease, box-shadow .18s ease;
            animation: shopBannerIn .5s cubic-bezier(.22,1,.36,1) both;
        }
        /* Subtle sheen */
        .shop-banner::after {
            content: ''; position: absolute; inset: 0;
            background: radial-gradient(120% 100% at 100% 0%, rgba(255,255,255,.18), transparent 60%);
            pointer-events: none;
        }
        .shop-banner:active { transform: scale(.985); }
        @media (hover:hover) {
            .shop-banner:hover { transform: translateY(-2px); box-shadow: 0 12px 28px rgba(0,0,0,.22); }
            .shop-banner:hover .shop-banner-arrow { transform: translateX(4px); }
        }
        .shop-banner-icon {
            flex-shrink: 0; width: 46px; height: 46px;
            display: flex; align-items: center; justify-content: center;
            font-size: 24px; border-radius: 12px;
            background: rgba(255,255,255,.18);
        }
        .shop-banner-text { flex: 1; min-width: 0; line-height: 1.35; }
        .shop-banner-title { display: block; font-size: 16px; font-weight: 700; letter-spacing: .02em; }
        .shop-banner-sub   { display: block; font-size: 12.5px; opacity: .88; margin-top: 2px; }
        .shop-banner-arrow {
            flex-shrink: 0; font-size: 20px; font-weight: 700;
            transition: transform .18s ease; opacity: .9;
        }
        @keyframes shopBannerIn {
            from { opacity: 0; transform: translateY(10px); }
            to   { opacity: 1; transform: translateY(0); }
        }