/* ============================================================================
 * Samrat collections + product detail styles
 * Loaded by index.html, shop-default.html and product-detail.html
 * Palette: --Onsurface #012601 (deep green), --White #FDF9ED (cream)
 * ==========================================================================*/

:root {
    /* Backdrop behind product photos. Every real catalogue photo in
     * images/0/products/ is shot on pure white (verified: 256/288 sampled
     * corners are exactly #ffffff, none below 250), so letterboxing a
     * non-square photo against white is visually seamless. */
    --samrat-photo-bg: #ffffff;
}

/* ---- filter chips ------------------------------------------------------- */
.samrat-filter-bar {
    display: flex;
    flex-direction: column;
    gap: 16px;
    margin-bottom: 36px;
}
.samrat-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}
.samrat-chip {
    border: 1px solid rgba(1, 38, 1, 0.18);
    background: transparent;
    color: var(--Onsurface, #012601);
    border-radius: 999px;
    padding: 9px 20px;
    font-size: 15px;
    line-height: 1.2;
    cursor: pointer;
    transition: all .25s ease;
    white-space: nowrap;
}
.samrat-chip:hover {
    border-color: var(--Onsurface, #012601);
}
.samrat-chip.is-active {
    background: var(--Onsurface, #012601);
    border-color: var(--Onsurface, #012601);
    color: var(--White, #FDF9ED);
}
.samrat-chip-sm {
    padding: 7px 16px;
    font-size: 14px;
}
.samrat-subtabs {
    padding-top: 4px;
}
/* third filter level (Hospitality only: Guestrooms -> Trays, Tissue Box, ...).
   Rendered by collection.js when the selected subcategory has product groups. */
.samrat-chip-xs {
    padding: 5px 13px;
    font-size: 13px;
    border-color: rgba(1, 38, 1, 0.12);
    opacity: .92;
}
.samrat-grouptabs {
    padding-top: 2px;
    gap: 8px;
}

/* "Discover Our Signature Interior Collections" hover thumbnails (index.html).
   The theme crops these 255x255 squares with object-fit:cover, which lops the
   ends off our landscape product shots. Same treatment as every other Samrat
   product surface instead: show the whole item, contained on white. Scoped to
   .tab-banner so the theme's other hover-cursor-img uses are untouched. */
.tab-banner .hover-image img {
    object-fit: contain;
    background: var(--samrat-photo-bg, #ffffff);
    padding: 10px;
}

/* ---- product grid cards (injected) ------------------------------------- */
#collection-grid .card-product .card-product-wrapper,
#pd-related .card-product .card-product-wrapper {
    position: relative;
    overflow: hidden;
    border-radius: 12px;
    aspect-ratio: 1 / 1;
    background: var(--samrat-photo-bg);
}
#collection-grid .card-product .image-wrap,
#pd-related .card-product .image-wrap {
    display: block;
    width: 100%;
    height: 100%;
}
#collection-grid .card-product .image-wrap img,
#pd-related .card-product .image-wrap img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: center center;
    transition: opacity .4s ease, transform .6s ease;
}
#collection-grid .card-product .img-hover,
#pd-related .card-product .img-hover {
    position: absolute;
    inset: 0;
    opacity: 0;
}
#collection-grid .card-product:hover .img-hover,
#pd-related .card-product:hover .img-hover {
    opacity: 1;
}
#collection-grid .card-product:hover .img-product,
#pd-related .card-product:hover .img-product {
    transform: scale(1.04);
}
#collection-grid .list-btn-main,
#pd-related .list-btn-main {
    position: absolute;
    left: 16px;
    right: 16px;
    bottom: 16px;
    transform: translateY(140%);
    transition: transform .35s ease;
}
#collection-grid .card-product:hover .list-btn-main,
#pd-related .card-product:hover .list-btn-main {
    transform: translateY(0);
}
#collection-grid .btn-main-product,
#pd-related .btn-main-product {
    display: block;
    text-align: center;
    background: var(--Onsurface, #012601);
    color: var(--White, #FDF9ED);
    padding: 12px 16px;
    border-radius: 8px;
    font-size: 14px;
    text-decoration: none;
}
#collection-grid .card-product-info,
#pd-related .card-product-info {
    padding-top: 14px;
}
#collection-grid .card-product-info .title,
#pd-related .card-product-info .title {
    color: var(--Onsurface, #012601);
    text-decoration: none;
    display: block;
    margin-bottom: 4px;
}
#collection-grid .card-product-info .price,
#pd-related .card-product-info .price {
    color: rgba(1, 38, 1, 0.6);
    font-size: 14px;
}

