/* ==========================================================================
   Kouponate — main stylesheet
   RTL-first (logical properties), light + real dark mode via CSS variables.
   Sections: 1 fonts · 2 tokens · 3 base · 4 shell · 5 components · 6 home
             7 stores · 8 store page · 9 articles · 10 pages · 11 forms
             12 prose · 13 utilities
   ========================================================================== */

/* 1 · Fonts (self-hosted subset, SIL OFL — see assets/fonts/OFL.txt) ------- */
@font-face{font-family:"Kouponate Sans";font-style:normal;font-weight:400;font-display:swap;src:url(../fonts/kouponate-sans-400.woff2) format("woff2")}
@font-face{font-family:"Kouponate Sans";font-style:normal;font-weight:500;font-display:swap;src:url(../fonts/kouponate-sans-500.woff2) format("woff2")}
@font-face{font-family:"Kouponate Sans";font-style:normal;font-weight:600;font-display:swap;src:url(../fonts/kouponate-sans-600.woff2) format("woff2")}
@font-face{font-family:"Kouponate Sans";font-style:normal;font-weight:700;font-display:swap;src:url(../fonts/kouponate-sans-700.woff2) format("woff2")}

/* 2 · Tokens -------------------------------------------------------------- */
:root{
  --font:"Kouponate Sans",system-ui,-apple-system,"Segoe UI",Tahoma,Arial,sans-serif;
  --ground:#F6EFDF;--card:#FFFDF8;--line:#E6DCC6;
  --ink:#1E3648;--ink-2:#3F4B5A;--ink-3:#4A5565;
  --field:#8F8368;--dash:#948868;
  --accent:#C4471F;--accent-hover:#A93A18;--on-accent:#FFFDF8;
  --link:#1F6A72;--link-hover:#0F4A52;
  --ok-bg:#DCEEF0;--ok-ink:#0F5C66;--ok-solid:#0F5C66;--on-ok-solid:#FFFDF8;
  --chip-bg:#FBE3D8;--chip-ink:#8F2F12;
  --warn-bg:#FBEFD9;--warn-ink:#7A4B00;
  --bad-bg:#FBE0DC;--bad-ink:#8A1F11;
  --focus:#1F6A72;
  --hero-1:#CDE6E9;--hero-2:#FADFD2;--hero-line:rgba(255,255,255,.9);--hero-stripe:rgba(255,255,255,.34);
  --radius:16px;
  color-scheme:light;
}
:root[data-theme="dark"]{
  --ground:#0F1B27;--card:#17283A;--line:#2A3F55;
  --ink:#F3EBDD;--ink-2:#B4BFCB;--ink-3:#B4BFCB;
  --field:#66798D;--dash:#6B7F92;
  --accent:#F58A67;--accent-hover:#FFA586;--on-accent:#1E3648;
  --link:#7CC4CB;--link-hover:#A9DDE2;
  --ok-bg:#153A40;--ok-ink:#8FD3DA;--ok-solid:#8FD3DA;--on-ok-solid:#0F1B27;
  --chip-bg:#3B2A26;--chip-ink:#F9B7A0;
  --warn-bg:#3F3220;--warn-ink:#F3C77E;
  --bad-bg:#3E211D;--bad-ink:#F7B3A8;
  --focus:#7CC4CB;
  --hero-1:#16454C;--hero-2:#4A2F29;--hero-line:rgba(255,255,255,.24);--hero-stripe:rgba(255,255,255,.045);
  color-scheme:dark;
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --ground:#0F1B27;--card:#17283A;--line:#2A3F55;
    --ink:#F3EBDD;--ink-2:#B4BFCB;--ink-3:#B4BFCB;
    --field:#66798D;--dash:#6B7F92;
    --accent:#F58A67;--accent-hover:#FFA586;--on-accent:#1E3648;
    --link:#7CC4CB;--link-hover:#A9DDE2;
    --ok-bg:#153A40;--ok-ink:#8FD3DA;--ok-solid:#8FD3DA;--on-ok-solid:#0F1B27;
    --chip-bg:#3B2A26;--chip-ink:#F9B7A0;
    --warn-bg:#3F3220;--warn-ink:#F3C77E;
    --bad-bg:#3E211D;--bad-ink:#F7B3A8;
    --focus:#7CC4CB;
    --hero-1:#16454C;--hero-2:#4A2F29;--hero-line:rgba(255,255,255,.24);--hero-stripe:rgba(255,255,255,.045);
    color-scheme:dark;
  }
}

