/*
 Theme Name:   Shop Zita
 Theme URI:    https://wpzita.com/
 Description:  Shop Zita is a child theme of zita WordPress theme, This theme add frontend layout switcher for shop page. Zita is best theme to create a perfect shop website using WooCommere. Zita is completely builder based theme, With super fast and highly customizable options. Zita works with any of your favourite page builder like Elementor, Visual Composer, Beaver Builder, SiteOrigin, Divi, Brizy etc. Best Suitable for creating any type of website such a corporate, store, agency, blog, portfolio, restaurant, wedding, construction, hospital, school, interior, car workshop, life coach, wine shop, barber shop, furniture shop, yoga, resume, charity, digital marketing etc. Zita includes 8 unique header layout and 8 footer widget layout which makes it extremely powerful. Some more amazing feature are #Woocommerce ready #RTL Ready #Full Responsive #Edit settings in tablet & mobile #Top header #Bottom header #Top footer #Bottom Footer #Transparent Header. Looking for perfect base theme? Looking for perfect multipurpose theme? No need to Look further! Just go with Zita demos: https://wpzita.com/. Zita is built with best SEO practice and best friend of Woocommerce and Elementor.
 Author:       WpZita Team
 Author URI:   https://wpzita.com/contact-us/
 Template:     zita
 Version:      1.4
 Requires at least: 5.5
 Tested up to: 6.2
 Requires PHP: 5.5
 License:      GNU General Public License v3 or later
 License URI:   http://www.gnu.org/licenses/gpl-3.0.html
 Tags: two-columns, right-sidebar, custom-menu, custom-background, editor-style, translation-ready, full-width-template, flexible-header, sticky-post, theme-options, one-column, e-commerce, blog, photography, threaded-comments, custom-colors 
 Text Domain:  shop-zita
*/
.zita-list-grid-switcher {
    float: right;
    margin-right:0px;
    position: relative;
}
.zita-list-grid-switcher a{
    width: 40px;
    height: 40px;
    color: #fff;
    background:#ebe9eb;
    display: block;
    float: left;
    border: 1px solid #ddd;
    text-align: center;
    font-size: 20px;
    line-height: 42px;
    margin-right:10px;
}
.zita-list-grid-switcher a.selected, .zita-list-grid-switcher a:hover{
background:#006799;
border: 1px solid #006799;
color: #fff;
}
.shop-zita-product-excerpt,.zita-list-view .zta-woo-shop-product-description{
    display: none;
}
.zita-list-view .shop-zita-product-excerpt{
    display: block;
}

.woocommerce-page .zita-list-view ul.products li.product {
    float: left;
    width: 100%!important;
    margin-right: 0%!important;
    margin-bottom: 15px!important;
}
.zita-list-view .zita-shop-thumbnail-wrap{
width:35%;
float:left;
}
.zita-list-view .zita-shop-summary-wrap{
width:65%;
float:left;
    padding-left: 20px;
}
#shop-product-wrap ul.products{
    padding-top: 15px;
}

.woocommerce .zita-list-view ul.products li.product .onsale {
    top: 0;
    right:auto;
    left:0;
    margin: -.5em -.5em 0 0;
}

.zita-list-view ul.products  .zita-shadow-5 .zita-shop-summary-wrap,.zita-list-view ul.products  .zita-shadow-4 .zita-shop-summary-wrap,.zita-list-view ul.products  .zita-shadow-3 .zita-shop-summary-wrap,.zita-list-view ul.products  .zita-shadow-2 .zita-shop-summary-wrap,.zita-list-view ul.products  .zita-shadow-1 .zita-shop-summary-wrap{
   padding-top:15px!important;
}
.powered-by-wordpress a{
    color: #111;
}
.zita-menu > li > a{
    padding: 16px;
}
@media screen and (max-width: 1024px){
.mobile-menu-active .sider.overcenter .zita-menu, .mobile-above-menu-active .sider.overcenter .zita-menu, .mobile-bottom-menu-active .sider.overcenter .zita-menu {
    margin-right: 9px;
    margin-left:  9px;
}
}
@media screen and (max-width: 767px){
#respond.comment-respond #submit{
    padding: 9px 16px;
}
.bottom-footer-container{
    padding: 9px 0;
}
h2{
    font-size: 21px;
}
}

/* Responsive Vertical Video (9:16) — modern, no padding hack */
.video-container {
  position: relative;
  /* 手機放大一點、桌機不要太寬：最小260px，隨視窗變化，中止於420px */
  width: clamp(260px, 40vw, 420px);
  aspect-ratio: 9 / 16;          /* 垂直比例 */
  margin: 16px auto;
  overflow: hidden;
  border-radius: 10px;
  /* 安全高度上限，避免超過視窗高度（必要時縮小整個容器） */
  max-height: 80vh;
}

.video-container iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

/* 依裝置再微調：平板以上稍微放大、超大螢幕也不會爆高 */
@media (min-width: 768px) {
  .video-container { width: clamp(280px, 28vw, 400px); }
}
@media (min-width: 1200px) {
  .video-container { width: clamp(300px, 24vw, 420px); }
}

/* 以下是右側班表懸浮按鈕 */
/* === 懸浮按鈕：台妹當周班表 === */

/* 按鈕群組容器（可以之後再加第2顆） */
.floating-btn-group {
  position: fixed;
  right: 14px;              /* 右側距離 */
  top: 50%;                 /* 垂直置中 */
  transform: translateY(-50%);
  z-index: 9999;
  display: flex;
  flex-direction: column;
  gap: 10px;
  pointer-events: none;     /* 容器不吃滑鼠，裡面按鈕自己吃 */
}

/* 單一懸浮按鈕 */
.floating-btn {
  pointer-events: auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 10px 18px;
  min-width: 140px;
  border-radius: 999px;
  background: linear-gradient(135deg, #ff9ac8, #ff5fa8);
  color: #ffffff;
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
  box-shadow: 0 6px 16px rgba(255, 105, 180, 0.45);
  transition: transform 0.18s ease, box-shadow 0.18s ease, opacity 0.18s ease;
  cursor: pointer;
  white-space: nowrap;
  border: none;
}

/* 文字容器（桌機一行、手機兩行靠它） */
.floating-btn-label {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
}

/* 兩行其實都只是 span，桌機時橫排 */
.floating-btn-label .line-1,
.floating-btn-label .line-2 {
  display: inline-block;
}

/* hover / active 效果 */
.floating-btn:hover {
  transform: translateY(-2px) scale(1.03);
  box-shadow: 0 10px 22px rgba(255, 105, 180, 0.6);
}

.floating-btn:active {
  transform: scale(0.97);
  box-shadow: 0 4px 10px rgba(255, 105, 180, 0.5);
}

/* === 手機版調整（寬度變窄、文字變上下兩行、位置改右下偏上） === */
@media (max-width: 768px) {
  .floating-btn-group {
    right: 12px;
    bottom: 110px;     /* 避開左下角其他懸浮按鈕，視情況可以再調 */
    top: auto;
    transform: none;
  }

  .floating-btn {
    padding: 8px 10px;
    min-width: auto;   /* 取消固定寬度 */
    max-width: 90px;   /* 限制不要太寬 */
    font-size: 13px;
    line-height: 1.2;
    text-align: center;
    white-space: normal;  /* 允許換行 */
  }

  .floating-btn-label {
    flex-direction: column;   /* 手機改成上下排 */
    gap: 2px;
  }

  .floating-btn-label .line-1,
  .floating-btn-label .line-2 {
    display: block;
  }
}

/* Q&A用 */