/*
Theme Name: AMB Walk'n Talk
Theme URI: https://www.ambwalkntalk.com.pk
Author: AMB Walk'n Talk
Description: WooCommerce storefront for AMB Walk'n Talk — premium audio and power accessories. A direct conversion of the AMB static site: same hero slider, category tiles, bento grid, cart drawer and product cards, now driven by WordPress and WooCommerce.
Version: 1.0.0
Requires at least: 6.0
Tested up to: 6.7
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: amb-walkntalk
Tags: e-commerce, custom-menu, featured-images, translation-ready
WC requires at least: 7.0
WC tested up to: 9.4
*/

/*
 * This file exists because WordPress requires it for the theme header above.
 * The actual design lives in assets/css/style.css — an unmodified copy of the
 * static site's stylesheet — plus assets/css/woocommerce.css for the parts
 * WooCommerce adds (cart page, checkout, notices, pagination, variation pills).
 * Both are enqueued in inc/enqueue.php. Keeping the original stylesheet
 * byte-identical means any visual difference from the static site is a
 * template bug, never a stylesheet drift.
 *
 * Deliberate overrides go here, below, because this file is enqueued last.
 */

/* ---------------------------------------------------------------------------
 * Category tiles: no circle behind the icon.
 *
 * The static site drew a white disc here — background, hairline border and a
 * drop shadow — and each icon PNG had a grey disc painted into the artwork on
 * top of that, so the tiles read as two stacked circles.
 *
 * This removes the CSS one. The grey disc was cut out of all eight PNGs
 * separately (see WORDPRESS_SETUP.md); they are now transparent, trimmed to
 * the product and centred on a 512px square, which is why the products render
 * larger here than they used to.
 * ------------------------------------------------------------------------ */
.cat-tile__icon {
  background: transparent;
  border: 0;
  box-shadow: none;
}

.cat-tile:hover .cat-tile__icon {
  border-color: transparent;
  box-shadow: none;
}

/* Bigger product art. With the circle gone the icons can carry more size, and
   the tightened gap is what keeps all eight on one row inside the 1152px
   content width instead of pushing the last one into a scroll. */
.cat-tiles {
  gap: clamp(10px, 1.2vw, 16px);
}

/* 8 x 127 + 7 gaps of 16 + the row's own 20px of padding = 1148, which fits
   the 1152px content width with 4px to spare. Any wider and the eighth tile
   spills into a scroll. */
.cat-tile {
  width: clamp(104px, 10vw, 127px);
}

.cat-tile__icon {
  width: clamp(96px, 9.2vw, 123px);
  height: clamp(96px, 9.2vw, 123px);
}

/* object-fit:cover on a square icon in a square box crops nothing, but
   `contain` is the honest choice now that the art is trimmed to the product. */
.cat-tile__icon img {
  object-fit: contain;
}

.cat-tile__label {
  font-size: 13.5px;
}

/* The banner now sits under the tiles, so it needs its own breathing room
   above rather than inheriting the gap that used to sit under the hero. */
.azadi-banner {
  margin-top: clamp(20px, 3vw, 36px);
}

/* ===========================================================================
 * APPLE TYPE & SPACING
 *
 * Typography and rhythm only — every component keeps the shape it already had.
 * The three moves that make type read as Apple's:
 *
 *   1. Semibold headlines, not bold. Apple sets display type at 600; 700 at
 *      60px reads heavy and slightly cramped.
 *   2. Looser tracking than the original. -.04em is tighter than Apple ever
 *      goes; they sit near -.022em and let the size do the work.
 *   3. Bigger, airier body copy. Apple's floor is 17px at 1.47 line-height —
 *      the original's 15.5px at default leading is the single biggest thing
 *      that made the page feel unlike Apple.
 *
 * Plus considerably more space between sections, which is the other half of it.
 *
 * None of these selectors is redefined inside a media query in the base
 * stylesheet, so overriding them unscoped here is safe.
 * ======================================================================== */