/* 3 · Base ---------------------------------------------------------------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%;scroll-padding-top:16px}
@media (prefers-reduced-motion:no-preference){html{scroll-behavior:smooth}}
body{display:flex;flex-direction:column;min-height:100vh;min-height:calc(100dvh - var(--wp-admin--admin-bar--height,0px));margin:0;min-width:0;background:var(--ground);color:var(--ink);font-family:var(--font);font-size:16px;line-height:1.6;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
#main{flex:1 0 auto}
#main:focus{outline:0}
img,svg,video{max-width:100%;height:auto}
svg{flex:0 0 auto}
:where(h1,h2,h3,h4,p,ul,ol,dl,dd,figure,blockquote){margin:0}
:where(ul,ol){padding:0}
main:focus{outline:none}
button,input,select,textarea{font:inherit;color:inherit}
a{color:var(--link);text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px}
a:hover{color:var(--link-hover);text-decoration-thickness:2px}
:focus-visible{outline:3px solid var(--focus);outline-offset:2px;border-radius:4px}
::selection{background:var(--chip-bg);color:var(--chip-ink)}
[hidden]{display:none!important}

.screen-reader-text{position:absolute!important;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0}
.skip-link{position:absolute;inset-inline-start:12px;top:-100px;z-index:100;padding:10px 16px;border-radius:10px;background:var(--ink);color:var(--ground);font-weight:600;text-decoration:none}
.skip-link:focus{top:12px;color:var(--ground)}

.wrap{width:100%;max-width:1120px;margin-inline:auto;padding-inline:24px}

/* 4 · Shell: header, footer ---------------------------------------------- */
.site-header{background:var(--card);border-bottom:1px solid var(--line)}
.site-header__in{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:16px;padding-block:16px}
.brand{display:flex;align-items:center;gap:12px;text-decoration:none}
.brand img{display:block;height:46px;width:auto}
.brand__dark{display:none!important}
:root[data-theme="dark"] .brand__light{display:none!important}
:root[data-theme="dark"] .brand__dark{display:block!important}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]) .brand__light{display:none!important}
  :root:not([data-theme="light"]) .brand__dark{display:block!important}
}
.nav{display:flex;flex-wrap:wrap;align-items:center;gap:8px}
.nav a{display:flex;align-items:center;min-height:44px;padding:0 14px;font-size:16px;font-weight:500;color:var(--ink);text-decoration:none;border-radius:10px}
.nav a:hover{color:var(--link-hover);text-decoration:underline;text-decoration-thickness:2px}
.nav a[aria-current="page"],.nav a[aria-current="true"]{font-weight:700;color:var(--accent)}
.theme-toggle{display:flex;align-items:center;justify-content:center;width:44px;height:44px;padding:0;border:1px solid var(--line);border-radius:22px;background:transparent;color:var(--ink);cursor:pointer}
.theme-toggle:hover{background:var(--ground)}
.theme-toggle .i-sun{display:none}
:root[data-theme="dark"] .theme-toggle .i-sun{display:block}
:root[data-theme="dark"] .theme-toggle .i-moon{display:none}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]) .theme-toggle .i-sun{display:block}
  :root:not([data-theme="light"]) .theme-toggle .i-moon{display:none}
}
.no-js .theme-toggle{display:none}

.site-footer{margin-top:0;background:var(--card);border-top:1px solid var(--line)}
.site-footer__in{display:flex;flex-direction:column;gap:16px;padding-block:32px}
.footer-nav{display:flex;flex-wrap:wrap;gap:8px;margin-inline-start:-12px}
.footer-nav a{display:flex;align-items:center;min-height:44px;padding:0 12px;font-size:15px;font-weight:500;color:var(--ink);text-decoration:none;border-radius:10px}
.footer-nav a:hover{color:var(--link-hover);text-decoration:underline;text-decoration-thickness:2px}
.footer-nav a[aria-current="page"]{font-weight:700;color:var(--accent)}
.footer-note{max-width:720px;font-size:14px;color:var(--ink-3)}
.footer-social{display:flex;flex-wrap:wrap;align-items:center;gap:8px;font-size:14px;color:var(--ink-3)}
.footer-social a{display:flex;align-items:center;min-height:44px;padding:0 10px;font-weight:600}

/* 5 · Components ---------------------------------------------------------- */
.page-main{padding-block:32px 64px}
.crumbs{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin-bottom:20px;font-size:14px;color:var(--ink-3)}
.crumbs a{color:var(--ink-3)}
.crumbs a:hover{color:var(--link-hover)}
.crumbs [aria-current]{color:var(--ink);font-weight:600}

.page-title{font-size:clamp(28px,5vw,40px);line-height:1.3;font-weight:700;margin-bottom:8px}
.page-title--sm{font-size:clamp(26px,4.4vw,38px);line-height:1.35}
.page-lead{max-width:640px;font-size:18px;line-height:1.8;color:var(--ink-2);margin-bottom:24px}
.page-lead--lg{font-size:19px;margin-bottom:32px}
.measure{max-width:760px}
.h2{font-size:26px;line-height:1.4;font-weight:700}

.card{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:24px}
.card--sm{padding:20px}
.card--tile{border-radius:14px}
.card__title{margin:0 0 12px;font-size:20px;line-height:1.4;font-weight:700}
.card__title--sm{font-size:18px}
.stack{display:flex;flex-direction:column;gap:24px}
.stack--sm{gap:12px}

.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;height:48px;padding:0 24px;border:0;border-radius:12px;background:var(--accent);color:var(--on-accent);font-size:16px;font-weight:600;line-height:1;text-align:center;text-decoration:none;cursor:pointer}
.btn:hover{background:var(--accent-hover);color:var(--on-accent);text-decoration:none}
.btn--lg{height:52px}
.btn--sm{padding:0 20px;font-size:15px}
.btn--wide{padding-inline:28px}
.btn[disabled]{opacity:.6;cursor:not-allowed}
.btn.is-copied,.btn.is-copied:hover{background:var(--ok-solid);color:var(--on-ok-solid)}

.badge{display:inline-flex;align-items:center;gap:6px;padding:4px 10px;border-radius:14px;background:var(--ok-bg);color:var(--ok-ink);font-size:13px;font-weight:600;line-height:1.5;white-space:nowrap}
.badge--lg{padding:4px 12px;font-size:14px}
.badge--tag{align-self:flex-start;padding:2px 10px;border-radius:12px;white-space:normal}
.badge--chip{background:var(--chip-bg);color:var(--chip-ink)}
.badge--warn{background:var(--warn-bg);color:var(--warn-ink)}
.badge--bad{background:var(--bad-bg);color:var(--bad-ink)}
.badge--wrap{white-space:normal}

