/*
 | site.css — 365shop Laravel demo store
 | Per-store overrides and missing utility classes not covered by the
 | global CDN CSS (cdn.365shop.com.tw/cart/365shop/v0.1/dist/css/styles.css).
 |
 | Load order: CDN styles.css → customstyles.css (store CDN) → this file
 */

/* ── Header height reserve ────────────────────────────────────────────
   main_header is position:fixed in CDN CSS.  We need the <header> wrapper
   to hold vertical space so page content isn't hidden underneath it.
   Old SCSS: header { position:relative; height:120px }
   ─────────────────────────────────────────────────────────────────── */
header.header {
    position: relative;
    height: 120px;
}
@media (max-width: 767px) {
    header.header {
        height: 83px;
    }
}

/* ── Scrollbox width override ─────────────────────────────────────────
   CDN CSS hard-codes .scrollbox { width:400px }.  Make it fill the
   available top-bar width instead.
   ─────────────────────────────────────────────────────────────────── */
.scrollbox {
    width: 100% !important;
    max-width: 100%;
}

/* ── .index_box image fill ────────────────────────────────────────────
   CDN defines .index_box base layout; we only ensure images fill width.
   ─────────────────────────────────────────────────────────────────── */
.index_box .pic { display: block; }
.index_box .pic img { display: block; width: 100%; }

/* ── TOPWALL: text bar anchored to bottom ─────────────────────────────
   CDN styles.css issues fixed here:
   1. Duplicate hover rule cancels background darkening → override with !important
   2. CDN first-set hover rule expands .txt height 0→2.8rem; the duplicate
      only overrides line-height, NOT height — so .txt still expands and the
      black bar appears to "lift upward". Lock height to 0 permanently.
   3. CDN has transition:all on .text — setting transition:background keeps
      the darkening smooth without animating position/size.
   ─────────────────────────────────────────────────────────────────── */
.index_box:not(.full_mask) .text {
    z-index: 2;
    transition: background-color .3s ease-in-out !important; /* no position/size anim */
}
.index_box:not(.full_mask) .text .txt {
    height: 0 !important;       /* keep bar fixed height — no upward expansion */
    overflow: hidden !important;
    margin: 0 !important;
}
.index_box:not(.full_mask):hover .text {
    background-color: rgba(0,0,0,.85) !important;
}
.index_box:not(.full_mask):hover .text .txt {
    height: 0 !important;       /* also suppress CDN hover expansion */
}

/* ── MIDWALL / BOTTOMWALL (.full_mask): hover-reveal overlay + centred text ─
   CDN default: overlay hidden (opacity:0). CDN has a duplicate hover rule
   that also sets opacity:0, cancelling the hover effect. We fix the duplicate
   with !important so hover correctly reveals the overlay and centred text.
   Result: clean image by default (matches demo2), overlay reveals on hover.
   ─────────────────────────────────────────────────────────────────── */
.index_box.full_mask .pic {
    position: relative;
    overflow: hidden;
}
.index_box.full_mask:hover .pic::before,
.index_box.full_mask:hover .text {
    opacity: 1 !important;
}
.index_box.full_mask:hover .text {
    top: 50% !important;
}

/* ── .sp_banner (SliderPro wrapper) ──────────────────────────────────
   The CDN styles.js auto-initialises .sp_banner divs.  We hide before
   init to prevent flash of unstyled content (display:none on element
   itself; JS removes it after mount).
   ─────────────────────────────────────────────────────────────────── */
.sp_banner {
    width: 100%;
    overflow: hidden;
    background: #f5f5f5;
}


/* ── .sub_menu (footer column group) ─────────────────────────────────
   ─────────────────────────────────────────────────────────────────── */
