/* The new crop pictogram is mobile-only; preserve the desktop's original icon. */
html body #preview-sticker-price-card > #sticker-size-toggle svg.sticker-size-mobile-crop {
  display:none !important;
}
/* CASESTUDIO V380 — mobile-only detail pass.
   The established desktop design and every purchase/navigation handler remain unchanged.
   R08 keeps the price pills in a mobile-only footer inside the preview. */
@media (max-width:700px) {
  /* Both compact price pills share one stable, content-sized alignment model.
     The imported editor profile previously forced the sticker pill to 88x29px
     and separately translated its amount and tier dot. */
  html body :is(#preview-sticker-price-card):is(#preview-sticker-price-card),
  html body :is(#preview-case-price-card):is(#preview-case-price-card) {
    box-sizing:border-box !important;
    position:static !important;
    display:inline-flex !important;
    flex-direction:row !important;
    direction:rtl !important;
    justify-content:center !important;
    align-items:center !important;
    gap:7px !important;
    width:max-content !important;
    min-width:0 !important;
    max-width:100% !important;
    height:34px !important;
    min-height:34px !important;
    max-height:34px !important;
    padding:6px 11px !important;
    margin:0 !important;
    border-radius:999px !important;
    translate:none !important;
    transform:none !important;
    inset:auto !important;
    white-space:nowrap !important;
  }
  html body :is(#preview-sticker-price):is(#preview-sticker-price),
  html body :is(#preview-case-price):is(#preview-case-price) {
    box-sizing:border-box !important;
    display:flex !important;
    align-items:center !important;
    justify-content:center !important;
    flex:0 0 auto !important;
    order:1 !important;
    height:auto !important;
    min-height:0 !important;
    margin:0 !important;
    padding:0 !important;
    translate:none !important;
    transform:none !important;
    font-size:clamp(14px,3.6vw,16px) !important;
    line-height:1.15 !important;
    font-variant-numeric:tabular-nums !important;
    text-align:center !important;
    white-space:nowrap !important;
  }
  html body #preview-sticker-price-card > .preview-tier-row,
  html body #preview-case-price-card > .preview-tier-row {
    position:relative !important;
    flex:0 0 12px !important;
    box-sizing:border-box !important;
    order:2 !important;
    display:flex !important;
    justify-content:center !important;
    align-items:center !important;
    align-self:center !important;
    width:12px !important;
    min-width:12px !important;
    height:12px !important;
    min-height:12px !important;
    margin:0 !important;
    padding:0 !important;
    gap:0 !important;
    overflow:visible !important;
    translate:none !important;
    transform:none !important;
    top:auto !important;
    bottom:auto !important;
    line-height:1 !important;
  }
  html body :is(#preview-sticker-tier-dot):is(#preview-sticker-tier-dot),
  html body :is(#preview-case-tier-dot):is(#preview-case-tier-dot) {
    box-sizing:border-box !important;
    display:block !important;
    flex:0 0 11px !important;
    width:11px !important;
    min-width:11px !important;
    max-width:11px !important;
    height:11px !important;
    min-height:11px !important;
    max-height:11px !important;
    margin:0 !important;
    padding:0 !important;
    border-radius:50% !important;
    translate:none !important;
    transform:none !important;
    z-index:auto !important;
  }

  /* Crop icon: familiar intersecting crop corners, not a diagonal ruler.
     Enlarging is restricted to mobile; all existing desktop dimensions survive. */
  html body :is(#sticker-size-toggle):is(#sticker-size-toggle),
  html body :is(#sticker-size-toggle):is(#sticker-size-toggle):is(:hover,:focus,:focus-visible,:active) {
    appearance:none;
    -webkit-appearance:none;
    box-sizing:border-box !important;
    display:inline-flex !important;
    justify-content:center !important;
    align-items:center !important;
    flex:0 0 44px !important;
    width:44px !important;
    min-width:44px !important;
    max-width:44px !important;
    height:44px !important;
    min-height:44px !important;
    max-height:44px !important;
    padding:9px !important;
    margin:0 !important;
    border:1px solid rgba(174,232,255,.92) !important;
    border-radius:12px !important;
    background:linear-gradient(145deg,#5547c7 0%,#2469c8 58%,#1688bd 100%) !important;
    color:#fff !important;
    box-shadow:0 3px 10px rgba(34,76,160,.28),inset 0 1px 0 rgba(255,255,255,.30) !important;
    translate:none !important;
    transform:none !important;
    cursor:pointer;
    touch-action:manipulation;
    transition:background .16s ease,box-shadow .16s ease,filter .16s ease !important;
  }
  html body #sticker-size-toggle svg {
    width:23px !important;
    height:23px !important;
    flex:0 0 23px !important;
    display:block !important;
    fill:none !important;
    stroke:#fff !important;
    stroke-width:2 !important;
    stroke-linecap:round !important;
    stroke-linejoin:round !important;
  }
  html body #sticker-size-toggle:active {
    filter:brightness(.93) !important;
  }
  html body #sticker-size-toggle svg.sticker-size-original-icon {
    display:none !important;
  }
  html body #sticker-size-toggle svg.sticker-size-mobile-crop {
    display:block !important;
  }

  /* Correct old editor transforms so the luck button follows the preview
     naturally rather than appearing in the preview's final 16 pixels. */
  html body main.main-layout > section.preview-section > .dice-area {
    order:4 !important;
    position:relative !important;
    top:auto !important;
    bottom:auto !important;
    left:auto !important;
    right:auto !important;
    display:flex !important;
    flex-direction:column !important;
    align-items:center !important;
    width:calc(100% - 12px) !important;
    margin:5px auto 7px !important;
    padding:0 !important;
    translate:none !important;
    transform:none !important;
    z-index:2 !important;
  }
  html body :is(#random-combo-button):is(#random-combo-button) {
    box-sizing:border-box !important;
    position:relative !important;
    display:flex !important;
    align-items:center !important;
    justify-content:center !important;
    top:0 !important;
    bottom:auto !important;
    left:auto !important;
    right:auto !important;
    width:100% !important;
    max-width:100% !important;
    min-height:43px !important;
    height:43px !important;
    margin:0 !important;
    padding:5px 10px !important;
    translate:none !important;
    transform:none !important;
    z-index:2 !important;
  }

  /* R08: these original hint nodes occupy the middle of the stage footer.
     Clear the old source-editor coordinates without moving the phone. */
  html body :is(main.main-layout > section.preview-section:nth-of-type(2) > div.nav-hint:nth-of-type(6)):is(main.main-layout > section.preview-section:nth-of-type(2) > div.nav-hint:nth-of-type(6)),
  html body main.main-layout > section.preview-section > .nav-hint,
  html body .r08-mobile-preview-guidance > .nav-hint {
    box-sizing:border-box !important;
    position:relative !important;
    display:block !important;
    order:3 !important;
    top:auto !important;
    bottom:auto !important;
    left:auto !important;
    right:auto !important;
    width:max-content !important;
    max-width:calc(100% - 24px) !important;
    height:auto !important;
    min-height:0 !important;
    margin:0 auto !important;
    padding:4px 11px !important;
    border-radius:999px !important;
    background:rgba(114,134,198,.12) !important;
    color:#bfcdf0 !important;
    opacity:1 !important;
    font-size:12px !important;
    line-height:1.35 !important;
    font-weight:700 !important;
    text-align:center !important;
    white-space:nowrap !important;
    translate:none !important;
    transform:none !important;
  }
  html body :is(main.main-layout > section.preview-section:nth-of-type(2) > div.rotation-help:nth-of-type(7)):is(main.main-layout > section.preview-section:nth-of-type(2) > div.rotation-help:nth-of-type(7)),
  html body main.main-layout > section.preview-section > .rotation-help,
  html body .r08-mobile-preview-guidance > .rotation-help {
    box-sizing:border-box !important;
    position:relative !important;
    display:block !important;
    order:3 !important;
    top:auto !important;
    bottom:auto !important;
    left:auto !important;
    right:auto !important;
    width:100% !important;
    height:auto !important;
    margin:0 auto !important;
    padding:0 10px !important;
    color:#a6b7d2 !important;
    font-size:clamp(10px,2.7vw,12px) !important;
    line-height:1.5 !important;
    text-align:center !important;
    white-space:normal !important;
    overflow-wrap:break-word;
    translate:none !important;
    transform:none !important;
  }
  html[data-theme="light"] body :is(main.main-layout > section.preview-section:nth-of-type(2) > div.nav-hint:nth-of-type(6)):is(main.main-layout > section.preview-section:nth-of-type(2) > div.nav-hint:nth-of-type(6)),
  body[data-theme="light"] :is(main.main-layout > section.preview-section:nth-of-type(2) > div.nav-hint:nth-of-type(6)):is(main.main-layout > section.preview-section:nth-of-type(2) > div.nav-hint:nth-of-type(6)),
  html[data-theme="light"] body .r08-mobile-preview-guidance > .nav-hint,
  body[data-theme="light"] .r08-mobile-preview-guidance > .nav-hint {
    background:rgba(71,102,173,.12) !important;
    color:#344e7c !important;
  }
  html[data-theme="light"] body :is(main.main-layout > section.preview-section:nth-of-type(2) > div.rotation-help:nth-of-type(7)):is(main.main-layout > section.preview-section:nth-of-type(2) > div.rotation-help:nth-of-type(7)),
  body[data-theme="light"] :is(main.main-layout > section.preview-section:nth-of-type(2) > div.rotation-help:nth-of-type(7)):is(main.main-layout > section.preview-section:nth-of-type(2) > div.rotation-help:nth-of-type(7)),
  html[data-theme="light"] body .r08-mobile-preview-guidance > .rotation-help,
  body[data-theme="light"] .r08-mobile-preview-guidance > .rotation-help {
    color:#526789 !important;
  }
}
@media (max-width:380px) {
  html body :is(#preview-sticker-price-card):is(#preview-sticker-price-card),
  html body :is(#preview-case-price-card):is(#preview-case-price-card) {
    height:32px !important;
    min-height:32px !important;
    max-height:32px !important;
    gap:5px !important;
    padding:5px 9px !important;
  }
  html body :is(#sticker-size-toggle):is(#sticker-size-toggle) {
    width:42px !important;
    min-width:42px !important;
    max-width:42px !important;
    height:42px !important;
    min-height:42px !important;
    max-height:42px !important;
    flex-basis:42px !important;
  }
}
/* Existing V333 page zoom scales all controls at widths below 510px.
   Compensate gently so the crop action remains a usable touch target. */
@media (min-width:250px) and (max-width:510px) {
  /* The existing page zoom is viewport/490. Compensate only the footer text
     so the middle column remains readable when that page canvas is scaled. */
  .r08-mobile-preview-prices {
    --r08-hint-font:clamp(12px,calc(31px - 4vw),21px);
  }
  html body :is(#sticker-size-toggle):is(#sticker-size-toggle),
  html body :is(#sticker-size-toggle):is(#sticker-size-toggle):is(:hover,:focus,:focus-visible,:active) {
    width:clamp(44px,calc(91px - 10vw),61px) !important;
    min-width:clamp(44px,calc(91px - 10vw),61px) !important;
    max-width:clamp(44px,calc(91px - 10vw),61px) !important;
    height:clamp(44px,calc(91px - 10vw),61px) !important;
    min-height:clamp(44px,calc(91px - 10vw),61px) !important;
    max-height:clamp(44px,calc(91px - 10vw),61px) !important;
    flex-basis:clamp(44px,calc(91px - 10vw),61px) !important;
  }
  html body #sticker-size-toggle svg.sticker-size-mobile-crop {
    width:clamp(23px,calc(35px - 2.5vw),27px) !important;
    height:clamp(23px,calc(35px - 2.5vw),27px) !important;
    flex-basis:clamp(23px,calc(35px - 2.5vw),27px) !important;
  }
}

/* Clear slider pictograms inside the existing tier-color filter indicators. */
html body .preview-stage .preview-nav .nav-filter-trigger .nav-filter-selected-dot {
  display:grid !important;
  place-items:center !important;
}
html body .preview-stage .preview-nav .nav-filter-trigger .nav-filter-slider-icon {
  display:block !important;
  width:14px !important;
  height:14px !important;
  overflow:visible !important;
}

/* Reuse the purchase-location dropdown's trigger and option-menu appearance. */
#sticker-size-picker select.sticker-size-native-select-accessible {
  position:absolute !important;
  width:1px !important;
  height:1px !important;
  padding:0 !important;
  margin:-1px !important;
  overflow:hidden !important;
  clip:rect(0,0,0,0) !important;
  white-space:nowrap !important;
  border:0 !important;
  opacity:0 !important;
  pointer-events:none !important;
}
#sticker-size-picker .sticker-size-dropdown {
  position:relative !important;
  display:block !important;
  width:100% !important;
  min-width:0 !important;
}
#sticker-size-picker .sticker-size-select-trigger {
  min-height:38px !important;
  height:38px !important;
  padding:7px 11px !important;
  border-radius:12px !important;
  font-size:13px !important;
}
#sticker-size-picker .sticker-size-options-menu {
  top:calc(100% + 5px) !important;
  max-height:min(34vh,200px) !important;
  z-index:2147483001 !important;
}
#sticker-size-picker .sticker-size-options-menu .case-city-option {
  padding:8px 10px !important;
  font-size:12px !important;
}

