/* ============================================================================
   Product detail page (web)

   Bootstrap-first: layout, spacing, borders, flex and typography weights come
   from Bootstrap 5 utilities in the templates. Only what Bootstrap cannot
   express lives here — exact Figma type sizes, brand colours, fixed control
   heights, and the overrides needed to beat global rules in app.css.

   Bootstrap utilities emit !important, so any property that overrides one
   (border-color, border-top, …) needs !important too.

   Brand colours: orange #FF9E18 | navy #253D79 | yellow #FDC208 | grey #F1F3F1
   ========================================================================== */

/* The design keeps the info column narrow; Bootstrap has no max-width utility.
   Figma column width is 366-368px. */
.tpd {
    font-family: 'Roboto', sans-serif;
    color: #222222;
    max-width: 368px;
    min-width: 0;
}

/* ---------- Heading — exact Figma type ---------- */

/* Roboto Bold 36 / line-height 22 / #222222.
   The 22px line box is shorter than the 36px glyphs, so the text overflows it by
   ~7px top and bottom; the margins absorb that and leave the intended gap. */
.tpd-head .tpd-partno {
    font-size: 36px;
    line-height: 22px;
    font-weight: 700;
    margin: 7px 0 18px 0;
}

/* Roboto SemiBold 18 / line-height 23 / #222222.
   font-weight 600 is written out because Bootstrap 5.0 has no .fw-semibold. */
.tpd-head .tpd-header {
    font-size: 18px;
    line-height: 23px;
    font-weight: 600;
    margin: 0;
}

/* ---------- Price box — Figma 366x52, radius 2, #FDFCF9 on #FBBA54 ---------- */

.tpd .tpd-price-box {
    min-height: 52px;
    border-radius: 2px !important;
    border-color: #FBBA54 !important;
    background-color: #FDFCF9;
}

.tpd .tpd-price {
    font-size: 28px;
    line-height: 1.15;
}

.tpd .tpd-price-unit {
    font-size: 15px;
}

.tpd .tpd-price-old {
    font-size: 18px;
}

/* ---------- Section label — Roboto Bold 11 / 22 / #253D79 ---------- */

.tpd .tpd-section-label {
    font-size: 11px;
    font-weight: 700;
    line-height: 22px;
    color: #253D79;
}

.tpd .tpd-hr {
    border-top-color: #E2E2E2;
    opacity: 1;
}

/* ---------- Info tables — one framed block, rows divided inside ---------- */

.tpd .tpd-table {
    border: 1px solid #949192;
    border-radius: 2px;
    background-color: #FFFFFF;
    overflow: hidden;
}

.tpd .tpd-table .tpd-row + .tpd-row {
    border-top: 1px solid #949192;
}

/* Packaging rows: Roboto Condensed Bold 16 / 22 / #1C1C1E, 26px tall */
.tpd .tpd-pkg-row {
    min-height: 26px;
    font-family: 'Roboto Condensed', sans-serif;
    font-weight: 700;
    font-size: 16px;
    line-height: 22px;
    color: #1C1C1E;
}

/* Warehouse rows: Roboto Bold 12 / 22, ~34.8px tall (104.34 / 3 rows) */
.tpd .tpd-wh-row {
    min-height: 34.8px;
    font-weight: 700;
    font-size: 12px;
    line-height: 22px;
    color: #222222;
}

/* Long warehouse names must not push the stock value out of the column */
.tpd .tpd-wh-name { min-width: 0; }