/* ---- product detail gallery -------------------------------------------- */
.samrat-gallery {
    display: flex;
    flex-direction: column;
    gap: 16px;
}
.samrat-gallery-main {
    width: 100%;
    aspect-ratio: 1 / 1;
    border-radius: 16px;
    overflow: hidden;
    background: var(--samrat-photo-bg);
}
.samrat-gallery-main img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: center center;
    display: block;
}
.samrat-gallery-thumbs {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
}
.samrat-thumb {
    width: 84px;
    height: 84px;
    border-radius: 10px;
    overflow: hidden;
    border: 2px solid transparent;
    padding: 0;
    background: var(--samrat-photo-bg);
    cursor: pointer;
    transition: border-color .2s ease;
}
.samrat-thumb img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: center center;
    display: block;
}
.samrat-thumb.is-active {
    border-color: var(--Onsurface, #012601);
}

@media (max-width: 575px) {
    .samrat-thumb { width: 64px; height: 64px; }
}

/* ---- quick view gallery (homepage) -------------------------------------- */
.modal-quick-view .tf-quick-view-image {
    padding: 24px;
    overflow-y: auto;
}

/* ---- homepage product cards: show whole photo, never crop ---------------
 * The GearO theme sets `object-fit: cover` on every .card-product image
 * (css/styles.css) which crops the non-square catalogue photos. These
 * overrides are scoped to the Samrat-injected product surfaces only, so the
 * untouched theme pages keep the original behaviour. The square frame keeps
 * card heights uniform; `contain` + centred position letterboxes any
 * non-square photo against white instead of cropping it. */
#home-picks-grid .card-product .card-product-wrapper,
#home-picks-swiper-wrapper .card-product .card-product-wrapper,
#lookbook-swiper-wrapper .card-product .card-product-wrapper {
    aspect-ratio: 1 / 1;
    background: var(--samrat-photo-bg);
}
#home-picks-grid .card-product .card-product-wrapper img,
#home-picks-swiper-wrapper .card-product .card-product-wrapper img,
#lookbook-swiper-wrapper .card-product .card-product-wrapper img {
    object-fit: contain;
    object-position: center center;
}

/* ---- product USP tooltips (product-detail.html + homepage quick view) ---
 * Each USP label gets a small info-icon trigger; the one-line description
 * shows on :hover (desktop) and on :focus-within (mobile taps focus the
 * <button>, so no extra JS is needed to support tap). */
.tf-product-usp .usp-label {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    flex-wrap: wrap;
}
.tf-product-usp .usp-tooltip {
    position: relative;
    display: inline-flex;
    line-height: 0;
}
.tf-product-usp .usp-tooltip-trigger {
    display: inline-flex;
    width: 15px;
    height: 15px;
    padding: 0;
    border: none;
    background: none;
    color: currentColor;
    opacity: 0.5;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}
.tf-product-usp .usp-tooltip-trigger svg {
    width: 100%;
    height: 100%;
}
.tf-product-usp .usp-tooltip-trigger:hover,
.tf-product-usp .usp-tooltip-trigger:focus-visible {
    opacity: 1;
}
.tf-product-usp .usp-tooltip-text {
    position: absolute;
    bottom: calc(100% + 9px);
    left: 50%;
    transform: translateX(-50%) translateY(4px);
    width: max-content;
    max-width: 170px;
    background: var(--Onsurface);
    color: var(--White);
    font-size: 11px;
    line-height: 1.4;
    font-weight: 400;
    text-align: left;
    white-space: normal;
    padding: 8px 10px;
    border-radius: 4px;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 0.2s ease, transform 0.2s ease;
    z-index: 20;
}
.tf-product-usp .usp-tooltip-text::before {
    content: "";
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%) rotate(45deg);
    width: 7px;
    height: 7px;
    background: var(--Onsurface);
}
.tf-product-usp .usp-tooltip:hover .usp-tooltip-text,
.tf-product-usp .usp-tooltip:focus-within .usp-tooltip-text {
    opacity: 1;
    visibility: visible;
    transform: translateX(-50%) translateY(0);
    pointer-events: auto;
}

/* First/last item: anchor the tooltip to that side instead of centering,
   so it doesn't clip off the viewport on narrow/mobile widths. */
