/* Shared control finish. Native/custom select menus have their own stylesheet. */
body {
  --control-radius: 10px;
  --control-soft: color-mix(in srgb, var(--surface) 92%, var(--ink) 8%);
  --control-border: color-mix(in srgb, var(--line) 78%, var(--ink) 22%);
  --control-focus: var(--action, var(--ink));
  --control-shadow: 0 1px 2px #00000010;
}
body :is(.button, .buy-button) {
  border-radius: var(--control-radius);
  font-weight: 600;
  line-height: 1.4;
  letter-spacing: 0;
  gap: 10px;
  box-shadow: var(--control-shadow);
  transition: background-color .16s ease, border-color .16s ease, color .16s ease, box-shadow .16s ease, opacity .16s ease;
  text-decoration: none;
  touch-action: manipulation;
}
body .button.button { min-height: 46px; padding: 11px 18px; }
body .button:is(.dark, .accent, .primary) { min-height: 48px; }
body .button.small { min-height: 36px; padding: 7px 12px; font-size: 12px; }
body .buy-button { min-height: 40px; padding: 10px 14px; border-radius: var(--control-radius); }
.theme-boutique .buy-button { border: 1px solid var(--line); background: var(--surface); color: var(--ink); }
.theme-flow .flow-buy,
.product-page .product-description .product-actions .button { border-radius: var(--control-radius); }
body :is(.button, .buy-button):active:not(:disabled):not([aria-disabled="true"]) { box-shadow: inset 0 1px 2px #00000018; transform: none; }
body :is(.button, .buy-button):is(:disabled, [aria-disabled="true"]) { opacity: .45; cursor: not-allowed; box-shadow: none; filter: none; transform: none; }
body :is(.button, .buy-button, .icon-button, .cart-trigger, .filter-button, .flow-feed-controls button, .video-tools :is(button, a), .video-pager button, .layout-switch button, .section-move, .category-dropdown > summary):focus-visible {
  outline: 2px solid var(--control-focus);
  outline-offset: 3px;
}
body :is(.video-tools :is(button, a), .video-pager button):focus-visible { outline-color: white; }
body :is(.button, .buy-button)[aria-pressed="true"] { border-color: var(--control-focus); box-shadow: inset 0 0 0 1px var(--control-focus); }

/* Administration uses a neutral primary action and quieter secondary actions. */
.admin-page .admin-content :is(form > button, .form-actions > button, .actions > button):not([role="combobox"]):not(.icon-button) {
  min-height: 46px;
  padding: 11px 17px;
  border-radius: var(--control-radius);
  font-size: 13px;
  line-height: 1.4;
  font-weight: 600;
  gap: 9px;
  box-shadow: var(--control-shadow);
  transition: background-color .16s ease, border-color .16s ease, box-shadow .16s ease, opacity .16s ease;
}
.admin-page .admin-content .button.primary,
.admin-page .admin-content .form-actions > button[type="submit"]:not(.secondary):not(.danger):not([role="combobox"]) {
  color: var(--surface);
  background: var(--ink);
  border: 1px solid var(--ink);
}
.admin-page .admin-content :is(.button.secondary, .actions > button.secondary, .form-actions > button.secondary) {
  color: var(--ink);
  background: var(--surface);
  border: 1px solid var(--line);
}
.admin-page .admin-content :is(.button.danger, .actions > button.danger, .form-actions > button.danger) {
  color: #a32a3b;
  background: #fff8f9;
  border: 1px solid #eecbd1;
}
.admin-page .admin-content td .button,
.admin-page .media-card .actions .button,
.admin-page .upload-progress .button { min-height: 36px; padding: 7px 11px; font-size: 12px; white-space: normal; }
.admin-page .rich-toolbar button,
.admin-page [data-design-sections] .section-move {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 36px;
  min-height: 36px;
  padding: 7px 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface);
  color: var(--ink);
  line-height: 1.2;
}
.admin-page .rich-toolbar button[aria-pressed="true"] { color: var(--ink); background: var(--control-soft); border-color: var(--control-border); }
.admin-page .admin-content :is(form > button, .form-actions > button, .actions > button):not([role="combobox"]):focus-visible,
.admin-page .rich-toolbar button:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }
.admin-page .admin-content :is(form > button, .form-actions > button, .actions > button):not([role="combobox"]):disabled { opacity: .45; box-shadow: none; }

