/* all the dimensions of the search bar can be adjusted with these variables, yay! */
:root{
    --btn-w: 7.5rem; 
    --sb-height: 4.375rem;
    --sb-radius: 999px;
    --anim-time: .38s;
    --sb-transition: cubic-bezier(.48,-0.01,.26,1.01);
    --sb-top-percentage: 0.7;
; /* percentage of the hero section, from top*/
    /* where the bar sits in the hero, and how wide it is there */
    --sb-hero-width: clamp(40rem, 50%, 50rem);
    --sb-hero-top: calc(((100vh) - (var(--site-margin)*2) - 3rem) * var(--sb-top-percentage));

    /* what each layer of the bar positions itself with. At this level they
       are the hero values (#search-bar-border still uses them); inside the
       form, which is itself the bar's box, they become "fill and centre". */
    --sb-width: var(--sb-hero-width);
    --sb-top: var(--sb-hero-top);

    /* one fixed dropdown height for both panels — see the .dd-activated rule */
    --dd-row-h: 2.9375rem;   /* measured height of a .dd-option row */
    --dd-rows-visible: 3;
}

/* any depth: on desktop the bar now lives in the hero's headline column */
#hero-section form{
    z-index: 60;
    --curve: calc(var(--sb-height) / 2);
}

/* The desktop bar as one box, so it can be positioned as a unit. Its layers
   (bar, backdrop, dropdown, highlight pill) all centre on --sb-top and fill
   --sb-width, so inside here those simply become the box's middle and width. */
#search-bar-desktop{
    position: absolute;
    left: 50%;
    top: var(--sb-hero-top);
    transform: translate(-50%, -50%);
    width: var(--sb-hero-width);
    height: var(--sb-height);

    --sb-width: 100%;
    --sb-top: 50%;
}

#search-bar-container{
    position: absolute;
    z-index: 50;

    width: var(--sb-width);

    height: var(--sb-height);
    padding: 0.5rem 0 0.5rem 0;

    display: flex;
    justify-content: space-between;
    align-items: center;

    border-radius: var(--sb-radius);
    /* transition: border-radius .18s ease; */

    background-color: var(--bg-color);

    left:50%;
    top: var(--sb-top);
    transform: translateX(-50%) translateY(-50%);

    font-family: 'quicksand-bold';

    /* transition: border-radius 0.4s cubic-bezier(0.77,0,0.18,1); */
}

#search-bar-container.dd-activated{
    border-radius: var(--curve) var(--curve) 0 0;
    background-color: transparent;

    overflow: hidden;
}

#search-bar-active-backdrop{
    position: absolute;
    z-index: 30;

    display:flex;
    align-items: end;

    pointer-events: none;

    width: var(--sb-width);
    height: var(--sb-height);
    background-color: rgb(0 0 0 / 0.08);

    box-sizing: content-box;

    left:50%;
    top:var(--sb-top);
    transform: translateX(-50%) translateY(-50%);

    border-radius: var(--curve) var(--curve);
    /* transition: 
        opacity var(--anim-time) var(--sb-transition),
         */
    box-shadow: inset 0px -2px 20px 8px rgb(0 0 0 / 0.1);
    transition:
        border-radius var(--anim-time) var(--sb-transition),
        padding var(--anim-time) var(--sb-transition);
    opacity: 0;
}

body:has(#first-input-container.input-hover) #search-bar-active-backdrop{
    border-radius: var(--curve);
}

body:has(#search-bar-container.dd-activated) #search-bar-active-backdrop{
    border-radius: var(--curve) var(--curve) 0 0;
    opacity: 1;
}

body:has(#first-input-container.input-hover-2:hover) #search-bar-active-backdrop, 
body:has(#second-input-container.input-hover-2:hover) #search-bar-active-backdrop{ 
  background-color: rgb(0 0 0 / 0.18);
}

#search-bar-pill-container{
    position: absolute;
    z-index: 40;

    display:flex;
    align-items: end;

    pointer-events: none;

    width: var(--sb-width);
    /* 1px taller at the bottom, so the active pill reaches into the
       dropdown below (the same colour) instead of meeting it edge to edge,
       which at sub-pixel positions leaves a hairline seam. The translate
       keeps the top exactly where it was. */
    height: calc(var(--sb-height) + 1px);

    box-sizing: content-box;
    border-radius: var(--curve) var(--curve);

    left:50%;
    top:var(--sb-top);
    transform: translateX(-50%) translateY(calc(-50% + 0.5px));

    transition: 
        opacity var(--anim-time) var(--sb-transition),
        border-radius var(--anim-time) var(--sb-transition);

    overflow: hidden;
    opacity: 0;
}

