/*
 * Mubarak Graphics Shop. Same palette, type and buttons as mubarakgraphics.in (navy, green, bone; Syne and Sora;
 * square uppercase buttons). The header, hero and footer are navy like the main site; product and checkout pages are
 * light, which is easier for long forms.
 */

@font-face { font-family: "Syne"; src: url("../fonts/syne-var-latin.woff2") format("woff2"); font-weight: 400 800; font-style: normal; font-display: swap; }
@font-face { font-family: "Sora"; src: url("../fonts/sora-var-latin.woff2") format("woff2"); font-weight: 100 800; font-style: normal; font-display: swap; }

:root {
  --placeholder: #ECEEF1; --mg-navy-1000: #071426; --mg-navy-950: #0B1F3B; --mg-navy-900: #152843; --mg-navy-850: #1C2F49; --mg-navy-700: #3C4C62; --mg-navy-600: #546276;
  --mg-green: #38BD2E; --mg-green-hover: #6ACE62; --mg-green-press: #32AA29; --mg-green-deep: #1F6819; --mg-green-light: #7FA179;
  --mg-grey: #6B7280; --mg-grey-light: #9D9E9E;
  --mg-bone-250: #CFCDC6; --mg-bone-150: #E2E0DA; --mg-bone-100: #ECEAE5; --mg-bone-50: #F4F2EE; --mg-bone-0: #FFFFFF;
  --mg-danger: #C2321F;

  /* Light page */
  --bg: var(--mg-bone-50); --surface: var(--mg-bone-0); --sunken: var(--mg-bone-100);
  --ink: var(--mg-navy-950); --body: #2b3a52; --muted: var(--mg-navy-600);
  --line: var(--mg-bone-250); --line-soft: var(--mg-bone-150);
  --accent: var(--mg-green); --accent-ink: var(--mg-navy-950); --accent-text: var(--mg-green-deep);
  --soft: var(--mg-bone-100); --radius: 0px;

  --font-display: "Syne", "Sora", system-ui, sans-serif;
  --font-body: "Sora", system-ui, sans-serif;
  --container-max: 1360px; --page-pad: 48px;
  --nav-h: 80px;
  --ease: cubic-bezier(.16,1,.3,1);
}
@media (max-width: 900px) { :root { --page-pad: 24px; --nav-h: 68px; } }
@media (max-width: 560px) { :root { --page-pad: 16px; } }

*, *::before, *::after { box-sizing: border-box; }
html { background: var(--bg); color: var(--body); font-family: var(--font-body); font-size: 15px; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; scroll-behavior: smooth; scroll-padding-top: calc(var(--nav-h) + 16px); }
html.menu-open { overflow: hidden; }
body { margin: 0; background: var(--bg); line-height: 1.6; overflow-x: hidden; }
img, svg { max-width: 100%; height: auto; }
h1, h2, h3, h4 { color: var(--ink); font-family: var(--font-display); font-weight: 700; margin: 0 0 .5em; line-height: 1.1; text-wrap: balance; }
p { margin: 0 0 1em; }
a { color: var(--ink); text-decoration-color: var(--mg-grey-light); text-underline-offset: .2em; }
a:hover { color: var(--accent-text); text-decoration-color: currentColor; }
:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
::selection { background: var(--accent); color: var(--accent-ink); }
.screen-reader-text { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
.skip-link { position: absolute; left: 16px; top: -100px; z-index: 100; background: var(--accent); color: var(--accent-ink); padding: 12px 16px; font-weight: 600; }
.skip-link:focus { top: 16px; }
.icon { width: 1.25em; height: 1.25em; flex: none; display: inline-block; vertical-align: middle; }
[hidden] { display: none !important; }

.wrap { max-width: var(--container-max); margin: 0 auto; padding: 0 var(--page-pad); }
.section { padding-top: 56px; }
.section--tight { padding-top: 40px; }
.section__head { display: flex; justify-content: space-between; align-items: end; gap: 16px; margin: 0 0 28px; flex-wrap: wrap; }
.section__head .h2 { margin: 0; }

/* Type */
.display { font-family: var(--font-display); font-weight: 700; text-transform: uppercase; letter-spacing: -0.02em; line-height: .95; }
.display--hero { font-size: clamp(30px, 3.8vw, 52px); }
.h2 { font-size: clamp(22px, 2.2vw, 30px); letter-spacing: -0.01em; }
.h3 { font-size: clamp(18px, 1.6vw, 22px); }
.h4 { font-size: 16px; }
.lead { font-size: clamp(15px, 1.2vw, 17px); line-height: 1.55; font-weight: 300; }
.eyebrow { font-family: var(--font-display); font-weight: 600; font-size: 12px; letter-spacing: .18em; text-transform: uppercase; color: var(--muted); margin: 0 0 16px; }
.eyebrow--accent { color: var(--accent-text); }
.muted { color: var(--muted); }

/* Buttons (main site style), also used for the print shop plugin's buttons */
.btn, .mgp-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 48px; padding: 0 24px; white-space: nowrap;
  font-family: var(--font-display); font-weight: 700; font-size: 13px; letter-spacing: .14em; text-transform: uppercase; text-decoration: none; line-height: 1.2;
  border: 1.5px solid var(--ink); border-radius: 0; cursor: pointer; background: transparent; color: var(--ink);
  transition: background .3s var(--ease), color .3s var(--ease), border-color .3s var(--ease);
}
.btn--primary, .mgp-btn:not(.mgp-btn--ghost) { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }
.btn--primary:hover, .mgp-btn:not(.mgp-btn--ghost):hover { background: var(--mg-green-hover); border-color: var(--mg-green-hover); color: var(--accent-ink); filter: none; }
.btn--secondary:hover, .mgp-btn--ghost:hover { background: var(--ink); color: var(--mg-bone-50); }
.mgp-btn--block { min-height: 58px; font-size: 14px; }
.mgp-btn { white-space: normal; text-align: center; }
.btn--lg { min-height: 58px; padding: 0 30px; font-size: 14px; }
.btn-row { display: flex; flex-wrap: wrap; gap: 12px; }

