/* =========================================================
   HEM CERAMICS
   Responsive Styles
========================================================= */
/* =========================================================
   LARGE TABLET / SMALL DESKTOP
========================================================= */
@media (max-width: 1199.98px) {
    .main-navbar .nav-link {
        padding-left: 11px !important;
        padding-right: 11px !important;
    }
    .nav-cta-item {
        margin-left: 7px;
    }
    .header-cta {
        padding-left: 17px;
        padding-right: 17px;
    }
}
/* =========================================================
   TABLET
========================================================= */
@media (max-width: 991.98px) {
    /* -----------------------------------------
       Topbar
    ----------------------------------------- */
    .header-topbar {
        display: none;
    }
    /* -----------------------------------------
       Navbar
    ----------------------------------------- */
    .main-navbar {
        min-height: 78px;
        padding: 9px 0;
    }
    .site-logo {
        height: 56px;
    }
    .navbar-collapse {
        margin-top: 12px;
        padding: 12px 0 18px;
        border-top: 1px solid var(--hem-border);
    }
    .main-navbar .navbar-nav {
        align-items: stretch !important;
        gap: 0;
    }
    .main-navbar .nav-link {
        padding: 12px 5px !important;
    }
    .main-navbar .nav-link::before {
        display: none;
    }
    /* -----------------------------------------
       Dropdown
    ----------------------------------------- */
    .main-navbar .dropdown-menu {
        min-width: 100%;
        margin-top: 0;
        padding: 5px;
        border: 0;
        border-radius: 5px;
        box-shadow: none;
        background-color: var(--hem-light);
    }
    .main-navbar .dropdown-item {
        padding: 10px 12px;
    }
    .main-navbar .dropdown-item i {
        opacity: 1;
        transform: none;
    }
    /* -----------------------------------------
       CTA
    ----------------------------------------- */
    .nav-cta-item {
        margin-top: 12px;
        margin-left: 0;
    }
    .header-cta {
        width: fit-content;
        min-height: 46px;
    }
    /* -----------------------------------------
       Footer
    ----------------------------------------- */
    .footer-bottom {
        flex-direction: column;
        align-items: flex-start;
    }
    /* =====================================================
       HERO - TABLET
    ===================================================== */
    .hero-section {
        min-height: calc(100vh - 78px);
    }
    .hero-container {
        padding-top: 90px;
        padding-bottom: 125px;
    }
    .hero-title {
        font-size: clamp(48px, 8vw, 72px);
        letter-spacing: -2px;
    }
    .hero-description {
        max-width: 580px;
        font-size: 15px;
    }
    /* =====================================================
       ABOUT - TABLET
    ===================================================== */
    .about-section {
        padding: 90px 0;
    }
    .about-image-main {
        height: 500px;
    }
    .about-content {
        padding-left: 0;
    }
    .about-experience {
        left: -10px;
        bottom: 60px;
    }
    .section-title {
        font-size: clamp(38px, 5vw, 52px);
    }
    /* =====================================================
       COLLECTIONS - TABLET
    ===================================================== */
    .collections-section {
        padding: 90px 0;
    }
    .collections-header {
        align-items: flex-start;
        flex-direction: column;
        gap: 25px;
        margin-bottom: 40px;
    }
    .collections-header-text {
        max-width: 600px;
        padding-bottom: 0;
    }
    .collection-card {
        height: 420px;
    }
    .collection-content {
        padding: 25px;
    }
    /* =====================================================
       FEATURED PRODUCTS - TABLET
    ===================================================== */
    .featured-products-section {
        padding: 90px 0;
    }
    .featured-products-header {
        align-items: flex-start;
        flex-direction: column;
        gap: 20px;
        margin-bottom: 40px;
    }
    .featured-products-view-all {
        margin-bottom: 0;
    }
    .product-card-image {
        height: 360px;
    }
    /* =====================================================
       WHY HEM - TABLET
    ===================================================== */
    .why-hem-section {
        padding: 90px 0;
    }
    .why-hem-header {
        align-items: flex-start;
        flex-direction: column;
        gap: 25px;
        margin-bottom: 40px;
    }
    .why-hem-intro {
        max-width: 600px;
    }
    .why-hem-visual {
        min-height: 500px;
    }
    .why-hem-feature {
        left: 35px;
        bottom: 35px;
    }
    .why-hem-features {
        grid-template-columns:
        repeat(2, minmax(0, 1fr));
    }
    .why-hem-item {
        min-height: 200px;
    }
    /* =====================================================
       GLOBAL EXPORT - TABLET
    ===================================================== */
    .global-export-section {
        padding: 90px 0;
    }
    .global-export-wrapper {
        grid-template-columns: 1fr;
    }
    .global-export-content {
        padding: 60px;
    }
    .global-export-visual {
        min-height: 520px;
    }
    /* =====================================================
       QUALITY - TABLET
    ===================================================== */
    .quality-section {
        padding: 90px 0;
    }
    .quality-header {
        align-items: flex-start;
        flex-direction: column;
        gap: 22px;
        margin-bottom: 40px;
    }
    .quality-header-text {
        max-width: 600px;
    }
    .quality-features {
        grid-template-columns:
        repeat(2, minmax(0, 1fr));
    }
    .quality-feature {
        min-height: 240px;
    }
    .quality-feature h3 {
        margin-top: 55px;
    }
    .quality-bottom {
        grid-template-columns: 1fr;
    }
    .quality-bottom-image {
        min-height: 480px;
    }
    .quality-bottom-content {
        padding: 55px;
    }

    /* =====================================================
       ABOUT PAGE - TABLET
    ===================================================== */

    .inner-page-hero {

        min-height: 450px;
    }


    .inner-page-hero-content {

        padding: 70px 0;
    }


    .about-page-intro {

        padding: 90px 0;
    }


    .about-page-content {

        padding-left: 0;
    }


    .about-page-image img {

        height: 520px;
    }


    .about-page-experience {

        left: -10px;
    }


    .about-journey-section {

        padding: 90px 0;
    }


    .about-journey-header {

        align-items: flex-start;

        flex-direction: column;

        gap: 20px;

        margin-bottom: 45px;
    }


    .about-journey-line {

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


    .journey-item {

        min-height: 240px;
    }


    .journey-item:nth-child(3) {

        border-left: 1px solid var(--hem-border);
    }


    .vision-mission-section {

        padding: 90px 0;
    }


    .vision-mission-card {

        min-height: 450px;

        padding: 45px;
    }


    .about-page-cta {

        padding-bottom: 90px;
    }


    .about-page-cta-inner {

        align-items: flex-start;

        flex-direction: column;

        padding: 50px;
    }
    /* =====================================================
       CONTACT PAGE - TABLET
    ===================================================== */

    .contact-main-section {

        padding: 90px 0;
    }


    .contact-info-wrapper {

        padding-right: 0;
    }


    .contact-form-wrapper {

        padding: 40px;
    }


    .contact-location-section {

        padding-bottom: 90px;
    }


    .contact-location-header {

        align-items: flex-start;

        flex-direction: column;

        gap: 20px;

        margin-bottom: 35px;
    }


    .contact-map-wrapper {

        height: 450px;
    }


    .contact-cta-section {

        padding-bottom: 90px;
    }


    .contact-cta-inner {

        align-items: flex-start;

        flex-direction: column;

        padding: 50px;
    }
    /* =====================================================
       PRODUCTS PAGE - TABLET
    ===================================================== */

    .products-page-hero {

        min-height: 450px;
    }


    .products-page-hero-content {

        padding: 70px 0;
    }


    .products-listing-section {

        padding: 90px 0;
    }


    .products-grid {

        grid-template-columns:
            repeat(2, minmax(0, 1fr));

        gap: 20px;
    }


    .products-listing-header {

        align-items: flex-start;

        flex-direction: column;

        gap: 20px;

        margin-bottom: 35px;
    }


    .products-filter {

        margin-bottom: 35px;
    }


    .products-page-cta {

        padding-bottom: 90px;
    }


    .products-page-cta-inner {

        align-items: flex-start;

        flex-direction: column;

        padding: 50px;
    }
    /* =====================================================
       CATEGORY PAGE - TABLET
    ===================================================== */

    .category-hero-grid {

        grid-template-columns: 1fr;

    }


    .category-hero-content {

        min-height: 450px;

        padding: 70px 0;
    }


    .category-hero-image {

        min-height: 500px;
    }


    .category-products-section {

        padding: 90px 0;
    }


    .category-products-header {

        align-items: flex-start;

        flex-direction: column;

        gap: 20px;

        margin-bottom: 40px;
    }


    .category-products-grid {

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


    .related-categories-section {

        padding-bottom: 90px;
    }


    .related-categories-grid {

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


    .related-categories-header {

        align-items: flex-start;

        flex-direction: column;

        gap: 20px;
    }
    /* =====================================================
       PRODUCT DETAIL - TABLET
    ===================================================== */

    .product-detail-section {

        padding: 90px 0;
    }


    .product-detail-grid {

        grid-template-columns: 1fr;

        gap: 55px;
    }


    .product-detail-image-wrapper {

        max-width: 700px;

        margin: 0 auto;

        width: 100%;
    }


    .product-detail-content {

        max-width: 750px;

        margin: 0 auto;

        width: 100%;
    }


    .product-information-section {

        padding: 90px 0;
    }


    .product-information-grid {

        grid-template-columns: 1fr;

        gap: 60px;
    }


    .product-detail-cta {

        padding-bottom: 90px;
    }


    .product-detail-cta-inner {

        align-items: flex-start;

        flex-direction: column;

        padding: 50px;
    }
}
/* =========================================================
   MOBILE
========================================================= */
@media (max-width: 575.98px) {
    /* -----------------------------------------
       Navbar
    ----------------------------------------- */
    .site-header.is-scrolled .main-navbar {
        min-height: 62px;
        padding-top: 5px;
        padding-bottom: 5px;
    }
    .site-header.is-scrolled .site-logo {
        height: 45px;
    }
    .navbar-toggler {
        width: 42px;
        height: 40px;
    }
    /* -----------------------------------------
       Temporary Home
    ----------------------------------------- */
    .temp-home-section {
        min-height: 55vh;
        padding: 70px 18px;
    }
    .temp-home-title {
        font-size: clamp(38px, 11vw, 58px);
    }
    /* -----------------------------------------
       Footer
    ----------------------------------------- */
    .site-footer {
        padding-top: 60px;
    }
    .footer-bottom {
        gap: 5px;
    }
    /* =====================================================
       HERO - MOBILE
    ===================================================== */
    .hero-section {
        min-height: calc(100svh - 70px);
        align-items: flex-end;
    }
    .hero-video {
        object-position: center;
    }
    /* Stronger mobile overlay */
    .hero-overlay {
        background:
        linear-gradient(
            180deg,
            rgba(15, 15, 14, 0.30) 0%,
            rgba(15, 15, 14, 0.72) 55%,
            rgba(15, 15, 14, 0.90) 100%
        );
    }
    .hero-container {
        width: 100%;
        padding-top: 80px;
        padding-bottom: 125px;
    }
    .hero-content {
        max-width: 100%;
    }
    .hero-eyebrow {
        margin-bottom: 18px;
        font-size: 10px;
        letter-spacing: 2.2px;
    }
    .hero-eyebrow-line {
        width: 28px;
    }
    .hero-title {
        font-size: clamp(42px, 12vw, 58px);
        line-height: 1.04;
        letter-spacing: -1.8px;
    }
    .hero-description {
        margin-top: 20px;
        font-size: 14px;
        line-height: 1.7;
    }
    .hero-actions {
        margin-top: 26px;
        gap: 9px;
    }
    .hero-btn {
        min-height: 48px;
        padding: 0 17px;
        font-size: 11px;
    }
    .hero-bottom-inner {
        min-height: 65px;
    }
    .hero-bottom-label {
        display: none;
    }
    .hero-scroll span {
        display: none;
    }
    .hero-scroll i {
        font-size: 17px;
    }
    /* =====================================================
       ABOUT - MOBILE
    ===================================================== */
    .about-section {
        padding: 70px 0;
    }
    .about-image-wrapper {
        padding-right: 18px;
        padding-bottom: 22px;
    }
    .about-image-main {
        height: 430px;
    }
    .about-experience {
        left: 0;
        bottom: 35px;
        min-width: 155px;
        padding: 16px 18px;
    }
    .about-experience-number {
        font-size: 32px;
    }
    .about-experience-text {
        font-size: 9px;
    }
    .about-content {
        padding-left: 0;
        margin-top: 15px;
    }
    .section-eyebrow {
        margin-bottom: 16px;
        font-size: 10px;
    }
    .section-title {
        font-size: clamp(36px, 10vw, 48px);
        letter-spacing: -1.5px;
    }
    .about-lead {
        margin-top: 20px;
        font-size: 15px;
    }
    .about-text {
        font-size: 13px;
    }
    .about-highlights {
        grid-template-columns: 1fr;
        gap: 18px;
    }
    /* =====================================================
       COLLECTIONS - MOBILE
    ===================================================== */
    .collections-section {
        padding: 70px 0;
    }
    .collections-header {
        gap: 20px;
        margin-bottom: 30px;
    }
    .collections-header-text p {
        font-size: 14px;
    }
    .collections-view-all {
        margin-top: 18px;
        font-size: 13px;
    }
    .collection-card {
        height: 390px;
    }
    .collection-content {
        gap: 13px;
        padding: 22px;
    }
    .collection-number {
        font-size: 12px;
    }
    .collection-content h3 {
        font-size: 30px;
        letter-spacing: -0.8px;
    }
    .collection-link {
        margin-top: 13px;
        font-size: 11px;
    }
    /* =====================================================
       FEATURED PRODUCTS - MOBILE
    ===================================================== */
    .featured-products-section {
        padding: 70px 0;
    }
    .featured-products-header {
        margin-bottom: 30px;
    }
    .product-card-image {
        height: 350px;
    }
    .product-card-content {
        min-height: 100px;
        padding: 18px;
    }
    .product-card-content h3 {
        font-size: 19px;
    }
    .product-card-arrow {
        width: 40px;
        height: 40px;
        top: 14px;
        right: 14px;
        opacity: 1;
        transform: none;
    }
    .product-card-link {
        font-size: 10px;
    }
    /* =====================================================
       WHY HEM - MOBILE
    ===================================================== */
    .why-hem-section {
        padding: 70px 0;
    }
    .why-hem-header {
        gap: 18px;
        margin-bottom: 30px;
    }
    .why-hem-title {
        font-size: clamp(38px, 10vw, 50px);
        letter-spacing: -1.5px;
    }
    .why-hem-intro {
        font-size: 14px;
    }
    .why-hem-visual {
        min-height: 500px;
    }
    .why-hem-overlay {
        background:
        linear-gradient(
            180deg,
            rgba(15, 15, 14, 0.15) 0%,
            rgba(15, 15, 14, 0.82) 75%,
            rgba(15, 15, 14, 0.95) 100%
        );
    }
    .why-hem-feature {
        left: 22px;
        right: 22px;
        bottom: 65px;
        gap: 14px;
    }
    .why-hem-feature h3 {
        font-size: clamp(31px, 9vw, 43px);
        letter-spacing: -1px;
    }
    .why-hem-feature-small {
        font-size: 10px;
    }
    .why-hem-image-label {
        right: 22px;
        bottom: 22px;
        font-size: 9px;
    }
    .why-hem-features {
        grid-template-columns: 1fr;
    }
    .why-hem-item {
        min-height: 180px;
        padding: 24px;
    }
    .why-hem-item h4 {
        margin-top: 20px;
        font-size: 15px;
    }
    .why-hem-item p {
        font-size: 13px;
    }
    /* =====================================================
       GLOBAL EXPORT - MOBILE
    ===================================================== */
    .global-export-section {
        padding: 70px 0;
    }
    .global-export-content {
        padding: 45px 22px;
    }
    .global-export-title {
        font-size: clamp(40px, 11vw, 52px);
        letter-spacing: -1.5px;
    }
    .global-export-description {
        margin-top: 22px;
        font-size: 14px;
    }
    .export-points {
        grid-template-columns: 1fr;
        gap: 22px;
        margin-top: 28px;
    }
    .export-btn {
        margin-top: 30px;
        font-size: 12px;
    }
    .global-export-visual {
        min-height: 430px;
    }
    .global-export-badge {
        left: 20px;
        bottom: 20px;
        padding: 13px 15px;
    }
    .global-export-label {
        top: 20px;
        right: 20px;
        font-size: 8px;
    }
    /* =====================================================
       QUALITY - MOBILE
    ===================================================== */
    .quality-section {
        padding: 70px 0;
    }
    .quality-header {
        gap: 18px;
        margin-bottom: 30px;
    }
    .quality-header-text {
        font-size: 14px;
    }
    .quality-features {
        grid-template-columns: 1fr;
    }
    .quality-feature {
        min-height: 220px;
        padding: 24px;
    }
    .quality-feature h3 {
        margin-top: 45px;
        font-size: 20px;
    }
    .quality-feature p {
        font-size: 13px;
    }
    .quality-bottom {
        margin-top: 45px;
    }
    .quality-bottom-image {
        min-height: 350px;
    }
    .quality-bottom-content {
        padding: 42px 22px;
    }
    .quality-bottom-content h3 {
        font-size: clamp(34px, 10vw, 46px);
    }
    .quality-bottom-content p {
        margin-top: 20px;
        font-size: 13px;
    }
    .quality-btn {
        margin-top: 25px;
        font-size: 12px;
    }
    .main-navbar.is-scrolled {
        min-height: 62px;
        padding-top: 5px;
        padding-bottom: 5px;
    }
    .main-navbar.is-scrolled .site-logo {
        height: 45px;
    }
    .back-to-top {
        right: 18px;
        bottom: 18px;
        width: 44px;
        height: 44px;
    }
    .back-to-top i {
        font-size: 15px;
    }
    .floating-contact {
        left: 18px;
        bottom: 18px;
    }
    .floating-contact-main {
        width: 50px;
        height: 50px;
    }
    .floating-contact-main-icon {
        font-size: 18px;
    }
    .floating-contact-item {
        width: 42px;
        height: 42px;
    }
    .floating-contact-icon {
        font-size: 15px;
    }
    .floating-contact-tooltip {
        display: none;
    }
    /* =====================================================
       ABOUT PAGE - MOBILE
    ===================================================== */

    .inner-page-hero {

        min-height: 430px;
    }


    .inner-page-hero-content {

        padding: 65px 0;
    }


    .inner-page-hero h1 {

        font-size: clamp(42px, 11vw, 55px);

        letter-spacing: -1.8px;
    }


    .inner-page-hero p {

        margin-top: 20px;

        font-size: 14px;
    }


    .inner-page-breadcrumb {

        margin-top: 28px;
    }


    .about-page-intro {

        padding: 70px 0;
    }


    .about-page-image {

        padding-right: 18px;

        padding-bottom: 22px;
    }


    .about-page-image img {

        height: 430px;
    }


    .about-page-experience {

        left: 0;

        bottom: 35px;

        padding: 16px 18px;
    }


    .about-page-experience strong {

        font-size: 32px;
    }


    .about-page-experience span {

        font-size: 9px;
    }


    .about-page-content {

        padding-left: 0;

        margin-top: 15px;
    }


    .about-page-lead {

        margin-top: 20px;

        font-size: 15px;
    }


    .about-page-content > p:not(.about-page-lead) {

        font-size: 14px;
    }


    .about-journey-section {

        padding: 70px 0;
    }


    .about-journey-header {

        margin-bottom: 35px;
    }


    .about-journey-header > p {

        font-size: 14px;
    }


    .about-journey-line {

        grid-template-columns: 1fr;
    }


    .journey-item,
    .journey-item:nth-child(3) {

        min-height: 210px;

        border-left: 1px solid var(--hem-border);
    }


    .journey-label {

        margin-top: 45px;

        font-size: 17px;
    }


    .vision-mission-section {

        padding: 70px 0;
    }


    .vision-mission-card {

        min-height: 430px;

        padding: 35px 22px;
    }


    .vision-icon {

        margin-top: 40px;
    }


    .vision-mission-card h2 {

        font-size: clamp(34px, 9vw, 45px);
    }


    .vision-mission-card p {

        font-size: 13px;
    }


    .about-page-cta {

        padding-bottom: 70px;
    }


    .about-page-cta-inner {

        padding: 40px 22px;
    }


    .about-page-cta h2 {

        font-size: clamp(34px, 9vw, 45px);
    }


    .about-cta-btn {

        width: 100%;

        justify-content: center;
    }
    /* =====================================================
       CONTACT PAGE - MOBILE
    ===================================================== */

    .contact-main-section {

        padding: 70px 0;
    }


    .contact-intro {

        margin-top: 20px;

        font-size: 14px;
    }


    .contact-info-item {

        padding: 19px 35px 19px 0;
    }


    .contact-info-content span {

        font-size: 12px;
    }


    .contact-form-wrapper {

        padding: 30px 20px;
    }


    .contact-form-header {

        margin-bottom: 28px;
    }


    .contact-form-header h3 {

        font-size: clamp(32px, 9vw, 44px);
    }


    .contact-form-header p {

        font-size: 13px;
    }


    .contact-form-group input,
    .contact-form-group select {

        height: 50px;
    }


    .contact-submit-btn {

        width: 100%;
    }


    .contact-location-section {

        padding-bottom: 70px;
    }


    .contact-location-header {

        margin-bottom: 30px;
    }


    .contact-location-header > p {

        font-size: 14px;
    }


    .contact-map-wrapper {

        height: 350px;
    }


    .contact-cta-section {

        padding-bottom: 70px;
    }


    .contact-cta-inner {

        padding: 40px 22px;
    }


    .contact-cta-inner h2 {

        font-size: clamp(32px, 9vw, 44px);
    }


    .contact-cta-btn {

        width: 100%;

        justify-content: center;
    }
    /* =====================================================
       PRODUCTS PAGE - MOBILE
    ===================================================== */

    .products-page-hero {

        min-height: 430px;
    }


    .products-page-hero-content {

        padding: 65px 0;
    }


    .products-page-hero h1 {

        font-size: clamp(42px, 11vw, 55px);

        letter-spacing: -1.8px;
    }


    .products-page-hero p {

        margin-top: 20px;

        font-size: 14px;
    }


    .products-listing-section {

        padding: 70px 0;
    }


    .products-listing-header {

        margin-bottom: 28px;
    }


    .products-count {

        padding-bottom: 5px;
    }


    .products-count strong {

        font-size: 25px;
    }


    .products-filter {

        gap: 6px;

        margin-bottom: 30px;

        padding-bottom: 12px;
    }


    .product-filter-btn {

        padding: 10px 14px;

        font-size: 10px;
    }


    .products-grid {

        grid-template-columns:
            repeat(1, minmax(0, 1fr));

        gap: 10px;
    }


    .product-card:hover {

        transform: none;

        box-shadow: none;
    }


    .product-card-image {

        aspect-ratio: 1 / 1;
    }


    .product-card-view {

        right: 8px;

        bottom: 8px;

        width: 34px;

        height: 34px;

        opacity: 1;

        visibility: visible;

        transform: none;
    }


    .product-card-content {

        padding: 15px 12px 14px;
    }


    .product-card-category {

        margin-bottom: 6px;

        font-size: 8px;

        letter-spacing: 1px;
    }


    .product-card-content h3 {

        font-size: 14px;
    }


    .product-card-link {

        margin-top: 13px;

        font-size: 10px;
    }


    .products-page-cta {

        padding-bottom: 70px;
    }


    .products-page-cta-inner {

        padding: 40px 22px;
    }


    .products-page-cta-inner h2 {

        font-size: clamp(32px, 9vw, 44px);
    }


    .products-cta-btn {

        width: 100%;

        justify-content: center;
    }
    /* =====================================================
       CATEGORY PAGE - MOBILE
    ===================================================== */

    .category-hero-content {

        min-height: 420px;

        padding: 60px 0;
    }


    .category-hero-content h1 {

        font-size: clamp(42px, 11vw, 55px);

        letter-spacing: -1.8px;
    }


    .category-hero-content p {

        margin-top: 20px;

        font-size: 14px;
    }


    .category-hero-image {

        min-height: 400px;
    }


    .category-products-section {

        padding: 70px 0;
    }


    .category-products-header {

        margin-bottom: 30px;
    }


    .category-products-grid {

        grid-template-columns:
            repeat(1, minmax(0, 1fr));

        gap: 10px;
    }


    .related-categories-section {

        padding-bottom: 70px;
    }


    .related-categories-grid {

        grid-template-columns: 1fr;

        gap: 12px;
    }


    .related-category-image {

        aspect-ratio: 1.4 / 1;
    }


    .related-category-content {

        padding: 20px;
    }


    .related-category-content h3 {

        font-size: 20px;
    }


    .related-category-content > i {

        top: 15px;

        right: 15px;

        width: 36px;

        height: 36px;
    }
    /* =====================================================
       PRODUCT DETAIL - MOBILE
    ===================================================== */

    .product-detail-section {

        padding: 60px 0;
    }


    .product-detail-grid {

        gap: 40px;
    }


    .product-detail-image-wrapper {

        padding: 15px;
    }


    .product-detail-image-wrapper::before,
    .product-detail-image-wrapper::after {

        width: 55px;

        height: 55px;
    }


    .product-detail-breadcrumb {

        margin-bottom: 22px;

        font-size: 9px;
    }


    .product-detail-content h1 {

        font-size: clamp(40px, 11vw, 55px);

        letter-spacing: -1.8px;
    }


    .product-detail-short {

        margin-top: 20px;

        font-size: 14px;
    }


    .product-detail-actions {

        flex-direction: column;

        margin-top: 28px;
    }


    .product-whatsapp-btn,
    .product-enquiry-btn {

        width: 100%;
    }


    .product-quick-info {

        margin-top: 30px;
    }


    .product-quick-info > div {

        padding: 16px 10px 16px 0;
    }


    .product-quick-info > div + div {

        padding-left: 10px;
    }


    .product-quick-info strong {

        font-size: 11px;
    }


    .product-information-section {

        padding: 70px 0;
    }


    .product-description > p {

        margin-top: 20px;

        font-size: 14px;
    }


    .product-features {

        grid-template-columns: 1fr;

        margin-top: 25px;
    }


    .product-specifications {

        padding: 25px 18px;
    }


    .specifications-table {

        margin-top: 22px;
    }


    .specification-row {

        padding: 15px 0;
    }


    .product-detail-cta {

        padding-bottom: 70px;
    }


    .product-detail-cta-inner {

        padding: 40px 22px;
    }


    .product-detail-cta-inner h2 {

        font-size: clamp(32px, 9vw, 44px);
    }


    .product-detail-cta-btn {

        width: 100%;

        justify-content: center;
    }
}
/* =====================================================
   CATALOG PAGE - MOBILE
===================================================== */

@media (max-width: 767.98px) {

    .catalog-page {

        padding: 70px 0;
    }


    .catalog-card {

        grid-template-columns: 1fr;
    }


    .catalog-poster img {

        min-height: 400px;

        max-height: 500px;
    }


    .catalog-content {

        padding: 35px 25px;
    }


    .catalog-content h2 {

        font-size: 32px;
    }


    .catalog-btn {

        width: 100%;
    }

}