/*
 * Theme Name:   Blocksy Child (Atölye İki)
 * Theme URI:    https://atolyeiki.com
 * Description:  Stable-slug child theme for Blocksy. Keeps only CSS needed for the search modal layout.
 * Author:       Atölye İki
 * Template:     blocksy
 * Version:      0.3.6
 * Text Domain:  blocksy-atolyeiki-child
 */

/* Atölye İki global accent hook: follows Blocksy link-hover color */
:root {
  --ai-accent: #A86A3D; /* bronze / copper-like */
}

/* ——— Blocksy modal search: tidy layout (input left, “Kapat” centered) ——— */
#search-modal .ct-panel-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}
#search-modal .ct-search-form {
  width: clamp(280px, 92vw, 560px);
  margin: 0 auto;
}
#search-modal input.modal-field {
  text-align: left;
}
#search-modal input.modal-field::placeholder {
  text-align: left;
}
#search-modal .ct-panel-actions {
  order: 2;
  align-self: center;
  width: clamp(280px, 92vw, 560px);
}
#search-modal .ct-toggle-close,
#search-modal .ai-search-close {
  display: block;
  margin: 10px auto 0;
  text-align: center;
  width: clamp(280px, 92vw, 560px);
}

/* === Atölye İki — Artist Archives (canonical, 2025-11-10 + tweaks) =======
   Scope: body.tax-pa_sanatci (pretty URLs: /sanatci/{slug}/)
====================================================================== */

/* Hero: constant 2:1 ratio, cover image */
body.tax-pa_sanatci .ai-hero-artist {
  aspect-ratio: auto !important;
  height: 0 !important;
  min-height: 0 !important;
  max-height: none !important;
  padding-top: 50% !important;
  position: relative;
  width: 100%;
  overflow: hidden;
  overflow: clip;
  background-size: cover;
  background-position: var(--ai-hero-pos, center 80%);
}

/* Overlay grid: keep content near bottom-left, slightly lifted */
body.tax-pa_sanatci .ai-hero-artist__inner {
  position: absolute;
  inset: 0;
  display: grid;
  align-content: end;
  justify-items: start;
  padding: clamp(16px, 3vw, 32px);
  padding-bottom: clamp(22px, 3.8vw, 56px);
  z-index: 2;
}

/* H1 micro-plate: hug text width; fake underline via border-bottom */
body.tax-pa_sanatci .ai-hero-artist :is(h1, .ai-display, .page-title, .entry-title) {
  place-self: end start;
  justify-self: start;
  width: fit-content;
  max-width: 100%;
  min-width: 0;

  background: rgba(255, 255, 255, .38) !important;
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
  box-shadow: 0 2px 12px rgba(0, 0, 0, .12);

  display: inline-block;
  line-height: 1.05;
  padding: .14em .12em .14em !important;
  text-decoration: none !important;
  padding-bottom: 0.02em;
  margin-bottom: 0.12em;

  border-bottom: 0.18em solid var(--ai-underline, var(--ai-accent, currentColor));
}

/* Underline color: warm metal accent shared by all artists */
body.tax-pa_sanatci {
  --ai-underline: var(--ai-accent);
}

/* Bio gutters + readable column */
body.tax-pa_sanatci section.ai-artist-bio {
  margin-top: clamp(20px, 3.5vw, 40px);
}

/* Artist pages – bio and grid share the same width */
body.tax-pa_sanatci section.ai-artist-bio > .ai-container,
body.tax-pa_sanatci section.ai-artist-products > .ai-container {
  box-sizing: border-box;
  max-width: 85ch;                          /* shared width for both */
  margin: 0 auto;
  padding-left: clamp(16px, 3vw, 32px);
  padding-right: clamp(16px, 3vw, 32px);
}