.sub_menu h4 {
    font-size: 14px;
    font-weight: 700;
    border-bottom: 1px solid rgba(255,255,255,.15);
    padding-bottom: 6px;
    margin-bottom: 10px;
    color: #ccc;
}
.sub_menu ul li { margin-bottom: 4px; }
.sub_menu ul li a { color: #999; font-size: 13px; }
.sub_menu ul li a:hover { color: #fff; }

/* ── top_footer visibility ────────────────────────────────────────────
   Template uses Bootstrap 3 classes: hidden visible-md visible-lg.
   Bootstrap 3 handles these correctly; ensure they render properly.
   ─────────────────────────────────────────────────────────────────── */
.top_footer h4 { color: #ccc; }

/* ── bottom_footer copyright bar ─────────────────────────────────────
   ─────────────────────────────────────────────────────────────────── */
.bottom_footer .copyright {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    padding: 12px 0;
    color: #888;
    font-size: 12px;
    margin: 0;
}
.bottom_footer .copyright .provider a { color: #e63329; }

/* ── .main_content ────────────────────────────────────────────────────
   Inner page padding (catalog, product, cart, search pages)
   ─────────────────────────────────────────────────────────────────── */
.main_content {
    padding-bottom: 60px;
}

/* ── .product_list_block ──────────────────────────────────────────────
   ─────────────────────────────────────────────────────────────────── */
.product_list_block {
    margin-top: 20px;
}

/* ── .product_menu_list (navgoco accordion sidebar) ─────────────────
   Matches original product_new_menu.php output structure.
   CDN navgoco plugin handles expand/collapse; these styles handle
   the visual appearance for open/closed/active states.
   ─────────────────────────────────────────────────────────────────── */
aside.sidebar { margin-bottom: 20px; }

.product_menu_list { border: 1px solid #ddd; border-radius: 4px; overflow: hidden; }

/* All menu links */
.product_menu_list a {
    display: block;
    padding: 9px 14px;
    color: #333;
    font-size: 14px;
    border-bottom: 1px solid #eee;
    text-decoration: none;
    transition: background .15s, color .15s;
}
.product_menu_list a:hover { background: #f5f5f5; color: #e63329; }

/* Level 1 — root categories */
.product_menu_list > li.level1 > a { font-weight: 600; background: #fafafa; }

/* Level 2 — child categories */
.product_menu_list li.level2 > a {
    padding-left: 28px;
    font-size: 13px;
    background: #fff;
    font-weight: 400;
}
/* Level 3 (if any) */
.product_menu_list li.level3 > a {
    padding-left: 44px;
    font-size: 13px;
    background: #fff;
}

/* Active / current item */
.product_menu_list li.active > a,
.product_menu_list li.active > a:hover {
    color: #e63329 !important;
    font-weight: 700;
    background: #fff5f5;
}

/* Hidden sub-lists (navgoco toggles display; provide default collapsed state) */
.product_menu_list ul { display: none; list-style: none; padding: 0; margin: 0; }
.product_menu_list li.open > ul { display: block; }

/* Caret indicator (navgoco adds/removes .open class on the <li>) */
.product_menu_list li.level1 > a[href="#"]::after {
    content: "\25B6";
    float: right;
    font-size: 10px;
    line-height: 1.6;
    color: #aaa;
    transition: transform .2s;
}
.product_menu_list li.level1.open > a[href="#"]::after { transform: rotate(90deg); }

/* ── .category_menu sidebar (legacy Bootstrap-panel style, kept for compat) ── */
.category_menu .panel-heading { background: #f7f7f7; }
.category_list .list-group-item { padding: 8px 12px; }
.category_list .list-group-item.active > a { color: #fff; }
.sub_category { padding: 6px 0 2px 12px; margin: 4px 0 0; }
.sub_category li { margin-bottom: 2px; }
.sub_category li a { font-size: 13px; color: #666; }
.sub_category li.active a { color: #e63329; font-weight: 700; }

/* ── .product_sort_bar ────────────────────────────────────────────────
   ─────────────────────────────────────────────────────────────────── */
.product_sort_bar {
    padding: 8px 0;
    border-bottom: 1px solid #eee;
    margin-bottom: 20px !important;
}

/* ── .strict6 tighter gutter grid ────────────────────────────────────
   Matches original: narrow gutters for product card grids
   ─────────────────────────────────────────────────────────────────── */
.strict6 { margin-left: -6px; margin-right: -6px; }
.strict6 > [class*="col-"] { padding-left: 6px; padding-right: 6px; }

/* ── product detail page ──────────────────────────────────────────────
   ─────────────────────────────────────────────────────────────────── */
.product_view_block { padding: 20px 0; }
.product_title_box h2.title { font-size: 20px; font-weight: 700; line-height: 1.4; }
.product_title_box .brand_name { display: block; font-size: 12px; color: #999; font-weight: 400; margin-bottom: 4px; text-transform: uppercase; letter-spacing: 1px; }
.product_thumb_list { margin-top: 8px; }
.product_thumb_list .thumb { cursor: pointer; transition: border-color .2s; }

/* ── product detail: promotions panel ────────────────────────────────
   ─────────────────────────────────────────────────────────────────── */
.promote_link_list { margin: 10px 0; border-color: #e63329; }
.promote_link_list .panel-body { padding: 8px 12px; }
.promote_link { padding: 3px 0; }
.promote_link_tag { color: #e63329; font-size: 13px; }
.promote_link_tag .fa { margin-right: 5px; }
.promote_link_url { color: #e63329; text-decoration: none; }
.promote_link_url:hover { text-decoration: underline; }

/* ── product detail: spec key-value rows (.product_spec_tag) ─────────
   Mirrors old PHP dl.product_spec_tag dt/dd layout
   ─────────────────────────────────────────────────────────────────── */
dl.product_spec_tag {
    display: flex;
    margin: 0 0 4px;
    font-size: 13px;
    line-height: 1.6;
}
dl.product_spec_tag dt {
    flex: 0 0 80px;
    color: #888;
    font-weight: 400;
}
dl.product_spec_tag dt::after { content: '：'; }
dl.product_spec_tag dd { flex: 1; margin: 0; }

/* ── product detail: file/PDF list ──────────────────────────────────
   ─────────────────────────────────────────────────────────────────── */
.product_files { margin-top: 12px; }
.product_files h5.title { font-size: 13px; color: #555; margin-bottom: 6px; }
.product_files_list li { margin-bottom: 4px; }
.product_files_list a { font-size: 13px; color: #555; }
.product_files_list a:hover { color: #e63329; }
.product_files_list .fa { margin-right: 6px; color: #c0392b; }

/* ── product detail: spec box general ───────────────────────────────
   ─────────────────────────────────────────────────────────────────── */
.product_spec_box { margin: 10px 0; font-size: 13px; line-height: 1.8; }

/* ── cart page ────────────────────────────────────────────────────────
   ─────────────────────────────────────────────────────────────────── */
.cart_page .media { display: flex; align-items: flex-start; }
.cart_page .media-left { padding-right: 15px; }
.cart_page .media-right { padding-left: 15px; }

/* ── Breadcrumb spacing ───────────────────────────────────────────────
   ─────────────────────────────────────────────────────────────────── */
.breadcrumb { background: transparent; padding-left: 0; margin-bottom: 10px; }

/* .main_title — CDN already defines font-size/border; do NOT override here */

/* ── Mobile menu ──────────────────────────────────────────────────────
   ─────────────────────────────────────────────────────────────────── */
.mobile-menu { background: #222; }
.mobile-menu .mobile-menu-container { padding: 10px 0; }
.mobile_menu_list li a { color: #ddd; padding: 8px 16px; display: block; font-size: 14px; }
.mobile_menu_list li a:hover { color: #fff; background: #333; }
.mobile_menu_list .level2 a { padding-left: 32px; font-size: 13px; color: #aaa; }
.mobile-sub-menu { padding: 8px 16px; border-bottom: 1px solid #333; }
.mobile-sub-menu a { color: #bbb; font-size: 13px; margin-right: 12px; }

/* ── Language switcher ────────────────────────────────────────────────
   Appears in the desktop link_list (right utility bar) and in the
   navbar-header on mobile.
   ─────────────────────────────────────────────────────────────────── */
.lang_switcher {
    display: inline-flex;
    align-items: center;
    gap: 2px;
}
.lang_switcher .lang_btn {
    display: inline-block;
    padding: 2px 7px;
    font-size: 12px;
    font-weight: 600;
    border: 1px solid rgba(255,255,255,.25);
    border-radius: 3px;
    color: #ccc;
    text-decoration: none;
    cursor: pointer;
    transition: background .15s, color .15s;
    letter-spacing: .5px;
}
.lang_switcher .lang_btn:hover {
    background: rgba(255,255,255,.15);
    color: #fff;
}
.lang_switcher .lang_btn.active {
    background: #e63329;
    border-color: #e63329;
    color: #fff;
    cursor: default;
}
/* Align the <li> wrapper vertically in the link_list */
.lang_switcher_li {
    display: flex;
    align-items: center;
}
/* Mobile: show the switcher below the logo */
@media (max-width: 767px) {
    .lang_switcher.hidden-xs { display: none !important; }
    .mobile-sub-menu .lang_switcher { margin-left: 8px; }
}

/* ── 產品卡等高(listing grid)────────────────────────────────────────
   Bootstrap float 欄對「內容不等高」的卡片會卡住 → 錯位、最後一張孤行。
   改 flex-wrap + 卡片填滿欄高,使同一列卡片高度齊一(list_text、原價
   有無都一樣高)。只 scope 到產品 grid 容器,不影響其他版面。
   ─────────────────────────────────────────────────────────────────── */
.product_target_zone,
.promote_card_list,
.row.product_list {
    display: flex;
    flex-wrap: wrap;
}
.product_target_zone > [class*="col-"],
.promote_card_list > [class*="col-"],
.row.product_list > [class*="col-"] {
    display: flex;          /* 讓欄內卡片拉伸到該列最高 */
}
.product_target_zone .product_box,
.promote_card_list .product_box,
.row.product_list .product_box {
    width: 100%;            /* 卡片填滿欄寬,並隨欄高拉伸齊一 */
}
/* 整列欄位(分頁/無商品訊息等)不需 flex 內容 */
.product_target_zone > .col-sm-12,
.promote_card_list > .col-sm-12,
.row.product_list > .col-sm-12 {
    display: block;
}

/* 列表卡 React 價格元件(共用詳情頁 PriceWidget),調整在卡片上的呈現 */
.product_price_widget .product_price {
    margin: 4px 0;
}
.product_price_widget .product_level_price .level-price {
    display: inline-block;
    font-size: 12px;
    color: #b8860b;
    margin-bottom: 2px;
}
.product_price_widget .product_price_line {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 8px;
}
.product_price_widget .price.saleprice.large {
    font-size: 16px;
    font-weight: bold;
}
.product_price_widget .price.disabled {
    text-decoration: line-through;
    color: #999;
    font-size: 13px;
}