/* Seller Photo Guide. Tokens are page-scoped; shared brand colors stay on :root. */

.fmm-pguide,
.fmm-sguide {
    --fmm-pguide-gap: 16px;
    --fmm-pguide-gap-lg: 28px;
    --fmm-pguide-radius: 20px;
    --fmm-pguide-radius-sm: 14px;
    --fmm-pguide-pad: 22px;
    --fmm-pguide-title: 40px;
    --fmm-pguide-title-line: 48px;
    --fmm-pguide-card-title: 18px;
    --fmm-pguide-body: 14px;
    --fmm-pguide-badge: 28px;
    --fmm-pguide-card: #FAF9F6;
    --fmm-pguide-card-line: #F3F4F6;
    --fmm-pguide-danger: #E8543E;
    --fmm-pguide-danger-soft: #FDECEA;
    --fmm-pguide-mark: #FFBE2E;
    --fmm-pguide-on-dark: #fff;
    --fmm-pguide-do-text: #374151;
    --fmm-pguide-dont-text: #374151;
    --fmm-pguide-hero-min: 280px;
    --fmm-pguide-stack: 900px;
    --fmm-sguide-width: 1230px;
    --fmm-sguide-flaw-x: 58%;
    --fmm-sguide-flaw-y: 62%;
}

.fmm-pguide__title {
    margin: 0 0 8px;
    font-size: var(--fmm-pguide-title);
    line-height: var(--fmm-pguide-title-line);
    font-weight: 800;
    letter-spacing: -0.03em;
    color: var(--fmm-text);
}

.fmm-pguide__intro {
    margin: 0 0 var(--fmm-pguide-gap-lg);
    max-width: 640px;
    color: var(--fmm-muted);
    font-size: 16px;
    line-height: 1.5;
}

.fmm-pguide__hero {
    position: relative;
    display: grid;
    grid-template-columns: minmax(280px, 460px) minmax(0, 1fr);
    gap: var(--fmm-pguide-gap-lg);
    align-items: center;
    min-height: var(--fmm-pguide-hero-min);
    margin-bottom: var(--fmm-pguide-gap-lg);
    padding: 36px 40px;
    overflow: hidden;
    border-radius: 28px;
    background: var(--fmm-yellow);
    color: var(--fmm-dark);
}

.fmm-pguide__hero-copy { position: relative; z-index: 1; max-width: 460px; }

.fmm-pguide__pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 14px;
    padding: 4px 10px;
    border-radius: 999px;
    background: rgb(255 255 255 / 72%);
    color: var(--fmm-dark);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.fmm-pguide__pill img { width: 14px; height: 14px; }

.fmm-pguide__hero h2 {
    margin: 0 0 12px;
    font-size: 36px;
    line-height: 1.05;
    font-weight: 800;
    letter-spacing: -0.03em;
}

.fmm-pguide__hero p {
    margin: 0 0 18px;
    max-width: 420px;
    font-size: var(--fmm-pguide-body);
    line-height: 1.5;
}

.fmm-pguide__hero-art {
    position: absolute;
    inset: 0 0 0 38%;
    margin: 0;
}

.fmm-pguide__hero-art img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center right;
}

.fmm-pguide__cta {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 12px 18px;
    border-radius: 12px;
    background: var(--fmm-dark);
    color: var(--fmm-pguide-on-dark);
    font-size: 14px;
    font-weight: 700;
    text-decoration: none;
}

.fmm-pguide > .fmm-container { max-width: 1344px; padding-right: 0; padding-left: 0; }

.fmm-pguide__hero {
    min-height: 362px;
    padding: 32px;
    background: linear-gradient(90deg, #FBBF24 0%, #FDE68A 100%);
}

.fmm-pguide__hero-art {
    inset: 0;
    z-index: 0;
}

.fmm-pguide__hero-art::after {
    position: absolute;
    inset: 0;
    content: '';
    background: linear-gradient(90deg, rgb(255 190 46 / 96%) 0%, rgb(255 190 46 / 82%) 34%, rgb(255 190 46 / 24%) 63%, transparent 82%);
}

.fmm-pguide__hero-art img { object-position: center; }

.fmm-pguide__hero-copy { max-width: 500px; }

.fmm-pguide__cta:hover,
.fmm-pguide__cta:focus-visible { background: var(--fmm-text); }

.fmm-pguide__tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin: 0 0 22px;
    padding: 0;
    list-style: none;
}

