/* =====================================================================
   Skin "sultan" (Sultan Al Shahla) — black and gold, on top of the
   "dkhoni" layout preset. Header, footer and homepage are su-*; the
   inner pages keep the dkhoni markup and are recoloured through its
   --dk-* tokens below. Scoped to body.skin-sultan.
   ===================================================================== */

body.preset-dkhoni.skin-sultan {
    --su-ink: #0d0907;
    --su-coal: #17110d;
    --su-bark: #221912;
    --su-line: rgba(201, 162, 92, .22);
    --su-gold: #c9a25c;
    --su-gold-hi: #e8cf98;
    --su-gold-lo: #8a6a35;
    --su-cream: #fbf8f2;
    --su-muted: #cfc4b1;
    --su-grad: linear-gradient(135deg, var(--su-gold-hi), var(--su-gold) 50%, var(--su-gold-lo));
    --su-ease: cubic-bezier(.2, .7, .1, 1);
    --su-kufi: "Reem Kufi", "Tajawal", serif;
    --su-latin: "Cormorant Garamond", Georgia, serif;

    /* dkhoni tokens → black and gold for every inner page */
    --dk-bg: var(--su-ink);
    --dk-bg-soft: var(--su-coal);
    --dk-surface: var(--su-coal);
    --dk-text: var(--su-cream);
    --dk-muted: var(--su-muted);
    --dk-line: #3a2c1c;
    --dk-header: var(--su-ink);
    --dk-header-text: var(--su-cream);
    --dk-announce-bg: var(--su-gold);
    --dk-announce-text: var(--su-ink);
    --dk-btn-bg: var(--su-gold);
    --dk-btn-text: var(--su-ink);
    --dk-btn-hover: var(--su-gold-hi);
    --dk-dark: var(--su-ink);
    --dk-sale: #e8967a;
    --dk-badge: var(--su-gold);
    --dk-badge-text: var(--su-ink);
    --dk-stars: var(--su-gold);
    --dk-footer-bg: #080605;
    --dk-footer-text: var(--su-cream);
    --dk-accent: var(--su-gold);
    --dk-gold-1: var(--su-gold-hi);
    --dk-gold-3: var(--su-gold-lo);
    --dk-btn-grad: var(--su-grad);
    --dk-badge-grad: var(--su-grad);
    --dk-announce-grad: linear-gradient(90deg, var(--su-gold-lo), var(--su-gold), var(--su-gold-lo));
    --dk-glow: rgba(201, 162, 92, .45);
    --dk-font: "Tajawal", "Cormorant Garamond", system-ui, sans-serif;
    --dk-font-ar: "Tajawal", system-ui, sans-serif;
    --dk-font-logo: var(--su-kufi);

    /* classic-theme tokens (cart, checkout, account, order pages): text light, surfaces dark */
    --color-black: var(--su-cream);
    --color-dark: var(--su-cream);
    --color-white: var(--su-coal);
    --color-light: var(--su-coal);
    --color-white-dark: var(--su-coal);
    --color-white-lite: var(--su-bark);
    --color-white-transparent: rgba(23, 17, 13, .7);
    --color-gray-lite: #3a2c1c;
    --color-gray-dark-lite: #4a3a26;
    --color-gray-dark: var(--su-muted);
    --color-gray: var(--su-muted);
    --color-border: #3a2c1c;

    background: var(--su-ink);
    color: var(--su-cream);
    font-family: "Tajawal", system-ui, sans-serif;
}

body.skin-sultan .wrapper { background: var(--su-ink); }
body.skin-sultan h1, body.skin-sultan h2, body.skin-sultan h3,
body.skin-sultan h4, body.skin-sultan h5 { font-family: var(--su-kufi); color: inherit; }

