/* Arkan shared components — header, drawer, footer, mini-cart, search, toast */

/* ---------------------------------- Header ---------------------------------- */
.arkan-header {
  position: sticky;
  top: 0;
  z-index: 1000;
  background: var(--cream);
  display: flex;
  align-items: center;
  height: var(--header-h);
  padding: 0 48px;
  border-bottom: 1px solid var(--hair-soft);
  transition: box-shadow 0.3s ease;
}

.arkan-header.is-scrolled {
  box-shadow: 0 2px 20px rgba(0, 0, 0, 0.07);
}

.arkan-header__left {
  flex: 1;
  display: flex;
  gap: 28px;
  align-items: center;
}

.arkan-header__logo {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
}

.arkan-header__logo img {
  height: 56px;
  width: auto;
  filter: brightness(0);
  display: block;
}

.arkan-header__right {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 16px;
  justify-content: flex-end;
}

.arkan-nav__links {
  display: flex;
  gap: 28px;
  align-items: center;
}

.arkan-nav__link {
  font-family: var(--sans);
  font-size: 11px;
  font-weight: 400;
  letter-spacing: 0.16em;
  color: var(--ink);
  text-transform: uppercase;
  transition: opacity 0.2s;
}

.arkan-nav__link:hover {
  opacity: 0.55;
}

.arkan-nav__link.is-active {
  font-weight: 500;
  color: var(--burgundy);
}

/* Icon buttons (search / account / wishlist).
   The 17px icons sit in a 41×45 hit box: padding grows the target, the negative
   margin pulls the extra back out of the flow so the design's icon positions and
   16px rhythm are untouched. 41px wide is the ceiling before neighbouring
   targets in this row would overlap each other. */
.arkan-header__icon {
  background: transparent;
  border: none;
  cursor: pointer;
  padding: 14px 12px;
  margin: -10px -8px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--ink);
  transition: opacity 0.2s;
}

.arkan-header__icon:hover {
  opacity: 0.55;
}

.arkan-header__aed {
  font-family: var(--sans);
  font-size: 11px;
  font-weight: 400;
  letter-spacing: 0.08em;
  color: var(--ink);
}

/* Language switch */
.arkan-lang {
  display: flex;
  align-items: center;
  gap: 4px;
}

.arkan-lang__btn {
  font-family: var(--sans);
  font-size: 11px;
  letter-spacing: 0.06em;
  padding: 4px 6px;
  color: var(--ink);
  transition: opacity 0.2s;
}

.arkan-lang__btn:hover {
  opacity: 0.55;
}

.arkan-lang__btn.is-current {
  font-weight: 500;
}

.arkan-lang__btn:not(.is-current) {
  font-weight: 400;
  color: rgba(26, 22, 20, 0.5);
}

.arkan-lang__sep {
  color: rgba(26, 22, 20, 0.3);
  font-size: 11px;
}

/* Cart link + badge */
.arkan-header__cart {
  position: relative;
  padding: 4px;
  display: flex;
  cursor: pointer;
  background: transparent;
  border: none;
  color: var(--burgundy);
}

/* The bag keeps its 4px box because .arkan-cart-badge is positioned against it;
   this invisible overlay raises the tap target to 44×44 instead. */
.arkan-header__cart::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 44px;
  height: 44px;
  transform: translate(-50%, -50%);
}

.arkan-cart-badge {
  position: absolute;
  top: -5px;
  right: -6px;
  background: var(--burgundy);
  color: #fff;
  font-size: 8px;
  font-family: var(--sans);
  min-width: 15px;
  height: 15px;
  padding: 0 3px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 600;
}

/* Hamburger — shown below 1100px (deliberate: keeps links clear of the centered logo).
   The only mobile nav control, so it gets a full 44×44 target: 24px icon + 10px
   padding, with the negative margin cancelling the growth back out of the layout
   so the icon lands exactly where the design puts it. */
