/* Prime chrome: Casual "Runway Issue" (restricted preview).
   Merchant-controlled inputs: --main-color-one (coral on the demo store), --heading-font (Rubik), --body-font
   (Store Admin › Colors / Typography). Every tint below is derived from them; filled buttons use the main colour
   darkened just enough for white text to reach 4.5:1. Rubik covers Arabic, so it is the Arabic fallback. */
body.casual {
  --sfp-accent: var(--main-color-one, #F83A26);
  --sfp-cta: color-mix(in srgb, var(--main-color-one, #F83A26) 80%, #000);
  --sfp-ink: color-mix(in srgb, var(--heading-color, #1A1A1A) 92%, var(--main-color-one, #F83A26));
  --sfp-blush: color-mix(in srgb, var(--main-color-one, #F83A26) 6%, #ffffff);
  --sfp-blush-2: color-mix(in srgb, var(--main-color-one, #F83A26) 11%, #ffffff);
  --sfp-line: color-mix(in srgb, var(--heading-color, #1A1A1A) 10%, #ffffff);
  --sfp-muted: color-mix(in srgb, var(--heading-color, #1A1A1A) 62%, #ffffff);
  --sfp-font-head: var(--sf-merchant-heading, var(--sf-font-head, var(--heading-font, "Rubik"))), "Rubik", system-ui, sans-serif;
  --sfp-font-body: var(--sf-merchant-body, var(--sf-font-body, var(--body-font, "Roboto"))), "Rubik", system-ui, sans-serif;
  --sfp-logo-h: 38px;
}

.sfp-announce--casual { background: var(--sfp-ink); color: #fff; font: 600 13px/1.5 var(--sfp-font-head); letter-spacing: .01em; }

nav.cs-navbar.sfp-header--casual { background: #fff; color: var(--sfp-ink); border-block-end: 1px solid var(--sfp-line); font-family: var(--sfp-font-body); }
.sfp-header--casual .sfp-header__bar { min-block-size: 78px; }
.sfp-header--casual .sfp-header__nav { justify-content: center; }
.sfp-header--casual .sfp-header__nav .theme-nav-menu > li > a { font: 600 15px/1 var(--sfp-font-head); color: var(--sfp-ink); transition: color var(--sfp-dur) var(--sfp-ease); }
.sfp-header--casual .sfp-header__nav .theme-nav-menu > li > a::after { content: ""; position: absolute; inset-inline-start: 50%; inset-block-end: 4px; inline-size: 6px; block-size: 6px; margin-inline-start: -3px;
  border-radius: 50%; background: var(--sfp-accent); transform: scale(0); transition: transform var(--sfp-dur) var(--sfp-ease); }
.sfp-header--casual .sfp-header__nav .theme-nav-menu > li > a:hover { color: var(--sfp-accent); }
.sfp-header--casual .sfp-header__nav .theme-nav-menu > li.current-menu-item > a::after, .sfp-header--casual .sfp-header__nav .theme-nav-menu > li > a:hover::after { transform: scale(1); }
.sfp-header--casual .sfp-header__nav .sub-menu { background: #fff; border-radius: 18px; box-shadow: 0 20px 50px color-mix(in srgb, var(--sfp-ink) 16%, transparent); }
.sfp-header--casual .sfp-header__nav .sub-menu a { font-weight: 500; }
.sfp-header--casual .sfp-header__nav .sub-menu a:hover { background: var(--sfp-blush); color: var(--sfp-accent); }

.sfp-header--casual .sfp-header__search { flex-basis: 260px; background: var(--sfp-blush); border: 1px solid transparent; border-radius: 999px; color: var(--sfp-ink);
  transition: border-color var(--sfp-dur) var(--sfp-ease), background var(--sfp-dur) var(--sfp-ease); }
.sfp-header--casual .sfp-header__search:focus-within { background: #fff; border-color: var(--sfp-accent); box-shadow: var(--sfp-focus); }
.sfp-header--casual .sfp-header__search input { font-size: 14px; padding-inline: 18px 6px; box-shadow: none !important; }
.sfp-header--casual .sfp-header__search button { color: var(--sfp-ink); font-size: 18px; }
.sfp-header--casual .cs-search-dropdown { background: #fff; border-radius: 18px; box-shadow: 0 20px 50px color-mix(in srgb, var(--sfp-ink) 16%, transparent); color: var(--sfp-ink); border: 0; }
.sfp-header--casual .cs-search-dropdown li a:hover { background: var(--sfp-blush); }
.sfp-header--casual .cs-search-dropdown .product-image { border-radius: 12px; }
.sfp-header--casual .cs-search-dropdown .flash-price { color: var(--sfp-cta); font: 700 12px/1.4 var(--sfp-font-head); }
.sfp-header--casual .cs-search-dropdown .flash-old-prices { color: var(--sfp-muted); font-size: 11px; text-decoration: line-through; margin-inline-start: 6px; }
.sfp-search-empty { padding: 14px; font-size: 13px; color: var(--sfp-muted); text-align: center; }

.sfp-header--casual .sfp-header__actions > a { border-radius: 50%; color: var(--sfp-ink); font-size: 21px; transition: background var(--sfp-dur) var(--sfp-ease), color var(--sfp-dur) var(--sfp-ease); }
.sfp-header--casual .sfp-header__actions > a:hover { background: var(--sfp-blush-2); color: var(--sfp-cta); }
.sfp-header--casual .sfp-header__actions .cs-badge { background: var(--sfp-accent); color: #fff; font-family: var(--sfp-font-head); }

/* footer */
.sfp-footer--casual { background: var(--sfp-blush); color: var(--sfp-ink); font: 400 15px/1.7 var(--sfp-font-body); padding-block-start: 72px; overflow: hidden; }
.sfp-csf__grid { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1.4fr); gap: 40px; }
.sfp-csf__brand { display: grid; gap: 14px; align-content: start; }
.sfp-csf__logo-text { font: 900 26px/1 var(--sfp-font-head); color: var(--sfp-ink); }
.sfp-csf__about { margin: 0; color: var(--sfp-muted); max-inline-size: 32ch; }
.sfp-csf__social { display: flex; flex-wrap: wrap; gap: 10px; }
.sfp-csf__social a { display: grid; place-items: center; inline-size: 44px; block-size: 44px; border-radius: 50%; background: #fff; color: var(--sfp-ink); font-size: 18px;
  transition: background var(--sfp-dur) var(--sfp-ease), color var(--sfp-dur) var(--sfp-ease), transform var(--sfp-dur) var(--sfp-ease); }
.sfp-csf__social a:hover { background: var(--sfp-accent); color: #fff; transform: translateY(-2px); }
.sfp-csf__h { margin: 0 0 16px; font: 700 16px/1.3 var(--sfp-font-head); color: var(--sfp-ink); }
.sfp-csf__col ul { display: grid; gap: 2px; }
.sfp-csf__col li a { display: inline-flex; align-items: center; min-block-size: 34px; color: var(--sfp-muted); transition: color var(--sfp-dur) var(--sfp-ease); }
.sfp-csf__col li a:hover { color: var(--sfp-cta); }
.sfp-csf__news-text { margin: 0 0 16px; color: var(--sfp-muted); }
.sfp-csf__form .widget-form-single { display: flex; align-items: center; gap: 6px; background: #fff; border-radius: 999px; padding: 5px; border: 1px solid var(--sfp-line); }
.sfp-csf__form .widget-form-single:focus-within { border-color: var(--sfp-accent); box-shadow: var(--sfp-focus); }
.sfp-csf__form input.cs-footer-email-input { flex: 1 1 auto; min-inline-size: 0; min-block-size: 44px; border: 0 !important; outline: 0; background: transparent !important; box-shadow: none !important;
  padding-inline: 16px; font: 400 14px/1 var(--sfp-font-body); color: var(--sfp-ink); border-radius: 999px; }
.sfp-csf__form button.cs-footer-subscribe-btn { flex: none; min-block-size: 44px; padding-inline: 22px; border: 0; border-radius: 999px; background: var(--sfp-cta); color: #fff;
  font: 700 14px/1 var(--sfp-font-head); cursor: pointer; transition: filter var(--sfp-dur) var(--sfp-ease); margin: 0; }
.sfp-csf__form button.cs-footer-subscribe-btn:hover { filter: brightness(1.08); }
.sfp-csf__form .form-message-show { margin-block-end: 8px; font-size: 13px; }
.sfp-csf__bottom { border-block-start: 1px solid color-mix(in srgb, var(--sfp-ink) 14%, transparent); padding-block: 22px 28px; margin-block-start: 24px; }
.sfp-csf__copy { font-size: 13px; color: var(--sfp-muted); }
.sfp-csf__copy a { color: var(--sfp-ink); }

@media (max-width: 1199.98px) { .sfp-header--casual .sfp-header__search { flex-basis: 200px; } .sfp-csf__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 575.98px) { .sfp-csf__grid { grid-template-columns: minmax(0, 1fr); gap: 32px; } .sfp-footer--casual { padding-block-start: 48px; } }

/* mobile foundation skin (tokens only) */
body.sf-m.sf-m-t-casual {
  --sf-m-header-bg: #fff;
  --sf-m-header-fg: var(--sfp-ink);
  --sf-m-header-line: var(--sfp-line);
  --sf-m-header-line-w: 1px;
  --sf-m-color-accent: var(--sfp-accent);
  --sf-m-drawer-bg: #fff;
  --sf-m-drawer-fg: var(--sfp-ink);
  --sf-m-drawer-line: var(--sfp-line);
  --sf-m-bar-bg: #fff;
  --sf-m-bar-fg: var(--sfp-muted);
  --sf-m-bar-line: var(--sfp-line);
  --sf-m-bar-active: var(--sfp-cta);
  --sf-m-sheet-bg: #fff;
  --sf-m-control-bg: var(--sfp-blush);
  --sf-m-control-line: transparent;
  --sf-m-radius: 16px;
  --sf-m-font: var(--sfp-font-body);
}