/* ==========================================================================
   Egy Comics storefront theme, v1 (Sphinx skeleton, dark + gold)
   --------------------------------------------------------------------------
   HOW TO USE (no code tools needed):
     1. Seller dashboard > Upload assets > upload THIS file > copy the file link.
     2. Seller dashboard > Header code > paste the <link> from header-code.html
        with that link. Save.
   Written with logical properties (start / end), so it follows the store
   language on its own: Arabic = right to left, English = left to right.
   Every selector was checked against the live Sphinx theme on 2026-09-19.
   Change colours in section 0 only.
   v1.1 (2026-09-19): home builder wrappers made transparent (section 5).
   v1.2 (2026-09-21): design audit fixes (section 15, plus the cart badge and section
   title rules): content pages, the free-shipping widget and the 404 page were unreadable
   (1.0 to 3.1:1), form borders, tap targets and small text. v1.3 (same day): spacing
   between paragraphs and headings on content pages. v1.4 (2026-09-21): checkout payment
   details card (section 16); v1.5 (same day): that card became a payment-method dropdown.
   Record:
   02_Marketing/Website/2026-09-21_Storefront_Design_and_UX_Audit.md
   Check what is live with: python automation/scripts/eo_storefront_check.py
   ========================================================================== */

/* 0. Tokens ----------------------------------------------------------------*/
:root {
  --egc-ink: #0a0b11;
  --egc-panel: #161927;
  --egc-panel-2: #1e2235;
  --egc-line: #2c3148;
  --egc-text: #eceef6;
  --egc-muted: #a6abc0;
  --egc-gold: #ffd700;
  --egc-on-gold: #0a0b11;
  --egc-red: #f2453d;
  --egc-red-solid: #d0312b; /* white text on it: 5.05:1 (the #f2453d red gave 3.69:1) */
  --egc-danger: #ff7b73; /* error and delete text on the dark panels: 6.9:1 */
  --egc-field: #656d8e; /* form field borders: 3.4:1 on the panel (WCAG 1.4.11 asks for 3:1) */
  --egc-cyan: #3fd2e8;
  --egc-wa: #25d366;
  --egc-r: 12px;
  --egc-r-lg: 18px;
  --egc-head: "Cairo", "Segoe UI", Tahoma, sans-serif;
  --egc-body: "IBM Plex Sans Arabic", "Cairo", "Segoe UI", Tahoma, sans-serif;
  --egc-num: "Bebas Neue", "Cairo", Impact, sans-serif;
  color-scheme: dark;
}
/* The theme paints buttons, links and focus rings from these two variables
   (R, G, B). Point them at gold with dark text, so every native piece follows.
   Set the same colours in Theme settings (primary #FFD700) so both agree. */
html:root {
  --color-primary: 255, 215, 0;
  --color-a11y: 10, 11, 17;
}

/* 1. Base ------------------------------------------------------------------*/
html,
body {
  background: var(--egc-ink) !important;
  color: var(--egc-text);
}
body,
body .app_container {
  color: var(--egc-text);
}
body {
  font-family: var(--egc-body);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
/* Arabic letters must stay joined: never add tracking to them. */
body [class*="tracking-"] {
  letter-spacing: normal !important;
}
::selection {
  background: var(--egc-gold);
  color: var(--egc-on-gold);
}
/* The theme forces one font on every text element; replace it. */
body :is(span, strong, em, a, p, li, label, input, textarea, select, dd, dt, summary, small, div) {
  font-family: var(--egc-body);
}
body :is(h1, h2, h3, h4, h5, h6) {
  font-family: var(--egc-head);
  font-weight: 800;
  line-height: 1.3;
  text-wrap: balance;
}
/* Some theme buttons carry an inline font-family, so this one needs !important. */
body button {
  font-family: var(--egc-head) !important;
}
body :is(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
  outline: 2px solid var(--egc-gold);
  outline-offset: 2px;
}

/* Theme greys and whites, remapped once so every native component turns dark. */
body .bg-white,
body .bg-gray-50,
body .bg-gray-100,
body .bg-white\/80,
body .bg-white\/90 {
  background-color: var(--egc-panel);
}
/* Tailwind gives every border a light grey unless a colour class is set. */
body *,
body *::before,
body *::after {
  border-color: var(--egc-line);
}
/* Pop-ups (quick view, cart drawer) sit outside the app container. */
body [role="dialog"],
body #headlessui-portal-root {
  color: var(--egc-text);
}
body [data-product-preview="close-button"] {
  background-color: rgba(22, 25, 39, 0.88);
  color: var(--egc-text);
  border-color: var(--egc-line);
}
body [data-product-preview="close-button"] svg {
  color: var(--egc-text);
}
/* price in the quick-view sheet */
body [role="dialog"] span[class*="md:text-[32px]"] {
  color: var(--egc-gold);
  font-family: var(--egc-num);
  font-size: 36px;
  line-height: 1;
}
body .bg-gray-200,
body .bg-gray-300 {
  background-color: var(--egc-panel-2);
}
body :is(.text-gray-900, .text-gray-800, .text-black, .text-heading),
body :is([class~="text-[#010101]"], [class~="text-[#202227]"], [class~="text-[#131316]"], [class~="text-[#09090B]"]) {
  color: var(--egc-text);
}
body :is(.text-gray-700, .text-gray-600, .text-gray-500, .text-gray-400),
body :is([class~="text-[#61758A]"], [class~="text-[#778399]"]) {
  color: var(--egc-muted);
}
body :is(.border-gray-100, .border-gray-200, .border-gray-300),
body :is([class~="border-[#E2E2E2]"], [class~="border-[#EBEBEB]"], [class~="border-[#00000014]"]) {
  border-color: var(--egc-line);
}
body :is(.divide-gray-200) > :not([hidden]) ~ :not([hidden]) {
  border-color: var(--egc-line);
}
body [class*="hover:bg-gray"]:hover {
  background-color: var(--egc-panel-2);
}
body .shadow-md,
body .shadow-xl {
  --tw-shadow-color: rgba(0, 0, 0, 0.55);
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.55);
}

