/* CC Archive Layout — shop / product-category pages.
   Loaded by cc-archive-layout-v3.php. Safe to edit directly (CSS is not opcached). */

/* Astra's .ast-container is a flex row, which puts our hero/grid/CTA side by side.
   On these archive pages make it a normal block so they stack vertically, full width. */
.archive.woocommerce #content > .ast-container,
.woocommerce-page #content > .ast-container {
    flex-direction: column !important;
    align-items: stretch !important;
    max-width: 100% !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
}
.archive.woocommerce #primary,
.woocommerce-page #primary {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
}
/* keep the actual product grid + result bar within a comfortable reading width */
.archive.woocommerce .woocommerce-notices-wrapper,
.archive.woocommerce .woocommerce-result-count,
.archive.woocommerce .woocommerce-ordering,
.archive.woocommerce ul.products,
.woocommerce-page ul.products {
    max-width: 1240px;
    margin-left: auto !important;
    margin-right: auto !important;
    padding-left: clamp(16px, 3vw, 32px);
    padding-right: clamp(16px, 3vw, 32px);
}
/* full-bleed sections */
.cc-arch-hero,
.cc-arch-cta {
    width: 100vw;
    max-width: 100vw;
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
}

/* Hero */
.cc-arch-hero {
    position: relative;
    min-height: 48vh;
    background-color: #0E0E0E;
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    display: flex;
    align-items: flex-end;
}
.cc-arch-hero::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(0,0,0,.05) 35%, rgba(0,0,0,.72) 100%);
}
.cc-arch-hero-inner {
    position: relative;
    z-index: 1;
    width: 100%;
    max-width: 1240px;
    margin: 0 auto;
    padding: 0 clamp(20px, 4vw, 40px) clamp(24px, 4vh, 56px);
    color: #fff;
}
.cc-arch-title {
    color: #fff;
    margin: 0;
    text-transform: uppercase;
    line-height: 1.05;
    font-size: clamp(2rem, 5vw, 3.5rem);
}
.cc-arch-desc {
    max-width: 680px;
    margin-top: .6rem;
    color: rgba(255,255,255,.9);
}

/* Product grid spacing */
.woocommerce-page ul.products {
    margin-top: clamp(28px, 4vw, 48px) !important;
}