@media (min-width:701px) {
  html body main.main-layout > section.preview-section > .preview-stage > #preview-sticker-price-card {
    position:relative !important;
  }
  html body :is(#preview-sticker-price-card):is(#preview-sticker-price-card) > #sticker-size-toggle {
    position:absolute !important;
    left:calc(100% + 8px) !important;
    right:auto !important;
    top:50% !important;
    bottom:auto !important;
    translate:0 -50% !important;
    transform:none !important;
  }
}

@media (max-width:700px) {
  /* Natural grid rows reserve the full phone/rail height before the stationary
     hints. floatingPhone ranges from -7px to 0, so its lowest edge is in-flow. */
  html body main.main-layout > section.preview-section > .preview-stage {
    grid-template-rows:auto auto !important;
    padding-bottom:5px !important;
    row-gap:4px !important;
  }
  .r08-mobile-preview-guidance {
    grid-column:2;
    grid-row:1 / 3;
    align-self:center;
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:4px;
    width:100%;
    min-width:0;
    box-sizing:border-box;
    direction:rtl;
  }
  .r08-mobile-preview-prices {
    grid-column:1 / -1;
    grid-row:2;
    display:grid;
    /* LTR makes columns 1 and 3 physical left/right, independent of the page. */
    grid-template-columns:max-content minmax(0,1fr) max-content;
    gap:6px clamp(4px,1.5vw,8px);
    align-items:end;
    justify-items:center;
    direction:ltr;
    width:100%;
    min-width:0;
  }
  html body .r08-mobile-preview-guidance > :is(.nav-hint,.rotation-help) {
    font-size:var(--r08-hint-font,12px) !important;
    max-width:100% !important;
    padding-inline:0 !important;
    white-space:normal !important;
    overflow-wrap:break-word;
  }
  html body .r08-mobile-preview-prices > #preview-case-price-card {
    grid-column:1;
    grid-row:2;
  }
  html body .r08-mobile-preview-prices > #preview-sticker-price-card {
    grid-column:3;
    grid-row:2;
  }
  html body :is(#sticker-size-toggle):is(#sticker-size-toggle),
  html body :is(#sticker-size-toggle):is(#sticker-size-toggle):is(:hover,:focus,:focus-visible,:active) {
    grid-column:1;
    grid-row:1;
    position:relative !important;
    inset:auto !important;
    translate:none !important;
    transform:none !important;
  }
  html body :is(#sticker-size-toggle):is(#sticker-size-toggle)[hidden] { display:none !important; }
  html body #sticker-size-toggle:focus-visible { outline:3px solid rgba(0,199,232,.55); outline-offset:2px; }
}
/* One balloon presentation for desktop and mobile. */
  /* The existing picker is portalled out of the zoomed preview while open.
     Its variables are measured from the actual button and visible viewport. */
  html body #sticker-size-picker.r08-size-popover {
    --r08-popover-bg:var(--card-bg,#151f31);
    --r08-popover-line:rgba(139,165,209,.48);
    --r08-popover-ink:var(--text,#e7edf7);
    --r08-popover-selected:rgba(100,139,235,.24);
    position:fixed !important;
    inset:auto !important;
    left:var(--r08-popover-x,8px) !important;
    top:var(--r08-popover-y,8px) !important;
    width:var(--r08-popover-width,240px) !important;
    max-width:calc(100vw - 16px) !important;
    min-width:0 !important;
    height:auto !important;
    min-height:0 !important;
    max-height:var(--r08-popover-max-height,360px) !important;
    box-sizing:border-box;
    display:flex;
    flex-direction:column;
    gap:8px;
    padding:12px;
    margin:0 !important;
    border:1px solid var(--r08-popover-line);
    border-radius:15px;
    background:var(--r08-popover-bg);
    color:var(--r08-popover-ink);
    box-shadow:0 8px 24px rgba(12,22,44,.24);
    direction:rtl;
    text-align:right;
    overflow:visible;
    z-index:2147483002;
    zoom:1;
    opacity:0;
    pointer-events:none;
    translate:none !important;
    transform:translate(var(--r08-popover-enter-x,0px),var(--r08-popover-enter-y,0px)) scale(.96) !important;
    transition:opacity 200ms ease,transform 200ms ease !important;
  }
  html body #sticker-size-picker.r08-size-popover.r08-popover-open {
    opacity:1;
    pointer-events:auto;
    transform:none !important;
  }
  #sticker-size-picker.r08-size-popover[data-side="right"] { --r08-popover-enter-x:-6px; transform-origin:left var(--r08-popover-arrow); }
  #sticker-size-picker.r08-size-popover[data-side="left"] { --r08-popover-enter-x:6px; transform-origin:right var(--r08-popover-arrow); }
  #sticker-size-picker.r08-size-popover[data-side="bottom"] { --r08-popover-enter-y:-6px; transform-origin:var(--r08-popover-arrow) top; }
  #sticker-size-picker.r08-size-popover[data-side="top"] { --r08-popover-enter-y:6px; transform-origin:var(--r08-popover-arrow) bottom; }
  #sticker-size-picker.r08-size-popover::before,
  #sticker-size-picker.r08-size-popover::after { content:""; position:absolute; width:0; height:0; border:solid transparent; pointer-events:none; }
  #sticker-size-picker.r08-size-popover::before { border-width:7px; }
  #sticker-size-picker.r08-size-popover::after { border-width:6px; }
  #sticker-size-picker.r08-size-popover[data-side="right"]::before { left:-14px; top:calc(var(--r08-popover-arrow) - 7px); border-right-color:var(--r08-popover-line); }
  #sticker-size-picker.r08-size-popover[data-side="right"]::after { left:-12px; top:calc(var(--r08-popover-arrow) - 6px); border-right-color:var(--r08-popover-bg); }
  #sticker-size-picker.r08-size-popover[data-side="left"]::before { right:-14px; top:calc(var(--r08-popover-arrow) - 7px); border-left-color:var(--r08-popover-line); }
  #sticker-size-picker.r08-size-popover[data-side="left"]::after { right:-12px; top:calc(var(--r08-popover-arrow) - 6px); border-left-color:var(--r08-popover-bg); }
  #sticker-size-picker.r08-size-popover[data-side="bottom"]::before { top:-14px; left:calc(var(--r08-popover-arrow) - 7px); border-bottom-color:var(--r08-popover-line); }
  #sticker-size-picker.r08-size-popover[data-side="bottom"]::after { top:-12px; left:calc(var(--r08-popover-arrow) - 6px); border-bottom-color:var(--r08-popover-bg); }
  #sticker-size-picker.r08-size-popover[data-side="top"]::before { bottom:-14px; left:calc(var(--r08-popover-arrow) - 7px); border-top-color:var(--r08-popover-line); }
  #sticker-size-picker.r08-size-popover[data-side="top"]::after { bottom:-12px; left:calc(var(--r08-popover-arrow) - 6px); border-top-color:var(--r08-popover-bg); }
  html body #sticker-size-picker.r08-size-popover .sticker-size-select-trigger,
  html body #sticker-size-picker.r08-size-popover #sticker-size-readout { display:none !important; }
  html body #sticker-size-picker.r08-size-popover .sticker-size-dropdown { min-height:0; }
  html body #sticker-size-picker.r08-size-popover .sticker-size-options-menu {
    position:static !important;
    inset:auto !important;
    transform:none !important;
    width:100% !important;
    min-width:0 !important;
    max-width:100% !important;
    max-height:max(44px,calc(var(--r08-popover-max-height,360px) - 56px)) !important;
    overflow-y:auto;
    overscroll-behavior:contain;
    padding:0;
    margin:0;
    border:0;
    box-shadow:none;
    background:transparent;
  }
  html body #sticker-size-picker.r08-size-popover .case-city-option {
    min-height:44px;
    width:100%;
    padding:10px;
    font-size:14px;
    line-height:1.4;
    white-space:normal;
    color:var(--r08-popover-ink);
    touch-action:manipulation;
  }
  html body #sticker-size-picker.r08-size-popover .case-city-option[aria-selected="true"] { background:var(--r08-popover-selected) !important; border-color:var(--r08-popover-line) !important; font-weight:800 !important; }
  html[data-theme="light"] body #sticker-size-picker.r08-size-popover,
  body[data-theme="light"] #sticker-size-picker.r08-size-popover {
    --r08-popover-bg:var(--cs-light-surface,#fff);
    --r08-popover-line:var(--cs-light-border,#bac9e1);
    --r08-popover-ink:var(--cs-light-ink,#243650);
    --r08-popover-selected:var(--cs-light-surface-tint,#eef0fb);
    box-shadow:0 8px 22px rgba(46,64,98,.17);
  }
@media (hover:hover) and (pointer:fine) {
  html body #sticker-size-picker.r08-size-popover .case-city-option:hover {
    background:var(--r08-popover-selected) !important;
    border-color:var(--r08-popover-line) !important;
  }
}
html body #sticker-size-picker.r08-size-popover .case-city-option:active { filter:brightness(.95); }
@media (max-width:700px) {
  /* Lift the heading and the complete control rail together by one centimetre. */
  html body main.main-layout > section.preview-section > .preview-stage > .case-nav {
    position:relative !important;
    top:-1cm !important;
  }
}
@media (prefers-reduced-motion:reduce) {
  html body #sticker-size-picker.r08-size-popover { transition:none !important; }
}

/* R02: keep the existing mobile behavior (no add button at the eight-layer limit). */
#sticker-layer-controls > #add-sticker-layer.sticker-layer-limit {
  display:none !important;
}

/* V380-R02 — desktop's five-column preview (above the existing 850px
   compact breakpoint). Keep the established desktop scaler unchanged. */
@media (min-width:851px) {
  /* Preserve the 99x30 price pill and its placement; reset only the imported
     offsets and oversized dot that displaced its contents. */
  html body #preview-sticker-price-card {
    box-sizing:border-box !important;
    display:flex !important;
    flex-direction:row !important;
    align-items:center !important;
    justify-content:center !important;
    gap:7px !important;
    padding:5px 8px !important;
  }
  html body #preview-sticker-price-card > #preview-sticker-price {
    position:static !important;
    flex:0 1 auto !important;
    min-width:0 !important;
    width:auto !important;
    margin:0 !important;
    padding:0 !important;
    translate:none !important;
    transform:none !important;
    line-height:1 !important;
  }
  html body #preview-sticker-price-card > .preview-tier-row {
    position:static !important;
    display:flex !important;
    align-items:center !important;
    justify-content:center !important;
    flex:0 0 12px !important;
    box-sizing:border-box !important;
    width:12px !important;
    min-width:12px !important;
    height:12px !important;
    margin:0 !important;
    padding:0 !important;
    translate:none !important;
    transform:none !important;
    z-index:auto !important;
  }
  html body #preview-sticker-price-card #preview-sticker-tier-dot {
    position:static !important;
    box-sizing:border-box !important;
    flex:0 0 10px !important;
    width:10px !important;
    min-width:10px !important;
    height:10px !important;
    margin:0 !important;
    translate:none !important;
    transform:none !important;
    z-index:auto !important;
  }

  /* Keep the 46px arrow track in its stage column. Anchor a compact layer
     column on its inner edge, in the gap before the centered phone artwork.
     Nine 28px controls, eight 8px gaps and badge padding need only 328px
     of the existing 510px stage; no scrolling or stage-height change. */
  html body main.main-layout > section.preview-section > .preview-stage > .sticker-nav {
    position:relative !important;
    grid-column:2 !important;
    display:grid !important;
    grid-template-columns:46px !important;
    grid-template-rows:repeat(4,auto) !important;
    row-gap:7px !important;
    justify-self:center !important;
    box-sizing:border-box !important;
    width:46px !important;
    min-width:46px !important;
    max-width:46px !important;
    padding:4px 0 !important;
  }
  html body .preview-stage > .sticker-nav > :is(.nav-category-filter,.nav-arrow,.side-catalog-button) {
    grid-column:1 !important;
  }
  html body .preview-stage > .sticker-nav > #sticker-layer-controls {
    position:absolute !important;
    inset-inline-start:calc(100% + 8px) !important;
    inset-inline-end:auto !important;
    top:50% !important;
    bottom:auto !important;
    transform:translateY(-50%) !important;
    display:flex !important;
    flex-direction:column !important;
    flex-wrap:nowrap !important;
    direction:inherit !important;
    align-items:center !important;
    justify-content:flex-start !important;
    align-self:center !important;
    box-sizing:border-box !important;
    width:38px !important;
    min-width:38px !important;
    max-width:38px !important;
    height:max-content !important;
    max-height:none !important;
    overflow:visible !important;
    gap:8px !important;
    padding:6px 5px !important;
    margin:0 !important;
  }
  html body #sticker-layer-controls > .sticker-layer-item {
    position:relative !important;
    display:block !important;
    overflow:visible !important;
    box-sizing:border-box !important;
    flex:0 0 28px !important;
    width:28px !important;
    min-width:0 !important;
    max-width:28px !important;
    height:28px !important;
    margin:0 !important;
  }
  html body #sticker-layer-controls .sticker-layer-number,
  html body #sticker-layer-controls > #add-sticker-layer {
    box-sizing:border-box !important;
    display:grid !important;
    place-items:center !important;
    width:100% !important;
    min-width:0 !important;
    max-width:100% !important;
    height:28px !important;
    min-height:28px !important;
    max-height:28px !important;
    padding:0 !important;
    margin:0 !important;
    border-radius:8px !important;
    font-size:12px !important;
    line-height:1 !important;
  }
  html body #sticker-layer-controls > #add-sticker-layer {
    flex:0 0 28px !important;
    width:28px !important;
    max-width:28px !important;
  }
  html body #sticker-layer-controls > #add-sticker-layer.sticker-layer-limit { display:grid !important; }
  html body #sticker-layer-controls .sticker-layer-remove {
    position:absolute !important;
    top:-5px !important;
    right:-5px !important;
    bottom:auto !important;
    left:auto !important;
    box-sizing:border-box !important;
    width:14px !important;
    min-width:14px !important;
    max-width:14px !important;
    height:14px !important;
    min-height:14px !important;
    max-height:14px !important;
    margin:0 !important;
    padding:0 !important;
    font-size:11px !important;
  }
  html body #sticker-layer-controls :is(.sticker-layer-number,.sticker-layer-remove,#add-sticker-layer) {
    transform:none !important;
    translate:none !important;
    scale:none !important;
    outline-offset:-2px !important;
    transition:background .16s,border-color .16s,box-shadow .16s !important;
  }
  html body #sticker-layer-controls > #add-sticker-layer .layer-plus-icon,
  html body #sticker-layer-controls > #add-sticker-layer .layer-plus-icon svg {
    display:block !important;
    width:14px !important;
    max-width:100% !important;
    height:14px !important;
    margin:0 !important;
  }
  html body #sticker-layer-controls > #add-sticker-layer .layer-plus-icon svg path {
    fill:none !important;
    stroke:currentColor !important;
    stroke-width:2.6 !important;
    stroke-linecap:round !important;
  }
  html body #sticker-layer-controls > #add-sticker-layer .layer-plus-cap { display:none !important; }
}