.arkan-hamburger {
  display: none;
  background: transparent;
  border: none;
  cursor: pointer;
  padding: 10px;
  margin: -6px;
  align-items: center;
  justify-content: center;
  color: var(--ink);
}

@media (max-width: 1100px) {
  .arkan-nav__links {
    display: none;
  }

  .arkan-hamburger {
    display: flex;
  }
}

@media (max-width: 900px) {
  .arkan-header {
    padding: 0 20px;
  }
}

@media (max-width: 600px) {
  .arkan-hide-sm {
    display: none !important;
  }

  /* Four icon targets (~150px) cannot coexist with the absolutely-centred logo:
     measured overlap was 40px @320, 20px @360, 5px @390 — the logo painted over
     the search box and ate its taps. Trimming padding only bought a few px, so
     instead the bar keeps just the two icons a shopper needs mid-journey
     (search + cart). Account and Wishlist are not lost: both live in the
     hamburger drawer. Full-size 44px targets are preserved. */
  .arkan-header__acct,
  .arkan-header__wish {
    display: none;
  }
}

/* Hero (front page) header: fixed + transparent over video, solidifies on scroll */
.arkan-header--hero {
  position: fixed;
  left: 0;
  right: 0;
  height: 70px;
  background: transparent;
  border-bottom: none;
  transition: background 0.35s ease, box-shadow 0.35s ease;
}

.arkan-header--hero .arkan-nav__link,
.arkan-header--hero .arkan-header__aed,
.arkan-header--hero .arkan-lang__btn,
.arkan-header--hero .arkan-header__icon,
.arkan-header--hero .arkan-hamburger,
.arkan-header--hero .arkan-header__cart {
  color: #fff;
}

.arkan-header--hero .arkan-nav__link.is-active {
  color: #fff;
}

.arkan-header--hero .arkan-lang__btn:not(.is-current) {
  color: rgba(255, 255, 255, 0.55);
}

.arkan-header--hero .arkan-lang__sep {
  color: rgba(255, 255, 255, 0.35);
}

.arkan-header--hero .arkan-header__logo img {
  height: 58px;
  filter: brightness(0) invert(1);
}

.arkan-header--hero.is-solid {
  background: var(--maroon);
  box-shadow: 0 2px 24px rgba(0, 0, 0, 0.25);
}

/* ------------------------------- Mobile drawer ------------------------------- */
.arkan-drawer {
  position: fixed;
  inset: 0;
  z-index: 1100;
  background: rgba(26, 10, 14, 0.98);
  display: none;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
}

.arkan-drawer.is-open {
  display: flex;
}

.arkan-drawer__close {
  position: absolute;
  top: 22px;
  right: 22px;
  background: transparent;
  border: none;
  cursor: pointer;
  padding: 6px;
  display: flex;
  color: #fff;
}

/* Overlay rather than padding: the corner offsets (and their RTL mirror) stay
   exactly as designed while the tap target reaches 44×44. */
.arkan-drawer__close::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 44px;
  height: 44px;
  transform: translate(-50%, -50%);
}

.arkan-drawer__logo {
  height: 52px;
  width: auto;
  filter: brightness(0) invert(1);
  margin-bottom: 30px;
}

.arkan-drawer__link {
  font-family: var(--serif);
  font-size: 29px;
  font-weight: 400;
  color: #fff;
  padding: 9px 0;
  transition: opacity 0.2s;
}

.arkan-drawer__link:hover {
  opacity: 0.6;
}

.arkan-drawer__meta {
  display: flex;
  gap: 26px;
  margin-top: 28px;
}

.arkan-drawer__meta a {
  font-family: var(--sans);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.16em;
  color: var(--rose);
  text-transform: uppercase;
}

/* Language switch — the drawer is the only place to change language below 600px,
   where the header's .arkan-lang is .arkan-hide-sm. Sized for touch (44×44). */
.arkan-drawer__lang {
  display: flex;
  align-items: center;
  gap: 4px;
  margin-top: 18px;
}