#search-bar-pill-container.first-input-active, #search-bar-pill-container.second-input-active{
    opacity: 1;
    border-radius: var(--curve) var(--curve) 0 0;
}

#search-bar-pill-container div{
    position: relative;
    height:100%;
    width: 0;
    display: flex;
    align-items: end;
    
    transition: transform var(--anim-time) var(--sb-transition),
                width var(--anim-time) var(--sb-transition),
                opacity var(--anim-time) var(--sb-transition),
                background-size var(--anim-time) var(--sb-transition);
}

#search-bar-pill-container.first-click div{
    transition: none !important;
}

#search-bar-pill-container.first-input-active > div{
    width: calc(((100% - var(--btn-w) - 1rem) / 2) + 1rem + 2 * var(--curve));
    transform: translateX(calc(-1 * var(--curve) - 0.25rem));
}

#search-bar-pill-container.second-input-active > div{
    width: calc(100% - ((100% - var(--btn-w) - 1rem) / 2 + 1rem) + 2 * var(--curve) + 0.25rem);
    transform: translateX(calc(100% - 2 * var(--curve) - var(--btn-w) + 1rem - var(--curve) - 0.5rem));
}

#search-bar-pill-container div div:nth-child(1){
    z-index: 100;

    pointer-events: none;

    background-repeat: no-repeat;
    background-image:
        radial-gradient(circle at top left,  transparent calc(var(--curve)), var(--bg-color) calc(var(--curve)));

    background-position: left bottom;

    /* background-size: 0 0, 0 0, 0 0; */
    
    width: var(--curve);
    height: var(--curve);

    opacity: 1;
    background-size: var(--curve) var(--curve);
}

#search-bar-pill-container div div:nth-child(2){
    flex: 1;
    /* tucked 1px under each curved piece (they're drawn on top), so the two
       never meet edge to edge and leave a hairline between them */
    margin-inline: -1px;
    background-color: var(--bg-color);
    border-radius: var(--curve) var(--curve) 0 0;
    box-shadow: 0px -2px 20px 8px rgb(0 0 0 / 0.08);
}

#search-bar-pill-container div div:nth-child(3){
    z-index: 100;

    pointer-events: none;

    background-repeat: no-repeat;
    background-image:
        radial-gradient(circle at top right,  transparent calc(var(--curve)), var(--bg-color) calc(var(--curve)));

    background-position: left bottom;
    background-size: var(--curve) var(--curve);

    /* background-size: 0 0, 0 0, 0 0; */
    
    width: var(--curve);
    height: var(--curve);

    opacity: 1;
}

#search-bar-border{
    position: absolute;
    z-index: 11;

    width: calc(var(--sb-width));
    height: calc(var(--sb-height));

    box-sizing: content-box;
    border-radius: var(--sb-radius);
    
    border: solid 8px rgb(76 51 0 / 40%);
    background-clip:border-box;

    mix-blend-mode:multiply;

    left:50%;
    top: var(--sb-top);
    transform: translateX(-50%) translateY(-50%);

    /* background-color: rgba(0, 0, 0, 0.12); */
    /* background-color:rgb(76 51 0 / 40%);

    backdrop-filter: blur(1px);*/
    box-shadow: 0 0 4px 0 rgba(0, 0, 0, 0.12); 
}

#search-bar-drop-down{
    position: absolute;
    z-index: 20;

    width: var(--sb-width);

    height: var(--sb-height);
    padding: 0.5rem 0.5rem 0.5rem 0;

    display: flex;
    justify-content: space-between;
    align-items: center;

    border-radius: var(--curve);

    background-color: var(--bg-color);

    left:50%;
    top:var(--sb-top);
    transform: translateX(-50%) translateY(calc(var(--sb-height) / -2));

    transition: height 0.4s cubic-bezier(0.77,0,0.18,1);

    font-family: 'quicksand-bold';
    box-shadow: black;
    box-shadow: 0px 3px 14px -3px rgb(0 0 0 / 0.28);
}

#search-bar-drop-down.dd-activated{
    /* fallback for the instant before JS measures the active panel's real
       content and sets an inline height (search-sheet.js) — sized for the
       4-row cap so it's never smaller than what a panel actually needs */
    height: calc(var(--sb-height) + 0.5rem + (var(--dd-row-h) * var(--dd-rows-visible)) + 1rem);
}

