/* Nos celulares, os serviços mantêm a composição visual dos cartões do tablet. */
@media (max-width: 700px) {
  #services-prices-detail[data-group][data-art-ready] .services-prices-detail-content {
    position: relative;
    inset: auto;
    width: calc(100% - 12px);
    max-width: 600px;
    margin: 0 auto;
    padding: 10px 0 0;
  }
  #services-prices-detail[data-group][data-art-ready] .services-prices-detail-list {
    position: relative;
    inset: auto;
    display: grid;
    width: 100%;
    height: auto;
    aspect-ratio: auto;
    gap: 9px;
    background: none;
  }
  #services-prices-detail[data-group][data-art-ready] .services-prices-detail-row {
    --price-column: clamp(100px, 26vw, 116px);
    position: relative;
    inset: auto;
    display: grid;
    grid-template-columns: clamp(82px, 26vw, 116px) minmax(0, 1fr) var(--price-column);
    grid-template-rows: minmax(58px, 1fr) 44px;
    align-items: center;
    gap: 5px 8px;
    width: 100%;
    height: auto !important;
    min-height: 128px;
    padding: 7px;
    overflow: hidden;
    border: 2px solid #e7aa28;
    border-radius: 11px;
    background: linear-gradient(108deg, #171006, #030303 43%, #080704);
    box-shadow: inset 0 1px #ffe09a45, 0 5px 13px #0009;
  }
  #services-prices-detail[data-group][data-art-ready] .services-prices-detail-row::before {
    content: '';
    position: absolute;
    z-index: 0;
    inset: 12px calc(7px + var(--price-column) + 4px) 12px auto;
    width: 1px;
    background: linear-gradient(#f4c25600, #f4c256c9 25% 75%, #f4c25600);
    pointer-events: none;
  }
  #services-prices-detail[data-group][data-art-ready] .services-prices-detail-row > :is(.services-prices-detail-photo, .services-prices-detail-placeholder) {
    position: static;
    display: block;
    grid-column: 1;
    grid-row: 1 / 3;
    width: 100%;
    height: 100%;
    min-height: 110px;
    border: 2px solid #e8ac2f;
    border-radius: 9px;
    object-fit: cover;
    object-position: center;
    box-shadow: 0 0 9px #d49a2555;
  }
  #services-prices-detail[data-group][data-art-ready] .services-prices-detail-row > .services-prices-detail-copy {
    position: static;
    inset: auto;
    z-index: 1;
    display: flex;
    grid-column: 2;
    grid-row: 1 / 3;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    min-width: 0;
    height: auto;
    gap: 4px;
  }
  #services-prices-detail[data-group][data-art-ready] .services-prices-detail-copy strong {
    display: block;
    max-width: 100%;
    color: #fff2cf;
    font: italic 800 clamp(17px, 4.7vw, 23px)/.99 'Barlow Condensed', Impact, sans-serif;
    text-transform: uppercase;
    text-shadow: 0 2px 3px #000;
    overflow-wrap: anywhere;
  }
  #services-prices-detail[data-group][data-art-ready] .services-prices-detail-copy strong::after {
    content: '';
    display: block;
    width: min(72px, 70%);
    height: 4px;
    margin-top: 4px;
    background: linear-gradient(90deg, #ffce5c, #d39110 57%, #d3911000);
    box-shadow: 0 2px 5px #d3911066;
  }
  #services-prices-detail[data-group][data-art-ready] .services-prices-detail-copy small:not(.services-prices-photo-note) {
    display: -webkit-box;
    max-width: 100%;
    margin: 0;
    overflow: hidden;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    color: #e4ded3;
    font: 400 clamp(10px, 2.8vw, 12px)/1.15 'Inter', sans-serif;
  }
  #services-prices-detail[data-group][data-art-ready] .services-prices-photo-note { display: none; }
  #services-prices-detail[data-group][data-art-ready] .services-prices-detail-row > .services-prices-detail-price {
    position: static;
    z-index: 1;
    display: block;
    grid-column: 3;
    grid-row: 1;
    align-self: center;
    width: 100%;
    min-width: 0;
    padding: 0;
    border: 0;
    background: none;
    color: #ffc03e;
    font: 800 clamp(15px, 4.4vw, 20px)/1 'Barlow Condensed', Impact, sans-serif;
    text-align: center;
    white-space: nowrap;
    text-shadow: 0 1px 5px #e8a11b60;
  }
  #services-prices-detail[data-group][data-art-ready] .services-prices-detail-book {
    position: static;
    z-index: 1;
    display: flex;
    grid-column: 3;
    grid-row: 2;
    align-items: center;
    justify-content: center;
    gap: 4px;
    width: 100%;
    height: 44px;
    min-height: 44px;
    padding: 4px;
    border: 2px solid #e8ac2f;
    border-radius: 7px;
    background: #070605;
    color: #ffc342;
    font: 800 clamp(11px, 3vw, 14px)/1 'Barlow Condensed', Impact, sans-serif;
    opacity: 1;
  }
  #services-prices-detail[data-group][data-art-ready] .services-prices-detail-book::before {
    content: '';
    display: block;
    flex: none;
    width: 16px;
    height: 16px;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffc342' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='2' y='4' width='20' height='18' rx='2'/%3E%3Cpath d='M7 2v5M17 2v5M2 10h20M7 14h2m5 0h2m-9 4h2m5 0h2'/%3E%3C/svg%3E") center / contain no-repeat;
  }
  #services-prices-detail[data-group="combos"][data-art-ready] .services-prices-detail-row { min-height: max(156px, calc((100svh - 270px) / 3)); }
  #services-prices-detail[data-group][data-art-ready] .services-prices-combo-label { font-size: 14px; }
  #services-prices-detail[data-group][data-art-ready] .services-prices-combo-parts { font-size: 9px !important; }
}

