/* Product cards, option I "Huawei Store": after the offer cards on
   consumer.huawei.com/fr/offer -- a light grey page, section headings in a
   violet-to-orange gradient, white cards with a 16px radius and a faint
   shadow, a big bold name and a medium subtitle at the top, the picture
   filling the middle, and a bottom row with small text on the left and a
   compact black button on the right. The first card is black, as Huawei leads
   its row with a dark card. Huawei's font is HarmonyHeiTi; Manrope is the web
   font they fall back to, loaded here from Google Fonts.
   Drop-in replacement for /local/product-cards/product-cards.css, same markup.
   The SVG filter #pc-inset-shadow is no longer used. */
@import url("https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;700;800&display=swap");

/* ---- The section: Huawei's light grey instead of the dark gradient band,
   and the Extensions | Services switch as a gradient heading. Remove this
   block to keep the dark band; the white cards work on it too. ---- */
body.body--home .wrap--main { background:#f5f5f5; padding-top:24px; padding-bottom:64px; }
.main-tabs { justify-content:flex-start; gap:4px 28px; margin:24px 0 0; }
.main-tab { flex:0 0 auto; padding:0; background:none; color:#9a9a9a; text-align:left; }
.main-tab:hover { color:#000; text-decoration:none; opacity:1; }
.main-tab__name {
    font-family:"HarmonyHeiTi", "Manrope", "Noto Sans", Arial, sans-serif;
    font-size:28px; line-height:36px; font-weight:700; letter-spacing:0; text-transform:lowercase;
}
.main-tab__name::first-letter { text-transform:uppercase; }
.main-tab.is-active { opacity:1; }
.main-tab.is-active .main-tab__name {
    background:linear-gradient(to right, #808dff, #fe5b3a);
    -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; color:transparent;
}

.pc-grid { display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); gap:20px; margin-top:24px; }
.pc-grid--pair { grid-template-columns:repeat(2, minmax(0, 1fr)); max-width:880px; margin-left:0; margin-right:auto; }

.pc-card {
    --pc-arrow:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M2 8h11M8.5 3.5 13 8l-4.5 4.5' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    position:relative;
    display:grid; grid-row:span 5; grid-template-rows:subgrid;
    grid-template-columns:minmax(0, 1fr) max-content; gap:0 16px;
    min-width:0; padding:32px 22px 22px; overflow:hidden;
    border-radius:16px; background:#fff; color:#000; text-decoration:none;
    font-family:"HarmonyHeiTi", "Manrope", "Noto Sans", Arial, sans-serif;
    box-shadow:0 0 6px rgba(0,0,0,.06);
    transition:box-shadow .4s ease, transform .4s ease;
}
/* Opacity is pinned so no site-wide link hover rule can fade the card. */
.pc-card:hover, .pc-card:focus-visible { color:#000; opacity:1; }
.pc-card:hover { box-shadow:0 10px 30px rgba(0,0,0,.10); transform:translateY(-2px); }
.pc-card:focus-visible { outline:2px solid #000; outline-offset:3px; }

/* Five subgrid rows -- number, name, subtitle, picture, bottom row -- keep each
   part level across a row of cards. The bottom row holds the points on the
   left and the button on the right, as Huawei sets price and "Acheter". */
.pc-card > * { grid-column:1 / -1; min-width:0; }
.pc-card > .pc-card__head { grid-row:1; }
.pc-card > .pc-card__title { grid-row:2; grid-column:1; }
.pc-card > .pc-card__price { grid-row:2; grid-column:2; place-self:center end; }
.pc-card:not(:has(.pc-card__price)) > .pc-card__title { grid-column:1 / -1; }
.pc-card > .pc-card__sub { grid-row:3; }
.pc-card > .pc-card__media { grid-row:4; }
.pc-card > .pc-card__list { grid-row:5; grid-column:1; align-self:end; }
.pc-card > .pc-card__cta { grid-row:5; grid-column:2; align-self:end; justify-self:end; }

.pc-card__head { display:flex; align-items:center; gap:8px; min-height:18px; margin:0 0 8px; }
.pc-card__num { color:#8a8a8a; font-size:12px; line-height:16px; font-weight:700; letter-spacing:.06em; }
.pc-card__apps { display:flex; gap:5px; }
.pc-card__apps img { display:block; width:18px; height:18px; border-radius:4px; }

/* Template overrides: the site stylesheet sets its own font, colour and size on
   headings and draws a dot before every list item. */
.pc-card .pc-card__title {
    margin:0; padding:0; color:inherit;
    font-family:"HarmonyHeiTi", "Manrope", "Noto Sans", Arial, sans-serif !important;
    font-size:26px; line-height:1.3; font-weight:700; letter-spacing:0;
}
.pc-card__price { color:inherit; font-size:14px; line-height:1.3; font-weight:700; white-space:nowrap; font-variant-numeric:tabular-nums; }
.pc-card .pc-card__sub {
    display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:2; line-clamp:2; overflow:hidden;
    margin:6px 0 0; color:inherit; font-size:18px; line-height:1.3; font-weight:500;
}
.pc-card .pc-card__list { margin:0; padding:0; list-style:none; }
.pc-card .pc-card__list li { margin:0; padding:0; color:inherit; font-size:12px; line-height:1.45; font-weight:500; }
.pc-card .pc-card__list li::before, .pc-card .pc-card__list li::after { content:none; display:none; }

/* The picture fills the middle of the card and zooms in slowly on hover. */
.pc-card__media { position:relative; display:block; aspect-ratio:1; margin:18px -6px 16px; }
.pc-card__media::before {
    content:""; position:absolute; inset:0;
    background:var(--pc-img) center / contain no-repeat;
    transition:transform .6s ease;
}
.pc-card:hover .pc-card__media::before, .pc-card:focus-visible .pc-card__media::before { transform:scale(1.05); }

/* Learn More: Huawei's compact black button. */
.pc-card__cta {
    display:inline-flex; align-items:center; gap:6px;
    height:32px; padding:0 20px; border-radius:8px;
    background:#000; color:#fff; font-size:13px; line-height:1; font-weight:700; white-space:nowrap;
    transition:background-color .3s;
}
.pc-card:hover .pc-card__cta, .pc-card:focus-visible .pc-card__cta { background:#333; }

/* The first card of each row in black, with a white button. The pictures are
   dark line drawings, so here they sit on a white panel of their own. */
.pc-grid > .pc-card:first-child { background:linear-gradient(180deg, #000 55%, #1b2240 100%); color:#fff; }
.pc-grid > .pc-card:first-child:hover { color:#fff; }
.pc-grid > .pc-card:first-child .pc-card__num { color:rgba(255,255,255,.6); }
.pc-grid > .pc-card:first-child .pc-card__media { margin-left:0; margin-right:0; border-radius:12px; background:#fff; overflow:hidden; }
.pc-grid > .pc-card:first-child .pc-card__media::before { inset:8px; }
.pc-grid > .pc-card:first-child .pc-card__cta { background:#fff; color:#000; }
.pc-grid > .pc-card:first-child:hover .pc-card__cta { background:#e6e6e6; }

@media (max-width:1100px) {
    .pc-grid { grid-template-columns:repeat(2, minmax(0, 1fr)); }
}
@media (max-width:640px) {
    .pc-grid, .pc-grid--pair { grid-template-columns:1fr; gap:16px; margin-top:16px; }
    .pc-card { padding:26px 18px 18px; }
    .pc-card .pc-card__title { font-size:24px; }
    .pc-card .pc-card__sub { font-size:16px; }
    body.body--home .wrap--main { padding-top:8px; padding-bottom:32px; }
}
@media (prefers-reduced-motion:reduce) {
    .pc-card, .pc-card__media::before, .pc-card__cta { transition:none; }
    .pc-card:hover { transform:none; }
}