/* ============================================================
   responsive.css — Colour Roll frontend responsive overrides
   Load order: after style.css and custome.css
   Breakpoints:
     1199px → large tablet / small desktop
      991px → tablet
      767px → large phone / small tablet
      575px → standard phone
      414px → small phone
   ============================================================ */


/* ============================================================
   GLOBAL — Typography scale
   ============================================================ */

@media (max-width: 1199px) {
    h1, .h1 { font-size: 62px; }
    h2, .h2 { font-size: 46px; }
}

@media (max-width: 991px) {
    h1, .h1 { font-size: 48px; }
    h2, .h2 { font-size: 36px; }
}

@media (max-width: 767px) {
    h1, .h1 { font-size: 36px; }
    h2, .h2 { font-size: 28px; }
    h3, .h3 { font-size: 22px; }
    h4, .h4 { font-size: 18px; }
}

@media (max-width: 575px) {
    h1, .h1 { font-size: 30px; }
    h2, .h2 { font-size: 24px; }
    h3, .h3 { font-size: 20px; }
}

@media (max-width: 414px) {
    h1, .h1 { font-size: 26px; }
    h2, .h2 { font-size: 22px; }
}


/* ============================================================
   GLOBAL — Section vertical padding
   ============================================================ */

@media (max-width: 991px) {
    .pad-t110 { padding-top: 70px; }
    .pad-b110 { padding-bottom: 70px; }
}

@media (max-width: 767px) {
    .pad-t110 { padding-top: 50px; }
    .pad-b110 { padding-bottom: 50px; }
}

@media (max-width: 575px) {
    .pad-t110 { padding-top: 40px; }
    .pad-b110 { padding-bottom: 40px; }
}


/* ============================================================
   GLOBAL — Buttons
   ============================================================ */

@media (max-width: 414px) {
    .btn-custom { font-size: 16px; padding: 0 22px; }
}


/* ============================================================
   HEADER
   ============================================================ */

@media (max-width: 991px) {
    .site-header { padding: 16px 0; }
}

@media (max-width: 767px) {
    .site-header { padding: 12px 0; }
    .navbar-brand { max-width: 130px; }
}

@media (max-width: 575px) {
    .navbar-brand { max-width: 115px; }
}


/* ============================================================
   HOME — Hero Banner
   ============================================================ */

/* Compensate for the reduced header height */
@media (max-width: 767px) {
    .hero-bnr { margin-top: 75px; }
}

@media (max-width: 575px) {
    .hero-bnr { margin-top: 65px; }
}

/* Stack CTA buttons vertically on small phones */
@media (max-width: 575px) {
    .hero-bnr .btn-group {
        flex-direction: column;
        align-items: stretch;
        gap: 12px;
        width: 100%;
    }
    .hero-bnr .btn-group .btn-custom {
        width: 100%;
        justify-content: center;
    }
}


/* ============================================================
   HOME — Our Mission
   ============================================================ */

@media (max-width: 991px) {
    /* Ensure image takes full column width without extra right padding */
    .our-mission .col-lg-7 { padding-right: 12px; }
    /* Center image horizontally when stacked */
    .our-mission .col-lg-7 img { display: block; margin: 0 auto; }
}


/* ============================================================
   HOME — How It Works (icon cards)
   ============================================================ */

@media (max-width: 575px) {
    .icon-card { padding: 24px 20px; }
    .step-number { font-size: 36px; right: 20px; top: 10px; }
}


/* ============================================================
   HOME — Product Box (dark section, single product)
   ============================================================ */

/* When the two columns stack on tablet, center the text block */
@media (max-width: 991px) {
    .product-box .col-lg-6 { padding-right: 12px; }
    .product-box .row { text-align: center; }
    /* Keep feature list left-aligned within the centered container */
    .product-box .features { text-align: left; display: inline-block; }
    /* Block-level (not inline) so it always drops to its own line below the feature list,
       instead of sharing a line with it when there's leftover horizontal space. */
    .product-box .btn-custom { display: flex; width: fit-content; margin-left: auto; margin-right: auto; }
    /* Center product title */
    .product-box .pro-title-txt { display: block; }
}

/* Full-width CTA on standard phones */
@media (max-width: 575px) {
    .product-box .row { text-align: left; }
    .product-box .features { display: block; }
    .product-box .btn-custom.orange-btn {
        width: 100%;
        justify-content: center;
    }
}