.arkan-drawer__lang-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  min-height: 44px;
  font-family: var(--serif);
  font-size: 19px;
  font-weight: 400;
  letter-spacing: 0.08em;
  color: rgba(255, 255, 255, 0.55);
  transition: color 0.2s, opacity 0.2s;
}

.arkan-drawer__lang-btn:hover {
  opacity: 0.75;
}

.arkan-drawer__lang-btn.is-current {
  color: var(--rose);
  font-weight: 500;
}

.arkan-drawer__lang-sep {
  font-family: var(--serif);
  font-size: 17px;
  color: rgba(255, 255, 255, 0.3);
}

/* ---------------------------------- Footer ---------------------------------- */
.arkan-footer {
  width: 100%;
  background: var(--sand);
}

.arkan-footer__grid {
  max-width: 1280px;
  margin: 0 auto;
  padding: 72px 48px 44px;
  display: grid;
  grid-template-columns: 1.6fr 1fr 1fr 1.2fr;
  gap: 56px;
}

.arkan-footer__col {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.arkan-footer__col--brand {
  gap: 18px;
}

.arkan-footer__logo {
  height: 44px;
  width: 35px;
  filter: brightness(0);
  display: block;
  align-self: flex-start;
  flex-shrink: 0;
  object-fit: contain;
}

.arkan-footer__tagline {
  font-family: var(--sans);
  font-size: 12.5px;
  font-weight: 300;
  color: var(--body-2);
  line-height: 1.85;
  max-width: 250px;
}

.arkan-footer__social {
  display: flex;
  gap: 10px;
  margin-top: 4px;
}

.arkan-footer__social a {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  border: 1px solid rgba(44, 36, 32, 0.2);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #2c2420;
  transition: border-color 0.2s, color 0.2s;
}

.arkan-footer__social a:hover {
  border-color: var(--burgundy);
  color: var(--burgundy);
}

.arkan-footer__heading {
  font-family: var(--sans);
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.2em;
  color: var(--ink);
  text-transform: uppercase;
  margin-bottom: 6px;
}

.arkan-footer__link {
  font-family: var(--sans);
  font-size: 12.5px;
  font-weight: 300;
  color: var(--body-2);
  transition: color 0.2s;
}

.arkan-footer__link:hover {
  color: var(--burgundy);
}

.arkan-footer__news-copy {
  font-family: var(--sans);
  font-size: 12.5px;
  font-weight: 300;
  color: var(--body-2);
  line-height: 1.7;
}

.arkan-footer__form {
  display: flex;
  margin-top: 4px;
}

.arkan-footer__input {
  flex: 1;
  min-width: 0;
  border: 1px solid rgba(44, 36, 32, 0.2);
  border-right: none;
  padding: 12px 16px;
  font-family: var(--sans);
  font-size: 12px;
  color: #2c2420;
  background: var(--cream);
  outline: none;
}

.arkan-footer__join {
  background: var(--burgundy);
  color: #fff;
  border: none;
  padding: 12px 22px;
  font-family: var(--sans);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  white-space: nowrap;
  cursor: pointer;
  transition: background 0.25s, transform 0.2s;
}

.arkan-footer__join:hover {
  background: var(--burgundy-dark);
  transform: translateY(-1px);
}

.arkan-footer__locale {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 10px;
  font-family: var(--sans);
  font-size: 11px;
  font-weight: 400;
  color: var(--body-2);
}

.arkan-footer__lang {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

/* min-width/height give a 44px touch target; the negative margin absorbs the
   extra box back out of the flow so the locale row keeps its designed height. */
.arkan-footer__lang-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  min-height: 44px;
  margin: -14px -6px;
  color: var(--body-2);
  transition: color 0.2s;
}

.arkan-footer__lang-btn:hover {
  color: var(--burgundy);
}

.arkan-footer__lang-btn.is-current {
  font-weight: 500;
  color: var(--burgundy);
}

.arkan-footer__lang-sep,
.arkan-footer__locale-sep {
  color: rgba(44, 36, 32, 0.2);
}

.arkan-footer__bottom {
  border-top: 1px solid rgba(44, 36, 32, 0.12);
}

.arkan-footer__bottom-inner {
  max-width: 1280px;
  margin: 0 auto;
  padding: 20px 48px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
}

.arkan-footer__copyright {
  font-family: var(--sans);
  font-size: 11.5px;
  font-weight: 300;
  color: #9a8e88;
}

.arkan-footer__pay {
  display: flex;
  align-items: center;
  gap: 12px;
}

@media (max-width: 900px) {
  .arkan-footer__grid {
    grid-template-columns: 1fr 1fr;
    gap: 36px;
    padding-left: 20px;
    padding-right: 20px;
  }

  .arkan-footer__bottom-inner {
    padding-left: 20px;
    padding-right: 20px;
  }
}

@media (max-width: 600px) {
  .arkan-footer__grid {
    grid-template-columns: 1fr;
    gap: 30px;
  }
}

/* -------------------------------- Mini-cart drawer -------------------------------- */
.arkan-minicart-backdrop {
  position: fixed;
  inset: 0;
  z-index: 2600;
  background: rgba(26, 10, 14, 0.5);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.25s, visibility 0.25s;
}

.arkan-minicart-backdrop.is-open {
  opacity: 1;
  visibility: visible;
}

.arkan-minicart {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  z-index: 2700;
  width: 368px;
  max-width: 88vw;
  background: var(--cream);
  box-shadow: -20px 0 60px rgba(0, 0, 0, 0.25);
  transform: translateX(100%);
  transition: transform 0.3s cubic-bezier(0.2, 0.7, 0.2, 1);
  display: flex;
  flex-direction: column;
}

.arkan-minicart.is-open {
  transform: translateX(0);
}

.arkan-minicart__content {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
}

.arkan-minicart__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 22px 24px;
  border-bottom: 1px solid var(--hair);
}