/* V380-R03 — storefront typography only, shared by both themes and viewports. */
html body .purchase-location-container-v355 .purchase-location-field-v355 > label {
  font-size:18px !important;
  line-height:1.25 !important;
  white-space:normal !important;
}
html body .purchase-location-container-v355 :is(#buyer-city,#buyer-point-of-sale),
html body .purchase-location-container-v355 .purchase-location-field-v355 > .case-city-select-trigger,
html body .purchase-location-container-v355 .case-city-select-label {
  font-size:14px !important;
  line-height:1.25 !important;
}
html body .purchase-location-container-v355 .case-city-select-label {
  min-width:0 !important;
  white-space:normal !important;
  overflow-wrap:anywhere !important;
}
html body .purchase-location-container-v355 .purchase-location-field-v355 > .case-city-select-trigger {
  height:auto !important;
}
html body main.main-layout > section.preview-section > .purchase-type .purchase-options > button.purchase-option > strong {
  font-size:17px !important;
  line-height:1.25 !important;
  min-width:0 !important;
  white-space:normal !important;
  overflow-wrap:anywhere !important;
  text-align:center !important;
}
html body :is(#random-combo-button):is(#random-combo-button) {
  font-size:18px !important;
  line-height:1.25 !important;
  white-space:normal !important;
  padding-block:6px !important;
}
html body main.main-layout > section.preview-section > #order-button {
  font-size:18px !important;
  line-height:1.25 !important;
  white-space:normal !important;
}
html body main.main-layout > section.preview-section > .selected-info .selected-row > span,
html body main.main-layout > section.preview-section > .quantity-section > span,
html body main.main-layout > section.preview-section > .quantity-section .quantity-control > button,
html body #order-modal :is(.modal-subtitle,form label,form input,form select,form option,form textarea,form button,.order-preview-summary span) {
  font-weight:700 !important;
}
html body main.main-layout > section.preview-section > .selected-info .selected-row strong,
html body main.main-layout > section.preview-section > .selected-info .selected-row strong span,
html body main.main-layout > section.preview-section > .quantity-section #quantity-value,
html body #order-modal :is(h2,.order-preview-summary strong) {
  font-weight:800 !important;
}
@media (max-width:700px) {
  /* A 17px label may need two lines in the existing three-column layout.
     Let only this row grow to its content instead of clipping at 29px. */
  html body main.main-layout > section.preview-section > .purchase-type > .purchase-options {
    height:auto !important;
    min-height:29px !important;
    max-height:none !important;
    align-items:stretch !important;
  }
  html body main.main-layout > section.preview-section > .purchase-type .purchase-options > button.purchase-option,
  html body main.main-layout > section.preview-section > .purchase-type .purchase-options > button.purchase-option:is(:hover,:active,:focus,:focus-visible,.active) {
    height:auto !important;
    min-height:29px !important;
    max-height:none !important;
  }
  html body main.main-layout > section.preview-section > .dice-area :is(#random-combo-button):is(#random-combo-button) {
    height:auto !important;
    min-height:42px !important;
    max-height:none !important;
  }
}