.fmm-pguide__tab {
    border: 1px solid var(--fmm-border);
    border-radius: 999px;
    background: var(--fmm-bg);
    color: var(--fmm-text);
    padding: 8px 16px;
    font: inherit;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
}

.fmm-pguide__tab:hover,
.fmm-pguide__tab:focus-visible { border-color: var(--fmm-yellow); }

.fmm-pguide__tab.is-on {
    border-color: transparent;
    background: var(--fmm-yellow);
    color: var(--fmm-dark);
}

.fmm-pguide__angles-title {
    margin: 0 0 16px;
    font-size: 22px;
    line-height: 1.3;
    font-weight: 800;
}

.fmm-pguide__grid {
    display: grid;
    grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
    gap: var(--fmm-pguide-gap);
    align-items: start;
}

.fmm-pguide__category-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 16px;
    margin: 0;
}

.fmm-pguide__category-grid--phone {
    max-width: 1224px;
    margin: 0 auto;
}

.fmm-pguide__category-grid--phone .fmm-pguide__shot img {
    height: 328px;
    max-height: 328px;
    object-fit: fill;
}

.fmm-pguide__category-grid--laptop {
    max-width: 1224px;
    margin: 0 auto;
}

.fmm-pguide__category-grid--laptop .fmm-pguide__shot img {
    height: 328px;
    max-height: 328px;
    object-fit: cover;
    object-position: center;
}

.fmm-pguide__category-grid--laptop .fmm-pguide__shot:nth-child(4) img {
    object-fit: contain;
    background: #F3F4F6;
}

.fmm-pguide__category-grid--watch {
    max-width: 1224px;
    margin: 0 auto;
}

.fmm-pguide__category-grid--watch .fmm-pguide__shot img {
    height: 328px;
    max-height: 328px;
    object-fit: cover;
    object-position: center;
}

.fmm-pguide__category-grid--skincare {
    max-width: 1224px;
    margin: 0 auto;
}

.fmm-pguide__category-grid--skincare .fmm-pguide__shot img {
    height: 328px;
    max-height: 328px;
    object-fit: cover;
    object-position: center;
}

.fmm-pguide__category-grid--home-kitchen {
    max-width: 1224px;
    margin: 0 auto;
}

.fmm-pguide__category-grid--home-kitchen .fmm-pguide__shot img {
    height: 328px;
    max-height: 328px;
    object-fit: cover;
    object-position: center;
}

.fmm-pguide__category-grid--phone .fmm-pguide__shot:nth-child(1) img,
.fmm-pguide__category-grid--phone .fmm-pguide__shot:nth-child(2) img,
.fmm-pguide__category-grid--phone .fmm-pguide__shot:nth-child(4) img,
.fmm-pguide__category-grid--phone .fmm-pguide__shot:nth-child(5) img {
    object-fit: contain;
    background: #F3F4F6;
}

/* The bag reference uses image-first tiles: captions sit below the frame and
   the frame itself carries the thin Figma border. */
.fmm-pguide__category-grid .fmm-pguide__shot {
    padding: 0;
    border: 0;
    background: transparent;
}

.fmm-pguide__category-grid .fmm-pguide__frame {
    display: block;
    border: 1px solid #E8E8E5 !important;
    border-radius: 10px;
    overflow: hidden;
}

.fmm-pguide__category-grid--embedded-badges .fmm-pguide__shot img {
    object-fit: cover;
    width: 100%;
    height: auto;
    object-position: center;
    background: transparent;
}

.fmm-pguide__category-grid .fmm-pguide__shot figcaption { padding: 10px 0 8px; }

.fmm-pguide__category-grid .fmm-pguide__shot h3 {
    margin-bottom: 4px;
    color: #111111;
    font-size: 14px;
}


.fmm-pguide__category-grid .fmm-pguide__num { top: 12px; left: 12px; }

.fmm-pguide__category-panel--sneakers .fmm-pguide__angles-title {
    max-width: 1344px;
    margin: 0 0 16px;
}

.fmm-pguide__category-grid--sneakers {
    max-width: 1344px;
    gap: 16px;
}