.tf-product-usp .d-flex > div:first-child .usp-tooltip-text {
    left: 0;
    transform: translateX(0) translateY(4px);
}
.tf-product-usp .d-flex > div:first-child .usp-tooltip-text::before {
    left: 8px;
    transform: rotate(45deg);
}
.tf-product-usp .d-flex > div:first-child .usp-tooltip:hover .usp-tooltip-text,
.tf-product-usp .d-flex > div:first-child .usp-tooltip:focus-within .usp-tooltip-text {
    transform: translateX(0) translateY(0);
}
.tf-product-usp .d-flex > div:last-child .usp-tooltip-text {
    left: auto;
    right: 0;
    transform: translateX(0) translateY(4px);
}
.tf-product-usp .d-flex > div:last-child .usp-tooltip-text::before {
    left: auto;
    right: 8px;
    transform: rotate(45deg);
}
.tf-product-usp .d-flex > div:last-child .usp-tooltip:hover .usp-tooltip-text,
.tf-product-usp .d-flex > div:last-child .usp-tooltip:focus-within .usp-tooltip-text {
    transform: translateX(0) translateY(0);
}

/* Narrow phones: the four USPs stay on one row, so scale the icons and labels
   down to keep the row inside the viewport. !important because the sizes are
   set as inline styles on the markup. */
@media (max-width: 500px) {
    .tf-product-usp .icon {
        font-size: 24px !important;
    }
    .tf-product-usp .text-caption-1 {
        font-size: 12px !important;
    }
}

/* Lookbook pin pop-ups (the small product thumbnail inside each hotspot) */
.loobook-product .img-style {
    background: var(--samrat-photo-bg);
}
.loobook-product .img-style img {
    object-fit: contain;
    object-position: center center;
}

/* ---- About Us: global presence map ---------------------------------------
 * images/0/world-map.svg is a generated silhouette (Natural Earth 110m land
 * + country data, public domain) with the 8 export countries highlighted.
 * Pins are placed by percentage - the same equirectangular projection used
 * to draw the map was used to project each pin's lon/lat, so they land
 * exactly on the right spot regardless of how the image scales. The dot
 * itself reuses the theme's .tf-pin-btn.style-2 ripple marker so it matches
 * the homepage lookbook pins. */
.world-map-wrap {
    position: relative;
    max-width: 900px;
    margin: 0 auto;
}
@media (min-width: 992px) {
    .world-map-wrap {
        max-width: 1140px;
    }
}
.world-map-img {
    width: 100%;
    height: auto;
    display: block;
}
.world-map-pin {
    position: absolute;
    transform: translate(-50%, -50%);
    background: none;
    border: none;
    padding: 10px;
    margin: -10px;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}
.world-map-pin .tf-pin-btn.style-2 {
    display: inline-block;
}
.world-map-pin .tf-pin-btn.style-2 span {
    width: 12px;
    height: 12px;
    border-width: 4px;
}
.world-map-pin:hover .tf-pin-btn.style-2 span,
.world-map-pin:focus .tf-pin-btn.style-2 span {
    border-color: var(--Onsurface);
    background-color: var(--White);
}
.world-map-pin-tip {
    position: absolute;
    bottom: calc(100% + 10px);
    left: 50%;
    transform: translateX(-50%) translateY(4px);
    width: max-content;
    max-width: 140px;
    background: var(--Onsurface);
    color: var(--White);
    font-size: 12px;
    font-weight: 500;
    line-height: 1.3;
    text-align: center;
    padding: 6px 10px;
    border-radius: 4px;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 0.2s ease, transform 0.2s ease;
    z-index: 5;
}
.world-map-pin-tip::before {
    content: "";
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%) rotate(45deg);
    width: 7px;
    height: 7px;
    background: var(--Onsurface);
}
.world-map-pin:hover .world-map-pin-tip,
.world-map-pin:focus .world-map-pin-tip {
    opacity: 1;
    visibility: visible;
    transform: translateX(-50%) translateY(0);
    pointer-events: auto;
}

/* Japan sits at the map's right edge - anchor its tooltip to the right
   instead of centering, so it doesn't clip off the viewport on mobile. */
.world-map-pin.anchor-right .world-map-pin-tip {
    left: auto;
    right: -10px;
    transform: translateX(0) translateY(4px);
}
.world-map-pin.anchor-right .world-map-pin-tip::before {
    left: auto;
    right: 14px;
    transform: rotate(45deg);
}
.world-map-pin.anchor-right:hover .world-map-pin-tip,
.world-map-pin.anchor-right:focus .world-map-pin-tip {
    transform: translateX(0) translateY(0);
}

@media (min-width: 992px) {
    .world-map-pin .tf-pin-btn.style-2 span {
        width: 18px;
        height: 18px;
        border-width: 6px;
    }
}

@media (max-width: 575px) {
    .world-map-pin .tf-pin-btn.style-2 span {
        width: 9px;
        height: 9px;
        border-width: 3px;
    }
}