h1, h2, h3, h4 {
  font-weight: 600;
  letter-spacing: -.022em;
  line-height: 1.08;
}

.section__title {
  font-size: clamp(34px, 5.2vw, 64px);
  font-weight: 600;
  letter-spacing: -.022em;
  line-height: 1.07;
  margin: 14px 0 20px;
}

/* Still an eyebrow, just not shouting: Apple keeps small caps close-set. */
.eyebrow {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .1em;
}

.lead {
  font-size: clamp(17px, 1.7vw, 21px);
  line-height: 1.47;
  letter-spacing: -.01em;
  max-width: 62ch;
}

/* Apple's vertical rhythm is the loudest signal of all — sections breathe. */
.section {
  padding-block: clamp(88px, 12vh, 160px);
}

.section__head {
  margin-bottom: clamp(44px, 6vw, 80px);
}

.cta,
.azadi {
  padding-block: clamp(80px, 11vh, 132px);
}

/* ---------------------------------------------------------------------------
 * Sale cues, softened.
 *
 * Kept — the Azadi sale is live and the discount has to be visible — but
 * restated in Apple's register: neutral grey instead of alarm red, one weight
 * lighter, and the badge no longer casting a heavy shadow. The saving still
 * reads at a glance; it just stops shouting over the product name.
 * ------------------------------------------------------------------------ */

/* .fcard__off and .fcard__was are set once, in the Featured card block further
   down this file — a second rule here would only be overridden by it. */

.price__original {
  color: var(--text-3);
  font-weight: 400;
}

.card__sale {
  width: 17%;
  min-width: 56px;
  max-width: 96px;
}

.card__sale img {
  filter: drop-shadow(0 2px 5px rgba(14, 17, 20, .14));
}

/* ===========================================================================
 * MOTION
 *
 * Driven by assets/js/motion.js. The masked line reveal is the effect that
 * carries most of the weight: each rendered line sits in its own overflow
 * clip, and the inner span slides up out of it. Because the mask is a real
 * clip rather than a fade, the text appears to rise from behind the line
 * above, which is what makes it read as deliberate rather than as a generic
 * fade-in.
 *
 * Everything degrades to plain static text: without JS the split never
 * happens, and under prefers-reduced-motion the transitions are removed while
 * the content stays in its final position.
 * ======================================================================== */

/* Each unit is a word, or a whole .chrome phrase. The outer span is the mask,
   the inner one is what travels. Words on the same rendered line share a
   transition-delay, so they rise together as a line. */
.amb-split .amb-w {
  display: inline-block;
  overflow: hidden;
  vertical-align: bottom;
  /* Descenders (g, y, p) would otherwise be shaved off by the overflow. */
  padding-bottom: .14em;
  margin-bottom: -.14em;
}

.amb-split .amb-w__i {
  display: inline-block;
  transform: translate3d(0, 108%, 0);
  opacity: 0;
  will-change: transform;
  transition:
    transform 1.05s cubic-bezier(.16, 1, .3, 1),
    opacity .7s cubic-bezier(.16, 1, .3, 1);
}

.amb-split.is-revealed .amb-w__i {
  transform: translate3d(0, 0, 0);
  opacity: 1;
}

.amb-parallax {
  transform: translate3d(0, var(--amb-shift, 0), 0);
  will-change: transform;
}

/* The card media already animates on hover; the two must not fight. */
.fcard:hover .fcard__media img.amb-parallax {
  transform: translate3d(0, var(--amb-shift, 0), 0) scale(1.04);
}

@media (prefers-reduced-motion: reduce) {
  .amb-split .amb-w__i {
    transform: none;
    opacity: 1;
    transition: none;
  }
  .amb-parallax {
    transform: none;
  }
}

