/* =========================================================
   iPHONE PREMIUM MARKETPLACE
   RESPONSIVE.CSS
   Full Responsive System
========================================================= */


/* =========================================================
   1. LARGE DESKTOP
========================================================= */

@media (max-width: 1400px) {

    .container {
        width: min(1180px, calc(100% - 48px));
    }

    .products-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

}


/* =========================================================
   2. DESKTOP / SMALL LAPTOP
========================================================= */

@media (max-width: 1200px) {

    .container {
        width: min(1120px, calc(100% - 40px));
    }


    /* -----------------------------------------------------
       HEADER
    ----------------------------------------------------- */

    .header-inner {
        gap: 20px;
    }

    .main-navigation {
        gap: 18px;
    }

    .main-navigation a {
        font-size: 13px;
    }


    /* -----------------------------------------------------
       HOME HERO
    ----------------------------------------------------- */

    .hero-content {
        max-width: 580px;
    }

    .hero-title {
        font-size: clamp(46px, 5vw, 68px);
    }


    /* -----------------------------------------------------
       PRODUCT DETAIL
    ----------------------------------------------------- */

    .product-detail-grid {
        gap: 45px;
    }


    /* -----------------------------------------------------
       PRODUCTS
    ----------------------------------------------------- */

    .products-layout {
        grid-template-columns: 225px minmax(0, 1fr);
        gap: 25px;
    }

    .products-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }


    /* -----------------------------------------------------
       LEGAL
    ----------------------------------------------------- */

    .legal-layout {
        grid-template-columns: 220px minmax(0, 1fr);
        gap: 30px;
    }


    /* -----------------------------------------------------
       CART
    ----------------------------------------------------- */

    .cart-layout {
        grid-template-columns: minmax(0, 1fr) 340px;
    }


    /* -----------------------------------------------------
       CHECKOUT
    ----------------------------------------------------- */

    .checkout-layout {
        grid-template-columns: minmax(0, 1fr) 360px;
    }

}


/* =========================================================
   3. TABLET LANDSCAPE
========================================================= */

@media (max-width: 1024px) {

    .container {
        width: min(960px, calc(100% - 36px));
    }


    /* -----------------------------------------------------
       HEADER
    ----------------------------------------------------- */

    .header-inner {
        min-height: 72px;
    }

    .main-navigation {
        gap: 14px;
    }

    .main-navigation a {
        font-size: 12px;
    }

    .logo-text {
        font-size: 15px;
    }


    /* -----------------------------------------------------
       HERO
    ----------------------------------------------------- */

    .hero {
        min-height: 650px;
    }

    .hero-content {
        max-width: 540px;
    }

    .hero-title {
        font-size: 56px;
    }


    /* -----------------------------------------------------
       HOME SECTIONS
    ----------------------------------------------------- */

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

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


    /* -----------------------------------------------------
       PRODUCTS
    ----------------------------------------------------- */

    .products-toolbar {
        align-items: stretch;
    }

    .products-layout {
        grid-template-columns: 1fr;
    }

    .products-filter {
        position: static;
    }

    .filter-card {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 20px;
    }

    .filter-heading {
        grid-column: 1 / -1;
    }

    .filter-group {
        border-bottom: 0;
    }

    .products-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }


    /* -----------------------------------------------------
       PRODUCT DETAIL
    ----------------------------------------------------- */

    .product-detail-grid {
        grid-template-columns: 1fr 1fr;
        gap: 35px;
    }

    .product-detail-info h1 {
        font-size: 42px;
    }

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

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

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


    /* -----------------------------------------------------
       PROMO
    ----------------------------------------------------- */

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


    /* -----------------------------------------------------
       REVIEWS
    ----------------------------------------------------- */

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


    /* -----------------------------------------------------
       CONTACT
    ----------------------------------------------------- */

    .contact-layout {
        grid-template-columns: 1fr;
    }

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


    /* -----------------------------------------------------
       CART
    ----------------------------------------------------- */

    .cart-layout {
        grid-template-columns: 1fr;
    }

    .cart-summary {
        position: static;
    }


    /* -----------------------------------------------------
       CHECKOUT
    ----------------------------------------------------- */

    .checkout-layout {
        grid-template-columns: 1fr;
    }

    .checkout-summary {
        position: static;
        order: -1;
    }


    /* -----------------------------------------------------
       FOOTER
    ----------------------------------------------------- */

    .footer-grid {
        grid-template-columns: 1.5fr 1fr 1fr;
    }

}


