/* ------------------------------------------------------------------
   Trí Ân Gift — brand layer.
   Loaded last, so everything here wins over the base theme CSS.
   Keep custom rules in this file; leave base.css / theme.css untouched
   so they stay easy to re-sync with the reference design.
   ------------------------------------------------------------------ */

body {
    font-family: 'Be Vietnam Pro', sans-serif;
}

/* ---------- Page frame ----------
   The reference theme ships a "boxed" layout: a 1500px white card with a drop
   shadow, floating on a full-bleed background photo, with 40px of body padding
   above and below.

       theme.css:  body       { padding: 40px 0; }
       theme.css:  .main-page { width: 1500px; margin: 0 auto; box-shadow: ...; }

   That only reads as intentional when there's a photo behind the card. We ship
   no background image, so the frame just looked like dead margin. Full-bleed
   instead. Inner content is still capped at 1250px by .page-width, so line
   lengths are unchanged.

   TO GO BACK TO THE BOXED LOOK: delete this block and set a background image on
   body in _partials/head.html, e.g.
       body { background-image: url(../images/your-backdrop.jpg); } */

body {
    padding: 0;
    background-image: none;
}

.main-page {
    width: 100%;
    max-width: 100%;
    box-shadow: none;
}

h1, h2, h3, h4, h5, h6,
.home-title,
.header__logo,
.footer-block__heading,
.card-information__text {
    font-family: 'Lora', Georgia, serif;
}

/* ---------- Wordmark ---------- */

.brand-logo {
    display: inline-block;
    text-decoration: none;
    line-height: 1.05;
    text-align: center;
}

.brand-logo__mark {
    display: block;
    font-family: 'Lora', Georgia, serif;
    font-size: 34px;
    font-weight: 700;
    color: #80b435;
    letter-spacing: 0.02em;
}

.brand-logo__word {
    display: block;
    font-family: 'Be Vietnam Pro', sans-serif;
    font-size: 15px;
    font-weight: 600;
    letter-spacing: 0.62em;
    text-indent: 0.62em;
    color: #ff7e41;
    margin-top: -4px;
}

.brand-logo__tag {
    display: block;
    font-size: 10px;
    font-weight: 400;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: #9a9a9a;
    margin-top: 4px;
}

.brand-logo--mobile .brand-logo__mark { font-size: 22px; }
.brand-logo--mobile .brand-logo__word { font-size: 10px; letter-spacing: 0.4em; text-indent: 0.4em; }

.brand-logo--footer { margin-bottom: 18px; }
.brand-logo--footer .brand-logo__mark { color: #ffffff; font-size: 38px; }
.brand-logo--footer .brand-logo__word { color: #ff7e41; }

/* ---------- Hero ----------
   The reference site used an Owl carousel. This static build ships a single
   composed hero instead; drop extra slides in and re-init Owl if you want
   the rotation back. */

.hero-static__slide {
    position: relative;
    display: block;
    overflow: hidden;
    text-decoration: none;
}

.hero-static__slide .slideshow__link {
    position: static;
    display: block;
}

.hero-static__slide img {
    width: 100%;
    height: auto;
    display: block;
    position: static;
}

/* Scrim keeps the caption legible once a real photo replaces the placeholder. */
.hero-static__slide::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, rgba(0, 0, 0, 0.45) 0%, rgba(0, 0, 0, 0.18) 45%, rgba(0, 0, 0, 0) 70%);
    pointer-events: none;
}

.hero-static__caption {
    position: absolute;
    top: 50%;
    left: 8%;
    transform: translateY(-50%);
    max-width: 46%;
    color: #fff;
    text-shadow: 0 2px 18px rgba(0, 0, 0, 0.45);
}

.hero-static__eyebrow {
    display: inline-block;
    font-size: 12px;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: #ffd9c4;
    margin-bottom: 12px;
}

.hero-static__title {
    font-family: 'Lora', Georgia, serif;
    font-size: 44px;
    line-height: 1.24;
    margin: 0 0 16px;
    color: #fff;
}

.hero-static__text {
    font-size: 15px;
    line-height: 1.85;
    margin: 0 0 24px;
    color: rgba(255, 255, 255, 0.92);
}

.hero-static__btn {
    display: inline-block;
}

@media (max-width: 991px) {
    .hero-static__caption { max-width: 62%; left: 6%; }
    .hero-static__title { font-size: 28px; }
    .hero-static__text { display: none; }
}