/* ============================================================
   HOME — More Than Colouring
   ============================================================ */

/* Section heading left-align on very small screens */
@media (max-width: 414px) {
    .more-than-box > .container > .text-center {
        text-align: left !important;
    }
}


/* ============================================================
   HOME — FAQ
   ============================================================ */

/* Center the heading column when it stacks under the accordion */
@media (max-width: 991px) {
    .faq-box .col-lg-4 { text-align: center; }
    .faq-underline-box { margin-left: auto; margin-right: auto; }
}

@media (max-width: 767px) {
    .faq-box .col-lg-4 { text-align: left; }
    .faq-underline-box { margin-left: 0; margin-right: 0; }
}


/* ============================================================
   FOOTER
   ============================================================ */

/* On very small phones the two-column (col-6) footer links can
   feel cramped — stack them to full width */
@media (max-width: 414px) {
    footer .row > .col-6 { flex: 0 0 100%; max-width: 100%; }
    .footer-inner { margin-left: 0; }
}


/* ============================================================
   PAGE HERO (About / Contact / Privacy / Terms shared header)
   ============================================================ */

@media (max-width: 767px) {
    /* margin-top clears the fixed header; keep padding modest so the title
       sits just below the header instead of leaving a large empty band.
       (style.css sets margin-top:85px — override it here, don't stack padding on top.) */
    .page-hero { margin-top: 68px; padding: 18px 0 30px; }
    .page-hero h1 { font-size: 32px; }
}

@media (max-width: 575px) {
    .page-hero { margin-top: 60px; padding: 18px 0 24px; }
    .page-hero h1 { font-size: 26px; }
    .page-hero p.lede { font-size: 15px; }
}


/* ============================================================
   SHOP / PRODUCT LIST PAGE
   ============================================================ */

/* product-list.css already covers most breakpoints.
   These are supplemental fixes for very small screens. */

@media (max-width: 575px) {
    .shop-hero { margin-top: 65px; padding: 28px 0 20px; }
    .shop-hero h1 { font-size: 22px; }
    .shop-toolbar { gap: 10px; }
    .shop-sort-form { width: 100%; justify-content: space-between; }
    .sort-select { flex: 1; }
}

@media (max-width: 414px) {
    .category-pills-bar { gap: 6px; }
    .category-pill { font-size: 13px; padding: 7px 14px; }
}


/* ============================================================
   PRODUCT DETAIL (PDP) PAGE
   ============================================================ */

@media (max-width: 575px) {
    .pdp-cta { flex-direction: column; }
    .pdp-cta .btn-custom {
        width: 100%;
        justify-content: center;
        flex: none;
        min-width: 0;
    }
    .pdp-price__now { font-size: 26px; }
}

/* Artwork hotspot popovers: style.css gives them min-width 240px which overflows
   the artwork-stage container (overflow:hidden) on narrow screens — shrink them. */
@media (max-width: 575px) {
    .hotspot-popover { min-width: 160px; max-width: 200px; padding: 10px 12px; }
    .hotspot-popover h4 { font-size: 14px; }
}


/* ============================================================
   CONTACT PAGE
   ============================================================ */

@media (max-width: 767px) {
    .contact-block { padding-bottom: 60px; }
    .contact-form-card { padding: 24px; }
}

@media (max-width: 575px) {
    .contact-form-card { padding: 20px 16px; }
    .contact-form-card h2 { font-size: 22px; }
    .contact-form-card .submit-row .btn-custom { min-width: 0; }
}


/* ============================================================
   CART PAGE
   ============================================================ */

/* style.css already handles most cart responsive.
   These are supplemental fixes for very small screens. */

@media (max-width: 414px) {
    .cart-summary { padding: 20px; }
    .cart-empty h2 { font-size: 22px; }
    .cart-block { padding-bottom: 50px; }
}


/* ============================================================
   CHECKOUT PAGE
   ============================================================ */

@media (max-width: 767px) {
    .checkout-form-section { padding: 22px; }
}

@media (max-width: 575px) {
    .checkout-form-section { padding: 18px 16px; }
    .checkout-form-section legend { font-size: 18px; }
}


/* ============================================================
   ORDER / STATUS PAGE (order confirmation, order show)
   ============================================================ */

/* style.css handles 575px (padding: 100px 0 40px). Add 767px step. */
@media (max-width: 767px) {
    .status-page { padding: 110px 0 50px; }
    .status-page h1 { font-size: 32px; }
}