/**
 * PDP visual/UX pass (2026-08-20) - second pass per explicit user
 * request: "configuration UX redesign" and "modern visual design" were
 * flagged partial in the first pass's report; this file is the fix.
 * Plain CSS, not Tailwind utilities - this child theme has no Tailwind
 * build of its own (see the login-wizard "max-w-md did nothing" gotcha
 * documented throughout this project), so any utility class used only in
 * a template not already present in Hyva's own stock markup would
 * silently compile to nothing. Loaded only on the PDP (catalog_product_
 * view.xml), not sitewide.
 *
 * Every selector below targets EXISTING markup/classes (Hyva's own
 * swatch-option/legend/fieldset structure, the vendor UniCredit
 * calculator's own class names, product-info.phtml's own child
 * getChildHtml() output) - nothing here changes what's rendered or how
 * the configurator/price-sync/calculator JS works, only how it looks.
 */

/* ---------- Main gallery: keep the white photo's edge visible ----------
   Hyva's own gallery.phtml (stock, not theme-overridden) renders the main
   image track as `bg-white` with no border/shadow of its own (id="gallery-
   main", a stable id on the vendor template - targeted here instead of
   forking the whole template just for this). Since this catalog's product
   photos are themselves on a white/near-white background, a white track
   with nothing to distinguish it from the page around it made the photo's
   own edges disappear entirely. Border + a very subtle shadow only -
   doesn't touch bg-white itself, sizing, or any gallery/slider behavior.
   border-radius is safe to add here too: the track's own overflow-x is
   `auto` (not `visible`), which already establishes a clipping context,
   so the slide images round off with the container instead of poking
   past square corners. */
#gallery-main {
    border: 1px solid var(--peren-line);
    border-radius: 14px;
    box-shadow: 0 1px 3px rgba(20,36,32,.06);
}

/* ---------- Dynamic title hierarchy (brief item #3) ---------- */
/* dynamic-title.js splits the existing single title string into two
   spans on first run; the h1/div itself is untouched (still the same
   element, same id, same itemprop=name). */
.peren-title-name {
    display: block;
    font-weight: 700;
    color: var(--peren-ink);
}
.peren-title-config {
    display: block;
    font-weight: 500;
    font-size: 0.55em;
    color: var(--peren-body);
    margin-top: 0.35rem;
    letter-spacing: 0.01em;
}
.peren-title-config:empty {
    display: none;
}

/* ---------- Configuration groups (brief items #4-#8) ---------- */
.peren-config-groups {
    display: flex;
    flex-direction: column;
    gap: 1.1rem;
}
.peren-config-group {
    margin: 0 !important;
    padding: 0;
}
.peren-config-legend {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-bottom: 0.6rem !important;
}
.peren-config-label {
    font-size: 0.6875rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    font-weight: 600;
    color: var(--peren-body);
}
.peren-config-selected {
    font-size: 0.9375rem;
    font-weight: 700;
    color: var(--peren-ink);
}
.peren-config-options {
    row-gap: 0.6rem !important;
}

/* Condition/grade needs the most explanation of any group (brief item
   #6, refurbished-condition context) - a light card treatment sets it
   apart from the plain chip rows around it without adding invented
   copy. */
.peren-config-group[data-attribute-code="grade"] {
    background: var(--peren-bg-soft);
    border: 1px solid var(--peren-line);
    border-radius: 14px;
    padding: 0.9rem 1rem 1rem;
}
.peren-config-group[data-attribute-code="grade"] .peren-config-label {
    color: var(--color-primary);
}

/* ---------- Swatch chips -> cards (brief items #5, #7, #8) ---------- */
.swatch-option {
    position: relative;
    transition: border-color 150ms ease, box-shadow 150ms ease, background-color 150ms ease;
}

/* Text swatches (storage/grade/battery/SIM) get real touch-target-sized
   cards instead of tight chips, and a soft tint when selected so the
   selected state reads at a glance, not just from a 1px border. */
.swatch-option[data-swatch-type="text"] {
    --swatch-size: 2.75rem;
    padding-block: 0.65rem;
    padding-inline: 1.1rem;
    font-size: 0.875rem;
    font-weight: 600;
    border-width: 1.5px;
}
.swatch-option[data-swatch-type="text"]:has(:checked) {
    background-color: color-mix(in srgb, var(--color-primary) 7%, white);
}

