/* Desktop & tablet — mobile styles untouched below 768px */

.desktop-nav,
.desktop-header__actions,
.desktop-header__brand,
.site-footer {
    display: none;
}

@media (min-width: 768px) {
    :root {
        --app-width: 1200px;
        --page-pad: 32px;
        --tabbar-h: 0px;
        --desktop-header-h: 112px;
    }

    body.site-body {
        padding: 0;
        background: var(--background);
    }

    .app-shell {
        max-width: 100%;
        min-height: 100vh;
        min-height: 100dvh;
        border-radius: 0;
        box-shadow: none;
        overflow: visible;
    }

    /* Header */
    .app-header {
        position: sticky;
        top: 0;
        z-index: 500;
        padding: 16px var(--page-pad) 20px;
        display: grid;
        grid-template-columns: auto auto 1fr minmax(200px, 340px) auto;
        grid-template-areas: "logo brand nav search actions";
        align-items: center;
        gap: 8px 20px;
        box-shadow: 0 4px 18px rgba(0, 0, 0, 0.1);
    }

    .app-header__row {
        display: contents;
        height: auto;
        margin-bottom: 0;
    }

    .app-header__logo {
        grid-area: logo;
        max-width: none;
        flex-shrink: 0;
        align-self: center;
    }

    .app-header__logo:not(:has(.app-header__logo-img)) {
        display: none;
    }

    .app-header__logo-img {
        height: 84px;
        width: auto;
        max-width: 110px;
        object-fit: contain;
        object-position: left center;
        filter: drop-shadow(0 3px 10px rgba(0, 0, 0, 0.2));
    }

    .desktop-header__brand {
        grid-area: brand;
        display: flex;
        flex-direction: column;
        gap: 2px;
        min-width: 0;
        padding-right: 4px;
    }

    .desktop-header__brand-name {
        font-size: 17px;
        font-weight: 700;
        color: #fff;
        line-height: 1.2;
        letter-spacing: -0.02em;
        white-space: nowrap;
    }

    .desktop-header__brand-tagline {
        font-size: 12px;
        font-weight: 500;
        color: rgba(255, 255, 255, 0.78);
        line-height: 1.35;
        white-space: nowrap;
    }

    .desktop-nav {
        grid-area: nav;
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 4px;
        flex: 0 0 auto;
        margin-left: 0;
    }

    .desktop-nav__link {
        padding: 10px 16px;
        border-radius: var(--radius-btn);
        font-size: 14px;
        font-weight: 500;
        color: rgba(255, 255, 255, 0.88);
        transition: background var(--ease), color var(--ease);
        white-space: nowrap;
    }

    .desktop-nav__link:hover {
        background: rgba(255, 255, 255, 0.14);
        color: #fff;
    }

    .desktop-nav__link.active {
        background: rgba(255, 255, 255, 0.22);
        color: #fff;
        font-weight: 600;
    }

    .app-search-row {
        grid-area: search;
        flex: 1;
        flex-basis: auto;
        width: auto;
        max-width: 340px;
        min-width: 200px;
        margin: 0;
        padding: 0;
    }

    .app-search__filter {
        display: none;
    }

    .app-search {
        background: rgba(255, 255, 255, 0.95);
        border-color: rgba(255, 255, 255, 0.4);
        height: 44px;
    }

    .desktop-header__actions {
        grid-area: actions;
        display: flex;
        align-items: center;
        gap: 10px;
        flex-shrink: 0;
        margin-left: auto;
    }

    .desktop-header__action {
        position: relative;
        width: 44px;
        height: 44px;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        color: #fff;
        background: rgba(255, 255, 255, 0.16);
        border: 1px solid rgba(255, 255, 255, 0.24);
        transition: background var(--ease), transform var(--ease);
    }

    .desktop-header__action:hover {
        background: rgba(255, 255, 255, 0.26);
        transform: translateY(-1px);
    }

    .desktop-header__action.active {
        background: rgba(255, 255, 255, 0.3);
    }

    .desktop-header__action .app-tabbar__icon {
        background-color: #fff;
    }

    .desktop-header__action .app-badge {
        top: -2px;
        right: -2px;
    }

    .app-header__bag--mobile {
        display: none !important;
    }

    .app-search input {
        font-size: 15px;
    }

    /* Hide mobile tab bar */
    .app-tabbar {
        display: none !important;
    }

    .site-main {
        padding-bottom: 32px;
    }

    /* Footer */
    .site-footer {
        display: block;
        margin-top: auto;
        background: var(--primary-dark);
        border-top: none;
        padding: 48px var(--page-pad) 0;
        color: rgba(255, 255, 255, 0.88);
    }

    .site-footer__inner {
        max-width: var(--app-width);
        margin: 0 auto;
        display: grid;
        grid-template-columns: 1.2fr 2fr;
        gap: 48px;
        padding-bottom: 40px;
    }

    .site-footer__brand strong {
        display: block;
        font-size: 20px;
        font-weight: 700;
        margin-bottom: 8px;
        color: #fff;
    }

    .site-footer__brand p {
        font-size: 14px;
        color: rgba(255, 255, 255, 0.72);
        line-height: 1.6;
        max-width: 280px;
    }

    .site-footer__cols {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 32px;
    }

    .site-footer__col h3 {
        font-size: 13px;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: 0.06em;
        color: #fff;
        margin-bottom: 14px;
    }

    .site-footer__col a,
    .site-footer__col span {
        display: block;
        font-size: 14px;
        color: rgba(255, 255, 255, 0.72);
        margin-bottom: 10px;
        transition: color var(--ease);
    }

    .site-footer__col a:hover {
        color: #fff;
    }

    .site-footer__bottom {
        max-width: var(--app-width);
        margin: 0 auto;
        padding: 20px 0 28px;
        border-top: 1px solid rgba(255, 255, 255, 0.14);
        font-size: 13px;
        color: rgba(255, 255, 255, 0.72);
    }

    .site-footer__credit a {
        color: #fff;
    }

    .site-footer__credit a:hover {
        color: rgba(255, 255, 255, 0.9);
    }

    /* Grids */
    .product-grid {
        grid-template-columns: repeat(3, 1fr);
        gap: 20px;
    }

    .category-cards__grid {
        grid-template-columns: repeat(4, 1fr);
        gap: 16px;
    }

    .dept-grid__inner {
        grid-template-columns: repeat(4, 1fr);
        gap: 16px;
    }

    /* Hero — split: copy | image */
    .hero-banner {
        padding: 0 var(--page-pad);
        max-width: var(--app-width);
        margin: 0 auto;
    }

    .hero-banner__slide {
        flex: 0 0 100%;
        display: grid;
        grid-template-columns: 1fr 1fr;
        align-items: stretch;
        aspect-ratio: unset;
        height: 320px;
        min-height: 320px;
        max-height: 320px;
        background: var(--primary-dark);
    }

    .hero-banner__copy {
        position: relative;
        inset: auto;
        grid-column: 1;
        grid-row: 1;
        z-index: 1;
        justify-content: center;
        align-items: flex-start;
        padding: 36px 32px;
        background: linear-gradient(145deg, var(--primary-dark) 0%, var(--primary) 100%);
        color: #fff;
        pointer-events: none;
    }

    .hero-banner__media {
        position: relative;
        inset: auto;
        grid-column: 2;
        grid-row: 1;
        min-height: 0;
        height: 100%;
        overflow: hidden;
        background: var(--surface-input);
    }

    .hero-banner__media img {
        width: 100%;
        height: 100%;
        max-width: none;
        object-fit: cover;
        object-position: center top;
    }

    .hero-banner__title {
        font-size: 28px;
        color: #fff;
    }

    .hero-banner__text {
        font-size: 15px;
        max-width: 360px;
        opacity: 0.92;
        color: rgba(255, 255, 255, 0.9);
    }

    .hero-banner__btn {
        height: 44px;
        padding: 0 24px;
        font-size: 14px;
        background: #fff;
        color: var(--primary-dark);
    }

    .page-home .site-main > .home-page > .hero-banner {
        padding-top: 8px;
    }

    /* Home sections */
    .app-section {
        padding-left: var(--page-pad);
        padding-right: var(--page-pad);
    }

    .pick-day__card {
        display: grid;
        grid-template-columns: auto 1fr;
        gap: 32px;
        align-items: center;
        padding: 24px;
    }

    .pick-day__ring {
        width: 200px;
        height: 200px;
        max-width: 200px;
        margin: 0;
    }

    .spotlight__card {
        grid-template-columns: 1fr 140px;
        max-height: 120px;
    }

    .spotlight__media {
        width: 140px;
        height: 120px;
    }

    .spotlight__copy {
        padding: 14px 18px;
    }

    .spotlight__copy h3 {
        font-size: 15px;
    }

    .promo-duo {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 16px;
        margin: 0 var(--page-pad) 24px;
    }

    .promo-duo__card {
        min-height: 132px;
        padding: 18px;
    }

    .promo-duo__card strong {
        font-size: 16px;
    }

    .home-scroll__track {
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        gap: 16px;
        overflow: visible;
        align-items: stretch;
    }

    .shop-card--scroll {
        flex: none;
        height: 100%;
    }

    .product-grid > .shop-card {
        height: 100%;
    }

    .cat-circles__track {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(88px, 1fr));
        gap: 20px;
        overflow: visible;
    }

    .cat-circle {
        width: auto;
    }

    .cat-pills {
        flex-wrap: wrap;
        overflow: visible;
        justify-content: center;
    }

    /* Shop / category pages */
    .page-head {
        max-width: var(--app-width);
        margin: 0 auto;
        padding: 24px var(--page-pad) 8px;
    }

    .page-head h1 {
        font-size: 28px;
    }

    .filter-bar {
        max-width: var(--app-width);
        margin: 0 auto;
        flex-wrap: wrap;
        overflow: visible;
        padding-bottom: 8px;
    }

    .admin-container,
    .category-cards,
    .app-section--products {
        max-width: var(--app-width);
        margin-left: auto;
        margin-right: auto;
    }

    /* Product page */
    .product-topbar {
        max-width: var(--app-width);
        margin: 0 auto;
        padding-top: 20px;
    }

    .product-page {
        max-width: var(--app-width);
        margin: 0 auto;
        display: grid;
        grid-template-columns: 1fr 1fr;
        grid-template-areas:
            "topbar topbar"
            "gallery info"
            "recs recs";
        gap: 0 40px;
        align-items: start;
    }

    .product-topbar {
        grid-area: topbar;
    }

    .product-carousel {
        grid-area: gallery;
        padding: 0 0 0 var(--page-pad);
        position: sticky;
        top: calc(var(--desktop-header-h) + 16px);
    }

    .product-carousel__track {
        flex-direction: column;
        overflow: visible;
        gap: 12px;
    }

    .product-carousel__slide {
        flex: none;
        width: 100%;
        aspect-ratio: 4 / 5;
    }

    .product-carousel__dots {
        display: none;
    }

    .product-detail-body {
        grid-area: info;
        padding: 0 var(--page-pad) 32px 0;
    }

    .product-detail-body__title {
        font-size: 26px;
    }

    .product-detail-body__price {
        font-size: 28px;
    }

    .product-rec {
        grid-area: recs;
        grid-column: 1 / -1;
        padding: 0 var(--page-pad) 32px;
    }

    .product-rec .home-scroll__track {
        grid-template-columns: repeat(4, 1fr);
    }

    /* Cart */
    .cart-layout {
        max-width: var(--app-width);
        margin: 0 auto;
        padding: 0 var(--page-pad) 48px;
    }

    .cart-layout > .page-head {
        padding-left: 0;
        padding-right: 0;
    }

    /* Shop, category, search, wishlist */
    .shop-layout {
        max-width: var(--app-width);
        margin: 0 auto;
        padding: 0 var(--page-pad) 48px;
    }

    .shop-layout > .page-head {
        padding-left: 0;
        padding-right: 0;
        max-width: none;
        margin: 0;
    }

    .shop-layout > .filter-bar {
        max-width: none;
        margin: 0 0 16px;
        padding-left: 0;
        padding-right: 0;
    }

    .shop-layout .category-cards {
        margin-left: 0;
        margin-right: 0;
        max-width: none;
        padding-left: 0;
        padding-right: 0;
    }

    .shop-layout .app-section--products {
        margin: 0;
        max-width: none;
        padding-left: 0;
        padding-right: 0;
    }

    .shop-layout .app-section {
        padding-left: 0;
        padding-right: 0;
    }

    .search-page-form {
        max-width: 560px;
        margin-bottom: 24px;
    }

    .search-page-form input {
        font-size: 15px;
        height: 48px;
    }

    .search-page-form button {
        height: 48px;
        padding: 0 24px;
        font-size: 14px;
    }

    .search-categories__list {
        gap: 10px;
    }

    .search-category-chip {
        font-size: 13px;
        padding: 10px 16px;
    }

    .empty-state {
        padding: 80px 24px;
    }

    .empty-state h2 {
        font-size: 22px;
    }

    .cart-page {
        display: grid;
        grid-template-columns: 1fr 380px;
        gap: 32px;
        align-items: start;
        padding: 0;
    }

    .cart-page--empty {
        display: block;
    }

    .cart-list {
        grid-column: 1;
    }

    .cart-sidebar {
        grid-column: 2;
        position: sticky;
        top: calc(var(--desktop-header-h) + 16px);
        display: flex;
        flex-direction: column;
        gap: 16px;
    }

    .cart-details {
        background: var(--surface-card);
        border: 1px solid var(--border);
        border-radius: var(--radius-card);
        padding: 20px;
        box-shadow: var(--shadow-soft);
    }

    .cart-checkout {
        position: static;
        left: auto;
        transform: none;
        width: auto;
        max-width: none;
        padding: 20px;
        border-radius: var(--radius-card);
        border: 1px solid var(--border);
        box-shadow: var(--shadow-soft);
    }

    .cart-card__media {
        width: 110px;
        height: 130px;
    }

    /* About page */
    .about-layout {
        max-width: var(--app-width);
        margin: 0 auto;
        padding: 0 var(--page-pad) 56px;
    }

    .about-layout > .page-head {
        padding: 32px 0 16px;
        max-width: none;
        margin: 0;
    }

    .about-layout > .page-head h1 {
        font-size: 32px;
        font-weight: 700;
        letter-spacing: -0.02em;
    }

    .about-layout > .page-head p {
        font-size: 16px;
        max-width: 560px;
    }

    .about-page {
        max-width: none;
        margin: 0;
        padding: 0 0 8px;
    }

    .about-intro {
        display: grid;
        grid-template-columns: 1.15fr 1fr;
        gap: 40px;
        align-items: center;
        margin-bottom: 40px;
    }

    .about-intro__media {
        margin-bottom: 0;
        aspect-ratio: 4 / 3;
        border-radius: 20px;
    }

    .about-intro__overlay h2 {
        font-size: 28px;
    }

    .about-intro__lead {
        font-size: 16px;
        line-height: 1.8;
    }

    .about-block {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 20px;
        margin-bottom: 40px;
    }

    .about-block__card {
        padding: 24px;
        border-radius: 18px;
    }

    .about-block__card h3 {
        font-size: 18px;
    }

    .about-block__card p {
        font-size: 15px;
    }

    .about-section {
        margin-bottom: 40px;
    }

    .about-section__title {
        font-size: 22px;
        font-weight: 700;
        margin-bottom: 20px;
    }

    .about-section--alt {
        margin: 0 0 40px;
        padding: 32px;
        border-radius: 20px;
    }

    .about-values {
        display: flex;
        flex-wrap: wrap;
        gap: 12px;
    }

    .about-values__chip {
        font-size: 14px;
        padding: 10px 18px;
    }

    .about-features {
        grid-template-columns: repeat(4, 1fr);
        gap: 16px;
    }

    .about-feature {
        padding: 20px;
        border-radius: 16px;
    }

    .about-feature h4 {
        font-size: 15px;
    }

    .about-feature p {
        font-size: 13px;
        line-height: 1.55;
    }

    .about-testimonials {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 20px;
    }

    .about-quote {
        padding: 24px;
        height: 100%;
    }

    .about-quote p {
        font-size: 15px;
    }

    .about-promise {
        padding: 40px 48px;
        border-radius: 20px;
        display: grid;
        grid-template-columns: 1fr auto;
        gap: 24px 40px;
        align-items: center;
        text-align: left;
    }

    .about-promise h2 {
        font-size: 24px;
        margin-bottom: 0;
        grid-column: 1;
        grid-row: 1;
    }

    .about-promise p {
        font-size: 15px;
        max-width: none;
        margin: 0;
        grid-column: 1;
        grid-row: 2;
    }

    .about-promise__actions {
        flex-direction: row;
        max-width: none;
        margin: 0;
        grid-column: 2;
        grid-row: 1 / span 2;
        align-self: center;
    }

    .about-promise__btn {
        min-width: 180px;
        white-space: nowrap;
    }

    /* Contact / profile page */
    .contact-layout {
        max-width: var(--app-width);
        margin: 0 auto;
        padding: 32px var(--page-pad) 56px;
    }

    .page-head--contact {
        display: block;
        padding: 0 0 28px;
        max-width: none;
        margin: 0;
    }

    .page-head--contact h1 {
        font-size: 32px;
        font-weight: 700;
        letter-spacing: -0.02em;
    }

    .page-head--contact p {
        font-size: 16px;
        max-width: 560px;
    }

    .profile-page {
        max-width: none;
        margin: 0;
        padding: 0;
        display: grid;
        grid-template-columns: minmax(300px, 360px) 1fr;
        gap: 40px;
        align-items: start;
    }

    .profile-sidebar {
        position: sticky;
        top: calc(var(--desktop-header-h) + 16px);
        display: flex;
        flex-direction: column;
        gap: 20px;
    }

    .profile-hero {
        padding: 24px;
        background: var(--surface-card);
        border: 1px solid var(--border);
        border-radius: 20px;
        box-shadow: var(--shadow-soft);
    }

    .profile-hero__avatar {
        width: 80px;
        height: 80px;
    }

    .profile-hero__name {
        font-size: 24px;
    }

    .profile-hero__tagline {
        font-size: 14px;
    }

    .profile-stats {
        margin-bottom: 0;
        gap: 12px;
    }

    .profile-stat {
        min-height: 88px;
        border-radius: 16px;
    }

    .profile-stat strong {
        font-size: 22px;
    }

    .profile-menu {
        margin-bottom: 0;
        border-radius: 18px;
    }

    .profile-main {
        display: flex;
        flex-direction: column;
        gap: 32px;
        min-width: 0;
    }

    .profile-contact {
        margin-bottom: 0;
        padding: 28px;
        background: var(--surface-card);
        border: 1px solid var(--border);
        border-radius: 20px;
        box-shadow: var(--shadow-soft);
    }

    .profile-section__title {
        font-size: 20px;
        font-weight: 700;
        margin-bottom: 6px;
    }

    .profile-section__desc {
        font-size: 14px;
        margin-bottom: 20px;
    }

    .profile-wa-btn {
        flex-direction: row;
        justify-content: center;
        gap: 10px;
        min-height: 58px;
        font-size: 16px;
        border-radius: 14px;
    }

    .profile-wa-btn em {
        font-size: 13px;
        margin-left: 4px;
    }

    .profile-contact-cards {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 12px;
    }

    .profile-contact-card--static {
        grid-column: 1 / -1;
    }

    .profile-form-section {
        padding: 28px;
        background: var(--surface-card);
        border: 1px solid var(--border);
        border-radius: 20px;
        box-shadow: var(--shadow-soft);
    }

    .profile-form {
        padding: 0;
        background: transparent;
        border: none;
        border-radius: 0;
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 0 20px;
    }

    .profile-form__group:nth-child(2) {
        grid-column: 1;
    }

    .profile-form__group:nth-child(3) {
        grid-column: 2;
    }

    .profile-form__group:nth-child(4),
    .profile-form__group:nth-child(5) {
        grid-column: 1 / -1;
    }

    .profile-form__group input,
    .profile-form__group textarea {
        font-size: 15px;
    }

    .profile-form__submit {
        grid-column: 1 / -1;
        max-width: 240px;
        justify-self: start;
        height: 50px;
        font-size: 15px;
    }

    .profile-stats {
        grid-template-columns: repeat(3, 1fr);
    }

    .home-testimonials .home-scroll__track {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 16px;
        overflow: visible;
    }

    .home-quote {
        height: 100%;
    }

    /* Modals & toasts */
    .cart-toast {
        left: auto;
        right: 32px;
        transform: none;
        max-width: 400px;
    }

    .checkout-sheet__panel {
        max-width: 480px;
        margin: 0 auto;
    }

    .search-results {
        max-height: 420px;
    }
}