/* =========================================================
   4. TABLET PORTRAIT
========================================================= */

@media (max-width: 900px) {


    /* -----------------------------------------------------
       GLOBAL
    ----------------------------------------------------- */

    .container {
        width: calc(100% - 32px);
    }

    section {
        scroll-margin-top: 80px;
    }


    /* -----------------------------------------------------
       HEADER
    ----------------------------------------------------- */

    .header-inner {
        min-height: 68px;
    }

    .main-navigation {
        display: none;
    }

    .header-actions {
        margin-left: auto;
    }


    /* -----------------------------------------------------
       HERO
    ----------------------------------------------------- */

    .hero {
        min-height: 600px;
        display: flex;
        align-items: center;
    }

    .hero-content {
        max-width: 620px;
    }

    .hero-title {
        font-size: clamp(44px, 7vw, 60px);
    }


    /* -----------------------------------------------------
       HERO IMAGE
    ----------------------------------------------------- */

    .hero-visual {
        opacity: .35;
    }


    /* -----------------------------------------------------
       SECTION
    ----------------------------------------------------- */

    .section-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 12px;
    }


    /* -----------------------------------------------------
       PRODUCTS
    ----------------------------------------------------- */

    .products-toolbar {
        flex-direction: column;
    }

    .products-search,
    .products-sort {
        width: 100%;
        max-width: none;
    }

    .products-layout {
        grid-template-columns: 1fr;
    }

    .products-filter {
        position: static;
    }

    .filter-card {
        display: block;
    }

    .filter-heading {
        display: flex;
    }

    .filter-group {
        padding: 20px 0;
        border-bottom: 1px solid #ededf0;
    }

    .products-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }


    /* -----------------------------------------------------
       PRODUCT DETAIL
    ----------------------------------------------------- */

    .product-detail-grid {
        grid-template-columns: 1fr;
    }

    .product-detail-gallery {
        width: min(700px, 100%);
        margin: 0 auto;
    }

    .product-detail-info {
        width: min(700px, 100%);
        margin: 0 auto;
    }


    /* -----------------------------------------------------
       SPECIFICATIONS
    ----------------------------------------------------- */

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


    /* -----------------------------------------------------
       FAQ
    ----------------------------------------------------- */

    .faq-layout {
        grid-template-columns: 1fr;
    }

    .faq-sidebar {
        position: static;
    }


    /* -----------------------------------------------------
       CONTACT
    ----------------------------------------------------- */

    .contact-layout {
        grid-template-columns: 1fr;
    }


    /* -----------------------------------------------------
       TRACKING
    ----------------------------------------------------- */

    .tracking-layout {
        grid-template-columns: 1fr;
    }


    /* -----------------------------------------------------
       FOOTER
    ----------------------------------------------------- */

    .footer-grid {
        grid-template-columns: 1.5fr 1fr 1fr;
    }

}


/* =========================================================
   5. MOBILE LARGE
========================================================= */

