/*
 * AZ Category Enhancer v0.2.0 - preview-only layout skeleton for Apollo.
 * ALL visual changes are scoped to html.azce-v02-active.
 * No styles for #filters contents, #products, cart or sorting controls.
 */
.azce-v02__css-probe { --azce-v02-css-ready: yes; }

html.azce-v02-active #content-wrapper {
  --azce-accent: #f47718;
  --azce-ink: #18251d;
  --azce-muted: #657168;
  --azce-border: #e8ebe6;
}

html.azce-v02-active .azce-v02__hero,
html.azce-v02-active .azce-v02__chooser,
html.azce-v02-active .azce-v02__advice,
html.azce-v02-active .azce-v02__areas,
html.azce-v02-active .azce-v02__hero *,
html.azce-v02-active .azce-v02__chooser *,
html.azce-v02-active .azce-v02__advice *,
html.azce-v02-active .azce-v02__areas * {
  box-sizing: border-box;
}

/* Full-width hero is a direct child of #content-wrapper, BEFORE the sidebar/main grid. */
html.azce-v02-active #content-wrapper > .azce-v02__hero {
  display: grid;
  grid-template-columns: minmax(0, 57%) minmax(0, 43%);
  position: relative;
  isolation: isolate;
  clear: both;
  overflow: hidden;
  width: 100%;
  min-height: 310px;
  margin: 0 0 12px;
  border: 1px solid #e6ece2;
  border-radius: 17px;
  color: var(--azce-ink);
  background: linear-gradient(100deg, #fbfdfa 0%, #f2f8f2 53%, #cde0d0 100%);
  box-shadow: 0 8px 28px rgba(33, 51, 40, .055);
  font-family: inherit;
}

html.azce-v02-active #content-wrapper > .azce-v02__hero.azce-v02__hero--image {
  background-image: linear-gradient(90deg, rgba(250, 252, 248, .99) 0%, rgba(250, 252, 248, .94) 36%, rgba(250, 252, 248, .42) 63%, rgba(250, 252, 248, 0) 100%), var(--azce-v02-hero-image);
  background-size: cover;
  background-position: center, center right;
  background-repeat: no-repeat;
}

html.azce-v02-active .azce-v02__hero-copy {
  position: relative;
  z-index: 1;
  min-width: 0;
  padding: 35px 24px 29px 35px;
}

html.azce-v02-active .azce-v02__hero-heading h1.category-title {
  display: block;
  float: none;
  width: auto;
  max-width: 100%;
  margin: 0 0 7px;
  padding: 0;
  border: 0;
  background: transparent;
  color: #151c18;
  font-family: inherit;
  font-size: clamp(29px, 2.75vw, 45px);
  font-weight: 800;
  letter-spacing: -.035em;
  line-height: 1.12;
  text-align: left;
}

html.azce-v02-active .azce-v02__intro {
  margin: 0 0 23px;
  max-width: 570px;
  color: #48594b;
  font-size: 15px;
  line-height: 1.55;
}

html.azce-v02-active .azce-v02__features {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 15px 18px;
  max-width: 645px;
}

html.azce-v02-active .azce-v02__feature {
  display: flex;
  align-items: center;
  min-width: 0;
  gap: 11px;
}

html.azce-v02-active .azce-v02__feature-icon,
html.azce-v02-active .azce-v02__chooser-icon {
  display: flex;
  flex: 0 0 40px;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: rgba(255, 255, 255, .87);
  color: var(--azce-accent);
  box-shadow: 0 4px 14px rgba(32, 53, 36, .08);
}

html.azce-v02-active .azce-v02__feature-icon svg,
html.azce-v02-active .azce-v02__chooser-icon svg {
  width: 21px;
  height: 21px;
}

html.azce-v02-active .azce-v02__feature-text,
html.azce-v02-active .azce-v02__chooser-label {
  display: flex;
  flex-direction: column;
  min-width: 0;
  gap: 3px;
}

html.azce-v02-active .azce-v02__feature strong {
  color: #203026;
  font-size: 12px;
  font-weight: 750;
  line-height: 1.25;
}

html.azce-v02-active .azce-v02__feature small {
  color: #687269;
  font-size: 11px;
  line-height: 1.3;
}