/* Inner pages built on the classic theme (cart, checkout, account): dark surfaces, light text. */
body.skin-sultan .breadcrumb, body.skin-sultan .breadcrumb a { color: var(--su-muted); }
body.skin-sultan .form-control,
body.skin-sultan select.form-control,
body.skin-sultan textarea { background: var(--su-coal); color: var(--su-cream); border-color: #3a2c1c; }
body.skin-sultan .form-control:focus { border-color: var(--su-gold); box-shadow: 0 0 0 3px rgba(201, 162, 92, .15); }
body.skin-sultan .form-control::placeholder { color: #9d917f; }
body.skin-sultan .btn-primary,
body.skin-sultan .btn-place-order { background: var(--su-grad) !important; border-color: var(--su-gold) !important; color: var(--su-ink) !important; }
body.skin-sultan .order-summary-wrap,
body.skin-sultan .order-summary,
body.skin-sultan .cart-wrap .order-summary-wrap,
body.skin-sultan .checkout-wrap .checkout-form,
body.skin-sultan .account-wrap .panel,
body.skin-sultan .shamcash-card { background: var(--su-coal) !important; color: var(--su-cream); border-color: var(--su-line) !important; }
body.skin-sultan .shamcash-field code, body.skin-sultan .shamcash-amount { background: var(--su-bark); color: var(--su-cream); }
body.skin-sultan .shamcash-steps { color: #e3dacb; }
body.skin-sultan .shamcash-head h1 { color: var(--su-gold-hi); }
body.skin-sultan .shamcash-badge, body.skin-sultan .shamcash-primary { background: var(--su-grad); color: var(--su-ink); }
body.skin-sultan .shamcash-secondary button { color: var(--su-gold); }

/* Side cart, side menu, search suggestions, dropdowns and modals of the classic theme are white. */
body.skin-sultan .sidebar-cart-wrap,
body.skin-sultan .sidebar-cart-items-wrap,
body.skin-sultan .sidebar-cart-bottom,
body.skin-sultan .sidebar-cart-actions,
body.skin-sultan .sidebar-menu-wrap,
body.skin-sultan .sidebar-menu-wrap .tab-content,
body.skin-sultan .search-suggestions,
body.skin-sultan .dropdown-menu,
body.skin-sultan .modal-content { background: var(--su-coal) !important; color: var(--su-cream) !important; border-color: var(--su-line) !important; }
body.skin-sultan .sidebar-cart-wrap a,
body.skin-sultan .sidebar-menu-wrap a,
body.skin-sultan .search-suggestions a,
body.skin-sultan .dropdown-menu a { color: var(--su-cream); }
body.skin-sultan .sidebar-cart-item,
body.skin-sultan .sidebar-cart-wrap .number-picker,
body.skin-sultan .sidebar-cart-wrap .input-group-quantity,
body.skin-sultan .sidebar-cart-wrap .product-image { background: var(--su-bark) !important; border-color: var(--su-line) !important; color: var(--su-cream) !important; }
body.skin-sultan .sidebar-cart-free-shipping,
body.skin-sultan .sidebar-cart-free-shipping :is(.fs-unlocked, .fs-progress-section, .fs-message),
body.skin-sultan .sidebar-cart-wrap [class*="free-shipping"],
body.skin-sultan .sidebar-cart-wrap [class*="shipping-notice"],
body.skin-sultan .sidebar-cart-wrap .alert { background: rgba(201, 162, 92, .12) !important; color: var(--su-gold-hi) !important; border-color: var(--su-line) !important; }
body.skin-sultan .sidebar-cart-wrap .btn-view-cart { background: transparent !important; border: 1px solid var(--su-gold) !important; color: var(--su-gold-hi) !important; }
body.skin-sultan .sidebar-cart-wrap .btn-primary,
body.skin-sultan .sidebar-cart-wrap .btn-checkout { background: var(--su-grad) !important; border: 0 !important; color: var(--su-ink) !important; }

/* Classic-theme text that is hard-coded near-black (#191919): labels, tabs, quantity buttons. */
body.skin-sultan label,
body.skin-sultan .nav-link,
body.skin-sultan .nav-tabs .nav-link,
body.skin-sultan .btn-number,
body.skin-sultan .table,
body.skin-sultan .table th,
body.skin-sultan .table td,
body.skin-sultan .title,
body.skin-sultan .section-title,
body.skin-sultan .page-title { color: var(--su-cream); }
body.skin-sultan .nav-tabs { border-color: var(--su-line); }
body.skin-sultan .nav-tabs .nav-link.active,
body.skin-sultan .nav-tabs .nav-link:hover { color: var(--su-gold-hi); background: transparent; border-color: var(--su-line) var(--su-line) transparent; }
body.skin-sultan .table { --bs-table-bg: transparent; --bs-table-color: var(--su-cream); border-color: var(--su-line); }
body.skin-sultan .btn-default,
body.skin-sultan .btn-light,
body.skin-sultan .btn-secondary,
body.skin-sultan .dk-btn-light { background: transparent !important; color: var(--su-gold-hi) !important; border: 1px solid var(--su-gold) !important; }
body.skin-sultan .btn-default:hover,
body.skin-sultan .btn-light:hover,
body.skin-sultan .dk-btn-light:hover { background: var(--su-gold) !important; color: var(--su-ink) !important; }
body.skin-sultan .number-picker,
body.skin-sultan .input-group-quantity { background: var(--su-bark); border-color: var(--su-line); color: var(--su-cream); }
body.skin-sultan .gallery-preview-item,
body.skin-sultan .gallery-thumbnail-item,
body.skin-sultan .product-image { background: var(--su-coal) !important; border-color: var(--su-line) !important; }
/* Contact page: the gold info box gets dark text, the form panel a dark surface. */
body.skin-sultan .contact-form-left,
body.skin-sultan .contact-form-left * { color: var(--su-ink) !important; }
body.skin-sultan .contact-form-right,
body.skin-sultan .blog-post-search,
body.skin-sultan .blog-post-search input { background: var(--su-coal) !important; color: var(--su-cream) !important; border-color: var(--su-line) !important; }

/* Account area (dashboard, orders, order details, wishlist, reviews, addresses, profile, downloads). */
body.skin-sultan .account-wrap,
body.skin-sultan .account-wrap :is(h1, h2, h3, h4, h5, h6, p, span, li, td, th, dt, dd, strong, b, label, address) { color: var(--su-cream); }
body.skin-sultan .account-sidebar a { color: var(--su-cream) !important; }
body.skin-sultan .account-sidebar li.active a,
body.skin-sultan .account-sidebar a:hover { color: var(--su-gold-hi) !important; }
body.skin-sultan .account-sidebar li.active,
body.skin-sultan .account-sidebar li:hover { background: rgba(201, 162, 92, .1); }
body.skin-sultan .account-wrap .panel { background: var(--su-coal) !important; border-color: var(--su-line) !important; }
body.skin-sultan .account-wrap .panel-header { background: var(--su-bark) !important; border-color: var(--su-line) !important; }
body.skin-sultan .account-wrap .panel-header :is(h4, h5) { color: var(--su-gold-hi) !important; }
body.skin-sultan .account-wrap .panel-header a { color: var(--su-gold) !important; }
body.skin-sultan .account-wrap .product-name,
body.skin-sultan .account-wrap .product-price,
body.skin-sultan .account-wrap a:not(.btn) { color: var(--su-cream); }
body.skin-sultan .account-wrap :is(.btn-view, .btn-edit-address, .btn-delete-address, .btn-edit) { background: transparent !important; color: var(--su-gold-hi) !important; border: 1px solid var(--su-line) !important; }
body.skin-sultan .account-wrap :is(.btn-view, .btn-edit-address, .btn-delete-address, .btn-edit):hover { border-color: var(--su-gold) !important; }
body.skin-sultan .account-wrap .table > :not(caption) > * > * { background: transparent; color: var(--su-cream); border-color: var(--su-line); }
body.skin-sultan .account-wrap .badge { color: var(--su-ink); }
/* Product page details labels (SKU, categories). */
body.skin-sultan .product-details-info label,
body.skin-sultan .details-info-middle label,
body.skin-sultan .product-details-wrap label { color: var(--su-muted) !important; }

/* Side menu: the white curve image behind the tabs, and the tab bar itself. */
body.skin-sultan .sidebar-menu-curve-background { background-image: none !important; background-color: var(--su-coal) !important; }
body.skin-sultan .sidebar-menu-tab { background: var(--su-bark) !important; border: 0 !important; }
body.skin-sultan .sidebar-menu-tab .nav-link { color: var(--su-cream) !important; }
body.skin-sultan .sidebar-menu-tab .nav-link.active { background: var(--su-gold) !important; color: var(--su-ink) !important; }
body.skin-sultan .sidebar-menu .menu-item,
body.skin-sultan .sidebar-menu a { color: var(--su-cream) !important; }
body.skin-sultan .sidebar-menu a:hover { color: var(--su-gold-hi) !important; }

/* ---------- shared ---------- */
body.skin-sultan [x-cloak] { display: none !important; }
.su-wrap { width: min(1280px, 100% - 48px); margin-inline: auto; }
.su-latin { font-family: var(--su-latin); letter-spacing: .18em; text-transform: uppercase; font-size: 13px; color: var(--su-gold); }
.su-pattern {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='80' height='80' viewBox='0 0 80 80'%3E%3Cg fill='none' stroke='%23c9a25c' stroke-opacity='.10' stroke-width='1'%3E%3Cpath d='M40 6l9.9 24.1L74 40l-24.1 9.9L40 74l-9.9-24.1L6 40l24.1-9.9z'/%3E%3Crect x='22' y='22' width='36' height='36' transform='rotate(45 40 40)'/%3E%3Ccircle cx='40' cy='40' r='6'/%3E%3C/g%3E%3C/svg%3E");
}
.su-btn { display: inline-flex; align-items: center; gap: 10px; height: 54px; padding: 0 30px; border-radius: 999px; font-weight: 700; font-size: 16px; transition: .35s var(--su-ease); text-decoration: none; }
.su-btn-gold { background: var(--su-grad); color: var(--su-ink) !important; box-shadow: 0 10px 40px -10px rgba(201, 162, 92, .7); }
.su-btn-gold:hover { transform: translateY(-2px); box-shadow: 0 18px 50px -10px rgba(201, 162, 92, .85); }
.su-btn-ghost { border: 1px solid rgba(251, 248, 242, .4); color: var(--su-cream) !important; backdrop-filter: blur(6px); }
.su-btn-ghost:hover { border-color: var(--su-gold); color: var(--su-gold-hi) !important; }
body.ltr .su-flip { transform: scaleX(-1); transform-origin: center; }
.su-center { text-align: center; margin-top: 50px; }
.su-reveal { opacity: 0; transform: translateY(36px); transition: 1s var(--su-ease); }
.su-reveal.is-in { opacity: 1; transform: none; }

/* ---------- top bar + header ---------- */
/* One line at a fixed height: the floating homepage header sits right under it (--su-topbar-h). */
body.skin-sultan { --su-topbar-h: 36px; }
.su-topbar { height: var(--su-topbar-h); line-height: var(--su-topbar-h); padding: 0 12px; background: linear-gradient(90deg, var(--su-gold-lo), var(--su-gold), var(--su-gold-lo)); color: var(--su-ink); font-size: 13.5px; font-weight: 500; text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.su-header { z-index: 50; color: var(--su-cream); transition: background .4s, border-color .4s; border-bottom: 1px solid transparent; }
.su-header.is-solid, .su-header.is-open { position: sticky; top: 0; background: rgba(13, 9, 7, .9); backdrop-filter: blur(14px); border-bottom-color: var(--su-line); }
.su-home .su-header.is-floating { position: absolute; inset-inline: 0; top: var(--su-topbar-h); }
.su-home .su-header.is-floating.is-scrolled { position: fixed; top: 0; background: rgba(13, 9, 7, .9); backdrop-filter: blur(14px); border-bottom-color: var(--su-line); }
.su-nav { display: flex; align-items: center; justify-content: space-between; gap: 24px; height: 86px; }
.su-brand { display: flex; align-items: center; }
.su-brand img { height: 60px; width: auto; filter: drop-shadow(0 4px 14px rgba(0, 0, 0, .5)); }
.su-brand-text { font-family: var(--su-kufi); font-size: 26px; font-weight: 700; color: var(--su-gold-hi); }
.su-menu { display: flex; gap: 28px; font-size: 15.5px; }
.su-menu a { position: relative; color: var(--su-cream); opacity: .88; transition: .3s; text-decoration: none; }
.su-menu a:hover { opacity: 1; color: var(--su-gold-hi); }
.su-menu a::after { content: ""; position: absolute; inset-inline: 0; bottom: -6px; height: 1px; background: var(--su-gold); transform: scaleX(0); transition: .35s var(--su-ease); }
.su-menu a:hover::after { transform: scaleX(1); }
.su-tools { display: flex; align-items: center; gap: 10px; }
.su-icon { width: 42px; height: 42px; border-radius: 50%; display: grid; place-items: center; border: 1px solid var(--su-line); color: var(--su-cream); position: relative; background: none; transition: .3s; }
.su-icon:hover { border-color: var(--su-gold); color: var(--su-gold-hi); }
.su-icon svg { width: 19px; height: 19px; }
.su-badge { position: absolute; top: -3px; inset-inline-end: -3px; background: var(--su-gold); color: var(--su-ink); font-size: 11px; font-weight: 700; min-width: 19px; height: 19px; border-radius: 999px; display: grid; place-items: center; padding: 0 4px; }
.su-burger { display: none; }
.su-lang { position: relative; }
.su-lang-btn { display: flex; align-items: center; gap: 8px; border: 1px solid var(--su-line); border-radius: 999px; padding: 5px 12px 5px 6px; font-size: 13px; font-weight: 700; color: var(--su-cream); background: none; }
.su-lang-flag { width: 24px; height: 24px; flex: none; border-radius: 50%; overflow: hidden; display: block; box-shadow: 0 0 0 1px rgba(201, 162, 92, .55); background: var(--su-coal); }
.su-lang-flag .su-flag { width: 100%; height: 100%; display: block; }
.su-flag-text { display: grid; place-items: center; font-size: 10px; color: var(--su-cream); }
.su-lang-menu { position: absolute; top: calc(100% + 8px); inset-inline-end: 0; min-width: 170px; background: var(--su-coal); border: 1px solid var(--su-line); border-radius: 14px; padding: 6px; list-style: none; margin: 0; z-index: 60; }
.su-lang-menu a { display: flex; align-items: center; gap: 10px; padding: 8px 12px; border-radius: 10px; color: var(--su-cream); text-decoration: none; white-space: nowrap; }
.su-lang-menu .su-lang-name { flex: 1; }
.su-lang-check { width: 16px; height: 16px; color: var(--su-gold); flex: none; }
.su-lang-menu a:hover, .su-lang-menu a.is-active { background: rgba(201, 162, 92, .12); color: var(--su-gold-hi); }
.su-search { padding: 0 0 18px; }
.su-search .form-control, .su-search input { background: var(--su-coal); color: var(--su-cream); border-color: var(--su-line); }

/* ---------- hero ---------- */
.su-hero { position: relative; height: 100svh; min-height: 680px; overflow: hidden; isolation: isolate; color: var(--su-cream); }
.su-hero video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transform: scale(1.08); transition: opacity 1.6s ease, transform 9s linear; z-index: -3; }
.su-hero video.is-on { opacity: 1; transform: scale(1); }
.su-hero::before { content: ""; position: absolute; inset: 0; z-index: -2;
    background: radial-gradient(ellipse at 70% 40%, transparent 0, rgba(13, 9, 7, .35) 45%, rgba(13, 9, 7, .9) 100%),
        linear-gradient(180deg, rgba(13, 9, 7, .75) 0, rgba(13, 9, 7, .15) 30%, rgba(13, 9, 7, .25) 65%, var(--su-ink) 100%); }
.su-hero-inner { height: 100%; display: flex; flex-direction: column; justify-content: center; padding-top: 80px; }
.su-eyebrow { display: inline-flex; align-items: center; gap: 14px; color: var(--su-gold); font-size: 14px; }
.su-eyebrow::before, .su-eyebrow::after { content: ""; width: 46px; height: 1px; background: linear-gradient(90deg, transparent, var(--su-gold)); }
.su-eyebrow::after { transform: scaleX(-1); }
.su-hero h1 { font-family: var(--su-kufi); font-weight: 600; font-size: clamp(42px, 7.2vw, 100px); line-height: 1.1; margin: 22px 0 18px; max-width: 14ch;
    background: linear-gradient(180deg, #fff7e6 0%, var(--su-gold-hi) 55%, var(--su-gold) 100%); -webkit-background-clip: text; background-clip: text; color: transparent; }
.su-lead { font-size: clamp(17px, 1.6vw, 21px); max-width: 540px; color: #f4eee3; font-weight: 300; }
.su-ctas { display: flex; gap: 14px; margin-top: 34px; flex-wrap: wrap; }
.su-hero-foot { position: absolute; bottom: 34px; inset-inline: 0; }
.su-hero-foot .su-wrap { display: flex; justify-content: space-between; align-items: flex-end; gap: 20px; }
.su-stats { display: flex; gap: 44px; }
.su-stats b { display: block; font-family: var(--su-kufi); font-size: 28px; color: var(--su-gold-hi); line-height: 1.15; }
.su-stats span { font-size: 13px; color: var(--su-muted); }
.su-dots { display: flex; gap: 8px; }
.su-dots button { width: 34px; height: 3px; border-radius: 3px; background: rgba(251, 248, 242, .25); overflow: hidden; position: relative; border: 0; padding: 0; }
.su-dots i { position: absolute; inset: 0; background: var(--su-gold); transform: scaleX(0); transform-origin: right; }
.su-dots button.is-on i { animation: su-fill 7s linear forwards; }
@keyframes su-fill { to { transform: scaleX(1); } }
.su-scroll { writing-mode: vertical-rl; font-size: 11px; color: var(--su-muted); letter-spacing: .3em; font-family: var(--su-latin); }

/* ---------- ticker ---------- */
.su-ticker { border-block: 1px solid var(--su-line); background: var(--su-coal); overflow: hidden; padding: 18px 0; }
.su-track { display: flex; gap: 48px; width: max-content; animation: su-tick 38s linear infinite; }
body.ltr .su-track { animation-name: su-tick-ltr; }
.su-track span { font-family: var(--su-kufi); font-size: 22px; color: var(--su-gold); white-space: nowrap; display: flex; align-items: center; gap: 48px; }
.su-track span::after { content: "✦"; font-size: 13px; color: var(--su-gold-lo); }
@keyframes su-tick { to { transform: translateX(50%); } }
@keyframes su-tick-ltr { to { transform: translateX(-50%); } }

/* ---------- sections ---------- */
.su-section { padding: 110px 0; }
.su-head { text-align: center; margin-bottom: 56px; }
.su-head h2 { font-weight: 600; font-size: clamp(32px, 4.2vw, 52px); line-height: 1.2; margin: 10px 0 0; color: var(--su-cream); }
.su-head p { color: var(--su-muted); max-width: 560px; margin: 14px auto 0; }
.su-orn { display: flex; justify-content: center; margin-top: 18px; color: var(--su-gold); }
.su-orn svg { width: 120px; height: 14px; }

.su-cats { display: grid; grid-template-columns: repeat(6, 1fr); gap: 20px; }
.su-cat { text-align: center; color: var(--su-cream) !important; text-decoration: none; }
.su-arch { aspect-ratio: 3 / 4; border-radius: 999px 999px 18px 18px; overflow: hidden; border: 1px solid var(--su-line); padding: 6px; background: var(--su-coal); transition: .5s var(--su-ease); }
.su-arch img { width: 100%; height: 100%; object-fit: cover; border-radius: 999px 999px 14px 14px; transition: 1s var(--su-ease); }
.su-cat:hover .su-arch { border-color: var(--su-gold); transform: translateY(-6px); }
.su-cat:hover .su-arch img { transform: scale(1.08); }
.su-cat h3 { font-weight: 500; font-size: 19px; margin: 16px 0 2px; }
.su-cat small { color: var(--su-muted); font-size: 13px; }

.su-shop { padding-top: 30px; }
.su-tabs { display: flex; justify-content: center; gap: 8px; margin: -24px 0 44px; flex-wrap: wrap; }
.su-tabs button { padding: 9px 22px; border-radius: 999px; border: 1px solid var(--su-line); font-size: 14.5px; color: var(--su-muted); background: none; transition: .3s; }
.su-tabs button.is-on, .su-tabs button:hover { background: var(--su-gold); color: var(--su-ink); border-color: var(--su-gold); font-weight: 700; }
.su-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; }

.su-card { background: linear-gradient(180deg, var(--su-bark), var(--su-coal)); border: 1px solid var(--su-line); border-radius: 18px; overflow: hidden; height: 100%; transition: .45s var(--su-ease); }
.su-card:hover { transform: translateY(-6px); border-color: rgba(201, 162, 92, .55); box-shadow: 0 30px 60px -30px rgba(0, 0, 0, .8); }
.su-card-img { aspect-ratio: 1; overflow: hidden; position: relative; }
.su-card-img img { width: 100%; height: 100%; object-fit: cover; transition: 1.1s var(--su-ease); }
.su-card:hover .su-card-img img { transform: scale(1.07); }
.su-tag { position: absolute; top: 14px; inset-inline-start: 14px; background: rgba(13, 9, 7, .75); border: 1px solid var(--su-line); color: var(--su-gold-hi); font-size: 12px; padding: 4px 12px; border-radius: 999px; }
.su-tag.is-hot { background: var(--su-gold); color: var(--su-ink); font-weight: 700; border-color: var(--su-gold); }
.su-fav { position: absolute; top: 12px; inset-inline-end: 12px; width: 36px; height: 36px; border-radius: 50%; background: rgba(13, 9, 7, .6); display: grid; place-items: center; border: 0; color: var(--su-gold-hi); }
.su-fav svg { width: 17px; }
.su-card-body { padding: 18px 20px 20px; }
.su-card-name { display: block; font-family: var(--su-kufi); font-size: 19px; color: var(--su-cream) !important; text-decoration: none; }
.su-card-desc { font-size: 13.5px; color: var(--su-muted); min-height: 1.6em; margin: 2px 0 14px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.su-card-buy { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.su-price { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; color: var(--su-gold-hi); font-size: 21px; font-weight: 700; }
.su-price s { font-size: 14px; color: var(--su-muted); font-weight: 400; }
.su-add { width: 46px; height: 46px; flex: none; border-radius: 50%; background: var(--su-gold); color: var(--su-ink); display: grid; place-items: center; border: 0; transition: .3s; }
.su-add:hover { background: var(--su-gold-hi); transform: rotate(90deg); }
.su-add.is-loading { opacity: .6; pointer-events: none; }
.su-add svg { width: 20px; }
.su-choose { font-size: 13.5px; color: var(--su-gold) !important; border: 1px solid var(--su-line); border-radius: 999px; padding: 8px 14px; white-space: nowrap; text-decoration: none; }

.su-story { background: var(--su-coal); }
.su-story-grid { display: grid; grid-template-columns: 1.05fr 1fr; gap: 80px; align-items: center; }
.su-story-img { position: relative; }
.su-story-main { border-radius: 999px 999px 24px 24px; overflow: hidden; aspect-ratio: 4 / 5; border: 1px solid var(--su-line); background: var(--su-bark); }
.su-story-main img { width: 100%; height: 100%; object-fit: cover; }
.su-seal { position: absolute; bottom: 40px; inset-inline-end: -40px; width: 150px; height: 150px; border-radius: 50%; background: var(--su-ink); border: 1px solid var(--su-gold); display: grid; place-items: center; text-align: center; }
.su-seal svg { position: absolute; inset: 0; width: 100%; height: 100%; animation: su-spin 24s linear infinite; fill: var(--su-gold); font-family: var(--su-latin); }
@keyframes su-spin { to { transform: rotate(360deg); } }
.su-seal b { display: block; font-family: var(--su-kufi); font-size: 30px; color: var(--su-gold-hi); line-height: 1; }
.su-seal span { font-size: 11px; color: var(--su-muted); }
.su-story h2 { font-weight: 600; font-size: clamp(32px, 4vw, 50px); line-height: 1.2; margin: 12px 0 22px; }
.su-story h2 em { font-style: normal; color: var(--su-gold); }
.su-story p { color: #e3dacb; margin-bottom: 16px; font-weight: 300; font-size: 17px; }
.su-quote { font-family: "Amiri", serif; font-size: 23px; color: var(--su-gold-hi); border-inline-start: 2px solid var(--su-gold); padding-inline-start: 20px; margin: 28px 0; }
.su-facts { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-top: 30px; }
.su-facts div { border: 1px solid var(--su-line); border-radius: 14px; padding: 18px; text-align: center; }
.su-facts b { font-family: var(--su-kufi); font-size: 28px; color: var(--su-gold-hi); display: block; line-height: 1.2; }
.su-facts span { font-size: 13px; color: var(--su-muted); }

.su-steps { display: grid; grid-template-columns: repeat(4, 1fr); position: relative; }
.su-steps::before { content: ""; position: absolute; top: 44px; inset-inline: 12%; height: 1px; background: repeating-linear-gradient(90deg, var(--su-gold) 0 6px, transparent 6px 14px); opacity: .5; }
.su-step { text-align: center; padding: 0 20px; }
.su-step-ic { width: 88px; height: 88px; margin: 0 auto 24px; border-radius: 50%; background: var(--su-coal); border: 1px solid var(--su-gold); display: grid; place-items: center; position: relative; z-index: 1; box-shadow: 0 0 0 8px var(--su-ink); color: var(--su-gold-hi); }
.su-step-ic svg { width: 36px; height: 36px; }
.su-step-ic span { position: absolute; top: -4px; inset-inline-end: -4px; width: 28px; height: 28px; border-radius: 50%; background: var(--su-gold); color: var(--su-ink); font-weight: 700; font-size: 13px; display: grid; place-items: center; }
.su-step h4 { font-weight: 500; font-size: 20px; margin-bottom: 8px; }
.su-step p { font-size: 14.5px; color: var(--su-muted); }

.su-gift { padding: 0 0 110px; }
.su-gift-box { border-radius: 28px; overflow: hidden; position: relative; min-height: 460px; display: grid; grid-template-columns: 1fr 1fr; border: 1px solid rgba(201, 162, 92, .4); background: radial-gradient(ellipse at 20% 50%, #3a2614 0, #1a120c 55%, #0d0907 100%); }
.su-gift-txt { padding: 64px; display: flex; flex-direction: column; justify-content: center; position: relative; z-index: 1; }
.su-gift-txt h2 { font-weight: 600; font-size: clamp(32px, 3.8vw, 48px); line-height: 1.2; margin: 10px 0 16px; }
.su-gift-txt p { color: #e3dacb; max-width: 440px; margin-bottom: 26px; }
.su-gift-pic { position: relative; }
.su-gift-pic img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; -webkit-mask-image: linear-gradient(to left, #000 55%, transparent); mask-image: linear-gradient(to left, #000 55%, transparent); }
body.ltr .su-gift-pic img { -webkit-mask-image: linear-gradient(to right, #000 55%, transparent); mask-image: linear-gradient(to right, #000 55%, transparent); }
.su-gift-tags { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 28px; }
.su-gift-tags span { border: 1px solid var(--su-line); border-radius: 999px; padding: 6px 16px; font-size: 13.5px; color: var(--su-gold-hi); }

/* ---------- perks + footer ---------- */
.su-perks { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; padding: 56px 0; border-top: 1px solid var(--su-line); }
.su-perk { display: flex; gap: 14px; align-items: center; }
.su-perk svg { width: 34px; height: 34px; color: var(--su-gold); flex: none; }
.su-perk b { display: block; font-size: 15.5px; }
.su-perk span { font-size: 13px; color: var(--su-muted); }
.su-footer { background: #080605; border-top: 1px solid var(--su-line); padding: 66px 0 26px; font-size: 14.5px; color: var(--su-cream); }
.su-fgrid { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1.2fr; gap: 40px; }
.su-footer h5 { font-weight: 500; font-size: 18px; color: var(--su-gold-hi); margin: 0 0 16px; }
.su-footer ul { list-style: none; display: grid; gap: 9px; color: var(--su-muted); margin: 0; padding: 0; }
.su-footer a { color: var(--su-muted); text-decoration: none; }
.su-footer a:hover { color: var(--su-gold-hi); }
/* Newsletter band at the top of the footer */
.su-news { display: grid; grid-template-columns: 1fr 1.1fr; gap: 36px; align-items: center; padding: 30px 34px; margin-bottom: 54px; border: 1px solid var(--su-line); border-radius: 22px; background: radial-gradient(120% 160% at 0% 0%, rgba(201, 162, 92, .14), transparent 60%), var(--su-coal); }
.su-news h4 { font-family: var(--su-kufi); font-weight: 500; font-size: 26px; color: var(--su-gold-hi); margin: 0 0 8px; }
.su-news p { color: var(--su-muted); margin: 0; line-height: 1.8; }
.su-news-field { display: flex; gap: 10px; }
.su-news-field input { flex: 1; min-width: 0; height: 54px; padding: 0 22px; border-radius: 999px; border: 1px solid var(--su-line); background: var(--su-ink); color: var(--su-cream); font-size: 15px; outline: none; transition: border-color .3s; }
.su-news-field input::placeholder { color: #a99c88; }
.su-news-field input:focus { border-color: var(--su-gold); }
.su-news-field .su-btn { border: 0; cursor: pointer; flex-shrink: 0; }
.su-news-field .su-btn.is-loading { opacity: .6; pointer-events: none; }
.su-news small { display: block; margin-top: 10px; color: var(--su-muted); font-size: 12.5px; }
.su-news small a { color: var(--su-gold-hi); text-decoration: underline; }
.su-brand-foot img { height: 72px; }
.su-foot-about { color: var(--su-muted); margin-top: 18px; max-width: 300px; }
.su-social { display: flex !important; gap: 10px !important; margin-top: 18px !important; }
.su-social a { width: 40px; height: 40px; border-radius: 50%; border: 1px solid var(--su-line); display: grid; place-items: center; color: var(--su-cream); }
.su-social a:hover { border-color: var(--su-gold); color: var(--su-gold); }
.su-social svg { width: 17px; height: 17px; }
.su-pay-title { margin-top: 22px !important; }
.su-pay { display: flex; gap: 8px; flex-wrap: wrap; }
.su-pay span { border: 1px solid var(--su-line); border-radius: 8px; padding: 6px 12px; font-size: 13px; color: var(--su-gold-hi); font-weight: 700; display: inline-block; }
.su-copy { display: flex; justify-content: space-between; gap: 20px; margin-top: 52px; padding-top: 24px; border-top: 1px solid var(--su-line); color: var(--su-muted); font-size: 13px; flex-wrap: wrap; }
.su-credit a { color: var(--su-gold) !important; }

/* ---------- responsive ---------- */
@media (max-width: 1100px) {
    .su-menu { display: none; }
    .su-burger { display: grid; }
    .su-cats { grid-template-columns: repeat(3, 1fr); }
    .su-grid { grid-template-columns: repeat(2, 1fr); }
    .su-story-grid { grid-template-columns: 1fr; gap: 50px; }
    .su-seal { inset-inline-end: 10px; }
    .su-steps { grid-template-columns: repeat(2, 1fr); row-gap: 50px; }
    .su-steps::before { display: none; }
    .su-gift-box { grid-template-columns: 1fr; }
    .su-gift-pic { min-height: 280px; order: -1; }
    .su-gift-pic img, body.ltr .su-gift-pic img { -webkit-mask-image: linear-gradient(to top, transparent, #000 50%); mask-image: linear-gradient(to top, transparent, #000 50%); }
    .su-perks { grid-template-columns: repeat(2, 1fr); }
    .su-fgrid { grid-template-columns: 1fr 1fr; }
    .su-news { grid-template-columns: 1fr; gap: 20px; padding: 26px 22px; }
}
@media (max-width: 640px) {
    body.skin-sultan { --su-topbar-h: 32px; }
    .su-topbar { font-size: 11.5px; padding: 0 8px; }
    .su-wrap { width: calc(100% - 32px); }
    .su-section { padding: 76px 0; }
    .su-nav { height: 70px; }
    .su-brand img { height: 42px; }
    .su-lang-code, .su-hide-sm { display: none !important; }
    /* Phone hero: text sits low, above the clip dots and the app bar; the numbers row is dropped. */
    .su-hero-inner { justify-content: flex-end; padding: 120px 0 130px; }
    .su-hero h1 { font-size: 44px; margin: 14px 0 12px; }
    .su-lead { font-size: 16px; }
    .su-ctas { margin-top: 22px; gap: 10px; }
    .su-btn { height: 48px; padding: 0 22px; font-size: 15px; }
    .su-stats, .su-scroll { display: none; }
    .su-hero-foot { bottom: 96px; }
    .su-hero-foot .su-wrap { justify-content: center; }
    .su-cats { grid-template-columns: repeat(2, 1fr); gap: 14px; }
    .su-grid { gap: 12px; }
    .su-card-body { padding: 14px; }
    .su-card-name { font-size: 16px; }
    .su-price { font-size: 17px; }
    .su-add { width: 40px; height: 40px; }
    .su-choose { padding: 6px 10px; font-size: 12px; }
    .su-facts { gap: 8px; }
    .su-facts b { font-size: 21px; }
    .su-steps { grid-template-columns: 1fr; }
    .su-gift-txt { padding: 34px 24px; }
    .su-perks, .su-fgrid { grid-template-columns: 1fr; }
    .su-news-field { flex-direction: column; }
    .su-news-field input { flex: none; height: 50px; }
    .su-news-field .su-btn { justify-content: center; }
}
@media (prefers-reduced-motion: reduce) {
    .su-reveal { opacity: 1; transform: none; transition: none; }
    .su-track, .su-seal svg { animation: none; }
}

/* Phone field (intl-tel-input): its sprite still has the old Syrian flag; show the new one. */
body.skin-sultan .iti__flag.iti__sy {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 20' preserveAspectRatio='none'%3E%3Crect width='30' height='20' fill='%23000'/%3E%3Crect width='30' height='13.34' fill='%23fff'/%3E%3Crect width='30' height='6.67' fill='%23007a3d'/%3E%3Cg fill='%23ce1126'%3E%3Cpolygon transform='translate(9 10)' points='0,-2.3 0.54,-0.74 2.19,-0.71 0.87,0.28 1.35,1.86 0,0.92 -1.35,1.86 -0.87,0.28 -2.19,-0.71 -0.54,-0.74'/%3E%3Cpolygon transform='translate(15 10)' points='0,-2.3 0.54,-0.74 2.19,-0.71 0.87,0.28 1.35,1.86 0,0.92 -1.35,1.86 -0.87,0.28 -2.19,-0.71 -0.54,-0.74'/%3E%3Cpolygon transform='translate(21 10)' points='0,-2.3 0.54,-0.74 2.19,-0.71 0.87,0.28 1.35,1.86 0,0.92 -1.35,1.86 -0.87,0.28 -2.19,-0.71 -0.54,-0.74'/%3E%3C/g%3E%3C/svg%3E") !important;
    background-size: 100% 100% !important;
    background-position: 0 0 !important;
    width: 20px !important;
    height: 14px !important;
}

/* Small phones (≤400px): logo and header buttons a little smaller so nothing touches the screen edge. */
@media (max-width: 400px) {
    .su-nav { gap: 10px; }
    .su-tools { gap: 6px; }
    .su-icon { width: 38px; height: 38px; }
    .su-lang-btn { padding: 4px 8px 4px 5px; gap: 5px; }
    .su-brand img { height: 36px; }
}

/* ---------- bundles (Admin → Products → Bundles) ---------- */
.su-bundles { padding-top: 30px; }
.su-bundle-list { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 520px), 1fr)); gap: 24px; max-width: 1100px; margin-inline: auto; }
.su-bundle { border: 1px solid rgba(201, 162, 92, .4); border-radius: 22px; padding: 26px; background: radial-gradient(ellipse at 15% 0%, #3a2614 0, #1a120c 55%, #0d0907 100%); }
.su-bundle-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 20px; }
.su-bundle-top h3 { font-size: 23px; font-weight: 600; margin: 0; color: var(--su-gold-hi); }
.su-bundle-off { background: var(--su-grad); color: var(--su-ink); font-weight: 700; font-size: 15px; border-radius: 999px; padding: 5px 14px; white-space: nowrap; }
.su-bundle-items { display: flex; align-items: center; justify-content: center; gap: 14px; margin-bottom: 22px; flex-wrap: wrap; }
.su-bundle-item { flex: 0 1 200px; min-width: 110px; text-align: center; color: var(--su-cream) !important; text-decoration: none; }
.su-bundle-img { display: block; aspect-ratio: 1; border-radius: 16px; overflow: hidden; border: 1px solid var(--su-line); background: var(--su-coal); }
.su-bundle-img img { width: 100%; height: 100%; object-fit: cover; transition: 1s var(--su-ease); }
.su-bundle-item:hover .su-bundle-img img { transform: scale(1.06); }
.su-bundle-name { display: block; margin-top: 10px; font-size: 14.5px; }
.su-bundle-plus { font-size: 26px; color: var(--su-gold); font-weight: 300; }
.su-bundle-foot { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; border-top: 1px solid var(--su-line); padding-top: 18px; }
.su-bundle-prices { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; }
.su-bundle-prices s { color: var(--su-muted); font-size: 15px; }
.su-bundle-prices strong { color: var(--su-gold-hi); font-size: 26px; font-weight: 700; }
.su-bundle-save { font-size: 12.5px; font-weight: 700; color: var(--su-ink); background: #9fd3a8; border-radius: 999px; padding: 3px 10px; }
@media (max-width: 640px) {
    .su-bundle { padding: 18px; }
    .su-bundle-item { flex: 1 1 0; min-width: 0; }
    .su-bundle-foot form, .su-bundle-foot .su-btn { width: 100%; justify-content: center; }
}

/* the bundle box on the product page (products/show/bundles.blade.php is white by default) */
body.skin-sultan .pb-card { background: var(--su-coal) !important; border-color: rgba(201, 162, 92, .4) !important; box-shadow: none !important; }
body.skin-sultan .pb-head { background: var(--su-bark) !important; border-color: var(--su-line) !important; }
body.skin-sultan .pb-title { color: var(--su-gold-hi) !important; }
body.skin-sultan .pb-off, body.skin-sultan .pb-btn { background: var(--su-grad) !important; color: var(--su-ink) !important; }
body.skin-sultan .pb-item { background: var(--su-bark) !important; border-color: var(--su-line) !important; }
body.skin-sultan .pb-item:hover { border-color: var(--su-gold) !important; }
body.skin-sultan .pb-item img { background: var(--su-coal) !important; }
body.skin-sultan .pb-item-name { color: var(--su-cream) !important; }
body.skin-sultan .pb-item-price, body.skin-sultan .pb-old { color: var(--su-muted) !important; }
body.skin-sultan .pb-new, body.skin-sultan .pb-plus { color: var(--su-gold-hi) !important; }
body.skin-sultan .pb-save { color: var(--su-ink) !important; background: #9fd3a8 !important; }


/* Icons of the classic theme carry hard-coded dark colours (quantity +/-, cart, account, filters...):
   presentation attributes lose against CSS, so they are recoloured here for the black skin. */
body.skin-sultan :is([stroke="#292D32"], [stroke="#0E1E3E"], [stroke="#626F84"], [stroke="#1B1339"]) { stroke: var(--su-cream); }
body.skin-sultan [fill="#292D32"] { fill: var(--su-cream); }
body.skin-sultan [stroke="#A0AEC0"] { stroke: var(--su-muted); }
body.skin-sultan .btn-number { background: var(--su-bark) !important; border-color: rgba(201, 162, 92, .45) !important; }
body.skin-sultan .btn-number:hover:not([disabled]) { border-color: var(--su-gold) !important; }
body.skin-sultan .btn-number:hover:not([disabled]) svg path { stroke: var(--su-gold-hi) !important; }
body.skin-sultan .btn-number[disabled] { opacity: .4; }
body.skin-sultan .number-picker input,
body.skin-sultan .input-quantity { color: var(--su-cream) !important; background: transparent !important; }

/* Found by the icon check: light icons on white or gold backgrounds. */
body.skin-sultan .dk-card-wishlist { background: rgba(13, 9, 7, .72) !important; color: var(--su-gold-hi) !important; border: 1px solid var(--su-line) !important; }
body.skin-sultan .dk-card-wishlist svg { stroke: var(--su-gold-hi); }
body.skin-sultan .contact-form-left svg,
body.skin-sultan .contact-form-left svg * { stroke: var(--su-ink) !important; color: var(--su-ink) !important; }
body.skin-sultan .contact-form-left svg [fill]:not([fill="none"]) { fill: var(--su-ink) !important; }
body.skin-sultan .blog-post-search button,
body.skin-sultan .blog-post-search button svg * { color: var(--su-ink) !important; stroke: var(--su-ink) !important; }
body.skin-sultan .sidebar-cart-wrap .count,
body.skin-sultan .sidebar-cart-top .count { background: var(--su-gold) !important; color: var(--su-ink) !important; }

/* ---------- flash sale (Admin → Flash Sales) ---------- */
.su-flash { padding-top: 30px; }
.su-flash-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; flex-wrap: wrap; margin-bottom: 36px; }
.su-flash-head h2 { font-weight: 600; font-size: clamp(30px, 3.8vw, 46px); margin: 8px 0 0; }
.su-countdown { display: flex; flex-direction: column; gap: 8px; align-items: flex-end; }
.su-countdown-label { color: var(--su-muted); font-size: 14px; }
.su-countdown-boxes { display: flex; gap: 8px; }
.su-countdown-boxes span { min-width: 62px; text-align: center; padding: 8px 6px; border-radius: 12px; background: var(--su-coal); border: 1px solid rgba(201, 162, 92, .4); }
.su-countdown-boxes b { display: block; font-size: 24px; line-height: 1.1; color: var(--su-gold-hi); font-variant-numeric: tabular-nums; }
.su-countdown-boxes small { font-size: 11px; color: var(--su-muted); }
@media (max-width: 640px) {
    .su-flash-head { align-items: stretch; flex-direction: column; text-align: center; }
    .su-countdown { align-items: center; }
    .su-countdown-boxes span { min-width: 0; flex: 1; }
}

/* WhatsApp: gold round button fixed on the right; the back-to-top button stacks above it */
.su-wa { position: fixed; right: 22px; bottom: 24px; z-index: 60; width: 58px; height: 58px; border-radius: 50%; display: grid; place-items: center; background: var(--su-grad); color: var(--su-ink); box-shadow: 0 12px 34px -8px rgba(201, 162, 92, .75), 0 0 0 1px rgba(232, 207, 152, .5) inset; transition: transform .35s var(--su-ease), box-shadow .35s var(--su-ease); }
.su-wa svg { width: 29px; height: 29px; }
.su-wa::after { content: ""; position: absolute; inset: 0; border-radius: 50%; border: 2px solid var(--su-gold); animation: su-wa-ring 2.6s var(--su-ease) infinite; pointer-events: none; }
.su-wa:hover { transform: translateY(-3px) scale(1.05); color: var(--su-ink); box-shadow: 0 18px 44px -8px rgba(201, 162, 92, .9), 0 0 0 1px rgba(232, 207, 152, .6) inset; }
@keyframes su-wa-ring { 0% { transform: scale(1); opacity: .7; } 70%, 100% { transform: scale(1.45); opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .su-wa::after { animation: none; opacity: 0; } }
body:has(.su-wa) .scroll-to-top { right: 29px !important; left: auto !important; bottom: 96px !important; }
@media (max-width: 991px) {
    .su-wa { right: 16px; width: 52px; height: 52px; bottom: calc(var(--dk-app-bar-h, 0px) + 16px); }
    .su-wa svg { width: 26px; height: 26px; }
    body:has(.su-wa) .scroll-to-top { right: 20px !important; bottom: calc(var(--dk-app-bar-h, 0px) + 82px) !important; }
}

/* Google address search at checkout / address book: dark field to match the theme */
.bz-place-search gmp-place-autocomplete { background: var(--su-ink) !important; border-color: var(--su-line) !important; color-scheme: dark !important; color: var(--su-cream); }
.bz-place-search gmp-place-autocomplete:focus-within { border-color: var(--su-gold) !important; }
.bz-place-search .bz-place-hint { color: var(--su-muted) !important; }

/* Native select lists (country, sort, quantity…) open dark instead of white */
select, select.form-control { color-scheme: dark; }
select option, select optgroup { background-color: var(--su-coal); color: var(--su-cream); }


/* Top bar: several announcement lines from the admin, separated by a small gold star */
.su-topbar-sep { margin: 0 12px; opacity: .55; font-size: 10px; }

/* Wholesale button (Storefront → Header & footer bar): a gold pill under the header, at the end side */
.su-retailer-row { position: relative; height: 0; }
.su-retailer { position: absolute; top: 12px; inset-inline-end: 0; display: inline-flex; align-items: center; gap: 8px; padding: 6px 16px 6px 6px; border-radius: 999px; background: rgba(13, 9, 7, .82); backdrop-filter: blur(10px); border: 1px solid var(--su-line); color: var(--su-cream); font-size: 13.5px; font-weight: 600; text-decoration: none; transition: border-color .3s, color .3s; z-index: 2; }
[dir="rtl"] .su-retailer, .rtl .su-retailer { padding: 6px 6px 6px 16px; }
.su-retailer:hover { border-color: var(--su-gold); color: var(--su-gold-hi); }
.su-retailer svg { width: 16px; height: 16px; color: var(--su-gold); flex: none; }
.su-retailer-badge { padding: 4px 11px; border-radius: 999px; background: var(--su-grad); color: var(--su-ink); font-size: 12px; font-weight: 700; white-space: nowrap; }
.su-header.is-scrolled .su-retailer-row, .su-header.is-open .su-retailer-row { display: none; }
@media (max-width: 767px) {
    .su-retailer { top: 8px; font-size: 12px; padding-inline-start: 4px; }
    .su-retailer-badge { font-size: 11px; padding: 3px 9px; }
}

/* Primary menu from Storefront → Menus can hold more links: keep each on one line, tighten when wide menus meet narrower screens */
.su-menu a { white-space: nowrap; }
@media (max-width: 1440px) { .su-menu { gap: 20px; font-size: 15px; } }
@media (max-width: 1280px) { .su-menu { gap: 15px; font-size: 14px; } }