/* R03 review: the desktop summary must grow with bold or wrapped content.
   Keep its existing padding, row spacing and total-row decoration. */
@media (min-width:851px) {
  html body main.main-layout > section.preview-section:nth-of-type(2) > div.selected-info:nth-of-type(9) {
    height:auto !important;
    min-height:0 !important;
    max-height:none !important;
  }
  html body main.main-layout > section.preview-section:nth-of-type(2) > div.selected-info:nth-of-type(9) > div.selected-row.total-row:nth-of-type(6) {
    box-sizing:border-box !important;
    width:auto !important;
    max-width:100% !important;
    translate:none !important;
    transform:none !important;
  }
}

/* V380-R04: reuse the catalog pictogram palette within the existing buttons. */
html body .purchase-options > .purchase-option > .purchase-mode-icon {
  display:block;
  flex:0 0 20px;
  width:20px;
  height:20px;
  align-self:center;
  pointer-events:none;
}
html body .purchase-mode-icon > svg {
  display:block;
  width:100%;
  height:100%;
}
/* Earlier responsive profiles mark transforms important; keep the same
   stationary geometry on desktop and touch, without changing button metrics. */
html body main.main-layout > section.preview-section > .purchase-type .purchase-options > button.purchase-option,
html body main.main-layout > section.preview-section > .purchase-type .purchase-options > button.purchase-option:is(:hover,:active,:focus,:focus-visible,.active) {
  transform:none !important;
  translate:none !important;
  scale:1 !important;
  transition-property:color,background-color,border-color,box-shadow !important;
}