html.azce-v02-active .azce-v02__hero-media {
  position: relative;
  min-width: 0;
  min-height: 100%;
  display: grid;
  place-items: center;
  overflow: hidden;
  background: radial-gradient(circle at 63% 75%, #bfd7b3 0, transparent 33%), radial-gradient(circle at 75% 12%, #c0d9bf 0, transparent 39%);
}

html.azce-v02-active .azce-v02__hero-media::before {
  content: '';
  position: absolute;
  right: -19%;
  bottom: -74%;
  width: 125%;
  aspect-ratio: 1;
  border: 1px solid rgba(255,255,255,.6);
  border-radius: 50%;
  box-shadow: 0 0 0 48px rgba(255,255,255,.09), 0 0 0 98px rgba(255,255,255,.07);
}

html.azce-v02-active .azce-v02__media-placeholder {
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  width: min(80%, 290px);
  padding: 23px 12px;
  color: #536858;
  text-align: center;
  border: 1px dashed #91b19b;
  border-radius: 14px;
  background: rgba(255,255,255,.50);
  backdrop-filter: blur(5px);
}

html.azce-v02-active .azce-v02__media-placeholder > svg { color: #518366; width: 36px; height: 36px; }
html.azce-v02-active .azce-v02__media-placeholder strong { font-size: 14px; }
html.azce-v02-active .azce-v02__media-placeholder span { font-size: 12px; line-height: 1.35; }
html.azce-v02-active .azce-v02__hero--image .azce-v02__hero-media { background: none; }
html.azce-v02-active .azce-v02__hero--image .azce-v02__hero-media::before,
html.azce-v02-active .azce-v02__hero--image .azce-v02__media-placeholder { display: none; }

html.azce-v02-active .azce-v02__exit {
  position: absolute;
  z-index: 4;
  top: 12px;
  right: 12px;
  padding: 6px 11px;
  border: 1px solid #d5ddd4;
  border-radius: 6px;
  background: rgba(255,255,255,.93);
  color: #56635b;
  font-family: inherit;
  font-size: 11px;
  line-height: 1.3;
  cursor: pointer;
}

html.azce-v02-active .azce-v02__exit:hover,
html.azce-v02-active .azce-v02__exit:focus-visible {
  border-color: var(--azce-accent);
  color: #a94b0b;
}

/* Navigation row, before the native Shoptet two-column grid. */
html.azce-v02-active #content-wrapper > .azce-v02__chooser {
  clear: both;
  display: grid;
  grid-template-columns: minmax(170px, 1.08fr) repeat(4, minmax(0, 1fr));
  gap: 9px;
  width: 100%;
  margin: 0 0 24px;
  padding: 12px;
  border: 1px solid #e9ece8;
  border-radius: 13px;
  background: #fff;
  box-shadow: 0 4px 16px rgba(33,51,40,.04);
}

html.azce-v02-active .azce-v02__chooser-intro {
  padding: 8px 6px 6px 10px;
  align-self: center;
}

html.azce-v02-active .azce-v02__chooser-intro h2 {
  margin: 0 0 5px;
  font-size: 15px;
  line-height: 1.3;
  font-weight: 800;
}

html.azce-v02-active .azce-v02__chooser-intro p {
  margin: 0;
  font-size: 11px;
  line-height: 1.45;
  color: var(--azce-muted);
}

html.azce-v02-active .azce-v02__chooser-link {
  display: flex;
  align-items: center;
  min-width: 0;
  gap: 9px;
  padding: 11px 9px;
  border: 1px solid #ecefea;
  border-radius: 9px;
  color: #27332a;
  background: #fdfefd;
  text-decoration: none;
  transition: border-color .15s ease, box-shadow .15s ease, transform .15s ease;
}

html.azce-v02-active .azce-v02__chooser-link:hover,
html.azce-v02-active .azce-v02__chooser-link:focus-visible {
  border-color: #f3b288;
  color: #27332a;
  box-shadow: 0 6px 16px rgba(35, 48, 34, .09);
  transform: translateY(-1px);
  text-decoration: none;
}

html.azce-v02-active .azce-v02__chooser-icon { flex-basis: 35px; width: 35px; height: 35px; }
html.azce-v02-active .azce-v02__chooser-link > svg { width: 14px; height: 14px; margin-left: auto; color: #89928a; flex: 0 0 14px; }
html.azce-v02-active .azce-v02__chooser-label strong { font-size: 12px; line-height: 1.3; }
html.azce-v02-active .azce-v02__chooser-label small { font-size: 10px; line-height: 1.25; color: #7b857e; }

html.azce-v02-active #content-wrapper #content .azce-v02__perex-empty { display: none; }

/* In the original main column: advice, quick areas, native subcategories, bestsellers. */
html.azce-v02-active #content-wrapper #content .azce-v02__advice,
html.azce-v02-active #content-wrapper #content .azce-v02__areas {
  clear: both;
  width: 100%;
  margin: 0 0 17px;
  border: 1px solid var(--azce-border);
  background: #fff;
  border-radius: 13px;
  box-shadow: 0 5px 20px rgba(39, 45, 39, .035);
  color: #263029;
}

html.azce-v02-active #content-wrapper #content .azce-v02__advice { padding: 21px 22px; }
html.azce-v02-active #content-wrapper #content .azce-v02__advice h2,
html.azce-v02-active #content-wrapper #content .azce-v02__areas h2 {
  margin: 0 0 8px;
  color: #242a26;
  font-size: 17px;
  font-weight: 800;
  line-height: 1.35;
}

html.azce-v02-active #content-wrapper #content .azce-v02__advice p {
  margin: 0;
  font-size: 13px;
  color: #536057;
  line-height: 1.6;
}