@media (max-width: 768px) {


    /* -----------------------------------------------------
       GLOBAL
    ----------------------------------------------------- */

    .container {
        width: calc(100% - 28px);
    }

    body {
        overflow-x: hidden;
    }


    /* -----------------------------------------------------
       HEADER
    ----------------------------------------------------- */

    .site-header {
        position: relative;
    }

    .header-inner {
        min-height: 64px;
    }

    .logo-text {
        display: none;
    }

    .logo-mark {
        width: 38px;
        height: 38px;
    }

    .cart-navigation {
        min-height: 40px;
        padding: 0 12px;
    }

    .cart-navigation span:first-child {
        display: none;
    }


    /* -----------------------------------------------------
       BREADCRUMB
    ----------------------------------------------------- */

    .breadcrumb .container {
        min-height: 48px;
    }

    .breadcrumb ol {
        font-size: 12px;
        gap: 7px;
    }

    .breadcrumb li {
        gap: 7px;
    }


    /* -----------------------------------------------------
       HERO
    ----------------------------------------------------- */

    .hero {
        min-height: 560px;
        padding: 70px 0;
    }

    .hero-title {
        font-size: clamp(38px, 10vw, 54px);
        letter-spacing: -1.5px;
    }

    .hero-description {
        max-width: 560px;
        font-size: 15px;
        line-height: 1.7;
    }

    .hero-actions {
        flex-wrap: wrap;
    }

    .hero-actions .btn {
        min-width: 145px;
    }


    /* -----------------------------------------------------
       SECTION SPACING
    ----------------------------------------------------- */

    .section,
    .products-section,
    .product-detail-section,
    .product-specification,
    .product-reviews-section,
    .legal-content-section {
        padding-top: 60px;
        padding-bottom: 60px;
    }


    /* -----------------------------------------------------
       HOME GRIDS
    ----------------------------------------------------- */

    .feature-grid,
    .benefit-grid,
    .category-grid {
        grid-template-columns: 1fr 1fr;
    }


    /* -----------------------------------------------------
       PRODUCTS
    ----------------------------------------------------- */

    .products-hero {
        padding: 60px 0 50px;
    }

    .products-hero h1 {
        font-size: 42px;
        line-height: 1.08;
    }

    .products-hero p {
        font-size: 15px;
    }

    .products-result-header {
        align-items: flex-start;
        flex-direction: column;
        gap: 8px;
    }

    .products-result-header h2 {
        font-size: 28px;
    }

    .products-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 14px;
    }

    .product-info {
        padding: 17px;
    }

    .product-info h3 {
        font-size: 17px;
    }

    .product-variant {
        font-size: 13px;
    }

    .product-price {
        font-size: 17px;
    }

    .product-actions {
        grid-template-columns: 1fr;
    }

    .product-actions .btn {
        width: 100%;
    }


    /* -----------------------------------------------------
       PRODUCT DETAIL
    ----------------------------------------------------- */

    .product-detail-info h1 {
        font-size: 40px;
    }

    .product-detail-description {
        font-size: 15px;
    }

    .product-detail-actions {
        grid-template-columns: 1fr;
    }

    .product-detail-actions .btn {
        width: 100%;
    }

    .product-benefits {
        gap: 10px;
    }


    /* -----------------------------------------------------
       PRODUCT REVIEW
    ----------------------------------------------------- */

    .product-review-grid,
    .reviews-grid {
        grid-template-columns: 1fr 1fr;
    }


    /* -----------------------------------------------------
       SPECIFICATION
    ----------------------------------------------------- */

    .specification-grid {
        grid-template-columns: 1fr 1fr;
    }


    /* -----------------------------------------------------
       PROMO
    ----------------------------------------------------- */

    .promo-grid {
        grid-template-columns: 1fr 1fr;
        gap: 15px;
    }


    /* -----------------------------------------------------
       FAQ
    ----------------------------------------------------- */

    .faq-grid {
        grid-template-columns: 1fr;
    }


    /* -----------------------------------------------------
       CONTACT
    ----------------------------------------------------- */

    .contact-info-grid {
        grid-template-columns: 1fr 1fr;
    }


    /* -----------------------------------------------------
       CART
    ----------------------------------------------------- */

    .cart-item {
        grid-template-columns: 85px minmax(0, 1fr);
        gap: 15px;
    }

    .cart-item-actions {
        grid-column: 2;
    }

    .cart-item-price {
        text-align: left;
    }


    /* -----------------------------------------------------
       CHECKOUT
    ----------------------------------------------------- */

    .checkout-form-grid {
        grid-template-columns: 1fr;
    }

    .checkout-form-group.full {
        grid-column: auto;
    }


    /* -----------------------------------------------------
       TRACKING
    ----------------------------------------------------- */

    .tracking-card {
        padding: 25px;
    }


    /* -----------------------------------------------------
       LEGAL
    ----------------------------------------------------- */

    .legal-hero {
        padding: 60px 0 50px;
    }

    .legal-hero h1 {
        font-size: 42px;
    }

    .legal-hero p {
        font-size: 15px;
    }

    .legal-layout {
        grid-template-columns: 1fr;
    }

    .legal-sidebar {
        position: static;
    }

    .legal-sidebar-card {
        padding: 20px;
    }

    .legal-sidebar nav {
        display: grid;
        grid-template-columns: 1fr 1fr;
        column-gap: 18px;
    }

    .legal-article {
        padding: 30px 25px;
    }

    .legal-section h2 {
        font-size: 25px;
    }


    /* -----------------------------------------------------
       CTA
    ----------------------------------------------------- */

    .products-cta-card,
    .product-detail-cta-card,
    .legal-cta-card {
        align-items: flex-start;
        flex-direction: column;
        padding: 30px;
    }

    .products-cta-card .btn,
    .product-detail-cta-card .btn,
    .legal-cta-card .btn {
        width: 100%;
    }

    .legal-cta-actions {
        width: 100%;
        display: grid;
        grid-template-columns: 1fr;
    }


    /* -----------------------------------------------------
       FOOTER
    ----------------------------------------------------- */

    .footer-grid {
        grid-template-columns: 1.5fr 1fr;
        gap: 35px 25px;
    }

    .footer-brand {
        grid-column: 1 / -1;
    }

}