/* ---------------------------------------------------------------------------
 * Hero slider.
 *
 * The 2025 banners are 3000x1154 (2.6:1), not the 16:9 the first set used, so
 * the viewport ratio has to follow or `cover` would crop the artwork — and
 * these banners carry their own typography, which must never be cut.
 *
 * The frame is also inset from the viewport edges and rounded, so the banner
 * reads as a card sitting on the page rather than a full-bleed strip.
 * ------------------------------------------------------------------------ */

.hero {
  padding-inline: clamp(10px, 2vw, 28px);
  padding-bottom: clamp(10px, 2vw, 24px);
}

#hero .slider {
  border-radius: clamp(14px, 1.6vw, 26px);
}

/* Scoped to 861px and up on purpose. Below that the base stylesheet tightens
   the frame to 4:3 and draws the caption as real text, because the artwork's
   own headline is only a few pixels tall at phone width. This file loads after
   that one, so an unscoped rule here would out-rank the media query and leave
   phones with an unreadable 2.6:1 strip. */
@media (min-width: 861px) {
  /* Matches the supplied artwork exactly: 3000 / 1154. */
  .slider__viewport { aspect-ratio: 3000 / 1154; }
}

@supports not (aspect-ratio: 1 / 1) {
  @media (min-width: 861px) {
    .slider__viewport { height: 38.5vw; }
  }
}

/* ---------------------------------------------------------------------------
 * Featured cards.
 *
 * A taller card than the category grid uses: the product sits on its own light
 * panel with the tag over it, then name and discount, the feature line, colour
 * swatches and rating, and finally the price pair beside the buy button.
 *
 * Accent colours are AMB's own green rather than the reference's maroon and
 * violet, so the section still reads as this brand. Only the discount stays
 * red, which is the one colour a shopper reads as "less than it was".
 * ------------------------------------------------------------------------ */

/* Four across, as the reference lays them out. The section's banner is a
   full-width block below the grid, not a column beside it, so widening the
   grid costs the banner nothing. Back to two up on tablets, which is what the
   original grid did at every size. */
.showcase__grid {
  grid-template-columns: repeat(4, 1fr);
}

@media (max-width: 1100px) {
  .showcase__grid { grid-template-columns: repeat(2, 1fr); }
}

.showcase__grid .fcard {
  display: flex;
  flex-direction: column;
  background: var(--bg-2);
  border: 1px solid var(--line);
  border-radius: 20px;
  padding: 10px 10px 20px;
  box-shadow: var(--shadow-sm);
  transition: transform .35s var(--ease), box-shadow .35s var(--ease);
}

.showcase__grid .fcard:hover {
  box-shadow: var(--shadow);
}

/* A grey panel, not near-white: it separates the product from the card and
   stops pale products (the white power bank, the silver cables) dissolving
   into the background. */
.fcard__media {
  position: relative;
  display: block;
  aspect-ratio: 1 / 1;
  border-radius: 12px;
  background: #d9dadc;
  overflow: hidden;
}

/* The photos are normalised by inked area and already carry their own margin,
   so the padding here is minimal — the product is meant to fill the panel. */
.fcard__media img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  padding: 2%;
  transition: transform .5s var(--ease);
}

.fcard:hover .fcard__media img {
  transform: scale(1.04);
}

.fcard__eyebrow {
  position: absolute;
  z-index: 2;
  top: 14px;
  left: 16px;
  right: 16px;
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--green-light);
}

.fcard__eyebrow--new {
  color: var(--green);
}

.fcard__body {
  display: flex;
  flex-direction: column;
  flex: 1;
  padding: 18px 8px 0;
}

.fcard__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
}

/* Two lines, then ellipsis. AMB model names run long ("EC-107 — 30W
   High-Performance") and at four-up they were wrapping to three lines, which
   left every card a different height above the fold. */