.avatar{flex:0 0 auto;display:flex;align-items:center;justify-content:center;width:44px;height:44px;border-radius:50%;background:var(--chip-bg);color:var(--chip-ink);font-size:20px;font-weight:700;line-height:1}
.avatar--md{width:40px;height:40px;font-size:18px}
.avatar--sm{width:36px;height:36px;font-size:17px}
.avatar--lg{width:56px;height:56px;font-size:24px}
.avatar--xl{width:88px;height:88px;font-size:34px}
.avatar img{width:100%;height:100%;border-radius:50%;object-fit:cover}
/* A real store logo keeps its own shape (wide or square) on a white tile, so a dark logo on a transparent background still reads in dark mode. */
.avatar.avatar--logo{width:auto;min-width:40px;max-width:104px;padding:4px 7px;border-radius:10px;background:#fff;border:1px solid var(--line)}
.avatar--logo.avatar--sm{height:44px}
.avatar--logo.avatar--md{height:48px}
.avatar--logo.avatar--lg{height:64px;max-width:160px;padding:6px 10px;border-radius:12px}
.avatar--logo .avatar__img{display:block;width:auto;min-width:0;height:100%;max-width:100%;border-radius:0;object-fit:contain}

.pill{display:flex;align-items:center;min-height:44px;padding:0 16px;border:1px solid var(--field);border-radius:22px;background:var(--card);font-size:15px;font-weight:500;color:var(--ink);text-decoration:none}
.pill:hover{color:var(--link-hover);border-color:var(--link-hover);text-decoration:none}
.pill--filter{padding:0 20px;font-weight:600}
.pill[aria-current="true"],.pill[aria-current="page"]{background:var(--ink);border-color:var(--ink);color:var(--card)}
.pill-row{display:flex;flex-wrap:wrap;align-items:center;gap:8px}

.code{display:flex;flex:1 1 auto;align-items:center;justify-content:center;min-width:0;height:48px;padding:0 14px;border:2px dashed var(--dash);border-radius:12px;font-size:17px;font-weight:700;letter-spacing:1px;color:var(--ink);overflow-wrap:anywhere;text-align:center}
.code--lg{height:52px;font-size:19px}
.code__text{unicode-bidi:isolate}
.copy-row{display:flex;flex-wrap:wrap;gap:8px}
.copy-row .code{flex:1 1 200px}

.meta-line{display:flex;align-items:center;gap:6px;font-size:13px;color:var(--ink-3)}
.meta-line svg{color:var(--ink-3)}

.empty{padding:32px 24px;text-align:center;background:var(--card);border:1px dashed var(--dash);border-radius:var(--radius);color:var(--ink-2)}
.empty strong{display:block;margin-bottom:6px;font-size:18px;color:var(--ink)}

.cta-box{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:16px;padding:24px;background:var(--card);border:1px solid var(--line);border-radius:var(--radius)}
.cta-box__text{flex:1 1 320px}
.cta-box h2{margin:0 0 4px;font-size:20px;line-height:1.4;font-weight:700}
.cta-box p{font-size:15px;color:var(--ink-2)}

.faq{padding:24px;background:var(--card);border:1px solid var(--line);border-radius:var(--radius)}
.faq h2{margin:0 0 12px;font-size:22px;line-height:1.4;font-weight:700}
.faq details{border-top:1px solid var(--line)}
.faq summary{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:48px;padding-block:8px;list-style:none;cursor:pointer}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"";flex:0 0 auto;width:8px;height:8px;border-right:2px solid var(--ink-3);border-bottom:2px solid var(--ink-3);transform:rotate(45deg)}
.faq details[open] summary::after{transform:rotate(-135deg)}
.faq summary h3{margin:0;font-size:17px;font-weight:600;line-height:1.7}
.faq details p{margin:0 0 14px;font-size:15px;line-height:1.8;color:var(--ink-2)}

.steps{counter-reset:step;display:flex;flex-direction:column;gap:12px;margin:0;padding:0;list-style:none}
.steps li{counter-increment:step;display:flex;align-items:flex-start;gap:16px;margin:0;padding:18px 20px;background:var(--card);border:1px solid var(--line);border-radius:14px;font-size:17px;line-height:1.8;color:var(--ink)}
.steps li::before{content:counter(step);flex:0 0 auto;display:flex;align-items:center;justify-content:center;width:36px;height:36px;border-radius:50%;background:var(--chip-bg);color:var(--chip-ink);font-size:17px;font-weight:700;line-height:1;margin-top:-3px}

.dl-box{display:flex;flex-direction:column;border:1px solid var(--line);border-radius:12px;overflow:hidden}
.dl-box div{display:flex;flex-wrap:wrap;gap:8px;padding:12px 16px;border-bottom:1px solid var(--line)}
.dl-box div:last-child{border-bottom:0}
.dl-box dt{flex:0 0 180px;font-size:15px;font-weight:600}
.dl-box dd{flex:1 1 200px;font-size:15px;color:var(--ink-2)}

.table-scroll{overflow-x:auto}
.log-table{width:100%;min-width:480px;border-collapse:collapse;font-size:15px}
.log-table th{padding:10px 12px;text-align:start;font-weight:600;background:var(--ground)}
.log-table td{padding:10px 12px;border-top:1px solid var(--line);vertical-align:top}
.log-table .cell-code{unicode-bidi:isolate;font-weight:600;letter-spacing:.5px}

.notice{display:flex;align-items:flex-start;gap:10px;padding:14px 16px;border-radius:12px;font-size:15px;line-height:1.7;background:var(--ok-bg);color:var(--ok-ink)}
.notice--bad{background:var(--bad-bg);color:var(--bad-ink)}
.notice--warn{background:var(--warn-bg);color:var(--warn-ink)}
.notice svg{margin-top:4px}
.notice a{color:inherit}

/* The commission note next to a store's codes: quiet, but on the page and close to the code. */
.earn-note{margin:0 0 16px;padding:6px 12px;border-inline-start:3px solid var(--line);font-size:14px;line-height:1.75;color:var(--ink-2)}
.earn-note strong{color:var(--ink)}
.earn-note--short{margin:0;padding:0;border:0;font-size:12.5px;line-height:1.6}

/* 6 · Home ---------------------------------------------------------------- */
.hero{padding-block:64px 40px}
.hero h1{max-width:760px;font-size:clamp(30px,6vw,44px);line-height:1.35;font-weight:700;margin-bottom:16px}
.hero__lead{max-width:640px;font-size:19px;color:var(--ink-2);margin-bottom:32px}
.finder{display:flex;flex-wrap:wrap;gap:12px;max-width:720px}
.finder input[type="search"]{flex:1 1 220px;height:52px}
.finder--sm{max-width:560px;margin-bottom:40px}
.finder--sm input[type="search"]{flex:1 1 200px;height:48px}
.hero__chips{margin-top:20px}
.hero__chips .label{font-size:14px;color:var(--ink-3)}

