/* TND Premium Header — tamilnadudigital.com (boAt-style layout) */
:root{
  --tnd-ph-accent: #111111;
  --tnd-ph-bg: #ffffff;
  --tnd-ph-text: #1a1a1a;
  --tnd-ph-muted: #6b6b6b;
  --tnd-ph-border: #ececec;
  --tnd-ph-mobile-bar-bg: #111111;
  --tnd-ph-mobile-bar-text: #ffffff;
}

.tnd-ph-wrapper{
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  background: var(--tnd-ph-bg);
  border-bottom: 1px solid var(--tnd-ph-border);
  position: relative;
  z-index: 9999;
}
.tnd-ph-wrapper *{ box-sizing: border-box; }
.tnd-ph-wrapper a{ text-decoration:none; color:inherit; }
.tnd-ph-wrapper ul{ margin:0; padding:0; }

.tnd-ph-wrapper.tnd-ph-sticky{ position: sticky; top: 0; }

/* Announcement bar */
.tnd-ph-announcement{
  background: #f2f2f2;
  text-align: center;
  font-size: 12.5px;
  letter-spacing: .01em;
  padding: 8px 16px;
  color: var(--tnd-ph-text);
}
.tnd-ph-announcement a{ font-weight: 600; text-decoration: underline; }

/* Main row */
.tnd-ph-main{ padding: 14px 24px; }
.tnd-ph-main-inner{
  max-width: 1400px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  gap: 26px;
}

.tnd-ph-logo-text{
  font-size: 26px;
  font-weight: 800;
  letter-spacing: .01em;
  white-space: nowrap;
}
.tnd-ph-logo img,
.tnd-ph-logo-img{ max-height: 34px; width: auto; display:block; }

/* Inline nav: categories dropdown + custom menu, next to logo */
.tnd-ph-inline-nav{
  display:flex;
  align-items:center;
  gap: 26px;
  flex-shrink: 0;
}

.tnd-ph-cat-dropdown{ position:relative; }
.tnd-ph-cat-btn{
  display:flex;
  align-items:center;
  gap:6px;
  background:none;
  border:none;
  cursor:pointer;
  font-size:14px;
  font-weight:600;
  color: var(--tnd-ph-text);
  padding: 6px 0;
}
.tnd-ph-chevron{ width:14px; height:14px; transition: transform .15s ease; }
.tnd-ph-cat-dropdown.is-open .tnd-ph-chevron,
.tnd-ph-cat-dropdown:hover .tnd-ph-chevron{ transform: rotate(180deg); }