/* Visual (color) swatches: slightly larger, still round per the
   category-filter convention already set in this theme. */
.swatch-option[data-swatch-type="visual"] {
    --swatch-size: 2.75rem;
}

/* Selected-state checkmark badge - "unmistakable" per the brief, on
   every swatch type. Pure CSS, reuses the same :has(:checked) selector
   Hyva's own swatches.css already relies on for the border/box-shadow
   treatment - no markup change needed in swatch-item.phtml. */
.swatch-option:has(:checked)::after {
    content: '';
    position: absolute;
    top: -6px;
    right: -6px;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background-color: var(--color-primary);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E");
    background-size: 9px 9px;
    background-repeat: no-repeat;
    background-position: center;
    box-shadow: 0 0 0 2px #fff;
}

/* ---------- Live configuration summary (brief item #9) ---------- */
.peren-config-summary {
    margin: 1.1rem 0;
    padding: 0.9rem 1.1rem;
    background: var(--peren-bg-soft);
    border: 1px solid var(--peren-line);
    border-radius: 14px;
    transition: opacity 200ms ease;
}
.peren-config-summary-title {
    margin: 0 0 0.5rem;
    font-size: 0.6875rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    font-weight: 700;
    color: var(--color-primary);
}
.peren-config-summary-list {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem 0.6rem;
    margin: 0;
    padding: 0;
    list-style: none;
    font-size: 0.875rem;
    color: var(--peren-ink);
}
.peren-config-summary-list li {
    position: relative;
    padding-right: 0.7rem;
}
.peren-config-summary-list li:not(:last-child)::after {
    content: '';
    position: absolute;
    right: 0;
    top: 0.35em;
    width: 3px;
    height: 3px;
    border-radius: 50%;
    background: var(--peren-line-strong, #C7D3CD);
}
.peren-config-summary-name {
    font-weight: 700;
}

/* ---------- Purchase panel: price + financing + CTA as one unit
   (brief items #10, #11, #14) ---------- */
.peren-purchase-panel {
    margin-top: 0.5rem;
    padding-top: 1rem;
    border-top: 1px solid var(--peren-line);
}
.peren-purchase-panel-price-row {
    margin: 0 0 0.5rem !important;
}
.peren-purchase-panel-price-eyebrow {
    display: block;
    font-size: 0.6875rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    font-weight: 600;
    color: var(--peren-body);
    margin-bottom: 0.15rem;
}
.peren-purchase-panel-price .price-box .price {
    font-size: 2rem;
    font-weight: 800;
    color: var(--peren-ink);
    transition: opacity 150ms ease;
}

/* Product add-to-cart CTA (brief item #13): visually dominant, real
   hover/active/disabled states - the button/form themselves are
   untouched Magento markup. */
#product-addtocart-button {
    min-height: 3.25rem;
    padding-inline: 1.75rem;
    font-size: 1rem;
    font-weight: 700;
    border-radius: 0.875rem;
    letter-spacing: 0.01em;
    transition: background-color 150ms ease, transform 150ms ease, box-shadow 150ms ease;
}
#product-addtocart-button:hover:not(:disabled) {
    background-color: var(--color-primary-darker);
    box-shadow: 0 4px 14px color-mix(in srgb, var(--color-primary) 35%, transparent);
}
#product-addtocart-button:active:not(:disabled) {
    transform: scale(0.98);
}
#product-addtocart-button:disabled {
    opacity: 0.55;
    cursor: not-allowed;
}
#product-addtocart-button[data-loading] {
    opacity: 0.75;
    cursor: wait;
}

/* UniCredit calculator: restyled entirely through its own real class
   names (unicredit-payment-calculator etc., all vendor-rendered, all
   untouched) so it reads as "financing" inside the same purchase panel
   instead of a visually separate boxed widget. Text content (labels,
   the dynamically-calculated amount) is 100% unchanged - only spacing/
   typography/color. */