/* Tablet — between phone and large desktop */
@media (min-width: 768px) and (max-width: 1023px) {
    :root {
        --desktop-header-h: 152px;
        --page-pad: 24px;
    }

    .app-header {
        grid-template-columns: auto 1fr auto;
        grid-template-areas:
            "logo brand actions"
            "nav search search";
        gap: 10px 16px;
        padding-bottom: 14px;
    }

    .app-header__logo-img {
        height: 72px;
        max-width: 96px;
    }

    .desktop-header__brand-name {
        font-size: 15px;
    }

    .desktop-header__brand-tagline {
        font-size: 11px;
    }

    .desktop-nav {
        justify-content: flex-start;
        flex-wrap: wrap;
    }

    .desktop-nav__link {
        padding: 8px 12px;
        font-size: 13px;
    }

    .app-search-row {
        max-width: none;
        min-width: 0;
    }

    .dept-grid__inner {
        grid-template-columns: repeat(2, 1fr);
    }

    .home-scroll__track {
        grid-template-columns: repeat(3, 1fr);
    }

    .product-rec .home-scroll__track {
        grid-template-columns: repeat(3, 1fr);
    }

    .category-cards__grid {
        grid-template-columns: repeat(3, 1fr);
    }

    .cat-circles__track {
        grid-template-columns: repeat(auto-fill, minmax(80px, 1fr));
    }

    .product-page {
        gap: 0 28px;
    }

    .cart-page {
        grid-template-columns: 1fr 320px;
        gap: 24px;
    }

    .profile-page {
        grid-template-columns: minmax(260px, 300px) 1fr;
        gap: 28px;
    }

    .about-intro {
        gap: 28px;
    }

    .about-features {
        grid-template-columns: repeat(2, 1fr);
    }

    .about-testimonials {
        grid-template-columns: 1fr;
    }

    .about-promise {
        grid-template-columns: 1fr;
        text-align: center;
        padding: 32px;
    }

    .about-promise h2,
    .about-promise p {
        grid-column: 1;
        grid-row: auto;
    }

    .about-promise__actions {
        grid-column: 1;
        grid-row: auto;
        justify-content: center;
        margin-top: 8px;
    }

    .site-footer__inner {
        grid-template-columns: 1fr 1.5fr;
        gap: 32px;
    }

    .site-footer__cols {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (min-width: 1024px) {
    :root {
        --app-width: 1280px;
        --page-pad: 40px;
    }

    .app-search-row {
        max-width: 400px;
    }

    .product-grid {
        grid-template-columns: repeat(4, 1fr);
        gap: 24px;
    }

    .category-cards__grid {
        grid-template-columns: repeat(5, 1fr);
    }

    .hero-banner__slide {
        height: 380px;
        min-height: 380px;
        max-height: 380px;
    }

    .hero-banner__copy {
        padding: 44px 40px;
    }

    .hero-banner__title {
        font-size: 36px;
    }

    .hero-banner__text {
        font-size: 16px;
        max-width: 420px;
    }

    .home-scroll__track {
        grid-template-columns: repeat(5, 1fr);
    }

    .product-rec .home-scroll__track {
        grid-template-columns: repeat(5, 1fr);
    }

    .about-testimonials {
        grid-template-columns: repeat(3, 1fr);
    }

    .about-intro__overlay h2 {
        font-size: 32px;
    }
}

@media (min-width: 1280px) {
    :root {
        --app-width: 1360px;
    }

    .product-grid {
        grid-template-columns: repeat(4, 1fr);
    }
}