html.azce-v02-active .azce-v02__details {
  margin-top: 9px;
  border: 0;
}

html.azce-v02-active .azce-v02__details summary {
  width: fit-content;
  padding: 5px 0;
  color: #cb610f;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
}

html.azce-v02-active .azce-v02__tips {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
  margin-top: 10px;
  padding-top: 14px;
  border-top: 1px solid #eff1ee;
}

html.azce-v02-active .azce-v02__tip h3 { margin: 0 0 5px; font-size: 12px; font-weight: 800; }
html.azce-v02-active .azce-v02__tip p { font-size: 12px !important; }
html.azce-v02-active .azce-v02__areas { padding: 19px 18px 18px; }
html.azce-v02-active .azce-v02__areas-heading { margin: 0 3px 13px; }
html.azce-v02-active .azce-v02__areas-heading h2 { margin-bottom: 3px !important; }
html.azce-v02-active .azce-v02__areas-heading p { margin: 0; font-size: 11px; color: #78847a; }

html.azce-v02-active .azce-v02__area-cards {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 9px;
}

html.azce-v02-active .azce-v02__area-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
  min-width: 0;
  min-height: 110px;
  padding: 10px 5px;
  border: 1px solid #eef0ec;
  border-radius: 9px;
  background: linear-gradient(160deg, #f6faf4 0%, #fff 100%);
  font-family: inherit;
  color: #25382b;
  cursor: pointer;
}

html.azce-v02-active .azce-v02__area-card:hover,
html.azce-v02-active .azce-v02__area-card:focus-visible {
  border-color: #f4a56b;
  background: #fff9f3;
}

html.azce-v02-active .azce-v02__area-picture { display: flex; align-items: center; justify-content: center; min-height: 43px; color: #559165; }
html.azce-v02-active .azce-v02__area-picture svg { width: 29px; height: 29px; }
html.azce-v02-active .azce-v02__area-card strong { font-size: 11px; font-weight: 800; line-height: 1.2; }
html.azce-v02-active .azce-v02__area-card small { font-size: 10px; color: #78857a; line-height: 1.25; }

/* Adjust ONLY the visual presentation of Shoptet's existing native subcategories. */
html.azce-v02-active #content-wrapper #content ul.subcategories.with-image {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 11px;
  margin: 0 0 25px;
  padding: 0;
}

html.azce-v02-active #content-wrapper #content ul.subcategories.with-image > li {
  float: none;
  display: block;
  width: auto;
  max-width: none;
  margin: 0;
  padding: 0;
}

html.azce-v02-active #content-wrapper #content ul.subcategories.with-image > li > a {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 78px;
  padding: 9px 11px;
  border: 1px solid #e9ece8;
  border-radius: 10px;
  background: #fff;
  box-shadow: 0 4px 12px rgba(34,40,36,.05);
  color: #222a25;
  text-decoration: none;
  transition: border-color .15s ease, box-shadow .15s ease;
}

html.azce-v02-active #content-wrapper #content ul.subcategories.with-image > li > a:hover,
html.azce-v02-active #content-wrapper #content ul.subcategories.with-image > li > a:focus-visible {
  border-color: #f5ba93;
  box-shadow: 0 6px 18px rgba(34,40,36,.09);
}

html.azce-v02-active #content-wrapper #content ul.subcategories.with-image .image {
  position: static;
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 74px;
  width: 74px;
  height: 56px;
  margin: 0;
  padding: 0;
}