@media (max-width: 575px) {
    .hero-static__caption { max-width: 84%; }
    .hero-static__title { font-size: 20px; margin-bottom: 10px; }
    .hero-static__eyebrow { font-size: 10px; margin-bottom: 6px; }
}

/* ---------- Header search ----------
   The theme's icon toggles a hidden search field. This build shows the field
   inline at all times, so the toggle icon is redundant on desktop. */

@media (min-width: 992px) {
    #_desktop_search .search-icon {
        display: none;
    }

    #_desktop_search .search-info {
        display: block;
        position: static;
        opacity: 1;
        visibility: visible;
    }
}

/* ---------- Product card extras ---------- */

.badge-sale,
.badge-new {
    position: absolute;
    top: 10px;
    left: 10px;
    z-index: 3;
    display: inline-block;
    padding: 2px 10px;
    font-size: 11px;
    font-weight: 600;
    line-height: 1.9;
    letter-spacing: 0.04em;
    border-radius: 2px;
    color: var(--sale-text-color);
    background: var(--sale-bg-color);
}

.badge-new {
    background: var(--brand-secondary);
}

.card__inner {
    position: relative;
}

/* Quick-action buttons.
   The theme styles these for <svg> children; ours are Font Awesome <i>, so
   size and centre them to fill the same 30px circle. */
.thumbnail-buttons .btn-info > a {
    display: block;
    width: 30px;
    height: 30px;
    line-height: 30px;
    text-align: center;
    color: var(--product-icon-color);
    text-decoration: none;
}

.thumbnail-buttons .btn-info > a:hover {
    color: var(--product-icon-hover-color);
}

.thumbnail-buttons .btn-info i {
    font-size: 14px;
    line-height: 30px;
    vertical-align: middle;
}

.thumbnail-buttons .btn-info .tooltip-label {
    display: none;
}

/* The theme reveals these on card hover. Touch devices have no hover, so the
   buttons would be permanently invisible - pin them open there instead. */
@media (hover: none), (pointer: coarse) {
    .thumbnail-buttons .btn-info {
        opacity: 1;
        transform: none;
        -webkit-transform: none;
    }
}

.product-desc {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    font-size: 13px;
    color: #8a8a8a;
    line-height: 1.7;
    margin-top: 6px;
}

.empty-note {
    padding: 60px 0;
    text-align: center;
    color: #8a8a8a;
    font-size: 15px;
}

/* ---------- Cart badge in mobile header ---------- */

.cart-qty-badge {
    position: absolute;
    top: -6px;
    right: -10px;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    border-radius: 9px;
    background: var(--brand-secondary);
    color: #fff;
    font-size: 11px;
    line-height: 18px;
    text-align: center;
    font-weight: 600;
}

#_mobile_cart .cart-logo {
    position: relative;
    display: inline-block;
    font-size: 20px;
}

/* ---------- Collection page ---------- */

.collection-toolbar {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    align-items: center;
    justify-content: space-between;
    padding: 16px 0 26px;
    border-bottom: 1px solid #ececec;
    margin-bottom: 30px;
}

.collection-toolbar .result-count {
    color: #8a8a8a;
    font-size: 13px;
}

.collection-toolbar select {
    height: 40px;
    padding: 0 34px 0 14px;
    border: 1px solid #e3e3e3;
    background: #fff;
    font-family: inherit;
    font-size: 13px;
    color: #555;
    border-radius: 2px;
    cursor: pointer;
}

.filter-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 26px;
}

.filter-chips a {
    display: inline-block;
    padding: 6px 16px;
    border: 1px solid #e3e3e3;
    border-radius: 40px;
    font-size: 13px;
    color: #666;
    text-decoration: none;
    transition: all .2s ease;
}

.filter-chips a:hover {
    border-color: var(--button-bg-color);
    color: var(--button-bg-color);
}

.filter-chips a.is-active {
    background: var(--button-bg-color);
    border-color: var(--button-bg-color);
    color: #fff;
}

/* ---------- Breadcrumb ---------- */

.trian-breadcrumb {
    padding: 18px 0;
    font-size: 13px;
    color: #9a9a9a;
    background: #fafafa;
    margin-bottom: 36px;
}

.trian-breadcrumb a {
    color: #666;
    text-decoration: none;
}

.trian-breadcrumb a:hover {
    color: var(--button-bg-color);
}

.trian-breadcrumb span {
    margin: 0 8px;
    color: #cfcfcf;
}

/* ---------- Product detail ---------- */

.pdp {
    margin-bottom: 70px;
}

.pdp__media img {
    width: 100%;
    height: auto;
    display: block;
    border: 1px solid #f0f0f0;
}

