/* Border-box for every component we ship (fixes width:100% + padding overflow, RTL). */ :where(.alzar-products,.alzar-cats,.alzar-slider,.alzar-services,.alzar-svcpage,.alzar-contact,.alzar-search,.alzar-pdp,.az-drawer,.az-bar,.az-toast,.az-qty,.az-cartbtn,.alzar-pager) *, :where(.alzar-products,.alzar-cats,.alzar-slider,.alzar-services,.alzar-svcpage,.alzar-contact,.alzar-search,.alzar-pdp,.az-drawer,.az-bar,.az-toast,.az-qty,.az-cartbtn,.alzar-pager) { box-sizing: border-box; } /* Alzar Core: quick-cart UI. Uses the theme's tokens when present, sensible fallbacks otherwise. */ :root { --az-c-navy: var(--az-navy, #222D65); --az-c-green: var(--az-green, #1A994A); --az-c-green-deep: var(--az-green-deep, #137A3A); --az-c-mint: var(--az-mint, #E6F4EB); --az-c-line: var(--az-line, #E3E6F0); --az-c-ink: var(--az-ink, #141A3D); --az-c-muted: var(--az-muted, #5A6187); --az-c-surface: var(--az-surface, #FFFFFF); --az-c-sale: var(--az-sale, #D93A3A); --az-c-spring: cubic-bezier(.34,1.56,.64,1); } /* ---------- Product grid / row (mobile first) ---------- Grid: 2 cols phone → 3 → 4 → 5/6 desktop. "columns" block setting overrides desktop. Row: horizontal swipe with a peek of the next card; arrows appear on desktop only. */ .alzar-products { position: relative; --az-gap: .75rem; } .alzar-products__head { display: flex; align-items: end; justify-content: space-between; gap: 1rem; margin-bottom: 1rem; } .alzar-products__title { margin: 0; font-size: clamp(1.25rem, 2.6vw, 1.75rem); font-weight: 800; color: var(--az-c-navy); line-height: 1.25; } .alzar-products__sub { margin: .25rem 0 0; color: var(--az-c-muted); font-size: .9375rem; } .alzar-products__more { display: inline-flex; align-items: center; gap: .25rem; font-weight: 700; color: var(--az-c-green-deep); text-decoration: none; white-space: nowrap; padding: .4rem .8rem; border-radius: 999px; background: var(--az-c-mint); font-size: .875rem; transition: background .2s; } .alzar-products__more:hover { background: color-mix(in srgb, var(--az-c-green) 18%, var(--az-c-mint)); } .alzar-products__empty { color: var(--az-c-muted); } .alzar-products .alzar-products__track { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--az-gap); margin: 0; padding: 0; } .alzar-products__cell { min-width: 0; margin: 0 !important; } @media (min-width: 600px) { .alzar-products { --az-gap: 1rem; } .alzar-products .alzar-products__track { grid-template-columns: repeat(3, minmax(0, 1fr)); } } @media (min-width: 900px) { .alzar-products .alzar-products__track { grid-template-columns: repeat(4, minmax(0, 1fr)); } } @media (min-width: 1100px) { .alzar-products .alzar-products__track { grid-template-columns: repeat(5, minmax(0, 1fr)); } } @media (min-width: 1280px) { .alzar-products .alzar-products__track { grid-template-columns: repeat(6, minmax(0, 1fr)); } } @media (min-width: 1100px) { .alzar-products.has-cols .alzar-products__track { grid-template-columns: repeat(var(--az-cols), minmax(0, 1fr)); } } .alzar-products--row { --az-k: 2.25; } .alzar-products__rail { position: relative; } .alzar-products.alzar-products--row .alzar-products__track { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: calc((100% - (var(--az-k) - 1) * var(--az-gap)) / var(--az-k)); overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scroll-padding-inline: 2px; padding: 4px 2px 12px; margin: -4px -2px 0; scrollbar-width: none; } .alzar-products--row .alzar-products__track::-webkit-scrollbar { display: none; } .alzar-products--row .alzar-products__cell { scroll-snap-align: start; } @media (min-width: 600px) { .alzar-products--row { --az-k: 3.3; } } @media (min-width: 900px) { .alzar-products--row { --az-k: 4.4; } } @media (min-width: 1100px) { .alzar-products--row { --az-k: 5; } } @media (min-width: 1280px) { .alzar-products--row { --az-k: 6; } } .alzar-products__arrow { all: unset; box-sizing: border-box; position: absolute; top: 34%; z-index: 3; width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; cursor: pointer; background: var(--az-c-surface); color: var(--az-c-navy); box-shadow: 0 10px 24px -10px rgba(20,26,61,.45), 0 0 0 1px var(--az-c-line); transition: transform .2s var(--az-c-spring), opacity .2s; } .alzar-products__arrow:hover { transform: scale(1.06); } .alzar-products__arrow:focus-visible { outline: 3px solid var(--az-c-green); outline-offset: 2px; } .alzar-products__arrow.is-prev { inset-inline-start: -14px; } .alzar-products__arrow.is-next { inset-inline-end: -14px; } .alzar-products__arrow[disabled] { opacity: 0; pointer-events: none; } @media (max-width: 899px), (hover: none) { .alzar-products__arrow { display: none !important; } } /* ---------- Product card ---------- */ .az-card { position: relative; background: var(--az-c-surface); border: 1px solid var(--az-c-line); border-radius: 20px; padding: 6px; height: 100%; display: flex; flex-direction: column; transition: box-shadow .3s var(--az-c-spring), transform .3s var(--az-c-spring), border-color .2s; } @media (hover: hover) { .az-card:hover { box-shadow: 0 18px 40px -22px rgba(20,26,61,.38); transform: translateY(-3px); border-color: color-mix(in srgb, var(--az-c-green) 25%, var(--az-c-line)); } .az-card:hover .az-card__img { transform: scale(1.04); } } .az-card.is-out { opacity: .62; } .az-card__media { position: relative; border-radius: 15px; /* v7.2.2 (owner request): خلفية بيضاء ناصعة — الصور اللي مش بتملى المساحة بتندمج مع الخلفية في شكل واحد نضيف */ background: #FFFFFF; aspect-ratio: 1; overflow: hidden; } .az-card__imglink { display: block; height: 100%; } .az-card__img { width: 100%; height: 100%; object-fit: contain; padding: 9%; transition: transform .4s var(--az-c-spring); } .az-card__badge { position: absolute; top: 8px; inset-inline-start: 8px; background: var(--az-c-sale); color: #fff; font: 700 .75rem/1 var(--az-num, inherit); padding: .38rem .55rem; border-radius: 999px; letter-spacing: .01em; box-shadow: 0 4px 10px -4px rgba(217,58,58,.6); } .az-card__body { padding: .65rem .4rem .35rem; display: flex; flex-direction: column; gap: .25rem; flex: 1; min-width: 0; } .az-card__cat { font-size: .75rem; color: var(--az-c-green-deep); font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .az-card__title { margin: 0; font-size: .9375rem; line-height: 1.45; font-weight: 600; min-height: 2.9em; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .az-card__title a { color: var(--az-c-ink); text-decoration: none; } .az-card__title a:hover { color: var(--az-c-navy); } .az-card__price { display: flex; align-items: baseline; gap: .15rem .5rem; margin-top: auto; padding-top: .35rem; flex-wrap: wrap; } .az-price__now { font-weight: 700; font-size: 1.125rem; color: var(--az-c-navy); white-space: nowrap; } .az-price__now .alzar-num { font-weight: 700; } .az-price__now small { font-size: .75em; font-weight: 500; color: var(--az-c-muted); } .az-price__was { color: var(--az-c-muted); font-size: .8125rem; white-space: nowrap; } @media (min-width: 600px) { .az-card { padding: 8px; } .az-card__title { font-size: .975rem; } .az-price__now { font-size: 1.1875rem; } } /* ---------- Quantity control on the card (R7) ---------- Lives in .az-card__buy UNDER the price, so it never covers the product image. Off: one full-width green button [+ أضف للسلة]. On: a mint pill [ − qty + ] of the SAME height (44px), so the card never jumps and every card in a row keeps the same height. DOM order: minus, qty, plus (keep in sync with products.php / cart.js). Base .az-qty__btn is also used by the drawer lines. */ .az-qty__btn { all: unset; box-sizing: border-box; width: 44px; height: 44px; display: grid; place-items: center; cursor: pointer; background: var(--az-c-green); color: #fff; border-radius: 999px; flex-shrink: 0; position: relative; transition: transform .2s var(--az-c-spring), background .2s; } .az-qty__btn:hover { background: var(--az-c-green-deep); } .az-qty__btn:active { transform: scale(.94); } .az-qty__btn:focus-visible { outline: 3px solid var(--az-c-navy); outline-offset: 2px; } .az-qty__btn svg { pointer-events: none; } .az-qty .az-qty__minus, .az-qty .az-qty__n, .az-qty__label { display: none; } .az-card__buy { margin-top: .55rem; } .az-card__buy .az-qty { position: relative; display: flex; align-items: center; justify-content: space-between; gap: 4px; width: 100%; height: 44px; border-radius: 999px; text-decoration: none; } .az-card__buy .az-qty__plus { width: 100%; display: flex; align-items: center; justify-content: center; gap: .35rem; box-shadow: 0 8px 18px -10px color-mix(in srgb, var(--az-c-green) 80%, transparent); } .az-card__buy .az-qty__label { display: inline; font-size: .875rem; font-weight: 700; line-height: 1; white-space: nowrap; } .az-card__buy .az-qty.is-on { background: var(--az-c-mint); padding: 4px; } .az-card__buy .az-qty.is-on .az-qty__btn { width: 36px; height: 36px; box-shadow: none; } .az-card__buy .az-qty.is-on .az-qty__label { display: none; } .az-card__buy .az-qty.is-on .az-qty__minus { display: grid; background: var(--az-c-surface); color: var(--az-c-green-deep); animation: az-pop .3s var(--az-c-spring); } .az-card__buy .az-qty.is-on .az-qty__minus:hover { background: color-mix(in srgb, var(--az-c-green) 14%, var(--az-c-surface)); } .az-card__buy .az-qty.is-on .az-qty__n { display: block; flex: 1; text-align: center; font: 700 1rem/1 var(--az-num, inherit); color: var(--az-c-ink); animation: az-pop .3s var(--az-c-spring); } .az-qty.is-loading { pointer-events: none; } .az-qty.is-loading .az-qty__plus svg, .az-qty.is-loading .az-qty__label { opacity: 0; } .az-qty.is-loading .az-qty__plus::after { content: ""; position: absolute; inset: 0; margin: auto; width: 16px; height: 16px; border: 2px solid #fff; border-top-color: transparent; border-radius: 50%; animation: az-spin .7s linear infinite; } .az-qty--link .az-qty__btn { background: var(--az-c-navy); box-shadow: 0 8px 18px -10px rgba(20,26,61,.6); } .az-qty--link .az-qty__btn:hover { background: var(--az-c-ink); } .az-card__soldout { display: grid; place-items: center; height: 44px; background: var(--az-c-line); color: var(--az-c-ink); font-size: .8125rem; font-weight: 700; border-radius: 999px; } @keyframes az-spin { to { transform: rotate(360deg); } } @keyframes az-pop { from { opacity: 0; transform: scale(.6); } to { opacity: 1; transform: none; } } .az-ico { display: block; } /* ---------- Header cart button ---------- */ .az-cartbtn { all: unset; box-sizing: border-box; display: inline-flex; align-items: center; gap: .55rem; cursor: pointer; min-height: 46px; padding-block: 4px; padding-inline: 4px 1rem; border-radius: 999px; background: var(--az-c-navy); color: #fff; font-weight: 700; transition: background .2s, transform .2s var(--az-c-spring); } .az-cartbtn:hover { background: color-mix(in srgb, var(--az-c-navy) 88%, #000); } .az-cartbtn:active { transform: scale(.97); } .az-cartbtn:focus-visible { outline: 3px solid var(--az-c-green); outline-offset: 3px; } .az-cartbtn__ico { position: relative; width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center; background: rgba(255,255,255,.14); } .az-cartbtn__count { position: absolute; top: -5px; inset-inline-end: -5px; min-width: 20px; height: 20px; padding: 0 5px; box-sizing: border-box; border-radius: 999px; background: var(--az-c-green); color: #fff; display: grid; place-items: center; font: 700 .75rem/1 var(--az-num, inherit); box-shadow: 0 0 0 2px var(--az-c-navy); } .az-cartbtn__label { font-size: .9375rem; line-height: 1; } .az-cartbtn.is-bump .az-cartbtn__count { animation: az-bump .5s var(--az-c-spring); } @keyframes az-bump { 0% { transform: scale(.6); } 60% { transform: scale(1.25); } 100% { transform: scale(1); } } @media (max-width: 600px) { .az-cartbtn__label { display: none; } .az-cartbtn { padding-inline: 4px; } } .az-cartbtn-editor { font-weight: 600; } .az-acct { display: inline-flex; align-items: center; gap: .4rem; min-height: 44px; color: var(--az-c-navy); text-decoration: none; padding: 0 .7rem; border-radius: 999px; font-weight: 600; transition: background .2s; } .az-acct:hover { background: var(--az-c-mint); } @media (max-width: 600px) { .az-acct__label { display: none; } .az-acct { padding: 0; width: 44px; justify-content: center; } } /* ---------- Drawer ---------- */ body.az-lock { overflow: hidden; } .az-drawer { position: fixed; inset: 0; z-index: 10000; } .az-drawer[hidden] { display: none; } .az-drawer__scrim { position: absolute; inset: 0; background: rgba(12,16,40,.5); opacity: 0; transition: opacity .28s; backdrop-filter: blur(2px); } .az-drawer__panel { position: absolute; top: 0; bottom: 0; inset-inline-end: 0; width: min(440px, 100%); background: var(--az-c-surface); display: flex; flex-direction: column; box-shadow: -20px 0 60px -20px rgba(0,0,0,.4); transform: translateX(-102%); transition: transform .34s var(--az-c-spring); } [dir="ltr"] .az-drawer__panel { transform: translateX(102%); } .az-drawer.is-open .az-drawer__panel { transform: none; } .az-drawer.is-open .az-drawer__scrim { opacity: 1; } .az-drawer__head { display: flex; align-items: center; gap: .65rem; padding: 1.1rem 1.25rem; border-bottom: 1px solid var(--az-c-line); } .az-drawer__head h2 { margin: 0; margin-inline-end: auto; font-size: 1.25rem; font-weight: 800; color: var(--az-c-navy); } /* Brand mark in the drawer (session 7, #9): comes from alzar_core_logo_url(), hidden when there is none. */ .az-drawer__logo { width: 36px; height: 36px; object-fit: contain; border-radius: 10px; flex-shrink: 0; } .az-drawer__count { color: var(--az-c-muted); font-weight: 600; } .az-iconbtn { all: unset; box-sizing: border-box; width: 44px; height: 44px; display: grid; place-items: center; border-radius: 999px; cursor: pointer; background: #F2F4FA; color: var(--az-c-navy); } .az-iconbtn:focus-visible { outline: 3px solid var(--az-c-green); } .az-drawer__meter { padding: 1rem 1.25rem; border-bottom: 1px solid var(--az-c-line); background: var(--az-c-mint); } .az-drawer__meter-txt { display: block; font-weight: 700; font-size: .9375rem; color: var(--az-c-green-deep); margin-bottom: .5rem; } .az-drawer__meter-bar { display: block; height: 8px; border-radius: 999px; background: rgba(255,255,255,.8); overflow: hidden; } .az-drawer__meter-bar i { display: block; height: 100%; width: 0; background: var(--az-c-green); border-radius: 999px; transition: width .6s var(--az-c-spring); } .az-drawer__list { list-style: none; margin: 0; padding: .5rem 1.25rem; overflow-y: auto; flex: 1; } .az-line { display: grid; grid-template-columns: 72px 1fr; gap: .9rem; padding: .9rem 0; border-bottom: 1px solid var(--az-c-line); } .az-line__img { background: #FFFFFF; border-radius: 14px; aspect-ratio: 1; display: grid; place-items: center; overflow: hidden; border: 1px solid var(--az-c-line); } .az-line__img img { width: 100%; height: 100%; object-fit: contain; padding: 6px; } .az-line__name { font-weight: 600; color: var(--az-c-ink); text-decoration: none; line-height: 1.4; } .az-line__price { margin-top: .25rem; color: var(--az-c-navy); font-weight: 700; } .az-line__ctrl { display: flex; align-items: center; gap: .5rem; margin-top: .5rem; } .az-line__ctrl .az-qty__btn { width: 36px; height: 36px; font-size: 1.25rem; line-height: 1; } .az-line__ctrl .az-qty__n { min-width: 24px; } .az-line__rm { all: unset; cursor: pointer; margin-inline-start: auto; color: var(--az-c-sale); font-size: .875rem; font-weight: 600; padding: .4rem; } .az-line__rm:focus-visible { outline: 2px solid var(--az-c-sale); } .az-drawer__empty { padding: 2rem 1.25rem; color: var(--az-c-muted); text-align: center; } .az-drawer__foot { padding: 1rem 1.25rem 1.25rem; border-top: 1px solid var(--az-c-line); display: grid; gap: .6rem; background: var(--az-c-surface); } .az-drawer__total { display: flex; justify-content: space-between; align-items: baseline; font-weight: 700; color: var(--az-c-ink); } .az-drawer__total strong { font-size: 1.375rem; color: var(--az-c-navy); } .az-drawer__viewcart { text-align: center; color: var(--az-c-muted); font-weight: 600; font-size: .9375rem; } /* Buttons */ .az-btn { display: inline-flex; align-items: center; justify-content: center; min-height: 54px; padding: 0 1.5rem; border-radius: 999px; background: var(--az-c-green); color: #fff !important; font-weight: 800; text-decoration: none; transition: background .2s, transform .2s var(--az-c-spring); } .az-btn:hover { background: var(--az-c-green-deep); } .az-btn:active { transform: scale(.98); } .az-btn--block { width: 100%; } .az-btn--wa { gap: .5rem; background: #1FA855; } .az-btn--wa:hover { background: #178A45; } .az-btn--wa svg { flex-shrink: 0; } .az-btn--wa.is-disabled { opacity: .5; pointer-events: none; } .az-btn--ghost { background: transparent; color: var(--az-c-navy) !important; border: 1.5px solid var(--az-c-line); min-height: 48px; } .az-btn--ghost:hover { background: var(--az-c-mint); } /* ---------- Sticky cart bar (mobile) ---------- */ .az-bar { position: fixed; z-index: 9000; inset-inline: 12px; bottom: max(12px, env(safe-area-inset-bottom)); display: flex; align-items: center; gap: .75rem; background: var(--az-c-navy); color: #fff; text-decoration: none; border-radius: 999px; padding: .5rem .5rem .5rem .6rem; box-shadow: 0 16px 40px -12px rgba(20,26,61,.6); transform: translateY(0); transition: transform .4s var(--az-c-spring), opacity .3s; } .az-bar[hidden] { display: none; } .az-bar__ico { position: relative; width: 44px; height: 44px; border-radius: 50%; background: rgba(255,255,255,.12); display: grid; place-items: center; } /* v7: the badge owns its colour — the global link hover/active rule (theme.json paints links green) used to reach the number through inheritance and green-on- green made the count vanish on hover/tap. Physical offsets, not logical ones, so older mobile browsers position the badge correctly too. */ .az-bar__ico b { position: absolute; top: -3px; left: -3px; min-width: 20px; height: 20px; padding: 0 5px; border-radius: 999px; background: var(--az-c-green); color: #fff !important; font: 800 .75rem/20px var(--az-num, inherit); text-align: center; } .az-bar:hover, .az-bar:active, .az-bar:focus-visible { color: #fff; } .az-bar:hover .az-bar__ico, .az-bar:active .az-bar__ico { background: rgba(255,255,255,.22); } .az-bar__txt { flex: 1; font-weight: 700; } .az-bar strong { background: #fff; color: var(--az-c-navy); padding: .6rem 1rem; border-radius: 999px; font-weight: 800; } /* v7.1: the sticky bar must never sit OVER an open overlay — the mobile menu drawer and the luck register modal both cover the full screen, so the bar steps aside while either of them is open (WP adds .has-modal-open for the nav overlay; the luck modal adds body.az-lock). Fallback for browsers without :has() is the body class alone. */ body.has-modal-open .az-bar, body.az-lock .az-bar, body:has(.wp-block-navigation__responsive-container.is-menu-open) .az-bar { display: none; } @media (min-width: 782px) { .az-bar { inset-inline: auto 24px; width: 340px; } } /* ---------- Toast ---------- */ .az-toast { position: fixed; z-index: 10001; inset-inline: 0; bottom: 92px; margin-inline: auto; width: max-content; max-width: calc(100% - 32px); background: var(--az-c-ink); color: #fff; padding: .7rem 1.1rem; border-radius: 999px; font-weight: 600; opacity: 0; transform: translateY(12px); transition: opacity .25s, transform .35s var(--az-c-spring); pointer-events: none; } .az-toast.is-on { opacity: 1; transform: none; } /* ---------- Hero slider ---------- */ .alzar-slider { position: relative; overflow: hidden; border-radius: 32px; } .alzar-slider__track { display: flex; transition: transform .6s var(--az-c-spring); will-change: transform; } .alzar-slider > .alzar-slider__track > .wp-block-cover, .alzar-slider .alzar-slide { flex: 0 0 100%; } .alzar-slider__nav { position: absolute; inset-inline: 16px; bottom: 16px; display: flex; align-items: center; justify-content: center; gap: .6rem; pointer-events: none; } .alzar-slider__btn { all: unset; pointer-events: auto; width: 40px; height: 40px; border-radius: 999px; display: grid; place-items: center; background: rgba(255,255,255,.2); color: #fff; cursor: pointer; backdrop-filter: blur(6px); } .alzar-slider__btn:focus-visible { outline: 3px solid #fff; } .alzar-slider__dots { display: flex; gap: 6px; pointer-events: auto; } .alzar-slider__dot { all: unset; width: 8px; height: 8px; border-radius: 999px; background: rgba(255,255,255,.45); cursor: pointer; transition: width .35s var(--az-c-spring), background .2s; } .alzar-slider__dot[aria-selected="true"] { width: 28px; background: #fff; } .alzar-slider__dot:focus-visible { outline: 2px solid #fff; outline-offset: 3px; } @media (max-width: 781px) { .alzar-slider__nav .alzar-slider__btn { display: none; } } /* ---------- Category rail (mobile: swipe tiles, desktop: one tidy grid) ---------- */ .alzar-cats .alzar-products__title { margin-bottom: 1rem; } .alzar-cats__list { list-style: none; margin: 0 -2px; padding: 2px 2px 10px; display: grid; grid-auto-flow: column; grid-auto-columns: 92px; gap: .6rem; overflow-x: auto; scroll-snap-type: x proximity; scrollbar-width: none; overscroll-behavior-x: contain; } .alzar-cats__list::-webkit-scrollbar { display: none; } .alzar-cats__list > li { scroll-snap-align: start; min-width: 0; } .alzar-cats__item { height: 100%; box-sizing: border-box; display: flex; flex-direction: column; align-items: center; text-align: center; gap: .45rem; padding: .7rem .4rem; border-radius: 18px; background: var(--az-c-surface); border: 1px solid var(--az-c-line); color: var(--az-c-ink); text-decoration: none; font-weight: 600; transition: transform .25s var(--az-c-spring), border-color .2s, background .2s, box-shadow .2s; } .alzar-cats__item:hover { transform: translateY(-2px); border-color: color-mix(in srgb, var(--az-c-green) 45%, var(--az-c-line)); background: var(--az-c-mint); } .alzar-cats__item:focus-visible { outline: 3px solid var(--az-c-green); outline-offset: 2px; } .alzar-cats__ico { width: 48px; height: 48px; border-radius: 16px; background: var(--az-cat, var(--az-c-mint)); color: var(--az-c-green-deep); display: grid; place-items: center; flex-shrink: 0; transition: background .2s; } .alzar-cats__item:hover .alzar-cats__ico { background: var(--az-c-surface); } .alzar-cats__name { font-size: .8125rem; line-height: 1.3; } .alzar-cats__count { display: none; } .alzar-cats__img { width: 100%; height: 100%; object-fit: cover; display: block; } .alzar-cats__ico:has(.alzar-cats__img) { padding: 0; overflow: hidden; } .alzar-cats__item.is-all { background: var(--az-c-ink, #1d2327); color: #fff; border-color: transparent; } .alzar-cats__item.is-all .alzar-cats__ico { background: rgba(255,255,255,.14); color: #fff; } .alzar-cats__item.is-all:hover { background: var(--az-c-green-deep, #0f6e37); } .alzar-cats__item.is-active { border-color: var(--az-c-green); box-shadow: 0 0 0 2px var(--az-c-green) inset; } .alzar-cats.is-sub .alzar-cats__list { grid-auto-columns: auto; } .alzar-cats__item.is-chip { flex-direction: row; text-align: start; gap: .5rem; padding: .45rem .8rem .45rem .5rem; border-radius: 999px; font-size: .875rem; white-space: nowrap; } .alzar-cats__item.is-chip .alzar-cats__ico { width: 32px; height: 32px; border-radius: 50%; } .alzar-cats__item.is-chip .alzar-cats__name { font-size: .875rem; } .alzar-cats__item.is-head { flex-direction: row; text-align: start; gap: .75rem; padding: .6rem .8rem; border-radius: 18px; } .alzar-cats__head { margin: 0; } .alzar-cats__head .alzar-cats__name { font-size: 1rem; font-weight: 700; } .alzar-cats__group { display: grid; gap: .75rem; padding: 1rem; border: 1px solid var(--az-c-line); border-radius: 22px; background: var(--az-c-surface); } .alzar-cats__chips { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: .5rem; } .alzar-cats__chips > li { min-width: 0; } .alzar-cats.is-tree .alzar-cats__list { display: none; } .alzar-cats.is-tree { display: grid; gap: 1rem; } .alzar-cats.is-sub .alzar-cats__item.is-chip { background: var(--az-c-surface); } @media (max-width: 899px) { .alzar-cats.is-sub .alzar-cats__list { display: flex; flex-wrap: nowrap; overflow-x: auto; gap: .5rem; padding: 2px 2px 8px; scrollbar-width: none; } .alzar-cats.is-sub .alzar-cats__list > li { flex: 0 0 auto; } .alzar-cats.is-sub .alzar-cats__list::-webkit-scrollbar { display: none; } } @media (min-width: 900px) { .alzar-cats.is-sub .alzar-cats__list { display: flex; flex-wrap: wrap; gap: .5rem; } .alzar-cats.is-sub .alzar-cats__item.is-chip .alzar-cats__ico { width: 28px; height: 28px; } .alzar-cats__group { grid-template-columns: minmax(180px, 240px) 1fr; align-items: start; } } @media (min-width: 900px) { .alzar-cats__list { grid-auto-flow: row; grid-auto-columns: auto; grid-template-columns: repeat(auto-fit, minmax(max(150px, calc((100% - 7 * .75rem) / 8)), 1fr)); gap: .75rem; overflow: visible; padding: 0; margin: 0; } .alzar-cats__item { flex-direction: row; text-align: start; gap: .65rem; padding: .7rem .8rem; } .alzar-cats__ico { width: 44px; height: 44px; border-radius: 14px; } .alzar-cats__name { flex: 1; font-size: .9375rem; } .alzar-cats__count { display: inline-grid; place-items: center; min-width: 26px; height: 22px; padding: 0 6px; border-radius: 999px; background: var(--az-c-mint); color: var(--az-c-green-deep); font: 700 .75rem/1 var(--az-num, inherit); } } /* ---------- Motion + reduced motion ---------- */ /* ---------- Services (session 6, task #10): cards, single page hero, steps ---------- Tint per service: --az-svc (meta alzar_svc_color), default = mint. Phone: 1 column, then 2 / 3 / 4. */ .alzar-services { --az-svc-gap: .875rem; } .alzar-services__grid { --az-svc-gap: .875rem; display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--az-svc-gap, .875rem); margin: 0; padding: 0; } .alzar-services__cell { min-width: 0; margin: 0 !important; } @media (min-width: 600px) { .alzar-services, .alzar-services__grid { --az-svc-gap: 1rem; } .alzar-services__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (min-width: 960px) { .alzar-services__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } } @media (min-width: 1240px) { .alzar-services:not(.is-related) .alzar-services__grid, .alzar-services__grid.is-page { grid-template-columns: repeat(4, minmax(0, 1fr)); } } @media (min-width: 960px) { .alzar-services.has-cols .alzar-services__grid { grid-template-columns: repeat(var(--az-svc-cols), minmax(0, 1fr)); } } .alzar-svc { --az-svc-tint: var(--az-svc, var(--az-c-mint)); position: relative; height: 100%; display: flex; flex-direction: column; gap: .55rem; padding: 1.1rem; background: var(--az-c-surface); border: 1px solid var(--az-c-line); border-radius: 22px; overflow: hidden; isolation: isolate; transition: box-shadow .3s var(--az-c-spring), transform .3s var(--az-c-spring), border-color .2s; } .alzar-svc::before { content: ""; position: absolute; z-index: -1; inset-block-start: -40%; inset-inline-end: -30%; width: 70%; aspect-ratio: 1; border-radius: 50%; background: radial-gradient(closest-side, color-mix(in srgb, var(--az-svc-tint) 85%, transparent), transparent); opacity: .8; pointer-events: none; } @media (hover: hover) { .alzar-svc:hover { transform: translateY(-3px); box-shadow: 0 20px 44px -26px rgba(20,26,61,.42); border-color: color-mix(in srgb, var(--az-c-green) 28%, var(--az-c-line)); } } .alzar-svc__top { display: flex; align-items: flex-start; justify-content: space-between; gap: .5rem; } .alzar-svc__icon { display: grid; place-items: center; width: 54px; height: 54px; flex-shrink: 0; border-radius: 16px; background: var(--az-svc-tint, var(--az-c-mint)); color: var(--az-c-green-deep); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--az-c-green) 12%, transparent); } .alzar-svc__icon.is-lg { width: 72px; height: 72px; border-radius: 22px; } .alzar-svc__badge { display: inline-block; font-size: .75rem; font-weight: 700; line-height: 1; padding: .42rem .7rem; border-radius: 999px; background: var(--az-c-navy); color: #fff; white-space: nowrap; } .alzar-svc__title { margin: .25rem 0 0; font-size: 1.125rem; line-height: 1.35; font-weight: 800; } .alzar-svc__title a { color: var(--az-c-navy); text-decoration: none; } .alzar-svc__title a::after { content: ""; position: absolute; inset: 0; z-index: 0; } /* whole card is clickable */ .alzar-svc__text { margin: 0; color: var(--az-c-muted); font-size: .9375rem; line-height: 1.6; } .alzar-svc__list { list-style: none; margin: .1rem 0 0; padding: 0; display: grid; gap: .35rem; font-size: .875rem; color: var(--az-c-ink); } .alzar-svc__list li { display: flex; align-items: flex-start; gap: .45rem; line-height: 1.5; } .alzar-svc__list .az-ico { flex-shrink: 0; margin-top: .15em; color: var(--az-c-green); } .alzar-svc__list.is-lg { font-size: 1rem; gap: .55rem; margin: .5rem 0 1.1rem; } .alzar-svc__foot { display: flex; align-items: center; justify-content: space-between; gap: .5rem; margin-top: auto; padding-top: .6rem; flex-wrap: wrap; position: relative; z-index: 1; } .alzar-svc__more { display: inline-flex; align-items: center; gap: .2rem; font-weight: 700; font-size: .875rem; color: var(--az-c-green-deep); text-decoration: none; } .alzar-svc__btn { display: inline-flex; align-items: center; justify-content: center; gap: .45rem; min-height: 48px; padding: 0 1.25rem; border-radius: 999px; font-weight: 700; font-size: 1rem; text-decoration: none; color: #fff; background: var(--az-c-green); box-shadow: 0 10px 22px -12px color-mix(in srgb, var(--az-c-green) 85%, transparent); transition: background .2s, transform .2s var(--az-c-spring); position: relative; z-index: 1; } .alzar-svc__btn:hover { background: var(--az-c-green-deep); color: #fff; } .alzar-svc__btn:active { transform: scale(.97); } .alzar-svc__btn:focus-visible, .alzar-svc__more:focus-visible, .alzar-svc__title a:focus-visible { outline: 3px solid var(--az-c-navy); outline-offset: 2px; border-radius: 999px; } .alzar-svc__btn.is-tel, .alzar-svc__btn.is-link { background: var(--az-c-navy); box-shadow: 0 10px 22px -12px rgba(20,26,61,.6); } .alzar-svc__btn.is-tel:hover, .alzar-svc__btn.is-link:hover { background: var(--az-c-ink); } .alzar-svc__btn.is-small { min-height: 40px; padding: 0 .95rem; font-size: .875rem; } .alzar-svc-hero { --az-svc-tint: var(--az-svc, var(--az-c-mint)); display: grid; gap: 1rem; align-items: start; padding: 1.25rem; margin-block: .5rem 1.75rem; border-radius: 26px; background: linear-gradient(150deg, color-mix(in srgb, var(--az-svc-tint) 70%, #fff) 0%, var(--az-c-surface) 75%); border: 1px solid var(--az-c-line); } .alzar-svc-hero .alzar-svc__icon { background: var(--az-c-surface); } .alzar-svc-hero__lead { margin: .5rem 0 0; font-size: clamp(1.0625rem, 2.2vw, 1.3125rem); line-height: 1.6; color: var(--az-c-ink); font-weight: 600; } @media (min-width: 720px) { .alzar-svc-hero { grid-template-columns: auto 1fr; gap: 1.5rem; padding: 2rem; } } .alzar-svc-steps { margin-block: 2rem; } .alzar-svc-steps h2 { font-size: clamp(1.25rem, 2.6vw, 1.625rem); color: var(--az-c-navy); margin: 0 0 1rem; } .alzar-svc-steps ol { list-style: none; margin: 0; padding: 0; display: grid; gap: .75rem; counter-reset: azstep; } @media (min-width: 720px) { .alzar-svc-steps ol { grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); } } .alzar-svc-steps li { counter-increment: azstep; display: flex; gap: .75rem; align-items: flex-start; padding: 1rem; border-radius: 18px; background: var(--az-c-surface); border: 1px solid var(--az-c-line); line-height: 1.55; } .alzar-svc-steps li::before { content: counter(azstep); flex-shrink: 0; display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: var(--az-c-green); color: #fff; font: 700 1rem/1 var(--az-num, inherit); } .alzar-svc-cta { --az-svc-tint: var(--az-svc, var(--az-c-mint)); display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem; padding: 1.25rem 1.5rem; margin-block: 2rem; border-radius: 22px; background: var(--az-c-navy); color: #fff; } .alzar-svc-cta p { margin: 0; font-size: 1.125rem; font-weight: 700; } .alzar-svc-content { margin-block: 1rem; } .alzar-services.is-related { margin-top: 2.5rem; } @media (prefers-reduced-motion: reduce) { .az-card, .az-card__img, .az-drawer__panel, .az-bar, .az-qty, .az-qty__btn, .alzar-slider__track, .alzar-cats__item, .alzar-svc, .alzar-svc__btn { transition: none !important; } .az-qty.is-on .az-qty__minus, .az-qty.is-on .az-qty__n { animation: none; } } /* ---------- Support / delivery line (session 5, #13) ---------- */ .az-drawer__help { margin: .25rem 0 0; font-size: .875rem; text-align: center; color: var(--az-c-muted); } .az-drawer__help a { color: var(--az-c-green-deep); font-weight: 700; text-decoration: none; white-space: nowrap; } /* ---------- Services teaser (home: one line per service, links to /services/) ---------- */ .alzar-svc-teaser { display: grid; grid-template-columns: 1fr; gap: .55rem; margin: 0; } @media (min-width: 640px) { .alzar-svc-teaser { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .65rem; } } @media (min-width: 1024px) { .alzar-svc-teaser { grid-template-columns: repeat(4, minmax(0, 1fr)); } } .alzar-svc-teaser__item { --az-svc-tint: var(--az-svc, var(--az-c-mint)); display: flex; align-items: center; gap: .6rem; min-height: 56px; padding: .55rem .9rem; background: var(--az-c-surface); border: 1px solid var(--az-c-line); border-radius: 16px; text-decoration: none; overflow: hidden; isolation: isolate; transition: transform .25s var(--az-c-spring), box-shadow .25s, border-color .2s; } .alzar-svc-teaser__item:hover { transform: translateY(-2px); box-shadow: 0 14px 30px -20px rgba(20,26,61,.45); border-color: color-mix(in srgb, var(--az-c-green) 30%, var(--az-c-line)); } .alzar-svc-teaser__icon { display: grid; place-items: center; width: 38px; height: 38px; flex-shrink: 0; border-radius: 12px; background: var(--az-svc-tint); color: var(--az-c-green-deep); } .alzar-svc-teaser__name { color: var(--az-c-ink); font-weight: 700; font-size: .9375rem; line-height: 1.35; flex: 1; min-width: 0; } .alzar-svc-teaser__go { color: var(--az-c-green-deep); flex-shrink: 0; display: grid; place-items: center; } .alzar-svc-teaser__item:focus-visible { outline: 3px solid var(--az-c-navy); outline-offset: 2px; } .alzar-svc-teaser__more { display: flex; align-items: center; justify-content: center; gap: .4rem; margin-top: .9rem; min-height: 50px; padding: 0 1.4rem; border-radius: 999px; border: 1.5px dashed color-mix(in srgb, var(--az-c-green) 45%, var(--az-c-line)); background: color-mix(in srgb, var(--az-c-mint) 55%, #fff); color: var(--az-c-green-deep); font-weight: 800; text-decoration: none; transition: background .2s, border-color .2s; } .alzar-svc-teaser__more:hover { background: var(--az-c-mint); border-color: var(--az-c-green); } /* ---------- Services marketing page (variant: page) ---------- Hero band → stats → grid → 3 steps → CTA band. All texts editable via the block. */ .alzar-svcpage { display: grid; gap: 2rem; } .alzar-svcpage__hero { position: relative; overflow: hidden; border-radius: 28px; background: linear-gradient(125deg, var(--az-c-navy) 0%, color-mix(in srgb, var(--az-c-navy) 72%, var(--az-c-green-deep)) 100%); color: #fff; isolation: isolate; } .alzar-svcpage__hero::before { content: ""; position: absolute; z-index: -1; inset-block-start: -35%; inset-inline-start: -12%; width: 65%; aspect-ratio: 1; border-radius: 50%; background: radial-gradient(closest-side, color-mix(in srgb, var(--az-c-green) 55%, transparent), transparent 70%); } .alzar-svcpage__hero::after { content: ""; position: absolute; z-index: -1; inset-block-end: -45%; inset-inline-end: -8%; width: 55%; aspect-ratio: 1; border-radius: 50%; background: radial-gradient(closest-side, color-mix(in srgb, #F2B33D 32%, transparent), transparent 70%); } .alzar-svcpage__hero-inner { max-width: 840px; padding: clamp(1.5rem, 4.5vw, 3.25rem); display: grid; grid-template-columns: 1fr; align-items: center; gap: clamp(1.2rem, 4vw, 2.4rem); } /* v7.1: text-only banner (the brand moved to the masthead above). */ .alzar-svcpage__hero-txt { display: grid; gap: .9rem; justify-items: start; min-width: 0; } .alzar-svcpage__eyebrow { margin: 0; display: inline-block; padding: .35rem .9rem; border-radius: 999px; background: color-mix(in srgb, #fff 14%, transparent); font-size: .875rem; font-weight: 600; } .alzar-svcpage__title { margin: 0; font-size: clamp(1.75rem, 4.2vw, 2.625rem); line-height: 1.2; font-weight: 800; color: #fff; } .alzar-svcpage__lead { margin: 0; font-size: clamp(1rem, 2vw, 1.1875rem); line-height: 1.7; color: color-mix(in srgb, #fff 88%, transparent); max-width: 56ch; } .alzar-svcpage__hero-cta { display: flex; flex-wrap: wrap; gap: .7rem; margin-top: .35rem; } .alzar-svcpage__btn { display: inline-flex; align-items: center; gap: .5rem; min-height: 52px; padding: 0 1.5rem; border-radius: 999px; font-weight: 800; font-size: 1.0625rem; text-decoration: none; transition: background .2s, transform .2s var(--az-c-spring); } .alzar-svcpage__btn.is-wa { background: #25D366; color: #fff; box-shadow: 0 14px 30px -14px rgba(37,211,102,.75); } .alzar-svcpage__btn.is-wa:hover { background: #1fb855; color: #fff; } .alzar-svcpage__btn.is-tel { background: color-mix(in srgb, #fff 13%, transparent); color: #fff; border: 1px solid color-mix(in srgb, #fff 30%, transparent); } .alzar-svcpage__btn.is-tel:hover { background: color-mix(in srgb, #fff 24%, transparent); } .alzar-svcpage__btn:active { transform: scale(.97); } .alzar-svcpage__btn.is-lg { min-height: 56px; font-size: 1.125rem; } .alzar-svcpage__btn:focus-visible { outline: 3px solid #fff; outline-offset: 2px; } .alzar-svcpage__stats { list-style: none; display: flex; flex-wrap: wrap; gap: .6rem 2.2rem; margin: .9rem 0 0; padding: 1rem 1.4rem 0 0; border-top: 1px solid color-mix(in srgb, #fff 16%, transparent); width: 100%; } .alzar-svcpage__stats li { display: grid; gap: .1rem; padding-top: .9rem; } .alzar-svcpage__stats strong { font-size: 1.375rem; font-weight: 800; color: #F2B33D; line-height: 1.2; } .alzar-svcpage__stats span { font-size: .875rem; color: color-mix(in srgb, #fff 82%, transparent); } .alzar-svcpage__body { display: grid; gap: 2.25rem; } .alzar-svcpage__how h2, .alzar-svcpage__band h2 { margin: 0 0 .9rem; font-size: clamp(1.25rem, 2.8vw, 1.625rem); color: var(--az-c-navy); line-height: 1.3; } .alzar-svcpage__how ol { list-style: none; margin: 0; padding: 0; display: grid; gap: .8rem; counter-reset: azsvcp; } @media (min-width: 760px) { .alzar-svcpage__how ol { grid-template-columns: repeat(3, minmax(0, 1fr)); } } .alzar-svcpage__how li { counter-increment: azsvcp; display: grid; gap: .45rem; padding: 1.15rem 1.25rem; border-radius: 20px; background: var(--az-c-surface); border: 1px solid var(--az-c-line); box-shadow: 0 16px 34px -30px rgba(20,26,61,.5); } .alzar-svcpage__how li::before { content: counter(azsvcp); display: grid; place-items: center; width: 38px; height: 38px; border-radius: 50%; background: var(--az-c-green); color: #fff; font: 800 1.125rem/1 var(--az-num, inherit); margin-bottom: .3rem; } .alzar-svcpage__how strong { color: var(--az-c-ink); font-size: 1.0625rem; } .alzar-svcpage__how span { color: var(--az-c-muted); line-height: 1.65; font-size: .9375rem; } .alzar-svcpage__band { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1.25rem; padding: clamp(1.4rem, 3.5vw, 2.25rem); border-radius: 26px; background: linear-gradient(120deg, var(--az-c-green-deep), var(--az-c-green)); color: #fff; position: relative; overflow: hidden; isolation: isolate; } .alzar-svcpage__band::before { content: ""; position: absolute; z-index: -1; inset-block-start: -60%; inset-inline-end: -10%; width: 50%; aspect-ratio: 1; border-radius: 50%; background: radial-gradient(closest-side, rgba(255,255,255,.22), transparent 70%); } .alzar-svcpage__band h2 { color: #fff; margin: 0 0 .35rem; } .alzar-svcpage__band p { margin: 0; color: color-mix(in srgb, #fff 90%, transparent); line-height: 1.6; } .alzar-svcpage__band .alzar-svcpage__btn.is-wa { background: #fff; color: var(--az-c-green-deep); box-shadow: 0 16px 34px -18px rgba(0,0,0,.4); } .alzar-svcpage__band .alzar-svcpage__btn.is-wa:hover { background: color-mix(in srgb, #fff 88%, #F2B33D 12%); color: var(--az-c-navy); } /* ---------- Contact page (shortcode [alzar_contact]) ---------- */ .alzar-contact{display:grid;gap:2rem;max-width:1040px;margin:0 auto} .alzar-contact__hero{position:relative;overflow:hidden;border-radius:28px;background:linear-gradient(125deg,var(--az-c-navy) 0%,color-mix(in srgb,var(--az-c-navy) 70%,var(--az-c-green-deep)) 100%);color:#fff;isolation:isolate} .alzar-contact__hero::before{content:"";position:absolute;z-index:-1;inset-block-start:-35%;inset-inline-end:-12%;width:60%;aspect-ratio:1;border-radius:50%;background:radial-gradient(closest-side,color-mix(in srgb,var(--az-c-green) 50%,transparent),transparent 70%)} .alzar-contact__hero-inner{padding:clamp(1.5rem,4.5vw,3rem);display:grid;grid-template-columns:1fr;align-items:center;gap:clamp(1.2rem,4vw,2.4rem)} /* v7.1: text-only hero — the brand lives in the masthead above. */ .alzar-contact__hero-txt{display:grid;gap:.9rem;justify-items:start;min-width:0} .alzar-contact__quick{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:.8rem;padding:0 clamp(1.5rem,4.5vw,3rem) clamp(1.5rem,4.5vw,3rem)} @media (max-width:719px){ .alzar-contact__quick{grid-template-columns:1fr} } .alzar-contact__eyebrow{display:inline-block;margin:0;padding:.35rem .9rem;border-radius:999px;background:color-mix(in srgb,#fff 14%,transparent);font-size:.875rem;font-weight:600} .alzar-contact__title{margin:0;font-size:clamp(1.7rem,4.2vw,2.5rem);line-height:1.22;font-weight:800;color:#fff} .alzar-contact__lead{margin:0;max-width:60ch;font-size:clamp(1rem,2vw,1.125rem);line-height:1.75;color:color-mix(in srgb,#fff 88%,transparent)} @media (min-width:820px){.alzar-contact__quick{grid-template-columns:repeat(3,1fr)}} .alzar-contact__q{display:flex;align-items:center;gap:.8rem;padding:1rem 1.1rem;border-radius:18px;background:color-mix(in srgb,#fff 10%,transparent);border:1px solid color-mix(in srgb,#fff 18%,transparent);text-decoration:none;transition:background .2s} .alzar-contact__q:hover{background:color-mix(in srgb,#fff 20%,transparent)} .alzar-contact__q-ico{display:grid;place-items:center;width:46px;height:46px;border-radius:14px;flex-shrink:0;background:var(--az-c-green);color:#fff} .alzar-contact__q.is-wa .alzar-contact__q-ico{background:#25D366} .alzar-contact__q-body{display:grid;gap:.1rem;min-width:0} .alzar-contact__q-body small{font-size:.78rem;color:color-mix(in srgb,#fff 72%,transparent)} .alzar-contact__q-body strong{font-size:1rem;color:#fff;line-height:1.4} .alzar-contact__q:focus-visible{outline:3px solid #fff;outline-offset:3px} .alzar-contact__grid{display:grid;grid-template-columns:1fr;gap:1.25rem;align-items:start} @media (min-width:900px){.alzar-contact__grid{grid-template-columns:1.05fr .95fr}} .alzar-contact__form-card,.alzar-contact__map-card,.alzar-contact__hours{background:var(--az-c-surface);border:1px solid var(--az-c-line);border-radius:24px;padding:clamp(1.25rem,3vw,1.9rem)} .alzar-contact__form-card h2,.alzar-contact__map-card h2,.alzar-contact__hours h2{margin:0 0 .6rem;font-size:1.35rem;font-weight:800;color:var(--az-c-navy)} .alzar-contact__sub{margin:0 0 1rem;color:var(--az-c-muted);font-size:.95rem;line-height:1.6} .alzar-contact__ok{display:flex;align-items:center;gap:.5rem;background:var(--az-c-mint);color:var(--az-c-green-deep);font-weight:800;border-radius:14px;padding:14px;margin-bottom:1rem} .alzar-contact__bad{background:#FDECEC;color:#B42323;font-weight:700;border-radius:14px;padding:14px;margin-bottom:1rem} .alzar-contact__form{display:grid;gap:.85rem} .alzar-contact__hp{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap} .alzar-contact__row{display:grid;grid-template-columns:1fr;gap:.85rem} @media (min-width:640px){.alzar-contact__row{grid-template-columns:1fr 1fr}} .alzar-contact__field{display:grid;gap:.35rem;text-align:start} .alzar-contact__field label{font-weight:700;font-size:.9rem;color:var(--az-c-ink)} .alzar-contact__field input,.alzar-contact__field select,.alzar-contact__field textarea{width:100%;box-sizing:border-box;border:1.5px solid var(--az-c-line);border-radius:14px;padding:.8rem 1rem;font-family:inherit;font-size:1rem;color:var(--az-c-ink);background:#fff} .alzar-contact__field textarea{resize:vertical;min-height:120px;line-height:1.6} .alzar-contact__field input:focus,.alzar-contact__field select:focus,.alzar-contact__field textarea:focus{outline:3px solid var(--az-c-navy);outline-offset:1px;border-color:var(--az-c-navy)} .alzar-contact__submit{min-height:54px;border:0;border-radius:999px;background:var(--az-c-green);color:#fff;font-family:inherit;font-weight:800;font-size:1.05rem;cursor:pointer;transition:background .2s,transform .15s} .alzar-contact__submit:hover{background:var(--az-c-green-deep)} .alzar-contact__submit:active{transform:scale(.98)} .alzar-contact__fine{margin:.6rem 0 0;color:var(--az-c-muted);font-size:.82rem} .alzar-contact__addr{margin:0 0 .9rem;color:var(--az-c-ink);font-weight:600;line-height:1.6} .alzar-contact__map{position:relative;border-radius:18px;overflow:hidden;border:1px solid var(--az-c-line);aspect-ratio:16/10} .alzar-contact__map iframe{position:absolute;inset:0;width:100%;height:100%;border:0;display:block} .alzar-contact__dir{display:inline-flex;align-items:center;gap:.45rem;margin-top:1rem;min-height:48px;padding:0 1.3rem;border-radius:999px;background:var(--az-c-navy);color:#fff;font-weight:700;text-decoration:none;transition:background .2s} .alzar-contact__dir:hover{background:var(--az-c-ink);color:#fff} .alzar-contact__side{display:grid;gap:1.25rem} .alzar-contact__hours ul{list-style:none;margin:0;padding:0;display:grid;gap:.55rem} .alzar-contact__hours li{display:flex;flex-wrap:wrap;justify-content:space-between;gap:.4rem;padding:.7rem .95rem;border-radius:14px;background:color-mix(in srgb,var(--az-c-mint) 55%,#fff);font-size:.95rem} .alzar-contact__hours li span{color:var(--az-c-muted)} .alzar-contact__hours li strong{color:var(--az-c-navy)} /* Pagination (request #6): numbered pages under every product grid on shop/category/search. NOTE: paginate_links() gives the