/* =========================================================
   6. MOBILE
========================================================= */

@media (max-width: 600px) {


    /* -----------------------------------------------------
       CONTAINER
    ----------------------------------------------------- */

    .container {
        width: calc(100% - 24px);
    }


    /* -----------------------------------------------------
       HEADER
    ----------------------------------------------------- */

    .header-inner {
        min-height: 60px;
    }

    .logo-mark {
        width: 36px;
        height: 36px;
    }

    .header-actions {
        gap: 6px;
    }


    /* -----------------------------------------------------
       HERO
    ----------------------------------------------------- */

    .hero {
        min-height: 520px;
        padding: 60px 0;
    }

    .hero-title {
        font-size: 39px;
    }

    .hero-actions {
        display: grid;
        grid-template-columns: 1fr;
        width: 100%;
        max-width: 320px;
    }

    .hero-actions .btn {
        width: 100%;
    }


    /* -----------------------------------------------------
       HOME GRID
    ----------------------------------------------------- */

    .feature-grid,
    .benefit-grid,
    .category-grid {
        grid-template-columns: 1fr;
    }


    /* -----------------------------------------------------
       PRODUCTS
    ----------------------------------------------------- */

    .products-section {
        padding: 50px 0;
    }

    .products-grid {
        grid-template-columns: 1fr 1fr;
        gap: 12px;
    }

    .product-image {
        aspect-ratio: 1 / 1;
    }

    .product-badge {
        top: 10px;
        left: 10px;
        min-height: 24px;
        padding: 0 8px;
        font-size: 9px;
    }

    .product-info {
        padding: 14px;
    }

    .product-category {
        font-size: 10px;
        letter-spacing: .4px;
    }

    .product-info h3 {
        font-size: 15px;
    }

    .product-variant {
        margin: 6px 0;
        font-size: 11px;
    }

    .product-rating {
        margin: 9px 0;
        font-size: 11px;
    }

    .product-price {
        margin-bottom: 13px;
        font-size: 15px;
    }

    .product-actions {
        gap: 6px;
    }

    .product-actions .btn {
        min-height: 40px;
        padding: 0 9px;
        font-size: 11px;
    }


    /* -----------------------------------------------------
       FILTER
    ----------------------------------------------------- */

    .filter-card {
        padding: 18px;
        border-radius: 16px;
    }

    .filter-group label {
        font-size: 13px;
    }


    /* -----------------------------------------------------
       PRODUCT DETAIL
    ----------------------------------------------------- */

    .product-detail-section {
        padding: 50px 0;
    }

    .product-detail-main-image {
        border-radius: 20px;
    }

    .product-thumbnails {
        gap: 8px;
    }

    .product-thumbnail {
        width: 62px;
        height: 62px;
    }

    .product-detail-info h1 {
        font-size: 36px;
        letter-spacing: -1px;
    }

    .product-detail-rating {
        flex-wrap: wrap;
    }

    .product-detail-price {
        font-size: 25px;
    }

    .product-detail-description {
        font-size: 14px;
        line-height: 1.75;
    }

    .product-option-list,
    .product-color-options {
        gap: 7px;
    }

    .option-button {
        min-width: 75px;
        height: 42px;
        padding: 0 12px;
        font-size: 12px;
    }

    .color-option {
        min-height: 42px;
        padding: 0 10px;
        font-size: 12px;
    }

    .product-quantity {
        align-items: flex-start;
        flex-direction: column;
        gap: 12px;
    }

    .product-benefits div {
        font-size: 13px;
    }


    /* -----------------------------------------------------
       SPECIFICATIONS
    ----------------------------------------------------- */

    .specification-grid {
        grid-template-columns: 1fr;
    }

    .specification-item {
        padding: 19px;
    }


    /* -----------------------------------------------------
       REVIEWS
    ----------------------------------------------------- */

    .product-review-grid,
    .reviews-grid {
        grid-template-columns: 1fr;
    }


    /* -----------------------------------------------------
       PROMO
    ----------------------------------------------------- */

    .promo-grid {
        grid-template-columns: 1fr;
    }


    /* -----------------------------------------------------
       CONTACT
    ----------------------------------------------------- */

    .contact-info-grid {
        grid-template-columns: 1fr;
    }


    /* -----------------------------------------------------
       CART
    ----------------------------------------------------- */

    .cart-item {
        grid-template-columns: 70px minmax(0, 1fr);
        padding: 15px;
    }

    .cart-item-image {
        width: 70px;
        height: 70px;
    }

    .cart-item-actions {
        grid-column: 2;
        display: flex;
        flex-wrap: wrap;
    }


    /* -----------------------------------------------------
       LEGAL
    ----------------------------------------------------- */

    .legal-hero {
        padding: 55px 0 45px;
    }

    .legal-hero h1 {
        font-size: 38px;
        letter-spacing: -1px;
    }

    .legal-content-section {
        padding: 45px 0;
    }

    .legal-sidebar nav {
        grid-template-columns: 1fr;
    }

    .legal-article {
        padding: 24px 18px;
        border-radius: 16px;
    }

    .legal-section {
        padding-bottom: 32px;
        margin-bottom: 32px;
    }

    .legal-section h2 {
        font-size: 23px;
    }

    .legal-section p,
    .legal-section li {
        font-size: 14px;
        line-height: 1.8;
    }

    .legal-highlight {
        padding: 18px;
    }


    /* -----------------------------------------------------
       CTA
    ----------------------------------------------------- */

    .products-cta,
    .product-detail-cta,
    .legal-cta {
        padding: 50px 0;
    }

    .products-cta-card,
    .product-detail-cta-card,
    .legal-cta-card {
        padding: 25px 20px;
        border-radius: 18px;
    }


    /* -----------------------------------------------------
       FOOTER
    ----------------------------------------------------- */

    .footer-grid {
        grid-template-columns: 1fr;
    }

    .footer-brand {
        grid-column: auto;
    }

}