.trust{display:flex;flex-wrap:wrap;background:var(--card);border:1px solid var(--line);border-radius:var(--radius);overflow:hidden}
.trust__item{flex:1 1 240px;display:flex;flex-direction:column;gap:6px;padding:24px}
.trust__head{display:flex;align-items:center;gap:8px;margin:0;color:var(--link);font-size:inherit;font-weight:inherit;line-height:inherit}
.trust__head strong,.trust__head a{font-size:17px;font-weight:700;color:var(--ink)}
.trust__head a{text-decoration-color:var(--dash)}
.trust__head a:hover{color:var(--link-hover)}
.trust__item span{font-size:15px;color:var(--ink-3)}
.trust-wrap{padding-bottom:48px}

.section{padding-bottom:56px}
.section--last{padding-bottom:64px}
.section__head{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:8px;margin-bottom:20px}
.section h2,.section__title{font-size:clamp(23px,3.4vw,28px);line-height:1.4;font-weight:700}
.section__head a{font-size:16px;font-weight:600}
.section > h2{margin-bottom:20px}

.grid{display:grid;gap:20px}
.grid--cards{grid-template-columns:repeat(auto-fill,minmax(min(320px,100%),1fr))}
.grid--posts{grid-template-columns:repeat(auto-fill,minmax(min(340px,100%),1fr))}
.grid--teasers{grid-template-columns:repeat(auto-fill,minmax(min(300px,100%),1fr))}
.grid--tiles{grid-template-columns:repeat(auto-fill,minmax(min(190px,100%),1fr));gap:12px}
.grid--rows{grid-template-columns:repeat(auto-fill,minmax(min(240px,100%),1fr));gap:12px}

.coupon-card{display:flex;flex-direction:column;gap:14px;padding:20px;background:var(--card);border:1px solid var(--line);border-radius:var(--radius);min-width:0}
.coupon-card__top{display:flex;align-items:center;justify-content:space-between;gap:12px}
.coupon-card__store{display:flex;align-items:center;gap:12px;min-width:0}
.coupon-card__store strong{font-size:18px;line-height:1.4}
.coupon-card__store a{color:var(--ink);text-decoration:none}
.coupon-card__store a:hover{color:var(--link-hover);text-decoration:underline}
.coupon-card__headline{font-size:19px;font-weight:600;line-height:1.5}
.coupon-card__headline .badge{margin-inline-start:8px;vertical-align:middle}
.coupon-card__conds{font-size:14px;color:var(--ink-3)}
.coupon-card__counts{margin:0;font-size:13px;color:var(--ink-3)}
.coupon-card .copy-row .code{flex:1 1 auto;font-size:17px}
.coupon-card .copy-row a.btn{flex:1 1 auto;max-width:22rem}
.coupon-card--inline{margin-block:8px 28px;padding:20px}
.coupon-card--inline .coupon-card__headline{font-size:18px}

.store-tile{display:flex;align-items:center;gap:12px;min-height:64px;padding:10px 16px;background:var(--card);border:1px solid var(--line);border-radius:14px;color:var(--ink);font-size:16px;font-weight:600;text-decoration:none;min-width:0}
.store-tile:hover{border-color:var(--link-hover);color:var(--link-hover);text-decoration:none}
.store-tile--row{min-height:76px;padding:12px 16px}
.store-tile--row strong{font-size:17px}
.store-tile__text{display:flex;flex-direction:column;min-width:0}
.store-tile__sub{font-size:13px;font-weight:400;color:var(--ink-3)}

.teaser,.post-card{display:flex;flex-direction:column;gap:10px;padding:24px;background:var(--card);border:1px solid var(--line);border-radius:var(--radius);color:var(--ink);text-decoration:none;min-width:0}
.teaser:hover,.post-card:hover{border-color:var(--link-hover);color:var(--ink);text-decoration:none}
.teaser:hover h3,.post-card:hover :is(h2,h3) a{color:var(--link-hover);text-decoration:underline}
.teaser h3{font-size:21px;line-height:1.45;font-weight:700}
.teaser time,.post-card__date{font-size:14px;color:var(--ink-3)}
.post-card{position:relative;gap:12px}
.post-card :is(h2,h3) a{color:inherit;text-decoration:none}
.post-card :is(h2,h3) a::after{content:"";position:absolute;inset:0;border-radius:var(--radius)}
.post-card :is(h2,h3) a:focus-visible{outline:none}
.post-card:focus-within{outline:3px solid var(--focus);outline-offset:2px}
.post-card :is(h2,h3){font-size:21px;line-height:1.45;font-weight:700}
.post-card__excerpt{font-size:15px;color:var(--ink-2)}
.post-card__date{font-size:13px}
.post-card__img{display:block;width:100%;height:160px;object-fit:cover;border-radius:12px;background:var(--ground)}

/* 7 · Stores archive ------------------------------------------------------ */
.store-group{margin-bottom:40px}
.store-group > h2{font-size:24px;line-height:1.4;font-weight:700;margin-bottom:16px}
.page-note{max-width:640px;font-size:15px;color:var(--ink-3)}

/* 8 · Store page ---------------------------------------------------------- */
.layout{display:flex;flex-wrap:wrap;align-items:flex-start;gap:24px}
.layout__main{flex:999 1 560px;min-width:0;display:flex;flex-direction:column;gap:24px}
.layout__main--form{flex:999 1 480px;max-width:680px}
.layout__side{flex:1 1 280px;min-width:0;display:flex;flex-direction:column;gap:24px}
.layout--article{gap:32px}
.layout--article .layout__side{flex-basis:260px}

.store-head{display:flex;flex-wrap:wrap;align-items:center;gap:12px;margin-bottom:8px}
.store-head .page-title{margin:0}

/* The top of a store page: one soft banner (teal into warm, with the dashed edge of a coupon) holding the store's logo on a white card and, beside it, the title.
   The card keeps one frame for every logo shape and stays white in dark mode, so a dark logo on a transparent background still reads. */