.pdp__thumbs {
    display: flex;
    gap: 10px;
    margin-top: 12px;
}

.pdp__thumbs img {
    width: 84px;
    height: 84px;
    object-fit: cover;
    border: 1px solid #eee;
    cursor: pointer;
    transition: border-color .2s ease;
}

.pdp__thumbs img:hover,
.pdp__thumbs img.is-active {
    border-color: var(--button-bg-color);
}

.pdp__title {
    font-size: 30px;
    line-height: 1.3;
    margin: 0 0 10px;
    color: #232323;
}

.pdp__sku {
    font-size: 12px;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: #a5a5a5;
    margin-bottom: 16px;
}

.pdp__price {
    font-size: 28px;
    font-weight: 600;
    color: var(--brand-secondary);
    margin-bottom: 6px;
}

.pdp__price s {
    font-size: 18px;
    font-weight: 400;
    color: #b5b5b5;
    margin-right: 12px;
}

.pdp__excerpt {
    color: #7c7c7c;
    line-height: 1.9;
    padding: 18px 0;
    border-top: 1px solid #ececec;
    border-bottom: 1px solid #ececec;
    margin: 18px 0 24px;
}

.pdp__buy {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    align-items: stretch;
    margin-bottom: 26px;
}

.qty-box {
    display: flex;
    align-items: center;
    border: 1px solid #e3e3e3;
    height: 48px;
}

.qty-box button {
    width: 42px;
    height: 46px;
    border: 0;
    background: transparent;
    font-size: 18px;
    color: #666;
    cursor: pointer;
    line-height: 1;
}

.qty-box button:hover { color: var(--button-bg-color); }

.qty-box input {
    width: 52px;
    height: 46px;
    border: 0;
    border-left: 1px solid #f0f0f0;
    border-right: 1px solid #f0f0f0;
    text-align: center;
    font-family: inherit;
    font-size: 15px;
    color: #333;
    -moz-appearance: textfield;
}

.qty-box input::-webkit-outer-spin-button,
.qty-box input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

.btn-addcart {
    flex: 1 1 220px;
    height: 48px;
    border: 0;
    background: var(--button-bg-color);
    color: var(--button-text-color);
    font-family: inherit;
    font-size: 14px;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    cursor: pointer;
    transition: background .25s ease;
}

.btn-addcart:hover { background: var(--button-bg-hover-color); }

.pdp__specs {
    width: 100%;
    border-collapse: collapse;
    margin-top: 10px;
}

.pdp__specs th,
.pdp__specs td {
    padding: 11px 14px;
    border: 1px solid #eee;
    font-size: 13.5px;
    text-align: left;
    vertical-align: top;
}

.pdp__specs th {
    width: 40%;
    background: #fafafa;
    font-weight: 500;
    color: #555;
}