#search-button{
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-inline: 1rem;
    margin-inline: 0.5rem;
    z-index: 50;

    border-radius: 999px;

    font-size: 1rem;
    color: var(--bg-color);

    height:100%;
    width: var(--btn-w);

    box-sizing: border-box;
    border: 0;
    background-color: var(--smp-orange);

    cursor: pointer;
}

#search-button:hover{
    background-color: #F69360;
}

#search-button img{
    height: 1.25rem;
    width: auto;
}

.search-bar-input-container{
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 0.25rem;

    flex: 1;

    height: fit-content;
}



#search-gap{
    height: 1.75rem;
    width:1px;
    background-color: #979691;
    transition: opacity 0.18s ease;
    opacity: 1;
}

#search-gap.gap-gone{
    opacity: 0;
}

.search-bar-input-container input[type="text"]{
    position: relative;
    z-index:20;
    background-color: transparent;
    border: none;
    font-variation-settings: "wght" 500;
}

.search-bar-input-container label{
    font-size: 0.875rem;
    line-height: 0.8;
    padding-left: 2px;
    z-index: 50;
}

/* Autocomplete ghost text (attachGhost in search-sheet.js): sits behind the
   transparent input, which has z-index 20; JS copies the input's box and font
   onto it so the grey remainder lines up right after the typed text. */
.sb-ghost{
    position: absolute;
    z-index: 19;
    display: flex;
    align-items: center;
    box-sizing: border-box;
    overflow: hidden;
    white-space: pre;
    pointer-events: none;
    color: #A8A397;
}
.sb-ghost[hidden]{ display: none; }
.sb-ghost-typed{ visibility: hidden; }

.search-bar-input-container input[type="text"]:focus{
    outline: none;
}


#first-input-container{
    position: relative;
    margin-left: calc(var(--sb-height) * 0.4);
    height: 100%;
    justify-content: center;
}

#first-input-container:after{
    position:absolute;
    margin-left: calc(var(--sb-height) * -0.4);
    top:-0.5rem;
    content: '';
    height: calc(100% + 1rem);
    width: calc(100% + var(--sb-height) * 0.4);

    transition: opacity 0.18s ease;

    border-radius: 999px;

    background-color: black;
    opacity: 0%;
}

#first-input-container.input-hover:hover:after { 
    opacity: 0.10; 
}

body:has(#first-input-container.input-hover:hover) #search-gap{ 
  opacity: 0; 
}

#second-input-container{
    position: relative;
    flex:1;
    display:flex;
    align-items: center;
    height:100%;

    gap:1.5rem;
}

#second-input-container:after{
    position:absolute;
    left:0;
    top:-0.5rem;
    content: '';
    height: calc(100% + 1rem);
    width: calc(100% + var(--btn-w) + 1rem);
    border-radius: 999px;

    transition: opacity 0.18s ease;

    background-color: black;
    opacity: 0%;
}

#second-input-container.input-hover:hover:after { 
  opacity: 0.10; 
}

body:has(#second-input-container:hover) #search-gap{ 
  opacity: 0; 
}

/* MOBILE VERSION */

#search-bar-mobile{
    display: none;
    font-family: 'quicksand-bold';
}

.search-bar-mobile-container{
    margin: calc(var(--site-margin) * 2);
    border-radius: 1.1875rem;
    border: 3px solid var(--secondary-700);
    padding: 0.5rem;

    display: flex;
    flex-direction: column;
    gap: 0.625rem;
    box-shadow: 0 4px 8px 2px rgba(0, 0, 0, 0.25);
}

.input-container{
    padding: 0 0.5rem;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

#mobile-search-divider{
    background-color: #979691;
    width: 100%;
    height: 1px;
}

#search-bar-mobile .search-bar-input-container{
    gap: -0.5rem;
    margin-top: 0.5rem;
}

.search-bar-input-container label{
    font-size: 0.875rem;
    line-height: 0.8;
    padding-left: 2px;
    z-index: 50;

    margin-bottom: -0.125rem;
}

#mobile-search-button{
    width: 100%;
    background-color: var(--smp-orange);
    display: flex;
    justify-content: center;
    align-items: center;
    color: var(--bg-color);
    gap: 0.5rem;
    padding: 1rem;
    border-radius: 0.5rem;
}

/* ===========================================================
   Mobile search sheet — append to search-bar.css
   =========================================================== */