html.azce-v02-active #content-wrapper #content ul.subcategories.with-image .image img {
  position: static;
  width: 74px;
  height: 56px;
  max-width: 100%;
  object-fit: contain;
}

html.azce-v02-active #content-wrapper #content ul.subcategories.with-image .text {
  display: block;
  flex: 1 1 auto;
  margin: 0;
  color: #1f2721;
  font-size: 12px;
  font-weight: 750;
  line-height: 1.3;
  text-align: left;
}

@media (max-width: 1240px) {
  html.azce-v02-active #content-wrapper > .azce-v02__chooser {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
  html.azce-v02-active .azce-v02__chooser-intro { grid-column: 1 / -1; }
  html.azce-v02-active .azce-v02__chooser-link { min-height: 65px; }
  html.azce-v02-active .azce-v02__hero-copy { padding-left: 26px; }
}

@media (max-width: 920px) {
  html.azce-v02-active #content-wrapper > .azce-v02__hero { grid-template-columns: minmax(0, 63%) minmax(0, 37%); }
  html.azce-v02-active .azce-v02__features { gap: 12px; }
  html.azce-v02-active .azce-v02__feature-icon { flex-basis: 34px; width: 34px; height: 34px; }
  html.azce-v02-active #content-wrapper #content ul.subcategories.with-image { grid-template-columns: repeat(2,minmax(0,1fr)); }
}

@media (max-width: 760px) {
  html.azce-v02-active #content-wrapper > .azce-v02__hero {
    display: block;
    min-height: 0;
    border-radius: 12px;
  }
  html.azce-v02-active .azce-v02__hero-copy { padding: 25px 16px 18px; }
  html.azce-v02-active .azce-v02__hero-heading h1.category-title { font-size: clamp(25px, 7.4vw, 34px); }
  html.azce-v02-active .azce-v02__intro { max-width: 93%; margin-bottom: 15px; font-size: 13px; }
  html.azce-v02-active .azce-v02__features { gap: 13px 8px; }
  html.azce-v02-active .azce-v02__feature { gap: 7px; }
  html.azce-v02-active .azce-v02__feature strong { font-size: 11px; }
  html.azce-v02-active .azce-v02__feature small { font-size: 10px; }
  html.azce-v02-active .azce-v02__hero-media { min-height: 145px; }
  html.azce-v02-active .azce-v02__hero--image { background-position: center, 64% center !important; }
  html.azce-v02-active .azce-v02__hero--image .azce-v02__hero-media { display: none; }
  html.azce-v02-active #content-wrapper > .azce-v02__chooser {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    margin-bottom: 20px;
    padding: 10px;
  }
  html.azce-v02-active .azce-v02__chooser-intro { padding: 6px; }
  html.azce-v02-active .azce-v02__chooser-link { padding: 9px 6px; }
  html.azce-v02-active .azce-v02__chooser-link > svg { display: none; }
  html.azce-v02-active #content-wrapper #content .azce-v02__advice { padding: 16px; }
  html.azce-v02-active .azce-v02__area-cards { grid-template-columns: repeat(2,minmax(0,1fr)); }
  html.azce-v02-active .azce-v02__tips { grid-template-columns: 1fr; }
}

@media (max-width: 440px) {
  html.azce-v02-active .azce-v02__hero-copy { padding: 22px 13px 15px; }
  html.azce-v02-active .azce-v02__feature-icon { flex-basis: 29px; width: 29px; height: 29px; }
  html.azce-v02-active .azce-v02__feature-icon svg { width: 17px; height: 17px; }
  html.azce-v02-active .azce-v02__exit { top: auto; bottom: 8px; right: 8px; }
  html.azce-v02-active .azce-v02__chooser-icon { display: none; }
  html.azce-v02-active #content-wrapper #content ul.subcategories.with-image { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
  html.azce-v02-active .azce-v02__chooser-link,
  html.azce-v02-active .azce-v02__area-card,
  html.azce-v02-active #content-wrapper #content ul.subcategories.with-image > li > a { transition: none; }
}

/* Preview close action should not obscure content on narrow phones. */
@media (max-width: 440px) {
  html.azce-v02-active .azce-v02__exit {
    position: relative;
    top: auto;
    right: auto;
    bottom: auto;
    display: block;
    width: fit-content;
    margin: 0 10px 10px auto;
  }
}
