/* =====================================================================
   新立（環球）集團 — Premium reskin overlay
   Loads AFTER base.css. Re-skins the whole store via the theme's own
   design tokens + light, additive polish. No layout surgery.
   ===================================================================== */

/* ---- Premium heading font (body stays Noto Sans TC from settings) ---- */
@import url('https://fonts.googleapis.com/css2?family=Noto+Serif+TC:wght@500;700;900&display=swap');

:root {
  /* brand accents used by reskin + custom sections */
  --sr-paper: #F4F1EA;
  --sr-ink: #16222B;
  --sr-navy: #1B3A52;
  --sr-navy-deep: #122A3D;
  --sr-gold: #A9843F;
  --sr-gold-soft: #C7A86A;
  --sr-line: #E4DECE;
  --sr-surface-2: #FAF8F2;
  --sr-radius: 4px;
  --sr-radius-lg: 8px;
  --sr-shadow-sm: 0 1px 2px rgba(20,34,43,.05), 0 4px 16px rgba(20,34,43,.05);
  --sr-shadow-md: 0 8px 30px rgba(20,34,43,.08), 0 2px 6px rgba(20,34,43,.05);
  --sr-shadow-lg: 0 24px 60px rgba(20,34,43,.14);
  --sr-ease: cubic-bezier(.22,.61,.36,1);

  /* premium serif for all headings */
  --font-heading-family: "Noto Serif TC", "Songti TC", serif;
  --font-heading-weight: 700;
}

/* Remove the dated tiled background image if one is set */
body { background-image: none !important; background-color: #fff; }

/* ---- Typographic polish ---- */
h1, h2, h3, .h0, .h1, .h2, .h3,
.title, .product__title, .card-information__text,
.section-header__title, .collection__title,
.title-wrapper h2 {
  font-family: var(--font-heading-family);
  letter-spacing: .01em;
  text-wrap: pretty;
}
.product__title { line-height: 1.25; }

/* ---- Buttons: refined, with hover lift ---- */
.button,
.shopify-payment-button__button--unbranded,
button.button, .btn, .product-form__submit {
  border-radius: var(--sr-radius) !important;
  letter-spacing: .06em;
  font-weight: 600;
  transition: transform .35s var(--sr-ease), box-shadow .35s var(--sr-ease), background .25s, color .25s;
}
.button:not([disabled]):hover,
.product-form__submit:not([disabled]):hover {
  transform: translateY(-2px);
  box-shadow: var(--sr-shadow-md);
}
.button--primary, .product-form__submit {
  --color-button: var(--color-base-accent-1);
}

/* ---- Product / collection cards ---- */
.card-wrapper, .product-card-wrapper { border-radius: var(--sr-radius-lg); }
.card.card--product,
.card--product .card__inner {
  border-radius: var(--sr-radius-lg);
  overflow: hidden;
}
.card--product .card__inner {
  border: 1px solid var(--sr-line);
  background: #fff;
  transition: transform .5s var(--sr-ease), box-shadow .5s var(--sr-ease), border-color .3s;
}
.product-card-wrapper:hover .card__inner {
  transform: translateY(-6px);
  box-shadow: var(--sr-shadow-md);
  border-color: color-mix(in srgb, var(--sr-gold) 40%, var(--sr-line));
}
.card--product .media img { transition: transform .6s var(--sr-ease); }
.product-card-wrapper:hover .media img { transform: scale(1.05); }

.card-information { padding: 18px 18px 22px; }
.card-information__brand {
  display: block;
  font-size: 1.05rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--sr-gold);
  font-weight: 600;
  margin-bottom: 6px;
}
.card-information__text {
  font-family: var(--font-heading-family);
  font-size: 1.6rem;
  line-height: 1.5;
  color: var(--sr-ink);
}

/* "+" quick-add badge → gold circular button */
.badge.badge-circle {
  background: var(--sr-gold) !important;
  color: #fff !important;
  border: none !important;
  box-shadow: var(--sr-shadow-sm);
  transition: transform .3s var(--sr-ease), background .25s;
}
.badge.badge-circle:hover { transform: scale(1.08); background: var(--sr-navy) !important; }

