/* Desktop layout uses CSS viewport width (including OS/browser scaling),
   never device pixels or a forced zoom. Keep the mobile system unchanged. */
@media (min-width: 769px) {
    :root {
        --desktop-content-width: 1200px;
        --desktop-gutter: clamp(20px, 2vw, 28px);
        --desktop-gap: clamp(16px, 1.5vw, 24px);
    }

    html body .container:not(.opt-reference-page),
    html body .opt-shell,
    html body #header-module .header-flex,
    html body #nav-module .container {
        width: 100%;
        max-width: var(--desktop-content-width);
        margin-inline: auto;
        padding-inline: var(--desktop-gutter);
    }

    html body #header-module .header-flex {
        display: grid;
        grid-template-columns: auto minmax(160px, 1fr) auto;
        gap: 16px;
    }

    html body #header-module .search-wrapper,
    html body #header-module .search-wrapper:is(.is-search-open, :focus-within) {
        width: 100%;
        min-width: 0;
        max-width: 620px;
    }
    html body #header-module .search-wrapper input { min-width: 0; }
    html body #header-module .header-actions,
    html body #header-module .icon-group { gap: 10px; }

    html body #nav-module .nav-links {
        flex-wrap: wrap;
        justify-content: space-between;
        gap: 4px 8px;
    }
    html body #nav-module .nav-links a {
        font-size: 14px;
        padding-inline: 10px;
        white-space: normal;
        text-align: center;
    }

    html body :is(.tea-catalog-page, .pottery-catalog-page) .catalog-layout,
    html body .opt-catalog-shell {
        display: grid;
        grid-template-columns: clamp(190px, 18vw, 230px) minmax(0, 1fr);
        gap: var(--desktop-gap);
        align-items: start;
    }
    html body :is(.catalog-content, .opt-catalog-content, .product-summary,
        .checkout-layout > *, .opt-cart-layout > *) { min-width: 0; }
    html body .catalog-content .products-grid,
    html body .opt-catalog-content .opt-catalog-grid {
        grid-template-columns: repeat(auto-fill, minmax(min(100%, 230px), 1fr));
        gap: 16px;
    }
    html body :is(.filters-sidebar, .opt-catalog-sidebar) {
        min-width: 0;
        max-height: calc(100dvh - 40px);
        overflow-y: auto;
    }
    html body .price-inputs input { min-width: 0; }
    html body :is(.opt-catalog-toolbar, .section-head) { flex-wrap: wrap; }

    /* The home banner fills the viewport; other pages retain bounded content.
       Scale the headline with both dimensions so short laptop screens still fit. */
    html body.home-page #header-module .header-flex,
    html body.home-page #nav-module .container {
        max-width: none;
        padding-inline: clamp(20px, 4vw, 102px);
    }
    html body.home-page .hero-swiper {
        height: 100vh;
        height: 100svh;
        min-height: 0;
    }
    html body.home-page .hero-slide-content {
        top: 50%;
        bottom: auto;
        transform: translateY(-40%);
        left: clamp(24px, 9.4vw, 240px);
        right: clamp(24px, 9.4vw, 240px);
        width: auto;
        max-width: 1100px;
    }
    html body.home-page .hero-slide-title {
        font-size: clamp(36px, min(4.3vw, 8svh), 80px);
        line-height: 1.06;
        max-width: 1100px;
    }
    html body.home-page .hero-slide-actions {
        max-width: 100%;
        margin-top: 24px;
        gap: 16px;
    }
    html body.home-page .hero-slide-button {
        min-height: 44px;
        padding: 10px 20px;
        font-size: 16px;
        line-height: 1.2;
    }
}

/* Shared desktop sizing. No zoom/transform on the page: native browser zoom,
   colours, typography families, borders and mobile rules remain untouched. */