body.tax-pa_sanatci section.ai-artist-bio .ai-artist-bio__content {
  box-sizing: border-box;
  max-width: none;          /* or 100% – both are fine */
  margin-left: 0;           /* align with container left edge */
  margin-right: 0;          /* align with container right edge */
  font-family: "Poppins", system-ui, -apple-system, "Segoe UI", Roboto,
    "Noto Sans", "Liberation Sans", Arial, sans-serif !important;
  font-weight: 500 !important;
  font-size: clamp(16px, 1.45vw, 19px) !important;
  line-height: 1.7 !important;
  letter-spacing: .003em !important;
  color: rgba(0, 0, 0, .9) !important;
  text-align: justify;
  text-justify: inter-word;
  hyphens: auto;
}

body.tax-pa_sanatci section.ai-artist-bio .ai-artist-bio__content p + p {
  margin-top: .8em !important;
}

/* Remove any extra left offset from the section title */
body.tax-pa_sanatci section.ai-artist-products .ai-section-title {
    margin-left: 0;
    font-weight: 600;      /* lighter – change to 500 if you want a bit stronger */
    font-size: 24px;    /* slightly smaller than default */
    line-height: 1.3;
}

/* Artist "Çalışmalar" grid: mimic home-style product cards */
body.tax-pa_sanatci section.ai-artist-products ul.products {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: clamp(18px, 2.4vw, 28px);
  list-style: none;
  padding-left: 0;
}

/* Reset Woo/Blocksy floats so grid can work */
body.tax-pa_sanatci section.ai-artist-products ul.products li.product {
  width: auto !important;
  float: none !important;
  margin: 0 !important;
}

/* Center product titles under images */
.woocommerce ul.products li.product .woocommerce-loop-product__title,
.ct-product-card .ct-card-content .ct-card-title {
  text-align: center !important;
}

/* Atölye İki – Single product meta tuning */

/* Hide default Woo product categories meta line */
.single-product .product_meta .posted_in {
    display: none !important;
}

/* 1) Base weight for all product meta (labels + values + STOK KODU) */
.single-product .entry-summary .product_meta,
.single-product .entry-summary .product_meta span,
.single-product .entry-summary .product_meta span span {
    font-weight: 400 !important;
}

/* 2) Re-boost only SANATÇI / ÜRÜN TİPİ / MALZEME labels */
.single-product .entry-summary .product_meta.aki-attr-meta .aki-attr-row strong {
    font-weight: 600 !important;
}

/* Make STOK KODU label light gray */
.single-product .product_meta .sku_wrapper,
.single-product .product_meta .sku_wrapper .sku {
    color: #9a9a9a !important; /* tweak if you want lighter/darker */
}

/* Product tabs accent */
.single-product .woocommerce-tabs ul.tabs li.description_tab.active::before,
.single-product .woocommerce-tabs ul.tabs li.additional_information_tab.active::before,
.single-product .woocommerce-tabs ul.tabs li.reviews_tab.active::before {
  background-color: var(--theme-link-hover-color, #ccff00) !important;
}
.single-product .woocommerce-tabs ul.tabs li.description_tab.active a,
.single-product .woocommerce-tabs ul.tabs li.additional_information_tab.active a,
.single-product .woocommerce-tabs ul.tabs li.reviews_tab.active a {
  color: var(--theme-link-hover-color, #ccff00) !important;
}

/* Global UI accent fallback */
:root {
  --ai-ui-accent: var(--theme-link-hover-color, #ccff00);
}

/* ----- Mobile offcanvas (hamburger) styling ----- */
#offcanvas {
  background-color: transparent !important;
}
#offcanvas .ct-panel-body,
#offcanvas .ct-panel-inner-main,
#offcanvas .ct-panel-content[data-device="mobile"] {
  background-color: rgba(255, 255, 255, 1) !important;
}
#offcanvas nav.mobile-menu ul {
  margin: 0;
  padding: 2px 18px 12px 18px;
}
#offcanvas nav.mobile-menu li {
  border-bottom: 1px solid rgba(0, 0, 0, 0.06);
}
#offcanvas nav.mobile-menu a.ct-menu-link {
  color: #111111 !important;
  font-weight: 500;
}
#offcanvas div:has(> button.ct-toggle-close) {
  background-color: #333333 !important;
  color: #ffffff !important;
  border-bottom: none !important;
  box-shadow: none !important;
  padding: 12px 18px 12px;
}
#offcanvas button.ct-toggle-close .ct-icon,
#offcanvas button.ct-toggle-close svg {
  fill: currentColor !important;
  stroke: currentColor !important;
}

