/* Phone layout. Everything inside the media query only applies below 900px wide. */
.nav-toggle { display: none; }
.announce [aria-hidden="true"] { display: none; }

@media (max-width: 900px) {
  html, body { max-width: 100%; }
  body { overflow-x: hidden; }

  /* banner and header (the menu opens with the button) */
  .announce { padding: 10px 20px !important; }
  .header-inner { flex-wrap: wrap !important; height: auto !important; min-height: 70px; padding: 0 20px !important; }
  .nav-toggle { align-items: center; background: transparent; border: 0; cursor: pointer; display: flex; flex-direction: column; height: 45px; justify-content: center; padding: 0; row-gap: 5px; width: 45px; }
  .nav-toggle span { background-color: #917c6f; display: block; height: 2px; width: 25px; }
  .nav { align-items: flex-start !important; display: none !important; flex-basis: 100%; flex-direction: column !important; padding-bottom: 30px; row-gap: 15px !important; }
  .header.nav-open .nav { display: flex; }
  .nav a { font-size: 25px !important; }

  /* page structure */
  .wrap { box-sizing: border-box !important; max-width: 100% !important; min-width: 0 !important; padding-left: 20px !important; padding-right: 20px !important; width: 100% !important; }
  body > section { padding-bottom: 50px !important; padding-top: 50px !important; }
  body > section:first-of-type { padding-bottom: 0 !important; }
  #i00ka { min-height: 700px !important; padding: 40px 0 !important; }
  #nosotras-2-2 { padding-bottom: 50px !important; }

  /* type */
  h1 { font-size: 40px !important; }
  h2 { font-size: 35px !important; }
  .eyebrow { font-size: 20px !important; }
  .card h2 { font-size: 20px !important; }
  #ivajlk4 { font-size: inherit; }
  .card h3 { font-size: 30px !important; }
  .tab-panel h3 { font-size: 30px !important; }
  #i6m06 { max-width: 100%; }
  #iw55wu { column-gap: 20px; }
  #iw55wu b { font-size: 40px; }

  /* two columns become one */
  .split { column-gap: 0 !important; grid-template-columns: 1fr !important; row-gap: 30px !important; }
  .split > .media { order: 0; width: 100%; }
  .cards-grid { column-gap: 15px !important; grid-template-columns: 1fr 1fr !important; row-gap: 30px !important; }

  /* shop hop: See more and Add to cart stack inside the narrow cards */
  .card-actions { align-items: flex-start !important; flex-direction: column !important; row-gap: 10px; }
  .add-to-cart { justify-content: center; width: 100%; }

  /* gallery */
  .masonry { column-gap: 15px !important; grid-auto-flow: row !important; grid-auto-rows: auto !important; grid-template-columns: 1fr 1fr !important; grid-template-rows: none !important; row-gap: 15px !important; }
  .masonry > * { aspect-ratio: 1 / 1 !important; grid-column: auto !important; grid-row: auto !important; }

  /* home: friends carousel (swipe), Meet Hop, tabs, subscribe */
  .arrow { display: none !important; }
  .section-head { box-sizing: border-box !important; min-width: 0 !important; padding-left: 20px !important; padding-right: 20px !important; width: 100% !important; }
  .hscroll { grid-template-columns: 1fr !important; row-gap: 30px !important; }
  .sticky { position: static !important; }
  #iq5751 { flex-direction: column; row-gap: 15px; }
  #icma6q { flex: none; width: 100%; }
  #meet-side { display: none; }
  #inb22l { box-sizing: border-box; min-width: 0; padding-left: 0; padding-right: 0; width: 100%; }
  .tab-panel { padding-left: 20px !important; padding-right: 20px !important; }
  #iwugwj, #i08qhi, #iykzq8 { padding-right: 0; }
  .signup { flex-direction: column !important; max-width: 100% !important; }
  #ifw1wq { flex: none; width: 100%; }
  #signup-field { flex-basis: auto; flex-direction: column; }
  #signup-note { position: static; }
  #signup-actions { width: 100%; }
  #id57kh { justify-content: center; width: 100%; }
  #signup-actions .form-sent { margin-top: 10px; position: static; }

  /* contact */
  #id3am8p { max-width: 100%; }

  /* footer and pop-ups */
  .footer-inner { padding-left: 20px !important; padding-right: 20px !important; }
  .footer-grid { column-gap: 20px !important; grid-template-columns: 1fr 1fr !important; row-gap: 30px !important; }
  .footer-brand, .footer-col-last { grid-column: 1 / -1; }
  .footer-col, .footer-col-last { align-items: flex-start; text-align: left; }
  .footer-tagline { max-width: 100% !important; }
  .terms-modal { padding: 20px !important; }
  .terms-box { padding: 20px !important; }
  /* banner: the text scrolls sideways (12s per loop) so it fits on one line; every loop starts with 40px of empty space on the left, then "Nuremberg" (40px between phrases) */
  .announce { overflow: hidden; text-align: left !important; white-space: nowrap; }
  .announce-track { animation: banner-scroll 12s linear infinite; display: inline-flex; margin-left: 20px; }
  .announce-track > span { flex: none; padding-right: 40px; }
  .announce [aria-hidden="true"] { display: inline; }
  @keyframes banner-scroll { from { transform: translateX(0); } to { transform: translateX(-50%); } }
  @media (prefers-reduced-motion: reduce) {
    .announce { text-align: center !important; white-space: normal; }
    .announce-track { animation: none; display: inline; margin-left: 0; }
    .announce-track > span { padding-right: 0; }
    .announce [aria-hidden="true"] { display: none; }
  }

  /* hero: smaller text block, taller image, so the doll's face stays clear */
  #izchi { font-size: 35px !important; max-width: none; }

  #i6m06 { font-size: 15px; }

  /* buttons: equal width pairs, centered text */
  .actions { display: grid !important; gap: 15px !important; grid-template-columns: 1fr 1fr; }
  .actions .btn { justify-content: center; padding: 0 15px !important; text-align: center; white-space: nowrap; width: 100% !important; }
  #contact-actions { align-items: stretch; flex-direction: column; row-gap: 10px; }
  #i16i2z7 { justify-content: center; width: 100%; }

  /* friends carousel: narrower cards and no right padding so the next card peeks out */
  #is562 { padding-left: 0 !important; padding-right: 0 !important; }
  #imhkj { padding-left: 20px !important; padding-right: 0 !important; }
  #ivyfc { column-gap: 20px !important; padding-right: 20px; }
  #ivyfc .card { flex-basis: 260px !important; }

  /* less space between the intro text and the content below it */
  body > section:first-of-type + section { padding-top: 30px !important; }
  #i00ka + section { padding-top: 50px !important; }
}