/* offer2 - design taken from the attached offers page.
   Every rule is scoped under .otlob-page, the wrapper the design itself uses,
   so the shared class names ( container, section, main, hero ) cannot collide
   with the about theme that provides the header and the footer of this page.
   The header / nav / footer rules of the original file are dropped, that chrome
   comes from header-about.php and footer-about.php. */

.otlob-page {
  --primary:#20BFEF;
  --primary-dark:#0E9CCB;
  --accent:#FF6B35;
  --accent-yellow:#FFC93C;
  --bg:#F7FAFC;
  --surface:#FFFFFF;
  --text:#1A202C;
  --muted:#5A6675;
  --border:#E2E8F0;
  --success:#10B981;
  --radius:14px;
  --shadow-sm:0 1px 2px rgba(0,0,0,.05);
  --shadow:0 4px 16px rgba(15,30,60,.08);
  --shadow-lg:0 12px 32px rgba(15,30,60,.12);
  --max:1200px;
}

.otlob-page *, .otlob-page *::before, .otlob-page *::after {
  box-sizing:border-box
}

.otlob-page {
  scroll-behavior:smooth;-webkit-text-size-adjust:100%
}

.otlob-page {
  margin:0;font-family:'Tajawal',system-ui,sans-serif;background:#f8fcf7;color:var(--text);line-height:1.7;font-size:16px;min-height:100vh
}

.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 {
  font-family:inherit;cursor:pointer;border:none;background:none
}

.otlob-page :focus-visible {
  outline:3px solid var(--primary);outline-offset:2px;border-radius:6px
}

.otlob-page .container {
  max-width:var(--max);margin:0 auto;padding:0 16px
}

.otlob-page .hero {
  position:relative;overflow:hidden;padding:40px 0 56px;background:
  radial-gradient(1200px 500px at 90% -10%, rgba(32,191,239,.20), transparent 60%),
  radial-gradient(900px 400px at 0% 110%, rgba(255,107,53,.14), transparent 60%),
  linear-gradient(160deg,#EAF9FE 0%,#FFF7EF 100%)
}

.otlob-page .hero::before {
  content:"";position:absolute;inset:0;background-image:radial-gradient(rgba(15,30,60,.06) 1px,transparent 1px);background-size:22px 22px;mask-image:linear-gradient(180deg,transparent,#000 30%,#000 70%,transparent);pointer-events:none;z-index:0
}

.otlob-page .hero-grid {
  display:grid;grid-template-columns:1.05fr .95fr;gap:32px;align-items:center;position:relative;z-index:1
}

@media (max-width:900px) {
  .otlob-page .hero-grid {
    grid-template-columns:1fr;gap:24px
  }
}

.otlob-page .hero-left {
  display:flex;flex-direction:column;gap:18px
}

.otlob-page .hero-badge {
  display:inline-flex;align-items:center;gap:8px;background:#fff;border:1px solid var(--border);color:var(--text);padding:7px 14px;border-radius:999px;font-weight:700;font-size:13px;box-shadow:var(--shadow-sm);width:max-content
}

.otlob-page .hero-badge .dot {
  width:8px;height:8px;border-radius:50%;background:var(--success);box-shadow:0 0 0 4px rgba(16,185,129,.18);animation:pulseDot 1.8s infinite
}

@keyframes pulseDot {50%{box-shadow:0 0 0 8px rgba(16,185,129,0)}
}

.otlob-page .hero h1 {
  font-size:clamp(28px,4.2vw,46px);margin:0;line-height:1.2;font-weight:900;letter-spacing:-.01em
}

.otlob-page .hero h1 .accent {
  background:linear-gradient(90deg,var(--primary-dark),var(--accent));-webkit-background-clip:text;background-clip:text;color:transparent
}

.otlob-page .hero p.lead {
  font-size:clamp(15px,1.5vw,17px);color:var(--muted);margin:0;max-width:560px
}

.otlob-page .search-engine {
  background:#fff;border-radius:18px;box-shadow:var(--shadow-lg);padding:14px;border:1px solid var(--border)
}

.otlob-page .search-tabs {
  display:flex;gap:6px;padding:4px;background:var(--bg);border-radius:12px;margin-bottom:10px
}

.otlob-page .search-tab {
  flex:1;padding:9px 12px;border-radius:9px;font-weight:700;font-size:13.5px;color:var(--muted);display:inline-flex;align-items:center;justify-content:center;gap:6px;transition:.15s;cursor:pointer;border:0;background:transparent
}

.otlob-page .search-tab[aria-selected="true"] {
  background:#fff;color:var(--primary-dark);box-shadow:var(--shadow-sm)
}

.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 {
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0
}

.otlob-page .search-form {
  display:flex;gap:8px;align-items:stretch
}

.otlob-page .search-input-wrap {
  flex:1;position:relative;min-width:0
}

.otlob-page .search-input-wrap svg {
  position:absolute;right:14px;top:50%;transform:translateY(-50%);color:var(--muted);pointer-events:none
}

.otlob-page .search-input-wrap input {
  width:100%;border:1.5px solid var(--border);border-radius:12px;padding:14px 44px 14px 14px;font:inherit;font-size:15px;background:var(--bg);transition:.15s
}

.otlob-page .search-input-wrap input:focus {
  outline:none;background:#fff;border-color:var(--primary);box-shadow:0 0 0 4px rgba(32,191,239,.15)
}

.otlob-page .search-form button {
  background:linear-gradient(135deg,var(--primary),var(--primary-dark));color:#fff;padding:0 24px;border-radius:12px;font-weight:800;font-size:15px;min-height:52px;display:inline-flex;align-items:center;gap:8px;transition:.15s;box-shadow:0 6px 16px rgba(32,191,239,.35)
}

.otlob-page .search-form button:hover {
  transform:translateY(-1px);box-shadow:0 10px 20px rgba(32,191,239,.45)
}

.otlob-page .popular-row {
  display:flex;flex-wrap:wrap;gap:6px;align-items:center;margin-top:12px;font-size:13px
}

.otlob-page .popular-row span {
  color:var(--muted);font-weight:600
}

.otlob-page .popular-row a {
  background:var(--bg);border:1px solid var(--border);padding:5px 11px;border-radius:999px;color:var(--text);font-weight:600;font-size:12.5px
}

.otlob-page .popular-row a:hover {
  border-color:var(--primary);color:var(--primary-dark);text-decoration:none
}

.otlob-page .trust-row {
  display:flex;flex-wrap:wrap;gap:8px;margin-top:4px
}

.otlob-page .trust-pill {
  display:inline-flex;align-items:center;gap:6px;background:#fff;color:#047857;padding:6px 12px;border-radius:999px;font-weight:700;font-size:12.5px;border:1px solid #D1FAE5;box-shadow:var(--shadow-sm)
}

.otlob-page .trust-pill svg {
  flex-shrink:0
}

.otlob-page .offers-slider {
  position:relative;border-radius:22px;overflow:hidden;box-shadow:var(--shadow-lg);background:#fff;aspect-ratio:4/3;max-height:460px
}

@media (max-width:900px) {
  .otlob-page .offers-slider {
    aspect-ratio:16/10;max-height:340px
  }
}

.otlob-page .slides {
  position:relative;width:100%;height:100%
}

.otlob-page .slide {
  position:absolute;inset:0;opacity:0;transition:opacity .6s ease;display:flex;flex-direction:column;justify-content:flex-end;padding:26px;color:#fff
}

.otlob-page .slide::before {
  content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,.05) 0%,rgba(0,0,0,.55) 65%,rgba(0,0,0,.85) 100%);z-index:1
}

