/* Storefront presentation only. No account, checkout or pricing rules. */
:root { --sunnah-header-clearance: 160px; }
.page-content { padding-top: max(114px, var(--sunnah-header-clearance)) !important; }
[data-layout="horizontal"] .page-content { padding-top: max(170px, var(--sunnah-header-clearance)) !important; }
.sunnah-app-banner { display:flex; align-items:center; justify-content:space-between; gap:16px; padding:14px 20px; margin:0 0 24px; border:1px solid #d5e5dc; border-radius:12px; background:#edf5ef; color:#174936; }
.sunnah-app-banner p { margin:0; font-weight:600; }
.sunnah-app-banner a { flex-shrink:0; }
.sunnah-app-banner img { display:block; height:40px; max-width:100%; }
.sunnah-home { background:#f8f7f3; }
.sunnah-hero { display:grid; grid-template-columns:1fr 1fr; align-items:center; gap:36px; padding:48px; margin:0 0 32px; background:#eeeae0; border-radius:20px; overflow:hidden; }
.sunnah-eyebrow { color:#276048; font-size:12px; font-weight:600; letter-spacing:2px; text-transform:uppercase; }
.sunnah-hero h1 { color:#123d2e; font-family:Georgia,serif; font-size:clamp(36px,4.4vw,64px); line-height:1.08; font-weight:400; max-width:540px; margin:16px 0 20px; }
.sunnah-hero-copy > p:not(.sunnah-eyebrow) { color:#535d56; font-size:16px; line-height:1.75; max-width:440px; }
.sunnah-hero-actions { display:flex; flex-wrap:wrap; gap:12px; margin:24px 0 18px; }
.sunnah-hero-actions .btn { padding:13px 20px; border-radius:6px; font-weight:600; }
.sunnah-hero-note { font-size:12px !important; color:#42624f !important; }
.sunnah-hero-art { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); align-items:stretch; gap:16px; }
.sunnah-hero-product { display:flex; flex-direction:column; min-width:0; color:#173c2e; background:#fffdf8; border:1px solid #e1e0d6; border-radius:140px 140px 14px 14px; overflow:hidden; text-align:center; box-shadow:0 5px 18px #173c2e08; }
.sunnah-hero-product img { display:block; width:100%; height:320px; object-fit:contain; padding:18px 8px 0; }
.sunnah-hero-product .sunnah-hero-product-name { display:block; padding:16px 12px 8px; font-size:13px; line-height:1.5; font-weight:600; overflow-wrap:anywhere; }
.sunnah-hero-product .sunnah-hero-product-action { display:block; margin-top:auto; padding:10px 12px 16px; font-size:12px; font-weight:600; }
.sunnah-hero-product-action b { margin-left:4px; }
.sunnah-hero-product:focus-visible { outline:3px solid #007f45; outline-offset:3px; }
.sunnah-home #homeCarousel { border-radius:16px; overflow:hidden; }
.sunnah-home .effect-card { border:1px solid #e2e7df; border-radius:12px; overflow:hidden; box-shadow:0 4px 16px #173c2e08; }
.sunnah-home .section-title { color:#173c2e; }
.sunnah-home .section-subtitle { max-width:560px; margin:0 auto; }
.sunnah-collection-intro { padding:12px 0 24px; }
.sunnah-collection-intro h1 { color:#173c2e; font-family:Georgia,serif; font-size:36px; }
.sunnah-collection-intro p { color:#606c64; max-width:620px; }
.sunnah-reviews { margin:40px 12px; padding:36px 24px; border:1px solid #dae3d9; border-radius:16px; text-align:center; background:#fffdf8; }
.sunnah-reviews h2 { color:#173c2e; font-family:Georgia,serif; font-size:32px; }
.sunnah-reviews p { color:#606c64; }
.sunnah-review-slot { min-height:160px; }
/* Never flash the floating badge over products before its local anchor is ready. */
.es-portal-root.eapps-google-reviews-94c5cfff-5da8-4a12-90dc-44d3406feddc-custom-css-root:not(.sunnah-reviews-anchored) { visibility:hidden; }
@media(max-width:767.98px) {
  :root { --sunnah-header-clearance:128px; }
  .sunnah-app-banner { padding:12px; gap:12px; flex-wrap:wrap; margin-bottom:18px; }
  .sunnah-app-banner p { flex:1 1 160px; font-size:13px; }
  .sunnah-hero { grid-template-columns:1fr; gap:18px; padding:28px 20px 20px; border-radius:14px; margin-bottom:24px; }
  .sunnah-hero h1 { font-size:36px; max-width:340px; margin:12px 0 14px; }
  .sunnah-hero-copy > p:not(.sunnah-eyebrow) { font-size:14px; line-height:1.6; }
  .sunnah-hero-actions { gap:10px; margin:20px 0 12px; }
  .sunnah-hero-actions .btn { font-size:13px; padding:12px 14px; }
  .sunnah-hero-art { gap:12px; }
  .sunnah-hero-product img { height:180px; }
  .sunnah-hero-product .sunnah-hero-product-name { padding:12px 8px 6px; font-size:11px; }
  .sunnah-hero-product .sunnah-hero-product-action { padding:8px 6px 12px; font-size:11px; }
  .sunnah-home #homeCarousel { display:block; border-radius:12px; }
  .sunnah-home #homeCarousel .carousel-item img { width:100%; height:auto; }
  .sunnah-home #homeCarousel .carousel-control-prev,
  .sunnah-home #homeCarousel .carousel-control-next { min-width:44px; }
  .sunnah-reviews { padding:28px 16px; }
}
@media(prefers-reduced-motion:reduce) { .sunnah-home .carousel-item { transition:none; } }

/* Homepage only: measured navigation clearance replaces the large theme minimum. */
.page-content.sunnah-home,
[data-layout="horizontal"] .page-content.sunnah-home {
  padding-top:var(--sunnah-home-clearance, var(--sunnah-header-clearance)) !important;
  margin-top:0 !important;
}
.sunnah-hero {
  padding:clamp(20px,2.2vw,32px); gap:28px;
  background:linear-gradient(120deg,#f0ebdf 0%,#faf7ee 46%,#eee9dc 100%);
  border:1px solid #d8ccb2; box-shadow:inset 0 1px 0 #ffffff,0 12px 32px #173c2e09;
}
.sunnah-hero h1 { font-size:clamp(36px,3.7vw,54px); margin:12px 0 16px; }
.sunnah-hero-copy > p:not(.sunnah-eyebrow) { font-size:15px; line-height:1.65; }
.sunnah-hero-copy .sunnah-eyebrow { margin-bottom:0; font-size:11px; letter-spacing:1.8px; }
.sunnah-hero-actions { margin:20px 0 14px; }
.sunnah-hero-actions .btn { border-radius:9px; }
.sunnah-hero-actions .btn-primary { background:linear-gradient(145deg,#139457,#006b39); border-color:#087e46; box-shadow:inset 0 1px 0 #ffffff35,0 5px 12px #087b4520; }
.sunnah-hero-note { margin-bottom:0; }
.sunnah-hero-showcase { min-width:0; }
.sunnah-hero-art { gap:14px; }
.sunnah-hero-product { position:relative; border-radius:110px 110px 16px 16px; border-color:#d9cfb9; background:linear-gradient(145deg,#ffffff 5%,#fffdf7 58%,#f3eddf); box-shadow:inset 0 0 0 3px #ffffffb0,0 8px 20px #173c2e0d; }
.sunnah-hero-product::after { content:""; pointer-events:none; position:absolute; inset:0; border-radius:inherit; background:linear-gradient(125deg,#ffffff38,transparent 35%,transparent 80%,#dfc99412); }
.sunnah-hero-product img { height:250px; padding:12px 10px 0; }
.sunnah-hero-product .sunnah-hero-product-name {
  padding:12px 12px 6px; height:calc(4.5em + 18px); display:-webkit-box; -webkit-line-clamp:3;
  -webkit-box-orient:vertical; overflow:hidden; flex-shrink:0;
}
.sunnah-hero-product .sunnah-hero-product-action { color:#007b43; padding:6px 12px 12px; }
.sunnah-hero-product-action b { display:inline-flex; width:24px; height:24px; align-items:center; justify-content:center; border:1px solid #d9cfb9; border-radius:50%; background:#fffdf8; }
.sunnah-hero-controls { display:flex; align-items:center; justify-content:space-between; gap:8px; padding:8px 2px 0; color:#587061; font-size:12px; }
.sunnah-hero-controls[hidden] { display:none; }
.sunnah-hero-controls > div { display:flex; gap:6px; }
.sunnah-hero-controls button { min-height:44px; padding:8px 13px; border:1px solid #d4c8af; border-radius:24px; color:#174936; background:linear-gradient(#fffefb,#f1ecdf); box-shadow:inset 0 1px 0 white; font:inherit; font-weight:600; }
.sunnah-hero-controls button:hover { background:#e1eade; }
.sunnah-hero-controls button:focus-visible { outline:3px solid #007f45; outline-offset:2px; }
@media(max-width:767.98px) {
  .sunnah-hero { padding:20px 14px 12px; gap:14px; }
  .sunnah-hero h1 { font-size:32px; margin:10px 0 12px; }
  .sunnah-hero-copy > p:not(.sunnah-eyebrow) { font-size:14px; line-height:1.55; }
  .sunnah-hero-copy .sunnah-eyebrow { font-size:10px; letter-spacing:1.4px; }
  .sunnah-hero-actions { margin:16px 0 10px; }
  .sunnah-hero-art { gap:10px; }
  .sunnah-hero-product img { height:160px; padding:8px 5px 0; }
  .sunnah-hero-product-action b { width:20px; height:20px; }
  .sunnah-hero-product .sunnah-hero-product-name { height:calc(4.5em + 18px); }
  .sunnah-hero-controls { font-size:11px; }
  .sunnah-hero-controls button { padding:8px 11px; }
}
@media(max-width:359px) { .sunnah-hero-controls > span { max-width:85px; } }