/* 2. Announcement bar (theme setting "Top header text", or the fallback block) */
.egc-announce,
.sphinx_header_top_text {
  background: var(--egc-gold);
  color: var(--egc-on-gold) !important;
  text-align: center;
  font-weight: 700;
  font-size: 13px;
  padding: 8px 14px;
}
.egc-announce a,
.sphinx_header_top_text * {
  color: inherit !important;
}

/* 3. Header ----------------------------------------------------------------*/
body .sphinx_header {
  background: var(--egc-ink);
  border-bottom: 1px solid var(--egc-line);
}
body .sphinx_header_container.bg-skin-primary,
body .sphinx_header_container {
  background: var(--egc-ink);
}
.sphinx_header_logo img {
  max-height: 46px;
  width: auto;
  object-fit: contain;
}
.sphinx_header_container input {
  background: var(--egc-panel) !important;
  color: var(--egc-text) !important;
  border: 1px solid var(--egc-line) !important;
  border-radius: var(--egc-r) !important;
  padding-inline: 14px 48px;
}
.sphinx_header_container input::placeholder {
  color: var(--egc-muted);
  opacity: 1;
}
.sphinx_header_container input:focus {
  border-color: var(--egc-gold) !important;
  box-shadow: 0 0 0 3px rgba(255, 215, 0, 0.18);
}
/* search button: gold, sits at the end of the field */
.sphinx_header_container button.bg-skin-primary {
  background: var(--egc-gold) !important;
  color: var(--egc-on-gold) !important;
  inset-inline-end: 6px !important;
  inset-inline-start: auto !important;
  border-radius: 10px;
}
.sphinx_header_container button.bg-skin-primary svg {
  color: var(--egc-on-gold);
  stroke: currentColor;
}
/* cart button */
.sphinx_header_container button.rounded-full {
  background: var(--egc-panel) !important;
  border: 1px solid var(--egc-line);
  color: var(--egc-gold);
}
.sphinx_header_container button.rounded-full svg {
  color: var(--egc-gold);
  stroke: currentColor;
}
.sphinx_header_container button.rounded-full [class*="bg-[#F44336]"] {
  background: var(--egc-red-solid);
  inset-inline-end: -4px !important;
  inset-inline-start: auto !important;
}
/* search suggestions */
.sphinx_header_container .shadow-md {
  background: var(--egc-panel);
  border: 1px solid var(--egc-line);
  border-radius: var(--egc-r);
}
/* desktop menu */
.sphinx_header_links a {
  color: var(--egc-muted) !important;
  font-family: var(--egc-head);
  font-weight: 700;
  transition: color 0.15s, background 0.15s;
}
.sphinx_header_links a:hover {
  color: var(--egc-gold) !important;
  background: var(--egc-panel) !important;
}

/* 4. Bottom tab bar (phones) ----------------------------------------------*/
body #tabs {
  background: rgba(22, 25, 39, 0.94);
  border: 1px solid var(--egc-line);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  box-shadow: 0 14px 40px rgba(0, 0, 0, 0.55);
}
body #tabs :is(a, button) {
  color: var(--egc-muted);
  font-family: var(--egc-head);
  font-weight: 600;
}
body #tabs :is(a, button):hover,
body #tabs [class~="text-[#010101]"] {
  color: var(--egc-gold);
}
body #tabs svg {
  stroke: currentColor;
}

/* 5. Section titles and page frame ----------------------------------------*/
/* Home builder: the theme paints every section wrapper white with black text
   (emotion class .css-1yrdzub). Found live on 2026-09-19: the start-here and FAQ
   headings sat light-on-white at 1.2:1 contrast. Transparent brings them to 7.7:1. */