.store-hero{position:relative;display:flex;align-items:center;gap:32px;min-height:168px;margin-bottom:14px;padding:22px 30px;border-radius:20px;overflow:hidden;background:repeating-linear-gradient(135deg,var(--hero-stripe) 0 18px,transparent 18px 46px),linear-gradient(250deg,var(--hero-1),var(--hero-2))}
.store-hero::after{content:"";position:absolute;inset:10px;border:2px dashed var(--hero-line);border-radius:14px;pointer-events:none}
.store-hero__body{position:relative;z-index:1;flex:1 1 0;min-width:0}
.store-hero .store-head{margin-bottom:0}
.logo-card{position:relative;z-index:1;flex:0 0 auto;display:flex;align-items:center;justify-content:center;width:224px;height:124px;padding:14px 22px;background:#fff;border:1px solid rgba(30,54,72,.1);border-radius:20px;box-shadow:0 10px 26px rgba(30,54,72,.16)}
.logo-card__img{display:block;width:auto;height:auto;max-width:100%;max-height:100%;object-fit:contain}
.logo-card__letter{display:flex;align-items:center;justify-content:center;width:76px;height:76px;border-radius:50%;background:#FBE3D8;color:#8F2F12;font-size:38px;font-weight:700;line-height:1}
.store-hero__lead{max-width:720px;margin:8px 0 0;font-size:17px;line-height:1.8;color:var(--ink-2)}
.store-offers{display:flex;flex-direction:column;gap:20px}
.store-h2{margin:0}
.offer__conds{display:flex;flex-wrap:wrap;align-items:baseline;gap:6px 12px}
.offer__conds h4{margin:0;font-size:14px;font-weight:700;color:var(--ink)}
.store-sub{min-height:8px;margin-bottom:32px;font-size:16px;color:var(--ink-3)}
.store-intro{max-width:760px;margin-bottom:24px;font-size:17px;line-height:1.9;color:var(--ink-2)}

.offer{display:flex;flex-direction:column;gap:16px;padding:24px;background:var(--card);border:1px solid var(--line);border-radius:var(--radius)}
.offer__head{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:8px}
.offer__head h3{margin:0;font-size:22px;line-height:1.5;font-weight:700}
.offer__label{font-size:13px;font-weight:600;color:var(--ink-3)}
.offer__state{display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px;font-size:14px;color:var(--ink-3)}
.offer__tags{display:flex;flex-wrap:wrap;align-items:center;gap:8px}
.offer__src{margin:-8px 0 0;font-size:14px;color:var(--ink-3)}
.offer__seen{margin:0;font-size:15px;line-height:1.8;color:var(--ink-2)}
.offer__seen h4,.offer__seen p{display:inline;margin:0;font-size:inherit;line-height:inherit}
.offer__seen h4{font-weight:700;color:var(--ink)}
.offer__seen h4::after,.offer__conds h4::after{content:":"}
.offer__cb{margin:0;padding:10px 14px;border-radius:12px;background:var(--chip-bg);color:var(--chip-ink);font-size:14px;line-height:1.8}
.offer__counts{margin:0;font-size:14px;color:var(--ink-3)}
.offer__shot{display:block;width:100%;height:auto;border:1px solid var(--line);border-radius:12px;background:var(--ground)}
.offer__report{font-size:14px;color:var(--ink-3)}
.offer__none{margin:0;font-size:14px;color:var(--ink-3)}
.offer__report a{color:var(--ink-3)}
.offer__fig{margin:0}
.offer__fig figcaption{margin-top:8px}
/* The discount snapshot: a small crop of the store's own order-summary box, shown whole at its own size (never stretched). */
.offer__fig--crop{display:flex;flex-direction:column;align-items:flex-start;gap:8px;max-width:560px}
.offer__fig--crop .offer__shot{width:auto;max-width:100%;height:auto;background:#fff}
.offer__fig--crop figcaption{margin:0;font-size:13px;line-height:1.6;color:var(--ink-3)}
.offer__how{font-weight:600;white-space:nowrap}
/* «اشتغل معك؟»: two buttons that need JavaScript (hidden without it) and one plain sentence with the visitors' answers.
   With JavaScript on, the row is there from the first paint (the head script sets html.js), so nothing jumps when the script loads. */
.offer__vote{display:none;flex-direction:column;gap:8px;padding-top:16px;border-top:1px solid var(--line)}
.offer__vote.has-line,html.js .offer__vote{display:flex}
.vote{display:flex;flex-wrap:wrap;align-items:center;gap:10px 14px}
.vote[hidden]{display:none}
html.js .vote[hidden]{display:flex}
.vote__q{font-size:16px;font-weight:700;color:var(--ink)}
.vote__btns{display:flex;flex-wrap:wrap;gap:8px}
.vote__btn{display:inline-flex;align-items:center;justify-content:center;min-height:44px;padding:0 18px;border:1px solid var(--field);border-radius:22px;background:var(--card);color:var(--ink);font:inherit;font-size:15px;font-weight:600;line-height:1.4;cursor:pointer}
.vote__btn:hover{border-color:var(--ink)}
.vote__btn.is-picked,.vote__btn.is-picked:hover{background:var(--ink);border-color:var(--ink);color:var(--card)}
.vote__btn[disabled]{cursor:default}
.vote__btn[disabled]:not(.is-picked){opacity:.6}
.vote__line{margin:0;font-size:14px;line-height:1.8;color:var(--ink-3)}
.vote__line:empty{display:none}

/* Store page: summary on top, compact offers, the cart screenshot folded away until asked for. */
.store-summary{display:flex;flex-direction:column;gap:12px;margin-block:12px 28px;padding:18px 22px;background:var(--card);border:1px solid var(--line);border-radius:var(--radius)}
.store-summary p{margin:0}
/* Four real numbers from the public test log (no visitor counts, no ratings). */
.store-stats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;margin:0}
.store-stats > div{display:flex;flex-direction:column;gap:4px;min-width:0;padding:12px 14px;border:1px solid var(--line);border-radius:12px;background:var(--ground)}
.store-stats dt{font-size:14px;line-height:1.5;color:var(--ink-3)}
.store-stats dd{display:flex;flex-direction:column;gap:2px;margin:0;color:var(--ink)}
.store-stats dd strong{font-size:20px;line-height:1.5;font-weight:700}
.store-stats dd small{font-size:13px;line-height:1.5;color:var(--ink-3)}
/* In-page links to the sections this page has. */
.store-jump{display:flex;flex-wrap:wrap;align-items:center;gap:8px;padding-top:14px;border-top:1px solid var(--line)}
.store-jump__label{margin-inline-end:4px;font-size:14px;color:var(--ink-3)}
.store-jump a{display:inline-flex;align-items:center;min-height:40px;padding:4px 16px;border-radius:20px;background:var(--ok-bg);color:var(--ok-ink);font-size:15px;font-weight:600;text-decoration:none}
.store-jump a:hover{text-decoration:underline}
.store-summary__list{display:flex;flex-direction:column;margin:2px 0 0;padding:0;list-style:none;border-top:1px solid var(--line)}
.store-summary__list li{border-bottom:1px solid var(--line)}
.store-summary__list li:last-child{border-bottom:0}
.store-summary__list a{display:flex;flex-wrap:wrap;align-items:center;gap:6px 12px;padding:10px 0;color:var(--ink);text-decoration:none}
.store-summary__list a:hover .ss-title{color:var(--link-hover);text-decoration:underline}
.ss-title{flex:1 1 220px;font-size:16px;font-weight:600;line-height:1.5}
.ss-code{padding:2px 10px;border:1px dashed var(--dash);border-radius:8px;font-size:15px;font-weight:700;letter-spacing:.04em;unicode-bidi:isolate}
.ss-flag{padding:2px 10px;border-radius:12px;background:var(--warn-bg);color:var(--warn-ink);font-size:13px}
.offer{scroll-margin-top:16px;gap:14px}
.conds{display:flex;flex-wrap:wrap;gap:6px 22px;margin:0;font-size:14px}
.conds div{display:flex;flex-wrap:wrap;gap:4px}
.conds dt{font-weight:600;color:var(--ink)}
.conds dt::after{content:":"}
.conds dd{margin:0;color:var(--ink-2)}
.offer__proof{border:1px solid var(--line);border-radius:12px;overflow:hidden}
.offer__proof summary{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:48px;padding:10px 16px;font-size:15px;font-weight:600;color:var(--link);cursor:pointer;list-style:none}
.offer__proof summary::-webkit-details-marker{display:none}
.offer__proof summary::after{content:"";flex:0 0 auto;width:8px;height:8px;border-right:2px solid currentColor;border-bottom:2px solid currentColor;transform:rotate(45deg)}
.offer__proof[open] summary::after{transform:rotate(-135deg)}
.offer__proof .offer__fig{padding:0 12px 12px}
.offer__foot{display:flex;flex-wrap:wrap;justify-content:space-between;gap:4px 16px;margin:0}
.store-more{margin-top:36px;padding-bottom:0}
.store-more + .store-more{margin-top:44px}
.page-main > .store-more:last-child{padding-bottom:8px}
.log-note{display:block;margin-top:2px;font-size:13px;color:var(--ink-3)}

.side-text{font-size:15px;line-height:1.8;color:var(--ink-2)}
.side-text + a{display:inline-block;margin-top:8px;font-size:15px;font-weight:600}

/* How to use the codes: four numbered steps, in the main column so it is read before the long answers. */
.howto__steps{display:flex;flex-direction:column;gap:14px;margin:0;padding:0;list-style:none;counter-reset:howto}
.howto__steps li{position:relative;padding-inline-start:46px;font-size:16px;line-height:1.8;color:var(--ink-2);counter-increment:howto}
.howto__steps li::before{content:counter(howto);position:absolute;inset-inline-start:0;top:1px;display:flex;align-items:center;justify-content:center;width:32px;height:32px;border-radius:50%;background:var(--ok-bg);color:var(--ok-ink);font-size:16px;font-weight:700;line-height:1}
.howto__steps strong{color:var(--ink)}

/* What the store itself says (shipping, returns, payment…): one block per fact, each with its source page and the day it was read. */
.facts__lead{margin:-4px 0 6px;font-size:15px;line-height:1.8;color:var(--ink-2)}
.fact{padding-block:16px;border-top:1px solid var(--line)}
.fact__title{margin:0 0 6px;font-size:18px;line-height:1.5;font-weight:700}
.fact__text{margin:0;font-size:16px;line-height:1.9;color:var(--ink-2)}
.fact__src{margin:8px 0 0;font-size:14px;line-height:1.8;color:var(--ink-3)}
.fact__src a{color:var(--link);overflow-wrap:anywhere}
.fact__old{display:inline-block;margin-inline-start:6px;padding:0 10px;border-radius:12px;background:var(--warn-bg);color:var(--warn-ink);font-size:13px}

/* «Store in brief» card beside the page: the editor's short phrases, one line each. */
.glance__list{display:flex;flex-direction:column;margin:0 0 8px}
.glance__list > div{display:flex;flex-direction:column;gap:2px;padding:10px 0;border-top:1px solid var(--line)}
.glance__list > div:first-child{padding-top:0;border-top:0}
.glance__list dt{font-size:14px;color:var(--ink-3)}
.glance__list dd{margin:0;font-size:16px;font-weight:600;line-height:1.6;color:var(--ink)}

/* 9 · Articles ------------------------------------------------------------ */
.post-head .badge{display:inline-flex}
.post-head h1{margin:12px 0}
.post-meta{margin-bottom:24px;font-size:15px;color:var(--ink-3)}
.post-hero{display:block;width:100%;max-height:340px;object-fit:cover;margin-bottom:28px;border-radius:var(--radius);border:1px solid var(--line)}
.article-col{flex:999 1 560px;min-width:0;max-width:760px}
.toc ul,.related ul,.toc-inline ul{display:flex;flex-direction:column;gap:4px;margin:0;padding:0;list-style:none}
.toc-inline{display:none;margin-bottom:24px}
.toc-inline summary{font-size:17px;font-weight:700;cursor:pointer}
.toc-inline ul{margin-top:8px}
.toc a,.related a,.toc-inline a{display:flex;align-items:center;min-height:44px;font-size:15px}
.chips-row{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:32px}
.pagination{display:flex;flex-wrap:wrap;gap:8px;margin-top:32px}
.pagination .page-numbers{display:flex;align-items:center;justify-content:center;min-width:44px;min-height:44px;padding:0 14px;border:1px solid var(--field);border-radius:22px;background:var(--card);color:var(--ink);font-weight:600;text-decoration:none}
.pagination .page-numbers.current{background:var(--ink);border-color:var(--ink);color:var(--card)}

/* 10 · Pages -------------------------------------------------------------- */
.person{display:flex;flex-wrap:wrap;align-items:center;gap:20px;margin-bottom:40px;padding:24px;background:var(--card);border:1px solid var(--line);border-radius:var(--radius)}
.person__text{flex:1 1 320px;display:flex;flex-direction:column;gap:6px}
.person__name{font-size:20px}
.person__bio{font-size:16px;line-height:1.8;color:var(--ink-2)}
.summary-box{margin-bottom:40px;padding:24px;background:var(--card);border:1px solid var(--line);border-radius:var(--radius)}
.summary-box h2{margin:0 0 12px;font-size:20px;line-height:1.4;font-weight:700}
.summary-box ul{padding-inline-start:24px;font-size:16px;line-height:1.9;color:var(--ink-2)}
.summary-box li{margin-bottom:6px}
.summary-box li:last-child{margin-bottom:0}
.summary-box__title{margin:0 0 12px;font-size:20px;line-height:1.4;font-weight:700;color:var(--ink)}
.plain-list{display:flex;flex-direction:column;gap:8px;margin:0;padding:0;list-style:none;font-size:16px;color:var(--ink-2)}
.meta-note{margin-top:24px;font-size:14px;color:var(--ink-3)}
mark.kp-ph{padding:0 4px;border-radius:4px;background:var(--warn-bg);color:var(--warn-ink)}

/* 11 · Forms -------------------------------------------------------------- */
.form{display:flex;flex-direction:column;gap:18px;padding:28px;background:var(--card);border:1px solid var(--line);border-radius:var(--radius);min-width:0}
.form h2{margin:0;font-size:22px;line-height:1.4;font-weight:700}
.form__row{display:flex;flex-wrap:wrap;gap:16px}
.form__row .field{flex:1 1 220px}
.field{display:flex;flex-direction:column;gap:6px}
.field label{font-size:15px;font-weight:600}
.field .hint{font-size:13px;color:var(--ink-3)}
input[type="text"],input[type="email"],input[type="search"],input[type="url"],select,textarea{width:100%;height:48px;padding:0 12px;border:1px solid var(--field);border-radius:12px;background:var(--card);font-size:16px;color:var(--ink)}
input[type="search"]{padding-inline:16px;-webkit-appearance:none;appearance:none}
input::placeholder,textarea::placeholder{color:var(--ink-3);opacity:1}
textarea{height:auto;padding:12px;line-height:1.7;resize:vertical}
input:focus-visible,select:focus-visible,textarea:focus-visible{outline:3px solid var(--focus);outline-offset:1px;border-color:var(--focus)}
.field--error input,.field--error textarea,.field--error select{border-color:var(--bad-ink)}
.field__error{font-size:14px;font-weight:600;color:var(--bad-ink)}
.form__submit{align-self:flex-start}
.hp{position:absolute!important;inset-inline-start:-9999px;width:1px;height:1px;overflow:hidden}

/* 12 · Prose ---------------------------------------------------------------
   Defaults for editor content. Written with :where() (zero specificity) so every component
   used inside a page (summary box, person card, call-to-action, form) keeps its own spacing. */
:where(.prose){color:var(--ink-2);font-size:17px;line-height:1.9}
:where(.prose) > *{margin-block:0 20px}
:where(.prose) > *:last-child{margin-bottom:0}
:where(.prose) :where(h2){margin-block:40px 16px;font-size:26px;line-height:1.4;font-weight:700;color:var(--ink)}
:where(.prose) :where(h3){margin-block:32px 12px;font-size:21px;line-height:1.45;font-weight:700;color:var(--ink)}
:where(.prose) :where(h4){margin-block:26px 10px;font-size:18px;line-height:1.5;font-weight:700;color:var(--ink)}
:where(.prose) :where(h2,h3,h4):first-child{margin-top:0}
:where(.prose) :where(ul,ol){padding-inline-start:24px}
:where(.prose) :where(li){margin-bottom:10px;line-height:1.8}
:where(.prose) :where(li):last-child{margin-bottom:0}
:where(.prose) :where(strong){color:var(--ink)}
:where(.prose) :where(img){border-radius:12px}
:where(.prose) :where(figcaption){margin-top:8px;font-size:14px;color:var(--ink-3)}
:where(.prose) :where(blockquote){padding:4px 20px;border-inline-start:4px solid var(--dash);color:var(--ink)}
:where(.prose) :where(table){width:100%;border-collapse:collapse;background:var(--card);font-size:15px}
:where(.prose) :where(th,td){padding:10px 12px;border:1px solid var(--line);text-align:start}
:where(.prose) :where(th){background:var(--ground);font-weight:600}
.prose .wp-block-table{margin-inline:0;overflow-x:auto}
.prose .wp-block-table :where(th,td){padding:10px 12px;border:1px solid var(--line)}
.prose .wp-block-table th{background:var(--ground);font-weight:600}
.prose .wp-block-table thead{border-bottom:0}
:where(.prose) :where(hr){border:0;border-top:1px solid var(--line);margin-block:32px}
:where(.prose) :where(details){padding:12px 0;border-top:1px solid var(--line)}
:where(.prose) :where(summary){font-size:17px;font-weight:600;color:var(--ink);cursor:pointer}
:where(.prose) :where(details p){margin-top:8px;font-size:15px}
.prose > details{margin-bottom:0}
.prose > details + :not(details){margin-top:20px}
.prose > details:not(:has(+ details)){border-bottom:1px solid var(--line)}
.prose .lead{font-size:18px;color:var(--ink)}
.prose--page > p:first-child{max-width:640px;margin-bottom:32px;font-size:19px;line-height:1.8;color:var(--ink-2)}
.prose .wp-block-buttons .wp-block-button__link{border-radius:12px;background:var(--accent);color:var(--on-accent);font-weight:600;text-decoration:none}
.prose .alignwide,.prose .alignfull{max-width:100%}
.prose .alignleft{float:left;margin-inline-end:20px}
.prose .alignright{float:right;margin-inline-start:20px}
.prose .aligncenter{display:block;margin-inline:auto}
.prose::after{content:"";display:table;clear:both}

/* 13 · Utilities & responsive -------------------------------------------- */
.mt-0{margin-top:0}
.mb-24{margin-bottom:24px}
.mb-40{margin-bottom:40px}
.muted{color:var(--ink-3)}
.flow-24 > * + *{margin-top:24px}

@media (max-width:640px){
  .wrap{padding-inline:16px}
  .site-header__in{padding-block:12px}
  .brand img{height:40px}
  .nav a{padding:0 10px;font-size:15px}
  .hero{padding-block:40px 28px}
  .hero__lead{font-size:17px;margin-bottom:24px}
  .page-main{padding-block:24px 48px}
  .card,.offer,.faq,.person,.summary-box,.cta-box{padding:20px}
  .form{padding:20px}
  .trust__item{padding:18px 20px}
  .dl-box dt{flex-basis:100%}
  .h2,.prose h2{font-size:23px}
  .section{padding-bottom:40px}
  .trust-wrap{padding-bottom:36px}
  .coupon-card__top{flex-wrap:wrap}
  .grid--tiles{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
  /* The test log becomes one small block per test, so the actual discount is never hidden off-screen. */
  .log-table{min-width:0}
  .log-table thead{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
  .log-table,.log-table tbody{display:block}
  .log-table tr{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:6px 12px;align-items:center;padding:12px 0;border-top:1px solid var(--line)}
  .log-table tbody tr:first-child{border-top:0;padding-top:0}
  .log-table td{display:block;padding:0;border:0}
  .log-table td:nth-child(1){grid-column:1;grid-row:1;font-size:14px;color:var(--ink-3)}
  .log-table td:nth-child(2){grid-column:1;grid-row:2}
  .log-table td:nth-child(3){grid-column:2;grid-row:1 / span 2;justify-self:end}
  .log-table td:nth-child(4){grid-column:1 / -1;grid-row:3;font-size:14px;color:var(--ink-2)}
  .log-table td:nth-child(4)::before{content:'ما ظهر في السلة: ';color:var(--ink-3)}
  .grid--tiles .store-tile{gap:10px;padding:10px 12px;font-size:15px}
  /* Two tiles per row leave little room beside the name, so a wide logo is capped lower on a phone. */
  .avatar.avatar--logo{max-width:96px}
  .grid--tiles .avatar.avatar--logo{max-width:76px}
  .avatar--logo.avatar--lg{max-width:128px}
  /* Under the offers: two small store tiles per row and two articles, so the extras never outweigh the codes. */
  .store-more .grid--rows{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
  .store-more .store-tile--row{min-height:64px;padding:10px 12px}
  .store-more .store-tile__sub{display:none}
  .store-more .teaser:nth-child(n+3){display:none}
  .store-hero{flex-direction:column;align-items:flex-start;gap:14px;min-height:0;margin-bottom:12px;padding:20px 18px 22px;border-radius:16px}
  .store-hero::after{inset:7px;border-radius:11px}
  .logo-card{width:150px;height:84px;padding:9px 14px;border-radius:16px}
  .logo-card__letter{width:54px;height:54px;font-size:28px}
  .store-hero__body{flex:0 0 auto;width:100%}
  .store-hero__lead{font-size:16px}
  .store-summary{gap:10px;margin-block:8px 20px;padding:12px 14px}
  .store-stats{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
  .store-stats > div{gap:2px;padding:8px 12px}
  .store-stats dt{font-size:13px}
  .store-stats dd strong{font-size:18px}
  .store-stats dd small{display:none}
  /* On a phone the in-page links are the first three only, in one row, and without their label (the nav keeps its aria-label). */
  .store-jump{flex-wrap:nowrap;gap:6px;padding-top:10px}
  .store-jump__label,.store-jump a:nth-of-type(n+4){display:none}
  .store-jump a{flex:1 1 auto;justify-content:center;min-height:44px;padding-inline:8px;font-size:14px;text-align:center}
  .howto__steps li{padding-inline-start:42px;font-size:15px}
  .fact__title{font-size:17px}
  .fact__text{font-size:15px}
}
@media (max-width:899px){
  .toc-inline{display:block}
  .toc--side{display:none}
}
@media (forced-colors:active){
  .badge,.btn,.avatar,.pill,.logo-card{border:1px solid CanvasText}
  .code{border-color:CanvasText}
  .vote__btn{border:1px solid ButtonText}
  .vote__btn.is-picked{outline:3px solid Highlight;outline-offset:2px}
}
@media print{
  .site-header,.site-footer,.theme-toggle,.skip-link,.btn,.finder,.offer__report,.logo-card{display:none}
  .vote,html.js .vote[hidden]{display:none}
  .offer__vote:not(.has-line),html.js .offer__vote:not(.has-line){display:none}
  body{background:#fff;color:#000}
  .offer,.card,.coupon-card{break-inside:avoid}
  .store-hero{min-height:0;padding:0;background:none}
  .store-hero::after{display:none}
}