/* === Atölye İki — panel close icon color ============================= */
/* Make the hamburger/offcanvas + search panels use a white "X" on the
 * dark header bar. Applies to all ct-panels (menu + search). */
.ct-panel-actions .ct-toggle-close svg.ct-icon {
    color: #ffffff !important;
}

/* If the icon uses stroke instead of fill, keep that white too */
.ct-panel-actions .ct-toggle-close svg.ct-icon path {
    stroke: currentColor;
}

/* === Atölye İki – header logo alignment & fixed sizing =============== */

/* Vertically center header contents */
.ct-header .ct-header-row,
.ct-header .ct-header-row-inner {
    align-items: center !important;
}

/* Vertically center logo inside its own wrapper */
.ct-header .site-branding {
    display: flex;
    align-items: center;
}

/* Single, fixed logo size across all viewports */
.ct-header .site-branding svg,
.ct-header .site-branding img {
    height: 46px !important;
    width: auto;
    max-height: none !important;
    display: block;
}

/* === Atölye İki — header logo vertical alignment (mobile) =========== */
/* Keep the mobile middle row at a stable height and center the logo
 * for all widths below 1000px, so there is no jump at 1000px or ~690px. */
@media (max-width: 1000px) {
    /* Middle row wrapper for the mobile header device */
    #header > [data-device="mobile"] > [data-row="middle"] {
        display: flex !important;
        align-items: center !important;
        padding-top: 12px !important;
        padding-bottom: 12px !important;
        min-height: 70px !important; /* approx. the good desktop row height */
    }

    /* Inner container in that row */
    #header > [data-device="mobile"] > [data-row="middle"] > .ct-container-fluid,
    #header > [data-device="mobile"] > [data-row="middle"] > .ct-container {
        display: flex !important;
        align-items: center !important;
    }

    /* Columns and item containers in the mobile middle row */
    #header > [data-device="mobile"] > [data-row="middle"] [data-column],
    #header > [data-device="mobile"] > [data-row="middle"] [data-items] {
        display: flex !important;
        align-items: center !important;
        margin-top: 0 !important;
        margin-bottom: 0 !important;
    }

    /* Logo wrapper + link: make sure the SVG is centered inside */
    #header > [data-device="mobile"] .site-branding,
    #header > [data-device="mobile"] .site-logo-container {
        display: flex !important;
        align-items: center !important;
    }
}

/* === Atölye İki — header / hero horizontal anchoring ==================== */

/* 1) Desktop: keep header content on the same width as the hero */
@media (min-width: 1000px) {
    #header > [data-device="desktop"] > [data-row="middle"] > .ct-container-fluid {
        max-width: var(--theme-container-width,
                       var(--wp--style--global--wide-size, 1200px));
        margin-left: auto;
        margin-right: auto;
        padding-left: 0;
        padding-right: 0;
    }
}

/* 2) Mobile header (1000px and below): logo left, menu+search right */
@media (max-width: 1000px) {
    /* Row inner container */
    #header > [data-device="mobile"] > [data-row="middle"] > .ct-container-fluid {
        display: flex !important;
        align-items: center !important;    /* keeps your vertical fix */
        justify-content: space-between !important;
    }

    /* Columns hold their items centered vertically */
    #header > [data-device="mobile"] > [data-row="middle"] [data-column="start"],
    #header > [data-device="mobile"] > [data-row="middle"] [data-column="end"] {
        display: flex !important;
        align-items: center !important;
    }

    /* Push the hamburger+search column to the far right of the row */
    #header > [data-device="mobile"] > [data-row="middle"] [data-column="end"] {
        margin-left: auto !important;
    }
}

