/* Inicio: cuatro perfumes y cuatro promociones; dos columnas en celular. */
.best-section, .home-packs { max-width: 880px; }
.home-products, .home-packs .promo-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px 24px; }
.home-products .card .card-image { aspect-ratio: 1 / 1.02; }
.home-products .card-info { padding-top: 10px; }
.home-products .card h3 { font-size: 20px; }
.home-products .card-info > form { display: flex; flex-direction: column; flex: 1; }
.home-products .card-add { margin-top: auto; }
.home-packs .promo-images { height: 190px; margin-bottom: 10px; }
.home-packs .promo h3 { font-size: 24px; }
.home-packs .promo-description { min-height: 0; margin-bottom: 6px; }
.home-packs .promo-actions .btn { min-height: 44px; }
@media (min-width: 1024px) {
  .best-section, .home-packs { max-width: 1400px; }
  .home-products, .home-packs .promo-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
.brand-carousel.section { padding-block: 24px; }
.brand-caption { text-align: center; margin-bottom: 16px; }
.brand-caption span { font-size: 10px; letter-spacing: .8px; }
/* Logotipos como una línea de texto: centrados, sin recortes ni deformación. */
.brand-rail { gap: clamp(20px, 3vw, 40px); align-items: center; justify-content: safe center; padding: 4px; scroll-snap-type: x proximity; }
.brand-rail a { flex: 0 0 160px; min-width: 0; height: 64px; padding: 10px 8px; scroll-snap-align: start; }
.brand-rail img { width: auto; max-width: 100%; height: auto; max-height: 44px; object-fit: contain; opacity: 1; filter: none; }
/* Al tabular, el logo enfocado queda completo dentro del carrusel. */
.brand-rail:has(a:focus-visible) { scroll-snap-type: x mandatory; }
.brand-rail:has(a:focus-visible) a:not(:focus-visible) { scroll-snap-align: none; }
.brand-rail a:focus-visible { scroll-snap-align: center; outline: 2px solid #203c2a; outline-offset: -2px; border-radius: 4px; }
/* Página individual con la composición editorial del modal. */
#standalone-detail { max-width: 1140px; }
#standalone-detail .detail { align-items: center; gap: 36px; }
#standalone-detail .detail-copy { min-width: 0; }
#standalone-detail h1 { font: 600 clamp(30px, 3.6vw, 49px)/1.08 var(--sans); letter-spacing: -1.2px; margin: 10px 0 16px; overflow-wrap: anywhere; }
.perfume-size-fieldset { border: 0; padding: 0; margin: 0; min-width: 0; }
#standalone-detail .native-detail-sizes label { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 7px; padding: 10px 4px; min-height: 105px; text-align: center; }
#standalone-detail .native-detail-sizes label:has(input:checked) { border-color: #203c2a; box-shadow: inset 0 0 0 1px #203c2a; background: #f5f6f1; }
#standalone-detail .native-detail-sizes input { accent-color: #203c2a; margin: 0; }
.perfume-quantity { display: flex; align-items: center; gap: 10px; font-size: 11px; margin: 0 0 12px; }
.perfume-quantity .field { width: 64px; padding: 5px 8px; margin: 0; min-height: 32px; }
#standalone-detail .detail-actions { display: grid; grid-template-columns: 1fr; }
#standalone-detail .detail-actions .btn { min-height: 44px; }
#standalone-detail .detail-perks li { color: #23352c; }
#standalone-detail .detail-gallery { min-width: 0; }
#standalone-detail .detail-art { height: 430px; }
#standalone-detail .detail-art > img { width: 100%; height: 90%; object-fit: contain; }
/* Gestionar marcas: encabezado, formulario y lista dentro del diálogo. */
#modal-marcas { width: min(680px, calc(100vw - 24px)); max-height: calc(100dvh - 32px); padding: 28px; border: 1px solid #e1e5df; border-radius: 16px; overflow-y: auto; box-shadow: 0 24px 80px #10261a40; }
#modal-marcas .marca-modal-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; margin-bottom: 22px; }
#modal-marcas h2 { font-size: clamp(24px, 4vw, 30px); margin: 4px 0 8px; letter-spacing: -.8px; }
#modal-marcas .marca-modal-heading p { font-size: 13px; color: #69756c; margin: 0; }
#modal-marcas .marca-close { width: 40px; height: 40px; border-radius: 50%; background: #f0f3ee; font-size: 24px; flex-shrink: 0; }
#modal-marcas .marca-editor { background: #f7f8f5; border: 1px solid #e1e5df; border-radius: 10px; padding: 20px; gap: 12px; }
#modal-marcas .marca-editor h3 { font-size: 16px; margin: 0; }
#modal-marcas .field { width: 100%; background: white; font-size: 16px; }
#modal-marcas .form-buttons { flex-wrap: wrap; }
#modal-marcas .form-buttons .btn { width: auto; margin: 0; }
#modal-marcas .marca-list-heading { font-size: 16px; margin: 24px 0 12px; }
#modal-marcas .admin-table { width: 100%; min-width: 0; table-layout: fixed; }
#modal-marcas th, #modal-marcas td { padding: 12px 8px; overflow-wrap: anywhere; }
#modal-marcas th:first-child { width: 48%; }
#modal-marcas .native-actions { gap: 10px; }
#modal-marcas .native-actions button, #modal-marcas .native-actions a { min-height: 40px; display: inline-flex; align-items: center; }
#modal-marcas .native-actions button { color: #963b32; }
.category-card > svg { width: 100%; height: 100%; }
@media (max-width: 760px) {
  .home-products { gap: 24px 12px; }
  .home-products .card .card-image { padding: 10px 7px; border-radius: 12px; }
  .home-products .card-info { padding-top: 6px; }
  .home-products .brand { font-size: 8px; letter-spacing: .5px; }
  .home-products .card h3 { font-size: 16px; line-height: 1.2; letter-spacing: -.35px; }
  .home-products .card-price { font-size: 12px; gap: 2px; min-height: 20px; }
  .home-products .card-price small { font-size: 8px; }
  .home-products .size-options { gap: 4px; flex-wrap: nowrap; }
  .home-products .native-sizes label { min-width: 0; flex: 1; min-height: 44px; }
  .home-products .native-sizes span { font-size: 11px; padding: 7px 1px; white-space: nowrap; }
  .home-products .card-add { font-size: 10px; line-height: 1.35; letter-spacing: .3px; padding-inline: 4px; }
  .home-packs .promo-grid { gap: 24px 12px; }
  .home-packs .promo { min-width: 0; }
  .home-packs .promo-images { height: 120px; padding: 16px 8px 6px; gap: 2px; }
  .home-packs .promo-images img { width: 31%; height: 100%; margin: 0; }
  .home-packs .promo h3 { font-size: 16px; min-height: 0; margin-block: 6px; overflow-wrap: anywhere; }
  .home-packs .promo-description { font-size: 11px; }
  .home-packs .promo-actions { display: grid; grid-template-columns: 1fr; }
  .home-packs .promo-actions .btn { font-size: 10px; padding: 9px 4px; min-height: 44px; margin: 0; width: 100%; }
  .home-packs .promo-price { font-size: 12px; }
  .home-packs .promo-includes { font-size: 11px; overflow-wrap: anywhere; }
  .brand-rail { gap: 20px; }
  .brand-rail a { flex-basis: 116px; height: 56px; padding: 8px; }
  .brand-rail img { max-height: 34px; }
  #standalone-detail .detail { grid-template-columns: minmax(0, 1fr); gap: 22px; }
  #standalone-detail .detail-art { height: 300px; }
  #standalone-detail .detail-thumbnails { justify-content: center; margin-top: 8px; }
  #standalone-detail h1 { font-size: 32px; }
  #modal-marcas { padding: 18px; }
  #modal-marcas .marca-editor { padding: 14px; }
  #modal-marcas .form-buttons { gap: 10px; }
}

@media (max-width: 760px) {
  .admin-heading { flex-wrap: wrap; }
  .admin-heading > div { flex: 1 0 100%; min-width: 0; }
  .admin-heading > .btn { margin: 0; }
}
/* El acceso por teclado solo aparece cuando recibe el foco. */
.skip-link:not(:focus) { clip-path: inset(50%); width: 1px; height: 1px; overflow: hidden; padding: 0; }
.home-packs .promo-includes li { flex-wrap: wrap; }
.home-packs .promo-includes li span { white-space: normal; }

/* Carrito: imagen e información en una misma fila, con la tipografía de la tienda. */
.cart-page .cart-section { padding-top: 15px; }
.cart-page .cart-layout { align-items: start; }
.cart-selection, .cart-item-info, .cart-summary { min-width: 0; }
.cart-page .cart-row { grid-template-columns: 120px minmax(0, 1fr) auto; gap: 24px; padding: 24px 0; }
.cart-page .cart-image { display: block; align-self: start; background: #f6f6f4; }
.cart-page .cart-image img { display: block; width: 120px; height: 140px; object-fit: contain; }
.cart-item-info h2 { font-size: 23px; line-height: 1.2; letter-spacing: -.6px; margin: 0 0 8px; overflow-wrap: anywhere; }
.cart-page .cart-item-meta { font-size: 14px; color: var(--blue); margin: 0 0 8px; }
.cart-page .cart-unit-price { font-size: 12px; color: var(--muted); margin: 0 0 12px; }
.cart-page .cart-item-quantity { margin: 0; font-size: 14px; }
.cart-edit-form { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 16px; }
.cart-page .quantity button { width: 44px; height: 44px; font-size: 18px; }
.cart-page .quantity > span { min-width: 40px; font-size: 16px; padding-inline: 4px; }
.cart-page .quantity button:disabled { opacity: .4; cursor: not-allowed; }
.cart-remove { min-height: 44px; padding: 8px 0; background: none; color: var(--muted); font-size: 13px; text-decoration: underline; text-underline-offset: 3px; }
.cart-page .cart-pack-note { font-size: 12px; color: var(--muted); margin: 8px 0 0; }
.cart-pack-actions .text-link { min-height: 44px; font-size: 12px; }
.cart-page .cart-item-total { font-size: 17px; white-space: nowrap; }
.cart-selection-actions { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 12px 24px; margin-top: 20px; }
.cart-selection-actions .text-link { min-height: 44px; }
.cart-summary .summary-row > :first-child { min-width: 0; overflow-wrap: anywhere; }
.cart-summary .summary-row > :last-child { flex-shrink: 0; white-space: nowrap; }
.cart-summary .field { max-width: 100%; }
.cart-summary .checkout-form { scroll-margin-top: 24px; }
@media (max-width: 1100px) {
  .cart-page .cart-layout { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 760px) {
  .cart-page .cart-row { grid-template-columns: 84px minmax(0, 1fr); gap: 8px 16px; padding: 20px 0; }
  .cart-page .cart-image { grid-row: 1 / 3; }
  .cart-page .cart-image img { width: 84px; height: 108px; }
  .cart-item-info h2 { font-size: 18px; }
  .cart-page .cart-item-meta { font-size: 12px; }
  .cart-page .cart-item-total { grid-column: 2; font-size: 16px; }
}