.otlob-page .slide.active {
  opacity:1;z-index:2
}

.otlob-page .slide > * {
  position:relative;z-index:2
}

.otlob-page .slide-1 {
  background:linear-gradient(135deg,#FEE72E 0%,#FF6B35 100%)
}

.otlob-page .slide-2 {
  background:linear-gradient(135deg,#20BFEF 0%,#0E4C81 100%)
}

.otlob-page .slide-3 {
  background:linear-gradient(135deg,#FF3E7F 0%,#6C5CE7 100%)
}

.otlob-page .slide-4 {
  background:linear-gradient(135deg,#10B981 0%,#065F46 100%)
}

.otlob-page .slide-tag {
  display:inline-flex;align-items:center;gap:6px;background:rgba(255,255,255,.22);backdrop-filter:blur(10px);padding:5px 12px;border-radius:999px;font-weight:800;font-size:12px;width:max-content;margin-bottom:10px;border:1px solid rgba(255,255,255,.3)
}

.otlob-page .slide-store {
  font-size:13px;font-weight:700;opacity:.92;margin:0 0 4px
}

.otlob-page .slide-title {
  font-size:clamp(20px,2.4vw,26px);font-weight:900;line-height:1.3;margin:0 0 6px;max-width:90%
}

.otlob-page .slide-desc {
  font-size:13.5px;opacity:.92;margin:0 0 14px;max-width:90%
}

.otlob-page .slide-cta {
  display:inline-flex;align-items:center;gap:8px;background:#fff;color:var(--text);padding:11px 20px;border-radius:12px;font-weight:800;font-size:14px;width:max-content;transition:.15s
}

.otlob-page .slide-cta:hover {
  transform:translateY(-1px);text-decoration:none;color:var(--primary-dark)
}

.otlob-page .slide-code {
  position:absolute;top:20px;right:20px;background:rgba(255,255,255,.95);color:var(--text);padding:8px 14px;border-radius:10px;font-family:'Courier New',monospace;font-weight:900;font-size:14px;letter-spacing:1px;border:2px dashed var(--accent);z-index:3
}

.otlob-page .slider-nav {
  position:absolute;top:50%;transform:translateY(-50%);width:40px;height:40px;border-radius:50%;background:rgba(255,255,255,.95);color:var(--text);display:grid;place-items:center;z-index:5;box-shadow:var(--shadow);transition:.15s
}

.otlob-page .slider-nav:hover {
  background:#fff;transform:translateY(-50%) scale(1.08)
}

.otlob-page .slider-prev {
  right:12px
}

.otlob-page .slider-next {
  left:12px
}

.otlob-page .slider-dots {
  position:absolute;bottom:16px;right:50%;transform:translateX(50%);display:flex;gap:8px;z-index:5
}

.otlob-page .slider-dot {
  width:8px;height:8px;border-radius:50%;background:rgba(255,255,255,.5);transition:.2s;cursor:pointer
}

.otlob-page .slider-dot.active {
  background:#fff;width:24px;border-radius:4px
}

.otlob-page main {
  padding:8px 0 48px
}

.section {
    padding: 10px 1px;
}
 

.otlob-page .section-head {
  display:flex;align-items:end;justify-content:space-between;gap:12px;margin-bottom:18px;flex-wrap:wrap
}

.otlob-page .section-head h2 {
  font-size:clamp(20px,2.4vw,26px);margin:0;display:flex;align-items:center;gap:10px
}

.otlob-page .section-head h2::before {
  content:"";width:5px;height:26px;background:var(--primary);border-radius:3px
}

.otlob-page .section-head .see-all {
  font-weight:700;color:var(--primary-dark);font-size:14px
}

.otlob-page .store-grid {
  display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:14px
}

.otlob-page .store-card {
  background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:16px;text-align:center;display:flex;flex-direction:column;gap:8px;transition:transform .15s,box-shadow .15s,border-color .15s;color:var(--text)
}

.otlob-page .store-card:hover {
  transform:translateY(-3px);box-shadow:var(--shadow);border-color:var(--primary);text-decoration:none
}

.otlob-page .store-logo {
  width:72px;height:72px;margin:0 auto;border-radius:14px;background:#F1F5F9;display:grid;place-items:center;font-weight:900;color:var(--primary-dark);font-size:20px;border:1px solid var(--border)
}

.otlob-page .store-card h3 {
  margin:4px 0 0;font-size:16px;font-weight:800
}

.otlob-page .store-stats {
  font-size:13px;color:var(--muted)
}

.otlob-page .store-best {
  background:#FFF3E0;color:#B45309;font-weight:800;padding:4px 10px;border-radius:8px;font-size:12px;display:inline-block;margin:0 auto
}

.otlob-page .store-rating {
  font-size:13px;color:var(--muted);display:flex;justify-content:center;gap:4px;align-items:center
}

.otlob-page .store-rating .star {
  color:#F59E0B
}

.otlob-page .store-cta {
  margin-top:auto;background:var(--primary);color:#fff;padding:8px 14px;border-radius:8px;font-weight:700;font-size:14px;min-height:38px;display:inline-flex;align-items:center;justify-content:center
}

.otlob-page .store-card:hover .store-cta {
  background:var(--primary-dark)
}

.otlob-page .coupon-list {
  display:grid;gap:14px
}

.otlob-page .coupon-card {
  background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:18px;display:grid;grid-template-columns:64px 1fr auto;gap:16px;align-items:center;box-shadow:var(--shadow-sm);transition:transform .15s,box-shadow .15s
}

.otlob-page .coupon-card:hover {
  transform:translateY(-2px);box-shadow:var(--shadow)
}

.otlob-page .coupon-card .c-logo {
  width:64px;height:64px;border-radius:12px;background:#F1F5F9;display:grid;place-items:center;font-weight:900;color:var(--primary-dark);font-size:16px;border:1px solid var(--border)
}

.otlob-page .coupon-body h3 {
  font-size:17px;margin:0 0 6px;font-weight:700
}

.otlob-page .coupon-meta {
  display:flex;flex-wrap:wrap;gap:10px;font-size:13px;color:var(--muted);align-items:center
}

.otlob-page .coupon-meta .verified {
  color:var(--success);font-weight:700;display:inline-flex;align-items:center;gap:4px
}

.otlob-page .discount-tag {
  background:var(--accent);color:#fff;font-weight:800;padding:3px 9px;border-radius:8px;font-size:12px
}

.otlob-page .coupon-actions {
  display:flex;align-items:stretch;border:2px dashed var(--primary);border-radius:12px;overflow:hidden;background:#fff;min-width:220px
}

.otlob-page .code-display {
  flex:1;display:flex;align-items:center;justify-content:center;font-family:monospace;font-weight:800;font-size:16px;letter-spacing:2px;color:var(--primary-dark);padding:0 12px;min-width:80px;background:repeating-linear-gradient(45deg,#F1F5F9,#F1F5F9 6px,#fff 6px,#fff 12px);user-select:all;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:"اضغط للكشف";position:absolute;inset:0;display:grid;place-items:center;filter:blur(0);color:var(--text);font-family:Tajawal,sans-serif;font-size:12px;letter-spacing:0;font-weight:600;background:rgba(255,255,255,.6)
}

.otlob-page .btn-reveal {
  background:var(--primary);color:#fff;font-weight:800;padding:12px 18px;min-height:52px;min-width:130px;display:flex;align-items:center;justify-content:center;gap:6px;font-size:14px
}

.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 {
  border-style:solid;background:var(--primary)
}

.otlob-page .coupon-actions.deal-only .btn-reveal {
  width:100%
}

@media (max-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:0
  }
}

.otlob-page .cat-grid {
  display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:12px
}

.otlob-page .cat-card {
  background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:18px 12px;text-align:center;color:var(--text);transition:transform .15s,border-color .15s
}

.otlob-page .cat-card:hover {
  transform:translateY(-3px);border-color:var(--primary);text-decoration:none
}

.otlob-page .cat-icon {
  width:56px;height:56px;margin:0 auto 10px;border-radius:14px;background:linear-gradient(135deg,#E6F8FE,#FFF5EC);display:grid;place-items:center;font-size:26px
}

.otlob-page .cat-card h3 {
  font-size:15px;margin:0;font-weight:700
}

.otlob-page .cat-card .count {
  font-size:12px;color:var(--muted);margin-top:4px
}

.otlob-page .why-grid {
  display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:14px
}

.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;border-radius:12px;background:#E6F8FE;color:var(--primary-dark);display:grid;place-items:center;margin-bottom:10px;font-size:22px
}

.otlob-page .why-card h3 {
  margin:0 0 6px;font-size:16px;font-weight:800
}

.otlob-page .why-card p {
  margin:0;color:var(--muted);font-size:14px
}

.otlob-page .blog-grid {
  display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:16px
}

.otlob-page .blog-card {
  background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);overflow:hidden;display:flex;flex-direction:column;color:var(--text);transition:transform .15s,box-shadow .15s
}

.otlob-page .blog-card:hover {
  transform:translateY(-3px);box-shadow:var(--shadow);text-decoration:none
}

.otlob-page .blog-thumb {
  aspect-ratio:16/9;background:linear-gradient(135deg,var(--primary) 0%,#7C3AED 100%);display:grid;place-items:center;color:#fff;font-weight:900;font-size:22px;padding:12px;text-align:center
}

.otlob-page .blog-body {
  padding:14px 16px 16px
}

.otlob-page .blog-body h3 {
  margin:0 0 8px;font-size:16px;font-weight:800;line-height:1.4
}

.otlob-page .blog-body p {
  margin:0;color:var(--muted);font-size:13px
}

.otlob-page .blog-meta {
  margin-top:10px;font-size:12px;color:var(--muted)
}

.otlob-page .seo-section {

}

.otlob-page .seo-grid {
  display:grid;grid-template-columns:2fr 1fr;gap:24px;align-items:start
}

.otlob-page .seo-content {
  background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:26px 28px;max-width:820px;line-height:1.9
}

.otlob-page .seo-content p {
  margin:0 0 14px;color:var(--text);font-size:15.5px
}

.otlob-page .seo-content .seo-lead {
  font-size:17px
}

.otlob-page .seo-content a {
  color:var(--primary-dark);text-decoration:none;border-bottom:1px dashed var(--primary);
}

.otlob-page .seo-content a:hover {
  color:var(--accent)
}

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

.otlob-page .seo-links {
  display:flex;flex-wrap:wrap;gap:10px;margin-top:18px;padding-top:16px;border-top:1px dashed var(--border)
}

.otlob-page .seo-chip {
  display:inline-flex;align-items:center;gap:6px;background:var(--bg);border:1px solid var(--border);border-radius:999px;padding:8px 14px;font-size:13.5px;font-weight:700;color:var(--text);text-decoration:none;transition:all .15s
}

.otlob-page .seo-chip:hover {
  background:var(--primary);color:#fff;border-color:var(--primary);transform:translateY(-1px)
}

.otlob-page .seo-chip svg {
  opacity:.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:0 0 4px;font-size:17px;font-weight:800
}

.otlob-page .seo-aside-sub {
  margin:0 0 14px;color:var(--muted);font-size:13.5px
}

.otlob-page .country-list {
  list-style:none;padding:0;margin:0 0 16px;display:grid;gap:8px
}

.otlob-page .country-list li {
  display:flex;align-items:center;gap:8px;font-size:14.5px;font-weight:600;padding:6px 10px;background:var(--surface);border:1px solid var(--border);border-radius:10px
}

.otlob-page .country-list .flag {
  font-size:18px;line-height:1
}

.otlob-page .country-list .tag {
  margin-inline-start:auto;background:var(--accent-yellow);color:#1A202C;font-size:11px;font-weight:800;padding:2px 8px;border-radius:999px
}

.otlob-page .trust-badges {
  display:flex;flex-wrap:wrap;gap:8px;padding-top:12px;border-top:1px dashed var(--border)
}

.otlob-page .trust-badge {
  display:inline-flex;align-items:center;gap:5px;font-size:12.5px;font-weight:700;color:var(--success);background:rgba(16,185,129,.1);padding:5px 10px;border-radius:999px
}

@media (max-width:900px) {
  .otlob-page .seo-grid {
    grid-template-columns:1fr
  }

  .otlob-page .seo-aside {
    position:static
  }
}

.otlob-page .newsletter-section {

}

.otlob-page .newsletter-card {
  background:linear-gradient(135deg,var(--primary) 0%,#0E9CCB 60%,#0F172A 130%);color:#fff;border-radius:20px;padding:38px 32px;display:grid;grid-template-columns:1fr 1.1fr;gap:32px;align-items:center;box-shadow:var(--shadow-lg);position:relative;overflow:hidden
}

.otlob-page .newsletter-card::before {
  content:"";position:absolute;inset:auto -40px -40px auto;width:220px;height:220px;background:radial-gradient(circle,var(--accent-yellow) 0%,transparent 70%);opacity:.35;pointer-events:none
}

.otlob-page .newsletter-intro h2 {
  margin:0 0 10px;font-size:26px;font-weight:900;color:#fff
}

.otlob-page .newsletter-intro p {
  margin:0 0 14px;color:rgba(255,255,255,.9);line-height:1.8;font-size:15px
}

.otlob-page .nl-benefits {
  list-style:none;padding:0;margin:0;display:grid;gap:8px
}

.otlob-page .nl-benefits li {
  display:flex;align-items:center;gap:8px;font-size:14px;font-weight:600;color:#fff
}

.otlob-page .nl-benefits svg {
  color:var(--accent-yellow);flex-shrink:0
}

.otlob-page .newsletter-form {
  background:rgba(255,255,255,.98);border-radius:16px;padding:22px 22px 18px;display:grid;gap:12px;position:relative;z-index:1
}

.otlob-page .nl-field {
  display:grid;gap:6px
}

.otlob-page .nl-field label {
  font-size:13px;font-weight:700;color:var(--text)
}

.otlob-page .nl-field input, .otlob-page .nl-field select {
  width:100%;padding:12px 14px;border:1.5px solid var(--border);border-radius:10px;font-family:inherit;font-size:15px;background:#fff;color:var(--text);min-height:44px;transition:border-color .15s,box-shadow .15s
}

.otlob-page .nl-field input:focus, .otlob-page .nl-field select:focus {
  outline:none;border-color:var(--primary);box-shadow:0 0 0 3px rgba(32,191,239,.15)
}

.otlob-page .nl-field input[aria-invalid="true"] {
  border-color:#DC2626
}

.otlob-page .nl-error {
  min-height:16px;font-size:12.5px;color:#DC2626;font-weight:600
}

.otlob-page .nl-submit {
  background:var(--accent);color:#fff;border:none;padding:13px 20px;border-radius:10px;font-family:inherit;font-size:15px;font-weight:800;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:48px;transition:background .15s,transform .1s
}

.otlob-page .nl-submit:hover:not(:disabled) {
  background:#e85a24
}

.otlob-page .nl-submit:active {
  transform:translateY(1px)
}

.otlob-page .nl-submit:disabled {
  opacity:.7;cursor:not-allowed
}

.otlob-page .nl-spinner {
  display:none;animation:nl-spin 1s linear infinite
}

.otlob-page .nl-submit.loading .nl-spinner {
  display:inline-block
}

.otlob-page .nl-submit.loading .nl-submit-label {
  opacity:.75
}

@keyframes nl-spin {to{transform:rotate(360deg)}
}

.otlob-page .nl-note {
  margin:0;font-size:12.5px;color:var(--muted);text-align:center
}

.otlob-page .nl-status {
  margin:6px 0 0;font-size:14px;font-weight:700;text-align:center;min-height:20px
}

.otlob-page .nl-status.success {
  color:var(--success)
}

.otlob-page .nl-status.error {
  color:#DC2626
}

@media (max-width:820px) {
  .otlob-page .newsletter-card {
    grid-template-columns:1fr;padding:28px 22px
  }
}

.otlob-page .mobile-search-fab {
  display:none
}

@media (max-width:920px) {
  .otlob-page .mobile-search-fab {
    display:flex;position:fixed;bottom:18px;left:50%;transform:translateX(-50%);background:var(--primary);color:#fff;padding:12px 22px;border-radius:999px;font-weight:800;align-items:center;gap:8px;box-shadow:var(--shadow-lg);z-index:40;min-height:48px
  }
}

.otlob-page .toast {
  position:fixed;bottom:80px;left:50%;transform:translateX(-50%) translateY(40px);background:var(--text);color:#fff;padding:12px 22px;border-radius:10px;opacity:0;transition:all .25s;z-index:9999;font-weight:600
}

.otlob-page .toast.show {
  opacity:1;transform:translateX(-50%) translateY(0)
}

.otlob-page .season-section {
  margin:8px 0 40px
}

.otlob-page .season-wrap {
  position:relative;overflow:hidden;border-radius:22px;padding:26px;color:#fff;background:var(--season-bg,linear-gradient(135deg,#0E9CCB,#20BFEF));box-shadow:var(--shadow-lg)
}

.otlob-page .season-wrap::after {
  content:"";position:absolute;inset:0;background-image:radial-gradient(rgba(255,255,255,.16) 1px,transparent 1px);background-size:20px 20px;pointer-events:none
}

.otlob-page .season-head {
  position:relative;z-index:1;display:flex;flex-wrap:wrap;gap:14px;align-items:center;justify-content:space-between
}

.otlob-page .season-badge {
  display:inline-flex;align-items:center;gap:8px;background:rgba(255,255,255,.18);border:1px solid rgba(255,255,255,.35);padding:6px 13px;border-radius:999px;font-weight:800;font-size:13px;backdrop-filter:blur(4px)
}

.otlob-page .season-title {
  margin:10px 0 4px;font-size:clamp(22px,3vw,32px);font-weight:900;line-height:1.25
}

.otlob-page .season-sub {
  margin:0;font-size:15px;opacity:.92;max-width:640px
}

.otlob-page .season-dates {
  margin-top:6px;font-size:13px;font-weight:700;opacity:.9
}

.otlob-page .countdown {
  display:flex;gap:8px;position:relative;z-index:1
}

.otlob-page .cd-box {
  background:rgba(255,255,255,.16);border:1px solid rgba(255,255,255,.3);border-radius:12px;min-width:62px;padding:8px 6px;text-align:center;backdrop-filter:blur(4px)
}

.otlob-page .cd-num {
  display:block;font-size:22px;font-weight:900;line-height:1;font-variant-numeric:tabular-nums
}

.otlob-page .cd-lbl {
  font-size:11px;opacity:.9;font-weight:600
}

.otlob-page .season-deals {
  position:relative;z-index:1;display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:12px;margin-top:20px
}

.otlob-page .season-deal {
  background:rgba(255,255,255,.96);color:var(--text);border-radius:14px;padding:14px;display:flex;flex-direction:column;gap:6px;box-shadow:var(--shadow-sm);transition:.15s
}

.otlob-page .season-deal:hover {
  transform:translateY(-3px);text-decoration:none
}

.otlob-page .season-deal .sd-store {
  font-size:12.5px;font-weight:700;color:var(--muted)
}

.otlob-page .season-deal .sd-title {
  font-size:15px;font-weight:800;margin:0;line-height:1.4
}

.otlob-page .season-deal .sd-value {
  align-self:flex-start;background:var(--accent);color:#fff;font-weight:800;font-size:12.5px;padding:3px 10px;border-radius:999px
}

.otlob-page .season-deal .sd-code {
  font-family:ui-monospace,monospace;font-weight:800;letter-spacing:1px;border:1.5px dashed var(--border);border-radius:9px;padding:6px 10px;text-align:center;font-size:13.5px
}

.otlob-page .season-next {
  position:relative;z-index:1;margin:14px 0 0;font-size:13.5px;opacity:.9
}

@media (max-width:640px) {
  .otlob-page .season-head {
    flex-direction:column;align-items:flex-start
  }
}

.otlob-page .season-section {
  margin:8px 0 32px
}

.otlob-page .season-lead {
  margin:-6px 0 14px;color:var(--muted);font-size:15px;max-width:820px
}

.otlob-page .season-wrap {
  padding:22px
}

.otlob-page .season-title {
  font-size:clamp(19px,2.2vw,24px)
}

.otlob-page .season-deal .sd-country {
  font-size:12px;font-weight:700;color:var(--muted)
}

.otlob-page .season-deal .sd-cta {
  font-weight:800;font-size:13.5px;color:var(--primary-dark)
}

.otlob-page .season-foot {
  position:relative;z-index:1;margin-top:18px
}

.otlob-page .season-cta {
  display:inline-flex;align-items:center;gap:8px;background:#fff;color:var(--text);font-weight:800;padding:12px 20px;border-radius:12px;box-shadow:var(--shadow-sm);min-height:44px
}

.otlob-page .season-cta:hover {
  text-decoration:none;transform:translateY(-2px)
}

.otlob-page .countdown {
  display:flex;gap:8px;flex-wrap:wrap
}

.otlob-page .cd-box {
  background:rgba(255,255,255,.18);border:1px solid rgba(255,255,255,.3);border-radius:12px;padding:8px 12px;min-width:62px;text-align:center;display:grid;gap:2px
}

.otlob-page .cd-num {
  font-size:20px;font-weight:900;font-variant-numeric:tabular-nums
}

.otlob-page .cd-lbl {
  font-size:11.5px;opacity:.9
}

.otlob-page .offers-hero {
  background:linear-gradient(135deg,rgba(32,191,239,.12),rgba(255,107,53,.12));padding:28px 0 22px;border-bottom:1px solid var(--border)
}

.otlob-page .offers-hero h1 {
  font-size:clamp(22px,3.2vw,34px);margin:0 0 10px;line-height:1.3
}

.otlob-page .offers-hero-lead {
  margin:0;color:var(--muted);max-width:820px
}

.otlob-page .offers-trust {
  display:flex;flex-wrap:wrap;gap:8px 16px;list-style:none;padding:0;margin:14px 0 8px;font-size:13.5px;font-weight:700;color:var(--text)
}

.otlob-page .offers-trust li {
  background:#fff;border:1px solid var(--border);border-radius:999px;padding:6px 13px
}

.otlob-page .offers-method-link {
  font-weight:700;font-size:14px
}

.otlob-page .country-tabs {
  display:flex;gap:8px;overflow-x:auto;padding:16px 0 4px;scrollbar-width:thin;max-width:100%
}

.otlob-page .country-tab {
  flex:0 0 auto;background:var(--surface);border:1px solid var(--border);border-radius:999px;padding:9px 16px;font:inherit;font-weight:700;font-size:14px;color:var(--text);cursor:pointer;min-height:44px
}

.otlob-page .country-tab.active {
  background:var(--primary);border-color:var(--primary);color:#fff
}

.otlob-page .offer-filters {
  display:grid;gap:8px;margin-bottom:16px
}

.otlob-page .filter-row {
  display:flex;gap:8px;flex-wrap:wrap
}

.otlob-page .filter-chip {
  background:var(--surface);border:1px solid var(--border);border-radius:999px;padding:8px 14px;font:inherit;font-size:13.5px;font-weight:700;color:var(--muted);cursor:pointer;min-height:40px
}

.otlob-page .filter-chip.active {
  background:var(--text);border-color:var(--text);color:#fff
}

/* four cards on one row on the desktop, the row gives way step by step as the
   screen narrows and the rule of the phone further down keeps the single one */
.otlob-page .offers-grid {
  display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:18px
}

@media (max-width:1180px) {
  .otlob-page .offers-grid {
    grid-template-columns:repeat(3,minmax(0,1fr));gap:16px
  }
}

@media (max-width:980px) {
  .otlob-page .offers-grid {
    grid-template-columns:repeat(2,minmax(0,1fr));gap:14px
  }
}

.otlob-page .offer-card {
  background:var(--surface);border:1px solid var(--border);border-radius:18px;padding:20px;display:flex;flex-direction:column;gap:12px;box-shadow:var(--shadow-sm);min-width:0
}

/* THE HEAD OF ONE CARD

   The title is the heading of the card and it is given the whole width beside
   the logo, so a long name breaks on its words instead of being squeezed into
   a column one word wide by a badge sitting next to it. The value and the
   country stand together on the line under it, the value first because it is
   what the card is read for and the country beside it in the quieter grey the
   rest of the page keeps for what is secondary. */

.otlob-page .offer-card-head {
  display:flex;align-items:flex-start;gap:12px
}

.otlob-page .offer-store {
  display:flex;align-items:flex-start;gap:12px;min-width:0;flex:1 1 auto
}

.otlob-page .offer-store img, .otlob-page .offer-store-fallback {
  width:52px;height:52px;border-radius:14px;object-fit:contain;background:rgba(32,191,239,.10);display:grid;place-items:center;font-weight:900;font-size:20px;color:var(--primary-dark);flex:0 0 auto
}

.otlob-page .offer-store-text {
  min-width:0;flex:1 1 auto;display:flex;flex-direction:column;gap:7px
}

.otlob-page .offer-store-name {
  margin:0;font-weight:800;font-size:17px;line-height:1.45;overflow-wrap:break-word;word-break:normal
}

/* the value and the country on one line, wrapping under one another only when
   there is really no room left for the two of them side by side */
.otlob-page .offer-store-sub {
  display:flex;align-items:center;flex-wrap:wrap;gap:6px 10px;min-width:0
}

.otlob-page .offer-country {
  margin:0;font-size:13px;font-weight:600;color:var(--muted);line-height:1.4;display:inline-flex;align-items:center;gap:5px;min-width:0
}

/* the country holds the right edge of the row and the value follows beside it.
   The page is rtl, so the first item of the row is the one on the right, and
   order does that without the markup having to be written the other way round
   and read the other way round with it. */
.otlob-page .offer-store-sub .offer-country {
  order:-1;text-align:right
}

.otlob-page .offer-value {
  background:var(--accent);color:#fff;font-weight:800;font-size:14px;line-height:1.3;letter-spacing:.1px;padding:6px 13px;border-radius:999px;white-space:nowrap;flex:0 0 auto;box-shadow:0 2px 6px rgba(0,0,0,.10)
}

.otlob-page .offer-title {
  margin:0;font-size:18px;font-weight:800;line-height:1.5
}

.otlob-page .offer-desc {
  margin:0;font-size:14.5px;line-height:1.75;color:var(--muted)
}

.otlob-page .offer-meta {
  list-style:none;display:flex;flex-wrap:wrap;gap:8px;padding:0;margin:0
}

.otlob-page .offer-meta li {
  font-size:12.5px;font-weight:700;border-radius:999px;padding:7px 13px;background:#F1F5F9;color:var(--muted);border:1px solid transparent
}

.otlob-page .offer-meta .offer-type {
  background:rgba(32,191,239,.14);color:var(--primary-dark)
}

.otlob-page .offer-meta .verified {
  background:rgba(16,185,129,.14);color:#0B7A5C
}

/* the terms stand directly under the description and belong to it, so they are
   pulled up against it out of the gap the card keeps between its blocks and
   read as the small print of the line above rather than a block of their own */
.otlob-page .offer-terms {
  margin:-5px 0 0;font-size:12.5px;line-height:1.7;color:var(--muted);opacity:.9
}

.otlob-page .offer-code {
  font-family:ui-monospace,monospace;font-weight:800;letter-spacing:1px;border:1.5px dashed var(--border);border-radius:10px;padding:8px;text-align:center
}

.otlob-page .offer-cta {
  margin-top:auto;display:inline-flex;align-items:center;justify-content:center;min-height:52px;background:var(--primary);color:#fff;font-weight:800;font-size:16px;border-radius:14px;padding:12px 16px
}

.otlob-page .offer-cta:hover {
  background:var(--primary-dark);text-decoration:none;color:#fff
}

.otlob-page .offers-more {
  display:flex;justify-content:center;margin-top:18px
}

.otlob-page .btn-more {
  background:var(--surface);border:1px solid var(--border);border-radius:12px;padding:12px 22px;font:inherit;font-weight:800;cursor:pointer;min-height:44px
}

.otlob-page .offers-empty {
  color:var(--muted)
}

.otlob-page .season-wrap-page {
  margin-bottom:16px
}

.otlob-page .upcoming-grid {
  display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:12px
}

.otlob-page .upcoming-card {
  background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:14px;display:flex;flex-direction:column;gap:6px
}

.otlob-page .upcoming-card h3 {
  margin:0;font-size:16px
}

.otlob-page .upcoming-card p {
  margin:0;font-size:13.5px;color:var(--muted)
}

/* THE DESCRIPTION ON AN UPCOMING CARD

   The same markup the banner of a campaign carries, printed on a card a third
   of the width, so it is kept quiet: the wording of the card around it, the
   headings no larger than the title of the card, and the outer margins of
   whatever the panel began and ended with taken off so the card closes where
   it means to. */

.otlob-page .upcoming-desc {
  margin:0;font-size:13.5px;line-height:1.7;color:var(--muted)
}

.otlob-page .upcoming-desc > :first-child {
  margin-top:0
}

.otlob-page .upcoming-desc > :last-child {
  margin-bottom:0
}

.otlob-page .upcoming-desc p {
  margin:0 0 8px;font-size:inherit;color:inherit
}

.otlob-page .upcoming-desc h2, .otlob-page .upcoming-desc h3, .otlob-page .upcoming-desc h4 {
  margin:10px 0 6px;font-size:14px;font-weight:800;line-height:1.5;color:var(--text)
}

.otlob-page .upcoming-desc ul, .otlob-page .upcoming-desc ol {
  margin:0 0 8px;padding-inline-start:18px;padding-inline-end:0
}

.otlob-page .upcoming-desc li {
  margin:0 0 4px
}

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

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

.otlob-page .upcoming-desc img {
  max-width:100%;height:auto;border-radius:10px
}

.otlob-page .upcoming-badge {
  font-weight:800;font-size:13px
}

.otlob-page .upcoming-date {
  font-weight:700
}

.otlob-page .upcoming-status {
  align-self:flex-start;background:var(--bg);border:1px solid var(--border);border-radius:999px;padding:3px 11px;font-size:12px;font-weight:700;color:var(--muted)
}

.otlob-page .store-offer-grid {
  display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:12px
}

.otlob-page .store-offer-card {
  background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:14px;display:grid;gap:4px
}

.otlob-page .store-offer-name {
  font-weight:800;color:var(--text)
}

.otlob-page .store-offer-count {
  font-size:13px;color:var(--muted)
}

.otlob-page .trust-text {
  color:var(--muted);max-width:820px
}

@media (max-width:768px) {
  .otlob-page .offers-hero {
    padding:20px 0 16px
  }

  .otlob-page .offers-hero-lead {
    font-size:14px;line-height:1.7
  }

  .otlob-page .offers-trust {
    gap:6px;font-size:12.5px;margin:12px 0 6px
  }

  .otlob-page .offers-trust li {
    padding:5px 10px
  }

  .otlob-page .country-tabs {
    position:sticky;top:0;z-index:5;background:var(--bg);padding:10px 16px 10px;margin:0 -16px;gap:6px;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;border-bottom:1px solid var(--border)
  }

  .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 {
    flex-wrap:nowrap;overflow-x:auto;padding:2px 16px;margin:0 -16px;scrollbar-width:none;-webkit-overflow-scrolling:touch
  }

  .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 {
    padding:16px;gap:10px
  }

  .otlob-page .offer-store-text {
    gap:6px
  }

  .otlob-page .offer-store img, .otlob-page .offer-store-fallback {
    width:44px;height:44px;border-radius:12px;font-size:17px
  }

  /* a name breaks on its words, and only inside a word when a single one of
     them is on its own wider than the card */
  .otlob-page .offer-store-name {
    font-size:15.5px;overflow-wrap:break-word
  }

  .otlob-page .offer-store-sub {
    gap:5px 8px
  }

  .otlob-page .offer-country {
    font-size:12.5px
  }

  .otlob-page .offer-value {
    font-size:13px;padding:5px 11px
  }

  .otlob-page .offer-title {
    font-size:16.5px
  }

  .otlob-page .offer-desc {
    font-size:13.5px;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden
  }

  .otlob-page .offer-meta li {
    padding:6px 11px
  }

  .otlob-page .offer-cta {
    width:100%;min-height:48px
  }

  .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 (max-width:340px) {
  /* the narrowest screens give the value its own line and the country the one
     under it, the logo stays beside the name. Stacked they are both against
     the right edge already, so the country gives its place back to the value
     and the two are read in the order the card is read in. */
  .otlob-page .offer-store-sub {
    flex-direction:column;align-items:flex-start;gap:6px
  }

  .otlob-page .offer-store-sub .offer-country {
    order:0
  }
}

@media (prefers-reduced-motion:reduce) {
  .otlob-page .season-cta:hover, .otlob-page .season-deal:hover {
    transform:none
  }

  .otlob-page * {
    animation-duration:.001ms!important;transition-duration:.001ms!important
  }
}

/* the campaigns of the design, the banner and the grid that follows it. The
   colours come from the --cmp-* variables the template writes on the banner,
   one set of them for each country. */
.otlob-page .campaigns-stack {
  display:grid;gap:28px;margin-top:24px
}

/* the band of a banner is not a section of the page with a heading of its own,
   the gap of a full one above and below left it floating between the tabs and
   the row of the stores. The block carries its own space instead, the same on
   both sides of it, and every other section keeps the rhythm of the page. */
.otlob-page .campaigns-stack .campaign-section {
  margin-top:0
}

.otlob-page .campaigns-stack + .section {
  margin-top:24px
}

.otlob-page .campaign-section {
  margin-bottom:4px
}

.otlob-page .campaign-banner {
  position:relative;overflow:hidden;border-radius:20px;padding:28px;color:var(--cmp-text);background:linear-gradient(135deg,var(--cmp-start),var(--cmp-end))
}

.otlob-page .campaign-badge {
  display:inline-flex;align-items:center;gap:8px;padding:6px 14px;border-radius:999px;background:var(--cmp-badge);color:inherit;font-size:13px;font-weight:700
}

.otlob-page .campaign-title {
  margin:12px 0 8px;color:inherit;font-size:clamp(22px,3vw,30px)
}

/* THE DESCRIPTION OF A CAMPAIGN

   What the panel wrote is markup and it is printed as markup, so the block
   holds headings and lists and bold as well as paragraphs. Everything in it is
   given the colour of the banner it sits on, and the first and last things in
   it lose their outer margin so the block starts and ends where the banner
   expects it to whatever the panel happened to begin with. */

.otlob-page .campaign-desc {
  margin:0 0 10px;max-width:60ch;color:inherit;opacity:.92
}

.otlob-page .campaign-desc > :first-child {
  margin-top:0
}

.otlob-page .campaign-desc > :last-child {
  margin-bottom:0
}

.otlob-page .campaign-desc p {
  margin:0 0 10px;color:inherit
}

.otlob-page .campaign-desc h2, .otlob-page .campaign-desc h3, .otlob-page .campaign-desc h4 {
  margin:14px 0 8px;color:inherit;font-size:clamp(16px,2vw,19px);font-weight:800;line-height:1.5;opacity:1
}

.otlob-page .campaign-desc ul, .otlob-page .campaign-desc ol {
  margin:0 0 10px;padding-inline-start:20px;padding-inline-end:0
}

.otlob-page .campaign-desc li {
  margin:0 0 5px
}

.otlob-page .campaign-desc strong, .otlob-page .campaign-desc b {
  font-weight:800;color:inherit
}

.otlob-page .campaign-desc a {
  color:inherit;text-decoration:underline
}

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

.otlob-page .campaign-dates, .otlob-page .campaign-left {
  margin:0 0 6px;color:inherit;font-size:14px;opacity:.9
}

.otlob-page .campaign-left {
  opacity:1;font-weight:700
}

.otlob-page .campaign-cta {
  display:inline-block;margin-top:14px;padding:12px 22px;border-radius:999px;background:var(--cmp-btn-bg);color:var(--cmp-btn-text);font-weight:800;text-decoration:none
}

.otlob-page .campaign-cta:hover {
  filter:brightness(.95);text-decoration:none;color:var(--cmp-btn-text)
}

.otlob-page .campaign-grid {
  margin-top:20px
}

/* a banner of the panel carries a picture, it stands at the top of the leading
   side of the band, which the page being written right to left puts at the top
   right, and the text of the banner runs beside it. The band keeps the colours
   of the theme behind both, so the words stay readable without an overlay. */
.otlob-page .campaign-banner.mode-image {
  display:flex;align-items:flex-start;gap:24px;padding:40px 28px
}

.otlob-page .campaign-banner-media {
  position:static;flex:0 0 auto;width:min(38%,240px);border-radius:14px;overflow:hidden;background:rgba(255,255,255,.14);line-height:0
}

.otlob-page .campaign-banner-media img {
  display:block;width:100%;height:auto;object-fit:cover;object-position:var(--cmp-focal,center)
}

.otlob-page .campaign-banner.mode-image .campaign-banner-body {
  position:relative;flex:1 1 auto;min-width:0;padding:0;background:none
}

/* the coupons of one store, the group carries the name of the store above them */
.otlob-page .offer-store-group {
  margin:0 0 22px
}

.otlob-page .offer-store-group[hidden] {
  display:none
}

.otlob-page .offer-store-title {
  margin:0;font-size:18px;font-weight:800
}

@media (max-width:640px) {
  .otlob-page .campaign-banner {
    border-radius:16px;padding:20px
  }

  /* no room for the picture beside the text on a phone, it keeps the top of
     the band and the text runs under it */
  .otlob-page .campaign-banner.mode-image {
    flex-direction:column;gap:16px;padding:28px 20px
  }

  .otlob-page .campaign-banner-media {
    width:100%
  }

  .otlob-page .campaign-cta {
    display:block;text-align:center
  }
}

/* one campaign for one tab, only the campaign of the active tab is shown */
.otlob-page .offers-panel {
  display:none
}

.otlob-page .offers-panel.active {
  display:block
}

/* everything the tabs carry, the campaigns, the seasons to come, the sections
   and the stores. Each block is written once for every country and only the
   one of the active tab is shown. The grid inside keeps its own rules. */
.otlob-page .country-panel {
  display:none
}

.otlob-page .country-panel.active {
  display:block
}

/* a filter with no offer behind it in the country of the tab is taken out */
.otlob-page .filter-chip[hidden] {
  display:none
}

/* the card and the grid carry a display of their own, it wins over the one the
   browser gives to [hidden], so the filter has to be told again here */
.otlob-page .offer-card[hidden] {
  display:none
}

.otlob-page .offers-grid[hidden] {
  display:none
}

/* THE GRIDS UNDER THE BANNER OF A CAMPAIGN

   A campaign of the panel prints its coupons and its stores under its own
   banner, inside the same section. In every other block of the page a grid
   follows the heading of its section and takes its space from it, here there
   is no heading between the banner and the grid, so the space is given here.
   Both grids keep every one of their own rules, only the gap above them is
   written, and nothing that was already on this file is touched. */
.otlob-page .campaign-section .offers-grid,
.otlob-page .campaign-section .store-offer-grid {
  margin-top: 18px
}