/* 3) Extra small: when the hero goes full-width (~782px), let the header
 * span the viewport as well, so logo and menu line up with hero edges. */
@media (max-width: 782px) {
    #header > [data-device="mobile"] > [data-row="middle"] > .ct-container-fluid {
        max-width: none !important;
        width: 100vw !important;
        margin-left: calc(50% - 50vw) !important;
        margin-right: calc(50% - 50vw) !important;
        padding-left: 16px;
        padding-right: 16px;
    }
}

/* Atölye İki — Artist hero: smaller name plate on mobile */
@media (max-width: 768px) {
  body.tax-pa_sanatci .ai-hero-artist :is(h1, .ai-display, .page-title, .entry-title) {
    font-size: 1.4rem;                      /* another ~20% up */
    padding: .12em .31em .14em !important;  /* scale plate with text */
    border-bottom-width: 0.16em;            /* match the larger text */
  }
}

/* Atölye İki — Desktop logo vertical centering — 2025-11-16 */

@media (min-width: 1001px) {
  /* The clickable logo box (73×70 flex item in your screenshots) */
  header.ct-header [data-id="logo"] .site-logo-container {
    display: flex !important;
    align-items: center !important;   /* vertical centering */
    justify-content: flex-start;
    line-height: 0;
  }

  /* Make the SVG behave like a block (no text baseline gap) */
  header.ct-header [data-id="logo"] .site-logo-container svg {
    display: block;
  }
}

/* Home intro stack under split hero */
.home .ai-home-intro {
    margin: clamp(32px, 4vh, 56px) auto clamp(40px, 6vh, 80px);
    padding: 0 clamp(16px, 4vw, 32px);
    max-width: 960px;
}

/* H1 under hero */
.home .ai-home-intro h1 {
    text-align: center;
    margin: 0 0 clamp(8px, 1.6vw, 16px);
}

/* Kicker: Bir bir ve beraber. */
.home .ai-home-intro .ai-home-kicker {
    text-align: center;
    font-size: 0.8rem;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    margin: 0 0 clamp(14px, 2vw, 20px);
    opacity: 0.7;
}

/* Body paragraph */
.home .ai-home-intro .ai-home-body {
    max-width: 46rem;
    margin: 0 auto;
    font-size: 0.96rem;
    line-height: 1.7;
    text-align: justify;
    hyphens: auto;
}

@media (max-width: 768px) {
    .home .ai-home-intro {
        margin-top: clamp(24px, 5vh, 32px);
        margin-bottom: clamp(32px, 7vh, 48px);
    }

    .home .ai-home-intro .ai-home-body {
        font-size: 0.9rem;
    }
}

@media (max-width: 600px) {
    .home .ai-home-intro h1 {
        font-size: 1.6rem;
        line-height: 1.2;
    }
}

/* Home – section title above product grid */
.home .ai-section-products {
    text-align: center;
    margin: clamp(28px, 5vh, 44px) auto clamp(16px, 3vh, 28px);
    padding: 0 clamp(16px, 4vw, 32px);
}

.home .ai-section-products h2 {
    margin: 0 0 4px;
    font-size: 1.2rem;   /* a gentle bump */
    font-weight: 600;    /* a bit stronger, but still below H1 */
}

.home .ai-section-products p {
    margin: 0;
    font-size: 0.95rem;
    opacity: 0.85;
}

/* Artist archives – "Seçili işleri" heading under bio */
.taxonomy-pa_sanatci h2.ai-section-title {
    font-weight: 400 !important;   /* lighter */
    font-size: 1.05rem !important; /* a bit smaller */
    margin: clamp(24px, 4vh, 32px) 0 clamp(10px, 2vh, 18px);
}

/* Atölye İki — Sanatçı filter: keep 2-column layout */
.wp-block-woocommerce-product-filters
  .ai-sanatci-filter
  .wc-block-product-filter-checkbox-list__items {
    column-count: 2;
    column-gap: 1.2em;
}