.tpd .tpd-stock-in  { color: #253D79; }
.tpd .tpd-stock-out { color: #FF0000; }

.tpd .tpd-row .tpd-price-old {
    font-size: 13px;
}

/* ---------- Quantity stepper + inline cart button (.qty-box-new is a JS hook) ---------- */

.tpd .tpd-qty-row { height: 48px; }

.tpd .qty-box-new { min-width: 0; }

.tpd .qty-box-new .input-group-prepend .btn {
    width: 48px;
    height: 100%;
}

.tpd .qty-box-new .input-group-prepend .btn:disabled {
    color: #adb5bd;
}

.tpd .qty-box-new .input-number {
    height: 100%;
    font-size: 16px;
    min-width: 0;
}

.tpd .tpd-cart-icon {
    flex: 0 0 96px;
    background-color: #FF9E18;
    font-size: 18px;
}

.tpd .tpd-cart-icon:hover,
.tpd .tpd-cart-icon:focus {
    color: #fff;
    opacity: .92;
}

/* "N pieces in your cart" — Figma 367x26, radius 2, 1px #D1CFD0 */
.tpd .tpd-incart {
    min-height: 26px;
    border-radius: 2px !important;
    border-color: #D1CFD0 !important;
    font-size: 12px;
    font-weight: 700;
    line-height: 22px;
}

/* ---------- Buttons — Figma row 368x48; brand colours ---------- */

.tpd .tpd-btn {
    height: 48px;
    font-family: 'Roboto', sans-serif;
    font-weight: 500;
    font-size: 15px;
    line-height: 22px;
    border-radius: 2px !important;
    /* Figma keeps each label on ONE line; the buttons hug their own text and only share the
       leftover width (flex-grow-1 in the template), so the longer label is the wider button. */
    white-space: nowrap;
    padding-left: 10px;
    padding-right: 10px;
}

.tpd .tpd-btn:hover,
.tpd .tpd-btn:focus {
    color: #fff;
    opacity: .92;
}

.tpd .tpd-btn-cart   { background-color: #253D79; }
.tpd .tpd-btn-fav    { background-color: #FDC208; }
.tpd .tpd-btn-update { background-color: #4EC3E0; }
.tpd .tpd-btn-danger { background-color: #E24C5B; }

/* Narrow viewports: the column is fluid, labels shrink instead of overflowing */
@media (max-width: 575.98px) {
    /* Narrow phones: shrink the label instead of wrapping it or overflowing the column. */
    .tpd .tpd-btn        { font-size: 12px; padding-left: 6px; padding-right: 6px; }
    .tpd .tpd-btn .gap-2,
    .tpd .tpd-btn        { gap: .25rem !important; }
    .tpd .tpd-cart-icon  { flex: 0 0 64px; }
    .tpd .tpd-pkg-row    { font-size: 14px; }
}

/* ---------- Backorder panel ---------- */

.tpd .tpd-backorder {
    background-color: #F1F3F1;
}

.tpd .tpd-backorder .form-control,
.tpd .tpd-backorder .qty-box .input-number {
    height: 40px;
}

.tpd .tpd-backorder .qty-box .input-number {
    max-width: 140px;
}

.tpd .tpd-backorder .qty-box .btn {
    width: 40px;
    height: 40px;
}

/* ============================================================================
   Image gallery (left column)

   Scoped under .tpd-gallery, which the product detail page appends to the image
   column class. web/product/images.html.twig is shared with detailPromotion, so
   nothing here may leak: the promotion page never gets .tpd-gallery.

   These rules exist to beat global declarations in app.css:
     .details-items .details-image { padding-right: 20px }  -> photo off-centre
     .details-image-option ... :first-child div { text-align: left }
     .details-image-option ... :last-child  div { text-align: right }
   ========================================================================== */

.tpd-gallery .details-image {
    padding-right: 0 !important;
    overflow: visible;
    background-color: #fff;
}

/* Fixed frame height with the photo contained, so a tall product photo can no
   longer stretch the frame down the page. Only .MagicZoom slides are targeted —
   the 360° slide keeps its own layout. */
.tpd-gallery .details-image a.MagicZoom {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 520px;
    padding: 12px;
}

.tpd-gallery .details-image a.MagicZoom img {
    width: auto !important;
    height: auto !important;
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}

/* Arrows move below the frame, level with the thumbnail strip. */
.tpd-gallery .details-image .slick-prev,
.tpd-gallery .details-image .slick-next {
    bottom: -58px !important;
    top: unset !important;
    z-index: 2;
}

.tpd-gallery .details-image-option {
    padding: 0 46px; /* keeps the strip clear of the prev/next arrows */
}

.tpd-gallery .details-image-option .slick-list {
    padding-left: 0 !important;
}

/* Centre every thumbnail, including first and last which app.css pins left/right. */
.tpd-gallery .details-image-option .slick-list .slick-track div,
.tpd-gallery .details-image-option .slick-list .slick-track div:first-child div,
.tpd-gallery .details-image-option .slick-list .slick-track div:last-child div {
    text-align: center !important;
    padding-right: 0 !important;
}

/* Size only — the border, padding and white background come from Bootstrap's
   .img-thumbnail, which the template already puts on these images.
   !important is required: the template sets max-width/max-height inline. */
.tpd-gallery .details-image-option img {
    width: 72px !important;
    height: 72px !important;
    max-width: 72px !important;
    max-height: 72px !important;
    object-fit: contain;
    overflow: hidden;
    font-size: 9px; /* keeps alt text inside the box when an image is missing */
}

@media (max-width: 767.98px) {
    .tpd-gallery .details-image a.MagicZoom {
        height: 320px;
    }
}

/* =====================================================================
   RELATED PRODUCTS CARD (Figma)
   Scoped to .trp-card, rendered only by _similarProductCardV2.html.twig.
   Figma values: card 298x582, radius 4, #fff, 1px #000 @12.5% inside,
   19px padding; image area 260x332; description Roboto 14/21 #7E7E7E;
   part number Roboto 20 #232323; button 196x49, radius 5, #FF9E18.
   ===================================================================== */
.trp-card {
    display: flex;
    flex-direction: column;
    max-width: 298px;
    height: 582px;
    margin: 0 auto;
    padding: 19px;
    background: #FFFFFF;
    border: 1px solid rgba(0, 0, 0, 0.125);
    border-radius: 4px;
    font-family: 'Roboto', sans-serif;
}
.trp-card .trp-media {
    display: block;
    height: 332px;
    text-align: center;
}
.trp-card .trp-media img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}
.trp-card .trp-desc {
    margin-top: 31px;
    height: 72px;
    overflow: hidden;
    font-size: 14px;
    line-height: 21px;
    font-weight: 400;
    color: #7E7E7E;
}
.trp-card .trp-partno {
    font-size: 20px;
    line-height: 24px;
    font-weight: 400;
    color: #232323;
}
.trp-card .trp-shop {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 196px;
    height: 49px;
    margin: auto auto 0;
    border-radius: 5px;
    background: #FF9E18;
    color: #FFFFFF;
    font-size: 15px;
    line-height: 1;
    text-decoration: none;
}
.trp-card .trp-shop:hover {
    background: #253D79;
    color: #FFFFFF;
}