.tnd-ph-cat-panel{
  position:absolute;
  top: 100%;
  left: 0;
  margin-top: 14px;
  background:#fff;
  min-width: 240px;
  max-height: 70vh;
  overflow-y:auto;
  padding: 14px 0;
  box-shadow: 0 16px 34px rgba(0,0,0,.14);
  border-radius: 0 0 10px 10px;
  opacity:0;
  visibility:hidden;
  transform: translateY(6px);
  transition: all .18s ease;
  z-index: 60;
}
.tnd-ph-cat-dropdown:hover .tnd-ph-cat-panel,
.tnd-ph-cat-dropdown.is-open .tnd-ph-cat-panel{
  opacity:1; visibility:visible; transform: translateY(0);
}
.tnd-ph-cat-list > li{ position:relative; }
.tnd-ph-cat-list > li > a{
  display:block;
  padding: 9px 22px;
  font-size:13.5px;
  font-weight:600;
  color: var(--tnd-ph-text);
}
.tnd-ph-cat-list > li:hover{ background:#f8f8f8; }
.tnd-ph-cat-sublist{ list-style:none; }
.tnd-ph-cat-sublist a{
  display:block;
  padding: 6px 22px 6px 34px;
  font-size:13px;
  font-weight:400;
  color: var(--tnd-ph-muted);
}
.tnd-ph-cat-sublist a:hover{ color: var(--tnd-ph-text); }

/* Custom nav menu (boAt Personalisation / Corporate Orders / etc.) */
.tnd-ph-menu{
  list-style:none;
  display:flex;
  align-items:center;
  gap: 24px;
}
.tnd-ph-menu > li{ position:relative; }
.tnd-ph-menu > li > a{
  font-size: 14px;
  font-weight: 600;
  color: var(--tnd-ph-text);
  display:flex;
  align-items:center;
  gap:5px;
  white-space:nowrap;
}
.tnd-ph-menu > li.menu-item-has-children > a::after{
  content:'';
  width:6px; height:6px;
  border-right: 1.6px solid var(--tnd-ph-muted);
  border-bottom: 1.6px solid var(--tnd-ph-muted);
  transform: rotate(45deg);
  margin-top:-3px;
}
.tnd-ph-menu .sub-menu{
  list-style:none;
  position:absolute;
  top: 100%;
  left: 0;
  margin-top:14px;
  background:#fff;
  min-width: 200px;
  padding: 10px 0;
  box-shadow: 0 14px 30px rgba(0,0,0,.14);
  border-radius: 0 0 8px 8px;
  opacity:0;
  visibility:hidden;
  transform: translateY(6px);
  transition: all .18s ease;
  z-index: 50;
}
.tnd-ph-menu li:hover > .sub-menu{ opacity:1; visibility:visible; transform: translateY(0); }
.tnd-ph-menu .sub-menu a{
  display:block;
  padding: 8px 20px;
  color: var(--tnd-ph-text);
  font-size: 13px;
  font-weight: 500;
}
.tnd-ph-menu .sub-menu a:hover{ background:#f6f6f6; }

/* Search (desktop, pushed to the right) */
.tnd-ph-search{ width: 100%; max-width: 360px; margin-left: auto; }
.tnd-ph-search-form{
  display:flex;
  align-items:center;
  background: #f4f4f4;
  border-radius: 999px;
  padding: 9px 16px;
}
.tnd-ph-search-input{
  border:none;
  background: transparent;
  outline:none;
  width:100%;
  font-size:14px;
  color: var(--tnd-ph-text);
  margin-left: 8px;
}
.tnd-ph-search-input::placeholder{ color:#9b9b9b; font-weight:600; }
.tnd-ph-search-btn{
  border:none;
  background: transparent;
  cursor:pointer;
  display:flex;
  align-items:center;
  color: var(--tnd-ph-muted);
  padding:0;
}
.tnd-ph-search-btn svg{ width:17px; height:17px; }

.tnd-ph-mobile-search-toggle{ display:none; }
.tnd-ph-mobile-search-row{ display:none; }

/* Actions */
.tnd-ph-actions{
  display:flex;
  align-items:center;
  gap: 22px;
  flex-shrink:0;
}
.tnd-ph-action{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap: 3px;
  font-size: 11px;
  color: var(--tnd-ph-text);
  font-weight: 500;
  transition: color .15s ease;
}
.tnd-ph-action:hover{ color: var(--tnd-ph-accent); }
.tnd-ph-action svg{ width: 21px; height: 21px; display:block; }

.tnd-ph-cart-icon-wrap{ position:relative; display:inline-flex; }
.tnd-ph-cart-count{
  position:absolute;
  top:-8px; right:-10px;
  background: var(--tnd-ph-accent);
  color:#fff;
  font-size: 10px;
  font-weight: 700;
  line-height: 1;
  min-width: 16px;
  height:16px;
  border-radius: 50%;
  display:flex;
  align-items:center;
  justify-content:center;
  padding: 0 3px;
}

/* Hamburger (hidden on desktop) */
.tnd-ph-hamburger{
  display:none;
  flex-direction:column;
  justify-content:center;
  gap:5px;
  width: 26px;
  height: 22px;
  background:none;
  border:none;
  cursor:pointer;
  padding:0;
  flex-shrink:0;
}
.tnd-ph-hamburger span{
  display:block;
  height:2px;
  width:100%;
  background: currentColor;
  border-radius: 2px;
  transition: transform .2s ease, opacity .2s ease;
}
.tnd-ph-hamburger.is-active span:nth-child(1){ transform: translateY(7px) rotate(45deg); }
.tnd-ph-hamburger.is-active span:nth-child(2){ opacity: 0; }
.tnd-ph-hamburger.is-active span:nth-child(3){ transform: translateY(-7px) rotate(-45deg); }

/* Mobile quick category strip */
.tnd-ph-mobile-cat-strip{
  display:none;
  gap: 18px;
  padding: 14px 16px;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.tnd-ph-mobile-cat-strip::-webkit-scrollbar{ display:none; }
.tnd-ph-mobile-cat-item{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:6px;
  flex-shrink:0;
  width: 64px;
  text-align:center;
}
.tnd-ph-mobile-cat-img{
  width:56px; height:56px;
  border-radius:50%;
  overflow:hidden;
  border:1px solid var(--tnd-ph-border);
  display:flex;
  align-items:center;
  justify-content:center;
  background:#fafafa;
}
.tnd-ph-mobile-cat-img img{ width:100%; height:100%; object-fit:cover; }
.tnd-ph-mobile-cat-label{
  font-size: 10.5px;
  font-weight:600;
  color: var(--tnd-ph-text);
  line-height:1.25;
}

/* Mobile drawer */
.tnd-ph-mobile-panel{
  position: fixed;
  top:0; left:-320px;
  width: 300px;
  max-width: 85vw;
  height: 100vh;
  background:#fff;
  z-index: 10001;
  padding: 22px 18px;
  overflow-y:auto;
  transition: left .25s ease;
  box-shadow: 8px 0 30px rgba(0,0,0,.15);
}
.tnd-ph-mobile-panel.is-open{ left:0; }

.tnd-ph-mobile-block-title{
  font-size: 12px;
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:.04em;
  color: var(--tnd-ph-muted);
  margin: 0 0 8px;
}
.tnd-ph-mobile-cat-block{ margin-bottom: 16px; padding-bottom: 12px; border-bottom: 1px solid var(--tnd-ph-border); }
.tnd-ph-mobile-cat-list{ list-style:none; }
.tnd-ph-mobile-cat-list > li > a{
  display:block;
  padding: 8px 2px;
  font-weight:600;
  font-size:14px;
  color: var(--tnd-ph-text);
}
.tnd-ph-mobile-cat-list .tnd-ph-cat-sublist{ list-style:none; padding-left: 12px; }
.tnd-ph-mobile-cat-list .tnd-ph-cat-sublist a{
  display:block;
  padding: 6px 2px;
  font-size:13px;
  font-weight:400;
  color: var(--tnd-ph-muted);
}

.tnd-ph-mobile-menu{ list-style:none; }
.tnd-ph-mobile-menu li{ border-bottom: 1px solid var(--tnd-ph-border); }
.tnd-ph-mobile-menu > li > a{
  display:block;
  padding: 13px 4px;
  font-weight:600;
  font-size:14px;
  color: var(--tnd-ph-text);
}
.tnd-ph-mobile-menu .sub-menu{ list-style:none; padding: 0 0 8px 14px; }
.tnd-ph-mobile-menu .sub-menu a{
  display:block;
  padding: 8px 4px;
  font-size: 13px;
  color: var(--tnd-ph-muted);
}

.tnd-ph-mobile-overlay{
  position: fixed;
  inset:0;
  background: rgba(0,0,0,.4);
  z-index: 10000;
  opacity:0;
  visibility:hidden;
  transition: opacity .2s ease;
}
.tnd-ph-mobile-overlay.is-open{ opacity:1; visibility:visible; }

body.tnd-ph-noscroll{ overflow:hidden; }

.tnd-ph-menu-notice{
  color: var(--tnd-ph-muted); font-size:12px; padding: 8px 20px; margin:0;
}

/* ===== Responsive breakpoints ===== */
@media (max-width: 1024px){
  .tnd-ph-inline-nav{ gap: 16px; }
  .tnd-ph-menu{ gap: 16px; }
  .tnd-ph-search{ max-width: 240px; }
  .tnd-ph-actions{ gap: 16px; }
  .tnd-ph-main{ padding: 12px 16px; }
}

@media (max-width: 900px){
  .tnd-ph-inline-nav{ display:none; }
}

@media (max-width: 782px){
  .tnd-ph-main-inner{ gap: 14px; }
  .tnd-ph-hamburger{ display:flex; }
  .tnd-ph-search{ display:none; }
  .tnd-ph-mobile-search-toggle{
    display:flex;
    background:none; border:none; cursor:pointer;
    color: currentColor;
    padding:0;
  }
  .tnd-ph-mobile-search-toggle svg{ width:20px; height:20px; }
  .tnd-ph-logo{ flex:1; text-align:center; }
  .tnd-ph-logo-text{ font-size: 20px; }
  .tnd-ph-action-label{ display:none; }
  .tnd-ph-actions{ gap: 16px; }
  .tnd-ph-announcement{ font-size: 11px; padding: 7px 12px; }

  .tnd-ph-mobile-search-row{
    display:none;
    padding: 0 16px 12px;
  }
  .tnd-ph-mobile-search-row.is-open{ display:block; }
  .tnd-ph-mobile-search-row form{
    display:flex; align-items:center;
    background:#f4f4f4; border-radius:999px; padding:9px 14px;
  }
  .tnd-ph-mobile-search-row input{
    border:none; background:transparent; outline:none; width:100%; font-size:14px; margin-left:8px;
  }
  .tnd-ph-mobile-search-row button{ border:none; background:transparent; color: var(--tnd-ph-muted); display:flex; }
  .tnd-ph-mobile-search-row svg{ width:17px; height:17px; }

  .tnd-ph-mobile-cat-strip{ display:flex; }

  /* Dark mobile top bar (boAt style) */
  .tnd-ph-wrapper.tnd-ph-mobile-dark .tnd-ph-main{
    background: var(--tnd-ph-mobile-bar-bg);
    color: var(--tnd-ph-mobile-bar-text);
    padding-bottom: 14px;
  }
  .tnd-ph-wrapper.tnd-ph-mobile-dark .tnd-ph-hamburger span{ background: var(--tnd-ph-mobile-bar-text); }
  .tnd-ph-wrapper.tnd-ph-mobile-dark .tnd-ph-action{ color: var(--tnd-ph-mobile-bar-text); }
  .tnd-ph-wrapper.tnd-ph-mobile-dark .tnd-ph-cart-count{ background:#fff; color:#111; }
  .tnd-ph-wrapper.tnd-ph-mobile-dark .tnd-ph-mobile-search-row form{ background: rgba(255,255,255,.12); }
  .tnd-ph-wrapper.tnd-ph-mobile-dark .tnd-ph-mobile-search-row input{ color:#fff; }
  .tnd-ph-wrapper.tnd-ph-mobile-dark .tnd-ph-mobile-search-row input::placeholder{ color: rgba(255,255,255,.6); }
  .tnd-ph-wrapper.tnd-ph-mobile-dark .tnd-ph-mobile-search-row button{ color:#fff; }
}

@media (max-width: 380px){
  .tnd-ph-actions{ gap: 12px; }
  .tnd-ph-main{ padding: 10px 12px; }
  .tnd-ph-mobile-cat-item{ width: 56px; }
  .tnd-ph-mobile-cat-img{ width:48px; height:48px; }
}