@media (max-width: 360px) {
  #services-prices-detail[data-group][data-art-ready] .services-prices-detail-row {
    grid-template-columns: 76px minmax(0, 1fr) var(--price-column);
    gap: 4px 6px;
    padding: 6px;
  }
  #services-prices-detail[data-group][data-art-ready] .services-prices-detail-copy strong { font-size: 16px; }
  #services-prices-detail[data-group][data-art-ready] .services-prices-detail-book::before { width: 13px; height: 13px; }
}

/* Usa, em cada card móvel, a mesma fotografia da arte oficial do tablet.
   Texto, preço e botão continuam acessíveis e alimentados pelo catálogo. */
@media (max-width: 700px) {
  #services-prices-detail:is([data-group="cabelo"], [data-group="coloracao"])[data-art-ready="true"] .services-prices-detail-row {
    background: linear-gradient(108deg, #171006, #030303 43%, #080704);
  }
  #services-prices-detail[data-group="cabelo"][data-art-ready="true"] .services-prices-detail-row::after {
    background-image: url('./assets/cabelos-pagina-referencia.png');
    background-size: 866px auto;
    background-position: -90px var(--photo-y);
  }
  #services-prices-detail[data-group="cabelo"][data-art-ready="true"] .services-prices-detail-row:nth-child(1) { --photo-y: -483px; }
  #services-prices-detail[data-group="cabelo"][data-art-ready="true"] .services-prices-detail-row:nth-child(2) { --photo-y: -600px; }
  #services-prices-detail[data-group="cabelo"][data-art-ready="true"] .services-prices-detail-row:nth-child(3) { --photo-y: -717px; }
  #services-prices-detail[data-group="cabelo"][data-art-ready="true"] .services-prices-detail-row:nth-child(4) { --photo-y: -835px; }
  #services-prices-detail[data-group="cabelo"][data-art-ready="true"] .services-prices-detail-row:nth-child(5) { --photo-y: -946px; }
  #services-prices-detail[data-group="cabelo"][data-art-ready="true"] .services-prices-detail-row:nth-child(6) { --photo-y: -1054px; }
  #services-prices-detail[data-group="cabelo"][data-art-ready="true"] .services-prices-detail-row:nth-child(7) { --photo-y: -1164px; }
  #services-prices-detail[data-group="coloracao"][data-art-ready="true"] .services-prices-detail-row::after {
    background-image: url('./assets/coloracao-pagina-referencia.png');
    background-size: 866px auto;
    background-position: -90px var(--photo-y);
  }
  #services-prices-detail[data-group="coloracao"][data-art-ready="true"] .services-prices-detail-row:nth-child(1) { --photo-y: -480px; }
  #services-prices-detail[data-group="coloracao"][data-art-ready="true"] .services-prices-detail-row:nth-child(2) { --photo-y: -610px; }
  #services-prices-detail[data-group="coloracao"][data-art-ready="true"] .services-prices-detail-row:nth-child(3) { --photo-y: -739px; }
  #services-prices-detail[data-group="coloracao"][data-art-ready="true"] .services-prices-detail-row:nth-child(4) { --photo-y: -868px; }
  #services-prices-detail[data-group="coloracao"][data-art-ready="true"] .services-prices-detail-row:nth-child(5) { --photo-y: -993px; }
  #services-prices-detail[data-group="coloracao"][data-art-ready="true"] .services-prices-detail-row:nth-child(6) { --photo-y: -1121px; }
  #services-prices-detail[data-group][data-art-ready="true"] .services-prices-detail-row > .services-prices-detail-price {
    background: #030303;
    letter-spacing: -.02em;
    padding-left: 5px;
    text-align: left;
  }

  #services-prices-detail:is([data-group="barba"], [data-group="combos"])[data-art-ready="true"] .services-prices-detail-row {
    background: linear-gradient(108deg, #171006, #030303 43%, #080704);
  }
  #services-prices-detail[data-group][data-art-ready="true"] .services-prices-detail-row > .services-prices-detail-photo {
    opacity: 0;
  }
  #services-prices-detail[data-group][data-art-ready="true"] .services-prices-detail-row::after {
    content: '';
    position: absolute;
    top: 7px;
    bottom: 7px;
    left: 7px;
    z-index: 1;
    width: clamp(82px, 26vw, 116px);
    border: 2px solid #e8ac2f;
    border-radius: 9px;
    background-repeat: no-repeat;
    pointer-events: none;
  }
  #services-prices-detail:is([data-group="cabelo"], [data-group="coloracao"], [data-group="barba"])[data-art-ready="true"] .services-prices-detail-row::after {
    top: 50%;
    bottom: auto;
    height: min(100px, calc(100% - 14px));
    transform: translateY(-50%);
  }
  #services-prices-detail[data-group="cabelo"][data-art-ready="true"] .services-prices-detail-row::after { height: min(90px, calc(100% - 14px)); }
  #services-prices-detail[data-group="coloracao"][data-art-ready="true"] .services-prices-detail-row::after { height: min(108px, calc(100% - 14px)); }
  #services-prices-detail[data-group="barba"][data-art-ready="true"] .services-prices-detail-row::after {
    background-image: url('./assets/barba-pagina-referencia.png');
    background-size: 866px auto;
    background-position: -90px var(--photo-y);
  }
  #services-prices-detail[data-group="barba"][data-art-ready="true"] .services-prices-detail-row:nth-child(1) { --photo-y: -492px; }
  #services-prices-detail[data-group="barba"][data-art-ready="true"] .services-prices-detail-row:nth-child(2) { --photo-y: -617px; }
  #services-prices-detail[data-group="barba"][data-art-ready="true"] .services-prices-detail-row:nth-child(3) { --photo-y: -759px; }
  #services-prices-detail[data-group="barba"][data-art-ready="true"] .services-prices-detail-row:nth-child(4) { --photo-y: -906px; }
  #services-prices-detail[data-group="barba"][data-art-ready="true"] .services-prices-detail-row:nth-child(5) { --photo-y: -1035px; }
  #services-prices-detail[data-group="combos"][data-art-ready="true"] .services-prices-detail-row::after {
    background-image: url('./assets/combos-servicos-referencia.png');
    background-size: auto 1470px;
    background-position: -60px var(--photo-y);
  }
  #services-prices-detail[data-group="combos"][data-art-ready="true"] .services-prices-detail-row:nth-child(1) { --photo-y: -469px; }
  #services-prices-detail[data-group="combos"][data-art-ready="true"] .services-prices-detail-row:nth-child(2) { --photo-y: -680px; }
  #services-prices-detail[data-group="combos"][data-art-ready="true"] .services-prices-detail-row:nth-child(3) { --photo-y: -894px; }
}