/* Header (navy, like the main site) */
.site-header { position: sticky; top: 0; z-index: 50; background: var(--mg-navy-950); color: var(--mg-bone-50); border-bottom: 1px solid var(--mg-navy-850); }
.admin-bar .site-header { top: 32px; }
@media (max-width: 782px) { .admin-bar .site-header { top: 0; position: relative; } }
.site-header__inner { min-height: var(--nav-h); display: flex; align-items: center; gap: 20px; }
.brand { display: flex; align-items: center; gap: 16px; text-decoration: none; color: var(--mg-bone-50); flex: none; }
.brand .brand__logo, .site-footer .brand__logo { height: 32px; width: auto; max-width: none; display: block; }
.brand__descriptor { font-family: var(--font-display); font-weight: 600; font-size: 11px; letter-spacing: .18em; text-transform: uppercase; color: var(--mg-green-light); padding-left: 16px; border-left: 1px solid var(--mg-navy-700); line-height: 1.3; }
.hdr-actions { display: flex; align-items: center; gap: 6px; margin-left: auto; }
.hdr-main { display: inline-flex; align-items: center; gap: 6px; margin-right: 10px; color: var(--mg-grey-light); text-decoration: none; font-family: var(--font-display); font-weight: 600; font-size: 12px; letter-spacing: .16em; text-transform: uppercase; white-space: nowrap; }
.hdr-main .icon { width: 14px; height: 14px; }
.hdr-main:hover { color: var(--accent); }
.hdr-icon { position: relative; display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; color: var(--mg-bone-50); background: none; border: 0; cursor: pointer; text-decoration: none; }
.hdr-icon:hover { color: var(--accent); }
.hdr-icon .icon { width: 22px; height: 22px; }
.cart-link__count { position: absolute; top: 4px; right: 2px; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px; background: var(--accent); color: var(--accent-ink); font-size: 11px; font-weight: 700; line-height: 18px; text-align: center; }
.menu-toggle { display: none; }
@media (max-width: 1100px) { .hdr-main { display: none; } }
@media (max-width: 900px) {
  .menu-toggle { display: inline-flex; }
}
@media (max-width: 560px) { .brand__descriptor { display: none; } .brand .brand__logo { height: 28px; } }

.mobile-menu { position: fixed; inset: 0; z-index: 100; background: var(--mg-navy-950); color: var(--mg-bone-50); padding: 0 var(--page-pad) 32px; overflow-y: auto; display: flex; flex-direction: column; }
.mobile-menu__top { height: var(--nav-h); display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid var(--mg-navy-850); margin-bottom: 16px; }
.mobile-menu ul { list-style: none; margin: 0 0 24px; padding: 0; }
.mobile-menu li a { display: block; padding: 14px 0; border-bottom: 1px solid var(--mg-navy-850); color: var(--mg-bone-50); text-decoration: none; font-family: var(--font-display); font-weight: 700; font-size: 22px; text-transform: uppercase; letter-spacing: -.01em; }
.mobile-menu .btn { border-color: var(--mg-bone-50); color: var(--mg-bone-50); align-self: flex-start; }

/* Home: hero */
.hero { background: var(--mg-navy-950); color: var(--mg-grey-light); padding: 40px 0 44px; }
.hero__inner { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 4fr); gap: 48px; align-items: center; }
.hero h1 { color: var(--mg-bone-50); margin: 0 0 14px; }
.hero .lead { color: var(--mg-bone-50); max-width: 40em; margin-bottom: 22px; }
.hero .eyebrow--accent { color: var(--accent); }
.hero .btn--secondary { border-color: var(--mg-bone-50); color: var(--mg-bone-50); }
.hero .btn--secondary:hover { background: var(--mg-bone-50); color: var(--mg-navy-950); }
.hero__note { display: flex; align-items: center; gap: 8px; margin: 20px 0 0; font-size: 14px; color: var(--mg-green-light); }
.hero__note .icon { color: var(--accent); }
.hero__steps { list-style: none; margin: 0; padding: 0; border: 1px solid var(--mg-navy-700); }
.hero__steps li { display: flex; gap: 18px; padding: 20px 24px; }
.hero__steps li + li { border-top: 1px solid var(--mg-navy-850); }
.hero__num { font-family: var(--font-display); font-weight: 700; color: var(--accent); font-size: 14px; letter-spacing: .1em; padding-top: 2px; }
.hero__steps strong { display: block; color: var(--mg-bone-50); font-family: var(--font-display); font-size: 17px; margin-bottom: 2px; }
.hero__steps span:last-child { font-size: 14px; line-height: 1.5; }
.hero__points { list-style: none; margin: 0; padding: 0; display: grid; gap: 1px; background: var(--mg-navy-850); border: 1px solid var(--mg-navy-700); }
.hero__points li { display: flex; align-items: center; gap: 14px; padding: 14px 18px; background: var(--mg-navy-950); font-size: 13px; }
.hero__points .icon { width: 24px; height: 24px; color: var(--accent); }
.hero__points strong { display: block; color: var(--mg-bone-50); font-size: 14px; }
@media (max-width: 900px) { .hero { padding: 28px 0 32px; } .hero__inner { grid-template-columns: 1fr; gap: 24px; } .hero__points { display: none; } }