.peren-purchase-panel .unicredit-payment-calculator {
    background: var(--peren-bg-soft);
    border: 1px solid var(--peren-line);
    border-radius: 14px;
    padding: 1rem 1.1rem;
    margin-top: 0.75rem;
}
.peren-purchase-panel .unicredit-calculator-header {
    display: flex;
    align-items: center;
    gap: 0.6rem;
}
.peren-purchase-panel .unicredit-calculator-header-text {
    font-size: 0.6875rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    font-weight: 600;
    color: var(--peren-body);
}
.peren-purchase-panel .unicredit-calculator-logo {
    width: 130px;
    height: auto;
    max-width: 100%;
    object-fit: contain;
}
@media (max-width: 600px) {
    .peren-purchase-panel .unicredit-calculator-logo {
        width: 115px;
    }
}
.peren-purchase-panel .unicredit-calculator-content {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 0.75rem;
    margin-top: 0.6rem;
}
.peren-purchase-panel .unicredit-months-select {
    border: 1px solid var(--peren-line-strong, #C7D3CD);
    border-radius: 0.6rem;
    padding: 0.45rem 0.7rem;
    font-size: 0.875rem;
    background: #fff;
}
.peren-purchase-panel .unicredit-monthly-payment {
    display: flex;
    align-items: baseline;
    gap: 0.4rem;
}
.peren-purchase-panel .unicredit-payment-label {
    font-size: 0.8125rem;
    color: var(--peren-body);
}
.peren-purchase-panel .unicredit-payment-amount {
    font-size: 1.375rem;
    font-weight: 800;
    color: var(--color-primary);
    transition: opacity 150ms ease;
}

/* ---------- Trust row (brief item #12) ---------- */
.peren-trust-row {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem 1.1rem;
    margin: 1rem 0 0;
    padding: 0;
    list-style: none;
}
.peren-trust-row li {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    font-size: 0.75rem;
    color: var(--peren-body);
}
.peren-trust-row svg {
    width: 15px;
    height: 15px;
    flex-shrink: 0;
    color: var(--color-primary);
}

/* ---------- Sticky mobile bar: harmonize with the same tokens
   (brief item #15) ---------- */
.peren-sticky-buy-bar-financing {
    display: block;
    font-size: 0.75rem;
    color: var(--color-primary);
    font-weight: 600;
    margin-top: 0.1rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* ---------- Spacing consistency pass (brief item #16) ---------- */
.card:has(.peren-config-groups) dl#product-details {
    margin-bottom: 1.1rem;
}
.peren-config-groups {
    margin-bottom: 0.25rem;
}

/* ---------- Product info tabs (PDP redesign, 2026-08-20, second
   pass) - Descriere / Specificatii / Starea telefonului / Recenzii.
   Deliberately NOT boxed-card-per-section (explicit instruction: no
   card-in-card) - one quiet top border separates the whole tab area
   from the hero above it, and the active tab is marked by an underline
   + color, not a background box. ---------- */
.peren-product-tabs {
    margin-top: 1rem;
    padding-top: 1.5rem;
    border-top: 1px solid var(--peren-line);
}
.peren-product-tabs-nav {
    display: flex;
    gap: 1.75rem;
    overflow-x: auto;
    scrollbar-width: none;
    border-bottom: 1px solid var(--peren-line);
    margin-bottom: 1.75rem;
}
.peren-product-tabs-nav::-webkit-scrollbar {
    display: none;
}
.peren-product-tab-btn {
    flex-shrink: 0;
    background: none;
    border: none;
    border-bottom: 2px solid transparent;
    padding: 0.1rem 0 0.9rem;
    font-size: 0.9375rem;
    font-weight: 600;
    color: var(--peren-body);
    cursor: pointer;
    white-space: nowrap;
    transition: color 150ms ease, border-color 150ms ease;
}
.peren-product-tab-btn:hover {
    color: var(--peren-ink);
}
.peren-product-tab-btn.is-active {
    color: var(--color-primary);
    border-bottom-color: var(--color-primary);
}
.peren-product-tab-panel {
    /* Real bug found by the user: this section renders full page-width
       (product-sections.phtml sits below the two-column product grid,
       not inside its narrower right column), so a fixed max-width here
       left a large empty gap beside the content on real desktop
       viewports. Width is intentionally unconstrained - only the
       Descriere tab's actual prose text gets its own readability cap
       (.prose, below), since long-form text benefits from a capped
       line length but the spec table/review cards should use the full
       available width. */
}
/* Real H2 per panel for semantic structure/SEO (brief item #23) - kept
   visually quiet since the active tab button above already shows this
   same label prominently; this isn't decorative duplication, it's the
   accessible name for the tabpanel (aria-labelledby points at the tab
   button, but a visible heading also helps screen-reader users who
   land inside the panel directly, e.g. via in-page search). */
.peren-product-tab-panel-title {
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    font-weight: 700;
    color: var(--peren-body);
    margin: 0 0 1.25rem;
}

/* ---------- Tab: Descriere ---------- */
.peren-product-tab-panel .prose {
    /* No max-width - real user feedback on the live page was that the
       ~42rem readability cap left an oversized, unbalanced empty gap
       next to the text (this panel spans the full page width, not a
       narrow column), and looked broken rather than deliberate.
       Prioritizing that direct feedback over the brief's own softer
       "maximum ~700px" guideline. */
    line-height: 1.7;
    color: var(--peren-body);
}
.peren-product-tab-panel .prose p + p {
    margin-top: 1rem;
}

/* ---------- Tab: Specificatii - grouped, not a plain table
   (explicit instruction) ---------- */
.peren-spec-groups {
    display: flex;
    flex-direction: column;
    gap: 1.75rem;
}
.peren-spec-group-title {
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    font-weight: 700;
    color: var(--color-primary);
    margin: 0 0 0.6rem;
}
.peren-spec-rows {
    margin: 0;
}
.peren-spec-row {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.55rem 0;
    border-bottom: 1px solid var(--peren-line);
    font-size: 0.9375rem;
}
.peren-spec-row:last-child {
    border-bottom: none;
}
.peren-spec-row dt {
    color: var(--peren-body);
}
.peren-spec-row dd {
    margin: 0;
    color: var(--peren-ink);
    font-weight: 600;
    text-align: right;
}

/* ---------- Tab: Starea telefonului ---------- */
.peren-condition-tab {
    display: flex;
    flex-direction: column;
    gap: 0;
    max-width: 26rem;
}
.peren-condition-grade-block {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
    padding-bottom: 1.5rem;
    margin-bottom: 1.25rem;
    border-bottom: 1px solid var(--peren-line);
}
.peren-condition-eyebrow {
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--peren-body);
    font-weight: 700;
}
.peren-condition-grade-badge {
    display: inline-flex;
    align-self: flex-start;
    align-items: center;
    font-size: 1.5rem;
    font-weight: 800;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    color: var(--color-primary);
    background: var(--peren-bg-soft);
    border-radius: 0.9rem;
    padding: 0.55rem 1.25rem;
}
.peren-condition-grade-description {
    margin: 0.6rem 0 0;
    font-size: 0.875rem;
    line-height: 1.5;
    color: var(--peren-body);
}
.peren-condition-secondary {
    display: flex;
    flex-direction: column;
}
.peren-condition-row {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    padding: 0.9rem 0;
    border-bottom: 1px solid var(--peren-line);
}
.peren-condition-label {
    font-size: 0.8125rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--peren-body);
    font-weight: 600;
}
.peren-condition-value {
    font-size: 1.0625rem;
    font-weight: 700;
    color: var(--peren-ink);
}
.peren-condition-verified {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-top: 1.1rem;
    font-size: 0.875rem;
    color: var(--peren-body);
}
.peren-condition-verified svg {
    width: 18px;
    height: 18px;
    flex-shrink: 0;
    color: var(--color-primary);
}