body .home_section_container {
  background-color: transparent !important;
  color: var(--egc-text) !important;
}
body .home_section_top_title {
  color: var(--egc-text);
  font-family: var(--egc-head);
  font-weight: 900;
}
body .home_section_top_title::after {
  content: "";
  display: block;
  width: 44px;
  height: 4px;
  margin: 10px auto 0;
  border-radius: 4px;
  background: var(--egc-gold);
}
/* The theme repeats each title as a faint watermark inside the heading (1.1:1). It is
   decorative, invisible and doubles the heading for screen readers, so drop it. */
body .home_section_top_title [class*="text-[#61758A1F]"] {
  display: none;
}

/* 6. Product cards (home, collections, related products) ------------------*/
body .home_grid_section_card {
  background: var(--egc-panel);
  border: 1px solid var(--egc-line);
  border-radius: var(--egc-r-lg);
  box-shadow: none;
  transition: transform 0.18s, border-color 0.18s, box-shadow 0.18s;
}
body .home_grid_section_card:hover {
  transform: translateY(-3px);
  border-color: rgba(255, 215, 0, 0.55);
  box-shadow: 0 14px 36px rgba(0, 0, 0, 0.5);
}
body .home_grid_section_card img {
  border-radius: 10px;
}
body .home_grid_section_card h2 {
  color: var(--egc-text);
  font-size: 15px;
  line-height: 1.4;
  font-weight: 700;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  min-height: 2.8em;
}
body .home_grid_section_card h2 + div {
  margin-block: 10px 12px;
}
body .home_grid_section_card h2 + div > span {
  color: var(--egc-gold);
  font-family: var(--egc-num);
  font-size: 26px;
  letter-spacing: 0.02em;
  line-height: 1;
}
body .home_grid_section_card h2 + div span span {
  font-family: var(--egc-head);
  font-size: 12px;
  color: var(--egc-muted);
  margin-inline-start: 4px;
}
body .home_grid_section_card .line-through {
  color: var(--egc-muted) !important;
  font-size: 0.8em;
}
/* card button: quiet outline so the product page keeps the loud CTA */
body .sphinx_product_card_btn {
  background: transparent !important;
  color: var(--egc-gold) !important;
  border: 1.5px solid var(--egc-gold) !important;
  border-radius: var(--egc-r) !important;
  font-weight: 800;
}
body .sphinx_product_card_btn:hover {
  background: var(--egc-gold) !important;
  color: var(--egc-on-gold) !important;
}

/* 7. Collection page -------------------------------------------------------*/
body .category_section_header_title {
  color: var(--egc-text);
  font-family: var(--egc-head);
  font-weight: 900;
  font-size: clamp(24px, 5vw, 34px);
}
body .category_section_header button,
body [id^="headlessui-listbox-button"] {
  background: var(--egc-panel);
  color: var(--egc-text);
  border: 1px solid var(--egc-line);
  border-radius: var(--egc-r);
}
body [role="listbox"] {
  background: var(--egc-panel);
  border: 1px solid var(--egc-line);
  border-radius: var(--egc-r);
}
body [role="option"] {
  color: var(--egc-text);
}
body [role="option"][data-headlessui-state~="active"] {
  background: var(--egc-panel-2);
  color: var(--egc-gold);
}
/* Category "content" (SEO intro, edited in Categories) */
body .ql-editor {
  color: var(--egc-text);
  padding-inline: 0;
}
body .ql-editor a {
  color: var(--egc-gold);
}