/* =========================================================
   7. SMALL MOBILE
========================================================= */

@media (max-width: 480px) {


    /* -----------------------------------------------------
       HEADER
    ----------------------------------------------------- */

    .container {
        width: calc(100% - 20px);
    }

    .header-inner {
        min-height: 58px;
    }


    /* -----------------------------------------------------
       BREADCRUMB
    ----------------------------------------------------- */

    .breadcrumb ol {
        max-width: 100%;
        overflow: hidden;
        white-space: nowrap;
    }

    .breadcrumb li:last-child {
        overflow: hidden;
        text-overflow: ellipsis;
    }


    /* -----------------------------------------------------
       HERO
    ----------------------------------------------------- */

    .hero {
        min-height: 500px;
    }

    .hero-title {
        font-size: 35px;
    }

    .hero-description {
        font-size: 14px;
    }


    /* -----------------------------------------------------
       PRODUCTS
    ----------------------------------------------------- */

    .products-hero {
        padding: 50px 0 42px;
    }

    .products-hero h1 {
        font-size: 35px;
    }

    .products-hero p {
        font-size: 14px;
        line-height: 1.7;
    }

    .products-grid {
        grid-template-columns: 1fr;
        gap: 16px;
    }

    .product-card {
        display: grid;
        grid-template-columns: 130px minmax(0, 1fr);
        border-radius: 16px;
    }

    .product-image {
        aspect-ratio: auto;
        min-height: 100%;
    }

    .product-info {
        display: flex;
        flex-direction: column;
        justify-content: center;
        padding: 15px;
    }

    .product-info h3 {
        font-size: 17px;
    }

    .product-actions {
        grid-template-columns: 1fr 1fr;
    }

    .product-actions .btn {
        min-height: 38px;
        font-size: 10px;
    }


    /* -----------------------------------------------------
       PRODUCT DETAIL
    ----------------------------------------------------- */

    .product-detail-info h1 {
        font-size: 32px;
    }

    .product-detail-price {
        font-size: 23px;
    }

    .product-detail-actions {
        gap: 8px;
    }

    .product-detail-actions .btn {
        min-height: 50px;
    }


    /* -----------------------------------------------------
       LEGAL
    ----------------------------------------------------- */

    .legal-hero h1 {
        font-size: 34px;
    }

    .legal-article {
        padding: 22px 16px;
    }

    .legal-section h2 {
        font-size: 21px;
    }

    .legal-section p,
    .legal-section li {
        font-size: 13px;
    }


    /* -----------------------------------------------------
       CART
    ----------------------------------------------------- */

    .cart-item {
        grid-template-columns: 60px minmax(0, 1fr);
    }

    .cart-item-image {
        width: 60px;
        height: 60px;
    }

}