/* Icon surfaces stay quiet and preserve the video overlay geometry. */
body .icon-button { border: 1px solid transparent; border-radius: 10px; box-shadow: none; transition: background-color .16s ease, border-color .16s ease, color .16s ease; touch-action: manipulation; }
body .drawer-header .icon-button { border-radius: 50%; border-color: var(--line); background: transparent; }
body .flow-feed-controls button { border: 1px solid var(--line); background: var(--surface); color: var(--ink); box-shadow: var(--control-shadow); transition: background-color .16s ease, border-color .16s ease; touch-action: manipulation; }
body .video-tools :is(button, a) { border: 1px solid #ffffff24; background: #17171b80; box-shadow: 0 1px 3px #00000014; transition: background-color .16s ease, border-color .16s ease, color .16s ease; touch-action: manipulation; }
body .video-tools :is(button, a)[aria-pressed="true"] { color: var(--accent); background: #17171bb8; border-color: #ffffff42; }
body .video-pager { border: 1px solid #ffffff24; }
body .video-pager button { border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; touch-action: manipulation; }
body .layout-switch { padding: 3px; gap: 3px; border-radius: 11px; background: var(--surface); }
body .layout-switch button { min-width: 38px; min-height: 38px; padding: 6px 9px; border-radius: 8px; color: var(--muted); transition: background-color .16s ease, color .16s ease; }
body .layout-switch button[aria-pressed="true"],
body.view-single .layout-switch [data-layout="single"],
body.view-grid .layout-switch [data-layout="grid"] { color: var(--ink); background: var(--control-soft); }
body .quantity-stepper { border-radius: 9px; }
body .quantity-stepper button { transition: background-color .16s ease; touch-action: manipulation; }

/* Category navigation retains native details semantics and real links. */
body .category-dropdown { position: relative; min-width: 0; }
body .category-dropdown > summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  min-height: 46px;
  padding: 11px 15px;
  border: 1px solid var(--line);
  border-radius: var(--control-radius);
  background: var(--surface);
  color: var(--ink);
  font-size: 13px;
  line-height: 1.4;
  font-weight: 500;
  list-style: none;
  box-shadow: var(--control-shadow);
  touch-action: manipulation;
  transition: border-color .16s ease, background-color .16s ease;
}
body .category-dropdown > summary::marker { content: ""; }
body .category-dropdown > summary::-webkit-details-marker { display: none; }
body .category-dropdown > summary::after { content: ""; width: 7px; height: 7px; flex: 0 0 7px; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: translateY(-2px) rotate(45deg); opacity: .65; }
body .category-dropdown[open] > summary { border-color: var(--control-border); }
body .category-dropdown[open] > summary::after { transform: translateY(2px) rotate(225deg); }
body .category-dropdown .category-options { margin-top: 8px; padding: 8px; gap: 5px; background: var(--surface); border: 1px solid var(--line); border-radius: 12px; box-shadow: 0 5px 16px #00000012; }
body .category-dropdown .category-options .category-chip { display: inline-flex; align-items: center; min-height: 40px; padding: 9px 12px; border: 1px solid transparent; border-radius: 8px; background: transparent; color: var(--ink); font-size: 13px; font-weight: 400; line-height: 1.4; }
body .category-dropdown .category-options .category-chip:is(.active, [aria-current="page"]) { background: var(--control-soft); border-color: var(--line); font-weight: 600; }
body .category-dropdown .category-options .category-chip:focus-visible { outline: 2px solid var(--control-focus); outline-offset: 1px; }

@media (hover: hover) {
  body .button:not(.dark):not(.accent):not(.primary):not(.danger):not(:disabled):not([aria-disabled="true"]):hover { background: var(--control-soft); border-color: var(--control-border); color: var(--ink); box-shadow: 0 2px 5px #00000010; transform: none; }
  .admin-page .admin-content .button.secondary:not(:disabled):hover { background: var(--control-soft); color: var(--ink); border-color: var(--control-border); }
  .admin-page .admin-content .button.primary:not(:disabled):hover,
  .admin-page .admin-content .form-actions > button[type="submit"]:not(.secondary):not(.danger):not(:disabled):hover { background: color-mix(in srgb, var(--ink) 88%, var(--surface)); }
  .admin-page .admin-content .button.danger:not(:disabled):hover { background: #fceef0; border-color: #e1afb9; }
  body .icon-button:not(:disabled):hover,
  body .flow-feed-controls button:not(:disabled):hover,
  body .quantity-stepper button:not(:disabled):hover,
  body .layout-switch button:not(:disabled):hover { background: var(--control-soft); color: var(--ink); border-color: var(--control-border); }
  body .video-tools :is(button, a):not(:disabled):hover { background: #17171bb8; border-color: #ffffff50; }
  body .video-pager button:not(:disabled):hover { background: #ffffff1f; }
  body .category-dropdown > summary:hover { border-color: var(--control-border); background: var(--control-soft); }
  body .category-dropdown .category-options .category-chip:hover { background: var(--control-soft); text-decoration: none; }
  .admin-page .rich-toolbar button:not(:disabled):hover,
  .admin-page [data-design-sections] .section-move:not(:disabled):hover { background: var(--control-soft); border-color: var(--control-border); }
}
@media (min-width: 761px) {
  .theme-flow.store-page:is([data-columns="4"], [data-columns="5"]) .flow-main .buy-button { min-height: 36px; padding: 8px 11px; font-size: 11px; }
}
@media (max-width: 760px), (pointer: coarse) {
  body .button.small,
  body .buy-button,
  .admin-page .admin-content td .button,
  .admin-page .media-card .actions .button,
  .admin-page .upload-progress .button { min-height: 44px; }
  body .product-grid > .product-card .buy-button { border-radius: 10px !important; }
  body .site-header .icon-button,
  body .drawer-header .icon-button,
  .admin-page .admin-person .icon-button,
  body .flow-feed-controls button,
  body .layout-switch button { min-width: 44px; min-height: 44px; }
  body .product-media .video-tools :is(button, a),
  body .flow-main .video-tools :is(button, a),
  body .product-grid > .product-card .video-tools :is(button, a) { min-width: 44px; min-height: 44px; padding: 10px; }
  body .category-dropdown .category-options .category-chip { min-height: 44px; }
  .admin-page .rich-toolbar button,
  .admin-page [data-design-sections] .section-move { min-width: 44px; min-height: 44px; }
}
@media (prefers-reduced-motion: reduce) {
  body :is(.button, .buy-button, .icon-button, .flow-feed-controls button, .video-tools :is(button, a), .video-pager button, .layout-switch button, .category-dropdown > summary) { transition: none; }
}
/* Preference explanations stay with the cookie consent control. */
/* The cookie dialog can use a different palette from the storefront. Recompute
   derived colors here: values inherited from body have already been resolved. */
#cookie-dialog {
  --field: color-mix(in srgb, var(--surface) 92%, var(--ink) 8%);
  --control-soft: var(--field);
  --control-border: color-mix(in srgb, var(--line) 78%, var(--ink) 22%);
  --control-focus: var(--ink);
}
#cookie-dialog .button {
  background: var(--surface);
  border-color: var(--line);
  color: var(--ink);
  filter: none;
}
#cookie-dialog :is(.button, .icon-button):is(:hover, :active):not(:disabled) {
  background: var(--control-soft);
  border-color: var(--control-border);
  color: var(--ink);
  filter: none;
}
#cookie-dialog .button[data-consent="accept"],
#cookie-dialog .button[data-consent="accept"]:is(:hover, :active):not(:disabled) {
  border-color: #000;
}
#cookie-dialog :is(button, a, summary, input):focus-visible {
  outline: 2px solid var(--control-focus);
  outline-offset: 3px;
}
.cookie-dialog .cookie-preferences-help { display:block; margin-top:4px; color:var(--muted); font-size:12px; font-weight:400; line-height:1.5; }