/*
  Dabdoobs (دبدوبز) — the preset's own look, ported from the Lovable design.
  The palette, radii and shadow are CSS variables (--db-*) emitted per store from the theme settings
  (apps/storefront/themes/dabdoobs/lib/theme-css.ts); the values below are only fallbacks, so an
  unstyled variable never leaves a blank colour. Logical properties only (Arabic RTL is the default).
  The document is Nahleh's (Dawn CSS loads first: html font-size is 62.5%, so 1rem = 10px); the cart
  drawer and the COD popup are the shared ones and pick the brand up through --color-* (theme-css.ts).
  No theme JavaScript.
*/
html.db-theme {
  --db-cream: #fff8f0; --db-cocoa: #4a2e22; --db-berry: #c92f6b; --db-pink: #ffc8dd;
  --db-honey: #f2b866; --db-mint: #bdebdd; --db-lilac: #d9c8ff; --db-card: #fff;
  --db-cocoa-soft: #7a5a4b; --db-muted: #fbf0e6; --db-border: #f0e4da; --db-berry-ink: #fff;
  --db-radius: 28px; --db-radius-big: 36px; --db-radius-sm: 12px; --db-radius-md: 16px; --db-radius-lg: 20px; --db-radius-xl: 24px;
  --db-shadow-soft: 0 8px 24px rgba(74, 46, 34, 0.1);
  background: var(--db-cream);
  color: var(--db-cocoa);
}
.db-theme body { background: var(--db-cream); color: var(--db-cocoa); }
.db-theme h1, .db-theme h2, .db-theme h3, .db-theme h4 { font-weight: 800; line-height: 1.15; color: var(--db-cocoa); }

/* ---------- motion ---------- */
@keyframes db-bounce-soft { 0%, 100% { transform: translateY(0) scale(1); } 40% { transform: translateY(-4px) scale(1.04); } 70% { transform: translateY(1px) scale(0.98); } }
@keyframes db-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-12px); } }
.db-btn-bounce { transition: transform 0.2s; }
.db-btn-bounce:hover { animation: db-bounce-soft 0.5s ease; }
.db-btn-bounce:active { transform: scale(0.95); }
.db-float-slow { animation: db-float 6s ease-in-out infinite; }

/* ---------- colour helpers ---------- */
.db-bg-pink { background-color: var(--db-pink); color: var(--db-cocoa); }
.db-bg-honey { background-color: var(--db-honey); color: var(--db-cocoa); }
.db-bg-mint { background-color: var(--db-mint); color: var(--db-cocoa); }
.db-bg-lilac { background-color: var(--db-lilac); color: var(--db-cocoa); }
.db-pill-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.8rem;
  padding-block: 1.4rem; padding-inline: 3.2rem; border-radius: 9999px;
  background: var(--db-berry); color: var(--db-berry-ink); font-weight: 700; font-size: 1.8rem;
  text-decoration: none; box-shadow: var(--db-shadow-soft);
}
.db-pill-btn:hover { color: var(--db-berry-ink); }
.db-flag { display: inline-block; inline-size: 24px; block-size: 12px; flex-shrink: 0; border-radius: 3px; vertical-align: middle; }

/* ---------- announcement bar ---------- */
.db-announce { padding-block: 0.8rem; padding-inline: 1.2rem; text-align: center; font-size: 1.3rem; font-weight: 600; background: var(--db-berry); color: var(--db-berry-ink); }
.db-announce__inner { display: inline-flex; align-items: center; gap: 0.8rem; color: inherit; text-decoration: none; }
@media (min-width: 640px) { .db-announce { font-size: 1.4rem; } }