/* CTA band */
.cc-arch-cta {
    margin-top: clamp(40px, 6vw, 72px);
    background: #0E0E0E;
    color: #fff;
    text-align: center;
    padding: clamp(40px, 6vw, 72px) 20px;
}
.cc-arch-cta h2 { color: #fff; margin: 0 0 .4rem; }
.cc-arch-cta p  { color: rgba(255,255,255,.85); margin: 0 auto 1.2rem; max-width: 540px; }

@media (max-width: 600px) {
    .cc-arch-hero { min-height: 40vh; }
}

/* ---- Product card polish ---- */

/* Redundant per-card category label ("Canopies" on every canopy) + the duplicate
   category description (already shown in the hero) */
.ast-woo-product-category { display: none !important; }
.archive.woocommerce .term-description { display: none !important; }

/* Breadcrumbs not wanted on these archive pages (this stylesheet only loads here) */
.woocommerce-breadcrumb,
nav.woocommerce-breadcrumb,
.ast-breadcrumbs { display: none !important; }

/* Uniform card: white panel, equal height, content aligned */
.woocommerce ul.products li.product,
.woocommerce-page ul.products li.product {
    background: #fff;
    border: 1px solid #ededed;
    border-radius: 12px;
    overflow: hidden;
    padding: 0 0 18px !important;
    display: flex;
    flex-direction: column;
    box-shadow: 0 1px 3px rgba(0,0,0,.05);
    transition: box-shadow .2s ease, transform .2s ease;
}
.woocommerce ul.products li.product:hover {
    box-shadow: 0 10px 26px rgba(0,0,0,.10);
    transform: translateY(-3px);
}

/* Uniform image area */
.woocommerce ul.products li.product .astra-shop-thumbnail-wrap { margin: 0 !important; }
.woocommerce ul.products li.product img {
    width: 100% !important;
    aspect-ratio: 1 / 1;
    object-fit: cover;
    height: auto !important;
    margin: 0 !important;
    border-radius: 0 !important;
    display: block;
}

/* Text block fills remaining height so the button sits at the bottom of every card */
.woocommerce ul.products li.product .astra-shop-summary-wrap {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    padding: 16px 16px 0;
}
.woocommerce ul.products li.product .woocommerce-loop-product__title {
    font-size: 1.02rem;
    line-height: 1.25;
    min-height: 2.5em;           /* keeps 1- and 2-line titles aligned */
    padding: 0 0 .4rem !important;
}
.woocommerce ul.products li.product .price {
    margin: 0 0 .6rem;
    font-size: 1rem;
}

/* Buttons: full-width, pinned to the bottom of the card, consistent style */
.woocommerce ul.products li.product .button,
.woocommerce ul.products li.product a.cc-quote-btn {
    margin-top: auto !important;
    width: 100%;
    text-align: center;
}


/* ============================================================
   OOMPH — brand-forward polish (gold #847630 / #c9a14b on ink) */
:root { --cc-gold:#847630; --cc-gold-bright:#c9a14b; --cc-ink:#0E0E0E; }

/* Hero: taller, bolder title, gold accent bar, stronger contrast */
.cc-arch-hero { min-height: 56vh; }
.cc-arch-hero::after {
    background: linear-gradient(180deg, rgba(0,0,0,.18) 20%, rgba(0,0,0,.82) 100%);
}
.cc-arch-title {
    font-size: clamp(2.4rem, 6vw, 4.6rem);
    letter-spacing: .5px;
    text-shadow: 0 2px 24px rgba(0,0,0,.45);
}
.cc-arch-title::after {
    content: "";
    display: block;
    width: 88px;
    height: 5px;
    margin-top: .55rem;
    background: var(--cc-gold-bright);
}
.cc-arch-desc { font-size: 1.06rem; }

/* Cards: image zoom on hover, stronger lift, gold title on hover */
.woocommerce ul.products li.product,
.woocommerce-page ul.products li.product {
    border: none !important;
    box-shadow: 0 6px 18px rgba(0,0,0,.08);
}
.woocommerce ul.products li.product .astra-shop-thumbnail-wrap { overflow: hidden; }
.woocommerce ul.products li.product img { transition: transform .55s ease; }
.woocommerce ul.products li.product:hover img { transform: scale(1.07); }
.woocommerce ul.products li.product:hover {
    box-shadow: 0 18px 42px rgba(0,0,0,.17);
    transform: translateY(-5px);
}
.woocommerce ul.products li.product .woocommerce-loop-product__title {
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .3px;
    transition: color .2s ease;
}
.woocommerce ul.products li.product:hover .woocommerce-loop-product__title { color: var(--cc-gold); }

/* Buttons: bold branded gold, uppercase, hover to ink */
.woocommerce ul.products li.product .button,
.woocommerce ul.products li.product a.cc-quote-btn {
    background: var(--cc-gold) !important;
    color: #fff !important;
    text-transform: uppercase;
    font-weight: 700;
    letter-spacing: .6px;
    border: 0 !important;
    border-radius: 6px !important;
    padding: .72em 1em !important;
    transition: background .2s ease, transform .15s ease;
}
.woocommerce ul.products li.product .button:hover,
.woocommerce ul.products li.product a.cc-quote-btn:hover {
    background: var(--cc-ink) !important;
    color: #fff !important;
    transform: translateY(-1px);
}

/* CTA: photo background, dark overlay, gold accent bar + button */
.cc-arch-cta {
    position: relative;
    padding: clamp(56px, 8vw, 110px) 20px;
    background:
        linear-gradient(rgba(8,8,8,.80), rgba(8,8,8,.88)),
        url('https://digitaltest.kinsta.cloud/wp-content/uploads/2026/06/TTCC-7404309-scaled-1.jpg') center/cover no-repeat;
    background-attachment: scroll;
}
.cc-arch-cta::before {
    content: "";
    display: block;
    width: 72px;
    height: 5px;
    margin: 0 auto 1.3rem;
    background: var(--cc-gold-bright);
}
.cc-arch-cta h2 {
    font-size: clamp(1.7rem, 3.6vw, 2.7rem);
    text-transform: uppercase;
    letter-spacing: .5px;
}
.cc-arch-cta p { font-size: 1.05rem; }
.cc-arch-cta .button,
.cc-arch-cta a.cc-arch-cta-btn {
    background: var(--cc-gold) !important;
    color: #fff !important;
    text-transform: uppercase;
    font-weight: 700;
    letter-spacing: .6px;
    border: 0 !important;
    border-radius: 6px !important;
    padding: .95em 2.4em !important;
    font-size: 1.05rem;
    transition: background .2s ease, transform .15s ease;
}
.cc-arch-cta .button:hover,
.cc-arch-cta a.cc-arch-cta-btn:hover {
    background: var(--cc-gold-bright) !important;
    transform: translateY(-2px);
}