/*
Theme Name: Noon Publishing
Theme URI: https://www.noonpublishing.com
Author: دار ن + Claude
Description: قالب دار ن المخصص — مبني من النموذج التصميمي المعتمد. RTL Arabic bookstore theme with WooCommerce support.
Version: 1.52.0
Requires PHP: 7.4
License: GPL-2.0-or-later
Text Domain: noon
*/

/* ====== Design tokens (from the approved prototype) ====== */
:root{
  --paper:#f6f8fb; --paper-2:#e9eef5;
  --ink:#152238; --ink-soft:#46546e; --ink-faint:#8794a8;
  --blue:#1a5da5; --azure:#4f97d6; --tint:#e4eefa;
  --red:#d92320; --night:#0b1e3c; --night-2:#153761;
  --card:#ffffff; --line:#dfe6ef;
  --shadow-s:0 1px 3px rgba(11,30,60,.08);
  --shadow-m:0 6px 24px -6px rgba(11,30,60,.16);
  --shadow-l:0 24px 60px -18px rgba(11,30,60,.28);
  --r-s:10px; --r-m:16px; --r-l:24px;
  --ease:cubic-bezier(.22,1,.36,1);
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
html,body{overflow-x:hidden}
body{font-family:'Tajawal',system-ui,sans-serif;background:var(--paper);color:var(--ink);line-height:1.65;-webkit-font-smoothing:antialiased}
img{display:block;max-width:100%;height:auto}
button{font-family:inherit;cursor:pointer;border:none;background:none;color:inherit}
input,select,textarea{font-family:inherit;color:inherit}
a{color:inherit;text-decoration:none}
.serif, h1,h2,h3{font-family:'Amiri','Tajawal',serif}
.noon-container{max-width:1240px;margin:0 auto;padding:0 24px}

/* ====== topbar ====== */
.noon-topbar{background:var(--night);color:#dce7f5;font-size:13.5px;padding:8px 0;text-align:center;letter-spacing:.2px}
.noon-topbar b{color:#8fc1ef}

/* ====== header ====== */
.noon-header{position:sticky;top:0;z-index:60;background:rgba(246,248,251,.88);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border-bottom:1px solid var(--line);transition:box-shadow .3s}
.noon-header.scrolled{box-shadow:var(--shadow-m)}
.noon-header-in{display:flex;align-items:center;gap:28px;height:72px}
.noon-logo{display:flex;align-items:center;gap:12px;flex-shrink:0}
.noon-logo img{height:50px;width:auto}
.noon-logo-mark{width:46px;height:46px;border-radius:14px;background:#fff;border:1px solid var(--line);color:var(--red);display:grid;place-items:center;font-family:'Amiri',serif;font-size:30px;font-weight:700;line-height:1;box-shadow:var(--shadow-s);padding-bottom:6px}
.noon-nav{display:flex;gap:4px;flex:1}
.noon-nav ul{display:flex;gap:4px;list-style:none}
.noon-nav a{display:inline-block;padding:9px 15px;border-radius:999px;font-size:15px;font-weight:500;color:var(--ink-soft);transition:all .2s}
.noon-nav a:hover{background:var(--tint);color:var(--ink)}
.noon-nav .current-menu-item > a,.noon-nav .current_page_item > a{background:var(--night);color:#fff}
.noon-header-actions{display:flex;align-items:center;gap:8px}
.noon-icon-btn{width:44px;height:44px;border-radius:12px;display:grid;place-items:center;transition:all .2s;position:relative;color:var(--ink-soft)}
.noon-icon-btn:hover{background:var(--tint);color:var(--ink)}
.noon-icon-btn svg{width:21px;height:21px}
.noon-cart-count{position:absolute;top:4px;left:4px;min-width:18px;height:18px;border-radius:99px;background:var(--red);color:#fff;font-size:11px;font-weight:700;display:grid;place-items:center;padding:0 4px}

/* ====== hero ====== */
.noon-hero{background:radial-gradient(1100px 500px at 85% -10%,rgba(79,151,214,.30),transparent 60%),radial-gradient(900px 600px at 10% 110%,rgba(217,35,32,.16),transparent 55%),linear-gradient(160deg,var(--night) 0%,var(--night-2) 70%);color:#eef4fb;position:relative;overflow:hidden}
.noon-hero::after{content:'ن';position:absolute;left:-60px;bottom:-190px;font-family:'Amiri',serif;font-size:560px;font-weight:700;color:rgba(217,35,32,.08);pointer-events:none;line-height:1}
.noon-hero-in{display:grid;grid-template-columns:1.05fr .95fr;gap:40px;align-items:center;padding:72px 0 84px}
.noon-hero-tag{display:inline-flex;align-items:center;gap:8px;background:rgba(79,151,214,.16);border:1px solid rgba(79,151,214,.4);color:#9cc9ef;padding:6px 16px;border-radius:99px;font-size:13.5px;font-weight:700;margin-bottom:22px}
.noon-hero-tag .dot{width:7px;height:7px;border-radius:99px;background:#ff6f66;animation:noonBlink 1.6s infinite}
@keyframes noonBlink{50%{opacity:.3}}
.noon-hero h1{font-size:clamp(34px,4.6vw,56px);line-height:1.25;font-weight:700;margin-bottom:18px;color:#fff}
.noon-hero h1 em{font-style:normal;color:#ff6f66}
.noon-hero p.lead{font-size:17px;color:#aebfd6;max-width:480px;margin-bottom:32px;font-weight:300}
.noon-cta{display:flex;gap:14px;flex-wrap:wrap;align-items:center}
.noon-btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;padding:14px 30px;border-radius:14px;font-size:15.5px;font-weight:700;transition:all .25s var(--ease);text-decoration:none !important}
.noon-btn-red{background:linear-gradient(135deg,#ef4640,#c31d1a);color:#fff !important;box-shadow:0 10px 28px -8px rgba(217,35,32,.5)}
.noon-btn-red:hover{transform:translateY(-2px);filter:brightness(1.05)}
.noon-btn-ghost{border:1.5px solid rgba(238,244,251,.28);color:#eef4fb !important}
.noon-btn-ghost:hover{background:rgba(238,244,251,.08);border-color:rgba(238,244,251,.5)}
.noon-btn-dark{background:var(--night);color:#fff !important}
.noon-btn-dark:hover{background:var(--night-2);transform:translateY(-1px)}
.noon-stats{display:flex;gap:36px;margin-top:44px}
.noon-stats b{font-size:26px;font-weight:800;color:#fff;display:block;line-height:1.2}
.noon-stats span{font-size:13px;color:#8fa3bf}
.noon-hero-books{position:relative;height:440px}
.noon-hb{position:absolute;width:172px;aspect-ratio:2/3;border-radius:10px;overflow:hidden;box-shadow:0 30px 60px -12px rgba(0,0,0,.55);transition:transform .5s var(--ease)}
.noon-hb img{width:100%;height:100%;object-fit:cover}
.noon-hb:hover{transform:translateY(-14px) scale(1.04) !important;z-index:9}
.noon-hb1{top:30px;right:40px;transform:rotate(-7deg);z-index:3;animation:noonFloat 6s ease-in-out infinite}
.noon-hb2{top:90px;right:215px;transform:rotate(4deg);z-index:2;animation:noonFloat 7s .6s ease-in-out infinite}
.noon-hb3{top:180px;right:120px;transform:rotate(-2deg);z-index:4;animation:noonFloat 8s 1.1s ease-in-out infinite}
@keyframes noonFloat{0%,100%{margin-top:0}50%{margin-top:-12px}}

/* ====== sections ====== */
.noon-block{padding:64px 0}
.noon-sec-head{display:flex;align-items:flex-end;justify-content:space-between;gap:20px;margin-bottom:30px}
.noon-sec-head h2{font-size:clamp(26px,3vw,34px);font-weight:700;line-height:1.3;color:var(--ink)}
.noon-sec-head .sub{color:var(--ink-faint);font-size:14.5px;margin-top:4px}
.noon-more{color:var(--blue);font-weight:700;font-size:14.5px}

/* ====== chips ====== */
.noon-chips{display:flex;gap:10px;overflow-x:auto;padding:4px 2px 14px;scrollbar-width:none;justify-content:center;flex-wrap:wrap}
.noon-chip{flex-shrink:0;padding:10px 20px;border-radius:999px;background:#fff;border:1.5px solid var(--line);font-size:14.5px;font-weight:600;color:var(--ink-soft);transition:all .2s;white-space:nowrap}
.noon-chip:hover{border-color:var(--blue);color:var(--blue);transform:translateY(-2px);box-shadow:var(--shadow-s)}

/* ====== product cards (prototype design) ====== */
.noon-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:22px}
.noon-row{display:grid;grid-auto-flow:column;grid-auto-columns:214px;gap:22px;overflow-x:auto;padding:6px 2px 18px;scroll-snap-type:x mandatory;scrollbar-width:thin}
.noon-row > *{scroll-snap-align:start}
.noon-card{background:var(--card);border-radius:var(--r-m);overflow:hidden;border:1px solid var(--line);transition:transform .35s var(--ease),box-shadow .35s;position:relative;display:flex;flex-direction:column}
.noon-card:hover{transform:translateY(-6px);box-shadow:var(--shadow-m)}
.noon-cov-wrap{position:relative;overflow:hidden;flex-shrink:0}
.noon-cov{position:relative;display:block;aspect-ratio:2/3;overflow:hidden;background:var(--paper-2)}
.noon-cov img{width:100%;height:100%;object-fit:cover;transition:transform .6s var(--ease)}
.noon-card:hover .noon-cov img{transform:scale(1.06)}
.noon-badge{position:absolute;top:12px;right:12px;z-index:3;padding:4px 12px;border-radius:99px;font-size:12px;font-weight:800;color:#fff;box-shadow:var(--shadow-s)}
.noon-badge.sale{background:var(--red)}
.noon-badge.new{background:#2e7d5b}
.noon-quick{position:absolute;bottom:0;right:0;left:0;z-index:3;background:rgba(20,26,41,.92);color:#fff !important;font-weight:700;font-size:14px;padding:12px;transform:translateY(100%);transition:transform .3s var(--ease);display:flex;align-items:center;justify-content:center;gap:8px;text-align:center}
.noon-card:hover .noon-quick{transform:none}
.noon-quick:hover{background:var(--night)}
@media (hover:none){.noon-quick{transform:none;background:rgba(20,26,41,.78)}}
.noon-card-body{padding:14px 16px 16px;display:flex;flex-direction:column;gap:3px;flex:1}
.noon-card-cat{font-size:11.5px;color:var(--blue);font-weight:700;letter-spacing:.3px}
.noon-card-title{font-size:16px;font-weight:700;line-height:1.4;font-family:'Tajawal';display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical;overflow:hidden;color:var(--ink)}
.noon-card-price{margin-top:auto;padding-top:8px;display:flex;align-items:baseline;gap:8px;flex-wrap:wrap}
.noon-card-price .price{font-size:16px;font-weight:800;color:var(--ink)}
.noon-card-price del{font-size:13px;color:var(--ink-faint)}
.noon-card-price del .price{font-size:13px;color:var(--ink-faint);font-weight:500}
.noon-card-price ins{text-decoration:none}
.noon-card-price ins .price{color:var(--red)}
.noon-save{font-size:11px;background:#fdecea;color:var(--red);font-weight:700;padding:2px 8px;border-radius:99px}

/* ====== offer / series bands ====== */
.noon-offer{background:linear-gradient(120deg,#4a0f0d,#8c1a16 55%,#c22c24);border-radius:var(--r-l);color:#fdeceb;padding:44px 48px;position:relative;overflow:hidden;display:grid;grid-template-columns:1.2fr .8fr;gap:24px;align-items:center}
.noon-offer h3{font-size:clamp(24px,2.8vw,32px);margin-bottom:10px;color:#fff}
.noon-offer p{color:#f4c1be;font-size:15px;max-width:440px}
.noon-cd{display:flex;gap:12px;margin-top:24px}
.noon-cd > div{background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.18);border-radius:12px;padding:10px 0;width:74px;text-align:center}
.noon-cd b{display:block;font-size:24px;font-weight:800;font-variant-numeric:tabular-nums;color:#fff}
.noon-cd span{font-size:11.5px;color:#f4c1be}
.noon-offer-covers{display:flex;gap:14px;justify-content:flex-end}
.noon-ob{width:118px;aspect-ratio:2/3;border-radius:8px;overflow:hidden;box-shadow:0 18px 40px -10px rgba(0,0,0,.5);transform:rotate(3deg);transition:transform .4s var(--ease)}
.noon-ob:first-child{transform:rotate(-4deg) translateY(10px)}
.noon-ob:hover{transform:rotate(0) scale(1.06)}
.noon-ob img{width:100%;height:100%;object-fit:cover}
.noon-series{border-radius:var(--r-l);background:linear-gradient(120deg,#0d2340,#1a4a7c);color:#e9f1fa;padding:44px 48px;display:grid;grid-template-columns:1fr auto;gap:30px;align-items:center;position:relative;overflow:hidden}
.noon-series h3{font-size:clamp(24px,2.8vw,32px);margin-bottom:8px;color:#fff}
.noon-series p{color:#a9c4e2;max-width:520px;font-size:15px}

/* ====== trust ====== */
.noon-trust{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
.noon-trust .nt{background:#fff;border:1px solid var(--line);border-radius:var(--r-m);padding:22px;display:flex;gap:14px;align-items:center;transition:all .25s}
.noon-trust .nt:hover{transform:translateY(-3px);box-shadow:var(--shadow-s)}
.noon-trust .nt-i{font-size:26px}
.noon-trust b{display:block;font-size:15px;color:var(--ink)}
.noon-trust .nt span{font-size:12.5px;color:var(--ink-faint)}

/* ====== newsletter ====== */
.noon-newsletter{background:var(--night);border-radius:var(--r-l);color:#eef4fb;padding:52px;text-align:center;position:relative;overflow:hidden}
.noon-newsletter::before{content:'ن';position:absolute;right:40px;top:-80px;font-family:'Amiri',serif;font-size:280px;color:rgba(217,35,32,.09);line-height:1}
.noon-newsletter h3{font-size:clamp(24px,2.8vw,32px);margin-bottom:8px;color:#fff;position:relative}
.noon-newsletter p{color:#8fa3bf;margin-bottom:26px;position:relative}

/* ====== blog cards ====== */
.noon-blog-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.noon-bcard{background:#fff;border:1px solid var(--line);border-radius:var(--r-m);overflow:hidden;transition:transform .35s var(--ease),box-shadow .35s;display:flex;flex-direction:column}
.noon-bcard:hover{transform:translateY(-5px);box-shadow:var(--shadow-m)}
.noon-bhead{position:relative;padding:26px 24px;min-height:150px;display:flex;flex-direction:column;justify-content:flex-end;color:#fff;background:linear-gradient(150deg,var(--night-2),var(--night));overflow:hidden}
.noon-bhead.has-img{background-size:cover;background-position:center}
.noon-bhead::before{content:'”';position:absolute;top:-8px;left:16px;font-family:'Amiri',serif;font-size:120px;line-height:1;color:rgba(255,255,255,.14)}
.noon-bhead h3{font-size:21px;line-height:1.45;color:#fff;position:relative;text-shadow:0 2px 8px rgba(0,0,0,.4)}
.noon-bbody{padding:18px 22px 20px;display:flex;flex-direction:column;gap:10px;flex:1}
.noon-bbody p{font-size:14px;color:var(--ink-soft);line-height:1.7}
.noon-bmeta{font-size:12.5px;color:var(--ink-faint);margin-top:auto}
.noon-bmeta b{color:var(--blue)}

/* ====== footer ====== */
.noon-footer{background:#081527;color:#93a2b8;margin-top:70px}
.noon-footer-in{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:36px;padding:56px 0 40px}
.noon-footer h4{color:#fff;font-size:15.5px;margin-bottom:16px;font-weight:700;font-family:'Tajawal'}
.noon-footer a{display:block;font-size:14px;padding:5px 0;transition:color .2s;color:#93a2b8}
.noon-footer a:hover{color:#9cc9ef}
.noon-footer p{font-size:14px;max-width:280px;margin-top:12px}
.noon-footer ul{list-style:none}
.noon-foot-base{border-top:1px solid rgba(255,255,255,.08);padding:20px 0;font-size:13px;display:flex;justify-content:space-between;flex-wrap:wrap;gap:10px}

/* ====== WooCommerce compat (prototype styling for shop/product/cart/checkout) ====== */
.woocommerce-page .noon-container ul.products{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:22px;list-style:none;margin:26px 0}
.woocommerce ul.products li.product{list-style:none}
.woocommerce nav.woocommerce-pagination{text-align:center;margin:30px 0}
.woocommerce nav.woocommerce-pagination ul{display:inline-flex;gap:8px;border:none}
.woocommerce nav.woocommerce-pagination ul li{border:none}
.woocommerce nav.woocommerce-pagination ul li a,.woocommerce nav.woocommerce-pagination ul li span{width:40px;height:40px;display:grid;place-items:center;border-radius:12px;border:1.5px solid var(--line);background:#fff;font-weight:700}
.woocommerce nav.woocommerce-pagination ul li span.current{background:var(--night);color:#fff;border-color:var(--night)}
.woocommerce .woocommerce-result-count{color:var(--ink-faint);font-weight:600}
.woocommerce .woocommerce-ordering select{height:46px;border-radius:12px;border:1.5px solid var(--line);background:#fff;padding:0 16px;font-weight:600}
.woocommerce span.onsale{background:var(--red) !important;color:#fff;border-radius:999px;padding:4px 14px;font-weight:800;min-height:0;line-height:1.7}
button.single_add_to_cart_button, .woocommerce .button, .wc-block-components-button{background:linear-gradient(135deg,#ef4640,#c31d1a) !important;color:#fff !important;border:none !important;border-radius:12px !important;font-weight:700 !important;padding:13px 28px !important;transition:all .2s !important}
button.single_add_to_cart_button:hover,.woocommerce .button:hover{transform:translateY(-2px);filter:brightness(1.05)}
.cart .quantity .qty{height:50px;border:1.5px solid var(--line);border-radius:12px;background:#fff;text-align:center;width:70px}
.woocommerce table.shop_table{background:#fff;border:1px solid var(--line) !important;border-radius:16px;overflow:hidden;border-collapse:separate}
.woocommerce table.shop_table th{background:var(--tint);color:var(--ink);font-weight:800}
.woocommerce form .form-row input.input-text,.woocommerce form .form-row textarea,.woocommerce form .form-row select{border:1.5px solid var(--line);border-radius:10px;padding:12px 14px;background:#fff}
.woocommerce form .form-row input.input-text:focus{border-color:var(--blue);outline:none;box-shadow:0 0 0 3px rgba(26,93,165,.14)}
.woocommerce-checkout #payment{background:var(--tint) !important;border-radius:14px}
.woocommerce-checkout #payment div.payment_box{background:#fff !important;border-radius:10px}
.woocommerce-message,.woocommerce-info{border-top-color:var(--blue)}
.woocommerce-message::before,.woocommerce-info::before{color:var(--blue)}

/* single product (prototype pdp) */
.noon-pdp{display:grid;grid-template-columns:.9fr 1.1fr;gap:56px;padding:48px 0 30px;align-items:start}
.noon-pdp-cover img{border-radius:var(--r-m);box-shadow:var(--shadow-l);width:100%;max-width:400px}
.noon-pdp-info .cats{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:8px}
.noon-pdp-info .cats a{background:var(--tint);color:var(--blue);font-weight:700;font-size:13px;padding:3px 12px;border-radius:99px}
.noon-pdp-info h1{font-size:clamp(28px,3.4vw,40px);line-height:1.3;margin-bottom:10px;color:var(--ink)}
.noon-pdp-info .price{font-size:32px;font-weight:800;color:var(--ink)}
.noon-pdp-info .price ins{text-decoration:none}
.noon-pdp-info .price ins .woocommerce-Price-amount{color:var(--red)}
.noon-pdp-info .stock{color:#2e7d5b;font-weight:700}
.noon-pdp-desc{color:var(--ink-soft);font-size:15.5px;margin:16px 0 24px;max-width:560px}
.noon-pdp form.cart{display:flex;gap:14px;align-items:stretch;flex-wrap:wrap;margin:10px 0 22px}
.noon-related{padding-top:20px}

/* generic entry content (for Elementor & regular pages) */
.noon-content{min-height:40vh}
.entry-plain{max-width:820px;margin:0 auto;padding:40px 24px}
.entry-plain h1{margin-bottom:20px}

@media(max-width:1020px){
  .noon-hero-in{grid-template-columns:1fr;padding:52px 0 60px}
  .noon-hero-books{height:380px;max-width:520px}
  .noon-footer-in{grid-template-columns:1fr 1fr}
  .noon-trust{grid-template-columns:1fr 1fr}
  .noon-offer{grid-template-columns:1fr}
  .noon-offer-covers{justify-content:flex-start}
  .noon-series{grid-template-columns:1fr}
  .noon-blog-grid{grid-template-columns:1fr 1fr}
  .noon-pdp{grid-template-columns:1fr;gap:34px}
  .noon-burger{display:none}
  .noon-header-in{flex-wrap:wrap;height:auto;padding:10px 0 0;row-gap:0;gap:14px}
  .noon-nav{order:3;flex:1 1 100%;display:block;overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:none;padding:4px 0 10px;margin:0 -4px}
  .noon-nav::-webkit-scrollbar{display:none}
  .noon-nav ul{display:flex;flex-direction:row;flex-wrap:nowrap;gap:4px;white-space:nowrap;width:max-content;padding:0 4px}
  .noon-nav a{display:inline-block;padding:8px 14px;font-size:14px;border-radius:999px}
  .noon-nav .current-menu-item > a,.noon-nav .current_page_item > a{background:var(--night);color:#fff}
}
@keyframes noonMenuIn{from{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:none}}
@media(max-width:640px){
  .noon-container{padding:0 16px}
  .noon-block{padding:42px 0}
  .noon-header-in{gap:10px}
  .noon-topbar{font-size:12px;padding:7px 10px}
  .noon-grid{grid-template-columns:repeat(2,1fr);gap:12px}
  .noon-row{grid-auto-columns:156px;gap:13px}
  .noon-trust{grid-template-columns:1fr 1fr;gap:12px}
  .noon-blog-grid{grid-template-columns:1fr}
  .noon-newsletter{padding:34px 20px}
  .noon-offer{padding:28px 20px}
  .noon-series{padding:28px 20px}
  .noon-hero-in{padding:40px 0 46px}
  .noon-hero h1{font-size:31px}
  .noon-hero p.lead{font-size:15px;margin-bottom:24px}
  .noon-hero-books{height:320px;max-width:100%}
  .noon-hb{width:126px}
  .noon-hb1{top:20px}
  .noon-hb2{top:66px;right:148px}
  .noon-hb3{top:112px;right:74px}
  .noon-stats{gap:18px;margin-top:30px}
  .noon-stats b{font-size:20px}
  .noon-btn{padding:12px 22px;font-size:14px}
  .noon-chips{flex-wrap:nowrap;overflow-x:auto;justify-content:flex-start;-webkit-overflow-scrolling:touch;scrollbar-width:none;padding-bottom:8px}
  .noon-chip{padding:9px 16px;font-size:13.5px}
  .noon-ticker-label{font-size:11px;padding:8px 12px}
  .noon-ticker-track{font-size:12.5px;gap:30px;padding:8px 14px}
  .noon-sec-head{margin-bottom:20px}
  .noon-sec-head h2{font-size:22px}
  .noon-sec-head .sub{font-size:12.5px}
  .noon-cd div b{font-size:18px}
  .noon-card-title{font-size:14.5px}
  .noon-card-body{padding:11px 12px 13px}
  .noon-card-price .price{font-size:14px}
  .noon-quick{font-size:12.5px;padding:10px}
  .noon-subscribe .wp-block-jetpack-subscriptions__form-elements{flex-direction:column}
  .noon-subscribe input[type="email"],.noon-subscribe button,.noon-subscribe input[type="submit"]{width:100%}
  .noon-footer-in{grid-template-columns:1fr 1fr;gap:26px;padding:42px 0 30px}
  .noon-footer-in > div:first-child{grid-column:1/-1}
  .noon-foot-base{flex-direction:column;gap:6px;text-align:center}
  .noon-follow-btns a{flex:1;justify-content:center;padding:12px 14px}
  .noon-pdp-cover{max-width:290px;margin:0 auto}
  .noon-about-card{padding:24px 20px}
  .noon-team{grid-template-columns:1fr 1fr;gap:12px}
  .noon-team-card{padding:20px 14px}
}

/* ====== news ticker ====== */
.noon-ticker{background:var(--night);border-bottom:1px solid #12294a;overflow:hidden;display:flex;align-items:stretch}
.noon-ticker-label{flex-shrink:0;background:var(--red);color:#fff;font-weight:800;font-size:13px;padding:9px 18px;display:flex;align-items:center}
.noon-ticker-viewport{overflow:hidden;flex:1;display:flex;align-items:center}
.noon-ticker-track{display:inline-flex;gap:48px;white-space:nowrap;padding:9px 24px;animation:noonTick 50s linear infinite;width:max-content}
.noon-ticker-track a{color:#c9d9ec;font-size:13.5px}
.noon-ticker-track a b{color:#fff}
.noon-ticker-track a:hover{color:#9cc9ef}
.noon-ticker:hover .noon-ticker-track{animation-play-state:paused}
@keyframes noonTick{from{transform:translateX(0)}to{transform:translateX(50%)}}

/* ====== blog card author + book ====== */
.noon-bavatar{width:38px;height:38px;border-radius:99px;background:var(--tint);color:var(--blue);display:grid;place-items:center;font-weight:700;font-size:17px;font-family:'Amiri',serif;flex-shrink:0;border:1.5px solid #cfe0f3;padding-bottom:3px}
.noon-bmeta{display:flex;align-items:center;gap:10px}
.noon-bbook{display:flex;align-items:center;gap:10px;margin-top:12px;padding-top:12px;border-top:1px dashed var(--line)}
.noon-bbook img{width:36px;height:54px;object-fit:cover;border-radius:5px;box-shadow:var(--shadow-s);flex-shrink:0}
.noon-bbook em{display:block;font-style:normal;font-size:11px;color:var(--ink-faint)}
.noon-bbook b{font-size:13.5px;color:var(--ink)}

/* ====== blog: prototype layout (featured + grid) ====== */
.noon-blog-grid.home5,.noon-blog-grid.listing{grid-template-columns:1.15fr 1fr 1fr;grid-auto-rows:auto;align-items:stretch}
.noon-bcard.featured{grid-row:span 2}
.noon-bcard.featured .noon-bhead{min-height:300px;flex:1}
.noon-bcard.featured .noon-bhead h3{font-size:30px}
.noon-bchip{position:absolute;top:16px;right:18px;background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.35);color:#fff;font-size:12px;font-weight:700;padding:4px 14px;border-radius:99px;backdrop-filter:blur(4px)}
.noon-bhead{padding-top:52px}
@media (max-width:980px){.noon-blog-grid.home5,.noon-blog-grid.listing{grid-template-columns:1fr 1fr}.noon-bcard.featured{grid-row:auto}}
@media (max-width:620px){.noon-blog-grid.home5,.noon-blog-grid.listing{grid-template-columns:1fr}}

/* ====== about page ====== */
.noon-about-grid{display:grid;grid-template-columns:1.2fr 1fr;gap:22px}
.noon-about-card{background:#fff;border:1px solid var(--line);border-radius:var(--r-l);padding:34px}
.noon-about-card h2{font-size:26px;margin-bottom:14px;color:var(--ink)}
.noon-about-card p{color:var(--ink-soft);line-height:2;font-size:15.5px;margin-bottom:12px}
.noon-owner-band h3{font-size:clamp(26px,3vw,36px)}
.noon-owner-band p{max-width:720px}
@media (max-width:860px){.noon-about-grid{grid-template-columns:1fr}}

/* ====== team cards ====== */
.noon-team{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:18px}
.noon-team-card{background:#fff;border:1px solid var(--line);border-radius:var(--r-m);padding:28px 24px;text-align:center;transition:transform .3s var(--ease),box-shadow .3s}
.noon-team-card:hover{transform:translateY(-4px);box-shadow:var(--shadow-m)}
.noon-team-card .ic{width:58px;height:58px;border-radius:16px;background:var(--tint);display:grid;place-items:center;font-size:26px;margin:0 auto 14px}
.noon-team-card h3{font-size:18px;color:var(--ink);margin-bottom:8px;font-family:'Tajawal'}
.noon-team-card p{font-size:13.5px;color:var(--ink-soft);line-height:1.8}

.noon-team-card .av{width:64px;height:64px;border-radius:99px;background:linear-gradient(150deg,var(--night-2),var(--night));color:#fff;display:grid;place-items:center;font-family:'Amiri',serif;font-size:28px;font-weight:700;margin:0 auto 14px;padding-bottom:6px;box-shadow:var(--shadow-s)}
.noon-team-card p{color:var(--blue);font-weight:600;font-size:14px}

/* ====== author submission band ====== */
.noon-author-band{border-radius:var(--r-l);background:linear-gradient(140deg,#0b1e3c,#153761 70%);color:#eef4fb;display:grid;grid-template-columns:0.9fr 1.1fr;gap:0;overflow:hidden;position:relative;align-items:stretch}
.noon-author-band::after{content:'ن';position:absolute;left:-30px;bottom:-120px;font-family:'Amiri',serif;font-size:340px;font-weight:700;color:rgba(217,35,32,.10);line-height:1;pointer-events:none}
.noon-author-img{min-height:280px}
.noon-author-img img{width:100%;height:100%;object-fit:cover;display:block}
.noon-author-txt{padding:48px 46px;display:flex;flex-direction:column;justify-content:center;position:relative;z-index:1}
.noon-author-txt h3{color:#fff;font-size:clamp(24px,2.8vw,32px);margin-bottom:12px}
.noon-author-txt p{color:#aebfd6;font-size:15.5px;line-height:1.9;max-width:520px}
@media (max-width:860px){.noon-author-band{grid-template-columns:1fr}.noon-author-img{min-height:220px}.noon-author-txt{padding:30px 24px}}

/* ====== subscribe form inside band ====== */
.noon-subscribe{margin-top:22px;max-width:480px}
.noon-subscribe form{display:flex;gap:10px;flex-wrap:wrap}
.noon-subscribe .wp-block-jetpack-subscriptions__form-elements{display:flex;gap:10px;width:100%}
.noon-subscribe input[type="email"]{flex:1;min-width:200px;background:rgba(255,255,255,.10);border:1.5px solid rgba(255,255,255,.25);border-radius:12px;color:#fff;padding:13px 18px;font-size:14.5px;outline:none;transition:border .2s}
.noon-subscribe input[type="email"]::placeholder{color:#8fa3bf}
.noon-subscribe input[type="email"]:focus{border-color:var(--azure);background:rgba(255,255,255,.16)}
.noon-subscribe button,.noon-subscribe input[type="submit"],.noon-subscribe .wp-block-button__link{background:linear-gradient(135deg,#ef4640,#c31d1a);color:#fff;border:none;border-radius:12px;padding:13px 26px;font-size:14.5px;font-weight:700;cursor:pointer;transition:filter .2s,transform .2s}
.noon-subscribe button:hover,.noon-subscribe input[type="submit"]:hover{filter:brightness(1.08);transform:translateY(-1px)}
.noon-subscribe #subscribe-email,.noon-subscribe .wp-block-jetpack-subscriptions__form{width:100%}
.noon-subscribe p{margin:0}

/* ====== social icons ====== */
.noon-social{display:flex;gap:6px;align-items:center}
.noon-social a{width:38px;height:38px;border-radius:11px;display:grid;place-items:center;color:var(--ink-soft);transition:all .2s}
.noon-social a svg{width:19px;height:19px}
.noon-social a:hover{background:var(--tint);color:var(--blue);transform:translateY(-2px)}
.noon-social-footer{margin-top:16px}
.noon-social-footer a{color:#93a2b8;background:rgba(255,255,255,.06);width:40px;height:40px}
.noon-social-footer a:hover{background:rgba(255,255,255,.14);color:#fff}
@media (max-width:700px){.noon-social-header{display:none}}

/* ====== follow-us tile ====== */
.noon-follow{border-radius:var(--r-l);background:linear-gradient(120deg,#4a0f0d,#8c1a16 55%,#c22c24);color:#fdeceb;display:grid;grid-template-columns:0.85fr 1.15fr;gap:0;align-items:stretch;position:relative;overflow:hidden}
.noon-follow::after{content:'ن';position:absolute;left:-40px;top:-110px;font-family:'Amiri',serif;font-size:300px;font-weight:700;color:rgba(255,255,255,.07);line-height:1;pointer-events:none}
.noon-follow-img{min-height:260px}
.noon-follow-img img{width:100%;height:100%;object-fit:cover;display:block}
.noon-follow-content{padding:46px 46px;display:flex;flex-direction:column;justify-content:center;position:relative;z-index:1}
.noon-follow h3{color:#fff;font-size:clamp(24px,2.8vw,32px);margin-bottom:8px}
.noon-follow p{color:#f4c1be;font-size:15px;max-width:520px}
.noon-follow-btns{display:flex;gap:12px;flex-wrap:wrap;position:relative;z-index:1;margin-top:22px}
.noon-follow-btns a{display:flex;align-items:center;gap:9px;padding:13px 22px;border-radius:13px;background:rgba(255,255,255,.10);border:1.5px solid rgba(255,255,255,.25);color:#fff;font-weight:700;font-size:14.5px;transition:all .25s var(--ease)}
.noon-follow-btns a svg{width:20px;height:20px}
.noon-follow-btns a:hover{transform:translateY(-3px);background:#fff;color:#8c1a16;border-color:#fff}
@media (max-width:860px){.noon-follow{grid-template-columns:1fr}.noon-follow-img{min-height:200px}.noon-follow-content{padding:30px 24px}}

/* ====== mobile burger + menu ====== */
.noon-burger{display:none;width:44px;height:44px;border-radius:12px;flex-direction:column;align-items:center;justify-content:center;gap:5px;transition:background .2s}
.noon-burger span{display:block;width:20px;height:2.2px;border-radius:2px;background:var(--ink);transition:transform .25s,opacity .2s}
.noon-burger.open span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.noon-burger.open span:nth-child(2){opacity:0}
.noon-burger.open span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
.noon-burger:hover{background:var(--tint)}

/* ====== foreign editions tile ====== */
.noon-foreign{border-radius:var(--r-l);background:linear-gradient(120deg,#0d2340,#1a4a7c 60%,#2b6cae);color:#e9f1fa;display:grid;grid-template-columns:1.15fr 0.85fr;gap:0;align-items:stretch;position:relative;overflow:hidden;transition:transform .35s var(--ease),box-shadow .35s}
.noon-foreign:hover{transform:translateY(-5px);box-shadow:var(--shadow-l)}
.noon-foreign::after{content:'ن';position:absolute;right:-30px;top:-100px;font-family:'Amiri',serif;font-size:280px;font-weight:700;color:rgba(255,255,255,.06);line-height:1;pointer-events:none}
.noon-foreign-img{min-height:250px;order:2}
.noon-foreign-img img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .6s var(--ease)}
.noon-foreign:hover .noon-foreign-img img{transform:scale(1.05)}
.noon-foreign-txt{padding:46px;display:flex;flex-direction:column;justify-content:center;align-items:flex-start;position:relative;z-index:1}
.noon-foreign-badge{background:var(--red);color:#fff;font-size:12.5px;font-weight:800;padding:5px 16px;border-radius:99px;margin-bottom:14px;animation:noonBlink 1.8s infinite}
.noon-foreign h3{color:#fff;font-size:clamp(24px,2.8vw,32px);margin-bottom:10px}
.noon-foreign p{color:#a9c4e2;font-size:15.5px;line-height:1.9;max-width:480px}
@media (max-width:860px){.noon-foreign{grid-template-columns:1fr}.noon-foreign-img{min-height:200px;order:0}.noon-foreign-txt{padding:28px 22px}}

.noon-bavatar-img{overflow:hidden;padding:0;background:none;border:2px solid #cfe0f3}
.noon-bavatar-img img{width:100%;height:100%;object-fit:cover;border-radius:99px;display:block}

/* ====== ن watermark on every colored tile ====== */
.noon-offer::after{content:'ن';position:absolute;left:-36px;bottom:-130px;font-family:'Amiri',serif;font-size:320px;font-weight:700;color:rgba(255,255,255,.09);line-height:1;pointer-events:none;transform:rotate(-6deg)}
.noon-series::after{content:'ن';position:absolute;left:-36px;top:-120px;font-family:'Amiri',serif;font-size:320px;font-weight:700;color:rgba(217,35,32,.14);line-height:1;pointer-events:none;transform:rotate(5deg)}
.noon-owner-band::after{content:'ن';position:absolute;left:-30px;bottom:-130px;font-family:'Amiri',serif;font-size:320px;font-weight:700;color:rgba(217,35,32,.13);line-height:1;pointer-events:none}
.noon-newsletter::before{color:rgba(217,35,32,.12) !important}

/* ====== share buttons ====== */
.noon-share-mini{position:absolute;top:12px;left:12px;z-index:3;width:34px;height:34px;border-radius:99px;background:rgba(255,255,255,.92);color:var(--ink-soft);display:grid;place-items:center;box-shadow:var(--shadow-s);transition:all .2s;opacity:0}
.noon-card:hover .noon-share-mini{opacity:1}
.noon-share-mini svg{width:16px;height:16px}
.noon-share-mini:hover{background:var(--night);color:#fff;transform:scale(1.08)}
@media (hover:none){.noon-share-mini{opacity:1;background:rgba(255,255,255,.85)}}
.noon-share-row{display:flex;align-items:center;gap:8px;margin-top:18px;flex-wrap:wrap}
.noon-share-row .lbl{font-size:13px;color:var(--ink-faint);font-weight:600;margin-left:2px}
.noon-share-row a,.noon-share-row button{width:38px;height:38px;border-radius:11px;background:#fff;border:1.5px solid var(--line);color:var(--ink-soft);display:grid;place-items:center;transition:all .2s;cursor:pointer}
.noon-share-row a svg,.noon-share-row button svg{width:17px;height:17px}
.noon-share-row a:hover,.noon-share-row button:hover{border-color:var(--blue);color:var(--blue);transform:translateY(-2px)}
.noon-toast{position:fixed;bottom:26px;right:50%;transform:translate(50%,20px);background:var(--night);color:#fff;padding:11px 24px;border-radius:12px;font-size:14px;font-weight:600;box-shadow:var(--shadow-l);opacity:0;transition:all .3s var(--ease);z-index:999}
.noon-toast.show{opacity:1;transform:translate(50%,0)}

/* ====== blog cards: image absorbs extra height, no dead space under text ====== */
.noon-bcard .noon-bhead{flex:1 1 auto}
.noon-bcard .noon-bbody{flex:0 0 auto}
.noon-bcard.featured .noon-bhead{min-height:340px}

/* ====== كتّاب الدار — authors directory ====== */
.noon-authors-hero .noon-hero-in{padding-top:56px;padding-bottom:56px}
.noon-author-search{max-width:440px;margin:22px auto 0}
.noon-author-search input{width:100%;padding:14px 20px;border-radius:99px;border:1px solid rgba(255,255,255,.25);background:rgba(255,255,255,.1);color:#fff;font-family:'Tajawal';font-size:15px;outline:none;transition:border-color .3s,background .3s}
.noon-author-search input::placeholder{color:rgba(255,255,255,.55)}
.noon-author-search input:focus{border-color:var(--sky,#4F97D6);background:rgba(255,255,255,.16)}
.noon-authors-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(310px,1fr));gap:18px}
.noon-author-card{background:#fff;border:1px solid var(--line);border-radius:var(--r-m);padding:22px;display:flex;flex-direction:column;gap:12px;transition:transform .3s var(--ease),box-shadow .3s}
.noon-author-card:hover{transform:translateY(-4px);box-shadow:var(--shadow-m)}
.noon-author-top{display:flex;align-items:center;gap:14px}
.noon-author-av{width:56px;height:56px;flex:0 0 56px;border-radius:99px;background:linear-gradient(150deg,var(--night-2),var(--night));color:#fff;display:grid;place-items:center;font-family:'Amiri',serif;font-size:25px;font-weight:700;padding-bottom:5px;box-shadow:var(--shadow-s)}
.noon-author-av.img{padding:0;overflow:hidden}
.noon-author-av.img img{width:100%;height:100%;object-fit:cover;border-radius:99px}
.noon-author-top h3{font-size:17.5px;color:var(--ink);font-family:'Tajawal';margin-bottom:3px}
.noon-author-meta{font-size:12.5px;color:var(--ink-faint)}
.noon-author-bio{font-size:13.5px;color:var(--ink-soft);line-height:1.9;margin:0}
.noon-author-covers{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin-top:auto}
.noon-author-covers a{aspect-ratio:2/3;border-radius:8px;overflow:hidden;box-shadow:var(--shadow-s);transition:transform .3s var(--ease)}
.noon-author-covers a:hover{transform:translateY(-4px)}
.noon-author-covers img{width:100%;height:100%;object-fit:cover;display:block}
.noon-author-all{font-size:13.5px;font-weight:700;color:var(--blue);margin-top:2px}
.noon-author-all:hover{color:var(--red)}
@media(max-width:640px){.noon-author-card{padding:16px}.noon-author-covers{gap:6px}.noon-author-top h3{font-size:15.5px}}
@media(max-width:640px) and (min-width:481px){.noon-authors-grid{grid-template-columns:1fr 1fr;gap:12px}}
@media(max-width:480px){.noon-authors-grid{grid-template-columns:1fr;gap:12px}.noon-author-covers{grid-template-columns:repeat(4,1fr);gap:8px}}

/* ====== كاتب الأسبوع ====== */
.noon-wau{position:relative;overflow:hidden;background:linear-gradient(135deg,var(--night) 0%,var(--night-2) 70%);border-radius:var(--r-l);padding:clamp(28px,4vw,52px);display:grid;grid-template-columns:1.15fr .85fr;gap:clamp(24px,4vw,52px);align-items:center;color:#fff}
.noon-wau::after{content:'ن';position:absolute;left:-36px;bottom:-130px;font-family:'Amiri',serif;font-size:320px;font-weight:700;color:rgba(255,255,255,.08);line-height:1;pointer-events:none;transform:rotate(-5deg)}
.noon-wau-tag{display:inline-flex;align-items:center;gap:8px;background:var(--red);color:#fff;font-size:13px;font-weight:700;padding:7px 16px;border-radius:99px;margin-bottom:18px}
.noon-wau-id{display:flex;align-items:center;gap:16px;margin-bottom:14px}
.noon-wau-id h2{font-size:clamp(24px,2.8vw,32px);color:#fff;font-family:'Amiri',serif}
.noon-wau-av{width:76px;height:76px;flex:0 0 76px;border-radius:99px;background:rgba(255,255,255,.12);border:3px solid rgba(255,255,255,.35);color:#fff;display:grid;place-items:center;font-family:'Amiri',serif;font-size:34px;font-weight:700;padding-bottom:6px;box-shadow:var(--shadow-m)}
.noon-wau-av.img{padding:0;overflow:hidden}
.noon-wau-av.img img{width:100%;height:100%;object-fit:cover;border-radius:99px}
.noon-wau-info p{color:rgba(255,255,255,.82);line-height:2;font-size:15px;max-width:560px;margin-bottom:20px}
.noon-wau-covers{position:relative;z-index:1;display:grid;grid-template-columns:repeat(4,1fr);gap:12px}
.noon-wau-covers a{aspect-ratio:2/3;border-radius:10px;overflow:hidden;box-shadow:0 18px 40px -10px rgba(0,0,0,.5);transition:transform .35s var(--ease)}
.noon-wau-covers a:nth-child(even){transform:translateY(14px)}
.noon-wau-covers a:hover{transform:translateY(-6px) scale(1.04);z-index:2}
.noon-wau-covers img{width:100%;height:100%;object-fit:cover;display:block}
@media(max-width:860px){.noon-wau{grid-template-columns:1fr}.noon-wau-covers{max-width:420px}.noon-wau-covers a:nth-child(even){transform:none}}

/* ====== كتاب الأسبوع ====== */
.noon-botw{position:relative;overflow:hidden;background:linear-gradient(135deg,#5a1512 0%,#2e0b09 75%);border-radius:var(--r-l);padding:clamp(28px,4vw,52px);display:grid;grid-template-columns:auto 1fr;gap:clamp(26px,4.5vw,60px);align-items:center;color:#fff}
.noon-botw::after{content:'ن';position:absolute;left:-36px;top:-120px;font-family:'Amiri',serif;font-size:320px;font-weight:700;color:rgba(255,255,255,.07);line-height:1;pointer-events:none;transform:rotate(6deg)}
.noon-botw-cover{position:relative;z-index:1}
.noon-botw-cover a{display:block;width:clamp(180px,20vw,250px);aspect-ratio:2/3;border-radius:12px;overflow:hidden;box-shadow:0 30px 60px -12px rgba(0,0,0,.6);transform:rotate(-3deg);transition:transform .4s var(--ease)}
.noon-botw-cover a:hover{transform:rotate(0) translateY(-8px) scale(1.03)}
.noon-botw-cover img{width:100%;height:100%;object-fit:cover;display:block}
.noon-botw-tag{display:inline-flex;align-items:center;gap:8px;background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.25);color:#fff;font-size:13px;font-weight:700;padding:7px 16px;border-radius:99px;margin-bottom:16px}
.noon-botw-info h2{font-size:clamp(24px,2.8vw,32px);color:#fff;font-family:'Amiri',serif;margin-bottom:12px}
.noon-botw-author{display:flex;align-items:center;gap:11px;margin-bottom:14px;color:rgba(255,255,255,.85);font-size:14.5px}
.noon-botw-author b{color:#fff}
.noon-botw-av{width:44px;height:44px;flex:0 0 44px;border-radius:99px;background:rgba(255,255,255,.14);border:2px solid rgba(255,255,255,.35);color:#fff;display:grid;place-items:center;font-family:'Amiri',serif;font-size:20px;font-weight:700;padding-bottom:4px}
.noon-botw-av.img{padding:0;overflow:hidden}
.noon-botw-av.img img{width:100%;height:100%;object-fit:cover;border-radius:99px}
.noon-botw-info p{color:rgba(255,255,255,.82);line-height:2;font-size:15px;max-width:620px;margin-bottom:20px}
.noon-botw-foot{display:flex;align-items:center;gap:22px;flex-wrap:wrap;position:relative;z-index:1}
.noon-botw-price{font-size:20px;font-weight:800;color:#fff}
.noon-botw-price del{color:rgba(255,255,255,.45);font-size:15px;margin-inline-start:8px}
.noon-botw-price ins{text-decoration:none}
@media(max-width:760px){.noon-botw{grid-template-columns:1fr;text-align:center}.noon-botw-cover a{margin:0 auto}.noon-botw-author{justify-content:center}.noon-botw-info p{margin-inline:auto}.noon-botw-foot{justify-content:center}}

/* ====== انضم لعائلة دار ن — compact strip (replaces the big tile) ====== */
.noon-follow-mini{position:relative;overflow:hidden;background:linear-gradient(120deg,#4a0f0d,#8c1a16 55%,#c22c24);border-radius:var(--r-m);padding:22px 30px;display:flex;align-items:center;justify-content:space-between;gap:20px;flex-wrap:wrap;color:#fff}
.noon-follow-mini::after{content:'ن';position:absolute;left:-24px;top:-70px;font-family:'Amiri',serif;font-size:190px;font-weight:700;color:rgba(255,255,255,.08);line-height:1;pointer-events:none}
.noon-follow-mini-txt h3{color:#fff;font-size:19px;font-family:'Tajawal';font-weight:800;margin-bottom:3px}
.noon-follow-mini-txt p{color:#f4c1be;font-size:13.5px;margin:0}
.noon-follow-mini-icons{display:flex;gap:10px;position:relative;z-index:1}
.noon-follow-mini-icons a{width:44px;height:44px;border-radius:12px;background:rgba(255,255,255,.12);border:1.5px solid rgba(255,255,255,.25);display:grid;place-items:center;color:#fff;transition:all .25s var(--ease)}
.noon-follow-mini-icons svg{width:21px;height:21px}
.noon-follow-mini-icons a:hover{background:#fff;color:#8c1a16;transform:translateY(-3px)}
@media(max-width:640px){.noon-follow-mini{justify-content:center;text-align:center;padding:20px 18px}}

/* ---- v1.15.0 mobile fit fixes ----
   Grid tracks were resolving to min-content (1fr = minmax(auto,1fr)),
   forcing these blocks wider than the phone viewport and clipping their
   text via overflow:hidden. minmax(0,1fr) + min-width:0 lets them shrink. */
@media(max-width:860px){
  .noon-offer,.noon-series,.noon-wau,.noon-botw{grid-template-columns:minmax(0,1fr)}
  .noon-offer>*,.noon-series>*,.noon-wau>*,.noon-botw>*{min-width:0}
}
@media(max-width:640px){
  .noon-offer p,.noon-series p,.noon-wau-info p,.noon-botw-info p{max-width:100%}
  .noon-offer-covers{gap:10px;justify-content:center;flex-wrap:nowrap}
  .noon-ob{width:auto;flex:1 1 0;min-width:0;max-width:118px}
  .noon-wau-id{flex-wrap:wrap;gap:12px}
  .noon-wau-covers{max-width:100%;gap:9px}
  .noon-botw-cover a{width:min(180px,58vw)}
  .noon-botw-foot{gap:14px}
}

/* ---- v1.17.1: roomier horizontal scrollbar under each product row ----
   The default thin bar (and its stepper arrows, which scale with the bar's
   thickness in Chrome) was fiddly to grab. Taller track + a clearly visible
   pill thumb makes browsing a row much easier, on trackpad or mouse. */
.noon-row{scrollbar-width:auto;scrollbar-color:#b8c3d4 #eef1f6;padding-bottom:24px}
.noon-row::-webkit-scrollbar{height:15px}
.noon-row::-webkit-scrollbar-track{background:#eef1f6;border-radius:999px}
.noon-row::-webkit-scrollbar-thumb{
  background:#b8c3d4;
  border-radius:999px;
  border:3px solid #eef1f6;
}
.noon-row::-webkit-scrollbar-thumb:hover{background:#8fa0b8}
.noon-row::-webkit-scrollbar-thumb:active{background:var(--red,#c0392b)}

@media(max-width:860px){
  /* Touch devices use an overlay scrollbar; keep the row compact there. */
  .noon-row{scrollbar-width:thin;padding-bottom:16px}
  .noon-row::-webkit-scrollbar{height:9px}
}

/* ---- v1.19.0: header book search ----
   The icon used to link to /?s= which lands on the blog's search results.
   It now opens a field that searches the shop (post_type=product). */
.noon-search{display:flex;align-items:center;gap:4px}
.noon-search input[type=search]{
  width:0;min-width:0;padding:0;border:1px solid transparent;
  height:40px;border-radius:99px;background:#fff;color:var(--ink);
  font-family:'Tajawal',sans-serif;font-size:14.5px;outline:none;opacity:0;
  transition:width .3s var(--ease),min-width .3s var(--ease),padding .3s var(--ease),opacity .2s;
}
.noon-search.open input[type=search]{
  /* min-width, not just width: the header is a flex row with no spare space on
     a phone, and flexbox will happily shrink a `width` down to nothing.
     min-width is the hard floor it has to respect. */
  width:220px;min-width:220px;padding:0 18px;opacity:1;flex:0 0 auto;
  border-color:var(--line);box-shadow:0 1px 3px rgba(16,32,64,.06);
}
.noon-search.open input[type=search]:focus{border-color:var(--blue,#153761)}
.noon-search input[type=search]::placeholder{color:var(--ink-faint)}
.noon-search input[type=search]::-webkit-search-cancel-button{cursor:pointer}

/* the results page offers the other kind of search rather than a dead end */
.noon-search-alt{margin:-6px 0 22px;font-size:14.5px;color:var(--ink-faint)}
.noon-search-alt a{color:var(--blue,#153761);font-weight:700;text-decoration:underline}

@media(max-width:860px){
  /* free up room for the field by folding the social icons away while searching */
  .noon-header-actions.noon-searching .noon-social-header{display:none}
  .noon-search.open input[type=search]{width:min(54vw,220px);min-width:min(54vw,220px)}
}

/* The field's reveal is a width transition; if the visitor asks for reduced
   motion, snap to the end state rather than animating. */
@media (prefers-reduced-motion:reduce){
  .noon-search input[type=search]{transition:none}
}

/* ---- v1.20.0: read counts + article comments ---- */
.noon-views{display:inline-flex;align-items:center;gap:6px;white-space:nowrap}
.noon-views svg{width:16px;height:16px;opacity:.75}
.noon-views-wrap{display:inline-flex;align-items:center;color:var(--ink-faint);font-size:13.5px}
.noon-views-wrap::before{content:'·';margin:0 8px;opacity:.6}

.noon-comments{background:#fff;border:1px solid var(--line);border-radius:16px;padding:30px 34px;margin-top:26px}
.noon-comment-list{list-style:none;margin:0 0 10px;padding:0}
.noon-comment-list .children{list-style:none;margin:14px 0 0;padding-inline-start:26px;border-inline-start:2px solid var(--line)}
.noon-comment{margin:0 0 18px}
.noon-comment-in{background:var(--tint,#f4f7fb);border:1px solid var(--line);border-radius:14px;padding:18px 20px}
.noon-comment-head{display:flex;align-items:center;gap:12px;margin-bottom:10px}
.noon-comment-av{border-radius:50%;width:46px;height:46px;object-fit:cover}
.noon-comment-author{display:block;font-size:15px;color:var(--ink)}
.noon-comment-date{font-size:12.5px;color:var(--ink-faint)}
.noon-comment-text{font-size:15.5px;line-height:1.95;color:#2c3345}
.noon-comment-text p{margin:0 0 10px}
.noon-comment-text p:last-child{margin-bottom:0}
.noon-comment-pending{font-size:13px;color:#b26a00;background:#fff6e5;border-radius:8px;padding:7px 12px;margin:0 0 10px}
.noon-comment-reply a{font-size:13.5px;font-weight:700;color:var(--blue,#153761)}
.noon-comments-closed{color:var(--ink-faint);font-size:14px}

.noon-comment-form{margin-top:8px}
.noon-comments .comment-reply-title{font-family:'Amiri',serif;font-size:24px;margin:22px 0 6px}
.noon-comment-note{font-size:13.5px;color:var(--ink-faint);margin:0 0 16px}
.noon-cf-row{display:flex;flex-direction:column;gap:6px;margin:0 0 14px}
.noon-cf-row label{font-size:13.5px;font-weight:700;color:var(--ink-soft)}
.noon-comments input[type=text],.noon-comments input[type=email],.noon-comments textarea{
  width:100%;border:1.5px solid var(--line);border-radius:12px;padding:12px 15px;
  font-family:'Tajawal',sans-serif;font-size:15px;background:#fff;color:var(--ink);outline:none;
  transition:border-color .2s,box-shadow .2s;
}
.noon-comments input:focus,.noon-comments textarea:focus{
  border-color:var(--blue,#153761);box-shadow:0 0 0 3px rgba(26,93,165,.12);
}
.noon-comments textarea{resize:vertical;line-height:1.8}
.noon-comments .form-submit{margin:4px 0 0}
.noon-comments .comment-form-cookies-consent{display:flex;flex-direction:row-reverse;justify-content:flex-end;align-items:center;gap:8px;font-size:13.5px;color:var(--ink-faint);margin:0 0 14px}
.noon-comments .comment-form-cookies-consent input{width:auto}

@media(min-width:721px){
  .noon-comment-form .noon-cf-row.half{display:inline-flex;width:calc(50% - 7px)}
  .noon-comment-form .noon-cf-row.half:first-of-type{margin-inline-end:14px}
}
@media(max-width:720px){
  .noon-comments{padding:22px 18px}
  .noon-comment-list .children{padding-inline-start:14px}
}

/* ---- v1.21.0: mobile polish ----
   Audited at 390px across home, article, shop, product and authors: no
   horizontal overflow anywhere, so the layout itself is sound. These are the
   two things that actually degrade the experience on a phone. */

@media(max-width:860px){

  /* 1. iOS Safari zooms the entire page when you focus a field whose text is
     under 16px, and doesn't zoom back out. Every input here was 13–15px, so
     tapping the search box, the comment form or a checkout field yanked the
     layout. 16px on small screens only — desktop keeps its tighter sizing. */
  input[type=text],input[type=email],input[type=search],input[type=tel],
  input[type=number],input[type=password],input[type=url],textarea,select,
  .noon-comments input,.noon-comments textarea,
  .noon-search input[type=search],
  .woocommerce form .form-row input.input-text,
  .woocommerce form .form-row textarea,
  .woocommerce form .form-row select{
    font-size:16px;
  }

  /* 2. Comfortable tap targets. "عرض الكل ←" was a 24px-tall line of text and
     the footer links 33px; both are under the ~44px a fingertip expects. */
  .noon-more{display:inline-flex;align-items:center;min-height:44px}
  .noon-footer-in a{padding-top:9px;padding-bottom:9px}
  .noon-comments .form-submit .noon-btn,
  .noon-comments input[type=submit]{min-height:48px;width:100%}
}

/* Honeypot: present in the DOM for bots, invisible and unreachable for people.
   display:none is avoided — some bots skip hidden fields, and this way screen
   readers skip it via aria-hidden/tabindex rather than CSS.
   v1.22.1: was left:-9999px, which added ~10,000px of scrollable area to every
   page carrying a comment form (document.scrollWidth 11779 vs clientWidth 1780,
   and the page really did scroll sideways despite overflow-x:hidden). Clipping
   instead keeps the element rendered and fillable while taking no layout space
   at all — the same technique WordPress core uses for .screen-reader-text. */
.noon-hp{position:absolute!important;width:1px!important;height:1px!important;
  padding:0!important;margin:-1px!important;overflow:hidden!important;
  clip:rect(0 0 0 0)!important;clip-path:inset(50%)!important;
  white-space:nowrap!important;border:0!important}

/* v1.22.2 — article blockquotes. The theme never styled them, so a pull-quote
   read as ordinary body text. Border sits on the right for RTL. */
.entry-content blockquote{
  margin:22px 0;
  padding:20px 24px;
  background:var(--tint);
  border-right:4px solid var(--blue);
  border-radius:var(--r-s);
  color:var(--ink-soft);
  font-size:.97em;
}
.entry-content blockquote p{margin:0 0 12px}
.entry-content blockquote p:last-child{margin:0}
.entry-content blockquote cite{
  display:block;margin-top:10px;font-style:normal;font-size:.88em;color:var(--ink-faint);
}
@media(max-width:860px){
  .entry-content blockquote{padding:16px 18px;margin:18px 0}
}

/* ====== v1.23.2 weekly quiz banner ======
   Deliberately a LIGHT card. The first version was a navy→blue gradient, which
   sat directly under .noon-foreign (#0d2340→#2b6cae) and read as one continuous
   blue slab. A warm paper card is the only treatment on this page that isn't a
   dark gradient, so it separates cleanly and echoes the book/paper idea. */
.noon-quiz{
  background:linear-gradient(135deg,#fdf9f2,#f6ece0);
  border:1px solid #e8dccb;border-radius:var(--r-l);
  box-shadow:var(--shadow-m);
  padding:44px 48px;position:relative;overflow:hidden;
  display:grid;grid-template-columns:1.5fr .95fr .6fr;gap:26px;align-items:center;
}
/* fine dotted paper texture across the whole card — replaces the old giant '؟'
   watermark, which the illustration now carries properly */
.noon-quiz::before{
  content:'';position:absolute;inset:0;pointer-events:none;
  background-image:radial-gradient(rgba(26,93,165,.10) 1.5px, transparent 1.6px);
  background-size:22px 22px;opacity:.55;
}
/* the artwork column */
.noon-quiz-artwrap{
  position:relative;z-index:1;min-width:0;
  display:flex;align-items:flex-end;justify-content:center;
}
.noon-quiz-art{width:100%;height:auto;max-height:230px;display:block}
.noon-quiz-info{position:relative;z-index:2;min-width:0}
.noon-quiz-tag{
  display:inline-block;background:var(--red);color:#fff;
  border-radius:99px;padding:5px 16px;font-size:12.5px;font-weight:700;margin-bottom:14px;
}
.noon-quiz h3{font-size:clamp(21px,2.4vw,29px);margin-bottom:10px;color:var(--ink);line-height:1.45}
.noon-quiz p{color:var(--ink-soft);font-size:15px;max-width:520px}
.noon-quiz-note{
  margin-top:20px;display:inline-block;background:#fff;
  border:1px solid #e8dccb;border-radius:12px;padding:10px 18px;
  font-size:14.5px;color:var(--ink);font-weight:500;
}
.noon-quiz-cd{margin-top:22px}
.noon-quiz-cd > div{background:#fff;border:1px solid #e8dccb}
.noon-quiz-cd b{color:var(--ink)}
.noon-quiz-cd span{color:var(--ink-faint)}
.noon-quiz-actions{display:flex;align-items:center;gap:22px;margin-top:26px;flex-wrap:wrap}
.noon-quiz-rules{color:var(--ink-soft);font-size:14.5px;border-bottom:1px solid rgba(70,84,110,.35);padding-bottom:2px}
.noon-quiz-rules:hover{color:var(--blue);border-bottom-color:var(--blue)}

/* the prize is the one dark element — it becomes the focal point of the card */
.noon-quiz-prize{
  position:relative;z-index:2;text-align:center;
  background:linear-gradient(150deg,var(--night),var(--night-2));
  border-radius:var(--r-m);padding:30px 20px;box-shadow:var(--shadow-m);
}
.noon-quiz-amount{
  display:block;font-family:'Amiri',serif;font-size:62px;font-weight:700;
  line-height:1;color:#f4c96b;letter-spacing:-2px;
}
.noon-quiz-cur{display:block;font-size:16px;color:#cfe2fa;margin-top:8px}
.noon-quiz-sub{display:block;font-size:13.5px;color:#93aecd;margin-top:14px;line-height:1.6}

@media(max-width:980px){
  /* keep text + prize side by side, drop the artwork to its own full row */
  .noon-quiz{grid-template-columns:1.3fr .7fr;gap:22px;padding:30px 24px}
  .noon-quiz-artwrap{grid-column:1 / -1;order:3;max-height:150px}
  .noon-quiz-art{max-height:150px}
}
@media(max-width:860px){
  .noon-quiz{grid-template-columns:1fr;padding:28px 22px;gap:22px}
  .noon-quiz p{font-size:14.5px}
  .noon-quiz-prize{padding:22px 16px}
  .noon-quiz-amount{font-size:52px}
  .noon-quiz-actions{gap:16px}
  .noon-quiz-actions .noon-btn{width:100%}
  .noon-quiz-artwrap,.noon-quiz-art{max-height:132px}
}

/* v1.42.0 — the group attribution moved out of its own full-width row at the
   very bottom (which added a whole band to the footer's height) and into the
   brand column, under the description. The footer is back to its old depth. */
.noon-foot-group{
  margin-top:10px;font-size:13.5px;color:rgba(233,241,250,.6);letter-spacing:.2px
}
.noon-foot-group a{
  color:#cfe2fa;border-bottom:1px solid rgba(207,226,250,.4);padding-bottom:1px;
  transition:color .2s,border-color .2s
}
.noon-foot-group a:hover{color:#fff;border-bottom-color:#fff}

/* ====== v1.27.0 floating competition badge ======
   Was absolutely positioned inside the hero on desktop and *static* under
   980px — which added ~150px to the hero's height on a phone. It is now
   `position:fixed` at every size, so it lives outside document flow entirely
   and cannot change the size of the hero (or anything else) on any screen.
   It also stays with the reader as they scroll instead of vanishing. */
.noon-quiz-badge{
  position:fixed;left:22px;bottom:calc(22px + env(safe-area-inset-bottom,0px));
  z-index:60;
  width:104px;height:104px;border-radius:50%;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:0;
  background:radial-gradient(circle at 32% 28%,#ff6a63,#d9231f 62%,#a3120f);
  color:#fff !important;text-align:center;
  border:2px solid rgba(255,255,255,.22);
  box-shadow:0 14px 34px -10px rgba(217,35,32,.75),inset 0 -5px 14px rgba(0,0,0,.18);
  animation:noonBadgeFloat 3.6s ease-in-out infinite,
            noonBadgeGlow 2.2s ease-in-out infinite;
}
/* Pausing on hover instead of adding a transform: the float animation already
   owns transform, and a hover transform would fight it. */
.noon-quiz-badge:hover{animation-play-state:paused;filter:brightness(1.16)}

.noon-quiz-badge-ring{
  position:absolute;inset:-2px;border-radius:50%;pointer-events:none;
  animation:noonBadgeRing 2.2s ease-out infinite;
}
.noon-quiz-badge-ico{display:grid;place-items:center;width:17px;height:17px;color:#ffd9d6}
.noon-quiz-badge-ico svg{width:16px;height:16px;display:block}
.noon-quiz-badge-amount{
  font-family:'Amiri',serif;font-size:27px;font-weight:700;line-height:1.05;
  color:#fff;letter-spacing:-1px;
}
.noon-quiz-badge-cur{font-size:11px;color:#ffe0de;line-height:1;margin-top:1px}
.noon-quiz-badge-lbl{
  font-size:9px;font-weight:700;color:#fff;letter-spacing:.1px;
  margin-top:5px;padding-top:4px;border-top:1px solid rgba(255,255,255,.28);
  width:74%;line-height:1.3;
}

@keyframes noonBadgeFloat{
  0%,100%{transform:translateY(0) rotate(-4deg)}
  50%{transform:translateY(-12px) rotate(4deg)}
}
@keyframes noonBadgeGlow{
  0%,100%{filter:brightness(1)}
  50%{filter:brightness(1.2)}
}
@keyframes noonBadgeRing{
  0%{box-shadow:0 0 0 0 rgba(239,70,64,.6)}
  70%{box-shadow:0 0 0 18px rgba(239,70,64,0)}
  100%{box-shadow:0 0 0 0 rgba(239,70,64,0)}
}

@media(max-width:600px){
  .noon-quiz-badge{
    width:86px;height:86px;left:14px;
    bottom:calc(14px + env(safe-area-inset-bottom,0px));
    border-width:1.5px;
  }
  .noon-quiz-badge-ico{width:14px;height:14px}
  .noon-quiz-badge-ico svg{width:13px;height:13px}
  .noon-quiz-badge-amount{font-size:23px}
  .noon-quiz-badge-cur{font-size:9.5px}
  .noon-quiz-badge-lbl{font-size:7.5px;margin-top:4px;padding-top:3px}
}

/* A badge that pulses and drifts forever is exactly what this setting is for. */
@media (prefers-reduced-motion:reduce){
  .noon-quiz-badge,.noon-quiz-badge-ring{animation:none}
  .noon-quiz-badge{transform:none}
  .noon-quiz-badge:hover{filter:none}
}

/* ====== v1.28.0 mobile fixes ======
   Each one traces to a measurement at 390px, not an impression. */

/* 1. THE BIG ONE — shop and product pages laid out at 1240px on phones.
   The Visa Acceptance gateway ships `.woocommerce{display:grid}` inside
   `@media screen and (max-width:481px)` in
   visa-acceptance-payment-gateway-blocks.css. <body> carries the `woocommerce`
   class on every shop/product/cart page, so body became a grid container — and
   a grid's auto column sizes to max-content, so the whole page laid itself out
   at 1240px inside a 375px viewport and was then clipped by
   html{overflow-x:hidden}. Header, nav and logo were pushed off-screen.
   Measured on /shop/ at 390px: topbar/header/main 1240px before → 375px after,
   product grid 1208px → 343px.
   Scoped to `body` only, so the plugin's own .woocommerce wrappers keep
   whatever layout it actually intended. Fixed here rather than in the plugin
   because a plugin edit would be wiped by its next update. */
@media (max-width:481px){
  body.woocommerce{display:block}
}

/* 2. Card share button was 34x34 against the ~44px a fingertip expects.
   It is always visible on touch devices (see the hover:none rule above), so on
   a phone it is a real target, not a hover affordance. */
@media(max-width:860px){
  .noon-share-mini{width:42px;height:42px;top:10px;left:10px}
  .noon-share-mini svg{width:18px;height:18px}
}

/* 3. Currency symbol rendered at 11px next to a much larger price. */
.woocommerce-Price-currencySymbol{font-size:inherit}

/* 4. The floating badge's own label was 7.5px on small screens — below the
   ~11px floor this audit uses. Slightly bigger circle so a legible label fits. */
@media(max-width:600px){
  .noon-quiz-badge{width:94px;height:94px}
  .noon-quiz-badge-amount{font-size:25px}
  .noon-quiz-badge-cur{font-size:10.5px}
  .noon-quiz-badge-lbl{font-size:9.5px;margin-top:4px;padding-top:4px}
}

/* v1.28.1 — .noon-sec-head is a flex row with no wrap, so on the shop page the
   title block was crushed to 50px wide (128px tall, text wrapping to five
   lines) by the 277px sort dropdown beside it. Measured at 364px viewport.
   Allowing wrap fixes it without forcing a column everywhere: the homepage
   heads (title + short «عرض الكل ←» link) still sit on one line, and only the
   ordering form — which needs real width — drops to its own row. */
@media(max-width:860px){
  .noon-sec-head{flex-wrap:wrap;align-items:flex-end;gap:12px}
  .noon-sec-head > *{min-width:0}
  .noon-sec-head > div:first-child{flex:1 1 auto}
  .noon-sec-head .woocommerce-ordering,
  .noon-sec-head > div:has(.woocommerce-ordering){flex:1 1 100%}
  .woocommerce .woocommerce-ordering,
  .woocommerce .woocommerce-ordering select{width:100%}
}

/* v1.29.0 — anchor the badge to the CONTENT edge, not the screen edge.
   At 1905px it was sitting 18px from the viewport edge but 203px away from the
   1240px content column — marooned in dead margin. Now it tracks the container:
   it sits just outside the content's left edge with a ~20px gap, and falls back
   to a 14px screen inset once the margin runs out (≈1500px and below), so
   tablets and phones are unchanged. */
.noon-quiz-badge{
  left:max(14px, calc((100% - 1240px) / 2 - 128px));
}
@media(max-width:600px){
  .noon-quiz-badge{left:14px}
}

/* ====== v1.35.0 pre-order banner — drawn from the cover ======
   Was an ink-navy gradient. The cover is graphite line-work on warm paper with
   the title as the only red thing on it, so the banner now works the same way:
   paper ground, a pencil elevation of a downtown street behind the text, and
   red reserved for the flag, the price and the CTA. Keeps it distinct from the
   quiz card, which is warm cream — this one is cooler, greyer, drawing-sheet. */
.noon-pre{
  display:grid;grid-template-columns:auto 1fr;gap:34px;align-items:center;
  background:linear-gradient(168deg,#f8f5f1 0%,#efeae4 48%,#e5ded6 100%);
  border:1px solid #ded6cb;
  border-radius:var(--r-l);padding:32px 38px;position:relative;overflow:hidden;
  color:#3a352f !important;box-shadow:var(--shadow-m);
  transition:transform .35s var(--ease),box-shadow .35s var(--ease);
}
.noon-pre:hover{transform:translateY(-4px);box-shadow:var(--shadow-l)}
/* the drawing. Sits behind everything, bottom-anchored like a street horizon. */
.noon-pre-art{
  position:absolute;left:0;right:0;bottom:0;width:100%;height:100%;
  color:#8b8177;opacity:.32;pointer-events:none;z-index:0;
}
/* paper warmth over the drawing so the text side stays quiet */
.noon-pre::after{
  content:'';position:absolute;inset:0;pointer-events:none;z-index:0;
  background:linear-gradient(200deg,rgba(248,245,241,.92) 18%,rgba(248,245,241,.30) 52%,transparent 78%);
}
.noon-pre-cover{position:relative;z-index:1;flex:0 0 auto;width:206px}
.noon-pre-cover img{
  width:206px;height:auto;display:block;border-radius:8px;
  border:1px solid #ddd4c9;
  box-shadow:0 22px 44px -18px rgba(58,48,38,.55);
}
/* top-LEFT, not right: the cover prints «يوسف زيدان» across its top-right and
   the flag was sitting on the author's name. The top-left is empty sky. */
.noon-pre-flag{
  position:absolute;top:10px;left:-8px;background:var(--red);color:#fff;
  font-size:11.5px;font-weight:800;padding:5px 12px;border-radius:99px;
  box-shadow:0 6px 16px -6px rgba(217,35,32,.55);white-space:nowrap;
}
.noon-pre-info{position:relative;z-index:1;min-width:0}
.noon-pre-tag{
  display:inline-block;background:#fff;border:1px solid #e3dbd1;
  color:var(--red);border-radius:99px;padding:5px 15px;font-size:12.5px;font-weight:700;margin-bottom:12px;
}
.noon-pre h3{font-size:clamp(23px,2.8vw,34px);margin-bottom:6px;color:#2c2721;line-height:1.35}
.noon-pre-author{color:#6d655c;font-size:14.5px;margin-bottom:12px}
.noon-pre-author b{color:#2c2721;font-weight:700}
.noon-pre p{color:#6d655c;font-size:15px;max-width:560px;margin-bottom:4px}
.noon-pre-cd{margin-top:16px}
.noon-pre-cd > div{background:#fff;border:1px solid #e3dbd1}
.noon-pre-cd b{color:#2c2721}
.noon-pre-cd span{color:#a0978c}
.noon-pre-foot{display:flex;align-items:center;gap:20px;margin-top:22px;flex-wrap:wrap}
.noon-pre-price{font-size:22px;font-weight:800;color:#2c2721}
.noon-pre-price del{color:#a0978c;font-size:16px;font-weight:500;margin-left:8px}
.noon-pre-price ins{text-decoration:none;color:#2c2721}
.noon-pre-date{font-size:13.5px;color:#857c72}

@media(max-width:860px){
  .noon-pre{grid-template-columns:1fr;gap:20px;padding:24px 20px;text-align:center;justify-items:center}
  .noon-pre::after{background:linear-gradient(180deg,rgba(248,245,241,.94) 30%,rgba(248,245,241,.45) 70%,transparent)}
  .noon-pre-art{height:62%;opacity:.26}
  .noon-pre-cover{width:154px}
  .noon-pre-cover img{width:154px}
  .noon-pre-flag{left:-6px;right:auto;font-size:10.5px;padding:4px 10px}
  .noon-pre p{font-size:14px}
  .noon-pre-cd{justify-content:center}
  .noon-pre-foot{justify-content:center;gap:14px}
  .noon-pre-foot .noon-btn{width:100%}
}

/* v1.34.0 — author cross-promotion strip on product pages */
.noon-xpromo{
  display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:16px;
  margin:26px 0 30px;padding:14px 18px;border-radius:var(--r-m);
  background:linear-gradient(100deg,var(--night) 0%,var(--night-2) 100%);
  color:#fff;box-shadow:var(--shadow-m);
  transition:transform .3s var(--ease),box-shadow .3s var(--ease)
}
.noon-xpromo:hover{transform:translateY(-3px);box-shadow:var(--shadow-l)}
.noon-xpromo-cover img{width:56px;height:auto;border-radius:6px;box-shadow:var(--shadow-s)}
.noon-xpromo-txt{min-width:0;display:flex;flex-direction:column;gap:2px}
.noon-xpromo-kicker{
  font-size:11.5px;font-weight:800;letter-spacing:.4px;color:#f4c96b;
  text-transform:none
}
.noon-xpromo-txt strong{font-family:'Amiri','Tajawal',serif;font-size:19px;font-weight:700;line-height:1.35}
.noon-xpromo-date{font-size:12.5px;color:#a9c4e6}
.noon-xpromo-cta{
  flex:0 0 auto;background:var(--red);color:#fff;font-size:14px;font-weight:700;
  padding:10px 18px;border-radius:999px;white-space:nowrap
}
@media(max-width:600px){
  .noon-xpromo{grid-template-columns:auto 1fr;gap:12px;padding:12px 14px}
  .noon-xpromo-txt strong{font-size:17px}
  .noon-xpromo-cta{grid-column:1 / -1;text-align:center;padding:9px 14px}
}

/* v1.34.0 — "أخبرني عند الصدور" on the pre-order product page.
   Dark on purpose: .noon-subscribe's input/button styling assumes a dark
   ground (translucent white field), so a light card would render an
   invisible input. */
.noon-notify{
  display:grid;grid-template-columns:1fr minmax(280px,420px);gap:26px;align-items:center;
  margin:30px 0 6px;padding:26px 30px;border-radius:var(--r-l);
  background:linear-gradient(115deg,var(--night) 0%,var(--night-2) 100%);color:#eef4fb
}
.noon-notify-txt h3{font-size:24px;color:#fff;margin-bottom:6px}
.noon-notify-txt p{font-size:14.5px;color:#a9c4e6;max-width:52ch}
.noon-notify-form{margin-top:0;max-width:none}
@media(max-width:860px){
  .noon-notify{grid-template-columns:1fr;gap:18px;padding:24px 20px;text-align:center}
  .noon-notify-txt p{margin-inline:auto}
}
.noon-pdp-info .stock-pre{color:#b0741c}

/* v1.35.1 — the countdown is a non-wrapping flex row 332px wide; inside the
   banner card that is 311px at a 360px viewport, so the last tile was being
   clipped by the card's overflow:hidden. Narrow the tiles and let them wrap. */
@media(max-width:420px){
  .noon-pre-cd{flex-wrap:wrap;gap:8px;justify-content:center}
  .noon-pre-cd > div{width:calc(25% - 6px);min-width:60px;padding:8px 0}
}

/* v1.36.0 — the shipping block is always collected, so its checkbox is not a
   question any more. The input is hidden but stays in the form (checked), which
   is what keeps WooCommerce treating the shipping fields as authoritative. */
#ship-to-different-address-checkbox{display:none !important}
#ship-to-different-address label{cursor:default}

/* ====== v1.38.0 blog pager ======
   `the_posts_pagination()` shipped bare, unstyled links; readers never saw that
   a second page existed. This states the position in words, then gives the
   next-page control the same weight as any other primary action on the site. */
.noon-pager{
  margin-top:44px;padding-top:30px;border-top:1px solid var(--line);
  display:flex;flex-direction:column;align-items:center;gap:18px;text-align:center;
}
.noon-pager-count{font-size:15px;color:var(--ink-soft)}
.noon-pager-count b{color:var(--ink);font-weight:800}
.noon-pager-links{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;align-items:center}
.noon-pager-links .page-numbers{
  min-width:48px;height:48px;padding:0 16px;display:inline-grid;place-items:center;
  border-radius:14px;border:1.5px solid var(--line);background:var(--card);
  color:var(--ink);font-weight:700;font-size:16px;box-shadow:var(--shadow-s);
  transition:transform .25s var(--ease),border-color .2s,color .2s,background .2s;
}
.noon-pager-links a.page-numbers:hover{
  border-color:var(--blue);color:var(--blue);transform:translateY(-2px);box-shadow:var(--shadow-m);
}
.noon-pager-links .page-numbers.current{
  background:var(--night);border-color:var(--night);color:#fff;box-shadow:var(--shadow-m);
}
.noon-pager-links .page-numbers.dots{
  border:none;background:none;box-shadow:none;min-width:22px;padding:0;color:var(--ink-faint);
}
/* the two direction controls carry the weight — this is the bit that was missed */
.noon-pager-links .prev,.noon-pager-links .next{
  background:var(--red);border-color:var(--red);color:#fff;padding:0 24px;font-size:15.5px;
  box-shadow:0 10px 24px -10px rgba(217,35,32,.55);
}
.noon-pager-links a.prev:hover,.noon-pager-links a.next:hover{
  background:#bf1d1a;border-color:#bf1d1a;color:#fff;
}
@media(max-width:600px){
  .noon-pager{margin-top:34px;padding-top:24px;gap:14px}
  .noon-pager-count{font-size:14px}
  .noon-pager-links{gap:8px}
  .noon-pager-links .page-numbers{min-width:44px;height:44px;font-size:15px;padding:0 12px}
  .noon-pager-links .prev,.noon-pager-links .next{width:100%;padding:0 18px}
}

/* ====== v1.39.0 — checkout laid out as one column of cards ======
   The billing block used to repeat the whole address next to the shipping
   block, so customers typed it twice. Its address fields are now disabled in
   Checkout Field Editor and only the phone and email remain, which left the
   two-column grid badly lopsided. One column, three labelled cards, address
   first and contact second. */
.woocommerce-checkout .col2-set{
  display:flex;flex-direction:column;gap:20px;width:100%;float:none;margin:0 0 24px
}
.woocommerce-checkout .col2-set .col-1,
.woocommerce-checkout .col2-set .col-2{width:100%;float:none;padding:0;margin:0}
.woocommerce-checkout .col2-set .col-1{order:1}  /* بيانات التواصل first — it is two fields */
.woocommerce-checkout .col2-set .col-2{order:2}  /* then عنوان الشحن, with the order notes under it */

.woocommerce-checkout .woocommerce-billing-fields,
.woocommerce-checkout .woocommerce-shipping-fields,
.woocommerce-checkout .woocommerce-additional-fields{
  background:var(--card);border:1px solid var(--line);border-radius:var(--r-m);
  padding:26px 28px;box-shadow:var(--shadow-s)
}
.woocommerce-checkout .woocommerce-billing-fields > h3,
.woocommerce-checkout .woocommerce-shipping-fields > h3,
.woocommerce-checkout .woocommerce-additional-fields > h3{
  font-family:'Amiri','Tajawal',serif;font-size:21px;line-height:1.4;color:var(--ink);
  margin:0 0 18px;padding-bottom:14px;border-bottom:1px solid var(--line)
}
/* the fields themselves: a two-up grid that wide rows span */
/* the grid goes on the *field wrapper*, not on .shipping_address — that div
   holds a single wrapper child, so a grid there put every field in column 1 */
.woocommerce-checkout .woocommerce-billing-fields__field-wrapper,
.woocommerce-checkout .woocommerce-shipping-fields__field-wrapper,
.woocommerce-checkout .woocommerce-additional-fields__field-wrapper{
  display:grid;grid-template-columns:1fr 1fr;gap:16px 18px
}
.woocommerce-checkout .col2-set .form-row{margin:0;padding:0;width:auto;float:none}
.woocommerce-checkout .col2-set .form-row-wide{grid-column:1 / -1}
/* pairs that read better side by side */
#shipping_first_name_field,#shipping_last_name_field,
#billing_phone_field,#billing_email_field{grid-column:auto}
#order_comments_field{grid-column:1 / -1}
.woocommerce-checkout .col2-set .form-row label{
  display:block;margin-bottom:7px;font-size:14.5px;font-weight:600;color:var(--ink)
}
/* single-country store: this row only ever says «مصر» */
#billing_country_field,#shipping_country_field{display:none !important}

@media(max-width:700px){
  .woocommerce-checkout .woocommerce-billing-fields,
  .woocommerce-checkout .woocommerce-shipping-fields,
  .woocommerce-checkout .woocommerce-additional-fields{padding:20px 18px}
  .woocommerce-checkout .woocommerce-billing-fields__field-wrapper,
  .woocommerce-checkout .woocommerce-shipping-fields__field-wrapper,
  .woocommerce-checkout .woocommerce-additional-fields__field-wrapper{
    grid-template-columns:1fr;gap:14px
  }
  #shipping_first_name_field,#shipping_last_name_field,
  #billing_phone_field,#billing_email_field{grid-column:1 / -1}
}

/* ====== v1.40.0 checkout: coupon link, international note, payment box ====== */

/* the coupon toggle read as plain body text and nobody saw it was a link */
.woocommerce-form-coupon-toggle .showcoupon{
  color:var(--blue);text-decoration:underline;text-underline-offset:3px;
  font-weight:700;cursor:pointer
}
.woocommerce-form-coupon-toggle .showcoupon:hover{color:var(--night)}

/* «تطلب من خارج مصر؟» — the store ships only inside Egypt */
.noon-intl{
  display:flex;align-items:center;justify-content:space-between;gap:22px;flex-wrap:wrap;
  background:linear-gradient(120deg,#f1f8f3,#e6f4ea);
  border:1px solid #cfe7d6;border-radius:var(--r-m);
  padding:22px 26px;margin:0 0 26px
}
.noon-intl-txt h3{font-family:'Amiri','Tajawal',serif;font-size:20px;color:var(--ink);margin:0 0 6px}
.noon-intl-txt p{font-size:14.5px;color:var(--ink-soft);max-width:60ch;margin:0;line-height:1.85}
.noon-intl-wa{
  flex:0 0 auto;display:inline-flex;align-items:center;gap:10px;
  background:#25d366;color:#fff;font-weight:700;font-size:15px;
  padding:13px 22px;border-radius:99px;white-space:nowrap;
  box-shadow:0 10px 24px -10px rgba(37,211,102,.75);
  transition:transform .25s var(--ease),background .2s
}
.noon-intl-wa:hover{background:#1eb85a;color:#fff;transform:translateY(-2px)}
.noon-intl-wa svg{width:22px;height:22px;flex:0 0 22px}

/* payment box: no card artwork, and a selector you cannot miss */
#payment .wc_payment_method img,
#payment .wc_payment_method svg,
#payment .wc_payment_method .payment_method_icon{display:none !important}
#payment ul.wc_payment_methods{
  list-style:none;margin:0 0 18px;padding:0;display:flex;flex-direction:column;gap:12px;border:none
}
/* the radio is a sibling of the label, not inside it — so the row itself has
   to be the flex container or the circle drifts to the far corner */
#payment ul.wc_payment_methods li{
  background:#fff;border:1.5px solid var(--line);border-radius:14px;
  padding:18px 20px;margin:0;display:flex;flex-wrap:wrap;align-items:center;gap:14px;
  transition:border-color .2s,box-shadow .2s
}
#payment ul.wc_payment_methods li:has(input:checked){
  border-color:var(--blue);box-shadow:0 0 0 3px rgba(26,93,165,.12)
}
#payment ul.wc_payment_methods li > label{
  flex:1 1 auto;cursor:pointer;padding:0;margin:0;
  font-size:16px;font-weight:700;color:var(--ink)
}
#payment ul.wc_payment_methods li input[type="radio"]{
  order:-1;width:26px;height:26px;flex:0 0 26px;margin:0;accent-color:var(--blue);cursor:pointer
}
#payment div.payment_box{flex:1 0 100%;margin:4px 0 0;font-size:14.5px;color:var(--ink-soft)}
#payment div.payment_box::before{display:none}

@media(max-width:700px){
  .noon-intl{flex-direction:column;align-items:stretch;text-align:center;padding:20px 18px}
  .noon-intl-wa{justify-content:center;width:100%}
  .noon-intl-txt p{margin-inline:auto}
  #payment ul.wc_payment_methods li{padding:16px}
  #payment ul.wc_payment_methods li > label{font-size:15.5px}
}

/* ====== v1.41.0 checkout upsell strip ====== */
.noon-upsell{
  background:var(--card);border:1px solid var(--line);border-radius:var(--r-m);
  padding:22px 24px;margin:0 0 26px;box-shadow:var(--shadow-s)
}
.noon-upsell-head{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;flex-wrap:wrap;margin-bottom:18px}
.noon-upsell-head h3{font-family:'Amiri','Tajawal',serif;font-size:20px;color:var(--ink);margin:0 0 4px}
.noon-upsell-head p{font-size:14px;color:var(--ink-soft);margin:0;max-width:62ch}
.noon-upsell-all{font-size:14px;font-weight:700;color:var(--blue);white-space:nowrap}
.noon-upsell-all:hover{color:var(--night)}
/* auto-fit rather than a fixed 4-up: at the checkout's ~715px the four cards
   were ~165px each and the button wrapped onto two lines */
.noon-upsell-row{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(205px,1fr));gap:14px
}
.noon-upsell-card{
  display:flex;gap:12px;align-items:center;min-width:0;
  border:1px solid var(--line);border-radius:12px;padding:10px;background:var(--paper);
  transition:opacity .35s var(--ease),transform .35s var(--ease)
}
.noon-upsell-card.is-added{opacity:0;transform:scale(.96)}
.noon-upsell-cover{flex:0 0 58px;width:58px}
.noon-upsell-cover img{width:58px;height:auto;border-radius:6px;display:block;box-shadow:var(--shadow-s)}
.noon-upsell-info{min-width:0;display:flex;flex-direction:column;gap:4px}
.noon-upsell-title{
  font-size:14px;font-weight:700;color:var(--ink);line-height:1.45;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden
}
.noon-upsell-title:hover{color:var(--blue)}
.noon-upsell-price{font-size:13.5px;font-weight:800;color:var(--ink-soft)}
.noon-upsell-price del{display:none}
.noon-upsell-add{
  align-self:flex-start;background:var(--tint);color:var(--blue);border:1px solid #c9def6;
  font-size:12.5px;font-weight:800;padding:6px 12px;border-radius:99px;margin-top:2px;
  transition:background .2s,color .2s,border-color .2s
}
.noon-upsell-add:hover{background:var(--blue);color:#fff;border-color:var(--blue)}
.noon-upsell-add:disabled{opacity:.75;cursor:default}
.noon-upsell-add.is-added{background:#e6f4ea;border-color:#bfe3cb;color:#1e7a43}
.noon-upsell-add.is-error{background:#fde9e9;border-color:#f5c2c2;color:var(--red)}

@media(max-width:700px){
  .noon-upsell{padding:18px 16px}
  .noon-upsell-row{grid-template-columns:1fr}
  .noon-upsell-head{align-items:flex-start}
}

/* ====== v1.43.0 mobile pass ======
   Measured at a 375px viewport (390px device, 15px scrollbar) across home,
   shop, product, cart, checkout, blog and article. */

/* 1. THE REAL BUG: the shop pagination is a non-wrapping inline-flex row of
   nine 40px pills = 440px, so on a 375px screen it sat at left:-67px and the
   first numbers were simply off-screen. It wraps now, and the direction
   controls get the same weight they have on the blog pager. */
.woocommerce nav.woocommerce-pagination ul{flex-wrap:wrap;max-width:100%}
.woocommerce nav.woocommerce-pagination ul li a.prev,
.woocommerce nav.woocommerce-pagination ul li a.next{
  width:auto;padding:0 18px;background:var(--red);border-color:var(--red);color:#fff;
  box-shadow:0 8px 20px -10px rgba(217,35,32,.6)
}
.woocommerce nav.woocommerce-pagination ul li a.prev:hover,
.woocommerce nav.woocommerce-pagination ul li a.next:hover{background:#bf1d1a;border-color:#bf1d1a;color:#fff}
@media(max-width:600px){
  .woocommerce nav.woocommerce-pagination{margin:22px 0 8px}
  .woocommerce nav.woocommerce-pagination ul{gap:8px}
  .woocommerce nav.woocommerce-pagination ul li a,
  .woocommerce nav.woocommerce-pagination ul li span{width:42px;height:42px;font-size:15px}
  .woocommerce nav.woocommerce-pagination ul li a.prev,
  .woocommerce nav.woocommerce-pagination ul li a.next{width:auto;padding:0 16px}
}

/* 2. Text that was under the ~11px legibility floor on a phone. */
.noon-card-cat{font-size:12.5px}
.noon-save{font-size:12px}
@media(max-width:860px){
  .noon-pre-flag{font-size:11.5px;padding:5px 11px}
}
/* The badge's «مسابقة أسبوعية» line was 9.5px — too small to read and too
   small to fix by growing the circle, which the owner already asked to keep
   small. Dropped on phones; the aria-label still carries the full wording. */
@media(max-width:600px){
  .noon-quiz-badge-lbl{display:none}
  .noon-quiz-badge-amount{font-size:27px}
  .noon-quiz-badge-cur{font-size:12px;margin-top:2px}
  .noon-quiz-badge-ico{width:16px;height:16px}
  .noon-quiz-badge-ico svg{width:15px;height:15px}
}

/* 3. Checkout upsell: a 32px button is under the 44px touch target guidance,
   and there is room for a full-width one once the cards stack. */
@media(max-width:700px){
  .noon-upsell-add{width:100%;text-align:center;padding:11px 14px;font-size:13.5px}
  .noon-upsell-info{flex:1 1 auto}
  .noon-upsell-card{align-items:flex-start}
  .noon-upsell-cover{align-self:center}
}

/* v1.45.0 — entry counter on the competition banner */
.noon-quiz-entries{
  display:inline-flex;align-items:center;gap:8px;margin-top:16px;
  background:#fff;border:1px solid #e8dccb;border-radius:99px;
  padding:8px 16px;font-size:14px;font-weight:700;color:var(--ink)
}
.noon-quiz-entries svg{width:17px;height:17px;flex:0 0 17px;color:var(--red)}
a.noon-quiz-entries{cursor:pointer;text-decoration:none;color:var(--ink);transition:border-color .25s,box-shadow .25s,transform .25s,background .25s}
a.noon-quiz-entries:hover,a.noon-quiz-entries:focus-visible{border-color:var(--red);background:#fff;color:var(--red);transform:translateY(-2px);box-shadow:0 8px 20px rgba(217,35,32,.16)}
a.noon-quiz-entries:hover span{text-decoration:underline;text-underline-offset:3px}
.noon-qe-arrow{width:15px !important;height:15px !important;flex:0 0 15px !important;color:var(--red);opacity:.5;transition:transform .25s,opacity .25s}
a.noon-quiz-entries:hover .noon-qe-arrow{opacity:1;transform:translateX(-3px)}
@media(max-width:600px){
  .noon-quiz-entries{font-size:13.5px;padding:7px 14px;margin-top:14px}
}

/* ====== v1.46.0 — blog section backdrop + image fallback for imageless cards ====== */
.noon-blog-sec{position:relative;overflow:hidden;background:linear-gradient(180deg,#fbf7f1 0%,#f5eee3 55%,#efe6d8 100%)}
.noon-blog-sec::before{content:'';position:absolute;inset:0;pointer-events:none;z-index:0;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140' viewBox='0 0 140 140'%3E%3Cg fill='none' stroke='%23b39c74' stroke-width='1.5' opacity='.30'%3E%3Cpath d='M20 40c9-7 20-8 29-3v22c-9-5-20-4-29 3z'/%3E%3Cpath d='M49 37c9-5 20-4 29 3v22c-9-7-20-8-29-3z'/%3E%3Cpath d='M96 96c7-5 15-6 22-2v16c-7-4-15-3-22 2z'/%3E%3C/g%3E%3Cg fill='%23b39c74' opacity='.22'%3E%3Ccircle cx='24' cy='108' r='2.4'/%3E%3Ccircle cx='118' cy='30' r='2.4'/%3E%3Ccircle cx='68' cy='128' r='2.4'/%3E%3C/g%3E%3C/svg%3E");
  background-size:140px 140px}
.noon-blog-sec::after{content:'';position:absolute;inset:0;pointer-events:none;z-index:0;
  background:radial-gradient(120% 80% at 50% 0%,rgba(255,255,255,.85) 0%,rgba(255,255,255,0) 62%)}
.noon-blog-sec>.noon-container{position:relative;z-index:1}
.noon-blog-sec .noon-bcard{box-shadow:0 6px 22px rgba(45,35,20,.07)}
.noon-blog-sec .noon-bcard:hover{box-shadow:0 16px 40px rgba(45,35,20,.16)}

/* ====== v1.49.0 — the house newsletter form ====== */
.noon-sub-form{display:flex;gap:10px;flex-wrap:wrap;width:100%;position:relative}
.noon-sub-form input[type="email"]{flex:1;min-width:200px}
.noon-sub-form button{white-space:nowrap}
.noon-sub-form button[disabled]{opacity:.6;cursor:default;transform:none}
.noon-sub-hp{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap}
.noon-sub-msg{flex:0 0 100%;margin:2px 0 0;font-size:13.5px;line-height:1.7;min-height:0}
.noon-sub-msg:empty{display:none}
.noon-sub-form.is-ok .noon-sub-msg{color:#8fe0b0}
.noon-sub-form.is-err .noon-sub-msg{color:#ff9f9c}
.noon-unsub-note{background:#0b1e3c;color:#f2e3c6;text-align:center;padding:14px 18px;font-size:14.5px;font-weight:600}

/* ====== v1.50.0 — newsletter + follow, one card ====== */
.noon-join{position:relative;z-index:1;margin-top:34px;padding-top:26px;border-top:1px solid rgba(255,255,255,.14);
  display:flex;flex-direction:column;align-items:center;gap:16px}
.noon-join-lbl{color:#8fa3bf;font-size:14px;line-height:1.7}
.noon-join-icons{display:flex;gap:10px}
.noon-join-icons a{width:44px;height:44px;border-radius:12px;background:rgba(255,255,255,.10);
  border:1.5px solid rgba(255,255,255,.22);display:grid;place-items:center;color:#fff;
  transition:background .25s var(--ease),color .25s var(--ease),transform .25s var(--ease),border-color .25s}
.noon-join-icons svg{width:21px;height:21px}
.noon-join-icons a:hover{background:var(--red);border-color:var(--red);color:#fff;transform:translateY(-3px)}
@media(max-width:640px){
  .noon-join{margin-top:26px;padding-top:20px;gap:14px}
  .noon-join-lbl{font-size:13px}
  .noon-join-icons a{width:42px;height:42px}
}

/* ====== v1.51.0 — the newsletter card goes red ====== */
.noon-newsletter{background:linear-gradient(120deg,#4a0f0d 0%,#8c1a16 55%,#c22c24 100%)}
.noon-newsletter::before{color:rgba(255,255,255,.11) !important}
.noon-newsletter p{color:#f6cecb}
.noon-newsletter .noon-subscribe input[type="email"]{background:rgba(255,255,255,.14);border-color:rgba(255,255,255,.32)}
.noon-newsletter .noon-subscribe input[type="email"]::placeholder{color:#f0bfbc}
.noon-newsletter .noon-subscribe input[type="email"]:focus{border-color:#fff;background:rgba(255,255,255,.22)}
.noon-newsletter .noon-subscribe button,
.noon-newsletter .noon-subscribe input[type="submit"]{background:#fff;color:#8c1a16}
.noon-newsletter .noon-subscribe button:hover,
.noon-newsletter .noon-subscribe input[type="submit"]:hover{background:#f2e3c6;color:#6d1310;filter:none}
.noon-newsletter .noon-join{border-top-color:rgba(255,255,255,.22)}
.noon-newsletter .noon-join-lbl{color:#f6cecb}
.noon-newsletter .noon-join-icons a{background:rgba(255,255,255,.13);border-color:rgba(255,255,255,.28)}
.noon-newsletter .noon-join-icons a:hover{background:#fff;border-color:#fff;color:#8c1a16}
.noon-newsletter .noon-sub-form.is-ok .noon-sub-msg{color:#ffe9a8}
.noon-newsletter .noon-sub-form.is-err .noon-sub-msg{color:#ffe0de}

/* v1.52.0 — the footer mark links home */
.noon-foot-logo{display:inline-block;line-height:0;border-radius:12px;transition:transform .25s var(--ease),filter .25s}
.noon-foot-logo:hover{transform:translateY(-2px);filter:brightness(1.04)}
.noon-foot-logo:focus-visible{outline:2px solid var(--red);outline-offset:4px}