/* O cartão estreito cortava a fotografia horizontal do tablet em uma tira.
   Em celulares, a foto ocupa uma coluna larga e preço/agendamento ficam abaixo. */
@media (max-width: 700px) {
  #services-prices-detail[data-group][data-art-ready="true"] .services-prices-detail-row {
    --photo-width: clamp(108px, 36vw, 176px);
    grid-template-columns: var(--photo-width) minmax(0, 1fr);
    grid-template-rows: minmax(86px, auto) 44px;
    min-height: 152px;
    gap: 7px 10px;
  }
  #services-prices-detail[data-group="combos"][data-art-ready="true"] .services-prices-detail-row {
    grid-template-rows: minmax(132px, auto) 44px;
    min-height: 194px;
  }
  #services-prices-detail[data-group][data-art-ready="true"] .services-prices-detail-row::before {
    inset: auto 8px 54px;
    width: auto;
    height: 1px;
    background: linear-gradient(90deg, #e8ac2f00, #e8ac2fbb 20% 80%, #e8ac2f00);
  }
  #services-prices-detail[data-group][data-art-ready="true"] .services-prices-detail-row > .services-prices-detail-photo {
    grid-column: 1;
    grid-row: 1;
    min-height: 0;
    height: 74px;
  }
  #services-prices-detail[data-group="combos"][data-art-ready="true"] .services-prices-detail-row > .services-prices-detail-photo { height: 116px; }
  #services-prices-detail[data-group][data-art-ready="true"] .services-prices-detail-row > .services-prices-detail-copy {
    grid-column: 2;
    grid-row: 1;
  }
  #services-prices-detail[data-group][data-art-ready="true"] .services-prices-detail-row > .services-prices-detail-price {
    grid-column: 1;
    grid-row: 2;
    align-self: center;
    padding: 0;
    background: none;
    font-size: clamp(18px, 5.3vw, 24px);
    text-align: center;
  }
  #services-prices-detail[data-group][data-art-ready="true"] .services-prices-detail-book {
    grid-column: 2;
    grid-row: 2;
    font-size: clamp(14px, 3.8vw, 17px);
  }
  #services-prices-detail[data-group][data-art-ready="true"] .services-prices-detail-row::after {
    top: 15px;
    bottom: auto;
    left: 7px;
    width: var(--photo-width);
    height: auto;
    transform: none;
    background-color: #090705;
  }
  #services-prices-detail[data-group="cabelo"][data-art-ready="true"] .services-prices-detail-row::after {
    aspect-ratio: 1.9;
    background-size: calc(var(--photo-width) * 4.9) auto;
    background-position: calc(var(--photo-width) * -.22) calc(var(--photo-width) * var(--photo-ratio));
  }
  #services-prices-detail[data-group="cabelo"][data-art-ready="true"] .services-prices-detail-row:nth-child(1) { --photo-ratio: -2.72; }
  #services-prices-detail[data-group="cabelo"][data-art-ready="true"] .services-prices-detail-row:nth-child(2) { --photo-ratio: -3.39; }
  #services-prices-detail[data-group="cabelo"][data-art-ready="true"] .services-prices-detail-row:nth-child(3) { --photo-ratio: -4.05; }
  #services-prices-detail[data-group="cabelo"][data-art-ready="true"] .services-prices-detail-row:nth-child(4) { --photo-ratio: -4.71; }
  #services-prices-detail[data-group="cabelo"][data-art-ready="true"] .services-prices-detail-row:nth-child(5) { --photo-ratio: -5.34; }
  #services-prices-detail[data-group="cabelo"][data-art-ready="true"] .services-prices-detail-row:nth-child(6) { --photo-ratio: -5.95; }
  #services-prices-detail[data-group="cabelo"][data-art-ready="true"] .services-prices-detail-row:nth-child(7) { --photo-ratio: -6.56; }
  #services-prices-detail[data-group="coloracao"][data-art-ready="true"] .services-prices-detail-row::after {
    aspect-ratio: 1.92;
    background-size: calc(var(--photo-width) * 3.76) auto;
    background-position: calc(var(--photo-width) * -.12) calc(var(--photo-width) * var(--photo-ratio));
  }
  #services-prices-detail[data-group="coloracao"][data-art-ready="true"] .services-prices-detail-row:nth-child(1) { --photo-ratio: -2.08; }
  #services-prices-detail[data-group="coloracao"][data-art-ready="true"] .services-prices-detail-row:nth-child(2) { --photo-ratio: -2.64; }
  #services-prices-detail[data-group="coloracao"][data-art-ready="true"] .services-prices-detail-row:nth-child(3) { --photo-ratio: -3.20; }
  #services-prices-detail[data-group="coloracao"][data-art-ready="true"] .services-prices-detail-row:nth-child(4) { --photo-ratio: -3.76; }
  #services-prices-detail[data-group="coloracao"][data-art-ready="true"] .services-prices-detail-row:nth-child(5) { --photo-ratio: -4.30; }
  #services-prices-detail[data-group="coloracao"][data-art-ready="true"] .services-prices-detail-row:nth-child(6) { --photo-ratio: -4.85; }
  #services-prices-detail[data-group="barba"][data-art-ready="true"] .services-prices-detail-row::after {
    aspect-ratio: 2.08;
    background-size: calc(var(--photo-width) * 3.76) auto;
    background-position: calc(var(--photo-width) * -.14) calc(var(--photo-width) * var(--photo-ratio));
  }
  #services-prices-detail[data-group="barba"][data-art-ready="true"] .services-prices-detail-row:nth-child(1) { --photo-ratio: -2.13; }
  #services-prices-detail[data-group="barba"][data-art-ready="true"] .services-prices-detail-row:nth-child(2) { --photo-ratio: -2.66; }
  #services-prices-detail[data-group="barba"][data-art-ready="true"] .services-prices-detail-row:nth-child(3) { --photo-ratio: -3.29; }
  #services-prices-detail[data-group="barba"][data-art-ready="true"] .services-prices-detail-row:nth-child(4) { --photo-ratio: -3.93; }
  #services-prices-detail[data-group="barba"][data-art-ready="true"] .services-prices-detail-row:nth-child(5) { --photo-ratio: -4.49; }
  #services-prices-detail[data-group="combos"][data-art-ready="true"] .services-prices-detail-row::after {
    top: 7px;
    aspect-ratio: 1.2;
    background-size: calc(var(--photo-width) * 3.45) auto;
    background-position: calc(var(--photo-width) * -.084) calc(var(--photo-width) * var(--photo-ratio));
  }
  #services-prices-detail[data-group="combos"][data-art-ready="true"] .services-prices-detail-row:nth-child(1) { --photo-ratio: -1.96; }
  #services-prices-detail[data-group="combos"][data-art-ready="true"] .services-prices-detail-row:nth-child(2) { --photo-ratio: -2.84; }
  #services-prices-detail[data-group="combos"][data-art-ready="true"] .services-prices-detail-row:nth-child(3) { --photo-ratio: -3.75; }
}