/* ==========================================================================
   Dealsindiscount — additions on top of the Couponly theme.
   The template is left untouched; this file only covers things it has no rule
   for, such as the brand monogram that stands in for a missing store logo.
   ========================================================================== */

/* Store marks sit inside the template's .thumb-area block, which is a fixed-height
   tinted panel. Logos arrive at 460 different shapes, so they are contained rather
   than stretched. */
.thumb-area { min-height: 132px; padding: 18px; }
.thumb-area img { max-width: 72%; max-height: 96px; width: auto; height: auto; object-fit: contain; }

.brand-monogram {
  display: grid; place-items: center; width: 88px; height: 88px; border-radius: 14px;
  background: var(--tile, var(--p1-hex)); color: #fff;
  font-size: 1.9rem; font-weight: 700; letter-spacing: -.02em;
  /* Extracted brand colours include pale yellows and greys; this keeps white
     initials legible on them without flattening the hue. */
  box-shadow: inset 0 0 0 999px rgba(0, 0, 0, .14);
}
.brand-monogram.sm { width: 52px; height: 52px; border-radius: 10px; font-size: 1.1rem; }
.brand-monogram.lg { width: 120px; height: 120px; border-radius: 18px; font-size: 2.6rem; }

/* Store logo on listing tiles */
.store-mark { display: grid; place-items: center; min-height: 96px; }
.store-mark img { max-width: 80%; max-height: 72px; width: auto; object-fit: contain; }

/* Long-form copy inside blog posts and static pages */
.post-body { line-height: 1.75; }
.post-body > * + * { margin-top: 1.1em; }
.post-body h2 { font-size: 1.7rem; margin-top: 1.8em; }
.post-body h3 { font-size: 1.25rem; margin-top: 1.5em; }
.post-body ul, .post-body ol { padding-left: 1.3rem; }
.post-body li + li { margin-top: .4em; }
.post-body a { color: var(--p1-hex); text-decoration: underline; text-underline-offset: 2px; }
.post-body table { width: 100%; border-collapse: collapse; }
.post-body th, .post-body td { padding: 10px 12px; border: 1px solid var(--n4-hex); text-align: left; font-size: .92rem; }
.post-body th { background: var(--n3-hex); font-weight: 600; }
.post-body img { max-width: 100%; height: auto; border-radius: 10px; }

/* The template ships no visible focus state, which makes the site unusable by keyboard */
a:focus-visible, button:focus-visible, input:focus-visible,
select:focus-visible, textarea:focus-visible {
  outline: 2px solid var(--p1-hex); outline-offset: 2px; border-radius: 4px;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; transition-duration: .001ms !important; }
}

/* Copy confirmation */
.cs-toast {
  position: fixed; left: 50%; bottom: 26px; transform: translate(-50%, 16px);
  background: var(--n17-hex); color: #fff; padding: 11px 20px; border-radius: 999px;
  font-size: .88rem; font-weight: 600; z-index: 9999; opacity: 0;
  transition: opacity .25s ease, transform .25s ease; pointer-events: none;
}
.cs-toast.in { opacity: 1; transform: translate(-50%, 0); }

/* FAQ accordion caret */
.accordion-single .acc-caret { transition: transform .2s ease; }
.accordion-single.open .acc-caret { transform: rotate(180deg); }