/* 8. Product page ----------------------------------------------------------*/
/* The theme sets the title colour and size with !important, so this must too. */
body h1.product_name {
  color: var(--egc-text) !important;
  font-family: var(--egc-head);
  font-weight: 900;
  font-size: clamp(22px, 5.4vw, 30px) !important;
  line-height: 1.35;
}
body .product_container #sale-price,
body .product_price {
  color: var(--egc-gold);
  font-family: var(--egc-num);
  font-size: 40px;
  line-height: 1;
  letter-spacing: 0.02em;
}
body .product_price > span,
body .product_container #sale-price + span {
  color: var(--egc-muted);
  font-family: var(--egc-head);
  font-size: 15px;
}
body .product_container .line-through {
  color: var(--egc-muted);
}
body .checkout_btn,
body .form_checkout_btn,
body .checkout_buy_now {
  background: var(--egc-gold) !important;
  color: var(--egc-on-gold) !important;
  border: 0 !important;
  border-radius: var(--egc-r) !important;
  font-weight: 900;
  font-size: 17px;
  min-height: 52px;
  box-shadow: 0 10px 28px rgba(255, 215, 0, 0.2);
}
body .checkout_btn:hover,
body .form_checkout_btn:hover,
body .checkout_buy_now:hover {
  filter: brightness(1.06);
}
body .add_to_cart_btn {
  background: transparent !important;
  color: var(--egc-gold) !important;
  border: 1.5px solid var(--egc-gold) !important;
  border-radius: var(--egc-r) !important;
  font-weight: 800;
  min-height: 52px;
}
body .add_to_cart_btn:hover {
  background: rgba(255, 215, 0, 0.1) !important;
}
body .sphinx_product_img,
body .p_gallery_container .swiper,
body .p_gallery_container .swiper-slide img {
  border-radius: var(--egc-r-lg);
}
body .p_gallery_container .swiper {
  background: var(--egc-panel);
  border: 1px solid var(--egc-line);
}
/* Description: the products carry their own light-theme <style>; win over it. */
body .product_description .product-description-hq {
  color: var(--egc-text);
  font-family: var(--egc-body);
}
body .product_description .product-description-hq h3 {
  color: var(--egc-gold);
  border-bottom: 2px solid var(--egc-gold);
  font-family: var(--egc-head);
  font-size: 20px;
}
body .product_description .product-description-hq h4 {
  color: var(--egc-text);
  font-family: var(--egc-head);
}
body .product_description .specs-box,
body .product_description .variants-box {
  background: var(--egc-panel);
  border: 1px solid var(--egc-line);
  border-inline-start: 4px solid var(--egc-gold);
  border-radius: 10px;
}
body .product_description .hq-guarantee {
  background: rgba(255, 215, 0, 0.08);
  color: var(--egc-text);
  border: 1px dashed rgba(255, 215, 0, 0.6);
  border-radius: 10px;
}
body .product_description li,
body .product_description p {
  color: inherit;
}
/* Variation choices (Soft Cover / Hard Cover) */
body .product_container :is(button, label)[class*="border"] {
  border-color: var(--egc-line);
}

/* 9. Cart drawer (slide-in panel) -----------------------------------------*/
body [role="dialog"] [id^="headlessui-dialog-overlay"],
body [role="dialog"] .bg-gray-500 {
  background-color: rgba(5, 6, 10, 0.72);
}
body [role="dialog"] .bg-white {
  background-color: var(--egc-panel);
}
body [role="dialog"] h2 {
  color: var(--egc-text);
  font-weight: 900;
}
body [role="dialog"] li.cart-item a {
  border-color: var(--egc-line);
  border-radius: 10px;
}
body [role="dialog"] li.cart-item .text-gray-900,
body [role="dialog"] li.cart-item [class*="text-gray"] {
  color: var(--egc-text);
}
body [role="dialog"] :is(.cart-item-quantity-counter, [class*="rounded-md"][class*="border"]) {
  border-color: var(--egc-line);
  color: var(--egc-text);
}
body [role="dialog"] button.text-skin-primary {
  color: var(--egc-gold);
}
body [role="dialog"] button[class*="bg-skin-primary"],
body [role="dialog"] .mt-6 > button:first-child {
  background: var(--egc-gold) !important;
  color: var(--egc-on-gold) !important;
  border-radius: var(--egc-r) !important;
  font-weight: 900;
  min-height: 52px;
}