.pdp__specs td { color: #7c7c7c; }

.pdp-tabs {
    margin-top: 46px;
}

.pdp-tabs__nav {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    border-bottom: 1px solid #ececec;
    margin-bottom: 24px;
    padding: 0;
    list-style: none;
}

.pdp-tabs__nav button {
    border: 0;
    background: none;
    padding: 12px 22px;
    font-family: inherit;
    font-size: 14px;
    font-weight: 500;
    color: #999;
    cursor: pointer;
    border-bottom: 2px solid transparent;
    margin-bottom: -1px;
}

.pdp-tabs__nav button.is-active {
    color: var(--button-bg-color);
    border-bottom-color: var(--button-bg-color);
}

.pdp-tabs__panel { display: none; color: #7c7c7c; line-height: 1.95; }
.pdp-tabs__panel.is-active { display: block; }

/* ---------- Cart page ---------- */

.cart-table {
    width: 100%;
    border-collapse: collapse;
}

.cart-table th {
    padding: 0 14px 14px;
    border-bottom: 1px solid #e6e6e6;
    font-size: 12px;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: #999;
    font-weight: 500;
    text-align: left;
}

.cart-table td {
    padding: 20px 14px;
    border-bottom: 1px solid #f2f2f2;
    vertical-align: middle;
}

.cart-table th:last-child,
.cart-table td:last-child { text-align: right; }

.cart-line {
    display: flex;
    gap: 16px;
    align-items: center;
}

.cart-line img {
    width: 88px;
    height: 88px;
    object-fit: cover;
    border: 1px solid #f0f0f0;
    flex: 0 0 auto;
}

.cart-line__title {
    font-family: 'Lora', Georgia, serif;
    font-size: 15px;
    color: #333;
    text-decoration: none;
    display: block;
    margin-bottom: 3px;
}

.cart-line__title:hover { color: var(--button-bg-color); }

.cart-line__sku {
    font-size: 11.5px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #b0b0b0;
}

.cart-remove {
    border: 0;
    background: none;
    color: #c0c0c0;
    cursor: pointer;
    font-size: 15px;
    padding: 4px;
}

.cart-remove:hover { color: #c92c2c; }

.cart-summary {
    background: #fafafa;
    padding: 28px 30px;
    border: 1px solid #f0f0f0;
}

.cart-summary h3 {
    margin: 0 0 18px;
    font-size: 18px;
    color: #232323;
}

.cart-summary__row {
    display: flex;
    justify-content: space-between;
    padding: 9px 0;
    font-size: 14px;
    color: #777;
}

.cart-summary__row--total {
    border-top: 1px solid #e6e6e6;
    margin-top: 12px;
    padding-top: 16px;
    font-size: 19px;
    font-weight: 600;
    color: var(--brand-secondary);
}

.cart-summary .btn-addcart { width: 100%; margin-top: 18px; }

.cart-note {
    margin-top: 14px;
    font-size: 12.5px;
    line-height: 1.75;
    color: #9a9a9a;
    text-align: center;
}

.cart-empty {
    text-align: center;
    padding: 80px 20px;
}

.cart-empty i {
    font-size: 54px;
    color: #dcdcdc;
    margin-bottom: 20px;
    display: block;
}

.cart-empty h2 {
    font-size: 24px;
    color: #333;
    margin: 0 0 10px;
}

.cart-empty p { color: #9a9a9a; margin-bottom: 24px; }

/* ---------- Contact page ---------- */

.contact-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 46px;
    margin-bottom: 70px;
}

@media (max-width: 767px) {
    .contact-grid { grid-template-columns: 1fr; gap: 34px; }
}

.contact-form .field { margin-bottom: 16px; }

.contact-form label {
    display: block;
    font-size: 12.5px;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: #888;
    margin-bottom: 7px;
}

.contact-form input,
.contact-form select,
.contact-form textarea {
    width: 100%;
    padding: 12px 14px;
    border: 1px solid #e3e3e3;
    font-family: inherit;
    font-size: 14px;
    color: #333;
    background: #fff;
    border-radius: 2px;
}

.contact-form input:focus,
.contact-form select:focus,
.contact-form textarea:focus {
    outline: none;
    border-color: var(--button-bg-color);
}

.contact-form textarea { min-height: 140px; resize: vertical; }

.contact-card {
    background: #fafafa;
    border: 1px solid #f0f0f0;
    padding: 30px;
}

.contact-card h3 {
    margin: 0 0 18px;
    font-size: 19px;
    color: #232323;
}

.contact-card ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

.contact-card li {
    display: flex;
    gap: 14px;
    padding: 12px 0;
    border-bottom: 1px solid #eee;
    color: #7c7c7c;
    font-size: 14px;
    line-height: 1.8;
}

.contact-card li:last-child { border-bottom: 0; }

.contact-card i {
    color: var(--button-bg-color);
    font-size: 16px;
    margin-top: 5px;
    flex: 0 0 18px;
}

.contact-card a { color: #7c7c7c; text-decoration: none; }
.contact-card a:hover { color: var(--button-bg-color); }

/* ---------- Payment badges ---------- */

.pay-badge {
    display: inline-block;
    padding: 3px 12px;
    border: 1px solid rgba(255, 255, 255, 0.4);
    border-radius: 3px;
    font-size: 11px;
    letter-spacing: 0.05em;
    color: var(--footer-bottom-text-color);
    white-space: nowrap;
}

.list-payment {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    justify-content: flex-end;
    list-style: none;
    margin: 0;
    padding: 0;
}

@media (max-width: 991px) {
    .list-payment { justify-content: center; margin-top: 10px; }
}

/* ---------- Mobile drawer ----------
   Built by store.js from the desktop mega menu, which is hidden below 992px. */

.trian-drawer {
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    width: 290px;
    max-width: 85vw;
    background: #fff;
    z-index: 10000;
    transform: translateX(-100%);
    transition: transform .28s ease;
    overflow-y: auto;
    box-shadow: 2px 0 24px rgba(0, 0, 0, 0.14);
}

.trian-drawer.is-open {
    transform: translateX(0);
}

.trian-drawer__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 20px;
    background: var(--menu-bg-color);
    color: var(--menu-text-color);
    font-family: 'Lora', Georgia, serif;
    font-size: 16px;
}

.trian-drawer__close {
    border: 0;
    background: none;
    color: inherit;
    font-size: 28px;
    line-height: 1;
    cursor: pointer;
    padding: 0 4px;
}

.trian-drawer__list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.trian-drawer__list a {
    display: block;
    padding: 14px 20px;
    border-bottom: 1px solid #f0f0f0;
    color: #444;
    text-decoration: none;
    font-size: 14px;
}

.trian-drawer__list a:hover {
    background: #fafafa;
    color: var(--button-bg-color);
}

.trian-drawer__extras {
    padding: 18px 20px;
}

.trian-drawer__extras a {
    display: block;
    padding: 9px 0;
    color: #777;
    text-decoration: none;
    font-size: 13.5px;
}

.trian-drawer__extras i {
    width: 20px;
    color: var(--button-bg-color);
}

.trian-drawer-scrim {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.45);
    z-index: 9999;
    opacity: 0;
    visibility: hidden;
    transition: opacity .28s ease, visibility .28s ease;
}

.trian-drawer-scrim.is-open {
    opacity: 1;
    visibility: visible;
}

@media (min-width: 992px) {
    .trian-drawer,
    .trian-drawer-scrim { display: none; }
}

#menu-icon { cursor: pointer; }

/* ---------- Toast ---------- */

/* Above every overlay (quick-view 10050, newsletter 10040, drawer 10000).
   A toast fired from inside the quick-view modal was rendering behind its
   scrim, so "added to cart" gave no visible feedback at all. */
.trian-toast {
    position: fixed;
    left: 50%;
    bottom: 34px;
    transform: translate(-50%, 20px);
    z-index: 10060;
    background: #232323;
    color: #fff;
    padding: 13px 26px;
    border-radius: 3px;
    font-size: 13.5px;
    letter-spacing: 0.03em;
    box-shadow: 0 6px 24px rgba(0, 0, 0, 0.18);
    opacity: 0;
    transition: opacity .28s ease, transform .28s ease;
    pointer-events: none;
    max-width: 90vw;
    text-align: center;
}

.trian-toast.is-in {
    opacity: 1;
    transform: translate(-50%, 0);
}

/* ---------- Section spacing (mirrors reference inline styles) ---------- */

.ishi-slider-section { margin-bottom: 30px; }
.ishiservicestyle { margin-bottom: 70px; }
.ishiservicestyle .ishiservices-content { background: #f5f5f5; }
.featured-product-section { margin-bottom: 60px; }
.ishi-topbanner-section { margin-bottom: 40px; }
.ishi-story-section { margin-bottom: 70px; }
.ishi-story-section .story-color { background: #ffffff; }
.ishi-story-section .text-wrapper .title { color: #1f3143; }
.ishi-story-section .text-wrapper .sub-title { color: #ff7e41; }
.ishi-story-section .text-wrapper .description { color: #999999; }
.ishi-smartblog-section { margin-bottom: 50px; }

@media (max-width: 767px) {
    .ishi-slider-section,
    .ishiservicestyle,
    .featured-product-section,
    .ishi-story-section,
    .ishi-smartblog-section { margin-bottom: 30px; }
    .ishi-topbanner-section { margin-bottom: 0; }
    .pdp__title { font-size: 23px; }
    .pdp__price { font-size: 23px; }
}

/* The category rail and blog row are Owl carousels again (see shop-ui.js),
   so Owl owns their track widths. Only the item's inner styling lives here.
   Before Owl initialises, .owl-carousel hides children, so there is no
   flash of an unstyled stack. */
.ishicategoryblock { padding: 30px 0; }

.ishicategoryblock-container {
    width: auto;
    text-align: center;
}

.ishicategoryblock-container a {
    text-decoration: none;
    display: block;
}

.ishicategoryblock-container .image-container img {
    width: 100%;
    height: auto;
    max-width: 130px;
    border-radius: 50%;
    display: block;
    margin: 0 auto;
}

.ishicategoryblock-container .text-container {
    margin-top: 12px;
    font-size: 13.5px;
    color: #555;
    line-height: 1.5;
}

.ishicategoryblock-container a:hover .text-container {
    color: var(--button-bg-color);
}

.smartblog-carousel .blog_post { padding-bottom: 6px; }

/* Service row icons (Font Awesome, replacing the reference bitmaps). */
.service-icon {
    font-size: 34px;
    line-height: 1;
    color: var(--button-bg-color);
}

.ishiservices-content .services a,
.ishiservices-content .services {
    text-decoration: none;
}

.page-section-pad { padding-top: 10px; }