/* ---------- Tab: Recenzii - restyle Magento's own real review
   list/form, no logic touched ---------- */
.peren-no-reviews {
    margin-bottom: 1.5rem;
    padding-bottom: 1.5rem;
    border-bottom: 1px solid var(--peren-line);
}
.peren-no-reviews p {
    margin: 0;
    font-size: 0.9375rem;
    color: var(--peren-body);
}
.peren-no-reviews-cta {
    margin-top: 0.25rem !important;
    font-weight: 600;
    color: var(--peren-ink);
}
.peren-product-tab-panel #reviews .item.review-item {
    padding: 1.1rem 0;
    border-bottom: 1px solid var(--peren-line);
}
.peren-product-tab-panel #product-review-form .field {
    margin-bottom: 1rem;
}
.peren-product-tab-panel #product-review-form .fieldset {
    border: none;
    padding: 0;
}
.peren-product-tab-panel #product-review-form input.input-text,
.peren-product-tab-panel #product-review-form textarea {
    border-radius: 0.6rem;
    border: 1px solid var(--peren-line-strong, #C7D3CD);
}

/* ---------- Motion (brief item #20) ---------- */
@media (prefers-reduced-motion: reduce) {
    .swatch-option,
    #product-addtocart-button,
    .peren-purchase-panel-price .price-box .price,
    .peren-purchase-panel .unicredit-payment-amount,
    .peren-config-summary {
        transition: none !important;
    }
}

