/* Shared control finishing. Load after the page styles on every storefront page. */
:root{--control-claret:#60212c;--control-claret-dark:#481821;--control-rule:#cfbbb9;--control-surface:#fffdfa;--control-tint:#f2e8e6;--control-ease:cubic-bezier(.2,.7,.2,1)}

/* A quiet, compact SVG family. Navigation chevrons follow the reading direction;
   expand, playback and external-link symbols keep their spatial meaning. */
.ui-icon{width:20px;height:20px;stroke-width:1.65;flex-shrink:0}
:is(.button,.text-link,.header-order,.process-step-link) .ui-icon{width:17px;height:17px}
.ui-icon.forward,.ui-icon.chevron{rotate:0deg;transform:none;transition:translate 160ms var(--control-ease)}
html[dir=rtl] .ui-icon.forward,html[dir=rtl] .ui-icon.chevron{rotate:180deg}
.button:hover .ui-icon.forward,.text-link:hover .ui-icon.chevron,html[dir=rtl] .button:hover .ui-icon.forward,html[dir=rtl] .text-link:hover .ui-icon.chevron{transform:none}

/* The words carry the primary action. Keep icons where they explain playback,
   secondary navigation or a specific utility rather than repeat decoration. */
.button.primary>.button-icon,.button.primary>.ui-icon.forward,
.button.light>.button-icon,.button.light>.ui-icon.forward,
.header-order>.button-icon,.mobile-dock>button>.ui-icon.forward,
.mobile-dock>button>[data-icon=forward],.action.action-dark>svg{display:none}

.button,.action,.header-order{
  min-height:52px;border-radius:10px;padding:13px 23px;gap:12px;
  font-weight:500;font-size:14px;line-height:1.5;text-align:center;
  box-shadow:none;transition:background-color 180ms var(--control-ease),border-color 180ms var(--control-ease),color 180ms var(--control-ease),box-shadow 180ms var(--control-ease),transform 120ms var(--control-ease);
}
.button.primary,.action.action-dark{background:var(--theme-brand,var(--control-claret));border-color:var(--control-claret);color:var(--theme-on-brand,#fffdfa);box-shadow:0 2px 3px var(--theme-shadow-a08,#38101808)}
.button.outline{background:transparent;border-color:var(--control-rule);color:var(--control-claret)}
.button.light{border-color:var(--theme-control,#fffdfa);background:var(--theme-surface,#fffdfa);color:var(--control-claret)}
.header-order{min-height:46px;border-color:var(--control-rule);padding:10px 18px;gap:0;font-size:12px;color:var(--control-claret);background:transparent}
.action.action-dark{height:auto;justify-content:center}
.full-plan.signature .action{background:var(--theme-surface,#fffdfa);color:var(--control-claret);border-color:var(--theme-control,#fffdfa)}
.button:active,.action:active,.header-order:active{transform:translateY(1px);box-shadow:none}

.text-link,.compare-link,.process-step-link{min-height:44px;gap:9px;line-height:1.5;font-weight:500}
.text-link .ui-icon,.process-step-link .ui-icon{width:16px;height:16px}
.text-link{padding-block:10px;border-bottom-color:var(--control-rule)}
.compare-link svg{width:16px;height:16px}
.process-step-link{text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:5px;text-decoration-color:#bd9399}

/* All utility controls are stable, obvious 44px targets, including the four-corner
   expand action. No target moves while hovered or becomes an ornamental arrow. */
.icon-button,.hero-enlarge,.work-expand,.language-switch,.menu-toggle,.search-field button{
  min-width:44px;min-height:44px;border-radius:9px;
  transition:background-color 160ms var(--control-ease),border-color 160ms var(--control-ease),color 160ms var(--control-ease),box-shadow 160ms var(--control-ease);
}
.icon-button,.language-switch{background:var(--control-surface);border:1px solid var(--theme-control,#ded2ce);color:var(--control-claret)}
.icon-button svg,.hero-enlarge .ui-icon,.work-expand .ui-icon{width:18px;height:18px;stroke-width:1.7}
.hero-phone-controls{gap:6px}
.hero-enlarge{display:inline-flex;width:auto;min-width:44px;align-items:center;justify-content:center;gap:7px;padding:0 12px;margin-inline-start:4px;border:1px solid var(--theme-rule,#c9b3ad);background:var(--theme-surface-ae6,#fffdfae6);color:var(--control-claret);font-size:11px;line-height:1.4;white-space:nowrap;flex:none}
.hero-enlarge>span:not([data-icon]){font-weight:500}
.work-grid .work-card .work-expand,.work-page .work-grid .work-card .work-expand{top:10px;right:10px;left:auto;background:var(--theme-surface-ae6,#fffdfae6);border:1px solid var(--theme-rule-ac7,#fffdfac7);color:var(--control-claret);box-shadow:0 1px 3px var(--theme-shadow-a08,#30182008)}
.hero-work-dot{min-width:44px;min-height:44px;border-radius:8px;border:1px solid transparent}
.hero-work-dot.selected{border-color:var(--theme-control,#b59690);background:var(--theme-surface,#fffdfa)}
.hero-work-dot[aria-pressed=true]{box-shadow:inset 0 0 0 1px var(--theme-shadow-a33,#b5969033)}
.live-toolbar button{min-width:44px;min-height:44px;border-radius:6px;padding-inline:8px;gap:6px}
.live-toolbar button .ui-icon{width:14px;height:14px}

/* Keep gallery labels legible; older page-specific rules shrank some controls to
   8px. The grid supplies the space, while each action keeps an intentional size. */
.collection .work-grid .work-card .work-actions .button,
.work-page .work-grid .work-card .work-actions .button{
  min-height:48px;min-width:0;border-radius:9px;padding:11px 13px;gap:9px;
  font-size:12px;font-weight:500;line-height:1.5;white-space:normal;
}
html[lang=en] .collection .work-grid .work-card .work-actions .button,
html[lang=en] .work-page .work-grid .work-card .work-actions .button{font-size:12px}
.work-grid .work-card .work-actions .button .ui-icon{width:16px;height:16px}
.work-grid .work-card .work-actions .button.primary .ui-icon.play{width:15px;height:15px;fill:currentColor;stroke:none}
.price-card .button{min-height:52px;border-radius:10px;gap:10px;padding:13px 18px;font-size:13px}
.price-card.featured .button{background:var(--theme-surface,#fffdfa);border-color:var(--theme-control,#fffdfa);color:var(--control-claret)}
.pricing-compare .button,.collection-bottom .button{gap:10px;min-height:52px}

.filter{min-height:44px;padding:10px 15px;border-radius:8px;border:1px solid transparent;line-height:1.5;transition:background-color 160ms var(--control-ease),border-color 160ms var(--control-ease),color 160ms var(--control-ease)}
.filter[aria-pressed=true]{background:var(--control-tint);color:var(--control-claret);border-color:var(--theme-control,#d8bdbd)}
.language-toggle{min-width:44px;min-height:44px}
.mobile-dock>a,.mobile-dock>button{border-radius:9px;min-height:48px;gap:10px;font-size:12px;font-weight:500}
.preview-controls button,.preview-controls a{min-height:44px;line-height:1.6;text-decoration-thickness:1px;text-decoration-color:#b38b91}
.preview-details .preview-controls{align-items:center;justify-content:center}
.preview-controls .preview-restart{display:inline-grid;place-items:center;width:44px;height:44px;min-height:44px;padding:0;flex:none;text-decoration:none;line-height:1}
.preview-restart [data-icon]{display:flex}
.preview-restart .ui-icon{width:18px;height:18px}
.completion-actions button{border-radius:8px;min-height:46px}
.order-bottom .button{min-height:50px;gap:10px}

/* Dual-ring focus stays visible on claret, ivory, and the work images. */
:is(.button,.action,.header-order,.icon-button,.hero-enlarge,.work-expand,.language-switch,.menu-toggle,.hero-work-dot,.filter,.process-step-link,.text-link,.compare-link,.language-toggle):focus-visible{outline:2px solid var(--control-claret);outline-offset:4px;box-shadow:0 0 0 3px var(--theme-shadow,#fffdfa)}
.closing .button:focus-visible,.price-card.featured .button:focus-visible,.full-plan.signature .action:focus-visible{outline-color:var(--theme-control,#fffdfa);box-shadow:0 0 0 3px var(--control-claret)}
:is(.button,.action,.header-order):disabled,:is(.button,.action,.header-order)[aria-disabled=true]{opacity:.5;cursor:default;transform:none;box-shadow:none}

@media(hover:hover) and (pointer:fine){
  .button.primary:hover,.action.action-dark:hover{background:var(--theme-brand-hover,var(--control-claret-dark));border-color:var(--control-claret-dark);box-shadow:0 3px 8px var(--theme-shadow-a14,#38101814);transform:none}
  .button.outline:hover,.header-order:hover{background:var(--control-tint);border-color:var(--theme-control,#ad7e84);color:var(--control-claret);transform:none}
  .button.light:hover,.price-card.featured .button:hover,.full-plan.signature .action:hover{background:var(--theme-raised,#f2e5e1);color:var(--control-claret);transform:none}
  :is(.icon-button,.hero-enlarge,.work-expand,.language-switch,.menu-toggle,.search-field button):hover{background:var(--theme-raised,#f5eeeb);border-color:var(--theme-control,#b58f8f);box-shadow:0 1px 4px var(--theme-shadow-a0a,#3018200a)}
  .hero-work-dot:hover{background:var(--theme-surface,#fffdfa);border-color:var(--theme-rule,#cbb1aa)}
  .filter:hover{background:var(--theme-raised,#f5ece9);border-color:var(--theme-control,#e2ceca)}
  .filter[aria-pressed=true]:hover{background:var(--theme-raised,#eddfdc);border-color:var(--theme-control,#cfa9ad)}
  .live-toolbar button:hover{background:var(--theme-raised,#f0e1de)}
  .text-link:hover .ui-icon.chevron,.text-link:hover .ui-icon.forward,.process-step-link:hover .ui-icon.forward,.button.outline:hover .ui-icon.forward{translate:2px 0}
  html[dir=rtl] :is(.text-link,.process-step-link,.button.outline):hover .ui-icon:is(.chevron,.forward){translate:-2px 0}
}
@media(max-width:760px){
  .button,.action{min-height:52px;border-radius:10px;padding:13px 20px;font-size:13px}
  .hero-actions .button{min-height:53px;font-size:13px;gap:10px}
  html[lang=en] .hero-actions .button{font-size:13px}
  .hero-phone-controls{gap:6px}
  .hero-work-dot{width:44px;padding:5px;justify-content:center}
  .hero-work-dot .hero-work-name{display:none}
  .hero-work-dot>img{width:22px;height:30px}
  .hero-enlarge{margin-inline-start:6px;min-height:44px;padding:0 11px;font-size:11px}
  .collection .work-grid .work-card .work-actions .button,
  .work-page .work-grid .work-card .work-actions .button{padding:11px 12px;font-size:12px;min-height:49px;gap:8px}
  .pricing-compare .button{font-size:12px;padding-inline:16px;gap:8px}
  .collection-bottom .button{width:100%;max-width:340px;padding:13px 18px;font-size:13px}
}
@media(max-width:360px){
  .collection .work-grid .work-card .work-actions .button,
  .work-page .work-grid .work-card .work-actions .button,
  html[lang=en] .collection .work-grid .work-card .work-actions .button,
  html[lang=en] .work-page .work-grid .work-card .work-actions .button{font-size:11px;padding-inline:10px}
  .hero-phone-controls{gap:4px}
  .hero-enlarge{margin-inline-start:3px;padding-inline:9px;font-size:10px}
}
@media(prefers-reduced-motion:reduce){
  :is(.button,.action,.header-order,.icon-button,.hero-enlarge,.work-expand,.language-switch,.menu-toggle,.hero-work-dot,.filter,.ui-icon){transition:none}
  .button:active,.action:active,.header-order:active{transform:none}
  :is(.text-link,.process-step-link,.button.outline):hover .ui-icon:is(.chevron,.forward){translate:none}
}
.button:is(.primary,.light)>[data-icon=forward]{display:none}

/* Project editions remain one work: switch the known experience, not its price. */
.preview-editions[hidden]{display:none!important}
.preview-editions,.order-editions{display:flex;flex-wrap:wrap;gap:7px;min-width:0}
.preview-editions{margin:18px 0 15px;justify-content:center}
.edition-button{appearance:none;min-height:44px;min-width:44px;border:1px solid var(--theme-control,#d4bdbb);border-radius:8px;padding:10px 15px;background:var(--theme-surface,#fffdfa);color:var(--theme-accent,#60212c);font:500 12px/1.6 var(--font,var(--body,'Inter','IBM Plex Sans Arabic',sans-serif));cursor:pointer;text-align:center;white-space:normal;transition:background-color 160ms var(--control-ease),border-color 160ms var(--control-ease),color 160ms var(--control-ease)}
.edition-button[aria-pressed=true]{background:var(--theme-brand,#60212c);border-color:var(--theme-accent,#60212c);color:var(--theme-on-brand,#fffdfa)}
.edition-button:focus-visible{outline:2px solid var(--theme-accent,#60212c);outline-offset:4px;box-shadow:0 0 0 3px var(--theme-shadow,#fffdfa)}
.order-edition-selector{margin-block:18px 22px}
.order-edition-label{display:block;font-size:13px;line-height:1.7;margin-bottom:10px}
.order-editions .edition-button{flex:1 1 120px;max-width:240px}
.summary-edition{font-size:12px;line-height:1.7;color:var(--theme-accent,#60212c);margin:5px 0 8px}
.order-progress>span:not(.current):not(.done){color:var(--theme-muted,#785c60)}
.order-summary :is(.summary-package,.summary-small){color:var(--theme-muted,#6f5557)}
@media(hover:hover) and (pointer:fine){.edition-button:hover{background:var(--theme-raised,#f2e8e6);border-color:var(--theme-control,#ad7e84)}.edition-button[aria-pressed=true]:hover{background:var(--theme-brand,#481821);border-color:var(--theme-accent,#481821)}}
@media(max-width:760px){
  .preview-editions:not([hidden]){grid-row:2;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));margin:0;gap:7px}
  .preview-details:has(.preview-editions:not([hidden])) #choosePreview{grid-row:3}
  .preview-details:has(.preview-editions:not([hidden])) .preview-controls{grid-row:4}
  .preview-details:has(.preview-editions:not([hidden])) .preview-disclaimer{grid-row:5}
  .edition-button{min-height:44px;padding:10px 12px;font-size:12px}
  .order-editions{gap:8px}
  .order-editions .edition-button{max-width:none}
  .summary-edition{font-size:12px;margin-block:4px 6px}
}
@media(prefers-reduced-motion:reduce){.edition-button{transition:none}}