/* store2 - the design system of the attached screenshot, which is the one the
   other pages of this family carry; every rule of it is unchanged and every
   selector is scoped under .otlob-page, the wrapper the design itself uses, so
   the shared names ( container, section, main ) cannot collide with the about
   theme that gives this page its header and its footer. The header, nav and
   footer rules of the original file are dropped, that chrome comes from
   header-about.php and footer-about.php.

   It is a copy and not a share. stores2, categories2 and category2 each keep
   one of their own, so no page of the family can move another by being
   edited, and the old store page is neither read nor touched. */

.otlob-page { --primary: #20bfef; --primary-dark: #0e9ccb; --accent: #ff6b35; --accent-yellow: #ffc93c; --bg: #f7fafc; --surface: #fff; --text: #1a202c; --muted: #5a6675; --border: #e2e8f0; --success: #10b981; --radius: 14px; --shadow-sm: 0 1px 2px #0000000d; --shadow: 0 4px 16px #0f1e3c14; --shadow-lg: 0 12px 32px #0f1e3c1f; --max: 1200px; }
.otlob-page *, .otlob-page ::before, .otlob-page ::after { box-sizing: border-box; }
.otlob-page { background: var(--bg); color: var(--text); min-height: 100vh; margin: 0px; font-family: Tajawal, system-ui, sans-serif; font-size: 16px; line-height: 1.7; }
.otlob-page img { max-width: 100%; height: auto; display: block; }
.otlob-page a { color: var(--primary-dark); text-decoration: none; }
.otlob-page a:hover { text-decoration: underline; }
.otlob-page button { cursor: pointer; background: none; border: none; font-family: inherit; }
.otlob-page .container { max-width: var(--max); margin: 0px auto; padding: 0px 16px; }
@media (width <= 920px) {
}
.otlob-page .hero { background: radial-gradient(1200px 500px at 90% -10%, rgba(32, 191, 239, 0.2), rgba(0, 0, 0, 0) 60%), radial-gradient(900px 400px at 0px 110%, rgba(255, 107, 53, 0.14), rgba(0, 0, 0, 0) 60%), linear-gradient(160deg, rgb(234, 249, 254) 0%, rgb(255, 247, 239) 100%); padding: 40px 0px 56px; position: relative; overflow: hidden; }
.otlob-page .hero::before { content: ""; pointer-events: none; z-index: 0; background-image: radial-gradient(rgba(15, 30, 60, 0.06) 1px, rgba(0, 0, 0, 0) 1px); background-size: 22px 22px; position: absolute; inset: 0px; mask-image: linear-gradient(rgba(0, 0, 0, 0), rgb(0, 0, 0) 30%, rgb(0, 0, 0) 70%, rgba(0, 0, 0, 0)); }
.otlob-page .hero-grid { z-index: 1; grid-template-columns: 1.05fr 0.95fr; align-items: center; gap: 32px; display: grid; position: relative; }
@media (width <= 900px) {
  .otlob-page .hero-grid { grid-template-columns: 1fr; gap: 24px; }
}
.otlob-page .hero-left { flex-direction: column; gap: 18px; display: flex; }
.otlob-page .hero-badge { border: 1px solid var(--border); color: var(--text); box-shadow: var(--shadow-sm); background: rgb(255, 255, 255); border-radius: 999px; align-items: center; gap: 8px; width: max-content; padding: 7px 14px; font-size: 13px; font-weight: 700; display: inline-flex; }
.otlob-page .hero-badge .dot { background: var(--success); border-radius: 50%; width: 8px; height: 8px; animation: 1.8s ease 0s infinite normal none running pulseDot; box-shadow: rgba(16, 185, 129, 0.18) 0px 0px 0px 4px; }
@keyframes pulseDot { 
  50% { box-shadow: rgba(16, 185, 129, 0) 0px 0px 0px 8px; }
}
.otlob-page .hero h1 { letter-spacing: -0.01em; margin: 0px; font-size: clamp(28px, 4.2vw, 46px); font-weight: 900; line-height: 1.2; }
.otlob-page .hero h1 .accent { background-image: ; background-position-x: ; background-position-y: ; background-size: ; background-repeat: ; background-attachment: ; background-origin: ; background-color: ; color: rgba(0, 0, 0, 0); background-clip: text; }
.otlob-page .hero p.lead { color: var(--muted); max-width: 560px; margin: 0px; font-size: clamp(15px, 1.5vw, 17px); }
.otlob-page .search-engine { box-shadow: var(--shadow-lg); border: 1px solid var(--border); background: rgb(255, 255, 255); border-radius: 18px; padding: 14px; }
.otlob-page .search-tabs { background: var(--bg); border-radius: 12px; gap: 6px; margin-bottom: 10px; padding: 4px; display: flex; }
.otlob-page .search-tab { color: var(--muted); cursor: pointer; background: none; border: 0px; border-radius: 9px; flex: 1 1 0%; justify-content: center; align-items: center; gap: 6px; padding: 9px 12px; font-size: 13.5px; font-weight: 700; transition: 0.15s; display: inline-flex; }
.otlob-page .search-tab[aria-selected="true"] { color: var(--primary-dark); box-shadow: var(--shadow-sm); background: rgb(255, 255, 255); }
.otlob-page .search-tab:hover { color: var(--text); }
.otlob-page .search-tab:focus-visible, .otlob-page .slider-nav:focus-visible, .otlob-page .slider-dot:focus-visible, .otlob-page .slide-cta:focus-visible { outline: 3px solid var(--primary); outline-offset: 3px; border-radius: 10px; }
.otlob-page .sr-only { clip: rect(0px, 0px, 0px, 0px); white-space: nowrap; border: 0px; width: 1px; height: 1px; margin: -1px; padding: 0px; position: absolute; overflow: hidden; }
.otlob-page .search-form { align-items: stretch; gap: 8px; display: flex; }
.otlob-page .search-input-wrap { flex: 1 1 0%; min-width: 0px; position: relative; }
.otlob-page .search-input-wrap svg { color: var(--muted); pointer-events: none; position: absolute; top: 50%; right: 14px; transform: translateY(-50%); }
.otlob-page .search-input-wrap input { border: 1.5px solid var(--border); width: 100%; font-style: inherit; font-variant: inherit; font-weight: inherit; font-stretch: inherit; line-height: inherit; font-family: inherit; font-optical-sizing: inherit; font-size-adjust: inherit; font-kerning: inherit; font-feature-settings: inherit; font-variation-settings: inherit; background: var(--bg); border-radius: 12px; padding: 14px 44px 14px 14px; font-size: 15px; transition: 0.15s; }
.otlob-page .search-input-wrap input:focus { border-color: var(--primary); background: rgb(255, 255, 255); outline: none; box-shadow: rgba(32, 191, 239, 0.15) 0px 0px 0px 4px; }
.otlob-page .search-form button { background: linear-gradient(135deg,var(--primary),var(--primary-dark)); color: rgb(255, 255, 255); border-radius: 12px; align-items: center; gap: 8px; min-height: 52px; padding: 0px 24px; font-size: 15px; font-weight: 800; transition: 0.15s; display: inline-flex; box-shadow: rgba(32, 191, 239, 0.35) 0px 6px 16px; }
.otlob-page .search-form button:hover { transform: translateY(-1px); box-shadow: rgba(32, 191, 239, 0.45) 0px 10px 20px; }
.otlob-page .popular-row { flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 12px; font-size: 13px; display: flex; }
.otlob-page .popular-row span { color: var(--muted); font-weight: 600; }
.otlob-page .popular-row a { background: var(--bg); border: 1px solid var(--border); color: var(--text); border-radius: 999px; padding: 5px 11px; font-size: 12.5px; font-weight: 600; }
.otlob-page .popular-row a:hover { border-color: var(--primary); color: var(--primary-dark); text-decoration: none; }
.otlob-page .trust-row { flex-wrap: wrap; gap: 8px; margin-top: 4px; display: flex; }
.otlob-page .trust-pill { color: rgb(4, 120, 87); box-shadow: var(--shadow-sm); background: rgb(255, 255, 255); border: 1px solid rgb(209, 250, 229); border-radius: 999px; align-items: center; gap: 6px; padding: 6px 12px; font-size: 12.5px; font-weight: 700; display: inline-flex; }
.otlob-page .trust-pill svg { flex-shrink: 0; }
.otlob-page .offers-slider { box-shadow: var(--shadow-lg); aspect-ratio: 4 / 3; background: rgb(255, 255, 255); border-radius: 22px; max-height: 460px; position: relative; overflow: hidden; }
@media (width <= 900px) {
  .otlob-page .offers-slider { aspect-ratio: 16 / 10; max-height: 340px; }
}
.otlob-page .slides { width: 100%; height: 100%; position: relative; }
.otlob-page .slide { opacity: 0; color: rgb(255, 255, 255); flex-direction: column; justify-content: flex-end; padding: 26px; transition: opacity 0.6s; display: flex; position: absolute; inset: 0px; }
.otlob-page .slide::before { content: ""; z-index: 1; background: linear-gradient(rgba(0, 0, 0, 0.05) 0%, rgba(0, 0, 0, 0.55) 65%, rgba(0, 0, 0, 0.85) 100%); position: absolute; inset: 0px; }
.otlob-page .slide.active { opacity: 1; z-index: 2; }
.otlob-page .slide > * { z-index: 2; position: relative; }
.otlob-page .slide-1 { background: linear-gradient(135deg, rgb(254, 231, 46) 0%, rgb(255, 107, 53) 100%); }
.otlob-page .slide-2 { background: linear-gradient(135deg, rgb(32, 191, 239) 0%, rgb(14, 76, 129) 100%); }
.otlob-page .slide-3 { background: linear-gradient(135deg, rgb(255, 62, 127) 0%, rgb(108, 92, 231) 100%); }
.otlob-page .slide-4 { background: linear-gradient(135deg, rgb(16, 185, 129) 0%, rgb(6, 95, 70) 100%); }
.otlob-page .slide-tag { backdrop-filter: blur(10px); background: rgba(255, 255, 255, 0.22); border: 1px solid rgba(255, 255, 255, 0.3); border-radius: 999px; align-items: center; gap: 6px; width: max-content; margin-bottom: 10px; padding: 5px 12px; font-size: 12px; font-weight: 800; display: inline-flex; }
.otlob-page .slide-store { opacity: 0.92; margin: 0px 0px 4px; font-size: 13px; font-weight: 700; }
.otlob-page .slide-title { max-width: 90%; margin: 0px 0px 6px; font-size: clamp(20px, 2.4vw, 26px); font-weight: 900; line-height: 1.3; }
.otlob-page .slide-desc { opacity: 0.92; max-width: 90%; margin: 0px 0px 14px; font-size: 13.5px; }
.otlob-page .slide-cta { color: var(--text); background: rgb(255, 255, 255); border-radius: 12px; align-items: center; gap: 8px; width: max-content; padding: 11px 20px; font-size: 14px; font-weight: 800; transition: 0.15s; display: inline-flex; }
.otlob-page .slide-cta:hover { color: var(--primary-dark); text-decoration: none; transform: translateY(-1px); }
.otlob-page .slide-code { color: var(--text); letter-spacing: 1px; border: 2px dashed var(--accent); z-index: 3; background: rgba(255, 255, 255, 0.95); border-radius: 10px; padding: 8px 14px; font-family: "Courier New", monospace; font-size: 14px; font-weight: 900; position: absolute; top: 20px; right: 20px; }
.otlob-page .slider-nav { width: 40px; height: 40px; color: var(--text); z-index: 5; box-shadow: var(--shadow); background: rgba(255, 255, 255, 0.95); border-radius: 50%; place-items: center; transition: 0.15s; display: grid; position: absolute; top: 50%; transform: translateY(-50%); }
.otlob-page .slider-nav:hover { background: rgb(255, 255, 255); transform: translateY(-50%) scale(1.08); }
.otlob-page .slider-prev { right: 12px; }
.otlob-page .slider-next { left: 12px; }
.otlob-page .slider-dots { z-index: 5; gap: 8px; display: flex; position: absolute; bottom: 16px; right: 50%; transform: translateX(50%); }
.otlob-page .slider-dot { cursor: pointer; background: rgba(255, 255, 255, 0.5); border-radius: 50%; width: 8px; height: 8px; transition: 0.2s; }
.otlob-page .slider-dot.active { background: rgb(255, 255, 255); border-radius: 4px; width: 24px; }
.otlob-page main { padding: 8px 0px 48px; }
.otlob-page .section { margin-top: 48px; }
.otlob-page .section-head { flex-wrap: wrap; justify-content: space-between; align-items: end; gap: 12px; margin-bottom: 18px; display: flex; }
.otlob-page .section-head h2 { align-items: center; gap: 10px; margin: 0px; font-size: clamp(20px, 2.4vw, 26px); display: flex; }
.otlob-page .section-head h2::before { content: ""; background: var(--primary); border-radius: 3px; width: 5px; height: 26px; }
.otlob-page .section-head .see-all { color: var(--primary-dark); font-size: 14px; font-weight: 700; }
.otlob-page .store-grid { grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 14px; display: grid; }
.otlob-page .store-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); text-align: center; color: var(--text); flex-direction: column; gap: 8px; padding: 16px; transition: transform 0.15s, box-shadow 0.15s, border-color 0.15s; display: flex; }
.otlob-page .store-card:hover { box-shadow: var(--shadow); border-color: var(--primary); text-decoration: none; transform: translateY(-3px); }
.otlob-page .store-logo { width: 72px; height: 72px; color: var(--primary-dark); border: 1px solid var(--border); background: rgb(241, 245, 249); border-radius: 14px; place-items: center; margin: 0px auto; font-size: 20px; font-weight: 900; display: grid; }
.otlob-page .store-card h3 { margin: 4px 0px 0px; font-size: 16px; font-weight: 800; }
.otlob-page .store-stats { color: var(--muted); font-size: 13px; }
.otlob-page .store-best { color: rgb(180, 83, 9); background: rgb(255, 243, 224); border-radius: 8px; margin: 0px auto; padding: 4px 10px; font-size: 12px; font-weight: 800; display: inline-block; }
.otlob-page .store-rating { color: var(--muted); justify-content: center; align-items: center; gap: 4px; font-size: 13px; display: flex; }
.otlob-page .store-rating .star { color: rgb(245, 158, 11); }
.otlob-page .store-cta { background: var(--primary); color: rgb(255, 255, 255); border-radius: 8px; justify-content: center; align-items: center; min-height: 38px; margin-top: auto; padding: 8px 14px; font-size: 14px; font-weight: 700; display: inline-flex; }
.otlob-page .store-card:hover .store-cta { background: var(--primary-dark); }
.otlob-page .coupon-list { gap: 14px; display: grid; }
.otlob-page .coupon-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow-sm); grid-template-columns: 64px 1fr auto; align-items: center; gap: 16px; padding: 18px; transition: transform 0.15s, box-shadow 0.15s; display: grid; }
.otlob-page .coupon-card:hover { box-shadow: var(--shadow); transform: translateY(-2px); }
.otlob-page .coupon-card .c-logo { width: 64px; height: 64px; color: var(--primary-dark); border: 1px solid var(--border); background: rgb(241, 245, 249); border-radius: 12px; place-items: center; font-size: 16px; font-weight: 900; display: grid; }
.otlob-page .coupon-body h3 { margin: 0px 0px 6px; font-size: 17px; font-weight: 700; }
.otlob-page .coupon-meta { color: var(--muted); flex-wrap: wrap; align-items: center; gap: 10px; font-size: 13px; display: flex; }
.otlob-page .coupon-meta .verified { color: var(--success); align-items: center; gap: 4px; font-weight: 700; display: inline-flex; }
.otlob-page .discount-tag { background: var(--accent); color: rgb(255, 255, 255); border-radius: 8px; padding: 3px 9px; font-size: 12px; font-weight: 800; }
.otlob-page .coupon-actions { border: 2px dashed var(--primary); background: rgb(255, 255, 255); border-radius: 12px; align-items: stretch; min-width: 220px; display: flex; overflow: hidden; }
.otlob-page .code-display { letter-spacing: 2px; color: var(--primary-dark); user-select: all; background: repeating-linear-gradient(45deg, rgb(241, 245, 249), rgb(241, 245, 249) 6px, rgb(255, 255, 255) 6px, rgb(255, 255, 255) 12px); flex: 1 1 0%; justify-content: center; align-items: center; min-width: 80px; padding: 0px 12px; font-family: monospace; font-size: 16px; font-weight: 800; display: flex; position: relative; }
.otlob-page .code-display[data-masked="true"] { filter: blur(5px); cursor: pointer; user-select: none; }
.otlob-page .code-display[data-masked="true"]::after { content: "اضغط للكشف"; filter: blur(); color: var(--text); letter-spacing: 0px; background: rgba(255, 255, 255, 0.6); place-items: center; font-family: Tajawal, sans-serif; font-size: 12px; font-weight: 600; display: grid; position: absolute; inset: 0px; }
.otlob-page .btn-reveal { background: var(--primary); color: rgb(255, 255, 255); justify-content: center; align-items: center; gap: 6px; min-width: 130px; min-height: 52px; padding: 12px 18px; font-size: 14px; font-weight: 800; display: flex; }
.otlob-page .btn-reveal:hover, .otlob-page .btn-reveal:focus-visible { background: var(--primary-dark); }
.otlob-page .btn-reveal[data-copied="true"] { background: var(--success); }
.otlob-page .coupon-actions.deal-only { background: var(--primary); border-style: solid; }
.otlob-page .coupon-actions.deal-only .btn-reveal { width: 100%; }
@media (width <= 680px) {
  .otlob-page .coupon-card { grid-template-columns: 48px 1fr; gap: 12px; padding: 14px; }
  .otlob-page .coupon-card .c-logo { width: 48px; height: 48px; font-size: 13px; }
  .otlob-page .coupon-actions { grid-column: 1 / -1; min-width: 0px; }
}
@media (width >= 681px) and (width <= 1100px) {
  .otlob-page .coupon-list { grid-template-columns: repeat(2, minmax(0px, 1fr)); gap: 12px; }
  .otlob-page .coupon-list > li { height: 100%; }
  .otlob-page .coupon-card { grid-template-columns: 48px 1fr; align-content: start; gap: 12px; height: 100%; padding: 14px; }
  .otlob-page .coupon-card .c-logo { width: 48px; height: 48px; font-size: 13px; }
  .otlob-page .coupon-actions { grid-column: 1 / -1; align-self: end; min-width: 0px; }
}
.otlob-page .cat-grid { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px; display: grid; }
.otlob-page .cat-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); text-align: center; color: var(--text); padding: 18px 12px; transition: transform 0.15s, border-color 0.15s; }
.otlob-page .cat-card:hover { border-color: var(--primary); text-decoration: none; transform: translateY(-3px); }
.otlob-page .cat-icon { background: linear-gradient(135deg, rgb(230, 248, 254), rgb(255, 245, 236)); border-radius: 14px; place-items: center; width: 56px; height: 56px; margin: 0px auto 10px; font-size: 26px; display: grid; }
.otlob-page .cat-card h3 { margin: 0px; font-size: 15px; font-weight: 700; }
.otlob-page .cat-card .count { color: var(--muted); margin-top: 4px; font-size: 12px; }
.otlob-page .why-grid { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 14px; display: grid; }
.otlob-page .why-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 20px; }
.otlob-page .why-icon { width: 44px; height: 44px; color: var(--primary-dark); background: rgb(230, 248, 254); border-radius: 12px; place-items: center; margin-bottom: 10px; font-size: 22px; display: grid; }
.otlob-page .why-card h3 { margin: 0px 0px 6px; font-size: 16px; font-weight: 800; }
.otlob-page .why-card p { color: var(--muted); margin: 0px; font-size: 14px; }
.otlob-page .blog-grid { grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 16px; display: grid; }
.otlob-page .blog-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); color: var(--text); flex-direction: column; transition: transform 0.15s, box-shadow 0.15s; display: flex; overflow: hidden; }
.otlob-page .blog-card:hover { box-shadow: var(--shadow); text-decoration: none; transform: translateY(-3px); }
.otlob-page .blog-thumb { aspect-ratio: 16 / 9; background: linear-gradient(135deg,var(--primary) 0%,#7c3aed 100%); color: rgb(255, 255, 255); text-align: center; place-items: center; padding: 12px; font-size: 22px; font-weight: 900; display: grid; }
.otlob-page .blog-body { padding: 14px 16px 16px; }
.otlob-page .blog-body h3 { margin: 0px 0px 8px; font-size: 16px; font-weight: 800; line-height: 1.4; }
.otlob-page .blog-body p { color: var(--muted); margin: 0px; font-size: 13px; }
.otlob-page .blog-meta { color: var(--muted); margin-top: 10px; font-size: 12px; }
.otlob-page .seo-grid { grid-template-columns: 2fr 1fr; align-items: start; gap: 24px; display: grid; }
.otlob-page .seo-content { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); max-width: 820px; padding: 26px 28px; line-height: 1.9; }
.otlob-page .seo-content p { color: var(--text); margin: 0px 0px 14px; font-size: 15.5px; }
.otlob-page .seo-content .seo-lead { font-size: 17px; }
.otlob-page .seo-content a { color: var(--primary-dark); border-bottom: 1px dashed var(--primary); text-decoration: none; }
.otlob-page .seo-content a:hover { color: var(--accent); }
.otlob-page .seo-content strong { color: var(--text); font-weight: 800; }
.otlob-page .seo-links { border-top: 1px dashed var(--border); flex-wrap: wrap; gap: 10px; margin-top: 18px; padding-top: 16px; display: flex; }
.otlob-page .seo-chip { background: var(--bg); border: 1px solid var(--border); color: var(--text); border-radius: 999px; align-items: center; gap: 6px; padding: 8px 14px; font-size: 13.5px; font-weight: 700; text-decoration: none; transition: 0.15s; display: inline-flex; }
.otlob-page .seo-chip:hover { background: var(--primary); color: rgb(255, 255, 255); border-color: var(--primary); transform: translateY(-1px); }
.otlob-page .seo-chip svg { opacity: 0.85; }
.otlob-page .seo-aside { background: linear-gradient(160deg,var(--surface),var(--bg)); border: 1px solid var(--border); border-radius: var(--radius); padding: 22px 24px; position: sticky; top: 88px; }
.otlob-page .seo-aside h3 { margin: 0px 0px 4px; font-size: 17px; font-weight: 800; }
.otlob-page .seo-aside-sub { color: var(--muted); margin: 0px 0px 14px; font-size: 13.5px; }
.otlob-page .country-list { gap: 8px; margin: 0px 0px 16px; padding: 0px; list-style: none; display: grid; }
.otlob-page .country-list li { background: var(--surface); border: 1px solid var(--border); border-radius: 10px; align-items: center; gap: 8px; padding: 6px 10px; font-size: 14.5px; font-weight: 600; display: flex; }
.otlob-page .country-list .flag { font-size: 18px; line-height: 1; }
.otlob-page .country-list .tag { background: var(--accent-yellow); color: rgb(26, 32, 44); border-radius: 999px; margin-inline-start: auto; padding: 2px 8px; font-size: 11px; font-weight: 800; }
.otlob-page .trust-badges { border-top: 1px dashed var(--border); flex-wrap: wrap; gap: 8px; padding-top: 12px; display: flex; }
.otlob-page .trust-badge { color: var(--success); background: rgba(16, 185, 129, 0.1); border-radius: 999px; align-items: center; gap: 5px; padding: 5px 10px; font-size: 12.5px; font-weight: 700; display: inline-flex; }
@media (width <= 900px) {
  .otlob-page .seo-grid { grid-template-columns: 1fr; }
  .otlob-page .seo-aside { position: static; }
}
.otlob-page .newsletter-card { background: linear-gradient(135deg,var(--primary) 0%,#0e9ccb 60%,#0f172a 130%); color: rgb(255, 255, 255); box-shadow: var(--shadow-lg); border-radius: 20px; grid-template-columns: 1fr 1.1fr; align-items: center; gap: 32px; padding: 38px 32px; display: grid; position: relative; overflow: hidden; }
.otlob-page .newsletter-card::before { content: ""; background: radial-gradient(circle,var(--accent-yellow) 0%,transparent 70%); opacity: 0.35; pointer-events: none; width: 220px; height: 220px; position: absolute; inset: auto -40px -40px auto; }
.otlob-page .newsletter-intro h2 { color: rgb(255, 255, 255); margin: 0px 0px 10px; font-size: 26px; font-weight: 900; }
.otlob-page .newsletter-intro p { color: rgba(255, 255, 255, 0.9); margin: 0px 0px 14px; font-size: 15px; line-height: 1.8; }
.otlob-page .nl-benefits { gap: 8px; margin: 0px; padding: 0px; list-style: none; display: grid; }
.otlob-page .nl-benefits li { color: rgb(255, 255, 255); align-items: center; gap: 8px; font-size: 14px; font-weight: 600; display: flex; }
.otlob-page .nl-benefits svg { color: var(--accent-yellow); flex-shrink: 0; }
.otlob-page .newsletter-form { z-index: 1; background: rgba(255, 255, 255, 0.98); border-radius: 16px; gap: 12px; padding: 22px 22px 18px; display: grid; position: relative; }
.otlob-page .nl-field { gap: 6px; display: grid; }
.otlob-page .nl-field label { color: var(--text); font-size: 13px; font-weight: 700; }
.otlob-page .nl-field input, .otlob-page .nl-field select { border: 1.5px solid var(--border); width: 100%; color: var(--text); background: rgb(255, 255, 255); border-radius: 10px; min-height: 44px; padding: 12px 14px; font-family: inherit; font-size: 15px; transition: border-color 0.15s, box-shadow 0.15s; }
.otlob-page .nl-field input:focus, .otlob-page .nl-field select:focus { border-color: var(--primary); outline: none; box-shadow: rgba(32, 191, 239, 0.15) 0px 0px 0px 3px; }
.otlob-page .nl-field input[aria-invalid="true"] { border-color: rgb(220, 38, 38); }
.otlob-page .nl-error { color: rgb(220, 38, 38); min-height: 16px; font-size: 12.5px; font-weight: 600; }
.otlob-page .nl-submit { background: var(--accent); color: rgb(255, 255, 255); cursor: pointer; border: none; border-radius: 10px; justify-content: center; align-items: center; gap: 8px; min-height: 48px; padding: 13px 20px; font-family: inherit; font-size: 15px; font-weight: 800; transition: background 0.15s, transform 0.1s; display: inline-flex; }
.otlob-page .nl-submit:hover:not(:disabled) { background: rgb(232, 90, 36); }
.otlob-page .nl-submit:active { transform: translateY(1px); }
.otlob-page .nl-submit:disabled { opacity: 0.7; cursor: not-allowed; }
.otlob-page .nl-spinner { animation: 1s linear 0s infinite normal none running nl-spin; display: none; }
.otlob-page .nl-submit.loading .nl-spinner { display: inline-block; }
.otlob-page .nl-submit.loading .nl-submit-label { opacity: 0.75; }
@keyframes nl-spin { 
  100% { transform: rotate(360deg); }
}
.otlob-page .nl-note { color: var(--muted); text-align: center; margin: 0px; font-size: 12.5px; }
.otlob-page .nl-status { text-align: center; min-height: 20px; margin: 6px 0px 0px; font-size: 14px; font-weight: 700; }
.otlob-page .nl-status.success { color: var(--success); }
.otlob-page .nl-status.error { color: rgb(220, 38, 38); }
@media (width <= 820px) {
  .otlob-page .newsletter-card { grid-template-columns: 1fr; padding: 28px 22px; }
}
.otlob-page .copy { text-align: center; color: rgb(148, 163, 184); border-top: 1px solid rgb(30, 41, 59); margin-top: 24px; padding-top: 16px; font-size: 13px; }
@media (width <= 920px) {
}
.otlob-page .toast { background: var(--text); color: rgb(255, 255, 255); opacity: 0; z-index: 9999; border-radius: 10px; padding: 12px 22px; font-weight: 600; transition: 0.25s; position: fixed; bottom: 80px; left: 50%; transform: translateX(-50%) translateY(40px); }
.otlob-page .toast.show { opacity: 1; transform: translateX(-50%) translateY(0px); }
.otlob-page .season-wrap { color: rgb(255, 255, 255); background: var(--season-bg, linear-gradient(135deg,#0e9ccb,#20bfef)); box-shadow: var(--shadow-lg); border-radius: 22px; padding: 26px; position: relative; overflow: hidden; }
.otlob-page .season-wrap::after { content: ""; pointer-events: none; background-image: radial-gradient(rgba(255, 255, 255, 0.16) 1px, rgba(0, 0, 0, 0) 1px); background-size: 20px 20px; position: absolute; inset: 0px; }
.otlob-page .season-head { z-index: 1; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 14px; display: flex; position: relative; }
.otlob-page .season-badge { backdrop-filter: blur(4px); background: rgba(255, 255, 255, 0.18); border: 1px solid rgba(255, 255, 255, 0.35); border-radius: 999px; align-items: center; gap: 8px; padding: 6px 13px; font-size: 13px; font-weight: 800; display: inline-flex; }
.otlob-page .season-title { margin: 10px 0px 4px; font-size: clamp(22px, 3vw, 32px); font-weight: 900; line-height: 1.25; }
.otlob-page .season-sub { opacity: 0.92; max-width: 640px; margin: 0px; font-size: 15px; }
.otlob-page .season-dates { opacity: 0.9; margin-top: 6px; font-size: 13px; font-weight: 700; }
.otlob-page .countdown { z-index: 1; gap: 8px; display: flex; position: relative; }
.otlob-page .cd-box { text-align: center; backdrop-filter: blur(4px); background: rgba(255, 255, 255, 0.16); border: 1px solid rgba(255, 255, 255, 0.3); border-radius: 12px; min-width: 62px; padding: 8px 6px; }
.otlob-page .cd-num { font-variant-numeric: tabular-nums; font-size: 22px; font-weight: 900; line-height: 1; display: block; }
.otlob-page .cd-lbl { opacity: 0.9; font-size: 11px; font-weight: 600; }
.otlob-page .season-deals { z-index: 1; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 12px; margin-top: 20px; display: grid; position: relative; }
.otlob-page .season-deal { color: var(--text); box-shadow: var(--shadow-sm); background: rgba(255, 255, 255, 0.96); border-radius: 14px; flex-direction: column; gap: 6px; padding: 14px; transition: 0.15s; display: flex; }
.otlob-page .season-deal:hover { text-decoration: none; transform: translateY(-3px); }
.otlob-page .season-deal .sd-store { color: var(--muted); font-size: 12.5px; font-weight: 700; }
.otlob-page .season-deal .sd-title { margin: 0px; font-size: 15px; font-weight: 800; line-height: 1.4; }
.otlob-page .season-deal .sd-value { background: var(--accent); color: rgb(255, 255, 255); border-radius: 999px; align-self: flex-start; padding: 3px 10px; font-size: 12.5px; font-weight: 800; }
.otlob-page .season-deal .sd-code { letter-spacing: 1px; border: 1.5px dashed var(--border); text-align: center; border-radius: 9px; padding: 6px 10px; font-family: ui-monospace, monospace; font-size: 13.5px; font-weight: 800; }
.otlob-page .season-next { z-index: 1; opacity: 0.9; margin: 14px 0px 0px; font-size: 13.5px; position: relative; }
@media (width <= 640px) {
  .otlob-page .season-head { flex-direction: column; align-items: flex-start; }
}
.otlob-page .season-section { margin: 8px 0px 32px; }
.otlob-page .season-lead { color: var(--muted); max-width: 820px; margin: -6px 0px 14px; font-size: 15px; }
.otlob-page .season-wrap { padding: 22px; }
.otlob-page .season-title { font-size: clamp(19px, 2.2vw, 24px); }
.otlob-page .season-deal .sd-country { color: var(--muted); font-size: 12px; font-weight: 700; }
.otlob-page .season-deal .sd-cta { color: var(--primary-dark); font-size: 13.5px; font-weight: 800; }
.otlob-page .season-foot { z-index: 1; margin-top: 18px; position: relative; }
.otlob-page .season-cta { color: var(--text); box-shadow: var(--shadow-sm); background: rgb(255, 255, 255); border-radius: 12px; align-items: center; gap: 8px; min-height: 44px; padding: 12px 20px; font-weight: 800; display: inline-flex; }
.otlob-page .season-cta:hover { text-decoration: none; transform: translateY(-2px); }
.otlob-page .countdown { flex-wrap: wrap; gap: 8px; display: flex; }
.otlob-page .cd-box { text-align: center; background: rgba(255, 255, 255, 0.18); border: 1px solid rgba(255, 255, 255, 0.3); border-radius: 12px; gap: 2px; min-width: 62px; padding: 8px 12px; display: grid; }
.otlob-page .cd-num { font-variant-numeric: tabular-nums; font-size: 20px; font-weight: 900; }
.otlob-page .cd-lbl { opacity: 0.9; font-size: 11.5px; }
.otlob-page .offers-hero { border-bottom: 1px solid var(--border); background: linear-gradient(135deg, rgba(32, 191, 239, 0.12), rgba(255, 107, 53, 0.12)); padding: 28px 0px 22px; }
.otlob-page .offers-hero h1 { margin: 0px 0px 10px; font-size: clamp(22px, 3.2vw, 34px); line-height: 1.3; }
.otlob-page .offers-hero-lead { color: var(--muted); max-width: 820px; margin: 0px; }
.otlob-page .offers-trust { color: var(--text); flex-wrap: wrap; gap: 8px 16px; margin: 14px 0px 8px; padding: 0px; font-size: 13.5px; font-weight: 700; list-style: none; display: flex; }
.otlob-page .offers-trust li { border: 1px solid var(--border); background: rgb(255, 255, 255); border-radius: 999px; padding: 6px 13px; }
.otlob-page .offers-method-link { font-size: 14px; font-weight: 700; }
.otlob-page .country-tabs { scrollbar-width: none; gap: 8px; max-width: 100%; margin: 0px; padding: 16px 0px 4px; list-style: none; display: flex; overflow-x: auto; }
.otlob-page .country-tabs::-webkit-scrollbar { display: none; }
.otlob-page .country-tabs-wrap { margin: 0px; }
.otlob-page .country-tab { white-space: nowrap; background: var(--surface); border: 1px solid var(--border); font-style: inherit; font-variant: inherit; font-stretch: inherit; line-height: inherit; font-family: inherit; font-optical-sizing: inherit; font-size-adjust: inherit; font-kerning: inherit; font-feature-settings: inherit; font-variation-settings: inherit; color: var(--text); cursor: pointer; border-radius: 999px; flex: 0 0 auto; align-items: center; gap: 8px; min-height: 44px; padding: 9px 16px; font-size: 14px; font-weight: 700; text-decoration: none; display: inline-flex; }
.otlob-page .country-tab:hover { border-color: var(--primary); color: var(--primary-dark); }
.otlob-page .country-tab:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }
.otlob-page .country-tab .country-code { opacity: 0.75; letter-spacing: 0.02em; font-size: 12px; font-weight: 700; }
.otlob-page .country-tab.active, .otlob-page .country-tab.active:hover { background: var(--primary); border-color: var(--primary); color: rgb(255, 255, 255); }
.otlob-page .country-tab.active .country-code { opacity: 0.9; }
.otlob-page .offer-filters { gap: 8px; margin-bottom: 16px; display: grid; }
.otlob-page .filter-row { flex-wrap: wrap; gap: 8px; display: flex; }
.otlob-page .filter-chip { background: var(--surface); border: 1px solid var(--border); font-style: inherit; font-variant: inherit; font-stretch: inherit; line-height: inherit; font-family: inherit; font-optical-sizing: inherit; font-size-adjust: inherit; font-kerning: inherit; font-feature-settings: inherit; font-variation-settings: inherit; color: var(--muted); cursor: pointer; border-radius: 999px; min-height: 40px; padding: 8px 14px; font-size: 13.5px; font-weight: 700; }
.otlob-page .filter-chip.active { background: var(--text); border-color: var(--text); color: rgb(255, 255, 255); }
.otlob-page .offers-grid { grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 14px; display: grid; }
.otlob-page .offer-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow-sm); flex-direction: column; gap: 10px; padding: 16px; display: flex; }
.otlob-page .offer-card-head { justify-content: space-between; align-items: center; gap: 10px; display: flex; }
.otlob-page .offer-store { align-items: center; gap: 10px; min-width: 0px; display: flex; }
.otlob-page .offer-store img, .otlob-page .offer-store-fallback { object-fit: contain; background: var(--bg); width: 44px; height: 44px; color: var(--primary-dark); border-radius: 12px; flex: 0 0 auto; place-items: center; font-weight: 900; display: grid; }
.otlob-page .offer-store-name { margin: 0px; font-size: 15px; font-weight: 800; }
.otlob-page .offer-country { color: var(--muted); margin: 0px; font-size: 12.5px; }
.otlob-page .offer-value { background: var(--accent); color: rgb(255, 255, 255); white-space: nowrap; border-radius: 999px; padding: 5px 11px; font-size: 13px; font-weight: 800; }
.otlob-page .offer-title { margin: 0px; font-size: 16px; line-height: 1.45; }
.otlob-page .offer-desc { color: var(--muted); margin: 0px; font-size: 14px; }
.otlob-page .offer-meta { flex-wrap: wrap; gap: 6px; margin: 0px; padding: 0px; list-style: none; display: flex; }
.otlob-page .offer-meta li { background: var(--bg); color: var(--muted); border: 1px solid var(--border); border-radius: 999px; padding: 4px 10px; font-size: 12px; font-weight: 700; }
.otlob-page .offer-meta .offer-type { color: var(--primary-dark); background: rgba(32, 191, 239, 0.14); border-color: rgba(0, 0, 0, 0); }
.otlob-page .offer-meta .verified { color: rgb(11, 122, 92); background: rgba(16, 185, 129, 0.14); border-color: rgba(0, 0, 0, 0); }
.otlob-page .offer-terms { color: var(--muted); margin: 0px; font-size: 12.5px; }
.otlob-page .offer-code { letter-spacing: 1px; border: 1.5px dashed var(--border); text-align: center; border-radius: 10px; padding: 8px; font-family: ui-monospace, monospace; font-weight: 800; }
.otlob-page .offer-cta { background: var(--primary); color: rgb(255, 255, 255); border-radius: 11px; justify-content: center; align-items: center; min-height: 44px; margin-top: auto; padding: 11px 16px; font-weight: 800; display: inline-flex; }
.otlob-page .offer-cta:hover { background: var(--primary-dark); color: rgb(255, 255, 255); text-decoration: none; }
.otlob-page .offers-more { justify-content: center; margin-top: 18px; display: flex; }
.otlob-page .btn-more { background: var(--surface); border: 1px solid var(--border); font-style: inherit; font-variant: inherit; font-stretch: inherit; font-size: inherit; line-height: inherit; font-family: inherit; font-optical-sizing: inherit; font-size-adjust: inherit; font-kerning: inherit; font-feature-settings: inherit; font-variation-settings: inherit; cursor: pointer; border-radius: 12px; min-height: 44px; padding: 12px 22px; font-weight: 800; }
.otlob-page .offers-empty { color: var(--muted); }
.otlob-page .season-wrap-page { margin-bottom: 16px; }
.otlob-page .upcoming-grid { grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 12px; display: grid; }
.otlob-page .upcoming-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); flex-direction: column; gap: 6px; padding: 14px; display: flex; }
.otlob-page .upcoming-card h3 { margin: 0px; font-size: 16px; }
.otlob-page .upcoming-card p { color: var(--muted); margin: 0px; font-size: 13.5px; }
.otlob-page .upcoming-badge { font-size: 13px; font-weight: 800; }
.otlob-page .upcoming-date { font-weight: 700; }
.otlob-page .upcoming-status { background: var(--bg); border: 1px solid var(--border); color: var(--muted); border-radius: 999px; align-self: flex-start; padding: 3px 11px; font-size: 12px; font-weight: 700; }
.otlob-page .store-offer-grid { grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 12px; display: grid; }
.otlob-page .store-offer-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); gap: 4px; padding: 14px; display: grid; }
.otlob-page .store-offer-name { color: var(--text); font-weight: 800; }
.otlob-page .store-offer-count { color: var(--muted); font-size: 13px; }
.otlob-page .trust-text { color: var(--muted); max-width: 820px; }
@media (width <= 768px) {
  .otlob-page .offers-hero { padding: 20px 0px 16px; }
  .otlob-page .offers-hero-lead { font-size: 14px; line-height: 1.7; }
  .otlob-page .offers-trust { gap: 6px; margin: 12px 0px 6px; font-size: 12.5px; }
  .otlob-page .offers-trust li { padding: 5px 10px; }
  .otlob-page .country-tabs { z-index: 5; background: var(--bg); scroll-snap-type: x mandatory; border-bottom: 1px solid var(--border); gap: 6px; margin: 0px -16px; padding: 10px 16px; position: sticky; top: 0px; }
  .otlob-page .country-tabs::-webkit-scrollbar { display: none; }
  .otlob-page .country-tab { scroll-snap-align: start; padding: 8px 14px; font-size: 13.5px; }
  .otlob-page .filter-row { scrollbar-width: none; flex-wrap: nowrap; margin: 0px -16px; padding: 2px 16px; overflow-x: auto; }
  .otlob-page .filter-row::-webkit-scrollbar { display: none; }
  .otlob-page .filter-chip { flex: 0 0 auto; }
  .otlob-page .offers-grid { grid-template-columns: 1fr; gap: 12px; }
  .otlob-page .offer-card { gap: 9px; padding: 14px; }
  .otlob-page .offer-card-head { align-items: flex-start; }
  .otlob-page .offer-store img, .otlob-page .offer-store-fallback { border-radius: 10px; width: 38px; height: 38px; }
  .otlob-page .offer-store-name { overflow-wrap: anywhere; font-size: 14.5px; }
  .otlob-page .offer-value { padding: 4px 10px; font-size: 12.5px; }
  .otlob-page .offer-title { font-size: 15.5px; }
  .otlob-page .offer-desc { -webkit-line-clamp: 3; -webkit-box-orient: vertical; font-size: 13.5px; display: -webkit-box; overflow: hidden; }
  .otlob-page .offer-cta { width: 100%; min-height: 46px; }
  .otlob-page .btn-more { width: 100%; }
  .otlob-page .cat-grid { grid-template-columns: repeat(auto-fill, minmax(45%, 1fr)); gap: 10px; }
  .otlob-page .upcoming-grid, .otlob-page .store-offer-grid { grid-template-columns: 1fr; gap: 10px; }
  .otlob-page .season-wrap-page { padding: 18px 16px; }
  .otlob-page .season-title { font-size: 20px; }
  .otlob-page .season-sub, .otlob-page .season-dates { font-size: 13.5px; }
}
@media (width <= 340px) {
  .otlob-page .offer-card-head { flex-direction: column; align-items: flex-start; }
  .otlob-page .offer-value { align-self: flex-start; }
}
@media (prefers-reduced-motion: reduce) {
  .otlob-page .season-cta:hover, .otlob-page .season-deal:hover { transform: none; }
  .otlob-page * { transition-duration: 0.001ms !important; animation-duration: 0.001ms !important; }
}
.otlob-page .dir-hero .dir-breadcrumbs { margin-bottom: 10px; }
.otlob-page .dir-breadcrumbs ol { flex-wrap: wrap; gap: 6px; margin: 0px; padding: 0px; font-size: 13px; list-style: none; display: flex; }
.otlob-page .dir-breadcrumbs li + li::before { content: "‹"; opacity: 0.6; margin-inline-end: 6px; }
.otlob-page .dir-breadcrumbs a { color: inherit; opacity: 0.85; text-decoration: none; }
.otlob-page .dir-breadcrumbs a:hover { text-decoration: underline; }
.otlob-page .dir-controls { grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 12px; margin: 18px 0px 6px; display: grid; }
.otlob-page .dir-controls-2 { grid-template-columns: repeat(2, minmax(0px, 1fr)); max-width: 640px; }
.otlob-page .dir-field { flex-direction: column; gap: 6px; display: flex; }
.otlob-page .dir-field label { color: rgb(71, 85, 105); font-size: 13px; font-weight: 700; }
.otlob-page .dir-field input, .otlob-page .dir-field select { width: 100%; font-style: inherit; font-variant: inherit; font-weight: inherit; font-stretch: inherit; line-height: inherit; font-family: inherit; font-optical-sizing: inherit; font-size-adjust: inherit; font-kerning: inherit; font-feature-settings: inherit; font-variation-settings: inherit; color: rgb(15, 23, 42); background: rgb(255, 255, 255); border: 1px solid rgb(226, 232, 240); border-radius: 12px; padding: 11px 14px; font-size: 15px; }
.otlob-page .dir-field input:focus-visible, .otlob-page .dir-field select:focus-visible { outline-offset: 2px; outline: rgb(255, 107, 53) solid 2px; }
.otlob-page .dir-count { color: rgb(100, 116, 139); font-size: 14px; font-weight: 700; }
.otlob-page .dir-grid { grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 16px; display: grid; }
.otlob-page .dir-card { background: rgb(255, 255, 255); border: 1px solid rgb(233, 238, 245); border-radius: 16px; flex-direction: column; gap: 10px; padding: 16px; transition: transform 0.18s, box-shadow 0.18s, border-color 0.18s; display: flex; position: relative; }
.otlob-page .dir-card:hover { border-color: rgb(255, 215, 196); transform: translateY(-3px); box-shadow: rgba(15, 23, 42, 0.08) 0px 14px 30px; }
.otlob-page .dir-card:focus-within { border-color: rgb(255, 107, 53); }
.otlob-page .dir-card a { color: inherit; text-decoration: none; }
.otlob-page .store-card-name a::after, .otlob-page .category-card-name a::after { content: ""; border-radius: 16px; position: absolute; inset: 0px; }
.otlob-page .store-card-top { grid-template-columns: 64px minmax(0px, 1fr); align-items: center; gap: 12px; display: grid; }
.otlob-page .store-logo-box { background: rgb(248, 250, 252); border: 1px solid rgb(238, 242, 247); border-radius: 14px; flex-shrink: 0; place-items: center; width: 64px; height: 64px; display: grid; overflow: hidden; }
.otlob-page .store-logo-box img { object-fit: contain; width: 100%; height: 100%; padding: 6px; }
.otlob-page .store-logo-fallback, .otlob-page .category-logo-fallback { color: rgb(255, 107, 53); font-size: 22px; font-weight: 800; }
.otlob-page .store-card-id { flex-direction: column; gap: 2px; min-width: 0px; display: flex; }
.otlob-page .store-card-name, .otlob-page .category-card-name { color: rgb(15, 23, 42); margin: 0px; font-size: 17px; font-weight: 800; }
.otlob-page .store-card-en { color: rgb(148, 163, 184); font-size: 12px; }
.otlob-page .store-card-cat { color: rgb(71, 85, 105); font-size: 12px; font-weight: 700; }
.otlob-page .store-card-countries { color: rgb(100, 116, 139); margin: 0px; font-size: 12px; line-height: 1.7; }
.otlob-page .store-card-status { color: rgb(22, 163, 74); margin: 0px; font-size: 13px; font-weight: 700; }
.otlob-page .store-card-cta, .otlob-page .category-card-cta, .otlob-page .dir-inline-cta { color: rgb(255, 107, 53); align-self: flex-start; margin-top: auto; font-size: 14px; font-weight: 800; }
.otlob-page .dir-inline-cta { margin-top: 10px; display: inline-block; }
.otlob-page .category-card-head { align-items: center; gap: 10px; display: flex; }
.otlob-page .category-icon { font-size: 26px; line-height: 1; }
.otlob-page .category-card-desc { color: rgb(71, 85, 105); margin: 0px; font-size: 14px; line-height: 1.8; }
.otlob-page .category-card-count { color: rgb(100, 116, 139); margin: 0px; font-size: 13px; font-weight: 700; }
.otlob-page .category-logos { flex-wrap: wrap; gap: 8px; margin: 0px; padding: 0px; list-style: none; display: flex; }
.otlob-page .category-logos li { background: rgb(248, 250, 252); border: 1px solid rgb(238, 242, 247); border-radius: 10px; place-items: center; width: 36px; height: 36px; display: grid; overflow: hidden; }
.otlob-page .category-logos img { object-fit: contain; width: 100%; height: 100%; padding: 4px; }
.otlob-page .category-subs { flex-wrap: wrap; gap: 6px; margin: 0px; padding: 0px; list-style: none; display: flex; }
.otlob-page .category-subs a { z-index: 1; color: rgb(71, 85, 105); background: rgb(241, 245, 249); border-radius: 999px; padding: 4px 10px; font-size: 12px; font-weight: 700; position: relative; }
.otlob-page .dir-empty { text-align: center; color: rgb(71, 85, 105); border: 1px dashed rgb(219, 227, 236); border-radius: 16px; padding: 28px 18px; }
.otlob-page .dir-empty p { margin: 0px; font-size: 15px; }
.otlob-page .dir-pagination { margin-top: 20px; }
.otlob-page .dir-pagination ul { flex-wrap: wrap; justify-content: center; gap: 8px; margin: 0px; padding: 0px; list-style: none; display: flex; }
.otlob-page .page-link { color: rgb(15, 23, 42); background: rgb(255, 255, 255); border: 1px solid rgb(226, 232, 240); border-radius: 12px; place-items: center; min-width: 44px; min-height: 44px; padding: 0px 12px; font-size: 14px; font-weight: 700; text-decoration: none; display: inline-grid; }
.otlob-page .page-link.active { color: rgb(255, 255, 255); background: rgb(255, 107, 53); border-color: rgb(255, 107, 53); }
.otlob-page .page-link.disabled { opacity: 0.45; }
.otlob-page .dir-links { flex-wrap: wrap; gap: 10px 18px; margin: 12px 0px 0px; padding: 0px; font-size: 14px; font-weight: 700; list-style: none; display: flex; }
.otlob-page .dir-links a { color: rgb(255, 107, 53); text-decoration: none; }
.otlob-page .dir-note { color: rgb(100, 116, 139); margin: 10px 0px 0px; font-size: 13px; }
@media (width <= 640px) {
  .otlob-page .dir-grid, .otlob-page .dir-controls { grid-template-columns: 1fr; }
  .otlob-page .dir-controls-2 { grid-template-columns: 1fr; max-width: none; }
  .otlob-page .dir-card { padding: 14px; }
}
.otlob-page .campaigns-stack { gap: 28px; display: grid; }
.otlob-page .campaign-section { margin-bottom: 4px; }
.otlob-page .campaign-banner { background: linear-gradient(135deg, var(--cmp-start), var(--cmp-end)); color: var(--cmp-text); border-radius: 20px; padding: 28px; position: relative; overflow: hidden; }
.otlob-page .campaign-banner.mode-image { padding: 0px; }
.otlob-page .campaign-banner-media { position: absolute; inset: 0px; }
.otlob-page .campaign-banner-media img { object-fit: cover; object-position: var(--cmp-focal, center); width: 100%; height: 100%; }
.otlob-page .campaign-banner.mode-image .campaign-banner-body { background: linear-gradient(180deg, rgba(0,0,0,calc(var(--cmp-overlay) * .6)), rgba(0,0,0,var(--cmp-overlay))); padding: 40px 28px; position: relative; }
.otlob-page .campaign-badge { background: var(--cmp-badge); color: inherit; border-radius: 999px; align-items: center; gap: 8px; padding: 6px 14px; font-size: 13px; font-weight: 700; display: inline-flex; }
.otlob-page .campaign-title { color: inherit; margin: 12px 0px 8px; font-size: clamp(22px, 3vw, 30px); }
.otlob-page .campaign-desc { opacity: 0.92; max-width: 60ch; color: inherit; margin: 0px 0px 10px; }
.otlob-page .campaign-dates, .otlob-page .campaign-left { opacity: 0.9; color: inherit; margin: 0px 0px 6px; font-size: 14px; }
.otlob-page .campaign-left { opacity: 1; font-weight: 700; }
.otlob-page .campaign-banner-body .countdown { color: inherit; margin-top: 12px; }
.otlob-page .campaign-cta { background: var(--cmp-btn-bg); color: var(--cmp-btn-text); border-radius: 999px; margin-top: 14px; padding: 12px 22px; font-weight: 800; text-decoration: none; display: inline-block; }
.otlob-page .campaign-cta:hover { filter: brightness(0.95); }
.otlob-page .campaign-grid { margin-top: 20px; }
@media (width <= 640px) {
  .otlob-page .campaign-banner { border-radius: 16px; padding: 20px; }
  .otlob-page .campaign-banner.mode-image .campaign-banner-body { padding: 28px 20px; }
  .otlob-page .campaign-cta { text-align: center; display: block; }
}
.otlob-page .hero-grid > .hero-left { order: 2; }
.otlob-page .hero-grid > .offers-slider { order: 1; }
.otlob-page .store-suggest { gap: 6px; margin: 10px 0px 0px; padding: 0px; list-style: none; display: grid; }
.otlob-page .store-suggest a { border: 1px solid var(--border); color: var(--text); background: rgb(255, 255, 255); border-radius: 12px; align-items: center; gap: 10px; padding: 8px 10px; text-decoration: none; display: flex; }
.otlob-page .store-suggest a:hover, .otlob-page .store-suggest a:focus-visible { border-color: var(--primary); background: rgb(248, 250, 252); }
.otlob-page .store-suggest img, .otlob-page .store-suggest-fallback { object-fit: contain; width: 40px; height: 40px; color: var(--primary-dark); background: rgb(241, 245, 249); border-radius: 10px; flex: 0 0 auto; place-items: center; font-weight: 900; display: grid; }
.otlob-page .store-suggest-body { gap: 2px; min-width: 0px; display: grid; }
.otlob-page .store-suggest-name { font-size: 15px; font-weight: 800; }
.otlob-page .store-suggest-note { color: var(--muted); text-overflow: ellipsis; white-space: nowrap; font-size: 12.5px; overflow: hidden; }
.otlob-page .store-suggest-empty { color: var(--muted); margin: 10px 0px 0px; font-size: 14px; font-weight: 700; }
.otlob-page .hcs { position: relative; }
.otlob-page .hcs:focus-visible { outline: 3px solid var(--primary); outline-offset: 4px; border-radius: 20px; }
.otlob-page .hcs-slide { display: none; }
.otlob-page .hcs-slide.active { gap: 14px; display: grid; }
.otlob-page .hcs-slide .campaign-banner { min-height: 240px; }
.otlob-page .hcs-controls { justify-content: center; align-items: center; gap: 12px; margin-top: 14px; display: flex; }
.otlob-page .hcs-nav { border: 1px solid var(--border); width: 40px; height: 40px; color: var(--primary-dark); cursor: pointer; background: rgb(255, 255, 255); border-radius: 999px; place-items: center; font-size: 22px; line-height: 1; display: grid; }
.otlob-page .hcs-nav:hover, .otlob-page .hcs-nav:focus-visible { background: var(--primary); color: rgb(255, 255, 255); border-color: var(--primary); }
.otlob-page .hcs-dots { gap: 6px; display: flex; }
.otlob-page .hcs-dot { cursor: pointer; background: rgb(203, 213, 225); border: 0px; border-radius: 999px; width: 9px; height: 9px; padding: 0px; }
.otlob-page .hcs-dot.active { background: var(--primary); width: 22px; }
@media (width <= 640px) {
  .otlob-page .store-grid, .otlob-page .cat-grid, .otlob-page .offers-grid, .otlob-page .dir-grid, .otlob-page .season-deals, .otlob-page .store-offer-grid, .otlob-page .coupon-list { grid-template-columns: repeat(2, minmax(0px, 1fr)); align-items: stretch; gap: 10px; }
  .otlob-page .store-grid > *, .otlob-page .coupon-list > li, .otlob-page .offers-grid > *, .otlob-page .dir-grid > * { height: 100%; }
  .otlob-page .store-card, .otlob-page .cat-card, .otlob-page .dir-card, .otlob-page .offer-card { overflow-wrap: anywhere; height: 100%; padding: 12px; }
  .otlob-page .store-logo { width: 52px; height: 52px; font-size: 15px; }
  .otlob-page .store-card h3 { font-size: 14px; }
  .otlob-page .store-stats, .otlob-page .store-rating, .otlob-page .store-best { font-size: 11.5px; }
  .otlob-page .store-cta { padding: 8px 10px; font-size: 13px; }
  .otlob-page .coupon-card { grid-template-columns: 1fr; align-content: start; gap: 8px; height: 100%; padding: 12px; }
  .otlob-page .coupon-card .c-logo { width: 40px; height: 40px; font-size: 12px; }
  .otlob-page .coupon-body h3 { font-size: 14px; }
  .otlob-page .coupon-meta { gap: 6px; font-size: 11.5px; }
  .otlob-page .coupon-actions { flex-direction: column; align-self: end; width: 100%; min-width: 0px; }
  .otlob-page .code-display { letter-spacing: 1px; min-width: 0px; padding: 8px; font-size: 13px; }
  .otlob-page .btn-reveal { width: 100%; min-width: 0px; min-height: 44px; padding: 10px 8px; font-size: 13px; }
  .otlob-page .offer-card { gap: 8px; }
  .otlob-page .offer-title { font-size: 14px; }
  .otlob-page .offer-desc { font-size: 12.5px; }
  .otlob-page .offer-cta { padding: 10px 8px; font-size: 13px; }
  .otlob-page .offer-store img, .otlob-page .offer-store-fallback { width: 32px; height: 32px; }
  .otlob-page .offer-store-name { font-size: 13px; }
  .otlob-page .offer-value { padding: 3px 8px; font-size: 11.5px; }
  .otlob-page .season-deal { padding: 12px; }
  .otlob-page .sd-title { font-size: 14px; }
}
@media (width <= 360px) {
  .otlob-page .store-card, .otlob-page .cat-card, .otlob-page .coupon-card, .otlob-page .offer-card, .otlob-page .dir-card { padding: 10px; }
  .otlob-page .store-card h3, .otlob-page .coupon-body h3, .otlob-page .offer-title { font-size: 13px; }
  .otlob-page .btn-reveal, .otlob-page .offer-cta { font-size: 12px; }
  .otlob-page .offer-card-head { flex-direction: column; align-items: flex-start; }
}
.otlob-page .cat-hero-row { flex-wrap: wrap; align-items: center; gap: 14px; display: flex; }
.otlob-page .cat-hero-icon { font-size: 40px; line-height: 1; }
.otlob-page .cat-hero-image { object-fit: cover; border-radius: 16px; width: 72px; height: 72px; }
.otlob-page .cat-filters { flex-direction: column; gap: 12px; margin: 4px 0px 18px; display: flex; }
.otlob-page .cat-filter-title { color: rgb(15, 23, 42); margin-bottom: 8px; font-size: 14px; font-weight: 800; display: block; }
.otlob-page .cat-filter-chips { flex-wrap: wrap; gap: 8px; display: flex; }
.otlob-page .cat-chip { color: rgb(15, 23, 42); font-style: inherit; font-variant: inherit; font-stretch: inherit; line-height: inherit; font-family: inherit; font-optical-sizing: inherit; font-size-adjust: inherit; font-kerning: inherit; font-feature-settings: inherit; font-variation-settings: inherit; cursor: pointer; background: rgb(255, 255, 255); border: 1px solid rgb(216, 222, 231); border-radius: 999px; min-height: 40px; padding: 8px 16px; font-size: 14px; font-weight: 700; transition: background 0.15s, color 0.15s, border-color 0.15s; }
.otlob-page .cat-chip:hover { border-color: var(--primary, #0f766e); }
.otlob-page .cat-chip.active { background: var(--primary, #0f766e); border-color: var(--primary, #0f766e); color: rgb(255, 255, 255); }
.otlob-page .cat-chip.reset { color: rgb(255, 107, 53); border-color: rgb(255, 211, 194); align-self: flex-start; }
.otlob-page .cat-result-bar { flex-wrap: wrap; align-items: center; gap: 14px; display: flex; }
.otlob-page .cat-sort { align-items: center; gap: 8px; font-size: 14px; font-weight: 700; display: inline-flex; }
.otlob-page .cat-sort select { font: inherit; background: rgb(255, 255, 255); border: 1px solid rgb(216, 222, 231); border-radius: 10px; padding: 8px 12px; }
.otlob-page .cat-store-summary { color: rgb(71, 85, 105); margin: 0px; font-size: 13px; line-height: 1.8; }
.otlob-page .cat-store-badges { flex-wrap: wrap; gap: 6px; margin: 0px; padding: 0px; list-style: none; display: flex; }
.otlob-page .cat-store-badges li { color: rgb(15, 23, 42); background: rgb(241, 245, 249); border-radius: 999px; padding: 3px 10px; font-size: 11px; font-weight: 800; }
.otlob-page .cat-discovery { flex-wrap: wrap; gap: 8px; margin: 0px; padding: 0px; list-style: none; display: flex; }
.otlob-page .cat-guide { color: rgb(51, 65, 85); gap: 8px; margin: 0px; padding-inline-start: 20px; font-size: 15px; line-height: 1.9; display: grid; }
@media (width <= 640px) {
  .otlob-page.cat-page .dir-grid { grid-template-columns: repeat(2, minmax(0px, 1fr)); gap: 12px; }
  .otlob-page.cat-page .store-card-top { text-align: center; grid-template-columns: 1fr; justify-items: center; }
  .otlob-page.cat-page .cat-store-badges { justify-content: center; }
}
.otlob-page .legal-hero { padding-block: 28px; }
.otlob-page .legal-layout { grid-template-columns: 260px minmax(0px, 1fr); align-items: start; gap: 24px; padding-block: 28px; display: grid; }
.otlob-page.legal-page .legal-layout:has(> .legal-content:only-child) { grid-template-columns: minmax(0px, 1fr); max-width: 860px; }
.otlob-page .legal-toc { background: rgb(255, 255, 255); border: 1px solid rgb(231, 236, 243); border-radius: 16px; padding: 16px; position: sticky; top: 16px; }
.otlob-page .legal-toc h2 { margin: 0px 0px 10px; font-size: 16px; }
.otlob-page .legal-toc ol { gap: 6px; margin: 0px; padding-inline-start: 20px; font-size: 14px; display: grid; }
.otlob-page .legal-toc a { color: rgb(51, 65, 85); }
.otlob-page .legal-content { background: rgb(255, 255, 255); border: 1px solid rgb(231, 236, 243); border-radius: 18px; gap: 26px; padding: 22px; display: grid; }
.otlob-page .legal-content h2 { color: rgb(15, 23, 42); margin: 0px 0px 10px; scroll-margin-top: 90px; font-size: clamp(19px, 2.4vw, 23px); }
.otlob-page .legal-content h3 { color: rgb(15, 23, 42); margin: 16px 0px 8px; font-size: 17px; }
.otlob-page .legal-content p { color: rgb(51, 65, 85); margin: 0px 0px 10px; font-size: 15.5px; line-height: 1.95; }
.otlob-page .legal-list { color: rgb(51, 65, 85); gap: 6px; margin: 0px 0px 10px; padding-inline-start: 20px; font-size: 15px; line-height: 1.9; display: grid; }
.otlob-page .legal-updated { color: rgb(100, 116, 139); font-size: 14px; font-weight: 700; }
.otlob-page .legal-table-wrap { overflow-x: auto; }
.otlob-page .legal-table { border-collapse: collapse; width: 100%; font-size: 14px; }
.otlob-page .legal-table caption { text-align: start; color: rgb(100, 116, 139); padding-bottom: 8px; font-size: 13px; }
.otlob-page .legal-table th, .otlob-page .legal-table td { text-align: start; vertical-align: top; border: 1px solid rgb(231, 236, 243); padding: 8px 10px; }
.otlob-page .legal-table th { color: rgb(15, 23, 42); background: rgb(248, 250, 252); font-weight: 800; }
.otlob-page .legal-form { grid-template-columns: repeat(2, minmax(0px, 1fr)); gap: 16px; display: grid; }
.otlob-page .lf-field { flex-direction: column; gap: 6px; min-height: 96px; display: flex; }
.otlob-page .lf-full { grid-column: 1 / -1; }
.otlob-page .lf-field label { color: rgb(15, 23, 42); font-size: 14px; font-weight: 800; }
.otlob-page .lf-field input, .otlob-page .lf-field select, .otlob-page .lf-field textarea { font: inherit; background: rgb(255, 255, 255); border: 1px solid rgb(216, 222, 231); border-radius: 10px; width: 100%; min-height: 44px; padding: 10px 12px; }
.otlob-page .lf-field :is(input, .otlob-page select, .otlob-page textarea):focus-visible { outline-offset: 2px; outline: rgb(255, 107, 53) solid 2px; }
.otlob-page .lf-help { color: rgb(100, 116, 139); font-size: 12.5px; line-height: 1.7; }
.otlob-page .lf-error { color: rgb(185, 28, 28); min-height: 18px; font-size: 12.5px; font-weight: 800; }
.otlob-page .lf-consent { gap: 10px; min-height: auto; }
.otlob-page .lf-check { align-items: flex-start; gap: 8px; font-size: 14px; font-weight: 600; line-height: 1.8; display: flex; }
.otlob-page .lf-check input { flex: 0 0 auto; width: 18px; height: 18px; min-height: 18px; margin-top: 3px; }
.otlob-page .lf-hp { clip: rect(0px, 0px, 0px, 0px); white-space: nowrap; width: 1px; height: 1px; position: absolute; overflow: hidden; }
.otlob-page .lf-actions { grid-column: 1 / -1; }
.otlob-page .lf-submit, .otlob-page .lf-link-btn { color: rgb(255, 255, 255); background: rgb(255, 107, 53); border: none; border-radius: 12px; min-height: 48px; padding: 12px 22px; font-size: 15px; font-weight: 800; text-decoration: none; display: inline-block; }
.otlob-page .lf-submit[disabled] { opacity: 0.6; cursor: progress; }
.otlob-page .lf-secondary { background: rgb(15, 118, 110); }
.otlob-page .lf-status { grid-column: 1 / -1; min-height: 24px; margin: 0px; font-size: 14.5px; font-weight: 800; }
.otlob-page .lf-status.ok { color: rgb(21, 128, 61); }
.otlob-page .lf-status.bad { color: rgb(185, 28, 28); }
@media (width <= 900px) {
  .otlob-page .legal-layout { grid-template-columns: minmax(0px, 1fr); }
  .otlob-page .legal-toc { position: static; }
  .otlob-page .legal-form { grid-template-columns: minmax(0px, 1fr); }
}
@media (prefers-reduced-motion: reduce) {
  .otlob-page .skip-link { transition: none; }
}
.otlob-page .store-state { padding: 24px 0px 48px; }
.otlob-page .store-state-hero { text-align: center; max-width: 640px; margin: 0px auto; padding: 28px 18px 8px; }
.otlob-page .store-state-art { width: 120px; height: 96px; color: var(--brand, #0fb9b1); margin: 0px auto 14px; display: block; }
.otlob-page .store-state-hero h1 { margin: 0px 0px 10px; font-size: clamp(22px, 4.4vw, 30px); line-height: 1.4; }
.otlob-page .store-state-body { color: rgb(91, 107, 115); margin: 0px auto 18px; line-height: 1.9; }
.otlob-page .store-state-actions { flex-wrap: wrap; justify-content: center; gap: 10px; margin-bottom: 18px; display: flex; }
.otlob-page .store-state-actions .btn-primary { background: var(--primary); color: rgb(255, 255, 255); border-radius: 12px; justify-content: center; align-items: center; min-height: 46px; padding: 12px 22px; font-weight: 800; display: inline-flex; }
.otlob-page .store-state-actions .btn-primary:hover { background: var(--primary-dark); color: rgb(255, 255, 255); text-decoration: none; }
.otlob-page .store-state-actions .btn-secondary { background: var(--surface); border: 1px solid var(--border); min-height: 46px; color: var(--text); border-radius: 12px; justify-content: center; align-items: center; padding: 12px 22px; font-weight: 800; display: inline-flex; }
.otlob-page .store-state-actions .btn-secondary:hover { border-color: var(--primary); text-decoration: none; }
.otlob-page .store-state-contact { text-align: center; margin: 22px 0px 0px; }
.otlob-page .store-lookup { text-align: right; max-width: 460px; margin: 0px auto; }
.otlob-page .store-lookup input[type="search"] { width: 100%; font: inherit; background: rgb(255, 255, 255); border: 1px solid rgb(226, 232, 236); border-radius: 14px; padding: 12px 16px; }
.otlob-page .store-lookup-results { min-height: 24px; }
.otlob-page .store-lookup-results ul { gap: 4px; margin: 8px 0px 0px; padding: 0px; list-style: none; display: grid; }
.otlob-page .store-lookup-results a { background: rgb(244, 248, 249); border-radius: 12px; padding: 10px 14px; display: block; }
.otlob-page .store-lookup-empty { color: rgb(123, 138, 145); margin: 8px 0px 0px; font-size: 14px; }
.otlob-page .store-state-section { margin-top: 34px; }
.otlob-page .mini-store-card { flex-direction: column; gap: 8px; display: flex; }
.otlob-page .mini-store-desc { color: rgb(107, 122, 129); margin: 0px; font-size: 14px; line-height: 1.7; }
.otlob-page .store-hero-band { padding: 26px 0px 24px; }
.otlob-page .store-hero { align-items: flex-start; gap: 18px; margin-top: 10px; display: flex; }
.otlob-page .store-hero-logo { border: 1px solid var(--border); width: 88px; height: 88px; box-shadow: var(--shadow-sm); background: rgb(255, 255, 255); border-radius: 20px; flex: 0 0 88px; place-items: center; display: grid; overflow: hidden; }
.otlob-page .store-hero-logo img { object-fit: contain; width: 64px; height: 64px; }
.otlob-page .store-hero h1 { color: var(--text); margin: 0px 0px 8px; font-size: clamp(22px, 3.2vw, 34px); font-weight: 900; line-height: 1.35; }
.otlob-page .store-hero-desc { margin: 0px 0px 12px; }
.otlob-page .store-hero-meta > li a { color: var(--primary-dark); font-weight: 800; }
.otlob-page .store-empty-note { border: 1px dashed var(--accent); color: var(--text); background: rgba(255, 107, 53, 0.06); border-radius: 16px; padding: 18px; font-weight: 600; }
.otlob-page .store-empty-note p { margin: 0px; line-height: 1.9; }
@media (width <= 640px) {
  .otlob-page .store-hero { gap: 12px; }
  .otlob-page .store-hero-logo { border-radius: 14px; flex-basis: 64px; width: 64px; height: 64px; }
  .otlob-page .store-hero-logo img { width: 46px; height: 46px; }
  .otlob-page .store-state-hero { padding-top: 18px; }
  .otlob-page .store-state-art { width: 96px; height: 78px; }
  .otlob-page .store-state-actions .btn-primary, .otlob-page .store-state-actions .btn-secondary { text-align: center; flex: 1 1 100%; }
}
.otlob-page .store-hero-en { color: var(--muted); margin: 0px 0px 6px; font-size: 14px; font-weight: 700; }
.otlob-page .store-hero-team { color: var(--muted); margin: 10px 0px 0px; font-size: 13px; }
.otlob-page .store-hero-team a { color: var(--primary-dark); font-weight: 800; }
.otlob-page .store-country-area { margin-top: 10px; }
.otlob-page .store-country-intro { color: var(--text); border-inline-start: 4px solid var(--primary); box-shadow: var(--shadow-sm); background: rgb(255, 255, 255); border-radius: 14px; margin: 16px 0px 0px; padding: 12px 14px; font-weight: 600; line-height: 1.95; }
.otlob-page .store-summary { flex-wrap: wrap; gap: 10px; margin: 14px 0px 0px; padding: 0px; list-style: none; display: flex; }
.otlob-page .store-summary li { border-top-color: ; border-top-style: ; border-top-width: ; border-right-color: ; border-right-style: ; border-right-width: ; border-left-color: ; border-left-style: ; border-left-width: ; border-image-source: ; border-image-slice: ; border-image-width: ; border-image-outset: ; border-image-repeat: ; border-bottom: 3px solid var(--primary); color: var(--text); box-shadow: var(--shadow-sm); background: rgb(255, 255, 255); border-radius: 14px; padding: 10px 14px; font-size: 13.5px; font-weight: 700; }
.otlob-page .store-summary li strong { color: var(--primary-dark); font-size: 17px; font-weight: 900; }
.otlob-page .store-section { margin-top: 30px; }
.otlob-page .store-section > .section-title { color: var(--text); align-items: center; gap: 10px; margin: 0px 0px 14px; font-size: clamp(17px, 3vw, 21px); font-weight: 900; display: flex; }
.otlob-page .store-section > .section-title::before { content: ""; background: linear-gradient(180deg, var(--primary), var(--accent)); border-radius: 999px; flex: 0 0 auto; width: 6px; height: 22px; }
.otlob-page .coupon-list-v2 { gap: 14px; display: grid; }
.otlob-page .coupon-card-v2 { background: var(--surface); border: 1px solid var(--border); box-shadow: var(--shadow-sm); border-radius: 18px; gap: 12px; padding: 16px; transition: box-shadow 0.15s, border-color 0.15s, transform 0.15s; display: grid; }
.otlob-page .coupon-card-v2:hover { box-shadow: var(--shadow); border-color: var(--primary); transform: translateY(-2px); }
.otlob-page .coupon-card-v2.featured { border: 2px solid var(--primary); box-shadow: var(--shadow); background: linear-gradient(rgba(32, 191, 239, 0.07), rgb(255, 255, 255) 55%); }
.otlob-page .coupon-card-body { flex-wrap: wrap; align-items: flex-start; gap: 16px; display: flex; }
.otlob-page .coupon-card-main { flex: 1 1 240px; min-width: 0px; }
.otlob-page .coupon-value { color: rgb(255, 255, 255); background: linear-gradient(135deg, var(--accent), #ff8f4c); border-radius: 999px; margin-bottom: 8px; padding: 6px 14px; font-size: 15px; font-weight: 900; display: inline-block; box-shadow: rgba(255, 107, 53, 0.28) 0px 4px 12px; }
.otlob-page .coupon-title { color: var(--text); margin: 0px 0px 6px; font-size: 16.5px; font-weight: 800; line-height: 1.6; }
.otlob-page .coupon-desc { color: var(--muted); margin: 0px 0px 10px; font-size: 14px; line-height: 1.8; }
.otlob-page .coupon-facts { color: var(--text); flex-wrap: wrap; gap: 8px; margin: 0px 0px 10px; padding: 0px; font-size: 12.5px; list-style: none; display: flex; }
.otlob-page .coupon-facts li { background: rgb(238, 246, 250); border: 1px solid rgb(220, 235, 243); border-radius: 999px; padding: 4px 11px; font-weight: 700; }
.otlob-page .coupon-verify { color: rgb(6, 122, 85); background: rgba(16, 185, 129, 0.12); border-radius: 999px; align-items: center; gap: 6px; margin: 0px; padding: 5px 12px; font-size: 12.5px; font-weight: 800; display: inline-flex; }
.otlob-page .coupon-verify::before { content: "✓"; font-weight: 900; }
.otlob-page .coupon-verify.status-user_reported { color: rgb(146, 97, 10); background: rgba(255, 201, 60, 0.2); }
.otlob-page .coupon-verify.status-not_verified_recently { color: var(--muted); background: rgb(241, 245, 249); }
.otlob-page .coupon-verify.status-not_verified_recently::before { content: "•"; }
.otlob-page .coupon-source { opacity: 0.8; font-weight: 600; }
.otlob-page .coupon-card-actions { flex-direction: column; align-items: stretch; gap: 8px; min-width: 200px; display: flex; }
.otlob-page .coupon-code { border: 2px dashed var(--primary); background: rgb(242, 251, 254); border-radius: 12px; justify-content: space-between; align-items: center; gap: 8px; width: 100%; min-height: 46px; padding: 8px 12px; transition: background 0.15s, border-color 0.15s; display: flex; }
.otlob-page .coupon-code:hover { background: rgb(230, 247, 254); }
.otlob-page .coupon-code.copied { border-color: var(--success); background: rgba(16, 185, 129, 0.1); }
.otlob-page .coupon-code-value { letter-spacing: 0.08em; color: var(--primary-dark); font-size: 16px; font-weight: 900; }
.otlob-page .coupon-code-hint { color: var(--muted); margin: 0px; font-size: 12px; font-weight: 800; }
.otlob-page .coupon-code.copied .coupon-code-hint { color: var(--success); }
.otlob-page .coupon-link { text-align: center; background: var(--primary); color: rgb(255, 255, 255); border-radius: 12px; justify-content: center; align-items: center; min-height: 46px; padding: 12px 16px; font-weight: 800; display: inline-flex; box-shadow: rgba(32, 191, 239, 0.28) 0px 6px 16px; }
.otlob-page .coupon-link:hover { background: var(--primary-dark); color: rgb(255, 255, 255); text-decoration: none; }
.otlob-page .coupon-report { color: var(--muted); text-align: center; margin: 0px; font-size: 12px; font-weight: 700; }
.otlob-page .coupon-toggle { color: var(--primary-dark); font-style: inherit; font-variant: inherit; font-stretch: inherit; line-height: inherit; font-family: inherit; font-optical-sizing: inherit; font-size-adjust: inherit; font-kerning: inherit; font-feature-settings: inherit; font-variation-settings: inherit; cursor: pointer; padding: 0px; font-size: 13px; font-weight: 800; }
.otlob-page .coupon-details-body { color: var(--text); background: rgb(247, 250, 252); border-radius: 12px; margin-top: 8px; padding: 10px 14px; font-size: 13.5px; line-height: 1.9; }
.otlob-page .coupon-details-body ul { margin: 0px; padding-inline-start: 18px; }
.otlob-page .coupon-expired-tag { color: rgb(146, 97, 10); text-align: center; background: rgba(255, 201, 60, 0.22); border-radius: 999px; padding: 6px 12px; font-size: 12.5px; font-weight: 800; }
.otlob-page .store-expired .coupon-card-v2 { opacity: 0.8; background: rgb(251, 252, 253); }
.otlob-page .store-steps, .otlob-page .store-list { color: var(--text); background: var(--surface); border: 1px solid var(--border); box-shadow: var(--shadow-sm); border-radius: 16px; margin: 0px; padding: 16px 34px 16px 16px; line-height: 2; }
.otlob-page .store-steps li::marker { color: var(--primary); font-weight: 900; }
.otlob-page .store-list li::marker { color: var(--primary); font-weight: 900; }
.otlob-page .store-info-grid { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 12px; margin-bottom: 14px; display: grid; }
.otlob-page .store-info-box { background: var(--surface); border-right-color: ; border-right-style: ; border-right-width: ; border-bottom-color: ; border-bottom-style: ; border-bottom-width: ; border-left-color: ; border-left-style: ; border-left-width: ; border-image-source: ; border-image-slice: ; border-image-width: ; border-image-outset: ; border-image-repeat: ; border-top: 3px solid var(--primary); box-shadow: var(--shadow-sm); border-radius: 16px; padding: 14px; }
.otlob-page .store-info-box h3 { color: var(--primary-dark); margin: 0px 0px 6px; font-size: 15px; font-weight: 800; }
.otlob-page .store-info-box p { color: var(--muted); margin: 0px; font-size: 14px; line-height: 1.8; }
.otlob-page .store-media-grid { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 14px; margin-bottom: 12px; display: grid; }
.otlob-page .store-media-card { background: var(--surface); border: 1px solid var(--border); box-shadow: var(--shadow-sm); border-radius: 16px; overflow: hidden; }
.otlob-page .store-media-card:hover { box-shadow: var(--shadow); border-color: var(--primary); }
.otlob-page .store-media-thumb { aspect-ratio: 16 / 9; object-fit: cover; width: 100%; height: auto; display: block; }
.otlob-page .store-media-body { padding: 12px 14px; }
.otlob-page .store-media-body h3 { margin: 0px; font-size: 15px; font-weight: 800; }
.otlob-page .store-media-body p { color: var(--muted); font-size: 13.5px; line-height: 1.8; }
.otlob-page .store-media-meta { color: var(--muted); margin: 6px 0px 0px; font-size: 12px; font-weight: 700; }
.otlob-page .store-media-note { color: rgb(146, 97, 10); background: rgba(255, 201, 60, 0.16); border-radius: 10px; margin: 10px 0px 0px; padding: 8px 10px; font-size: 12.5px; }
.otlob-page .store-faq { background: var(--surface); border: 1px solid var(--border); box-shadow: var(--shadow-sm); border-radius: 16px; padding: 4px 16px; }
.otlob-page .store-faq details { border-bottom: 1px solid var(--border); padding: 12px 0px; }
.otlob-page .store-faq details:last-child { border-bottom: 0px; }
.otlob-page .store-faq summary { cursor: pointer; color: var(--text); font-weight: 800; }
.otlob-page .store-faq p { color: var(--muted); margin: 8px 0px 0px; line-height: 1.9; }
.otlob-page .store-country-area .country-tab.active, .otlob-page .store-country-area .country-tab[aria-selected="true"] { background: var(--primary); border-color: var(--primary); color: rgb(255, 255, 255); box-shadow: rgba(32, 191, 239, 0.28) 0px 6px 16px; }
@media (width <= 640px) {
  .otlob-page .store-hero-band { padding: 18px 0px 16px; }
  .otlob-page .coupon-card-actions { min-width: 100%; }
  .otlob-page .coupon-card-v2 { padding: 14px; }
  .otlob-page .coupon-title { font-size: 15px; }
}
.otlob-page .dark { --background: oklch(12.9% .042 264.695); --foreground: oklch(98.4% .003 247.858); --card: oklch(20.8% .042 265.755); --card-foreground: oklch(98.4% .003 247.858); --popover: oklch(20.8% .042 265.755); --popover-foreground: oklch(98.4% .003 247.858); --primary: oklch(92.9% .013 255.508); --primary-foreground: oklch(20.8% .042 265.755); --secondary: oklch(27.9% .041 260.031); --secondary-foreground: oklch(98.4% .003 247.858); --muted: oklch(27.9% .041 260.031); --muted-foreground: oklch(70.4% .04 256.788); --accent: oklch(27.9% .041 260.031); --accent-foreground: oklch(98.4% .003 247.858); --destructive: oklch(70.4% .191 22.216); --destructive-foreground: oklch(98.4% .003 247.858); --border: oklch(100% 0 0 / .1); --input: oklch(100% 0 0 / .15); --ring: oklch(55.1% .027 264.364); --chart-1: oklch(48.8% .243 264.376); --chart-2: oklch(69.6% .17 162.48); --chart-3: oklch(76.9% .188 70.08); --chart-4: oklch(62.7% .265 303.9); --chart-5: oklch(64.5% .246 16.439); --sidebar: oklch(20.8% .042 265.755); --sidebar-foreground: oklch(98.4% .003 247.858); --sidebar-primary: oklch(48.8% .243 264.376); --sidebar-primary-foreground: oklch(98.4% .003 247.858); --sidebar-accent: oklch(27.9% .041 260.031); --sidebar-accent-foreground: oklch(98.4% .003 247.858); --sidebar-border: oklch(100% 0 0 / .1); --sidebar-ring: oklch(55.1% .027 264.364); }
@property --tw-translate-x { syntax: "*"; inherits: false; initial-value: 0; }
@property --tw-translate-y { syntax: "*"; inherits: false; initial-value: 0; }
@property --tw-translate-z { syntax: "*"; inherits: false; initial-value: 0; }
@property --tw-rotate-x { syntax: "*"; inherits: false; }
@property --tw-rotate-y { syntax: "*"; inherits: false; }
@property --tw-rotate-z { syntax: "*"; inherits: false; }
@property --tw-skew-x { syntax: "*"; inherits: false; }
@property --tw-skew-y { syntax: "*"; inherits: false; }
@property --tw-space-y-reverse { syntax: "*"; inherits: false; initial-value: 0; }
@property --tw-space-x-reverse { syntax: "*"; inherits: false; initial-value: 0; }
@property --tw-border-style { syntax: "*"; inherits: false; initial-value: solid; }
@property --tw-leading { syntax: "*"; inherits: false; }
@property --tw-font-weight { syntax: "*"; inherits: false; }
@property --tw-tracking { syntax: "*"; inherits: false; }
@property --tw-ordinal { syntax: "*"; inherits: false; }
@property --tw-slashed-zero { syntax: "*"; inherits: false; }
@property --tw-numeric-figure { syntax: "*"; inherits: false; }
@property --tw-numeric-spacing { syntax: "*"; inherits: false; }
@property --tw-numeric-fraction { syntax: "*"; inherits: false; }
@property --tw-shadow { syntax: "*"; inherits: false; initial-value: 0 0 #0000; }
@property --tw-shadow-color { syntax: "*"; inherits: false; }
@property --tw-shadow-alpha { syntax: "<percentage>"; inherits: false; initial-value: 100%; }
@property --tw-inset-shadow { syntax: "*"; inherits: false; initial-value: 0 0 #0000; }
@property --tw-inset-shadow-color { syntax: "*"; inherits: false; }
@property --tw-inset-shadow-alpha { syntax: "<percentage>"; inherits: false; initial-value: 100%; }
@property --tw-ring-color { syntax: "*"; inherits: false; }
@property --tw-ring-shadow { syntax: "*"; inherits: false; initial-value: 0 0 #0000; }
@property --tw-inset-ring-color { syntax: "*"; inherits: false; }
@property --tw-inset-ring-shadow { syntax: "*"; inherits: false; initial-value: 0 0 #0000; }
@property --tw-ring-inset { syntax: "*"; inherits: false; }
@property --tw-ring-offset-width { syntax: "<length>"; inherits: false; initial-value: 0; }
@property --tw-ring-offset-color { syntax: "*"; inherits: false; initial-value: #fff; }
@property --tw-ring-offset-shadow { syntax: "*"; inherits: false; initial-value: 0 0 #0000; }
@property --tw-outline-style { syntax: "*"; inherits: false; initial-value: solid; }
@property --tw-blur { syntax: "*"; inherits: false; }
@property --tw-brightness { syntax: "*"; inherits: false; }
@property --tw-contrast { syntax: "*"; inherits: false; }
@property --tw-grayscale { syntax: "*"; inherits: false; }
@property --tw-hue-rotate { syntax: "*"; inherits: false; }
@property --tw-invert { syntax: "*"; inherits: false; }
@property --tw-opacity { syntax: "*"; inherits: false; }
@property --tw-saturate { syntax: "*"; inherits: false; }
@property --tw-sepia { syntax: "*"; inherits: false; }
@property --tw-drop-shadow { syntax: "*"; inherits: false; }
@property --tw-drop-shadow-color { syntax: "*"; inherits: false; }
@property --tw-drop-shadow-alpha { syntax: "<percentage>"; inherits: false; initial-value: 100%; }
@property --tw-drop-shadow-size { syntax: "*"; inherits: false; }
@property --tw-duration { syntax: "*"; inherits: false; }
@property --tw-ease { syntax: "*"; inherits: false; }
@property --tw-content { syntax: "*"; inherits: false; initial-value: ""; }
@keyframes pulse { 
  50% { opacity: 0.5; }
}
@keyframes enter { 
  0% { opacity: var(--tw-enter-opacity, 1); transform: translate3d(var(--tw-enter-translate-x, 0),var(--tw-enter-translate-y, 0),0)scale3d(var(--tw-enter-scale, 1),var(--tw-enter-scale, 1),var(--tw-enter-scale, 1))rotate(var(--tw-enter-rotate, 0)); filter: blur(var(--tw-enter-blur, 0)); }
}
@keyframes exit { 
  100% { opacity: var(--tw-exit-opacity, 1); transform: translate3d(var(--tw-exit-translate-x, 0),var(--tw-exit-translate-y, 0),0)scale3d(var(--tw-exit-scale, 1),var(--tw-exit-scale, 1),var(--tw-exit-scale, 1))rotate(var(--tw-exit-rotate, 0)); filter: blur(var(--tw-exit-blur, 0)); }
}
@keyframes accordion-down { 
  0% { height: 0px; }
  100% { height: var(--radix-accordion-content-height, var(--bits-accordion-content-height, var(--reka-accordion-content-height, var(--kb-accordion-content-height, var(--ngp-accordion-content-height, auto))))); }
}
@keyframes accordion-up { 
  0% { height: var(--radix-accordion-content-height, var(--bits-accordion-content-height, var(--reka-accordion-content-height, var(--kb-accordion-content-height, var(--ngp-accordion-content-height, auto))))); }
  100% { height: 0px; }
}
@keyframes caret-blink { 
  0%, 70%, 100% { opacity: 1; }
  20%, 50% { opacity: 0; }
}

/* THE PANELS OF THE COUNTRIES, AND THE PAGES INSIDE ONE OF THEM

   The script hides with the hidden attribute, which the browser honours on its
   own for an element that was given no display of its own. .dir-card was given
   one by the design above, a flex, and that would out-rank the browser's own
   hiding, so the card is told plainly here. The attribute selector is one step
   more specific than the rule it answers, so no !important is wanted.

   Nothing else of the design is touched. A chosen tab is .country-tab.active
   and a chosen page is .page-link.active, both already painted above, and the
   script sets no class the stylesheet did not already carry. */

.otlob-page .st2d-panel[hidden],
.otlob-page .dir-card[hidden],
.otlob-page .dir-pagination[hidden] {
  display: none;
}

.otlob-page .st2d-panel .dir-pagination {
  margin-top: 20px;
}

/* THE PAGE NUMBERS AS BUTTONS

   Turning a page must not write an address of its own and must not follow one,
   so a page number is a button. The design wrote .page-link for an anchor,
   which needs no font because it inherits one; a button does not inherit, so
   the font is handed to it here and nothing else of the rule is touched. The
   colours, the border, the size and both states above stay as they were,
   .page-link.active included. */

.otlob-page .page-link {
  font: inherit;
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
}

.otlob-page button.page-link:disabled {
  cursor: default;
}

/* THE FEW THINGS THIS PAGE ADDS TO THE DESIGN

   Nothing here repaints anything. A chip is still .filter-chip and a chosen one
   is still .filter-chip.active, exactly as the rules above paint them; what is
   said here is only how the list holding them lays out, how the heading above
   that list reads, and where the ordering control sits in the head of a
   section. The chips of the design are buttons and links both, and both need
   the pointer and the plain look a chip has. */

.otlob-page .filter-row > li {
  display: flex;
  flex: 0 0 auto;
  list-style: none;
}

.otlob-page a.filter-chip,
.otlob-page button.filter-chip {
  cursor: pointer;
  text-decoration: none;
  align-items: center;
  gap: 6px;
  display: inline-flex;
}

.otlob-page .cd2-types-title {
  margin: 22px 0 10px;
  font-size: 15px;
  font-weight: 800;
  color: var(--muted);
}

/* the ordering control keeps to the far end of the head, away from the heading
   and the figure beside it, and drops under them when there is no room */
.otlob-page .section-head .dir-field {
  flex: 0 0 auto;
  margin-inline-start: auto;
  flex-direction: row;
  align-items: center;
  gap: 8px;
}

.otlob-page .section-head .dir-field select {
  width: auto;
  min-width: 150px;
}

@media (max-width: 768px) {
  .otlob-page .section-head .dir-field {
    width: 100%;
    margin-inline-start: 0;
  }
  .otlob-page .section-head .dir-field select {
    width: 100%;
  }
}

/* the icon beside the heading of the section keeps to the line of the words */
.otlob-page .dir-hero h1 .category-icon {
  font-size: .9em;
  line-height: 1;
}

/* THE SPACE BETWEEN THE SECTIONS

   The design leaves 48px above every section. On this page the sections are
   short and there are many of them, so that gap is cut to a quarter of itself
   and the page reads as one thing rather than a column of islands. Only the
   space BETWEEN sections is touched; the space inside one, between its head
   and what it holds, is the design's own and is left alone.

   This is the stylesheet of category2 alone, so no other page moves. */

.otlob-page .section {
  margin-top: 12px;
}

.otlob-page .cd2-types-title {
  margin: 6px 0 8px;
}

/* THE TYPES THE OPEN COUNTRY HAS

   The row holds every type of the section, and the script hides the ones the
   open country carries none of, so the row never offers a type that would
   empty the grid under it. */

.otlob-page .filter-row > li[hidden] {
  display: none;
}

/* THE DESCRIPTION OF A SECTION

   Printed as the markup the panel wrote, so the block holds headings, lists
   and bold as well as paragraphs. The first and last things in it lose their
   outer margin, so the block starts and ends where the card expects it to
   whatever the panel happened to begin with. */

.otlob-page .seo-content > :first-child { margin-top: 0; }
.otlob-page .seo-content > :last-child { margin-bottom: 0; }

.otlob-page .seo-content p {
  margin: 0 0 12px;
}

.otlob-page .seo-content h2,
.otlob-page .seo-content h3,
.otlob-page .seo-content h4 {
  margin: 18px 0 8px;
  font-size: clamp(16px, 2vw, 19px);
  font-weight: 800;
  line-height: 1.5;
  color: var(--text);
}

.otlob-page .seo-content ul,
.otlob-page .seo-content ol {
  margin: 0 0 12px;
  padding-inline-start: 20px;
  padding-inline-end: 0;
}

.otlob-page .seo-content li {
  margin: 0 0 6px;
  list-style: inherit;
}

.otlob-page .seo-content ul { list-style: disc; }
.otlob-page .seo-content ol { list-style: decimal; }

.otlob-page .seo-content strong,
.otlob-page .seo-content b {
  font-weight: 800;
  color: var(--text);
}

.otlob-page .seo-content a {
  color: var(--primary-dark);
  text-decoration: underline;
}

.otlob-page .seo-content img {
  max-width: 100%;
  height: auto;
  border-radius: 12px;
}

/* THE FEW THINGS THE STORE PAGE ADDS

   Nothing here repaints anything the design already paints. What is said is
   only how the head of the store lays out, how a list of conditions reads and
   how the note above the codes sits. */

.otlob-page .st2d-head {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  flex-wrap: wrap;
}

.otlob-page .st2d-head .store-logo-box {
  width: 72px;
  height: 72px;
  flex: 0 0 auto;
}

.otlob-page .st2d-head-text {
  min-width: 0;
  flex: 1 1 320px;
}

.otlob-page .st2d-en {
  display: block;
  color: var(--muted);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .04em;
  margin: 2px 0 6px;
}

.otlob-page .st2d-by {
  margin: 10px 0 0;
  font-size: 13px;
  color: var(--primary-dark);
  font-weight: 700;
}

/* the strip of figures under the heading, and the one above the codes */
.otlob-page .st2d-stats {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 12px 0 0;
  padding: 0;
  list-style: none;
}

.otlob-page .st2d-stat {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 7px 14px;
  font-size: 13px;
  font-weight: 700;
  color: var(--muted);
}

.otlob-page .st2d-stat b {
  color: var(--accent);
  font-weight: 800;
}

/* the line the panel writes above the codes of a country */
.otlob-page .st2d-note {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 14px 16px;
  margin: 14px 0 0;
  font-size: 14px;
  line-height: 1.9;
  color: var(--muted);
}

/* what stands where the codes would be when a country has none */
.otlob-page .st2d-empty {
  border: 1px dashed var(--accent);
  background: rgba(255, 107, 53, .05);
  border-radius: var(--radius);
  padding: 16px;
  margin: 14px 0 0;
  font-size: 14px;
  line-height: 1.9;
  color: var(--text);
}

/* the three lists of the page: conditions, how to use, why it may not work */
.otlob-page .st2d-list {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 18px 20px;
  margin: 0;
  list-style: none;
}

.otlob-page .st2d-list li {
  position: relative;
  padding-inline-start: 18px;
  margin: 0 0 10px;
  font-size: 14px;
  line-height: 1.9;
  color: var(--muted);
}

.otlob-page .st2d-list li:last-child { margin-bottom: 0; }

.otlob-page .st2d-list li::before {
  content: "";
  position: absolute;
  inset-inline-start: 0;
  top: .75em;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--primary);
}

/* the description of a store, printed as the markup the panel wrote */
.otlob-page .st2d-desc > :first-child { margin-top: 0; }
.otlob-page .st2d-desc > :last-child { margin-bottom: 0; }
.otlob-page .st2d-desc p { margin: 0 0 10px; }

/* =====================================================================
   store2 - the layout of the reference page.

   Added under .otlob-page, the way the rest of this stylesheet is scoped,
   so nothing here can reach the header, the footer or any other page. The
   tokens are the ones already declared at the top of this file; no new
   colour, radius or shadow is invented.

   The old rules above are left exactly as they are: .st2d-panel,
   .country-tab, .dir-card, .store-card, .filter-chip and .dir-pagination
   are still painted by them, which is why the country strip and the
   pagination look and behave as before.
   ===================================================================== */

/* ---------- the entity header ---------- */

.otlob-page .sd2-entity { background: linear-gradient(105deg,#20bfef29,#ffd9281f),var(--surface); border-bottom: 1px solid var(--border); padding: 18px 0 22px; }
.otlob-page .sd2-entity-in { display: flex; align-items: flex-start; gap: 16px; margin-top: 12px; }
.otlob-page .sd2-entity-logo { flex: 0 0 auto; }
.otlob-page .sd2-entity-text { min-width: 0; flex: 1 1 auto; }
.otlob-page .sd2-entity-text h1 { margin: 0 0 6px; font-size: 26px; line-height: 1.35; }

/* THE HEAD OF THE PAGE

   The section of the store above its name, the strip of figures under the
   words, and the way out to the shop under that -- in that order, which is
   the order the design reads in.

   The figures were the pale grey of a caption and are the colour of the text
   now, since they are the first thing a reader looks for; the strip above the
   codes is left as it was, so only the head of the page is changed. */
.otlob-page .sd2-entity-kicker { margin: 0 0 6px; color: var(--primary); font-size: 15px; font-weight: 800; }
.otlob-page .sd2-entity-text .st2d-stats { gap: 10px; margin-top: 16px; }
.otlob-page .sd2-entity-text .st2d-stat { color: var(--text); font-size: 14px; padding: 9px 18px; box-shadow: var(--shadow-sm); }
.otlob-page .sd2-entity-text .st2d-stat b { color: var(--text); }
.otlob-page .sd2-entity-go { display: inline-block; margin: 16px 0 0; padding: 13px 26px; border-radius: 10px; background: var(--primary); color: #fff; font-size: 15px; font-weight: 800; text-decoration: none; transition: background .15s; }
.otlob-page .sd2-entity-go:hover, .otlob-page .sd2-entity-go:focus { background: var(--primary-dark); color: #fff; text-decoration: none; }

/* ---------- the country strip ---------- */

.otlob-page .sd2-markets { background: none; border-bottom: 1px solid var(--border); padding: 12px 0; }
.otlob-page .sd2-markets .country-tabs { padding: 0; }
.otlob-page .sd2-markets .country-tabs-wrap { margin: 0; }

/* ---------- the two columns ---------- */

.otlob-page .sd2-layout { display: grid; grid-template-columns: minmax(0,1fr) 270px; gap: 20px; align-items: start; padding: 20px 0 28px; }
.otlob-page .sd2-primary { display: flex; flex-direction: column; gap: 17px; min-width: 0; }
.otlob-page .sd2-sidebar { display: flex; flex-direction: column; gap: 14px; position: sticky; top: 16px; }

/* ---------- a block in the main column ---------- */

.otlob-page .sd2-block { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow-sm); padding: 18px; }
.otlob-page .sd2-block-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 12px; }
.otlob-page .sd2-block-head h2 { margin: 0; font-size: 20px; line-height: 1.4; }
.otlob-page .sd2-block h3 { margin: 16px 0 8px; font-size: 16px; }
.otlob-page .sd2-block h3:first-child { margin-top: 0; }

/* ---------- the codes ---------- */

.otlob-page .sd2-coupons { display: flex; flex-direction: column; gap: 10px; }
.otlob-page .sd2-coupon { display: grid; grid-template-columns: 62px minmax(0,1fr) auto; align-items: center; gap: 12px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 12px; transition: border-color .15s, box-shadow .15s; }
.otlob-page .sd2-coupon:hover { border-color: var(--primary); box-shadow: var(--shadow); }
.otlob-page .sd2-coupon-mark { display: flex; align-items: center; justify-content: center; min-height: 44px; border-radius: 10px; background: linear-gradient(135deg,var(--primary),var(--primary-dark)); color: #fff; font-size: 13px; font-weight: 800; }
.otlob-page .sd2-coupon-body { min-width: 0; }
.otlob-page .sd2-coupon-title { margin: 0 0 6px; font-size: 15px; line-height: 1.5; }
.otlob-page .sd2-coupon-title a { color: var(--text); text-decoration: none; }
.otlob-page .sd2-coupon-title a:hover { color: var(--primary-dark); }
.otlob-page .sd2-coupon-meta { margin: 6px 0 0; color: var(--muted); font-size: 12px; }
.otlob-page .sd2-coupon-cta { white-space: nowrap; }

/* ---------- about, features ---------- */

/* one column: the table of facts used to be the second one, and it now stands
   inside the block of words instead, so nothing is left to put beside them. */
.otlob-page .sd2-about-grid { display: grid; grid-template-columns: minmax(0,1fr); gap: 18px; align-items: start; }
.otlob-page .sd2-about-grid > * { min-width: 0; }
.otlob-page .sd2-features { background: #f9fafc; border: 1px solid var(--border); border-radius: var(--radius); padding: 14px; }
.otlob-page .sd2-features h2 { margin: 0 0 8px; font-size: 15px; }
/* the title of a feature is a heading now and not a <b>. It is asked to look
   like the <b> it replaced, so the block reads exactly as it did. */
.otlob-page .st2d-list li h3 { display: inline; margin: 0; font-size: inherit; line-height: inherit; font-weight: 700; color: inherit; }

/* ---------- the table of codes ---------- */

/* the line under the heading of a block, saying in words what the block holds */
.otlob-page .sd2-block-sub { margin: -6px 0 14px; color: var(--muted); font-size: 14.5px; line-height: 1.8; }

/* THE TABLE OF CODES

   A band of headings across the top and a rule under every row, and nothing
   else drawn: the card the table stands in is the box around it, so the table
   draws no second box of its own. The band keeps the corners of that card, and
   the last row leaves its rule off so the table ends on the card and not on a
   line of its own.

   Four columns, each of them reading from the right the way the rest of the
   page does. The one carrying the code is the exception: a code is latin and
   is set in the fixed-width face so a row of them reads down the column. */
.otlob-page .sd2-table-wrap { overflow-x: auto; border-radius: var(--radius); }
.otlob-page .sd2-table { width: 100%; border-collapse: collapse; font-size: 14px; }
.otlob-page .sd2-table th, .otlob-page .sd2-table td { padding: 14px 16px; text-align: right; border-bottom: 1px solid var(--border); }
.otlob-page .sd2-table thead th { background: #e8f7fd; color: var(--text); font-weight: 800; font-size: 14.5px; border-bottom: 0; white-space: nowrap; }
.otlob-page .sd2-table thead th:first-child { border-radius: 0 var(--radius) var(--radius) 0; }
.otlob-page .sd2-table thead th:last-child { border-radius: var(--radius) 0 0 var(--radius); }
.otlob-page .sd2-table tbody tr:last-child th, .otlob-page .sd2-table tbody tr:last-child td { border-bottom: 0; }
.otlob-page .sd2-table-kind { color: var(--text); font-weight: 800; font-size: 14.5px; }
.otlob-page .sd2-table-code { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-weight: 600; color: var(--text); white-space: nowrap; }
.otlob-page .sd2-table-val { color: var(--text); font-weight: 800; white-space: nowrap; }
.otlob-page .sd2-table-src { color: var(--text); font-weight: 800; }
/* four columns will not stand side by side on a phone. Rather than crushing
   every one of them until a heading breaks in the middle of a word, the table
   keeps a width its columns can be read at and the box around it is what
   scrolls -- which is the reason that box was given overflow-x to begin with. */
@media (max-width: 620px) {
  .otlob-page .sd2-table { min-width: 560px; }
  .otlob-page .sd2-table th, .otlob-page .sd2-table td { padding: 12px 13px; }
}

/* ---------- the questions ---------- */

.otlob-page .sd2-faq-list { display: flex; flex-direction: column; gap: 8px; }
.otlob-page .sd2-faq-item { border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); }
.otlob-page .sd2-faq-item > summary { cursor: pointer; padding: 12px 14px; font-weight: 700; font-size: 15px; list-style: none; }
.otlob-page .sd2-faq-item > summary::-webkit-details-marker { display: none; }
.otlob-page .sd2-faq-item[open] > summary { border-bottom: 1px solid var(--border); }
.otlob-page .sd2-faq-answer { padding: 12px 14px; color: var(--muted); font-size: 14px; line-height: 1.8; }

/* ---------- the guides and the similar stores ---------- */

.otlob-page .sd2-guide-grid { display: grid; grid-template-columns: repeat(auto-fit,minmax(240px,1fr)); gap: 14px; }
.otlob-page .sd2-guide { background: #f9fafc; border: 1px solid var(--border); border-radius: var(--radius); padding: 14px; }
.otlob-page .sd2-guide h3 { margin: 0 0 8px; font-size: 15px; }
/* THE STORES SHOWN BESIDE THIS ONE

   Two to a row, each of them a card of the kind the directory pages already
   draw -- the same .dir-card and the same .store-card-* parts, so nothing is
   restyled anywhere else on the site. What is set here is set under
   .sd2-similar and reaches this section only.

   The mark: a store with no logo of its own shows the first letter of its name
   on a dark square, which is the one piece of the design the directory card
   does not already have. A store that does have a logo keeps the pale box, so
   a picture is never laid on a dark ground it cannot be read against. */
.otlob-page .sd2-similar-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 18px; }
.otlob-page .sd2-similar .dir-card { gap: 16px; padding: 22px; }
.otlob-page .sd2-similar .store-card-top { grid-template-columns: 72px minmax(0,1fr); align-items: center; gap: 14px; }
.otlob-page .sd2-similar .store-logo-box { width: 72px; height: 72px; border-radius: 16px; }
.otlob-page .sd2-similar .sd2-logo-mark { background: #131c31; border-color: #131c31; }
.otlob-page .sd2-similar .sd2-logo-mark .store-logo-fallback { color: #fff; font-size: 24px; font-weight: 800; }
.otlob-page .sd2-similar .store-card-id { gap: 10px; }
.otlob-page .sd2-similar .store-card-name { margin: 0; font-size: 18px; font-weight: 600; }
.otlob-page .sd2-similar .store-card-cat { color: var(--muted); font-size: 14px; font-weight: 400; }
.otlob-page .sd2-similar .store-card-status { color: var(--primary); font-size: 14.5px; font-weight: 800; }
.otlob-page .sd2-similar .store-card-cta { color: var(--text); font-size: 14.5px; font-weight: 800; }

/* one to a row where two will not fit */
@media (max-width: 620px) {
  .otlob-page .sd2-similar-grid { grid-template-columns: minmax(0,1fr); }
}

/* ---------- the sidebar ---------- */

.otlob-page .sd2-side-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow-sm); padding: 14px; }
.otlob-page .sd2-side-card h3 { margin: 0 0 10px; font-size: 15px; line-height: 1.5; }
.otlob-page .sd2-side-card p { margin: 0; color: var(--muted); font-size: 13.5px; line-height: 1.8; }
.otlob-page .sd2-side-list { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 8px; }
.otlob-page .sd2-side-list li { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; font-size: 13.5px; }
.otlob-page .sd2-side-list li span { color: var(--muted); }
.otlob-page .sd2-side-list li b { color: var(--text); }

/* ---------- narrow screens ---------- */

@media (max-width: 980px) {
  .otlob-page .sd2-layout { grid-template-columns: minmax(0,1fr); }
  .otlob-page .sd2-sidebar { position: static; }
  .otlob-page .sd2-about-grid { grid-template-columns: minmax(0,1fr); }
}

@media (max-width: 620px) {
  .otlob-page .sd2-entity-in { flex-direction: column; }
  .otlob-page .sd2-entity-text h1 { font-size: 21px; }
  .otlob-page .sd2-coupon { grid-template-columns: 48px minmax(0,1fr); }
  .otlob-page .sd2-coupon-cta { grid-column: 1 / -1; text-align: center; }
}

/* =====================================================================
   store2 - the coupon card of the reference design.

   Scoped under .otlob-page like the rest of this file. Only the card is
   painted here; the grid it sits in, the pagination under it and the
   country strip above it keep the rules they already had.
   ===================================================================== */

.otlob-page .sd2-best-wrap { margin-bottom: 18px; }

/* the pill and the heading that separate the best code from the rest */
.otlob-page .sd2-pill { display: inline-block; margin: 0 0 10px; padding: 6px 14px; border-radius: 999px; background: #e8f7fd; color: var(--primary-dark); font-size: 13px; font-weight: 800; }

/* ---------- the card ---------- */

.otlob-page .sd2-c { background: var(--surface); border: 1px solid var(--border); border-radius: 16px; overflow: hidden; transition: border-color .15s, box-shadow .15s; }
.otlob-page .sd2-c:hover { border-color: var(--primary); box-shadow: var(--shadow); }

/* the chosen one: a ring of its own and the strip along the top */
.otlob-page .sd2-c-best { border: 2px solid var(--primary); box-shadow: var(--shadow); }
.otlob-page .sd2-c-flag { margin: 0; padding: 10px 18px; background: var(--primary); color: #fff; font-size: 14px; font-weight: 800; text-align: right; }

/* right: the discount · middle: what it is · left: the code and the button */
.otlob-page .sd2-c-main { display: grid; grid-template-columns: 104px minmax(0,1fr) minmax(200px,236px); align-items: center; gap: 18px; padding: 18px; }

.otlob-page .sd2-c-disc { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; width: 100%; min-width: 0; padding: 14px 10px; border-radius: 14px; background: #fff8dc; }
.otlob-page .sd2-c-disc b { font-size: 30px; font-weight: 900; line-height: 1.1; color: var(--text); }
.otlob-page .sd2-c-disc span { font-size: 13px; color: var(--muted); }

.otlob-page .sd2-c-info { min-width: 0; text-align: right; }
.otlob-page .sd2-c-tick { margin: 0 0 6px; color: #0f9d58; font-size: 14px; font-weight: 800; }
.otlob-page .sd2-c-title { margin: 0 0 6px; font-size: 19px; line-height: 1.45; font-weight: 800; }
.otlob-page .sd2-c-title a { color: var(--text); text-decoration: none; }
.otlob-page .sd2-c-title a:hover { color: var(--primary-dark); }
/* the description of a card waits behind "الشروط والتفاصيل": it is hidden
   until that panel is opened and goes away again when it is closed. The first
   rule below is for the browsers that read :has(), the second for the class
   the script puts on the card, so either one on its own is enough. */
.otlob-page .sd2-c-desc { display: none; margin: 0; color: var(--muted); font-size: 14px; line-height: 1.8; }
.otlob-page .sd2-c:has( > .sd2-c-more[open] ) .sd2-c-desc { display: block; }
.otlob-page .sd2-c.sd2-c-open .sd2-c-desc { display: block; }
.otlob-page .sd2-c-chips { margin: 10px 0 0; padding: 0; list-style: none; display: flex; flex-wrap: wrap; gap: 8px; }
.otlob-page .sd2-c-chips li { background: #eef1f5; color: #43506a; border-radius: 999px; padding: 5px 12px; font-size: 12.5px; font-weight: 700; }

/* ---------- the code and the button ---------- */

.otlob-page .sd2-c-act { display: flex; flex-direction: column; gap: 10px; }

.otlob-page .sd2-c-code { display: flex; align-items: stretch; border: 2px dashed var(--primary); border-radius: 12px; background: #eef9fe; overflow: hidden; min-height: 46px; }
.otlob-page .sd2-c-codetext { flex: 1 1 auto; display: flex; align-items: center; justify-content: center; padding: 0 10px; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 16px; font-weight: 800; letter-spacing: .06em; color: var(--text); }
.otlob-page .sd2-c-copy { flex: 0 0 auto; border: 0; cursor: pointer; padding: 0 14px; background: var(--accent-yellow); color: var(--text); font-family: inherit; font-size: 13px; font-weight: 800; }
.otlob-page .sd2-c-copy:hover { filter: brightness(.96); }
.otlob-page .sd2-c-copy[data-copied] { background: var(--success); color: #fff; }

.otlob-page .sd2-c-cta { display: flex; align-items: center; justify-content: center; gap: 6px; min-height: 46px; padding: 0 16px; border-radius: 12px; background: var(--primary); color: #fff; font-size: 15px; font-weight: 800; text-decoration: none; text-align: center; }
.otlob-page .sd2-c-cta:hover { background: var(--primary-dark); }

/* ---------- the code of a store whose affiliate switch is on ---------- */
/* The row keeps its shape; the code behind the cover is blurred rather than
   removed, the copy button is held back until the cover is gone, and the cover
   itself is the link out through the tracker. .sd2-c-code-open is put on the
   row by the script once the visitor has asked for the code. */

.otlob-page .sd2-c-code-locked { position: relative; }
.otlob-page .sd2-c-code-locked .sd2-c-codetext { filter: blur(5px); user-select: none; }
.otlob-page .sd2-c-code-locked .sd2-c-copy { visibility: hidden; }

.otlob-page .sd2-c-reveal { position: absolute; top: 0; bottom: 0; right: 0; width: 100%; display: flex; align-items: center; justify-content: center; background: var(--primary); color: #fff; font-size: 15px; font-weight: 800; text-decoration: none; animation: sd2-codeview 9s linear infinite; }
.otlob-page .sd2-c-reveal:hover, .otlob-page .sd2-c-reveal:focus-visible { background: var(--primary-dark); text-decoration: none; }

/* the same pulse the old store page draws attention with, under its own name
   so it cannot meet the one the old stylesheet already carries */
@keyframes sd2-codeview { 25%, 75% { width: 92%; } 50% { width: 100%; } }
@media (prefers-reduced-motion: reduce) { .otlob-page .sd2-c-reveal { animation: none; } }

.otlob-page .sd2-c-code-open .sd2-c-codetext { filter: none; user-select: auto; }
.otlob-page .sd2-c-code-open .sd2-c-copy { visibility: visible; }
.otlob-page .sd2-c-code-open .sd2-c-reveal { display: none; }

/* ---------- the details strip ---------- */

.otlob-page .sd2-c-more { border-top: 1px solid var(--border); }
.otlob-page .sd2-c-more > summary { cursor: pointer; list-style: none; padding: 11px 18px; text-align: center; color: var(--primary-dark); font-size: 14px; font-weight: 700; background: #fbfcfe; }
.otlob-page .sd2-c-more > summary::-webkit-details-marker { display: none; }
.otlob-page .sd2-c-more > summary::after { content: " \02C5"; }
.otlob-page .sd2-c-more[open] > summary::after { content: " \02C4"; }
.otlob-page .sd2-c-terms { padding: 12px 18px; background: #fffbea; border-top: 1px solid #f4e6b8; color: #4a4636; font-size: 13.5px; line-height: 1.9; text-align: center; }
.otlob-page .sd2-c-check { display: block; margin-top: 4px; color: var(--muted); font-size: 12.5px; }

/* ---------- narrow screens ---------- */

@media (max-width: 860px) {
  .otlob-page .sd2-c-main { grid-template-columns: 104px minmax(0,1fr); }
  .otlob-page .sd2-c-act { grid-column: 1 / -1; }
}

@media (max-width: 520px) {
  .otlob-page .sd2-c-main { grid-template-columns: minmax(0,1fr); gap: 14px; padding: 14px; }
  .otlob-page .sd2-c-disc { flex-direction: row; gap: 8px; min-width: 0; padding: 10px 14px; align-self: flex-start; }
  .otlob-page .sd2-c-disc b { font-size: 24px; }
  .otlob-page .sd2-c-title { font-size: 17px; }
}


/* A badge holding a word instead of a figure. Every card carries the badge so
   the three columns line up on all of them; a coupon that names no figure says
   what kind of thing it is there instead, and the word is set smaller than a
   figure would be so the box keeps the size it has on every other card. */
.otlob-page .sd2-c-disc-word b { font-size: 19px; line-height: 1.3; }

/* A badge holding an amount and its unit -- '50 درهم' -- rather than a bare
   percentage. The track is one width for every card so the titles beside them
   line up, and a longer value is set smaller to sit inside it instead of
   widening its own card out of step with the rest. */
.otlob-page .sd2-c-disc-long b { font-size: 20px; line-height: 1.25; }

/* =====================================================================
   store2 - the two columns.

   The page is one grid: the side column on the left at a width of its own,
   the main column on the right taking whatever is left. Nothing else is a
   grid item, so no card of the main column can ever fall into the side one.
   ===================================================================== */

/* the store header and the country strip stand above the two columns and run
   the whole width of the page, each keeping the .container that centres its
   own contents. They are not grid items, so neither column can pull them in. */

/* the two columns start at the top of the page, not level with each other */
.otlob-page .sd2-layout { align-items: start; }

/* the last of the four side sections */
.otlob-page .sd2-side-help { background: #fffbea; border-color: #f4e6b8; }
.otlob-page .sd2-side-report { display: block; margin-top: 10px; padding: 10px 12px; border-radius: 10px; background: var(--accent-yellow); color: var(--text); font-size: 14px; font-weight: 800; text-align: center; text-decoration: none; }
.otlob-page .sd2-side-report:hover { filter: brightness(.96); }

/* =====================================================================
   store2 - the facts beside the description.

   Two columns: the words of the section in one, the little table of facts
   in the other, level with the heading. The features sit under the
   description inside the first column, so they are part of the text and not
   a column of their own.
   ===================================================================== */

.otlob-page .sd2-about-main { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.otlob-page .sd2-about-main > .sd2-block-head { margin-bottom: 0; }

.otlob-page .sd2-facts { margin: 0; padding: 14px; border: 1px solid var(--border); border-radius: var(--radius); background: #f9fafc; }

/* THE TABLE INSIDE THE WORDS

   The block of description is what surrounds it now. The box is taken out of
   the flow into the top corner of that block -- left is the far corner on a
   page that reads right to left -- and the words of the store run down the
   side of it and close underneath it once it ends. The block clears itself
   after the box so a table taller than the words it stands beside cannot hang
   out of the bottom of it and push into the features below.

   The box keeps the width it had when it was a column of its own: a share of
   the room it is given, held between a floor and a ceiling so it is never so
   narrow that a row breaks in two nor so wide that it crowds the words. */
.otlob-page .st2d-desc > .sd2-facts { float: left; width: 28%; min-width: 190px; max-width: 240px; margin: 0 18px 14px 0; }
.otlob-page .st2d-desc::after { content: ''; display: block; clear: both; }
/* a row is the name of the fact and the fact itself on one line, the name to
   the right and the value to the left, the way the summary card above already
   sets its own rows out. Either half wraps onto a second line when it is too
   long for its share rather than pushing the other one out of the box. */
.otlob-page .sd2-facts > div { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; padding: 9px 0; border-bottom: 1px solid var(--border); }
.otlob-page .sd2-facts > div:first-child { padding-top: 0; }
.otlob-page .sd2-facts > div:last-child { padding-bottom: 0; border-bottom: 0; }
.otlob-page .sd2-facts dt { flex: 0 1 auto; color: var(--muted); font-size: 12.5px; font-weight: 700; }
.otlob-page .sd2-facts dd { flex: 1 1 auto; margin: 0; text-align: left; color: var(--text); font-size: 14.5px; font-weight: 800; overflow-wrap: anywhere; }

/* no room to read beside it on a narrow screen: the box stops being a corner
   of the block and becomes a row of its own across the top of it */
@media (max-width: 620px) {
  .otlob-page .st2d-desc > .sd2-facts { float: none; width: auto; min-width: 0; max-width: none; margin: 0 0 14px; }
}