/* ---------- Dynamic "Descriere" tab (peren.product.story, 2026-08-21) ----------
   Structural/visual reference: a pasted example marketing-style page
   (hero / highlights strip / feature sections / camera section / storage
   grid / refurbished cards / FAQ / final banner). Matched here at the
   level of layout, spacing, and section chrome - recolored from the
   example's blue accent to this project's own real teal brand tokens
   (--color-primary / --peren-ink / --peren-body / --peren-line /
   --peren-bg-soft) so it doesn't clash with the rest of the site, which
   uses those tokens everywhere else. All content in the markup itself
   comes from Peren\Catalog\ViewModel\ProductStory - this file only
   styles it. */
.peren-story {
    max-width: 100%;
}
.peren-story-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.8125rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--color-primary);
    margin: 0 0 0.9rem;
}
.peren-story-hero {
    padding: 1rem 0 2.5rem;
}
.peren-story-hero-grid {
    display: grid;
    grid-template-columns: 0.9fr 1.1fr;
    gap: 3rem;
    align-items: center;
}
/* Real bug found via a live mobile screenshot: CSS Grid items default to
   min-width: auto, which lets an image's own intrinsic size push the
   grid track (and the whole row) wider than the viewport - "width:100%"
   on the <img> alone doesn't prevent this, since it's the GRID ITEM'S
   track sizing that's the actual problem, not the image element itself.
   min-width: 0 here is the standard fix; max-width: 100% on every image
   in this tab is a second, defensive backstop. */