/* ---------- header: the header group's wrapper is the sticky element (the group itself must not be) ---------- */
.db-theme #shopify-section-header-group { display: contents; }
.db-theme [id^="shopify-section-"]:has(> .db-header) { position: sticky; inset-block-start: 0; z-index: 30; }
.db-header { background: color-mix(in srgb, var(--db-cream) 90%, transparent); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); border-block-end: 1px solid var(--db-border); }
.db-header__inner { display: flex; align-items: center; justify-content: space-between; gap: 1.2rem; max-inline-size: 120rem; margin-inline: auto; padding-block: 1.2rem; padding-inline: 1.6rem; }
.db-header__start { display: flex; align-items: center; gap: 1.2rem; min-inline-size: 0; }
.db-header__end { display: flex; align-items: center; gap: 0.8rem; }
.db-header__logo { display: inline-flex; flex-shrink: 0; text-decoration: none; }
.db-logo { inline-size: auto; max-inline-size: 22rem; object-fit: contain; display: block; }
.db-wordmark { font-size: 2.6rem; font-weight: 800; color: var(--db-berry); font-family: var(--font-heading-family); line-height: 1; }
.db-header__where { display: none; align-items: center; gap: 0.6rem; font-size: 1.4rem; color: var(--db-cocoa-soft); white-space: nowrap; }
@media (min-width: 768px) { .db-header__where { display: inline-flex; } }
.db-header__nav { display: none; gap: 0.4rem; margin-inline-start: 1.6rem; }
@media (min-width: 1024px) { .db-header__nav { display: flex; } }
.db-pill { padding-block: 0.6rem; padding-inline: 1.2rem; border-radius: 9999px; font-size: 1.4rem; font-weight: 700; text-decoration: none; color: var(--db-cocoa); transition: background-color 0.2s; }
.db-pill:hover, .db-pill[aria-current="page"] { background: var(--db-pink); color: var(--db-cocoa); }
.db-cart { position: relative; display: inline-grid; place-items: center; inline-size: 4rem; block-size: 4rem; border-radius: 50%; background: var(--db-pink); color: var(--db-cocoa); text-decoration: none; transition: transform 0.2s; }
.db-cart:hover { animation: db-bounce-soft 0.5s ease; }
.db-cart .cart-count-bubble { position: absolute; inset-block-start: -0.4rem; inset-inline-end: -0.4rem; inset-inline-start: auto; inline-size: auto; min-inline-size: 2rem; block-size: 2rem; padding-inline: 0.4rem; display: grid; place-items: center; border-radius: 9999px; background: var(--db-berry); color: var(--db-berry-ink); font-size: 1.1rem; font-weight: 700; line-height: 1; }
.db-header .nh-lang-switch { border-radius: 9999px; background: var(--db-card); box-shadow: var(--db-shadow-soft); }
.db-header .nh-lang-switch__opt { border-radius: 9999px; font-weight: 700; }
.db-header .nh-lang-switch__opt--active { background: var(--db-pink); color: var(--db-cocoa); }

/* ---------- hero ---------- */
.db-hero { position: relative; isolation: isolate; overflow: hidden; border-end-start-radius: var(--db-radius-big); border-end-end-radius: var(--db-radius-big); background: var(--db-pink); color: var(--db-cocoa); }
.db-hero__bg { position: absolute; inset: 0; z-index: -1; }
.db-hero__bg img { inline-size: 100%; block-size: 100%; object-fit: cover; display: block; }
.db-hero__blobs { position: absolute; inset: 0; z-index: -1; overflow: hidden; pointer-events: none; }
.db-hero__blob { position: absolute; border-radius: 50%; }
.db-hero__blob--1 { inset-block-start: -4rem; inset-inline-end: 8%; inline-size: 16rem; block-size: 16rem; background: color-mix(in srgb, var(--db-cream) 80%, transparent); }
.db-hero__blob--2 { inset-block-end: 2.4rem; inset-inline-end: 30%; inline-size: 9.6rem; block-size: 9.6rem; background: var(--db-honey); animation-delay: 1s; }
.db-hero__blob--3 { inset-block-start: 33%; inset-inline-end: -3rem; inline-size: 22.4rem; block-size: 22.4rem; background: var(--db-lilac); animation-delay: 2s; }
.db-hero__blob--4 { inset-block-end: -4.8rem; inset-inline-start: -3.2rem; inline-size: 12.8rem; block-size: 12.8rem; background: color-mix(in srgb, var(--db-cream) 70%, transparent); animation-delay: 1.5s; }
.db-hero__blob--5 { inset-block-start: 3.2rem; inset-inline-start: 45%; inline-size: 4.8rem; block-size: 4.8rem; background: color-mix(in srgb, var(--db-honey) 80%, transparent); animation-delay: 0.5s; }
.db-hero__inner { display: flex; align-items: center; justify-content: space-between; gap: 2rem; max-inline-size: 120rem; margin-inline: auto; min-block-size: 340px; padding-block: 4.8rem; padding-inline: 1.6rem; }
@media (min-width: 640px) { .db-hero__inner { min-block-size: 420px; } }
.db-hero__text { max-inline-size: 57.6rem; display: flex; flex-direction: column; gap: 1.6rem; text-align: start; }
.db-hero__title { margin: 0; font-size: 3.6rem; }
.db-hero__sub { margin: 0; font-size: 1.8rem; color: color-mix(in srgb, var(--db-cocoa) 80%, transparent); }
.db-hero__text .db-pill-btn { align-self: flex-start; }
.db-hero__mascot { inline-size: 22rem; max-inline-size: 35%; block-size: auto; flex-shrink: 0; }
@media (min-width: 640px) { .db-hero__title { font-size: 6rem; } .db-hero__sub { font-size: 2rem; } }
@media (max-width: 639px) { .db-hero__mascot { display: none; } }

