/* ============================================================================
   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. */
.tpd {
    font-family: 'Roboto', sans-serif;
    color: #222222;
    max-width: 420px;
}

/* ---------- 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 ---------- */

.tpd .tpd-price-box {
    border-color: #FF9E18 !important;
    background-color: #FFFDF8;
}

.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 ---------- */

.tpd .tpd-section-label {
    font-size: 12px;
    color: #253D79;
}

/* ---------- Info rows ---------- */

.tpd .tpd-row {
    min-height: 34px;
    font-size: 14px;
}

/* Stacked rows read as one table */
.tpd .tpd-row + .tpd-row {
    border-top: 0 !important;
}

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

.tpd .tpd-note {
    font-size: 11px;
}

/* ---------- Quantity stepper (.qty-box-new wrapper is a JS hook, keep it) ---------- */

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

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

.tpd .qty-box-new .input-number {
    height: 44px;
    font-size: 16px;
}

.tpd .tpd-incart {
    font-size: 13px;
}

/* ---------- Buttons — height and brand colours only ---------- */

.tpd .tpd-btn {
    height: 40px;
    font-size: 15px;
}

.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; }

/* ---------- 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;
    }
}