.wp-block-woocommerce-product-filters
  .ai-sanatci-filter
  .wc-block-product-filter-checkbox-list__item {
    break-inside: avoid;
    margin-bottom: 0.2em;
}

/* Atölye İki — Ürün Tipi filter: 2-column layout */
.wp-block-woocommerce-product-filters
  .ai-uruntipi-filter
  .wc-block-product-filter-checkbox-list__items {
  column-count: 2;
  column-gap: 1.2em;
}

.wp-block-woocommerce-product-filters
  .ai-uruntipi-filter
  .wc-block-product-filter-checkbox-list__item {
  break-inside: avoid;
  margin-bottom: 0.2em;
}


/* Atölye İki — Malzeme filter: single-column, grouped by family */

.ai-malzeme-filter
  .wc-block-product-filter-checkbox-list__items {
  column-count: 1;      /* ensure single column */
}

.ai-malzeme-filter
  .wc-block-product-filter-checkbox-list__item {
  break-inside: avoid;
  margin-bottom: 0.25em;
}

/* Family headings: Metal / Taş / Ahşap */
.ai-malzeme-filter
  .wc-block-product-filter-checkbox-list__item.ai-malzeme-family-head
  .wc-block-product-filter-checkbox-list__label {
  font-weight: 600;
  letter-spacing: 0.01em;
}


/* Atölye İki — hide "Çalışmalar" filters column title on mobile */
@media (max-width: 640px) {
  .ai-filters-title {
    display: none;
  }
}

/* Atölye İki — unify all filter section headings in sidebar
   (Sanatçı, Ürün Tipi, Malzeme, Stok Durumu) */
#sidebar .wp-block-woocommerce-product-filters h4.wp-block-heading {
  font-size: 0.95rem !important;
  font-weight: 600 !important;
  margin-top: 0 !important;
  margin-bottom: 0.5rem !important;
}


/* =========================================
   Atölye İki – staging filters & shop tweaks
   (migrated from Additional CSS, 2025-11-21)
   ========================================= */

/* === Site tokens ========================================================== */
:root {
  --ai-logo-light: #333;
  --ai-logo-dark: #fff;

  /* Overlay over hero photos (0 = no dim) */
  --ai-hero-overlay: rgba(0, 0, 0, 0);

  /* Kicker controls */
  --ai-kicker-bottom: 10%;
  --ai-bar-height: clamp(19px, 2.1vw, 30px); /* thin bottom bar */
}

/* === Header logo color behavior ========================================== */
.ct-header .ai-logo svg { color: var(--ai-logo-light); }
.ct-header[data-scheme="dark"] .ai-logo svg,
.is-header-dark .ai-logo svg { color: var(--ai-logo-dark); }
.ct-header .ai-logo svg * { fill: currentColor; stroke: currentColor; }
.ct-header .ai-logo a:hover svg { opacity: .85; }

/* === Remove header→hero gap on Home ====================================== */
.home .ct-sticky-placeholder { height: 0 !important; }
.home [data-vertical-spacing="top"] { padding-top: 0 !important; }
.home .entry-content > *:first-child { margin-top: 0 !important; }
.home .ai-hero-split { margin-top: 0 !important; padding-top: 0 !important; }

.ai-hero-col {
  position: relative;
  flex: 1 0 50%; /* two equal columns */
  min-height: inherit;
  padding: 0 !important;
  margin: 0 !important;
  background-size: cover;
  background-position: 50% 40%; /* show a tad more top */
  background-repeat: no-repeat;
  overflow: hidden;
}

/* Per-column overlay */
.ai-hero-col::before {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--ai-hero-overlay);
  pointer-events: none;
  z-index: 1;
}

/* Ensure any kicker sits above overlay */
.ai-hero-col .ai-kicker { position: absolute; z-index: 2; }

/* === Image sources (final) =============================================== */
.ai-hero-col--left { background-image: url("https://atolyeiki.com/wp-content/uploads/2025/10/esra_1600x1200.webp"); }
.ai-hero-col--right { background-image: url("https://atolyeiki.com/wp-content/uploads/2025/10/arifi_1600x1200.webp"); }