.arkan-minicart__title {
  font-family: var(--sans);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--burgundy);
}

.arkan-minicart__close {
  background: none;
  border: none;
  cursor: pointer;
  padding: 4px;
  color: var(--muted);
  display: flex;
}

.arkan-minicart__body {
  flex: 1;
  overflow-y: auto;
  padding: 30px 24px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: 16px;
}

/* Filled bag: the body becomes a top-aligned, scrollable line-item list. */
.arkan-minicart__body--filled {
  padding: 8px 0 4px;
  align-items: stretch;
  justify-content: flex-start;
  text-align: start;
  gap: 0;
  min-height: 0;
}

.arkan-minicart__list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.arkan-minicart__line {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 16px 24px;
  border-bottom: 1px solid var(--hair);
  transition: opacity 0.2s;
}

.arkan-minicart__line:last-child {
  border-bottom: none;
}

.arkan-minicart__line.is-removing {
  opacity: 0.45;
  pointer-events: none;
}

.arkan-minicart__thumb {
  width: 54px;
  height: 66px;
  flex-shrink: 0;
  border-radius: 8px;
  background-color: var(--well);
  background-size: cover;
  background-position: center;
  display: block;
}

.arkan-minicart__line-info {
  flex: 1;
  min-width: 0;
}

.arkan-minicart__line-name {
  font-family: var(--serif);
  font-size: 17px;
  font-weight: 500;
  color: var(--ink);
  line-height: 1.2;
  margin: 0;
}

.arkan-minicart__line-name a {
  color: inherit;
  text-decoration: none;
}

.arkan-minicart__line-name a:hover {
  color: var(--burgundy);
}

.arkan-minicart__line-meta {
  font-family: var(--sans);
  font-size: 10.5px;
  color: var(--muted);
  margin-top: 3px;
  line-height: 1.5;
}

/* WooCommerce renders item meta as a <dl>; flatten it onto one line. */
.arkan-minicart__line-meta dl,
.arkan-minicart__line-meta dt,
.arkan-minicart__line-meta dd,
.arkan-minicart__line-meta p {
  display: inline;
  margin: 0;
  padding: 0;
  font-size: inherit;
}

