/* ΑΡΖΙΝΟΣ: WordPress, Elementor and WooCommerce adjustments on top of the prototype's site.css + pages.css. */

/* WordPress admin bar pushes the fixed header down. */
.admin-bar .site-header { top: 32px; }
@media (max-width: 782px) { .admin-bar .site-header { top: 46px; } }
@media (max-width: 600px) { .admin-bar .site-header { top: 0; } .admin-bar .site-header.is-solid { top: 0; } }
/* Staff see the admin bar: the overlays start under it. */
@media (min-width: 601px) { .admin-bar .qpanel__box { top: 32px; } .admin-bar .drawer, .admin-bar .search { top: 32px; } }
@media (min-width: 601px) and (max-width: 782px) { .admin-bar .qpanel__box, .admin-bar .drawer, .admin-bar .search { top: 46px; } }

/* News filter chips are links here (buttons in the prototype). */
.tabs a { display: inline-flex; align-items: center; min-height: 40px; padding: 0 16px; border-radius: 999px; border: 1px solid var(--rule); font-size: .9rem; }
.tabs a[aria-current] { background: var(--ink); color: var(--inox); border-color: var(--ink); }

/* Labels and version chips on the product page. */
.chip--yolk { background: var(--yolk); color: #111A15; border-color: var(--yolk); }
.chip--pick { position: relative; cursor: pointer; padding: 0; }
.chip--pick input { position: absolute; opacity: 0; inset: 0; cursor: pointer; }
.chip--pick span { display: inline-block; padding: 8px 12px; }
.chip--pick:has(input:checked) { background: var(--ink); color: var(--inox); border-color: var(--ink); }
.chip--pick:has(input:focus-visible) { outline: 2px solid var(--green); outline-offset: 2px; }
.opts--choose { scroll-margin-top: calc(var(--head-h) + 24px); }
.opts__hint { margin: 0; font: .78rem/1.4 var(--f-mono); color: var(--steel); }
.btn[disabled] { opacity: .45; pointer-events: none; }

.pdp__docs { display: flex; flex-wrap: wrap; gap: 18px; }
.pdp__docs a { display: inline-flex; align-items: center; gap: 8px; font-size: .92rem; }
.pdp__docs svg { width: 20px; height: 20px; }
.pdp__certs { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.pdp__certs img { height: 34px; width: auto; }
.pdp__plugins:empty { display: none; }
.pdp__plugins { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }
.pdp__plugins a { display: inline-flex; align-items: center; gap: .5em; font-size: .9rem; text-decoration: underline; text-underline-offset: 3px; }
.pdp__plugins .fa { font-size: 1rem !important; }
.brand-logo img { max-height: 56px; width: auto; }

/* ARZ Product Tabs content: the stored HTML tables, made to fit. */
.prose--tab { max-width: 980px; }
.prose--tab table { width: 100% !important; max-width: 100%; border-collapse: collapse; border: 0; margin: 0 0 1.4em; }
.prose--tab table td, .prose--tab table th { border: 0; border-bottom: 1px solid var(--rule); padding: 10px 12px 10px 0; vertical-align: top; text-align: left; }
.prose--tab table td[colspan] { padding-top: 0; }
.prose--tab table h4 { font: 800 1.4rem/1 var(--f-display); text-transform: uppercase; margin: .4em 0 .6em; }
.prose--tab table td:first-child strong { font-weight: 500; }
.prose--tab iframe, .prose--tab video { width: 100%; aspect-ratio: 16 / 9; height: auto; border: 0; border-radius: var(--radius); }
.prose--tab .pdfemb-viewer { width: 100% !important; }
@media (max-width: 600px) { .prose--tab table, .prose--tab tbody, .prose--tab tr, .prose--tab td { display: block; width: 100% !important; } .prose--tab table td { padding: 6px 0; border-bottom: 0; } .prose--tab table tr { border-bottom: 1px solid var(--rule); padding: 6px 0; } }

/* The card's hover section (card hover spot). On touch screens it is not shown. */
.pcard__hover { position: absolute; left: 0; right: 0; top: 0; aspect-ratio: 1; z-index: 3; display: grid; align-content: end; padding: 12px; pointer-events: none; opacity: 0; transform: translateY(8px); transition: opacity .3s var(--ease), transform .3s var(--ease); }
.pcard__hover > * { pointer-events: auto; }
.pcard:hover .pcard__hover, .pcard:focus-within .pcard__hover { opacity: 1; transform: none; }
@media (hover: none) { .pcard__hover { display: none; } }

/* Phones: sub-category chips in one row that scrolls sideways (newsite categories have many sub-categories). */
@media (max-width: 700px) {
  .subchips { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin-inline: calc(var(--gut) * -1); padding-inline: var(--gut); padding-bottom: 4px; scroll-snap-type: x proximity; scroll-padding-inline: var(--gut); }
  .subchips::-webkit-scrollbar { display: none; }
  .subchips a { flex: none; white-space: nowrap; scroll-snap-align: start; }
}

/* Pages without filters (brands, small categories): the grid takes the full width. */
.shop.shop--nofilters { grid-template-columns: minmax(0, 1fr); }

/* Filters sit in a GET form here (direct children of .filters in the prototype). */
.filters form { display: grid; gap: 22px; }

/* Listing: a soft fade while the grid is being replaced. */
[data-listing].is-loading [data-grid] { opacity: .45; transition: opacity .2s; pointer-events: none; }
.more-wrap a.btn { text-decoration: none; }

/* Category: the full description, folded. */
.about-term { border-top: 1px solid var(--rule); padding-top: 18px; }
.about-term summary { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; cursor: pointer; list-style: none; }
.about-term summary::-webkit-details-marker { display: none; }
.about-term__more { font: .78rem var(--f-mono); color: var(--green); text-decoration: underline; text-underline-offset: 3px; }
.about-term[open] .about-term__more { display: none; }
.about-term .prose { margin-top: 18px; }

/* Spots: Elementor templates inside code-built pages. */
.arz-spot { position: relative; }
.arz-spot--announcement { position: relative; z-index: 95; }
.arz-spot--quote-note { margin-top: 28px; }

/* Forms. */
.hp { position: absolute !important; left: -9999px !important; width: 1px; height: 1px; overflow: hidden; }
.form__status { font: .82rem/1.4 var(--f-mono); color: var(--steel); }

/* Project page. */
.project-facts { display: flex; flex-wrap: wrap; gap: 12px 40px; margin: 8px 0 0; }
.project-facts dd { margin: 4px 0 0; font-size: 1.1rem; }
.project-hero { margin: 0; border-radius: var(--radius); overflow: hidden; }
.project-hero img { width: 100%; max-height: 78vh; object-fit: cover; }
.project-gallery { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(12px, 1.6vw, 24px); margin-top: 40px; }
.project-gallery figure { margin: 0; border-radius: var(--radius); overflow: hidden; }
.project-gallery img { width: 100%; height: 100%; object-fit: cover; aspect-ratio: 4 / 3; }
@media (max-width: 700px) { .project-gallery { grid-template-columns: 1fr; } }

/* Search results page and plain pages. */
.search-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.prose--page { margin-inline: auto; }
.navigation.pagination { margin-top: 48px; }
.navigation.pagination .nav-links { display: flex; flex-wrap: wrap; gap: 8px; }
.navigation.pagination .page-numbers { display: inline-grid; place-items: center; min-width: 40px; min-height: 40px; padding: 0 12px; border: 1px solid var(--rule); border-radius: 999px; font: .8rem var(--f-mono); }
.navigation.pagination .page-numbers.current { background: var(--ink); color: var(--inox); border-color: var(--ink); }

/* Elementor Pro Theme Builder header built from our widgets: its outer container has id + class «site-header».
   The widgets' wrappers must not become the positioning box of the mega menu, and the row keeps the header height. */
.e-con.site-header { --padding-top: 0px; --padding-bottom: 0px; min-height: 0; }
.e-con.site-header > .e-con-inner, .e-con.site-header.e-con-full { height: var(--head-h); align-items: center; flex-wrap: nowrap; }
.e-con.site-header .elementor-element, .e-con.site-header .e-con { position: static; }
.e-con.site-header .elementor-widget-arz-mega-menu { flex: 1 1 auto; }
.e-con.site-header .elementor-widget-arz-header-actions { margin-left: auto; }
.e-con.site-header .elementor-widget-arz-logo .brand img { height: auto; }
.elementor-widget-arz-footer .site-footer { margin: 0; }

/* Elementor pages: no gap above the first section; the theme's own page heads keep theirs. */
.arz-elementor > .elementor { margin: 0; }
.elementor-location-header, .elementor-location-footer { position: relative; }

/* WooCommerce notices, if any plugin prints one. */
.woocommerce-notices-wrapper:empty { display: none; }
.woocommerce-message, .woocommerce-info, .woocommerce-error { max-width: var(--maxw, 1440px); margin: 16px auto; padding: 14px 18px; border-left: 3px solid var(--green); background: var(--plate); list-style: none; }