/* 10. Checkout -------------------------------------------------------------*/
body .checkout_bg_right {
  background: var(--egc-ink);
}
body .checkout_bg_left {
  background: var(--egc-panel);
}
body .checkout_order_summary {
  background: var(--egc-panel);
  border-radius: var(--egc-r-lg);
}
body .checkout_order_summary :is(dt, dd, span, p, h2) {
  color: inherit;
}
body .checkout_order_summary dt {
  color: var(--egc-muted);
}
body .checkout_cart_items_container li.cart-item a {
  border-color: var(--egc-line);
  border-radius: 10px;
}
body .checkout_form h2 {
  color: var(--egc-text);
  font-weight: 900;
}
body .global_input,
body .global_textarea {
  background: var(--egc-panel-2) !important;
  color: var(--egc-text) !important;
  border: 1px solid var(--egc-line) !important;
  border-radius: var(--egc-r) !important;
  min-height: 50px;
  font-size: 16px;
}
body .global_input::placeholder,
body .global_textarea::placeholder {
  color: var(--egc-muted);
  opacity: 1;
}
body .global_input:focus,
body .global_textarea:focus {
  border-color: var(--egc-gold) !important;
  box-shadow: 0 0 0 3px rgba(255, 215, 0, 0.18) !important;
}
body .gov_select .select__control {
  background: var(--egc-panel-2);
  border: 1px solid var(--egc-line);
  border-radius: var(--egc-r);
  min-height: 50px;
  box-shadow: none;
}
body .gov_select .select__control--is-focused {
  border-color: var(--egc-gold);
}
body .gov_select .select__single-value,
body .gov_select .select__input-container,
body .gov_select input {
  color: var(--egc-text) !important;
}
body .gov_select .select__placeholder {
  color: var(--egc-muted);
}
body .gov_select .select__menu {
  background: var(--egc-panel);
  border: 1px solid var(--egc-line);
  border-radius: var(--egc-r);
}
body .gov_select .select__option {
  background: transparent;
  color: var(--egc-text);
}
body .gov_select .select__option--is-focused,
body .gov_select .select__option--is-selected {
  background: var(--egc-panel-2);
  color: var(--egc-gold);
}
/* the sticky "Buy now" bar on the checkout page */
body .checkout_form .fixed.bottom-0 {
  background: rgba(10, 11, 17, 0.94);
  border-top: 1px solid var(--egc-line);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
body .checkout_form .fixed.bottom-0 button {
  background: var(--egc-gold) !important;
  color: var(--egc-on-gold) !important;
  border-radius: var(--egc-r) !important;
  font-weight: 900;
  min-height: 52px;
}
/* payment method cards (appear once a gateway is added) */
body .payment_card,
body .payments_container [class*="rounded"] {
  background: var(--egc-panel);
  border-color: var(--egc-line);
}

/* 11. Thank-you page -------------------------------------------------------*/
body .thanks_container,
body .thanks_content,
body .order_invoice_container {
  background: var(--egc-panel);
  color: var(--egc-text);
  border: 1px solid var(--egc-line);
  border-radius: var(--egc-r-lg);
}

/* 12. Footer ---------------------------------------------------------------*/
body footer {
  background: var(--egc-panel);
  border-top: 1px solid var(--egc-line);
  color: var(--egc-text);
}
body footer a {
  color: var(--egc-muted);
}
body footer a:hover {
  color: var(--egc-gold);
}
body footer h3 {
  color: var(--egc-text);
  font-family: var(--egc-head);
  font-weight: 800;
}
body footer a.rounded-full {
  background: var(--egc-panel-2) !important;
  color: var(--egc-gold) !important;
  border: 1px solid var(--egc-line);
}

/* 13. Custom blocks (Home builder "HTML" sections and UI blocks) ----------*/
.egc {
  color: var(--egc-text);
  font-family: var(--egc-body);
  line-height: 1.7;
  box-sizing: border-box;
}
.egc *,
.egc *::before,
.egc *::after {
  box-sizing: inherit;
}
.egc a {
  text-decoration: none;
}
.egc-sec {
  margin-block: 0 clamp(28px, 6vw, 56px);
}
/* full-width slots (above the footer) need the same gutters as the page */
.egc-wrap {
  max-width: 80rem;
  margin-inline: auto;
  margin-block-end: 24px;
  padding-inline: 16px;
}
.egc-eyebrow {
  display: block;
  margin: 0 0 8px;
  color: var(--egc-gold);
  font: 800 12px/1.2 var(--egc-head);
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.egc-h2 {
  margin: 0 0 8px;
  color: var(--egc-text);
  font: 900 clamp(22px, 4.6vw, 32px) / 1.3 var(--egc-head);
}
.egc-lead {
  margin: 0 0 20px;
  color: var(--egc-muted);
  font-size: 16px;
  max-width: 62ch;
}
.egc-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 48px;
  padding: 0 18px;
  border: 1.5px solid transparent;
  border-radius: var(--egc-r);
  font: 800 16px/1 var(--egc-head);
  cursor: pointer;
  transition: transform 0.15s, filter 0.15s, background 0.15s;
}
.egc-btn:hover {
  transform: translateY(-1px);
  filter: brightness(1.06);
}
.egc-btn--gold {
  background: var(--egc-gold);
  color: var(--egc-on-gold) !important;
  box-shadow: 0 10px 28px rgba(255, 215, 0, 0.2);
}
.egc-btn--ghost {
  background: rgba(255, 255, 255, 0.03);
  border-color: var(--egc-line);
  color: var(--egc-text) !important;
}
.egc-btn--wa {
  background: var(--egc-wa);
  color: #06170d !important;
}
.egc-btn svg {
  width: 20px;
  height: 20px;
  flex: none;
}

/* hero */
.egc-hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding: clamp(24px, 5vw, 56px);
  border: 1px solid var(--egc-line);
  border-radius: 22px;
  background: radial-gradient(120% 90% at 100% 0, rgba(255, 215, 0, 0.16), transparent 55%),
    linear-gradient(160deg, #141833 0%, #0a0b11 64%);
}
.egc-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: radial-gradient(circle, rgba(255, 215, 0, 0.18) 1.3px, transparent 1.8px) 0 0 / 16px 16px;
  -webkit-mask-image: linear-gradient(to bottom, #000, transparent 75%);
  mask-image: linear-gradient(to bottom, #000, transparent 75%);
}
.egc-hero h1 {
  margin: 0 0 12px;
  color: var(--egc-text);
  font: 900 clamp(28px, 7.2vw, 54px) / 1.18 var(--egc-head);
  max-width: 18ch;
}
.egc-hero h1 mark {
  background: none;
  color: var(--egc-gold);
}
.egc-hero p {
  margin: 0 0 22px;
  color: var(--egc-muted);
  font-size: clamp(15px, 2.6vw, 18px);
  max-width: 52ch;
}
.egc-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

/* trust row */
.egc-trust {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 12px;
}
.egc-trust > div {
  padding: 16px;
  background: var(--egc-panel);
  border: 1px solid var(--egc-line);
  border-radius: 14px;
}
.egc-trust svg {
  display: block;
  width: 28px;
  height: 28px;
  margin-bottom: 10px;
  color: var(--egc-gold);
  stroke: currentColor;
  fill: none;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.egc-trust strong {
  display: block;
  color: var(--egc-text);
  font: 800 15px/1.4 var(--egc-head);
}
.egc-trust span {
  display: block;
  color: var(--egc-muted);
  font-size: 13px;
}

/* start-here doors */
.egc-doors {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 14px;
}
.egc-door {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 20px;
  background: var(--egc-panel);
  border: 1px solid var(--egc-line);
  border-radius: var(--egc-r-lg);
  color: var(--egc-text) !important;
  transition: transform 0.18s, border-color 0.18s;
}
.egc-door:hover {
  transform: translateY(-3px);
  border-color: rgba(255, 215, 0, 0.6);
}
.egc-door b {
  font: 900 20px/1.3 var(--egc-head);
}
.egc-door span {
  color: var(--egc-muted);
  font-size: 14px;
}
.egc-door em {
  margin-top: auto;
  padding-top: 8px;
  color: var(--egc-gold);
  font: 800 14px/1 var(--egc-head);
  font-style: normal;
}

/* FAQ */
.egc-faq details {
  margin-block: 10px;
  background: var(--egc-panel);
  border: 1px solid var(--egc-line);
  border-radius: 14px;
}
.egc-faq summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 16px 18px;
  color: var(--egc-text);
  font: 800 16px/1.5 var(--egc-head);
  cursor: pointer;
  list-style: none;
}
.egc-faq summary::-webkit-details-marker {
  display: none;
}
.egc-faq summary::after {
  content: "+";
  flex: none;
  color: var(--egc-gold);
  font-size: 22px;
  line-height: 1;
}
.egc-faq details[open] summary::after {
  content: "\2013";
}
.egc-faq details p {
  margin: 0;
  padding: 0 18px 16px;
  color: var(--egc-muted);
}

/* squad / alerts band */
.egc-squad {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: clamp(20px, 4vw, 32px);
  background: linear-gradient(135deg, rgba(255, 215, 0, 0.1), rgba(63, 210, 232, 0.06));
  border: 1px solid rgba(255, 215, 0, 0.35);
  border-radius: var(--egc-r-lg);
}
.egc-squad b {
  display: block;
  font: 900 20px/1.4 var(--egc-head);
}
.egc-squad span {
  color: var(--egc-muted);
}

/* product page: compact chips under the gallery */
.egc-chips {
  display: flex;
  gap: 8px;
  padding-block: 4px;
  overflow-x: auto;
  scrollbar-width: none;
}
.egc-chips::-webkit-scrollbar {
  display: none;
}
.egc-chips span {
  flex: none;
  padding: 8px 14px;
  background: var(--egc-panel);
  border: 1px solid var(--egc-line);
  border-radius: 999px;
  color: var(--egc-text);
  font: 700 13px/1.2 var(--egc-head);
  white-space: nowrap;
}
.egc-chips span i {
  color: var(--egc-gold);
  font-style: normal;
}

/* checkout notes */
.egc-note {
  margin: 0 0 16px;
  padding: 14px 16px;
  background: rgba(255, 215, 0, 0.08);
  border: 1px dashed rgba(255, 215, 0, 0.55);
  border-radius: var(--egc-r);
  color: var(--egc-text);
  font-size: 15px;
}
.egc-note strong {
  color: var(--egc-gold);
}
.egc-help {
  margin: 18px 0 8px;
  color: var(--egc-muted);
  font-size: 15px;
  text-align: center;
}
.egc-help a {
  color: var(--egc-gold);
  font-weight: 800;
}

/* category intro (Categories > content) */
.egc-cat {
  margin-block: 0 24px;
  padding: 18px 20px;
  background: var(--egc-panel);
  border: 1px solid var(--egc-line);
  border-radius: var(--egc-r-lg);
}
.egc-cat h2 {
  margin: 0 0 6px;
  font: 800 18px/1.4 var(--egc-head);
  color: var(--egc-text);
}
.egc-cat p {
  margin: 0 0 10px;
  color: var(--egc-muted);
}
.egc-cat nav {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.egc-cat nav a {
  padding: 6px 12px;
  border: 1px solid var(--egc-line);
  border-radius: 999px;
  color: var(--egc-gold);
  font: 700 13px/1.3 var(--egc-head);
}
.egc-cat nav a:hover {
  border-color: var(--egc-gold);
}

/* floating WhatsApp button (lives in the below_footer block) */
.egc-wa {
  position: fixed;
  inset-inline-end: 16px;
  bottom: 92px;
  z-index: 30;
  display: grid;
  place-items: center;
  width: 50px;
  height: 50px;
  background: var(--egc-wa);
  border-radius: 50%;
  color: #06170d;
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.5);
  transition: transform 0.15s;
}
.egc-wa:hover {
  transform: scale(1.06);
}
.egc-wa svg {
  width: 28px;
  height: 28px;
}
@media (min-width: 1024px) {
  .egc-wa {
    bottom: 24px;
  }
}
/* hide it where a fixed buy bar already sits at the bottom */
body:has(.checkout_form) .egc-wa,
body:has(.checkout_form) .egc-hide-checkout {
  display: none;
}
/* Blocks arrive after the page loads. Reserve the room under the product
   gallery so the details column doesn't jump (protects the layout-shift score). */
.p_gallery_container > div:last-child {
  min-height: 50px;
}

/* footer strip (below_footer block) */
.egc-bottom {
  padding: 14px 16px 92px;
  background: var(--egc-ink);
  border-top: 1px solid var(--egc-line);
  color: var(--egc-muted);
  font-size: 13px;
  text-align: center;
}
@media (min-width: 1024px) {
  .egc-bottom {
    padding-bottom: 18px;
  }
}

/* 14. Motion and print ------------------------------------------------------*/
@media (prefers-reduced-motion: reduce) {
  * {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}
@media print {
  .egc-wa,
  #tabs {
    display: none !important;
  }
}

/* 15. Design audit fixes, 2026-09-21 ---------------------------------------
   Each rule answers one measured problem. Ratios are WCAG 2.x contrast. */

/* 15.1 Content pages (Store Design > Pages: about, shipping, returns, FAQ, contact).
   The typography plugin paints headings and bold text #111827, 1.02:1 on the dark
   panel, so headings and key phrases were invisible. */
body .prose {
  --tw-prose-body: var(--egc-text);
  --tw-prose-headings: var(--egc-text);
  --tw-prose-lead: var(--egc-muted);
  --tw-prose-links: var(--egc-gold);
  --tw-prose-bold: var(--egc-text);
  --tw-prose-counters: var(--egc-muted);
  --tw-prose-bullets: var(--egc-gold);
  --tw-prose-hr: var(--egc-line);
  --tw-prose-quotes: var(--egc-text);
  --tw-prose-quote-borders: var(--egc-gold);
  --tw-prose-captions: var(--egc-muted);
  --tw-prose-code: var(--egc-text);
  --tw-prose-th-borders: var(--egc-line);
  --tw-prose-td-borders: var(--egc-line);
}

/* 15.2 Free-shipping and suggested-collections widget. On the product and checkout
   pages it sits outside the cart drawer, and its #202223 text and buttons landed on
   the dark panel (1.09:1). Header code carries the same fix for the drawer only. */
body div.bg-white:has(> div > .min_value_carousel) [class*="text-[#202223]"] {
  color: var(--egc-gold);
}
body div.bg-white:has(> div > .min_value_carousel) [class*="bg-[#c5d2de]"] {
  background: var(--egc-line);
}
body div.bg-white:has(> div > .min_value_carousel) [class*="bg-[#202223]"] {
  background: var(--egc-gold);
}
body div.bg-white:has(> div > .min_value_carousel) .text-xs {
  font-size: 13px;
}
body div.bg-white:has(> div > .min_value_carousel) button.w-full {
  min-height: 44px;
}
body :is(.min_value_swiper_button_prev, .min_value_swiper_button_next) {
  color: var(--egc-muted);
  min-width: 40px;
  min-height: 40px;
}

/* 15.3 Leftover default colours. The 404 page used indigo (3.1:1, off brand); error
   and delete text used red (3.6:1). */
body :is(.text-indigo-500, .text-indigo-600, .text-blue-500, .text-blue-600),
body :is(.hover\:text-indigo-500, .hover\:text-blue-500):hover {
  color: var(--egc-gold);
}
body :is(.text-red-500, .text-red-600, .text-red-700) {
  color: var(--egc-danger);
}

/* 15.4 Form fields: borders reach 3:1 so the fields stay visible in daylight
   (WCAG 1.4.11). Focus keeps the gold ring from sections 3 and 10. */
.sphinx_header_container input,
body .global_input,
body .global_textarea {
  border-color: var(--egc-field) !important;
}
body .gov_select .select__control:not(.select__control--is-focused) {
  border-color: var(--egc-field);
}

/* 15.5 Tap targets: 40 to 44 px for the controls used most with a thumb. */
.sphinx_header_container button[class*="p-2.5"] {
  min-width: 44px;
  min-height: 44px;
}
.sphinx_header_container button.bg-skin-primary {
  min-width: 40px;
  min-height: 40px;
}
li.cart-item .cart-item-quantity-counter button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 40px;
  min-height: 40px;
}
body [id^="headlessui-listbox-button"] {
  min-height: 44px;
}
body footer a.w-10 {
  width: 44px;
  height: 44px;
}

/* 15.6 Small text: Arabic reads small at 12 px, so supporting text starts at 13 px. */
body .egc-pay span,
body .home_grid_section_card h2 + div span span {
  font-size: 13px;
}

/* 15.7 Collection intros: the chips show the category names as saved (some are lowercase). */
.egc-cat nav a {
  text-transform: capitalize;
}

/* 15.8 Phones: keep the footer text clear of the floating WhatsApp button, and keep
   the phone number on one line. */
@media (max-width: 767px) {
  .egc-bottom {
    padding-inline: 72px;
  }
}
.egc-bottom bdi {
  white-space: nowrap;
}

/* 15.9 Content pages: the editor resets every margin, so paragraphs and headings touched
   (0 px between them). Give them room. */
body .page_content .ql-editor > * + * {
  margin-block-start: 0.9em;
}
body .page_content .ql-editor > h3 {
  margin-block-start: 1.6em;
}
body .page_content .ql-editor > h3 + * {
  margin-block-start: 0.4em;
}
body .page_content .ql-editor > :first-child {
  margin-block-start: 0;
}

/* 16. Checkout: payment-method dropdown (UI block above_checkout, 2026-09-21) -
   A real <select> ("طريقة الدفع"). Cash on delivery is the default; the three "تحويل" options show
   that method's transfer details. The block carries data-egc-pay-now="<option value>": the script in
   Header code updates it when the select changes, and the rules below show the matching panel.
   Without the script the block stays on cash on delivery. The copy buttons use data-egc-copy
   (same script). */
.egc-paypick {
  margin: 0 0 16px;
  padding: 14px 16px 16px;
  background: var(--egc-panel);
  border: 1px solid var(--egc-line);
  border-radius: var(--egc-r-lg);
}
.egc-paypick-label {
  display: block;
  margin: 0 0 8px;
  color: var(--egc-text);
  font: 800 16px/1.4 var(--egc-head);
}
.egc-paypick-field {
  position: relative;
}
.egc-paypick-field::after {
  content: "";
  position: absolute;
  inset-inline-end: 16px;
  inset-block-start: 50%;
  width: 14px;
  height: 9px;
  margin-block-start: -4px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='9' viewBox='0 0 14 9'%3E%3Cpath d='M1 1l6 6 6-6' fill='none' stroke='%23ffd700' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")
    no-repeat center;
  pointer-events: none;
}
.egc-paypick-select {
  display: block;
  width: 100%;
  min-height: 54px;
  margin: 0;
  padding-block: 0;
  padding-inline: 16px 44px;
  background-color: var(--egc-panel-2);
  border: 1px solid var(--egc-field);
  border-radius: var(--egc-r);
  color: var(--egc-text);
  font: 600 16px/1.4 var(--egc-body);
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
}
.egc-paypick-select:focus {
  border-color: var(--egc-gold);
}
.egc-paypick-select option {
  background: var(--egc-panel);
  color: var(--egc-text);
}
.egc-paypanels {
  margin-block-start: 12px;
}
.egc-paypanel,
.egc-payfoot {
  display: none;
}
.egc-paypick[data-egc-pay-now="cod"] .egc-paypanel--cod,
.egc-paypick[data-egc-pay-now="instapay"] .egc-paypanel--instapay,
.egc-paypick[data-egc-pay-now="telda"] .egc-paypanel--telda,
.egc-paypick[data-egc-pay-now="wallet"] .egc-paypanel--wallet,
.egc-paypick:not([data-egc-pay-now="cod"]) .egc-payfoot {
  display: block;
}
.egc-paylead {
  margin: 0;
  color: var(--egc-muted);
  font-size: 14px;
  line-height: 1.7;
}
.egc-paylead strong {
  color: var(--egc-text);
}
.egc-payfoot {
  margin-block-start: 12px;
}
.egc-payfoot .egc-paylead {
  margin-block-end: 12px;
}
.egc-paybox {
  display: grid;
  gap: 6px;
  padding: 12px;
  background: var(--egc-panel-2);
  border: 1px solid var(--egc-line);
  border-radius: var(--egc-r);
}
.egc-paylabel {
  color: var(--egc-gold);
  font: 800 15px/1.3 var(--egc-head);
}
.egc-payval {
  display: block;
  color: var(--egc-text);
  font: 600 17px/1.4 var(--egc-body);
  overflow-wrap: anywhere;
}
.egc-paynote {
  display: block;
  color: var(--egc-muted);
  font-size: 14px;
  line-height: 1.6;
}
.egc-payactions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.egc-paypick .egc-btn {
  min-height: 44px;
  padding: 0 14px;
  font-size: 15px;
}
.egc-paypick .egc-btn--wa {
  width: 100%;
}