:root{
    --sheet-ease: cubic-bezier(.32, .72, 0, 1);
    --sheet-dur: 380ms;
}

/* The card's inputs open the sheet instead of the keyboard */
#search-bar-mobile input{
    cursor: pointer;
    caret-color: transparent;
}

/* -----------------------------------------------------------
   Backdrop
   ----------------------------------------------------------- */

#search-sheet-backdrop{
    position: fixed;
    inset: 0;
    z-index: 900;

    background-color: rgba(30, 25, 22, 0.45);
    opacity: 0;
    transition: opacity var(--sheet-dur) var(--sheet-ease);
}

#search-sheet-backdrop.is-open{ opacity: 1; }

/* -----------------------------------------------------------
   Sheet shell
   ----------------------------------------------------------- */

#search-sheet{
    position: fixed;
    /* top+bottom (rather than a max-height) fixes the sheet's height, so it
       stays pinned at one site-margin from the top regardless of how much
       content the location/style step is showing */
    top: var(--site-margin);
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 910;

    display: flex;
    flex-direction: column;

    background-color: var(--bg-color);
    border-radius: 1.5rem 1.5rem 0 0;
    box-shadow: 0 -8px 40px rgba(0, 0, 0, 0.25);

    transform: translateY(100%);
    transition: transform var(--sheet-dur) var(--sheet-ease);

    /* clear of the iOS home indicator */
    padding-bottom: env(safe-area-inset-bottom, 0px);

    font-family: 'quicksand-medium';
}

#search-sheet.is-open{ transform: translateY(0); }

/* While dragging, JS drives the transform — a transition here
   would make the sheet lag behind the finger. */
#search-sheet.is-dragging{ transition: none; }

#sheet-handle{
    display: flex;
    justify-content: center;
    padding: 0.625rem 0 0.25rem;
    cursor: grab;
    touch-action: none;          /* let the drag handler own the gesture */
}

#sheet-handle span{
    width: 2.5rem;
    height: 0.25rem;
    border-radius: 999px;
    background-color: rgba(30, 25, 22, 0.22);
}

#sheet-head{
    display: flex;
    align-items: start;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.5rem 1.25rem 1rem;
}

#sheet-title{
    font-family: 'fraunces-heading', serif;
    font-variation-settings: var(--fraunces-axes);
    font-size: 1.625rem;
    line-height: 110%;
    letter-spacing: -2%;
    color: var(--dark-text-color);
}

#sheet-sub{
    font-size: 0.875rem;
    color: #8A8578;
    margin-top: 0.125rem;
}

#sheet-close{
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;

    width: 2.25rem;
    height: 2.25rem;
    margin: -0.25rem -0.25rem 0 0;   /* optical alignment, keeps a 44px target */
    border-radius: 999px;
    color: var(--dark-text-color);
}

#sheet-close:active{ background-color: rgba(30, 25, 22, 0.07); }
#sheet-close svg{ width: 1.1rem; height: 1.1rem; }

#sheet-body{
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;    /* list scroll must not scroll the page */
    padding: 0 1.25rem;
}

#sheet-foot{
    flex: 0 0 auto;
    padding: 0.875rem 1.25rem 1.125rem;
    border-top: 1px solid rgba(30, 25, 22, 0.08);
    background-color: white;
}

#sheet-submit{
    width: 100%;
    height: 3.25rem;

    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;

    background-color: var(--smp-orange);
    color: var(--bg-color);
    border-radius: 0.5rem;
    font-family: 'quicksand-bold';
    font-size: 1rem;
}

#sheet-submit svg{ width: 1.15rem; height: 1.15rem; flex: 0 0 auto; }

/* -----------------------------------------------------------
   Fields
   ----------------------------------------------------------- */

.sheet-field{
    border: 2px solid rgba(76, 51, 0, 0.25);
    border-radius: 0.875rem;
    padding: 0.5rem 0.875rem 0.625rem;
    margin-bottom: 0.75rem;

    transition: border-color .18s ease, background-color .18s ease;
    background-color: white;
}

.sheet-field.is-active{
    border-color: var(--secondary-700);
}

.sheet-field-label{
    display: flex;
    align-items: center;
    gap: 0.375rem;

    font-family: 'quicksand-bold';
    font-variation-settings: 'wght' 700;
    font-size: 0.875rem;
    line-height: 1.2;
    color: var(--dark-text-color);
}

.sheet-field-input{
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-top: 0.2rem;
}