.fcard__name {
  margin: 0;
  font-size: clamp(15px, 1.25vw, 19px);
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: -.01em;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.fcard__name a {
  color: var(--text);
  text-decoration: none;
}

.fcard__name a:hover {
  color: var(--green-light);
}

/* An outlined pill rather than loose red text: it reads as a badge, and the
   outline carries the emphasis so the fill never shouts over the product name.
   Sits on its own line above the price, as in the reference. */
.fcard__off {
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  padding: 4px 11px;
  border: 1.5px solid #c81e1e;
  border-radius: 999px;
  color: #c81e1e;
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: .01em;
  white-space: nowrap;
}

/* Rating rides in the top-right of the photo panel, opposite the tag. */
.fcard__rating--float {
  position: absolute;
  z-index: 2;
  top: 12px;
  right: 14px;
  gap: 4px;
  padding: 3px 9px 3px 7px;
  border-radius: 999px;
  background: rgba(255, 255, 255, .9);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  font-size: 13px;
}

/* A hairline between the description and the buying details, as the reference
   has — it separates "what it is" from "what it costs". */
.fcard__rule {
  height: 1px;
  margin: 14px 0 0;
  background: var(--line);
}

/* Also two lines, for the same reason — and min-height reserves the second
   line so a one-line description does not pull its card's price row up out of
   line with the rest of the row. */
.fcard__sub {
  margin: 8px 0 0;
  color: var(--text-3);
  font-size: clamp(13px, 1.05vw, 15px);
  line-height: 1.4;
  min-height: calc(2 * 1.4em);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.fcard__meta {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 14px;
}

.fcard__swatch-label {
  color: var(--text-2);
  font-size: 13px;
  font-weight: 600;
}

/* Price column: discount pill on its own line, then the prices. */
.fcard__prices {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 7px;
  min-width: 0;
}

.fcard__price-line {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 8px;
}

.fcard__buy--out {
  background: var(--surface-2);
  color: var(--text-3);
  cursor: not-allowed;
}

.fcard__buy--out:hover {
  background: var(--surface-2);
  transform: none;
}

.fcard__swatches {
  display: flex;
  align-items: center;
  gap: 8px;
}

.fcard__swatch {
  width: 17px;
  height: 17px;
  border-radius: 50%;
  border: 1px solid var(--line-strong);
}

/* The ring marks the finish the card's photo is showing. */
.fcard__swatch.is-first {
  box-shadow: 0 0 0 2px var(--bg-2), 0 0 0 3px var(--text);
}

.fcard__more {
  color: var(--text-3);
  font-size: 13px;
  font-weight: 600;
}

.fcard__rating {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 15px;
  font-weight: 700;
  color: var(--text);
}

/* margin-top:auto pins the price row to the bottom, so cards of differing
   description length still line their buttons up across the row. */
.fcard__foot {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 12px;
  margin-top: auto;
  padding-top: 20px;
}

/* Both prices are nowrap: at four-up the card is ~237px, and letting
   "PKR 4,945" break after the currency put the amount on its own line. */
.fcard__was {
  display: block;
  color: var(--text-3);
  font-size: 13px;
  white-space: nowrap;
  text-decoration: line-through;
}

.fcard__now {
  display: block;
  font-size: clamp(16px, 1.35vw, 22px);
  font-weight: 700;
  letter-spacing: -.02em;
  white-space: nowrap;
  color: var(--text);
}

.fcard__now--tbd {
  font-size: 15px;
  font-weight: 600;
  color: var(--text-2);
}

.fcard__buy {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 12px clamp(16px, 1.5vw, 24px);
  border-radius: 999px;
  background: var(--green);
  color: #fff;
  font-size: clamp(13px, 1.1vw, 15px);
  font-weight: 700;
  text-decoration: none;
  white-space: nowrap;
  transition: background .25s var(--ease), transform .25s var(--ease);
}

.fcard__buy:hover {
  background: var(--green-dark);
  transform: translateY(-1px);
}

@media (max-width: 560px) {
  .fcard__foot {
    flex-direction: column;
    align-items: stretch;
    gap: 12px;
  }
  .fcard__buy {
    width: 100%;
  }
}