.peren-story-hero-grid > * {
    min-width: 0;
}
.peren-story-h1 {
    font-size: clamp(1.75rem, 3.5vw, 2.75rem);
    line-height: 1.08;
    letter-spacing: -0.02em;
    margin: 0 0 1rem;
    color: var(--peren-ink);
}
.peren-story-lead {
    font-size: 1.0625rem;
    line-height: 1.6;
    color: var(--peren-body);
    max-width: 34rem;
    margin: 0;
}
.peren-story-hero-image {
    background: #fff;
    border: 1px solid var(--peren-line);
    box-shadow: 0 1px 3px rgba(20,36,32,.06);
    border-radius: 1.5rem;
    padding: 2rem;
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 18rem;
}
.peren-story-hero-image img {
    max-height: 22rem;
    width: 100%;
    object-fit: contain;
}
.peren-story-highlights {
    border-top: 1px solid var(--peren-line);
    border-bottom: 1px solid var(--peren-line);
    padding: 1.5rem 0;
    margin-bottom: 1rem;
}
.peren-story-highlight-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1.25rem;
}
.peren-story-highlight {
    display: flex;
    gap: 0.75rem;
    align-items: flex-start;
}
.peren-story-highlight-icon {
    width: 2.25rem;
    height: 2.25rem;
    border-radius: 0.65rem;
    background: var(--peren-bg-soft);
    color: var(--color-primary);
    display: grid;
    place-items: center;
    font-weight: 700;
    font-size: 0.8125rem;
    flex: 0 0 auto;
}
.peren-story-highlight strong {
    display: block;
    font-size: 0.9375rem;
    color: var(--peren-ink);
    margin-bottom: 0.15rem;
}
.peren-story-highlight span {
    display: block;
    font-size: 0.8125rem;
    color: var(--peren-body);
}
.peren-story-section {
    padding: 2.75rem 0;
}
.peren-story-section-alt {
    background: var(--peren-bg-soft);
    border-radius: 1.5rem;
}
.peren-story-section-heading {
    max-width: 40rem;
    margin-bottom: 1.5rem;
}
.peren-story-section-heading h3 {
    font-size: clamp(1.375rem, 2.5vw, 1.75rem);
    line-height: 1.15;
    letter-spacing: -0.015em;
    margin: 0;
    color: var(--peren-ink);
}
.peren-story-feature-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 2.5rem;
    align-items: center;
}
.peren-story-feature-grid > * {
    min-width: 0;
}
.peren-story-feature-grid-full {
    grid-template-columns: 1fr;
}
.peren-story-feature-image {
    border-radius: 1.25rem;
    overflow: hidden;
    background: #fff;
    border: 1px solid var(--peren-line);
    box-shadow: 0 1px 3px rgba(20,36,32,.06);
}
.peren-story-feature-image img {
    width: 100%;
    aspect-ratio: 1 / 1;
    object-fit: cover;
}
.peren-story img {
    max-width: 100%;
    height: auto;
}
.peren-story-feature-copy h3 {
    font-size: clamp(1.25rem, 2.2vw, 1.625rem);
    line-height: 1.2;
    letter-spacing: -0.015em;
    margin: 0 0 0.9rem;
    color: var(--peren-ink);
}
.peren-story-feature-body {
    font-size: 1rem;
    line-height: 1.7;
    color: var(--peren-body);
    margin: 0 0 1.1rem;
    max-width: 34rem;
}
.peren-story-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}
.peren-story-chip {
    display: inline-flex;
    align-items: center;
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--color-primary);
    background: var(--peren-bg-soft);
    border-radius: 999px;
    padding: 0.4rem 0.85rem;
}
.peren-story-section-alt .peren-story-chip {
    background: #fff;
}
.peren-story-storage-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr));
    gap: 1rem;
}
.peren-story-storage-card {
    border: 1px solid var(--peren-line);
    border-radius: 1.25rem;
    padding: 1.5rem 1rem;
    text-align: center;
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.peren-story-storage-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 0.6rem 1.5rem rgba(20, 36, 32, 0.08);
}
.peren-story-storage-card strong {
    display: block;
    font-size: 1.375rem;
    color: var(--peren-ink);
    letter-spacing: -0.015em;
    margin-bottom: 0.4rem;
}
.peren-story-storage-card span {
    display: block;
    font-size: 0.8125rem;
    color: var(--peren-body);
    line-height: 1.4;
}
.peren-story-refurbished {
    background: var(--peren-bg-soft);
    border-radius: 1.5rem;
}
.peren-story-refurb-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.25rem;
}
.peren-story-refurb-card {
    background: #fff;
    border-radius: 1.25rem;
    padding: 1.5rem;
}
.peren-story-refurb-number {
    font-size: 0.8125rem;
    font-weight: 800;
    color: var(--color-primary);
    margin-bottom: 1.25rem;
}
.peren-story-refurb-card h4 {
    font-size: 1.0625rem;
    margin: 0 0 0.4rem;
    color: var(--peren-ink);
}
.peren-story-refurb-card p {
    margin: 0;
    color: var(--peren-body);
    font-size: 0.875rem;
}
.peren-story-faq {
    max-width: 46rem;
}
.peren-story-faq-item {
    border-top: 1px solid var(--peren-line);
    padding: 1.25rem 0;
}
.peren-story-faq-item:last-child {
    border-bottom: 1px solid var(--peren-line);
}
.peren-story-faq-item h4 {
    font-size: 1rem;
    margin: 0 0 0.4rem;
    color: var(--peren-ink);
}
.peren-story-faq-item p {
    color: var(--peren-body);
    margin: 0;
    font-size: 0.9375rem;
}
.peren-story-final {
    background: var(--peren-ink);
    color: #fff;
    text-align: center;
    border-radius: 1.5rem;
    padding: 3rem 1.5rem;
    margin: 1rem 0;
}
.peren-story-final p {
    max-width: 40rem;
    margin: 0 auto;
    font-size: 1.0625rem;
    color: #d7ddda;
}
@media (max-width: 900px) {
    .peren-story-hero-grid,
    .peren-story-feature-grid {
        grid-template-columns: 1fr;
        gap: 1.5rem;
    }
    .peren-story-highlight-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    .peren-story-refurb-grid {
        grid-template-columns: 1fr;
    }
}
@media (max-width: 600px) {
    .peren-story-highlight-grid {
        grid-template-columns: 1fr;
    }
    .peren-story-hero-image {
        padding: 1.25rem;
        min-height: auto;
    }
    .peren-story-hero-image img {
        max-height: 16rem;
    }
}