/* ---------- home sections ---------- */
.db-section { max-inline-size: 120rem; margin-inline: auto; padding-inline: 1.6rem; padding-block-start: 4.8rem; }
.db-section__head { display: flex; align-items: flex-end; justify-content: space-between; gap: 1.2rem; margin-block-end: 1.6rem; }
.db-section__head h2 { margin: 0; font-size: 2.4rem; }
@media (min-width: 640px) { .db-section__head h2 { font-size: 3rem; } }
.db-section__all { flex-shrink: 0; font-size: 1.4rem; font-weight: 700; color: var(--db-berry); text-decoration: none; }
.db-tiles, .db-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.2rem; }
@media (min-width: 640px) { .db-tiles, .db-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 2rem; } }
.db-tile { display: grid; place-items: center; min-block-size: 11.2rem; padding: 2rem; border-radius: var(--db-radius); text-align: center; text-decoration: none; box-shadow: var(--db-shadow-soft); }
@media (min-width: 640px) { .db-tile { min-block-size: 14.4rem; } }
.db-tile__label { font-family: var(--font-heading-family); font-size: 2rem; font-weight: 800; }
@media (min-width: 640px) { .db-tile__label { font-size: 2.4rem; } }
.db-tile__img { display: block; margin-inline: auto; margin-block-end: 0.8rem; inline-size: 6.4rem; block-size: 6.4rem; object-fit: contain; }

/* product card */
.db-card { display: flex; flex-direction: column; overflow: hidden; border-radius: var(--db-radius); background: var(--db-card); box-shadow: var(--db-shadow-soft); text-decoration: none; color: var(--db-cocoa); transition: transform 0.2s; }
.db-card:hover { transform: translateY(-4px); }
.db-card__media { position: relative; display: block; aspect-ratio: 1; overflow: hidden; border-radius: var(--db-radius); background: var(--db-muted); }
.db-card__media img { inline-size: 100%; block-size: 100%; object-fit: cover; display: block; transition: transform 0.3s; }
.db-card:hover .db-card__media img { transform: scale(1.05); }
.db-card__ph { display: grid; place-items: center; inline-size: 100%; block-size: 100%; font-size: 4.8rem; }
.db-card__badges { position: absolute; inset-block-start: 0.8rem; inset-inline-start: 0.8rem; display: flex; flex-wrap: wrap; gap: 0.4rem; }
.db-badge { padding-block: 0.2rem; padding-inline: 1rem; border-radius: 9999px; font-size: 1.2rem; font-weight: 700; }
.db-card__sold { position: absolute; inset-inline: 0; inset-block-end: 1.2rem; margin-inline: auto; inline-size: fit-content; padding-block: 0.4rem; padding-inline: 1.2rem; border-radius: 9999px; background: var(--db-cocoa); color: var(--db-cream); font-size: 1.2rem; font-weight: 700; }
.db-card__body { display: flex; flex: 1; flex-direction: column; gap: 0.4rem; padding: 1.2rem; }
.db-card__title { font-size: 1.4rem; font-weight: 700; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
@media (min-width: 640px) { .db-card__title { font-size: 1.6rem; } }
.db-card__price { margin-block-start: auto; display: flex; align-items: baseline; gap: 0.8rem; }
.db-card__now { font-family: var(--font-heading-family); font-size: 1.8rem; font-weight: 800; color: var(--db-berry); }
.db-card__was { font-size: 1.2rem; color: var(--db-cocoa-soft); }

/* mystery boxes */
.db-mystery { position: relative; isolation: isolate; overflow: hidden; border-radius: var(--db-radius); background: var(--db-lilac); padding: 2rem; box-shadow: var(--db-shadow-soft); }
@media (min-width: 640px) { .db-mystery { padding: 3.2rem; } }
.db-mystery__note { margin: 0 0 1.6rem; font-weight: 700; }
.db-mystery__tiers { display: grid; grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); gap: 1.2rem; }
.db-tier { display: flex; flex-direction: column; align-items: center; gap: 0.2rem; padding: 1.6rem; border-radius: var(--db-radius-xl); background: var(--db-card); text-align: center; text-decoration: none; color: var(--db-cocoa); box-shadow: var(--db-shadow-soft); }
.db-tier__icon { font-size: 3rem; line-height: 1.2; }
.db-tier__name { font-family: var(--font-heading-family); font-size: 1.8rem; font-weight: 800; }
.db-tier__items { font-size: 1.2rem; color: var(--db-cocoa-soft); }
.db-tier__price { margin-block-start: 0.4rem; font-family: var(--font-heading-family); font-size: 2rem; font-weight: 800; color: var(--db-berry); }
.db-tier__was { font-size: 1.2rem; color: var(--db-cocoa-soft); }