.fmm-pguide__category-grid--sneakers .fmm-pguide__frame {
    border: 1px solid #E8E8E5 !important;
}

.fmm-pguide__category-grid--sneakers .fmm-pguide__shot img {
    height: 328px;
    object-fit: cover;
    object-position: center;
    border-radius: 10px;
    background: #F3F4F6;
}

.fmm-pguide__category-grid--sneakers .fmm-pguide__shot figcaption { padding: 10px 0 8px; }
.fmm-pguide__category-grid--sneakers .fmm-pguide__num {
    top: 12px;
    left: 12px;
    width: 30px;
    height: 30px;
    background: #FFBE2E;
    color: #111111;
}

.fmm-pguide__stack { display: grid; gap: var(--fmm-pguide-gap); }

.fmm-pguide__shot {
    margin: 0;
    padding: 12px;
    border: 1px solid var(--fmm-pguide-card-line);
    border-radius: var(--fmm-pguide-radius);
    background: var(--fmm-bg);
}

.fmm-pguide__shot img {
    display: block;
    width: 100%;
    height: 280px;
    object-fit: cover;
   border: none !important;
    background: var(--fmm-bg-alt);
}

.fmm-pguide__shot--wide img { height: 520px; }

.fmm-pguide__frame {
    position: relative;
}

.fmm-pguide__num {
    position: absolute;
    top: 12px;
    left: 12px;
    display: grid;
    place-items: center;
    width: var(--fmm-pguide-badge);
    height: var(--fmm-pguide-badge);
    border-radius: 50%;
    background: var(--fmm-yellow);
    color: var(--fmm-dark);
    font-size: 13px;
    font-weight: 800;
}

.fmm-pguide__shot figcaption { padding: 12px 4px 4px; }

.fmm-pguide__shot h3,
.fmm-sguide h3 {
    margin: 0 0 4px;
    font-size: var(--fmm-pguide-card-title);
    line-height: 1.3;
    font-weight: 800;
}

.fmm-pguide__shot p,
.fmm-sguide__card p {
    margin: 0;
    color: var(--fmm-muted);
    font-size: var(--fmm-pguide-body);
    line-height: 1.45;
}

.fmm-pguide__empty {
    margin: 0;
    padding: var(--fmm-pguide-pad);
    border: 1px dashed var(--fmm-border);
    border-radius: var(--fmm-pguide-radius);
    color: var(--fmm-muted);
}

.fmm-sguide { max-width: var(--fmm-sguide-width); margin: 0 auto 28px; }

.fmm-sguide__head { text-align: center; margin-bottom: 32px; }

.fmm-sguide__badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 16px;
    padding: 6px 14px;
    border-radius: 999px;
    background: var(--fmm-pguide-mark);
    color: var(--fmm-dark);
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.fmm-sguide__badge img { width: 14px; height: 14px; }

.fmm-sguide__head h1 {
    margin: 0 0 12px;
    font-size: var(--fmm-pguide-title);
    line-height: 1.1;
    font-weight: 800;
    letter-spacing: -0.03em;
}

.fmm-sguide__head h1 mark {
    background: linear-gradient(transparent 62%, var(--fmm-pguide-mark) 62%);
    color: inherit;
}

.fmm-sguide__head p {
    margin: 0 auto;
    max-width: 560px;
    color: var(--fmm-muted);
    font-size: 16px;
    line-height: 1.5;
}

.fmm-sguide__grid {
    display: grid;
    grid-template-columns: minmax(0, 1.45fr) minmax(340px, 1fr);
    gap: 24px;
    align-items: start;
}

.fmm-sguide__daylight { grid-column: 1; grid-row: 1; }
.fmm-sguide__trust-card { grid-column: 2; grid-row: 1; }
.fmm-sguide__angles-card { grid-column: 1; grid-row: 2; }
.fmm-sguide__rail { grid-column: 2; grid-row: 2 / span 2; }
.fmm-sguide__pair { grid-column: 1; grid-row: 3; }
.fmm-sguide__pack-card { grid-column: 1; grid-row: 4; }
.fmm-sguide__fill { grid-column: 2; grid-row: 4; }