/* Home: categories */
.cat-grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 16px; }
.cat-card { position: relative; display: flex; flex-direction: column; height: 100%; background: var(--surface); border: 1px solid var(--line-soft); text-decoration: none; color: var(--ink); transition: border-color .3s var(--ease), transform .3s var(--ease); }
.cat-card:hover { border-color: var(--ink); color: var(--ink); transform: translateY(-2px); }
.cat-card__media { aspect-ratio: 4 / 3; background: var(--placeholder); display: flex; align-items: center; justify-content: center; overflow: hidden; }
.cat-card__media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.cat-card__media img.cat-card__mark { width: 64px; height: 64px; object-fit: contain; opacity: .9; }
.cat-card__body { padding: 16px 52px 18px 18px; }
.cat-card__name { display: block; font-family: var(--font-display); font-weight: 700; font-size: 18px; }
.cat-card__count { display: block; font-size: 13px; color: var(--muted); }
.cat-card__arrow { position: absolute; right: 16px; bottom: 20px; color: var(--accent-text); }
.link-arrow { display: inline-flex; align-items: center; gap: 6px; font-family: var(--font-display); font-weight: 700; font-size: 13px; letter-spacing: .14em; text-transform: uppercase; text-decoration: none; }
.empty-note { padding: 24px; background: var(--surface); border: 1px dashed var(--line); }

/* Home: how it works */
.how { margin-top: 64px; padding: 56px 0; background: var(--surface); border-top: 1px solid var(--line-soft); border-bottom: 1px solid var(--line-soft); }
.section.how { padding-top: 56px; }
.how__grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 32px; counter-reset: how; }
.how__grid li { border-top: 2px solid var(--ink); padding-top: 20px; }
.how__grid .icon { width: 32px; height: 32px; color: var(--accent-text); margin-bottom: 14px; }
.how__grid p { font-size: 15px; margin: 0; }
@media (max-width: 1000px) { .how__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .how__grid { grid-template-columns: 1fr; } }

.custom-cta { display: flex; justify-content: space-between; align-items: center; gap: 24px; flex-wrap: wrap; padding: 32px; background: var(--mg-navy-950); color: var(--mg-grey-light); margin-bottom: 96px; }
.custom-cta h2 { color: var(--mg-bone-50); }
.custom-cta p { margin: 0; }

/* Generic pages */
.page-main { padding-top: 36px; padding-bottom: 80px; } /* not .page: WordPress puts that class on <body> */
.page__title { font-size: clamp(24px, 2.8vw, 36px); text-transform: uppercase; letter-spacing: -.01em; margin-bottom: 24px; }
.prose { max-width: 820px; }
.mgs-shop-page .prose { max-width: none; }

/* Print shop plugin pages */
.mgp-main { padding-bottom: 32px; }
.mgp-archive__title, .mgp-product__title, .mgp-order__title { text-transform: uppercase; letter-spacing: -.01em; }
.mgp-card__title, .mgp-line__title { letter-spacing: -.005em; }
.mgp-filter a { border-radius: 0; font-family: var(--font-display); font-size: 12px; letter-spacing: .12em; text-transform: uppercase; }
.mgp-card__placeholder { background-color: var(--placeholder); }
.mgs-shop-page .page__title { margin-bottom: 24px; }

/* Header search, account, category bar */
.hdr-search { flex: 1; max-width: 560px; display: flex; margin: 0 auto; }
.hdr-search input { flex: 1; min-width: 0; height: 42px; border: 0; padding: 0 14px; font: inherit; font-size: 14px; color: var(--ink); background: var(--mg-bone-0); border-radius: 0; }
.hdr-search input::placeholder { color: var(--mg-grey); }
.hdr-search button { width: 46px; height: 42px; border: 0; background: var(--accent); color: var(--accent-ink); cursor: pointer; display: inline-flex; align-items: center; justify-content: center; }
.hdr-search button:hover { background: var(--mg-green-hover); }
.hdr-search .icon { width: 20px; height: 20px; }
.hdr-account { display: inline-flex; align-items: center; gap: 8px; height: 44px; padding: 0 8px; color: var(--mg-bone-50); text-decoration: none; font-size: 13px; font-weight: 600; white-space: nowrap; }
.hdr-account:hover { color: var(--accent); }
.hdr-account .icon { width: 22px; height: 22px; }
.cat-bar { position: relative; z-index: 40; background: var(--surface); border-bottom: 1px solid var(--line); }
.cat-bar__list { list-style: none; margin: 0; padding: 0; display: flex; gap: 4px 26px; overflow-x: auto; scrollbar-width: none; white-space: nowrap; }
.cat-bar__list::-webkit-scrollbar { display: none; }
.cat-bar__item > a { display: inline-block; padding: 12px 0 10px; font-size: 13.5px; font-weight: 600; color: var(--ink); text-decoration: none; border-bottom: 2px solid transparent; }
.cat-bar__item > a:hover, .cat-bar__item.has-mega:hover > a, .cat-bar__item:focus-within > a { border-bottom-color: var(--accent); }
.cat-bar__item > a[aria-current="page"] { border-bottom-color: var(--accent); }