/* =========================================================
   8. EXTRA SMALL DEVICES
========================================================= */

@media (max-width: 360px) {

    .container {
        width: calc(100% - 16px);
    }

    .hero-title {
        font-size: 32px;
    }

    .products-hero h1 {
        font-size: 31px;
    }

    .product-detail-info h1 {
        font-size: 29px;
    }

    .product-card {
        grid-template-columns: 110px minmax(0, 1fr);
    }

    .product-info {
        padding: 12px;
    }

    .product-info h3 {
        font-size: 15px;
    }

    .product-price {
        font-size: 14px;
    }

    .product-actions {
        grid-template-columns: 1fr;
    }

    .product-actions .btn {
        min-height: 36px;
    }

    .legal-article {
        padding: 18px 14px;
    }

}


/* =========================================================
   9. LANDSCAPE MOBILE
========================================================= */

@media (max-height: 500px) and (orientation: landscape) {

    .hero {
        min-height: 480px;
        padding: 50px 0;
    }

    .hero-title {
        font-size: 40px;
    }

}


/* =========================================================
   10. TOUCH DEVICES
========================================================= */

@media (hover: none) and (pointer: coarse) {

    .product-card:hover {
        transform: none;
        box-shadow: none;
    }

    .product-card:hover .product-image img {
        transform: none;
    }

    .btn:hover {
        transform: none;
    }

    .products-cta-card:hover,
    .product-detail-cta-card:hover,
    .legal-cta-card:hover {
        transform: none;
        box-shadow: none;
    }

}


/* =========================================================
   11. REDUCED MOTION
========================================================= */

@media (prefers-reduced-motion: reduce) {

    *,
    *::before,
    *::after {
        scroll-behavior: auto !important;
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .01ms !important;
    }

}