/* sale / sold-out ribbon */
.badge-ribbon { border-radius: 2px; letter-spacing: .08em; font-weight: 700; }
.card__badge .badge.color-accent-2 { background: var(--sr-gold); color: #fff; }

/* ---- Price ---- */
.price__regular .price-item,
.price-item--regular { font-weight: 700; color: var(--sr-ink); }
.price--on-sale .price-item--sale { color: var(--sr-gold); font-weight: 700; }
.price__sale .price-item--regular { color: var(--sr-ink); opacity: .55; }

/* ---- Header — robust premium single row (logo · nav · search · icons) ---- */
.header-wrapper { border-bottom: 1px solid var(--sr-line); }
.header { backdrop-filter: saturate(140%) blur(12px); }
.header__heading-link, .header__menu-item { letter-spacing: .02em; }
.header__menu-item { position: relative; color: var(--sr-ink); }
.header__menu-item:hover { color: var(--sr-navy); }
/* keep the logo a sensible, consistent height */
.header__heading, .header__heading-link { display: inline-flex; align-items: center; gap: 1.2rem; }
.header__heading-logo { height: 4.8rem !important; width: auto !important; max-width: none !important; }
/* brand name + tagline beside the logo (matches the launch design) */
.sr-brandtxt { display: flex; flex-direction: column; line-height: 1.15; text-align: left; }
.sr-brandtxt b { font-family: var(--font-heading-family); font-size: 1.7rem; font-weight: 700; letter-spacing: .04em; color: var(--sr-ink); }
.sr-brandtxt small { font-size: 1rem; letter-spacing: .18em; color: var(--sr-ink-soft, #43525B); text-transform: uppercase; white-space: nowrap; margin-top: .2rem; }
@media screen and (max-width: 989px) {
  /* ---- Tidy mobile header: [目錄 toggle] [logo+brand] [search · cart] ---- */
  .header.header--has-menu {
    display: grid !important;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    column-gap: 1rem;
    padding: 1rem 1.4rem !important;
  }
  .header-wrapper .header-drawer, header-drawer { grid-column: 1; justify-self: start; }
  .header__heading-link, .header__heading { grid-column: 2; justify-self: center; display: inline-flex !important; align-items: center; gap: .8rem; margin: 0 !important; text-align: center; }
  .header__icons { grid-column: 3; justify-self: end; display: flex; align-items: center; gap: .4rem; margin: 0 !important; }

  /* brand name beside the logo — larger & clearer */
  .sr-brandtxt { display: flex !important; }
  .sr-brandtxt b { font-size: 1.75rem; line-height: 1.15; }
  .sr-brandtxt small { font-size: .9rem; letter-spacing: .08em; margin-top: .2rem; }
  .header__heading-logo { height: 4.6rem !important; }

  /* menu toggle = square bordered button with 產品/目錄 on two tidy lines */
  .header__icon--menu {
    display: flex !important; flex-direction: column; align-items: center; justify-content: center; gap: .25rem;
    width: 5.8rem; min-height: 5.8rem; padding: .7rem .4rem !important;
    border: 1.5px solid var(--sr-gold); border-radius: 14px;
    background: #fff; box-shadow: 0 2px 8px rgba(20,34,43,.06); overflow: hidden;
  }
  .header__icon--menu .icon-hamburger, .header__icon--menu .icon-close { width: 2rem; height: 2rem; }
  .header__menu-label {
    width: 2.2em; font-size: 1.15rem; font-weight: 700; color: var(--sr-ink);
    letter-spacing: 0; line-height: 1.2; text-align: center; word-break: normal; white-space: normal;
  }

  /* search becomes a magnifier icon; full search box hidden */
  .header__search-input { display: none !important; }
  .header__icon--search-m { display: inline-flex !important; }
  .header__icons .header__link-label { display: none !important; }
  .header__inline-menu { display: none !important; }
}
/* mobile search icon is hidden on desktop */
.header__icon--search-m { display: none; }
.header__menu-label { display: none; }
@media screen and (max-width: 989px) { .header__menu-label { display: block; } }

@media screen and (min-width: 990px) {
  /* Two-row header: flex-wrap lets the nav drop to its own full-width row so
     the long bilingual menu can never overlap the logo, search or icons. */
  .header.header--middle-left,
  .header.header--top-left,
  .header.header--has-menu {
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    column-gap: 2.4rem;
    row-gap: 1rem;
    padding-top: 1.4rem !important;
    padding-bottom: 1.4rem !important;
  }
  /* ---- Row 1: logo (left) · search · icons (right) ---- */
  .header__heading, .header__heading-link { order: 1; flex: 0 0 auto; margin: 0 !important; }
  .header__search-input { order: 2; flex: 0 0 auto; width: 24rem; max-width: 24rem; margin: 0 0 0 auto !important; }
  .header__icons { order: 3; flex: 0 0 auto; display: flex; align-items: center; column-gap: .8rem; margin: 0 !important; }
  .header__icons .header__link-label { display: none !important; }

  /* ---- Row 2: full-width centered nav ---- */
  .header__inline-menu {
    order: 4; flex: 0 0 100%; width: 100%; min-width: 0; margin: 0 !important;
    border-top: 1px solid var(--sr-line); padding-top: .6rem; margin-top: .4rem !important;
  }
  .header__inline-menu .list-menu--inline { gap: .4rem 1.6rem; flex-wrap: wrap; justify-content: center; }
  .header__menu-item { padding: .8rem 1rem; font-weight: 500; font-size: 1.45rem; white-space: nowrap; }

  /* compact, pill-shaped search */
  .header__search-input .search__input.field__input,
  .header__search-input .field__input {
    border-radius: 100px !important;
    border: 1px solid var(--sr-line) !important;
    height: 4.2rem; padding-inline: 1.6rem 4rem;
    background: var(--sr-surface-2) !important;
  }
  .header__search-input .search__button { border-radius: 100px; }
}
/* premium animated underline on nav */
.header__inline-menu .header__menu-item::after {
  content: ""; position: absolute; left: 1rem; right: 100%; bottom: .2rem; height: 1.5px;
  background: var(--sr-gold); transition: right .35s var(--sr-ease);
}
.header__inline-menu .header__menu-item:hover::after { right: 1rem; }
.header__icons .header__icon { color: var(--sr-ink); }
.header__icons .header__icon:hover { color: var(--sr-gold); }

/* ---- Section titles: gold eyebrow rhythm ---- */
.title-wrapper-with-link, .section-header { letter-spacing: .01em; }
.collection__title .title,
.title-wrapper h2.title {
  position: relative;
}

/* ---- Links / RTE ---- */
.rte a, a.link { text-underline-offset: 3px; }
.rte h2, .rte h3 { font-family: var(--font-heading-family); }

/* ---- Footer polish (theme already sets dark bg via settings) ---- */
.footer { border-top: 2px solid var(--sr-gold); }
.footer__list-social .list-social__link:hover { color: var(--sr-gold-soft); }

/* ---- Image-with-text blocks: softer frame ---- */
.image-with-text__media, .collection-hero__image,
.media--transparent { border-radius: var(--sr-radius-lg); }

/* ---- Product page gallery + form ---- */
.product__media-item img, .product__media { border-radius: var(--sr-radius-lg); }
.product .price { font-size: 2.2rem; }

/* ---- Quantity / inputs ---- */
.quantity, .field__input, .select__select, .customer input, .customer select {
  border-radius: var(--sr-radius) !important;
}

/* ---- Pagination / breadcrumb accents ---- */
.pagination__item--current,
.pagination__item:hover { color: var(--sr-gold); }

/* ---- Selection ---- */
::selection { background: var(--sr-gold-soft); color: #fff; }

/* ---- Reduced motion ---- */
@media (prefers-reduced-motion: reduce) {
  .button, .card__inner, .media img { transition: none !important; }
  .product-card-wrapper:hover .card__inner,
  .product-card-wrapper:hover .media img,
  .button:hover { transform: none !important; }
}

/* =====================================================================
   PDP (product) + PLP (collection) premium layouts — Shinritsu
   Ported from the approved redesign previews onto the live theme markup.
   ===================================================================== */
:root { --sr-ink-soft: #43525B; }

/* ---- Shared breadcrumb ---- */
.sr-crumb { border-bottom: 1px solid var(--sr-line); background: #fff; }
.sr-crumb__in { display: flex; align-items: center; gap: 10px; padding-block: 14px; font-size: 1.3rem; color: var(--sr-ink-soft); flex-wrap: wrap; }
.sr-crumb__in a { color: var(--sr-ink-soft); transition: color .2s; }
.sr-crumb__in a:hover { color: var(--sr-gold); }
.sr-crumb__in .sep { opacity: .45; }
.sr-crumb__in .cur { color: var(--sr-ink); font-weight: 600; }

/* ---- gold eyebrow (shared) ---- */
.sr-eyebrow { font-size: 1.2rem; letter-spacing: .32em; text-transform: uppercase; font-weight: 600; color: var(--sr-gold); display: inline-flex; align-items: center; gap: 12px; }
.sr-eyebrow::before { content: ""; width: 28px; height: 1px; background: var(--sr-gold); opacity: .7; }

/* =====================================================================
   PDP
   ===================================================================== */
.pdp { padding-block: clamp(24px, 4vw, 56px) !important; }
.pdp .product.pdp__grid { display: grid !important; grid-template-columns: minmax(0, 1.06fr) minmax(0, .94fr) !important; gap: clamp(28px, 4vw, 64px); align-items: start; }
/* neutralise the base theme's `.product__media-wrapper{max-width:55%}` which fights
   inside our grid and crushes the info column (long titles then wrap to 1 char/line) */
.pdp .product__media-wrapper.pdp__media { max-width: 100% !important; width: auto !important; }
.pdp .product__info-wrapper.pdp__info { max-width: 100% !important; width: auto !important; }

.pdp__media { min-width: 0; }
.pdp-gallery { position: sticky; top: 90px; display: grid; grid-template-columns: 78px minmax(0, 1fr); gap: 14px; align-items: start; }
.pdp-thumbs { display: flex; flex-direction: column; gap: 10px; }
.pdp-thumb { aspect-ratio: 1/1; border: 1px solid var(--sr-line); border-radius: var(--sr-radius); overflow: hidden; background: var(--sr-surface-2); cursor: pointer; padding: 0; display: grid; place-items: center; transition: border-color .25s, transform .25s; }
.pdp-thumb img { width: 100%; height: 100%; object-fit: cover; }
.pdp-thumb.is-active { border-color: var(--sr-gold); }
.pdp-thumb:hover { transform: translateY(-2px); }
.pdp-main { border: 1px solid var(--sr-line); border-radius: var(--sr-radius-lg); overflow: hidden; background: linear-gradient(150deg, #fff, var(--sr-surface-2)); position: relative; }
/* force the EasyStore media list to behave as a single-image scroller so it can never
   blow out the grid column when its slider JS hasn't laid the slides out yet */
.pdp-main .product__media-list { margin: 0; display: flex !important; flex-wrap: nowrap !important; width: 100%; max-width: 100%; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; padding: 0; list-style: none; }
.pdp-main .product__media-list::-webkit-scrollbar { display: none; }
.pdp-main .product__media-item { flex: 0 0 100% !important; width: 100% !important; min-width: 100% !important; max-width: 100% !important; scroll-snap-align: start; box-sizing: border-box; display: flex; align-items: center; justify-content: center; padding: clamp(16px, 3vw, 40px); }
.pdp-main .product__media-item img { width: 100%; height: auto; max-height: 540px; object-fit: contain; border-radius: 0; }
.pdp-main .product__media-item iframe { width: 100%; }
.pdp-main .slider-buttons { padding-bottom: 1.2rem; }

/* info column */
.pdp__info { min-width: 0; }
.pdp__info .product__info-container { background: none; padding: 0; }
.pdp__brand { font-size: 1.2rem; letter-spacing: .2em; text-transform: uppercase; color: var(--sr-gold); font-weight: 600; margin-bottom: 12px; }
.pdp .product__info-container .product__title.pdp__h1 { font-size: clamp(2rem, 1.8vw, 2.6rem) !important; line-height: 1.4 !important; margin: 0 !important; word-break: normal !important; overflow-wrap: anywhere; }
.pdp__rating { display: flex; align-items: center; gap: 10px; margin-top: 16px; }
.pdp__rating .stars { display: inline-flex; gap: 2px; color: var(--sr-gold); }
.pdp__rating .stars svg { width: 16px; height: 16px; fill: currentColor; }
.pdp__rating span { font-size: 1.3rem; color: var(--sr-ink-soft); }

.pdp__price-wrap { margin-top: 22px; padding-bottom: 24px; border-bottom: 1px solid var(--sr-line); }
.pdp__price-wrap .price { font-family: var(--font-heading-family); }
.pdp__price-wrap .price-item--regular { font-size: 3.2rem; line-height: 1; }
.pdp__price-wrap .price--on-sale .price-item--regular { font-size: 1.8rem; }
.pdp__price-wrap .price-item--sale { font-size: 3.2rem; color: var(--sr-gold); }
.pdp__price-wrap .price__badge-sale { background: var(--sr-gold); color: #fff; }

.pdp__desc { margin-top: 22px; color: var(--sr-ink-soft); line-height: 1.95; font-size: 1.5rem; }

/* product form polish */
.pdp .product-form { margin-top: 26px; }
.pdp .product-form__input { margin-bottom: 18px; }
.pdp .quantity { display: inline-flex; align-items: center; border: 1px solid var(--sr-line); border-radius: var(--sr-radius); overflow: hidden; height: 5rem; }
.pdp .quantity__button { width: 4.6rem; background: #fff; border: none; color: var(--sr-ink); }
.pdp .quantity__button:hover { background: var(--sr-surface-2); }
.pdp .quantity__input { width: 5rem; border: none; font-weight: 600; }
.pdp .product-form__quantity .form__label { font-size: 1.3rem; font-weight: 600; letter-spacing: .04em; margin-bottom: 10px; }
.pdp .product-form__submit.button--primary {
  --color-button: 169 132 63;            /* gold rgb */
  background: var(--sr-gold) !important;
  color: #fff !important;
  border-color: var(--sr-gold) !important;
  height: 5.4rem; font-size: 1.5rem; letter-spacing: .08em;
}
.pdp .product-form__submit.button--primary:hover { background: var(--sr-navy) !important; border-color: var(--sr-navy) !important; }

/* assurance row */
.pdp__assure { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-top: 28px; padding-top: 26px; border-top: 1px solid var(--sr-line); }
.pdp__assure .a { display: flex; gap: 12px; align-items: center; }
.pdp__assure .a-ic { width: 30px; height: 30px; flex: none; color: var(--sr-gold); display: grid; place-items: center; }
.pdp__assure .a-ic svg { width: 26px; height: 26px; stroke: currentColor; fill: none; stroke-width: 1.4; }
.pdp__assure .a-ic img { width: 30px; height: 30px; object-fit: contain; }
.pdp__assure .a b { font-family: var(--font-heading-family); font-size: 1.35rem; display: block; line-height: 1.3; color: var(--sr-ink); }
.pdp__assure .a span { font-size: 1.2rem; color: var(--sr-ink-soft); }

/* social row spacing */
.pdp .social-sharing, .pdp .product__share { margin-top: 24px; }

/* detail tabs */
.pdp-detail { border-top: 1px solid var(--sr-line); margin-top: clamp(36px, 5vw, 64px); padding-top: clamp(40px, 5vw, 72px); }
.pdp-detail__tabs { display: flex; gap: 32px; border-bottom: 1px solid var(--sr-line); margin-bottom: 32px; flex-wrap: wrap; }
.pdp-detail__tabs button { background: none; border: none; padding: 0 0 16px; font-size: 1.7rem; font-family: var(--font-heading-family); font-weight: 700; color: var(--sr-ink-soft); position: relative; cursor: pointer; }
.pdp-detail__tabs button.is-active { color: var(--sr-ink); }
.pdp-detail__tabs button.is-active::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; background: var(--sr-gold); }
.pdp-detail__pane { display: none; max-width: 860px; }
.pdp-detail__pane.is-active { display: block; }
.pdp-detail__pane.rte, .pdp-detail__pane .rte { line-height: 2; color: var(--sr-ink-soft); }

@media screen and (max-width: 989px) {
  .pdp .product.pdp__grid { grid-template-columns: 1fr !important; }
  .pdp-gallery { position: static; }
}
@media screen and (max-width: 560px) {
  .pdp-gallery { grid-template-columns: 1fr; }
  .pdp-thumbs { flex-direction: row; flex-wrap: wrap; }
  .pdp-thumb { width: 64px; }
  .pdp__assure { grid-template-columns: 1fr; gap: 12px; }
}

/* =====================================================================
   PLP — collection hero + bar; premium filter sidebar
   ===================================================================== */
.coll-hero { background: var(--sr-navy-deep); color: #fff; position: relative; overflow: hidden; }
.coll-hero::before { content: ""; position: absolute; top: -120px; right: -80px; width: 360px; height: 360px; border: 1px solid rgba(201,168,106,.25); border-radius: 50%; pointer-events: none; }
.coll-hero__in { position: relative; padding-block: clamp(40px, 6vw, 76px); }
.coll-hero .sr-eyebrow { color: var(--sr-gold-soft); }
.coll-hero .sr-eyebrow::before { background: var(--sr-gold-soft); }
.coll-hero .collection-hero__title { color: #fff; font-size: clamp(3rem, 4vw, 5rem); margin: 16px 0 0; }
.coll-hero__desc { color: #C9C2B0; margin: 14px 0 0; max-width: 46em; line-height: 1.9; font-size: 1.5rem; }
.coll-hero__desc .rte * { color: inherit; }

.plp { padding-block: clamp(20px, 3vw, 36px) 0; }
.plp__bar { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; padding-block: 22px; }
.plp__count { font-size: 1.4rem; color: var(--sr-ink-soft); }
.plp__count b { color: var(--sr-ink); }
.plp__bar .collection-filters { margin: 0; }
.plp__bar .collection-filters__item { padding-left: 0; }

/* premium filter sidebar (overrides filters.liquid inline styles) */
.filter-wrapper .flex.flex-space-between { font-family: var(--font-heading-family); font-weight: 700; font-size: 1.6rem; padding-bottom: 6px; }
.filter-wrapper .filter-collapsible > summary h4,
.filter-wrapper .filter-boolean-row h4 { font-family: var(--font-heading-family); font-size: 1.5rem; }
.filter-wrapper .filter-collapsible,
.filter-wrapper .filter-boolean-row { border-color: var(--sr-line) !important; }
.filter-wrapper label { font-size: 1.35rem; color: var(--sr-ink-soft); }
.filter-wrapper .styled-checkbox + label { padding: 4px 0; display: inline-block; }

/* keep collection grid tidy */
#main-collection-product-grid { row-gap: 2.4rem; }

@media screen and (max-width:989px){
  .header__icon--menu{display:inline-flex!important;align-items:center!important;justify-content:center!important;align-self:center!important;width:4.6rem!important;height:4.6rem!important;min-height:0!important;padding:0!important;margin:0!important;border:1.5px solid var(--sr-gold-soft)!important;border-radius:12px!important;background:linear-gradient(150deg,var(--sr-navy),var(--sr-navy-deep))!important;box-shadow:0 4px 14px rgba(18,42,61,.20)!important;overflow:hidden!important;}
  .header__icon--menu .icon-hamburger,.header__icon--menu .icon-close{display:none!important;}
  .header__icon--menu>span:not(.header__menu-label){display:none!important;}
  .header__menu-label{display:block!important;width:2.4em!important;font-family:var(--font-heading-family);font-size:1.18rem!important;font-weight:700!important;color:#fff!important;letter-spacing:.08em!important;line-height:1.3!important;text-align:center!important;white-space:normal!important;word-break:normal!important;}
}