/* Mega menu: hover (or keyboard focus) on a category shows its subcategories and products. */
.mega { position: absolute; left: 0; right: 0; top: 100%; background: var(--surface); border-top: 1px solid var(--line); box-shadow: 0 22px 40px rgba(11, 31, 59, .16); white-space: normal; visibility: hidden; opacity: 0; transform: translateY(-4px); transition: opacity .12s var(--ease), transform .12s var(--ease), visibility 0s linear .12s; }
.cat-bar__item:hover > .mega, .cat-bar__item:focus-within > .mega { visibility: visible; opacity: 1; transform: none; transition: opacity .15s var(--ease) .15s, transform .15s var(--ease) .15s, visibility 0s linear .15s; }
.mega__inner { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 32px; padding-top: 24px; padding-bottom: 20px; }
.mega__cols { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 20px 28px; align-content: start; }
.mega__head { display: block; font-family: var(--font-display); font-weight: 700; font-size: 14px; color: var(--ink); text-decoration: none; margin: 0 0 8px; }
a.mega__head:hover { text-decoration: underline; text-underline-offset: .2em; }
.mega__col ul { list-style: none; margin: 0; padding: 0; }
.mega__col li a { display: block; padding: 4px 0; font-size: 13.5px; color: var(--ink); text-decoration: none; }
.mega__col li a:hover { color: var(--ink); text-decoration: underline; text-underline-offset: .2em; }
.mega__more { font-weight: 600; }
.mega__feat { display: flex; gap: 16px; }
.mega__card { width: 168px; display: flex; flex-direction: column; gap: 4px; text-decoration: none; color: var(--ink); }
.mega__img { display: block; aspect-ratio: 1; background: var(--placeholder); overflow: hidden; margin-bottom: 4px; }
.mega__img img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .3s var(--ease); }
.mega__card:hover .mega__img img { transform: scale(1.04); }
.mega__img { display: flex; align-items: center; justify-content: center; }
.mega__img img.mega__mark { width: 48px; height: 48px; object-fit: contain; }
.mega__name { font-size: 13.5px; font-weight: 600; }
.mgp-new--menu { margin-left: 4px; padding: 2px 6px; font-size: 9.5px; background: var(--accent); color: var(--accent-ink); vertical-align: 1px; }
.mega__price { font-size: 12.5px; color: var(--mg-grey); }
.mega__foot { padding-top: 12px; padding-bottom: 14px; border-top: 1px solid var(--line); }
.mega__foot a { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 700; color: var(--ink); text-decoration: none; }
.mega__foot .icon { width: 16px; height: 16px; }
@media (max-width: 1100px) { .mega__feat { display: none; } }
@media (max-width: 900px), (hover: none) { .mega { display: none; } }
@media (max-width: 900px) {
  .site-header__inner { flex-wrap: wrap; gap: 8px 12px; padding-top: 10px; padding-bottom: 12px; }
  .brand { order: 1; }
  .hdr-actions { order: 2; }
  .hdr-search { order: 3; flex: 1 0 100%; max-width: none; }
  .hdr-account span { display: none; }
}

/* Home: category tiles */
.cat-tiles { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(118px, 1fr)); gap: 18px 14px; }
.cat-tile { display: flex; flex-direction: column; align-items: center; gap: 10px; text-decoration: none; color: var(--ink); text-align: center; }
.cat-tile__media { width: 100%; max-width: 132px; aspect-ratio: 1; border-radius: 50%; overflow: hidden; background: var(--placeholder); display: flex; align-items: center; justify-content: center; transition: transform .25s var(--ease), box-shadow .25s var(--ease); }
.cat-tile:hover .cat-tile__media { transform: translateY(-3px); box-shadow: 0 8px 20px rgba(11, 31, 59, .18); }
.cat-tile__media img { width: 100%; height: 100%; object-fit: cover; }
.cat-tile__media img.cat-tile__mark { width: 44px; height: 44px; object-fit: contain; }
.cat-tile__name { font-size: 14px; font-weight: 600; line-height: 1.3; }
.cat-tile:hover .cat-tile__name { text-decoration: underline; text-underline-offset: .2em; }

/* Footer (navy) */
.site-footer { background: var(--mg-navy-950); color: var(--mg-grey-light); padding: 64px 0 32px; font-size: 15px; }
.site-footer a { color: var(--mg-bone-50); text-decoration: none; }
.site-footer a:hover { color: var(--accent); }
.footer-grid { display: grid; grid-template-columns: minmax(0, 5fr) repeat(3, minmax(0, 2fr)); gap: 32px; }
.site-footer .footer-brand .brand__logo { height: 34px; margin-bottom: 20px; }
.footer-brand p { max-width: 34em; }
.footer-brand p a { text-decoration: underline; text-decoration-color: var(--mg-navy-700); }
.footer-col h2 { font-family: var(--font-display); font-weight: 600; font-size: 11px; letter-spacing: .18em; text-transform: uppercase; color: var(--mg-green-light); margin-bottom: 16px; }
.footer-col ul { list-style: none; margin: 0; padding: 0; }
.footer-col li + li { margin-top: 10px; }
.footer-col p { margin: 0 0 10px; }
.footer-col .muted { color: var(--mg-grey-light); }
.footer-bottom { display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-top: 56px; padding-top: 24px; border-top: 1px solid var(--mg-navy-850); font-size: 13px; }
.footer-bottom p { margin: 0; }
@media (max-width: 900px) { .footer-grid { grid-template-columns: 1fr 1fr; } .footer-brand { grid-column: 1 / -1; } }
@media (max-width: 480px) { .footer-grid { grid-template-columns: 1fr; } }

/* Reduced motion: see the end of the Motion section, at the bottom of this file. */
@media (max-width: 560px) {
  .cat-grid { grid-template-columns: 1fr 1fr; gap: 10px; }
  .cat-card__media { aspect-ratio: 3 / 2; }
  .cat-card__media img.cat-card__mark { width: 44px; height: 44px; }
  .cat-card__body { padding: 12px 32px 14px 12px; }
  .cat-card__name { font-size: 15px; }
  .cat-card__arrow { right: 10px; bottom: 14px; }
}