/* Filter materials inherit the established indigo theme. The IDs restrict
   these overrides to the two preview filters, including their popup options. */
:is(#sticker-nav-filter,#case-nav-filter) {
  --r04-chip-surface:rgba(255,255,255,.06);
  --r04-menu-surface:#151c30;
  --r04-menu-shadow:0 8px 18px rgba(10,17,37,.24);
  --r04-filter-knob:#62edd8;
  --r04-filter-track:#f4fbff;
  --r04-filter-accent:#ffd166;
}
html[data-theme="light"] :is(#sticker-nav-filter,#case-nav-filter),
body[data-theme="light"] :is(#sticker-nav-filter,#case-nav-filter) {
  --r04-chip-surface:var(--cs-light-surface-soft,#f8faff);
  --r04-menu-surface:var(--cs-light-surface,#fff);
  --r04-menu-shadow:0 8px 18px rgba(68,91,164,.14);
  --r04-filter-knob:#b8f1e8;
  --r04-filter-track:#254776;
  --r04-filter-accent:#d4b7ff;
}
/* Important is needed to replace V377's important hover/touch transforms
   and the earlier theme overrides. All interaction states share their geometry. */
html body :is(#sticker-nav-filter,#case-nav-filter) :is(.nav-filter-trigger,.nav-filter-chip),
html body :is(#sticker-nav-filter,#case-nav-filter) :is(.nav-filter-trigger,.nav-filter-chip):is(:hover,:active,:focus,:focus-visible,.active,.cs377-press) {
  transform:none !important;
  translate:none !important;
  scale:1 !important;
  color:var(--cs377-ink) !important;
  transition:background .16s ease,border-color .16s ease,box-shadow .16s ease,filter .16s ease !important;
}
html body :is(#sticker-nav-filter,#case-nav-filter) > .nav-filter-trigger {
  position:relative;
  /* Use the existing rail height as the circle diameter. The row height and
     arrow positions stay intact; desktop width reduces from 46px to 43px. */
  width:var(--cs377-filter-height) !important;
  min-width:var(--cs377-filter-height) !important;
  max-width:var(--cs377-filter-height) !important;
  height:var(--cs377-filter-height) !important;
  min-height:var(--cs377-filter-height) !important;
  max-height:var(--cs377-filter-height) !important;
  border-radius:50% !important;
  margin-inline:auto !important;
  display:grid !important;
  place-items:center !important;
  padding:6px !important;
  background:var(--cs377-catalog) !important;
  border-color:var(--cs377-stroke) !important;
  box-shadow:0 2px 5px rgba(24,28,77,.16),inset 0 1px 0 rgba(255,255,255,.28) !important;
}
/* Centered sliders remain independent of the existing tier-color badge. */
html body :is(#sticker-nav-filter,#case-nav-filter) .nav-filter-sliders-icon {
  display:block;
  width:24px;
  height:24px;
  max-width:100%;
  max-height:100%;
  pointer-events:none;
}
html body :is(#sticker-nav-filter,#case-nav-filter) .filter-slider-tracks {
  fill:none;
  stroke:var(--r04-filter-track);
  stroke-width:1.8;
  stroke-linecap:round;
}
html body :is(#sticker-nav-filter,#case-nav-filter) .filter-slider-knob {
  fill:var(--r04-filter-knob);
  stroke:var(--r04-filter-track);
  stroke-width:1.5;
}
html body :is(#sticker-nav-filter,#case-nav-filter) .filter-slider-accent {
  fill:var(--r04-filter-accent);
}
html body :is(#sticker-nav-filter,#case-nav-filter) > .nav-filter-trigger > .nav-filter-selected-dot {
  position:absolute;
  right:5px;
  bottom:6px;
  width:8px !important;
  height:8px !important;
  border:1px solid var(--cs377-ink);
  box-shadow:0 0 0 1px rgba(24,28,77,.18) !important;
  pointer-events:none;
}
html body :is(#sticker-nav-filter,#case-nav-filter) > .nav-filter-menu {
  background:var(--r04-menu-surface) !important;
  border-color:var(--cs377-stroke) !important;
  box-shadow:var(--r04-menu-shadow) !important;
}
html body :is(#sticker-nav-filter,#case-nav-filter) .nav-filter-chip {
  border-radius:12px !important;
  padding:5px;
  font-size:12px;
  line-height:1.1;
  background:var(--r04-chip-surface) !important;
  border-color:var(--cs377-stroke) !important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.08) !important;
  touch-action:manipulation;
}
html body :is(#sticker-nav-filter,#case-nav-filter) .nav-filter-all-dot {
  font-size:9px;
  font-weight:800;
  line-height:1;
}
html body :is(#sticker-nav-filter,#case-nav-filter) :is(.nav-filter-trigger,.nav-filter-chip):hover {
  border-color:var(--cs377-hover-stroke) !important;
  filter:brightness(1.04) !important;
}
html body :is(#sticker-nav-filter,#case-nav-filter) .nav-filter-chip:is(.active,[aria-pressed="true"]),
html body :is(#sticker-nav-filter,#case-nav-filter) > .nav-filter-trigger[aria-expanded="true"],
html body :is(#sticker-nav-filter,#case-nav-filter) > .nav-filter-trigger:has(.nav-filter-selected-dot:not(.all)) {
  background:var(--cs377-catalog) !important;
  border-color:var(--cs377-ink) !important;
  box-shadow:inset 0 0 0 1px var(--cs377-hover-stroke) !important;
}
html body :is(#sticker-nav-filter,#case-nav-filter) :is(.nav-filter-trigger,.nav-filter-chip):is(:active,.cs377-press) {
  box-shadow:inset 0 2px 5px rgba(24,28,77,.24) !important;
  filter:brightness(.94) !important;
}
html body :is(#sticker-nav-filter,#case-nav-filter) :is(.nav-filter-trigger,.nav-filter-chip):focus-visible {
  outline:2px solid var(--cs377-ink) !important;
  outline-offset:-3px !important;
}
html body :is(#sticker-nav-filter,#case-nav-filter) :is(.nav-filter-trigger,.nav-filter-chip):disabled {
  opacity:.46 !important;
  filter:saturate(.55) !important;
  box-shadow:none !important;
}

/* V380-R06: account pictograms keep the existing button and avatar dimensions. */
html body #account-button > .account-guest-avatar {
  color:#24366d;
  background:linear-gradient(145deg,#d8f8ff,#c9c7ff);
  box-shadow:inset 0 0 0 1px rgba(158,214,255,.7),0 0 8px rgba(129,155,255,.18);
}
html[data-theme="light"] body #account-button > .account-guest-avatar,
body[data-theme="light"] #account-button > .account-guest-avatar {
  color:#343d8b;
  background:linear-gradient(145deg,#f0fbff,#dedcff);
  box-shadow:inset 0 0 0 1px #9ca9e5;
}
html body #account-button > .account-guest-avatar > svg {
  display:block;
  width:23px;
  height:23px;
  fill:none;
  stroke:currentColor;
  stroke-width:1.8;
  stroke-linecap:round;
  stroke-linejoin:round;
  pointer-events:none;
}
html body #account-modal #account-logout-button > .account-logout-icon {
  display:block;
  flex:0 0 20px;
  width:20px;
  height:20px;
  fill:none;
  stroke:currentColor;
  stroke-width:1.8;
  stroke-linecap:round;
  stroke-linejoin:round;
  pointer-events:none;
}
html body #account-button.is-guest,
html body #account-button.is-guest:is(:hover,:active,:focus,:focus-visible),
html body #account-modal #account-logout-button,
html body #account-modal #account-logout-button:is(:hover,:active,:focus,:focus-visible) {
  transform:none;
  translate:none;
  scale:1;
  transition:background-color .16s ease,border-color .16s ease,box-shadow .16s ease,filter .16s ease;
}
html body #account-button.is-guest:focus-visible,
html body #account-modal #account-logout-button:focus-visible {
  outline:2px solid var(--cs377-ink,#b6c5ff);
  outline-offset:2px;
}
html body #account-button.is-guest:active { filter:brightness(.94); }
html body #account-modal #account-logout-button:active { filter:brightness(.94); }