.sheet-field-input input{
    flex: 1 1 auto;
    min-width: 0;

    border: none;
    background: none;
    outline: none;
    padding: 0;

    font-family: 'quicksand-medium';
    font-size: 1rem;              /* never below 16px, or iOS zooms on focus */
    color: var(--dark-text-color);
}

/* one placeholder colour for every search field: the desktop bar, the
   phone search card and this sheet. opacity: 1 because Firefox fades
   placeholders by default. */
.search-bar-input-container input::placeholder,
#search-bar-mobile input::placeholder,
.sheet-field-input input::placeholder{ color: #8A8578; opacity: 1; }

.sheet-field-clear{
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 1.375rem;
    height: 1.375rem;
    border-radius: 999px;
    background-color: rgba(30, 25, 22, 0.10);
    color: var(--dark-text-color);
}

.sheet-field-clear svg{ width: 0.7rem; height: 0.7rem; }

/* -----------------------------------------------------------
   Location list — plain rows, no icons
   ----------------------------------------------------------- */

.sheet-list{
    list-style: none;
    margin: 0 0 0.75rem;
    padding: 0;
}

.sheet-list[hidden]{ display: none; }

.sheet-list li + li .sheet-option{
    border-top: 1px solid rgba(30, 25, 22, 0.08);
}

.sheet-option{
    display: flex;
    align-items: center;
    width: 100%;

    padding: 0.85rem 0.5rem;
    text-align: left;

    font-family: 'quicksand-medium';
    font-variation-settings: 'wght' 600;
    font-size: 1rem;
    color: var(--dark-text-color);
}

.sheet-option:active{ background-color: rgba(255, 229, 178, 0.4); }

.sheet-option-label{
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* -----------------------------------------------------------
   Photoshoot types — wrapping pills
   ----------------------------------------------------------- */

.sheet-pills{
    list-style: none;
    margin: 0 0 0.75rem;
    padding: 0.25rem 0 0;

    display: flex;
    flex-wrap: wrap;
    gap: 0.625rem;
}

.sheet-pills[hidden]{ display: none; }

.sheet-empty{
    font-size: 0.9375rem;
    color: #8A8578;
    padding: 0.9rem 0.5rem;
}

@media (prefers-reduced-motion: reduce){
    #search-sheet,
    #search-sheet-backdrop{ transition: none; }
}

/* ===========================================================
   Desktop dropdown contents — append to search-bar.css

   #search-bar-drop-down already exists and animates its height
   via .dd-activated. These rules fill it.

   The dropdown's top edge aligns with the top of the search
   bar, so the first --sb-height of it sits BEHIND the bar.
   Panels are padded down past that.
   =========================================================== */

#search-bar-drop-down{
    /* the base rule centres a single row; panels need the full box */
    align-items: stretch;
    flex-direction: column;
    padding: 0;
    overflow: hidden;
}

/* The dropdown's own height is set inline by search-sheet.js — measured from
   whichever panel is active, so the box is exactly tall enough for that
   panel's real content (no leftover space stretching the style pills apart)
   with no jitter, since JS only ever animates between two real px numbers,
   never to/from an auto-resolved keyword like fit-content (which is what the
   old class-toggled fixed/fit-content height used to flash tall on switch).
   Both panels stack in the same box via position:absolute so the outgoing
   one can fade out while the incoming one fades in, instead of an abrupt
   hidden-attribute swap. */
.dd-panel{
    position: absolute;
    inset: 0;

    padding: calc(var(--sb-height) + 0.5rem) 0.5rem 1rem 1.25rem;

    opacity: 0;
    pointer-events: none;
    transition: opacity .16s ease;
}

/* Fade in once the box has opened (initial open) or whenever it becomes the
   active panel (switching between location/style) */
#search-bar-drop-down.dd-activated .dd-panel.is-active{
    opacity: 1;
    pointer-events: auto;
    transition-delay: .08s;
}

.dd-panel[hidden]{ display: none; }

/* the list/pills size to their own content (so the box can be sized exactly
   to fit) and only scroll internally past --dd-rows-visible rows; the
   scrollbar then only ever runs alongside the rows themselves — not up
   through the padding reserved for the search bar row sitting on top */
.dd-list, .dd-pills{
    max-height: calc(var(--dd-row-h) * var(--dd-rows-visible));
    overflow-y: auto;
    overscroll-behavior: contain;
}