/* how ordering */
.db-steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.2rem; }
@media (min-width: 640px) { .db-steps { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.db-step { padding: 2rem; border-radius: var(--db-radius); text-align: center; box-shadow: var(--db-shadow-soft); }
.db-step p { margin: 0; font-weight: 700; color: var(--db-cocoa); }
.db-step__n { display: grid; place-items: center; inline-size: 4rem; block-size: 4rem; margin-inline: auto; margin-block-end: 0.8rem; border-radius: 50%; background: var(--db-card); font-family: var(--font-heading-family); font-size: 1.8rem; font-weight: 800; color: var(--db-berry); }

/* follow us */
.db-follow { display: flex; flex-wrap: wrap; gap: 1.2rem; }
.db-chip { display: inline-flex; align-items: center; gap: 0.8rem; padding-block: 1.2rem; padding-inline: 2.4rem; border-radius: 9999px; background: var(--db-card); font-weight: 700; color: var(--db-cocoa); text-decoration: none; box-shadow: var(--db-shadow-soft); }
.db-chip__icon { color: var(--db-berry); }

/* ---------- footer ---------- */
.db-footer { margin-block-start: 6.4rem; padding-block: 4rem; padding-inline: 1.6rem; border-start-start-radius: var(--db-radius-big); border-start-end-radius: var(--db-radius-big); background: var(--db-pink); color: var(--db-cocoa); }
.db-footer__inner { display: flex; flex-direction: column; gap: 2.4rem; max-inline-size: 120rem; margin-inline: auto; }
@media (min-width: 640px) { .db-footer__inner { flex-direction: row; align-items: flex-start; justify-content: space-between; } }
.db-footer__col { display: flex; flex-direction: column; gap: 1.2rem; font-size: 1.4rem; }
.db-footer__logo { display: inline-block; color: inherit; text-decoration: none; }
.db-footer .db-logo { block-size: 4.8rem; }
.db-footer .db-wordmark { font-size: 2.8rem; }
.db-footer__tagline { margin: 0; font-family: var(--font-heading-family); font-size: 1.8rem; font-weight: 800; }
.db-footer__proud { margin: 0; display: inline-flex; align-items: center; gap: 0.8rem; font-weight: 700; font-size: 1.5rem; }
.db-footer__note { margin: 0; font-size: 1.4rem; color: var(--db-cocoa-soft); }
.db-footer__link { display: flex; align-items: center; gap: 0.8rem; font-weight: 600; color: var(--db-cocoa); text-decoration: none; }
.db-footer__link:hover { color: var(--db-berry); }
.db-footer__link svg { inline-size: 1.6rem; block-size: 1.6rem; flex-shrink: 0; }

/* ---------- product page ---------- */
.db-product { display: grid; gap: 2.4rem; max-inline-size: 120rem; margin-inline: auto; padding-block: 2.4rem; padding-inline: 1.6rem; }
@media (min-width: 768px) { .db-product { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4rem; } }
.db-gallery { display: flex; flex-direction: column; gap: 1.2rem; min-inline-size: 0; }
.db-gallery__main { overflow: hidden; border-radius: var(--db-radius); background: var(--db-card); box-shadow: var(--db-shadow-soft); aspect-ratio: 1; }
.db-gallery__main img { inline-size: 100%; block-size: 100%; object-fit: cover; display: block; }
.db-gallery__thumbs { display: flex; gap: 0.8rem; overflow-x: auto; }
.db-gallery__thumb { flex-shrink: 0; inline-size: 6.4rem; block-size: 6.4rem; padding: 0; overflow: hidden; border: 2px solid transparent; border-radius: var(--db-radius-lg); background: none; cursor: pointer; }
.db-gallery__thumb[aria-current="true"] { border-color: var(--db-berry); }
.db-gallery__thumb img { inline-size: 100%; block-size: 100%; object-fit: cover; display: block; }
.db-product__info { display: flex; flex-direction: column; gap: 1.6rem; min-inline-size: 0; }
.db-product__badges { display: flex; flex-wrap: wrap; gap: 0.4rem; }
.db-product__title { margin: 0; font-size: 3rem; }
@media (min-width: 640px) { .db-product__title { font-size: 3.6rem; } }
.db-product__price { font-family: var(--font-heading-family); font-size: 3rem; font-weight: 800; color: var(--db-berry); }
.db-product__ready { display: inline-flex; align-items: center; gap: 0.8rem; align-self: flex-start; margin: 0; padding-block: 0.8rem; padding-inline: 1.6rem; border-radius: 9999px; font-size: 1.4rem; font-weight: 700; }
.db-product__desc { color: var(--db-cocoa-soft); font-size: 1.6rem; }
.db-product__note { margin: 0; padding-block: 0.8rem; padding-inline: 1.6rem; border-radius: var(--db-radius-lg); font-size: 1.4rem; font-weight: 600; }
.db-product__wa { display: inline-flex; align-items: center; justify-content: center; padding-block: 1.2rem; padding-inline: 2.4rem; border: 2px solid var(--db-berry); border-radius: 9999px; background: var(--db-card); color: var(--db-berry); font-size: 1.6rem; font-weight: 700; text-decoration: none; }

/* ---------- collection page ---------- */
.db-shop__title { margin: 0 0 2rem; font-size: 3rem; }
@media (min-width: 640px) { .db-shop__title { font-size: 3.6rem; } }
.db-filters { display: flex; flex-wrap: wrap; align-items: center; gap: 1.2rem; margin-block-end: 2.4rem; padding: 1.6rem; border-radius: var(--db-radius); background: var(--db-card); box-shadow: var(--db-shadow-soft); }
.db-filters__sort { padding-block: 0.8rem; padding-inline: 1.6rem; border: 1px solid var(--db-border); border-radius: var(--db-radius-lg); background: var(--db-cream); color: var(--db-cocoa); font-family: inherit; font-size: 1.5rem; font-weight: 600; }
.db-filters__price { display: flex; flex: 1; align-items: center; gap: 1.2rem; min-inline-size: 0; font-size: 1.4rem; font-weight: 600; }
.db-filters__price span { flex-shrink: 0; }
.db-filters__price input { inline-size: 100%; min-inline-size: 8rem; accent-color: var(--db-berry); }
.db-grid--shop { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (min-width: 640px) { .db-grid--shop { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .db-grid--shop { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.db-grid__cell { display: flex; flex-direction: column; min-inline-size: 0; }
.db-grid__cell > .db-card { flex: 1; }
.db-empty { padding-block: 4.8rem; text-align: center; color: var(--db-cocoa-soft); }

/* ---------- the shared (Nahleh) cart and COD popup in the brand's shape ---------- */
.db-theme .button:not(.button--secondary):not(.button--tertiary), .db-theme .cart__checkout-button { border-radius: 9999px; }

@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; } }