/*
Theme Name: Admal Child
Theme URI: https://admal-drzwi.pl
Description: Child theme of Kadence for the Admal-Drzwi WooCommerce catalog. Holds all catalog styling so the parent theme stays untouched.
Author: Admal-Drzwi
Template: kadence
Version: 1.0.0
*/

/* ============================================================
   Admal catalog styling
   Colours reference Kadence's own global palette so the catalog
   matches the existing admal-drzwi.pl branding:
     --global-palette1  #14a59f  brand teal
     --global-palette2  #41c1ba  lighter teal (hover)
     --global-palette3  #0f2a43  dark navy
     --global-palette9  #ffffff  white
   ============================================================ */

/* --- Inquiry CTAs on single product pages -------------------
   These replace the (removed) add-to-cart button, so they are
   the primary call to action and need to read as a clear pair. */
.admal-inquiry-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin: 24px 0;
}

.admal-inquiry-buttons .button {
  flex: 1 1 220px;
  margin: 0;                 /* cancel theme button margins */
  padding: 14px 24px;
  font-size: 16px;
  font-weight: 600;
  text-align: center;
  border-radius: 4px;
  transition: background-color 0.18s ease, color 0.18s ease;
}

/* Primary — phone call */
.admal-inquiry-buttons .admal-inquiry-call,
.admal-inquiry-buttons .admal-inquiry-call:visited {
  background-color: var(--global-palette1, #14a59f);
  border: 2px solid var(--global-palette1, #14a59f);
  color: var(--global-palette9, #fff);
}
.admal-inquiry-buttons .admal-inquiry-call:hover,
.admal-inquiry-buttons .admal-inquiry-call:focus {
  background-color: var(--global-palette2, #41c1ba);
  border-color: var(--global-palette2, #41c1ba);
  color: var(--global-palette9, #fff);
}

/* Secondary — contact page (outline) */
.admal-inquiry-buttons .admal-inquiry-ask,
.admal-inquiry-buttons .admal-inquiry-ask:visited {
  background-color: transparent;
  border: 2px solid var(--global-palette1, #14a59f);
  color: var(--global-palette1, #14a59f);
}
.admal-inquiry-buttons .admal-inquiry-ask:hover,
.admal-inquiry-buttons .admal-inquiry-ask:focus {
  background-color: var(--global-palette1, #14a59f);
  color: var(--global-palette9, #fff);
}

/* --- Single product: no breadcrumb --------------------------
   The plugin removes the WooCommerce breadcrumb on single product
   pages; this also hides a Kadence-rendered breadcrumb, which the
   PHP remove_action would not reach. Customers go back via the
   browser. */
.single-product .woocommerce-breadcrumb,
.single-product .kadence-breadcrumbs {
  display: none;
}

/* --- Product grid: gentle hover lift -------------------------
   Kadence already styles the cards; this only adds motion. */
.woocommerce ul.products li.product {
  transition: transform 0.18s ease, box-shadow 0.18s ease;
}
.woocommerce ul.products li.product:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 20px rgba(15, 42, 67, 0.12);
}

/* --- Price emphasis on archive cards ------------------------- */
.woocommerce ul.products li.product .price {
  font-weight: 600;
}

/* ============================================================
   Catalog archive — filter sidebar + product grid
   ============================================================ */

.admal-catalog {
  display: flex;
  align-items: flex-start;
  gap: 32px;
  margin-top: 24px;
}

.admal-catalog__main { flex: 1 1 auto; min-width: 0; }

/* --- Sidebar ------------------------------------------------- */
.admal-catalog__sidebar {
  flex: 0 0 270px;
  width: 270px;
  background: var(--global-palette9, #fff);
  border: 1px solid #e5e5e5;
  border-radius: 6px;
  padding: 20px;
}
.admal-catalog__sidebar-title {
  margin: 0 0 16px;
  padding-bottom: 12px;
  border-bottom: 2px solid var(--global-palette1, #14a59f);
  font-size: 20px;
  color: var(--global-palette3, #0f2a43);
}
.admal-catalog__sidebar .woof_redraw_zone { padding: 0; }
.admal-catalog__sidebar .woof_container { margin-bottom: 18px; }

/* HUSKY active-filter chips: hide the redundant "orderby" chip. The
   sorting dropdown above the grid already shows the current order, and
   HUSKY renders this chip's label in English ("orderby: price low to
   high"). The :has() rule drops the whole list item; the second
   selector is a fallback for browsers without :has(). */
.woof_products_top_panel li:has(> a[data-tax="orderby"]),
.woof_products_top_panel a[data-tax="orderby"] {
  display: none !important;
}

/* Toggle button — hidden on desktop, shown on mobile */
.admal-catalog__toggle {
  display: none;
  width: 100%;
  margin-bottom: 16px;
  padding: 12px;
  font-weight: 600;
  background: var(--global-palette1, #14a59f);
  color: #fff;
  border: 0;
  border-radius: 4px;
}

/* --- Product grid -------------------------------------------- */
.admal-catalog__main ul.products {
  display: grid !important;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  margin: 0;
}
.admal-catalog__main ul.products::before,
.admal-catalog__main ul.products::after { content: none !important; }
.admal-catalog__main ul.products li.product {
  width: auto !important;
  margin: 0 !important;
  float: none !important;
  display: flex;
  flex-direction: column;
  background: #fff;
  border: 1px solid #e5e5e5;
  border-radius: 6px;
  padding: 14px;
  cursor: pointer;            /* whole card reads as one clickable tile */
}
.admal-catalog__main ul.products li.product:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 20px rgba(15, 42, 67, 0.12);
}
/* Only the card itself lifts on hover — cancel any extra upward shift
   Kadence applies to the inner text block, so the grey area stays put. */
.admal-catalog__main ul.products li.product:hover .product-details,
.admal-catalog__main ul.products li.product:hover .entry-content-wrap {
  transform: none !important;
}
.admal-catalog__main ul.products li.product img {
  margin-bottom: 12px;
  border-radius: 4px;
}
.admal-catalog__main ul.products li.product .woocommerce-loop-product__title {
  font-size: 15px;
  font-weight: 600;
  line-height: 1.4;
  color: var(--global-palette3, #0f2a43);
  padding: 0;
}
.admal-catalog__main ul.products li.product .price {
  display: block;
  margin: 8px 0 14px;
  color: var(--global-palette1, #14a59f);
  font-weight: 700;
  font-size: 18px;
}
/* "Dowiedz się więcej" button — always visible (override Kadence's
   hover-reveal), pinned to the bottom of the card.
   Kadence's woo-archive-action-on-hover rule gives .product-action-wrap
   `padding: 0 1rem`, which shrank the button 32px narrower than the card
   and pushed the label into its right edge — zero it out and let the
   wrap fill the card. */
.admal-catalog__main ul.products li.product .product-action-wrap {
  margin-top: auto;
  display: block !important;
  width: 100% !important;
  padding: 0 !important;
  opacity: 1 !important;
  visibility: visible !important;
  transform: none !important;
  position: static !important;
  height: auto !important;
}
/* The button is a flex box centred on both axes — `text-align` alone is
   unreliable here. Kadence also forces `letter-spacing: .05em` and
   `text-transform: uppercase` on archive buttons, which widened the
   label; the letter-spacing is reset so the text fits with room to
   spare. */
.admal-catalog__main ul.products li.product .product-action-wrap .button {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 100% !important;
  box-sizing: border-box !important;
  margin: 0 !important;
  padding: 15px 12px !important;
  background: var(--global-palette1, #14a59f) !important;
  color: var(--global-palette9, #fff) !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  line-height: 1.5 !important;
  letter-spacing: 0 !important;
  text-align: center !important;
  white-space: nowrap !important;
  overflow: visible !important;
  border: 0 !important;
  border-radius: 4px !important;
  transition: background-color 0.18s ease;
}
/* Drop Kadence's arrow icon — keep the label on one clean line. */
.admal-catalog__main ul.products li.product .product-action-wrap .button svg,
.admal-catalog__main ul.products li.product .product-action-wrap .button .kadence-svg-iconset {
  display: none !important;
}
.admal-catalog__main ul.products li.product .product-action-wrap .button:hover,
.admal-catalog__main ul.products li.product .product-action-wrap .button:focus {
  background: var(--global-palette2, #41c1ba) !important;
  color: var(--global-palette9, #fff) !important;
}
.admal-catalog__main ul.products li.product .product-details {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
}
/* Keep archive cards clean — the excerpt stays on the single product page. */
.admal-catalog__main ul.products li.product .product-excerpt { display: none; }

/* --- Pagination ---------------------------------------------- */
.admal-catalog__main .woocommerce-pagination { margin-top: 32px; }

/* --- Responsive ---------------------------------------------- */
@media (max-width: 1024px) {
  .admal-catalog__main ul.products { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 767px) {
  .admal-catalog { display: block; }
  .admal-catalog__toggle { display: block; }
  .admal-catalog__sidebar {
    display: none;
    width: 100%;
    flex-basis: auto;
    margin-bottom: 20px;
  }
  .admal-catalog--filters-open .admal-catalog__sidebar { display: block; }
  .admal-catalog__main ul.products { grid-template-columns: 1fr; }
}

/* ============================================================
   Category archive content — replicates the original Elementor
   page layout that surrounded the (new) filtered product grid.
   Brand palette:
     #0f2a43  dark navy   headings / body
     #ff914d  orange      divider rules (Kadence palette6)
     #d9d9d9  light grey  Kontakt card (Kadence palette8)
     #587089  muted blue  Oferta links (Kadence palette5)
     #14a59f  brand teal  buttons
   ============================================================ */

/* --- Section heading: title + orange rule (Elementor "line_text") --- */
.admal-heading {
  display: flex;
  align-items: center;
  gap: 40px;
  margin: 30px 0;
}
.admal-heading__text {
  flex: 0 0 auto;
  font-size: 35px;
  font-weight: 400;
  line-height: 1.2;
  color: var(--global-palette3, #0f2a43);
}
.admal-heading__line {
  flex: 1 1 auto;
  height: 2px;
  background: var(--global-palette6, #ff914d);
}

/* --- Plain orange rule --------------------------------------- */
.admal-rule {
  display: block;
  height: 2px;
  border: 0;
  background: var(--global-palette6, #ff914d);
  margin: 28px 0;
}
.admal-rule--short { width: 90px; margin: 22px 0; }

/* --- Shared button ------------------------------------------- */
.admal-btn,
.admal-btn:visited {
  display: inline-block;
  padding: 12px 32px;
  background: var(--global-palette1, #14a59f);
  color: var(--global-palette9, #fff) !important;
  font-size: 15px;
  font-weight: 600;
  border: 0;
  border-radius: 3px;
  text-decoration: none;
  transition: background-color 0.18s ease;
}
.admal-btn:hover,
.admal-btn:focus {
  background: var(--global-palette2, #41c1ba);
  color: var(--global-palette9, #fff) !important;
}
.admal-btn--lg { padding: 15px 42px; font-size: 16px; }

/* --- Two-column lead: intro / Kontakt + Oferta --------------- */
.admal-lead {
  display: flex;
  gap: 56px;
  margin: 36px 0 8px;
}
.admal-lead__main { flex: 1 1 auto; min-width: 0; }
.admal-lead__side { flex: 0 0 320px; }

.admal-lead__heading {
  margin: 0 0 22px;
  font-size: 30px;
  font-weight: 500;
  color: var(--global-palette3, #0f2a43);
}
.admal-lead__main p {
  margin: 0 0 16px;
  line-height: 1.75;
  color: var(--global-palette3, #0f2a43);
}
.admal-lead__subhead {
  margin: 26px 0 10px;
  font-size: 18px;
  font-weight: 700;
  color: var(--global-palette3, #0f2a43);
}

.admal-contact-card {
  background: var(--global-palette8, #d9d9d9);
  padding: 30px 34px;
}
.admal-contact-card__title {
  margin: 0 0 18px;
  font-size: 26px;
  font-weight: 500;
  color: var(--global-palette3, #0f2a43);
}
.admal-contact-card p {
  margin: 0 0 14px;
  line-height: 1.65;
  color: var(--global-palette3, #0f2a43);
}
.admal-contact-card p:last-child { margin-bottom: 0; }
.admal-contact-card a {
  color: var(--global-palette3, #0f2a43);
  text-decoration: none;
}
.admal-contact-card a:hover { text-decoration: underline; }

.admal-offer__title {
  margin: 0 0 14px;
  font-size: 26px;
  font-weight: 500;
  color: var(--global-palette3, #0f2a43);
}
.admal-offer__list {
  margin: 0;
  padding: 0;
  list-style: none;
}
.admal-offer__list li { margin: 0 0 9px; }
.admal-offer__list a {
  font-size: 16px;
  color: var(--global-palette5, #587089);
  text-decoration: none;
}
.admal-offer__list a:hover { color: var(--global-palette1, #14a59f); }

/* --- PDF catalog blocks -------------------------------------- */
.admal-catalogs { margin: 8px 0; }
.admal-pdf { margin-bottom: 16px; }
.admal-pdf__action {
  text-align: center;
  margin-bottom: 6px;
}
.admal-pdf__image {
  display: flex;
  justify-content: center;
}
.admal-pdf__image img {
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: 420px;     /* hard cap — keep the phone mockup modestly sized */
}

/* --- Doors heading (directly above the filtered grid) -------- */
.admal-doors-heading { margin-top: 8px; }
.admal-doors-heading .admal-heading { margin-bottom: 0; }

@media (max-width: 900px) {
  .admal-lead { flex-direction: column; gap: 36px; }
  .admal-lead__side { flex: 1 1 auto; }
}
@media (max-width: 767px) {
  .admal-heading { gap: 22px; }
  .admal-heading__text { font-size: 25px; }
}

/* --- Category hero band -------------------------------------------------
   The three product-category archives reuse the door photos from the old
   static Elementor pages — one image per category — and match the flat
   350px hero height of the /kontakt/ and /realizacje/ Elementor heroes.

   Kadence's archive hero stacks a transparent-header offset (the header
   height, ~124px) ON TOP of the 350px title block, making the band taller
   than the Elementor heroes. Drop that offset so the band is a flat 350px;
   the title stays clear of the navbar because it is centred in the block.

   Image URLs are relative to this file (wp-content/themes/admal-child/),
   so they resolve on any environment without a hard-coded domain. */
.transparent-header .product-archive-hero-section .entry-hero-container-inner {
  padding-top: 0 !important;
}
.term-drzwi-pokojowe .product-archive-hero-section .entry-hero-container-inner {
  background-image: url('../../uploads/2023/12/Projekt-bez-nazwy-1.png') !important;
}
.term-drzwi-wewnatrzklatkowe .product-archive-hero-section .entry-hero-container-inner {
  background-image: url('../../uploads/2023/12/Projekt-bez-nazwy.png') !important;
}
.term-drzwi-metalowe-do-domu .product-archive-hero-section .entry-hero-container-inner {
  background-image: url('../../uploads/2023/12/Projekt-bez-nazwy-2.png') !important;
}

/* --- Below-grid sections: Kolorystyka, logos, services ------- */
.admal-section { margin-top: 36px; }

/* Kolorystyka — horizontal strip of finish swatches */
.admal-swatches {
  display: flex;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
}
.admal-swatches__item {
  flex: 0 0 25%;
  min-width: 220px;
  height: 300px;
  object-fit: cover;
  scroll-snap-align: start;
  display: block;
}

/* Partner-logo row */
.admal-brands {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 50px;
  padding: 8px 0 16px;
}
.admal-brands img {
  max-width: 200px;
  max-height: 90px;
  width: auto;
  height: auto;
  object-fit: contain;
}

/* "Dlaczego my?" services block */
.admal-services {
  margin-top: 48px;
  background: var(--global-palette3, #0f2a43);
  padding: 56px 40px;
  text-align: center;
}
.admal-services__inner {
  max-width: 720px;
  margin: 0 auto;
}
.admal-services__eyebrow {
  margin: 0 0 4px;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--global-palette6, #ff914d);
}
.admal-services__title {
  margin: 0 0 18px;
  font-size: 32px;
  color: var(--global-palette9, #fff);
}
.admal-services__text {
  margin: 0 0 28px;
  font-size: 16px;
  line-height: 1.75;
  color: rgba(255, 255, 255, 0.85);
}

@media (max-width: 767px) {
  .admal-swatches__item { height: 220px; min-width: 160px; }
  .admal-brands { gap: 28px; }
  .admal-brands img { max-width: 140px; max-height: 64px; }
  .admal-services { padding: 40px 22px; }
  .admal-services__title { font-size: 25px; }
}