/* Dalle Pepper design system
   Architecture contract:
   1. app.css is the compiled application bundle.
   2. design-system.css is the maintainable product layer for shared admin/public UI.
   3. Admin and customer views use the same theme tokens; role only changes controls and permissions.
   4. Components should be responsive by contract, not by one-off viewport patches.
*/

:root{
  --dp-radius-control:.45rem;
  --dp-radius-panel:.75rem;
  --dp-shadow-panel:0 18px 42px rgba(21,49,78,.18);
  --dp-rail-button-min:8rem;
  --dp-rail-button-fluid:24cqw;
  --dp-rail-button-max:12.5rem;
}

/* Customer notifications must not block fixed mobile controls after add-to-cart. */
body:not(:has(.admin-shell)) [aria-label="Notifications alt+T"]{
  pointer-events:none!important;
}

body:not(:has(.admin-shell)) [aria-label="Notifications alt+T"] button{
  pointer-events:auto!important;
}

/* Public theme token contract. Admin publishes one of these theme ids; customer
   buttons only switch the root id, and every public surface consumes these vars. */
html.theme-parchment, body.theme-parchment, html[data-theme="theme-parchment"]{--background:40 25% 95%;--foreground:20 50% 5%;--card:40 25% 98%;--card-foreground:20 50% 5%;--popover:40 25% 98%;--popover-foreground:20 50% 5%;--primary:35 70% 40%;--primary-foreground:40 25% 95%;--secondary:40 20% 90%;--secondary-foreground:20 50% 5%;--muted:40 20% 90%;--muted-foreground:20 30% 40%;--accent:35 70% 40%;--accent-foreground:40 25% 95%;--destructive:0 84% 60%;--destructive-foreground:40 25% 95%;--border:40 20% 85%;--input:40 20% 85%;--ring:35 70% 40%;--light-key:35 80% 85%;--light-fill:40 50% 90%;--light-rim:45 90% 95%}
html.theme-nepal, body.theme-nepal, html[data-theme="theme-nepal"]{--background:205 72% 77%;--foreground:20 42% 8%;--card:204 72% 88%;--card-foreground:20 42% 8%;--popover:204 72% 90%;--popover-foreground:20 42% 8%;--primary:4 66% 32%;--primary-foreground:205 72% 96%;--secondary:204 58% 82%;--secondary-foreground:20 42% 8%;--muted:204 58% 82%;--muted-foreground:20 20% 38%;--accent:42 80% 54%;--accent-foreground:20 42% 8%;--destructive:0 84% 60%;--destructive-foreground:205 72% 96%;--border:205 42% 70%;--input:205 42% 70%;--ring:4 66% 32%;--light-key:205 90% 95%;--light-fill:205 70% 82%;--light-rim:4 76% 42%}
html.theme-midnight, body.theme-midnight, html[data-theme="theme-midnight"]{--background:20 20% 3%;--foreground:40 30% 90%;--card:20 20% 5%;--card-foreground:40 30% 90%;--popover:20 20% 5%;--popover-foreground:40 30% 90%;--primary:40 85% 50%;--primary-foreground:20 20% 3%;--secondary:20 20% 10%;--secondary-foreground:40 30% 90%;--muted:20 20% 10%;--muted-foreground:40 20% 60%;--accent:40 85% 50%;--accent-foreground:20 20% 3%;--destructive:0 62% 30%;--destructive-foreground:40 30% 90%;--border:20 20% 15%;--input:20 20% 15%;--ring:40 85% 50%;--light-key:210 50% 30%;--light-fill:230 40% 15%;--light-rim:200 60% 40%}
html.theme-ember, body.theme-ember, html[data-theme="theme-ember"]{--background:10 60% 10%;--foreground:30 80% 85%;--card:10 60% 14%;--card-foreground:30 80% 85%;--popover:10 60% 14%;--popover-foreground:30 80% 85%;--primary:35 90% 55%;--primary-foreground:10 60% 10%;--secondary:10 50% 20%;--secondary-foreground:30 80% 85%;--muted:10 50% 20%;--muted-foreground:30 60% 70%;--accent:35 90% 55%;--accent-foreground:10 60% 10%;--destructive:0 62% 30%;--destructive-foreground:30 80% 85%;--border:10 50% 25%;--input:10 50% 25%;--ring:35 90% 55%;--light-key:15 80% 50%;--light-fill:5 60% 20%;--light-rim:25 90% 60%}
html.theme-crimson, body.theme-crimson, html[data-theme="theme-crimson"]{--background:354 58% 95%;--foreground:350 38% 10%;--card:0 70% 98%;--card-foreground:350 38% 10%;--popover:0 70% 98%;--popover-foreground:350 38% 10%;--primary:354 68% 38%;--primary-foreground:0 90% 98%;--secondary:354 30% 88%;--secondary-foreground:350 38% 10%;--muted:354 30% 90%;--muted-foreground:350 18% 34%;--accent:40 86% 54%;--accent-foreground:350 38% 10%;--border:354 28% 78%;--input:354 28% 78%;--ring:354 68% 38%;--light-key:0 90% 96%;--light-fill:354 48% 78%;--light-rim:40 86% 62%}
html.theme-orange, body.theme-orange, html[data-theme="theme-orange"]{--background:31 90% 94%;--foreground:25 60% 10%;--card:36 100% 98%;--card-foreground:25 60% 10%;--popover:36 100% 98%;--popover-foreground:25 60% 10%;--primary:24 92% 44%;--primary-foreground:36 100% 98%;--secondary:32 78% 86%;--secondary-foreground:25 60% 10%;--muted:32 62% 90%;--muted-foreground:25 32% 34%;--accent:45 96% 52%;--accent-foreground:25 60% 10%;--border:30 54% 76%;--input:30 54% 76%;--ring:24 92% 44%;--light-key:38 100% 92%;--light-fill:28 88% 80%;--light-rim:45 96% 62%}
html.theme-yellow, body.theme-yellow, html[data-theme="theme-yellow"]{--background:49 92% 93%;--foreground:38 58% 10%;--card:50 100% 98%;--card-foreground:38 58% 10%;--popover:50 100% 98%;--popover-foreground:38 58% 10%;--primary:42 88% 42%;--primary-foreground:50 100% 98%;--secondary:49 70% 84%;--secondary-foreground:38 58% 10%;--muted:49 60% 88%;--muted-foreground:38 28% 34%;--accent:8 70% 42%;--accent-foreground:50 100% 98%;--border:48 48% 72%;--input:48 48% 72%;--ring:42 88% 42%;--light-key:52 100% 94%;--light-fill:48 86% 78%;--light-rim:8 70% 50%}
html.theme-glass, body.theme-glass, html[data-theme="theme-glass"]{--background:202 76% 92%;--foreground:204 44% 12%;--card:200 82% 98%;--card-foreground:204 44% 12%;--popover:200 82% 98%;--popover-foreground:204 44% 12%;--primary:198 66% 38%;--primary-foreground:200 100% 98%;--secondary:198 54% 86%;--secondary-foreground:204 44% 12%;--muted:198 44% 88%;--muted-foreground:204 18% 34%;--accent:174 58% 46%;--accent-foreground:200 100% 98%;--border:198 38% 74%;--input:198 38% 74%;--ring:198 66% 38%;--light-key:200 100% 98%;--light-fill:198 68% 84%;--light-rim:174 58% 56%}
html.theme-snow, body.theme-snow, html[data-theme="theme-snow"]{--background:205 60% 96%;--foreground:210 36% 12%;--card:0 0% 100%;--card-foreground:210 36% 12%;--primary:6 56% 34%;--primary-foreground:0 0% 100%;--secondary:205 45% 88%;--secondary-foreground:210 36% 12%;--muted:205 45% 91%;--muted-foreground:210 18% 36%;--accent:43 78% 52%;--border:205 28% 80%;--input:205 28% 80%;--ring:6 56% 34%}
html.theme-prayer, body.theme-prayer, html[data-theme="theme-prayer"]{--background:203 75% 90%;--foreground:219 35% 12%;--card:45 90% 97%;--card-foreground:219 35% 12%;--primary:352 72% 42%;--primary-foreground:0 0% 100%;--secondary:208 55% 84%;--muted:208 48% 88%;--accent:46 86% 52%;--border:204 36% 74%;--input:204 36% 74%;--ring:352 72% 42%}
html.theme-copper, body.theme-copper, html[data-theme="theme-copper"]{--background:23 42% 84%;--foreground:23 46% 10%;--card:24 72% 97%;--card-foreground:23 46% 10%;--primary:19 66% 36%;--primary-foreground:24 72% 97%;--secondary:24 42% 86%;--muted:24 38% 90%;--accent:38 76% 48%;--border:24 32% 72%;--input:24 32% 72%;--ring:19 66% 36%}
html.theme-juniper, body.theme-juniper, html[data-theme="theme-juniper"]{--background:145 34% 91%;--foreground:146 42% 10%;--card:145 60% 98%;--card-foreground:146 42% 10%;--primary:150 48% 30%;--primary-foreground:145 60% 98%;--secondary:145 28% 84%;--muted:145 24% 88%;--accent:35 78% 48%;--border:145 24% 70%;--input:145 24% 70%;--ring:150 48% 30%}
html.theme-saffron, body.theme-saffron, html[data-theme="theme-saffron"]{--background:42 86% 91%;--foreground:32 64% 10%;--card:42 100% 98%;--card-foreground:32 64% 10%;--primary:32 92% 40%;--primary-foreground:42 100% 98%;--secondary:42 64% 82%;--muted:42 58% 87%;--accent:6 68% 40%;--border:42 42% 70%;--input:42 42% 70%;--ring:32 92% 40%}
html.theme-charcoal, body.theme-charcoal, html[data-theme="theme-charcoal"]{--background:22 8% 9%;--foreground:36 28% 92%;--card:30 10% 14%;--card-foreground:36 28% 92%;--primary:0 62% 40%;--primary-foreground:36 28% 92%;--secondary:30 8% 18%;--muted:30 8% 18%;--accent:38 78% 50%;--border:30 8% 24%;--input:30 8% 24%;--ring:0 62% 40%}
html.theme-blueice, body.theme-blueice, html[data-theme="theme-blueice"]{--background:199 80% 91%;--foreground:202 48% 12%;--card:200 100% 98%;--card-foreground:202 48% 12%;--primary:201 62% 38%;--primary-foreground:200 100% 98%;--secondary:199 54% 84%;--muted:199 46% 88%;--accent:9 66% 42%;--border:199 36% 72%;--input:199 36% 72%;--ring:201 62% 38%}
html.theme-mango, body.theme-mango, html[data-theme="theme-mango"]{--background:37 100% 90%;--foreground:27 70% 10%;--card:39 100% 97%;--card-foreground:27 70% 10%;--primary:15 82% 46%;--primary-foreground:39 100% 97%;--secondary:37 76% 82%;--muted:37 66% 87%;--accent:49 94% 52%;--border:37 48% 70%;--input:37 48% 70%;--ring:15 82% 46%}
html.theme-clay, body.theme-clay, html[data-theme="theme-clay"]{--background:16 38% 86%;--foreground:16 52% 10%;--card:19 66% 97%;--card-foreground:16 52% 10%;--primary:12 66% 34%;--primary-foreground:19 66% 97%;--secondary:17 36% 82%;--muted:17 30% 88%;--accent:34 78% 48%;--border:17 30% 70%;--input:17 30% 70%;--ring:12 66% 34%}
html.theme-teal, body.theme-teal, html[data-theme="theme-teal"]{--background:181 48% 90%;--foreground:180 54% 9%;--card:180 70% 97%;--card-foreground:180 54% 9%;--primary:180 56% 30%;--primary-foreground:180 70% 97%;--secondary:180 35% 82%;--muted:180 30% 87%;--accent:35 80% 48%;--border:180 28% 68%;--input:180 28% 68%;--ring:180 56% 30%}
html.theme-lotus, body.theme-lotus, html[data-theme="theme-lotus"]{--background:12 58% 93%;--foreground:352 34% 13%;--card:18 82% 98%;--card-foreground:352 34% 13%;--primary:348 48% 42%;--primary-foreground:18 82% 98%;--secondary:12 40% 86%;--muted:12 34% 90%;--accent:42 76% 52%;--border:12 28% 76%;--input:12 28% 76%;--ring:348 48% 42%}
html.theme-purple, body.theme-purple, html[data-theme="theme-purple"]{--background:270 40% 91%;--foreground:271 36% 12%;--card:276 70% 98%;--card-foreground:271 36% 12%;--primary:265 56% 42%;--primary-foreground:276 70% 98%;--secondary:270 32% 84%;--muted:270 28% 88%;--accent:36 76% 50%;--border:270 28% 74%;--input:270 28% 74%;--ring:265 56% 42%}

