/* Technodelic Tees v5.6.91 | Mobile homepage refinement (approved mobile design brief).
   Loaded last, only on index.html. Every rule lives inside the mobile breakpoint (max-width: 620px), so the desktop and tablet homepage are unchanged. */
/* Compact CTA surfaces, all widths: hero buttons 38px, promo buttons 36px visible height. Width, type, colour, radius and horizontal padding are untouched; text stays vertically centred by the .btn flex centring. */
html body main > .hero .hero-copy .hero-actions .btn { min-height: 0 !important; height: 38px !important; padding-top: 0 !important; padding-bottom: 0 !important; }
html body .home-gift .btn, html body .originals-content .btn { min-height: 0 !important; height: 36px !important; padding-top: 0 !important; padding-bottom: 0 !important; }
@media (min-width: 621px) {
  /* keep the banners' overall size: the 9px saved on each button stays as space around it */
  html body .home-gift .btn { margin-top: 27px !important; margin-bottom: 4px !important; }
  html body .originals-content .btn { margin-top: 5px !important; margin-bottom: 4px !important; }
  html body main > .hero .hero-copy .hero-actions { margin-bottom: 4px !important; }
}

/* Mobile touch targets: invisible 44px hit area around the compact visible button (no overlap with neighbouring controls) */
@media (max-width: 620px) {
  html body main > .hero .hero-copy .hero-actions .btn, html body .home-gift .btn, html body .originals-content .btn { position: relative !important; }
  html body main > .hero .hero-copy .hero-actions .btn::after { content: "" !important; position: absolute !important; left: 0 !important; right: 0 !important; top: -4.5px !important; bottom: -4.5px !important; }
  html body .home-gift .btn::after, html body .originals-content .btn::after { content: "" !important; position: absolute !important; left: 0 !important; right: 0 !important; top: -5.5px !important; bottom: -5.5px !important; }
}

/* mobile-only line breaks are inert everywhere else */
.hero-copy-mbr, .home-gift-mbr { display: none; }

