/* Reuse the hero's approved desktop frame and the shop's primary action. */
@media(min-width:1280px){
 :root{--gshop-home-hero-layout-ready:1}
 [data-gshop-hero-rotation]{--gshop-hero-copy-left:172px}
 [data-gshop-hero-rotation] [data-hero-title],[data-gshop-hero-rotation] [data-hero-copy],[data-gshop-hero-rotation] [data-hero-primary]{left:var(--gshop-hero-copy-left)!important}
 [data-gshop-hero-rotation][data-hero-slide="1"] [data-hero-title]{width:594px!important}
 [data-gshop-hero-rotation][data-hero-slide="1"] h1{font-size:40px;line-height:52px;font-weight:600!important;white-space:pre;text-wrap:initial}
 [data-gshop-hero-rotation][data-hero-slide="1"] [data-hero-copy]{top:462px!important;width:560px!important;font-size:20px;line-height:26px}
 [data-gshop-hero-rotation][data-hero-slide="1"] [data-hero-primary]{top:561px!important;width:241px!important;height:56px}
 .gshop-hero-secondary{position:absolute;left:437px;top:561px;display:inline-flex;align-items:center;justify-content:center;height:56px;padding:0 32px;background:#1f2126;border-radius:8px;color:#fff;font:500 16px/1.3 Raleway,sans-serif;text-decoration:none}
 .gshop-hero-secondary[hidden]{display:none}
 .gshop-hero-secondary:hover{background:#282a30}
 .gshop-hero-secondary:focus-visible,.gshop-hero-rotation-controls button:focus-visible{outline:2px solid #77a1ff;outline-offset:4px}
 .gshop-hero-rotation-controls{position:absolute;left:var(--gshop-hero-copy-left);top:665px;display:flex;gap:4px;align-items:center}
 .gshop-hero-rotation-controls button{display:grid;place-items:center;width:40px;height:40px;padding:0;border:0;border-radius:8px;background:transparent;color:#fff;cursor:pointer}
 .gshop-hero-slide-select::after{content:"";width:8px;height:8px;border-radius:50%;background:#ffffff55}
 .gshop-hero-slide-select[aria-pressed="true"]::after{background:#fff}
 .gshop-hero-rotation-pause{font:500 14px/1 Raleway,sans-serif}
}

/* gshop playback control. Filled geometry approved from the supplied reference;
   no background or circular backing. Legacy slideshow/hero states are adapters. */
:root{
 --gshop-playback-play:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M8 5v14l11-7z'/%3E%3C/svg%3E");
 --gshop-playback-pause:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Crect x='6' y='5' width='4' height='14' rx='1'/%3E%3Crect x='14' y='5' width='4' height='14' rx='1'/%3E%3C/svg%3E");
}
html body :is(.gshop-playback-control,.shopds-slideshow-play,.gshop-hero-rotation-pause){
 display:inline-flex!important;align-items:center;justify-content:center;box-sizing:border-box;
 width:40px!important;height:40px!important;min-width:40px;flex:0 0 40px;padding:0!important;
 border:0!important;border-radius:var(--shop-radius-ui,8px)!important;
 background:transparent!important;box-shadow:none!important;color:#fff!important;
 font-size:0!important;line-height:0!important;cursor:pointer;
}
html body :is(.gshop-playback-control,.shopds-slideshow-play,.gshop-hero-rotation-pause)::before{
 content:"";display:block;width:20px;height:20px;background:currentColor;
 -webkit-mask:var(--gshop-playback-play) center/contain no-repeat;
 mask:var(--gshop-playback-play) center/contain no-repeat;
 transition:filter 140ms ease;
}
html body :is(.gshop-playback-control,.shopds-slideshow-play,.gshop-hero-rotation-pause)>svg{display:none!important}
/* Shared controls expose aria-pressed=true while playing. The already deployed
   hero used the inverse paused state; keep that surface working until rebuild. */
html body :is(.gshop-playback-control,.shopds-slideshow-play)[aria-pressed="true"]::before,
html body .gshop-hero-rotation-pause:not(.gshop-playback-control)[aria-pressed="false"]::before{
 -webkit-mask-image:var(--gshop-playback-pause);mask-image:var(--gshop-playback-pause);
}
html body :is(.gshop-playback-control,.shopds-slideshow-play,.gshop-hero-rotation-pause):hover::before{
 background:var(--brand-shop-gradient,linear-gradient(135deg,#c132ff,#77a1ff));
}
html body :is(.gshop-playback-control,.shopds-slideshow-play,.gshop-hero-rotation-pause):focus-visible{
 outline:2px solid var(--shop-control-focus,rgba(119,161,255,.55));outline-offset:3px;
}
html body .gshop-playback-control:disabled{opacity:.45;cursor:default}
@media(prefers-reduced-motion:reduce){html body :is(.gshop-playback-control,.shopds-slideshow-play,.gshop-hero-rotation-pause)::before{transition:none}}