body{
  font-family:var(--site-body-font,"DM Sans",Arial,sans-serif)!important;
}

h1,h2,h3,h4,h5,h6,.font-serif{
  font-family:var(--site-heading-font,"Lora",Georgia,serif)!important;
}

/* Shared admin/customer theme contract. */
.admin-shell{
  --admin-glass:color-mix(in srgb,var(--admin-panel-color,#fbfdff) 52%,transparent);
  --admin-glass-strong:color-mix(in srgb,var(--admin-panel-color,#fbfdff) 68%,transparent);
  --admin-glass-border:rgba(255,255,255,.38);
  --admin-glass-shadow:0 22px 64px rgba(19,34,51,.22);
  --admin-control-bg:rgba(255,255,255,.72);
  background:
    radial-gradient(circle at 10% 4%,color-mix(in srgb,var(--admin-accent-color,#c65d00) 22%,transparent),transparent 28rem),
    linear-gradient(180deg,color-mix(in srgb,var(--admin-bg-color,#dff1ff) 78%,white) 0%,color-mix(in srgb,var(--admin-bg-color,#eef8ff) 46%,white) 48%,#f8fbff 100%)!important;
  color:var(--admin-text-color,#142033)!important;
  text-shadow:none!important;
}

.admin-shell .admin-panel,
.admin-shell form.admin-panel,
.admin-shell [data-admin-font-color-controls],
.admin-enhancer-panel{
  background:linear-gradient(145deg,var(--admin-glass),var(--admin-glass-strong))!important;
  color:var(--admin-text-color,#142033)!important;
  border:1px solid var(--admin-glass-border)!important;
  border-radius:var(--dp-radius-panel)!important;
  box-shadow:var(--admin-glass-shadow)!important;
  background-clip:padding-box;
  -webkit-backdrop-filter:blur(22px) saturate(1.35);
  backdrop-filter:blur(22px) saturate(1.35);
}

.admin-shell h1,
.admin-shell h2,
.admin-shell h3,
.admin-shell h4,
.admin-shell p,
.admin-shell label,
.admin-shell span,
.admin-shell li,
.admin-shell div{
  color:var(--admin-text-color,#142033)!important;
  text-shadow:none!important;
}

.admin-shell input:not([type=color]),
.admin-shell textarea,
.admin-shell select{
  min-width:0;
  background:var(--admin-control-bg)!important;
  color:#101827!important;
  border:1px solid rgba(23,42,64,.38)!important;
  border-radius:var(--dp-radius-control)!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.36)!important;
}

.admin-shell input[type=color]{
  min-height:2.75rem;
  padding:.25rem!important;
  border-radius:var(--dp-radius-control)!important;
  cursor:pointer;
}

.admin-shell button,
.admin-shell label,
.admin-shell input,
.admin-shell textarea,
.admin-shell select{
  border-radius:var(--dp-radius-control)!important;
}

.admin-shell .rounded-xl{
  border-radius:.9rem!important;
}

.admin-shell .rounded-lg{
  border-radius:.7rem!important;
}

.admin-shell button.bg-amber-600,
.admin-shell .bg-amber-600,
.admin-shell button[type=submit],
.admin-shell [data-admin-settings-push]{
  background:var(--admin-accent-color,#c65d00)!important;
  color:#fff!important;
}

/* Admin cockpit: one operations surface for content, design, payments, and rollback. */
.dp-admin-view,
body:has(.admin-shell){
  --cockpit-bg:#11161d;
  --cockpit-panel:#18212b;
  --cockpit-panel-soft:#202b36;
  --cockpit-line:rgba(214,226,238,.18);
  --cockpit-text:#f6f8fb;
  --cockpit-muted:#a9b7c6;
  --cockpit-red:#d92d20;
  --cockpit-amber:#f2a51f;
  --cockpit-teal:#21b8a5;
  --cockpit-field:#0f151d;
  --cockpit-card:#f8fafc;
  --cockpit-card-text:#111827;
  --cockpit-card-muted:#475569;
  background:var(--cockpit-bg)!important;
}

.dp-admin-view,
body:has(.admin-shell){
  min-width:100vw;
  width:100vw;
  min-height:100vh;
  margin:0;
  overflow-x:hidden;
}

html:has(.admin-shell),
html:has(.admin-shell) body,
html:has(.admin-shell) #root,
body.dp-admin-view,
body.dp-admin-view #root{
  min-width:100%;
  width:100%;
  min-height:100%;
  margin:0;
  background:var(--cockpit-bg,#11161d)!important;
}

body:has(.admin-shell) #root > *,
body.dp-admin-view #root > *,
body:has(.admin-shell) main > *,
body.dp-admin-view main > *{
  width:100%!important;
  max-width:none!important;
  min-width:0!important;
  min-height:100vh;
  transform:none!important;
  scale:1!important;
  transform-origin:top left!important;
}

body:has(.admin-shell) main:has(.admin-shell),
body.dp-admin-view main:has(.admin-shell){
  width:100vw!important;
  max-width:none!important;
  min-height:100vh;
  transform:none!important;
  scale:1!important;
}

body:has(.admin-shell) header,
body:has(.admin-shell) footer,
body.dp-admin-view header,
body.dp-admin-view footer{
  display:none!important;
}

body:has(.admin-shell) main,
body.dp-admin-view main,
body:has(.admin-shell) .admin-shell,
body.dp-admin-view .admin-shell{
  display:block;
  width:100%;
  min-width:0;
  min-height:100vh;
  box-sizing:border-box;
  background:var(--cockpit-bg,#11161d)!important;
}

body:has(.admin-shell) .admin-shell{
  padding:clamp(.75rem,1.4vw,1.25rem);
}

body:has(.admin-shell) .admin-shell > div:first-child,
body.dp-admin-view .admin-shell > div:first-child{
  width:min(1540px,100%)!important;
  max-width:calc(100vw - 2rem)!important;
  margin-inline:auto!important;
}

.dp-admin-view .admin-shell,
body:has(.admin-shell) .admin-shell{
  min-height:100vh;
  background:
    linear-gradient(90deg,rgba(255,255,255,.035) 1px,transparent 1px),
    linear-gradient(180deg,rgba(255,255,255,.03) 1px,transparent 1px),
    radial-gradient(circle at 12% 0%,rgba(217,45,32,.16),transparent 26rem),
    radial-gradient(circle at 88% 8%,rgba(33,184,165,.14),transparent 28rem),
    linear-gradient(180deg,#10151c 0%,#151d26 48%,#0f141b 100%)!important;
  background-size:36px 36px,36px 36px,auto,auto,auto!important;
  color:var(--cockpit-text)!important;
}

.dp-admin-view .admin-shell > div,
.dp-admin-view .admin-shell .mx-auto,
.dp-admin-view .admin-shell [class*="max-w-"],
body:has(.admin-shell) .admin-shell > div,
body:has(.admin-shell) .admin-shell .mx-auto,
body:has(.admin-shell) .admin-shell [class*="max-w-"]{
  max-width:min(1540px,calc(100vw - 2rem))!important;
}

.dp-admin-view .admin-shell .admin-panel,
.dp-admin-view .admin-shell form.admin-panel,
.dp-admin-view .admin-shell [data-admin-font-color-controls],
.dp-admin-view .admin-enhancer-panel,
.dp-admin-view .admin-tab-shell{
  background:linear-gradient(145deg,rgba(24,33,43,.92),rgba(14,20,28,.84))!important;
  border:1px solid var(--cockpit-line)!important;
  box-shadow:0 18px 52px rgba(0,0,0,.32),inset 0 1px 0 rgba(255,255,255,.06)!important;
  color:var(--cockpit-text)!important;
  -webkit-backdrop-filter:blur(20px) saturate(1.25);
  backdrop-filter:blur(20px) saturate(1.25);
}

.dp-admin-view .admin-shell .bg-white,
.dp-admin-view .admin-shell .bg-card,
.dp-admin-view .admin-shell .bg-background,
.dp-admin-view .admin-shell [class*="bg-white"],
.dp-admin-view .admin-shell [class*="bg-card"],
.dp-admin-view .admin-shell [class*="bg-slate"],
.dp-admin-view .admin-shell [class*="bg-zinc"],
.dp-admin-view .admin-shell [class*="border-slate"],
.dp-admin-view .admin-shell [class*="border-zinc"]{
  background:linear-gradient(145deg,rgba(24,33,43,.92),rgba(14,20,28,.84))!important;
  border-color:var(--cockpit-line)!important;
  color:var(--cockpit-text)!important;
}

.dp-admin-view .admin-shell [class*="bg-muted"],
.dp-admin-view .admin-shell [class*="bg-neutral"],
.dp-admin-view .admin-shell [class*="bg-stone"]{
  background:rgba(255,255,255,.045)!important;
  border-color:rgba(214,226,238,.14)!important;
  color:var(--cockpit-text)!important;
}

.dp-admin-view .admin-shell section,
.dp-admin-view .admin-shell form,
.dp-admin-view .admin-shell aside,
.dp-admin-view .admin-shell article,
.dp-admin-view .admin-shell [class*="rounded-xl"],
.dp-admin-view .admin-shell [class*="rounded-2xl"],
.dp-admin-view .admin-shell [class*="shadow"],
.dp-admin-view .admin-shell [class*="border"]{
  background:linear-gradient(145deg,rgba(24,33,43,.9),rgba(14,20,28,.82))!important;
  border-color:var(--cockpit-line)!important;
  color:var(--cockpit-text)!important;
  box-shadow:0 18px 52px rgba(0,0,0,.26),inset 0 1px 0 rgba(255,255,255,.045)!important;
}

.dp-admin-view .admin-shell [class*="rounded-xl"] [class*="rounded"],
.dp-admin-view .admin-shell [class*="rounded-2xl"] [class*="rounded"]{
  background:rgba(255,255,255,.04)!important;
}

.dp-admin-view .admin-shell [class*="bg-white"],
.dp-admin-view .admin-shell [class*="bg-card"],
.dp-admin-view .admin-shell [class*="bg-background"],
.dp-admin-view .dalle-backend-control .dbc-grid > div,
.dp-admin-view .admin-shell .admin-stat-card,
.dp-admin-view .admin-shell [data-admin-stat]{
  background:var(--cockpit-card)!important;
  color:var(--cockpit-card-text)!important;
  border-color:rgba(15,23,42,.12)!important;
  text-shadow:none!important;
}

.dp-admin-view .admin-shell [class*="bg-white"] *,
.dp-admin-view .admin-shell [class*="bg-card"] *,
.dp-admin-view .admin-shell [class*="bg-background"] *,
.dp-admin-view .dalle-backend-control .dbc-grid > div *,
.dp-admin-view .admin-shell .admin-stat-card *,
.dp-admin-view .admin-shell [data-admin-stat] *{
  color:var(--cockpit-card-text)!important;
  text-shadow:none!important;
}

.dp-admin-view .admin-shell [class*="bg-white"] p,
.dp-admin-view .admin-shell [class*="bg-white"] span,
.dp-admin-view .admin-shell [class*="bg-card"] p,
.dp-admin-view .admin-shell [class*="bg-card"] span,
.dp-admin-view .admin-shell [class*="bg-background"] p,
.dp-admin-view .admin-shell [class*="bg-background"] span,
.dp-admin-view .dalle-backend-control .dbc-grid > div{
  color:var(--cockpit-card-muted)!important;
}

.dp-admin-view .admin-shell [class*="bg-white"] strong,
.dp-admin-view .admin-shell [class*="bg-white"] b,
.dp-admin-view .admin-shell [class*="bg-card"] strong,
.dp-admin-view .admin-shell [class*="bg-card"] b,
.dp-admin-view .admin-shell [class*="bg-background"] strong,
.dp-admin-view .admin-shell [class*="bg-background"] b,
.dp-admin-view .dalle-backend-control .dbc-grid strong{
  color:var(--cockpit-card-text)!important;
}

.dp-admin-view .admin-shell [class*="text-slate"],
.dp-admin-view .admin-shell [class*="text-zinc"],
.dp-admin-view .admin-shell [class*="text-neutral"],
.dp-admin-view .admin-shell [class*="text-stone"],
.dp-admin-view .admin-shell [class*="text-gray"]{
  color:var(--cockpit-muted)!important;
}

.dp-admin-view .admin-shell [class*="text-red"],
.dp-admin-view .admin-shell [class*="text-orange"],
.dp-admin-view .admin-shell [class*="text-amber"]{
  color:var(--admin-accent-color,var(--cockpit-amber))!important;
}

.dp-admin-view .admin-shell h1,
.dp-admin-view .admin-shell h2,
.dp-admin-view .admin-shell h3,
.dp-admin-view .admin-shell h4,
.dp-admin-view .admin-shell p,
.dp-admin-view .admin-shell label,
.dp-admin-view .admin-shell span,
.dp-admin-view .admin-shell li,
.dp-admin-view .admin-shell div{
  color:inherit!important;
}

.dp-admin-view .admin-shell p,
.dp-admin-view .admin-help-text,
.dp-admin-view .admin-enhancer-status{
  color:var(--cockpit-muted)!important;
}

/* Label Maker preview = a faithful print artifact (cream NAME sticker + FDA
   Nutrition panel). Exempt it from the admin cockpit dark theme so it renders
   in its true dark-on-light PRINT colours, not washed-out cockpit text.
   Higher specificity than the generic `.admin-shell div{color:inherit}` rule. */
.dp-admin-view .admin-shell .dp-label-sheet,
.dp-admin-view .admin-shell .dp-label-sheet *{
  color:var(--label-ink,#17110d)!important;
  text-shadow:none!important;
}
.dp-admin-view .admin-shell .dp-print-label--nutrition,
.dp-admin-view .admin-shell .dp-print-label--nutrition *{
  color:#050505!important;
}
.dp-admin-view .admin-shell .dp-print-label--name .dp-name-brand{color:#7a1b16!important;}
.dp-admin-view .admin-shell .dp-print-label--name .dp-name-size{color:#241712!important;}
.dp-admin-view .admin-shell .dp-print-label--name .dp-name-specs{color:#3a2a20!important;}

.dp-admin-view .admin-shell input:not([type=color]),
.dp-admin-view .admin-shell textarea,
.dp-admin-view .admin-shell select{
  background:var(--cockpit-field)!important;
  color:var(--cockpit-text)!important;
  border:1px solid rgba(214,226,238,.22)!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.04)!important;
}

.dp-admin-view .admin-shell input::placeholder,
.dp-admin-view .admin-shell textarea::placeholder{
  color:#93a4b8!important;
  opacity:1!important;
}

.dp-admin-view .admin-shell input[type=color]{
  background:#0f151d!important;
  border:1px solid rgba(214,226,238,.24)!important;
}

.dp-admin-view .admin-shell button{
  min-height:2.35rem;
  border:1px solid rgba(214,226,238,.2)!important;
  background:linear-gradient(180deg,#263342,#17212c)!important;
  color:var(--cockpit-text)!important;
  box-shadow:0 10px 24px rgba(0,0,0,.22),inset 0 1px 0 rgba(255,255,255,.08)!important;
}

.dp-admin-view .admin-shell button:hover{
  border-color:color-mix(in srgb,var(--admin-accent-color,var(--cockpit-red)) 52%,white)!important;
  transform:translateY(-1px);
}

.dp-admin-view .admin-shell button.bg-amber-600,
.dp-admin-view .admin-shell .bg-amber-600,
.dp-admin-view .admin-shell button[type=submit],
.dp-admin-view .admin-shell [data-admin-settings-push]{
  background:linear-gradient(180deg,var(--admin-accent-color,var(--cockpit-red)),color-mix(in srgb,var(--admin-accent-color,var(--cockpit-red)) 76%,#11161d))!important;
  color:#fff!important;
}

.admin-tab-shell{
  display:grid;
  gap:1rem;
  margin:clamp(1rem,2vw,1.5rem) 0;
  padding:clamp(.85rem,1.7vw,1.2rem);
  border-radius:var(--dp-radius-panel);
}

.admin-tab-header{
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  gap:1rem;
  align-items:start;
}

.admin-tab-header > div:first-child > p,
.admin-enhancer-head > div > p{
  margin:0 0 .25rem;
  font-size:.68rem;
  letter-spacing:.14em;
  text-transform:uppercase;
  font-weight:900;
}

.admin-tab-header h2,
.admin-enhancer-head h2{
  margin:0;
  font-size:clamp(1.1rem,1.8vw,1.55rem);
  line-height:1.12;
}

.admin-architecture-map{
  display:flex;
  flex-wrap:wrap;
  gap:.45rem;
  margin-top:.7rem;
}

.admin-architecture-map span{
  display:inline-flex;
  align-items:center;
  gap:.35rem;
  min-height:1.9rem;
  padding:.32rem .55rem;
  border:1px solid rgba(214,226,238,.16);
  border-radius:999px;
  background:rgba(255,255,255,.045);
  font-size:.75rem;
  font-weight:800;
}

.admin-architecture-map b{
  display:inline-grid;
  place-items:center;
  width:1.1rem;
  height:1.1rem;
  border-radius:999px;
  background:var(--admin-accent-color,var(--cockpit-red));
  color:#fff;
  font-size:.68rem;
}

.admin-tab-buttons{
  grid-column:1/-1;
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(8.2rem,1fr));
  gap:.45rem;
}

.admin-tab-buttons button,
.admin-tab-header select{
  width:100%;
}

.admin-tab-buttons button[aria-selected=true]{
  background:linear-gradient(180deg,var(--admin-accent-color,var(--cockpit-red)),color-mix(in srgb,var(--admin-accent-color,var(--cockpit-red)) 72%,#11161d))!important;
  border-color:rgba(255,255,255,.34)!important;
}

.admin-tab-panels{
  min-width:0;
}

.admin-tab-panel{
  min-width:0;
}

.admin-tab-panel[hidden]{
  display:none!important;
}

.admin-enhancer-head{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:1rem;
  margin-bottom:.9rem;
}

.admin-enhancer-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(min(100%,16rem),1fr));
  gap:.75rem;
}

.admin-wide-field{
  grid-column:1/-1;
}

.admin-switch-row{
  display:flex;
  flex-wrap:wrap;
  gap:.5rem;
  align-items:center;
}

.admin-rollback-grid > div:not(.admin-switch-row),
.admin-mfa-grid > div,
.admin-payment-panel .admin-enhancer-grid > div{
  padding:.75rem;
  border:1px solid rgba(214,226,238,.14);
  border-radius:.65rem;
  background:rgba(255,255,255,.04);
}

.admin-rollback-grid strong,
.admin-payment-panel strong{
  display:block;
  margin-bottom:.2rem;
  color:var(--cockpit-text)!important;
  font-size:1.05rem;
}

.dp-admin-view .dalle-backend-control,
.dp-admin-view .admin-enhancer-panel,
.dp-admin-view .admin-tab-shell{
  color:var(--cockpit-text)!important;
}

.dp-admin-view .dalle-backend-control .dbc-head,
.dp-admin-view .dalle-backend-control .dbc-head *,
.dp-admin-view .admin-tab-header,
.dp-admin-view .admin-tab-header *,
.dp-admin-view .admin-enhancer-head,
.dp-admin-view .admin-enhancer-head *{
  color:var(--cockpit-text)!important;
}

.dp-admin-view .dalle-backend-control .dbc-head p,
.dp-admin-view .admin-tab-header p,
.dp-admin-view .admin-enhancer-head p,
.dp-admin-view .admin-shell .text-stone-400,
.dp-admin-view .admin-shell .text-slate-400,
.dp-admin-view .admin-shell .text-gray-400{
  color:var(--cockpit-muted)!important;
}

.dp-admin-view .dalle-backend-control pre,
.dp-admin-view .admin-shell pre{
  background:#0b1118!important;
  color:#dbeafe!important;
  border:1px solid rgba(214,226,238,.16)!important;
  text-shadow:none!important;
}

.admin-tab-header select{
  max-width:16rem;
}

@media(max-width:760px){
  .dp-admin-view .admin-shell > div,
  .dp-admin-view .admin-shell .mx-auto,
  .dp-admin-view .admin-shell [class*="max-w-"]{
    max-width:calc(100vw - .75rem)!important;
  }

  .admin-tab-header{
    grid-template-columns:1fr;
  }

  .admin-tab-buttons{
    display:none;
  }

  .admin-tab-header select{
    max-width:none;
    min-height:2.65rem;
  }

  .admin-enhancer-head{
    display:grid;
  }
}

@media(max-width:1180px){
  .admin-shell .lg\:grid-cols-\[360px_1fr\]{grid-template-columns:1fr!important}
  .admin-shell .lg\:sticky{position:relative!important;top:auto!important}
  .admin-shell .max-h-\[48vh\]{max-height:none!important;overflow:visible!important}
}

/* Customer theme selector is role-safe: customers can switch among published slots only. */
[data-public-theme-picker]{
  display:flex;
  align-items:center;
  gap:.35rem;
  margin-left:auto;
  pointer-events:auto!important;
  position:relative!important;
  z-index:80!important;
}

[data-public-theme-picker] button{
  width:1.15rem;
  height:1.15rem;
  min-width:1.15rem;
  min-height:1.15rem;
  border-radius:999px;
  border:1px solid rgba(17,24,39,.28);
  background:hsl(var(--primary));
  box-shadow:inset 0 0 0 2px rgba(255,255,255,.7);
  pointer-events:auto!important;
  cursor:pointer!important;
}

[data-public-theme-picker] button[aria-pressed=true]{
  outline:2px solid hsl(var(--foreground));
  outline-offset:2px;
}

[data-public-theme-picker][hidden],
[data-dp-hidden-duplicate-theme-picker=true]{
  display:none!important;
}

body:not(:has(.admin-shell)) header[data-dp-header=true]{
  background:hsl(var(--background) / .92)!important;
  color:hsl(var(--foreground))!important;
  border-color:hsl(var(--border) / .74)!important;
}

body:not(:has(.admin-shell)) [data-dp-header-bar=true]{
  display:flex!important;
  align-items:center!important;
  justify-content:flex-start!important;
  gap:clamp(.55rem,1.3vw,1.15rem)!important;
  width:100%!important;
  max-width:none!important;
  min-width:0!important;
}

body:not(:has(.admin-shell)) [data-dp-header-brand-group=true]{
  display:flex!important;
  align-items:center!important;
  gap:clamp(.65rem,1.5vw,1.5rem)!important;
  min-width:0!important;
  flex:1 1 auto!important;
}

body:not(:has(.admin-shell)) [data-dp-header-controls=true]{
  display:flex!important;
  align-items:center!important;
  justify-content:flex-end!important;
  gap:clamp(.45rem,1vw,.85rem)!important;
  margin-left:auto!important;
  min-width:max-content!important;
  flex:0 0 auto!important;
}

body:not(:has(.admin-shell)) [data-dp-header-controls=true] > *,
body:not(:has(.admin-shell)) [data-dp-language-select=true],
body:not(:has(.admin-shell)) [data-dp-cart-button=true]{
  flex:0 0 auto!important;
}

body:not(:has(.admin-shell)) [data-dp-language-select=true]{
  display:inline-flex!important;
  width:auto!important;
  min-width:2.75rem!important;
  max-width:4.8rem!important;
  height:2rem!important;
  padding:.15rem 1.2rem .15rem .45rem!important;
  border:0!important;
  border-radius:.45rem!important;
  background:transparent!important;
  color:hsl(var(--foreground))!important;
  font-size:.78rem!important;
  font-weight:800!important;
  line-height:1!important;
  text-align:center!important;
}

body:not(:has(.admin-shell)) [data-dp-cart-button=true]{
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
  width:2.25rem!important;
  height:2.25rem!important;
  min-width:2.25rem!important;
  min-height:2.25rem!important;
  padding:.4rem!important;
  border-radius:.5rem!important;
}

/* Flexible public brand slot: text by default, optional emoji or image from admin language. */
body:not(:has(.admin-shell)) header a[href="/"],
body:not(:has(.admin-shell)) header a[href="./"],
body:not(:has(.admin-shell)) header a[href="https://dallepepper.com/"],
body:not(:has(.admin-shell)) header a:first-of-type{
  display:inline-flex!important;
  align-items:center!important;
  justify-content:flex-start!important;
  column-gap:.35em!important;
  min-width:0!important;
  width:auto!important;
  max-width:min(42vw,18rem)!important;
  min-height:auto!important;
  padding:0!important;
  background:transparent!important;
  border:0!important;
  box-shadow:none!important;
  border-radius:0!important;
  overflow:visible!important;
  white-space:normal!important;
  text-wrap:balance!important;
  word-break:normal!important;
  overflow-wrap:break-word!important;
  font-family:var(--site-heading-font,"Lora",Georgia,serif)!important;
  font-size:calc(clamp(.8rem,1.35vw,1rem) * var(--site-heading-scale,1))!important;
  line-height:1.12!important;
  text-align:left!important;
}

.dp-brand-mark{
  flex:0 0 auto;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:calc(1.05em * var(--site-heading-scale,1));
  height:calc(1.05em * var(--site-heading-scale,1));
  font-size:1em;
  line-height:1;
  border:0;
  border-radius:999px;
  background:transparent;
  box-shadow:none;
  color:inherit;
}

.dp-brand-mark[data-mark-type="logo"]{
  overflow:hidden;
}

.dp-brand-mark img{
  width:100%;
  height:100%;
  object-fit:contain;
  display:block;
}

.dp-brand-text{
  min-width:0;
  max-width:100%;
  flex:1 1 auto;
  overflow:visible;
  text-wrap:balance;
  overflow-wrap:break-word;
  word-break:normal;
}

body:not(:has(.admin-shell)) header a:first-of-type *{
  min-width:0!important;
  max-width:100%!important;
  overflow:visible!important;
  white-space:normal!important;
  text-wrap:balance!important;
  overflow-wrap:break-word!important;
}

body:not(:has(.admin-shell)) header a:first-of-type:not(:has(.dp-brand-mark)){
  column-gap:0!important;
}

@media(max-width:520px){
  body:not(:has(.admin-shell)) [data-dp-header-bar=true]{
    gap:.38rem!important;
    padding-inline:.75rem!important;
  }

  body:not(:has(.admin-shell)) [data-dp-header-brand-group=true]{
    flex:1 1 auto!important;
    gap:.45rem!important;
  }

  body:not(:has(.admin-shell)) [data-dp-header-controls=true]{
    gap:.22rem!important;
    min-width:0!important;
  }

  body:not(:has(.admin-shell)) header [data-public-theme-picker],
  body:not(:has(.admin-shell)) [data-public-theme-picker]{
    display:flex!important;
    align-items:center!important;
    gap:.18rem!important;
    margin-left:auto!important;
    pointer-events:auto!important;
    visibility:visible!important;
    opacity:1!important;
  }

  body:not(:has(.admin-shell)) [data-public-theme-picker] button{
    width:1.02rem!important;
    height:1.02rem!important;
    min-width:1.02rem!important;
    min-height:1.02rem!important;
    padding:0!important;
    touch-action:manipulation!important;
  }

  body:not(:has(.admin-shell)) [data-dp-language-select=true]{
    min-width:2.3rem!important;
    max-width:2.8rem!important;
    height:1.85rem!important;
    padding:.1rem .85rem .1rem .25rem!important;
    font-size:.7rem!important;
  }

  body:not(:has(.admin-shell)) [data-dp-cart-button=true]{
    width:1.95rem!important;
    height:1.95rem!important;
    min-width:1.95rem!important;
    min-height:1.95rem!important;
    padding:.32rem!important;
  }

  body:not(:has(.admin-shell)) header a:first-of-type{
    max-width:min(58vw,13rem)!important;
    min-height:auto!important;
    padding:0!important;
    font-size:calc(clamp(.72rem,3.4vw,.9rem) * var(--site-heading-scale,1))!important;
  }
  .dp-brand-mark{
    width:calc(.9em * var(--site-heading-scale,1));
    height:calc(.9em * var(--site-heading-scale,1));
  }
}

/* Hero bottle stage and sauce rail: dynamic by component, not device-specific. */
.viewer-stage{
  isolation:isolate;
  background:transparent!important;
  box-shadow:none!important;
  overflow:visible!important;
}

.viewer-stage > div > div.pointer-events-none[class*="bg-white"]{display:none!important;opacity:0!important}
.viewer-stage > div > div.pointer-events-none[class*="bg-red-950"]{display:none!important;opacity:0!important}
.viewer-stage canvas{display:none!important}

body:not(:has(.admin-shell)) .abc-hero-ripple .viewer-stage{
  min-height:clamp(430px,62vh,760px)!important;
}

body:not(:has(.admin-shell)) .abc-hero-ripple .viewer-stage + div{
  position:relative!important;
  z-index:45!important;
  container-type:inline-size;
  width:min(92vw,760px)!important;
  max-width:min(92vw,760px)!important;
  margin-top:clamp(.75rem,2.4vw,2.4rem)!important;
  padding:.15rem .15rem .45rem!important;
  overflow:visible!important;
  overflow-x:visible!important;
  overflow-y:visible!important;
  border-radius:.7rem!important;
  background:transparent!important;
  border:0!important;
  box-shadow:none!important;
  -webkit-backdrop-filter:none!important;
  backdrop-filter:none!important;
}

body:not(:has(.admin-shell)) .abc-hero-ripple .viewer-stage + div > div{
  display:grid!important;
  grid-auto-flow:column!important;
  grid-auto-columns:minmax(var(--dp-rail-button-min),clamp(var(--dp-rail-button-min),var(--dp-rail-button-fluid),var(--dp-rail-button-max)))!important;
  width:100%!important;
  max-width:100%!important;
  min-width:0!important;
  overflow-x:auto!important;
  overflow-y:hidden!important;
  justify-content:flex-start!important;
  scroll-snap-type:x proximity!important;
  -webkit-overflow-scrolling:touch!important;
  overscroll-behavior-x:contain!important;
  touch-action:pan-x!important;
  scrollbar-width:thin!important;
  scrollbar-color:color-mix(in srgb,var(--site-button-bg-color,#b91c1c) 58%,transparent) transparent!important;
  padding:clamp(.18rem,.7cqw,.32rem)!important;
}

body:not(:has(.admin-shell)) .abc-hero-ripple .viewer-stage + div > div::-webkit-scrollbar{
  width:0!important;
  height:.38rem!important;
}

body:not(:has(.admin-shell)) .abc-hero-ripple .viewer-stage + div > div::-webkit-scrollbar-track,
body:not(:has(.admin-shell)) .abc-hero-ripple .viewer-stage + div > div::-webkit-scrollbar-thumb{
  background:color-mix(in srgb,var(--site-button-bg-color,#b91c1c) 46%,transparent)!important;
  border:0!important;
  border-radius:999px!important;
}

body:not(:has(.admin-shell)) .abc-hero-ripple .viewer-stage + div > div::-webkit-scrollbar-track{
  background:transparent!important;
}

body:not(:has(.admin-shell)) .abc-hero-ripple .viewer-stage + div > div > button{
  flex:0 0 auto!important;
  display:grid!important;
  grid-template-columns:auto minmax(0,1fr)!important;
  align-items:center!important;
  justify-items:start!important;
  column-gap:clamp(.36rem,1.15cqw,.58rem)!important;
  row-gap:.08rem!important;
  min-width:0!important;
  width:100%!important;
  max-width:100%!important;
  min-height:clamp(2.65rem,7.8cqw,3.3rem)!important;
  padding:clamp(.48rem,1.5cqw,.68rem) clamp(.62rem,2cqw,.95rem)!important;
  scroll-snap-align:start!important;
  scroll-snap-stop:normal!important;
  white-space:normal!important;
  text-align:left!important;
  line-height:1.05!important;
  color:hsl(var(--foreground))!important;
  background:color-mix(in srgb,var(--site-button-bg-color,#b91c1c) 12%,transparent)!important;
  border-color:color-mix(in srgb,var(--site-button-bg-color,#b91c1c) 46%,transparent)!important;
  box-shadow:none!important;
  -webkit-backdrop-filter:none!important;
  backdrop-filter:none!important;
  font-size:clamp(.64rem,1.16cqw,.8rem)!important;
  font-weight:800!important;
  letter-spacing:.02em!important;
}

body:not(:has(.admin-shell)) .abc-hero-ripple .viewer-stage + div > div > button *{
  min-width:0!important;
  max-width:100%!important;
  line-height:1.05!important;
  overflow-wrap:anywhere!important;
}

body:not(:has(.admin-shell)) .abc-hero-ripple .viewer-stage + div > div > button span{
  overflow:hidden!important;
  text-overflow:ellipsis!important;
  white-space:normal!important;
  display:-webkit-box!important;
  -webkit-box-orient:vertical!important;
  -webkit-line-clamp:2!important;
  line-clamp:2!important;
}

body:not(:has(.admin-shell)) .abc-hero-ripple .viewer-stage + div > div > button[aria-pressed=true]{
  background:var(--site-button-bg-color,#b91c1c)!important;
  border-color:color-mix(in srgb,var(--site-button-bg-color,#b91c1c),#ffffff 18%)!important;
  color:var(--site-button-text-color,#ffffff)!important;
}

body:not(:has(.admin-shell)) .abc-hero-ripple .viewer-stage + div > div > button[aria-pressed=true] *{
  color:var(--site-button-text-color,#ffffff)!important;
}

body:not(:has(.admin-shell)) .abc-trail{
  background:var(--site-button-bg-color,#b91c1c)!important;
  color:var(--site-button-text-color,#ffffff)!important;
  border-top:1px solid color-mix(in srgb,var(--site-button-bg-color,#b91c1c),#ffffff 24%)!important;
  border-bottom:1px solid color-mix(in srgb,var(--site-button-bg-color,#b91c1c),#000000 22%)!important;
  box-shadow:none!important;
}

body:not(:has(.admin-shell)) .abc-trail span{
  color:inherit!important;
}

body:not(:has(.admin-shell)) #sauces article [aria-label^="Heat level"]{
  gap:.24rem!important;
}

body:not(:has(.admin-shell)) #sauces article [aria-label^="Heat level"] span{
  width:.42rem!important;
  height:.42rem!important;
  border-radius:999px!important;
  box-shadow:none!important;
}

body:not(:has(.admin-shell)) #sauces article .dp-scoville-meter{
  margin-top:.9rem!important;
  padding:0!important;
  background:transparent!important;
  border:0!important;
  box-shadow:none!important;
}

body:not(:has(.admin-shell)) #sauces article .dp-scoville-head{
  display:flex!important;
  align-items:baseline!important;
  justify-content:space-between!important;
  gap:.75rem!important;
  margin-bottom:.35rem!important;
  color:inherit!important;
}

body:not(:has(.admin-shell)) #sauces article .dp-scoville-head span,
body:not(:has(.admin-shell)) #sauces article .dp-scoville-head strong{
  color:inherit!important;
  font-size:.72rem!important;
  line-height:1.2!important;
  letter-spacing:.08em!important;
  text-transform:uppercase!important;
}

body:not(:has(.admin-shell)) #sauces article .dp-scoville-track{
  height:.42rem!important;
  overflow:hidden!important;
  border-radius:999px!important;
  background:hsl(var(--border) / .72)!important;
  box-shadow:none!important;
}

body:not(:has(.admin-shell)) #sauces article .dp-scoville-track span{
  display:block!important;
  height:100%!important;
  border-radius:inherit!important;
  background:var(--site-button-bg-color,#b91c1c)!important;
  box-shadow:none!important;
}

body:not(:has(.admin-shell)) #sauces article .dp-scoville-meter p{
  margin-top:.34rem!important;
  padding:0!important;
  background:transparent!important;
  color:hsl(var(--muted-foreground))!important;
  font-size:.68rem!important;
  line-height:1.25!important;
  letter-spacing:.08em!important;
  text-transform:uppercase!important;
  box-shadow:none!important;
}

@media(max-width:720px){
  :root{
    --dp-rail-button-min:8.6rem;
    --dp-rail-button-fluid:52cqw;
    --dp-rail-button-max:11.4rem;
  }

  body:not(:has(.admin-shell)) .abc-hero-ripple .viewer-stage + div{
    width:calc(100vw - 1rem)!important;
    max-width:calc(100vw - 1rem)!important;
    left:50%!important;
    transform:translateX(-50%)!important;
    overflow:visible!important;
    padding-inline:.35rem!important;
  }

  body:not(:has(.admin-shell)) .abc-hero-ripple .viewer-stage + div > div{
    gap:.5rem!important;
    grid-auto-columns:minmax(8.6rem,52cqw)!important;
    padding:.25rem .35rem .68rem!important;
    mask-image:linear-gradient(90deg,transparent 0,#000 .45rem,#000 calc(100% - .45rem),transparent 100%);
    -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 .45rem,#000 calc(100% - .45rem),transparent 100%);
  }

  body:not(:has(.admin-shell)) .abc-hero-ripple .viewer-stage + div > div > button{
    min-width:8.6rem!important;
    width:100%!important;
    max-width:none!important;
    min-height:3.15rem!important;
  }
}

/* Customer surfaces consume theme tokens so theme changes apply broadly. */
body[data-hero-bg-mode=color]:not(:has(.admin-shell)) .abc-hero-ripple{
  background-image:linear-gradient(90deg,hsl(var(--background)) 0%,hsl(var(--background)) 52%,hsl(var(--secondary) / .82) 100%)!important;
  background-color:hsl(var(--background))!important;
  color:hsl(var(--foreground))!important;
}

body.dp-public-view[data-hero-bg-mode=color] .abc-hero-ripple{
  background-image:linear-gradient(90deg,hsl(var(--background)) 0%,hsl(var(--background)) 52%,hsl(var(--secondary) / .82) 100%)!important;
  background-color:hsl(var(--background))!important;
  color:hsl(var(--foreground))!important;
}

body:not(:has(.admin-shell)) #sauces,
body:not(:has(.admin-shell)) footer{
  background:hsl(var(--background))!important;
  color:hsl(var(--foreground))!important;
}

body.dp-public-view #sauces,
body.dp-public-view footer{
  background:hsl(var(--background))!important;
  color:hsl(var(--foreground))!important;
}

body:not(:has(.admin-shell)),
body:not(:has(.admin-shell)) #root,
body:not(:has(.admin-shell)) main,
body:not(:has(.admin-shell)) header,
body:not(:has(.admin-shell)) footer,
body:not(:has(.admin-shell)) section{
  background-color:hsl(var(--background))!important;
  color:hsl(var(--foreground))!important;
}

body.dp-public-view,
body.dp-public-view #root,
body.dp-public-view main,
body.dp-public-view header,
body.dp-public-view footer,
body.dp-public-view section{
  background-color:hsl(var(--background))!important;
  color:hsl(var(--foreground))!important;
}

body:not(:has(.admin-shell)) #root,
body:not(:has(.admin-shell)) main{
  background:hsl(var(--background))!important;
}

body.dp-public-view #root,
body.dp-public-view main{
  background:hsl(var(--background))!important;
}

body:not(:has(.admin-shell)) header,
body:not(:has(.admin-shell)) footer,
body:not(:has(.admin-shell)) [class*="bg-background"],
body:not(:has(.admin-shell)) [class*="bg-secondary"]{
  background-color:hsl(var(--background))!important;
  border-color:hsl(var(--border) / .72)!important;
}

body:not(:has(.admin-shell)) [class*="bg-card"],
body:not(:has(.admin-shell)) [data-slot=card],
body:not(:has(.admin-shell)) .rounded-lg,
body:not(:has(.admin-shell)) .rounded-xl{
  background-color:hsl(var(--card) / .72)!important;
  color:hsl(var(--card-foreground))!important;
  border-color:hsl(var(--border) / .72)!important;
}

body:not(:has(.admin-shell)) #sauces article,
body:not(:has(.admin-shell)) [data-slot=card]{
  background:hsl(var(--card) / .72)!important;
  color:hsl(var(--card-foreground))!important;
  border-color:hsl(var(--border) / .72)!important;
}

body:not(:has(.admin-shell)) #sauces article[data-sauce-focus="true"]{
  outline:2px solid hsl(var(--primary) / .7)!important;
  outline-offset:4px!important;
  box-shadow:0 18px 44px hsl(var(--primary) / .22)!important;
}

/* Mobile product viewport contract: one active sauce per customer view. */
@media(max-width:720px){
  body:not(:has(.admin-shell)) #sauces{
    scroll-snap-type:y proximity;
  }

  body:not(:has(.admin-shell)) #sauces article{
    min-height:calc(100svh + 1rem)!important;
    scroll-snap-align:start;
    scroll-margin-top:.75rem;
  }

  body:not(:has(.admin-shell)) #sauces .dp-product-hero{
    min-height:clamp(310px,48svh,430px)!important;
  }

  body:not(:has(.admin-shell)) #sauces .dp-product-stage{
    min-height:clamp(250px,39svh,350px)!important;
  }
}

/* Rendering and interaction stability contracts. */
body:not(:has(.admin-shell)) main > section{
  content-visibility:auto;
  contain-intrinsic-size:1px 760px;
}

body:not(:has(.admin-shell)) img{
  content-visibility:auto;
}

body:not(:has(.admin-shell)) img[data-dp-image-error="true"]{
  display:none!important;
}

body:not(:has(.admin-shell)) #sauces article img,
body:not(:has(.admin-shell)) [data-cart-panel] img,
body:not(:has(.admin-shell)) [role=dialog] img{
  display:block;
  width:100%;
  max-width:100%;
  height:auto;
  aspect-ratio:3/4;
  object-fit:contain!important;
  image-rendering:auto;
}

body:not(:has(.admin-shell)) [data-cart-panel],
body:not(:has(.admin-shell)) [role=dialog]{
  color:hsl(var(--foreground))!important;
}

body:not(:has(.admin-shell)) [data-cart-panel] img,
body:not(:has(.admin-shell)) [role=dialog] img{
  aspect-ratio:3/4;
  object-fit:contain!important;
}

body:not(:has(.admin-shell)) button,
body:not(:has(.admin-shell)) a,
.admin-shell button{
  touch-action:manipulation;
}

/* Admin cockpit visual contract. The admin route must look like one product surface even when role classes load late. */
body:has(.admin-shell){
  background:#10151c!important;
  color:#f6f8fb!important;
  font-family:"DM Sans",Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif!important;
}

body:has(.admin-shell) .admin-shell{
  background:
    linear-gradient(90deg,rgba(255,255,255,.035) 1px,transparent 1px),
    linear-gradient(180deg,rgba(255,255,255,.03) 1px,transparent 1px),
    radial-gradient(circle at 12% 0%,rgba(217,45,32,.16),transparent 26rem),
    radial-gradient(circle at 88% 8%,rgba(33,184,165,.14),transparent 28rem),
    linear-gradient(180deg,#10151c 0%,#151d26 48%,#0f141b 100%)!important;
  background-size:36px 36px,36px 36px,auto,auto,auto!important;
  color:#f6f8fb!important;
  text-shadow:none!important;
}

body:has(.admin-shell) .admin-shell .admin-panel,
body:has(.admin-shell) .admin-shell form.admin-panel,
body:has(.admin-shell) .admin-shell [data-admin-font-color-controls],
body:has(.admin-shell) .admin-shell section,
body:has(.admin-shell) .admin-shell form,
body:has(.admin-shell) .admin-shell aside,
body:has(.admin-shell) .admin-shell article,
body:has(.admin-shell) .admin-shell [class*="rounded-xl"],
body:has(.admin-shell) .admin-shell [class*="rounded-2xl"],
body:has(.admin-shell) .admin-shell [class*="shadow"],
body:has(.admin-shell) .admin-shell [class*="border"],
body:has(.admin-shell) .admin-shell [class*="bg-white"],
body:has(.admin-shell) .admin-shell [class*="bg-card"],
body:has(.admin-shell) .admin-shell [class*="bg-slate"],
body:has(.admin-shell) .admin-shell [class*="bg-zinc"],
body:has(.admin-shell) .admin-enhancer-panel,
body:has(.admin-shell) .admin-tab-shell{
  background:linear-gradient(145deg,rgba(24,33,43,.92),rgba(14,20,28,.84))!important;
  border:1px solid rgba(214,226,238,.18)!important;
  box-shadow:0 18px 52px rgba(0,0,0,.3),inset 0 1px 0 rgba(255,255,255,.055)!important;
  color:#f6f8fb!important;
  -webkit-backdrop-filter:blur(20px) saturate(1.22);
  backdrop-filter:blur(20px) saturate(1.22);
}

body:has(.admin-shell) .admin-shell h1,
body:has(.admin-shell) .admin-shell h2,
body:has(.admin-shell) .admin-shell h3,
body:has(.admin-shell) .admin-shell h4{
  color:#fff8eb!important;
  font-weight:800!important;
  letter-spacing:0!important;
}

body:has(.admin-shell) .admin-shell p,
body:has(.admin-shell) .admin-shell label,
body:has(.admin-shell) .admin-shell span,
body:has(.admin-shell) .admin-shell li,
body:has(.admin-shell) .admin-shell div{
  color:#dfe8f1!important;
  letter-spacing:0!important;
  text-shadow:none!important;
}

body:has(.admin-shell) .admin-shell{
  line-height:1.45!important;
  overflow-wrap:anywhere!important;
}

body:has(.admin-shell) .admin-shell button,
body:has(.admin-shell) .admin-shell input,
body:has(.admin-shell) .admin-shell textarea,
body:has(.admin-shell) .admin-shell select{
  font-family:"Noto Sans Devanagari","Kohinoor Devanagari","DM Sans",Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif!important;
}

body:has(.admin-shell) .admin-shell input,
body:has(.admin-shell) .admin-shell textarea,
body:has(.admin-shell) .admin-shell select{
  min-width:0!important;
  max-width:100%!important;
}

body:has(.admin-shell) .admin-shell [class*="text-stone"],
body:has(.admin-shell) .admin-shell [class*="text-slate"],
body:has(.admin-shell) .admin-shell [class*="text-zinc"],
body:has(.admin-shell) .admin-shell [class*="text-gray"]{
  color:#a9b7c6!important;
}

body:has(.admin-shell) .admin-shell [class*="text-amber"],
body:has(.admin-shell) .admin-shell [class*="text-orange"],
body:has(.admin-shell) .admin-shell [class*="text-red"]{
  color:#f2a51f!important;
}

body:has(.admin-shell) .admin-shell input:not([type=color]),
body:has(.admin-shell) .admin-shell textarea,
body:has(.admin-shell) .admin-shell select{
  background:#111723!important;
  color:#fff8eb!important;
  border:1px solid rgba(255,255,255,.16)!important;
  border-radius:8px!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.04)!important;
  outline:none!important;
}

body:has(.admin-shell) .admin-shell input:not([type=color])::placeholder,
body:has(.admin-shell) .admin-shell textarea::placeholder{
  color:#8192a6!important;
}

body:has(.admin-shell) .admin-shell input:focus,
body:has(.admin-shell) .admin-shell textarea:focus,
body:has(.admin-shell) .admin-shell select:focus{
  border-color:#28c3d4!important;
  box-shadow:0 0 0 3px rgba(40,195,212,.2),inset 0 1px 0 rgba(255,255,255,.05)!important;
}

body:has(.admin-shell) .admin-shell input[type=color],
body:has(.admin-shell) .admin-shell .dalle-color-wheel{
  width:58px!important;
  height:58px!important;
  min-width:58px!important;
  padding:4px!important;
  border-radius:999px!important;
  border:2px solid rgba(255,255,255,.78)!important;
  background:conic-gradient(#ef4444,#f59e0b,#eab308,#22c55e,#06b6d4,#3b82f6,#8b5cf6,#ec4899,#ef4444)!important;
  box-shadow:0 10px 24px rgba(0,0,0,.28),0 0 0 6px rgba(255,255,255,.06)!important;
}

body:has(.admin-shell) .admin-shell button{
  border-radius:8px!important;
  font-weight:800!important;
  letter-spacing:0!important;
  min-width:0!important;
  white-space:normal!important;
  text-align:center!important;
  transition:transform .16s ease,box-shadow .16s ease,border-color .16s ease,background-color .16s ease!important;
}

body:has(.admin-shell) .admin-shell button:not([type=submit]){
  background:rgba(255,255,255,.075)!important;
  color:#f6f8fb!important;
  border-color:rgba(214,226,238,.18)!important;
}

body:has(.admin-shell) .admin-shell button[type=submit],
body:has(.admin-shell) .admin-shell button.bg-amber-600,
body:has(.admin-shell) .admin-shell .bg-amber-600,
body:has(.admin-shell) .admin-shell [data-admin-settings-push]{
  background:var(--admin-accent-color,#c65d00)!important;
  color:#fff!important;
  border-color:rgba(255,255,255,.16)!important;
  box-shadow:0 10px 24px rgba(198,93,0,.22)!important;
}

body:has(.admin-shell) .admin-shell button:hover{
  transform:translateY(-1px);
  box-shadow:0 10px 24px rgba(0,0,0,.22)!important;
}

@media(max-width:760px){
  body:has(.admin-shell) .admin-shell{
    padding:.7rem!important;
  }

  body:has(.admin-shell) .admin-shell input[type=color],
  body:has(.admin-shell) .admin-shell .dalle-color-wheel{
    width:48px!important;
    height:48px!important;
    min-width:48px!important;
  }
}

body.dp-mobile-menu-open{
  overflow:hidden;
}

[data-dp-mobile-menu]{
  position:fixed;
  inset:4.75rem .75rem auto .75rem;
  z-index:90;
  display:grid;
  gap:.35rem;
  padding:.65rem;
  border:1px solid hsl(var(--border) / .8);
  border-radius:.85rem;
  background:hsl(var(--card) / .92);
  color:hsl(var(--card-foreground));
  box-shadow:0 24px 70px rgba(0,0,0,.28);
  -webkit-backdrop-filter:blur(18px) saturate(1.25);
  backdrop-filter:blur(18px) saturate(1.25);
}

[data-dp-mobile-menu][hidden]{
  display:none!important;
}

[data-dp-mobile-menu] a,
[data-dp-mobile-menu] button{
  display:flex;
  align-items:center;
  justify-content:space-between;
  min-height:2.75rem;
  padding:.55rem .7rem;
  border-radius:.55rem;
  background:hsl(var(--muted) / .54);
  color:inherit;
  font-weight:800;
}

/* Product bottle contract: every product/cart row gets a real bottle visual even without an uploaded image. */
body:not(:has(.admin-shell)) .dp-generated-product-bottle{
  display:grid!important;
  place-items:center!important;
  margin:0 auto!important;
  flex:0 0 auto!important;
  pointer-events:none;
}

body:not(:has(.admin-shell)) [data-cart-panel] .dp-generated-product-bottle,
body:not(:has(.admin-shell)) [role=dialog] .dp-generated-product-bottle{
  width:54px!important;
  height:146px!important;
  transform:none!important;
}

/* Product media contract: product cards and popups show the actual bottle/image, not fake reflection bands. */
body:not(:has(.admin-shell)) #sauces .dp-product-hero::before,
body:not(:has(.admin-shell)) #sauces .dp-product-hero::after,
body:not(:has(.admin-shell)) [role=dialog] .dp-product-hero::before,
body:not(:has(.admin-shell)) [role=dialog] .dp-product-hero::after,
body:not(:has(.admin-shell)) [data-sauce-peek-overlay] .dp-product-hero::before,
body:not(:has(.admin-shell)) [data-sauce-peek-overlay] .dp-product-hero::after,
body:not(:has(.admin-shell)) #sauces .dp-product-stage::after,
body:not(:has(.admin-shell)) [role=dialog] .dp-product-stage::after,
body:not(:has(.admin-shell)) [data-sauce-peek-overlay] .dp-product-stage::after,
body:not(:has(.admin-shell)) #sauces .dp-product-contact-shadow,
body:not(:has(.admin-shell)) [role=dialog] .dp-product-contact-shadow,
body:not(:has(.admin-shell)) [data-sauce-peek-overlay] .dp-product-contact-shadow{
  content:none!important;
  display:none!important;
  background:none!important;
  box-shadow:none!important;
  filter:none!important;
  opacity:0!important;
}

body:not(:has(.admin-shell)) #sauces .dp-product-bottle-svg,
body:not(:has(.admin-shell)) [role=dialog] .dp-product-bottle-svg,
body:not(:has(.admin-shell)) [data-sauce-peek-overlay] .dp-product-bottle-svg{
  position:relative!important;
  overflow:visible!important;
  filter:drop-shadow(0 12px 10px rgba(5,25,34,.18)) saturate(1.08) contrast(1.08)!important;
}

/* Removed: legacy CSS pseudo-element cap (::before/::after) on .dp-product-bottle-svg.
   The contract bottle SVG (bottle-size-contract.js / rendering-product-text-contract.js)
   now draws its own real ribbed cap attached to the neck, so this fake floating cap is
   redundant and caused a detached black cap above the bottle. Neutralized at source. */
body:not(:has(.admin-shell)) #sauces .dp-product-bottle-svg::before,
body:not(:has(.admin-shell)) [role=dialog] .dp-product-bottle-svg::before,
body:not(:has(.admin-shell)) [data-cart-panel] .dp-product-bottle-svg::before,
body:not(:has(.admin-shell)) [data-cart-panel] .dp-generated-product-bottle::before,
body:not(:has(.admin-shell)) [data-sauce-peek-overlay] .dp-product-bottle-svg::before,
body:not(:has(.admin-shell)) #sauces .dp-product-bottle-svg::after,
body:not(:has(.admin-shell)) [role=dialog] .dp-product-bottle-svg::after,
body:not(:has(.admin-shell)) [data-cart-panel] .dp-product-bottle-svg::after,
body:not(:has(.admin-shell)) [data-cart-panel] .dp-generated-product-bottle::after,
body:not(:has(.admin-shell)) [data-sauce-peek-overlay] .dp-product-bottle-svg::after{
  content:none!important;
  display:none!important;
  background:none!important;
  box-shadow:none!important;
}

body:not(:has(.admin-shell)) #sauces .dp-product-bottle-svg svg,
body:not(:has(.admin-shell)) [role=dialog] .dp-product-bottle-svg svg,
body:not(:has(.admin-shell)) [data-sauce-peek-overlay] .dp-product-bottle-svg svg{
  overflow:visible!important;
}

body:not(:has(.admin-shell)) #sauces .dp-product-bottle-svg path[stroke="#fff"],
body:not(:has(.admin-shell)) #sauces .dp-product-bottle-svg path[stroke="#fff1c8"],
body:not(:has(.admin-shell)) #sauces .dp-product-bottle-svg path[stroke="#fff4bd"],
body:not(:has(.admin-shell)) [role=dialog] .dp-product-bottle-svg path[stroke="#fff"],
body:not(:has(.admin-shell)) [role=dialog] .dp-product-bottle-svg path[stroke="#fff1c8"],
body:not(:has(.admin-shell)) [role=dialog] .dp-product-bottle-svg path[stroke="#fff4bd"],
body:not(:has(.admin-shell)) [data-cart-panel] .dp-product-bottle-svg path[stroke="#fff"],
body:not(:has(.admin-shell)) [data-cart-panel] .dp-product-bottle-svg path[stroke="#fff1c8"],
body:not(:has(.admin-shell)) [data-cart-panel] .dp-product-bottle-svg path[stroke="#fff4bd"],
body:not(:has(.admin-shell)) [data-sauce-peek-overlay] .dp-product-bottle-svg path[stroke="#fff"],
body:not(:has(.admin-shell)) [data-sauce-peek-overlay] .dp-product-bottle-svg path[stroke="#fff1c8"],
body:not(:has(.admin-shell)) [data-sauce-peek-overlay] .dp-product-bottle-svg path[stroke="#fff4bd"]{
  stroke-opacity:.22!important;
  opacity:.34!important;
  stroke-width:.9!important;
  filter:none!important;
}

body:not(:has(.admin-shell)) #sauces .dp-product-bottle-svg path[fill*="white"],
body:not(:has(.admin-shell)) [role=dialog] .dp-product-bottle-svg path[fill*="white"],
body:not(:has(.admin-shell)) [data-cart-panel] .dp-product-bottle-svg path[fill*="white"],
body:not(:has(.admin-shell)) [data-sauce-peek-overlay] .dp-product-bottle-svg path[fill*="white"]{
  opacity:.16!important;
  filter:none!important;
}

/* 2D hero stage contract: generated bottles only, no spotlight/backdrop glow. */
body:not(:has(.admin-shell)) .viewer-stage::before,
body:not(:has(.admin-shell)) .viewer-stage::after,
body:not(:has(.admin-shell)) [aria-label="Dynamic 5 oz glass sauce bottle stage"]::before,
body:not(:has(.admin-shell)) [aria-label="Dynamic 5 oz glass sauce bottle stage"]::after,
body:not(:has(.admin-shell)) [aria-label="Dynamic 2D sauce bottle stage"]::before,
body:not(:has(.admin-shell)) [aria-label="Dynamic 2D sauce bottle stage"]::after{
  content:none!important;
  display:none!important;
  background:none!important;
  box-shadow:none!important;
  filter:none!important;
  opacity:0!important;
}

body:not(:has(.admin-shell)) .viewer-stage,
body:not(:has(.admin-shell)) [aria-label="Dynamic 5 oz glass sauce bottle stage"],
body:not(:has(.admin-shell)) [aria-label="Dynamic 2D sauce bottle stage"]{
  background:transparent!important;
  box-shadow:none!important;
  filter:none!important;
}

body:not(:has(.admin-shell)) [aria-label="Dynamic 5 oz glass sauce bottle stage"],
body:not(:has(.admin-shell)) [aria-label="Dynamic 2D sauce bottle stage"]{
  pointer-events:none!important;
}

/* 2D hero depth contract: bottles come forward; stage lighting stays off. */
body:not(:has(.admin-shell)) [aria-label="Dynamic 2D sauce bottle stage"],
body:not(:has(.admin-shell)) [aria-label="Dynamic 5 oz glass sauce bottle stage"]{
  perspective:900px!important;
  transform-style:preserve-3d!important;
}

body:not(:has(.admin-shell)) [aria-label="Dynamic 2D sauce bottle stage"] .dp-stage-fallback-wrap,
body:not(:has(.admin-shell)) [aria-label="Dynamic 5 oz glass sauce bottle stage"] .dp-stage-fallback-wrap{
  overflow:visible!important;
  padding-inline:clamp(18px,4vw,56px)!important;
  padding-bottom:clamp(12px,3vw,42px)!important;
  transform:translateY(10px) translateZ(0)!important;
}

body:not(:has(.admin-shell)) [aria-label="Dynamic 2D sauce bottle stage"] .dp-stage-fallback-bottle,
body:not(:has(.admin-shell)) [aria-label="Dynamic 5 oz glass sauce bottle stage"] .dp-stage-fallback-bottle{
  transform:translateY(-10px) translateZ(72px) scale(1.1)!important;
  transform-origin:50% 100%!important;
  will-change:transform!important;
  z-index:2!important;
  pointer-events:auto!important;
}

body:not(:has(.admin-shell)) [aria-label="Dynamic 2D sauce bottle stage"] .dp-stage-fallback-glass,
body:not(:has(.admin-shell)) [aria-label="Dynamic 5 oz glass sauce bottle stage"] .dp-stage-fallback-glass{
  filter:drop-shadow(0 18px 14px rgba(10,22,28,.24))!important;
  overflow:visible!important;
}

@media(max-width:720px){
  body:not(:has(.admin-shell)) [aria-label="Dynamic 2D sauce bottle stage"] .dp-stage-fallback-wrap,
  body:not(:has(.admin-shell)) [aria-label="Dynamic 5 oz glass sauce bottle stage"] .dp-stage-fallback-wrap{
    padding-inline:14px!important;
    padding-bottom:34px!important;
    transform:translateY(-18px) translateZ(0)!important;
  }

  body:not(:has(.admin-shell)) [aria-label="Dynamic 2D sauce bottle stage"] .dp-stage-fallback-bottle,
  body:not(:has(.admin-shell)) [aria-label="Dynamic 5 oz glass sauce bottle stage"] .dp-stage-fallback-bottle{
    transform:translateY(-6px) translateZ(44px) scale(1.06)!important;
  }
}

/* 2D bottle motion contract: lightweight stage bottles move and strike. */
@keyframes dp-stage-bottle-breathe{
  0%,100%{transform:translateY(-10px) translateZ(72px) rotate(-.5deg) scale(1.08)}
  50%{transform:translateY(-18px) translateZ(76px) rotate(.65deg) scale(1.1)}
}

@keyframes dp-stage-bottle-strike{
  0%{transform:translateY(-10px) translateZ(72px) rotate(0deg) scale(1.08)}
  36%{transform:translateY(-18px) translateX(var(--strike-lead-x,34px)) translateZ(88px) rotate(var(--strike-lead-tilt,8deg)) scale(1.13)}
  55%{transform:translateY(-20px) translateX(var(--strike-x,46px)) translateZ(96px) rotate(var(--strike-tilt,12deg)) scale(1.16)}
  66%{transform:translateY(-15px) translateX(var(--strike-rebound-x,29px)) translateZ(86px) rotate(var(--strike-rebound-tilt,-5deg)) scale(1.13)}
  72%{transform:translateY(-13px) translateX(var(--strike-overshoot-x,-8px)) translateZ(78px) rotate(var(--strike-settle-tilt,2deg)) scale(1.1)}
  100%{transform:translateY(-10px) translateX(0) translateZ(72px) rotate(0deg) scale(1.08)}
}

@keyframes dp-stage-bottle-recoil{
  0%{transform:translateY(-10px) translateZ(72px) rotate(0deg) scale(1.08)}
  36%{transform:translateY(-13px) translateX(var(--peer-lead-x,-10px)) translateZ(78px) rotate(var(--peer-lead-tilt,-3deg)) scale(1.09)}
  55%{transform:translateY(-16px) translateX(var(--peer-x,-24px)) translateZ(84px) rotate(var(--peer-tilt,-6deg)) scale(1.12)}
  68%{transform:translateY(-12px) translateX(var(--peer-rebound-x,6px)) translateZ(76px) rotate(var(--peer-rebound-tilt,2deg)) scale(1.09)}
  100%{transform:translateY(-10px) translateX(0) translateZ(72px) rotate(0deg) scale(1.08)}
}

@keyframes dp-stage-bottle-contact{
  0%,100%{filter:drop-shadow(0 16px 12px rgba(10,22,28,.2)) saturate(1.04)}
  45%{filter:drop-shadow(0 18px 15px rgba(10,22,28,.24)) saturate(1.18) contrast(1.04)}
}

body:not(:has(.admin-shell)) [aria-label="Dynamic 2D sauce bottle stage"] .dp-stage-fallback-bottle,
body:not(:has(.admin-shell)) [aria-label="Dynamic 5 oz glass sauce bottle stage"] .dp-stage-fallback-bottle{
  animation:dp-stage-bottle-breathe 5.8s ease-in-out infinite!important;
  animation-delay:calc(var(--stage-index,0) * -.42s)!important;
  cursor:pointer!important;
}

body:not(:has(.admin-shell)) [aria-label="Dynamic 2D sauce bottle stage"] .dp-stage-fallback-bottle.is-stage-striking,
body:not(:has(.admin-shell)) [aria-label="Dynamic 5 oz glass sauce bottle stage"] .dp-stage-fallback-bottle.is-stage-striking{
  animation:dp-stage-bottle-strike .58s cubic-bezier(.2,.88,.24,1.18) both!important;
  z-index:9!important;
}

body:not(:has(.admin-shell)) [aria-label="Dynamic 2D sauce bottle stage"] .dp-stage-fallback-bottle.is-stage-strike-peer,
body:not(:has(.admin-shell)) [aria-label="Dynamic 5 oz glass sauce bottle stage"] .dp-stage-fallback-bottle.is-stage-strike-peer{
  animation:dp-stage-bottle-recoil .58s cubic-bezier(.2,.88,.24,1.18) both!important;
  z-index:8!important;
}

body:not(:has(.admin-shell)) [aria-label="Dynamic 2D sauce bottle stage"] .dp-stage-fallback-bottle.is-stage-colliding .dp-stage-bottle-svg,
body:not(:has(.admin-shell)) [aria-label="Dynamic 5 oz glass sauce bottle stage"] .dp-stage-fallback-bottle.is-stage-colliding .dp-stage-bottle-svg{
  animation:dp-stage-bottle-contact .18s ease-out both!important;
}

body:not(:has(.admin-shell)) [aria-label="Dynamic 2D sauce bottle stage"] .dp-stage-bottle-svg,
body:not(:has(.admin-shell)) [aria-label="Dynamic 5 oz glass sauce bottle stage"] .dp-stage-bottle-svg{
  filter:drop-shadow(0 16px 12px rgba(10,22,28,.2)) saturate(1.05) contrast(1.04)!important;
}

body:not(:has(.admin-shell)) [aria-label="Dynamic 2D sauce bottle stage"] .dp-stage-bottle-svg path[stroke="#fff"],
body:not(:has(.admin-shell)) [aria-label="Dynamic 2D sauce bottle stage"] .dp-stage-bottle-svg path[stroke="#fff1c8"],
body:not(:has(.admin-shell)) [aria-label="Dynamic 2D sauce bottle stage"] .dp-stage-bottle-svg path[stroke="#fff4bd"],
body:not(:has(.admin-shell)) [aria-label="Dynamic 5 oz glass sauce bottle stage"] .dp-stage-bottle-svg path[stroke="#fff"],
body:not(:has(.admin-shell)) [aria-label="Dynamic 5 oz glass sauce bottle stage"] .dp-stage-bottle-svg path[stroke="#fff1c8"],
body:not(:has(.admin-shell)) [aria-label="Dynamic 5 oz glass sauce bottle stage"] .dp-stage-bottle-svg path[stroke="#fff4bd"]{
  stroke-opacity:.2!important;
  opacity:.32!important;
  stroke-width:.9!important;
  filter:none!important;
}

body:not(:has(.admin-shell)) [aria-label="Dynamic 2D sauce bottle stage"] .dp-stage-bottle-svg path[fill*="white"],
body:not(:has(.admin-shell)) [aria-label="Dynamic 5 oz glass sauce bottle stage"] .dp-stage-bottle-svg path[fill*="white"]{
  opacity:.16!important;
  filter:none!important;
}

body:not(:has(.admin-shell)) [aria-label="Dynamic 2D sauce bottle stage"] .dp-stage-fallback-glass::after,
body:not(:has(.admin-shell)) [aria-label="Dynamic 5 oz glass sauce bottle stage"] .dp-stage-fallback-glass::after{
  content:""!important;
  position:absolute!important;
  left:50%!important;
  right:auto!important;
  top:-4px!important;
  width:clamp(34px,4.4vw,46px)!important;
  height:clamp(22px,3vw,32px)!important;
  transform:translateX(-50%)!important;
  z-index:8!important;
  display:block!important;
  border-radius:7px 7px 4px 4px!important;
  background:
    linear-gradient(180deg,rgba(255,255,255,.08),rgba(255,255,255,.02) 18%,rgba(0,0,0,.2) 78%,rgba(0,0,0,.5) 100%),
    repeating-linear-gradient(90deg,#050505 0 2px,#171818 2px 3px,#343636 3px 4px,#0b0c0c 4px 6px,#010101 6px 7px)!important;
  box-shadow:
    inset 0 3px 2px rgba(255,255,255,.1),
    inset 0 -8px 8px rgba(0,0,0,.74),
    inset 2px 0 2px rgba(255,255,255,.08),
    inset -2px 0 2px rgba(0,0,0,.66),
    0 2px 0 rgba(0,0,0,.58),
    0 3px 8px rgba(5,25,34,.22)!important;
  filter:none!important;
  opacity:1!important;
}

body:not(:has(.admin-shell)) [aria-label="Dynamic 2D sauce bottle stage"] .dp-stage-fallback-glass .dp-stage-cap::before,
body:not(:has(.admin-shell)) [aria-label="Dynamic 5 oz glass sauce bottle stage"] .dp-stage-fallback-glass .dp-stage-cap::before,
body:not(:has(.admin-shell)) [aria-label="Dynamic 2D sauce bottle stage"] .dp-stage-fallback-glass::before,
body:not(:has(.admin-shell)) [aria-label="Dynamic 5 oz glass sauce bottle stage"] .dp-stage-fallback-glass::before{
  content:""!important;
  position:absolute!important;
  left:50%!important;
  top:-7px!important;
  width:clamp(36px,4.8vw,50px)!important;
  height:clamp(10px,1.35vw,15px)!important;
  transform:translateX(-50%)!important;
  z-index:10!important;
  display:block!important;
  border-radius:50%!important;
  background:
    radial-gradient(ellipse at 50% 28%,rgba(255,255,255,.18),rgba(255,255,255,.04) 33%,rgba(8,8,8,.18) 58%,rgba(0,0,0,.34) 100%),
    linear-gradient(180deg,#303131 0%,#171818 48%,#060707 100%)!important;
  box-shadow:
    inset 0 1px 1px rgba(255,255,255,.16),
    inset 0 -2px 3px rgba(0,0,0,.72),
    0 1px 0 rgba(255,255,255,.08),
    0 2px 3px rgba(0,0,0,.18)!important;
  opacity:1!important;
  pointer-events:none!important;
}

body:not(:has(.admin-shell)) [aria-label="Dynamic 2D sauce bottle stage"] .dp-stage-cap,
body:not(:has(.admin-shell)) [aria-label="Dynamic 5 oz glass sauce bottle stage"] .dp-stage-cap{
  left:50%!important;
  top:0!important;
  width:clamp(28px,3.8vw,38px)!important;
  height:clamp(18px,2.4vw,24px)!important;
  transform:translateX(-50%)!important;
  z-index:8!important;
  border-radius:7px 7px 4px 4px!important;
  background:
    linear-gradient(180deg,rgba(255,255,255,.08),rgba(255,255,255,.02) 18%,rgba(0,0,0,.2) 78%,rgba(0,0,0,.5) 100%),
    repeating-linear-gradient(90deg,#050505 0 2px,#171818 2px 3px,#343636 3px 4px,#0b0c0c 4px 6px,#010101 6px 7px)!important;
  box-shadow:
    inset 0 3px 2px rgba(255,255,255,.1),
    inset 0 -8px 8px rgba(0,0,0,.74),
    inset 2px 0 2px rgba(255,255,255,.08),
    inset -2px 0 2px rgba(0,0,0,.66),
    0 2px 0 rgba(0,0,0,.58)!important;
  overflow:hidden!important;
}

body:not(:has(.admin-shell)) [aria-label="Dynamic 2D sauce bottle stage"] .dp-stage-bottle-svg > g:last-of-type g path,
body:not(:has(.admin-shell)) [aria-label="Dynamic 5 oz glass sauce bottle stage"] .dp-stage-bottle-svg > g:last-of-type g path{
  stroke-width:1.65!important;
  stroke-opacity:.82!important;
  opacity:1!important;
}

@media(max-width:720px){
  body:not(:has(.admin-shell)) [aria-label="Dynamic 2D sauce bottle stage"] .dp-stage-fallback-bottle,
  body:not(:has(.admin-shell)) [aria-label="Dynamic 5 oz glass sauce bottle stage"] .dp-stage-fallback-bottle{
    animation-name:dp-stage-bottle-breathe!important;
  }
}

@media(prefers-reduced-motion:reduce){
  body:not(:has(.admin-shell)) [aria-label="Dynamic 2D sauce bottle stage"] .dp-stage-fallback-bottle,
  body:not(:has(.admin-shell)) [aria-label="Dynamic 5 oz glass sauce bottle stage"] .dp-stage-fallback-bottle{
    animation:none!important;
  }
}

/* 2D stage lane contract: active admin sauces render as one scalable row; large catalogs scroll instead of cropping. */
body:not(:has(.admin-shell)) [aria-label="Dynamic 2D sauce bottle stage"] .dp-stage-fallback-wrap,
body:not(:has(.admin-shell)) [aria-label="Dynamic 5 oz glass sauce bottle stage"] .dp-stage-fallback-wrap{
  display:flex!important;
  flex-wrap:nowrap!important;
  align-items:flex-end!important;
  justify-content:flex-start!important;
  gap:clamp(9px,1.35vw,18px)!important;
  width:100%!important;
  max-width:100%!important;
  overflow-x:auto!important;
  overflow-y:visible!important;
  scroll-snap-type:x proximity!important;
  -webkit-overflow-scrolling:touch!important;
  padding-inline:clamp(8px,2.2vw,26px)!important;
  padding-top:clamp(10px,2vw,22px)!important;
  padding-bottom:clamp(16px,2.6vw,34px)!important;
  transform:translateY(0) translateZ(0)!important;
}

body:not(:has(.admin-shell)) [aria-label="Dynamic 2D sauce bottle stage"] .dp-stage-fallback-wrap::-webkit-scrollbar,
body:not(:has(.admin-shell)) [aria-label="Dynamic 5 oz glass sauce bottle stage"] .dp-stage-fallback-wrap::-webkit-scrollbar{
  display:none!important;
}

body:not(:has(.admin-shell)) [aria-label="Dynamic 2D sauce bottle stage"] .dp-stage-fallback-wrap[data-stage-count="1"],
body:not(:has(.admin-shell)) [aria-label="Dynamic 2D sauce bottle stage"] .dp-stage-fallback-wrap[data-stage-count="2"],
body:not(:has(.admin-shell)) [aria-label="Dynamic 2D sauce bottle stage"] .dp-stage-fallback-wrap[data-stage-count="3"],
body:not(:has(.admin-shell)) [aria-label="Dynamic 2D sauce bottle stage"] .dp-stage-fallback-wrap[data-stage-count="4"],
body:not(:has(.admin-shell)) [aria-label="Dynamic 2D sauce bottle stage"] .dp-stage-fallback-wrap[data-stage-count="5"],
body:not(:has(.admin-shell)) [aria-label="Dynamic 5 oz glass sauce bottle stage"] .dp-stage-fallback-wrap[data-stage-count="1"],
body:not(:has(.admin-shell)) [aria-label="Dynamic 5 oz glass sauce bottle stage"] .dp-stage-fallback-wrap[data-stage-count="2"],
body:not(:has(.admin-shell)) [aria-label="Dynamic 5 oz glass sauce bottle stage"] .dp-stage-fallback-wrap[data-stage-count="3"],
body:not(:has(.admin-shell)) [aria-label="Dynamic 5 oz glass sauce bottle stage"] .dp-stage-fallback-wrap[data-stage-count="4"],
body:not(:has(.admin-shell)) [aria-label="Dynamic 5 oz glass sauce bottle stage"] .dp-stage-fallback-wrap[data-stage-count="5"]{
  justify-content:center!important;
}

body:not(:has(.admin-shell)) [aria-label="Dynamic 2D sauce bottle stage"] .dp-stage-fallback-bottle,
body:not(:has(.admin-shell)) [aria-label="Dynamic 5 oz glass sauce bottle stage"] .dp-stage-fallback-bottle{
  flex:0 1 clamp(58px,6.6vw,82px)!important;
  min-width:58px!important;
  max-width:82px!important;
  scroll-snap-align:center!important;
}

body:not(:has(.admin-shell)) [aria-label="Dynamic 2D sauce bottle stage"] .dp-stage-fallback-glass,
body:not(:has(.admin-shell)) [aria-label="Dynamic 5 oz glass sauce bottle stage"] .dp-stage-fallback-glass{
  width:clamp(58px,6.6vw,82px)!important;
  height:clamp(184px,20vw,246px)!important;
}

body:not(:has(.admin-shell)) [aria-label="Dynamic 2D sauce bottle stage"] .dp-stage-label,
body:not(:has(.admin-shell)) [aria-label="Dynamic 5 oz glass sauce bottle stage"] .dp-stage-label{
  left:31%!important;
  right:31%!important;
  bottom:19%!important;
  min-height:clamp(34px,5.2vw,52px)!important;
  max-height:clamp(42px,6.6vw,64px)!important;
  padding:3px 2px!important;
}

body:not(:has(.admin-shell)) [aria-label="Dynamic 2D sauce bottle stage"] .dp-stage-fallback-bottle p,
body:not(:has(.admin-shell)) [aria-label="Dynamic 5 oz glass sauce bottle stage"] .dp-stage-fallback-bottle p{
  max-width:100%!important;
  font-size:clamp(7px,.75vw,10px)!important;
  line-height:1.1!important;
  white-space:nowrap!important;
}

@media(max-width:720px){
  @keyframes dp-stage-bottle-breathe-mobile{
    0%,100%{transform:translateY(0) translateZ(44px) rotate(-.35deg) scale(1.04)}
    50%{transform:translateY(-7px) translateZ(48px) rotate(.45deg) scale(1.06)}
  }

  body:not(:has(.admin-shell)) .abc-hero-ripple .viewer-stage,
  body:not(:has(.admin-shell)) [aria-label="Dynamic 2D sauce bottle stage"],
  body:not(:has(.admin-shell)) [aria-label="Dynamic 5 oz glass sauce bottle stage"]{
    overflow:visible!important;
  }

  body:not(:has(.admin-shell)) [aria-label="Dynamic 2D sauce bottle stage"] .dp-stage-fallback-wrap,
  body:not(:has(.admin-shell)) [aria-label="Dynamic 5 oz glass sauce bottle stage"] .dp-stage-fallback-wrap{
    justify-content:flex-start!important;
    overflow-x:auto!important;
    overflow-y:visible!important;
    scroll-snap-type:x proximity!important;
    -webkit-overflow-scrolling:touch!important;
    padding-inline:16px!important;
    padding-top:84px!important;
    padding-bottom:34px!important;
    gap:12px!important;
  }

  body:not(:has(.admin-shell)) [aria-label="Dynamic 2D sauce bottle stage"] .dp-stage-fallback-wrap::-webkit-scrollbar,
  body:not(:has(.admin-shell)) [aria-label="Dynamic 5 oz glass sauce bottle stage"] .dp-stage-fallback-wrap::-webkit-scrollbar{
    display:none!important;
  }

  body:not(:has(.admin-shell)) [aria-label="Dynamic 2D sauce bottle stage"] .dp-stage-fallback-bottle,
  body:not(:has(.admin-shell)) [aria-label="Dynamic 5 oz glass sauce bottle stage"] .dp-stage-fallback-bottle{
    flex:0 0 64px!important;
    scroll-snap-align:center!important;
    animation-name:dp-stage-bottle-breathe-mobile!important;
    transform:translateY(0) translateZ(44px) scale(1.04)!important;
  }

  body:not(:has(.admin-shell)) [aria-label="Dynamic 2D sauce bottle stage"] .dp-stage-fallback-glass,
  body:not(:has(.admin-shell)) [aria-label="Dynamic 5 oz glass sauce bottle stage"] .dp-stage-fallback-glass{
    width:64px!important;
    height:196px!important;
  }

  body:not(:has(.admin-shell)) [aria-label="Dynamic 2D sauce bottle stage"] .dp-stage-cap,
  body:not(:has(.admin-shell)) [aria-label="Dynamic 5 oz glass sauce bottle stage"] .dp-stage-cap,
  body:not(:has(.admin-shell)) [aria-label="Dynamic 2D sauce bottle stage"] .dp-stage-fallback-glass::after,
  body:not(:has(.admin-shell)) [aria-label="Dynamic 5 oz glass sauce bottle stage"] .dp-stage-fallback-glass::after{
    width:36px!important;
    height:24px!important;
    top:-5px!important;
  }

  body:not(:has(.admin-shell)) [aria-label="Dynamic 2D sauce bottle stage"] .dp-stage-fallback-glass::before,
  body:not(:has(.admin-shell)) [aria-label="Dynamic 5 oz glass sauce bottle stage"] .dp-stage-fallback-glass::before{
    width:39px!important;
    height:11px!important;
    top:-9px!important;
  }

  /* Removed: responsive resizing of the legacy fake CSS cap (now neutralized above). */
}

/* Mobile stage density contract: keep the 2D bottles and heat rail in the same customer scan. */
@media(max-width:720px){
  body:not(:has(.admin-shell)) .abc-hero-ripple > div:first-of-type{
    gap:clamp(.5rem,2vh,1rem)!important;
    padding-bottom:clamp(5.5rem,12vh,7rem)!important;
  }

  body:not(:has(.admin-shell)) .abc-hero-ripple .viewer-stage{
    min-height:clamp(250px,34vh,315px)!important;
    margin-top:clamp(.75rem,3vh,1.75rem)!important;
  }

  body:not(:has(.admin-shell)) .abc-hero-ripple .viewer-stage + div{
    margin-top:.15rem!important;
  }

  body:not(:has(.admin-shell)) [aria-label="Dynamic 2D sauce bottle stage"] .dp-stage-fallback-wrap,
  body:not(:has(.admin-shell)) [aria-label="Dynamic 5 oz glass sauce bottle stage"] .dp-stage-fallback-wrap{
    padding-top:84px!important;
    padding-bottom:18px!important;
    align-items:flex-start!important;
  }

  body:not(:has(.admin-shell)) [aria-label="Dynamic 2D sauce bottle stage"] .dp-stage-fallback-glass,
  body:not(:has(.admin-shell)) [aria-label="Dynamic 5 oz glass sauce bottle stage"] .dp-stage-fallback-glass{
    height:clamp(178px,48vw,190px)!important;
  }
}

/* ===========================================================================
   Desktop product layout: lay sauce cards SIDE BY SIDE in a responsive grid
   instead of one narrow stacked column. The earlier contract CSS pinned the
   grid to ~520px / single column, which made sense for one product but wasted
   the desktop width with several. `:has(> article + article)` only matches when
   there are 2+ cards, so a single product still uses its centered single-card
   layout. auto-fit + minmax means it naturally collapses back to one column on
   mobile. The 2D bottle is rendered INSIDE each card, so this does not touch it.
   =========================================================================== */
body:not(:has(.admin-shell)) #sauces div:has(> article + article){
  max-width:min(1180px,100%)!important;
  grid-template-columns:repeat(auto-fit,minmax(290px,1fr))!important;
  justify-content:center!important;
  justify-items:stretch!important;
  gap:clamp(1rem,2vw,1.5rem)!important;
}
body:not(:has(.admin-shell)) #sauces div:has(> article + article) > article{
  max-width:none!important;
  width:100%!important;
  margin-left:0!important;
  margin-right:0!important;
}

/* ===========================================================================
   Fix text "leaking" to the screen edges in the Testimonial ("Community Voices")
   section — the React markup renders it full-bleed with no container, so the big
   quote touched both edges. Give the section's content a centred max-width and
   comfortable side padding so the text always has breathing room.
   =========================================================================== */
body:not(:has(.admin-shell)) main section:has(blockquote) > div:first-child{
  max-width:min(1180px,100%)!important;
  margin-left:auto!important;
  margin-right:auto!important;
  padding-left:clamp(1.1rem,4vw,2.5rem)!important;
  padding-right:clamp(1.1rem,4vw,2.5rem)!important;
  box-sizing:border-box!important;
}
body:not(:has(.admin-shell)) main section:has(blockquote) blockquote{
  overflow-wrap:anywhere;
}

/* 10 ms rule — larger tap targets on touch devices (Apple's 44x44 guidance),
   applied only where pointers are coarse so desktop visuals stay tight. */
@media (pointer:coarse){
  body:not(:has(.admin-shell)) footer a,
  body:not(:has(.admin-shell)) [data-dp-social] a{
    min-height:44px;
    display:inline-flex;
    align-items:center;
    padding-block:4px;
  }
}

/* ===========================================================================
   Long-name robustness: a long sauce name must never overflow a card, the cart,
   or the peek, or push the grid out of shape. Allow wrapping everywhere a name
   appears and keep flex/grid children from expanding past their track.
   =========================================================================== */
body:not(:has(.admin-shell)) #sauces article{ min-width:0!important; }
body:not(:has(.admin-shell)) #sauces article h1,
body:not(:has(.admin-shell)) #sauces article h2,
body:not(:has(.admin-shell)) #sauces article h3,
body:not(:has(.admin-shell)) .dp-sauce-peek-copy h1,
body:not(:has(.admin-shell)) .dp-sauce-peek-copy h2,
body:not(:has(.admin-shell)) [data-cart-panel] [class*="font-"],
body:not(:has(.admin-shell)) [role="dialog"] [data-cart-panel] *{
  min-width:0;
  overflow-wrap:anywhere;
  word-break:break-word;
  hyphens:auto;
}
/* Cart row: keep the name column from shoving the price/qty controls off-screen. */
body:not(:has(.admin-shell)) [data-cart-panel] li,
body:not(:has(.admin-shell)) [data-cart-panel] [class*="flex"] > *{ min-width:0; }

/* Dallepepper non-pepper logo refresh: compact DP summit mark + refined wordmark. */
body:not(:has(.admin-shell)) header a[href="/"],
body:not(:has(.admin-shell)) header a[href="./"],
body:not(:has(.admin-shell)) header a[href="https://dallepepper.com/"],
body:not(:has(.admin-shell)) header a:first-of-type{
  --dp-logo-ink:#17120f;
  --dp-logo-red:#9d1f1f;
  --dp-logo-gold:#f3b23f;
  --dp-logo-cream:#fff7e8;
  display:inline-flex!important;
  align-items:center!important;
  gap:.58rem!important;
  max-width:min(52vw,20rem)!important;
  color:var(--dp-logo-ink)!important;
  font-family:Georgia,"Times New Roman",serif!important;
 font-weight:900!important;
  letter-spacing:0!important;
  line-height:1!important;
  text-decoration:none!important;
}

body:not(:has(.admin-shell)) header a[href="/"]::before,
body:not(:has(.admin-shell)) header a[href="./"]::before,
body:not(:has(.admin-shell)) header a[href="https://dallepepper.com/"]::before,
body:not(:has(.admin-shell)) header a:first-of-type::before{
  content:"DP";
 flex:0 0 auto;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:2.38rem;
  height:2.38rem;
  border:1px solid rgba(23,18,15,.18);
  border-radius:.62rem;
  background:
    linear-gradient(145deg,rgba(255,255,255,.34),rgba(255,255,255,0) 42%),
    linear-gradient(180deg,var(--dp-logo-cream) 0 50%,#f8dfab 50% 100%);
  box-shadow:0 .42rem 1rem rgba(23,18,15,.14), inset 0 0 0 3px rgba(157,31,31,.08);
  color:var(--dp-logo-red);
  font-family:Georgia,"Times New Roman",serif;
 font-size:.86rem;
  font-weight:900;
  letter-spacing:0;
  line-height:1;
}

body:not(:has(.admin-shell)) header a[href="/"]::after,
body:not(:has(.admin-shell)) header a[href="./"]::after,
body:not(:has(.admin-shell)) header a[href="https://dallepepper.com/"]::after,
body:not(:has(.admin-shell)) header a:first-of-type::after{
  content:"";
  flex:0 0 auto;
  width:2.1rem;
  height:.38rem;
  margin-left:-2.9rem;
  margin-top:1.25rem;
  border-top:2px solid var(--dp-logo-red);
  border-right:2px solid var(--dp-logo-gold);
  transform:skewX(-28deg);
  pointer-events:none;
}

body:not(:has(.admin-shell)) header a:first-of-type .dp-brand-mark{
  display:none!important;
}

@media(max-width:520px){
  body:not(:has(.admin-shell)) header a[href="/"],
  body:not(:has(.admin-shell)) header a[href="./"],
  body:not(:has(.admin-shell)) header a[href="https://dallepepper.com/"],
  body:not(:has(.admin-shell)) header a:first-of-type{
    gap:.44rem!important;
    max-width:min(48vw,13rem)!important;
    font-size:.88rem!important;
  }
  body:not(:has(.admin-shell)) header a[href="/"]::before,
  body:not(:has(.admin-shell)) header a[href="./"]::before,
  body:not(:has(.admin-shell)) header a[href="https://dallepepper.com/"]::before,
  body:not(:has(.admin-shell)) header a:first-of-type::before{
    width:2.05rem;
    height:2.05rem;
    border-radius:.52rem;
    font-size:.76rem;
  }
  body:not(:has(.admin-shell)) header a[href="/"]::after,
  body:not(:has(.admin-shell)) header a[href="./"]::after,
  body:not(:has(.admin-shell)) header a[href="https://dallepepper.com/"]::after,
  body:not(:has(.admin-shell)) header a:first-of-type::after{
    width:1.76rem;
    margin-left:-2.48rem;
    margin-top:1.07rem;
  }
}