@media (max-width: 620px) {

  /* 1 / Header + promotional ribbon */
  .site-header .header-content { height: 72px !important; }
  .site-header .brand img { height: 38px !important; width: auto !important; }
  .site-header .tt-cart-trigger { min-height: 44px !important; height: 44px !important; padding: 0 13px !important; }
  .site-header .menu-toggle { width: 44px !important; height: 44px !important; padding: 0 !important; justify-content: center !important; align-items: center !important; }
  .tt-bundle-strip { padding: 6px 8px !important; }
  .tt-bundle-strip a { text-decoration: none !important; }

  /* 2 / Hero: cinematic crop. Same photograph and proportions, less sky, couple and shirts stay in frame */
  main > .hero { height: 422px !important; min-height: 0 !important; overflow: hidden !important; }
  /* image box extends 12px with the hero, so the hero still clips the same 14px of foreground rock and the couple stay in the same place relative to the bottom edge */
  main > .hero .hero-picture { height: 436px !important; }
  main > .hero .hero-art { height: 100% !important; width: 100% !important; object-fit: cover !important; object-position: 50% 60% !important; }
  @media (min-width: 415px) { main > .hero .hero-art { object-position: 50% 35% !important; } }
  /* soft light wash behind the headline only, so navy type stays legible against the blue sky */
  main > .hero .hero-picture::after { content: "" !important; position: absolute !important; inset: 0 !important; pointer-events: none !important; background: linear-gradient(180deg, rgba(255, 250, 243, .30) 0%, rgba(255, 250, 243, .18) 34%, rgba(255, 250, 243, 0) 52%) !important; }
  main > .hero .hero-copy { padding: 0 22px !important; top: 12px !important; }
  main > .hero .hero-copy h1 { font-size: 39px !important; line-height: .9 !important; margin: 0 0 6px !important; }
  main > .hero .hero-copy p { font-size: 16px !important; line-height: 1.22 !important; font-weight: 500 !important; max-width: none !important; margin: 0 !important; }
  main > .hero .hero-copy .hero-actions { margin-top: 10px !important; gap: 8px !important; }
  html body main > .hero .hero-copy .hero-actions .btn { min-height: 0 !important; height: 38px !important; padding: 0 16px !important; font-size: 11px !important; letter-spacing: .06em !important; }

  /* 3 / Explore Collections: clean navy heading + compact 2 x 2 grid */
  #collections .mobile-collections-heading { margin: 0 0 12px !important; align-items: center !important; }
  #collections .mobile-collections-heading > span { font-size: 18px !important; letter-spacing: .03em !important; color: #071444 !important; }
  #collections .mobile-collections-heading > a { font-size: 12px !important; letter-spacing: .06em !important; text-decoration: none !important; }
  #collections .collection-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 14px 12px !important; }
  #collections .collection-card { padding: 0 !important; border: 0 !important; background: none !important; box-shadow: none !important; border-radius: 0 !important; height: auto !important; text-align: left !important; display: block !important; }
  #collections .collection-card picture { display: block !important; }
  #collections .collection-card img { width: 100% !important; height: auto !important; aspect-ratio: 16 / 10 !important; border-radius: 10px !important; object-fit: cover !important; border: 1px solid rgba(7, 20, 68, .12) !important; }
  #collections .collection-title { margin: 7px 0 0 2px !important; text-align: left !important; font-size: 12px !important; line-height: 1.2 !important; letter-spacing: .06em !important; font-weight: 700 !important; color: #071444 !important; }
  #collections .collection-grid .collection-title .mobile-label-break { display: none !important; }
  #collections .collection-card p { display: none !important; }

  /* 4 / Create Your Own: one editorial composition. Headline beside the artwork, message and CTA beneath */
  #create.create-section { margin: 4px 20px 16px !important; }
  #create .create-panel { padding: 20px 18px 20px !important; overflow: hidden !important; }
  #create .create-intro { display: grid !important; grid-template-columns: minmax(0, 1.12fr) minmax(0, 1fr) !important; column-gap: 8px !important; align-items: center !important; min-height: 0 !important; height: auto !important; }
  #create .create-intro .eyebrow { grid-column: 1 !important; grid-row: 1 !important; margin: 0 0 6px !important; }
  #create #create-title { grid-column: 1 !important; grid-row: 2 !important; font-size: 38px !important; line-height: .98 !important; margin: 0 0 8px !important; }
  #create .rainbow-swish { grid-column: 1 !important; grid-row: 3 !important; margin: 0 0 14px !important; width: 130px !important; }
  #create .create-description { grid-column: 1 / -1 !important; grid-row: 4 !important; font-size: 13px !important; line-height: 1.38 !important; width: auto !important; max-width: none !important; margin: 0 0 8px !important; }
  #create .create-description .copy-line { display: inline !important; }
  #create .create-offer { max-width: none !important; grid-column: 1 / -1 !important; grid-row: 5 !important; font-size: 13px !important; line-height: 1.3 !important; margin: 0 !important; align-self: start !important; }
  #create .create-intro .mobile-create-accent { grid-column: 2 !important; grid-row: 1 / span 3 !important; position: static !important; width: 100% !important; height: auto !important; right: auto !important; bottom: auto !important; top: auto !important; left: auto !important; align-self: center !important; }
  #create .create-intro .btn { grid-column: 1 / -1 !important; grid-row: 6 !important; justify-self: start !important; min-height: 44px !important; height: 44px !important; margin: 14px 0 0 !important; font-size: 11px !important; letter-spacing: .06em !important; }

  /* 5 / New Arrivals: four products on mobile (the first four of the existing list order) */
  #arrivals { padding: 14px 0 20px !important; }
  #arrivals .section-head { margin-bottom: 8px !important; }
  #arrivals #arrivals-title { font-size: 40px !important; line-height: 1 !important; margin: 0 0 2px !important; }
  #arrivals .product-grid { gap: 14px 12px !important; }
  /* curated mobile assortment: Dirty Dollar, Floral Portrait, Moonlit Lagoon, Space Swimmer (4th card, Mildly Feral, hidden on mobile homepage only) */
  #arrivals .product-grid > a.product-card:nth-of-type(4) { display: none !important; }

  /* 6 / Gifts banner */
  main > .home-gift.layout-shell { padding: 18px 18px 18px !important; margin: 12px auto 24px !important; }
  .home-gift h2 { font-size: 36px !important; }
  .home-gift-body { margin-top: 10px !important; font-size: 15px !important; line-height: 1.45 !important; }
  .home-gift-photo { margin-top: 14px !important; }
  .home-gift .btn { width: auto !important; align-self: center !important; min-height: 0 !important; height: 36px !important; margin: 20px 0 4px !important; padding: 0 22px !important; font-size: 12px !important; letter-spacing: .06em !important; }

  /* 7 / Technodelic Originals */
  .originals-section { margin: 4px 20px 24px !important; height: 216px !important; }
  .originals-content h2 { font-size: 36px !important; line-height: .9 !important; }
  .originals-content .btn { padding: 0 22px !important; min-height: 0 !important; height: 36px !important; margin: 0 !important; font-size: 12px !important; font-weight: 700 !important; letter-spacing: .06em !important; border-radius: 7px !important; }
  /* deliberate mobile-only line break: "Make it / one of a kind." and hero supporting copy */
  .hero-copy-mbr, .home-gift-mbr { display: inline !important; }

  /* 8 / Footer */
  .tt-footer { padding: 24px 0 10px !important; }
  .tt-footer-primary { gap: 0 18px !important; }
  .tt-footer-primary a { font-size: 11px !important; letter-spacing: .06em !important; padding: 0 !important; min-height: 44px !important; height: 44px !important; display: flex !important; align-items: center !important; text-transform: uppercase !important; }
}