.arkan-minicart__line-qty {
  font-family: var(--sans);
  font-size: 11.5px;
  color: var(--muted);
  margin: 6px 0 0;
}

.arkan-minicart__line-end {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  justify-content: space-between;
  align-self: stretch;
  gap: 8px;
  flex-shrink: 0;
}

.arkan-minicart__line-price {
  font-family: var(--sans);
  font-size: 12.5px;
  font-weight: 600;
  color: var(--ink);
  white-space: nowrap;
}

.arkan-minicart__remove {
  width: 30px;
  height: 30px;
  /* Logical props so the nudge mirrors itself in RTL (rtl.css needs no rule). */
  margin-block-start: -4px;
  margin-inline-end: -6px;
  border: none;
  border-radius: 50%;
  background: transparent;
  color: var(--muted-2);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: background 0.2s, color 0.2s;
}

.arkan-minicart__remove:hover {
  background: var(--cream-2);
  color: var(--burgundy);
}

.arkan-minicart__subtotal {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  padding-bottom: 4px;
}

.arkan-minicart__subtotal-label {
  font-family: var(--sans);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--muted);
}

.arkan-minicart__subtotal-value {
  font-family: var(--serif);
  font-size: 22px;
  font-weight: 600;
  color: var(--burgundy);
}

.arkan-minicart__icon {
  width: 70px;
  height: 70px;
  border-radius: 50%;
  background: var(--cream-2);
  display: flex;
  align-items: center;
  justify-content: center;
}

.arkan-minicart__count {
  font-family: var(--serif);
  font-size: 30px;
  font-weight: 500;
  color: var(--ink);
  line-height: 1.1;
}

.arkan-minicart__hint {
  font-family: var(--sans);
  font-size: 12.5px;
  color: var(--muted);
  max-width: 230px;
  line-height: 1.7;
}

.arkan-minicart__foot {
  padding: 18px 24px 24px;
  border-top: 1px solid var(--hair);
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.arkan-minicart__checkout,
.arkan-minicart__view {
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 10px;
  font-family: var(--sans);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  text-decoration: none;
}

.arkan-minicart__checkout {
  height: 52px;
  background: var(--burgundy);
  color: #fff;
  transition: background 0.25s;
}

.arkan-minicart__checkout:hover {
  background: var(--burgundy-dark);
}

.arkan-minicart__view {
  height: 50px;
  background: transparent;
  border: 1.5px solid rgba(26, 22, 20, 0.25);
  color: var(--ink);
  transition: border-color 0.2s, color 0.2s;
}

.arkan-minicart__view:hover {
  border-color: var(--burgundy);
  color: var(--burgundy);
}

.arkan-minicart__shop {
  margin-top: 6px;
  display: inline-flex;
  align-items: center;
  height: 48px;
  padding: 0 32px;
  border-radius: var(--r-pill);
  background: var(--burgundy);
  color: #fff;
  font-family: var(--sans);
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  transition: background 0.25s;
}

.arkan-minicart__shop:hover {
  background: var(--burgundy-dark);
}

/* -------------------------------- Search overlay -------------------------------- */
.arkan-search {
  position: fixed;
  inset: 0;
  z-index: 3000;
  background: rgba(26, 10, 14, 0.55);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.25s, visibility 0.25s;
  padding: 0 20px;
}

.arkan-search.is-open {
  opacity: 1;
  visibility: visible;
}

.arkan-search__panel {
  max-width: 720px;
  margin: 8vh auto 0;
  background: var(--cream);
  border-radius: 18px;
  box-shadow: var(--shadow-modal);
  overflow: hidden;
}

.arkan-search__head {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 22px 24px;
  border-bottom: 1px solid var(--hair);
  color: var(--burgundy);
}

.arkan-search__input {
  flex: 1;
  border: none;
  background: transparent;
  outline: none;
  font-family: var(--sans);
  font-size: 15px;
  color: var(--ink);
}

.arkan-search__close {
  background: none;
  border: none;
  cursor: pointer;
  padding: 4px;
  color: var(--muted);
  display: flex;
}

.arkan-search__results {
  max-height: 60vh;
  overflow-y: auto;
  padding: 10px;
}

.arkan-search__row {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 12px 16px;
  border-radius: 12px;
  text-decoration: none;
  transition: background 0.15s;
}

.arkan-search__row:hover {
  background: #f1ebe1;
}

.arkan-search__thumb {
  width: 48px;
  height: 60px;
  border-radius: 8px;
  background-color: var(--well);
  background-size: cover;
  background-position: center;
  flex-shrink: 0;
}

.arkan-search__name {
  font-family: var(--serif);
  font-size: 20px;
  font-weight: 500;
  color: var(--ink);
  line-height: 1.1;
}

.arkan-search__desc {
  font-family: var(--sans);
  font-size: 11px;
  color: var(--muted);
  margin-top: 3px;
}

.arkan-search__price {
  font-family: var(--sans);
  font-size: 13px;
  font-weight: 500;
  color: var(--burgundy);
  white-space: nowrap;
  margin-left: auto;
}

.arkan-search__empty {
  padding: 44px 20px;
  text-align: center;
  font-family: var(--sans);
  font-size: 13px;
  color: var(--muted);
}

.arkan-search__all {
  display: block;
  text-align: center;
  padding: 16px;
  margin-top: 4px;
  font-family: var(--sans);
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--burgundy);
  border-top: 1px solid var(--hair-soft);
  text-decoration: none;
}

