/* ==========================
   ZAREEI STUDIO
========================== */

/* Variables */
@import "variables.css";

/* Base */
@import "base/reset.css";
@import "base/typography.css";
@import "base/utilities.css";

/* Layout */
@import "layout/container.css";
@import "layout/footer.css";

/* Components */
@import "components/button.css";
@import "components/hero.css";
@import "components/home-collections.css";
@import "components/home-edit.css";
@import "components/home-trust.css";
@import "components/home-bespoke.css";
@import "components/home-projects.css";
@import "components/home-final-cta.css";

/* Pages */
@import "pages/home.css";

@import url("pages/product-detail.css");

@import url("pages/services.css");


@import url("pages/why.css");


@import url("pages/products.css");





/* =========================================================
   ZAREEI STUDIO
   FINAL RESPONSIVE + RTL UX LAYER
   ========================================================= */

/* ---------- Global safety ---------- */

html,
body {
    max-width: 100%;
    overflow-x: hidden;
}

* {
    min-width: 0;
}

.container {
    width: min(100% - 32px, var(--container));
    margin-left: auto;
    margin-right: auto;
}

img,
video,
iframe {
    max-width: 100%;
}

table {
    max-width: 100%;
}

/* ---------- Links ---------- */

a {
    transition:
        color var(--transition-fast),
        opacity var(--transition-fast);
}

/* ---------- Forms ---------- */

input,
select,
textarea,
button {
    max-width: 100%;
}

textarea {
    overflow: auto;
}

/* ---------- Responsive typography ---------- */

@media (max-width: 1100px) {
    .container {
        width: min(100% - 28px, var(--container));
    }

    h1 {
        font-size: clamp(32px, 5vw, 48px);
    }

    h2 {
        font-size: clamp(27px, 4vw, 38px);
    }
}

/* ---------- Tablet ---------- */

@media (max-width: 900px) {

    .container {
        width: min(100% - 24px, var(--container));
    }

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

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

    .cart-summary,
    .checkout-summary {
        position: static;
    }

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

    .product-gallery {
        max-width: 760px;
        margin-left: auto;
        margin-right: auto;
    }
}

/* ---------- Mobile ---------- */

@media (max-width: 768px) {

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

    body {
        font-size: 15px;
    }

    h1 {
        font-size: clamp(29px, 8vw, 38px);
    }

    h2 {
        font-size: clamp(25px, 7vw, 32px);
    }

    h3 {
        font-size: 21px;
    }

    /* Prevent large desktop gaps */

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

    /* Product grid */

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

    /* Product card */

    .product-card-content,
    .product-card-info,
    .product-card-body {
        padding: 13px;
    }

    .product-card .product-category,
    .product-card-category {
        font-size: 10px;
    }

    .product-card h2,
    .product-card h3,
    .product-card-title {
        font-size: 15px;
    }

    .product-card-description,
    .product-card .short-description {
        font-size: 12px;
    }

    .product-card .product-price,
    .product-card-price {
        font-size: 16px;
    }

    /* Product detail */

    .product-detail-info {
        width: 100%;
    }

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

    .product-detail-info .short-description {
        font-size: 14px;
    }

    /* Gallery */

    .product-gallery-thumbnails {
        overflow-x: auto;
        padding-bottom: 4px;
        scrollbar-width: thin;
    }

    .product-gallery-thumb {
        flex: 0 0 auto;
    }

    /* Specifications */

    .product-specifications .spec-row {
        grid-template-columns: 1fr;
    }

    /* Commerce */

    .cart-layout,
    .checkout-grid {
        gap: 18px;
    }

    .cart-summary,
    .checkout-summary {
        width: 100%;
    }

    /* Buttons */

    .product-actions,
    .order-actions {
        width: 100%;
    }

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

    /* Success */

    .order-success-page {
        align-items: flex-start;
    }
}

/* ---------- Small mobile ---------- */

@media (max-width: 520px) {

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

    .products-grid {
        gap: 10px;
    }

    .product-card {
        border-radius: var(--radius-md);
    }

    .product-card-content,
    .product-card-info,
    .product-card-body {
        padding: 11px;
    }

    .product-card h2,
    .product-card h3,
    .product-card-title {
        font-size: 14px;
    }

    .product-card-description,
    .product-card .short-description {
        -webkit-line-clamp: 2;
        font-size: 11px;
    }

    .product-card .product-price,
    .product-card-price {
        font-size: 15px;
    }

    .product-card .like-button,
    .product-card .product-like,
    .product-card .like-btn {
        width: 34px;
        height: 34px;
        top: 8px;
        right: 8px;
    }

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

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

    .product-specifications .spec-row {
        padding: 11px 13px;
    }

    .cart-item,
    .checkout-card,
    .checkout-summary {
        border-radius: var(--radius-md);
    }
}

/* ---------- Very small screens ---------- */

@media (max-width: 380px) {

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

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

    .product-card h2,
    .product-card h3,
    .product-card-title {
        font-size: 16px;
    }

    .product-card-description,
    .product-card .short-description {
        font-size: 12px;
    }

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

/* =========================================================
   RTL SUPPORT
   ========================================================= */

html[dir="rtl"] body {
    text-align: right;
}

html[dir="rtl"] ul,
html[dir="rtl"] ol {
    padding-left: 0;
    padding-right: 1.25rem;
}
/* Product */

html[dir="rtl"] .product-card {
    text-align: right;
}

html[dir="rtl"] .product-card .product-price,
html[dir="rtl"] .product-card-price {
    text-align: right;
}

html[dir="rtl"] .product-detail-info {
    text-align: right;
}

html[dir="rtl"] .product-actions {
    direction: rtl;
}

html[dir="rtl"] .product-gallery-thumbnails {
    direction: rtl;
}

/* Commerce */

html[dir="rtl"] .cart-item,
html[dir="rtl"] .cart-summary,
html[dir="rtl"] .checkout-card,
html[dir="rtl"] .checkout-summary {
    text-align: right;
}

html[dir="rtl"] .cart-item-quantity input {
    direction: ltr;
}

html[dir="rtl"] .checkout-cost-row,
html[dir="rtl"] .cost-row,
html[dir="rtl"] .summary-row {
    direction: rtl;
}

/* Numeric / monetary data remains LTR */

html[dir="rtl"] .product-price,
html[dir="rtl"] .product-card-price,
html[dir="rtl"] .cart-item-price,
html[dir="rtl"] .cart-item-total,
html[dir="rtl"] .checkout-cost-row > :last-child,
html[dir="rtl"] .cost-row > :last-child,
html[dir="rtl"] .summary-row > :last-child {
    direction: ltr;
    unicode-bidi: plaintext;
}

/* Forms */

html[dir="rtl"] input,
html[dir="rtl"] textarea,
html[dir="rtl"] select {
    text-align: right;
}

html[dir="rtl"] input[type="email"],
html[dir="rtl"] input[type="tel"],
html[dir="rtl"] input[type="url"],
html[dir="rtl"] input[type="number"] {
    direction: ltr;
    text-align: left;
}

/* =========================================================
   TOUCH / ACCESSIBILITY
   ========================================================= */

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

    .main-nav a,
    .header-actions a,
    .header-actions button,
    .btn,
    .product-card .like-button,
    .product-card .product-like,
    .product-card .like-btn {
        min-height: 42px;
    }

    .product-card:hover,
    .card:hover {
        transform: none;
    }
}

/* =========================================================
   REDUCED MOTION
   ========================================================= */

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

    html {
        scroll-behavior: auto;
    }

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