/* Theme glue on top of the app stylesheets (app.css, storefront.css, studio.css). */
.screen-reader-text{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.skip-link{position:absolute;inset-inline-start:8px;top:-60px;background:var(--ink);color:#fff;padding:8px 14px;border-radius:8px;z-index:200}
.skip-link:focus{top:8px}
.sz-container{max-width:1280px;margin:0 auto;padding:24px 40px 40px}
.sz-page .sz-entry-title{margin-bottom:18px}
.sz-entry-content img{height:auto}
.alignwide,.alignfull{max-width:100%}
/* header: search form (the app used a link) */
.search-launch input[type=search]{flex:1;border:0;background:transparent;min-width:0;outline:0;padding:0 8px}
.search-launch b button{background:none;border:0;font:inherit;color:inherit;cursor:pointer}
.sz-sticky-header .topbar{position:sticky;top:0;z-index:50}
.brand-link{display:flex;align-items:center}
/* categories drawer */
.sz-drawer{position:fixed;inset:0;z-index:120;background:#0008}
.sz-drawer[hidden]{display:none}
.sz-drawer-panel{position:absolute;inset-block:0;inset-inline-start:0;width:min(86vw,360px);background:var(--surface);padding:18px;overflow:auto}
.sz-drawer-panel ul{list-style:none;margin:12px 0 0;padding:0}
.sz-drawer-panel li a{display:flex;justify-content:space-between;padding:12px 4px;border-bottom:1px solid var(--line)}
.sz-drawer-close{margin-inline-start:auto;display:flex}
/* product grid */
.price-box .price,.price-box ins{text-decoration:none}
.price-box del{color:var(--muted);font-size:.85em}
.add-btn{display:inline-flex;align-items:center;justify-content:center}
.add-btn.added{background:var(--primary);color:#fff}
.add-btn.loading{opacity:.5}
.added_to_cart{display:none}
/* woocommerce pages inside the app shell */
.sz-woo .woocommerce-breadcrumb{display:none}
.sz-woo .woocommerce-ordering select{max-width:220px}
.sz-woo .woocommerce-result-count{color:var(--muted)}
.sz-woo .woocommerce-notices-wrapper .woocommerce-message,.sz-woo .woocommerce-error,.sz-woo .woocommerce-info{list-style:none;padding:12px 16px;border-radius:var(--radius);background:var(--accent);margin:0 0 14px}
.sz-woo .button,.sz-woo button.button,.sz-woo input.button{border-radius:var(--radius)}
.sz-buy-now{margin-inline-start:8px}
/* free shipping bar */
.sz-ship-bar{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:12px 16px;margin-bottom:16px}
.sz-ship-bar[hidden]{display:none}
.sz-ship-bar p{margin:0 0 8px;font-weight:600}
.sz-ship-track{height:8px;background:var(--line);border-radius:8px;overflow:hidden}
.sz-ship-track span{display:block;height:100%;background:var(--primary);transition:width .4s}
.sz-ship-bar.is-done .sz-ship-track span{background:#237451}
/* whatsapp */
.sz-wa{position:fixed;inset-inline-end:16px;bottom:calc(var(--mobile-nav-height,68px) + 14px);width:52px;height:52px;border-radius:50%;background:#25d366;color:#fff;display:flex;align-items:center;justify-content:center;box-shadow:0 8px 24px #0003;z-index:60}
.sz-wa svg{width:26px;height:26px}
@media(min-width:900px){.sz-wa{bottom:24px}}
/* hero slides */
.hero-slide[hidden]{display:none}
.carousel-dots button{cursor:pointer}
@media(max-width:899px){.sz-container{padding:16px}}

/* Home product grid: the app's studio rule forces 2 columns at every width, which makes cards huge on a
   desktop. Phones keep 2 columns (unchanged); tablets and desktops get more, smaller cards (dashboard: الرئيسية). */
@media(min-width:700px){body[data-page=home].home-grid .home-section .product-grid,body[data-page=home].home-grid .product-row{grid-template-columns:repeat(var(--sz-home-cols-t,3),minmax(0,1fr));gap:14px}}
@media(min-width:1000px){body[data-page=home].home-grid .home-section .product-grid,body[data-page=home].home-grid .product-row{grid-template-columns:repeat(var(--sz-home-cols,5),minmax(0,1fr));gap:16px}
body[data-page=home].home-grid .product-card .product-title{font-size:12px}
body[data-page=home].home-grid .product-info{min-height:104px}}
/* Home slider on desktop: the app shows a 760px square. On wide screens it becomes a banner
   (copy on one side, the photo filling the other), same content, same controls; phones are untouched. */
@media(min-width:1000px){
	.home-visual{max-width:none;width:100%;aspect-ratio:auto;height:clamp(340px,33vw,450px);margin:0 0 26px;border-radius:var(--radius)}
	.home-visual #hero-slot,.home-visual .hero-carousel,.home-visual .campaign-slide{aspect-ratio:auto;height:100%}
	.home-visual .campaign-photo{top:0;bottom:0;left:auto;right:auto;inset-inline-start:auto;inset-inline-end:0;width:48%;height:100%}
	.home-visual .campaign-photo img{object-fit:cover;object-position:center}
	.home-visual .hero-copy{top:50%;transform:translateY(-50%);inset-inline-start:7%;max-width:40%}
	.visual-arrows{top:50%;transform:translateY(-50%)}
}
/* same idea for the shop and category pages */
.sz-woo .product-grid{grid-template-columns:repeat(var(--sz-cols-m,2),minmax(0,1fr));gap:12px}
@media(min-width:700px){.sz-woo .product-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}}
@media(min-width:1000px){.sz-woo .product-grid{grid-template-columns:repeat(var(--sz-cols,4),minmax(0,1fr));gap:16px}}

/* Same rules as the app's `.main-photo > img`, through WooCommerce's gallery wrapper */
.main-photo .woocommerce-product-gallery__image{display:contents}
.main-photo .woocommerce-product-gallery__image img{width:96%;height:96%;object-fit:contain;mix-blend-mode:multiply;cursor:zoom-in}
.sz-product p.stock{display:none}
/* Single product: WooCommerce's own form styled like the app's .detail-buy */
.sz-product .detail-buy-form form.cart,.sz-product .woocommerce-variation-add-to-cart{display:flex;flex-wrap:wrap;gap:10px;margin:20px 0 11px;align-items:stretch}
.sz-product .detail-buy-form form.cart.variations_form{display:block}
.sz-product .single_add_to_cart_button{flex:1;min-width:0;padding:11px 14px;font-size:13px}
.sz-product .sz-buy-now{flex:1 1 100%;margin:0}
.sz-product .quantity{display:flex;align-items:center;border:1px solid var(--line);border-radius:10px;background:var(--surface);min-width:100px}
.sz-product .quantity input.qty{width:32px;border:0;background:transparent;text-align:center;font:inherit;font-size:15px;-moz-appearance:textfield;padding:0}
.sz-product .quantity input.qty::-webkit-outer-spin-button,.sz-product .quantity input.qty::-webkit-inner-spin-button{-webkit-appearance:none}
.sz-product .quantity [data-qty]{width:34px;height:46px;font-size:18px;background:none;border:0;cursor:pointer}
.sz-product table.variations{width:100%;border:0;margin:0 0 6px}
.sz-product table.variations th,.sz-product table.variations td{display:block;padding:4px 0;text-align:start}
.sz-product table.variations select{width:100%;min-height:46px;border:1px solid var(--line);border-radius:10px;background:var(--surface);padding:0 12px;font:inherit}
.sz-product .reset_variations{font-size:12px;color:var(--muted)}
.sz-product .woocommerce-variation-price .price{font-weight:700}
.sz-product .woocommerce-product-attributes{width:100%;border-collapse:collapse}
.sz-product .woocommerce-product-attributes th,.sz-product .woocommerce-product-attributes td{padding:10px 0;border-bottom:1px solid var(--line);text-align:start;font-size:14px}
.sz-product .woocommerce-product-attributes th{color:var(--muted);font-weight:500;width:35%}
.sz-product .woocommerce-product-attributes p{margin:0}
.sz-product .detail-price .price,.sz-product .detail-price ins{text-decoration:none;font-weight:700}
.sz-product .detail-price del{color:var(--muted);font-size:.8em;margin-inline-end:8px}
.sz-product .gallery-dots button{cursor:pointer}
.sz-product .pdp-plugin-extras:empty{display:none}
.sz-product .woocommerce-tabs,.sz-product .related.products{display:none}
@media(max-width:899px){.sz-product{padding-bottom:84px}}

/* Quality pass (no visual redesign): keyboard focus, touch targets, reduced motion, layout stability */
.sz-drawer-panel:focus{outline:0}
.sz-drawer a:focus-visible,.sz-drawer button:focus-visible,.bottom-nav a:focus-visible,.market-links a:focus-visible,.market-links button:focus-visible,.product-card a:focus-visible,.add-btn:focus-visible{outline:2px solid var(--primary);outline-offset:3px}
/* invisible hit areas: touch targets reach 44px without changing how anything looks */
.add-btn,.carousel-dots button,.carousel-control{position:relative}
.add-btn::before,.carousel-dots button::before,.carousel-control::before{content:"";position:absolute;inset:50% auto auto 50%;width:max(100%,44px);height:max(100%,44px);transform:translate(-50%,-50%)}
.product-image{aspect-ratio:1/1;display:block;overflow:hidden}
.product-image img{width:100%;height:100%;object-fit:contain}
.category-art img{width:100%;height:100%;object-fit:cover;border-radius:inherit}
.sz-drawer-panel li a{min-height:44px;align-items:center}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important}}
@media (forced-colors:active){.add-btn,.product-badge{border:1px solid CanvasText}}

/* Product page edges, card borders and colours, all set from the dashboard (صفحة المنتج). */
body[data-page=product]{background:var(--pdp-pbg,var(--bg))}
body[data-page=product] .shell{background:var(--pdp-pbg,var(--bg))}
body[data-page=product] .app-body{padding-inline:var(--pdp-gutter-d,32px)}
@media(max-width:700px){body[data-page=product] .app-body{padding-inline:var(--pdp-gutter,8px)}}
body[data-page=product] .sz-product .product-content-card,
body[data-page=product] .sz-product .delivery-card,
body[data-page=product] .sz-product .bundle-panel,
body[data-page=product] .sz-product .main-photo{border:var(--pdp-bw,1px) solid var(--pdp-bc,var(--line));background:var(--pdp-cbg,var(--surface))}
body[data-page=product] .sz-product .product-gallery{background:none}

/* Watch / Reels additions */
.watch-tools .watch-like{display:flex;flex-direction:column;align-items:center;justify-content:center;height:auto;min-height:38px;padding:6px 0;gap:2px}
.watch-tools .watch-like small{font-size:10px;line-height:1}
.watch-tools .watch-like.on svg{fill:#ff3b5c;stroke:#ff3b5c}
.watch-tools svg.icon{width:20px;height:20px}
.watch-slide.watch-paused .watch-play{opacity:.9}
.watch-slide:not(.watch-paused) .watch-play{opacity:0;pointer-events:none}
.watch-by{opacity:.8;font-size:12px}
.watch-bar{position:absolute;left:0;right:0;bottom:0;height:3px;background:#ffffff33;z-index:5}
.watch-bar i{display:block;height:100%;width:0;background:#fff}
.watch-upload{position:fixed;inset-inline-start:14px;top:108px;z-index:61;display:inline-flex;align-items:center;gap:6px;min-height:44px;padding:0 16px;border-radius:99px;background:var(--primary);color:#fff;font:inherit;font-size:13px;font-weight:600;border:0;box-shadow:0 8px 24px #0004;cursor:pointer}
.watch-upload .icon{width:18px;height:18px}
.sz-sheet{position:fixed;inset:0;z-index:140;background:#000a;display:flex;align-items:flex-end;justify-content:center}
.sz-sheet[hidden]{display:none}
.sz-sheet-panel{position:relative;background:var(--surface);color:var(--ink);width:min(560px,100%);max-height:92dvh;overflow:auto;border-radius:22px 22px 0 0;padding:22px 20px 26px}
@media(min-width:700px){.sz-sheet{align-items:center}.sz-sheet-panel{border-radius:22px}}
.sz-sheet-close{position:absolute;inset-inline-end:12px;top:12px}
.sz-sheet-note{color:var(--muted);font-size:13px;line-height:1.9;margin:4px 0 14px}
.sz-sheet .field{display:flex;flex-direction:column;gap:6px;font-size:13px;margin-bottom:12px}
.sz-sheet .field input{min-height:46px;border:1px solid var(--line);border-radius:12px;padding:8px 12px;font:inherit;background:var(--surface)}
.sz-agree{display:flex;gap:8px;font-size:12px;line-height:1.8;margin:6px 0 12px}
.sz-hp{position:absolute!important;left:-9999px;width:1px;height:1px;opacity:0}
.sz-progress{height:6px;background:var(--line);border-radius:6px;overflow:hidden;margin:6px 0}
.sz-progress span{display:block;height:100%;width:0;background:var(--primary);transition:width .2s}
.sz-upload-msg{min-height:20px;font-size:13px;margin:6px 0 10px}
.watch-empty{padding-top:150px}

/* ---- Parity pass: the theme's WooCommerce markup dressed exactly like the app's cards and forms ---- */
/* WooCommerce adds the .button class to the quick-add link; the app's round 34px button has no button padding */
.add-btn.button{padding:0;min-height:0;min-width:0;line-height:1;font-size:inherit;font-weight:inherit;gap:0}
/* price: new price first (bold 17px, small currency), old price after it (12px grey, no currency), like the app card */
.price-box{display:flex;flex-wrap:wrap;align-items:baseline;gap:0 7px;font-size:17px;font-weight:600;line-height:1.65;min-width:0}
.price-box ins{order:-1;font:inherit;text-decoration:none;background:none}
.price-box del{font-size:12px;font-weight:400;color:#aaa;line-height:1.8}
.price-box del .woocommerce-Price-currencySymbol{display:none}
.price-box .woocommerce-Price-currencySymbol{font-size:12px;font-weight:450}
.price-box .screen-reader-text{position:absolute!important}
/* review form: WooCommerce's textarea has cols=45 and made the whole product page wider than a phone */
.sz-woo textarea,.comment-form textarea,.comment-form input[type=text],.comment-form input[type=email],.comment-form input[type=url]{width:100%;max-width:100%;box-sizing:border-box}

/* ---- Product page parity ---- */
/* WooCommerce's .button.alt paints the add-to-cart button orange; the app's is the white outline button */
html body .sz-product .single_add_to_cart_button.button-outline.button{background:var(--surface);color:var(--ink);border:1px solid #c4bbb4;gap:9px}
html body .sz-product .single_add_to_cart_button.button-outline.button:hover{filter:none;background:var(--bg)}
html body .sz-product .single_add_to_cart_button.button-outline.button:disabled{opacity:.5}
html body .sz-product .sz-buy-now.button-dark.button{gap:9px}
.sz-product .single_add_to_cart_button .icon,.sz-product .sz-buy-now .icon{width:18px;height:18px}
/* quantity: the app keeps minus on the left and plus on the right, also in RTL */
.sz-product .quantity,.woocommerce-cart .quantity{direction:ltr}
.sz-product .quantity [data-qty] svg,.woocommerce-cart .quantity [data-qty] svg{width:16px;height:16px}
.sz-product .quantity [data-qty],.woocommerce-cart .quantity [data-qty]{position:relative;display:grid;place-items:center;padding:0;color:var(--ink)}
.sz-product .quantity [data-qty]::before,.woocommerce-cart .quantity [data-qty]::before{content:"";position:absolute;inset:50% auto auto 50%;width:max(100%,44px);height:max(100%,44px);transform:translate(-50%,-50%)}
/* currency symbol is the small part of every price, as in the app */
.price .woocommerce-Price-currencySymbol{font-size:12px;font-weight:450}
.detail-price .woocommerce-Price-currencySymbol{font-size:14px}
.product-buy-dock .price .woocommerce-Price-currencySymbol{font-size:12px}
.detail-discount .old-price .woocommerce-Price-currencySymbol{font-size:inherit;font-weight:inherit}
.detail-discount>small{color:var(--muted)}
/* share chip + tab bar */
.sz-product .pdp-tools .chip{display:inline-flex;align-items:center;gap:8px;min-height:44px;cursor:pointer}
.sz-product .pdp-tools .icon{width:17px;height:17px}
.product-tabs button[aria-current]{color:var(--ink);border-color:var(--ink);font-weight:600}
.product-tabs[data-moved] button:first-child:not([aria-current]){color:var(--muted);border-color:transparent;font-weight:inherit}
.product-tabs button{cursor:pointer;min-height:44px}

/* ---- Page frame + catalogue parity ---- */
/* the app-body already gives the 20px page gutter; .sz-container used to add 16-40px on top of it */
.sz-container{padding-inline:0}
.rich-description{white-space:normal}
/* shop / category toolbar: count on one side, sorting on the other (the app's .toolbar) */
.shop-toolbar{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:10px;padding:12px 0 15px;border-bottom:1px solid var(--line);margin:14px 0 18px}
.shop-toolbar .woocommerce-result-count{margin:0;font-size:13px;color:var(--muted)}
.shop-toolbar .woocommerce-ordering{margin:0}
.shop-toolbar select{min-height:44px;font:inherit;font-size:12px;color:var(--ink);border:0;background:#fff;border-radius:11px;padding:9px 12px;max-width:100%}
@media(max-width:700px){.shop-toolbar .woocommerce-result-count,.shop-toolbar .woocommerce-ordering,.shop-toolbar select{width:100%}}
.page-heading .grow{flex:1;min-width:0}
.catalog-category-links{scroll-snap-type:x proximity;overscroll-behavior-x:contain}
.catalog-category-links .chip{display:inline-flex;align-items:center;scroll-snap-align:start}
.woocommerce-pagination{margin:26px 0 8px}
.woocommerce-pagination ul.page-numbers,.woocommerce-pagination ul{display:flex!important;flex-direction:row;flex-wrap:wrap;gap:8px;justify-content:center;align-items:center;list-style:none;margin:0;padding:0;border:0;background:none;min-width:0;min-height:0}
.woocommerce-pagination li{margin:0;padding:0;border:0;list-style:none}
.woocommerce-pagination li>.page-numbers{display:grid;place-items:center;min-width:44px;min-height:44px;padding:0 12px;border-radius:12px;background:var(--surface);border:1px solid var(--line);font-size:13px;text-decoration:none;color:var(--ink)}
.woocommerce-pagination li>.page-numbers.current{background:var(--ink);color:#fff;border-color:var(--ink)}
.woocommerce-pagination li>.page-numbers.dots{background:none;border-color:transparent}
/* watch: the upload button belongs to the video column, not to the browser window; the counter must read 1 / 5 in RTL */
@media(min-width:900px){.watch-upload{inset-inline-start:auto;right:calc(50% - 206px)}}
.watch-progress{direction:ltr;unicode-bidi:isolate}

/* =====================================================================================================
   Motion + smoothness. One set of tokens; only transform and opacity are animated (plus colour on text).
   Every duration collapses to ~0 with prefers-reduced-motion, and the JS skips its one-shot bumps too.
   ===================================================================================================== */
:root{--sz-t-fast:150ms;--sz-t-med:250ms;--sz-t-slow:420ms;--sz-ease:cubic-bezier(.22,.8,.3,1)}
@media (prefers-reduced-motion:reduce){:root{--sz-t-fast:.01ms;--sz-t-med:.01ms;--sz-t-slow:.01ms}}

/* one-shot keyframes (restarted from theme.js, which removes the class on animationend) */
@keyframes sz-pop{0%{transform:scale(1)}40%{transform:scale(1.3)}70%{transform:scale(.94)}100%{transform:scale(1)}}
@keyframes sz-bump{0%{transform:scale(1)}30%{transform:scale(1.22) rotate(-7deg)}65%{transform:scale(.95) rotate(3deg)}100%{transform:scale(1)}}
@keyframes sz-badge{0%{transform:scale(1)}40%{transform:scale(1.55)}100%{transform:scale(1)}}
@keyframes sz-ind{from{opacity:0;transform:scaleX(.2)}to{opacity:1;transform:none}}
.sz-bump{animation:sz-bump var(--sz-t-slow) var(--sz-ease)}
.count.sz-bump{animation-name:sz-badge}
.sz-pop,.add-btn.added{animation:sz-pop var(--sz-t-slow) var(--sz-ease)}
.watch-tools .watch-like.pop svg{animation:sz-pop var(--sz-t-slow) var(--sz-ease)}

/* press feedback: a short, small squeeze on everything tappable */
.icon-btn,.add-btn,.carousel-control,.category-arrow,.category-pause,.watch-tools button,.watch-upload,.button,.chip,.visual-arrows button,.product-tabs button,.pdp-tools .chip{
	transition:transform var(--sz-t-fast) var(--sz-ease),background-color var(--sz-t-fast),color var(--sz-t-fast),border-color var(--sz-t-fast),opacity var(--sz-t-fast)}
.icon-btn:active,.add-btn:active,.carousel-control:active,.category-pause:active,.watch-tools button:active,.watch-upload:active,.button:active,.chip:active,.visual-arrows button:active{transform:scale(.95)}
.sz-product .quantity [data-qty]:active{transform:scale(.9)}
@media(hover:hover){.icon-btn:hover:not(:active){transform:scale(1.04)}.add-btn:hover:not(:active){transform:scale(1.06)}}
/* a button that is both positioned by transform and pressed must keep its own position: only the inner icon squeezes */
.bottom-nav .nav-link .icon{transition:transform var(--sz-t-med) var(--sz-ease)}
.bottom-nav .nav-link.active .icon{transform:translateY(-2px) scale(1.12)}
.bottom-nav .nav-link:active .icon{transform:scale(.86)}
.bottom-nav .nav-link.active::before{animation:sz-ind var(--sz-t-med) var(--sz-ease)}

/* categories drawer: fade the scrim, slide the panel in from the start side */
.sz-drawer{opacity:0;transition:opacity var(--sz-t-med) var(--sz-ease)}
.sz-drawer.is-open{opacity:1}
.sz-drawer-panel{transform:translateX(100%);transition:transform var(--sz-t-med) var(--sz-ease);overscroll-behavior:contain}
html:not([dir=rtl]) .sz-drawer-panel{transform:translateX(-100%)}
.sz-drawer.is-open .sz-drawer-panel{transform:none}

/* sticky header: soft shadow once the page has scrolled */
.sz-sticky-header .topbar::after{content:"";position:absolute;inset:auto 0 -10px;height:10px;background:linear-gradient(#0000000f,transparent);opacity:0;transition:opacity var(--sz-t-med) var(--sz-ease);pointer-events:none}
.sz-sticky-header .topbar.is-stuck::after{opacity:1}

/* scrolling: contain the overscroll of every inner scroller, glide to anchors without hiding them under the header */
.watch-feed,.product-row,.category-strip,.catalog-category-links,.sz-sheet-panel,.sz-drawer-panel{overscroll-behavior:contain}
#product-description,#product-specs,#reviews,#pdp-studio-sections,.pdp-block{scroll-margin-top:84px}
/* long home sections paint only when they are near the screen; a reserved size keeps the scrollbar and layout steady */
#section-featured,#section-sale,#section-latest,#section-popular,#section-collections,#section-reassurance,#section-recent,.app-footer{content-visibility:auto;contain-intrinsic-size:auto 640px;overflow-clip-margin:16px}
.app-footer{contain-intrinsic-size:auto 520px}

.carousel-control .icon{width:12px;height:12px}

/* ---- Touch targets: every control reaches 44px through an invisible hit area, nothing changes visually ---- */
.icon-btn,.search-form button,.visual-arrows button,.watch-tools button,.gallery-dots button,.text-link,.detail-rating button,.footer-links a,.footer-help-grid a,.watch-tabs a,.social-links a,.pdp-photo-controls .icon-btn{position:relative}
.icon-btn::before,.search-form button::before,.visual-arrows button::before,.watch-tools button::before,.gallery-dots button::before,.text-link::before,.detail-rating button::before,.footer-links a::before,.footer-help-grid a::before,.watch-tabs a::before,.social-links a::before{content:"";position:absolute;inset:50% auto auto 50%;width:max(100%,44px);height:max(100%,44px);transform:translate(-50%,-50%)}
.catalog-category-links .chip,.watch-tabs a{min-height:44px}
.comment-form .form-submit input[type=submit],.comment-form input.submit{min-height:44px;padding:0 22px;border-radius:12px;border:0;background:var(--primary);color:var(--on-primary,#181818);font:inherit;font-weight:600;cursor:pointer}
.comment-form-cookies-consent label,.comment-form-rating label{display:inline-flex;align-items:center;min-height:44px}
/* review form: the star picker is WooCommerce's own links; without its stylesheet they were bare text ("1 of 5 stars") */
.comment-form p.stars{margin:0}
.comment-form p.stars span{display:inline-flex;gap:2px}
.comment-form p.stars a{position:relative;display:block;width:40px;height:44px;overflow:hidden;font-size:0;line-height:0;text-decoration:none}
.comment-form p.stars a::before{content:"☆";position:absolute;inset:0;display:grid;place-items:center;font-size:28px;line-height:1;color:#e5b80b;font-family:Arial,sans-serif}
.comment-form p.stars:hover a::before,.comment-form p.stars.selected a::before{content:"★"}
.comment-form p.stars:hover a:hover~a::before,.comment-form p.stars.selected a.active~a::before{content:"☆"}
.comment-form p.stars a:focus-visible{outline:2px solid var(--primary);outline-offset:-2px;border-radius:8px}

/* ===== 0.8.0 · the old sticky buy bar printed by an outside snippet is not wanted on product pages ===== */
body.single-product .matbakhe-bottom-cart,.single-product .matbakhe-bottom-cart{display:none!important}
body.single-product{padding-bottom:0!important;margin-bottom:0!important}

/* ===== 0.8.0 · product description typography (imported Elementor / Woodmart content) ===== */
.rich-description,.cod-rich{font-family:inherit;font-size:15px;line-height:1.95;color:var(--pal-ink,var(--ink));overflow-wrap:anywhere;word-break:normal}
.rich-description *,.cod-rich *{box-sizing:border-box}
.rich-description :where(h1,h2,h3,h4,h5,h6),.cod-rich :where(h1,h2,h3,h4,h5,h6){font-family:inherit!important;color:var(--pal-ink,var(--ink))!important;line-height:1.5!important;font-weight:800!important;letter-spacing:0!important;background:none!important;text-align:start;margin:1.5em 0 .55em;text-wrap:balance}
.rich-description h1,.cod-rich h1{font-size:23px!important}
.rich-description h2,.cod-rich h2{font-size:21px!important;position:relative;padding-inline-start:14px}
.rich-description h2::before,.cod-rich h2::before{content:"";position:absolute;inset-inline-start:0;top:.3em;bottom:.3em;width:4px;border-radius:4px;background:var(--pal-accent,var(--primary))}
.rich-description h3,.cod-rich h3{font-size:19px!important}
.rich-description h4,.cod-rich h4{font-size:17px!important}
.rich-description h5,.cod-rich h5,.rich-description h6,.cod-rich h6{font-size:15.5px!important}
.rich-description :where(p,li,span,div,td,th,strong,b,em,i,a,font,small,label),.cod-rich :where(p,li,span,div,td,th,strong,b,em,i,a,font,small,label){font-family:inherit!important}
.rich-description :where(p,li,td,th,div,span,font)[style],.cod-rich :where(p,li,td,th,div,span,font)[style]{font-size:inherit!important;line-height:inherit!important;background-color:transparent!important;background-image:none!important}
.rich-description :where(p,li,td,th,span,font)[style*="color"]:not(:where(a,a *,mark,.button,.elementor-button,.elementor-button *)),.cod-rich :where(p,li,td,th,span,font)[style*="color"]:not(:where(a,a *,mark,.button,.elementor-button,.elementor-button *)){color:inherit!important}
.rich-description p,.cod-rich p{margin:0 0 1em;text-align:start}
.rich-description :where(strong,b),.cod-rich :where(strong,b){font-weight:800;color:var(--pal-ink,var(--ink))}
.rich-description a:not(.button):not(.elementor-button),.cod-rich a:not(.button):not(.elementor-button){color:var(--pal-accent-lo,var(--primary))!important;text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px}
.rich-description :where(ul,ol),.cod-rich :where(ul,ol){margin:0 0 1.1em;padding-inline-start:0;list-style:none}
.rich-description li,.cod-rich li{position:relative;margin:0 0 .5em;padding-inline-start:26px}
.rich-description ul>li::before,.cod-rich ul>li::before{content:"";position:absolute;inset-inline-start:4px;top:.82em;width:9px;height:9px;border-radius:50%;background:var(--pal-accent,var(--primary));box-shadow:0 0 0 3px color-mix(in srgb,var(--pal-accent,var(--primary)) 18%,transparent)}
.rich-description ol,.cod-rich ol{counter-reset:szol}
.rich-description ol>li,.cod-rich ol>li{counter-increment:szol}
.rich-description ol>li::before,.cod-rich ol>li::before{content:counter(szol);position:absolute;inset-inline-start:0;top:.3em;display:grid;place-items:center;width:20px;height:20px;border-radius:50%;background:var(--pal-accent,var(--primary));color:var(--pal-on-accent,#111);font:800 11px/1 inherit}
.rich-description :where(img,video,iframe,embed,object,svg),.cod-rich :where(img,video,iframe,embed,object,svg){max-width:100%!important;height:auto;border-radius:14px}
.rich-description img,.cod-rich img{display:block;margin:14px auto;width:auto}
.rich-description iframe,.cod-rich iframe,.rich-description video,.cod-rich video{display:block;width:100%!important;aspect-ratio:16/9;height:auto!important;margin:14px 0;border:0;background:#000}
.rich-description figure,.cod-rich figure{margin:14px 0}
/* YouTube / Vimeo videos in content (inc/embeds.php): 16:9, and 9:16 for Shorts / Reels at the column's full width but never taller than 85% of the screen */
.sz-embed{position:relative;display:block;width:100%;aspect-ratio:16/9;margin:14px auto;overflow:hidden;border-radius:14px;background:#000}
.sz-embed.is-v{aspect-ratio:9/16;width:min(100%,calc(85vh * 9 / 16));max-height:85vh}
.rich-description .sz-embed iframe,.cod-rich .sz-embed iframe,.sz-embed iframe{position:absolute;inset:0;display:block;width:100%!important;height:100%!important;aspect-ratio:auto;max-width:none!important;margin:0;border:0;border-radius:0}
.wp-block-embed__wrapper:has(>.sz-embed)::before{display:none}
.rich-description figcaption,.cod-rich figcaption{font-size:13px;color:var(--muted);text-align:center}
.rich-description table,.cod-rich table{display:block;max-width:100%;overflow-x:auto;border-collapse:collapse;margin:0 0 1.2em;font-size:14px;-webkit-overflow-scrolling:touch}
.rich-description :where(td,th),.cod-rich :where(td,th){padding:9px 12px;border:1px solid var(--line);text-align:start;vertical-align:top}
.rich-description th,.cod-rich th{background:color-mix(in srgb,var(--pal-accent,var(--primary)) 9%,#fff);font-weight:800}
.rich-description hr,.cod-rich hr{border:0;height:1px;background:var(--line);margin:1.6em 0}
.rich-description blockquote,.cod-rich blockquote{margin:1.2em 0;padding:12px 16px;border-inline-start:4px solid var(--pal-accent,var(--primary));background:color-mix(in srgb,var(--pal-accent,var(--primary)) 7%,#fff);border-radius:12px}
.rich-description :where(.button,.elementor-button,a.btn,.wp-block-button__link),.cod-rich :where(.button,.elementor-button,a.btn,.wp-block-button__link){display:inline-flex;align-items:center;justify-content:center;min-height:46px;padding:10px 24px;border-radius:99px;font-weight:800;text-decoration:none!important}
/* Elementor / Woodmart / WPBakery wrappers inside the description: fluid, columns stack on phones */
.rich-description :where(.elementor,.elementor-section,.elementor-container,.elementor-row,.elementor-column,.elementor-column-wrap,.elementor-widget-wrap,.elementor-widget,.elementor-widget-container,.elementor-element,.e-con,.e-con-inner,.e-con-boxed,.vc_row,.vc_column_container,.vc_column-inner,.wpb_wrapper,.wd-row,.wd-col),.cod-rich :where(.elementor,.elementor-section,.elementor-container,.elementor-row,.elementor-column,.elementor-column-wrap,.elementor-widget-wrap,.elementor-widget,.elementor-widget-container,.elementor-element,.e-con,.e-con-inner,.e-con-boxed,.vc_row,.vc_column_container,.vc_column-inner,.wpb_wrapper,.wd-row,.wd-col){width:auto!important;max-width:100%!important;min-width:0!important;margin-inline:0!important;padding-inline:0!important;float:none!important}
.rich-description :where(.elementor-section,.elementor-container,.elementor-row,.elementor-widget-wrap,.e-con,.e-con-inner,.vc_row,.wd-row),.cod-rich :where(.elementor-section,.elementor-container,.elementor-row,.elementor-widget-wrap,.e-con,.e-con-inner,.vc_row,.wd-row){display:flex!important;flex-direction:column!important;flex-wrap:nowrap!important;gap:10px}
.rich-description :where(.elementor-column,.vc_column_container,.wd-col),.cod-rich :where(.elementor-column,.vc_column_container,.wd-col){flex:0 0 auto!important}
.rich-description :where(.elementor-image-box-wrapper,.elementor-icon-box-wrapper),.cod-rich :where(.elementor-image-box-wrapper,.elementor-icon-box-wrapper){display:block!important;text-align:center}
@media(min-width:900px){
.rich-description,.cod-rich{font-size:16px}
.rich-description h1,.cod-rich h1{font-size:28px!important}
.rich-description h2,.cod-rich h2{font-size:24px!important}
.rich-description h3,.cod-rich h3{font-size:20px!important}
}
.home-intro .h1-alt{margin:2px 0;font-size:34px;line-height:1.6;font-weight:650}
@media(max-width:900px){.home-intro .h1-alt{font-size:26px;line-height:1.65}}
@media(max-width:600px){.home-intro .h1-alt{font-size:24px}}
.page-heading .h1-alt{margin:0;font-size:28px;line-height:1.55;font-weight:650}@media(max-width:700px){.page-heading .h1-alt{font-size:24px;line-height:1.65}}