.fmm-sguide__card {
    padding: 16px;
    border: 1px solid var(--fmm-pguide-card-line);
    border-radius: 24px;
    background: var(--fmm-pguide-card);
}

.fmm-sguide__card h2,
.fmm-sguide__card h3 { margin: 0 0 8px; }

.fmm-sguide__split { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }

.fmm-sguide__trust {
    padding: 32px;
    border-radius: 24px;
    background:
        radial-gradient(circle at 92% 0%, rgb(255 190 46 / 28%), transparent 36%),
        #1A1A1A;
    color: var(--fmm-pguide-on-dark);
}

.fmm-sguide__shield {
    display: grid;
    place-items: center;
    width: 48px;
    height: 48px;
    margin-bottom: 22px;
    border-radius: 14px;
    background: var(--fmm-pguide-mark);
    color: #1A1A1A;
}

.fmm-sguide__kicker {
    margin: 0 0 10px;
    color: var(--fmm-pguide-mark);
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.fmm-sguide__trust h2 {
    margin: 0 0 10px;
    font-size: 24px;
    line-height: 1.25;
    font-weight: 800;
}

.fmm-sguide__trust p { margin: 0 0 20px; color: rgb(255 255 255 / 78%); font-size: 14px; line-height: 1.5; }

.fmm-sguide__trust img.fmm-sguide__bag {
    display: block;
    width: min(226px, 70%);
    margin: 0 auto 20px;
}

.fmm-sguide__stat {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0;
    padding-top: 14px;
    border-top: 1px solid rgb(255 255 255 / 14%);
    color: rgb(255 255 255 / 88%);
    font-size: 13px;
    font-weight: 600;
}

.fmm-sguide__avatars { display: flex; }

.fmm-sguide__avatars img {
    width: 30px;
    height: 30px;
    margin-left: -8px;
    border: 2px solid #1A1A1A;
    border-radius: 50%;
    object-fit: cover;
}

.fmm-sguide__avatars img:first-child { margin-left: 0; }

.fmm-sguide__compare {
    position: relative;
    margin-top: 18px;
    overflow: hidden;
    border-radius: 16px;
    background: var(--fmm-bg);
    aspect-ratio: 16 / 10;
}

.fmm-sguide__compare img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.fmm-sguide__flag {
    position: absolute;
    top: 16px;
    z-index: 2;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 6px 10px;
    border: 0;
    border-radius: 999px;
    color: var(--fmm-pguide-on-dark);
    font-size: 12px;
    font-weight: 700;
}

.fmm-sguide__flag img,
.fmm-sguide__note img,
.fmm-sguide__handle img,
.fmm-sguide__check img,
.fmm-sguide__shield img {
    position: static;
    width: 12px;
    height: 12px;
    object-fit: contain;
}

/* The icon SVGs are intentionally monochrome. An external SVG loaded through
   <img> cannot inherit the parent currentColor, so invert only icons placed on
   the colored positive/negative badges. */
.fmm-sguide__flag img,
.fmm-sguide__note img,
.fmm-sguide__check img { filter: brightness(0) invert(1); }

.fmm-sguide__flag--avoid { left: 16px; background: var(--fmm-pguide-danger); }

.fmm-sguide__flag--good { right: 16px; background: #1E9E5A; }

.fmm-sguide__range {
    position: absolute;
    inset: 0;
    z-index: 3;
    width: 100%;
    margin: 0;
    opacity: 0;
    cursor: ew-resize;
}

.fmm-sguide__handle {
    position: absolute;
    top: 0;
    bottom: 0;
    z-index: 2;
    width: 4px;
    background: var(--fmm-pguide-on-dark);
    pointer-events: none;
}

.fmm-sguide__handle span {
    position: absolute;
    top: 50%;
    left: 50%;
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: var(--fmm-pguide-on-dark);
    color: #1A1A1A;
    box-shadow: var(--fmm-shadow);
    transform: translate(-50%, -50%);
}

.fmm-sguide__angle-head,
.fmm-sguide__check-head {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    align-items: baseline;
}

.fmm-sguide__count { color: var(--fmm-faint); font-size: 13px; white-space: nowrap; }

.fmm-sguide__angles {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 12px;
    margin-top: 18px;
}

.fmm-sguide__angle {
    position: relative;
    display: block;
    width: 100%;
    min-height: 44px;
    padding: 0;
    border: 0;
    border-radius: 12px;
    overflow: hidden;
    background: var(--fmm-bg);
    cursor: pointer;
}

.fmm-sguide__angle img { display: block; width: 100%; height: 172px; object-fit: cover; }

.fmm-sguide__angle .fmm-pguide__num { top: 8px; left: 8px; width: 26px; height: 26px; font-size: 11px; }

.fmm-sguide__angle:focus-visible { outline: 2px solid var(--fmm-pguide-mark); outline-offset: 2px; }

.fmm-sguide__tip {
    min-height: 1.2em;
    margin: 10px 0 0;
    color: var(--fmm-text);
    font-size: 13px;
    font-weight: 600;
}

.fmm-sguide__checks { display: grid; gap: 12px; margin-top: 18px; }

.fmm-sguide__check {
    display: flex;
    align-items: center;
    gap: 10px;
    min-height: 60px;
    margin: 0;
    padding: 12px 14px;
    border-radius: 12px;
    font-size: 14px;
    font-weight: 600;
}

.fmm-sguide__check i {
    display: grid;
    place-items: center;
    flex: 0 0 32px;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    color: var(--fmm-pguide-on-dark);
}

.fmm-sguide__check--do { background: #E8F7EF; color: var(--fmm-pguide-do-text); }
.fmm-sguide__check--do i { background: #1E9E5A; }
.fmm-sguide__check--dont { background: var(--fmm-pguide-danger-soft); color: var(--fmm-pguide-dont-text); }
.fmm-sguide__check--dont i { background: var(--fmm-pguide-danger); }

.fmm-sguide__media {
    position: relative;
    margin-top: 18px;
    overflow: hidden;
    border-radius: 16px;
    background: var(--fmm-bg);
}

.fmm-sguide__media > img { display: block; width: 100%; height: 194px; object-fit: cover; }

.fmm-sguide__flaw {
    position: absolute;
    left: var(--fmm-sguide-flaw-x);
    top: var(--fmm-sguide-flaw-y);
    width: 51px;
    height: 51px;
    border: 2px solid var(--fmm-pguide-danger);
    border-radius: 50%;
    transform: translate(-50%, -50%);
}

.fmm-sguide__note {
    position: absolute;
    left: 12px;
    bottom: 12px;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 5px 9px;
    border-radius: 999px;
    background: var(--fmm-pguide-danger);
    color: var(--fmm-pguide-on-dark);
    font-size: 12px;
    font-weight: 700;
}

.fmm-sguide__guide {
    position: absolute;
    inset: 12px;
    border: 1px solid rgb(255 255 255 / 86%);
    border-radius: 12px;
    pointer-events: none;
}

.fmm-sguide__corner {
    position: absolute;
    top: 12px;
    right: 12px;
    padding: 5px 9px;
    border-radius: 8px;
    background: rgb(255 255 255 / 92%);
    color: var(--fmm-text);
    font-size: 11px;
    font-weight: 700;
}

.fmm-sguide__pack img { height: auto; object-fit: contain; background: transparent; }

.fmm-sguide__fill {
    background: var(--fmm-pguide-mark);
    color: #1A1A1A;
}

.fmm-sguide__fill p { color: #1A1A1A; }

.fmm-sguide__stage {
    position: relative;
    margin-top: 18px;
    padding: 16px;
    border-radius: 16px;
    background: var(--fmm-bg);
}

.fmm-sguide__stage > img { display: block; width: 100%; height: 220px; object-fit: cover; object-position: center; }

.fmm-sguide__stage .fmm-sguide__flag--good { top: 12px; left: 12px; right: auto; }

.fmm-sguide__actions {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    margin-top: 18px;
}

.fmm-sguide__actions .fmm-btn { min-width: 160px; }

.fmm-pguide-link {
    display: inline-flex;
    margin-top: 6px;
    padding: 0;
    border: 0;
    background: none;
    color: var(--fmm-text);
    font: inherit;
    font-size: 13px;
    font-weight: 700;
    text-decoration: underline;
    text-underline-offset: 3px;
    cursor: pointer;
}

.fmm-pguide-link:hover,
.fmm-pguide-link:focus-visible { color: var(--fmm-yellow-dark); }

@media (max-width: 900px) {
    .fmm-pguide,
    .fmm-sguide { --fmm-pguide-title: 32px; }

    .fmm-pguide__hero,
    .fmm-pguide__grid,
    .fmm-pguide__category-grid,
    .fmm-sguide__grid,
    .fmm-sguide__split { grid-template-columns: 1fr; }

    .fmm-sguide__daylight,
    .fmm-sguide__trust-card,
    .fmm-sguide__angles-card,
    .fmm-sguide__rail,
    .fmm-sguide__pair,
    .fmm-sguide__pack-card,
    .fmm-sguide__fill { grid-column: auto; grid-row: auto; }

    .fmm-sguide__card,
    .fmm-sguide__trust { padding: 16px; border-radius: 24px; }
    .fmm-sguide__angles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .fmm-pguide__hero { padding: 24px; }
    .fmm-pguide__hero-art { position: relative; inset: auto; height: 180px; }
    .fmm-pguide__shot img,
    .fmm-pguide__shot--wide img,
    .fmm-pguide__category-grid .fmm-pguide__shot img { height: 220px; }
    .fmm-pguide__category-grid--sneakers {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
    .fmm-pguide__category-grid--sneakers .fmm-pguide__shot img { height: 240px; }
    .fmm-pguide__category-grid--embedded-badges .fmm-pguide__shot img { height: auto; }
    .fmm-pguide__category-grid--phone { max-width: none; }
    .fmm-pguide__category-grid--phone .fmm-pguide__shot img { height: auto; }
    .fmm-pguide__category-grid--laptop { max-width: none; }
    .fmm-pguide__category-grid--laptop .fmm-pguide__shot img { height: 220px; max-height: 220px; }
    .fmm-pguide__category-grid--watch { max-width: none; }
    .fmm-pguide__category-grid--watch .fmm-pguide__shot img { height: 220px; max-height: 220px; }
    .fmm-pguide__category-grid--skincare { max-width: none; }
    .fmm-pguide__category-grid--skincare .fmm-pguide__shot img { height: 220px; max-height: 220px; }
    .fmm-pguide__category-grid--home-kitchen { max-width: none; }
    .fmm-pguide__category-grid--home-kitchen .fmm-pguide__shot img { height: 220px; max-height: 220px; }
    .fmm-sguide__media > img,
    .fmm-sguide__stage > img,
    .fmm-sguide__angle img { height: auto; aspect-ratio: 1.55 / 1; }
    .fmm-sguide__pack img { aspect-ratio: auto; }
    .fmm-sguide__actions { flex-direction: column; }
    .fmm-sguide__actions .fmm-btn { width: 100%; }
}

@media (max-width: 600px) {
    .fmm-sguide__head { margin-bottom: 24px; }
    .fmm-sguide__card,
    .fmm-sguide__trust { padding: 14px; border-radius: 16px; }
    .fmm-sguide__angle-head { display: block; }
    .fmm-sguide__count { display: block; margin-top: 6px; }
    .fmm-sguide__angles { gap: 8px; }
    .fmm-sguide__angle img { aspect-ratio: 1 / 1; }
    .fmm-pguide__category-grid--sneakers { grid-template-columns: 1fr; }
    .fmm-pguide__category-grid--sneakers .fmm-pguide__shot img { height: 220px; }
    .fmm-sguide__check { min-height: 56px; font-size: 13px; }
}

/* Clothing requirements — the compact Figma composition. Keep the image frames
   tight so captions sit directly under the photos instead of inside padded cards. */
.fmm-pguide > .fmm-container {
    padding-right: 24px;
    padding-left: 12px;
}

#photo-requirements { padding-top: 6px; }

.fmm-pguide__tabs {
    gap: 7px;
    margin-bottom: 20px;
}

.fmm-pguide__tab {
    padding: 5px 7px;
    font-size: 10px;
    line-height: 14px;
}

.fmm-pguide__category-panel--clothing .fmm-pguide__angles-title {
    margin-bottom: 14px;
    font-size: 14px;
    line-height: 18px;
}

.fmm-pguide__grid--clothing {
    grid-template-columns: minmax(0, 1.42fr) minmax(0, 1fr);
    gap: 14px;
}

.fmm-pguide__grid--clothing .fmm-pguide__shot {
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
}

.fmm-pguide__grid--clothing .fmm-pguide__frame {
    display: block;
    overflow: hidden;
    border: 1px solid #E5E7EB;
    border-radius: 10px;
}

.fmm-pguide__grid--clothing .fmm-pguide__shot img {
    height: auto;
    aspect-ratio: 2.52 / 1;
    border: 0 !important;
    object-fit: cover;
}

.fmm-pguide__grid--clothing .fmm-pguide__shot--wide img {
    aspect-ratio: 1.55 / 1;
}

.fmm-pguide__grid--clothing .fmm-pguide__shot figcaption {
    padding: 8px 0 0;
}

.fmm-pguide__grid--clothing .fmm-pguide__shot h3 {
    margin-bottom: 2px;
}

/* Shared caption typography for every product category. */
.fmm-pguide__category-panel .fmm-pguide__shot h3 {
    font-family: "Inter", sans-serif;
    font-weight: 600;
    font-style: normal;
    font-size: 18px;
    line-height: 28px;
    letter-spacing: 0;
    vertical-align: middle;
}

.fmm-pguide__category-panel .fmm-pguide__shot p {
    font-family: "Inter", sans-serif;
    font-weight: 400;
    font-style: normal;
    font-size: 14px;
    line-height: 20px;
    letter-spacing: 0;
    vertical-align: middle;
    color: #5F6368;
}

.fmm-pguide__grid--clothing .fmm-pguide__num {
    top: 10px;
    left: 10px;
    width: 24px;
    height: 24px;
    font-size: 11px;
}

.fmm-pguide__grid--clothing .fmm-pguide__stack { gap: 14px; }

@media (max-width: 640px) {
    .fmm-pguide__grid--clothing { grid-template-columns: 1fr; }
    .fmm-pguide__grid--clothing .fmm-pguide__shot img,
    .fmm-pguide__grid--clothing .fmm-pguide__shot--wide img {
        aspect-ratio: 1.55 / 1;
    }
}

/* Keep the main category galleries at the reference scale. */
.fmm-pguide > .fmm-container { padding-right: 0; padding-left: 0; }

.fmm-pguide__tabs {
    gap: 10px;
    margin-bottom: 22px;
}

.fmm-pguide__tab {
    padding: 8px 16px;
    font-size: 14px;
    line-height: normal;
}

.fmm-pguide__category-panel--clothing .fmm-pguide__angles-title {
    margin-bottom: 16px;
    font-size: 22px;
    line-height: 1.3;
}

.fmm-pguide__grid--clothing { gap: 16px; }

.fmm-pguide__category-grid:not(.fmm-pguide__category-grid--phone) .fmm-pguide__shot img {
    height: 328px;
    max-height: 328px;
}

@media (max-width: 900px) {
    .fmm-pguide__category-grid:not(.fmm-pguide__category-grid--phone) .fmm-pguide__shot img {
        height: 220px;
    }
}

/* Desktop seller guide scale from the supplied reference frame.
   These fixed widths and offsets only fit once the content column is wide. */
@media (min-width: 1360px) {
    .fmm-sguide {
        max-width: 1234px;
    }

    .fmm-sguide__grid {
        grid-template-columns: minmax(0, 1.63fr) minmax(0, 1fr);
        gap: 24px;
    }

    .fmm-sguide__card {
        padding: 32px;
    }

    .fmm-sguide__daylight {
        width: calc(100% - 51px);
        margin-left: 15px;
    }

    .fmm-sguide__trust-card {
        width: calc(100% + 24px);
        margin-left: -45px;
    }

    .fmm-sguide__angles-card,
    .fmm-sguide__pair {
        width: calc(100% - 11px);
        margin-left: 7px;
    }

    .fmm-sguide__rail {
        width: calc(100% - 10px);
        margin-left: -3px;
    }

    .fmm-sguide__pack-card {
        width: 644px;
    }

    .fmm-sguide__fill {
        width: 566px;
        margin-left: -107px;
    }
}

/* Banner typography from the supplied laptop hero reference. */
.fmm-pguide__hero h2 {
    font-family: "Inter", sans-serif;
    font-weight: 800;
    font-style: normal;
    font-size: 42.11px;
    line-height: 52.63px;
    letter-spacing: 0;
    vertical-align: middle;
}

.fmm-pguide__hero-copy > p:not(.fmm-pguide__pill) {
    font-family: "Inter", sans-serif;
    font-weight: 500;
    font-style: normal;
    font-size: 15.79px;
    line-height: 24.56px;
    letter-spacing: 0;
    vertical-align: middle;
    color: #0F172ACC;
}

/* Smaller screens. These rules stay last so they win over the desktop frame. */
.fmm-pguide,
.fmm-sguide,
.fmm-pguide > .fmm-container,
.fmm-sguide-section > .fmm-container {
    min-width: 0;
}

.fmm-pguide__grid > *,
.fmm-pguide__category-grid > *,
.fmm-pguide__stack > *,
.fmm-sguide__grid > *,
.fmm-sguide__split > * {
    min-width: 0;
}

.fmm-pguide__cta { max-width: 100%; }

@media (max-width: 1199px) {
    .fmm-sguide__angles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 1024px) {
    .fmm-pguide__category-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }

    .fmm-pguide__category-grid:not(.fmm-pguide__category-grid--phone):not(.fmm-pguide__category-grid--embedded-badges) .fmm-pguide__shot img {
        height: auto;
        max-height: none;
        aspect-ratio: 1 / 1;
    }
}

@media (max-width: 1360px) {
    .fmm-pguide > .fmm-container { padding-right: 24px; padding-left: 24px; }
    .fmm-vwrap > .fmm-pguide > .fmm-container { padding-right: 0; padding-left: 0; }
}

@media (max-width: 900px) {
    .fmm-pguide > .fmm-container { padding-right: 16px; padding-left: 16px; }
    .fmm-vwrap > .fmm-pguide > .fmm-container { padding-right: 0; padding-left: 0; }

    .fmm-pguide__hero {
        min-height: 0;
        padding: 24px 20px 20px;
        border-radius: 20px;
    }

    .fmm-pguide__hero h2 {
        font-size: 32px;
        line-height: 1.12;
    }

    .fmm-pguide__hero-copy,
    .fmm-pguide__hero-copy > p:not(.fmm-pguide__pill) { max-width: none; }

    .fmm-pguide__hero-art {
        height: 200px;
        margin-top: 8px;
        border-radius: 16px;
        overflow: hidden;
    }

    .fmm-pguide__hero-art::after {
        background: linear-gradient(180deg, transparent 35%, rgb(255 190 46 / 40%));
    }

    .fmm-sguide__flag { max-width: calc(50% - 12px); }
}

@media (max-width: 640px) {
    .fmm-pguide,
    .fmm-sguide {
        --fmm-pguide-title: 28px;
        --fmm-pguide-title-line: 1.2;
    }

    .fmm-pguide__intro,
    .fmm-sguide__head p { font-size: 15px; }

    .fmm-pguide__hero { padding: 20px 16px 16px; border-radius: 18px; }
    .fmm-pguide__hero h2 { font-size: 26px; line-height: 1.15; }
    .fmm-pguide__hero-copy > p:not(.fmm-pguide__pill) { font-size: 14px; line-height: 1.5; }
    .fmm-pguide__hero-art { height: 160px; }

    .fmm-pguide__tabs { gap: 8px; }
    .fmm-pguide__tab { padding: 8px 12px; font-size: 13px; }

    .fmm-pguide__angles-title,
    .fmm-pguide__category-panel--clothing .fmm-pguide__angles-title { font-size: 20px; line-height: 1.3; }

    .fmm-pguide__category-grid,
    .fmm-pguide__category-grid--sneakers { grid-template-columns: 1fr; }

    .fmm-pguide__category-panel .fmm-pguide__shot h3 { font-size: 16px; line-height: 1.35; }
    .fmm-pguide__category-panel .fmm-pguide__shot p { font-size: 13px; line-height: 1.45; }

    .fmm-sguide__head h1 { font-size: 28px; }
    .fmm-sguide__trust h2 { font-size: 22px; }
    .fmm-sguide__flag { font-size: 11px; padding: 4px 8px; }
    .fmm-sguide__flag--avoid { left: 8px; }
    .fmm-sguide__flag--good { right: 8px; }
}