/* === Bottom-edge kicker bars (thin, Poppins) ============================= */
.ai-kicker--bar.ai-kicker--full {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  top: auto;
  height: var(--ai-bar-height) !important;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #333333 !important;
  color: #ffffff !important;
  border: 0 !important;
  border-radius: 0 !important;
  padding: 0;
  margin: 0;
  z-index: 2;
}

.ai-kicker--bar.ai-kicker--full a {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  color: inherit;
  text-decoration: none;
}
.ai-kicker--bar.ai-kicker--full a:hover { text-decoration: underline; }

/* Typography for kickers (assuming Poppins is already enqueued by theme) */
.ai-hero-split .ai-kicker,
.ai-hero-split .ai-kicker a {
  font-family: "Poppins", system-ui, -apple-system, "Segoe UI", Roboto, "Noto Sans",
  "Liberation Sans", Arial, sans-serif !important;
  font-weight: 600;
  letter-spacing: 0.02em;
}

/* Mobile header: tighten left edge (logo size handled in style.css) */
@media (max-width: 782px) {
  /* Nudge header container closer to the edges */
  .ct-header .ct-container { padding-left: 10px; padding-right: 10px; }

  /* Remove any stray left margin on the branding wrapper */
  .site-branding { margin-left: 0 !important; }
}

/* Mobile: split hero as true 50/50 columns */
@media (max-width: 782px) {
  .ai-hero-split {
    position: relative;
    display: flex !important;
    flex-direction: row !important; /* FINAL INTENT: Side-by-side */
    align-items: stretch;
    gap: clamp(4px, 1.4vw, 8px) !important; /* slim gutter */
    min-height: clamp(260px, 58vw, 62vh);
    overflow: hidden;
    background: #fff; /* gutter color */
  }

  .ai-hero-split .ai-hero-col {
    flex: 1 1 0 !important; /* equal widths */
    width: auto !important; /* override any 50vw/50% leftovers */
    max-width: none !important;
    min-width: 0; /* prevent overflow/wrapping */
    background-size: cover;
    background-position: 50% 40%;
    position: relative;
    overflow: hidden; /* keep images clipped cleanly */
  }

  /* Remove stray margins that some Group blocks add inside */
  .ai-hero-split .wp-block-group { margin: 0 !important; }

  /* If container padding squeezes the hero, make it full-bleed on mobile */
  .ai-hero-split {
    width: 100vw;
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
  }

  /* Border that doesn't change layout width */
  .ai-hero-split .ai-hero-col::after {
    content: "";
    position: absolute;
    inset: 0;
    box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .14); /* border color/thickness */
    pointer-events: none;
  }
}


/* === Split hero: gutter + straight borders (all viewports) === */
:root {
  /* Tweak these to taste */
  --ai-frame-color: rgba(0, 0, 0, .14); /* border color */
  --ai-frame-weight: 1px; /* border thickness */
}

/* Container: make real columns + a fluid gutter */
.ai-hero-split {
  display: flex !important;
  flex-direction: row !important;
  align-items: stretch;
  height: clamp(370px, 44vw, 60.7vh) !important; /* final tuned height */
  min-height: 0 !important;
  position: relative;
  gap: clamp(2px, 0.6vw, 8px) !important; /* slim gutter across all sizes */
  background: #fff; /* gutter color */
}

/* Columns: equal widths and clean clipping */
.ai-hero-split .ai-hero-col {
  position: relative;
  flex: 1 1 0 !important; /* equal widths even with a gap */
  width: auto !important;
  max-width: none !important;
  min-width: 0;
  overflow: hidden; /* clip backgrounds to the border */
  background-size: cover;
  background-position: 50% 40%;
}

/* Draw the border without affecting layout */
.ai-hero-split .ai-hero-col::after {
  content: "";
  position: absolute;
  inset: 0;
  box-shadow: inset 0 0 0 var(--ai-frame-weight) var(--ai-frame-color);
  pointer-events: none;
}