/* Phones: products sooner. Short hero, categories as one swipeable row of small circles. */
@media (max-width: 560px) {
  .hero { padding: 22px 0 24px; }
  .display--hero { font-size: 28px; }
  .hero .eyebrow { display: none; }
  .hero .lead { font-size: 14px; margin-bottom: 16px; }
  .hero .btn { padding: 0 14px; min-height: 44px; font-size: 11px; letter-spacing: .08em; }
  .section { padding-top: 36px; }
  .section--tight { padding-top: 28px; }
  .hero .btn-row { gap: 10px; }
  .cat-tiles { display: flex; overflow-x: auto; gap: 14px; margin: 0 calc(-1 * var(--page-pad)); padding: 0 var(--page-pad) 6px; scroll-snap-type: x proximity; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
  .cat-tiles::-webkit-scrollbar { display: none; }
  .cat-tiles > li { flex: 0 0 76px; scroll-snap-align: start; }
  .cat-tile { gap: 6px; }
  .cat-tile__media { max-width: 76px; }
  .cat-tile__media img.cat-tile__mark { width: 30px; height: 30px; }
  .cat-tile__name { font-size: 12px; }
}

/* Home: optional picture in the intro, and the home page's own content. */
.hero__media img { display: block; width: 100%; height: auto; max-height: 360px; object-fit: cover; }
@media (max-width: 900px) { .hero__media { display: none; } }
.home-page-content .prose { max-width: none; }

/* Announcement bar */
.announce { background: var(--mg-green); color: var(--mg-navy-950); font-size: 14px; }
.announce__inner { display: flex; align-items: center; justify-content: center; min-height: 48px; }
.announce__track { position: relative; flex: 0 1 820px; min-width: 0; display: grid; }
.announce__item { grid-area: 1 / 1; margin: 0; padding: 12px 0; text-align: center; font-weight: 700; line-height: 1.35; opacity: 0; visibility: hidden; transition: opacity .3s var(--ease), visibility 0s linear .3s; }
.announce__item.is-active { opacity: 1; visibility: visible; transition-delay: 0s; }
.announce__item a { color: inherit; text-decoration: none; display: inline-flex; align-items: center; gap: 6px; }
.announce__item a:hover { text-decoration: underline; text-underline-offset: .2em; }
.announce__item a:focus-visible { outline: 2px solid var(--mg-navy-950); outline-offset: 2px; }
.announce__item .icon { width: 14px; height: 14px; flex: none; }
.slides__btn:focus-visible, .slides__dots button:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* Home banner slides */
.slides { position: relative; padding-top: 20px; }
.slides__track { display: grid; }
.slide { grid-area: 1 / 1; position: relative; display: block; overflow: hidden; border-radius: var(--radius, 8px); background: var(--mg-navy-950); color: #fff; text-decoration: none; aspect-ratio: 16 / 5; opacity: 0; visibility: hidden; transition: opacity .5s var(--ease), visibility 0s linear .5s; }
.slide.is-active { opacity: 1; visibility: visible; transition-delay: 0s; }
.slide__pic, .slide__img { position: absolute; inset: 0; width: 100%; height: 100%; }
.slide__img { object-fit: cover; }
.slide--text::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(11, 31, 59, .8) 0%, rgba(11, 31, 59, .45) 40%, rgba(11, 31, 59, 0) 70%); }
.slide__text { position: absolute; z-index: 1; left: clamp(20px, 5vw, 64px); top: 50%; transform: translateY(-50%); max-width: min(520px, 60%); display: flex; flex-direction: column; align-items: flex-start; gap: 10px; }
.slide__title { font-family: var(--font-display); font-weight: 700; font-size: clamp(24px, 3.4vw, 46px); line-height: 1.05; color: #fff; }
.slide__lead { font-size: clamp(14px, 1.3vw, 17px); line-height: 1.5; color: rgba(255, 255, 255, .92); }
.slide__text .btn { margin-top: 6px; }
.slides__controls { display: flex; align-items: center; justify-content: center; gap: 6px; margin-top: 10px; }
.slides__btn { display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; padding: 0; border: 1px solid var(--line); background: var(--surface); color: var(--ink); border-radius: 50%; cursor: pointer; }
.slides__btn .icon { width: 18px; height: 18px; }
.slides__dots { display: inline-flex; gap: 2px; margin: 0 4px; }
.slides__dots button { width: 24px; height: 24px; padding: 0; border: 0; background: transparent; cursor: pointer; position: relative; }
.slides__dots button::before { content: ""; position: absolute; left: 50%; top: 50%; width: 8px; height: 8px; margin: -4px 0 0 -4px; border-radius: 50%; background: var(--line); transition: width .2s var(--ease), margin .2s var(--ease); }
.slides__dots button[aria-current="true"]::before { width: 22px; margin-left: -11px; border-radius: 4px; background: var(--ink); }
@media (max-width: 640px) {
	.slides { padding-top: 12px; }
	.slide { aspect-ratio: 1; }
	.slide__text { left: 20px; right: 20px; top: auto; bottom: 20px; transform: none; max-width: none; }
	.slide--text::after { background: linear-gradient(0deg, rgba(11, 31, 59, .85) 0%, rgba(11, 31, 59, .4) 50%, rgba(11, 31, 59, 0) 75%); }
	.announce { font-size: 13px; }
	.announce__inner { min-height: 44px; }
	.announce__item { padding: 10px 0; }
}
@media (prefers-reduced-motion: reduce) {
	.slide, .announce__item { transition: none; }
}

/* Language picker */
.hdr-lang { display: inline-flex; align-items: center; gap: 6px; height: 36px; padding: 0 10px; border: 1px solid var(--mg-navy-850); background: transparent; color: var(--mg-bone-50); font: inherit; font-size: 12px; font-weight: 700; letter-spacing: .06em; border-radius: var(--radius, 8px); cursor: pointer; }
.hdr-lang:hover { border-color: var(--mg-bone-50); }
.lang__flag { display: block; width: 20px; height: 14px; object-fit: cover; border-radius: 2px; }
.lang { width: min(420px, calc(100vw - 32px)); padding: 0; border: 0; border-radius: var(--radius, 8px); background: var(--surface); color: var(--ink); box-shadow: 0 24px 60px rgba(11, 31, 59, .3); }
.lang::backdrop { background: rgba(11, 31, 59, .55); }
.lang__head { display: flex; justify-content: space-between; align-items: center; padding: 18px 20px 10px; }
.lang__title { margin: 0; font-family: var(--font-display); font-size: 20px; }
.lang__close { display: inline-flex; width: 36px; height: 36px; align-items: center; justify-content: center; border: 0; background: transparent; color: var(--ink); cursor: pointer; border-radius: 50%; }
.lang__close:hover { background: var(--mg-bone-100, #eee); }
.lang__list { list-style: none; margin: 0; padding: 0 12px 16px; }
.lang__item { display: flex; align-items: center; gap: 12px; padding: 12px 10px; color: var(--ink); text-decoration: none; font-weight: 600; border-radius: var(--radius, 8px); }
.lang__item:hover { background: var(--mg-bone-100, #f2f0ec); }
.lang__item .icon { width: 18px; height: 18px; margin-left: auto; color: var(--accent-text, #1F6819); }
.lang__item[aria-current="true"] { background: var(--mg-bone-100, #f2f0ec); }
@media (max-width: 640px) {
	.hdr-lang { height: 32px; padding: 0 6px; }
	.hdr-lang img + span { display: none; }
}

/* ==========================================================================
 * Motion (2.8.0): the main site's motion, from the Mubarak Graphics Design System
 * (mubarak-graphics/assets/css/site.css and assets/js/site.js). Same curves and durations; Reveal, SplitText and
 * clip reveals; hover motion; glass header on scroll; page-load fade. Nothing is hidden unless <html> has "js"
 * (set in the page head, taken off again after 3 s if assets/js/shop.js never starts the motion).
 * ========================================================================== */
:root {
  --ease-out-expo: cubic-bezier(.16,1,.3,1);
  --ease-in-out-quint: cubic-bezier(.83,0,.17,1);
  --ease-spring: linear(0,.009,.035 2.1%,.141 4.4%,.723 12.9%,.938 16.7%,1.017 19.4%,1.067,1.099 24.3%,1.108 26%,1.098 28.6%,1.042 33.6%,1.006 38.4%,.993 43.3%,1.001 53.8%,1);
  --dur-fast: 160ms; --dur-base: 320ms; --dur-slow: 640ms; --dur-reveal: 900ms; --dur-cinematic: 1400ms;
}
/* Browsers without linear() easing would drop every transition that uses the spring; give them the expo curve. */
@supports not (transition-timing-function: linear(0, 1)) { :root { --ease-spring: var(--ease-out-expo); } }

/* Links: colour and underline ease in (site.css:67). */
a { transition: color var(--dur-fast) var(--ease-out-expo), text-decoration-color var(--dur-fast) var(--ease-out-expo); }

/* Buttons: colours ease, a press springs back (site.css:98-99, 104). */
.btn, .mgp-btn { transition: background-color var(--dur-base) var(--ease-out-expo), color var(--dur-base) var(--ease-out-expo), border-color var(--dur-base) var(--ease-out-expo), transform var(--dur-base) var(--ease-spring); }
.btn:active, .mgp-btn:active { transform: scale(.98); }
.btn--primary:active, .mgp-btn:not(.mgp-btn--ghost):active { background: var(--mg-green-press); border-color: var(--mg-green-press); }

/* Arrow swap: the arrow leaves up-right and a second one comes in (site.css:109-114). */
.arrow-swap { position: relative; display: inline-flex; flex: none; overflow: hidden; width: 16px; height: 16px; vertical-align: middle; }
.arrow-swap .icon { position: absolute; inset: 0; width: 100%; height: 100%; transition: transform var(--dur-slow) var(--ease-out-expo); }
.arrow-swap .icon + .icon { transform: translate(-110%, 110%); }
a:hover > .arrow-swap .icon:first-child, a:focus-visible > .arrow-swap .icon:first-child { transform: translate(110%, -110%); }
a:hover > .arrow-swap .icon + .icon, a:focus-visible > .arrow-swap .icon + .icon { transform: none; }
.hdr-main .arrow-swap, .announce__item .arrow-swap { width: 14px; height: 14px; }

/* Header: turns to glass once the page scrolls, and is shorter on wide screens (site.css:119-123, site.js:17-22).
   The navy glass is a little denser than the main site's .72 because the shop's pages are light. The category bar
   grows by the same 12 px the header loses, so nothing below moves. */
.site-header { transition: background-color var(--dur-slow) var(--ease-out-expo), border-color var(--dur-slow) var(--ease-out-expo); }
.site-header.is-scrolled { background: rgba(11, 31, 59, .86); -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); border-bottom-color: var(--mg-navy-700); }
@media (min-width: 901px) {
  .site-header__inner { transition: min-height var(--dur-slow) var(--ease-out-expo); }
  .site-header.is-scrolled .site-header__inner { min-height: 68px; }
  .site-header + .cat-bar { transition: padding-top var(--dur-slow) var(--ease-out-expo); }
  .site-header.is-scrolled + .cat-bar { padding-top: 12px; }
}
.hdr-icon, .hdr-account, .hdr-main, .hdr-lang, .hdr-search button, .site-footer a, .cat-bar__item > a, .mega__col li a, .mgp-filter a, .lang__item, .lang__close {
  transition: color var(--dur-fast) var(--ease-out-expo), background-color var(--dur-base) var(--ease-out-expo), border-color var(--dur-base) var(--ease-out-expo);
}

/* Category mega menu: fades up like the main site's sub-menu (site.css:139-140); keeps its short hover delay. */
.mega { transform: translateY(8px); transition: opacity var(--dur-base) var(--ease-out-expo), transform var(--dur-base) var(--ease-out-expo), visibility 0s linear var(--dur-base); }
.cat-bar__item:hover > .mega, .cat-bar__item:focus-within > .mega { transform: none; transition: opacity var(--dur-base) var(--ease-out-expo) .15s, transform var(--dur-base) var(--ease-out-expo) .15s, visibility 0s linear .15s; }

/* Mobile menu opens with the main site's fade-up (site.css:152). */
.mobile-menu:not([hidden]) { animation: mg-fade-up var(--dur-slow) var(--ease-out-expo); }

/* Cards and tiles: the photo slowly zooms, the name turns green (site.css:221-231, 463-464). No lift. */
.mgp-card__media img, .mgp-tile__img img, .mega__img img, .cat-tile__media img, .cat-card__media img { transition: transform var(--dur-cinematic) var(--ease-out-expo); }
.mgp-card__link:hover .mgp-card__media img, .mgp-tile:hover .mgp-tile__img img, .mega__card:hover .mega__img img, .cat-tile:hover .cat-tile__media img, .cat-card:hover .cat-card__media img { transform: scale(1.05); }
.mgp-card__media { transition: box-shadow var(--dur-base) var(--ease-out-expo), border-color var(--dur-base) var(--ease-out-expo); }
.mgp-card__title, .mgp-tile__name, .cat-tile__name, .cat-card__name, .mega__name { transition: color var(--dur-fast) var(--ease-out-expo); }
.mgp-card__link:hover .mgp-card__title, .mgp-tile:hover .mgp-tile__name, .cat-tile:hover .cat-tile__name, .cat-card:hover .cat-card__name, .mega__card:hover .mega__name { color: var(--accent-text); }
.cat-tile__media { transition: box-shadow var(--dur-base) var(--ease-out-expo); }
.cat-tile:hover .cat-tile__media, .cat-card:hover { transform: none; }
.cat-card { transition: border-color var(--dur-base) var(--ease-out-expo); }

/* Announcement bar: each message fades up into place (the main site's 8 px rise, site.css:139). */
.announce { overflow: hidden; }
.announce__item { transform: translateY(8px); transition: opacity var(--dur-base) var(--ease-out-expo), transform var(--dur-base) var(--ease-out-expo), visibility 0s linear var(--dur-base); }
.announce__item.is-active { transform: none; transition-delay: 0s; }

/* Banner slides: cross-fade on the slow duration; the photo settles from 1.08 like a clip reveal (site.css:426-427);
   the words rise in with the page-load fade-up, 70 ms apart (the SplitText stagger, site.js:53). */
.slide { transition: opacity var(--dur-slow) var(--ease-out-expo), visibility 0s linear var(--dur-slow); }
.slide.is-active { transition-delay: 0s; }
.slide__img { transform: scale(1.08); transition: transform 0s linear var(--dur-slow); }
.slide.is-active .slide__img { transform: none; transition: transform var(--dur-cinematic) var(--ease-out-expo); }
.js .slides__track:not(.is-in) .slide__img { transform: scale(1.08); }
.slides__track.is-in .slide.is-active .slide__text > * { animation: mg-fade-up var(--dur-slow) var(--ease-out-expo) both; }
.slides__track.is-in .slide.is-active .slide__text > :nth-child(2) { animation-delay: 70ms; }
.slides__track.is-in .slide.is-active .slide__text > :nth-child(3) { animation-delay: 140ms; }
.slides__dots button::before { transition: width var(--dur-base) var(--ease-out-expo), margin var(--dur-base) var(--ease-out-expo), background-color var(--dur-base) var(--ease-out-expo); }
.slides__btn { transition: border-color var(--dur-fast) var(--ease-out-expo), background-color var(--dur-fast) var(--ease-out-expo); }
.slides__btn:hover { border-color: var(--ink); }

/* Reveal, SplitText and clip reveals (site.css:418-435). */
@keyframes mg-fade-up { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: none; } }
@keyframes mg-sheen { from { background-position: 150% 0; } to { background-position: -50% 0; } }
.js main { animation: mg-fade-up var(--dur-slow) var(--ease-out-expo) both; }
.js [data-reveal] { transition: opacity var(--dur-reveal) var(--ease-out-expo) var(--delay, 0ms), transform var(--dur-reveal) var(--ease-out-expo) var(--delay, 0ms); }
.js [data-reveal]:not(.is-in) { opacity: 0; transform: translate3d(0, 40px, 0); }
.js [data-reveal="fade"]:not(.is-in) { transform: none; }
/* The clip wipes up from the bottom. The main site ends on "clip-path: none", which browsers can't animate to, so
   there the wipe jumps; ending on a slightly larger inset keeps the wipe and leaves room for hover shadows. */
.js [data-reveal="clip"] { opacity: 1; transition: clip-path var(--dur-cinematic) var(--ease-out-expo) var(--delay, 0ms), box-shadow var(--dur-base) var(--ease-out-expo), border-color var(--dur-base) var(--ease-out-expo); }
.js [data-reveal="clip"].is-in { clip-path: inset(-40px); }
.js [data-reveal="clip"]:not(.is-in) { opacity: 1; clip-path: inset(100% 0 0 0); transform: none; }
.js [data-reveal="clip"] > img { transition: transform var(--dur-cinematic) var(--ease-out-expo) var(--delay, 0ms); }
.js [data-reveal="clip"]:not(.is-in) > img { transform: scale(1.08); }
.split-word { display: inline-block; overflow: hidden; vertical-align: top; padding-bottom: .06em; margin-bottom: -.06em; }
.split-word > span { display: inline-block; transform-origin: 0 100%; transition: transform 1100ms var(--ease-out-expo); transition-delay: var(--delay, 0ms); }
.js [data-split]:not(.is-in) .split-word > span { transform: translate3d(0, 110%, 0) rotate(4deg); }
/* Before shop.js has marked the page ("mgs-motion"), hide what it is about to animate, so nothing flashes. These
   rules stop applying the moment it starts, so markup it doesn't mark simply shows. */
.js:not(.mgs-motion) :is([data-split], .mgp-archive__title, .mgp-banner__title, .mgp-product__title, .mgp-ov__title, .mgp-related > h2) { opacity: 0; }
.js:not(.mgs-motion) :is(.mgp-crumbs, .mgp-archive__count) { opacity: 0; }
.js:not(.mgs-motion) :is(.mgp-grid > .mgp-card, .mgp-tiles > li, .mgp-archive__intro, .mgp-banner__lead, .mgp-area__text, .mgp-area__how, .mgp-area__cta) { opacity: 0; }
.js:not(.mgs-motion) :is(.mgp-card__media, .mgp-tile__img, .mgp-gallery__main, .mgp-banner) { clip-path: inset(100% 0 0 0); }
/* Photos still downloading show a soft moving placeholder, so a revealed box is never just empty (site.css:429-430). */
.is-loading { background: linear-gradient(100deg, var(--mg-bone-100) 30%, var(--mg-bone-50) 50%, var(--mg-bone-100) 70%) 0 0 / 200% 100%; animation: mg-sheen 1.4s linear infinite; }

/* Reduced motion: exactly the main site's rule (site.css:436-439). */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
  .js [data-reveal]:not(.is-in), .js [data-split]:not(.is-in) .split-word > span, .js [data-reveal="clip"]:not(.is-in) > * { opacity: 1; transform: none; clip-path: none; }
  .js:not(.mgs-motion) :is([data-split], .mgp-archive__title, .mgp-banner__title, .mgp-product__title, .mgp-ov__title, .mgp-related > h2, .mgp-crumbs, .mgp-archive__count, .mgp-grid > .mgp-card, .mgp-tiles > li, .mgp-archive__intro, .mgp-banner__lead, .mgp-area__text, .mgp-area__how, .mgp-area__cta) { opacity: 1; }
  .js:not(.mgs-motion) :is(.mgp-card__media, .mgp-tile__img, .mgp-gallery__main, .mgp-banner), .js [data-reveal="clip"]:not(.is-in) { clip-path: none; }
  .slide__text > * { animation: none !important; } /* No staggered wait at opacity 0 on the banner words. */
}

/* Phones (2.8.0): the theme's own tap targets are at least 40 px and its text at least 12 px. */
.brand { min-height: 44px; }
.hdr-account { min-width: 44px; justify-content: center; }
.cart-link__count, .brand__descriptor, .footer-col h2 { font-size: 12px; }
.link-arrow { min-height: 44px; }
.slides__btn { width: 44px; height: 44px; }
.slides__dots button { width: 40px; height: 40px; }
.mgp-filter a { min-height: 40px; display: inline-flex; align-items: center; }
@media (max-width: 900px) {
  .site-footer .footer-col li a, .site-footer .footer-col p a { display: inline-block; min-width: 44px; padding: 8px 0; }
  .footer-col li + li { margin-top: 0; }
  .footer-col p { margin: 0; }
}

/* 2.9: the home banner runs the full width of the screen and slides sideways, with its controls over the picture.
   Text lines up with the page's content edge. The picture is cropped to fit, so keep words away from its edges. */
.slides { padding: 0; width: 100%; overflow: hidden; background: var(--mg-navy-950); }
.slides__track { overflow: hidden; }
.slides .slide { border-radius: 0; aspect-ratio: 16 / 5; min-height: 280px; max-height: min(640px, 75vh); width: 100%; opacity: 1; visibility: hidden; transform: translateX(var(--from, 100%)); transition: none; }
.slides .slide.is-active { visibility: visible; transform: none; transition: transform .8s var(--ease-out-expo), visibility 0s; }
.slides .slide.is-out { visibility: visible; transform: translateX(var(--to, -100%)); transition: transform .8s var(--ease-out-expo), visibility 0s linear .8s; }
.slides .slide__text { left: max(var(--page-pad), calc((100% - var(--container-max)) / 2 + var(--page-pad))); }
.slides__controls { position: absolute; inset: 0; z-index: 2; display: block; margin: 0; pointer-events: none; }
.slides__controls > * { pointer-events: auto; }
.slides .slides__btn { position: absolute; background: rgba(11, 31, 59, .5); border-color: rgba(255, 255, 255, .4); color: #fff; backdrop-filter: blur(4px); }
.slides .slides__btn:hover { background: rgba(11, 31, 59, .8); border-color: #fff; }
.slides .slides__btn:focus-visible, .slides .slides__dots button:focus-visible { outline-color: #fff; }
/* Arrows sit together at the bottom right, clear of the banner's words on the left. */
.slides .slides__btn { bottom: 14px; width: 42px; height: 42px; }
.slides [data-prev] { right: 112px; }
.slides [data-next] { right: 64px; }
.slides [data-pause] { right: 16px; }
.slides__controls:not(:has([data-pause]:not([hidden]))) [data-prev] { right: 64px; }
.slides__controls:not(:has([data-pause]:not([hidden]))) [data-next] { right: 16px; }
.slides .slides__dots { position: absolute; left: 50%; bottom: 14px; transform: translateX(-50%); margin: 0; padding: 0 6px; border-radius: 999px; background: rgba(11, 31, 59, .45); backdrop-filter: blur(4px); }
.slides .slides__dots button { width: 28px; height: 32px; }
.slides .slides__dots button::before { background: rgba(255, 255, 255, .55); }
.slides .slides__dots button[aria-current="true"]::before { background: #fff; }
@media (max-width: 640px) {
	.slides { padding: 0; }
	.slides .slide { aspect-ratio: 1; min-height: 0; max-height: none; }
	.slides .slide__text { left: var(--page-pad); right: var(--page-pad); bottom: 60px; }
	.slides [data-prev], .slides [data-next] { display: none; } /* Swipe or the dots on phones. */
	.slides .slides__dots button { width: 36px; height: 40px; }
	.slides [data-pause] { bottom: 10px; right: 10px; }
	.slides .slides__dots { bottom: 10px; }
}
@media (prefers-reduced-motion: reduce) {
	.slides .slide, .slides .slide.is-active, .slides .slide.is-out { transition: none; }
	.slides .slide.is-out { visibility: hidden; }
}