@media (min-width: 769px) {
    html body {
        --desktop-photo-height: clamp(200px, 32svh, 280px);
        --desktop-section-space: clamp(28px, 4svh, 48px);
        font-size: 15px;
    }

    html body #header-module .logo img { height: 44px; width: auto; }
    html body #header-module .main-header { padding-block: 8px; }
    html body #nav-module .nav-bar { padding-block: 2px; }
    html body #header-module .search-wrapper { min-height: 44px; padding-block: 2px; }
    html body #header-module .header-cart-icon { height: 30px; width: 26px; }
    html body #header-module .header-cart-link { min-height: 44px; padding-block: 6px; }
    html body #header-module :is(.header-contact-label, .icon-circle-label, .header-cart-title) { font-size: 14px; }
    html body #nav-module .nav-links a { padding-block: 8px; }

    html body main h1:not(.hero-slide-title),
    html body .category-title { font-size: clamp(28px, 2.5vw, 36px); line-height: 1.2; }
    html body :is(.section-head, .opt-reference-section-head, .contacts-group-head) h2,
    html body.home-page :is(.featured-audience-link, .featured-products-title, .home-reviews-title, .pottery-title),
    html body.home-page .home-editorial-group .home-editorial-title {
        font-size: clamp(24px, 2.1vw, 30px) !important;
        line-height: 1.2 !important;
    }
    html body .product-panel h1 { font-size: clamp(24px, 2.2vw, 30px); }
    html body :is(.product-panel, .info-card, .checkout-card, .opt-cart-summary) { padding: 20px; }
    html body .product-layout { gap: 24px; }
    html body .product-gallery { max-width: min(100%, 420px); }
    html body .product-gallery :is(.product-main-image, .product-main-video) { max-height: 60svh; object-fit: contain !important; }
    html body .product-price-row .price-main { font-size: 30px; }

    /* Limit image size independently of the available card width. The entire
       original photo stays visible instead of being stretched or cropped more. */
    html body .product-card.product-card.product-card {
        min-height: 0 !important;
    }
    html body .product-card.product-card.product-card :is(.product-card-media, .product-thumb-link) {
        min-height: 0 !important;
        height: auto !important;
        aspect-ratio: auto !important;
        flex: 0 0 auto;
    }
    html body .product-card.product-card.product-card .product-thumb {
        height: var(--desktop-photo-height) !important;
        min-height: 0 !important;
        aspect-ratio: auto !important;
    }
    html body .product-card.product-card.product-card .product-thumb img {
        object-fit: contain !important;
    }
    html body .product-card.product-card.product-card .product-info {
        min-height: 0 !important;
        padding: 14px !important;
        gap: 8px !important;
    }
    html body .product-card.product-card.product-card :is(.product-title, .product-title a) {
        font-size: 16px !important;
        line-height: 1.3 !important;
    }
    html body .product-card.product-card.product-card .product-title {
        min-height: 0 !important;
        margin-block: 0 !important;
    }
    html body .product-card.product-card.product-card :is(.product-desc, .product-meta, .price-unit-label) {
        font-size: 13px !important;
    }
    html body .product-card.product-card.product-card .price-main { font-size: 22px !important; }
    html body .product-card.product-card.product-card .product-footer { gap: 8px; padding-top: 4px; }
    html body .product-card.product-card.product-card .add-to-cart-btn {
        min-height: 44px !important;
        height: auto !important;
        padding: 10px 12px !important;
        font-size: 14px !important;
    }
    html body .product-card .wholesale-prices { padding: 10px; gap: 6px; }
    html body .product-card .opt-order-rule { min-height: 0; padding-top: 8px; gap: 3px; }
    html body .product-card .opt-order-rule strong { font-size: 18px; }
    html body .product-card.product-card .product-tags { gap: 6px; }
    html body .product-card.product-card .product-tags span { padding: 4px 6px; font-size: 12px; line-height: 1.35; }
    html body .product-card.product-card .opt-product-order-rule { margin-top: 8px; padding-top: 8px; gap: 3px; }
    html body .product-card.product-card .opt-product-order-rule strong { font-size: 18px; }
    html body .product-card.product-card .opt-catalog-product-actions { margin-top: 8px; }
    html body .product-card.product-card :is(.opt-catalog-product-button, .opt-product-button) { min-height: 44px; padding: 10px 12px; font-size: 14px; }

    html body.home-page :is(.featured-products, .home-reviews, .pottery-section, .home-editorial-group, .tea-ceremonies) {
        padding-block: var(--desktop-section-space);
    }
    html body.home-page .featured-business { padding-top: var(--desktop-section-space); }
    html body.home-page .home-editorial-card,
    html body.home-page .home-editorial-media { min-height: 280px; }
    html body.home-page .home-editorial-copy { padding: 24px; gap: 16px; }
    html body.home-page .home-editorial-summary { font-size: 15px; }
    html body.home-page .home-editorial-action { min-height: 44px; padding: 10px 16px; font-size: 15px; }
    html body .opt-reference-page .opt-condition-card { min-height: 150px; padding-block: 18px; }
    html body .opt-reference-page .opt-condition-card strong { font-size: 24px; }
    html body .opt-reference-page .opt-condition-image { width: 170px; height: 170px; right: -50px; }
    html body .opt-route-hero,
    html body .opt-route-hero-content { min-height: 360px; }
    html body .opt-route-hero-content { padding: 28px; }
    html body .opt-route-switch button { min-height: 48px; padding-block: 8px; }
    html body .opt-catalog-hero { padding: 24px; gap: 20px; }
    html body .opt-catalog-hero-card { padding: 18px; min-height: 0; gap: 12px; }
    html body .opt-catalog-hero-card strong { font-size: 24px; }
    html body .opt-catalog-hero :is(p, .opt-catalog-hero-card p) { font-size: 15px; line-height: 1.5; }
    html body :is(.tea-service-hero, .tea-service-hero-inner) { min-height: 400px; }
    html body .tea-service-hero-inner { padding-block: 28px; gap: 24px; }
    html body .contact-method-card { min-height: 140px; padding: 18px; }
    html body .contact-method-body h3 { font-size: 18px; }
    html body #footer-module { padding-top: var(--desktop-section-space); }
}

@media (min-width: 769px) and (max-width: 1100px) {
    html body #header-module .header-contact-link,
    html body #header-module .icon-circle-account {
        width: 44px;
        min-width: 44px;
        padding-inline: 0;
    }
    html body #header-module :is(.header-contact-label, .icon-circle-label, .header-cart-meta) { display: none; }
    html body #header-module .header-cart-link {
        min-width: 0;
        gap: 8px;
        padding-inline: 10px;
    }
    html body #header-module .header-cart-icon { width: 28px; height: 36px; }
}