/* Optional: if inner Groups add margins, kill them so borders align perfectly */
.ai-hero-split .wp-block-group { margin: 0 !important; }


/* Desktop: crop portraits to a squarer box using cover */
@media (min-width: 981px) {
  .ai-hero-split.ai-desktop-crop {
    display: flex !important;
    flex-direction: row !important;
    align-items: stretch;
  }
  .ai-hero-split.ai-desktop-crop .ai-hero-col {
    /* Make each half a little wider than tall (less vertical bulk) */
    aspect-ratio: 5 / 4; /* try 6/5 for slightly shorter */
    background-size: cover; /* tasteful crop */
    background-position: 50% 40%; /* tweak per side below if needed */
    overflow: hidden; /* keeps your borders tidy */
  }

  /* Optional: per-portrait focus so faces/subjects stay in frame */
  .ai-hero-split.ai-desktop-crop .ai-hero-col--left { background-position: 45% 32%; }
  .ai-hero-split.ai-desktop-crop .ai-hero-col--right { background-position: 55% 36%; }
}

/* Home: remove container top padding above the hero */
.home .ct-container-full[data-vertical-spacing] {
  /* Option 1: kill just the top padding */
  padding-top: 0 !important;

  /* Option 2 (belt-and-suspenders): collapse the variable Blocksy uses */
  --theme-content-vertical-spacing: 0px !important;
}

/* If you want this ONLY for the current Home page (page-id-288 in your screenshot) */
.page-id-288 .ct-container-full[data-vertical-spacing] {
  padding-top: 0 !important;
  --theme-content-vertical-spacing: 0px !important;
}

/* HOME: viewport-based color control (no hover logic) */
.home .ai-mono-grid {
  --ai-thumb-filter: grayscale(100%) contrast(1.05) brightness(0.98);
}

/* Base: grayscale */
.ai-mono-grid :is(img, picture > img) {
  -webkit-filter: var(--ai-thumb-filter);
  filter: var(--ai-thumb-filter);
  transition: filter .28s ease;
}

/* When a tile is in view (set by JS), show color */
.ai-mono-grid :is(.wc-block-grid__product.ai-inview, .ct-product-card.ai-inview, li.product.ai-inview) :is(img, picture > img) {
  -webkit-filter: none !important;
  filter: none !important;
}

/* Reduced motion respect */
@media (prefers-reduced-motion: reduce) {
  .ai-mono-grid :is(img, picture > img) { transition: none !important; }
}

/* Atölye İki — keep mobile filters overlay clear of the header */
@media (max-width: 640px) {
  .wc-block-product-filters__overlay-dialog {
    margin-top: 3.5rem !important;              /* push content down */
    max-height: calc(100vh - 3.5rem) !important;/* keep it scrollable */
  }
}

/* Atölye İki — reduce gap between filters (sidebar) and products on mobile */
@media (max-width: 640px) {
  #sidebar {
    margin-bottom: 0.01rem !important; /* try 0.75rem; adjust up/down as you like */
  }
}

/* Atölye İki – force Poppins in mobile (off-canvas) menu */
.ct-panel,
.ct-panel * {
    font-family: var(--ai-font-body, 'Poppins', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif) !important;
}


/* Atölye İki – tighten gap between filter row and product grid on archives */
.archive.post-type-archive-product .woo-listing-top + ul.products {
    margin-top: -3.5rem; /* adjust: -0.8rem … -1.6rem depending on taste */
}

/* Atölye İki – tighten gap between product image and title on mobile */
@media (max-width: 768px) {

    /* reduce space under the product image */
    .archive.post-type-archive-product ul.products li.product figure {
        margin-bottom: 0.5rem;   /* tweak 0.2–0.5rem to taste */
    }

    /* product title size + spacing */
    .archive.post-type-archive-product ul.products li.product .woocommerce-loop-product__title {
        font-size: 1.6rem;
        line-height: 1.35;
        margin-top: 0;
        margin-bottom: 0.9rem;
    }
}