.dd-list::-webkit-scrollbar, .dd-pills::-webkit-scrollbar{ width: 6px; }
.dd-list::-webkit-scrollbar-thumb, .dd-pills::-webkit-scrollbar-thumb{
    background-color: var(--secondary-700);
    border-radius: 999px;
}

.dd-list::-webkit-scrollbar-track, .dd-pills::-webkit-scrollbar-track{
    background: var(--bg-color);
}

.dd-list::-webkit-scrollbar-button, .dd-pills::-webkit-scrollbar-button{
    display: none;
}

/* scrollbar-color/-width is a second, competing styling system — once it's
   set to anything but `auto`, Chromium switches that scrollbar to its native
   renderer and silently drops every ::-webkit-scrollbar-* rule above,
   including the one hiding the step-arrow buttons. Scoping it to browsers
   that don't understand ::-webkit-scrollbar (i.e. Firefox) keeps it as a
   fallback there without breaking the real customization everywhere else. */
@supports not selector(::-webkit-scrollbar){
    .dd-list, .dd-pills{
        scrollbar-color: var(--secondary-700) var(--bg-color);
        scrollbar-width: thin;
    }
}

.dd-list, .dd-pills{
    scrollbar-color: var(--secondary-700) var(--bg-color);
    scrollbar-width: thin;
}

/* -----------------------------------------------------------
   Location rows
   ----------------------------------------------------------- */

.dd-list{
    list-style: none;
    margin: 0;
    padding: 0;
}

.dd-option{
    display: flex;
    align-items: center;
    width: 100%;

    padding: 0.7rem 0.75rem;
    border-radius: 0.625rem;
    text-align: left;

    font-family: 'quicksand-medium';
    font-variation-settings: 'wght' 600;
    font-size: 1rem;
    color: var(--dark-text-color);

    transition: background-color .12s ease;
}

.dd-option:hover,
.dd-option.is-suggested{
    background-color: rgba(233, 233, 233, 0.45);
    outline: none;
}

.dd-option:focus-visible{
    background-color: rgba(233, 233, 233, 0.45);
    border: 1px solid var(--dark-text-color); 
}


/* -----------------------------------------------------------
   Photoshoot type pills
   ----------------------------------------------------------- */

.dd-pills{
    list-style: none;
    /* The list scrolls (overflow-y above), and a scroll box clips anything
       past its edges, including the pills' shadow (0 2px 2px reaches ~4px
       below). Padding makes room for it inside; the matching side margins
       keep the pills lined up where they were. The dropdown measures this
       panel's real height, so it grows to fit. */
    margin: 0 -3px;
    padding: 2px 3px 5px;
    /* so the 3-row max-height (and the dropdown height search-sheet.js
       caps at it) includes this padding, rather than overflowing by it */
    box-sizing: border-box;

    display: flex;
    flex-wrap: wrap;
    gap: 0.625rem;
}

/* The one pill style for photoshoot types, used by the desktop dropdown,
   the phone search sheet and the landing page's category section. */
.category-pill{
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;

    padding: 0.4rem 0.875rem;
    border-radius: 999px;
    border: 1px solid rgba(226, 232, 240, 0.6);
    background-color: white;
    box-shadow: rgba(0, 0, 0, 0.1) 0px 2px 2px;

    font-family: 'quicksand-medium';
    font-variation-settings: 'wght' 600;
    font-size: 0.9375rem;
    color: var(--dark-text-color);
    white-space: nowrap;

    transition: background-color .15s ease, border-color .15s ease, color .15s ease;
    cursor: pointer;   /* buttons get this from the reset; the category section's spans don't */
}

.category-pill:hover{ background-color: rgba(233, 233, 233, 0.45); }
/* the pill the arrow keys are on in the desktop dropdown (search-sheet.js);
   the ring shows on selected (dark) pills too. .dd-pills' 2px top padding
   keeps it from being clipped by the scrolling list. */
.category-pill.is-highlighted{ outline: 2px solid var(--smp-orange); outline-offset: 0; }
.category-pill.is-highlighted:not(.is-selected){ background-color: rgba(255, 229, 178, 0.45); }

.category-pill.is-selected{
    background-color: var(--dark-text-color);
    border-color: var(--dark-text-color);
    color: var(--bg-color);
}

.category-pill:focus-visible{
    outline: 2px solid var(--smp-orange);
    outline-offset: 2px;
}

.dd-empty{
    font-family: 'quicksand-medium';
    font-size: 0.9375rem;
    color: #8A8578;
    padding: 0.75rem;
}