/* ---------------------------------- Toast ---------------------------------- */
@keyframes arkanToastIn {
  from {
    opacity: 0;
    transform: translate(-50%, 14px);
  }

  to {
    opacity: 1;
    transform: translate(-50%, 0);
  }
}

.arkan-toast {
  position: fixed;
  bottom: 30px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 1200;
  display: none;
  align-items: center;
  gap: 11px;
  background: var(--ink);
  color: #fff;
  border-radius: 30px;
  padding: 14px 26px;
  box-shadow: 0 12px 34px rgba(0, 0, 0, 0.28);
  animation: arkanToastIn 0.3s ease;
}

.arkan-toast.is-visible {
  display: flex;
}

.arkan-toast__icon {
  display: flex;
  align-items: center;
}

/* Error variant — a rejected add-to-cart must be seen, not swallowed. */
.arkan-toast--error {
  background: var(--err);
}

.arkan-toast--error .arkan-toast__icon {
  display: none;
}

.arkan-toast__text {
  font-family: var(--sans);
  font-size: 12.5px;
  font-weight: 400;
  letter-spacing: 0.03em;
}

/* ------------------------------- Scroll to top ------------------------------- */
.arkan-scroll-top {
  position: fixed;
  bottom: 30px;
  right: 30px;
  z-index: 999;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  background: var(--burgundy);
  border: none;
  color: #fff;
  cursor: pointer;
  display: none;
  align-items: center;
  justify-content: center;
  box-shadow: 0 6px 22px rgba(0, 0, 0, 0.22);
}

.arkan-scroll-top.is-visible {
  display: flex;
}

/* ---------- Announcement bar (control panel, opt-in) ---------- */
.arkan-announce {
  background: var(--ink);
  color: var(--gold);
}
.arkan-announce__inner {
  max-width: 1280px;
  margin: 0 auto;
  padding: 9px 24px;
  text-align: center;
  font-size: 12.5px;
  letter-spacing: 0.4px;
  line-height: 1.4;
}
/* On the video-hero page the header is a fixed transparent bar; when the
   announcement bar is present, drop the header below it until it solidifies. */
body.arkan-has-announce .arkan-header--hero {
  top: 40px;
}
body.arkan-has-announce .arkan-header--hero.is-solid {
  top: 0;
}
@media (max-width: 600px) {
  .arkan-announce__inner {
    font-size: 11.5px;
    padding: 8px 14px;
  }
}